/* ShieldTX v2 · form pages (/request-access, /api-access).
   Restyles the v1 waitlist-* form markup in the design's tokens. The form
   scripts (public-scripts/*-form.js) depend on these class names and on the
   behaviour rules marked "behaviour" — keep both. */

/* ---------- Page layout: intro left, form card right ---------- */
.form-section { padding-top: 170px; }
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 620px); gap: 64px; align-items: start; }
.page-intro { position: sticky; top: 140px; }
.page-intro h1 { font-size: clamp(42px, 4.6vw, 82px); line-height: 1.04; letter-spacing: -.035em; margin-bottom: 28px; }
.page-intro h1 > span { display: block; }
.page-intro p { max-width: 460px; font-size: 18px; line-height: 1.65; color: var(--text-3); margin: 0; }
@media (max-width: 1000px) {
  .form-layout { grid-template-columns: 1fr; gap: 40px; }
  .page-intro { position: static; }
}
@media (max-width: 700px) {
  .form-section { padding-top: 120px; }
  .page-intro h1 { font-size: clamp(36px, 10vw, 48px); margin-bottom: 18px; }
  .page-intro p { font-size: 15px; }
}

/* ---------- Card + progress ---------- */
.waitlist-mount { position: relative; overflow: visible; }
/* Progress: a thin rounded line inside the card, aligned with the form content
   (sitting on the card edge it poked past the rounded corners). Muted, not blue. */
.waitlist-progress { height: 2px; margin: 36px 36px 0; border-radius: 2px; background: #ffffff14; overflow: hidden; }
.waitlist-progress-fill { height: 100%; width: 50%; border-radius: 2px; background: var(--text-4); transition: width .35s cubic-bezier(.22, 1, .36, 1); }

/* behaviour: honeypot stays off-screen for humans, reachable for bots */
.waitlist-honeypot { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.waitlist-form { display: flex; flex-direction: column; gap: 18px; min-height: 480px; padding: 28px 36px 28px; }
/* behaviour: one step visible at a time */
.waitlist-step { display: none; flex-direction: column; gap: 16px; flex: 1; }
.waitlist-step.is-active { display: flex; }
/* behaviour: question steps hold the tallest step's height (--step-min, set by
   the form script from the real rendered heights) so advancing through the
   form swaps the contents without resizing the card or moving the page.
   The result step is excluded on purpose: it is the terminal panel. */
.waitlist-step:not([data-step="result"]) { min-height: var(--step-min, 0px); }
.waitlist-step-label { display: block; font-size: 12px; } /* colour + type: shared eyebrow style in site.css */
.waitlist-title { font-size: 30px; line-height: 1.15; letter-spacing: -.03em; margin: 0; }
.waitlist-sub { font-size: 15px; color: var(--text-3); margin: 0; }

/* ---------- Fields ---------- */
.waitlist-field, .waitlist-question { display: flex; flex-direction: column; gap: 10px; }
.waitlist-field { margin-top: 4px; }
.waitlist-label, .waitlist-question-title { font-size: 13px; line-height: 1.5; color: var(--text-2); margin: 0; }
.waitlist-question-hint { color: var(--text-4); margin-left: 6px; }
.waitlist-input, .waitlist-dropdown-trigger { width: 100%; min-height: 52px; background: var(--canvas); border: 1px solid #fff3; border-radius: var(--r); padding: 14px 16px; color: var(--text-1); font: 15px var(--sans); transition: border-color .2s; }
.waitlist-input { font-family: var(--mono); }
.waitlist-input::placeholder { color: var(--text-4); }
.waitlist-input:hover, .waitlist-dropdown-trigger:hover { border-color: #ffffff52; }
.waitlist-input:focus-visible, .waitlist-dropdown-trigger:focus-visible { outline: none; border-color: #ffffff80; box-shadow: 0 0 0 3px #ffffff14; }
.is-invalid .waitlist-input, .is-invalid .waitlist-dropdown-trigger { border-color: #eeabab88; }
.waitlist-inline-error { font-size: 13px; color: #eeabab; margin: -6px 0 0; }

/* ---------- Dropdown (custom listbox over a hidden native select) ---------- */
.waitlist-dropdown { position: relative; width: 100%; }
/* behaviour: native select stays in the form for FormData, invisible */
.waitlist-dropdown-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; }
.waitlist-dropdown-trigger { appearance: none; -webkit-appearance: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; cursor: pointer; }
.waitlist-dropdown-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
.waitlist-dropdown-label.is-placeholder { color: var(--text-4); }
.waitlist-dropdown-caret { flex: 0 0 auto; width: 8px; height: 8px; margin-right: 4px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.waitlist-dropdown.is-open .waitlist-dropdown-caret { transform: translateY(2px) rotate(-135deg); }
.waitlist-dropdown.is-open .waitlist-dropdown-trigger { border-color: #ffffff80; }
.waitlist-dropdown-panel { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; right: 0; max-height: 300px; overflow-y: auto; padding: 6px; background: var(--panel); border: 1px solid #fff2; border-radius: var(--r); box-shadow: 0 20px 60px #000c; }
.waitlist-dropdown-panel[hidden] { display: none; }
.waitlist-dropdown-row { appearance: none; -webkit-appearance: none; display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; padding: 11px 12px; border-radius: var(--r-sm); color: var(--text-2); font: 14px var(--sans); text-align: left; cursor: pointer; }
.waitlist-dropdown-row:hover, .waitlist-dropdown-row:focus-visible { background: #ffffff0a; color: var(--text-1); outline: none; }
.waitlist-dropdown-row.is-selected { color: var(--text-1); background: #ffffff0f; }
.waitlist-dropdown-check { position: relative; flex: 0 0 16px; width: 16px; height: 16px; border: 1px solid #ffffff40; border-radius: 4px; }
.waitlist-dropdown-row.is-selected .waitlist-dropdown-check { background: var(--text-1); border-color: var(--text-1); }
.waitlist-dropdown-row.is-selected .waitlist-dropdown-check::after { content: ""; position: absolute; left: 50%; top: 45%; width: 8px; height: 4.5px; border-left: 1.6px solid var(--canvas); border-bottom: 1.6px solid var(--canvas); transform: translate(-50%, -50%) rotate(-45deg); }

/* ---------- Errors, nav ---------- */
.waitlist-error { font-size: 14px; color: #eeabab; margin: 0; }
.waitlist-nav { margin-top: auto; padding-top: 22px; border-top: 1px solid #fff1; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.waitlist-nav .button { margin-left: auto; }
.waitlist-back { appearance: none; background: none; border: 0; padding: 8px 4px; font-size: 14px; color: var(--text-3); cursor: pointer; }
.waitlist-back:hover { color: var(--text-1); }
/* behaviour: hidden nav buttons drop out, but Back keeps its space so the layout doesn't shift */
.waitlist-nav [hidden] { display: none !important; }
.waitlist-nav .waitlist-back[hidden] { display: inline-block !important; visibility: hidden; }
.waitlist-next[disabled], .waitlist-submit[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.waitlist-submit.is-loading { opacity: .7; }
[data-state="submitting"] .waitlist-back, [data-state="submitting"] .waitlist-next { opacity: .5; pointer-events: none; }

@media (max-width: 700px) {
  .waitlist-progress { margin: 24px 20px 0; }
  .waitlist-form { padding: 20px 20px 20px; min-height: 0; }
  .waitlist-title { font-size: 24px; }
  .waitlist-nav .button { flex: 1; }
  /* Without the desktop card floor the confirmation step collapsed to a
     ~225px sliver on phones; keep it a deliberate panel. */
  .waitlist-step[data-step="result"] { min-height: 380px; }
}