:root {
  /* Otto design system (jarvis-app tokens) */
  --color-bg: #f5f8fc;
  --color-surface: #ffffff;
  --color-ink: #1d2530;
  --color-muted: #5b6875;
  --color-faint: #7d8c9c;
  --color-line: #c8d3dc;
  --color-primary: #1180e1;
  --color-primary-strong: #0e6bb9;
  --color-primary-soft: #e4f1fd;
  --color-success: #1f8a5b;
  --color-danger: #c2413a;
  --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-wordmark: Fredoka, ui-rounded, "SF Pro Rounded", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100svh; display: flex; flex-direction: column;
  background: var(--color-bg); color: var(--color-ink); font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 16px; }

/* ---------- the stage: one SVG, sized so the waitlist stays above the fold ---------- */
.stage {
  position: relative; aspect-ratio: 16 / 9;
  width: min(1200px, 100%, calc((100svh - 250px) * 16 / 9)); min-width: min(100%, 560px);
}
.stage svg { display: block; width: 100%; height: 100%; }
.ink { fill: none; stroke: #1d2530; stroke-linecap: round; }
.slab { fill: none; stroke: #3a4757; stroke-linecap: round; }

.skip {
  position: absolute; right: 8px; top: 8px; height: 32px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--color-line); background: rgba(255, 255, 255, 0.8); color: var(--color-muted);
  font-size: 13px; font-weight: 500;
}
.skip:hover { color: var(--color-ink); border-color: var(--color-faint); }

/* ---------- the waitlist ---------- */
.waitlist { width: 100%; max-width: 520px; text-align: center; padding: 4px 0 32px; }
.waitlist h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.waitlist .lead { margin: 4px 0 16px; color: var(--color-muted); font-size: 16px; line-height: 1.5; }

form { display: flex; gap: 8px; }
form[hidden] { display: none; }
input[type="email"] {
  flex: 1; min-width: 0; height: 48px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-ink); font-size: 16px;
}
input[type="email"]::placeholder { color: var(--color-faint); }
input[type="email"]:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-soft); }
form button {
  height: 48px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: var(--color-primary); color: #fff; font-size: 16px; font-weight: 600;
}
form button:hover { background: var(--color-primary-strong); }
form button:focus-visible, .skip:focus-visible, .link:focus-visible { outline: 3px solid var(--color-primary-soft); outline-offset: 2px; }
form button:disabled { opacity: 0.6; cursor: progress; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }

.note { margin: 12px 0 0; min-height: 1.5em; font-size: 15px; font-weight: 500; line-height: 1.5; }
.note:empty { min-height: 0; margin: 0; }
.note[data-state="joined"] { color: var(--color-success); font-size: 17px; }
.note[data-state="error"] { color: var(--color-danger); }
.fine { margin: 12px 0 0; color: var(--color-faint); font-size: 13px; }

footer {
  display: flex; justify-content: center; align-items: center; gap: 16px; padding: 16px;
  color: var(--color-faint); font-size: 13px;
}
.link { border: 0; background: none; padding: 0; cursor: pointer; color: var(--color-muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--color-ink); }

/* ---------- phones: the scene crops in on the wordmark (see frameScene in otto.js), and the form stacks ---------- */
@media (max-width: 640px) {
  .stage { width: 100%; min-width: 0; aspect-ratio: 940 / 680; }
  form { flex-direction: column; }
  input[type="email"] { flex: none; }
  form button { width: 100%; }
}

/* ---------- 404 ---------- */
.lost { justify-content: center; text-align: center; gap: 4px; }
.lost h1 { margin: 16px 0 0; font-size: 22px; }
.lost p { margin: 0; color: var(--color-muted); }
.lost a { color: var(--color-primary); }