:root { color-scheme: light; font: 1rem/1.7 system-ui,sans-serif; color: #253246; background: #f7f8fb; }
* { box-sizing: border-box; } body { margin: 0; } header, footer { max-width: 76rem; margin: auto; padding: 1.5rem; display: flex; gap: 1rem; justify-content: space-between; }
header>a { font-size: 1.2rem; font-weight: 700; } main { max-width: 48rem; margin: 2rem auto 4rem; padding: 0 1.5rem; } h1 { font-size: clamp(2rem,5vw,3.4rem); line-height: 1.1; letter-spacing: -.04em; } h2 { font-size: 1.35rem; line-height: 1.3; margin-top: 2.5rem; }
.intro { font-size: 1.2rem; color: #4b5c73; }.eyebrow { font-size: .875rem; letter-spacing: .12em; } a { color: #275f88; text-underline-offset: .2em; }.action { display: inline-block; border-radius: .65rem; padding: .8rem 1.2rem; margin: 1rem 0; color: white; background: #275f88; } aside { margin-top: 2rem; padding: 1rem 1.25rem; border: 1px solid #cbd5e0; border-radius: .75rem; font-size: .9rem; } :focus-visible { outline: 3px solid #31819b; outline-offset: 3px; }