/* ════════════════════════════════════════════════════════════════════════════
   REPEATS — site stylesheet.

   Type: Young Serif for display and the wordmark, Familjen Grotesk for body and
   UI, IBM Plex Mono for data and labels. Serif against grotesk is a real
   contrast axis; two grotesques would read as a mistake.

   Colour: RESTRAINED. Neutrals carry ~88% of every screen, violet is the single
   accent and appears at most twice per viewport, amber does exactly one job —
   the "may experience" half of a frequency figure — so it means something.
   ════════════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme:dark;
  --bg:#0A0A0D; --bg2:#0E0E14; --surf:#15151D; --surf2:#1B1B25; --raise:#242430;
  --line:#212130; --line2:#31314A;
  --tx:#F6F5F8; --tx2:#A7A4B8; --tx3:#8B889F;
  --vi:#8B6BFF; --vi2:#A98FFF; --vif:rgba(139,107,255,.13); --vig:rgba(139,107,255,.30);
  --am:#FFB338; --amf:rgba(255,179,56,.12);
  --co:#FF6F4E; --cof:rgba(255,111,78,.13); --cob:rgba(255,111,78,.30);
  --vfill:#5735D4; --vfill2:#6242DE; --vfill3:#4A2FB8;
  --glass:rgba(21,21,29,.74);
  --shadow:0 24px 60px -22px rgba(0,0,0,.85);
  --shadow-sm:0 8px 24px -10px rgba(0,0,0,.7);
  --fd:"Young Serif",Georgia,"Times New Roman",serif;
  --fs:"Familjen Grotesk",system-ui,-apple-system,sans-serif;
  --fm:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  --r:20px; --r-sm:13px; --max:1180px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.42,.5,1);
}
html[data-theme="light"]{
  color-scheme:light;
  --bg:#FBFAF8; --bg2:#F4F2EF; --surf:#FFFFFF; --surf2:#F8F6F3; --raise:#EEEBE7;
  --line:#E6E3DE; --line2:#D3CFC9;
  --tx:#14131A; --tx2:#55525E; --tx3:#6B6875;
  --vi:#5B39D9; --vi2:#5330CE; --vif:rgba(91,57,217,.075); --vig:rgba(91,57,217,.20);
  --am:#8F5000; --amf:rgba(143,80,0,.09);
  --co:#B93A19; --cof:rgba(185,58,25,.085); --cob:rgba(185,58,25,.26);
  --glass:rgba(255,255,255,.78);
  --shadow:0 24px 60px -26px rgba(28,22,50,.20);
  --shadow-sm:0 8px 24px -12px rgba(28,22,50,.16);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;scroll-padding-top:132px}
body{background:var(--bg);color:var(--tx);font-family:var(--fs);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background .35s var(--ease),color .35s var(--ease)}
a{color:var(--vi2);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--vi2);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--s5)}
@media(max-width:640px){.wrap{padding:0 20px}}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--vfill);color:#fff;
  padding:12px 20px;border-radius:0 0 10px 0}
.skip:focus{left:0}

/* ── type ─────────────────────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--fd);font-weight:400;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(2.6rem,6.4vw,4.4rem);line-height:1.02}
h2{font-size:clamp(1.85rem,3.8vw,2.7rem);line-height:1.08;margin-bottom:var(--s4)}
h3{font-size:1.2rem;line-height:1.3;margin-bottom:var(--s2)}
h4{font-family:var(--fs);font-size:1.02rem;font-weight:600;letter-spacing:-.012em;margin-bottom:var(--s2)}
p{color:var(--tx2);margin-bottom:var(--s4);max-width:64ch;text-wrap:pretty}
p:last-child{margin-bottom:0}
p strong,li strong,td strong,dd strong{color:var(--tx);font-weight:600}
em{font-style:italic}
.lead{font-size:clamp(1.06rem,1.5vw,1.22rem);color:var(--tx2);max-width:54ch;line-height:1.55}
.kicker{font-family:var(--fm);font-size:.69rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--tx3);font-weight:600;margin-bottom:var(--s4);display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:22px;height:1px;background:var(--line2);flex:0 0 auto}
section{padding:var(--s9) 0;position:relative}
.sect-line{border-top:1px solid var(--line)}
@media(max-width:720px){section{padding:var(--s8) 0}}

/* ── crisis strip ─────────────────────────────────────────────────────────
   One centred cluster, not a label at one end and numbers at the other. The
   earlier version left ~800px of nothing in the middle, which read as two
   disconnected things rather than one bar, and put a noun-phrase label beside
   four actions where it did no work. The lead is now the first item in the same
   row and asks a question the numbers answer.

   `--co` is exclusive to this strip. That exclusivity is what makes it read as
   help rather than as chrome. */
.crisis{position:sticky;top:var(--nav-h,64px);z-index:49;
  /* --cof is translucent, so page text scrolling underneath showed through */
  background:linear-gradient(var(--cof),var(--cof)),var(--bg);
  border-bottom:1px solid var(--cob);backdrop-filter:blur(16px) saturate(1.3)}
.crisis .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:0;padding-block:4px;min-height:32px}
.crisis__lead{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--tx);
  font-size:.75rem;line-height:1.25;flex:0 0 auto;letter-spacing:-.005em;
  padding-right:var(--s4);margin-right:var(--s2);position:relative}
.crisis__lead::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:1px;height:13px;background:var(--cob)}
.crisis__lead svg{width:14px;height:14px;color:var(--co);flex:0 0 auto}
.crisis__lines{display:flex;flex-wrap:wrap;align-items:center}
.crisis__n{display:inline-flex;align-items:baseline;gap:7px;font-size:.75rem;
  /* the name is what tells you which number you are ringing, so it is not tx3 */
  color:var(--tx2);line-height:1.25;padding:3px var(--s3);position:relative;
  border-radius:6px;transition:color .18s var(--ease),background .18s var(--ease)}
.crisis__n+.crisis__n::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:13px;background:var(--cob)}
.crisis__n:hover{text-decoration:none;color:var(--tx);background:var(--cof)}
.crisis__n em{font-style:normal}
.crisis__n b{font-family:var(--fm);font-weight:600;color:var(--co);white-space:nowrap;
  font-size:.78rem}
.crisis__n:hover b{text-decoration:underline}
@media(max-width:900px){
  .crisis__n{font-size:.72rem;padding-inline:9px}
  .crisis__lead{padding-right:var(--s3);margin-right:6px}
  .crisis__lead span{display:none}
}
@media(max-width:620px){
  .crisis .wrap{justify-content:space-between;gap:2px}
  .crisis__lead{display:none}
  .crisis__lines{width:100%;justify-content:space-between}
  .crisis__n{padding-inline:4px}
  .crisis__n em{display:none;font-style:normal}
  .crisis__n+.crisis__n::before{display:none}
}

/* ── nav ──────────────────────────────────────────────────────────────────── */
nav.nav{position:sticky;top:0;z-index:50;background:var(--glass);
  backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid transparent;
  transition:border-color .3s,background .35s}
html.scrolled nav.nav{border-bottom-color:var(--line)}
nav.nav .wrap{display:flex;align-items:center;gap:var(--s5);min-height:64px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--fd);font-size:1.24rem;
  letter-spacing:-.015em;color:var(--tx)}
.brand:hover{text-decoration:none}
.brand svg{border-radius:24%;display:block;box-shadow:var(--shadow-sm);flex:0 0 auto}
.nl{margin-left:auto;display:flex;gap:var(--s5);font-size:.88rem}
.nl a{color:var(--tx2);position:relative;padding:4px 0}
.nl a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--vi2);
  transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
.nl a:hover,.nl a[aria-current]{text-decoration:none;color:var(--tx)}
.nl a:hover::after,.nl a[aria-current]::after{transform:scaleX(1)}
.nav__act{display:flex;align-items:center;gap:var(--s3);margin-left:var(--s3)}
.themebtn{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--tx2);flex:0 0 auto;
  transition:background .2s,color .2s,border-color .2s}
.themebtn:hover{background:var(--surf);color:var(--tx);border-color:var(--line2)}
.themebtn svg{width:17px;height:17px}
html[data-theme="light"] .moon{display:none}
html:not([data-theme="light"]) .sun{display:none}
.burger{display:none;width:38px;height:38px;border-radius:10px;place-items:center;
  border:1px solid var(--line);color:var(--tx2)}
@media(max-width:900px){
  .nl{position:fixed;inset:auto 0 0 0;top:calc(var(--nav-h,64px) + var(--crisis-h,33px));
    background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;gap:0;
    padding:var(--s3) var(--s5) var(--s5);margin:0;display:none}
  .nl.open{display:flex}
  .nl a{padding:13px 0;border-bottom:1px solid var(--line);font-size:1rem}
  .burger{display:grid;margin-left:auto}
  .nav__act{margin-left:0}
}

/* ── buttons + store badges ───────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--vfill);color:#fff;
  border:1px solid var(--vfill);border-radius:13px;padding:14px 22px;font-weight:600;font-size:.94rem;
  min-height:48px;box-shadow:0 8px 22px -10px rgba(87,53,212,.7);
  transition:transform .14s var(--ease),box-shadow .2s,opacity .2s}
.btn:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 14px 30px -10px rgba(87,53,212,.75)}
.btn:active{transform:translateY(0) scale(.985)}
.btn.sec{background:var(--surf);color:var(--tx);border-color:var(--line2);box-shadow:none}
.btn.sec:hover{background:var(--surf2);border-color:var(--tx3);box-shadow:var(--shadow-sm)}
.btns{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
.store{display:inline-flex;align-items:center;gap:11px;background:var(--tx);color:var(--bg);
  border:1px solid var(--tx);border-radius:13px;padding:10px 20px;min-height:52px;
  transition:transform .16s var(--ease),opacity .2s}
.store:hover{text-decoration:none;transform:translateY(-1px);opacity:.92}
.store svg{width:22px;height:22px;flex:0 0 auto}
.store div{display:flex;flex-direction:column;line-height:1.15}
.store span{font-family:var(--fm);font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;
  opacity:.72}
.store b{font-family:var(--fs);font-weight:600;font-size:1rem;letter-spacing:-.015em}
.stores{display:flex;gap:var(--s3);flex-wrap:wrap}

/* ── cards + grids ────────────────────────────────────────────────────────── */
.grid{display:grid;gap:var(--s4)}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);
  transition:border-color .25s,transform .25s var(--ease),box-shadow .25s}
.card:hover{border-color:var(--line2);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.card.hi{background:linear-gradient(145deg,var(--vfill2),var(--vfill) 55%,var(--vfill3));
  border-color:transparent;color:#fff}
.card.hi h2,.card.hi h3,.card.hi h4{color:#fff}
.card.hi p{color:rgba(255,255,255,.88)}
/* amber must clear AA against the LIGHTEST stop (#6242DE), where --am fails at 3.51 */
.card.hi em{color:#FFD98A}

/* ── citations, forked from reva ──────────────────────────────────────────── */
.cite[data-cite]{display:inline-flex;align-items:center;justify-content:center;vertical-align:super;
  font-size:.58em;line-height:1;margin:0 1px 0 2px;width:1.55em;height:1.55em;padding:0;
  border-radius:50%;flex:none;border:1px solid var(--vig);background:var(--vif);color:var(--vi2);
  font-family:var(--fm);font-weight:600;cursor:pointer;position:relative;top:-.32em;
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease),
    transform .12s var(--spring)}
.cite[data-cite]::before{content:attr(data-n)}
/* a 44px hit target without a 44px mark */
.cite[data-cite]::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;
  transform:translate(-50%,-50%);border-radius:50%}
.cite[data-cite]:hover{background:var(--vfill);border-color:var(--vfill);color:#fff}
.cite[data-cite][aria-expanded="true"]{background:var(--vfill);border-color:var(--vfill);color:#fff;
  transform:translateY(-1px)}
.card.hi .cite[data-cite]{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.38);color:#fff}
.card.hi .cite[data-cite]:hover,.card.hi .cite[data-cite][aria-expanded="true"]{background:#fff;color:var(--vfill)}
.citepop{position:fixed;z-index:200;width:min(348px,calc(100vw - 28px));background:var(--surf);
  border:1px solid var(--line2);border-radius:16px;padding:17px 19px 15px;
  box-shadow:0 28px 60px -18px rgba(0,0,0,.7),0 3px 10px rgba(0,0,0,.16);
  opacity:0;transform:translateY(7px) scale(.985);pointer-events:none;
  transition:opacity .22s var(--ease),transform .3s var(--spring)}
.citepop.on{opacity:1;transform:none;pointer-events:auto}
.citepop:focus{outline:2px solid var(--vi2);outline-offset:3px}
.citepop__arrow{position:absolute;width:12px;height:12px;background:var(--surf);
  border:1px solid var(--line2);transform:rotate(45deg)}
.citepop__k{display:flex;align-items:center;gap:7px;font-family:var(--fm);font-size:.6rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--tx3);margin:0}
.citepop__k svg{color:var(--vi2);flex:none}
.citepop__q{font-size:.94rem;line-height:1.52;color:var(--tx);margin:11px 0 11px;border:0;padding:0}
.citepop__src{font-size:.8rem;color:var(--tx2);line-height:1.45;margin:0}
.citepop__link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;min-height:40px;
  font-size:.78rem;font-weight:600;color:var(--vi2)}
.citepop__tier{display:inline-flex;align-items:center;gap:6px;margin-top:11px;font-family:var(--fm);
  font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3)}
.citepop__tier s{width:22px;height:3px;border-radius:2px;background:var(--vi);text-decoration:none}
.citepop__tier s.w{background:var(--am)}
.citepop__tier s.h{height:1.5px;background:var(--tx3)}

/* ── phone frame + loading skeleton, forked from reva ─────────────────────── */
.appframe{position:relative;width:min(420px,92vw);aspect-ratio:505 / 1030}
.appframe__f{position:absolute;top:0;left:0;width:505px;height:1030px;border:0;display:block;
  background:transparent;transform-origin:top left;
  /* The scale is JS-driven because it depends on the container's measured width.
     This default is the desktop case (420/505); without it the iframe paints at
     its full 505x1030 for the frames between load and the first scaleFrames(),
     which is visibly larger than the skeleton sitting over it. */
  transform:scale(0.8317)}
.appload{position:absolute;inset:0;z-index:20;pointer-events:none;opacity:1;
  transition:opacity .55s var(--ease)}
.appframe.is-ready .appload{opacity:0}
.appload svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* 1 — the bezel draws itself, one continuous stroke */
.appload__bezel{fill:none;stroke:var(--tx3);stroke-width:8;stroke-linecap:round;
  stroke-dasharray:var(--len,2450);stroke-dashoffset:var(--len,2450);
  animation:appDraw .95s var(--ease) forwards}
@keyframes appDraw{to{stroke-dashoffset:0}}
/* 2 — the glass fills, from the bottom up */
.appload__glass{fill:var(--bg2);transform-origin:50% 100%;transform:scaleY(0);
  animation:appWash .42s var(--ease) .72s forwards}
@keyframes appWash{to{transform:scaleY(1)}}
/* 3 — the furniture settles into the positions the real UI will occupy */
.appload__b{fill:var(--raise);opacity:0;transform:translateY(7px);
  animation:appSettle .42s var(--spring) forwards}
.appload__b--soft{fill:var(--line)}
.appload__b--vi{fill:var(--vig)}
@keyframes appSettle{to{opacity:1;transform:none}}
.appload__cap{position:absolute;left:0;right:0;bottom:-28px;text-align:center;font-family:var(--fm);
  font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx3);opacity:0;
  animation:appCap .5s var(--ease) 2.3s forwards}
@keyframes appCap{to{opacity:.75}}
.appload__cap span{opacity:0;animation:appCap .6s var(--ease) 5.5s forwards}
@media(prefers-reduced-motion:reduce){
  .appload__bezel{animation:none;stroke-dashoffset:0}
  .appload__glass{animation:none;transform:none}
  .appload__b{animation:none;opacity:1;transform:none}
  .appload__cap,.appload__cap span{animation:none;opacity:.75}
}

/* ── hero ─────────────────────────────────────────────────────────────────── */
.hero{padding:clamp(44px,6vw,80px) 0 var(--s9);position:relative;overflow:hidden}
#field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero .wrap{position:relative;z-index:1}
.herogrid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,5vw,64px);
  align-items:center}
@media(max-width:1000px){.herogrid{grid-template-columns:1fr;gap:var(--s8);justify-items:start}
  .appframe{margin:0 auto}}
.hero h1{margin-bottom:var(--s5);max-width:14ch}
.hero .lead{margin-bottom:var(--s5)}
.hero-note{font-size:.81rem;color:var(--tx3);margin-top:var(--s4);display:flex;align-items:center;
  gap:8px}
.hero-note svg{width:14px;height:14px;flex:0 0 auto;color:var(--vi2)}

/* ── try it: the symptom lookup, running on the page ──────────────────────── */
.tryit{max-width:600px;background:var(--surf);border:1px solid var(--line2);border-radius:var(--r);
  padding:var(--s5);box-shadow:var(--shadow-sm)}
.tryit__top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:var(--s3)}
.tryit__k{font-family:var(--fm);font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--tx3)}
.tryit__free{font-family:var(--fm);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--vi2)}
.tryit__field{display:flex;border:1px solid var(--line2);border-radius:12px;overflow:hidden;
  background:var(--bg)}
.tryit__field:focus-within{box-shadow:0 0 0 3px var(--vif);border-color:var(--vi)}
.tryit__field input{flex:1;min-width:0;background:none;border:0;color:var(--tx);
  font-family:var(--fs);font-size:.94rem;padding:14px 16px;outline:none}
.tryit__field input::placeholder{color:var(--tx3)}
.tryit__go{flex:none;background:var(--vfill);color:#fff;font-weight:600;font-size:.88rem;
  padding:0 22px;min-height:50px;transition:opacity .2s}
.tryit__go:hover{opacity:.9}
.tryit__chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.tchip{font-size:.81rem;color:var(--tx2);background:var(--surf2);border:1px solid var(--line);
  border-radius:999px;padding:7px 14px;min-height:36px;transition:border-color .2s,color .2s}
.tchip:hover{border-color:var(--vi);color:var(--tx)}
.tryout{margin-top:var(--s4);border-top:1px solid var(--line);padding-top:var(--s4)}
.tryout__h{font-family:var(--fm);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx3);margin-bottom:var(--s3)}
.hit{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:start;
  padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.hit:last-of-type{border-bottom:0}
.hit__r{width:44px;padding-top:8px}
.hit__r s{display:block;height:4px;border-radius:2px;background:var(--vi);text-decoration:none}
.hit b{display:block;font-size:.94rem;color:var(--tx);font-weight:600}
.hit em{display:block;font-size:.81rem;color:var(--tx2);font-style:normal;margin-top:1px}
.hit .t{font-family:var(--fm);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx3);margin-top:5px;display:block}
.tryit__note{font-size:.75rem;color:var(--tx3);margin-top:var(--s4);line-height:1.55}
.tryit__q{background:linear-gradient(145deg,var(--vfill2),var(--vfill) 60%,var(--vfill3));
  border-radius:14px;padding:var(--s4);margin-top:var(--s4)}
.tryit__q b{display:block;font-family:var(--fm);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:6px}
.tryit__q p{color:#fff;margin:0;font-size:.94rem;max-width:none}

/* ── marquee ──────────────────────────────────────────────────────────────── */
.marq{overflow:hidden;padding:var(--s5) 0;border-block:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq-track{display:flex;gap:var(--s3);width:max-content}
.chip{font-family:var(--fm);font-size:.81rem;color:var(--tx2);background:var(--surf);
  border:1px solid var(--line);border-radius:999px;padding:8px 16px;white-space:nowrap}

/* ── walkthrough ──────────────────────────────────────────────────────────── */
.walk{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,5vw,72px);
  align-items:start;margin-top:var(--s6)}
@media(max-width:1000px){.walk{grid-template-columns:1fr}.walk__stage{position:static!important;
  order:-1;justify-self:center}}
.walk__stage{position:sticky;top:132px}
.walk__stage .appframe{width:min(340px,90vw)}
.step{border-left:1px solid var(--line);padding:var(--s5) 0 var(--s5) var(--s5);position:relative;
  cursor:pointer}
.step::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--vi);
  transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease)}
.step[aria-current="true"]::before{transform:scaleY(1)}
.step__n{font-family:var(--fm);font-size:.63rem;letter-spacing:.14em;color:var(--tx3);
  display:block;margin-bottom:var(--s2)}
.step h3{transition:color .25s}
.step p{font-size:.94rem;opacity:.62;transition:opacity .3s}
.step[aria-current="true"] p{opacity:1}
.step__more{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.step__more span{font-family:var(--fm);font-size:.63rem;letter-spacing:.06em;color:var(--tx3);
  border:1px solid var(--line);border-radius:6px;padding:3px 8px}

/* ── evidence tiers ───────────────────────────────────────────────────────── */
.tiers{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s2) var(--s5);margin-top:var(--s6)}
.tier{display:grid;grid-template-columns:58px 1fr;gap:var(--s4);align-items:start;
  padding:var(--s4) 0;border-bottom:1px solid var(--line);cursor:pointer;
  transition:padding-left .22s var(--ease)}
.tier:last-child{border-bottom:none}
.tier:hover{padding-left:6px}
.tier .rw{padding-top:9px}
.tier s{display:block;width:52px;height:4px;border-radius:2px;background:var(--vi);
  text-decoration:none}
.tier s.t2{width:40px;opacity:.84}
.tier s.t3{width:29px;opacity:.66}
.tier s.t4{width:19px;opacity:.5}
.tier s.t5{width:29px;background:var(--co);opacity:.85}
.tier s.t6{width:52px;height:1.5px;background:var(--tx3);opacity:.85}
.tier b{display:block;font-size:1rem;font-weight:600;color:var(--tx);margin-bottom:2px}
.tier span{display:block;font-size:.88rem;color:var(--tx2)}
.tier .more{max-height:0;overflow:hidden;opacity:0;
  transition:max-height .35s var(--ease),opacity .25s,margin-top .35s}
.tier[aria-expanded="true"] .more{max-height:220px;opacity:1;margin-top:10px}
.tier .more p{font-size:.85rem;color:var(--tx3);margin:0;max-width:60ch}

/* ── frequency ────────────────────────────────────────────────────────────── */
.freqdemo{display:grid;grid-template-columns:1fr 1fr;gap:1px;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);margin-top:var(--s4);background:var(--line)}
@media(max-width:560px){.freqdemo{grid-template-columns:1fr}}
.freqdemo>div{background:var(--surf);padding:var(--s5)}
.fnum{font-family:var(--fd);font-size:clamp(2rem,4vw,2.8rem);display:block;line-height:1;
  margin-bottom:6px;font-variant-numeric:tabular-nums}
.f-may .fnum{color:var(--am)}
.f-not .fnum{color:var(--tx)}
.freqdemo small{font-size:.88rem;color:var(--tx2)}
.dots{display:grid;grid-template-columns:repeat(20,1fr);gap:4px;max-width:400px;margin-top:var(--s5)}
.dots i{aspect-ratio:1;border-radius:50%;background:var(--raise)}
.dots i.on{background:var(--am)}
.dotwrap{margin-top:var(--s6);max-width:420px}
.dotwrap figcaption{font-size:.81rem;color:var(--tx3);margin-top:var(--s3)}
.toggle{display:inline-flex;background:var(--surf2);border:1px solid var(--line);border-radius:11px;
  padding:3px;gap:3px}
.toggle button{padding:8px 15px;border-radius:8px;font-size:.81rem;font-weight:600;color:var(--tx3);
  min-height:38px;transition:background .2s,color .2s}
.toggle button[aria-pressed="true"]{background:var(--surf);color:var(--tx);box-shadow:var(--shadow-sm)}
.verdict{margin-top:var(--s4);font-size:.88rem;color:var(--tx2);min-height:3.2em}
.verdict b{color:var(--tx)}

/* ── refusals ─────────────────────────────────────────────────────────────── */
.no{display:grid;grid-template-columns:20px 1fr;gap:var(--s3);align-items:start;padding:var(--s3) 0}
.no s{width:18px;height:18px;margin-top:4px;border-radius:50%;text-decoration:none;
  border:1.5px solid var(--co);position:relative}
.no s::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:1.5px;background:var(--co);
  transform:translateY(-50%)}
.no b{color:var(--tx);font-weight:600;display:block;font-size:.94rem;margin-bottom:2px}
.no span{color:var(--tx2);font-size:.88rem}

/* ── spec list (clinicians) ───────────────────────────────────────────────── */
.tabs{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s5);
  border-bottom:1px solid var(--line);padding-bottom:var(--s2)}
.tabs button{padding:10px 16px;border-radius:10px;font-size:.88rem;font-weight:600;color:var(--tx3);
  min-height:44px;position:relative;transition:color .2s,background .2s}
.tabs button:hover{color:var(--tx2);background:var(--surf)}
.tabs button[aria-selected="true"]{color:var(--tx);background:var(--surf)}
.tabs button[aria-selected="true"]::after{content:"";position:absolute;left:16px;right:16px;
  bottom:-9px;height:2px;background:var(--vi2);border-radius:2px}
.panel[hidden]{display:none}
.spec{display:grid;grid-template-columns:196px 1fr;gap:var(--s4) var(--s5);align-items:baseline;
  padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.spec:last-of-type{border-bottom:none}
@media(max-width:640px){.spec{grid-template-columns:1fr;gap:var(--s1)}}
.spec dt{font-family:var(--fm);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tx3);font-weight:600}
.spec dd{color:var(--tx2);font-size:.94rem;max-width:72ch}

/* ── table ────────────────────────────────────────────────────────────────── */
.wrong{width:100%;border-collapse:collapse;margin-top:var(--s5);font-size:.9rem}
.wrong th{text-align:left;font-family:var(--fm);font-size:.69rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--tx3);font-weight:600;padding:0 var(--s4) var(--s3) 0;
  border-bottom:1px solid var(--line)}
.wrong td{padding:var(--s4) var(--s4) var(--s4) 0;border-bottom:1px solid var(--line);
  vertical-align:top;color:var(--tx2)}
.wrong td:last-child{color:var(--tx);padding-right:0}
.wrong tr:last-child td{border-bottom:none}
@media(max-width:640px){
  .wrong,.wrong tbody,.wrong tr,.wrong td{display:block;width:100%}
  .wrong thead{display:none}
  .wrong tr{border-bottom:1px solid var(--line);padding:var(--s4) 0}
  .wrong tr:last-child{border-bottom:none}
  .wrong td{border:none;padding:2px 0}
  .wrong td:first-child{color:var(--tx3);font-size:.81rem}
}

/* ── stats ────────────────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s4);
  margin-top:var(--s6)}
.stat b{display:block;font-family:var(--fd);font-size:clamp(1.9rem,3.6vw,2.5rem);color:var(--tx);
  line-height:1;margin-bottom:6px;font-variant-numeric:tabular-nums}
.stat span{font-size:.85rem;color:var(--tx2)}

/* ── slices: static app screens beside their explanation ──────────────────── */
.slice{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(28px,4vw,60px);
  align-items:center;padding:var(--s8) 0;border-top:1px solid var(--line)}
.slice:nth-child(even){grid-template-columns:300px minmax(0,1fr)}
.slice:nth-child(even) .slice__ui{order:-1}
@media(max-width:860px){.slice,.slice:nth-child(even){grid-template-columns:1fr;gap:var(--s6)}
  .slice:nth-child(even) .slice__ui{order:0}}
.slice__ui{justify-self:center}

/* the mock UI chrome, shared by every slice */
.ui{width:300px;background:#0A0A0D;border:1px solid #212130;border-radius:26px;overflow:hidden;
  box-shadow:var(--shadow);color:#F6F5F8;font-size:14px}
html[data-theme="light"] .ui{box-shadow:0 24px 60px -26px rgba(28,22,50,.28)}
.ui__bar{display:flex;justify-content:space-between;padding:12px 18px 4px;font-size:.66rem;
  font-family:var(--fm);color:#F6F5F8;font-weight:600}
.ui__hd{padding:10px 16px 8px;display:flex;align-items:baseline;gap:8px}
.ui__hd h4{font-family:var(--fd);font-size:1.16rem;color:#F6F5F8;margin:0;font-weight:400}
.ui__hd em{font-family:var(--fm);font-size:.63rem;color:#8B889F;margin-left:auto;font-style:normal}
.ui__body{padding:0 12px 14px;display:flex;flex-direction:column;gap:8px}
.ui__tabs{display:flex;justify-content:space-around;padding:10px 0 18px;border-top:1px solid #212130;
  background:#0E0E14}
.ui__tabs i{display:block;width:19px;height:19px;border-radius:6px;background:#2A2A38}
.ui__tabs i.on{background:#8B6BFF}
.it{background:#15151D;border:1px solid #212130;border-radius:14px;padding:11px 12px}
.it__t{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.it__t b{font-size:.82rem;color:#F6F5F8;font-weight:600}
.it__t em{font-family:var(--fm);font-size:.63rem;color:#8B889F;margin-left:auto;font-style:normal}
.dot{width:20px;height:20px;border-radius:6px;background:rgba(139,107,255,.16);flex:0 0 auto;
  display:grid;place-items:center}
.dot i{width:8px;height:8px;border-radius:50%;background:#A98FFF;
  box-shadow:inset -2px -2px 0 rgba(0,0,0,.22)}
.rw{display:flex;align-items:center;gap:8px;font-size:.71rem;color:#A7A4B8;padding:2px 0}
.rw s{flex:0 0 24px;height:3px;border-radius:2px;background:#8B6BFF;text-decoration:none}
.rw s.t2{width:17px;opacity:.8}.rw s.t3{width:12px;opacity:.6}
.rw s.t6{background:#8B889F;height:1.5px}
.rw s.am{background:#FFB338}
.q{background:linear-gradient(145deg,#6242DE,#5735D4 55%,#4A2FB8);border-radius:14px;padding:12px}
.q b{display:block;font-family:var(--fm);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-bottom:5px}
.q p{font-size:.8rem;color:#fff;margin:0;line-height:1.42;max-width:none}
.big{font-family:var(--fd);font-size:1.7rem;color:#F6F5F8;line-height:1;display:block}
.big.am{color:#FFB338}
.sub{font-size:.71rem;color:#A7A4B8}
.split2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#212130;border-radius:14px;
  overflow:hidden}
.split2>div{background:#15151D;padding:12px}
.face{display:flex;gap:6px;justify-content:space-between}
.face button,.face span{flex:1;aspect-ratio:1;border-radius:10px;background:#1B1B25;
  border:1px solid #212130;display:grid;place-items:center;font-size:1.05rem}
.face .on{background:rgba(139,107,255,.18);border-color:#8B6BFF}
.bars{display:flex;align-items:flex-end;gap:3px;height:56px;margin-top:8px}
.bars i{flex:1;background:#2A2A38;border-radius:2px}
.bars i.on{background:#8B6BFF}
.refuse{border:1px dashed #31314A;border-radius:14px;padding:12px;font-size:.75rem;color:#8B889F}
.crisisui{background:rgba(255,111,78,.12);border:1px solid rgba(255,111,78,.3);border-radius:14px;
  padding:12px}
.crisisui b{display:block;font-size:.8rem;color:#F6F5F8;margin-bottom:6px}
.crisisui a{display:flex;justify-content:space-between;font-size:.75rem;color:#A7A4B8;padding:5px 0;
  border-top:1px solid rgba(255,111,78,.18)}
.crisisui a b{font-family:var(--fm);color:#FF6F4E;margin:0;font-size:.75rem}

/* ── refs ─────────────────────────────────────────────────────────────────── */
.refs{display:grid}
.ref{display:grid;grid-template-columns:30px 1fr;gap:var(--s3);padding:var(--s4) 0;
  border-bottom:1px solid var(--line);font-size:.85rem;scroll-margin-top:150px}
.ref:last-child{border-bottom:none}
.ref:target{background:var(--vif);border-radius:10px;padding-inline:var(--s3);
  margin-inline:calc(var(--s3) * -1)}
.ref b{font-family:var(--fm);color:var(--vi2);font-weight:600}
.ref div{color:var(--tx2)}
.ref i{font-style:normal;color:var(--tx)}

/* ── cta + footer ─────────────────────────────────────────────────────────── */
.cta{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  text-align:center}
.cta .wrap{max-width:660px}
.cta .stores{justify-content:center;margin-top:var(--s5)}
.cta svg.appicon{margin:0 auto var(--s5);display:block}
footer{padding:var(--s8) 0 var(--s7);background:var(--bg2);border-top:1px solid var(--line)}
.fgrid{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin-bottom:var(--s6)}
.fgrid h4{font-family:var(--fm);font-size:.69rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--tx3);font-weight:600;margin-bottom:var(--s3)}
.fgrid a{display:block;font-size:.88rem;color:var(--tx2);margin-bottom:var(--s2)}
.fnote{font-size:.81rem;color:var(--tx3);max-width:74ch}

/* ── reveal ───────────────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(18px)}
.no-gsap .rv{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .rv{opacity:1!important;transform:none!important}
  #field{display:none}
}

/* ── material plates ──────────────────────────────────────────────────────
   Six photographs, three subjects, one per theme. Not two exposures of one
   file: light mode is the same object at a different hour, shot flat, because
   raking light on a paper ground reads as a mistake.

   All three are the product's own material world — a leaflet folded past
   reading, a correction pasted over the line it corrects, a stack of research
   with tabs on the pages that disagree. No people, no packaging, no legible
   type. They carry the argument rather than decorating it, and they sit under
   the copy at low opacity so the page stays the thing being read. */
.plate{position:relative}
.plate::before{content:"";position:absolute;inset:0;z-index:0;background-size:cover;
  background-position:center;opacity:.09;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 74%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 74%,transparent)}
html[data-theme="light"] .plate::before{opacity:.22}
.plate--leaflet::before{background-image:url("../img/leaflet-dark.jpg")}
.plate--errata::before{background-image:url("../img/errata-dark.jpg")}
.plate--foreedge::before{background-image:url("../img/foreedge-dark.jpg")}
html[data-theme="light"] .plate--leaflet::before{background-image:url("../img/leaflet-light.jpg")}
html[data-theme="light"] .plate--errata::before{background-image:url("../img/errata-light.jpg")}
html[data-theme="light"] .plate--foreedge::before{background-image:url("../img/foreedge-light.jpg")}

/* a plate used as a figure rather than a ground: full width, captioned, and it
   states what it is so nobody has to guess whether it is stock decoration */
.figplate{margin:var(--s6) 0 0;position:relative}
.figplate img{width:100%;height:clamp(180px,26vw,300px);object-fit:cover;border-radius:var(--r);
  display:block;filter:saturate(.2)}
/* the light plates came back with type sharp enough to read as gibberish, which
   reads as fake. Blurred to the focus falloff the dark ones already had. */
html[data-theme="light"] .figplate img{filter:saturate(.15) contrast(1.03) blur(1.6px);
  transform:scale(1.02)}
.figplate{overflow:hidden;border-radius:var(--r)}
.figplate figcaption{font-size:.81rem;color:var(--tx3);margin-top:var(--s3);max-width:60ch}
.figplate .dk{display:block} .figplate .lt{display:none}
html[data-theme="light"] .figplate .dk{display:none}
html[data-theme="light"] .figplate .lt{display:block}
@media(prefers-reduced-motion:reduce){.plate::before{opacity:.07}}