:root{
  --paper:#f3f5f8; --card:#ffffff; --ink:#15171d; --muted:#5d6370; --rule:#d9dde5;
  --magenta:#d1006f; --cyan:#0089c7; --yellow:#f5c400;
  --display:"Archivo Black","Arial Black",Impact,sans-serif;
  --body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --paper:#111318; --card:#1b1e25; --ink:#eef0f4; --muted:#9aa1ae; --rule:#2c313b;
  --magenta:#ff4fa3; --cyan:#3fb6ec; --yellow:#ffd23a; color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6}
.wrap{max-width:720px;margin:0 auto;padding:28px max(16px,env(safe-area-inset-right)) 64px max(16px,env(safe-area-inset-left))}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.logo{font-family:var(--display);text-transform:uppercase;font-size:20px;letter-spacing:.4px;color:var(--ink);text-decoration:none}
.logo span{color:var(--magenta)}
nav{display:flex;gap:16px;font-size:15px;flex-wrap:wrap}
nav a{color:var(--ink);text-decoration:none;font-weight:600}
nav a:hover,nav a[aria-current]{color:var(--magenta)}
header.page{border-bottom:3px solid var(--ink);padding-bottom:16px;margin:20px 0 24px}
.hero{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;margin:28px 0 8px;padding-bottom:28px;border-bottom:3px solid var(--ink)}
@media (max-width:560px){.hero{grid-template-columns:1fr}}
h1{font-family:var(--display);text-transform:uppercase;font-size:clamp(28px,7vw,48px);line-height:1.04;margin:0 0 12px;text-wrap:balance;letter-spacing:.3px}
header.page h1{font-size:clamp(28px,6vw,40px);margin:0 0 8px}
.lede{font-size:18px;color:var(--muted);max-width:46ch;margin:0}
.meta{color:var(--muted);font-size:14px}
.slab{width:150px;border:3px solid var(--ink);border-radius:10px;background:var(--card);overflow:hidden;text-align:center}
.slab .lbl{background:var(--yellow);color:#15171d;font-family:var(--display);font-size:12px;letter-spacing:.12em;padding:6px 0;text-transform:uppercase}
.slab .g{font-family:var(--display);font-size:56px;line-height:1;padding:14px 0 6px;color:var(--magenta)}
.slab .t{font-size:12px;color:var(--muted);padding:0 8px 12px;text-transform:uppercase;letter-spacing:.08em}
h2{font-family:var(--display);text-transform:uppercase;font-size:18px;letter-spacing:.4px;margin:34px 0 10px;text-wrap:balance}
p,li{max-width:66ch}
ul{padding-left:22px;margin:8px 0} li{margin:6px 0}
.features{display:grid;gap:16px}
.f b{font-weight:700;display:block}
.f p{margin:2px 0 0;color:var(--muted)}
.box{background:var(--card);border:2px solid var(--ink);border-radius:10px;padding:16px 20px;margin:14px 0}
.box h2{margin-top:2px}
.note{margin-top:28px;padding:14px 18px;border:2px solid var(--ink);border-radius:10px;background:var(--card);font-size:15px}
.steps{counter-reset:s;list-style:none;padding:0}
.steps li{counter-increment:s;position:relative;padding-left:44px;margin:14px 0}
.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;background:var(--magenta);color:#fff;font-family:var(--display);display:grid;place-items:center;font-size:15px}
.cta{display:inline-block;background:var(--magenta);color:#fff;font-family:var(--display);text-transform:uppercase;letter-spacing:.4px;padding:12px 18px;border-radius:8px;text-decoration:none;margin-top:6px}
a{color:var(--cyan);text-underline-offset:2px}
a:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.mail{font-weight:700}
details{border-top:1px solid var(--rule);padding:10px 0}
summary{font-weight:700;cursor:pointer}
details p{color:var(--muted);margin:8px 0 0}
footer{margin-top:44px;padding-top:14px;border-top:1px solid var(--rule);color:var(--muted);font-size:14px;display:flex;flex-wrap:wrap;gap:8px 20px}
footer a{color:var(--muted)}
