:root { color-scheme: light dark; --ink: #14171f; --paper: #fbfbfd; --accent: #2e5fe8 }
@media (prefers-color-scheme: dark) { :root { --ink: #e8eaf0; --paper: #14171f } }
* { box-sizing: border-box }
body { margin: 0; background: var(--paper); color: var(--ink);
       font: 17px/1.65 ui-sans-serif, system-ui, sans-serif }
header, main, footer { max-width: 46rem; margin: 0 auto; padding: 0 1.5rem }
header { padding-top: 5rem }
h1 { font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1.1; margin: 0 0 1rem; letter-spacing: -.02em }
p.lede { font-size: 1.25rem; opacity: .75; margin: 0 0 2.5rem }
.cta { display: inline-block; background: var(--accent); color: #fff; text-decoration: none;
       padding: .85rem 1.6rem; border-radius: 8px; font-weight: 600 }
.grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: 4rem 0 }
.card h3 { margin: 0 0 .35rem; font-size: 1rem }
.card p { margin: 0; opacity: .7; font-size: .95rem }
footer { padding: 3rem 1.5rem 5rem; opacity: .6; font-size: .9rem }