* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 30px; }
body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 4px; }
button { font: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 5px;
}
h1, h2, h3 { font-weight: 500; line-height: 1.15; }
h1, h2 { letter-spacing: normal; }
h1 { font-size: clamp(42px, 6.6vw, 82px); margin: 20px 0 26px; }
h2 { font-size: clamp(30px, 4vw, 48px); margin: 12px 0 22px; }
h3 { font-size: 22px; letter-spacing: normal; }
p { margin: 0 0 20px; }
.wrap { width: min(var(--width), calc(100% - 48px)); margin-inline: auto; }
.section { padding-block: 96px; }
.surface { background: var(--surface); }
.muted { color: var(--muted); }
.eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: uppercase;
}
.intro { max-width: 650px; color: var(--muted); margin-bottom: 42px; }
.skip {
    position: absolute;
    inset-inline-start: 16px;
    top: -100px;
    padding: 12px 20px;
    background: var(--background);
    z-index: 20;
}
.skip:focus { top: 12px; }
@media (max-width: 640px) {
    .wrap { width: calc(100% - 36px); }
    .section { padding-block: 64px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}