:root{--bg:#f6faf9;--ink:#0f2a3d;--muted:#4b6472;--line:#cfe0dc;--sea:#dff1ec;--btn:#0f2a3d;--btn-ink:#fff}
@media (prefers-color-scheme:dark){:root{--bg:#0c1a24;--ink:#e8f1ef;--muted:#9db4bd;--line:#24404f;--sea:#12303a;--btn:#f2c14e;--btn-ink:#0c1a24}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 "Avenir Next","Segoe UI",system-ui,sans-serif}
main,header,footer{max-width:680px;margin:0 auto;padding:0 22px}
header{padding-top:28px;font-weight:700;letter-spacing:.01em}
h1{font-size:clamp(2.2rem,8vw,3.6rem);line-height:1.05;margin:56px 0 18px;letter-spacing:-.02em}
h2{font-size:1.2rem;margin:36px 0 8px}
p,li{max-width:62ch}
.lead{font-size:1.2rem;color:var(--muted)}
a{color:inherit;text-underline-offset:3px}
a:focus-visible{outline:3px solid #f2c14e;outline-offset:3px}
.bar{display:flex;height:22px;border-radius:11px;overflow:hidden;margin:34px 0 10px}
.bar span{display:block}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none;font-size:.95rem;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.cta{display:inline-block;margin:34px 0 8px;padding:13px 24px;border-radius:999px;background:var(--btn);color:var(--btn-ink);font-weight:700;text-decoration:none}
.steps{list-style:none;padding:0;margin:0}
.steps li{padding:14px 0;border-top:1px solid var(--line)}
footer{padding-top:40px;padding-bottom:40px;color:var(--muted);font-size:.95rem}
footer a{margin-right:18px}
.note{background:var(--sea);padding:14px 18px;border-radius:10px}