/* ============================================================
   homepage-v2.css
   Styles for the rebuilt homepage (index-v2.html only).
   Layered on top of the existing index.html CSS; the v2 file
   inherits the global topbar/footer/i18n styles and overrides
   only what changes on the home screen + new sticky CTAs.

   Round 4 (visual polish):
   - Desktop hero scales up — wider hero column, 48px headline,
     taller CTA, larger selector chips, more readable sub.
   - Main content column widens to 680px so How It Works and Why
     don't read like a phone view in a desktop browser.
   - Credibility + trust cards get more padding + slightly larger
     type so they read as intentional sections, not alerts.
   - Vertical rhythm increased between sections to let the page
     breathe without inserting dead space.
   ============================================================ */

/* ===== Hero ==============================================
   Round 34: dropped the calc(50% - 50vw) viewport-escape.
   #home has max-width: none now (Round 33), so the hero just
   sits at width: 100% and fills the viewport naturally — no
   escape math needed. This kills a 1-2px iOS Safari overflow
   that was zooming out the whole page. */
.v2-hero {
  text-align: center;
  padding: 88px 18px 76px;
  background: var(--blue);
  color: #fff;
  width: 100%;
  /* Round 40 — iOS Safari snap-back fix.
     width:100% + padding-x:18px without box-sizing:border-box computes
     to total width = 100% + 36px, so the hero overflows the viewport
     by 36px. .app { overflow-x:hidden } clips it visually, but iOS
     Safari reads documentElement.scrollWidth BEFORE the clip, sees the
     36px overhang, and concludes "the page is meant to be wider than
     the viewport" — so pinch-zoom-out stays stuck and never snaps back.
     The form page's .pad has no width:100%, so its padding lives inside
     the parent's width and iOS snap-back works. Adding border-box here
     makes .v2-hero behave the same way — padding is inside the 100%. */
  box-sizing: border-box;
}
.v2-hero-inner {
  max-width: 600px;
  margin: 0 auto;
}
.v2-hero h1 {
  font-family: Georgia, serif;
  font-size: 48px;
  font-weight: 800;
  line-height: 1.08;
  margin: 0 0 18px;
  letter-spacing: -.015em;
  color: #FBBF24; /* brand amber — same yellow used in ticket bar accents */
}
.v2-hero .v2-sub {
  font-size: 18px;
  color: #c4cdda;
  line-height: 1.55;
  max-width: 580px;
  margin: 0 auto 32px;
}
.v2-hero .v2-selector {
  display: inline-flex;
  gap: 6px;
  margin: 0 0 28px;
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  padding: 6px;
}
.v2-hero .v2-selector label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 600;
  color: rgba(255,255,255,.78);
  cursor: pointer;
  transition: background .15s, color .15s;
  user-select: none;
}
.v2-hero .v2-selector input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  /* Round 42 — THE FIX for the mobile no-snap-back bug.
     The global `input,select,textarea { width:100%; padding:10px 11px }`
     rule in index.html sets EVERY <input> to 100% wide by default. The
     .radios class on the form page overrides this with `width:auto` for
     its radios; the v2-selector was missing the equivalent override.
     Combined with position:absolute here (no positioned ancestor →
     containing block = viewport), each radio was rendering as a
     390px-wide invisible element. With two radios at different in-flow
     offsets, the second one ended at right=588px, which iOS Safari
     read as scrollWidth. iOS decided the page was 588px wide on a
     390px viewport, auto-zoomed out to fit — and never snapped back
     because it "knew" the page was intentionally wider than viewport.
     Zeroing out width/padding/border makes the invisible radios
     have zero layout footprint. The form page's snap-back has always
     worked because its .radios rule zeroed this out years ago. */
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
.v2-hero .v2-selector label:hover {
  color: #fff;
}
.v2-hero .v2-selector label.sel {
  background: #fff;
  color: var(--blue);
}
.v2-hero .v2-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #22c55e;
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  padding: 18px 44px;
  min-height: 52px;
  border-radius: 12px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 6px 22px rgba(34,197,94,.38);
  transition: background .15s, transform .1s;
  /* Round 40 — critical iOS Safari snap-back fix. On mobile the CTA
     gets `width: 100%; max-width: 340px; padding: 16px 24px` (see the
     @media block at the bottom). Without border-box that's
     content-width 100% + 48px of padding = every screen 48px wider
     than the viewport, and iOS never snaps zoom back. Border-box
     locks padding inside the width. */
  box-sizing: border-box;
}
.v2-hero .v2-cta:hover {
  background: #16a34a;
}
.v2-hero .v2-cta:active {
  transform: translateY(1px);
}
.v2-hero .v2-support {
  margin-top: 22px;
  font-size: 15px;
  color: #c4cdda;
}

/* ============================================================
   SITE-WIDE CONTAINER SYSTEM (Round 33 — clean rebuild)

   The parent .app no longer constrains #home (index.html base
   CSS moves the 680px constraint onto non-home .screen elements).
   That means below-hero sections can now use plain, unhacked
   max-width containers — no calc/vw math, no :has() dependency.

   Every below-hero section aligns to the same 1180px content
   container so the desktop page feels intentional. Mobile stays
   a single column. Design tokens:
     max-width           1180px
     desktop padding     32px each side
     mobile padding      18px each side
     card gap (desktop)  32px
   ============================================================ */

.v2-belowhero {
  max-width: 1180px;
  margin: 40px auto 24px;
  padding: 0 32px;
  box-sizing: border-box;
  display: block; /* mobile default: sections stack */
}

/* Desktop layout — two-column: How-It-Works | Why-FMT.
   minmax(0,1fr) prevents grid tracks from overflowing when
   card content is wide. Grid takes over at 900px+. */
@media (min-width: 900px) {
  .v2-belowhero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: stretch; /* equal card heights */
    margin: 56px auto 32px;
  }
}

/* ===== How it works — white card, left column on desktop ======= */
.v2-how {
  scroll-margin-top: 80px;
  margin: 0 0 20px; /* mobile: sit above Why */
  padding: 40px 36px 36px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(15,20,35,.04);
  display: flex;
  flex-direction: column;
}
@media (min-width: 900px) {
  .v2-how { margin: 0; padding: 52px 48px 44px; }
}
.v2-how h2 {
  text-align: center;
  font-family: Georgia, serif;
  font-size: 30px;
  color: var(--ink);
  margin: 0 0 32px;
  outline: none;
}
@media (min-width: 900px) {
  .v2-how h2 { font-size: 34px; margin-bottom: 40px; }
}
/* Steps grid.
   Mobile: single column (icon left, copy right per step).
   Desktop: 3 equal columns horizontally inside the card, icon on
   top, title + body below. This is the "polished three-step
   process" the auditor asked for. minmax(0,1fr) lets the columns
   shrink cleanly if the card is narrower than expected. */
.v2-how-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  flex: 1;
}
@media (min-width: 900px) {
  .v2-how-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
  }
}
/* Mobile step layout: icon in a fixed 48px column on the left,
   title + body stacked in the flexible right column. The explicit
   grid-column: 2 on h3+p and grid-row: 1 / span 2 on the icon
   prevents the CSS-Grid auto-placement bug where <p> gets stuffed
   into the icon's narrow 48px cell (causing 1-word-per-line wrap). */
.v2-how-step {
  text-align: left;
  padding: 14px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  width: 100%;
  /* Round 40 — same iOS Safari snap-back fix as .v2-hero. `width: 100%`
     + `padding: 14px 12px` without border-box adds 24px to every step
     card, which then cascades up through .v2-how-grid → .v2-how →
     .v2-belowhero. Border-box keeps padding inside the 100%. */
  box-sizing: border-box;
  transition: background .15s, border-color .15s, transform .1s;
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 14px;
  row-gap: 4px;
  align-items: start;
}
.v2-how-step .v2-icon { grid-row: 1 / span 2; align-self: start; }
.v2-how-step h3 { grid-column: 2; }
.v2-how-step p  { grid-column: 2; }
.v2-how-step:hover {
  background: #f9fafb;
  border-color: var(--line);
}
.v2-how-step:active { transform: translateY(1px); }
.v2-how-step:focus-visible { outline: 2px solid #22c55e; outline-offset: 2px; }
.v2-how-step .v2-icon {
  font-size: 34px;
  line-height: 1;
  margin: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border-radius: 12px;
  flex-shrink: 0;
}
/* Desktop: step becomes a vertical stack (icon on top, then title,
   then body). Center-align so the three sibling steps look
   balanced next to each other. */
@media (min-width: 900px) {
  .v2-how-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 12px;
    gap: 12px;
  }
  .v2-how-step .v2-icon { width: 60px; height: 60px; font-size: 38px; }
}
.v2-how-step h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.25;
}
.v2-how-step p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}
@media (min-width: 900px) {
  .v2-how-step h3 { font-size: 18px; margin-bottom: 6px; }
  .v2-how-step p  { font-size: 15px; }
}

/* ===== Why people use it — navy card, right column on desktop == */
.v2-why {
  margin: 0;
  padding: 40px 36px 36px;
  background: var(--blue);
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(15,20,35,.14);
  display: flex;
  flex-direction: column;
}
@media (min-width: 900px) {
  .v2-why { padding: 52px 48px 44px; }
}
.v2-why h2 {
  text-align: center;
  font-family: Georgia, serif;
  font-size: 28px;
  color: #fff;
  margin: 0 0 22px;
}
@media (min-width: 900px) {
  .v2-why h2 { font-size: 32px; margin-bottom: 28px; }
}
.v2-why ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 520px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.v2-why li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  font-size: 17px;
  color: #fff;
  line-height: 1.55;
}
@media (min-width: 900px) {
  .v2-why li { font-size: 18.5px; padding: 18px 0; line-height: 1.6; }
}
.v2-why li::before {
  content: "✓";
  color: #FBBF24; /* amber check pops on navy */
  font-weight: 800;
  font-size: 20px;
  flex: 0 0 auto;
  width: 22px;
  line-height: 1.45;
}
@media (min-width: 900px) {
  .v2-why li::before { font-size: 22px; }
}

/* ===== Built on NYC ticket data (credibility) — plain 1180px container ===
   Aligns exactly to .v2-belowhero above so the desktop grid looks like
   one continuous column of aligned sections. No calc/vw hacks. */
.v2-cred {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 32px 12px;
  box-sizing: border-box;
}
.v2-cred-card {
  background: #f8faff;
  border: 1px solid #e2e7ee;
  border-left: 4px solid #16a34a;
  border-radius: 12px;
  padding: 30px 34px;
}
@media (min-width: 900px) {
  .v2-cred      { padding: 40px 32px 12px; }
  .v2-cred-card { padding: 36px 44px; }
}
.v2-cred-card h2 {
  font-family: Georgia, serif;
  font-size: 22px;
  color: var(--ink);
  margin: 0 0 12px;
  font-weight: 700;
  line-height: 1.25;
}
.v2-cred-card p {
  font-size: 16px;
  color: #3a475e;
  line-height: 1.6;
  margin: 0;
}
@media (min-width: 900px) {
  .v2-cred-card h2 { font-size: 24px; }
  .v2-cred-card p  { font-size: 17px; }
}

/* ===== A quick heads-up — alert banner (plain 1180px container) =====
   Aligns to the container grid above. */
.v2-trust {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 32px 56px;
  box-sizing: border-box;
}
.v2-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fde4a5;   /* same pale yellow as the reCAPTCHA warning bar */
  border-radius: 12px;
  padding: 14px 18px;
  color: var(--blue, #16213e);
}
.v2-alert-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #92400e; /* deep amber, matches warning icon on response page */
  padding-top: 1px;
}
.v2-alert p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--blue, #16213e);
  font-weight: 500;
}

/* ===== Explore row (compact text-link replacement for deeper-content grid) === */
.v2-explore {
  padding: 28px 24px 56px;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  font-size: 14.5px;
  color: var(--muted);
}
.v2-explore-label {
  color: var(--muted);
  margin-right: 6px;
}
.v2-explore-link {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}
.v2-explore-link:hover {
  color: var(--amber);
  text-decoration: underline;
}
.v2-explore-dot {
  color: #cbd1d9;
  margin: 0 8px;
}

/* ===== Footer width — match the below-hero container (1180px).
   Round 33 fix: the base CSS class is .footerInner (camelCase), not
   .siteFooter-inner (hyphenated). My previous rule targeted the wrong
   selector and never applied — that's why the footer was still narrow.
   Base rule at index.html line ~403 is .siteFooter .footerInner {
   max-width:920px; margin:0 auto; text-align:center }. We widen it
   to 1180px so desktop reads as one continuous grid. */
html[data-v2] .siteFooter .footerInner {
  max-width: 1180px;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
}
@media (max-width: 780px) {
  html[data-v2] .siteFooter .footerInner {
    padding-left: 18px;
    padding-right: 18px;
  }
}
/* Give footer body copy a real desktop reading size. */
@media (min-width: 900px) {
  html[data-v2] .siteFooter,
  html[data-v2] .siteFooter a,
  html[data-v2] .siteFooter p {
    font-size: 14.5px;
    line-height: 1.6;
  }
}

/* ===== User menu — Credits row inside the dropdown ==== */
.userMenuCredits {
  /* style is mostly inline for safety; this just makes the icon align */
}

/* ===== Topbar overrides (v2 only) ======================== */
html[data-v2] .navlinks #checkTicketLink { display: none; }
html[data-v2] .navlinks .navdiv:not(#navdivCases) { display: none; }

html[data-v2] .navlinks .v2-howLink {
  display: inline-block;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  padding: 6px 18px;
  font-size: 14.5px;
  cursor: pointer;
  user-select: none;
}
html[data-v2] .navlinks .v2-howLink:hover { color: #fff; }

/* Bump the logo a hair on desktop so the header feels balanced
   against the larger hero. Inherits the existing topbar logo
   sizing on mobile via the media query at the bottom. */
@media (min-width: 781px) {
  html[data-v2] .topbar .brand svg,
  html[data-v2] .topbar .brand img { height: 38px; }
  html[data-v2] .topbar .brand { font-size: 17px; }
}

/* Desktop sticky CTA */
html[data-v2] #desktopHeaderCTA {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #22c55e;
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  margin: 0 12px 0 4px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
html[data-v2] #desktopHeaderCTA.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
html[data-v2] #desktopHeaderCTA:hover { background: #16a34a; }

/* Mobile bottom sticky CTA bar */
#mobileStickyCTA {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--blue);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(100%);
  transition: opacity .2s, transform .2s, visibility .2s;
  box-shadow: 0 -4px 20px rgba(15,20,35,.25);
}
#mobileStickyCTA.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
#mobileStickyCTA button {
  width: 100%;
  /* Round 40 — belt-and-suspenders. The sticky bar is position:fixed
     (so its overflow shouldn't reach doc scrollWidth), but the button
     has width:100% + padding:14px 16px. Border-box keeps padding
     inside so nothing measures wider than the viewport bar. */
  box-sizing: border-box;
  background: #22c55e;
  color: #fff;
  font-weight: 800;
  font-size: 15.5px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
#mobileStickyCTA button:hover { background: #16a34a; }

/* ===== Mobile overrides — preserve approved mobile layout ===== */
@media (max-width: 780px) {
  html[data-v2] .navlinks { display: none; }
  html[data-v2] #desktopHeaderCTA { display: none !important; }

  /* Hero shrinks back to mobile-readable */
  html[data-v2] .v2-hero { padding: 44px 18px 40px; }
  html[data-v2] .v2-hero h1 { font-size: 34px; line-height: 1.1; }
  html[data-v2] .v2-hero .v2-sub { font-size: 16px; margin-bottom: 24px; }
  html[data-v2] .v2-hero .v2-selector label { padding: 10px 18px; font-size: 14.5px; }
  html[data-v2] .v2-hero .v2-cta { font-size: 16.5px; padding: 16px 24px; min-height: 48px; width: 100%; max-width: 340px; }
  html[data-v2] .v2-hero .v2-support { font-size: 13.5px; }

  /* Below-hero container — 18px side padding on mobile per the auditor.
     display:block keeps sections stacked. */
  html[data-v2] .v2-belowhero {
    padding: 0 18px;
    margin: 24px auto 20px;
    display: block;
    gap: 0;
  }

  /* How it works — card stacks vertically. Steps stack vertically
     too (mobile shouldn't show the 3-column horizontal layout). */
  html[data-v2] .v2-how { margin: 0 0 14px; padding: 26px 20px 22px; border-radius: 14px; }
  html[data-v2] .v2-how h2 { font-size: 24px; margin-bottom: 22px; }
  html[data-v2] .v2-how-grid { grid-template-columns: 1fr; gap: 10px; }
  /* Base rule already sets a correct 2-col grid with explicit
     placement — just refine padding for mobile. */
  html[data-v2] .v2-how-step { padding: 12px 8px; }
  html[data-v2] .v2-how-step .v2-icon { font-size: 30px; width: 48px; height: 48px; }
  html[data-v2] .v2-how-step h3 { font-size: 16px; margin-bottom: 4px; }
  html[data-v2] .v2-how-step p { font-size: 14px; }

  /* Why — navy card, tighter padding on mobile */
  html[data-v2] .v2-why { margin: 0; padding: 26px 22px 24px; border-radius: 14px; }
  html[data-v2] .v2-why h2 { font-size: 22px; margin-bottom: 16px; }
  html[data-v2] .v2-why li { font-size: 15.5px; padding: 12px 0; }

  /* Credibility card + alert banner shrink to mobile padding */
  html[data-v2] .v2-cred { padding: 20px 18px 8px; }
  html[data-v2] .v2-cred-card { padding: 22px 22px; }
  html[data-v2] .v2-cred-card h2 { font-size: 18px; }
  html[data-v2] .v2-cred-card p { font-size: 14.5px; }
  html[data-v2] .v2-trust { padding: 14px 18px 32px; }
  html[data-v2] .v2-alert { padding: 12px 14px; gap: 10px; }
  html[data-v2] .v2-alert p { font-size: 14px; }

  /* Explore shrinks */
  html[data-v2] .v2-explore { padding: 18px 18px 40px; font-size: 13.5px; }

  /* Account-menu sheet expands on mobile */
  html[data-v2] .userMenuPopup {
    position: fixed;
    bottom: 0; left: 0; right: 0; top: auto;
    border-radius: 14px 14px 0 0;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 32px rgba(15,20,35,.25);
    z-index: 100;
  }
  html[data-v2] .userMenuPopup a,
  html[data-v2] .userMenuPopup button {
    font-size: 16px;
    padding: 16px 22px;
  }
}

@media (min-width: 781px) {
  #mobileStickyCTA { display: none !important; }
}

/* ===== Welcome toast ===================================== */
#fmtWelcomeToast {
  position: fixed;
  left: 50%; top: 24px;
  transform: translateX(-50%) translateY(-20px);
  background: #16a34a;
  color: #fff;
  padding: 14px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14.5px;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s, transform .25s, visibility .25s;
  box-shadow: 0 6px 24px rgba(22,163,74,.35);
  max-width: 90%;
  text-align: center;
}
#fmtWelcomeToast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}