/* ═══════════════════════════════════════════════════════════════════════════
   GeneralPractice.AI — the public site.
   Tokens, type and motion are the platform's own (DESIGN-SYSTEM.md), so the
   site and the product read as one thing: warm paper, near-black ink, one
   muted violet spent only on interactive things, and the three plan families
   — chronic / prevention / lifestyle — as the only other colour on the page.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --canvas:#F6F5F2; --surface:#FFFFFF; --surface-2:#F1F0EC; --surface-3:#EAE8E3;
  --ink:#16151A; --ink-2:#4A4852; --muted:#6E6B78;
  --line:#E7E5EA; --line-2:#D9D6DE;
  --accent:#5B52B4; --accent-ink:#4A4296; --accent-wash:#ECEAF7;
  --good:#2E7A5A; --caution:#A8741A;
  --chronic:#C93E60; --prevention:#1D7EAE; --lifestyle:#2E7A5A;
  /* the four steps run from the clinician's violet to the patient's green */
  --s1:#5B52B4; --s2:#3A6BB0; --s3:#1D7EAE; --s4:#2E7A5A;

  --amb-1:rgba(118,96,235,.40); --amb-2:rgba(255,150,170,.30);
  --amb-3:rgba(70,175,225,.30); --amb-4:rgba(255,196,120,.26);
  --shadow:0 1px 2px rgba(22,21,26,.04),0 8px 24px -12px rgba(22,21,26,.12);
  --shadow-lg:0 24px 64px -24px rgba(22,21,26,.35);
  --fig-shadow:drop-shadow(0 2px 3px rgba(22,21,26,.06)) drop-shadow(0 18px 44px rgba(22,21,26,.16));
  --glow-base:saturate(1.7) contrast(1.06); --glow-r1:4px; --glow-r2:16px; --glow-r3:38px;
  --orb-blend:screen; --orb-hi:#FFFFFF; --orb-lo:#2A2030;
  --orb-m1:14%; --orb-m2:58%; --orb-m3:82%; --bub-gain:1.35;
  --orb-edge:inset 0 -10px 22px rgba(22,21,26,.18),inset 0 8px 14px rgba(255,255,255,.55),0 1px 0 rgba(255,255,255,.6);
  --shot-frame:rgba(22,21,26,.10);

  --sans:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --measure:1200px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --canvas:#121115; --surface:#1A191E; --surface-2:#222127; --surface-3:#2A2930;
  --ink:#F1EFF4; --ink-2:#C9C6D1; --muted:#8F8B9A;
  --line:#2A2930; --line-2:#3A3841;
  --accent:#9D95E6; --accent-ink:#B4ADF0; --accent-wash:#26243A;
  --good:#6DBF97; --caution:#D6A84E;
  --chronic:#ff7d9c; --prevention:#5cc9f5; --lifestyle:#6DBF97;
  --s1:#9D95E6; --s2:#7CB0EE; --s3:#5cc9f5; --s4:#6DBF97;
  --amb-1:rgba(140,120,255,.52); --amb-2:rgba(255,120,175,.34);
  --amb-3:rgba(60,190,235,.36); --amb-4:rgba(190,120,240,.34);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg:0 24px 64px -24px rgba(0,0,0,.8);
  --fig-shadow:drop-shadow(0 0 70px rgba(157,149,230,.16)) drop-shadow(0 18px 50px rgba(0,0,0,.5));
  --glow-base:brightness(1.38) saturate(1.5); --glow-r1:5px; --glow-r2:20px; --glow-r3:44px;
  --orb-blend:normal; --orb-hi:transparent; --orb-lo:transparent;
  --orb-m1:34%; --orb-m2:14%; --orb-m3:0%; --bub-gain:1.6; --orb-edge:none;
  --shot-frame:rgba(255,255,255,.10);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --canvas:#121115; --surface:#1A191E; --surface-2:#222127; --surface-3:#2A2930;
  --ink:#F1EFF4; --ink-2:#C9C6D1; --muted:#8F8B9A;
  --line:#2A2930; --line-2:#3A3841;
  --accent:#9D95E6; --accent-ink:#B4ADF0; --accent-wash:#26243A;
  --good:#6DBF97; --caution:#D6A84E;
  --chronic:#ff7d9c; --prevention:#5cc9f5; --lifestyle:#6DBF97;
  --s1:#9D95E6; --s2:#7CB0EE; --s3:#5cc9f5; --s4:#6DBF97;
  --amb-1:rgba(140,120,255,.52); --amb-2:rgba(255,120,175,.34);
  --amb-3:rgba(60,190,235,.36); --amb-4:rgba(190,120,240,.34);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg:0 24px 64px -24px rgba(0,0,0,.8);
  --fig-shadow:drop-shadow(0 0 70px rgba(157,149,230,.16)) drop-shadow(0 18px 50px rgba(0,0,0,.5));
  --glow-base:brightness(1.38) saturate(1.5); --glow-r1:5px; --glow-r2:20px; --glow-r3:44px;
  --orb-blend:normal; --orb-hi:transparent; --orb-lo:transparent;
  --orb-m1:34%; --orb-m2:14%; --orb-m3:0%; --bub-gain:1.6; --orb-edge:none;
  --shot-frame:rgba(255,255,255,.10);
  color-scheme:dark;
}

*{box-sizing:border-box}
/* in-page links glide rather than jump; the padding keeps a section's heading
   clear of the sticky header it would otherwise land under */
/* the root carries the canvas too, so anything outside the body box — overscroll,
   a short page, the strip behind an embedded frame — is never the UA's own dark */
html{scroll-behavior:smooth;scroll-padding-top:78px;background:var(--canvas)}
@media (max-width:640px){html{scroll-padding-top:66px}}
/* clip, not hidden: the organ halo and the ambient blobs are allowed past the
   gutter, but the page must never scroll sideways — and clip leaves the
   sticky header working, which hidden would not */
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
:where(button){font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── ambient ground ──
   Radial gradients, not blurred discs. Three `filter: blur(104px)` layers this
   size cost about 45 frames a second even while still — measured at 11 fps with
   them and 57 without, which is what made the whole page feel jumpy. A gradient
   that fades to transparent gives the same soft cloud for nothing, and the
   transform stays GPU-composited. (The platform's own dashboard made the same
   trade in September when the WebGL sky came out.) */
.amb{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  /* the four clouds are additive in light and simply layered in dark, where the
     canvas is already near-black and screening would blow them out */
  mix-blend-mode:var(--amb-blend,multiply)}
:root[data-theme="dark"] .amb{--amb-blend:normal}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .amb{--amb-blend:normal}}
.amb>i{position:absolute;display:block;will-change:transform}
.amb>i:nth-child(1){width:104vw;height:104vw;left:-36vw;top:-46vw;
  background:radial-gradient(circle closest-side,var(--amb-1),transparent 70%);animation:amb1 19s ease-in-out infinite alternate}
.amb>i:nth-child(2){width:92vw;height:92vw;right:-38vw;top:2vh;
  background:radial-gradient(circle closest-side,var(--amb-2),transparent 70%);animation:amb2 24s ease-in-out infinite alternate}
.amb>i:nth-child(3){width:86vw;height:86vw;left:8vw;bottom:-48vw;
  background:radial-gradient(circle closest-side,var(--amb-3),transparent 70%);animation:amb3 29s ease-in-out infinite alternate}
.amb>i:nth-child(4){width:70vw;height:70vw;right:-14vw;bottom:-30vw;
  background:radial-gradient(circle closest-side,var(--amb-4),transparent 70%);animation:amb4 34s ease-in-out infinite alternate}
@keyframes amb1{to{transform:translate3d(13vw,20vh,0) scale(1.2)}}
@keyframes amb2{to{transform:translate3d(-14vw,-15vh,0) scale(1.14)}}
@keyframes amb3{to{transform:translate3d(11vw,-13vh,0) scale(1.22)}}
@keyframes amb4{to{transform:translate3d(-12vw,9vh,0) scale(1.16)}}

/* ── arriving ──
   Sections lift into place the first time they are scrolled to, once each, on
   transform and opacity only. A stagger index on a child turns a row of cards
   into a run rather than a single block. The unobserved state is the finished
   one, so nothing is ever stuck invisible if the script never runs. */
[data-rise]{opacity:0;transform:translateY(18px);
  transition:opacity .72s var(--ease),transform .72s var(--ease);
  transition-delay:calc(var(--r,0) * 85ms)}
[data-rise].in{opacity:1;transform:none}
/* On a phone, nothing readable sits below ~11px. These are the captions the
   audit measured at 9-10.5px; everything else already clears the floor. */
/* the four hero figures arrive by script after first paint; holding their
   space while the list is empty is what keeps the page's layout shift near zero */
#heroStats:empty{min-height:166px}
@media (max-width:520px){#heroStats:empty{min-height:270px}}
@media (max-width:360px){#heroStats:empty{min-height:316px}}

@media (max-width:480px){
  /* a long button label must fold, never push the page sideways */
  .btn{white-space:normal;text-align:left}
}
@media (max-width:700px){
  .hero-stats small{font-size:11px}
  .st-cap,.cond-cap{font-size:11px}
  .hero-note{font-size:11.5px}
  .ev-src span{font-size:11px}
  .ev-src a{font-size:11.5px}
  .eyebrow{font-size:11.5px}
}

@media (prefers-reduced-motion:reduce){[data-rise]{opacity:1;transform:none;transition:none}}

/* ── shell ── */
.page{position:relative;z-index:1}
.wrap{max-width:var(--measure);margin:0 auto;padding-inline:24px}
@media (max-width:640px){.wrap{padding-inline:18px}}
.band{padding-block:88px}
.band.tight{padding-block:66px}
@media (max-width:760px){.band{padding-block:58px}.band.tight{padding-block:44px}}

/* ── nav ── */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  background:color-mix(in srgb,var(--canvas) 82%,transparent);backdrop-filter:blur(16px) saturate(1.15);
  border-bottom:1px solid transparent;transition:border-color .3s ease}
.nav.stuck{border-bottom-color:var(--line)}
/* the blur is a nicety; where it is unavailable or too costly the bar simply
   goes opaque, because text scrolling through the header is not a nicety */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .nav{background:var(--canvas)}
}
@media (max-width:760px){.nav{background:color-mix(in srgb,var(--canvas) 95%,transparent)}}
.nav-in{max-width:var(--measure);margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:18px}
@media (max-width:640px){.nav-in{padding:10px 18px;gap:10px}}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand img{width:32px;height:32px;border-radius:50%;box-shadow:0 2px 8px -2px rgba(20,40,120,.45)}
.brand b{font-weight:600;font-size:14.5px;letter-spacing:-.015em;display:block;line-height:1.15}
.brand small{display:block;color:var(--muted);font-size:11px;letter-spacing:.02em}
.nav-links{display:flex;gap:2px;margin-left:auto}
.nav-links a{text-decoration:none;color:var(--ink-2);font-size:13.5px;font-weight:500;padding:7px 10px;
  border-radius:999px;white-space:nowrap;transition:color .18s,background .18s}
.nav-links a:hover{color:var(--ink);background:var(--surface-2)}
@media (max-width:1120px){.nav-links{display:none}}
.nav-act{display:flex;align-items:center;gap:8px;margin-left:auto}
@media (min-width:981px){.nav-act{margin-left:10px}}
.nav-short{display:none}
@media (max-width:700px){
  .brand small{display:none}
  .nav-full{display:none}.nav-short{display:inline}
  .nav-act .arw{display:none}
  .nav-act .btn.sm{padding:7px 13px}
}
/* On a phone the header still has to hold the wordmark, the country switch, the
   theme toggle and the way in. Below 470px it stops fitting, so everything gives
   a little rather than the sign-in button running off the edge. */
@media (max-width:470px){
  .nav-in{padding:8px 14px;gap:8px}
  .brand{gap:8px}
  .brand img{width:28px;height:28px}
  .brand b{font-size:13px}
  .nav-act{gap:6px}
  .cc button{padding:5px 8px;font-size:10px;letter-spacing:.05em}
  .theme{width:30px;height:30px}
  .theme svg{width:14px;height:14px}
  .nav-act .btn.sm{padding:7px 11px;font-size:12.5px}
}
@media (max-width:380px){
  .brand b{font-size:0;line-height:0}
  .brand b::after{content:"GP.AI";font-size:13px;line-height:1.15}
}

.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:10px 18px;
  font-weight:500;font-size:14px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);
  text-decoration:none;white-space:nowrap;transition:background .18s,border-color .18s,box-shadow .35s ease,transform .18s var(--ease)}
.btn:hover{background:var(--surface-2);transform:translateY(-1px)}
.btn.primary{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.btn.primary:hover{background:var(--ink);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent),0 14px 30px -14px color-mix(in srgb,var(--accent) 60%,transparent)}
.btn.sm{padding:7px 14px;font-size:13px}
.btn.lg{padding:13px 24px;font-size:15.5px}
.btn .arw{transition:transform .32s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
/* where you are — guessed from the browser's own time zone, and always yours
   to override; the choice decides the currency and whether the Medicare band
   is on the page at all */
.cc{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:2px;gap:1px;
  background:var(--surface);flex:none}
.cc button{padding:5px 10px;border-radius:999px;font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;
  font-weight:500;color:var(--muted);transition:background .2s,color .2s}
.cc button:hover{color:var(--ink)}
.cc button[aria-pressed="true"]{background:var(--ink);color:var(--canvas)}
.theme{width:34px;height:34px;padding:0;justify-content:center;flex:none;border-radius:50%;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);display:inline-flex;align-items:center}
.theme:hover{color:var(--ink);border-color:var(--line-2)}
.theme svg{width:15px;height:15px}

/* ── shared type ── */
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:9px;margin:0 0 14px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--accent);flex:none}
h1,h2,h3{font-weight:500;letter-spacing:-.028em;margin:0;text-wrap:balance}
h1{font-size:clamp(34px,4.5vw,52px);line-height:1.06}
h2{font-size:clamp(28px,3.6vw,40px);line-height:1.1}
h3{font-size:19px;letter-spacing:-.018em;line-height:1.25}
em.s{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.06em;letter-spacing:-.01em}
/* The two words the whole product is about. A gradient that drifts slowly
   across the glyphs, pink through orchid to violet — and back to a flat colour
   wherever background-clip:text is not supported, so the headline never
   disappears. nowrap keeps the fill in one fragment; a wrapped inline paints
   the gradient separately in each line box. */
.hl{--g1:#FF5B9E;--g2:#C64BDE;--g3:#7B5CF0;color:var(--g2);white-space:nowrap;font-weight:500}
.hl-prev{--g1:#7B5CF0;--g2:#C64BDE;--g3:#FF5B9E}
:root[data-theme="dark"] .hl{--g1:#FF8FC0;--g2:#D982F0;--g3:#A79BFF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hl{--g1:#FF8FC0;--g2:#D982F0;--g3:#A79BFF}}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hl{background-image:linear-gradient(96deg,var(--g1) 0%,var(--g2) 26%,var(--g3) 50%,var(--g2) 74%,var(--g1) 100%);
    background-size:260% 100%;background-position:0 0;
    -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
    animation:hlshift 11s linear infinite}
}
@keyframes hlshift{to{background-position:260% 0}}
.lede{color:var(--ink-2);font-size:17px;line-height:1.62;max-width:62ch;margin:16px 0 0}
.lede b{color:var(--ink);font-weight:500}
.band-h{max-width:66ch}
.band-h .lede{font-size:16px}

/* ── hero ── */
.hero{padding-block:44px 58px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:36px;align-items:center}
@media (max-width:920px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:20px}}
.hero-head{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:34px 48px;align-items:center}
@media (max-width:920px){.hero-head{grid-template-columns:minmax(0,1fr);gap:30px}}
.hero h1{margin-top:6px}
.hero .lede{font-size:16.5px;max-width:50ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:26px}
.hero-note{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted);margin:12px 0 0}
.hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:30px 0 0;padding:0;list-style:none;
  border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--surface) 72%,transparent);
  backdrop-filter:blur(8px);box-shadow:var(--shadow);overflow:hidden}
.hero-stats li{border-left:1px solid var(--line);min-width:0}
.hero-stats li:first-child{border-left:0}
.hero-stats a{display:flex;flex-direction:column;gap:3px;padding:14px 10px 13px 15px;text-decoration:none;
  transition:background .22s ease}
.hero-stats a:hover{background:color-mix(in srgb,var(--sc) 9%,transparent)}
.hero-stats b{font-family:var(--serif);font-weight:400;font-size:34px;letter-spacing:-.03em;line-height:.95;color:var(--sc,var(--ink))}
.hero-stats span{font-size:11.5px;line-height:1.35;color:var(--ink-2)}
.hero-stats small{font-family:var(--mono);font-size:10px;letter-spacing:.03em;color:var(--muted);margin-top:3px}
.hero-stats a:hover small{color:var(--sc)}

@media (max-width:520px){.hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-stats li:nth-child(3){border-left:0}
  .hero-stats li:nth-child(n+3){border-top:1px solid var(--line)}}

/* ── the patient stage ──
   Sits where the anatomical figure used to, in line with the headline: one
   patient at a time, cut out and standing on the page rather than in a box,
   with the glow they were rendered in put back underneath them in CSS — which
   means it can take the colour of whichever plan is on show. A marker lights
   over the part of them the plan is about, a line runs out of it, and the plan
   unfolds into the scores they gave themselves. */
.pstage{position:relative;width:100%;max-width:520px;height:524px;margin-inline:auto;
  justify-self:center;--pc:var(--accent)}
/* the glow, behind everything, following the plan's family colour */
.pstage::before{content:"";position:absolute;z-index:0;pointer-events:none;
  left:-20%;bottom:-8%;width:76%;padding-bottom:116%;
  background:
    radial-gradient(closest-side,color-mix(in srgb,var(--pc) 58%,transparent),transparent 66%),
    radial-gradient(closest-side at 52% 74%,color-mix(in srgb,var(--caution) 34%,transparent),transparent 70%);
  opacity:.95;transition:background .9s var(--ease)}
.pstage::after{content:"";position:absolute;z-index:0;pointer-events:none;
  left:2%;bottom:0;width:36%;height:22px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(22,21,26,.30),rgba(22,21,26,0) 74%);
  filter:blur(1px)}

.st-person{position:absolute;z-index:1;left:0;bottom:14px;width:224px;height:502px}
.st-person img{display:block;width:100%;height:100%;object-fit:contain;object-position:bottom center;
  opacity:0;transform:translateY(12px) scale(.99);
  transition:opacity .8s var(--ease),transform .9s var(--ease)}
.st-person img.on{opacity:1;transform:none}
.st-who{position:absolute;z-index:4;left:2px;bottom:-14px;display:flex;align-items:baseline;gap:9px;
  opacity:0;transform:translateY(6px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.st-who.on{opacity:1;transform:none}
.st-who b{font-weight:500;font-size:14px;letter-spacing:-.01em}
.st-who span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* the marker over the organ, and the line out of it */
.st-line{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;overflow:visible}
.st-line path{fill:none;stroke:var(--pc);stroke-width:1.5;opacity:.95}
.st-pin{position:absolute;z-index:3;width:0;height:0;opacity:0;transition:opacity .4s var(--ease)}
.st-pin i{position:absolute;left:50%;top:50%;display:block;border-radius:50%;transform:translate(-50%,-50%)}
.st-pin .dot{width:9px;height:9px;background:var(--pc);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--pc) 30%,transparent),0 0 20px var(--pc)}
.st-pin .ring{width:20px;height:20px;border:1.5px solid var(--pc);opacity:0}
.st-pin.on .ring{animation:pulse 2.6s cubic-bezier(.2,.7,.3,1) infinite}
.st-pin .ring.b{animation-delay:1.3s}
@keyframes pulse{0%{opacity:.8;width:18px;height:18px}70%{opacity:0;width:76px;height:76px}100%{opacity:0;width:76px;height:76px}}

/* the plan, and what they scored */
.st-read{position:absolute;z-index:3;right:0;top:46px;width:286px;max-width:64%;
  display:flex;flex-direction:column;gap:9px;align-items:flex-end}
.st-pill{display:flex;align-items:center;gap:9px;padding:5px 14px 5px 5px;max-width:100%;
  border-radius:999px;background:color-mix(in srgb,var(--surface) 92%,transparent);
  border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(10px);text-align:left;
  opacity:0;transform:translateY(-6px) scale(.97);transform-origin:right center;
  transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .25s,box-shadow .35s}
.st-pill.on{opacity:1;transform:none}
.st-pill:hover{border-color:color-mix(in srgb,var(--pc) 45%,var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--pc) 16%,transparent),0 20px 40px -20px color-mix(in srgb,var(--pc) 60%,transparent)}
.st-pill b{display:block;font-weight:500;font-size:13.5px;line-height:1.2;letter-spacing:-.015em}
.st-pill small{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--pc);margin-top:3px}
.st-card{width:100%;border-radius:16px;background:color-mix(in srgb,var(--surface) 94%,transparent);
  border:1px solid var(--line);box-shadow:var(--shadow-lg);backdrop-filter:blur(14px);padding:13px 15px;overflow:hidden;
  opacity:0;transform:translateY(-10px);transition:opacity .5s var(--ease),transform .55s var(--ease)}
.st-card.on{opacity:1;transform:none}
.st-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:9px}
.st-h span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.st-rows{display:flex;flex-direction:column;gap:7px}
.st-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;align-items:baseline;
  opacity:0;transform:translateY(5px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
.st-card.on .st-row{opacity:1;transform:none}
.st-row .lb{font-size:11px;line-height:1.3;color:var(--ink-2);overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.st-row{--sc2:var(--good)}
.st-row.lo{--sc2:var(--chronic)}
.st-row.mid{--sc2:var(--caution)}
.st-row .vl{font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--sc2)}
.st-row .tk{grid-column:1/-1;height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.st-row .tk i{display:block;height:100%;width:0;border-radius:99px;background:var(--sc2);
  transition:width .85s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 80ms + 120ms)}
.st-card.on .st-row .tk i{width:var(--w)}
.st-med{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;align-items:center;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.st-med figure{display:flex;align-items:center;gap:8px;margin:0;min-width:0}
.st-med figure>span:last-child{min-width:0}
.st-med .disc{width:30px;height:30px;flex:none;border-radius:50%;background:var(--mg)}
.st-med .disc.has-coin{background:none;width:auto;height:auto;border-radius:0}
.st-med b{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:color-mix(in srgb,var(--mc) 55%,var(--ink));white-space:nowrap}
.st-med small{display:-webkit-box;font-size:10.5px;line-height:1.3;color:var(--ink-2);margin-top:2px;
  overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical}

.st-dots{position:absolute;z-index:4;right:0;bottom:-21px;display:flex;gap:6px}
/* the visible dot is a 3px bar, but the button under the finger is 24px tall —
   WCAG 2.5.8 wants 24x24, and eight 3px-tall targets was the audit's worst find */
.st-dots button{position:relative;width:24px;height:24px;padding:0;background:none;border-radius:8px}
.st-dots button::after{content:"";position:absolute;left:2px;right:2px;top:50%;margin-top:-1.5px;height:3px;
  border-radius:99px;background:var(--line-2);transition:background .3s}
.st-dots button{transition:width .35s var(--ease)}
.st-dots button[aria-current="true"]{width:34px}
.st-dots button[aria-current="true"]::after{background:var(--pc)}
.st-cap{margin:26px 2px 0;font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--muted)}

@media (max-width:1040px) and (min-width:861px){
  .pstage{max-width:470px;height:486px}
  .st-person{width:186px;height:462px}
  .st-read{width:270px;top:40px}
}
/* stacked: the person stands on their own, the plan reads underneath */
@media (max-width:860px){
  .pstage{height:auto;max-width:460px;display:flex;flex-direction:column;align-items:center;gap:20px}
  .pstage::before{left:50%;translate:-50% 0;bottom:auto;top:10%;width:80%;padding-bottom:88%;opacity:.8}
  .pstage::after{left:50%;translate:-50% 0}
  .st-person{position:relative;left:auto;bottom:auto;width:200px;height:440px}
  .st-who{position:relative;left:auto;bottom:auto;justify-content:center}
  .st-line{display:none}
  .st-read{position:relative;right:auto;top:auto;width:100%;max-width:100%;align-items:stretch}
  .st-pill{align-self:flex-start;transform-origin:left center}
  .st-dots{position:relative;right:auto;bottom:auto;justify-content:center;align-self:center}
  .st-cap{margin-top:16px;text-align:center}
}

/* the living figure */
.figwrap{position:relative;justify-self:center;width:100%;max-width:520px}
.fighost{position:relative;padding-block:20px 8px}
.hero .fighost{max-width:404px;margin-inline:auto}
@media (max-width:640px){
  .figwrap{max-width:320px}
  /* :root[data-theme] outranks a bare :root, so both selectors are needed or
     the narrow-screen halo would silently miss the explicit dark theme */
  :root,:root[data-theme="dark"]{--glow-r3:22px}
}
svg.fig{display:block;width:100%;height:auto;overflow:visible}
.fig .body-img{filter:var(--fig-shadow)}
.fig .glow-g{transform-box:fill-box;transition:transform .6s var(--ease)}
.fig .glow-im{opacity:0;transition:opacity .6s var(--ease);
  filter:var(--glow-base) drop-shadow(0 0 calc(var(--glow-r1) / var(--gz,1)) var(--gl)) drop-shadow(0 0 calc(var(--glow-r2) / var(--gz,1)) var(--gl)) drop-shadow(0 0 calc(var(--glow-r3) / var(--gz,1)) var(--gl))}
.fig .glow-im.on{opacity:1}
.fig .hit{fill:transparent;stroke:transparent;stroke-width:16;cursor:pointer;outline:none}
.fig .hit:focus-visible{stroke:var(--accent);stroke-width:3;stroke-opacity:.9}
.fig .outline{fill:none;stroke:var(--oc,var(--accent));stroke-width:1.6;opacity:0;pointer-events:none;transition:opacity .3s var(--ease),stroke-width .3s var(--ease)}
.fig.showall .outline{opacity:.38}
.fig.fam .outline.on{opacity:.95;stroke-width:3;filter:drop-shadow(0 0 6px var(--oc))}


.orb{position:relative;display:block;flex:none;border-radius:50%;width:34px;height:34px;box-shadow:var(--orb-edge);
  background-image:radial-gradient(circle at 34% 28%,
    color-mix(in srgb,var(--bc,var(--accent)) var(--orb-m1),var(--orb-hi)) 0%,
    color-mix(in srgb,var(--bc,var(--accent)) var(--orb-m2),var(--orb-hi)) 48%,
    color-mix(in srgb,var(--bc,var(--accent)) var(--orb-m3),var(--orb-lo)) 100%);
  transition:transform .35s var(--ease),box-shadow .35s ease,filter .35s ease}
.orb canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;mix-blend-mode:var(--orb-blend)}
.orb img{position:absolute;left:50%;top:50%;width:54%;height:54%;transform:translate(-50%,-50%);
  object-fit:contain;filter:drop-shadow(0 3px 10px rgba(0,0,0,.5));pointer-events:none}
.orb.sm{width:38px;height:38px}
.orb.md{width:56px;height:56px}
.orb.lg{width:78px;height:78px}
.orb.xl{width:88px;height:88px}

/* ── why now ── */
.why{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:36px 56px;align-items:start}
@media (max-width:860px){.why{grid-template-columns:minmax(0,1fr);gap:24px}}
.why p.body{margin:0 0 14px;color:var(--ink-2);font-size:16px;line-height:1.66;max-width:60ch}
.why p.body:last-child{margin-bottom:0}
.pull{font-family:var(--serif);font-size:clamp(26px,3.3vw,36px);line-height:1.26;letter-spacing:-.02em;
  color:var(--ink);margin:0;max-width:20ch}
.pull i{font-style:italic;color:var(--accent-ink)}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:34px}
@media (max-width:760px){.figures{grid-template-columns:minmax(0,1fr)}}
.figure{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:20px 20px 18px;box-shadow:var(--shadow);overflow:hidden;text-decoration:none;display:block;
  transition:border-color .25s,box-shadow .35s ease,transform .25s var(--ease)}
.figure::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--fc,var(--accent))}
/* a wash of the figure's own colour, pooled behind its icon */
.figure::after{content:"";position:absolute;right:-56px;top:-56px;width:180px;height:180px;pointer-events:none;
  background:radial-gradient(circle closest-side,color-mix(in srgb,var(--fc) 26%,transparent),transparent 72%);
  opacity:.6;transition:opacity .35s ease,transform .5s var(--ease)}
.figure:hover::after{opacity:1;transform:scale(1.14)}
.figure:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--fc) 30%,var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--fc) 16%,transparent),0 20px 42px -22px color-mix(in srgb,var(--fc) 55%,transparent)}
.figure>*{position:relative;z-index:1}
.f-top{display:flex;align-items:center;gap:12px;margin-bottom:2px}
.f-ico{width:42px;height:42px;border-radius:13px;flex:none;display:grid;place-items:center;color:var(--fc);
  background:color-mix(in srgb,var(--fc) 15%,var(--surface));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fc) 26%,transparent);
  transition:transform .4s var(--ease),box-shadow .35s ease}
.f-ico svg{width:23px;height:23px}
.figure:hover .f-ico{transform:scale(1.06) rotate(-3deg);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fc) 40%,transparent),0 0 24px -4px color-mix(in srgb,var(--fc) 55%,transparent)}
.figure b{display:block;font-family:var(--serif);font-weight:400;font-size:46px;line-height:1;letter-spacing:-.03em;
  color:var(--fc,var(--accent))}
.figure .cl{display:block;margin-top:9px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.figure small{display:block;margin-top:11px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--muted)}

/* ── steps ── */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:34px}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:minmax(0,1fr)}}
.step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:22px 20px 20px;display:flex;flex-direction:column;gap:9px;overflow:hidden;box-shadow:var(--shadow);
  transition:border-color .28s,box-shadow .38s ease,transform .28s var(--ease)}
.step::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--st);
  transition:height .28s var(--ease)}
.step:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--st) 32%,var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--st) 18%,transparent),0 22px 46px -22px color-mix(in srgb,var(--st) 62%,transparent)}
.step:hover::before{height:5px}
.step .n{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.11em;text-transform:uppercase;color:color-mix(in srgb,var(--st) 70%,var(--ink));font-weight:500}
.step .n i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--st) 14%,transparent);color:var(--st);font-style:normal;font-size:11px;font-weight:600}
.step h3{font-size:16.5px}
.step p{margin:0;color:var(--ink-2);font-size:13.5px;line-height:1.6}
.step .who{margin-top:auto;padding-top:13px;font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:7px}
.step .who::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--st);flex:none}

/* ── inside the platform ── */
.shots{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;margin-top:32px;align-items:start}
@media (max-width:980px){.shots{grid-template-columns:minmax(0,1fr)}}
.frame{position:relative;border-radius:18px;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);box-shadow:0 1px 2px rgba(22,21,26,.05),0 30px 60px -34px rgba(22,21,26,.5)}
.frame .bar{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid var(--line);
  background:var(--surface-2)}
.frame .bar i{width:11px;height:11px;border-radius:50%;flex:none}
.frame .bar i:nth-child(1){background:#FF5F57}.frame .bar i:nth-child(2){background:#FEBC2E}.frame .bar i:nth-child(3){background:#28C840}
.frame .bar span{margin-left:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frame .stack{position:relative;aspect-ratio:1280/800;background:var(--surface)}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  opacity:0;transform:scale(1.015);transition:opacity .6s var(--ease),transform .9s var(--ease)}
.frame img.on{opacity:1;transform:none}
.shot-cap{margin:12px 2px 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--muted)}
.tabs{display:flex;flex-direction:column;gap:7px}
@media (max-width:980px){.tabs{flex-direction:row;overflow-x:auto;padding-bottom:4px}.tabs .tab{min-width:230px}}
.tab{position:relative;text-align:left;padding:13px 15px;border:1px solid var(--line);border-radius:14px;
  background:var(--surface);overflow:hidden;transition:border-color .25s,background .25s,transform .25s var(--ease)}
.tab:hover{border-color:var(--line-2);transform:translateX(2px)}
.tab[aria-selected="true"]{border-color:var(--accent);background:var(--accent-wash)}
.tab b{display:block;font-weight:500;font-size:14px;line-height:1.25}
.tab span{display:block;margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.tab .prog{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent)}
.tab[aria-selected="true"] .prog{animation:prog var(--dwell,7s) linear forwards}
@keyframes prog{from{width:0}to{width:100%}}

/* ── Australia: the MBS band ── */
.mbs-band{position:relative;border:1px solid var(--line);border-radius:26px;padding:34px;margin-top:6px;
  background:linear-gradient(170deg,color-mix(in srgb,var(--prevention) 8%,var(--surface)),var(--surface) 46%);
  box-shadow:var(--shadow);overflow:hidden}
@media (max-width:640px){.mbs-band{padding:20px;border-radius:20px}}
.mbs-flag{position:absolute;right:-70px;top:-70px;width:280px;height:280px;pointer-events:none;
  background:radial-gradient(circle closest-side,color-mix(in srgb,var(--prevention) 22%,transparent),transparent 72%)}
.mbs-band>*{position:relative}
.mbs-item{display:inline-flex;align-items:baseline;gap:7px;border:1px solid color-mix(in srgb,var(--prevention) 32%,var(--line));
  background:color-mix(in srgb,var(--prevention) 10%,transparent);border-radius:999px;padding:5px 13px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--ink)}
.mbs-item em{font-style:normal;color:var(--muted);font-size:10.5px}
.mbs-item.off{border-style:dashed;border-color:var(--line-2);background:none;color:var(--muted)}
.mbs-item.off s{text-decoration-color:color-mix(in srgb,var(--muted) 60%,transparent);text-decoration-thickness:1px}
.mbs-items{display:flex;flex-wrap:wrap;gap:7px;margin:0}
.mbs-head{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:26px 46px;align-items:start}
@media (max-width:900px){.mbs-head{grid-template-columns:minmax(0,1fr);gap:22px}}
.mbs-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  margin:0 0 10px}
.mbs-rule{margin:0;font-size:13px;line-height:1.6;color:var(--ink-2)}
.mbs-rule b{font-family:var(--mono);font-size:12.5px;color:var(--ink);font-weight:500}
#mbs .shots{margin-top:30px}
.mbs-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px;padding:0;list-style:none}
@media (max-width:860px){.mbs-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.mbs-facts{grid-template-columns:minmax(0,1fr)}}
.mbs-facts li{border:1px solid var(--line);border-radius:14px;padding:14px 15px;background:var(--surface)}
.mbs-facts b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--prevention);margin-bottom:6px;font-weight:500}
.mbs-facts span{font-size:13px;line-height:1.55;color:var(--ink-2)}
.mbs-caveat{margin:20px 0 0;padding:13px 15px;border-radius:14px;background:var(--surface-2);border:1px dashed var(--line-2);
  font-size:13px;line-height:1.6;color:var(--ink-2)}
.mbs-caveat b{color:var(--ink);font-weight:500}
[data-country="UK"] .au-only{display:none}
[data-country="AU"] .uk-only{display:none}

/* ── the plan-library page ── */
.lif-hero{padding-block:42px 26px}
.lif-hero h1{margin-top:8px;max-width:23ch;font-size:clamp(32px,4.2vw,48px)}
.lif-hero .lede{max-width:62ch;font-size:16.5px}
/* the four counts, a wide strip under the atlas — what the atlas holds */
#holdings{padding-block:6px 8px}
.lif-counts{margin:14px 0 0;border-block:1px solid var(--line)}
.lif-counts li{display:flex;flex-direction:column;gap:3px;padding:15px 12px 14px 16px}
@media (max-width:520px){.lif-counts li:nth-child(n+3){border-top:1px solid var(--line)}}
#atlas .atlas-panel{margin-top:0}
.nav-links a[aria-current="page"]{color:var(--ink);background:var(--surface-2)}

/* ── My Lifestyle Hub, and the medals ── */
.hub-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:34px 48px;align-items:center;margin-top:32px}
@media (max-width:980px){.hub-grid{grid-template-columns:minmax(0,1fr);gap:28px}}
.phones{display:flex;gap:16px;justify-content:flex-start;flex-wrap:wrap}
@media (max-width:980px){.phones{justify-content:center}}
/* on a phone the phones become a swipe strip rather than a tall stack */
@media (max-width:760px){
  .phones{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    scroll-snap-type:x mandatory;scroll-padding-inline:18px;
    margin-inline:-18px;padding-inline:18px;scrollbar-width:none}
  .phones::-webkit-scrollbar{display:none}
  .phone{scroll-snap-align:center}
  .phone:nth-child(even){transform:none}
  .phone:nth-child(even):hover{transform:translateY(-6px)}
}
.phone{position:relative;width:176px;flex:none;border-radius:26px;padding:7px;background:var(--surface-3);
  border:1px solid var(--line-2);box-shadow:0 2px 3px rgba(22,21,26,.06),0 26px 50px -26px rgba(22,21,26,.55);
  transition:transform .45s var(--ease),box-shadow .45s ease}
.phone:nth-child(even){transform:translateY(16px)}
.phone:hover{transform:translateY(-6px);box-shadow:0 2px 3px rgba(22,21,26,.06),0 34px 60px -24px color-mix(in srgb,var(--accent) 50%,transparent)}
.phone:nth-child(even):hover{transform:translateY(10px)}
.phone::before{content:"";position:absolute;left:50%;top:13px;width:38px;height:4px;border-radius:99px;
  background:color-mix(in srgb,var(--ink) 28%,transparent);transform:translateX(-50%);z-index:2}
.phone img{display:block;width:100%;height:auto;border-radius:20px;background:#5B21D6}
.phone figcaption{position:absolute;left:0;right:0;bottom:-26px;text-align:center;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.phones{padding-bottom:34px}
.hub-t p.body{margin:0 0 14px;color:var(--ink-2);font-size:15.5px;line-height:1.68;max-width:54ch}
.hub-t p.body:last-of-type{margin-bottom:20px}
.hub-t b{color:var(--ink);font-weight:500}
.store{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.store .btn svg{width:16px;height:16px;flex:none}
.hub-cap{margin:16px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--muted)}

.medals{position:relative;margin-top:44px;border:1px solid var(--line);border-radius:22px;padding:30px;
  background:linear-gradient(168deg,color-mix(in srgb,var(--caution) 9%,var(--surface)),var(--surface) 52%);
  box-shadow:var(--shadow);overflow:hidden}
@media (max-width:640px){.medals{padding:20px;border-radius:18px}}
.medals::after{content:"";position:absolute;right:-140px;top:-150px;width:420px;height:420px;pointer-events:none;
  background:radial-gradient(circle closest-side,color-mix(in srgb,var(--caution) 15%,transparent),transparent 74%)}
.medals>*{position:relative}
.medal-head{max-width:64ch}
.medal-head h3{font-size:22px}
.medal-head p{margin:10px 0 0;color:var(--ink-2);font-size:14.5px;line-height:1.65}
.tiers-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:26px}
@media (max-width:720px){.tiers-3{grid-template-columns:minmax(0,1fr)}}
.mtier{display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-radius:18px;padding:16px 18px;
  background:var(--surface);box-shadow:var(--shadow);
  transition:transform .3s var(--ease),border-color .3s,box-shadow .4s ease}
.mtier:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--mc) 40%,var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--mc) 18%,transparent),0 24px 46px -24px color-mix(in srgb,var(--mc) 60%,transparent)}
.mtier .disc{width:96px;height:96px;flex:none;border-radius:50%;background:var(--mg);
  box-shadow:inset 0 -8px 18px rgba(0,0,0,.22),inset 0 6px 12px rgba(255,255,255,.5)}
.mtier .disc.has-coin{background:none;box-shadow:none;width:auto;height:auto;border-radius:0}
.mtier b{display:block;font-size:16px;font-weight:500}
.mtier .days{display:block;font-family:var(--serif);font-size:30px;line-height:1.1;letter-spacing:-.02em;color:var(--mc)}
.mtier small{display:block;margin-top:5px;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.medal-foot{margin:22px 0 0;padding:14px 16px;border-radius:14px;background:var(--surface-2);
  border:1px dashed var(--line-2);font-size:13.5px;line-height:1.65;color:var(--ink-2)}
.medal-foot b{color:var(--ink);font-weight:500}

/* ── atlas ── */
.atlas-panel{background:var(--surface);border:1px solid var(--line);border-radius:22px;
  box-shadow:var(--shadow);padding:26px;margin-top:30px}
@media (max-width:640px){.atlas-panel{padding:16px;border-radius:18px}}
.atlas{position:relative;display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:26px;align-items:start}
@media (max-width:920px){.atlas{grid-template-columns:minmax(0,1fr);gap:18px}}
.leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;overflow:visible}
.leaders path{fill:none;stroke:var(--lead,var(--accent));stroke-width:1.4;opacity:.85}
.leaders circle{fill:var(--lead,var(--accent))}
@media (max-width:920px){.leaders{display:none}}
.figcol .fighost{padding-block:26px 6px;border-radius:16px;
  background:radial-gradient(74% 54% at 50% 38%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%)}
.figcol .fig{max-height:78vh;margin:0 auto}
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.sel{flex:1 1 180px;min-width:0;background:var(--surface);color:var(--ink);border:1px solid var(--line-2);
  border-radius:999px;padding:8px 14px;font-family:inherit;font-size:13px}
.ghost{background:var(--surface);color:var(--ink-2);border:1px solid var(--line-2);border-radius:999px;
  padding:8px 14px;font-size:12.5px;white-space:nowrap;transition:color .18s,border-color .18s}
.ghost:hover,.ghost[aria-pressed="true"]{color:var(--ink);border-color:var(--accent)}
.hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--muted);flex-basis:100%}

.fams{display:flex;flex-wrap:wrap;gap:8px}
.fam{display:flex;align-items:center;gap:10px;padding:7px 14px 7px 7px;border:1px solid var(--line);
  border-radius:999px;background:var(--surface);box-shadow:var(--shadow);transition:border-color .2s,background .2s}
.fam:hover{border-color:var(--line-2)}
.fam[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-wash)}
.fam:hover .orb{transform:scale(1.07);filter:saturate(1.15) brightness(1.04);
  box-shadow:var(--orb-edge),0 0 0 3px color-mix(in srgb,var(--bc) 20%,transparent),0 0 26px color-mix(in srgb,var(--bc) 55%,transparent)}
.fam span{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.fam b{font-family:var(--serif);font-size:20px;font-weight:400;letter-spacing:-.02em}
.fam small{font-size:11px;color:var(--ink-2)}

.panel{min-width:0;display:grid;gap:14px}
.panel>*{min-width:0}
.card{background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:18px;overflow:hidden}
.card-in{will-change:opacity,transform}
.c-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.c-head h3{font-size:21px;font-weight:500;letter-spacing:-.02em}
.c-sys{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;padding-top:5px}
.c-note{color:var(--ink-2);font-size:13px;line-height:1.55;margin:8px 0 0}
.search{display:flex;align-items:center;gap:9px;border:1px solid var(--line-2);border-radius:999px;
  padding:9px 14px;background:var(--surface);color:var(--muted);transition:border-color .2s,box-shadow .3s}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.search input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:13.5px;color:var(--ink);outline:0}
.search input::-webkit-search-cancel-button{display:none}
.bubbles{display:grid;grid-template-columns:repeat(auto-fill,minmax(102px,1fr));gap:6px 4px;margin-top:14px}
.pbub{display:flex;flex-direction:column;align-items:center;gap:7px;border-radius:12px;padding:8px 4px 10px;
  color:var(--ink);transition:background .18s var(--ease)}
.pbub:hover,.pbub:focus-visible{background:var(--surface-3);outline:none}
.pbub:hover .orb,.pbub:focus-visible .orb{transform:scale(1.07);filter:saturate(1.15) brightness(1.04);
  box-shadow:var(--orb-edge),0 0 0 3px color-mix(in srgb,var(--bc) 20%,transparent),0 0 28px color-mix(in srgb,var(--bc) 58%,transparent)}
.pbub .cap{font-size:11.5px;line-height:1.3;text-align:center;color:var(--ink-2);max-width:104px}
.pbub:hover .cap{color:var(--ink)}
.also{margin:16px 0 0;padding-top:13px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10px;
  font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.also+.bubbles{margin-top:4px;opacity:.94}
.none{border:1px dashed var(--line-2);border-radius:12px;padding:15px;color:var(--ink-2);font-size:13px;
  line-height:1.55;margin-top:14px}
.none strong{color:var(--ink);font-weight:500;display:block;margin-bottom:3px}

.back{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line-2);
  border-radius:999px;padding:6px 14px 6px 11px;color:var(--ink-2);font-size:12.5px;transition:color .2s,border-color .2s}
.back:hover{color:var(--ink);border-color:var(--accent)}
.detail{display:grid;gap:18px;margin-top:14px}
.dhead{display:flex;align-items:center;gap:15px;flex-wrap:wrap}
.kick{font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;margin-bottom:5px}
.dhead h3{font-size:clamp(20px,2.4vw,26px)}
.blurb{font-family:var(--serif);font-size:19px;line-height:1.55;color:var(--ink-2);max-width:56ch;margin:0}
.blurb b{color:var(--ink);font-weight:400}
.subhead{display:flex;align-items:baseline;gap:10px;margin:0 0 9px}
.subhead h4{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted);font-weight:500}
.subhead em{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--line-2)}
.rf-list{display:grid;gap:6px}
.rf{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden;
  transition:border-color .3s ease,background .3s ease}
.rf[open]{border-color:color-mix(in srgb,var(--ac,var(--accent)) 40%,transparent);background:var(--surface-3)}
.rf summary{cursor:pointer;list-style:none;padding:11px 14px;display:flex;align-items:center;gap:11px;
  font-size:13.5px;line-height:1.4;color:var(--ink)}
.rf summary::-webkit-details-marker{display:none}
.rf summary .n{font-family:var(--mono);font-size:10.5px;color:var(--muted);flex:none;min-width:16px}
.rf summary .plus{margin-left:auto;color:var(--muted);font-family:var(--mono);flex:none;font-size:15px;
  transition:transform .34s cubic-bezier(.2,.9,.3,1),color .3s ease}
.rf[open] summary .plus{transform:rotate(135deg);color:var(--ac,var(--accent))}
.rf .body{overflow:hidden}
.rf .bodyin{padding:0 14px 13px 41px;font-family:var(--serif);font-size:16px;line-height:1.55;color:var(--ink-2)}

/* ── evidence ── */
.ev-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:34px;align-items:stretch;margin-top:34px}
@media (max-width:920px){.ev-grid{grid-template-columns:minmax(0,1fr)}}
.ev-feature{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:32px;
  display:flex;flex-direction:column;gap:20px;box-shadow:var(--shadow);min-height:0;overflow:hidden}
.ev-inner{display:flex;flex-direction:column;gap:20px;flex:1;
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.ev-inner.out{opacity:0;transform:translateY(-10px)}
.ev-inner.in{opacity:0;transform:translateY(12px);transition:none}
.ev-tags{display:flex;flex-wrap:wrap;gap:5px}
.ev-tag{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--accent-ink);
  background:var(--accent-wash);border-radius:999px;padding:3px 9px}
.ev-claim{font-family:var(--serif);font-size:clamp(24px,2.9vw,33px);line-height:1.18;letter-spacing:-.015em;
  margin:0;color:var(--ink);text-wrap:balance}
.ev-detail{color:var(--ink-2);font-size:14px;line-height:1.65;margin:0;max-width:56ch}
.ev-src{margin:auto 0 0;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;
  gap:12px;align-items:baseline;flex-wrap:wrap}
.ev-src a{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--accent-ink);text-decoration:none;
  padding-block:8px;margin-block:-8px}
.ev-src a:hover{text-decoration:underline}
.ev-src span{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.ev-viz{min-height:116px;display:flex;flex-direction:column;justify-content:center}
.ev-hero{display:flex;align-items:center;gap:20px}
.ev-hero b{font-family:var(--serif);font-size:clamp(48px,7vw,76px);font-weight:400;line-height:.86;
  letter-spacing:-.03em;color:var(--accent-ink);flex:none}
.ev-hero span{font-size:13.5px;color:var(--ink-2);max-width:30ch;line-height:1.45}
.ev-bars{display:flex;flex-direction:column;gap:11px}
.ev-bar{display:grid;grid-template-columns:1fr auto;gap:3px 10px;align-items:baseline}
.ev-bar .lbl{font-size:12.5px;color:var(--ink-2)}
.ev-bar .lbl em{font-style:normal;color:var(--muted)}
.ev-bar .val{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--accent-ink)}
.ev-bar .track{grid-column:1/-1;height:10px;background:var(--surface-3);border-radius:0 4px 4px 0;overflow:hidden}
.ev-bar .track i{display:block;height:100%;width:0;border-radius:0 4px 4px 0;background:var(--accent);
  transition:width .9s var(--ease)}
.ev-axis{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:10px;
  color:var(--muted);border-top:1px solid var(--line);padding-top:5px;margin-top:6px}
.ev-dots{display:grid;grid-template-columns:repeat(20,1fr);gap:6px;max-width:440px}
.ev-dots i{display:block;aspect-ratio:1;border-radius:50%;background:var(--line-2)}
.ev-dots i.on{background:var(--accent)}
.ev-cap{display:flex;align-items:baseline;gap:10px;margin-top:13px}
.ev-cap b{font-family:var(--serif);font-weight:400;font-size:38px;line-height:1;letter-spacing:-.02em;color:var(--accent-ink)}
.ev-cap span{font-size:12.5px;color:var(--muted);max-width:30ch}
.ev-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.ev-list{position:relative;display:flex;flex-direction:column;gap:9px;flex:1;min-height:0;max-height:560px;
  overflow:auto;padding-right:6px}
.ev-row{position:relative;flex:none;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;
  text-align:left;padding:15px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);
  overflow:hidden;transition:border-color .25s,background .25s,transform .25s var(--ease)}
.ev-row:hover{border-color:var(--line-2);transform:translateX(2px)}
.ev-row[aria-current="true"]{border-color:var(--accent);background:var(--accent-wash)}
.ev-row .fg{font-family:var(--serif);font-size:26px;line-height:1;letter-spacing:-.02em;color:var(--accent-ink);
  min-width:84px;text-align:right}
.ev-row .tx{font-size:13.5px;line-height:1.5;color:var(--ink-2);overflow-wrap:anywhere}
.ev-row[aria-current="true"] .tx{color:var(--ink)}
.ev-row .prog{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent);opacity:.75}
.ev-row[aria-current="true"] .prog{animation:prog var(--dwell,10s) linear forwards}
/* ── questions ── */
.ask{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:34px 44px;align-items:start;
  background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:34px;box-shadow:var(--shadow)}
@media (max-width:880px){.ask{grid-template-columns:minmax(0,1fr);gap:22px;padding:24px}}
.ask-t h2{font-size:clamp(23px,2.6vw,30px)}
.ask-t .lede{font-size:14.5px;margin-top:12px}
.ask-f{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
@media (max-width:520px){.ask-f{grid-template-columns:minmax(0,1fr)}}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld.wide{grid-column:1/-1}
.fld span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.fld input,.fld select,.fld textarea{width:100%;font:inherit;font-size:14px;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:11px;padding:10px 13px;outline:0;
  transition:border-color .2s,box-shadow .3s}
.fld textarea{resize:vertical;line-height:1.5;min-height:82px}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--muted);opacity:.65}
.ask-go{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:2px}
.ask-note{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--muted);max-width:34ch;line-height:1.5}
.ask-note.ok{color:var(--good)}

.ev-foot{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--muted);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ── value cards ── */
.vals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px}
@media (max-width:980px){.vals{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.vals{grid-template-columns:minmax(0,1fr)}}
.val{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;
  display:flex;flex-direction:column;gap:9px;box-shadow:var(--shadow);
  transition:border-color .25s,box-shadow .35s ease,transform .25s var(--ease)}
.val:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--vc,var(--accent)) 30%,var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--vc,var(--accent)) 16%,transparent),0 22px 46px -22px color-mix(in srgb,var(--vc,var(--accent)) 58%,transparent)}
.val .ico{width:36px;height:36px;border-radius:11px;color:var(--vc,var(--accent));
  background:color-mix(in srgb,var(--vc,var(--accent)) 13%,transparent);display:grid;place-items:center;flex:none}
.val .ico svg{width:18px;height:18px}
.val h3{font-size:16.5px}
.val p{margin:0;color:var(--ink-2);font-size:13.5px;line-height:1.6}

/* ── who it is for ── */
.segs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:32px}
@media (max-width:760px){.segs{grid-template-columns:minmax(0,1fr)}}
.seg-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:24px 24px 20px;box-shadow:var(--shadow);overflow:hidden;
  transition:border-color .25s,box-shadow .35s ease,transform .25s var(--ease)}
.seg-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gc)}
.seg-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--gc) 32%,var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--gc) 16%,transparent),0 22px 46px -22px color-mix(in srgb,var(--gc) 58%,transparent)}
.seg-n{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--gc);font-weight:500}
.seg-card h3{font-size:18px;margin:8px 0 9px}
.seg-card p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.62}
.seg-f{display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--muted);line-height:1.6}

/* ── pricing ── */
.price-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:3px;gap:2px;background:var(--surface)}
.seg button{padding:6px 14px;border-radius:999px;font-size:13px;color:var(--ink-2);transition:background .2s,color .2s}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--canvas)}
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:28px}
@media (max-width:1020px){.tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.tiers{grid-template-columns:minmax(0,1fr)}}
.tier{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;
  display:flex;flex-direction:column;gap:11px;box-shadow:var(--shadow);
  transition:border-color .25s,box-shadow .35s ease,transform .25s var(--ease)}
.tier:hover{transform:translateY(-2px);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 14%,transparent),0 20px 42px -22px color-mix(in srgb,var(--accent) 48%,transparent)}
.tier.rec{border-color:var(--accent)}
.tier .flag{position:absolute;top:-10px;left:20px;font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;background:var(--accent);color:#fff;padding:3px 10px;border-radius:999px}
.tier h3{font-size:17px}
.tier .who{font-size:12.5px;color:var(--muted);min-height:2.6em;line-height:1.4}
.tier .amt{font-size:30px;font-weight:600;letter-spacing:-.025em;line-height:1;display:flex;align-items:baseline;gap:5px}
.tier .amt small{font-size:12px;font-weight:400;color:var(--muted);letter-spacing:0}
.tier .sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:var(--muted);min-height:1.4em}
.tier ul{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--ink-2)}
.tier li{padding-left:19px;position:relative;line-height:1.45}
.tier li::before{content:"";position:absolute;left:2px;top:6px;width:9px;height:5px;
  border-left:2px solid var(--good);border-bottom:2px solid var(--good);transform:rotate(-45deg)}
.tier .go{margin-top:auto;padding-top:14px}
.tier .go .btn{width:100%;justify-content:center}
.price-note{margin:20px 0 0;font-size:13px;color:var(--muted);line-height:1.6;max-width:70ch}

/* ── closing ── */
.close{text-align:center;padding-block:96px 104px}
.close h2{margin-inline:auto;max-width:18ch}
.close .lede{margin-inline:auto;text-align:center}
.close .hero-cta{justify-content:center}

.foot{border-top:1px solid var(--line);padding-block:30px 44px}
.foot-in{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;font-size:12.5px;color:var(--muted)}
.foot-in a{color:var(--muted);text-decoration:none;padding-block:6px;margin-block:-6px}
.foot-in a:hover{color:var(--ink)}
.foot-in .sp{margin-left:auto}
.foot-legal{margin:16px 0 0;max-width:96ch;font-size:11.5px;line-height:1.7;color:var(--muted)}
.foot-legal b{color:var(--ink-2);font-weight:500}
.foot-legal+.foot-legal{margin-top:8px}

/* ── a policy page ──
   One column, generous measure, nothing to interact with. The point is that a
   procurement officer can read it and a search engine can index it. */
.legal{padding-block:44px 20px}
.legal h1{font-size:clamp(30px,3.6vw,42px);margin:8px 0 0;max-width:20ch}
.legal .updated{margin:14px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
.legal-body{padding-bottom:56px}
.legal-body>*{max-width:74ch}
.legal-body h2{font-size:21px;font-weight:500;letter-spacing:-.01em;margin:38px 0 0;
  padding-top:18px;border-top:1px solid var(--line)}
.legal-body h3{font-size:16px;font-weight:600;margin:24px 0 0}
.legal-body p{margin:12px 0 0;font-size:15px;line-height:1.72;color:var(--ink-2)}
.legal-body ul{margin:12px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:9px}
.legal-body li{font-size:15px;line-height:1.7;color:var(--ink-2)}
.legal-body li ul{margin-top:9px}
.legal-body b{color:var(--ink);font-weight:500}
.legal-body a{color:var(--accent-ink)}
.legal-body .callout{margin:22px 0 0;padding:18px 20px;border-radius:16px;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow)}
.legal-body .callout p{margin:0;font-size:14px}
.legal-body .callout p+p{margin-top:10px}
.legal-nav{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
.legal-nav a{font-size:12.5px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);
  color:var(--ink-2);text-decoration:none;background:var(--surface)}
.legal-nav a:hover{color:var(--ink);border-color:var(--line-2)}
.legal-nav a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--canvas)}

/* ── a condition page ── */
.cond-top{padding-block:40px 6px}
.cond-top h1{margin-top:8px;max-width:22ch;font-size:clamp(32px,4.4vw,52px)}
.cond-lede{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);gap:26px 46px;
  align-items:start;margin-top:22px}
@media (max-width:860px){.cond-lede{grid-template-columns:minmax(0,1fr)}}
.cond-lede .lede{max-width:62ch;font-size:16.5px}
.cond-lede .lede+.lede{margin-top:13px}
.cond-lede .lede b{color:var(--ink);font-weight:500}
.cond-lede .hero-cta{margin-top:22px}

.cond-facts{list-style:none;margin:0;padding:20px 22px;display:grid;gap:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
/* until the script fills them, these are invisible placeholders, not empty cards */
.cond-facts:empty{visibility:hidden;min-height:230px}
.rf-list:empty{min-height:420px}
.fighost:empty{background:none}
.cond-via:empty,.cond-cap:empty{visibility:hidden}
.cond-facts li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 14px;align-items:baseline}
.cond-facts b{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1;letter-spacing:-.03em;
  color:var(--sc,var(--accent));white-space:nowrap}
.cond-facts span{font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.cond-facts small{grid-column:2;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--muted)}
.cond-facts a{color:inherit;text-decoration:none}
.cond-facts a:hover small{color:var(--accent)}
.cond-facts li+li{border-top:1px solid var(--line);padding-top:14px}

.cond-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:22px 34px;
  align-items:start;margin-top:30px}
@media (max-width:900px){.cond-grid{grid-template-columns:minmax(0,1fr)}}
.cond-stick{position:sticky;top:86px}
@media (max-width:900px){.cond-stick{position:static;order:-1}}
.cond-fig{position:relative;justify-self:center;width:100%;max-width:352px;margin-inline:auto}
.cond-fig .fighost{position:relative;border-radius:22px;overflow:hidden;
  background:radial-gradient(52% 40% at 50% 44%,color-mix(in srgb,var(--pc,var(--accent)) 13%,transparent) 0,transparent 72%);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 78%,transparent 99%);
  mask-image:linear-gradient(180deg,#000 0,#000 78%,transparent 99%)}
/* zoomed in, the glow needs to read against organs of every colour: the lit
   region is brightened as well as haloed, and its outline is drawn at a screen
   width rather than a user-space one so it does not thicken with the zoom */
.cond-fig .fig{--glow-base:saturate(2) brightness(1.16) contrast(1.05)}
:root[data-theme="dark"] .cond-fig .fig{--glow-base:brightness(1.5) saturate(1.7)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cond-fig .fig{--glow-base:brightness(1.5) saturate(1.7)}}
.cond-fig .fig .body-img{filter:drop-shadow(0 calc(9px / var(--gz,1)) calc(24px / var(--gz,1)) rgba(22,21,26,.17))}
:root[data-theme="dark"] .cond-fig .fig .body-img{filter:drop-shadow(0 calc(9px / var(--gz,1)) calc(26px / var(--gz,1)) rgba(0,0,0,.5))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cond-fig .fig .body-img{
  filter:drop-shadow(0 calc(9px / var(--gz,1)) calc(26px / var(--gz,1)) rgba(0,0,0,.5))}}
.cond-fig .fig .outline{vector-effect:non-scaling-stroke;stroke-width:1.4}
.cond-fig .fig .outline.on{opacity:.92;stroke-width:2;filter:drop-shadow(0 0 5px var(--oc))}
.cond-cap{margin:12px 0 0;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);min-height:1.2em}
.cond-via{margin:10px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2);text-align:center;min-height:3.2em}
.cond-via b{color:var(--ink);font-weight:500}
.cond-via a{color:var(--accent-ink);font-weight:500}
.cond-foot{margin:22px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted);max-width:76ch}

.cond-steps{list-style:none;counter-reset:s;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.cond-steps.row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:26px}
@media (max-width:860px){.cond-steps.row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.cond-steps.row{grid-template-columns:minmax(0,1fr)}}
.cond-steps li{counter-increment:s;padding-left:32px;position:relative}
.cond-steps.row li{padding:18px 18px 18px 18px;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--shadow)}
.cond-steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--mono);font-size:10px;font-weight:600;
  background:var(--accent-wash);color:var(--accent-ink)}
.cond-steps.row li::before{position:static;margin-bottom:11px}
.cond-steps b{display:block;font-size:14.5px;font-weight:500;line-height:1.3}
.cond-steps span{display:block;margin-top:5px;font-size:13px;line-height:1.55;color:var(--ink-2)}

.cond-also{margin-top:24px;padding:20px 22px;border-radius:18px;background:var(--surface-2);
  border:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
  justify-content:space-between}
.cond-also p{margin:0;font-size:13.5px;line-height:1.65;color:var(--ink-2);max-width:74ch}
.cond-also b{color:var(--ink);font-weight:500}
.cond-also a{color:var(--accent-ink)}
.cond-also .btn{text-decoration:none}

.cond-papers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:32px}
@media (max-width:920px){.cond-papers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cond-papers{grid-template-columns:minmax(0,1fr)}}
.cond-paper{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:20px;box-shadow:var(--shadow);text-decoration:none;
  transition:border-color .25s,box-shadow .35s ease,transform .25s var(--ease)}
.cond-paper:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--prevention) 32%,var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--prevention) 16%,transparent),0 22px 46px -22px color-mix(in srgb,var(--prevention) 56%,transparent)}
.cond-paper b{display:block;font-family:var(--serif);font-weight:400;font-size:40px;line-height:1;
  letter-spacing:-.03em;color:var(--prevention)}
.cond-paper .cl{display:block;margin-top:11px;font-size:14.5px;line-height:1.45;color:var(--ink)}
.cond-paper .dt{display:block;margin-top:8px;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.cond-paper small{display:block;margin-top:auto;padding-top:14px;font-family:var(--mono);font-size:10px;
  letter-spacing:.04em;color:var(--muted)}

/* ── a segment page ── */
.chips{display:flex;flex-wrap:wrap;gap:9px;max-width:80ch}
.chips a{display:inline-flex;align-items:center;min-height:38px;padding:8px 15px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);
  font-size:13.5px;font-weight:500;color:var(--ink);text-decoration:none;
  transition:border-color .25s,transform .25s var(--ease),box-shadow .35s ease}
.chips a:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 36%,var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 14%,transparent),0 16px 34px -18px color-mix(in srgb,var(--accent) 55%,transparent)}
.chips-foot{margin:18px 0 0;font-size:13.5px;color:var(--ink-2)}
.chips-foot a{color:var(--accent-ink);font-weight:500}
.faq .bodyin a{color:var(--accent-ink)}
/* the "how it runs for you" link on each who-it-is-for card */
.seg-go{display:inline-flex;align-items:center;gap:7px;margin-top:14px;min-height:24px;
  font-size:13px;font-weight:500;color:var(--accent-ink);text-decoration:none}
.seg-go .arw{transition:transform .25s var(--ease)}
.seg-card:hover .seg-go .arw{transform:translateX(3px)}

/* ── odometer ──
   Each digit is a column running 0–9 and ending on the value it wants, so every
   wheel travels the same ten cells and the stagger comes from the delay rather
   than the distance. Tabular figures keep the columns from shuffling sideways
   as they turn.

   It sits at the end of the sheet on purpose: the wheels are plain spans and
   bs, and every block that holds a rolling number also styles its own spans and
   bs — 11.5px and grey in the stat row, 46px and coloured in the why-now cards.
   Those rules score the same as these, so source order is what decides, and the
   two-class selectors below win outright. */
b.rl,.rl{--h:1.06em;display:inline-flex;align-items:stretch;font-variant-numeric:tabular-nums}
.rl .d,.rl .s,.rl .d i,.rl .d b{font:inherit;font-style:normal;font-variant-numeric:tabular-nums;
  color:inherit;letter-spacing:inherit;margin:0;padding:0;min-width:0;max-width:none;text-align:inherit}
.rl .d,.rl .s{display:block;height:var(--h);overflow:hidden;white-space:pre}
.rl .s{line-height:var(--h)}
.rl .d i{display:block;transform:translateY(0);
  transition:transform 1.3s cubic-bezier(.16,.84,.26,1);transition-delay:calc(var(--i,0) * 115ms)}
.rl.go .d i{transform:translateY(calc(-10 * var(--h)))}
.rl .d b{display:block;height:var(--h);line-height:var(--h)}

@media (prefers-reduced-motion:reduce){
  .rl .d i{transition:none}
  .amb>i{animation:none!important}
  .tab[aria-selected="true"] .prog,.ev-row[aria-current="true"] .prog{animation:none;width:100%}
  *{transition-duration:.01ms!important}
}