/* Help site: same tokens as the portal (docs/DESIGN.md) */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@600;700&display=swap');
:root { --ink:#2a2a2a; --bg:#f5f4f2; --surface:#fff; --border:#ddd; --muted:#666; --navy:#1F3A5F; --blue:#2C5F8A; --green:#3E8E63; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:'Lato',-apple-system,Helvetica,Arial,sans-serif; line-height:1.55; }
h1,h2,h3 { font-family:'Montserrat',sans-serif; color:var(--navy); }
.bar { background:var(--ink); color:#fff; padding:12px 24px; display:flex; align-items:center; gap:14px; font-family:'Montserrat'; font-weight:600; }
.bar img { width:34px; height:34px; border-radius:2px; }
.bar nav { margin-left:auto; display:flex; gap:1.2rem; }
.bar a { color:#fff; text-decoration:none; font-weight:400; font-size:0.95rem; }
.bar a.on { font-weight:700; text-decoration:underline; }
main { max-width:1120px; margin:0 auto; padding:32px 16px 64px; display:grid; grid-template-columns:220px minmax(0,1fr); gap:32px; align-items:start; }
main.single { grid-template-columns:minmax(0,860px); justify-content:center; }
.side { position:sticky; top:16px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 0; font-size:0.9rem; }
.side .k { font-size:0.7rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); padding:4px 16px 8px; }
.side a { display:block; padding:6px 16px; color:var(--ink); text-decoration:none; border-left:3px solid transparent; }
.side a:hover { background:var(--bg); }
.side a.on { border-left-color:var(--navy); font-weight:700; color:var(--navy); }
.side .other { margin-top:10px; padding:10px 16px 0; border-top:1px solid var(--border); color:var(--muted); font-size:0.85rem; }
.side .other a { display:inline; padding:0; border:0; color:var(--blue); }
@media (max-width:760px) { main { grid-template-columns:1fr; } .side { position:static; } }
.lead { color:var(--muted); font-size:1.05rem; margin-top:-0.4rem; }
.step { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:20px 24px; margin:18px 0; }
.step h3 { margin:0 0 0.4rem; font-size:1.05rem; }
.step h3 .n { display:inline-block; background:var(--navy); color:#fff; border-radius:999px; width:1.6rem; height:1.6rem; line-height:1.6rem; text-align:center; font-size:0.85rem; margin-right:0.5rem; }
.step img { display:block; width:100%; border:1px solid var(--border); border-radius:8px; margin-top:0.8rem; }
.note { border-left:3px solid var(--blue); background:#F7FAFD; padding:0.6rem 0.9rem; border-radius:6px; font-size:0.95rem; }
.toc { display:flex; gap:1rem; flex-wrap:wrap; margin:1rem 0 1.5rem; }
.toc a { background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:4px 12px; text-decoration:none; color:var(--ink); font-size:0.9rem; }
footer { color:var(--muted); font-size:0.85rem; text-align:center; padding:2rem 1rem; }
@media (max-width:640px) { .bar nav { gap:0.8rem; } }
.legend { list-style:none; padding:0; margin:0.6rem 0 0; display:flex; flex-wrap:wrap; gap:0.35rem 1.2rem; font-size:0.9rem; color:var(--muted); }
.legend .lb { display:inline-block; background:#B41E1E; color:#fff; border-radius:999px; width:1.35rem; height:1.35rem; line-height:1.35rem; text-align:center; font-size:0.75rem; font-weight:700; margin-right:0.4rem; }