:root { color-scheme: light dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; line-height: 1.5; }
body { margin: 0; background: #f4f7fb; color: #172033; } main { max-width: 52rem; margin: auto; padding: 1.25rem; }
nav { display: flex; gap: 1.25rem; align-items: center; margin-bottom: 4rem; } nav a:first-child { margin-right: auto; font-weight: 750; color: #172033; } a { color: #2457a6; }
.hero { padding: 1rem 0 2.5rem; } .eyebrow { color: #2457a6; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; }
h1 { font-size: clamp(2.2rem, 7vw, 4rem); line-height: 1.05; max-width: 10ch; margin: .4rem 0 1rem; } h2 { margin-top: 0; }
.lead { font-size: 1.2rem; max-width: 37rem; } .card { background: #fff; border: 1px solid #dce2ee; border-radius: 16px; padding: 1.35rem; margin: 1rem 0; box-shadow: 0 5px 20px #17203312; }
.status { border-left: 4px solid #2b579a; padding: .8rem 1rem; background: #eaf0fb; } li { margin: .55rem 0; } .muted { color: #566277; font-size: .94rem; }
@media (prefers-color-scheme: dark) { body { background: #111827; color: #f3f4f6; } nav a:first-child { color: #f3f4f6; } .card { background: #1f2937; border-color: #374151; } .status { background: #172554; } .muted { color: #b8c2d3; } a, .eyebrow { color: #9fc1ff; } }