/* ==========================================================================
   Waitlist form — shared by index.html, for-human.html and for-agent.html.

   The three pages each carry their own large inline <style> block. Those are
   left alone: this file only adds what is new, so the form can appear on all
   three pages without three copies of its styling drifting apart.

   It leans on the design tokens (--paper, --ink, --mint, --mono, --radius…)
   that every page already declares identically in :root, and on the existing
   .btn/.btn-primary classes — the pages already theme those per section, so
   the submit button gets correct dark/mint treatment for free.

   Three backgrounds have to work: paper (default), section.bg-ink (dark) and
   section.bg-mint. Overrides below follow the same `section.bg-x .y {}`
   pattern the pages already use.
   ========================================================================== */

.waitlist {
  margin: 28px 0 0;
  max-width: 440px;
  scroll-margin-top: 90px; /* clears the sticky nav when linked as #waitlist */
}

/* Inside the pricing card on index.html the form follows a <ul> that already carries
   28px of bottom margin. .tier is a flex column, so those margins don't collapse —
   without this the gap would double to 56px. */
.tier .waitlist { margin-top: 0; }

.waitlist-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}

.waitlist-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

@media (max-width: 520px) {
  .waitlist-row { flex-direction: column; }
}

.waitlist input[type="email"] {
  flex: 1;
  min-width: 0; /* lets the input shrink inside the flex row instead of overflowing */
  padding: 13px 14px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.waitlist input[type="email"]::placeholder { color: var(--ink-3); opacity: 1; }

.waitlist input[type="email"]:focus {
  outline: none;
  border-color: var(--mint-deep);
  box-shadow: 0 0 0 3px var(--mint-soft);
}

/* Only shown once the visitor has actually typed something wrong — :invalid alone
   would light up an empty field the moment the page loads. */
.waitlist input[type="email"]:not(:placeholder-shown):invalid { border-color: #c2492f; }

.waitlist button[type="submit"] {
  flex: 0 0 auto;
  justify-content: center;
}

.waitlist button[type="submit"][disabled] {
  opacity: 0.55;
  cursor: progress;
  transform: none;
}

/* Turnstile renders here. With appearance="interaction-only" it stays invisible for
   ordinary visitors and only takes up space when a real challenge is actually shown.
   Deliberately no height and no margin: Turnstile injects a child element either way,
   so any margin here would leave a dead gap on the overwhelmingly common path where no
   challenge appears. Spacing below comes from .waitlist-status instead. */
.waitlist-captcha { margin: 0; }

.waitlist-status {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  min-height: 1.2em; /* reserves the line so the layout doesn't jump on first error */
  color: #c2492f;
}

.waitlist-note {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* Success — replaces the form in place. */
.waitlist-done {
  margin: 28px 0 0;
  max-width: 440px;
  padding: 22px 24px;
  border: 1px solid var(--mint-deep);
  border-radius: var(--radius);
  background: var(--mint-soft);
}

.waitlist-done h4 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.waitlist-done p { margin: 0; font-size: 14.5px; color: var(--ink-2); }

/* ---------- on dark (section.bg-ink) ---------- */

section.bg-ink .waitlist-label { color: var(--mint); }

section.bg-ink .waitlist input[type="email"] {
  color: var(--paper);
  background: #16140f;
  border-color: #3a352c;
}

section.bg-ink .waitlist input[type="email"]::placeholder { color: #807a6c; }

section.bg-ink .waitlist input[type="email"]:focus {
  border-color: var(--mint);
  box-shadow: 0 0 0 3px rgba(98, 220, 173, 0.22);
}

section.bg-ink .waitlist input[type="email"]:not(:placeholder-shown):invalid { border-color: #e8836a; }

section.bg-ink .waitlist-status { color: #e8836a; }
section.bg-ink .waitlist-note { color: #807a6c; }

section.bg-ink .waitlist-done { background: rgba(98, 220, 173, 0.1); border-color: var(--mint); }
section.bg-ink .waitlist-done h4 { color: var(--paper); }
section.bg-ink .waitlist-done p { color: #b8b3a3; }

/* ---------- on mint (section.bg-mint) ---------- */

section.bg-mint .waitlist-label { color: var(--ink); }

section.bg-mint .waitlist input[type="email"] {
  background: var(--paper);
  border-color: rgba(22, 20, 15, 0.28);
}

/* Mint-on-mint would be invisible here, so focus falls back to ink. */
section.bg-mint .waitlist input[type="email"]:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(22, 20, 15, 0.12);
}

section.bg-mint .waitlist-status { color: #8c2f18; }
section.bg-mint .waitlist-note { color: rgba(22, 20, 15, 0.6); }

section.bg-mint .waitlist-done {
  background: var(--paper);
  border-color: var(--ink);
}