:root { --ink:#17212b; --muted:#566371; --paper:#fbfcfd; --line:#d9e0e6; --accent:#146c6e; --accent-soft:#e8f5f4; --warm:#f6efe4; --max:70rem; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif; line-height:1.75; }
a { color:var(--accent); }
a:focus-visible { outline:3px solid #e1a647; outline-offset:3px; }
.skip-link { position:absolute; left:-999px; }
.skip-link:focus { left:1rem; top:1rem; z-index:10; background:#fff; padding:.5rem 1rem; }
.site-header,.site-footer { background:#fff; border-color:var(--line); border-style:solid; }
.site-header { border-width:0 0 1px; }.site-footer { border-width:1px 0 0; }
.bar,.container { width:min(calc(100% - 2rem),var(--max)); margin:auto; }
.bar { min-height:4.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.wordmark { color:var(--ink); font-weight:800; text-decoration:none; letter-spacing:.06em; }
.wordmark small { display:block; color:var(--muted); font-size:.68rem; letter-spacing:0; }
nav ul { list-style:none; display:flex; flex-wrap:wrap; gap:1rem; margin:0; padding:0; } nav a { text-decoration:none; font-size:.92rem; }
.hero { padding:5.5rem 0 3.5rem; max-width:54rem; }.eyebrow { margin:0 0 .75rem; color:var(--accent); font-weight:700; letter-spacing:.08em; font-size:.84rem; }
h1,h2,h3 { line-height:1.35; letter-spacing:.015em; } h1 { font-size:clamp(2.1rem,6vw,4.4rem); margin:.1em 0 .45em; } h2 { font-size:clamp(1.5rem,3vw,2.2rem); margin:0 0 1rem; } h3 { margin:.1rem 0 .5rem; }
.lead { font-size:1.15rem; color:var(--muted); max-width:47rem; }.button { display:inline-block; margin-top:1rem; padding:.7rem 1.1rem; color:#fff; background:var(--accent); border-radius:.3rem; text-decoration:none; font-weight:700; }
.section { padding:3.5rem 0; }.section + .section { border-top:1px solid var(--line); }.cards,.steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }.card,.notice,.example,.step { background:#fff; border:1px solid var(--line); border-radius:.5rem; padding:1.25rem; }.card a { font-weight:700; }.notice { border-left:4px solid var(--accent); background:var(--accent-soft); }.example { background:var(--warm); }.steps { counter-reset:step; }.step::before { counter-increment:step; content:"0" counter(step); color:var(--accent); font-weight:800; }.checklist { padding-left:1.4rem; }.checklist li { margin:.8rem 0; }.plain-list { padding-left:1.2rem; }.plain-list li { margin:.45rem 0; }.footer-inner { width:min(calc(100% - 2rem),var(--max)); margin:auto; padding:2rem 0; color:var(--muted); font-size:.9rem; }
@media (max-width:42rem) { .bar { align-items:flex-start; flex-direction:column; padding:1rem 0; }.hero { padding-top:3.5rem; }.cards,.steps { grid-template-columns:1fr; } }