@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap");

/*
 * Bolt Health — mid-fi wireframe.
 *
 * Wireframe phase: grayscale only. Primary CTA = solid dark; "dark sections" = mid-gray
 * (deferred from navy until hi-fi). Single neutral sans at the correct premium type
 * scale (display H1 88-128px desktop, 56-72px mobile). Display-serif decision is
 * documented in design-system.html but NOT applied here.
 *
 * Brand color tokens (electric blue / navy / light blue / white) and bento system
 * are documented as future-state tokens only. They remain in this file so design-system.html
 * can render them as future references, but they are NOT used on marketing pages
 * during the wireframe phase.
 */

:root {
  /* Monochrome wireframe palette (shadcn zinc–like) */
  --bg: #ffffff;
  --surface: #ffffff;
  --card: #f4f4f5;
  --fg: #09090b;
  --muted: #71717a;
  --muted-2: #52525b;
  --border: #e4e4e7;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-xl: 32px;
  --radius-2xl: 48px;
  --card-gap: var(--grid-gap);
  --card-gap-lg: 36px; /* large paired cards / pricing columns — upper clamp bound */

  /* Mid-gray "dark section" surface for the wireframe phase. In hi-fi this becomes
     --brand-navy. Light text on this surface uses --on-dark / --on-dark-muted. */
  --dark-surface: #2a2a2e;
  --dark-surface-2: #3a3a3f;
  --on-dark: #ffffff;
  --on-dark-muted: rgba(255, 255, 255, 0.72);
  --on-dark-line: rgba(255, 255, 255, 0.18);

  /* Single sans stack sitewide (display-serif decision deferred to hi-fi). */
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* Layout widths — section tiers: see `.section-frame--full|large|md|sm` */
  --maxw: 1280px;       /* legacy alias; equals --section-max-md */
  --maxw-narrow: 640px; /* legacy alias; equals --section-max-sm */
  --copy-max: 720px;    /* readable copy column inside a fullbleed section */
  --page-padding: clamp(16px, 3vw, 30px); /* fluid inset for vertical rhythm / compact UI (non-section gutters) */
  --section-gutter: clamp(16px, 5vw, 96px); /* horizontal inset for md / large / sm section frames */
  --section-gutter-sm: 16px; /* compact inset for encapsulated blocks (e.g. interior heroes) */
  --section-gutter-offset: max(0px, calc(var(--section-gutter) - var(--section-gutter-sm)));
  --card-pad: clamp(20px, 2.5vw, 36px); /* inner padding for feature cards — between gutter-sm and gutter-offset */
  --section-max-md: var(--maxw);
  --section-max-sm: var(--maxw-narrow);
  --edge-pad: var(--section-gutter); /* alias — prefer --section-gutter in new rules */
  --grid-inner-max: 1728px; /* 1920px viewport − 2 × 96px gutters; controls card-section max inner width */
  --section-vpad-scale: 1.25;
  /* Editorial hero: mat around inset panel + homepage fixed-nav vertical offset */
  --hero-frame-inset: 0px;

  /* DEFERRED — Brand color tokens. Documented for hi-fi reference; do NOT deploy in wireframes.
     Rule of use (hi-fi): electric blue ≤10% of any screen; navy carries weight on light;
     light blue is soft-surface only; white is canvas. */
  --brand-electric: #0070E7;        /* Bolt Blue — primary CTA + key accents only */
  --brand-electric-hover: #005dc4;
  --brand-navy: #00183C;            /* United Navy — display type on light, dark-section bg in hi-fi */
  --brand-light-blue: #82C8E5;      /* Beach Blue — large soft surfaces, chart secondaries */
  --brand-yellow: #FFEB3B;          /* brand yellow */
  --brand-pink: #FF3BF2;            /* brand pink */
  --brand-black: #000000;           /* brand black */
  --brand-gradient: linear-gradient(to right, #0070E7, #00183C); /* Bolt Blue → United Navy */

  /* Legacy aliases used by the bento reference example (kept so design-system.html still
     renders the punchy-blocking pattern as a future-state demo). Not used on marketing pages. */
  --brand-royal: var(--brand-electric);
  --brand-royal-hover: var(--brand-electric-hover);
  --bento-surface: var(--brand-light-blue);
  --bento-surface-muted: #b3c0cf;
  --pill-surface: #ffffff;
  --bento-radius: 16px;
  --section-card-radius: 20px;
  --pill-radius: 999px;

  /* How it works — image well (legacy; superseded by step grid below). */
  --hiw-visual-bg: #ececec;
  --hiw-visual-radius: 14px;

  /* Nav shell is temporarily unstyled while it is rebuilt. */
  --header-height: 0px;
  --header-shell-pad: 0px;
  --header-shell-pad-tight: 0px;
  --nav-pill-outer: 0px;
  --site-header-layout-h: 0px;
  /* Sticky rail offset: navbar height + section top padding + extra visual breathing room */
  --sticky-rail-extra: clamp(20px, 2.5vw, 36px);
  --sticky-rail-top: calc(var(--site-header-layout-h, 96px) + var(--section-gutter) + var(--sticky-rail-extra));
  --nav-inner-pad: 0.75rem;

  /* Footer “slide up” reveal — fixed layer height; must match .footer-reveal */
  --footer-reveal-height: min(52vh, 520px);

  /* Hero h1 to subtext gap */
  --hero-h1-gap: clamp(16px, 2.5vw, 36px);

  /* Type: 400 / 600 weights only. Three fluid body sizes. Display scale wired in below at H1/H2. */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --text-label: clamp(11px, 1vw, 12px);
  --text-body-sm: clamp(13px, 1.25vw, 14px);
  --text-body: clamp(16px, 1.7vw, 18px);
  --text-body-lg: clamp(18px, 2.5vw, 22px);
  --text-price: clamp(40px, 4.5vw, 56px);

  /* Heading scales: simplified to a compact set. */
  --heading-h1: clamp(38px, 5.2vw, 64px);
  --heading-h2: clamp(28px, 3.9vw, 46px);
  --heading-h2-long: clamp(20px, 3vw, 36px);
  --heading-h3: clamp(24px, 2.8vw, 32px);
  --heading-card: clamp(24px, 2.2vw, 34px);
  --display-h1: clamp(42px, 6vw, 84px);
  --display-h1-home: clamp(44px, 6vw, 88px);
  --display-h2: clamp(32px, 4.32vw, 58px);
  --display-h3: clamp(26px, 3.44vw, 46px);

  /* Error / destructive tokens */
  --error: #DC2626;
  --error-hover: #b91c1c;

  /* Grid metric variables — single source of truth for .modern-grid geometry.
     --grid-gap  : column-gap used by .modern-grid (mirrors the hardcoded value it replaces).
     --grid-col  : one column width = (inner width − all gaps) ÷ column count.
                   Mobile (6-col): (min(100vw,1920px) − 2×gutter − 5×gap) / 6
     --grid-col-inner : one column minus one gap — flush inner content alignment.
     --grid-col-outer : one column plus one gap — one full grid track. */
  --grid-gap: 16px;
  --grid-col: calc((min(100vw, 1920px) - 2 * var(--section-gutter) - 5 * var(--grid-gap)) / 6);
  --grid-col-inner: calc(var(--grid-col) - var(--grid-gap)); /* one column minus one gap — flush inner content */
  --grid-col-outer: calc(var(--grid-col) + var(--grid-gap)); /* one column plus one gap — one full grid track */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
}

body {
  font-family: var(--sans);
  font-size: var(--text-body);
  letter-spacing: 0;
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Stack main + footer above the fixed .footer-reveal layer (z-index: 0).
   Main must be opaque: transparent main would "see through" to the fixed strip
   in un-backgrounded areas (e.g. .section--split without .section, raw sections). */
main {
  position: relative;
  z-index: 1;
  background: var(--bg);
  display: flow-root;
}

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

button {
  font-family: inherit;
  cursor: pointer;
}

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

/* ---------- Typography (sans-serif only) ---------- */

h1,
h2,
h3 {
  font-family: var(--sans);
  font-weight: var(--font-semibold);
  letter-spacing: -0.03em;
  margin: 0;
}

h1 {
  font-size: var(--heading-h1);
  line-height: 1.12;
}

h2 {
  font-size: var(--heading-h2);
  line-height: 1.18;
  letter-spacing: 0;
}

h2.type--h2-long,
.type--h2-long h2,
.type--h2-long {
  font-size: var(--heading-h2-long);
  max-width: 25ch;
}

h3 {
  font-size: var(--heading-h3);
  line-height: 1.22;
}

p {
  margin: 0;
}

/* ---------- Orphan / widow prevention ----------
 * Balance headings so line lengths are evened out and no single
 * short word is stranded on the last line. Paragraphs and list
 * items use `pretty`, which costs more to layout but specifically
 * avoids last-line orphans in body copy.
 */
h1,
h2,
h3,
h4,
h5,
h6,
.type--display,
.type--display-2 {
  text-wrap: balance;
}

p,
.lead,
li {
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--sans);
  font-size: var(--text-body-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: var(--font-normal);
  display: none !important;
}

.muted {
  color: var(--muted-2);
}

.lead {
  font-size: var(--text-body-lg);
  font-weight: var(--font-medium);
  color: var(--muted-2);
  line-height: 1.5;
}

.hero-sub {
  font-size: var(--text-body-lg);
  font-weight: 500;
  color: var(--muted-2);
  line-height: 1.55;
}

@media (max-width: 767px) {
  :root {
    /* Mobile rhythm: 16px page gutter (QA: tighter edge on phones). */
    --page-padding: 16px;
    --section-gutter: 16px;
    --section-gutter-sm: 12px;
    --section-vpad-scale: 1.4;
    /* QA: pin 6-col grid tokens to flat values on mobile.
       section-gutter=16, grid-gap=16, grid-col=32, grid-col-outer=48 (col+gap). */
    --grid-col: 32px;
    --grid-col-inner: 16px;  /* col - gap = 32 - 16 */
    --grid-col-outer: 48px;  /* col + gap = 32 + 16 */
  }
}

@media (min-width: 768px) {
  :root {
    /* Desktop grid: 12-col layout with wider gap — mirrors .modern-grid at this breakpoint */
    --grid-gap: 24px;
    --grid-col: calc((min(100vw, 1920px) - 2 * var(--section-gutter) - 11 * var(--grid-gap)) / 12);
  }
}

@media (min-width: 1024px) {
  :root {
    --page-padding: clamp(24px, 2.6vw, 36px);
    --section-gutter-sm: 24px;
  }

}

/* QA (md): tighten vertical section rhythm on the homepage for tablets. */
@media (min-width: 768px) and (max-width: 1023px) {
  .page-home {
    --section-vpad-scale: 1;
  }
}

/* ---------- Layout ---------- */

.container {
  /* Default section width tier: md — matches .section-frame--md */
  width: 100%;
  max-width: var(--section-max-md);
  margin: 0 auto;
  padding: 0 var(--section-gutter);
  box-sizing: border-box;
}

.container-narrow {
  /* Same bounds as .section-frame--sm — narrow forms / single-column copy */
  width: 100%;
  max-width: var(--section-max-sm);
  margin: 0 auto;
  padding: 0 var(--section-gutter);
  box-sizing: border-box;
}

/*
 * Section frame tiers (consistent horizontal bands inside <section>):
 *   --full   edge-to-edge on this wrapper (no horizontal gutter)
 *   --large  fluid width + gutter; below 1024px capped like md, above 1024px uncapped (editorial)
 *   --md     max-width --section-max-md + gutter (same defaults as .container)
 *   --sm     max-width --section-max-sm + gutter (same defaults as .container-narrow)
 */
.section-frame--full {
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

.section-frame--large {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--section-gutter);
  padding-right: var(--section-gutter);
  max-width: var(--section-max-md);
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .section-frame--large {
    max-width: none;
  }
}

.section-frame--md {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--section-gutter);
  padding-right: var(--section-gutter);
  max-width: var(--section-max-md);
  box-sizing: border-box;
}

.section-frame--sm {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--section-gutter);
  padding-right: var(--section-gutter);
  max-width: var(--section-max-sm);
  box-sizing: border-box;
}

/* ---------- Modern column grid contract (homepage + agent-safe primitives) ---------- */

.modern-grid {
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--section-gutter);
  padding-right: var(--section-gutter);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--grid-gap);
}

.layout-col {
  min-width: 0;
  grid-column: span 6;
}

.span-m-3 {
  grid-column: span 3;
}

.span-m-6 {
  grid-column: span 6;
}

.d-only {
  display: none;
}

/* Grid debug overlay (toggle with body.grid-debug) */
body.grid-debug .modern-grid {
  position: relative;
  --debug-cols: 12;
  --debug-gap: var(--grid-gap);
  --debug-col-w: calc((100% - (var(--debug-cols) - 1) * var(--debug-gap)) / var(--debug-cols));
}

body.grid-debug .modern-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background-image: linear-gradient(
    to right,
    rgba(0, 82, 204, 0.12) 0,
    rgba(0, 82, 204, 0.12) var(--debug-col-w),
    rgba(0, 82, 204, 0.35) var(--debug-col-w),
    rgba(0, 82, 204, 0.35) calc(var(--debug-col-w) + 1px),
    transparent calc(var(--debug-col-w) + 1px),
    transparent calc(var(--debug-col-w) + var(--debug-gap))
  );
  background-size: calc(var(--debug-col-w) + var(--debug-gap)) 100%;
  background-repeat: repeat-x;
}

body.grid-debug .modern-grid > .layout-col {
  outline: 1px dashed rgba(0, 82, 204, 0.45);
  outline-offset: -1px;
}

@media (min-width: 768px) {
  .modern-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    row-gap: var(--grid-gap);
  }

  .layout-col {
    grid-column: span 12;
  }

  .span-d-1 {
    grid-column: span 1;
  }

  .span-d-2 {
    grid-column: span 2;
  }

  .span-d-3 {
    grid-column: span 3;
  }

  .span-d-4 {
    grid-column: span 4;
  }

  .span-d-5 {
    grid-column: span 5;
  }

  .span-d-6 {
    grid-column: span 6;
  }

  .span-d-7 {
    grid-column: span 7;
  }

  .span-d-8 {
    grid-column: span 8;
  }

  .span-d-10 {
    grid-column: span 10;
  }

  .span-d-12 {
    grid-column: span 12;
  }

  .d-only {
    display: block;
  }

  body.grid-debug .modern-grid {
    --debug-gap: 24px;
  }
}

/* QA (md): widen `span-d-8` centered columns on tablet (768–1023px) so readable
   content isn't squeezed into the desktop 8/12 (~66%) column with wide empty
   margins. Collapse the flanking `d-only span-d-2` spacers to one column each so
   content spans 10 of 12 and stays centered (1 + 10 + 1 = 12). Targets the
   `span-d-8` + `d-only span-d-2` centered-readable-column pattern wherever it is
   used — PricingPage, BloodTestingPage, legal/* and the blog VideoPostLayout,
   which all share this exact pattern, so the widening is consistent across them.
   Desktop (≥1024px) and mobile (<768px, where the spacers are hidden and content
   is full-width) are unaffected. */
@media (min-width: 768px) and (max-width: 1023px) {
  .modern-grid > .layout-col.d-only.span-d-2 {
    grid-column: span 1;
  }

  .modern-grid > .layout-col.span-d-8 {
    grid-column: span 10;
  }
}



/* Homepage / editorial: fluid band at desktop (matches .section-frame--large) */
@media (min-width: 1024px) {
  .container.section-frame--large {
    max-width: none;
  }
}


.section {
  padding: calc(var(--section-gutter) * var(--section-vpad-scale)) 0;
}

/* Full-bleed panel; inner .container supplies horizontal gutter. Tighter vertical padding. */
.section-encase {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: calc(16px * var(--section-vpad-scale)) 0;
}

@media (min-width: 640px) {
  .section-encase {
    padding: calc(20px * var(--section-vpad-scale)) 0;
  }
}

@media (min-width: 1024px) {
  .section-encase {
    padding: calc(24px * var(--section-vpad-scale)) 0;
  }
}

/* Peptides band: less space above/below than default .section */
.section-peptides {
  padding-top: calc(32px * var(--section-vpad-scale));
  padding-bottom: calc(32px * var(--section-vpad-scale));
}

@media (min-width: 640px) {
  .section-peptides {
    padding-top: calc(48px * var(--section-vpad-scale));
    padding-bottom: calc(48px * var(--section-vpad-scale));
  }
}

@media (min-width: 1024px) {
  .section-peptides {
    padding-top: calc(56px * var(--section-vpad-scale));
    padding-bottom: calc(56px * var(--section-vpad-scale));
  }
}

.stack > * + * {
  margin-top: 16px;
}

.stack-lg > * + * {
  margin-top: 24px;
}

.stack-xl > * + * {
  margin-top: 40px;
}

.divider {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: 0;
}

/* ---------- Header / Nav ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5000;
  isolation: isolate;
  padding-inline: 0;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.site-header + main {
  padding-top: 0;
}

.site-header > .nav {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.site-header > .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.site-header .logo {
  display: flex;
  align-items: center;
  transition: opacity 0.18s ease;
}

.site-header .logo img {
  height: 28px;
  width: auto;
  display: block;
}

/* The logo is inline SVG with fill:currentColor, so colour is driven here. */
.logo-mark {
  height: 28px;
  width: auto;
  display: block;
  color: var(--brand-electric);
  transition: color 0.18s ease;
}

.logo:hover .logo-mark {
  color: var(--brand-navy);
}

@media (max-width: 1023px) {
  .logo-mark { height: 22px; }
}

.site-header .logo.is-on-dark {
  opacity: 1;
}

.site-header .logo.is-on-dark .logo-mark {
  color: var(--on-dark);
}

.site-header.is-on-dark > .nav > .nav-links a,
.site-header.is-on-dark > .nav > .nav-links button {
  color: rgba(255, 255, 255, 0.88);
}

.site-header.is-on-dark > .nav > .nav-links a:hover,
.site-header.is-on-dark > .nav > .nav-links button:hover {
  color: #fff;
}

.site-header .nav-links {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header .nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 10;
}

.site-header > .nav > .nav-links {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--pill-radius);
  padding-top: 2px;
  padding-bottom: 2px;
  box-shadow: 0 8px 24px rgba(9, 9, 11, 0.08);
  padding-left: clamp(18px, 2vw, 28px);
  padding-right: clamp(18px, 2vw, 28px);
}

.site-header > .nav > .nav-right .btn {
  white-space: nowrap;
}

.site-header > .nav > .nav-right .btn-primary {
  background: var(--brand-electric);
  border-color: var(--brand-electric);
  color: #fff;
}

.site-header > .nav > .nav-right .btn-primary:hover {
  background: var(--brand-electric-hover);
  border-color: var(--brand-electric-hover);
}

.site-header .nav-toggle {
  display: none;
}

.mobile-menu {
  display: none;
}

@media (max-width: 1023px) {
  /* Defensive: keep the mobile drawer from being clipped by header wrappers. */
  .site-header,
  .site-header > .nav,
  .site-header .nav-right {
    overflow: visible;
  }

  .site-header > .nav {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding-left: var(--section-gutter-sm);
    padding-right: var(--section-gutter-sm);
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .site-header + main {
    padding-top: 0;
  }

  .site-header > .nav > .nav-links {
    display: none !important;
  }

  .site-header .logo img {
    height: 22px;
  }

  .funnel-header-inner .logo img {
    height: 22px;
  }

  .site-header > .nav > .nav-right .btn-primary {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 14px;
    font-size: var(--text-body-sm);
  }

  /* QA: Get Your T-Score lives in the navbar at lg/xl only.
     At md and below, it surfaces inside the mobile dropdown menu instead. */
  .site-header > .nav > .nav-right .nav-right__tscore {
    display: none;
  }

  .site-header .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--pill-radius);
    background: rgba(255, 255, 255, 0.72);
    color: var(--fg);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Touches should hit the <button>, not SVG internals (WebKit can miss the click target otherwise). */
  .site-header .nav-toggle svg {
    pointer-events: none;
  }

  .mobile-menu {
    position: fixed;
    top: var(--mobile-menu-top, 56px);
    right: var(--section-gutter-sm, 16px);
    width: min(88vw, 380px);
    /* Below .nav when closed so the toggle stays clickable (Safari hit-testing + backdrop-filter). */
    z-index: 1;
    display: block;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    border-left: 1px solid rgba(9, 9, 11, 0.12);
    border-right: 0;
    border-top: 0;
    border-bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    /* No backdrop blur while closed — Safari can leave a tall composited layer that eats taps. */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 16px 32px rgba(9, 9, 11, 0.12);
    transform-origin: var(--mobile-menu-origin-x, calc(100% - 20px)) var(--mobile-menu-origin-y, 44px);
    transform: scale(0.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    max-height: var(--mobile-menu-max-h, min(78vh, calc(100vh - 24px)));
    overflow-y: auto;
    transition:
      transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.2s ease,
      visibility 0s linear 0.28s;
  }

  .mobile-menu.open {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 5100;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    transition:
      transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.2s ease;
  }

  .mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1px;
  }

  .mobile-menu ul a {
    display: block;
    padding: 8px 12px;
    color: var(--fg);
    border-radius: 10px;
    transition: background-color 0.16s ease, color 0.16s ease;
  }

  .mobile-menu ul a:hover,
  .mobile-menu ul a:focus-visible {
    background: rgba(17, 24, 39, 0.08);
  }

  .mobile-menu ul a:active {
    background: rgba(17, 24, 39, 0.12);
  }

  .mobile-menu ul a[aria-current="page"] {
    background: rgba(17, 24, 39, 0.14);
    font-weight: var(--font-semibold);
  }

  /* Match desktop dropdown emphasis for treatment links. */
  .mobile-menu .mobile-menu__plan > a {
    font-size: calc(var(--text-body-sm) * 2);
    line-height: 1.05;
    letter-spacing: -0.02em;
    padding: 10px 12px;
  }

  .mobile-menu .mobile-subhead {
    margin-top: 8px;
    padding-top: 8px;
    font-size: var(--text-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .mobile-menu .mobile-menu-divider {
    height: 1px;
    margin: 4px 0 10px;
    background: var(--border);
  }

  .mobile-menu .plan-sub {
    display: none;
    margin-top: 3px;
    font-size: var(--text-body-sm);
    color: var(--muted);
  }

  .site-header.menu-open::after {
    content: none;
  }

  body.menu-open {
    overflow: hidden;
  }
}

@media (min-width: 1024px) {
  .site-header {
    top: 0;
    padding-inline: var(--section-gutter-sm);
    overflow: visible;
  }

  .site-header > .nav {
    width: 100%;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    overflow: visible;
  }

  .site-header > .nav > .nav-links {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    border: 0;
    gap: 16px;
    overflow: visible;
  }

  .site-header > .nav > .logo,
  .site-header > .nav > .nav-links,
  .site-header > .nav > .nav-right {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .site-header > .nav {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    column-gap: 24px;
    row-gap: 0;
  }

  .site-header > .nav > .logo {
    grid-column: 1 / span 3;
    justify-self: start;
    min-width: 0;
  }

  .site-header > .nav > .nav-links {
    display: flex;
    grid-column: 5 / span 4;
    justify-self: center;
    align-items: center;
    gap: 16px;
    width: fit-content;
    min-width: max-content;
  }

  .site-header > .nav > .nav-right {
    grid-column: 10 / span 3;
    justify-self: end;
    justify-content: flex-end;
    min-width: 0;
  }

  .site-header > .nav > .nav-links a,
  .site-header > .nav > .nav-links button {
    color: var(--muted-2);
    font-size: var(--text-body-sm);
    font-weight: var(--font-medium);
    background: transparent;
    border: 0;
    border-radius: 8px;
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.18s ease;
  }


  .site-header > .nav > .nav-links a:hover,
  .site-header > .nav > .nav-links button:hover,
  .site-header > .nav > .nav-links a:focus-visible,
  .site-header > .nav > .nav-links button:focus-visible {
    background: transparent;
    color: var(--brand-electric);
  }

  .site-header.is-on-dark > .nav > .nav-links a,
  .site-header.is-on-dark > .nav > .nav-links button {
    color: rgba(255, 255, 255, 0.88);
  }

  .site-header.is-on-dark > .nav > .nav-links a:hover,
  .site-header.is-on-dark > .nav > .nav-links button:hover {
    color: #fff;
  }
}

/* lg only (1024–1279px): the CTA group ("Get Your T-Score" + "Get Started")
   is wide and overflows its grid track to the left, colliding with the centered
   nav links. Give the CTA group more columns, tighten the nav-link spacing, and
   shift the links left so the two never overlap. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-header > .nav > .nav-links {
    grid-column: 4 / span 4;
    justify-self: start;
    gap: 8px;
  }

  .site-header > .nav > .nav-links a,
  .site-header > .nav > .nav-links button {
    padding: 6px 6px;
  }

  .site-header > .nav > .nav-right {
    grid-column: 8 / span 5;
  }
}

.chevron {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -1px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

[aria-expanded="true"] .chevron {
  transform: rotate(-135deg);
  margin-top: 1px;
}

/* Our Plans megamenu (desktop): 4 columns — featured card, plan rows, learn more, other */

.plans-menu {
  --plans-menu-pad: 20px;
  position: absolute;
  top: 4px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 5200;
  display: none;
  padding: var(--plans-menu-pad);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  box-shadow: none;
  box-sizing: border-box;
  text-align: left;
}

/* Bridge pointer gap between nav row and panel */
.plans-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 6px;
}

.plans-menu.open,
.nav-links:has([data-plans-trigger]:focus) .plans-menu {
  display: block;
}

.plans-mega {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 1fr;
  gap: 24px 32px;
  align-items: stretch;
  width: 100%;
  max-width: var(--section-max-md);
  margin-inline: auto;
}

/* Homepage variant: 8-column split (4/2/2) without featured card */
.plans-mega--home {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  max-width: calc(var(--section-max-md) * 0.6667);
}

.plans-mega--home .plans-mega__col--plans {
  grid-column: span 4;
}

.plans-mega--home .plans-mega__col--stack {
  grid-column: span 2;
}

/* Center megamenu under the nav link group (desktop) */
@media (min-width: 1024px) {
  .site-header > .nav > .nav-links {
    position: relative;
  }

  .plans-menu-host {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    height: 0;
    overflow: visible;
    pointer-events: none;
  }

  .plans-menu-host .plans-menu {
    pointer-events: auto;
  }
}

/* Keep homepage dropdown sized to 8 columns, not full-width 12 */
.plans-menu-host .plans-menu,
.nav-links .plans-menu {
  width: min(calc(100vw - (2 * var(--section-gutter))), calc(var(--section-max-md) * 0.6667 + (2 * var(--plans-menu-pad))));
}

/* Force treatment links to render as a vertical stacked list */
.site-header > .nav > .nav-links .plans-menu__link {
  display: flex;
  width: 100%;
}

.plans-mega--home .plans-menu__link {
  padding: 14px 12px;
  margin: 0;
}

.plans-mega--home .plans-mega__label {
  padding-left: 0;
  margin-left: 0;
}

/* Homepage dropdown: make "What We Treat" links much larger */
.plans-mega--home .plans-menu__body {
  gap: 6px;
}

.plans-mega--home .plans-menu__body .plan-title {
  font-size: calc(var(--text-body-sm) * 1.875);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.plans-mega--home .plan-sub {
  font-size: var(--text-body);
  line-height: 1.35;
}

.nav-links .plans-mega__featured,
.nav-links .plans-menu__link,
.nav-links .plans-mega__link {
  font-size: inherit;
  background: transparent;
  border: 0;
  text-shadow: none;
}

.plans-mega__label {
  font-size: var(--text-body-sm);
  font-weight: var(--font-normal);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}

/* Featured card (left) */
.plans-mega__featured {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 200px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--fg);
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.nav-links .plans-mega__featured {
  display: block;
  width: 100%;
  padding: 0;
  gap: 0;
  color: var(--fg);
}

.plans-mega__featured:hover {
  opacity: 0.96;
}

.plans-mega__featured-media {
  position: relative;
  height: 100%;
  min-height: 200px;
  border-radius: inherit;
  overflow: hidden;
}

.plans-mega__featured-visual {
  height: 100%;
  min-height: 200px;
  width: 100%;
  border: 0;
  border-radius: inherit;
  background: #ebebeb;
}

.plans-mega__featured-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 14px 16px;
  background: linear-gradient(
    to top,
    rgba(235, 235, 235, 0.96) 0%,
    rgba(235, 235, 235, 0.35) 55%,
    transparent 100%
  );
}

.plans-mega__featured-kicker {
  display: block;
  font-size: var(--text-label);
  font-weight: var(--font-semibold);
  letter-spacing: 0.02em;
  opacity: 1;
  color: var(--muted);
  margin-bottom: 6px;
}

.plans-mega__featured-title {
  display: block;
  font-size: var(--text-body);
  font-weight: var(--font-semibold);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--fg);
}

/* Plans column: row = thumb + copy */
.plans-mega__col--plans {
  min-width: 0;
}

.plans-mega__col--plans .plans-menu__link {
  margin-bottom: 4px;
}

.plans-mega__col--plans .plans-menu__link:last-child {
  margin-bottom: 0;
}

.plans-menu__link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 10px;
  margin: 0 -10px;
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease;
}

.nav-links .plans-menu__link {
  display: flex;
  padding: 10px 10px;
  gap: 12px;
}

.plans-menu__link--row {
  text-align: left;
}

.plans-menu__link:hover {
  background: var(--surface);
}

.plans-menu__thumb {
  display: block;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  margin: 0;
}

.plans-menu__ph {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: var(--radius);
}

.plans-menu__ph.plans-menu__ph--t {
  background: #82C8E5;
}

.plans-menu__ph.plans-menu__ph--wl {
  background: #82C8E5;
}

.plans-menu__ph.plans-menu__ph--sh {
  background: #82C8E5;
}

.plans-menu__ph.plans-menu__ph--ot {
  background: #82C8E5;
}

.plans-menu__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  min-width: 0;
}

.plans-menu .plan-title {
  font-weight: var(--font-normal);
  font-size: var(--text-body-sm);
  color: var(--fg);
  display: block;
}

.plans-menu .plan-sub {
  font-size: var(--text-body-sm);
  line-height: 1.35;
  color: var(--muted);
  display: block;
}

/* Learn more + Other link stacks */
.plans-mega__col--stack {
  min-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.plans-mega__link {
  display: inline-flex;
  align-items: center;
  width: 100%;
  padding: 7px 0;
  font-size: var(--text-body-sm);
  color: var(--fg);
  text-decoration: none;
  border-radius: var(--radius);
  margin: 0 -6px;
  padding-left: 6px;
  padding-right: 6px;
}

.nav-links .plans-mega__link {
  display: inline-flex;
  padding: 7px 6px;
  gap: 0;
  color: var(--fg);
}

.plans-mega__link:hover {
  background: var(--surface);
  color: var(--fg);
}

@media (min-width: 1280px) {
  .plans-mega__col--stack {
    min-width: 152px;
  }
}

/* ---------- Buttons ----------
 * Standard variants:
 *   .btn-primary   — electric blue fill (#0070E7); primary CTA
 *   .btn-secondary / .btn-white — white bg, subtle border + text; secondary action or dark-surface use
 *   .btn-navy      — United Navy fill (#00183C); white text
 *   .btn-beach     — Beach Blue fill (#82C8E5); dark text
 *   .btn-yellow    — Brand Yellow fill (#FFEB3B); dark text
 *   .btn-link      — text only, no bg/border; tertiary / inline action
 *
 * Size modifiers: .btn-lg  |  Layout: .btn-block
 * Deprecated alias: .btn-ghost → same as .btn-link
 * ------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--radius);
  font-size: var(--text-body-sm);
  font-weight: var(--font-semibold);
  border: 1px solid transparent;
  text-align: center;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    text-decoration-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

/* Brand hover lift: filled buttons get a subtle rise + soft shadow on hover.
   Link/ghost variants opt out (they're text only). */
.btn:not(.btn-link):not(.btn-ghost):hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(9, 9, 11, 0.14);
}

.btn:not(.btn-link):not(.btn-ghost):active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(9, 9, 11, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn:hover,
  .btn:active {
    transform: none;
    transition:
      background 0.18s ease,
      color 0.18s ease,
      border-color 0.18s ease;
  }
}

.btn-primary {
  background: var(--brand-electric);
  color: #ffffff;
  border-color: var(--brand-electric);
  border-radius: var(--pill-radius);
}

.btn-primary:hover {
  background: var(--brand-electric-hover);
  border-color: var(--brand-electric-hover);
  transform: translateY(-2px) scale(1.015);
  box-shadow:
    0 10px 24px -8px rgba(0, 112, 231, 0.55),
    0 2px 6px rgba(0, 24, 60, 0.18);
}

.btn-primary:active {
  transform: translateY(0) scale(0.99);
  box-shadow: 0 2px 6px rgba(0, 24, 60, 0.22);
}

.btn-secondary,
.btn-white {
  background: #ffffff;
  color: var(--fg);
  border-color: var(--border);
  border-radius: var(--pill-radius);
  box-shadow: 0 1px 1px rgba(0,0,0,0.08);
}

.btn-secondary:hover,
.btn-white:hover {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--fg) 18%, var(--border));
}

.btn-navy {
  background: var(--brand-navy);
  color: #ffffff;
  border-color: var(--brand-navy);
  border-radius: var(--pill-radius);
}

.btn-navy:hover {
  background: #001028;
  border-color: #001028;
}

.btn-beach {
  background: var(--brand-light-blue);
  color: var(--fg);
  border-color: var(--brand-light-blue);
  border-radius: var(--pill-radius);
}

.btn-beach:hover {
  background: #6ab8da;
  border-color: #6ab8da;
}

.btn-yellow {
  background: var(--brand-yellow);
  color: var(--fg);
  border-color: var(--brand-yellow);
  border-radius: var(--pill-radius);
}

.btn-yellow:hover {
  background: #f5df00;
  border-color: #f5df00;
}


/* Link variant — no background, no border; looks like styled inline text */
.btn-link,
.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
  text-decoration: underline;
  text-decoration-color: transparent;
}

.btn-link:hover,
.btn-ghost:hover {
  background: transparent;
  text-decoration-color: currentColor;
}

.btn-block {
  width: 100%;
}

.btn-lg {
  min-height: 52px;
  padding: 14px 22px;
  font-size: var(--text-body);
}

.btn[disabled],
.btn.is-disabled {
  background: var(--surface);
  color: var(--muted);
  border-color: var(--border);
  border-radius: var(--pill-radius);
  cursor: not-allowed;
}

/* ------------------------------------------------
 * btn2 — systematic button system (color × variant × size)
 *
 * Colors:  brand | neutral | error
 * Variants: primary | secondary | tertiary
 * Sizes:    .btn2--sm (32px) | default (44px from .btn) | .btn2--lg (52px)
 *
 * Usage: class="btn btn2 btn2--brand-primary"
 *        class="btn btn2 btn2--neutral-secondary btn2--sm"
 *
 * The .btn base class provides shared layout, transition, font rules.
 * All pill/solid variants set border-radius: var(--pill-radius) explicitly.
 * Tertiary variants suppress background, border, and horizontal padding to look like links.
 * Disabled: .btn2[disabled] or .btn2.is-disabled (adds pointer-events:none so non-button
 *   elements like <a> are also blocked). React <Button asChild disabled> sets both.
 * ------------------------------------------------ */

/* -- Brand primary: electric blue fill, white text -- */
.btn2--brand-primary {
  background: var(--brand-electric);
  color: #ffffff;
  border-color: var(--brand-electric);
  border-radius: var(--pill-radius);
}
.btn2--brand-primary:hover:not([disabled]):not(.is-disabled) {
  background: var(--brand-electric-hover);
  border-color: var(--brand-electric-hover);
  transform: translateY(-2px) scale(1.015);
  box-shadow:
    0 10px 24px -8px rgba(0, 112, 231, 0.55),
    0 2px 6px rgba(0, 24, 60, 0.18);
}

.btn2--brand-primary:active:not([disabled]):not(.is-disabled) {
  transform: translateY(0) scale(0.99);
  box-shadow: 0 2px 6px rgba(0, 24, 60, 0.22);
}

/* -- Brand secondary: white bg, electric blue text, subtle outline -- */
.btn2--brand-secondary {
  background: #ffffff;
  color: var(--brand-electric);
  border-color: color-mix(in srgb, var(--brand-electric) 28%, var(--border));
  border-radius: var(--pill-radius);
}
.btn2--brand-secondary:hover:not([disabled]):not(.is-disabled) {
  background: #eff6ff;
  border-color: color-mix(in srgb, var(--brand-electric) 42%, var(--border));
}

/* -- Brand tertiary: no bg/border, electric blue text (link style) -- */
.btn2--brand-tertiary {
  background: transparent;
  color: var(--brand-electric);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
  text-decoration: underline;
  text-decoration-color: transparent;
}
.btn2--brand-tertiary:hover:not([disabled]):not(.is-disabled) {
  background: transparent;
  text-decoration-color: currentColor;
}

/* -- Neutral primary: dark/navy fill, white text -- */
.btn2--neutral-primary {
  background: var(--brand-navy);
  color: #ffffff;
  border-color: var(--brand-navy);
  border-radius: var(--pill-radius);
}
.btn2--neutral-primary:hover:not([disabled]):not(.is-disabled) {
  background: #001028;
  border-color: #001028;
}

/* -- Neutral secondary: white bg, dark text, subtle outline -- */
.btn2--neutral-secondary {
  background: #ffffff;
  color: var(--fg);
  border-color: var(--border);
  border-radius: var(--pill-radius);
}
.btn2--neutral-secondary:hover:not([disabled]):not(.is-disabled) {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--fg) 18%, var(--border));
}

/* -- Neutral tertiary: no bg/border, dark text (link style) -- */
.btn2--neutral-tertiary {
  background: transparent;
  color: var(--fg);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
  text-decoration: underline;
  text-decoration-color: transparent;
}
.btn2--neutral-tertiary:hover:not([disabled]):not(.is-disabled) {
  background: transparent;
  text-decoration-color: currentColor;
}

/* -- Error primary: red fill, white text -- */
.btn2--error-primary {
  background: var(--error);
  color: #ffffff;
  border-color: var(--error);
  border-radius: var(--pill-radius);
}
.btn2--error-primary:hover:not([disabled]):not(.is-disabled) {
  background: var(--error-hover);
  border-color: var(--error-hover);
}

/* -- Error secondary: white bg, red text, subtle outline -- */
.btn2--error-secondary {
  background: #ffffff;
  color: var(--error);
  border-color: color-mix(in srgb, var(--error) 28%, var(--border));
  border-radius: var(--pill-radius);
}
.btn2--error-secondary:hover:not([disabled]):not(.is-disabled) {
  background: #fef2f2;
  border-color: color-mix(in srgb, var(--error) 42%, var(--border));
}

/* -- Error tertiary: no bg/border, red text (link style) -- */
.btn2--error-tertiary {
  background: transparent;
  color: var(--error);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
  text-decoration: underline;
  text-decoration-color: transparent;
}
.btn2--error-tertiary:hover:not([disabled]):not(.is-disabled) {
  background: transparent;
  text-decoration-color: currentColor;
}

/* -- Size modifiers -- */
.btn2--sm {
  min-height: 32px;
  padding: 5px 14px;
  font-size: var(--text-body-sm);
}
.btn2--lg {
  min-height: 52px;
  padding: 14px 22px;
  font-size: var(--text-body);
}

/* -- Disabled state (consistent across all btn2 variants) --
   pointer-events:none ensures non-button elements (e.g. <a>) rendered via asChild
   are also unclickable when .is-disabled is present. */
.btn2[disabled],
.btn2.is-disabled {
  background: var(--surface);
  color: var(--muted);
  border-color: var(--border);
  border-radius: var(--pill-radius);
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: none;
}

/* ---------- Hero ---------- */

.hero {
  padding: 56px 0 40px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 28px;
}

/* Full viewport (below sticky header) + optional image/video background */
.hero--fullscreen {
  position: relative;
  width: 100%;
  min-height: calc(100svh - var(--header-height));
  display: flex;
  align-items: center;
  padding: 48px 0 56px;
  overflow: hidden;
  box-sizing: border-box;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-media video,
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (prefers-reduced-motion: reduce) {
  .hero-media video {
    display: none;
  }
}

/* Image-only layer: set --hero-bg-image on .hero--media, e.g. url("../img/hero.jpg") */
.hero--media {
  background-color: var(--dark-surface);
}

.hero-media--image {
  background-image: var(--hero-bg-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(9, 9, 11, 0.55) 0%,
    rgba(9, 9, 11, 0.35) 45%,
    rgba(9, 9, 11, 0.7) 100%
  );
}

.hero--fullscreen .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero--media .eyebrow {
  color: rgba(255, 255, 255, 0.72);
}

.hero--media h1 {
  color: #fff;
}

.hero--media .lead {
  color: rgba(255, 255, 255, 0.9);
}

@media (min-width: 640px) {
  .hero {
    padding: 96px 0 72px;
  }

  .hero--fullscreen {
    padding: 64px 0 72px;
  }
}

@media (min-width: 1024px) {
  .hero {
    padding: 128px 0 96px;
  }

  .hero--fullscreen {
    padding: 80px 0 96px;
  }
}

/* ---------- Cards ---------- */

.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 28px;
}

.card-outline {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
}

.card-outline-strong {
  background: var(--surface);
  border: 1.5px solid var(--brand-electric);
  border-radius: var(--radius-lg);
  padding: 28px;
}

/* Card hover group: applied to a grid container with card children.
   Hovering one child scales it slightly with a soft shadow. No sibling dim.
   Wrap a child in <a> for the "whole card is a link" pattern. */
.card-hover-group > * {
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.card-hover-group > *:hover {
  transform: scale(1.02);
  box-shadow: 0 24px 64px rgba(9, 9, 11, 0.16);
}

.card-hover-group > a {
  display: block;
  color: inherit;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .card-hover-group > *,
  .card-hover-group > *:hover {
    transition: none;
    transform: none;
  }
}

.card-outline-strong .treatment-card__icon {
  color: var(--brand-electric);
}

.protocol-categories-stack .card-outline-strong {
  background: var(--brand-electric);
  border-color: var(--brand-electric);
  color: #fff;
}

.protocol-categories-stack .card-outline-strong .treatment-card__icon {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.protocol-categories-stack .card-outline-strong .title {
  color: #fff;
}

.protocol-categories-stack .card-outline-strong .body {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--text-body);
}

.protocol-categories-stack .card-outline-strong .protocol-chip {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
}

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

.grid-2 {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

.grid-3 {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

.grid-4 {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

.assessment-strip {
  margin: 0;
  padding: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.assessment-strip__inner {
  padding-block: 20px;
  align-items: center;
}

.assessment-strip__copy h2 {
  margin: 8px 0 6px;
}

.assessment-strip__copy p {
  margin: 0;
  color: var(--muted);
}

.assessment-strip__action {
  justify-self: start;
}

@media (min-width: 768px) {
  .assessment-strip__action {
    justify-self: end;
    align-self: center;
  }
}

@media (min-width: 640px) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }
  .grid-3 {
    grid-template-columns: 1fr 1fr;
  }
  .grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .assessment-strip__inner {
    padding-block: 16px;
  }

  .assessment-strip__action {
    width: 100%;
  }

  .assessment-strip__action .btn {
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.step-card .num {
  font-family: var(--sans);
  font-size: var(--text-price);
  line-height: 1;
  font-weight: var(--font-semibold);
}

.step-card p {
  margin-top: 20px;
  font-size: var(--text-body);
  color: var(--fg);
}

/* ---------- Homepage merged offer section ---------- */

.page-home main > section:not(.hero-fw):not(.hero-card--home):not(.cta-band):not(.section--dark):not(.protocol-moment--card) {
  background: var(--surface);
}

.section--home-offer {
  background: var(--surface);
}

.section--home-offer-quiz {
  padding-top: 0;
  padding-bottom: 0;
}

.home-offer-stack {
  display: grid;
  gap: clamp(36px, 5vw, 72px);
}

.home-offer-head {
  text-align: center;
}

.home-offer-head h2 {
  max-width: 20ch;
  margin: 0 auto;
}

.home-offer-head p {
  margin: 10px auto 0;
  max-width: 58ch;
  color: var(--muted);
}

.home-offer-steps {
  display: grid;
  gap: clamp(20px, 2.5vw, 32px);
  grid-template-columns: 1fr;
  margin-bottom: clamp(20px, 3vw, 36px);
}

.home-offer-steps .step-card {
  height: 100%;
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}

.home-offer-steps .step-card__icon-circle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.12);
}

.home-offer-steps .step-card__icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--brand-electric);
}

.home-offer-steps .step-card__icon svg {
  width: 28px;
  height: 28px;
}

.home-offer-steps .step-card p {
  margin-top: 0;
  font-size: var(--text-body);
  line-height: 1.35;
  min-height: calc(2 * 1.35 * 1em);
}

@media (max-width: 767px) {
  .home-offer-steps {
    gap: 16px;
  }

  .home-offer-steps .step-card {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 20px;
    padding: 12px;
  }

  .home-offer-steps .step-card__icon-circle {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
  }

  .home-offer-steps .step-card__icon {
    flex: 0 0 auto;
  }

  .home-offer-steps .step-card__icon svg {
    width: 24px;
    height: 24px;
  }

  /* QA (xs/sm): let benefit labels sit on one line where they fit. */
  .home-offer-steps .step-card p br {
    display: none;
  }

  .home-offer-steps .step-card p {
    margin-top: 0;
    font-size: var(--text-body-sm);
    line-height: 1.3;
    min-height: 0;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .home-offer-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.home-offer-treat-grid {
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: 1fr;
  width: 100%;
  align-items: stretch;
}

.home-offer-treat-head {
  text-align: center;
  margin-bottom: clamp(18px, 2.6vw, 30px);
}

.home-offer-treat-head h3 {
  margin: 0;
}

.home-offer-treat-head p {
  margin: 10px auto 0;
  max-width: 58ch;
  color: var(--muted);
}

.home-offer-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  color: #fff;
  background: #82C8E5;
  text-decoration: none;
}

@media (max-width: 767px) {
  .home-offer-card {
    width: 100%;
    aspect-ratio: auto;
    min-height: 420px;
  }
}

/* (Hover lift + sibling-dim now provided by .card-hover-group on the
   grid wrapper, so the per-card scale(1.01) is removed to avoid stacking.) */

/* The whole card is the link, so any inner .btn-styled <span> shouldn't
   add its own hover lift on top of the card lift. */
.card-hover-group .home-offer-card .btn:hover,
.card-hover-group .home-offer-card:hover .btn {
  transform: none;
  box-shadow: none;
}

.home-offer-card__media {
  position: absolute;
  inset: 0;
  border: 0;
  z-index: 0;
  overflow: hidden;
}

.home-offer-card__media img,
.home-offer-card__media .scroll-bg-parallax__wrap > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-offer-card__media--align-right img,
.home-offer-card__media--align-right .scroll-bg-parallax__wrap > img {
  height: 115%;
  object-position: 75% top;
}

.home-offer-card__media--align-80 img,
.home-offer-card__media--align-80 .scroll-bg-parallax__wrap > img {
  object-position: 80% top;
}

.home-offer-card__media.ph {
  border: 0;
}

.home-offer-card__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  height: 100%;
  padding: var(--card-pad);
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.34) 0%,
    rgba(0, 0, 0, 0.08) 48%,
    rgba(0, 0, 0, 0.52) 100%
  );
}

.home-offer-card__eyebrow {
  color: rgba(255, 255, 255, 0.88);
}

.home-offer-card__title {
  margin: 0;
  font-size: var(--heading-card);
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 18ch;
  color: #fff;
}

.home-offer-card__footer {
  margin-top: auto;
  align-self: flex-start;
}

.home-offer-quiz {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 16px;
  align-items: center;
  padding: clamp(20px, 2.6vw, 30px);
}

.home-offer-quiz::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #ececef;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.home-offer-quiz__copy h3 {
  margin: 0 0 8px;
}

.home-offer-quiz__copy p {
  margin: 0;
  color: var(--muted);
}

.home-offer-quiz__action {
  justify-self: start;
}

@media (min-width: 1024px) {
  .home-offer-steps {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--card-gap-lg);
  }

  .home-offer-steps .step-card {
    grid-column: span 3;
    gap: 28px;
    min-height: 140px;
  }

  .home-offer-steps .step-card p {
    margin-top: 0;
    font-size: var(--text-body);
    line-height: 1.35;
    min-height: calc(2 * 1.35 * 1em);
  }

  .home-offer-treat-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .home-offer-card {
    grid-column: span 4;
  }

  .home-offer-quiz {
    grid-template-columns: 1fr auto;
    gap: 24px;
  }

  .home-offer-quiz__action {
    justify-self: end;
  }
}

.treatment-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.treatment-card--equal {
  min-height: 100%;
}

.treatment-card .title {
  font-weight: var(--font-semibold);
  font-size: var(--text-body);
}

.treatment-card .body {
  color: var(--muted-2);
  margin-top: 10px;
  font-size: var(--text-body-sm);
}

.treatment-card__icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--surface);
  color: var(--fg);
  margin-bottom: 16px;
}

.treatment-card__icon svg {
  width: 18px;
  height: 18px;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--text-label);
  font-weight: var(--font-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--fg);
  color: var(--surface);
}

.badge-outline {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--fg);
}

.approach-split.protocol-categories-split {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 32px);
  align-items: start;
}

.approach-split.protocol-categories-split > .approach-split__copy {
  width: 100%;
  margin-bottom: clamp(12px, 2vw, 28px);
  text-align: center;
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .approach-split.protocol-categories-split > .approach-split__copy {
    display: block;
    text-align: center;
    width: 100%;
  }

  .approach-split.protocol-categories-split > .approach-split__copy .lead,
  .approach-split.protocol-categories-split > .approach-split__copy h2 {
    margin: 0 auto;
  }
}

.protocol-categories-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 768px) {
  .protocol-categories-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
  }

  .protocol-categories-stack > :first-child {
    grid-column: 1 / -1;
    grid-row: span 1;
    align-self: stretch;
  }
}

@media (min-width: 1280px) {
  .protocol-categories-stack {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .protocol-categories-stack > :first-child {
    grid-column: auto;
    grid-row: auto;
  }

  .protocol-categories-stack--full {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.protocol-categories-stack .protocol-categories-long {
  height: 100%;
}

/* 3-row card: icon / title / body */
.protocol-categories-stack .treatment-card {
  display: grid;
  grid-template-rows: auto auto auto;
  row-gap: 8px;
  height: 100%;
}

.protocol-categories-stack .treatment-card .title {
  align-self: start;
  margin-top: 0;
  text-wrap: pretty;
}

.protocol-categories-stack .treatment-card .body {
  align-self: start;
  margin-top: 0;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: pretty;
}

/* Weight loss protocol cards show full descriptions (no line clamp). */
.protocol-categories-stack--full .treatment-card .body {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}

.protocol-categories-stack .protocol-card-top {
  justify-content: flex-start;
}

.protocol-categories-stack .protocol-chip {
  display: none;
}

.protocol-categories-stack .treatment-card__icon {
  width: 44px;
  height: 44px;
  margin-bottom: 0;
}

.protocol-categories-stack .treatment-card__icon svg {
  width: 22px;
  height: 22px;
}

.protocol-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.protocol-card-top .treatment-card__icon {
  margin-bottom: 0;
}

.protocol-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 10px; /* decorative */
  font-weight: var(--font-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Featured protocol card — show the chip badge. (protocol-categories-stack only
   exists on the 3 plan pages, so this is naturally scoped to Testosterone /
   Weight Loss / Sexual Health.) The heading lives inside .protocol-card-top so
   the icon + heading share one vertically-centered row. */
.protocol-categories-stack .card-outline-strong {
  position: relative;
}

.protocol-categories-stack .card-outline-strong .protocol-chip {
  display: inline-flex;
}

.protocol-categories-stack .card-outline-strong .protocol-card-top {
  align-items: center;
}

/* Mobile / tablet: icon + heading sit centered on one row; pin the chip to the
   card's top-right corner with a reserved top strip so it never collides. */
@media (max-width: 1023px) {
  .protocol-categories-stack .card-outline-strong {
    padding-top: 48px;
  }

  .protocol-categories-stack .card-outline-strong .protocol-card-top {
    grid-column: 1 / -1;
  }

  .protocol-categories-stack .card-outline-strong .protocol-chip {
    position: absolute;
    top: 16px;
    right: 16px;
  }
}

/* Desktop: keep the original card layout unchanged — icon top-left, chip
   top-right, heading on its own line below — even though the heading now lives
   inside .protocol-card-top. */
@media (min-width: 1024px) {
  .protocol-categories-stack .card-outline-strong {
    grid-template-rows: auto auto;
  }

  .protocol-categories-stack .card-outline-strong .protocol-card-top {
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
  }

  .protocol-categories-stack .card-outline-strong .protocol-card-top .title {
    flex: 0 0 100%;
    order: 3;
  }
}

/* ---------- Video story cards (home) ---------- */

.video-stories-title {
  text-align: center;
  font-size: var(--heading-h3);
  font-weight: var(--font-semibold);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 auto 40px;
  max-width: 28ch;
  font-family: var(--sans);
  color: var(--fg);
}

.video-stories-title .video-stories-em {
  font-style: italic;
  font-weight: var(--font-semibold);
  color: var(--fg);
}

@media (min-width: 640px) {
  .video-stories-title {
    font-size: var(--heading-h1);
    margin-bottom: 48px;
  }
}

.video-stories-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .video-stories-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .video-stories-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}

.video-story-card {
  display: block;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.video-story-card:hover {
  border-color: var(--muted);
}

.video-story-card:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

.video-story-card-media {
  position: relative;
  aspect-ratio: 3 / 4;
  background: #d4d4d8;
  background-size: cover;
  background-position: center;
}

/* Placeholder tints (wireframe; replace with real photography) */
.video-story-card--1 .video-story-card-media { background-color: #c8c8cc; }
.video-story-card--2 .video-story-card-media { background-color: #bdbdc2; }
.video-story-card--3 .video-story-card-media { background-color: #b2b2b8; }
.video-story-card--4 .video-story-card-media { background-color: #a8a8af; }

.video-story-card-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  pointer-events: none;
  z-index: 1;
}

.video-story-card-play svg {
  display: block;
  margin-left: 3px;
}

.video-story-card-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 16px 16px 18px;
  background: rgba(9, 9, 11, 0.92);
}

.video-story-card-kicker {
  font-family: var(--sans);
  font-size: var(--text-body-sm);
  font-weight: var(--font-semibold);
  line-height: 1.3;
  color: #fff;
  margin: 0;
}

.video-story-card-caption p {
  margin: 6px 0 0;
  font-size: var(--text-body-sm);
  line-height: 1.45;
  font-weight: var(--font-normal);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--sans);
}

/* ---------- Testimonials / Quotes ---------- */

.quote {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.quote blockquote {
  font-family: var(--sans);
  font-weight: var(--font-semibold);
  font-style: italic;
  font-size: var(--text-body-lg);
  line-height: 1.4;
  margin: 0;
}

.quote cite {
  display: block;
  margin-top: 20px;
  font-style: normal;
  font-size: var(--text-body-sm);
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* ---------- Symptoms list ---------- */

.symptoms-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .symptoms-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.symptoms-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.symptoms-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-body);
  color: var(--fg);
}

.symptoms-list li:last-child {
  border-bottom: 0;
}

.symptoms-list li::before {
  content: "— ";
  color: var(--muted);
  margin-right: 4px;
}

/* --- Larger variant: icon left, no em-dash, bigger type --- */
.symptoms-list--lg li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  font-size: var(--text-body-lg);
  line-height: 1.35;
}

.symptoms-list--lg li::before {
  content: none;
}

.symptoms-list__icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--surface);
  color: var(--fg);
}

.symptoms-list__icon svg {
  width: 18px;
  height: 18px;
}

/* --- Auto-scrolling symptoms list (homepage) --- */
.symptoms-scroll {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  background: transparent;
  border-radius: var(--bento-radius, 16px);
  padding: 0 clamp(24px, 3vw, 32px);
}

.symptoms-scroll .symptoms-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.symptoms-scroll .symptoms-list li {
  padding: clamp(14px, 2vw, 18px) clamp(16px, 2.5vw, 22px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  border-bottom: 1px solid var(--border);
  font-size: clamp(20px, 2.5vw, 24px); /* one-off: hero subhead larger than --text-body-lg */
}

.symptoms-scroll .symptoms-list li:last-child {
  border-bottom: 1px solid var(--border);
}

.symptoms-scroll .symptoms-list__icon {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
}

.symptoms-scroll .symptoms-list__icon svg {
  width: 28px;
  height: 28px;
}

.symptoms-scroll--checks .symptoms-list__icon svg circle {
  display: none;
}

.symptoms-scroll__viewport {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 10%,
    #000 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 10%,
    #000 90%,
    transparent 100%
  );
}

.symptoms-scroll [data-symptoms-track] {
  will-change: transform;
}

.symptoms-scroll [data-symptoms-clone] {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .symptoms-scroll__viewport {
    overflow: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ---------- Blood testing table ---------- */

.lab-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 20px 16px;
  border-bottom: 1px solid var(--border);
}

.lab-row:last-child {
  border-bottom: 0;
}

.lab-row.shaded {
  background: var(--surface);
  border-radius: var(--radius);
}

.lab-row .lab-name {
  font-weight: var(--font-semibold);
  font-size: var(--text-body-sm);
}

.lab-row .lab-desc {
  color: var(--muted-2);
  font-size: var(--text-body-sm);
}

/* Larger, more readable body text for the comprehensive + monitoring tables. */
.lab-table--lg .lab-row .lab-name,
.lab-table--lg .lab-row .lab-desc {
  font-size: var(--text-body);
  line-height: 1.55;
}

.initial-labs-head {
  text-align: center;
}

.initial-labs-head .lead {
  margin-inline: auto;
}

.lab-locations-head {
  text-align: center;
}

/* Monitoring section — centred heading + subheading. */
.monitoring-head {
  text-align: center;
}

.monitoring-head .lead {
  margin-inline: auto;
}

@media (min-width: 640px) {
  .lab-row {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 32px;
    padding: 22px 20px;
  }

  .lab-row .lab-name {
    grid-column: span 4;
  }

  .lab-row .lab-desc {
    grid-column: span 6;
  }
}

/* Mobile (xs/sm): flush baseline + monitoring rows to the column edges. */
@media (max-width: 639px) {
  .lab-row {
    padding-left: 0;
    padding-right: 0;
  }

  .lab-row.shaded {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ---------- Full test list (expandable) ---------- */
.lab-full-list {
  margin-top: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.lab-full-list__summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
  font-weight: var(--font-semibold);
  font-size: var(--text-body);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lab-full-list__summary::-webkit-details-marker {
  display: none;
}

.lab-full-list__summary::after {
  content: "+";
  font-size: 1.4em;
  line-height: 1;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.lab-full-list[open] .lab-full-list__summary::after {
  content: "–";
}

.lab-full-list__body {
  padding: 4px 20px 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .lab-full-list__body {
    grid-template-columns: 1fr 1fr;
    gap: 24px 40px;
  }
}

.lab-full-list__group-title {
  font-size: var(--text-body);
  font-weight: var(--font-semibold);
  margin: 0 0 10px;
}

.lab-full-list__items {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: var(--muted-2);
  font-size: var(--text-body-sm);
}

/* ---------- Lab partner logos ---------- */
.lab-partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 6vw, 72px);
  margin-top: 28px;
  padding: clamp(24px, 4vw, 36px);
}

.lab-partners__logo img {
  height: clamp(30px, 5vw, 44px);
  width: auto;
  object-fit: contain;
}

.lab-location-card__logo {
  margin-bottom: 16px;
}

.lab-location-card__logo img {
  height: clamp(26px, 4vw, 34px);
  width: auto;
  object-fit: contain;
}

.lab-locations-note {
  margin-top: 20px;
  text-align: center;
  color: var(--muted-2);
  font-size: var(--text-body);
  margin-inline: auto;
  max-width: 640px;
}

/* ---------- Pricing ---------- */

.section--pricing-hero {
  padding-top: calc(clamp(104px, 16vw, 184px) * var(--section-vpad-scale));
  padding-bottom: calc(clamp(44px, 6vw, 76px) * var(--section-vpad-scale));
}

.pricing-hero__content {
  text-align: center;
  align-items: center;
}

.pricing-hero__content .lead,
.pricing-hero__content .hero-sub {
  margin-inline: auto;
}

.pricing-medication-intro {
  text-align: left;
  font-weight: var(--font-medium);
  text-wrap: balance;
}

.type--display-2.pricing-medication-title {
  text-align: left;
  max-width: none;
}

.pricing-grid {
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: 1fr;
  align-items: stretch;
}

.pricing-grid .plan-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

@media (min-width: 768px) {
  .pricing-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.plan-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.plan-card.featured {
  position: relative;
}

.plan-card:hover,
.pricing-onboarding:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px -10px rgba(9, 9, 11, 0.18);
  border-color: color-mix(in srgb, var(--fg) 14%, var(--border));
}

@media (prefers-reduced-motion: reduce) {
  .plan-card,
  .pricing-onboarding,
  .plan-card:hover,
  .pricing-onboarding:hover {
    transform: none;
  }
}

.plan-card .badge-popular {
  background: var(--brand-light-blue);
  color: var(--brand-navy);
  border: none;
}

.plan-card .plan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 22px;
}

.plan-card .plan-name {
  font-size: var(--text-body-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.plan-card .plan-price {
  font-family: var(--sans);
  font-weight: var(--font-semibold);
  font-size: var(--heading-h1);
  line-height: 1;
}

.plan-card .plan-price small {
  display: block;
  font-family: var(--sans);
  font-size: var(--text-body-sm);
  font-weight: var(--font-normal);
  color: var(--muted);
  margin-top: 8px;
  letter-spacing: normal;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.plan-features li {
  font-size: var(--text-body-sm);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.plan-features li::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  margin-top: 3px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309090b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-sm);
}

.pricing-table th,
.pricing-table td {
  text-align: left;
  padding: 14px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.pricing-table th {
  font-weight: var(--font-normal);
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.pricing-table tr.category td {
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
  padding-top: 14px;
  padding-bottom: 14px;
}

.pricing-table td.price {
  text-align: right;
  font-weight: var(--font-normal);
  white-space: nowrap;
}

.pricing-table td.price small {
  display: block;
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

.pricing-onboarding {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
}

.pricing-onboarding__photo {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.pricing-onboarding__body {
  padding: clamp(22px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 768px) {
  .pricing-onboarding {
    grid-template-columns: 2fr 3fr;
  }

  .pricing-onboarding__photo {
    display: block;
    min-height: 300px;
  }
}

.pricing-onboarding__price {
  font-family: var(--sans);
  font-weight: var(--font-semibold);
  font-size: var(--heading-h1);
  line-height: 1;
  margin-top: 10px;
}

.pricing-onboarding__price small {
  display: block;
  font-family: var(--sans);
  font-size: var(--text-body-sm);
  font-weight: var(--font-normal);
  color: var(--muted);
  margin-top: 8px;
  letter-spacing: normal;
}

/* ---------- Medication Accordion ---------- */

.med-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Spacing tokens for the medication accordion — keep header, wrapper and
     row indents in sync from one place. */
  --med-accordion-pad: 20px; /* horizontal inset of each item card */
  --med-accordion-pad-y: 18px; /* header (faq-q) vertical padding */
  --med-accordion-indent: 24px; /* first-column / divider indent */
}

.med-accordion .faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0 var(--med-accordion-pad);
}

.med-accordion .faq-q {
  padding: var(--med-accordion-pad-y) 0;
  justify-content: flex-start;
  gap: 8px;
}

.med-accordion .faq-icon {
  width: 16px;
  flex-shrink: 0;
  text-align: center;
  font-size: var(--text-body-lg);
  transition: transform 0.2s ease;
}

.med-accordion .faq-q[aria-expanded="true"] .faq-icon {
  transform: rotate(90deg);
}

.med-accordion__label {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  font-size: var(--text-body-lg);
  font-weight: var(--font-semibold);
}

.med-accordion__range {
  font-size: var(--text-body);
  font-weight: var(--font-medium);
  color: var(--fg);
  margin-left: auto;
}

.med-accordion .faq-a {
  color: var(--fg);
}

.med-accordion .faq-q[aria-expanded="true"] + .faq-a {
  max-height: 800px;
  padding-bottom: 0;
}

.med-accordion .pricing-table td,
.med-accordion .pricing-table th {
  padding-left: 0;
  padding-right: 0;
  border-top: none;
  border-bottom: none;
  font-size: var(--text-body);
}

.med-accordion .pricing-table td.price small {
  font-size: var(--text-body-sm);
}

.med-accordion .pricing-table td:first-child,
.med-accordion .pricing-table th:first-child {
  padding-left: var(--med-accordion-indent);
}

.med-accordion .pricing-table tr {
  background-image: linear-gradient(var(--border), var(--border));
  background-size: calc(100% - var(--med-accordion-indent)) 1px;
  background-position: var(--med-accordion-indent) 0;
  background-repeat: no-repeat;
}

/* ---------- FAQ Accordion ---------- */

.faq {
  border-top: 1px solid var(--border);
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-q {
  width: 100%;
  background: none;
  border: 0;
  padding: 22px 0;
  font-family: var(--sans);
  font-size: var(--text-body);
  font-weight: var(--font-semibold);
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
}

.faq-icon {
  font-size: var(--text-body-lg);
  line-height: 1;
  color: var(--muted);
  transition: transform 0.15s ease;
}

.faq-q[aria-expanded="true"] .faq-icon {
  transform: rotate(45deg);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  padding: 0 0 0 0;
  color: var(--muted-2);
  font-size: var(--text-body-sm);
  transition: max-height 0.2s ease, padding 0.2s ease;
}

.faq-q[aria-expanded="true"] + .faq-a {
  max-height: 400px;
  padding: 0 0 22px 0;
}

/* ---------- How It Works timeline ---------- */

.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border);
}

.timeline li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
}

.timeline .num {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-semibold);
  font-size: var(--text-body-sm);
  color: var(--fg);
}

.timeline .step-title {
  font-weight: var(--font-semibold);
  font-size: var(--text-body);
}

.timeline .step-body {
  color: var(--muted-2);
  margin-top: 8px;
  font-size: var(--text-body-sm);
}

/* ---------- How It Works — 4-up (image + text) ---------- */

.hiw-section .hiw-heading {
  text-align: center;
  max-width: 20ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 48px;
  font-size: var(--heading-h3);
  line-height: 1.15;
}

@media (min-width: 640px) {
  .hiw-section .hiw-heading {
    font-size: var(--heading-h2);
    max-width: none;
  }
}

@media (min-width: 1024px) {
  .hiw-section .hiw-heading {
    font-size: var(--heading-h1);
    margin-bottom: 56px;
  }
}

.hiw-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hiw-visual {
  position: relative;
  background: var(--hiw-visual-bg);
  border-radius: var(--hiw-visual-radius);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  margin-bottom: 20px;
}

.hiw-visual img,
.hiw-visual svg {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

.hiw-title {
  font-size: var(--text-body-lg);
  font-weight: var(--font-semibold);
  line-height: 1.3;
  margin: 0 0 10px 0;
  color: var(--fg);
  letter-spacing: -0.01em;
}

.hiw-body {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: 1.55;
  color: var(--muted-2);
}

.hiw-section .grid-4 {
  gap: 20px;
}

@media (min-width: 1024px) {
  .hiw-section .grid-4 {
    gap: 28px;
  }
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--surface);
  padding: 56px 0 32px;
  margin-top: 40px;
}

/* Flush to final CTA — avoid a strip of --bg between the dark band and footer */
main:has(> .cta-band:last-child) ~ .site-footer {
  margin-top: 0;
}

.footer-grid-modern {
  row-gap: clamp(32px, 5vw, 48px);
}

/* QA (xs/sm): four nav columns in a 2×2 grid (brand stays full width). */
@media (max-width: 767px) {
  .footer-grid-modern .footer-brand {
    grid-column: span 3;
  }
}

@media (min-width: 768px) {
  .footer-grid-modern {
    row-gap: clamp(40px, 5vw, 56px);
  }
}

/* md (768–1023px): 3-col × 2-row grid — brand + contact on row 1, nav cols on row 2. */
@media (min-width: 768px) and (max-width: 1023px) {
  .footer-grid-modern .footer-brand-col {
    grid-column: 1 / 9;
    grid-row: 1;
  }

  .footer-grid-modern .footer-brand {
    grid-column: 1 / 5;
    grid-row: 2;
  }

  .footer-grid-modern .footer-col:nth-of-type(2) {
    grid-column: 9 / 13;
    grid-row: 1;
  }

  .footer-grid-modern .footer-col:nth-of-type(3) {
    grid-column: 5 / 9;
    grid-row: 2;
  }

  .footer-grid-modern .footer-col:nth-of-type(4) {
    grid-column: 9 / 13;
    grid-row: 2;
  }
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}

.footer-grid--home {
  gap: 30px;
}

.footer-grid--home > * {
  min-width: 0;
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Tablet / small desktop band below 1024px: brand full width, four link columns in 2×2 */
  .footer-grid--home {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid--home > :nth-child(1) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  .footer-grid--home {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 28px;
  }

  .footer-grid--home > :nth-child(1) {
    grid-column: span 4;
  }

  .footer-grid--home > :nth-child(n + 2) {
    grid-column: span 2;
  }
}

.footer-brand {
  display: flex;
  flex-direction: column;
  padding-right: clamp(20px, 4vw, 48px);
}

.footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: clamp(20px, 3vw, 36px);
}

.footer-brand-col__logo {
  display: inline-block;
  text-decoration: none;
  line-height: 0;
}

.footer-brand-col__logo .footer-brand__logo-mark {
  height: clamp(24px, 2.4vw, 30px);
}

.footer-brand-col__tagline {
  margin: 0;
  color: var(--muted-2);
  font-size: var(--text-body-lg);
  line-height: 1.4;
  max-width: 32ch;
}

.footer-brand .logo {
  display: inline-block;
}

.footer-brand__logo {
  display: inline-block;
}

.footer-brand__logo-mark {
  display: block;
  height: clamp(28px, 3vw, 36px);
  aspect-ratio: 1086 / 191;
  background-color: var(--brand-electric);
  -webkit-mask-image: url("/media/logos/Horizontal%20Lockup-1.svg");
  mask-image: url("/media/logos/Horizontal%20Lockup-1.svg");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
}

.footer-brand p:not(.footer-bottom) {
  margin-top: 14px;
  color: var(--muted-2);
  font-size: var(--text-body);
  line-height: 1.5;
}

.footer-brand > h4 {
  margin-bottom: 16px;
}

.footer-brand__contact {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
  font-size: var(--text-body-sm);
  color: var(--muted-2);
}

.footer-brand__contact a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  font-weight: var(--font-medium);
}

.footer-brand__contact-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 2px;
  color: var(--muted-2);
}

.footer-brand__contact-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.footer-brand__contact a:hover {
  color: var(--brand-electric);
}

.footer-brand__contact a:hover .footer-brand__contact-icon {
  color: var(--brand-electric);
}

.footer-brand__meta {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: auto;
  padding-top: clamp(24px, 4vw, 40px);
  width: 100%;
}

.footer-brand .footer-bottom {
  margin: 0;
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--surface);
  font-size: var(--text-label);
  color: var(--muted);
  line-height: 1.7;
}

@media (max-width: 639px) {
  .footer-brand__meta {
    flex-direction: column;
    align-items: stretch;
  }

  .legitscript-badge {
    border: none;
    border-radius: 0;
    justify-content: center;
  }

  .footer-end .legitscript-badge--standalone {
    width: 100%;
    align-self: center;
  }

  .legitscript-badge__seal-img {
    width: 55px;
    height: 59px;
  }

  .footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 16px;
  }

  .footer-end .footer-legal-links a {
    flex: 0 0 auto;
    margin-right: 0;
  }

  .footer-brand .footer-bottom {
    width: 100%;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
}

.legitscript-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: fit-content;
  max-width: 100%;
  margin-top: 0;
  padding: 0;
  border: none;
  background: none;
  text-decoration: none;
  transition: opacity 0.18s ease;
}

.legitscript-badge:hover {
  opacity: 0.85;
}

.legitscript-badge__seal-img {
  display: block;
  width: 73px;
  height: 79px;
}

.footer-col h4,
.footer-brand > h4 {
  font-family: var(--sans);
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px 0;
  font-weight: var(--font-normal);
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.footer-col a {
  font-size: var(--text-body-sm);
  font-weight: var(--font-medium);
  color: var(--muted-2);
}

.footer-col a:hover {
  color: var(--brand-electric);
}

.footer-col--stack {
  display: grid;
  gap: 28px;
}

.footer-end {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 24px var(--section-gutter) 32px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 768px) {
  .footer-end {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
  }

  .footer-end__stack {
    flex: 1 1 auto;
    min-width: 0;
  }

  .footer-end .legitscript-badge--standalone {
    flex: 0 0 auto;
  }
}


.footer-end__meta {
  margin-top: 0;
  padding-top: 0;
}

.footer-end__stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.legitscript-badge--standalone {
  align-self: flex-start;
  border: none;
  border-radius: 0;
}

.footer-bottom--standalone {
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.footer-legal-links {
  width: 100%;
  box-sizing: border-box;
  line-height: 1.8;
}

.footer-legal-links a {
  font-size: var(--text-label);
  color: var(--muted);
  font-weight: var(--font-normal);
  margin-right: 20px;
}

.footer-legal-links a:last-child {
  margin-right: 0;
}

.footer-legal-links a:hover {
  color: var(--brand-electric);
}

.footer-col a[aria-current="page"],
.footer-legal a[aria-current="page"] {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border);
}

.footer-legal {
  border-top: 1px solid var(--border);
  margin-top: 44px;
  padding-top: 28px;
  display: grid;
  gap: 20px;
}

.footer-legal h4 {
  font-family: var(--sans);
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px 0;
  font-weight: var(--font-normal);
}

.footer-legal ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
}

.footer-legal a {
  font-size: var(--text-body-sm);
  font-weight: var(--font-medium);
  color: var(--muted-2);
}

.footer-bottom {
  font-size: var(--text-label);
  color: var(--muted);
  line-height: 1.7;
}

.footer-wordmark-row {
  width: 100%;
  max-width: 1920px;
  margin-top: clamp(56px, 8vw, 96px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--section-gutter);
  padding-right: var(--section-gutter);
  box-sizing: border-box;
  --footer-wordmark: #EBEBE6;
}

.footer-wordmark {
  display: block;
  width: 100%;
  aspect-ratio: 854 / 140;
  background-color: var(--footer-wordmark);
  -webkit-mask-image: url("/media/logos/Wordmark.svg");
  mask-image: url("/media/logos/Wordmark.svg");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* ---------- Onboarding (Get Started) ---------- */

.onboard {
  max-width: 620px;
  margin: 0 auto;
  padding: 40px var(--page-padding) 80px;
}

.onboard-head {
  text-align: center;
  margin-bottom: 32px;
}

.onboard-head .logo {
  font-size: var(--text-body-lg);
  display: inline-block;
  margin-bottom: 24px;
}

.progress {
  display: flex;
  gap: 6px;
  margin: 0 auto 16px;
  max-width: 480px;
}

.progress span {
  flex: 1;
  height: 5px;
  background: var(--border);
  border-radius: 999px;
}

.progress span.active {
  background: var(--fg);
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-body-sm);
  color: var(--muted);
  margin-bottom: 6px;
}

/* Reset UA chrome so a <button class="back"/"forward"> matches the funnel's <a class="back"> */
button.back,
button.forward {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

.back:hover {
  color: var(--fg);
}

/* Forward arrow mirrors the back link */
.forward {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-body-sm);
  color: var(--muted);
}

.forward:hover {
  color: var(--fg);
}

/* Back button aligned on the same row as the progress bar */
.progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto 16px;
}

.progress-row .back {
  margin: 0;
  flex: 0 0 auto;
  white-space: nowrap;
}

.progress-row .progress {
  margin: 0;
  flex: 1;
  min-width: 0;
}

.progress-row .forward {
  margin: 0;
  flex: 0 0 auto;
  white-space: nowrap;
}

.progress-row .progress-spacer {
  flex: 0 0 auto;
  font-size: var(--text-body-sm);
  visibility: hidden;
  white-space: nowrap;
}

.step-meta {
  font-size: var(--text-label);
  font-weight: var(--font-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.onboard h1 {
  font-size: var(--heading-h3);
  line-height: 1.2;
}

@media (min-width: 640px) {
  .onboard h1 {
    font-size: var(--heading-h2);
  }
}

.onboard .lead {
  margin-top: 12px;
  font-size: var(--text-body);
}

.onboard-options {
  display: grid;
  gap: 12px;
  margin-top: 32px;
}

.option {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.option:hover {
  border-color: color-mix(in srgb, var(--brand-electric) 35%, var(--border));
  transform: translateY(-2px);
  box-shadow:
    0 12px 28px -14px rgba(0, 24, 60, 0.28),
    0 2px 6px rgba(9, 9, 11, 0.06);
}

@media (prefers-reduced-motion: reduce) {
  .option,
  .option:hover {
    transform: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }
}

.option.selected {
  border-color: var(--brand-electric);
  border-width: 1.5px;
}

.option .icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  background: var(--surface);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg);
}

.option.selected .icon {
  color: var(--brand-electric);
}

.option .body {
  flex: 1;
}

.option .title {
  font-weight: var(--font-semibold);
  font-size: var(--text-body-sm);
  color: var(--fg);
}

.option .desc {
  font-size: var(--text-body-sm);
  color: var(--muted-2);
  margin-top: 4px;
}

.option .radio {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
}

.option.selected .radio {
  background: var(--brand-electric);
  border-color: var(--brand-electric);
  color: #ffffff;
}

.option.selected .radio::after {
  content: "✓";
  font-size: var(--text-label);
  line-height: 1;
}

/* Multi-select checkbox variant (square corners) */
.option .checkbox {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 4px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
}

.option.selected .checkbox {
  background: var(--brand-electric);
  border-color: var(--brand-electric);
  color: #ffffff;
}

.option.selected .checkbox::after {
  content: "✓";
  font-size: var(--text-label);
  line-height: 1;
}

/* "Something else" reveal area */
.option-detail {
  margin-top: 4px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.option-detail__label {
  font-size: var(--text-body-sm);
  font-weight: var(--font-medium);
  color: var(--muted);
  letter-spacing: 0.04em;
}

.option-detail__input {
  width: 100%;
  font-family: inherit;
  font-size: var(--text-body);
  line-height: 1.5;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--fg);
  resize: vertical;
  box-sizing: border-box;
}

.option-detail__input:focus {
  outline: 2px solid var(--fg);
  outline-offset: -2px;
}

/* Form */

.form-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: var(--text-body-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.form-divider::before,
.form-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.form-grid {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}

.field-row {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
}

.field label {
  display: block;
  font-size: var(--text-body-sm);
  font-weight: var(--font-semibold);
  color: var(--fg);
  margin-bottom: 6px;
}

.field input,
.field select {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: inherit;
  font-size: var(--text-body-sm);
  color: var(--fg);
}

.field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: inherit;
  font-size: var(--text-body-sm);
  color: var(--fg);
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--fg);
}

.field .help {
  font-size: var(--text-label);
  color: var(--muted);
  margin-top: 6px;
}

/* Contact page */
.contact-card {
  margin: clamp(56px, 8vw, 96px) 0 0;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px);
}

.contact-details {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  gap: 16px;
}

.contact-details__item {
  display: flex;
}

.contact-details__button {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 26px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.contact-details__button:hover {
  border-color: var(--brand-electric);
  background: var(--card);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 24, 60, 0.08);
}

.contact-details__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--brand-electric);
}

.contact-details__icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.contact-details__value {
  color: var(--fg);
  font-size: clamp(18px, 2.1vw, 24px);
  font-weight: var(--font-normal);
  line-height: 1.3;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contact-details__button:hover .contact-details__value {
  color: var(--brand-electric);
}

/* Summary */

.summary {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-top: 24px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  font-size: var(--text-body-sm);
  color: var(--muted-2);
}

.summary-row.total {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 16px;
  color: var(--fg);
  font-weight: var(--font-semibold);
  font-size: var(--text-body-sm);
}

/* Utility */

.text-center {
  text-align: center;
}

.mt-4 {
  margin-top: 16px;
}

.mt-6 {
  margin-top: 24px;
}

.mt-8 {
  margin-top: 32px;
}

.mt-12 {
  margin-top: 48px;
}

.mt-24 {
  margin-top: 96px;
}

.mw-640 {
  max-width: 640px;
}

.legal-hero .lead,
.legal-hero .hero-sub {
  max-width: none;
}

.legal-hero {
  padding-top: 144px;
  padding-bottom: 32px;
}

.legal-hero + .section {
  padding-top: 16px;
}

.legal-hero + .section h2 {
  font-size: var(--heading-h3);
}

.legal-hero + .section h3 {
  font-size: var(--text-body-lg);
}

.flex {
  display: flex;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.arrow::after {
  content: "→";
  margin-left: 4px;
}

/* Funnel payment two-column layout */
.payment-layout {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  margin-top: 28px;
  align-items: start;
}

@media (min-width: 820px) {
  .payment-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 36px;
  }
}

.payment-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.payment-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  background: var(--surface);
}

.payment-card__title {
  font-size: var(--text-body);
  font-weight: var(--font-semibold);
  color: var(--fg);
  margin: 0 0 12px;
}

.payment-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.payment-card ul li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-body-sm);
  color: var(--muted-2);
}

.payment-card ul li:last-child {
  border-bottom: none;
}

.payment-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 16px;
}

.payment-price__amount {
  font-size: var(--text-price);
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--fg);
}

.payment-price__period {
  color: var(--muted);
  font-size: var(--text-body-sm);
}

.goal-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.goal-chip {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-body-sm);
  font-weight: var(--font-medium);
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-electric) 10%, #fff);
  color: var(--brand-electric);
  border: 1px solid color-mix(in srgb, var(--brand-electric) 25%, var(--border));
}

.payment-stripe-note {
  font-size: var(--text-label);
  color: var(--muted);
  text-align: center;
  margin: 4px 0 0;
}

/* Small disclaimer box */

.note {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: var(--text-body-sm);
  color: var(--muted-2);
}

/* ---------- Internal design system page (not linked in nav) ---------- */

body.ds-page {
  min-height: 100vh;
}

.ds-banner {
  background: var(--fg);
  color: var(--surface);
  padding: 10px var(--page-padding);
  font-size: var(--text-body-sm);
  font-weight: var(--font-normal);
  text-align: center;
  letter-spacing: 0.02em;
}

.ds-page-title {
  font-size: var(--heading-h3);
  font-weight: var(--font-semibold);
  margin: 0 0 8px;
  font-family: var(--sans);
  letter-spacing: -0.02em;
}

.ds-lead {
  color: var(--muted-2);
  font-size: var(--text-body-sm);
  margin: 0;
  max-width: 560px;
}

.ds-h2 {
  font-size: var(--text-label);
  font-weight: var(--font-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin: 2.5rem 0 1.25rem;
  font-family: var(--sans);
}

.ds-swatch-grid {
  display: grid;
  gap: 12px 24px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .ds-swatch-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .ds-swatch-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ds-swatch {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--text-body-sm);
}

.ds-swatch-color {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  flex: 0 0 44px;
}

.ds-token {
  display: block;
  font-size: var(--text-body-sm);
  color: var(--muted);
  font-weight: var(--font-normal);
  margin-top: 2px;
  word-break: break-all;
  font-family: var(--sans);
}

.ds-typo-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.ds-typo-label {
  font-size: var(--text-label);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.ds-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
}

/* ---------- Bento: full-width sections + punchy color blocking ---------- */

.bento-strip {
  width: 100%;
  padding: 3rem 0;
}

.bento-strip--tinted {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.bento-strip-inner {
  max-width: var(--section-max-md);
  margin: 0 auto;
  padding: 0 var(--section-gutter);
  box-sizing: border-box;
}

.bento-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .bento-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

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

.bento-card {
  display: flex;
  flex-direction: column;
  background: var(--bento-surface);
  border-radius: var(--bento-radius);
  padding: 1.5rem 1.5rem 1.25rem;
  min-height: 0;
  text-align: left;
}

.bento-card__title {
  font-family: var(--sans);
  font-size: var(--text-body-lg);
  font-weight: var(--font-semibold);
  line-height: 1.3;
  color: var(--brand-navy);
  margin: 0 0 1rem;
  letter-spacing: -0.02em;
}

@media (min-width: 640px) {
  .bento-card__title {
    font-size: var(--heading-h3);
  }
}

.bento-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bento-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--pill-surface);
  border-radius: var(--pill-radius);
  font-family: var(--sans);
  font-size: var(--text-body-sm);
  font-weight: var(--font-normal);
  cursor: default;
  text-decoration: none;
  color: var(--fg);
  opacity: 0.9;
}

a.bento-pill:hover {
  border-color: rgba(0, 0, 0, 0.12);
  opacity: 1;
}

.bento-cta {
  display: block;
  width: 100%;
  margin-top: 0.75rem;
  min-height: 44px;
  padding: 0.65rem 1rem;
  border: 0;
  border-radius: var(--pill-radius);
  background: var(--brand-royal);
  color: #fff;
  font-family: var(--sans);
  font-size: var(--text-body);
  font-weight: var(--font-semibold);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease;
}

.bento-cta:hover {
  background: var(--brand-royal-hover);
  color: #fff;
}

.bento-cta--full {
  margin-top: 0.5rem;
}

/* Product / illustration well inside a bento card */
.bento-media {
  margin-top: auto;
  min-height: 120px;
  border-radius: var(--radius);
  background: var(--bento-surface-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-label);
  color: var(--brand-navy);
  opacity: 0.6;
  margin-top: 1rem;
}

/* Stat + bar block */
.bento-stat {
  font-family: var(--sans);
  font-size: var(--text-body);
  font-weight: var(--font-semibold);
  color: var(--brand-royal);
  margin: 0 0 0.75rem;
}

.bento-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.75rem;
  height: 140px;
  margin-top: 0.5rem;
  padding: 0 0.25rem;
}

.bento-bar {
  flex: 0 0 46%;
  max-width: 50%;
  border-radius: 10px 10px 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0.5rem;
  color: #fff;
  font-weight: var(--font-semibold);
  font-size: var(--text-body-lg);
  font-family: var(--sans);
  line-height: 1;
  box-sizing: border-box;
}

.bento-bar--navy {
  background: var(--brand-navy);
  height: 45%;
  min-height: 52px;
  align-self: flex-end;
}

.bento-bar--royal {
  background: var(--brand-royal);
  height: 100%;
  align-self: flex-end;
}

/* Stacked choice list (all-of-the-above style) */
.bento-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.bento-stack .bento-pill {
  width: 100%;
  justify-content: center;
  text-align: center;
  cursor: pointer;
}

.bento-stack .bento-cta {
  margin-top: 0.5rem;
}

/* ============================================================
 * PREMIUM LAYOUT PRIMITIVES (mid-fi wireframe)
 * ============================================================
 *
 * Use these for the marketing surface. Transactional / legal pages still use
 * .container + .section. Everything below is grayscale during the wireframe phase.
 *   Horizontal band widths — .section-frame--full | --large | --md | --sm (see Layout block)
 *   .section--fullbleed  — full-width section shell; bg / placeholder bleeds to edges
 *   .section--fullscreen — min-height: 100svh (Hero, Vial moment, Final CTA)
 *   .section--split      — 2-column with one half edge-to-edge (image / copy)
 *   .section--dark       — flips to mid-gray surface + light type (defers to navy in hi-fi)
 *   .copy                — readable column inside a fullbleed section (max --copy-max)
 *   .type--display       — display type at premium scale
 * ------------------------------------------------------------ */

.section--fullbleed {
  width: 100%;
  padding: 56px 0;
  position: relative;
}

@media (min-width: 640px) {
  .section--fullbleed {
    padding: 80px 0;
  }
}

@media (min-width: 1024px) {
  .section--fullbleed {
    padding: 112px 0;
  }
}

.section--fullscreen {
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  padding: 80px 0;
  box-sizing: border-box;
}

.section--dark {
  background: var(--dark-surface);
  color: var(--on-dark);
}

.section--dark .eyebrow {
  color: var(--on-dark-muted);
}

.section--dark h1,
.section--dark h2,
.section--dark h3 {
  color: var(--on-dark);
}

.section--dark .lead,
.section--dark p {
  color: var(--on-dark-muted);
}

.section--dark a {
  color: var(--on-dark);
}

.section--dark .btn-secondary,
.section--dark .btn-white {
  background: transparent;
  color: var(--on-dark);
  border-color: var(--on-dark);
  box-shadow: none;
}

.section--dark .btn-secondary:hover,
.section--dark .btn-white:hover {
  background: rgba(255, 255, 255, 0.08);
}

.section--dark .btn-primary {
  background: var(--brand-electric);
  color: #ffffff;
  border-color: var(--brand-electric);
}

.section--dark .btn-primary:hover {
  background: var(--brand-electric-hover);
  border-color: var(--brand-electric-hover);
}

/* Constrained copy column inside a fullbleed section. */
.copy {
  max-width: var(--copy-max);
  padding: 0 var(--section-gutter);
  margin: 0 auto;
}

.copy--left {
  margin: 0;
  margin-left: max(var(--section-gutter), calc((100% - var(--section-max-md)) / 2 + var(--section-gutter)));
}

/* 50/50 split. Image half is .split-media (flush to viewport edge);
   copy half is .split-copy (constrained to --copy-max). */
.section--split .split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
  min-height: 70vh;
}

@media (min-width: 768px) {
  .section--split .split-grid {
    grid-template-columns: 1fr 1fr;
  }

  .section--split .split-grid--40-60 {
    grid-template-columns: 40% 60%;
  }

  .section--split .split-grid--60-40 {
    grid-template-columns: 60% 40%;
  }
}

/* QA (md): the grid has no tablet tier, so the .section--split two-column split
   (50/50, 40/60, 60/40) inherits the desktop split at tablet (768–1023px). At
   that width one half collapses to a thin, over-tall media strip next to a
   cramped copy/form column. Stack it single-column (media on top, copy below) —
   matching the existing mobile layout — so the copy/form gets full width and the
   cover image isn't stretched. Desktop (≥1024px) keeps the two-column split;
   mobile (<768px) is already single-column. */
@media (min-width: 768px) and (max-width: 1023px) {
  .section--split .split-grid,
  .section--split .split-grid--40-60,
  .section--split .split-grid--60-40 {
    grid-template-columns: 1fr;
  }
}

.split-media {
  min-height: 320px;
}

.split-copy {
  display: flex;
  align-items: center;
  padding: 56px var(--section-gutter);
}

.split-copy > .copy-inner {
  max-width: var(--copy-max);
  width: 100%;
}

@media (min-width: 1024px) {
  .split-copy {
    padding: 96px 56px;
  }
}

/* ---------- Display type ---------- */

.type--display,
h1.type--display {
  font-family: var(--sans); /* serif decision deferred — see design-system.html */
  font-weight: var(--font-semibold);
  font-size: var(--display-h1);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 25ch;
}

h2.type--display,
.type--display-2 {
  font-family: var(--sans);
  font-weight: var(--font-semibold);
  font-size: var(--heading-h2);
  line-height: 1.18;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 25ch;
}

h3.type--display,
.type--display-3 {
  font-family: var(--sans);
  font-weight: var(--font-semibold);
  font-size: var(--display-h3);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 25ch;
}

/* ============================================================
 * MAX-WIDTH OVERRIDES — hero and intentionally wide headings
 * ============================================================
 *
 * The base type classes above are capped at 35ch for readability.
 * Hero headings and centered full-bleed sections intentionally
 * span wider and should not be constrained.
 * ------------------------------------------------------------ */

:is(
  .hero-fw,
  .hero-card,
  .hero-card__title,
  .hero--fullscreen,
  .hero--media,
  .page-hero
) :is(.type--display, .type--display-2, .type--display-3, .type--h2-long, h1, h2, h3),
:is(
  .pricing-hero__content,
  .initial-labs-head,
  .lab-locations-head
) :is(.type--display, .type--display-2, .type--display-3, .type--h2-long, h1, h2, h3) {
  max-width: none;
}

/* ============================================================
 * LABELED PLACEHOLDERS
 * ============================================================
 *
 * Convention: every image, video, and 3D moment in the wireframes is a
 * labeled rectangle that calls out aspect ratio, intent, and motion notes.
 * See design-system.html → Placeholder conventions.
 *
 *   <div class="ph ph--16x9" data-ph-aspect="16:9">
 *     <div class="ph-label">
 *       <span class="ph-kicker">3D · Kit reveal</span>
 *       <span class="ph-intent">Fullscreen editorial flat-lay …</span>
 *       <span class="ph-motion">Motion: scroll-linked open …</span>
 *     </div>
 *   </div>
 * ------------------------------------------------------------ */

.ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #82C8E5;
  border: 1px dashed rgba(9, 9, 11, 0.35);
  color: var(--fg);
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.ph--on-dark {
  background: #82C8E5;
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--on-dark);
}

.ph--16x9   { aspect-ratio: 16 / 9; }
.ph--4x3    { aspect-ratio: 4 / 3; }
.ph--3x4    { aspect-ratio: 3 / 4; }
.ph--1x1    { aspect-ratio: 1 / 1; }
.ph--21x9   { aspect-ratio: 21 / 9; }
.ph--3x2    { aspect-ratio: 3 / 2; }

/* Fills its parent (used inside .section--fullscreen as a backdrop) */
.ph--fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.ph--strip {
  aspect-ratio: auto;
  min-height: 240px;
}

@media (min-width: 1024px) {
  .ph--strip {
    min-height: 320px;
  }
}

.ph-label {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  max-width: min(300px, calc(100% - 120px));
  text-align: left;
  background: #d8d8db;
  border: 0;
  border-radius: 3px;
  font-family: var(--sans);
  font-size: var(--text-label);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--muted);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    visibility 160ms ease;
}


.ph--on-dark .ph-label {
  background: #4a4a50;
  color: var(--on-dark-muted);
}

.ph-kicker {
  font-size: 10.5px; /* decorative */
  font-weight: var(--font-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.ph--on-dark .ph-kicker {
  color: var(--on-dark-muted);
}

.ph-intent {
  font-size: var(--text-body-sm);
  font-weight: var(--font-semibold);
  color: inherit;
  letter-spacing: -0.005em;
}

.ph-motion,
.ph-aspect,
.ph-meta {
  font-size: var(--text-label);
  font-weight: var(--font-normal);
  color: var(--muted-2);
  font-family: var(--sans);
}

.ph--on-dark .ph-motion,
.ph--on-dark .ph-aspect,
.ph--on-dark .ph-meta {
  color: var(--on-dark-muted);
}

/* Aspect badge in the corner of a placeholder */
.ph-corner {
  display: none;
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  font-family: var(--sans);
  font-size: 10.5px; /* decorative */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  background: rgba(255, 255, 255, 0.8);
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid rgba(9, 9, 11, 0.12);
}

.ph--on-dark .ph-corner {
  color: var(--on-dark-muted);
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.2);
}

/* ============================================================
 * EDITORIAL HERO (fullscreen, fullbleed placeholder + asymmetric copy)
 * ============================================================ */

.hero-fw {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  width: 100%;
  /* Vertical padding: top clears fixed nav + frame band; bottom clears copy + matching frame band (--hero-frame-inset). */
  padding: calc(var(--nav-pill-outer) + 40px + var(--hero-frame-inset)) 0 calc(64px + var(--hero-frame-inset));
  overflow: hidden;
  box-sizing: border-box;
  background: var(--bg);
  color: var(--fg);
}

/* Slight inset on all sides — canvas shows outside the panel (set to 0 for full-bleed) */
.hero-fw .ph--fill,
.hero-fw .hero-fw-scrim {
  inset: var(--hero-frame-inset);
  border-radius: 0;
}

.hero-fw .ph--fill {
  /* Hero placeholder sits behind the scrim — inset defines box; avoid width/height 100% + inset overflow */
  z-index: 0;
  width: auto;
  height: auto;
  max-width: none;
  background: #82C8E5;
  border-color: rgba(9, 9, 11, 0.35);
  color: var(--fg);
}

.hero-fw-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0.15) 40%,
    rgba(0, 0, 0, 0.65) 100%
  );
  pointer-events: none;
}

.hero-fw--photo .hero-fw-scrim {
  background: linear-gradient(
    to top right,
    rgba(10, 25, 60, 0.82) 0%,
    rgba(10, 25, 60, 0.0) 55%
  );
}

.hero-fw-bg {
  position: absolute;
  inset: var(--hero-frame-inset);
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: top right;
  z-index: 0;
  border-radius: 0;
}

.hero-fw--photo {
  color: #fff;
}

.hero-fw--photo h1,
.hero-fw--photo .type--display {
  color: #fff;
}

.hero-fw.hero-fw--photo .lead {
  color: #fff;
}

.hero-fw.hero-fw--photo .eyebrow {
  color: #fff;
}

.hero-fw.hero-fw--photo .btn-link {
  color: #fff;
}

.hero-fw-inner {
  position: relative;
  z-index: 2;
  min-width: 0;
  width: 100%;
  /* width / max-width / padding: .section-frame--large when class present */
}

.hero-fw-copy {
  max-width: 760px;
}

.hero-fw .eyebrow {
  color: var(--muted-2);
}

.hero-fw .lead {
  color: var(--muted);
}

.hero-fw .hero-sub {
  color: var(--on-dark);
}

.hero-fw .hero-actions {
  margin-top: 36px;
  gap: 32px;
}

.hero-fw .btn-secondary,
.hero-fw .btn-white {
  background: transparent;
  color: var(--fg);
  border-color: var(--fg);
  box-shadow: none;
}

@media (min-width: 1024px) {
  .hero-fw {
    padding-top: calc(var(--nav-pill-outer) + 56px + var(--hero-frame-inset));
    padding-bottom: calc(96px + var(--hero-frame-inset));
  }
}

@media (max-width: 767px) {
  :is(.hero, .page-hero, .section--pricing-hero, .hero-card, .hero-fw) h1 {
    line-height: 1.06;
    letter-spacing: -0.02em;
  }

  .hero-actions {
    gap: 14px;
  }

  .hero--fullscreen {
    min-height: calc(100svh - var(--header-height));
    max-height: calc(100svh - var(--header-height));
    padding: 40px 0 48px;
  }

  .hero-fw {
    min-height: 100svh;
    max-height: 100svh;
    padding: calc(var(--nav-pill-outer) + 24px + var(--hero-frame-inset)) 0 calc(40px + var(--hero-frame-inset));
  }

  .hero-fw-copy {
    max-width: 100%;
  }

  .hero-fw .hero-actions {
    margin-top: 24px;
    gap: 14px;
  }

  .page-hero {
    padding: calc(var(--nav-pill-outer) + 32px) 0 40px;
  }

  .hero-card {
    min-height: auto;
    margin-top: calc(var(--section-gutter-sm) + 24px);
    padding-top: calc(var(--nav-pill-outer) + 16px);
  }

  .cta-band .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .cta-band .hero-actions .btn-link {
    min-height: 52px;
    padding: 14px 22px;
    border: 1px solid var(--fg);
    border-radius: var(--pill-radius);
    text-decoration: none;
  }
}

/* ============================================================
 * HOME OPENING — text block; scroll-driven sentence opacity (no reveal until scroll; see main.js)
 * ============================================================ */

.home-opening {
  background: var(--surface);
  color: var(--fg);
  padding: 72px 0;
}

@media (min-width: 1024px) {
  .home-opening {
    padding: 120px 0;
  }
}

.home-opening__intro {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.home-opening__label {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--text-label);
  font-weight: var(--font-semibold);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg);
}

.home-opening__label span {
  color: var(--brand-electric);
  margin-right: 6px;
}

/* Scroll sentence reveal — dim state only when [data-reveal-animated] is set by JS */
.text-reveal {
  max-width: 720px;
  margin: 0 auto;
  position: static;
  text-align: center;
  font-family: var(--sans);
  font-size: var(--text-body-lg);
  line-height: 1.5;
  letter-spacing: -0.01em;
  font-weight: var(--font-normal);
  color: var(--muted-2);
}

@media (min-width: 768px) {
  .text-reveal {
    font-size: var(--heading-h3);
    line-height: 1.45;
  }
}

@media (min-width: 1024px) {
  .text-reveal {
    font-size: var(--heading-h3);
  }
}

.text-reveal__p {
  margin: 0;
}

.text-reveal__problem {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  color: var(--muted-2);
}

/* Tight, even rhythm between headline → acknowledgement → pivot */
.text-reveal__p + .text-reveal__p {
  margin-top: 18px;
}

@media (min-width: 768px) {
  .text-reveal__p + .text-reveal__p {
    margin-top: 22px;
  }
}

/* Pivot copy: same size as the acknowledgement, lifted in colour
   so the rhetorical turn lands without changing weight or size. */
.text-reveal__pivot {
  color: var(--fg);
}

.text-reveal__p--hope {
  font-family: var(--sans);
  font-weight: var(--font-semibold);
  font-size: var(--display-h2);
  line-height: 1.06;
  letter-spacing: -0.03em;
  max-width: 18ch;
  margin: 0 auto;
  color: var(--fg);
}

/* Generous beat between the bold headline and the acknowledgement below */
.text-reveal__p--hope + .text-reveal__p {
  margin-top: clamp(28px, 4vw, 48px);
}

.text-reveal__sent {
  display: inline;
  color: var(--fg);
  opacity: 1;
}

.text-reveal[data-reveal-animated] .text-reveal__sent {
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}

.text-reveal[data-reveal-animated] .text-reveal__sent:not(.is-revealed) {
  opacity: 0;
}

.text-reveal[data-reveal-animated] .text-reveal__sent.is-revealed {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .text-reveal[data-reveal-animated] .text-reveal__sent {
    opacity: 1;
    transition: none;
  }
}

.text-reveal__strong {
  font-weight: var(--font-semibold);
  color: var(--fg);
}

.text-reveal__soft {
  color: var(--muted-2);
  font-weight: inherit;
}

/* ============================================================
 * RECOGNITION BAND ("sound familiar?" interactive checklist)
 * ============================================================ */

.recognition {
  background: var(--surface);
  padding: 80px 0;
}

@media (min-width: 1024px) {
  .recognition {
    padding: 120px 0;
  }
}

.recognition-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 768px) {
  .recognition-grid {
    grid-template-columns: 1fr 1.1fr;
    gap: 80px;
  }
}

.recognition-checks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
}

.recognition-check {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  font-size: var(--text-body);
  color: var(--fg);
  line-height: 1.4;
}

.recognition-check:last-child {
  border-bottom: 0;
}

.recognition-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 1.5px solid var(--fg);
  border-radius: 3px;
  margin: 0;
  background: var(--surface);
  cursor: pointer;
  position: relative;
  margin-top: 2px;
}

.recognition-check input[type="checkbox"]:checked {
  background: var(--fg);
}

.recognition-check input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-body-sm);
  color: var(--surface);
  line-height: 1;
}

.recognition-result {
  margin-top: 28px;
  padding: 24px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  font-size: var(--text-body-sm);
  color: var(--muted-2);
  display: none;
}

.recognition-result.is-visible {
  display: block;
}

.recognition-result strong {
  color: var(--fg);
  display: block;
  font-size: var(--text-body);
  margin-bottom: 8px;
}

.recognition-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

/* ============================================================
 * BOLT DIFFERENCE (institutional 3-row contrast)
 * ============================================================ */

.diff-rows {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
}

.diff-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
}

@media (min-width: 768px) {
  .diff-row {
    grid-template-columns: 200px 1fr 1fr;
    gap: 40px;
    padding: 40px 0;
    align-items: baseline;
  }
}

.diff-rows--single .diff-row {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .diff-rows--single .diff-row {
    grid-template-columns: 200px 1fr;
  }
}

.diff-row .diff-axis {
  font-size: var(--text-body-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: var(--font-semibold);
}

.diff-row .diff-pos,
.diff-row .diff-neg {
  font-size: var(--text-body);
  line-height: 1.5;
}

.diff-row .diff-pos strong,
.diff-row .diff-neg strong {
  display: block;
  font-size: var(--text-body-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: var(--font-semibold);
  margin-bottom: 8px;
}

.diff-row .diff-pos strong {
  color: var(--fg);
}

.diff-row .diff-neg {
  color: var(--muted-2);
}

/* ============================================================
 * HOW IT WORKS (4-up; all steps visible at every breakpoint)
 * ============================================================ */

.hiw-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  position: relative;
}

@media (min-width: 768px) {
  .hiw-grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}

@media (min-width: 1024px) {
  .hiw-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 48px;
  }
}

@media (min-width: 1280px) {
  .hiw-grid {
    gap: 64px;
  }
}

/* Hairline rule connecting the 4 numbered markers (desktop only) */
@media (min-width: 1024px) {
  .hiw-grid::before {
    content: "";
    position: absolute;
    top: 38px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border);
    z-index: 0;
  }
}

.hiw-step {
  position: relative;
  z-index: 1;
}

.hiw-step .hiw-num {
  font-family: var(--sans);
  font-weight: var(--font-semibold);
  font-size: var(--text-price);
  line-height: 1;
  color: var(--fg);
  letter-spacing: -0.04em;
  margin-bottom: 20px;
  background: var(--bg);
  display: inline-block;
  padding-right: 16px;
}

@media (min-width: 1024px) {
  .hiw-step .hiw-num {
    font-size: var(--display-h1);
  }
}

.hiw-step .hiw-step-title {
  font-size: var(--text-body-lg);
  font-weight: var(--font-semibold);
  line-height: 1.3;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.hiw-step .hiw-step-body {
  font-size: var(--text-body-sm);
  color: var(--muted-2);
  line-height: 1.55;
  margin: 0;
}

/* ============================================================
 * HOW IT WORKS — homepage 3-card showcase (warm editorial)
 * ============================================================ */

main > section.section.section--hiw-showcase {
  --hiw-cream: #faf7f2;
  --hiw-card-bg: #f5efe6;
  --hiw-terracotta: #b06343;
  --hiw-terracotta-hover: #9a5639;
  --hiw-text: #2d2a26;
  --hiw-muted: #6b6560;
  --hiw-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  background: var(--hiw-cream);
}

.section--hiw-showcase .container {
  max-width: var(--maxw);
}

.hiw-showcase__head {
  text-align: center;
  margin-bottom: 40px;
}

.hiw-showcase__lede {
  font-family: var(--sans);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--hiw-muted);
  max-width: 40rem;
  margin: 24px auto 0;
  font-style: normal;
  font-weight: var(--font-normal);
}

@media (min-width: 640px) {
  .hiw-showcase__lede {
    font-size: var(--text-body);
  }
}

@media (min-width: 768px) {
  .hiw-showcase__head {
    margin-bottom: 48px;
  }
}

.hiw-showcase__eyebrow {
  font-family: var(--sans);
  font-size: var(--text-label);
  font-weight: var(--font-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hiw-muted);
  margin: 0 0 12px;
}

.hiw-showcase__title {
  font-family: var(--hiw-serif);
  font-size: var(--heading-h2);
  font-weight: var(--font-normal);
  font-style: normal;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--hiw-text);
  margin: 0;
}

.hiw-showcase__title-plain {
  font-style: normal;
}

.hiw-showcase__title-accent {
  font-style: italic;
  color: var(--hiw-terracotta);
  font-weight: var(--font-normal);
}

.hiw-showcase__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .hiw-showcase__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
  }
}

.hiw-card {
  background: var(--hiw-card-bg);
  border-radius: 16px;
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
}

@media (min-width: 640px) {
  .hiw-card {
    padding: 28px 26px 24px;
  }
}

.hiw-card__num {
  display: block;
  font-family: var(--sans);
  font-size: var(--text-label);
  font-weight: var(--font-semibold);
  color: var(--hiw-terracotta);
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.hiw-card__title {
  font-family: var(--hiw-serif);
  font-size: var(--text-body-lg);
  font-weight: var(--font-semibold);
  line-height: 1.25;
  color: var(--hiw-text);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.hiw-card__sub {
  font-family: var(--sans);
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: var(--hiw-muted);
  margin: 0;
}

.hiw-card__visual {
  margin-top: auto;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.45);
  padding: 14px 12px;
  min-height: 140px;
}

/* Schedule picker mock */
.hiw-card__visual--schedule {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hiw-schedule__dates,
.hiw-schedule__times {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--sans);
  font-size: 10px; /* decorative */
  font-weight: var(--font-semibold);
  letter-spacing: 0.04em;
  color: var(--hiw-text);
}

.hiw-schedule__dates span,
.hiw-schedule__times span {
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(176, 99, 67, 0.15);
}

.hiw-schedule__dates span.is-selected,
.hiw-schedule__times span.is-selected {
  background: var(--hiw-terracotta);
  color: #fff;
  border-color: var(--hiw-terracotta);
}

/* Results chart mock */
.hiw-card__visual--chart {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 12px;
  align-items: stretch;
  padding: 12px 10px 12px 12px;
}

.hiw-chart__labels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 8px; /* decorative */
  font-weight: var(--font-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hiw-muted);
  line-height: 1.3;
  padding: 4px 0;
  max-width: 72px;
}

.hiw-chart__pill {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--hiw-terracotta);
  color: #fff;
  font-size: 8px; /* decorative */
  letter-spacing: 0.04em;
}

.hiw-chart__plot {
  position: relative;
  min-height: 100px;
}

.hiw-chart__band {
  position: absolute;
  left: 0;
  right: 0;
  top: 28%;
  height: 36%;
  background: rgba(176, 99, 67, 0.08);
  border-radius: 4px;
  pointer-events: none;
}

.hiw-chart__svg {
  display: block;
  width: 100%;
  height: 72px;
  position: relative;
  z-index: 1;
}

.hiw-chart__dash {
  stroke: rgba(107, 101, 96, 0.35);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.hiw-chart__line {
  stroke: var(--hiw-terracotta);
}

.hiw-chart__dot {
  fill: var(--hiw-terracotta);
}

.hiw-chart__vals {
  display: flex;
  justify-content: space-between;
  padding: 2px 8px 0;
  font-family: var(--sans);
  font-size: 10px; /* decorative */
  font-weight: var(--font-semibold);
  color: var(--hiw-text);
  position: relative;
  z-index: 1;
}

/* Plan list mock */
.hiw-card__visual--list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.55);
}

.hiw-plan-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(176, 99, 67, 0.12);
}

.hiw-plan-row__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--hiw-terracotta);
  opacity: 0.92;
}

.hiw-plan-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hiw-plan-row__text strong {
  font-family: var(--sans);
  font-size: var(--text-label);
  font-weight: var(--font-semibold);
  color: var(--hiw-text);
}

.hiw-plan-row__text span {
  font-family: var(--sans);
  font-size: var(--text-label);
  line-height: 1.4;
  color: var(--hiw-muted);
}

.hiw-showcase__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

@media (min-width: 640px) {
  .hiw-showcase__actions {
    margin-top: 48px;
    gap: 16px;
  }
}

.hiw-showcase__btn {
  border-radius: 999px;
  padding: 12px 24px;
  min-height: 48px;
  font-family: var(--sans);
  font-size: var(--text-body);
}

.hiw-showcase__btn--primary {
  background: var(--hiw-terracotta);
  color: #fff;
  border-color: var(--hiw-terracotta);
}

.hiw-showcase__btn--primary:hover {
  background: var(--hiw-terracotta-hover);
  border-color: var(--hiw-terracotta-hover);
  color: #fff;
}

.hiw-showcase__btn--outline {
  background: transparent;
  color: var(--hiw-terracotta);
  border: 1.5px solid var(--hiw-terracotta);
}

.hiw-showcase__btn--outline:hover {
  background: rgba(176, 99, 67, 0.08);
  color: var(--hiw-terracotta);
  border-color: var(--hiw-terracotta);
}

/* HOW IT WORKS — its own encapsulated section.
   White section bg, grey card inset with the same margin as .cta-band. */
.section--hiw-process {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(clamp(56px, 8vh, 96px) * var(--section-vpad-scale)) 0;
}

.section--hiw-process::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--hiw-process-bg-image, none);
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

.section--hiw-process .modern-grid {
  position: relative;
  z-index: 1;
}

.hiw-section-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: calc(clamp(48px, 7vw, 88px) * var(--section-vpad-scale)) 0;
  margin: 0;
}

.hiw-section-card > * {
  position: relative;
  z-index: 1;
}

.hiw-section__heading {
  margin: 0;
  max-width: none;
  text-align: center;
  font-family: var(--sans);
  font-weight: var(--font-semibold);
  font-size: var(--heading-h2);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--fg);
}

.hiw-process__head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: nowrap;
}

.hiw-process__head .hiw-section__heading {
  flex: 0 1 auto;
  min-width: 0;
}

@media (min-width: 1024px) {
  .hiw-section__heading {
    font-size: var(--heading-h2);
  }
}

.hiw-process__bridge {
  margin: 72px 0 0;
  font-size: var(--heading-h3);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--fg);
}

.section--hiw-process .hiw-grid {
  gap: var(--card-gap);
  margin-top: clamp(48px, 6vw, 72px);
  align-items: stretch;
}

@media (min-width: 1024px) {
  .hiw-process__bridge {
    margin-top: 88px;
  }

  .section--hiw-process .hiw-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--card-gap);
    margin-top: clamp(64px, 7vw, 88px);
  }
}

.section--hiw-process .hiw-grid::before {
  display: none;
}

/* ── Homepage HIW: horizontal snap-scroll carousel on tablet/mobile ── */
@media (max-width: 1024px) {
  /* Allow the carousel to overflow the section horizontally */
  .section--hiw-process {
    overflow: visible;
  }

  .section--hiw-process .hiw-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--section-gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 16px;
    /* Full-bleed breakout: span the full viewport width regardless of
       how many nested padding layers sit above (.modern-grid gutter etc).
       margin-left: calc(-50vw + 50%) shifts the element so its left edge
       is at the viewport left edge; width: 100vw fills edge-to-edge.
       padding-left/right re-instates the gutter so cards align with text. */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding-left: var(--section-gutter);
    padding-right: var(--section-gutter);
    box-sizing: border-box;
    /* Override grid-template-columns from base .hiw-grid rules */
    grid-template-columns: unset;
  }

  .section--hiw-process .hiw-grid::-webkit-scrollbar {
    display: none;
  }

  .section--hiw-process .hiw-grid > .hiw-step {
    flex: 0 0 calc(85% - 16px);
    scroll-snap-align: start;
    min-width: 0;
  }

}

/* Tablet (md): narrower cards so two fit on screen at a time. */
@media (min-width: 768px) and (max-width: 1024px) {
  .section--hiw-process .hiw-grid > .hiw-step {
    flex: 0 0 calc(48% - 8px);
  }
}

.section--hiw-process .hiw-step {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--fg);
  padding: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.section--hiw-process .hiw-step__visual {
  width: auto;
  margin: 0;
  padding: 0;
  background: var(--brand-light-blue);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-height: 0;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  align-items: flex-end;
}

.section--hiw-process .hiw-grid > .hiw-step:last-child .hiw-step__visual {
  padding-bottom: 0;
}

.section--hiw-process .hiw-step__visual img {
  display: block;
  width: 100%;
  height: auto;
}

.section--hiw-process .hiw-grid[data-hiw-stagger] .hiw-step {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.section--hiw-process .hiw-grid[data-hiw-stagger] .hiw-step.is-visible {
  opacity: 1;
  transform: none;
}

.section--hiw-process .hiw-grid[data-hiw-stagger] .hiw-step:nth-child(2) {
  transition-delay: 90ms;
}

.section--hiw-process .hiw-grid[data-hiw-stagger] .hiw-step:nth-child(3) {
  transition-delay: 180ms;
}

.section--hiw-process .hiw-grid[data-hiw-stagger] .hiw-step:nth-child(4) {
  transition-delay: 270ms;
}

@media (prefers-reduced-motion: reduce) {
  .section--hiw-process .hiw-grid[data-hiw-stagger] .hiw-step {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.section--hiw-process .hiw-step .hiw-num {
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--brand-blue);
  font-size: var(--heading-h2);
  font-weight: var(--font-semibold);
  line-height: 1;
  letter-spacing: -0.02em;
}

.section--hiw-process .hiw-step .hiw-step-title {
  color: var(--fg);
  margin: 0 0 10px;
  font-size: var(--text-body-lg);
}

.section--hiw-process .hiw-step .hiw-step-body {
  color: var(--muted-2);
  font-size: var(--text-body);
  font-weight: var(--font-medium);
}

.hiw-process__cta {
  display: flex;
  justify-content: center;
  margin: clamp(40px, 5vw, 56px) auto 0;
  flex: 0 0 auto;
}

/* QA (xs/sm/md): heading spans the full row; the CTA drops below the cards.
   On lg the inline CTA rides top-right of the heading instead. */
.hiw-process__cta--inline {
  display: none;
}

.hiw-process__cta--below {
  display: flex;
  margin-left: 0;
  justify-content: flex-start;
  margin-top: clamp(24px, 4vw, 40px);
}

@media (min-width: 1024px) {
  .hiw-process__cta--inline {
    display: flex;
  }

  .hiw-process__cta--below {
    display: none;
  }
}

.hiw-step__copy {
  padding-bottom: 32px;
}

.section--hiw-process .hiw-step__copy {
  padding: 0;
  margin-bottom: 24px;
  flex: 1 1 auto;
  min-height: 0;
}

.hiw-step__visual {
  width: calc(100% + 56px);
  margin: auto -28px 0;
  background: #82C8E5;
  border: 0;
  border-radius: 16px 16px 0 0;
  min-height: 220px;
  color: var(--fg);
}


/* ============================================================
 * PROTOCOL MOMENT (homepage stabilising graph)
 * ============================================================ */

.protocol-moment {
  display: block;
  min-height: auto;
  overflow: hidden;
  isolation: isolate;
  background: var(--dark-surface);
  color: var(--on-dark);
  padding: calc(clamp(80px, 10vw, 132px) * var(--section-vpad-scale)) 0;
}

/* Encapsulated card variant — guttered + rounded, like .cta-band but dark/navy */
.protocol-moment--card {
  background: var(--brand-navy);
  color: var(--on-dark);
  margin-top: clamp(24px, 4vw, 48px);
  margin-bottom: clamp(24px, 4vw, 48px);
  margin-left: max(var(--section-gutter), calc((100% - var(--grid-inner-max)) / 2));
  margin-right: max(var(--section-gutter), calc((100% - var(--grid-inner-max)) / 2));
  border-radius: var(--section-card-radius);
  overflow: hidden;
  isolation: isolate;
  min-height: auto;
  display: block;
  /* Vertical padding now lives on .protocol-layout (via --grid-col-outer). */
  padding: 0;
  border-top: none;
  border-bottom: none;
}

.protocol-moment--card .modern-grid {
  padding-left: 0;
  padding-right: 0;
}

/* QA: shared --grid-gap rhythm between graph card and numbers row,
   AND between the number cards (see .protocol-moment .numbers-grid).
   The heading-to-graph gap gets a bigger bump below. */
.protocol-moment--card .protocol-layout {
  gap: var(--grid-gap);
  /* QA: pad on all sides by one grid track (col + gap). With the inner
     contents using span-d-12, the result is naturally 10 cols wide because
     we've inset 1 col + 1 gap on each side. */
  padding: var(--grid-col-outer);
}

/* QA: extra breathing room between the heading/subhead block and the
   graph card. */
.protocol-moment--card .protocol-header + .protocol-card {
  margin-top: clamp(32px, 5vw, 56px);
}

.protocol-moment--card .protocol-header {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.protocol-moment--card .protocol-copy {
  align-items: center;
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* QA: section heading sits at default h2 size, not bumped to h1. */
.protocol-moment--card .protocol-copy .type--display-2 {
  font-size: var(--heading-h2);
}

.protocol-moment--card .protocol-copy .lead,
.protocol-moment--card .protocol-copy p {
  color: rgba(255, 255, 255, 0.70);
}

.protocol-moment--card .protocol-card {
  background: rgba(255, 255, 255, 0.05);
}

.protocol-moment--card-inset {
  margin-left: 0;
  margin-right: 0;
}

.protocol-moment--card .number-stat {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.12);
}

.protocol-moment--card .number-stat .number-stat-value {
  color: var(--on-dark);
}

.protocol-moment--card .number-stat .number-stat-label,
.protocol-moment--card .number-stat .number-stat-unit {
  color: var(--on-dark-muted);
}

.protocol-layout {
  /* width / max-width / horizontal padding: .section-frame--large when class present */
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 22px);
}

.protocol-header {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
  color: var(--on-dark);
}

.protocol-card {
  --protocol-card-pad: var(--section-gutter);
  position: relative;
  overflow: hidden;
  min-height: auto;
  padding: clamp(12px, 2vw, 24px) var(--protocol-card-pad);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: var(--dark-surface);
  color: var(--on-dark);
  box-shadow: none;
}

.protocol-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 650px;
  margin-bottom: 0;
  padding: 0;
}

h2.protocol-heading,
.protocol-heading {
  font-size: var(--heading-h2);
  line-height: 1.18;
}

.protocol-heading__keep {
  white-space: nowrap;
}

.protocol-actions {
  position: relative;
  flex-shrink: 0;
  z-index: 3;
}

.protocol-stage {
  position: relative;
  z-index: 0;
  display: block;
  min-width: 0;
  min-height: 0;
  margin: 0 calc(-1 * var(--protocol-card-pad));
  padding: 0;
  background: transparent;
}

.protocol-stage::after {
  display: none;
}

.protocol-graph {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.protocol-graph__topline,
.protocol-graph__axis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 calc(var(--protocol-card-pad) / 2);
  font-family: var(--sans);
  font-size: var(--text-label);
  color: var(--on-dark-muted);
}

.protocol-graph__topline {
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 6px;
  letter-spacing: 0;
  text-transform: none;
}

.protocol-graph__topline strong {
  font-size: var(--text-body-lg);
  font-weight: var(--font-semibold);
  color: var(--on-dark);
  letter-spacing: 0;
  text-transform: none;
}

.protocol-graph__topline span {
  font-size: var(--text-body-lg);
  font-weight: var(--font-normal);
  color: var(--on-dark-muted);
  letter-spacing: 0;
  text-transform: none;
}

.protocol-graph__axis {
  position: relative;
  margin-top: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--on-dark-muted);
  font-size: var(--text-body-lg);
}

.protocol-graph__axis span {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.protocol-graph__axis span::before {
  content: "";
  display: block;
  width: 1px;
  height: 8px;
  background: var(--on-dark-muted);
  opacity: 0.7;
}

.protocol-graph__svg {
  display: block;
  width: 100%;
  height: clamp(240px, 28vw, 360px);
  overflow: visible;
}

.protocol-graph__gridline,
.protocol-graph__volatile,
.protocol-graph__stabilising {
  vector-effect: non-scaling-stroke;
}

.protocol-graph__gridline {
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1;
  stroke-dasharray: 5 10;
}

.protocol-graph__target {
  fill: rgba(255, 255, 255, 0.06);
}

.protocol-graph__volatile,
.protocol-graph__stabilising {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.protocol-graph__volatile {
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1.5;
}

.protocol-graph__stabilising {
  stroke: var(--on-dark);
  stroke-width: 2;
}

.protocol-graph__volatile,
.protocol-graph__stabilising {
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
}

.protocol-graph.is-animating .protocol-graph__volatile,
.protocol-graph.is-animating .protocol-graph__stabilising {
  transition: stroke-dashoffset 1.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.1s;
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .protocol-graph__volatile,
  .protocol-graph__stabilising {
    stroke-dashoffset: 0;
    transition: none;
  }
}

@media (max-width: 767px) {
  .protocol-copy {
    max-width: 680px;
  }

  .protocol-graph {
    transform: rotate(0deg);
    /* QA (xs/sm): side padding equal to the grid gap so the curves don't
       run hard against the card edge. */
    padding-inline: var(--grid-gap);
  }
}

@media (max-width: 640px) {
  .protocol-card {
    padding: 24px;
    border-radius: 16px;
  }

  .protocol-header {
    align-items: flex-start;
  }

  .protocol-actions {
    margin-top: 8px;
  }
}

/* ============================================================
 * NUMBERS STRIP (credibility band)
 * ============================================================ */

.numbers-strip {
  padding: calc(clamp(72px, 9vw, 118px) * var(--section-vpad-scale)) 0 0;
  background: var(--surface);
}

.numbers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 22px);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--page-padding);
}

.protocol-moment .numbers-grid {
  max-width: none;
  margin: 0;
  padding: 0;
  /* QA: matched to .protocol-layout gap (--grid-gap) so the stack rhythm
     is uniform — graph ↔ numbers gap = number-card gap. */
  gap: var(--grid-gap);
}

@media (min-width: 768px) {
  .numbers-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.number-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  /* QA: number and label stack at the top of the card with a tight gap
     (was justify-content: space-between, which forced them to opposite
     ends of the card and ignored the gap value). */
  justify-content: flex-start;
  gap: clamp(8px, 1.2vw, 16px);
  padding: clamp(20px, 2.6vw, 32px);
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: none;
}

.number-stat .number-stat-value {
  font-family: var(--sans);
  font-weight: var(--font-medium);
  font-size: clamp(36px, 5vw, 72px);
  line-height: 0.88;
  color: var(--fg);
  white-space: nowrap;
}

.number-stat-unit {
  display: inline-block;
  margin-left: 8px;
  color: var(--muted);
  font-size: 0.26em; /* decorative — em-based superscript */
  font-weight: var(--font-regular);
}


.number-stat .number-stat-label {
  font-size: var(--text-body);
  font-weight: var(--font-medium);
  color: var(--muted-2);
  line-height: 1.45;
  max-width: 24ch;
  text-wrap: balance;
}

@media (min-width: 1024px) {
  .number-stat .number-stat-label {
    max-width: 25ch;
  }
}

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

}

.section--dark .number-stat {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.12);
}

.section--dark .number-stat .number-stat-value {
  color: var(--on-dark);
}

.section--dark .number-stat .number-stat-label {
  color: var(--on-dark-muted);
}

.section--dark .number-stat .number-stat-unit {
  color: var(--on-dark-muted);
}

/* ============================================================
 * FINAL CTA BAND — 2:1 card on desktop; copy left, layered media right.
 * Bottom layer: bolt motif SVG. Top layer: headshot portrait.
 * ============================================================ */

.cta-band {
  position: relative;
  width: auto;
  margin-top: clamp(32px, 5vw, 72px);
  margin-bottom: clamp(32px, 5vw, 72px);
  margin-left: max(var(--section-gutter), calc((100% - var(--grid-inner-max)) / 2));
  margin-right: max(var(--section-gutter), calc((100% - var(--grid-inner-max)) / 2));
  min-height: 0;
  background: var(--brand-light-blue);
  color: var(--fg);
  overflow: hidden;
  border-radius: var(--section-card-radius);
}

.cta-band__grid {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  align-items: stretch;
  background: var(--brand-light-blue);
}

.cta-band__grid > .layout-col.d-only {
  display: none;
}

.cta-band__copy {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  padding: var(--grid-col-outer);
  background: var(--brand-light-blue);
}

.cta-band__copy.layout-col {
  grid-column: auto;
}

.cta-band__copy-inner {
  width: 100%;
  /* QA: fill the copy column on stacked layouts; lg restores the copy-max cap. */
  max-width: none;
  display: flex;
  flex-direction: column;
  /* QA: center-aligned by default (xs / sm / md); lg restores left alignment. */
  text-align: center;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.cta-band__media {
  position: relative;
  z-index: 0;
  min-height: clamp(280px, 42vw, 420px);
  background: var(--brand-light-blue);
  overflow: hidden;
}

.cta-band__media-stack {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--brand-light-blue);
}

.cta-band__motif {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.cta-band__portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: bottom center;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  /* QA: scroll-driven parallax — JS sets --cta-parallax-y on the band */
  transform: translate3d(0, var(--cta-parallax-y, 0px), 0);
  will-change: transform;
}

@media (max-width: 1023px) {
  .cta-band__motif {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    object-position: top center;
  }
}

@media (min-width: 768px) {
  .cta-band {
    border-radius: var(--section-card-radius);
  }
}

/* QA (md): on tablet (768–1023px) the CTA band would otherwise stay stacked
   (copy block above the media block) until the 1024px row layout kicks in,
   producing a very tall band and a narrow, centered copy column. Tablets have
   enough width for a side-by-side band, so lay the copy + media out as a row
   here (copy gets the larger ~58% share so the heading + button read on one
   side without awkward wrapping). Mirrors the ≥1024px layout but without the
   2/1 aspect-ratio lock, letting the band height follow its content. */
@media (min-width: 768px) and (max-width: 1023px) {
  .cta-band__grid {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 0;
  }

  .cta-band__copy,
  .cta-band__copy.layout-col {
    flex: 1 1 58%;
    max-width: 58%;
    min-width: 0;
  }

  .cta-band__copy-inner {
    min-height: 100%;
    max-width: var(--copy-max);
    text-align: left;
    align-items: flex-start;
  }

  .cta-band__copy-inner .lead {
    margin-left: 0;
    margin-right: auto;
  }

  .cta-band__copy-inner .hero-actions {
    justify-content: flex-start;
  }

  .cta-band__media {
    flex: 1 1 42%;
    max-width: 42%;
    min-width: 0;
    align-self: stretch;
  }
}


@media (min-width: 1024px) {
  .cta-band {
    aspect-ratio: 2 / 1;
  }

  .cta-band__grid {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 0;
  }

  .cta-band__copy,
  .cta-band__copy.layout-col {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
    min-width: 0;
  }

  .cta-band__copy-inner {
    min-height: 100%;
    /* QA: restore the copy-max cap + left alignment in the side-by-side desktop layout. */
    max-width: var(--copy-max);
    text-align: left;
    align-items: flex-start;
  }

  .cta-band__copy-inner .lead {
    margin-left: 0;
    margin-right: auto;
  }

  .cta-band__copy-inner .hero-actions {
    justify-content: flex-start;
  }

  .cta-band__media {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
    min-width: 0;
    min-height: 0;
    height: auto;
    align-self: stretch;
    overflow: hidden;
  }
}

.cta-band h2,
.cta-band .type--display-2 {
  color: var(--brand-navy);
  /* QA: larger than the default h2, but tuned with a smaller vw coefficient so
     it stays controlled inside the half-width copy column at md / lower desktop.
     Goes big only on wide screens where the column is roomy. */
  font-size: clamp(36px, 4.6vw, 76px);
  line-height: 1.04;
}

.cta-band .lead {
  color: color-mix(in srgb, var(--brand-navy) 70%, transparent);
  margin-top: 20px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* QA: keep text + button vertically centered as a single block in the band.
   (Drop the margin-top: auto that previously pushed the button to the bottom.) */
.cta-band .hero-actions {
  margin-top: clamp(24px, 3vw, 36px);
  gap: 32px;
  justify-content: center;
}

.cta-band--compact .cta-band__copy-inner {
  min-height: 0;
  gap: clamp(16px, 2.2vw, 28px);
}

.cta-band--compact .lead,
.cta-band--compact .hero-actions {
  margin-top: 0;
}

/* Mobile (stacked CTA band): give the copy block more breathing room above the
   heading so it doesn't feel cramped against the top edge. Scoped to the 3 plan
   pages so other pages' CTA bands are untouched. */
@media (max-width: 767px) {
  .page-testosterone .cta-band__copy,
  .page-weight-loss .cta-band__copy,
  .page-sexual-health .cta-band__copy {
    padding-top: calc(var(--grid-col-outer) + clamp(16px, 5vw, 28px));
  }
}

.cta-band .btn-secondary,
.cta-band .btn-white {
  background: transparent;
  color: var(--fg);
  border-color: var(--border);
  box-shadow: none;
}

/* ============================================================
 * KIT MOMENT / SIGNATURE MOMENT (homepage slot #6)
 * ============================================================ */

.signature-moment {
  position: relative;
  min-height: 100svh;
  width: 100%;
  display: flex;
  align-items: stretch;
  background: var(--dark-surface);
  color: var(--on-dark);
}

.signature-moment .ph--fill {
  z-index: 0;
}

.signature-caption {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 64px var(--page-padding);
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 1024px) {
  .signature-caption {
    grid-template-columns: 2fr 1fr;
    align-items: end;
    padding: 96px var(--page-padding);
  }
}

.signature-caption .signature-eyebrow {
  font-size: var(--text-label);
  font-weight: var(--font-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}

.signature-caption .signature-headline {
  color: var(--on-dark);
  font-weight: var(--font-semibold);
  letter-spacing: -0.025em;
  font-size: var(--heading-h3);
  line-height: 1.1;
  max-width: 22ch;
  margin: 4px 0 0;
}

@media (min-width: 1024px) {
  .signature-caption .signature-headline {
    font-size: var(--text-price);
  }
}

.signature-caption .signature-sub {
  font-weight: var(--font-medium);
  color: var(--on-dark-muted);
  font-size: var(--text-body-sm);
  max-width: 36ch;
}

/* ============================================================
 * STORY CAROUSEL (wireframed video + text review mix)
 * Centered heading + full-bleed slow-drift carousel.
 * ============================================================ */

.home-stories {
  overflow: hidden;
  padding-inline: 0;
}

.home-stories-header {
  padding: 0;
  margin-bottom: clamp(32px, 5vw, 56px);
  text-align: center;
}

.home-stories-title,
h2.home-stories-title {
  max-width: 22ch;
  margin: 0 auto;
}

.home-stories-sub {
  max-width: 44ch;
  margin: 16px auto 0;
  color: var(--muted);
}

.story-carousel {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 4px 0 8px;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.story-carousel.is-dragging {
  cursor: grabbing;
}

.story-track {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: max-content;
  padding-inline: 12px;
  will-change: transform;
}

.story-card {
  position: relative;
  flex: 0 0 clamp(260px, 72vw, 320px);
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.story-carousel.is-dragging .story-card {
  transform: scale(0.95);
}

.story-card--text {
  justify-content: space-between;
  padding: 0;
}

.story-card--text .story-quote {
  padding: var(--card-pad) var(--card-pad) var(--card-pad);
}

.story-card--text .story-card-attribution {
  padding: 0 var(--card-pad) var(--card-pad);
}

.info-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
}

.info-card__kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.info-card__title {
  margin: 0;
  font-size: var(--heading-h3);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.info-card__body {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-body);
  line-height: 1.5;
}

.info-card--link {
  color: var(--fg);
  text-decoration: none;
}

.info-card__link {
  margin-top: auto;
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg);
}

.story-card--muted {
  background: var(--surface);
}

/* Brand-colour text card variants */
.story-card--navy {
  background: var(--brand-navy);
  border-color: transparent;
}
.story-card--navy .story-quote,
.story-card--navy .story-card-name {
  color: #ffffff;
}
.story-card--navy .story-card-location {
  color: rgba(255, 255, 255, 0.55);
}
.story-card--navy .story-card-avatar {
  background: rgba(255, 255, 255, 0.15);
  border-color: transparent;
}

.story-card--electric {
  background: var(--brand-electric);
  border-color: transparent;
}
.story-card--electric .story-quote,
.story-card--electric .story-card-name {
  color: #ffffff;
}
.story-card--electric .story-card-location {
  color: rgba(255, 255, 255, 0.65);
}
.story-card--electric .story-card-avatar {
  background: rgba(255, 255, 255, 0.2);
  border-color: transparent;
}

.story-card--light-blue {
  background: var(--brand-light-blue);
  border-color: transparent;
}
.story-card--light-blue .story-quote,
.story-card--light-blue .story-card-name {
  color: var(--brand-navy);
}
.story-card--light-blue .story-card-location {
  color: rgba(0, 24, 60, 0.6);
}
.story-card--light-blue .story-card-avatar {
  background: rgba(0, 24, 60, 0.12);
  border-color: transparent;
}

.story-card--yellow {
  background: var(--brand-yellow);
  border-color: transparent;
}
.story-card--yellow .story-quote,
.story-card--yellow .story-card-name {
  color: var(--brand-navy);
}
.story-card--yellow .story-card-location {
  color: rgba(0, 24, 60, 0.6);
}
.story-card--yellow .story-card-avatar {
  background: rgba(0, 24, 60, 0.12);
  border-color: transparent;
}

.story-card--video {
  padding: 0;
  background: var(--surface);
}

.story-card-video-media {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  overflow: hidden;
}

.story-card-video-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bottom gradient scrim for caption legibility on video cards */
.story-card-video-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 0;
}

.story-quote {
  margin: 0;
  max-width: 22ch;
  font-family: var(--sans);
  font-size: var(--text-body-lg);
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-weight: var(--font-normal);
  color: var(--fg);
}

.story-card-attribution {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 20px;
}

.story-card-person {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.story-card-name {
  font-size: var(--text-body);
  font-weight: var(--font-semibold);
  line-height: 1.3;
  color: var(--fg);
  letter-spacing: -0.005em;
}

.story-card-location {
  font-size: var(--text-label);
  line-height: 1.3;
  color: var(--muted);
}

/* Mobile: hide the location subtitle on the scrolling reviews carousel
   to reduce visual noise as cards drift past. Name + quote remain. */
@media (max-width: 767px) {
  .story-carousel .story-card-location {
    display: none;
  }
}

.story-card-avatar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  aspect-ratio: 1 / 1;
}

.story-card-video-media .story-card-attribution--on-media {
  position: absolute;
  left: var(--card-pad);
  right: var(--card-pad);
  bottom: var(--card-pad);
  z-index: 2;
  padding-top: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.story-card-attribution--on-media .story-card-name {
  color: #ffffff;
}

.story-card-attribution--on-media .story-card-location {
  color: rgba(255, 255, 255, 0.82);
}

.story-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 108px;
  height: 108px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: 0 12px 36px rgba(9, 9, 11, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: none;
}

.story-play::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-35%, -50%);
  width: 0;
  height: 0;
  border-top: 24px solid transparent;
  border-bottom: 24px solid transparent;
  border-left: 33px solid #fff;
}

.story-play--pause::before {
  width: 11px;
  height: 36px;
  border: 0;
  background: #fff;
  box-shadow: 22px 0 0 #fff;
  transform: translate(calc(-50% - 11px), -50%);
}

.story-card--video.is-playing .story-play.story-play--flash {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  z-index: 4;
  animation: story-play-flash 0.65s ease forwards;
}

.story-card--video.is-playing .story-play.story-play--flash::before {
  border-left-color: #fff;
}

.story-card--video.is-playing .story-play.story-play--flash.story-play--pause::before {
  background: #fff;
  box-shadow: 22px 0 0 #fff;
}

@keyframes story-play-flash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.84);
  }

  16% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  70% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.94);
  }
}

.story-card--video[data-story-video-card] {
  cursor: pointer;
}

.story-card--video[data-story-video-card]:focus-visible {
  outline: 2px solid var(--brand-electric);
  outline-offset: 2px;
}

.story-card-video-player {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #111;
}

.story-card-video-player[hidden] {
  display: none;
}

.story-card--video.is-playing .story-play {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.story-card--video.is-playing {
  cursor: default;
}

.story-card--video.is-playing .story-card-attribution--on-media {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.story-card-video-ui {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.story-card-video-ui[hidden] {
  display: none;
}

.story-card-video-subtitles {
  margin: 0 0 14px;
  text-align: center;
  color: #fff;
  font-family: var(--sans);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 2px 12px rgba(0, 0, 0, 0.45),
    0 0 20px rgba(0, 0, 0, 0.35);
}

.story-card-video-subtitles[hidden] {
  display: none;
}

.story-card-video-mute-btn {
  position: absolute;
  top: var(--card-pad);
  right: var(--card-pad);
  z-index: 2;
  pointer-events: auto;
}

.story-card-video-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 14px;
  padding: 0 var(--card-pad) var(--card-pad);
  pointer-events: auto;
}

.story-card-video-progress {
  position: relative;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
  overflow: hidden;
}

.story-card-video-progress__fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: #fff;
  pointer-events: none;
}

.story-card-video-seek {
  position: absolute;
  inset: -12px 0;
  width: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.story-card-video-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(9, 9, 11, 0.16);
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.story-card-video-icon-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.38);
  border-color: rgba(255, 255, 255, 0.42);
}

.story-card-video-icon-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.story-card-video-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.story-card-video-icon[hidden] {
  display: none;
}

.story-card-video-icon svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

@media (max-width: 640px) {
  .story-card-video-bar {
    gap: 10px;
    padding-bottom: calc(var(--card-pad) - 2px);
  }

  .story-card-video-icon-btn {
    width: 40px;
    height: 40px;
  }

  .story-card-video-icon svg {
    width: 16px;
    height: 16px;
  }
}

@media (min-width: 768px) {
  .story-track {
    gap: 16px;
    padding-inline: 16px;
  }

  .story-card {
    flex-basis: clamp(300px, 32vw, 380px);
  }

  .story-quote {
    font-size: var(--text-body-lg);
  }
}

/* ============================================================
 * EDUCATION HUB (homepage slot #10)
 * ============================================================ */

.edu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--card-gap);
}

@media (min-width: 768px) {
  .edu-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.edu-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--fg);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.2s ease;
}

.edu-card:hover {
  transform: translateY(-2px);
}

.edu-card__media {
  position: absolute;
  inset: 0;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  transition: transform 0.35s ease;
}

.edu-card:hover .edu-card__media,
.edu-card:focus-visible .edu-card__media {
  transform: scale(1.03);
}

.edu-card__media img,
.edu-card__media picture,
.edu-card__media video {
  display: block;
  width: 100%;
  height: 100%;
}

.edu-card__media img,
.edu-card__media picture > img,
.edu-card__media video {
  object-fit: cover;
}

.edu-card__content {
  position: relative;
  z-index: 2;
  inset: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 100%;
  gap: 10px;
  padding: 28px;
  background: transparent;
}

.edu-kicker {
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: var(--font-semibold);
}

.edu-title {
  max-width: 14ch;
  font-size: var(--heading-h3);
  font-weight: var(--font-semibold);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--fg);
}

.edu-card__btn {
  margin-top: auto;
  align-self: flex-start;
  background: transparent;
  color: var(--fg);
  border-color: var(--fg);
  pointer-events: none;
}

.edu-card:hover .edu-card__btn,
.edu-card:focus-visible .edu-card__btn {
  background: var(--fg);
  color: var(--on-dark);
  border-color: var(--fg);
}

/* ============================================================
 * MINIMAL FUNNEL HEADER (logo-only)
 * ============================================================ */

.funnel-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.funnel-header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--page-padding);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.funnel-header-inner .logo {
  display: flex;
  align-items: center;
}

.funnel-header-inner .logo img {
  height: 28px;
  width: auto;
  display: block;
}

.funnel-header-inner .funnel-exit {
  font-size: var(--text-body-sm);
  color: var(--muted);
}

.funnel-header-inner .funnel-exit:hover {
  color: var(--fg);
}

.funnel-footnote {
  margin: 24px 0 0;
  text-align: center;
  font-size: var(--text-body-sm);
  line-height: 1.55;
  color: var(--muted);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
 * ACCORDION (FAQ pattern reused on faqs.html)
 * ============================================================ */

.accordion {
  border-top: 1px solid var(--border);
}

.accordion-section + .accordion-section {
  margin-top: 48px;
}

.accordion-section h3 {
  font-size: var(--text-body-lg);
  font-weight: var(--font-semibold);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

/* ============================================================
 * PAGE HERO — interior pages (not fullscreen)
 * ============================================================ */

.page-hero {
  padding: calc(var(--nav-pill-outer) + 48px) 0 56px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.page-hero--double-top {
  padding-top: calc((var(--nav-pill-outer) + 48px) * 2);
}

@media (min-width: 1024px) {
  .page-hero {
    padding: calc(var(--nav-pill-outer) + 96px) 0 96px;
  }

  .page-hero--double-top {
    padding-top: calc((var(--nav-pill-outer) + 96px) * 2);
  }
}

.page-hero .container {
  position: relative;
}

:is(.hero, .page-hero, .section--pricing-hero, .hero-card, .hero-fw) h1 {
  font-size: var(--display-h1);
  line-height: 1;
  letter-spacing: -0.03em;
}

.hero-fw h1 {
  font-size: var(--display-h1-home);
}

:is(.hero, .page-hero, .section--pricing-hero, .hero-card, .hero-fw) .eyebrow + h1 {
  margin-top: 12px;
}

:is(.hero, .page-hero, .section--pricing-hero, .hero-card, .hero-fw) .lead {
  max-width: 640px;
}

:is(.hero, .page-hero, .section--pricing-hero, .hero-card, .hero-fw) h1 + .lead,
:is(.hero, .page-hero, .section--pricing-hero, .hero-card, .hero-fw) h1 + .hero-sub {
  margin-top: var(--hero-h1-gap);
}

/* Utility: tag a deferred / hi-fi annotation in copy */
.deferred-note {
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: var(--font-semibold);
  display: inline-block;
  padding: 2px 8px;
  border: 1px dashed var(--border);
  border-radius: 3px;
}

/* ============================================================
 * SOFT CTA TRIPLET (used in the hero + final CTA + nav contexts)
 * ============================================================ */

.soft-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.soft-cta-row .soft-link {
  font-size: var(--text-body-sm);
  color: var(--muted);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.section--dark .soft-cta-row .soft-link,
.hero-fw .soft-cta-row .soft-link {
  color: var(--on-dark-muted);
}

.soft-cta-row .soft-link:hover {
  color: var(--fg);
}

.section--dark .soft-cta-row .soft-link:hover,
.hero-fw .soft-cta-row .soft-link:hover {
  color: var(--on-dark);
}

/* ============================================================
 * MOBILE STICKY SOFT CTA (sticky bottom of viewport on mobile)
 * ============================================================ */

.mobile-sticky-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 10px var(--page-padding);
  gap: 10px;
}

.mobile-sticky-cta .btn {
  flex: 1;
}

@media (max-width: 767px) {
  .mobile-sticky-cta {
    display: none;
  }

  body {
    padding-bottom: 0;
  }
}

/* ============================================================
 * LANDSCAPE TRANSITION STRIP (between sections #7 and #8)
 * ============================================================ */

/* ============================================================
 * EDITORIAL PAGE HERO — interior pages (Jeton "Newsroom" pattern)
 * Full-bleed background, content bottom-aligned: large H1 lower-left,
 * eyebrow + lead + actions lower-right. Next section sits below with
 * a rounded top to feel inset.
 * ============================================================ */
.hero-card {
  position: relative;
  width: auto;
  /* Fit the viewport exactly: nav height at the top, height fills the
     remainder. The fixed nav overlays the top margin (--site-header-layout-h is
     set to the real header height by main.js; 96px is the pre-JS fallback). The
     bottom white border matches the side gutters (--section-gutter-sm) and is
     subtracted from the height so the card still fits the viewport. */
  margin: var(--site-header-layout-h, 96px) var(--section-gutter-sm) var(--section-gutter-sm);
  min-height: calc(100svh - var(--site-header-layout-h, 96px) - var(--section-gutter-sm));
  display: flex;
  align-items: flex-end;
  overflow: clip;
  isolation: isolate;
  border-radius: var(--section-card-radius);
  background: #d8d8db;
  padding-top: calc(var(--nav-pill-outer) + 24px);
  /* Match the inner side padding (--section-gutter-offset) so the internal gap
     between the content and the card edge is equal on the sides and bottom. */
  padding-bottom: var(--section-gutter-offset);
  color: var(--fg);
}

.hero-card > .scroll-bg-parallax__wrap,
.hero-card > .hero-card__scrim {
  pointer-events: none;
}

.hero-card--top {
  align-items: flex-start;
  padding-top: calc(var(--nav-pill-outer) + 56px);
}

/* ---- Photo hero card treatment (home + interior plan pages) ---- */
.hero-card--home,
.hero-card--photo {
  color: #fff;
}

.hero-card--home .hero-card-bg,
.hero-card--photo .hero-card-bg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 0;
}

.hero-card--home .hero-card-bg {
  object-position: top right;
}

/* QA (mobile): shift the home hero subject into frame on xs/sm/md. */
@media (max-width: 1023px) {
  .hero-card--home .hero-card-bg {
    object-position: 60% center;
  }
}

/* QA (md): cap the home hero height so it isn't taller than it is wide. */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-card--home {
    min-height: 0;
    height: 100vw;
    max-height: 100vw;
  }
}

/* QA (xs/sm): unify internal padding across the encapsulated cards (hero,
   dark protocol card, CTA band) onto the smaller --grid-gap variable. */
@media (max-width: 767px) {
  .hero-card--home .hero-card__inner.modern-grid {
    padding-inline: var(--grid-gap);
  }

  /* Keep the internal bottom gap equal to the mobile inner side padding. */
  .hero-card {
    padding-bottom: clamp(16px, 5vw, 24px);
  }

  .hero-card--home {
    padding-bottom: var(--grid-gap);
  }

  .protocol-moment--card .protocol-layout {
    padding: var(--grid-gap);
  }

  .cta-band__copy {
    padding: var(--grid-gap);
  }
}

.hero-card--photo .hero-card-bg {
  object-position: top right;
}

.hero-card--home .hero-card__scrim {
  background: linear-gradient(
    to top right,
    rgba(10, 25, 60, 0.82) 0%,
    rgba(10, 25, 60, 0.0) 55%
  );
}

.hero-card--photo .hero-card__scrim {
  background: linear-gradient(
    to right,
    rgba(10, 25, 60, 0.52) 0%,
    rgba(10, 25, 60, 0.22) 45%,
    rgba(10, 25, 60, 0.0) 70%
  );
}

.hero-card--home h1,
.hero-card--home .type--display {
  color: #fff;
  font-size: var(--display-h1-home);
}

.hero-card--photo h1,
.hero-card--photo .type--display {
  color: #fff;
}

.hero-card--home .hero-sub,
.hero-card--photo .hero-sub {
  color: rgba(255, 255, 255, 0.88);
}

.hero-card--home .btn-link,
.hero-card--photo .btn-link {
  color: #fff;
}

.hero-card--home .hero-actions {
  margin-top: clamp(20px, 2.5vw, 36px);
}

/* ---- Founder attribution label (desktop/tablet only) ---- */
.hero-founder-label {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 4px rgba(10, 25, 60, 0.55);
  pointer-events: none;
}

.hero-founder-label span {
  margin: 0 0.35em;
  opacity: 0.6;
}

/* Hidden on mobile (<=767px) by default. */
.hero-founder-label--corner,
.hero-founder-label--col {
  display: none;
}

/* Tablet (768–1023px): corner label pinned to the hero's top-right. */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-founder-label--corner {
    display: block;
    position: absolute;
    z-index: 3;
    top: calc(var(--nav-pill-outer, 24px) + 16px);
    right: clamp(16px, 3vw, 28px);
  }
}

/* Desktop (>=1024px): hero content splits into two columns — heading/sub/CTAs
   in column 1, founder label bottom-aligned in column 2. */
@media (min-width: 1024px) {
  .hero-card--home .hero-card__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: var(--grid-gap);
  }

  .hero-founder-label--col {
    display: block;
    align-self: end;
    justify-self: end;
    text-align: right;
    white-space: nowrap;
  }
}

.hero-card .ph--fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 0;
  border: 0;
}

.hero-card__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.18) 100%);
  pointer-events: none;
}

.hero-card__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 32px);
}

.hero-card__inner.modern-grid {
  /* Card frame sits at --section-gutter-sm; offset content to section rail. */
  padding-left: var(--section-gutter-offset);
  padding-right: var(--section-gutter-offset);
}

/* The hero inner is a flex column here (not a real grid), so the empty grid
   spacer columns (.d-only.span-d-1) add nothing horizontally but inject a
   phantom flex gap above and below the content — which made the internal
   bottom padding read larger than the sides. Hide them so the bottom gap
   equals the side gap (--section-gutter-offset). */
.hero-card__inner > .layout-col:empty {
  display: none;
}

@media (max-width: 767px) {
  /* On phones --section-gutter-offset collapses to ~4px, leaving hero copy
     hugging the edge. Give the inner content comfortable side padding. */
  .hero-card__inner.modern-grid {
    padding-left: clamp(16px, 5vw, 24px);
    padding-right: clamp(16px, 5vw, 24px);
  }
}

.hero-card__title {
  max-width: 50%;
}

@media (max-width: 767px) {
  .hero-card__title {
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .hero-card {
    border-radius: var(--section-card-radius);
  }
}

.hero-card__title h1,
.hero-fw h1.type--display {
  color: var(--fg);
}

.hero-card--home .hero-card__title h1,
.hero-card--photo .hero-card__title h1,
.hero-fw--photo h1.type--display {
  color: #fff;
}

.hero-card__meta {
  max-width: 560px;
  margin-top: clamp(24px, 3vw, 44px);
}

.hero-card__meta .lead {
  margin: 0;
  color: var(--muted-2);
}


.landscape-strip {
  width: 100%;
}

.landscape-strip .ph {
  height: 30vh;
  min-height: 200px;
  aspect-ratio: auto;
  border-left: 0;
  border-right: 0;
}

@media (min-width: 1024px) {
  .landscape-strip .ph {
    height: 36vh;
  }
}

/* ============================================================
 * PRINCIPLES (About page — numbered editorial blocks)
 * ============================================================ */

.principles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 768px) {
  .principles-grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px 64px;
  }
}

.principle {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px 20px;
  align-items: start;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.principle-num {
  font-size: var(--heading-h3);
  font-weight: var(--font-semibold);
  letter-spacing: -0.01em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.principle h3 {
  margin: 0;
  font-size: var(--text-body-lg);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: var(--font-semibold);
  grid-column: 2;
}

.principle p {
  grid-column: 2;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: var(--text-body);
  line-height: 1.6;
}

@media (min-width: 1024px) {
  .principle h3 {
    font-size: var(--heading-h3);
  }
}

.about-principles-card {
  padding: clamp(28px, 4vw, 44px);
}

.about-grid--flush {
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 767px) {
  .about-grid--flush {
    padding-left: var(--section-gutter);
    padding-right: var(--section-gutter);
  }
}

/* ---------- Founders stage (outer container) ---------- */

.about-founders-stage {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: clamp(36px, 6vw, 72px) var(--section-gutter) var(--section-gutter);
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vw, 48px);
}

.about-founders-stage > * {
  position: relative;
  z-index: 2;
}

.about-founders-stage__copy {
  max-width: 640px;
  text-align: center;
  margin: 0 auto;
  color: var(--fg);
}

.about-founders-stage__copy h2 {
  color: var(--brand-navy);
}

.about-founders-stage__copy .lead {
  color: var(--muted-2);
}

/* ---------- Founders grid ---------- */

.about-founders-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .about-founders-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 1040px;
    margin-inline: auto;
  }
}

.about-founder-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--section-card-radius);
  padding: 0;
  overflow: hidden;
}

.about-founder-card__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  background:
    radial-gradient(120% 120% at 50% 18%, rgba(130, 200, 229, 0.4) 0%, rgba(130, 200, 229, 0) 60%),
    linear-gradient(160deg, #1b2740 0%, #0c1426 100%);
  margin: 0;
  overflow: hidden;
  flex-shrink: 0;
}

.about-founder-card__photo::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18%;
  width: 64%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  background: url("/media/motifs/bolt-light-blue.svg") center / contain no-repeat;
  opacity: 0.22;
}

/* When a real headshot is present, fill the frame and drop the decorative motif/gradient. */
.about-founder-card__photo:has(img) {
  background: none;
}

.about-founder-card__photo:has(img)::after {
  display: none;
}

.about-founder-card__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}

.about-founder-card__body {
  padding: 2rem 1.75rem 2.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.about-founder-card__name {
  font-family: var(--sans);
  font-size: var(--text-body);
  font-weight: var(--font-semibold);
  line-height: 1.3;
  color: var(--brand-navy);
  margin: 0 0 0.25rem;
  letter-spacing: -0.01em;
}

.about-founder-card__role {
  font-size: var(--text-body-sm);
  font-weight: var(--font-medium);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.75rem;
}

.about-founder-card__blurb {
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

.about-bento-block.section {
  padding: 0;
}

.about-bento-block + .about-bento-block {
  margin-top: var(--section-gutter-sm);
}

.about-bento-block.cta-band {
  margin-left: var(--section-gutter);
  margin-right: var(--section-gutter);
}

/* ---------- Model cards (Why we exist / How we practice / The long arc) ---------- */

.about-model-grid {
  gap: var(--section-gutter-sm);
}

.about-model-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  padding: clamp(22px, 2.8vw, 34px);
}

.about-model-card h3 {
  margin: 0 0 12px;
  font-size: var(--heading-h3);
  line-height: 1.2;
}

.about-model-card p {
  margin: 0;
  line-height: 1.6;
}

.about-model-card--navy {
  background: var(--brand-navy);
}
.about-model-card--navy h3 {
  color: #ffffff;
}
.about-model-card--navy p {
  color: rgba(255, 255, 255, 0.78);
}

.about-model-card--electric {
  background: var(--brand-electric);
}
.about-model-card--electric h3 {
  color: #ffffff;
}
.about-model-card--electric p {
  color: rgba(255, 255, 255, 0.82);
}

.about-model-card--light-blue {
  background: var(--brand-light-blue);
}
.about-model-card--light-blue h3 {
  color: var(--brand-navy);
}
.about-model-card--light-blue p {
  color: rgba(0, 24, 60, 0.72);
}

.about-principles-grid {
  grid-template-columns: 1fr;
  gap: 28px;
}

.about-values-section {
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

.about-values-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: #07080b;
  min-height: calc(100svh - (var(--section-gutter) * 2));
  display: grid;
  grid-template-columns: 1fr;
  isolation: isolate;
}

.about-values-panel__bg-wrap,
.scroll-bg-parallax__wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: -20%;
  z-index: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
}

/* Reverse: bleed top + bottom so opposite scroll travel never exposes edges */
.scroll-bg-parallax__wrap--reverse {
  top: -10%;
  bottom: -10%;
}

/* About feature panels: extra bleed = more parallax travel for a more dramatic effect */
.scroll-bg-parallax__wrap--about {
  top: -8%;
  bottom: -42%;
}

.about-values-panel__bg,
.scroll-bg-parallax__wrap > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
}

.about-values-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(7, 8, 11, 0.55) 0%, rgba(7, 8, 11, 0.38) 42%, rgba(7, 8, 11, 0.1) 70%, rgba(7, 8, 11, 0.04) 100%);
}

.about-values-panel__copy {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 5vw, 56px);
  color: #f5f7fc;
}

.about-values-panel__copy h2 {
  color: #f7f9ff;
  max-width: 22ch;
}

.about-values-grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: calc(var(--section-gutter-sm) * 2);
  row-gap: calc(var(--section-gutter-sm) * 1.5);
  margin-top: var(--section-gutter);
}

.about-value-item {
  position: relative;
  padding: 0;
}

.about-value-item__num {
  color: rgba(186, 200, 236, 0.9);
  font-size: var(--text-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: var(--font-semibold);
}

.about-value-item h3 {
  margin: 8px 0 0;
  color: #f8faff;
  font-size: var(--text-body);
  line-height: 1.25;
}

.about-value-item p {
  margin: 10px 0 0;
  color: rgba(234, 239, 255, 0.82);
  font-size: var(--text-body);
  line-height: 1.55;
}

@media (min-width: 1024px) {
  .about-values-panel__copy {
    width: 50%;
    max-width: 50%;
    padding-right: clamp(28px, 5vw, 56px);
  }

  .about-values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 4vw, 56px);
    row-gap: calc(var(--section-gutter-sm) * 1.5);
  }
}

.about-telemedicine-stage {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: clamp(620px, 78vh, 820px);
  padding: clamp(28px, 5vw, 56px) clamp(28px, 5vw, 56px) clamp(40px, 7vw, 88px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background-color: #07080b;
}

.about-telemedicine-stage__bg,
.about-telemedicine-stage .scroll-bg-parallax__wrap > img {
  object-position: center center;
}

.about-telemedicine-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(7, 8, 11, 0.52) 0%, rgba(7, 8, 11, 0.34) 42%, rgba(7, 8, 11, 0.62) 100%);
  pointer-events: none;
}

.about-telemedicine-stage__copy {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  max-width: 680px;
  text-align: center;
  color: #f5f7fc;
}

.about-telemedicine-stage__copy h2 {
  color: #f7f9ff;
  margin-inline: auto;
}

.about-telemedicine-stage__copy .lead {
  color: rgba(245, 247, 252, 0.82);
  margin-inline: auto;
}

/* Visual cluster: central facetime call + an HMW card overlaid on each side */
.about-telemedicine-stage__visual {
  position: relative;
  z-index: 2;
  margin: clamp(28px, 5vw, 56px) auto 0;
  width: 100%;
  max-width: 820px;
}

.about-telemedicine-stage__call {
  position: relative;
  z-index: 2;
  width: min(620px, 100%);
  margin: 0 auto;
  aspect-ratio: 4 / 3;
  border-radius: clamp(28px, 3.4vw, 44px);
  overflow: hidden;
  border: clamp(12px, 1.6vw, 20px) solid #0a0a0a;
  background: #0a0a0a;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 28px 56px rgba(9, 9, 11, 0.42);
}

.about-telemedicine-stage__call img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.about-telemedicine-stage__card {
  position: absolute;
  z-index: 3;
  width: clamp(176px, 24vw, 248px);
  will-change: transform;
}

.about-telemedicine-stage__card img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 36px rgba(9, 9, 11, 0.32));
}

/* Results card — anchored toward the top-right of the iPad */
.about-telemedicine-stage__card--results {
  top: clamp(-24px, -1.6vw, -8px);
  right: 0;
}

/* Timeline card — anchored toward the bottom-left of the iPad */
.about-telemedicine-stage__card--timeline {
  bottom: clamp(-24px, -1.6vw, -8px);
  left: 0;
}

/* One-time entrance reveal — the cards fade + ease into place (staggered)
 * when the section first scrolls into view. The hidden initial state is
 * only applied once JS has flagged the stage (`--reveal`), so cards never
 * stay invisible if JS fails. The reveal animates the inner <img>, leaving
 * the card wrapper's [data-parallax] inline transform untouched. */
@media (prefers-reduced-motion: no-preference) {
  .about-telemedicine-stage--reveal .about-telemedicine-stage__card img {
    opacity: 0;
    transform: translateY(22px) scale(0.96);
    transition:
      opacity 0.7s ease,
      transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .about-telemedicine-stage--reveal
    .about-telemedicine-stage__card--timeline
    img {
    transition-delay: 0.14s;
  }

  .about-telemedicine-stage--reveal.is-revealed
    .about-telemedicine-stage__card
    img {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 767px) {
  .about-telemedicine-stage {
    min-height: auto;
    border-radius: var(--radius-lg);
    padding: 20px 20px 24px;
    display: grid;
    gap: 14px;
  }

  .about-telemedicine-stage__copy {
    max-width: none;
  }

  .about-telemedicine-stage__visual {
    position: relative;
    margin-top: 6px;
  }

  .about-telemedicine-stage__call {
    width: 100%;
    aspect-ratio: 16 / 11;
  }

  .about-telemedicine-stage__card {
    width: clamp(112px, 38vw, 168px);
  }

  .about-telemedicine-stage__card--results {
    top: -10px;
    right: -6px;
  }

  .about-telemedicine-stage__card--timeline {
    bottom: -10px;
    left: -6px;
  }
}

/* ============================================================
 * KIT REVEAL (homepage — merged signature moment + compact item grid)
 * ============================================================ */

.kit-reveal {
  position: relative;
  background: #fff;
  color: var(--fg);
  padding: 0 0 96px;
}

/* Hero — pinned(-ish) 3D box reveal. Sized to ~70svh so the grid below
 * peeks up into the viewport and the section reads as one idea, not two. */
.kit-hero {
  position: relative;
  min-height: 70svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 0;
}

.kit-hero > .ph {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #82C8E5;
  border-color: rgba(9, 9, 11, 0.16);
  color: var(--fg);
}

.kit-hero > .ph .ph-label,
.kit-card-media .ph-label {
  background: rgba(255, 255, 255, 0.86);
  color: var(--muted);
}

.kit-hero > .ph .ph-kicker,
.kit-card-media .ph-kicker {
  color: var(--muted);
}

.kit-hero > .ph .ph-motion,
.kit-hero > .ph .ph-aspect,
.kit-hero > .ph .ph-meta,
.kit-card-media .ph-motion,
.kit-card-media .ph-aspect,
.kit-card-media .ph-meta {
  color: var(--muted-2);
}

.kit-hero > .ph .ph-corner,
.kit-card-media .ph-corner {
  color: var(--muted-2);
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(9, 9, 11, 0.12);
}

.kit-hero-caption {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

@media (min-width: 768px) {
  .kit-hero-caption {
    padding: 64px 24px 72px;
    gap: 18px;
  }
}

/* Bottom scrim so the caption reads over the 3D box */
.kit-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.62) 45%,
    rgba(255, 255, 255, 0) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.kit-hero .signature-eyebrow {
  display: inline-block;
  font-size: var(--text-label);
  font-weight: var(--font-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.kit-hero .signature-headline {
  margin: 0;
  color: var(--fg);
  font-size: var(--heading-h2);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: var(--font-semibold);
  max-width: 18ch;
}

.kit-hero .signature-sub {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-body);
  line-height: 1.5;
  max-width: 46ch;
}

/* Grid wrap */
.kit-grid-wrap {
  width: 100vw;
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 32px 0 0;
}

@media (min-width: 768px) {
  .kit-grid-wrap {
    padding: 40px 0 0;
  }
}

@media (min-width: 1024px) {
  .kit-grid-wrap {
    height: 145svh;
    overflow: clip;
  }
}

.kit-grid {
  --kit-rail-pad: 24px;
  --kit-card-gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--kit-card-gap);
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--kit-rail-pad);
  padding: 8px var(--kit-rail-pad) 28px;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 1024px) {
  .kit-grid {
    --kit-rail-pad: 48px;
    --kit-card-gap: 18px;
    position: sticky;
    top: 96px;
    width: max-content;
    overflow: visible;
    scroll-snap-type: none;
    will-change: transform;
  }
}

.kit-grid-note {
  margin: 20px auto 0;
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: var(--muted);
  max-width: 640px;
  text-align: center;
}

.kit-card {
  position: relative;
  overflow: visible;
  border-radius: var(--radius-lg, 16px);
  min-height: clamp(300px, 30vw, 390px);
  flex: 0 0 min(76vw, 260px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(245, 245, 241, 0.94)),
    #f4f4f1;
  border: 1px solid rgba(9, 9, 11, 0.12);
  isolation: isolate;
  box-shadow: 0 18px 52px rgba(9, 9, 11, 0.08);
  scroll-snap-align: start;
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    background-color 220ms ease,
    box-shadow 220ms ease;
  transform-origin: center;
}

@media (min-width: 1024px) {
  .kit-card {
    flex: 0 0 calc((100vw - (var(--kit-rail-pad) * 2) - (var(--kit-card-gap) * 3)) / 4);
    min-width: 0;
  }
}

.kit-card:hover {
  z-index: 4;
  transform: translateY(-8px) scale(1.045);
  border-color: rgba(9, 9, 11, 0.24);
  background-color: #fafaf7;
  box-shadow: 0 28px 80px rgba(9, 9, 11, 0.16);
}

/* Centered item layer. In production this becomes a transparent product image
 * or isolated object render, kept away from the edges like the reference cards. */
.kit-card-media {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(70%, 210px);
  height: min(34%, 148px);
  min-height: 116px;
  border-radius: calc(var(--radius-lg, 16px) - 2px);
  will-change: transform;
  transform: translate3d(-50%, -50%, 0);
  z-index: 1;
  background: #82C8E5;
  border-color: rgba(9, 9, 11, 0.22);
  color: var(--fg);
  box-shadow:
    0 24px 58px rgba(9, 9, 11, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  transition:
    width 220ms ease,
    height 220ms ease,
    box-shadow 220ms ease;
}

.kit-card:hover .kit-card-media {
  width: min(76%, 230px);
  height: min(38%, 166px);
  box-shadow:
    0 34px 78px rgba(9, 9, 11, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.kit-card-scrim {
  display: none;
}

.kit-card-body {
  position: absolute;
  inset: 22px 16px 20px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 7px;
  color: var(--fg);
  pointer-events: none;
}

@media (min-width: 1024px) {
  .kit-card-body {
    gap: 8px;
  }
}

.kit-num {
  font-size: 10px; /* decorative */
  font-weight: var(--font-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}

.kit-name {
  margin: 0;
  width: 100%;
  font-size: var(--text-body);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: var(--font-semibold);
  color: var(--fg);
}

.kit-name .kit-meta {
  display: block;
  font-size: 10px; /* decorative */
  font-weight: var(--font-normal);
  letter-spacing: 0;
  color: var(--muted-2);
  margin: 2px 0 0;
}

.kit-desc {
  display: block;
  margin: auto auto 0;
  max-width: 22ch;
  font-size: var(--text-body-sm);
  line-height: 1.45;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .kit-card,
  .kit-card-media {
    transform: none !important;
    transition: none;
  }

  .kit-card-media {
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%) !important;
  }
}

/* ============================================================
 * KIT ARC (homepage — soft-arc drift variant)
 * A tall scroll section with a pinned stage. Centered copy stays
 * in place while six object cards drift across the viewport in
 * soft arcs driven by scroll progress. JS writes inline
 * transforms on each .kit-arc-card; this sheet is the stage.
 * ============================================================ */

.kit-arc {
  position: relative;
  background: #fff;
  color: var(--fg);
  /* Total scroll length of the sequence. ~100svh of pinning +
   * ~160svh of travel. Tuned to feel deliberate without dragging. */
  height: 260svh;
}

.kit-arc-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

/* Centered copy sits behind the card rail so product cards pass over it. */
.kit-arc-copy {
  position: relative;
  z-index: 2;
  max-width: 780px;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  pointer-events: none;
  transform: translateY(-18vh);
}

@media (min-width: 768px) {
  .kit-arc-copy {
    gap: 18px;
  }
}

.kit-arc-eyebrow {
  display: inline-block;
  font-size: var(--text-label);
  font-weight: var(--font-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.kit-arc-headline {
  margin: 0;
  color: var(--fg);
  font-size: var(--display-h1);
  line-height: 1.03;
  letter-spacing: -0.03em;
  font-weight: var(--font-semibold);
  max-width: 22ch;
}

.kit-arc-headline-line {
  display: block;
  white-space: nowrap;
}

.kit-arc-sub {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-body);
  line-height: 1.5;
  max-width: 48ch;
}

/* Card field — absolute, viewport-sized shared rail. */
.kit-arc-field {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.kit-arc-field::before {
  content: none;
  position: absolute;
  left: -12vw;
  right: -12vw;
  top: 50%;
  height: clamp(220px, 40vh, 400px);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 78 Q600 8 1200 78' fill='none' stroke='rgba(9,9,11,0.16)' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: translateY(-46%);
  z-index: 1;
}

.kit-arc-card {
  --kit-arc-w: clamp(176px, 20.8vw, 288px);
  --kit-arc-h: clamp(232px, 27.2vw, 376px);
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--kit-arc-w);
  height: var(--kit-arc-h);
  margin: calc(var(--kit-arc-h) / -2) 0 0 calc(var(--kit-arc-w) / -2);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  border: 1px solid rgba(9, 9, 11, 0.1);
  border-radius: var(--radius-lg, 16px);
  box-shadow:
    0 18px 48px rgba(9, 9, 11, 0.1),
    0 2px 6px rgba(9, 9, 11, 0.05);
  z-index: 2;
  will-change: transform, opacity;
  transform: translate3d(76vw, 42vh, 0) rotate(-3deg);
  opacity: 0;
  pointer-events: auto;
}

.kit-arc-card-media {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: calc(var(--radius-lg, 16px) - 4px);
  background: #82C8E5;
  border: 1px dashed rgba(9, 9, 11, 0.2);
  overflow: hidden;
}

.kit-arc-name {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: var(--font-semibold);
  color: var(--fg);
}

.kit-arc-name .kit-arc-meta {
  display: block;
  font-size: 10px; /* decorative */
  font-weight: var(--font-normal);
  letter-spacing: 0;
  color: var(--muted-2);
  margin: 2px 0 0;
}

.kit-arc-desc {
  flex: 0 0 auto;
  margin: 0;
  font-size: var(--text-label);
  line-height: 1.4;
  color: var(--muted);
}

/* Small-screen and reduced-motion fallback: no pinned stage, no
 * arc. The section collapses into a stacked copy block plus a
 * simple grid of the same cards so the content still reads. */
@media (max-width: 767px) {
  .kit-arc {
    height: auto;
    padding: 72px 0 96px;
  }

  .kit-arc-stage {
    position: static;
    height: auto;
    flex-direction: column;
    gap: 40px;
    overflow: visible;
    padding: 0 24px;
  }

  .kit-arc-field {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
  }

  .kit-arc-card {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    min-height: 260px;
    margin: 0;
    transform: none !important;
    opacity: 1 !important;
  }

  .kit-arc-card-media {
    flex: 0 0 150px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kit-arc {
    height: auto;
    padding: 72px 0 96px;
  }

  .kit-arc-stage {
    position: static;
    height: auto;
    flex-direction: column;
    gap: 40px;
    overflow: visible;
    padding: 0 24px;
  }

  .kit-arc-field {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
  }

  .kit-arc-card {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    min-height: 280px;
    margin: 0;
    transform: none !important;
    opacity: 1 !important;
  }

  .kit-arc-card-media {
    flex: 0 0 160px;
  }
}

/* ============================================================
 * HOMEPAGE EDITORIAL LAYOUT PASS
 * Layout-only overrides for the existing homepage sections.
 * ============================================================ */

@media (min-width: 1024px) {
  .hero-fw {
    min-height: 100svh;
    padding-bottom: calc(clamp(72px, 8vh, 104px) + var(--hero-frame-inset));
  }

  /* .hero-fw-inner: width tier via .section-frame--large */

  .hero-fw-copy {
    max-width: min(58vw, 900px, 100%);
  }

  .home-opening {
    padding: 120px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  /* .home-opening .container, .protocol-layout, .kit-panel-wrap — large tier via .section-frame--large */

  /* CTA + HIW horizontal inset matches --section-gutter (see .cta-band / .hiw-section-card) */

  /* .page-home .site-footer .container — large tier via .container.section-frame--large */

  .hiw-process__bridge {
    margin-top: clamp(72px, 10vh, 120px);
  }

  .section--hiw-process .hiw-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--card-gap);
    margin-top: clamp(64px, 7vw, 88px);
  }

  .section--hiw-process .hiw-step {
    min-height: 0;
  }

  .section--hiw-process .hiw-step__visual {
    min-height: 0;
  }

  .protocol-moment {
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: calc(clamp(72px, 9vh, 112px) * var(--section-vpad-scale)) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .protocol-moment--card {
    min-height: auto;
    display: block;
    align-items: unset;
    /* Vertical padding lives on .protocol-layout. */
    padding: 0;
    border-top: none;
    border-bottom: none;
    margin-top: clamp(24px, 4vw, 48px);
    margin-bottom: clamp(24px, 4vw, 48px);
    margin-left: max(var(--section-gutter), calc((100% - var(--grid-inner-max)) / 2));
    margin-right: max(var(--section-gutter), calc((100% - var(--grid-inner-max)) / 2));
  }

  .protocol-copy {
    max-width: 780px;
  }

  .protocol-stage {
    min-height: 0;
    padding: 0;
  }

  .protocol-graph__svg {
    height: clamp(260px, 26vw, 360px);
  }

  .protocol-moment .numbers-grid {
    margin-top: 0;
    /* QA: match .protocol-layout gap so the stack rhythm is uniform. */
    gap: var(--grid-gap);
  }

  .number-stat {
    border-radius: 16px;
  }

  .kit-arc {
    height: 300svh;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .kit-arc-copy {
    position: absolute;
    left: clamp(24px, 5vw, 88px);
    top: clamp(112px, 17vh, 180px);
    max-width: min(46vw, 760px);
    padding: 0;
    align-items: flex-start;
    text-align: left;
    transform: none;
  }

  .kit-arc-headline {
    font-size: var(--display-h1-home);
    max-width: 13ch;
  }

  .kit-arc-sub {
    max-width: 42ch;
  }

  .kit-arc-card {
    --kit-arc-w: clamp(220px, 23vw, 340px);
    --kit-arc-h: clamp(300px, 32vw, 468px);
    border-color: rgba(9, 9, 11, 0.18);
    box-shadow: none;
  }

  .kit-arc-card-media {
    border-radius: 0;
  }

  .home-stories {
    min-height: 96svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(clamp(88px, 11vh, 128px) * var(--section-vpad-scale)) 0;
    border-bottom: 1px solid var(--border);
  }

  .home-pricing {
    padding: calc(clamp(80px, 10vw, 140px) * var(--section-vpad-scale)) 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .home-education {
    padding: calc(clamp(80px, 10vw, 140px) * var(--section-vpad-scale)) 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .home-education .stack-lg {
    margin-bottom: clamp(40px, 6vw, 72px) !important;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }

  .home-stories-header {
    padding: 0;
    margin-bottom: clamp(48px, 6vw, 80px);
  }

  .home-stories .story-card {
    flex-basis: clamp(320px, 24vw, 380px);
  }

  .home-education .edu-grid {
    gap: var(--card-gap);
  }

  .home-education .edu-card {
    aspect-ratio: 3 / 4;
  }

  .home-education .edu-title {
    max-width: 18ch;
    font-size: var(--text-body-lg);
  }

}

/* ============================================================
 * WHAT'S INCLUDED — .kit-split (50/50 list + video)
 * ------------------------------------------------------------
 * Full-width white section. Left: eyebrow + headline + sub + line-item list.
 * Right: video placeholder. Both columns stretch to the same height; on desktop
 * the media bleeds flush to the viewport edge and the list distributes its rows
 * vertically to fill the column.
 * ============================================================ */

.kit-split {
  background: var(--surface);
  padding: 0;
}

.kit-split-grid {
  min-height: min(860px, 92svh);
  align-items: stretch;
}

.kit-split-copy {
  align-items: stretch;
  padding: 56px var(--section-gutter);
}

@media (min-width: 1024px) {
  .kit-split-copy {
    padding: 96px 56px;
  }
}

.kit-split-copy > .copy-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--copy-max);
  height: 100%;
}

.kit-split-headline {
  margin-top: 16px;
  max-width: 18ch;
}

.kit-split-sub {
  margin-top: 20px;
  max-width: 46ch;
  color: var(--muted-2);
}

.kit-split-list {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  border-top: 1px solid var(--border);
}

.kit-split-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}

.kit-split-name {
  margin: 0;
  font-size: var(--text-body-lg);
  font-weight: var(--font-semibold);
  letter-spacing: -0.005em;
  color: var(--fg);
}

.kit-split-meta {
  font-weight: var(--font-normal);
  color: var(--muted);
}

.kit-split-desc {
  margin: 6px 0 0;
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: var(--muted-2);
  max-width: 52ch;
}

.kit-split-media {
  min-height: 420px;
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
}

@media (max-width: 767px) {
  .kit-split-media {
    min-height: 56svh;
    aspect-ratio: 4 / 5;
  }
}

/* ============================================================
   KIT CAROUSEL — list-driven card carousel ("What's included")
   Full-bleed section. Left column: headline, clickable item list,
   prev/next buttons. Right stage: a horizontal flex track of cards
   that translates so the active card is anchored to the left of
   the stage. The active card is at full scale; all others are
   scaled down + dimmed. Cards extend off the right edge of the
   viewport so 3-4 are visible at once.
   ============================================================ */
/* ============================================================
 * KIT FLAT LAY — what's included
 * ============================================================
 * Vertical layout: section header → wide overhead visual →
 * numbered flat list of items (no individual card chrome).
 * ============================================================ */
.kit-flatlay-section {
  background: var(--surface);
  padding: calc(clamp(72px, 10vw, 128px) * var(--section-vpad-scale)) 0;
}

.kit-flatlay-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
  margin-bottom: clamp(40px, 5vw, 72px);
}

.kit-flatlay-headline {
  font-size: var(--heading-h2);
  line-height: 1.06;
  margin: 0;
}

.kit-flatlay-body {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 72px);
}

.kit-flatlay-visual {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.kit-flatlay-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--border);
}

@media (min-width: 768px) {
  .kit-flatlay-items {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(32px, 4vw, 64px);
  }
}

.kit-flatlay-item {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(20px, 2.5vw, 28px) 0;
  border-bottom: 1px solid var(--border);
}

.kit-flatlay-item-num {
  font-family: var(--sans);
  font-size: var(--text-body-sm);
  letter-spacing: 0.14em;
  font-weight: var(--font-semibold);
  color: var(--muted);
  padding-top: 4px;
  flex-shrink: 0;
  min-width: 28px;
}

.kit-flatlay-item-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kit-flatlay-item-name {
  font-family: var(--sans);
  font-size: var(--text-body-lg);
  font-weight: var(--font-semibold);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--fg);
}

.kit-flatlay-item-meta {
  font-weight: var(--font-normal);
  color: var(--muted);
  letter-spacing: 0;
}

.kit-flatlay-item-desc {
  font-size: var(--text-body-sm);
  line-height: 1.55;
  color: var(--muted-2);
  margin: 0;
  max-width: 48ch;
}

.kit-carousel-section {
  background: var(--surface);
  padding: 96px 0;
  overflow: hidden;
}

@media (max-width: 767px) {
  .kit-carousel-section {
    padding: 64px 0;
  }
}

.kit-carousel-layout {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 56px;
  align-items: stretch;
  padding-left: var(--section-gutter);
  padding-right: 0;
}

@media (min-width: 1024px) {
  .kit-carousel-layout {
    padding-left: 56px;
    gap: 64px;
  }
}

@media (max-width: 1023px) {
  .kit-carousel-layout {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-right: var(--section-gutter);
  }
}

.kit-carousel-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-right: 24px;
}

.kit-carousel-headline {
  margin: 0;
  max-width: 14ch;
}

.kit-carousel-list {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.kit-carousel-list-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-body);
  font-weight: var(--font-normal);
  color: var(--muted);
  cursor: pointer;
  transition: color 180ms ease;
}

.kit-carousel-list-item:hover {
  color: var(--fg);
}

.kit-carousel-list-item:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

.kit-carousel-list-item.is-active {
  color: var(--fg);
  font-weight: var(--font-semibold);
}

.kit-carousel-list-name {
  flex: 1 1 auto;
  min-width: 0;
}

.kit-carousel-list-meta {
  font-weight: var(--font-normal);
  color: var(--muted);
}

.kit-carousel-nav {
  display: flex;
  gap: 12px;
  margin-top: 40px;
}

.kit-carousel-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
  font-size: var(--text-body-lg);
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.kit-carousel-btn:hover {
  background: var(--surface);
  border-color: var(--muted);
}

.kit-carousel-btn:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

.kit-carousel-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Stage / track / cards */
.kit-carousel-stage {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

@media (max-width: 1023px) {
  .kit-carousel-stage {
    min-height: 60svh;
  }
}

.kit-carousel-track {
  display: flex;
  gap: var(--kit-card-gap, 24px);
  align-items: center;
  width: 100%;
  transform: translate3d(var(--kit-track-x, 0), 0, 0);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.kit-carousel-card {
  flex: 0 0 auto;
  width: clamp(260px, 28vw, 360px);
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transform: scale(0.78);
  transform-origin: center center;
  opacity: 0.5;
  cursor: pointer;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.5s ease;
  will-change: transform, opacity;
}

.kit-carousel-card.is-active {
  transform: scale(1);
  opacity: 1;
  cursor: default;
}

.kit-carousel-card-ph {
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.kit-carousel-card-body {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kit-carousel-card-name {
  margin: 0;
  font-size: var(--text-body-lg);
  font-weight: var(--font-semibold);
  letter-spacing: -0.005em;
  color: var(--fg);
}

.kit-carousel-card-meta {
  font-weight: var(--font-normal);
  color: var(--muted);
}

.kit-carousel-card-desc {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: var(--muted-2);
  max-width: 52ch;
}

@media (prefers-reduced-motion: reduce) {
  .kit-carousel-track,
  .kit-carousel-card {
    transition: none;
  }
}

/* ============================================================
 * KIT PANEL — scroll-driven interactive split ("What's included")
 * .kit-panel-scroll-root creates the scroll distance (height set by JS).
 * .kit-panel-section is sticky at top:0 and fills 100vh — it stays
 * pinned while the user scrolls, advancing one item per viewport of scroll.
 * The image fills the full section behind everything; the white card and
 * description text float above it.
 * ============================================================ */

.kit-panel-scroll-root {
  /* Height is set by JS: (items + 1) * 100vh. Fallback for 6 items. */
  height: 700vh;
}

.kit-panel-section {
  position: sticky;
  top: var(--nav-pill-outer);
  height: calc(100vh - var(--nav-pill-outer));
  height: calc(100svh - var(--nav-pill-outer));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: calc(clamp(40px, 5vw, 64px) * var(--section-vpad-scale)) 0;
}

/* Full-section image backgrounds (z-index 0 and 1) */
.kit-panel-bg {
  position: absolute;
  inset: 0;
  transition: opacity 400ms ease;
}

.kit-panel-bg--default {
  z-index: 0;
}

.kit-panel-bg--item {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

.kit-panel-bg--item.is-visible {
  opacity: 1;
}

/* Foreground layout grid (above both image layers) */
.kit-panel-wrap {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
  /* width / padding: .section-frame--large when class present */
  box-sizing: border-box;
}

/* Left card */
.kit-panel-left {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.kit-panel-header {
  padding: clamp(28px, 3vw, 40px) clamp(24px, 2.5vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kit-panel-headline {
  margin: 0;
  max-width: 18ch;
  font-size: var(--heading-h2);
  line-height: 1.06;
}

.kit-panel-sub {
  font-size: var(--text-body-sm);
  line-height: 1.55;
  color: var(--muted-2);
  margin: 0;
  max-width: 40ch;
}

/* Item list */
.kit-panel-list {
  list-style: none;
  padding: 0;
  margin: clamp(24px, 3vw, 40px) 0 0;
  border-top: 1px solid var(--border);
}

.kit-panel-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px clamp(20px, 2vw, 28px);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  color: var(--muted);
  font-size: var(--text-body);
  font-weight: var(--font-normal);
  transition: color 160ms ease, background 160ms ease;
  user-select: none;
}

.kit-panel-list-item:last-child {
  border-bottom: none;
}

.kit-panel-list-item:hover {
  color: var(--fg);
  background: var(--surface);
}

.kit-panel-list-item:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: -2px;
}

.kit-panel-list-item.is-active {
  color: var(--fg);
  font-weight: var(--font-semibold);
  background: var(--surface);
}

.kit-panel-list-num {
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  font-weight: var(--font-semibold);
  color: var(--muted);
  flex-shrink: 0;
  min-width: 24px;
  line-height: 1;
}

.kit-panel-list-item.is-active .kit-panel-list-num {
  color: var(--muted-2);
}

.kit-panel-list-name {
  flex: 1 1 auto;
}

.kit-panel-list-meta {
  font-weight: var(--font-normal);
  color: var(--muted);
}

/* Right column: item description overlay on the image */
.kit-panel-info {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: clamp(4px, 1vw, 8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.kit-panel-info.is-visible {
  opacity: 1;
}

.kit-panel-info-name {
  margin: 0;
  font-size: var(--text-label);
  font-weight: var(--font-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.kit-panel-info-desc {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: 1.55;
  color: var(--muted-2);
  max-width: 48ch;
}

/* Mobile: disable sticky scroll, stack normally */
@media (max-width: 767px) {
  .kit-panel-scroll-root {
    height: auto;
  }

  .kit-panel-section {
    position: relative;
    height: auto;
    min-height: auto;
    padding-bottom: clamp(48px, 8vw, 80px);
  }

  .kit-panel-wrap {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .kit-panel-info {
    padding-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kit-panel-bg,
  .kit-panel-info {
    transition: none;
  }
}

/* ============================================================
 * STICKY SPLIT — shared 2-col pattern: sticky rail (left) + scrolling panels (right)
 * Used: Pricing FAQ, Blood Testing FAQ + "Our approach", Testosterone "What it feels like",
 *       How It Works step details (via .sticky-split--steps modifier), Consultations.
 * ============================================================ */
.sticky-split {
  padding-block: clamp(56px, 8vw, 112px);
}

/* Avoid double padding when sticky-split is nested inside a .section wrapper */
.section > .sticky-split,
.section .sticky-split {
  padding-block: 0;
}

.sticky-split__inner {
  max-width: var(--section-max-md);
  margin-inline: auto;
  padding-inline: var(--section-gutter);
  display: grid;
  gap: clamp(32px, 5vw, 80px);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 768px) {
  .sticky-split__inner {
    grid-template-columns: minmax(220px, 1fr) minmax(0, 2.2fr);
  }
}

.sticky-split__rail {
  position: relative;
}

@media (min-width: 768px) {
  .sticky-split__rail {
    position: sticky;
    top: calc(var(--site-header-layout-h, 96px) + 24px);
    align-self: start;
    will-change: transform;
  }
}

.sticky-split__eyebrow {
  display: block;
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.sticky-split__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sticky-split__nav-link {
  display: block;
  padding: var(--sticky-nav-link-padding, 10px 0);
  font-size: var(--sticky-nav-link-font-size, 17px);
  line-height: var(--sticky-nav-link-line-height, 1.35);
  color: var(--sticky-nav-link-color, var(--muted));
  text-decoration: none;
  background: var(--sticky-nav-link-bg, transparent);
  border: var(--sticky-nav-link-border, 0);
  border-radius: var(--sticky-nav-link-radius, 0);
  border-bottom: var(--sticky-nav-link-border-bottom, 1px solid transparent);
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
}

.sticky-split__nav-link:hover {
  color: var(--sticky-nav-link-hover-color, var(--fg));
  background: var(--sticky-nav-link-hover-bg, var(--sticky-nav-link-bg, transparent));
  border-color: var(--sticky-nav-link-hover-border-color, var(--sticky-nav-link-border-color, transparent));
  border-bottom-color: var(--sticky-nav-link-hover-border-bottom-color, transparent);
}

.sticky-split__nav-link.is-active,
.sticky-split__nav-link[aria-current="true"] {
  color: var(--sticky-nav-link-active-color, var(--fg));
  background: var(--sticky-nav-link-active-bg, var(--sticky-nav-link-bg, transparent));
  border-color: var(--sticky-nav-link-active-border-color, var(--sticky-nav-link-border-color, transparent));
  border-bottom-color: var(--sticky-nav-link-active-border-bottom-color, var(--fg));
  font-weight: var(--sticky-nav-link-active-weight, inherit);
}

/* Pre-reserve the bold (active) text footprint so toggling font-weight never
   reflows the rail's height/width. The hidden ::after mirrors the link text at
   the active weight; with the link as a flex column the box already sizes to the
   bold copy regardless of which link is active. */
.sticky-split__nav-link[data-text] {
  display: flex;
  flex-direction: column;
}

.sticky-split__nav-link[data-text]::after {
  content: attr(data-text);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: var(--sticky-nav-link-active-weight, 600);
  pointer-events: none;
  user-select: none;
}

.sticky-split__content {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vw, 40px);
  min-width: 0;
}

.sticky-split__panel {
  scroll-margin-top: calc(var(--site-header-layout-h, 96px) + 16px);
}

.sticky-split__panel-title {
  font-size: var(--heading-h3);
  line-height: 1.2;
  margin: 0 0 16px;
}

.sticky-split__panel-body {
  color: var(--muted-2);
  font-size: var(--text-body, 18px);
  line-height: 1.55;
}

.sticky-split__panel-body > * + * {
  margin-top: 12px;
}

/* --- Modifier: .sticky-split--faq (FAQs page 2/6 rail/content split inside 8-col band) --- */
.sticky-split--faq .sticky-split__inner {
  max-width: none;
}

@media (min-width: 768px) {
  .sticky-split--faq .sticky-split__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0;
  }

  .sticky-split--faq .sticky-split__rail {
    grid-column: 1 / span 2;
    justify-self: start;
    text-align: left;
  }

  .sticky-split--faq .sticky-split__content {
    grid-column: 4 / span 6;
  }

  .sticky-split--faq .sticky-split__rail {
    top: var(--sticky-rail-top);
  }
}

.faq-accordion {
  max-width: none;
  margin: 0;
}

/* FAQ question + answer use the default body size (not a reduced size). */
.sticky-split--faq .faq-q {
  font-size: var(--text-body);
  font-weight: var(--font-medium);
}

/* No top rule above the first FAQ section heading on the content side. */
.sticky-split--faq .faq-accordion {
  border-top: 0;
}

.sticky-split--faq .faq-a {
  font-size: var(--text-body);
}

/* FAQ section headings ("Membership & billing", etc.) sit clearly above answers. */
.sticky-split--faq .accordion-section h3 {
  font-size: var(--heading-h3);
}

/* Sidebar heading: label above the category nav with a top border that
   aligns with the accordion's top rule on the content side. */
.faq-rail__heading {
  margin: 0 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: var(--text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: var(--font-medium);
}

.sticky-split--faq .accordion-section:first-child .faq {
  border-top: 0;
}

/* --- Modifier: .sticky-split--steps (How It Works step details) ---
 * Per Realm-style reference: panel content (eyebrow, heading, body, list) sits on
 * the page background. Only the media preview is a rounded card.
 * Left rail anchors are muted; active = bold dark.
 * Wider band at desktop (no narrow max-width inset).
 */
@media (min-width: 768px) {
  .sticky-split--steps .sticky-split__inner {
    grid-template-columns: minmax(180px, 1fr) minmax(0, 4fr);
  }
  /* Section heading row: place block in the right column so it aligns with cards */
  .sticky-split--steps .sticky-split__heading-row .sticky-split__heading-block {
    grid-column: 2;
  }
}

/* How-it-works six-steps lives in a 10-col shell already; avoid extra inner constraining. */
.hiw-first-three-months .sticky-split--steps .sticky-split__inner {
  max-width: none;
  padding-inline: 0;
}

.hiw-first-three-months .sticky-split--steps .sticky-split__rail-title {
  margin: 0 0 24px;
  max-width: 22ch;
  font-size: var(--heading-h3);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.hiw-first-three-months .sticky-split--steps,
.sticky-split--faq {
  --sticky-nav-link-padding: 8px 12px;
  --sticky-nav-link-border: 1px solid transparent;
  --sticky-nav-link-border-bottom: 0;
  --sticky-nav-link-radius: 10px;
  --sticky-nav-link-font-size: clamp(14px, 1.05vw, 16px);
  --sticky-nav-link-line-height: 1.25;
  --sticky-nav-link-color: var(--fg);
  --sticky-nav-link-bg: transparent;
  --sticky-nav-link-hover-color: var(--fg);
  --sticky-nav-link-hover-bg: #f7f7f5;
  --sticky-nav-link-hover-border-color: transparent;
  --sticky-nav-link-hover-border-bottom-color: transparent;
  --sticky-nav-link-active-color: var(--fg);
  --sticky-nav-link-active-bg: #dddddd;
  --sticky-nav-link-active-border-color: #cfcfcf;
  --sticky-nav-link-active-border-bottom-color: transparent;
  --sticky-nav-link-active-weight: var(--font-semibold, 600);
}

/* FAQ rail: brand-blue hover + active states (scoped so How It Works keeps its grays). */
.sticky-split--faq {
  --sticky-nav-link-hover-color: var(--brand-electric);
  --sticky-nav-link-hover-bg: rgba(0, 112, 231, 0.08);
  --sticky-nav-link-active-color: #ffffff;
  --sticky-nav-link-active-bg: var(--brand-electric);
  --sticky-nav-link-active-border-color: var(--brand-electric);
}

@media (min-width: 768px) {
  .hiw-first-three-months .sticky-split--steps .sticky-split__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0;
  }
  .hiw-first-three-months .sticky-split--steps .sticky-split__rail {
    grid-column: 1 / span 2;
    top: calc(var(--site-header-layout-h, 96px) + 72px);
  }
  .hiw-first-three-months .sticky-split--steps .sticky-split__content {
    grid-column: 4 / span 9;
  }
  .hiw-first-three-months .sticky-split--steps .sticky-split__nav-link {
    line-height: 1.25;
  }
}
@media (min-width: 1024px) {
  .hiw-first-three-months .sticky-split--steps .sticky-split__inner {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .hiw-first-three-months .sticky-split--steps .sticky-split__content {
    grid-column: 4 / span 7;
  }
}

.sticky-split__heading-row {
  margin-bottom: clamp(24px, 4vw, 48px);
}

.sticky-split__heading-block .eyebrow {
  margin-bottom: 8px;
}

@media (min-width: 1024px) {
  .sticky-split--steps .sticky-split__inner {
    max-width: none;
  }
}

.sticky-split--steps .sticky-split__panel {
  position: relative;
  background: var(--surface);
  border-radius: var(--bento-radius, 16px);
  padding: clamp(28px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(10px, 1.5vw, 18px);
}

.sticky-split--steps .sticky-split__panel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  margin: 0 0 4px 0;
  position: static;
  inset: auto;
}

.sticky-split--steps .sticky-split__panel-icon svg {
  width: 26px;
  height: 26px;
}

/* Panel-head: simple stacked block (icon, eyebrow, heading). */
.sticky-split--steps .sticky-split__panel-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Panel-body: description + list as flex columns, both top-aligned. */
.sticky-split--steps .sticky-split__panel-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(20px, 3vw, 32px);
  margin-top: 0;
}

.sticky-split--steps .sticky-split__panel-desc {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sticky-split--steps .sticky-split__panel-desc .lead {
  margin: 0;
}

.sticky-split--steps .sticky-split__panel-body .symptoms-list {
  margin: 0;
}

@media (min-width: 768px) {
  .sticky-split--steps .sticky-split__panel-body {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(24px, 4vw, 64px);
  }
  .sticky-split--steps .sticky-split__panel-desc,
  .sticky-split--steps .sticky-split__panel-body .symptoms-list {
    flex: 1 1 0;
    min-width: 0;
  }
}

.sticky-split--steps .sticky-split__panel .eyebrow {
  color: var(--muted);
  font-size: var(--text-body);
  letter-spacing: 0.08em;
}

.sticky-split--steps .sticky-split__panel .lead {
  color: var(--muted-2);
  max-width: none;
}

.sticky-split--steps .sticky-split__panel-title {
  margin: 0;
  font-size: var(--heading-h3);
}

.sticky-split--steps .sticky-split__panel ul.symptoms-list {
  max-width: none;
}

.sticky-split--steps .sticky-split__panel-icon {
  display: none;
}

/* --- QA (task #146): How It Works step polish --- */
/* Brand-blue hover/active on the six-step nav (FAQ rail unchanged) */
.hiw-first-three-months .sticky-split--steps {
  --sticky-nav-link-hover-color: var(--brand-electric);
  --sticky-nav-link-hover-bg: #eff6ff;
  --sticky-nav-link-active-color: var(--brand-electric);
  --sticky-nav-link-active-bg: #eff6ff;
  --sticky-nav-link-active-border-color: transparent;
}

/* Contextual step links use the brand tertiary (electric-blue link) style */
.sticky-split--steps .sticky-split__panel-desc .lead a {
  color: var(--brand-electric);
  font-weight: var(--font-medium);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  transition: text-decoration-color 0.18s ease;
}
.sticky-split--steps .sticky-split__panel-desc .lead a:hover {
  text-decoration-color: currentColor;
}

/* Day eyebrow above each step heading — small screens only */
.sticky-split--steps .sticky-split__panel-day {
  display: none;
  margin: 0;
}

/* Real doctors feature image */
.hiw-consultations .approach-split__media img.kit-simple__media-ph {
  border-radius: var(--bento-radius, 16px);
  object-fit: cover;
  height: 100%;
}

@media (max-width: 767px) {
  /* Day eyebrow shown above the heading on small screens */
  .sticky-split--steps .sticky-split__panel-day {
    display: block;
    font-size: var(--text-body-sm);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: var(--font-semibold);
    color: var(--brand-electric);
  }

  /* Six-steps rail: sticky horizontal scroller pinned to the top of the section */
  .hiw-first-three-months .sticky-split--steps .sticky-split__rail {
    position: sticky;
    top: var(--site-header-layout-h, 60px);
    z-index: 5;
    background: var(--bg);
    padding-block: 10px;
    border-bottom: 1px solid var(--border);
  }
  .hiw-first-three-months .sticky-split--steps .sticky-split__rail-title {
    display: none;
  }

  /* Features media: full width within the 12-col stack, square ratio */
  .hiw-consultations .kit-simple__media-ph {
    aspect-ratio: 1 / 1;
    max-width: 100%;
    max-height: none;
  }
}

.sticky-split__panel-media {
  margin-top: clamp(20px, 3vw, 32px);
  border-radius: var(--bento-radius, 16px);
  aspect-ratio: 16 / 10;
}

/* --- Modifier: .sticky-split--heading (FAQ-style: sticky title + subtext on left) --- */
.sticky-split--heading .sticky-split__heading {
  font-size: var(--heading-h2);
  line-height: 1.05;
  margin: 0 0 16px;
}

.sticky-split--heading .sticky-split__sub {
  color: var(--muted-2);
  font-size: var(--text-body, 18px);
  line-height: 1.5;
  margin: 0;
  max-width: 360px;
}

.sticky-split--heading .sticky-split__sub a {
  color: var(--fg);
  text-decoration: underline;
}

/* --- Modifier: equal-width columns at desktop (1:1) --- */
@media (min-width: 768px) {
  .sticky-split--equal .sticky-split__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ============================================================
 * TREATMENT ARTICLE HUB — sibling-page sidebar (sticky on desktop, dropdown on mobile)
 * Used on long-form treatment article sub-pages (e.g. signs-of-low-t.html).
 * Cross-page nav: active state set explicitly via aria-current="page" / .is-active
 * (no scroll-spy JS — different class names keep js/main.js inert).
 * ============================================================ */
.treatment-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

@media (min-width: 768px) {
  .treatment-layout {
    grid-template-columns: minmax(220px, 1fr) minmax(0, 3fr);
    gap: clamp(64px, 8vw, 140px);
  }
}

.treatment-rail {
  position: relative;
}

@media (min-width: 768px) {
  .treatment-rail {
    position: sticky;
    top: calc(var(--site-header-layout-h, 96px) + 24px);
    align-self: start;
  }
}

.treatment-rail__breadcrumb {
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

.treatment-rail__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.treatment-rail__link {
  display: block;
  padding: 10px 0;
  font-size: var(--text-body);
  line-height: 1.35;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.treatment-rail__link:hover {
  color: var(--fg);
}

.treatment-rail__link.is-active,
.treatment-rail__link[aria-current="page"] {
  color: var(--fg);
  font-weight: var(--font-semibold);
  border-bottom-color: var(--fg);
}

.treatment-rail__back {
  display: inline-block;
  margin-top: 24px;
  font-size: var(--text-body-sm);
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.treatment-rail__back:hover {
  color: var(--fg);
  border-bottom-color: var(--fg);
}

/* Mobile: rail collapses to <details> dropdown chip */
.treatment-rail-toggle {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.treatment-rail-toggle > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--text-body);
  font-weight: var(--font-semibold);
  color: var(--fg);
}

.treatment-rail-toggle > summary::-webkit-details-marker {
  display: none;
}

.treatment-rail-toggle > summary::after {
  content: "+";
  font-size: var(--text-body-lg);
  line-height: 1;
  color: var(--muted);
  transition: transform 0.18s ease;
}

.treatment-rail-toggle[open] > summary::after {
  content: "−";
}

.treatment-rail-toggle__current {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.treatment-rail-toggle__current small {
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: var(--font-normal);
}

.treatment-rail-toggle .treatment-rail__nav {
  border-top: 1px solid var(--border);
  padding: 8px 16px 14px;
  gap: 0;
}

.treatment-rail-toggle .treatment-rail__link {
  padding: 10px 0;
  border-bottom: 0;
}

.treatment-rail-toggle .treatment-rail__back {
  margin: 0 16px 14px;
}

@media (min-width: 768px) {
  .treatment-rail-toggle {
    display: none;
  }
}

@media (max-width: 767px) {
  .treatment-rail__desktop {
    display: none;
  }
}

/* Article body */
.treatment-article {
  padding-block: clamp(40px, 6vw, 96px);
}

.treatment-article__eyebrow {
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.treatment-article__body {
  min-width: 0;
  color: var(--fg);
}

.treatment-article__body > h1 {
  margin: 0 0 16px;
}

.treatment-article__body .lead {
  max-width: 60ch;
}

.treatment-article__body h3 {
  margin: clamp(36px, 5vw, 56px) 0 16px;
  font-size: var(--heading-h3);
  line-height: 1.2;
}

.treatment-article__body p {
  max-width: 65ch;
  color: var(--muted-2);
  font-size: var(--text-body, 18px);
  line-height: 1.55;
  margin: 0 0 14px;
}

.treatment-article__body p:last-child {
  margin-bottom: 0;
}

.treatment-article__body .symptoms-list {
  margin-top: 16px;
}

.treatment-article__cta {
  margin-top: clamp(28px, 4vw, 40px);
}

/* --- ADAM T Score quiz --- */
.adam-quiz {
  margin-top: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.adam-quiz__card {
  position: relative;
  margin-top: 8px;
  padding: clamp(20px, 3vw, 28px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: opacity 0.12s ease;
}

.adam-quiz__card.is-fading {
  opacity: 0;
  pointer-events: none;
}

@keyframes quiz-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.adam-quiz__card.is-entering {
  animation: quiz-fade-in 0.18s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
  .adam-quiz__card { transition: none; }
  .adam-quiz__card.is-entering { animation: none; }
}

.adam-quiz__kicker {
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.adam-quiz__question {
  font-size: var(--heading-h3);
  line-height: 1.25;
  font-weight: var(--font-semibold);
  margin: 0;
  color: var(--fg);
}

.adam-quiz__answers {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 4px;
}

@media (max-width: 640px) {
  .adam-quiz__answers {
    grid-template-columns: 1fr;
  }
}

.adam-quiz__answer {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  border-radius: var(--radius-lg);
  padding: 14px 10px;
  font-size: var(--text-body-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.adam-quiz__answer:hover {
  border-color: color-mix(in srgb, var(--brand-electric) 35%, var(--border));
  transform: translateY(-2px);
  box-shadow:
    0 12px 28px -14px rgba(0, 24, 60, 0.28),
    0 2px 6px rgba(9, 9, 11, 0.06);
}

.adam-quiz__answer:focus-visible {
  outline: 2px solid var(--brand-electric);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .adam-quiz__answer,
  .adam-quiz__answer:hover {
    transform: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }
}

.adam-quiz__result {
  margin-top: 8px;
  padding: clamp(20px, 3vw, 28px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* ============================================================
 * APPROACH SPLIT — simple 2-col (copy + image), no sticky.
 * Used: Blood Testing "Our approach", Testosterone "Why microdosing".
 * ============================================================ */
.approach-split {
  display: grid;
  gap: clamp(24px, 4vw, 56px);
  grid-template-columns: 1fr;
  align-items: center;
}

/* Homepage symptoms block should start at top-left, not center-aligned. */
.approach-split.home-symptoms-split {
  align-items: start;
}

.home-symptoms-grid {
  align-items: start;
}

/* QA: tighter vertical rhythm between symptoms and the HMW section that
   follows on the homepage. Uses :has() to avoid markup changes. */
.section:has(> .modern-grid.home-symptoms-grid),
.section:has(> .modern-grid > .home-symptoms-grid) {
  padding-bottom: clamp(24px, 3vw, 40px);
}

.home-symptoms-grid__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

/* QA: blue background panel on the scrolly side of the home symptoms grid. */
.home-symptoms-grid__symptoms {
  background: var(--brand-light-blue);
  border-radius: var(--radius-xl, 32px);
  padding: 0 clamp(20px, 3vw, 32px);
  overflow: hidden;
}

/* QA: zero the inner scroll's top/bottom padding so the panel has no vertical
   padding at any breakpoint (cascades to mobile). */
.home-symptoms-grid__symptoms .symptoms-scroll {
  padding-block: 0;
}

/* Mobile: force a 1:1 square ratio on the scroll list/image area. */
@media (max-width: 767px) {
  .home-symptoms-grid__symptoms {
    aspect-ratio: 1 / 1;
  }
  .home-symptoms-grid__symptoms .symptoms-scroll,
  .home-symptoms-grid__symptoms .symptoms-scroll__viewport {
    height: 100%;
  }
}

@media (min-width: 768px) {
  .home-symptoms-grid__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(24px, 4vw, 56px);
    row-gap: 0;
    align-items: start;
  }

  .home-symptoms-grid__copy {
    grid-column: 1 / span 5;
  }

  .home-symptoms-grid__symptoms {
    grid-column: 6 / span 7;
  }
}

/* QA: stack the copy + scrolling symptoms panel onto their own full-width rows
   at the tablet breakpoint (768–1023px) so the scroller isn't cramped as a
   narrow 2nd column. Applies to the homepage and the three plan pages
   (testosterone / weight-loss / sexual-health) which reuse this component.
   Two-column layout returns at >=1024px. */
@media (min-width: 768px) and (max-width: 1023px) {
  .home-symptoms-grid__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(24px, 4vw, 56px);
  }

  .home-symptoms-grid__copy,
  .home-symptoms-grid__symptoms {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .home-symptoms-grid__inner {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .home-symptoms-grid__copy {
    grid-column: 1 / span 4;
  }

  .home-symptoms-grid__symptoms {
    grid-column: 5 / span 6;
  }
}

.home-symptoms-grid__copy h2 {
  margin: 8px 0 16px;
}

.home-symptoms-grid__copy .lead {
  margin: 0;
  max-width: none;
}

.home-symptoms-grid__copy-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 24px);
}

@media (min-width: 768px) {
  .approach-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.approach-split__copy h2 {
  margin: 8px 0 16px;
}

.approach-split__copy .lead {
  margin: 0;
  max-width: 560px;
}

.approach-split__copy .lead + .lead {
  margin-top: clamp(12px, 1.5vw, 18px);
}

.approach-split__media .ph {
  border-radius: var(--bento-radius, 16px);
}

/* QA (xs/sm): square feature image + full-width single column for split
   sections that lead with a photo (e.g. sexual-health "pill is the answer").
   Matches the 1:1 mobile treatment used by the home symptoms panel. */
@media (max-width: 767px) {
  .approach-split--media-square {
    grid-template-columns: minmax(0, 1fr);
  }

  .approach-split--media-square .approach-split__media .kit-simple__media-ph,
  .approach-split--media-square .approach-split__media .ph {
    aspect-ratio: 1 / 1;
    max-height: none;
    max-width: none;
  }

  .approach-split--media-square .approach-split__media .kit-simple__media-ph > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ============================================================
 * FEATURE MEDIA FRAME — photo wells inside approach-split sections
 * (Doctors / Pharmacy). 1:1 square on desktop and mobile.
 * ============================================================ */
.feature-media {
  overflow: hidden;
  border-radius: var(--bento-radius, 16px);
  aspect-ratio: 1 / 1;
}

.feature-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dr. Bender portrait well — off-white card, 3:4 portrait ratio. */
.approach-split--ratio-1-2 .feature-media {
  aspect-ratio: 3 / 4;
  background: var(--hiw-cream, #faf7f2);
}

.approach-split--ratio-1-2 .feature-media > img {
  object-fit: cover;
}

@media (max-width: 767px) {
  .feature-media {
    aspect-ratio: 1 / 1;
  }

  /* Mobile: stack every feature split as image first, text below —
     regardless of the desktop left/right composition. */
  .page-doctors .approach-split__media,
  .page-pharmacy .approach-split__media {
    order: -1;
  }
}

/* ============================================================
 * KIT LIST — labelled bordered list with leading icons.
 * Used inside .kit-simple "What's included" section.
 * ============================================================ */
.kit-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.kit-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-body, 18px);
  color: var(--fg);
}

.kit-list__icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--fg);
  background: var(--surface);
}

.kit-list__icon svg {
  width: 18px;
  height: 18px;
}

.kit-list__meta {
  color: var(--muted);
  font-weight: var(--font-normal);
}

.kit-list__note {
  margin: 16px 0 0;
  color: var(--muted-2);
  font-size: var(--text-body-sm, 16px);
}

/* Coming-soon link affordance: muted text + small inline tag */
.is-coming-soon {
  opacity: 0.55;
  pointer-events: none;
  cursor: not-allowed;
}

.coming-soon-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 10px; /* decorative */
  font-weight: var(--font-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: middle;
}

/* ============================================================
 * KIT SIMPLE — full-bleed "What's included" section.
 * 10-col desktop split: 3 copy, 1 spacer, 6 media.
 * ============================================================ */
.kit-simple {
  width: 100%;
  padding-block: clamp(56px, 8vw, 112px);
}

.kit-simple__inner {
  width: 100%;
  padding-inline: var(--section-gutter);
  box-sizing: border-box;
}

.kit-simple .modern-grid .kit-simple__inner {
  padding-inline: 0;
}

.hiw-consultations .kit-simple__inner {
  padding-inline: 0;
}

.kit-simple__split {
  align-items: center;
}

@media (min-width: 768px) {
  .kit-simple__split.approach-split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(16px, 2vw, 28px);
  }

  .kit-simple__split.approach-split > .approach-split__copy {
    grid-column: 1 / span 4;
  }

  .kit-simple__split.approach-split > .approach-split__media {
    grid-column: 6 / span 7;
  }

  .kit-simple__split.approach-split.approach-split--reverse > .approach-split__media {
    grid-column: 1 / span 7;
  }

  .kit-simple__split.approach-split.approach-split--reverse > .approach-split__copy {
    grid-column: 9 / span 4;
  }
}

@media (min-width: 1024px) {
  .kit-simple__split.approach-split {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    column-gap: clamp(16px, 2vw, 28px);
  }

  .kit-simple__split.approach-split > .approach-split__copy {
    grid-column: 1 / span 3;
  }

  .kit-simple__split.approach-split > .approach-split__media {
    grid-column: 5 / span 6;
  }

  .kit-simple__split.approach-split.approach-split--reverse > .approach-split__media {
    grid-column: 1 / span 6;
  }

  .kit-simple__split.approach-split.approach-split--reverse > .approach-split__copy {
    grid-column: 8 / span 3;
  }
}

/* ============================================================
 * COLUMN TIGHTENING — centered 10-col sections (all pages).
 * From phones through laptops (768–1279px) the centered 10-col sections
 * expand to the full 12-col container width. The 1-col side spacers
 * collapse so content goes edge-to-edge; only on large screens
 * (>=1280px) does the original 10-col centering return.
 * ============================================================ */
@media (min-width: 768px) and (max-width: 1279px) {
  .modern-grid > .layout-col.span-d-10 {
    grid-column: 1 / span 12;
  }

  .modern-grid > .layout-col.d-only.span-d-1 {
    display: none;
  }
}

/* xs/sm: stack the How It Works consultations split as image-on-top,
   text-below — matching the Doctors / Pharmacy feature rows. */
@media (max-width: 767px) {
  .hiw-consultations .approach-split__media {
    order: -1;
  }
}

/* ============================================================
 * PROTOCOL CATEGORIES — responsive card behaviour.
 * lg (1024–1279px): a 3-column x 2-row grid; the first (Microdosing)
 * card spans two columns, the other four are 1 col x 1 row.
 * md and down (<=1023px): each card puts its icon and title on one
 * row, with the title on a single line.
 * ============================================================ */
@media (min-width: 1024px) and (max-width: 1279px) {
  .protocol-categories-stack {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    gap: 12px;
    width: 100%;
  }

  /* Microdosing card spans two columns; the rest are 1 col x 1 row. */
  .protocol-categories-stack > :first-child {
    grid-column: span 2;
    grid-row: auto;
    align-self: stretch;
  }

  /* Single-line card titles at lg. */
  .protocol-categories-stack .treatment-card .title br {
    display: none;
  }
}

@media (max-width: 1023px) {
  /* Compact card: icon + title share the top row; body spans beneath. */
  .protocol-categories-stack .treatment-card {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 8px;
    align-items: center;
  }

  .protocol-categories-stack .treatment-card .body {
    grid-column: 1 / -1;
  }

  /* Collapse the forced two-line title down to a single line. */
  .protocol-categories-stack .treatment-card .title br {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .protocol-categories-stack .treatment-card .title {
    white-space: nowrap;
  }
}

/* ============================================================
 * Desktop: center the protocol card row(s).
 * The card count varies per page (Testosterone has 4, Weight Loss and
 * Sexual Health have 5), so a short final row would otherwise sit
 * left-aligned. Switch the grid to a centered flex-wrap row at desktop
 * widths so any incomplete row is centered. The featured (first) card keeps
 * its 2-column span at the 3-up breakpoint. Mobile/tablet keep the grid.
 * ============================================================ */
@media (min-width: 1024px) and (max-width: 1279px) {
  .protocol-categories-stack {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
  }

  .protocol-categories-stack > .treatment-card {
    flex: 0 1 calc((100% - 24px) / 3 - 1px);
  }

  .protocol-categories-stack > :first-child {
    flex-basis: calc((100% - 24px) / 3 * 2 + 10px);
  }
}

@media (min-width: 1280px) {
  .protocol-categories-stack {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
  }

  .protocol-categories-stack > .treatment-card {
    flex: 0 1 calc((100% - 48px) / 5 - 1px);
  }
}

.kit-simple__media-ph {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-height: 100vh;
  max-width: 100vh; /* preserve 1:1 when height-capped */
  margin-inline: auto;
}

.kit-simple__media-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  margin-inline: auto;
}

.lab-locations-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

.lab-locations-grid .treatment-card {
  padding: 28px;
  overflow: hidden;
}

.lab-locations-grid .treatment-card .body {
  flex: 1;
  font-size: var(--text-body);
  line-height: 1.55;
}

.lab-location-card__media {
  width: calc(100% + 56px);
  margin: 32px -28px 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

@media (min-width: 768px) {
  .lab-locations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Force-hide the legacy kit-reveal / kit-arc experiments even if other CSS
   declares display on them. The `hidden` attribute is the source of truth. */
.kit-reveal[hidden],
.kit-arc[hidden] {
  display: none !important;
}

/* ============================================================
 * PROTOCOL BAND — dark, rounded, page-padded card with media + copy.
 * Same outer-inset pattern as .cta-band, with internal padding.
 * Used: testosterone "Microdosing protocol" signature moment.
 * ============================================================ */
.protocol-band {
  position: relative;
  margin: clamp(32px, 5vw, 72px) var(--section-gutter);
  min-height: clamp(520px, 70vh, 720px);
  display: flex;
  align-items: flex-end;
  background: #d8d8db;
  color: var(--fg);
  overflow: hidden;
  border-radius: var(--radius-lg);
  isolation: isolate;
  padding: clamp(32px, 5vw, 64px);
}

.protocol-band__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.protocol-band__copy {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.protocol-band__copy .eyebrow {
  color: var(--muted);
}

.protocol-band__copy h2 {
  margin-top: 12px;
  max-width: 18ch;
  color: var(--fg);
}

.protocol-band__copy .lead {
  margin-top: 24px;
  color: var(--muted);
  max-width: 600px;
}

.protocol-band__copy .soft-cta-row {
  margin-top: 24px;
}

.protocol-band__copy .soft-link {
  color: var(--fg);
}

.approach-split__copy .lead + .lead {
  margin-top: 16px;
}

@media (min-width: 768px) {
  .approach-split--reverse .approach-split__copy {
    order: 1;
  }
  .approach-split--reverse .approach-split__media {
    order: 2;
  }
}

/* ============================================================
 * APPROACH SPLIT LAYOUT MODIFIERS — reusable 10-col variants.
 * Use to alternate left/right compositions across pages.
 * ============================================================ */
@media (min-width: 768px) {
  .approach-split--layout-right,
  .approach-split--layout-left {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(16px, 2vw, 28px);
  }

  /* 4 cols copy + 1 col gap + 7 cols media */
  .approach-split--layout-right > .approach-split__copy {
    grid-column: 1 / span 4;
    order: 1;
  }

  .approach-split--layout-right > .approach-split__media {
    grid-column: 6 / span 7;
    order: 2;
  }

  /* 7 cols media + 1 col gap + 4 cols copy */
  .approach-split--layout-left > .approach-split__media {
    grid-column: 1 / span 7;
    order: 1;
  }

  .approach-split--layout-left > .approach-split__copy {
    grid-column: 9 / span 4;
    order: 2;
  }
}

@media (min-width: 1024px) {
  .approach-split--layout-right,
  .approach-split--layout-left {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    column-gap: clamp(16px, 2vw, 28px);
  }

  /* 3 cols copy + 1 col gap + 6 cols media */
  .approach-split--layout-right > .approach-split__copy {
    grid-column: 1 / span 3;
    order: 1;
  }

  .approach-split--layout-right > .approach-split__media {
    grid-column: 5 / span 6;
    order: 2;
  }

  /* 6 cols media + 1 col gap + 3 cols copy */
  .approach-split--layout-left > .approach-split__media {
    grid-column: 1 / span 6;
    order: 1;
  }

  .approach-split--layout-left > .approach-split__copy {
    grid-column: 8 / span 3;
    order: 2;
  }
}

/* 1:2 ratio variant — narrow media (3 cols) + 1-col gutter + wide copy (6 cols). */
@media (min-width: 768px) {
  .approach-split--ratio-1-2.approach-split--layout-left,
  .approach-split--ratio-1-2.approach-split--layout-right {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    column-gap: clamp(16px, 2vw, 28px);
  }

  .approach-split--ratio-1-2.approach-split--layout-left > .approach-split__media {
    grid-column: 1 / span 3;
  }

  .approach-split--ratio-1-2.approach-split--layout-left > .approach-split__copy {
    grid-column: 5 / span 6;
  }

  .approach-split--ratio-1-2.approach-split--layout-right > .approach-split__copy {
    grid-column: 1 / span 6;
  }

  .approach-split--ratio-1-2.approach-split--layout-right > .approach-split__media {
    grid-column: 8 / span 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-parallax] {
    transform: none !important;
  }

  .about-values-panel__bg-wrap,
  .scroll-bg-parallax__wrap {
    transform: none !important;
  }
}

@media (max-width: 767px) {
  /* Mobile: rail collapses to a top horizontal scroller; less prominent */
  .sticky-split__rail {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Keep the existing mobile rail (heading is a desktop-only addition) */
  .faq-rail__heading {
    display: none;
  }
  .sticky-split__nav {
    flex-direction: row;
    gap: 16px;
    white-space: nowrap;
    padding-bottom: 4px;
  }
  .sticky-split__nav-link {
    padding: var(--sticky-nav-link-mobile-padding, var(--sticky-nav-link-padding, 6px 0));
  }
}

/* ============================================================
 * T Score Quiz page (/check) — layout, intro, and full flow
 * ============================================================ */

/* 1-col offset on desktop so the quiz spans cols 2–11 (10 of 12) */
@media (min-width: 768px) {
  /* At 900–1023px: go full-width inside the 12-col modern-grid */
  .col-start-d-2.span-d-10 {
    grid-column: 1 / span 12;
  }
  /* span-d-8 + col-start-d-3: place in cols 3-10 of the 12-col grid (8 of 12, centred) */
  .col-start-d-3.span-d-8 {
    grid-column: 3 / span 8;
  }
}
@media (min-width: 1024px) {
  /* span-d-10 + col-start-d-2: place in cols 2-11 of the 12-col grid */
  .col-start-d-2.span-d-10 {
    grid-column: 2 / span 10;
  }
}

/* Survey section: white surface (matches funnel), vertically-centred, full viewport */
.section--quiz {
  padding-top: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(48px, 6vw, 96px);
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Reuse the funnel "onboard" centred column; section already supplies vertical padding */
.section--quiz .onboard {
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
}

/* Progress + back row sits just above the question card (not above the headings) */
.adam-quiz__nav {
  text-align: center;
}

/* Stretch the progress row + bar the full width of the card below it */
.adam-quiz__nav .progress-row {
  max-width: none;
  margin: 0 0 10px;
  gap: 14px;
}

.adam-quiz__nav .progress {
  max-width: none;
}

/* Prev/next arrows: 32x32 centred buttons either side of the bar */
.adam-quiz__nav .back,
.adam-quiz__nav .forward {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin: 0;
  gap: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
  transition: background 0.15s ease, color 0.15s ease;
}

.adam-quiz__nav .back:not(:disabled):hover,
.adam-quiz__nav .forward:not(:disabled):hover {
  background: color-mix(in srgb, var(--brand-electric) 12%, var(--surface));
  color: var(--brand-electric);
}

.adam-quiz__nav .back:disabled,
.adam-quiz__nav .forward:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Quiz progress segments: current = bright blue, answered = light blue, rest = grey */
.adam-quiz__nav .progress span {
  background: var(--border);
}

.adam-quiz__nav .progress span.active {
  background: color-mix(in srgb, var(--brand-electric) 32%, var(--surface));
}

.adam-quiz__nav .progress span.current {
  background: var(--brand-electric);
}

.adam-quiz__nav .step-meta {
  margin-bottom: 0;
}

/* Reserve two lines for the question so the card height doesn't jump
   when a heading wraps from one line to two */
.adam-quiz__card[data-adam-card] .adam-quiz__question {
  min-height: calc(2 * 1.25em);
}

/* "Answer 10 clinically validated questions…" descriptor → body-large */
.section--quiz .onboard-head .lead {
  font-size: var(--text-body-lg);
  line-height: 1.5;
}

/* ADAM methodology accordion sits directly under the subheading, centred + constrained */
.adam-methodology {
  text-align: left;
  max-width: 520px;
  margin: 16px auto 0;
}

.adam-methodology .faq-q[aria-expanded="false"] {
  padding-top: var(--med-accordion-pad-y);
  padding-bottom: var(--med-accordion-pad-y);
}

.adam-methodology .med-accordion__label {
  font-size: var(--text-body);
  order: 1;
}

/* Read-more arrow on the right (this instance only) */
.adam-methodology .faq-icon {
  order: 2;
  margin-left: auto;
}

.adam-methodology .faq-q[aria-expanded="true"] + .faq-a {
  padding-bottom: var(--med-accordion-pad-y);
}

.adam-methodology .faq-a p {
  margin: 0;
  line-height: 1.6;
}

/* Keep the progress bar aligned when an arrow is hidden (reserve its space) */
.progress-row .back[hidden],
.progress-row .forward[hidden] {
  display: inline-flex;
  visibility: hidden;
}

/* --- Quiz intro (compact header above the quiz) --- */
.quiz-intro {
  margin-bottom: 28px;
}

.quiz-intro__eyebrow {
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.quiz-intro__heading {
  font-size: var(--heading-h2);
  line-height: 1.1;
  margin: 0 0 10px;
}

.quiz-intro__lead {
  font-size: var(--text-body-lg);
  line-height: 1.5;
  color: var(--muted-2);
  max-width: 54ch;
  margin: 0;
}

/* Collapsible ADAM methodology note */
.quiz-methodology {
  margin-top: 14px;
  font-size: var(--text-body-sm);
  color: var(--muted-2);
}

.quiz-methodology summary {
  cursor: pointer;
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 2px;
  list-style: none;
  display: inline-block;
}

.quiz-methodology summary::-webkit-details-marker {
  display: none;
}

.quiz-methodology__body {
  margin-top: 12px;
  padding: 16px;
  background: var(--surface);
  border-radius: var(--radius);
  font-size: var(--text-body-sm);
  line-height: 1.6;
}

/* Reduce top gap for the quiz itself on this page */
.section--quiz .adam-quiz {
  margin-top: 0;
}

/* --- Answer button icons --- */
.adam-quiz__answer-icon {
  display: inline-block;
  margin-right: 4px;
  font-style: normal;
  opacity: 0.7;
}

/* Selected answer highlight — matches funnel .option.selected (blue border) */
.adam-quiz__answer--selected {
  border-color: var(--brand-electric) !important;
  border-width: 1.5px;
  background: var(--surface) !important;
  color: var(--fg) !important;
}

.adam-quiz__answer--selected .adam-quiz__answer-icon {
  opacity: 1;
  color: var(--brand-electric);
}

/* --- Back link (inside card) --- */
.adam-quiz__back {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--text-body-sm);
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-align: left;
  margin-top: 4px;
}

.adam-quiz__back:hover {
  color: var(--fg);
}

/* --- Email gate panel --- */
.adam-quiz__email-sub {
  font-size: var(--text-body);
  color: var(--muted-2);
  line-height: 1.55;
  margin: 0;
}

.adam-quiz__email-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: stretch;
  margin-top: 4px;
}

.adam-quiz__email-input {
  flex: 1 1 220px;
  min-width: 0;
  appearance: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
  font-family: inherit;
  font-size: var(--text-body);
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.18s;
}

.adam-quiz__email-input:focus {
  border-color: var(--fg);
}

.adam-quiz__email-submit {
  white-space: nowrap;
  flex-shrink: 0;
}

.adam-quiz__email-privacy {
  font-size: var(--text-label);
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

.adam-quiz__email-privacy a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Risk indicator card --- */
.adam-risk-card {
  padding: 28px 32px;
  border-radius: 28px;
  margin-bottom: 28px;
  box-shadow:
    0 18px 40px -12px rgba(9, 9, 11, 0.28),
    0 6px 14px rgba(9, 9, 11, 0.12);
}

.adam-risk-card--high {
  background: #b91c1c;
  color: #ffffff;
}

.adam-risk-card--moderate {
  background: #ca8a04;
  color: #1a1303;
}

.adam-risk-card--healthy {
  background: #15803d;
  color: #ffffff;
}

.adam-risk-card__score {
  font-size: 2.75rem;
  font-weight: var(--font-bold, 700);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  opacity: 0.9;
}

.adam-risk-card__headline {
  font-size: var(--text-h3, 1.5rem);
  font-weight: var(--font-bold, 700);
  line-height: 1.25;
  margin: 0 0 12px;
}

.adam-risk-card__body {
  font-size: var(--text-body-lg);
  line-height: 1.5;
  margin: 0;
  opacity: 0.95;
}

@media (max-width: 640px) {
  .adam-risk-card {
    padding: 22px 20px;
  }
}

/* --- Result copy --- */
.adam-quiz__result-body {
  font-size: var(--text-body);
  color: var(--muted-2);
  line-height: 1.6;
}

.adam-quiz__result-detail {
  font-size: var(--text-body);
  color: var(--muted-2);
  line-height: 1.6;
}

/* --- Answer summary list --- */
.adam-summary__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.adam-summary__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-body-sm);
  line-height: 1.45;
}

.adam-summary__q {
  color: var(--fg);
  flex: 1;
}

.adam-summary__a {
  font-weight: var(--font-semibold);
  font-size: var(--text-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
}

.adam-summary__a--yes {
  background: var(--fg);
  color: var(--surface);
}

.adam-summary__a--no {
  background: var(--surface);
  color: var(--muted-2);
}

.adam-summary__a--score0 { background: #dcfce7; color: #14532d; }
.adam-summary__a--score1 { background: #f0fdf4; color: #166534; }
.adam-summary__a--score2 { background: #fef9c3; color: #713f12; }
.adam-summary__a--score3 { background: #ffedd5; color: #7c2d12; }
.adam-summary__a--score4 { background: #fee2e2; color: #7f1d1d; }

/* Ensure [hidden] always hides elements (overrides display:flex on cards) */
[hidden] { display: none !important; }

/* ============================================================
   BLOG — index + post pages
   ============================================================ */

/* ---- Blog Index ---- */
.blog-index__hero {
  background: var(--fg);
  color: var(--surface);
  padding: 80px 24px 64px;
  text-align: center;
}

.blog-index__hero-inner {
  max-width: 640px;
  margin: 0 auto;
}

.blog-index__hero h1 {
  font-size: var(--heading-h2);
  font-weight: var(--font-bold);
  margin: 0 0 16px;
  color: var(--surface);
}

.blog-index__hero p {
  font-size: var(--text-body-lg);
  color: rgba(255,255,255,0.75);
  margin: 0;
}

.blog-index__grid-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 64px 24px 80px;
}

.blog-index__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@media (max-width: 767px) {
  .blog-index__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 639px) {
  .blog-index__grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Blog list (horizontal rows) ---- */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ---- Blog Card ---- */
.blog-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.blog-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}

.blog-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface);
  flex-shrink: 0;
}

.blog-card__img,
.blog-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-card__img-placeholder {
  width: 100%;
  height: 100%;
  background: #82C8E5;
}

.blog-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Horizontal row layout on tablet/desktop: image left, text right */
@media (min-width: 640px) {
  .blog-card {
    flex-direction: row;
  }

  .blog-card__img-wrap {
    width: clamp(220px, 34%, 360px);
    aspect-ratio: 16 / 9;
    align-self: stretch;
  }

  .blog-card__body {
    padding: 28px 32px;
    justify-content: center;
  }

  .blog-card__title {
    font-size: var(--heading-h3);
  }

  .blog-card__excerpt {
    font-size: var(--text-body);
    flex: 0 1 auto;
  }
}

.blog-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  font-size: var(--text-body-sm);
  color: var(--muted-2);
}

.blog-card__meta time {
  font-size: var(--text-body-sm);
  color: var(--muted-2);
}

.blog-card__tag {
  font-size: var(--text-label);
  font-weight: var(--font-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: #f4f4f5;
  color: var(--muted-2);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 3px 9px;
}

.blog-card__title {
  font-size: var(--text-body-lg);
  font-weight: var(--font-semibold);
  line-height: 1.35;
  margin: 0 0 12px;
  color: var(--fg);
}

.blog-card__title a {
  color: inherit;
  text-decoration: none;
}

.blog-card__title a:hover {
  color: var(--accent);
}

.blog-card__excerpt {
  font-size: var(--text-body-sm);
  color: var(--muted-2);
  line-height: 1.6;
  margin: 0 0 20px;
  flex: 0 1 auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__read-more {
  font-size: var(--text-body-sm);
  font-weight: var(--font-semibold);
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.blog-card__read-more:hover {
  text-decoration: underline;
}

/* ---- Learn hub toolbar (content-type filters + search) ---- */
.blog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.blog-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.blog-seg-btn {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted-2);
  font-size: var(--text-body-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.blog-seg-btn:hover {
  border-color: var(--fg);
  color: var(--fg);
}

.blog-seg-btn--active,
.blog-seg-btn--active:hover {
  background: var(--brand-electric);
  border-color: var(--brand-electric);
  color: #fff;
}

.blog-active-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  font-size: var(--text-body-sm);
  color: var(--muted-2);
}

.blog-active-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  font-size: var(--text-label);
  font-weight: var(--font-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}

.blog-active-filter__chip:hover {
  border-color: var(--fg);
}

.blog-active-filter__chip span {
  font-size: 14px;
  line-height: 1;
}

/* ---- Video post: full-bleed 16:9 hero + details below ---- */
.video-hero {
  width: 100%;
  background: #000;
  display: flex;
  justify-content: center;
  /* Sit directly under the fixed navbar instead of behind it. */
  margin-top: var(--site-header-layout-h, 96px);
}

.video-hero__frame {
  position: relative;
  width: min(100%, calc((100svh - var(--site-header-layout-h, 96px)) * 16 / 9));
  aspect-ratio: 16 / 9;
}

.video-hero__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Native (self-hosted) video keeps its own intrinsic aspect ratio
   (read from metadata into --vid-ar) and grows to the largest box that
   fits the container width and the viewport height below the navbar. */
.video-hero__native {
  display: block;
  aspect-ratio: var(--vid-ar, 16 / 9);
  width: min(
    100%,
    calc((100svh - var(--site-header-layout-h, 96px)) * var(--vid-ar, 1.7778))
  );
  height: auto;
  background: #000;
}

.video-hero__fallback {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: calc(100svh - var(--site-header-layout-h, 96px));
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-hero__fallback a {
  color: #fff;
  font-weight: var(--font-semibold);
  text-decoration: underline;
}

.video-post .blog-post__back {
  display: inline-block;
  margin-bottom: 20px;
}

.video-post__kicker {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--brand-electric);
  color: #fff;
  font-size: var(--text-label);
  font-weight: var(--font-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.video-post__title {
  font-size: var(--display-h3);
  margin: 0 0 16px;
}

.video-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-bottom: 16px;
  color: var(--muted-2);
  font-size: var(--text-body-sm);
}

.video-post__meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.video-post__meta-label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--text-label);
}

.video-post__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.video-post__excerpt {
  margin-bottom: 24px;
}

.video-post__nav {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.video-post__nav-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 48%;
  text-decoration: none;
  color: var(--fg);
}

.video-post__nav-link--next {
  text-align: right;
  margin-left: auto;
  align-items: flex-end;
}

.video-post__nav-dir {
  font-size: var(--text-body-sm);
  color: var(--muted);
}

.video-post__nav-title {
  font-weight: var(--font-semibold);
}

.video-post__nav-link:hover .video-post__nav-title {
  color: var(--brand-electric);
}

/* ---- Learn hub: featured + 3-col grid (no card chrome) ---- */
.blog-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 40px;
}

.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px 28px;
}

.blog-item {
  display: flex;
  flex-direction: column;
}

/* Make the whole card clickable via a stretched title link */
.blog-item,
.blog-feature {
  position: relative;
  cursor: pointer;
}

.blog-item__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.blog-item__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface);
}

.blog-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.blog-item:hover .blog-item__img,
.blog-feature:hover .blog-item__img {
  transform: scale(1.03);
}

.blog-item__placeholder {
  width: 100%;
  height: 100%;
  background: #82C8E5;
}

.blog-item__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: var(--text-body-sm);
  font-weight: var(--font-semibold);
  letter-spacing: 0.02em;
  pointer-events: none;
}

.blog-item__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-radius: 50%;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-body-lg);
  pointer-events: none;
}

.blog-item__body {
  padding: 16px 0 0;
  display: flex;
  flex-direction: column;
}

.blog-item__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  font-size: var(--text-body-sm);
  color: var(--muted-2);
}

.blog-item__meta time {
  font-size: var(--text-body-sm);
  color: var(--muted-2);
}

/* Keep tag chips clickable above the card's stretched link overlay */
.blog-item__meta .blog-card__tag {
  position: relative;
  z-index: 2;
}

.blog-item__title {
  font-size: var(--text-body-lg);
  font-weight: var(--font-semibold);
  line-height: 1.35;
  margin: 0 0 8px;
  color: var(--fg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-item__title a {
  color: inherit;
  text-decoration: none;
}

.blog-item__title a:hover {
  color: var(--accent);
}

.blog-item__excerpt {
  font-size: var(--text-body-sm);
  color: var(--muted-2);
  line-height: 1.6;
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 640px) {
  .blog-feature {
    grid-template-columns: 2fr 1fr;
    gap: 32px;
    align-items: center;
  }

  .blog-feature .blog-item__body {
    padding: 0;
  }

  .blog-feature .blog-item__title {
    font-size: var(--heading-h3);
    -webkit-line-clamp: 3;
  }

  .blog-feature .blog-item__excerpt {
    font-size: var(--text-body);
  }

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

/* ---- Blog Post ---- */
.blog-post__header {
  background: var(--fg);
  color: var(--surface);
  padding: 64px 24px 56px;
}

.blog-post__header-inner {
  max-width: 760px;
  margin: 0 auto;
}

.blog-post__back {
  display: inline-block;
  font-size: var(--text-body-sm);
  font-weight: var(--font-semibold);
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  margin-bottom: 24px;
  letter-spacing: 0.01em;
}

.blog-post__back:hover {
  color: rgba(255,255,255,0.9);
}

.blog-post__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  font-size: var(--text-body-sm);
  color: rgba(255,255,255,0.6);
}

.blog-post__meta time {
  font-size: var(--text-body-sm);
  color: rgba(255,255,255,0.6);
}

.blog-post__meta .blog-card__tag {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.75);
  border-color: rgba(255,255,255,0.2);
}

.blog-post__title {
  font-size: var(--heading-h2);
  font-weight: var(--font-bold);
  line-height: 1.2;
  color: var(--surface);
  margin: 0 0 20px;
}

.blog-post__excerpt {
  font-size: var(--text-body);
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  margin: 0;
  max-width: 640px;
}

.blog-post__body {
  padding: 56px 24px 80px;
}

.blog-post__content {
  max-width: 760px;
  margin: 0 auto;
}

/* ---- Article prose ---- */
.blog-article {
  color: var(--fg);
  font-size: var(--text-body);
  line-height: 1.75;
}

.blog-article .blog-article__lead {
  font-size: var(--text-body-lg);
  color: var(--muted-2);
  line-height: 1.7;
  margin-bottom: 2rem;
  border-left: 3px solid var(--accent);
  padding-left: 1.25rem;
}

.blog-article h2 {
  font-size: var(--text-body-lg);
  font-weight: var(--font-semibold);
  color: var(--fg);
  margin: 2.5rem 0 0.75rem;
  line-height: 1.3;
}

.blog-article p {
  margin: 0 0 1.25rem;
}

.blog-article ul,
.blog-article ol {
  padding-left: 1.5rem;
  margin: 0 0 1.25rem;
}

.blog-article li {
  margin-bottom: 0.5rem;
}

.blog-article strong {
  font-weight: var(--font-semibold);
  color: var(--fg);
}

.blog-article__pullquote {
  border: none;
  border-left: 4px solid var(--accent);
  margin: 2.5rem 0;
  padding: 1rem 1.5rem;
  background: var(--surface);
  border-radius: 0 8px 8px 0;
  font-size: var(--text-body-lg);
  font-style: italic;
  color: var(--muted-2);
  line-height: 1.6;
}

.blog-article__cta {
  margin-top: 3rem;
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
}

.blog-article__cta p {
  font-weight: var(--font-semibold);
  font-size: var(--text-body);
  color: var(--fg);
  margin-bottom: 1rem;
}

/* ---- Blog post sidebar + table of contents ---- */
.blog-post__hero {
  border-bottom: none;
  padding-top: calc(var(--nav-pill-outer) + 28px);
  padding-bottom: 32px;
}

@media (min-width: 1024px) {
  .blog-post__hero {
    padding-top: calc(var(--nav-pill-outer) + 48px);
    padding-bottom: 40px;
  }
}

.blog-post-grid {
  row-gap: 40px;
  column-gap: calc(var(--grid-gap) * 3);
}

.blog-post__sidebar {
  min-width: 0;
}

.blog-post__sidebar-inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.blog-post__sidebar-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface);
}

.blog-post__sidebar-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-post__facts {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.blog-post__fact {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.blog-post__fact dt {
  font-size: var(--text-label);
  font-weight: var(--font-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.blog-post__fact dd {
  margin: 0;
  font-size: var(--text-body-sm);
  color: var(--fg);
}

.blog-post__tags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* ---- Article meta above title ---- */
.blog-post__meta-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--text-body-sm);
  color: var(--muted);
  margin-bottom: 14px;
}

.blog-post__meta-sep {
  color: var(--border);
}

/* ---- Related articles ---- */
.blog-related {
  border-top: 1px solid var(--border);
}

.blog-related__title {
  font-size: var(--text-label);
  font-weight: var(--font-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 20px;
}

.blog-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .blog-related__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.blog-related__card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.blog-related__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  background: var(--surface);
  margin-bottom: 12px;
}

.blog-related__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.blog-related__card:hover .blog-related__img {
  transform: scale(1.03);
}

.blog-related__placeholder {
  width: 100%;
  height: 100%;
}

.blog-related__tag {
  font-size: var(--text-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.blog-related__card-title {
  font-size: var(--text-body);
  font-weight: var(--font-semibold);
  line-height: 1.3;
  margin: 0;
  transition: color 0.15s ease;
}

.blog-related__card:hover .blog-related__card-title {
  color: var(--brand-electric);
}

/* ---- Article cover (between subtext and content) ---- */
.blog-post__cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: clamp(28px, 4vw, 44px);
}

/* ============================================================
 * MICRODOSING ORIGIN CALLOUT — homepage card
 * section--microdose-origin
 * ============================================================ */

.section--microdose-origin {
  padding: calc(clamp(48px, 6vw, 80px) * var(--section-vpad-scale)) 0;
}

.microdose-origin__card {
  background: var(--brand-navy);
  color: var(--on-dark);
  border-radius: 16px;
  padding: clamp(40px, 5vw, 72px) clamp(32px, 7vw, 88px);
  overflow: hidden;
}

.microdose-origin__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(36px, 5vw, 56px);
}

/* ---- graph column ---- */
.microdose-origin__graph {
  min-width: 0;
}

.microdose-graph {
  position: relative;
}

.microdose-graph__topline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  font-size: var(--text-body-sm);
  color: var(--on-dark-muted);
}

.microdose-graph__topline strong {
  font-size: var(--text-body);
  font-weight: var(--font-semibold);
  color: var(--on-dark);
}

.microdose-graph__topline span {
  font-size: var(--text-body-sm);
  color: var(--on-dark-muted);
}

.microdose-graph__svg {
  display: block;
  width: 100%;
  height: clamp(160px, 22vw, 260px);
  overflow: visible;
}

/* Show curves immediately (fallback if animation hasn't fired) */
.microdose-graph .protocol-graph__volatile,
.microdose-graph .protocol-graph__stabilising {
  stroke-dashoffset: 0;
}

.microdose-graph .protocol-graph__target,
.protocol-moment--card .protocol-graph__target {
  fill: url(#optimalRangeHatch);
}

.microdose-graph__zone-label {
  font-family: var(--sans);
  font-size: var(--heading-h3);
  fill: rgba(255, 255, 255, 0.38);
  font-weight: var(--font-normal);
}

.microdose-graph__axis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--text-body-sm);
  color: var(--on-dark-muted);
}

.microdose-graph__legend {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 14px;
  font-size: var(--text-body-sm);
  color: var(--on-dark-muted);
}

.microdose-graph__legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
}

.microdose-graph__legend-item::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  border-radius: 1px;
  flex-shrink: 0;
}

.microdose-graph__legend-item--volatile::before {
  background: rgba(255, 255, 255, 0.30);
}

.microdose-graph__legend-item--steady::before {
  background: var(--on-dark);
}

/* ---- copy column ---- */
.microdose-origin__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: var(--text-body);
}

.microdose-origin__copy .type--display-2 {
  color: var(--on-dark);
}

.microdose-origin__copy .lead {
  color: var(--on-dark-muted);
}

.microdose-origin__link {
  display: inline-block;
  font-size: var(--text-body);
  font-weight: var(--font-semibold);
  color: var(--on-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 2px;
  transition: border-color 0.15s;
  align-self: flex-start;
}

.microdose-origin__link:hover {
  border-color: var(--on-dark);
}

/* ============================================================
 * Graph line tooltip
 * ============================================================ */

.graph-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  max-width: 268px;
  background: #fff;
  color: var(--brand-navy);
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.14);
  opacity: 0;
  transition: opacity 0.14s ease;
  will-change: transform;
}

.graph-tooltip--visible {
  opacity: 1;
}

.graph-tooltip__label {
  display: block;
  font-size: var(--text-body-sm);
  font-weight: var(--font-semibold);
  letter-spacing: 0.01em;
  margin-bottom: 5px;
  color: var(--brand-navy);
}

.graph-tooltip__body {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: rgba(0, 24, 60, 0.62);
}

/* Line colour on hover */
.protocol-graph__volatile,
.protocol-graph__stabilising {
  transition: stroke 0.2s ease;
}

.protocol-graph__svg[data-hover="volatile"] .protocol-graph__volatile {
  stroke: #7ec8e3;
}

.protocol-graph__svg[data-hover="stabilising"] .protocol-graph__stabilising {
  stroke: var(--brand-yellow);
}


/* ============================================================
 * TESTOSTERONE PAGE — QA polish (scoped via .page-testosterone)
 * ============================================================ */

/* Hero — stronger parallax travel on the testosterone hero image */
.page-testosterone .hero-card .scroll-bg-parallax__wrap--reverse {
  top: -24%;
  bottom: -24%;
}

/* Symptoms — a touch more padding + gap between rows (vs homepage) */
.page-testosterone .home-symptoms-grid__symptoms .symptoms-scroll .symptoms-list {
  gap: 14px;
}
.page-testosterone .home-symptoms-grid__symptoms .symptoms-scroll .symptoms-list li {
  padding: clamp(16px, 2.4vw, 22px) clamp(18px, 2.8vw, 24px);
}

/* Protocol cards — soft shadow on hover + visible "Popular" badge on featured card */
.page-testosterone .protocol-categories-stack .treatment-card {
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.page-testosterone .protocol-categories-stack .treatment-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(9, 9, 11, 0.14);
}
.page-testosterone .protocol-categories-stack .card-outline-strong:hover {
  box-shadow: 0 18px 44px rgba(0, 112, 231, 0.28);
}
@media (prefers-reduced-motion: reduce) {
  .page-testosterone .protocol-categories-stack .treatment-card,
  .page-testosterone .protocol-categories-stack .treatment-card:hover {
    transition: none;
    transform: none;
  }
}

/* ---------- Mobile (xs/sm): 12-col grid for the testosterone page ---------- */
@media (max-width: 767px) {
  .page-testosterone main .modern-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  /* Sections that were full-width (span-m-6 of 6) span the full 12 cols */
  .page-testosterone main .modern-grid > .layout-col.span-m-6 {
    grid-column: 1 / span 12;
  }

  /* Graph — full 12-col width with gap-width side padding */
  .page-testosterone .protocol-moment--card .protocol-layout {
    padding: clamp(20px, 6vw, 28px) var(--grid-gap);
  }

  /* Reviews — suppress scrolling video subtitles on mobile (they overlap the cards) */
  .page-testosterone .story-card-video-subtitles {
    display: none;
  }
}