/* Motortune — dark/red marketing site
   Brand tint mirrored from apps/app/src/theme/tokens.ts (light tint #E32636) */

/* Self-hosted Inter (latin variable subset). Replaces the render-blocking,
   third-party Google Fonts request — one 48 KB woff2 covers every weight we
   use (400–800) and keeps font data off Google's servers, in line with the
   no-third-party-tracking promise on the site. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/inter-latin.woff2) format('woff2');
}

:root {
  --bg: #000000;
  --bg-elev: #0d0d0f;
  --surface: #131316;
  --surface-2: #1c1c1e;
  --surface-muted: #2c2c2e;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text: #ffffff;
  --text-2: rgba(235, 235, 245, 0.72);
  --text-3: rgba(235, 235, 245, 0.48);
  --tint: #E32636;
  --tint-2: #c81e2d;
  /* #E32636 is 4.4:1 on black — fine for fills and large type; small text
     in the brand colour uses this lifted shade (6.5:1). */
  --tint-ink: #ff4d5a;
  --tint-soft: rgba(227, 38, 54, 0.18);
  --tint-glow: rgba(227, 38, 54, 0.35);
  --max: 1180px;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --shadow-soft: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 0 1px rgba(227, 38, 54, 0.35),
    0 30px 80px -20px rgba(227, 38, 54, 0.35);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* { box-sizing: border-box; }
/* iOS-style continuous (squircle) corners everywhere a border-radius is used.
   Progressive enhancement: browsers without corner-shape fall back to round. */
*, *::before, *::after { corner-shape: squircle; }
html, body { margin: 0; padding: 0; }
html {
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text',
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(227, 38, 54, 0.10), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(227, 38, 54, 0.06), transparent 60%),
    var(--bg);
  min-height: 100dvh;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--tint); color: #fff; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--tint); color: #fff; padding: 8px 12px;
  font-weight: 600; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* ─────────────────── NAV ─────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: 14px 24px;
  max-width: var(--max); margin: 0 auto;
}
/* Frost lives on the ::before, NOT on .nav itself — a backdrop-filter on .nav
   would make it a backdrop root and blank out the backdrop for the menu sheet
   and scrim nested inside it. */
.nav::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  border-bottom: 1px solid var(--border);
  z-index: -1;
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  -webkit-mask: linear-gradient(#000 70%, transparent);
          mask: linear-gradient(#000 70%, transparent);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 17px; letter-spacing: -0.02em;
}
.brand img { width: 36px; height: 36px; border-radius: 8px; }
.nav nav {
  display: flex; gap: 24px; margin-left: auto;
  font-size: 14px; color: var(--text-2);
}
.nav nav a:hover { color: var(--text); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 999px;
  background: var(--tint); color: #fff;
  font-weight: 600; font-size: 14px;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.nav-cta:hover { background: var(--tint-2); transform: translateY(-1px); }
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--border-strong); border-radius: 14px;
  background: rgba(22, 22, 24, 0.55);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  color: var(--text); cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.nav-toggle:hover { border-color: var(--text-3); }
.nav-toggle:active { transform: scale(0.94); }
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }

@media (max-width: 720px) {
  .nav { padding: 12px 16px; gap: 12px; }
  .nav-cta { margin-left: auto; }
  .nav-toggle { display: inline-flex; }

  /* Only Safari/WebKit on iOS & iPadOS paints the Apple Smart App Banner at the
     very top (from the apple-itunes-app meta), which would double up with our
     bar. So ONLY there do we take the bar out of flow, hide its chrome at the
     top, and fade it in on scroll. Every other mobile browser keeps the normal
     in-flow sticky bar — always visible, no hero overlap. The burger shows
     regardless. (-webkit-touch-callout is an iOS-WebKit-only property.) */
  @supports (-webkit-touch-callout: none) {
    .nav {
      position: fixed; top: 0; left: 0; right: 0;
      max-width: none; margin: 0;
    }
    .nav::before { opacity: 0; transition: opacity 0.25s var(--ease); }
    .nav.is-scrolled::before { opacity: 1; }
    .nav .brand, .nav-cta {
      opacity: 0; transform: translateY(-6px); pointer-events: none;
      transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
    }
    .nav.is-scrolled .brand, .nav.is-scrolled .nav-cta {
      opacity: 1; transform: none; pointer-events: auto;
    }
  }

  /* Dimmed, blurred full-screen backdrop behind the open sheet. Tapping it
     closes the menu (handled in site.js). */
  .nav::after {
    content: ''; position: fixed; inset: 0; z-index: -1;
    background: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s var(--ease);
  }
  .nav.menu-open::after { opacity: 1; pointer-events: auto; }

  /* Menu sheet: a large floating squircle card — roomy tap targets, no
     dividers, scale-and-fade in with a staggered item reveal. */
  .nav nav {
    display: flex; flex-direction: column; gap: 6px;
    position: fixed; top: 70px; left: 12px; right: 12px;
    margin: 0; padding: 14px;
    background: rgba(22, 22, 24, 0.72);
    backdrop-filter: saturate(170%) blur(32px);
    -webkit-backdrop-filter: saturate(170%) blur(32px);
    border: 1px solid var(--border-strong);
    border-radius: 32px;
    box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.8),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
    font-size: 19px;
    transform-origin: top right;
    visibility: hidden; opacity: 0; transform: scale(0.95) translateY(-10px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  }
  .nav.menu-open nav { visibility: visible; opacity: 1; transform: none; }
  .nav nav a {
    padding: 18px 20px; border-radius: 18px;
    color: var(--text); font-weight: 600; line-height: 1;
    opacity: 0; transform: translateY(8px);
    transition: opacity 0.32s var(--ease), transform 0.32s var(--ease),
      background 0.15s var(--ease);
  }
  .nav nav a:active { background: rgba(255, 255, 255, 0.08); }
  .nav.menu-open nav a { opacity: 1; transform: none; }
  .nav.menu-open nav a:nth-child(1) { transition-delay: 0.05s; }
  .nav.menu-open nav a:nth-child(2) { transition-delay: 0.10s; }
  .nav.menu-open nav a:nth-child(3) { transition-delay: 0.15s; }
  .nav.menu-open nav a:nth-child(4) { transition-delay: 0.20s; }
  .nav.menu-open .icon-menu { display: none; }
  .nav.menu-open .icon-close { display: inline; }
}

/* ─────────────────── HERO ─────────────────── */
.hero {
  position: relative;
  padding: 56px 24px 88px;
  max-width: var(--max);
  margin: 0 auto;
  overflow: hidden;
}
.hero-glow {
  position: absolute;
  top: -180px; right: -200px;
  width: 720px; height: 720px;
  background: radial-gradient(closest-side, rgba(227, 38, 54, 0.30), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  z-index: 1;
}
.eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tint-ink);
  padding: 6px 10px;
  border: 1px solid var(--tint-soft);
  border-radius: 999px;
  background: rgba(227, 38, 54, 0.06);
}
.hero h1 {
  margin: 20px 0 18px;
  font-size: clamp(40px, 6.5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 800;
}
.grad {
  background: linear-gradient(95deg, #ff8f85 0%, #ff4757 45%, var(--tint) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lede {
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--text-2);
  max-width: 540px;
  margin: 0 0 28px;
}
.cta-row {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center;
}
.cta-row-center { justify-content: center; }
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  border-radius: 14px;
  font-weight: 600; font-size: 15px;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease),
    border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: linear-gradient(180deg, #1a1a1c 0%, #0a0a0b 100%);
  border-color: var(--border-strong);
  color: var(--text);
  padding: 12px 22px;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.btn-primary:hover {
  border-color: var(--tint);
  box-shadow: var(--shadow-glow);
}
.btn-primary span {
  display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1;
}
.btn-primary small {
  font-size: 11px; color: var(--text-3); font-weight: 500;
}
.btn-primary strong {
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
}
.btn-ghost {
  background: transparent;
  color: var(--text-2);
  padding: 12px 16px;
}
.btn-ghost:hover { color: var(--text); }

/* Apple App Store badge — official artwork, do not modify the SVG.
   Per Apple's marketing guidelines: maintain aspect ratio, keep clear space,
   minimum height 40px. */
.app-store-badge {
  display: inline-flex;
  line-height: 0;
  border-radius: 8px;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.app-store-badge img {
  display: block;
  height: 54px;
  width: auto;
}
.app-store-badge-lg img { height: 60px; }
.app-store-badge:hover {
  transform: translateY(-1px);
  opacity: 0.92;
}
.app-store-badge:focus-visible {
  outline: 2px solid var(--tint);
  outline-offset: 4px;
}

.hero-meta {
  list-style: none; padding: 0;
  margin: 32px 0 0;
  display: flex; flex-wrap: wrap; gap: 22px;
  font-size: 13px; color: var(--text-3);
}
.hero-meta li {
  display: inline-flex; align-items: center; gap: 8px;
}
.dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--tint);
  box-shadow: 0 0 12px var(--tint-glow);
}

.hero-art {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: linear-gradient(180deg, #161618 0%, #0a0a0b 100%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}
.hero-art img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.05);
}
.hero-art-glow {
  position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 50% 100%, rgba(227, 38, 54, 0.40), transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .hero-art { aspect-ratio: 3 / 4; max-width: 460px; margin: 0 auto; }
  .hero { padding: 32px 16px 56px; }
  .hero-glow { width: 460px; height: 460px; top: -240px; right: -160px; opacity: 0.7; }
}

/* ─────────────────── PULSE DIVIDER ─────────────────── */
.pulse-band {
  position: relative;
  width: 100%;
  height: 80px;
  margin: 8px 0 -8px;
  overflow: hidden;
  pointer-events: none;
}
.pulse-band svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.pulse-band::before,
.pulse-band::after {
  content: '';
  position: absolute;
  top: 50%;
  height: 1px;
  width: 50%;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(227, 38, 54, 0.10));
  pointer-events: none;
}
.pulse-band::after {
  left: auto; right: 0;
  background: linear-gradient(270deg, transparent, rgba(227, 38, 54, 0.10));
}
.pulse-band::before { left: 0; }
@media (max-width: 720px) {
  .pulse-band { height: 56px; }
}

/* ─────────────────── SECTIONS ─────────────────── */
.section {
  position: relative;
  padding: 96px 24px;
  max-width: var(--max);
  margin: 0 auto;
}
.section-alt {
  position: relative;
  isolation: isolate;
}
.section-alt::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background:
    linear-gradient(180deg, transparent, rgba(227, 38, 54, 0.04) 50%, transparent),
    radial-gradient(800px 300px at 50% 0%, rgba(227, 38, 54, 0.08), transparent 60%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  pointer-events: none;
}

.section-head {
  max-width: 720px; margin: 0 0 56px;
}
.section-head h2 {
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -0.03em; line-height: 1.05;
  margin: 16px 0 16px;
  font-weight: 800;
}
.section-head .muted { color: var(--text-3); }
.section-lede {
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--text-2);
  margin: 0;
  max-width: 620px;
}
.section-head .btn { margin-top: 22px; }
.inline-link {
  color: var(--tint-ink);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s var(--ease);
}
.inline-link:hover { border-bottom-color: var(--tint-ink); }

@media (max-width: 720px) {
  .section { padding: 64px 16px; }
  .section-head { margin-bottom: 36px; }
}

/* ─────────────────── FEATURE GRID ─────────────────── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.feature {
  position: relative;
  padding: 26px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.005));
  border: 1px solid var(--border);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease),
    background 0.3s var(--ease);
  overflow: hidden;
}
.feature::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 0% 0%, rgba(227, 38, 54, 0.10), transparent 50%);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}
.feature:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
}
.feature:hover::before { opacity: 1; }
.feature-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--tint-soft);
  color: var(--tint-ink);
  margin-bottom: 18px;
  border: 1px solid rgba(227, 38, 54, 0.22);
}
.feature-icon svg { width: 22px; height: 22px; }
.feature h3 {
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.feature p {
  font-size: 14px; color: var(--text-2);
  margin: 0;
  line-height: 1.55;
}

@media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .feature-grid { grid-template-columns: 1fr; } }

/* ─────────────────── COMPATIBILITY ─────────────────── */
.compat-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 20px;
}
.compat-card {
  padding: 32px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));
  border: 1px solid var(--border);
}
.compat-card h3 {
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.compat-card p {
  color: var(--text-2); margin: 0 0 20px;
  font-size: 15px;
}
.compat-card .compat-sub { margin-bottom: 24px; }
.compat-deep {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(227, 38, 54, 0.08), transparent 50%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));
  border-color: rgba(227, 38, 54, 0.18);
}
.compat-series { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.series-pill {
  display: inline-flex; align-items: center;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-2); font-size: 13px; font-weight: 600;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.series-pill:hover { color: #fff; background: var(--tint); border-color: var(--tint); }
.adapter-note {
  margin: 28px 0 0;
  padding: 20px 24px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
  font-size: 14px; color: var(--text-2);
}
.adapter-note strong { color: var(--text); }

@media (max-width: 800px) {
  .compat-grid { grid-template-columns: 1fr; }
}

/* ─────────────────── PRICING ─────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 20px;
  margin-top: 12px;
}
.price-card {
  padding: 32px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));
  border: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.price-card-pro {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(227, 38, 54, 0.10), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.005));
  border-color: rgba(227, 38, 54, 0.28);
  box-shadow: 0 1px 0 rgba(227, 38, 54, 0.12) inset;
}
.price-card-head {
  border-bottom: 1px solid var(--border);
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.price-card-head h3 {
  font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--text);
}
.price-card-amount {
  font-size: 36px; font-weight: 800; letter-spacing: -0.03em;
  margin: 0 0 6px;
  color: var(--text);
}
.price-card-amount .price-card-once {
  font-size: 14px; font-weight: 500; letter-spacing: 0;
  color: var(--text-2);
  margin-left: 8px;
}
.price-card-tag { color: var(--text-2); margin: 0; font-size: 14px; }
.price-card-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 10px; align-content: start;
  font-size: 14.5px;
  color: var(--text-2);
  flex: 1;
}
.price-card-list li {
  position: relative; padding-left: 22px;
}
.price-card-list li::before {
  content: '';
  position: absolute; left: 0; top: 8px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(227, 38, 54, 0.5);
}
.price-card-pro .price-card-list li::before { background: var(--tint); }
.price-card-list li strong { color: var(--text); font-weight: 600; }
.price-card-foot {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px dashed var(--border);
  font-size: 13px; color: var(--text-3);
}

@media (max-width: 800px) {
  .pricing-grid { grid-template-columns: 1fr; }
}
/* The next pack: an ask, under the pricing cards. */
.pack-next {
  margin-top: 20px;
  padding: 22px 26px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.pack-next h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.pack-next p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-2); max-width: 60ch; }
.pack-next .btn { flex: none; }

/* ─────────────────── SPLIT (privacy/demo) ─────────────────── */
.split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.split-card {
  padding: 36px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));
  border: 1px solid var(--border);
}
.split-card h2 {
  font-size: 28px; font-weight: 800; letter-spacing: -0.025em;
  margin: 14px 0 16px;
}
.split-card p { color: var(--text-2); margin: 0 0 12px; }
.split-card .muted { color: var(--text-3); }
.split-accent {
  background:
    radial-gradient(100% 70% at 0% 0%, rgba(227, 38, 54, 0.10), transparent 50%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));
  border-color: rgba(227, 38, 54, 0.18);
}
.bullets {
  list-style: none; padding: 0; margin: 16px 0 0;
  display: flex; flex-direction: column; gap: 10px;
}
.bullets li {
  position: relative; padding-left: 24px;
  color: var(--text-2); font-size: 14px;
}
.bullets li::before {
  content: '';
  position: absolute; left: 0; top: 8px;
  width: 12px; height: 6px;
  border-left: 2px solid var(--tint);
  border-bottom: 2px solid var(--tint);
  transform: rotate(-45deg);
}

@media (max-width: 800px) { .split { grid-template-columns: 1fr; } }

/* ─────────────────── FAQ ─────────────────── */
.faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: rgba(255,255,255,0.02); padding: 0 22px;
  transition: border-color .15s var(--ease);
}
.faq-item[open] { border-color: var(--border-strong); }
.faq-item summary {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; padding: 20px 0;
  font-weight: 600; font-size: 16px; color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; color: var(--text-3); font-size: 24px; font-weight: 400;
  line-height: 1; flex: none; transition: transform .2s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); color: var(--tint-ink); }
.faq-item p { color: var(--text-2); font-size: 15px; line-height: 1.65; margin: 0 0 20px; }
.faq-item a { color: var(--tint-ink); }

/* ─────────────────── CTA ─────────────────── */
.cta-section {
  text-align: center;
  padding: 96px 24px 120px;
}
.cta-section h2 {
  font-size: clamp(34px, 5vw, 56px);
  letter-spacing: -0.035em;
  margin: 0 0 16px;
  font-weight: 800;
}
.cta-section .section-lede {
  margin: 0 auto 32px;
}

/* ─────────────────── FOOTER ─────────────────── */
.footer {
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.7);
  padding: 48px 24px;
}
.footer-inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; gap: 18px;
}
.footer-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700;
}
.footer-brand img { border-radius: 6px; }
.footer-links {
  display: flex; flex-wrap: wrap; gap: 22px;
  font-size: 14px; color: var(--text-2);
}
.footer-links a:hover { color: var(--text); }
.footer-disclaimer {
  font-size: 12px; color: var(--text-3);
  max-width: 720px; line-height: 1.55;
  margin: 0;
}
.footer-copy { font-size: 12px; color: var(--text-3); margin: 0; }
.footer-made { font-size: 12px; color: var(--text-3); margin: 0 0 4px; }
.footer-made a { color: var(--tint-ink); text-decoration: none; }
.footer-made a:hover { text-decoration: underline; }

/* ─────────────────── CAR DETAIL PAGE ─────────────────── */
/* Base .doc container (the static doc pages define their own inline; car
   detail pages rely on this one from the shared stylesheet). */
.doc { max-width: 920px; margin: 0 auto; padding: 56px 24px 96px; }
.carpage { max-width: 920px; }
.carpage .crumb { font-size: 13px; color: var(--text-3); margin: 0 0 18px; }
.carpage .crumb a { color: var(--tint-ink); }
.carpage h1 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.03em; font-weight: 800; margin: 0 0 6px; }
.carpage .chassis-line { color: var(--text-2); font-size: 15px; margin: 0 0 20px; }

/* Hero: info + photo in a contained card. The photo bleeds to the top, right
 * and bottom edges of the card; the card's own overflow + radius round only the
 * right corners, leaving the inner (left) edge square against the content. */
.carhero {
  display: grid; grid-template-columns: 1fr minmax(260px, 380px); gap: 28px;
  align-items: stretch; padding: 24px; margin-bottom: 22px; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
}
.carhero-info { min-width: 0; align-self: center; }
.carhero-info h1 { margin-top: 0; }
.carhero-art { margin: -24px -24px -24px 0; position: relative; }
.carhero-art img {
  display: block; width: 100%; height: 100%; min-height: 220px;
  object-fit: cover; background: var(--surface);
}
.carhero-art-note {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0; padding: 22px 14px 2px;
  font-size: 9px; line-height: 1.35; text-align: right;
  color: rgba(255, 255, 255, 0.5);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  pointer-events: none;
}
@media (max-width: 760px) {
  .carhero { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
  .carhero-art { order: -1; margin: -18px -18px 0; }
  .carhero-art img { min-height: 180px; }
}

/* Two-column panels for ECUs + features */
.carpanels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 4px; align-items: start; }
@media (max-width: 760px) { .carpanels { grid-template-columns: 1fr; } }
.panel {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: rgba(255,255,255,0.02); padding: 20px 22px;
}
.panel h2 { margin-top: 0; }

/* Per-ECU coding examples */
.ecu-list-detail li { flex-wrap: wrap; align-items: baseline; }
.ecu-name { color: var(--text); }
.ecu-examples { flex-basis: 100%; margin: 2px 0 0 16px; color: var(--text-3); font-size: 12.5px; line-height: 1.5; }
.carpage h2 { font-size: 18px; letter-spacing: -0.02em; margin: 32px 0 8px; }
.carpage h3 { font-size: 15px; margin: 0 0 6px; }
.carpage .sub { color: var(--text-3); font-size: 13.5px; line-height: 1.6; margin: 0 0 12px; max-width: 640px; }
.carpage .coding-note { margin-top: 12px; }
.carpage .models { color: var(--text-2); font-size: 14px; line-height: 1.6; margin: 0 0 18px; }
.carpage .models strong { color: var(--text-3); font-weight: 600; }
.carpage .models a { color: var(--tint-ink); }
.carpage .coding-lock { border: 1px solid rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.09); border-radius: 12px; padding: 14px 16px; margin: 20px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.carpage .coding-lock strong { color: var(--text); }
.feature-caveat { font-size: 13px; line-height: 1.55; color: var(--text-3); margin: 10px 0 0; }
.feature-caveat a { color: inherit; text-decoration: underline; }
.lookup-note { font-size: 13.5px; line-height: 1.6; color: var(--text-2); border: 1px solid rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.09); border-radius: 12px; padding: 12px 16px; margin: 14px 0 22px; max-width: 900px; }
.carpage .car-note { font-style: italic; color: var(--text-3); font-size: 13.5px; line-height: 1.6; margin: 22px 0 0; }
.carpage .smallprint { font-size: 12px; color: var(--text-3); line-height: 1.6; margin: 28px 0 0; border-top: 1px solid var(--border); padding-top: 16px; }
.carpage .lede { font-size: 16px; line-height: 1.65; color: var(--text-2); margin: 0 0 22px; max-width: 720px; }
.car-faq { margin: 36px 0 0; }
.car-faq .faq { margin: 14px 0 0; max-width: none; }

.spec-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin: 8px 0 4px;
}
.spec {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; background: rgba(255,255,255,0.02);
  display: flex; flex-direction: column; gap: 4px;
}
.spec-k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.spec-v { font-size: 15px; font-weight: 700; color: var(--text); }

/* Shared list styles — car detail + lookup index */
.ecu-list, .feat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ecu-list li { font-size: 14.5px; color: var(--text-2); display: flex; align-items: center; gap: 10px; }
.ecu-list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--tint); flex: none; }
.ecu-code-tag { margin-left: auto; font-size: 10.5px; font-weight: 700; color: #4ade80; border: 1px solid rgba(74,222,128,.3); border-radius: 999px; padding: 1px 8px; letter-spacing: .03em; }
.feat-list li { font-size: 14.5px; color: var(--text-2); display: flex; align-items: center; gap: 10px; }
.feat-list li .chk { color: #4ade80; flex: none; width: 16px; height: 16px; }
.feat-list li .pro { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--tint-ink); border: 1px solid var(--tint-soft); border-radius: 999px; padding: 1px 8px; letter-spacing: .03em; }

.tag-code-full { color: #4ade80; }
.tag-code-limited { color: #fbbf24; }
.tag-code-none { color: var(--text-3); }
.tag-warn { color: #f87171; font-weight: 700; }

.adapter-card, .cta-card {
  margin: 22px 0 0; padding: 18px 20px; border: 1px solid var(--border);
  border-radius: var(--radius); background: rgba(255,255,255,0.02);
}
.adapter-card p { color: var(--text-2); font-size: 14px; line-height: 1.6; margin: 0; }
.adapter-card .sub { margin: 10px 0 0; }
.cta-card { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: space-between; border-color: var(--border-strong); }
.cta-card p { color: var(--text); font-size: 14.5px; line-height: 1.55; margin: 0; flex: 1 1 320px; }

/* Car page: what the pack unlocks on this model. */
.pack-pill {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 4px 11px;
  border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: var(--tint); background: rgba(227, 38, 54, 0.10); border: 1px solid rgba(227, 38, 54, 0.28);
  text-decoration: none;
}
.pack-pill::before { content: '✦'; font-size: 11px; }
.pack-pill:hover { background: rgba(227, 38, 54, 0.16); }
.pack-card {
  margin: 22px 0 0; padding: 24px;
  border-radius: var(--radius);
  border: 1px solid rgba(227, 38, 54, 0.28);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(227, 38, 54, 0.10), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.005));
  scroll-margin-top: 90px;
}
.pack-card-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin-bottom: 18px; }
.pack-card-eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tint); }
.pack-card h2 { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
.pack-card-price { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.pack-card-price span { font-size: 13px; font-weight: 500; color: var(--text-2); margin-left: 6px; letter-spacing: 0; }
.pack-figs { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.pack-figs li { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); display: flex; flex-direction: column; gap: 2px; }
.pack-figs strong { font-size: 20px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.pack-figs span { font-size: 13px; color: var(--text-2); }
.pack-card-note { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: var(--text-2); }

/* No per-model photos for cars: the hero card is info-only. */
.carhero-noart { grid-template-columns: 1fr; }

/* Control units grouped by category, each tagged with what reaches it. */
.unit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.unit-cat { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); font-weight: 700; margin: 0 0 6px; }
.unit-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.unit-group li { font-size: 14px; color: var(--text-2); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.unit-group li .ecu-name { margin-right: auto; }
.unit-group .ecu-code-tag { margin-left: 0; }
.ecu-code-tag.tag-act { color: #93c5fd; border-color: rgba(147,197,253,.3); }
.bus { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; border-radius: 999px; padding: 1px 8px; border: 1px solid var(--border-strong); color: var(--text-3); white-space: nowrap; }
.bus-obd { color: #4ade80; border-color: rgba(74,222,128,.3); }
.bus-ms-can { color: #fbbf24; border-color: rgba(251,191,36,.3); }
.bus-vlinker-ms { color: #c4b5fd; border-color: rgba(196,181,253,.3); }
.bus-cable, .bus-pre-obd { color: var(--text-3); border-style: dashed; }
.carpage .sub .bus { vertical-align: 1px; }

/* Pre-launch stand-in for the App Store badge. */
.store-soon {
  display: inline-flex; align-items: center; gap: 10px;
  height: 54px; padding: 0 20px; border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, #1a1a1c 0%, #0a0a0b 100%);
  color: var(--text); font-weight: 600; font-size: 15px; white-space: nowrap;
}
.store-soon::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--tint); box-shadow: 0 0 12px var(--tint-glow);
}

/* ─────────────────── REDUCED MOTION ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- In-app screenshots ---------- */
.screens {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(170px, 1fr);
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px 2px 18px;
  scrollbar-width: thin;
}
.screen {
  margin: 0;
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 12px;
}
.screen-frame {
  border-radius: 34px;
  padding: 7px;
  background: linear-gradient(160deg, #2a2a2e, #0c0c0e);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.screen-frame img {
  display: block; width: 100%; height: auto;
  border-radius: 28px;
  aspect-ratio: 402 / 874;
  object-fit: cover;
  background: #000;
}
.screen figcaption {
  font-size: 14px; color: var(--text-2); line-height: 1.4;
}
.screen figcaption strong { display: block; color: var(--text); font-size: 15px; margin-bottom: 2px; }
@media (max-width: 720px) {
  .screens { grid-auto-columns: 72%; }
}