/* ─────────────────────────────────────────────────────────────────
   Waitlist form, drop-in replacement for the marketing CTAs.
   Designed to occupy the same vertical footprint as a single .btn-cta
   so it can sit inside .hero-ctas, .uc-hero-ctas, and .endmark-cta-inner
   slots without changing surrounding block heights.
   ───────────────────────────────────────────────────────────────── */

.waitlist-form {
  display: flex;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  max-width: 290px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(15, 14, 17, 0.10);
  border-radius: 999px;
  padding: 3px 3px 3px 14px;
  margin: 0;
  box-shadow: 0 6px 18px rgba(15, 14, 17, 0.04);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
  font-family: var(--sans, system-ui);
}

.waitlist-form:focus-within {
  background: #fff;
  border-color: rgba(91, 79, 207, 0.34);
  box-shadow: 0 10px 22px rgba(91, 79, 207, 0.10);
}

.waitlist-form input[type="email"] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  font: 13px var(--sans, system-ui);
  color: var(--ink, #0f0e11);
  padding: 8px 0;
}
.waitlist-form input[type="email"]:focus,
.waitlist-form input[type="email"]:focus-visible {
  outline: none;
  box-shadow: none;
}
.waitlist-form input[type="email"]::placeholder {
  color: var(--ink3, #76737d);
}
/* Suppress every flavor of browser autofill highlight (the "blue/yellow box"):
   - :-webkit-autofill: Chrome, Safari macOS
   - :-webkit-autofill:focus/hover/active: state-specific overrides Safari uses
   - :-internal-autofill-selected: iOS Safari's private autofill state
   - :autofill (no prefix): modern spec
   The huge inset box-shadow paints OVER the browser's native autofill bg, the
   9999s transition stalls any background-color animation. All flagged !important
   because iOS Safari injects user-agent styles that win over normal specificity. */
.waitlist-form input[type="email"]:-webkit-autofill,
.waitlist-form input[type="email"]:-webkit-autofill:hover,
.waitlist-form input[type="email"]:-webkit-autofill:focus,
.waitlist-form input[type="email"]:-webkit-autofill:active,
.waitlist-form input[type="email"]:-internal-autofill-selected,
.waitlist-form input[type="email"]:autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: var(--ink, #0f0e11) !important;
  background-color: #fff !important;
  background-image: none !important;
  transition: background-color 9999s ease-in-out 0s !important;
  caret-color: var(--ink, #0f0e11) !important;
}
/* When the surrounding pill is focused (background:#fff via :focus-within),
   keep the autofill suppression consistent, the inner inset stays white. */
.waitlist-form:focus-within input[type="email"]:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
}

.waitlist-form .btn-cta,
.waitlist-form .feat-btn-primary,
.waitlist-form button[type="submit"] {
  border-radius: 999px;
  padding: 9px 18px;
  flex-shrink: 0;
  line-height: 1;
  border: 0;
  cursor: pointer;
  font: 500 13px var(--sans, system-ui);
  color: #fff;
  background: var(--violet, #5b4fcf);
  transition: opacity .15s;
}
.waitlist-form .btn-cta:hover,
.waitlist-form .feat-btn-primary:hover,
.waitlist-form button[type="submit"]:hover {
  opacity: 0.88;
}

.waitlist-form.is-submitted {
  background: rgba(237, 233, 255, 0.62);
  border-color: rgba(91, 79, 207, 0.34);
  justify-content: center;
  padding: 3px;
}
.waitlist-form.is-submitted input[type="email"],
.waitlist-form.is-submitted button[type="submit"] {
  display: none;
}
.waitlist-confirmation {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 13px var(--sans, system-ui);
  color: var(--violet, #5b4fcf);
  padding: 9px 18px;
  line-height: 1;
}
.waitlist-form.is-error {
  border-color: rgba(201, 64, 64, 0.42);
}

/* Centered footer variant */
.waitlist-form--end {
  margin: 0 auto;
}

/* Squared variant, matches feat-nav pages (Features, Researchers, Students)
   which use 2px-radius buttons throughout. */
.waitlist-form--square,
.waitlist-form--square .btn-cta,
.waitlist-form--square .feat-btn-primary,
.waitlist-form--square button[type="submit"] {
  border-radius: 2px;
}
.waitlist-form--square {
  padding: 3px 3px 3px 12px;
}

/* Status line beneath the form (uses .hero-fineprint or .endmark-fineprint slot) */
.waitlist-status {
  font: 11.5px var(--sans, system-ui);
  color: var(--ink3, #76737d);
  margin: 14px 0 0;
  min-height: 1em;
}
.waitlist-status--center { text-align: center; }

/* Nav button, sits where "Get started free" was */
.waitlist-nav-btn {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: var(--violet, #5b4fcf);
  padding: 9px 16px;
  border-radius: 999px;
  border: 0;
  text-decoration: none;
  font-family: var(--sans, system-ui);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s;
}
.waitlist-nav-btn:hover { opacity: 0.88; }

/* ─────────────────────────────────────────────────────────────────
   Mobile. This sheet loads AFTER landing-inline.css, so its base rules
   win the cascade; the mobile sizing must live HERE (a media query in
   landing-inline.css would be silently overridden by the base rules
   above). Covers: fill toward 360px, a >=16px input (Safari auto-zooms
   the page when focusing any <16px input — the one horizontal-pan path
   body{overflow-x:hidden} cannot stop), and thumb-sized tap targets.
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .waitlist-form { max-width: 360px; margin: 0 auto; }
  .waitlist-form input[type="email"] { font-size: 16px; padding: 7px 0; }
  .waitlist-form .btn-cta,
  .waitlist-form .feat-btn-primary,
  .waitlist-form button[type="submit"] { padding: 11px 18px; }
  .waitlist-nav-btn { padding: 11px 16px; }
}