/* design-kit base: reset + typography + accessibility. Load AFTER tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: var(--step-0); line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-heading); font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-heading); line-height: var(--leading-heading);
  margin: 0; text-wrap: balance;
}
h1 { font-size: clamp(var(--step-4), 6vw, var(--step-6)); }
h2 { font-size: clamp(var(--step-3), 4vw, var(--step-4)); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { margin: 0; max-width: var(--measure); text-wrap: pretty; }
p + p { margin-top: var(--space-4); }
small, .small { font-size: var(--step-n1); }
.muted { color: var(--color-muted); }
.lead { font-size: var(--step-1); color: var(--color-muted); }
a { color: var(--color-accent-text); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
code, kbd, pre { font-family: var(--font-mono); }
:not(pre) > code { font-size: 0.92em; }
pre code { font-size: inherit; }
.num { font-variant-numeric: tabular-nums; }
hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-7) 0; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--color-accent-soft); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--space-4); top: -100px; background: var(--color-surface); padding: var(--space-2) var(--space-4); z-index: 100; }
.skip-link:focus { top: var(--space-4); }

/* layout helpers */
.container { width: min(100% - 2 * var(--space-5), 1200px); margin-inline: auto; }
.container-narrow { width: min(100% - 2 * var(--space-5), 720px); margin-inline: auto; }
.section { padding-block: var(--space-9); }
@media (max-width: 720px) { .section { padding-block: var(--space-7); } }
.stack > * + * { margin-top: var(--stack, var(--space-4)); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--gap, var(--space-3)); align-items: center; }
.grid { display: grid; gap: var(--gap, var(--space-5)); grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 260px), 100%), 1fr)); }
.split { display: grid; gap: var(--space-7); grid-template-columns: 5fr 7fr; align-items: center; }
.split.reverse { grid-template-columns: 7fr 5fr; }
@media (max-width: 860px) { .split, .split.reverse { grid-template-columns: 1fr; gap: var(--space-6); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}