/* ── Reset & Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Surfaces run dark, matching the logo's ground and both apps.
     --ink stays the darkest surface and --paper the lightest ink, so the
     existing light-on-dark component rules keep their meaning. */
  --ink: #0a0b12;
  --ink-2: #10121c;
  --ink-3: #161927;
  --ink-soft: #b3bacb;
  --ink-faint: #7b8397;
  --paper: #f7f9fc;
  --paper-alt: #151827;
  --card: #14172333;
  --card-solid: #141723;
  --rule: #262b3d;
  /* Brand crimson, sampled from the logo's road swoosh and pin. */
  --amber: #e11d3c;
  --amber-deep: #b33b43;
  --amber-tint: #2a1019;
  --amber-glow: rgba(225, 29, 60, .28);
  --teal: #34d399;
  --teal-tint: #0f2a20;
  --nav-h: 64px;
  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 8px 30px rgba(0, 0, 0, .45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);
  --transition: .2s ease;
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink-soft);
  background: var(--ink);
  background-image:
    radial-gradient(900px 520px at 12% -8%, rgba(225, 29, 60, .16), transparent 62%),
    radial-gradient(760px 460px at 100% 4%, rgba(179, 59, 67, .12), transparent 60%);
  background-attachment: fixed;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 1000;
  background: var(--amber); color: #fff;
  padding: .75rem 1.25rem; border-radius: 0 0 8px 0;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ── Typography ─────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--font-display); color: var(--paper); text-wrap: balance; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 800; line-height: 1.15; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { color: var(--ink-soft); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber); margin-bottom: .85rem;
}

/* ── Utility ─────────────────────────────────────────────── */
.container { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }
.container-narrow { max-width: 760px; }
[hidden] { display: none !important; }
.accent { color: var(--amber); font-style: normal; }

.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-sm { width: 17px; height: 17px; stroke-width: 2; }
.icon-xs { width: 13px; height: 13px; stroke-width: 2.2; }
.icon-lg { width: 34px; height: 34px; stroke-width: 1.6; }
.icon-quote { width: 28px; height: 28px; color: var(--amber); margin-bottom: .75rem; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .68rem 1.5rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .95rem; font-weight: 700;
  text-decoration: none; white-space: nowrap;
  cursor: pointer; border: 1.5px solid transparent;
  transition: background var(--transition), color var(--transition), transform var(--transition), border-color var(--transition);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--amber); color: #fff; border-color: var(--amber); box-shadow: 0 8px 24px var(--amber-glow); }
.btn-primary:hover { background: var(--amber-deep); border-color: var(--amber-deep); color: #fff; }
.btn-outline { border-color: var(--rule); color: var(--paper); background: transparent; }
.btn-outline:hover { border-color: var(--amber); background: var(--amber-tint); color: var(--paper); }
.btn-ghost { background: transparent; color: var(--ink-soft); border-color: transparent; padding-left: .75rem; padding-right: .75rem; }
.btn-ghost:hover { color: var(--paper); background: rgba(255,255,255,.06); }
.btn-lg { padding: .9rem 2rem; font-size: 1.02rem; }
.btn-full { width: 100%; }

/* On dark surfaces */
.section-dark .btn-outline { border-color: rgba(248,244,234,.28); color: var(--paper); }
.section-dark .btn-outline:hover { background: var(--amber); color: #fff; border-color: var(--amber); }

/* ── Navbar ──────────────────────────────────────────────── */
.navbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10, 11, 18, .78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
}
/* The scroll lock has to sit on <html> as well as <body>: html already sets
   overflow-x:hidden further down, which stops body's overflow propagating to
   the viewport, so locking body alone would leave the page scrolling behind
   the drawer. scrollbar-gutter keeps the layout from jumping when it engages. */
html { scrollbar-gutter: stable; }
html.scroll-locked, body.scroll-locked { overflow: hidden; }
.navbar.scrolled { border-bottom-color: var(--rule); box-shadow: 0 8px 30px rgba(0,0,0,.45); }
.nav-container {
  max-width: 1180px; margin: 0 auto; padding: .9rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.logo {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 600;
  text-decoration: none; color: var(--paper);
  display: flex; align-items: center; gap: .5rem;
}
.logo-mark { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; display: block; }
.logo-accent { color: var(--amber); font-weight: 800; }
/* display:contents keeps the desktop bar exactly as it was: the drawer box
   disappears and its children stay flex items of .nav-container. */
.nav-drawer { display: contents; }
.nav-backdrop { display: none; }
.nav-links {
  display: flex; align-items: center; gap: 2rem;
  list-style: none;
}
.nav-links a { text-decoration: none; color: var(--ink-soft); font-weight: 600; font-size: .93rem; transition: color var(--transition); }
.nav-links a:hover { color: var(--paper); }
.nav-actions { display: flex; align-items: center; gap: .25rem; }
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--paper); border-radius: 2px; transition: var(--transition); }

/* ── Hero ────────────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; padding: 4rem 0 5rem; overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 55% at 82% 8%, rgba(225,29,60,.14) 0%, transparent 70%),
    radial-gradient(45% 40% at 8% 90%, rgba(179,59,67,.10) 0%, transparent 70%);
}
/* Background photo slider. Slides stack in the same box and cross-fade
   via opacity; app.js promotes the next one every HERO_SLIDE_MS. The shade
   keeps the copy legible whatever the photo underneath looks like. */
.hero-slider { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--ink); }
.hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; transform: scale(1);
  transition: opacity 1.8s ease-in-out;
  will-change: opacity, transform;
}
.hero-slide.is-active {
  opacity: 1;
  animation: hero-drift 22s ease-in-out forwards;
}
@keyframes hero-drift { from { transform: scale(1); } to { transform: scale(1.06); } }
.hero-slider-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,11,18,.92) 0%, rgba(10,11,18,.78) 45%, rgba(10,11,18,.35) 100%),
    linear-gradient(180deg, rgba(10,11,18,.55) 0%, transparent 30%, transparent 70%, var(--ink) 100%);
}
/* Faint map grid over the photos, fading out towards the copy. app.js draws
   short-lived glows on random cells and line segments onto the canvas so the
   grid feels alive; the mask on the parent applies to the canvas too. */
.hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0, rgba(255,255,255,.07) 1px, transparent 1px, transparent 48px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0, rgba(255,255,255,.07) 1px, transparent 1px, transparent 48px);
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, rgba(0,0,0,.9) 70%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 30%, rgba(0,0,0,.9) 70%, #000 100%);
}
.hero-grid-glow { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-inner { display: flex; align-items: center; gap: 3.5rem; flex-wrap: wrap; }
.hero-content { flex: 1 1 480px; }
.badge {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--card-solid); color: var(--ink-soft);
  padding: .4rem .95rem .4rem .7rem; border-radius: 999px;
  font-size: .82rem; font-weight: 600; margin-bottom: 1.4rem;
  border: 1px solid var(--rule); box-shadow: var(--shadow);
}
.badge .icon { color: var(--amber); }
.hero-content h1 { margin-bottom: 1.3rem; }
.hero-lede { font-size: 1.12rem; margin-bottom: 2.2rem; max-width: 500px; }
.hero-actions { display: flex; gap: .9rem; flex-wrap: wrap; margin-bottom: 2.75rem; }
.hero-stats { display: flex; gap: 2.75rem; flex-wrap: wrap; }
.stat strong { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--paper); }
.stat span { font-size: .82rem; color: var(--ink-faint); }

/* ── Hero Visual ─────────────────────────────────────────── */
/* The photo slider is now the hero visual; the map mock-up would sit on top
   of the subjects in every photo, so it stays in the markup but hidden. */
.hero-visual { display: none; }
.hero-inner { min-height: 520px; }
.map-card {
  position: relative; width: 360px; height: 420px;
  border-radius: 28px; overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: linear-gradient(160deg, #171a27 0%, #24101a 100%);
  border: 1px solid var(--rule);
}
.map-grid {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 42px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 42px);
}
.route-overlay {
  position: absolute; top: 44%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.route-point {
  display: flex; align-items: center; gap: .55rem;
  background: var(--card-solid); padding: .55rem 1.05rem;
  border-radius: 999px; font-size: .85rem; font-weight: 700; color: var(--paper);
  box-shadow: var(--shadow); border: 1px solid var(--rule);
}
.pulse-dot { position: relative; width: 11px; height: 11px; border-radius: 50%; background: var(--amber); display: inline-flex; }
.pulse-ring {
  position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--amber); opacity: .5;
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0% { transform: scale(.6); opacity: .6; }
  100% { transform: scale(1.9); opacity: 0; }
}
.solid-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--teal); }
.route-line {
  width: 2px; height: 64px;
  background: repeating-linear-gradient(to bottom, var(--ink) 0, var(--ink) 5px, transparent 5px, transparent 11px);
  opacity: .35;
}
.floating {
  position: absolute; bottom: 22px; left: 16px; right: 16px;
  background: var(--card-solid); border-radius: var(--radius-sm);
  padding: .95rem; display: flex; align-items: center; gap: .8rem;
  box-shadow: var(--shadow-lg);
  animation: float 3.4s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ride-info { flex: 1; min-width: 0; }
.ride-info strong { display: block; font-size: .92rem; color: var(--paper); }
.ride-info span { display: flex; align-items: center; gap: .3rem; font-size: .76rem; color: var(--ink-faint); }
.seats { display: inline-block; align-self: flex-start; background: var(--amber-tint); color: var(--amber); padding: .05rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 700; margin-top: .15rem; }
.ride-price { font-weight: 800; font-size: 1.05rem; color: var(--paper); white-space: nowrap; }
.verified-chip {
  position: absolute; top: 18px; right: 18px;
  display: flex; align-items: center; gap: .35rem;
  background: var(--ink); color: var(--paper);
  padding: .35rem .7rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700;
}
.verified-chip .icon { color: var(--amber); }

/* ── Route strip ─────────────────────────────────────────── */
/* Accra as a pulsing hub with a corridor running out to each side. Two cars
   per leg drive in opposite directions so it reads as both-ways traffic. */
.route-strip { position: relative; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--ink-2); overflow: hidden; }
.route-strip::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(50% 120% at 50% 50%, rgba(225,29,60,.10) 0%, transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 40px);
}
.route-strip-inner { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2.5rem; padding: 1.4rem 1.5rem; }
.route-strip-head { display: flex; flex-direction: column; gap: .2rem; max-width: 220px; }
.route-strip-label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.route-strip-title { font-family: var(--font-display); font-size: .95rem; font-weight: 700; color: var(--paper); line-height: 1.35; }
.route-strip-more { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 700; color: var(--ink-soft); text-decoration: none; white-space: nowrap; border: 1px solid var(--rule); border-radius: 999px; padding: .45rem .85rem; transition: color var(--transition), border-color var(--transition); }
.route-strip-more:hover { color: var(--paper); border-color: var(--amber); }

.route-map { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: .9rem; min-width: 0; }
.route-end { display: grid; justify-items: center; text-align: center; gap: .1rem; position: relative; }
.route-end-name { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--paper); }
.route-end-sub { font-size: .66rem; color: var(--ink-faint); white-space: nowrap; }
.route-end-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px var(--teal-tint); margin-top: .25rem; }

.route-hub { position: relative; display: grid; justify-items: center; gap: .1rem; padding: 0 .4rem; }
.route-hub-core {
  position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%;
  background: var(--amber); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 5px rgba(225,29,60,.18), var(--shadow);
}
.route-hub-ring { position: absolute; top: 20px; left: 50%; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--amber); transform: translate(-50%, -50%); opacity: 0; animation: hub-pulse 2.8s ease-out infinite; }
.route-hub-ring-2 { animation-delay: 1.4s; }
@keyframes hub-pulse { 0% { transform: translate(-50%, -50%) scale(.9); opacity: .7; } 100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; } }
.route-hub-name { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--paper); margin-top: .3rem; }
.route-hub-sub { font-size: .66rem; font-weight: 700; color: var(--teal); letter-spacing: .06em; text-transform: uppercase; }

.route-leg { position: relative; height: 52px; min-width: 120px; }
.route-leg-line {
  position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%); border-radius: 999px;
  background-image: linear-gradient(90deg, rgba(255,255,255,.28) 0 55%, transparent 55% 100%); background-size: 12px 3px;
  animation: leg-dash 1.4s linear infinite;
}
.route-leg-east .route-leg-line { animation-direction: reverse; }
@keyframes leg-dash { to { background-position: -12px 0; } }
.route-leg-car {
  position: absolute; top: 50%; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card-solid); color: var(--amber); border: 1px solid var(--rule); box-shadow: var(--shadow);
}
/* "in" drives toward Accra, "out" drives away, on slightly different lanes. */
.route-leg-car-in { transform: translate(-50%, -80%); animation: leg-drive 7s linear infinite; }
.route-leg-car-out { transform: translate(-50%, -20%); color: var(--teal); animation: leg-drive 7s linear infinite reverse; animation-delay: -3.5s; }
.route-leg-east .route-leg-car-in { animation-direction: reverse; }
.route-leg-east .route-leg-car-out { animation-direction: normal; }
@keyframes leg-drive { 0% { left: 0; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.route-leg-tag {
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap;
  background: var(--ink-2); padding: 0 .4rem;
}

/* ── Sections ────────────────────────────────────────────── */
.section { padding: 6.5rem 0; }
.section-tint { background: var(--ink-2); }
.section-dark { background: var(--ink-3); border-block: 1px solid var(--rule); }
.section-dark h2, .section-dark h3 { color: var(--paper); }
.section-dark p, .section-dark li { color: var(--ink-soft); }
.section-accent { background: linear-gradient(155deg, var(--ink-2) 0%, var(--amber-tint) 100%); }

.section-header { text-align: center; max-width: 620px; margin: 0 auto 3.75rem; }
.section-header p { margin-top: .5rem; font-size: 1.05rem; }
.section-header.light .eyebrow { color: var(--amber); }

/* ── Steps ───────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.step {
  background: var(--card-solid); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 2.2rem 1.75rem; position: relative; overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.step-number {
  position: absolute; top: 1.1rem; right: 1.3rem;
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 600;
  color: rgba(255, 255, 255, .07); line-height: 1;
}
.step-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--amber-tint); color: var(--amber);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem;
}
.step h3 { margin-bottom: .5rem; }
.step p { font-size: .93rem; }

/* ── Ride Form ───────────────────────────────────────────── */
.ride-form-wrapper { max-width: 780px; margin: 0 auto; }
.ride-form, .signup-form {
  background: rgba(248, 244, 234, .06); border: 1px solid rgba(248, 244, 234, .12);
  border-radius: var(--radius);
  padding: 2.25rem; display: flex; flex-direction: column; gap: 1.3rem;
}
.signup-form { background: var(--card-solid); border-color: var(--rule); box-shadow: var(--shadow); }
.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-group { flex: 1 1 180px; display: flex; flex-direction: column; gap: .4rem; }
.form-group label { font-size: .84rem; font-weight: 700; color: rgba(248, 244, 234, .78); }
.signup-form .form-group label { color: var(--ink-soft); }
.form-group input, .form-group select {
  background: rgba(248, 244, 234, .06); color: var(--paper);
  border: 1.5px solid rgba(248, 244, 234, .2); border-radius: 10px;
  padding: .68rem .9rem; font-size: .95rem; font-family: var(--font-body);
  transition: border-color var(--transition);
}
.signup-form .form-group input { background: var(--ink-2); color: var(--paper); border-color: var(--rule); }
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--amber); }
.form-group input::placeholder { color: rgba(248, 244, 234, .4); }
.signup-form .form-group input::placeholder { color: var(--ink-faint); }
.form-group select option { background: var(--ink-2); color: var(--paper); }

/* ── Ride Results ─────────────────────────────────────────── */
.ride-results { margin-top: 1.75rem; }
.ride-results h3 { color: var(--paper); margin-bottom: 1rem; }
.results-list { display: flex; flex-direction: column; gap: .75rem; }
.result-item {
  background: rgba(248, 244, 234, .05); border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  display: flex; align-items: center; gap: 1rem;
  border: 1px solid rgba(248, 244, 234, .12);
  transition: border-color var(--transition);
}
.result-item:hover { border-color: var(--amber); }
.result-item .avatar { width: 46px; height: 46px; }
.result-meta { flex: 1; min-width: 0; }
.result-meta strong { color: var(--paper); display: block; }
.result-meta span { display: block; font-size: .82rem; color: rgba(248, 244, 234, .55); }
.result-price { font-weight: 800; font-size: 1.05rem; color: var(--amber); white-space: nowrap; }

/* ── Safety Grid ─────────────────────────────────────────── */
.safety-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.safety-card {
  padding: 1.9rem 1.6rem; border-radius: var(--radius);
  background: var(--card-solid); border: 1px solid var(--rule);
  transition: transform var(--transition), box-shadow var(--transition);
}
.safety-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.safety-icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--teal-tint); color: var(--teal);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
}
.safety-card h3 { margin-bottom: .45rem; font-size: 1.05rem; }
.safety-card p { font-size: .88rem; }

/* ── Features (bento grid) ───────────────────────────────── */
/* Each card carries a small self-contained graphic (.feature-fx) that acts
   out the feature. Loops are CSS only; cards fade up once the grid scrolls
   into view (app.js toggles .is-in). */
.features { position: relative; overflow: hidden; }
.features-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(40% 35% at 90% 10%, rgba(225,29,60,.14) 0%, transparent 70%),
    radial-gradient(35% 30% at 5% 95%, rgba(52,211,153,.08) 0%, transparent 70%),
    radial-gradient(rgba(255,255,255,.055) 1px, transparent 1.5px) 0 0 / 26px 26px;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000 40%, transparent 100%);
          mask-image: radial-gradient(80% 80% at 50% 50%, #000 40%, transparent 100%);
}
.features .container { position: relative; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.feature-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 1.25rem;
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 60%), var(--card-solid);
  border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.6rem;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
  opacity: 0; transform: translateY(18px);
}
.features-grid.is-in .feature-card { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1), box-shadow var(--transition), border-color var(--transition); }
.features-grid.is-in .feature-card:nth-child(2) { transition-delay: .08s; }
.features-grid.is-in .feature-card:nth-child(3) { transition-delay: .16s; }
.features-grid.is-in .feature-card:nth-child(4) { transition-delay: .24s; }
.features-grid.is-in .feature-card:nth-child(5) { transition-delay: .32s; }
.features-grid.is-in .feature-card:nth-child(6) { transition-delay: .40s; }
.features-grid.is-in .feature-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: rgba(225,29,60,.45); transition-delay: 0s; }
.feature-wide { grid-column: span 2; flex-direction: row; align-items: center; }
.feature-wide .feature-body { flex: 1 1 50%; }
.feature-wide .feature-fx { flex: 1 1 50%; }
.feature-full { grid-column: span 3; }
.feature-full .feature-body { flex: 1 1 55%; max-width: 560px; }
.feature-full .feature-fx { flex: 1 1 45%; }
.feature-body { display: flex; flex-direction: column; }
.feature-icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--amber-tint); color: var(--amber);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
}
.feature-card h3 { margin-bottom: .5rem; font-size: 1.05rem; }
.feature-card p { font-size: .9rem; }
.feature-install .btn { align-self: flex-start; margin-top: 1.1rem; }
.feature-fx {
  position: relative; border-radius: 14px; padding: 1rem;
  background: var(--ink-2); border: 1px solid var(--rule);
  min-height: 150px; display: flex; flex-direction: column; justify-content: center;
}

/* 1 · fare split */
.fare-total { display: flex; justify-content: space-between; align-items: baseline; font-size: .78rem; color: var(--ink-faint); margin-bottom: .75rem; }
.fare-total strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--paper); }
.fare-bar { display: flex; gap: 4px; height: 12px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.06); }
.fare-bar i { flex: 1; background: var(--amber); transform-origin: left; animation: fare-fill 6s ease-in-out infinite; }
.fare-bar i:nth-child(2) { background: #f0566e; animation-delay: .35s; }
.fare-bar i:nth-child(3) { background: var(--teal); animation-delay: .7s; }
@keyframes fare-fill { 0%, 10% { transform: scaleX(0); } 30%, 80% { transform: scaleX(1); } 95%, 100% { transform: scaleX(0); } }
.fare-chips { display: flex; gap: .5rem; margin-top: .85rem; flex-wrap: wrap; }
.fare-chips span {
  font-size: .74rem; color: var(--ink-soft); background: rgba(255,255,255,.05); border: 1px solid var(--rule);
  padding: .3rem .6rem; border-radius: 999px; animation: fare-pop 6s ease-in-out infinite;
}
.fare-chips span:nth-child(2) { animation-delay: .35s; }
.fare-chips span:nth-child(3) { animation-delay: .7s; }
.fare-chips b { color: var(--paper); margin-right: .25rem; }
.fare-note { margin-top: .7rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
@keyframes fare-pop { 0%, 22% { opacity: 0; transform: translateY(6px); } 36%, 80% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }

/* 2 · route matching */
.fx-route svg { width: 100%; height: auto; display: block; }
.route-road { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 8; stroke-linecap: round; }
.route-dash { fill: none; stroke: var(--amber); stroke-width: 2; stroke-dasharray: 6 8; stroke-linecap: round; animation: route-flow 2.4s linear infinite; }
@keyframes route-flow { to { stroke-dashoffset: -28; } }
.route-rider { fill: var(--teal); stroke: rgba(52,211,153,.35); stroke-width: 6; animation: route-ping 3.6s ease-in-out infinite; }
@keyframes route-ping { 0%, 100% { stroke-width: 0; opacity: .7; } 15% { stroke-width: 10; opacity: 1; } 40% { stroke-width: 0; } }
.route-car {
  position: absolute; width: 26px; height: 26px; border-radius: 50%; top: 0; left: 0;
  background: var(--card-solid); color: var(--amber); border: 1px solid var(--rule); box-shadow: var(--shadow);
  display: inline-flex; align-items: center; justify-content: center;
  offset-path: path("M 26 128 C 82 126, 102 46, 162 52 S 242 96, 260 32"); offset-rotate: 0deg;
  animation: route-drive 7s ease-in-out infinite;
}
@keyframes route-drive { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* 3 · congestion */
.cars-row { display: flex; gap: .55rem; justify-content: center; margin-bottom: .9rem; }
.car-chip {
  width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); color: var(--ink-soft); border: 1px solid var(--rule);
}
.car-fade { animation: car-fade 6s ease-in-out infinite; }
.car-fade:nth-child(2) { animation-delay: .25s; }
.car-fade:nth-child(3) { animation-delay: .5s; }
@keyframes car-fade { 0%, 25% { opacity: 1; transform: none; } 45%, 85% { opacity: .18; transform: scale(.82); } 100% { opacity: 1; transform: none; } }
.car-keep { background: var(--teal-tint); color: var(--teal); border-color: rgba(52,211,153,.35); animation: car-keep 6s ease-in-out infinite; }
@keyframes car-keep { 0%, 30% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } 55% { box-shadow: 0 0 0 8px rgba(52,211,153,.18); } 85%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
.cars-caption { display: flex; justify-content: center; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 700; color: var(--ink-faint); }
.cars-one { color: var(--teal); }
.cars-arrow { color: var(--amber); }

/* 4 · live tracking */
.fx-radar { align-items: center; gap: .75rem; }
.radar { position: relative; width: 110px; height: 110px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, rgba(225,29,60,.16) 0%, transparent 70%); }
.radar-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); }
.radar-ring:nth-child(2) { inset: 18px; }
.radar-ring:nth-child(3) { inset: 36px; }
.radar-sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(225,29,60,.55) 0deg, rgba(225,29,60,.12) 60deg, transparent 90deg);
  animation: radar-spin 3s linear infinite;
}
@keyframes radar-spin { to { transform: rotate(360deg); } }
.radar-blip { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); top: 34%; left: 62%; box-shadow: 0 0 0 3px rgba(247,249,252,.25); animation: radar-blip 3s linear infinite; }
@keyframes radar-blip { 0%, 20% { opacity: .25; } 28% { opacity: 1; transform: scale(1.35); } 60%, 100% { opacity: .25; transform: none; } }
.radar-label { font-size: .74rem; font-weight: 700; color: var(--teal); display: inline-flex; align-items: center; gap: .4rem; }
.radar-label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); animation: pulse 1.6s ease-out infinite; }

/* 5 · ratings */
.fx-rating { gap: .8rem; }
.rate-row { display: flex; align-items: center; gap: .7rem; }
.rate-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--amber-tint); color: var(--amber); font-size: .78rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(225,29,60,.35); }
.rate-avatar-d { background: var(--teal-tint); color: var(--teal); border-color: rgba(52,211,153,.35); }
.rate-stars { display: inline-flex; gap: 3px; }
.rate-stars i { width: 14px; height: 14px; background: rgba(255,255,255,.14); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation: star-fill 6s ease-in-out infinite; }
.rate-stars i:nth-child(2) { animation-delay: .15s; }
.rate-stars i:nth-child(3) { animation-delay: .3s; }
.rate-stars i:nth-child(4) { animation-delay: .45s; }
.rate-stars i:nth-child(5) { animation-delay: .6s; }
.rate-row-2 .rate-stars i { animation-delay: calc(1.6s + var(--i, 0s)); }
.rate-row-2 .rate-stars i:nth-child(2) { --i: .15s; }
.rate-row-2 .rate-stars i:nth-child(3) { --i: .3s; }
.rate-row-2 .rate-stars i:nth-child(4) { --i: .45s; }
.rate-row-2 .rate-stars i:nth-child(5) { --i: .6s; }
@keyframes star-fill { 0%, 8% { background: rgba(255,255,255,.14); transform: none; } 14% { background: #fbbf24; transform: scale(1.3); } 20%, 78% { background: #fbbf24; transform: none; } 90%, 100% { background: rgba(255,255,255,.14); } }
.rate-who { font-size: .72rem; color: var(--ink-faint); margin-left: auto; }

/* 6 · install */
.fx-phone { background: transparent; border: 0; min-height: 0; padding: 0; align-items: center; }
.phone {
  position: relative; width: 168px; height: 200px; border-radius: 28px 28px 0 0; overflow: hidden;
  background: linear-gradient(180deg, #1b1f30, #10121c); border: 3px solid #2b3047; border-bottom: 0;
  box-shadow: var(--shadow-lg);
}
.phone-notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 56px; height: 8px; border-radius: 999px; background: #2b3047; }
.phone-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 34px 16px 0; }
.phone-apps i { display: block; aspect-ratio: 1; border-radius: 9px; background: rgba(255,255,255,.08); }
.phone-app-drop { display: flex; aspect-ratio: 1; border-radius: 9px; overflow: hidden; box-shadow: 0 0 0 0 rgba(225,29,60,.5); animation: app-drop 6s ease-in-out infinite; }
.phone-app-drop img { width: 100%; height: 100%; object-fit: cover; }
@keyframes app-drop {
  0%, 15% { opacity: 0; transform: translateY(-14px) scale(.6); }
  28% { opacity: 1; transform: translateY(0) scale(1.08); box-shadow: 0 0 0 6px rgba(225,29,60,.25); }
  36%, 85% { opacity: 1; transform: none; box-shadow: 0 0 0 0 rgba(225,29,60,0); }
  100% { opacity: 0; }
}
.phone-toast {
  position: absolute; left: 12px; right: 12px; bottom: 14px; padding: .45rem .7rem; border-radius: 10px;
  background: var(--teal-tint); color: var(--teal); font-size: .7rem; font-weight: 700;
  display: flex; align-items: center; gap: .35rem; animation: toast-up 6s ease-in-out infinite;
}
@keyframes toast-up { 0%, 30% { opacity: 0; transform: translateY(16px); } 40%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(16px); } }

/* ── Story band ──────────────────────────────────────────── */
/* Full-bleed photo between sections, cut top and bottom with wave edges in
   the neighbouring section colours. Tags slide in one by one once the band
   scrolls into view (app.js toggles .is-in). */
.story-band { position: relative; isolation: isolate; min-height: 660px; overflow: hidden; background: var(--ink-3); }
.story-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; z-index: -2; }
.story-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,11,18,.35) 0%, transparent 30%, rgba(10,11,18,.55) 58%, rgba(10,11,18,.96) 100%),
    linear-gradient(90deg, rgba(10,11,18,.7) 0%, rgba(10,11,18,.25) 40%, transparent 60%);
}
.story-wave { position: absolute; left: 0; width: 100%; height: 70px; display: block; pointer-events: none; }
.story-wave-top { top: -1px; fill: var(--ink); }
.story-wave-bottom { bottom: -1px; fill: var(--ink-3); }
.story-inner { position: relative; display: flex; align-items: flex-end; min-height: 660px; padding-top: 7rem; padding-bottom: 6rem; }
.story-copy { max-width: 520px; }
.story-copy h2 { color: var(--paper); margin: .4rem 0 .8rem; }
.story-copy p { color: var(--ink-soft); font-size: 1.05rem; }
.story-tags { position: absolute; inset: 0; pointer-events: none; }
.story-tag {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, 14px);
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(10,11,18,.74); backdrop-filter: blur(8px); color: var(--paper);
  border: 1px solid rgba(255,255,255,.16); padding: .42rem .85rem; border-radius: 999px;
  font-size: .8rem; font-weight: 700; white-space: nowrap; box-shadow: var(--shadow);
  opacity: 0; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.story-tag-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px var(--amber-glow); }
.story-band.is-in .story-tag { opacity: 1; transform: translate(-50%, 0); animation: float 7s ease-in-out infinite; }
.story-band.is-in .story-tag:nth-child(1) { transition-delay: .15s; animation-delay: .8s; }
.story-band.is-in .story-tag:nth-child(2) { transition-delay: .45s; animation-delay: -2s; }
.story-band.is-in .story-tag:nth-child(3) { transition-delay: .75s; animation-delay: -4.5s; }

/* ── Testimonials ────────────────────────────────────────── */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.testimonial-card {
  background: var(--card-solid); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 2rem;
}
.testimonial-card blockquote { font-size: 1.02rem; color: var(--paper); line-height: 1.6; margin-bottom: 1.5rem; }
.testimonial-card figcaption { display: flex; align-items: center; gap: .75rem; }
.testimonial-card figcaption img { width: 40px; height: 40px; border-radius: 50%; }
.testimonial-card figcaption strong { display: block; font-size: .9rem; color: var(--paper); }
.testimonial-card figcaption span { font-size: .78rem; color: var(--ink-faint); }

/* ── Offer Section (drivers) ─────────────────────────────── */
/* Copy + four benefit tiles on the left; on the right the driver photo with
   an earnings estimator card overlapping its foot (app.js does the maths). */
.offer { position: relative; overflow: hidden; }
.offer-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(45% 50% at 100% 100%, rgba(225,29,60,.22) 0%, transparent 70%),
    repeating-linear-gradient(-35deg, rgba(255,255,255,.028) 0 2px, transparent 2px 22px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}
.offer-container { position: relative; display: flex; align-items: center; gap: 4rem; flex-wrap: wrap; }
.offer-text { flex: 1 1 420px; }
.offer-text h2 { margin-bottom: 1rem; }
.offer-lede { font-size: 1.08rem; max-width: 540px; }
.offer-tiles { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin: 1.8rem 0 2.2rem; }
.offer-tiles li {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .75rem; row-gap: .15rem;
  background: rgba(255,255,255,.035); border: 1px solid var(--rule); border-radius: 14px; padding: .95rem 1rem;
  transition: border-color var(--transition), background var(--transition);
}
.offer-tiles li:hover { border-color: rgba(225,29,60,.45); background: rgba(225,29,60,.06); }
.offer-tile-icon { grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 10px; background: var(--amber-tint); color: var(--amber); display: inline-flex; align-items: center; justify-content: center; }
.offer-tiles strong { font-size: .95rem; color: var(--paper); }
.offer-tiles li > span:last-child { font-size: .82rem; color: var(--ink-soft); }
.offer-visual { position: relative; flex: 1 1 380px; display: flex; justify-content: center; padding-bottom: 17rem; }
.offer-photo { position: relative; width: 100%; max-width: 400px; margin: 0; }
.offer-photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%;
  border-radius: 28px; border: 1px solid var(--rule); box-shadow: var(--shadow-lg);
}
.offer-photo-tag {
  position: absolute; top: 1rem; left: 1rem;
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(10,11,18,.78); backdrop-filter: blur(6px); color: var(--paper);
  padding: .4rem .8rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
  border: 1px solid var(--rule);
}
.offer-photo-tag .icon { color: var(--teal); }
.earn-card {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(100%, 400px); background: var(--card-solid); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1.35rem 1.5rem 1.2rem; box-shadow: var(--shadow-lg);
}
.earn-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.earn-eyebrow { font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
.earn-badge { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--rule); border-radius: 999px; padding: .2rem .5rem; white-space: nowrap; }
.earn-figure { display: flex; align-items: baseline; gap: .35rem; }
.earn-currency { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--amber); }
.earn-week { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--paper); font-variant-numeric: tabular-nums; }
.earn-per { font-size: .85rem; color: var(--ink-faint); }
.earn-month { font-size: .8rem; color: var(--ink-faint); margin: .35rem 0 1rem; }
.earn-month b { color: var(--teal); }
.earn-row { display: block; margin-top: .7rem; }
.earn-row > span { display: flex; justify-content: space-between; font-size: .78rem; font-weight: 600; color: var(--ink-soft); margin-bottom: .3rem; }
.earn-row output { color: var(--paper); font-variant-numeric: tabular-nums; }
.earn-row input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 999px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, var(--amber) var(--fill, 50%), rgba(255,255,255,.12) var(--fill, 50%));
}
.earn-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--amber); box-shadow: 0 0 0 4px var(--amber-glow); cursor: grab;
}
.earn-row input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 3px solid var(--amber); box-shadow: 0 0 0 4px var(--amber-glow); cursor: grab;
}
.earn-row input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(225,29,60,.45); }
.earn-note { font-size: .72rem; color: var(--ink-faint); margin-top: .9rem; line-height: 1.5; }

/* ── Pricing ─────────────────────────────────────────────── */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.5rem; align-items: start; }
.pricing-card { border: 1.5px solid var(--rule); background: var(--card-solid); border-radius: var(--radius); padding: 2.1rem 1.85rem; position: relative; }
.pricing-card.featured { border-color: var(--amber); box-shadow: 0 0 0 4px var(--amber-tint); }
.featured-tag {
  position: absolute; top: -1px; right: 1.6rem;
  background: var(--amber); color: #fff;
  padding: .22rem .8rem; border-radius: 0 0 8px 8px;
  font-size: .76rem; font-weight: 800;
}
.pricing-card h3 { margin-bottom: .6rem; }
.price { font-size: 2.6rem; font-weight: 800; color: var(--paper); line-height: 1; margin-bottom: 1.6rem; display: flex; align-items: baseline; gap: .5rem; letter-spacing: -0.02em; }
.price span { font-family: var(--font-body); font-size: .85rem; font-weight: 500; color: var(--ink-faint); }
.pricing-card ul { list-style: none; margin-bottom: 1.9rem; display: flex; flex-direction: column; gap: .65rem; }
.pricing-card li { display: flex; align-items: center; gap: .55rem; font-size: .9rem; color: var(--ink-soft); }
.pricing-card .icon { color: var(--amber); }

.demo-badge {
  position: absolute; top: -.7rem; left: 1.5rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--amber); color: #fff;
  font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem .75rem; border-radius: 999px; box-shadow: var(--shadow);
}
.ride-form-wrapper { position: relative; }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: .75rem; }
.faq-item { background: var(--card-solid); border: 1px solid var(--rule); border-radius: var(--radius-sm); overflow: hidden; }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 1.1rem 1.4rem; font-family: var(--font-body); font-size: 1rem; font-weight: 700; color: var(--paper);
}
.faq-chevron { color: var(--ink-faint); transition: transform var(--transition); flex-shrink: 0; }
.faq-question[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); color: var(--amber); }
/* max-height alone only clips the answer - screen readers still read it. The
   visibility flip removes it from the accessibility tree and is delayed on
   close so the collapse animation still plays. */
.faq-answer {
  max-height: 0; overflow: hidden; visibility: hidden;
  transition: max-height .25s ease, visibility 0s linear .25s;
}
.faq-answer.open { visibility: visible; transition: max-height .25s ease, visibility 0s; }
.faq-answer p { padding: 0 1.4rem 1.25rem; font-size: .92rem; max-width: 640px; }

/* ── Install / Get the app ───────────────────────────────── */
.install-section { overflow: hidden; }
.install-inner { display: flex; align-items: center; justify-content: space-between; gap: 3rem; flex-wrap: wrap; }
.install-inner > div:first-child { flex: 1 1 420px; }
.install-inner p { max-width: 460px; margin-bottom: 1.75rem; }
.install-visual {
  flex: 0 0 auto; width: 160px; height: 160px; border-radius: 50%;
  background: rgba(242, 166, 58, .12);
  display: flex; align-items: center; justify-content: center;
}
.install-phone { width: 64px; height: 64px; color: var(--amber); stroke-width: 1.3; }

/* ── Signup ──────────────────────────────────────────────── */
.signup-form { max-width: 640px; margin: 0 auto; }
.radio-group { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.radio-label { display: flex; align-items: center; gap: .45rem; color: var(--ink-soft); font-size: .92rem; font-weight: 500; cursor: pointer; }
.radio-label input[type="radio"] { accent-color: var(--amber-deep); width: 16px; height: 16px; }
.signup-success { text-align: center; padding: 3rem 1rem; }
.success-icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 1rem;
  background: var(--amber-tint); color: var(--amber);
  display: flex; align-items: center; justify-content: center;
}
.signup-success h3 { font-size: 1.6rem; margin-bottom: .5rem; }

/* ── Footer ──────────────────────────────────────────────── */
.footer { background: var(--ink); padding-top: 3.5rem; }
.footer-top {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  padding-bottom: 2.5rem; margin-bottom: 2.5rem;
  border-bottom: 1px solid rgba(248, 244, 234, .12);
}
.footer-newsletter h3 { color: var(--paper); margin-bottom: .3rem; font-size: 1.15rem; }
.footer-newsletter p { font-size: .88rem; color: rgba(248, 244, 234, .55); }
.newsletter-form { display: flex; gap: .6rem; flex-wrap: wrap; }
.newsletter-form input {
  background: rgba(248, 244, 234, .07); border: 1.5px solid rgba(248, 244, 234, .18);
  border-radius: 999px; padding: .62rem 1.1rem; color: var(--paper);
  font-family: var(--font-body); font-size: .92rem; min-width: 220px;
}
.newsletter-form input::placeholder { color: rgba(248, 244, 234, .4); }
.newsletter-form input:focus { outline: none; border-color: var(--amber); }

.footer-inner { display: flex; gap: 4rem; flex-wrap: wrap; padding-bottom: 3rem; }
.footer-brand { flex: 1 1 220px; }
.footer-brand .logo { color: var(--paper); }
.footer-brand p { margin-top: .6rem; color: rgba(248, 244, 234, .5); font-size: .88rem; }
.social-links { display: flex; gap: .75rem; margin-top: 1.25rem; }
.social-links a {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(248, 244, 234, .08); color: rgba(248, 244, 234, .7);
  transition: background var(--transition), color var(--transition);
}
.social-links a:hover { background: var(--amber); color: #fff; }
.footer-links { flex: 2 1 400px; display: flex; gap: 2.5rem; flex-wrap: wrap; }
.footer-col { flex: 1 1 130px; }
.footer-col h4 { color: var(--paper); font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .9rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.footer-col a { text-decoration: none; color: rgba(248, 244, 234, .55); font-size: .88rem; transition: color var(--transition); }
.footer-col a:hover { color: var(--amber); }
.footer-bottom { text-align: center; padding: 1.75rem 0; border-top: 1px solid rgba(248, 244, 234, .12); }
.footer-bottom p { font-size: .82rem; color: rgba(248, 244, 234, .4); }
.footer-bottom a { color: rgba(248, 244, 234, .55); text-decoration: none; }
.footer-bottom a:hover { color: var(--amber); }

/* ── Modal ───────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(20, 23, 31, .65);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: fadeIn .2s ease;
}
.modal-overlay[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--card-solid); border-radius: 20px;
  width: 100%; max-width: 600px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: slideUp .25s ease;
}
@keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem 1.75rem 1rem;
  border-bottom: 1px solid var(--rule);
}
.modal-header h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.2rem; }
.modal-close {
  background: none; border: none; color: var(--ink-faint);
  cursor: pointer; line-height: 1;
  padding: .4rem; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.modal-close:hover { background: var(--paper-alt); color: var(--paper); }

.modal-form { padding: 1.4rem 1.75rem 1.75rem; display: flex; flex-direction: column; gap: 1.1rem; }
.modal-form .form-group input, .modal-form .form-group select {
  background: var(--ink-2); color: var(--paper); border-color: var(--rule);
}
.modal-form .form-group textarea {
  background: var(--ink-2); color: var(--paper); border: 1.5px solid var(--rule);
  border-radius: 10px; padding: .68rem .9rem; font-size: .95rem; font-family: var(--font-body);
  transition: border-color var(--transition); resize: vertical; min-height: 130px;
}
.modal-form .form-group label { color: var(--ink-soft); }
.modal-form .form-group input::placeholder,
.modal-form .form-group textarea::placeholder { color: var(--ink-faint); }
.modal-form .form-group textarea:focus { outline: none; border-color: var(--amber); }

.form-helper {
  font-size: .84rem;
  color: var(--ink-faint);
  min-height: 1.2em;
}

.modal-actions { display: flex; gap: 1rem; justify-content: flex-end; padding-top: .5rem; }

.modal-success { text-align: center; padding: 2.75rem 2rem; }
.modal-success h3 { font-size: 1.4rem; margin-bottom: .5rem; }
.modal-success p { margin-bottom: 1.5rem; }

/* ── Legal pages (privacy.html, terms.html) ──────────────── */
.legal-page .navbar { position: sticky; }
.nav-links-static a[aria-current="page"] { color: var(--paper); }
/* The page you are on (e.g. Fleets on fleet.html): bright, with the brand underline. */
.nav-links a[aria-current="page"] { color: var(--paper); text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.legal-hero { padding: 4.5rem 0 3rem; border-bottom: 1px solid var(--rule); background: linear-gradient(180deg, var(--ink-2), var(--ink)); }
.legal-hero h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: var(--paper); margin-bottom: .6rem; }
.legal-meta { font-size: .85rem; color: var(--ink-faint); margin-bottom: 1.4rem; }
.legal-summary {
  max-width: 720px; font-size: 1.02rem; color: var(--ink-soft); line-height: 1.65;
  padding: 1.1rem 1.3rem; border-left: 3px solid var(--amber); background: rgba(225,29,60,.06); border-radius: 0 12px 12px 0;
}
.legal { padding: 3.5rem 0 5rem; }
.legal-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 3.5rem; align-items: start; }
.legal-toc { position: sticky; top: 90px; font-size: .86rem; }
.legal-toc strong { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .75rem; }
.legal-toc ol { list-style: none; display: flex; flex-direction: column; gap: .35rem; border-left: 1px solid var(--rule); }
.legal-toc a { display: block; padding: .25rem 0 .25rem .9rem; margin-left: -1px; border-left: 2px solid transparent; color: var(--ink-soft); text-decoration: none; transition: color var(--transition), border-color var(--transition); }
.legal-toc a:hover { color: var(--paper); border-left-color: var(--amber); }
.legal-body { max-width: 760px; }
.legal-body section { scroll-margin-top: 90px; padding-bottom: 2.4rem; margin-bottom: 2.4rem; border-bottom: 1px solid var(--rule); }
.legal-body section:last-child { border-bottom: 0; }
.legal-body h2 { font-size: 1.45rem; margin-bottom: 1rem; color: var(--paper); }
.legal-body h3 { font-size: 1.02rem; margin: 1.5rem 0 .6rem; color: var(--paper); }
.legal-body p, .legal-body li { font-size: .97rem; line-height: 1.7; color: var(--ink-soft); }
.legal-body p + p { margin-top: .8rem; }
.legal-body ul { padding-left: 1.2rem; display: flex; flex-direction: column; gap: .55rem; margin: .6rem 0; }
.legal-body li::marker { color: var(--amber); }
.legal-body a { color: var(--paper); text-decoration: underline; text-decoration-color: rgba(225,29,60,.6); text-underline-offset: 3px; }
.legal-body a:hover { color: var(--amber); }
.legal-body strong { color: var(--paper); }
.legal-table { width: 100%; border-collapse: collapse; margin: .9rem 0; font-size: .9rem; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: .65rem .8rem; border-bottom: 1px solid var(--rule); line-height: 1.55; }
.legal-table th { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); border-bottom-color: rgba(255,255,255,.18); }
.legal-table td { color: var(--ink-soft); }
.legal-table td:first-child { color: var(--paper); font-weight: 600; white-space: nowrap; }
.legal-address { font-style: normal; line-height: 1.7; color: var(--ink-soft); }
.legal-fine { font-size: .84rem; color: var(--ink-faint); margin-top: 1rem; }
.footer-compact { padding-top: 0; }
.footer-bottom a + a, .footer-bottom p a { margin: 0 .1rem; }

/* ── Responsive ──────────────────────────────────────────── */
/* The route map needs the full container width before the viewport gets close
   to it; below this the head/map/pill row stops being three columns. */
@media (max-width: 1040px) {
  .route-strip-inner { grid-template-columns: 1fr; gap: 1.1rem; justify-items: center; text-align: center; }
  .route-strip-head { max-width: none; align-items: center; }
  .route-map { width: 100%; max-width: 640px; }
}

@media (max-width: 980px) {
  .steps { grid-template-columns: 1fr; }
  .safety-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: 1fr; }
}

/* FIX: the desktop bar used to hold until 768px, where "How It Works" wrapped
   to three lines and the "Open the app" button ran off the viewport. The
   drawer is positioned against .navbar (not the viewport) on purpose: the bar
   sets backdrop-filter, which would make it the containing block for any
   position:fixed child and collapse the panel to the bar's own height. */
@media (max-width: 960px) {
  .nav-toggle { display: flex; position: relative; z-index: 3; }
  .nav-toggle span { transition: transform var(--transition), opacity var(--transition); }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-drawer {
    display: flex; flex-direction: column; gap: 1.5rem;
    position: absolute; top: 100%; right: 0; z-index: 2;
    width: min(330px, 84vw); height: calc(100dvh - var(--nav-h));
    background: var(--ink-2); border-left: 1px solid var(--rule);
    box-shadow: -24px 0 70px rgba(0, 0, 0, .65);
    padding: 1.5rem; overflow-y: auto;
    transform: translateX(104%); visibility: hidden;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .3s;
  }
  .nav-drawer.open { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
  /* Scoped to the drawer: privacy.html and terms.html reuse .nav-links and
     .nav-actions in a plain bar with no drawer and no toggle. */
  .nav-drawer .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-drawer .nav-links a { display: block; padding: .85rem .15rem; font-size: 1rem; border-bottom: 1px solid var(--rule); }
  .nav-drawer .nav-actions { flex-direction: column; align-items: stretch; gap: .6rem; margin-top: auto; }
  .nav-drawer .nav-actions .btn { width: 100%; justify-content: center; }

  /* Legal pages: three short links and one button, so no drawer is warranted.
     They simply wrap onto a second row. Previously they were display:none
     below 768px, which left those pages with no navigation at all. */
  .legal-page .nav-container { flex-wrap: wrap; row-gap: .55rem; }
  .legal-page .nav-links-static { order: 3; width: 100%; gap: 1.25rem; }
  .legal-page .nav-links-static a { font-size: .86rem; }
  .nav-backdrop {
    display: block; position: absolute; top: 100%; left: 0; right: 0; z-index: 1;
    height: calc(100dvh - var(--nav-h));
    background: rgba(10, 11, 18, .66); backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none; transition: opacity .3s ease;
  }
  .nav-backdrop.open { opacity: 1; pointer-events: auto; }
}

@media (max-width: 768px) {
  .route-strip-inner { padding: 1.4rem 1rem; }
  .route-map { gap: .5rem; }
  .route-end-sub { display: none; }
  .route-leg { min-width: 48px; }
  .route-leg-tag { display: none; }
  .hero { padding: 2.5rem 0 3rem; text-align: center; }
  .hero-slider-shade {
    background:
      linear-gradient(180deg, rgba(10,11,18,.9) 0%, rgba(10,11,18,.72) 55%, var(--ink) 100%);
  }
  .hero-grid { -webkit-mask-image: none; mask-image: none; opacity: .5; }
  .hero-actions { justify-content: center; margin-bottom: 1.9rem; }
  .hero-lede { margin-bottom: 1.6rem; }
  .hero-content h1 { margin-bottom: 1rem; }
  /* Three even columns rather than flex-wrap, which left a 2+1 orphan row. */
  .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem .75rem; }
  .stat strong { font-size: 1.5rem; }
  .stat span { font-size: .74rem; line-height: 1.35; display: block; }
  /* Landscape photos crop hard in a portrait viewport, so each slide declares
     where its subject sits (--mpos) instead of defaulting to dead centre. */
  .hero-slide { object-position: var(--mpos, 50%) 32%; }
  .hero-visual { width: 100%; }
  .map-card { width: 100%; max-width: 360px; }
  .features-grid { grid-template-columns: 1fr; }
  .feature-wide, .feature-full { grid-column: auto; flex-direction: column; align-items: stretch; }
  .feature-install .feature-fx { order: -1; }
  .story-band, .story-inner { min-height: 440px; }
  .story-inner { padding-top: 5rem; padding-bottom: 4.5rem; }
  .story-photo { object-position: 45% 30%; }
  .story-shade {
    background: linear-gradient(180deg, rgba(10,11,18,.4) 0%, rgba(10,11,18,.2) 30%, rgba(10,11,18,.94) 78%);
  }
  .story-tags { display: none; }
  .legal-grid { grid-template-columns: 1fr; gap: 2rem; }
  .legal-toc { position: static; }
  .legal-toc ol { border-left: 0; flex-direction: row; flex-wrap: wrap; gap: .4rem; }
  .legal-toc a { border: 1px solid var(--rule); border-radius: 999px; padding: .3rem .7rem; margin: 0; }
  .legal-table td:first-child { white-space: normal; }
  .legal-table { display: block; overflow-x: auto; }
  .offer-container { text-align: center; }
  .offer-lede { margin-left: auto; margin-right: auto; }
  .offer-tiles { text-align: left; grid-template-columns: 1fr; }
  .offer-visual { padding-bottom: 0; }
  .offer-photo { display: none; }
  .earn-card { position: static; transform: none; width: 100%; max-width: 420px; text-align: left; }
  .safety-grid { grid-template-columns: 1fr; }
  .install-inner { text-align: center; justify-content: center; }
  .install-inner p { margin-left: auto; margin-right: auto; }
  .footer-top { flex-direction: column; align-items: flex-start; }
}

/* ── Beta / ownership additions ──────────────────────────── */
.badge-beta { border-color: rgba(225, 29, 60, .45); background: var(--amber-tint); color: var(--paper); }
.badge-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 0 4px rgba(225, 29, 60, .18); flex-shrink: 0;
}

.beta-facts { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.25rem; }
.beta-fact {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--card-solid); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.25rem 1.4rem;
}
.beta-fact .icon { color: var(--amber); flex-shrink: 0; margin-top: .15rem; }
.beta-fact strong { display: block; color: var(--paper); font-size: 1rem; margin-bottom: .2rem; }
.beta-fact span { font-size: .92rem; color: var(--ink-soft); }
.beta-cta { display: flex; justify-content: center; }

.pricing-note {
  margin-top: 2rem; text-align: center; font-size: .88rem;
  color: var(--ink-faint); max-width: 640px; margin-inline: auto;
}

.signup-actions { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
.signup-note { text-align: center; font-size: .9rem; color: var(--ink-faint); }
.signup-note a { color: var(--amber); text-decoration: none; font-weight: 600; }
.signup-note a:hover { text-decoration: underline; }

.results-note {
  font-size: .85rem; color: var(--ink-faint);
  margin-bottom: .9rem; padding: .6rem .9rem;
  border: 1px dashed var(--rule); border-radius: var(--radius-sm);
}
.results-note a { color: var(--amber); font-weight: 600; }

.footer-owner { font-size: .88rem; margin-top: .5rem; }
.footer-owner a { color: var(--amber); text-decoration: none; font-weight: 600; }
.footer-owner a:hover { text-decoration: underline; }
.footer-legal { font-size: .8rem; color: var(--ink-faint); margin-top: .45rem; }
.footer-legal a { color: inherit; }
.ride-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--amber-tint); color: var(--amber);
  border: 1px solid rgba(225, 29, 60, .35);
}

/* ── Small screens ───────────────────────────────────────── */
/* Flex items default to min-width:auto, so a wide row (the stats) can force
   the whole page wider than the viewport. Let them shrink, and never allow a
   sideways scroll on the page itself. */
html, body { max-width: 100%; overflow-x: hidden; }
.hero-content, .hero-visual, .footer-brand { min-width: 0; }

@media (max-width: 620px) {
  .hero-stats { gap: 1.25rem 1.75rem; }
  .stat strong { font-size: 1.6rem; }
  .stat span { font-size: .76rem; }
  .hero-actions { gap: .6rem; }
  .hero-actions .btn-primary { flex: 1 1 100%; }
  .hero-actions .btn-outline { flex: 0 1 auto; padding: .65rem 1.25rem; font-size: .9rem; }
  .signup-actions .btn { flex: 1 1 100%; }
  .beta-fact { flex-direction: column; gap: .6rem; }
  .pricing-note, .signup-note { padding-inline: .5rem; }
}

@media (max-width: 420px) {
  .container { padding-inline: 1.15rem; }
  .route-map { gap: .35rem; }
  .route-leg { min-width: 26px; }
  .route-end-name, .route-hub-name { font-size: .92rem; }
  .route-hub-core { width: 34px; height: 34px; }
  .hero-stats { gap: 1rem 1.4rem; }
  .badge { font-size: .76rem; }
}
.driver-card .driver-avatar {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--amber-tint); color: var(--amber);
  border: 1px solid rgba(225, 29, 60, .35);
}

/* Inline links inside body copy pick up the brand accent rather than the
   browser default blue. */
.section-header p a,
.hero-lede a,
.faq-answer p a,
.beta-fact span a {
  color: var(--amber);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(225, 29, 60, .4);
}
.section-header p a:hover,
.hero-lede a:hover,
.faq-answer p a:hover,
.beta-fact span a:hover { border-bottom-color: var(--amber); }

/* ── Sample-booking modal ────────────────────────────────── */
.modal-sm { max-width: 460px; }
.modal-body { padding: 1.4rem 1.75rem .5rem; display: flex; flex-direction: column; gap: .85rem; }
.modal-body p { font-size: .95rem; color: var(--ink-soft); }
.modal-body #sampleBookLead { color: var(--paper); font-weight: 600; }
.modal-actions-padded { padding: 1.25rem 1.75rem 1.75rem; }

/* ── For fleets: partner portal showcase ─────────────────── */
.fleet { position: relative; overflow: hidden; }
.fleet-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(700px 380px at 85% 10%, rgba(52, 211, 153, .10), transparent 60%),
    radial-gradient(640px 420px at 5% 90%, rgba(225, 29, 60, .12), transparent 60%);
}
.fleet .container { position: relative; }

.fleet-showcase {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2rem; align-items: center;
}
.fleet-showcase > * { min-width: 0; }

/* Tabs */
.fleet-tabs { display: grid; gap: .6rem; }
.fleet-tab {
  position: relative; overflow: hidden; display: flex; gap: .9rem; align-items: flex-start; text-align: left;
  padding: 1rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--rule);
  background: var(--card-solid); color: var(--ink-soft); font: inherit; cursor: pointer;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.fleet-tab:hover { border-color: rgba(225, 29, 60, .45); transform: translateX(3px); }
.fleet-tab:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.fleet-tab.is-active { border-color: var(--amber); background: linear-gradient(120deg, var(--amber-tint), var(--card-solid) 70%); }
.fleet-tab-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .05); color: var(--paper); border: 1px solid var(--rule);
}
.fleet-tab.is-active .fleet-tab-icon { background: var(--amber); border-color: var(--amber); color: #fff; box-shadow: 0 8px 20px var(--amber-glow); }
.fleet-tab-text { display: grid; gap: .15rem; }
.fleet-tab-text strong { color: var(--paper); font-size: 1rem; }
.fleet-tab-text span { font-size: .9rem; line-height: 1.45; }
/* Thin bar that fills while a tab is shown on autoplay. */
.fleet-tab-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--amber); }
.fleet-showcase.is-playing .fleet-tab.is-active .fleet-tab-progress { animation: fleetTabFill var(--fleet-dwell, 6s) linear forwards; }
@keyframes fleetTabFill { from { width: 0; } to { width: 100%; } }

/* The portal window */
.fleet-window {
  position: relative; border-radius: 20px; overflow: hidden; min-height: 400px;
  background: #f5f7fb; color: #1d2433; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, .08);
  transform: perspective(1400px) rotateY(-4deg) rotateX(2deg);
  transition: transform .5s ease;
}
.fleet-window:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }
.fleet-window-bar { display: flex; align-items: center; gap: .4rem; padding: .7rem 1rem; background: #e7ebf3; border-bottom: 1px solid #d9dfea; }
.fleet-window-bar .dot { width: 11px; height: 11px; border-radius: 50%; background: #f87171; }
.fleet-window-bar .dot:nth-child(2) { background: #fbbf24; }
.fleet-window-bar .dot:nth-child(3) { background: #34d399; }
.fleet-url {
  margin-left: .75rem; flex: 1; display: inline-flex; align-items: center; gap: .35rem; max-width: 260px;
  padding: .2rem .7rem; border-radius: 999px; background: #fff; color: #4b5568; font-size: .78rem; font-weight: 600;
}
.fleet-url .icon { color: #16a34a; }
.fleet-pane { padding: 1.25rem 1.35rem 1.4rem; animation: fleetPaneIn .45s ease; }
.fleet-pane[hidden] { display: none; }
@keyframes fleetPaneIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.fp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; }
.fp-head strong { display: block; font-size: 1.15rem; color: #111827; }
.fp-kicker { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8a93a6; }
.fp-pill { flex-shrink: 0; padding: .25rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 700; background: #eef1f7; color: #4b5568; }
.fp-pill-live { background: #dcfce7; color: #166534; }
.fp-pill-warn { background: #fef3c7; color: #92400e; }

.fp-stops { list-style: none; position: relative; display: grid; gap: .55rem; margin-bottom: 1rem; }
.fp-stops::before { content: ""; position: absolute; left: calc(.75rem + 44px + .55rem - 1px); top: 10px; bottom: 10px; width: 2px; background: repeating-linear-gradient(#cbd3e1 0 5px, transparent 5px 9px); }
.fp-stops li {
  position: relative; display: grid; grid-template-columns: 44px 1fr auto; gap: 1.1rem; align-items: center;
  padding: .5rem .75rem; border-radius: 12px; background: #fff; border: 1px solid #e3e8f1; font-size: .9rem;
  opacity: 0; transform: translateX(-8px); animation: fleetStopIn .4s ease forwards;
}
.fp-stops li:nth-child(2) { animation-delay: .12s; }
.fp-stops li:nth-child(3) { animation-delay: .24s; }
.fp-stops li:nth-child(4) { animation-delay: .36s; }
@keyframes fleetStopIn { to { opacity: 1; transform: none; } }
.fp-stops li::before { content: ""; position: absolute; left: calc(.75rem + 44px + .55rem - 6px); width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--amber); }
.fp-stops time { font-weight: 800; color: #111827; font-variant-numeric: tabular-nums; }
.fp-stops span { font-weight: 600; color: #1f2937; }
.fp-stops em { font-style: normal; font-size: .75rem; color: #8a93a6; }

.fp-assign { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.fp-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: 999px; background: #fff; border: 1px solid #e3e8f1; font-size: .82rem; font-weight: 600; }
.fp-avatar { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--amber); color: #fff; font-size: .62rem; font-weight: 800; }
.fp-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.fp-btn { padding: .45rem .95rem; border-radius: 10px; font-size: .82rem; font-weight: 700; background: #eef1f7; color: #374151; }
.fp-btn-primary { background: var(--amber); color: #fff; box-shadow: 0 6px 16px rgba(225, 29, 60, .3); }

.fp-toggles { list-style: none; display: grid; gap: .6rem; margin-bottom: 1rem; }
.fp-toggles li { display: flex; gap: .85rem; align-items: center; padding: .75rem .9rem; border-radius: 14px; background: #fff; border: 1px solid #e3e8f1; }
.fp-toggles strong { display: block; color: #111827; font-size: .92rem; }
.fp-toggles span { font-size: .8rem; color: #6b7385; }
.fp-switch { position: relative; flex-shrink: 0; width: 40px; height: 22px; border-radius: 999px; background: #cfd6e3; transition: background .3s; }
.fp-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .3s; }
.fp-switch.is-on { background: #16a34a; }
.fp-switch.is-on::after { transform: translateX(18px); }
.fleet-pane.is-active .fp-switch.is-on { animation: fleetSwitchOn .6s ease; }
@keyframes fleetSwitchOn { 0% { background: #cfd6e3; } 100% { background: #16a34a; } }
.fp-burst { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; border-radius: 14px; background: linear-gradient(120deg, #fff1f3, #fff); border: 1px dashed rgba(225, 29, 60, .45); }
.fp-burst > div { flex: 1; }
.fp-burst strong { display: block; color: #111827; font-size: .92rem; }
/* Only the caption: a bare ".fp-burst span" also caught the "Accept all" button and greyed its label. */
.fp-burst > div span { font-size: .8rem; color: #6b7385; }
.fp-burst-count { font-size: 1.9rem !important; font-weight: 900; color: var(--amber) !important; font-variant-numeric: tabular-nums; min-width: 2ch; }

.fp-track { list-style: none; display: grid; margin-bottom: 1rem; }
.fp-track li { position: relative; display: flex; gap: .9rem; padding-bottom: 1rem; }
.fp-track li:last-child { padding-bottom: 0; }
.fp-track li::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; width: 3px; border-radius: 3px; background: #dbe1ec; }
.fp-track li:last-child::before { display: none; }
.fp-track li.is-done::before { background: #16a34a; }
.fp-track li.is-next::before { background: linear-gradient(#e11d3c 0 45%, #dbe1ec 45%); }
.fp-node { position: relative; z-index: 1; flex-shrink: 0; width: 23px; height: 23px; border-radius: 50%; background: #fff; border: 3px solid #cfd6e3; }
.is-done .fp-node { background: #16a34a; border-color: #16a34a; }
.is-done .fp-node::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.is-next .fp-node { border-color: var(--amber); background: var(--amber); animation: fleetPulse 1.8s ease-out infinite; }
@keyframes fleetPulse { 0% { box-shadow: 0 0 0 0 rgba(225, 29, 60, .5); } 70% { box-shadow: 0 0 0 12px rgba(225, 29, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(225, 29, 60, 0); } }
.fp-track strong { display: block; color: #111827; font-size: .92rem; }
.fp-track span { font-size: .8rem; color: #6b7385; }
.fp-alert { display: flex; align-items: center; gap: .5rem; padding: .6rem .85rem; border-radius: 12px; background: #fef3c7; color: #92400e; font-size: .82rem; font-weight: 600; }

.fp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1rem; }
.fp-kpis div { padding: .7rem .8rem; border-radius: 14px; background: #fff; border: 1px solid #e3e8f1; }
.fp-kpis strong { display: block; font-size: 1.2rem; font-weight: 900; color: #111827; }
.fp-kpis span { font-size: .75rem; color: #6b7385; }
.fp-bars { display: flex; align-items: flex-end; gap: .6rem; height: 120px; padding: 0 .25rem 1.2rem; margin-bottom: .75rem; border-bottom: 1px solid #e3e8f1; }
.fp-bars i { position: relative; flex: 1; height: 0; border-radius: 8px 8px 3px 3px; background: linear-gradient(#e11d3c, #f0647a); }
.fleet-pane.is-active .fp-bars i { animation: fleetBarGrow .7s cubic-bezier(.2, .8, .2, 1) forwards; }
.fp-bars i:nth-child(2) { animation-delay: .05s !important; }
.fp-bars i:nth-child(3) { animation-delay: .1s !important; }
.fp-bars i:nth-child(4) { animation-delay: .15s !important; }
.fp-bars i:nth-child(5) { animation-delay: .2s !important; }
.fp-bars i:nth-child(6) { animation-delay: .25s !important; }
.fp-bars i:nth-child(7) { animation-delay: .3s !important; }
@keyframes fleetBarGrow { to { height: var(--h); } }
.fp-bars b { position: absolute; bottom: -1.25rem; left: 50%; transform: translateX(-50%); font-size: .68rem; font-weight: 700; color: #8a93a6; }
.fp-heat { display: flex; align-items: center; gap: 3px; font-size: .7rem; color: #8a93a6; }
.fp-heat span:first-child { margin-right: .4rem; font-weight: 700; }
.fp-heat span:last-child { margin-left: .4rem; }
.fp-heat i { flex: 1; height: 14px; border-radius: 3px; background: #eef1f7; }
.fp-heat i.h1 { background: #fbd5db; } .fp-heat i.h2 { background: #f7a3b0; } .fp-heat i.h3 { background: #f0647a; } .fp-heat i.h4 { background: #e11d3c; }

/* Steps */
.fleet-steps {
  list-style: none; counter-reset: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem;
  margin: 4.5rem 0 3rem; position: relative;
}
.fleet-steps::before {
  content: ""; position: absolute; top: 22px; left: 12%; right: 12%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--rule) 0 8px, transparent 8px 14px);
}
.fleet-steps li { position: relative; text-align: center; padding: 0 .5rem; }
.fleet-step-num {
  position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: .9rem;
  border-radius: 50%; background: var(--ink); border: 2px solid var(--amber); color: var(--paper); font-weight: 900; font-size: 1.1rem;
  box-shadow: 0 0 0 6px var(--ink), 0 10px 26px var(--amber-glow);
}
.fleet-steps h3 { color: var(--paper); font-size: 1.05rem; margin-bottom: .35rem; }
.fleet-steps p { font-size: .92rem; line-height: 1.55; }

/* Feature tiles */
.fleet-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.fleet-features article {
  padding: 1.25rem; border-radius: var(--radius); background: var(--card-solid); border: 1px solid var(--rule);
  transition: transform var(--transition), border-color var(--transition);
}
.fleet-features article:hover { transform: translateY(-4px); border-color: rgba(52, 211, 153, .45); }
.fleet-feature-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-bottom: .75rem; border-radius: 11px; background: var(--teal-tint); color: var(--teal); }
.fleet-features h3 { color: var(--paper); font-size: 1rem; margin-bottom: .3rem; }
.fleet-features p { font-size: .9rem; line-height: 1.5; }

/* Scroll reveal for the steps and tiles. */
.fleet-steps li, .fleet-features article { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease, border-color var(--transition); }
.fleet.is-in .fleet-steps li, .fleet.is-in .fleet-features article { opacity: 1; transform: none; }
.fleet.is-in .fleet-steps li:nth-child(2), .fleet.is-in .fleet-features article:nth-child(2) { transition-delay: .08s; }
.fleet.is-in .fleet-steps li:nth-child(3), .fleet.is-in .fleet-features article:nth-child(3) { transition-delay: .16s; }
.fleet.is-in .fleet-steps li:nth-child(4), .fleet.is-in .fleet-features article:nth-child(4) { transition-delay: .24s; }
.fleet.is-in .fleet-features article:nth-child(5) { transition-delay: .32s; }
.fleet.is-in .fleet-features article:nth-child(6) { transition-delay: .4s; }
.fleet.is-in .fleet-features article:hover { transform: translateY(-4px); transition-delay: 0s; }

/* CTA */
.fleet-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  margin-top: 2.5rem; padding: 1.5rem 1.75rem; border-radius: 22px;
  background: linear-gradient(120deg, var(--amber-tint), var(--ink-3)); border: 1px solid rgba(225, 29, 60, .35);
}
.fleet-cta strong { display: block; color: var(--paper); font-size: 1.15rem; }
.fleet-cta-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

@media (max-width: 980px) {
  .fleet-showcase { grid-template-columns: minmax(0, 1fr); }
  .fleet-window { transform: none; }
  .fleet-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .fleet-steps::before { display: none; }
  .fleet-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .fleet-tabs { grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .4rem; }
  .fleet-tab { scroll-snap-align: start; }
  .fleet-tab:hover { transform: none; }
  .fleet-window { min-height: 0; }
  .fleet-pane { padding: 1rem; }
  .fp-stops li { grid-template-columns: 40px 1fr; }
  .fp-stops em { display: none; }
  .fp-stops::before { left: calc(.75rem + 40px + .55rem - 1px); }
  .fp-stops li::before { left: calc(.75rem + 40px + .55rem - 6px); }
  .fp-kpis strong { font-size: 1rem; }
  .fleet-steps, .fleet-features { grid-template-columns: 1fr; }
  .fleet-cta { padding: 1.25rem; }
  .fleet-cta-actions .btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .fleet-steps li, .fleet-features article { opacity: 1; transform: none; }
  .fleet-window { transform: none; }
}

/* ── Fleet system page (fleet.html) ───────────────────────── */
.fs-section { padding: 5.5rem 0; scroll-margin-top: calc(var(--nav-h) + 52px); }
.fs-section-tint { background: var(--ink-2); border-block: 1px solid var(--rule); }

/* Hero */
.fs-hero { position: relative; overflow: hidden; padding: 3.5rem 0 4.5rem; }
.fs-hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.fs-back { display: flex; width: fit-content; align-items: center; gap: .4rem; margin-bottom: 1.4rem; font-size: .85rem; font-weight: 700; color: var(--ink-soft); text-decoration: none; }
.fs-back .icon { transform: rotate(180deg); }
.fs-back:hover { color: var(--paper); }
.fs-hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); }
.fs-lede { margin-top: 1.1rem; font-size: 1.08rem; max-width: 560px; }
.fs-lede strong { color: var(--paper); }
.fs-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.fs-hero-points { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.5rem; font-size: .88rem; }
.fs-hero-points li { display: inline-flex; align-items: center; gap: .4rem; }
.fs-hero-points .icon { color: var(--teal); }
.fs-hero-window { min-height: 0; }

.fs-kpi4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.fs-kpi4 div { padding: .6rem .7rem; border-radius: 12px; background: #fff; border: 1px solid #e3e8f1; }
.fs-kpi4 span { display: block; font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a93a6; }
.fs-kpi4 strong { font-size: 1.2rem; font-weight: 900; color: #111827; font-variant-numeric: tabular-nums; }

.fs-board { border-radius: 14px; background: #fff; border: 1px solid #e3e8f1; overflow: hidden; }
.fs-board-head { display: flex; justify-content: space-between; padding: .55rem .85rem; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a93a6; background: #f8fafd; border-bottom: 1px solid #e3e8f1; }
.fs-board-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto; gap: .75rem; align-items: center; padding: .55rem .85rem; font-size: .84rem; border-bottom: 1px solid #eef1f7; }
.fs-board-row:last-child { border-bottom: 0; }
.fs-board-row time { font-weight: 800; color: #111827; font-variant-numeric: tabular-nums; }
.fs-board-row span { font-weight: 600; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-board-row em { font-style: normal; font-size: .74rem; color: #8a93a6; }
.fs-board-row b { padding: .15rem .55rem; border-radius: 999px; font-size: .7rem; background: #eef1f7; color: #4b5568; white-space: nowrap; }
.fs-board-row b.is-live { background: #dcfce7; color: #166534; }
.fs-board-row b.is-late { background: #fef3c7; color: #92400e; }
.fs-board-row b.is-board { background: #fde2e7; color: #b0162f; }

/* In-page navigation */
.fs-subnav { position: sticky; top: var(--nav-h); z-index: 90; background: rgba(10, 11, 18, .86); backdrop-filter: blur(14px); border-block: 1px solid var(--rule); }
.fs-subnav .container { display: flex; gap: .35rem; overflow-x: auto; padding-block: .6rem; scrollbar-width: none; }
.fs-subnav .container::-webkit-scrollbar { display: none; }
.fs-subnav a { flex-shrink: 0; padding: .35rem .8rem; border-radius: 999px; font-size: .84rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; border: 1px solid transparent; transition: color var(--transition), border-color var(--transition), background var(--transition); }
.fs-subnav a:hover { color: var(--paper); border-color: var(--rule); }
.fs-subnav a.is-current { color: #fff; background: var(--amber-tint); border-color: rgba(225, 29, 60, .5); }

/* Cards */
.fs-cards { display: grid; gap: 1rem; }
.fs-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fs-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2rem; }
.fs-cards article { padding: 1.3rem; border-radius: var(--radius); background: var(--card-solid); border: 1px solid var(--rule); transition: transform var(--transition), border-color var(--transition); }
.fs-cards article:hover { transform: translateY(-4px); border-color: rgba(225, 29, 60, .45); }
.fs-cards h3 { font-size: 1rem; margin-bottom: .3rem; }
.fs-cards p { font-size: .9rem; line-height: 1.55; }
.fs-card-icon, .fs-chapter-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-bottom: .8rem; border-radius: 11px; background: var(--amber-tint); color: var(--amber); }

/* Chapters: copy beside a portal mock, alternating sides */
.fs-chapter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; align-items: center; }
.fs-chapter + .fs-chapter { margin-top: 4.5rem; }
.fs-chapter.is-flipped .fs-chapter-copy { order: 2; }
.fs-chapter-copy h3 { font-size: 1.45rem; margin-bottom: .5rem; }
.fs-chapter-copy h2 { margin-bottom: .75rem; }
.fs-chapter-copy > p { font-size: 1rem; }
.fs-list { list-style: none; display: grid; gap: .55rem; margin-top: 1.1rem; }
.fs-list li { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; }
.fs-list .icon { margin-top: .32rem; color: var(--teal); }
.fs-note { margin-top: 1.25rem; padding: .9rem 1.1rem; border-left: 3px solid var(--amber); border-radius: 0 12px 12px 0; background: rgba(225, 29, 60, .06); font-size: .9rem; }
.fs-note strong { color: var(--paper); }
.fs-mock { min-height: 0; }
.fs-chapter.is-flipped .fs-mock { transform: perspective(1400px) rotateY(4deg) rotateX(2deg); }
.fs-chapter.is-flipped .fs-mock:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }

.fs-rows { list-style: none; display: grid; gap: .55rem; }
.fs-rows li { display: flex; align-items: center; gap: .8rem; padding: .7rem .85rem; border-radius: 14px; background: #fff; border: 1px solid #e3e8f1; }
.fs-rows li > div { flex: 1; min-width: 0; }
.fs-rows strong { display: block; font-size: .92rem; color: #111827; }
.fs-rows span { font-size: .78rem; color: #6b7385; }
.fs-swatch { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; }
.fs-swatch-a { background: linear-gradient(135deg, #e11d3c, #9b1028); }
.fs-swatch-b { background: linear-gradient(135deg, #2563eb, #1e3a8a); }
.fs-swatch-c { background: linear-gradient(135deg, #16a34a, #14532d); }
.fs-tag { flex-shrink: 0; padding: .18rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 700; background: #eef1f7; color: #4b5568; white-space: nowrap; }
.fs-tag-ok { background: #dcfce7; color: #166534; }
.fs-tag-warn { background: #fef3c7; color: #92400e; }

.fs-table { border-radius: 14px; background: #fff; border: 1px solid #e3e8f1; overflow: hidden; }
.fs-table-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr auto; gap: .6rem; align-items: center; padding: .6rem .85rem; font-size: .82rem; color: #1f2937; border-bottom: 1px solid #eef1f7; }
.fs-table-row:last-child { border-bottom: 0; }
.fs-table-row span:first-child { font-weight: 700; color: #111827; }
.fs-table-head { font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a93a6; background: #f8fafd; }
.fs-table-head span:first-child { color: #8a93a6; font-weight: 800; }

/* Driver crew pass */
.fs-pass {
  justify-self: center; width: min(100%, 380px); padding: 1.5rem; border-radius: 22px; color: var(--paper);
  background: radial-gradient(320px 200px at 100% 0%, rgba(225, 29, 60, .35), transparent 70%), linear-gradient(150deg, #1b1f2e, #0e1019);
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: var(--shadow-lg); transform: rotate(-2deg); transition: transform .5s ease;
}
.fs-pass:hover { transform: rotate(0); }
.fs-pass-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; }
.fs-pass-top img { border-radius: 9px; }
.fs-pass-top span { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.fs-pass-name { display: block; font-size: 1.35rem; font-weight: 800; }
.fs-pass-fleet { font-size: .88rem; color: var(--ink-soft); }
.fs-pass-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px dashed rgba(255, 255, 255, .16); }
.fs-pass-grid span { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.fs-pass-grid b { font-size: 1rem; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.fs-ok { color: var(--teal); }

/* Booking-to-boarding flow */
.fs-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.fs-flow article { position: relative; display: flex; flex-direction: column; gap: .6rem; padding: 1.4rem 1.25rem; border-radius: var(--radius); background: var(--card-solid); border: 1px solid var(--rule); }
.fs-flow h3 { font-size: 1.05rem; }
.fs-flow p { font-size: .9rem; line-height: 1.55; flex: 1; }
.fs-flow small { font-size: .78rem; color: var(--ink-faint); }
.fs-flow-num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--amber); color: var(--paper); font-weight: 900; box-shadow: 0 8px 20px var(--amber-glow); }
.fs-pills { display: flex; flex-wrap: wrap; gap: .35rem; }
.fs-pills span { padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; color: var(--ink-soft); background: rgba(255, 255, 255, .05); border: 1px solid var(--rule); }
.fs-pills-light { margin-top: .9rem; }
.fs-pills-light span { color: #4b5568; background: #eef1f7; border-color: #e3e8f1; }
.fs-burst { background: linear-gradient(120deg, rgba(225, 29, 60, .14), transparent); }
.fs-burst strong { color: var(--paper); }
.fs-burst > div span { color: var(--ink-soft); }
.fs-scan { display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem; border-radius: 14px; background: rgba(52, 211, 153, .08); border: 1px dashed rgba(52, 211, 153, .45); }
.fs-scan .icon { color: var(--teal); }
.fs-scan strong { display: block; font-size: .88rem; color: var(--paper); }
.fs-scan span { font-size: .76rem; color: var(--ink-soft); }

/* Pricing mock */
.fs-rates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.fs-rates div { padding: .6rem .7rem; border-radius: 12px; background: #fff; border: 1px solid #e3e8f1; }
.fs-rates span { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #8a93a6; }
.fs-rates b { font-size: .88rem; color: #111827; }
.fs-split { border-radius: 14px; background: #fff; border: 1px solid #e3e8f1; }
.fs-split div { display: flex; justify-content: space-between; padding: .6rem .9rem; font-size: .86rem; color: #4b5568; border-bottom: 1px solid #eef1f7; }
.fs-split b { color: #111827; font-variant-numeric: tabular-nums; }
.fs-split .fs-split-total { border-bottom: 0; background: #fff1f3; border-radius: 0 0 14px 14px; font-weight: 700; color: #111827; }
.fs-split .fs-split-total b { color: var(--amber); font-size: 1rem; }

/* Message mock */
.fs-msg { padding: .85rem 1rem; border-radius: 14px; background: #fff; border: 1px solid #e3e8f1; }
.fs-msg-to { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: .55rem; font-size: .74rem; color: #8a93a6; }
.fs-msg-to b { padding: .12rem .55rem; border-radius: 999px; background: #e0ecff; color: #1d4ed8; font-weight: 700; }
.fs-msg p { font-size: .86rem; color: #374151; line-height: 1.55; }
.fs-read { display: flex; align-items: center; gap: .75rem; margin-top: .9rem; font-size: .78rem; font-weight: 700; color: #4b5568; }
.fs-read i { flex: 1; height: 8px; border-radius: 99px; background: #eef1f7; overflow: hidden; }
.fs-read i b { display: block; width: 87%; height: 100%; border-radius: inherit; background: #16a34a; }

/* Report bars: static heights (no inline styles on this page) */
.fs-bars i { animation: none !important; }
.fs-bars .b1 { height: 58%; } .fs-bars .b2 { height: 74%; } .fs-bars .b3 { height: 66%; } .fs-bars .b4 { height: 88%; }
.fs-bars .b5 { height: 96%; } .fs-bars .b6 { height: 41%; } .fs-bars .b7 { height: 22%; }

/* Roles table */
.fs-roles-wrap { max-width: 760px; margin: 0 auto; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--card-solid); overflow-x: auto; }
.fs-roles { width: 100%; border-collapse: collapse; font-size: .92rem; }
.fs-roles th, .fs-roles td { padding: .8rem 1.1rem; border-bottom: 1px solid var(--rule); text-align: left; }
.fs-roles tbody tr:last-child th, .fs-roles tbody tr:last-child td { border-bottom: 0; }
.fs-roles thead th { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); background: var(--ink-3); }
.fs-roles thead th + th, .fs-roles td { text-align: center; width: 130px; }
.fs-roles tbody th { font-weight: 600; color: var(--paper); }
.fs-yes { color: var(--teal); }
.fs-no { font-size: .78rem; color: var(--ink-faint); }

.fs-steps { margin: 0; }

@media (max-width: 980px) {
  .fs-hero-inner, .fs-chapter { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .fs-chapter.is-flipped .fs-chapter-copy { order: 0; }
  .fs-hero-window, .fs-mock, .fs-chapter.is-flipped .fs-mock { transform: none; }
  .fs-cards-4, .fs-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-cards-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .fs-section { padding: 4rem 0; }
  .fs-hero { padding-top: 2rem; }
  .fs-hero-actions .btn { flex: 1 1 100%; }
  .fs-cards-4, .fs-flow { grid-template-columns: minmax(0, 1fr); }
  .fs-kpi4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-board-row { grid-template-columns: 42px minmax(0, 1fr) auto; }
  .fs-board-row em { display: none; }
  .fs-table-row { grid-template-columns: 1fr auto; }
  .fs-table-row span:nth-child(2), .fs-table-row span:nth-child(3) { display: none; }
  .fs-rates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-roles th, .fs-roles td { padding: .7rem .75rem; }
  .fs-roles thead th + th, .fs-roles td { width: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .fs-pass, .fs-mock { transform: none; }
}