/* ===========================================================================
   Index Clinic. landing page styles
   Tokens are inlined here (no @import) so the page renders with no external deps.
   =========================================================================== */

/* Brand fonts. self-hosted from /site/fonts/ (resolved relative to this CSS). */
@font-face {
  font-family: 'Barlow';
  src: url('../fonts/Barlow-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-Light.ttf') format('truetype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@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 {
  --bone:         #F0E6D5;
  --charcoal:     #2C2A28;
  --lola:         #E5D2DB;
  --persimmon:    #DC7A4A;
  --sail:         #B5DBF1;
  --pistachio:    #C5D49A;
  --wisteria:     #7A5E78;
  --midnight:     #232E52;

  --hairline-solid: rgba(44, 42, 40, 1);
  --hairline-faint: rgba(44, 42, 40, 0.45);
  --border-card:    rgba(44, 42, 40, 0.15);

  --grad-dawn:  linear-gradient(to right,  #E5D2DB 0%, #F0E6D5 37.5%, #F0E6D5 62.5%, #DC7A4A 100%);
  --grad-day:   linear-gradient(to right,  #B5DBF1 0%, #F0E6D5 37.5%, #F0E6D5 62.5%, #C5D49A 100%);
  --grad-dusk:  linear-gradient(to right,  #DC7A4A 0%, #2C2A28 41.25%, #2C2A28 58.75%, #7A5E78 100%);
  --grad-night: linear-gradient(to right,  #7A5E78 0%, #2C2A28 41.25%, #2C2A28 58.75%, #232E52 100%);

  --grad-dawn-v: linear-gradient(to bottom, #E5D2DB 0%, #F0E6D5 37.5%, #F0E6D5 62.5%, #DC7A4A 100%);
  --grad-day-v:  linear-gradient(to bottom, #B5DBF1 0%, #F0E6D5 37.5%, #F0E6D5 62.5%, #C5D49A 100%);
  --grad-dusk-v: linear-gradient(to bottom, #7A5E78 0%, #2C2A28 41.25%, #2C2A28 58.75%, #DC7A4A 100%);
  --grad-night-v:linear-gradient(to bottom, #232E52 0%, #2C2A28 41.25%, #2C2A28 58.75%, #7A5E78 100%);

  --font-display: 'Barlow', sans-serif;
  --font-body:    'Outfit', sans-serif;
  --font-mono:    'Aeion Mono', 'JetBrains Mono', 'Courier New', monospace;

  --radius-button: 10px;
  --radius-card:   12px;
  --radius-hero:   14px;

  --pad-card:      14px;
  --pad-button:    13px;
}

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--charcoal); color: var(--bone);
  border: 0.5px solid var(--charcoal);
  border-radius: var(--radius-button);
  padding: var(--pad-button) calc(var(--pad-button) * 1.5);
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: opacity 120ms ease;
  text-decoration: none;
}
.btn-primary:hover  {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(44,42,40,0.45);
}
.btn-primary:active { transform: translateY(0); opacity: 0.85; }
.btn-primary, .btn-ghost { transition: transform 180ms cubic-bezier(0.2,0.7,0.2,1), box-shadow 180ms ease, opacity 120ms ease, background 180ms ease; }
.btn-ghost:hover  { background: rgba(44,42,40,0.06); transform: translateY(-1px); }
.btn-ghost:active { transform: translateY(0); }
.nav-cta { transition: transform 180ms cubic-bezier(0.2,0.7,0.2,1), box-shadow 180ms ease; }
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(44,42,40,0.45); opacity: 1; }

/* ===========================================================================
   Hero background. image-led; Bone fade on the left for headline legibility.
   =========================================================================== */
.hero {
  background:
    /* Bone overlay fading from solid on the left to transparent on the right */
    linear-gradient(to right,
      rgba(240, 230, 213, 0.95) 0%,
      rgba(240, 230, 213, 0.82) 35%,
      rgba(240, 230, 213, 0.10) 70%,
      rgba(240, 230, 213, 0) 100%),
    /* Subtle Persimmon glow following the cursor (kept for warmth) */
    radial-gradient(circle at calc(75% + var(--mx, 0px) * 0.08) calc(40% + var(--my, 0px) * 0.08),
      rgba(220, 122, 74, 0.18), transparent 55%),
    /* Hero image, right-anchored and cover-sized */
    url('/img/hero/woman-running-1.png') right center / cover no-repeat,
    var(--bone);
  transition: background-position 400ms ease-out;
}
.waitlist-bg::before { transition: transform 600ms cubic-bezier(0.2,0.7,0.2,1); }
.waitlist-bg::after  { transition: transform 600ms cubic-bezier(0.2,0.7,0.2,1); }
.waitlist[data-mx]:hover .waitlist-bg::before { transform: translate(calc(var(--mx,0px) * 0.4), calc(var(--my,0px) * 0.4)); }
.waitlist[data-mx]:hover .waitlist-bg::after  { transform: translate(calc(var(--mx,0px) * -0.4), calc(var(--my,0px) * -0.4)); }

/* ===========================================================================
   Health-metric animations (cherry-picked from v0 patterns)
   =========================================================================== */
@keyframes ic-wave   { 0%,100% { height: 6px; } 50% { height: 22px; } }
@keyframes ic-ripple { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes ic-ring-fill { from { stroke-dashoffset: 188; } to { stroke-dashoffset: 24; } }
@keyframes ic-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ic-line-draw { from { stroke-dashoffset: 220; } to { stroke-dashoffset: 0; } }

.metric-wave { display: inline-flex; gap: 3px; align-items: center; height: 22px; }
.metric-wave i {
  display: block; width: 3px; border-radius: 2px;
  background: var(--charcoal); animation: ic-wave 1.1s ease-in-out infinite;
}
.metric-wave i:nth-child(1) { animation-delay: 0s;    }
.metric-wave i:nth-child(2) { animation-delay: 0.10s; }
.metric-wave i:nth-child(3) { animation-delay: 0.20s; }
.metric-wave i:nth-child(4) { animation-delay: 0.30s; }
.metric-wave i:nth-child(5) { animation-delay: 0.40s; }

.metric-pulse { position: relative; width: 14px; height: 14px; display: inline-block; }
.metric-pulse::before, .metric-pulse::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--persimmon); animation: ic-ripple 1.6s ease-out infinite;
}
.metric-pulse::after { animation-delay: 0.6s; }
.metric-pulse i {
  position: absolute; inset: 4px; border-radius: 50%;
  background: var(--persimmon);
}

.metric-ring { width: 64px; height: 64px; }
.metric-ring circle.bg   { stroke: rgba(44,42,40,0.12); }
.metric-ring circle.val  {
  stroke: var(--charcoal); stroke-linecap: round;
  stroke-dasharray: 188; stroke-dashoffset: 188;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  animation: ic-ring-fill 1.6s cubic-bezier(0.2,0.7,0.2,1) forwards;
}

.dash-stat,
.dash-vitals,
.dash-radar,
.dash-streak {
  animation: ic-fade-up 600ms ease-out both;
}
.dash-stat-row .dash-stat:nth-child(1) { animation-delay: 0.30s; }
.dash-stat-row .dash-stat:nth-child(2) { animation-delay: 0.42s; }
.dash-vitals { animation-delay: 0.54s; }
.dash-radar  { animation-delay: 0.66s; }
.dash-streak { animation-delay: 0.78s; }

/* ===========================================================================
   Scroll choreography. section reveals, parallax, phase-aware fades
   =========================================================================== */

/* Section reveal. base state. JS adds .is-in to trigger. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms cubic-bezier(0.2,0.7,0.2,1),
              transform 900ms cubic-bezier(0.2,0.7,0.2,1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: translateY(0); }

/* Stagger children inside a .reveal-stagger container */
.reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 800ms cubic-bezier(0.2,0.7,0.2,1), transform 800ms cubic-bezier(0.2,0.7,0.2,1); }
.reveal-stagger.is-in > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
.reveal-stagger.is-in > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 140ms; }
.reveal-stagger.is-in > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 280ms; }
.reveal-stagger.is-in > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 420ms; }

/* Step rails draw from top when card reveals */
.step-card .rail { transform: scaleY(0); transform-origin: top; transition: transform 1100ms cubic-bezier(0.2,0.7,0.2,1) 200ms; }
.reveal-stagger.is-in .step-card .rail { transform: scaleY(1); }

/* Hero parallax. pin briefly via sticky inner, fade on scroll */
.hero { position: relative; overflow: hidden; }
.hero-inner { position: relative; will-change: transform, opacity; }

/* Hero dashboard. floats over the image; light parallax via JS */
.dashboard { will-change: transform; transition: transform 80ms linear; }

/* Phase-aware section transitions (Dawn↔Bone soft, Charcoal hard) */
.hero { position: relative; }
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 140px;
  background: linear-gradient(to bottom, transparent, var(--bone));
  pointer-events: none; z-index: 1;
}
.section { position: relative; }
/* Three Steps (bone) → Trust (charcoal). hard cut by spec */
/* Trust → Focus (charcoal). hard cut by spec */
/* Focus → Waitlist: soft fade in top of waitlist (charcoal up into bone) */
.waitlist::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0;
  height: 100px;
  background: linear-gradient(to bottom, var(--charcoal), transparent);
  opacity: 0.18; pointer-events: none; z-index: 2;
}
/* Waitlist → Footer (charcoal). hard cut by spec */

/* Trust band horizontal drift. JS sets --tx */
.gov-grid { transform: translateX(var(--tx, 0px)); transition: transform 120ms linear; will-change: transform; }

/* Waitlist bg ambient drift on scroll */
.waitlist-bg { will-change: transform; transition: transform 200ms linear; }

/* Form cascade */
.form-card.cascade > * { opacity: 0; transform: translateY(14px); transition: opacity 600ms cubic-bezier(0.2,0.7,0.2,1), transform 600ms cubic-bezier(0.2,0.7,0.2,1); }
.form-card.cascade.is-in > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 80ms; }
.form-card.cascade.is-in > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 180ms; }
.form-card.cascade.is-in > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 280ms; }
.form-card.cascade.is-in > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 380ms; }
.form-card.cascade.is-in > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 480ms; }
.form-card.cascade.is-in > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 580ms; }
.form-card.cascade.is-in > *:nth-child(7) { opacity: 1; transform: translateY(0); transition-delay: 680ms; }
.form-card.cascade.is-in > *:nth-child(n+8) { opacity: 1; transform: translateY(0); transition-delay: 780ms; }

/* Tile assemble. 2x2 grid, each from its own corner */
.tiles .tile { transition: opacity 900ms cubic-bezier(0.2,0.7,0.2,1), transform 900ms cubic-bezier(0.2,0.7,0.2,1); opacity: 0; }
.tiles .tile.recovery    { transform: translate(-24px, -24px); }
.tiles .tile.longevity   { transform: translate( 24px, -24px); }
.tiles .tile.performance { transform: translate(-24px,  24px); }
.tiles .tile.metabolic   { transform: translate( 24px,  24px); }
.tiles.is-in .tile { opacity: 1; transform: translate(0,0); }
.tiles.is-in .tile.recovery    { transition-delay: 0ms; }
.tiles.is-in .tile.longevity   { transition-delay: 120ms; }
.tiles.is-in .tile.performance { transition-delay: 240ms; }
.tiles.is-in .tile.metabolic   { transition-delay: 360ms; }

/* Reduced-motion: disable all parallax & reveals */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > *, .form-card.cascade > *, .tiles .tile,
  .step-card .rail {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .hero, .waitlist, .gov-grid, .waitlist-bg, .dashboard, .dash-stat,
  .dash-vitals, .dash-radar, .dash-streak, .focus-bg, .hero-inner {
    transform: none !important;
  }
  .streak-glyph { animation: none !important; }
  .hero::after, .trust::before, .waitlist::before { display: none; }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bone);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.7; }
button { font-family: inherit; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

/* ===========================================================================
   Section eyebrow (apothecary numeric mark). shared
   =========================================================================== */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 28px;
}
.eyebrow .num { font-weight: 400; }
.eyebrow .slash { opacity: 0.45; }
.eyebrow .label { opacity: 0.85; }
.eyebrow.inverse { color: var(--bone); }

/* Hairline divider */
.rule { height: 0.5px; background: var(--charcoal); width: 100%; }
.rule.faint { background: rgba(44,42,40,0.18); }
.rule.inverse { background: var(--bone); }
.rule.inverse.faint { background: rgba(240,230,213,0.22); }

/* ===========================================================================
   Navigation
   =========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(240,230,213,0.92);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 0.5px solid rgba(44,42,40,0.15);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 32px; max-width: 1280px; margin: 0 auto;
}
/* The brand SVG is a 1500×1500 square with content only in the middle band
   (y=582..927, ≈23% of the viewBox). Crop top/bottom whitespace via
   overflow + negative margin so the lockup reads at the right vertical
   density. Use display:inline-block (not flex) so the negative margin is
   the only vertical offset on the image. */
.nav-logo {
  display: inline-block;
  height: 32px;
  overflow: hidden;
  vertical-align: middle;
  line-height: 0;
}
.nav-logo img {
  height: 92px;
  width: auto;
  margin-top: -30px;
  display: block;
}
.nav-links { display: flex; gap: 32px; list-style: none; padding: 0; margin: 0; }
.nav-links a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--charcoal); color: var(--bone);
  border: 0.5px solid var(--charcoal);
  border-radius: 0;
  padding: 11px 18px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nav-cta:hover { opacity: 0.85; }

/* ===========================================================================
   01 / Hero. image-led; Bone left, content card below
   =========================================================================== */
.hero {
  position: relative;
  /* background defined upstream (image with Bone overlay) */
  min-height: 88vh;
  padding: 120px 0 100px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: end;
}
.hero-eyebrow .label { color: var(--charcoal); }
.hero-headline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(48px, 6vw, 84px);
  letter-spacing: 0.06em;
  line-height: 0.92;
  text-transform: uppercase;
  margin: 0 0 32px;
}
.hero-headline .hero-line {
  display: block;
  white-space: nowrap;
}
.hero-headline em {
  /* Change 1: Persimmon contrast fix per Circadian v1.9 §7.5.
     Heavy weight (700) + ALL CAPS + wider tracking raises effective Lc.
     If APCA Lc < 60 after render, fall back to charcoal (see note). */
  display: block;
  white-space: nowrap;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  font-size: 1em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--persimmon);
  margin-top: 6px;
  opacity: 1;
}
.hero-sub {
  font-size: 17px;
  line-height: 1.7;
  max-width: 56ch;
  margin: 0 0 36px;
}
.hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  color: var(--charcoal);
  border: 0.5px solid var(--charcoal);
  border-radius: var(--radius-button);
  padding: 13px 22px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.btn-ghost:hover { opacity: 0.75; }

.hero-meta {
  margin-top: 48px;
  display: flex; gap: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero-meta-key { opacity: 0.6; display: block; margin-bottom: 6px; }
.hero-meta-val { font-family: var(--font-body); font-size: 13px; letter-spacing: 0.02em; text-transform: none; opacity: 0.9; }

/* Dashboard side. Single cohesive monitoring panel that floats over the hero
   image. Header strap with status dot, 2x2 metric grid with internal
   hairlines, footer caption row. Reads like one device, not four cards. */
.hero-visual {
  position: relative;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
}
.hero-visual::before { content: none; }
.dashboard {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin-left: auto;
  background: rgba(240, 230, 213, 0.94);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border: 0.5px solid rgba(44, 42, 40, 0.22);
  border-radius: 14px;
  box-shadow: 0 30px 60px -30px rgba(44, 42, 40, 0.35);
  overflow: hidden;
  font-family: var(--font-body);
  animation: ic-fade-up 600ms ease-out both;
}
.dashboard-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 16px;
  border-bottom: 0.5px solid rgba(44, 42, 40, 0.18);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.dash-brand { display: inline-flex; align-items: center; gap: 10px; }
.dash-status {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--persimmon);
  box-shadow: 0 0 0 0 rgba(220, 122, 74, 0.6);
  animation: dash-pulse 2.4s ease-in-out infinite;
}
@keyframes dash-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 122, 74, 0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(220, 122, 74, 0); }
}
.dash-stamp { opacity: 0.6; }
/* Stat row: geo time + weather, side-by-side on a hairline. */
.dash-stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(44, 42, 40, 0.18);
  gap: 0.5px;
}
.dash-stat {
  background: rgba(240, 230, 213, 0.92);
  padding: 14px 18px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.dash-stat .lbl,
.dash-ecg .lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.65;
  display: inline-flex; align-items: center; gap: 8px;
}
.dash-stat .val,
.dash-ecg .val {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 24px;
  letter-spacing: 0.04em;
  line-height: 1;
}
.dash-stat .val sub,
.dash-ecg .val sub {
  font-size: 11px;
  opacity: 0.7;
  letter-spacing: 0.06em;
  margin-left: 4px;
}
.dash-stat .metric-meta {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: 0.6;
  text-transform: capitalize;
  margin-top: 2px;
}

/* Vitals row: Wellness gauge + Resting HR side-by-side, half-size. */
.dash-vitals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(44, 42, 40, 0.18);
  gap: 0.5px;
}
.vitals-cell {
  background: rgba(240, 230, 213, 0.92);
  padding: 10px 12px 8px;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 110px;
  position: relative;
}
.dash-section-mark {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 2px;
}

/* Compact wellness gauge. Half-arc SVG; colour resolves on score. */
.vitals-gauge { align-items: stretch; }
.gauge-wrap {
  position: relative;
  flex: 1;
  display: flex; align-items: center; justify-content: center;
}
.gauge-svg { width: 130px; height: 80px; overflow: visible; display: block; }
.gauge-track {
  fill: none;
  stroke: rgba(44, 42, 40, 0.10);
  stroke-width: 14;
  stroke-linecap: round;
}
.gauge-fill {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
  stroke-dasharray: 565;
  stroke-dashoffset: 565;
  transition: stroke-dashoffset 1.8s cubic-bezier(0.25, 0.8, 0.25, 1), stroke 0.8s;
}
.gauge-center {
  position: absolute;
  bottom: 0; left: 50%; transform: translateX(-50%);
  text-align: center;
}
.gauge-value {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 24px;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* Compact resting HR cell. ECG fills available height; bpm under it. */
.vitals-hr { justify-content: space-between; }
#dash-ecg-canvas {
  width: 100%;
  height: 44px;
  display: block;
}
.vitals-val {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: 0.04em;
  line-height: 1;
}
.vitals-val sub {
  font-size: 10px;
  opacity: 0.7;
  letter-spacing: 0.06em;
  margin-left: 4px;
}

/* Radar block: centred canvas, compact padding. */
.dash-radar {
  background: rgba(240, 230, 213, 0.92);
  padding: 10px 16px 6px;
  border-top: 0.5px solid rgba(44, 42, 40, 0.18);
  text-align: center;
  position: relative;
}
.dash-radar .dash-section-mark { display: block; text-align: left; }
#dash-radar-canvas {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: inline-block;
}

/* Biomarker row: 4 compact chips with status dot + key + value. */
.dash-biomarkers {
  background: rgba(240, 230, 213, 0.92);
  padding: 10px 14px 12px;
  border-top: 0.5px solid rgba(44, 42, 40, 0.18);
}
.dash-biomarkers .dash-section-mark { display: block; text-align: left; }
.bm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.bm-chip {
  display: flex; flex-direction: column; gap: 4px;
  padding: 6px 8px;
  border: 0.5px solid rgba(44, 42, 40, 0.15);
  border-radius: 4px;
  background: rgba(240, 230, 213, 0.5);
  position: relative;
  min-width: 0;
}
.bm-dot {
  width: 6px; height: 6px; border-radius: 50%;
  display: inline-block;
}
.bm-good  { background: var(--pistachio); }
.bm-watch { background: var(--persimmon); }
.bm-key {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bm-val {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
}
.bm-val sub {
  font-size: 8px;
  opacity: 0.6;
  letter-spacing: 0.04em;
  margin-left: 2px;
}

/* Streak counter pill. Compact horizontal: glyph + number + best. */
.dash-streak {
  background: rgba(240, 230, 213, 0.92);
  padding: 12px 16px;
  border-top: 0.5px solid rgba(44, 42, 40, 0.18);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
}
.streak-glyph {
  width: 32px; height: 32px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    rgba(229, 210, 219, 0.9) 0%,
    var(--persimmon) 60%,
    var(--charcoal) 120%);
  position: relative;
  flex-shrink: 0;
  animation: streak-pulse 1.6s ease-in-out infinite alternate;
}
.streak-glyph::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 0.5px solid rgba(220, 122, 74, 0.4);
  opacity: 0.7;
}
@keyframes streak-pulse {
  0%   { transform: scale(1) rotate(-2deg); }
  100% { transform: scale(1.08) rotate(2deg); }
}
.streak-body {
  display: inline-flex; align-items: baseline; gap: 6px;
}
.streak-number {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 32px;
  letter-spacing: 0.04em;
  line-height: 1;
  background: linear-gradient(160deg, var(--lola) 0%, var(--persimmon) 60%, var(--wisteria) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.streak-unit {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.65;
}
.streak-best {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
  text-align: right;
}
.streak-best strong { font-weight: 400; opacity: 0.9; }
.dashboard-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px;
  border-top: 0.5px solid rgba(44, 42, 40, 0.18);
  background: rgba(240, 230, 213, 0.7);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.65;
}
.dash-foot-val { font-style: italic; letter-spacing: 0.08em; text-transform: none; opacity: 0.85; }

/* ===========================================================================
   Section base
   =========================================================================== */
.section { padding: 120px 0; }
.section-charcoal { background: var(--charcoal); color: var(--bone); }
.section-charcoal .eyebrow .label { color: var(--bone); }

.section-head {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: end;
  margin-bottom: 64px;
}
.section-head--stack {
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
.section-h .h-line { display: block; white-space: nowrap; }
.section-note {
  border-left: 2px solid var(--persimmon);
  padding: 12px 20px;
  background: rgba(229, 210, 219, 0.35);
  max-width: 56ch;
  border-radius: 0 4px 4px 0;
}
.section-note--inverse {
  background: rgba(240, 230, 213, 0.06);
  border-left-color: var(--persimmon);
}
.section-note-mark {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 6px;
}
.section-note-body {
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
  font-style: italic;
  font-weight: 300;
  opacity: 0.9;
}
.section-h {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(40px, 5vw, 68px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 0.95;
  margin: 0;
}
.section-h em {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.6em;
  display: block;
  margin-top: 14px;
  opacity: 0.85;
}
.section-lede {
  font-size: 17px;
  line-height: 1.7;
  max-width: 56ch;
  margin: 0;
  opacity: 0.85;
}

/* ===========================================================================
   05 / Bridge. Static brand statement that sits between Focus and Trust;
   a clean pause beat between two Charcoal sections. The accordion variant
   adds a scroll-triggered staggered reveal: each line slides up from
   below and fades in 280ms apart as the section enters the viewport.
   =========================================================================== */
.bridge {
  background: var(--bone);
  padding: 96px 0;
  text-align: center;
}
.bridge-statement {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(26px, 3.4vw, 46px);
  letter-spacing: 0.01em;
  line-height: 1.4;
  margin: 0 auto;
  color: var(--charcoal);
}
.bridge-line { display: block; white-space: nowrap; }
.bridge-statement em {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  color: var(--persimmon);
  letter-spacing: 0;
}

/* Accordion stagger: each line starts hidden and translates up; reveals
   320ms apart on intersection. */
.bridge-accordion .bridge-line {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 720ms cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 720ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
.bridge-accordion.is-in .bridge-line { opacity: 1; transform: translateY(0); }
.bridge-accordion.is-in .bridge-line:nth-child(1) { transition-delay: 80ms; }
.bridge-accordion.is-in .bridge-line:nth-child(2) { transition-delay: 400ms; }
.bridge-accordion.is-in .bridge-line:nth-child(3) { transition-delay: 720ms; }

@media (max-width: 720px) {
  .bridge { padding: 64px 0; }
  .bridge-statement { font-size: clamp(17px, 4.6vw, 24px); }
}

@media (prefers-reduced-motion: reduce) {
  .bridge-accordion .bridge-line {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ===========================================================================
   03 / Three Steps. elevated cards with phase-coded rails
   =========================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  perspective: 1200px;
}
.step-card {
  background: var(--bone);
  border: 0.5px solid rgba(44,42,40,0.18);
  border-radius: var(--radius-card);
  padding: 32px 28px 28px;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
  min-height: 460px;
  transform-style: preserve-3d;
  transition: transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 200ms ease;
  will-change: transform;
}
.step-card:hover {
  box-shadow: 0 30px 60px -28px rgba(44, 42, 40, 0.35);
}
.tilt-shine {
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 200ms ease;
  background: radial-gradient(circle at 50% 50%,
    rgba(229, 210, 219, 0.45) 0%,
    transparent 55%);
}
.step-card:hover .tilt-shine { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .step-card { transition: none !important; transform: none !important; }
  .tilt-shine { display: none; }
}
.step-card .rail {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 6px;
}
.step-card.dawn  .rail { background: var(--persimmon); }
.step-card.day   .rail { background: var(--pistachio); }
.step-card.dusk  .rail { background: var(--wisteria); }
.step-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 88px;
  letter-spacing: 0.04em;
  line-height: 0.9;
  margin: 0 0 8px;
  color: var(--charcoal);
  opacity: 0.95;
}
.step-mark {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 22px;
  opacity: 0.7;
}
.step-title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.25;
  margin: 0 0 14px;
}
.step-body {
  font-size: 15px;
  line-height: 1.75;
  margin: 0 0 24px;
  color: var(--charcoal);
  opacity: 0.85;
}
.step-link {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-top: 0.5px solid rgba(44,42,40,0.2);
  padding-top: 18px;
}

/* ===========================================================================
   03 / Trust band. Charcoal canvas with subtle drifting blobs
   =========================================================================== */
/* 05 / Trust band. Solid Charcoal . no blobs, no gradient overlays.
   A single Persimmon hairline rule across the section head provides the
   only colour accent. The previous gradient field never transitioned
   cleanly into adjacent Bone sections; clean Charcoal on both sides
   reads as continuous with §04 Focus and breaks cleanly into §06 Team. */
.trust {
  background: var(--charcoal);
  color: var(--bone);
  padding: 120px 0;
  position: relative;
}
.trust-bg { display: none; }
.trust .container { position: relative; z-index: 1; }
.trust .eyebrow,
.trust .section-h,
.trust .section-lede { color: var(--bone); }
.trust .section-lede { opacity: 0.8; }

.gov-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  border-top: 0;
}
.gov-card {
  padding: 0;
  background: rgba(240,230,213,0.04);
  border: 0.5px solid rgba(240,230,213,0.18);
  border-radius: var(--radius-card);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; flex-direction: column;
  transition: background 240ms ease, border-color 240ms ease, transform 240ms cubic-bezier(0.2,0.7,0.2,1);
  overflow: hidden;
}
.gov-card:hover {
  background: rgba(240,230,213,0.08);
  border-color: rgba(240,230,213,0.35);
  transform: translateY(-3px);
}
.gov-summary {
  list-style: none;
  cursor: pointer;
  padding: 26px 56px 24px 24px;
  position: relative;
  outline: none;
}
.gov-summary::-webkit-details-marker { display: none; }
.gov-summary:focus-visible { outline: 2px solid var(--persimmon); outline-offset: -2px; }
.gov-plus {
  position: absolute;
  top: 28px; right: 24px;
  width: 16px; height: 16px;
}
.gov-plus::before, .gov-plus::after {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px; background: var(--bone); opacity: 0.7;
  transition: transform 320ms cubic-bezier(0.2,0.7,0.2,1);
}
.gov-plus::after { transform: rotate(90deg); }
.gov-card[open] .gov-plus::after { transform: rotate(0deg); }
.gov-detail {
  padding: 0 24px 24px;
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 360ms cubic-bezier(0.2,0.7,0.2,1),
              padding-bottom 360ms cubic-bezier(0.2,0.7,0.2,1);
}
.gov-detail > * { overflow: hidden; }
.gov-card[open] .gov-detail { grid-template-rows: 1fr; }
.gov-mark {
  /* Change 3: section mark on Charcoal opacity 0.7 → 0.85 for Lc ≥ 60. */
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 14px;
}
.gov-title {
  font-family: var(--font-body);
  font-weight: 400; /* on-system: never bold */
  font-size: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.25;
  margin: 0;
}
.gov-body {
  font-size: 15px;
  line-height: 1.75;
  opacity: 0.85;
  margin: 12px 0 20px;
}
.gov-facts { list-style: none; padding: 0; margin: auto 0 0; }
.gov-facts li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 0;
  border-top: 0.5px solid rgba(240,230,213,0.18);
  gap: 16px;
}
.gov-facts li:last-child { border-bottom: 0.5px solid rgba(240,230,213,0.18); }
.gf-key {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.65;
}
.gf-val {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  text-align: right;
}

/* ===========================================================================
   04 / Clinical Focus. Charcoal canvas, four phase tiles
   =========================================================================== */
.focus {
  background: var(--charcoal);
  color: var(--bone);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.focus-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.focus-bg::before, .focus-bg::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  will-change: transform;
  transition: transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.focus-bg::before {
  background: var(--pistachio);
  width: 520px; height: 520px;
  top: 10%; left: -120px;
  opacity: 0.10;
  transform: translateY(var(--fy, 0px));
}
.focus-bg::after {
  background: var(--persimmon);
  width: 460px; height: 460px;
  bottom: 10%; right: -100px;
  opacity: 0.10;
  transform: translateY(calc(var(--fy, 0px) * -1));
}
/* Focus follows the Charcoal ribbon (§03) so the top is a continuous dark
   surface; just a thin hairline. The bottom blends into Trust (also dark)
   via a slight color drift so the seam disappears. */
.focus::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0;
  height: 60px;
  background: linear-gradient(to bottom, rgba(44, 42, 40, 0.5), transparent);
  pointer-events: none;
  z-index: 0;
}
.focus .container { position: relative; z-index: 1; }
.focus .section-h,
.focus .section-lede,
.focus .h-line { color: var(--bone); }
.focus .section-note { background: rgba(240, 230, 213, 0.06); }
.focus .section-note-body { color: var(--bone); }
.focus .section-note-mark { color: var(--bone); }
.focus .section-lede { opacity: 0.8; }

.tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.tile {
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
  min-height: 420px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 32px;
  border: 0.5px solid rgba(240,230,213,0.18);
  isolation: isolate;
  transition: transform 200ms ease;
}
.tile:hover { transform: translateY(-2px); }
.tile-bg {
  position: absolute; inset: 0; z-index: -1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tile:hover .tile-bg { transform: scale(1.03); }
.tile-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(44, 42, 40, 0.18) 0%,
    rgba(44, 42, 40, 0.55) 45%,
    rgba(44, 42, 40, 0.92) 100%);
}
.tile.recovery    .tile-bg { background-image: url('/img/pathways/path-recovery.png'); }
.tile.metabolic   .tile-bg { background-image: url('/img/pathways/path-metabolic.png'); }
.tile.longevity   .tile-bg { background-image: url('/img/pathways/cover-abstract-2.png'); }
.tile.performance .tile-bg { background-image: url('/img/pathways/plant-tube-1.png'); }
/* Performance + Metabolic: crop to the top 50% of the source image. The
   image is rendered at 200% height so the bottom half spills below the
   tile and gets clipped by overflow:hidden on the tile. */
.tile.performance .tile-bg,
.tile.metabolic   .tile-bg {
  background-size: auto 200%;
  background-position: center top;
}

.tile-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(40px, 4.4vw, 56px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 16px;
  color: var(--bone);
}
.tile-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--bone);
  opacity: 0.85;
  margin: 0 0 18px;
  max-width: 50ch;
}
.tile-cite {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: 12px;
  color: var(--bone);
  opacity: 0.7;
  display: block;
  margin-bottom: 14px;
}
.tile-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
  border-top: 0.5px solid rgba(240,230,213,0.4);
  padding-top: 14px;
  display: inline-block;
  align-self: flex-start;
}
.focus-footnote {
  /* Change 3: body text on Charcoal opacity 0.6 → 0.85 for Lc ≥ 60. */
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: 12px;
  opacity: 0.85;
  margin-top: 32px;
  max-width: 80ch;
}
.focus-footnote a { text-decoration: underline; text-underline-offset: 3px; }

/* ===========================================================================
   05 / Team. Bone canvas with subtle drifting blobs, three lead cards
   =========================================================================== */
.team {
  background: var(--bone);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.team-bg {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}
.team-bg::before, .team-bg::after, .team-bg span {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  will-change: transform;
  transition: transform 600ms cubic-bezier(0.2,0.7,0.2,1);
}
.team-bg::before {
  background: var(--lola);
  width: 460px; height: 460px;
  top: -120px; left: -100px;
  opacity: 0.32;
  transform: translate(var(--bx, 0px), var(--by, 0px));
}
.team-bg::after {
  background: var(--pistachio);
  width: 540px; height: 540px;
  bottom: -200px; right: -140px;
  opacity: 0.26;
  transform: translate(calc(var(--bx, 0px) * -1), calc(var(--by, 0px) * -1));
}
.team-bg span {
  background: var(--sail);
  width: 360px; height: 360px;
  top: 35%; left: 50%;
  opacity: 0.18;
  display: block;
}
.team .container { position: relative; z-index: 1; }

.leads {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.lead-card {
  border-radius: 14px;
  background: rgba(240,230,213,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 0 0.5px rgba(44, 42, 40, 0.18);
  padding: 36px 28px 28px;
  display: flex; flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: transform 240ms cubic-bezier(0.2,0.7,0.2,1),
              box-shadow 240ms ease,
              background 240ms ease;
}
.lead-card:hover {
  transform: translateY(-4px);
  background: rgba(240,230,213,0.92);
  box-shadow: 0 0 0 0.5px rgba(44,42,40,0.32),
              0 18px 40px -22px rgba(44,42,40,0.45);
}
.lead-card:focus-within { outline: 2px solid var(--persimmon); outline-offset: 2px; }
.lead-card .accent {
  position: absolute; inset: 0 0 auto 0;
  height: 4px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 600ms cubic-bezier(0.2,0.7,0.2,1);
}
.lead-card:hover .accent,
.reveal-stagger.is-in .lead-card .accent { transform: scaleX(1); }
.accent-dawn { background: linear-gradient(90deg, #E5D2DB 0%, #DC7A4A 100%); }
.accent-day  { background: linear-gradient(90deg, #B5DBF1 0%, #C5D49A 100%); }
.accent-dusk { background: linear-gradient(90deg, #DC7A4A 0%, #7A5E78 100%); }

.lead-num {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; opacity: 0.55;
  margin-top: 4px;
}
.lead-card__avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 300; font-size: 32px;
  letter-spacing: 0.04em;
  color: var(--charcoal);
  position: relative;
  transition: transform 400ms cubic-bezier(0.2,0.7,0.2,1);
}
.lead-card:hover .lead-card__avatar { transform: scale(1.06); }
.lead-card:hover .lead-card__avatar--photo { transform: scale(1.25); }
.lead-card__avatar::after {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 0.5px solid rgba(44,42,40,0.25);
  opacity: 0;
  transition: opacity 240ms ease, transform 600ms cubic-bezier(0.2,0.7,0.2,1);
  transform: scale(0.85);
}
.lead-card:hover .lead-card__avatar::after { opacity: 1; transform: scale(1); }
.avatar-lola      { background: var(--lola); }
.avatar-pistachio { background: var(--pistachio); }
.avatar-sail      { background: var(--sail); }

.lead-name {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(22px, 2.4vw, 26px);
  letter-spacing: 0.08em; text-transform: uppercase;
  line-height: 1; margin: 4px 0 0;
}
.lead-role {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0.7;
  margin: 0;
}
.lead-cred {
  font-family: var(--font-body); font-weight: 300;
  font-size: 13px; line-height: 1.5; margin: 0;
  font-style: italic;
}
.lead-bio {
  font-family: var(--font-body); font-weight: 300;
  font-size: 14px; line-height: 1.65; margin: 0;
  opacity: 0.85;
}
.lead-tag {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.22em;
  text-transform: uppercase; opacity: 0.65;
  border-top: 0.5px solid rgba(44,42,40,0.2);
  padding-top: 16px;
}

@media (max-width: 720px) {
  .leads { grid-template-columns: 1fr; }
}

/* ===========================================================================
   06 / FAQ. Two-column interactive layout, cycling phase accent
   =========================================================================== */
.faqs {
  background: var(--bone);
  padding: 120px 0;
  position: relative;
}
.faqs .container {
  max-width: 1080px;
  position: relative; z-index: 1;
}

/* Card-style FAQ stack. Mirrors the .gov-card pattern from the Trust band
   (CLINICAL GOVERNANCE, END TO END), adapted for the Bone canvas: bordered
   cards with a mono mark + question + plus indicator in the summary, and
   a smoothly-revealing body via the grid 0fr→1fr trick. */
.faq-cards {
  display: flex; flex-direction: column;
  gap: 16px;
}
.faq-card {
  background: rgba(229, 210, 219, 0.18);
  border: 0.5px solid rgba(44, 42, 40, 0.18);
  border-radius: var(--radius-card);
  display: flex; flex-direction: column;
  transition: background 240ms ease,
              border-color 240ms ease,
              transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 240ms ease;
  overflow: hidden;
}
.faq-card:hover {
  background: rgba(229, 210, 219, 0.32);
  border-color: rgba(44, 42, 40, 0.32);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -28px rgba(44, 42, 40, 0.35);
}
.faq-card[open] {
  background: rgba(229, 210, 219, 0.45);
  border-color: rgba(44, 42, 40, 0.32);
}
.faq-summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 56px 22px 24px;
  position: relative;
  outline: none;
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary:focus-visible { outline: 2px solid var(--persimmon); outline-offset: -2px; }
.faq-mark {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 12px;
}
.faq-title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(17px, 1.5vw, 20px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.3;
  margin: 0;
  color: var(--charcoal);
}
.faq-plus {
  position: absolute;
  top: 28px; right: 24px;
  width: 16px; height: 16px;
}
.faq-plus::before, .faq-plus::after {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px; background: var(--charcoal);
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
  opacity: 0.7;
}
.faq-plus::after { transform: rotate(90deg); }
.faq-card[open] .faq-plus::after { transform: rotate(0deg); }
.faq-detail {
  padding: 0 24px;
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 360ms cubic-bezier(0.2, 0.7, 0.2, 1),
              padding-bottom 360ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.faq-detail > * { overflow: hidden; }
.faq-card[open] .faq-detail {
  grid-template-rows: 1fr;
  padding-bottom: 24px;
}
.faq-body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.75;
  color: var(--charcoal);
  opacity: 0.88;
  margin: 0;
  max-width: 72ch;
}

@media (max-width: 720px) {
  .faq-summary { padding: 22px 48px 20px 20px; }
  .faq-detail { padding: 0 20px; }
  .faq-card[open] .faq-detail { padding-bottom: 20px; }
  .faq-plus { top: 24px; right: 20px; }
  .faq-title { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-card, .faq-plus::before, .faq-plus::after, .faq-detail {
    transition: none !important;
  }
}
.waitlist {
  position: relative;
  padding: 120px 0;
  overflow: hidden;
  background: var(--bone);
}
.waitlist-bg {
  position: absolute; inset: 0;
  background: var(--grad-dawn-v);
  opacity: 0.55;
  pointer-events: none;
}
.waitlist-bg::before, .waitlist-bg::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}
.waitlist-bg::before {
  background: var(--persimmon);
  width: 480px; height: 480px;
  top: -160px; right: -120px;
  opacity: 0.35;
}
.waitlist-bg::after {
  background: var(--lola);
  width: 520px; height: 520px;
  bottom: -200px; left: -160px;
  opacity: 0.5;
}
.waitlist .container { position: relative; z-index: 1; }

/* Centered header band above the 2-col grid. The H2 + lede + capacity sit
   here so the form below has full visual room to breathe. */
.waitlist-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.waitlist-badge {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 7px 14px;
  border: 0.5px solid rgba(44, 42, 40, 0.25);
  border-radius: 999px;
  background: rgba(240, 230, 213, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.waitlist-lede {
  font-size: 17px;
  line-height: 1.65;
  margin: 0;
  max-width: 56ch;
  opacity: 0.85;
}
.capacity {
  margin-top: 8px;
  display: flex; flex-direction: column; gap: 10px;
  width: 100%;
  max-width: 480px;
}
.cap-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.cap-key { display: inline-flex; align-items: center; gap: 8px; }
.cap-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--persimmon);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.85); }
}
.cap-bar {
  height: 4px; border-radius: 2px;
  background: rgba(44,42,40,0.12);
  overflow: hidden;
}
.cap-fill {
  height: 100%; background: var(--charcoal);
  width: 0%;
  transition: width 1600ms cubic-bezier(0.2,0.7,0.2,1);
}

/* Change 7: cohort copy replaces the fabricated capacity bar. */
.waitlist-cohort-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
  opacity: 0.85;
  margin: 12px 0 0;
  max-width: 56ch;
  line-height: 1.6;
}

.markers {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 56px;
}
.marker-pill {
  display: inline-flex; align-items: center; gap: 10px;
  border: 0.5px solid rgba(44,42,40,0.25);
  border-radius: 999px;
  padding: 8px 14px;
  background: rgba(240,230,213,0.5);
}
.m-key {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.m-dom {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.6;
}

.waitlist-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 880px) {
  .waitlist-grid { grid-template-columns: 1fr; gap: 36px; }
  .form-card { padding: 32px 24px 28px; }
  .waitlist-header { margin-bottom: 36px; }
}
.waitlist-value { padding-top: 6px; }
.value-eyebrow--mid { margin-top: 28px; }

/* ───── Tier ladder ───── */
.tier-ladder {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  position: relative;
}
.tier-ladder::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(90deg, rgba(229,210,219,0.55) 0%, rgba(220,122,74,0.75) 100%);
  z-index: 0;
}
.tier {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.tier-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FAF5EC;
  border: 2px solid rgba(44,42,40,0.30);
}
.tier--goal .tier-dot {
  background: #DC7A4A;
  border-color: #DC7A4A;
  box-shadow: 0 0 0 4px rgba(220,122,74,0.18);
}
.tier-name {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
  opacity: 0.78;
}
.tier--goal .tier-name { opacity: 1; font-weight: 600; }
.tier-pts {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--charcoal);
  opacity: 0.55;
}
@media (max-width: 540px) {
  .tier-ladder {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .tier-ladder::before {
    top: 0; bottom: 0; left: 7px; right: auto; width: 2px; height: auto;
    background: linear-gradient(180deg, rgba(229,210,219,0.55) 0%, rgba(220,122,74,0.75) 100%);
  }
  .tier {
    flex-direction: row;
    gap: 12px;
    text-align: left;
  }
  .tier-pts { margin-left: auto; }
}

/* ───── How to move up: action cards ───── */
.moves {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 10px;
}
.move {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  background: #FFFFFF;
  border: 1px solid rgba(44,42,40,0.12);
  border-radius: 12px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.move:hover { border-color: rgba(44,42,40,0.30); box-shadow: 0 6px 18px rgba(44,42,40,0.04); }
.move--locked {
  background: rgba(44,42,40,0.03);
  border-style: dashed;
}
.move--locked:hover { border-color: rgba(44,42,40,0.20); box-shadow: none; }
.move-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(220,122,74,0.18);
  color: var(--charcoal);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.move--locked .move-num {
  background: transparent;
  border: 1px dashed rgba(44,42,40,0.30);
  opacity: 0.6;
}
.move-body { display: flex; flex-direction: column; gap: 4px; }
.move-h {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  color: var(--charcoal);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.move-pts {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8E2F1E;
  white-space: nowrap;
}
.move--locked .move-pts { color: var(--charcoal); opacity: 0.55; }
.move-sub {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.55;
  color: var(--charcoal);
  opacity: 0.75;
}
.moves-footnote {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.6;
  color: var(--charcoal);
  opacity: 0.7;
  margin: 16px 0 0;
}

.value-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 14px;
}

.stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.stat {
  border-top: 0.5px solid rgba(44,42,40,0.25);
  padding-top: 14px;
}
.stat-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 56px;
  letter-spacing: 0.04em;
  line-height: 1;
}
.stat-unit {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
  display: block;
  margin-top: 8px;
}

.bullets { list-style: none; padding: 0; margin: 0; }
.bullets li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: start;
  padding: 18px 0;
  border-top: 0.5px solid rgba(44,42,40,0.18);
}
.bullets li:last-child { border-bottom: 0.5px solid rgba(44,42,40,0.18); }
.b-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.6;
  padding-top: 4px;
}
.b-h {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.02em;
  display: block;
  margin-bottom: 4px;
}
.b-sub {
  font-size: 14px;
  line-height: 1.65;
  opacity: 0.8;
}

/* Form. Visual focal point of the Waitlist section. */
.form-card {
  background: var(--bone);
  border: 0.5px solid rgba(44, 42, 40, 0.3);
  border-radius: var(--radius-card);
  padding: 44px 40px 36px;
  position: relative;
  box-shadow:
    0 0 0 6px rgba(240, 230, 213, 0.6),
    0 30px 70px -32px rgba(44, 42, 40, 0.4);
}
.form-card::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--persimmon);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.form-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
  margin-top: 4px;
}
.form-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--persimmon);
}
.form-h {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 32px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 0.95;
  margin: 0 0 12px;
}
.form-sub {
  font-size: 14px; line-height: 1.6;
  margin: 0 0 24px; opacity: 0.85;
}
/* Change 4: intent affirmation tile group. Calm-UX pill row; required field. */
.intent-group {
  border: none; padding: 0; margin: 0 0 20px;
}
.intent-legend {
  display: block;
  margin-bottom: 10px;
}
.intent-tiles {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.intent-tile {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.intent-tile input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.intent-tile-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 9px 16px;
  border: 0.5px solid rgba(44,42,40,0.3);
  border-radius: 999px;
  background: transparent;
  color: var(--charcoal);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
  white-space: nowrap;
  user-select: none;
}
.intent-tile input[type="radio"]:checked + .intent-tile-label {
  background: var(--charcoal);
  color: var(--bone);
  border-color: var(--charcoal);
}
.intent-tile:hover .intent-tile-label {
  border-color: rgba(44,42,40,0.65);
}
.intent-group--error .intent-tile-label {
  border-color: var(--persimmon);
}
.intent-tile input[type="radio"]:focus-visible + .intent-tile-label {
  outline: 2px solid var(--persimmon);
  outline-offset: 2px;
}
@media (max-width: 720px) {
  .intent-tiles { flex-direction: column; }
  .intent-tile-label { width: 100%; text-align: center; }
}

.form-field {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px;
}
.form-label {
  /* Change 3: form label opacity 0.6 → 0.85 for Lc ≥ 60 on Bone. */
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
}
.form-card input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid rgba(44, 42, 40, 0.4);
  padding: 12px 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  color: var(--charcoal);
  outline: 0;
  transition: border-color 120ms;
}
.form-card input:focus { border-color: var(--persimmon); border-bottom-width: 1px; }
.form-card input::placeholder { color: rgba(44, 42, 40, 0.4); }
.form-card .btn-primary,
.form-card .form-submit {
  width: 100%;
  margin-top: 20px;
  padding: 18px 22px;
  font-size: 13px;
  letter-spacing: 0.08em;
  background: var(--charcoal);
  color: var(--bone);
}
.form-card .btn-primary:hover { background: var(--persimmon); border-color: var(--persimmon); }
.form-secondary {
  text-align: center;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.form-secondary a { text-decoration: underline; text-underline-offset: 3px; opacity: 0.7; }
.trust-row {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: flex; flex-direction: column; gap: 6px;
}
.trust-row li {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: 12px;
  display: flex; align-items: center; gap: 8px;
  opacity: 0.75;
}
.trust-row .t-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--charcoal); opacity: 0.5;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ===========================================================================
   Change 5: confirmation card + circadian gradient sweep animation.
   Change 6: first-24h preview timeline.
   =========================================================================== */
.confirm-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--bone);
  border: 0.5px solid rgba(44,42,40,0.18);
  padding: 28px 28px 24px;
  margin-bottom: 8px;
}
.confirm-h {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.01em;
  color: var(--charcoal);
  margin: 8px 0 10px;
}
/* Circadian phase gradient sweep: 4px top bar, slides in from left over 1.2s. */
.confirm-gradient-sweep {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    #F2C89B 0%,
    #DC7A4A 30%,
    #E5B87A 55%,
    #7A5E78 80%,
    #2C2A28 100%
  );
  transform: translateX(-100%);
  transition: none;
}
.confirm-gradient-sweep--run {
  transform: translateX(0);
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Change 6: first-24h preview timeline. */
.next-timeline {
  margin-top: 16px;
}
.next-timeline-heading {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--charcoal);
  opacity: 0.85;
  margin: 0 0 14px;
}
.next-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  border-top: 0.5px solid rgba(44,42,40,0.18);
}
.next-row:last-child { border-bottom: 0.5px solid rgba(44,42,40,0.18); }
.next-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--charcoal);
  opacity: 0.85;
}
.next-body {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--charcoal);
  opacity: 0.85;
}

/* ===========================================================================
   08 / Footer. Charcoal
   =========================================================================== */
.footer { background: var(--charcoal); color: var(--bone); padding: 96px 0 32px; }
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 56px;
  border-bottom: 0.5px solid rgba(240,230,213,0.18);
}
/* Footer logo. Same SVG-crop technique as the nav, sized larger. */
.footer-logo {
  display: inline-block;
  height: 56px;
  overflow: hidden;
  vertical-align: middle;
  line-height: 0;
  margin-bottom: 24px;
}
.footer-logo img { height: 168px; width: auto; margin-top: -54px; display: block; }
.footer-tagline {
  /* Change 3: body text on Charcoal opacity 0.7 → 0.85 for Lc ≥ 60. */
  font-size: 14px; line-height: 1.7;
  opacity: 0.85;
  max-width: 36ch;
}
.footer-col-title {
  /* Change 3: footer section title opacity 0.55 → 0.85 for Lc ≥ 60. */
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
  display: block;
  margin-bottom: 20px;
}
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-links a { font-family: var(--font-body); font-size: 14px; opacity: 0.85; }
.footer-bottom {
  padding-top: 32px;
  display: flex; gap: 32px; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap;
}
.footer-legal {
  /* Change 3: footer legal opacity 0.55 → 0.85 for Lc ≥ 60. */
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
  margin: 0;
}
.footer-disclaimer {
  /* Change 3: footer disclaimer opacity 0.55 → 0.85 for Lc ≥ 60. */
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: 11px;
  line-height: 1.6;
  opacity: 0.85;
  margin: 0;
  max-width: 70ch;
}

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width: 960px) {
  .hero { padding: 80px 0 60px; min-height: auto; }
  .hero-grid,
  .section-head,
  .waitlist-grid,
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  .steps,
  .gov-grid,
  .tiles,
  .stat-row { grid-template-columns: 1fr; }
  .gov-card { border-right: 0; }
  .nav-links { display: none; }
  .hero-visual { min-height: 360px; }
  .section { padding: 80px 0; }
  .trust, .focus, .waitlist, .ftcta, .team, .faqs { padding: 80px 0; }
}

/* ===========================================================================
   Iteration 2 additions. Founding Cohort CTA, photo avatar, image hero,
   smoother section transitions, scroll-driven blob phase shifts, mobile.
   =========================================================================== */

/* 03 / Founding Cohort CTA. compact pre-Trust band on Bone canvas. */
/* 03 / Founding Cohort ribbon. High-contrast Charcoal band with a Persimmon
   glow that sits between two Bone sections; designed to interrupt the page
   and drive the click. */
.ftcta-ribbon {
  position: relative;
  width: 100%;
  background:
    radial-gradient(circle at 85% 50%, rgba(220, 122, 74, 0.55) 0%, rgba(220, 122, 74, 0) 50%),
    radial-gradient(circle at 15% 50%, rgba(122, 94, 120, 0.35) 0%, rgba(122, 94, 120, 0) 55%),
    var(--charcoal);
  color: var(--bone);
  border-top: 0.5px solid rgba(44, 42, 40, 0.4);
  border-bottom: 0.5px solid rgba(44, 42, 40, 0.4);
  overflow: hidden;
}
.ftcta-ribbon::before,
.ftcta-ribbon::after {
  content: '';
  position: absolute; left: 0; right: 0;
  height: 1px;
  background: rgba(240, 230, 213, 0.18);
}
.ftcta-ribbon::before { top: 8px; }
.ftcta-ribbon::after  { bottom: 8px; }
.ftcta-ribbon-inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  padding: 48px 40px;
}
.ftcta-h {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(24px, 3vw, 40px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.0;
  margin: 0;
  color: var(--bone);
}
.ftcta-cta {
  /* Change 2: text ON Persimmon must be White per Circadian §7.4.
     Bone #F0E6D5 on Persimmon #DC7A4A = Lc 47.5 (fail).
     White #FFFFFF on Persimmon #DC7A4A = Lc ~63 (pass). */
  flex-shrink: 0;
  white-space: nowrap;
  background: var(--persimmon);
  color: #FFFFFF;
  border-color: var(--persimmon);
  padding: 16px 28px;
  font-size: 13px;
  letter-spacing: 0.08em;
}
.ftcta-cta:hover { background: var(--bone); color: var(--charcoal); border-color: var(--bone); }

/* 06 / Team. photo-variant avatar (img element) */
.lead-card__avatar--photo {
  display: block;
  object-fit: cover;
  object-position: center 18%;
  transform: scale(1.18);
  transform-origin: center 30%;
  background: var(--bone);
  border: 0.5px solid rgba(44, 42, 40, 0.18);
}

/* Smooth section bleed. Ribbon to Charcoal: subtle gradient at the seam. */
.ftcta-ribbon::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: rgba(44, 42, 40, 0.18);
  pointer-events: none;
}

/* Cursor + scroll driven phase blob. Hero's cursor highlight already lives
   in the .hero stack above. Trust/Team/FAQ blobs already shift on cursor.
   Add a soft Y drift on team/faq blobs as the user scrolls. */
.team-bg, .faqs-bg, .trust-bg {
  transition: transform 300ms cubic-bezier(0.2, 0.7, 0.2, 1),
              filter 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Mobile refinements. */
@media (max-width: 720px) {
  .hero {
    padding: 64px 0 56px;
    /* On mobile, image becomes full-bleed below the text rather than fading right */
    background:
      linear-gradient(to bottom,
        rgba(240, 230, 213, 0.95) 0%,
        rgba(240, 230, 213, 0.92) 50%,
        rgba(240, 230, 213, 0.10) 100%),
      url('/img/hero/woman-running-1.png') center bottom / cover no-repeat,
      var(--bone);
    min-height: auto;
  }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-headline { font-size: clamp(40px, 10vw, 56px); }
  .hero-sub { font-size: 16px; }
  .hero-meta { gap: 16px; flex-wrap: wrap; }
  .hero-visual { min-height: 320px; }
  .dashboard { max-width: 100%; }
  .dashboard-grid { grid-template-columns: 1fr 1fr; }
  .metric { padding: 14px 14px 12px; min-height: 92px; }
  .metric .val { font-size: 24px; }
  .ftcta-ribbon-inner { grid-template-columns: 1fr; gap: 20px; padding: 36px 24px; text-align: left; }
  .ftcta-h { font-size: clamp(22px, 5.6vw, 28px); }
  .ftcta-cta { width: 100%; justify-content: center; }
  .gov-summary { padding: 22px 48px 20px 20px; }
  .gov-detail { padding: 0 20px 20px; }
  .gov-title { font-size: 18px; }
  .tile { min-height: 320px; padding: 24px; }
  .tile-title { font-size: 28px; }
  .nav-inner { padding: 6px 20px; }
  .nav-logo { height: 26px; }
  .nav-logo img { height: 76px; margin-top: -25px; }
  .nav-cta { padding: 9px 14px; font-size: 11px; }
  .leads { grid-template-columns: 1fr; }
  .lead-card { padding: 28px 24px; }

  /* Section headers wrap naturally on mobile. The .h-line nowrap
     constraint causes overflow at viewport widths under ~520px because
     the longest line ("Three steps to a clinical", "Clinical
     governance,") exceeds available column width at any tappable font
     size. Render the lines inline so the browser can wrap on natural
     word boundaries. */
  .container { padding: 0 20px; }
  .section { padding: 80px 0; }
  .section-h {
    font-size: clamp(30px, 7.4vw, 42px);
    letter-spacing: 0.04em;
    line-height: 1.05;
  }
  .section-h .h-line {
    display: inline;
    white-space: normal;
  }
  .section-h .h-line + .h-line::before {
    content: ' ';
    white-space: normal;
  }
  .section-head--stack { gap: 18px; margin-bottom: 40px; }
  .section-note { padding: 12px 16px; }
  .section-note-body { font-size: 14px; line-height: 1.6; }
  .section-lede { font-size: 15px; }

  /* Trust + Focus section padding tightens too. */
  .trust, .focus { padding: 80px 0; }
  .gov-grid { grid-template-columns: 1fr; gap: 14px; }
  .focus-footnote { font-size: 12px; }

  /* FAQ + Waitlist + Bridge: tighten padding to match. */
  .faqs { padding: 80px 0; }
  .waitlist { padding: 80px 0; }
  .bridge { padding: 56px 0; }
  .bridge-statement { line-height: 1.4; }
}


/* ============================================================
   QUIZ POP-UP (2026-05-13); landing-page funnel
   Triggers via inline script in index.html: IntersectionObserver
   on .focus (4 clinical categories) OR 5-sec fallback, whichever
   fires first. One-shot per session; localStorage persists
   dismissal across return visits.
   Sentence case + ALL CAPS only; no Title Case (DESIGN.md §1.7).
   ============================================================ */

.quiz-popup {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.quiz-popup.is-visible {
  display: flex;
}
.quiz-popup.is-visible .quiz-popup-card {
  animation: ic-popup-in 0.34s cubic-bezier(.2,.8,.2,1) both;
}
.quiz-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(44, 42, 40, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
  animation: ic-popup-fade 0.34s ease both;
}
.quiz-popup-card {
  position: relative;
  z-index: 1;
  background: var(--bone);
  border: 1px solid rgba(44, 42, 40, 0.10);
  border-radius: 14px;
  padding: clamp(26px, 4vw, 36px);
  max-width: 460px;
  width: 100%;
  box-shadow: 0 32px 72px rgba(44, 42, 40, 0.28);
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--font-body);
  color: var(--charcoal);
}
.quiz-popup-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: rgba(44, 42, 40, 0.55);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.quiz-popup-close:hover {
  background: rgba(44, 42, 40, 0.06);
  color: var(--charcoal);
}
.quiz-popup-mark {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--persimmon);
  padding-right: 42px; /* clear of the close button */
}
.quiz-popup-h {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 300;
  letter-spacing: -0.018em;
  line-height: 1.05;
  margin: 0;
  color: var(--charcoal);
}
.quiz-popup-body {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(44, 42, 40, 0.78);
  margin: 0;
}
.quiz-popup-list {
  list-style: none;
  margin: 0;
  padding: 12px 0;
  border-top: 0.5px solid rgba(44, 42, 40, 0.16);
  border-bottom: 0.5px solid rgba(44, 42, 40, 0.16);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.quiz-popup-list li {
  display: grid;
  grid-template-columns: 14px 1fr;
  column-gap: 12px;
  align-items: start;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--charcoal);
}
.quiz-popup-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--persimmon);
  margin-top: 7px;
  justify-self: center;
}
.quiz-popup-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.quiz-popup-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 24px;
  background: var(--charcoal);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  border: 1.5px solid var(--charcoal);
  transition: transform .15s ease, box-shadow .15s ease;
}
.quiz-popup-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(44, 42, 40, 0.22);
}
.quiz-popup-dismiss {
  background: transparent;
  border: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(44, 42, 40, 0.55);
  cursor: pointer;
  padding: 6px 4px;
  transition: color .15s ease;
}
.quiz-popup-dismiss:hover { color: var(--charcoal); }

@keyframes ic-popup-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ic-popup-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)     scale(1);     }
}
@media (prefers-reduced-motion: reduce) {
  .quiz-popup.is-visible .quiz-popup-card,
  .quiz-popup-backdrop { animation: none; }
}
@media (max-width: 480px) {
  .quiz-popup-card { padding: 22px; gap: 12px; }
  .quiz-popup-mark { font-size: 9.5px; letter-spacing: 0.20em; padding-right: 36px; }
  .quiz-popup-h { font-size: 24px; }
  .quiz-popup-list { padding: 10px 0; }
  .quiz-popup-primary { height: 48px; font-size: 11px; }
}