:root{color-scheme:dark;--navy:#101c2d;--panel:#192a40;--white:#f6f8fc;--muted:#c5d0df;--gold:#ffd785}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--white);font:1rem/1.65 system-ui,sans-serif}
a{color:inherit;text-underline-offset:.25em}
a:focus-visible{outline:3px solid var(--gold);outline-offset:5px}
header,footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1rem clamp(1.25rem,5vw,5rem);background:#0c1522}
header a:first-child{display:flex;align-items:center;gap:.65rem;text-decoration:none;font-weight:750}
main{max-width:90rem;margin:auto;padding:0 clamp(1.25rem,5vw,5rem) 4rem}
.hero{padding:clamp(3rem,8vw,8rem) 0;display:grid;grid-template-columns:1fr 1.45fr;align-items:center;gap:clamp(2rem,5vw,5rem)}
.eyebrow{color:var(--gold);font-size:.85rem;font-weight:750;letter-spacing:.09em;text-transform:uppercase}
h1,h2,h3{line-height:1.1;margin:.6em 0 .4em}
h1{font-size:clamp(2.8rem,6vw,5.5rem);letter-spacing:-.055em}
h2{font-size:clamp(2rem,4vw,3.5rem);letter-spacing:-.04em}
p{color:var(--muted);max-width:65ch}
.button{display:inline-block;background:var(--gold);color:#182234;text-decoration:none;border-radius:.55rem;padding:.7rem 1.15rem;font-weight:750}
.screen{width:100%;height:auto;display:block;border:1px solid #526480;border-radius:.75rem}
.section{margin-bottom:3rem}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:2rem}
article,.plan{padding:clamp(1rem,3vw,2rem);background:var(--panel);border-radius:1rem}
.plan .status{color:var(--gold);font-weight:750}
@media(max-width:800px){.hero,.cards{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.example{border-left:3px solid var(--gold);padding-left:.85rem}
details{padding:.8rem 0;border-bottom:1px solid #526480}
summary{cursor:pointer;font-weight:700}