/* ══════════════════════════════════════════════════════════════════════════
   CAPITALQ™ WAITLIST — 2026-09-24
   Built from the client's GateQ waitlist document, converted to CapitalQ.
   Three stages: capture, qualify, intent. House system throughout — dark
   ground, gold accent, square corners, Inter, .glow on the card and buttons.
   ══════════════════════════════════════════════════════════════════════════ */

.wl{ position: relative; overflow: hidden; padding-block: clamp(120px, 12vw, 190px) clamp(80px, 9vw, 130px); }
.wl__ground{ position: absolute; inset: 0; pointer-events: none; }
.wl__glow{
  position: absolute; left: 50%; top: -12%; width: min(1100px, 120vw); aspect-ratio: 1.6;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, var(--accent-glow), transparent 68%);
  opacity: .5;
}
.wl__grid{
  position: absolute; inset: 0; opacity: .32;
  background-image:
    repeating-linear-gradient(90deg, rgba(244,248,251,.05) 0 1px, transparent 1px 96px),
    repeating-linear-gradient( 0deg, rgba(244,248,251,.05) 0 1px, transparent 1px 96px);
  -webkit-mask-image: radial-gradient(74% 62% at 50% 22%, #000, transparent 78%);
          mask-image: radial-gradient(74% 62% at 50% 22%, #000, transparent 78%);
}
.wl__inner{ position: relative; z-index: 2; }

/* ── the head ─────────────────────────────────────────────────────────── */
.wl__head{ text-align: center; max-width: 58ch; margin-inline: auto; }
.wl__eyebrow{
  margin: 0; font-family: var(--font-mono); font-weight: 600;
  font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; color: var(--accent);
}
.wl__h{
  margin: clamp(16px, 1.8vw, 24px) 0 0;
  font-size: clamp(2.3rem, 5vw, 4.1rem); font-weight: 600; line-height: 1.04;
  letter-spacing: -.04em; color: var(--txt-hi); text-wrap: balance;
}
.wl__lede{
  margin: clamp(14px, 1.6vw, 22px) auto 0; max-width: 52ch;
  font-size: clamp(1.02rem, 1.3vw, 1.2rem); line-height: 1.6; color: var(--txt);
}

/* ── the card ─────────────────────────────────────────────────────────── */
.wl__card{
  position: relative; margin: clamp(40px, 4.6vw, 70px) auto 0; max-width: 900px;
  padding: clamp(24px, 3.2vw, 48px);
  background: rgba(16,17,20,.86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(244,248,251,.12);
}

/* ── the progress rail ────────────────────────────────────────────────── */
.wl__rail{
  list-style: none; margin: 0 0 clamp(26px, 3vw, 40px); padding: 0 0 clamp(22px, 2.4vw, 32px);
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(244,248,251,.10);
}
.wl__rstep{ display: flex; align-items: center; gap: 10px; }
.wl__rnum{
  flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid rgba(244,248,251,.24); color: rgba(244,248,251,.5);
  font-size: .85rem; font-weight: 600; transition: all .3s ease;
}
.wl__rlbl{ font-size: .86rem; font-weight: 500; color: rgba(244,248,251,.5); transition: color .3s ease; white-space: nowrap; }
.wl__rstep.is-on .wl__rnum{ border-color: var(--accent); background: var(--accent); color: var(--accent-on); }
.wl__rstep.is-on .wl__rlbl{ color: var(--txt-hi); }
.wl__rstep.is-done .wl__rnum{ border-color: var(--accent); color: var(--accent); }
.wl__rstep.is-done .wl__rlbl{ color: rgba(244,248,251,.72); }
.wl__rline{ flex: 1 1 auto; height: 1px; background: rgba(244,248,251,.16); min-width: 14px; }

/* ── stages ───────────────────────────────────────────────────────────── */
.wl__stage[hidden]{ display: none; }
.wl__honey{ position: absolute; left: -9999px; opacity: 0; }
.wl__step{
  margin: 0 0 clamp(20px, 2.2vw, 30px);
  font-family: var(--font-mono); font-size: .76rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
}
.wl__stept{ color: rgba(244,248,251,.74); }
.wl__row{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 22px); }
.wl__row + .wl__row, .wl__row + .fld, .fld + .fld, .fld + .wl__set, .wl__row + .wl__set,
.wl__set + .wl__set, .wl__set + .fld, .wl__set + .wl__consent{ margin-top: clamp(18px, 2vw, 28px); }
.wl__opt{ color: rgba(244,248,251,.44); font-weight: 400; letter-spacing: 0; text-transform: none; }

.wl__set{ border: 0; padding: 0; margin: 0; min-width: 0; }
.wl__leg{
  padding: 0; margin: 0 0 12px; display: block;
  font-size: .98rem; font-weight: 600; line-height: 1.45; color: var(--txt-hi);
}
.wl__leg i{ color: var(--accent); font-style: normal; }
.wl__hint{ font-weight: 400; font-size: .86rem; color: rgba(244,248,251,.44); }
.fld__lbl i{ color: var(--accent); font-style: normal; }

/* ── option chips ─────────────────────────────────────────────────────── */
.wl__opts{ display: grid; gap: 8px; }
.wl__opts--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wl__opts--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wl__opt-l{
  position: relative; display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; cursor: pointer;
  background: rgba(255,255,255,.035); border: 1px solid rgba(244,248,251,.16);
  font-size: .92rem; line-height: 1.35; color: rgba(244,248,251,.84);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.wl__opt-l:hover{ border-color: rgba(226,178,76,.55); color: var(--txt-hi); }
.wl__opt-l input{ position: absolute; opacity: 0; width: 0; height: 0; }
.wl__opt-l > span{ flex: 1 1 auto; }
.wl__opt-l::before{
  content: ""; flex: 0 0 auto; width: 17px; height: 17px;
  border: 1px solid rgba(244,248,251,.34); background: transparent;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.wl__opt-l:has(input:checked){
  border-color: var(--accent); background: rgba(226,178,76,.10); color: var(--txt-hi);
}
.wl__opt-l:has(input:checked)::before{
  background: var(--accent); border-color: var(--accent);
  box-shadow: inset 0 0 0 3px #101114;
}
.wl__opt-l:has(input:focus-visible){ outline: 2px solid var(--accent); outline-offset: 2px; }
.wl__opt-l.is-locked{ opacity: .42; cursor: not-allowed; }

/* ── consent ──────────────────────────────────────────────────────────── */
.wl__consent{
  margin-top: clamp(24px, 2.6vw, 34px); padding-top: clamp(22px, 2.4vw, 30px);
  border-top: 1px solid rgba(244,248,251,.10);
}
.wl__consenth{
  margin: 0 0 14px; font-family: var(--font-mono); font-size: .76rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
}
.wl__check{ display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; cursor: pointer; font-size: .92rem; line-height: 1.5; color: rgba(244,248,251,.82); }
.wl__check input{ margin-top: 3px; flex: 0 0 auto; accent-color: var(--accent); width: 17px; height: 17px; }
.wl__fine{ margin: 14px 0 0; font-size: .82rem; color: rgba(244,248,251,.42); }

/* ── feet and errors ──────────────────────────────────────────────────── */
.wl__foot{
  margin-top: clamp(26px, 3vw, 40px); padding-top: clamp(22px, 2.4vw, 30px);
  border-top: 1px solid rgba(244,248,251,.10);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.wl__note{ margin: 0; font-size: .84rem; color: rgba(244,248,251,.44); flex: 1 1 200px; }
.wl__err{ margin: 8px 0 0; font-size: .84rem; color: #F2A0A0; }
.wl__err--form{ margin-top: 14px; }

/* ── the success state ────────────────────────────────────────────────── */
.wl__done[hidden]{ display: none; }
.wl__done{ text-align: center; padding-block: clamp(8px, 1vw, 16px); }
.wl__tick{
  display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto clamp(22px, 2.4vw, 32px);
  border: 2px solid var(--accent); color: var(--accent);
  box-shadow: 0 0 0 6px rgba(226,178,76,.10), 0 22px 60px -30px var(--accent-glow);
}
.wl__tick svg{ width: 40px; height: 40px; }
.wl__doneh{ margin: 0; font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 600; letter-spacing: -.035em; color: var(--txt-hi); }
.wl__donesub{ margin: 10px 0 0; font-size: clamp(1.1rem, 1.6vw, 1.4rem); font-weight: 600; color: var(--accent); }
.wl__donep{ margin: 14px auto 0; max-width: 56ch; font-size: 1rem; line-height: 1.65; color: var(--txt); }
.wl__donep--dim{ color: rgba(244,248,251,.5); font-size: .94rem; }

.wl__share{
  margin-top: clamp(34px, 3.8vw, 52px); padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid rgba(244,248,251,.10);
}
.wl__shareh{ margin: 0; font-size: 1.16rem; font-weight: 600; color: var(--txt-hi); }
.wl__sharep{ margin: 8px 0 0; font-size: .98rem; color: var(--txt); }
.wl__sharebtns{ margin-top: clamp(20px, 2.2vw, 28px); display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.wl__copied{ margin: 14px 0 0; font-size: .86rem; color: var(--accent); }
.wl__copied[hidden]{ display: none; }

/* ── phones ───────────────────────────────────────────────────────────── */
@media (max-width: 860px){
  .wl__opts--3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl__rlbl{ display: none; }
  .wl__rail{ gap: 6px; }
}
@media (max-width: 600px){
  .wl{ padding-block: 104px 70px; }
  .wl__card{ padding: 20px 16px; }
  .wl__row{ grid-template-columns: 1fr; }
  .wl__opts--2, .wl__opts--3{ grid-template-columns: 1fr; }
  .wl__foot{ flex-direction: column; align-items: stretch; }
  .wl__foot .btn{ width: 100%; justify-content: center; }
  .wl__note{ text-align: center; }
  .wl__sharebtns .btn{ width: 100%; justify-content: center; }
  .wl__tick{ width: 62px; height: 62px; }
  .wl__tick svg{ width: 33px; height: 33px; }
}

/* the fieldset legend cannot carry the grid, so IE-era fallbacks are moot,
   but Safari needs the explicit min-width:0 above to stop the grid blowing out */
@supports not (selector(:has(*))){
  .wl__opt-l input:checked ~ span{ color: var(--txt-hi); }
}