/* /how-it-works — the 2026-09-21 redesign, built to how-it-works-mock.html (ruled Bret, Sep 21 9:07 AM PT).
   ⛔⛔ EVERY RULE IS SCOPED UNDER `.hiw`, INCLUDING THE TOKENS. Same pattern as warmpaths.css under `.wp`,
   and for the same reason: /styles.css loads first and owns the signup modal that the Join buttons open, so
   this file must not be able to reach it. A `:root` token block here would leak into every page that ever
   loads this stylesheet.
   ⚠ THE ONE DELIBERATE EXCEPTION IS NOT IN THIS FILE: the door card is `.doorcard` in /styles.css, shared
   rather than copied (ruled: "same component as the /doors redesign. Share the code; don't make a second
   copy"). It is site-wide on purpose — a component only /how-it-works can use is a second copy waiting to
   happen. */
.hiw{--bg:#f6f4ef;--bg2:#efebe3;--card:#fff;--ink:#231e1a;--ink2:#4a423b;--muted:#7a716a;--line:#e3ddd2;
  --terra:#c4623a;--terra-dk:#a44e2c;--terra-lt:#f6e3da;--sage:#dfe6d2;--sage-ink:#48553a;--gold:#f1e6cf;
  --gold-ink:#6b4f1d;--gold-dk:#b08a3c;--sky:#dde6ef;--sky-ink:#2f4a63;--night:#1c1815;--night2:#26211d}
.hiw *{box-sizing:border-box}
.hiw{background:var(--bg);color:var(--ink);font:16px/1.55 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.hiw a{color:inherit}
.hiw .wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.hiw .mono{font:500 11px/1 JetBrains Mono,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--terra)}
.hiw h1,.hiw h2,.hiw h3,.hiw h4{font-family:Fraunces,serif;font-weight:600;letter-spacing:-.012em;margin:0}
.hiw .btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;font-weight:600;padding:14px 22px;border-radius:12px;text-decoration:none;transition:transform .15s,background .15s;border:0;cursor:pointer;font-size:15px}
.hiw .btn:hover{background:#000;transform:translateY(-1px)}
.hiw .btn.terra{background:var(--terra)}.hiw .btn.terra:hover{background:var(--terra-dk)}
.hiw .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.hiw nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
.hiw .logo{display:flex;align-items:center;gap:10px;font:600 22px Fraunces,serif;text-decoration:none}
.hiw .logo img{width:26px;height:26px;display:block}
.hiw nav .links{display:flex;gap:22px;align-items:center;font-size:14.5px;color:var(--ink2)}
.hiw nav .links a{text-decoration:none}
.hiw section{padding:88px 0}
.hiw .sec-head{max-width:720px;margin:0 auto 44px;text-align:center}
.hiw .sec-head h2{font-size:clamp(34px,4.6vw,54px);line-height:1.05;margin-top:14px}
.hiw .sec-head p{color:var(--ink2);font-size:18px;margin:16px auto 0;max-width:600px}

/* HERO */
.hiw .hero{padding:44px 0 40px}
.hiw .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
/* ⚖️ RULED 2026-09-21: exactly two lines at desktop — "Percy finds the fit." / "Both sides say yes."
   ⛔ THE CLAMP CAP WAS 72px AND THAT IS WHAT BROKE IT: at 1400 the cap wins inside a 563px column, so
   "Percy finds the" alone overflows and the H1 fell to FOUR lines. 56px fits both lines in the column.
   ⭐ `nowrap` IS THE GUARANTEE, NOT THE FIX. 56px is what makes two lines POSSIBLE; nowrap is what stops
   a longer word, a different face, or a fallback font re-wrapping them — a size that happens to fit today
   is not the same as a line that cannot break.
   ⚠ DESKTOP ONLY. Below 980px the lines are free again, because nowrap at 390px would overflow the
   viewport and take the horizontal-scroll guarantee with it. Mobile already reads right at two lines. */
.hiw .hero h1{font-size:clamp(42px,5.4vw,56px);line-height:1.02;margin-top:18px}
@media (min-width:980px){ .hiw .hero h1 .l{white-space:nowrap;display:block} }
.hiw .hero h1 em{font-style:normal;color:var(--terra)}
.hiw .hero .lead{font-size:20px;color:var(--ink2);margin:22px 0 28px;max-width:540px}
.hiw .hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hiw .graph{position:relative;aspect-ratio:1/1;max-width:500px;justify-self:center;width:100%}
.hiw .graph svg{width:100%;height:100%;overflow:visible}
.hiw .g-line{fill:none;stroke:var(--line);stroke-width:2}
.hiw .g-live{fill:none;stroke:var(--terra);stroke-width:3;stroke-linecap:round;stroke-dasharray:220;stroke-dashoffset:220;animation:hiw-gdraw 9s infinite}
.hiw .g-live.b{animation-delay:3s}.hiw .g-live.c{animation-delay:6s}
@keyframes hiw-gdraw{0%{stroke-dashoffset:220}12%{stroke-dashoffset:0}28%{stroke-dashoffset:0;opacity:1}34%{opacity:0;stroke-dashoffset:0}100%{opacity:0}}
.hiw .g-node{fill:#fff;stroke:var(--line);stroke-width:1.5}
.hiw .g-node.f{fill:var(--terra-lt);stroke:var(--terra)}
.hiw .g-node.i{fill:var(--gold);stroke:var(--gold-dk)}
.hiw .g-node.c{fill:var(--sage);stroke:var(--sage-ink)}
.hiw .g-percy{fill:var(--night)}
.hiw .g-ring{fill:none;stroke:var(--terra);stroke-width:1.5;opacity:.5;transform-origin:250px 262px;animation:hiw-ring 3s infinite}
@keyframes hiw-ring{0%{transform:scale(.8);opacity:.6}100%{transform:scale(1.6);opacity:0}}
.hiw .g-t{font:600 17px Fraunces,serif;fill:var(--ink);text-anchor:middle}
.hiw .g-s{font:400 11.5px Inter;fill:var(--muted);text-anchor:middle}
.hiw .g-pt{font:600 15px Fraunces,serif;fill:#fff;text-anchor:middle}
/* Percy’s mark inside the night-filled node. Cream, not charcoal: `.hpm-perch` on the homepage is
   --accent-charcoal, which disappears on this fill. */
.hiw .g-mh{fill:var(--terra)}
.hiw .g-mp{fill:#f3eee7}
.hiw .g-tag{opacity:0;animation:hiw-gtag 9s infinite}
.hiw .g-tag.b{animation-delay:3s}.hiw .g-tag.c{animation-delay:6s}
@keyframes hiw-gtag{0%,10%{opacity:0}14%,28%{opacity:1}34%,100%{opacity:0}}
.hiw .g-tag rect{fill:var(--night)}.hiw .g-tag text{font:500 11px Inter;fill:#fff;text-anchor:middle}

/* DEMO */
.hiw .demo{background:var(--night);color:#f3eee7;border-radius:28px;margin:0 24px;padding:72px 0 56px}
.hiw .demo .sec-head p{color:#bfb5aa}
.hiw .demo .mono{color:#e7a07f}
.hiw .demo .sec-head h2{color:#fff}
/* "From deck to opened door." — the homepage's italic accent (Bret 2026-10-02), in this page's accent for dark grounds */
.hiw .demo .sec-head h2 em{font-style:italic;color:#e7a07f;white-space:nowrap}
.hiw .player{max-width:980px;margin:0 auto;border-radius:18px;overflow:hidden;background:#0f0d0b;border:1px solid #3a332d;box-shadow:0 40px 100px rgba(0,0,0,.5)}
.hiw .player .bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid #2c2622;font:500 11px JetBrains Mono,monospace;letter-spacing:.1em;color:#9d9288;text-transform:uppercase}
.hiw .player .bar i{width:10px;height:10px;border-radius:50%;background:#3a332d;display:block}
.hiw .player .bar span{margin-left:10px}
/* ⭐ THE REAL /demo PLAYER, FRAMED (ruled: "Embed the REAL /demo player (90-s cut) there, not a video file
   and not a copy"). ⛔ AN IFRAME RATHER THAN AN IMPORT, and the reason is mechanical: demo.js has ZERO
   exports and binds at import time to hardcoded ids (dm-stage, dm-scrub, dm-play…), so importing it would
   mean reproducing its whole skeleton inside `.hiw` and loading demo.css — which is exactly the CSS bleed
   the scoping rule above exists to prevent. A frame gives isolation for free. */
.hiw .screen{aspect-ratio:16/9;position:relative;background:#15110e}
.hiw .screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.hiw .chapters{max-width:980px;margin:18px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.hiw .chap{border-top:2px solid #3a332d;padding-top:10px;font-size:13.5px;color:#cfc5ba;cursor:pointer;transition:border-color .2s,color .2s;background:none;border-left:0;border-right:0;border-bottom:0;text-align:left;font-family:inherit}
.hiw .chap:hover,.hiw .chap.on{border-top-color:var(--terra);color:#fff}
.hiw .chap:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
.hiw .chap small{display:block;font:500 10.5px JetBrains Mono,monospace;color:#8f857b;letter-spacing:.1em;margin-bottom:4px}
.hiw .demo .note{text-align:center;color:#8f857b;font-size:13px;margin-top:26px}

/* SIDES */
.hiw .tabs{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:34px}
.hiw .tab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 18px;font:600 14.5px Inter;color:var(--ink2);cursor:pointer;transition:background .2s,color .2s,border-color .2s;display:flex;align-items:center;gap:8px}
.hiw .tab i{width:9px;height:9px;border-radius:50%;display:block}
.hiw .tab[data-s=founder] i{background:var(--terra)}.hiw .tab[data-s=investor] i{background:var(--gold-dk)}.hiw .tab[data-s=community] i{background:var(--sage-ink)}.hiw .tab[data-s=cofounder] i{background:var(--sky-ink)}
.hiw .tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.hiw .tab:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
.hiw .pane{display:none}
.hiw .pane.on{display:block;animation:hiw-fade .45s ease}
@keyframes hiw-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hiw .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:st}
.hiw .st{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px 18px 18px;display:flex;flex-direction:column;position:relative;min-height:380px}
.hiw .st::before{counter-increment:st;content:"0" counter(st);font:500 11px JetBrains Mono,monospace;letter-spacing:.14em;color:var(--muted)}
.hiw .st h4{font-size:22px;line-height:1.12;margin:10px 0 8px}
.hiw .st p{font-size:14.5px;color:var(--ink2);margin:0 0 16px}
.hiw .viz{margin-top:auto;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:14px;min-height:150px;position:relative;overflow:hidden;font-size:13px}
.hiw .pane .more{text-align:center;margin-top:26px}
.hiw .pane .more a{font-weight:600;text-decoration:none;border-bottom:2px solid var(--terra);padding-bottom:2px}

/* viz bits */
.hiw .file{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 10px;animation:hiw-drop 6s infinite}
.hiw .file b{width:28px;height:34px;border-radius:5px;background:var(--terra);color:#fff;font:600 9px Inter;display:grid;place-items:end center;padding-bottom:4px}
@keyframes hiw-drop{0%{transform:translateY(-40px);opacity:0}12%,100%{transform:none;opacity:1}}
.hiw .fields{margin-top:10px;display:grid;gap:6px}
.hiw .fld{height:9px;border-radius:5px;background:var(--line);position:relative;overflow:hidden}
.hiw .fld::after{content:"";position:absolute;inset:0;background:var(--terra);opacity:.55;transform:scaleX(0);transform-origin:left;animation:hiw-fill 6s infinite}
.hiw .fld:nth-child(2)::after{animation-delay:.4s}.hiw .fld:nth-child(3)::after{animation-delay:.8s}.hiw .fld:nth-child(4)::after{animation-delay:1.2s}
@keyframes hiw-fill{0%,20%{transform:scaleX(0)}40%,100%{transform:scaleX(1)}}
.hiw .fld:nth-child(2){width:80%}.hiw .fld:nth-child(3){width:92%}.hiw .fld:nth-child(4){width:64%}
.hiw .mfit{background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 12px}
.hiw .mfit .t{display:flex;justify-content:space-between;align-items:center}
.hiw .mfit strong{font:600 15px Fraunces,serif}
.hiw .pill{white-space:nowrap;font:600 11px Inter;padding:4px 9px;border-radius:999px;background:var(--sage);color:var(--sage-ink)}
.hiw .pill.g{background:var(--gold);color:var(--gold-ink)}
.hiw .ticks{margin-top:8px;display:grid;gap:4px;color:var(--ink2);font-size:12.5px}
.hiw .ticks span{opacity:0;animation:hiw-tk 6s infinite}
.hiw .ticks span:nth-child(2){animation-delay:.5s}.hiw .ticks span:nth-child(3){animation-delay:1s}
.hiw .ticks span::before{content:"\2713 ";color:var(--sage-ink);font-weight:700}
@keyframes hiw-tk{0%,15%{opacity:0}25%,100%{opacity:1}}
.hiw .link{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.hiw .link .u{font:500 11.5px JetBrains Mono,monospace;color:var(--terra)}
.hiw .link .items{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.hiw .link .items span{font-size:11.5px;background:var(--bg2);border-radius:6px;padding:3px 7px}
.hiw .opened{margin-top:10px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.hiw .opened i{width:7px;height:7px;border-radius:50%;background:var(--sage-ink);animation:hiw-blink 1.6s infinite}
@keyframes hiw-blink{50%{opacity:.25}}
.hiw .yes{display:flex;justify-content:center;gap:14px;margin-top:6px}
.hiw .yes div{text-align:center;font-size:11.5px;color:var(--muted)}
.hiw .yes b{width:40px;height:40px;border-radius:50%;border:2px dashed var(--line);display:grid;place-items:center;margin:0 auto 4px;color:#fff;font-size:17px;animation:hiw-ok 6s infinite}
.hiw .yes div:nth-child(2) b{animation-delay:1.2s}
@keyframes hiw-ok{0%,20%{background:transparent;border-color:var(--line)}30%,100%{background:var(--sage-ink);border:2px solid var(--sage-ink)}}
.hiw .msg{margin-top:12px;background:var(--night);color:#fff;border-radius:12px 12px 12px 4px;padding:9px 11px;font-size:12.5px;opacity:0;animation:hiw-msg 6s infinite}
@keyframes hiw-msg{0%,50%{opacity:0;transform:translateY(8px)}60%,100%{opacity:1;transform:none}}
.hiw .msg small{display:block;color:#b8ada2;font-size:10.5px;margin-bottom:2px}
.hiw .claim .row{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-bottom:7px;font-size:12.5px}
.hiw .claim .ok{color:var(--sage-ink);font-weight:700;opacity:0;animation:hiw-tk 6s infinite 1s}
.hiw .board .r{display:grid;grid-template-columns:1fr 70px;gap:8px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 9px;margin-bottom:6px;font-size:12px;animation:hiw-drop 6s infinite}
.hiw .board .r:nth-child(2){animation-delay:.3s}.hiw .board .r:nth-child(3){animation-delay:.6s}
.hiw .bar2{height:6px;border-radius:3px;background:var(--line);overflow:hidden}.hiw .bar2 i{display:block;height:100%;background:var(--gold-dk)}
.hiw .gl{display:flex;gap:8px;margin-top:4px}
.hiw .gl span{flex:1;text-align:center;padding:8px;border-radius:9px;font-weight:600;font-size:12.5px;border:1px solid var(--line);background:#fff}
.hiw .gl span.go{background:var(--sage-ink);color:#fff;border-color:var(--sage-ink);animation:hiw-press 6s infinite}
@keyframes hiw-press{0%,40%{transform:none}45%{transform:scale(.94)}50%,100%{transform:none}}
.hiw .give{display:flex;flex-wrap:wrap;gap:6px}
.hiw .give span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 11px;font-size:12.5px;animation:hiw-lit 6s infinite}
.hiw .give span:nth-child(2){animation-delay:2s}.hiw .give span:nth-child(3){animation-delay:4s}
@keyframes hiw-lit{0%,5%{background:#fff;color:var(--ink)}10%,30%{background:var(--sage-ink);color:#fff}35%,100%{background:#fff;color:var(--ink)}}
.hiw .unlock{margin-top:12px;font-size:12px;color:var(--sage-ink);font-weight:600}
.hiw .ask{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 11px;font-size:12.5px;color:var(--ink2)}
.hiw .ask i{font-style:normal;color:var(--muted);font-size:11px;display:block;margin-bottom:3px}
.hiw .blur{filter:blur(4px);animation:hiw-unblur 6s infinite}
@keyframes hiw-unblur{0%,45%{filter:blur(4px)}60%,100%{filter:none}}
.hiw .people{display:flex;gap:8px}
.hiw .person{flex:1;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px;font-size:11.5px;color:var(--ink2)}
.hiw .person b{display:block;font:600 13px Fraunces,serif;color:var(--ink);margin-bottom:3px}
.hiw .person .tg{display:inline-block;margin-top:5px;background:var(--sky);color:var(--sky-ink);border-radius:999px;padding:2px 7px;font-size:10.5px;font-weight:600}
.hiw .plus{text-align:center;font:600 20px Fraunces,serif;color:var(--sky-ink);margin:6px 0}

/* PERCY */
.hiw .percy .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.hiw .percy h2{font-size:clamp(34px,4.4vw,52px);line-height:1.05;margin-top:14px}
.hiw .percy p{color:var(--ink2);font-size:17.5px}
.hiw .percy ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px}
.hiw .percy li{display:flex;gap:10px;font-size:15.5px}
.hiw .percy li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--terra);margin-top:8px}
.hiw .percy .mcp-line{font-size:15px;margin-top:16px}
.hiw .percy .mcp-line a{color:var(--terra);font-weight:600;text-decoration:none}
.hiw .chat{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 30px 80px rgba(35,30,26,.10)}
.hiw .bub{max-width:88%;padding:12px 15px;border-radius:16px;font-size:15px;margin-bottom:12px;opacity:0;animation:hiw-bub .6s forwards}
.hiw .bub.me{margin-left:auto;background:var(--ink);color:#fff;border-bottom-right-radius:5px}
.hiw .bub.p{background:var(--bg);border:1px solid var(--line);border-bottom-left-radius:5px}
.hiw .bub.p small{display:block;font:500 10.5px JetBrains Mono,monospace;letter-spacing:.12em;color:var(--terra);text-transform:uppercase;margin-bottom:4px}
.hiw .bub:nth-child(2){animation-delay:.9s}.hiw .bub:nth-child(3){animation-delay:1.8s}.hiw .bub:nth-child(4){animation-delay:2.7s}
@keyframes hiw-bub{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hiw .chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.hiw .chips span{font-size:12.5px;border:1px solid var(--line);border-radius:999px;padding:5px 10px;background:#fff}

/* RULES */
.hiw .rules{background:var(--night);color:#f3eee7;border-radius:28px;margin:0 24px}
.hiw .rules .sec-head p{color:#bfb5aa}.hiw .rules .mono{color:#e7a07f}
.hiw .rules .sec-head h2{color:#fff}
.hiw .rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#3a332d;border-radius:18px;overflow:hidden}
.hiw .rgrid div{background:var(--night2);padding:26px 22px}
.hiw .rgrid h4{font-size:21px;color:#fff;margin-bottom:8px;line-height:1.15}
.hiw .rgrid p{font-size:14.5px;color:#bfb5aa;margin:0}
.hiw .rgrid b{font:500 11px JetBrains Mono,monospace;color:#e7a07f;letter-spacing:.14em;display:block;margin-bottom:14px}

/* DOORS — the grid only; the CARD is `.doorcard` in /styles.css (shared, not copied) */
.hiw .doors .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

/* CLOSE */
.hiw .close{text-align:center;padding:80px 0 100px}
.hiw .close h2{font-size:clamp(40px,5.6vw,72px);line-height:1.02}
.hiw .close p{color:var(--ink2);font-size:18px;margin:18px 0 28px}
.hiw footer{border-top:1px solid var(--line);padding:26px 0;color:var(--muted);font-size:13.5px}
.hiw footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hiw footer a{text-decoration:none;margin-left:18px}

/* ⭐⭐ THE REVEAL IS OPT-IN, NOT OPT-OUT. `.reveal` hides nothing until `html.hiw-js` exists, and that class
   is set by a head script BEFORE first paint. So a blocked, failed or disabled JS leaves every block
   visible — the page degrades to a plain scroll rather than to a blank one. Same contract as warmpaths. */
.hiw .reveal{opacity:1;transform:none}
.hiw-js .hiw .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.hiw-js .hiw .reveal.in{opacity:1;transform:none}

@media (max-width:980px){
 .hiw .hero .wrap,.hiw .percy .wrap{grid-template-columns:1fr}
 .hiw .flow{grid-template-columns:1fr 1fr}
 .hiw .rgrid,.hiw .doors .grid{grid-template-columns:1fr 1fr}
 .hiw nav .links a:not(.btn){display:none}
}
@media (max-width:620px){
 .hiw .wrap{padding:0 16px}
 .hiw section{padding:64px 0}
 .hiw .flow,.hiw .rgrid,.hiw .doors .grid{grid-template-columns:1fr}
 .hiw .st{min-height:0}
 .hiw .demo,.hiw .rules{margin:0 10px;border-radius:22px}
 /* ⚠ THE CHAPTER ROW SCROLLS SIDEWAYS INSIDE ITSELF (ruled item 7) — the PAGE must not. `min-width:0` on
    the track is what actually prevents the overflow escaping to the body at 390px; without it a grid item
    takes its max-content width and pushes the document wide. */
 .hiw .chapters{grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);grid-template-columns:none;overflow-x:auto;padding-bottom:6px;min-width:0;-webkit-overflow-scrolling:touch}
 .hiw .graph{max-width:340px}
}

/* ⛔⛔ REDUCED MOTION SHOWS THE **END STATE**, WHICH IS NOT WHAT ZEROING THE DURATION DOES.
   `animation-duration:0s` alone leaves an element at its BASE style, and several of these start at
   `opacity:0` — the ticks, the message bubble, the claim check and the hero's tags would all be INVISIBLE,
   which is worse than animating. `animation-fill-mode:forwards` is what lands them on the last keyframe.
   ⚠ AND FOR THREE OF THEM THE LAST KEYFRAME IS STILL WRONG: `hiw-gdraw`, `hiw-gtag` and `hiw-ring` END at
   opacity 0 because they are cycles that fade out. Their "end state" in any meaningful sense is the drawn
   line and the visible label, so those are set explicitly rather than inherited from a keyframe. */
@media (prefers-reduced-motion:reduce){
 .hiw *{animation-duration:0s!important;animation-delay:0s!important;animation-iteration-count:1!important;animation-fill-mode:forwards!important}
 .hiw .reveal,.hiw-js .hiw .reveal{opacity:1!important;transform:none!important;transition:none!important}
 .hiw .g-live{animation:none!important;stroke-dashoffset:0;opacity:1}
 .hiw .g-tag{animation:none!important;opacity:1}
 .hiw .g-ring{animation:none!important;opacity:.4}
 .hiw .btn:hover{transform:none}
}