/* ============================================================
   FORTITUDEFX — WAITLIST PAGE STYLESHEET
   Extends styles-base.css

   Scope:
   All styles specific to the waitlist page live here.
   styles-base.css handles global tokens, nav, footer,
   back-to-top, and shared component primitives (glass-card,
   vipd-pricing-shell, vipd-plan-card, etc.).

   Sections:
   01. Page layout
   02. Form shell & thank you shell
   03. Form head
   04. Fields
   05. Path selector
   06. Dynamic panels
   07. Offer rail
   08. Bootcamp offer panel
   09. Promo code chip
   10. Gold highlight
   11. Consent, privacy note & reCAPTCHA
   12. Submit row & status
   13. Trust banner
   14. Thank you state
   15. Footer privacy link
   16. Responsive
   ============================================================ */


/* ============================================================
   01. PAGE LAYOUT
   ============================================================ */

.page {
  position: relative;
  padding: 136px 24px 96px;
  overflow: hidden;
}

.page-glow {
  position: absolute;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(122, 92, 255, 0.18) 0%,
    rgba(45,  20, 114, 0.28) 40%,
    transparent 68%
  );
  top: -240px;
  right: -180px;
  filter: blur(24px);
  pointer-events: none;
  animation: glow-pulse 9s ease-in-out infinite;
}

.page-wrap {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.95fr 1.1fr;
  gap: 64px;
  align-items: start;
}

.page-left {
  position: sticky;
  top: 112px;
  padding-top: 6px;
}

.page-left h1 {
  margin: 0 0 20px;
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: 0.92;
  letter-spacing: -0.06em;
  font-weight: 800;
  color: #ffffff;
  max-width: 560px;
}

.page-left p {
  margin: 0;
  max-width: 480px;
  font-size: 1.06rem;
  line-height: 1.92;
  color: var(--muted);
}

.left-meta {
  display: grid;
  gap: 12px;
  margin-top: 32px;
  max-width: 500px;
}

.left-meta-item {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.05),
    rgba(45, 20, 114, 0.10)
  );
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 4px 18px rgba(45, 20, 114, 0.14);
  transition:
    border-color 0.28s ease,
    background    0.28s ease,
    box-shadow    0.28s ease;
}

.left-meta-item:hover {
  border-color: rgba(167, 139, 250, 0.20);
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.06),
    rgba(45, 20, 114, 0.16)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 8px 28px rgba(122, 92, 255, 0.16);
}

.left-meta-item strong {
  display: block;
  margin-bottom: 8px;
  font-size: 0.96rem;
  color: white;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.left-meta-item span {
  display: block;
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.78;
  font-size: 0.94rem;
}

.left-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid var(--accent-line-strong);
  background: linear-gradient(180deg,
    rgba(122, 92, 255, 0.24),
    rgba(45, 20, 114, 0.36)
  );
  color: #efe9ff;
  font-size: 0.95rem;
  font-weight: 700;
  transition:
    transform    0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow   0.28s ease,
    border-color 0.28s ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 28px rgba(122, 92, 255, 0.26);
}

.left-cta:hover {
  transform: translateY(-3px);
  border-color: rgba(167, 139, 250, 0.60);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 16px 48px rgba(122, 92, 255, 0.36),
    0 0 60px rgba(45, 20, 114, 0.22);
}

.page-right { display: grid; gap: 16px; }


/* ============================================================
   02. FORM SHELL & THANK YOU SHELL
   Shared glass card container used by both states.
   ============================================================ */

.form-shell,
.thankyou-shell,
.info-card {
  position: relative;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(45, 20, 114, 0.12) 100%
  );
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.44),
    0 8px 32px rgba(45, 20, 114, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(122, 92, 255, 0.06);
  overflow: hidden;
}

/* Violet overlay sheen on all shell types */
.form-shell::after,
.thankyou-shell::after,
.info-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg,
    rgba(122, 92, 255, 0.10) 0%,
    rgba(45, 20, 114, 0.06) 35%,
    transparent 55%
  );
  opacity: 0.9;
  pointer-events: none;
}

.form-shell     { padding: 34px 34px 36px; }
.thankyou-shell { display: none; padding: 36px 34px 34px; }
.thankyou-shell.show { display: block; }


/* ============================================================
   03. FORM HEAD
   ============================================================ */

.form-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.form-brand small {
  display: block;
  font-size: 10px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(196, 181, 253, 0.80);
  margin-bottom: 10px;
}

.form-brand strong {
  display: block;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: white;
}

.form-badge {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--accent-line-strong);
  background: linear-gradient(180deg,
    rgba(122, 92, 255, 0.22),
    rgba(45, 20, 114, 0.32)
  );
  color: #efe9ff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow: 0 4px 18px rgba(122, 92, 255, 0.22);
}


/* ============================================================
   04. FIELDS
   ============================================================ */

.field-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.field {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.field label {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(196, 181, 253, 0.78);
}

.input,
.textarea,
.select-btn {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(45, 20, 114, 0.08);
  border-radius: 14px;
  color: white;
  font: inherit;
  font-family: var(--font);
  outline: none;
  transition:
    transform      0.24s cubic-bezier(0.22, 1, 0.36, 1),
    border-color   0.24s ease,
    box-shadow     0.24s ease,
    background     0.24s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.input,
.textarea { padding: 15px 18px; font-size: 0.98rem; }

.input::placeholder,
.textarea::placeholder { color: rgba(255, 255, 255, 0.28); font-weight: 400; }

.input:focus,
.textarea:focus {
  border-color: rgba(167, 139, 250, 0.40);
  background: rgba(45, 20, 114, 0.14);
}

.textarea { min-height: 130px; resize: vertical; line-height: 1.78; }


/* ============================================================
   05. PATH SELECTOR
   ============================================================ */

.choice-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.choice { position: relative; }

/* Visually hidden radio — click area covers the full .select-btn */
.choice input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.select-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 12px 14px;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.66);
  border-radius: 14px;
  transition:
    border-color 0.24s ease,
    background   0.24s ease,
    color        0.24s ease,
    box-shadow   0.24s ease;
}

.choice input:checked + .select-btn {
  border-color: var(--accent-line-strong);
  background: linear-gradient(180deg,
    rgba(122, 92, 255, 0.22),
    rgba(45, 20, 114, 0.32)
  );
  color: #efe9ff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 4px 18px rgba(122, 92, 255, 0.22);
}


/* ============================================================
   06. DYNAMIC PANELS
   Panels collapse to zero height when inactive and animate
   in when .is-active is toggled by JS path switching.
   ============================================================ */

.ffx-dynamic-shell {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}

.ffx-dynamic-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition:
    max-height 1.08s cubic-bezier(0.19, 1, 0.22, 1),
    opacity    0.58s cubic-bezier(0.22, 1, 0.36, 1),
    transform  1.08s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: max-height, opacity, transform;
}

.ffx-dynamic-panel.is-active {
  max-height: 1700px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ffx-dynamic-inner { display: grid; gap: 16px; padding-top: 4px; }

/* Inner card entrance — staggered after panel expands */
.ffx-dynamic-panel .vipd-pricing-shell,
.ffx-dynamic-panel .glass-card {
  opacity: 0;
  transform: translateY(18px) scale(0.990);
  transition:
    opacity   0.82s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.02s cubic-bezier(0.19, 1, 0.22, 1);
}

.ffx-dynamic-panel.is-active .vipd-pricing-shell,
.ffx-dynamic-panel.is-active .glass-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Staged content animation — bootcamp panel rows appear sequentially */
.ffx-dynamic-panel .ffx-stage-price,
.ffx-dynamic-panel .ffx-stage-meta,
.ffx-dynamic-panel .ffx-stage-cta {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity   0.72s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.96s cubic-bezier(0.19, 1, 0.22, 1);
}

.ffx-dynamic-panel.is-active .ffx-stage-price { opacity: 1; transform: translateY(0); transition-delay: 0.10s; }
.ffx-dynamic-panel.is-active .ffx-stage-meta  { opacity: 1; transform: translateY(0); transition-delay: 0.22s; }
.ffx-dynamic-panel.is-active .ffx-stage-cta   { opacity: 1; transform: translateY(0); transition-delay: 0.34s; }

/* VIP plan card stagger on panel open */
.ffx-dynamic-panel.is-active .vipd-plan-card:nth-child(1) { transition-delay: 0.04s; }
.ffx-dynamic-panel.is-active .vipd-plan-card:nth-child(2) { transition-delay: 0.08s; }
.ffx-dynamic-panel.is-active .vipd-plan-card:nth-child(3) { transition-delay: 0.12s; }
.ffx-dynamic-panel.is-active .vipd-plan-card:nth-child(4) { transition-delay: 0.16s; }
.ffx-dynamic-panel.is-active .vipd-plan-card:nth-child(5) { transition-delay: 0.20s; }

/* Sizing overrides for panels embedded inside the form shell */
.ffx-dynamic-panel .vipd-pricing-shell   { padding: 28px 26px 26px; border-radius: 28px; }
.ffx-dynamic-panel .vipd-pricing-topbar  { margin-bottom: 18px; }
.ffx-dynamic-panel .vipd-pricing-title-wrap h3 {
  margin: 0 0 10px;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.04;
}
.ffx-dynamic-panel .vipd-pricing-title-wrap p { max-width: none; }
.ffx-dynamic-panel .vipd-plan-card       { min-height: 94px; }
.ffx-dynamic-panel .vipd-pricing-foot    { margin-top: 18px; padding-top: 16px; }

.ffx-dynamic-note {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(201, 168, 76, 0.28);
  background: linear-gradient(180deg,
    rgba(201, 168, 76, 0.16),
    rgba(150, 110, 30, 0.20)
  );
  color: rgba(232, 210, 140, 0.92);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
}


/* ============================================================
   07. OFFER RAIL
   Two-column grid used for pill-style feature highlights.
   ============================================================ */

.ffx-offer-rail {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}

.ffx-offer-pill {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.04),
    rgba(45, 20, 114, 0.10)
  );
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ffx-offer-pill strong {
  display: block;
  margin-bottom: 7px;
  color: #ffffff;
  font-size: 0.93rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ffx-offer-pill span {
  display: block;
  color: rgba(255, 255, 255, 0.60);
  line-height: 1.72;
  font-size: 0.88rem;
}


/* ============================================================
   08. BOOTCAMP OFFER PANEL
   ============================================================ */

.ffx-bootcamp-offer .price-row        { align-items: flex-end; flex-wrap: wrap; gap: 8px 14px; margin: 18px 0 22px; }
.ffx-bootcamp-offer .price-row strong { font-size: clamp(2.8rem, 5vw, 4.1rem); }
.ffx-bootcamp-offer .price-row span   { font-size: 1.05rem; letter-spacing: -0.01em; }
.ffx-bootcamp-offer .pricing-list     { margin-top: 16px; }

.ffx-bootcamp-badge-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}

.ffx-bootcamp-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(201, 168, 76, 0.75);
  background: linear-gradient(160deg,
    rgba(201, 168, 76, 0.10) 0%,
    rgba(150, 110, 30, 0.08) 100%
  );
  color: var(--accent-warm-text);
  box-shadow: -2px 0 8px rgba(201, 168, 76, 0.18);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ffx-launch-copy {
  width: 100%;
  margin-bottom: 10px;
  color: rgba(196, 181, 253, 0.84);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.ffx-bonus-hero {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  margin: 0 0 20px;
  padding: 18px 20px 17px;
  border-radius: 20px;
  border: 1px solid rgba(167, 139, 250, 0.20);
  background: linear-gradient(160deg,
    rgba(122, 92, 255, 0.16),
    rgba(45, 20, 114, 0.24)
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.ffx-bonus-hero strong {
  display: block;
  color: #ffffff;
  font-size: 1.04rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ffx-bonus-hero span {
  display: block;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.78;
  font-size: 0.93rem;
}

.ffx-bootcamp-bonus {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.ffx-bootcamp-bonus .thankyou-item,
.ffx-stay-card .thankyou-item { padding: 18px; border-radius: 20px; }

.ffx-bootcamp-bonus .thankyou-item h3 { margin-bottom: 8px; }

.ffx-offer-rail.ffx-bootcamp-bonus {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}


/* ============================================================
   09. PROMO CODE CHIP
   Gold-tinted inline chip displayed in VIP plan card rows.
   ============================================================ */

.promo-code-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(201, 168, 76, 0.45);
  background: rgba(201, 168, 76, 0.10);
  color: rgba(232, 210, 140, 0.92);
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.promo-code-desc {
  display: block;
  margin-top: 4px;
  color: rgba(196, 181, 253, 0.60);
  font-size: 0.70rem;
  line-height: 1.44;
}


/* ============================================================
   10. GOLD HIGHLIGHT
   Shared gold left-border + dust glow treatment.
   Used on: bootcamp bonus block, thank you card.
   Matches the benefit-item treatment in styles-base.css.
   ============================================================ */

.ffx-bonus-gold {
  border-left:   2px solid rgba(201, 168, 76, 0.75);
  border-top:    1px solid rgba(255, 255, 255, 0.07);
  border-right:  1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(160deg,
    rgba(201, 168, 76, 0.08) 0%,
    rgba(45, 20, 114, 0.10) 100%
  );
  box-shadow: -3px 0 12px rgba(201, 168, 76, 0.22);
}

.ffx-bonus-gold strong { color: var(--accent-warm-text); }


/* ============================================================
   11. CONSENT, PRIVACY NOTE & RECAPTCHA
   ============================================================ */

.consent {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 8px;
  margin-bottom: 22px;
  color: rgba(255, 255, 255, 0.60);
  font-size: 0.93rem;
  line-height: 1.82;
}

.consent input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: #7a5cff;
  flex-shrink: 0;
}

/* Small GDPR note linking to the privacy policy page */
.ffx-privacy-note {
  position: relative;
  z-index: 1;
  font-size: 0.80rem;
  color: rgba(255, 255, 255, 0.32);
  line-height: 1.66;
  margin-top: -14px;
  margin-bottom: 20px;
}

.ffx-privacy-note a {
  color: rgba(196, 181, 253, 0.55);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.20s ease;
}

.ffx-privacy-note a:hover { color: rgba(196, 181, 253, 0.90); }

/* reCAPTCHA v2 widget wrapper */
.ffx-recaptcha-wrap {
  position: relative;
  z-index: 1;
  margin-bottom: 18px;
}


/* ============================================================
   12. SUBMIT ROW & STATUS
   ============================================================ */

.submit-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 30px;
  border-radius: 999px;
  border: 1px solid var(--accent-line-strong);
  background: linear-gradient(180deg,
    rgba(122, 92, 255, 0.30) 0%,
    rgba(45, 20, 114, 0.46) 100%
  );
  color: #efe9ff;
  font-size: 0.96rem;
  font-weight: 800;
  font-family: var(--font);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    transform      0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow     0.28s ease,
    border-color   0.28s ease,
    background     0.28s ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 32px rgba(122, 92, 255, 0.34),
    0 0 0 1px rgba(45, 20, 114, 0.24);
}

.submit-btn:hover {
  transform: translateY(-3px);
  border-color: rgba(167, 139, 250, 0.65);
  background: linear-gradient(180deg,
    rgba(122, 92, 255, 0.40) 0%,
    rgba(45, 20, 114, 0.58) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 18px 52px rgba(122, 92, 255, 0.44),
    0 0 80px rgba(45, 20, 114, 0.28),
    0 0 0 1px rgba(122, 92, 255, 0.20);
}

.submit-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.sub-note {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.84rem;
  line-height: 1.72;
  max-width: 260px;
}

.ffx-form-status {
  position: relative;
  z-index: 1;
  min-height: 22px;
  margin-top: 10px;
  color: rgba(196, 181, 253, 0.92);
  font-size: 0.88rem;
  line-height: 1.7;
}

.ffx-form-status.is-error { color: #f3c6d2; }
.ffx-hidden               { display: none !important; }


/* ============================================================
   13. TRUST BANNER
   No-payment reassurance displayed above the submit button.
   Uses green tones to signal safety — distinct from brand violet.
   ============================================================ */

.ffx-trust-banner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(15, 110, 86, 0.12);
  border: 1px solid rgba(29, 158, 117, 0.28);
  border-radius: 16px;
  padding: 14px 18px;
  margin-bottom: 18px;
}

.ffx-trust-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 1px;
}

.ffx-trust-body { display: grid; gap: 4px; }

.ffx-trust-body strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(160, 230, 200, 0.95);
  letter-spacing: -0.01em;
}

.ffx-trust-body span {
  display: block;
  font-size: 0.80rem;
  color: rgba(160, 230, 200, 0.62);
  line-height: 1.62;
}


/* ============================================================
   14. THANK YOU STATE
   Shown after successful form submission.
   JS adds .show to .thankyou-shell and hides .form-shell.
   CSS :has() selector collapses the left column so the
   thank you card occupies the full page-right width.
   ============================================================ */

.thankyou-shell h2 {
  position: relative;
  z-index: 1;
  margin: 0 0 18px;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 0.96;
  letter-spacing: -0.05em;
  font-weight: 700;
  max-width: 520px;
}

.thankyou-shell p {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 620px;
  font-size: 1.02rem;
  line-height: 1.92;
  color: var(--muted);
}

/* Single centred gold card — uses .thankyou-item + .ffx-bonus-gold */
.thankyou-next-wrap {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.thankyou-next-card {
  width: 100%;
  max-width: 580px;
  text-align: center;
}

.thankyou-next-card h3 {
  font-size: 0.80rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-warm-text);
  margin: 0 0 12px;
}

.thankyou-next-card p {
  font-size: 0.97rem;
  line-height: 1.88;
  color: rgba(255, 255, 255, 0.68);
  margin: 0;
}

.thankyou-next-card a {
  color: rgba(232, 210, 140, 0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.22s ease;
}

.thankyou-next-card a:hover { color: rgba(232, 210, 140, 1); }

/* Collapse left column when thank you state is active */
.page-wrap:has(.thankyou-shell.show) {
  grid-template-columns: 1fr;
}

.page-wrap:has(.thankyou-shell.show) .page-left {
  display: none;
}

.page-wrap:has(.thankyou-shell.show) .page-right {
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}

/* Reusable card item — used in thank you and bootcamp bonus */
.thankyou-item {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.04),
    rgba(45, 20, 114, 0.10)
  );
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.thankyou-item strong {
  display: block;
  margin-bottom: 8px;
  font-size: 0.96rem;
  font-weight: 700;
  color: white;
  letter-spacing: -0.01em;
}

.thankyou-item span {
  display: block;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.78;
  font-size: 0.91rem;
}


/* ============================================================
   15. FOOTER PRIVACY LINK
   Styled here so no inline styles are needed in HTML.
   ============================================================ */

.footer-privacy-link {
  color: rgba(255, 255, 255, 0.22);
  text-decoration: none;
  transition: color 0.22s ease;
}

.footer-privacy-link:hover { color: rgba(255, 255, 255, 0.55); }


/* ============================================================
   16. RESPONSIVE
   ============================================================ */

@media (max-width: 1080px) {
  .page-wrap { grid-template-columns: 1fr; }
  .page-left { position: relative; top: auto; }
}

@media (max-width: 860px) {
  .ffx-dynamic-panel .vipd-plan-card {
    grid-template-columns: auto 1fr;
    align-items: start;
    padding: 18px;
    min-height: unset;
  }
  .ffx-dynamic-panel .vipd-plan-meta {
    grid-column: 2 / 3;
    justify-items: start;
    text-align: left;
    margin-top: 8px;
  }
  .ffx-offer-rail                     { grid-template-columns: 1fr; }
  .ffx-bootcamp-badge-row             { display: grid; }
  .ffx-offer-rail.ffx-bootcamp-bonus  { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .field-grid,
  .choice-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .page                                        { padding: 120px 20px 72px; }
  .page-left h1                                { font-size: clamp(2.2rem, 9vw, 3.5rem); }
  .form-shell, .thankyou-shell, .info-card     { padding: 24px 20px; border-radius: 24px; }
  .form-brand strong                           { font-size: 1.6rem; }
  .ffx-bonus-hero                              { padding: 16px 18px; }
  .submit-btn                                  { width: 100%; justify-content: center; }
  .submit-row                                  { flex-direction: column; align-items: stretch; }
  .sub-note                                    { max-width: none; font-size: 0.80rem; }
  .left-cta                                    { justify-content: center; }
  .thankyou-next-card                          { max-width: 100%; }
}

/* iPad portrait */
@media (min-width: 768px) and (max-width: 1024px) {
  .page      { padding: 130px 28px 88px; }
  .page-wrap { gap: 44px; }
}