* { box-sizing: border-box; }
body { margin: 0; background: #f5f6f7; color: #171717; font: 1rem/1.6 system-ui, sans-serif; }
header { background: #15171a; padding: 1rem max(1.25rem, calc((100% - 46rem) / 2)); }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: white; font-weight: 700; text-decoration: none; }
.brand span { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .45rem; background: #ffd500; color: #171717; }
main, footer { width: min(46rem, calc(100% - 2rem)); margin-inline: auto; }
main { margin-block: clamp(1rem, 6vw, 4rem) 1rem; padding: clamp(1.25rem, 5vw, 3rem); background: white; border: 1px solid #dddfe3; border-radius: .9rem; }
h1 { margin: 0 0 .6rem; line-height: 1.16; font-size: clamp(2rem, 6vw, 3rem); }
h2 { margin: 1.6rem 0 .4rem; font-size: 1.2rem; }
p { margin: .65rem 0; }
.eyebrow { color: #515660; font-weight: 650; margin: 0 0 .45rem; }
.lead { font-size: 1.18rem; }
nav, footer { display: flex; gap: .7rem 1.1rem; flex-wrap: wrap; }
nav { margin-block: 1.25rem .75rem; }
nav a { padding: .55rem .85rem; border-radius: .5rem; color: #171717; font-weight: 650; text-decoration: none; }
.primary { background: #ffd500; }
.secondary { border: 1px solid #bec3ca; }
.note, footer { color: #515660; font-size: .9rem; }
footer { padding: .25rem 0 2rem; }
a { color: #164d88; }
a:focus-visible { outline: 2px solid #164d88; outline-offset: 4px; }