:root { color-scheme: light; --ink:#17243a; --muted:#526071; --paper:#fff; --wash:#f3f6fa; --brand:#175ea8; --focus:#b64700; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:18px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif; }
.wrap { width:min(100% - 2rem, 760px); margin-inline:auto; }
.site-header { border-bottom:1px solid #d7e0ea; background:#fff; }
.site-header .wrap, footer .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; align-items:center; padding:1rem 0; }
.brand { display:inline-flex; align-items:center; gap:.65rem; font-weight:800; font-size:1.3rem; text-decoration:none; color:var(--ink); }
.brand img { width:2.5rem; height:2.5rem; border-radius:.65rem; object-fit:cover; }
nav { display:flex; flex-wrap:wrap; gap:1rem; }
a { color:var(--brand); text-underline-offset:0.16em; }
a:hover { color:#0b417d; }
a:focus-visible, button:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
nav a[aria-current="page"] { color:var(--ink); font-weight:700; text-decoration-thickness:0.16em; }
.skip-link { position:absolute; left:-999px; top:0; background:#fff; padding:.5rem; z-index:2; }
.skip-link:focus { left:1rem; }
main { padding:3rem 0 4rem; }
.hero { padding:1.5rem 0 2rem; border-bottom:1px solid #d7e0ea; }
.eyebrow { color:var(--brand); font-weight:750; letter-spacing:.08em; text-transform:uppercase; font-size:.82rem; margin:0; }
h1,h2 { line-height:1.2; color:#122f51; }
h1 { font-size:clamp(2rem,7vw,3.5rem); margin:.25rem 0 1rem; }
h2 { margin-top:2.5rem; font-size:1.5rem; }
.lead { font-size:1.2rem; max-width:62ch; }
.steps { padding-left:1.4rem; }
.steps li { margin:.8rem 0; }
.contact { background:var(--wash); border-radius:.7rem; padding:1rem 1.25rem; margin-top:2.5rem; }
.prose { max-width:720px; }
.prose h1 { font-size:2.5rem; }
.prose h2 { margin-bottom:.5rem; }
.prose p, .prose li { max-width:70ch; }
.updated { color:var(--muted); margin-top:-.5rem; }
code { overflow-wrap:anywhere; background:var(--wash); padding:.1rem .25rem; border-radius:.2rem; font-size:.9em; }
footer { background:var(--wash); color:var(--muted); font-size:.95rem; }
footer p { margin:0; }
@media (max-width:560px) { body { font-size:17px; } .site-header .wrap, footer .wrap { align-items:flex-start; flex-direction:column; gap:.5rem; } main { padding-top:2rem; } }