/* Colors/type come from /brand.css (Remm tokens). */
* { box-sizing: border-box; }
body { margin:0; font-family:var(--sans); -webkit-font-smoothing:antialiased; color:var(--fg); background:var(--bg); line-height:1.7; word-break:keep-all; }
a { color:var(--fg); text-underline-offset:3px; }
.wrap { max-width:760px; margin:0 auto; padding:0 20px; }
header { display:flex; align-items:center; justify-content:space-between; padding:18px 0; }
.logo svg { width:28px; height:28px; }
nav a { color:var(--mute); text-decoration:none; font-size:.95rem; margin-left:18px; }
.crumb { font-size:.9rem; color:var(--mute); margin:24px 0 8px; }
.crumb a { color:var(--mute); }
h1 { font-size:clamp(1.8rem,4vw,2.4rem); line-height:1.25; margin:0 0 12px; letter-spacing:-.04em; }
.lead { color:var(--mute); font-size:1.05rem; margin:0 0 28px; }
h2 { font-size:1.3rem; margin:44px 0 12px; letter-spacing:-.01em; }
h3 { font-size:1.05rem; margin:26px 0 6px; }
ol.steps { list-style:none; counter-reset:s; padding:0; margin:0; }
ol.steps > li { counter-increment:s; position:relative; padding:0 0 22px 44px; }
ol.steps > li::before { content:counter(s); position:absolute; left:0; top:1px; width:28px; height:28px; border-radius:50%; background:var(--fg); color:var(--bg); font-weight:700; font-size:.9rem; display:flex; align-items:center; justify-content:center; }
ol.steps > li b { display:block; }
.box { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin:18px 0; }
.box.warn { border-color:color-mix(in srgb, var(--warn) 45%, var(--line)); }
.box.warn b { color:var(--warn); }
.box.ax { margin-top:40px; }
.box.ax b { display:block; margin-bottom:4px; }
.box.ax .btn { margin-top:12px; }
figure { margin:14px 0 6px; }
figure img { width:100%; border-radius:14px; border:1px solid var(--line); display:block; }
figure.narrow img { max-width:420px; }
figcaption { color:var(--mute); font-size:.88rem; margin-top:6px; }
.cards { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0; }
.cards a { display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px 20px; text-decoration:none; color:var(--fg); }
.cards a span { display:block; color:var(--mute); font-size:.93rem; margin-top:4px; }
.btn { display:inline-block; padding:11px 20px; border-radius:var(--pill); font-weight:650; text-decoration:none; background:var(--primary); color:var(--on-primary); margin-top:6px; }
code, .ui { font-family:inherit; background:var(--card); border:1px solid var(--line); border-radius:6px; padding:1px 6px; font-size:.92em; white-space:nowrap; }
dl.faq dt { font-weight:700; margin-top:18px; }
dl.faq dd { margin:4px 0 0; color:var(--fg); }
footer { margin-top:56px; padding:28px 0 44px; color:var(--mute); font-size:.9rem; border-top:1px solid var(--line); }
footer a { color:var(--mute); margin-right:14px; }
@media (max-width:640px) { .cards { grid-template-columns:1fr; } nav a.hide-sm { display:none; } }