/* ===================== Landing page (rebuilt 2026-09-16) =====================
   Everything on the page is a shared partial/component except the two things below: the hero
   and the audience router. The previous page's stylesheet (index.css) is loaded only by
   /home-previous/ and is untouched. ⚠️ Anything here that a second page wants goes to
   components.css first — the "#twoways icons" trap. */

/* ---- Hero: light, centred, no product shot (option A from the 2026-09-16 comparison, minus the
   mosaic). Deliberately unlike the dark split hero the audience pages run. Ground fades from
   brand-50 into the page ground so the accent ribbon below lands on a clean edge. ---- */
.hm-hero { position:relative; overflow:hidden; text-align:center; padding:172px 0 var(--space-2xl); background:linear-gradient(180deg, var(--brand-50) 0%, var(--color-page) 72%); }
.hm-hero .wrap { max-width:1000px; }
.hm-hero h1 { font-size:var(--step-5); letter-spacing:-.03em; line-height:var(--line-none); margin:0 auto var(--space-m); max-width:16em; color:var(--color-secondary); }
.hm-hero h1 .hl { color:var(--color-primary); }
.hm-hero .lede { color:var(--color-ink); max-width:35em; margin:0 auto var(--space-l); }
.hm-hero .btn-row { justify-content:center; }
/* The free pill between the lede and the buttons (owner: above the button) — the light-hero equivalent of the ribbon. */
.hm-free { display:inline-flex; align-items:center; gap:var(--space-2xs); margin:0 auto var(--space-l); padding:var(--space-2xs) var(--space-s); background:var(--color-surface); border:1px solid var(--color-border-soft); border-radius:var(--radius-full); box-shadow:var(--shadow-xs); font-size:var(--text-md); font-weight:var(--weight-semibold); color:var(--color-secondary); }
.hm-free strong { font-weight:var(--weight-extrabold); color:var(--color-primary); }
.hm-free svg { width:18px; height:18px; flex:none; stroke:var(--color-primary); fill:none; stroke-width:2.6; }
@media (max-width:560px) { .hm-free { display:flex; text-align:left; align-items:flex-start; } .hm-free svg { margin-top:2px; } }

/* ---- Band grounds set by id (the partials carry none of their own). The run is: hero (light, fades to page) →
   logos (white) → #complexity (page) → #solution (dark) → #why (page) → #what-we-are (tint) → #rules (page) → #evidence (white gradient) → #who (white→brand-50) → #support (tint)
   → #cta-sec (white) → #stories (page→brand-50, LAST). ---- */
/* #rules takes pale (its top reads against tint #what-we-are, its white foot steps down to page-ground
   #benefits); #support stays on the page ground (the radial above it ends on
   brand-50, and .cta-sec below is white). */
section.block#rules { background:linear-gradient(180deg, var(--brand-50), var(--color-surface)); }
/* The foot of the page (owner, 2026-09-16: "more contrast between Founded and led by Australian
   doctors and Who Conference.care is for… but dont make either one the dark blue"). The radial
   runs white down to brand-100 — a deeper foot than the brand-50 it used to end on — so the white
   #support after it is a real step; then page ground under the CTA card, then the testimonials
   climb white → brand-50 into the footer. */
section.block#who { background:linear-gradient(180deg, var(--color-surface) 0%, var(--brand-100) 100%); }
section.block#support { background:var(--color-surface); }

/* ---- Responsive ---- */
@media (max-width:760px) {
  .hm-hero { padding:140px 0 var(--space-xl); }
  .hm-hero h1 { max-width:none; font-size:var(--step-4); }
  .persona-fig .v { font-size:var(--step-4); }
}

/* ---- Testimonials: the pinned horizontal row, brought back from the previous landing page.
   ⚠️ The ground must END on brand-50: the CTA band below is dark and a white foot met it as a
   hard seam. Driver: assets/js/stories-scroll.js. ---- */
.stories { background:linear-gradient(180deg, var(--color-surface), var(--brand-50)); }
/* ⚠️ The heading already carries .section-head's 48px bottom margin, and .h-scroll added another
   48px on top of it — 96px between the heading and the cards. The row's own margin goes; the
   section runs at 2xl rather than the 4xl block default, because a 509px card plus 128px top and
   bottom made it the tallest band on the page for no reason. */
section.block#stories { padding-block: var(--space-2xl); }
#stories .h-scroll { margin-top: 0; }
.stories .tcard { background:var(--color-surface); }
.h-scroll { overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; margin-top:var(--space-xl); scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
.h-scroll::-webkit-scrollbar { display:none; }
.h-track { display:flex; align-items:stretch; gap:var(--space-m); width:max-content; padding:var(--space-2xs) var(--space-m); }
.h-track .tcard { flex:none; width:390px; height:auto; }
/* .h-on is added by the script only when it actually pins — without it the row stays a native
   horizontal scroll, which is the correct no-JS / reduced-motion / mobile behaviour. */
.stories.h-on .h-scroll { overflow:hidden; }
.stories.h-on .h-track { padding-left:calc((100% - 390px)/2); padding-right:calc((100% - 390px)/2); will-change:transform; }
@media (max-width:640px) { .h-track .tcard { width:300px; } }

/* 🚩 A ScrollTrigger pin must be measured against this. reset.css sets
   :where(html){scroll-behavior:smooth}, which makes ScrollTrigger's measure-at-zero asynchronous
   and mis-measures the pin's start by exactly the current scroll position — the symptom is the
   pinned section rendering over its neighbour after a refresh part-way down the page. The same
   override is in gp.css and how-it-works.css with the full reasoning. Do not remove it. */
html { scroll-behavior: auto; }

/* ---- The radial's headline figure — the three audience figures, one per persona, swapped by
   persona-radial.js. It replaced a standalone four-column router (2026-09-16).
   ⚠️ .q sits on its own line ABOVE the number so "Up to" cannot be separated from it — the same
   construction as .badge-rate, for the same hard rule. ---- */
/* Directly under the tab strip, so the figure reads as the selected tab's. The strip's own
   margin-bottom is overridden to a tighter gap for the same reason. */
#who .persona-seg { margin-bottom:var(--space-m) !important; }
.persona-fig { display:flex; flex-direction:column; align-items:center; gap:0; margin:0; }
/* ⚠️ The scene box is `aspect-ratio: 4/3` with the cards orbiting inside it, so its top ~80px
   is always empty — which read as a large unexplained gap under the figure. Pulled up by that
   much rather than shrinking the box, which would shrink the orbit with it. */
#who .radial-scene { margin-top: calc(-1 * var(--space-xl)); }
.persona-fig .q { font-size:var(--text-xs); font-weight:var(--weight-bold); letter-spacing:.1em; text-transform:uppercase; color:var(--color-ink-soft); }
.persona-fig .v { font-size:var(--step-5); font-weight:var(--weight-extrabold); color:var(--color-secondary); line-height:var(--line-none); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.persona-fig .v sup { line-height:0; }
.persona-fig .v sup button { background:none; border:0; padding:0 0 0 3px; font:inherit; font-size:var(--text-xs); font-weight:var(--weight-semibold); letter-spacing:0; color:var(--color-primary); cursor:pointer; vertical-align:super; }
.persona-fig .v sup button:hover { text-decoration:underline; }
.persona-fig .k { font-size:var(--text-md); color:var(--color-ink-soft); margin-top:var(--space-2xs); }

/* ---- The audience routes under #what-we-are.
   ⚠️ .btn-outline is a white fill on a hairline --color-border, which on this section's white
   ground reads as a ghost button rather than an outline one (owner, 2026-09-16). Given the
   primary's border and ink here so the four read as real buttons; still secondary, because the
   page's primary CTA is the hero. ---- */
.wwa-more-label { margin:var(--space-l) 0 0; font-size:var(--text-xs); font-weight:var(--weight-bold); letter-spacing:.14em; text-transform:uppercase; color:var(--color-ink-soft); }
/* ⚠️ The four routes are a dropdown now (whatWeAreButtonsMenu), not four buttons in a row — they
   did not fit half a .split. These rules stay for the fallback branch of the partial. */
.wwa-more .btn-outline { border-color:var(--color-primary); color:var(--color-primary); background:transparent; font-weight:var(--weight-bold); }
.wwa-more .btn-outline:hover { background:var(--brand-50); border-color:var(--color-primary); }

/* ---- The closing CTA card, promoted out of index.css (the archived page's stylesheet) when the
   rebuilt landing page took it back, 2026-09-16. It sits above the testimonials, which are the
   page's last section, so it is the page's closing CTA rather than a mid-page one. ---- */
.cta-sec { padding:var(--space-xl) 0 var(--space-3xl); background:var(--color-page); }
.cta-card { position:relative; overflow:hidden; background:var(--grad-hero); border-radius:30px; padding:var(--space-3xl) var(--space-xl); text-align:center; color:#fff; box-shadow:var(--shadow-5); }
.cta-card > .wrap-inner { position:relative; z-index:2; max-width:760px; margin:0 auto; }
.cta-card .banner { display:inline-flex; align-items:center; gap:var(--space-2xs); background:rgba(103,184,220,.18); border:1px solid rgba(103,184,220,.45); color:#fff; font-weight:var(--weight-bold); font-size:var(--text-xs); letter-spacing:.08em; text-transform:uppercase; padding:var(--space-2xs) var(--space-s); border-radius:var(--radius-full); margin-bottom:var(--space-m); }
.cta-card .banner svg { width:15px; height:15px; stroke:var(--color-accent); fill:none; stroke-width:2.2; }
.cta-card h2 { color:#fff; max-width:14em; margin:0 auto var(--space-s); letter-spacing:-.025em; }
.cta-card p { font-size:var(--text-lg); color:rgba(255,255,255,.9); max-width:34em; margin:0 auto var(--space-l); }
.cta-card .row { display:flex; gap:var(--space-xs); justify-content:center; flex-wrap:wrap; }
.cta-card .reassure { margin:var(--space-m) auto 0; font-size:var(--text-sm); color:rgba(255,255,255,.72); text-align:center; }

/* CTA split (photo + text) */
.cta-card.cta-split { display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--space-xl); align-items:center; text-align:left; padding:var(--space-xl); }
.cta-card.cta-split > .wrap-inner { margin:0; max-width:none; text-align:left; }
.cta-card.cta-split h2, .cta-card.cta-split p { margin-left:0; margin-right:0; max-width:none; }
.cta-card.cta-split .row { justify-content:flex-start; }
.cta-card.cta-split .reassure { text-align:left; margin-left:0; }
.cta-media { margin:0; position:relative; z-index:2; }
.cta-media img { width:100%; height:auto; border-radius:var(--radius-xl); box-shadow:var(--shadow-4); object-fit:cover; aspect-ratio:4/3; display:block; }
@media (max-width:880px) {
  .cta-card.cta-split { grid-template-columns:1fr; gap:var(--space-l); padding:var(--space-xl) var(--space-l); }
}

/* ---- "Learn more" on the illustration, linking to the selected persona's page (owner,
   2026-09-16). Sits over the foot of the centre circle, above the portrait, and is the only
   thing in the scene that takes pointer events besides the cards. ---- */
#who .radial-cta { position:absolute; left:50%; bottom:-24px; transform:translateX(-50%); z-index:5; white-space:nowrap; }
@media (max-width:880px) { #who .radial-cta { bottom:-16px; } }

/* ⚠️ Both sections run short of the 4xl block default. #who's scene is a fixed 4:3 box whose
   bottom is mostly empty once the orbit is drawn, so a full 128px under it read as dead space;
   #support is four faces and a button. The CTA hangs 24px below the scene box, which is why the
   bottom padding here is not cut further. */
section.block#who { padding-bottom: var(--space-2xl); }
/* Top stays nearer the default: the radial's "Learn more" button hangs 24px below its scene
   box, so the heading needs the room (owner, 2026-09-16). */
section.block#support { padding-top: var(--space-3xl); padding-bottom: var(--space-2xl); }