/* ============================================================
   waitlist-page.css — standalone public waitlist page (WAITLIST_MODE).
   Built on css/global.css / css/landing-v2.css tokens — same concrete-light
   system as the real landing page. NOT css/waitlist.css (superseded per
   VISUAL-IDENTITY-RULING.md §9.3 kill-list — cream bg, lime gradient, heavy
   radius). This file only adds the pieces landing-v2.css doesn't already
   cover (.lv2-page/.lv2-masthead/.lv2-wordmark/.lv2-h1/.lv2-sub/.wl-callout
   are reused as-is).
   ============================================================ */

.wlp-hero {
  text-align: center;
  padding-top: 12vh;
  padding-bottom: 64px;
}

.wlp-form { max-width: 420px; margin: 32px auto 0; }
.wlp-row { display: flex; gap: 8px; }
.wlp-email {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
}
.wlp-email:focus { outline: 2px solid var(--accent-ink); outline-offset: 1px; }

/* The ONE lime element on this page — the submit action, nowhere else. */
.wlp-submit {
  flex-shrink: 0;
  min-height: 48px;
  padding: 0 24px;
  border: none;
  border-radius: 8px;
  background: var(--accent-full);
  color: var(--accent-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.wlp-submit:hover { background: var(--accent-hover); }
.wlp-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.wlp-error {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--error);
  margin: 8px 0 0;
  min-height: 0;
}
.wlp-note {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-subtle);
  margin: 16px auto 0;
  max-width: 420px;
}

@media (max-width: 480px) {
  .wlp-row { flex-direction: column; }
  .wlp-hero { padding-top: 8vh; }
}

@media (min-width: 900px) {
  .wlp-hero { padding-top: 16vh; padding-bottom: 96px; }
}