*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-text); font-size: var(--step-0);
  line-height: 1.6; text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  hanging-punctuation: first;
}
img, svg, iframe { display: block; max-width: 100%; }
/* any display value beats the UA [hidden] rule — make the attribute authoritative */
[hidden] { display: none !important; }
::selection { background: var(--accent); color: oklch(0.99 0.004 242); text-shadow: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius); }
input, textarea, select { caret-color: var(--accent); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; text-wrap: balance; letter-spacing: -0.018em; }
h1 { font-size: var(--step-4); line-height: 0.98; letter-spacing: -0.032em; }
h2 { font-size: var(--step-2); line-height: 1.1; }
h3 { font-size: var(--step-1); line-height: 1.2; }
p, li, dd, td, th { font-variant-numeric: tabular-nums; }

/* --- layout --- */
.layout { display: grid; grid-template-columns:
  [full-start] minmax(var(--gutter), 1fr)
  [content-start] min(1180px, 100% - (var(--gutter) * 2)) [content-end]
  minmax(var(--gutter), 1fr) [full-end]; }
.layout > * { grid-column: content; }
.layout > .full { grid-column: full; }
.section { padding-block: var(--section); }
.section.section--tight { padding-block: clamp(48px, 5vw, 84px); }
.prose { max-width: 62ch; }
.prose p + p { margin-top: var(--s5); }

.eyebrow { font-size: var(--step--1); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 600; }
.lede { font-size: var(--step-1); line-height: 1.45; color: var(--ink-muted); max-width: 44ch; }

/* --- links --- */
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.15em;
  transition: color var(--motion-fast) var(--ease-hover); }
a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
a:visited { color: var(--accent); }

/* --- buttons: six states each --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  /* flex centres the text block; this centres the lines inside it when a label wraps */
  text-align: center;
  min-height: 48px; padding: 0 var(--s6); border: 1px solid transparent; border-radius: var(--radius);
  font: 600 var(--step-0)/1 var(--font-text); letter-spacing: 0.005em; text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-hover), color var(--motion-fast) var(--ease-hover),
    border-color var(--motion-fast) var(--ease-hover), transform 110ms var(--ease-hover),
    box-shadow var(--motion-fast) var(--ease-hover); }
.btn--primary { background: var(--accent); color: oklch(0.99 0.004 242);
  box-shadow: 0 1px 2px oklch(0.30 0.10 242 / 0.18); }
.btn--primary:hover { background: var(--accent-hover); color: oklch(0.99 0.004 242);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px oklch(0.30 0.10 242 / 0.16), 0 8px 18px -8px oklch(0.30 0.10 242 / 0.42); }
.btn--primary:active { transform: translateY(0) scale(0.985);
  background: oklch(0.375 0.130 242); box-shadow: 0 1px 1px oklch(0.30 0.10 242 / 0.22); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--surface); color: var(--accent);
  border-color: var(--accent); transform: translateY(-1px); }
.btn--secondary:active { transform: translateY(0) scale(0.985); background: var(--accent-wash);
  border-color: var(--accent); }
.btn[aria-disabled="true"], .btn:disabled { color: var(--ink-muted); background: var(--surface);
  border-color: var(--border); cursor: not-allowed; transform: none; }
.btn[data-loading="true"] { pointer-events: none; }
.btn[data-loading="true"] .btn__label { visibility: hidden; }
.btn[data-loading="true"]::after { content: ""; position: absolute; width: 16px; height: 16px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 9999px;
  animation: spin 640ms linear infinite; }
.btn { position: relative; }
@keyframes spin { to { transform: rotate(360deg); } }

.actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: var(--s3); width: max-content; max-width: 100%; }
@media (max-width: 560px) { .actions { grid-auto-flow: row; grid-auto-columns: auto; width: auto; } }

.skip { position: absolute; left: var(--s4); top: -100px; z-index: 60; background: var(--surface-deep);
  color: var(--ink-invert); padding: var(--s3) var(--s5); border-radius: var(--radius); text-decoration: none; }
.skip:focus { top: var(--s4); color: var(--ink-invert); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

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