* { box-sizing: border-box; }
body { margin:0; background:#fff; font-family:var(--font-body); color:#000; }
a { color:inherit; text-decoration:none; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:#e2e2e2; border-radius:8px; }
.noscroll { scrollbar-width:none; -ms-overflow-style:none; }
.noscroll::-webkit-scrollbar { display:none; }
.maxw { max-width:1200px; margin:0 auto; padding:0 32px; }
.navlink { padding:8px 12px; border-radius:9999px; font-size:15px; font-weight:500; color:#fff; background:transparent; border:none; cursor:pointer; font-family:inherit; transition:background-color .12s; }
.navlink:hover { background:rgba(255,255,255,.1); }
.nav-menu-btn { display:none; align-items:center; }
/* The booking phone sits right of the nav links and never wraps, so as the window
   narrows it used to run straight into the last link ("Support"). Shed width in
   stages instead of dropping the CTA: long label, then link padding, then the
   links move into the drawer, and only under 420px does the number itself go.
   The drawer copy (outside .nav-book-phone-wrap) always keeps the full label. */
/* The nav row is capped at 1440px, so the full "Call or text to book:" label never
   fits next to nine links at any window size — the top bar always shows the icon +
   number (full text stays in title/aria-label and in the drawer copy). */
.nav-book-phone-wrap .nav-book-phone-label { display:none; }
@media (max-width:1340px){
  .nav-center .navlink { padding-left:8px; padding-right:8px; font-size:14px; }
}
@media (max-width:1260px){
  .nav-center { display:none !important; }
  .nav-menu-btn { display:inline-flex !important; }
}
@media (max-width:560px){
  .nav-help { display:none !important; }
  .nav-language, .nav-auth-signup { display:none !important; }
  .maxw { padding-left:20px; padding-right:20px; }
}

/* ---- Phone nav row (≤820px) -------------------------------------------------
   The row is menu + wordmark on the left and phone + account + Log out on the
   right. The right half declares flex-shrink:0, so on a phone the left half
   absorbed the whole shortfall: it collapsed to ~47px while the wordmark kept
   its intrinsic 75px and spilled over the phone link ("Onway" printed on top of
   the booking number), and "Log out" still ran past the right edge on 430px
   devices. Nothing may shrink below its content here — instead each piece sheds
   what it can afford: the phone shows icon-only, the account name truncates,
   and below 560px the name drops entirely (avatar + Log out remain).
   ---------------------------------------------------------------------------- */
@media (max-width:820px){
  .site-nav-inner { gap:8px !important; }
  /* Menu button and wordmark keep their natural width — never crushed. */
  .nav-left { gap:10px !important; flex:0 0 auto; }
  .nav-left .onway-logo, .nav-menu-btn { flex:0 0 auto !important; }
  /* Right cluster may shrink, but only through the account name (below). */
  .nav-right { min-width:0; gap:2px !important; }
  .nav-book-phone-wrap, .nav-auth-logout, .nav-auth-login { flex:0 0 auto !important; }
  .nav-user { flex:0 1 auto; padding:0 4px !important; gap:6px !important; }
  .nav-user-name { max-width:22vw; }
  .nav-auth-logout, .nav-auth-login { padding-left:10px !important; padding-right:10px !important; }
}
/* Icon-only booking phone below 760px — the number itself is the widest thing
   in the row and the drawer keeps the full "Call or text to book: …" label. */
@media (max-width:760px){
  .nav-book-phone-wrap .nav-book-phone-text { display:none; }
}
/* Smallest phones: the account is the avatar alone (name lives in `title`). */
@media (max-width:560px){
  .nav-user-name { display:none; }
  .nav-user { padding:0 2px !important; }
}

/* The booking hero starts as a two-column desktop layout. Collapse it before
   either column can establish a wider-than-viewport minimum width. */
@media (max-width:1100px){
  body { overflow-x:clip; }
  .site-nav-inner { padding-left:20px !important; padding-right:20px !important; }
  .booking-hero { padding:36px 0 28px !important; }
  .booking-hero-grid {
    grid-template-columns:minmax(0, 1fr) !important;
    gap:0 !important;
    justify-content:stretch !important;
  }
  .booking-hero-copy,
  .booking-hero-form { min-width:0; max-width:none !important; }
  .booking-hero-city {
    gap:10px !important;
    margin-bottom:20px !important;
    font-size:16px !important;
    flex-wrap:wrap;
  }
  .booking-hero-heading {
    max-width:100% !important;
    font-size:clamp(42px, 12vw, 52px) !important;
    line-height:1.04 !important;
    margin-bottom:26px !important;
    overflow-wrap:anywhere;
  }
  .booking-hero-media { display:none !important; }
  .service-strip { padding-top:24px !important; padding-bottom:40px !important; }
  .service-strip-grid { display:grid !important; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:24px 12px !important; align-items:start !important; }
  .marketing-split { grid-template-columns:minmax(0, 1fr) !important; gap:32px !important; padding-top:48px !important; padding-bottom:48px !important; }
  .marketing-split-copy { min-width:0; }
  .marketing-split h1 { font-size:clamp(40px, 7vw, 52px) !important; }
  .marketing-split h2 { font-size:clamp(32px, 5vw, 42px) !important; }
  .marketing-media { width:100% !important; height:min(58vw, 360px) !important; }
  .marketing-actions { flex-wrap:wrap; gap:14px !important; }
  .site-footer-grid { grid-template-columns:repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width:760px){
  .booking-hero-city {
    gap:10px !important;
    margin-bottom:20px !important;
    font-size:16px !important;
    flex-wrap:wrap;
  }
  .booking-hero-heading { font-size:clamp(42px, 12vw, 52px) !important; }
  .marketing-split { padding-top:40px !important; padding-bottom:40px !important; }
  .marketing-media { height:min(72vw, 320px) !important; }
  /* Phones: turn the 11-item strip into a tidy horizontal scroll rail so it
     stays one row high and scannable instead of a 6-row grid with an orphan. */
  .service-strip { padding-top:20px !important; padding-bottom:36px !important; }
  .service-strip-grid {
    display:flex !important;
    grid-template-columns:none !important;
    gap:12px !important;
    align-items:flex-start !important;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    margin:0 -20px !important;
    padding:4px 20px 12px !important;
    scrollbar-width:none;
  }
  .service-strip-grid::-webkit-scrollbar { display:none; }
  .service-strip-grid .svc {
    flex:0 0 auto !important;
    width:82px;
    gap:10px;
    scroll-snap-align:start;
  }
  .svc img, .svc svg { width:60px; height:60px; }
  .svc span { font-size:13px; white-space:nowrap; }
  .site-footer-grid { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:28px 16px !important; }
}

.svc { display:grid; justify-items:center; gap:8px; flex:1; min-width:0; text-align:center; }
.svc img { height:72px; width:72px; object-fit:contain; display:block; }
.svc svg { height:72px; width:72px; display:block; }
.svc span { font-size:14px; font-weight:500; }
.foot-h { font-size:16px; font-weight:600; color:#fff; margin:0 0 16px; }
.foot-l { display:block; font-size:14px; color:#afafaf; padding:6px 0; transition:color .12s; }
.onway-radar { position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:9999px; background:rgba(0,0,0,.14); animation:onwayRadar 2.7s cubic-bezier(.2,.6,.3,1) infinite; }
@keyframes onwayRadar { 0% { transform:scale(1); opacity:.6; } 100% { transform:scale(2.6); opacity:0; } }
.foot-l:hover { color:#fff; }
h1,h2,h3 { font-family:var(--font-display); }
.reveal { opacity:0; transform:translateY(30px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1 !important;transform:none !important;transition:none;} }
.faq { border-top:1px solid #e6e6e6; }
.faq:last-child { border-bottom:1px solid #e6e6e6; }
.subnav a { font-size:14px; color:#5e5e5e; display:inline-flex; align-items:center; min-height:28px; }
.subnav a:hover { color:#000; }

/* ============================================================
   GLOBAL MOBILE SAFETY NET
   The marketing pages were authored desktop-first with inline
   fixed widths and 2/3-column grids. Many sections never received
   the responsive class hooks above, so on phones they exceed the
   viewport (horizontal scroll) and images blow out. These rules
   apply to EVERY marketing page and guarantee a single-column,
   no-horizontal-scroll layout with fluid media on small screens.
   ============================================================ */
/* overflow-x:hidden goes on <html> ONLY, never <body>. Putting it on body
   forces body's overflow-y to compute to `auto`, turning body into a clipping
   container — which hides Google Places autocomplete dropdowns (.pac-container
   is an absolute child of <body>) and broke the fare estimator. html-level
   clipping stops horizontal scroll without clipping body's popovers. */
html { max-width:100%; overflow-x:hidden; }
body { max-width:100%; }
img, video, svg, picture, canvas, iframe { max-width:100%; }
img, video, picture { height:auto; }

@media (max-width:820px){
  /* Comfortable gutter on every centered container. */
  .maxw { padding-left:20px !important; padding-right:20px !important; }

  /* Collapse ANY inline multi-column grid to a single column. minmax(0,1fr)
     (not 1fr) clamps the track so a fixed-width child cannot grow it past the
     viewport — the classic mobile min-content blowout. Covers the bespoke
     sections (CheerCity, FAQ rows, card grids, standalone pages) that lack the
     .marketing-split hook. */
  [style*="grid-template-columns"] { grid-template-columns:minmax(0,1fr) !important; gap:24px !important; }

  /* Fixed-width media / float boxes go fluid instead of forcing overflow. */
  .onway-float, .marketing-media, [class*="-media"] { width:100% !important; max-width:100% !important; }

  /* Any element that still declares a hard pixel width caps to the column, and
     grid/flex children get a 0 min-width so they can shrink below content size. */
  section [style*="width:"], .maxw [style*="width:"] { max-width:100% !important; }
  .maxw *, section * { min-width:0; }

  /* Section vertical rhythm tightens on phones. */
  section[style*="padding:64px"], section[style*="padding: 64px"] { padding-top:44px !important; padding-bottom:44px !important; }

  /* Entrance animations must never leave content invisible on phones. If the
     IntersectionObserver is slow or an element loads already in-view, the
     opacity:0 start state reads as a huge blank gap. Force everything visible. */
  .reveal { opacity:1 !important; transform:none !important; }
}

/* Sticky bottom CTA must never let its own height cover page content or
   sit under a phone's home indicator. */
@media (max-width:820px){
  .onway-sticky-cta { padding-bottom:env(safe-area-inset-bottom, 0) !important; height:auto !important; min-height:56px !important; }
  /* Reserve space for the sticky bar via the BODY only. The Shell's own inner
     56px padding is zeroed on phones so it doesn't add a second white strip
     between the (black) footer and the CTA. Space = bar height + safe area. */
  .onway-shell { padding-bottom:0 !important; }
  body { padding-bottom:calc(56px + env(safe-area-inset-bottom, 0)) !important; }
}

/* ============================================================
   MOBILE VISUAL POLISH (≤820px) — rhythm, fluid type, tap targets.
   Layered on top of the safety net so every page reads as a
   deliberately designed phone layout, not a shrunk desktop.
   ============================================================ */
@media (max-width:820px){
  /* Fluid headings: never overflow, never look oversized on small screens. */
  section h1, .maxw h1 { font-size:clamp(32px, 8.6vw, 52px) !important; line-height:1.07 !important; letter-spacing:-0.03em; overflow-wrap:anywhere; }
  section h2, .maxw h2 { font-size:clamp(26px, 6.6vw, 40px) !important; line-height:1.14 !important; letter-spacing:-0.02em; overflow-wrap:anywhere; }
  section h3, .maxw h3 { font-size:clamp(19px, 4.8vw, 30px) !important; line-height:1.22 !important; }
  /* Body copy stays comfortably ≥15px. */
  section p, .maxw p { font-size:clamp(15px, 4vw, 18px) !important; }

  /* Big editorial heroes tighten to a comfortable phone rhythm. */
  .maxw[style*="88px"], .maxw[style*="72px"], .maxw[style*="76px"] { padding-top:48px !important; padding-bottom:48px !important; }
  section[style*="88px 32px"] .maxw, section[style*="padding:88px"] .maxw { padding-top:48px !important; padding-bottom:48px !important; }

  /* Tap targets ≥44px for interactive chrome. */
  .navlink { min-height:44px; display:inline-flex; align-items:center; }
  .subnav a { display:inline-flex; align-items:center; min-height:40px; }

  /* Primary buttons read full-width and finger-friendly on phones. */
  .booking-hero-form .onway-cta,
  .booking-hero-form .onway-cta > button { width:100%; }
}

/* ============================================================
   MOBILE FOOTER — compact, tight, and flush to the content.
   Placed after the safety net so these win by source order:
   the generic [style*="grid-template-columns"] collapse would
   otherwise force the 5 footer columns into a single tall stack.
   ============================================================ */
@media (max-width:820px){
  /* 1) Kill the white void: the footer's inline marginTop:64 let the white
     body show through above the black footer. Butt it right up to the last
     section (which on the homepage is already black). */
  footer { margin-top:0 !important; }
  footer > .maxw { padding-top:40px !important; padding-bottom:32px !important; }

  /* 2) Compact 2-column grid instead of a full-width single-column stack. */
  .site-footer-grid {
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:26px 20px !important;
  }
  .foot-h { margin:0 0 8px !important; font-size:15px !important; }
  .foot-l { padding:6px 0 !important; font-size:14px !important; }

  /* Wordmark + Help link sit tighter to the columns. */
  footer > .maxw > a[href="/"] { font-size:22px !important; }
  footer > .maxw > a[href="/help"] { margin:18px 0 30px !important; }
  footer > .maxw > p:last-child { margin-top:32px !important; padding-top:24px !important; }

  /* 3) The last footer link must never hide under the sticky CTA. The body
     padding-bottom above already reserves bar height + safe area; give the
     copyright row a little extra breathing room from that reserved band. */
  footer > .maxw > p:last-child { margin-bottom:8px !important; }
}

/* ============================================================
   PRODUCT-PAGE SUB-NAV (drive/ride/etc.) — mobile
   The inline link row overflowed on phones and, because the global
   min-width:0 lets flex children shrink below their text, the labels
   collapsed into each other (overlapping, unreadable). Make it a
   horizontal scroll rail: links keep full width, never shrink, and
   the row scrolls sideways instead of overlapping.
   ============================================================ */
@media (max-width:820px){
  .subnav { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:18px !important; }
  .subnav::-webkit-scrollbar { display:none; }
  .subnav > * { flex:0 0 auto !important; }
  .subnav a { flex:0 0 auto !important; white-space:nowrap; }
}

/* ── Text contrast ───────────────────────────────────────────────────────────
   Measured on every marketing page at 414px and 1440px, against the backdrop
   actually painted behind each run rather than against an assumed white.

   Three greys sit under WCAG AA at the sizes they are used: #8a8a8a (3.45:1)
   on the tier descriptions and fare notes, #8b8b8b (3.41:1) on step counters
   and captions, #9a9a9a (2.9:1). They are set inline per element, so they are
   matched on the inline declaration. #6a6a6a clears 5:1 on white and 4.7:1 on
   the #f6f6f4 panels these mostly sit on. */
body [style*="color: rgb(138, 138, 138)"],
body [style*="color: rgb(139, 139, 139)"],
body [style*="color: rgb(154, 154, 154)"] { color: #6a6a6a !important; }

/* The accent green as body text: 2.1:1 on white. Fills and icons keep the
   bright brand green — only text moves, same rule the apps follow. */
body [style*="color: rgb(85, 201, 54)"] { color: #15703f !important; }