/* =========================================================
   On Time Solutions · style.css
   Tokens → base → components → sections → responsive → a11y
   ========================================================= */

/* ---------- FONTS ---------- */
@font-face { font-family:'Inter'; src:url('assets/fonts/Inter-Variable.ttf') format('truetype'); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('assets/fonts/Inter-Italic-Variable.ttf') format('truetype'); font-weight:100 900; font-style:italic; font-display:swap; }

/* ---------- TOKENS ---------- */
:root{
  --white:#FFFFFF; --bg-soft:#F7FAFD; --bg-muted:#F3F5F7; --line:#E7EBEE;
  --navy:#213883; --navy-deep:#24417C; --ink:#102136; --slate:#355575;
  --blue-mid:#3A5DA5; --blue-soft:#A2B6DF; --sky:#2F94C1; --lime:#8CC81F; --peach:#FFE8DA;
  --muted:rgba(16,33,54,.56);

  --sh-card:0 1px 2px rgba(16,33,54,.04), 0 10px 30px -12px rgba(34,56,101,.12);
  --sh-float:0 30px 80px -24px rgba(33,56,131,.28);

  --r-chip:999px; --r-card:20px; --r-media:20px; --r-cta:24px; --r-phone:44px;

  --container:1200px;
  --gutter:clamp(20px,6vw,96px);
  --sec-pad:clamp(96px,12vw,168px);
  --nav-h:72px;

  --ease-ios:cubic-bezier(.32,.72,0,1);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* ---------- BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip; scroll-behavior:auto; -webkit-text-size-adjust:100%}
body{
  margin:0; overflow-x:clip; background:var(--white); color:var(--slate);
  font-family:var(--font); font-size:17px; line-height:1.55; font-weight:400;
  font-optical-sizing:auto; font-feature-settings:'cv11'; -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%}
a{color:inherit}
button{font-family:inherit; color:inherit}
h1,h2,h3,p,ul,ol,figure,fieldset{margin:0}
ul,ol{padding:0; list-style:none}
fieldset{border:0; padding:0; min-width:0}
legend{padding:0}
:focus-visible{outline:2px solid var(--sky); outline-offset:3px; border-radius:6px}

.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:var(--sec-pad)}
.section-tight{padding-block:0 var(--sec-pad)}

/* JS-only hidden states (anti-FOUC). Without JS everything is visible. */
html.js .intro-hidden,
html.js .hero-h1,
html.js .split-h,
html.js .reveal{visibility:hidden}
html.js .hero-car,
html.js .hero-map{visibility:hidden}   /* revealed by the hero intro timeline */

/* ---------- LOADER ---------- */
html:not(.js) .loader{display:none}
.loader{position:fixed; inset:0; z-index:200; background:#fff; display:grid; place-content:center; justify-items:center; gap:22px}
.loader img{height:44px; width:auto}
.loader-bar{display:block; width:120px; height:3px; border-radius:999px; background:var(--bg-muted); overflow:hidden}
.loader-fill{display:block; height:100%; width:40%; border-radius:999px; background:var(--lime); animation:loaderSlide .9s cubic-bezier(.4,0,.2,1) infinite}
@keyframes loaderSlide{from{transform:translateX(-110%)} to{transform:translateX(280%)}}

/* ---------- TYPOGRAPHY ---------- */
.h1,.h2{color:var(--ink); font-variation-settings:'opsz' 32; text-wrap:pretty}
.h1{font-size:clamp(44px,5.4vw,84px); line-height:.98; letter-spacing:-.035em; font-weight:700}
.h2{font-size:clamp(36px,4.4vw,60px); line-height:1.02; letter-spacing:-.03em; font-weight:700}
.h3{font-size:16px; line-height:1.3; font-weight:600; color:var(--ink)}
.eyebrow{font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); margin-bottom:18px}
.body{font-size:17px; line-height:1.55; max-width:46ch; color:var(--slate)}
.small{font-size:13px; line-height:1.5}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums; font-feature-settings:'cv11','tnum'}
.w400{font-weight:400}
.w700{font-weight:700}
.h1 .w400,.h2 .w400{color:var(--ink)}
.h1 .w700,.h2 .w700{color:var(--navy)}

.sec-head{margin-bottom:clamp(40px,5vw,64px)}
.sec-head.left{max-width:520px}
.sec-head.center{text-align:center; margin-inline:auto; max-width:640px}
.sec-head.center .body{margin-inline:auto}
.sec-head .h2{margin-bottom:20px}

/* SplitText masks need block lines */
.split-h .line-mask,.hero-h1 .line-mask{display:block}

/* ---------- ICONS ---------- */
.ico{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex:none}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 22px;
  border-radius:var(--r-chip); font-weight:600; font-size:15px; line-height:1; text-decoration:none; border:0; cursor:pointer;
  white-space:nowrap; transition:transform .2s var(--ease-ios), background-color .2s, box-shadow .2s, color .2s;
}
.btn .ico{width:16px; height:16px}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--navy); color:#fff}
.btn-primary:hover{background:var(--navy-deep)}
.btn-accent{background:var(--sky); color:#fff; font-weight:700; font-size:18px; height:52px; padding:0 26px}
.btn-accent:hover{background:#2A86AF}
.btn-white{background:#fff; color:var(--navy)}
.btn-white:hover{background:var(--bg-soft)}
.btn-text{background:none; border:0; font-weight:600; font-size:15px; color:var(--slate); cursor:pointer; padding:0 8px; height:48px}
.btn-circle{width:40px; height:40px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--ink); background:#fff; transition:transform .2s var(--ease-ios), background-color .2s}
.btn-circle:hover{background:var(--bg-soft); transform:translateY(2px)}
.link-arrow{display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:14px; color:var(--navy); text-decoration:none; transition:gap .2s var(--ease-ios)}
.link-arrow:hover{gap:10px}
.link-arrow .ico{width:16px; height:16px}
.cta-row{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.cta-row.center{justify-content:center}

/* ---------- SEGMENTED CONTROL (iOS) ---------- */
.seg{position:relative; display:inline-flex; padding:3px; background:var(--bg-muted); border-radius:var(--r-chip); gap:2px; isolation:isolate}
.seg-thumb{position:absolute; top:3px; left:3px; height:calc(100% - 6px); width:0; background:#fff; border-radius:var(--r-chip); box-shadow:0 1px 3px rgba(16,33,54,.12), 0 4px 12px -4px rgba(16,33,54,.18); z-index:0; pointer-events:none}
.seg-btn{position:relative; z-index:1; background:none; border:0; height:26px; padding:0 14px; font-weight:500; font-size:13px; line-height:1; color:var(--slate); border-radius:var(--r-chip); cursor:pointer; transition:color .25s; white-space:nowrap}
.seg-btn.is-active{color:var(--ink)}
html:not(.js) .seg-btn.is-active{background:#fff}
.seg-lg .seg-btn{height:34px; padding:0 22px; font-size:14px}
.seg-form{display:flex; width:100%}
.seg-form .seg-btn{flex:1; height:42px; font-size:15px}

/* ---------- CHIPS ---------- */
.chips{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:28px}
.chip{height:32px; padding:0 14px; border-radius:var(--r-chip); font-weight:500; font-size:13px; background:var(--bg-muted); color:var(--slate); border:0; cursor:pointer; transition:background-color .2s, color .2s, transform .2s var(--ease-ios)}
.chip:hover{background:#E9EDF1}
.chip:active{transform:scale(.97)}
.chip.is-active{background:var(--navy); color:#fff}

.chip-glass{background:rgba(255,255,255,.78); -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%); border:1px solid rgba(255,255,255,.7); box-shadow:var(--sh-float)}
.dot-lime{width:8px; height:8px; border-radius:50%; background:var(--lime); display:inline-block; flex:none; box-shadow:0 0 0 3px rgba(140,200,31,.18)}

/* ---------- PHOTO SLOTS ---------- */
.slot{position:relative; background:var(--bg-muted); border:1px dashed rgba(47,148,193,.45); border-radius:var(--r-media); aspect-ratio:var(--ratio,16/10); display:grid; place-items:center; overflow:hidden; margin:0}
.slot-chip{font-size:11px; font-weight:500; line-height:1.35; color:var(--slate); background:#fff; padding:6px 10px; border-radius:var(--r-chip); box-shadow:var(--sh-card); text-align:center; max-width:86%; font-variant-numeric:tabular-nums}
.slot>img,.slot>video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.slot.filled{border-color:transparent; background:var(--bg-muted)}
.phone-screen>img{border-radius:34px}

/* ---------- PHONE (CSS) ---------- */
.phone{width:270px; will-change:transform}
.phone-inner{position:relative; aspect-ratio:9/16.4; border-radius:var(--r-phone); background:var(--ink); padding:10px; box-shadow:var(--sh-float)}
.phone-inner::before{content:''; position:absolute; top:20px; left:50%; width:90px; height:26px; margin-left:-45px; background:var(--ink); border-radius:var(--r-chip); z-index:2}
.phone-screen{position:absolute; inset:10px; border-radius:34px; overflow:hidden; aspect-ratio:auto; border-color:transparent}
.phone-screen .slot-chip{max-width:78%}

/* ---------- NAV ---------- */
.nav{position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:50; background:transparent; border-bottom:1px solid transparent; transition:background-color .3s, border-color .3s, -webkit-backdrop-filter .3s, backdrop-filter .3s}
.nav.is-scrolled{background:rgba(255,255,255,.78); -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%); border-bottom-color:var(--line)}
.nav-inner{height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px}
.nav-logo img{height:36px; width:auto}
.nav-links{display:flex; gap:28px}
.nav-links a{font-size:13px; font-weight:500; color:var(--slate); text-decoration:none; transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-actions{display:flex; align-items:center; gap:12px}
.lang{display:inline-flex; align-items:center; gap:2px; font-size:12px; font-weight:600; color:var(--muted); margin-right:6px}
.lang-btn{background:none; border:0; padding:6px 6px; cursor:pointer; color:var(--muted); font-weight:600; font-size:12px; letter-spacing:.04em; border-radius:6px; transition:color .2s}
.lang-btn:hover,.lang-btn.is-active{color:var(--ink)}
.lang-sep{color:var(--line)}
.nav-cta{height:40px; padding:0 18px; font-size:14px}
.nav-cta .ico{width:14px; height:14px}
.nav-burger{display:none; width:44px; height:44px; background:none; border:0; cursor:pointer; padding:0; flex-direction:column; align-items:center; justify-content:center; gap:6px}
.nav-burger span{display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease-ios)}
.nav-burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* Mobile sheet */
.sheet-backdrop{position:fixed; inset:0; background:rgba(16,33,54,.3); z-index:60; opacity:0; visibility:hidden; transition:opacity .35s, visibility 0s .35s}
.sheet-backdrop.is-open{opacity:1; visibility:visible; transition:opacity .35s, visibility 0s}
.sheet{position:fixed; left:0; right:0; bottom:0; z-index:61; background:#fff; border-radius:28px 28px 0 0; padding:12px 24px calc(28px + env(safe-area-inset-bottom)); transform:translateY(100%); visibility:hidden; transition:transform .45s var(--ease-ios), visibility 0s .45s; box-shadow:0 -20px 60px -30px rgba(16,33,54,.3)}
.sheet.is-open{transform:none; visibility:visible; transition:transform .45s var(--ease-ios), visibility 0s}
.sheet-handle{width:36px; height:5px; border-radius:var(--r-chip); background:#D9DFE5; margin:0 auto 20px}
.sheet-links{display:flex; flex-direction:column}
.sheet-links a{font-size:20px; font-weight:600; color:var(--ink); text-decoration:none; padding:14px 0; border-bottom:1px solid var(--line)}
.sheet-cta{margin-top:20px; width:100%}

/* ---------- HERO ---------- */
.hero{position:relative; min-height:100svh; overflow:hidden; background:var(--white)}
.hero-inner{position:relative; z-index:3; min-height:100svh; display:grid; grid-template-columns:repeat(12,1fr); align-items:center; padding-top:var(--nav-h); padding-bottom:200px; column-gap:24px}
.hero-text{grid-column:1/8}
.hero-toggle{margin-bottom:22px}
.hero-eyebrow{margin-bottom:22px}
.hero-h1{margin-bottom:24px}
.hero-p{margin-bottom:32px}

/* Map: faint street grid on the right half, fading out radially */
.hero-map-wrap{position:absolute; left:50%; right:0; top:0; height:70%; z-index:0; pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse at 60% 40%, #000 40%, transparent 75%); mask-image:radial-gradient(ellipse at 60% 40%, #000 40%, transparent 75%)}
.hero-map{width:100%; height:100%}

/* Two floating glass chips (iOS notifications) over the map, around the car */
.hero-chips{position:absolute; left:50%; right:0; top:0; height:70%; z-index:4; pointer-events:none; perspective:800px}
/* No backdrop-filter on these two: the map arrow animates underneath them and would force a re-blur every frame */
.hero-chip{position:absolute; display:flex; align-items:center; gap:10px; border-radius:16px; padding:12px 16px; font-size:13px; color:var(--ink); will-change:transform; transform-style:preserve-3d; background:rgba(255,255,255,.94); -webkit-backdrop-filter:none; backdrop-filter:none}
.hero-chip-1{left:9%; top:40%}
.hero-chip-2{right:6%; top:22%; flex-direction:column; align-items:flex-start; gap:2px}
.chip-txt strong{font-weight:600}
.chip-time{color:var(--muted); font-variant-numeric:tabular-nums; margin-left:6px}
.chip-big{font-weight:700; font-size:22px; letter-spacing:-.02em; line-height:1}
.chip-sub{font-size:12px; color:var(--muted)}

/* Car: top view on the right side, bigger than the frame and cropped mid-body (like the MINI reference).
   The wrap spans nav → trust row; the image is 170% of that height and the wrap clips it with a soft fade. */
/* No mask-image and no filter:blur here: both forced ~2s re-rasters of this large layer. The fade is a white gradient overlay. */
.hero-car-wrap{position:absolute; left:73%; top:48%; bottom:0; width:28vw; translate:-50% 0; z-index:2; pointer-events:none}   /* .hero clips the bottom; no overflow here so the slide-in from the right stays visible */
/* The white fade is a static sibling (not inside the wrap): the car scrolls up underneath it, the fade stays put */
.hero-fade{position:absolute; left:0; right:0; bottom:0; height:220px; z-index:3; pointer-events:none; background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 72%)}
.hero-car{position:relative; will-change:transform}
.car-img{width:100%; height:auto; display:block; position:relative; z-index:1}
.car-floor{position:absolute; left:6%; right:-20%; top:2%; bottom:-4%; z-index:0; border-radius:50% / 8%; background:radial-gradient(ellipse at 45% 50%, rgba(16,33,54,.22) 0%, rgba(16,33,54,.11) 34%, rgba(16,33,54,.03) 58%, rgba(16,33,54,0) 72%)}

.trust-row-wrap{position:absolute; left:0; right:0; bottom:48px; z-index:4}
.trust-row{display:flex; align-items:center; justify-content:space-between; gap:12px; overflow-x:auto; scrollbar-width:none}   /* safety net: never clips, scrolls if a translation runs long */
.trust-row::-webkit-scrollbar{display:none}
.trust-item{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:500; color:var(--slate); padding:10px 14px; border-radius:14px; white-space:nowrap}
.trust-item .ico{width:22px; height:22px; color:#9AA6B8; transition:color .2s}
.trust-item:hover .ico{color:var(--navy)}
.trust-item.is-active{background:#fff; box-shadow:var(--sh-card)}
.trust-item.is-active .ico{color:var(--sky)}
.trust-arrow{padding:0}
/* Spanish labels run longer: tighten the row so all 7 items + arrow still fit on one line */
.trust-item{padding:10px 6px; gap:5px}
html[lang="es"] .trust-item{font-size:11px}
.trust-item .ico{width:20px; height:20px}
.trust-row{gap:2px}

/* ---------- APP ---------- */
.app-grid{display:grid; grid-template-columns:55fr 45fr; gap:clamp(32px,5vw,80px); align-items:center}
.app-phones{position:relative; height:560px}
.app-phones .phone{position:absolute}
.phone-back{left:0; top:16%; width:250px}
.phone-front{left:40%; top:0; width:270px; z-index:2}
html:not(.js) .phone-back{transform:rotate(-16deg)}
html:not(.js) .phone-front{transform:rotate(-8deg)}
.app-text .h2{margin-bottom:22px}
.app-p{margin-bottom:32px}

/* ---------- FEATURES ---------- */
.features-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px}
.f-card{will-change:transform}
.card-inner{height:100%; aspect-ratio:1/1.08; background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:22px; display:flex; flex-direction:column; justify-content:space-between; transition:box-shadow .35s, border-color .35s}
.f-icon{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--tint); color:var(--ic)}
.f-icon .ico{width:20px; height:20px; transition:transform .35s var(--ease-ios)}
.f-card .h3{max-width:10ch}
/* GSAP owns .card-inner's transform (exit staircase), so hover lifts via shadow + icon only */
@media (hover:hover) and (pointer:fine){
  .card-inner:hover{box-shadow:var(--sh-float); border-color:transparent}
  .card-inner:hover .f-icon .ico{transform:rotate(8deg)}
}

/* ---------- GALLERY ---------- */
.gal-head .body{margin-bottom:0}
/* one grid, every photo the same size; filtered results stay centered and large */
.gal-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:16px}
.gal-item{width:calc((100% - 32px) / 3); border-radius:16px; will-change:transform}
.gal-cap{position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:8px 10px; padding:48px 14px 12px; color:#fff; background:linear-gradient(to bottom, rgba(16,33,54,0), rgba(16,33,54,.78)); font-size:14px; line-height:1.25; text-align:left}
.gal-cap strong{font-weight:600; flex:1 1 150px; text-shadow:0 1px 2px rgba(0,0,0,.25)}
.gal-cap span{flex:none; font-size:11px; font-weight:600; letter-spacing:.04em; padding:4px 9px; border-radius:var(--r-chip); background:rgba(255,255,255,.92); color:var(--ink)}
.gal-row-2 .gal-cap{font-size:12px; padding:36px 12px 10px}
.gal-row-2 .gal-cap span{font-size:10px; padding:3px 7px}
.gal-more{text-align:center; margin-top:40px}

/* ---------- ROUTE (pinned) ---------- */
.route{position:relative; background:var(--white)}
.route-pin{height:100svh; display:flex; align-items:center; padding-block:calc(var(--nav-h) + 24px) 40px}
.route-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,80px); align-items:center}
.route-svg{width:100%; max-width:560px; height:auto; margin-inline:auto; overflow:visible}
.route-text .h2{margin-bottom:40px}
.steps{display:flex; flex-direction:column; gap:28px}
.step{position:relative; display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start; color:var(--ink)}
.step-n{font-size:13px; font-weight:500; color:var(--muted); font-variant-numeric:tabular-nums; padding-top:6px}
.step-t{font-size:22px; line-height:1.15; letter-spacing:-.015em; font-weight:400; color:var(--ink); margin-bottom:6px}
.step .small{color:var(--slate)}
.step-line{display:none}

/* ---------- REQUIREMENTS (device) ---------- */
.device{position:relative; border-radius:32px; border:10px solid var(--line); background:#fff; box-shadow:var(--sh-float); padding:clamp(24px,4vw,48px); overflow:hidden}
.req-grid{display:grid; grid-template-columns:28fr 44fr 28fr; gap:clamp(20px,3vw,40px); align-items:center}
.req-left{display:flex; flex-direction:column; gap:26px}
.bar{display:flex; flex-direction:column; gap:8px}
.bar-label{font-size:13px; color:var(--muted); font-weight:500}
.bar-track{display:block; position:relative; height:44px; border-radius:22px; background:var(--bg-muted); overflow:hidden}
.bar-fill{display:block; height:100%; width:100%; border-radius:22px; background:var(--ink); transform-origin:left center; transform:scaleX(var(--f,1))}
.bar-pct{position:absolute; top:50%; left:calc(var(--f,1) * 100%); translate:calc(-100% - 14px) -50%; font-size:13px; font-weight:600; color:#fff; white-space:nowrap}
.bar-value{font-size:14px; font-weight:600; color:var(--ink)}

.req-center{position:relative; display:grid; place-items:center; min-height:520px}
.req-lines{position:absolute; inset:0; width:100%; height:100%; z-index:0}
.ring{position:absolute; left:50%; top:50%; border-radius:50%; background:var(--lime); translate:-50% -50%; z-index:0; pointer-events:none}
.ring-1{width:76%; aspect-ratio:1; opacity:.22}
.ring-2{width:112%; aspect-ratio:1; opacity:.12}
.ring-3{width:148%; aspect-ratio:1; opacity:.06}
.req-car{position:relative; z-index:1; width:min(100%,300px)}
.top-svg{width:100%; height:auto; filter:drop-shadow(0 30px 40px rgba(16,33,54,.22))}
.hotspot-lines{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible}
.hotspot{position:absolute; left:calc(100% - 6px); translate:0 -50%; display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border-radius:var(--r-chip); background:#fff; box-shadow:var(--sh-card); font-size:12px; font-weight:500; color:var(--ink); white-space:nowrap}
.hotspot em{font-style:normal; color:var(--muted); font-weight:400}
.hs-1{top:41.25%}
.hs-2{top:57.9%}
.hs-3{top:74.2%}
.req-right{display:flex; flex-direction:column; gap:26px}
.stat{display:flex; flex-direction:column; gap:4px}
.stat-label{font-size:13px; color:var(--muted); font-weight:500}
.stat-value{font-size:28px; font-weight:700; color:var(--ink); letter-spacing:-.02em; line-height:1.1}
.req-bottom{display:flex; justify-content:center; margin-top:clamp(24px,4vw,40px)}

/* ---------- EARNINGS ---------- */
.earn-grid{display:grid; grid-template-columns:5fr 7fr; gap:clamp(32px,6vw,96px); align-items:center}
.earn-big,.earn-mid{display:flex; flex-direction:column}
.earn-num{font-size:clamp(96px,12vw,168px); font-weight:700; color:var(--ink); line-height:.9; letter-spacing:-.045em}
.earn-num2{font-size:clamp(56px,7vw,88px); font-weight:700; color:var(--slate); line-height:.95; letter-spacing:-.04em; margin-top:28px}
.earn-label{font-size:13px; font-weight:500; color:var(--muted); margin-top:10px}
.earn-right .h2{margin-bottom:22px}
.earn-right .body{margin-bottom:40px}
.day-bar{display:grid; grid-template-columns:repeat(12,1fr); gap:3px; height:44px}
.day-bar span{border-radius:6px}
.seg-am,.seg-pm{background:var(--lime)}
.seg-mid{background:repeating-linear-gradient(135deg, var(--line) 0 4px, transparent 4px 10px)}
.seg-off{background:var(--bg-muted)}
.day-labels{display:grid; grid-template-columns:repeat(12,1fr); gap:3px; margin-top:10px}
.day-l{grid-column:calc(var(--s) + 1) / calc(var(--e) + 1); font-size:12px; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.day-l.muted{color:var(--muted)}
.day-ticks{display:flex; justify-content:space-between; margin-top:14px; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums}

/* ---------- FIT FILTER ---------- */
.fit-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.fit-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:28px}
.fit-card .h3{font-size:18px; margin-bottom:18px}
.fit-list{display:flex; flex-direction:column; gap:12px}
.fit-list li{display:flex; align-items:center; gap:12px; font-size:15px; color:var(--slate)}
.fit-list .ico{width:18px; height:18px; stroke-width:2.2}
.fit-list.yes .ico{color:var(--lime)}
.fit-list.no .ico{color:var(--slate)}

/* ---------- TESTIMONIAL ---------- */
.testi-grid{display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(20px,4vw,48px); align-items:center}
.phone-testi{width:270px; margin-inline:auto}
.phone-testi .slot-chip{position:absolute; bottom:28px; left:50%; translate:-50% 0; width:max-content}
.play-btn{position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%; border:0; background:#fff; color:var(--ink); box-shadow:var(--sh-float); display:grid; place-items:center; cursor:pointer; transition:transform .2s var(--ease-ios)}
.play-btn:hover{transform:scale(1.05)}
.play-btn .ico{width:26px; height:26px; margin-left:3px}
.quote{border-radius:var(--r-card); padding:22px 24px; font-size:15px; color:var(--ink); will-change:transform}
.quote p{margin-bottom:12px; font-style:italic; line-height:1.5}
.quote footer{font-size:12px; font-weight:500; color:var(--muted); font-style:normal}

/* ---------- APPLY ---------- */
.apply-grid{display:grid; grid-template-columns:5fr 7fr; gap:clamp(32px,5vw,80px); align-items:start}
.apply-img{position:sticky; top:calc(var(--nav-h) + 24px)}
.apply-form-wrap .h2{margin-bottom:14px}
.apply-micro{margin-bottom:28px}
.sheet-card{position:relative; background:#fff; border:1px solid var(--line); border-radius:28px; padding:32px 28px 24px; box-shadow:var(--sh-card); overflow:hidden}
.progress{position:absolute; top:0; left:0; right:0; height:4px; background:var(--bg-muted)}
.progress-fill{display:block; height:100%; width:100%; background:var(--lime); transform-origin:left center; transform:scaleX(.16)}
.steps-viewport{position:relative; min-height:200px}
.fstep{display:none}
.fstep.is-current{display:block}
.fstep.is-leaving{display:block; position:absolute; inset:0}
.fq{display:block; font-size:22px; font-weight:600; color:var(--ink); letter-spacing:-.015em; margin-bottom:22px}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.field-label{font-size:13px; font-weight:500; color:var(--muted)}
.field input,.field select{height:48px; border:1px solid var(--line); border-radius:14px; padding:0 14px; font:inherit; font-size:15px; color:var(--ink); background:#fff; width:100%; -webkit-appearance:none; appearance:none}
.field select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23355575' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 14px center; background-size:18px}
.field input:focus,.field select:focus{outline:2px solid var(--sky); outline-offset:1px; border-color:transparent}
.field input.is-invalid{border-color:#D9534F}
.nq{margin-top:12px; padding:18px; border-radius:16px; background:var(--bg-soft); border:1px solid var(--line)}
.nq .small{margin-bottom:14px; color:var(--slate)}
.nq-ok{color:var(--ink); font-weight:500; margin:12px 0 0 !important}
.form-error{color:#B4322E; margin:10px 0 0}
.form-nav{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px}
.fstep-success{text-align:center; padding:24px 0}
.success-check{width:80px; height:80px; margin:0 auto 20px}
.fstep-success .fq{margin-bottom:6px}
.apply-form.is-done .form-nav{display:none}

/* ---------- FAQ ---------- */
.faq-grid{display:grid; grid-template-columns:5fr 7fr; gap:clamp(32px,5vw,80px); align-items:start}
.acc-item{border-bottom:1px solid var(--line)}
.acc-item:first-child{border-top:1px solid var(--line)}
.acc-btn{width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 0; background:none; border:0; cursor:pointer; text-align:left; font-size:17px; font-weight:600; color:var(--ink)}
.acc-ico{width:20px; height:20px; color:var(--slate); will-change:transform}
.acc-panel{height:0; overflow:hidden}
.acc-panel .body{padding-bottom:22px; max-width:none}

/* ---------- CTA BLOCK ---------- */
.cta-sec{padding-block:0 var(--sec-pad)}
.cta-wrap{position:relative; will-change:transform}
.cta-shadow{position:absolute; inset:0; border-radius:var(--r-cta); box-shadow:var(--sh-float); opacity:0; pointer-events:none}
.cta-block{position:relative; min-height:300px; border-radius:var(--r-cta); background:linear-gradient(135deg,#213883 0%,#102136 100%); color:#fff; overflow:hidden; display:grid; place-items:center; padding:clamp(40px,6vw,72px) var(--gutter)}
.cta-arcs{position:absolute; right:-140px; bottom:-140px; width:420px; height:420px; transform-origin:center; will-change:transform}
.cta-content{position:relative; text-align:center; max-width:640px}
.cta-content .h2{color:#fff; margin-bottom:16px}
.cta-content .h2 .w400,.cta-content .h2 .w700{color:#fff}
.cta-content .body{color:rgba(255,255,255,.72); margin:0 auto 32px}

/* ---------- FOOTER ---------- */
.footer{padding-block:0 40px; background:var(--white)}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:40px; border-bottom:1px solid var(--line)}
.foot-col{display:flex; flex-direction:column; gap:10px; font-size:14px; color:var(--slate)}
.foot-col a{text-decoration:none; transition:color .2s}
.foot-col a:hover{color:var(--ink)}
.foot-h{font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); margin-bottom:4px}
.logo-pill{display:inline-flex; align-items:center; padding:10px 20px; background:#fff; border-radius:var(--r-chip); box-shadow:var(--sh-card); width:max-content; margin-bottom:8px}
.logo-pill img{height:32px; width:auto}
.foot-brand .small a{text-decoration:none}
.foot-bottom{padding-top:24px}

/* ---------- MOBILE STICKY CTA ---------- */
.sticky-cta{display:none}

/* ---------- GENERIC REVEAL / MISC ---------- */
.reveal{will-change:auto}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1279px){
  .hero-text{grid-column:1/8}
  /* Below 1280 the 7 trust items no longer fit on one line: scroll-snap carousel, same as mobile */
  .trust-row{overflow-x:auto; scroll-snap-type:x mandatory; justify-content:flex-start; gap:8px; padding:4px 2px 12px; -ms-overflow-style:none; scrollbar-width:none}
  .trust-row::-webkit-scrollbar{display:none}
  .trust-item{scroll-snap-align:start; flex:none}
  .trust-arrow{display:none}
}

@media (max-width:1023px){
  .nav-links,.nav-cta{display:none}
  .nav-burger{display:flex}
  .nav-logo img{height:30px}

  /* HERO: column order toggle → eyebrow → h1 → p → CTA → car → trust (flex order, car sits after the text) */
  .hero{min-height:auto; padding-bottom:0; display:flex; flex-direction:column}
  .hero-inner{order:1; display:block; min-height:auto; padding-top:calc(var(--nav-h) + 40px); padding-bottom:0}
  .hero-text{max-width:600px}
  .hero-car-wrap{order:2; position:relative; left:auto; top:auto; bottom:auto; translate:none; aspect-ratio:1000/1566; width:min(60vw,260px); margin:36px auto 0; z-index:2; overflow:hidden}
  .hero-car-wrap::after{content:''; position:absolute; left:0; right:0; bottom:0; height:42%; z-index:3; background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 88%)}
  .hero-fade{display:none}
  .hero-car{height:auto}
  .car-img{width:100%; height:auto}
  .trust-row-wrap{order:3; position:relative; bottom:auto; padding-block:12px 40px}
  /* map + chips live behind/over the car block at the bottom of the hero */
  .hero-map-wrap{left:0; top:auto; bottom:76px; height:min(94vw,410px); opacity:.6}
  .hero-chips{left:0; top:auto; bottom:76px; height:min(94vw,410px)}
  .hero-chip-1{left:4%; top:18%}
  .hero-chip-2{right:4%; top:50%; left:auto}
  .route-pin{height:auto; padding-block:var(--sec-pad)}
  .app-grid{grid-template-columns:1fr; gap:24px}
  .app-phones{height:560px; order:-1; transform:scale(.82); transform-origin:left top; margin-bottom:-80px}
  .phone-back{left:0}
  .phone-front{left:46%}

  .features-grid{grid-template-columns:1fr 1fr}
  .f-card:nth-child(5){grid-column:1/-1}
  .f-card:nth-child(5) .card-inner{aspect-ratio:auto; min-height:150px}
  .f-card:nth-child(5) .h3{max-width:none}
  .route-grid{grid-template-columns:1fr; gap:40px}
  .route-pin{min-height:auto}
  .route-svg{max-width:420px}
  .step-line{display:block; position:absolute; left:14px; top:34px; bottom:-28px; width:2px; height:auto}
  .step:last-child .step-line{display:none}
  .step{padding-left:0}

  .req-grid{grid-template-columns:1fr; gap:32px}
  .req-center{order:-1; min-height:auto; padding-block:24px}
  .req-car{width:min(100%,260px)}
  .req-right{flex-direction:row; flex-wrap:wrap; gap:20px 32px}
  .req-left{gap:18px}
  .req-bottom{position:sticky; bottom:12px}

  .earn-grid{grid-template-columns:1fr; gap:40px}
  .fit-grid{grid-template-columns:1fr}
  .testi-grid{grid-template-columns:1fr; justify-items:center}
  .quote{max-width:420px; width:100%}
  .apply-grid,.faq-grid{grid-template-columns:1fr; gap:32px}
  .apply-img{position:static; max-width:420px}
  .footer-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:767px){
  :root{--nav-h:64px}
  .h1{font-size:clamp(40px,11vw,56px)}
  .hero-eyebrow{font-size:10px; letter-spacing:.1em; white-space:nowrap}
  .hero-car-wrap{margin-top:16px}
  .app-phones{height:520px; transform:scale(.85); margin-bottom:40px}
  .phone-back{width:210px; left:0}
  .phone-front{width:230px; left:44%}
  .req-car{width:min(100%,200px)}
  .hotspot{left:calc(100% - 40px)}
  .hotspot em{display:none}
  .req-right{flex-direction:column; gap:16px}
  .stat-value{font-size:24px}
  .earn-num{font-size:clamp(84px,24vw,120px)}
  .day-l.muted{font-size:11px}
  .footer-grid{grid-template-columns:1fr}
  .sheet-card{padding:28px 20px 20px}
  .fq{font-size:20px}

  .seg-lg .seg-btn{padding:0 13px}
  .sticky-cta{display:block; position:fixed; left:0; right:0; bottom:0; z-index:40; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.78); -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%); border-top:1px solid var(--line); transform:translateY(110%); transition:transform .4s var(--ease-ios)}
  .sticky-cta .btn{width:100%}
  .sticky-cta.is-visible{transform:none}
  .cta-sec{padding-bottom:calc(var(--sec-pad) + 40px)}
}

/* ---------- REDUCED MOTION ---------- */
/* transition:none (not a tiny duration): a pending transition on `all` makes GSAP read stale computed values */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important; animation:none !important; scroll-behavior:auto !important}
}

/* ---------- GALLERY · tablet/mobile (2 columns, first photo full width) ---------- */
@media (max-width:1023px){
  .gal-grid{gap:12px}
  .gal-item{width:calc((100% - 12px) / 2)}
  .gal-item:first-child{width:100%}
  .gal-cap,.gal-row-2 .gal-cap{font-size:13px; padding:40px 12px 10px}
  .gal-row-2 .gal-cap span,.gal-cap span{font-size:10px; padding:3px 7px}
}
@media (max-width:767px){
  .chips{flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding:4px 2px 10px; scrollbar-width:none; -webkit-mask-image:linear-gradient(to right,#000 92%,transparent); mask-image:linear-gradient(to right,#000 92%,transparent)}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .gal-cap,.gal-row-2 .gal-cap{font-size:12px; flex-direction:column; flex-wrap:nowrap; align-items:flex-start; gap:6px; padding-top:34px}
  .gal-cap strong{flex:0 0 auto}
  .gal-cap span{align-self:flex-start}
  .gal-item:first-child .gal-cap{flex-direction:row; align-items:flex-end; font-size:14px}
}