:root{
    /* Deep blue-black + electric blue system (zoomcar-overhaul rebrand,
       replacing the earlier gold/ivory showroom palette). Legacy variable
       names (--bg, --text, --accent, --line, --panel, --ink, --gold,
       --shadow-*, --radius*) are kept in place so the rest of this
       8000-line file didn't need a mechanical rename -- only their values
       changed. The block below them is the literal new spec-named token
       set (--primary, --accent-hover, --sp-*, --r-*, --sh-*, --text-xs..
       --text-4xl, --t-fast/base/slow) for all new markup going forward. */
    --bg:#F7F8FC; --bg-2:#F1F4F9; --surface:#FFFFFF; --surface-2:#F1F4F9; --surface-3:#E8ECF4;
    --text:#0A0F1E; --text-dim:#475569; --text-faint:#94A3B8;
    --accent:#2563EB; --accent-2:#1D4ED8; --accent-3:#1E40AF; --accent-soft:#93C5FD; --pink:#64748B; --danger:#DC2626;
    --mint:#059669; --blue:#0284C7; --ink:#FFFFFF;
    --line:#E2E8F0; --line-strong:#CBD5E1;
    --panel:#FFFFFF; --panel-2:#F1F4F9;
    --radius:20px; --radius-sm:10px; --radius-lg:24px;
    /* Flat, solid accent fill -- no gradient anywhere in the app. Every
       surface that reads "var(--gold)" (buttons, active chips, badges)
       is a single flat electric-blue color; the variable name is legacy
       only, kept so the hundreds of existing var(--gold) call sites in
       this file didn't need touching. */
    --gold: var(--accent);
    --shadow-sm: 0 1px 3px rgba(10,15,30,.08), 0 1px 2px rgba(10,15,30,.04);
    --shadow-md: 0 4px 12px rgba(10,15,30,.08), 0 2px 6px rgba(10,15,30,.04);
    --shadow-lg: 0 16px 40px rgba(10,15,30,.12), 0 8px 20px rgba(10,15,30,.08);
    --shadow-gold: 0 10px 28px -6px rgba(37,99,235,.45);
    --glow-a: 0 0 0 rgba(37,99,235,0);
    --color-accent-bg: #EFF6FF;

    /* New design system -- literal spec token names for all new markup
       (host/guest split, browse redesign, host onboarding/dashboard, etc). */
    --primary: #0A0F1E; --primary-light: #141B2D; --primary-mid: #1E2A45;
    --accent-hover: #1D4ED8; --accent-light: #EFF6FF; --accent-subtle: rgba(37,99,235,0.08);
    --border: var(--line); --border-strong: var(--line-strong);
    --text-primary: var(--text); --text-secondary: var(--text-dim); --text-muted: var(--text-faint);
    --text-inverse: var(--ink); --text-accent: var(--accent);
    --success: #059669; --success-bg: #ECFDF5;
    --warning: #D97706; --warning-bg: #FFFBEB;
    --danger-bg: #FEF2F2;
    --info: #0284C7; --info-bg: #F0F9FF;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-md: 17px;
    --text-lg: 20px; --text-xl: 24px; --text-2xl: 30px; --text-3xl: 38px; --text-4xl: 48px;
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
    --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
    --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 28px; --r-full: 9999px;
    --sh-sm: var(--shadow-sm); --sh-md: var(--shadow-md); --sh-lg: var(--shadow-lg);
    --sh-xl: 0 16px 48px rgba(10,15,30,0.12), 0 8px 24px rgba(10,15,30,0.08);
    --sh-accent: var(--shadow-gold);
    --t-fast: 120ms ease; --t-base: 220ms ease; --t-slow: 380ms ease;
    --max-w: 1180px; --nav-h: 60px;
  }
  *{ box-sizing:border-box; margin:0; padding:0; -webkit-font-smoothing:antialiased; }
  html{ scroll-behavior:smooth; }
  body{ background:var(--bg); color:var(--text); font-family:'Inter',-apple-system,sans-serif; overflow-x:hidden; position:relative; }
  h1,h2,h3,.display{ font-family:'Space Grotesk',-apple-system,sans-serif; font-weight:700; letter-spacing:-0.01em; line-height:1.1; }
  .mono{ font-family:'JetBrains Mono',monospace; }
  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
  img{ max-width:100%; height:auto; }
  ::selection{ background:var(--accent); color:var(--text); }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  }

  .wrap{ max-width:1080px; margin:0 auto; padding:0 32px; position:relative; }
  main, header, footer{ position:relative; z-index:1; }

  /* ---------------- NAV ---------------- */
  /* z-index:90 -- above .sheet-backdrop/.mobile-menu (80/85) so the header
     (and its hamburger button) stays undimmed and clickable while the
     mobile drawer is open, the same way the old bottom tab bar (z-index:999)
     always sat above the backdrop. */
  header{ position:sticky; top:0; z-index:90; background:rgba(255,255,255,0.85); backdrop-filter:blur(16px) saturate(150%); border-bottom:1px solid var(--line); box-shadow:var(--shadow-sm); }
  .nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 32px; max-width:1080px; margin:0 auto; }
  .brand{ display:flex; align-items:center; gap:10px; font-family:'Inter'; font-weight:700; font-size:22px; }
  .brand__logo{ height:44px; width:44px; border-radius:11px; box-shadow:0 0 22px rgba(37,99,235,.35); object-fit:cover; }
  .nav__links{ display:flex; gap:6px; position:relative; }
  .nav__links button{ font-size:14px; color:var(--text-dim); padding:9px 16px; border-radius:100px; transition:.2s; font-weight:500; position:relative; }
  .nav__links button:hover{ color:var(--text); background:var(--surface-2); }
  .nav__links button.on{ color:var(--text); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line-strong); }
  .nav__loginlink{ font-size:14px; color:var(--accent-2); padding:8px 20px; border-radius:100px; border:1.5px solid var(--accent); transition:.2s; font-weight:600; position:relative; }
  .nav__loginlink:hover{ color:var(--ink); background:var(--accent); }
  .nav__cta{ background:var(--gold); color:var(--ink); padding:10px 22px; border-radius:100px; font-weight:700; font-size:14px; transition:transform .2s, box-shadow .2s; box-shadow:0 0 0 rgba(37,99,235,0); position:relative; overflow:hidden; }
  .nav__cta:hover{ transform:translateY(-2px); box-shadow:var(--shadow-gold), 0 0 0 1px rgba(255,255,255,.08) inset; }
  .nav__cta:active{ transform:translateY(0) scale(.97); }
  @media (max-width:820px){ .nav__links{ display:none; } }

  /* Mobile menu trigger -- the site's only mobile nav affordance now (no
     bottom tab bar); opens the existing .mobile-menu drawer. Icon morphs
     from hamburger to a close X via the .is-open class (toggleAccountSheet
     in app-shared.js), same drawer/backdrop either way. */
  .nav__hamburger{ display:none; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; color:var(--text-dim); flex-shrink:0; transition:.2s; }
  .nav__hamburger:hover{ background:var(--surface-2); color:var(--text); }
  .nav__hamburger svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2; }
  .nav__hamburger .icon-close{ display:none; }
  .nav__hamburger.is-open .icon-menu{ display:none; }
  .nav__hamburger.is-open .icon-close{ display:block; }
  @media (max-width:820px){ .nav__hamburger{ display:inline-flex; } }

  /* ---------------- PROGRESS RAIL ---------------- */
  .rail{ max-width:520px; margin:0 auto; padding:18px 32px 0; display:none; }
  .rail.show{ display:block; animation:fadeIn .4s ease; }
  @keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
  .rail__track{ position:relative; height:2px; background-image:repeating-linear-gradient(to right, var(--line-strong) 0 8px, transparent 8px 16px); }
  .rail__fill{ position:absolute; top:0; left:0; height:2px; background:linear-gradient(to right,var(--accent),var(--accent-2)); width:0%; transition:width .6s cubic-bezier(.4,0,.2,1); box-shadow:0 0 10px var(--accent); }
  .rail__steps{ display:flex; justify-content:space-between; margin-top:-7px; }
  .rail__step{ width:16px; height:16px; border-radius:50%; background:var(--surface-2); border:2px solid var(--line-strong); transition:all .4s ease; }
  .rail__step.active{ background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 6px rgba(37,99,235,.22), 0 0 14px var(--accent); animation:stepPulse 1.6s ease-in-out infinite; }
  @keyframes stepPulse{ 0%,100%{ box-shadow:0 0 0 6px rgba(37,99,235,.22), 0 0 14px var(--accent);} 50%{ box-shadow:0 0 0 9px rgba(37,99,235,.10), 0 0 20px var(--accent);} }
  .rail__step.done{ background:var(--accent-2); border-color:var(--accent-2); box-shadow:0 0 10px var(--accent-2); }
  .rail__labels{ display:flex; justify-content:space-between; margin-top:6px; }
  .rail__labels span{ font-size:9px; color:var(--text-faint); font-family:'JetBrains Mono'; text-transform:uppercase; letter-spacing:.03em; }

  /* ---------------- VIEWS ---------------- */
  main{ min-height:70vh; position:relative; }
  .view{ display:none; }
  .view.active{ display:block; animation:viewIn .55s cubic-bezier(.16,1,.3,1); }
  @keyframes viewIn{ from{ opacity:0; transform:translateY(24px) scale(.99); filter:blur(4px); } to{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }
  .view.active > *{ animation:fadeUp .6s cubic-bezier(.16,1,.3,1) backwards; }
  .view.active > *:nth-child(1){ animation-delay:.03s; }
  .view.active > *:nth-child(2){ animation-delay:.09s; }
  .view.active > *:nth-child(3){ animation-delay:.15s; }
  .view.active > *:nth-child(4){ animation-delay:.21s; }
  @keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 22px; border-radius:var(--r-md); font-weight:600; font-size:14px; border:1.5px solid transparent; transition:transform .18s cubic-bezier(.2,.9,.3,1.2), box-shadow .2s, background .2s, border-color .2s, color .2s; position:relative; overflow:hidden; isolation:isolate; }
  .btn--primary{ background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:var(--shadow-sm); }
  .btn--primary:hover{ background:var(--accent-hover); transform:translateY(-2px); box-shadow:var(--shadow-gold); }
  .btn--primary:active{ transform:translateY(0) scale(.96); box-shadow:var(--shadow-sm); }
  .btn--primary:disabled{ opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }
  .btn--ghost{ border-color:var(--accent); color:var(--accent); background:transparent; }
  .btn--ghost:hover{ background:var(--accent-light); transform:translateY(-1px); box-shadow:none; }
  .btn--ghost:active{ transform:translateY(0) scale(.97); }
  .btn--dark{ background:var(--primary); color:#fff; border-color:var(--primary); }
  .btn--dark:hover{ background:var(--primary-light); }
  .btn--danger{ background:var(--danger); color:#fff; border-color:var(--danger); }
  .btn--danger:hover{ background:#B91C1C; }
  .btn--block{ width:100%; }
  .btn--sm{ height:36px; padding:0 14px; font-size:13px; border-radius:var(--r-sm); }
  .btn--lg{ height:52px; padding:0 28px; font-size:16px; border-radius:var(--r-lg); }
  .btn .ripple{ position:absolute; border-radius:50%; background:rgba(26,26,46,.14); transform:scale(0); animation:ripple .6s ease-out forwards; pointer-events:none; z-index:0; }
  @keyframes ripple{ to{ transform:scale(1); opacity:0; } }
  .btn--social{ border:1px solid var(--line-strong); background:rgba(26,26,46,.04); padding:12px; border-radius:14px; display:flex; align-items:center; justify-content:center; gap:8px; font-size:13px; font-weight:600; color:var(--text-dim); transition:.2s; }
  .btn--social:hover{ border-color:var(--line-strong); background:rgba(26,26,46,.08); color:var(--text); transform:translateY(-1px); }
  .btn--social:active{ transform:scale(.96); }
  .btn--social svg{ width:16px; height:16px; }

  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible{
    outline:2px solid var(--accent-2); outline-offset:2px; border-radius:8px;
  }

  /* Flat card -- solid surface fill, no gradient, no hover glow. */
  .glass{ background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius); position:relative; box-shadow:var(--shadow-md); }

  /* HOME -- flat navy band, left-aligned headline, no card floating in it.
     The search bar lives below as its own element (.ticket-bar) that
     overlaps the seam between this band and the page, so the page reads
     as one deliberate structure rather than a hero-plus-widget. Every
     fill here is a solid color; nothing in this file uses a CSS
     gradient. */
  .hero{ position:relative; padding:76px 32px 132px; background:var(--text); }
  .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono'; font-size:12px; color:var(--accent-2); letter-spacing:.08em; text-transform:uppercase; margin-bottom:18px; }
  .eyebrow::before{ content:''; width:6px; height:6px; background:var(--accent-2); border-radius:50%; }
  .hero h1{ font-size:clamp(32px,4.4vw,50px); margin-bottom:16px; }
  .hero h1 em{ font-style:normal; color:var(--accent-soft); }
  .hero p{ font-size:16px; color:var(--text-dim); max-width:440px; margin-bottom:28px; }
  .hero__ctas{ display:flex; gap:12px; flex-wrap:wrap; }
  .hero__content{ position:relative; z-index:1; max-width:640px; }
  .hero__content .eyebrow{ color:var(--accent-soft); }
  .hero__content .eyebrow::before{ background:var(--accent-soft); }
  .hero__content h1{ color:#fff; }
  .hero__content p{ color:rgba(255,255,255,.72); }
  .hero__content .btn--ghost{ border-color:rgba(255,255,255,.3); color:#fff; background:none; }
  .hero__content .btn--ghost:hover{ border-color:var(--accent-soft); background:rgba(255,255,255,.08); }

  /* Boarding-pass search bar -- the page's signature device. Reuses the
     perforated-divider language from .ticket-strip further down, so the
     "get your ticket to drive" idea threads through the whole page
     instead of being decoration invented once and dropped. City/location/
     search sit in the primary strip; plan, delivery and "near me" sit in
     a quieter secondary strip underneath. It overlaps the hero's bottom
     edge (negative margin) rather than floating beside the headline. */
  .ticket-bar{ position:relative; z-index:2; margin-top:-72px; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-lg); overflow:hidden; }
  .ticket-bar__primary{ display:flex; align-items:stretch; }
  .ticket-bar__seg{ flex:1; padding:18px 24px; position:relative; min-width:0; }
  .ticket-bar__seg + .ticket-bar__seg{ border-left:2px dashed var(--line-strong); }
  .ticket-bar__seg + .ticket-bar__seg::before, .ticket-bar__seg + .ticket-bar__seg::after{ content:''; position:absolute; left:-11px; width:20px; height:20px; border-radius:50%; background:var(--bg); border:1px solid var(--line-strong); }
  .ticket-bar__seg + .ticket-bar__seg::before{ top:-11px; }
  .ticket-bar__seg + .ticket-bar__seg::after{ bottom:-11px; }
  .ticket-bar__seg label{ display:block; font-family:'JetBrains Mono'; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); margin-bottom:6px; }
  .ticket-bar__seg select, .ticket-bar__seg input{ width:100%; border:none; background:none; outline:none; font-size:14px; color:var(--text); font-family:inherit; cursor:pointer; }
  .ticket-bar__seg input{ cursor:text; }
  .ticket-bar__seg--btn{ flex:0 0 190px; padding:12px; display:flex; align-items:center; }
  .ticket-bar__secondary{ display:flex; flex-direction:column; gap:14px; padding:18px 24px; border-top:1px solid var(--line); background:var(--surface-2); }
  @media (max-width:700px){
    .ticket-bar{ margin-top:-28px; }
    .ticket-bar__primary{ flex-direction:column; }
    .ticket-bar__seg + .ticket-bar__seg{ border-left:none; border-top:2px dashed var(--line-strong); }
    .ticket-bar__seg + .ticket-bar__seg::before, .ticket-bar__seg + .ticket-bar__seg::after{ left:auto; top:-11px; }
    .ticket-bar__seg + .ticket-bar__seg::before{ left:20%; }
    .ticket-bar__seg + .ticket-bar__seg::after{ left:auto; right:20%; }
    .ticket-bar__seg--btn{ flex:none; }
  }

  @media (max-width:900px){
    .hero{ padding:44px 20px 56px; text-align:center; }
    .hero__content{ max-width:none; }
    .hero__ctas{ justify-content:center; }
    .hero p{ margin-left:auto; margin-right:auto; }
    .eyebrow{ justify-content:center; }
  }


  /* Ticket-stub strip -- a single perforated ticket instead of a plain
     4-column stat row. Each stub carries a 3-letter route-code (airport /
     boarding-pass vernacular) rather than a sequence number, since these
     four things aren't steps in an order. */
  /* Home stats row -- 4 real, live numbers (get_home_stats() RPC), not a
     decorative counter animation. Plain dividers, no ticket-strip perforated
     styling here since these are hard numbers, not marketing bullets. */
  .stats-row{ display:flex; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-sm); }
  .stats-row__item{ flex:1; padding:20px 16px; text-align:center; }
  .stats-row__item + .stats-row__item{ border-left:1px solid var(--border); }
  .stats-row__item b{ display:block; font-size:17px; color:var(--text-primary); margin-bottom:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .stats-row__item span{ font-size:11.5px; color:var(--text-muted); }
  @media (max-width:700px){
    .stats-row{ flex-wrap:wrap; }
    .stats-row__item{ flex:1 1 50%; }
    .stats-row__item:nth-child(odd){ border-left:none; }
    .stats-row__item:nth-child(n+3){ border-top:1px solid var(--border); }
  }

  /* App download teaser -- honest "coming soon" state, not live store
     links: there's no published App Store/Play Store listing yet (the
     Flutter app is still being built out through this same overhaul), so
     the badges are inert rather than pointing at guessed/fake URLs. Phone
     mockup is a plain CSS silhouette, not an image asset. */
  .app-download{ background:var(--primary); }
  .app-download__inner{ display:flex; align-items:center; gap:48px; flex-wrap:wrap; }
  .app-download__text{ flex:1 1 360px; }
  .app-download__text h2{ color:#fff; margin:10px 0 12px; }
  .app-download__text p{ color:rgba(255,255,255,.65); font-size:14px; max-width:420px; margin-bottom:22px; }
  .app-download__badges{ display:flex; gap:12px; flex-wrap:wrap; }
  .app-download__badge{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:var(--r-md); border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:rgba(255,255,255,.6); font-size:13px; font-weight:600; cursor:default; }
  .app-download__phone{ flex:0 0 auto; width:180px; height:340px; border-radius:32px; background:var(--primary-light); border:6px solid var(--primary-mid); box-shadow:var(--sh-xl); position:relative; margin:0 auto; }
  .app-download__phone-screen{ position:absolute; inset:0; border-radius:26px; background:linear-gradient(160deg, var(--accent) 0%, var(--primary-mid) 100%); overflow:hidden; }
  .app-download__phone-notch{ position:absolute; top:14px; left:50%; transform:translateX(-50%); width:56px; height:6px; border-radius:var(--r-full); background:rgba(0,0,0,.35); }
  @media (max-width:700px){ .app-download__inner{ flex-direction:column; text-align:center; } .app-download__text p{ margin-left:auto; margin-right:auto; } .app-download__badges{ justify-content:center; } }

  .ticket-strip{ display:flex; background:var(--panel); border:1px solid var(--line-strong); border-radius:18px; box-shadow:var(--shadow-md); position:relative; }
  .ticket-seg{ flex:1; padding:26px 18px; text-align:center; position:relative; }
  .ticket-seg + .ticket-seg{ border-left:2px dashed var(--line-strong); }
  .ticket-seg + .ticket-seg::before, .ticket-seg + .ticket-seg::after{ content:''; position:absolute; left:-10px; width:19px; height:19px; border-radius:50%; background:var(--bg); border:1px solid var(--line-strong); }
  .ticket-seg + .ticket-seg::before{ top:-10px; }
  .ticket-seg + .ticket-seg::after{ bottom:-10px; }
  .ticket-seg__code{ display:block; font-family:'JetBrains Mono'; font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--accent); margin-bottom:9px; }
  .ticket-seg b{ display:block; font-family:'Inter'; font-weight:700; font-size:18px; color:var(--text); margin-bottom:4px; }
  .ticket-seg span{ font-size:12px; color:var(--text-dim); }
  @media (max-width:800px){
    .ticket-strip{ flex-wrap:wrap; }
    .ticket-seg{ flex:1 1 50%; }
    .ticket-seg:nth-child(odd){ border-left:none; }
    .ticket-seg:nth-child(odd)::before, .ticket-seg:nth-child(odd)::after{ display:none; }
    .ticket-seg:nth-child(n+3){ border-left:none; border-top:2px dashed var(--line-strong); }
    .ticket-seg:nth-child(n+3)::before, .ticket-seg:nth-child(n+3)::after{ top:-10px; bottom:auto; left:auto; }
    .ticket-seg:nth-child(n+3)::before{ left:20%; }
    .ticket-seg:nth-child(n+3)::after{ left:auto; right:20%; }
  }

  /* Festive banners -- a continuously-scrolling strip of tilted photo
     cards (polaroid-style), not a discrete slideshow. The track is
     rendered twice back to back and animated exactly -50%, so the loop
     is seamless regardless of how many banners are active. Paused on
     hover/focus so a tap-through target doesn't drift under the pointer;
     prefers-reduced-motion is already handled globally (see :root media
     query at the top of this file). */
  .banner-carousel{ position:relative; overflow:hidden; -webkit-mask-image:linear-gradient(to right, transparent, black 6%, black 94%, transparent); mask-image:linear-gradient(to right, transparent, black 6%, black 94%, transparent); padding:14px 0 22px; }
  .banner-carousel__track{ display:flex; align-items:center; width:max-content; animation:bannerMarquee var(--marquee-duration, 28s) linear infinite; }
  .banner-carousel:hover .banner-carousel__track, .banner-carousel:focus-within .banner-carousel__track{ animation-play-state:paused; }
  @keyframes bannerMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  .banner-card{ flex:0 0 auto; width:200px; height:140px; margin:0 12px; padding:8px 8px 22px; background:var(--surface); border-radius:10px; box-shadow:var(--shadow-md); cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; }
  .banner-card:nth-child(3n){ transform:rotate(-3deg); }
  .banner-card:nth-child(3n+1){ transform:rotate(2deg); }
  .banner-card:nth-child(3n+2){ transform:rotate(-1.5deg); }
  .banner-card:hover{ transform:rotate(0deg) translateY(-4px) scale(1.03); box-shadow:var(--shadow-lg); z-index:1; }
  .banner-card img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:6px; }
  @media (max-width:640px){ .banner-card{ width:150px; height:104px; margin:0 8px; } }

  /* Minimal toast for lightweight confirmations ("Code copied") -- fixed
     bottom-center, fades in/out, no queue (a second call just restarts the
     timer on the same element). */
  .toast{ position:fixed; right:24px; bottom:28px; left:auto; transform:translateY(12px); background:var(--surface); color:var(--text); font-size:13px; font-weight:600; padding:13px 20px; border-radius:var(--radius-sm); border-left:4px solid var(--accent); box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:200; }
  .toast.show{ opacity:1; transform:translateY(0); }
  @media (max-width:480px){ .toast{ left:16px; right:16px; } }

  .section-head{ text-align:center; max-width:520px; margin:0 auto 40px; }
  .section-head--left{ text-align:left; max-width:none; margin:0 0 44px; }
  .section-head .kicker{ font-family:'JetBrains Mono'; font-size:11px; color:var(--accent-2); letter-spacing:.1em; text-transform:uppercase; }
  .section-head h2{ font-size:clamp(26px,3.4vw,38px); margin:12px 0 10px; }
  .section-head p{ color:var(--text-dim); font-size:14px; }
  .section-head--left p{ max-width:420px; }
  section.pad{ padding:80px 0; }

  /* Step list -- a real four-step sequence, so the numbering is honest
     (not a decorative device). Plain columns, no card borders/shadows,
     separated by rhythm and a thin gold rule rather than a box, so it
     doesn't repeat the trust strip's card language right above it. */
  .steps-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
  .step-card{ padding-top:14px; border-top:3px solid var(--accent); }
  .step-card__num{ display:block; font-family:'JetBrains Mono'; font-size:13px; font-weight:700; color:var(--accent-2); letter-spacing:.06em; margin-bottom:10px; }
  .step-card b{ display:block; font-family:'Space Grotesk'; font-weight:700; font-size:17px; margin-bottom:6px; }
  .step-card span{ font-size:13px; color:var(--text-dim); line-height:1.55; display:block; }
  @media (max-width:800px){ .steps-row{ grid-template-columns:1fr 1fr; row-gap:28px; } }
  @media (max-width:480px){ .steps-row{ grid-template-columns:1fr; } }

  /* FAQ accordion -- one open item at a time, toggled by toggleFaqItem(). */
  .faq-list{ display:flex; flex-direction:column; }
  .faq-item{ border-bottom:1px solid var(--line); }
  .faq-item__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 2px; text-align:left; font-family:'Space Grotesk'; font-weight:600; font-size:16px; color:var(--text); }
  .faq-item__chev{ width:18px; height:18px; stroke:var(--text-faint); fill:none; stroke-width:2; flex-shrink:0; transition:transform .25s ease; }
  .faq-item.open .faq-item__chev{ transform:rotate(180deg); stroke:var(--accent-2); }
  .faq-item__a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
  .faq-item.open .faq-item__a{ max-height:260px; }
  .faq-item__a p{ padding:0 2px 20px; font-size:13.5px; color:var(--text-dim); line-height:1.65; max-width:600px; }

  /* ---------------- SEARCH PANEL ---------------- */
  .search-panel{ padding:30px; }
  .search-panel .eyebrow{ margin-bottom:10px; }
  .search-panel h2{ font-size:clamp(22px,2.6vw,30px); margin-bottom:6px; }
  .search-panel .sub{ font-size:13px; color:var(--text-dim); margin-bottom:22px; }
  .search-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:4px; }
  .search-grid .field{ margin-bottom:0; }
  .search-note{ font-size:11px; color:var(--text-faint); margin:8px 0 16px; }
  .toggle-row{ display:flex; align-items:flex-start; gap:10px; margin-bottom:20px; font-size:12.5px; color:var(--text-dim); }
  .toggle-row input{ margin-top:2px; accent-color:var(--accent); }
  @media (max-width:560px){ .search-grid{ grid-template-columns:1fr; } }

  .plan-toggle{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
  .plan-opt{ text-align:left; padding:12px 14px; border-radius:14px; border:1px solid var(--line-strong); background:var(--surface); transition:.2s; }
  .plan-opt:active{ transform:scale(.97); }
  .plan-opt b{ display:block; font-size:13.5px; margin-bottom:2px; }
  .plan-opt span{ display:block; font-size:11px; color:var(--text-faint); }
  .plan-opt.on{ background:var(--surface-2); border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.14); }
  .plan-opt.on b{ color:var(--accent-2); }
  @media (max-width:560px){ .plan-toggle{ grid-template-columns:1fr; } }

  /* Host onboarding 4-step wizard */
  .ho-steps{ display:flex; align-items:center; justify-content:center; margin-bottom:32px; }
  .ho-step-dot{ width:30px; height:30px; border-radius:50%; background:var(--surface-2); border:1px solid var(--border-strong); color:var(--text-muted); display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; flex-shrink:0; transition:.25s; }
  .ho-step-dot.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .ho-step-dot.done{ background:var(--success); border-color:var(--success); color:#fff; }
  .ho-step-line{ width:44px; height:2px; background:var(--border-strong); margin:0 4px; }
  .ho-step-line.done{ background:var(--success); }
  .ho-panel{ display:none; }
  .ho-panel.active{ display:block; animation:fadeUp .4s ease both; }

  /* MODAL DIALOG */
  .modal-overlay{ display:none; position:fixed; inset:0; z-index:200; background:rgba(26,26,46,.4); backdrop-filter:blur(6px); align-items:center; justify-content:center; padding:24px; }
  .modal-overlay.show{ display:flex; animation:fadeIn .25s ease; }
  .modal-box{ width:100%; max-width:420px; padding:28px; box-shadow:0 30px 80px -20px rgba(0,0,0,.5); }

  /* Custom date+time picker -- replaces the plain <input type="datetime-
     local">, which renders as a bare, inconsistent browser-native control
     with no branding. One field button opens a calendar + a grid of
     half-hour time chips, built with the same tokens (--accent/--surface-2/
     --line/--r-*) as every other control.
     It opens as a true top-level modal -- centered dialog on desktop, bottom
     sheet on mobile -- rendered at <body> level (the JS relocates each
     .dt-picker there) so no sticky/overflow/backdrop-filter ancestor can
     clip it or trap its stacking context. z-index sits ABOVE .modal-overlay
     (200) so it still works when opened from inside the trip-dates dialog.
     Body scroll is locked (body.dt-locked) while it's open, so the page
     can't slide around underneath it. */
  .dt-field{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; background:var(--surface-2); border:1.5px solid var(--line); border-radius:var(--r-md); font-size:14px; color:var(--text); text-align:left; cursor:pointer; transition:border-color .15s; }
  .dt-field:hover{ border-color:var(--line-strong); }
  .dt-field.open{ border-color:var(--accent); }
  .dt-field:disabled{ opacity:.5; cursor:not-allowed; }
  .dt-field svg{ width:16px; height:16px; stroke:var(--text-faint); flex-shrink:0; transition:transform .2s; }
  .dt-field.open svg{ transform:rotate(180deg); }
  body.dt-locked{ overflow:hidden; }
  .dt-picker{ position:fixed; z-index:260; display:none; flex-direction:column; left:50%; top:50%; transform:translate(-50%,-50%); width:min(370px, calc(100vw - 32px)); max-height:min(600px, calc(100dvh - 48px)); overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 30px 80px -20px rgba(0,0,0,.5); }
  .dt-picker.dt-picker--open{ display:flex; animation:fadeIn .2s ease; }
  .dt-picker__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); flex-shrink:0; }
  .dt-picker__head b{ font-size:14.5px; color:var(--text); }
  .dt-picker__head button{ width:30px; height:30px; border-radius:8px; font-size:17px; color:var(--text-dim); flex-shrink:0; }
  .dt-picker__head button:hover{ background:var(--surface-2); }
  .dt-picker__scroll{ padding:16px; overflow-y:auto; flex:1; -webkit-overflow-scrolling:touch; }
  .dt-picker__foot{ padding:12px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); flex-shrink:0; }
  .dt-picker__cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; font-size:13.5px; }
  .dt-picker__cal-head button{ width:28px; height:28px; border-radius:50%; color:var(--text-dim); font-size:16px; }
  .dt-picker__cal-head button:hover{ background:var(--surface-2); }
  .dt-picker__cal-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:10.5px; color:var(--text-faint); margin-bottom:4px; }
  .dt-picker__cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
  .dt-picker__day{ aspect-ratio:1; border-radius:8px; font-size:13px; color:var(--text); display:flex; align-items:center; justify-content:center; }
  .dt-picker__day:not(.disabled):not(.dt-picker__day--empty):hover{ background:var(--surface-2); }
  .dt-picker__day.selected{ background:var(--accent); color:#fff; font-weight:700; }
  .dt-picker__day.disabled{ color:var(--line-strong); cursor:default; }
  .dt-picker__day--empty{ cursor:default; }
  .dt-picker__times-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); margin:14px 0 6px; }
  .dt-picker__times{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
  .dt-picker__time-chip{ padding:9px 6px; border-radius:var(--r-md); background:var(--surface-2); border:1px solid var(--line); font-size:12.5px; color:var(--text-dim); white-space:nowrap; text-align:center; }
  .dt-picker__time-chip:hover{ border-color:var(--line-strong); }
  .dt-picker__time-chip.selected{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
  .dt-picker-backdrop{ display:none; position:fixed; inset:0; z-index:255; background:rgba(0,0,0,.55); backdrop-filter:blur(3px); }
  .dt-picker-backdrop.show{ display:block; animation:fadeIn .25s ease; }
  @keyframes dtSheetUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
  @media (max-width:640px){
    .dt-picker{ left:0; right:0; bottom:0; top:auto; transform:none; width:auto; max-height:88dvh; border-radius:22px 22px 0 0; box-shadow:0 -30px 70px -20px rgba(0,0,0,.7); }
    .dt-picker.dt-picker--open{ animation:dtSheetUp .25s ease; }
    .dt-picker__times{ grid-template-columns:repeat(4,1fr); }
    .dt-picker__day{ font-size:14px; }
  }

  /* "What drivers say" -- admin-curated reviews on the home page
     (get_featured_reviews, 0121_featured_reviews.sql). Card language
     matches .car-card. Kept in sync with app.html's own copy. */
  .review-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:18px; }
  .review-card{ margin:0; display:flex; flex-direction:column; gap:12px; padding:22px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); }
  .review-card__stars{ display:flex; gap:3px; }
  .review-card__star{ width:16px; height:16px; fill:var(--line-strong); }
  .review-card__star.on{ fill:#F59E0B; }
  .review-card__text{ margin:0; font-size:14px; line-height:1.55; color:var(--text); }
  .review-card__by{ font-size:12.5px; font-weight:600; color:var(--text-dim); }
  .review-card__by span{ display:block; font-weight:400; color:var(--text-faint); font-size:11.5px; margin-top:2px; }

  /* 5-star rating picker -- rateTripOverlay. Filled state is class-driven
     (.on, up to and including the hovered/selected star), not :checked
     radio styling, so submitTripRating() can just read which buttons
     carry .on rather than wiring a real <input type="radio"> group. */
  .star-picker{ display:flex; gap:6px; }
  .star-picker__star{ font-size:32px; line-height:1; color:var(--line-strong); transition:color .1s, transform .1s; }
  .star-picker__star:hover{ transform:scale(1.1); }
  .star-picker__star.on{ color:#F59E0B; }

  /* generic icon badge, reusable outside .stage-card too */
  .icon-badge{ width:52px; height:52px; border-radius:16px; background:var(--gold); display:flex; align-items:center; justify-content:center; box-shadow:0 0 24px rgba(37,99,235,.4); }
  .icon-badge svg{ width:24px; height:24px; stroke:var(--ink); fill:none; stroke-width:2; }

  /* ---------------- TESTIMONIALS ---------------- */
  .testimonial{ padding:24px; text-align:left; }
  .testimonial .stars{ color:var(--accent-2); font-size:13px; margin-bottom:12px; }
  .testimonial p.quote{ font-size:13px; color:var(--text-dim); line-height:1.7; margin-bottom:16px; }
  .testimonial b{ font-family:'Inter'; font-size:14px; display:block; }
  .testimonial span{ font-size:11px; color:var(--text-faint); }

  /* ---------------- INFO PAGES (about/help/contact/safety/legal) ---------------- */
  .info-page{ padding:56px 32px 90px; }
  .info-body{ max-width:720px; margin:0 auto; }
  .info-body a.inline-link{ color:var(--accent-2); text-decoration:underline; }
  .info-updated{ font-family:'JetBrains Mono'; font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; margin-bottom:16px; display:block; }

  /* Each topic is its own quiet card instead of a stacked wall of h3/p --
     a small gold dot on the heading is the only accent, so a page with
     ten of these still reads calm, not busy. */
  .info-block{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; margin-bottom:14px; }
  .info-block h3{ font-size:16px; margin-bottom:10px; display:flex; align-items:center; gap:10px; }
  .info-block h3::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; }
  .info-block p{ font-size:13.5px; line-height:1.7; color:var(--text-dim); }
  .info-block p + p{ margin-top:10px; }
  .info-block ul{ margin:8px 0 0; padding-left:18px; }
  .info-block li{ font-size:13.5px; line-height:1.7; color:var(--text-dim); margin-bottom:6px; }
  @media (max-width:640px){ .info-block{ padding:18px 20px; } }

  .legal-tabs{ display:flex; gap:8px; justify-content:center; margin-bottom:20px; }
  .legal-tabs button{ font-size:13px; font-weight:600; color:var(--text-dim); padding:9px 18px; border-radius:100px; border:1px solid var(--line-strong); transition:.2s; }
  .legal-tabs button:active{ transform:scale(.95); }
  .legal-tabs button.on{ color:var(--ink); background:var(--gold); border-color:transparent; }
  .legal-section{ display:none; }
  .legal-section.on{ display:block; }

  .contact-card{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:24px 0 32px; }
  .contact-card .card{ padding:22px 16px; text-align:center; }
  .contact-card .card__ic{ width:40px; height:40px; margin:0 auto 12px; border-radius:11px; background:var(--color-accent-bg); display:flex; align-items:center; justify-content:center; }
  .contact-card .card__ic svg{ width:19px; height:19px; stroke:var(--accent-2); fill:none; stroke-width:1.8; }
  .contact-card .card b{ display:block; font-family:'Space Grotesk'; font-size:15px; margin-bottom:4px; }
  .contact-card .card span{ font-size:13px; color:var(--text-dim); word-break:break-word; }
  @media (max-width:560px){ .contact-card{ grid-template-columns:1fr; } }

  /* ---------------- FOOTER ---------------- */
  .footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px; text-align:left; padding:0 0 36px; }
  .footer-col .footer-label{ font-family:'JetBrains Mono'; font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px; display:block; }
  .footer-col button{ display:block; font-size:13px; color:var(--text-dim); padding:6px 0; transition:.2s; }
  .footer-col button:hover{ color:var(--accent-2); }
  .footer-bottom{ border-top:1px solid var(--line); padding-top:20px; }
  @media (max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; } }

  /* BROWSE */
  .filters{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:34px; }
  .chip{ font-size:13px; padding:9px 18px; border-radius:100px; border:1px solid var(--line-strong); color:var(--text-dim); transition:.2s; }
  .chip:active{ transform:scale(.94); }
  .chip.on{ background:var(--gold); color:var(--ink); border-color:transparent; font-weight:600; }
  .chip.promo-chip{ animation:promoChipSlideIn .4s ease both; background:var(--gold); color:var(--ink); border-color:transparent; font-weight:600; }
  @keyframes promoChipSlideIn{ from{ opacity:0; transform:translateX(-24px); } to{ opacity:1; transform:translateX(0); } }
  .car-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .car-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); transition:transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); cursor:pointer; }
  .car-card:hover{ transform:translateY(-2px); box-shadow:var(--sh-md); border-color:var(--border-strong); }
  .car-card:active{ transform:translateY(0) scale(.99); }
  /* Photos are simulated as CSS backgrounds (see carCardHtml) rather than
     real <img> tags -- background-size:cover fills car-card__img-wrap's
     fixed height edge-to-edge, matching the new price-overlay/badge
     treatment (see the CAR CARD rules further down for those classes). */
  .car-card .img{ height:175px; background-color:var(--surface-2); background-repeat:no-repeat; background-position:center; background-size:cover; position:relative; }
  .car-card .info{ padding:var(--sp-4); }
  .car-card__year{ font-size:12px; color:var(--text-muted); flex-shrink:0; }
  @media (max-width:800px){ .car-grid{ grid-template-columns:1fr 1fr; } }

  /* List view mode -- toggled via setBrowseViewMode(), adds this modifier
     class to #carGrid. Same cards, same data, just a horizontal row
     layout instead of a grid tile. */
  .car-grid.car-grid--list{ display:flex; flex-direction:column; gap:14px; }
  .car-grid--list .car-card{ display:flex; }
  .car-grid--list .car-card:hover{ transform:translateY(-2px); }
  .car-grid--list .car-card .img{ width:220px; height:auto; flex-shrink:0; }
  .car-grid--list .car-card .info{ flex:1; display:flex; flex-direction:column; justify-content:center; }
  @media (max-width:640px){ .car-grid--list .car-card{ flex-direction:column; } .car-grid--list .car-card .img{ width:auto; height:160px; } }

  /* Browse layout -- filter sidebar + results column. Sidebar becomes a
     bottom-sheet drawer on mobile (.open), triggered by the floating
     Filters button; the backdrop closes it on tap-outside. */
  .browse-layout{ display:flex; align-items:flex-start; gap:32px; }
  .browse-sidebar{ flex:0 0 240px; position:sticky; top:88px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; display:flex; flex-direction:column; gap:20px; }
  .browse-sidebar__head{ display:flex; align-items:center; justify-content:space-between; font-family:'Space Grotesk'; font-weight:700; font-size:15px; }
  .browse-sidebar__head-actions{ display:flex; align-items:center; gap:14px; }
  .browse-sidebar__head-actions > button:first-child{ font-family:'Inter'; font-size:12px; font-weight:600; color:var(--accent-2); }
  .browse-sidebar__close{ display:none; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; color:var(--text-dim); flex-shrink:0; }
  .browse-sidebar__close svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }
  .browse-sidebar__close:active{ background:var(--surface-2); }
  .browse-sidebar__apply{ display:none; }
  .filter-group{ display:flex; flex-direction:column; gap:10px; padding-top:16px; border-top:1px solid var(--line); }
  .browse-sidebar__head + .filter-group{ border-top:none; padding-top:0; }
  .filter-group__title{ font-family:'JetBrains Mono'; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); }
  .filter-group__hint{ font-size:12px; color:var(--text-dim); }
  .filter-radio, .filter-check{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--text-dim); cursor:pointer; padding:7px 2px; margin:-7px -2px; min-height:30px; }
  .filter-radio input, .filter-check input{ accent-color:var(--accent); width:17px; height:17px; cursor:pointer; flex-shrink:0; }
  #priceRangeFilter{ width:100%; accent-color:var(--accent); height:32px; }
  .filter-text-input{ width:100%; padding:10px 12px; border:1px solid var(--line-strong); border-radius:8px; font-size:13px; color:var(--text); font-family:inherit; background:var(--surface); cursor:pointer; }
  input.filter-text-input{ cursor:text; }
  .filter-text-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.15); }

  .browse-content{ flex:1; min-width:0; }
  .browse-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
  .browse-toolbar__count{ font-size:13px; color:var(--text-dim); }
  .browse-toolbar__actions{ display:flex; align-items:center; gap:10px; }
  .browse-sort{ font-size:13px; color:var(--text); background:var(--surface); border:1px solid var(--line-strong); border-radius:100px; padding:9px 14px; cursor:pointer; }
  .view-toggle{ display:flex; border:1px solid var(--line-strong); border-radius:100px; overflow:hidden; }
  .view-toggle button{ padding:8px 11px; display:flex; color:var(--text-faint); }
  .view-toggle button svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; }
  .view-toggle button.on{ background:var(--surface-2); color:var(--accent-2); }
  .browse-filter-btn{ display:none; }

  @media (max-width:800px){
    /* Aligned with .car-grid's own first breakpoint (line 445) --
       previously 960px, which left a dead zone from 800-960px where the
       grid had already narrowed to 2 columns but the sidebar was still
       the full desktop inline layout instead of the drawer, cramping the
       results column. Both now adapt together at the same width. */
    .browse-sidebar{ position:fixed; left:0; right:0; bottom:0; top:auto; z-index:90; max-height:82vh; overflow-y:auto; border-radius:20px 20px 0 0; transform:translateY(110%); transition:transform .3s cubic-bezier(.16,1,.3,1); box-shadow:0 -20px 50px -14px rgba(0,0,0,.3); }
    .browse-sidebar.open{ transform:translateY(0); }
    /* The header (with its close button) stays pinned to the top of the
       drawer while the filters below it scroll, so there's always a
       visible, reachable way out, not just tap-the-backdrop or scroll-
       all-the-way-down to "Show results". */
    .browse-sidebar__head{ position:sticky; top:-20px; margin:-20px -20px 0; padding:20px 20px 14px; background:var(--surface); z-index:1; }
    .browse-sidebar__close{ display:flex; }
    .browse-sidebar__apply{ display:flex; margin-top:4px; }
    .browse-filter-btn{ display:inline-flex; align-items:center; gap:6px; background:var(--gold); color:var(--ink); font-size:13px; font-weight:700; padding:9px 16px; border-radius:100px; }
    .browse-filter-btn__count{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:var(--r-full); background:rgba(255,255,255,.3); font-size:11px; }
    .browse-filter-backdrop{ display:none; position:fixed; inset:0; z-index:85; background:rgba(0,0,0,.5); }
    .browse-filter-backdrop.show{ display:block; }
  }

  /* Skeleton loading cards -- shown while loadCars() fetches, same box
     shape as .car-card so there's no layout shift when real cards replace
     them. */
  .car-card.skeleton{ cursor:default; }
  .car-card.skeleton .img{ background:var(--panel); }
  .car-card.skeleton .img::after{ display:none; }
  .skeleton-bar{ height:12px; border-radius:6px; background:linear-gradient(90deg, var(--surface-2) 25%, var(--line-strong) 50%, var(--surface-2) 75%); background-size:200% 100%; animation:skeletonShimmer 1.4s ease-in-out infinite; }
  .skeleton-bar.title{ width:70%; height:15px; margin-bottom:10px; }
  .skeleton-bar.meta{ width:50%; margin-bottom:14px; }
  .skeleton-bar.price{ width:35%; }
  @keyframes skeletonShimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
  .car-card.fade-in{ animation:carCardFadeIn .4s ease both; }
  @keyframes carCardFadeIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

  /* CAR DETAILS */
  /* min-width:0 overrides grid items' default min-width:auto -- without
     it, a wide-enough child (the unwrapped .thumbs row below, with a car
     that has many photos) forces its column past its 1.4fr/1fr share,
     widening the whole grid past the viewport on any screen size, not
     just narrow ones. Every direct child needs this, not just the one
     that happens to overflow today. */
  .details-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:start; }
  .details-grid > *{ min-width:0; }
  @media (min-width:901px){ .detail-booking-card{ position:sticky; top:96px; } }
  .gallery-main{ height:260px; border-radius:18px; background:var(--surface-2); position:relative; margin-bottom:10px; }
  /* Horizontally scrollable, not wrapped -- a car with many photos (this
     one has 15) would otherwise force its un-wrapped flex row to its full
     content width, which is exactly what was dragging the whole details
     page wider than the viewport. Same overflow-x pattern as .tablist. */
  .thumbs{ display:flex; gap:8px; margin-bottom:22px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .thumbs::-webkit-scrollbar{ display:none; }
  .thumbs i{ width:64px; height:46px; border-radius:9px; background:var(--surface-2); border:1px solid var(--line); cursor:pointer; flex-shrink:0; }
  .thumbs i.active{ border-color:var(--accent); border-width:2px; }
  .spec-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:22px; }
  .spec-grid .s{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px; font-size:11px; color:var(--text-dim); }
  .spec-grid .s b{ display:block; font-size:14px; color:var(--text); font-family:'Inter'; }
  .details-grid p.desc{ color:var(--text-dim); font-size:14px; line-height:1.7; max-width:520px; }
  .included-list{ margin-top:26px; max-width:480px; }
  .included-list__title{ display:block; font-family:'JetBrains Mono'; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); margin-bottom:12px; }
  .included-item{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--text-dim); padding:8px 0; }
  .included-item svg{ width:16px; height:16px; stroke:var(--mint); fill:none; stroke-width:2.4; flex-shrink:0; }
  .included-item.excluded{ color:var(--text-faint); }
  .included-item.excluded svg{ stroke:var(--danger); }

  .detail-title-row{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
  .detail-instant-badge{ font-size:11px; font-weight:700; color:var(--success); background:var(--success-bg); padding:5px 11px; border-radius:var(--r-full); }

  /* 2-col icon+label+value spec grid, real fields only (fuel/transmission/
     seats/colour/year/body type/emission norm) -- replaces the old 4-item
     grid, which only ever showed 2 real values (delivery/city) alongside
     2 static ones ("Free cancellation"/"ID-matched"). Those two static
     facts moved into the included-list below instead, where "always true"
     platform facts belong. */
  .detail-specs-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:22px; }
  .detail-specs-grid .s{ display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:12px; }
  .detail-specs-grid .s__ic{ width:32px; height:32px; border-radius:var(--r-md); background:var(--accent-subtle); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .detail-specs-grid .s__ic svg{ width:16px; height:16px; stroke:var(--accent); fill:none; stroke-width:2; }
  .detail-specs-grid .s span{ display:block; font-size:10.5px; color:var(--text-faint); }
  .detail-specs-grid .s b{ display:block; font-size:13px; color:var(--text-primary); }

  .km-policy-card{ display:flex; align-items:center; gap:10px; background:var(--accent-subtle); border:1px solid rgba(37,99,235,.18); border-radius:var(--r-lg); padding:14px 16px; margin:18px 0; font-size:13px; color:var(--text-primary); max-width:480px; }
  .km-policy-card b{ color:var(--accent); }

  .pricing-table{ width:100%; border-collapse:collapse; margin:14px 0 8px; max-width:480px; }
  .pricing-table th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint); font-weight:600; padding:0 0 8px; border-bottom:1px solid var(--border); }
  .pricing-table td{ padding:10px 0; border-bottom:1px solid var(--border); font-size:13px; color:var(--text-secondary); }
  .pricing-table td:last-child, .pricing-table th:last-child{ text-align:right; font-weight:600; color:var(--text-primary); }

  .host-card{ display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px; margin:22px 0; max-width:480px; }
  .host-card__avatar{ width:48px; height:48px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; flex-shrink:0; }
  .host-card__info{ flex:1; min-width:0; }
  .host-card__info b{ display:block; font-size:14px; }
  .host-card__info span{ display:block; font-size:12px; color:var(--text-muted); margin-top:2px; }

  .detail-sticky-bar{ position:fixed; top:0; left:0; right:0; z-index:70; background:var(--surface); border-bottom:1px solid var(--border); box-shadow:var(--sh-sm); padding:12px 32px; display:none; align-items:center; justify-content:space-between; gap:16px; transform:translateY(-100%); transition:transform var(--t-base); }
  .detail-sticky-bar.show{ display:flex; transform:translateY(0); }
  .detail-sticky-bar__name{ font-weight:700; font-size:14px; }
  .detail-sticky-bar__price{ color:var(--text-secondary); font-size:13px; }

  .fare-breakdown{ margin:14px 0; }
  .fare-breakdown .r{ display:flex; justify-content:space-between; font-size:13px; color:var(--text-secondary); padding:5px 0; }
  .fare-breakdown .r.total{ border-top:1px solid var(--border); margin-top:6px; padding-top:10px; font-weight:700; color:var(--text-primary); font-size:15px; }
  .fare-breakdown .r.total b{ color:var(--accent); }

  .card{ background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow-sm); }
  .card .price{ font-family:'Inter'; font-weight:700; font-size:30px; color:var(--accent); margin-bottom:16px; }
  .field{ margin-bottom:14px; position:relative; }
  .field label{ font-size:11px; color:var(--text-faint); font-family:'JetBrains Mono'; text-transform:uppercase; letter-spacing:.04em; display:block; margin-bottom:6px; }
  /* Kept padding-based (not a fixed height) -- .box also wraps multi-row
     <textarea> fields throughout the app (accident report, admin notes
     etc), not just single-line inputs. */
  .field .box{ background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-md); padding:13px 14px; font-size:15px; color:var(--text); transition:border-color .15s, box-shadow .15s; }
  .field .box:focus-within, .field .box.focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
  .field input, .field select{ background:none; border:none; outline:none; color:var(--text); font-family:inherit; font-size:15px; width:100%; }
  .field input::placeholder{ color:var(--text-faint); }
  .field select{ cursor:pointer; }

  /* AUTH split-screen -- decorative brand panel next to the functional
     .center-stage card; the panel is presentational only, hidden below
     the tablet breakpoint where .center-stage already centers full-width. */
  .auth-split{ display:flex; min-height:calc(100vh - 65px); }
  .auth-split .center-stage{ flex:1; }
  .auth-split__panel{ display:none; }
  @media (min-width:900px){
    .auth-split__panel{
      display:flex; flex-direction:column; justify-content:center; flex:1 1 44%;
      /* Dark scrim (same treatment as .db-hero__overlay) layered over a
         real car photo -- replaces the previous flat var(--text) fill,
         which had no imagery at all. Reuses one of the hero marquee's own
         Unsplash sources rather than a new asset. */
      background:
        linear-gradient(105deg, rgba(10,15,30,.92) 0%, rgba(10,15,30,.85) 45%, rgba(10,15,30,.65) 100%),
        url('https://images.unsplash.com/photo-1503736334956-4c8f8e92946d?w=1200&q=75') center/cover no-repeat;
      padding:64px; position:relative; overflow:hidden;
    }
    .auth-split .center-stage{ flex:1 1 56%; }
  }
  .auth-split__brand{ font-family:'Inter'; font-weight:800; font-size:26px; color:var(--accent-soft); margin-bottom:14px; }
  .auth-split__headline{ font-size:clamp(26px,2.6vw,34px); color:#fff; line-height:1.15; margin-bottom:14px; max-width:340px; }
  .auth-split__tag{ color:rgba(255,255,255,.75); font-size:15px; margin-bottom:32px; max-width:320px; }
  .auth-split__features{ list-style:none; display:flex; flex-direction:column; gap:14px; }
  .auth-split__features li{ font-size:14px; color:#fff; }

  /* Testimonial card pinned to the bottom of the dark auth panel -- static
     illustrative copy, not a data-driven stat, same category as the
     feature bullets above it. */
  .auth-split__testimonial{ margin-top:40px; padding:20px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-lg); max-width:360px; }
  .auth-split__stars{ color:var(--accent-soft); font-size:13px; letter-spacing:2px; margin-bottom:10px; }
  .auth-split__testimonial p{ color:rgba(255,255,255,.85); font-size:13.5px; line-height:1.5; margin-bottom:14px; }
  .auth-split__testimonial-user{ display:flex; align-items:center; gap:10px; }
  .auth-split__avatar{ width:34px; height:34px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; }
  .auth-split__testimonial-user b{ display:block; color:#fff; font-size:13px; }
  .auth-split__testimonial-user small{ color:rgba(255,255,255,.6); font-size:11.5px; }

  /* Guest/Host role tabs atop the login/signup card -- pill-shaped, equal
     halves, matching the search card's tab language elsewhere on the site. */
  .role-tabs{ display:flex; background:var(--surface-2); border-radius:var(--r-full); padding:4px; margin-bottom:22px; gap:4px; }
  .role-tab{ flex:1; text-align:center; padding:10px; border-radius:var(--r-full); font-size:13.5px; font-weight:600; color:var(--text-dim); transition:background .2s, color .2s; }
  .role-tab.on{ background:var(--accent); color:#fff; box-shadow:var(--sh-sm); }

  /* Swapped by setAuthRole() alongside the heading/sub copy -- a few
     concrete bullets on what that role actually gets, so picking Guest vs
     Host on login/signup means something beyond a label (Step: role-info
     on auth screens). Not a role *selector* -- account role is still only
     ever set for real via host onboarding -- purely informational. */
  .role-benefits{ list-style:none; padding:0; margin:0 0 10px; display:flex; flex-direction:column; gap:8px; }
  .role-benefits li{ display:flex; align-items:flex-start; gap:8px; font-size:12.5px; line-height:1.4; color:var(--text-dim); }
  .role-benefits li b{ color:var(--accent-2); font-weight:700; }
  .role-more-link{ background:none; border:none; padding:0; font-size:11.5px; font-weight:600; color:var(--accent-2); cursor:pointer; margin-bottom:16px; }
  .role-more-info{ font-size:12px; line-height:1.55; color:var(--text-dim); background:var(--surface-2); border-radius:var(--r-md); padding:12px 14px; margin:-8px 0 18px; }

  /* AUTH / KYC / SELFIE - centered card layout */
  .center-stage{ display:flex; justify-content:center; padding:70px 32px; }
  .stage-card{ width:100%; max-width:420px; padding:34px; box-shadow:var(--shadow-lg); }
  .stage-card .icon-badge{ width:52px; height:52px; border-radius:16px; background:var(--gold); display:flex; align-items:center; justify-content:center; margin-bottom:18px; box-shadow:0 0 24px rgba(37,99,235,.4); }
  .stage-card .icon-badge svg{ width:24px; height:24px; stroke:var(--ink); fill:none; stroke-width:2; }
  .stage-card h3{ font-size:24px; margin-bottom:6px; }
  .stage-card .sub{ font-size:13px; color:var(--text-dim); margin-bottom:22px; }
  .switch-line{ text-align:center; font-size:12.5px; color:var(--text-faint); margin-top:16px; }
  .switch-line button{ color:var(--accent-2); font-weight:600; }
  .switch-line button:hover{ text-decoration:underline; }

  .divider{ display:flex; align-items:center; gap:10px; margin:18px 0; color:var(--text-faint); font-size:11px; font-family:'JetBrains Mono'; text-transform:uppercase; letter-spacing:.05em; }
  .divider::before, .divider::after{ content:''; flex:1; height:1px; background:var(--line); }
  .social-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:6px; }

  /* Email/Phone/Google method tabs atop the login/signup card, below the
     Guest/Host role-tabs -- underline style (not the pill look used by
     role-tabs) so the two tab rows read as distinct levels of choice. */
  .auth-tabs{ display:flex; gap:20px; margin-bottom:20px; border-bottom:1px solid var(--line); }
  .auth-tab{ background:none; border:none; padding:0 0 10px; font-family:inherit; font-size:14px; font-weight:600; color:var(--text-faint); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s, border-color .15s; }
  .auth-tab.on{ color:var(--accent-2); border-bottom-color:var(--accent-2); }
  .auth-tab-panel{ display:none; }
  .auth-tab-panel.on{ display:block; }

  .phone-coming-soon{ display:flex; gap:8px; align-items:flex-start; background:var(--accent-light); color:var(--accent-3); border-radius:var(--r-md); padding:11px 13px; font-size:12.5px; line-height:1.45; margin-bottom:16px; }
  .phone-coming-soon svg{ width:16px; height:16px; flex-shrink:0; margin-top:1px; }

  .box.password-field-wrap{ position:relative; padding-right:56px; }
  .password-toggle-btn{ position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--accent-2); font-size:11.5px; font-weight:600; }

  .strength-meter{ height:4px; border-radius:2px; background:var(--surface-3); margin:8px 0 4px; overflow:hidden; }
  .strength-meter__fill{ height:100%; width:0%; transition:width .2s ease, background .2s ease; }
  .strength-meter__label{ font-size:11px; font-weight:600; }

  .otp-row{ display:flex; gap:8px; margin:16px 0; justify-content:center; }
  .otp-row .d{ flex:0 0 auto; width:38px; height:44px; background:var(--surface-2); border:1px solid var(--line-strong); border-radius:8px; display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono'; font-size:15px; transition:border-color .2s, box-shadow .2s; }
  .otp-row .d.filled{ border-color:var(--accent-2); color:var(--accent-2); box-shadow:0 0 12px rgba(29,78,216,.3); animation:otpPop .3s ease; }
  .otp-row input.d{ text-align:center; outline:none; padding:0; color:var(--text); }
  .otp-row input.d.filled{ color:var(--accent-2); }
  @keyframes otpPop{ from{ transform:scale(.7); opacity:0; } to{ transform:scale(1); opacity:1; } }
  .otp-timer{ text-align:center; font-size:12px; color:var(--text-faint); margin:-8px 0 14px; }
  .otp-timer button{ color:var(--accent-2); font-weight:600; }
  .otp-timer button:disabled{ color:var(--text-faint); font-weight:400; cursor:default; }
  .field.locked .box{ opacity:.55; }
  .auth-error{ font-size:12px; color:var(--danger); margin:-8px 0 14px; }
  .auth-status{ font-size:12px; color:var(--text-dim); margin:-8px 0 14px; }
  .auth-status button{ color:var(--accent-2); font-weight:600; text-decoration:underline; }

  .doc-upload{ border:1.5px dashed var(--line-strong); border-radius:14px; padding:16px; display:flex; align-items:center; gap:12px; margin-bottom:12px; transition:border-color .2s, background .2s; cursor:pointer; }
  .doc-upload:hover{ border-color:var(--accent); background:rgba(37,99,235,.06); }
  .doc-upload .ic{ width:36px; height:36px; border-radius:10px; background:rgba(37,99,235,.16); border:1px solid rgba(37,99,235,.35); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
  .doc-upload .ic svg{ width:16px; height:16px; stroke:var(--accent-soft); fill:none; stroke-width:2; }
  .doc-upload div span{ display:block; font-size:13px; font-weight:600; }
  .doc-upload div small{ font-size:10px; color:var(--text-faint); }

  /* ACCIDENT REPORT: per-thumbnail upload progress */
  .progress-bar{ height:4px; border-radius:2px; background:var(--line); overflow:hidden; margin-top:4px; }
  .progress-bar__fill{ height:100%; background:var(--accent-2); border-radius:2px; transition:width .25s ease; }

  /* SELFIE SCANNER */
  .scan-frame{ width:180px; height:180px; border-radius:50%; margin:6px auto 20px; position:relative; display:flex; align-items:center; justify-content:center; }
  .scan-frame .ring{ position:absolute; inset:0; border-radius:50%; border:2px dashed var(--accent); animation:spin 6s linear infinite; }
  .scan-frame .ring2{ position:absolute; inset:10px; border-radius:50%; border:1px solid rgba(29,78,216,.4); animation:spin 4s linear infinite reverse; }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .scan-frame .face{ width:120px; height:120px; border-radius:50%; background:var(--surface-3); position:relative; overflow:hidden; }
  .scan-frame .scanline{ position:absolute; left:0; right:0; height:3px; background:linear-gradient(to right, transparent, var(--accent-2), transparent); box-shadow:0 0 16px var(--accent-2); animation:scan 1.5s ease-in-out infinite; }
  @keyframes scan{ 0%{ top:6%; } 50%{ top:88%; } 100%{ top:6%; } }
  .scan-frame.done .ring, .scan-frame.done .ring2{ border-color:var(--accent-2); border-style:solid; animation:none; }
  .scan-frame.done .scanline{ display:none; }
  .scan-frame .check{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s; }
  .scan-frame.done .check{ opacity:1; }
  .scan-frame .check svg{ width:48px; height:48px; stroke:var(--accent-2); fill:none; stroke-width:2.4; stroke-dasharray:40; stroke-dashoffset:40; }
  .scan-frame.done .check svg{ animation:draw .5s ease forwards; }
  @keyframes draw{ to{ stroke-dashoffset:0; } }
  .scan-status{ text-align:center; font-family:'JetBrains Mono'; font-size:12px; color:var(--text-dim); margin-bottom:20px; }
  .scan-status b{ color:var(--accent-2); }

  /* PAYMENT */
  .pay-options{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px; }
  .pay-option{ border:1.5px solid var(--line-strong); border-radius:16px; padding:20px 16px; text-align:center; cursor:pointer; transition:.2s; }
  .pay-option:active{ transform:scale(.97); }
  .pay-option:hover{ border-color:var(--text-dim); }
  .pay-option.on{ border-color:var(--accent); background:rgba(37,99,235,.1); box-shadow:0 0 20px rgba(37,99,235,.2); }
  .pay-option .ic{ width:38px; height:38px; border-radius:11px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; margin:0 auto 10px; }
  .pay-option .ic svg{ width:18px; height:18px; stroke:var(--accent-soft); fill:none; stroke-width:2; }
  .pay-option b{ font-size:14px; display:block; margin-bottom:3px; }
  .pay-option span{ font-size:11px; color:var(--text-faint); }

  .pay-row{ display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:11px 14px; font-size:13px; margin-bottom:8px; cursor:pointer; transition:.2s; }
  .pay-row:hover{ border-color:var(--line-strong); }
  .pay-row.on{ border-color:var(--accent-2); box-shadow:0 0 14px rgba(29,78,216,.18); }
  .pay-row .radio{ width:13px; height:13px; border-radius:50%; border:1px solid var(--line-strong); flex-shrink:0; }
  .pay-row.on .radio{ border-color:var(--accent-2); background:radial-gradient(circle,var(--accent-2) 40%,transparent 42%); }

  .sum-row{ display:flex; justify-content:space-between; font-size:13px; color:var(--text-dim); padding:6px 0; }
  .sum-row.total{ color:var(--text); font-weight:700; font-size:15px; border-top:1px solid var(--line); margin-top:6px; padding-top:12px; }

  /* CONFIRM */
  .confetti-badge{ width:76px; height:76px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; box-shadow:0 0 0 10px rgba(29,78,216,.14); animation:pop .55s cubic-bezier(.2,.9,.3,1.3); }
  @keyframes pop{ from{ transform:scale(0) rotate(-40deg); } to{ transform:scale(1) rotate(0); } }
  .confetti-badge svg{ width:36px; height:36px; stroke:var(--ink); fill:none; stroke-width:2.6; }
  .confirm-detail{ background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:16px; margin:20px 0; text-align:left; }
  .confirm-detail .r{ display:flex; justify-content:space-between; font-size:13px; padding:6px 0; color:var(--text-dim); }
  .confirm-detail .r b{ color:var(--text); }

  /* BOOKINGS */
  .tablist{ display:flex; gap:8px; justify-content:center; margin-bottom:28px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:0 4px 2px; }
  .tablist::-webkit-scrollbar{ display:none; }
  .tablist .t{ flex-shrink:0; }
  @media (max-width:480px){ .tablist{ justify-content:flex-start; } }

  /* Empty states -- an icon + a plain explanation + (where there's an
     obvious next step) one CTA, instead of a lone gray sentence. */
  .empty-state{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:48px 20px; }
  .empty-state__ic{ width:40px; height:40px; stroke:var(--text-faint); fill:none; stroke-width:1.6; margin-bottom:6px; }
  .empty-state b{ font-family:'Space Grotesk'; font-size:16px; color:var(--text); }
  .empty-state__sub{ font-size:13px; color:var(--text-faint); max-width:280px; line-height:1.5; }
  .empty-state .btn{ margin-top:10px; }
  .tablist .t{ font-size:13px; padding:9px 18px; border-radius:100px; color:var(--text-faint); border:1px solid var(--line-strong); transition:.2s; }
  .tablist .t:active{ transform:scale(.95); }
  .tablist .t.on{ background:var(--accent); color:#fff; border-color:var(--accent); }
  .tablist__count{ display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 4px; margin-left:2px; border-radius:var(--r-full); background:rgba(148,163,184,.25); font-size:10.5px; }
  .tablist .t.on .tablist__count{ background:rgba(255,255,255,.28); }

  .booking-filters-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; max-width:720px; }
  .booking-filters-row select{ min-width:170px; }

  .booking-date-row{ display:flex; align-items:center; gap:14px; margin-top:10px; }
  .booking-date-block{ display:flex; flex-direction:column; }
  .booking-date-block span{ font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); font-family:'JetBrains Mono'; }
  .booking-date-block b{ font-size:13px; margin-top:1px; }
  .booking-date-block small{ font-size:11.5px; color:var(--text-dim); }
  .booking-date-row__arrow{ color:var(--text-faint); font-size:14px; }

  /* Inbox conversation list */
  .inbox-row{ display:flex; align-items:center; gap:14px; padding:14px 12px; border-radius:var(--r-md); cursor:pointer; transition:background var(--t-fast); }
  .inbox-row:hover{ background:var(--surface-2); }
  .inbox-row.unread{ background:var(--accent-subtle); }
  .inbox-row__thumb{ width:52px; height:52px; border-radius:var(--r-md); background:var(--surface-2); background-size:cover; background-position:center; flex-shrink:0; }
  .inbox-row__body{ flex:1; min-width:0; }
  .inbox-row__title-line{ display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
  .inbox-row__title-line b{ font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .inbox-row__title-line span{ font-size:11px; color:var(--text-faint); flex-shrink:0; }
  .inbox-row__preview{ font-size:12.5px; color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }
  .inbox-row.unread .inbox-row__preview{ color:var(--text-primary); font-weight:600; }
  .inbox-row__badge{ flex-shrink:0; min-width:18px; height:18px; border-radius:var(--r-full); background:var(--accent); color:#fff; font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 5px; }

  /* Chat screen -- fixed-height column (header / scrolling messages /
     input bar), independent of the page's normal scroll so the input bar
     stays pinned like a real messaging app. */
  .chat-screen{ display:flex; flex-direction:column; height:calc(100vh - var(--nav-h)); height:calc(100dvh - var(--nav-h)); max-width:720px; margin:0 auto; background:var(--surface); }
  @media (max-width:820px){ .chat-screen{ height:calc(100vh - 56px - env(safe-area-inset-bottom)); height:calc(100dvh - 56px - env(safe-area-inset-bottom)); } }
  .chat-header{ display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--border); flex-shrink:0; }
  .chat-header__back{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--text-secondary); flex-shrink:0; }
  .chat-header__back:hover{ background:var(--surface-2); }
  .chat-header__back svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; }
  .chat-header__info b{ display:block; font-size:14.5px; }
  .chat-header__info span{ display:block; font-size:11.5px; color:var(--text-muted); margin-top:1px; }
  .chat-messages{ flex:1; overflow-y:auto; padding:18px 20px; display:flex; flex-direction:column; gap:4px; }
  .chat-date-divider{ text-align:center; font-size:11px; color:var(--text-faint); margin:14px 0 8px; }
  .chat-bubble-row{ display:flex; flex-direction:column; max-width:75%; margin-bottom:4px; animation:chatBubbleIn var(--t-slow) ease both; }
  .chat-bubble-row.mine{ align-self:flex-end; align-items:flex-end; --chat-bubble-from:12px; }
  .chat-bubble-row.theirs{ align-self:flex-start; align-items:flex-start; --chat-bubble-from:-12px; }
  @keyframes chatBubbleIn{ from{ opacity:0; transform:translateX(var(--chat-bubble-from,0)); } to{ opacity:1; transform:translateX(0); } }
  .chat-bubble{ padding:9px 13px; font-size:13.5px; line-height:1.4; word-break:break-word; }
  .chat-bubble-row.mine .chat-bubble{ background:var(--accent); color:#fff; border-radius:var(--r-xl) var(--r-xl) var(--r-sm) var(--r-xl); }
  .chat-bubble-row.theirs .chat-bubble{ background:var(--surface); border:1px solid var(--border); color:var(--text-primary); border-radius:var(--r-xl) var(--r-xl) var(--r-xl) var(--r-sm); }
  .chat-bubble-row__time{ font-size:10px; color:var(--text-faint); margin-top:3px; padding:0 4px; }
  .chat-system-row{ text-align:center; margin:10px 0; animation:fadeIn var(--t-slow) ease both; }
  .chat-system-row span{ font-size:11.5px; color:var(--text-faint); background:var(--surface-2); padding:5px 12px; border-radius:var(--r-full); }
  .chat-input-bar{ display:flex; gap:10px; padding:14px 16px; border-top:1px solid var(--border); flex-shrink:0; background:var(--surface); }
  .chat-input-bar input{ flex:1; border:1px solid var(--border-strong); border-radius:var(--r-full); padding:11px 16px; font-size:13.5px; color:var(--text-primary); background:var(--surface-2); outline:none; }
  .chat-input-bar input:focus{ border-color:var(--accent); }
  .chat-send-btn{ width:40px; height:40px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform var(--t-fast); }
  .chat-send-btn:hover{ transform:scale(1.06); }
  .chat-send-btn svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; }
  .booking-list{ display:flex; flex-direction:column; gap:12px; max-width:680px; margin:0 auto; }
  .booking-row{ display:grid; grid-template-columns:1.4fr 1fr 1fr auto; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 20px; font-size:13px; transition:border-color .2s; }
  .booking-row:hover{ border-color:var(--line-strong); }
  .badge{ font-size:12px; font-weight:700; padding:4px 10px; border-radius:100px; display:inline-flex; align-items:center; gap:5px; width:fit-content; }
  .badge--green{ background:var(--success-bg); color:var(--success); }
  .badge--blue{ background:var(--accent-light); color:var(--accent); }
  .badge--amber{ background:var(--warning-bg); color:var(--warning); }
  .badge--red{ background:var(--danger-bg); color:var(--danger); }
  .badge--gray{ background:var(--surface-2); color:var(--text-dim); }

  /* PROFILE */
  .profile-header{ display:flex; align-items:center; gap:16px; padding:24px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:20px; }
  .profile-header__avatar{ width:60px; height:60px; border-radius:50%; background:var(--gold); color:var(--ink); display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk'; font-weight:700; font-size:20px; flex-shrink:0; }
  .profile-header__info{ min-width:0; }
  .profile-header__name-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .profile-header__name-row b{ font-family:'Space Grotesk'; font-size:18px; }
  .profile-header__kyc{ display:inline-flex; align-items:center; font-size:11px; font-weight:700; color:var(--mint); background:var(--surface-2); padding:3px 10px; border-radius:100px; }
  .profile-edit-btn{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--text-faint); flex-shrink:0; }
  .profile-edit-btn:hover{ background:var(--surface-2); color:var(--text-secondary); }
  .profile-edit-btn svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }
  .profile-header__phone{ display:block; font-size:13px; color:var(--text-faint); margin-top:2px; }

  .profile-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:28px; }
  .profile-stats__item{ text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 8px; }
  .profile-stats__item b{ display:block; font-family:'Space Grotesk'; font-weight:700; font-size:20px; color:var(--accent-2); margin-bottom:2px; }
  .profile-stats__item span{ font-size:11px; color:var(--text-faint); font-family:'JetBrains Mono'; text-transform:uppercase; letter-spacing:.04em; }

  .profile-menu{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
  .profile-menu__label{ display:block; font-family:'JetBrains Mono'; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); padding:16px 20px 6px; }
  .profile-menu__item{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:14px 20px; font-size:14px; color:var(--text); border-bottom:1px solid var(--line); text-align:left; transition:background .15s; }
  .profile-menu__item:hover{ background:var(--surface-2); }
  .profile-menu__item svg{ width:16px; height:16px; stroke:var(--text-faint); fill:none; stroke-width:2; }
  .profile-menu__item--danger{ color:var(--danger); border-bottom:none; }

  /* ADMIN / OWNER */
  .admin-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:28px; max-width:680px; margin-left:auto; margin-right:auto; }
  @media (max-width:700px){ .admin-stats{ grid-template-columns:1fr; } }

  /* DASHBOARD SHELL -- owner + admin. A dark header banner, a sticky
     sidebar of section links, and a content pane that shows one
     .dash__panel at a time via showDashPanel(). All existing IDs/tables/
     forms inside each panel are untouched; this only wraps them. */
  .dash__head{ background:var(--text); padding:48px 32px 40px; text-align:center; }
  .dash__head h2{ color:#fff; font-size:clamp(24px,3vw,32px); margin-bottom:6px; }
  .dash__head p{ color:rgba(255,255,255,.7); font-size:14px; }
  .dash__body{ display:flex; max-width:1200px; margin:0 auto; padding:32px; gap:28px; align-items:flex-start; }
  .dash--wide .dash__body{ max-width:1360px; }
  .dash__sidebar{ flex:0 0 220px; position:sticky; top:96px; display:flex; flex-direction:column; gap:3px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:10px; box-shadow:var(--shadow-sm); }
  .dash__navitem{ text-align:left; padding:11px 14px; border-radius:10px; font-size:13.5px; font-weight:600; color:var(--text-dim); transition:.2s; }
  .dash__navitem:hover{ background:var(--surface-2); color:var(--text); }
  .dash__navitem.on{ background:var(--gold); color:var(--ink); }
  .dash__content{ flex:1; min-width:0; }
  .dash__panel{ display:none; }
  .dash__panel.active{ display:block; animation:fadeUp .4s ease; }
  @media (max-width:900px){
    .dash__body{ flex-direction:column; padding:20px; gap:16px; }
    .dash__sidebar{ position:static; flex-direction:row; overflow-x:auto; width:100%; }
    .dash__navitem{ white-space:nowrap; }
  }

  /* ADMIN: MANUAL AGREEMENTS -- 3-stage stepper (details / sign / done)
     inside the admin:agreements dash panel. Scoped under .ma- so it
     doesn't collide with any existing component. */
  .ma-stepper{ display:flex; align-items:center; justify-content:center; gap:0; margin:0 auto 32px; max-width:420px; }
  .ma-step{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:0 0 auto; }
  .ma-step__dot{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; background:var(--surface-2); color:var(--text-faint); border:2px solid var(--line-strong); transition:.2s; }
  .ma-step__label{ font-size:11px; color:var(--text-faint); font-weight:600; }
  .ma-step.active .ma-step__dot{ background:var(--accent); color:#fff; border-color:var(--accent); }
  .ma-step.active .ma-step__label{ color:var(--accent); }
  .ma-step.done .ma-step__dot{ background:var(--success); color:#fff; border-color:var(--success); }
  .ma-step.done .ma-step__label{ color:var(--success); }
  .ma-step__line{ flex:0 0 40px; height:2px; background:var(--line-strong); margin-bottom:20px; }

  .ma-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:32px; max-width:680px; margin:0 auto 40px; }
  .ma-card .icon-badge{ width:52px; height:52px; border-radius:16px; background:var(--gold); display:flex; align-items:center; justify-content:center; margin-bottom:18px; box-shadow:0 0 24px rgba(37,99,235,.4); }
  .ma-card .icon-badge svg{ width:24px; height:24px; stroke:var(--ink); fill:none; stroke-width:2; }
  .ma-form h4.ma-section-label{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); font-weight:700; margin:28px 0 14px; padding-top:20px; border-top:1px solid var(--line); }
  .ma-form h4.ma-section-label:first-of-type{ margin-top:20px; padding-top:0; border-top:none; }
  .ma-form .field .box{ padding:16px 14px; }
  .ma-form .field.ma-invalid .box{ border-color:var(--danger); }
  .ma-err{ font-size:11.5px; color:var(--danger); margin:5px 0 0; display:none; }
  .ma-err.show{ display:block; }
  .ma-quickfill{ display:flex; gap:8px; margin:8px 0 14px; }
  .ma-quickfill button{ font-size:11px; padding:6px 10px; border-radius:8px; background:var(--surface-2); color:var(--text-faint); border:1px solid var(--line); }
  .ma-lookup-row{ display:flex; gap:8px; align-items:flex-start; }
  .ma-lookup-row .field{ flex:1; }
  .ma-banner{ font-size:12.5px; padding:10px 14px; border-radius:10px; margin-bottom:6px; display:none; }
  .ma-banner.show{ display:block; }
  .ma-banner--found{ background:var(--success-bg); color:var(--success); }
  .ma-banner--new{ background:var(--warning-bg); color:var(--warning); }
  .ma-car-preview{ display:none; gap:12px; align-items:center; border:1px solid var(--line); border-radius:12px; padding:12px; margin:-6px 0 16px; }
  .ma-car-preview.show{ display:flex; }
  .ma-car-preview img{ width:64px; height:48px; object-fit:cover; border-radius:8px; flex-shrink:0; background:var(--surface-2); }
  .ma-pill-toggle{ display:flex; background:var(--surface-2); border-radius:var(--r-full); padding:4px; gap:4px; max-width:280px; }
  .ma-pill-toggle button{ flex:1; padding:10px; border-radius:var(--r-full); font-size:13px; font-weight:600; color:var(--text-dim); }
  .ma-pill-toggle button.on{ background:var(--accent); color:#fff; }
  .ma-radio-cards{ display:flex; gap:12px; }
  .ma-radio-card{ flex:1; border:1.5px solid var(--line-strong); border-radius:14px; padding:16px; text-align:center; cursor:pointer; font-size:13px; font-weight:600; transition:.2s; }
  .ma-radio-card.on{ border-color:var(--accent); background:rgba(37,99,235,.08); color:var(--accent); }
  .ma-datetime-row{ display:flex; gap:10px; }
  .ma-datetime-row .box{ flex:1; }
  @media (max-width:640px){ .ma-datetime-row{ flex-direction:column; } .ma-radio-cards{ flex-direction:column; } }
  .ma-duration-note{ font-size:12px; color:var(--accent-2); margin-top:6px; font-weight:600; }
  .ma-hint{ font-size:11px; color:var(--text-faint); margin-top:4px; }
  .ma-total-display{ background:var(--surface-2); border-radius:12px; padding:16px 18px; margin:16px 0; text-align:center; }
  .ma-total-display b{ font-size:24px; color:var(--accent); display:block; }
  .ma-footer{ position:sticky; bottom:0; background:linear-gradient(to top, var(--surface) 80%, transparent); padding:16px 0 4px; margin-top:12px; }

  .ma-summary-card{ background:var(--surface-2); border-radius:14px; padding:16px; margin-bottom:14px; font-size:13px; }
  .ma-summary-card .r{ display:flex; justify-content:space-between; padding:4px 0; color:var(--text-dim); gap:12px; }
  .ma-summary-card .r b{ color:var(--text); text-align:right; }
  .ma-terms-box{ max-height:180px; overflow-y:auto; border:1px solid var(--line); border-radius:12px; padding:14px 16px; font-size:12px; color:var(--text-dim); box-shadow:inset 0 -8px 8px -8px rgba(0,0,0,.08); margin-bottom:8px; }
  .ma-terms-box ol{ padding-left:18px; margin:0; }
  .ma-terms-box li{ margin-bottom:8px; }
  .ma-scroll-hint{ font-size:11px; color:var(--warning); text-align:center; margin:0 0 12px; }
  .ma-declaration{ background:var(--info-bg); color:var(--text-dim); border-radius:12px; padding:14px 16px; font-size:12.5px; margin-bottom:16px; line-height:1.5; }
  .ma-sig-wrap{ position:relative; background:#fff; border:2px dashed var(--line-strong); border-radius:12px; height:200px; margin-bottom:12px; touch-action:none; }
  .ma-sig-wrap canvas{ width:100%; height:100%; display:block; border-radius:12px; }
  .ma-sig-placeholder{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--text-faint); font-size:13px; pointer-events:none; }
  .ma-sig-placeholder svg{ width:22px; height:22px; stroke:var(--text-faint); fill:none; stroke-width:1.6; }
  @media (max-width:480px){ .ma-sig-wrap{ height:160px; } }
  .ma-landscape-hint{ display:none; text-align:center; font-size:11.5px; color:var(--accent-2); margin:0 0 12px; }
  @media (max-width:480px){ .ma-landscape-hint{ display:block; } }

  .ma-done-check{ width:76px; height:76px; border-radius:50%; background:var(--success); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; box-shadow:0 0 0 10px rgba(5,150,105,.14); animation:pop .55s cubic-bezier(.2,.9,.3,1.3); }
  .ma-done-check svg{ width:36px; height:36px; stroke:#fff; fill:none; stroke-width:2.6; }

  .ma-toolbar{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; justify-content:space-between; margin-bottom:16px; }
  .ma-search{ flex:1; min-width:220px; max-width:340px; }
  .ma-row-actions{ display:flex; flex-wrap:wrap; gap:6px; }
  @media (max-width:640px){
    .ma-card{ padding:22px 18px; }
    /* 16px, not the usual 15px -- anything smaller makes iOS Safari
       auto-zoom the page on focus, which is exactly the wrong thing to
       happen mid-handoff with a customer standing at the admin's phone. */
    .ma-form .field input, .ma-form .field select, .ma-form .field textarea{ font-size:16px; }
  }

  /* ADMIN BOOKINGS TABLE */
  .table-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); }
  .admin-table{ width:100%; border-collapse:collapse; min-width:1140px; font-size:12.5px; }
  .admin-table th{ text-align:left; font-family:'JetBrains Mono'; font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint); padding:12px 14px; background:var(--bg-2); border-bottom:1px solid var(--line); white-space:nowrap; }
  .admin-table td{ padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--text-dim); }
  .admin-table tbody tr:last-child td{ border-bottom:none; }
  .admin-table tbody tr:hover td{ background:var(--surface); }
  .status-select{ margin-top:6px; display:block; background:var(--surface-2); border:1px solid var(--line-strong); border-radius:8px; padding:6px 8px; font-size:11px; color:var(--text); font-family:inherit; cursor:pointer; }

  /* LIVE TRACKING (WheelsEye car GPS + customer phone location) */
  .tracking-map{ height:420px; border-radius:var(--radius); overflow:hidden; margin-bottom:16px; border:1px solid var(--line-strong); background:var(--panel-2); }
  .tracking-map .search-note{ padding:20px; }
  .tracking-legend{ display:flex; gap:18px; justify-content:center; margin-bottom:20px; font-size:11px; color:var(--text-faint); font-family:'JetBrains Mono'; }
  .tracking-legend span{ display:inline-flex; align-items:center; gap:6px; }
  .tracking-legend i{ width:9px; height:9px; border-radius:50%; display:inline-block; }
  .tracking-banner{ display:none; align-items:center; gap:10px; background:rgba(220,38,38,.16); border:1px solid var(--danger); color:var(--danger); border-radius:14px; padding:14px 18px; margin-bottom:20px; font-weight:600; font-size:13px; animation:trackingBannerPulse 1.8s ease-in-out infinite; }
  @keyframes trackingBannerPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(220,38,38,.35); } 50%{ box-shadow:0 0 0 8px rgba(220,38,38,0); } }

  footer{ text-align:center; padding:60px 24px 40px; color:var(--text-faint); font-size:12px; border-top:1px solid var(--line); margin-top:40px; }
  footer .brand{ justify-content:center; margin-bottom:10px; font-size:16px; }

  /* ---------------- MOBILE ---------------- */
  .nav{ flex-wrap:wrap; row-gap:8px; }

  /* bottom sheet menu -- opened from the tab bar's Account button */
  .sheet-backdrop{ display:none; position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.6); backdrop-filter:blur(3px); }
  .sheet-backdrop.show{ display:block; animation:fadeIn .25s ease; }
  .mobile-menu{ display:flex; flex-direction:column; gap:4px; width:100%; position:fixed; left:0; right:0; bottom:0; z-index:85; background:var(--panel); border-top:1px solid var(--line-strong); border-radius:24px 24px 0 0; padding:10px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow:0 -30px 70px -20px rgba(0,0,0,.7); transform:translateY(110%); transition:transform .35s cubic-bezier(.16,1,.3,1); max-height:80vh; overflow-y:auto; }
  .mobile-menu::before{ content:''; width:36px; height:4px; border-radius:100px; background:var(--line-strong); margin:0 auto 14px; }
  .mobile-menu.open{ transform:translateY(0); }
  .mobile-menu .mm-link{ text-align:left; padding:13px 14px; border-radius:10px; font-size:14.5px; font-weight:600; color:var(--text-dim); transition:.2s; }
  .mobile-menu .mm-link.on, .mobile-menu .mm-link:hover{ background:var(--surface-2); color:var(--text); }
  .mobile-menu .mm-link--cta{ background:var(--gold); color:var(--ink); margin-top:6px; }
  .mobile-menu .mm-link--cta:hover{ color:var(--ink); }

  .unread-dot{ position:absolute; top:2px; right:calc(50% - 16px); width:8px; height:8px; border-radius:50%; background:var(--danger); border:1.5px solid var(--surface); }
  .nav-icon-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; color:var(--text-dim); transition:.2s; }
  .nav-icon-btn:hover{ background:var(--surface-2); color:var(--text); }
  .nav-icon-btn svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; }
  .nav-icon-btn .unread-dot{ top:4px; right:4px; }

  @media (max-width:820px){
    .nav__links{ display:none; }
    .nav__actions{ display:none !important; }
  }
  @media (min-width:821px){
    .mobile-menu, .sheet-backdrop{ display:none !important; }
  }
  @media (max-width:900px){
    .details-grid{ grid-template-columns:1fr; }
  }
  @media (max-width:700px){
    .booking-row{ grid-template-columns:1fr; gap:10px; }
    .booking-row > span:last-child{ flex-wrap:wrap; }
  }
  @media (max-width:640px){
    .wrap{ padding:0 18px; }
    .hero{ padding:60px 18px 46px; }
    .center-stage{ padding:36px 18px; }
    .nav{ padding:14px 18px; }
    .mobile-menu{ padding:10px 14px calc(18px + env(safe-area-inset-bottom)); }
    section.pad{ padding:52px 0; }
  }
  @media (max-width:560px){
    .spec-grid{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:480px){
    .car-grid{ grid-template-columns:1fr; }
    .nav__cta{ padding:9px 15px; font-size:12.5px; }
    .brand{ font-size:18px; }
    .brand__logo{ height:36px; width:36px; }
  }
  @media (max-width:420px){
    .stage-card{ padding:22px; }
    .card{ padding:20px; }
  }
  @media (max-width:380px){
    .pay-options{ grid-template-columns:1fr; }
  }

  /* ======================================================================
     HOME STRUCTURAL REBUILD -- new "db-" prefixed component system for the
     nav, hero, stats bar, carousel, promos, car grid/filter chips, how-it-
     works, trust and FAQ sections. Nothing above this block was renamed --
     every other view (browse, details, login, admin/owner dashboards etc)
     keeps its existing classes and look untouched.
     ====================================================================== */
  .t-hero{ font-size:clamp(32px,5vw,56px); font-weight:900; line-height:1.05; letter-spacing:-1.5px; }
  .t-h1{ font-size:clamp(26px,4vw,42px); font-weight:800; line-height:1.1; letter-spacing:-1px; }
  .t-h2{ font-size:clamp(20px,3vw,32px); font-weight:700; line-height:1.2; letter-spacing:-.5px; }
  .t-h3{ font-size:20px; font-weight:700; line-height:1.3; }
  .t-body-lg{ font-size:17px; font-weight:400; line-height:1.7; }
  .t-body{ font-size:15px; font-weight:400; line-height:1.6; }
  .t-sm{ font-size:13px; font-weight:400; line-height:1.5; }
  .t-xs{ font-size:11px; font-weight:500; line-height:1.4; letter-spacing:.3px; }
  .t-label{ font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
  .db-section{ padding:72px 0; }
  .db-section-sm{ padding:48px 0; }
  .db-container{ max-width:1160px; margin:0 auto; padding:0 24px; }
  .db-section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:28px; flex-wrap:wrap; }
  .db-section-tag{ display:inline-block; padding:4px 12px; background:var(--accent-light); color:var(--accent); border-radius:100px; font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; margin-bottom:6px; }
  .db-link{ font-size:14px; font-weight:600; color:var(--accent); text-decoration:none; white-space:nowrap; }
  .db-link:hover{ text-decoration:underline; }

  /* ---- NAV ---- */
  .db-nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex:1; }
  .db-nav__logo{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .db-nav__location{ display:flex; align-items:center; gap:6px; padding:8px 14px; border:1.5px solid var(--line); border-radius:100px; background:var(--surface-2); cursor:pointer; font-size:14px; font-weight:500; color:var(--text); white-space:nowrap; transition:border-color .15s, background .15s; }
  .db-nav__location:hover{ border-color:var(--accent); background:var(--accent-light); }
  .db-nav__center{ flex:1; display:flex; justify-content:center; }
  .db-nav__actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .db-nav__host-link{ font-size:14px; font-weight:600; color:var(--text); text-decoration:underline; white-space:nowrap; }
  .db-nav__inbox{ position:relative; padding:8px; border-radius:8px; color:var(--text-dim); transition:background .15s, color .15s; }
  .db-nav__inbox:hover{ background:var(--surface-2); color:var(--text); }
  .db-nav__inbox svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; display:block; }
  .db-nav__badge{ position:absolute; top:2px; right:2px; background:var(--danger); color:#fff; font-size:10px; font-weight:700; min-width:16px; height:16px; border-radius:100px; display:flex; align-items:center; justify-content:center; padding:0 4px; }
  .db-nav__user{ position:relative; display:flex; align-items:center; gap:8px; }
  .db-nav__avatar{ width:36px; height:36px; border-radius:50%; background:var(--accent); color:#fff; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
  .db-nav__user-menu{ position:absolute; top:calc(100% + 8px); right:0; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:6px; box-shadow:var(--shadow-lg); min-width:200px; z-index:100; }
  .db-nav__menu-item{ display:block; width:100%; text-align:left; padding:10px 14px; font-size:14px; font-weight:500; color:var(--text); border-radius:8px; transition:background .12s; }
  .db-nav__menu-item:hover{ background:var(--surface-2); }
  .db-nav__menu-item--switch{ color:var(--accent); font-weight:600; }
  .db-nav__menu-item--danger{ color:var(--danger); }
  .db-nav__menu-divider{ height:1px; background:var(--line); margin:4px 6px; }
  .db-nav__hamburger{ display:none; flex-direction:column; gap:5px; padding:8px; }
  .db-nav__hamburger span{ width:22px; height:2px; background:var(--text); border-radius:2px; display:block; }
  .db-nav__mobile-drawer{ display:none; padding:12px 24px 20px; border-top:1px solid var(--line); }
  .db-nav__mobile-drawer.open{ display:block; }
  .db-nav__mobile-links a{ display:block; padding:14px 0; font-size:16px; font-weight:500; color:var(--text); border-bottom:1px solid var(--surface-2); cursor:pointer; }
  @media (max-width:820px){
    .db-nav__center{ display:none; }
    .db-nav__hamburger{ display:flex; }
    .db-nav__actions .btn{ display:none; }
    .db-nav__host-link{ display:none; }
  }

  /* ---- ROLE-BASED NAV VISIBILITY ----
     body carries exactly one of state-out/state-guest/state-host/state-admin
     (set by applyNavRoleState(), called at the end of updateAuthNav()).
     Every nav surface (desktop bar+dropdown, mobile hamburger drawer)
     tags its role-specific items with these marker classes instead of
     each surface hand-rolling its own show/hide logic.
     display:inline-flex is used uniformly as the "shown" value: every
     tagged element here is either a flex item of its own parent (so its
     own outer display type doesn't affect layout) or a small icon/text
     button, so one value is safe everywhere without a dedicated line per
     component. */
  .nav-guest-only, .nav-host-only, .nav-auth-only, .nav-loggedout-only, .nav-admin-only{ display:none; }
  body.state-out .nav-loggedout-only{ display:inline-flex; }
  body.state-guest .nav-guest-only{ display:inline-flex; }
  body.state-guest .nav-auth-only{ display:inline-flex; }
  body.state-host .nav-host-only{ display:inline-flex; }
  body.state-host .nav-auth-only{ display:inline-flex; }
  body.state-admin .nav-admin-only{ display:inline-flex; }
  /* Admin can use the whole site (browse, book, inbox, account menu), not
     just the admin panel -- so admin sees the same nav a signed-in guest
     does, plus the Admin dashboard entry. The unmarked Home/Browse links
     already show for every role; nothing extra hides them for admin now. */
  body.state-admin .nav-guest-only{ display:inline-flex; }
  body.state-admin .nav-auth-only{ display:inline-flex; }

  /* "List your car" become-a-host prompts (footer links + app.html's own
     nav/mobile-menu copies) -- hidden specifically for a signed-in guest,
     visible to logged-out visitors (still the marketing entry point to
     become a host) and to hosts/admins. Doesn't need isHost-awareness the
     way the guest/host switch toggle does (applyNavRoleState()) since this
     is purely a "become a host" nudge, not a functional view-switch. */
  body.state-guest .hide-for-guest{ display:none !important; }

  /* ---- HERO ----
     A continuously-scrolling strip of car photos (.db-hero__banner) behind
     a dark overlay, the same real-element marquee technique already used
     for the promo .banner-carousel further down this file (track rendered
     twice back to back, animated exactly -50% via the shared
     @keyframes bannerMarquee so the loop is seamless) -- not a single
     static background-image. background:var(--primary) on .db-hero itself
     is the fallback paint underneath while photos load/if one fails, so
     nothing flashes transparent. Swap which photos appear by editing the
     .db-hero__banner-track img list in the HTML; the overlay's opacities
     were picked so text stays readable against any car photo. */
  .db-hero{ position:relative; overflow:hidden; background:var(--primary); padding:72px 0; min-height:560px; display:flex; align-items:center; }
  .db-hero__banner{ position:absolute; inset:0; z-index:0; overflow:hidden; }
  .db-hero__banner-track{ display:flex; align-items:center; height:100%; width:max-content; animation:bannerMarquee 46s linear infinite; }
  .db-hero__banner-track img{ height:100%; width:340px; object-fit:cover; flex-shrink:0; }
  .db-hero__overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(105deg, rgba(10,15,30,.92) 0%, rgba(10,15,30,.85) 45%, rgba(10,15,30,.65) 100%); }
  .db-hero__gradient{ position:absolute; top:-200px; right:-200px; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle, rgba(37,99,235,.18) 0%, transparent 70%); pointer-events:none; z-index:1; }
  .db-hero__dots{ position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size:28px 28px; pointer-events:none; z-index:1; }
  @media (max-width:640px){ .db-hero__banner-track img{ width:220px; } }
  .db-hero__content{ position:relative; z-index:2; width:100%; }
  .db-hero__text{ max-width:600px; }
  .db-hero__badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:100px; background:rgba(37,99,235,.15); border:1px solid rgba(37,99,235,.3); margin-bottom:20px; font-size:13px; font-weight:600; color:var(--accent-soft); }
  .db-hero__badge-dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; animation:dbPulse 2s infinite; }
  @keyframes dbPulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.5; transform:scale(1.3); } }
  .db-hero__heading{ color:#fff; margin-bottom:18px; }
  .db-hero__heading-accent{ color:var(--accent-soft); }
  .db-hero__sub{ color:rgba(255,255,255,.65); margin-bottom:32px; max-width:460px; }
  /* CTA row replaces the old white search-form card that used to float on
     top of the banner -- picking exact trip dates now happens on the
     Browse Cars page itself (see #tripBanner / renderTripBanner()), where
     it can also drive each car's live price. */
  .db-hero__cta-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
  .db-hero__search-btn{ width:auto; height:50px; padding:0 28px; background:var(--accent); color:#fff; border-radius:10px; font-size:15px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:background .15s, transform .1s; }
  .db-hero__search-btn:hover{ background:var(--accent-hover); }
  .db-hero__search-btn:active{ transform:scale(.99); }
  .db-hero__cta-note{ color:rgba(255,255,255,.55); font-size:13px; max-width:220px; }
  @media (max-width:960px){
    .db-hero{ padding:52px 0; }
  }

  /* ---- STATS BAR ---- */
  .db-stats-bar{ background:var(--surface); border-bottom:1px solid var(--line); padding:20px 0; }
  .db-stats-bar__inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
  .db-stats-bar__item{ display:flex; align-items:center; gap:12px; flex:1; min-width:170px; }
  .db-stats-bar__item svg{ width:20px; height:20px; stroke:var(--accent); fill:none; stroke-width:2; flex-shrink:0; }
  .db-stats-bar__val{ font-size:17px; font-weight:700; color:var(--text); line-height:1.2; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:190px; }
  .db-stats-bar__key{ font-size:12px; color:var(--text-faint); font-weight:500; }
  .db-stats-bar__div{ width:1px; height:36px; background:var(--line); flex-shrink:0; }
  @media (max-width:640px){
    .db-stats-bar__inner{ display:grid; grid-template-columns:1fr 1fr; }
    .db-stats-bar__div{ display:none; }
  }

  /* ---- CAROUSEL (banners) ---- */
  .db-carousel{ position:relative; border-radius:16px; }
  .db-carousel__track{ display:flex; gap:16px; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory; scrollbar-width:none; border-radius:16px; }
  .db-carousel__track::-webkit-scrollbar{ display:none; }
  /* Full-width, one banner in view at a time (not 2-up) -- bigger and more
     attention-grabbing means larger presence, not a wider multi-column
     row. The prev/next buttons and dots already signal there's more than
     one to swipe through. */
  .db-carousel .banner-card{ flex:0 0 100%; border-radius:12px; overflow:hidden; aspect-ratio:16/9; cursor:default; scroll-snap-align:start; }
  .db-carousel .banner-card img{ width:100%; height:100%; object-fit:cover; display:block; }
  .db-carousel__btn{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.95); border:1px solid var(--line); box-shadow:0 2px 8px rgba(0,0,0,.12); display:flex; align-items:center; justify-content:center; z-index:2; transition:background .15s; }
  .db-carousel__btn:hover{ background:#fff; }
  .db-carousel__btn--prev{ left:12px; }
  .db-carousel__btn--next{ right:12px; }
  .db-carousel__dots{ display:flex; justify-content:center; gap:6px; margin-top:14px; }
  .db-carousel__dot{ width:7px; height:7px; border-radius:50%; background:var(--line); cursor:pointer; transition:background .2s, width .2s; }
  .db-carousel__dot.on{ background:var(--accent); width:20px; border-radius:4px; }
  @media (max-width:768px){ .db-carousel .banner-card{ flex:0 0 100%; aspect-ratio:4/3; } }

  /* ---- PROMO STRIP ---- */
  .db-promos__inner{ display:flex; align-items:center; gap:12px; }
  .db-promos__label{ font-size:13px; font-weight:700; color:var(--accent-3); white-space:nowrap; flex-shrink:0; }
  .chip.promo-chip{ display:inline-flex; align-items:center; gap:6px; border:1.5px solid var(--accent); background:var(--surface); color:var(--accent-3); }
  .chip.promo-chip:hover{ background:var(--accent); color:#fff; }

  /* ---- HOME FILTER CHIPS + CAR GRID ---- */
  .db-filter-chips{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin-bottom:24px; padding-bottom:4px; }
  .db-filter-chips::-webkit-scrollbar{ display:none; }
  .db-filter-chip{ padding:9px 18px; border-radius:100px; border:1.5px solid var(--line); background:var(--surface); font-size:14px; font-weight:500; color:var(--text-dim); white-space:nowrap; flex-shrink:0; transition:all .15s; }
  .db-filter-chip:hover{ border-color:var(--accent); color:var(--accent); }
  .db-filter-chip.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .db-car-skeleton{ border-radius:16px; overflow:hidden; background:linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size:200% 100%; animation:dbShimmer 1.5s infinite; height:340px; }
  @keyframes dbShimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

  /* ---- CAR CARD (shared: home featured grid + browse grid) ---- */
  .car-card{ display:flex; flex-direction:column; }
  .car-card__img-wrap{ position:relative; height:175px; background:var(--surface-2); overflow:hidden; flex-shrink:0; background-repeat:no-repeat; background-position:center; background-size:cover; }
  .car-card__img-badges{ position:absolute; top:10px; left:10px; display:flex; gap:6px; flex-wrap:wrap; z-index:2; }
  .car-card__delivery-badge{ padding:4px 10px; border-radius:100px; background:rgba(37,99,235,.9); color:#fff; font-size:11px; font-weight:600; }
  .car-card__price-overlay{ position:absolute; bottom:0; left:0; right:0; padding:26px 12px 10px; background:linear-gradient(to top, rgba(10,15,30,.75), transparent); display:flex; align-items:baseline; gap:6px; }
  .car-card__price-main{ font-size:18px; font-weight:800; color:#fff; line-height:1; }
  .car-card__price-hr{ font-size:12.5px; font-weight:500; color:rgba(255,255,255,.8); }
  .car-card__body{ padding:16px; display:flex; flex-direction:column; gap:9px; flex:1; }
  .car-card__title-row{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
  .car-card__title-row b{ font-size:16px; font-weight:700; color:var(--text); line-height:1.3; }
  .car-card__year{ font-size:12px; color:var(--text-faint); white-space:nowrap; }
  .car-card__rating{ font-size:12.5px; font-weight:700; color:var(--text); white-space:nowrap; display:inline-flex; align-items:center; gap:3px; }
  .car-card__rating svg{ width:12px; height:12px; fill:#F59E0B; stroke:none; flex-shrink:0; }
  .car-card__rating span{ font-weight:500; color:var(--text-faint); }
  .car-card__specs{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .car-card__spec{ display:flex; align-items:center; gap:4px; font-size:12px; color:var(--text-dim); font-weight:500; }
  .car-card__spec svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; }
  .car-card__spec-dot{ color:var(--line-strong); }
  .car-card__location-row{ display:flex; align-items:center; gap:4px; font-size:12px; color:var(--text-faint); }
  .car-card__location-row svg{ width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; flex-shrink:0; }
  .car-card-distance{ margin-left:4px; font-size:11px; font-weight:600; color:var(--accent); padding:2px 8px; background:var(--accent-light); border-radius:100px; }
  .car-card__tags{ display:flex; gap:6px; flex-wrap:wrap; }
  .car-card__tag{ padding:3px 10px; border-radius:100px; font-size:11px; font-weight:600; color:var(--text-dim); background:var(--surface-2); border:1px solid var(--line); }
  .car-card__tag--gps{ color:var(--success); background:var(--success-bg); border-color:#A7F3D0; }
  .car-card__book{ width:100%; height:42px; margin-top:2px; background:var(--accent); color:#fff; border-radius:8px; font-size:14px; font-weight:700; transition:background .15s, transform .1s; }
  .car-card__book:hover{ background:var(--accent-hover); }
  .car-card.skeleton .car-card__img-wrap{ background:var(--panel); }

  /* ---- APP DOWNLOAD CARD ---- */
  .db-app__card{ background:linear-gradient(135deg, var(--primary) 0%, var(--primary-mid) 100%); border-radius:24px; padding:56px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; overflow:hidden; position:relative; }
  .db-app__card::before{ content:''; position:absolute; top:-100px; right:120px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle, rgba(37,99,235,.15), transparent 70%); pointer-events:none; }
  .db-app__btns{ display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }
  .db-store-btn{ display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:12px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); color:#fff; cursor:default; position:relative; }
  .db-store-btn > div{ display:flex; flex-direction:column; gap:1px; }
  .db-store-btn__soon{ position:absolute; top:-8px; right:-8px; background:var(--accent); color:#fff; font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:100px; }
  .db-app__visual{ display:flex; justify-content:center; align-items:center; }
  .db-app__phone{ width:190px; height:360px; border-radius:32px; background:#fff; padding:12px; box-shadow:var(--sh-xl), inset 0 0 0 2px rgba(255,255,255,.1); transform:rotate(4deg); }
  .db-app__phone-screen{ width:100%; height:100%; border-radius:22px; background:var(--bg); overflow:hidden; }
  .db-app__phone-content{ padding:20px; }
  @media (max-width:768px){ .db-app__card{ grid-template-columns:1fr; padding:36px 24px; } .db-app__visual{ display:none; } }

  /* ---- FOOTER ---- */
  .db-footer{ background:var(--primary); color:rgba(255,255,255,.6); padding:56px 0 0; }
  .db-footer__top{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.08); }
  .db-footer__logo{ display:flex; align-items:center; gap:8px; font-size:19px; font-weight:800; color:#fff; margin-bottom:14px; }
  .db-footer__logo img{ height:26px; width:26px; border-radius:8px; }
  .db-footer__tagline{ font-size:13.5px; line-height:1.7; margin-bottom:18px; max-width:280px; }
  .db-footer__contact{ display:flex; flex-direction:column; gap:6px; }
  .db-footer__contact a{ font-size:13.5px; color:rgba(255,255,255,.7); font-weight:500; transition:color .15s; }
  .db-footer__contact a:hover{ color:#fff; }
  .db-footer__col{ display:flex; flex-direction:column; gap:11px; }
  .db-footer__col-title{ font-size:12.5px; font-weight:700; color:#fff; letter-spacing:.5px; text-transform:uppercase; margin-bottom:2px; }
  .db-footer__col a, .db-footer__col button{ font-size:13.5px; color:rgba(255,255,255,.6); text-align:left; cursor:pointer; transition:color .15s; }
  .db-footer__col a:hover, .db-footer__col button:hover{ color:#fff; }
  .db-footer__bottom{ display:flex; justify-content:space-between; padding:18px 0; font-size:12.5px; flex-wrap:wrap; gap:8px; }
  @media (max-width:768px){ .db-footer__top{ grid-template-columns:1fr 1fr; gap:28px; } .db-footer__brand{ grid-column:1/-1; } }
  @media (max-width:480px){ .db-footer__top{ grid-template-columns:1fr; } }

  /* ======================================================================
     GLOBAL MOBILE POLISH -- this is now the primary platform, so these
     rules apply on top of (not instead of) every section's own existing
     @media rules above. Real class names throughout (.car-grid/.car-card,
     .browse-filter-btn, .chat-input-bar, etc.), not the db-* placeholder
     names a from-scratch spec would use, since this file already has a
     working component system for all of these.
     ====================================================================== */
  @media (max-width:768px){
    /* iOS Safari zooms the whole page on focusing any input under 16px --
       every text input/select in this file, tag as .field or otherwise. */
    input, select, textarea{ font-size:16px !important; }

    /* Tap targets: 44px minimum (WCAG 2.5.5 / iOS HIG), applied to the
       interactive classes that are still smaller than that on a phone. */
    .chip, .filter-radio, .filter-check, .db-filter-chip, .mm-link{ min-height:44px; }

    .db-hero{ min-height:auto; padding:48px 0 40px; display:block; }
    .db-hero__search-btn{ height:52px; font-size:16px; width:100%; }
    .db-hero__cta-note{ max-width:none; }

    /* Filter drawer's own trigger becomes a floating round FAB (bottom-
       right) instead of an inline toolbar pill -- same button/onclick/
       badge, only its position and shape change. */
    .browse-filter-btn{
      position:fixed; bottom:calc(16px + env(safe-area-inset-bottom)); right:16px;
      z-index:50; box-shadow:var(--shadow-lg);
    }

    .toast{ bottom:calc(16px + env(safe-area-inset-bottom)); }
  }

  @media (max-width:400px){
    .db-hero__heading{ font-size:28px; }
  }