/* ═══════════════════════════════════════════════════════════════════════
   WAITLIST FORM — LAUNCHLIST
   Replaces the Viral Loops widget, which rendered inside a shadow root we
   did not control: a cool #F5F5F5 panel, pill inputs and a flat orange
   button, none of which exist anywhere else on this page. It was the one
   off-brand surface on the site and it sat at the point of conversion.

   LaunchList's widget-diy.js takes our own markup, so the form is now
   ordinary DOM and inherits the page: ivory paper, --border hairlines,
   Manrope, and the same gold-foil treatment as every other primary action.
   ═══════════════════════════════════════════════════════════════════════ */
/* Local aliases with fallbacks. The gold-as-material tokens (--gold-foil,
   --on-gold, --label, --quiet, --gold-line) exist in the palette-pass
   revision of this file but not in the earlier one, so each is read through
   a var() fallback. The form then looks correct against either revision
   instead of collapsing to an unstyled button. */
.tgv-waitlist{
  --wl-foil:var(--gold-foil,linear-gradient(180deg,#F3DFA0 0%,#E2C263 44%,#C79E38 78%,#B9932F 100%));
  --wl-foil-hover:var(--gold-foil-hover,linear-gradient(180deg,#F8E9B8 0%,#EBD07C 44%,#D2AA44 78%,#C39C34 100%));
  --wl-on-foil:var(--on-gold,#14140F);
  --wl-quiet:var(--quiet,#F6F2E9);
  --wl-label:var(--label,#6E6A60);
  --wl-hairline:var(--gold-line,rgba(168,122,18,.30));
}

.tgv-waitlist-form{display:grid;gap:10px}
.tgv-field{position:relative;min-width:0}

.tgv-field input{
  width:100%;
  height:54px;
  padding:0 17px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--wl-quiet);
  color:var(--text);
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  line-height:1.2;
  outline:0;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.tgv-field input::placeholder{color:var(--wl-label);font-weight:550}
.tgv-field input:hover{border-color:var(--wl-hairline)}
.tgv-field input:focus{
  border-color:var(--gold);
  background:var(--card);
  box-shadow:0 0 0 3px rgba(168,122,18,.16);
}
/* The browser's own invalid styling is a red glow on every empty field the
   moment the page loads, so it is scoped to fields the visitor has left. */
.tgv-field input:not(:placeholder-shown):invalid{border-color:var(--loss)}
.tgv-field input:-webkit-autofill{
  -webkit-text-fill-color:var(--text);
  box-shadow:0 0 0 40px var(--wl-quiet) inset;
}

/* Same foil as .btn--primary and .nav__cta, so the page has one primary
   action treatment rather than two. */
.tgv-submit{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  min-height:56px;
  margin-top:4px;
  padding:0 24px;
  border:1px solid rgba(140,102,14,.34);
  border-radius:var(--r-pill);
  background:var(--wl-foil);
  color:var(--wl-on-foil);
  font-family:inherit;
  font-size:15px;
  font-weight:800;
  letter-spacing:-.005em;
  cursor:pointer;
  box-shadow:0 1px 0 rgba(255,252,236,.6) inset,0 8px 20px rgba(140,102,14,.18);
  transition:background .2s,transform .2s var(--ease),box-shadow .2s;
}
.tgv-submit:hover{
  background:var(--wl-foil-hover);
  transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,252,236,.6) inset,0 12px 26px rgba(140,102,14,.24);
}
.tgv-submit:active{transform:translateY(0) scale(.99)}
.tgv-submit>span{font-size:16px;transition:transform .25s var(--ease)}
.tgv-submit:hover>span{transform:translateX(3px)}
.tgv-submit[disabled]{opacity:.6;cursor:default;transform:none}

.tgv-note{
  margin:14px 2px 0;
  color:var(--wl-label);
  font-size:11px;
  font-weight:650;
  line-height:1.55;
  text-align:center;
}

/* LaunchList swaps the form for its own confirmation node on success. It
   arrives unstyled, so it is caught generically rather than by class. */
.tgv-waitlist form + div,
.tgv-waitlist .launchlist-success{
  padding:6px 2px;
  color:var(--text);
  font-size:14px;
  font-weight:700;
  line-height:1.6;
  text-align:center;
}

@media (max-width:720px){
  .tgv-field input{height:52px;font-size:16px} /* 16px stops iOS zoom-on-focus */
  .tgv-submit{min-height:54px}
}
@media (prefers-reduced-motion:reduce){
  .tgv-submit,.tgv-submit>span{transition:none}
  .tgv-submit:hover{transform:none}
}