/* ============================================================================
   hero-split.css — "Split Hero" (V2, quiz-first) homepage A/B variant.
   Class prefix: .hs-  ·  Experiment key: hero_split (GCAB)
   ----------------------------------------------------------------------------
   ADDITIVE + flag-gated. None of these rules apply unless hero-split.src.js
   adds `.hs-on` to .hero (variant bucket only). Control = zero DOM change.

   Uses ONLY existing homepage-v7.css tokens — no token redefinitions.
   ============================================================================ */

/* ---- 2-column split shell (mounted only when .hs-on) ---- */
.hs-on .hero__inner {
  max-width: 1120px;
}

.hs-split {
  display: block; /* mobile default — single column */
}

/* The 2-column split mounts at ≥1180px ONLY — below that the left column is too
   narrow to hold the bigger headline on 2 lines, so it stays single-column
   (full-width headline, like lean). Round 3 (2026-06-20). */
@media (min-width: 1180px) {
  .hs-split {
    display: grid;
    /* Round 5: the card half was too squished — give it the LARGER share
       (1.12fr) and the copy the smaller (0.88fr). The headline column had too
       much room before. */
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: 2.25rem;
    /* TOP-align (not center): the card is taller than the copy, so centering
       made the headline float with a big void above it. Top-aligning gives both
       columns a shared top edge — the headline anchors the hero. (Round 4.) */
    align-items: start;
  }
}

/* ---- Left column: copy ---- */
.hs-copy {
  text-align: center;
}

@media (min-width: 1180px) {
  .hs-copy {
    text-align: left;
  }
}

/* h1 relocated into .hs-copy — left-aligned in the 2-col (≥1180), centered below */
.hs-split .hero__title {
  text-align: center;
  margin-bottom: 1rem;
}

@media (min-width: 1180px) {
  .hs-split .hero__title {
    text-align: left;
    margin-bottom: 1rem;
  }
}

.hs-sub {
  font-family: var(--serif);
  font-size: 1.22rem;
  line-height: 1.45;
  color: var(--ink-2);
  font-weight: 400;
  margin: 0 0 1rem;
}

.hs-sub b {
  color: var(--sienna);
  font-weight: 600;
}

.hs-proof {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--forest-mid);
  background: var(--forest-glow);
  border-radius: var(--r-full);
  padding: 0.45rem 0.9rem;
  line-height: 1.3;
}

.hs-proof svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  opacity: 0.8;
}

/* Mobile = lean: drop subhead + proof so the quiz is highest on screen */
@media (max-width: 899px) {
  .hs-sub,
  .hs-proof {
    display: none;
  }
}

/* ---- Right column: the card ---- */
.hs-cardcol {
  min-width: 0;
}

.hs-cardcol .quiz-card {
  max-width: 100%;
  margin: 0;
}

/* ---- Quiz-first block (prepended into .grant-finder-card) ---- */
.hs-qf {
  display: block;
}

/* Soft progress row */
.hs-prog {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.1rem;
}

.hs-prog__bar {
  position: relative;
  flex: 1;
  height: 4px;
  border-radius: var(--r-full);
  background: var(--ink-5);
  overflow: hidden;
}

/* Real fill element (was ::before) so the JS can drive it across Q1 → Q2…N as
   one persistent progress strip. */
.hs-prog__fill {
  height: 100%;
  width: 12%;
  border-radius: var(--r-full);
  background: var(--forest-mid);
  transition: width .4s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .hs-prog__fill { transition: none; }
}

.hs-prog__lbl {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Question heading */
.hs-q {
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  line-height: 1.2;
  margin: 0 0 0.9rem;
}

/* ---- Province grid (tappable BUTTONS — never a <select>) ---- */
.hs-pg {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

@media (max-width: 760px) {
  .hs-pg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
  .hs-pg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hs-pg__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 46px;
  padding: 0.5rem 0.6rem;
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  background: var(--paper-warm);
  border: 1.5px solid var(--ink-5);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease), transform .12s var(--ease);
}

.hs-pg__btn:hover {
  border-color: var(--forest-mid);
  background: var(--forest-glow);
}

.hs-pg__btn:focus-visible {
  outline: 2px solid var(--forest-mid);
  outline-offset: 2px;
}

.hs-pg__btn.on {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
}

/* Territories expander chevron */
.hs-pg__btn--exp {
  gap: 0.25rem;
}

.hs-pg__btn--exp .hs-chev {
  display: inline-block;
  transition: transform .15s var(--ease);
  font-size: 0.7em;
}

.hs-pg__btn--exp[aria-expanded="true"] .hs-chev {
  transform: rotate(90deg);
}

/* Territories sub-row (progressive disclosure, hidden by default) */
.hs-terr {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.5rem;
}

@media (max-width: 460px) {
  .hs-terr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hs-terr.on {
  display: grid;
}

/* ---- "or" divider ---- */
.hs-or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.1rem 0;
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hs-or::before,
.hs-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ink-5);
}

/* ---- Re-parented paste form lives here; give it breathing room ---- */
.hs-paste {
  margin-bottom: 0.6rem;
}

/* iOS-zoom safety: any text input in the block must be >= 16px */
.hs-qf input[type="url"],
.hs-qf input[type="text"],
.hs-qf input {
  font-size: 16px;
}

/* The re-parented uo-hero note */
.hs-qf .uo-hero__note {
  margin-top: 0.4rem;
}

/* ---- Demoted quick-quiz link ---- */
.hs-quick {
  display: inline-block;
  margin: 0.4rem 0 0.2rem;
  background: none;
  border: none;
  padding: 0.5rem 0;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-align: left;
}

.hs-quick:hover { color: var(--sienna); }
.hs-quick:focus-visible { outline: 2px solid var(--forest-mid); outline-offset: 2px; }

/* ---- Slim trust line ---- */
.hs-trust {
  margin: 0.75rem 0 0;
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--ink-3);
  line-height: 1.4;
}

/* ---- "Finding your matches…" spinner state ---- */
.hs-finding {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.85rem;
  min-height: 180px;
  padding: 1rem;
}

.hs-finding.on {
  display: flex;
}

.hs-spin {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--ink-5);
  border-top-color: var(--forest-mid);
  animation: hs-spin 0.8s linear infinite;
}

.hs-finding__lbl {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
}

@keyframes hs-spin {
  to { transform: rotate(360deg); }
}

/* While handing off, hide the real province step (avoid flashing the tall step
   during the ~1200ms auto-advance). */
.grant-finder-card.hs-handoff .quiz-container.advanced-quiz {
  display: none !important;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .hs-spin {
    animation: none;
    border-top-color: var(--forest-mid);
  }
  .hs-pg__btn,
  .hs-pg__btn--exp .hs-chev {
    transition: none;
  }
}

/* ============================================================================
   QA fixes — multi-lens pass 2026-06-20 (a11y contrast, spinner state, edges).
   Appended (not inline-edited) so the rules above stay as authored; later
   source order + matching specificity makes these win.
   ============================================================================ */
/* a11y P1/P3: small grey texts were 2.48:1 on the card → bump to --ink-2 (~7:1). */
.hs-or,
.hs-trust,
.hs-prog__lbl { color: var(--ink-2); }

/* Visual P2: during the handoff spinner, hide the rest of the card so only the
   "Finding your matches…" state shows (no province grid / paste / links behind it). */
.hs-qf.is-finding .hs-gridwrap,
.hs-qf.is-finding .hs-or,
.hs-qf.is-finding .hs-paste,
.hs-qf.is-finding .hs-quick,
.hs-qf.is-finding .hs-trust { display: none; }

/* Visual P3: long province labels fit on one line at 320px (no 2-line buttons). */
@media (max-width: 460px) {
  .hs-pg__btn { font-size: clamp(0.72rem, 2.7vw, 0.84rem); }
}

/* Visual P3: territories sub-row always 3-up (one clean row, no orphaned 3rd). */
.hs-terr { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

/* 2-col card province grid: 4-col throughout (round 5 — the card half is bigger
   now, so 4 columns fit without overflow even at 1180; 4-col = 3 rows, a shorter
   card that balances the copy column better than the old 3-col/4-row squeeze). */
@media (min-width: 1180px) {
  .hs-cardcol .hs-pg { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
  /* "a bit vertically" — roomier touch targets + spacing in the larger card so it
     doesn't feel cramped now it has the horizontal room (round 5). Top padding
     stays tight (the round-3 card-top-gap fix); extra room comes from the buttons,
     gaps, and a touch more bottom padding. */
  .hs-cardcol .hs-pg__btn { min-height: 52px; }
  .hs-on .hs-cardcol .quiz-card { padding-bottom: 2.25rem; }
}

/* ============================================================================
   QA pass 2 (2026-06-20) — prototype-fidelity fixes + A/B/C lean arm.
   Reported: split headline wrapped to 4 lines (too big for the left column),
   proof icon malformed, proof color off-plan, trust/quick were inside the card.
   ============================================================================ */
/* Wider hero so BOTH columns have room (round 5: widened 1280→1340 to give the
   now-larger card half more absolute width). */
.hs-on .hero__inner { max-width: 1340px; }

/* SPLIT headline: the global .hero__title is up to 3.75rem — far too big for the
   left column (caused the 4-line wrap). Size it so each sentence is one line
   ("Every grant you qualify for." / "Found in 60 seconds." = 2 lines).
   Round 3 (2026-06-20): Khalid wants it BIGGER while staying 2 lines — bumped
   the desktop size and widened the left column to give it room. */
/* Single-column headline size (mobile → tablet → narrow desktop <1180). Mobile
   min matches control's proven 28px so "Every grant you qualify for." stays on
   one line (2 lines total); caps at 2.4rem on wider single-column widths. */
.hs-split .hero__title { font-size: clamp(1.75rem, 6vw, 2.4rem); line-height: 1.1; }
/* 2-col (≥1180): the bigger headline — left column is wide enough here for it to
   stay 2 lines (verified s1w≈502px ≤ colW 568–621px). */
@media (min-width: 1180px) {
  /* Round 5: the copy column is narrower now (card got the larger share), so the
     headline is responsive — it shrinks just enough to stay 2 lines in the
     narrower column at 1180, and grows toward 2.45rem on wider screens. */
  .hs-split .hero__title { font-size: clamp(2rem, 2.85vw, 2.45rem); line-height: 1.08; letter-spacing: -0.025em; }
}

/* Proof pill: match the plan (sienna, not green); icon now paints (linecap fix in JS). */
.hs-proof { color: var(--sienna-dk); background: var(--sienna-lt); }

/* Cleaner white province buttons (match the plan's look). */
.hs-pg__btn { background: var(--white); box-shadow: 0 1px 2px rgba(28, 25, 23, .05); }

/* Footer (lean arm + fallback): quick-quiz link below the card, centered.
   In SPLIT, the trust line is moved into the LEFT copy column (round 3) and the
   quick link stays below the card — see the round-3 block. */
.hs-foot { text-align: center; margin-top: 1.1rem; }
.hs-foot .hs-trust { text-align: center; margin: 0; }
.hs-foot .hs-quick { display: inline-block; text-align: center; margin: 0.5rem 0 0; }

/* Lean arm (C): centered single column. Round 3: bigger headline + a subhead. */
.hs-lean .hero__inner { max-width: 820px; }
.hs-lean .hero__title { font-size: clamp(1.75rem, 5.4vw, 3.1rem); line-height: 1.08; text-align: center; }
.hs-lean .hs-foot { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ============================================================================
   ROUND 3 (2026-06-20) — Khalid review of split + lean live.
   A: split "unbalanced" → trust line into the LEFT column; bigger headline.
   B: lean → bigger headline + a subhead.
   C: card-top gap too big; (zip animation removed globally in homepage-v7.css).
   D: the full quiz flow past Q1 reverted to the old format → trim the redundant
      header, match the compact rhythm, one persistent top progress strip,
      back-from-Q2 returns to the new compact Q1 (JS).
   All variant-scoped under .hs-on (control = untouched).
   ============================================================================ */

/* A1 — SPLIT: trust line moved into the left copy column (balances the tall card).
   Left-aligned only in the 2-col (≥1180); centered in the single-col fallback. */
.hs-copy .hs-trust { margin: 1.15rem 0 0; }
@media (min-width: 1180px) {
  .hs-copy .hs-trust { text-align: left; }
}

/* B2 — LEAN: a smaller, centered subhead (its absence made lean "feel off"). */
.hs-lean .hs-sub {
  font-size: 1.1rem;
  text-align: center;
  max-width: 620px;
  margin: 0 auto 1.35rem;
}

/* C2 — reduce the gap between the card top and the progress strip (desktop only;
   mobile card padding is already tight). Variant-scoped → control unchanged. */
@media (min-width: 720px) {
  .hs-on .quiz-card { padding-top: 1.5rem; }
}

/* D1 — drop the redundant advanced-quiz intro header in the variant (the hero
   already framed the quiz; "Back to Quiz Selection" is meaningless with no
   chooser). !important beats the inline display selectQuizType() sets. */
.hs-on .quiz-container.advanced-quiz .finder-header { display: none !important; }

/* D3 — match Q2…N to the compact hero-card rhythm: left-align the question like
   the hero Q1, tighten vertical spacing. */
.hs-on .quiz-container.advanced-quiz .quiz-label {
  text-align: left;
  font-size: 1.32rem;
  margin-bottom: 0.9rem;
  line-height: 1.2;
}
.hs-on .quiz-container.advanced-quiz .multi-select-hint {
  text-align: left;
  margin-top: -0.35rem;
  margin-bottom: 0.9rem;
}
.hs-on .quiz-container.advanced-quiz .quiz-navigation {
  padding-top: 1.1rem;
  margin-top: 0.6rem;
}

/* D5 — the persistent top strip now shows progress, so hide the quiz's own
   bottom progress (keep the Back / Next buttons). */
.hs-on .quiz-container.advanced-quiz .quiz-navigation .quiz-progress { display: none; }

/* The persistent progress strip sits at card level (above Q1 AND the real quiz)
   so progress reads continuously. Give it the card's horizontal rhythm. */
.hs-on .hs-prog { margin-bottom: 1rem; }

/* a11y: the re-parented paste note is #a8a29e (2.48:1, fails AA). It's a
   pre-existing site issue (the chooser note fails the same on control), but the
   variant surfaces it prominently in the hero, so bump it to --ink-2 (~7:1) here.
   (Scoped to .hs-on → control's note is left as the live status quo; logged for a
   separate global a11y fix.) */
.hs-on .uo-hero__note { color: var(--ink-2); }

/* ============================================================================
   ROUND 4 (2026-06-20) — hero layout balance (Khalid: "feels off").
   Diagnosis: (1) align-items:center floated the headline; (2) the card was taller
   than the copy so the copy looked sparse; (3) the stats sat in a detached boxed
   band below the hero; (4) too much top air. Fixes: top-align (above), trim top
   padding, and move the stats INTO the copy column (split) as a clean left-aligned
   row that fills/anchors it and removes the detached band.
   ============================================================================ */

/* (4) Trim the hero's top air a touch in the variant (desktop) so the content
   sits higher and reads as a composed hero, not a floating cluster. */
@media (min-width: 720px) {
  .hs-on .hero { padding-top: calc(56px + env(safe-area-inset-top, 0px) + 2.25rem); }
}

/* (3)+(2) Stats moved into the LEFT copy column (split only, ≥1180): strip the
   boxed-band styling, left-align, add a quiet top divider. Fills the column to
   balance the card + removes the detached band below the hero. */
@media (min-width: 1180px) {
  .hs-copy .hero__stats {
    justify-content: flex-start;
    gap: 1.6rem;
    margin: 1.6rem 0 0;
    padding: 1.25rem 0 0;
    background: none;
    border: none;
    border-top: 1px solid rgba(28, 25, 23, 0.09);
    border-radius: 0;
  }
}
/* Below 1180 the split is single-column; the stats now live in the copy column
   (DOM), which would push the card down above the fold. Hide them there — the
   trust line already carries the key proof ("650+ verified programs · 25,000+
   entrepreneurs"), and keeping the card high matters more on mobile/tablet. */
@media (max-width: 1179px) {
  .hs-copy .hero__stats { display: none; }
}