/* ============================================================
   /ai/ — Cleanup layer (loads AFTER ai.css)
   Goal: clearer, cleaner, more visual checkout
   - compact hero so picker is closer
   - sticky numbered progress stepper
   - brighter step labels + clearer hierarchy
   - softer cards with better selected state
   - reworked legal block (collapsible)
   - sharper mobile bar
   ============================================================ */

/* ── Compact hero ─────────────────────────────────────────── */
.ai-page .ai-hero--compact {
  min-height: 78vh;
  min-height: 78svh;
  padding: 96px 24px 56px;
}
.ai-page .ai-hero--compact .ai-hero__title {
  font-size: clamp(44px, 7.4vw, 104px);
  margin-bottom: 18px;
}
.ai-page .ai-hero--compact .ai-hero__sub {
  font-size: clamp(15px, 1.4vw, 18px);
  max-width: 48ch;
  margin-bottom: 28px;
  color: rgba(255, 255, 255, 0.82);
}
.ai-page .ai-hero--compact .ai-hero__eyebrow {
  margin-bottom: 18px;
  color: #c8ff00;
  background: rgba(200, 255, 0, 0.10);
  border: 1px solid rgba(200, 255, 0, 0.28);
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: 0.20em;
}

/* ── PROGRESS STEPPER ─────────────────────────────────────── */
.ai-stepper {
  position: sticky;
  top: 72px;
  z-index: 60;
  background: rgba(10, 10, 10, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px 0;
  margin-top: -1px;
}
.ai-stepper__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ai-stepper__inner::-webkit-scrollbar { display: none; }

.ai-stepper__dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.42);
  text-decoration: none;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  transition: color 200ms, background 200ms, border-color 200ms;
  cursor: pointer;
}
.ai-stepper__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  font-weight: 800;
  font-family: 'Cabinet Grotesk', sans-serif;
  transition: background 200ms, color 200ms;
}
.ai-stepper__name {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.ai-stepper__dot.is-done {
  color: rgba(255, 255, 255, 0.78);
}
.ai-stepper__dot.is-done .ai-stepper__num {
  background: #c8ff00;
  color: #0a0a0a;
}
.ai-stepper__dot.is-current {
  color: #fff;
  background: rgba(200, 255, 0, 0.10);
  border-color: rgba(200, 255, 0, 0.32);
}
.ai-stepper__dot.is-current .ai-stepper__num {
  background: #c8ff00;
  color: #0a0a0a;
  box-shadow: 0 0 0 3px rgba(200, 255, 0, 0.18);
}
.ai-stepper__dot:hover:not(.is-current) {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.04);
}
.ai-stepper__line {
  flex: 1 0 16px;
  height: 1px;
  background: rgba(255, 255, 255, 0.10);
  min-width: 12px;
}
body.has-promo .ai-stepper { top: calc(72px + var(--promo-h, 0px)); }

/* ── Brighter step labels + headline hierarchy ──────────── */
.ai-page .ai-step__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  background: rgba(200, 255, 0, 0.10);
  border: 1px solid rgba(200, 255, 0, 0.28);
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: #c8ff00;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.ai-page .ai-step__title {
  font-size: clamp(30px, 3.4vw, 46px);
  letter-spacing: -0.028em;
  margin-bottom: 6px;
}
.ai-page .ai-step__sub {
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.68);
  margin-bottom: 24px;
  max-width: 56ch;
}

/* ── Path cards: big type block (no random images) ───────── */
.ai-page .path-card__media--type {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 16 / 9;
  width: 100%;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(200,255,0,0.06) 0%, transparent 60%),
    linear-gradient(180deg, #161616 0%, #0e0e0e 100%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  isolation: isolate;
  transition: background 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ai-page .path-card__type-eyebrow {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.32em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  transition: color 240ms;
}
.ai-page .path-card__type-word {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 6vw, 72px);
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: #fff;
  text-align: center;
  transition: color 240ms, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ai-page .path-card--type:hover .path-card__type-word { transform: scale(1.02); }
.ai-page .path-card--type.is-selected .path-card__media--type {
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(200,255,0,0.22) 0%, transparent 65%),
    linear-gradient(180deg, #1a1d0d 0%, #0e0e0e 100%);
}
.ai-page .path-card--type.is-selected .path-card__type-eyebrow { color: #c8ff00; }
.ai-page .path-card--type.is-selected .path-card__type-word { color: #c8ff00; }

/* Hide the path-card tag (the small CINEMA Hybrid badge) on type cards — the big word replaces it */
.ai-page .path-card--type .path-card__tag { display: none; }

/* ── Path cards: sharper selected state ───────────────────── */
.ai-page .path-card {
  border-radius: 18px;
  border-width: 1px;
}
.ai-page .path-card.is-selected {
  border-color: #c8ff00;
  box-shadow:
    0 0 0 1px #c8ff00,
    0 24px 60px rgba(200, 255, 0, 0.18);
}
.ai-page .path-card__from {
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ai-page .path-card__price {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: #fff;
  letter-spacing: -0.02em;
}
.ai-page .path-card.is-selected .path-card__price { color: #c8ff00; }

/* Length pills brighter */
.ai-page .length-pill {
  border-radius: 18px;
  background: #141414;
  transition: border-color 200ms, transform 200ms, box-shadow 200ms;
}
.ai-page .length-pill[aria-checked="true"] {
  border-color: #c8ff00;
  box-shadow: 0 0 0 1px #c8ff00, 0 18px 40px rgba(200, 255, 0, 0.15);
}
.ai-page .length-pill[aria-checked="true"] .length-pill__num,
.ai-page .length-pill[aria-checked="true"] .length-pill__price {
  color: #c8ff00;
}

/* Add-on cards brighter */
.ai-page .addon-card {
  border-radius: 14px;
  background: #141414;
}
.ai-page .addon-card:has(.addon-input:checked) {
  border-color: #c8ff00;
  background: rgba(200, 255, 0, 0.04);
  box-shadow: 0 0 0 1px #c8ff00, 0 14px 32px rgba(200, 255, 0, 0.12);
}

/* Character stepper: bigger value */
.ai-page .char-stepper {
  background: #141414;
  border-radius: 18px;
}
.ai-page .char-count > span:first-child {
  font-size: clamp(42px, 5vw, 60px);
  color: #fff;
  font-weight: 800;
}
.ai-page .char-cost {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  margin-top: 6px;
}
.ai-page .char-cost.is-extra { color: #c8ff00; }

/* ── Right rail: more visual ──────────────────────────────── */
.ai-page .rail-card {
  background: linear-gradient(180deg, #161616 0%, #101010 100%);
  border-radius: 22px;
  padding: 22px 22px 26px;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.ai-page .rail-card__eyebrow {
  display: inline-block;
  background: rgba(200, 255, 0, 0.12);
  border: 1px solid rgba(200, 255, 0, 0.30);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.20em;
}
.ai-page .rail-card__hero-name {
  font-size: 22px;
  letter-spacing: -0.02em;
}
.ai-page .rail-line--total {
  font-size: 17px;
  padding-top: 4px;
}
.ai-page .rail-line--total span:last-child {
  font-size: 28px;
  font-weight: 800;
}
.ai-page .rail-line--deposit span:last-child,
.ai-page .rail-line--balance span:last-child {
  color: rgba(255, 255, 255, 0.88);
}
.ai-page .rail-line--deposit {
  margin-top: 4px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  font-size: 13px;
}
.ai-page .rail-line--deposit span:first-child {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
}
.ai-page .rail-line--balance {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 13px;
}

/* Submit button — bigger, more confident */
.ai-page .rail-card .btn-primary {
  padding: 20px 24px;
  font-size: 14.5px;
  border-radius: 14px;
  letter-spacing: 0.06em;
}

/* ── Phases strip — soften the chrome ─────────────────────── */
.ai-page .phases-strip {
  padding: 56px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ai-page .phase-card {
  border-radius: 18px;
}
.ai-page .phase-card__num {
  color: #c8ff00;
  font-weight: 800;
}

/* ── Form fields — friendlier ─────────────────────────────── */
.ai-page .input,
.ai-page .textarea {
  background: #141414;
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 15.5px;
}
.ai-page .field__label {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 8px;
  font-weight: 700;
}

/* ── Legal block — collapsible card grid ─────────────────── */
.legal-block--clean { margin-top: 56px; }
.legal-block--clean .legal-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.legal-block--clean .legal-heading { margin-bottom: 0; }

.legal-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms, border-color 180ms, color 180ms;
}
.legal-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.legal-toggle__caret {
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.legal-toggle[aria-expanded="true"] .legal-toggle__caret { transform: rotate(180deg); }

/* The full list — hidden by default on the clean variant, shown via JS */
.legal-list--cards {
  background: transparent;
  border: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 360ms cubic-bezier(0.16, 1, 0.3, 1), opacity 240ms, margin 240ms;
  opacity: 0;
}
.legal-list--cards.is-open {
  max-height: 2400px;
  opacity: 1;
  margin-bottom: 16px;
}
.legal-list--cards li {
  display: block;
  background: #131313;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px 18px;
}
.legal-list--cards li strong {
  display: block;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: #c8ff00;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.legal-list--cards li span {
  display: block;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.55;
  max-width: none;
}

@media (max-width: 720px) {
  .legal-list--cards { grid-template-columns: 1fr; gap: 10px; }
  .legal-list--cards.is-open { max-height: 3200px; }
}

/* ── Mobile bar — clearer status + always submittable ────── */
@media (max-width: 768px) {
  .ai-page .mobile-bar {
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
    background: rgba(14, 14, 14, 0.96);
  }
  .ai-page .mobile-bar__total {
    font-size: 24px;
  }
  .ai-page .mobile-bar__sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.72);
  }
  .ai-page .btn-primary--bar {
    padding: 16px 22px;
    font-size: 13px;
    border-radius: 12px;
  }
  /* Tighten hero on mobile */
  .ai-page .ai-hero--compact { min-height: 64svh; padding: 96px 20px 48px; }
  .ai-page .ai-hero--compact .ai-hero__title { font-size: clamp(38px, 10.5vw, 64px); }

  /* Hide the always-visible inline mobile submit — the bottom bar handles it */
  .ai-page .mobile-submit-wrap { display: none; }

  /* Stepper on mobile — compact, scrollable, hide labels */
  .ai-stepper { top: 64px; padding: 10px 0; }
  .ai-stepper__inner { gap: 4px; padding: 0 16px; }
  .ai-stepper__dot { padding: 6px 8px; }
  .ai-stepper__name { display: none; }
  .ai-stepper__dot.is-current .ai-stepper__name { display: inline; }
  .ai-stepper__line { min-width: 8px; flex: 1 0 8px; }
}

@media (max-width: 1100px) {
  /* When summary collapses below picker, keep it visible-but-tidy */
  .ai-page .rail-card { max-width: 600px; }
}

/* Hide hero scroll cue on the compact hero (stepper does the wayfinding) */
.ai-page .ai-hero--compact .ai-hero__cue { display: none; }

/* Mobile bar should ONLY show on mobile widths */
@media (min-width: 769px) {
  .ai-page .mobile-bar { display: none !important; }
}

/* ── HOW LONG IT TAKES (turnaround callout) ───────────────────────── */
.turnaround-card{
  margin: 28px 0 20px;
  padding: 28px 26px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(212,175,55,0.06) 0%, rgba(20,20,22,0.85) 50%);
  border: 1px solid rgba(212,175,55,0.28);
  box-shadow: 0 18px 60px -22px rgba(212,175,55,0.18), 0 1px 0 rgba(255,255,255,0.04) inset;
}
.turnaround-card__head{ margin-bottom: 22px; }
.turnaround-card__eyebrow{
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d4af37;
  font-weight: 600;
  margin-bottom: 8px;
}
.turnaround-card__title{
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.turnaround-card__lede{
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
  margin: 0;
  max-width: 60ch;
}
.turnaround-card__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.turnaround-card__cell{
  padding: 18px 16px;
  border-radius: 12px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.06);
}
.turnaround-card__num{
  font-size: 30px;
  font-weight: 800;
  color: #d4af37;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.turnaround-card__lbl{
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  font-weight: 600;
  margin-bottom: 10px;
}
.turnaround-card__sub{
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.75);
}
@media (max-width: 720px){
  .turnaround-card{ padding: 22px 18px; margin: 22px 0 18px; }
  .turnaround-card__grid{ grid-template-columns: 1fr; gap: 10px; }
  .turnaround-card__cell{ padding: 16px 14px; }
  .turnaround-card__num{ font-size: 26px; }
}