@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --bg: #F4F5F2;
  --surface: #FFFFFF;
  --ink: #12171D;
  --muted: #3F4A54;
  --faint: #5A6570;
  --line: #DADDD6;
  --field: #C2C8BF;
  --accent: #1C6B4A;
  --accent-text: #1C6B4A;
  --on-accent: #FFFFFF;
  --error: #A12A1E;
  --focus: #3E9A70;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B0F14;
    --surface: #131920;
    --ink: #E8EAED;
    --muted: #AEB6C2;
    --faint: #8F98A5;
    --line: #232B36;
    --field: #38424F;
    --accent: #4FC08D;
    --accent-text: #6FD3A5;
    --on-accent: #0B0F14;
    --error: #FF8A7A;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

/* Hero */
.hero { container-type: inline-size; padding-block: clamp(56px, 8vw, 112px) clamp(48px, 6vw, 80px); display: flex; flex-direction: column; gap: 28px; }
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
h1 {
  margin: 0;
  font-size: clamp(36px, 6vw, 80px); line-height: 1.04; letter-spacing: -0.04em; font-weight: 700;
}
/* The hero headline is three statements, one per line, sized to the column so none wraps.
   13.2: the widest line ("We handle the technical side.") measures 12.74em; re-measure if the copy changes. */
#headline { font-size: clamp(20px, 100cqi / 13.2, 80px); }
#headline span { display: block; }
.steps {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr;
  border-top: 1px solid var(--ink);
}
/* All three in a row or one per row; never two and an orphan. */
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { padding: 24px 32px 8px 0; display: flex; flex-direction: column; gap: 10px; }
.steps li:last-child { padding-right: 0; }
.steps .num { font-family: var(--mono); font-size: 14px; color: var(--accent-text); }
.steps h2 { margin: 0; font-size: 21px; letter-spacing: -0.02em; }
.steps p { margin: 0; color: var(--muted); }

/* Waitlist */
.waitlist { padding-block: clamp(8px, 2vw, 24px) clamp(64px, 8vw, 112px); display: flex; flex-direction: column; gap: 18px; }
.waitlist > h2 { margin: 0; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.1; letter-spacing: -0.03em; }
.form {
  max-width: 520px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: clamp(16px, 2.4vw, 24px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px;
}
.field { display: flex; flex-direction: column; gap: 4px; }
.field.full, .form .full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 600; }
.field .opt { font-weight: 400; color: var(--faint); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--bg);
  border: 1px solid var(--field); border-radius: 6px; padding: 9px 12px; width: 100%;
}
.field input, .field select { min-height: 44px; }
.field textarea { resize: vertical; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.form-foot p { flex: 1 1 240px; margin: 0; font-size: 13px; color: var(--faint); }
.btn {
  font: inherit; font-weight: 600; background: var(--accent); color: var(--on-accent);
  border: 0; border-radius: 6px; padding: 11px 22px; min-height: 44px; cursor: pointer;
}
.btn[disabled] { opacity: 0.6; cursor: progress; }
/* Turnstile stays zero-height unless it needs a click; cancel the grid gap it would otherwise add. */
.form .cf-turnstile { margin-top: -14px; }
.form .cf-turnstile.shown { margin-top: 0; }
.status { grid-column: 1 / -1; margin: 0; font-size: 15px; }
.status:empty { display: none; }
.status.error { color: var(--error); }
.thanks { max-width: 520px; margin: 0; padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.thanks strong { display: block; font-size: 19px; margin-bottom: 4px; }

/* Footer */
.site-foot { border-top: 1px solid var(--line); }
.site-foot .wrap { padding-block: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--muted); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 24px; }

/* Legal pages */
.legal { max-width: 720px; padding-block: clamp(40px, 6vw, 80px); }
.legal .back { font-size: 15px; color: var(--muted); }
.legal h1 { font-size: clamp(34px, 4.4vw, 52px); margin-top: 24px; }
.legal .updated { font-family: var(--mono); font-size: 13px; color: var(--faint); margin: 12px 0 36px; }
.legal h2 { font-size: 21px; letter-spacing: -0.01em; margin: 36px 0 8px; }
.legal p, .legal li { color: var(--muted); }
.legal ul { padding-left: 20px; }