@font-face{font-family:"Dela Gothic One";src:url(fonts/dela-gothic-one-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(fonts/atkinson-hyperlegible-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --paper:#dfeaf2;
  --paper-2:#edf4f9;
  --ink:#111620;
  --ink-soft:#3a4658;
  --robe:#17718a;
  --sulfur:#ff8a3d;
  --pad:#f7fafc;
  --line:3px;
  --shadow:#111620;
  --gutter:clamp(16px,4vw,48px);
}
:root[data-theme="dark"]{
  --paper:#111620;
  --paper-2:#1a2230;
  --ink:#eef3f8;
  --ink-soft:#aebbcc;
  --pad:#1f2a3a;
  --shadow:#05080d;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#111620;
    --paper-2:#1a2230;
    --ink:#eef3f8;
    --ink-soft:#aebbcc;
    --pad:#1f2a3a;
    --shadow:#05080d;
  }
}
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 clamp(17px,1.1vw + 13px,19px)/1.6 "Atkinson Hyperlegible",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--robe);outline-offset:3px;border-radius:4px}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
h1,h2,h3{font-family:"Dela Gothic One","Atkinson Hyperlegible",sans-serif;font-weight:400;margin:0;line-height:1.02;letter-spacing:-.01em}
p{margin:0}

.top{display:flex;align-items:center;justify-content:space-between;padding-top:22px;padding-bottom:22px}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:"Dela Gothic One",sans-serif;font-size:21px}
.mark img{width:40px;height:40px;flex:none;border-radius:10px}
.top a.small{white-space:nowrap;font-weight:700;text-decoration:none;border-bottom:var(--line) solid var(--sulfur);padding-bottom:1px}
.top a.small:hover{border-color:var(--robe)}

.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(28px,5vw,72px);align-items:start;padding-top:clamp(24px,5vw,64px);padding-bottom:clamp(56px,8vw,112px)}
.hero h1{font-size:clamp(44px,7.4vw,96px)}
.hero .lede{margin-top:26px;max-width:30em;font-size:1.12em;color:var(--ink-soft)}
.cta{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-top:34px}
.btn{display:inline-block;font:700 1em/1 "Atkinson Hyperlegible",sans-serif;text-decoration:none;background:var(--ink);color:var(--paper);padding:17px 24px;border-radius:999px;border:var(--line) solid var(--ink);transition:background .15s,color .15s}
.btn:hover{background:var(--sulfur);color:#111620}
.cta .note{font-size:.92em;color:var(--ink-soft)}

figure.fig{margin:0;position:relative}
.fig .ring{position:absolute;inset:-9% -7% auto auto;width:78%;aspect-ratio:1;border:var(--line) solid var(--robe);border-radius:50%;opacity:.55;pointer-events:none}
.fig .ring.two{inset:auto auto -12% -9%;width:44%;border-color:var(--ink);opacity:.25}
.panel{position:relative;background:var(--paper-2);border:var(--line) solid var(--ink);border-radius:20px;box-shadow:10px 10px 0 var(--shadow);padding:clamp(14px,2.2vw,24px)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chip{font:700 .84em/1 "Atkinson Hyperlegible",sans-serif;color:var(--ink);background:transparent;border:2px solid var(--ink);border-radius:999px;padding:9px 13px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.chip:hover{background:var(--sulfur);color:#111620;border-color:#111620}
.say{display:flex;gap:10px;align-items:baseline;min-height:3.3em;font-size:1.02em}
.say b{flex:none;background:var(--sulfur);color:#111620;border-radius:6px;padding:2px 8px;font-size:.82em}
.say span{font-weight:700}
.caret{display:inline-block;width:2px;height:1em;background:var(--ink);vertical-align:-.15em;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.pad-svg{display:block;width:100%;height:auto;margin:6px 0 10px}
.pad-svg .body{fill:var(--pad);stroke:var(--ink);stroke-width:3}
.pad-svg .in{fill:none;stroke:var(--ink);stroke-width:2.5;transition:fill .2s}
.pad-svg .in.dim{opacity:.28}
.pad-svg .in.on{fill:var(--sulfur);stroke:var(--ink)}
.pad-svg .in.on.pulse{animation:pulse .9s ease-out 1}
@keyframes pulse{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
.pad-svg .in{transform-box:fill-box;transform-origin:center}
.pad-svg .glyph{font:700 15px "Atkinson Hyperlegible",sans-serif;fill:var(--ink);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.pad-svg .tick{fill:var(--robe)}
.rows{list-style:none;margin:0;padding:0;display:grid;gap:7px;min-height:10.2em}
.rows li{display:grid;grid-template-columns:9.5em 1fr;gap:12px;align-items:baseline;border-top:2px solid var(--ink);padding-top:7px;opacity:0;transform:translateX(-6px)}
.rows li.in{opacity:1;transform:none;transition:opacity .25s,transform .25s}
.rows .k{font-weight:700}
.rows .v{color:var(--ink-soft)}
.reply{margin-top:12px;font-size:.96em;min-height:3em;opacity:0;transition:opacity .3s}
.reply.in{opacity:1}
.replay{margin-top:4px}
.fig figcaption{margin-top:20px;font-style:italic;color:var(--ink-soft);font-size:.9em}

section{padding:clamp(56px,8vw,110px) 0}
.steps{background:#0a0e15;color:#dfeaf2}
.steps .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:clamp(28px,5vw,72px)}
.steps h2{font-size:clamp(34px,4.6vw,58px)}
.steps ol{list-style:none;margin:0;padding:0;display:grid;gap:34px;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.steps li::before{content:counter(s);font-family:"Dela Gothic One",sans-serif;font-size:44px;line-height:1;color:var(--sulfur);min-width:1.1ch}
.steps h3{font-size:clamp(22px,2.4vw,28px);margin-bottom:8px;line-height:1.1}
.steps p{max-width:34em;opacity:.88}

.access .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.access h2{font-size:clamp(36px,5.6vw,74px)}
.access .copy{margin-top:26px;max-width:32em;color:var(--ink-soft)}
.access .copy p+p{margin-top:16px}
.quotes{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.quotes li{background:var(--paper-2);border:var(--line) solid var(--ink);border-radius:18px 18px 18px 4px;padding:16px 20px;font-weight:700}
.quotes li:nth-child(even){margin-left:clamp(0px,4vw,44px);border-radius:18px 18px 4px 18px;background:var(--sulfur);color:#111620}

.get{background:var(--paper-2);border-top:var(--line) solid var(--ink);border-bottom:var(--line) solid var(--ink)}
.get h2{font-size:clamp(32px,4.4vw,56px);margin-bottom:34px}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.col{border:var(--line) solid var(--ink);border-radius:20px;padding:26px;background:var(--paper)}
.col h3{font-size:clamp(24px,2.6vw,32px);margin-bottom:12px}
.col p{color:var(--ink-soft)}
.col .tag{display:inline-block;margin-top:18px;font-weight:700;font-size:.9em;background:var(--ink);color:var(--paper);border-radius:999px;padding:6px 12px}
.col.alt .tag{background:var(--robe);color:#fff}
.get .after{margin-top:34px;max-width:40em}

footer{padding:34px 0 48px;font-size:.88em;color:var(--ink-soft)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
footer p{max-width:46em}

@media (max-width:860px){
  .hero,.steps .wrap,.access .wrap{grid-template-columns:minmax(0,1fr)}
  .cols{grid-template-columns:minmax(0,1fr)}
  .rows li{grid-template-columns:7.6em 1fr}
  .panel{box-shadow:6px 6px 0 var(--shadow)}
  .fig .ring{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

.doc{padding-top:clamp(24px,5vw,64px);padding-bottom:clamp(56px,8vw,110px)}
.doc h1{font-size:clamp(40px,6vw,76px)}
.doc .when{margin-top:18px;color:var(--ink-soft)}
.doc .body{max-width:40em;margin-top:clamp(28px,4vw,48px)}
.doc h2{font-size:clamp(24px,2.8vw,34px);line-height:1.1;margin:clamp(34px,4vw,52px) 0 14px}
.doc p+p,.doc ul+p,.doc p+ul{margin-top:14px}
.doc ul{padding-left:1.2em;margin:0}
.doc li+li{margin-top:8px}
.doc .lead{font-size:1.12em}
footer .links{display:flex;gap:22px}