/* ============================================================
   V3 — Layout & usability overrides on top of base.css (V2 theme)
   Same palette system, improved layouts:
   - Tighter hero w/ integrated trust signals
   - Interactive eligibility self-check
   - Stat-led "Why China" cards
   - Connected journey timeline
   - Grouped support section
   - Sticky eligibility bar (appears after hero)
   - Nav variants: editorial (numbered) / simple (conventional)
   - Density: comfortable / compact via data-density
   ============================================================ */

/* ---------- Density ---------- */
/* 🔴 Section rhythm `[Jacob, 7 Aug 2026]`. Padding is top AND bottom, so the
   whitespace between two adjacent sections is DOUBLE this number.

   Before: three near-identical rhythms with no system between them — 112px
   from this token (15 of 100 sections), 96px hardcoded (14), 88px hardcoded
   (27) — giving gaps of 224 / 192 / 176px. The token reached three pages.
   Now one value, and the 37 hardcoded rules read it. 72px = 144px between
   sections, down from 176–224.

   ⛔ Do not re-hardcode a section padding in a page sheet. That is how the
   token ended up governing three pages out of thirty-six. */
:root {
  --section-py: 72px;
  --section-py-sm: 48px;
}
/* ---------- Nav variants ---------- */
/* [DECISION — Jacob, 4 Aug 2026] The "simple" nav is the only nav. Promoted
   from :root[data-nav="simple"] on 5 Aug; the 6 patient-story pages, which
   never carried the attribute, join it here — they were rendering the CTA
   hidden and the ghost link shown, the reverse of the other 29, on a
   primary conversion path. That was a defect, not a variant.

   🔴 :root:root is load-bearing. These were (0,3,0)/(0,4,0) with the
   attribute; :root:root reproduces that exactly. A bare selector drops to
   (0,1,0)/(0,2,0) and loses to page sheets — measured on the text-size
   promotion as 4,674 changed elements.

   ⛔ data-nav="editorial" deleted — no page ever used it, and a rule
   nothing can reach reads as live. */
:root:root .nav-item .n { display: none; }
:root:root .nav-center { gap: 32px; font-size: var(--fs-ui); }
:root:root .nav-right .btn-ghost { display: none; }

/* 🔴 The 1101–1240 band. --fs-ui went 14px → 15px on 7 Aug 2026, which widened
   the menu to 478px and the CTA cluster to 223px. Measured at 1101: the flanks
   fell to 17.8px each and the logo was almost touching the first item. The
   menu still fits — this buys back ~50px of flank so it does not look wedged.
   ⚠️ Keep the flanks EQUAL: chrome spec §1 records that equal `1fr` tracks
   were the original defect, and the fix was flanks sized by their contents. */
@media (max-width: 1240px) {
  :root:root .nav-center { gap: 22px; }
}

.nav-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  background: var(--btn-fill);
  color: #F5F1E8;
  border: 0;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-ui);
  letter-spacing: 0.04em;
  cursor: pointer;
}
.nav-cta-btn:hover { background: var(--btn-fill-hi); }

/* ============================================================
   HERO — tighter, conversion-clear
   ============================================================ */
.hero.hero-bg {
  --nav-h: 72px; /* sticky nav: 18px padding ×2 + 35px logo + 1px border */
  min-height: max(620px, calc(100svh - var(--nav-h)));
  padding: 16px 0 0;
  display: flex;
}
.hero.hero-bg > .container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.hero-grid {
  grid-template-columns: minmax(0, 640px) 1fr;
  min-height: 0;
  padding-top: 24px;
  align-items: start;
  flex: 1 1 auto;
  align-content: center; /* centre the text block in the spare height */
}
.hero-text { padding-bottom: 0; }
.hero-headline {
  font-size: clamp(44px, 4.6vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.hero-text .lede {
  margin-top: 24px;
  max-width: 520px;
  font-size: 16.5px;
}
.hero-ctas { margin-top: 32px; gap: 22px; }
.hero-assurance {
  margin-top: 18px;
  font-size: var(--fs-sm);
  color: var(--slate-mid);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-assurance::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* Trust strip integrated into hero bottom */
.hero .trust-strip {
  margin-top: auto;
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 8px 8px 0 0;
  border: 1px solid var(--border-soft);
  padding: 24px 32px;
}

/* Hero image variant — patient & family (transparent cutout).
   Anchored bottom-right so the figures stand behind the frosted
   trust strip; a soft accent wash sits behind them so they don't
   float on bare cream. Text column on the left stays clear. */

/* Full opaque landscape photo (patient, care team & flowers) — NOT a
   cutout. Two treatments: a clean rounded frame on the right, or a
   faded full-bleed background. */

/* ============================================================
   ELIGIBILITY SELF-CHECK WIDGET
   ============================================================ */
.selfcheck-panel {
  background: var(--sage-pale);
  border-radius: 8px;
  padding: 72px clamp(32px, 5vw, 80px) 76px;
}
.selfcheck-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
}
.selfcheck-intro h2 { color: var(--sage-ink); }
.selfcheck-intro .lede { color: var(--sage-ink); opacity: 0.8; margin-top: 20px; max-width: 420px; }
.selfcheck-conditions {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.condition-chip {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 18px;
  background: color-mix(in oklab, var(--bg-card) 55%, transparent);
  border-radius: 6px;
  font-size: var(--fs-sm);
  color: var(--sage-ink);
}
.condition-chip .tgt {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  flex-shrink: 0;
  width: 92px;
}
.condition-chip .nm { font-weight: 500; }

/* The .checker* rules that sat here were deleted on 12 Aug 2026 with the
   homepage self-check widget. They were generated-markup-only — zero
   occurrences of any `checker` class across all 36 HTML files; the classes
   existed solely on nodes checker-v10.js built at runtime. Nothing else in
   this shared sheet referenced them.
   ⚠️ `.selfcheck-panel` and `.selfcheck-intro` above are STILL LIVE — they
   style the conditions section that remains. `.selfcheck-grid`,
   `.selfcheck-conditions` and `.condition-chip` were already dead before this
   change (see index.css §10) and are left for a separate CSS sweep. */

/* ============================================================
   OUTCOMES — tightened block
   ============================================================ */
.outcomes-headline { margin-bottom: 56px; }
.outcome-block { gap: 64px; }
.testimonials { margin-top: 64px; }

/* ============================================================
   WHY CHINA — stat-led cards
   ============================================================ */
.why-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 8px;
}
.why-card {
  background: var(--bg-card);
  border-radius: 8px;
  padding: 30px 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.why-card .stat {
  font-family: var(--font-serif);
  font-weight:500;
  font-size: clamp(36px, 3.2vw, 52px);
  line-height: 1;
  color: var(--fg-strong);
  letter-spacing: -0.01em;
}
.why-card .stat em { color: var(--accent-deep); font-style: italic; }
.why-card h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 21px;
  margin: 6px 0 0;
  color: var(--fg-strong);
}
.why-card p { font-size: var(--fs-sm); line-height: 1.55; }
.why-card.lead {
  grid-column: span 3;
  flex-direction: row;
  align-items: center;
  gap: 48px;
  background: var(--sage-pale);
}
.why-card.lead .stat { font-size: clamp(56px, 5vw, 84px); color: var(--sage-ink); }
.why-card.lead h4 { color: var(--sage-ink); font-size: 24px; }
.why-card.lead p { color: var(--sage-ink); opacity: 0.8; max-width: 520px; }

/* ============================================================
   JOURNEY — connected timeline
   ============================================================ */
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 8px;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 12px;
  right: 12px;
  height: 1.5px;
  background: var(--border);
}
.tl-step { position: relative; padding-top: 36px; }
.tl-step::before {
  content: "";
  position: absolute;
  top: 4px; left: 0;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--slate-mid);
  z-index: 1;
}
.tl-step.active::before {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent) 18%, transparent);
}
.tl-step .sn {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--accent-deep);
  margin-bottom: 8px;
}
.tl-step h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 22px;
  margin: 0 0 10px;
  color: var(--fg-strong);
}
.tl-step p { font-size: var(--fs-sm); line-height: 1.6; }
.tl-step .tag {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  /* ⚠️ 14% tint darkened the ground enough to pull --accent-deep to 3.89:1 on a
     9.5px label. 8% keeps the chip readable as a chip and puts it back over
     4.5:1 — the tint was doing the damage, not the text colour. */
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  padding: 5px 10px;
  border-radius: 999px;
}
.tl-step .dur {
  display: block;
  margin-top: 12px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-mid);
}

/* ============================================================
   SUPPORT — grouped 4×2
   ============================================================ */
.support-groups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.support-group {
  background: var(--bg-card);
  border-radius: 8px;
  padding: 30px 32px;
}
.support-group h5 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 21px;
  margin: 0 0 14px;
  color: var(--fg-strong);
  display: flex;
  align-items: center;
  gap: 12px;
}
.support-group h5 .icon {
  width: 20px; height: 20px;
  color: var(--accent);
  flex-shrink: 0;
}
.support-group ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.support-group li {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--slate-dark);
  display: flex;
  gap: 10px;
}
.support-group li::before {
  content: "·";
  color: var(--accent);
  font-weight: 700;
}

/* ============================================================
   OUTCOMES — story-led: featured video, stat band, photo cards
   ============================================================ */
.outcomes-headline { margin-bottom: 56px; }

.story-feature {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  background: var(--bg-card);
  border-radius: 10px;
  padding: 40px;
  margin-bottom: 64px;
}
.story-media {
  position: relative;
}
.story-media image-slot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  background: color-mix(in oklab, var(--sage-pale) 70%, transparent);
  border-radius: 10px;
}
.play-badge {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 0;
  background: color-mix(in oklab, var(--ink) 78%, transparent);
  color: #F2EDE4;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 180ms var(--ease), background 180ms var(--ease);
  backdrop-filter: blur(4px);
}
.play-badge:hover {
  transform: translate(-50%, -50%) scale(1.07);
  background: var(--accent);
}
.play-badge svg { width: 30px; height: 30px; margin-left: 3px; }
.story-caption {
  position: absolute;
  left: 14px; bottom: 12px;
  font-size: var(--fs-note);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #F2EDE4;
  background: color-mix(in oklab, var(--ink) 72%, transparent);
  padding: 6px 12px;
  border-radius: 999px;
  pointer-events: none;
}
.story-quote { display: flex; flex-direction: column; align-items: flex-start; }
.quote-xl {
  font-family: var(--font-serif);
  font-weight:500;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--fg-strong);
  text-wrap: pretty;
  margin: 18px 0 26px;
}
.quote-xl .accent { color: var(--accent-deep); font-style: italic; }
.story-quote .attribution {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 0;
  padding: 0;
}
.avatar-slot {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.story-quote .meta .name { font-weight: 500; color: var(--fg-strong); font-size: var(--fs-sm); }
.story-quote .meta .where { font-size: var(--fs-note); color: var(--slate-mid); }
.outcome-chip {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-note);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--accent-deep);
  background: color-mix(in oklab, var(--accent) 13%, transparent);
  padding: 9px 16px;
  border-radius: 999px;
}
.outcome-chip::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* Compact results band */
.results-band {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 64px;
  align-items: end;
  padding: 40px 0 8px;
  border-top: 1px solid var(--border-soft);
}
.results-band .bar-chart {
  min-height: 0;
  padding: 0;
  gap: 24px;
}
.results-band .fill.tall  { height: 180px; }
.results-band .fill.mid   { height: 142px; }
.results-band .fill.short { height: 104px; }

/* Testimonial avatars (slots replace initials) */
.testimonial .attribution .avatar-slot { width: 44px; height: 44px; }
.testimonials { margin-top: 56px; }

@media (max-width: 1100px) {
  .story-feature { grid-template-columns: 1fr; gap: 32px; padding: 28px; }
  .results-band { grid-template-columns: 1fr; gap: 32px; align-items: start; }
}

/* ============================================================
   CREDENTIALS — physician photo slots + light variant
   Default is DARK — base.css:985, --bg-dark. The cream treatment
   below is the variant, and there is no data-cred="dark" rule in
   the tree. (Corrected 4 Aug 2026: this comment previously claimed
   the opposite and is the likely proximate cause of the 9e98758
   homepage regression. Precedent 7 — deleted, not struck through.)
   ⚠️ No page carries data-cred as of 4 Aug 2026; the homepage's
   cream treatment now lives in index.css §3. These rules are dead
   pending the step-7 attribute migration — do not rely on them.
   ============================================================ */
.portrait-slot {
  width: 76px;
  height: 76px;
  display: block;
  border-radius: 50%;
}
.credentials .portrait-slot {
  background: rgba(255,255,255,0.07);
}/* ============================================================
   TEXT SIZE — the site's body scale
   [DECISION — Jacob, 5 Aug 2026] "large" is the default and the only
   setting. x-large is DELETED, not retained — a rule nothing can reach is
   dead code that reads as live. Same call as the teal palette.

   Why large: already the live baseline on 24 of 36 pages; its form inputs
   are 16px, which clears the Safari auto-zoom-on-focus threshold that was
   firing on /eligibility, the primary conversion form; and x-large pushed
   .faq-q and .testimonial .quote to 24px, colliding with the >=24px serif
   band in §4.

   🔴 :root:root IS LOAD-BEARING. DO NOT SIMPLIFY IT TO A PLAIN SELECTOR.
   These rules were :root[data-textsize="large"] X — (0,2,0) before the
   target. Dropping the attribute entirely gives (0,1,0) or less, and every
   page-level sheet rule that this block used to override starts winning.
   Measured, not guessed: a plain unwrap changed 4,674 elements across all
   36 pages — e.g. about.css .ab-card p went 17px -> 14.5px, and
   .nav-center 13.5px -> 13px on 23 pages. :root:root restores the exact
   (0,2,0) weight the attribute supplied, so the 24 pages already on
   "large" render byte-identically and only the 12 that were on "default"
   (or carried no attribute at all) get the larger scale.

   ⚠️ Whether page sheets *should* outrank the body scale is a real design
   question. It is NOT being answered here — this promotion is mechanical
   and must not change what 24 pages look like. Raise it separately.
   ============================================================ */
/* 🔴 RESOLVED 7 Aug 2026 — the block above asked for this to be raised
   separately, and the type trial is where it landed. The literal values here
   were a *second* type scale outranking base.css, so editing base.css alone
   changed nothing on any page: `body { font-size: 15.5px; font-weight: 300 }`
   in base.css had been dead for as long as this block existed, while the site
   actually rendered 17px/400. Measured, not inferred — computed styles read
   from a running page on 7 Aug 2026.

   ⛔ Do not reintroduce literal px values here. The specificity stays (page
   sheets still do not outrank the body scale — that part was deliberate and is
   unchanged); only the *values* move to the tokens in base.css, so there is one
   place to read them from, per chrome spec §4. */
:root:root body { font-weight: 400; }

:root:root body { font-size: var(--fs-body); }
:root:root p, :root:root .body { font-size: var(--fs-body); font-weight: 400; }
:root:root .lede { font-size: var(--fs-lede); }
:root:root .caption { font-size: var(--fs-note); }
:root:root .eyebrow { font-size: var(--fs-label); }
:root:root .form .micro { font-size: var(--fs-note); }
:root:root .condition-chip { font-size: 15.5px; }
:root:root .faq-a p { font-size: var(--fs-body); }
:root:root .why-card p,
:root:root .tl-step p,
:root:root .support-group li,
:root:root .physician .bio { font-size: var(--fs-sm); }
:root:root .stage-card p { font-size: var(--fs-sm); }
:root:root .trust-item .l { font-size: var(--fs-note); }
/* Form controls take body size, not a shrunken UI size — these are the fields
   a patient fills in to make contact, and 16px is also the iOS zoom threshold. */
:root:root .form .field input,
:root:root .form .field select,
:root:root .form .field textarea { font-size: var(--fs-body); }
/* Form labels take the note floor, not the label scale. Chrome spec §4 already
   treats forms as an accessibility surface (it assigns Atkinson Hyperlegible
   here "for low-vision readers"), and a 12px label on the enquiry form is the
   one place where ornament sizing lands on something a patient must read to
   make contact. Inline qualifiers like "(optional)" inherit this. */
:root:root .form .field label { font-size: var(--fs-note); }
:root:root .nav-center { font-size: var(--fs-ui); }
:root:root .btn { font-size: var(--fs-ui); }
:root:root .btn-ghost { font-size: var(--fs-ui); }
:root:root .hero-assurance { font-size: var(--fs-sm); }
:root:root .sticky-bar .msg { font-size: var(--fs-sm); }

/* ============================================================
   STICKY ELIGIBILITY BAR
   ============================================================ */
.sticky-bar {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) translateY(120%);
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--ink);
  color: #F2EDE4;
  border-radius: 999px;
  padding: 10px 12px 10px 24px;
  box-shadow: 0 14px 40px rgba(31,42,38,0.30);
  transition: transform 380ms var(--ease);
  max-width: calc(100vw - 32px);
}
.sticky-bar.visible { transform: translateX(-50%) translateY(0); }
.sticky-bar .msg { font-size: var(--fs-sm); font-weight: 400; white-space: nowrap; }
.sticky-bar .msg strong { font-weight: 500; }
.sticky-bar .btn {
  padding: 10px 18px;
  background: var(--accent);
  border-radius: 999px;
  white-space: nowrap;
}
.sticky-bar .btn:hover { background: var(--accent-deep); }
.sticky-bar .dismiss {
  background: none;
  border: 0;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  padding: 6px;
  flex-shrink: 0;
}
.sticky-bar .dismiss:hover { color: #fff; }

/* WhatsApp pill moves up when bar visible — keep simple: bottom-right above bar on mobile */
@media (max-width: 760px) {
  .sticky-bar {
    gap: 10px;
    padding: 8px 8px 8px 16px;
  }
  .sticky-bar .msg { font-size: var(--fs-note); white-space: normal; line-height: 1.3; }
  .whatsapp { bottom: 88px; }
}

/* ============================================================
   FORM — simplified
   ============================================================ */
.final-cta-panel { padding: 72px clamp(32px, 5vw, 80px); gap: 64px; }
.form .row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
/* small-screen safety: grid items must be allowed to shrink below their
   intrinsic min-content (a <select> is as wide as its longest option, which
   was pushing the closing-CTA panel past the viewport at ≤375px) */
.final-cta-panel > *, .form .row > *, .form .row3 > *, .form .field { min-width: 0; }
.form .field select, .form .field input, .form .field textarea { max-width: 100%; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .selfcheck-grid { grid-template-columns: 1fr; gap: 40px; }
  .why-cards { grid-template-columns: 1fr 1fr; }
  .why-card.lead { grid-column: span 2; flex-direction: column; align-items: flex-start; gap: 16px; }
  .timeline { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .timeline::before { display: none; }
  .support-groups { grid-template-columns: 1fr; }
  .hero-grid { padding-top: 32px; }
  /* Family cutout as a banner: centred, standing on the banner floor */
  /* Full landscape photo — a clean banner on mobile for both treatments */
}
@media (max-width: 640px) {
  .why-cards { grid-template-columns: 1fr; }
  .why-card.lead { grid-column: span 1; }
  .timeline { grid-template-columns: 1fr; }
  .cond-cards { grid-template-columns: 1fr; gap: 12px; margin-top: 36px; }
  .form .row3 { grid-template-columns: 1fr; }
  .hero .trust-strip { padding: 18px 20px; }
}

/* ============================================================
   CONTENT UPDATE — SUH questionnaire (first pass)
   Orientation strip, pathway, cost, condition cards, stories
   preview, press strip, PENDING placeholder blocks.
   ============================================================ */

/* ---------- PENDING placeholder blocks ---------- */

/* ============================================================
   REVIEW vs PRODUCTION — two orthogonal concerns, two primitives.
   "hidden in production" must never be one class doing two jobs.

                                 MUST NOT wrap publishable copy.
                                 Publishes once confirmed — promotion
                                 = REMOVE this class, never retag a
                                 dual-purpose one.

   Verified publishable content carries NEITHER class and always shows.
   The review-to-production delta is therefore exactly the set of
   a bug (e.g. confirmed indication copy that vanishes in production).
   ============================================================ */

/* Hero photography pending chip */
.hero.hero-bg { position: relative; }
.hero-pending-chip {
  position: absolute;
  top: 22px;
  right: 24px;
  z-index: 3;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-mid);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  border: 1px dashed color-mix(in oklab, var(--slate-mid) 55%, transparent);
  padding: 7px 12px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

/* Headline variants (Tweaks → Hero headline) */

/* Hero image — warm-neutral holding treatment (no photography) */

/* ---------- Orientation trust strip (3 quiet signals) ---------- */
.hero .trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.trust-item { display: flex; flex-direction: column; gap: 5px; }
/* Word-based leads (vs numerals): slightly smaller + fluid so "Refundable"
   doesn't overflow narrow columns; acronyms get a touch of tracking. */
.trust-item .n.word {
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.08;
  letter-spacing: 0;
  text-wrap: balance;
}
.trust-item .n.caps { letter-spacing: 0.055em; }
.trust-item .t {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.25;
  color: var(--fg-strong);
}
.trust-item .d {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--slate-mid);
}

/* ---------- Pathway — 3 steps, two trips ---------- */
.timeline.cols-3 { grid-template-columns: repeat(3, 1fr); }
.tl-step .tag.home {
  color: var(--slate-mid);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
}

/* ---------- Cost ---------- */
.cost-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}
.cost-copy p + p { margin-top: 18px; }
.package-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 40px 42px 36px;
}
.package-card .k {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-mid);
}
.package-card .name {
  font-family: var(--font-serif);
  font-weight:500;
  font-size: 27px;
  line-height: 1.2;
  color: var(--fg-strong);
  margin-top: 10px;
}
.package-card .price {
  font-family: var(--font-serif);
  font-weight:500;
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--accent-deep);
  margin-top: 22px;
}
.package-card .approx {
  font-size: var(--fs-note);
  color: var(--slate-mid);
  margin-top: 8px;
}
.package-card ul {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}
.package-card li {
  font-size: var(--fs-sm);
  color: var(--slate-dark);
  padding: 12px 0 12px 24px;
  border-top: 1px solid var(--border-soft);
  position: relative;
  line-height: 1.55;
}
.package-card li::before {
  content: "·";
  position: absolute;
  left: 4px;
  top: 8px;
  color: var(--accent);
  font-size: 24px;
  font-weight: 700;
}
.package-card .refund {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-note);
  line-height: 1.65;
  color: var(--slate-mid);
}
.package-card .refund strong {
  display: block;
  color: var(--slate-dark);
  font-weight: 500;
  margin-bottom: 4px;
}

/* ---------- Condition cards (full-width row under selfcheck grid) ---------- */
.cond-cards {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
/* declared after the ≤640 block above, so it needs its own stack-to-one rule */
@media (max-width: 640px) {
  .cond-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 36px; }
}
.cond-card {
  background: color-mix(in oklab, var(--bg-card) 55%, transparent);
  border-radius: 8px;
  padding: 20px 22px 18px;
  color: var(--sage-ink);
}
.cond-card .tgt {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.cond-card h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 21px;
  margin: 6px 0 4px;
}
.cond-card p {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--sage-ink);
  opacity: 0.8;
}
.cond-card .cond-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent-deep);
  cursor: pointer;
}
.products-line {
  margin-top: 20px;
  font-size: var(--fs-note);
  line-height: 1.7;
  color: var(--sage-ink);
  opacity: 0.7;
}

/* ---------- Stories preview ---------- */
.stories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.stories-grid .story-media image-slot { aspect-ratio: 16 / 10; }
.stories-grid .play-badge { width: 56px; height: 56px; }
.stories-grid .play-badge svg { width: 24px; height: 24px; }
.story-prev .meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-mid);
}
.story-prev .meta-row .dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--slate-mid);
  opacity: 0.5;
}
.stories-pending { margin-top: 32px; }

/* ---------- Press strip ---------- */
.press {
  border-top: 1px solid var(--border-soft);
  padding: 56px 0;
}
.press-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.press-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate-mid);
  flex: 0 0 auto;
}
.press-names {
  display: flex;
  gap: 44px;
  align-items: baseline;
  flex-wrap: wrap;
}
.press-name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 21px;
  color: var(--slate-mid);
  white-space: nowrap;
}
.press-feature {
  display: flex;
  align-items: center;
  gap: 24px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 16px 22px;
  background: var(--bg-card);
}
.press-feature .txt {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--slate-dark);
  max-width: 340px;
}
.press-feature .txt strong {
  display: block;
  font-weight: 500;
  color: var(--fg-strong);
}

/* ---------- Credentials pending grid ---------- */
.cred-pending-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* ---------- Credentials content (confirmed) ---------- */
.cred-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  overflow: hidden;
}
.cred-item {
  background: var(--bg-dark);
  padding: 30px 30px 32px;
  display: flex;
  flex-direction: column;
}
.cred-k {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral-soft);
  margin-bottom: 16px;
}
.cred-item p {
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.78) !important;
  margin: 0;
}
.cred-item p em { color: #F2EDE4; font-style: italic; }
.cred-quote {
  font-family: var(--font-sans);
  font-size: 19px !important;
  line-height: 1.4 !important;
  font-weight: 500;
  color: #F2EDE4 !important;
  letter-spacing: -0.01em;
}
.cred-quote em { color: var(--coral-soft) !important; font-style: italic; }
.cred-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  /* ⚠️ Was --coral-soft, which is a DARK-PANEL colour (7.61:1 there, 1.56–1.87
     on light grounds). It read correctly on the homepage only because index.css
     overrides it to --accent-deep; on /medical-team the base rule won and put it
     on a light card at 1.56:1. --coral-soft is decoration on light — see the
     token block in base.css. */
  color: var(--accent-deep);
  text-decoration: none;
  cursor: pointer;
}
.cred-link .arrow { transition: transform 160ms var(--ease);}
.cred-link:hover .arrow { transform: translateX(4px);}
.cred-badge-stub {
  margin-top: 20px;
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  padding: 7px 11px;
}
/* DNV certification badge — dark mark on a light tile so it reads on
   the dark credentials background (and the light variant alike). */
.cred-dnv {
  margin-top: 20px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: #FAF7F1;
  border-radius: 8px;
  padding: 13px 18px;
}
.cred-dnv img {
  width: 82px;
  height: auto;
  display: block;
  flex-shrink: 0;
}
.cred-dnv span {
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: #6B6258;
  max-width: 15ch;
}
.cred-note {
  margin-top: 26px;
  font-size: var(--fs-note) !important;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5) !important;
  max-width: 620px;
}
@media (max-width: 900px) {
  .cred-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   LEAD PHYSICIAN — Dr. Zhou as the editorial focus
   ============================================================ */
.lead-physician {
  margin-top: 56px;
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) 1.1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.lp-portrait {
  position: relative;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(168deg, var(--bg-alt) 0%, var(--border) 100%);
  aspect-ratio: 5 / 5.2;
}
.lp-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 -50px 70px -45px rgba(31,42,38,0.22);
  pointer-events: none;
}
.lp-portrait img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.lp-body { min-width: 0; }
.lp-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--coral-soft);
}
.lp-name {
  font-family: var(--font-serif);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight:500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #F2EDE4;
  margin: 14px 0 0;
}
.lp-name .lp-post {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.6);
  vertical-align: middle;
  margin-left: 10px;
}
.lp-role {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--coral-soft);
  margin: 8px 0 0;
}
.lp-bio {
  font-size: 15px !important;
  line-height: 1.68;
  color: rgba(255,255,255,0.74) !important;
  margin: 22px 0 0;
  max-width: var(--measure);
}
.lp-bio em { color: #F2EDE4; font-style: normal; font-weight: 500; }
.lp-facts {
  list-style: none;
  margin: 28px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 36px;
  justify-content: start;
}
.lp-facts li { display: flex; flex-direction: column; gap: 6px; }
.lp-facts .n {
  font-family: var(--font-serif);
  font-weight:500;
  font-size: 34px;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: #F2EDE4;
}
.lp-facts .n em { font-style: normal; color: var(--coral-soft); }
.lp-facts .l {
  font-size: var(--fs-note);
  line-height: 1.4;
  color: rgba(255,255,255,0.6);
  max-width: 16ch;
}
.lead-physician .cred-link { margin-top: 28px; }

/* ---------- Supporting team signals (secondary) ---------- */
.team-support {
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.ts-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.ts-grid {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  overflow: hidden;
}
.ts-grid li {
  background: var(--bg-dark);
  padding: 24px 22px 26px;
}
.ts-k {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral-soft);
  margin-bottom: 12px;
}
.ts-grid p {
  font-size: var(--fs-sm) !important;
  line-height: 1.55;
  color: rgba(255,255,255,0.72) !important;
  margin: 0;
}
.ts-grid p em { color: #F2EDE4; font-style: normal; font-weight: 500; }

/* ---------- Footnote row (note + small DNV pending) ---------- */
.cred-foot {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
}
.cred-foot .cred-note { margin-top: 0; flex: 1 1 420px; }
.dnv-footnote {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.5);
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
}
.dnv-footnote img {
  width: 30px;
  height: auto;
  opacity: 0.85;
  filter: brightness(0) invert(1);
}
@media (max-width: 960px) {
  .lead-physician { grid-template-columns: 1fr; gap: 32px; }
  .lp-portrait { max-width: 360px; aspect-ratio: 5 / 5.4; }
  .ts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .lp-facts { gap: 24px; }
  .ts-grid { grid-template-columns: 1fr; }
}

/* Light credentials variant — lead physician + support *//* Light credentials variant (data-cred="light") *//* ---------- Editorial reference (NZ Herald, within Patient Stories) ---------- */
.editorial-ref {
  margin-top: 48px;
  padding-top: 30px;
  border-top: 1px solid var(--border-soft);
  max-width: 760px;
}
/* 🔴 :root:root required. `.editorial-ref .er-quote` is (0,2,0) and loses to
   this sheet's own `:root:root p` at (0,2,1), so the declared size never
   rendered — the component shipped at 17px from the day it was written, which
   is very likely why it was never used anywhere. Same trap as :root:root p
   at line 568 and .ps-prose p in patient-story.css.
   [FOUND 26 Aug 2026 — first use of the component, on /patient-stories/emma] */
:root:root .editorial-ref .er-quote {
  font-family: var(--font-serif);
  font-weight:500;
  font-size: clamp(24px,2.1vw, 25px);
  line-height: 1.38;
  letter-spacing: -0.012em;
  color: var(--fg-strong);
  margin: 0;
  text-wrap: pretty;
}
.editorial-ref .er-quote em { color: var(--accent-deep); font-style: italic; }
.editorial-ref .er-foot {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.editorial-ref .er-cite {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-mid);
}
.editorial-ref .er-read {
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  font-weight: 500;
  color: var(--accent-deep);
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.editorial-ref .er-read .arrow { transition: transform 160ms var(--ease);}
.editorial-ref .er-read:hover .arrow { transform: translateX(4px);}

/* ---------- Final CTA pending ---------- */
.cta-pending { margin-top: 24px; }

/* ---------- Responsive (content update) ---------- */
@media (max-width: 1100px) {
  .cost-grid { grid-template-columns: 1fr; gap: 48px; }
  .timeline.cols-3 { grid-template-columns: 1fr 1fr; }
  .cred-pending-grid { grid-template-columns: 1fr; }
  .stories-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hero .trust-strip { grid-template-columns: 1fr; gap: 18px; }
  .timeline.cols-3 { grid-template-columns: 1fr; }
}

/* ============================================================
   SCIENCE — cutout-on-cream lead image
   Soft radial mask fades the render's edges into the section
   cream so the cells read as a cutout, not a boxed photo.
   ============================================================ */
.science-lead {
  display: grid;
  position: relative;
  margin-bottom: 28px;
}
.science-figure,
.science-copy { grid-area: 1 / 1; }
.science-figure { position: relative; margin-top: clamp(40px, 7vw, 104px); }
.science-figure img {
  width: 100%;
  height: auto;
  display: block;
}
.science-copy {
  z-index: 2;
  align-self: start;
  justify-self: start;
  width: 47%;
  padding: clamp(6px, 2.4vw, 34px) 0 0 clamp(0px, 1.2vw, 16px);
}
.science-copy .eyebrow { display: block; }
.science-copy .display { max-width: none; }
.science-intro {
  margin: 22px 0 0;
  font-size: 16.5px;
  line-height: 1.7;
  max-width: 42ch;
}
@media (max-width: 900px) {
  .science-lead { display: block; }
  .science-copy {
    position: static;
    width: auto;
    padding: 0 0 18px;
  }
  .science-copy .display { max-width: 13ch; }
  .science-figure { max-width: 560px; margin: 0 auto; }
  .science-intro { margin-top: 22px; }
}

/* ============================================================
   V5b — V3 content additions
   ============================================================ */

/* "Meet our wider clinical network" link inside the affiliation card */
.ts-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--coral-soft);
  text-decoration: none;
  cursor: pointer;
}
.ts-link .arrow { transition: transform 160ms var(--ease);}
.ts-link:hover .arrow { transform: translateX(4px);}
/* Published research reference (Dr. Zhou, Frontiers in Immunology 2025) */
.cred-research {
  margin-top: clamp(40px, 5vw, 60px);
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  max-width: 760px;
}
.cred-research .cr-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral-soft);
  margin-bottom: 12px;
}
.cred-research p {
  font-size: 15px !important;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 14px;
}
.cred-research p em { font-style: italic; color: #F2EDE4; }
.cred-research .cred-link { margin-top: 0; }/* Accreditation column — DNV footnote stacked with JCI pending */
.cred-foot-acc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  flex: 0 1 360px;
}
.cred-foot-acc .dnv-footnote { flex: 0 0 auto; }
@media (max-width: 760px) {
  .cred-foot-acc { flex-basis: 100%; }
}

/* ---------- Button shape ----------
   [DECISION — Jacob, 4 Aug 2026] Pill site-wide. Promoted from
   :root[data-btn="pill"] on 5 Aug; the 11 pages that were rendering 6px —
   contact, costs, eligibility, patient-stories, refund-policy and the 6
   stories — come with it. Reasoning: .cc-launcher already rendered 999px
   on all 36 pages (concierge.css sets it directly, independent of the
   attribute), so those 11 showed a pill and a 6px button side by side.
   Drift, not intent. The set included /eligibility and the stories —
   primary conversion pages carrying a different button from the pages
   linking to them.

   ⛔ .btn-ghost stays 0px on all 36 — it is not in this rule and never was.
   ⛔ "rounded" and "square" deleted; no page used either.
   🔴 :root:root reproduces the attribute's (0,2,0)/(0,3,0) exactly. Base
   .btn is border-radius 6px at base.css:500. */
:root:root .btn,
:root:root .btn.submit,
:root:root .nav-cta-btn,
:root:root .sticky-bar .btn,
:root:root .cc-launcher { border-radius: 999px; }

/* ============================================================
   REFUND / LEGAL — site-wide signposts (page styles in refund.css)
   ============================================================ */
/* 🔴 The three legal links are ONE flex child, not three. [Jacob, 11 Aug 2026]

   base.css:1540 sets `justify-content: space-between`, which applies PER WRAPPED
   ROW. While the links were siblings of the ~130-character copyright sentence,
   any wrap flung whatever landed on a row to the extremes and tore the group
   apart. Measured before .footer-legal-group existed:
     1280  "Cookie choices" alone on row 2
     1200  Refund and Cookie on row 2, 870px apart   <- worst, and in the
     1100  same shape, 770px                            1000-1200 weak band
     1024  copyright alone; links spread across 306px gaps
     390   "Cookie choices" alone on row 3
   ⚠️ Not caused by removing the Shanghai lockup — five children wrapped at least
   as much; that edit only moved the wrap points.

   With the wrapper the bar has TWO children, so space-between means what it
   looks like: sentence left, legal group right. The group is its own flex
   context, so it holds its own 24px spacing and moves as a unit when it wraps —
   it can no longer be spread to fill a row it does not fill.

   ⛔ Do not unwrap the links back into .footer-bottom. The grouping is what
   makes the spacing deterministic; without it the gaps are whatever space-between
   has left over at that particular viewport. */
.footer-bottom { flex-wrap: wrap; gap: 12px 24px; }

/* Footer social. Added 19 Aug 2026: the site linked out to none of its own
   properties, so the entity relationship declared in Organization.sameAs ran
   one way only. These are the reciprocal half — and the only route from the
   site to the patient videos, which are the strongest conversion asset here.
   44px hit area per WCAG 2.5.8; the icon itself stays 18px. */
.footer-social {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 18px 0 0;
  /* Pull left so the 44px hit areas optically align with the wordmark and
     blurb above, rather than sitting indented by their own padding. */
  margin-left: -13px;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-bottom: 0;
  color: rgba(255,255,255,0.55);
  transition: color 160ms var(--ease);
}
.footer-social a:hover { color: var(--coral-soft); opacity: 1; }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.footer-legal-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
.footer-legal { font-size: var(--fs-note); letter-spacing: 0.04em; color: rgba(255,255,255,0.55); text-decoration: none; border-bottom: 0; transition: color 160ms var(--ease); }
.footer-legal:hover { color: var(--coral-soft); opacity: 1; }
/* 21.4px tall, under the 24px AA minimum. Hit area only, so nothing moves.
   32px, not 44: measured at 390 the legal row wraps to two lines 12px apart,
   so 44 would overlap. .footer-cookie-link carries this class and comes with
   it — its own rules are in cookie-consent.css and only undo <button> chrome. */
.footer-legal { position: relative; }
.footer-legal::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 32px;
  transform: translateY(-50%);
}
.refund-ref { font-family: var(--font-sans); font-size: 0.6em; font-weight: 600; vertical-align: super; margin-left: 2px; color: var(--accent-deep); text-decoration: none; line-height: 0; }
.refund-ref:hover { text-decoration: underline; }
/* The dagger measures 4.8 x 14 — the smallest target on the site, and it points
   at the refund terms, which is not a link to make people stab at. It is a
   superscript inside a sentence, so it stays visually a dagger; only the hit
   area becomes 32 x 32. Isolated on both pages that carry it — the nearest
   other target is far outside 32px — so there is nothing to overlap. */
.refund-ref { position: relative; }
.refund-ref::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
}
.refund-pointer { margin: 16px 0 0; font-family: var(--font-sans); font-size: var(--fs-sm); line-height: 1.6; color: var(--slate-mid); }
.refund-pointer a { color: var(--accent-deep); font-weight: 500; border-bottom: 1px solid color-mix(in oklab, var(--accent-deep) 38%, transparent); text-decoration: none; white-space: nowrap; transition: border-color 160ms var(--ease); }
.refund-pointer a:hover { border-color: var(--accent-deep); opacity: 1; }