/* =========================================================================
   web/public/landing-page-v1/styles.css
   v1 LP overrides — extends ../styles/style.css (canonical brand tokens).
   Adds: icon-card quiz, advisor caption strip, blurred-bracket reveal,
   two-gate PII forms. Mobile-first. Same navy + gold + cream system.
   ========================================================================= */

/* ---- Quiz frame (progress bar + card together) -------------------- */

.ai-v1-quiz-frame {
  margin-top: var(--ai-space-4);
  background: var(--ai-paper);
  border: 1px solid var(--ai-border-soft);
  border-radius: var(--ai-radius-lg);
  box-shadow: var(--ai-shadow-md);
  overflow: hidden; /* round the progress bar inside the same frame */
}
.ai-v1-quiz-frame .ai-card-mount {
  background: transparent;
  border: none;
  border-radius: 0;
  margin-top: 0;
  box-shadow: none;
  padding: var(--ai-space-5) var(--ai-space-5) var(--ai-space-6);
}

/* v0's survey-engine.js renders <div class="ai-card"> inside the mount.
   .ai-card already carries paper background, border, radius, shadow,
   and padding (style.css). Inside the v1 quiz frame, that produces a
   visible white-card-on-white-card. Zero the inner card so only the
   outer frame is the visible surface. */
.ai-v1-quiz-frame .ai-card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  animation: none;
  /* v0 engine scrolls each new question to the top of the viewport via
     scrollIntoView({ block: 'start' }) + scroll-margin-top: 24px. v2 wants
     the survey to stay roughly centered, so push the scroll-margin-top
     down to ~30vh so the card lands in the middle of the viewport
     instead of pinning to the top. */
  scroll-margin-top: 30vh;
}

/* v0's survey-engine.js renders the "Why we ask" line as .ai-card-justification.
   Shared style.css gives that an italic gold-border treatment that does not
   match v1's design (centered, smaller, plain). Match v1's .ai-v1-justification
   look so v2 reads like v1. */
.ai-v1-quiz-frame .ai-card-justification {
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ai-text-muted);
  text-align: center;
  margin: 0 0 var(--ai-space-5);
  padding-left: 0;
  border-left: none;
}

/* Shared style.css collapses .ai-options.binary to 1 column under 480px
   (single-column stack). v1 uses different markup so it kept side-by-side
   on mobile. v2 uses v0's engine markup but matches v1's visual intent:
   keep binary options side-by-side on mobile. */
@media (max-width: 480px) {
  .ai-v1-quiz-frame .ai-options.binary {
    grid-template-columns: 1fr 1fr;
  }
  /* Q6 (intent) has 3 choice-icon options. Shared style.css stacks them
     1-per-row on mobile. Operator wants 2 on top + 1 centered below.
     2-column grid; 3rd option spans both columns but capped to 50% width
     and justified center so it sits alone in the middle of row 2. */
  .ai-v1-quiz-frame .ai-options.icon-3 {
    grid-template-columns: 1fr 1fr;
  }
  .ai-v1-quiz-frame .ai-options.icon-3 > :nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    width: 60%;
  }
}

.ai-v1-progress {
  display: flex; flex-direction: column; gap: var(--ai-space-2);
  padding: var(--ai-space-4) var(--ai-space-5) 0;
}
.ai-v1-progress-track {
  height: 6px;
  background: var(--ai-cream-deep);
  border-radius: 999px;
  overflow: hidden;
}
.ai-v1-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ai-gold) 0%, var(--ai-gold-deep) 100%);
  border-radius: 999px;
  transition: width 320ms var(--ai-ease-out);
}
.ai-v1-progress-text {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ai-text-soft);
  text-align: center;
}

/* Legacy mount style for the reveal + pii sections (not inside .ai-v1-quiz-frame) */
.ai-card-mount {
  background: var(--ai-paper);
  border: 1px solid var(--ai-border-soft);
  border-radius: var(--ai-radius-lg);
  padding: var(--ai-space-6) var(--ai-space-5);
  margin-top: var(--ai-space-6);
  box-shadow: var(--ai-shadow-md);
}

/* v2 PII polish: kill the nested white-box-in-white-box pattern. When
   #contact-mount holds the .ai-form, the form already provides the white
   card (bg + border + padding + shadow), so the mount must be transparent
   layout-only. Same pattern Jackson called out on the LP hero last session. */
#contact-mount.ai-card-mount:has(.ai-form) {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}

/* v2 PII polish: when pii-polish.js copies a label into the input's
   placeholder, the label gets this class and disappears. Vertically
   condenses the form. */
.ai-field-label.v2-pii-label-stripped {
  display: none;
}

/* v2 PII polish: unify spacing between every form field. Shared CSS
   gives each .ai-field a 24px margin-bottom (email→phone), but the
   .ai-field-row that wraps first+last adds a 16px grid gap ON TOP of
   the inner fields' 24px margin-bottom — so first→last reads as
   ~40px on mobile vs 24px elsewhere. Move the spacing onto the row
   wrapper and zero the inner fields so every gap reads the same. */
#contact-mount .ai-field-row {
  gap: var(--ai-space-5);
  margin-bottom: var(--ai-space-5);
}
#contact-mount .ai-field-row .ai-field {
  margin-bottom: 0;
}

/* v2 PII polish: OTP disclosure ("We'll text you a 4-digit code...") moves
   from above the phone input to below it. Tighter top margin + reset
   bottom so it sits as a hint line under the field. */
.ai-otp-disclosure.v2-pii-below {
  margin-top: var(--ai-space-2);
  margin-bottom: 0;
}

/* v2 PII polish: when the form header is empty (qualified path, where the
   LP H1 already serves as the header), collapse the <h2> entirely so the
   form box sits flush under the headline. */
.ai-form-header:empty {
  display: none;
  margin: 0;
}

/* v2 PII polish: with the header gone, the shared .ai-form padding-top
   (space-7 = 48px) is dead space. Tighten on V2 so the first inner block
   (bonus widget or first field) sits close to the form's top edge. */
#contact-mount .ai-form {
  padding-top: var(--ai-space-5);
}

/* v2 PII polish: empty quiz-frame leaves a thin white strip (border +
   shadow) between the H1 and the contact form once the survey is
   hidden. survey-engine-v2.js now hides the frame in showContactForm /
   showMatchingLoader; this rule is a belt-and-suspenders so it never
   renders as a visible line even if the JS path is bypassed. */
.ai-v1-quiz-frame[hidden] {
  display: none !important;
}

/* v2 PII polish: hide the right-arrow inside the FREE BONUS CTA — the
   chunky report icon + headline already telegraph the affordance. */
.ai-bonus-arrow {
  display: none;
}

/* v2 PII polish: hide the chevron on "What's in your report?" summary.
   The collapsible still works on tap; chevron felt visually redundant
   alongside the bonus right-arrow (also removed). */
.ai-bonus-explainer > summary::after {
  display: none;
}

/* v2 PII polish: bump the down-chevron on the "More about [advisor]"
   accordion. Shared sets 12px which reads as mini; this brings it to
   22px so it matches the row's visual weight. */
.ai-advisor-profile-more > summary::after {
  font-size: 22px;
}

/* v2 PII polish: remove illustrative client photos on advisor
   testimonials. Quote + name remain — operator wants a cleaner read
   without the placeholder portrait images. */
.ai-advisor-profile-testimonial-avatar {
  display: none;
}
.ai-advisor-profile-testimonial.has-avatar {
  /* Collapse the avatar gap on testimonials originally laid out as
     image + body so the body sits flush left. */
  display: block;
}

/* v2 PII polish: on mobile keep the row layout (avatar LEFT, copy RIGHT)
   but tighten the avatar so the copy column has room for both lines to
   stack cleanly:
     "Congrats! You've been matched with Mark."
     "Tap to meet Mark →"
   White-space:nowrap on the sub keeps "Tap to meet Mark" on its own
   line; the headline naturally wraps above it. */
@media (max-width: 540px) {
  .ai-congrats-card {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: var(--ai-space-3);
  }
  .ai-congrats-avatar {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
  }
  .ai-congrats-copy {
    text-align: left;
    min-width: 0;
  }
  .ai-congrats-headline,
  .ai-congrats-sub {
    display: block;
  }
  .ai-congrats-sub {
    white-space: nowrap;
  }
}

/* v2 PII polish: "Next step" copy injected by pii-polish.js between the
   preassign block and the first form field. Acts as a quiet section
   divider — telegraphs the form below without competing with the H1. */
.ai-v2-next-step {
  margin: var(--ai-space-5) 0 var(--ai-space-4);
  font-size: 0.95rem;
  color: var(--ai-text);
  text-align: center;
  line-height: 1.45;
}
.ai-v2-next-step strong {
  color: var(--ai-navy);
  font-weight: 700;
}

.ai-v1-quiz-card-container { display: block; }

.ai-v1-quiz-card-container h2 {
  font-family: var(--ai-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 5vw, 2rem);
  text-align: center;
  color: var(--ai-navy);
  margin: 0 0 var(--ai-space-4);
  line-height: 1.2;
}

.ai-v1-justification {
  font-size: 0.875rem;
  color: var(--ai-text-muted);
  text-align: center;
  margin: 0 0 var(--ai-space-5);
}

.ai-v1-echo {
  color: var(--ai-gold-deep);
  font-style: italic;
  font-weight: 600;
}

.ai-v1-notice {
  background: #fffaf0;
  border: 1px solid rgba(201, 169, 97, 0.25);
  border-left: 3px solid var(--ai-border);
  border-radius: var(--ai-radius-md);
  padding: var(--ai-space-3) var(--ai-space-4);
  margin-bottom: var(--ai-space-4);
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ai-navy);
  text-align: left;
}

/* Q9 deposit recommendation — gold-accented box above the estimate notice. */
.ai-v1-recommendation {
  background: #fffaf0;
  border: 1px solid rgba(201, 169, 97, 0.45);
  border-left: 3px solid var(--ai-gold);
  border-radius: var(--ai-radius-md);
  padding: var(--ai-space-3) var(--ai-space-4);
  margin-bottom: var(--ai-space-2);
  text-align: left;
}
.ai-v1-recommendation-main {
  margin: 0 0 2px;
  font-size: 0.9rem;
  color: var(--ai-navy);
  line-height: 1.4;
}
.ai-v1-recommendation-main strong {
  color: var(--ai-gold-deep);
  font-weight: 700;
}
.ai-v1-recommendation-note {
  font-size: 0.78rem;
  color: var(--ai-text-muted);
  font-weight: 500;
}
.ai-v1-recommendation-sub {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ai-text-muted);
  font-style: italic;
}

/* ---- Inputs + CTAs ------------------------------------------------- */

.ai-v1-input-row { margin: var(--ai-space-3) 0 var(--ai-space-4); }

.ai-v1-currency-input,
.ai-v1-select,
.ai-v1-form input,
.ai-v1-form select {
  width: 100%;
  padding: var(--ai-space-3) var(--ai-space-4);
  font-family: var(--ai-font-body);
  font-size: 1rem;
  color: var(--ai-text);
  background: var(--ai-paper);
  border: 1px solid var(--ai-border);
  border-radius: var(--ai-radius-md);
  outline: none;
  box-sizing: border-box;
}
.ai-v1-currency-input:focus,
.ai-v1-select:focus,
.ai-v1-form input:focus,
.ai-v1-form select:focus { border-color: var(--ai-gold); box-shadow: 0 0 0 3px var(--ai-gold-soft); }

.ai-v1-cta {
  width: 100%;
  padding: var(--ai-space-4);
  background: var(--ai-navy);
  color: var(--ai-text-on-navy);
  font-family: var(--ai-font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: none;
  border-radius: var(--ai-radius-md);
  cursor: pointer;
  transition: background-color 150ms var(--ai-ease-out);
}
.ai-v1-cta:hover { background: var(--ai-navy-soft); }
.ai-v1-cta:focus-visible { outline: 2px solid var(--ai-gold); outline-offset: 2px; }

.ai-v1-back {
  display: block;
  text-align: center;
  margin-top: var(--ai-space-4);
  color: var(--ai-text-soft);
  text-decoration: none;
  font-size: 0.875rem;
}
.ai-v1-back:hover { color: var(--ai-navy); }

/* ---- Icon-card grid ------------------------------------------------- */

.ai-v1-quiz-cards {
  display: grid;
  grid-template-columns: 1fr;       /* text-list 'choice' default — vertical stack */
  gap: var(--ai-space-3);
  margin-top: var(--ai-space-5);
}

/* Icon-card grid layouts hold at every viewport per RW organic mobile spec —
   keep questions in-fold rather than stacking vertically. */
.ai-v1-quiz-cards.two-col   { grid-template-columns: 1fr 1fr; }
.ai-v1-quiz-cards.grid-2x2  { grid-template-columns: 1fr 1fr; }

/* 3-option icon grid: 2 on top + 1 centered below at half-width.
   Matches RW organic Q5 layout on both mobile and desktop. */
.ai-v1-quiz-cards.three-col           { grid-template-columns: 1fr 1fr; }
.ai-v1-quiz-cards.three-col > :nth-child(3) {
  grid-column: 1 / -1;
  width: calc(50% - var(--ai-space-3) / 2);
  margin: 0 auto;
}

/* Mobile: shrink the 2x2 (Q5 fear) and 2+1 (Q6 intent) card text + icon so
   labels wrap to 2 lines max even with long copy. */
@media (max-width: 540px) {
  .ai-v1-quiz-cards.grid-2x2 .ai-v1-quiz-card,
  .ai-v1-quiz-cards.three-col .ai-v1-quiz-card {
    padding: var(--ai-space-3);
    font-size: 0.82rem;
    line-height: 1.25;
  }
  .ai-v1-quiz-cards.grid-2x2 .ai-v1-quiz-card .icon,
  .ai-v1-quiz-cards.three-col .ai-v1-quiz-card .icon {
    width: 36px; height: 36px;
    margin-bottom: var(--ai-space-1);
  }
}

.ai-v1-quiz-card {
  background: var(--ai-paper);
  border: 1px solid var(--ai-border);
  border-radius: var(--ai-radius-md);
  padding: var(--ai-space-4);
  cursor: pointer;
  font-family: var(--ai-font-body);
  font-size: 1rem;
  color: var(--ai-text);
  text-align: center;
  min-height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: border-color 120ms var(--ai-ease-out), background-color 120ms var(--ai-ease-out);
}
.ai-v1-quiz-card:hover { border-color: var(--ai-gold); background: var(--ai-cream); }
.ai-v1-quiz-card.selected {
  border-color: var(--ai-gold);
  background: var(--ai-cream-deep);
}
.ai-v1-quiz-card .icon {
  display: block; width: 48px; height: 48px;
  margin: 0 auto var(--ai-space-2);
  color: var(--ai-gold-deep);
}
.ai-v1-quiz-card .icon svg {
  width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.75;
}
/* Shapes stay outlined; text + explicitly-filled marks keep their fill */
.ai-v1-quiz-card .icon svg path,
.ai-v1-quiz-card .icon svg rect,
.ai-v1-quiz-card .icon svg ellipse,
.ai-v1-quiz-card .icon svg polyline,
.ai-v1-quiz-card .icon svg line,
.ai-v1-quiz-card .icon svg circle:not([fill="currentColor"]) {
  fill: none;
}
.ai-v1-quiz-card .icon svg text {
  fill: currentColor;
  stroke: none;
  font-family: var(--ai-font-body);
}

/* ---- Hero italic accent + value-pill subhead ---------------------- */

/* Eyebrow label above the H1 — gives the hero some breathing room
   at the top without making the headline itself larger. */
.ai-hero-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ai-gold-deep);
  text-align: center;
  margin: 0 0 var(--ai-space-3);
}

/* Trim H1 a touch from the previous v1 bump so the hero feels more balanced. */
.ai-hero .ai-h1 {
  font-size: clamp(2.2rem, 5vw, 3rem);
  line-height: 1.1;
}

/* Inline italic gold accent (NOT display:block like .ai-h1-accent) */
.ai-h1-italic {
  font-style: italic;
  font-weight: 600;
  color: var(--ai-gold-deep);
}

/* v2 subheader between H1 and the quiz card. Quiet supportive line that
   tells the visitor what to do (answer 8 questions) and what they get
   (matched specialist + plan). Mobile gets a slightly smaller font. */
.ai-v2-subheader {
  margin: var(--ai-space-3) auto var(--ai-space-5);
  max-width: 56ch;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ai-text-muted, #475569);
}
@media (max-width: 540px) {
  .ai-v2-subheader {
    /* B is ~169 chars vs prior ~142, so without a font shrink it would
       wrap to 4 lines on mobile. Drop to 0.88rem so 3 lines still fit.
       Letter-spacing slightly tighter to claw back a couple more chars/line. */
    font-size: 0.88rem;
    letter-spacing: -0.005em;
    margin: var(--ai-space-3) auto var(--ai-space-4);
  }
}

/* Push the footer below the initial fold so visitors focus on Q1 before
   they see the navy disclaimer band. min-height:100vh on the hero
   guarantees the survey card occupies the viewport regardless of screen
   size; footer follows naturally below. */
.ai-hero {
  min-height: 100vh;
}

/* v2 disclaimer matches the copyright meta size. Shared style.css gives
   the disclaimer 0.85rem; operator wants it at 0.8rem so it sits visually
   equal to the meta line below. Opacity dropped from 0.85 → 0.6 so the
   navy disclaimer reads softer (less harsh against the dark footer). */
.ai-footer-disclaimer {
  font-size: 0.8rem;
  opacity: 0.6;
}

/* v2 footer padding tighter. Shared style.css uses --ai-space-7 vertical
   on the navy box; operator wants it less cramped. */
.ai-footer {
  padding: var(--ai-space-4) var(--ai-space-5);
}

/* v2 semi-translucent divider between the security pill and the carrier
   strip. Spans nearly the full hero width. Tight above (sits closer to the
   encryption pill), slightly looser below (breathing room before the label). */
.ai-v2-carrier-divider {
  border: 0;
  border-top: 1px solid var(--ai-border-soft, rgba(15, 29, 58, 0.12));
  opacity: 0.6;
  margin: var(--ai-space-4) auto var(--ai-space-5);
  max-width: 100%;
}

/* Carrier logos: small + very translucent. Quiet trust signal. No
   hover color reveal so logos never look dark/contrasty. */
.ai-v1-carrier-logo {
  height: 20px;
}
.ai-v1-carrier-logo img {
  max-width: 56px;
  opacity: 0.3;
  filter: grayscale(100%);
}
.ai-v1-carrier-logo:hover img {
  opacity: 0.3;
  filter: grayscale(100%);
}
.ai-v1-carriers-label {
  opacity: 0.55;
}

/* Strip bottom padding (push the navy disclaimer below the fold while
   the user is on the survey card). Divider top/bottom now lives on the
   divider rule above. */
.ai-v1-carriers-strip {
  margin-bottom: var(--ai-space-8, 4rem);
  row-gap: var(--ai-space-5);
}

/* Mobile: shrink the carrier label so 'Our specialists work with top-rated
   carriers' fits on one line at iPhone-SE-class widths. Default uppercase
   + 0.1em letter-spacing pushes wrap; trim both at narrow screens. */
@media (max-width: 540px) {
  .ai-v1-carriers-label {
    font-size: 0.42rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .ai-v1-carrier-logo {
    height: 14px;
  }
  .ai-v1-carrier-logo img {
    max-width: 40px;
  }
}

/* .ai-v2-qualify-line: v2 qualification line. Replaces v1's 3-pill value strip. */
.ai-v2-qualify-line {
  margin: 1rem auto 1.25rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ai-navy, #0f1d3a);
  max-width: 38ch;
}

@media (max-width: 480px) {
  .ai-v2-qualify-line {
    font-size: 0.78rem;
    letter-spacing: 0;
    max-width: none;
    margin: 0.5rem auto 0.75rem;
  }
}

/* v2 mobile hero. H1 sized up: 3-line wrap is acceptable on phones,
   so keep typography weight. Qualify line tightened separately above.
   Eyebrow letter-spacing reduced so its single line fits. */
@media (max-width: 540px) {
  .ai-hero .ai-h1 {
    font-size: clamp(2.3rem, 8vw, 2.7rem);
    line-height: 1.2;
    margin: 0.5rem 0 0.5rem;
  }
  .ai-hero-eyebrow {
    letter-spacing: 0.1em;
    margin-bottom: 0.4rem;
  }
}

/* Value-tag pill — soft cream-deep capsule with 3 navy items + gold checks.
   Sits centered under the H1, above the quiz frame. */
.ai-v1-value-pill {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ai-space-3);
  width: max-content;
  max-width: 100%;
  margin: var(--ai-space-4) auto var(--ai-space-5);
  padding: var(--ai-space-3) var(--ai-space-5);
  background: var(--ai-cream-deep);
  border: 1px solid rgba(201, 169, 97, 0.25);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ai-navy);
}
.ai-v1-value-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  white-space: nowrap;
}
.ai-v1-value-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ai-gold);
  color: var(--ai-paper);
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.ai-v1-value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ai-gold-deep);
  flex-shrink: 0;
}
.ai-v1-value-icon svg { width: 16px; height: 16px; }
.ai-v1-value-divider {
  width: 1px;
  height: 14px;
  background: rgba(201, 169, 97, 0.35);
  flex-shrink: 0;
}
/* Mobile: hide the middle 'Tailored to you' item + the divider after it.
   Keeps the first divider visible so it sits between the two remaining
   items: '100% FREE | TAKES 90 SECONDS'. */
@media (max-width: 540px) {
  .ai-v1-value-pill {
    gap: var(--ai-space-2);
    padding: var(--ai-space-2) var(--ai-space-3);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
  }
  .ai-v1-value-item:nth-child(3) { display: none; }
  .ai-v1-value-divider:nth-child(4) { display: none; }
}


/* Pull the trust row + privacy + security pill + advisor strip tight to
   the quiz — these are reassurance, not breathing room. */
.ai-hero .ai-cta-privacy {
  margin-top: var(--ai-space-3);
  font-size: 0.95rem;
  line-height: 1.5;
}
.ai-hero .ai-trust-row {
  margin-top: var(--ai-space-4);
  margin-bottom: var(--ai-space-5);
  gap: var(--ai-space-3) var(--ai-space-4);
}
.ai-hero .ai-trust-row li { font-size: 0.95rem; }

/* ---- Pre-assigned advisor caption strip ---------------------------- */

.ai-v1-advisor-strip {
  margin-top: var(--ai-space-3);
  display: flex; align-items: center; justify-content: center;
  gap: var(--ai-space-3);
  font-size: 0.875rem;
  color: var(--ai-text-muted);
  min-height: 28px;
}
.ai-v1-advisor-strip img {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--ai-gold);
}

/* ---- Below-fold modules (How It Works + Trust Block) --------------- */

.ai-v1-below-fold {
  /* Mirror .ai-hero exactly so the inner column sits in the same horizontal
     position as the hero above. Tight vertical padding so the carriers strip
     reads as a thin trust strip not a giant section. */
  display: flex;
  justify-content: center;
  background: var(--ai-cream-deep);
  padding: var(--ai-space-5) var(--ai-space-5);
  border-top: 1px solid var(--ai-border-soft);
}
.ai-v1-below-fold > .ai-hero-inner {
  display: grid;
  gap: var(--ai-space-2);
}

.ai-v1-below-fold h2 {
  font-family: var(--ai-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--ai-navy);
  text-align: center;
  margin: 0 0 var(--ai-space-5);
}

.ai-v1-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--ai-space-3);
}
.ai-v1-steps li {
  display: flex; align-items: center; justify-content: center;
  gap: var(--ai-space-3);
  padding: var(--ai-space-4) var(--ai-space-5);
  background: var(--ai-paper);
  border: 1px solid var(--ai-border-soft);
  border-radius: var(--ai-radius-md);
  color: var(--ai-text);
  text-align: left;
}
.ai-v1-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--ai-navy); color: var(--ai-text-on-navy);
  border-radius: 50%; font-weight: 700; flex-shrink: 0;
}

.ai-v1-lock {
  display: inline-flex;
  align-items: center;
  color: var(--ai-gold-deep);
  flex-shrink: 0;
}
.ai-v1-lock svg { width: 28px; height: 28px; }
.ai-v1-security-pill svg { display: block; }
.ai-v1-security-text { line-height: 1.45; }

.ai-v1-team-stats {
  font-size: 0.95rem;
  color: var(--ai-text-muted);
  text-align: center;
  padding-bottom: var(--ai-space-4);
  border-bottom: 1px solid var(--ai-border-soft);
  margin: 0 0 var(--ai-space-4);
}
.ai-v1-trust-bullets { list-style: none; padding: 0; margin: 0; }
.ai-v1-trust-bullets li {
  padding: var(--ai-space-2) 0 var(--ai-space-2) var(--ai-space-5);
  position: relative;
  color: var(--ai-text);
}
.ai-v1-trust-bullets li::before {
  content: "\2713";
  color: var(--ai-gold-deep);
  position: absolute; left: 0; font-weight: 700;
}

/* ---- Inline security pill (above-fold, under quiz) ---------------- */

.ai-v1-security-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ai-space-2);
  font-size: 0.85rem;
  color: var(--ai-text-muted);
  background: var(--ai-cream);
  border: 1px solid var(--ai-border-soft);
  border-radius: var(--ai-radius-md);
  padding: var(--ai-space-2) var(--ai-space-3);
  margin: -20px auto 0;
  text-align: left;
}
@media (max-width: 540px) {
  .ai-v1-security-pill { font-size: 0.78rem; padding: var(--ai-space-2); }
  .ai-v1-lock svg { width: 22px; height: 22px; }
}

/* ---- Carrier logos strip (below-fold) ----------------------------- */

.ai-v1-carriers-label {
  font-size: 0.72rem;
  color: var(--ai-text-muted);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 var(--ai-space-5);
}
/* 6-column equal-width grid — every logo cell renders at the same dimensions
   regardless of source PNG aspect, so the strip stays visually uniform. */
.ai-v1-carriers-strip {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 980px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--ai-space-4) var(--ai-space-5);
  align-items: center;
  justify-items: center;
}
@media (max-width: 720px) {
  .ai-v1-carriers-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 380px) {
  .ai-v1-carriers-strip { grid-template-columns: repeat(2, 1fr); }
}
.ai-v1-carrier-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  font-family: var(--ai-font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ai-text-muted);
  letter-spacing: 0.02em;
  transition: opacity 150ms var(--ai-ease-out);
}
.ai-v1-carrier-logo img {
  display: block;
  width: 100%;
  max-width: 120px;
  height: 100%;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: opacity 150ms var(--ai-ease-out), filter 150ms var(--ai-ease-out);
}
.ai-v1-carrier-logo:hover img { opacity: 1; filter: grayscale(0%); }

/* ---- Old footer carriers line (kept harmless — no longer in HTML) - */

.ai-v1-carriers {
  font-size: 0.875rem;
  color: var(--ai-text-on-navy);
  opacity: 0.9;
  text-align: center;
  margin: 0 0 var(--ai-space-4);
  word-wrap: break-word;
}

/* ---- Engagement gate (applied via JS on Q1 answer) -----------------
   Once the user starts the quiz we collapse the page to the focused
   funnel: progress bar + question card + advisor strip + privacy footer.
   Everything else (hero copy, trust row, below-fold modules, carrier
   strip) disappears so the only thing on the page is the quiz they're
   actively working through. */

/* Engagement gate (.ai-v1-engagement-gated) no longer hides anything during the
   survey — full LP stays visible while user answers questions. Class still applied
   for any future state styling. */

/* ---- PII page state — applied when user reaches a PII step ---------- */

/* 'Final Step' label only visible during PII (replaces H1 + value pill). */
.ai-v1-final-step-label { display: none; }
body.ai-v1-in-pii .ai-v1-final-step-label {
  display: block;
  font-family: var(--ai-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--ai-navy);
  text-align: center;
  margin: 0 0 var(--ai-space-3);
  letter-spacing: 0.02em;
}

/* Hide LP chrome during PII (H1, value pill, privacy line, carriers strip,
   footer). Advisor strip stays (it's the small caption above the survey card). */
body.ai-v1-in-pii .ai-hero-eyebrow,
body.ai-v1-in-pii .ai-h1,
body.ai-v1-in-pii [data-section="value-pill"],
body.ai-v1-in-pii [data-section="security-pill"],
body.ai-v1-in-pii [data-section="below-fold"],
body.ai-v1-in-pii .ai-footer {
  display: none;
}

/* V2 wants the footer visible on the PII screen too (the disclaimer +
   Privacy/Terms links match the booking + post-booking pages for a
   consistent end-of-page across the entire funnel). This file only loads
   on V2 LP, so re-asserting display on body.ai-v1-in-pii .ai-footer is
   V2-scoped by virtue of the file scope (V0/V1 don't load this CSS). */
body.ai-v1-in-pii .ai-footer {
  display: block;
}

/* Hide advisor profile globally on V1. The class rule sets display:flex
   which beats the UA [hidden]:display:none, so we force [hidden] to win
   here. (Previous PII-mode reveal was removed — step 2 is now annuity-
   focused, not advisor-focused, so the profile never surfaces on the LP.) */
.ai-v1-advisor-profile[hidden] { display: none; }

/* ---- Reveal page (hypothetical illustration) ----------------------- */

.ai-v1-reveal {
  display: block;
}
.ai-v1-reveal-banner {
  display: inline-block;
  font-family: var(--ai-font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ai-gold-deep);
  background: var(--ai-cream-deep);
  border: 1px solid var(--ai-gold-soft);
  border-radius: var(--ai-radius-sm);
  padding: var(--ai-space-2) var(--ai-space-3);
  margin-bottom: var(--ai-space-4);
}
.ai-v1-brackets { margin: var(--ai-space-5) 0; }
.ai-v1-brackets p {
  font-size: 1.1rem;
  color: var(--ai-text);
  margin: var(--ai-space-3) 0;
  line-height: 1.4;
}
.ai-illustration-bracket {
  font-family: var(--ai-font-display);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 700;
  color: var(--ai-navy);
  transition: filter 350ms var(--ai-ease-out), opacity 350ms var(--ai-ease-out);
  display: inline-block;
  padding: 0 var(--ai-space-2);
}
.ai-illustration-bracket.blurred {
  filter: blur(8px);
  opacity: 0.85;
  user-select: none;
  color: var(--ai-gold-deep);
}
.ai-v1-context-line {
  font-size: 0.95rem;
  color: var(--ai-text-muted);
  font-style: italic;
  margin: var(--ai-space-4) 0 var(--ai-space-5);
}

.ai-v1-advisor-card {
  background: var(--ai-cream);
  border: 1px solid var(--ai-border);
  border-radius: var(--ai-radius-md);
  padding: var(--ai-space-4);
  margin: var(--ai-space-5) 0;
  display: flex; align-items: center; gap: var(--ai-space-4);
}
.ai-v1-advisor-card img {
  width: 60px; height: 60px; border-radius: 50%;
  border: 2px solid var(--ai-gold); flex-shrink: 0;
}
.ai-v1-advisor-card p { margin: 0; color: var(--ai-text); }
.ai-v1-advisor-card strong { color: var(--ai-navy); }

/* ---- PII forms (Gate 1 + Gate 2 + Single) -------------------------- */

.ai-v1-form { display: block; margin-top: var(--ai-space-4); }
.ai-v1-form h3 {
  font-family: var(--ai-font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ai-navy);
  margin: 0 0 var(--ai-space-3);
}
.ai-v1-form p { color: var(--ai-text-muted); margin: 0 0 var(--ai-space-4); }
/* Single-input rows span full width; rows with 2+ inputs split 50/50.
   :has() avoids the squashed-left look for solo email + phone fields. */
.ai-v1-form-row {
  display: grid; grid-template-columns: 1fr; gap: var(--ai-space-3);
  margin-bottom: var(--ai-space-3);
}
@media (min-width: 480px) {
  .ai-v1-form-row:has(> input + input) { grid-template-columns: 1fr 1fr; }
}
/* Center placeholder + typed text in single-input rows (email, phone). */
.ai-v1-form-row:not(:has(> input + input)) > input { text-align: center; }

/* Inline input + button row (phone with Send Code; OTP with Verify) */
.ai-v1-input-with-button {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--ai-space-2);
  margin-bottom: var(--ai-space-3);
  align-items: stretch;
}
.ai-v1-input-with-button > input { text-align: center; }
.ai-v1-inline-btn {
  padding: 0 var(--ai-space-4);
  background: var(--ai-cream-deep);
  color: var(--ai-navy);
  font-family: var(--ai-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid var(--ai-gold);
  border-radius: var(--ai-radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 150ms var(--ai-ease-out);
}
.ai-v1-inline-btn:hover { background: var(--ai-gold); color: var(--ai-paper); }
.ai-v1-inline-btn-primary {
  background: var(--ai-navy);
  color: var(--ai-text-on-navy);
  border-color: var(--ai-navy);
}
.ai-v1-inline-btn-primary:hover { background: var(--ai-gold); color: var(--ai-paper); border-color: var(--ai-gold); }

/* Currency input error state — red border + red message below */
.ai-v1-currency-input.has-error {
  border-color: #d04141;
  box-shadow: 0 0 0 3px rgba(208, 65, 65, 0.15);
}
.ai-v1-input-error {
  color: #b73030;
  font-size: 0.85rem;
  font-weight: 500;
  margin: calc(-1 * var(--ai-space-2)) 0 var(--ai-space-3);
  padding-left: var(--ai-space-2);
}

/* ---- Reveal disclaimer (legal copy under brackets) ---------------- */

.ai-v1-disclaimer {
  font-size: 0.75rem;
  color: var(--ai-text-soft);
  line-height: 1.5;
  margin-top: var(--ai-space-6);
  padding-top: var(--ai-space-4);
  border-top: 1px solid var(--ai-border-soft);
}
.ai-v1-disclaimer p { margin: 0 0 var(--ai-space-2); }

/* ---- PII Variant A (two-step) ------------------------------------- */

.ai-v1-pii-step {
  position: relative;
  max-width: 540px;
  margin: var(--ai-space-2) auto 0;
  padding: 0 var(--ai-space-4);
  text-align: center;
}
.ai-v1-pii-headline {
  font-family: var(--ai-font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--ai-navy);
  margin: 0 0 var(--ai-space-3);
}
/* Center first/last name placeholders (same treatment as email/phone). */
#ai-v1-pii-pt1 .ai-v1-form-row > input { text-align: center; }
#ai-v1-pii-single-form .ai-v1-form-row > input { text-align: center; }
@media (min-width: 600px) {
  .ai-v1-pii-headline { font-size: 2rem; }
}
.ai-v1-pii-sub {
  color: var(--ai-text-muted);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 var(--ai-space-5);
}

/* Advisor-match badge — Pt 2 top, mirrors the booking-page advisor card */
.ai-v1-advisor-badge {
  display: flex;
  align-items: center;
  gap: var(--ai-space-4);
  background: var(--ai-cream-deep);
  border: 1px solid var(--ai-gold);
  border-radius: var(--ai-radius-md);
  padding: var(--ai-space-4);
  margin: 0 0 var(--ai-space-5);
  text-align: left;
}
.ai-v1-advisor-badge-photo,
.ai-v1-advisor-badge-photo-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--ai-gold);
  flex-shrink: 0;
  object-fit: cover;
}
.ai-v1-advisor-badge-photo-placeholder {
  background: var(--ai-paper);
}
.ai-v1-advisor-badge-info { flex: 1; min-width: 0; }
.ai-v1-advisor-badge-label {
  font-size: 0.85rem;
  color: var(--ai-text-muted);
  margin-bottom: 2px;
}
.ai-v1-advisor-badge-check {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
  background: var(--ai-gold);
  color: var(--ai-paper);
  font-size: 0.7rem;
  margin-right: 4px;
  vertical-align: text-bottom;
}
.ai-v1-advisor-badge-name {
  font-family: var(--ai-font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ai-navy);
  line-height: 1.2;
}
.ai-v1-advisor-badge-state {
  font-size: 0.85rem;
  color: var(--ai-text-muted);
  font-style: italic;
  margin-top: 2px;
}

/* ---- PII pt 1: 3-bullet recap (RW-inspired) ----------------------- */

.ai-v1-pii-recap {
  list-style: none;
  padding: var(--ai-space-4);
  margin: 0 0 var(--ai-space-5);
  background: var(--ai-cream-deep);
  border: 1px solid rgba(201, 169, 97, 0.25);
  border-radius: var(--ai-radius-md);
  text-align: left;
}
.ai-v1-pii-recap li {
  display: flex;
  align-items: flex-start;
  gap: var(--ai-space-3);
  padding: var(--ai-space-2) 0;
  font-size: 0.95rem;
  color: var(--ai-text);
  line-height: 1.45;
}
.ai-v1-pii-recap-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ai-gold);
  color: var(--ai-paper);
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ---- PII pt 2: advisor match rationale ---------------------------- */

.ai-v1-advisor-rationale {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ai-text);
  background: var(--ai-cream);
  border-left: 3px solid var(--ai-gold);
  padding: var(--ai-space-3) var(--ai-space-4);
  margin: 0 0 var(--ai-space-5);
  text-align: left;
  border-radius: 0 var(--ai-radius-sm) var(--ai-radius-sm) 0;
}
.ai-v1-advisor-rationale strong { color: var(--ai-navy); font-weight: 600; }

/* ---- Variant B: product banner + booking-page-congruent card ------ */

.ai-v1-product-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0 0 var(--ai-space-3);
}
.ai-v1-product-banner-label {
  font-size: 0.75rem;
  color: var(--ai-text-muted);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ai-v1-product-banner-name {
  font-family: var(--ai-font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ai-gold-deep);
}

/* Navy "you may qualify for" card — congruent with booking-page reveal */
.ai-v1-estimate-card {
  position: relative;
  background: var(--ai-navy);
  color: var(--ai-text-on-navy);
  border-radius: var(--ai-radius-md);
  padding: var(--ai-space-5) var(--ai-space-4);
  margin: 0 0 var(--ai-space-5);
  text-align: center;
  overflow: hidden;
}
.ai-v1-estimate-card-label {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ai-gold);
  font-weight: 700;
  margin-bottom: var(--ai-space-3);
}
.ai-v1-estimate-numbers {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--ai-space-2);
  margin-bottom: 0;
}
.ai-v1-estimate-range {
  font-family: var(--ai-font-display);
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--ai-paper);
  line-height: 1;
  white-space: nowrap;
}
.ai-v1-estimate-permo {
  font-family: var(--ai-font-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--ai-paper);
  line-height: 1;
  opacity: 0.85;
}

/* Per-section blur — applied to the inner number/tagline/yearly rows so
   the gold label + card chrome stay sharp while the values stay locked. */
.ai-v1-estimate-card .blurred {
  filter: blur(10px);
  user-select: none;
  transition: filter 600ms var(--ai-ease-out);
}

.ai-v1-estimate-lock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(201, 169, 97, 0.95);
  color: var(--ai-navy);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.ai-v1-estimate-lock svg { width: 22px; height: 22px; }

@media (max-width: 480px) {
  .ai-v1-estimate-range { font-size: 1.9rem; }
  .ai-v1-estimate-permo { font-size: 1.25rem; }
}

/* ---- PII pt 1: sub-headline under the income headline -------------- */
.ai-v1-pii-sub-headline {
  font-size: 0.95rem;
  color: var(--ai-text-muted);
  text-align: center;
  margin: calc(var(--ai-space-2) * -1) 0 var(--ai-space-3);
  line-height: 1.4;
}

/* ---- PII pt 1: 'Where should we send your free estimate?' subhead --- */
.ai-v1-pii-where {
  font-family: var(--ai-font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--ai-navy);
  text-align: center;
  margin: var(--ai-space-3) 0 var(--ai-space-3);
  line-height: 1.3;
}

/* ---- Animated bonus box (Andy's pattern, ported from main funnel) - */
.ai-bonus-box {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  margin: 0 0 var(--ai-space-4);
  border-radius: 12px;
  background: linear-gradient(135deg, #fffaf0 0%, #fff5e0 100%);
  border: 2px solid var(--ai-gold);
  box-shadow:
    0 0 0 0 rgba(201, 169, 97, 0.55),
    0 4px 14px rgba(201, 169, 97, 0.18);
  animation: ai-bonus-pulse 2.6s ease-in-out 0.2s infinite;
}
/* V2 inherits the shared .ai-bonus-cta layout (display:flex, gap:14px,
   align-items:center) so the report icon sits LEFT of the body text
   instead of stacking ABOVE it. The previous V2 override (display:block)
   pushed the body below the fold on smaller screens. */
.ai-bonus-cta {
  width: 100%;
  padding: 4px 2px;
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
}
.ai-bonus-label,
.ai-bonus-headline,
.ai-bonus-sub { display: block; }
.ai-bonus-label {
  /* "+ A Free Bonus" is mixed-case — drop the uppercase transform so the
     friendly casing reads as intended, slightly tighter letter-spacing
     since lowercase letters don't need wide tracking like all-caps does. */
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ai-gold-deep);
  text-transform: none;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ai-bonus-headline {
  font-family: var(--ai-font-display);
  font-weight: 700;
  /* "Your Annuity Suitability Report" needs to stay on one line; nowrap
     enforces it and the slightly smaller font keeps it inside the bonus
     box width on mobile. */
  font-size: 0.95rem;
  color: var(--ai-navy);
  line-height: 1.25;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Trim the report icon ~14% (42×52 → 36×44) so the headline has more
   horizontal room. Sized to keep the icon recognizable while not eating
   width the title needs. */
.ai-bonus-report-icon {
  width: 36px;
  height: 44px;
}
.ai-bonus-sub {
  font-size: 0.82rem;
  color: var(--ai-text-muted);
  line-height: 1.4;
}
.ai-bonus-icon {
  display: inline-block;
  font-size: 1.05rem;
  line-height: 1;
  animation: ai-bonus-bob 2s ease-in-out infinite;
  transform-origin: center bottom;
}
.ai-bonus-explainer {
  border-top: 1px dashed rgba(201, 169, 97, 0.45);
  padding-top: 8px;
  margin-top: 2px;
  text-align: left;
}
.ai-bonus-explainer > summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ai-navy);
  padding: 4px 2px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  text-align: left;
}
.ai-bonus-explainer > summary::-webkit-details-marker { display: none; }
.ai-bonus-explainer > summary::after {
  content: "\2193";
  display: inline-block;
  color: var(--ai-gold-deep);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1;
  transition: transform 0.18s ease;
  margin-left: auto;
}
.ai-bonus-explainer[open] > summary::after { transform: rotate(180deg); }
.ai-bonus-explainer-list {
  list-style: none;
  padding: 8px 6px 4px;
  margin: 0;
  font-size: 0.82rem;
  color: var(--ai-navy);
  line-height: 1.5;
  text-align: left;
}
.ai-bonus-explainer-list li {
  padding: 4px 0 4px 18px;
  position: relative;
  text-align: left;
}
.ai-bonus-explainer-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--ai-gold-deep);
  font-weight: 700;
}
.ai-bonus-shimmer {
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  pointer-events: none;
  animation: ai-bonus-shimmer-sweep 3.8s ease-in-out 0.6s infinite;
}
@keyframes ai-bonus-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 0 0 rgba(201, 169, 97, 0.55),
      0 4px 14px rgba(201, 169, 97, 0.18);
  }
  50% {
    transform: scale(1.015);
    box-shadow:
      0 0 0 8px rgba(201, 169, 97, 0),
      0 6px 20px rgba(201, 169, 97, 0.30);
  }
}
@keyframes ai-bonus-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes ai-bonus-shimmer-sweep {
  0%   { left: -120%; }
  60%  { left: 140%; }
  100% { left: 140%; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-bonus-box { animation: none; }
  .ai-bonus-icon { animation: none; }
  .ai-bonus-shimmer { display: none; }
}

/* ---- Matchmaker loader (survey -> PII transition, 2.5s) ----------- */
.ai-matchmaker {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ai-space-7) var(--ai-space-5);
  background:
    radial-gradient(ellipse at top, rgba(201, 169, 97, 0.08) 0%, transparent 60%),
    var(--ai-cream);
  border-radius: var(--ai-radius-md);
}
.ai-matchmaker-inner {
  max-width: 540px;
  text-align: center;
  width: 100%;
}
.ai-matchmaker-spinner {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto var(--ai-space-5);
}
.ai-matchmaker-spinner::before,
.ai-matchmaker-spinner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
}
.ai-matchmaker-spinner::before {
  border-top-color: var(--ai-gold);
  border-right-color: var(--ai-gold);
  animation: aiMatchmakerSpin 1.4s linear infinite;
}
.ai-matchmaker-spinner::after {
  inset: 12px;
  border: 2px solid transparent;
  border-bottom-color: var(--ai-navy);
  border-left-color: var(--ai-navy);
  animation: aiMatchmakerSpin 1.8s linear infinite reverse;
}
@keyframes aiMatchmakerSpin { to { transform: rotate(360deg); } }
.ai-matchmaker-h {
  font-family: var(--ai-font-display);
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  color: var(--ai-navy);
  margin: 0 0 var(--ai-space-3) 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.ai-matchmaker-status {
  font-size: 1rem;
  color: var(--ai-text-muted);
  margin: 0 0 var(--ai-space-5) 0;
  min-height: 26px;
  transition: opacity 300ms var(--ai-ease-out);
}
.ai-matchmaker-steps {
  display: flex;
  flex-direction: column;
  gap: var(--ai-space-2);
  max-width: 360px;
  margin: 0 auto;
  text-align: left;
}
.ai-matchmaker-step {
  display: flex;
  align-items: center;
  gap: var(--ai-space-3);
  padding: var(--ai-space-2) var(--ai-space-4);
  background: var(--ai-paper);
  border: 1px solid var(--ai-border-soft);
  border-radius: var(--ai-radius-md);
  box-shadow: 0 1px 2px rgba(10, 31, 58, 0.06);
  opacity: 0.4;
  transition: all 350ms var(--ai-ease-out);
}
.ai-matchmaker-step.active { opacity: 1; border-color: var(--ai-gold); }
.ai-matchmaker-step.done {
  opacity: 1;
  border-color: #15803d;
  background: rgba(21, 128, 61, 0.04);
}
.ai-matchmaker-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ai-cream-deep);
  color: var(--ai-text-soft);
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.ai-matchmaker-step.active .ai-matchmaker-step-icon {
  background: var(--ai-gold);
  color: var(--ai-navy);
}
.ai-matchmaker-step.done .ai-matchmaker-step-icon {
  background: #15803d;
  color: var(--ai-cream);
}
.ai-matchmaker-step-label {
  font-size: 0.92rem;
  color: var(--ai-navy);
  font-weight: 500;
}
@media (prefers-reduced-motion: reduce) {
  .ai-matchmaker-spinner::before,
  .ai-matchmaker-spinner::after { animation: none; }
  .ai-matchmaker-step { transition: none; }
}

/* ---- PII step 2: white blurred-estimate card ---------------------- */
.ai-v1-est2-headline {
  font-family: var(--ai-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  color: var(--ai-navy);
  text-align: center;
  margin: 0 0 var(--ai-space-2);
  line-height: 1.2;
}
.ai-v1-est2-matched {
  text-align: center;
  margin: 0 0 var(--ai-space-4);
  line-height: 1.4;
}
.ai-v1-est2-matched-label {
  display: block;
  font-size: 0.95rem;
  color: var(--ai-text-muted);
  margin-bottom: 4px;
}
.ai-v1-est2-matched-product {
  display: block;
  font-family: var(--ai-font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ai-gold-deep);
  letter-spacing: -0.01em;
}
.ai-v1-est2-matched-rider {
  display: block;
  font-size: 0.78rem;
  color: var(--ai-text);
  margin-top: 4px;
  line-height: 1.3;
}
.ai-v1-est2-card {
  position: relative;
  background: var(--ai-paper);
  border: 1px solid rgba(201, 169, 97, 0.35);
  border-radius: var(--ai-radius-md);
  padding: var(--ai-space-5) var(--ai-space-4);
  margin: 0 0 var(--ai-space-5);
  text-align: center;
  box-shadow:
    0 1px 2px rgba(10, 31, 58, 0.04),
    0 8px 24px rgba(10, 31, 58, 0.10);
  overflow: hidden;
}
.ai-v1-est2-card-label {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ai-navy);
  font-weight: 700;
  margin-bottom: var(--ai-space-3);
  white-space: nowrap;
}
.ai-v1-est2-numbers {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--ai-space-2);
}
/* Soft gold radial glow behind the blurred range — pulses to signal
   value. Lives behind the text on its own z-index so the blur filter
   on the range doesn't compound the glow. */
.ai-v1-est2-numbers::before {
  content: '';
  position: absolute;
  inset: -18px -8px;
  background: radial-gradient(ellipse, rgba(201, 169, 97, 0.4) 0%, transparent 65%);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  animation: ai-v1-est2-glow-pulse 2.6s ease-in-out infinite;
}
.ai-v1-est2-range,
.ai-v1-est2-permo { position: relative; z-index: 1; }
.ai-v1-est2-range {
  font-family: var(--ai-font-display);
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--ai-gold-deep);
  line-height: 1;
  white-space: nowrap;
}
.ai-v1-est2-permo {
  font-family: var(--ai-font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ai-gold-deep);
  line-height: 1;
  opacity: 0.85;
}
.ai-v1-est2-card .blurred {
  filter: blur(10px);
  user-select: none;
  transition: filter 600ms var(--ai-ease-out);
}
@keyframes ai-v1-est2-glow-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.95); }
  50%      { opacity: 1;    transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-v1-est2-numbers::before { animation: none; opacity: 0.7; }
}
.ai-v1-est2-subhead {
  font-family: var(--ai-font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--ai-navy);
  text-align: center;
  margin: var(--ai-space-3) 0 var(--ai-space-3);
  line-height: 1.3;
}
@media (max-width: 480px) {
  /* Tighten outer step padding so the card has more horizontal room and
     the example range does not clip its last digit. */
  .ai-v1-pii-step {
    padding: 0 var(--ai-space-2);
  }
  .ai-v1-est2-card {
    padding: var(--ai-space-4) var(--ai-space-2);
  }
  .ai-v1-est2-card-label {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
  }
  .ai-v1-est2-range { font-size: 1.7rem; }
  .ai-v1-est2-permo { font-size: 1.1rem; }
}
@media (max-width: 380px) {
  .ai-v1-est2-range { font-size: 1.45rem; }
  .ai-v1-est2-permo { font-size: 0.95rem; }
}

/* ---- PII pt 1: icon-paired 2-line trust row ----------------------- */
.ai-v1-pii-trust-iconed {
  flex-direction: column;
  gap: var(--ai-space-2) 0;
  align-items: center;
  margin-top: var(--ai-space-3);
}
.ai-v1-pii-trust-iconed li {
  display: flex;
  align-items: center;
  gap: var(--ai-space-2);
  font-size: 0.85rem;
  color: var(--ai-text-muted);
}
.ai-v1-pii-trust-iconed li::before { content: none; }
.ai-v1-trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ai-gold-deep);
  flex-shrink: 0;
}
.ai-v1-trust-icon svg { width: 16px; height: 16px; }

/* ---- PII pt 2: Congrats banner + CSS-only confetti ---------------- */
.ai-v1-congrats-banner {
  position: relative;
  text-align: center;
  padding: 0 0 var(--ai-space-2);
  overflow: hidden;
}
.ai-v1-congrats-text {
  font-family: var(--ai-font-display);
  font-weight: 700;
  font-size: 2.2rem;
  color: var(--ai-navy);
  margin: 0;
}
.ai-v1-matched-line {
  font-size: 1.05rem;
  color: var(--ai-text-muted);
  text-align: center;
  margin: 0 0 var(--ai-space-3);
}

/* Sub-headline (smaller than the main pt 1 / pt 2 H2) — used above the phone form */
.ai-v1-pii-headline-sub {
  font-size: 1.25rem;
  margin: var(--ai-space-4) 0 var(--ai-space-3);
}

/* Stacked advisor card — photo on top, name/state below, learn-more button at bottom.
   No 'You've been matched with' label inside (moved out to the sub-banner above). */
.ai-v1-advisor-badge-stacked {
  flex-direction: column;
  text-align: center;
  align-items: center;
  gap: var(--ai-space-2);
  padding: var(--ai-space-4);
}
.ai-v1-advisor-badge-stacked .ai-v1-advisor-badge-info {
  text-align: center;
  flex: none;
}
.ai-v1-learn-more-btn {
  background: transparent;
  border: 1px solid var(--ai-gold);
  color: var(--ai-navy);
  font-family: var(--ai-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  padding: var(--ai-space-2) var(--ai-space-4);
  border-radius: 999px;
  cursor: pointer;
  margin-top: var(--ai-space-2);
  transition: background-color 150ms var(--ai-ease-out);
}
.ai-v1-learn-more-btn:hover { background: var(--ai-cream-deep); }
.ai-v1-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 10;
}
.ai-v1-confetti-piece {
  position: absolute;
  top: -16px;
  width: 8px;
  height: 12px;
  border-radius: 1px;
  opacity: 0;
  animation-name: ai-v1-confetti-fall;
  animation-timing-function: cubic-bezier(0.4, 0.6, 0.6, 1);
  animation-fill-mode: forwards;
}
@keyframes ai-v1-confetti-fall {
  0%   { opacity: 1; transform: translateY(0) rotate(0deg); }
  80%  { opacity: 1; transform: translateY(260px) rotate(450deg); }
  100% { opacity: 0; transform: translateY(340px) rotate(540deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-v1-confetti { display: none; }
}

/* ---- PII pt 2: advisor card centered right-side ------------------- */
.ai-v1-advisor-badge-centered .ai-v1-advisor-badge-info {
  text-align: center;
}
.ai-v1-advisor-badge-centered .ai-v1-advisor-badge-label {
  justify-content: center;
}

/* Learn-more link under advisor card */
.ai-v1-advisor-learn-more {
  display: inline-block;
  color: var(--ai-gold-deep);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: underline;
  margin: 0 auto var(--ai-space-5);
  cursor: pointer;
  text-align: center;
  width: 100%;
}
.ai-v1-advisor-learn-more:hover { color: var(--ai-navy); }

/* ---- PII pt 2: helper text + Send Code secondary button ------------ */
.ai-v1-pt2-helper {
  font-size: 0.85rem;
  color: var(--ai-text-muted);
  text-align: center;
  margin: calc(-1 * var(--ai-space-2)) 0 var(--ai-space-3);
  font-style: italic;
}
.ai-v1-secondary-btn {
  width: 100%;
  padding: var(--ai-space-3);
  background: var(--ai-cream-deep);
  color: var(--ai-navy);
  font-family: var(--ai-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid var(--ai-gold);
  border-radius: var(--ai-radius-md);
  cursor: pointer;
  margin-bottom: var(--ai-space-3);
  transition: background-color 150ms var(--ai-ease-out);
}
.ai-v1-secondary-btn:hover { background: var(--ai-gold); color: var(--ai-paper); }
.ai-v1-secondary-btn-sent {
  background: var(--ai-paper);
  color: var(--ai-text-muted);
}

/* ---- Advisor profile below-fold section --------------------------- */
.ai-v1-advisor-profile {
  display: flex;
  justify-content: center;
  background: var(--ai-paper);
  padding: var(--ai-space-7) var(--ai-space-5);
  border-top: 1px solid var(--ai-border-soft);
  text-align: center;
}
.ai-v1-advisor-profile > .ai-hero-inner {
  max-width: 560px;
}
.ai-v1-advisor-profile-eyebrow {
  font-family: var(--ai-font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ai-navy);
  margin: 0 0 var(--ai-space-4);
}
.ai-v1-advisor-profile-photo {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--ai-gold);
  margin: 0 auto var(--ai-space-3);
}
.ai-v1-advisor-profile-fullname {
  font-family: var(--ai-font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--ai-navy);
}
.ai-v1-advisor-profile-subtitle {
  font-size: 0.85rem;
  color: var(--ai-text-muted);
  font-style: italic;
  margin-bottom: var(--ai-space-3);
}
.ai-v1-advisor-profile-summary {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ai-text);
  max-width: 460px;
  margin: 0 auto var(--ai-space-4);
}
.ai-v1-accordion-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--ai-space-2);
  background: transparent;
  border: 1px solid var(--ai-gold);
  color: var(--ai-navy);
  font-family: var(--ai-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  padding: var(--ai-space-2) var(--ai-space-4);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 150ms var(--ai-ease-out);
}
.ai-v1-accordion-toggle:hover { background: var(--ai-cream-deep); }
.ai-v1-accordion-chevron { transition: transform 200ms var(--ai-ease-out); }
.ai-v1-accordion-toggle[aria-expanded="true"] .ai-v1-accordion-chevron { transform: rotate(180deg); }

.ai-v1-accordion-body {
  text-align: left;
  margin-top: var(--ai-space-5);
  padding-top: var(--ai-space-5);
  border-top: 1px solid var(--ai-border-soft);
}
.ai-v1-advisor-profile-specs {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--ai-space-5);
}
.ai-v1-advisor-profile-specs li {
  display: flex;
  align-items: flex-start;
  gap: var(--ai-space-3);
  padding: var(--ai-space-2) 0;
  font-size: 0.95rem;
  color: var(--ai-text);
}
.ai-v1-advisor-profile-spec-check {
  color: var(--ai-gold-deep);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}
.ai-v1-advisor-profile-bio {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ai-text);
  margin-bottom: var(--ai-space-5);
}
.ai-v1-testimonials-label {
  font-family: var(--ai-font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ai-navy);
  text-align: center;
  margin: var(--ai-space-5) 0 var(--ai-space-3);
}
.ai-v1-testimonials {
  display: grid;
  gap: var(--ai-space-3);
}
.ai-v1-testimonial-card {
  background: var(--ai-cream-deep);
  border-radius: var(--ai-radius-md);
  padding: var(--ai-space-4);
}
.ai-v1-testimonial-quote {
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ai-text);
  margin: 0 0 var(--ai-space-2);
}
.ai-v1-testimonial-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ai-navy);
  text-align: right;
}

/* Trust row under PII forms (No spam / 256-bit / 100% free) */
.ai-v1-pii-trust {
  list-style: none;
  padding: 0;
  margin: var(--ai-space-4) 0 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--ai-space-2) var(--ai-space-4);
  font-size: 0.8rem;
  color: var(--ai-text-soft);
}
.ai-v1-pii-trust li::before {
  content: "✓ ";
  color: var(--ai-gold-deep);
  margin-right: 2px;
}
/* When trust-row is the icon-paired variant, no ::before checkmark
   (chained class beats the default rule on specificity). */
.ai-v1-pii-trust.ai-v1-pii-trust-iconed li::before { content: none; }

/* =========================================================================
   v4 below-the-fold: pilot trust row + encrypted-assurance band.
   Replaces the removed advisor-profile section. The band sits flush above
   the footer (no margin) and reuses the navy/gold system.
   ========================================================================= */
.ai-v4-trust {
  padding: 30px 20px 24px;
  background: var(--ai-cream, #faf7f1);
}
/* Override the narrow .ai-hero-inner clamp so the 3 items fit on ONE row at
   desktop widths (prevents the unbalanced 2+1 wrap Andrew flagged). */
.ai-v4-trust > .ai-hero-inner { max-width: 860px; }
.ai-v4-trust-row {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;          /* never wrap to 2+1 — stack to column instead */
  justify-content: center;
  align-items: center;
  gap: 14px 30px;
}
.ai-v4-trust-row li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ai-navy);
  white-space: nowrap;
}
.ai-v4-trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--ai-gold);
  color: #fff;
  font-size: 0.78rem;
  flex: 0 0 auto;
}
/* Below the 3-up fit threshold: stack vertically, centered (never 2+1). */
@media (max-width: 760px) {
  .ai-v4-trust-row { flex-direction: column; gap: 14px; }
}

/* Encrypted-assurance band — flush to the footer. */
.ai-v4-encrypted-band {
  margin: 0;
  padding: 14px 20px;
  background: var(--ai-navy);
  color: var(--ai-text-on-navy, #f4f1ea);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 0.92rem;
  font-weight: 500;
  text-align: center;
}
.ai-v4-encrypted-lock {
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--ai-gold);
  flex: 0 0 auto;
}
.ai-v4-encrypted-lock svg { width: 100%; height: 100%; }

/* =========================================================================
   v5 below-the-fold extras: how-it-works strip + brand pull-quote (ported
   from v3), carrier strip wrapper, and the exit-intent report popup.
   ========================================================================= */
/* v5-only: the shared .ai-hero forces min-height:100vh + flex:1, which fills
   the viewport and leaves a big empty gap between the pill and how-it-works.
   For v5 we WANT how-it-works to sit right under the pill, so the hero is
   content-height instead. */
.ai-hero-v5 { min-height: auto; flex: 0 0 auto; padding-bottom: var(--ai-space-3); }

.ai-v5-belowfold {
  padding: 26px 0 40px;        /* full-width so the marquee can span edge-to-edge */
  background: var(--ai-cream, #faf7f1);
}

/* ---- How-it-works strip (v3 port) ---- */
.ai-v3-steps { margin: 10px auto 8px; max-width: 520px; padding: 0 8px; }
.ai-v3-steps-eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ai-gold-deep); margin: 0 0 18px;
  text-align: center;
}
.ai-v3-steps-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.ai-v3-step {
  background: transparent; border: 2px solid var(--ai-navy); border-radius: 12px;
  padding: 22px 14px 20px; display: flex; flex-direction: column;
  align-items: center; gap: 14px; text-align: center; min-height: 140px;
}
.ai-v3-step-icon-wrap {
  width: 44px; height: 44px; border-radius: 999px; background: var(--ai-gold);
  display: flex; align-items: center; justify-content: center; color: var(--ai-navy);
}
.ai-v3-step-icon-wrap svg { width: 22px; height: 22px; }
.ai-v3-step-label { font-size: 0.9rem; line-height: 1.35; color: var(--ai-text); font-weight: 500; }
@media (max-width: 540px) {
  .ai-v3-steps { margin: 8px auto 8px; padding: 0 4px; }
  .ai-v3-steps-eyebrow { font-size: 0.66rem; margin: 0 0 14px; }
  .ai-v3-steps-grid { gap: 8px; }
  .ai-v3-step { padding: 16px 8px 14px; gap: 10px; min-height: 110px; }
  .ai-v3-step-icon-wrap { width: 36px; height: 36px; }
  .ai-v3-step-icon-wrap svg { width: 18px; height: 18px; }
  .ai-v3-step-label { font-size: 0.78rem; line-height: 1.3; }
}

/* ---- Brand pull-quote (v3 port) ---- */
.ai-v3-pullquote { margin: 34px auto 0; max-width: 560px; padding: 0 16px; text-align: center; }
.ai-v3-pullquote-text {
  font-family: var(--ai-font-display); font-size: clamp(1.15rem, 2.5vw, 1.45rem);
  line-height: 1.4; font-style: italic; font-weight: 500; color: var(--ai-text); margin: 0;
}
.ai-v3-pullquote-sig {
  font-family: var(--ai-font-display); font-size: 1rem; font-style: italic;
  font-weight: 500; color: var(--ai-text); margin: 12px 0 0;
}
@media (max-width: 540px) {
  .ai-v3-pullquote { margin: 26px auto 0; padding: 0 12px; }
  .ai-v3-pullquote-text { font-size: 1.05rem; }
  .ai-v3-pullquote-sig { font-size: 0.92rem; margin-top: 10px; }
}

/* ---- Carrier strip: continuous right-to-left conveyor (marquee) ---- */
.ai-v5-carriers { margin: 0 auto; max-width: 100%; }
.ai-v5-carriers .ai-v1-carriers-label { margin-bottom: var(--ai-space-4); }
.ai-v5-marquee {
  overflow: hidden;
  width: 100%;
  /* Fade both edges so logos glide in/out instead of hard-clipping. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.ai-v5-marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: ai-marquee-scroll 32s linear infinite;
}
/* -50% = exactly one duplicated set, so the loop is seamless. */
@keyframes ai-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ai-v5-marquee:hover .ai-v5-marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .ai-v5-marquee-track { animation: none; }
}
.ai-v5-marquee-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 52px;
  padding: 0 26px;
}
.ai-v5-marquee-logo img {
  max-width: 100%;
  max-height: 44px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.65;
}
@media (max-width: 540px) {
  .ai-v5-marquee-logo { width: 116px; height: 46px; padding: 0 18px; }
  .ai-v5-marquee-logo img { max-height: 38px; }
}

/* ---- Exit-intent report popup ---- */
.ai-exit-popup-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(10, 31, 58, 0.62);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.ai-exit-popup-overlay[hidden] { display: none; }
.ai-exit-popup-card {
  position: relative; background: #fff; border-radius: 16px;
  max-width: 380px; width: 100%; padding: 30px 24px 24px;
  box-shadow: 0 20px 60px rgba(10, 31, 58, 0.35);
  text-align: center;
  animation: ai-exit-pop 200ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
@media (prefers-reduced-motion: reduce) { .ai-exit-popup-card { animation: none; } }
@keyframes ai-exit-pop { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ai-exit-popup-close {
  position: absolute; top: 10px; right: 12px; border: none; background: none;
  font-size: 1.6rem; line-height: 1; color: var(--ai-text-muted, #8a93a6);
  cursor: pointer; padding: 4px 8px;
}
.ai-exit-popup-badge {
  display: inline-block; background: var(--ai-gold); color: var(--ai-navy);
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px; margin-bottom: 12px;
}
.ai-exit-popup-title {
  font-family: var(--ai-font-display); font-size: 1.4rem; line-height: 1.25;
  color: var(--ai-navy); margin: 0 0 10px;
}
.ai-exit-popup-sub { font-size: 0.92rem; line-height: 1.45; color: var(--ai-text); margin: 0 0 16px; }
.ai-exit-popup-list { list-style: none; margin: 0 0 20px; padding: 0; text-align: left; }
.ai-exit-popup-list li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 0.9rem; line-height: 1.4; color: var(--ai-text); margin-bottom: 10px;
}
.ai-exit-popup-check {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 20px; height: 20px; border-radius: 999px; background: var(--ai-gold);
  color: #fff; font-size: 0.72rem; margin-top: 1px;
}
.ai-exit-popup-cta {
  display: block; width: 100%; border: none; cursor: pointer;
  background: var(--ai-navy); color: var(--ai-text-on-navy, #f4f1ea);
  font-size: 1rem; font-weight: 700; padding: 14px 18px; border-radius: 10px;
}
.ai-exit-popup-cta:hover { background: var(--ai-navy-soft, #16294e); }
.ai-exit-popup-dismiss {
  display: block; width: 100%; border: none; background: none; cursor: pointer;
  color: var(--ai-text-muted, #8a93a6); font-size: 0.85rem; padding: 12px 0 2px;
}
body.ai-exit-popup-open { overflow: hidden; }

/* =========================================================================
   v5: subtle security pill (no navy band, no trust row) + dynamic wording.
   The same .ai-sec-* toggle also flips the how-it-works card-1 label
   ("Answer 7 questions" -> "Fill out your information") on the PII step.
   ========================================================================= */
.ai-v1-security-pill {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 14px auto 0;
  /* Keep the assurance on ONE line at every width (no "never sold" orphan). */
  white-space: nowrap;
  font-size: clamp(0.66rem, 3vw, 0.85rem);
  padding: var(--ai-space-2) var(--ai-space-3);
}
.ai-v1-security-text { white-space: nowrap; }
.ai-sec-info { display: none; }
body.ai-pii-mode .ai-sec-answers { display: none; }
body.ai-pii-mode .ai-sec-info { display: inline; }