/* ============================================================
   THE INDEX CLINIC . Design System CSS v6.0
   Brand: Editorial Clinical (April 2026)
   Fonts: Neue Haas Grotesk Display (local) · Inter (body) · DM Mono (data/labels)
   ============================================================ */

/* Imports MUST come before any other rules in CSS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400&display=swap');

/* Local Neue Haas Grotesk Display . site/fonts/ */
@font-face {
  font-family: "Neue Haas Display";
  src: url("/fonts/NeueHaasDisplayThin.ttf") format("truetype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("/fonts/NeueHaasDisplayLight.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("/fonts/NeueHaasDisplayRoman.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("/fonts/NeueHaasDisplayMediu.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("/fonts/NeueHaasDisplayBold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ── Design Tokens ────────────────────────────────────────── */
:root {
  /* Editorial Clinical palette */
  --stone:        #E1E6E0;   /* paper-stock body bg */
  --clay:         #CAC6BC;   /* warm putty */
  --sage:         #7A8463;   /* sage green-grey */
  --olive:        #4A5242;   /* primary CTA / authority */
  --charcoal:     #121212;   /* near-black for text & dark sections */
  --gold:         #C8A06A;   /* warm metallic accent */
  --terracotta:   #B05A4A;   /* secondary / warning accent */
  --dusk-blue:    #5D6F8F;   /* cool counterpoint */
  --highlight-lime: #C8FF40; /* THE single highlight . used 1-2× per viewport */
  --off-white:    #F7F8F2;   /* card / elevated surface */

  /* Aliases (so legacy variables continue to resolve) */
  --void:   var(--charcoal);
  --silver: var(--clay);
  --bone:   var(--stone);
  --white:  var(--off-white);

  /* Legacy Pantone names retained as aliases (no internal page references break) */
  --ultra-violet:    var(--dusk-blue);
  --very-peri:       var(--dusk-blue);
  --living-coral:    var(--terracotta);
  --peach-fuzz:      #F4D4B0;
  --illuminating:    var(--highlight-lime);
  --classic-blue:    var(--dusk-blue);
  --cerulean:        #A6B6CE;
  --greenery:        var(--sage);
  --viva-magenta:    var(--olive);   /* primary accent rebound to Olive */
  --tangerine-tango: var(--terracotta);
  --mocha-mousse:    var(--gold);

  /* Circadian Backgrounds (re-tuned) */
  --bg-night:   #0A0D0A;
  --bg-morning: var(--stone);
  --bg-midday:  #E8ECE6;
  --bg-dusk:    #14141A;

  /* Semantic defaults (Morning-like light state) */
  --surface:         var(--stone);
  --surface-card:    var(--off-white);
  --on-surface:      var(--charcoal);
  --on-surface-muted: rgba(18, 18, 18, 0.58);
  --border-light:    rgba(18, 18, 18, 0.10);
  --border-mid:      rgba(18, 18, 18, 0.20);

  /* Brand-kit gradient . Sunrise → Dusk (used as graphic device, not a bg) */
  --gradient-sunrise-dusk: linear-gradient(180deg, #F4D4B0 0%, #E8B89A 28%, #C8B0A8 58%, #8FA1B8 82%, var(--dusk-blue) 100%);

  /* CTA gradient . kept as an alias so old buttons still work; we rarely use it */
  --gradient-cta:    linear-gradient(135deg, var(--olive) 0%, var(--sage) 100%);
  --gradient-golden: linear-gradient(135deg, var(--gold) 0%, #E0C28A 100%);

  /* Interactive . Olive primary */
  --accent:          var(--olive);
  --accent-hover:    var(--sage);
  --accent-muted:    rgba(74, 82, 66, 0.08);
  --accent-text:     var(--olive);

  /* Typography */
  --f-display: "Neue Haas Display", "Inter Tight", "Helvetica Neue", sans-serif;  /* headlines & lockup */
  --f-body:    "Inter", "Helvetica Neue", sans-serif;                              /* body & UI */
  --f-mono:    "DM Mono", ui-monospace, monospace;                                 /* data, labels, marks */

  /* Backward-compat aliases (existing HTML/JS using --tic-* names) */
  --tic-white-warm:    var(--stone);
  --tic-white-pure:    var(--off-white);
  --tic-white-mist:    var(--stone);
  --tic-ink-900:       var(--charcoal);
  --tic-ink-700:       #2A2D28;
  --tic-ink-500:       var(--on-surface-muted);
  --tic-ink-400:       var(--on-surface-muted);
  --tic-ink-200:       var(--border-mid);
  --tic-ink-100:       var(--border-light);
  --tic-ink-50:        var(--stone);
  --tic-green:         var(--olive);
  --tic-green-hover:   var(--sage);
  --tic-green-active:  #3A4234;
  --tic-green-muted:   var(--accent-muted);
  --tic-green-text:    var(--olive);
  --tic-amber:         var(--terracotta);
  --tic-amber-muted:   rgba(176, 90, 74, 0.08);
  --tic-amber-text:    var(--terracotta);
  --tic-success:       var(--olive);
  --tic-warning:       var(--terracotta);
  --tic-error:         #B33B3B;
  --tic-error-muted:   rgba(179, 59, 59, 0.08);
  --tic-info:          var(--dusk-blue);
  --font-display:      var(--f-display);
  --font-text:         var(--f-body);
  --font-mono:         var(--f-mono);

  /* Tracking */
  --tracking-display: 0.14em;   /* +140 . logo / data labels */
  --tracking-h1:      0.06em;   /* +60  . H1 */
  --tracking-h2:      0.04em;   /* +40  . H2 */
  --tracking-body:    0.01em;   /* +10  . body */

  /* Spacing */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-30:  120px;
  --sp-40:  160px;

  /* Layout */
  --max-width:     1200px;
  --max-wide:      1440px;
  --gutter:        32px;
  --section-v:     96px;

  /* Radius */
  --r-micro:    3px;
  --r-std:      6px;
  --r-card:     10px;
  --r-feature:  12px;
  --r-large:    18px;
  --r-pill:     9999px;
  --r-circle:   50%;

  /* Shadows */
  --shadow-ring:     rgba(8, 8, 8, 0.06) 0px 0px 0px 1px;
  --shadow-subtle:   rgba(8, 8, 8, 0.04) 0px 1px 4px;
  --shadow-card:     rgba(8, 8, 8, 0.06) 0px 4px 16px, rgba(8, 8, 8, 0.03) 0px 1px 3px;
  --shadow-feature:  rgba(8, 8, 8, 0.08) 0px 8px 32px -4px, rgba(8, 8, 8, 0.04) 0px 2px 8px;
  --shadow-elevated: rgba(8, 8, 8, 0.10) 0px 12px 40px -8px, rgba(8, 8, 8, 0.05) 0px 4px 12px;
  --shadow-modal:    rgba(8, 8, 8, 0.14) 0px 24px 64px -16px, rgba(8, 8, 8, 0.07) 0px 8px 24px -8px;
  --shadow-focus:    0 0 0 2px var(--stone), 0 0 0 4px var(--olive);
}

/* ── Circadian state overrides (set by data-state on <html>) ── */
[data-state="night"] {
  --surface:          var(--bg-night);
  --surface-card:     rgba(255, 255, 255, 0.04);
  --on-surface:       #FFFFFF;
  --on-surface-muted: rgba(255, 255, 255, 0.55);
  --border-light:     rgba(255, 255, 255, 0.08);
  --border-mid:       rgba(255, 255, 255, 0.15);
  --shadow-card:      rgba(255, 255, 255, 0.04) 0px 0px 0px 1px;
}

[data-state="morning"] {
  --surface:          var(--bg-morning);
  --on-surface:       #1A0800;
  --on-surface-muted: rgba(26, 8, 0, 0.55);
}

[data-state="midday"] {
  --surface:          var(--bg-midday);
  --on-surface:       #020C1E;
  --on-surface-muted: rgba(2, 12, 30, 0.55);
}

[data-state="dusk"] {
  --surface:          var(--bg-dusk);
  --surface-card:     rgba(255, 255, 255, 0.04);
  --on-surface:       #FFFFFF;
  --on-surface-muted: rgba(255, 255, 255, 0.55);
  --border-light:     rgba(255, 255, 255, 0.08);
  --border-mid:       rgba(255, 255, 255, 0.15);
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--surface);
  color: var(--on-surface);
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.58;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.6s ease, color 0.3s ease;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul, ol { list-style: none; }

/* ── Global autofill defence ──────────────────────────────
   Browser autofill (Chrome, Safari, Edge) replaces input
   background AND text colour. Each themed form re-asserts
   colours below; this global fallback prevents the worst
   white-on-white state for any unthemed form. */
input, textarea, select { color: inherit; }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: inherit !important;
  caret-color: currentColor !important;
  transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}

/* ── Circadian gradient blobs ─────────────────────────────── */
.circadian-surface {
  position: relative;
  overflow: hidden;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

[data-state="night"]   .blob { mix-blend-mode: screen; }
[data-state="morning"] .blob { mix-blend-mode: multiply; }
[data-state="midday"]  .blob { mix-blend-mode: multiply; }
[data-state="dusk"]    .blob { mix-blend-mode: screen; }

.arc {
  border: 0.5px solid rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  position: absolute;
  pointer-events: none;
}

/* ── Typography ───────────────────────────────────────────── */

/* Display . Neue Haas Medium: numerals & lockup */
.t-display-num {
  font-family: var(--f-display);
  font-size: clamp(52px, 7vw, 96px);
  font-weight: 500;
  line-height: 1.00;
  letter-spacing: -0.02em;
  color: var(--on-surface);
}

/* Hero headline . Neue Haas 500, sentence case */
.t-display-hero {
  font-family: var(--f-display);
  font-size: clamp(48px, 7.4vw, 112px);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--on-surface);
}

.t-display-lg {
  font-family: var(--f-display);
  font-size: clamp(38px, 5vw, 72px);
  font-weight: 500;
  line-height: 1.00;
  letter-spacing: -0.022em;
  color: var(--on-surface);
}

.t-display {
  font-family: var(--f-display);
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.020em;
  color: var(--on-surface);
}

.t-h1 {
  font-family: var(--f-display);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--on-surface);
}

.t-h2 {
  font-family: var(--f-display);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.014em;
  color: var(--on-surface);
}

.t-h3 {
  font-family: var(--f-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.010em;
  color: var(--on-surface);
}

.t-h4 {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.008em;
  color: var(--on-surface);
}

.t-body-lg {
  font-family: var(--f-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.60;
  letter-spacing: 0;
  color: var(--on-surface-muted);
}

.t-body {
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.58;
  letter-spacing: 0;
  color: var(--on-surface-muted);
}

.t-body-sm {
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--on-surface-muted);
}

.t-caption {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--on-surface-muted);
}

/* Data / Label . DM Mono 300, ALL CAPS, +140 tracking */
.t-label {
  display: block;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 300;
  line-height: 1.00;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--on-surface-muted);
}

.t-label-sm {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 300;
  line-height: 1.00;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--on-surface-muted);
}

/* Data values . DM Mono, tabular nums */
.t-data-hero {
  font-family: var(--f-mono);
  font-size: 36px;
  font-weight: 300;
  line-height: 1.00;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--on-surface);
}

.t-data-lg {
  font-family: var(--f-mono);
  font-size: 24px;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums lining-nums;
}

.t-data {
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.50;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ── Layout ───────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container-wide {
  width: 100%;
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: var(--section-v) 0;
}

.section-sm {
  padding: calc(var(--section-v) * 0.6) 0;
}

.section-lg {
  padding: calc(var(--section-v) * 1.25) 0;
}

/* Grid systems */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-8);
}

/* Hairline rule */
.hairline {
  border: none;
  border-top: 0.5px solid var(--border-light);
  width: 100%;
}

.hairline-dark {
  border: none;
  border-top: 0.5px solid rgba(255, 255, 255, 0.10);
  width: 100%;
}

/* ── Navigation ───────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 60px;
  background: rgba(242, 239, 232, 0.92);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 0.5px solid var(--border-light);
}

[data-state="night"]  .nav,
[data-state="dusk"]   .nav {
  background: rgba(8, 8, 8, 0.92);
}
[data-state="morning"] .nav { background: rgba(255, 246, 238, 0.92); }
[data-state="midday"]  .nav { background: rgba(221, 232, 245, 0.92); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.nav-brand {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--on-surface);
  text-decoration: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}

.nav-link {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: var(--tracking-h2);
  text-transform: uppercase;
  color: var(--on-surface-muted);
  text-decoration: none;
  transition: color 0.15s ease;
  position: relative;
}

.nav-link:hover { color: var(--on-surface); }

.nav-link.active {
  color: var(--on-surface);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 0.5px;
  background: var(--on-surface);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* Mobile nav */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--on-surface);
  transition: all 0.2s ease;
}

.nav-mobile {
  display: none;
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  background: rgba(242, 239, 232, 0.98);
  backdrop-filter: blur(20px);
  border-bottom: 0.5px solid var(--border-light);
  padding: var(--sp-5) var(--gutter) var(--sp-8);
}

[data-state="night"] .nav-mobile,
[data-state="dusk"]  .nav-mobile { background: rgba(8, 8, 8, 0.98); }

.nav-mobile.open { display: block; }

.nav-mobile-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-5);
}

.nav-mobile-link {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: var(--tracking-h2);
  text-transform: uppercase;
  color: var(--on-surface-muted);
  padding: var(--sp-3) 0;
  border-bottom: 0.5px solid var(--border-light);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  line-height: 1;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
}

.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Primary . Crimson Dusk gradient */
.btn-primary {
  background: var(--gradient-cta);
  color: #FFFFFF;
  border-color: transparent;
}
.btn-primary:hover { opacity: 0.88; }
.btn-primary:active { opacity: 0.78; }

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--on-surface);
  border-color: var(--border-mid);
}
.btn-ghost:hover { background: rgba(8, 8, 8, 0.05); border-color: var(--border-mid); }
[data-state="night"]  .btn-ghost:hover,
[data-state="dusk"]   .btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }

/* Ink / Dark */
.btn-ink {
  background: var(--void);
  color: var(--bone);
  border-color: var(--void);
}
.btn-ink:hover { opacity: 0.88; }

/* Ink Ghost . for dark sections */
.btn-ink-ghost {
  background: transparent;
  color: var(--bone);
  border-color: rgba(242, 239, 232, 0.25);
}
.btn-ink-ghost:hover { background: rgba(242, 239, 232, 0.08); }

/* Morning CTA . Illuminating Yellow (Morning state only) */
.btn-morning {
  background: var(--gradient-golden);
  color: var(--void);
  border-color: transparent;
}
.btn-morning:hover { opacity: 0.88; }

/* Large variant */
.btn-lg {
  font-size: 13px;
  padding: 16px 32px;
}

/* Small variant */
.btn-sm {
  font-size: 10px;
  padding: 8px 16px;
}

/* ── Pill / Tag ───────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  line-height: 1;
  padding: 4px 12px;
  border-radius: var(--r-pill);
}

/* Inactive (default) */
.tag-neutral {
  background: var(--surface-card);
  border: 1px solid rgba(8, 8, 8, 0.12);
  color: var(--on-surface-muted);
}
[data-state="night"] .tag-neutral,
[data-state="dusk"]  .tag-neutral { border-color: rgba(255, 255, 255, 0.12); }

/* Active (selected) . Crimson Dusk */
.tag-active {
  background: var(--gradient-cta);
  border: none;
  color: #FFFFFF;
}

/* Accent muted */
.tag-accent {
  background: var(--accent-muted);
  color: var(--accent-text);
  border: none;
}

/* Data badge */
.badge-data {
  display: inline-flex;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r-micro);
  background: rgba(187, 38, 73, 0.08);
  color: var(--viva-magenta);
  border: 1px solid rgba(187, 38, 73, 0.18);
}

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  border-radius: var(--r-card);
  padding: var(--sp-6);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: var(--shadow-feature);
}

/* Feature Card . Viva Magenta crown */
.card-feature {
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  border-radius: var(--r-feature);
  border-top: 3px solid var(--viva-magenta);
  padding: var(--sp-6);
  box-shadow: var(--shadow-feature);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card-feature:hover {
  box-shadow: var(--shadow-elevated);
  transform: translateY(-2px);
}

/* Dark Card */
.card-dark {
  background: var(--void);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-card);
  padding: var(--sp-6);
}

/* Data Panel */
.data-panel {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--r-card);
  overflow: hidden;
}

.data-panel-header {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 0.5px solid var(--border-light);
}

.data-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px var(--sp-5);
  border-bottom: 0.5px solid var(--border-light);
  min-height: 44px;
}

.data-row:last-child { border-bottom: none; }

.data-row-label {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--on-surface-muted);
}

.data-row-value {
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--on-surface);
  font-variant-numeric: tabular-nums;
}

.data-row-value.flagged { color: var(--viva-magenta); }

/* ── Pathway Cards ────────────────────────────────────────── */
.pathway-card {
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  border-radius: var(--r-feature);
  padding: var(--sp-8) var(--sp-6);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  display: block;
}

.pathway-card:hover {
  box-shadow: var(--shadow-feature);
  transform: translateY(-3px);
}

.pathway-card-label {
  display: inline-flex;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--viva-magenta);
  background: var(--accent-muted);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-4);
}

.pathway-card-title {
  font-family: var(--f-body);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: var(--tracking-h2);
  text-transform: uppercase;
  color: var(--on-surface);
  margin-bottom: var(--sp-3);
}

.pathway-card-body {
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 300;
  color: var(--on-surface-muted);
  line-height: 1.55;
  margin-bottom: var(--sp-5);
}

.pathway-card-link {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--viva-magenta);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── Forms & Inputs ───────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.form-label {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--on-surface-muted);
}

.form-input {
  background: var(--surface-card);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-std);
  padding: 11px 14px;
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 300;
  color: var(--on-surface);
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
}

.form-input::placeholder { color: var(--on-surface-muted); opacity: 0.6; }

.form-input:focus {
  outline: none;
  border-color: var(--viva-magenta);
  box-shadow: 0 0 0 3px rgba(187, 38, 73, 0.12);
}

.form-input.error { border-color: #C74343; }

/* ── Hero Section ─────────────────────────────────────────── */
.hero {
  padding: 100px 0 var(--section-v);
  background: var(--surface);
  position: relative;
}

.hero-eyebrow {
  margin-bottom: var(--sp-5);
}

.hero-headline {
  max-width: 720px;
  margin-bottom: var(--sp-5);
}

.hero-sub {
  max-width: 560px;
  font-family: var(--f-body);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: var(--tracking-body);
  color: var(--on-surface-muted);
  margin-bottom: var(--sp-8);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* ── Trust Bar ────────────────────────────────────────────── */
.trust-bar {
  padding: var(--sp-10) 0;
  border-top: 0.5px solid var(--border-light);
  border-bottom: 0.5px solid var(--border-light);
}

.trust-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.trust-item {
  flex: 1;
  text-align: center;
  padding: 0 var(--sp-8);
  position: relative;
}

.trust-item + .trust-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  height: 80%;
  width: 0.5px;
  background: var(--border-light);
}

.trust-item-value {
  font-family: var(--f-mono);
  font-size: 24px;
  font-weight: 300;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--on-surface);
  display: block;
  margin-bottom: 4px;
}

.trust-item-label {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--on-surface-muted);
}

/* ── Steps Section ────────────────────────────────────────── */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--border-light);
  border-radius: var(--r-feature);
  overflow: hidden;
}

.step-item {
  padding: var(--sp-10) var(--sp-8);
  position: relative;
}

.step-item + .step-item {
  border-left: 0.5px solid var(--border-light);
}

.step-number {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: var(--tracking-display);
  color: var(--on-surface-muted);
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--sp-4);
}

.step-name {
  font-family: var(--f-body);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: var(--tracking-h2);
  text-transform: uppercase;
  color: var(--on-surface);
  margin-bottom: var(--sp-3);
}

/* ── Dark Section ─────────────────────────────────────────── */
.section-dark {
  background: var(--void);
  padding: var(--section-v) 0;
  color: var(--bone);
}

.section-dark .t-display,
.section-dark .t-display-lg,
.section-dark .t-h1,
.section-dark .t-h2,
.section-dark .t-h3 { color: var(--bone); }

.section-dark .t-body,
.section-dark .t-body-lg,
.section-dark .t-label { color: rgba(242, 239, 232, 0.55); }

.section-dark .hairline { border-color: rgba(255, 255, 255, 0.08); }

/* ── Article Content ──────────────────────────────────────── */
.article-content {
  max-width: 700px;
  margin: 0 auto;
}

.article-content h2 {
  font-family: var(--f-body);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 400;
  letter-spacing: var(--tracking-h2);
  text-transform: uppercase;
  color: var(--on-surface);
  margin-top: var(--sp-12);
  margin-bottom: var(--sp-4);
}

.article-content h3 {
  font-family: var(--f-body);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: var(--tracking-h2);
  text-transform: uppercase;
  color: var(--on-surface);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
}

.article-content p {
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.70;
  letter-spacing: var(--tracking-body);
  color: var(--on-surface-muted);
  margin-bottom: var(--sp-5);
}

.article-content ul {
  list-style: none;
  padding: 0;
  margin-bottom: var(--sp-5);
}

.article-content ul li {
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 300;
  color: var(--on-surface-muted);
  line-height: 1.65;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  position: relative;
  border-bottom: 0.5px solid var(--border-light);
}

.article-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--viva-magenta);
}

/* ── Quiz ─────────────────────────────────────────────────── */
.quiz-container {
  max-width: 680px;
  margin: 0 auto;
}

.quiz-progress {
  display: flex;
  gap: var(--sp-1);
  margin-bottom: var(--sp-8);
}

.quiz-progress-dot {
  flex: 1;
  height: 2px;
  background: var(--border-light);
  border-radius: 1px;
  transition: background 0.3s ease;
}

.quiz-progress-dot.active { background: var(--viva-magenta); }
.quiz-progress-dot.completed { background: var(--viva-magenta); opacity: 0.4; }

.quiz-step {
  display: none;
}

.quiz-step.active { display: block; }

.quiz-question {
  font-family: var(--f-body);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 400;
  letter-spacing: var(--tracking-h2);
  text-transform: uppercase;
  color: var(--on-surface);
  margin-bottom: var(--sp-8);
  line-height: 1.20;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  border-radius: var(--r-card);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  text-align: left;
}

.quiz-option:hover {
  border-color: var(--viva-magenta);
  box-shadow: 0 0 0 3px rgba(187, 38, 73, 0.08);
}

.quiz-option.selected {
  border-color: var(--viva-magenta);
  background: var(--accent-muted);
}

.quiz-option-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--border-mid);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.quiz-option.selected .quiz-option-check {
  background: var(--viva-magenta);
  border-color: var(--viva-magenta);
}

.quiz-option.selected .quiz-option-check::after {
  content: '';
  width: 8px;
  height: 5px;
  border-left: 1.5px solid white;
  border-bottom: 1.5px solid white;
  transform: rotate(-45deg) translateY(-1px);
}

.quiz-option-text {
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 300;
  color: var(--on-surface-muted);
}

.quiz-option.selected .quiz-option-text {
  color: var(--viva-magenta);
  font-weight: 400;
}

.quiz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-8);
}

.quiz-counter {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--on-surface-muted);
}

/* Quiz result */
.quiz-result {
  text-align: center;
  padding: var(--sp-10) 0;
}

.quiz-result-label {
  display: inline-flex;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--viva-magenta);
  background: var(--accent-muted);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-5);
}

.quiz-result-title {
  font-family: var(--f-body);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 400;
  letter-spacing: var(--tracking-h1);
  text-transform: uppercase;
  color: var(--on-surface);
  margin-bottom: var(--sp-5);
}

.quiz-result-body {
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--on-surface-muted);
  max-width: 520px;
  margin: 0 auto var(--sp-8);
}

/* Email capture */
.quiz-email-form {
  display: flex;
  gap: var(--sp-3);
  max-width: 460px;
  margin: 0 auto var(--sp-5);
}

.quiz-email-input {
  flex: 1;
}

.quiz-disclaimer {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--on-surface-muted);
  text-align: center;
}

/* ── Pricing / Panel Tiers ────────────────────────────────── */
.panel-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

.panel-tier {
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  border-radius: var(--r-feature);
  padding: var(--sp-8) var(--sp-6);
  box-shadow: var(--shadow-card);
}

.panel-tier.featured {
  border-color: var(--viva-magenta);
  border-top: 3px solid var(--viva-magenta);
  box-shadow: var(--shadow-feature);
}

.panel-tier-name {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--viva-magenta);
  margin-bottom: var(--sp-2);
}

.panel-tier-price {
  font-family: var(--f-display);
  font-size: 42px;
  font-weight: 300;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--on-surface);
  margin-bottom: var(--sp-2);
}

.panel-tier-price-range {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--on-surface-muted);
  margin-bottom: var(--sp-5);
}

.panel-tier-features {
  list-style: none;
  margin-bottom: var(--sp-6);
}

.panel-tier-features li {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 300;
  color: var(--on-surface-muted);
  padding: var(--sp-2) 0;
  border-bottom: 0.5px solid var(--border-light);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}

.panel-tier-features li::before {
  content: '·';
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--viva-magenta);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Footer ───────────────────────────────────────────────── */
.footer {
  background: var(--void);
  padding: var(--sp-16) 0 var(--sp-8);
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
  color: var(--bone);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-10);
  margin-bottom: var(--sp-10);
}

.footer-brand {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--bone);
  margin-bottom: var(--sp-4);
  display: block;
}

.footer-tagline {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 400;
  color: rgba(247, 248, 242, 0.72);
  line-height: 1.60;
  max-width: 280px;
}

.footer-col-title {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: rgba(247, 248, 242, 0.55);
  margin-bottom: var(--sp-4);
  display: block;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer-link {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 400;
  color: rgba(247, 248, 242, 0.78);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-link:hover { color: var(--bone); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-6);
  border-top: 0.5px solid rgba(255, 255, 255, 0.08);
}

.footer-legal {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: rgba(247, 248, 242, 0.60);
  line-height: 1.50;
}

.footer-disclaimer {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: rgba(247, 248, 242, 0.60);
  max-width: 500px;
  text-align: right;
  line-height: 1.55;
}

/* ── Section background alt ───────────────────────────────── */
.bg-bone  { background: var(--bone); }
.bg-white { background: var(--white); }
.bg-void  { background: var(--void); }
.bg-surface { background: var(--surface); }

/* ── Utilities ────────────────────────────────────────────── */
.text-center    { text-align: center; }
.text-on        { color: var(--on-surface); }
.text-muted     { color: var(--on-surface-muted); }
.text-accent    { color: var(--viva-magenta); }
.text-bone      { color: var(--bone); }

/* Legacy aliases . kept for backward compat */
.text-ink   { color: var(--on-surface); }
.text-green { color: var(--viva-magenta); }
.text-amber { color: var(--tangerine-tango); }

.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mt-10 { margin-top: var(--sp-10); }
.mt-12 { margin-top: var(--sp-12); }

.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }
.mb-10 { margin-bottom: var(--sp-10); }
.mb-12 { margin-bottom: var(--sp-12); }

.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-3  { gap: var(--sp-3); }
.gap-4  { gap: var(--sp-4); }
.gap-5  { gap: var(--sp-5); }
.gap-6  { gap: var(--sp-6); }

/* ── Pathway page template ────────────────────────────────── */
.pathway-hero-label {
  display: inline-flex;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--viva-magenta);
  background: var(--accent-muted);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-5);
}

.pathway-step {
  display: flex;
  gap: var(--sp-6);
  padding: var(--sp-6) 0;
  border-bottom: 0.5px solid var(--border-light);
  align-items: flex-start;
}

.pathway-step-num {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: var(--tracking-display);
  color: var(--viva-magenta);
  text-transform: uppercase;
  flex-shrink: 0;
  padding-top: 2px;
  min-width: 80px;
}

/* ── Biomarker table ──────────────────────────────────────── */
.marker-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--sp-6);
}

.marker-table th {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--on-surface-muted);
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 0.5px solid var(--border-light);
}

.marker-table td {
  padding: 13px var(--sp-4);
  border-bottom: 0.5px solid var(--border-light);
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 300;
  color: var(--on-surface-muted);
  vertical-align: middle;
}

.marker-table td:first-child {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--on-surface);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --gutter: 24px; --section-v: 72px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: 1fr; }
  .step-item + .step-item { border-left: none; border-top: 0.5px solid var(--border-light); }
  .panel-tiers { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

@media (max-width: 768px) {
  :root { --gutter: 20px; --section-v: 56px; }

  .nav-links { display: none; }
  .nav-actions { display: none; }
  .nav-toggle { display: flex; }

  .hero { padding: 72px 0 var(--section-v); }

  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }

  .trust-bar-inner { flex-direction: column; gap: var(--sp-6); }
  .trust-item + .trust-item::before { display: none; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .footer-bottom { flex-direction: column; gap: var(--sp-4); text-align: center; }
  .footer-disclaimer { text-align: center; }

  .quiz-email-form { flex-direction: column; }
  .panel-tiers { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  :root { --gutter: 16px; }
  .grid-4 { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Editorial Clinical . v6 components
   ============================================================ */

/* ── Image Placeholder (figure) ───────────────────────────── */
.ph {
  position: relative;
  display: block;
  background: var(--clay);
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.06) 100%),
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(18,18,18,0.04) 14px 15px);
  border: 0.5px solid rgba(18,18,18,0.18);
  overflow: hidden;
  isolation: isolate;
}

.ph[data-aspect="1x1"]   { aspect-ratio: 1 / 1; }
.ph[data-aspect="4x5"]   { aspect-ratio: 4 / 5; }
.ph[data-aspect="3x2"]   { aspect-ratio: 3 / 2; }
.ph[data-aspect="2x3"]   { aspect-ratio: 2 / 3; }
.ph[data-aspect="16x9"]  { aspect-ratio: 16 / 9; }
.ph[data-aspect="21x9"]  { aspect-ratio: 21 / 9; }
.ph[data-aspect="1x3"]   { aspect-ratio: 1 / 3; }

.ph[data-tone="sage"]      { background-color: var(--sage); }
.ph[data-tone="olive"]     { background-color: var(--olive); }
.ph[data-tone="charcoal"]  { background-color: var(--charcoal); }
.ph[data-tone="stone"]     { background-color: var(--stone); }
.ph[data-tone="dusk"]      { background-color: var(--dusk-blue); }
.ph[data-tone="gold"]      { background-color: var(--gold); }
.ph[data-tone="terracotta"]{ background-color: var(--terracotta); }
.ph[data-tone="gradient"]  { background-image: var(--gradient-sunrise-dusk); }

.ph::before {
  content: attr(data-spec);
  position: absolute;
  top: 12px; left: 12px; right: 12px;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(247,248,242,0.92);
  background: rgba(18,18,18,0.62);
  padding: 6px 10px;
  border-radius: 2px;
  line-height: 1.4;
  max-width: 100%;
  z-index: 2;
  pointer-events: none;
}

.ph::after {
  content: attr(data-id);
  position: absolute;
  bottom: 12px; left: 12px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247,248,242,0.7);
  z-index: 2;
}

.ph--prod::before, .ph--prod::after { display: none; }

/* ── Index Mark . CAPS + quotes treatment ─────────────────── */
.index-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}
.index-mark .num {
  color: var(--olive);
  font-variant-numeric: tabular-nums;
}
.index-mark .slash {
  color: var(--on-surface-muted);
  opacity: 0.4;
}
.index-mark .label {
  color: var(--on-surface);
}

/* ── Section Eyebrow with hairline rule ───────────────────── */
.section-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.section-eyebrow::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: var(--border-light);
}
.section-eyebrow.section-eyebrow--lime::before {
  content: '';
  width: 28px;
  height: 4px;
  background: var(--highlight-lime);
  display: inline-block;
}

/* ── Stacked Brand Lockup (INDEX / CLINIC) ────────────────── */
.brand-lockup {
  display: inline-flex;
  flex-direction: column;
  line-height: 0.92;
  font-family: var(--f-display);
  letter-spacing: -0.02em;
  color: var(--on-surface);
  text-decoration: none;
}
.brand-lockup .lockup-index  { font-weight: 700; font-size: 18px; }
.brand-lockup .lockup-clinic { font-weight: 300; font-size: 18px; letter-spacing: -0.005em; }

.brand-lockup--hero .lockup-index  { font-size: clamp(40px, 5vw, 64px); }
.brand-lockup--hero .lockup-clinic { font-size: clamp(40px, 5vw, 64px); }
.brand-lockup--footer .lockup-index  { font-size: 22px; color: var(--off-white); }
.brand-lockup--footer .lockup-clinic { font-size: 22px; color: var(--off-white); }

/* ── Editorial Hero Split ─────────────────────────────────── */
.hero-edit {
  position: relative;
  padding: clamp(48px, 8vw, 96px) 0 clamp(56px, 9vw, 112px);
  background: var(--surface);
  overflow: hidden;
}
.hero-edit-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
}
.hero-edit-eyebrow { margin-bottom: var(--sp-8); }

.hero-edit-headline {
  margin: 0 0 var(--sp-6);
  max-width: 9.5ch;
}
.hero-edit-headline em {
  font-style: normal;
  color: var(--sage);
  font-weight: 400;
}

.hero-edit-sub {
  font-family: var(--f-body);
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--on-surface-muted);
  max-width: 44ch;
  margin-bottom: var(--sp-8);
}

.hero-edit-actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-10);
}

.hero-edit-meta {
  display: flex;
  gap: var(--sp-8);
  border-top: 0.5px solid var(--border-light);
  padding-top: var(--sp-5);
  max-width: 520px;
}
.hero-edit-meta-item {
  flex: 1;
}
.hero-edit-meta-key {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
  display: block;
  margin-bottom: 4px;
}
.hero-edit-meta-val {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--on-surface);
  letter-spacing: -0.01em;
}

/* Hero right column . portrait + gradient tube */
.hero-edit-visual {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-3);
  align-items: stretch;
}
.hero-edit-portrait { width: 100%; }
.hero-edit-gradient-tube {
  width: 56px;
  align-self: stretch;
  border-radius: 28px;
  background: var(--gradient-sunrise-dusk);
  position: relative;
  box-shadow: inset 0 0 24px rgba(255,255,255,0.18), 0 12px 40px -12px rgba(18,18,18,0.4);
}
.hero-edit-gradient-tube::after {
  content: 'INDEX';
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) rotate(-90deg);
  transform-origin: center;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(247,248,242,0.85);
  white-space: nowrap;
}

/* ── Biomarker Strip (hero foot) ──────────────────────────── */
.biomarker-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: clamp(40px, 6vw, 72px);
  border-top: 0.5px solid var(--border-light);
  border-bottom: 0.5px solid var(--border-light);
}
.biomarker-mini {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--sp-5) var(--sp-6);
  position: relative;
}
.biomarker-mini + .biomarker-mini {
  border-left: 0.5px solid var(--border-light);
}
.biomarker-mini .bm-key {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}
.biomarker-mini .bm-val {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--on-surface);
  font-variant-numeric: tabular-nums;
}
.biomarker-mini .bm-val small {
  font-size: 14px;
  font-weight: 400;
  color: var(--on-surface-muted);
  margin-left: 4px;
}
.biomarker-mini .bm-spark {
  height: 24px;
  margin-top: 2px;
}
.biomarker-mini .bm-spark path,
.biomarker-mini .bm-spark polyline {
  fill: none;
  stroke: var(--olive);
  stroke-width: 1.25;
}

/* The Index Shift . single lime accent on first cell */
.biomarker-strip > .biomarker-mini:first-child::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 28px;
  height: 3px;
  background: var(--highlight-lime);
}

/* ── Trust row (editorial) ────────────────────────────────── */
.trust-row {
  border-top: 0.5px solid var(--border-light);
  border-bottom: 0.5px solid var(--border-light);
  padding: var(--sp-8) 0;
}
.trust-row-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.trust-cell {
  padding: 0 var(--sp-8);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.trust-cell + .trust-cell {
  border-left: 0.5px solid var(--border-light);
}
.trust-cell-key {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}
.trust-cell-val {
  font-family: var(--f-display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--on-surface);
}
.trust-cell-note {
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--on-surface-muted);
  margin-top: 2px;
}

/* ── Process . three steps as editorial spread ────────────── */
.steps-edit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
.steps-edit .step-edit {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  border-top: 0.5px solid var(--border-light);
  padding-top: var(--sp-5);
}
.steps-edit .step-edit .ph { width: 100%; }
.steps-edit .step-edit-num {
  font-family: var(--f-mono);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-top: 8px;
  margin-bottom: 10px;
  display: block;
}
.steps-edit .step-edit-num .n {
  color: var(--olive);
  font-size: 28px;
  font-weight: 700;
  margin-right: 4px;
}
.steps-edit .step-edit-title {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  letter-spacing: -0.014em;
  color: var(--on-surface);
}
.steps-edit .step-edit-body {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.58;
  color: var(--on-surface-muted);
}
.steps-edit .step-edit-link {
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
  text-decoration: none;
  align-self: flex-start;
  padding: 10px 14px 10px 0;
  margin-top: 6px;
  border-bottom: 2px solid var(--olive);
  transition: color 0.2s ease, border-color 0.2s ease, padding 0.2s ease;
}
.steps-edit .step-edit-link:hover {
  color: var(--olive);
  border-color: var(--charcoal);
  padding-right: 22px;
}

/* ── Pathway tiles (biomarker card aesthetic) ─────────────── */
.pathway-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
.pathway-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--off-white);
  border: 0.5px solid var(--border-light);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s ease;
}
.pathway-tile:hover {
  transform: translateY(-4px);
  border-color: var(--olive);
}
.pathway-tile.tile-dark {
  background: var(--charcoal);
  border-color: rgba(255,255,255,0.08);
}
.pathway-tile.tile-dark .tile-title,
.pathway-tile.tile-dark .tile-ring-val { color: var(--off-white); }
.pathway-tile.tile-dark .tile-mark { color: rgba(247,248,242,0.78); }
.pathway-tile.tile-dark .tile-body { color: rgba(247,248,242,0.82); }
.pathway-tile.tile-dark .tile-link { color: var(--highlight-lime); }
.pathway-tile.tile-dark .tile-link::after { background: var(--highlight-lime); }

.pathway-tile .ph { width: 100%; }

.pathway-tile-body {
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
}

.tile-mark {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}
.tile-ring {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: 2px;
}
.tile-ring svg { width: 36px; height: 36px; }
.tile-ring svg .ring-bg { fill: none; stroke: rgba(18,18,18,0.10); stroke-width: 3; }
.tile-ring svg .ring-fg { fill: none; stroke: var(--olive); stroke-width: 3; stroke-linecap: round; }
.pathway-tile.tile-dark .tile-ring svg .ring-bg { stroke: rgba(255,255,255,0.10); }
.pathway-tile.tile-dark .tile-ring svg .ring-fg { stroke: var(--highlight-lime); }
.tile-ring-val {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  color: var(--on-surface);
  letter-spacing: -0.01em;
}
.tile-ring-unit { font-size: 11px; color: var(--on-surface-muted); margin-left: 2px; }

.tile-title {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.014em;
  color: var(--on-surface);
  line-height: 1.12;
}
.tile-body {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--on-surface-muted);
}
.tile-link {
  margin-top: auto;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive);
  position: relative;
  align-self: flex-start;
  padding-bottom: 4px;
}
.tile-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--olive);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.pathway-tile:hover .tile-link::after { transform: scaleX(1.3); }

/* ── Education (magazine spread) ──────────────────────────── */
.edu-spread {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.edu-feature {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  text-decoration: none;
  color: inherit;
}
.edu-feature .ph { width: 100%; }
.edu-feature-mark {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
}
.edu-feature-title {
  font-family: var(--f-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.08;
  color: var(--on-surface);
}
.edu-feature-body {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.58;
  color: var(--on-surface-muted);
  max-width: 52ch;
}

.edu-list {
  display: flex;
  flex-direction: column;
  border-top: 0.5px solid var(--border-light);
}
.edu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-5);
  align-items: start;
  padding: var(--sp-6) 0;
  border-bottom: 0.5px solid var(--border-light);
  text-decoration: none;
  color: inherit;
  transition: padding-left 0.3s ease;
}
.edu-item:hover { padding-left: var(--sp-3); }
.edu-item-mark {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
  display: block;
  margin-bottom: 6px;
}
.edu-item-title {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--on-surface);
  line-height: 1.18;
}
.edu-item-body {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.52;
  color: var(--on-surface-muted);
  margin-top: 6px;
}
.edu-item-arrow {
  font-family: var(--f-mono);
  font-size: 16px;
  color: var(--olive);
  align-self: center;
}

/* ── Section: stone tint (used for §05 Clinical Focus) ─── */
.section-stone {
  background: #ECEAE0; /* warm bone-stone; clearly distinct from --off-white tiles */
  border-top: 0.5px solid rgba(74,82,66,0.10);
  border-bottom: 0.5px solid rgba(74,82,66,0.10);
}

/* ── Lead Magnet . The Biomarker Index ────────────────────── */
.magnet-section {
  background: var(--off-white);
  padding: clamp(56px, 8vw, 96px) 0;
  border-top: 0.5px solid var(--border-light);
  border-bottom: 0.5px solid var(--border-light);
}
.magnet {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
.magnet-mark {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--on-surface-muted);
  margin-bottom: var(--sp-4);
  display: inline-flex;
  gap: 6px;
}
.magnet-mark .num { color: var(--olive); }
.magnet-title {
  font-family: var(--f-display);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.04;
  color: var(--on-surface);
  margin-bottom: var(--sp-4);
}
.magnet-lede {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.58;
  color: var(--on-surface-muted);
  max-width: 52ch;
  margin-bottom: var(--sp-6);
}
.magnet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  border-top: 0.5px solid var(--border-light);
}
.magnet-list li {
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--on-surface);
  padding: var(--sp-4) 0 var(--sp-4) 32px;
  border-bottom: 0.5px solid var(--border-light);
  position: relative;
  line-height: 1.45;
}
.magnet-list li::before {
  content: attr(data-num);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--olive);
  font-variant-numeric: tabular-nums;
}

/* Form is now a dark charcoal card; high contrast on the off-white section. */
.magnet-form {
  background: var(--charcoal);
  color: var(--off-white);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: clamp(28px, 3.4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  position: relative;
  box-shadow: 0 24px 50px rgba(20,20,26,0.18);
}
.magnet-form::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 48px;
  height: 3px;
  background: var(--sage);
}
.magnet-form-title {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--off-white);
  margin-bottom: var(--sp-3);
}
.magnet-form input {
  background: rgba(247,248,242,0.06);
  border: 1px solid rgba(247,248,242,0.16);
  border-radius: 4px;
  padding: 14px 16px;
  font-family: var(--f-body);
  font-size: 16px; /* prevents iOS zoom */
  color: #F7F8F2 !important;
  -webkit-text-fill-color: #F7F8F2 !important;
  caret-color: #F7F8F2;
  width: 100%;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.magnet-form input::placeholder { color: rgba(247,248,242,0.42); }
.magnet-form input:focus {
  border-color: var(--sage);
  background: rgba(247,248,242,0.10);
  box-shadow: 0 0 0 3px rgba(122,132,99,0.18);
}
/* Autofill override . defeats Chrome/Safari autofill white background */
.magnet-form input:-webkit-autofill,
.magnet-form input:-webkit-autofill:hover,
.magnet-form input:-webkit-autofill:focus,
.magnet-form input:-webkit-autofill:active {
  -webkit-text-fill-color: #F7F8F2 !important;
  -webkit-box-shadow: 0 0 0 1000px #141416 inset !important;
  box-shadow: 0 0 0 1000px #141416 inset !important;
  caret-color: #F7F8F2 !important;
  border-color: rgba(247,248,242,0.16) !important;
  transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}
.magnet-fineprint {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247,248,242,0.48);
  margin-top: var(--sp-2);
  line-height: 1.55;
}

@media (max-width: 1024px) {
  .magnet { grid-template-columns: 1fr; gap: var(--sp-8); }
}

/* ── Quiz CTA . full bleed dark ───────────────────────────── */
.quiz-bleed {
  position: relative;
  background: var(--charcoal);
  color: var(--off-white);
  padding: clamp(72px, 11vw, 144px) 0;
  overflow: hidden;
}
.quiz-bleed-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.quiz-bleed-bg .ph {
  width: 100%; height: 100%;
  border: none;
  opacity: 0.32;
}
.quiz-bleed::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18,18,18,0.50) 0%, rgba(18,18,18,0.85) 100%);
  z-index: 1;
}
.quiz-bleed-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-8);
  align-items: end;
}
.quiz-bleed-mark {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  border-left: 1px solid rgba(247,248,242,0.20);
  padding-left: var(--sp-5);
}
.quiz-bleed-eyebrow {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(247,248,242,0.78);
}
.quiz-bleed-eyebrow .num {
  color: rgba(247,248,242,0.55);
  font-variant-numeric: tabular-nums;
}
.quiz-bleed-headline {
  font-family: var(--f-display);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.00;
  color: var(--off-white);
  max-width: 14ch;
}
.quiz-bleed-sub {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  color: rgba(247,248,242,0.62);
  max-width: 44ch;
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.btn-lime {
  background: var(--highlight-lime);
  color: var(--charcoal);
  border-color: transparent;
  font-weight: 500;
}
.btn-lime:hover { opacity: 0.9; }

/* ── Footer Promise Ribbon ────────────────────────────────── */
.footer-promise {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-8);
  align-items: center;
  padding: var(--sp-8) 0;
  border-bottom: 0.5px solid rgba(255,255,255,0.10);
  margin-bottom: var(--sp-10);
}
.footer-promise-mark {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(247,248,242,0.40);
}
.footer-promise-mark .num { color: var(--highlight-lime); }
.footer-promise-text {
  font-family: var(--f-display);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.014em;
  line-height: 1.18;
  color: var(--off-white);
}
.footer-promise-text em {
  font-style: normal;
  color: var(--highlight-lime);
}

/* ── Responsive overrides for v6 components ───────────────── */
@media (max-width: 1024px) {
  .hero-edit-grid { grid-template-columns: 1fr; gap: var(--sp-10); }
  .hero-edit-visual { max-width: 480px; }
  .biomarker-strip { grid-template-columns: repeat(2, 1fr); }
  .biomarker-mini:nth-child(2n+1) { border-left: none; }
  .biomarker-mini:nth-child(n+3) { border-top: 0.5px solid var(--border-light); }
  .pathway-tiles { grid-template-columns: repeat(2, 1fr); }
  .edu-spread { grid-template-columns: 1fr; gap: var(--sp-10); }
}

@media (max-width: 768px) {
  .steps-edit { grid-template-columns: 1fr; }
  .trust-row-inner { grid-template-columns: 1fr; }
  .trust-cell { padding: var(--sp-5) 0; border-left: none !important; }
  .trust-cell + .trust-cell { border-top: 0.5px solid var(--border-light); }
  .biomarker-strip { grid-template-columns: 1fr; }
  .biomarker-mini { border-left: none !important; border-top: 0.5px solid var(--border-light); }
  .biomarker-mini:first-child { border-top: none; }
  .pathway-tiles { grid-template-columns: 1fr; }
  .quiz-bleed-inner { grid-template-columns: 1fr; gap: var(--sp-6); }
  .footer-promise { grid-template-columns: 1fr; gap: var(--sp-3); }
  .hero-edit-meta { flex-wrap: wrap; gap: var(--sp-5); }
}

/* ── Animations ───────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-up {
  animation: fadeUp 0.5s ease forwards;
}

.delay-1 { animation-delay: 0.1s; opacity: 0; }
.delay-2 { animation-delay: 0.2s; opacity: 0; }
.delay-3 { animation-delay: 0.3s; opacity: 0; }
.delay-4 { animation-delay: 0.4s; opacity: 0; }

/* ── Index Mark . inverse (on dark surfaces) ──────────────── */
.index-mark--inverse { color: rgba(247,248,242,0.7); }
.index-mark--inverse .num { color: var(--sage); }
.index-mark--inverse .slash { color: rgba(247,248,242,0.4); }
.index-mark--inverse .label { color: rgba(247,248,242,0.92); }

/* ── Brand Claim Band ─────────────────────────────────────── */
.brand-claim {
  background: var(--charcoal);
  color: var(--off-white);
  padding: clamp(96px, 12vw, 160px) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.brand-claim::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(122,132,99,0.12), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(74,82,66,0.18), transparent 60%);
  pointer-events: none;
}
.brand-claim > .container { position: relative; z-index: 1; }
.brand-claim-eyebrow {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-10);
}
.bc-quote {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(28px, 4.2vw, 56px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--off-white);
  max-width: 22ch;
  margin: 0 auto;
  text-wrap: balance;
}
.bc-quote em {
  font-style: italic;
  font-weight: 300;
  color: var(--sage);
}
.bc-defs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 920px;
  margin: clamp(56px, 7vw, 88px) auto 0;
  padding-top: 28px;
  border-top: 1px solid rgba(247,248,242,0.14);
}
.bc-def {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.bc-def b {
  font-weight: 500;
  color: var(--sage);
  letter-spacing: 0.22em;
}
.bc-def span { color: rgba(247,248,242,0.72); }

@media (max-width: 720px) {
  .bc-defs { grid-template-columns: 1fr; gap: 18px; }
}

/* ── Clinical Team ────────────────────────────────────────── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.team-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.team-card .ph { width: 100%; margin-bottom: 8px; }
.team-card-mark {
  font-family: var(--f-mono);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-top: 4px;
  display: block;
}
.team-card-mark .num { color: var(--olive); font-size: 22px; font-variant-numeric: tabular-nums; }
.team-card-name {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--charcoal);
  margin: 0;
}
.team-card-creds {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0;
}
.team-card-body {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-surface-muted, rgba(20,20,26,0.78));
  margin: 0;
}
.team-card-ahpra {
  display: inline-block;
  margin-top: 4px;
  padding: 6px 10px;
  border: 1px solid rgba(74,82,66,0.2);
  border-radius: 2px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--olive);
  align-self: flex-start;
}
.team-footnote {
  margin-top: 32px;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(20,20,26,0.5);
}

@media (max-width: 960px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* ── Evidence & Research grid (replaces public Education) ─ */
.evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.evidence-card {
  background: var(--off-white);
  border: 1px solid rgba(74,82,66,0.12);
  border-radius: 6px;
  padding: clamp(20px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.evidence-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(20,20,26,0.08);
  border-color: rgba(74,82,66,0.28);
}
.evidence-card .ev-mark {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--olive);
}
.evidence-card .ev-mark .num { color: var(--olive); font-variant-numeric: tabular-nums; }
.evidence-card .ev-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--charcoal);
  margin: 0;
}
.evidence-card .ev-quote {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(20,20,26,0.82);
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid var(--sage);
}
.evidence-card .ev-cite {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: rgba(20,20,26,0.5);
  line-height: 1.5;
}
@media (max-width: 960px) { .evidence-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .evidence-grid { grid-template-columns: 1fr; } }

/* ── Circadian Gradient Field . animated bg ───────────────── */
.circadian-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
}
.circadian-bg::before,
.circadian-bg::after {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(40% 35% at 18% 22%, rgba(226,97,43,0.22), transparent 60%),
    radial-gradient(38% 30% at 82% 30%, rgba(187,38,73,0.20), transparent 62%),
    radial-gradient(50% 40% at 50% 88%, rgba(122,132,99,0.28), transparent 60%),
    radial-gradient(60% 50% at 80% 80%, rgba(20,20,26,0.45), transparent 70%);
  filter: blur(40px);
  animation: circadianDrift 28s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.circadian-bg::after {
  background:
    radial-gradient(35% 30% at 70% 18%, rgba(255,193,84,0.15), transparent 60%),
    radial-gradient(45% 40% at 22% 70%, rgba(74,82,66,0.30), transparent 65%),
    radial-gradient(50% 50% at 50% 50%, rgba(247,248,242,0.05), transparent 60%);
  animation-duration: 36s;
  animation-direction: alternate-reverse;
  mix-blend-mode: screen;
  opacity: 0.85;
}
.circadian-bg .grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.32 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.18;
  mix-blend-mode: overlay;
  pointer-events: none;
}
@keyframes circadianDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, -1.5%, 0) scale(1.04); }
  100% { transform: translate3d(-2%, 1.5%, 0) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .circadian-bg::before, .circadian-bg::after { animation: none; }
}
.hero-edit { position: relative; }
.hero-edit > .container { position: relative; z-index: 1; }

/* ── Clinical Focus tile additions (rings removed; cite line added) */
.pathway-tile .tile-mark-num {
  font-family: var(--f-mono);
  color: var(--olive);
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
}
.pathway-tile.tile-dark .tile-mark-num { color: var(--sage); }
.pathway-tile .tile-cite {
  display: block;
  margin-top: 12px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(20,20,26,0.5);
  line-height: 1.5;
}
.pathway-tile.tile-dark .tile-cite { color: rgba(247,248,242,0.55); }
.clinical-focus-footnote {
  margin-top: 32px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(20,20,26,0.5);
  line-height: 1.7;
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.clinical-focus-footnote a { color: rgba(20,20,26,0.7); text-decoration: underline; text-underline-offset: 2px; }
/* Hide any residual .tile-ring rendering if older CSS loads */
.pathway-tile .tile-ring { display: none !important; }

/* ─────────────────────────────────────────────────────────
   HERO REBUILD . animated blob gradient + biomarker dashboard
   Inspired by Dave's hero pattern; recoloured to brand palette
   (sage / olive / muted-magenta / dusk / peach).
   ───────────────────────────────────────────────────────── */

.hero-edit {
  position: relative;
  overflow: hidden;
  background: #0E1116; /* deep charcoal canvas . type contrast lift */
  color: var(--off-white);
  isolation: isolate;
}
.hero-edit > .container { position: relative; z-index: 2; }
.hero-edit .hero-edit-headline,
.hero-edit .hero-edit-headline em { color: var(--off-white); }
.hero-edit .hero-edit-sub        { color: rgba(247,248,242,0.78); }
.hero-edit .hero-edit-meta-key   { color: var(--sage); }
.hero-edit .hero-edit-meta-val   { color: rgba(247,248,242,0.86); }
.hero-edit .index-mark           { color: rgba(247,248,242,0.65); }
.hero-edit .index-mark .num      { color: var(--sage); }
.hero-edit .index-mark .slash    { color: rgba(247,248,242,0.4); }
.hero-edit .index-mark .label    { color: rgba(247,248,242,0.92); }
.hero-edit .btn.btn-ghost { color: var(--off-white); border-color: rgba(247,248,242,0.34); }
.hero-edit .btn.btn-ghost:hover { background: rgba(247,248,242,0.06); border-color: var(--off-white); }

/* Animated blob field */
.blob-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.blob-field .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  opacity: 0.85;
}
.blob-sage    { width: 520px; height: 520px; top: -10%; left: -8%;  background: rgba(122,132,99,0.55);   animation: blobFloat1 22s ease-in-out infinite alternate; }
.blob-olive   { width: 380px; height: 380px; top: 38%;  left: 24%;  background: rgba(95,75,139,0.35);    animation: blobFloat2 28s ease-in-out infinite alternate-reverse; }
.blob-magenta { width: 420px; height: 420px; bottom: -12%; right: -6%; background: rgba(187,38,73,0.45); animation: blobFloat3 26s ease-in-out infinite alternate; }
.blob-dusk    { width: 320px; height: 320px; top: 14%;  right: 12%; background: rgba(155,196,226,0.40);  animation: blobFloat4 30s ease-in-out infinite alternate-reverse; }
.blob-peach   { width: 240px; height: 240px; top: 58%;  right: 38%; background: rgba(255,190,152,0.35);  animation: blobFloat5 24s ease-in-out infinite alternate; }

.blob-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.30 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.18;
  mix-blend-mode: overlay;
}
@keyframes blobFloat1 {
  0%   { transform: translate(0,0)        scale(1);    }
  100% { transform: translate(8%,6%)      scale(1.08); }
}
@keyframes blobFloat2 {
  0%   { transform: translate(0,0)        scale(1);    }
  100% { transform: translate(-6%,8%)     scale(1.04); }
}
@keyframes blobFloat3 {
  0%   { transform: translate(0,0)        scale(1);    }
  100% { transform: translate(-7%,-5%)    scale(1.10); }
}
@keyframes blobFloat4 {
  0%   { transform: translate(0,0)        scale(1);    }
  100% { transform: translate(5%,-7%)     scale(1.05); }
}
@keyframes blobFloat5 {
  0%   { transform: translate(0,0)        scale(1);    }
  100% { transform: translate(-4%,4%)     scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .blob-field .blob { animation: none; }
}

/* Hero portrait (real image now) */
.hero-edit-visual {
  position: relative;
  min-height: clamp(420px, 56vw, 640px);
}
.hero-portrait {
  position: relative;
  display: block;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 36px 80px rgba(20,20,26,0.18);
  transform: translateZ(0);
}
.hero-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Biomarker Index dashboard card (overlaps portrait, top-right) */
.dash-card {
  position: absolute;
  top: 24px;
  right: -28px;
  width: 290px;
  padding: 16px 18px 14px;
  background: rgba(20,20,26,0.92);
  color: var(--off-white);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 24px 60px rgba(20,20,26,0.30);
  z-index: 3;
  font-family: var(--f-mono);
  animation: dashFloat 8s ease-in-out infinite alternate;
}
@keyframes dashFloat {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-4px, 4px); }
}
.dash-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 9px; letter-spacing: 0.18em;
  margin-bottom: 10px;
}
.dash-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 2px rgba(122,132,99,0.28);
  animation: pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot {
  0%,100% { box-shadow: 0 0 0 2px rgba(122,132,99,0.28); }
  50%     { box-shadow: 0 0 0 6px rgba(122,132,99,0.05); }
}
.dash-title { color: rgba(247,248,242,0.78); flex: 1; }
.dash-live  { color: var(--sage); font-weight: 600; }
.dash-chart { width: 100%; height: 52px; display: block; margin: 4px 0 12px; }
.chart-line { stroke: var(--sage); }
.chart-pulse { animation: pulseScale 2s ease-in-out infinite; transform-origin: 220px 5px; }
@keyframes pulseScale { 0%,100% { transform: scale(1); } 50% { transform: scale(0.85); } }

.dash-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.dash-stat-val {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 18px;
  color: var(--off-white);
  line-height: 1;
}
.dash-stat-val.dash-up { color: var(--sage); }
.dash-stat-val .dash-unit { font-size: 10px; opacity: 0.62; margin-left: 1px; }
.dash-stat-label {
  margin-top: 4px;
  font-size: 8px;
  letter-spacing: 0.16em;
  color: rgba(247,248,242,0.5);
  line-height: 1.4;
}

/* Floating illustrative metric chips . promoted to primary visualisation now
   that the BIOMARKER INDEX dashboard chart has been removed. */
.dash-float {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px 20px;
  background: rgba(247,248,242,0.94);
  border: 1px solid rgba(74,82,66,0.16);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(20,20,26,0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--f-mono);
  color: var(--charcoal);
  min-width: 168px;
}
.dash-float > svg { width: 100%; height: 28px; margin-bottom: 6px; }
.dash-float-label { color: rgba(20,20,26,0.55); letter-spacing: 0.14em; text-transform: uppercase; font-size: 10px; }
.dash-float-val   { color: var(--charcoal); font-weight: 500; font-size: 18px; font-family: var(--f-display); letter-spacing: -0.005em; }

.dash-float-1 { top: 8%;  right: -36px;  animation: floatA 9s ease-in-out infinite alternate; }
.dash-float-2 { top: 36%; right: -56px;  animation: floatB 11s ease-in-out infinite alternate-reverse; }
.dash-float-3 { bottom: 22%; left: -52px; animation: floatA 10s ease-in-out infinite alternate-reverse; }
.dash-float-4 { bottom: -4%; right: 8%;   padding: 14px 18px; animation: floatB 13s ease-in-out infinite alternate; flex-direction: row; align-items: center; gap: 12px; }
.dash-float-4 .dash-ring { width: 44px; height: 44px; position: relative; flex-shrink: 0; }
.dash-float-4 .dash-ring svg { width: 44px; height: 44px; }
.dash-float-4 .ring-val {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: 17px; color: var(--charcoal); font-weight: 500;
}
.dash-float-4 .dash-float-label { font-size: 11px; letter-spacing: 0.16em; }
@keyframes floatA { 0% { transform: translate(0,0); } 100% { transform: translate(8px,-8px); } }
@keyframes floatB { 0% { transform: translate(0,0); } 100% { transform: translate(-8px,6px); } }

@media (max-width: 900px) {
  .hero-edit-visual { min-height: 420px; }
  .dash-float-1 { top: 4%; right: 4%; }
  .dash-float-2 { display: none; }
  .dash-float-3 { display: none; }
  .dash-float-4 { bottom: 4%; right: 4%; }
}

.hero-illustrative-note {
  margin-top: 32px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive);
  text-align: center;
}

/* Three-steps real image */
.steps-edit .step-edit .step-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  margin: 0 0 16px;
}
.steps-edit .step-edit .step-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Pathway tile real image */
.pathway-tile .pathway-img {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}
.pathway-tile .pathway-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.pathway-tile .pathway-img + .pathway-tile-body {
  position: relative;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(10,12,16,0)   0%,
      rgba(10,12,16,0.35) 35%,
      rgba(10,12,16,0.92) 78%,
      rgba(10,12,16,0.98) 100%);
  color: var(--off-white);
  padding-top: clamp(120px, 22vw, 200px);
}
.pathway-tile .pathway-img + .pathway-tile-body .tile-title { color: var(--off-white); }
.pathway-tile .pathway-img + .pathway-tile-body .tile-body  { color: rgba(247,248,242,0.88); }
.pathway-tile .pathway-img + .pathway-tile-body .tile-mark  { color: rgba(247,248,242,0.78); }
.pathway-tile .pathway-img + .pathway-tile-body .tile-mark .tile-mark-num { color: var(--sage); }
.pathway-tile .pathway-img + .pathway-tile-body .tile-cite  { color: rgba(247,248,242,0.54); }
.pathway-tile .pathway-img + .pathway-tile-body .tile-link  { color: var(--off-white); }

/* Clinical Focus strip (chip bar between hero and three-steps) */
.strip-bar {
  background: var(--off-white);
  border-top: 1px solid rgba(74,82,66,0.10);
  border-bottom: 1px solid rgba(74,82,66,0.10);
  padding: 14px 0;
}
.strip-bar-inner {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.strip-bar-inner::-webkit-scrollbar { display: none; }
.strip-chip {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.strip-chip:hover { transform: translateY(-1px); }
.chip-sage    { background: rgba(122,132,99,0.14); color: var(--olive); border-color: rgba(122,132,99,0.30); }
.chip-olive   { background: var(--charcoal); color: var(--off-white); }
.chip-dusk    { background: rgba(155,196,226,0.20); color: #2D4A66; border-color: rgba(155,196,226,0.45); }
.chip-magenta { background: rgba(187,38,73,0.10);  color: #8E1F39; border-color: rgba(187,38,73,0.30); }
.chip-bone    { background: transparent; color: var(--charcoal); border-color: rgba(74,82,66,0.20); }
.chip-bone:hover { background: rgba(74,82,66,0.06); }

/* Lead-magnet cover image . sits on the off-white section, complements the dark form */
.magnet-cover {
  display: block;
  margin: 28px 0 0;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-width: 320px;
  border: 1px solid rgba(74,82,66,0.18);
  box-shadow: 0 24px 50px rgba(20,20,26,0.18);
}
.magnet-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ─────────────────────────────────────────────────────────
   §04 CLINICAL GOVERNANCE . replaces the Clinical Team block.
   No portraits; pure structural facts on bone-stone background.
   ───────────────────────────────────────────────────────── */
.governance-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.gov-card {
  background: var(--off-white);
  border: 1px solid rgba(74,82,66,0.14);
  border-radius: 8px;
  padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 32px) clamp(28px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  overflow: hidden;
}
.gov-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 48px; height: 3px;
  background: var(--sage);
}
.gov-card:hover {
  transform: translateY(-3px);
  border-color: rgba(74,82,66,0.32);
  box-shadow: 0 24px 50px rgba(20,20,26,0.10);
}
.gov-card--feature {
  background: var(--charcoal);
  color: var(--off-white);
  border-color: rgba(255,255,255,0.06);
}
.gov-card--feature::before { background: var(--sage); }
.gov-card--feature .gov-mark { color: rgba(247,248,242,0.85); }
.gov-card--feature .gov-mark .num { color: var(--sage); }
.gov-card--feature .gov-title { color: var(--off-white); }
.gov-card--feature .gov-body  { color: rgba(247,248,242,0.78); }
.gov-card--feature .gov-fact-key { color: rgba(247,248,242,0.45); }
.gov-card--feature .gov-fact-val { color: var(--off-white); }
.gov-card--feature .gov-facts li { border-color: rgba(255,255,255,0.10); }

.gov-mark {
  font-family: var(--f-mono);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--charcoal);
  display: block;
}
.gov-mark .num {
  color: var(--olive);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.gov-title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--charcoal);
  margin: 0;
}
.gov-body {
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.62;
  color: rgba(20,20,26,0.74);
  margin: 0;
}
.gov-facts {
  list-style: none;
  margin: auto 0 0;
  padding: 0;
  border-top: 1px solid rgba(74,82,66,0.14);
  padding-top: 14px;
}
.gov-facts li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(74,82,66,0.10);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
}
.gov-facts li:last-child { border-bottom: none; }
.gov-fact-key { color: rgba(20,20,26,0.5); text-transform: uppercase; letter-spacing: 0.16em; }
.gov-fact-val { color: var(--charcoal); font-weight: 500; }

@media (max-width: 1024px) {
  .governance-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ─────────────────────────────────────────────────────────
   §02 STEP-IMG . abstract Step 02 (no portrait)
   Animated grid + pulse + line; reads as "video consultation"
   without showing a person.
   ───────────────────────────────────────────────────────── */
.step-img-abstract {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 30% 30%, rgba(122,132,99,0.55), transparent 60%),
    radial-gradient(120% 90% at 80% 80%, rgba(187,38,73,0.32), transparent 60%),
    linear-gradient(135deg, #14141A, #1F2127);
  margin: 0 0 16px;
}
.step-img-abstract .abstract-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(247,248,242,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,248,242,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 35%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 35%, transparent 75%);
}
.step-img-abstract .abstract-pulse {
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--sage);
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 6px rgba(122,132,99,0.32),
    0 0 0 18px rgba(122,132,99,0.16),
    0 0 0 36px rgba(122,132,99,0.06);
  animation: stepPulse 2.4s ease-in-out infinite;
}
@keyframes stepPulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(122,132,99,0.32), 0 0 0 18px rgba(122,132,99,0.16), 0 0 0 36px rgba(122,132,99,0.06); }
  50%      { box-shadow: 0 0 0 12px rgba(122,132,99,0.10), 0 0 0 28px rgba(122,132,99,0.04), 0 0 0 48px rgba(122,132,99,0); }
}
.step-img-abstract .abstract-line {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sage), transparent);
  opacity: 0.6;
  animation: stepScan 4s ease-in-out infinite;
  transform-origin: 50% 50%;
}
@keyframes stepScan {
  0%, 100% { transform: translateY(-30px); opacity: 0.30; }
  50%      { transform: translateY(30px);  opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .step-img-abstract .abstract-pulse { animation: none; }
  .step-img-abstract .abstract-line  { animation: none; }
}

/* ─────────────────────────────────────────────────────────
   §05 CLINICAL FOCUS . deeper sage stone + lifted eyebrow
   ───────────────────────────────────────────────────────── */
.section-stone {
  background:
    radial-gradient(80% 60% at 20% 10%, rgba(122,132,99,0.10), transparent 60%),
    radial-gradient(60% 50% at 90% 100%, rgba(74,82,66,0.08), transparent 60%),
    #E1DFD5; /* deeper warm stone */
  border-top: 1px solid rgba(74,82,66,0.12);
  border-bottom: 1px solid rgba(74,82,66,0.12);
}
.section-stone .index-mark .label { color: var(--charcoal); font-weight: 500; }
.section-stone .t-display { color: var(--charcoal); }
.section-stone .t-body-lg { color: rgba(20,20,26,0.74); }

/* Strengthen tile contrast on the stone bg */
.section-stone .pathway-tile {
  background: var(--off-white);
  border: 1px solid rgba(74,82,66,0.16);
  border-radius: 8px;
  overflow: hidden;
}
.section-stone .pathway-tile.tile-dark {
  background: var(--charcoal);
}

/* ─────────────────────────────────────────────────────────
   §07 LEAD MAGNET . fix invisible left column type
   ───────────────────────────────────────────────────────── */
.magnet-pitch { color: var(--charcoal); }
.magnet-pitch .magnet-mark { color: rgba(20,20,26,0.55); }
.magnet-pitch .magnet-title { color: var(--charcoal); }
.magnet-pitch .magnet-lede { color: rgba(20,20,26,0.74); }
.magnet-pitch .magnet-list li { color: var(--charcoal); }

/* ─────────────────────────────────────────────────────────
   §08 QUIZ CTA . real gradient image as full-bleed bg
   ───────────────────────────────────────────────────────── */
.quiz-bleed-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.quiz-bleed-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.08);
  animation: quizDrift 24s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes quizDrift {
  0%   { transform: scale(1.05) translate(0, 0); }
  100% { transform: scale(1.12) translate(-2%, -2%); }
}
.quiz-bleed-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,12,16,0.55), rgba(10,12,16,0.82)),
    radial-gradient(60% 80% at 20% 50%, rgba(10,12,16,0.30), transparent 60%);
  pointer-events: none;
}
.quiz-bleed-inner {
  position: relative;
  z-index: 2; /* explicit lift above bg */
}
@media (prefers-reduced-motion: reduce) {
  .quiz-bleed-img { animation: none; }
}

/* ─────────────────────────────────────────────────────────
   §06 . THE BIOMARKER INDEX (lead-magnet feature band)
   Full-bleed dark; ambient gradient; dominant cover; lifted form.
   ───────────────────────────────────────────────────────── */
.magnet-feature {
  position: relative;
  overflow: hidden;
  background: #0E1116;
  color: var(--off-white);
  padding: clamp(72px, 9vw, 128px) 0;
  isolation: isolate;
}
.magnet-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.magnet-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  mix-blend-mode: screen;
  opacity: 0.78;
  animation: magnetDrift 26s ease-in-out infinite alternate;
}
.magnet-blob-sage    { width: 520px; height: 520px; top: -10%; left: -8%;  background: rgba(122,132,99,0.55); animation-duration: 24s; }
.magnet-blob-magenta { width: 380px; height: 380px; bottom: -8%; right: 6%; background: rgba(187,38,73,0.42); animation-duration: 28s; animation-direction: alternate-reverse; }
.magnet-blob-dusk    { width: 320px; height: 320px; top: 30%;  right: 22%; background: rgba(155,196,226,0.30); animation-duration: 30s; }
@keyframes magnetDrift {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(4%,-3%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .magnet-blob { animation: none; }
}
.magnet-container { position: relative; z-index: 1; }

/* Heading band */
.magnet-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(48px, 6vw, 72px);
}
.magnet-eyebrow {
  display: inline-flex;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(247,248,242,0.62);
  margin-bottom: 20px;
}
.magnet-eyebrow .num   { color: var(--sage); font-weight: 600; font-variant-numeric: tabular-nums; }
.magnet-eyebrow .slash { color: rgba(247,248,242,0.32); }
.magnet-eyebrow .label { color: rgba(247,248,242,0.92); }

.magnet-h {
  font-family: var(--f-display);
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 0.96;
  color: var(--off-white);
  margin: 0 0 18px;
  text-wrap: balance;
}
.magnet-tag {
  font-family: var(--f-body);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
  color: rgba(247,248,242,0.78);
  max-width: 60ch;
  margin: 0 auto 24px;
}

/* Live capacity bar . interactive social-proof for the merit queue */
.magnet-capacity {
  max-width: 460px;
  margin: 0 auto;
  padding: 12px 16px;
  background: rgba(247,248,242,0.05);
  border: 1px solid rgba(247,248,242,0.10);
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.magnet-capacity .cap-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.magnet-capacity .cap-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sage);
  font-weight: 600;
}
.magnet-capacity .cap-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 4px rgba(122,132,99,0.20);
  animation: capDot 1.6s ease-in-out infinite;
}
@keyframes capDot {
  0%,100% { box-shadow: 0 0 0 4px rgba(122,132,99,0.20); }
  50%     { box-shadow: 0 0 0 9px rgba(122,132,99,0.04); }
}
.magnet-capacity .cap-val {
  color: rgba(247,248,242,0.78);
  font-variant-numeric: tabular-nums;
}
.magnet-capacity .cap-num { color: var(--off-white); font-weight: 600; }
.magnet-capacity .cap-bar {
  width: 100%;
  height: 4px;
  background: rgba(247,248,242,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.magnet-capacity .cap-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sage), var(--olive));
  border-radius: 999px;
  position: relative;
  transition: width .6s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 0 12px rgba(122,132,99,0.45);
}
@media (prefers-reduced-motion: reduce) {
  .magnet-capacity .cap-dot { animation: none; }
}

/* Two-column body */
.magnet-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 1024px) {
  .magnet-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* Cover column (now image-free; stat line + bullets) */
.magnet-cover-col { display: flex; flex-direction: column; gap: 28px; }

/* Stat row . three cards instead of single tabular line; more readable */
.magnet-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0;
}
.m-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 18px 16px;
  background: rgba(247,248,242,0.04);
  border: 1px solid rgba(247,248,242,0.08);
  border-radius: 10px;
  transition: background .2s ease, border-color .2s ease;
}
.m-stat:hover {
  background: rgba(247,248,242,0.07);
  border-color: rgba(122,132,99,0.45);
}
.m-stat-num {
  font-family: var(--f-display);
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 500;
  color: var(--off-white);
  letter-spacing: -0.012em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.m-stat-unit {
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.4;
  color: rgba(247,248,242,0.68);
}
@media (max-width: 640px) {
  .magnet-stat-row { grid-template-columns: 1fr; }
}

/* Marker pill band . pure type biomarker preview */
.magnet-marker-band {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 880px;
  margin: 0 auto clamp(36px, 5vw, 56px);
}
.marker-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(247,248,242,0.04);
  border: 1px solid rgba(247,248,242,0.10);
  border-radius: 999px;
  font-family: var(--f-mono);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.marker-pill:hover {
  background: rgba(122,132,99,0.14);
  border-color: rgba(122,132,99,0.45);
  transform: translateY(-1px);
}
.marker-pill .m-key {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--off-white);
  letter-spacing: 0.06em;
}
.marker-pill .m-dom {
  font-size: 9px;
  letter-spacing: 0.20em;
  color: rgba(247,248,242,0.45);
  text-transform: uppercase;
}

/* Value bullets . restructured with explicit headline + sub for readability */
.magnet-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.magnet-bullets li {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 16px;
  align-items: start;
  padding: 18px 20px;
  background: rgba(247,248,242,0.04);
  border: 1px solid rgba(247,248,242,0.08);
  border-radius: 10px;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
  position: relative;
}
.magnet-bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 18%;
  width: 3px; height: 64%;
  background: var(--sage);
  border-radius: 0 2px 2px 0;
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity .2s ease, transform .2s ease;
}
.magnet-bullets li:hover {
  background: rgba(247,248,242,0.07);
  border-color: rgba(122,132,99,0.45);
  transform: translateX(2px);
}
.magnet-bullets li:hover::before { opacity: 1; transform: translateX(0); }

.magnet-bullets .b-num {
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--sage);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.magnet-bullets .b-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.magnet-bullets .b-h {
  font-family: var(--f-display);
  font-size: clamp(15px, 1.6vw, 17px);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: var(--off-white);
}
.magnet-bullets .b-sub {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(247,248,242,0.74);
}

/* Form column */
.magnet-form-col {
  position: sticky;
  top: 24px;
}
.magnet-form-v2 {
  background: rgba(247,248,242,0.04);
  border: 1px solid rgba(247,248,242,0.10);
  border-radius: 12px;
  padding: clamp(28px, 3.4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 32px 80px rgba(0,0,0,0.40);
}
.magnet-form-v2::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 56px; height: 3px;
  background: var(--sage);
  border-radius: 0 0 4px 0;
}
.magnet-form-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 600;
}
.magnet-form-eyebrow .m-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 4px rgba(122,132,99,0.20);
  animation: magnetDot 1.6s ease-in-out infinite;
}
@keyframes magnetDot {
  0%,100% { box-shadow: 0 0 0 4px rgba(122,132,99,0.20); }
  50%     { box-shadow: 0 0 0 9px rgba(122,132,99,0.04); }
}
.magnet-form-h {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.18;
  color: var(--off-white);
  margin: 6px 0 4px;
}
.magnet-form-sub {
  font-family: var(--f-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(247,248,242,0.62);
  margin: 0 0 12px;
}
.magnet-form-v2 input {
  background: rgba(10,12,16,0.50);
  border: 1px solid rgba(247,248,242,0.18);
  border-radius: 6px;
  padding: 14px 16px;
  font-family: var(--f-body);
  font-size: 16px; /* prevents iOS zoom */
  color: #F7F8F2 !important;
  -webkit-text-fill-color: #F7F8F2 !important;
  caret-color: #F7F8F2;
  width: 100%;
  outline: none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.magnet-form-v2 input::placeholder { color: rgba(247,248,242,0.42) !important; }
.magnet-form-v2 input:focus {
  border-color: var(--sage);
  background: rgba(10,12,16,0.70);
  box-shadow: 0 0 0 3px rgba(122,132,99,0.22);
}
/* Autofill override . keeps text off-white on dark when Chrome/Safari autofill triggers */
.magnet-form-v2 input:-webkit-autofill,
.magnet-form-v2 input:-webkit-autofill:hover,
.magnet-form-v2 input:-webkit-autofill:focus,
.magnet-form-v2 input:-webkit-autofill:active {
  -webkit-text-fill-color: #F7F8F2 !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(10,12,16,0.95) inset !important;
  box-shadow: 0 0 0 1000px rgba(10,12,16,0.95) inset !important;
  caret-color: #F7F8F2 !important;
  border-color: rgba(247,248,242,0.18) !important;
  transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}
.magnet-form-cta {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
  background: var(--off-white);
  color: var(--charcoal);
  border: none;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.magnet-form-cta:hover {
  background: var(--sage);
  color: var(--charcoal);
}
.magnet-form-secondary {
  margin: 4px 0 0;
  text-align: center;
}
.magnet-form-secondary a {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247,248,242,0.65);
  text-decoration: none;
  border-bottom: 1px solid rgba(247,248,242,0.20);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.magnet-form-secondary a:hover {
  color: var(--off-white);
  border-color: var(--sage);
}
.magnet-trust {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.magnet-trust li {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247,248,242,0.62);
}
.magnet-trust .t-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sage);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(122,132,99,0.18);
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.magnet-fineprint {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247,248,242,0.45);
  line-height: 1.55;
  margin: 6px 0 0;
}

/* ─────────────────────────────────────────────────────────
   QUIZ PAGE . engaging hero, option-card grid, trust strip
   ───────────────────────────────────────────────────────── */
.quiz-hero {
  position: relative;
  overflow: hidden;
  background: #0E1116;
  color: var(--off-white);
  padding: clamp(80px, 10vw, 140px) 0 clamp(56px, 7vw, 96px);
  isolation: isolate;
}
.quiz-hero-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.qhero-blob {
  position: absolute; border-radius: 50%; filter: blur(90px);
  mix-blend-mode: screen; opacity: 0.85;
  animation: qheroDrift 26s ease-in-out infinite alternate;
}
.qhero-blob-sage    { width: 480px; height: 480px; top: -10%; left: -8%; background: rgba(122,132,99,0.55); }
.qhero-blob-magenta { width: 420px; height: 420px; bottom: -10%; right: -6%; background: rgba(187,38,73,0.42); animation-direction: alternate-reverse; }
.qhero-blob-dusk    { width: 320px; height: 320px; top: 30%; right: 22%; background: rgba(155,196,226,0.32); }
@keyframes qheroDrift {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(4%,-3%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .qhero-blob { animation: none; } }
.quiz-hero-inner { position: relative; z-index: 1; text-align: center; }

.quiz-hero-eyebrow {
  display: inline-flex; gap: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(247,248,242,0.62);
  margin-bottom: 22px;
}
.quiz-hero-eyebrow .qe-num   { color: var(--sage); font-weight: 600; }
.quiz-hero-eyebrow .qe-slash { color: rgba(247,248,242,0.30); }
.quiz-hero-eyebrow .qe-label { color: rgba(247,248,242,0.92); }

.quiz-hero-h {
  font-family: var(--f-display);
  font-size: clamp(44px, 7vw, 96px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 0.96;
  color: var(--off-white);
  margin: 0 0 18px;
  text-wrap: balance;
}
.quiz-hero-sub {
  font-family: var(--f-body);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
  color: rgba(247,248,242,0.72);
  max-width: 56ch;
  margin: 0 auto 32px;
}
.quiz-hero-stats {
  display: flex; justify-content: center;
  gap: clamp(28px, 4vw, 56px);
  padding-top: 16px;
  border-top: 1px solid rgba(247,248,242,0.10);
  max-width: 560px;
  margin: 0 auto;
}
.qstat {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-family: var(--f-mono);
}
.qstat-num {
  font-family: var(--f-display);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 500;
  color: var(--off-white);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.qstat-label {
  font-size: 10px;
  letter-spacing: 0.20em;
  color: rgba(247,248,242,0.48);
  text-transform: uppercase;
}

/* Body . explicit charcoal on the section + shell so every descendant
   inherits dark unless overridden. */
.quiz-body-section {
  background: var(--off-white);
  color: #141416;
  padding: clamp(48px, 7vw, 88px) 0 clamp(72px, 9vw, 128px);
}
.quiz-shell {
  max-width: 760px;
  margin: 0 auto;
  background: #FFFFFF;
  color: #141416;
  border: 1px solid rgba(74,82,66,0.14);
  border-radius: 14px;
  padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 24px 60px rgba(20,20,26,0.06);
}
/* Defensive: every text element inside the shell rendered by JS */
.quiz-shell h1, .quiz-shell h2, .quiz-shell h3, .quiz-shell h4,
.quiz-shell p, .quiz-shell span, .quiz-shell label, .quiz-shell li,
.quiz-shell .quiz-question, .quiz-shell .quiz-option-text {
  color: #141416;
}

/* Progress */
.quiz-progress { margin-bottom: 28px; }
.quiz-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(74,82,66,0.10);
  border-radius: 999px;
  overflow: hidden;
}
.quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--olive), var(--sage));
  border-radius: 999px;
  transition: width .35s ease;
}
.quiz-progress-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(20,20,26,0.55);
}
.quiz-progress-meta .quiz-progress-pct { color: var(--olive); font-weight: 600; }

/* Step scaffold */
.quiz-step-scaffold .qstep-eyebrow {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--olive);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.quiz-step-scaffold .qstep-h {
  font-family: var(--f-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 500;
  letter-spacing: -0.014em;
  line-height: 1.18;
  color: var(--charcoal);
  margin: 0 0 8px;
  text-wrap: balance;
}
.quiz-step-scaffold .qstep-sub {
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(20,20,26,0.62);
  margin: 0 0 24px;
}

/* Option cards */
.qstep-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) { .qstep-options { grid-template-columns: 1fr; } }
.qopt {
  text-align: left;
  background: rgba(247,248,242,0.45);
  border: 1.5px solid rgba(74,82,66,0.14);
  border-radius: 8px;
  padding: 18px 18px 16px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  font-family: inherit;
}
.qopt:hover {
  background: var(--off-white);
  border-color: var(--olive);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(20,20,26,0.08);
}
.qopt:focus-visible {
  outline: none;
  border-color: var(--olive);
  box-shadow: 0 0 0 3px rgba(74,82,66,0.18);
}
.qopt.is-selected {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--off-white);
}
.qopt.is-selected .qopt-tag { color: var(--sage); }
.qopt.is-selected .qopt-sub { color: rgba(247,248,242,0.68); }

.qopt-tag {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  color: var(--olive);
  font-weight: 600;
  text-transform: uppercase;
}
.qopt-h {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: inherit;
}
.qopt-sub {
  font-family: var(--f-body);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(20,20,26,0.58);
}

/* Quiz nav */
.quiz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(74,82,66,0.10);
}
.quiz-step-hint {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: rgba(20,20,26,0.55);
  text-transform: uppercase;
}

/* Trust strip */
.quiz-trust {
  list-style: none; margin: 28px auto 0; padding: 0;
  max-width: 760px;
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  justify-content: center;
}
.quiz-trust li {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(20,20,26,0.55);
}
.qt-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 3px rgba(122,132,99,0.18);
}

/* ─────────────────────────────────────────────────────────
   QUIZ . JS-rendered class names (app.js) styled to match the
   designed scaffold. app.js writes `.quiz-step`, `.quiz-question`,
   `.quiz-options`, `.quiz-option`, `.quiz-option-check`,
   `.quiz-option-text`, `.quiz-email-wrap`, `.quiz-disclaimer`,
   `.quiz-progress-dot`, `.form-input`.
   ───────────────────────────────────────────────────────── */
.quiz-shell .t-label,
.quiz-shell p.t-label {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #4A5242 !important;   /* olive */
  font-weight: 600;
  margin-bottom: 14px;
}
.quiz-shell .quiz-step {
  display: none;
}
.quiz-shell .quiz-step.active {
  display: block;
  animation: qstepIn .35s ease;
}
@keyframes qstepIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
/* Fallback: when no .active class is set yet by JS, show the first step */
.quiz-shell #quiz-steps:not(:has(.quiz-step.active)) .quiz-step:first-child { display: block; }

.quiz-shell .quiz-question,
.quiz-shell h2.quiz-question {
  font-family: var(--f-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 500;
  letter-spacing: -0.014em;
  line-height: 1.18;
  color: #141416 !important;
  margin: 0 0 20px;
  text-wrap: balance;
}
.quiz-shell .quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) { .quiz-shell .quiz-options { grid-template-columns: 1fr; } }

.quiz-shell .quiz-option,
.quiz-shell button.quiz-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  background: rgba(247,248,242,0.85);
  border: 1.5px solid rgba(74,82,66,0.20);
  border-radius: 8px;
  padding: 16px 18px;
  cursor: pointer;
  font-family: inherit;
  color: #141416 !important;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.quiz-shell .quiz-option .quiz-option-text {
  color: #141416 !important;
  font-weight: 500;
}
.quiz-shell .quiz-option.selected {
  color: #F7F8F2 !important;
}
.quiz-shell .quiz-option.selected .quiz-option-text {
  color: #F7F8F2 !important;
}
.quiz-shell .quiz-option:hover {
  background: var(--off-white);
  border-color: var(--olive);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(20,20,26,0.08);
}
.quiz-shell .quiz-option:focus-visible {
  outline: none;
  border-color: var(--olive);
  box-shadow: 0 0 0 3px rgba(74,82,66,0.18);
}
.quiz-shell .quiz-option.selected {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--off-white);
}
.quiz-shell .quiz-option.selected .quiz-option-check {
  background: var(--sage);
  border-color: var(--sage);
}
.quiz-shell .quiz-option.selected .quiz-option-check::after {
  opacity: 1;
}

.quiz-shell .quiz-option-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(74,82,66,0.32);
  position: relative;
  margin-top: 2px;
  transition: background .2s ease, border-color .2s ease;
}
.quiz-shell .quiz-option-check::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--off-white);
  opacity: 0;
  transition: opacity .15s ease;
}

.quiz-shell .quiz-option-text {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.5;
}

/* Email step */
.quiz-shell .quiz-email-wrap { margin-top: 20px; }
.quiz-shell .form-input {
  height: 50px;
  padding: 0 16px;
  background: var(--off-white);
  border: 1.5px solid rgba(74,82,66,0.18);
  border-radius: 6px;
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--charcoal);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.quiz-shell .form-input:focus {
  border-color: var(--olive);
  box-shadow: 0 0 0 3px rgba(74,82,66,0.18);
}
.quiz-shell .quiz-disclaimer {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  color: rgba(20,20,26,0.55);
  line-height: 1.6;
  max-width: 56ch;
}

/* Progress dots (alternative to bar; renders next to progress-bar if both present) */
.quiz-progress { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.quiz-progress-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(74,82,66,0.18);
  margin-right: 6px;
  transition: background .2s ease, transform .2s ease;
}
.quiz-progress-dot.completed { background: var(--olive); }
.quiz-progress-dot.current   { background: var(--sage); transform: scale(1.4); }

/* Result step */
.quiz-shell .quiz-result-step .quiz-result {
  padding: 20px 0;
}

/* ─────────────────────────────────────────────────────────
   IMMERSIVE QUIZ STAGE (v3)
   One full-bleed dark stage; centered quiz canvas; segmented
   progress; large tactile option cards; mobile-first.
   ───────────────────────────────────────────────────────── */
.quiz-stage {
  position: relative;
  min-height: calc(100vh - 64px);
  background: #0B0D11;
  color: var(--off-white);
  padding: clamp(32px, 5vw, 64px) clamp(16px, 4vw, 40px) clamp(56px, 7vw, 96px);
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;        /* vertical centering . feels intentional on tall viewports */
  justify-content: center;
}
@media (max-width: 720px) {
  .quiz-stage { align-items: flex-start; }
}
.quiz-stage-bg {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.qstage-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  mix-blend-mode: screen;
  opacity: 0.78;
  animation: qstageDrift 28s ease-in-out infinite alternate;
}
.qstage-blob-sage    { width: 540px; height: 540px; top: -10%; left: -10%; background: rgba(122,132,99,0.55); }
.qstage-blob-magenta { width: 380px; height: 380px; bottom: -8%; right: -6%; background: rgba(187,38,73,0.36); animation-direction: alternate-reverse; animation-duration: 32s; }
.qstage-blob-dusk    { width: 360px; height: 360px; top: 20%;  right: 12%; background: rgba(155,196,226,0.30); animation-duration: 26s; }
.qstage-blob-peach   { width: 240px; height: 240px; bottom: 22%; left: 28%; background: rgba(255,190,152,0.30); animation-duration: 30s; }
.qstage-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.32 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.18; mix-blend-mode: overlay;
}
@keyframes qstageDrift {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(4%,-3%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .qstage-blob { animation: none; } }

.quiz-stage-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.4vw, 24px);
}

/* Title bar . small + restrained; canvas owns focus */
.quiz-stage-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.quiz-stage-eyebrow {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(247,248,242,0.50);
  display: inline-flex;
  gap: 8px;
}
.quiz-stage-h {
  font-family: var(--f-display);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.0;
  color: var(--off-white);
  margin: 0;
}

/* Hidden data source for app.js's progress dots */
.quiz-progress-source {
  display: none !important;
}

/* Segmented progress */
.quiz-progress-v2 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(247,248,242,0.045);
  border: 1px solid rgba(247,248,242,0.10);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.qp-segments {
  display: flex;
  gap: 6px;
}
.qp-seg {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(247,248,242,0.10);
  transition: background .35s ease;
}
.qp-seg.is-completed { background: var(--olive); }
.qp-seg.is-current {
  background: linear-gradient(90deg, var(--olive), var(--sage));
  box-shadow: 0 0 0 0 rgba(122,132,99,0.50);
  animation: qpPulse 1.6s ease-in-out infinite;
}
@keyframes qpPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(122,132,99,0.45); }
  50%     { box-shadow: 0 0 0 4px rgba(122,132,99,0); }
}
.qp-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(247,248,242,0.55);
}
.qp-meta .qp-counter { color: var(--off-white); font-weight: 600; }
.qp-meta .qp-pct     { color: var(--sage); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Canvas . big white workspace, all the focus */
.quiz-canvas {
  background: #FFFFFF;
  color: #141416;
  border-radius: 16px;
  padding: clamp(28px, 4.4vw, 48px) clamp(22px, 4vw, 44px) clamp(24px, 3.4vw, 36px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 32px 80px rgba(0,0,0,0.42),
    0 8px 24px rgba(0,0,0,0.18);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
}
.quiz-canvas::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 64px; height: 3px;
  background: var(--sage);
  border-radius: 0 0 4px 0;
}

/* Steps animation */
.quiz-steps { position: relative; }
.quiz-canvas .quiz-step {
  display: none;
}
.quiz-canvas .quiz-step.active {
  display: block;
  animation: qstepIn .42s cubic-bezier(.2,.8,.2,1);
}
@keyframes qstepIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.quiz-canvas #quiz-steps:not(:has(.quiz-step.active)) .quiz-step:first-child { display: block; }

/* DEFENSIVE . every text node inside the canvas inherits charcoal */
.quiz-canvas,
.quiz-canvas * { color: #141416; }
.quiz-canvas .quiz-option.selected,
.quiz-canvas .quiz-option.selected * { color: #F7F8F2; }

/* Email-step "ALMOST THERE" eyebrow (kept; not duplicate . only on final step) */
.quiz-canvas .quiz-final-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #4A5242 !important;
  margin: 0 0 12px;
  padding-left: 14px;
  position: relative;
}
.quiz-canvas .quiz-final-eyebrow::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 8px; height: 1.5px;
  background: #7A8463;
  transform: translateY(-50%);
}

/* Question heading */
.quiz-canvas .quiz-question,
.quiz-canvas h2.quiz-question {
  font-family: var(--f-display);
  font-size: clamp(24px, 3.6vw, 36px);
  font-weight: 500;
  letter-spacing: -0.016em;
  line-height: 1.14;
  color: #141416 !important;
  margin: 0 0 28px;
  text-wrap: balance;
}
@media (max-width: 600px) {
  .quiz-canvas .quiz-question { font-size: 22px; margin-bottom: 22px; }
}
/* Option cards . bold, brand-aligned, high contrast */
.quiz-canvas .quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quiz-canvas .quiz-option,
.quiz-canvas button.quiz-option {
  display: grid;
  grid-template-columns: 22px 1fr 24px;
  gap: 16px;
  align-items: center;
  text-align: left;
  width: 100%;
  background: #F7F8F2;
  border: 1.5px solid rgba(74,82,66,0.20);
  border-radius: 10px;
  padding: 20px 22px;
  cursor: pointer;
  font-family: var(--f-display);
  font-size: clamp(15px, 1.6vw, 17px);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.35;
  color: #141416 !important;
  transition: background .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
  position: relative;
  min-height: 64px;
}
.quiz-canvas .quiz-option::after {
  /* Sage left edge accent on hover/selected */
  content: '';
  position: absolute;
  left: 0; top: 14%;
  width: 3px; height: 72%;
  background: var(--sage);
  border-radius: 0 2px 2px 0;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  transform: translateX(-3px);
}
.quiz-canvas .quiz-option:hover {
  background: #FFFFFF;
  border-color: var(--olive);
  transform: translateX(2px);
  box-shadow: 0 14px 32px rgba(20,20,26,0.08);
}
.quiz-canvas .quiz-option:hover::after { opacity: 1; transform: translateX(0); }
.quiz-canvas .quiz-option:focus-visible {
  outline: none;
  border-color: var(--olive);
  box-shadow: 0 0 0 3px rgba(74,82,66,0.22);
}
.quiz-canvas .quiz-option-text {
  font-family: var(--f-display);
  font-size: clamp(15px, 1.6vw, 17px);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.35;
  color: #141416 !important;
}
.quiz-canvas .quiz-option-arrow {
  font-family: var(--f-mono);
  font-size: 18px;
  color: rgba(20,20,26,0.32);
  text-align: right;
  transition: color .2s ease, transform .2s ease;
}
.quiz-canvas .quiz-option:hover .quiz-option-arrow {
  color: var(--olive);
  transform: translateX(4px);
}

/* Selected state */
.quiz-canvas .quiz-option.selected {
  background: #141416;
  border-color: #141416;
  color: #F7F8F2 !important;
  transform: translateX(2px) scale(1.005);
  box-shadow: 0 18px 44px rgba(20,20,26,0.36);
}
.quiz-canvas .quiz-option.selected::after { opacity: 1; transform: translateX(0); background: var(--sage); }
.quiz-canvas .quiz-option.selected .quiz-option-text { color: #F7F8F2 !important; }
.quiz-canvas .quiz-option.selected .quiz-option-arrow {
  color: var(--sage);
  transform: translateX(8px);
}

.quiz-canvas .quiz-option-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(74,82,66,0.32);
  position: relative;
  flex-shrink: 0;
  transition: background .2s ease, border-color .2s ease;
}
.quiz-canvas .quiz-option-check::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #F7F8F2;
  opacity: 0;
  transition: opacity .15s ease;
}
.quiz-canvas .quiz-option.selected .quiz-option-check {
  background: var(--sage);
  border-color: var(--sage);
}
.quiz-canvas .quiz-option.selected .quiz-option-check::after { opacity: 1; }

/* Email step . desktop: row; mobile: stacked (input above button) */
.quiz-canvas .quiz-email-wrap { margin-top: 8px; }
.quiz-canvas .quiz-email-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 12px;
  max-width: 520px;
  margin-bottom: 16px;
}
@media (max-width: 600px) {
  .quiz-canvas .quiz-email-row {
    grid-template-columns: 1fr;
    gap: 10px;
    max-width: none;
  }
  .quiz-canvas .quiz-email-submit {
    width: 100%;
    justify-content: center;
  }
}
.quiz-canvas .form-input {
  height: 54px;
  padding: 0 18px;
  background: #FAF9F4;
  border: 1.5px solid rgba(74,82,66,0.20);
  border-radius: 8px;
  font-family: var(--f-body);
  font-size: 16px; /* prevents iOS zoom on focus */
  color: #141416 !important;
  -webkit-text-fill-color: #141416 !important;
  caret-color: #141416;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  width: 100%;
  box-sizing: border-box;
}
.quiz-canvas .form-input::placeholder { color: rgba(20,20,26,0.42) !important; }
.quiz-canvas .form-input:focus {
  border-color: var(--olive);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(74,82,66,0.18);
}
.quiz-canvas .form-input:-webkit-autofill,
.quiz-canvas .form-input:-webkit-autofill:hover,
.quiz-canvas .form-input:-webkit-autofill:focus,
.quiz-canvas .form-input:-webkit-autofill:active {
  -webkit-text-fill-color: #141416 !important;
  -webkit-box-shadow: 0 0 0 1000px #FAF9F4 inset !important;
  box-shadow: 0 0 0 1000px #FAF9F4 inset !important;
  caret-color: #141416 !important;
  border-color: rgba(74,82,66,0.20) !important;
  transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}
.quiz-canvas .quiz-email-submit {
  height: 54px;
  padding: 0 24px;
  background: #141416;
  color: #F7F8F2 !important;
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.quiz-canvas .quiz-email-submit:hover {
  background: #4A5242;
  box-shadow: 0 12px 28px rgba(20,20,26,0.20);
}
.quiz-canvas .quiz-email-submit:active { transform: scale(0.99); }

.quiz-canvas .quiz-disclaimer {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(20,20,26,0.55);
  line-height: 1.65;
  margin: 0;
}

/* Nav bar */
.quiz-nav-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(74,82,66,0.10);
}
.quiz-back-btn {
  background: transparent;
  border: 1px solid rgba(74,82,66,0.20);
  color: #141416;
  padding: 10px 14px;
  border-radius: 6px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.quiz-back-btn:hover {
  background: rgba(74,82,66,0.06);
  border-color: var(--olive);
}
.quiz-hint {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(20,20,26,0.50);
}

/* Fineprint outside canvas */
.quiz-fineprint {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(247,248,242,0.45);
  line-height: 1.65;
  text-align: center;
  max-width: 580px;
  margin: 0 auto;
}

/* Hide the legacy "Why the quiz" + footer until quiz interaction is done.
   Keep them visible on desktop scroll though, so users can find context. */
@media (max-width: 720px) {
  /* Mobile-first quiz: tighter spacing, larger touch targets */
  .quiz-canvas .quiz-option {
    grid-template-columns: 20px 1fr 18px;
    padding: 16px 16px;
    gap: 12px;
  }
  .quiz-canvas .quiz-option-check { width: 18px; height: 18px; }
  .quiz-canvas .quiz-option-text .qo-h { font-size: 15px; }
  .quiz-canvas .quiz-option-text .qo-sub { font-size: 12.5px; }
  .quiz-stage-h { font-size: 26px; }
  .qp-meta .qp-counter, .qp-meta .qp-pct { font-size: 9.5px; }
}

/* ─────────────────────────────────────────────────────────
   HOW IT WORKS . brand-aligned page styles
   Hero re-uses .hero-edit dark canvas + .blob-field; .hiw-* are
   the page-specific blocks (steps, compliance strip, FAQ).
   ───────────────────────────────────────────────────────── */
.hiw-hero { padding: clamp(72px, 9vw, 128px) 0 clamp(48px, 6vw, 80px); display: block; }
.hiw-hero-inner {
  position: relative; z-index: 2;
  max-width: 760px;
  text-align: center;
  margin: 0 auto;
}
.hiw-hero-eyebrow {
  display: flex; justify-content: center;
  margin-bottom: 22px;
}
.hiw-hero-h {
  font-family: var(--f-display);
  font-size: clamp(40px, 6vw, 84px);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.022em;
  color: var(--off-white);
  margin: 0 0 22px;
  text-wrap: balance;
}
.hiw-hero-h em { font-style: italic; font-weight: 300; color: var(--sage); }
.hiw-hero-sub {
  font-family: var(--f-body);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
  color: rgba(247,248,242,0.78);
  max-width: 56ch;
  margin: 0 auto 28px;
}
.hiw-hero-badges {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  justify-content: center;
}
.hiw-hero-badges li {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247,248,242,0.72);
}
.hiw-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 3px rgba(122,132,99,0.18);
}

/* Compliance strip . sage-tinted band right under hero */
.hiw-compliance {
  background: rgba(122,132,99,0.10);
  border-top: 1px solid rgba(122,132,99,0.24);
  border-bottom: 1px solid rgba(122,132,99,0.24);
  padding: clamp(14px, 2vw, 20px) 0;
}
.hiw-compliance-inner {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  max-width: 920px;
  margin: 0 auto;
}
.hiw-compliance-mark {
  flex-shrink: 0;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--olive);
  padding-top: 4px;
}
.hiw-compliance p {
  margin: 0;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(20,20,26,0.78);
}
@media (max-width: 720px) {
  .hiw-compliance-inner { flex-direction: column; gap: 8px; }
}

/* Steps */
.hiw-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hiw-step {
  background: var(--off-white);
  border: 1px solid rgba(74,82,66,0.14);
  border-radius: 14px;
  padding: clamp(28px, 3.4vw, 44px);
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hiw-step::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 64px; height: 3px;
  background: var(--sage);
  border-radius: 0 0 4px 0;
}
.hiw-step:hover {
  border-color: rgba(74,82,66,0.32);
  box-shadow: 0 24px 50px rgba(20,20,26,0.08);
  transform: translateY(-2px);
}
.hiw-step-head {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.hiw-step-num {
  font-family: var(--f-display);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 600;
  color: var(--olive);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.012em;
}
.hiw-step-tag {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.hiw-step-h {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 500;
  letter-spacing: -0.014em;
  line-height: 1.18;
  color: var(--charcoal);
  margin: 0 0 14px;
  text-wrap: balance;
}
.hiw-step-body {
  font-family: var(--f-body);
  font-size: 15.5px;
  line-height: 1.66;
  color: rgba(20,20,26,0.74);
  margin: 0 0 24px;
  max-width: 78ch;
}

/* Step 01 . domain grid */
.hiw-domain-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.hiw-domain {
  background: rgba(122,132,99,0.08);
  border: 1px solid rgba(122,132,99,0.20);
  border-radius: 8px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.hiw-domain:hover {
  background: rgba(122,132,99,0.14);
  border-color: rgba(122,132,99,0.40);
  transform: translateY(-2px);
}
.hiw-domain-key {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive);
}
.hiw-domain-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--f-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(20,20,26,0.78);
}
@media (max-width: 960px) { .hiw-domain-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .hiw-domain-grid { grid-template-columns: 1fr; } }

/* Step 02 . requirement list */
.hiw-req-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.hiw-req-list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  background: rgba(247,248,242,0.55);
  border: 1px solid rgba(74,82,66,0.12);
  border-radius: 8px;
}
.hiw-req-num {
  color: var(--sage);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
}
.hiw-req-text {
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(20,20,26,0.78);
}
.hiw-req-text strong { color: var(--charcoal); font-weight: 600; }

/* Step 03 . protocol preview */
.hiw-protocol {
  background: var(--charcoal);
  color: var(--off-white);
  border-radius: 10px;
  padding: 22px 24px;
  font-family: var(--f-mono);
}
.hiw-protocol-label {
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(247,248,242,0.55);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(247,248,242,0.10);
}
.hiw-protocol-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(247,248,242,0.08);
  font-size: 13px;
}
.hiw-protocol-row:last-child { border-bottom: none; }
.hiw-protocol-key { color: var(--off-white); font-weight: 500; }
.hiw-protocol-val { color: var(--sage); }
.hiw-protocol-meta { color: rgba(247,248,242,0.62); text-align: right; }
@media (max-width: 600px) {
  .hiw-protocol-row { grid-template-columns: 1fr; gap: 4px; }
  .hiw-protocol-meta { text-align: left; }
}

/* Step 04 . fact grid */
.hiw-fact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.hiw-fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: rgba(74,82,66,0.06);
  border: 1px solid rgba(74,82,66,0.14);
  border-radius: 8px;
  font-family: var(--f-mono);
}
.hiw-fact-key {
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(20,20,26,0.55);
}
.hiw-fact-val {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal);
}
@media (max-width: 760px) { .hiw-fact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .hiw-fact-grid { grid-template-columns: 1fr; } }

/* Step 05 . monitor grid */
.hiw-monitor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.hiw-monitor {
  background: rgba(247,248,242,0.55);
  border: 1px solid rgba(74,82,66,0.14);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background .2s ease, border-color .2s ease;
}
.hiw-monitor:hover {
  background: var(--off-white);
  border-color: var(--olive);
}
.hiw-monitor-key {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive);
}
.hiw-monitor-val {
  font-family: var(--f-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(20,20,26,0.78);
}
@media (max-width: 760px) { .hiw-monitor-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .hiw-monitor-grid { grid-template-columns: 1fr; } }

/* FAQ . native <details> elements, brand-styled */
.hiw-faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 880px;
  margin: 0;
}
.hiw-faq-item {
  background: var(--off-white);
  border: 1px solid rgba(74,82,66,0.14);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.hiw-faq-item[open] {
  border-color: rgba(74,82,66,0.32);
  box-shadow: 0 12px 28px rgba(20,20,26,0.06);
}
.hiw-faq-q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-family: var(--f-display);
  font-size: clamp(15px, 1.6vw, 17px);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.35;
  color: var(--charcoal);
  transition: color .2s ease, background .2s ease;
}
.hiw-faq-q::-webkit-details-marker { display: none; }
.hiw-faq-q:hover { background: rgba(74,82,66,0.04); }
.hiw-faq-chevron {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--olive);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--olive);
  transition: transform .25s ease, background .2s ease, color .2s ease;
}
.hiw-faq-item[open] .hiw-faq-chevron {
  transform: rotate(45deg);
  background: var(--charcoal);
  color: var(--off-white);
  border-color: var(--charcoal);
}
.hiw-faq-a {
  padding: 0 22px 22px;
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(20,20,26,0.74);
  border-top: 1px solid rgba(74,82,66,0.10);
  padding-top: 18px;
}
.hiw-faq-a strong { color: var(--charcoal); font-weight: 600; }

/* ─────────────────────────────────────────────────────────
   CONSULT PAGE . brand-aligned, immersive, interactive
   Hero re-uses .hero-edit + .blob-field (dark canvas + drift).
   .cs-* are the page-specific blocks: status card, prerequisite
   tiles, timeline, baseline split, checklist.
   ───────────────────────────────────────────────────────── */
.cs-hero { padding: clamp(72px, 8vw, 112px) 0 clamp(56px, 7vw, 96px); }
.cs-hero-grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 960px) {
  .cs-hero-grid { grid-template-columns: 1fr; gap: 36px; }
}
.cs-hero-text { display: flex; flex-direction: column; gap: 22px; max-width: 560px; }
.cs-hero-h {
  font-family: var(--f-display);
  font-size: clamp(38px, 5.6vw, 72px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.022em;
  color: var(--off-white);
  margin: 0;
  text-wrap: balance;
}
.cs-hero-h em { font-style: italic; font-weight: 300; color: var(--sage); }
.cs-hero-sub {
  font-family: var(--f-body);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
  color: rgba(247,248,242,0.78);
  margin: 0;
  max-width: 56ch;
}

/* At-a-glance tiles */
.cs-hero-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 6px;
}
.cs-meta-tile {
  background: rgba(247,248,242,0.04);
  border: 1px solid rgba(247,248,242,0.10);
  border-radius: 10px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background .2s ease, border-color .2s ease;
}
.cs-meta-tile:hover {
  background: rgba(247,248,242,0.07);
  border-color: rgba(122,132,99,0.45);
}
.cs-meta-num {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  color: var(--off-white);
  letter-spacing: -0.012em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cs-meta-unit {
  font-family: var(--f-body);
  font-size: 12px;
  line-height: 1.4;
  color: rgba(247,248,242,0.62);
}
@media (max-width: 600px) {
  .cs-hero-meta { grid-template-columns: 1fr 1fr; }
}

.cs-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* Status card . right column */
.cs-status-card {
  position: relative;
  background: rgba(247,248,242,0.04);
  border: 1px solid rgba(247,248,242,0.12);
  border-radius: 14px;
  padding: clamp(22px, 2.6vw, 32px);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 28px 60px rgba(0,0,0,0.34);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 24px;
}
.cs-status-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 56px; height: 3px;
  background: var(--sage);
  border-radius: 0 0 4px 0;
}
.cs-status-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cs-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 4px rgba(122,132,99,0.20);
  animation: csStatusPulse 1.6s ease-in-out infinite;
}
@keyframes csStatusPulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(122,132,99,0.20); }
  50%     { box-shadow: 0 0 0 9px rgba(122,132,99,0.04); }
}
.cs-status-key {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(247,248,242,0.72);
  flex: 1;
}
.cs-status-badge {
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.20em;
  color: #FFBE98;
  background: rgba(255,190,152,0.14);
  border: 1px solid rgba(255,190,152,0.32);
  border-radius: 999px;
  padding: 4px 10px;
}
.cs-status-h {
  font-family: var(--f-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--off-white);
  margin: 6px 0 4px;
}
.cs-status-sub {
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(247,248,242,0.68);
  margin: 0 0 8px;
}
.cs-status-meta {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  border-top: 1px solid rgba(247,248,242,0.10);
}
.cs-status-meta li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(247,248,242,0.08);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
}
.cs-status-meta li:last-child { border-bottom: none; }
.cs-status-meta-key { color: rgba(247,248,242,0.50); text-transform: uppercase; letter-spacing: 0.18em; }
.cs-status-meta-val { color: var(--off-white); font-weight: 500; text-align: right; }
.cs-status-cta {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}

/* §02 Prerequisite cards */
.cs-prereq-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.cs-prereq {
  background: var(--off-white);
  border: 1px solid rgba(74,82,66,0.16);
  border-radius: 12px;
  padding: clamp(22px, 2.6vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.cs-prereq::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 48px; height: 3px;
  background: var(--sage);
  border-radius: 0 0 4px 0;
}
.cs-prereq:hover {
  transform: translateY(-3px);
  border-color: rgba(74,82,66,0.32);
  box-shadow: 0 24px 50px rgba(20,20,26,0.08);
}
.cs-prereq-head {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
}
.cs-prereq-num {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--olive);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.012em;
}
.cs-prereq-tag {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.cs-prereq-h {
  font-family: var(--f-display);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.22;
  color: var(--charcoal);
  margin: 0 0 4px;
}
.cs-prereq-body {
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(20,20,26,0.74);
  margin: 0;
}
.cs-prereq-note {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(20,20,26,0.50);
  line-height: 1.5;
  margin: auto 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(74,82,66,0.10);
}
@media (max-width: 960px) { .cs-prereq-grid { grid-template-columns: 1fr; } }

/* §03 Vertical timeline */
.cs-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cs-timeline::before {
  content: '';
  position: absolute;
  left: 36px;
  top: 28px;
  bottom: 28px;
  width: 1.5px;
  background: linear-gradient(to bottom, var(--olive), rgba(74,82,66,0.10));
  z-index: 0;
}
.cs-stage {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  background: var(--off-white);
  border: 1px solid rgba(74,82,66,0.14);
  border-radius: 12px;
  padding: 22px 24px 22px 16px;
  position: relative;
  z-index: 1;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.cs-stage:hover {
  transform: translateX(2px);
  border-color: rgba(74,82,66,0.32);
  box-shadow: 0 18px 40px rgba(20,20,26,0.06);
}
.cs-stage-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}
.cs-stage-num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--charcoal);
  color: var(--off-white);
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: -0.005em;
  box-shadow: 0 0 0 4px var(--off-white), 0 0 0 5px rgba(74,82,66,0.18);
  position: relative;
  z-index: 2;
}
.cs-stage:hover .cs-stage-num {
  background: var(--olive);
}
.cs-stage-time {
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(20,20,26,0.50);
}
.cs-stage-body { display: flex; flex-direction: column; gap: 6px; }
.cs-stage-tag {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--olive);
}
.cs-stage-h {
  font-family: var(--f-display);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.22;
  color: var(--charcoal);
  margin: 0;
}
.cs-stage-text {
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(20,20,26,0.74);
  margin: 0;
}
@media (max-width: 720px) {
  .cs-timeline::before { left: 32px; }
  .cs-stage { grid-template-columns: 64px 1fr; gap: 14px; padding: 18px 18px 18px 12px; }
  .cs-stage-num { width: 48px; height: 48px; font-size: 17px; }
}

/* §04 Baseline-band . dark feature like the magnet section */
.cs-baseline-band {
  position: relative;
  overflow: hidden;
  background: #0E1116;
  color: var(--off-white);
  padding: clamp(72px, 9vw, 128px) 0;
  isolation: isolate;
}
.cs-baseline-band > .container { position: relative; z-index: 2; }
.cs-baseline-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}
@media (max-width: 960px) { .cs-baseline-grid { grid-template-columns: 1fr; } }
.cs-baseline-text {
  display: flex; flex-direction: column; gap: 18px;
  max-width: 56ch;
}
.cs-baseline-h {
  font-family: var(--f-display);
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.04;
  color: var(--off-white);
  margin: 0;
  text-wrap: balance;
}
.cs-baseline-sub {
  font-family: var(--f-body);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.65;
  color: rgba(247,248,242,0.78);
  margin: 0;
}
.cs-baseline-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.cs-baseline-ghost {
  color: var(--off-white) !important;
  border-color: rgba(247,248,242,0.32) !important;
}
.cs-baseline-ghost:hover {
  background: rgba(247,248,242,0.06);
  border-color: var(--off-white) !important;
}

/* Checklist card on the right */
.cs-checklist {
  background: rgba(247,248,242,0.04);
  border: 1px solid rgba(247,248,242,0.12);
  border-radius: 14px;
  padding: clamp(22px, 2.6vw, 32px);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 28px 60px rgba(0,0,0,0.34);
  position: relative;
}
.cs-checklist::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 56px; height: 3px;
  background: var(--sage);
  border-radius: 0 0 4px 0;
}
.cs-checklist-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.cs-check-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 4px rgba(122,132,99,0.20);
}
.cs-checklist-key {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(247,248,242,0.72);
}
.cs-checklist-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  border-top: 1px solid rgba(247,248,242,0.10);
}
.cs-checklist-list li {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(247,248,242,0.08);
}
.cs-checklist-list li:last-child { border-bottom: none; }
.cs-check-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--charcoal);
  font-size: 12px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.cs-check-text {
  font-family: var(--f-body);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--off-white);
}
.cs-check-note {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247,248,242,0.55);
}

/* ============================================================
   BIOMARKER INDEX (Lead-Magnet PDF + Web)
   Surface: site/biomarker-index.html
   Spec:    docs/superpowers/specs/2026-04-30-biomarker-index-lead-magnet-design.md
   ============================================================ */

.bmi-doc { background: var(--stone); color: var(--charcoal); font-family: 'Barlow', system-ui, sans-serif; }

.bmi-page {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 64px 56px;
  min-height: 100vh;
  border-bottom: 1px solid rgba(20,20,22,0.08);
}

.bmi-page-header { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; }
.bmi-rule { display: inline-block; width: 32px; height: 2px; background: var(--sage); }
.bmi-page-eyebrow { font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: 0.08em; color: var(--charcoal); text-transform: uppercase; }
.bmi-page-inner { max-width: 720px; }

.bmi-h2 { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 38px; line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 20px 0; }
.bmi-h3 { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 22px; margin: 28px 0 10px 0; }
.bmi-lede { font-family: 'Barlow', sans-serif; font-size: 19px; line-height: 1.5; margin: 0 0 24px 0; color: rgba(20,20,22,0.78); }
.bmi-page-inner p { font-size: 16px; line-height: 1.65; margin: 0 0 16px 0; }
.bmi-page-inner em { font-style: italic; color: var(--charcoal); }

/* Cover (p1) */
.bmi-cover { background: var(--charcoal); color: var(--off-white); padding: 0; min-height: 100vh; display: flex; }
.bmi-cover-inner { width: 100%; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; }
.bmi-cover-top, .bmi-cover-bot { display: flex; justify-content: space-between; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.1em; color: rgba(247,248,242,0.55); text-transform: uppercase; }
.bmi-cover-mark { color: var(--sage); }
.bmi-cover-eyebrow { display: inline-flex; gap: 8px; font-family: 'DM Mono', monospace; font-size: 12px; color: var(--sage); margin-bottom: 24px; }
.bmi-cover-eyebrow .num { color: var(--off-white); }
.bmi-cover-eyebrow .slash { color: rgba(247,248,242,0.4); }
.bmi-cover-h { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 88px; line-height: 0.95; letter-spacing: -0.025em; margin: 0 0 24px 0; color: var(--off-white); }
.bmi-cover-sub { font-family: 'Barlow', sans-serif; font-size: 22px; line-height: 1.4; max-width: 560px; color: rgba(247,248,242,0.78); margin: 0; }

/* Letter (p2) */
.bmi-letter-inner { max-width: 640px; margin: 56px auto 0; }
.bmi-letter-sig { font-family: 'DM Mono', monospace; font-size: 13px; letter-spacing: 0.04em; color: var(--sage); margin-top: 32px; }
.bmi-letter-fn { font-size: 13px; line-height: 1.55; color: rgba(20,20,22,0.55); margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(20,20,22,0.1); }

/* Frame list (p3) */
.bmi-frame-list { list-style: none; padding: 0; margin: 24px 0 32px; counter-reset: bmi-frame; }
.bmi-frame-list li { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid rgba(20,20,22,0.08); }
.bmi-frame-num { font-family: 'DM Mono', monospace; font-size: 13px; color: var(--sage); padding-top: 4px; min-width: 32px; }
.bmi-frame-h { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 18px; display: block; margin-bottom: 4px; }
.bmi-frame-sub { font-family: 'Barlow', sans-serif; font-size: 15px; color: rgba(20,20,22,0.7); display: block; }

/* How-to-use (p4) */
.bmi-howto { margin-top: 36px; padding: 24px; background: rgba(124,138,110,0.08); border-left: 3px solid var(--sage); }
.bmi-howto-eyebrow { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.1em; color: var(--sage); display: block; margin-bottom: 12px; }
.bmi-howto ul { list-style: none; padding: 0; margin: 0; }
.bmi-howto li { display: flex; gap: 14px; padding: 6px 0; font-size: 14px; }
.bmi-howto .k { font-family: 'DM Mono', monospace; color: rgba(20,20,22,0.55); min-width: 130px; }
.bmi-howto .v { font-family: 'Barlow', sans-serif; }

/* Domain pages (p5-10) */
.bmi-domain-intro { margin-bottom: 28px; }
.bmi-cards { display: flex; flex-direction: column; gap: 16px; }
.bmi-card { padding: 20px 22px; background: rgba(255,255,255,0.6); border-left: 3px solid var(--sage); }
.bmi-card-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.bmi-card-name { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 18px; margin: 0; }
.bmi-card-paired { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.08em; color: var(--sage); padding: 2px 6px; background: rgba(124,138,110,0.12); }
.bmi-card-what, .bmi-card-why { font-size: 14px; line-height: 1.55; margin: 0 0 6px 0; }
.bmi-card-what .k, .bmi-card-why .k { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--sage); margin-right: 4px; }

/* Soft CTA (end of p8) */
.bmi-soft-cta { margin-top: 36px; padding: 20px 22px; border-top: 1px solid rgba(20,20,22,0.12); }
.bmi-soft-cta p { font-style: italic; font-size: 15px; color: rgba(20,20,22,0.7); margin: 0; }

/* Reference grid (p11) */
.bmi-grid-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13px; }
.bmi-grid-table th, .bmi-grid-table td { text-align: left; padding: 10px 12px; vertical-align: top; border-bottom: 1px solid rgba(20,20,22,0.08); }
.bmi-grid-table th { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.06em; color: rgba(20,20,22,0.55); text-transform: uppercase; }
.bmi-grid-dom { font-family: 'DM Mono', monospace; color: var(--sage); width: 32px; }
.bmi-grid-name { width: 26%; }
.bmi-grid-what { width: 26%; color: rgba(20,20,22,0.7); }
.bmi-grid-why { width: 44%; }

/* Comparison spread (p12) */
.bmi-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 28px 0; }
.bmi-compare-col { padding: 24px; }
.bmi-compare-standard { background: rgba(20,20,22,0.04); border-left: 3px solid rgba(20,20,22,0.2); }
.bmi-compare-baseline { background: rgba(124,138,110,0.1); border-left: 3px solid var(--sage); }
.bmi-compare-eyebrow { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.1em; display: block; margin-bottom: 8px; color: rgba(20,20,22,0.55); }
.bmi-compare-baseline .bmi-compare-eyebrow { color: var(--sage); }
.bmi-compare-h { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 28px; margin: 0 0 8px 0; }
.bmi-compare-sub { font-size: 13px; color: rgba(20,20,22,0.7); margin: 0 0 16px 0; }
.bmi-compare-col ul { list-style: none; padding: 0; margin: 0; font-size: 13px; line-height: 1.7; }
.bmi-compare-col li { padding: 4px 0; border-bottom: 1px solid rgba(20,20,22,0.06); }

/* GP-panel-shared rows in the baseline list: subtle sage edge + softer ink */
.bmi-compare-baseline-list li.bmi-compare-shared {
  position: relative; padding-left: 16px; color: rgba(20,20,22,0.78);
}
.bmi-compare-baseline-list li.bmi-compare-shared::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 1px;
  background: var(--sage); transform: translateY(-50%);
}
/* Divider between the 8 shared and the 20 additional */
.bmi-compare-baseline-list li.bmi-compare-divider {
  border-bottom: none; padding: 14px 0 10px; margin-top: 4px;
  display: flex; align-items: center; gap: 10px;
}
.bmi-compare-baseline-list li.bmi-compare-divider::before,
.bmi-compare-baseline-list li.bmi-compare-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--sage); opacity: 0.35;
}
.bmi-compare-baseline-list li.bmi-compare-divider span {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sage); white-space: nowrap;
}

/* Closing CTA (p13) */
.bmi-cta { background: var(--charcoal); color: var(--off-white); padding: 0; min-height: 100vh; display: flex; align-items: center; }
.bmi-cta-inner { width: 100%; max-width: 720px; margin: 0 auto; padding: 56px; }
.bmi-cta-eyebrow { font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: 0.1em; color: var(--sage); display: block; margin-bottom: 20px; }
.bmi-cta-h { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 56px; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 24px 0; color: var(--off-white); }
.bmi-cta-sub { font-family: 'Barlow', sans-serif; font-size: 18px; line-height: 1.5; color: rgba(247,248,242,0.78); margin: 0 0 16px 0; }
.bmi-cta-link { display: inline-block; font-family: 'DM Mono', monospace; font-size: 16px; color: var(--sage); margin: 28px 0; padding: 14px 22px; border: 1px solid var(--sage); text-decoration: none; }
.bmi-cta-link:hover { background: var(--sage); color: var(--charcoal); }
.bmi-cta-foot { font-size: 12px; color: rgba(247,248,242,0.45); margin-top: 32px; }

/* Colophon (p14) */
.bmi-colophon-inner { max-width: 640px; }
.bmi-colophon-dl { display: grid; grid-template-columns: 160px 1fr; gap: 6px 18px; margin: 0 0 28px 0; font-size: 13px; }
.bmi-colophon-dl dt { font-family: 'DM Mono', monospace; color: rgba(20,20,22,0.55); }
.bmi-colophon-dl dd { margin: 0; }
.bmi-colophon-p { font-size: 13px; line-height: 1.6; color: rgba(20,20,22,0.7); margin: 0 0 12px 0; }

/* NEXUS sidebar (used on p3, p4, p11, p12) */
.bmi-sidebar { margin: 32px 0 0 0; padding: 22px 24px; background: var(--charcoal); color: var(--off-white); border-left: 3px solid var(--sage); }
.bmi-sidebar-eyebrow { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.1em; color: var(--sage); display: block; margin-bottom: 8px; }
.bmi-sidebar-h { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 17px; margin: 0 0 8px 0; color: var(--off-white); }
.bmi-sidebar p { font-size: 13px; line-height: 1.55; color: rgba(247,248,242,0.78); margin: 0; }

/* ============================================================
   BIOMARKER INDEX . PRINT (PDF EXPORT)
   Target: A4 portrait, full-bleed, exactly 14 pages.
   Render: Chrome → Print → Save as PDF, "Background graphics" ON,
   "Headers and footers" OFF, margins "None" or "Default".
   ============================================================ */

@media print {
  @page {
    size: A4 portrait;
    margin: 0;            /* Full bleed; padding moves to .bmi-page */
  }

  html, body {
    background: var(--stone) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Hide everything that isn't a page section */
  body.bmi-doc > *:not(.bmi-page) { display: none !important; }
  .bmi-toc, .bmi-progress, .bmi-toolbar, .bmi-filter,
  .bmi-card-anchor, .bmi-img-label,
  .bmi-tool, .bmi-tool-mobile-toc { display: none !important; }
  .bmi-doc { padding-left: 0 !important; padding-right: 0 !important; }

  /* Each section is exactly one A4 page, full bleed, content padding inside */
  .bmi-page {
    position: relative;
    width: 210mm;
    height: 297mm;
    margin: 0 !important;
    padding: 16mm 18mm 14mm 18mm;
    box-sizing: border-box;
    page-break-before: always;
    page-break-after: always;
    page-break-inside: avoid;
    overflow: hidden;
    border-bottom: none !important;
    background: var(--stone);
    max-width: none !important;
    min-height: 0 !important;
  }
  .bmi-page:first-of-type { page-break-before: avoid; }

  /* ── Cover (p1) and CTA (p13): edge-to-edge dark bleed ─────── */
  .bmi-cover, .bmi-cta {
    background: var(--charcoal) !important;
    color: var(--off-white) !important;
    padding: 0 !important;
    display: flex !important;
  }
  .bmi-cover { align-items: stretch !important; }
  .bmi-cover-inner {
    flex: 0 0 56% !important;
    padding: 22mm 16mm !important;
    height: 100%;
    box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: space-between;
  }
  .bmi-cover-h { font-size: 52px !important; line-height: 0.98 !important; }
  .bmi-cover-sub { font-size: 14px !important; }
  .bmi-img--cover {
    flex: 1 1 44% !important;
    margin: 0 !important;
    aspect-ratio: auto !important;
    max-height: none !important;
    height: 100% !important;
    background-position: center !important;
    background-size: cover !important;
  }
  .bmi-cta-inner {
    width: 100%;
    padding: 28mm 22mm !important;
  }
  .bmi-cta-h { font-size: 40px !important; }
  .bmi-cta-sub { font-size: 14px !important; line-height: 1.4 !important; }
  .bmi-cta-link { font-size: 13px !important; padding: 10px 16px !important; margin: 18px 0 !important; }
  .bmi-cta-foot { font-size: 10px !important; margin-top: 18px !important; }

  /* ── Body-page typography (tightened) ──────────────────────── */
  .bmi-page-header { margin-bottom: 16px !important; gap: 10px !important; }
  .bmi-page-eyebrow { font-size: 10px !important; }
  .bmi-page-inner { max-width: 100% !important; }
  .bmi-h2 { font-size: 26px !important; line-height: 1.05 !important; margin: 0 0 12px !important; }
  .bmi-h3 { font-size: 16px !important; margin: 14px 0 6px !important; }
  .bmi-lede { font-size: 13px !important; line-height: 1.45 !important; margin: 0 0 14px !important; color: rgba(20,20,22,0.78) !important; }
  .bmi-page-inner p { font-size: 12px !important; line-height: 1.5 !important; margin: 0 0 9px !important; }

  /* ── Letter (p2) ───────────────────────────────────────────── */
  .bmi-letter-inner { margin: 14mm auto 0 !important; max-width: 100% !important; }
  .bmi-letter-sig { font-size: 11px !important; margin-top: 18px !important; }
  .bmi-letter-fn { font-size: 10px !important; margin-top: 14px !important; padding-top: 10px !important; line-height: 1.45 !important; }

  /* ── Frame list (p3) ───────────────────────────────────────── */
  .bmi-frame-list { margin: 12px 0 16px !important; }
  .bmi-frame-list li { padding: 9px 0 !important; gap: 12px !important; }
  .bmi-frame-num { font-size: 11px !important; padding-top: 2px !important; min-width: 24px !important; }
  .bmi-frame-h { font-size: 13px !important; margin-bottom: 2px !important; }
  .bmi-frame-sub { font-size: 11px !important; line-height: 1.4 !important; }

  /* ── How-to-use (p4) ───────────────────────────────────────── */
  .bmi-howto { padding: 12px 14px !important; margin-top: 14px !important; page-break-inside: avoid; }
  .bmi-howto-eyebrow { font-size: 9px !important; margin-bottom: 6px !important; }
  .bmi-howto li { font-size: 10px !important; padding: 2px 0 !important; gap: 10px !important; }
  .bmi-howto .k { min-width: 100px !important; }

  /* ── Domain intro (p5, p7, p9, p10): tight grid + small sigil ─ */
  .bmi-domain-intro {
    grid-template-columns: 1fr auto !important;
    gap: 14px !important;
    margin-bottom: 12px !important;
  }
  .bmi-sigil {
    width: 56px !important; height: 56px !important;
    padding: 4px !important;
    border-color: rgba(20,20,22,0.10) !important;
  }

  /* ── Marker cards (p5-p10): tight, never split ─────────────── */
  .bmi-cards { gap: 7px !important; }
  .bmi-card {
    padding: 10px 14px !important;
    border-left-width: 2px !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  .bmi-card-h { margin-bottom: 5px !important; gap: 8px !important; }
  .bmi-card-name { font-size: 13px !important; }
  .bmi-card-paired { font-size: 8px !important; padding: 1px 4px !important; }
  .bmi-card-what, .bmi-card-why { font-size: 10.5px !important; line-height: 1.4 !important; margin: 0 0 3px !important; }
  .bmi-card-what .k, .bmi-card-why .k { font-size: 9px !important; }

  /* Soft mid-doc CTA (end of p8) */
  .bmi-soft-cta { margin-top: 14px !important; padding: 10px 14px !important; }
  .bmi-soft-cta p { font-size: 11px !important; line-height: 1.4 !important; }

  /* ── Reference grid (p11) ──────────────────────────────────── */
  .bmi-grid-table { font-size: 9px !important; margin-top: 10px !important; }
  .bmi-grid-table th, .bmi-grid-table td { padding: 4px 6px !important; }
  .bmi-grid-table th { font-size: 8.5px !important; }
  .bmi-grid-table tr { page-break-inside: avoid !important; }

  /* ── Comparison spread (p12) ───────────────────────────────── */
  .bmi-compare-grid { gap: 14px !important; margin: 14px 0 !important; }
  .bmi-compare-col { padding: 12px 14px !important; }
  .bmi-compare-eyebrow { font-size: 9px !important; }
  .bmi-compare-h { font-size: 20px !important; margin: 0 0 4px !important; }
  .bmi-compare-sub { font-size: 11px !important; margin: 0 0 10px !important; }
  .bmi-compare-col ul { font-size: 10.5px !important; line-height: 1.45 !important; }
  .bmi-compare-col li { padding: 2px 0 !important; }
  .bmi-compare-baseline-list li.bmi-compare-divider { padding: 6px 0 4px !important; }
  .bmi-compare-baseline-list li.bmi-compare-divider span { font-size: 8.5px !important; }

  /* ── Colophon (p14) ────────────────────────────────────────── */
  .bmi-colophon-dl { font-size: 11px !important; gap: 4px 12px !important; grid-template-columns: 130px 1fr !important; }
  .bmi-colophon-p { font-size: 10.5px !important; line-height: 1.45 !important; margin: 0 0 8px !important; }

  /* ── Sidebars (NEXUS) ──────────────────────────────────────── */
  .bmi-sidebar {
    margin: 14px 0 0 !important;
    padding: 12px 14px !important;
    page-break-inside: avoid !important;
  }
  .bmi-sidebar-eyebrow { font-size: 9px !important; margin-bottom: 4px !important; }
  .bmi-sidebar-h { font-size: 13px !important; margin: 0 0 4px !important; }
  .bmi-sidebar p { font-size: 10.5px !important; line-height: 1.4 !important; }

  /* ── Inline SVG figures (p2 pathway, p3 quadrant, p4 curve) ──── */
  .bmi-svg { margin: 12px 0 0 !important; }
  .bmi-svg svg { max-width: 360px !important; }
  .bmi-svg--curve svg { max-width: 460px !important; }
  .bmi-svg--pathway svg { max-width: 480px !important; }
  .bmi-svg-caption { font-size: 8.5px !important; margin-top: 6px !important; color: rgba(20,20,22,0.65) !important; }

  /* ── Page number footers (only show source page n / 14) ──── */
  .bmi-page::after {
    content: attr(data-page) " / 14";
    position: absolute;
    bottom: 8mm;
    right: 18mm;
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.06em;
    color: var(--sage);
  }
  .bmi-cover::after, .bmi-cta::after { color: rgba(247,248,242,0.45) !important; right: 16mm; }

  /* Strip URL-after-anchor that some user agents inject */
  a[href]::after { content: "" !important; }
}

/* ============================================================
   BIOMARKER INDEX . WEB-ONLY INTERACTIVE CHROME
   TOC rail · scroll-progress · toolbar · domain filter ·
   marker-card anchor copy · p12 cascade reveal · image slots.
   All hidden in @media print (see block above).
   ============================================================ */

/* Reserve room for the fixed left rail on wide screens */
@media (min-width: 1024px) {
  .bmi-doc { padding-left: 220px; }
  .bmi-doc .bmi-page { margin-left: 0; }
}

/* ── Top scroll-progress rule ─────────────────────────────────── */
.bmi-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: rgba(20,20,22,0.06); z-index: 50;
}
.bmi-progress-fill {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--sage) 0%, var(--olive) 100%);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 80ms linear;
}

/* ── Sticky left-rail TOC (1024px+) ───────────────────────────── */
.bmi-toc {
  position: fixed; top: 0; left: 0; bottom: 0; width: 220px;
  padding: 32px 18px 24px; overflow-y: auto;
  background: var(--charcoal); color: var(--off-white);
  border-right: 1px solid rgba(255,255,255,0.06);
  z-index: 40;
  font-family: 'DM Mono', ui-monospace, monospace;
}
.bmi-toc-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; letter-spacing: 0.12em; color: var(--sage);
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.bmi-toc-meta { color: rgba(247,248,242,0.45); }
.bmi-toc-list { list-style: none; padding: 0; margin: 0; }
.bmi-toc-list li { margin: 0; }
.bmi-toc-list a {
  display: flex; gap: 10px; align-items: baseline;
  padding: 7px 8px; color: rgba(247,248,242,0.55);
  text-decoration: none; font-size: 11px; letter-spacing: 0.04em;
  border-left: 2px solid transparent;
  transition: color 120ms, background 120ms, border-color 120ms;
}
.bmi-toc-list a:hover { color: var(--off-white); background: rgba(255,255,255,0.03); }
.bmi-toc-list a.is-active {
  color: var(--off-white); border-left-color: var(--sage);
  background: rgba(122,132,99,0.08);
}
.bmi-toc-list a .n { color: var(--sage); min-width: 22px; }
.bmi-toc-list a .t { font-family: 'Barlow', sans-serif; font-size: 13px; letter-spacing: 0; }
.bmi-toc-sep {
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(247,248,242,0.30); padding: 14px 8px 4px;
}

/* ── Toolbar (top right) ──────────────────────────────────────── */
.bmi-toolbar {
  position: fixed; top: 16px; right: 18px; z-index: 60;
  display: flex; gap: 6px;
}
.bmi-tool {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; font-family: 'DM Mono', monospace; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--charcoal); color: var(--off-white);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 0;
  cursor: pointer; transition: background 120ms, border-color 120ms;
}
.bmi-tool:hover { background: var(--olive); border-color: var(--sage); }
.bmi-tool-glyph { color: var(--sage); font-size: 14px; }
.bmi-tool-mobile-toc { display: none; }

/* Mobile: hide left rail, show mobile-toc button + slide-down panel */
@media (max-width: 1023px) {
  .bmi-toc {
    transform: translateX(-100%); transition: transform 240ms ease;
    width: min(280px, 86vw);
  }
  .bmi-toc-open .bmi-toc { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,0.4); }
  .bmi-tool-mobile-toc { display: inline-flex; }
}

/* ── Image placeholder slots (p1, p3, p4) ─────────────────────── */
.bmi-img {
  display: flex; align-items: flex-end; justify-content: flex-start;
  margin: 28px 0 0; padding: 14px 16px; min-height: 200px;
  background:
    linear-gradient(135deg, rgba(122,132,99,0.06) 0%, rgba(74,82,66,0.10) 100%),
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(20,20,22,0.04) 12px 13px);
  border: 1px dashed rgba(20,20,22,0.18);
  position: relative;
}
.bmi-img-label {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.10em;
  text-transform: uppercase; color: rgba(20,20,22,0.55);
  padding: 4px 8px; background: rgba(247,248,242,0.85); border-left: 2px solid var(--sage);
}
.bmi-img--cover {
  aspect-ratio: 4 / 5; max-height: 60vh; margin: 0;
  background: url('/img/biomarker-index/cover-abstract.jpg') center/cover no-repeat;
  border: none;
}
.bmi-img--cover .bmi-img-label { display: none; }
@media print {
  .bmi-img--cover { max-height: none; height: auto; aspect-ratio: 1856 / 2104; }
}

/* Inline SVG diagram figures (p2, p3, p4) . replace the dashed placeholders */
.bmi-svg {
  display: block; margin: 32px 0 0; padding: 0;
}
.bmi-svg svg { display: block; width: 100%; height: auto; }
.bmi-svg--frame svg   { max-width: 640px; margin: 0 auto; }
.bmi-svg--curve svg   { max-width: 720px; margin: 0 auto; }
.bmi-svg--pathway svg { max-width: 720px; margin: 0 auto; }
.bmi-svg-caption {
  display: block; margin: 12px auto 0; max-width: 600px;
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.06em;
  color: rgba(20,20,22,0.55); text-align: center; line-height: 1.5;
}

/* Domain sigils . small SVG marks injected into bmi-domain-intro by the renderer */
.bmi-domain-intro {
  display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: start;
}
.bmi-domain-intro-text { min-width: 0; }
.bmi-sigil {
  display: block; width: 96px; height: 96px; flex-shrink: 0;
  padding: 8px; background: rgba(255,255,255,0.5);
  border: 1px solid rgba(20,20,22,0.10);
}
.bmi-sigil svg { display: block; width: 100%; height: 100%; }
@media (max-width: 600px) {
  .bmi-domain-intro { grid-template-columns: 1fr; }
  .bmi-sigil { width: 72px; height: 72px; }
}
@media print {
  .bmi-sigil { width: 64px !important; height: 64px !important; padding: 4px; }
}

/* When a real image is dropped in, it replaces the placeholder via background-image:
   .bmi-img--cover { background: url('/img/biomarker-index/cover-abstract.jpg') center/cover; border: none; }
   etc. The .bmi-img-label inside still serves as accessible/visible caption when wanted. */

/* ── p11 domain filter pills ──────────────────────────────────── */
.bmi-filter {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 24px 0 18px; padding: 14px 16px;
  background: rgba(20,20,22,0.04); border-left: 3px solid var(--sage);
}
.bmi-filter-eyebrow {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sage); margin-right: 8px;
}
.bmi-filter-pill {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 6px 12px;
  background: transparent; color: rgba(20,20,22,0.7);
  border: 1px solid rgba(20,20,22,0.18); cursor: pointer;
  transition: all 120ms;
}
.bmi-filter-pill em { font-style: normal; color: var(--sage); margin-left: 6px; }
.bmi-filter-pill:hover { border-color: var(--sage); color: var(--charcoal); }
.bmi-filter-pill.is-active {
  background: var(--charcoal); color: var(--off-white); border-color: var(--charcoal);
}
.bmi-filter-pill.is-active em { color: var(--sage); }
.bmi-grid-table tr.is-hidden { display: none; }

/* ── Marker-card anchor (#) copy button ───────────────────────── */
.bmi-card { position: relative; }
.bmi-card-anchor {
  margin-left: auto; padding: 2px 8px; font-family: 'DM Mono', monospace;
  font-size: 12px; color: rgba(20,20,22,0.30);
  background: transparent; border: 1px solid transparent; cursor: pointer;
  border-radius: 0; transition: color 120ms, border-color 120ms;
  opacity: 0; transition: opacity 160ms, color 120ms, border-color 120ms;
}
.bmi-card:hover .bmi-card-anchor, .bmi-card:focus-within .bmi-card-anchor { opacity: 1; }
.bmi-card-anchor:hover { color: var(--sage); border-color: var(--sage); }
.bmi-card-anchor.is-copied { color: var(--olive); border-color: var(--olive); }
.bmi-card-anchor.is-copied::after { content: ' COPIED'; font-size: 10px; letter-spacing: 0.06em; }

/* ── p12 cascade reveal (subtle) ──────────────────────────────── */
.bmi-compare-grid.is-pre-reveal .bmi-compare-col { opacity: 0; transform: translateY(10px); }
.bmi-compare-grid.is-pre-reveal .bmi-compare-col,
.bmi-compare-grid.is-revealed .bmi-compare-col {
  transition: opacity 480ms ease, transform 480ms ease;
}
.bmi-compare-grid.is-revealed .bmi-compare-standard { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
.bmi-compare-grid.is-revealed .bmi-compare-baseline { opacity: 1; transform: translateY(0); transition-delay: 220ms; }
.bmi-compare-grid.is-revealed .bmi-compare-baseline-list li { animation: bmiCascade 32ms ease both; }
@keyframes bmiCascade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .bmi-compare-grid.is-pre-reveal .bmi-compare-col,
  .bmi-compare-grid.is-revealed .bmi-compare-col { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ─── Index Clinic Brand v5.0 . Local Font Faces ────────────────────────────
   Loaded sitewide so all surfaces (founding, talks, biomarker-index) get
   brand-true type rendering. Source: ~/CLEAVES/index-clinic-design-lab/fonts/
   See [[Index Clinic Brand System]] §02. */

@font-face {
  font-family: "Barlow";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Barlow-Light.ttf") format("truetype");
}

@font-face {
  font-family: "Outfit";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Outfit-Variable.ttf") format("truetype-variations"),
       url("/fonts/Outfit-Variable.ttf") format("truetype");
}

@font-face {
  font-family: "DM Mono";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/DMMono-Light.ttf") format("truetype");
}

/* ============================================================
   v1.7 CIRCADIAN BRAND OVERRIDE . locked 2026-05-06
   See brand/circadian-brand-system.md for the master spec.
   This block remaps the legacy Editorial Clinical (v6.0) palette
   variables to the v1.7 Circadian palette + self-hosts Aeion Mono.
   Loaded last so cascade wins.
   ============================================================ */

@font-face {
  font-family: "Aeion Mono";
  src: url("/fonts/aeion-mono-regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* v1.7 LOCKED palette . 8 working colours */
  --bone:        #F0E6D5;   /* light canvas */
  --charcoal:    #2C2A28;   /* dark canvas / default ink */
  --lola:        #E5D2DB;   /* dawn . pre-sunrise pink mauve */
  --persimmon:   #DC7A4A;   /* dawn → dusk bridge . sunset orange */
  --sail:        #B5DBF1;   /* day . sky blue */
  --pistachio:   #C5D49A;   /* day . muted spring green */
  --wisteria:    #7A5E78;   /* dusk → night bridge . dusty plum */
  --midnight:    #232E52;   /* night . deep ink blue */

  /* Remap legacy v6.0 variables onto v1.7 colours so existing components inherit. */
  --stone:           var(--bone);
  --off-white:       var(--bone);
  --clay:            var(--bone);
  --sage:            var(--pistachio);
  --olive:           var(--charcoal);     /* primary CTA . Charcoal on Bone canvas per spec §7.3 */
  --gold:            var(--persimmon);
  --terracotta:      var(--persimmon);
  --dusk-blue:       var(--midnight);
  --highlight-lime:  var(--persimmon);

  /* Pantone aliases */
  --ultra-violet:    var(--midnight);
  --very-peri:       var(--midnight);
  --living-coral:    var(--persimmon);
  --peach-fuzz:      var(--lola);
  --illuminating:    var(--persimmon);
  --classic-blue:    var(--midnight);
  --cerulean:        var(--sail);
  --greenery:        var(--pistachio);
  --viva-magenta:    var(--wisteria);
  --tangerine-tango: var(--persimmon);
  --mocha-mousse:    var(--persimmon);

  /* Surface system . Bone canvas, Charcoal type */
  --surface:           var(--bone);
  --surface-card:      var(--bone);
  --on-surface:        var(--charcoal);
  --on-surface-muted:  rgba(44, 42, 40, 0.62);
  --border-light:      rgba(44, 42, 40, 0.10);
  --border-mid:        rgba(44, 42, 40, 0.20);

  /* Typography . locked v1.7 */
  --f-display: "Barlow", "Helvetica Neue", system-ui, sans-serif;       /* H1 / Display */
  --f-body:    "Outfit", "Helvetica Neue", system-ui, sans-serif;       /* H2 / Body */
  --f-mono:    "Aeion Mono", "DM Mono", ui-monospace, monospace;        /* Label / Tagline */

  /* tic-* aliases used elsewhere */
  --tic-white-warm:  var(--bone);
  --tic-white-pure:  var(--bone);
  --tic-white-mist:  var(--bone);
  --tic-ink-900:     var(--charcoal);
  --tic-ink-700:     #4A4845;
  --tic-ink-500:     rgba(44, 42, 40, 0.62);
  --tic-ink-400:     rgba(44, 42, 40, 0.46);
  --tic-green:       var(--charcoal);
  --tic-ink-200:     rgba(44, 42, 40, 0.28);

  /* Brand-kit gradient . Dawn (4-stop with Bone held at 25%) */
  --gradient-sunrise-dusk: linear-gradient(
    90deg,
    var(--lola) 0%,
    var(--bone) 37.5%,
    var(--bone) 62.5%,
    var(--persimmon) 100%
  );
  --gradient-cta:    linear-gradient(135deg, var(--charcoal) 0%, var(--wisteria) 100%);
  --gradient-golden: linear-gradient(135deg, var(--persimmon) 0%, var(--lola) 100%);

  --accent:        var(--charcoal);
  --accent-hover:  var(--wisteria);
  --accent-muted:  rgba(44, 42, 40, 0.08);
  --accent-text:   var(--charcoal);
}

/* Body canvas + default ink */
body { background-color: var(--bone); color: var(--charcoal); }

/* Brand lockup . SVG replaces the old span typography. */
.brand-lockup-svg { display: block; height: 36px; width: auto; }
.brand-lockup--footer .brand-lockup-svg { height: 44px; }
@media (max-width: 720px) {
  .brand-lockup-svg { height: 30px; }
}

/* Hero blob field . re-paint the old "sage / olive / dusk / muted-magenta / peach"
   to a Dawn-palette set (light phase). The blob technique itself is preserved
   per Phase Posters §6 . multi-blob blur on Bone canvas using opacity blending. */
.hero-edit .blob-sage    { background: var(--lola)      !important; }
.hero-edit .blob-olive   { background: var(--persimmon) !important; }
.hero-edit .blob-magenta { background: var(--wisteria)  !important; }
.hero-edit .blob-dusk    { background: var(--pistachio) !important; }
.hero-edit .blob-peach   { background: var(--persimmon) !important; }

/* Magnet (waitlist) section . lift to Day palette so the second large gradient
   moment differs from the hero. */
.magnet-feature .magnet-blob-sage    { background: var(--sail)      !important; }
.magnet-feature .magnet-blob-magenta { background: var(--pistachio) !important; }
.magnet-feature .magnet-blob-dusk    { background: var(--wisteria)  !important; }

/* Strip-bar chips . recoloured to v1.7 phase-coded set */
.strip-bar .chip-sage    { background: var(--lola);      color: var(--charcoal); }
.strip-bar .chip-olive   { background: var(--pistachio); color: var(--charcoal); }
.strip-bar .chip-dusk    { background: var(--wisteria);  color: var(--bone); }
.strip-bar .chip-magenta { background: var(--persimmon); color: var(--bone); }
.strip-bar .chip-bone    { background: var(--bone);      color: var(--charcoal); border: 1px solid var(--border-light); }

/* "Index Mark" device . caps + quotes . should use Aeion Mono per spec §6 */
.index-mark { font-family: var(--f-mono); letter-spacing: 0.14em; }

/* v1.7 visual corrections after first smoke render */

/* Hero canvas . pull to true Charcoal #2C2A28 per spec; was #0E1116 (deeper than spec). */
.hero-edit { background: var(--charcoal); }
.hero-edit .hero-edit-headline,
.hero-edit .hero-edit-headline em { color: var(--bone); }
.hero-edit .hero-edit-sub        { color: rgba(240, 230, 213, 0.85); }
.hero-edit .hero-edit-meta-val   { color: rgba(240, 230, 213, 0.92); }
.hero-edit .hero-edit-meta-key   { color: var(--lola); }
.hero-edit .index-mark           { color: rgba(240, 230, 213, 0.70); }

/* Nav . push opacity to near-solid so the Charcoal lockup stays visible
   above the dark hero (was 0.92 → backdrop-blur picked up the dark hero). */
.nav { background: rgba(240, 230, 213, 0.97); }
[data-state="night"] .nav,
[data-state="dusk"]  .nav { background: rgba(44, 42, 40, 0.97); }
[data-state="morning"] .nav { background: rgba(240, 230, 213, 0.97); }
[data-state="midday"]  .nav { background: rgba(181, 219, 241, 0.92); }

/* Footer + dark sections . Charcoal canvas, Bone type */
.footer { background: var(--charcoal); color: var(--bone); }
.footer .footer-tagline,
.footer .footer-link,
.footer .footer-col-title,
.footer .footer-promise-text,
.footer .footer-promise-mark,
.footer .footer-legal,
.footer .footer-disclaimer { color: rgba(240, 230, 213, 0.86); }
.footer .footer-link:hover { color: var(--bone); }

/* Footer lockup is on Charcoal . needs the Bone/white variant. The HTML
   uses /img/logos/index-clinic-full.svg (Charcoal); swap via mask. */
.footer .brand-lockup-svg {
  /* Render the SVG as Bone using a mask trick so we don't need a separate img tag */
  filter: invert(95%) sepia(15%) saturate(166%) hue-rotate(338deg) brightness(95%);
}

/* v1.7 lockup sizing . compact-viewBox variants land at proper aspect (~3.5:1) */
.nav .brand-lockup-svg          { height: 28px; }
.brand-lockup--footer .brand-lockup-svg { height: 36px; filter: none; }
@media (max-width: 720px) {
  .nav .brand-lockup-svg { height: 24px; }
}

/* v1.7 canvas-aware lockup . swap to Bone tone when nav is on Charcoal canvas
   (dusk / night phases triggered by app.js circadian state) */
[data-state="dusk"]  .nav .brand-lockup-svg,
[data-state="night"] .nav .brand-lockup-svg {
  filter: invert(95%) sepia(15%) saturate(166%) hue-rotate(338deg) brightness(95%);
}

/* ============================================================
   QUIZ v2 ; "Build Your Panel" (2026-05-11)
   Design: docs/superpowers/specs/2026-05-11-quiz-build-your-panel-design.md
   Brand: Circadian v1.7 (Dawn phase poster on the stage, Bone canvas card).
   Overrides the older dark .quiz-stage block above + adds new component classes.
   ============================================================ */

/* Stage ; Dawn poster (light variant). Bone canvas, opacity-blended blobs. */
.quiz-stage {
  background: var(--bone) !important;
  color: var(--charcoal) !important;
}
.quiz-stage .qstage-blob {
  mix-blend-mode: normal !important;
  filter: blur(80px);
  opacity: 0.85;
}
.quiz-stage .qstage-blob-lola-main {
  width: 95%;  height: 55%;
  top: -8%;    left: 5%;
  background: var(--lola);
  opacity: 0.90;
}
.quiz-stage .qstage-blob-persimmon-main {
  width: 60%;  height: 45%;
  top: -5%;    left: -15%;
  background: var(--persimmon);
  opacity: 0.78;
}
.quiz-stage .qstage-blob-persimmon-edge {
  width: 55%;  height: 45%;
  top: 22%;    right: -15%;
  background: var(--persimmon);
  opacity: 0.62;
  animation-direction: alternate-reverse;
  animation-duration: 34s;
}
.quiz-stage .qstage-blob-lola-lower {
  width: 50%;  height: 35%;
  top: 35%;    left: 30%;
  background: var(--lola);
  opacity: 0.62;
  animation-duration: 28s;
}
.quiz-stage .qstage-grain { display: none; }

/* Title bar on Bone ; Charcoal type */
.quiz-stage .quiz-stage-eyebrow {
  /* APCA fix (2026-05-13): raised from 0.55 to 0.85 for Lc 60+ on Bone. */
  color: rgba(44, 42, 40, 0.85);
  font-family: var(--f-mono);
}
.quiz-stage .quiz-stage-h {
  color: var(--charcoal);
  font-family: var(--f-display);
  font-weight: 300;
  letter-spacing: -0.02em;
  font-size: clamp(34px, 5vw, 56px);
  /* Sentence case per brand DESIGN.md §1.7; never Title Case, never lowercase-forced. */
}
.quiz-stage .quiz-stage-sub {
  /* APCA fix (2026-05-13): raised from 0.68 to 0.85 for Lc 60+ on Bone. */
  color: rgba(44, 42, 40, 0.85);
  font-family: var(--f-body);
  font-weight: 300;
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.6;
  text-align: center;
  max-width: 56ch;
  margin: 4px auto 0;
}

/* Progress on Bone */
.quiz-stage .quiz-progress-v2 {
  background: rgba(44, 42, 40, 0.04);
  border: 1px solid rgba(44, 42, 40, 0.10);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.quiz-stage .qp-seg {
  background: rgba(44, 42, 40, 0.10);
}
.quiz-stage .qp-seg.is-completed {
  background: var(--charcoal);
}
.quiz-stage .qp-seg.is-current {
  background: linear-gradient(90deg, var(--charcoal), var(--persimmon));
  animation: qpPulseLight 1.6s ease-in-out infinite;
}
@keyframes qpPulseLight {
  0%,100% { box-shadow: 0 0 0 0 rgba(220, 122, 74, 0.45); }
  50%     { box-shadow: 0 0 0 4px rgba(220, 122, 74, 0); }
}
.quiz-stage .qp-meta { color: rgba(44, 42, 40, 0.58); }
.quiz-stage .qp-meta .qp-counter { color: var(--charcoal); }
/* APCA fix (2026-05-13): Persimmon at small size fails Lc 60. Switch to Charcoal. */
.quiz-stage .qp-meta .qp-pct     { color: var(--charcoal); }

/* Canvas ; flat per brand (no shadow); soft border on Bone */
.quiz-stage .quiz-canvas {
  background: #FFFFFF;
  color: var(--charcoal);
  border: 1px solid rgba(44, 42, 40, 0.10);
  box-shadow: none;
}
.quiz-stage .quiz-canvas::before {
  background: var(--persimmon);
}

/* Question head */
.quiz-canvas .quiz-q-head { margin-bottom: 20px; }
.quiz-canvas .quiz-q-meta {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  /* APCA fix (2026-05-13): Persimmon at 11px fails Lc 60. Switch to Charcoal. */
  color: var(--charcoal);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.quiz-canvas .quiz-q-sub {
  font-family: var(--f-body);
  font-size: 14.5px;
  line-height: 1.55;
  /* APCA fix (2026-05-13): raised from 0.65 to 0.85 to pass Lc 60 on white. */
  color: rgba(44, 42, 40, 0.85);
  margin: -16px 0 22px;
  max-width: 56ch;
}

/* Option layout ; grid retained from existing rules; add tag/sub support */
.quiz-canvas .quiz-option {
  font-family: var(--f-body) !important;
}
.quiz-canvas .quiz-option .qo-tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  /* APCA fix (2026-05-13): Persimmon at 10px fails Lc 60. Switch to Charcoal. */
  color: var(--charcoal);
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: 400;
}
.quiz-canvas .quiz-option.selected .qo-tag {
  color: var(--lola);
}
.quiz-canvas .quiz-option .qo-h {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(15px, 1.6vw, 17px);
  font-weight: 300;
  letter-spacing: -0.005em;
  line-height: 1.35;
  color: var(--charcoal);
}
.quiz-canvas .quiz-option.selected .qo-h {
  color: var(--bone);
}

/* Multi-select layout */
.quiz-canvas .quiz-options--multi {
  /* Same column flow as single; visual hint is in foot bar */
}
.quiz-canvas .quiz-multi-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(44, 42, 40, 0.10);
}
.quiz-canvas .quiz-multi-counter {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(44, 42, 40, 0.58);
}
.quiz-canvas .quiz-continue {
  height: 44px;
  padding: 0 22px;
  background: var(--charcoal);
  color: var(--bone);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 400;
  text-transform: uppercase;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.quiz-canvas .quiz-continue:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(44, 42, 40, 0.18);
}
.quiz-canvas .quiz-continue:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Lead-gate form */
.quiz-canvas .quiz-lead-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 460px;
  margin: 4px auto 0;
}
.quiz-canvas .quiz-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.quiz-canvas .quiz-field-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* APCA fix (2026-05-13): raised from 0.62 to 0.85 for Lc 60+ on white. */
  color: rgba(44, 42, 40, 0.85);
}
.quiz-canvas .quiz-field-label em {
  font-style: italic;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  color: rgba(44, 42, 40, 0.42);
}
.quiz-canvas .quiz-field input {
  height: 52px;
  padding: 0 16px;
  background: #FAF6EE;
  border: 1.5px solid rgba(44, 42, 40, 0.18);
  border-radius: 8px;
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 300;
  color: var(--charcoal);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  width: 100%;
  box-sizing: border-box;
}
.quiz-canvas .quiz-field input:focus {
  border-color: var(--charcoal);
  box-shadow: 0 0 0 3px rgba(44, 42, 40, 0.10);
  background: #FFFFFF;
}
.quiz-canvas .quiz-field input.is-error {
  border-color: var(--persimmon);
  box-shadow: 0 0 0 3px rgba(220, 122, 74, 0.18);
}
.quiz-canvas .quiz-field-hint {
  font-family: var(--f-body);
  font-size: 12px;
  font-style: italic;
  color: rgba(44, 42, 40, 0.52);
  margin-top: 2px;
}
.quiz-canvas .quiz-submit {
  height: 54px;
  padding: 0 24px;
  background: var(--charcoal);
  color: var(--bone);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 6px;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.quiz-canvas .quiz-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(44, 42, 40, 0.20);
}
.quiz-canvas .quiz-submit:disabled { opacity: 0.55; cursor: progress; }
.quiz-canvas .quiz-lead-fineprint {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(44, 42, 40, 0.52);
  margin: 4px 0 0;
}

/* Result screen ; apothecary structure */
.quiz-canvas .quiz-result {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 4px 0;
}
.quiz-canvas .quiz-result-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.quiz-canvas .quiz-result-mark {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  /* APCA fix (2026-05-13): raised from 0.62 to 0.85; very small text needs
     full opacity to pass Lc 60. */
  color: rgba(44, 42, 40, 0.85);
}
.quiz-canvas .quiz-hairline {
  display: block;
  width: 100%;
  height: 0.5px;
  background: var(--charcoal);
  opacity: 1;
}
.quiz-canvas .quiz-result-h {
  font-family: var(--f-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--charcoal);
  line-height: 0.95;
  margin: 0;
}
.quiz-canvas .quiz-result-spec {
  font-family: var(--f-body);
  font-size: 12.5px;
  /* APCA fix (2026-05-13): raised fw to 500 and opacity to 0.70 for Lc 60+. */
  font-weight: 500;
  font-style: italic;
  color: rgba(44, 42, 40, 0.70);
  letter-spacing: 0.01em;
  margin: 0;
}

.quiz-canvas .quiz-result-body {
  text-align: left;
}
.quiz-canvas .quiz-result-frame {
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--charcoal);
  margin: 0;
  max-width: 60ch;
}

/* Panel category list */
.quiz-canvas .quiz-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 0.5px solid rgba(44, 42, 40, 0.45);
  border-bottom: 0.5px solid rgba(44, 42, 40, 0.45);
  display: flex;
  flex-direction: column;
}
.quiz-canvas .quiz-panel-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  column-gap: 16px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 0.5px solid rgba(44, 42, 40, 0.10);
}
.quiz-canvas .quiz-panel-item:last-child { border-bottom: none; }
.quiz-canvas .quiz-panel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--persimmon);
  margin-top: 10px;
  justify-self: center;
  display: block;
  flex-shrink: 0;
}
.quiz-canvas .quiz-panel-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.quiz-canvas .quiz-panel-label {
  display: block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--charcoal);
  font-weight: 400;
  line-height: 1.3;
}
.quiz-canvas .quiz-panel-desc {
  display: block;
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(44, 42, 40, 0.74);
  font-style: italic;
}
@media (max-width: 600px) {
  .quiz-canvas .quiz-panel-item {
    grid-template-columns: 14px 1fr;
    column-gap: 12px;
    padding: 16px 0;
  }
  .quiz-canvas .quiz-panel-label { font-size: 10.5px; letter-spacing: 0.18em; }
  .quiz-canvas .quiz-panel-desc { font-size: 13.5px; line-height: 1.55; }
}

/* Next-steps visual (modes 2, 3) */
.quiz-canvas .quiz-next-steps {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) {
  .quiz-canvas .quiz-next-steps { grid-template-columns: 1fr; }
}
.quiz-canvas .quiz-next-steps li {
  background: #FAF6EE;
  border: 1px solid rgba(44, 42, 40, 0.10);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.quiz-canvas .qns-num {
  font-family: var(--f-display);
  font-size: 28px;
  /* APCA fix (2026-05-13): large decorative display numeral; raise to fw 700
     to satisfy Circadian v1.9 §7.5 (heavy weight at large display size). */
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--persimmon);
  line-height: 1;
}
.quiz-canvas .qns-h {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--charcoal);
  line-height: 1.35;
}
.quiz-canvas .qns-sub {
  font-family: var(--f-body);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(44, 42, 40, 0.70);
}

/* Result CTAs */
.quiz-canvas .quiz-result-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}
.quiz-canvas .quiz-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 28px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  border: 1.5px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  min-width: 220px;
}
.quiz-canvas .quiz-cta--primary {
  background: var(--charcoal);
  color: var(--bone);
}
.quiz-canvas .quiz-cta--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(44, 42, 40, 0.22);
}
.quiz-canvas .quiz-cta--ghost {
  background: transparent;
  color: var(--charcoal);
  border-color: rgba(44, 42, 40, 0.22);
}
.quiz-canvas .quiz-cta--ghost:hover {
  background: rgba(44, 42, 40, 0.04);
  border-color: var(--charcoal);
}
@media (max-width: 600px) {
  .quiz-canvas .quiz-result {
    gap: 18px;
  }
  .quiz-canvas .quiz-result-cta {
    flex-direction: column;
    gap: 10px;
  }
  .quiz-canvas .quiz-cta {
    width: 100%;
    min-width: 0;
    height: 50px;
    padding: 0 18px;
    font-size: 11px;
  }
  .quiz-canvas .quiz-result-h {
    font-size: clamp(24px, 7vw, 32px);
    letter-spacing: 0.04em;
  }
  .quiz-canvas .quiz-result-frame {
    font-size: 14.5px;
    line-height: 1.65;
  }
  .quiz-canvas .quiz-result-mark {
    font-size: 8.5px;
    letter-spacing: 0.30em;
  }
}

/* Result notes */
.quiz-canvas .quiz-result-note,
.quiz-canvas .quiz-result-fasting,
.quiz-canvas .quiz-result-fineprint {
  font-family: var(--f-body);
  font-size: 12.5px;
  /* APCA fix (2026-05-13): raised from fw 300 to fw 500 + opacity 0.7 to
     pass Lc 60 on white at small size (fineprint / fasting). */
  font-weight: 500;
  line-height: 1.6;
  color: rgba(44, 42, 40, 0.70);
  margin: 0;
}
.quiz-canvas .quiz-result-note {
  /* Body-weight note: opacity 0.85 for Lc 60+ at 12.5px. */
  color: rgba(44, 42, 40, 0.85);
}
.quiz-canvas .quiz-result-note strong { font-weight: 600; color: var(--charcoal); }

/* Exclusion screen ; quieter, no panel list */
.quiz-canvas .quiz-result--exclusion .quiz-result-h {
  letter-spacing: -0.01em;
  text-transform: none;
}
.quiz-canvas .quiz-result--exclusion .quiz-result-body {
  text-align: center;
}

/* Nav bar at canvas foot ; Bone-canvas tones */
.quiz-stage .quiz-nav-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(44, 42, 40, 0.10);
}
.quiz-stage .quiz-back-btn {
  background: transparent;
  border: none;
  color: rgba(44, 42, 40, 0.68);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 6px 4px;
  transition: color .15s ease;
}
.quiz-stage .quiz-back-btn:hover { color: var(--charcoal); }
.quiz-stage .quiz-hint {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(44, 42, 40, 0.48);
}

.quiz-stage .quiz-fineprint {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(44, 42, 40, 0.55);
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

/* Multi-select selected state ; same look as single-select selected */
.quiz-canvas .quiz-options--multi .quiz-option.selected {
  background: var(--charcoal);
  border-color: var(--charcoal);
}

/* Compact arrow tweak for new Bone theme */
.quiz-stage .quiz-canvas .quiz-option-arrow {
  color: rgba(44, 42, 40, 0.32);
}
.quiz-stage .quiz-canvas .quiz-option:hover .quiz-option-arrow {
  color: var(--persimmon);
}
.quiz-stage .quiz-canvas .quiz-option.selected .quiz-option-arrow {
  color: var(--persimmon);
}


/* ============================================================
   QUIZ v2 : Hesitation cues (§6.2, 2026-05-13)
   .why-we-ask and .skip-affordance are hidden until
   HesitationDetector toggles .visible via JS.
   ============================================================ */

.quiz-canvas .quiz-hesitation-wrap {
  /* Transparent container; no layout effect. */
}

.quiz-canvas .why-we-ask,
.quiz-canvas .skip-affordance {
  display: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--charcoal);
  background: rgba(44, 42, 40, 0.05);
  border-left: 2.5px solid var(--persimmon);
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  margin-top: 16px;
}

.quiz-canvas .why-we-ask.visible,
.quiz-canvas .skip-affordance.visible {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.quiz-canvas .skip-affordance {
  border-left-color: rgba(44, 42, 40, 0.28);
  color: rgba(44, 42, 40, 0.75);
  font-size: 12.5px;
}

/* ============================================================
   QUIZ v2 : Identity affirmation (lead capture, §3.4, 2026-05-13)
   ============================================================ */

.quiz-canvas .quiz-affirm-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: rgba(44, 42, 40, 0.04);
  border: 1px solid rgba(44, 42, 40, 0.12);
  border-radius: 10px;
  margin-bottom: 8px;
}

.quiz-canvas .quiz-affirm-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(44, 42, 40, 0.58);
  margin-bottom: 2px;
}

.quiz-canvas .quiz-affirm-goal {
  font-family: var(--f-display);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--charcoal);
  line-height: 1.2;
}

.quiz-canvas .quiz-affirm-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.quiz-canvas .quiz-affirm-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--charcoal);
  cursor: pointer;
}

.quiz-canvas .quiz-affirm-check span {
  font-family: var(--f-body);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--charcoal);
  line-height: 1.4;
}

.quiz-canvas .quiz-affirm-block.is-error {
  border-color: var(--persimmon);
  background: rgba(220, 122, 74, 0.06);
}

/* ============================================================
   QUIZ v2 : Result celebration (§3.5 gate 1, 2026-05-13)
   ============================================================ */

@keyframes resultCardEnter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.quiz-canvas .quiz-panel-item.result-card-enter {
  opacity: 0;
  animation: resultCardEnter 200ms ease forwards;
}

@keyframes circadianSweep {
  from { transform: scaleX(0); transform-origin: left center; }
  to   { transform: scaleX(1); transform-origin: left center; }
}

.quiz-canvas .quiz-result-gradient-bar {
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--lola)      0%,
    var(--sail)      33%,
    var(--persimmon) 66%,
    var(--midnight)  100%
  );
  animation: circadianSweep 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: left center;
  transform: scaleX(0);
  margin-bottom: 12px;
}

/* ============================================================
   BLOODS ORDER PAGE (Stage 1 stub)
   Reuses .quiz-stage + .quiz-canvas + .quiz-result-* from the
   quiz v2 block above. Adds three small components:
   the loading state, the EARLY ACCESS status card, and the
   missing-state fallback (which reuses .quiz-next-steps).
   ============================================================ */

.quiz-canvas .order-loading {
  text-align: center;
  padding: 32px 0;
}
.quiz-canvas .order-loading-mark {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  /* APCA fix (2026-05-13): Persimmon at 11px fails Lc 60. Switch to Charcoal. */
  color: var(--charcoal);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.quiz-canvas .order-loading p {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 300;
  color: rgba(44, 42, 40, 0.62);
  margin: 0;
}

.quiz-canvas .order-status {
  background: #FAF6EE;
  border: 1px solid rgba(220, 122, 74, 0.28);
  border-radius: 12px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.quiz-canvas .order-status-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  /* APCA fix (2026-05-13): Persimmon at 10px fails Lc 60. Switch to Charcoal. */
  color: var(--charcoal);
  text-transform: uppercase;
  font-weight: 400;
  padding: 4px 10px;
  border: 1px solid rgba(44, 42, 40, 0.28);
  border-radius: 999px;
}
.quiz-canvas .order-status p {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--charcoal);
  margin: 0;
}
.quiz-canvas .order-status strong {
  font-weight: 400;
}


/* ============================================================
   QUIZ v2.1 (2026-05-13); Clinical Intake additions
   - Personalisation "Why these markers" block on result page
   - Soft-nudge: trust-line + tertiary consult link
   - Tile-grid for Q7/Q8/Q9 (2-col desktop, 1-col mobile)
   ============================================================ */

/* Personalisation block (above panel list on result page) */
.quiz-canvas .quiz-personalisation {
  background: #FAF6EE;
  border-left: 3px solid var(--persimmon);
  border-radius: 6px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.quiz-canvas .quiz-personalisation-mark {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  /* APCA fix (2026-05-13): Persimmon at 10px fails Lc 60. Switch to Charcoal. */
  color: var(--charcoal);
  text-transform: uppercase;
}
.quiz-canvas .quiz-personalisation p {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--charcoal);
  margin: 0;
}

/* Trust line above CTA block */
.quiz-canvas .quiz-trust-line {
  font-family: var(--f-body);
  font-size: 13.5px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.55;
  color: rgba(44, 42, 40, 0.68);
  text-align: center;
  margin: 0;
  max-width: 56ch;
  align-self: center;
}

/* Tertiary consult link below CTA block */
.quiz-canvas .quiz-tertiary-link {
  text-align: center;
  margin: 4px 0 0;
}
.quiz-canvas .quiz-tertiary-link a {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(44, 42, 40, 0.62);
  border-bottom: 1px dotted rgba(44, 42, 40, 0.32);
  padding-bottom: 2px;
  transition: color .15s ease, border-color .15s ease;
}
.quiz-canvas .quiz-tertiary-link a:hover {
  color: var(--charcoal);
  border-bottom-color: var(--charcoal);
}

/* Q7/Q8/Q9 clinical-intake tile grid; 2-col desktop, 1-col mobile.
   Targets the options containers for these specific question ids via the data-question attribute. */
.quiz-canvas .quiz-options[data-question="q7"],
.quiz-canvas .quiz-options[data-question="q8"],
.quiz-canvas .quiz-options[data-question="q9"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 600px) {
  .quiz-canvas .quiz-options[data-question="q7"],
  .quiz-canvas .quiz-options[data-question="q8"],
  .quiz-canvas .quiz-options[data-question="q9"] {
    grid-template-columns: 1fr;
  }
}

/* Within Q7/Q8/Q9 cards, the "qo-tag" chip is absent; tighten the row */
.quiz-canvas .quiz-options[data-question="q7"] .quiz-option,
.quiz-canvas .quiz-options[data-question="q8"] .quiz-option,
.quiz-canvas .quiz-options[data-question="q9"] .quiz-option {
  min-height: 56px;
  padding: 14px 16px;
}
.quiz-canvas .quiz-options[data-question="q7"] .qo-h,
.quiz-canvas .quiz-options[data-question="q8"] .qo-h,
.quiz-canvas .quiz-options[data-question="q9"] .qo-h {
  font-size: 14.5px;
  line-height: 1.35;
}


/* ============================================================
   QUIZ Q1 MULTI-ORDERED (2026-05-13); priority badges (1/2/3)
   inside the .quiz-option-check slot, with Persimmon fill on
   selected. The .quiz-options--ordered grid keeps existing
   stacking; only the check slot changes presentation.
   ============================================================ */

.quiz-canvas .quiz-options--ordered .quiz-option-check[data-priority]:not([data-priority=""]) {
  background: var(--persimmon);
  border-color: var(--persimmon);
  color: var(--bone);
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  letter-spacing: 0;
}
.quiz-canvas .quiz-options--ordered .quiz-option-check[data-priority]:not([data-priority=""])::after {
  display: none; /* hide the default checkmark dot */
}
/* Selected card override: charcoal bg with persimmon priority chip stands out */
.quiz-canvas .quiz-options--ordered .quiz-option.selected {
  background: var(--charcoal);
  border-color: var(--charcoal);
}
.quiz-canvas .quiz-options--ordered .quiz-option.selected .qo-tag {
  color: var(--lola);
}
.quiz-canvas .quiz-options--ordered .quiz-option.selected .qo-h {
  color: var(--bone);
}


/* Single-select "Locked in" affirmation state on the multi-foot counter */
.quiz-canvas .quiz-multi-counter.is-locked {
  color: var(--persimmon);
}
.quiz-canvas .quiz-multi-counter.is-locked::before {
  content: '\2713';
  display: inline-block;
  margin-right: 6px;
  font-family: var(--f-mono);
  font-size: 12px;
}


/* ============================================================
   PAGE-BONE-NAV (2026-05-13)
   Pin the global nav to Bone canvas regardless of circadian state.
   Used on /quiz and /bloods/order, which are permanently Dawn-phase
   Bone-canvas pages; without this override, the nav inherits the
   dusk/night Charcoal background and the Charcoal nav text becomes
   invisible. Specificity-overrides the [data-state] rules in the
   v1.7 Circadian block above.
   ============================================================ */

body.page-bone-nav .nav {
  background: rgba(240, 230, 213, 0.97) !important;
}
body.page-bone-nav .nav-mobile {
  background: rgba(240, 230, 213, 0.98) !important;
}
/* Nav link text colors are already Charcoal-based via --on-surface(-muted);
   the variables resolve correctly on the Bone-pinned nav, so no overrides
   are needed for link text or active-underline. */