:root { color-scheme: light dark; --ink:#132a4a; --accent:#c56a00; --muted:#5b6b80; --bg:#fbfaf7; --card:#fff; --line:#e4e1d8 }
@media (prefers-color-scheme: dark) { :root { --ink:#eef1f6; --accent:#ffb74d; --muted:#a8b3c2; --bg:#10151d; --card:#18202b; --line:#2b3644 } }
* { box-sizing: border-box }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif }
main, header, footer { max-width:46rem; margin:auto; padding:0 1.25rem }
header { display:flex; justify-content:space-between; align-items:center; padding-top:1.25rem; font-weight:600 }
header a { color:inherit; text-decoration:none }
h1 { font-size:clamp(2rem,6vw,3rem); line-height:1.15; margin:3.5rem 0 1rem }
h2 { margin-top:2.5rem; line-height:1.3 }
.lead { font-size:1.2rem; color:var(--muted) }
.keys { font-weight:600; color:var(--accent) }
.plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:1rem }
.plan { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1rem 1.25rem }
.plan h3 { margin:.2rem 0 }
.price { font-size:1.5rem; font-weight:700 }
.muted { color:var(--muted) }
footer { margin-top:4rem; padding-bottom:2rem; color:var(--muted); font-size:.92rem }
footer a { color:inherit; margin-right:1rem }