/* Vuto, dense product direction on the site's warm paper palette.
   Same canvas, ink, and vermilion as /for, /faq and /blog, so the homepage does
   not read as a different site. Hairline rules, mono micro-labels, 4px panels
   and 3px controls. Self-hosted type only: strict CSP, no external requests. */

@font-face {
  font-family: "Clash Display";
  src: url("fonts/clash-display-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("fonts/clash-display-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("fonts/switzer-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("fonts/switzer-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --bg:    #f6f2ea;   /* paper, shared with every other page */
  --s1:    #efe9dc;   /* lifted panel */
  --s2:    #e7e0d0;   /* inset control */
  --line:  rgba(20,18,15,.14);
  --line2: rgba(20,18,15,.26);

  --ink:       #14120f;
  --ink-muted: #554f45;
  --ink-faint: #635d53;

  --accent:        #dd3311;  /* brand vermilion, non-text use */
  --accent-strong: #c22c0e;  /* text and solid fills, clears AA on paper */
  --accent-deep:   #a82409;
  --on-accent:     #fbf8f2;
  --voice-you:     #2e2a24;

  --display: "Clash Display", ui-sans-serif, system-ui, sans-serif;
  --body:    "Switzer", ui-sans-serif, system-ui, sans-serif;
  --mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --r-panel:   4px;
  --r-control: 3px;

  --pad: clamp(1.1rem, 4vw, 2.5rem);
  --nav-h: 64px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.025em; line-height: 1.04; }

.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--pad); }
.mono {
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em;
  text-transform: lowercase; color: var(--ink-faint);
}

:where(a, button, input):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px;
}
.skip {
  position: fixed; top: .6rem; left: .6rem; z-index: 90;
  padding: .6rem 1rem; background: var(--ink); color: var(--bg);
  font-weight: 500; border-radius: var(--r-control); transform: translateY(-160%);
  transition: transform .2s var(--ease);
}
.skip:focus-visible { transform: translateY(0); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.motion-toggle {
  min-height: 44px; padding: .55rem .6rem; border: 0; background: none;
  color: var(--ink-faint); font: 500 .875rem/1.2 var(--body); cursor: pointer;
}
.motion-toggle:hover { color: var(--ink); }
.motion-toggle[aria-pressed="true"] { color: var(--accent-strong); }
.motion-toggle:disabled { cursor: default; color: var(--ink-faint); }
@media (max-width: 860px) { .motion-toggle { display: none; } }

/* ---------- announcement ---------- */
.announce {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  min-height: 40px; padding: .5rem var(--pad);
  background: var(--s1); border-bottom: 1px solid var(--line);
  font-size: .8125rem; color: var(--ink-muted); text-align: center;
}
.announce b { font-weight: 500; color: var(--ink); }
.announce__link {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--accent-strong); white-space: nowrap;
  transition: gap .18s var(--ease);
}
.announce__link:hover { gap: 9px; }
.announce__link svg { width: 13px; height: 13px; }
@media (max-width: 720px) { .announce__long { display: none; } }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  /* A backdrop-filter samples whatever sits behind it, so any repaint inside the
     bar can make the browser resample the blur and the whole bar flickers on
     hover. Promoting it to its own layer, and isolating it, keeps the blur from
     being recomputed for a child's colour change. */
  transform: translateZ(0);
  isolation: isolate;
}
.nav__in { display: flex; align-items: center; gap: 1.75rem; height: var(--nav-h); }
.brand {
  font-family: var(--display); font-weight: 600; font-size: 1.25rem;
  letter-spacing: -.04em; color: var(--ink);
}
.brand--sm { font-size: 1.05rem; }
.nav__links { display: none; gap: 1.5rem; margin-right: auto; font-size: .875rem; color: var(--ink-muted); }
.nav__links a { transition: color .18s var(--ease); }
.nav__links a:hover { color: var(--ink); }
/* A text link next to a solid button needs more air than two buttons would:
   at .6rem the label read as part of the button. */
.nav__actions { display: flex; align-items: center; gap: 1.25rem; margin-left: auto; }
@media (min-width: 900px) { .nav__links { display: flex; } .nav__actions { margin-left: 0; } }
.nav__signin { font-size: .875rem; color: var(--ink-muted); transition: color .18s var(--ease); }
.nav__signin:hover { color: var(--ink); }
@media (max-width: 620px) { .nav__signin { display: none; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; height: 38px; padding-inline: 1.1rem; border: 1px solid transparent;
  border-radius: var(--r-control); background: none; font: 500 .875rem/1 var(--body); white-space: nowrap;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);
  cursor: pointer;
}
.btn:active { transform: translateY(1px); }
.btn--solid { background: var(--accent-strong); color: var(--on-accent); }
.btn--solid:hover { background: var(--accent-deep); }
.btn--ghost { border-color: var(--line2); color: var(--ink); }
.btn--ghost:hover { border-color: var(--accent-strong); color: var(--accent-strong); }
.btn--lg { min-height: 48px; height: 48px; padding-inline: 1.6rem; font-size: .9375rem; }

/* ---------- hero ---------- */
.hero { padding-top: clamp(2rem, 4vw, 3.25rem); }
.hero__in {
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
@media (min-width: 1000px) { .hero__in { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); } }

.status {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em;
  color: var(--ink-muted); margin-bottom: 1.4rem;
}
.status__dot {
  width: 6px; height: 6px; border-radius: 999px; background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.status__gap { width: 10px; }

.hero__title { font-size: clamp(2.5rem, 4.6vw, 3.7rem); }
.hero__title span { display: block; }
.hero__title span:last-child { color: var(--ink-muted); }
.hero__sub {
  max-width: 46ch; margin-top: 1.35rem;
  font-size: clamp(1rem, 1.4vw, 1.125rem); color: var(--ink-muted);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }

/* the live stage: real transcript from the preview, not a mock product screenshot */
.stage {
  background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-panel);
  display: grid; grid-template-rows: auto auto 1fr auto;
}
.stage__head, .stage__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1.1rem;
}
.stage__head { border-bottom: 1px solid var(--line); }
.stage__foot { border-top: 1px solid var(--line); }
.stage__live { display: inline-flex; align-items: center; gap: .45rem; color: var(--accent-strong); }
.stage__wave { display: block; width: 100%; height: 96px; }
.stage__log { list-style: none; padding: .35rem 1.1rem 1.1rem; display: grid; gap: .85rem; }
.line { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: .8rem; font-size: .9375rem; }
.line__who { padding-top: .22rem; }
.line--you { color: var(--voice-you); }
.line--vuto { color: var(--ink-muted); }
.line--vuto .line__who { color: var(--accent-strong); }

/* ---------- stat strip ---------- */
.stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats__cell { padding: 1.5rem 0 1.75rem; }
.stats__cell + .stats__cell { border-left: 1px solid var(--line); padding-left: 1.25rem; }
@media (min-width: 760px) { .stats__cell { padding-left: 1.25rem; } .stats__cell:first-child { padding-left: 0; } }
.stats dd {
  font-family: var(--display); font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  letter-spacing: -.03em; margin-top: .5rem;
}

/* ---------- run ---------- */
.run { padding-block: clamp(3.5rem, 7vw, 6rem); border-top: 1px solid var(--line); }
.h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); max-width: 22ch; }
.run__grid {
  list-style: none; margin-top: clamp(2rem, 4vw, 3rem);
  display: grid; gap: 0; grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) { .run__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step { padding: 1.4rem 0; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .step { padding: 1.5rem 1.4rem 0 0; } }
.step__t { font-size: 1.125rem; font-weight: 500; color: var(--accent-strong); }
.step__b { margin-top: .55rem; font-size: .9375rem; color: var(--ink-muted); max-width: 30ch; }

/* ---------- boundary ---------- */
.boundary { padding-block: clamp(3.5rem, 7vw, 6rem); background: var(--s1); border-block: 1px solid var(--line); }
.boundary__in { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 1000px) { .boundary__in { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; } }
.boundary__body { margin-top: 1.1rem; max-width: 42ch; color: var(--ink-muted); }
.boundary__cols { display: grid; gap: 2rem; }
@media (min-width: 640px) { .boundary__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; } }
.col__h { padding-bottom: .8rem; border-bottom: 1px solid var(--line2); }
.col--no .col__h { color: var(--ink-faint); }
.col__list { list-style: none; margin-top: 1rem; display: grid; gap: .8rem; font-size: .9375rem; }
.col--no .col__list { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--line2); }

/* ---------- sources ---------- */
.sources { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.sources__lead { font-family: var(--display); font-weight: 500; font-size: clamp(1.25rem, 2.2vw, 1.6rem); max-width: 30ch; }
.sources__row { margin-top: 2.2rem; display: grid; gap: 1.6rem; }
@media (min-width: 820px) { .sources__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.src { padding-top: 1.1rem; border-top: 1px solid var(--line2); }
.src__n { font-size: 1.0625rem; font-weight: 500; }
.src__d { margin-top: .5rem; font-size: .9375rem; color: var(--ink-muted); }

/* ---------- cta ---------- */
.cta { padding-block: clamp(3.5rem, 7vw, 6rem); border-top: 1px solid var(--line); }
.cta__in { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 1000px) { .cta__in { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: start; } }
.cta__body { margin-top: 1.1rem; max-width: 40ch; color: var(--ink-muted); }
.form { display: grid; gap: .9rem; }
.form__label { font-size: .8125rem; color: var(--ink-muted); }
.form__input {
  width: 100%; height: 48px; margin-top: .45rem; padding-inline: 1rem;
  background: var(--bg); border: 1px solid var(--line2); border-radius: var(--r-control);
  color: var(--ink); font: 400 .9375rem var(--body);
}
.form__input::placeholder { color: var(--ink-faint); }
.form__input:focus-visible { border-color: var(--accent-strong); }
.form__error { margin-top: .5rem; font-size: .8125rem; color: #a3170f; }
.form__submit { width: 100%; }
@media (min-width: 480px) { .form__submit { width: auto; justify-self: start; } }
.form__challenge { display: grid; gap: .6rem; }

/* The hero copy runs to a readable measure, so the challenge is capped to match
   rather than stretching the full column. Turnstile renders at the width it is
   given, which is why this is a max-width and not a fixed one. */
.hero__challenge { margin-top: 1.1rem; max-width: 34rem; }
.hero__challenge .form__turnstile { min-height: 65px; }
.form__verification { color: var(--ink-faint); }
.form__ok { margin-top: 1rem; color: var(--accent-strong); font-size: .9375rem; }
.form__fallback { margin-top: 1rem; font-size: .875rem; color: #a3170f; }
.form__fallback a, .form__privacy a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.form__privacy { margin-top: 1.1rem; font-size: .875rem; color: var(--ink-faint); max-width: 52ch; }
.waitlist__submit:disabled { opacity: .55; cursor: default; }
.waitlist__submit:disabled:hover { background: var(--accent); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding-block: 2rem; }
.foot__in { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.foot__links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-left: auto; font-size: .875rem; color: var(--ink-muted); }
.foot__links a:hover { color: var(--ink); }

/* ---------- auth screen ----------
   Centered by exception: an auth screen is a single focused moment, and the
   segmented control is the whole navigation. */
.auth-page {
  display: grid; place-items: center;
  min-height: 100vh; min-height: 100dvh;
  padding: 2.5rem var(--pad);
}
.auth { width: 100%; max-width: 396px; text-align: center; }
.auth__brand { display: block; font-size: 1.6rem; margin-bottom: 1.75rem; }

.seg {
  position: relative; display: inline-grid; grid-auto-flow: column;
  padding: 4px; gap: 2px; border: 1px solid var(--line); border-radius: var(--r-panel);
  background: var(--s1);
}
.seg__btn {
  position: relative; z-index: 1; min-width: 116px; height: 36px; padding-inline: 1rem;
  border: 0; background: none; border-radius: var(--r-control); cursor: pointer;
  font: 500 .875rem/1 var(--body); color: var(--ink-muted);
  transition: color .18s var(--ease);
}
.seg__btn.is-on { color: var(--ink); }
.seg__thumb {
  position: absolute; top: 4px; left: 4px; z-index: 0;
  width: calc(50% - 5px); height: calc(100% - 8px);
  background: var(--bg); border: 1px solid var(--line2); border-radius: var(--r-control);
  transition: transform .28s var(--ease);
}
.is-signup .seg__thumb { transform: translateX(calc(100% + 2px)); }

.auth__title { margin-top: 1.9rem; font-size: clamp(1.7rem, 4vw, 2.1rem); }
.auth__sub { margin-top: .6rem; color: var(--ink-muted); font-size: .9375rem; }

.auth__note {
  margin-top: .9rem; padding: .6rem .9rem;
  border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--s1);
  font-size: .8125rem; color: var(--ink-faint);
}

.card {
  margin-top: 1rem; padding: 1.4rem; text-align: left;
  background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-panel);
  display: grid; gap: 1rem;
}
.field__label { display: block; font-size: .8125rem; color: var(--ink-muted); margin-bottom: .45rem; }
.field__wrap { position: relative; }
.field__input {
  width: 100%; height: 46px; padding-inline: 1rem;
  background: var(--bg); border: 1px solid var(--line2); border-radius: var(--r-control);
  color: var(--ink); font: 400 .9375rem var(--body);
  transition: border-color .18s var(--ease);
}
.field__input::placeholder { color: var(--ink-faint); }
.field__input:focus-visible { border-color: var(--accent-strong); }
.field__wrap .field__input { padding-right: 2.9rem; }
.field__eye {
  position: absolute; top: 50%; right: .55rem; transform: translateY(-50%);
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; background: none; border-radius: var(--r-control); cursor: pointer; color: var(--ink-faint);
  transition: color .18s var(--ease);
}
.field__eye:hover { color: var(--ink); }
.field__eye svg { width: 18px; height: 18px; }
.field__error { margin-top: .55rem; font-size: .8125rem; color: #a3170f; }

.auth__forgot {
  justify-self: end; margin-top: -.35rem; font-size: .8125rem; color: var(--ink-muted);
  transition: color .18s var(--ease);
}
.auth__forgot:hover { color: var(--accent-strong); }
.card__submit, .card__google { width: 100%; gap: .5rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.card__soon { margin-top: .5rem; font-size: .8125rem; color: var(--ink-faint); text-align: center; }
.card__submit svg { width: 16px; height: 16px; }
.card__google svg { width: 17px; height: 17px; }

.rule { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8rem; }
.rule::before, .rule::after { content: ""; height: 1px; background: var(--line); }
.rule span { font-size: .8125rem; color: var(--ink-faint); }

.verify {
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--bg);
  font-size: .8125rem; color: var(--ink-muted);
}
.verify__by { margin-left: auto; }

.auth__ok { margin-top: 1.4rem; color: var(--accent-strong); font-size: .9375rem; }
.auth__foot { margin-top: 1.5rem; font-size: .8125rem; color: var(--ink-faint); }
.auth__foot a { color: var(--ink-muted); }
.auth__foot a:hover { color: var(--accent-strong); }

/* ---------- motion ---------- */
.enter { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.enter.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .enter { opacity: 1; transform: none; transition: none; }
  .btn:active { transform: none; }
}