/* Flitzo app, v2: the reference look DK picked (soft light cards, Signal Lime, top-down vehicles,
   wedge dial, ring countdown) with CRED-grade motion: springs, staggered reveals, tilt, haptics. */
@font-face { font-family: 'Poppins'; src: url(/fonts/poppins-latin-300-normal.woff2) format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url(/fonts/poppins-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url(/fonts/poppins-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url(/fonts/poppins-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url(/fonts/poppins-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Noto Sans Kannada'; src: url(/fonts/noto-sans-kannada-kannada-400-normal.woff2) format('woff2'); font-weight: 300 400; font-display: swap; }
@font-face { font-family: 'Noto Sans Kannada'; src: url(/fonts/noto-sans-kannada-kannada-600-normal.woff2) format('woff2'); font-weight: 500 700; font-display: swap; }
@font-face { font-family: 'Noto Sans Devanagari'; src: url(/fonts/noto-sans-devanagari-devanagari-400-normal.woff2) format('woff2'); font-weight: 300 400; font-display: swap; }
@font-face { font-family: 'Noto Sans Devanagari'; src: url(/fonts/noto-sans-devanagari-devanagari-600-normal.woff2) format('woff2'); font-weight: 500 700; font-display: swap; }
@font-face { font-family: 'Noto Sans Tamil'; src: url(/fonts/noto-sans-tamil-tamil-400-normal.woff2) format('woff2'); font-weight: 300 400; font-display: swap; }
@font-face { font-family: 'Noto Sans Tamil'; src: url(/fonts/noto-sans-tamil-tamil-600-normal.woff2) format('woff2'); font-weight: 500 700; font-display: swap; }

:root {
  --bg: #ECEDE9; --card: #FFFFFF; --soft: #F5F6F3; --sunk: #E6E7E3; --line: rgba(17,17,17,.07);
  --ink: #121212; --ink2: #2A2A2A; --mute: #73766F; --faint: #A3A59F;
  --lime: #C8FF2E; --lime-d: #B4EC18; --on-lime: #121212; --violet: #6E4BFF; --red: #FF3B5C; --amber: #FFB020; --unk: #9EA19A;
  --font: 'Poppins', system-ui, -apple-system, sans-serif;
  --r: 26px; --r-m: 20px; --r-s: 14px; --pill: 999px;
  --sh: 0 1px 0 rgba(255,255,255,.9) inset, 0 12px 32px -12px rgba(30,32,28,.22), 0 2px 6px rgba(30,32,28,.05);
  --sh-lift: 0 1px 0 rgba(255,255,255,.9) inset, 0 24px 48px -16px rgba(30,32,28,.32), 0 4px 10px rgba(30,32,28,.06);
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  --nav-h: 72px;
  --spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
  --out: cubic-bezier(.16,1,.3,1);
}
html[lang=kn] { --font: 'Poppins', 'Noto Sans Kannada', system-ui, sans-serif; }
html[lang=hi] { --font: 'Poppins', 'Noto Sans Devanagari', system-ui, sans-serif; }
html[lang=ta] { --font: 'Poppins', 'Noto Sans Tamil', system-ui, sans-serif; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 400 15px/1.45 var(--font); overflow: hidden; overscroll-behavior: none; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: var(--ink); }
img { display: block; }
[hidden] { display: none !important; }
b, strong { font-weight: 600; }

.ico { display: inline-block; width: 20px; height: 20px; background: currentColor; flex: none;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ico-map{--i:url(/icons/map.svg)} .ico-car{--i:url(/icons/car.svg)} .ico-bike{--i:url(/icons/bike.svg)} .ico-plus{--i:url(/icons/plus.svg)}
.ico-navigation{--i:url(/icons/navigation.svg)} .ico-locate-fixed{--i:url(/icons/locate-fixed.svg)} .ico-camera{--i:url(/icons/camera.svg)}
.ico-bookmark{--i:url(/icons/bookmark.svg)} .ico-share-2{--i:url(/icons/share-2.svg)} .ico-id-card{--i:url(/icons/id-card.svg)} .ico-clock{--i:url(/icons/clock.svg)}
.ico-x{--i:url(/icons/x.svg)} .ico-search{--i:url(/icons/search.svg)} .ico-check{--i:url(/icons/check.svg)} .ico-chevron-right{--i:url(/icons/chevron-right.svg)}
.ico-map-pin{--i:url(/icons/map-pin.svg)} .ico-crosshair{--i:url(/icons/crosshair.svg)} .ico-crown{--i:url(/icons/crown.svg)} .ico-circle-parking{--i:url(/icons/circle-parking.svg)}
.ico-siren{--i:url(/icons/siren.svg)} .ico-arrow-left{--i:url(/icons/arrow-left.svg)} .ico-info{--i:url(/icons/info.svg)} .ico-bell{--i:url(/icons/bell.svg)}
.ico-heart{--i:url(/icons/heart.svg)} .ico-hourglass{--i:url(/icons/hourglass.svg)} .ico-arrow-up-right{--i:url(/icons/arrow-up-right.svg)} .ico-more{--i:url(/icons/ellipsis-vertical.svg)}
.ico-car-front{--i:url(/icons/car-front.svg)} .ico-sliders{--i:url(/icons/sliders-horizontal.svg)} .ico-house{--i:url(/icons/house.svg)} .ico-warehouse{--i:url(/icons/warehouse.svg)}
.ico-pencil{--i:url(/icons/pencil.svg)} .ico-gauge{--i:url(/icons/gauge.svg)} .ico-trophy{--i:url(/icons/trophy.svg)} .ico-triangle-alert{--i:url(/icons/triangle-alert.svg)}
.ico-route{--i:url(/icons/route.svg)} .ico-sparkles{--i:url(/icons/sparkles.svg)} .ico-shield-check{--i:url(/icons/shield-check.svg)} .ico-layers{--i:url(/icons/layers.svg)} .ico-languages{--i:url(/icons/languages.svg)}

/* ---------- motion primitives ---------- */
.press { transition: transform .5s var(--spring); }
.press:active { transform: scale(.95); transition: transform .12s ease-out; }
[data-in] { opacity: 0; transform: translateY(18px); filter: blur(6px); }
.in [data-in], [data-in].in { animation: rise .8s var(--out) forwards; animation-delay: calc(var(--d, 0) * 55ms); }
@keyframes rise { to { opacity: 1; transform: none; filter: none; } }
.roll { display: inline-flex; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; }
.roll > span { display: inline-block; transform: translateY(110%); animation: rollup .7s var(--spring) forwards; animation-delay: calc(var(--i) * 45ms); white-space: pre; }
@keyframes rollup { to { transform: none; } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes shine { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(260%) skewX(-20deg); } }
@keyframes breathe { 50% { transform: translateX(-50%) translateY(-4px); } }

/* ---------- boot ---------- */
.boot { position: fixed; inset: 0; z-index: 99; background: var(--bg); display: grid; place-content: center; justify-items: center; gap: 16px; transition: opacity .45s, transform .6s var(--out); }
.boot.out { opacity: 0; transform: scale(1.06); pointer-events: none; }
.boot-img { width: 84px; height: auto; padding: 18px; border-radius: 26px; background: var(--ink); box-shadow: var(--sh-lift); animation: pop .7s var(--spring) both; }
.boot-mark { font: 600 26px var(--font); letter-spacing: -.02em; }
.boot-line { width: 110px; height: 3px; background: var(--sunk); overflow: hidden; border-radius: 3px; }
.boot-line i { display: block; height: 100%; width: 40%; background: var(--ink); border-radius: 3px; animation: bootline 1s ease-in-out infinite; }
@keyframes bootline { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* ---------- shell ---------- */
.app { position: fixed; inset: 0; }
.map { position: absolute; inset: 0; }
.map-fade { position: absolute; inset: 0 0 auto; height: 330px; pointer-events: none; background: linear-gradient(to bottom, var(--bg) 48%, rgba(236,237,233,.75) 72%, rgba(236,237,233,0)); z-index: 1; }
.maplibregl-ctrl-attrib { background: rgba(255,255,255,.7) !important; font-size: 10px; border-radius: 10px !important; }
.maplibregl-ctrl-attrib a { color: var(--mute) !important; }
.maplibregl-ctrl-bottom-right { bottom: calc(var(--nav-h) + 230px + var(--safe-b)); }

.home-head { position: absolute; top: calc(12px + var(--safe-t)); left: 16px; right: 16px; z-index: 3; pointer-events: none; }
.home-head > * { pointer-events: auto; }
.hello { display: flex; align-items: center; gap: 10px; }
.avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: var(--lime); display: grid; place-items: center; font-weight: 600; font-size: 17px; box-shadow: var(--sh); overflow: hidden; flex: none; }
.avatar img { width: 26px; }
.hello .who { flex: 1; min-width: 0; line-height: 1.2; }
.hello .who small { display: block; color: var(--mute); font-size: 12px; }
.hello .who b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.round { width: 46px; height: 46px; border-radius: 50%; background: var(--card); box-shadow: var(--sh); display: grid; place-items: center; position: relative; flex: none; }
.round .ico { width: 19px; height: 19px; }
.round .badge-dot { position: absolute; top: 11px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); border: 2px solid var(--card); }
.city-btn { height: 46px; padding: 0 14px; border-radius: var(--pill); background: var(--card); box-shadow: var(--sh); font-weight: 500; font-size: 13px; display: flex; align-items: center; gap: 6px; flex: none; }
.city-btn .ico { width: 15px; height: 15px; }
.big-title { font: 300 31px/1.08 var(--font); letter-spacing: -.03em; margin: 16px 0 14px; }
.big-title b { font-weight: 600; }
.searchbar { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 6px 0 20px; border-radius: var(--pill); background: var(--card); box-shadow: var(--sh); width: 100%; text-align: left; }
.searchbar span.q { flex: 1; min-width: 0; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.searchbar .go { width: 44px; height: 44px; border-radius: 50%; background: var(--lime); display: grid; place-items: center; flex: none; }
.chips { display: flex; gap: 8px; margin: 12px -16px 0; padding: 0 16px 8px; overflow-x: auto; scrollbar-width: none; width: calc(100% + 32px); }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 40px; padding: 0 16px; border-radius: var(--pill); background: var(--card); box-shadow: var(--sh); display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--ink2); transition: background .3s, color .3s, transform .5s var(--spring); }
.chip .ico { width: 15px; height: 15px; }
.chip.on { background: var(--ink); color: #fff; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.dot.free { background: var(--lime); box-shadow: 0 0 0 2px var(--ink) inset; } .dot.paid { background: var(--violet); } .dot.nopark { background: var(--red); } .dot.unk { background: var(--card); box-shadow: 0 0 0 2px var(--unk) inset; }
.chip.on .dot.free { box-shadow: none; }

.side-fabs { position: absolute; right: 16px; bottom: calc(var(--nav-h) + 244px + var(--safe-b)); display: grid; gap: 10px; z-index: 3; }
.fab { width: 48px; height: 48px; border-radius: 16px; background: var(--card); box-shadow: var(--sh); display: grid; place-items: center; }
.fab.ink { background: var(--ink); color: var(--lime); }
.fab .ico { width: 20px; height: 20px; }

/* bottom carousel of place cards (the answer is the first card) */
.deck { position: absolute; left: 0; right: 0; bottom: calc(var(--nav-h) + 12px + var(--safe-b)); z-index: 3; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 22px 16px 16px; scrollbar-width: none; }
.deck::-webkit-scrollbar { display: none; }
.pcard { flex: none; width: 76%; max-width: 330px; scroll-snap-align: center; border-radius: var(--r); background: var(--card); box-shadow: var(--sh-lift); padding: 10px; position: relative; text-align: left; transition: transform .45s var(--spring), opacity .3s; }
.pcard .ph { height: 108px; border-radius: 18px; background: var(--sunk) center / cover no-repeat; position: relative; overflow: hidden; }
.pcard .ph img.veh { position: absolute; right: 8px; bottom: -6px; height: 104px; width: auto; filter: drop-shadow(0 12px 14px rgba(0,0,0,.25)); }
.pcard .meta { padding: 10px 6px 4px; display: flex; align-items: flex-end; gap: 10px; }
.pcard .meta .t { flex: 1; min-width: 0; }
.pcard .meta b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .meta small { color: var(--mute); font-size: 12px; display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.arrow { width: 46px; height: 46px; border-radius: 50%; background: var(--lime); display: grid; place-items: center; flex: none; transition: transform .5s var(--spring); }
.arrow .ico { width: 20px; height: 20px; }
.pcard:active .arrow { transform: rotate(45deg) scale(.92); }
.selring { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink); background: rgba(200,255,46,.35); pointer-events: none; animation: ringpulse 1.6s ease-out infinite; }
@keyframes ringpulse { 0% { box-shadow: 0 0 0 0 rgba(18,18,18,.35); transform: scale(.9); } 70% { box-shadow: 0 0 0 16px rgba(18,18,18,0); transform: scale(1.15); } 100% { transform: scale(.9); } }
.avail { position: absolute; left: 18px; top: -16px; height: 38px; padding: 0 14px 0 4px; border-radius: var(--pill); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--sh); display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; z-index: 2; }
.avail i { min-width: 30px; height: 30px; padding: 0 6px; border-radius: var(--pill); background: var(--ink); color: var(--lime); display: grid; place-items: center; font: normal 600 13px var(--font); }
.fee { height: 24px; padding: 0 9px; border-radius: var(--pill); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; background: var(--soft); color: var(--ink2); white-space: nowrap; }
.fee.free { background: var(--lime); color: var(--on-lime); } .fee.paid { background: #EEE9FF; color: var(--violet); } .fee.nopark { background: #FFE6EB; color: #D61F42; }

/* the answer card */
.acard { flex: none; width: 76%; max-width: 330px; scroll-snap-align: center; border-radius: var(--r); background: var(--ink); color: #fff; box-shadow: var(--sh-lift); padding: 16px 18px 14px; position: relative; overflow: hidden; text-align: left; }
.acard::after { content: ''; position: absolute; width: 220px; height: 220px; right: -70px; top: -90px; border-radius: 50%; background: radial-gradient(circle, rgba(200,255,46,.35), rgba(200,255,46,0) 70%); pointer-events: none; }
.acard small { color: rgba(255,255,255,.6); font-size: 12px; display: block; }
.acard .word { font: 700 42px/1.05 var(--font); letter-spacing: -.03em; margin: 4px 0 2px; }
.acard .word.easy { color: var(--lime); } .acard .word.tight { color: var(--amber); } .acard .word.avoid { color: var(--red); } .acard .word.none { color: #fff; font-size: 30px; }
.acard .word.scan { background: linear-gradient(90deg, rgba(255,255,255,.35), #fff, rgba(255,255,255,.35)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: scan 1.4s linear infinite; }
@keyframes scan { to { background-position: -200% 0; } }
.acard .sub { font-size: 13px; color: rgba(255,255,255,.75); }
.acard .foot { margin-top: 10px; font-size: 10.5px; color: rgba(255,255,255,.45); display: flex; gap: 6px; align-items: center; }
.acard .foot .ico { width: 12px; height: 12px; }
.acard .np { margin-top: 8px; display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: #FFB3C0; }
.acard .np .ico { width: 15px; height: 15px; color: var(--red); }
.acard .add { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: var(--pill); background: var(--lime); color: var(--ink); font-size: 13px; font-weight: 500; position: relative; z-index: 1; }
.acard .add .ico { width: 15px; height: 15px; }

/* floating pill nav, after the reference */
.nav { position: absolute; left: 50%; bottom: calc(12px + var(--safe-b)); transform: translateX(-50%); z-index: 26; height: 64px; padding: 7px; border-radius: var(--pill);
  background: rgba(255,255,255,.94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--sh-lift); display: flex; gap: 4px; }
.nav button { position: relative; z-index: 1; height: 50px; min-width: 50px; padding: 0 14px; border-radius: var(--pill); display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink2); font-size: 13px; font-weight: 500; transition: color .3s; }
.nav button .ico { transition: color .3s; }
.nav button span.l { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .55s var(--spring), opacity .3s; opacity: 0; }
.nav button.on { color: #fff; }
.nav button.on .ico { color: var(--lime); }
.nav button.on span.l { max-width: 130px; opacity: 1; }
.nav .blob { position: absolute; z-index: 0; top: 7px; height: 50px; border-radius: var(--pill); background: var(--ink); transition: left .55s var(--spring), width .55s var(--spring); }

/* ---------- screens (Park, Legends, Me) ---------- */
.screen { position: absolute; inset: 0; z-index: 4; background: var(--bg); overflow-y: auto; padding: calc(14px + var(--safe-t)) 16px calc(var(--nav-h) + 40px + var(--safe-b)); }
.screen.enter { animation: screenIn .55s var(--out); }
@keyframes screenIn { from { opacity: 0; transform: translateY(24px) scale(.985); } }
.wrap { max-width: 520px; margin: 0 auto; }
.bar { display: flex; align-items: center; gap: 12px; min-height: 46px; margin-bottom: 4px; }
.bar h4 { flex: 1; text-align: center; margin: 0; font-size: 15px; font-weight: 500; }
.h1 { font: 500 28px/1.12 var(--font); letter-spacing: -.025em; margin: 10px 0 4px; }
.h1 small { display: block; font: 400 14px var(--font); color: var(--mute); letter-spacing: 0; margin-top: 4px; }
.h2 { font: 500 17px var(--font); margin: 24px 0 12px; display: flex; align-items: center; gap: 10px; }
.h2 .grow { flex: 1; }
.card { background: var(--card); border-radius: var(--r); box-shadow: var(--sh); padding: 18px; }
.soft { background: var(--soft); border-radius: var(--r-m); padding: 14px; }
.row { display: flex; align-items: center; gap: 12px; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--mute); } .faint { color: var(--faint); font-size: 12px; }
.label { font-size: 14px; font-weight: 500; color: var(--ink2); margin: 20px 0 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.label small { color: var(--mute); font-weight: 400; font-size: 12px; }

.btn { height: 58px; border-radius: var(--pill); padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 500; font-size: 15px; text-decoration: none; color: var(--ink); text-align: center; line-height: 1.15; position: relative; overflow: hidden; }
.btn .ico { width: 19px; height: 19px; }
.btn.lime { background: var(--lime); box-shadow: 0 12px 26px -12px rgba(150,200,0,.8); }
.btn.lime::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); transform: translateX(-120%) skewX(-20deg); animation: shine 3.2s 1.2s ease-in-out infinite; pointer-events: none; }
.btn.ink { background: var(--ink); color: #fff; }
.btn.ghost { background: var(--card); box-shadow: var(--sh); }
.btn.red { background: #FFE6EB; color: #C81E3C; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html:not([lang=en]) .btn { font-size: 13px; }
.pill2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; border-radius: var(--pill); background: var(--card); box-shadow: var(--sh); }
.pill2 button { height: 44px; border-radius: var(--pill); font-size: 13px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .35s, box-shadow .35s; }
.pill2 button.on { background: var(--lime); box-shadow: 0 6px 16px -8px rgba(120,160,0,.8); }
.pill2 .ico { width: 17px; height: 17px; }

/* time ruler (reference: "Time For Parking") */
.ruler { position: relative; height: 92px; overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
.ruler .track { position: absolute; left: 0; top: 0; height: 100%; display: flex; will-change: transform; }
.ruler .tk { width: 16px; flex: none; position: relative; height: 100%; }
.ruler .tk::before { content: ''; position: absolute; left: 7px; top: 8px; width: 1.5px; height: 26px; background: #B9BBB5; border-radius: 1px; }
.ruler .tk.hr::before { height: 44px; background: #6E716A; }
.ruler .tk.hr span { position: absolute; left: -22px; top: 60px; width: 60px; text-align: center; font-size: 11px; color: var(--mute); }
.ruler .needle { position: absolute; left: 50%; top: 0; width: 3px; height: 54px; margin-left: -1.5px; background: var(--violet); border-radius: 2px; z-index: 2; }
.ruler .needle b { position: absolute; top: 58px; left: 50%; transform: translateX(-50%); white-space: nowrap; color: var(--violet); font-size: 14px; font-weight: 600; background: var(--bg); padding: 0 6px; }
.sum { display: grid; grid-template-columns: 1fr 1.3fr; border-radius: var(--pill); background: var(--card); box-shadow: var(--sh); padding: 5px; margin-top: 4px; }
.sum div { height: 44px; border-radius: var(--pill); display: grid; place-items: center; font-size: 13px; font-weight: 500; }
.sum div:first-child { background: var(--soft); }
.sum div:last-child { color: var(--violet); font-weight: 600; font-size: 14px; }

/* duration wedge dial around a top-down vehicle (CSS conic gradients, no SVG) */
.wdial { position: relative; width: 100%; max-width: 360px; aspect-ratio: 2 / 1; margin: 18px auto 0; touch-action: none; cursor: pointer; --a0: -90deg; --span: 22.5deg; --dx: 0px; --dy: 0px; }
.wring, .wsel { position: absolute; left: 0; right: 0; top: 0; height: 200%; border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side, transparent 56%, #000 calc(56% + 1px)); mask: radial-gradient(farthest-side, transparent 56%, #000 calc(56% + 1px)); }
.wring { background: repeating-conic-gradient(from -90deg, var(--card) 0 calc(var(--span) - 1.6deg), var(--bg) calc(var(--span) - 1.6deg) var(--span)); filter: drop-shadow(0 6px 10px rgba(0,0,0,.06)); clip-path: inset(0 0 50% 0); }
.wsel { background: conic-gradient(from var(--a0), var(--lime) 0 calc(var(--span) - 1.6deg), transparent 0); transform: translate(var(--dx), var(--dy)); transition: transform .5s var(--spring); clip-path: inset(0 0 50% 0); filter: drop-shadow(0 8px 12px rgba(140,190,0,.35)); }
.whub { position: absolute; left: 50%; bottom: 0; width: 50%; aspect-ratio: 2 / 1; transform: translateX(-50%); border-radius: 999px 999px 0 0; background: var(--soft); }
.wlab { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; line-height: 1; pointer-events: none; transition: transform .5s var(--spring); }
.wlab b { font: 600 17px var(--font); } .wlab i { font: normal 400 9px var(--font); color: var(--mute); margin-top: 3px; }
.wlab.on { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.08); }
.wlab.on i { color: var(--ink); }
.wdial .veh { position: absolute; left: 50%; bottom: 0; height: 46%; width: auto; transform: translateX(-50%); animation: breathe 4s ease-in-out infinite; filter: drop-shadow(0 16px 18px rgba(0,0,0,.2)); pointer-events: none; }

/* ring countdown (reference: "Closing Time"), a conic gradient ring, no SVG */
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
.ring { position: relative; width: 250px; height: 250px; margin: 10px auto 0; --p: 0; transition: --p 1.4s var(--out); }
.ring .arc { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--lime) calc(var(--p) * 1turn), var(--sunk) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 26px), #000 calc(100% - 25px)); mask: radial-gradient(farthest-side, transparent calc(100% - 26px), #000 calc(100% - 25px)); }
.ring.late .arc { background: conic-gradient(var(--red) 1turn, var(--sunk) 0); }
.ring .mid { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; }
.ring .glass { width: 50px; height: 50px; border-radius: 50%; background: var(--card); box-shadow: var(--sh); display: grid; place-items: center; }
.ring .glass .ico { width: 20px; height: 20px; animation: flip 3s var(--spring) infinite; }
@keyframes flip { 0%, 70% { transform: none; } 85%, 100% { transform: rotate(180deg); } }
.ring .clock { font: 600 30px var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ring .dots { position: absolute; inset: 0; pointer-events: none; }
.ring .dots i { position: absolute; border-radius: 50%; background: var(--lime-d); opacity: 0; animation: twinkle 2.6s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: .9; transform: scale(1); } }
.switch { width: 52px; height: 32px; border-radius: var(--pill); background: var(--sunk); position: relative; transition: background .3s; flex: none; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .45s var(--spring); }
.switch.on { background: var(--lime); }
.switch.on::after { transform: translateX(20px); }

/* vehicles (reference: "My Vehicles") */
.vcard { position: relative; padding-top: 58px; margin-top: 12px; }
.vcard .vimg { position: absolute; left: 50%; top: -18px; height: 140px; width: auto; transform: translateX(-50%) rotate(90deg); transform-origin: center; filter: drop-shadow(0 10px 10px rgba(0,0,0,.18)); z-index: 1; pointer-events: none; }
.vcard .vimg.two { height: 118px; top: -8px; }
.vcard .body { background: var(--card); border-radius: var(--r-m); box-shadow: var(--sh); padding: 40px 14px 14px; position: relative; }
.vcard .body .row small { display: block; color: var(--mute); font-size: 11px; }
.vcard .edit { width: 34px; height: 34px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; }
.vcard .edit .ico { width: 15px; height: 15px; }
.vstat { margin-top: 12px; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.vstat .st { height: 36px; border-radius: var(--pill); background: var(--lime); display: grid; place-items: center; font-size: 13px; font-weight: 500; }
.vstat .st.off { background: var(--soft); color: var(--mute); }
.plate { height: 36px; border-radius: 10px; background: var(--card); box-shadow: 0 0 0 1.5px var(--sunk) inset; display: flex; align-items: stretch; overflow: hidden; font: 600 14px/36px var(--font); letter-spacing: .04em; }
.plate i { width: 14px; background: #1F4FBF; color: #fff; font: normal 600 6px var(--font); display: grid; place-items: end center; padding-bottom: 4px; line-height: 1; }
.plate span { padding: 0 10px; }

/* spot detail (reference: "Details") */
.detail { position: fixed; inset: 0; z-index: 24; background: var(--bg); overflow-y: auto; padding: calc(10px + var(--safe-t)) 16px 0; animation: detailIn .6s var(--out); }
.detail.out { animation: detailOut .3s ease-in forwards; }
@keyframes detailIn { from { opacity: 0; transform: translateY(40px) scale(.97); } }
@keyframes detailOut { to { opacity: 0; transform: translateY(30px) scale(.98); } }
.hero { position: relative; height: 220px; margin: 0 -16px; display: grid; place-items: center; overflow: hidden; }
.hero img.main { max-width: 88%; max-height: 200px; filter: drop-shadow(0 26px 24px rgba(0,0,0,.22)); animation: heroIn 1s var(--spring) both; }
.hero img.photo { width: calc(100% - 32px); height: 100%; object-fit: cover; border-radius: var(--r); }
@keyframes heroIn { from { transform: translateX(80px) scale(.9); opacity: 0; } }
.dcard { background: var(--card); border-radius: var(--r); box-shadow: var(--sh); padding: 18px; margin-top: 4px; position: relative; }
.dcard h2 { font: 600 22px/1.2 var(--font); margin: 0; letter-spacing: -.02em; }
.dcard .loc { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--mute); font-size: 13px; }
.dcard .loc .pinb { width: 36px; height: 36px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; flex: none; }
.dcard .loc .pinb .ico { width: 16px; height: 16px; color: var(--ink); }
.conf { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mute); margin-top: 8px; }
.conf .ico { width: 15px; height: 15px; color: var(--lime-d); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.tile { background: var(--card); border-radius: var(--r-m); box-shadow: var(--sh); padding: 14px 12px; }
.tile .top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tile .top .ic { width: 34px; height: 34px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; flex: none; }
.tile .top .ic .ico { width: 17px; height: 17px; }
.tile .top b { font-size: 19px; }
.tile .top b.no { color: var(--faint); }
.tile small { display: block; margin-top: 10px; font-size: 12px; font-weight: 500; line-height: 1.25; }
.tile small span { display: block; color: var(--mute); font-weight: 400; font-size: 11px; }
.wave { display: flex; align-items: center; gap: 2px; height: 66px; margin-top: 10px; }
.wave i { flex: 1; border-radius: 2px; background: #D7D9D3; animation: grow .9s var(--spring) both; animation-delay: calc(var(--k) * 10ms); }
.wave i.hot { background: var(--lime-d); }
.wave i.now { background: var(--ink); }
@keyframes grow { from { transform: scaleY(.05); } }
.hours { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--mute); margin-top: 6px; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.checks button { height: 46px; border-radius: var(--pill); background: var(--soft); font-size: 13px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; }
.checks button .ico { width: 15px; height: 15px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 13px; margin: 0; }
.kv dt { color: var(--mute); } .kv dd { margin: 0; }
.warn { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-s); background: #FFE6EB; color: #A3162F; font-size: 13px; margin-top: 12px; }
.warn .ico { color: var(--red); width: 18px; height: 18px; margin-top: 1px; }
.dfoot { position: sticky; bottom: 0; margin: 16px -16px 0; padding: 14px 16px calc(14px + var(--safe-b)); background: linear-gradient(to top, var(--bg) 72%, rgba(236,237,233,0)); display: flex; gap: 10px; }
.dfoot .btn { flex: 1; }
.heart { width: 58px; height: 58px; border-radius: 50%; background: var(--card); box-shadow: var(--sh); display: grid; place-items: center; flex: none; }
.heart.on .ico { color: var(--red); animation: pop .5s var(--spring); }

/* Ride Card: a metal card in the CRED co-brand league. Brushed graphite, engraved type, gold chip, live sheen. */
.ridecard { position: relative; aspect-ratio: 1.586; border-radius: 22px; padding: 22px 22px 20px; overflow: hidden; color: #E9E9E4;
  background: #0A0A0B url(/img/v/card-front.webp?v=2) center / 100% 100% no-repeat;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.05), 0 30px 60px -22px rgba(0,0,0,.55), 0 8px 18px -8px rgba(0,0,0,.35);
  display: grid; grid-template-rows: auto 1fr auto; transform-style: preserve-3d; transition: transform .6s var(--spring); will-change: transform; }
.ridecard.founder { box-shadow: inset 0 0 0 1.5px rgba(214,185,110,.75), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.7), 0 30px 60px -22px rgba(0,0,0,.55), 0 8px 18px -8px rgba(0,0,0,.35); }
.ridecard .sheen { position: absolute; inset: -20%; pointer-events: none; z-index: 2; mix-blend-mode: screen; opacity: .55;
  background: linear-gradient(115deg, transparent 32%, rgba(200,255,46,.16) 44%, rgba(255,255,255,.22) 50%, rgba(139,108,255,.14) 56%, transparent 68%);
  background-size: 260% 100%; background-position: var(--sx, 0%) 0; animation: sheen 6s ease-in-out infinite; }
@keyframes sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0% 0; } }
.ridecard[style*="--sx"] .sheen { animation: none; }
.ridecard .glare { position: absolute; inset: 0; background: radial-gradient(circle at var(--gx, 30%) var(--gy, 10%), rgba(255,255,255,.14), transparent 42%); pointer-events: none; z-index: 2; }
.ridecard > * { position: relative; z-index: 1; }
.engr, .rc-num, .rc-bot b { background: linear-gradient(180deg, #F4F4EF 0%, #B9BAB4 55%, #E4E4DF 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.65)) drop-shadow(0 -0.5px 0 rgba(255,255,255,.18)); }
.rc-top { display: flex; justify-content: space-between; align-items: center; }
.rc-mark { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 18px; letter-spacing: -.02em; color: #F2F2EE; }
.rc-mark img { width: 22px; filter: drop-shadow(0 0 10px rgba(200,255,46,.35)); }
.rc-kind { font-size: 9.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #CFCFC9; opacity: .8; }
.ridecard.founder .rc-kind { background: linear-gradient(90deg, #E8D293, #B8964A, #F3E2AE); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 1; }
.rc-num { align-self: end; font: 500 clamp(17px, 5.4vw, 23px)/1 var(--font); letter-spacing: .16em; margin: 14px 0 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rc-bot { display: grid; grid-template-columns: 1.3fr .7fr 1.4fr; gap: 10px; align-items: end; }
.rc-bot small { display: block; font-size: 8px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(233,233,228,.5); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-bot b { display: block; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-tier { text-align: right; }
.rc-tier b { background: linear-gradient(90deg, #C8FF2E, #E9FF9A, #B4EC18); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 8px rgba(200,255,46,.25)); }
.ridecard.founder .rc-tier b { background: linear-gradient(90deg, #E8D293, #B8964A, #F3E2AE); -webkit-background-clip: text; background-clip: text; }
.print { animation: printIn 1.2s var(--spring) both; }
@keyframes printIn { 0% { transform: perspective(900px) rotateY(-90deg) translateZ(60px); opacity: 0; } 60% { opacity: 1; } }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.stat { background: var(--card); border-radius: var(--r-m); box-shadow: var(--sh); padding: 14px; }
.stat b { display: block; font: 600 24px/1 var(--font); font-variant-numeric: tabular-nums; }
.stat span { font-size: 11.5px; color: var(--mute); }
.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--pill); font-size: 11px; font-weight: 600; background: var(--lime); color: var(--on-lime); white-space: nowrap; }
.tag.dark { background: rgba(255,255,255,.12); color: #fff; }
.tag.soft { background: var(--soft); color: var(--ink2); }
.print { animation: printIn 1.1s var(--spring) both; }
@keyframes printIn { from { transform: perspective(900px) rotateX(70deg) translateY(60px); opacity: 0; } }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.stat { background: var(--card); border-radius: var(--r-m); box-shadow: var(--sh); padding: 14px; }
.stat b { display: block; font: 600 24px/1 var(--font); font-variant-numeric: tabular-nums; }
.stat span { font-size: 11.5px; color: var(--mute); }

/* Legends */
.leg { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-m); background: var(--card); box-shadow: var(--sh); margin-bottom: 10px; }
.leg.top1 { background: var(--lime); }
.leg .n { font: 600 14px var(--font); color: var(--mute); width: 34px; }
.leg.top1 .n { color: var(--ink); font-size: 18px; }
.leg .av { width: 36px; height: 36px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; font-weight: 600; font-size: 14px; flex: none; }
.leg .who b { display: block; font-size: 14px; } .leg .who small { color: var(--mute); font-size: 11px; }
.leg.top1 .who small { color: rgba(0,0,0,.6); }
.leg .pts { font: 600 17px var(--font); }

/* sheets */
.scrim { position: fixed; inset: 0; background: rgba(20,22,18,.35); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 30; animation: fade .3s; }
@keyframes fade { from { opacity: 0; } }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; max-height: 90vh; overflow-y: auto; background: var(--bg); border-radius: 30px 30px 0 0; padding: 10px 16px calc(22px + var(--safe-b)); animation: sheetUp .6s var(--spring); box-shadow: 0 -20px 60px rgba(0,0,0,.15); }
.sheet.closing { animation: sheetDown .28s ease-in forwards; }
@keyframes sheetUp { from { transform: translateY(100%); } }
@keyframes sheetDown { to { transform: translateY(100%); } }
.sheet .grab { width: 44px; height: 5px; border-radius: 5px; background: #CFD1CB; margin: 0 auto 10px; }
.sheet .in { max-width: 520px; margin: 0 auto; }
.sheet h3 { font: 500 24px/1.15 var(--font); letter-spacing: -.02em; margin: 6px 50px 4px 0; }
.sheet .x { position: absolute; right: 14px; top: 14px; width: 40px; height: 40px; border-radius: 50%; background: var(--card); box-shadow: var(--sh); display: grid; place-items: center; z-index: 2; }
.sheet .x .ico { width: 17px; height: 17px; }
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg button { height: 46px; padding: 0 16px; border-radius: var(--pill); background: var(--card); box-shadow: var(--sh); display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 13.5px; transition: background .3s, color .3s, transform .5s var(--spring); }
.seg button.on { background: var(--ink); color: #fff; }
.seg button.on .dot.free { box-shadow: none; }
.vpick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.vpick button { border-radius: var(--r-m); background: var(--card); box-shadow: var(--sh); padding: 8px 4px 10px; display: grid; justify-items: center; gap: 2px; font-size: 11.5px; font-weight: 500; transition: background .3s, transform .5s var(--spring); }
.vpick button .vi { height: 64px; display: grid; place-items: center; }
.vpick button img { height: 60px; width: auto; }
.vpick button.on { background: var(--lime); }
.field { width: 100%; height: 54px; border-radius: 18px; background: var(--card); box-shadow: var(--sh); border: 0; padding: 0 18px; outline: none; transition: box-shadow .3s; }
.field:focus { box-shadow: 0 0 0 2px var(--ink), var(--sh); }
textarea.field { height: 84px; padding: 14px 18px; resize: none; }
.shot { height: 130px; border-radius: var(--r-m); background: var(--card) center / cover no-repeat; box-shadow: var(--sh); display: grid; place-content: center; justify-items: center; gap: 6px; color: var(--mute); width: 100%; font-size: 13px; }
.shot .ico { width: 26px; height: 26px; color: var(--ink); }
.shot.has { color: transparent; box-shadow: 0 0 0 3px var(--lime), var(--sh); }
.shot.has .ico { opacity: 0; }
.results { margin-top: 12px; }
.res { display: flex; gap: 12px; align-items: center; padding: 10px 6px; border-radius: var(--r-s); width: 100%; text-align: left; transition: background .2s; }
.res:active { background: var(--card); }
.res .ri { width: 40px; height: 40px; border-radius: 50%; background: var(--card); box-shadow: var(--sh); display: grid; place-items: center; flex: none; }
.res .ri .ico { width: 17px; height: 17px; }
.res .ri.lime { background: var(--lime); }
.res small { display: block; color: var(--mute); font-size: 12px; }
.droppin { position: absolute; left: 50%; top: 46%; z-index: 2; transform: translate(-50%, -100%); pointer-events: none; display: grid; justify-items: center; }
.droppin .p { width: 44px; height: 44px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: var(--ink); display: grid; place-items: center; box-shadow: var(--sh-lift); animation: drop .6s var(--spring); }
.droppin .p i { width: 14px; height: 14px; border-radius: 50%; background: var(--lime); }
.droppin .s { width: 14px; height: 5px; border-radius: 50%; background: rgba(0,0,0,.25); margin-top: 6px; }
@keyframes drop { from { transform: rotate(-45deg) translate(0, -40px); opacity: 0; } }
.dropbar { position: absolute; left: 16px; right: 16px; bottom: calc(var(--nav-h) + 24px + var(--safe-b)); z-index: 3; }

/* first contact */
.first { position: fixed; inset: 0; z-index: 40; background: var(--bg); overflow-y: auto; padding: calc(18px + var(--safe-t)) 20px calc(22px + var(--safe-b)); }
.first .wrap { width: 100%; display: flex; flex-direction: column; min-height: 100%; }
.first .fm { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 20px; }
.first .fm .m { width: 38px; height: 38px; border-radius: 12px; background: var(--ink); display: grid; place-items: center; }
.first .fm .m img { width: 22px; }
.first .stage { position: relative; height: 210px; margin: 10px -20px 0; overflow: hidden; }
.first .stage .road { position: absolute; left: -10%; right: -10%; top: 42%; height: 86px; background: var(--sunk); transform: rotate(-6deg); }
.first .stage .road::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; background: repeating-linear-gradient(90deg, #fff 0 34px, transparent 34px 64px); animation: lane 1.2s linear infinite; }
@keyframes lane { to { background-position: -64px 0; } }
.first .stage img { position: absolute; left: 50%; top: 50%; width: 72%; max-width: 340px; transform: translate(-50%, -50%); filter: drop-shadow(0 30px 26px rgba(0,0,0,.25)); animation: driveIn 1.4s var(--spring) .15s both; }
@keyframes driveIn { from { transform: translate(-170%, -50%); } }
.first h1 { font: 300 36px/1.06 var(--font); letter-spacing: -.035em; margin: 6px 0 16px; }
.first h1 b { font-weight: 600; }
.first .q { position: relative; }
.first .q .field { height: 60px; padding-left: 52px; font-size: 16px; }
.first .q > .ico { position: absolute; left: 20px; top: 20px; color: var(--ink); z-index: 1; }
.first .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.first .line { color: var(--mute); font-size: 13px; margin-top: auto; padding-top: 18px; display: flex; align-items: center; gap: 8px; }
.first .line .ico { width: 15px; height: 15px; color: var(--ink); }
.langs { display: flex; gap: 6px; flex-wrap: wrap; }
.langs button { height: 34px; padding: 0 12px; border-radius: var(--pill); background: var(--card); box-shadow: var(--sh); font-size: 12px; font-weight: 500; transition: background .3s, color .3s; }
.langs button.on { background: var(--ink); color: #fff; }

/* toast: a dynamic-island pill that springs out of the top */
.toast { position: fixed; left: 50%; top: calc(10px + var(--safe-t)); z-index: 60; transform: translateX(-50%); background: #0F0F10; color: #fff; font-size: 13.5px; font-weight: 500;
  padding: 10px 18px 10px 10px; border-radius: 26px; width: max-content; max-width: calc(100vw - 32px); display: flex; align-items: center; gap: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.3); animation: island .6s var(--spring); }
.toast i { width: 28px; height: 28px; border-radius: 50%; background: var(--lime); display: grid; place-items: center; flex: none; }
.toast i .ico { width: 15px; height: 15px; color: var(--ink); }
@keyframes island { from { transform: translateX(-50%) scale(.3, .5); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
  [data-in] { opacity: 1; transform: none; filter: none; }
}

/* wide screens: the phone layout becomes a left column over a full map */
@media (min-width: 820px) {
  .home-head { right: auto; width: 420px; left: 24px; }
  .map-fade { width: 500px; height: 100%; background: linear-gradient(to right, var(--bg) 62%, rgba(236,237,233,0)); }
  .deck { left: 24px; right: auto; width: 420px; flex-direction: column; overflow: visible; bottom: 100px; padding: 0; scroll-snap-type: none; gap: 24px; }
  .deck > :nth-child(n+3) { display: none; }
  .pcard, .acard { width: 100%; max-width: none; }
  .side-fabs { bottom: 100px; right: 24px; }
  .maplibregl-ctrl-bottom-right { bottom: 0; }
  .screen { padding-top: 40px; }
  .sheet { left: 50%; right: auto; width: 540px; margin-left: -270px; bottom: 20px; border-radius: 30px; }
  .detail { left: auto; width: 480px; box-shadow: -30px 0 60px rgba(0,0,0,.12); }
  .dropbar { left: 24px; right: auto; width: 420px; bottom: 100px; }
}

/* ---------- the drone flight ---------- */
.app.flying .home-head, .app.flying .deck, .app.flying .side-fabs { opacity: 0; transform: translateY(12px); pointer-events: none; }
.home-head, .deck, .side-fabs { transition: opacity .45s var(--out), transform .55s var(--out); }
.app.flying .map-fade { opacity: 0; } .map-fade { transition: opacity .5s; }
.drone { width: 74px; height: 74px; --alt: 0; pointer-events: none; }
.drone .d-body { position: absolute; inset: 0; transform: scale(calc(1 + var(--alt) * .45)); transition: transform .2s linear; filter: drop-shadow(0 calc(6px + var(--alt) * 10px) 8px rgba(0,0,0,.25)); }
.drone.lift .d-body { animation: lift .65s var(--spring); }
@keyframes lift { from { transform: scale(.4); opacity: 0; } }
.drone.hover .d-body { animation: hoverbob 1.2s ease-in-out infinite; }
@keyframes hoverbob { 50% { transform: scale(1.08) translateY(-3px); } }
.d-dot { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 5px var(--lime), 0 0 0 10px rgba(200,255,46,.3); }
.d-mascot { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; }
@keyframes spin { to { transform: rotate(360deg); } }
.drone-shadow { width: 64px; height: 64px; border-radius: 50%; --alt: 0; background: radial-gradient(closest-side, rgba(0,0,0,.28), rgba(0,0,0,0)); transform: scale(calc(1 - var(--alt) * .35)); opacity: calc(.9 - var(--alt) * .5); pointer-events: none; }
.lockon { width: 120px; height: 120px; position: relative; pointer-events: none; }
.lockon i { position: absolute; width: 24px; height: 24px; border: 3px solid var(--ink); animation: lockin .7s var(--spring) both; }
.lockon i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; --lx: -30px; --ly: -30px; }
.lockon i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; --lx: 30px; --ly: -30px; }
.lockon i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; --lx: -30px; --ly: 30px; }
.lockon i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; --lx: 30px; --ly: 30px; }
@keyframes lockin { from { transform: translate(var(--lx), var(--ly)); opacity: 0; } }
.lockon b { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 3px solid var(--lime); animation: ping 1.1s ease-out infinite; }
.lockon b + b { animation-delay: .45s; }
@keyframes ping { from { transform: scale(.5); opacity: 1; } to { transform: scale(4.5); opacity: 0; } }
.reveal { position: fixed; inset: 0; z-index: 25; background: #222 center / cover no-repeat; pointer-events: none; }

/* drone camera on the spot page */
.dcam { position: absolute; inset: 0 16px; border-radius: var(--r); overflow: hidden; background: #333; box-shadow: var(--sh-lift); }
.dshot { position: absolute; inset: -6%; background: center / cover no-repeat; animation: kenburns 14s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.12) translate(2%, 1%); } to { transform: scale(1) translate(-1%, -1%); } }
.dcam::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.35)); pointer-events: none; }
.dcam .scan { position: absolute; left: 0; right: 0; height: 40%; top: -40%; background: linear-gradient(to bottom, transparent, rgba(200,255,46,.22) 90%, rgba(200,255,46,.7)); animation: scanline 2.6s cubic-bezier(.5,0,.5,1) 2; }
@keyframes scanline { to { top: 100%; } }
.dcam .br { position: absolute; width: 22px; height: 22px; border: 2.5px solid rgba(255,255,255,.9); z-index: 2; }
.dcam .tl { left: 12px; top: 12px; border-right: 0; border-bottom: 0; } .dcam .tr { right: 12px; top: 12px; border-left: 0; border-bottom: 0; }
.dcam .bl { left: 12px; bottom: 12px; border-right: 0; border-top: 0; } .dcam .br2 { right: 12px; bottom: 12px; border-left: 0; border-top: 0; }
.dcam .lock { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 2px solid var(--lime); border-radius: 12px; z-index: 2; box-shadow: 0 0 0 999px rgba(0,0,0,.0); animation: lockpulse 2.4s ease-in-out infinite; }
@keyframes lockpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.dcam .hud { position: absolute; z-index: 2; font: 600 10px/1 var(--font); letter-spacing: .12em; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.hud-tl { left: 44px; top: 19px; } .hud-tr { right: 44px; top: 19px; } .hud-bl { left: 44px; bottom: 19px; font-variant-numeric: tabular-nums; } .hud-br { right: 44px; bottom: 19px; opacity: .75; }
.dcam .rec { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.hero { height: 240px; }
.pcard .ph { background-size: 115%; transition: background-size 1.2s var(--out); }
.pcard:active .ph { background-size: 125%; }

/* ---------- card launch ---------- */
.launch { position: fixed; inset: 0; z-index: 80; background: radial-gradient(90% 60% at 50% 45%, #1A1B12 0%, #070708 70%); overflow: hidden; color: #fff; animation: fade .4s; }
.launch.out { animation: fadeout .45s forwards; }
@keyframes fadeout { to { opacity: 0; transform: scale(1.04); } }
.l-dust i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--lime); opacity: 0; animation: dust 5s linear infinite; box-shadow: 0 0 6px var(--lime); }
@keyframes dust { 0% { opacity: 0; transform: translateY(20px); } 20% { opacity: .8; } 100% { opacity: 0; transform: translateY(-140px); } }
.l-streak { position: absolute; top: 0; bottom: 0; width: 30%; left: -40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), rgba(200,255,46,.18), transparent); transform: skewX(-18deg); animation: streak 1.1s .7s cubic-bezier(.6,0,.3,1), streak 1.1s 2.9s cubic-bezier(.6,0,.3,1); }
@keyframes streak { from { left: -40%; } to { left: 120%; } }
.l-glow { position: absolute; left: 50%; top: 42%; width: 120vw; height: 120vw; max-width: 900px; max-height: 900px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(200,255,46,.16), transparent 70%); animation: glowin 4s ease-out both; }
@keyframes glowin { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 60% { opacity: 1; } 100% { opacity: .7; transform: translate(-50%, -50%) scale(1); } }
.l-stage { position: absolute; left: 50%; top: 40%; width: min(86vw, 420px); transform: translate(-50%, -50%); perspective: 1400px; }
.l-card { position: relative; transform-style: preserve-3d; aspect-ratio: 1.586; }
.l-card .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.l-card .rear { transform: rotateY(180deg); }
.l-card .ridecard { height: 100%; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 50px 90px -30px rgba(200,255,46,.25), 0 30px 60px -20px rgba(0,0,0,.8); }
.ridecard.back { display: block; padding: 0; background-image: url(/img/v/card-back.webp?v=2); }
.ridecard.back .stripe { display: none; }
.ridecard.back .sig { position: absolute; left: 7%; top: 42%; width: 58%; height: 15%; border-radius: 6px; background: repeating-linear-gradient(135deg, #EDEDE8 0 6px, #DCDCD6 6px 12px); color: #121212; display: flex; flex-direction: column; justify-content: center; padding: 0 12px; z-index: 1; }
.ridecard.back .sig small { font-size: 7px; letter-spacing: .2em; text-transform: uppercase; opacity: .6; }
.ridecard.back .sig span { font: italic 500 16px var(--font); letter-spacing: .02em; }
.ridecard.back .wm { position: absolute; right: 6%; top: 36%; width: 24%; opacity: .9; z-index: 1; filter: drop-shadow(0 0 16px rgba(200,255,46,.35)); }
.ridecard.back .fine { position: absolute; left: 7%; right: 7%; bottom: 7%; margin: 0; font-size: 8.5px; line-height: 1.5; color: rgba(233,233,228,.55); letter-spacing: .04em; z-index: 1; }
.l-copy { position: absolute; left: 0; right: 0; top: calc(40% + min(43vw, 210px) * .68); text-align: center; opacity: 0; transform: translateY(16px); transition: all .8s var(--out); padding: 0 24px; }
.l-copy small { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.l-copy h2 { font: 600 28px/1.15 var(--font); letter-spacing: -.02em; margin: 10px 0 4px; background: linear-gradient(90deg, #fff, #E9FF9A, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.l-copy p { margin: 0; color: rgba(255,255,255,.6); font-size: 14px; }
.l-cta { position: absolute; left: 24px; right: 24px; bottom: calc(30px + var(--safe-b)); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; opacity: 0; transform: translateY(20px); transition: all .8s .15s var(--out); max-width: 460px; margin: 0 auto; }
.launch.done .l-copy, .launch.done .l-cta { opacity: 1; transform: none; }
.l-skip { position: absolute; right: 18px; top: calc(16px + var(--safe-t)); color: rgba(255,255,255,.55); font-size: 13px; padding: 8px 12px; }
.launch.done .l-skip { display: none; }
.l-card .ridecard { transform-style: flat; will-change: auto; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: none; }
.l-card .face { transform-style: flat; }
.l-card .front { transform: rotateY(0deg); }