/* ============================================================
   MedNova — stylesheet
   Structure:
     1. Tokens (type, space, radius, color themes)
     2. Base and utilities
     3. Header and navigation
     4. Buttons and pills
     5. Hero and report preview
     6. Section scaffolding
     7. Why now (quotes, cards)
     8. Gap analysis demo
     9. Platform (flow, split)
    10. How it works (steps, outcome)
    11. Data sources (facts, pareto, evidence figure, contrast)
    12. Compliance, programs
    13. CTA and footer
    14. Motion
   ============================================================ */

/* ------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------ */
:root {
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-ui: 'General Sans', 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Satoshi', 'General Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid type scale: minor third on small screens widening toward desktop */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.84rem, 0.81rem + 0.18vw, 0.9375rem);
  --text-base: clamp(0.96rem, 0.93rem + 0.2vw, 1.0625rem);
  --text-md: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --text-lg: clamp(1.15rem, 1.05rem + 0.6vw, 1.45rem);
  --text-xl: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  --text-2xl: clamp(1.95rem, 1.3rem + 2.6vw, 3.4rem);
  --text-hero: clamp(2.6rem, 1.2rem + 5.4vw, 5.6rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --section-y: clamp(3.25rem, 2rem + 5vw, 7rem);
  --gutter: clamp(1rem, 0.4rem + 3vw, 2.5rem);
  --header-h: 64px;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --content-narrow: 680px;
  --content-default: 1160px;
  --content-wide: 1240px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 160ms var(--ease-out);
  --t-med: 320ms var(--ease-out);
}

:root,
[data-theme='light'] {
  color-scheme: light;
  --color-bg: #ffffff;
  --color-surface: #f6f8fc;
  --color-surface-2: #eceff6;
  --color-border: #dde3ee;
  --color-divider: #e8edf5;

  --color-text: #0c1a33;
  --color-text-muted: #51607a;
  --color-text-faint: #8391ab;
  --color-text-inverse: #ffffff;
  --color-ink: #0c1a33;
  --color-ink-2: #142547;

  --color-primary: #1f4fd8;
  --color-primary-hover: #1a43b8;
  --color-primary-active: #163a9e;
  --color-primary-highlight: #eef3ff;
  --color-primary-soft: #d3dffb;
  --color-primary-glow: rgba(31, 79, 216, 0.14);

  --color-critical: #b42318;
  --color-critical-bg: #fdeeec;
  --color-major: #a86a0f;
  --color-major-bg: #fdf3e1;
  --color-minor: #4a5a78;
  --color-minor-bg: #eef1f7;

  --color-clear: #0e7c6b;
  --color-clear-bg: #e6f6f1;
  --color-conditional: var(--color-major);
  --color-conditional-bg: var(--color-major-bg);
  --color-evidence: var(--color-critical);
  --color-evidence-bg: var(--color-critical-bg);

  --shadow-sm: 0 1px 2px rgba(12, 26, 51, 0.06);
  --shadow-md: 0 6px 20px -6px rgba(12, 26, 51, 0.12), 0 2px 6px rgba(12, 26, 51, 0.05);
  --shadow-lg: 0 30px 70px -24px rgba(12, 26, 51, 0.28), 0 10px 24px -12px rgba(12, 26, 51, 0.12);
  --header-bg: rgba(255, 255, 255, 0.84);
}

[data-theme='dark'],
.theme-dark-scope {
  color-scheme: dark;
  --color-bg: #0a1326;
  --color-surface: #0f1a30;
  --color-surface-2: #182540;
  --color-border: #233454;
  --color-divider: #1a2843;

  --color-text: #e8edf7;
  --color-text-muted: #a3b0c8;
  --color-text-faint: #6f7f9e;
  --color-text-inverse: #0a1326;
  --color-ink: #06101f;
  --color-ink-2: #0d1a33;

  --color-primary: #7ea4ff;
  --color-primary-hover: #9cb9ff;
  --color-primary-active: #6b93f5;
  --color-primary-highlight: #15224a;
  --color-primary-soft: #263d7c;
  --color-primary-glow: rgba(126, 164, 255, 0.16);

  --color-critical: #ff8f80;
  --color-critical-bg: #3a1613;
  --color-major: #f2b95e;
  --color-major-bg: #3a2a0d;
  --color-minor: #aab7d2;
  --color-minor-bg: #1c2742;

  --color-clear: #52d4b2;
  --color-clear-bg: #0f3028;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 20px -6px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 30px 70px -24px rgba(0, 0, 0, 0.7), 0 10px 24px -12px rgba(0, 0, 0, 0.5);
  --header-bg: rgba(10, 19, 38, 0.82);
}

/* ------------------------------------------------------------
   2. Base and utilities
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  min-height: 100dvh;
  line-height: 1.6;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: clip;
  overflow-wrap: break-word;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

ul,
ol {
  list-style: none;
}

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

::selection {
  background: var(--color-primary-soft);
  color: var(--color-text);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--t-fast);
}
.skip-link:focus {
  top: var(--space-3);
}

.anchor-top {
  position: absolute;
  top: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ------------------------------------------------------------
   3. Header and navigation
   ------------------------------------------------------------ */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  padding-top: env(safe-area-inset-top, 0px);
}
.header--scrolled {
  border-bottom-color: var(--color-divider);
  box-shadow: var(--shadow-sm);
}
.header__inner {
  max-width: calc(var(--content-wide) + 2 * var(--gutter));
  min-height: var(--header-h);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.brand__mark {
  width: 26px;
  height: 26px;
  color: var(--color-primary);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.4rem + 1vw, 1.75rem);
}
.nav__list a {
  position: relative;
  display: inline-block;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: color var(--t-fast);
}
.nav__list a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med);
}
.nav__list a:hover,
.nav__list a.is-active {
  color: var(--color-text);
}
.nav__list a.is-active::after {
  transform: scaleX(1);
}
.nav__mobile-actions {
  display: none;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.theme-toggle {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.theme-toggle:hover {
  color: var(--color-text);
  border-color: var(--color-text-faint);
  background: var(--color-surface);
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -6px;
  border-radius: var(--radius-sm);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle__bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-text);
  transition: transform var(--t-med), opacity var(--t-fast);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(12, 26, 51, 0.36);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.nav-scrim[hidden] {
  display: none;
}

/* Collapsed navigation below 1024px */
@media (max-width: 1023.98px) {
  .nav-toggle {
    display: flex;
  }
  .nav {
    position: fixed;
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    z-index: 58;
    max-height: calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px));
    overflow-y: auto;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-divider);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2) var(--gutter) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--t-med), transform var(--t-med), visibility 0s linear 320ms;
  }
  .nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--t-med), transform var(--t-med), visibility 0s;
  }
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__list li + li {
    border-top: 1px solid var(--color-divider);
  }
  .nav__list a {
    display: block;
    padding: 0.9rem 0;
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--color-text);
  }
  .nav__list a::after {
    display: none;
  }
  .nav__list a.is-active {
    color: var(--color-primary);
  }
  .nav__mobile-actions {
    display: block;
    margin-top: var(--space-4);
  }
}
@media (max-width: 599.98px) {
  .header__actions .header__cta {
    display: none;
  }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .nav__list {
    gap: 0.85rem;
  }
  .nav__list a {
    font-size: 0.82rem;
  }
  .header__actions .header__cta {
    padding: 0 var(--space-4);
    font-size: 0.82rem;
  }
}

/* ------------------------------------------------------------
   4. Buttons and pills
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.005em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.btn:active {
  transform: translateY(1px);
}
.btn--lg {
  min-height: 48px;
  padding: 0 var(--space-6);
  font-size: var(--text-base);
}
.btn--block {
  width: 100%;
}
.btn--primary {
  background: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 6px 16px -8px var(--color-primary);
}
.btn--primary:hover {
  background: var(--color-primary-hover);
}
[data-theme='dark'] .btn--primary,
.theme-dark-scope .btn--primary {
  color: var(--color-text-inverse);
}
.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn--ghost:hover {
  border-color: var(--color-text-faint);
  background: var(--color-surface);
}
.btn--inverse {
  background: #ffffff;
  color: var(--color-ink);
}
.btn--inverse:hover {
  background: #eef3ff;
}
.btn--outline-inverse {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
}
.btn--outline-inverse:hover {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
}
.btn:disabled {
  opacity: 0.7;
  cursor: progress;
  transform: none;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.5;
  white-space: nowrap;
}
.pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.pill--critical,
.pill--evidence {
  color: var(--color-critical);
  background: var(--color-critical-bg);
}
.pill--major,
.pill--conditional {
  color: var(--color-major);
  background: var(--color-major-bg);
}
.pill--minor {
  color: var(--color-minor);
  background: var(--color-minor-bg);
}
.pill--clear {
  color: var(--color-clear);
  background: var(--color-clear-bg);
}

/* ------------------------------------------------------------
   5. Hero and report preview
   ------------------------------------------------------------ */
.hero {
  position: relative;
  padding: clamp(2.5rem, 1.5rem + 4vw, 6rem) var(--gutter) clamp(3rem, 2rem + 4vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--color-divider) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-divider) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 10%, transparent 70%);
  opacity: 0.9;
}
.hero__grid::after {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 72% 28%, var(--color-primary-glow), transparent 48%);
}
.hero__inner {
  max-width: var(--content-default);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  max-width: 40rem;
}
.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.04;
  max-width: 13ch;
}
.hero__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--color-primary);
}
.hero__sub {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 48ch;
}
.hero__sub strong {
  color: var(--color-text);
  font-weight: 600;
}
.hero__thesis {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.4;
  color: var(--color-text);
  max-width: 34ch;
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-primary);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-1);
}
.hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-2);
}
.hero__pill {
  position: relative;
  padding-left: 14px;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-faint);
  white-space: nowrap;
}
.hero__pill::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  transform: translateY(-50%);
}

.hero__visual {
  width: 100%;
  max-width: 600px;
  justify-self: start;
}

/* Report preview card */
.preview {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.preview__bar,
.demo__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
}
.preview__dots,
.demo__dots {
  display: inline-flex;
  gap: 5px;
}
.preview__dots i,
.demo__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
}
.preview__title,
.demo__title {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.preview__status,
.demo__status {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-primary);
  white-space: nowrap;
}
.preview__body {
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
}
.preview__score {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.preview__gauge {
  position: relative;
  width: 92px;
  height: 92px;
  flex-shrink: 0;
}
.preview__track,
.gauge__track {
  fill: none;
  stroke: var(--color-surface-2);
  stroke-width: 10;
}
.preview__arc {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 326.73;
  stroke-dashoffset: 156.83; /* 52 of 100 */
}
.preview__value,
.gauge__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  padding-top: 32px;
  gap: 2px;
}
.preview__num {
  font-family: var(--font-ui);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}
.preview__denom,
.gauge__denom {
  font-size: 0.7rem;
  color: var(--color-text-faint);
}
.preview__score-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.preview__score-label {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.preview__stats {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.preview__stats strong {
  color: var(--color-text);
  font-weight: 600;
}
.preview__sep {
  color: var(--color-text-faint);
  margin: 0 2px;
}
.preview__findings {
  display: grid;
  gap: var(--space-2);
}
.preview__finding {
  display: grid;
  gap: 6px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}
.preview__finding--critical {
  border-left-color: var(--color-critical);
}
.preview__finding--major {
  border-left-color: var(--color-major);
}
.preview__tags {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.preview__domain,
.gap-row__domain {
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--color-text-faint);
}
.preview__text {
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-text);
}
.preview__cite {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-primary);
  overflow-wrap: anywhere;
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  }
  .hero__visual {
    justify-self: end;
  }
}
@media (max-width: 1023.98px) {
  .hero__grid {
    -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 20%, #000 10%, transparent 70%);
    mask-image: radial-gradient(ellipse 90% 60% at 50% 20%, #000 10%, transparent 70%);
  }
}
@media (max-width: 479.98px) {
  .hero__cta {
    width: 100%;
  }
  .hero__cta .btn {
    width: 100%;
  }
  .preview__body {
    padding: var(--space-4);
  }
  .preview__score {
    gap: var(--space-3);
  }
  .preview__gauge {
    width: 80px;
    height: 80px;
  }
  .preview__value {
    padding-top: 28px;
  }
  .preview__num {
    font-size: 1.4rem;
  }
  .preview__findings li:nth-child(3) {
    display: none;
  }
}

/* ------------------------------------------------------------
   6. Section scaffolding
   ------------------------------------------------------------ */
.section {
  padding: var(--section-y) var(--gutter);
}
.section--tint {
  background: var(--color-surface);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}
.section--tint + .section--tint {
  border-top: 0;
}
.section__inner {
  max-width: var(--content-default);
  margin: 0 auto;
}
.section__inner--wide {
  max-width: var(--content-default);
}
.section__head {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
}
.section__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
}
.section__kicker::before {
  content: '';
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.section__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  max-width: 22ch;
}
.section__lede {
  margin-top: var(--space-5);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 60ch;
}

/* ------------------------------------------------------------
   7. Why now
   ------------------------------------------------------------ */
.quote-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}
.quote {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.quote::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--space-6);
  bottom: var(--space-6);
  width: 3px;
  border-radius: 3px;
  background: var(--color-primary);
}
.quote__text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--color-text);
}
.quote__attribution {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}
.quote__attribution a {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-primary-soft);
}
.quote__attribution a:hover {
  text-decoration-color: currentColor;
}
.quote-group__note {
  margin: var(--space-6) 0 0;
  max-width: 64ch;
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

.problem__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin-top: clamp(2rem, 1.25rem + 2.5vw, 3.25rem);
}
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.card:hover {
  border-color: var(--color-primary-soft);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.card__title {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.card__body {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-text-muted);
}

@media (min-width: 800px) {
  .quote-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Inline reference links used in body copy and findings */
.gap-row__link {
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-primary-soft);
  transition: text-decoration-color var(--t-fast);
}
.gap-row__link:hover {
  text-decoration-color: currentColor;
}

/* ------------------------------------------------------------
   8. Gap analysis demo
   ------------------------------------------------------------ */
.section--demo {
  position: relative;
}
.demo {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.demo__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.demo__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
}
.demo__main {
  min-width: 0;
  padding: var(--space-5);
}

.demo__input {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}
.demo__label,
.gap-row__label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text-faint);
}
.demo__label {
  margin-bottom: var(--space-2);
}
.demo__text {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text);
}

.demo__summary {
  display: grid;
  gap: var(--space-4);
}
.gauge-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.gauge {
  position: relative;
  width: 104px;
  height: 104px;
  flex-shrink: 0;
}
.gauge__svg {
  width: 100%;
  height: 100%;
}
.gauge__arc {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.gauge__value {
  padding-top: 36px;
}
.gauge__num {
  font-family: var(--font-ui);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.gauge__label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.gauge__caption {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.statstrip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}
.statstrip__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  min-width: 0;
}
.statstrip__num {
  order: -1; /* markup is dt then dd (valid dl); the number still reads first */
  font-family: var(--font-ui);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.statstrip__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.demo__controls {
  display: grid;
}

.sev-key {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}
.sev-key__row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}
.sev-key__row dd {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-text-muted);
}
.sev-key__note {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-text-faint);
}

.demo__findings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.demo__findings-title {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}
.demo__expand {
  min-height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-xs);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
  transition: background var(--t-fast);
}
.demo__expand:hover {
  background: var(--color-primary-highlight);
}

.demo__gaps {
  display: grid;
  gap: var(--space-3);
}
.gap-row {
  border: 1px solid var(--color-border);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  overflow: hidden;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), opacity 400ms ease, transform 400ms ease;
}
.gap-row--critical { border-left-color: var(--color-critical); }
.gap-row--major { border-left-color: var(--color-major); }
.gap-row--minor { border-left-color: var(--color-minor); }
.gap-row.is-open {
  box-shadow: var(--shadow-md);
}
html.js .gap-row:not(.is-visible) {
  opacity: 0;
  transform: translateY(6px);
}
.gap-row__heading {
  font: inherit;
  text-wrap: pretty;
}
.gap-row__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  width: 100%;
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  transition: background var(--t-fast);
}
.gap-row__head:hover {
  background: var(--color-surface);
}
.gap-row__head:focus-visible {
  outline-offset: -3px;
}
.gap-row__tags {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 128px;
}
.gap-row__finding {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text);
}
.gap-row__chevron {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--color-text-faint);
  background: var(--color-surface);
  transition: transform var(--t-med), color var(--t-fast);
}
.gap-row__chevron svg {
  width: 16px;
  height: 16px;
}
.gap-row.is-open .gap-row__chevron {
  transform: rotate(180deg);
  color: var(--color-primary);
}

.gap-row__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-med);
}
.gap-row.is-open .gap-row__body {
  grid-template-rows: 1fr;
}
.gap-row__body-inner {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 320ms;
}
.gap-row.is-open .gap-row__body-inner {
  visibility: visible;
  transition-delay: 0s;
}
.gap-row__body-inner > * {
  margin: 0 var(--space-4);
}
.gap-row__body-inner > :first-child {
  margin-top: var(--space-1);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}
.gap-row__body-inner > :last-child {
  margin-bottom: var(--space-4);
}
.gap-row__body-inner > * + * {
  margin-top: var(--space-3);
}

.gap-row__basis {
  display: grid;
  gap: var(--space-2);
}
.gap-row__basis-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gap-row__cite {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-primary);
  overflow-wrap: anywhere;
}
.gap-row__guidance {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.gap-row__section {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xs);
}
.gap-row__section--evidence {
  background: var(--color-surface);
}
.gap-row__section--precedent {
  background: var(--color-surface-2);
}
.gap-row__section--question {
  background: var(--color-primary-highlight);
}
.gap-row__section--question .gap-row__label {
  color: var(--color-primary);
}
.gap-row__section--action {
  background: var(--color-clear-bg);
}
.gap-row__section--action .gap-row__label {
  color: var(--color-clear);
}
.gap-row__list {
  display: grid;
  gap: 6px;
}
.gap-row__list li {
  position: relative;
  padding-left: 1.35em;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}
.gap-row__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--color-critical);
  box-sizing: border-box;
}
.gap-row__section-text {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text);
}
.gap-row__predicted {
  font-weight: 400;
  color: var(--color-text-faint);
}
.gap-row__resolution {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}
.gap-row__resolution-value {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.demo__hints {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}
.demo__hint {
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--color-text-faint);
}

@media (min-width: 960px) {
  .demo__layout {
    grid-template-columns: 320px minmax(0, 1fr);
  }
  .demo__side {
    position: sticky;
    top: calc(var(--header-h) + 16px);
    align-self: start;
    border-bottom: 0;
    border-right: 1px solid var(--color-divider);
    padding: var(--space-6) var(--space-5);
  }
  .demo__main {
    padding: var(--space-6);
  }
}
@media (min-width: 1200px) {
  .demo__layout {
    grid-template-columns: 340px minmax(0, 1fr);
  }
}
@media (max-width: 959.98px) {
  .demo__side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4) var(--space-5);
    align-items: start;
  }
  .demo__input { grid-column: 1 / -1; }
  .demo__summary {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-5);
  }
  .statstrip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .demo__controls { grid-column: 1 / -1; }
  .sev-key { grid-column: 1 / -1; }
  .sev-key__note { grid-column: 1 / -1; }
}
@media (max-width: 639.98px) {
  .demo__side {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo__summary {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo__side,
  .demo__main {
    padding: var(--space-4);
  }
  .statstrip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sev-key__row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}
@media (max-width: 559.98px) {
  .gap-row__head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  }
  .gap-row__tags {
    grid-column: 1;
    min-width: 0;
  }
  .gap-row__chevron {
    grid-column: 2;
    grid-row: 1;
  }
  .gap-row__finding {
    grid-column: 1 / -1;
  }
  .gap-row__body-inner > * {
    margin-left: var(--space-3);
    margin-right: var(--space-3);
  }
  .gap-row__section {
    padding: var(--space-3);
  }
}
@media (max-width: 359.98px) {
  .statstrip__num {
    font-size: 1.2rem;
  }
  .gauge-wrap {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ------------------------------------------------------------
   9. Platform
   ------------------------------------------------------------ */
.flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  counter-reset: flow;
}
.flow__item {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas: 'num title' 'num body';
  column-gap: var(--space-3);
  row-gap: 4px;
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
}
.flow__item + .flow__item {
  border-top: 1px solid var(--color-divider);
}
.flow__num {
  grid-area: num;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-primary-soft);
  background: var(--color-bg);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-primary);
}
.flow__item h3 {
  grid-area: title;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 600;
  align-self: center;
}
.flow__item p {
  grid-area: body;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin-top: clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
}
.split__col {
  padding: var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
}
.split__col--does {
  background: var(--color-primary-highlight);
  border-color: var(--color-primary-soft);
}
.split__title {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-4);
}
.split__intro {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.checklist {
  display: grid;
  gap: var(--space-3);
}
.checklist li {
  position: relative;
  padding-left: var(--space-7);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text);
}
.checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23000' fill-opacity='.18'/%3E%3Cpath d='M5.2 9.3l2.4 2.4 5.2-5.4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23000' fill-opacity='.18'/%3E%3Cpath d='M5.2 9.3l2.4 2.4 5.2-5.4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.checklist--muted li {
  color: var(--color-text-muted);
}
.checklist--muted li::before {
  background: var(--color-text-faint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23000' fill-opacity='.18'/%3E%3Cpath d='M6 6l6 6M12 6l-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23000' fill-opacity='.18'/%3E%3Cpath d='M6 6l6 6M12 6l-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.checklist--dash li {
  color: var(--color-text-muted);
}
.checklist--dash li::before {
  background: var(--color-text-faint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23000' fill-opacity='.18'/%3E%3Cpath d='M5.5 9h7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23000' fill-opacity='.18'/%3E%3Cpath d='M5.5 9h7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (min-width: 800px) {
  .split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}
@media (min-width: 1024px) {
  .flow {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
  }
  .flow__item {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'num' 'title' 'body';
    row-gap: var(--space-2);
    padding: 0 var(--space-5) 0 0;
  }
  .flow__item + .flow__item {
    border-top: 0;
    padding-left: var(--space-5);
    border-left: 1px solid var(--color-divider);
  }
  .flow__num {
    margin-bottom: var(--space-2);
  }
  /* connector line from each marker toward the next step */
  .flow__item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 17px;
    left: 48px;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, var(--color-primary-soft), var(--color-divider));
  }
}

/* ------------------------------------------------------------
   10. How it works
   ------------------------------------------------------------ */
.how__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}
.steps {
  display: grid;
  position: relative;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: var(--space-4);
  padding-bottom: var(--space-6);
}
.step:last-child {
  padding-bottom: 0;
}
.step::before {
  content: '';
  position: absolute;
  left: 21px;
  top: 40px;
  bottom: -4px;
  width: 1px;
  background: var(--color-border);
}
.step:last-child::before {
  display: none;
}
.step__num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-primary-highlight);
  border: 1px solid var(--color-primary-soft);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-primary);
}
.step__content {
  padding-top: 8px;
}
.step__title {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
}
.step__body {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: 56ch;
}

.outcome {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.outcome__label {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-5);
}
.outcome__defs {
  display: grid;
  gap: var(--space-3);
}
.outcome__def {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left-width: 3px;
}
.outcome__def--clear { border-left-color: var(--color-clear); }
.outcome__def--conditional { border-left-color: var(--color-major); }
.outcome__def--evidence { border-left-color: var(--color-critical); }
.outcome__def .pill {
  justify-self: start;
}
.outcome__def p {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
}
.outcome__note {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

@media (min-width: 1024px) {
  .how__layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--space-12);
  }
  .outcome {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
}

/* ------------------------------------------------------------
   11. Data sources
   ------------------------------------------------------------ */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3rem);
}
.facts__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.facts__item--status {
  color: var(--color-text);
  border-color: var(--color-primary-soft);
  background: var(--color-primary-highlight);
}
.facts__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-clear);
  box-shadow: 0 0 0 3px var(--color-clear-bg);
}

.pareto__label {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.pareto__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}
.pareto-card {
  display: grid;
  gap: 4px;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.pareto-card:hover {
  border-color: var(--color-primary-soft);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.pareto-card__count {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.pareto-card__title {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 600;
  margin-top: var(--space-2);
}
.pareto-card__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.pareto__note {
  margin-top: var(--space-4);
  max-width: 68ch;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.crl-note {
  margin: var(--space-6) 0 0;
  padding: var(--space-4) var(--space-5);
  max-width: 72ch;
  border-radius: var(--radius-sm);
  background: var(--color-primary-highlight);
  border: 1px solid var(--color-primary-soft);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
}
.crl-note strong {
  color: var(--color-text);
  font-weight: 600;
}

.evidence-figure {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}
.evidence-figure__caption {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.evidence-figure__gap {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-text);
}
.evidence-figure__gap strong {
  font-weight: 600;
  color: var(--color-critical);
}
.evidence-figure__resolve {
  font-size: var(--text-base);
  color: var(--color-text-muted);
}
.sources-cited {
  justify-self: start;
  margin-top: var(--space-2);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.sources-cited strong {
  color: var(--color-primary);
  font-weight: 700;
}
.evidence-svg {
  width: 100%;
  height: auto;
  max-width: 920px;
  margin: 0 auto;
}
.evidence-mobile {
  display: none;
}
.evidence-mobile__gap {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-primary-highlight);
  border: 1px solid var(--color-primary-soft);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.evidence-mobile__gap strong {
  color: var(--color-critical);
}
.evidence-mobile__list {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.evidence-mobile__list li {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}
.evidence-mobile__list strong {
  color: var(--color-text);
  font-weight: 600;
}
.evidence-figure__foot {
  margin-top: var(--space-5);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-text-faint);
  max-width: 76ch;
}

.contrast {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.contrast__col {
  padding: var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.contrast__col--plain {
  background: var(--color-bg);
}
.contrast__col--accent {
  background: var(--color-primary-highlight);
  border-color: var(--color-primary-soft);
}
.contrast__title {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

@media (min-width: 720px) {
  .contrast {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 719.98px) {
  .evidence-svg {
    display: none;
  }
  .evidence-mobile {
    display: block;
  }
  .evidence-figure__gap {
    display: none;
  }
  .evidence-figure {
    padding: var(--space-5) var(--space-4);
  }
}
@media (max-width: 479.98px) {
  .facts__item {
    white-space: normal;
  }
}

/* ------------------------------------------------------------
   12. Compliance and programs
   ------------------------------------------------------------ */
.compliance__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-4);
}
.compliance__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) 0 0;
  border-top: 2px solid var(--color-border);
  transition: border-color var(--t-fast);
}
.compliance__item:hover {
  border-top-color: var(--color-primary);
}
.compliance__item strong {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 600;
}
.compliance__item span {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
}

.programs__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
.program {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.program:hover {
  border-color: var(--color-primary-soft);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.program--featured {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary) inset;
}
.program__title {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.program__body {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-text-muted);
  flex: 1;
}
.program__link {
  align-self: flex-start;
  margin-top: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-primary-soft);
}
.program__link:hover {
  text-decoration-color: currentColor;
}

/* ------------------------------------------------------------
   13. CTA and footer
   ------------------------------------------------------------ */
.cta {
  position: relative;
  padding: var(--section-y) var(--gutter);
  background:
    radial-gradient(circle at 85% 20%, rgba(126, 164, 255, 0.22), transparent 42%),
    linear-gradient(160deg, var(--color-ink-2), var(--color-ink));
  color: #ffffff;
  overflow: hidden;
}
.cta__inner {
  max-width: var(--content-default);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}
.cta__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  max-width: 18ch;
}
.cta__sub {
  margin-top: var(--space-4);
  font-size: var(--text-md);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.76);
  max-width: 44ch;
}
.cta__panel {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
}
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.cta__contact {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
}
@media (min-width: 900px) {
  .cta__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-12);
  }
}
@media (max-width: 479.98px) {
  .cta__actions .btn {
    width: 100%;
  }
  .cta__panel {
    padding: var(--space-5);
  }
}

.footer {
  padding: clamp(2.5rem, 2rem + 2vw, 4rem) var(--gutter) calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-divider);
  background: var(--color-bg);
}
.footer__inner {
  max-width: var(--content-default);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}
.footer__brand {
  display: grid;
  gap: var(--space-2);
}
.footer__tag {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}
.footer__nav a {
  display: inline-block;
  padding: 6px 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color var(--t-fast);
}
.footer__nav a:hover {
  color: var(--color-text);
}
.footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.footer__meta li {
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.footer__legal {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-divider);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-text-faint);
  max-width: 72ch;
}
@media (min-width: 800px) {
  .footer__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'brand nav' 'meta meta' 'legal legal';
    align-items: start;
  }
  .footer__brand { grid-area: brand; }
  .footer__nav { grid-area: nav; justify-content: flex-end; }
  .footer__meta { grid-area: meta; }
  .footer__legal { grid-area: legal; }
}

/* ------------------------------------------------------------
   14. Motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  /* Scroll-triggered entrance: short, opacity-led, applied once per block */
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(6px);
    transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out), filter 640ms var(--ease-out);
  }
  html.js [data-reveal].is-in {
    opacity: 1;
    transform: none;
    filter: none;
  }
  html.js [data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out), border-color var(--t-fast), box-shadow var(--t-fast);
  }
  html.js [data-reveal-stagger].is-in > * {
    opacity: 1;
    transform: none;
  }
  html.js [data-reveal-stagger].is-in > :nth-child(1) { transition-delay: 60ms; }
  html.js [data-reveal-stagger].is-in > :nth-child(2) { transition-delay: 140ms; }
  html.js [data-reveal-stagger].is-in > :nth-child(3) { transition-delay: 220ms; }
  html.js [data-reveal-stagger].is-in > :nth-child(4) { transition-delay: 300ms; }
  html.js [data-reveal-stagger].is-in > :nth-child(5) { transition-delay: 380ms; }
  html.js [data-reveal-stagger].is-in > :nth-child(6) { transition-delay: 460ms; }
  html.js [data-reveal-stagger].is-in > :nth-child(7) { transition-delay: 540ms; }
  html.js [data-reveal-stagger].is-in > :nth-child(n+8) { transition-delay: 600ms; }

  /* One orchestrated hero sequence on page load */
  .hero__copy > :not(.hero__title) {
    animation: hero-rise 720ms var(--ease-out) both;
  }
  .hero__copy > :nth-child(2) { animation-delay: 520ms; }
  .hero__copy > :nth-child(3) { animation-delay: 640ms; }
  .hero__copy > :nth-child(4) { animation-delay: 760ms; }
  .hero__copy > :nth-child(5) { animation-delay: 880ms; }
  .hero__visual {
    animation: hero-card 900ms var(--ease-out) 420ms both;
  }
  .preview__arc {
    animation: preview-draw 1100ms cubic-bezier(0.22, 1, 0.36, 1) 700ms both;
  }
  .preview__finding {
    animation: hero-rise 480ms var(--ease-out) both;
  }
  .preview__finding:nth-child(1) { animation-delay: 820ms; }
  .preview__finding:nth-child(2) { animation-delay: 940ms; }
  .preview__finding:nth-child(3) { animation-delay: 1060ms; }
}

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(16px); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes hero-card {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes preview-draw {
  from { stroke-dashoffset: 326.73; }
  to { stroke-dashoffset: 156.83; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html {
    scroll-behavior: auto;
  }
  html.js .gap-row:not(.is-visible) {
    opacity: 1;
    transform: none;
  }
}

@media (hover: none) {
  .card:hover,
  .pareto-card:hover,
  .program:hover {
    transform: none;
  }
}

@media print {
  .header,
  .nav-scrim,
  .theme-toggle,
  .nav-toggle,
  .demo__controls,
  .demo__expand,
  .hero__visual {
    display: none !important;
  }
  .gap-row__body {
    grid-template-rows: 1fr !important;
  }
  .gap-row__body-inner {
    visibility: visible !important;
  }
  .cta {
    background: none;
    color: var(--color-text);
  }
}

/* Three-item grids: pair plus full-width third on tablets, three across on desktop */
@media (min-width: 600px) {
  .problem__grid,
  .pareto__grid,
  .programs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .problem__grid > :nth-child(3),
  .pareto__grid > :nth-child(3),
  .programs__grid > :nth-child(3) {
    grid-column: 1 / -1;
  }
}
@media (min-width: 900px) {
  .problem__grid,
  .pareto__grid,
  .programs__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .problem__grid > :nth-child(3),
  .pareto__grid > :nth-child(3),
  .programs__grid > :nth-child(3) {
    grid-column: auto;
  }
}


/* ============================================================
   15. Luxury pass: depth, light, and motion
   ============================================================ */
:root {
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
@media (min-width: 1440px) {
  :root {
    --content-default: 1220px;
    --content-wide: 1320px;
  }
  .hero__visual {
    max-width: 660px;
  }
}

/* Scroll progress */
.scroll-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--color-primary), color-mix(in oklab, var(--color-primary) 55%, #7ee0d0));
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* Header: compact on scroll */
.header__inner {
  transition: min-height var(--t-med);
}
.header--scrolled .header__inner {
  min-height: 58px;
}

/* Buttons: gradient body, sheen on hover, deeper lift */
.btn--primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 86%, #ffffff), var(--color-primary) 60%, var(--color-primary-hover));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 10px 24px -10px var(--color-primary), 0 2px 6px -2px rgba(12, 26, 51, 0.2);
}
.btn--primary::after {
  content: '';
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-18deg) translateX(0);
  transition: transform 700ms var(--ease-out);
  pointer-events: none;
}
.btn--primary:hover {
  background: linear-gradient(180deg, color-mix(in oklab, var(--color-primary-hover) 80%, #ffffff), var(--color-primary-hover) 60%, var(--color-primary-active));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 16px 30px -12px var(--color-primary), 0 4px 10px -4px rgba(12, 26, 51, 0.25);
  transform: translateY(-1px);
}
.btn--primary:hover::after {
  transform: skewX(-18deg) translateX(420%);
}
.btn--ghost {
  background: color-mix(in oklab, var(--color-bg) 70%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Gradient-border surfaces */
.card,
.pareto-card,
.program,
.quote,
.split__col,
.contrast__col,
.outcome,
.preview,
.demo {
  border-color: transparent;
  background:
    linear-gradient(var(--surface-fill, var(--color-bg)), var(--surface-fill, var(--color-bg))) padding-box,
    linear-gradient(145deg, color-mix(in oklab, var(--color-primary) 28%, var(--color-border)), var(--color-border) 45%, color-mix(in oklab, var(--color-primary) 14%, var(--color-border))) border-box;
}
.split__col--does,
.contrast__col--accent { --surface-fill: var(--color-primary-highlight); }
.outcome { --surface-fill: var(--color-surface); }
.preview,
.demo { --surface-fill: var(--color-surface); }
.card:hover,
.pareto-card:hover,
.program:hover {
  background:
    linear-gradient(var(--surface-fill, var(--color-bg)), var(--surface-fill, var(--color-bg))) padding-box,
    linear-gradient(145deg, color-mix(in oklab, var(--color-primary) 60%, var(--color-border)), color-mix(in oklab, var(--color-primary) 20%, var(--color-border))) border-box;
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.program--featured {
  --surface-fill: var(--color-bg);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-primary) 55%, transparent), 0 24px 50px -30px var(--color-primary);
}

/* Cursor spotlight */
[data-spotlight] {
  position: relative;
  overflow: hidden;
}
[data-spotlight]::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--color-primary-glow), transparent 55%);
  opacity: 0;
  transition: opacity 360ms var(--ease-out);
  pointer-events: none;
}
[data-spotlight]:hover::before {
  opacity: 1;
}
[data-spotlight] > * {
  position: relative;
  z-index: 1;
}

/* Hero: aurora, noise, headline scale */
.hero {
  padding-top: clamp(2.75rem, 1.5rem + 5vw, 7rem);
  padding-bottom: clamp(3.5rem, 2rem + 5vw, 7rem);
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--noise);
  opacity: 0.05;
  mix-blend-mode: multiply;
  pointer-events: none;
}
[data-theme='dark'] .hero::after {
  mix-blend-mode: screen;
  opacity: 0.06;
}
.hero__aurora {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.9;
}
.hero__aurora--a {
  width: 54vw;
  height: 54vw;
  max-width: 720px;
  max-height: 720px;
  top: -22vw;
  right: -14vw;
  background: radial-gradient(circle, color-mix(in oklab, var(--color-primary) 32%, transparent), transparent 62%);
}
.hero__aurora--b {
  width: 40vw;
  height: 40vw;
  max-width: 560px;
  max-height: 560px;
  bottom: -18vw;
  left: 28vw;
  background: radial-gradient(circle, color-mix(in oklab, #19b3a6 22%, transparent), transparent 64%);
}
.hero__title {
  line-height: 0.98;
  letter-spacing: -0.03em;
  max-width: 12ch;
}
.hero__sub {
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem);
}
.hero__thesis {
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  border-left-color: transparent;
  background: linear-gradient(to bottom, var(--color-primary), color-mix(in oklab, var(--color-primary) 40%, #7ee0d0)) left / 2px 100% no-repeat;
}

/* Hero report card: dark glass, scan sweep, tilt */
.hero__visual {
  perspective: 1400px;
}
.preview {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out);
  box-shadow:
    0 60px 120px -40px rgba(12, 26, 51, 0.55),
    0 24px 48px -24px rgba(12, 26, 51, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  color: var(--color-text);
}
.preview__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
  box-shadow: 0 0 24px 4px var(--color-primary-glow);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.preview__finding {
  --surface-fill: var(--color-surface-2);
  background: var(--color-surface-2);
  border-color: color-mix(in oklab, var(--color-border) 70%, transparent);
}
.preview__arc {
  filter: drop-shadow(0 0 6px var(--color-primary-glow));
}

/* Demo band: dark stage with glow */
.section--dark {
  background:
    radial-gradient(900px 520px at 18% 0%, color-mix(in oklab, var(--color-primary) 22%, transparent), transparent 60%),
    radial-gradient(700px 480px at 92% 100%, color-mix(in oklab, #19b3a6 14%, transparent), transparent 60%),
    linear-gradient(180deg, #0a1326, #0b1730 55%, #0a1326);
  color: var(--color-text);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.section--dark::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.06;
  mix-blend-mode: screen;
  pointer-events: none;
}
.section--dark .section__inner {
  position: relative;
  z-index: 1;
}
.section--dark .section__kicker {
  color: color-mix(in oklab, var(--color-primary) 80%, #ffffff);
}
.demo {
  box-shadow:
    0 60px 120px -40px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 90px -30px var(--color-primary-glow);
}
.demo__bar {
  position: relative;
  overflow: hidden;
  background: color-mix(in oklab, var(--color-surface-2) 70%, transparent);
}
.demo__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--color-primary), #7ee0d0);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
}
.demo.is-running .demo__progress {
  opacity: 1;
  transform: scaleX(1);
  transition: transform 1900ms linear, opacity 120ms;
}
.demo__phase {
  margin-left: auto;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.demo.is-running .demo__phase {
  opacity: 1;
  transform: none;
}
.demo__phase:not(:empty) + .demo__status {
  margin-left: 0;
}
.demo__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.demo__status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 var(--color-primary-glow);
}
.demo.is-running .demo__status::before {
  animation: status-pulse 1s ease-out infinite;
}
.demo__side {
  background: color-mix(in oklab, var(--color-surface) 60%, transparent);
}
.gauge__arc {
  filter: drop-shadow(0 0 8px var(--color-primary-glow));
}
.gap-row {
  background: color-mix(in oklab, var(--color-surface) 80%, transparent);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), opacity 520ms var(--ease-out), transform 520ms var(--ease-out), background var(--t-fast);
}
.gap-row.is-open {
  background: var(--color-surface);
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.6);
}
html.js .gap-row:not(.is-visible) {
  transform: translateY(10px) scale(0.99);
}
.demo__expand {
  border: 1px solid color-mix(in oklab, var(--color-primary) 35%, transparent);
}

/* Flow connectors draw in; markers glow */
.flow__num,
.step__num {
  background: linear-gradient(180deg, color-mix(in oklab, var(--color-primary-highlight) 80%, #ffffff), var(--color-primary-highlight));
  box-shadow: 0 6px 16px -10px var(--color-primary);
}
[data-theme='dark'] .flow__num,
[data-theme='dark'] .step__num {
  background: var(--color-primary-highlight);
}
@media (min-width: 1024px) {
  .flow__item:not(:last-child)::after {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 900ms var(--ease-out);
  }
  .flow.is-in .flow__item:not(:last-child)::after {
    transform: scaleX(1);
  }
  .flow.is-in .flow__item:nth-child(1)::after { transition-delay: 300ms; }
  .flow.is-in .flow__item:nth-child(2)::after { transition-delay: 500ms; }
  .flow.is-in .flow__item:nth-child(3)::after { transition-delay: 700ms; }
  .flow.is-in .flow__item:nth-child(4)::after { transition-delay: 900ms; }
}
.step::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 800ms var(--ease-out);
}
.steps.is-in .step::before {
  transform: scaleY(1);
}
.steps.is-in .step:nth-child(1)::before { transition-delay: 200ms; }
.steps.is-in .step:nth-child(2)::before { transition-delay: 350ms; }
.steps.is-in .step:nth-child(3)::before { transition-delay: 500ms; }
.steps.is-in .step:nth-child(4)::before { transition-delay: 650ms; }

/* Sources: counters tabular, facts chips hover */
.pareto-card__count {
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--color-primary), color-mix(in oklab, var(--color-primary) 55%, #19b3a6));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.facts__item {
  transition: border-color var(--t-fast), transform var(--t-fast), background var(--t-fast);
}
.facts__item:hover {
  border-color: var(--color-primary-soft);
  transform: translateY(-1px);
}
.facts__dot {
  animation: status-pulse 2.4s ease-out infinite;
}
.compliance__item {
  overflow: visible;
}
.compliance__item::after {
  content: '';
  position: absolute;
  left: 0;
  top: -2px;
  height: 2px;
  width: 0;
  background: var(--color-primary);
  transition: width 420ms var(--ease-out);
}
.compliance__item:hover::after {
  width: 100%;
}
.compliance__item:hover {
  border-top-color: var(--color-border);
}

/* CTA: aurora and glass panel */
.cta {
  isolation: isolate;
}
.cta__aurora {
  position: absolute;
  inset: -30% -10%;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 30%, color-mix(in oklab, var(--color-primary) 55%, transparent), transparent 40%),
    radial-gradient(circle at 80% 70%, color-mix(in oklab, #19b3a6 40%, transparent), transparent 40%);
  filter: blur(60px);
  opacity: 0.7;
  pointer-events: none;
}
.cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--noise);
  opacity: 0.07;
  mix-blend-mode: screen;
  pointer-events: none;
}
.cta__panel {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.cta__title {
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.9rem);
}

/* Footer wordmark presence */
.footer {
  position: relative;
  overflow: hidden;
}
.footer .brand {
  font-size: 1.35rem;
}

@keyframes status-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, currentColor 45%, transparent); }
  100% { box-shadow: 0 0 0 10px transparent; }
}
@keyframes aurora-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-6%, 8%, 0) scale(1.08); }
}
@keyframes aurora-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(8%, -6%, 0) scale(1.1); }
}
@keyframes scan-sweep {
  0% { top: 0; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__aurora--a { animation: aurora-drift-a 22s ease-in-out infinite alternate; }
  .hero__aurora--b { animation: aurora-drift-b 26s ease-in-out infinite alternate; }
  .cta__aurora { animation: aurora-drift-a 28s ease-in-out infinite alternate; }
  .preview__scan { animation: scan-sweep 1500ms cubic-bezier(0.4, 0, 0.2, 1) 700ms 1 both; }
  .hero__visual { animation-duration: 820ms; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress,
  .demo__progress { transition: none; }
  html.js [data-reveal],
  html.js [data-reveal-stagger] > * { opacity: 1; transform: none; filter: none; }
  .step::before { transform: none; }
  .flow__item:not(:last-child)::after { transform: none; }
  .preview { transform: none !important; }
}
@media (hover: none) {
  [data-spotlight]::before { display: none; }
  .btn--primary::after { display: none; }
}

/* Primary buttons keep a saturated blue in dark contexts */
[data-theme='dark'] .btn--primary,
.theme-dark-scope .btn--primary {
  color: #ffffff;
  background: linear-gradient(180deg, #4a76f2, #2457e0 60%, #1d49c4);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 12px 28px -12px #2457e0;
}
[data-theme='dark'] .btn--primary:hover,
.theme-dark-scope .btn--primary:hover {
  background: linear-gradient(180deg, #5b84f5, #2f62e8 60%, #2452d1);
}


/* ============================================================
   16. Experience pass: cinematic hero, live demo, choreography
   ============================================================ */
:root,
[data-theme='light'] { --page-bg: #f6f8fc; }
[data-theme='dark'] { --page-bg: #0f1a30; }

/* ---- Hero: particles, light, word reveal, floating product ---- */
.hero__particles {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.9;
}
.hero__aurora {
  will-change: transform;
}
.hero__title .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0.04em 0.02em 0.12em;
  margin: -0.04em -0.02em -0.12em;
}
.hero__title .w__i {
  display: inline-block;
  will-change: transform;
}
html.js .hero__title.is-split .w__i {
  transform: translateY(112%) rotate(2deg);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  html.js .hero__title.is-split .w__i {
    animation: word-up 980ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: calc(140ms + var(--i, 0) * 85ms);
  }
  .hero__visual[data-float] .preview {
    animation: card-float 7s ease-in-out 1.6s infinite;
  }
  .hero__visual[data-float] .preview__scan {
    animation: scan-sweep 1500ms cubic-bezier(0.4, 0, 0.2, 1) 700ms 1 both, scan-loop 9s cubic-bezier(0.4, 0, 0.2, 1) 4s infinite;
  }
  .preview__status::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
    animation: status-pulse 2s ease-out infinite;
  }
  .preview__finding--critical:hover,
  .preview__finding--major:hover {
    transform: translateX(3px);
  }
}
.preview__badge,
.demo__badge {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in oklab, var(--color-primary) 40%, transparent);
  font-family: var(--font-ui);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: color-mix(in oklab, var(--color-primary) 85%, #ffffff);
  background: color-mix(in oklab, var(--color-primary) 12%, transparent);
  white-space: nowrap;
}
.preview__finding {
  transition: transform var(--t-med), border-color var(--t-fast), box-shadow var(--t-fast);
}
.preview.is-tilting {
  transition: transform 120ms linear;
}

/* ---- Magnetic and pressed buttons ---- */
[data-magnetic] {
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  will-change: transform;
}
.btn:active {
  transform: translateY(1px) scale(0.98);
}

/* ---- Mobile menu: staggered items ---- */
@media (max-width: 1023.98px) and (prefers-reduced-motion: no-preference) {
  .nav__list li {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
  }
  .nav.is-open .nav__list li {
    opacity: 1;
    transform: none;
  }
  .nav.is-open .nav__list li:nth-child(1) { transition-delay: 40ms; }
  .nav.is-open .nav__list li:nth-child(2) { transition-delay: 80ms; }
  .nav.is-open .nav__list li:nth-child(3) { transition-delay: 120ms; }
  .nav.is-open .nav__list li:nth-child(4) { transition-delay: 160ms; }
  .nav.is-open .nav__list li:nth-child(5) { transition-delay: 200ms; }
  .nav.is-open .nav__list li:nth-child(6) { transition-delay: 240ms; }
  .nav.is-open .nav__list li:nth-child(7) { transition-delay: 280ms; }
  .nav__mobile-actions {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 320ms var(--ease-out) 320ms, transform 320ms var(--ease-out) 320ms;
  }
  .nav.is-open .nav__mobile-actions {
    opacity: 1;
    transform: none;
  }
}

/* ---- Section dividers that draw across on entry ---- */
.section,
.cta {
  position: relative;
}
.section::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  width: min(100% - 2 * var(--gutter), var(--content-default));
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-primary) 30%, color-mix(in oklab, var(--color-primary) 50%, #7ee0d0) 70%, transparent);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  opacity: 0.7;
  pointer-events: none;
  z-index: 2;
}
html.js .section.sec-in::before {
  transition: transform 1100ms var(--ease-out);
  transform: translateX(-50%) scaleX(1);
}
html:not(.js) .section::before {
  transform: translateX(-50%) scaleX(1);
}

/* ---- Light-to-dark: feathered edges around the demo stage ---- */
.section--dark {
  overflow: hidden;
}
.section--dark .section-fade {
  display: none;
}
.section--dark::before {
  display: none;
}
.section--dark .section__inner::before,
.section--dark .section__inner::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 100vw;
  height: 120px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}
.section--dark .section__inner::before {
  top: calc(-1 * var(--section-y));
  background: linear-gradient(to bottom, var(--page-bg), transparent);
  opacity: 0.9;
}
.section--dark .section__inner::after {
  bottom: calc(-1 * var(--section-y));
  background: linear-gradient(to top, var(--page-bg), transparent);
  opacity: 0.9;
}
.section--dark .section__inner > * {
  position: relative;
  z-index: 1;
}

/* ---- Demo: processing sequence and results state ---- */
.demo__main {
  position: relative;
}
.demo__process {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in oklab, var(--color-primary) 30%, var(--color-border));
  background: color-mix(in oklab, var(--color-primary-highlight) 70%, transparent);
}
.demo__process[hidden] {
  display: none;
}
.demo__stages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  counter-reset: stage;
}
.demo__stage {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-text-faint);
  transition: color var(--t-med);
}
.demo__stage::after {
  content: '';
  position: absolute;
  left: 24px;
  right: -6px;
  top: 8px;
  height: 1px;
  background: var(--color-border);
  z-index: 0;
}
.demo__stage:last-child::after {
  display: none;
}
.demo__stage-dot {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  transition: border-color var(--t-med), background var(--t-med), box-shadow var(--t-med), transform var(--t-med);
}
.demo__stage.is-active {
  color: var(--color-text);
}
.demo__stage.is-active .demo__stage-dot {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 5px var(--color-primary-glow);
  transform: scale(1.1);
}
.demo__stage.is-done {
  color: var(--color-text-muted);
}
.demo__stage.is-done .demo__stage-dot {
  border-color: var(--color-clear);
  background: var(--color-clear);
  box-shadow: none;
}
.demo__stage.is-done::after {
  background: linear-gradient(90deg, var(--color-clear), var(--color-border));
}
.demo__doc {
  position: relative;
  display: grid;
  gap: 9px;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  overflow: hidden;
  min-height: 150px;
}
.demo__doc-line {
  display: block;
  height: 7px;
  width: 92%;
  border-radius: 4px;
  background: var(--color-surface-2);
  transition: background var(--t-med);
}
.demo__doc-line--title { width: 46%; height: 10px; margin-bottom: 4px; }
.demo__doc-line--short { width: 64%; }
.demo__doc.is-flagging .demo__doc-line--flag {
  background: linear-gradient(90deg, var(--color-critical), color-mix(in oklab, var(--color-critical) 40%, var(--color-surface-2)));
  box-shadow: 0 0 12px -2px var(--color-critical);
}
.demo__doc-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: -40px;
  height: 36px;
  background: linear-gradient(to bottom, transparent, var(--color-primary-glow), transparent);
  border-bottom: 1px solid var(--color-primary);
  opacity: 0;
}
.demo.is-running .demo__doc-scan {
  animation: doc-scan 1600ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.demo__gaps {
  transition: opacity 400ms var(--ease-out), filter 400ms var(--ease-out);
}
.demo.is-running .demo__gaps,
.demo.is-running .demo__hints {
  opacity: 0.25;
  filter: blur(1px);
  pointer-events: none;
}
.demo__result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in oklab, var(--color-clear) 45%, transparent);
  background: var(--color-clear-bg);
  color: var(--color-text);
  font-size: var(--text-sm);
}
.demo__result[hidden] {
  display: none;
}
html.js .demo__result:not([hidden]) {
  animation: result-in 520ms var(--ease-out) both;
}
.demo__result-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-clear);
  color: #ffffff;
}
.demo__result-icon svg {
  width: 13px;
  height: 13px;
}
html.js .demo__result:not([hidden]) .demo__result-icon svg path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: check-draw 500ms var(--ease-out) 260ms forwards;
}
.demo__result-text {
  font-family: var(--font-ui);
  font-weight: 600;
}
.demo__result-stats {
  color: var(--color-text-muted);
}
.demo__result-stats strong {
  color: var(--color-text);
}
.demo__result-sep {
  color: var(--color-text-faint);
  margin: 0 2px;
}
/* Severity dot pops as a finding appears */
@media (prefers-reduced-motion: no-preference) {
  .gap-row.is-visible .gap-row__head .pill::before {
    animation: dot-pop 600ms var(--ease-out) 120ms both;
  }
  .gap-row.is-visible.is-open .gap-row__head .pill {
    animation: pill-glow 1.2s ease-out 1;
  }
}
.gap-row__head:hover .gap-row__chevron {
  transform: translateY(2px);
  color: var(--color-primary);
}
.gap-row.is-open .gap-row__head:hover .gap-row__chevron {
  transform: rotate(180deg) translateY(2px);
}
.gap-row:hover {
  border-color: color-mix(in oklab, var(--color-primary) 30%, var(--color-border));
}
@media (max-width: 639.98px) {
  .demo__stages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-4);
  }
  .demo__stage:nth-child(2)::after {
    display: none;
  }
  .demo__process {
    padding: var(--space-4);
  }
  .demo__doc {
    min-height: 120px;
  }
}
@media (max-width: 379.98px) {
  .demo__badge,
  .preview__badge {
    display: none;
  }
}

/* ---- Why now: quotes glide in from either side ---- */
@media (prefers-reduced-motion: no-preference) and (min-width: 800px) {
  html.js .quote-group[data-reveal-stagger] > .quote:nth-child(1) {
    transform: translateX(-28px);
  }
  html.js .quote-group[data-reveal-stagger] > .quote:nth-child(2) {
    transform: translateX(28px);
  }
}
@media (prefers-reduced-motion: no-preference) {
  html.js .quote-group[data-reveal-stagger].is-in > .quote {
    transform: none;
  }
  html.js .quote-group[data-reveal-stagger] > .quote {
    transition-duration: 820ms;
  }
  html.js .problem__grid[data-reveal-stagger] > .card {
    transform: translateY(26px) scale(0.98);
  }
  html.js .problem__grid[data-reveal-stagger].is-in > .card {
    transform: none;
  }
}

/* ---- Platform flow: interactive steps and a travelling pulse ---- */
.flow__item {
  cursor: default;
  border-radius: var(--radius-sm);
  transition: background var(--t-fast);
}
.flow__item:focus-visible {
  outline-offset: 2px;
}
.flow__num {
  position: relative;
  transition: transform var(--t-med), box-shadow var(--t-med), background var(--t-med), color var(--t-med);
}
.flow__item:hover .flow__num,
.flow__item.is-active .flow__num {
  transform: scale(1.12);
  box-shadow: 0 0 0 6px var(--color-primary-glow), 0 10px 20px -12px var(--color-primary);
}
.flow__item.is-active .flow__num {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
}
.flow__item.is-active h3 {
  color: var(--color-primary);
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  html.js .flow[data-reveal-stagger] > .flow__item {
    transform: translateY(18px) scale(0.96);
  }
  html.js .flow[data-reveal-stagger].is-in > .flow__item {
    transform: none;
  }
  .flow.is-in .flow__item:not(:last-child)::after {
    background: linear-gradient(to right, var(--color-primary), var(--color-divider));
  }
  .flow__item.is-active:not(:last-child)::after {
    background: linear-gradient(to right, var(--color-primary), color-mix(in oklab, var(--color-primary) 40%, #7ee0d0), var(--color-divider));
  }
}

/* ---- How it works: steps slide in from the rail; interactive highlight ---- */
.step {
  border-radius: var(--radius-sm);
  transition: background var(--t-fast);
}
.step__num {
  transition: transform var(--t-med), box-shadow var(--t-med), background var(--t-med), color var(--t-med);
}
.step:hover .step__num,
.step.is-active .step__num {
  transform: scale(1.08);
  box-shadow: 0 0 0 6px var(--color-primary-glow);
}
.step.is-active .step__num {
  background: var(--color-primary);
  color: #ffffff;
}
.step.is-active .step__title {
  color: var(--color-primary);
}
@media (prefers-reduced-motion: no-preference) {
  html.js .steps[data-reveal-stagger] > .step {
    transform: translateX(-22px);
  }
  html.js .steps[data-reveal-stagger].is-in > .step {
    transform: none;
  }
  html.js .outcome[data-reveal] {
    transform: translateY(14px) scale(0.98);
  }
  html.js .outcome[data-reveal].is-in {
    transform: none;
  }
  html.js .outcome .outcome__def {
    opacity: 0;
    transform: translateX(14px);
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  }
  html.js .outcome.is-in .outcome__def {
    opacity: 1;
    transform: none;
  }
  html.js .outcome.is-in .outcome__def:nth-child(1) { transition-delay: 250ms; }
  html.js .outcome.is-in .outcome__def:nth-child(2) { transition-delay: 400ms; }
  html.js .outcome.is-in .outcome__def:nth-child(3) { transition-delay: 550ms; }
}

/* ---- Sources: chips pop, evidence diagram draws and responds ---- */
@media (prefers-reduced-motion: no-preference) {
  html.js .facts[data-reveal-stagger] > .facts__item {
    transform: scale(0.85);
  }
  html.js .facts[data-reveal-stagger].is-in > .facts__item {
    transform: none;
  }
}
.evidence-svg {
  overflow: visible;
}
.ev-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 900ms var(--ease-out), stroke-width var(--t-fast), opacity var(--t-fast);
}
html:not(.js) .ev-line,
.evidence-figure.is-in .ev-line {
  stroke-dashoffset: 0;
}
.evidence-figure.is-in .ev-line:nth-child(1) { transition-delay: 500ms; }
.evidence-figure.is-in .ev-line:nth-child(2) { transition-delay: 650ms; }
.evidence-figure.is-in .ev-line:nth-child(3) { transition-delay: 650ms; }
.evidence-figure.is-in .ev-line:nth-child(4) { transition-delay: 800ms; }
.evidence-figure.is-in .ev-line:nth-child(5) { transition-delay: 800ms; }
.evidence-figure.is-in .ev-line:nth-child(6) { transition-delay: 950ms; }
.ev-node,
.ev-gap {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 700ms var(--ease-out), opacity 700ms var(--ease-out);
}
html.js .evidence-figure:not(.is-in) .ev-node,
html.js .evidence-figure:not(.is-in) .ev-gap {
  transform: scale(0.9);
  opacity: 0;
}
.evidence-figure.is-in .ev-gap { transition-delay: 150ms; }
.evidence-figure.is-in .ev-node:nth-of-type(1) { transition-delay: 350ms; }
.evidence-figure.is-in .ev-node:nth-of-type(2) { transition-delay: 450ms; }
.evidence-figure.is-in .ev-node:nth-of-type(3) { transition-delay: 450ms; }
.evidence-figure.is-in .ev-node:nth-of-type(4) { transition-delay: 550ms; }
.evidence-figure.is-in .ev-node:nth-of-type(5) { transition-delay: 550ms; }
.evidence-figure.is-in .ev-node:nth-of-type(6) { transition-delay: 650ms; }
.ev-node {
  cursor: pointer;
  outline: none;
}
.ev-node rect {
  transition: stroke var(--t-fast), filter var(--t-fast);
}
.ev-node:hover rect,
.ev-node:focus-visible rect,
.ev-node.is-lit rect {
  stroke: var(--color-primary);
  filter: drop-shadow(0 6px 14px var(--color-primary-glow));
}
.ev-line.is-lit {
  stroke-width: 3;
  opacity: 1;
  filter: drop-shadow(0 0 6px var(--color-primary-glow));
}
.ev-lines {
  transition: opacity var(--t-fast);
}
.evidence-svg.has-lit .ev-lines {
  opacity: 0.8;
}
.evidence-svg.has-lit .ev-line:not(.is-lit) {
  opacity: 0.25;
}
.evidence-svg.has-lit .ev-node:not(.is-lit) {
  opacity: 0.55;
}
.ev-gap rect {
  transition: stroke var(--t-fast), filter var(--t-fast);
}
.evidence-svg.has-lit .ev-gap rect {
  stroke: var(--color-primary);
  filter: drop-shadow(0 0 18px var(--color-primary-glow));
}
@media (prefers-reduced-motion: no-preference) {
  .evidence-figure.is-in .ev-gap rect {
    animation: gap-breathe 4s ease-in-out 1.6s infinite;
  }
}
.pareto-card__count {
  display: inline-block;
  transition: transform var(--t-med);
}
.pareto-card:hover .pareto-card__count {
  transform: translateY(-2px) scale(1.04);
}
.pareto-card::after {
  content: '';
  position: absolute;
  left: var(--space-5);
  right: var(--space-5);
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, var(--color-primary), #19b3a6);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 460ms var(--ease-out);
}
.pareto-card:hover::after {
  transform: scaleX(1);
}

/* ---- Compliance: rules draw in sequence; programs rise and tilt ---- */
@media (prefers-reduced-motion: no-preference) {
  html.js .compliance__grid[data-reveal-stagger] > .compliance__item {
    transform: none;
    opacity: 1;
  }
  html.js .compliance__grid[data-reveal-stagger] > .compliance__item > * {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
  }
  html.js .compliance__grid[data-reveal-stagger].is-in > .compliance__item > * {
    opacity: 1;
    transform: none;
  }
  html.js .compliance__item {
    border-top-color: transparent;
  }
  html.js .compliance__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: -2px;
    height: 2px;
    width: 100%;
    background: var(--color-border);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 900ms var(--ease-out);
  }
  html.js .compliance__grid.is-in .compliance__item::before {
    transform: scaleX(1);
  }
  html.js .compliance__grid.is-in > :nth-child(1)::before { transition-delay: 0ms; }
  html.js .compliance__grid.is-in > :nth-child(2)::before { transition-delay: 120ms; }
  html.js .compliance__grid.is-in > :nth-child(3)::before { transition-delay: 240ms; }
  html.js .compliance__grid.is-in > :nth-child(4)::before { transition-delay: 360ms; }
  html.js .compliance__grid.is-in > :nth-child(5)::before { transition-delay: 480ms; }
  html.js .compliance__grid.is-in > :nth-child(6)::before { transition-delay: 600ms; }
  html.js .compliance__grid.is-in > :nth-child(1) > * { transition-delay: 200ms; }
  html.js .compliance__grid.is-in > :nth-child(2) > * { transition-delay: 320ms; }
  html.js .compliance__grid.is-in > :nth-child(3) > * { transition-delay: 440ms; }
  html.js .compliance__grid.is-in > :nth-child(4) > * { transition-delay: 560ms; }
  html.js .compliance__grid.is-in > :nth-child(5) > * { transition-delay: 680ms; }
  html.js .compliance__grid.is-in > :nth-child(6) > * { transition-delay: 800ms; }

  html.js .programs__grid[data-reveal-stagger] > .program {
    transform: perspective(900px) rotateX(8deg) translateY(28px);
    transform-origin: top center;
  }
  html.js .programs__grid[data-reveal-stagger].is-in > .program {
    transform: none;
  }
}
.compliance__item {
  position: relative;
}
.compliance__item:hover::after {
  width: 100%;
}

/* ---- CTA: title reveals with a mask ---- */
@media (prefers-reduced-motion: no-preference) {
  html.js .cta__title,
  html.js .cta__sub,
  html.js .cta__panel {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
  }
  html.js .cta.sec-in .cta__title { opacity: 1; transform: none; }
  html.js .cta.sec-in .cta__sub { opacity: 1; transform: none; transition-delay: 150ms; }
  html.js .cta.sec-in .cta__panel { opacity: 1; transform: none; transition-delay: 300ms; }
  html.js .cta__title {
    -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
    mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
    -webkit-mask-size: 300% 100%;
    mask-size: 300% 100%;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out), -webkit-mask-position 1300ms var(--ease-out), mask-position 1300ms var(--ease-out);
  }
  html.js .cta.sec-in .cta__title {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}

/* ---- Keyframes ---- */
@keyframes word-up {
  from { transform: translateY(112%) rotate(2deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes card-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}
@keyframes scan-loop {
  0%, 82% { top: 0; opacity: 0; }
  84% { opacity: 1; }
  98% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
@keyframes doc-scan {
  0% { top: -40px; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
@keyframes result-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
@keyframes check-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes dot-pop {
  0% { transform: scale(0.4); }
  60% { transform: scale(1.6); }
  100% { transform: scale(1); }
}
@keyframes pill-glow {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, currentColor 40%, transparent); }
  100% { box-shadow: 0 0 0 10px transparent; }
}
@keyframes gap-breathe {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50% { filter: drop-shadow(0 0 14px var(--color-primary-glow)); }
}

/* ---- Reduced motion: everything visible, nothing moves ---- */
@media (prefers-reduced-motion: reduce) {
  .hero__particles { display: none; }
  html.js .hero__title.is-split .w__i { transform: none; opacity: 1; }
  html.js .section.sec-in::before,
  .section::before { transform: translateX(-50%) scaleX(1); transition: none; }
  .ev-line { stroke-dashoffset: 0; transition: none; }
  html.js .evidence-figure:not(.is-in) .ev-node,
  html.js .evidence-figure:not(.is-in) .ev-gap { transform: none; opacity: 1; }
  html.js .cta__title, html.js .cta__sub, html.js .cta__panel { opacity: 1; transform: none; -webkit-mask-image: none; mask-image: none; }
  .demo.is-running .demo__gaps,
  .demo.is-running .demo__hints { filter: none; }
  [data-magnetic] { transform: none !important; }
  [data-parallax], [data-mouse] { transform: none !important; }
}


/* ============================================================
   17. Mobile composition pass and refined motion
   ============================================================ */

/* Section titles reveal word by word when their head enters */
.section__title .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0.04em 0.02em 0.14em;
  margin: -0.04em -0.02em -0.14em;
}
.section__title .w__i {
  display: inline-block;
}
@media (prefers-reduced-motion: no-preference) {
  html.js .section__title.is-split .w__i {
    transform: translateY(110%);
    opacity: 0;
  }
  html.js .section__head.is-in .section__title.is-split .w__i {
    animation: word-up 820ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: calc(80ms + var(--i, 0) * 55ms);
  }
  /* Scoped to section heads: kickers and ledes in page heroes have no reveal trigger */
  html.js .section__head .section__kicker::before {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 700ms var(--ease-out) 60ms;
  }
  html.js .section__head.is-in .section__kicker::before {
    transform: scaleX(1);
  }
  html.js .section__head .section__lede {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 700ms var(--ease-out) 420ms, transform 700ms var(--ease-out) 420ms;
  }
  html.js .section__head.is-in .section__lede {
    opacity: 1;
    transform: none;
  }
  /* The head itself no longer needs the blur rise; its children carry the motion */
  html.js .section__head[data-reveal] {
    filter: none;
    transform: none;
    opacity: 1;
  }
}

/* Richer link and nav hover */
.gap-row__link,
.quote__attribution a,
.program__link {
  transition: text-decoration-color var(--t-fast), color var(--t-fast), background-size 320ms var(--ease-out);
  background: linear-gradient(currentColor, currentColor) left 100% / 0 1px no-repeat;
}
.gap-row__link:hover,
.quote__attribution a:hover,
.program__link:hover {
  background-size: 100% 1px;
  text-decoration-color: transparent;
}
.footer__nav a {
  position: relative;
}
.footer__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med);
}
.footer__nav a:hover::after {
  transform: scaleX(1);
}
.theme-toggle svg {
  transition: transform 500ms var(--ease-out);
}
.theme-toggle:hover svg {
  transform: rotate(40deg);
}
.statstrip__item {
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.statstrip__item:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary-soft);
}
.nav__mobile-contact {
  display: block;
  margin-top: var(--space-4);
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
}

/* ---------- Mobile and small tablet composition (≤ 767px) ---------- */
@media (max-width: 767.98px) {
  :root {
    --section-y: clamp(3.25rem, 2.5rem + 3vw, 4.5rem);
  }

  /* Hero: centered composition, calmer light */
  .hero {
    padding-top: clamp(2rem, 1.25rem + 3vw, 3rem);
    text-align: center;
  }
  .hero__copy {
    align-items: center;
    margin: 0 auto;
    gap: var(--space-4);
  }
  .hero__title {
    max-width: 11ch;
  }
  .hero__sub {
    max-width: 36ch;
  }
  .hero__thesis {
    max-width: 30ch;
    padding-left: 0;
    padding-top: var(--space-4);
    border-left: 0;
    background: linear-gradient(to right, var(--color-primary), color-mix(in oklab, var(--color-primary) 40%, #7ee0d0)) center top / 36px 2px no-repeat;
  }
  .hero__cta {
    justify-content: center;
    width: 100%;
    max-width: 360px;
  }
  .hero__cta .btn {
    width: 100%;
  }
  .hero__pills {
    justify-content: center;
    gap: var(--space-2) var(--space-4);
    max-width: 320px;
  }
  .hero__visual {
    justify-self: center;
    max-width: 520px;
  }
  .hero__aurora {
    filter: blur(50px);
    opacity: 0.7;
  }
  .hero__aurora--a {
    width: 90vw;
    height: 90vw;
    top: -40vw;
    right: -30vw;
  }
  .hero__aurora--b {
    width: 70vw;
    height: 70vw;
    bottom: -30vw;
    left: -20vw;
  }
  .hero__grid {
    -webkit-mask-image: radial-gradient(ellipse 100% 55% at 50% 15%, #000 5%, transparent 70%);
    mask-image: radial-gradient(ellipse 100% 55% at 50% 15%, #000 5%, transparent 70%);
  }

  /* Section heads centered with a balanced measure */
  .section__head {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    max-width: 34rem;
  }
  .section__kicker {
    justify-content: center;
  }
  .section__kicker::after {
    content: '';
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
  }
  html.js .section__head .section__kicker::after {
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 700ms var(--ease-out) 60ms;
  }
  html.js .section__head.is-in .section__kicker::after {
    transform: scaleX(1);
  }
  .section__title {
    max-width: 16ch;
    margin-left: auto;
    margin-right: auto;
  }
  .section__lede {
    margin-left: auto;
    margin-right: auto;
  }
  .section::before {
    width: min(100% - 2 * var(--gutter), 220px);
  }

  /* Why now: centered quotes, centered note */
  .quote {
    padding: var(--space-6) var(--space-5);
    text-align: center;
  }
  .quote::before {
    left: 50%;
    top: 0;
    bottom: auto;
    width: 40px;
    height: 3px;
    transform: translateX(-50%);
    border-radius: 0 0 3px 3px;
  }
  .quote-group__note {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .card {
    text-align: center;
    align-items: center;
  }
  .card__body {
    max-width: 40ch;
  }

  /* Demo: centered summary block, compact legend */
  .demo__input {
    text-align: center;
  }
  .gauge-wrap {
    flex-direction: column;
    justify-content: center;
    gap: var(--space-3);
    text-align: center;
  }
  .gauge__label {
    align-items: center;
  }
  .statstrip__item {
    align-items: center;
    text-align: center;
  }
  .sev-key {
    gap: var(--space-2);
  }
  .sev-key__row {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: var(--space-3);
    align-items: center;
  }
  .sev-key__note {
    text-align: center;
  }
  .demo__hints {
    text-align: center;
  }
  .demo__result {
    justify-content: center;
    text-align: center;
  }

  /* Platform flow: centered stacked steps */
  .flow {
    gap: var(--space-2);
  }
  .flow__item {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'num' 'title' 'body';
    justify-items: center;
    text-align: center;
    padding: var(--space-5) var(--space-4);
    row-gap: var(--space-2);
  }
  .flow__item + .flow__item {
    border-top: 0;
  }
  .flow__item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: 1px;
    height: 10px;
    background: var(--color-primary-soft);
    transform: translateX(-50%);
  }
  .flow__item p {
    max-width: 34ch;
  }
  .split__col {
    text-align: left;
  }
  .split__title {
    text-align: center;
  }
  .split__intro {
    text-align: center;
  }

  /* How it works: centered steps, no rail */
  .step {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    padding-bottom: var(--space-7);
  }
  .step::before {
    display: none;
  }
  .step__content {
    padding-top: var(--space-3);
  }
  .step__body {
    max-width: 36ch;
  }
  .outcome {
    text-align: center;
  }
  .outcome__def {
    justify-items: center;
    text-align: center;
  }
  .outcome__def .pill {
    justify-self: center;
  }

  /* Sources */
  .facts {
    justify-content: center;
  }
  .pareto__label {
    text-align: center;
  }
  .pareto-card {
    justify-items: center;
    text-align: center;
  }
  .pareto__note,
  .crl-note {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .evidence-figure__caption {
    justify-items: center;
    text-align: center;
  }
  .sources-cited {
    justify-self: center;
  }
  .evidence-mobile__gap {
    text-align: center;
  }
  .evidence-figure__foot {
    text-align: center;
  }
  .contrast__title {
    text-align: center;
  }

  /* Compliance and programs */
  .compliance__item {
    align-items: center;
    text-align: center;
    padding-top: var(--space-4);
  }
  .compliance__item::before,
  .compliance__item::after {
    left: 50%;
    transform-origin: center;
  }
  html.js .compliance__item::before {
    transform: translateX(-50%) scaleX(0);
  }
  html.js .compliance__grid.is-in .compliance__item::before {
    transform: translateX(-50%) scaleX(1);
  }
  .compliance__item::after {
    transform: translateX(-50%);
  }
  .compliance__item:hover::after {
    width: 100%;
  }
  .program {
    align-items: center;
    text-align: center;
  }
  .program__link {
    align-self: center;
  }

  /* CTA and footer */
  .cta {
    text-align: center;
  }
  .cta__title,
  .cta__sub {
    margin-left: auto;
    margin-right: auto;
  }
  .cta__actions {
    justify-content: center;
  }
  .cta__actions .btn {
    width: 100%;
  }
  .cta__contact {
    text-align: center;
  }
  .footer__inner {
    justify-items: center;
    text-align: center;
    gap: var(--space-5);
  }
  .footer__brand {
    justify-items: center;
  }
  .footer__nav {
    justify-content: center;
  }
  .footer__meta {
    justify-content: center;
  }
  .footer__legal {
    width: 100%;
    text-align: center;
  }

  /* Mobile menu: roomier items with chevrons */
  .nav__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
  }
  .nav__list a::before {
    content: '';
    order: 2;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--color-text-faint);
    border-bottom: 1.5px solid var(--color-text-faint);
    transform: rotate(-45deg);
    transition: transform var(--t-fast), border-color var(--t-fast);
  }
  .nav__list a.is-active::before {
    border-color: var(--color-primary);
  }
  .nav__list a:active::before {
    transform: translateX(3px) rotate(-45deg);
  }
}

/* Mid phones and up: two-up stat and legend layouts stay balanced */
@media (min-width: 480px) and (max-width: 767.98px) {
  .hero__cta .btn {
    width: auto;
    min-width: 200px;
  }
  .cta__actions .btn {
    width: auto;
    min-width: 200px;
  }
  .sev-key {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sev-key__row {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }
}
@media (max-width: 379.98px) {
  .hero__title {
    max-width: 10ch;
  }
  .section__title {
    max-width: 14ch;
  }
  .sev-key__row {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }
}

/* Hero refinements: natural headline wrap, robust capability dots, tablet centering */
.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 0;
}
.hero__pill::before {
  position: static;
  transform: none;
}
.preview,
.preview * {
  text-align: left;
}
@media (max-width: 1023.98px) {
  .hero {
    text-align: center;
  }
  .hero__copy {
    align-items: center;
    margin: 0 auto;
  }
  .hero__title {
    max-width: none;
  }
  .hero__sub,
  .hero__thesis {
    margin-left: auto;
    margin-right: auto;
  }
  .hero__cta,
  .hero__pills {
    justify-content: center;
  }
  .hero__visual {
    justify-self: center;
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .hero__thesis {
    padding-left: 0;
    padding-top: var(--space-4);
    border-left: 0;
    background: linear-gradient(to right, var(--color-primary), color-mix(in oklab, var(--color-primary) 40%, #7ee0d0)) center top / 36px 2px no-repeat;
  }
}
@media (max-width: 767.98px) {
  .hero__title {
    max-width: none;
  }
}
@media (max-width: 379.98px) {
  .hero__title {
    max-width: none;
  }
}

/* ============================================================
   18. Cinematic pass: scroll-driven storytelling, orbits, kinetic UI
   ============================================================ */

/* ---- Desktop nav: one sliding indicator instead of per-link underlines ---- */
@media (min-width: 1024px) {
  .nav__list {
    position: relative;
  }
  .nav__list a::after {
    display: none;
  }
  .nav__indicator {
    position: absolute;
    left: 0;
    bottom: 2px;
    height: 2px;
    width: 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--color-primary), color-mix(in oklab, var(--color-primary) 55%, #7ee0d0));
    opacity: 0;
    transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1), width 420ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity var(--t-fast);
    pointer-events: none;
  }
  .nav__indicator.is-on {
    opacity: 1;
  }
}
@media (max-width: 1023.98px) {
  .nav__indicator {
    display: none;
  }
}

/* ---- Section dots (wide screens) ---- */
.dots {
  display: none;
}
@media (min-width: 1280px) {
  .dots {
    position: fixed;
    right: 22px;
    top: 50%;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transform: translateY(-50%);
  }
  .dots a {
    position: relative;
    display: block;
    width: 18px;
    height: 18px;
  }
  .dots a::before {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--color-text-faint);
    opacity: 0.45;
    transition: transform var(--t-med), opacity var(--t-fast), background var(--t-fast);
  }
  .dots a:hover::before,
  .dots a.is-active::before {
    opacity: 1;
    background: var(--color-primary);
    transform: scale(1.35);
  }
  .dots a.is-active::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid color-mix(in oklab, var(--color-primary) 55%, transparent);
    animation: dot-ring 1.6s ease-out infinite;
  }
  .dots a span {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translate(6px, -50%);
    padding: 3px 9px;
    border-radius: var(--radius-xs);
    background: var(--color-ink);
    color: #fff;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-fast), transform var(--t-fast);
  }
  .dots a:hover span,
  .dots a:focus-visible span {
    opacity: 1;
    transform: translate(0, -50%);
  }
}
@keyframes dot-ring {
  from { transform: scale(0.8); opacity: 1; }
  to { transform: scale(1.7); opacity: 0; }
}

/* ---- Hero orbits: 3D-inspired rings around the product card ---- */
.hero__visual {
  position: relative;
}
.orbits {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  perspective: 1100px;
  transform-style: preserve-3d;
}
.preview {
  position: relative;
  z-index: 1;
}
.orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--color-primary) 32%, transparent);
  transform: translate(-50%, -50%) rotateX(74deg) rotateZ(var(--rz, 0deg));
  transform-style: preserve-3d;
  opacity: 0.85;
}
.orbit i {
  position: absolute;
  left: 50%;
  top: -5px;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 14px 3px var(--color-primary-glow), 0 0 0 3px color-mix(in oklab, var(--color-primary) 20%, transparent);
}
.orbit--1 { width: 118%; --rz: 0deg; }
.orbit--2 { width: 136%; --rz: 60deg; border-style: dashed; opacity: 0.55; }
.orbit--3 { width: 154%; --rz: 120deg; opacity: 0.4; }
.orbit--3 i { background: #19b3a6; box-shadow: 0 0 14px 3px rgba(25, 179, 166, 0.35); }
@media (prefers-reduced-motion: no-preference) {
  .orbit { animation: orbit-spin 26s linear infinite; }
  .orbit--2 { animation-duration: 38s; animation-direction: reverse; }
  .orbit--3 { animation-duration: 52s; }
  .orbits { animation: orbits-in 1600ms var(--ease-out) 600ms both; }
}
@keyframes orbit-spin {
  from { transform: translate(-50%, -50%) rotateX(74deg) rotateZ(var(--rz, 0deg)); }
  to { transform: translate(-50%, -50%) rotateX(74deg) rotateZ(calc(var(--rz, 0deg) + 360deg)); }
}
@keyframes orbits-in {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 767.98px) {
  .orbit--3 { display: none; }
  .orbit--1 { width: 112%; }
  .orbit--2 { width: 128%; }
}

/* ---- Demo: severity mix ---- */
.sevmix {
  display: grid;
  gap: var(--space-2);
}
.sevmix__label {
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--color-text-faint);
}
.sevmix__bar {
  display: flex;
  height: 10px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--color-surface-2);
  gap: 2px;
}
.sevmix__seg {
  flex: 0 0 var(--w);
  transform-origin: left;
  transition: transform 900ms var(--ease-out);
}
.sevmix__seg--critical { background: var(--color-critical); }
.sevmix__seg--major { background: var(--color-major); }
.sevmix__seg--minor { background: var(--color-minor); }
.sevmix__seg:nth-child(2) { transition-delay: 150ms; }
.sevmix__seg:nth-child(3) { transition-delay: 300ms; }
.demo.is-running .sevmix__seg {
  transform: scaleX(0);
  transition: none;
}
.sevmix__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.sevmix__legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sevmix__swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.sevmix__swatch--critical { background: var(--color-critical); }
.sevmix__swatch--major { background: var(--color-major); }
.sevmix__swatch--minor { background: var(--color-minor); }
@media (max-width: 767.98px) {
  .sevmix__legend { justify-content: center; }
  .sevmix__label { text-align: center; }
}
@media (min-width: 640px) and (max-width: 959.98px) {
  .sevmix { grid-column: 1 / -1; }
}

/* Demo frame tilts in from a slight 3D angle */
.section--demo .section__inner {
  perspective: 1400px;
}
.demo {
  transform-origin: center top;
  will-change: transform;
}

/* ---- How it works: scroll-driven beam ---- */
.steps {
  position: relative;
}
.steps__beam {
  position: absolute;
  left: 21px;
  top: 40px;
  bottom: 40px;
  width: 1px;
  pointer-events: none;
  z-index: 0;
}
.steps__beam span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--color-primary), color-mix(in oklab, var(--color-primary) 55%, #7ee0d0));
  box-shadow: 0 0 12px var(--color-primary-glow);
  transform: scaleY(var(--p, 0));
  transform-origin: top;
}
.step {
  position: relative;
  z-index: 1;
}
.step.is-passed .step__num {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
@media (max-width: 767.98px) {
  .steps__beam { display: none; }
}

/* ---- Platform flow: travelling packet (desktop) ---- */
.flow {
  position: relative;
}
.flow__packet {
  display: none;
}
@media (min-width: 1024px) {
  /* Only shown once the scroll-driven script takes over; otherwise the reveal stagger would expose it */
  .flow.has-packet .flow__packet {
    display: block;
    position: absolute;
    top: 13px;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px var(--color-primary), 0 0 18px 4px var(--color-primary-glow);
    pointer-events: none;
    opacity: 0;
    z-index: 2;
  }
  .flow.has-packet .flow__packet {
    opacity: 1;
  }
}

/* ---- Platform flow on phones: swipeable carousel with dots ---- */
@media (max-width: 767.98px) {
  .flow {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: var(--space-1) calc(50% - 42%) var(--space-3);
    margin: 0 calc(-1 * var(--gutter));
    padding-left: calc(var(--gutter) + 8%);
    padding-right: calc(var(--gutter) + 8%);
  }
  .flow::-webkit-scrollbar { display: none; }
  .flow__item {
    flex: 0 0 84%;
    scroll-snap-align: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    padding: var(--space-6) var(--space-5);
    transition: border-color var(--t-med), box-shadow var(--t-med), transform var(--t-med);
  }
  .flow__item.is-current {
    border-color: var(--color-primary-soft);
    box-shadow: var(--shadow-md);
  }
  .flow__item:not(:last-child)::after { display: none; }
  .flow-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: var(--space-2);
  }
  .flow-dots button {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
  }
  .flow-dots button::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-border);
    transition: transform var(--t-med), background var(--t-fast), width var(--t-med), border-radius var(--t-med);
  }
  .flow-dots button.is-active::before {
    width: 20px;
    border-radius: 4px;
    background: var(--color-primary);
  }
}
@media (min-width: 768px) {
  .flow-dots { display: none; }
}

/* ---- Sources: marquee of index coverage ---- */
.marquee {
  position: relative;
  overflow: hidden;
  margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee .facts {
  margin-bottom: 0;
}
.marquee.is-marquee {
  display: flex;
}
.marquee.is-marquee .facts {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding-right: var(--space-2);
  animation: marquee 34s linear infinite;
}
.marquee.is-marquee:hover .facts,
.marquee.is-marquee:focus-within .facts {
  animation-play-state: paused;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee.is-marquee .facts { animation: none; }
  .marquee.is-marquee .facts[aria-hidden] { display: none; }
  .marquee.is-marquee .facts { flex-wrap: wrap; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
}

/* ---- Evidence diagram: packets ---- */
.ev-packet {
  opacity: 0;
  transition: opacity 600ms var(--ease-out) 1200ms;
  filter: drop-shadow(0 0 6px var(--color-primary-glow));
}
.evidence-figure.is-in .ev-packet {
  opacity: 0.95;
}
@media (prefers-reduced-motion: reduce) {
  .ev-packet { display: none; }
}

/* ---- Full-screen mobile menu with editorial type ---- */
@media (max-width: 1023.98px) {
  .nav {
    height: calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px));
    max-height: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: var(--space-6);
    background:
      radial-gradient(600px 400px at 90% 0%, var(--color-primary-glow), transparent 60%),
      var(--color-bg);
  }
  .nav__list {
    counter-reset: navi;
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
  }
  .nav__list li + li {
    border-top: 0;
  }
  .nav__list a {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1.2rem + 2.4vw, 2.2rem);
    font-weight: 500;
    letter-spacing: -0.01em;
    padding: 0.55em 0;
    counter-increment: navi;
  }
  .nav__list a::after {
    display: inline-block;
    position: static;
    order: -1;
    width: auto;
    height: auto;
    margin-right: 14px;
    content: counter(navi, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-text-faint);
    background: none;
    transform: none;
  }
  .nav__list a.is-active::after {
    color: var(--color-primary);
  }
  .nav__list a::before {
    margin-left: auto;
  }
  .nav__mobile-actions {
    max-width: 480px;
    width: 100%;
    margin: var(--space-6) auto 0;
  }
}

/* ---- Card depth on hover (fine pointers) ---- */
@media (hover: hover) and (pointer: fine) {
  [data-depth] {
    transform-style: preserve-3d;
    transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow var(--t-fast), border-color var(--t-fast), opacity 600ms var(--ease-out);
  }
}

/* ---- Reduced motion for this pass ---- */
@media (prefers-reduced-motion: reduce) {
  .orbit, .orbits { animation: none; }
  .dots a.is-active::after { animation: none; }
  .steps__beam span { transform: scaleY(1); }
  .nav__indicator { transition: none; }
}
html.js [data-reveal-stagger] > [data-depth] {
  transition: opacity 600ms var(--ease-out), transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow var(--t-fast), border-color var(--t-fast);
}

/* Sticky sidebar needs ancestors that clip without becoming scroll containers */
.section--dark { overflow: clip; }
.demo { overflow: clip; }
.gap-row { overflow: clip; }

/* Softer stage edges now that the stage scales in with rounded corners */
.section--dark .section__inner::before,
.section--dark .section__inner::after {
  height: 72px;
  opacity: 0.45;
}
@media (min-width: 1024px) {
  .section--dark .section__inner::before,
  .section--dark .section__inner::after {
    display: none;
  }
}
.orbit {
  opacity: 0.95;
}
.orbit--2 { opacity: 0.65; }
.orbit--3 { opacity: 0.5; }

/* ============================================================
   19. Glass identity: layered translucency, light and dark
   ============================================================ */
:root,
[data-theme='light'] {
  --color-bg: #f5f7fb;
  --color-surface: rgba(255, 255, 255, 0.42);
  --color-surface-2: rgba(226, 232, 243, 0.7);
  --color-border: rgba(12, 26, 51, 0.1);
  --color-divider: rgba(12, 26, 51, 0.07);
  --color-violet: #6f5df0;
  --color-violet-glow: rgba(111, 93, 240, 0.16);
  --glass: rgba(255, 255, 255, 0.58);
  --glass-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.8);
  --glass-edge: rgba(12, 26, 51, 0.09);
  --glass-shadow: 0 24px 60px -30px rgba(12, 26, 51, 0.25), 0 2px 8px -4px rgba(12, 26, 51, 0.08);
  --page-bg: #f5f7fb;
  --page-gradient: linear-gradient(180deg, #f8fafe 0%, #f1f4fa 50%, #f5f7fb 100%);
  --header-bg: rgba(248, 250, 254, 0.66);
  --mesh-a: rgba(31, 79, 216, 0.16);
  --mesh-b: rgba(111, 93, 240, 0.14);
  --mesh-c: rgba(25, 179, 166, 0.1);
}
[data-theme='dark'] {
  --color-bg: #0b1222;
  --color-surface: rgba(255, 255, 255, 0.035);
  --color-surface-2: rgba(255, 255, 255, 0.07);
  --color-border: rgba(255, 255, 255, 0.1);
  --color-divider: rgba(255, 255, 255, 0.07);
  --color-violet: #a99cff;
  --color-violet-glow: rgba(169, 156, 255, 0.18);
  --glass: rgba(18, 27, 50, 0.52);
  --glass-strong: rgba(18, 27, 50, 0.76);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-edge: rgba(255, 255, 255, 0.07);
  --glass-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  --page-bg: #0b1222;
  --page-gradient: linear-gradient(180deg, #0c1428 0%, #0a1020 50%, #0b1222 100%);
  --header-bg: rgba(11, 18, 34, 0.62);
  --mesh-a: rgba(126, 164, 255, 0.14);
  --mesh-b: rgba(169, 156, 255, 0.13);
  --mesh-c: rgba(82, 212, 178, 0.08);
}
/* Dark stages (demo, workflow, CTA) in either theme */
.theme-dark-scope {
  --color-bg: rgba(9, 15, 30, 0.6);
  --color-surface: rgba(255, 255, 255, 0.04);
  --color-surface-2: rgba(255, 255, 255, 0.08);
  --color-border: rgba(255, 255, 255, 0.1);
  --color-divider: rgba(255, 255, 255, 0.07);
  --color-violet: #a99cff;
  --glass: rgba(16, 24, 46, 0.5);
  --glass-strong: rgba(16, 24, 46, 0.72);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-edge: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

/* ---- Page: gradient base with a slowly moving light mesh ---- */
body {
  background: var(--page-gradient);
  isolation: isolate;
}
body::before {
  content: '';
  position: fixed;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42% 38% at 18% 22%, var(--mesh-a), transparent 70%),
    radial-gradient(38% 34% at 82% 18%, var(--mesh-b), transparent 70%),
    radial-gradient(34% 30% at 60% 88%, var(--mesh-c), transparent 70%);
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  body::before {
    animation: mesh-drift 46s ease-in-out infinite alternate;
  }
}
@keyframes mesh-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-3%, 2%, 0) scale(1.04); }
  100% { transform: translate3d(2%, -3%, 0) scale(1.02); }
}
.hero__grid {
  opacity: 0.7;
}

/* ---- Section bands: translucent instead of solid ---- */
.section--tint {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.14));
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-edge);
}
[data-theme='dark'] .section--tint {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.005));
}
.section--dark {
  background:
    radial-gradient(900px 520px at 16% 0%, color-mix(in oklab, var(--color-primary) 20%, transparent), transparent 60%),
    radial-gradient(800px 520px at 88% 100%, color-mix(in oklab, var(--color-violet) 18%, transparent), transparent 60%),
    linear-gradient(180deg, #0a1124, #0b1530 55%, #0a1124);
}
.section--dark-2 {
  background:
    radial-gradient(820px 480px at 85% 0%, color-mix(in oklab, var(--color-violet) 18%, transparent), transparent 60%),
    radial-gradient(760px 480px at 10% 100%, color-mix(in oklab, var(--color-primary) 18%, transparent), transparent 60%),
    linear-gradient(180deg, #0a1124, #0e1430 55%, #0a1124);
}
[data-theme='dark'] .section--dark,
[data-theme='dark'] .section--dark-2 {
  background:
    radial-gradient(900px 520px at 16% 0%, color-mix(in oklab, var(--color-primary) 16%, transparent), transparent 60%),
    radial-gradient(800px 520px at 88% 100%, color-mix(in oklab, var(--color-violet) 16%, transparent), transparent 60%),
    linear-gradient(180deg, #070c18, #0a1124 55%, #070c18);
}
.section--dark-2 .section__inner::before,
.section--dark-2 .section__inner::after {
  height: 72px;
}

/* ---- Glass surfaces ---- */
.card,
.pareto-card,
.program,
.quote,
.split__col,
.contrast__col,
.outcome,
.preview,
.demo,
.evidence-figure {
  --surface-fill: var(--glass);
  border-color: transparent;
  background:
    linear-gradient(var(--surface-fill), var(--surface-fill)) padding-box,
    linear-gradient(145deg, var(--glass-border), var(--glass-edge) 40%, color-mix(in oklab, var(--color-primary) 22%, var(--glass-edge))) border-box;
  box-shadow: var(--glass-shadow);
}
.split__col--does,
.contrast__col--accent {
  --surface-fill: color-mix(in oklab, var(--color-primary-highlight) 70%, var(--glass));
}
.preview,
.demo {
  --surface-fill: var(--glass-strong);
}
.card:hover,
.pareto-card:hover,
.program:hover {
  background:
    linear-gradient(var(--glass-strong), var(--glass-strong)) padding-box,
    linear-gradient(145deg, var(--glass-border), color-mix(in oklab, var(--color-primary) 55%, var(--glass-edge)), color-mix(in oklab, var(--color-violet) 40%, var(--glass-edge))) border-box;
}
.program--featured {
  --surface-fill: var(--glass-strong);
}
.demo__input,
.statstrip__item,
.outcome__def,
.evidence-mobile__list li,
.evidence-mobile__gap,
.crl-note,
.facts__item,
.flow__item,
.demo__process,
.demo__doc,
.cta__panel {
  background: var(--glass);
  border-color: var(--glass-edge);
}
.crl-note,
.evidence-mobile__gap {
  background: color-mix(in oklab, var(--color-primary-highlight) 55%, var(--glass));
}
.gap-row {
  background: var(--glass);
}
.gap-row.is-open {
  background: var(--glass-strong);
}
.demo__side {
  background: rgba(255, 255, 255, 0.03);
}
.demo__bar,
.preview__bar {
  background: rgba(255, 255, 255, 0.04);
}
.footer {
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.3));
}
[data-theme='dark'] .footer {
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.02));
}
.nav-scrim {
  background: rgba(8, 14, 28, 0.42);
}
@media (max-width: 1023.98px) {
  .nav {
    background:
      radial-gradient(600px 400px at 90% 0%, var(--color-primary-glow), transparent 60%),
      radial-gradient(500px 360px at 0% 100%, var(--color-violet-glow), transparent 60%),
      var(--glass-strong);
  }
}

/* Backdrop blur where it stays cheap: larger screens, key surfaces */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  @media (min-width: 768px) {
    .card, .pareto-card, .program, .quote, .split__col, .contrast__col, .outcome, .evidence-figure, .preview, .demo, .cta__panel {
      -webkit-backdrop-filter: blur(16px) saturate(140%);
      backdrop-filter: blur(16px) saturate(140%);
    }
  }
  .header,
  .nav,
  .dots a span {
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
  }
  @media (max-width: 767.98px) {
    .card, .pareto-card, .program, .quote, .split__col, .contrast__col, .outcome, .evidence-figure {
      --surface-fill: var(--glass-strong);
    }
    .preview, .demo {
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }
  }
}

/* ---- Violet joins the blue in gradients ---- */
.scroll-progress,
.nav__indicator,
.steps__beam span {
  background: linear-gradient(90deg, var(--color-primary), var(--color-violet));
}
.steps__beam span {
  background: linear-gradient(to bottom, var(--color-primary), var(--color-violet));
}
.section::before {
  background: linear-gradient(90deg, transparent, var(--color-primary) 30%, var(--color-violet) 70%, transparent);
}
.section__kicker::before,
.section__kicker::after {
  background: linear-gradient(90deg, var(--color-primary), var(--color-violet));
}
.pareto-card__count {
  background: linear-gradient(135deg, var(--color-primary), var(--color-violet));
  -webkit-background-clip: text;
  background-clip: text;
}
.hero__aurora--b {
  background: radial-gradient(circle, color-mix(in oklab, var(--color-violet) 24%, transparent), transparent 64%);
}
.cta__aurora {
  background:
    radial-gradient(circle at 20% 30%, color-mix(in oklab, var(--color-primary) 55%, transparent), transparent 40%),
    radial-gradient(circle at 80% 70%, color-mix(in oklab, var(--color-violet) 45%, transparent), transparent 40%);
}
.orbit--3 i {
  background: var(--color-violet);
  box-shadow: 0 0 14px 3px var(--color-violet-glow);
}
.btn--primary {
  background: linear-gradient(135deg, color-mix(in oklab, var(--color-primary) 85%, #ffffff), var(--color-primary) 55%, color-mix(in oklab, var(--color-primary) 70%, var(--color-violet)));
}
.btn--primary:hover {
  background: linear-gradient(135deg, color-mix(in oklab, var(--color-primary-hover) 80%, #ffffff), var(--color-primary-hover) 55%, color-mix(in oklab, var(--color-primary-hover) 60%, var(--color-violet)));
}
[data-theme='dark'] .btn--primary,
.theme-dark-scope .btn--primary {
  background: linear-gradient(135deg, #5a82f5, #2d5de6 55%, #5b53d9);
}
[data-theme='dark'] .btn--primary:hover,
.theme-dark-scope .btn--primary:hover {
  background: linear-gradient(135deg, #6a90f7, #3a69ea 55%, #6a62e2);
}

/* ---- Theme switch ---- */
.theme-toggle {
  width: 58px;
  height: 32px;
  padding: 3px;
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-edge);
  background: var(--glass);
  display: block;
  position: relative;
  overflow: hidden;
  transition: background var(--t-med), border-color var(--t-fast), box-shadow var(--t-fast);
}
.theme-toggle:hover {
  border-color: color-mix(in oklab, var(--color-primary) 40%, var(--glass-edge));
  box-shadow: 0 0 0 4px var(--color-primary-glow);
}
.theme-toggle__track {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  pointer-events: none;
}
.theme-toggle__icon {
  width: 14px;
  height: 14px;
  color: var(--color-text-faint);
  transition: color var(--t-med), transform 500ms var(--ease-out), opacity var(--t-med);
}
.theme-toggle__icon svg {
  width: 100%;
  height: 100%;
}
.theme-toggle__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffffff, #e9eefb);
  box-shadow: 0 2px 6px rgba(12, 26, 51, 0.25), 0 0 0 1px rgba(12, 26, 51, 0.06);
  transition: transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1), background var(--t-med);
}
.theme-toggle[aria-checked='true'] {
  background: linear-gradient(135deg, color-mix(in oklab, var(--color-primary) 55%, #0b1222), color-mix(in oklab, var(--color-violet) 55%, #0b1222));
  border-color: rgba(255, 255, 255, 0.14);
}
.theme-toggle[aria-checked='true'] .theme-toggle__knob {
  transform: translateX(26px);
  background: linear-gradient(145deg, #1a2446, #0d1530);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 14px var(--color-violet-glow);
}
.theme-toggle__icon--sun { color: var(--color-major); }
.theme-toggle[aria-checked='true'] .theme-toggle__icon--sun { opacity: 0.45; color: var(--color-text-faint); transform: rotate(90deg) scale(0.85); }
.theme-toggle[aria-checked='true'] .theme-toggle__icon--moon { color: #dfe4ff; transform: rotate(-12deg); }
.theme-toggle:hover svg { transform: none; }
.theme-toggle:focus-visible {
  outline-offset: 3px;
}

/* ---- Theme crossfade ---- */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition-property: background-color, background, color, border-color, box-shadow, fill, stroke;
  transition-duration: 520ms;
  transition-timing-function: ease;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 420ms;
  animation-timing-function: ease;
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  html.theme-switching * { transition: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .theme-toggle__knob, .theme-toggle__icon { transition: none; }
}

/* Hero card stays deep navy over the light page; menu sheet stays legible */
.hero .preview {
  --surface-fill: rgba(11, 18, 36, 0.94);
  box-shadow:
    0 60px 120px -40px rgba(12, 26, 51, 0.55),
    0 24px 48px -24px rgba(12, 26, 51, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 0 80px -30px var(--color-violet-glow);
}
[data-theme='dark'] .hero .preview {
  --surface-fill: rgba(11, 18, 36, 0.86);
}
@media (max-width: 1023.98px) {
  .nav {
    background:
      radial-gradient(600px 400px at 90% 0%, var(--color-primary-glow), transparent 60%),
      radial-gradient(500px 360px at 0% 100%, var(--color-violet-glow), transparent 60%),
      color-mix(in oklab, var(--page-bg) 97%, transparent);
  }
}

/* ============================================================
   20. SEO eyebrow, mobile readability (plan R6, R7, R8)
   ============================================================ */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-primary);
}
.hero__eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-violet));
}
@media (prefers-reduced-motion: no-preference) {
  .hero__copy > .hero__eyebrow {
    animation: hero-rise 600ms var(--ease-out) both;
  }
}

/* Opaque header once scrolled on phones and tablets */
@media (max-width: 1023.98px) {
  .header--scrolled {
    background: color-mix(in oklab, var(--page-bg) 94%, transparent);
  }
}

/* Body copy left-aligned on phones; short headings stay centered */
@media (max-width: 767.98px) {
  .section__lede,
  .quote-group__note,
  .card__body,
  .quote__text,
  .quote__attribution,
  .flow__item p,
  .step__body,
  .outcome__def p,
  .pareto__note,
  .crl-note,
  .evidence-figure__foot,
  .evidence-mobile__list li,
  .gap-row__section-text,
  .program__body,
  .compliance__item span,
  .cta__sub,
  .sev-key__row dd {
    text-align: left;
  }
  .quote {
    text-align: left;
  }
  .quote::before {
    left: 0;
    top: var(--space-6);
    bottom: var(--space-6);
    width: 3px;
    height: auto;
    transform: none;
    border-radius: 3px;
  }
  .card {
    align-items: stretch;
  }
  .card__title {
    text-align: center;
  }
  .card__body {
    max-width: none;
  }
  .outcome__def {
    justify-items: start;
  }
  .outcome__def .pill {
    justify-self: start;
  }
  .outcome {
    text-align: left;
  }
  .outcome__label {
    text-align: center;
  }
  .program {
    align-items: stretch;
  }
  .program__title {
    text-align: center;
  }
  .program__link {
    align-self: center;
  }
  .compliance__item {
    align-items: stretch;
  }
  .compliance__item strong {
    text-align: center;
  }
  .cta__sub {
    text-align: center;
  }

  /* Platform loop: vertical timeline instead of a carousel */
  .flow {
    display: grid;
    gap: 0;
    overflow: visible;
    scroll-snap-type: none;
    padding: 0;
    margin: 0;
    position: relative;
  }
  .flow::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 28px;
    bottom: 28px;
    width: 1px;
    background: linear-gradient(to bottom, var(--color-primary), var(--color-violet), var(--color-divider));
    opacity: 0.6;
  }
  .flow__item {
    flex: none;
    scroll-snap-align: none;
    border: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-areas: 'num title' 'num body';
    column-gap: var(--space-4);
    row-gap: 4px;
    justify-items: start;
    text-align: left;
    padding: var(--space-3) 0 var(--space-5);
  }
  .flow__item.is-current {
    border: 0;
    box-shadow: none;
  }
  .flow__num {
    width: 36px;
    height: 36px;
    font-size: 0.74rem;
  }
  .flow__item h3 {
    align-self: center;
  }
  .flow__item p {
    max-width: none;
  }
  .flow__item:not(:last-child)::after {
    display: none;
  }
}

/* ============================================================
   21. Multi-page site: page heroes, prose, leader, form, footer
   ============================================================ */
.page-hero {
  position: relative;
  overflow: clip;
  isolation: isolate;
  padding: clamp(3rem, 2rem + 4vw, 6rem) var(--gutter) clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.page-hero__inner {
  max-width: var(--content-default);
  margin: 0 auto;
}
.page-hero .hero__title {
  font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.2rem);
  max-width: 16ch;
  margin-top: var(--space-4);
}
.page-hero__lede {
  margin-top: var(--space-5);
  max-width: 58ch;
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text-muted);
}
.page-hero .hero__grid {
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 30% 20%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 80% at 30% 20%, #000 10%, transparent 70%);
}
.page-hero--article .page-hero__inner {
  max-width: 760px;
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}
.two-col .section__head {
  margin-bottom: 0;
}
@media (min-width: 960px) {
  .two-col {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-12);
  }
}
.prose {
  max-width: 64ch;
}
.prose p {
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--color-text-muted);
}
.prose p + p,
.prose h2 + p,
.prose p + h2,
.prose aside + h2,
.prose .article__takeaways + h2 {
  margin-top: 1.1em;
}
.prose h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: -0.015em;
  margin-top: 1.6em;
}
.prose .checklist li {
  font-size: var(--text-base);
}
/* Leadership */
.leader {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-7);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-lg);
  background: var(--glass);
  box-shadow: var(--glass-shadow);
  max-width: 880px;
}
.leader__photo {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  object-fit: cover;
  background: #0b1222;
  box-shadow: 0 0 0 4px var(--color-bg), 0 0 0 5px var(--glass-edge), 0 24px 50px -24px rgba(12, 26, 51, 0.5), 0 0 60px -20px var(--color-primary-glow);
  justify-self: center;
}
.leader__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: -0.015em;
}
.leader__role {
  margin-top: 4px;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
}
.leader__text {
  margin-top: var(--space-4);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: 50ch;
}
.leader__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
@media (min-width: 640px) {
  .leader {
    grid-template-columns: 168px minmax(0, 1fr);
    gap: var(--space-8);
  }
  .leader__photo {
    justify-self: start;
  }
}
@media (max-width: 639.98px) {
  .leader {
    text-align: center;
    padding: var(--space-6) var(--space-5);
  }
  .leader__text {
    margin-left: auto;
    margin-right: auto;
  }
  .leader__actions {
    justify-content: center;
  }
}

/* Product page: worked example */
.example-finding {
  max-width: 960px;
}
.example-finding .gap-row {
  opacity: 1;
  transform: none;
}
.example-finding__cta {
  margin-top: var(--space-6);
}
@media (max-width: 767.98px) {
  .example-finding__cta {
    text-align: center;
  }
  .example-finding__cta .btn {
    width: 100%;
  }
}

/* Contact */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 960px) {
  .contact-layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.9fr);
    gap: var(--space-8);
  }
}
.form {
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-edge);
  background: var(--glass-strong);
  box-shadow: var(--glass-shadow);
}
.form__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: -0.015em;
}
.form__note {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
}
.form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}
@media (min-width: 640px) {
  .form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .field--full {
    grid-column: 1 / -1;
  }
}
.field {
  display: grid;
  gap: 6px;
}
.field label {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
}
.field__optional {
  font-weight: 400;
  color: var(--color-text-faint);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-4);
  font: inherit;
  font-size: max(16px, var(--text-base));
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.theme-dark-scope .field input,
[data-theme='dark'] .field input,
[data-theme='dark'] .field select,
[data-theme='dark'] .field textarea {
  background: rgba(255, 255, 255, 0.04);
}
.field textarea {
  min-height: 140px;
  padding: var(--space-3) var(--space-4);
  resize: vertical;
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-glow);
}
.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid {
  border-color: var(--color-critical);
}
.field--hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.form__privacy {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  max-width: 36ch;
}
.form__status {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
}
.form__status.is-ok {
  color: var(--color-clear);
}
.form__status.is-error {
  color: var(--color-critical);
}
.form__status:empty {
  display: none;
}
.contact-side {
  display: grid;
  gap: var(--space-4);
}
.contact-card {
  padding: var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-edge);
  background: var(--glass);
  box-shadow: var(--glass-shadow);
}
.contact-card__title {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.contact-card__text {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.contact-card__link {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.steps--compact .step {
  grid-template-columns: 34px minmax(0, 1fr);
  padding-bottom: var(--space-4);
}
.steps--compact .step__num {
  width: 34px;
  height: 34px;
  font-size: 0.72rem;
}
.steps--compact .step::before {
  left: 16px;
  top: 32px;
}
.steps--compact .step__content {
  padding-top: 4px;
}
.steps--compact .step__title {
  font-size: var(--text-sm);
  margin-bottom: 2px;
}
.steps--compact .step__body {
  font-size: var(--text-xs);
}
@media (max-width: 767.98px) {
  .form {
    padding: var(--space-5);
  }
  .form__actions .btn {
    width: 100%;
  }
  .steps--compact .step {
    grid-template-columns: 34px minmax(0, 1fr);
    justify-items: start;
    text-align: left;
  }
  .steps--compact .step::before {
    display: block;
  }
}

/* Site footer with columns */
.footer__inner--site {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: none;
}
.footer__mail {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-primary);
}
.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-6);
}
.footer__col {
  display: grid;
  gap: 6px;
  align-content: start;
}
.footer__heading {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-2);
}
.footer__col a {
  display: inline-block;
  padding: 3px 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: color var(--t-fast);
}
.footer__col a:hover {
  color: var(--color-text);
}
@media (min-width: 800px) {
  .footer__inner--site {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
    grid-template-areas: 'brand cols' 'meta meta' 'legal legal';
  }
  .footer__cols {
    grid-area: cols;
    justify-self: end;
    width: 100%;
    max-width: 560px;
  }
}
@media (max-width: 767.98px) {
  .footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: left;
    width: 100%;
  }
  .footer__col {
    justify-items: start;
  }
}

/* ============================================================
   22. Glass navigation: readable header in every theme and state
   ============================================================ */
:root,
[data-theme='light'] {
  --nav-bg: rgba(247, 249, 253, 0.76);
  --nav-bg-scrolled: rgba(247, 249, 253, 0.9);
  --nav-border: rgba(12, 26, 51, 0.09);
  --nav-border-scrolled: rgba(12, 26, 51, 0.15);
  --nav-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset, 0 8px 24px -20px rgba(12, 26, 51, 0.3);
  --nav-shadow-scrolled: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 14px 34px -18px rgba(12, 26, 51, 0.38);
  --nav-sheen: rgba(255, 255, 255, 0.6);
  --nav-text: #1a2847;
  --nav-text-strong: #0c1a33;
  --nav-pill: rgba(31, 79, 216, 0.09);
  --nav-pill-strong: rgba(31, 79, 216, 0.14);
  --nav-panel: #f6f8fc; /* solid: the open menu must never let the page show through */
  --nav-control-bg: rgba(255, 255, 255, 0.55);
}
[data-theme='dark'] {
  --nav-bg: rgba(9, 16, 32, 0.74);
  --nav-bg-scrolled: rgba(9, 16, 32, 0.9);
  --nav-border: rgba(255, 255, 255, 0.09);
  --nav-border-scrolled: rgba(255, 255, 255, 0.15);
  --nav-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 10px 30px -20px rgba(0, 0, 0, 0.7);
  --nav-shadow-scrolled: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 16px 40px -18px rgba(0, 0, 0, 0.8), 0 0 48px -24px rgba(126, 164, 255, 0.45);
  --nav-sheen: rgba(126, 164, 255, 0.28);
  --nav-text: #d8e0f2;
  --nav-text-strong: #ffffff;
  --nav-pill: rgba(126, 164, 255, 0.14);
  --nav-pill-strong: rgba(126, 164, 255, 0.22);
  --nav-panel: #090f1f;
  --nav-control-bg: rgba(255, 255, 255, 0.06);
}

/* ---- Header surface: glass at the top, denser glass once scrolled ---- */
.header {
  z-index: 80;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border-bottom: 1px solid var(--nav-border);
  box-shadow: var(--nav-shadow);
  transition: background 360ms var(--ease-out), border-color 360ms var(--ease-out), box-shadow 360ms var(--ease-out);
}
.header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, var(--nav-sheen), transparent 95%);
  pointer-events: none;
}
.header--scrolled {
  background: var(--nav-bg-scrolled);
  border-bottom-color: var(--nav-border-scrolled);
  box-shadow: var(--nav-shadow-scrolled);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
}
@media (max-width: 1023.98px) {
  .header--scrolled {
    background: var(--nav-bg-scrolled);
  }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .header,
  .header--scrolled {
    background: color-mix(in oklab, var(--page-bg) 97%, transparent);
  }
}
.header__inner {
  gap: var(--space-5);
}
/* Keep the bar a constant height: the mobile panel is anchored to it, so a shrinking bar would open a gap */
.header--scrolled .header__inner {
  min-height: var(--header-h);
}
.brand {
  color: var(--nav-text-strong);
}

/* ---- Desktop links: pill hover, clear active page ---- */
@media (min-width: 1024px) {
  .nav__list {
    gap: 2px;
  }
  .nav__list a {
    padding: 8px 13px;
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--nav-text);
    transition: color var(--t-fast), background var(--t-fast);
  }
  .nav__list a:hover {
    color: var(--nav-text-strong);
    background: var(--nav-pill);
  }
  .nav__list a[aria-current='page'],
  .nav__list a.is-active {
    color: var(--nav-text-strong);
    font-weight: 600;
  }
  .nav__list a[aria-current='page'] {
    background: var(--nav-pill);
  }
  .nav__list a:focus-visible {
    outline-offset: 0;
  }
  .nav__indicator {
    bottom: 1px;
    height: 2px;
    border-radius: 2px;
  }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .nav__list a {
    padding: 7px 10px;
    font-size: 0.84rem;
  }
}

/* ---- Controls: toggle and hamburger always visible on glass ---- */
.theme-toggle {
  border-color: var(--nav-border-scrolled);
  background: var(--nav-control-bg);
}
.nav-toggle {
  width: 42px;
  height: 42px;
  margin-right: 0;
  border-radius: var(--radius-full);
  border: 1px solid var(--nav-border-scrolled);
  background: var(--nav-control-bg);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.nav-toggle:hover {
  background: var(--nav-pill-strong);
}
.nav-toggle__bar {
  background: var(--nav-text-strong);
}
.nav-toggle[aria-expanded='true'] {
  background: var(--nav-pill-strong);
}

/* ---- Mobile panel: dense glass so the hero never shows through the menu ---- */
.nav-scrim {
  z-index: 70;
  background: rgba(6, 11, 24, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
@media (max-width: 1023.98px) {
  .nav {
    z-index: 75;
    background:
      radial-gradient(520px 320px at 92% 0%, var(--color-primary-glow), transparent 62%),
      var(--nav-panel);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    border-bottom: 1px solid var(--nav-border-scrolled);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55);
    transform: translateY(-14px);
    transition: opacity 260ms var(--ease-out), transform 320ms var(--ease-out), visibility 0s linear 320ms;
  }
  .nav.is-open {
    transform: none;
    transition: opacity 220ms var(--ease-out), transform 320ms var(--ease-out), visibility 0s;
  }
  .nav__list li + li {
    border-top: 1px solid var(--color-divider);
  }
  .nav__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    color: var(--color-text);
  }
  /* number before the label, chevron after it, at every collapsed width */
  .nav__list a::after {
    order: -1;
    margin-right: 14px;
  }
  .nav__list a::before {
    content: '';
    order: 2;
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-right: 1.5px solid var(--color-text-faint);
    border-bottom: 1.5px solid var(--color-text-faint);
    transform: rotate(-45deg);
    transition: transform var(--t-fast), border-color var(--t-fast);
  }
  .nav__list a:hover,
  .nav__list a:active {
    color: var(--color-primary);
  }
  .nav__list a.is-active,
  .nav__list a[aria-current='page'] {
    color: var(--color-primary);
  }
  .nav__list a[aria-current='page']::after {
    color: var(--color-primary);
  }
  .nav__list a[aria-current='page']::before {
    border-color: var(--color-primary);
  }
  .nav__list a:focus-visible {
    outline-offset: -3px;
    border-radius: var(--radius-sm);
  }
  .nav__mobile-actions .btn {
    min-height: 48px;
  }
  .nav__mobile-contact {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
  }
}
@media (prefers-reduced-motion: reduce) {
  .header,
  .nav,
  .nav.is-open,
  .nav__list li,
  .nav__mobile-actions {
    transition: none !important;
    transform: none !important;
  }
}

/* ---- 404 page ---- */
.not-found {
  min-height: 60vh;
  display: grid;
  align-items: center;
}
.not-found__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
}
@media (max-width: 479.98px) {
  .not-found__actions .btn {
    width: 100%;
  }
}