:root { color-scheme: dark; font: 17px/1.65 system-ui, sans-serif; color: #e7e7ed; background: #1e1e1f; }
* { box-sizing: border-box; }
body { margin: 0; }
header, main, footer { width: min(920px, 100% - 40px); margin: auto; }
header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; border-bottom: 1px solid #45454a; }
header img { display: block; max-width: 100%; object-fit: contain; }
main { padding: 42px 0; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.15; letter-spacing: -.035em; max-width: 800px; }
h2 { line-height: 1.25; margin-top: 0; }
h3 { font-size: 1.15rem; margin-bottom: 8px; }
p, li { max-width: 78ch; }
li { margin-bottom: 12px; }
a { color: #a8c9ff; text-underline-offset: 3px; }
a:hover { color: #d5e5ff; }
a:focus-visible { outline: 3px solid #92baff; outline-offset: 4px; }
.button { display: inline-block; border-radius: 7px; padding: 10px 16px; color: white; background: #245cc7; text-decoration: none; font-weight: 600; }
.button:hover { background: #306ede; color: white; }
.lead { font-size: 1.2rem; }
.eyebrow, footer { color: #b4b4bf; }
section { padding: 28px 0; border-bottom: 1px solid #45454a; scroll-margin-top: 20px; }
nav { padding-top: 20px; }
footer { padding: 24px 0 48px; font-size: .85rem; }
@media(max-width: 500px) { header { flex-wrap: wrap; } header img { width: 165px; height: 45px; } main { padding-top: 20px; } }