:root{--ink:#183B32;--paper:#F7F3E8;--accent:#F2B550;--white:#FFFFFF;--line:#CFD8CA}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:1.05rem/1.65 "DM Sans",system-ui,sans-serif}
header{border-bottom:1px solid var(--line)}
nav,main,footer{width:min(1100px,calc(100% - 2.5rem));margin:auto}
nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1rem 0}
nav ul{display:flex;gap:1.1rem;flex-wrap:wrap;list-style:none;margin:0;padding:0}
a{color:inherit;text-underline-offset:.25em}
a:hover{text-decoration-thickness:3px}
a:focus-visible{outline:3px solid currentColor;outline-offset:4px}
.brand{font-size:1.3rem;font-weight:800;text-decoration:none}
[aria-current=page]{font-weight:800}
.hero{margin:2.3rem 0;padding:clamp(1.5rem,5vw,4rem);color:var(--white);background:var(--ink);border-radius:1.6rem;display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;align-items:center}
.hero h1{font-size:clamp(3rem,7.3vw,6rem);line-height:1;letter-spacing:-.055em;margin:0;max-width:9ch}
.hero p{max-width:36ch}
.hero img{width:100%;max-height:280px}
.button{display:inline-block;background:var(--accent);color:var(--ink);padding:.65rem 1.05rem;border-radius:.5rem;font-weight:800}
h1,h2,h3{line-height:1.16}
h1{font-size:clamp(2.4rem,6vw,4rem)}
h2{font-size:1.8rem}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card,.guide{background:var(--white);border:1px solid var(--line);border-radius:1rem;padding:1.25rem}
.card h3{margin:.4rem 0}
.card p{margin:.5rem 0 1rem}
.guide{max-width:780px;margin:1.2rem 0;scroll-margin-top:1rem}
.guide li+li{margin-top:.35rem}
footer{border-top:1px solid var(--line);margin-top:2.5rem;padding:1rem 0 2rem}
.skip{position:absolute;left:1rem;top:-6rem;background:var(--white);padding:.5rem}
.skip:focus{top:1rem}
@media(max-width:690px){.hero,.cards{grid-template-columns:1fr}.hero img{max-height:180px}}