@font-face { font-family: "Hayya Jost"; src: url("../assetsweb/fonts/jost/Jost-400-Book.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 400; }
@font-face { font-family: "Hayya Jost"; src: url("../assetsweb/fonts/jost/Jost-600-Semi.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 600 700; }

:root {
    --ink: #092e29; --ink-soft: #3f5853; --cream: #f3efe4; --sand: #d9cbb2; --coral: #f47c63; --white: #fff;
    --line: rgba(9, 46, 41, .18); --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-5: 3rem; --space-6: 5rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: "Hayya Jost", system-ui, sans-serif; font-size: 1rem; line-height: 1.6; }
html[dir="rtl"] body { font-family: Tahoma, Arial, sans-serif; }
a { color: inherit; } a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: .2rem solid var(--white); outline-offset: .25rem; border-radius: .2rem; box-shadow: 0 0 0 .4rem var(--ink); }
.skip-link { position: fixed; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); z-index: 100; padding: .75rem 1rem; color: var(--white); background: var(--ink); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.shell { width: min(76rem, calc(100% - 2rem)); margin-inline: auto; }
.site-header { position: absolute; inset: 0 0 auto; z-index: 10; color: var(--white); border-block-end: 1px solid rgba(255,255,255,.18); background: linear-gradient(rgba(4,24,21,.72), transparent); }
.nav-shell { min-height: 5.25rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand-logo { display: block; width: clamp(2.8rem, 4.2vw, 3.45rem); aspect-ratio: 1; height: auto; border: 1px solid rgba(255,255,255,.2); border-radius: .72rem; background: rgba(255,255,255,.08); object-fit: cover; box-shadow: 0 .9rem 1.7rem rgba(0,0,0,.18); }
.nav-panel { display: flex; align-items: center; gap: var(--space-4); }
.nav-links, .footer-links { display: flex; margin: 0; padding: 0; gap: .25rem; list-style: none; }
.nav-links a, .footer-links a { display: block; padding: .55rem .8rem; font-weight: 600; text-decoration: none; }
.nav-links a[aria-current="page"] { border-radius: 999px; background: rgba(255,255,255,.14); }
.language-switcher { display: flex; padding: .2rem; gap: .1rem; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; }
.language-switcher a { min-width: 2.35rem; padding: .32rem .52rem; border-radius: 999px; font-size: .72rem; font-weight: 700; text-align: center; text-decoration: none; }
.language-switcher a[aria-current="true"] { color: var(--ink); background: var(--white); }
.nav-toggle { display: none; border: 0; color: inherit; background: transparent; font: inherit; font-weight: 600; cursor: pointer; }
.nav-toggle-lines, .nav-toggle-lines::before, .nav-toggle-lines::after { display: block; width: 1.4rem; height: 2px; background: currentColor; }
.nav-toggle-lines { position: relative; } .nav-toggle-lines::before, .nav-toggle-lines::after { position: absolute; inset-inline-start: 0; content: ""; }
.nav-toggle-lines::before { inset-block-start: -.4rem; } .nav-toggle-lines::after { inset-block-start: .4rem; }

.hero { position: relative; isolation: isolate; min-height: min(56rem, 100svh); overflow: hidden; color: var(--white); background: #183b35; }
.hero-media, .hero-media picture, .hero-media img, .hero-vignette, .hero-glow { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media { z-index: -2; overflow: hidden; background: #183b35; }
.hero-media img { object-fit: cover; object-position: center; transform: scale(1.015); }
.hero:is([data-page="home"], [data-page="how-it-works"]) { background: radial-gradient(circle at 72% 52%, rgba(239,116,93,.18), transparent 30%), linear-gradient(135deg, #061f1c, #143f38 62%, #092e29); }
.hero:is([data-page="home"], [data-page="how-it-works"]) .hero-media img { opacity: .16; filter: blur(.22rem) saturate(.72) brightness(.78); transform: scale(1.035); }
.hero[data-hero-state="motion"]:not([data-motion-paused="true"]) .hero-media img { animation: cinematic-drift 18s ease-in-out infinite alternate; }
.hero-vignette { background: linear-gradient(90deg, rgba(3,22,19,.94) 0%, rgba(3,22,19,.72) 34%, rgba(3,22,19,.08) 68%), linear-gradient(0deg, rgba(3,22,19,.66), transparent 42%); }
.hero:is([data-page="home"], [data-page="how-it-works"]) .hero-vignette { background: linear-gradient(90deg, rgba(3,22,19,.96) 0%, rgba(3,22,19,.78) 34%, rgba(3,22,19,.24) 68%), linear-gradient(0deg, rgba(3,22,19,.72), transparent 42%); }
html[dir="rtl"] .hero-vignette { transform: scaleX(-1); }
.hero-glow { opacity: .35; background: radial-gradient(circle at 75% 60%, rgba(239,116,93,.3), transparent 28%); mix-blend-mode: screen; }
.hero[data-hero-state="motion"]:not([data-motion-paused="true"]) .hero-glow { animation: glow-breathe 6s ease-in-out infinite alternate; }
.hero-shell { min-height: min(56rem, 100svh); display: flex; flex-direction: column; justify-content: center; padding-block: 8.5rem 3rem; }
.hero-copy { width: min(43rem, 58%); }
.eyebrow { margin: 0 0 var(--space-2); color: var(--coral); font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
html[dir="rtl"] .eyebrow { letter-spacing: 0; }
h1, h2, h3 { margin-block-start: 0; }
h1, h2 { line-height: 1.02; letter-spacing: -.045em; }
html[dir="rtl"] h1, html[dir="rtl"] h2 { letter-spacing: 0; }
h1 { max-width: 10ch; margin-block-end: var(--space-3); font-size: clamp(3.2rem, 7.8vw, 7rem); text-wrap: balance; }
h2 { margin-block-end: 0; font-size: clamp(2.25rem, 4.5vw, 4rem); text-wrap: balance; }
.lede { max-width: 38rem; margin-block-end: var(--space-4); color: rgba(255,255,255,.84); font-size: clamp(1.05rem, 1.7vw, 1.28rem); }
.button-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.button { display: inline-flex; min-height: 3.2rem; align-items: center; justify-content: center; padding: .72rem 1.3rem; border: 1px solid transparent; border-radius: 999px; font-weight: 700; text-decoration: none; transition: transform .18s ease, background .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--ink); background: var(--coral); }
.button-primary:hover { background: #ff8b73; }
.button-ghost { border-color: rgba(255,255,255,.55); background: rgba(3,22,19,.18); backdrop-filter: blur(8px); }
.button-ghost:hover { background: rgba(255,255,255,.16); }
.hero-assurances { display: flex; margin: var(--space-5) 0 0; padding: var(--space-3) 0 0; gap: clamp(1rem, 3vw, 2.5rem); border-block-start: 1px solid rgba(255,255,255,.22); list-style: none; }
.hero-assurances li { display: grid; gap: .1rem; }
.hero-assurances span { color: var(--coral); font-size: .68rem; letter-spacing: .14em; }
.hero-assurances strong { color: rgba(255,255,255,.86); font-size: .78rem; font-weight: 600; }
.hero-controls { position: absolute; inset-inline-end: max(1rem, calc((100% - 76rem) / 2)); inset-block-end: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .55rem; }
.media-status { width: 100%; margin: 0; color: rgba(255,255,255,.72); font-size: .72rem; text-align: end; }
.sound-toggle, .motion-toggle { display: inline-flex; min-height: 2.65rem; align-items: center; gap: .65rem; padding: .55rem .9rem; border: 1px solid rgba(255,255,255,.36); border-radius: 999px; color: var(--white); background: rgba(3,22,19,.54); backdrop-filter: blur(10px); font: inherit; font-size: .75rem; font-weight: 600; cursor: pointer; }
.sound-toggle:disabled, .motion-toggle:disabled { opacity: .58; cursor: default; }
.pause-icon { width: .65rem; height: .75rem; border-inline: 2px solid currentColor; }
.motion-toggle[aria-pressed="true"] .pause-icon { width: 0; height: 0; border: 0; border-block: .38rem solid transparent; border-inline-start: .62rem solid currentColor; }
.sound-icon { height: .8rem; display: flex; align-items: end; gap: 2px; }
.sound-icon i { width: 2px; height: 35%; background: currentColor; }
.sound-icon i:nth-child(2) { height: 100%; } .sound-icon i:nth-child(3) { height: 65%; }
.sound-toggle[aria-pressed="true"] .sound-icon i { animation: sound-bars .8s ease-in-out infinite alternate; }
.sound-toggle[aria-pressed="true"] .sound-icon i:nth-child(2) { animation-delay: -.4s; }

.pickup-scene { --pickup-cycle: 8.5s; --pickup-car-width: min(31rem, 100%); --pickup-car-height: calc(var(--pickup-car-width) * .31); --pickup-rear-door-offset: 2.35rem; --pickup-front-door-offset: 3.75rem; --pickup-curb-gap: 3.2rem; --pickup-inside-step: 1rem; --pickup-rear-door-x: calc(50% + var(--pickup-rear-door-offset)); --pickup-front-door-x: calc(50% - var(--pickup-front-door-offset)); --pickup-chauffeur-walk: calc(var(--pickup-rear-door-offset) + var(--pickup-front-door-offset)); --pickup-passenger-board: var(--pickup-curb-gap); --pickup-passenger-seat: calc(var(--pickup-curb-gap) + var(--pickup-inside-step)); position: absolute; z-index: 2; width: min(43rem, 48vw); min-height: calc(var(--pickup-car-height) + 8.2rem); direction: ltr; pointer-events: none; filter: drop-shadow(0 1.5rem 2.5rem rgba(0,0,0,.28)); }
.hero-pickup-scene { inset-inline-end: clamp(1rem, 5vw, 6rem); inset-block-end: clamp(8rem, 14vh, 11rem); }
.hero[data-page="home"] .hero-pickup-scene { --pickup-cycle: 14s; --pickup-car-width: min(42rem, 100%); --pickup-car-height: calc(var(--pickup-car-width) * .32); --pickup-rear-door-offset: 2.55rem; --pickup-front-door-offset: 4.7rem; --pickup-curb-gap: 6.1rem; --pickup-inside-step: 1.25rem; width: min(56rem, 58vw); min-height: calc(var(--pickup-car-height) + 14rem); inset-inline-end: clamp(.5rem, 3.7vw, 5rem); inset-block-end: clamp(5.4rem, 8.6vh, 7.6rem); filter: drop-shadow(0 1.7rem 2.6rem rgba(0,0,0,.32)); }
.pickup-road { position: absolute; inset-inline: 0; inset-block-end: .4rem; height: 4.3rem; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: linear-gradient(180deg, rgba(4,27,24,.16), rgba(4,27,24,.72)), linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); box-shadow: inset 0 .7rem 1.6rem rgba(255,255,255,.06), 0 1.2rem 3rem rgba(0,0,0,.26); transform: perspective(40rem) rotateX(58deg); transform-origin: bottom center; overflow: hidden; }
.pickup-road i { position: absolute; inset-block-start: 49%; width: 16%; height: 2px; border-radius: 999px; background: rgba(255,255,255,.58); }
.pickup-road i:first-child { inset-inline-start: 24%; }
.pickup-road i:last-child { inset-inline-start: 61%; }
.pickup-car { position: absolute; inset-inline-start: 50%; inset-block-end: 3.15rem; width: var(--pickup-car-width); height: var(--pickup-car-height); transform: translateX(-50%); transform-origin: 50% 88%; }
.pickup-car-shadow { position: absolute; inset-inline: 8% 7%; inset-block-end: -1.2rem; height: 1.45rem; border-radius: 50%; background: rgba(0,0,0,.34); filter: blur(.35rem); }
.pickup-car-body { position: absolute; inset: 25% 0 9%; border-radius: 45% 48% 21% 21% / 64% 64% 34% 34%; background: linear-gradient(180deg, #fffaf0, #d8cfc0 74%, #bdb3a5); box-shadow: inset 0 .2rem .45rem rgba(255,255,255,.75), inset 0 -.55rem .75rem rgba(9,46,41,.14); }
.hero[data-page="home"] .pickup-car-body { box-shadow: inset 0 .2rem .45rem rgba(255,255,255,.75), inset 0 -.55rem .75rem rgba(9,46,41,.14), 0 .75rem 1.4rem rgba(0,0,0,.16); }
.pickup-car-body::before { position: absolute; inset: 48% 5% auto; height: .18rem; border-radius: 999px; content: ""; background: rgba(9,46,41,.2); }
.pickup-car-body::after { position: absolute; inset: auto 4% 20%; height: .45rem; border-radius: 999px; content: ""; background: linear-gradient(90deg, rgba(244,124,99,.92), transparent 11%, transparent 88%, rgba(255,235,188,.9)); }
.pickup-car-cabin { position: absolute; inset: 3% 25% 44% 26%; border-radius: 55% 45% 20% 18% / 74% 74% 24% 24%; background: linear-gradient(110deg, rgba(223,246,241,.9), rgba(23,83,76,.92)); box-shadow: inset 0 0 0 .18rem rgba(255,255,255,.35); overflow: hidden; }
.pickup-car-cabin::before { position: absolute; inset: 0 48% 0 auto; width: .18rem; content: ""; background: rgba(255,255,255,.5); transform: skewX(-14deg); }
.pickup-car-door { position: absolute; inset-block: 33% 14%; border: 1px solid rgba(9,46,41,.18); border-block-start-color: rgba(255,255,255,.45); border-radius: .5rem .42rem .38rem .35rem; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(9,46,41,.04)); transform-origin: 6% 50%; }
.pickup-car-door-front { inset-inline-start: 29%; width: 18%; }
.pickup-car-door-rear { inset-inline-start: 48%; width: 19%; }
.hero[data-page="home"] .pickup-car-door { background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(9,46,41,.04)); backface-visibility: hidden; }
.hero[data-page="home"] .pickup-car-door-rear { inset-inline-start: 47.8%; width: 19.2%; transform-origin: 2% 52%; }
.hero[data-page="home"] .pickup-car-door-rear::before { position: absolute; inset: .22rem .28rem auto .45rem; height: 34%; border-radius: .32rem .28rem .14rem .14rem; content: ""; background: linear-gradient(115deg, rgba(223,246,241,.82), rgba(23,83,76,.74)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.hero[data-page="home"] .pickup-car-door-rear::after { position: absolute; inset: auto 5% 6%; height: .22rem; border-radius: 999px; content: ""; background: rgba(9,46,41,.16); }
.pickup-car-handle { position: absolute; z-index: 2; inset-block-start: 55%; width: 1rem; height: .18rem; border-radius: 999px; background: rgba(9,46,41,.45); }
.pickup-car-handle-front { inset-inline-start: 42%; }
.pickup-car-handle-rear { inset-inline-start: 62%; }
.pickup-car-wheel { position: absolute; z-index: 3; inset-block-end: -8%; width: 14%; aspect-ratio: 1; border: .5rem solid #071714; border-radius: 50%; background: radial-gradient(circle, #d5ddd8 0 20%, #566561 21% 34%, #1b2826 35%); box-shadow: inset 0 0 0 .12rem rgba(255,255,255,.22); }
.pickup-car-wheel-front { inset-inline-start: 18%; }
.pickup-car-wheel-rear { inset-inline-end: 17%; }
.pickup-chauffeur, .pickup-passenger { position: absolute; z-index: 4; width: 1.35rem; height: 4.9rem; opacity: 1; transform-origin: 50% 100%; }
.pickup-chauffeur::before, .pickup-passenger::before { position: absolute; inset: 0 auto auto 50%; width: 1.12rem; aspect-ratio: 1; border-radius: 50%; content: ""; background: #2d211d; transform: translateX(-50%); box-shadow: 0 .12rem 0 rgba(255,255,255,.25); }
.pickup-chauffeur::after, .pickup-passenger::after { position: absolute; inset: 1.05rem 0 auto; height: 2.55rem; border-radius: .55rem .55rem .28rem .28rem; content: ""; background: linear-gradient(180deg, #123a35, #081d1a); box-shadow: inset 0 .2rem 0 rgba(255,255,255,.14); }
.pickup-chauffeur i, .pickup-passenger i { position: absolute; inset: auto .18rem 0; height: 1.6rem; border-inline: .23rem solid #071714; }
.pickup-head, .pickup-shoulder, .pickup-arm { display: none; }
.hero[data-page="home"] .pickup-chauffeur, .hero[data-page="home"] .pickup-passenger { width: 3rem; height: 8.85rem; }
.hero[data-page="home"] .pickup-chauffeur::before, .hero[data-page="home"] .pickup-passenger::before, .hero[data-page="home"] .pickup-chauffeur::after, .hero[data-page="home"] .pickup-passenger::after { content: none; }
.hero[data-page="home"] .pickup-head, .hero[data-page="home"] .pickup-shoulder, .hero[data-page="home"] .pickup-arm { display: block; }
.hero[data-page="home"] .pickup-head { position: absolute; inset: 0 auto auto 50%; width: 1.9rem; aspect-ratio: 1; border-radius: 50%; background: #2d211d; transform: translateX(-50%); box-shadow: 0 .12rem 0 rgba(255,255,255,.25); }
.hero[data-page="home"] .pickup-shoulder { position: absolute; inset: 1.78rem .28rem auto; height: 4.18rem; border-radius: .9rem .9rem .42rem .42rem; background: linear-gradient(180deg, #123a35, #081d1a); box-shadow: inset 0 .2rem 0 rgba(255,255,255,.14); }
.hero[data-page="home"] .pickup-passenger .pickup-shoulder { background: linear-gradient(180deg, #f4f0e7, #d6c3a2); }
.hero[data-page="home"] .pickup-arm { position: absolute; z-index: 2; inset-block-start: 2.18rem; width: .48rem; height: 3.2rem; border-radius: 999px; background: #123a35; transform-origin: 50% 12%; }
.hero[data-page="home"] .pickup-passenger .pickup-arm { background: #d6c3a2; }
.hero[data-page="home"] .pickup-arm-front { inset-inline-start: .3rem; }
.hero[data-page="home"] .pickup-arm-back { inset-inline-end: .3rem; }
.hero[data-page="home"] .pickup-chauffeur .pickup-arm-front { animation: pickup-chauffeur-arm var(--pickup-cycle) ease-in-out infinite; }
.hero[data-page="home"] .pickup-passenger .pickup-arm-front { animation: pickup-passenger-arm var(--pickup-cycle) ease-in-out infinite; }
.hero[data-page="home"] .pickup-chauffeur i, .hero[data-page="home"] .pickup-passenger i { inset-inline: .7rem; height: 2.9rem; border-inline-width: .38rem; }
.pickup-passenger { inset-inline-start: calc(var(--pickup-rear-door-x) + var(--pickup-curb-gap)); inset-block-end: 4rem; transform: translateX(-50%) scale(.92); }
.pickup-passenger::after { background: linear-gradient(180deg, #f4f0e7, #d6c3a2); }
.pickup-chauffeur { inset-inline-start: var(--pickup-front-door-x); inset-block-end: 4rem; transform: translateX(-50%) scale(.92); opacity: 0; }
.hero[data-page="home"] .pickup-passenger, .hero[data-page="home"] .pickup-chauffeur { inset-block-end: 3.85rem; }
.pickup-scene:not([data-static]) .pickup-car { animation: pickup-car-arrive var(--pickup-cycle) cubic-bezier(.5,0,.2,1) infinite; }
.pickup-scene:not([data-static]) .pickup-car-door-front { animation: pickup-front-door var(--pickup-cycle) ease-in-out infinite; }
.pickup-scene:not([data-static]) .pickup-car-door-rear { animation: pickup-rear-door var(--pickup-cycle) ease-in-out infinite; }
.pickup-scene:not([data-static]) .pickup-chauffeur { animation: pickup-chauffeur var(--pickup-cycle) ease-in-out infinite; }
.pickup-scene:not([data-static]) .pickup-passenger { animation: pickup-passenger var(--pickup-cycle) ease-in-out infinite; }
.pickup-scene:not([data-static]) .pickup-car-wheel { animation: pickup-wheel var(--pickup-cycle) ease-in-out infinite; }
.hero[data-page="home"] .pickup-scene:not([data-static]) .pickup-car { animation-name: home-pickup-car; }
.hero[data-page="home"] .pickup-scene:not([data-static]) .pickup-car-door-front { animation-name: home-pickup-front-door; }
.hero[data-page="home"] .pickup-scene:not([data-static]) .pickup-car-door-rear { animation-name: home-pickup-rear-door; }
.hero[data-page="home"] .pickup-scene:not([data-static]) .pickup-chauffeur { animation-name: home-pickup-chauffeur; }
.hero[data-page="home"] .pickup-scene:not([data-static]) .pickup-passenger { animation-name: home-pickup-passenger; }
.hero[data-page="home"] .pickup-scene:not([data-static]) .pickup-car-wheel { animation-name: home-pickup-wheel; }
.hero[data-page="home"]:not([data-hero-state="motion"]) .hero-pickup-scene .pickup-car-door-rear { transform: perspective(14rem) rotateY(-62deg) skewY(-1deg); box-shadow: -.35rem .32rem .9rem rgba(0,0,0,.23); }
.hero[data-motion-paused="true"] .hero-pickup-scene * { animation-play-state: paused !important; }
.hero:not([data-hero-state="motion"]) .hero-pickup-scene * { animation: none !important; }
.hero:not([data-hero-state="motion"]) .hero-pickup-scene .pickup-car { transform: translateX(-50%); }
.hero:not([data-hero-state="motion"]) .hero-pickup-scene .pickup-car-door-rear { transform: perspective(12rem) rotateY(-48deg); box-shadow: -.25rem .2rem .8rem rgba(0,0,0,.2); }
.hero:not([data-hero-state="motion"]) .hero-pickup-scene .pickup-chauffeur { opacity: 1; transform: translateX(calc(-50% + var(--pickup-chauffeur-walk))) scale(.92); }
.hero:not([data-hero-state="motion"]) .hero-pickup-scene .pickup-passenger { opacity: 1; transform: translateX(calc(-50% - var(--pickup-passenger-board))) scale(.88); }

.journey { padding-block: clamp(5rem, 11vw, 9rem); background: var(--cream); }
.journey-grid { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: clamp(3rem, 9vw, 8rem); }
.journey .eyebrow { color: #b74838; }
.journey-copy { color: var(--ink-soft); font-size: 1.15rem; }
.journey-copy p { margin-block: 0 var(--space-3); }
.text-link { display: inline-flex; padding-block-end: .25rem; border-block-end: 2px solid var(--coral); color: var(--ink); font-weight: 700; text-decoration: none; }

.section-intro { max-width: 37rem; color: var(--ink-soft); font-size: clamp(1.05rem, 1.6vw, 1.22rem); }
.city-map { position: relative; overflow: hidden; padding-block: clamp(5.5rem, 10vw, 8rem); color: var(--white); background: #071f1c; }
.city-map::before { position: absolute; inset: 0; content: ""; opacity: .55; background: radial-gradient(circle at 12% 50%, rgba(23,109,102,.45), transparent 34%), radial-gradient(circle at 86% 15%, rgba(239,116,93,.13), transparent 27%); pointer-events: none; }
.city-map-heading, .city-map-layout { position: relative; z-index: 1; }
.city-map-heading { display: grid; grid-template-columns: 1fr .7fr; align-items: end; margin-block-end: clamp(2rem, 5vw, 4rem); gap: clamp(2rem, 8vw, 7rem); }
.city-map .section-intro { margin-block-end: .35rem; color: rgba(255,255,255,.7); }
.city-map-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(16rem, .45fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
.map-stage { min-width: 0; margin: 0; }
.map-visual { position: relative; isolation: isolate; aspect-ratio: 20 / 13; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: clamp(1rem, 2vw, 1.7rem); background: #bfa57a; box-shadow: 0 2.2rem 6rem rgba(0,0,0,.34); transform: perspective(80rem) rotateX(2deg); transform-origin: bottom center; }
.map-visual::after { position: absolute; inset: 0; z-index: 5; border-radius: inherit; content: ""; background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 26%, rgba(3,24,21,.16)); pointer-events: none; }
.map-fallback, .map-canvas-host, .map-canvas-host canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-fallback { z-index: 1; }
.map-canvas-host { z-index: 2; opacity: 0; transition: opacity .55s ease; }
.map-canvas-host canvas { display: block; touch-action: pan-y; }
.city-map[data-map-state="enhanced"] .map-canvas-host { opacity: 1; }
.city-map[data-map-state="enhanced"] .map-fallback { opacity: 0; }
.map-road-network path { stroke: rgba(255,249,231,.72); stroke-width: 8; }
.map-road-network path:nth-child(n+6) { stroke-width: 4; opacity: .68; }
.map-route-fallback { stroke: #35e48b; stroke-width: 13; stroke-linecap: round; stroke-dasharray: 2 18; filter: drop-shadow(0 0 7px rgba(53,228,139,.55)); }
.map-trip-points { color: #fff5da; }
.map-trip-point circle, .map-trip-point path, .map-trip-status rect, .map-trip-status path { fill: #fff5da; stroke: #724e35; stroke-width: 4; }
.map-trip-pickup circle { fill: #35e48b; stroke: #062c26; }
.map-trip-pickup path { stroke: #062c26; }
.map-trip-destination path { fill: var(--coral); stroke: #062c26; }
.map-trip-destination circle { fill: #fff5da; stroke: #062c26; }
.map-trip-status rect { fill: rgba(4,34,30,.88); stroke: #35e48b; }
.map-trip-status path { stroke: #35e48b; }
.map-vehicle-fallback { fill: #35e48b; stroke: #062c26; stroke-width: 5; }
.map-vehicle-fallback rect:first-child { fill: #35e48b; }
.map-vehicle-fallback rect:nth-child(2) { fill: #315b51; }
.map-vehicle-fallback circle { fill: #062c26; stroke: #fff5da; stroke-width: 3; }
.city-map[data-map-state="pending"] .map-vehicle-fallback, .city-map[data-map-state="loading"] .map-vehicle-fallback { animation: fallback-drive 4.5s ease-in-out infinite alternate; }
.map-label { position: absolute; z-index: 4; max-width: 9rem; padding: .38rem .58rem; border: 1px solid rgba(255,255,255,.22); border-radius: .45rem; color: #fff; background: rgba(4,34,30,.82); box-shadow: 0 .5rem 1.2rem rgba(0,0,0,.22); font-size: clamp(.58rem, 1vw, .72rem); font-weight: 600; line-height: 1.2; backdrop-filter: blur(7px); pointer-events: none; }
.map-label::before { display: inline-block; width: .48rem; height: .48rem; margin-inline-end: .36rem; border-radius: 50%; content: ""; background: currentColor; box-shadow: 0 0 0 .2rem rgba(255,255,255,.12); vertical-align: .02rem; }
.map-label-pickup { left: 63%; inset-block-start: 63%; color: #8df2b9; }
.map-label-driver { left: 49%; inset-block-start: 42%; color: #fff5da; }
.map-label-destination { left: 37%; inset-block-start: 27%; color: #ff9b86; }
.map-route-pill { position: absolute; inset-inline-start: 50%; inset-block-start: 50%; z-index: 4; padding: .45rem .7rem; border: 1px solid rgba(53,228,139,.42); border-radius: 999px; color: #8df2b9; background: rgba(4,34,30,.86); box-shadow: 0 .55rem 1.35rem rgba(0,0,0,.2); font-size: clamp(.62rem, 1vw, .76rem); font-weight: 800; line-height: 1; transform: translate(-50%, -50%); pointer-events: none; }
html[dir="rtl"] .map-route-pill { transform: translate(50%, -50%); }
.map-ride-card { position: absolute; inset-inline: 1rem auto; inset-block-start: 1rem; z-index: 4; width: min(17rem, calc(100% - 5.2rem)); display: grid; padding: .9rem 1rem; gap: .18rem; border: 1px solid rgba(255,255,255,.2); border-radius: 1rem; color: var(--white); background: rgba(4,34,30,.84); box-shadow: 0 1rem 2rem rgba(0,0,0,.24); backdrop-filter: blur(10px); pointer-events: none; }
.map-ride-card small { color: #8df2b9; font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.map-ride-card strong { font-size: clamp(.95rem, 1.5vw, 1.18rem); line-height: 1.12; }
.map-ride-card span { color: rgba(255,255,255,.7); font-size: .7rem; line-height: 1.35; }
.map-story-progress { display: flex; margin-block-start: .55rem; gap: .28rem; }
.map-story-progress i { flex: 1; height: .26rem; border-radius: 999px; background: rgba(255,255,255,.18); }
.map-story-progress i:nth-child(-n+3) { background: #35e48b; box-shadow: 0 0 .55rem rgba(53,228,139,.38); }
.map-compass { position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem; z-index: 4; width: 2.8rem; height: 2.8rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: #fff; background: rgba(4,34,30,.7); font-size: .62rem; font-weight: 700; }
.map-compass i { position: absolute; inset-block-start: .35rem; width: 1px; height: .65rem; background: var(--coral); }
.map-stage figcaption { margin-block-start: .8rem; color: rgba(255,255,255,.54); font-size: .72rem; }
.map-attribution { color: rgba(255,255,255,.78); text-underline-offset: .18rem; }
.map-details { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.map-status { width: max-content; max-width: 100%; margin: 0 0 var(--space-3); padding: .48rem .72rem; border: 1px solid rgba(53,228,139,.28); border-radius: 999px; color: #8df2b9; font-size: .72rem; font-weight: 600; }
.map-progress-label { display: grid; margin-block-end: .6rem; gap: .7rem; color: rgba(255,255,255,.88); font-size: .8rem; font-weight: 600; }
.map-progress-label input { width: 100%; height: 2rem; margin: 0; accent-color: #35e48b; cursor: ew-resize; touch-action: pan-y; }
.map-progress-label input:disabled { opacity: .5; cursor: default; }
.map-instruction { margin: 0 0 var(--space-4); color: rgba(255,255,255,.55); font-size: .76rem; }
.map-details h3 { margin-block-end: var(--space-2); font-size: 1.1rem; }
.trip-list { display: grid; margin: 0; padding: 0; list-style: none; }
.trip-list li { display: grid; grid-template-columns: 2rem 1fr; padding-block: .85rem; gap: .65rem; border-block-start: 1px solid rgba(255,255,255,.13); }
.trip-list li:last-child { border-block-end: 1px solid rgba(255,255,255,.13); }
.trip-list > li > span { color: var(--coral); font-size: .65rem; letter-spacing: .12em; }
.trip-list strong, .trip-list small { display: block; }
.trip-list strong { font-size: .86rem; line-height: 1.25; }
.trip-list small { margin-block-start: .18rem; color: rgba(255,255,255,.52); font-size: .68rem; }
.city-map[data-map-direction="reverse"] .map-progress-label input { direction: rtl; }

.convenience { position: relative; overflow: hidden; padding-block: clamp(5.5rem, 11vw, 9rem); color: var(--white); background: #0d3732; }
.convenience::before { position: absolute; inset: 0; content: ""; opacity: .55; background: radial-gradient(circle at 75% 35%, rgba(239,116,93,.2), transparent 27%), linear-gradient(125deg, transparent 50%, rgba(255,255,255,.035) 50%); pointer-events: none; }
.feature-grid { position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(23rem, 1.08fr); align-items: center; gap: clamp(3rem, 9vw, 8rem); }
.convenience .section-intro { color: rgba(255,255,255,.72); }
.step-list { display: grid; margin: var(--space-5) 0 0; padding: 0; gap: 0; list-style: none; }
.step-list li { display: grid; grid-template-columns: 2.5rem 1fr; padding-block: 1.25rem; gap: var(--space-2); border-block-start: 1px solid rgba(255,255,255,.16); }
.step-list li:last-child { border-block-end: 1px solid rgba(255,255,255,.16); }
.step-list > li > span { color: var(--coral); font-size: .72rem; font-weight: 700; letter-spacing: .12em; }
.step-list h3 { margin-block-end: .2rem; font-size: 1.2rem; line-height: 1.3; }
.step-list p { margin: 0; color: rgba(255,255,255,.7); }
.product-stage { position: relative; min-height: 42rem; display: grid; place-items: center; }
.phone { position: relative; z-index: 2; width: min(19.5rem, 65vw); margin: 0; padding: .55rem; border: 1px solid rgba(255,255,255,.28); border-radius: 2.5rem; background: #071d1a; box-shadow: 0 2.2rem 5rem rgba(0,0,0,.35); }
.mock-screen { position: relative; width: 100%; aspect-ratio: 1 / 1.95; overflow: hidden; border-radius: 2rem; color: var(--ink); background: #e9eee9; }
.mock-map { position: absolute; inset: 0 0 34%; overflow: hidden; background-color: #dfe8e1; background-image: linear-gradient(32deg, transparent 44%, rgba(255,255,255,.9) 45% 48%, transparent 49%), linear-gradient(115deg, transparent 28%, rgba(255,255,255,.82) 29% 32%, transparent 33%), linear-gradient(8deg, transparent 66%, rgba(255,255,255,.72) 67% 70%, transparent 71%); }
.mock-map::before { position: absolute; width: 72%; height: 48%; inset: 20% auto auto 12%; border: .28rem solid var(--coral); border-block-start-color: transparent; border-radius: 45% 55% 40% 60%; content: ""; transform: rotate(-9deg); }
.mock-map::after { position: absolute; width: .85rem; height: .85rem; inset: 27% auto auto 20%; border: .22rem solid var(--white); border-radius: 50% 50% 50% 0; content: ""; background: var(--ink); box-shadow: 0 .2rem .7rem rgba(9,46,41,.24); transform: rotate(-45deg); }
.mock-map i { position: absolute; width: .7rem; height: .7rem; border: .18rem solid var(--white); border-radius: 50%; background: var(--coral); box-shadow: 0 .2rem .7rem rgba(9,46,41,.24); }
.mock-map i:first-child { inset: 58% auto auto 63%; }
.mock-map i:nth-child(2) { inset: 39% auto auto 47%; }
.mock-map i:nth-child(3) { inset: 70% auto auto 30%; }
.mock-map span { position: absolute; inset: 1rem 1rem auto auto; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--white); box-shadow: 0 .3rem 1rem rgba(9,46,41,.18); }
.mock-map span::before, .mock-map span::after { position: absolute; inset: 50% auto auto 50%; border-radius: 50%; content: ""; transform: translate(-50%,-50%); }
.mock-map span::before { width: .75rem; height: .75rem; border: .14rem solid var(--ink); }
.mock-map span::after { width: .15rem; height: .15rem; background: var(--coral); }
.mock-sheet { position: absolute; inset: auto 0 0; min-height: 36%; display: flex; flex-direction: column; justify-content: center; padding: 1.4rem 1.2rem 1.1rem; border-radius: 1.6rem 1.6rem 0 0; background: var(--white); }
.mock-handle { position: absolute; inset: .6rem auto auto 50%; width: 2.5rem; height: .23rem; border-radius: 999px; background: #b9c1bf; transform: translateX(-50%); }
.mock-sheet small, .driver-status small { color: var(--ink-soft); font-size: .7rem; }
.mock-sheet strong { font-size: 1rem; }
.mock-progress { display: flex; margin-block-start: 1.2rem; gap: .35rem; }
.mock-progress i { flex: 1; height: .26rem; border-radius: 999px; background: var(--sand); }
.mock-progress i:first-child, .mock-progress i:nth-child(2) { background: var(--coral); }
.rider-flow-screen { display: grid; grid-template-rows: auto auto 1fr auto; padding: .95rem; background: linear-gradient(180deg, #f8f4ea 0 30%, #dfe9e3 30% 100%); }
.app-chrome { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.app-mark { display: block; width: 2rem; height: 2rem; border-radius: .72rem; object-fit: cover; box-shadow: 0 .45rem 1.2rem rgba(9,46,41,.16); }
.app-chrome small { color: var(--ink-soft); font-size: .68rem; font-weight: 700; }
.rider-search-card { position: relative; z-index: 3; display: grid; margin-block-start: .8rem; padding: .75rem .85rem; border: 1px solid rgba(9,46,41,.08); border-radius: 1rem; background: rgba(255,255,255,.94); box-shadow: 0 .75rem 1.8rem rgba(9,46,41,.12); }
.rider-search-card small, .rider-trip-sheet small, .driver-top-card small, .driver-request-card small, .driver-follow-card small { color: var(--ink-soft); font-size: .66rem; font-weight: 700; }
.rider-search-card strong { margin-block: .1rem .35rem; font-size: .95rem; line-height: 1.1; }
.rider-search-card span { position: relative; width: max-content; max-width: 100%; color: #b74838; font-size: .68rem; font-weight: 800; overflow: hidden; white-space: nowrap; }
.rider-search-card span::after { display: inline-block; width: .08rem; height: .72rem; margin-inline-start: .15rem; vertical-align: -.08rem; content: ""; background: var(--coral); }
.rider-flow-map { position: relative; min-height: 13.6rem; margin-block: .45rem -.65rem; overflow: hidden; border-radius: 1.25rem; background-color: #dfe8e1; background-image: linear-gradient(35deg, transparent 42%, rgba(255,255,255,.75) 43% 46%, transparent 47%), linear-gradient(118deg, transparent 28%, rgba(255,255,255,.82) 29% 32%, transparent 33%), linear-gradient(7deg, transparent 66%, rgba(255,255,255,.7) 67% 70%, transparent 71%); }
.rider-flow-map > i, .driver-flow-map > i { position: absolute; border-radius: 999px; background: rgba(255,255,255,.62); }
.rider-flow-map > i:first-child { inset: 18% auto auto -7%; width: 78%; height: .42rem; transform: rotate(-18deg); }
.rider-flow-map > i:nth-child(2) { inset: 47% -10% auto auto; width: 88%; height: .38rem; transform: rotate(27deg); }
.rider-flow-map > i:nth-child(3) { inset: auto auto 16% 7%; width: 74%; height: .36rem; transform: rotate(-8deg); }
.rider-flow-map svg { position: absolute; inset: 8% 6% 15%; width: 88%; height: 77%; overflow: visible; }
.rider-route-shadow, .rider-route { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rider-route-shadow { stroke: rgba(9,46,41,.16); stroke-width: 14; }
.rider-route { stroke: var(--coral); stroke-width: 7; stroke-dasharray: 244; stroke-dashoffset: 0; }
.rider-pin { position: absolute; z-index: 2; width: .92rem; height: .92rem; border: .2rem solid var(--white); border-radius: 50%; box-shadow: 0 .25rem .8rem rgba(9,46,41,.2); }
.rider-pin-pickup { inset: 70% auto auto 18%; background: var(--ink); }
.rider-pin-destination { inset: 19% 12% auto auto; border-radius: 50% 50% 50% 0; background: var(--coral); transform: rotate(-45deg); }
.rider-vehicle { position: absolute; z-index: 3; inset: 52% auto auto 45%; width: 1.9rem; height: 1.05rem; border-radius: .4rem .4rem .28rem .28rem; background: var(--ink); box-shadow: 0 .35rem .8rem rgba(9,46,41,.22); transform: rotate(-26deg); }
.rider-vehicle::before { position: absolute; inset: -.38rem .42rem auto; height: .5rem; border-radius: .25rem .25rem 0 0; content: ""; background: #2f6a62; }
.rider-vehicle::after { position: absolute; inset: auto .18rem -.2rem; height: .26rem; border-radius: 999px; content: ""; background: linear-gradient(90deg, var(--coral) 0 .32rem, transparent .32rem calc(100% - .32rem), var(--coral) calc(100% - .32rem)); }
.rider-trip-sheet { position: relative; z-index: 4; margin-inline: -.25rem; padding: 1.15rem 1rem .95rem; border-radius: 1.35rem 1.35rem .9rem .9rem; background: var(--white); box-shadow: 0 -1rem 2.3rem rgba(9,46,41,.08); }
.rider-trip-sheet strong { display: block; margin-block: .12rem .35rem; font-size: 1rem; line-height: 1.12; }
.rider-trip-sheet p { margin: .65rem 0 0; color: var(--ink-soft); font-size: .7rem; line-height: 1.3; }
.rider-trip-sheet .mock-progress { margin-block-start: .75rem; }
.rider-trip-sheet .mock-progress i:nth-child(3) { background: var(--coral); }
.rider-trip-sheet .mock-progress i:nth-child(4) { background: rgba(9,46,41,.14); }
.phone figcaption, .driver-phone figcaption { padding: .9rem .75rem .55rem; color: rgba(255,255,255,.72); font-size: .77rem; line-height: 1.35; }
.route-thread { position: absolute; inset: 10% 3% 14%; z-index: 1; border: 1px solid rgba(239,116,93,.5); border-inline-start: 0; border-radius: 0 50% 50% 0; }
html[dir="rtl"] .route-thread { border-radius: 50% 0 0 50%; }
.route-thread i { position: absolute; width: .7rem; height: .7rem; border: 2px solid var(--coral); border-radius: 50%; background: #0d3732; box-shadow: 0 0 0 .4rem rgba(239,116,93,.12); }
.route-thread i:first-child { inset-block-start: -.38rem; inset-inline-start: -.1rem; }
.route-thread i:nth-child(2) { inset-block-start: 48%; inset-inline-end: -.35rem; }
.route-thread i:last-child { inset-block-end: -.38rem; inset-inline-start: 22%; }
.interface-note { position: absolute; z-index: 3; display: grid; max-width: 12rem; padding: .85rem 1rem; gap: .15rem; border: 1px solid rgba(255,255,255,.2); border-radius: .8rem; color: var(--ink); background: rgba(243,239,228,.96); box-shadow: 0 1rem 2.5rem rgba(0,0,0,.22); }
.interface-note span { color: #b74838; font-size: .65rem; letter-spacing: .12em; }
.interface-note strong { font-size: .86rem; }
.note-request { inset-block-start: 17%; inset-inline-start: 0; }
.note-route { inset-block-end: 18%; inset-inline-end: 0; }
html[data-supporting-motion="active"] .phone-rider:not(.how-phone) { animation: product-float 6s ease-in-out infinite alternate; }
html[data-supporting-motion="active"] .route-thread i { animation: route-pulse 2.6s ease-out infinite; }
html[data-supporting-motion="active"] .route-thread i:nth-child(2) { animation-delay: -.9s; }
html[data-supporting-motion="active"] .route-thread i:last-child { animation-delay: -1.8s; }
html[data-supporting-motion="active"] .rider-flow-screen:not(.how-flow-screen) .rider-search-card span { animation: rider-search-reveal 7.8s ease-in-out infinite; }
html[data-supporting-motion="active"] .rider-flow-screen:not(.how-flow-screen) .rider-search-card span::after { animation: rider-caret 1s steps(2, jump-none) infinite; }
html[data-supporting-motion="active"] .rider-flow-screen:not(.how-flow-screen) .rider-route { animation: rider-route-draw 7.8s ease-in-out infinite; }
html[data-supporting-motion="active"] .rider-flow-screen:not(.how-flow-screen) .rider-vehicle { animation: rider-vehicle-trip 7.8s ease-in-out infinite; }
html[data-supporting-motion="active"] .rider-flow-screen:not(.how-flow-screen) .rider-trip-sheet .mock-progress i { animation: rider-progress-step 7.8s ease-in-out infinite; }
html[data-supporting-motion="active"] .rider-flow-screen:not(.how-flow-screen) .rider-trip-sheet .mock-progress i:nth-child(2) { animation-delay: .35s; }
html[data-supporting-motion="active"] .rider-flow-screen:not(.how-flow-screen) .rider-trip-sheet .mock-progress i:nth-child(3) { animation-delay: .7s; }
html[data-supporting-motion="active"] .rider-flow-screen:not(.how-flow-screen) .rider-trip-sheet .mock-progress i:nth-child(4) { animation-delay: 1.05s; }

.safety-story { padding-block: clamp(5.5rem, 11vw, 9rem); background: #f6f1e7; }
.section-heading { display: grid; grid-template-columns: 1.05fr .7fr; align-items: end; gap: clamp(2rem, 8vw, 7rem); }
.section-heading .section-intro { margin-block-end: .25rem; }
.safety-story .eyebrow { color: #b74838; }
.reassurance-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin: var(--space-6) 0 var(--space-4); padding: 0; gap: 1px; background: rgba(9,46,41,.16); list-style: none; }
.reassurance-grid li { min-height: 17rem; padding: clamp(1.5rem, 3vw, 2.4rem); background: #f6f1e7; }
.line-icon { display: grid; width: 3rem; height: 3rem; margin-block-end: var(--space-4); place-items: center; border: 1px solid var(--line); border-radius: 50%; color: #a43f31; font-size: .72rem; font-weight: 700; }
.reassurance-grid h3 { margin-block-end: .8rem; font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.2; }
.reassurance-grid p { margin: 0; color: var(--ink-soft); }

.app-access { padding-block: clamp(5.5rem, 11vw, 9rem); background: #d7c6aa; }
.app-shell { display: grid; grid-template-columns: .65fr 1.35fr; align-items: start; gap: clamp(2rem, 7vw, 6rem); }
.app-heading { position: sticky; inset-block-start: 2rem; }
.app-access .eyebrow { color: #8d352b; }
.app-cards { display: grid; gap: 1rem; }
.app-card { min-height: 23rem; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.6rem, 4vw, 3rem); border-radius: 1.3rem; overflow: hidden; }
.app-card h3 { max-width: 14ch; margin-block-end: .75rem; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.035em; }
html[dir="rtl"] .app-card h3 { letter-spacing: 0; }
.app-card > p:not(.app-label) { max-width: 35rem; }
.app-label { margin-block: 0 auto; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
html[dir="rtl"] .app-label { letter-spacing: 0; }
.rider-card { color: var(--white); background: linear-gradient(140deg, #092e29, #15574f); }
.driver-card { color: var(--ink); background: linear-gradient(140deg, #ee765e, #f2a26c); }
.button-light { width: max-content; color: var(--ink); background: var(--white); }
.button-light:hover { background: var(--cream); }
.button-outline-dark { border-color: rgba(9,46,41,.45); }
.button-outline-dark:hover { background: rgba(255,255,255,.3); }

.safety-page-hero, .support-hero { position: relative; overflow: hidden; padding-block: clamp(7rem, 13vw, 10rem) clamp(4.5rem, 9vw, 7rem); color: var(--white); background: radial-gradient(circle at 78% 25%, rgba(239,116,93,.2), transparent 30%), linear-gradient(135deg, #061f1c, #10443e 64%, #173f37); }
.safety-page-hero::before, .support-hero::before { position: absolute; inset: 0; content: ""; opacity: .18; background-image: linear-gradient(120deg, transparent 0 48%, rgba(255,255,255,.16) 49% 50%, transparent 51% 100%); background-size: 4.5rem 4.5rem; pointer-events: none; }
.safety-page-grid, .support-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(20rem, 1.1fr); align-items: center; gap: clamp(2.5rem, 8vw, 7rem); }
.safety-page-hero h1, .support-hero h1 { max-width: 11ch; }
.safety-note { max-width: 38rem; margin: calc(var(--space-3) * -1) 0 var(--space-4); padding-inline-start: 1rem; border-inline-start: .22rem solid var(--coral); color: rgba(255,255,255,.78); }
.safety-visual { position: relative; min-height: 39rem; display: grid; place-items: center; isolation: isolate; }
.safety-route { position: absolute; inset: 8% 9% 10%; border: 1px solid rgba(239,116,93,.48); border-radius: 47% 53% 45% 55%; transform: rotate(-10deg); }
html[dir="rtl"] .safety-route { transform: rotate(10deg); }
.safety-route i { position: absolute; width: .82rem; height: .82rem; border: 2px solid var(--coral); border-radius: 50%; background: #0d3732; box-shadow: 0 0 0 .38rem rgba(239,116,93,.12); }
.safety-route i:first-child { inset-block-start: 18%; inset-inline-start: 18%; }
.safety-route i:nth-child(2) { inset-block-start: 49%; inset-inline-end: 17%; }
.safety-route i:last-child { inset-block-end: 15%; inset-inline-start: 41%; }
.safety-phone { position: relative; width: min(18rem, 62vw); padding: .58rem; border: 1px solid rgba(255,255,255,.24); border-radius: 2.35rem; background: #071714; box-shadow: 0 2rem 5rem rgba(0,0,0,.36); }
.safety-phone .mock-screen { position: relative; overflow: hidden; aspect-ratio: 9 / 18.5; border-radius: 1.9rem; background: var(--cream); }
.safety-app-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; gap: .55rem; padding: .72rem; background: linear-gradient(180deg, #f8f4ea 0 52%, #efe6d5 100%); }
.safety-app-topbar { display: flex; align-items: center; justify-content: space-between; gap: .65rem; color: var(--ink); }
.safety-app-topbar strong { font-size: .92rem; letter-spacing: -.02em; }
.safety-app-topbar span { padding: .42rem .62rem; border-radius: 999px; color: var(--white); background: #0d6b57; font-size: .58rem; font-weight: 800; }
.safety-app-map { position: relative; min-height: 14rem; overflow: hidden; border-radius: 1.2rem; background-color: #dfe8e1; background-image: linear-gradient(35deg, transparent 42%, rgba(255,255,255,.8) 43% 46%, transparent 47%), linear-gradient(118deg, transparent 28%, rgba(255,255,255,.82) 29% 32%, transparent 33%), linear-gradient(7deg, transparent 66%, rgba(255,255,255,.68) 67% 70%, transparent 71%); box-shadow: inset 0 0 0 1px rgba(9,46,41,.08); }
.safety-app-map > i { position: absolute; border-radius: 999px; background: rgba(255,255,255,.62); }
.safety-app-map > i:first-child { inset: 16% auto auto -12%; width: 84%; height: .34rem; transform: rotate(-18deg); }
.safety-app-map > i:nth-child(2) { inset: 48% -10% auto auto; width: 86%; height: .32rem; transform: rotate(27deg); }
.safety-app-map > i:nth-child(3) { inset: auto auto 15% 6%; width: 74%; height: .3rem; transform: rotate(-8deg); }
.safety-app-map svg { position: absolute; inset: 8% 6% 12%; width: 88%; height: 80%; overflow: visible; }
.safety-app-map path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.safety-route-shadow { stroke: rgba(255,255,255,.86); stroke-width: 13; }
.safety-route-line { stroke: var(--coral); stroke-width: 5.5; stroke-dasharray: 248; stroke-dashoffset: 0; }
.safety-pickup-pin, .safety-destination-pin, .safety-vehicle-dot { position: absolute; border-radius: 50%; }
.safety-pickup-pin { inset-block-end: 15%; inset-inline-start: 12%; width: .82rem; height: .82rem; background: #0d6b57; box-shadow: 0 0 0 .32rem rgba(13,107,87,.18); }
.safety-destination-pin { inset-block-start: 11%; inset-inline-end: 9%; width: .92rem; height: .92rem; background: #9c3a2f; box-shadow: 0 0 0 .35rem rgba(156,58,47,.18); }
.safety-vehicle-dot { inset-block-start: 47%; inset-inline-start: 45%; width: 1.18rem; height: .82rem; border-radius: .3rem .3rem .24rem .24rem; background: #092e29; box-shadow: 0 .25rem .7rem rgba(9,46,41,.22); transform: rotate(-24deg); }
.safety-vehicle-dot::before, .safety-vehicle-dot::after { position: absolute; inset-block-end: -.13rem; width: .26rem; height: .26rem; border-radius: 50%; content: ""; background: #fff; }
.safety-vehicle-dot::before { inset-inline-start: .18rem; }
.safety-vehicle-dot::after { inset-inline-end: .18rem; }
.safety-eta-pill { position: absolute; inset-block-start: .75rem; inset-inline-start: .72rem; padding: .38rem .56rem; border-radius: 999px; color: var(--ink); background: rgba(255,255,255,.92); box-shadow: 0 .65rem 1.2rem rgba(9,46,41,.12); font-size: .58rem; font-weight: 800; }
.safety-progress-card, .safety-identity-card, .safety-notification-card { color: var(--ink); background: rgba(255,255,255,.94); box-shadow: 0 .75rem 1.5rem rgba(9,46,41,.13); }
.safety-progress-card { padding: .78rem .85rem; border-radius: 1rem; }
.safety-progress-card small, .safety-identity-card small, .support-card .app-label { color: #9c3a2f; }
.safety-progress-card strong { display: block; margin-block: .18rem .55rem; font-size: .92rem; line-height: 1.16; }
.safety-progress-track { overflow: hidden; height: .42rem; border-radius: 999px; background: rgba(9,46,41,.12); }
.safety-progress-track span { display: block; width: 68%; height: 100%; border-radius: inherit; background: var(--coral); transform-origin: left center; }
html[dir="rtl"] .safety-progress-track span { transform-origin: right center; }
.safety-identity-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .62rem; padding: .78rem; border-radius: 1rem; }
.safety-avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #f6c7a7 0 22%, transparent 23%), linear-gradient(180deg, #123f39 0 48%, #0d6b57 49%); box-shadow: inset 0 0 0 .16rem rgba(255,255,255,.8); }
.safety-identity-card strong { display: block; margin-block: .08rem; font-size: .84rem; line-height: 1.12; }
.safety-identity-card p { margin: 0; color: var(--ink-soft); font-size: .64rem; line-height: 1.25; }
.safety-identity-card b { align-self: start; padding: .32rem .42rem; border-radius: .48rem; color: var(--ink); background: #f6f1e7; font-size: .56rem; letter-spacing: .04em; }
.safety-notification-card { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .48rem; padding: .62rem .72rem; border-radius: .88rem; }
.safety-notification-card span { width: .58rem; height: .58rem; margin-block-start: .16rem; border-radius: 50%; background: #0d6b57; box-shadow: 0 0 0 .24rem rgba(13,107,87,.16); }
.safety-notification-card p { margin: 0; color: var(--ink-soft); font-size: .64rem; line-height: 1.28; }
.safety-controls, .support-controls { inset-inline: auto 0; inset-block: auto 0; justify-content: flex-end; }
.safety-controls .media-status, .support-controls .media-status { color: rgba(255,255,255,.78); }
.safety-proof { padding-block: clamp(5.5rem, 11vw, 9rem); background: #f6f1e7; }
.safety-proof .eyebrow, .support-paths .eyebrow { color: #b74838; }
.safety-proof-grid { grid-template-columns: repeat(4, 1fr); }
.safety-help, .support-paths { padding-block: clamp(5rem, 10vw, 8rem); background: var(--cream); }
.safety-help-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: clamp(1.6rem, 4vw, 3rem); border-radius: 1.3rem; color: var(--white); background: #061f1c; box-shadow: 0 1.7rem 4rem rgba(9,46,41,.16); }
.safety-help-card p:not(.eyebrow) { max-width: 39rem; color: rgba(255,255,255,.74); }
.support-card { position: relative; min-height: 24rem; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid rgba(255,255,255,.18); border-radius: 1.35rem; color: var(--ink); background: rgba(255,255,255,.94); box-shadow: 0 2rem 5rem rgba(0,0,0,.28); isolation: isolate; }
.support-card h2 { max-width: 11ch; margin-block-end: var(--space-2); font-size: clamp(2rem, 3.8vw, 3.2rem); }
.support-email { width: max-content; max-width: 100%; padding: .7rem 1rem; border: 1px solid rgba(9,46,41,.18); border-radius: 999px; color: var(--ink); background: var(--cream); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.support-card > p:not(.app-label) { max-width: 26rem; color: var(--ink-soft); }
.support-orbit { position: absolute; inset: 9% 8% 13%; z-index: -1; border: 1px solid rgba(239,116,93,.36); border-radius: 50%; opacity: .74; transform: rotate(14deg); }
html[dir="rtl"] .support-orbit { transform: rotate(-14deg); }
.support-orbit i { position: absolute; width: .72rem; height: .72rem; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 .45rem rgba(239,116,93,.14); }
.support-orbit i:first-child { inset-block-start: 12%; inset-inline-start: 22%; }
.support-orbit i:nth-child(2) { inset-block-start: 42%; inset-inline-end: 8%; }
.support-orbit i:last-child { inset-block-end: 13%; inset-inline-start: 38%; }
.support-path-grid .download-app-card { min-height: 20rem; }
.safety-visual[data-safety-state="motion"][data-motion-paused="false"] .safety-phone { animation: product-float 6.4s ease-in-out infinite alternate; }
.safety-visual[data-safety-state="motion"][data-motion-paused="false"] .safety-route i { animation: route-pulse 3s ease-out infinite; }
.safety-visual[data-safety-state="motion"][data-motion-paused="false"] .safety-route i:nth-child(2) { animation-delay: -.75s; }
.safety-visual[data-safety-state="motion"][data-motion-paused="false"] .safety-route i:last-child { animation-delay: -1.5s; }
.safety-visual[data-safety-state="motion"][data-motion-paused="false"] .safety-route-line { animation: safety-route-draw 6.4s ease-in-out infinite; }
.safety-visual[data-safety-state="motion"][data-motion-paused="false"] .safety-vehicle-dot { animation: safety-vehicle-trip 6.4s ease-in-out infinite; }
.safety-visual[data-safety-state="motion"][data-motion-paused="false"] .safety-progress-track span { animation: safety-progress 6.4s ease-in-out infinite; }
.safety-visual[data-safety-state="motion"][data-motion-paused="false"] .safety-notification-card { animation: safety-notification 6.4s ease-in-out infinite; }
.support-card[data-support-state="motion"][data-motion-paused="false"] .support-orbit { animation: support-breathe 8s ease-in-out infinite alternate; }
.support-card[data-support-state="motion"][data-motion-paused="false"] .support-orbit i { animation: route-pulse 3.5s ease-out infinite; }
.support-card[data-support-state="motion"][data-motion-paused="false"] .support-orbit i:nth-child(2) { animation-delay: -1.1s; }
.support-card[data-support-state="motion"][data-motion-paused="false"] .support-orbit i:last-child { animation-delay: -2.2s; }
.safety-visual:not([data-safety-state="motion"]) .safety-route i, .support-card:not([data-support-state="motion"]) .support-orbit i { box-shadow: 0 0 0 .25rem rgba(239,116,93,.12); }

.driver-proposition { position: relative; overflow: hidden; padding-block: clamp(5rem, 10vw, 8rem) 0; color: var(--white); background: #061f1c; }
.driver-proposition::after { position: absolute; inset: auto -8% -45% auto; width: 35rem; height: 35rem; border-radius: 50%; content: ""; background: rgba(239,116,93,.16); filter: blur(2px); }
.driver-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr minmax(15rem, .55fr); align-items: center; gap: clamp(2rem, 10vw, 9rem); }
.driver-proposition .section-intro { color: rgba(255,255,255,.7); }
.driver-proposition .button-row { align-items: center; }
.text-link-light { color: var(--white); }
.driver-phone { align-self: end; width: min(18rem, 65vw); margin: 0 auto; padding: .55rem .55rem 0; border: 1px solid rgba(255,255,255,.24); border-block-end: 0; border-radius: 2.5rem 2.5rem 0 0; background: #071714; box-shadow: 0 2rem 5rem rgba(0,0,0,.38); }
.driver-phone .mock-screen { border-radius: 2rem 2rem 0 0; }
.driver-phone .mock-map { inset-block-end: 47%; }
.home-driver-phone .mock-screen { min-height: 34.4rem; }
.driver-flow-screen { display: grid; grid-template-rows: 1fr auto auto; padding: .95rem; background: linear-gradient(180deg, #dfe8e1 0 52%, #f8f4ea 52% 100%); }
.driver-flow-map { position: absolute; inset: 0 0 43%; overflow: hidden; background-color: #dfe8e1; background-image: linear-gradient(32deg, transparent 44%, rgba(255,255,255,.85) 45% 48%, transparent 49%), linear-gradient(112deg, transparent 28%, rgba(255,255,255,.75) 29% 32%, transparent 33%); }
.driver-flow-map > i:first-child { inset: 24% auto auto -6%; width: 86%; height: .4rem; transform: rotate(18deg); }
.driver-flow-map > i:nth-child(2) { inset: 54% -14% auto auto; width: 92%; height: .38rem; transform: rotate(-24deg); }
.driver-flow-map > i:nth-child(3) { inset: auto auto 19% 8%; width: 76%; height: .35rem; transform: rotate(8deg); }
.driver-flow-car { position: absolute; inset: 50% auto auto 52%; width: 2.1rem; height: 1.15rem; border-radius: .42rem .42rem .3rem .3rem; background: var(--ink); box-shadow: 0 .35rem .9rem rgba(9,46,41,.24); transform: rotate(-12deg); }
.driver-flow-car::before { position: absolute; inset: -.4rem .48rem auto; height: .52rem; border-radius: .25rem .25rem 0 0; content: ""; background: #2f6a62; }
.driver-top-card, .driver-request-card, .driver-follow-card { position: relative; z-index: 3; border: 1px solid rgba(9,46,41,.08); background: rgba(255,255,255,.95); box-shadow: 0 .8rem 1.8rem rgba(9,46,41,.12); }
.driver-top-card { align-self: start; display: grid; width: 72%; padding: .75rem .85rem; border-radius: 1rem; }
.driver-top-card strong, .driver-request-card strong, .driver-follow-card strong { display: block; font-size: .98rem; line-height: 1.12; }
.driver-top-card span { width: max-content; margin-block-start: .45rem; padding: .28rem .55rem; border-radius: 999px; color: var(--white); background: #0d6b57; font-size: .64rem; font-weight: 800; }
.driver-request-card { align-self: end; display: grid; margin-block-end: .55rem; padding: .85rem; border-radius: 1.15rem; }
.driver-request-card span { margin-block-start: .75rem; padding: .58rem .7rem; border-radius: .75rem; color: var(--white); background: var(--coral); font-size: .72rem; font-weight: 800; text-align: center; box-shadow: 0 .45rem 1rem rgba(183,72,56,.24); }
.driver-follow-card { margin-inline: -.25rem; padding: .95rem 1rem 1rem; border-radius: 1.2rem 1.2rem .2rem .2rem; }
.driver-follow-card .mock-progress { margin-block-start: .8rem; }
.driver-follow-card .mock-progress i { background: rgba(9,46,41,.14); }
.driver-follow-card .mock-progress i:first-child, .driver-follow-card .mock-progress i:nth-child(2) { background: var(--coral); }
.driver-status { position: absolute; inset: auto 0 0; min-height: 49%; padding: 1.2rem; color: var(--ink); background: var(--white); }
.driver-status strong { display: block; margin-block: .15rem 1rem; font-size: 1.15rem; }
.driver-status ul { display: grid; margin: 0; padding: 0; gap: .5rem; list-style: none; }
.driver-status li { padding: .55rem .65rem; border-radius: .45rem; background: var(--cream); font-size: .76rem; font-weight: 600; }
.driver-status li::before { display: inline-block; width: .42rem; height: .42rem; margin-inline-end: .55rem; border-radius: 50%; content: ""; background: var(--coral); }
.driver-phone figcaption { padding-block-end: 1rem; }
html[data-supporting-motion="active"] .driver-flow-screen .driver-flow-car { animation: driver-home-car 7.5s ease-in-out infinite; }
html[data-supporting-motion="active"] .driver-flow-screen .driver-top-card span { animation: driver-online-pulse 2.4s ease-out infinite; }
html[data-supporting-motion="active"] .driver-flow-screen .driver-request-card { animation: driver-request-cycle 7.5s ease-in-out infinite; }
html[data-supporting-motion="active"] .driver-flow-screen .driver-request-card span { animation: driver-accept-tap 7.5s ease-in-out infinite; }
html[data-supporting-motion="active"] .driver-flow-screen .driver-follow-card .mock-progress i:nth-child(3) { animation: driver-follow-progress 7.5s ease-in-out infinite; }

.download-hero { position: relative; overflow: hidden; min-height: 44rem; padding-block: clamp(7rem, 13vw, 10rem) clamp(4.5rem, 9vw, 7rem); color: var(--white); background: radial-gradient(circle at 78% 28%, rgba(239,116,93,.2), transparent 28%), linear-gradient(135deg, #061f1c, #10443e 64%, #173f37); }
.download-hero::before { position: absolute; inset: 0; content: ""; opacity: .24; background-image: linear-gradient(120deg, transparent 0 48%, rgba(255,255,255,.16) 49% 50%, transparent 51% 100%); background-size: 4.5rem 4.5rem; pointer-events: none; }
.download-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .86fr) minmax(23rem, 1.14fr); align-items: center; gap: clamp(2.5rem, 8vw, 7rem); }
.download-copy h1 { max-width: 10ch; }
.download-note { max-width: 38rem; margin: 1.3rem 0 var(--space-4); color: rgba(255,255,255,.72); }
.download-visual { position: relative; min-height: 39rem; display: grid; place-items: center; isolation: isolate; }
.download-orbit { position: absolute; inset: 8% 3% 9%; border: 1px solid rgba(239,116,93,.48); border-radius: 50%; transform: rotate(-12deg); }
html[dir="rtl"] .download-orbit { transform: rotate(12deg); }
.download-orbit i { position: absolute; width: .72rem; height: .72rem; border: 2px solid var(--coral); border-radius: 50%; background: #0d3732; box-shadow: 0 0 0 .42rem rgba(239,116,93,.12); }
.download-orbit i:first-child { inset-block-start: 7%; inset-inline-start: 17%; }
.download-orbit i:nth-child(2) { inset-block-start: 48%; inset-inline-end: -1%; }
.download-orbit i:last-child { inset-block-end: 10%; inset-inline-start: 25%; }
.download-store-stack { position: absolute; z-index: 4; inset-inline-start: 2%; inset-block-start: 10%; display: grid; gap: .55rem; padding: .8rem; border: 1px solid rgba(255,255,255,.16); border-radius: 1rem; background: rgba(6,31,28,.7); box-shadow: 0 1.2rem 3rem rgba(0,0,0,.22); backdrop-filter: blur(14px); }
.download-store-stack span { min-width: 7.8rem; padding: .48rem .72rem; border-radius: 999px; color: var(--ink); background: var(--white); font-size: .82rem; font-weight: 800; letter-spacing: -.01em; text-align: center; }
.download-store-stack i { justify-self: center; width: 2.55rem; height: 2.55rem; border-radius: 50%; background: var(--coral); box-shadow: 0 .75rem 1.5rem rgba(239,116,93,.3); position: relative; }
.download-store-stack i::before { position: absolute; inset: .72rem .98rem 1.05rem; content: ""; border-inline-end: .22rem solid var(--white); border-block-end: .22rem solid var(--white); transform: rotate(45deg); }
.download-store-stack i::after { position: absolute; inset-inline-start: 50%; inset-block-start: .62rem; width: .22rem; height: 1.05rem; content: ""; border-radius: 999px; background: var(--white); transform: translateX(-50%); }
html[dir="rtl"] .download-store-stack { inset-inline: auto 2%; }
.download-phone-rider { transform: translateX(-18%) rotate(-4deg); }
.download-phone-driver { position: absolute; z-index: 3; inset-inline-end: 5%; inset-block-end: 0; width: min(16rem, 46vw); transform: rotate(4deg); }
html[dir="rtl"] .download-phone-rider { transform: translateX(18%) rotate(4deg); }
html[dir="rtl"] .download-phone-driver { inset-inline: 5% auto; transform: rotate(-4deg); }
html[data-supporting-motion="active"] .download-hero[data-download-state="motion"][data-motion-paused="false"] .download-phone-rider { animation: product-float 6.2s ease-in-out infinite alternate; }
html[data-supporting-motion="active"] .download-hero[data-download-state="motion"][data-motion-paused="false"] .download-phone-driver { animation: product-float 6.8s ease-in-out infinite alternate-reverse; }
html[data-supporting-motion="active"] .download-hero[data-download-state="motion"][data-motion-paused="false"] .download-orbit i { animation: route-pulse 2.7s ease-out infinite; }
.download-hero:not([data-download-state="motion"]) .download-orbit i { box-shadow: 0 0 0 .25rem rgba(239,116,93,.12); }
.download-controls { position: absolute; inset-inline: 0; inset-block-end: 0; }

.download-apps { padding-block: clamp(5.5rem, 11vw, 9rem); background: #d7c6aa; }
.download-section-heading { margin-block-end: var(--space-5); }
.download-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.download-app-card { position: relative; min-height: 24rem; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.6rem, 4vw, 3rem); border-radius: 1.3rem; overflow: hidden; }
.download-app-card h3 { max-width: 15ch; margin-block-end: .75rem; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.035em; }
html[dir="rtl"] .download-app-card h3 { letter-spacing: 0; }
.download-app-card > p:not(.app-label):not(.availability-note) { max-width: 36rem; }
.rider-download-card { color: var(--white); background: linear-gradient(140deg, #092e29, #15574f); }
.driver-download-card { color: var(--ink); background: linear-gradient(140deg, #ee765e, #f2a26c); }
.download-card-visual { position: absolute; inset-inline-end: clamp(1rem, 3vw, 2rem); inset-block-start: clamp(1rem, 3vw, 2rem); display: flex; gap: .45rem; align-items: center; opacity: .96; }
.download-card-visual span { padding: .45rem .65rem; border-radius: 999px; font-size: .76rem; font-weight: 850; letter-spacing: .01em; }
.download-card-visual-passenger span { color: #092e29; background: rgba(255,255,255,.9); }
.download-card-visual-driver span { color: #092e29; background: rgba(255,255,255,.76); }
.download-card-visual-driver i { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #092e29; position: relative; box-shadow: 0 .7rem 1.25rem rgba(9,46,41,.18); }
.download-card-visual-driver i::before { position: absolute; inset: .6rem .83rem .9rem; content: ""; border-inline-end: .2rem solid var(--white); border-block-end: .2rem solid var(--white); transform: rotate(45deg); }
.download-card-visual-driver i::after { position: absolute; inset-inline-start: 50%; inset-block-start: .52rem; width: .2rem; height: .95rem; content: ""; border-radius: 999px; background: var(--white); transform: translateX(-50%); }
.availability-note { margin: var(--space-3) 0 0; color: rgba(9,46,41,.74); font-size: .9rem; font-weight: 600; }

.download-qr-section { padding-block: clamp(5rem, 10vw, 8rem); color: var(--white); background: #061f1c; }
.download-qr-shell { display: grid; grid-template-columns: minmax(0, .7fr) minmax(20rem, 1.3fr); align-items: start; gap: clamp(2rem, 7vw, 6rem); }
.qr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.qr-card { display: grid; min-height: 18rem; padding: 1rem; gap: .85rem; align-content: start; border: 1px solid rgba(255,255,255,.14); border-radius: 1rem; color: var(--white); background: rgba(255,255,255,.06); text-decoration: none; transition: transform .18s ease, background .18s ease; }
.qr-card:hover { transform: translateY(-2px); background: rgba(255,255,255,.1); }
.qr-art { display: grid; aspect-ratio: 1; place-items: center; padding: .7rem; border-radius: .75rem; background: #fff; }
.qr-art img { display: block; width: 100%; height: 100%; }
.qr-card strong { line-height: 1.2; }
.qr-card small { color: rgba(255,255,255,.62); }

.how-overview { padding-block: clamp(5rem, 10vw, 8rem); background: var(--cream); }
.how-overview .eyebrow { color: #b74838; }
.how-overview-grid { display: grid; grid-template-columns: 1fr .72fr; align-items: end; gap: clamp(2rem, 8vw, 7rem); }
.how-overview-grid .section-intro { margin-block-end: .35rem; }

.how-journey { position: relative; overflow: hidden; padding-block: clamp(5.5rem, 11vw, 9rem); color: var(--white); background: radial-gradient(circle at 18% 28%, rgba(239,116,93,.18), transparent 28%), linear-gradient(135deg, #061f1c, #0f453f 62%, #173f37); }
.how-journey::before { position: absolute; inset: 0; z-index: 1; content: ""; opacity: .22; background-image: linear-gradient(120deg, transparent 0 48%, rgba(255,255,255,.16) 49% 50%, transparent 51% 100%); background-size: 4.5rem 4.5rem; pointer-events: none; }
.how-journey::after { position: absolute; inset: -1rem; z-index: 0; content: ""; opacity: .14; background-image: url("/public-site/media/hero-nouakchott-desktop.jpg"); background-size: cover; background-position: center; filter: blur(.32rem) saturate(.72) brightness(.78); transform: scale(1.03); pointer-events: none; }
html[data-data-saver="true"] .how-journey::after { background-image: url("/public-site/media/hero-nouakchott-desktop-lite.webp"); }
.how-journey-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(20rem, .84fr) minmax(0, 1.16fr); align-items: center; gap: clamp(2.5rem, 8vw, 7rem); }
.how-copy h2 { max-width: 12ch; }
.how-step-list { display: grid; margin: var(--space-5) 0 0; padding: 0; gap: .65rem; list-style: none; counter-reset: how-steps; }
.how-step-list li { display: grid; grid-template-columns: 2.75rem 1fr; padding: 1rem; gap: var(--space-2); border: 1px solid rgba(255,255,255,.13); border-radius: .95rem; background: rgba(255,255,255,.055); backdrop-filter: blur(10px); }
.how-step-list > li > span { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border: 1px solid rgba(239,116,93,.5); border-radius: 50%; color: var(--coral); font-size: .68rem; font-weight: 700; letter-spacing: .1em; }
.how-step-list h3 { margin-block-end: .15rem; font-size: 1.14rem; line-height: 1.25; }
.how-step-list p { margin: 0; color: rgba(255,255,255,.68); font-size: .94rem; }
.how-visual { position: relative; min-height: 42rem; display: grid; place-items: center; isolation: isolate; }
.how-path { position: absolute; inset: 5% 0 8%; z-index: 1; border: 1px solid rgba(239,116,93,.5); border-inline-end: 0; border-radius: 50% 0 0 50%; }
html[dir="rtl"] .how-path { border-inline: 0 1px solid rgba(239,116,93,.5); border-radius: 0 50% 50% 0; }
.how-path i { position: absolute; width: .82rem; height: .82rem; border: 2px solid var(--coral); border-radius: 50%; background: #0d3732; box-shadow: 0 0 0 .42rem rgba(239,116,93,.12); }
.how-path i:nth-child(1) { inset-block-start: 4%; inset-inline-start: 44%; }
.how-path i:nth-child(2) { inset-block-start: 18%; inset-inline-start: 14%; }
.how-path i:nth-child(3) { inset-block-start: 39%; inset-inline-start: -1%; }
.how-path i:nth-child(4) { inset-block-start: 60%; inset-inline-start: 5%; }
.how-path i:nth-child(5) { inset-block-start: 79%; inset-inline-start: 36%; }
.how-phone { z-index: 2; transform: rotate(-3deg); }
html[dir="rtl"] .how-phone { transform: rotate(3deg); }
.how-flow-screen .rider-search-card span { max-width: 100%; }
.how-flow-screen .rider-flow-map { margin-block-end: -.15rem; }
.how-flow-screen .rider-trip-sheet { margin-block-start: -.45rem; }
.how-phone-stages { position: absolute; z-index: 5; inset-inline: 1rem; inset-block-start: 13.2rem; display: grid; pointer-events: none; }
.how-phone-stages span { grid-area: 1 / 1; justify-self: start; max-width: 72%; padding: .48rem .65rem; border-radius: 999px; color: var(--white); background: rgba(9,46,41,.86); box-shadow: 0 .65rem 1.5rem rgba(9,46,41,.16); font-size: .66rem; font-weight: 800; line-height: 1.15; opacity: 0; transform: translateY(.35rem); }
html[dir="rtl"] .how-phone-stages span { justify-self: end; }
.how-controls { position: static; justify-content: flex-start; margin-block-start: var(--space-4); }
.how-controls .media-status { width: auto; text-align: start; }
.how-journey[data-how-state="motion"][data-motion-paused="false"] .how-phone { animation: product-float 6.4s ease-in-out infinite alternate; }
.how-journey[data-how-state="motion"][data-motion-paused="false"] .how-path i { animation: how-step-pulse 10s ease-in-out infinite; }
.how-journey[data-how-state="motion"][data-motion-paused="false"] .how-path i:nth-child(2) { animation-delay: -8s; }
.how-journey[data-how-state="motion"][data-motion-paused="false"] .how-path i:nth-child(3) { animation-delay: -6s; }
.how-journey[data-how-state="motion"][data-motion-paused="false"] .how-path i:nth-child(4) { animation-delay: -4s; }
.how-journey[data-how-state="motion"][data-motion-paused="false"] .how-path i:nth-child(5) { animation-delay: -2s; }
.how-journey[data-how-state="motion"][data-motion-paused="false"] .how-flow-screen .rider-search-card span { animation: how-search-reveal 10s ease-in-out infinite; }
.how-journey[data-how-state="motion"][data-motion-paused="false"] .how-flow-screen .rider-search-card span::after { animation: rider-caret 1s steps(2, jump-none) infinite; }
.how-journey[data-how-state="motion"][data-motion-paused="false"] .how-flow-screen .rider-route { animation: how-route-draw 10s ease-in-out infinite; }
.how-journey[data-how-state="motion"][data-motion-paused="false"] .how-flow-screen .rider-vehicle { animation: how-vehicle-trip 10s ease-in-out infinite; }
.how-journey[data-how-state="motion"][data-motion-paused="false"] .how-flow-screen .rider-trip-sheet .mock-progress i { animation: how-progress-step 10s ease-in-out infinite; }
.how-journey[data-how-state="motion"][data-motion-paused="false"] .how-flow-screen .rider-trip-sheet .mock-progress i:nth-child(2) { animation-delay: .35s; }
.how-journey[data-how-state="motion"][data-motion-paused="false"] .how-flow-screen .rider-trip-sheet .mock-progress i:nth-child(3) { animation-delay: .7s; }
.how-journey[data-how-state="motion"][data-motion-paused="false"] .how-flow-screen .rider-trip-sheet .mock-progress i:nth-child(4) { animation-delay: 1.05s; }
.how-journey[data-how-state="motion"][data-motion-paused="false"] .how-phone-stages span { animation: how-stage-label 10s ease-in-out infinite; }
.how-journey[data-how-state="motion"][data-motion-paused="false"] .how-phone-stages span:nth-child(2) { animation-delay: -8s; }
.how-journey[data-how-state="motion"][data-motion-paused="false"] .how-phone-stages span:nth-child(3) { animation-delay: -6s; }
.how-journey[data-how-state="motion"][data-motion-paused="false"] .how-phone-stages span:nth-child(4) { animation-delay: -4s; }
.how-journey[data-how-state="motion"][data-motion-paused="false"] .how-phone-stages span:nth-child(5) { animation-delay: -2s; }
.how-journey:not([data-how-state="motion"]) .how-path i { box-shadow: 0 0 0 .25rem rgba(239,116,93,.12); }
.how-journey:not([data-how-state="motion"]) .how-phone-stages span:first-child { opacity: 1; transform: none; }

.how-fallback { padding-block: clamp(5rem, 10vw, 8rem); color: var(--white); background: #061f1c; }
.how-fallback-grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(20rem, 1.22fr); align-items: stretch; gap: 1rem; }
.how-fallback .section-intro { color: rgba(255,255,255,.7); }
.how-download-card { display: flex; flex-direction: column; justify-content: flex-end; min-height: 24rem; padding: clamp(1.6rem, 4vw, 3rem); border-radius: 1.3rem; background: linear-gradient(140deg, #092e29, #15574f); }
.how-download-card h2 { max-width: 12ch; }
.how-download-card p:not(.eyebrow) { max-width: 36rem; color: rgba(255,255,255,.74); }

.driver-page-hero, .requirements-hero { position: relative; overflow: hidden; padding-block: clamp(7.5rem, 14vw, 11rem) clamp(4.5rem, 9vw, 7rem); color: var(--white); background: radial-gradient(circle at 78% 24%, rgba(239,116,93,.2), transparent 30%), linear-gradient(135deg, #061f1c, #10443e 62%, #173f37); }
.driver-page-hero::before, .requirements-hero::before { position: absolute; inset: 0; content: ""; opacity: .22; background-image: linear-gradient(120deg, transparent 0 48%, rgba(255,255,255,.16) 49% 50%, transparent 51% 100%); background-size: 4.5rem 4.5rem; pointer-events: none; }
.driver-page-hero-grid, .requirements-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(18rem, .65fr); align-items: center; gap: clamp(2.5rem, 9vw, 8rem); }
.driver-page-hero h1, .requirements-hero h1 { max-width: 11ch; }
.driver-page-phone { width: min(19rem, 72vw); border-block-end: 1px solid rgba(255,255,255,.24); border-radius: 2.5rem; padding-block-end: .55rem; transform: rotate(3deg); }
html[dir="rtl"] .driver-page-phone { transform: rotate(-3deg); }
.driver-page-phone .mock-screen { border-radius: 2rem; }
.driver-page-phone figcaption { padding-block-end: .55rem; }

.driver-journey { position: relative; overflow: hidden; padding-block: clamp(5.5rem, 11vw, 9rem); color: var(--white); background: #061f1c; }
.driver-journey::before { position: absolute; inset: auto -10% -42% auto; width: 34rem; height: 34rem; border-radius: 50%; content: ""; background: rgba(239,116,93,.16); pointer-events: none; }
.driver-journey-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(20rem, .92fr); align-items: center; gap: clamp(2.5rem, 8vw, 7rem); }
.driver-journey-copy h2 { max-width: 13ch; }
.driver-journey .section-intro { color: rgba(255,255,255,.7); }
.driver-step-list, .requirements-list { display: grid; margin: var(--space-5) 0 0; padding: 0; gap: .65rem; list-style: none; }
.driver-step-list li, .requirements-list li { display: grid; grid-template-columns: 2.75rem 1fr; padding: 1rem; gap: var(--space-2); border: 1px solid rgba(255,255,255,.13); border-radius: .95rem; background: rgba(255,255,255,.055); backdrop-filter: blur(10px); }
.driver-step-list > li > span, .requirements-list > li > span { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border: 1px solid rgba(239,116,93,.5); border-radius: 50%; color: var(--coral); font-size: .68rem; font-weight: 700; letter-spacing: .1em; }
.driver-step-list h3, .requirements-list h3 { margin-block-end: .15rem; font-size: 1.14rem; line-height: 1.25; }
.driver-step-list p, .requirements-list p { margin: 0; color: rgba(255,255,255,.68); font-size: .94rem; }
.driver-controls { position: static; justify-content: flex-start; margin-block-start: var(--space-4); }
.driver-controls .media-status { width: auto; text-align: start; }

.driver-journey-visual { position: relative; min-height: 38rem; display: grid; place-items: center; isolation: isolate; }
.driver-onboarding { position: relative; width: min(32rem, 100%); min-height: 36rem; display: grid; place-items: center; padding: 1rem; }
.driver-onboarding::before { position: absolute; inset: 2rem 1rem; border: 1px solid rgba(255,255,255,.12); border-radius: 2rem; content: ""; background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2rem 5rem rgba(0,0,0,.2); }
.driver-onboarding-line { position: absolute; inset: 4.5rem 50% 4.5rem auto; width: .22rem; border-radius: 999px; background: linear-gradient(180deg, var(--coral), rgba(239,116,93,.16)); transform: translateX(50%); }
.driver-onboarding-phone { position: absolute; z-index: 2; width: 9.5rem; min-height: 16rem; display: grid; align-content: start; gap: .7rem; padding: 1.3rem .9rem 1rem; border: .45rem solid #071714; border-radius: 1.45rem; background: #f6f1e7; box-shadow: 0 1.4rem 3rem rgba(0,0,0,.34); transform: rotate(-3deg); }
html[dir="rtl"] .driver-onboarding-phone { transform: rotate(3deg); }
.driver-app-dot { width: 2.4rem; height: .35rem; justify-self: center; border-radius: 999px; background: rgba(9,46,41,.22); }
.driver-app-card { height: 2.45rem; border-radius: .65rem; background: rgba(9,46,41,.1); box-shadow: inset 2.8rem 0 0 var(--coral), inset 0 -.35rem 0 rgba(9,46,41,.05); }
.driver-app-card:nth-of-type(3) { box-shadow: inset 2.8rem 0 0 #0d6b57, inset 0 -.35rem 0 rgba(9,46,41,.05); }
.driver-app-action { margin-block-start: auto; height: 2.1rem; border-radius: 999px; background: #0d6b57; box-shadow: 0 .7rem 1.2rem rgba(13,107,87,.24); }
.driver-onboarding-steps { position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; list-style: none; }
.driver-onboarding-steps li { position: absolute; display: grid; grid-template-columns: 2.75rem minmax(6rem, 9rem); align-items: center; gap: .7rem; padding: .65rem .75rem; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: var(--ink); background: rgba(255,250,239,.96); box-shadow: 0 .9rem 2rem rgba(0,0,0,.2); }
.driver-onboarding-steps li:nth-child(1) { inset-block-start: 3%; inset-inline-start: 3%; }
.driver-onboarding-steps li:nth-child(2) { inset-block-start: 17%; inset-inline-end: 0; }
.driver-onboarding-steps li:nth-child(3) { inset-block-start: 37%; inset-inline-start: 0; }
.driver-onboarding-steps li:nth-child(4) { inset-block-start: 57%; inset-inline-end: 2%; }
.driver-onboarding-steps li:nth-child(5) { inset-block-end: 15%; inset-inline-start: 6%; }
.driver-onboarding-steps li:nth-child(6) { inset-block-end: 0; inset-inline-end: 5%; }
.driver-onboarding-steps strong { font-size: .78rem; line-height: 1.15; }
.onboarding-icon { position: relative; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #0d6b57; box-shadow: 0 0 0 .32rem rgba(13,107,87,.12); }
.onboarding-icon::before, .onboarding-icon::after { position: absolute; content: ""; }
.onboarding-icon-download::before { inset: .45rem .9rem .58rem; border-inline: .16rem solid var(--white); border-block-end: .16rem solid var(--white); }
.onboarding-icon-download::after { inset: .54rem .65rem auto; width: .78rem; height: .78rem; border-inline-end: .18rem solid var(--white); border-block-end: .18rem solid var(--white); transform: rotate(45deg); }
.onboarding-icon-account::before { inset: .45rem .72rem auto; height: .72rem; border-radius: 50%; background: var(--white); }
.onboarding-icon-account::after { inset: 1.22rem .46rem .42rem; border-radius: .7rem .7rem .45rem .45rem; background: var(--white); }
.onboarding-icon-docs::before { inset: .45rem .62rem .42rem; border-radius: .2rem; background: var(--white); box-shadow: .28rem .28rem 0 rgba(255,255,255,.65); }
.onboarding-icon-docs::after { inset: .8rem .86rem auto; height: .16rem; border-radius: 999px; background: #0d6b57; box-shadow: 0 .42rem 0 #0d6b57; }
.onboarding-icon-validated::before { inset: .54rem .44rem .62rem .62rem; border-inline-start: .22rem solid var(--white); border-block-end: .22rem solid var(--white); transform: rotate(-45deg); }
.onboarding-icon-ready { background: var(--coral); }
.onboarding-icon-ready::before { inset: .57rem; border: .17rem solid var(--white); border-radius: 50%; }
.onboarding-icon-ready::after { inset: .92rem .54rem auto auto; width: .58rem; height: .18rem; border-radius: 999px; background: var(--white); transform-origin: left center; transform: rotate(35deg); }
.onboarding-icon-request::before { inset: .48rem .42rem .62rem; border-radius: .5rem; background: var(--white); }
.onboarding-icon-request::after { inset: 1.42rem auto auto .75rem; width: .52rem; height: .52rem; background: var(--white); transform: rotate(45deg); }
.driver-support-vehicles { position: absolute; inset: auto 1rem 1.8rem; z-index: 1; display: flex; justify-content: space-between; opacity: .42; pointer-events: none; }
.support-vehicle { position: relative; width: 5.6rem; height: 1.9rem; border-radius: 45% 48% 22% 22% / 58% 58% 34% 34%; background: #f4f0e7; box-shadow: 0 .8rem 1.5rem rgba(0,0,0,.22); }
.support-vehicle::before { position: absolute; inset: .32rem 25% auto 28%; height: .72rem; border-radius: .7rem .7rem .18rem .18rem; content: ""; background: rgba(9,46,41,.62); }
.support-vehicle::after { position: absolute; inset: auto 15% -.28rem; height: .42rem; border-radius: 999px; content: ""; background: linear-gradient(90deg, #071714 0 .58rem, transparent .58rem calc(100% - .58rem), #071714 calc(100% - .58rem)); }
.support-vehicle-suv { width: 6rem; background: #d8bd8b; border-radius: 38% 34% 20% 20% / 50% 48% 34% 34%; transform: translateY(-.6rem); }
.vehicle { position: relative; z-index: 2; width: min(19rem, 72vw); height: 6.3rem; border-radius: 45% 48% 22% 22% / 58% 58% 34% 34%; background: #f4f0e7; box-shadow: 0 2rem 4rem rgba(0,0,0,.35); }
.vehicle::before { position: absolute; inset: .95rem 26% auto 28%; height: 2.2rem; border-radius: 1.3rem 1.3rem .35rem .35rem; content: ""; background: linear-gradient(90deg, rgba(9,46,41,.85), rgba(23,83,76,.74)); }
.vehicle::after { position: absolute; inset: auto 9% .68rem; height: .55rem; border-radius: 999px; content: ""; background: rgba(9,46,41,.16); }
.vehicle span { position: absolute; inset: 3.2rem 13% auto; height: .42rem; border-radius: 999px; background: rgba(9,46,41,.16); }
.vehicle i { position: absolute; inset-block-end: -.85rem; width: 2rem; height: 2rem; border: .38rem solid #071714; border-radius: 50%; background: #243b38; box-shadow: inset 0 0 0 .24rem #87908b; }
.vehicle i:first-of-type { inset-inline-start: 18%; }
.vehicle i:last-of-type { inset-inline-end: 18%; }
.vehicle-sedan { align-self: start; justify-self: start; margin-block-start: 4.5rem; transform: rotate(-4deg); }
.vehicle-suv { justify-self: end; margin-block-start: 12rem; background: #d8bd8b; border-radius: 38% 34% 20% 20% / 50% 48% 34% 34%; transform: rotate(4deg) scale(1.08); }
.vehicle-suv::before { inset-inline: 22% 20%; }
html[dir="rtl"] .vehicle-sedan { justify-self: end; transform: rotate(4deg); }
html[dir="rtl"] .vehicle-suv { justify-self: start; transform: rotate(-4deg) scale(1.08); }
.driver-journey[data-driver-state="motion"][data-motion-paused="false"] .driver-onboarding-phone { animation: onboarding-phone 8.4s ease-in-out infinite; }
html[dir="rtl"] .driver-journey[data-driver-state="motion"][data-motion-paused="false"] .driver-onboarding-phone { animation-name: onboarding-phone-rtl; }
.driver-journey[data-driver-state="motion"][data-motion-paused="false"] .driver-onboarding-line { animation: onboarding-line 8.4s ease-in-out infinite; }
.driver-journey[data-driver-state="motion"][data-motion-paused="false"] .driver-onboarding-steps li { animation: onboarding-step 8.4s ease-in-out infinite; }
.driver-journey[data-driver-state="motion"][data-motion-paused="false"] .driver-onboarding-steps li:nth-child(2) { animation-delay: .7s; }
.driver-journey[data-driver-state="motion"][data-motion-paused="false"] .driver-onboarding-steps li:nth-child(3) { animation-delay: 1.4s; }
.driver-journey[data-driver-state="motion"][data-motion-paused="false"] .driver-onboarding-steps li:nth-child(4) { animation-delay: 2.1s; }
.driver-journey[data-driver-state="motion"][data-motion-paused="false"] .driver-onboarding-steps li:nth-child(5) { animation-delay: 2.8s; }
.driver-journey[data-driver-state="motion"][data-motion-paused="false"] .driver-onboarding-steps li:nth-child(6) { animation-delay: 3.5s; }
.driver-journey[data-driver-state="motion"][data-motion-paused="false"] .support-vehicle-sedan { animation: support-sedan 8.4s ease-in-out infinite; }
.driver-journey[data-driver-state="motion"][data-motion-paused="false"] .support-vehicle-suv { animation: support-suv 8.4s ease-in-out infinite; }
.driver-journey:not([data-driver-state="motion"]) .driver-onboarding-steps li:nth-child(6), .driver-journey[data-motion-paused="true"] .driver-onboarding-steps li:nth-child(6) { border-color: rgba(239,116,93,.58); box-shadow: 0 .9rem 2rem rgba(0,0,0,.2), 0 0 0 .28rem rgba(239,116,93,.12); }

.driver-fleet, .requirements-overview { padding-block: clamp(5.5rem, 11vw, 9rem); background: #f6f1e7; }
.driver-fleet .eyebrow, .requirements-overview .eyebrow { color: #b74838; }
.driver-fleet-grid, .requirements-layout { display: grid; grid-template-columns: minmax(0, .82fr) minmax(20rem, 1.18fr); align-items: center; gap: clamp(2rem, 7vw, 6rem); }
.vehicle-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.vehicle-card { min-height: 18rem; display: grid; align-content: end; justify-items: center; padding: clamp(1.3rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: 1.2rem; background: var(--cream); overflow: hidden; }
.vehicle-card .vehicle { width: min(14rem, 100%); margin: 2rem 0 2.5rem; transform: none; box-shadow: 0 1.4rem 2.5rem rgba(9,46,41,.18); }
.vehicle-card h3 { margin: 0; font-size: 1.2rem; }

.requirements-stack { position: relative; min-height: 26rem; }
.requirements-stack i { position: absolute; width: min(20rem, 72vw); min-height: 6rem; border: 1px solid rgba(255,255,255,.2); border-radius: 1rem; background: rgba(243,239,228,.96); box-shadow: 0 1.3rem 3rem rgba(0,0,0,.24); }
.requirements-stack i::before { position: absolute; inset: 1.15rem auto auto 1.15rem; width: 3.1rem; height: 3.1rem; border-radius: .7rem; content: ""; background: var(--coral); }
.requirements-stack i::after { position: absolute; inset: 1.35rem 1.2rem auto 5.1rem; height: .55rem; border-radius: 999px; content: ""; background: rgba(9,46,41,.2); box-shadow: 0 1.1rem 0 rgba(9,46,41,.12), 0 2.2rem 0 rgba(9,46,41,.1); }
html[dir="rtl"] .requirements-stack i::before { inset-inline: auto 1.15rem; }
html[dir="rtl"] .requirements-stack i::after { inset-inline: 1.2rem 5.1rem; }
.requirements-stack i:nth-child(1) { inset-block-start: 6%; inset-inline-start: 6%; transform: rotate(-6deg); }
.requirements-stack i:nth-child(2) { inset-block-start: 25%; inset-inline-end: 4%; transform: rotate(5deg); }
.requirements-stack i:nth-child(3) { inset-block-start: 47%; inset-inline-start: 12%; transform: rotate(-2deg); }
.requirements-stack i:nth-child(4) { inset-block-start: 68%; inset-inline-end: 12%; transform: rotate(7deg); }
.requirements-card { padding: clamp(1.4rem, 4vw, 2.5rem); border-radius: 1.25rem; color: var(--white); background: #061f1c; box-shadow: 0 1.7rem 4rem rgba(9,46,41,.16); }
.requirements-card h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.claim-note { margin-block-start: var(--space-4); padding: 1rem 1.1rem; border: 1px solid rgba(9,46,41,.2); border-radius: .85rem; color: var(--ink); background: rgba(239,116,93,.16); font-weight: 600; }
.requirements-next { padding-block: clamp(5rem, 10vw, 8rem); color: var(--white); background: #061f1c; }
.requirements-next-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: clamp(1.6rem, 4vw, 3rem); border: 1px solid rgba(255,255,255,.14); border-radius: 1.25rem; background: linear-gradient(140deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); }
.requirements-next-card p:not(.eyebrow) { max-width: 38rem; color: rgba(255,255,255,.74); }

.legal-hero { position: relative; overflow: hidden; padding-block: clamp(7.5rem, 14vw, 11rem) clamp(4.5rem, 9vw, 7rem); color: var(--white); background: radial-gradient(circle at 78% 22%, rgba(239,116,93,.18), transparent 30%), linear-gradient(135deg, #061f1c, #10443e 62%, #173f37); }
.legal-hero::before { position: absolute; inset: 0; content: ""; opacity: .16; background-image: linear-gradient(120deg, transparent 0 48%, rgba(255,255,255,.16) 49% 50%, transparent 51% 100%); background-size: 4.5rem 4.5rem; pointer-events: none; }
.legal-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .92fr) minmax(18rem, .58fr); align-items: end; gap: clamp(2.5rem, 8vw, 7rem); }
.legal-hero h1 { max-width: 12ch; }
.legal-contact-card { display: grid; gap: .85rem; padding: clamp(1.3rem, 3vw, 2rem); border: 1px solid rgba(255,255,255,.18); border-radius: 1.2rem; color: var(--ink); background: rgba(255,255,255,.94); box-shadow: 0 1.5rem 4rem rgba(0,0,0,.22); }
.legal-contact-card h2 { max-width: 12ch; font-size: clamp(1.65rem, 3vw, 2.35rem); }
.legal-contact-card .support-email + .support-email { margin-block-start: .15rem; }
.legal-document { padding-block: clamp(4.5rem, 9vw, 7rem); background: #f6f1e7; }
.legal-document-shell { display: grid; grid-template-columns: minmax(12rem, .28fr) minmax(0, .72fr); align-items: start; gap: clamp(1.5rem, 5vw, 4rem); }
.legal-rail { position: sticky; inset-block-start: 1.25rem; display: grid; gap: .45rem; padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--cream); }
.legal-rail h2 { margin-block-end: .45rem; color: var(--ink-soft); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
html[dir="rtl"] .legal-rail h2 { letter-spacing: 0; }
.legal-rail a { padding: .65rem .75rem; border-radius: .75rem; color: var(--ink); font-weight: 700; text-decoration: none; }
.legal-rail a[aria-current="page"] { color: var(--white); background: var(--ink); }
.legal-card { max-width: 48rem; padding: clamp(1.25rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: 1.25rem; background: var(--cream); box-shadow: 0 1.5rem 4rem rgba(9,46,41,.08); }
.legal-section { scroll-margin-block-start: 2rem; padding-block: clamp(1.5rem, 4vw, 2.5rem); border-block-start: 1px solid var(--line); }
.legal-section:first-child { padding-block-start: 0; border-block-start: 0; }
.legal-section:last-child { padding-block-end: 0; }
.legal-section h2 { margin-block-end: 1rem; font-size: clamp(1.65rem, 3vw, 2.45rem); line-height: 1.12; }
.legal-section h3 { margin: 1.4rem 0 .65rem; font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.3; }
.legal-section p, .legal-list { max-width: 68ch; }
.legal-section p { margin-block: 0 1rem; color: var(--ink-soft); }
.legal-list { display: grid; margin: 0 0 1rem; padding-inline-start: 1.2rem; gap: .6rem; color: var(--ink-soft); }
.legal-list strong, .legal-contact-line strong { color: var(--ink); }
.legal-section a, .legal-contact-line a { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; text-underline-offset: .18rem; }

.site-footer { padding-block: var(--space-5); color: rgba(255,255,255,.76); background: var(--ink); }
.footer-grid { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: var(--space-4); }
.brand-footer { color: var(--white); } .site-footer p { max-width: 30rem; }
.footer-links { flex-direction: column; align-items: flex-start; }
.copyright { grid-column: 1 / -1; margin: 0; padding-block-start: var(--space-3); border-block-start: 1px solid rgba(255,255,255,.18); font-size: .85rem; }

@keyframes cinematic-drift { from { transform: scale(1.015) translate3d(0,0,0); } to { transform: scale(1.075) translate3d(-.8%, -.35%, 0); } }
@keyframes glow-breathe { from { opacity: .2; } to { opacity: .5; } }
@keyframes sound-bars { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
@keyframes product-float { from { transform: translateY(.35rem) rotate(-.35deg); } to { transform: translateY(-.45rem) rotate(.35deg); } }
@keyframes route-pulse { 0% { box-shadow: 0 0 0 0 rgba(239,116,93,.45); } 80%, 100% { box-shadow: 0 0 0 1rem rgba(239,116,93,0); } }
@keyframes rider-search-reveal {
    0%, 13% { max-width: 0; opacity: .6; }
    26%, 100% { max-width: 100%; opacity: 1; }
}
@keyframes rider-caret { 50% { opacity: 0; } }
@keyframes rider-route-draw {
    0%, 28% { stroke-dashoffset: 244; }
    47%, 100% { stroke-dashoffset: 0; }
}
@keyframes rider-vehicle-trip {
    0%, 43% { opacity: 0; transform: translate3d(-4.7rem, 4.3rem, 0) rotate(-24deg); }
    50% { opacity: 1; }
    76%, 100% { opacity: 1; transform: translate3d(4.1rem, -4rem, 0) rotate(-24deg); }
}
@keyframes rider-progress-step {
    0%, 30% { background: rgba(9,46,41,.14); transform: scaleX(.72); transform-origin: left center; }
    55%, 100% { background: var(--coral); transform: scaleX(1); }
}
@keyframes safety-route-draw {
    0%, 16% { stroke-dashoffset: 248; }
    52%, 100% { stroke-dashoffset: 0; }
}
@keyframes safety-vehicle-trip {
    0%, 18% { opacity: .86; transform: translate3d(-3.2rem, 3.2rem, 0) rotate(-24deg); }
    54%, 100% { opacity: 1; transform: translate3d(2.45rem, -3.35rem, 0) rotate(-24deg); }
}
@keyframes safety-progress {
    0%, 18% { transform: scaleX(.42); }
    54%, 100% { transform: scaleX(1); }
}
@keyframes safety-notification {
    0%, 42% { opacity: .72; transform: translateY(.24rem); }
    52%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes how-step-pulse {
    0%, 17% { border-color: var(--coral); background: var(--coral); box-shadow: 0 0 0 .72rem rgba(239,116,93,.2); transform: scale(1.1); }
    24%, 100% { border-color: rgba(239,116,93,.8); background: #0d3732; box-shadow: 0 0 0 .25rem rgba(239,116,93,.12); transform: scale(1); }
}
@keyframes how-stage-label {
    0%, 17% { opacity: 1; transform: translateY(0); }
    24%, 100% { opacity: 0; transform: translateY(.35rem); }
}
@keyframes how-search-reveal {
    0%, 17% { max-width: 0; opacity: .6; }
    30%, 100% { max-width: 100%; opacity: 1; }
}
@keyframes how-route-draw {
    0%, 18% { stroke-dashoffset: 244; }
    44%, 100% { stroke-dashoffset: 0; }
}
@keyframes how-vehicle-trip {
    0%, 38% { opacity: 0; transform: translate3d(-4.7rem, 4.3rem, 0) rotate(-24deg); }
    47% { opacity: 1; transform: translate3d(-2.6rem, 2.2rem, 0) rotate(-24deg); }
    72% { opacity: 1; transform: translate3d(2.1rem, -1.9rem, 0) rotate(-24deg); }
    88%, 100% { opacity: 1; transform: translate3d(4.1rem, -4rem, 0) rotate(-24deg); }
}
@keyframes how-progress-step {
    0%, 32% { background: rgba(9,46,41,.14); transform: scaleX(.72); transform-origin: left center; }
    58%, 100% { background: var(--coral); transform: scaleX(1); }
}
@keyframes driver-home-car {
    0%, 24% { transform: translate3d(-2.1rem, .85rem, 0) rotate(-12deg); }
    58%, 100% { transform: translate3d(2.4rem, -1.1rem, 0) rotate(-12deg); }
}
@keyframes driver-online-pulse {
    0% { box-shadow: 0 0 0 0 rgba(13,107,87,.36); }
    80%, 100% { box-shadow: 0 0 0 .75rem rgba(13,107,87,0); }
}
@keyframes driver-request-cycle {
    0%, 16% { opacity: 0; transform: translateY(.8rem) scale(.96); }
    26%, 72% { opacity: 1; transform: translateY(0) scale(1); }
    85%, 100% { opacity: .98; transform: translateY(.18rem) scale(.98); }
}
@keyframes driver-accept-tap {
    0%, 44%, 100% { transform: scale(1); }
    51%, 58% { transform: scale(.96); background: #0d6b57; }
}
@keyframes driver-follow-progress {
    0%, 55% { background: rgba(9,46,41,.14); transform: scaleX(.55); transform-origin: left center; }
    76%, 100% { background: var(--coral); transform: scaleX(1); }
}
@keyframes onboarding-phone {
    0%, 100% { transform: translateY(.15rem) rotate(-3deg); }
    45%, 72% { transform: translateY(-.55rem) rotate(-1deg); }
}
@keyframes onboarding-phone-rtl {
    0%, 100% { transform: translateY(.15rem) rotate(3deg); }
    45%, 72% { transform: translateY(-.55rem) rotate(1deg); }
}
@keyframes onboarding-line {
    0%, 15% { opacity: .52; clip-path: inset(0 0 85% 0); }
    58%, 100% { opacity: 1; clip-path: inset(0); }
}
@keyframes onboarding-step {
    0%, 18% { transform: translateY(.18rem) scale(.98); border-color: rgba(255,255,255,.14); box-shadow: 0 .9rem 2rem rgba(0,0,0,.2); }
    28%, 48% { transform: translateY(-.12rem) scale(1.035); border-color: rgba(239,116,93,.62); box-shadow: 0 .9rem 2rem rgba(0,0,0,.2), 0 0 0 .32rem rgba(239,116,93,.16); }
    62%, 100% { transform: translateY(0) scale(1); border-color: rgba(255,255,255,.14); box-shadow: 0 .9rem 2rem rgba(0,0,0,.2); }
}
@keyframes support-sedan {
    0%, 100% { transform: translateX(-.3rem); opacity: .34; }
    48%, 72% { transform: translateX(.45rem); opacity: .52; }
}
@keyframes support-suv {
    0%, 100% { transform: translateY(-.6rem) translateX(.35rem); opacity: .32; }
    48%, 72% { transform: translateY(-.6rem) translateX(-.45rem); opacity: .5; }
}
@keyframes fallback-drive { from { transform: translate(0,0); } to { transform: translate(-262px,-216px); } }
@keyframes driver-sedan { from { transform: translate3d(-.4rem,.2rem,0) rotate(-4deg); } to { transform: translate3d(.7rem,-.45rem,0) rotate(-2deg); } }
@keyframes driver-suv { from { transform: translate3d(.4rem,.25rem,0) rotate(4deg) scale(1.08); } to { transform: translate3d(-.7rem,-.45rem,0) rotate(2deg) scale(1.08); } }
@keyframes support-breathe { from { transform: rotate(14deg) scale(.99); opacity: .58; } to { transform: rotate(16deg) scale(1.025); opacity: .78; } }
@keyframes pickup-car-arrive {
    0% { opacity: 0; transform: translateX(calc(-50% + 35rem)) scale(.96); }
    8% { opacity: 1; }
    20%, 68% { opacity: 1; transform: translateX(-50%) scale(1); }
    84% { opacity: 1; transform: translateX(calc(-50% - 36rem)) scale(.98); }
    100% { opacity: 0; transform: translateX(calc(-50% - 42rem)) scale(.98); }
}
@keyframes pickup-rear-door {
    0%, 34%, 70%, 100% { transform: none; box-shadow: none; }
    40%, 64% { transform: perspective(12rem) rotateY(-54deg); box-shadow: -.3rem .25rem .8rem rgba(0,0,0,.2); }
}
@keyframes pickup-front-door {
    0%, 23%, 38%, 100% { transform: none; box-shadow: none; }
    27%, 33% { transform: perspective(12rem) rotateY(-46deg); box-shadow: -.22rem .18rem .65rem rgba(0,0,0,.18); }
}
@keyframes pickup-chauffeur {
    0%, 24%, 84%, 100% { opacity: 0; transform: translateX(-50%) scale(.86); }
    29% { opacity: 1; transform: translateX(-50%) scale(.92); }
    43%, 64% { opacity: 1; transform: translateX(calc(-50% + var(--pickup-chauffeur-walk))) scale(.92); }
    72% { opacity: 1; transform: translateX(calc(-50% + .45rem)) scale(.9); }
}
@keyframes pickup-passenger {
    0%, 39% { opacity: 1; transform: translateX(-50%) scale(.92); }
    50%, 62% { opacity: 1; transform: translateX(calc(-50% - var(--pickup-passenger-board))) scale(.88); }
    68%, 100% { opacity: 0; transform: translateX(calc(-50% - var(--pickup-passenger-seat))) scale(.76); }
}
@keyframes pickup-wheel {
    0% { transform: rotate(0deg); }
    20%, 68% { transform: rotate(-380deg); }
    84%, 100% { transform: rotate(-760deg); }
}
@keyframes home-pickup-car {
    0% { opacity: 0; transform: translateX(calc(-50% + 4rem)) scale(.985); }
    7% { opacity: 1; }
    14%, 82% { opacity: 1; transform: translateX(-50%) scale(1); }
    91% { opacity: 1; transform: translateX(calc(-50% - 3rem)) scale(.99); }
    100% { opacity: 0; transform: translateX(calc(-50% - 4rem)) scale(.99); }
}
@keyframes home-pickup-rear-door {
    0%, 25%, 75%, 100% { transform: none; box-shadow: none; }
    33%, 66% { transform: perspective(14rem) rotateY(-62deg) skewY(-1deg); box-shadow: -.35rem .32rem .9rem rgba(0,0,0,.23); }
}
@keyframes home-pickup-front-door {
    0%, 20%, 36%, 100% { transform: none; box-shadow: none; }
    24%, 31% { transform: perspective(12rem) rotateY(-44deg); box-shadow: -.22rem .18rem .65rem rgba(0,0,0,.18); }
}
@keyframes home-pickup-chauffeur {
    0%, 17%, 90%, 100% { opacity: 0; transform: translateX(-50%) scale(.78); }
    23% { opacity: 1; transform: translateX(-50%) scale(.92); }
    35%, 67% { opacity: 1; transform: translateX(calc(-50% + var(--pickup-chauffeur-walk))) scale(.92); }
    78% { opacity: 1; transform: translateX(calc(-50% + .55rem)) scale(.88); }
}
@keyframes home-pickup-passenger {
    0%, 35% { opacity: 1; transform: translateX(-50%) scale(.92); }
    48%, 63% { opacity: 1; transform: translateX(calc(-50% - var(--pickup-passenger-board))) scale(.9); }
    70%, 100% { opacity: 0; transform: translateX(calc(-50% - var(--pickup-passenger-seat))) scale(.78); }
}
@keyframes home-pickup-wheel {
    0% { transform: rotate(0deg); }
    14%, 82% { transform: rotate(-120deg); }
    91%, 100% { transform: rotate(-360deg); }
}
@keyframes pickup-chauffeur-arm {
    0%, 25%, 73%, 100% { transform: rotate(8deg); }
    34%, 64% { transform: rotate(-58deg); }
}
@keyframes pickup-passenger-arm {
    0%, 40%, 66%, 100% { transform: rotate(-8deg); }
    49%, 61% { transform: rotate(32deg); }
}

@media (min-width: 49rem) and (max-width: 90rem) {
    .hero[data-page="home"] .hero-pickup-scene { width: min(39rem, 44vw); inset-inline-end: clamp(.75rem, 2vw, 2rem); --pickup-car-width: min(31rem, 100%); --pickup-rear-door-offset: 2.1rem; --pickup-front-door-offset: 3.7rem; --pickup-curb-gap: 4.8rem; }
}

@media (max-width: 48.999rem) {
    .site-header { background: linear-gradient(rgba(4,24,21,.82), transparent); }
    .nav-toggle { display: inline-flex; align-items: center; gap: .65rem; }
    .nav-panel { position: absolute; inset-block-start: 100%; inset-inline: 0; display: none; padding: var(--space-3) 1rem; color: var(--ink); border-block: 1px solid var(--line); background: var(--cream); box-shadow: 0 14px 30px rgba(9,46,41,.16); }
    .nav-panel.is-open { display: grid; gap: var(--space-3); }
    .nav-links { flex-direction: column; } .nav-links a { padding: .75rem; }
    .nav-links a[aria-current="page"] { background: rgba(9,46,41,.08); }
    .language-switcher { width: max-content; border-color: var(--line); }
    .language-switcher a[aria-current="true"] { color: var(--white); background: var(--ink); }
    .hero { min-height: 72rem; }
    .hero-shell { min-height: 72rem; justify-content: flex-start; padding-block: 7.5rem 2rem; }
    .hero-media img { object-position: 50% 52%; }
    .how-journey::after { background-image: url("/public-site/media/hero-nouakchott-mobile-lite.webp"); background-position: 56% 50%; }
    .hero-vignette { background: linear-gradient(180deg, rgba(3,22,19,.88) 0%, rgba(3,22,19,.62) 30%, rgba(3,22,19,.05) 58%, rgba(3,22,19,.8) 100%); }
    html[dir="rtl"] .hero-vignette { transform: none; }
    .hero-copy { width: 100%; }
    h1 { max-width: 9ch; font-size: clamp(3.15rem, 14vw, 4.7rem); }
    .lede { max-width: 32rem; font-size: 1.02rem; }
    .hero-assurances { position: absolute; inset-inline: 1rem; inset-block-end: 6.35rem; justify-content: space-between; gap: .5rem; }
    .hero-assurances li { max-width: 31%; }
    .hero-assurances strong { font-size: .68rem; line-height: 1.25; }
    .hero-controls { inset-inline: 1rem; inset-block-end: 1.35rem; }
    .hero[data-page="home"] .hero-pickup-scene { width: min(34rem, calc(100% - 2rem)); inset-inline: 50% auto; inset-block-end: 12rem; transform: translateX(-50%); --pickup-car-width: min(23.5rem, 100%); --pickup-rear-door-offset: 1.6rem; --pickup-front-door-offset: 2.9rem; --pickup-curb-gap: 3.8rem; --pickup-inside-step: .82rem; }
    .media-status { line-height: 1.25; }
    .journey-grid, .city-map-heading, .city-map-layout, .feature-grid, .section-heading, .app-shell, .driver-grid, .footer-grid, .download-hero-grid, .download-qr-shell, .how-overview-grid, .how-journey-grid, .how-fallback-grid, .driver-page-hero-grid, .driver-journey-grid, .driver-fleet-grid, .requirements-hero-grid, .requirements-layout, .requirements-next-card, .safety-page-grid, .support-hero-grid, .safety-help-card, .legal-hero-grid, .legal-document-shell { grid-template-columns: 1fr; }
    .city-map-layout { gap: 1.5rem; }
    .map-visual { aspect-ratio: 4 / 3; transform: none; }
    .map-details { display: grid; grid-template-columns: 1fr; }
    .map-status { margin-block-end: 1rem; }
    .map-progress-label input { min-height: 2.75rem; }
    .map-label { max-width: 6.7rem; }
    .feature-grid { gap: 1rem; }
    .product-stage { min-height: 37rem; }
    .phone { width: min(17.5rem, 72vw); }
    .interface-note { max-width: 9rem; padding: .65rem .75rem; }
    .note-request { inset-block-start: 15%; }
    .note-route { inset-block-end: 15%; }
    .reassurance-grid { grid-template-columns: 1fr; margin-block-start: var(--space-5); }
    .reassurance-grid li { min-height: 0; }
    .line-icon { margin-block-end: var(--space-3); }
    .app-heading { position: static; }
    .app-card { min-height: 20rem; }
    .driver-grid { text-align: start; }
    .driver-phone { margin-block-start: var(--space-4); }
    .download-hero { padding-block-start: 7.5rem; }
    .download-copy h1 { max-width: 9ch; }
    .download-visual { min-height: 35rem; }
    .download-store-stack { inset-inline-start: 0; inset-block-start: 1rem; transform: scale(.92); transform-origin: top left; }
    html[dir="rtl"] .download-store-stack { inset-inline: auto 0; transform-origin: top right; }
    .download-card-grid, .qr-grid { grid-template-columns: 1fr; }
    .download-app-card { min-height: 21rem; padding-block-start: 5.25rem; }
    .safety-page-hero, .support-hero { padding-block-start: 7.5rem; }
    .safety-visual { min-height: 32rem; }
    .safety-phone { width: min(16rem, 72vw); }
    .safety-proof-grid { grid-template-columns: 1fr; }
    .safety-help-card .button-row { justify-content: flex-start; }
    .how-visual { min-height: 35rem; }
    .how-step-list { margin-block-start: var(--space-4); }
    .how-step-list li { grid-template-columns: 2.45rem 1fr; padding: .9rem; }
    .how-path { inset: 6% 7% 8%; }
    .how-download-card { min-height: 20rem; }
    .driver-page-hero, .requirements-hero { padding-block-start: 7.5rem; }
    .driver-page-phone { justify-self: center; transform: none; }
    html[dir="rtl"] .driver-page-phone { transform: none; }
    .driver-step-list, .requirements-list { margin-block-start: var(--space-4); }
    .driver-step-list li, .requirements-list li { grid-template-columns: 2.45rem 1fr; padding: .9rem; }
    .driver-journey-visual { min-height: 34rem; }
    .driver-onboarding { width: min(30rem, 100%); min-height: 33rem; padding: 0; }
    .driver-onboarding-phone { width: 8.6rem; min-height: 14.8rem; }
    .driver-onboarding-steps li { grid-template-columns: 2.45rem minmax(5.6rem, 8rem); padding: .55rem .62rem; }
    .driver-onboarding-steps strong { font-size: .72rem; }
    .onboarding-icon { width: 2.05rem; height: 2.05rem; }
    .support-vehicle { width: 4.9rem; }
    .vehicle-card-grid { grid-template-columns: 1fr; }
    .vehicle-card { min-height: 14rem; }
    .requirements-stack { min-height: 23rem; }
    .requirements-next-card .button-row { justify-content: flex-start; }
    .legal-hero { padding-block-start: 7.5rem; }
    .legal-rail { position: static; }
    .legal-card { max-width: none; }
    .copyright { grid-column: auto; }
}

@media (max-width: 27rem) {
    .button { width: 100%; }
    .button-light { width: 100%; }
    .sound-toggle span:last-child, .motion-toggle span:last-child { max-width: 7rem; line-height: 1.2; }
    .product-stage { min-height: 32rem; }
    .download-visual { min-height: 31rem; }
    .download-phone-driver { width: min(14rem, 54vw); }
    .safety-visual { min-height: 29rem; }
    .safety-phone { width: min(14.5rem, 76vw); }
    .support-card { min-height: 22rem; padding-block-end: 5.5rem; }
    .how-visual { min-height: 31rem; }
    .hero { min-height: 74rem; }
    .hero-shell { min-height: 74rem; }
    .hero[data-page="home"] .hero-pickup-scene { inset-block-end: 12rem; --pickup-car-width: min(21rem, 100%); --pickup-rear-door-offset: 1.35rem; --pickup-front-door-offset: 2.35rem; --pickup-curb-gap: 3rem; --pickup-inside-step: .65rem; }
    .driver-journey-visual { min-height: 31rem; }
    .driver-onboarding { min-height: 30rem; }
    .driver-onboarding-phone { width: 7.7rem; min-height: 13.5rem; }
    .driver-onboarding-steps li { grid-template-columns: 2.2rem minmax(4.8rem, 6.4rem); gap: .48rem; }
    .driver-onboarding-steps strong { font-size: .66rem; }
    .onboarding-icon { width: 1.85rem; height: 1.85rem; }
    .vehicle-card .vehicle { width: min(14rem, 78vw); height: 5.2rem; }
    .vehicle-card .vehicle i { width: 1.7rem; height: 1.7rem; }
    .requirements-stack { min-height: 20rem; }
    .requirements-stack i { width: min(16rem, 78vw); }
    .interface-note { max-width: 7.5rem; }
    .map-compass { inset-block-start: .6rem; inset-inline-end: .6rem; transform: scale(.85); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .city-map[data-map-state="pending"] .map-vehicle-fallback,
    .city-map[data-map-state="loading"] .map-vehicle-fallback { animation: none !important; }
}