*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font: 400 16px/1.55 var(--font-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, figure, blockquote, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--text-brand); text-underline-offset: 3px; }
a:hover { color: var(--text-brand-strong); }
button { font: inherit; }
::selection { background: var(--bg-brand-subtle); }
:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 3px; border-radius: 4px; }

.skip-link { position: absolute; left: var(--gutter); top: -48px; padding: 8px 14px; background: var(--bg-brand); color: var(--text-on-brand); border-radius: var(--radius-full); z-index: 50; }
.skip-link:focus { top: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { max-width: var(--width-content); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space-72); }
.section--subtle { background: var(--bg-subtle); }

/* Type styles: names match the Figma text styles. */
.display-xl { font: 800 clamp(44px, 5.4vw, 74px)/1 var(--font-display); letter-spacing: -.035em; text-wrap: balance; }
.display-m { font: 800 clamp(32px, 4vw, 44px)/1.04 var(--font-display); letter-spacing: -.03em; text-wrap: balance; }
.h2 { font: 800 clamp(30px, 3.2vw, 38px)/1.05 var(--font-display); letter-spacing: -.03em; text-wrap: balance; }
.h3 { font: 700 24px/1.15 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.h4 { font: 700 20px/1.25 var(--font-display); letter-spacing: -.01em; }
.statement { font: 700 clamp(24px, 2.6vw, 30px)/1.25 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; }
.body-l { font-size: clamp(17px, 1.5vw, 18px); line-height: 1.65; color: var(--text-body); text-wrap: pretty; }
.body-s { font-size: 14px; line-height: 1.4; color: var(--text-muted); }
.label { font: 700 12px/1.2 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.label--s { font-size: 11px; letter-spacing: .02em; }
.label--brand { color: var(--text-brand); }
.muted { color: var(--text-muted); }
.brand { color: var(--text-brand); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}