* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--text);
  background: radial-gradient(circle at 10% 10%, #ffffff, var(--bg) 40%);
  line-height: 1.5;
}
a { color: var(--primary); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
main { padding-bottom: 5.5rem; }
.container { width: min(var(--container), 92vw); margin: 0 auto; }
.narrow { width: min(760px, 92vw); }
.section { padding: var(--space-6) 0; }
.muted { background: var(--surface-alt); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--space-3); }
h1 { font-size: var(--font-size-5); }
h2 { font-size: clamp(1.4rem, 2.8vw, 2.3rem); }
h3 { font-size: var(--font-size-3); }
p { margin: 0 0 var(--space-3); color: var(--muted); }
small { font-size: var(--font-size-1); color: var(--muted); }
ul { padding-left: 1.25rem; }
.lead { font-size: var(--font-size-3); max-width: 62ch; }
.eyebrow {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--primary);
  margin-bottom: var(--space-2);
}
.eyebrow span { color: var(--muted); font-size: var(--font-size-1); text-transform: none; margin-left: var(--space-1); }
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--text);
  color: #fff;
  padding: var(--space-2) var(--space-3);
}
.skip-link:focus { left: var(--space-2); z-index: 2000; }