/* f-appfirst: the consumer fintech rebuild. CHOSEN DIRECTION (Arj, 2026-09-15).
   inspiration set, named by Arj: revolut (product renders as hero objects, stat counters,
   dark-render feature panels), spaceship (australian plain talk, phone front and centre),
   raiz (pricing clarity, rounded friendliness, faq accordions, store badges early),
   duolingo (white ground, huge rounded type, characters carry the brand, 3d push buttons,
   a placement-quiz doorway, a giant simple close).
   2026-09-15 refinement pass: the real inaam logo SVG (verbatim from the live Nav.js
   component) in nav and footer; the hero now carries the live homepage's signature load
   move, the five theme memojis BLOWING OUT from behind the phone to their positions
   (live site: GsapAnimations.js hero floats, centre -> five peaks, then a bob with a
   gentle counter-tilt; here as pure CSS transform/opacity so no library is needed), over
   the live hero's soft purple glow. Floats use the same five character assets the live
   hero uses. Blow-out vectors are decorative approximations toward the stage centre.
   RULES THAT SURVIVE EVERY REDESIGN: no return or performance figures anywhere.
   Assets/Steps/"Build your Portfolio.png" is BANNED (in-image backtest banner), so are
   "Track real metrics.png" (green % ticks) and hero-phone-v6 (gain figure). Verified clean
   and used here: "Choose your values.png", "Watch your impact grow.png",
   "Learn as you go.png", faq-app-features-v3.webp. One asset, one job, with one
   deliberate exception: the five theme characters appear twice, blowing out of the hero
   and again in the theme cards, the same reprise the live homepage makes (hero floats +
   pillar sections).
   Voice: lowercase display, sentence-case body, no exclamation marks, no em dashes.
   Five brand accents only. Push-button depth comes from translucent black, never a new hex. */

/* ============ tokens ============ */
:root{
  --coral:#FF6B6B;
  --blue:#58CAFF;
  --lime:#9EE04A;
  --purple:#C385F8;
  --gold:#F6CA44;
  --ink:#222222;
  --ink-2:#1A1A1A;
  --grey-700:#55534E;
  --grey-500:#807D76;
  --line:#ECEAE4;
  --band:#F7F7F3;
  --white:#FFFFFF;
  --f-display:'Fredoka','Trebuchet MS','Avenir Next',sans-serif;
  --f-body:'Inter','Helvetica Neue',Arial,sans-serif;
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-bounce:cubic-bezier(.34,1.56,.64,1);
  --r-xl:32px;
  --r-lg:24px;
  --r-md:18px;
  --r-pill:999px;
  --maxw:1160px;
}

/* ============ base ============ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
/* NOT .nav. `overflow-x:clip` with `overflow-y:visible` is a computed-value
   trap: the spec turns the visible axis into `auto`, which makes the nav a
   scroll container and clips the dropdown panels to the 70px bar. Chromium
   currently keeps them visible, WebKit does not, which is why the menus go
   missing in Safari. html,body already clip the page horizontally, so the
   nav does not need to. Found 24 September 2026. */
main section,footer{overflow-x:clip}
body{
  font-family:var(--f-body);
  background:var(--white);
  color:var(--ink);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{
  max-width:var(--maxw);
  width:100%;
  margin:0 auto;
  padding-left:clamp(20px,5vw,56px);
  padding-right:clamp(20px,5vw,56px);
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
section[id]{scroll-margin-top:5.5rem}

.bg-coral{background:var(--coral)}
.bg-blue{background:var(--blue)}
.bg-lime{background:var(--lime)}
.bg-purple{background:var(--purple)}
.bg-gold{background:var(--gold)}

/* ============ push buttons: the duolingo move. depth is a hard translucent-black
   bottom edge; per Arj the press-down fires on HOVER, not just on active ============ */
.btn{
  --edge:rgba(34,34,34,.24);--lift:5px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-display);font-weight:600;font-size:1.06rem;
  border:none;cursor:pointer;text-decoration:none;text-align:center;
  border-radius:16px;padding:15px 30px;min-height:52px;
  box-shadow:0 var(--lift) 0 var(--edge);
  transition:transform .14s var(--e-out),box-shadow .14s var(--e-out);
}
.btn:active{transform:translateY(var(--lift));box-shadow:0 0 0 var(--edge)}
.btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.btn-lime{background:var(--lime);color:#1B2010}
.btn-purple{background:var(--purple);color:var(--white);--edge:rgba(0,0,0,.34)}
.btn-ink{background:var(--ink);color:var(--white);--edge:rgba(0,0,0,.38)}
.btn-white{background:var(--white);color:var(--ink);--edge:rgba(0,0,0,.30)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(var(--lift));box-shadow:0 0 0 var(--edge)}
}
.link{
  font-family:var(--f-display);font-weight:500;font-size:1.05rem;
  display:inline-flex;align-items:center;gap:8px;
  color:var(--ink);text-decoration:none;cursor:pointer;
  border-bottom:2px solid transparent;transition:border-color .2s;
}
.link:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .link:hover{border-bottom-color:currentColor}
}

/* ============ headings ============ */
h1,h2,h3{font-family:var(--f-display);font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.85rem;letter-spacing:.15em;font-weight:600;color:var(--grey-500);
}
.kdot{width:8px;height:8px;border-radius:50%;flex:none}
.h-xl{font-size:clamp(2.5rem,6.6vw,4.6rem);line-height:1.04}
.h-lg{font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.1}
.h-md{font-size:clamp(1.35rem,2.4vw,1.7rem);line-height:1.2}
.sub{color:var(--grey-700)}

/* ============ nav ============ */
.nav{
  position:sticky;top:0;z-index:70;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s;
}
.nav.solid{border-bottom-color:var(--line);box-shadow:0 2px 14px rgba(34,34,34,.05)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:70px}
.logo{display:flex;align-items:center;text-decoration:none}
.logo svg{height:30px;width:auto;display:block}
.mark-g{transform-box:fill-box;transform-origin:center;transition:transform .6s var(--e-out)}
@media (hover:hover) and (pointer:fine){
  .logo:hover .mark-g{transform:rotate(180deg)}
}

/* nav dropdowns: the real sitemap, rolled up. white cards, accent dots on the
   theme rows, chevrons that turn when open */
.nd{position:relative}
.nd-t{
  font-family:var(--f-display);font-weight:500;font-size:.98rem;color:var(--grey-700);
  background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  padding:8px 2px;transition:color .15s;
}
.nd-t svg{transition:transform .25s var(--e-out)}
.nd-t:hover,.nd-t:focus-visible,.nd.open .nd-t{color:var(--ink)}
.nd.open .nd-t svg{transform:rotate(180deg)}
/* the menu opens on :hover of the whole .nd (css, no timers): the hit area is
   contiguous from trigger to card because the visual gap is padding INSIDE .nd-m,
   so the pointer never leaves the dropdown on the way down. click toggles .open
   for touch and keyboard */
.nd-m{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  padding-top:12px;
  opacity:0;pointer-events:none;transition:opacity .2s var(--e-out),transform .25s var(--e-out);
  z-index:80;
}
.nd-c{
  min-width:240px;background:var(--white);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 18px 44px rgba(34,34,34,.13);padding:10px;
}
.nd.open .nd-m{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
@media (hover:hover) and (pointer:fine){
  .nd:hover .nd-m{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
  .nd:hover .nd-t{color:var(--ink)}
  .nd:hover .nd-t svg{transform:rotate(180deg)}
}
.nd-m a{
  display:flex;align-items:center;gap:10px;
  font-family:var(--f-display);font-weight:500;font-size:.95rem;color:var(--grey-700);
  text-decoration:none;padding:9px 12px;border-radius:10px;white-space:nowrap;
}
.nd-m a:hover,.nd-m a:focus-visible{background:var(--band);color:var(--ink)}
.nd-m .nd-div{height:1px;background:var(--line);margin:8px 6px}
.nd-m .kdot{width:8px;height:8px}
.nav-links{display:none;gap:28px;align-items:center}
.nav-links a{
  font-family:var(--f-display);font-weight:500;
  font-size:.98rem;color:var(--grey-700);text-decoration:none;transition:color .15s;
}
.nav-links a:hover,.nav-links a:focus-visible,.nav-links a.on{color:var(--ink)}
@media (min-width:1000px){.nav-links{display:flex}}
.nav .btn{padding:11px 22px;min-height:46px;font-size:1rem;--lift:4px}

/* ============ hero ============ */
.hero{padding:0}
.hero-sticky{padding:clamp(40px,7vh,80px) 0 clamp(28px,5vh,56px)}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(28px,5vw,72px);align-items:center;
}
.hero-grid > *{min-width:0}
.beats{font-size:clamp(2.7rem,7vw,5.2rem);line-height:1.06;letter-spacing:-.02em}
.beats > span{display:block}
.beats > span > span{display:inline}
.dot-coral{color:var(--coral)}
.dot-blue{color:var(--blue)}
.dot-lime{color:var(--lime)}
.strap{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(1.1rem,1.8vw,1.4rem);color:var(--ink);margin-top:20px;
}
.hero-sub{margin-top:14px;max-width:46ch;font-size:clamp(1.02rem,1.3vw,1.18rem)}
.cta-row{display:flex;align-items:center;gap:22px;margin-top:30px;flex-wrap:wrap}
.hero-note{margin-top:18px;font-size:.92rem;color:var(--grey-500)}
.stage-pin{display:contents}
.stage{position:relative;padding:12px 0 0}
/* the live hero's soft purple ground, carried over */
.glowp{
  position:absolute;left:10%;right:10%;top:14%;height:62%;
  background:radial-gradient(closest-side,rgba(195,133,248,.30),rgba(195,133,248,.10) 55%,rgba(195,133,248,0) 75%);
  filter:blur(26px);border-radius:50%;pointer-events:none;
}
.stage .shot{
  position:relative;z-index:1;
  width:min(430px,92%);margin:0 auto;
  filter:drop-shadow(0 30px 44px rgba(34,34,34,.16));
}
/* the five theme floats. the transform is the SCRUB FORMULA: --p runs 0 to 1
   (set by js from scroll, like the live site's scrub), and each float travels from
   the stage centre (its --bx/--by vector) to rest. --p defaults to 1, so no-js and
   reduced motion read the finished composition */
.float{
  position:absolute;z-index:2;pointer-events:none;
  transform:
    translate(calc(-50% + var(--bx,0px) * (1 - var(--p,1))),calc(-50% + var(--by,0px) * (1 - var(--p,1))))
    scale(var(--p,1))
    rotate(calc(var(--tilt,0deg) * (1 - var(--p,1))));
  opacity:calc(var(--p,1) * 1.4);
  filter:drop-shadow(0 12px 22px rgba(34,34,34,.16));
}
.float img{width:100%}
/* the scroll cue: mobile only, and only while the stage is still held. it names the
   action rather than showing a bare chevron, so a blank-looking first screen reads as
   "there is more", not "it did not load" */
.scroll-cue{display:none}
@media (max-width:920px){
  .scroll-cue{
    display:inline-flex;align-items:center;gap:7px;
    position:fixed;left:50%;top:76px;transform:translateX(-50%);z-index:60;
    background:var(--ink);color:var(--white);
    font-family:var(--f-display);font-weight:500;font-size:.85rem;
    padding:9px 16px;border-radius:var(--r-pill);
    box-shadow:0 6px 18px rgba(34,34,34,.22);
    opacity:1;transition:opacity .75s cubic-bezier(.4,0,.2,1);pointer-events:none;
    will-change:transform,opacity;
  }
  .stage.settled .scroll-cue{opacity:0}
}
/* the impact pills, live-site hero badges scaled to this stage. they pop once the
   floats have fully emerged and their numbers count up */
.fpill{
  position:absolute;top:-14px;left:50%;
  background:var(--white);border:2px solid var(--ink);border-radius:var(--r-pill);
  padding:6px 13px;white-space:nowrap;
  font-family:var(--f-display);font-weight:600;font-size:.95rem;color:var(--ink);
  box-shadow:0 4px 12px rgba(34,34,34,.12);
  transform:translateX(-50%);
}
.fpill small{font-weight:500;font-size:.72rem;color:var(--grey-700);margin-left:4px}
.f5 .fpill{top:calc(100% + 6px);bottom:auto}
/* five-point composition clear of the render's own popped cards: four corners,
   and health perched above the phone's top edge */
.f1{left:9%;top:14%;width:clamp(96px,10.5vw,142px);--bx:200px;--by:170px;--tilt:-24deg;--sway:5deg;--fd:0s;--pd:.05s}
.f2{left:91%;top:12%;width:clamp(90px,10vw,136px);--bx:-200px;--by:180px;--tilt:22deg;--sway:-4deg;--fd:.7s;--pd:.15s}
.f3{left:91%;top:84%;width:clamp(92px,10vw,138px);--bx:-200px;--by:-180px;--tilt:-18deg;--sway:4.5deg;--fd:1.4s;--pd:.25s}
.f4{left:9%;top:84%;width:clamp(96px,10.5vw,144px);--bx:200px;--by:-180px;--tilt:20deg;--sway:-5deg;--fd:2.1s;--pd:.35s}
.f5{left:50%;top:2.6%;width:clamp(70px,7.4vw,96px);--bx:0px;--by:210px;--tilt:-26deg;--sway:3.5deg;--fd:2.8s;--pd:.45s}
/* the flip state, motion-independent */
.tcard.flipped .tc-inner,.tcard:focus-visible .tc-inner{transform:rotateY(180deg)}
@media (hover:hover) and (pointer:fine){
  .tcard:hover .tc-inner{transform:rotateY(180deg)}
}
/* touch devices: no 3d at all. mobile browsers flatten preserve-3d unpredictably and
   paint the back face over the front, which is why the cover characters vanished.
   the two faces simply crossfade instead */
@media (max-width:1080px){
  .tc-inner{transform:none !important;transform-style:flat}
  .tc-front,.tc-back{transform:none !important;backface-visibility:visible;-webkit-backface-visibility:visible}
  .tc-back{opacity:0;pointer-events:none;transition:opacity .35s var(--e-out)}
  .tc-front{opacity:1;transition:opacity .35s var(--e-out)}
  .tcard.flipped .tc-back{opacity:1}
  .tcard.flipped .tc-front{opacity:0}
}

/* ============ press band ============ */
/* the press band is a self-scrolling banner: one track, two identical halves,
   translated by half its own width on a loop. hover pauses it. sizes are explicit
   heights only, never transforms, so items can never overlap */
.press{background:var(--band);padding:22px 0 44px}
.press .lbl{display:block;font-size:.8rem;letter-spacing:.14em;font-weight:600;color:var(--grey-500);text-align:center;margin-bottom:16px}
.marq{overflow:hidden}
.marq-track{display:flex;flex-wrap:nowrap;width:max-content;min-width:max-content;background:var(--band)}
.marq-half{display:flex;align-items:center;gap:38px;padding-right:38px;flex:none}
.press img{
  height:64px;width:auto;max-width:250px;object-fit:contain;display:block;
  mix-blend-mode:multiply;flex:none;
}
.press-name{
  font-family:var(--f-display);font-weight:500;font-size:1.2rem;color:var(--grey-700);
  white-space:nowrap;flex:none;
}
.lg-chip{background:var(--ink);padding:10px 16px;border-radius:12px;mix-blend-mode:normal;box-sizing:content-box}
.press .lg-7nyaa{height:72px}
.press .lg-tedx{height:34px}
.press .lg-smartco{height:48px}
.press .lg-wef{height:100px}
.press .lg-unsdg{height:96px}
.press .lg-m2020{height:42px}
.press .lg-ausgov{height:68px}
.press .lg-canva{height:44px}
.press .lg-melb{height:100px}
.press .lg-unsw{height:92px}
.press .lg-monash{height:64px}
.press .lg-deakin{height:96px}
.press .lg-rmit{height:60px}
.press .lg-swin{height:56px}
.press .lg-livehaus{height:36px}
.press .lg-singair{height:72px}
.press .lg-krisflyer{height:48px}
.press .lg-gig{height:34px}
.press .lg-iis{height:88px}
.press .lg-after{height:56px}
.press .lg-nudge{height:40px}
.press .lg-devready{height:64px}
.press .lg-btg{height:76px}
.press .lg-wade{height:80px}
.press .lg-sbc{height:30px}
.press .lg-intersekt{height:40px}
.press .lg-sv{height:52px}
.press .lg-snet{height:56px}
.press .lg-emersyn{height:36px}
.press .lg-mbs{height:60px}
.press .lg-fintech{height:44px}
.press .lg-sd{height:56px}
.press .lg-osn{height:76px}
.press .lg-afc{height:92px}
.press .lg-hoa{height:36px}
.press .lg-bottled{height:68px}
.press .lg-fwb{height:74px}
.press .lg-mfg{height:52px}
.press .lg-melanin{height:72px}
.press .lg-saari{height:48px}
.press .lg-sfta{height:72px}
@media (max-width:640px){
  .press img{width:130px;height:48px}
  .marq-half{gap:26px;padding-right:26px}
}

/* ============ stats ============ */
.stats{padding:clamp(60px,9vh,96px) 0 clamp(56px,9vh,96px)}
.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}
@media (min-width:900px){.stats-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.stat{text-align:center;position:relative;padding:0 12px}
.stat-asic{display:flex;flex-direction:column;justify-content:center}
.stat-asic img{height:clamp(2rem,3vw,2.5rem);width:auto;max-width:100%;display:block;margin:0 auto}
.stat-asic .stat-lbl{margin-top:8px}
/* accent bars between the five blocks */
@media (min-width:900px){
  .stat + .stat::before{
    content:'';position:absolute;left:-2px;top:12%;height:76%;width:5px;border-radius:999px;
  }
  .stat:nth-child(2)::before{background:var(--coral)}
  .stat:nth-child(3)::before{background:var(--blue)}
  .stat:nth-child(4)::before{background:var(--lime)}
  .stat:nth-child(5)::before{background:var(--gold)}
  .stat:nth-child(6)::before{background:var(--purple)}
}
.stats-note{
  margin:clamp(30px,5vh,44px) auto 0;
  padding:1.3rem 1.4rem;background:rgba(195,133,248,.08);
  border-radius:16px;
  font-size:.76rem;line-height:1.8;color:var(--grey-700);
}
.stats-note strong{color:var(--ink)}
.stats-note a{color:var(--purple);text-decoration:underline}
.stat-fig{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(2.4rem,4.6vw,3.6rem);line-height:1;color:var(--ink);display:block;
}
.stat-lbl{display:block;margin-top:10px;font-size:.9rem;color:var(--grey-500)}

/* ============ feature blocks ============ */
.feat{padding:clamp(40px,7vh,80px) 0}
.feat-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,80px);align-items:center;
}
.feat-grid > *{min-width:0}
.feat.flip .feat-copy{order:2}
.feat.flip .feat-media{order:1}
.feat-copy h2{margin-top:14px}
.feat-copy p.body{margin-top:16px;color:var(--grey-700);max-width:46ch}
.feat-copy .link{margin-top:20px}
.feat-media{
  border-radius:var(--r-xl);padding:clamp(24px,3.5vw,44px);
  display:flex;justify-content:center;
}
.feat-media img{width:min(400px,88%);filter:drop-shadow(0 22px 34px rgba(34,34,34,.14))}
.tint-blue{background:rgba(88,202,255,.14)}
.tint-lime{background:rgba(158,224,74,.16)}
.tint-purple{background:rgba(195,133,248,.14)}

/* ============ theme cards ============ */
.themes{padding:clamp(56px,9vh,100px) 0;background:var(--band)}
.themes-head{max-width:640px}
.themes-head p{margin-top:14px;color:var(--grey-700)}
.trow{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:40px;
}
@media (max-width:1080px){
  .trow{
    display:flex;overflow-x:auto;scroll-snap-type:x proximity;
    padding-bottom:10px;margin-left:calc(-1 * clamp(20px,5vw,56px));
    margin-right:calc(-1 * clamp(20px,5vw,56px));
    padding-left:clamp(20px,5vw,56px);padding-right:clamp(20px,5vw,56px);
  }
  .tcard{flex:0 0 200px;height:296px;scroll-snap-align:start}
}
.trow-nav{display:none;gap:12px;justify-content:center;margin-top:18px}
@media (max-width:1080px){.trow-nav{display:flex}}
.tn{
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  background:var(--ink);color:var(--white);display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 0 rgba(0,0,0,.3);transition:transform .12s var(--e-out),box-shadow .12s var(--e-out);
}
.tn:active{transform:translateY(4px);box-shadow:0 0 0 rgba(0,0,0,.3)}
/* flip cards: front = number, name, character; back = the explainer. hover, focus
   or tap flips; a sheen sweeps the front on hover. all titles white on every accent */
.tcard{height:320px;perspective:900px;cursor:pointer;background:none;border-radius:var(--r-lg)}
.tcard.bg-coral{--card:var(--coral);background:none}
.tcard.bg-blue{--card:var(--blue);background:none}
.tcard.bg-lime{--card:var(--lime);background:none}
.tcard.bg-purple{--card:var(--purple);background:none}
.tcard.bg-gold{--card:var(--gold);background:none}
.tcard:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.tc-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.tc-front,.tc-back{
  position:absolute;inset:0;border-radius:var(--r-lg);background:var(--card);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
  display:flex;flex-direction:column;padding:20px 18px 0;
}
/* ios needs both faces on explicit 3d transforms or it paints back faces through */
.tc-front{transform:rotateY(0deg) translateZ(1px)}
.tc-back{transform:rotateY(180deg) translateZ(1px);padding-bottom:20px;justify-content:flex-start;gap:10px}
.tcard .tnum{font-family:var(--f-display);font-weight:600;font-size:.82rem;letter-spacing:.1em;color:var(--white);opacity:.85}
.tcard h3{font-size:1.22rem;line-height:1.15;margin-top:6px;color:var(--white)}
.tc-x{color:var(--white);font-size:.95rem;line-height:1.55;margin-top:4px}
/* every character sits in the same 150px stage so the five read at one size.
   the seated yoga figure reads visually larger than the standing ones at equal
   height, so she runs slightly smaller */
.tcard .tchar{height:150px;display:flex;justify-content:center;align-items:flex-end;margin-top:auto}
.tcard .tchar img{max-height:100%;width:auto;max-width:92%;object-fit:contain}
.tcard.bg-coral .tchar img{max-height:82%}
/* the front character haunts the back as a low-ink silhouette behind the copy */
.tc-ghost{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:center;pointer-events:none}
.tc-ghost img{max-height:132px;width:auto;max-width:88%;filter:brightness(0);opacity:.15}
.tc-back > *:not(.tc-ghost){position:relative;z-index:1}
.tc-sheen{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.tc-sheen::before{
  content:'';position:absolute;top:-20%;bottom:-20%;left:0;width:46%;
  transform:translateX(-160%) skewX(-16deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28) 50%,transparent);
}

/* ============ fee ============ */
.fee{padding:clamp(56px,10vh,110px) 0}
.fee-grid{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(28px,5vw,72px);align-items:center;
}
.fee-grid > *{min-width:0}
.fee-copy h2{margin-top:14px}
.fee-copy p.body{margin-top:16px;color:var(--grey-700);max-width:44ch}
.fine{font-size:.85rem;color:var(--grey-500);line-height:1.65;margin-top:18px;max-width:56ch}
.calc{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(24px,3.4vw,40px);box-shadow:0 18px 44px rgba(34,34,34,.08);
}
.calc .works{font-size:.92rem;color:var(--grey-500)}
.fee-fig{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(3.4rem,7.5vw,5.6rem);line-height:1;letter-spacing:-.03em;
  margin:8px 0 6px;white-space:nowrap;
}
.calc .after{font-size:.95rem;color:var(--grey-700)}
.calc-row{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:26px;flex-wrap:wrap}
.calc-row .lbl{font-size:.9rem;color:var(--grey-500)}
.bal-wrap{display:flex;align-items:center;gap:12px}
.bal-in{
  font-family:var(--f-display);font-weight:600;font-size:1.4rem;color:var(--ink);
  font-variant-numeric:tabular-nums;text-align:right;width:9ch;
  border:none;border-bottom:2.5px dashed var(--purple);background:transparent;
  padding:2px 2px 4px;outline:none;
}
.bal-in:focus{border-bottom-style:solid}
.bal-hint{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-display);font-weight:500;font-size:.82rem;color:var(--purple);
  white-space:nowrap;
}
.bal-hint svg{flex:none}
/* contribution: one-off or monthly, with its own amount */
.year-end{font-size:.9rem;color:var(--grey-700);margin-top:2px}
.year-end b{font-family:var(--f-display);color:var(--ink)}
.contrib{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;flex-wrap:wrap}
.contrib .lbl{font-size:.9rem;color:var(--grey-500)}
.contrib-r{display:flex;align-items:center;gap:12px}
.ctoggle{display:inline-flex;background:var(--band);border:1px solid var(--line);border-radius:999px;padding:3px}
.ctoggle button{
  font-family:var(--f-display);font-weight:500;font-size:.85rem;color:var(--grey-700);
  border:none;background:transparent;border-radius:999px;padding:6px 14px;cursor:pointer;
}
.ctoggle button.on{background:var(--ink);color:var(--white)}
.ctoggle button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.c-amt{
  font-family:var(--f-display);font-weight:600;font-size:1.15rem;color:var(--ink);
  font-variant-numeric:tabular-nums;text-align:right;width:6.5ch;
  border:none;border-bottom:2.5px dashed var(--purple);background:transparent;
  padding:2px 2px 4px;outline:none;
}
.c-amt:focus{border-bottom-style:solid}
/* the verdict pill: lime past the $8,000 crossover, coral under it */
.deal{
  display:inline-flex;align-items:center;
  font-family:var(--f-display);font-weight:600;font-size:.88rem;
  line-height:1;letter-spacing:0;white-space:nowrap;
  border-radius:999px;padding:6px 15px;margin-left:12px;vertical-align:middle;
}
.deal.good{background:var(--lime);color:#1B2010}
.deal.bad{background:var(--coral);color:var(--white)}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:38px;
  background:transparent;cursor:pointer;margin:12px 0 4px;
}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:var(--band);border:1px solid var(--line)}
/* the thumb presses like every other button on the page */
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;
  background:var(--lime);border:3px solid var(--ink);margin-top:-13px;
  box-shadow:0 4px 0 rgba(34,34,34,.32);
}
input[type=range]:hover::-webkit-slider-thumb,
input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 0 rgba(34,34,34,.32);transform:translateY(3px)}
input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:var(--band);border:1px solid var(--line)}
input[type=range]::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;background:var(--lime);border:3px solid var(--ink);
  box-shadow:0 4px 0 rgba(34,34,34,.32);
}
input[type=range]:hover::-moz-range-thumb,
input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 0 rgba(34,34,34,.32);transform:translateY(3px)}
input[type=range]:focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:8px}
.calc .cross{font-size:.88rem;color:var(--grey-700);line-height:1.6;margin-top:14px}

/* the two-ruler fee graph, ported from the scale deck's fees appendix (slide 17):
   the old way in dollars p.a. growing with the balance, inaam as a shrinking share of
   the balance, split at the $8,000 crossover. two rulers, never one scale */
.ruler{max-width:860px;margin:clamp(36px,6vh,56px) auto 0}
.ruler-hd{display:flex;justify-content:center;gap:16px 30px;flex-wrap:wrap;margin-bottom:18px}
.ru-u{display:inline-flex;align-items:center;gap:9px;font-size:.86rem;color:var(--grey-700)}
.ru-u i{width:13px;height:13px;border-radius:4px;flex:none}
.ru-u b{color:var(--ink)}
.rgrp{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 20px;background:var(--white)}
.rtag{
  position:absolute;top:-11px;left:18px;background:var(--white);padding:0 9px;
  font-family:var(--f-display);font-weight:600;font-size:.8rem;letter-spacing:.04em;
  color:var(--ink);display:inline-flex;align-items:center;gap:6px;
}
.rtag i{width:9px;height:9px;border-radius:50%;flex:none}
.rrow{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:34px;padding:9px 0;align-items:center}
.rrow > .bal{font-size:.85rem;text-align:right;color:var(--grey-700);font-variant-numeric:tabular-nums}
.rbars{display:grid;gap:6px;min-width:0}
.rline{display:grid;grid-template-columns:minmax(0,1fr) 7.2rem;gap:12px;align-items:center}
.rtrk{height:11px;border-radius:999px;background:#EFEDE6;overflow:hidden}
.rtrk i{display:block;height:100%;border-radius:999px;background:var(--coral);transform-origin:0 50%}
.rline.p .rtrk i{background:var(--lime)}
.rline.p{position:relative}
.rmark{position:absolute;left:-28px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:var(--ink);z-index:1}
.rfig{font-size:.82rem;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--grey-700)}
.rfig b{color:var(--ink);font-weight:700}
.rx{display:flex;align-items:center;gap:14px;margin:18px 4px;font-family:var(--f-display);font-weight:600;font-size:.95rem}
.rx .rule{flex:1;height:2px;background:var(--ink);border-radius:2px;transform-origin:50% 50%}
.rpay{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.rpay b{font-family:var(--f-display);font-weight:600;font-size:1.12rem}
.rpay span{display:block;font-size:.85rem;color:var(--grey-500);margin-top:2px}
.ruler .fine{margin:14px 0 0;max-width:none;text-align:left}

/* ============ quiz banner ============ */
.quiz{padding:clamp(20px,4vh,48px) 0}
.quiz-panel{
  background:var(--purple);border-radius:var(--r-xl);
  padding:clamp(30px,5vw,56px);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,4vw,56px);align-items:center;overflow:hidden;
}
.quiz-panel > *{min-width:0}
.quiz-panel h2,.quiz-panel .qk{color:var(--white)}
.quiz-panel .qk{display:inline-flex;align-items:center;gap:10px;font-size:.85rem;letter-spacing:.15em;font-weight:600;opacity:.9}
.quiz-panel h2{margin-top:12px}
.quiz-panel p.body{margin-top:14px;color:rgba(255,255,255,.92);max-width:44ch}
.quiz-panel .btn{margin-top:26px}
.quiz-panel .qnote{margin-top:14px;font-size:.9rem;color:rgba(255,255,255,.8)}
/* the full-body trio owns the whole right side and pops past the panel's top edge */
.quiz-panel{overflow:visible}
.quiz-fig{align-self:stretch;display:flex;justify-content:center;align-items:flex-end}
.quiz-fig img{
  width:100%;max-width:560px;
  margin-bottom:calc(-1 * clamp(30px,5vw,56px));
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.22));
}

/* ============ quote ============ */
.quote{padding:clamp(64px,10vh,120px) 0;text-align:center}
.quote-inner{max-width:820px;margin:0 auto}
.qmark{font-family:var(--f-display);font-weight:600;font-size:4.5rem;line-height:.5;color:var(--coral)}
.quote blockquote{
  font-size:clamp(1.15rem,2.1vw,1.5rem);line-height:1.6;font-weight:500;color:var(--ink);
  margin:26px 0 22px;
}
.quote cite{font-style:normal;color:var(--grey-700)}
.quote cite b{color:var(--ink);font-weight:600}

/* the proof row under the endorsement: three figures, then the rating */
.proof{margin-top:clamp(30px,5vh,44px)}
.proof-row{
  display:flex;justify-content:center;align-items:stretch;
  gap:clamp(18px,5vw,54px);flex-wrap:wrap;
}
.proof-item{display:flex;flex-direction:column;gap:4px;min-width:0}
.proof-item + .proof-item{
  border-left:1px solid var(--line);padding-left:clamp(18px,5vw,54px);
}
.proof-fig{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.5rem,3vw,2.1rem);line-height:1;color:var(--ink);
}
.proof-lbl{font-size:.86rem;color:var(--grey-500)}
.stars{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:20px;flex-wrap:wrap}
.star-row{display:inline-flex;gap:3px;color:var(--gold)}
.star-row svg{width:19px;height:19px;display:block}
.stars-note{font-size:.88rem;color:var(--grey-700)}
@media (max-width:640px){
  .proof-row{gap:14px}
  .proof-item{flex:1 1 0;align-items:center;text-align:center}
  .proof-item + .proof-item{padding-left:14px}
  .proof-fig{font-size:1.2rem}
  .proof-lbl{font-size:.72rem}
  .star-row svg{width:17px;height:17px}
  .stars-note{font-size:.82rem}
}

/* ============ faq ============ */
.faq{padding:clamp(40px,7vh,88px) 0;background:var(--band)}
.faq-list{max-width:780px;margin:36px auto 0}
.faq h2{text-align:center}
details{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  margin-bottom:12px;padding:0 22px;
}
summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:19px 0;
  font-family:var(--f-display);font-weight:500;font-size:1.12rem;
}
summary::-webkit-details-marker{display:none}
summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.plus{
  flex:none;width:28px;height:28px;border-radius:50%;
  border:1.5px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s var(--e-out);
}
details[open] .plus,details.is-open .plus{transform:rotate(45deg)}
.aw{display:grid;grid-template-rows:1fr}
.aw > div{overflow:hidden;min-height:0}
.js .faq-list details .aw{grid-template-rows:0fr}
.js .faq-list details.is-open .aw{grid-template-rows:1fr}
details .ans{padding:0 0 20px;color:var(--grey-700);max-width:62ch}

/* ============ newsletter ============ */
.news{padding:clamp(48px,8vh,88px) 0}
.news-card{
  max-width:620px;margin:0 auto;text-align:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(30px,5vw,52px);box-shadow:0 18px 44px rgba(34,34,34,.07);
}
.news-card h2{font-size:clamp(1.7rem,3.4vw,2.3rem)}
.news-card p.body{margin-top:12px;color:var(--grey-700)}
.news-form{display:grid;gap:12px;margin-top:26px;text-align:left}
.news-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.news-form input{
  width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;
  font-family:var(--f-body);font-size:.92rem;color:var(--ink);background:var(--white);
  outline:none;transition:border-color .2s;
}
.news-form input:focus-visible{border-color:var(--purple)}
.news-form .btn{width:100%}
.news-note{margin-top:12px;font-size:.78rem;color:var(--grey-500)}
@media (max-width:640px){.news-row{grid-template-columns:1fr}}

/* ============ close ============ */
.close{padding:clamp(40px,7vh,88px) 0 0}
.close-panel{
  background:var(--lime);border-radius:var(--r-xl) var(--r-xl) 0 0;
  text-align:center;padding:clamp(48px,8vh,90px) clamp(20px,5vw,56px) clamp(56px,9vh,100px);
  position:relative;overflow:hidden;
}
.close-panel h2{font-size:clamp(2.3rem,5.6vw,4.2rem);color:#1B2010}
.close-panel p.body{margin-top:16px;color:#1B2010;max-width:44ch;margin-left:auto;margin-right:auto}
.store-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:32px}
.store{
  display:flex;align-items:center;gap:12px;
  background:var(--ink);color:var(--white);
  border-radius:14px;padding:12px 22px;text-decoration:none;min-height:56px;
  box-shadow:0 5px 0 rgba(0,0,0,.32);
  transition:transform .14s var(--e-out),box-shadow .14s var(--e-out);
}
.store:active{transform:translateY(5px);box-shadow:0 0 0 rgba(0,0,0,.32)}
@media (hover:hover) and (pointer:fine){
  .store:hover{transform:translateY(5px);box-shadow:0 0 0 rgba(0,0,0,.32)}
}
.store:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.store small{display:block;font-size:.7rem;opacity:.75;line-height:1.2;text-align:left}
.store .s-name{font-family:var(--f-display);font-weight:500;font-size:1.15rem;line-height:1.15;text-align:left}
.close-note{margin-top:24px;font-size:.88rem;color:#1B2010}

/* ============ footer ============ */
footer{background:var(--ink-2);color:#A6A29B;padding:56px 0 44px;font-size:.83rem;line-height:1.75}
.f-mark{color:var(--white);font-family:var(--f-display);font-weight:600;font-size:1.5rem;margin-bottom:22px}
.f-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;margin-bottom:34px}
@media (max-width:760px){.f-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.f-col h4{font-family:var(--f-display);font-weight:500;font-size:.95rem;color:var(--white);margin-bottom:10px}
.f-col a{display:block;color:#A6A29B;text-decoration:none;padding:3px 0;font-size:.85rem}
.f-col a:hover,.f-col a:focus-visible{color:var(--white)}
.f-links{display:flex;gap:10px 26px;flex-wrap:wrap;margin-bottom:24px}
.f-links a{color:#A6A29B;text-decoration:none;border-bottom:1px solid rgba(166,162,155,.35);padding-bottom:1px}
.f-links a:hover,.f-links a:focus-visible{color:var(--white);border-bottom-color:var(--white)}
.f-legal{max-width:none}
.f-copy{margin-top:24px;color:#7C7871}

.tagpill{
  position:fixed;left:16px;bottom:16px;z-index:80;
  background:var(--ink);color:var(--white);
  font-family:var(--f-display);font-weight:500;font-size:.85rem;letter-spacing:.06em;
  padding:9px 17px;border-radius:var(--r-pill);
  box-shadow:0 6px 18px rgba(34,34,34,.25);
}

/* ============ motion: resting states above are final; everything animated
   lives inside no-preference and is gated behind html.js ============ */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}

  /* load: hero copy rises, phone pops, chips land late */
  .rise{opacity:0;animation:rise .7s var(--e-out) forwards;animation-delay:var(--d,0s)}
  @keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
  .pop{opacity:0;animation:pop .8s var(--e-bounce) forwards;animation-delay:var(--d,0s)}
  @keyframes pop{from{opacity:0;transform:translateY(26px) scale(.94)}to{opacity:1;transform:none}}

  /* scroll reveals */
  .rv{transition:opacity .6s var(--e-out),transform .6s var(--e-out);transition-delay:var(--d,0s)}
  .js .rv:not(.in){opacity:0;transform:translateY(22px)}
  .rv.in{opacity:1;transform:none}
  .rv-card{transition:opacity .6s var(--e-out),transform .6s var(--e-bounce);transition-delay:var(--d,0s)}
  .js .rv-card:not(.in){opacity:0;transform:translateY(26px) scale(.96)}
  .rv-card.in{opacity:1;transform:none}

  /* once the scrub reaches 1 the stage settles: floats bob with a gentle mid-sway,
     echoing the live hero loop. the keyframes restate the resting transform, so the
     handover from the scrub formula is seamless */
  .js .stage.settled .float{animation:fbob 5.4s ease-in-out var(--fd,0s) infinite}
  @keyframes fbob{
    0%,100%{transform:translate(-50%,-50%)}
    50%{transform:translate(-50%,calc(-50% - 11px)) rotate(var(--sway,4deg))}
  }
  /* impact pills pop only after the floats settle */
  .js .fpill{opacity:0;transform:translateX(-50%) scale(.4);
    transition:opacity .3s ease,transform .5s var(--e-bounce);transition-delay:var(--pd,0s)}
  .js .stage.settled .fpill{opacity:1;transform:translateX(-50%) scale(1)}
  .glowp{animation:glowIn 1.2s var(--e-out) .4s both}
  @keyframes glowIn{from{opacity:0}to{opacity:1}}

  /* theme cards: the flip's motion and the sheen (the flip STATE lives in base css
     so reduced-motion readers still reach the explainers, instantly) */
  .tc-inner{transition:transform .65s var(--e-out)}
  .tcard:hover .tc-sheen::before{transform:translateX(340%) skewX(-16deg);transition:transform .7s var(--e-out)}

  /* the two-ruler graph SCRUBS with scroll: --gp (0 to 1, set by js from the ruler's
     viewport position, reversible) fills the bars row by row in both directions, then
     draws the crossover rules and lands the payoff. --gp defaults to 1, so no-js and
     reduced motion read the finished graph */
  .js .rtrk i{transform:scaleX(min(1, max(0, calc(var(--gp,1) * 1.45 - var(--i,0) * 0.04))));transition:transform .1s linear}
  .js .rx .rule{transform:scaleX(min(1, max(0, calc(var(--gp,1) * 2.2 - 0.7))));transition:transform .1s linear}
  .js .rpay{opacity:min(1, max(0, calc(var(--gp,1) * 2.5 - 1.5)))}

  /* faq answers unfold on grid rows; the one animation an interaction owns */
  .aw{transition:grid-template-rows .45s var(--e-out)}

  /* the hero pins while the memojis blow out: the section carries 44svh of extra
     scroll, the content stays stuck under the nav until the scrub completes, and only
     then does the rest of the page begin to move. desktop only, js only */
  @media (min-width:921px){
    .js .hero{height:calc(100svh + 44svh)}
    .js .hero-sticky{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
  }
  /* mobile: the same pin as desktop, applied to the whole hero block — the page is
     held while the memojis explode, then hero and copy travel up together. no sheet,
     no overlay (that treatment read badly on a handset). the runway is longer than
     the scrub so the pills are on screen for a beat before the page releases */
  @media (max-width:920px){
    /* the stage gets its own tall pin wrapper and the copy sits strictly AFTER it, so
       the page is genuinely held while the memojis explode and nothing slides over
       anything. a sticky block taller than the screen only holds for its leftover
       range, which is why pinning the whole hero did not work */
    .js .stage-pin{display:block;order:-1;height:calc(100svh + 62svh)}
    .js .stage{position:sticky;top:60px;min-height:calc(100svh - 76px)}
  }

  .scroll-cue{animation:cueDrift 2.8s cubic-bezier(.37,0,.63,1) infinite}
  @keyframes cueDrift{
    0%,100%{transform:translate(-50%,0)}
    50%{transform:translate(-50%,5px)}
  }
  .scroll-cue svg{animation:cueBob 2.8s cubic-bezier(.37,0,.63,1) infinite}
  @keyframes cueBob{
    0%,100%{transform:translateY(0);opacity:.75}
    50%{transform:translateY(3px);opacity:1}
  }

  /* the press banner rolls forever; hover holds it still */
  .marq-track{animation:marq 130s linear infinite}
  @keyframes marq{to{transform:translateX(-50%)}}
  .marq:hover .marq-track{animation-play-state:paused}
}

/* ============ responsive ============ */
@media (max-width:920px){
  .hero-grid,.feat-grid,.fee-grid,.quiz-panel{grid-template-columns:minmax(0,1fr)}
  .feat.flip .feat-copy{order:0}
  .feat.flip .feat-media{order:0}
  .stage{margin-top:26px}
  .quiz-fig{margin-top:10px}
  .quiz-fig img{margin-bottom:calc(-1 * clamp(30px,5vw,56px))}
  .beats{font-size:clamp(2.4rem,10vw,3.6rem)}
}
@media (max-width:920px){
  /* MOBILE HERO: the phone and the blow-out ARE the first screen. the grid flips to
     a column with the stage on top, sized to fill the viewport under the nav; the
     copy follows. desktop is untouched */
  .hero-grid{display:flex;flex-direction:column;gap:18px}
  .stage{order:-1;min-height:calc(100svh - 150px);display:flex;flex-direction:column;justify-content:center}
  .stage .shot{width:min(360px,88%)}
  .hero-sticky{padding-top:20px}
  .strap{font-size:1.05rem}
  .hero-sub{font-size:1rem}
  /* floats pull in and shrink so translate(-50%) never reaches past the viewport;
     the blow vectors halve with the shorter travel */
  .f1{left:24%;top:19%;--bx:70px;--by:70px}
  .f2{left:76%;top:18%;--bx:-70px;--by:74px}
  .f3{left:77%;top:84%;--bx:-70px;--by:-74px}
  .f4{left:23%;top:85%;--bx:70px;--by:-70px}
  .f5{left:50%;top:12%;--bx:0px;--by:105px}
  /* the pills ride with the characters, so they shrink here too */
  .fpill{font-size:.78rem;padding:5px 11px;border-width:1.5px}
  .fpill small{font-size:.64rem;margin-left:3px}
}
@media (max-width:899px){
  /* the accent coding the desktop divider bars carry, as small pills under each figure */
  .stat::after{content:'';display:block;width:36px;height:5px;border-radius:999px;margin:12px auto 0}
  .stat:nth-child(1)::after{background:var(--coral)}
  .stat:nth-child(2)::after{background:var(--blue)}
  .stat:nth-child(3)::after{background:var(--lime)}
  .stat:nth-child(4)::after{background:var(--gold)}
  .stat:nth-child(5)::after{background:var(--purple)}
  .stat:nth-child(6)::after{display:none}
}
@media (max-width:640px){
  body{font-size:16px}
  /* MOBILE GRAPH: each balance stacks label-over-bars, tracks grow, figures sit
     under their bar; the inaam mark rides inline via padding, not a side gutter */
  .rrow{grid-template-columns:minmax(0,1fr);gap:8px;padding:12px 0}
  .rrow > .bal{text-align:left;font-weight:700;color:var(--ink)}
  .rline{grid-template-columns:minmax(0,1fr) auto;gap:10px}
  .rtrk{height:14px}
  .rfig{font-size:.8rem}
  .rline.p{padding-left:26px}
  .rmark{left:0;width:17px;height:17px}
  .rgrp{padding:14px 14px}
  .ruler-hd{gap:10px 18px}
  .ru-u{font-size:.78rem}
  .rx{font-size:.85rem;margin:14px 0}
  .rpay b{font-size:1rem}
  .logo svg{height:26px}
  .f1,.f4{width:78px}
  .f2,.f3{width:74px}
  .f5{width:66px}
  .f1{left:26%}
  .f4{left:25%}
  .f2{left:74%}
  .f3{left:75%}
  .fpill{font-size:.72rem;padding:4px 9px}
  .fpill small{font-size:.6rem}
  .stats-grid{gap:30px 14px}
  .cta-row{gap:14px}
  .cta-row .btn{width:100%}
}

/* ============ reduced motion: kill everything ============ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ============================================================================
   ext.css — the site-wide extension of the approved homepage system.

   _base.css is f-appfirst.html's stylesheet, VERBATIM and never hand-edited, so
   the approved homepage stays provably intact. Everything an interior page needs
   that the homepage never had is built here, in the same language: same tokens,
   same push-button depth, same lowercase display type, same five accents.

   Rules that hold in this file as everywhere else: five accents only, no new
   hexes except neutrals already in the token set, lowercase display headings,
   sentence-case body, transform/opacity motion inside no-preference, resting
   states as the base truth.
   ============================================================================ */

/* ============ the hidden attribute wins ============
   every interactive piece in this kit hides things by setting the `hidden`
   attribute from js: quiz cards, result panes, directory cards, empty states.
   the browser's own [hidden] rule is only `display:none` at the lowest
   specificity, so ANY component rule that sets display (and most of them set
   flex or grid) silently beats it and the element stays on screen. the
   directory filter looked completely dead for exactly this reason. one rule,
   once, rather than a patch per page. */
[hidden]{display:none !important}

/* ============ mobile navigation ============
   the homepage simply hid its links under 1000px, which is survivable for one
   page and not for eighty-six. a hamburger opens a full sitemap drawer. */
.nav-burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;border:1px solid var(--line);
  background:var(--white);cursor:pointer;flex:none;
}
.nav-burger:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.nav-burger span{position:relative;display:block;width:18px;height:2px;border-radius:2px;background:var(--ink)}
.nav-burger span::before,.nav-burger span::after{
  content:'';position:absolute;left:0;width:18px;height:2px;border-radius:2px;background:var(--ink);
}
.nav-burger span::before{top:-6px}
.nav-burger span::after{top:6px}
@media (min-width:1000px){.nav-burger{display:none}}

.drawer{
  position:fixed;inset:0;z-index:90;
  background:var(--white);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;pointer-events:none;
  overflow-y:auto;overscroll-behavior:contain;
}
.drawer.open{opacity:1;visibility:visible;pointer-events:auto}
.drawer-top{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:70px;border-bottom:1px solid var(--line);
}
.drawer-x{
  width:44px;height:44px;border-radius:12px;border:1px solid var(--line);
  background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;
}
.drawer-x:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.drawer-body{padding:26px 0 40px}
.drawer .drawer-h{
  font-family:var(--f-display);font-weight:600;font-size:.78rem;letter-spacing:.14em;
  color:var(--grey-500);margin:26px 0 8px;
}
.drawer .drawer-h:first-child{margin-top:0}
.drawer a{
  display:flex;align-items:center;gap:10px;
  font-family:var(--f-display);font-weight:500;font-size:1.08rem;color:var(--ink);
  text-decoration:none;padding:11px 0;border-bottom:1px solid var(--line);
}
.drawer .btn{width:100%;margin-top:28px;border-bottom:none}
body.locked{overflow:hidden}

/* ============ page hero ============
   every interior page opens the same way: kicker, one lowercase display line,
   a sentence-case standfirst. the accent variant paints the whole band. */
.phero{padding:clamp(44px,7vh,86px) 0 clamp(30px,5vh,52px)}
.phero .kicker{margin-bottom:16px}
.phero h1{font-size:clamp(2.2rem,5.4vw,3.9rem);line-height:1.06;letter-spacing:-.02em}
.phero .standfirst{
  margin-top:18px;max-width:54ch;color:var(--grey-700);
  font-size:clamp(1.02rem,1.3vw,1.16rem);
}
.phero .cta-row{margin-top:28px}
.phero-band{background:var(--band)}
.phero-grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,5vw,64px);align-items:center;
}
.phero-grid > *{min-width:0}
.phero-fig{display:flex;justify-content:center}
.phero-fig img{width:min(340px,86%);height:auto;filter:drop-shadow(0 20px 34px rgba(34,34,34,.16))}
@media (max-width:920px){
  .phero-grid{grid-template-columns:minmax(0,1fr)}
  .phero-fig img{width:min(240px,62%)}
}
/* the accent hero: a full-bleed colour panel, used by the five theme pages and
   anywhere a page owns an accent outright. --acc is set per page. */
.phero-acc{background:var(--acc,var(--purple));padding:clamp(52px,9vh,104px) 0 clamp(44px,7vh,84px)}
.phero-acc h1,.phero-acc .kicker,.phero-acc .standfirst{color:var(--white)}
.phero-acc .kicker{opacity:.92}
.phero-acc .standfirst{color:rgba(255,255,255,.93)}
.phero-acc.on-light h1,.phero-acc.on-light .standfirst,.phero-acc.on-light .kicker{color:#1B2010}
.phero-acc.on-light .standfirst{color:rgba(27,32,16,.86)}

/* ============ breadcrumbs ============ */
.crumbs{padding-top:18px;font-size:.84rem;color:var(--grey-500)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.crumbs a{color:var(--grey-500);text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover,.crumbs a:focus-visible{color:var(--ink);border-bottom-color:currentColor}
.crumbs li[aria-current]{color:var(--ink)}
.crumbs .sep{opacity:.5}

/* ============ section head ============ */
.shead{max-width:660px;margin-bottom:clamp(28px,4vh,44px)}
.shead.centre{margin-left:auto;margin-right:auto;text-align:center}
.shead h2{margin-top:12px}
.shead p{margin-top:14px;color:var(--grey-700)}
.sec{padding:clamp(44px,7vh,86px) 0}
.sec-band{background:var(--band)}
.sec-tight{padding:clamp(28px,4vh,52px) 0}

/* ============ prose: articles, legal, anything long-form ============
   measure capped near 68 characters, headings lowercase display, links purple.
   this is the one place body copy runs long, so it gets its own rhythm. */
.prose{max-width:68ch;color:var(--grey-700);font-size:1.05rem;line-height:1.78}
.prose > * + *{margin-top:1.15em}
.prose h2{
  font-size:clamp(1.5rem,3vw,2rem);line-height:1.18;color:var(--ink);
  margin-top:2.2em;scroll-margin-top:6rem;
}
.prose h3{font-size:clamp(1.18rem,2.1vw,1.4rem);line-height:1.25;color:var(--ink);margin-top:1.8em}
.prose h4{font-family:var(--f-display);font-weight:600;font-size:1.02rem;color:var(--ink);margin-top:1.6em}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--purple);text-decoration-thickness:2px}
.prose a:hover,.prose a:focus-visible{text-decoration-color:var(--ink)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.5em}
.prose li::marker{color:var(--grey-500)}
.prose blockquote{
  border-left:4px solid var(--purple);padding:4px 0 4px 20px;
  font-size:1.12rem;color:var(--ink);
}
.prose img{border-radius:var(--r-lg);margin-top:1.6em}
.prose figcaption{font-size:.86rem;color:var(--grey-500);margin-top:.6em}
.prose hr{border:none;border-top:1px solid var(--line);margin:2.4em 0}
.prose table{width:100%;border-collapse:collapse;font-size:.95rem}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.prose th{font-family:var(--f-display);font-weight:600;color:var(--ink)}
.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
  background:var(--band);padding:2px 6px;border-radius:6px;color:var(--ink);
}

/* the jargon term: a dashed underline that opens a plain-language note. hover on
   a mouse, tap on a phone, and it stays reachable by keyboard. */
.term{
  border-bottom:1.5px dashed var(--blue);cursor:help;color:var(--ink);font-weight:500;
  position:relative;
}
.term .tip{
  position:absolute;bottom:calc(100% + 9px);left:50%;
  /* --nudge is set by ext.js when the tip would hang off the screen edge */
  transform:translateX(calc(-50% + var(--nudge,0px))) translateY(4px);
  background:var(--ink);color:var(--white);
  font-family:var(--f-body);font-weight:400;font-size:.8rem;line-height:1.6;
  padding:11px 15px;border-radius:12px;width:min(260px,calc(100vw - 32px));
  opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s,transform .2s var(--e-out);
  z-index:60;pointer-events:none;box-shadow:0 12px 30px rgba(34,34,34,.24);
  text-align:left;
}
.term:hover .tip,.term:focus-visible .tip,.term.tip-open .tip{
  opacity:1;visibility:visible;
  transform:translateX(calc(-50% + var(--nudge,0px))) translateY(0);
}
.term:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:3px}

/* A tooltip inside a comparison table needs a different anchor. .ctable-wrap is
   a horizontal scroll container, so a 260px tip hanging out of a 140px cell is
   clipped by the wrapper instead of shown, and it pushes the cell's scrollWidth
   out at every viewport. Anchor the tip to the CELL and let it size to it. */
.ctable td,.ctable th{position:relative}
.ctable .term{position:static}
.ctable .term .tip{left:0;transform:translateY(4px);width:min(260px,100%)}
.ctable .term:hover .tip,.ctable .term:focus-visible .tip,
.ctable .term.tip-open .tip{transform:translateY(0)}

/* ============ article furniture ============ */
.art-head{padding:clamp(30px,5vh,56px) 0 clamp(20px,3vh,34px)}
.art-head h1{font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.1;max-width:20ch}
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:20px;font-size:.88rem;color:var(--grey-500)}
.art-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--line)}
.art-cat{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-display);font-weight:500;font-size:.82rem;color:var(--ink);
  background:var(--band);border-radius:var(--r-pill);padding:5px 13px;
}
.art-lede{margin-top:22px;max-width:60ch;font-size:clamp(1.08rem,1.5vw,1.25rem);line-height:1.6;color:var(--ink)}
.art-body{padding-bottom:clamp(40px,6vh,72px)}
.art-wrap{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:1000px){.art-wrap{grid-template-columns:minmax(0,1fr)}}
.art-aside{position:sticky;top:96px;font-size:.88rem}
@media (max-width:1000px){.art-aside{position:static}}
.art-toc h4,.art-toc .art-toc-h{font-family:var(--f-display);font-weight:600;font-size:.78rem;letter-spacing:.13em;color:var(--grey-500);margin-bottom:10px}
.art-toc a{display:block;color:var(--grey-700);text-decoration:none;padding:6px 0 6px 12px;border-left:2px solid var(--line);line-height:1.45}
.art-toc a:hover,.art-toc a:focus-visible{color:var(--ink);border-left-color:var(--purple)}
.art-toc a.on{color:var(--ink);border-left-color:var(--purple)}

/* related links, as pressable pills */
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.pill{
  --edge:rgba(34,34,34,.16);--lift:3px;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-display);font-weight:500;font-size:.9rem;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:8px 16px;text-decoration:none;
  box-shadow:0 var(--lift) 0 var(--edge);
  transition:transform .14s var(--e-out),box-shadow .14s var(--e-out);
}
.pill:active{transform:translateY(var(--lift));box-shadow:0 0 0 var(--edge)}
.pill:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .pill:hover{transform:translateY(var(--lift));box-shadow:0 0 0 var(--edge)}
}
.pill .kdot{width:7px;height:7px}

/* ============ card grids ============ */
.grid{display:grid;gap:clamp(16px,2.2vw,24px)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid > *{min-width:0}
@media (max-width:1000px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}
}

.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(20px,2.6vw,28px);display:flex;flex-direction:column;
  transition:transform .2s var(--e-out),box-shadow .2s var(--e-out),border-color .2s;
}
.card h3{font-size:1.15rem;line-height:1.25;margin-top:12px}
.card p{margin-top:10px;color:var(--grey-700);font-size:.98rem}
.card .link{margin-top:auto;padding-top:18px}
.card-ico{width:64px;height:64px;display:flex;align-items:center;justify-content:center}
.card-ico img{max-width:100%;max-height:100%;object-fit:contain}
a.card{text-decoration:none}
@media (hover:hover) and (pointer:fine){
  a.card:hover,.card-lift:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(34,34,34,.09);border-color:transparent}
}
a.card:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
/* the accent rule a card can wear along its top edge */
.card-acc{border-top:4px solid var(--acc,var(--purple))}

/* a numbered step card */
.step{position:relative;padding-top:8px}
.step-n{
  font-family:var(--f-display);font-weight:600;font-size:.8rem;letter-spacing:.1em;
  color:var(--white);background:var(--acc,var(--ink));
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}

/* ============ company card: the three-pillar screen, on a page ============ */
.co{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(20px,2.6vw,28px);
}
.co-logo{height:44px;display:flex;align-items:center;margin-bottom:14px}
.co-logo img{height:38px;width:auto;max-width:180px;object-fit:contain;mix-blend-mode:multiply}
.co-desc{font-size:.92rem;color:var(--grey-500)}
.co h4{
  font-family:var(--f-display);font-weight:600;font-size:.78rem;letter-spacing:.12em;
  color:var(--grey-500);margin-top:20px;
}
.co p{margin-top:8px;color:var(--grey-700);font-size:.96rem}
.co .mcap{font-size:.94rem}
.co .mcap strong{font-family:var(--f-display);color:var(--ink)}

/* ============ callouts ============ */
.callout{
  display:flex;gap:clamp(16px,2.4vw,26px);align-items:center;
  background:var(--band);border-radius:var(--r-lg);padding:clamp(20px,3vw,32px);
}
.callout-fig{
  font-family:var(--f-display);font-weight:600;line-height:1;
  font-size:clamp(2.1rem,4.4vw,3.2rem);color:var(--acc,var(--ink));flex:none;
}
.callout-lbl{color:var(--grey-700);font-size:.98rem}
@media (max-width:560px){.callout{flex-direction:column;align-items:flex-start;gap:10px}}

.insight{
  border-left:4px solid var(--acc,var(--purple));
  background:var(--band);border-radius:0 var(--r-md) var(--r-md) 0;
  padding:clamp(18px,2.6vw,26px) clamp(18px,2.6vw,28px);
}
.insight strong{
  display:block;font-family:var(--f-display);font-weight:600;font-size:1.02rem;
  color:var(--ink);margin-bottom:8px;
}
.insight p{color:var(--grey-700)}
.insight p + p{margin-top:10px}

/* the live figure a theme page opens with */
.livefig{text-align:center;padding:clamp(30px,5vh,52px) 0}
.livefig .kicker{justify-content:center;margin-bottom:12px}
.livefig-num{
  font-family:var(--f-display);font-weight:600;line-height:1;
  font-size:clamp(2.4rem,6vw,4rem);color:var(--acc,var(--ink));
}
.livefig-lbl{margin:16px auto 0;max-width:56ch;color:var(--grey-700)}
.livefig-src{margin-top:12px;font-size:.8rem;color:var(--grey-500);letter-spacing:.08em}

/* ============ comparison table ============ */
.ctable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white)}
.ctable{width:100%;border-collapse:collapse;min-width:640px;font-size:.96rem}
.ctable th,.ctable td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.ctable thead th{
  font-family:var(--f-display);font-weight:600;font-size:.95rem;color:var(--ink);
  background:var(--band);white-space:nowrap;
}
.ctable tbody th{font-family:var(--f-body);font-weight:500;color:var(--ink);width:38%}
.ctable td{color:var(--grey-700)}
.ctable .col-us{background:rgba(158,224,74,.09)}
.ctable thead .col-us{background:rgba(158,224,74,.2)}
.ctable tr:last-child th,.ctable tr:last-child td{border-bottom:none}
.tick{display:inline-flex;width:20px;height:20px;color:var(--ink);flex:none}
.ico-cross{display:inline-flex;width:18px;height:18px;color:var(--grey-500);flex:none}
/* NOT .cross: the approved homepage uses .cross for the fee calculator's
   crossover paragraph, and an 18px icon rule was squeezing that paragraph
   to 18px wide on every page that loads this stylesheet, the homepage
   included. Found 24 September 2026. */

/* ============ people ============ */
.person{text-align:center}
.person img{
  width:clamp(110px,14vw,150px);height:auto;margin:0 auto;
  filter:drop-shadow(0 14px 24px rgba(34,34,34,.14));
}
.person h3{font-size:1.1rem;margin-top:14px}
.person .role{font-size:.88rem;color:var(--grey-500);margin-top:4px}
.person p{margin-top:10px;color:var(--grey-700);font-size:.94rem}

/* ============ cta band ============ */
.band-cta{padding:clamp(40px,7vh,84px) 0}
.cta-panel{
  background:var(--acc,var(--purple));border-radius:var(--r-xl);
  padding:clamp(32px,5vw,60px);text-align:center;
}
.cta-panel h2{color:var(--white);font-size:clamp(1.8rem,4vw,2.8rem)}
.cta-panel p{margin:14px auto 0;max-width:46ch;color:rgba(255,255,255,.92)}
.cta-panel .cta-row{justify-content:center;margin-top:28px}
.cta-panel.on-light h2{color:#1B2010}
.cta-panel.on-light p{color:rgba(27,32,16,.86)}

/* ============ partner lockup ============
   the one place a colour outside the five may appear: a partner's own mark, on a
   band that names them. --partner is set per lander and never leaks into body ui. */
.lockup{
  display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,34px);
  flex-wrap:wrap;padding:clamp(18px,3vh,30px) 0;
}
.lockup img{height:clamp(30px,4vw,46px);width:auto;object-fit:contain}
.lockup .x{font-family:var(--f-display);font-weight:500;font-size:1.3rem;color:var(--grey-500)}
.offer{
  background:var(--white);border:2px solid var(--ink);border-radius:var(--r-xl);
  padding:clamp(24px,3.6vw,40px);text-align:center;max-width:620px;margin:0 auto;
  box-shadow:0 8px 0 var(--ink);
}
.offer-tag{
  display:inline-flex;font-family:var(--f-display);font-weight:600;font-size:.78rem;
  letter-spacing:.12em;background:var(--lime);color:#1B2010;
  border-radius:var(--r-pill);padding:5px 14px;
}
.offer h2{margin-top:16px;font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.12}
.offer p{margin-top:14px;color:var(--grey-700)}
.offer .btn{margin-top:24px}
.offer .terms{margin-top:16px;font-size:.8rem;color:var(--grey-500);line-height:1.6}

/* ============ form ============ */
.form{display:grid;gap:12px;text-align:left;max-width:460px;margin:26px auto 0}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}
.form input,.form select,.form textarea{
  width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;
  font-family:var(--f-body);font-size:.95rem;color:var(--ink);background:var(--white);
  outline:none;transition:border-color .2s;
}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{border-color:var(--purple)}
.form textarea{min-height:120px;resize:vertical}
.form label{font-size:.86rem;color:var(--grey-700);font-weight:500}
.form .btn{width:100%}
.form-note{font-size:.78rem;color:var(--grey-500);margin-top:4px}

/* ============ directory ============ */
.dir-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.dir-f{
  font-family:var(--f-display);font-weight:500;font-size:.9rem;color:var(--grey-700);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:8px 16px;cursor:pointer;transition:background .18s,color .18s,border-color .18s;
}
.dir-f:hover{color:var(--ink);border-color:var(--ink)}
.dir-f.on{background:var(--ink);color:var(--white);border-color:var(--ink)}
.dir-f:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.dir-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px;display:flex;flex-direction:column;gap:10px;
}
.dir-card .co-logo{margin-bottom:0}
.dir-card h3{font-size:1.02rem}
.dir-card p{font-size:.92rem;color:var(--grey-700);margin:0}
.dir-tag{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;margin-top:auto;
  font-size:.78rem;color:var(--grey-700);background:var(--band);
  border-radius:var(--r-pill);padding:4px 11px;
}
.dir-empty{padding:40px 0;text-align:center;color:var(--grey-500)}

/* ============ quiz ============ */
.qz{max-width:680px;margin:0 auto}
/* before the engine runs, only the first question shows: no flash of all eight */
.js #quiz-engine:not(.qz-ready) .qz-card ~ .qz-card{display:none}
.qz-prog{height:8px;border-radius:999px;background:var(--band);border:1px solid var(--line);overflow:hidden;margin-bottom:26px}
.qz-prog i{display:block;height:100%;background:var(--purple);border-radius:999px;transition:width .4s var(--e-out)}
.qz-step{font-size:.84rem;color:var(--grey-500);margin-bottom:10px}
.qz-q{font-family:var(--f-display);font-weight:600;font-size:clamp(1.4rem,3vw,2rem);line-height:1.2;color:var(--ink)}
.qz-opts{display:grid;gap:12px;margin-top:26px}
.qz-opt{
  --edge:rgba(34,34,34,.14);--lift:4px;
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  font-family:var(--f-body);font-size:1rem;color:var(--ink);
  background:var(--white);border:1.5px solid var(--line);border-radius:16px;
  padding:16px 18px;cursor:pointer;
  box-shadow:0 var(--lift) 0 var(--edge);
  transition:transform .14s var(--e-out),box-shadow .14s var(--e-out),border-color .18s;
}
.qz-opt:active,.qz-opt.picked{transform:translateY(var(--lift));box-shadow:0 0 0 var(--edge)}
.qz-opt.picked{border-color:var(--purple)}
.qz-opt:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .qz-opt:hover{transform:translateY(var(--lift));box-shadow:0 0 0 var(--edge);border-color:var(--ink)}
}
.qz-key{
  font-family:var(--f-display);font-weight:600;font-size:.9rem;color:var(--grey-500);
  width:28px;height:28px;border-radius:8px;background:var(--band);flex:none;
  display:flex;align-items:center;justify-content:center;
}
.qz-nav{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:26px}
.qz-result{text-align:center}
/* the direct child only: a result pane can carry other art (character twins, a
   theme thumb) that must keep its own size */
.qz-result > img{width:min(220px,58%);margin:0 auto 20px;filter:drop-shadow(0 18px 30px rgba(34,34,34,.16))}

/* ============ timeline ============ */
.tl{position:relative;padding-left:32px}
.tl::before{content:'';position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-item{position:relative;padding-bottom:28px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:'';position:absolute;left:-32px;top:6px;width:20px;height:20px;border-radius:50%;
  background:var(--white);border:3px solid var(--acc,var(--purple));
}
.tl-when{font-family:var(--f-display);font-weight:600;font-size:.84rem;color:var(--grey-500)}
.tl-item h3{font-size:1.08rem;margin-top:4px}
.tl-item p{margin-top:8px;color:var(--grey-700);font-size:.96rem}

/* ============ notice ============ */
.notice{
  background:rgba(195,133,248,.08);border-radius:16px;
  padding:1.3rem 1.4rem;font-size:.82rem;line-height:1.8;color:var(--grey-700);
}
.notice strong{color:var(--ink)}
.notice a{color:var(--purple);text-decoration:underline}
.notice + .notice{margin-top:14px}

/* ============ index list (learning lab, fine print) ============ */
.ix{display:grid;gap:0;border-top:1px solid var(--line)}
.ix a{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:baseline;
  padding:20px 4px;border-bottom:1px solid var(--line);text-decoration:none;
  transition:background .18s,padding-left .18s var(--e-out);
}
.ix a:hover,.ix a:focus-visible{background:var(--band);padding-left:14px}
.ix a:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.ix h3{font-size:1.1rem;line-height:1.3}
.ix .ix-sub{margin-top:6px;color:var(--grey-700);font-size:.94rem;max-width:62ch}
.ix .ix-meta{font-size:.82rem;color:var(--grey-500);white-space:nowrap}
@media (max-width:640px){
  .ix a{grid-template-columns:minmax(0,1fr)}
  .ix .ix-meta{margin-top:8px}
}

/* ============ small helpers ============ */
.centre{text-align:center}
.mt-s{margin-top:16px}
.mt-m{margin-top:26px}
.mt-l{margin-top:clamp(30px,5vh,48px)}
.measure{max-width:62ch}
.acc-coral{--acc:var(--coral)}
.acc-blue{--acc:var(--blue)}
.acc-lime{--acc:var(--lime)}
.acc-purple{--acc:var(--purple)}
.acc-gold{--acc:var(--gold)}
.acc-ink{--acc:var(--ink)}

/* ============ the mockup marker ============
   on the homepage this pill sat over the hero and bothered nobody. across a site
   of long reading pages it parks itself permanently on top of body text, so here
   it shrinks, softens, and stops intercepting the pointer. */
a.tagpill{text-decoration:none;color:inherit}
a.tagpill:hover{opacity:1;transform:translateY(-2px)}
.tagpill{
  pointer-events:none;opacity:.88;
  font-size:.72rem;padding:6px 13px;
  left:12px;bottom:12px;
}
@media (max-width:640px){
  .tagpill{font-size:.64rem;padding:5px 10px;opacity:.75}
}

/* ============ motion for the new pieces ============ */
@media (prefers-reduced-motion: no-preference){
  .drawer{transition:opacity .22s var(--e-out),visibility .22s}
  .drawer-body > *{transition:transform .3s var(--e-out),opacity .3s var(--e-out)}
  .js .drawer:not(.open) .drawer-body > *{opacity:0;transform:translateY(10px)}
  .qz-card,.qz-out{transition:opacity .22s var(--e-out),transform .22s var(--e-out)}
  .qz-card.out,.qz-out.out{opacity:0;transform:translateY(8px)}
}

/* ============================================================================
   MOBILE FIRST PASS
   The homepage got bespoke mobile work. These are the same eyes on every other
   template. Measured, not guessed: on a 390x844 phone the gap between the hero
   and the first real content was 154px, about eighteen percent of the viewport
   spent on nothing, because the hero's bottom padding, the section's top padding
   and the section heading's margin all stack. Desktop wants that air. A phone
   does not.
   ============================================================================ */
@media (max-width:760px){
  /* vertical rhythm, compressed */
  .phero{padding-top:clamp(26px,4vh,40px);padding-bottom:18px}
  .phero-acc{padding-top:clamp(32px,5vh,52px);padding-bottom:clamp(26px,4vh,40px)}
  .sec{padding:clamp(30px,4vh,44px) 0}
  .sec-tight{padding:clamp(22px,3vh,32px) 0}
  .shead{margin-bottom:22px}
  .band-cta{padding:clamp(28px,4vh,44px) 0}
  .art-head{padding:clamp(20px,3vh,32px) 0 14px}
  .art-body{padding-bottom:clamp(28px,4vh,44px)}

  /* the standfirst and the hero note are doing the same job as the h1 here, so
     they get the tighter measure that goes with the smaller type */
  .phero .standfirst{margin-top:14px;max-width:none}
  .phero .cta-row{margin-top:22px}

  /* the hero figure carried its own transparent padding on top of the layout's:
     a 1024px square rendered at 217px, with air above and below it */
  .phero-fig{margin-top:8px}
  .phero-fig img{width:min(190px,52%)}

  /* cards and grids sit closer together */
  .grid{gap:14px}
  .card{padding:20px 18px}
  .cta-panel{padding:28px 22px}
  .callout{padding:20px 18px;gap:12px}
  .insight{padding:18px 18px}

  /* prose: slightly tighter leading, and headings that do not shout */
  .prose{font-size:1.02rem;line-height:1.72}
  .prose h2{margin-top:1.8em}
  .prose h3{margin-top:1.5em}

  /* index rows stack rather than squeeze */
  .ix a{padding:16px 2px}
  .ix a:hover,.ix a:focus-visible{padding-left:2px}

  /* one tap target rule: nothing interactive under 44px, per WCAG 2.5.8 */
  .pill,.dir-f,.tn,.qz-key{min-height:44px}
  .pill,.dir-f{display:inline-flex;align-items:center}
}

@media (max-width:480px){
  /* the very small end: iPhone SE and friends */
  .phero h1{font-size:clamp(1.95rem,8.4vw,2.5rem)}
  .prose h2{font-size:clamp(1.3rem,6vw,1.6rem)}
  .cta-row .btn{width:100%}
  .offer{padding:24px 18px;box-shadow:0 6px 0 var(--ink)}
  .lockup{gap:14px}
  .lockup img{height:28px}
}

/* the footer column labels are h2 now, so they keep the document outline intact.
   _base.css styles .f-col h4 and must not be hand-edited, so the same rule is
   restated here for the element that actually ships. */
.f-col h2{
  font-family:var(--f-display);font-weight:500;font-size:.95rem;
  color:var(--white);margin-bottom:10px;letter-spacing:0;
}

/* the contents rail's label is a navigation label, not a section of the
   document. As an h4 it jumped the outline from h2 on twenty-five article
   pages, the same fault the footer had. */
.art-toc .art-toc-h{margin:0 0 10px}

/* ============ the subject's mark on a fine print article ============ */
/* the pill sits above the mark (Arj, 28 Sep 2026), so the mark takes its own line */
.brandmark{
  display:flex;width:fit-content;align-items:center;justify-content:center;
  min-width:64px;height:64px;padding:0 16px;margin:16px 0 18px;
  background:var(--band);border:1px solid var(--line);border-radius:18px;
}
.brandmark img{
  height:34px;width:auto;display:block;
  /* the marks ship black; this keeps them on the page's ink rather than a
     second, slightly different black */
  filter:brightness(0) saturate(100%);opacity:.86;
}
.brandmark .bm-word{
  font-family:var(--f-display);font-weight:600;font-size:1.15rem;
  letter-spacing:-.01em;color:var(--ink);white-space:nowrap;
}
@media (max-width:640px){
  .brandmark{min-width:54px;height:54px;padding:0 13px;margin:12px 0 14px}
  .brandmark img{height:28px}
  .brandmark .bm-word{font-size:1rem}
}

/* ============ author box ============
   Closes an article with who wrote it. A named, credentialed author is the
   single biggest trust signal on money content, for a reader and for a search
   engine weighing YMYL material. */
.authorbox{
  display:flex;gap:clamp(16px,2.4vw,22px);align-items:flex-start;
  background:var(--band);border-radius:var(--r-lg);
  padding:clamp(20px,2.8vw,28px);margin-top:clamp(30px,5vh,44px);
}
.authorbox img{
  width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid var(--white);
}
.ab-name{font-family:var(--f-display);font-weight:600;font-size:1.06rem;color:var(--ink)}
.ab-name span{display:block;font-weight:500;font-size:.86rem;color:var(--grey-500);margin-top:2px}
.ab-bio{margin-top:10px;color:var(--grey-700);font-size:.96rem;line-height:1.7}
.authorbox .link{margin-top:12px;font-size:.95rem}
@media (max-width:560px){
  .authorbox{flex-direction:column;gap:14px}
  .authorbox img{width:60px;height:60px}
}

/* ============================================================================
   ABOUT PAGE FURNITURE
   A horizontal timeline, the impact loop, a framed portrait and video cards.
   Every animation sits inside no-preference and every resting state is the
   base truth, so none of this depends on motion to be readable.
   ============================================================================ */

/* ---- the card highlight comes off ----
   The coloured rule across the top of a card read as decoration applied by a
   machine rather than a decision. The accent already lives in the kicker dot,
   which is the pattern the rest of the site uses. One accent per card, not two. */
.card-acc{border-top:1px solid var(--line)}
.grid + .grid,.shead + .grid,.prose + .grid{margin-top:clamp(28px,4vh,44px)}
.card{padding:clamp(24px,3vw,32px)}
.card h3{margin-top:14px}
.card p{margin-top:12px}
.card .kicker{margin-bottom:4px}

/* ---- portrait: circular, like every other face on the site ---- */
.portrait{
  width:clamp(150px,20vw,200px);height:clamp(150px,20vw,200px);
  border-radius:50%;overflow:hidden;flex:none;
  border:4px solid var(--white);
  box-shadow:0 0 0 2px var(--line),0 18px 40px rgba(34,34,34,.14);
  background:var(--band);
}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
.meet{display:flex;gap:clamp(24px,4vw,44px);align-items:flex-start}
.meet > div{min-width:0}
@media (max-width:760px){
  .meet{flex-direction:column;align-items:center;text-align:center}
  .meet .link{justify-content:center}
}

/* ---- horizontal timeline ---- */
.htl-wrap{position:relative;margin-top:clamp(26px,4vh,40px)}
.htl{
  display:flex;gap:0;overflow-x:auto;scroll-snap-type:x proximity;
  padding:0 0 22px;scrollbar-width:thin;
  margin-left:calc(-1 * clamp(20px,5vw,56px));
  margin-right:calc(-1 * clamp(20px,5vw,56px));
  padding-left:clamp(20px,5vw,56px);padding-right:clamp(20px,5vw,56px);
}
.htl-stop{
  flex:0 0 252px;scroll-snap-align:start;position:relative;
  padding:0 20px 0 0;
}
/* the rail runs behind every stop, and the marker sits ON it */
.htl-stop::before{
  /* the rail must sit on the dots, and the dots now sit under a 96px figure.
     One variable so the two can never drift apart again. */
  content:'';position:absolute;left:0;right:0;top:var(--rail,124px);height:2px;
  background:var(--line);
}
.htl-stop:first-child::before{left:50%}
.htl-stop:last-child::before{right:50%}
.htl-dot{
  position:relative;z-index:1;width:32px;height:32px;border-radius:50%;
  background:var(--white);border:3px solid var(--acc,var(--purple));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-weight:600;font-size:.76rem;color:var(--ink);
}
.htl-stop h3{font-size:1.02rem;line-height:1.28;margin-top:16px}
.htl-stop p{margin-top:8px;color:var(--grey-700);font-size:.92rem;line-height:1.62}
.htl-stop.is-now .htl-dot{background:var(--acc,var(--purple));color:var(--white)}
.htl-stop.is-now h3{color:var(--ink)}
.htl-hint{
  display:flex;align-items:center;gap:8px;margin-top:6px;
  font-size:.84rem;color:var(--grey-500);
}
@media (max-width:640px){.htl-stop{flex:0 0 212px}}

/* ---- the inaam impact loop ---- */
.loop{
  position:relative;max-width:660px;margin:clamp(30px,5vh,48px) auto 0;
  aspect-ratio:1;
}
.loop-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.loop-ring circle{
  fill:none;stroke:var(--line);stroke-width:2;
}
.loop-ring .loop-run{
  stroke:var(--purple);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:56 647.72;
}
.loop-node{
  position:absolute;width:32%;transform:translate(-50%,-50%);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(14px,2vw,20px);text-align:center;
  box-shadow:0 12px 30px rgba(34,34,34,.08);
}
.loop-node .ln-n{
  width:30px;height:30px;border-radius:50%;margin:0 auto 10px;
  background:var(--acc,var(--purple));color:var(--white);
  font-family:var(--f-display);font-weight:600;font-size:.8rem;
  display:flex;align-items:center;justify-content:center;
}
.loop-node h3{font-size:1.02rem;line-height:1.25}
.loop-node p{margin-top:7px;color:var(--grey-700);font-size:.88rem;line-height:1.55}
/* the ring has r=108 in a 320 viewBox, so its path sits at 33.75% from the
   centre. The nodes sit on that path, and at 32% wide their outer edges land
   just inside the box instead of hanging off it. */
.loop-n1{left:50%;top:16.25%}
.loop-n2{left:83.75%;top:50%}
.loop-n3{left:50%;top:83.75%}
.loop-n4{left:16.25%;top:50%}
.loop-mid{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:38%;text-align:center;
}
.loop-mid .lm-t{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1rem,2.2vw,1.3rem);line-height:1.15;color:var(--ink);
}
.loop-mid .lm-s{margin-top:6px;font-size:.82rem;color:var(--grey-500)}
/* below the ring breakpoint it becomes an honest vertical list */
@media (max-width:820px){
  .loop{aspect-ratio:auto;display:grid;gap:14px;max-width:520px}
  .loop-ring,.loop-mid{display:none}
  /* inset:auto is load-bearing. The nodes carry ring coordinates
     (.loop-n2{left:83.75%} and so on) for the desktop circle. `position:static`
     alone neutralises them, but the connector rule below sets the 2nd, 3rd and
     4th node back to `position:relative`, which makes those coordinates live
     again and cascades the cards off the right of a phone screen by up to
     298px. Clearing the offsets here means the connector can have its
     positioning context without dragging the ring layout back in. */
  .loop-node{position:static;inset:auto;width:auto;transform:none;text-align:left}
  .loop-node .ln-n{margin:0 0 10px}
  .loop-node + .loop-node{position:relative;inset:auto}
  .loop-node + .loop-node::before{
    content:'';position:absolute;left:26px;top:-14px;width:2px;height:14px;
    background:var(--line);
  }
}
.loop-note{margin:clamp(22px,3vh,32px) auto 0;max-width:60ch;text-align:center;color:var(--grey-700)}

/* ---- video cards with real thumbnails ---- */
.vid{
  display:block;text-decoration:none;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .2s var(--e-out),box-shadow .2s var(--e-out);
}
.vid-thumb{position:relative;aspect-ratio:16/9;background:var(--band);overflow:hidden}
.vid-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.vid-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  transition:transform .2s var(--e-bounce);
}
.vid-play svg{margin-left:3px;color:var(--ink)}
.vid-body{padding:18px 20px 22px}
.vid-body h3{font-size:1.04rem;line-height:1.3}
.vid-body .vid-src{margin-top:7px;font-size:.88rem;color:var(--grey-500)}
.vid:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .vid:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(34,34,34,.12)}
  .vid:hover .vid-play{transform:translate(-50%,-50%) scale(1.1)}
}

/* ---- the vision line ---- */
.vision{text-align:center;padding:clamp(44px,8vh,92px) 0}
.vision-line{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(2.1rem,6vw,4.2rem);line-height:1.05;letter-spacing:-.02em;
  color:var(--ink);max-width:16ch;margin:0 auto;
}
.vision-line em{font-style:normal;color:var(--purple)}
.vision .kicker{justify-content:center;margin-bottom:18px}
.vision-sub{margin:22px auto 0;max-width:52ch;color:var(--grey-700);font-size:1.06rem}

/* ---- a button that does not vanish into its own panel ---- */
.cta-panel .btn-purple{background:var(--white);color:var(--ink);--edge:rgba(0,0,0,.30)}

@media (prefers-reduced-motion: no-preference){
  .js .htl-stop{opacity:0;transform:translateY(14px);
    transition:opacity .5s var(--e-out),transform .5s var(--e-out);transition-delay:var(--d,0s)}
  .js .htl-stop.in{opacity:1;transform:none}
  .loop-ring .loop-run{animation:loopRun 7s linear infinite}
  @keyframes loopRun{to{stroke-dashoffset:-703.72}}
  .js .loop-node{opacity:0;transform:translate(-50%,-50%) scale(.94);
    transition:opacity .5s var(--e-out),transform .5s var(--e-bounce);transition-delay:var(--d,0s)}
  .js .loop-node.in{opacity:1;transform:translate(-50%,-50%) scale(1)}
  @media (max-width:820px){
    .js .loop-node{transform:translateY(12px)}
    .js .loop-node.in{transform:none}
  }
}

/* ============ vertical rhythm between stacked sections ============
   Adjacent sections were each paying full padding, so a section end and the
   next section start stacked 126px of nothing between two lines of type. The
   page read as a series of islands with voids between them. Where two padded
   sections meet, the second one gives up its top padding. */
.sec + .sec,.sec + .vision,.vision + .quote,.quote + .sec,
.sec + .band-cta,.vision + .sec,.sec-band + .sec{padding-top:clamp(20px,3vh,36px)}
.vision{padding-bottom:clamp(30px,5vh,56px)}
.quote{padding-top:clamp(30px,5vh,56px) !important}

/* the timeline sets its row height from the tallest stop, so a short stop
   leaves dead space under it. Top-align them and let the rail do the work. */
.htl{align-items:flex-start}
.htl-hint{margin-top:2px}

/* ============ callouts used as a SET ============
   A callout was built for one big number. Four of them side by side, where the
   "figure" is sometimes a number and sometimes a word like TEDx, rendered at
   wildly different widths with the labels starting in four different places.
   Give the figure column a floor and a ceiling so the set reads as a set. */
.grid .callout{background:var(--white);border:1px solid var(--line);align-items:flex-start}
.grid .callout-fig{
  min-width:5.2ch;font-size:clamp(1.5rem,2.6vw,2.1rem);
  line-height:1.05;padding-top:2px;
}
@media (max-width:560px){
  .grid .callout{flex-direction:row;align-items:flex-start;gap:14px}
  .grid .callout-fig{min-width:4.4ch;font-size:1.4rem}
}
/* the timeline hint should sit with the timeline, not float below it */
.htl{padding-bottom:10px}
.htl-wrap + *{margin-top:clamp(24px,3.5vh,40px)}

/* ============ about page, round two ============ */

/* cards read as cards: a border in their own accent, and a shadow that lifts
   them off the ground. The earlier top-only rule was decoration; this is the
   edge of an object. */
.card-acc{
  border:2px solid color-mix(in srgb,var(--acc,var(--purple)) 55%,transparent);
  box-shadow:0 10px 26px rgba(34,34,34,.07);
}
@supports not (color: color-mix(in srgb,red 50%,transparent)){
  .card-acc{border:2px solid var(--line)}
}
@media (hover:hover) and (pointer:fine){
  .card-acc:hover{box-shadow:0 18px 40px rgba(34,34,34,.12)}
}

/* the prose column had a third of the row empty beside it. It shares the row
   with a figure now, so the measure is a choice rather than a leftover. */
.split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.44fr);
  gap:clamp(28px,5vw,64px);align-items:center;
}
.split > *{min-width:0}
.split-fig{display:flex;justify-content:center}
.split-fig img{width:min(300px,84%);filter:drop-shadow(0 18px 34px rgba(34,34,34,.14))}
@media (max-width:920px){
  .split{grid-template-columns:minmax(0,1fr)}
  .split-fig img{width:min(200px,54%)}
}

/* timeline: each stop carries its own character and its date */
.htl-fig{
  display:flex;align-items:flex-end;justify-content:flex-start;
  height:96px;margin-bottom:12px;
}
/* figure 96 + margin 12 + half the 32px dot = 124 */
.htl-stop{--rail:124px}
.htl-fig img{max-height:100%;width:auto;max-width:92px;object-fit:contain}
.htl-when{
  display:block;margin-top:10px;min-height:1.1em;
  font-family:var(--f-display);font-weight:600;font-size:.8rem;
  color:var(--grey-500);letter-spacing:.02em;
}
.htl-stop h3{margin-top:12px}
.htl-nav{display:flex;gap:12px;margin-top:16px}
.htl-nav .tn{width:40px;height:40px}

/* loop nodes get a face */
.ln-fig{display:flex;justify-content:center;height:64px;margin-bottom:6px}
.ln-fig img{max-height:100%;width:auto;max-width:64px;object-fit:contain}
.loop-node .ln-n{margin-top:2px}
@media (max-width:820px){
  .loop-node{display:grid;grid-template-columns:56px minmax(0,1fr);
    gap:14px;align-items:start}
  .ln-fig{height:56px;margin:0;grid-row:span 3}
  .ln-fig img{max-width:56px}
  .loop-node .ln-n{margin:0 0 6px}
}

/* a line under each video saying what it is */
.vid-desc{
  display:block;margin-top:9px;color:var(--grey-700);
  font-size:.92rem;line-height:1.6;
}
.vid-body .vid-src{margin-top:10px;display:block}

@media (max-width:640px){
  .htl-fig{height:74px}
  .htl-fig img{max-width:72px}
  .htl-stop{--rail:102px}
}

/* cards need air between them now they have real borders: two bordered edges
   20px apart read as one seam rather than two cards. */
.grid{gap:clamp(20px,2.6vw,30px)}
@media (max-width:760px){.grid{gap:18px}}
/* a wordmark in a card icon slot is a logo, not an illustration: let it use the
   width it needs instead of being squeezed into a 64px square. */
.card-ico img[src$=".svg"]{max-height:44px;width:auto;max-width:none}

/* ============ about page, round three ============ */

/* THE VIDEO CARD BUG: .vid-thumb and .vid-body are <span>s, and a span is
   inline, so aspect-ratio, width and height were all silently ignored. The
   thumbnail rendered at natural size, cropped the subject out, and pushed the
   description off the card. Elements inside an <a> still need a display. */
.vid-thumb,.vid-body,.vid-play{display:block}
.vid-play{display:flex}
/* show the whole frame. A 16:9 thumbnail cropped to fill is how you cut the
   person out of their own talk. */
.vid-thumb{aspect-ratio:16/9;background:#111}
.vid-thumb img{object-fit:contain}

/* the prose and the tiles under it had run together again */
.split + .grid,.prose + .grid{margin-top:clamp(34px,5vh,52px)}
.split{margin-bottom:clamp(10px,2vh,20px)}

/* timeline arrows belong beside the rail, not stacked underneath it */
.htl-wrap{position:relative;padding:0 0 4px}
.htl-nav{
  /* out into the gutter, clear of the first and last markers. At left:0 the
     arrow sat straight on top of stop 01's dot. The offset scales with the
     wrap's own padding so it never leaves the viewport on a narrow screen. */
  position:absolute;top:var(--rail,124px);
  left:calc(-1 * clamp(30px,3.2vw,52px));
  right:calc(-1 * clamp(30px,3.2vw,52px));
  transform:translateY(-50%);
  display:flex;justify-content:space-between;pointer-events:none;
  margin:0;z-index:3;
}
.htl-nav .tn{pointer-events:auto;box-shadow:0 4px 0 rgba(0,0,0,.3),0 0 0 6px var(--band)}
@media (max-width:760px){
  .htl-nav{position:static;transform:none;justify-content:flex-start;gap:12px;margin-top:14px}
  .htl-nav .tn{box-shadow:0 4px 0 rgba(0,0,0,.3)}
}

/* the loop: a bigger ring, wider cards, and room under the bottom one so it
   stops sitting on top of the line that follows it */
.loop{max-width:820px;margin-bottom:clamp(30px,5vh,56px)}
.loop-node{width:34%;padding:clamp(16px,2.2vw,22px)}
.loop-n1{left:50%;top:15%}
.loop-n2{left:85%;top:50%}
.loop-n3{left:50%;top:85%}
.loop-n4{left:15%;top:50%}
.loop-mid{width:34%}
.loop-note{margin-top:clamp(26px,4vh,40px);position:relative;z-index:1}
@media (max-width:820px){
  .loop{margin-bottom:clamp(20px,3vh,32px)}
  .loop-node{width:auto;padding:clamp(16px,2.6vw,22px)}
}

/* a wordmark in a card slot should read at the size of a logo */
.card-ico:has(img[src$=".svg"]){width:auto;height:auto}
.card-ico img[src$=".svg"]{max-height:62px;width:auto;max-width:200px}
.card-ico img[src*="saari"]{max-height:58px;width:auto;max-width:200px}

/* ============ about page, round four ============ */

/* one icon box for all three cards, whatever sits in it.
   A memoji, a red wordmark and a colour logo were rendering at three different
   sizes and three different alignments, so the row read as three unrelated
   cards. Same box, same height, all centred. */
.grid-3 .card-ico,.grid-4 .card-ico{
  width:100%;height:86px;display:flex;align-items:center;justify-content:center;
}
.grid-3 .card-ico img,.grid-4 .card-ico img{
  max-height:100%;width:auto;max-width:190px;object-fit:contain;
}
/* a wordmark carries more visual weight than an illustration at equal height,
   so it sits a touch smaller rather than shouting over its neighbours */
.grid-3 .card-ico img[src*="tedx"]{max-height:52px;max-width:150px}
.grid-3 .card-ico img[src*="saari"]{max-height:66px;max-width:180px}
.grid-3 .card .kicker,.grid-4 .card .kicker{justify-content:flex-start}

@media (prefers-reduced-motion: no-preference){
  /* the pulse crosses each node in turn, so each node answers as it passes.
     The ring animation is 7s, and the four nodes sit at the quarter points,
     so each pop is the same keyframe offset by a quarter of the loop. */
  /* Each node answers as the pulse touches it.
     Two things had to be true for this to line up, and neither was:
     1. the dash cycle must equal the circumference, or the pulse drifts ~24
        units every loop and nothing can stay in sync;
     2. the VISIBLE dash spans 56 units, so its centre trails the offset by 28.
        The delays below are computed from that geometry, not guessed.
     r=112, C=703.72, dash=56, duration=7s. */
  .loop-node{animation:nodePop 7s linear infinite}
  .loop-n1{animation-delay:-0.28s}
  .loop-n2{animation-delay:-5.53s}
  .loop-n3{animation-delay:-3.78s}
  .loop-n4{animation-delay:-2.03s}
  /* the peak sits at 0%, which is the instant the pulse arrives, then settles */
  @keyframes nodePop{
    0%,100%{
      transform:translate(-50%,-50%) scale(1.05);
      box-shadow:0 20px 44px rgba(34,34,34,.17);
    }
    9%,91%{
      transform:translate(-50%,-50%) scale(1);
      box-shadow:0 12px 30px rgba(34,34,34,.08);
    }
  }
  /* the pop must not fight the reveal: a node only starts pulsing once it is in */
  .js .loop-node:not(.in){animation:none}
  @media (max-width:820px){
    .loop-node,.loop-n1,.loop-n2,.loop-n3,.loop-n4{animation:none}
  }
}

/* ============ five in a row of three: a downward pyramid ============
   Arj, 28 Sep 2026: any five blocks in a three-column grid sit three over two,
   the two centred, for symmetry. Applies site-wide. */
.grid-3:has(> :nth-child(5):last-child){grid-template-columns:repeat(6,minmax(0,1fr))}
.grid-3:has(> :nth-child(5):last-child) > *{grid-column:span 2}
.grid-3:has(> :nth-child(5):last-child) > :nth-child(4){grid-column:2 / span 2}
.grid-3:has(> :nth-child(5):last-child) > :nth-child(5){grid-column:4 / span 2}
@media (max-width:980px){
  .grid-3:has(> :nth-child(5):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3:has(> :nth-child(5):last-child) > *,.grid-3:has(> :nth-child(5):last-child) > :nth-child(4){grid-column:auto}
  .grid-3:has(> :nth-child(5):last-child) > :nth-child(5){grid-column:1 / -1;justify-self:center;width:calc(50% - 12px)}
}
@media (max-width:640px){
  .grid-3:has(> :nth-child(5):last-child){grid-template-columns:minmax(0,1fr)}
  .grid-3:has(> :nth-child(5):last-child) > :nth-child(5){grid-column:auto;width:auto}
}

/* step cards with an object (kit step(icon=...)): the object and the number
   share the top row. Global, so it works outside the SEO template too. */
.sg-step .sg-ico{height:88px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sg-step .sg-ico img{height:88px;width:auto;max-width:128px;object-fit:contain}
.sg-step .step-n{margin:0}
/* ten deep dives: two rows of five, the art big enough to read */
.fp-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.fp-grid .card-ico{width:100%;height:120px;justify-content:center}
.fp-grid .card-ico img{max-height:120px;max-width:100%;object-fit:contain}
@media (max-width:1100px){.fp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.fp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* five-across fine print cards: keep the short kicker on one line */
.fp-grid .kicker{letter-spacing:.03em;font-size:.72rem}

/* ---- learning lab articles, uplift 28 Sep 2026 ----
   the new art is full-figure characters and 3D objects: give them a slot that
   reads, and lay a lone callout card out with its art beside the words */
.ll-article .prose .card-ico{width:auto;height:150px;justify-content:flex-start;margin-bottom:8px}
.ll-article .prose .card-ico img{height:150px;width:auto;max-width:210px;max-height:150px}
.ll-article .prose [data-reveal] > .card:has(> .card-ico){display:grid;grid-template-columns:190px minmax(0,1fr);column-gap:28px;align-items:start}
.ll-article .prose [data-reveal] > .card:has(> .card-ico) > *{grid-column:2}
.ll-article .prose [data-reveal] > .card > .card-ico{grid-column:1;grid-row:1 / span 4;height:180px;justify-content:center;align-self:center;margin:0}
.ll-article .prose [data-reveal] > .card > .card-ico img{height:180px;max-height:180px;max-width:190px}
@media (max-width:600px){
  .ll-article .prose [data-reveal] > .card{grid-template-columns:minmax(0,1fr)}
  .ll-article .prose [data-reveal] > .card > *,.ll-article .prose [data-reveal] > .card > .card-ico{grid-column:1;grid-row:auto}
}

/* fine print tiles: one size across both rows, link at the foot */
.fp-grid{grid-auto-rows:1fr}
.fp-grid > .card{display:flex;flex-direction:column}
.fp-grid > .card > .link{margin-top:auto;padding-top:12px}

/* nav, 28 Sep 2026: an indented child row (partner offers under partner with us),
   and five footer columns */
.nd-m a.nd-sub,.drawer a.nd-sub{padding-left:30px;font-size:.88rem;position:relative}
.nd-m a.nd-sub::before,.drawer a.nd-sub::before{content:'';position:absolute;left:16px;top:50%;width:8px;height:1.5px;background:var(--line)}
.f-cols{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:900px){.f-cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.f-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* provider logos in an article's profile cards: logo-sized, centred in the art column */
.ll-article .prose [data-reveal] > .card > .card-ico img[src*="/rivals/"]{height:auto;max-height:64px;max-width:150px;width:auto}

/* ============ the quiz stage, shared by the verified quiz and the money quiz (28 Sep 2026) ============ */
/* ---- the quiz stage ---- */
.vq{max-width:980px;margin:0 auto;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:0 18px 50px rgba(34,34,34,.07);overflow:hidden}
.vq-top{display:flex;align-items:center;gap:14px;padding:18px clamp(20px,3vw,32px);
  border-bottom:1px solid var(--line);background:var(--band)}
.vq-top svg{width:46px;height:46px;flex:none}
.vq-top b{font-family:var(--f-display);font-weight:600;font-size:1.05rem;color:var(--ink);display:block}
.vq-top span{font-size:.84rem;color:var(--grey-500)}
.vq-count{margin-left:auto;font-family:var(--f-display);font-weight:600;font-size:.95rem;color:var(--ink);white-space:nowrap}
.vq .qz{max-width:none;padding:clamp(22px,3.4vw,40px)}
.vq .qz-prog{display:flex;gap:6px;height:8px;background:none;border:0;border-radius:0;margin-bottom:28px;overflow:visible}
.vq .qz-prog i{display:none}
.vq .qz-seg{flex:1;border-radius:999px;background:var(--line);transition:background .35s var(--e-out)}
.vq .qz-seg.on{background:var(--lime)}
.vq .qz-card{display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr);gap:clamp(20px,3.4vw,44px);align-items:center}
.vq .qz-art{display:flex;align-items:flex-end;justify-content:center;height:clamp(280px,32vw,370px);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--lime) 22%,#fff),transparent);border-radius:24px}
/* every figure sits in the same box on the same floor line, never stretched */
.vq .qz-art img{width:100%;height:100%;object-fit:contain;object-position:center bottom}
.vq .qz-step{font-family:var(--f-display);font-weight:600;letter-spacing:.08em;font-size:.78rem;text-transform:uppercase}
.vq .qz-opts{margin-top:20px}
.vq .qz-opt.picked{border-color:var(--lime);background:color-mix(in srgb,var(--lime) 14%,#fff)}
.vq .qz-opt.picked .qz-key{background:var(--lime);color:#1B2010}
.vq .qz-hint{margin-top:8px;color:var(--grey-500)}
.vq .qz-out{padding:clamp(4px,1vw,10px) 0 0}
.vq-res{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3vw,36px);align-items:center;text-align:left}
.vq-res .iv-seal{width:clamp(120px,16vw,170px);height:auto}
.vq-res[data-result=developing] .iv-seal path:first-child{fill:var(--gold)}
.vq-res[data-result=early] .iv-seal path:first-child{fill:var(--coral)}
.vq-score{display:flex;align-items:baseline;gap:10px;margin-top:6px}
.vq-score b{position:relative;isolation:isolate;font-family:var(--f-display);font-weight:700;font-size:clamp(3rem,6vw,4.2rem);line-height:.9;color:var(--ink)}
.vq-score b::after{content:'';position:absolute;z-index:-1;left:-.05em;right:-.05em;bottom:.04em;height:.3em;border-radius:.12em;background:var(--acc)}
.vq-score span{color:var(--grey-500)}
.vq-res h2{margin:10px 0 0}
.vq-res p.msg{margin:10px 0 0;color:var(--grey-700);line-height:1.7;max-width:56ch}
.vq-res .cta-row{margin-top:20px;gap:10px}
.vq-res .btn{padding-inline:18px}
.vq .qz-nav{justify-content:center}


/* two-column options when a question has many answers, so no card towers over the rest */
.vq .qz-opts.two{grid-template-columns:1fr 1fr}
.vq .qz-opt img{width:40px;height:40px;object-fit:contain;flex:none}
@media (max-width:820px){
  .vq .qz-card,.vq-res{grid-template-columns:minmax(0,1fr)}
  .vq .qz-art{height:220px}
  .vq-res{text-align:center;justify-items:center}
  .vq-res .vq-score,.vq-res .cta-row{justify-content:center}
  .vq .qz-opts.two{grid-template-columns:1fr}
}

/* focus moves to the result for screen readers; no outline box drawn round it */
.qz-out:focus{outline:none}

/* provider logos at the start of a name, in headings and table rows (28 Sep 2026) */
.plogo{display:inline-flex;align-items:center;justify-content:center;height:1.5em;min-width:1.5em;
  margin-right:.45em;vertical-align:middle;background:#fff;border:1px solid var(--line);border-radius:8px;padding:3px 6px}
.plogo img{height:100%;width:auto;max-width:5.5em;object-fit:contain;display:block}
.plogo svg{height:100%;width:auto}
.ctable th .plogo,.ctable td .plogo{height:1.8em}

/* result confetti (money quiz): one burst, then gone */
.confetti{position:absolute;left:0;right:0;height:0;pointer-events:none;z-index:60}
.confetti i{position:absolute;top:120px;width:10px;height:14px;border-radius:3px;opacity:0;animation:conf 1.6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes conf{0%{opacity:1;transform:translate(0,0) rotate(0)}80%{opacity:1}100%{opacity:0;transform:translate(var(--x),calc(var(--y) + 260px)) rotate(var(--r))}}

/* a round portrait sits centred in a person strip */
.person .portrait{display:block;margin:0 auto}
.nd-m a.nd-sub2,.drawer a.nd-sub2{padding-left:46px;font-size:.88rem;position:relative}
.nd-m a.nd-sub2::before,.drawer a.nd-sub2::before{content:'';position:absolute;left:32px;top:50%;width:8px;height:1.5px;background:var(--line)}

/* 29 Sep, Davin's review: longer hero lines stay on one line; the habit pill; five numbers across */
.beats.long{font-size:clamp(2rem,3.7vw,3.05rem)}
.beats.long > span{white-space:nowrap}
@media (max-width:640px){.beats.long{font-size:clamp(1.6rem,7.2vw,2.3rem)}}
.ast-link{color:inherit;text-decoration:none;margin-left:2px}
.ast-link:hover{color:var(--purple)}
.deal.build{background:var(--gold);color:#1B2010}
@media (min-width:900px){.stats-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.stat-lbl a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* the farmer's face is at the top of his render, so his pill sits under him, like the yoga girl's */
.f1 .fpill{top:calc(100% + 6px);bottom:auto;left:30%}

/* 29 Sep: the pilates yoga girl is framed tighter than the others, so she gets the
   same card height as the rest and a bigger hero slot, which puts her head at the
   farmer's scale */
.tcard.bg-coral .tchar img{max-height:100%}
.f5{width:clamp(86px,9vw,117px);top:4.4%}
@media (max-width:640px){.f5{width:80px}}

/* ============ partner offer pages, 29 Sep 2026 (Arj's After review, applied to all) */
/* 1. the co-brand lockup: both marks bigger, one centred row */
.lockup{justify-content:center;margin:0 auto;padding:clamp(26px,4vh,44px) 0;gap:clamp(22px,3.4vw,40px)}
.lockup svg{height:clamp(38px,4.6vw,58px) !important;width:auto}
.lockup img{height:clamp(60px,7vw,92px);max-width:260px}
.lockup .x{font-size:1.7rem}
/* 2. accent heroes on lime or gold: the purple kicker dot vanishes, so it follows the text */
.phero-acc .kicker .kdot{background:currentColor !important}
/* 3. the founder's photo is round, like the about page, not a hard square */
.person > img{width:clamp(130px,15vw,168px) !important;height:clamp(130px,15vw,168px) !important;
  border-radius:50%;object-fit:cover;border:4px solid var(--white);
  box-shadow:0 0 0 2px var(--line),0 18px 40px rgba(34,34,34,.14);filter:none;display:block}
/* 4. step cards with an object, and an arrow from each step to the next */
.step.sg-step .sg-ico{height:96px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.step.sg-step .sg-ico img{height:96px;width:auto;max-width:130px;object-fit:contain}
.step.sg-step .sg-ico .step-n{margin:0}
@media (min-width:900px){
  .grid.flow{column-gap:44px}
  .grid.flow > .step{overflow:visible}
  .grid.flow > .step:not(:last-child)::after{content:"";position:absolute;right:-36px;top:50%;
    width:28px;height:28px;transform:translateY(-50%);z-index:2;background:var(--acc,var(--ink));
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
}
@media (max-width:899px){
  .grid.flow{row-gap:44px}
  .grid.flow > .step:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:-38px;
    width:26px;height:26px;transform:translateX(-50%) rotate(90deg);background:var(--acc,var(--ink));
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
}
/* 5. the transparency cards carry one object each, the same size */
.transp .card-ico{height:110px;width:auto;justify-content:center;margin:0 auto 12px}
.transp .card-ico img{height:110px;width:auto;max-width:150px;object-fit:contain}
.transp .card{text-align:center}
/* 6. partner heroes: three short beats, each on one line beside the figure */
@media (min-width:900px){.phero-acc h1{font-size:clamp(2.2rem,3.6vw,3rem);white-space:nowrap}}
/* 7. partner sign-up forms sit in a card under their section header, not loose on the page */
form.form[id$="-register"]{max-width:560px;margin-left:auto;margin-right:auto;background:var(--white);
  border:1px solid var(--line);border-radius:28px;padding:clamp(22px,3.4vw,34px);box-shadow:0 18px 40px rgba(34,34,34,.08)}
.seat-card form.form[id$="-register"]{border:0;box-shadow:none;padding:0;background:none;max-width:none}
/* the road here: Arj on stage is a figure, not an object, so he gets the full slot height */
.htl-fig img[src*="journey-today-v3"]{max-width:none;height:100%}
/* the farmer sat over the end of the hero's second line; nudge him in (29 Sep) */
@media (min-width:921px){.f1{left:19%}}
/* gold cards: 55% gold reads as a paler, off-brand yellow, so gold cards take the
   full inaam gold edge (Arj, 29 Sep) */
.card-acc[style*="--acc:var(--gold)"]{border-color:var(--gold)}
/* a card's 'more' link underlines only as far as its arrow */
.card > .link{align-self:flex-start;width:fit-content}
/* top row of hero floats: both pills sit under their figure (farmer, shopping bag) */
.f2 .fpill{top:calc(100% + 6px);bottom:auto}
/* wide group figures (Emersyn's four founders) take more of the hero */
.phero-fig img[src*="emersyn-women"]{width:min(470px,100%)}
/* the impact pills get one line of context: the figures belong to the companies the
   fund holds. it appears with the pills, once the floats settle (Arj, 29 Sep) */
.stage-note{position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:3;margin:0 auto;max-width:40ch;
  text-align:center;font-size:.84rem;line-height:1.4;color:var(--grey-500)}
.js .stage-note{opacity:0;transition:opacity .5s ease .55s}
.js .stage.settled .stage-note{opacity:1}
/* MOBILE HERO ORDER (Arj, 29 Sep, Davin's point K): kicker and headline first, then
   the phone and its blow-out, then the body copy, the buttons and the rest. the copy
   column dissolves so its lines can sit either side of the stage */
@media (max-width:920px){
  .hero-grid{gap:0;align-items:stretch}
  .hero-copy{display:contents}
  .hero-copy > .kicker{order:1}
  .hero-copy > h1{order:2}
  .hero-copy > .strap{order:3}
  .stage,.js .stage-pin{order:4}
  .stage-pin{margin-top:14px}
  .hero-copy > .hero-sub{order:5;margin-top:22px}
  .hero-copy > .cta-row{order:6;margin-top:22px}
  .hero-copy > .hero-note{order:7}
  /* the stage is sized to the blow-out, not the whole screen. with js and motion its
     empty top band (where the top figures land) tucks under the headline: at scroll 0
     the figures are still inside the phone, and by the time they fly out the headline
     has scrolled away, so the phone sits right under the headline on the first screen */
  .hero{--S:clamp(540px,calc(100svh - 190px),680px)}
  .stage{min-height:var(--S);margin-top:10px}
  .js .stage{min-height:var(--S);top:64px}
  .stage .stage-note{top:auto;bottom:-6px;padding:0 10px;font-size:.8rem}
  .stage .shot{width:min(330px,84%)}
  /* the cue sat under the nav, which is now the headline's spot: it moves to the foot */
  .scroll-cue{top:auto;bottom:22px}
}
@media (max-width:920px) and (prefers-reduced-motion: no-preference){
  .js .stage-pin{margin-top:-118px;height:calc(var(--S) + 70svh)}
  .js .stage{margin-top:0}
}
/* MOBILE READABILITY PASS (29 Sep). the step number was a small white digit on a
   pastel circle (1.6:1 on gold, 1.9:1 on blue): it takes ink on every accent, and
   white only on the ink circle */
.step .step-n{color:var(--ink);font-size:.92rem;font-weight:700;letter-spacing:.04em}
.step[style*="--acc:var(--ink)"] .step-n{color:var(--white)}
/* callout figures in lime, blue or gold read at 1.5 to 1.9:1 on the pale card, so the
   figure is ink and the accent becomes a thick underline under it */
.callout-fig{color:var(--ink);text-decoration:underline;text-decoration-color:var(--acc,var(--ink));
  text-decoration-thickness:.12em;text-underline-offset:.16em;text-decoration-skip-ink:none}
/* the press banner, grouped (Arj, 29 Sep; Davin's point N): each run of logos opens
   with a small label pill, so the roll reads as sets rather than one random list */
.mq-cat{flex:none;font-family:var(--f-display);font-weight:600;font-size:.84rem;letter-spacing:.01em;
  color:var(--ink);background:var(--white);border:1.5px solid var(--ink);border-radius:999px;
  padding:7px 15px;white-space:nowrap;margin-left:34px;box-shadow:0 3px 0 rgba(34,34,34,.12)}
.marq-half > .mq-cat:first-child{margin-left:0}
@media (max-width:640px){.mq-cat{font-size:.78rem;padding:6px 12px;margin-left:22px}}
/* article callout cards with art beside the words: the phone rule above lost to the
   desktop rule's :has() specificity, so phones kept a 190px art column and an 80px
   text column. these match its weight and stack the art over the words */
@media (max-width:600px){
  .ll-article .prose [data-reveal] > .card:has(> .card-ico){display:block}
  .ll-article .prose [data-reveal] > .card:has(> .card-ico) > .card-ico{height:140px;justify-content:flex-start;margin:0 0 12px}
  .ll-article .prose [data-reveal] > .card:has(> .card-ico) > .card-ico img{height:140px;max-height:140px;max-width:200px}
  .ll-article .prose [data-reveal] > .card:has(> .card-ico) > .card-ico img[src*="/rivals/"]{height:auto;max-height:56px}
}
/* comparison tables on a phone: each row becomes a card, each value labelled with
   its column, so nothing sits cut off past the screen edge. the compare page's
   five-column rival table keeps its own pinned-label scroll (with its hint) */
@media (max-width:640px){
  .ctable-wrap:not(:has(.cmp-t)){overflow:visible;border:0;background:none;border-radius:0}
  .ctable:not(.cmp-t),.ctable:not(.cmp-t) tbody,.ctable:not(.cmp-t) tr,.ctable:not(.cmp-t) th,.ctable:not(.cmp-t) td{display:block}
  .ctable:not(.cmp-t){min-width:0}
  .ctable:not(.cmp-t) thead{display:none}
  .ctable:not(.cmp-t) tbody{display:grid;gap:12px}
  .ctable:not(.cmp-t) tr{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:4px 0 8px;overflow:hidden}
  .ctable:not(.cmp-t) tbody th,.ctable:not(.cmp-t).sg-t tbody th{width:auto;padding:14px 16px 6px;border-bottom:0;
    font-family:var(--f-display);font-weight:600;font-size:1.02rem;color:var(--ink);background:none !important}
  .ctable:not(.cmp-t) td,.ctable:not(.cmp-t).sg-t td{padding:8px 16px;border-bottom:0;background:none}
  .ctable:not(.cmp-t) td[data-label]::before{content:attr(data-label);display:block;margin-bottom:3px;
    font-family:var(--f-display);font-weight:600;font-size:.74rem;letter-spacing:.06em;color:var(--grey-500)}
  .ctable:not(.cmp-t) td.col-us,.ctable:not(.cmp-t).sg-t td.col-us{background:rgba(158,224,74,.14);margin:4px 8px;border-radius:12px;padding:10px 12px}
  .ctable:not(.cmp-t).sg-t tbody tr:nth-child(even) th,.ctable:not(.cmp-t).sg-t tbody tr:nth-child(even) td:not(.col-us){background:none}
}
/* partner lockups on a phone: a wide partner mark (LiveHaus) or a text name (Fomo
   Killer Society) wrapped under the ×, leaving it hanging. the lockup holds one line
   and the partner side shrinks to fit */
@media (max-width:640px){
  .lockup{flex-wrap:nowrap;gap:12px}
  .lockup svg{height:24px !important;flex:none}
  .lockup .x{font-size:1.2rem;flex:none}
  .lockup img{height:auto;max-height:54px;max-width:42vw;min-width:0}
  .lockup > span:not(.x):not(.mec-mark){font-size:17px !important;white-space:nowrap}
  /* MEC's mark is the Monash crest plus the club name: both shrink to fit the line */
  .lockup .mec-mark{flex-direction:column;align-items:flex-start;gap:4px;flex:none}
  .lockup .mec-mark img{height:34px;max-height:34px;width:auto;max-width:none;flex:none}
  .lockup .mec-mark > span{font-size:.76rem;line-height:1.1;border-left:0;padding-left:0}
}
/* provider logo chips inside article prose: the prose image rule gave each logo a
   1.6em top margin and a large radius, which dropped it out of its chip */
.prose .plogo img{margin:0;border-radius:0}
/* ============ preloader (29 Sep 2026): the live site's, on the current figures ============ */
#preloader{display:none}
.pre-on #preloader{position:fixed;inset:0;z-index:99999;background:var(--white);display:flex;
  align-items:center;justify-content:center;overflow:hidden;cursor:pointer;--r:170px;--s:150px}
.pre-on body{overflow:hidden}
.pre-on .rise,.pre-on .pop{animation-play-state:paused}
#preloader.done{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,visibility .4s ease}
.pre-moji{position:absolute;top:50%;left:50%;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  object-fit:contain;opacity:0;transform:translate(calc(var(--x) * var(--r)),calc(var(--y) * var(--r))) scale(0)}
.pre-m1{--x:0;--y:-1}
.pre-m2{--x:.95;--y:-.33}
.pre-m3{--x:.6;--y:.86}
.pre-m4{--x:-.6;--y:.86}
.pre-m5{--x:-.95;--y:-.33}
.pre-moji.pre-in{opacity:1;transform:translate(calc(var(--x) * var(--r)),calc(var(--y) * var(--r))) scale(1);
  transition:opacity .2s ease,transform .42s cubic-bezier(.22,1.2,.36,1)}
.pre-moji.pre-out{opacity:0;transform:translate(0,0) scale(.3);transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .3s ease .22s}
.pre-logo{position:absolute;top:50%;left:50%;width:84px;height:81px;margin:-40px 0 0 -42px;color:var(--ink);opacity:0;transform:scale(.3)}
#preloader.spin .pre-logo{opacity:1;animation:pre-spin .8s cubic-bezier(.4,0,.2,1) forwards}
#preloader.told .pre-logo{animation:pre-breathe 1s ease-in-out infinite}
@keyframes pre-spin{0%{transform:scale(.3) rotate(0)}25%{transform:scale(1) rotate(180deg)}100%{transform:scale(1) rotate(720deg)}}
@keyframes pre-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.pre-bar{position:absolute;top:50%;left:50%;transform:translate(-50%,78px);width:200px;height:10px;border-radius:10px;
  background:rgba(195,133,248,.15);overflow:hidden;opacity:0}
#preloader.spin .pre-bar{opacity:1;transition:opacity .2s ease}
.pre-fill{height:100%;width:0;border-radius:10px;background:linear-gradient(90deg,var(--purple),var(--blue),var(--purple));background-size:200% 100%}
#preloader.spin .pre-fill{width:100%;transition:width .8s ease;animation:pre-glow .75s ease-in-out infinite}
@keyframes pre-glow{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
.pre-tagline{position:absolute;top:calc(50% + 118px);left:0;right:0;text-align:center;padding:0 1.5rem;
  font-family:var(--f-display);font-weight:600;font-size:clamp(1.6rem,4vw,2.2rem);line-height:1;color:var(--ink);opacity:0}
#preloader.told .pre-tagline{opacity:1;transition:opacity .3s ease}
@media (max-width:768px){.pre-on #preloader{--r:122px;--s:106px}.pre-logo{width:62px;height:60px;margin:-30px 0 0 -31px}
  .pre-bar{width:160px;height:8px;transform:translate(-50%,62px)}.pre-tagline{top:calc(50% + 96px)}}
@media (max-width:400px){.pre-on #preloader{--r:100px;--s:86px}}

/* ============ the quiz nudge (30 Sep 2026): the live homepage's QuizFab, carried over ============ */
.qfab{position:fixed;right:24px;bottom:24px;z-index:65;width:56px;height:56px;padding:13px;border:0;border-radius:50%;
  background:var(--purple);color:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(195,133,248,.4);transform:scale(0);visibility:hidden;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),visibility 0s linear .4s}
.qfab.on{transform:scale(1);visibility:visible;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.qfab svg{width:100%;height:100%}
.qfab-tip{position:absolute;right:0;bottom:calc(100% + 8px);background:var(--ink);color:var(--white);
  font-family:var(--f-body);font-size:12px;padding:6px 12px;border-radius:8px;white-space:nowrap;
  opacity:0;transition:opacity .3s;pointer-events:none}
.qfab:hover .qfab-tip,.qfab:focus-visible .qfab-tip{opacity:1}
.qpop{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .25s ease}
.qpop.on{opacity:1}
.qpop[hidden]{display:none}
.qpop-card{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(94vw,440px);
  background:var(--white);border:1px solid var(--line);border-radius:28px;padding:2.5rem 2rem 2rem;
  box-shadow:0 24px 80px rgba(0,0,0,.15);display:flex;flex-direction:column;align-items:center;text-align:center}
.qpop-card:focus{outline:none}
.qpop-card img{height:150px;width:auto;margin-bottom:1rem}
.qpop-card h3{font-size:1.4rem;margin:0 0 .5rem}
.qpop-card p{font-size:.95rem;line-height:1.6;color:var(--grey-700);margin:0 0 1.5rem;max-width:340px}
.qpop-card .btn{width:100%;max-width:320px}
.qpop-x{position:absolute;top:1rem;right:1rem;width:36px;height:36px;border:0;border-radius:50%;
  background:var(--band);color:var(--ink);font-size:1.3rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
@media (max-width:768px){
  .qfab{width:44px;height:44px;padding:10px;right:12px;bottom:20px}
  .qpop-card{top:auto;bottom:16px;transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){.qfab,.qfab.on{transition:none}}