/* ==========================================================================
   Yango design system — ported 1:1 from src/styles.css (Tailwind source).
   Values here are the literal computed desktop output of the Tailwind
   utilities/clamps used across the homepage, so widgets can reference these
   classes directly via Elementor's "CSS Classes" control instead of
   re-approximating typography per-widget.
   ========================================================================== */

:root{
  --ink:#0A0A0A;
  --ink-2:#141414;
  --paper:#F7F7F3;
  --soft:#ECEDE8;
  --line:#E1E2DD;
  --brand:#A1D809;
  --brand-deep:#8FC206;
  --mutedtext:#6B6D67;
  --hero-bg:#080808;
}

/* Hello Elementor's parent-theme reset.css hardcodes a rose/pink hover+focus
   background (rgb(204,51,102)) on every native <button>/[type=button]/
   [type=submit] site-wide (.hiw-tab, .faq-trigger, .faq-chips button,
   .header-burger, …) — it wins by default on any button whose own CSS
   doesn't set an explicit :hover background, since that reset rule and a
   plain custom class rule land at equal specificity and reset.css loads
   first. This child stylesheet loads after it, so an equal-specificity
   override here wins via cascade order and neutralises the pink everywhere;
   each component below then layers its own real hover styling back on top. */
button:hover, button:focus,
[type="button"]:hover, [type="button"]:focus,
[type="submit"]:hover, [type="submit"]:focus{
  background-color:transparent; color:inherit; text-decoration:none;
}

/* ---------- base ---------- */
/* Several raw-HTML widgets (e.g. the route-merge diagram's CSS grid) have
   intrinsic content wider than their box on narrow viewports — clipped
   visually by their own container, but still inflating html/body's
   scrollWidth and making the whole page horizontally scrollable/draggable.
   This is the blanket guarantee: no element anywhere can ever open a
   horizontal scrollbar on the document, regardless of what overflows. */
html, body{ overflow-x:hidden; max-width:100%; }
body{ font-family:"Manrope",ui-sans-serif,system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4{ font-family:"Manrope",ui-sans-serif,system-ui,sans-serif; letter-spacing:-0.035em; text-wrap:balance; }
::selection{ background:var(--brand); color:#0a0a0a; }

/* ---------- layout ---------- */
.container-y{ width:100%; margin-inline:auto; max-width:1360px; padding-inline:20px; }
@media (min-width:768px){ .container-y{ padding-inline:32px; } }
@media (min-width:1024px){ .container-y{ padding-inline:48px; } }
@media (min-width:1440px){ .container-y{ padding-inline:64px; } }

.section-y{ padding-block:76px; }
@media (min-width:768px){ .section-y{ padding-block:104px; } }
@media (min-width:1024px){ .section-y{ padding-block:136px; } }

.measure{ max-width:660px; }

/* ---------- color utilities ---------- */
.text-ink{ color:var(--ink); } .text-white{ color:#fff; }
.text-brand{ color:var(--brand); } .text-brand-deep{ color:var(--brand-deep); }
.text-muted{ color:var(--mutedtext); }
.text-white-90{ color:rgba(255,255,255,.9); } .text-white-68{ color:rgba(255,255,255,.68); }
.text-white-60{ color:rgba(255,255,255,.6); } .text-white-55{ color:rgba(255,255,255,.55); }
.text-white-50{ color:rgba(255,255,255,.5); } .text-white-45{ color:rgba(255,255,255,.45); }
.bg-ink{ background:var(--ink); } .bg-paper{ background:var(--paper); }
.bg-soft{ background:var(--soft); } .bg-white{ background:#fff; }
.bg-hero{ background:var(--hero-bg); } .bg-safety{ background:#F0F1EC; }

/* ---------- typography scale (desktop-cap values from the Tailwind clamp()s) ---------- */
.eyebrow{ display:inline-block; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--mutedtext); margin:0; }
.eyebrow.dark{ color:rgba(255,255,255,.55); }

.display-1{ font-size:84px; line-height:0.98; font-weight:800; letter-spacing:-0.04em; margin:0; }
.display-2{ font-size:57.6px; line-height:1.02; font-weight:800; letter-spacing:-0.035em; margin:0; }
.hero-h1-v3{ font-size:82px; line-height:0.98; font-weight:800; letter-spacing:-0.04em; margin:0; }
.body-lg{ font-size:19px; line-height:1.65; margin:0; }
.hero-sub-v3{ font-size:21px; line-height:1.375; font-weight:600; margin:0; }
.hero-body-v3{ font-size:18px; line-height:1.55; margin:0; max-width:540px; }

@media (max-width:1023px){
  .display-1{ font-size:45.6px; }
  .display-2{ font-size:34.4px; }
  .hero-h1-v3{ font-size:44px; }
  .body-lg{ font-size:17px; }
}

/* ---------- buttons ---------- */
.cta{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:10px; font-weight:700; letter-spacing:-0.01em; transition:all .2s; text-decoration:none; height:54px; padding:0 28px; font-size:15px; }
.cta:hover{ transform:translateY(-2px); }
.cta-primary{ background:var(--brand); color:var(--ink); }
.cta-primary:hover{ background:var(--brand-deep); }
.cta-secondary{ border:1px solid rgba(10,10,10,.25); color:var(--ink); background:transparent; }
.cta-secondary:hover{ border-color:var(--ink); }
.cta-secondary-dark{ border:1px solid rgba(255,255,255,.35); color:#fff; background:transparent; }
.cta-secondary-dark:hover{ border-color:#fff; }
.arrow-link{ display:inline-flex; align-items:center; gap:8px; border-bottom:1px solid rgba(10,10,10,.2); padding-bottom:4px; font-size:14px; font-weight:700; color:var(--ink); text-decoration:none; transition:color .2s,border-color .2s; }
.arrow-link:hover{ border-color:var(--brand); color:var(--brand-deep); }
.arrow-link.dark{ color:#fff; border-color:rgba(255,255,255,.25); }
.arrow-link.dark:hover{ border-color:var(--brand); color:var(--brand); }

/* ---------- scroll reveal (matches Reveal component) ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .62s cubic-bezier(.22,1,.36,1), transform .62s cubic-bezier(.22,1,.36,1); }
.reveal[data-shown="true"]{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1 !important; transform:none !important; } }

/* ---------- GSAP scroll-reveal layer (SiteMotion.tsx, simplified) ----------
   Once yango-g3d.js activates, it becomes the sole driver of section entrance
   animation — the plain .reveal fade/rise is neutralised here (forced visible,
   no CSS transition) so it doesn't fight GSAP's inline-styled tween on the
   same element. Reveal's own descendant-scoped effects (e.g. the MergeRoutes
   SVG draw-in) are untouched since those animate different properties.
   No perspective/preserve-3d here on purpose — the original had a 3D "card
   flip" (z-depth + rotateX) that was dropped after it caused real buttons to
   stop working, likely a GPU-compositing/hit-testing quirk from stacking
   perspective+preserve-3d contexts under interactive elements. Plain
   opacity+y doesn't need either property. */
.g3d-active .reveal{ opacity:1; transform:none; transition:none; }

/* ---------- hero cinematic entrance ---------- */
@keyframes hv3-rise{ from{ opacity:0; transform:translateY(var(--hv3-y,20px)); } to{ opacity:1; transform:none; } }
@keyframes hv3-img{ from{ opacity:0; transform:scale(1.04); } to{ opacity:1; transform:scale(1); } }
@keyframes hv3-draw{ to{ stroke-dashoffset:0; } }
.hv3-in{ opacity:0; animation:hv3-rise .75s cubic-bezier(.22,1,.36,1) forwards; }
.hv3-img-in{ animation:hv3-img 1.2s cubic-bezier(.22,1,.36,1) both; }
.hv3-path{ stroke-dasharray:1000; stroke-dashoffset:1000; animation:hv3-draw 1.5s cubic-bezier(.5,0,.2,1) .5s forwards; }

/* ==========================================================================
   Bespoke component graphics (hero visual, seat transform, route match,
   phone mockups) — transcribed 1:1 from src/components/site/visuals.tsx
   ========================================================================== */

/* Hero section shell — the visual bleeds to the section's own top/right/bottom
   edges (matches HomeHero's `absolute inset-y-0 right-0 w-[60%]`), so it must be
   positioned against the SECTION, not nested in the padded boxed text column. */
.hero-relative{ position:relative; min-height:calc(100vh - 80px); }
.hero-visual-bleed{ position:absolute; top:0; right:0; bottom:0; width:60%; overflow:hidden; }
.hero-visual-bleed.w54{ width:54%; }
/* Share & Earn hero photo: plain object-fit cover + directional gradient
   (no route/card overlay needed here, unlike the homepage hero). */
.se-hero-img{ position:relative; width:100%; height:100%; overflow:hidden; }
.se-hero-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.se-hero-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(to right, #0A0A0A 0%, rgba(10,10,10,.6) 40%, rgba(10,10,10,.1) 100%); }
@media (max-width:1023px){ .se-hero-img::after{ background:linear-gradient(to top, #0A0A0A 0%, rgba(10,10,10,.75) 60%, transparent 100%); } }
/* CSS percentage heights need every ancestor in the chain to have a defined
   (non-auto) height, or they resolve to 0 — Elementor's own widget wrapper divs
   default to height:auto, which silently collapsed .hv{height:100%} to 0. */
.hero-visual-bleed > .elementor-element,
.hero-visual-bleed .elementor-widget-html,
.hero-visual-bleed .elementor-widget-container{ height:100%; }
.hero-strip-bleed{ position:absolute; left:0; right:0; bottom:0; }
@media (max-width:1023px){
  .hero-visual-bleed{ display:none; }
  .hero-relative{ min-height:0; }
}

/* Hero visual */
.hv{ position:relative; width:100%; height:100%; overflow:hidden; border-radius:40px 0 0 0; background-size:cover; background-position:62% center; background-repeat:no-repeat; }
.hv::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,#080808 0%,rgba(8,8,8,.92) 12%,rgba(8,8,8,.45) 35%,rgba(8,8,8,0) 60%); }
.hv::after{ content:""; position:absolute; inset-inline:0; bottom:0; height:46%; background:linear-gradient(to top,rgba(8,8,8,.85),rgba(8,8,8,0)); }
/* The route band: SVG + nodes + labels + notification card all live INSIDE this
   confined lower band (matches HeroVisual's nested `absolute right-0 bottom-0
   left-0 h-[230px] ... lg:bottom-[150px]` > `relative h-full w-full` wrapper).
   Their top:%/left:% values below are relative to .hv-band-inner's own box —
   NOT the full-height image — which is what keeps them clustered in the lower
   third of the photo instead of spreading across its full height. */
.hv-route{ position:absolute; left:56px; right:56px; bottom:150px; height:230px; padding-bottom:40px; z-index:2; }
.hv-band-inner{ position:relative; height:100%; width:100%; }
.hv-node{ position:absolute; width:10px; height:10px; border-radius:999px; transform:translate(-50%,-50%); }
.hv-label{ position:absolute; border-radius:6px; background:rgba(0,0,0,.55); padding:4px 8px; font:700 10px/1 Manrope,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.9); backdrop-filter:blur(6px); white-space:nowrap; }
.hv-card{ position:absolute; top:8%; left:30%; width:220px; max-width:62%; border-radius:12px; border:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.7); padding:12px; backdrop-filter:blur(10px); }
.hv-card .row{ display:flex; align-items:center; gap:10px; }
.hv-card .badge{ display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:999px; background:var(--brand); font:800 11px/1 Manrope,sans-serif; color:#080808; flex-shrink:0; }
.hv-card p{ margin:0; font-family:Manrope,sans-serif; }
.hv-card .name{ font-size:12px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hv-card .sub{ font-size:11px; color:rgba(255,255,255,.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hv-card .matched{ margin-top:8px; display:flex; align-items:center; gap:6px; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--brand); }
.hv-seats{ position:absolute; bottom:32px; right:32px; text-align:right; font-family:Manrope,sans-serif; z-index:2; }
.hv-seats .lbl{ margin:0; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45); }
.hv-seats .dots{ margin-top:8px; display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.hv-seats .dot{ width:10px; height:10px; border-radius:999px; }
.hv-seats .count{ margin-left:4px; font-size:12px; font-weight:700; color:rgba(255,255,255,.85); }
.hv-seats .note{ margin-top:4px; font-size:11px; color:rgba(255,255,255,.45); }
@media (max-width:1023px){
  .hv{ min-height:400px; border-radius:24px; }
  .hv-route{ left:20px; right:20px; bottom:24px; height:150px; }
  .hv-seats{ right:20px; bottom:24px; }
}

/* Hero eyebrow / cta row */
.hero-eyebrow-row{ display:flex; align-items:center; gap:12px; }
.hero-eyebrow-row .rule{ display:inline-block; width:28px; height:1px; background:var(--brand); }
.hero-cta-row{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.hero-note-row{ display:flex; align-items:center; gap:8px; }

/* Story strip */
.hero-strip-item{ padding:24px 32px; }
.hero-strip-item.bordered{ border-left:1px solid rgba(255,255,255,.1); }
.hero-strip-item .n{ margin:0; font-size:11px; font-weight:800; letter-spacing:.14em; color:var(--brand); }
.hero-strip-item .t{ margin:8px 0 0; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; }
.hero-strip-item .b{ margin:4px 0 0; font-size:13px; color:rgba(255,255,255,.5); }

/* Seat transform */
.st-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; border-top:1px solid rgba(255,255,255,.12); padding:20px 0; font-family:Manrope,sans-serif; }
.st-row:last-child{ border-bottom:1px solid rgba(255,255,255,.12); }
.st-label{ font-size:14px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.st-state{ font-size:14px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.st-state.shared{ color:var(--brand); }
.st-state.empty{ color:rgba(255,255,255,.4); }

/* Route match */
.rm-stop{ position:absolute; display:flex; align-items:center; gap:12px; }
.rm-dot{ width:12px; height:12px; flex-shrink:0; border-radius:999px; border:2px solid var(--ink); background:#fff; }
.rm-stop-label{ font-size:14px; font-weight:700; white-space:nowrap; color:var(--ink); font-family:Manrope,sans-serif; }
.rm-caption{ position:absolute; width:100%; transform:translateX(-50%); text-align:center; }
.rm-caption .cap{ margin:0; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); font-family:Manrope,sans-serif; }
.rm-caption .sub{ margin:2px 0 0; font-size:10px; color:var(--mutedtext); font-family:Manrope,sans-serif; }

/* Phone mockups */
.phone-frame{ width:260px; margin:0; font-family:Manrope,sans-serif; }
.phone-shell{ border-radius:34px; border:1px solid rgba(255,255,255,.15); background:#1b1b1b; padding:10px; }
.phone-screen{ position:relative; aspect-ratio:9/19; overflow:hidden; border-radius:26px; background:var(--paper); }
.phone-caption{ margin-top:16px; text-align:center; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.5); }

/* Journeys grid */
.journey-tag{ margin:20px 0 0; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--mutedtext); }
.journey-route{ margin:8px 0 0; font-size:16px; font-weight:800; color:var(--ink); }
.journey-copy{ margin:8px 0 0; font-size:14px; line-height:1.5; color:var(--mutedtext); }

/* Footer */
/* Floating panel: rounded top corners lift the footer off whatever section
   sits above it instead of a flat colour cut — a small, deliberate "modern
   footer" cue that costs nothing structurally (same section, just a radius). */
.site-footer-panel{ border-radius:32px 32px 0 0; overflow:hidden; }

.footer-wordmark{ margin:0; font-family:Manrope,sans-serif; font-size:96px; line-height:.85; font-weight:800; color:#fff; }
.footer-tagline{ margin:20px 0 0; font-family:Manrope,sans-serif; font-size:16px; color:rgba(255,255,255,.6); max-width:320px; }
.footer-cta{
  display:inline-flex; align-items:center; gap:8px; margin-top:28px; height:46px; padding:0 22px;
  border-radius:10px; background:var(--brand); color:var(--ink); font-family:Manrope,sans-serif;
  font-size:14px; font-weight:700; text-decoration:none; transition:transform .2s,background .2s;
}
.footer-cta:hover{ background:var(--brand-deep); transform:translateY(-2px); }

.footer-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; font-family:Manrope,sans-serif; }
.footer-cols h3{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.4); margin:0 0 18px; }
.footer-cols ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.footer-cols a{ color:rgba(255,255,255,.75); text-decoration:none; font-size:14px; transition:color .2s; }
.footer-cols a:hover{ color:var(--brand); }
@media (max-width:767px){ .footer-cols{ grid-template-columns:repeat(2,1fr); } }

.footer-bottom-inner{ display:flex; flex-direction:column; gap:28px; }
.footer-legal-row{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:20px; row-gap:10px; }
.footer-legal-label{ font-family:Manrope,sans-serif; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.3); }
/* Separator is a ::after on each <li>, not a standalone list item — a
   standalone "dot" li can wrap onto its own line separately from the text
   it's meant to sit next to (a lone "·" stranded at the start of a wrapped
   line). A pseudo-element can never detach from its own element like that. */
.footer-legal-strip{ display:flex; flex-wrap:wrap; align-items:center; row-gap:8px; list-style:none; margin:0; padding:0; font-family:Manrope,sans-serif; }
.footer-legal-strip li{ display:flex; align-items:center; }
.footer-legal-strip li:not(:last-child)::after{ content:"\00b7"; margin:0 14px; color:rgba(255,255,255,.18); }
.footer-legal-strip a{ color:rgba(255,255,255,.42); text-decoration:none; font-size:12px; white-space:nowrap; transition:color .2s; }
.footer-legal-strip a:hover{ color:rgba(255,255,255,.8); }

.footer-bottom{ display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; font-family:Manrope,sans-serif; }
.footer-bottom p{ color:rgba(255,255,255,.45); font-size:14px; margin:0; }
.footer-bottom-right{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.footer-totop{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; color:rgba(255,255,255,.45); text-decoration:none; font-size:13px; font-weight:700; transition:color .2s; }
.footer-totop:hover{ color:#fff; }
.footer-social{ display:flex; gap:8px; list-style:none; margin:0; padding:0; }
.footer-social a{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.7); text-decoration:none; font-size:11px; font-weight:700; transition:border-color .2s,color .2s,transform .2s; }
.footer-social a:hover{ border-color:rgba(255,255,255,.4); color:#fff; transform:translateY(-2px); }

/* Sticky, transparent-over-hero header (matches src/components/site/Header.tsx).
   Text/background colour depend on which hero the header sits over — driven by
   the `hero-dark`/`hero-lime` body classes added in functions.php, mirroring
   Header.tsx's `darkHeroRoutes`/`limeHeroRoutes` sets exactly. Default (no
   class) = light hero = dark/ink type, matching every page NOT in those sets. */
.site-header-fixed{
  position:fixed !important; top:0; left:0; right:0; width:100%; z-index:999;
  background-color:transparent !important;
  border-bottom:1px solid transparent;
  transition:background-color .3s ease, backdrop-filter .3s ease, border-color .3s ease;
}
.site-header-fixed.is-scrolled{
  background-color:rgba(247,247,243,.94) !important;
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border-bottom-color:var(--line);
}
body.hero-dark .site-header-fixed.is-scrolled{
  background-color:rgba(8,8,8,.94) !important;
  border-bottom-color:rgba(255,255,255,.1);
}
body.hero-lime .site-header-fixed.is-scrolled{
  background-color:rgba(161,216,9,.94) !important;
  border-bottom-color:rgba(10,10,10,.1);
}

/* Logo: "yan" part switches ink/white; the "go" accent is brand green normally,
   but on the lime hero (FAQ) that green would sit on a same-colour background
   and vanish, so it drops to plain ink there instead — matches the spirit of
   Header.tsx switching to a flat single-colour logo image on the lime route. */
.site-logo .elementor-heading-title{ color:var(--ink) !important; }
body.hero-dark .site-logo .elementor-heading-title{ color:#fff !important; }
body.hero-lime .site-logo .text-brand{ color:var(--ink) !important; }

/* Header logo image swap: dark-lettered version by default (readable over
   the light/lime heroes), white-lettered version on hero-dark pages (readable
   over the dark hero + its dark scrolled backdrop) — mirrors the rules above,
   just for the raster logo instead of the old text heading. */
.header-logo-white{ display:none; }
body.hero-dark .header-logo-dark{ display:none; }
body.hero-dark .header-logo-white{ display:block; }

/* Header CTA: bg-brand/text-ink normally, but flips to bg-ink/text-white on the
   lime hero (Header.tsx's `onLime` branch) — otherwise a green button on a
   green hero is nearly invisible. */
body.hero-lime .header-cta-desktop .elementor-button{ background-color:var(--ink) !important; color:#fff !important; }

/* Safety hero: dark overlay over the full-bleed photo. Elementor's own
   position:absolute control only pins from one edge at a time via offset_x/
   offset_y (no true inset:0), so — same fix as the homepage hero bleed — a
   dedicated CSS class is the reliable way to get a full-cover overlay. */
.safety-hero-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.42); background:linear-gradient(to top, rgba(8,8,8,.6), rgba(0,0,0,.42) 60%); }

/* MergeRoutes (How It Works hero) — scroll-triggered draw-in, matching the
   source's useInView + stroke-dashoffset animation exactly: driver+passenger
   lines draw together over 1.4s, the merged lime segment draws over 0.8s
   starting after that, then the "Matched by Yango" pill fades up 2s in.
   Reuses the same .reveal[data-shown] IntersectionObserver already wired in
   yango.js — no new JS needed, just hooking into the existing mechanism. */
.mr-driver, .mr-passenger{ stroke-dasharray:600; stroke-dashoffset:600; transition:stroke-dashoffset 1.4s cubic-bezier(.22,1,.36,1); }
.mr-merged{ stroke-dasharray:80; stroke-dashoffset:80; transition:stroke-dashoffset .8s ease-in-out 1.4s; }
.reveal[data-shown="true"] .mr-driver,
.reveal[data-shown="true"] .mr-passenger,
.reveal[data-shown="true"] .mr-merged{ stroke-dashoffset:0; }
.mr-pill{ opacity:0; transform:translate(-50%, 60%); transition:opacity .5s ease 2s, transform .5s ease 2s; }
.reveal[data-shown="true"] .mr-pill{ opacity:1; transform:translate(-50%, 50%); }

/* How It Works — driver/passenger tab toggle */
.hiw-toggle{ display:inline-flex; border-radius:12px; border:1px solid var(--line); background:#fff; padding:4px; }
.hiw-tab{
  height:48px; border-radius:9px; padding:0 24px; font-family:Manrope,sans-serif; font-size:14px; font-weight:700;
  color:var(--mutedtext); background:none; border:none; cursor:pointer; transition:background .2s, color .2s;
}
.hiw-tab.active{ background:var(--ink); color:#fff; }
.hiw-tab:hover{ color:var(--ink); background:rgba(10,10,10,.06); }
.hiw-tab.active:hover{ background:var(--ink); color:#fff; }
.hiw-panel{ display:none; }
.hiw-panel.active{ display:block; }
.hiw-timeline{ position:relative; margin-top:56px; max-width:720px; padding-left:40px; }
.hiw-timeline::before{ content:""; position:absolute; top:8px; bottom:24px; left:7px; width:2px; background:var(--line); }
.hiw-step{ position:relative; padding-bottom:40px; }
.hiw-step:last-child{ padding-bottom:0; }
.hiw-step::before{ content:""; position:absolute; top:6px; left:-40px; width:16px; height:16px; border-radius:999px; border:3px solid var(--brand); background:#fff; }
.hiw-step .n{ margin:0; font-family:monospace; font-size:12px; font-weight:700; color:var(--mutedtext); }
.hiw-step h3{ margin:6px 0 0; font-family:Manrope,sans-serif; font-size:20px; font-weight:800; color:var(--ink); }
.hiw-step p{ margin:8px 0 0; font-family:Manrope,sans-serif; font-size:15px; line-height:1.65; color:var(--mutedtext); max-width:520px; }
.hiw-cta{ display:none; }
.hiw-cta.active{ display:inline-flex; }

/* EarningStrip (Share & Earn hero) — static "shown" end-state */
.earning-strip{ display:flex; flex-wrap:wrap; align-items:center; gap:32px 48px; }
.earning-strip .label{ margin:0; font-family:Manrope,sans-serif; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.4); }
.earning-strip .seats{ display:flex; gap:6px; margin-top:12px; }
.earning-strip .seats svg{ width:26px; height:26px; }
.earning-strip .caption{ margin:12px 0 0; font-family:Manrope,sans-serif; font-size:13px; font-weight:700; color:rgba(255,255,255,.7); }
.earning-strip .chevron{ color:rgba(255,255,255,.25); font-size:24px; }
.earning-strip .result-label{ margin:0; font-family:Manrope,sans-serif; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.4); }
.earning-strip .result{ margin:12px 0 0; font-family:Manrope,sans-serif; font-size:15px; font-weight:800; color:var(--brand); }

/* Contact form (matches src/routes/contact.tsx's validation + success swap) */
.cf-field{ display:block; }
.cf-label{ display:block; margin-bottom:8px; font-family:Manrope,sans-serif; font-size:13px; font-weight:700; color:var(--ink); }
.cf-input{
  width:100%; min-height:48px; border-radius:10px; border:1px solid var(--line); background:#fff;
  padding:12px 16px; font-family:Manrope,sans-serif; font-size:14px; color:var(--ink); box-sizing:border-box;
}
.cf-input:focus{ border-color:var(--ink); outline:none; }
.cf-input::placeholder{ color:rgba(107,109,103,.7); }
textarea.cf-input{ resize:vertical; }
.cf-error{ display:none; margin-top:6px; font-family:Manrope,sans-serif; font-size:12px; color:#dc2626; }
.cf-field.has-error .cf-input{ border-color:#dc2626; }
.cf-field.has-error .cf-error{ display:block; }
.cf-row2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:640px){ .cf-row2{ grid-template-columns:1fr; } }
.cf-form{ display:flex; flex-direction:column; gap:20px; margin-top:40px; }
.cf-success{ display:none; align-items:flex-start; gap:16px; border-left:2px solid var(--brand); background:var(--soft); padding:24px; margin-top:32px; }
.cf-success.shown{ display:flex; }
.cf-success svg{ flex-shrink:0; width:24px; height:24px; color:var(--brand-deep); margin-top:2px; }
.cf-success h3{ margin:0; font-family:Manrope,sans-serif; font-size:18px; font-weight:800; color:var(--ink); }
.cf-success p{ margin:8px 0 0; font-family:Manrope,sans-serif; font-size:14px; color:var(--mutedtext); }
.cf-success button{ margin-top:16px; border:none; background:none; border-bottom:1px solid rgba(10,10,10,.25); padding:0 0 2px; font-family:Manrope,sans-serif; font-size:14px; font-weight:700; color:var(--ink); cursor:pointer; transition:border-color .2s,color .2s; }
.cf-success button:hover{ background:none; border-color:var(--brand); color:var(--brand-deep); }
.cf-channels ul{ list-style:none; margin:24px 0 0; padding:0; }
.cf-channels li{ border-top:1px solid var(--line); padding:20px 0; }
.cf-channels li:last-child{ border-bottom:1px solid var(--line); }
.cf-channels .ct{ margin:0; font-family:Manrope,sans-serif; font-size:14px; font-weight:700; color:var(--ink); }
.cf-channels .cc{ margin:4px 0 0; font-family:Manrope,sans-serif; font-size:14px; color:var(--mutedtext); word-break:break-word; }

/* FAQ accordion (matches src/components/ui/accordion.tsx: single-open,
   chevron rotates 180deg, content height-animates open/closed). */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-trigger{
  display:flex; width:100%; align-items:center; justify-content:space-between; gap:16px;
  padding:24px 0; background:none; border:none; cursor:pointer; text-align:left;
  font-family:Manrope,sans-serif; font-size:18px; font-weight:700; color:var(--ink);
  transition:color .2s;
}
.faq-trigger:hover{ background:none; color:var(--brand-deep); }
.faq-trigger-text{ flex:1; min-width:0; }
.faq-chevron{ flex-shrink:0; width:16px; height:16px; transition:transform .2s ease; color:var(--mutedtext); }
.faq-item.open .faq-chevron{ transform:rotate(180deg); }
.faq-content{ overflow:hidden; max-height:0; transition:max-height .25s ease; }
.faq-item.open .faq-content{ max-height:400px; }
.faq-content-inner{ padding:0 0 24px; font-family:Manrope,sans-serif; font-size:15px; line-height:1.65; color:var(--mutedtext); }
.faq-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.faq-chips button{
  border-radius:999px; background:var(--ink); padding:10px 16px; font-family:Manrope,sans-serif;
  font-size:13px; font-weight:700; color:#fff; border:none; cursor:pointer; transition:opacity .2s;
}
.faq-chips button:hover{ background:var(--ink); opacity:.85; }

/* Header nav */
.site-nav{ display:flex; align-items:center; gap:32px; justify-content:flex-end; flex-wrap:wrap; }
.site-nav a{ color:rgba(10,10,10,.7); text-decoration:none; font-weight:600; font-size:14px; font-family:Manrope,sans-serif; transition:color .2s; }
.site-nav a:hover{ color:var(--ink); }
body.hero-dark .site-nav a{ color:rgba(255,255,255,.75); }
body.hero-dark .site-nav a:hover{ color:#fff; }

/* ==========================================================================
   MOBILE (≤1023px) — ported 1:1 from Header.tsx / HomeHero.tsx's `lg:` splits.
   ========================================================================== */

/* Header: nav + CTA hide, hamburger shows, height drops to 68px (h-[68px] vs
   lg:h-[80px]) — confirmed against the live source at 375px: 69px measured. */
@media (max-width:1023px){
  .header-row{ min-height:68px !important; }
  .site-nav, .header-cta-desktop{ display:none !important; }
  .header-burger{ display:flex !important; }
  .site-logo .elementor-heading-title{ font-size:26px !important; }
  .header-inner-pad{ padding-left:20px !important; padding-right:20px !important; }
}
@media (min-width:768px) and (max-width:1023px){
  .header-inner-pad{ padding-left:32px !important; padding-right:32px !important; }
}
@media (min-width:1024px){
  .header-burger{ display:none !important; }
}
.header-burger{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:10px; border:1px solid var(--line);
  color:var(--ink); background:transparent; cursor:pointer; padding:0;
  transition:border-color .2s;
}
.header-burger:hover{ background:transparent; border-color:var(--ink); }
body.hero-dark .header-burger:hover{ border-color:#fff; }
body.hero-dark .header-burger{ border-color:rgba(255,255,255,.3); color:#fff; }
body.hero-dark .site-header-fixed.is-scrolled .header-burger,
body.menu-open .header-burger{ border-color:var(--line); color:var(--ink); }
.header-burger svg{ width:20px; height:20px; }
.header-burger .icon-close{ display:none; }
body.menu-open .header-burger .icon-menu{ display:none; }
body.menu-open .header-burger .icon-close{ display:block; }

/* Mobile nav — slide-in side panel + backdrop. Printed in wp_footer by
   functions.php, deliberately outside every Elementor container (see that
   hook's comment: the old in-header el_html() version got its position:fixed
   box clipped to ~20px by Elementor's own widget-wrapper overflow — this
   sidesteps that class of bug rather than patching around it). Both pieces
   toggle off body.menu-open, set by initMobileMenu() in yango.js, which is
   also the single source of truth the burger icon-swap rules above key off. */
.mobile-menu-backdrop{
  position:fixed; inset:0; z-index:9998; background:rgba(10,10,10,.55);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s;
}
body.menu-open .mobile-menu-backdrop{ opacity:1; visibility:visible; transition:opacity .3s ease; }

.mobile-menu{
  position:fixed; top:0; right:0; bottom:0; z-index:9999;
  width:min(85vw, 360px); background:var(--paper);
  display:flex; flex-direction:column; overflow-y:auto;
  box-shadow:-32px 0 64px -24px rgba(10,10,10,.4);
  transform:translateX(100%); transition:transform .4s cubic-bezier(.22,1,.36,1);
}
body.menu-open .mobile-menu{ transform:translateX(0); }

.mobile-menu-head{ display:flex; justify-content:flex-end; padding:20px 20px 0; }
.mobile-menu-close{
  display:flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:10px; border:1px solid var(--line); background:none; color:var(--ink);
  cursor:pointer; padding:0; transition:border-color .2s,transform .2s;
}
.mobile-menu-close:hover{ border-color:var(--ink); transform:rotate(90deg); }
.mobile-menu-close svg{ width:18px; height:18px; }

.mobile-menu-inner{ padding:8px 24px 24px; display:flex; flex-direction:column; flex:1; }
.mobile-menu-inner a.mm-link{
  display:block; padding:14px 0; border-bottom:1px solid var(--line);
  font-family:Manrope,sans-serif; font-size:20px; font-weight:800; letter-spacing:-0.02em; color:var(--ink); text-decoration:none;
  transition:color .2s;
}
.mobile-menu-inner a.mm-link:hover{ color:var(--brand-deep); }
.mobile-menu-ctas{ margin-top:28px; display:flex; flex-direction:column; gap:12px; }
.mobile-menu-ctas a{
  display:flex; align-items:center; justify-content:center; height:54px; border-radius:10px;
  font-family:Manrope,sans-serif; font-size:15px; font-weight:700; text-decoration:none; transition:transform .2s;
}
.mobile-menu-ctas a:hover{ transform:translateY(-2px); }
.mobile-menu-ctas a.primary{ background:var(--brand); color:var(--ink); }
.mobile-menu-ctas a.secondary{ border:1px solid rgba(10,10,10,.25); color:var(--ink); }
body.menu-open{ overflow:hidden; }
@media (min-width:1024px){ .mobile-menu, .mobile-menu-backdrop{ display:none !important; } }

/* Hero: desktop bleed image already hidden ≤1023px (see .hero-visual-bleed rule
   above). Text column goes full-width, and a separate COMPACT visual (ml-5
   h-[400px] rounded-tl/bl-[24px], NOT full-bleed) is shown below the CTA/note,
   followed by the mobile stacked story list instead of the desktop 3-col strip. */
@media (max-width:1023px){
  .hero-relative{ padding-top:0; }
  .hero-text-col{ width:100% !important; max-width:100% !important; }
  .hero-boxed-pad{ padding:56px 20px 0 20px !important; }
  /* Any container that sets its own explicit left/right padding (Safety +
     Share & Earn hero inner, Home's "Become a Yango Partner" panel) needs an
     explicit mobile override too — unlike .sec-pad sections (which rely on
     el_boxed()'s own 20px mobile gutter and deliberately carry zero
     horizontal padding of their own), these set padding directly on a
     column/inner container, so nothing else resets it for mobile. Missing
     this is what squished the Chairman's Message/Future Expansion sections
     and this panel into an unreadably narrow column. */
  .hero-h-pad{ padding-left:20px !important; padding-right:20px !important; }
  .driver-panel-pad{ padding-left:20px !important; padding-right:20px !important; padding-top:56px !important; padding-bottom:56px !important; }
  .hero-strip-bleed{ position:static !important; }
  .hero-strip-desktop{ display:none !important; }
  .hero-strip-mobile{ display:flex !important; }
  .hv-mobile-wrap{ display:block !important; }
}
@media (min-width:1024px){
  .hero-strip-mobile{ display:none !important; }
  .hv-mobile-wrap{ display:none !important; }
}
.hero-strip-mobile{ display:none; flex-direction:column; }
.hero-strip-mobile .row{ display:flex; gap:16px; padding:20px 0; border-top:1px solid rgba(255,255,255,.1); }
.hero-strip-mobile .row:first-child{ border-top:1px solid rgba(255,255,255,.1); }
.hero-strip-mobile .n{ margin:0; font-size:11px; font-weight:800; letter-spacing:.14em; color:var(--brand); }
.hero-strip-mobile .t{ margin:0; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; }
.hero-strip-mobile .b{ margin:4px 0 0; font-size:13px; color:rgba(255,255,255,.5); }

/* ml-5 (20px left), flush right — but this wrapper lives inside the text
   column's own 20px padding (built for construction simplicity vs. matching
   the source's exact DOM nesting), which would otherwise double the left
   inset and clip the right edge. margin-left:0 (parent padding already gives
   the 20px) + a negative right margin canceling that same padding reproduces
   the source's asymmetric left-inset/right-flush bleed exactly. */
.hv-mobile-wrap{ display:none; margin:32px -20px 0 0; }
.hv-mobile-wrap .hv{ height:400px; border-radius:24px 0 0 24px; }
/* Matches HomeHero.tsx's compact HeroVisual exactly: the route band is
   flush to the bottom of .hv (not offset — the box model here is padding,
   not a position inset, so .hv-band-inner's height:100% shrinks correctly),
   and the seat state sits ABOVE it (bottom:150px = the route band's own
   height), left-aligned — not right-aligned/bottom-aligned like desktop,
   which is what made these two blocks overlap into a jumbled mess before. */
.hv-mobile-wrap .hv-route{ left:0; right:0; bottom:0; height:150px; padding:0 20px 24px; }
.hv-mobile-wrap .hv-seats{ left:20px; right:auto; bottom:150px; text-align:left; }
.hv-mobile-wrap .hv-seats .dots{ justify-content:flex-start; }

/* Two-column rows stack to one column ≤1023px (Tailwind's `lg:grid-cols-2` etc.) */
@media (max-width:1023px){
  .stack-row{ flex-direction:column !important; }
  .stack-row > .e-con{ width:100% !important; }
}

/* Boxed containers carry zero horizontal padding by design (see el_boxed() in
   lib.php) — invisible on desktop where the max-width cap leaves its own
   margins, but needs an explicit gutter once the box is 100% of a narrow
   viewport. Mirrors container-y: 20px ≤767px, 32px 768–1023px. */
@media (max-width:767px){ .boxed-mobile-pad{ padding-inline:20px; } }
@media (min-width:768px) and (max-width:1023px){ .boxed-mobile-pad{ padding-inline:32px; } }

/* Section padding drops at narrower breakpoints (section-y: 76 / 104 / 136px) */
@media (max-width:767px){ .sec-pad{ padding-top:76px !important; padding-bottom:76px !important; } }
@media (min-width:768px) and (max-width:1023px){ .sec-pad{ padding-top:104px !important; padding-bottom:104px !important; } }

/* Journeys (4→2 col, gap 32px) / safety (4→2 col, gap 40px) grids ≤767px.
   Deduction needs headroom for whichever gap is in play — under-sizing by a
   few px just adds visual breathing room, but over-sizing by even 1px tips
   flex-wrap into bumping every item to its own row (confirmed: -16px exactly
   matched the 32px-gap grid but overflowed the 40px-gap one by 1px, wrapping
   all 4 icons to a single column instead of 2x2). */
@media (max-width:767px){
  .grid-2-mobile{ flex-wrap:wrap !important; }
  .grid-2-mobile > .e-con{ width:calc(50% - 24px) !important; }
}