:root{
  --ink:#0f1b2d; --muted:#4a5a70; --bg:#f7f9fc; --card:#fff;
  --accent:#1559d6; --accent-ink:#fff; --line:#dfe5ee; --warn:#b45309;
  --max:1040px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--accent)}
.env-banner{background:var(--warn);color:#fff;text-align:center;font-size:.8rem;font-weight:600;letter-spacing:.06em;padding:.35rem}
.top{max-width:var(--max);margin:0 auto;padding:1.25rem 1.5rem;display:flex;align-items:center;justify-content:space-between}
.brand{font-size:1.5rem;font-weight:800;text-decoration:none;color:var(--ink);letter-spacing:-.02em}
.brand .md{color:var(--accent)}
nav{display:flex;gap:1.25rem;align-items:center}
nav a{text-decoration:none;color:var(--muted);font-weight:500}
.btn-sm{text-decoration:none;background:var(--accent);color:var(--accent-ink)!important;padding:.45rem .9rem;border-radius:8px}
main{max-width:var(--max);margin:0 auto;padding:0 1.5rem 3rem}
.hero{padding:4rem 0 3rem}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.1;margin:0 0 1rem;letter-spacing:-.03em}
.lede{font-size:1.2rem;color:var(--muted);max-width:640px;margin:0 0 .5rem}
.sub{color:var(--muted);font-size:.95rem}
.sub.focus{font-size:1.045rem}
section h2{font-size:1.4rem;margin:0 0 1rem}
.steps,.security{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:2rem;margin-bottom:1.5rem}
.steps ol{margin:0;padding-left:1.25rem;display:grid;gap:.75rem}
.security ul{margin:0;padding-left:1.25rem;display:grid;gap:.5rem}
main.narrow{max-width:480px;padding-top:4rem}
footer{border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:.85rem;padding:1.5rem}
@media (max-width:600px){nav a:not(.btn-sm){display:none}.hero{padding:2.5rem 0 2rem}}
button.btn-sm{border:0;font:inherit;font-weight:500;cursor:pointer}
form.inline{margin-top:1rem}