:root{
  --paper:#EFEAF3; --surface:#FFFFFF; --ink:#22182E; --muted:#62586D;
  --ribbon:#B8325A; --line:#D9D0E2;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#1A1422; --surface:#241C2E; --ink:#F1ECF6; --muted:#B3A8BF;
    --ribbon:#F0789B; --line:#3A3046;
    color-scheme: dark;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:1.0625rem;line-height:1.6}
a{color:var(--ribbon);text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--ribbon);outline-offset:3px;border-radius:2px}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.5rem}
header.site{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 0}
.mark{font-weight:700;font-size:1.25rem;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
nav a{color:var(--ink);margin-left:1.5rem;text-decoration:none}
nav a:hover{color:var(--ribbon)}
.hero{padding:4rem 0 5rem;position:relative}
.hero h1{font-size:clamp(2.6rem,7vw,5.5rem);line-height:1;letter-spacing:-.035em;font-weight:800;margin:0 0 1.75rem;max-width:14ch}
.ribbon{height:10px;background:var(--ribbon);border-radius:5px;width:min(22rem,60%);margin:0 0 2rem;transform:rotate(-1.5deg)}
.hero p{font-size:1.25rem;color:var(--muted);max-width:38rem;margin:0 0 2rem}
.button{display:inline-block;background:var(--ink);color:var(--paper);padding:.85rem 1.4rem;border-radius:999px;text-decoration:none;font-weight:600}
.button:hover{background:var(--ribbon);color:#fff}
.flow{background:var(--surface);border-radius:1.5rem;padding:3rem 2rem;margin-bottom:4rem}
.flow h2{font-size:1.75rem;letter-spacing:-.02em;margin:0 0 2rem}
.flow ol{list-style:none;margin:0;padding:0;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));counter-reset:step}
.flow li{counter-increment:step;border-top:2px solid var(--line);padding-top:1rem}
.flow li::before{content:counter(step);display:block;font-weight:800;font-size:2rem;color:var(--ribbon);line-height:1;margin-bottom:.75rem}
.flow h3{margin:0 0 .4rem;font-size:1.15rem}
.flow p{margin:0;color:var(--muted)}
.access{max-width:40rem;margin:0 0 5rem}
.access h2{font-size:1.75rem;letter-spacing:-.02em;margin:0 0 .75rem}
.access p{color:var(--muted);margin:0 0 1rem}
footer.site{border-top:1px solid var(--line);padding:2rem 0 3rem;color:var(--muted);font-size:.95rem;display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between}
footer.site p{margin:0}
footer.site a{color:var(--muted)}
.legal{max-width:44rem;padding:2rem 0 4rem}
.legal h1{font-size:clamp(2.2rem,5vw,3.25rem);letter-spacing:-.03em;line-height:1.05;margin:0 0 .5rem}
.legal .updated{color:var(--muted);margin:0 0 2.5rem}
.legal h2{font-size:1.3rem;margin:2.5rem 0 .5rem;letter-spacing:-.01em}
.legal p,.legal li{color:var(--ink)}
.legal ul{padding-left:1.25rem}
@media (max-width:560px){nav a{margin-left:1rem}.flow{padding:2rem 1.25rem}.hero{padding:2.5rem 0 3.5rem}}