/*
 * CommuteAds site styles: shared by every redesigned page.
 *
 * The visual language follows Apple's product pages (AirPods Pro): black
 * cinematic openers, chapters with a coloured eyebrow and a very large
 * headline, grey intro copy with highlighted phrases, rounded tiles,
 * a highlights gallery and a quiet grey footer. Everything is local
 * (no CDN); the system font is SF Pro on Apple devices, Inter/Segoe/Roboto
 * elsewhere. Motion respects prefers-reduced-motion.
 */
:root {
  --ink: #1d1d1f;
  --ink-2: #424245;
  --muted: #6e6e73;
  --muted-2: #86868b;
  --line: #d2d2d7;
  --bg: #ffffff;
  --bg-alt: #f5f5f7;
  --night: #000000;
  --night-1: #0b0b0c;
  --night-2: #161617;
  --night-3: #1d1d1f;
  --night-ink: #f5f5f7;
  --night-muted: #86868b;
  --blue: #0071e3;
  --blue-hover: #0077ed;
  --link: #0066cc;
  --link-dark: #2997ff;
  --live: #30d158;
  --soon: #ff9f0a;
  --brand-1: #2f6bff;
  --brand-2: #8b5cff;
  --brand-3: #ff4f9a;
  --radius-xl: 28px;
  --radius-lg: 22px;
  --max: 980px;
  --max-wide: 1260px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.25, .1, .25, 1);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
section[id], [id].section { scroll-margin-top: 52px; }
body {
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -.022em;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img, video, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--link-dark); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: #fff; color: var(--ink); padding: 8px 14px; border-radius: 999px; }
.skip:focus { left: 12px; }

.wrap { width: min(var(--max), calc(100% - 44px)); margin: 0 auto; }
.wrap-wide { width: min(var(--max-wide), calc(100% - 44px)); margin: 0 auto; }

/* ───────────── Global navigation (slim, dark, translucent) ───────────── */
.gnav {
  position: relative; z-index: 60; height: 44px;
  background: #161617;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  color: #e8e8ed; font-size: 12px; letter-spacing: -.01em;
}
.gnav .wrap { height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
/* brand: the orange Commute Ads mark (assets/logo-mark.svg) + name */
.mark { display: block; width: auto; height: 1em; flex: none; fill: #F34C3C; }
.gnav .wordmark { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: #f5f5f7; white-space: nowrap; }
.gnav .wordmark .mark { height: 21px; transition: transform .4s var(--ease-out); }
.gnav .wordmark:hover .mark { transform: rotate(-6deg) scale(1.06); }
.gfoot .crumbs .crumb-home { display: inline-flex; vertical-align: -2px; }
.gfoot .crumbs .crumb-home .mark { height: 15px; }
.hero-mark { display: flex; justify-content: center; margin-bottom: 18px; }
.hero-mark .mark { height: clamp(46px, 5.6vw, 72px); filter: drop-shadow(0 10px 40px rgba(243, 76, 60, .45)); }
.slide.s-brand .mark { height: max(18px, 8cqw); margin: 0 auto 3%; }
.gnav ul { display: flex; gap: 0; list-style: none; flex: 1; justify-content: center; }
.gnav ul a { display: block; padding: 0 12px; line-height: 44px; opacity: .8; transition: opacity .2s; }
.gnav ul a:hover, .gnav ul a[aria-current] { opacity: 1; }
.gnav .end { display: flex; align-items: center; gap: 14px; }
.gnav .end a { opacity: .8; } .gnav .end a:hover { opacity: 1; }
.ed-pill {
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: 3px 10px;
  font-size: 11.5px; font-weight: 600; color: #f5f5f7; line-height: 1.4;
}
.ed-pill b { background: linear-gradient(90deg, #ff8a4c, #ff4f9a, #9b7bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ed-pill:hover { border-color: rgba(255, 255, 255, .45); }
.burger { display: none; width: 44px; height: 44px; margin-right: -12px; position: relative; }
.burger i, .burger i::before { position: absolute; left: 14px; right: 14px; height: 1.5px; background: #e8e8ed; border-radius: 2px; transition: transform .3s var(--ease), top .3s var(--ease); content: ""; }
.burger i { top: 18px; } .burger i::before { top: 7px; left: 0; right: 0; }
.burger[aria-expanded="true"] i { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] i::before { top: 0; transform: rotate(-90deg); }
.gmenu { display: none; position: absolute; top: 44px; left: 0; right: 0; background: rgba(22, 22, 23, .97); padding: 10px 0 28px; }
.gmenu.open { display: block; }
.gmenu a { display: block; width: min(var(--max), calc(100% - 44px)); margin: 0 auto; padding: 10px 0; font-size: 24px; font-weight: 600; color: #e8e8ed; letter-spacing: -.02em; }

/* ───────────── Local navigation (sticky product bar) ───────────── */
.lnav {
  position: sticky; top: 0; z-index: 50; height: 52px;
  background: rgba(22, 22, 23, .9);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  color: #f5f5f7;
}
.lnav .wrap { height: 52px; display: flex; align-items: center; justify-content: space-between; }
.lnav .title { font-size: 21px; font-weight: 600; letter-spacing: .011em; }
.lnav nav { display: flex; align-items: center; gap: 22px; font-size: 12px; }
.lnav nav a.lk { opacity: .8; } .lnav nav a.lk:hover { opacity: 1; }
.lnav nav a.lk.on { opacity: 1; }
.btn-buy { background: var(--blue); color: #fff; border-radius: 980px; padding: 4px 11px; font-size: 12px; font-weight: 400; line-height: 1.34; transition: background .2s; white-space: nowrap; }
.btn-buy:hover { background: var(--blue-hover); }

/* ───────────── Buttons and links ───────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 980px; padding: 11px 22px; font-size: 17px; font-weight: 400; line-height: 1.2; letter-spacing: -.022em; transition: background .2s, color .2s, transform .2s; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-hover); }
.btn-secondary { color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.btn-secondary:hover { background: var(--blue); color: #fff; }
.dark .btn-secondary, .on-dark .btn-secondary { color: var(--link-dark); box-shadow: inset 0 0 0 1px var(--link-dark); }
.dark .btn-secondary:hover, .on-dark .btn-secondary:hover { background: var(--link-dark); color: #000; }
.more { color: var(--link); font-size: 17px; white-space: nowrap; }
.more::after { content: " ›"; }
.more:hover { text-decoration: underline; }
.dark .more, .on-dark .more { color: var(--link-dark); }
.cta-row { display: flex; gap: 14px 28px; align-items: center; justify-content: center; flex-wrap: wrap; }

/* ───────────── Sections and typography ───────────── */
.section { padding: 140px 0; position: relative; overflow: hidden; }
.section.tight { padding: 100px 0; }
.light { background: var(--bg); color: var(--ink); }
.alt { background: var(--bg-alt); color: var(--ink); }
.dark { background: var(--night); color: var(--night-ink); }
.navy { background: #050a17; color: #eef2ff; }

.eyebrow {
  display: block; font-size: clamp(19px, 2vw, 24px); font-weight: 600; letter-spacing: .009em; line-height: 1.17; margin-bottom: 14px;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2) 55%, var(--brand-3)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.eyebrow.solid { background: none; color: var(--muted); }
.dark .eyebrow.solid { color: var(--night-muted); }
.headline {
  font-size: clamp(44px, 7.2vw, 96px); font-weight: 600; line-height: 1.04; letter-spacing: -.015em;
}
.headline.md { font-size: clamp(38px, 5.6vw, 80px); line-height: 1.05; }
.headline.sm { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.07; letter-spacing: -.005em; }
.center { text-align: center; }
.intro {
  font-size: clamp(19px, 2.1vw, 28px); font-weight: 600; line-height: 1.17; letter-spacing: .007em; color: var(--muted-2);
  max-width: 820px; margin-top: 30px;
}
.center .intro { margin-left: auto; margin-right: auto; }
.intro strong { font-weight: 600; color: var(--ink); }
.dark .intro strong, .navy .intro strong { color: var(--night-ink); }
.lede { font-size: clamp(19px, 1.8vw, 21px); line-height: 1.38; color: var(--muted); max-width: 680px; margin-top: 18px; }
.dark .lede, .navy .lede { color: var(--night-muted); }
.center .lede { margin-left: auto; margin-right: auto; }
.grad { background: linear-gradient(90deg, #7aa2ff, #b28bff 48%, #ff7ab6); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* status badges */
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 5px 11px; border-radius: 999px; }
.status.live { background: rgba(48, 209, 88, .14); color: #1a9e45; }
.dark .status.live, .navy .status.live, .on-dark .status.live { color: #4be37a; }
.status.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: ping 1.8s infinite; }
.status.soon { background: rgba(255, 159, 10, .15); color: #b26a00; }
.dark .status.soon, .navy .status.soon, .on-dark .status.soon { color: #ffb340; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(48, 209, 88, .55); } 100% { box-shadow: 0 0 0 8px rgba(48, 209, 88, 0); } }

/* ───────────── Hero ───────────── */
.hero { background: #000; color: var(--night-ink); text-align: center; position: relative; overflow: hidden; padding: 70px 0 0; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 45% at 50% 100%, rgba(47, 107, 255, .45), transparent 70%),
    radial-gradient(30% 30% at 82% 30%, rgba(139, 92, 255, .25), transparent 70%),
    radial-gradient(28% 28% at 16% 34%, rgba(255, 79, 154, .16), transparent 70%);
}
.hero > * { position: relative; }
.hero .product { font-size: clamp(56px, 10vw, 128px); font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.hero .product span { background: linear-gradient(180deg, #ffffff 30%, #9aa6c8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .kicker { font-size: clamp(21px, 2.4vw, 32px); font-weight: 600; letter-spacing: .004em; color: #f5f5f7; margin-top: 14px; }
.hero-stage { position: relative; height: clamp(300px, 46vw, 560px); margin: 46px auto 0; max-width: 1100px; }
.hero-foot { padding: 46px 0 110px; }
.hero-foot .headline.sm { max-width: 900px; margin: 0 auto; }
.hero-foot .price { color: var(--night-muted); font-size: 17px; margin-top: 14px; }
.hero-foot .cta-row { margin-top: 26px; }

/* ───────────── Device renders (CSS, crisp at any size) ───────────── */
.tablet {
  position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%);
  width: min(720px, 82vw); aspect-ratio: 16 / 10; border-radius: 34px; padding: 18px;
  background: linear-gradient(160deg, #2a2a2e, #0c0c0e 40%, #18181b);
  box-shadow: 0 50px 140px rgba(47, 107, 255, .35), 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 2px 0 rgba(255, 255, 255, .12) inset;
}
.tablet::before { content: ""; position: absolute; top: 8px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #202024; box-shadow: 0 0 0 1px #2c2c30; }
.headrest {
  position: absolute; left: 50%; bottom: -12%; transform: translateX(-50%); width: min(980px, 100vw); height: 52%;
  background: radial-gradient(70% 70% at 50% 0, #1c1c20, #070708 72%); border-radius: 50% 50% 0 0 / 34% 34% 0 0; z-index: -1;
}
.screen { position: relative; width: 100%; height: 100%; border-radius: 16px; overflow: hidden; background: #0b0b10; container-type: inline-size; }
.slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 7%; opacity: 0; animation: cycle 15s infinite; color: #fff; text-align: left; }
.slide:nth-child(2) { animation-delay: 5s; } .slide:nth-child(3) { animation-delay: 10s; }
@keyframes cycle { 0% { opacity: 0; } 4% { opacity: 1; } 30% { opacity: 1; } 35% { opacity: 0; } 100% { opacity: 0; } }
.slide .tag { font-size: max(9px, 2.1cqw); letter-spacing: .14em; text-transform: uppercase; opacity: .82; font-weight: 700; }
.slide .big { font-size: max(15px, 6.4cqw); font-weight: 700; letter-spacing: -.02em; line-height: 1.04; margin-top: 1.5%; }
.slide .small { font-size: max(10px, 2.4cqw); opacity: .85; margin-top: 2%; }
.slide.s-brand { justify-content: center; align-items: center; text-align: center; background: radial-gradient(80% 90% at 50% 120%, rgba(59, 130, 246, .55), transparent 70%), linear-gradient(135deg, #0b1030, #2a1660); }
.slide.s-brand .wm { font-size: max(18px, 9cqw); font-weight: 700; letter-spacing: -.03em; }
.slide.s-brand .wm span { color: #6e9bff; }
.slide.s-1 { background: linear-gradient(135deg, #ff6a3d, #ff2d87); }
.slide.s-2 { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.slide.s-3 { background: linear-gradient(135deg, #1e3a8a, #2f6bff); }
.qr {
  position: absolute; right: 6%; bottom: 8%; width: 15%; aspect-ratio: 1; border-radius: 8%;
  background: conic-gradient(#000 25%, #fff 0 50%, #000 0 75%, #fff 0) 0 0 / 25% 25%; border: max(3px, .7cqw) solid #fff;
}
.presence { position: absolute; left: 6%; top: 7%; display: flex; align-items: center; gap: .8cqw; font-size: max(9px, 1.8cqw); font-weight: 600; color: #d1fae5; background: rgba(0, 0, 0, .35); padding: .6cqw 1.4cqw; border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.presence::before { content: ""; width: max(6px, 1.1cqw); aspect-ratio: 1; border-radius: 50%; background: var(--live); }

/* photo with the live in-cab screen composited over it */
.incab { position: relative; aspect-ratio: 818 / 550; overflow: hidden; border-radius: inherit; }
.incab > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.incab .screen { position: absolute; left: 12.35%; top: 21.6%; width: 45.6%; height: 43.8%; border-radius: 5px; }
.incab .slide { padding: 7%; }
.photo { position: relative; border-radius: var(--radius-xl); overflow: hidden; background: #111; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.illus { position: absolute; right: 14px; bottom: 14px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 999px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* ───────────── Highlights gallery ───────────── */
.gallery-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.gallery { margin-top: 44px; }
.gallery .track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scroll-padding-inline: max(22px, calc((100vw - var(--max-wide)) / 2));
  padding: 0 max(22px, calc((100vw - var(--max-wide)) / 2)) 10px; scrollbar-width: none;
}
.gallery .track::-webkit-scrollbar { display: none; }
.gallery .card-h {
  position: relative; flex: 0 0 min(1040px, 84vw); aspect-ratio: 16 / 9.6; border-radius: var(--radius-xl); overflow: hidden;
  scroll-snap-align: center; background: #111; color: #fff; isolation: isolate;
}
.gallery .card-h .cap { position: absolute; left: 0; right: 0; top: 0; padding: clamp(24px, 3.4vw, 44px); font-size: clamp(19px, 2.3vw, 28px); font-weight: 600; line-height: 1.14; letter-spacing: .007em; max-width: 640px; z-index: 2; }
.gallery .card-h .cap em { font-style: normal; color: rgba(255, 255, 255, .62); }
.gallery .card-h::after { content: ""; position: absolute; inset: 0 0 auto; height: 62%; background: linear-gradient(180deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, .45) 45%, transparent); z-index: 1; }
.gallery .card-h > img, .gallery .card-h > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the composite keeps the photo's own shape (so the live screen stays on the tablet); the card crops it */
.gallery .card-h > .incab { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; }
.gallery .card-h .art { position: absolute; inset: 0; }
.gallery .controls { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 26px; }
.dots { display: flex; gap: 10px; align-items: center; background: rgba(210, 210, 215, .2); border-radius: 999px; padding: 14px 20px; }
.light .dots, .alt .dots { background: rgba(0, 0, 0, .06); }
.dots button { width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .42); transition: width .4s var(--ease), background .3s; position: relative; overflow: hidden; }
.light .dots button, .alt .dots button { background: rgba(0, 0, 0, .3); }
.dots button[aria-current="true"] { width: 46px; background: rgba(255, 255, 255, .3); }
.light .dots button[aria-current="true"], .alt .dots button[aria-current="true"] { background: rgba(0, 0, 0, .14); }
.dots button[aria-current="true"]::after { content: ""; position: absolute; inset: 0; transform-origin: left; background: #f5f5f7; animation: fill var(--slide-ms, 5s) linear forwards; }
.light .dots button[aria-current="true"]::after, .alt .dots button[aria-current="true"]::after { background: var(--ink); }
.gallery.paused .dots button[aria-current="true"]::after { animation: none; transform: scaleX(1); }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.play { width: 56px; height: 56px; border-radius: 50%; background: rgba(210, 210, 215, .2); display: grid; place-items: center; color: #f5f5f7; }
.light .play, .alt .play { background: rgba(0, 0, 0, .06); color: var(--ink); }
.play svg { width: 18px; height: 18px; }

/* ───────────── "Take a closer look" viewer ───────────── */
.viewer { margin-top: 56px; }
.viewer .stage { position: relative; border-radius: var(--radius-xl); overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.viewer .pane { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s .6s; }
.viewer .pane.on { opacity: 1; visibility: visible; transition: opacity .6s var(--ease); }
.viewer .pane > img, .viewer .pane picture img { width: 100%; height: 100%; object-fit: cover; }
.viewer .pane .incab { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); width: 100%; }
.viewer .pane .note { position: absolute; left: 24px; bottom: 22px; right: 24px; color: #fff; font-size: 17px; font-weight: 600; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); max-width: 520px; }
.chips { display: flex; justify-content: center; gap: 8px; margin-top: 26px; flex-wrap: wrap; }
.chips button { padding: 9px 18px; border-radius: 999px; font-size: 14px; background: rgba(0, 0, 0, .06); color: var(--ink-2); transition: background .2s, color .2s; }
.chips button:hover { background: rgba(0, 0, 0, .1); }
.chips button[aria-selected="true"] { background: var(--ink); color: #fff; }
.try { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(60% 60% at 50% 100%, rgba(47, 107, 255, .35), transparent 70%), #050507; }
.try .tablet { position: relative; left: auto; bottom: auto; transform: none; width: min(560px, 74%); }
.try video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.try .ph { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: #a1a1a6; font-size: max(11px, 2.6cqw); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 8%; }
.try .upload { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); }
.try input { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* ───────────── Format chapters ───────────── */
.chapter-media { margin-top: 64px; }
.chapter-media .photo { box-shadow: 0 40px 120px rgba(0, 0, 0, .22); }
.dark .chapter-media .photo { box-shadow: 0 40px 140px rgba(47, 107, 255, .2); }
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.tile {
  border-radius: var(--radius-xl); padding: 34px 32px 36px; background: var(--bg-alt); position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px; min-height: 260px;
}
.alt .tile { background: #fff; }
.dark .tile { background: var(--night-2); }
.navy .tile { background: #0c1630; }
.tile .k { font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: -.01em; }
.dark .tile .k, .navy .tile .k { color: var(--night-muted); }
.tile .num { font-variant-numeric: tabular-nums; font-size: clamp(44px, 5vw, 64px); font-weight: 600; letter-spacing: -.02em; line-height: 1; margin-top: auto; }
.tile .num.grad-blue { background: linear-gradient(90deg, #2f6bff, #8b5cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dark .tile .num.grad-blue, .navy .tile .num.grad-blue { background: linear-gradient(90deg, #6e9bff, #c3a6ff); -webkit-background-clip: text; background-clip: text; }
.tile h3 { font-size: 24px; font-weight: 600; letter-spacing: .009em; line-height: 1.17; }
.tile p { color: var(--muted); font-size: 17px; }
.dark .tile p, .navy .tile p { color: var(--night-muted); }
.tile .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(47, 107, 255, .12); color: var(--brand-1); }
.dark .tile .ico, .navy .tile .ico { background: rgba(110, 155, 255, .14); color: #8db1ff; }
.tile .ico svg { width: 24px; height: 24px; }
.span-2 { grid-column: span 2; }
.areas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.areas span { border-radius: 999px; padding: 7px 14px; font-size: 14px; background: rgba(0, 0, 0, .05); color: var(--ink-2); }
.dark .areas span, .navy .areas span { background: rgba(255, 255, 255, .08); color: #d2d2d7; }
.chapter-cta { margin-top: 44px; }

/* ───────────── Dashboard render ───────────── */
.dash { margin: 64px auto 0; max-width: 980px; background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 40px 120px rgba(0, 0, 0, .14); border: 1px solid #e8e8ed; text-align: left; }
.dash .bar { height: 40px; background: #f5f5f7; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid #ececf0; }
.dash .bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .dash .bar i:nth-child(2) { background: #febc2e; } .dash .bar i:nth-child(3) { background: #28c840; }
.dash .bar span { margin-left: 14px; font-size: 12px; color: var(--muted); }
.dash .body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 22px; }
.kpi { border: 1px solid #eee; border-radius: 16px; padding: 18px; }
.kpi small { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.kpi b { display: block; font-size: 26px; letter-spacing: -.02em; margin-top: 6px; font-weight: 600; }
.chart { grid-column: 1 / -1; height: 170px; border: 1px solid #eee; border-radius: 16px; position: relative; overflow: hidden; background: repeating-linear-gradient(90deg, transparent 0 59px, #f3f3f6 59px 60px); }
.chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ───────────── Pricing tiles ───────────── */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; }
.plan { background: #fff; border-radius: var(--radius-xl); padding: 40px 34px; display: flex; flex-direction: column; gap: 12px; text-align: left; position: relative; }
.plan.featured { box-shadow: 0 0 0 2px var(--blue); }
.light .plan { background: var(--bg-alt); }
.plan .price, [data-count] { font-variant-numeric: tabular-nums; }
.plan .tagline { font-size: 12px; font-weight: 600; color: var(--blue); letter-spacing: .02em; text-transform: uppercase; }
.plan h3 { font-size: 28px; font-weight: 600; letter-spacing: .007em; }
.plan p { color: var(--muted); }
.plan .price { margin-top: auto; padding-top: 24px; border-top: 1px solid #ececf0; font-size: 32px; font-weight: 600; letter-spacing: -.01em; }
.plan .price small { display: block; font-size: 14px; color: var(--muted); font-weight: 400; letter-spacing: 0; margin-top: 2px; }
.plan .btn { margin-top: 16px; align-self: flex-start; }
.note-line { margin-top: 30px; color: var(--muted); font-size: 14px; text-align: center; }

/* ───────────── Steps ───────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; counter-reset: s; }
.step { background: var(--bg-alt); border-radius: var(--radius-xl); padding: 40px 32px; text-align: left; }
.step .n { font-size: 56px; font-weight: 600; letter-spacing: -.02em; line-height: 1; background: linear-gradient(180deg, var(--ink), #b0b0b8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.step h3 { font-size: 24px; font-weight: 600; margin-top: 26px; letter-spacing: .009em; }
.step p { color: var(--muted); margin-top: 8px; }

/* ───────────── "Why" card carousel ───────────── */
.why .track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(22px, calc((100vw - var(--max-wide)) / 2)); padding: 4px max(22px, calc((100vw - var(--max-wide)) / 2)) 20px; scrollbar-width: none; margin-top: 44px; }
.why .track::-webkit-scrollbar { display: none; }
.why-card { flex: 0 0 min(340px, 78vw); min-height: 420px; scroll-snap-align: start; background: #fff; border-radius: var(--radius-xl); padding: 34px 30px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 4px 24px rgba(0, 0, 0, .04); transition: transform .4s var(--ease-out), box-shadow .4s; }
.why-card:hover { transform: scale(1.015); box-shadow: 0 10px 40px rgba(0, 0, 0, .08); }
.why-card .ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff; }
.why-card .ico svg { width: 26px; height: 26px; }
.why-card h3 { font-size: 28px; font-weight: 600; line-height: 1.14; letter-spacing: .007em; margin-top: auto; }
.why-card p { color: var(--muted); }
.paddles { display: flex; justify-content: flex-end; gap: 14px; width: min(var(--max-wide), calc(100% - 44px)); margin: 6px auto 0; }
.paddles button { width: 36px; height: 36px; border-radius: 50%; background: rgba(0, 0, 0, .07); color: var(--ink-2); display: grid; place-items: center; font-size: 18px; }
.paddles button:hover { background: rgba(0, 0, 0, .12); }
.paddles button:disabled { opacity: .35; cursor: default; }

/* ───────────── Use cases ───────────── */
.uses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; }
.use { background: var(--bg-alt); border-radius: var(--radius-xl); padding: 32px 30px; text-align: left; }
.use .emo { font-size: 32px; }
.use h3 { font-size: 21px; font-weight: 600; margin-top: 18px; letter-spacing: .011em; }
.use p { color: var(--muted); margin-top: 6px; font-size: 16px; }
.use .fit { margin-top: 14px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); }

/* ───────────── Explore formats (compare) ───────────── */
.explore { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 64px; }
.fmt { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fmt .thumb { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: #111; margin-bottom: 14px; position: relative; }
.fmt .thumb img { width: 100%; height: 100%; object-fit: cover; }
.fmt .thumb .incab { position: absolute; top: 0; left: 50%; height: 100%; transform: translateX(-50%); }
.fmt h3 { font-size: 24px; font-weight: 600; letter-spacing: .009em; }
.fmt p { color: var(--muted); font-size: 15px; min-height: 44px; }
.fmt .from { font-size: 17px; font-weight: 600; margin-top: 4px; }
.fmt .btn { margin-top: 10px; padding: 8px 16px; font-size: 14px; }

/* ───────────── FAQ ───────────── */
.faq { max-width: 820px; margin: 56px auto 0; text-align: left; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font-size: 21px; font-weight: 600; letter-spacing: .011em; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-4px); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.faq details p { color: var(--muted); padding: 0 40px 26px 0; font-size: 17px; }

/* ───────────── Closing band ───────────── */
.band { text-align: center; padding: 160px 0; background: #000; color: var(--night-ink); position: relative; overflow: hidden; }
.band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 60% at 50% 100%, rgba(47, 107, 255, .4), transparent 70%); }
.band > * { position: relative; }
.band .cta-row { margin-top: 36px; }

/* ───────────── Footer ───────────── */
.gfoot { background: var(--bg-alt); color: var(--muted); font-size: 12px; line-height: 1.34; letter-spacing: -.01em; padding: 18px 0 22px; }
.gfoot .notes { padding: 16px 0; border-bottom: 1px solid var(--line); }
.gfoot .notes p + p { margin-top: 8px; }
.gfoot .crumbs { padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.gfoot .crumbs b { color: var(--ink); font-weight: 600; }
.gfoot .cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; padding: 22px 0; }
.gfoot h4 { color: var(--ink); font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.gfoot ul { list-style: none; }
.gfoot li { margin: 8px 0; }
.gfoot a:hover { text-decoration: underline; color: var(--ink); }
.gfoot .legal { border-top: 1px solid var(--line); padding-top: 16px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.gfoot .legal nav { display: flex; gap: 0; flex-wrap: wrap; }
.gfoot .legal nav a { padding: 0 10px; border-left: 1px solid var(--line); }
.gfoot .legal nav a:first-child { border-left: 0; padding-left: 0; }

/* ───────────── CommuteEd modal ───────────── */
.modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 22px; }
.modal.open { display: flex; }
.modal .box { background: #fff; color: var(--ink); border-radius: var(--radius-xl); max-width: 440px; width: 100%; padding: 44px 36px 36px; text-align: center; box-shadow: 0 40px 120px rgba(0, 0, 0, .35); animation: pop .35s var(--ease-out); }
@keyframes pop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
.modal .logo { font-size: 32px; font-weight: 700; letter-spacing: -.03em; }
.modal .logo span { background: linear-gradient(90deg, #ff8a4c, #ff4f9a, #9b7bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.modal h3 { font-size: 24px; margin-top: 14px; font-weight: 600; }
.modal p { color: var(--muted); margin-top: 8px; }
.modal .btn { margin-top: 24px; }

/* ───────────── Scroll reveal ───────────── */
.rv { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .08s; } .rv.d2 { transition-delay: .16s; } .rv.d3 { transition-delay: .24s; }
.zoom { transform: scale(.94); opacity: .4; transition: transform 1.4s var(--ease-out), opacity 1.4s var(--ease-out); }
.zoom.in { transform: none; opacity: 1; }
.no-js .rv, .no-js .zoom { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, .zoom { opacity: 1 !important; transform: none !important; transition: none !important; }
  .slide { animation: none; } .slide:first-child { opacity: 1; }
  .status.live::before { animation: none; }
  .dots button[aria-current="true"]::after { animation: none; transform: scaleX(1); }
}

/* ───────────── Responsive ───────────── */
@media (max-width: 1068px) {
  .explore { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .gfoot .cols { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 833px) {
  .gnav ul, .gnav .end .hide-s { display: none; }
  .burger { display: block; }
  .lnav nav a.lk { display: none; }
  .section { padding: 100px 0; }
  .bento, .plans, .steps, .uses { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .dash .body { grid-template-columns: 1fr 1fr; }
  .tile { min-height: 0; }
  .viewer .stage { aspect-ratio: 4 / 3.4; }
  .gallery-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .explore { grid-template-columns: 1fr; }
  .gfoot .cols { grid-template-columns: 1fr 1fr; }
  .gallery .card-h { aspect-ratio: 3 / 4; flex-basis: 86vw; }
  .gallery .card-h > .incab { left: 50%; right: auto; width: auto; height: 70%; transform: translateX(-50%); }
  .dash .body { grid-template-columns: 1fr; }
  .hero-stage { height: 74vw; }
  .tablet { width: 90vw; padding: 10px; border-radius: 22px; }
  .lnav .title { font-size: 19px; }
  .faq summary { font-size: 18px; }
}

/* ═════════════════════════════ Motion ═════════════════════════════
 * Scroll-driven and ambient motion. Every effect animates only transform,
 * opacity or filter; JS (site.js) feeds scroll progress in as --p / --py
 * and only for elements near the viewport. All of it is off for
 * prefers-reduced-motion (see the block at the end).
 */

/* hero: aurora glow drifting behind the stage */
.aurora { position: absolute; inset: -10% -10% 0; pointer-events: none; overflow: hidden; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
.aurora i:nth-child(1) { width: 46vw; height: 46vw; left: 26%; bottom: -18%; background: #2f6bff; animation: drift1 18s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { width: 30vw; height: 30vw; right: 6%; top: 18%; background: #8b5cff; opacity: .4; animation: drift2 22s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { width: 26vw; height: 26vw; left: 4%; top: 26%; background: #ff4f9a; opacity: .28; animation: drift3 26s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(-12%, -10%) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-30%, 22%) scale(.85); } }
@keyframes drift3 { to { transform: translate(40%, -16%) scale(1.2); } }
.hero::before { display: none; }

/* hero: scroll-scrubbed product reveal (--p 0→1 over the first part of the hero) */
.hero .product, .hero .kicker { transform: translateY(calc(var(--p, 0) * -70px)); opacity: calc(1 - var(--p, 0) * 1.4); }
.hero .product.rv, .hero .kicker.rv { transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.hero .product.rv.in, .hero .kicker.rv.in { transform: translateY(calc(var(--p, 0) * -70px)); opacity: calc(1 - var(--p, 0) * 1.4); }
.floaty { position: absolute; inset: 0; animation: floaty 7s ease-in-out infinite; }
@keyframes floaty { 50% { transform: translateY(-12px); } }
.hero .tablet {
  transform-origin: 50% 100%;
  transform: translateX(-50%) perspective(1500px) rotateX(calc(20deg - var(--p, 0) * 20deg)) scale(calc(.88 + var(--p, 0) * .16));
}
.sheen { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; z-index: 5; }
.sheen::after { content: ""; position: absolute; top: -60%; left: -60%; width: 40%; height: 220%; transform: rotate(25deg) translateX(-200%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .13), transparent); animation: sheen 7s ease-in-out infinite 2s; }
@keyframes sheen { 0%, 70% { transform: rotate(25deg) translateX(-200%); } 100% { transform: rotate(25deg) translateX(700%); } }

/* headlines: words rise out of a blur, one after another */
.rv.split { opacity: 1; transform: none; }
.split .w { display: inline-block; opacity: 0; transform: translateY(.38em); filter: blur(10px); transition: opacity .8s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.split.in .w { opacity: 1; transform: none; filter: none; }

/* intros: words light up as you scroll through the paragraph */
.scrub .w { transition: opacity .35s var(--ease); opacity: .22; }
.scrub .w.lit { opacity: 1; }

/* photos: gentle depth while scrolling past (--py −1→1) */
[data-parallax] { overflow: hidden; }
[data-parallax] > picture img, [data-parallax] > .incab { transform: translateY(calc(var(--py, 0) * -3.5%)) scale(1.09); will-change: transform; }

/* gallery: slow zoom on the card in front */
.gallery .card-h > picture img, .gallery .card-h > .incab { transform: scale(1.1); transition: transform 7s linear; }
.gallery .card-h.is-current > picture img, .gallery .card-h.is-current > .incab { transform: scale(1); }

/* dashboard: the line draws itself */
.dash .chart .line { stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 2.4s var(--ease-out) .3s; }
.dash .chart .area { opacity: 0; transition: opacity 1.2s var(--ease) 1.4s; }
.dash.in .chart .line { stroke-dashoffset: 0; }
.dash.in .chart .area { opacity: 1; }
.dash .chart .dot { opacity: 0; transition: opacity .4s 2.5s; }
.dash.in .chart .dot { opacity: 1; animation: blip 2s ease-out infinite 2.8s; transform-origin: 600px 22px; transform-box: fill-box; }
@keyframes blip { 0% { r: 5; opacity: 1; } 100% { r: 16; opacity: 0; } }

/* neighbourhood ticker */
.ticker { background: #000; color: #f5f5f7; padding: 70px 0; overflow: hidden; position: relative; }
.ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 2; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, #000, transparent); }
.ticker::after { right: 0; background: linear-gradient(-90deg, #000, transparent); }
.ticker .lane { display: flex; width: max-content; animation: lane 60s linear infinite; }
.ticker .lane + .lane { margin-top: 18px; animation-direction: reverse; animation-duration: 75s; }
.ticker .lane span { font-size: clamp(36px, 6vw, 84px); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; padding: 0 .45em; white-space: nowrap; }
.ticker .lane span:nth-child(odd) { color: transparent; -webkit-text-stroke: 1.5px rgba(245, 245, 247, .55); }
.ticker .lane span.hl { color: transparent; background: linear-gradient(90deg, #7aa2ff, #b28bff, #ff7ab6); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; }
.ticker .lane span i { font-style: normal; color: #6e9bff; -webkit-text-stroke: 0; font-size: .5em; vertical-align: middle; }
.ticker:hover .lane { animation-play-state: paused; }
@keyframes lane { to { transform: translateX(-50%); } }

/* live route map (In-Cab) */
.map-tile { padding: 0; min-height: 0; }
.map-tile .map { position: relative; width: 100%; aspect-ratio: 1000 / 430; }
.map-tile svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-tile .road { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 10; stroke-linecap: round; }
.map-tile .road-glow { fill: none; stroke: url(#roadGrad); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 6 14; animation: flow 1.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -40; } }
.map-tile .hub circle.core { fill: #f5f5f7; }
.map-tile .hub circle.ring { fill: none; stroke: #6e9bff; stroke-width: 2; animation: ring 2.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ring { from { transform: scale(.4); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
.map-tile .hub text { fill: #d2d2d7; font: 600 15px var(--font); letter-spacing: -.01em; }
.map-tile .cab { fill: #ffd60a; filter: drop-shadow(0 0 6px rgba(255, 214, 10, .9)); }
.map-tile .cap-row { padding: 26px 32px 32px; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-end; justify-content: space-between; }
.map-tile .cap-row h3 { max-width: 420px; }
.map-tile .illus { position: absolute; right: 16px; top: 16px; bottom: auto; }

/* cards: subtle 3D tilt under the pointer (desktop) */
[data-tilt] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease-out), box-shadow .4s; will-change: transform; }
[data-tilt].tilting { transition: transform .08s linear, box-shadow .4s; }

/* buttons: soft lift */
.btn-primary { box-shadow: 0 0 0 rgba(0, 113, 227, 0); transition: background .2s, box-shadow .3s, transform .3s var(--ease-out); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0, 113, 227, .35); }

/* bus chapter: next-stop strip that keeps rolling */
.stops { margin: 0 auto; width: min(560px, 100%); height: 46px; overflow: hidden; border-radius: 12px; background: #0a0f1c; box-shadow: inset 0 0 0 1px #1d2740; display: flex; align-items: center; gap: 12px; padding: 0 16px; margin-top: 30px; }
.stops small { color: #7f8fb3; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.stops .roll { height: 46px; overflow: hidden; flex: 1; text-align: left; }
.stops .roll ul { list-style: none; animation: roll 14s steps(1) infinite; }
.stops .roll li { height: 46px; line-height: 46px; color: #ffd60a; font-weight: 600; font-size: 19px; white-space: nowrap; }
@keyframes roll { 0% { transform: translateY(0); } 14.28% { transform: translateY(-46px); } 28.57% { transform: translateY(-92px); } 42.85% { transform: translateY(-138px); } 57.14% { transform: translateY(-184px); } 71.42% { transform: translateY(-230px); } 85.71% { transform: translateY(-276px); } }

@media (prefers-reduced-motion: reduce) {
  .aurora i, .floaty, .sheen::after, .ticker .lane, .map-tile .road-glow, .map-tile .hub circle.ring, .stops .roll ul, .dash.in .chart .dot { animation: none !important; }
  .hero .product, .hero .kicker, .hero .tablet { transform: none !important; opacity: 1 !important; }
  .hero .tablet { transform: translateX(-50%) !important; }
  .split .w, .scrub .w { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  [data-parallax] > picture img, [data-parallax] > .incab, .gallery .card-h > picture img, .gallery .card-h > .incab { transform: none !important; transition: none !important; }
  .dash .chart .line { stroke-dashoffset: 0; transition: none; } .dash .chart .area, .dash .chart .dot { opacity: 1; transition: none; }
  [data-tilt] { transform: none !important; }
  .ticker .lane { flex-wrap: wrap; width: auto; justify-content: center; }
  .ticker .lane + .lane { display: none; }
}
@media (max-width: 600px) {
  .map-tile .hub text { font-size: 22px; }
  .ticker { padding: 46px 0; }
}