/* mobile-fix.css  — resolves iPhone <=420px overflows & tiny-font issues
   Loaded AFTER site2.css, _landing.css so it can override without !important where possible. */

/* ---------- Global safety nets ---------- */
html, body { overflow-x: clip; }  /* `clip` beats hidden: still allows position:sticky to work */
img, video, svg { max-width: 100%; height: auto; }
/* Prevent long strings (URLs, IDs, WhatsApp numbers) from forcing overflow.
   `break-word` only breaks when no other wrap point exists — preserves normal word wrapping. */
p, li, dd, dt, span.chip, .chip, .pill, .metric__k, .metric__v { overflow-wrap: break-word; }
/* Only aggressively break obvious long-token containers */
code, kbd, samp, .mono, a[href^="mailto:"], a[href^="tel:"], .long-token { overflow-wrap: anywhere; word-break: break-all; }

/* Minimum text size — 11px causes iOS Safari auto-zoom on focus & looks broken.
   Bump real UI labels to 12px ON MOBILE ONLY. Desktop keeps original sizing.
   Explicitly exclude faux phone mockups (already scaled visually) and SVG map labels. */
@media (max-width: 640px) {
  .u, .metric__v .u, .muted, .tiny, .caption,
  .lp-hub-link__meta, .lp-hub-cat__count, .lp-hub-cat__label,
  .lp-route-card__stat-value, .lp-route-card__stat-label,
  .lp-route-card__tag, .lp-route-card__pill,
  .lp-location__fact-label,
  .footer__meta, .site-footer__meta,
  .site-footer h5,
  .legal small, .legal .footnote, .legal-toc__label,
  .legal-siblings .label, .legal-siblings .title,
  .legal-meta dt, dl dt.small, dt,
  .t-callout__label, .t-entity__role,
  .farecalc__tier-v, .farecalc__quick-k, .fc-status__chip, .farecalc .k,
  .earncalc__slider-ticks, .earncalc__plan-label, .earncalc__payout-k,
  .pay-chip,
  .tig__idx, .tig__label,
  .map-card__label,
  .os,
  table.t-table th, .t-table th {
    font-size: 12px !important;
  }
  /* Phone mockups stay small — they're visually scaled already */
  .app-screen, .app-screen *,
  .phone-frame, .phone-frame *,
  .lp-app-phone, .lp-app-phone *,
  .app-mock, .app-mock *,
  svg text, svg tspan {
    font-size: revert !important;
  }
}

/* ---------- ≤640px : phone tweaks ---------- */
@media (max-width: 640px) {
  /* Cards: padding drops from 32 → 20, so internal content doesn't force width */
  .card-base { padding: 22px; }
  .card-base h4 { font-size: 18px; }
  .card-base p { font-size: 14px; }

  .signup-card { padding: 22px; }
  .signup-card__head { flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
  .signup-card__head h3 { font-size: 18px; }

  /* Feature rows: let media shrink, keep aspect tidy */
  .feature-row { gap: 24px; }
  .feature-row > * { min-width: 0; }
  /* width:100% caps growth when an inline min-height + aspect-ratio (from
     site2.css or inline style) would otherwise force the element wider than
     its column (seen on /drive's onboarding feature-row). */
  .feature-row__media { aspect-ratio: 4 / 3; width: 100%; max-width: 100%; }
  .feature-row__media img { width: 100%; height: 100%; object-fit: cover; }
  .feature-row__badge { top: 14px; left: 14px; padding: 8px 12px; font-size: 12px; }

  /* Chips / eyebrows stay on one row only if short; otherwise wrap */
  .chip, .eyebrow { white-space: normal; max-width: 100%; }
  .chip--yellow { line-height: 1.3; }

  /* Form fields never narrower than available column */
  .form-field, .form-field input, .form-field select, .form-field textarea { min-width: 0; max-width: 100%; width: 100%; box-sizing: border-box; }
  .form-grid-2 { gap: 12px; }

  /* Section paddings tighter on phone so cards get more column width */
  .container, .container--narrow, .container--mid { padding-left: 16px; padding-right: 16px; }

  /* Metric grid — stop forcing min-content */
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .metric { min-width: 0; }
  .metric__v { font-size: clamp(32px, 9vw, 44px); }

  /* Page-hero image won't cause horizontal scroll */
  .page-hero, .page-hero__media img { max-width: 100%; }

  /* Display sizes that were computed for desktop are too aggressive on phone */
  .display-md { font-size: clamp(30px, 8vw, 44px); line-height: 1.05; }

  /* Hub (routes index) — switch to 1 column at phone width */
  .lp-hub-cat__grid { grid-template-columns: 1fr !important; }
  .lp-hub-link { font-size: 14px; padding: 12px 14px; min-width: 0; }
  .lp-hub-link__meta { margin-left: auto; margin-right: 6px; white-space: nowrap; }

  /* Dark-section headings don't run off screen */
  .dark-section .display-md, .dark-section .h1 { word-break: normal; }
}

/* ---------- ≤420px : very small phones ---------- */
@media (max-width: 420px) {
  .card-base { padding: 18px; }
  .signup-card { padding: 18px; }
  .container, .container--narrow, .container--mid { padding-left: 14px; padding-right: 14px; }
  .metric-grid { grid-template-columns: 1fr; }
  .lp-hub-link { flex-wrap: wrap; row-gap: 2px; }
  .lp-hub-link__meta { margin-left: 28px; margin-right: 0; }

  /* Fare calculator: the 2-up tier picker has `grid-template-columns: 44px 1fr auto`
     per tier, and the `auto` "GY$18,250" price refuses to shrink. Two tiers side-by-
     side force `.fc3` min-content > 320, which expands the outer 1fr grid column and
     spills the section off-screen. Stack tiers on very narrow phones.
     !important because React-hoisted page stylesheets (farecalc3.css) end up AFTER
     this file in <head>. */
  .fc3__tiers { grid-template-columns: 1fr !important; }
  .fc3 { min-width: 0 !important; }
  .fc3-layout { grid-template-columns: minmax(0, 1fr) !important; }

  /* Driver earnings calculator: the 56px net payout can hit 6-7 digit GY$ amounts
     (e.g. "GY$228,000") that overflow 320px-wide phones. Scale the headline number
     and wrap the currency+number so nothing spills past the viewport edge. */
  .earncalc__net { font-size: clamp(36px, 12vw, 48px) !important; }
  .earncalc__payout-v { flex-wrap: wrap; }
  .earncalc__payout-v #ecNet { font-size: clamp(36px, 12vw, 48px) !important; }
}

/* =============================================================
   v2.3.1 — page-specific mobile fixes (user reports Apr 21 2026)
   ============================================================= */

/* ---------- Fare calc result pane: shrink on mobile ---------- */
@media (max-width: 640px) {
  /* Giant fare number was clamp(52px, 9vw, 84px) — much too big when
     the phone width goes sub-400 (reads 52px minimum). Pull it down. */
  .fc2__fare-v { font-size: clamp(40px, 11vw, 56px) !important; letter-spacing: -0.035em; }
  .fc2__fare-ccy { font-size: 16px; }
  .fc2__fare-tier { font-size: 10px; padding: 4px 8px; letter-spacing: 0.12em; }

  /* Result pane padding — reclaim 4px on each side at phone width */
  .fc2__result { padding: 20px 16px 22px !important; gap: 14px !important; }
  .fc2__fare-card { padding: 16px 16px 18px; gap: 10px; border-radius: 14px; }

  /* Route schematic — drop height further; labels were pushing bubble off-center */
  .fc2__route { height: 80px !important; margin: 0 -2px !important; }
  .fc2__route-bubble { padding: 5px 10px; font-size: 12px; }
  .fc2__route-bubble-v { font-size: 14px; }
  .fc2__route-bubble-u { font-size: 9.5px; }
  .fc2__route-pin-label { font-size: 9px; padding: 1px 5px; top: calc(100% + 4px); }

  /* Stats row — 3 cols too cramped on <380px; 2 cols works, last spans full */
  .fc2__stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .fc2__stat { padding: 10px 12px; }
  .fc2__stat-v { font-size: 18px; }
  .fc2__stat-k { font-size: 9.5px; letter-spacing: 0.14em; }
  .fc2__stat-unit { font-size: 11px; }

  /* Range bar labels */
  .fc2__range-labels { font-size: 10px; }
  .fc2__range-mid { font-size: 9px; letter-spacing: 0.08em; }

  /* Savings row tighter */
  .fc2__savings { padding: 8px 12px; font-size: 12px; }

  /* Result head chips wrap cleanly */
  .fc2__result-head { gap: 8px; }
  .fc2__nosurge { font-size: 10px; padding: 3px 8px 3px 6px; letter-spacing: 0.08em; }
  .fc2__result-trip { font-size: 11.5px; }

  /* Form side: pay row + chips already handle themselves, but tighten includes */
  .fc2__includes { padding: 10px 0; gap: 6px; }
  .fc2__include { font-size: 11.5px; }
  .fc2__include-icon { flex: 0 0 24px; width: 24px; height: 24px; }
  .fc2__include-icon svg { width: 12px; height: 12px; }
}
@media (max-width: 380px) {
  .fc2__fare-v { font-size: 44px !important; }
  .fc2__stats { grid-template-columns: 1fr 1fr; }
  .fc2__stat:nth-child(3) { grid-column: 1 / -1; }
}

/* ---------- Fare calc MOBILE REWRITE (user: "too big, not centered, people
    don't know what it is — make it simpler like Uber") ----------
    Strategy: at ≤640px, hide the noisy bits (route diagram, destination chip
    grid, stats, includes, savings, pay row, includes row, picker tabs) and
    keep only the Uber-style essentials: title, pickup→destination rail,
    3-tier pill, fare line, book button. ~6 blocks total instead of ~14. */
@media (max-width: 640px) {
  /* Force single column even if the outer html said 920px — bulletproof */
  .fc2 { grid-template-columns: 1fr !important; border-radius: 20px !important; margin-top: 28px !important; }

  /* ---- FORM PANE simplification ---- */
  .fc2__form { padding: 24px 18px !important; gap: 16px !important; }

  /* Compact the top chip row */
  .fc2__head { gap: 8px !important; }
  .fc2__chip { padding: 5px 10px; font-size: 9.5px; letter-spacing: 0.12em; }
  .fc2__head-h { font-size: 11px; }

  /* Title: cleaner, no serif flourish (too fancy for a utility widget) */
  .fc2__title { font-size: 22px !important; line-height: 1.1; margin: 2px 0 4px !important; }
  .fc2__title em { font-family: 'GT Walsheim', sans-serif !important; font-style: normal !important; font-weight: 600 !important; color: var(--gw-yellow, #EAFF68); }

  /* Subtitle copy hidden — the title is self-explanatory at mobile scale */
  .fc2__form > .fc2__sub,
  .fc2__form > p.fc2__sub { display: none !important; }

  /* Rail: keep but tighten */
  .fc2__rail { padding: 4px 2px; padding-right: 46px; border-radius: 14px; }
  .fc2__row { padding: 10px 12px 10px 8px; gap: 8px; grid-template-columns: 28px 1fr auto; }
  .fc2__pin { width: 14px; height: 14px; box-shadow: 0 0 0 3px rgba(255,255,255,0.1); }
  .fc2__pin::after { width: 4px; height: 4px; }
  .fc2__row-k { font-size: 9.5px; letter-spacing: 0.12em; margin-bottom: 2px; }
  .fc2__row-v { font-size: 14px; }
  .fc2__row-meta { font-size: 10.5px; max-width: 90px; text-align: right; line-height: 1.2; }
  .fc2__swap { width: 30px; height: 30px; right: 8px; }
  .fc2__rail::before { left: 22px; top: 30px; bottom: 30px; }

  /* Picker tabs: HIDE on mobile — rail is the obvious focus */
  .fc2__picker-tabs,
  .fc2__picker-hint { display: none !important; }

  /* Destination chips grid: hide it entirely, show a compact quick row instead */
  .fc2__chips { display: none !important; }

  /* Add a synthetic quick-pills row via data attribute (fallback if absent) */
  /* (Existing chips still exist in DOM; we just hide the full grid.) */

  /* Tier selector: tighter, still 3-col (key control stays) */
  .fc2__tiers { padding: 4px; gap: 3px; border-radius: 12px; }
  .fc2__tier { padding: 9px 4px 8px; gap: 4px; min-width: 0; }
  .fc2__tier-k { font-size: 12px; }
  .fc2__tier-v { font-size: 10px; letter-spacing: 0.04em; }
  .fc2__tier svg { width: 20px; height: 20px; }

  /* ---- RESULT PANE simplification ---- */
  .fc2__result { padding: 18px !important; gap: 12px !important; border-radius: 0 !important; }

  /* Hide decorative / informational blocks on mobile */
  .fc2__route,               /* schematic pickup → destination diagram */
  .fc2__range,               /* low/mid/high range bar */
  .fc2__savings,             /* vs Uber/taxi savings chip */
  .fc2__stats,               /* 3-col stats row (distance/time/eta) */
  .fc2__includes,            /* 3 inclusion badges */
  .fc2__pay {                /* payment options chip row */
    display: none !important;
  }

  /* Flatten the fare card — no card-within-card, just a clean hero line */
  .fc2__fare-card {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    gap: 8px !important;
  }
  .fc2__fare-row { align-items: baseline; }
  .fc2__fare-v { font-size: 48px !important; letter-spacing: -0.035em; line-height: 1; }
  .fc2__fare-ccy { font-size: 16px; }
  .fc2__fare-tier { font-size: 10px; padding: 4px 9px; letter-spacing: 0.12em; align-self: center; }

  /* Compact the result head: no-surge stays but smaller */
  .fc2__result-head { gap: 6px !important; }
  .fc2__result-k { font-size: 10px; letter-spacing: 0.14em; }
  .fc2__nosurge { font-size: 9.5px; padding: 3px 7px 3px 6px; letter-spacing: 0.08em; }
  .fc2__result-trip { font-size: 11px; }

  /* Add a spacer/divider above the fare so it feels intentional */
  .fc2__fare-card::before {
    content: '';
    display: block;
    height: 1px;
    background: rgba(1,30,19,0.08);
    margin-bottom: 4px;
  }

  /* Any CTA/book button at the bottom of the result */
  .fc2__book, .fc2__cta, .fc2__result .btn {
    width: 100% !important;
    padding: 14px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    margin-top: 4px;
  }
}

/* ---------- Mobile picker bottom sheet (≤640px) ---------- */
.fc2-sheet {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.fc2-sheet[data-open] { pointer-events: auto; opacity: 1; }
.fc2-sheet__scrim {
  position: absolute; inset: 0;
  background: rgba(0, 14, 7, 0.55);
  backdrop-filter: blur(2px);
}
.fc2-sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: #011E13;
  color: #fff;
  border-radius: 20px 20px 0 0;
  padding: 10px 0 max(20px, env(safe-area-inset-bottom));
  max-height: 82vh;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.1, 1);
  box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.45);
}
.fc2-sheet[data-open] .fc2-sheet__panel { transform: translateY(0); }
.fc2-sheet__handle {
  width: 42px; height: 4px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  margin: 4px auto 12px;
}
.fc2-sheet__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.fc2-sheet__title {
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: #fff;
}
.fc2-sheet__close {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.fc2-sheet__list {
  list-style: none; margin: 0; padding: 6px 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}
.fc2-sheet__item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.14s;
}
.fc2-sheet__item:active { background: rgba(234, 255, 104, 0.06); }
.fc2-sheet__item.is-disabled { opacity: 0.35; cursor: not-allowed; }
.fc2-sheet__pin {
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; justify-self: center;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}
.fc2-sheet__item.is-on .fc2-sheet__pin {
  background: var(--gw-yellow, #EAFF68);
  box-shadow: 0 0 0 3px rgba(234, 255, 104, 0.22);
}
.fc2-sheet__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fc2-sheet__name {
  font-size: 15px; font-weight: 600; color: #fff; line-height: 1.2;
  letter-spacing: -0.005em;
}
.fc2-sheet__item.is-on .fc2-sheet__name { color: var(--gw-yellow, #EAFF68); }
.fc2-sheet__sub {
  font-size: 12px; color: rgba(255, 255, 255, 0.5); font-weight: 500;
  line-height: 1.2;
}
.fc2-sheet__check {
  color: var(--gw-yellow, #EAFF68);
  font-weight: 700; font-size: 16px;
}

/* Affordance on the rail rows on mobile — arrow chevron */
@media (max-width: 640px) {
  .fc2__rail .fc2__row { position: relative; }
  .fc2__rail .fc2__row::after {
    content: '›';
    position: absolute;
    right: 44px;
    top: 50%;
    transform: translateY(-52%);
    font-size: 22px;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 300;
    line-height: 1;
    pointer-events: none;
  }
  .fc2__rail .fc2__row:active { background: rgba(255, 255, 255, 0.03); border-radius: 10px; }
}

/* ---------- business.html: partner pack must stack on mobile/tablet ---------- */
@media (max-width: 900px) {
  /* Inline style on the grid: grid-template-columns:1fr 1fr, align-items:center.
     Override with attribute selector since there's no semantic class. */
  #partner-pack-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    align-items: stretch !important;
  }
}

/* ---------- about-us.html: advisor tiles (Transport / Fintech / Sustainability) ----
   Inline style forces 3 columns. On phone that produces ~90px-wide columns with text
   wrapping every word. Drop to 2 columns on mobile, 1 column on very narrow phones. */
@media (max-width: 720px) {
  #advisors-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
}
@media (max-width: 420px) {
  #advisors-grid { grid-template-columns: 1fr !important; }
}

/* ---------- press.html: fact sheet — keep dt/dd aligned when the value wraps --------
   The default flex space-between puts dt on the left and dd on the right, but when
   the value wraps the second line sits on its own row and the dt baselines don't
   match the first line of the value. Switch to a grid so each row has two fixed
   tracks; right-align the value so wrapped text still sits under the first line. */
.fact-sheet > div {
  display: grid !important;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  align-items: baseline;
}
.fact-sheet dt { white-space: nowrap; }
.fact-sheet dd { margin: 0; text-align: right; text-wrap: pretty; }

/* ---------- careers.html: values grid (4 cards) — bulletproof phone stacking.
   The page uses an inline <style> inside <body> for its media queries, which parses
   but is brittle. Hard-override here so the cards stack at phone sizes no matter what. */
@media (max-width: 960px) { #vg { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 560px) { #vg { grid-template-columns: 1fr !important; } }

/* ---------- safety.html: "before you ride" 3-step grid — stack on phones ---------- */
@media (max-width: 800px) { #sg1 { grid-template-columns: 1fr !important; } }

/* ---------- sustainability.html: ESG methodology 3-card grid ---------- */
@media (max-width: 800px) { #method-grid { grid-template-columns: 1fr !important; } }
/* ---------- sustainability.html: "reporting promise" and "charging & energy" 3-card grids ---------- */
@media (max-width: 800px) {
  #sgg, #chg { grid-template-columns: 1fr !important; }
}

/* ---------- about-us.html: legal/contact 2-col grid (#leg) ---------- */
@media (max-width: 800px) { #leg { grid-template-columns: 1fr !important; } }

/* ---------- guideline.html: community guidelines 3-col grid (#gg) ---------- */
@media (max-width: 900px) { #gg { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 560px) { #gg { grid-template-columns: 1fr !important; } }

/* ---------- safety.html: annual transparency section ---------- */
@media (max-width: 800px) {
  /* Stack the text / list 2-col grid */
  #trans-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  /* Turn the 4-item list into a 2x2 tile grid on phones */
  #trans-grid > .reveal:last-child > ul {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  #trans-grid > .reveal:last-child > ul > li { padding: 14px !important; }
}
@media (max-width: 420px) {
  /* Very narrow phones: single column so text doesn't get cramped */
  #trans-grid > .reveal:last-child > ul { grid-template-columns: 1fr !important; }
}

/* ---------- app.html: full mobile overhaul ---------- */

/* Force-stack the hero grid at tablet/phone — the inline rule uses 1100px but
   something was letting it stay 2-col on a ~460px viewport. Bulletproof with
   !important and a lower cap for safety. */
@media (max-width: 1100px) {
  .app-hero__inner {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    min-height: 0 !important;
    display: block !important; /* belt + braces — block layout can't go 2-col */
  }
  .app-hero__phone { grid-column: auto !important; }
  .app-hero__dl { grid-column: auto !important; }
}

@media (max-width: 900px) {
  /* Hero already switches to 1-col at 1100px. But the phone plate image +
     badge get cramped/clipped. Rework for phone widths. */
  .app-hero { padding: 88px 0 0 !important; }
  .app-hero__copy { padding: 0 0 32px !important; }
  .app-hero h1 { font-size: clamp(40px, 10vw, 64px) !important; line-height: 1.0; }
  .app-hero__sub { font-size: 16px; margin-top: 20px; }
  .app-hero__eyebrow { margin-bottom: 20px; font-size: 11px; }
  .app-hero__crumbs { margin-bottom: 22px; font-size: 12px; }

  /* Stats row: 3-across at 64px values overflows on phone — smaller values */
  .app-hero__stats { gap: 20px !important; margin-top: 28px !important; }
  .app-hero__stat .v { font-size: 22px !important; }
  .app-hero__stat .l { font-size: 10.5px; margin-top: 6px; letter-spacing: 0.1em; }

  /* Phone plate: stop forcing 420px rigid height; let image drive */
  .app-hero__phone { height: auto !important; min-height: 320px; padding: 24px 0 0; }
  .app-hero__phone-img { width: 72% !important; max-width: 320px; }
  .app-hero__badge { top: 16px; right: 16px; max-width: 180px; padding: 8px 12px; gap: 10px; font-size: 11px; }
  .app-hero__badge-icon { width: 34px; height: 34px; }
  .app-hero__badge strong { font-size: 13px; }
  .app-hero__badge .meta { font-size: 10.5px; }

  /* Download strip inside hero — stack cleanly */
  .app-hero__dl { padding: 18px 0; }
  .app-hero__dl-inner { gap: 14px !important; }
  .app-hero__dl-label { font-size: 11px; width: 100%; }
  .app-hero__dl-stores { width: 100%; gap: 10px; flex-wrap: wrap; }
  .app-hero__dl-store { flex: 1 1 calc(50% - 5px); min-width: 0; padding: 10px 12px 10px 12px; gap: 8px; }
  .app-hero__dl-store svg { width: 20px; height: 20px; }
  .app-hero__dl-store .name { font-size: 14px; }
  .app-hero__dl-store .os { font-size: 9px; }
  .app-hero__dl-text { width: 100% !important; padding: 6px 6px 6px 16px; }
  .app-hero__dl-text input { width: auto !important; flex: 1; font-size: 14px; min-width: 0; }
  .app-hero__dl-text button { padding: 8px 14px; font-size: 13px; }

  /* Screens section is already 1-col at ≤900; tighten paddings */
  .app-screens { padding: 60px 0 !important; }
  .app-screens__head { margin-bottom: 40px !important; }
  .app-screen { padding: 28px 22px 0 !important; }
  .app-screen__head { min-height: 0 !important; padding-bottom: 14px; }
  .app-screen__title { font-size: 22px !important; margin: 10px 0 8px !important; }
  .app-screen__desc { font-size: 14px; }
  .app-screen__phone { max-width: 220px !important; }

  /* Flow section: head stacks, card strip scrolls fine but padding tuned */
  .app-flow { padding: 60px 0 !important; }
  .app-flow__head { grid-template-columns: 1fr !important; gap: 16px !important; margin-bottom: 32px !important; }
  .app-flow__head h2 { font-size: clamp(32px, 7vw, 44px) !important; }
  .app-flow__head p { font-size: 14px; }
  .app-flow__strip { gap: 14px !important; padding-left: 16px !important; padding-right: 16px !important; }
  .app-flow__card { flex: 0 0 220px !important; padding: 16px 14px 18px !important; }

  /* Download card: already 1-col at ≤900; tune paddings, QR sizing */
  .app-dl-card { padding: 48px 0 !important; }
  .app-dl-card__copy { padding: 32px 22px !important; }
  .app-dl-card__copy h2 { font-size: clamp(30px, 7vw, 42px) !important; }
  .app-dl-card__copy p { font-size: 14.5px; margin-bottom: 24px; }
  .app-dl-card__checklist { gap: 10px; margin-bottom: 28px; }
  .app-dl-card__checklist li { font-size: 14px; }
  .app-dl-card__stores { gap: 10px; }
  .app-dl-card__store { padding: 10px 16px 10px 12px; gap: 10px; flex: 1 1 calc(50% - 5px); min-width: 0; }
  .app-dl-card__store svg { width: 22px; height: 22px; }
  .app-dl-card__store .name { font-size: 15px; }
  .app-dl-card__qr-wrap { min-height: 0 !important; padding: 36px 22px !important; gap: 24px !important; }
  .app-dl-card__app-icon img { width: 96px; height: 96px; border-radius: 22px; }
  .app-dl-card__qr { padding: 14px; }
  .app-dl-card__qr canvas, .app-dl-card__qr .qrbox { width: 108px !important; height: 108px !important; }

  /* FAQ mini */
  .app-faq { padding: 48px 0 !important; }
  .app-faq__head h2 { font-size: clamp(30px, 6vw, 40px) !important; }
  .app-faq__head p { font-size: 14.5px; }
  .app-faq__q { font-size: 15.5px; gap: 14px; }
  .app-faq__a { font-size: 14px; margin-top: 10px; }

  /* Footer CTA — form stacks (pill row was forcing overflow on <380) */
  .app-cta { padding: 60px 0 !important; }
  .app-cta h2 { font-size: clamp(36px, 9vw, 56px) !important; line-height: 1.0; }
  .app-cta p { font-size: 15px; margin: 18px auto 28px; }
  .app-cta__form {
    flex-direction: column;
    gap: 8px;
    border-radius: 18px;
    padding: 10px;
    max-width: 100%;
  }
  .app-cta__form input { padding: 12px 16px; width: 100%; text-align: center; }
  .app-cta__form button { width: 100%; padding: 14px; }
}

@media (max-width: 420px) {
  /* Very small phones: stores go single-column so text doesn't squish */
  .app-hero__dl-store { flex: 1 1 100%; }
  .app-dl-card__store { flex: 1 1 100%; }
  .app-hero__badge { max-width: 150px; font-size: 10.5px; }
}

/* ---------- Mobile: kill backdrop-filter on sticky site-nav ----------
   site2.css applies `backdrop-filter: saturate(160%) blur(14px)` to
   `.site-nav`. The element is position:sticky over scrolling content,
   which means the GPU has to recompute the blurred backdrop every
   animation frame the page scrolls. On mid-tier Android and iOS Safari
   this drops scroll FPS into the 20-30 range and produces the "page is
   fighting me" feel users reported. Solid near-opaque background reads
   indistinguishably at mobile nav text sizes (≤ 14 px). Desktop keeps
   the blur — the perf cost there is negligible and the visual is part
   of the brand.

   NOTE: `.announce-bar` is NOT included here. critical.css gives it a
   solid `var(--gw-charcoal)` background (dark green / charcoal) with
   white + yellow text — no backdrop-filter to kill, and overriding its
   background to white breaks the brand visual (yellow "Georgetown
   launch:" text on white reads as broken; should be on charcoal). */
@media (max-width: 768px) {
  .site-nav,
  .site-nav.is-scrolled {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(247, 247, 242, 0.97) !important;
  }
}