/* ============================================================
   DealersGear — consolidated stylesheet
   Build: per-page CSS merged into a single style.css.
   Strategy:
     1. Shared modules (tokens, base, nav, footer) appear once.
     2. Page-specific CSS is wrapped under body.page-<slug>
        using CSS nesting, so selectors from one page cannot
        affect another.
     3. @keyframes are hoisted to global scope (nesting spec
        does not permit them inside a nested rule).
   Modify a single page by editing its body.page-<slug> block.
   ============================================================ */
/* tokens.css */

/* ============================================
   DEALERSGEAR DESIGN TOKENS
   ============================================
   Single source of truth for colors, type, spacing,
   motion, breakpoints. Every other CSS file imports
   this. The Laravel/Next.js dev should treat these
   tokens as the binding contract — never override.

   PALETTE STRATEGY (Phase 8, light-default):
   - Cream/paper surfaces are the BASELINE
   - Dark navy is reserved for spectacle MOMENTS:
       hero, ops view, build engine, schema deep-dive,
       audit funnel intensity moments, final CTA
   - Brand color (teal, coral, purple) has two
     variants: bright (for dark sections) and deep
     (for cream sections). Always use the variant
     that matches the section background.
   ============================================ */

:root {
  /* ============================================
     SURFACES — light-default baseline
     ============================================ */
  --paper: #F3F3F3;
  /* Primary page background. Warm off-white. */
  --paper-deep: #f0f0f0;
  /* Slightly deeper, for raised surfaces. */
  --paper-card: #FFFFFF;
  /* Card / panel within light sections. */
  --paper-recess: #EAE3D4;
  /* Recessed surfaces (mockups, code blocks). */
  --paper-line: #DDDDDD;
  /* Subtle hairlines on cream. */
  --paper-line-soft: #e6e6e6;
  /* Even subtler dividers. */

  /* ============================================
     SURFACES — dark moments
     Use for: Hero (when in spectacle mode),
     Operations View, Build Engine, Schema deep
     dive, Audit funnel, Final CTA.
     ============================================ */
  --navy-900: #06090F;
  --navy-800: #0B1320;
  --navy-700: #11192A;
  --navy-600: #1A2540;

  /* ============================================
     INK — text colors
     ============================================ */
  /* On cream/paper */
  --ink-100: #14110E;
  /* Primary text. Near-black, warm undertone. */
  --ink-90: #2E2B26;
  /* Secondary. */
  --ink-70: #5F5A52;
  /* Muted body. */
  --ink-50: #6A645C;
  /* Captions / labels / metadata. Darkened for WCAG AA (4.5:1) on light surfaces. */
  --ink-30: #B6AFA3;
  /* Hairline / dim decorative. */

  /* On navy/dark surfaces */
  --d-ink-100: #FFFFFF;
  --d-ink-90: #E8ECF3;
  --d-ink-70: #B7BFD0;
  --d-ink-50: #7E8AA1;
  --d-ink-30: #4A5470;

  /* ============================================
     BRAND — teal (operational, "always on")
     ============================================ */
  --teal: #3ECFB2;
  /* Bright. Use on dark surfaces. */
  --teal-bright: #5FE8C8;
  /* Brighter accent on dark. */
  --teal-dim: #2DA88E;
  --teal-deep: #1F8A75;
  /* Deep teal. Use on cream surfaces. */
  --teal-deep-bg: rgba(31, 138, 117, 0.08);
  --teal-deep-border: rgba(31, 138, 117, 0.22);
  --teal-glow: rgba(62, 207, 178, 0.12);

  /* ============================================
     BRAND — coral (energy, calls-to-action)
     ============================================ */
  --coral: #E8502A;
  /* Bright. Use on dark surfaces. */
  --coral-bright: #FF6A45;
  --coral-dim: #E8502A;
  --coral-deep: #E8502A;
  /* Deep coral. Use on cream surfaces. */
  --coral-text: #A83A17;
  /* Accessible coral for TEXT on light surfaces (WCAG AA 4.5:1). */
  --coral-deep-bg: rgba(194, 74, 31, 0.08);
  --coral-deep-border: rgba(194, 74, 31, 0.22);
  --coral-glow: rgba(232, 80, 42, 0.4);

  /* ============================================
     BRAND — purple (schema, AI engines)
     ============================================ */
  --purple: #B388FF;
  /* Bright. Use on dark surfaces. */
  --purple-deep: #6B4FB5;
  /* Deep. Use on cream surfaces. */
  --purple-deep-bg: rgba(107, 79, 181, 0.08);
  --purple-deep-border: rgba(107, 79, 181, 0.22);

  /* ============================================
     BRAND — amber (warnings, attention)
     ============================================ */
  --amber: #F59E0B;
  --amber-deep: #B87B0A;

  /* ============================================
     STATUS / SEMANTIC
     ============================================ */
  --success: var(--teal-deep);
  --warning: var(--amber-deep);
  --danger: var(--coral-deep);

  /* ============================================
     TYPOGRAPHY
     ============================================ */
  --font-display: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --serif: 'Instrument Serif', Georgia, serif;

  /* Type scale — fluid, clamp-based */
  --type-xs: clamp(11px, 0.75vw, 12px);
  --type-sm: clamp(13px, 0.9vw, 14px);
  --type-base: clamp(15px, 1.05vw, 16px);
  --type-lg: clamp(17px, 1.25vw, 18px);
  --type-xl: clamp(20px, 1.6vw, 22px);
  --type-2xl: clamp(24px, 2vw, 28px);
  --type-3xl: clamp(32px, 3vw, 40px);
  --type-4xl: clamp(40px, 4.5vw, 56px);
  --type-5xl: clamp(48px, 6vw, 72px);
  --type-hero: clamp(44px, 7vw, 92px);

  /* Letter spacing */
  --tracking-display: -0.045em;
  --tracking-tight: -0.025em;
  --tracking-base: -0.01em;
  --tracking-mono: 0.02em;
  --tracking-label: 0.14em;
  --tracking-eyebrow: 0.16em;

  /* ============================================
     SPACING — 4px scale
     ============================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Section vertical padding (responsive via section.css) */
  --section-pad-y: 80px;
  --section-pad-y-lg: 120px;

  /* Container */
  --shell-max: 1280px;
  --shell-pad: 22px;
  --shell-pad-md: 36px;
  --shell-pad-lg: 56px;

  /* ============================================
     RADII
     ============================================ */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-pill: 999px;

  /* ============================================
     MOTION
     ============================================ */
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --dur-fast: 0.2s;
  --dur-base: 0.3s;
  --dur-slow: 0.5s;
  --dur-reveal: 0.7s;

  /* ============================================
     LAYERING (z-index)
     ============================================ */
  --z-base: 0;
  --z-raised: 10;
  --z-overlay: 50;
  --z-nav: 100;
  --z-drawer: 99;
  --z-modal: 200;

  /* ============================================
     SHADOWS — tuned for cream surfaces
     ============================================ */
  --shadow-sm: 0 1px 2px rgba(20, 17, 14, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 17, 14, 0.06);
  --shadow-lg: 0 12px 32px -12px rgba(20, 17, 14, 0.12);
  --shadow-xl: 0 24px 56px -20px rgba(20, 17, 14, 0.16);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 8px 24px -16px rgba(20, 17, 14, 0.1);
  --shadow-card-hover: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 16px 40px -16px rgba(20, 17, 14, 0.18);

  /* Shadows on dark */
  --shadow-dark-md: 0 8px 30px -8px rgba(0, 0, 0, 0.4);
  --shadow-dark-lg: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}

/* ============================================
   BREAKPOINTS REFERENCE (for documentation only)
   Use these as the cutoffs in media queries:

   sm:  600px   (large phone / small tablet)
   md:  768px   (tablet)
   lg:  900px   (small desktop, two-column layouts)
   xl:  1100px  (desktop, three-column layouts)
   2xl: 1280px  (large desktop, container max-width)
   ============================================ */

/* base.css */

/* ============================================
   DEALERSGEAR BASE STYLES
   ============================================
   Resets, body, typography defaults, layout
   primitives (.shell), and utility classes that
   every page uses.

   IMPORTS tokens.css.
   ============================================ */

/* ============================================
   RESET
   ============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  font-size: var(--type-base);
  line-height: 1.5;
  background: var(--paper);
  color: var(--ink-100);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul,
ol {
  list-style: none;
}

::selection {
  background: var(--teal-deep);
  color: var(--paper);
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: var(--z-modal);
  padding: 12px 18px;
  background: var(--coral-deep);
  color: white;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-mono);
  border-radius: var(--r-md);
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 12px;
  left: 12px;
}

/* Focus rings — visible, branded */
:focus-visible {
  outline: 2px solid var(--teal-deep);
  outline-offset: 2px;
  border-radius: 2px;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--teal-deep);
  outline-offset: 3px;
}

/* Screen-reader-only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   LAYOUT — .shell container
   The horizontally-centered, padded container
   used on every page.
   ============================================ */
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-pad);
}


/* ============================================
   TYPOGRAPHY DEFAULTS
   ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-100);
  text-wrap: balance;
  line-height: 1.05;
}

h1 {
  font-size: var(--type-hero);
  letter-spacing: var(--tracking-display);
  line-height: 0.96;
}

h2 {
  font-size: var(--type-4xl);
}

h3 {
  font-size: var(--type-2xl);
}

h4 {
  font-size: var(--type-xl);
}

p {
  margin: 0;
  line-height: 1.6;
  color: var(--ink-70);
  text-wrap: pretty;
}

strong {
  font-weight: 500;
  color: var(--ink-100);
}

em {
  font-style: italic;
}

/* Lede paragraph — used under section headings */
.lede {
  font-size: var(--type-lg);
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 640px;
}

.lede strong {
  color: var(--ink-100);
}

/* Mono utility (eyebrows, labels, metadata) */
.mono {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  letter-spacing: var(--tracking-mono);
}

/* ============================================
   SECTION SHELL
   Every <section> uses these defaults.
   Specific pages override per section.
   ============================================ */
section {
  position: relative;
  padding: var(--section-pad-y) 0;
}

@media (min-width: 768px) {
  section {
    padding: var(--section-pad-y-lg) 0;
  }
}

/* Soft hairline between adjacent same-tone sections.
   Override with .no-divider class if needed. */
section+section:not(.no-divider):not(.dark):not(.dark + section) {
  border-top: 1px solid var(--paper-line-soft);
}

/* Modifier: dark section background */
section.dark {
  background: var(--navy-900);
  color: var(--d-ink-100);
  isolation: isolate;
  overflow: hidden;
}

section.dark h1,
section.dark h2,
section.dark h3,
section.dark h4 {
  color: var(--d-ink-100);
}

section.dark p {
  color: var(--d-ink-70);
}

section.dark p strong {
  color: var(--d-ink-100);
}

section.dark .lede {
  color: var(--d-ink-70);
}

section.dark .lede strong {
  color: var(--d-ink-100);
}

/* Modifier: cream-deep section (for vertical rhythm contrast) */
section.deep {
  background: var(--paper-deep);
}

/* ============================================
   SECTION HEADER PATTERN
   Section number + line + title + lede.
   Used as the opener for every content section.
   ============================================ */
.section-num {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--type-xs);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--ink-50);
  margin-bottom: var(--space-5);
}

.section-num strong {
  color: var(--coral-deep);
  font-weight: 500;
}

section.dark .section-num {
  color: var(--d-ink-50);
}

section.dark .section-num strong {
  color: var(--coral);
}

.section-num-line {
  flex: 1;
  height: 1px;
  max-width: 200px;
  background: linear-gradient(90deg, var(--ink-30), transparent);
}

section.dark .section-num-line {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.16), transparent);
}

.section-title {
  font-size: var(--type-4xl);
  line-height: 1;
  margin-bottom: var(--space-5);
  max-width: 880px;
}

.section-title em {
  color: var(--teal-deep);
  font-style: italic;
  font-weight: 500;
}

section.dark .section-title em {
  color: var(--teal);
}

.section-header {
  max-width: 880px;
  margin-bottom: 48px;
}

@media (min-width: 768px) {
  .section-header {
    margin-bottom: 72px;
  }
}

/* ============================================
   BUTTONS
   .btn.btn-primary  → coral, primary CTA
   .btn.btn-ghost    → bordered, secondary CTA
   .btn.btn-text     → text link with arrow
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: 48px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-sm);
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--dur-base) var(--ease-out-expo),
    background var(--dur-base),
    box-shadow var(--dur-base),
    border-color var(--dur-base);
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: var(--coral-deep);
  color: white;
  box-shadow: 0 8px 24px -8px rgba(194, 74, 31, 0.45);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: #d4521f;
  transform: translateY(-1px);
  box-shadow: 0 12px 36px -8px rgba(194, 74, 31, 0.6);
}

section.dark .btn-primary {
  background: var(--coral);
  box-shadow: 0 8px 30px -8px rgba(232, 80, 42, 0.5);
}

section.dark .btn-primary:hover,
section.dark .btn-primary:focus-visible {
  background: var(--coral-bright);
  box-shadow: 0 12px 50px -8px rgba(232, 80, 42, 0.7);
}

.btn-ghost {
  background: var(--paper-card);
  border: 1px solid var(--paper-line);
  color: var(--ink-100);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: white;
  border-color: var(--ink-30);
  transform: translateY(-1px);
}

section.dark .btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--d-ink-100);
}

section.dark .btn-ghost:hover,
section.dark .btn-ghost:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  color: var(--coral-text);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-sm);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-base), border-color var(--dur-base);
}

.btn-text:hover {
  color: var(--coral-bright);
  border-color: currentColor;
}

.btn .arrow {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-out-expo);
}

.btn:hover .arrow,
.btn:focus-visible .arrow {
  transform: translateX(3px);
}

/* ============================================
   EYEBROW PILL
   Small pill used above hero titles and section titles.
   ============================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 7px 14px;
  background: var(--teal-deep-bg);
  border: 1px solid var(--teal-deep-border);
  border-radius: var(--r-pill);
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  color: var(--teal-deep);
  margin-bottom: var(--space-8);
}

.eyebrow-pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal-deep);
  box-shadow: 0 0 8px rgba(31, 138, 117, 0.5);
  animation: blink 2s ease infinite;
  flex-shrink: 0;
}

.eyebrow.coral {
  background: var(--coral-deep-bg);
  border-color: var(--coral-deep-border);
  color: var(--coral-deep);
}

.eyebrow.coral .eyebrow-pip {
  background: var(--coral-deep);
  box-shadow: 0 0 8px rgba(194, 74, 31, 0.5);
}

section.dark .eyebrow {
  background: rgba(62, 207, 178, 0.08);
  border-color: rgba(62, 207, 178, 0.25);
  color: var(--teal);
}

section.dark .eyebrow .eyebrow-pip {
  background: var(--teal);
  box-shadow: 0 0 8px var(--teal);
}

section.dark .eyebrow.coral {
  background: rgba(232, 80, 42, 0.1);
  border-color: rgba(232, 80, 42, 0.3);
  color: var(--coral-bright);
}

section.dark .eyebrow.coral .eyebrow-pip {
  background: var(--coral);
  box-shadow: 0 0 8px var(--coral);
}

@keyframes blink {
  50% {
    opacity: 0.35;
  }
}

/* ============================================
   CARDS (paper card pattern)
   ============================================ */
.card {
  background: var(--paper-card);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-xl);
  padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-card);
  transition:
    transform var(--dur-base) var(--ease-out-expo),
    border-color var(--dur-base),
    box-shadow var(--dur-base);
}

.card:hover {
  transform: translateY(-3px);
  border-color: var(--teal-deep-border);
  box-shadow: var(--shadow-card-hover);
}

section.dark .card {
  background: rgba(11, 19, 32, 0.5);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-dark-md);
}

section.dark .card:hover {
  border-color: rgba(62, 207, 178, 0.3);
  background: rgba(11, 19, 32, 0.7);
}

/* ============================================
   REVEAL ON SCROLL (utility)
   Add data-reveal to any element. JS in reveal.js
   adds the .in class when the element is visible.
   ============================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-reveal) var(--ease-out-expo),
    transform var(--dur-reveal) var(--ease-out-expo);
}

[data-reveal].in {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ============================================
   PRINT
   ============================================ */
@media print {
  .nav, .footer, .drawer, .skip-link, .preview-banner {
    display: none !important;
  }

  section {
    padding: 32px 0;
    page-break-inside: avoid;
  }

  body {
    background: white;
    color: black;
  }
}

/* nav.css */

/* ============================================
   DEALERSGEAR NAVIGATION
   ============================================
   Floating pill nav (fixed top), backdrop blur,
   light-default appearance, scroll-state darkening.
   Plus full mobile drawer.

   Imports tokens via base.css (assumed already imported).
   ============================================ */

/* ============================================
   NAV — FIXED PILL
   ============================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  padding: 14px 0;
  transition: padding var(--dur-base) var(--ease-out-expo);
}

@media (min-width: 768px) {
  .nav {
    padding: 18px 0;
  }
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-pill);
  padding: 8px 8px 8px 18px;
  transition: background var(--dur-base), border-color var(--dur-base), box-shadow var(--dur-base);
  box-shadow: 0 10px 40px -10px rgba(20, 17, 14, 0.08);
}

@media (min-width: 768px) {
  .nav-inner {
    gap: 24px;
    padding: 8px 8px 8px 22px;
  }
}

.nav.scrolled .nav-inner {
  background: rgba(255, 252, 255, 0.94);
  box-shadow: 0 12px 50px -10px rgba(20, 17, 14, 0.15);
}

/* ============================================
   LOGO
   ============================================ */
.nav-logo {
  display: inline-flex;
  align-items: baseline;
  flex-shrink: 0;
  transition: opacity var(--dur-base);
}

.nav-logo:hover {
  opacity: 0.85;
}

.nav-logo-wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.035em;
  color: var(--ink-100);
  line-height: 1;
}

@media (min-width: 768px) {
  .nav-logo-wordmark {
    font-size: 20px;
  }
}

.nav-logo-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral-deep);
  margin-left: 3px;
  transform: translateY(-1px);
  box-shadow: 0 0 8px rgba(194, 74, 31, 0.35);
  transition: box-shadow var(--dur-base), transform var(--dur-base) var(--ease-out-expo);
}

.nav-logo:hover .nav-logo-dot {
  box-shadow: 0 0 14px rgba(194, 74, 31, 0.55);
  transform: translateY(-1px) scale(1.15);
}

.nav-logo img {
  height: 20px;
}

/* ============================================
   NAV LINKS
   ============================================ */
.nav-links {
  display: none;
  gap: 2px;
  align-items: center;
}

@media (min-width: 1280px) {
  .nav-links {
    display: flex;
  }
}

.nav-link {
  position: relative;
  padding: 10px 16px;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink-70);
  border-radius: var(--r-pill);
  transition: color var(--dur-base), background var(--dur-base);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-link:hover {
  color: var(--ink-100);
  background: rgba(20, 17, 14, 0.04);
}

.nav-link[aria-current="page"] {
  color: var(--ink-100);
  background: rgba(20, 17, 14, 0.06);
}

.nav-link .pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral-deep);
  box-shadow: 0 0 6px rgba(194, 74, 31, 0.5);
  animation: blink 1.6s ease infinite;
  flex-shrink: 0;
}

.nav-link .pip.teal {
  background: var(--teal-deep);
  box-shadow: 0 0 6px rgba(31, 138, 117, 0.5);
}

.nav-link-audit {
  color: var(--coral-deep);
}

.nav-link-audit:hover {
  color: var(--coral-deep);
}

/* ============================================
   NAV CTA AREA (desktop only)
   ============================================ */
.nav-cta-desktop {
  display: none;
}

@media (min-width: 1280px) {
  .nav-cta-desktop {
    display: flex;
    gap: 6px;
    align-items: center;
  }
}

.nav-cta-desktop .btn {
  height: 40px;
  padding: 0 18px;
  font-size: 13px;
}

.nav-signin {
  display: inline-flex;
  align-items: center;
  color: var(--ink-70);
  font-family: var(--font-display);
  font-size: 13px;
  padding: 10px 14px;
  border-radius: var(--r-pill);
  transition: color var(--dur-base), background var(--dur-base);
}

.nav-signin {
  background: none;
  border: 0;
  cursor: pointer;
  gap: 4px;
}

.nav-signin:hover {
  color: var(--ink-100);
  background: rgba(20, 17, 14, 0.04);
}

/* Sign-in dropdown */
.nav-signin-menu {
  position: relative;
}

.nav-signin-caret {
  font-size: 10px;
  transition: transform var(--dur-base);
}

.nav-signin-menu.is-open .nav-signin-caret {
  transform: rotate(180deg);
}

.nav-signin-menu.is-open .nav-signin {
  color: var(--ink-100);
  background: rgba(20, 17, 14, 0.04);
}

.nav-signin-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 168px;
  padding: 6px;
  background: var(--paper, #fff);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-md, 12px);
  box-shadow: 0 12px 32px rgba(20, 17, 14, 0.12);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 50;
}

.nav-signin-menu.is-open .nav-signin-dropdown {
  display: flex;
}

.nav-signin-item {
  display: block;
  padding: 10px 12px;
  border-radius: var(--r-pill);
  color: var(--ink-70);
  font-family: var(--font-display);
  font-size: 13px;
  white-space: nowrap;
  transition: color var(--dur-base), background var(--dur-base);
}

.nav-signin-item:hover {
  color: var(--ink-100);
  background: rgba(20, 17, 14, 0.04);
}

/* ============================================
   HAMBURGER (mobile only)
   ============================================ */
.hamburger {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(20, 17, 14, 0.04);
  border: 1px solid var(--paper-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--dur-base), border-color var(--dur-base);
}

.hamburger:hover {
  background: rgba(20, 17, 14, 0.08);
  border-color: var(--ink-30);
}

@media (min-width: 1280px) {
  .hamburger {
    display: none;
  }
}

.bars {
  position: relative;
  width: 16px;
  height: 12px;
}

.bars span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--ink-100);
  transition:
    transform var(--dur-base) var(--ease-out-expo),
    top var(--dur-base),
    opacity var(--dur-fast);
  border-radius: 2px;
}

.bars span:nth-child(1) {
  top: 2px;
}

.bars span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.bars span:nth-child(3) {
  top: calc(100% - 3px);
}

.hamburger.open .bars span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.hamburger.open .bars span:nth-child(2) {
  opacity: 0;
}

.hamburger.open .bars span:nth-child(3) {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

/* ============================================
   MOBILE DRAWER
   Full-screen overlay menu, opens from hamburger.
   ============================================ */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--paper);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out-expo);
  display: flex;
  flex-direction: column;
  padding: 100px 24px 32px;
  overflow-y: auto;
}

.drawer.open {
  pointer-events: auto;
  opacity: 1;
}

.drawer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 600px 400px at 80% 20%, rgba(31, 138, 117, 0.06), transparent 60%),
    radial-gradient(ellipse 600px 400px at 20% 100%, rgba(194, 74, 31, 0.05), transparent 60%);
}

.drawer-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
  height: 100%;
}

.drawer-section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: 12px;
}

.drawer-links {
  display: flex;
  flex-direction: column;
}

.drawer-link {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 22px 0;
  border-bottom: 1px solid var(--paper-line);
  font-family: var(--font-display);
  font-size: clamp(28px, 6vw, 36px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink-100);
  opacity: 0;
  transform: translateX(-20px);
  transition:
    opacity var(--dur-slow) var(--ease-out-expo),
    transform var(--dur-slow) var(--ease-out-expo),
    color var(--dur-fast);
}

.drawer.open .drawer-link {
  opacity: 1;
  transform: translateX(0);
}

.drawer.open .drawer-link:nth-child(1) {
  transition-delay: 0.10s;
}

.drawer.open .drawer-link:nth-child(2) {
  transition-delay: 0.16s;
}

.drawer.open .drawer-link:nth-child(3) {
  transition-delay: 0.22s;
}

.drawer.open .drawer-link:nth-child(4) {
  transition-delay: 0.28s;
}

.drawer.open .drawer-link:nth-child(5) {
  transition-delay: 0.34s;
}

.drawer.open .drawer-link:nth-child(6) {
  transition-delay: 0.40s;
}

.drawer.open .drawer-link:nth-child(7) {
  transition-delay: 0.46s;
}

.drawer.open .drawer-link:nth-child(8) {
  transition-delay: 0.52s;
}

.drawer-link:hover,
.drawer-link:active {
  color: var(--teal-deep);
}

.drawer-link-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-50);
  letter-spacing: 0.16em;
  margin-top: 14px;
}

.drawer-link-label {
  flex: 1;
  padding-left: 16px;
  text-align: left;
  text-transform: uppercase;
}

.drawer-link-arrow {
  font-size: 20px;
  color: var(--ink-50);
  margin-top: 8px;
  transition: transform var(--dur-base) var(--ease-out-expo), color var(--dur-fast);
}

.drawer-link:hover .drawer-link-arrow {
  transform: translateX(4px);
  color: var(--teal-deep);
}

.drawer-link-audit .drawer-link-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.drawer-link-badge {
  padding: 2px 7px;
  background: var(--coral-deep-bg);
  border: 1px solid var(--coral-deep-border);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--coral-deep);
  text-transform: uppercase;
  font-weight: 500;
}

.drawer-cta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 32px;
}

.drawer-cta .btn {
  height: 56px;
  font-size: 15px;
  width: 100%;
}

.drawer-status {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-50);
  text-transform: uppercase;
  padding-top: 24px;
  border-top: 1px solid var(--paper-line);
}

.drawer-status .live {
  color: var(--coral-deep);
}

/* Body lock when drawer is open */
body.menu-open {
  overflow: hidden;
}

/* ============================================
   PAGE OFFSET FOR FIXED NAV
   Every page needs space at the top to clear
   the floating pill. Hero sections handle this
   themselves via padding-top; if a page starts
   with non-hero content, add .page-with-nav-pad
   to <main>.
   ============================================ */
.page-with-nav-pad {
  padding-top: 100px;
}

@media (min-width: 768px) {
  .page-with-nav-pad {
    padding-top: 120px;
  }
}

/* footer.css */

/* ============================================
   DEALERSGEAR FOOTER
   ============================================
   Global footer used at the bottom of every page.
   Two variants:
   .footer        → light/cream footer (default)
   .footer.dark   → dark variant (rarely used, only
                    when the section above is the
                    final CTA on dark and we want
                    the dark to continue)
   ============================================ */

.footer {
  position: relative;
  background: var(--paper-deep);
  border-top: 1px solid var(--paper-line);
  padding: 64px 0 32px;
  color: var(--ink-70);
}

.footer.dark {
  background: var(--navy-900);
  border-top-color: rgba(255, 255, 255, 0.06);
  color: var(--d-ink-70);
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--paper-line);
}

.footer.dark .footer-top {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

@media (max-width: 1024px) {
  .footer-top {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 48px;
  }
}

@media (max-width: 768px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* Brand block (left column on desktop) */
.footer-brand-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 320px;
}

.footer-brand {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--ink-100);
}

.footer.dark .footer-brand {
  color: var(--d-ink-100);
}

.footer-brand-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--coral-deep);
  border-radius: 50%;
  margin-left: 3px;
  transform: translateY(-1px);
}

.footer.dark .footer-brand-dot {
  background: var(--coral);
  box-shadow: 0 0 8px var(--coral-glow);
}

.footer-tagline {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-90);
  max-width: 280px;
}

.footer.dark .footer-tagline {
  color: var(--d-ink-70);
}

/* Link columns */
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-col-title {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: 4px;
}

.footer.dark .footer-col-title {
  color: var(--d-ink-50);
}

.footer-link {
  display: inline-block;
  font-size: 14px;
  color: var(--ink-90);
  transition: color var(--dur-fast);
  line-height: 1.4;
}

.footer-link:hover {
  color: var(--coral-deep);
}

.footer.dark .footer-link {
  color: var(--d-ink-90);
}

.footer.dark .footer-link:hover {
  color: var(--coral-bright);
}

/* Status pill (left column under brand) */
.footer-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--paper-card);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-70);
  margin-top: 8px;
  max-width: fit-content;
}

.footer.dark .footer-status {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--d-ink-70);
}

.footer-status-pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal-deep);
  box-shadow: 0 0 8px rgba(31, 138, 117, 0.5);
  animation: blink 2s ease infinite;
  flex-shrink: 0;
}

.footer.dark .footer-status-pip {
  background: var(--teal);
  box-shadow: 0 0 8px var(--teal);
}

.footer-status strong {
  color: var(--ink-100);
  font-weight: 500;
}

.footer.dark .footer-status strong {
  color: var(--d-ink-100);
}

/* Bottom row (copyright + secondary nav) */
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 32px;
  font-size: 12px;
  color: var(--ink-50);
  letter-spacing: 0.02em;
}

.footer.dark .footer-bottom {
  color: var(--d-ink-50);
}

@media (min-width: 700px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.footer-copyright {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-bottom-links a {
  color: var(--ink-50);
  transition: color var(--dur-fast);
}

.footer-bottom-links a:hover {
  color: var(--ink-100);
}

.footer.dark .footer-bottom-links a {
  color: var(--d-ink-50);
}

.footer.dark .footer-bottom-links a:hover {
  color: var(--d-ink-100);
}

.footer-version {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-50);
  /* was --ink-30 (1.91:1) — bumped to meet WCAG AA */
  letter-spacing: 0.04em;
}

.footer.dark .footer-version {
  color: var(--d-ink-30);
}

/* ============================================================
   KEYFRAMES (hoisted from page-specific modules)
   ============================================================ */
@keyframes underline-draw {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes peek-event-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ticker-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes ops-flow {
  from {
    left: 100%;
  }

  to {
    left: -240px;
  }
}

@keyframes flow-pulse {
  0%, 100% {
    opacity: 0.3;
  }

  50% {
    opacity: 1;
  }
}

@keyframes stage-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes feed-row-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes peek-decision-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dash-flow {
  to {
    stroke-dashoffset: -28;
  }
}

/* ============================================================
   PAGE: index
   ============================================================ */
body.page-index {
  /* index.css */

  /* ============================================
   DEALERSGEAR HOMEPAGE
   ============================================
   Page-specific styles for index.html.
   Shared design system imported below.

   Section order:
   01 Hero          (light)
   02 Ticker        (light)
   03 Ops View      (dark — signature scene)
   04 AEO Split     (dark)
   05 Three Systems (light)
   06 Live Flow     (dark)
   07 Layouts       (light)
   08 How it works  (dark)
   09 Metrics       (light)
   10 Pilots        (light)
   11 Audit funnel  (dark)
   12 CTA           (dark)
   13 FAQ           (light)
   ============================================ */

  /* ============================================
   FONTS — preload via <link> in HTML, then declare here
   ============================================ */

  /* ============================================
   01 — HERO (LIGHT)
   Two-column on desktop: copy left, product peek right.
   Single column on mobile: copy first, peek below.
   Drama from typography scale + soft atmospheric +
   live product-UI peek.
   ============================================ */
  .hero {
    position: relative;
    background: var(--paper);
    color: var(--ink-100);
    overflow: hidden;
    isolation: isolate;
    padding: 120px 0 70px;
  }

  @media (min-width: 768px) {
    .hero {
      padding: 160px 0 100px;
    }
  }

  @media (min-width: 1100px) {
    .hero {
      padding: 170px 0 120px;
    }
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
      linear-gradient(rgba(31, 138, 117, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(31, 138, 117, 0.035) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black, transparent 80%);
  }

  .hero::after {
    content: "";
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 1400px;
    height: 800px;
    background:
      radial-gradient(ellipse 50% 40% at 25% 50%, rgba(31, 138, 117, 0.07), transparent 70%),
      radial-gradient(ellipse 50% 40% at 75% 50%, rgba(194, 74, 31, 0.05), transparent 70%);
    filter: blur(60px);
    z-index: -1;
    pointer-events: none;
  }

  /* The 2-column grid */
  .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: start;
  }

  @media (min-width: 1100px) {
    .hero-grid {
      grid-template-columns: 1.15fr 1fr;
      gap: 56px;
      align-items: center;
    }
  }

  .hero-copy {
    position: relative;
    z-index: 1;
  }

  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    background: var(--teal-deep-bg);
    border: 1px solid var(--teal-deep-border);
    border-radius: var(--r-pill);
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: var(--tracking-label);
    color: var(--teal-deep);
    margin-bottom: 28px;
  }

  .hero-eyebrow-pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal-deep);
    box-shadow: 0 0 8px rgba(31, 138, 117, 0.5);
    animation: blink 2s ease infinite;
    flex-shrink: 0;
  }

  .hero-title {
    font-family: var(--font-display);
    font-size: clamp(40px, 5.8vw, 76px);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 0.98;
    color: var(--ink-100);
    margin-bottom: 24px;
    text-wrap: balance;
  }

  .hero-title em {
    font-style: italic;
    color: var(--teal-deep);
    font-weight: 500;
    position: relative;
  }

  .hero-title em::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.05em;
    height: 0.06em;
    background: var(--teal-deep);
    opacity: 0.3;
    transform-origin: left;
    animation: underline-draw 1s var(--ease-out-expo) 0.4s both;
  }


  .hero-lede {
    max-width: 560px;
    font-size: var(--type-lg);
    line-height: 1.55;
    color: var(--ink-70);
    margin-bottom: 32px;
  }

  .hero-lede strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 36px;
  }

  .hero-actions .btn {
    height: 52px;
    padding: 0 24px;
    font-size: 14px;
  }

  /* Trust strip — sits between actions and metrics */
  .hero-trust {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 36px;
    padding: 14px 0;
    flex-wrap: wrap;
  }

  .hero-trust-label {
    font-size: 10px;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-50);
    white-space: nowrap;
  }

  .hero-trust-logos {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
  }

  @media (max-width: 480px) {
    .hero-trust-logos {
      gap: 18px;
    }
  }

  /* Each logo is an SVG-shaped lockup with the dealer name styled to feel
   like an actual logo, not just text. Slightly desaturated, monospace
   for the small subline, distinct treatments per pilot. */
  .trust-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    opacity: 0.75;
    transition: opacity var(--dur-base);
  }

  .trust-logo:hover {
    opacity: 1;
  }

  .trust-logo-mark {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: white;
    flex-shrink: 0;
  }

  .trust-logo.is-zee .trust-logo-mark {
    background: linear-gradient(135deg, #1F8A75, #6B4FB5);
  }

  .trust-logo.is-keller .trust-logo-mark {
    background: linear-gradient(135deg, #C24A1F, #8B2810);
    border-radius: 50%;
  }

  .trust-logo.is-fam .trust-logo-mark {
    background: linear-gradient(135deg, #B87B0A, #5F3E00);
    border-radius: 3px;
    position: relative;
  }

  .trust-logo.is-fam .trust-logo-mark::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    border-radius: 1px;
  }

  .trust-logo-name {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink-90);
    line-height: 1;
  }

  .trust-logo.is-fam .trust-logo-mark span {
    display: none;
  }

  .hero-metrics {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding-top: 24px;
    border-top: 1px solid var(--paper-line);
  }

  @media (min-width: 600px) {
    .hero-metrics {
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }
  }

  .hero-metric {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .hero-metric-label {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--ink-50);
  }

  .hero-metric-value {
    font-family: var(--font-mono);
    font-size: clamp(24px, 2.4vw, 30px);
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink-100);
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
  }

  .hero-metric-suffix {
    font-family: var(--font-mono);
    font-size: 0.5em;
    color: var(--teal-deep);
    margin-left: 4px;
  }

  /* Hero ACP signal — small footer line below metrics.
   Discoverable but not braggy. Links to acpspec.org. */
  .hero-acp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    padding: 8px 14px 8px 12px;
    background: rgba(31, 138, 117, 0.05);
    border: 1px solid rgba(31, 138, 117, 0.18);
    border-radius: var(--r-pill);
    font-size: 13px;
    letter-spacing: 0.02em;
    color: var(--ink-70);
    transition: all var(--dur-base);
    max-width: fit-content;
  }

  .hero-acp:hover {
    background: rgba(31, 138, 117, 0.1);
    border-color: rgba(31, 138, 117, 0.32);
    color: var(--ink-100);
    transform: translateY(-1px);
  }

  .hero-acp-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal-deep);
    box-shadow: 0 0 6px rgba(31, 138, 117, 0.5);
    flex-shrink: 0;
  }

  .hero-acp-label {
    color: var(--ink-50);
  }

  .hero-acp-name {
    color: var(--teal-deep);
    font-weight: 500;
    letter-spacing: 0.01em;
  }

  .hero-acp-arrow {
    color: var(--ink-50);
    font-size: 10px;
    margin-left: 2px;
    transition: transform var(--dur-base) var(--ease-out-expo);
  }

  .hero-acp:hover .hero-acp-arrow {
    transform: translate(2px, -2px);
  }

  /* ============================================
   HERO PRODUCT PEEK
   Right-side window showing the OS running.
   A stylized panel with a header bar, event
   stream rows, metric strip, status footer.
   This is the visual anchor.
   ============================================ */
  .hero-peek {
    position: relative;
    border-radius: var(--r-xl);
    background: linear-gradient(180deg, #0B1320, #06090F);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.05) inset,
      0 30px 60px -20px rgba(20, 17, 14, 0.25),
      0 60px 120px -40px rgba(31, 138, 117, 0.15);
    overflow: hidden;
    isolation: isolate;
    /* Match height to copy column on desktop */
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
  }

  @media (min-width: 1100px) {
    .hero-peek {
      max-width: none;
      transform: rotate(-1deg) translateY(-8px);
      transform-origin: center;
      transition: transform var(--dur-slow) var(--ease-out-expo);
    }

    .hero-peek:hover {
      transform: rotate(0deg) translateY(-12px);
    }
  }

  /* Subtle ambient glow behind the peek */
  .hero-peek::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: var(--r-xl);
    background: linear-gradient(135deg, rgba(62, 207, 178, 0.18), transparent 60%, rgba(232, 80, 42, 0.12));
    opacity: 0.6;
    filter: blur(20px);
  }

  /* macOS-style window header */
  .hero-peek-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .hero-peek-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
  }

  .hero-peek-dot:nth-child(1) {
    background: #FF6058;
  }

  .hero-peek-dot:nth-child(2) {
    background: #FFBD2E;
  }

  .hero-peek-dot:nth-child(3) {
    background: #27CA3F;
  }

  .hero-peek-title {
    margin-left: auto;
    margin-right: auto;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--d-ink-50);
    text-transform: lowercase;
  }

  .hero-peek-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.06em;
    color: var(--teal);
    text-transform: uppercase;
  }

  .hero-peek-status-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 5px var(--teal);
    animation: blink 1.4s ease infinite;
  }

  /* The body of the peek */
  .hero-peek-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--d-ink-100);
  }

  /* Section labels inside the peek */
  .peek-section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--d-ink-50);
    margin-bottom: 8px;
  }

  .peek-section-label-pip {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--teal);
  }

  .peek-section-label-pip.coral {
    background: var(--coral);
  }

  .peek-section-label-pip.purple {
    background: var(--purple);
  }

  .peek-section-label-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent);
  }

  /* Event stream — 3 rows that stream in sequentially */
  .peek-events {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .peek-event {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--d-ink-90);
    letter-spacing: 0.01em;
    align-items: center;
    opacity: 0;
    transform: translateY(8px);
    animation: peek-event-in 0.6s var(--ease-out-expo) forwards;
  }

  .peek-event:nth-child(1) {
    animation-delay: 0.8s;
  }

  .peek-event:nth-child(2) {
    animation-delay: 1.4s;
  }

  .peek-event:nth-child(3) {
    animation-delay: 2.0s;
  }

  .peek-event-type {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--d-ink-50);
  }

  .peek-event-type-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 5px var(--teal);
  }

  .peek-event.is-build .peek-event-type-pip {
    background: var(--purple);
    box-shadow: 0 0 5px var(--purple);
  }

  .peek-event.is-outcome .peek-event-type-pip {
    background: var(--coral);
    box-shadow: 0 0 5px var(--coral);
  }

  .peek-event-text {
    color: var(--d-ink-90);
    font-family: var(--font-body);
  }

  .peek-event-text strong {
    color: var(--d-ink-100);
    font-weight: 500;
  }

  .peek-event-time {
    font-size: 12px;
    color: var(--d-ink-50);
    white-space: nowrap;
  }

  /* Metric strip inside the peek */
  .peek-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
  }

  .peek-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .peek-metric-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--d-ink-50);
  }

  .peek-metric-value {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink-100);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    display: inline-flex;
    align-items: baseline;
  }

  .peek-metric-suffix {
    font-family: var(--font-mono);
    font-size: 0.45em;
    margin-left: 2px;
  }

  .peek-metric.is-teal .peek-metric-suffix {
    color: var(--teal);
  }

  .peek-metric.is-coral .peek-metric-suffix {
    color: var(--coral);
  }

  .peek-metric.is-purple .peek-metric-suffix {
    color: var(--purple);
  }

  /* Status footer inside peek */
  .peek-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.06em;
    color: var(--d-ink-50);
    text-transform: uppercase;
  }

  .peek-foot-now {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .peek-foot-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--coral);
    box-shadow: 0 0 5px var(--coral);
    animation: blink 1.4s ease infinite;
  }

  /* ============================================
   02 — TICKER (LIGHT)
   Horizontal scrolling event ticker, paper strip.
   ============================================ */
  .ticker {
    position: relative;
    background: var(--paper-deep);
    padding: 18px 0;
    border-top: 1px solid var(--paper-line);
    border-bottom: 1px solid var(--paper-line);
    overflow: hidden;
  }

  .ticker-track {
    display: flex;
    gap: 36px;
    animation: ticker-scroll 60s linear infinite;
    width: max-content;
  }

  @media (prefers-reduced-motion: reduce) {
    .ticker-track {
      animation: none;
      flex-wrap: wrap;
    }
  }


  .ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-70);
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .ticker-item-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal-deep);
    flex-shrink: 0;
  }

  .ticker-item-pip.coral {
    background: var(--coral-deep);
  }

  .ticker-item-pip.purple {
    background: var(--purple-deep);
  }

  .ticker-item strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  /* ============================================
   03 — OPS VIEW (DARK — signature scene)
   Three streaming rails: VIN events, page builds,
   outcomes. Plus 3 live counters.
   ============================================ */
  .ops {
    padding: 100px 0;
  }

  @media (min-width: 768px) {
    .ops {
      padding: 140px 0;
    }
  }

  .ops::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(ellipse 100% 60% at 50% 20%, rgba(62, 207, 178, 0.06), transparent 70%),
      radial-gradient(ellipse 100% 60% at 50% 100%, rgba(232, 80, 42, 0.04), transparent 70%);
  }

  .ops-stage {
    background: rgba(11, 19, 32, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-xl);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-dark-lg);
  }

  .ops-rail {
    position: relative;
    height: 42px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    overflow: hidden;
  }

  .ops-rail-label {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: var(--tracking-label);
    color: var(--d-ink-50);
    z-index: 2;
    background: linear-gradient(90deg, var(--navy-900) 70%, transparent);
    padding-right: 20px;
    text-transform: uppercase;
  }

  .ops-rail-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(62, 207, 178, 0.2), transparent);
  }

  .ops-rail-event {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    background: rgba(11, 19, 32, 0.9);
    border: 1px solid;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    white-space: nowrap;
    animation: ops-flow 12s linear infinite;
  }

  .ops-rail-event::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .ops-rail.is-vin .ops-rail-event {
    border-color: rgba(62, 207, 178, 0.35);
    color: var(--teal);
  }

  .ops-rail.is-vin .ops-rail-event::before {
    background: var(--teal);
    box-shadow: 0 0 6px var(--teal);
  }

  .ops-rail.is-build .ops-rail-event {
    border-color: rgba(179, 136, 255, 0.35);
    color: var(--purple);
  }

  .ops-rail.is-build .ops-rail-event::before {
    background: var(--purple);
    box-shadow: 0 0 6px var(--purple);
  }

  .ops-rail.is-outcome .ops-rail-event {
    border-color: rgba(232, 80, 42, 0.35);
    color: var(--coral);
  }

  .ops-rail.is-outcome .ops-rail-event::before {
    background: var(--coral);
    box-shadow: 0 0 6px var(--coral);
  }

  .ops-rail .ops-rail-event:nth-child(3) {
    animation-delay: -4s;
  }

  .ops-rail .ops-rail-event:nth-child(4) {
    animation-delay: -8s;
  }

  .ops-counters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .ops-counter {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .ops-counter-label {
    font-size: 12px;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--d-ink-50);
  }

  .ops-counter-value {
    font-family: var(--font-mono);
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink-100);
    font-variant-numeric: tabular-nums;
  }

  /* ============================================
   04 — PROTOCOL LAYER (DARK)
   The infrastructure section. ACP — the protocol
   underneath the OS. Positioned right after Ops View
   so the user has just seen events flowing and now
   sees WHAT those events ARE structurally.

   Visual: four-tier stack on the right (ACP at the
   base, the three product systems above it),
   explanatory copy on the left. JSON envelope hint
   inside the ACP tier card.
   ============================================ */
  .protocol {
    padding: 90px 0;
  }

  @media (min-width: 768px) {
    .protocol {
      padding: 130px 0;
    }
  }

  .protocol::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(ellipse 80% 50% at 80% 50%, rgba(31, 138, 117, 0.07), transparent 70%),
      radial-gradient(ellipse 80% 50% at 20% 50%, rgba(232, 80, 42, 0.04), transparent 70%);
  }

  .protocol-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: center;
  }

  @media (min-width: 1000px) {
    .protocol-grid {
      grid-template-columns: 1fr 1.05fr;
      gap: 56px;
    }
  }

  .protocol-copy {
    position: relative;
  }

  .protocol-copy .section-num strong {
    color: var(--teal);
  }

  .protocol-copy .section-title em {
    color: var(--teal);
  }

  .protocol-points {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 28px;
  }

  .protocol-point {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: flex-start;
  }

  .protocol-point-mark {
    width: 8px;
    height: 8px;
    border-radius: 6px;
    background: var(--teal);
    border: 1px solid rgba(62, 207, 178, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--teal);
    margin-top: 7px;
  }

  .protocol-point-body {
    font-size: 14px;
    line-height: 1.55;
    color: var(--d-ink-90);
  }

  .protocol-point-body strong {
    color: var(--d-ink-100);
    font-weight: 500;
  }

  .protocol-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    padding: 12px 16px;
    background: rgba(62, 207, 178, 0.06);
    border: 1px solid rgba(62, 207, 178, 0.22);
    border-radius: var(--r-pill);
    font-size: 14px;
    letter-spacing: 0.02em;
    color: var(--teal);
    transition: all var(--dur-base);
  }

  .protocol-link:hover {
    background: rgba(62, 207, 178, 0.12);
    border-color: var(--teal);
  }

  .protocol-link-arrow {
    transition: transform var(--dur-base) var(--ease-out-expo);
  }

  .protocol-link:hover .protocol-link-arrow {
    transform: translateX(3px);
  }

  /* ============================================
   The 4-tier stack visual
   ============================================ */
  .protocol-stack {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px;
    background: rgba(11, 19, 32, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-dark-lg);
    backdrop-filter: blur(20px);
  }

  .protocol-tier {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--r-lg);
    transition: all var(--dur-base);
  }

  .protocol-tier-num {
    font-size: 12px;
    color: var(--d-ink-50);
    text-transform: uppercase;
    flex-shrink: 0;
  }

  .protocol-tier-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .protocol-tier-name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink-100);
    line-height: 1.2;
  }

  .protocol-tier-role {
    font-size: 12px;
    color: var(--d-ink-50);
    letter-spacing: 0.02em;
  }

  .protocol-tier-pip {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .protocol-tier.is-vmm .protocol-tier-pip {
    background: var(--coral);
    box-shadow: 0 0 6px var(--coral);
  }

  .protocol-tier.is-engine .protocol-tier-pip {
    background: var(--teal);
    box-shadow: 0 0 6px var(--teal);
  }

  .protocol-tier.is-autolink .protocol-tier-pip {
    background: var(--purple);
    box-shadow: 0 0 6px var(--purple);
  }

  /* The bottom tier — ACP — gets special treatment.
   Wider, slightly recessed, with a JSON snippet inside. */
  .protocol-tier.is-acp {
    padding: 18px;
    background: rgba(62, 207, 178, 0.05);
    border-color: rgba(62, 207, 178, 0.28);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 4px;
    box-shadow:
      0 0 0 1px rgba(62, 207, 178, 0.15),
      0 8px 30px -10px rgba(62, 207, 178, 0.25);
  }

  .protocol-tier.is-acp::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 10px;
    background: linear-gradient(180deg, transparent, rgba(62, 207, 178, 0.4));
  }

  .protocol-acp-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
  }

  .protocol-acp-head .protocol-tier-name {
    color: var(--teal);
    font-size: 17px;
  }

  .protocol-acp-version {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--d-ink-50);
    letter-spacing: 0.04em;
  }

  .protocol-acp-version-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 6px var(--teal);
    animation: blink 1.6s ease infinite;
  }

  /* JSON envelope snippet inside ACP tier */
  .protocol-acp-envelope {
    background: rgba(6, 9, 15, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.7;
    color: var(--d-ink-70);
    overflow-x: auto;
  }

  .protocol-acp-envelope .punct {
    color: var(--d-ink-50);
  }

  .protocol-acp-envelope .key {
    color: var(--teal);
  }

  .protocol-acp-envelope .str {
    color: var(--coral);
  }

  .protocol-acp-envelope .num {
    color: var(--purple);
  }

  .protocol-acp-envelope .comment {
    color: var(--d-ink-50);
    font-style: italic;
    opacity: 0.7;
  }

  /* Adopters footer line below the stack */
  .protocol-adopters {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: var(--r-lg);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--d-ink-50);
    letter-spacing: 0.04em;
    flex-wrap: wrap;
  }

  .protocol-adopters-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal);
    flex-shrink: 0;
  }

  .protocol-adopters strong {
    color: var(--d-ink-90);
    font-weight: 500;
  }

  /* ============================================
   AEO MINI MOCK (kept, but now lives inside the
   walkthrough "outcomes" step, not as its own
   section).
   ============================================ */
  .aeo-mini {
    background: rgba(6, 9, 15, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--d-ink-70);
    line-height: 1.5;
    margin-top: 8px;
  }

  .aeo-mini strong {
    color: var(--teal);
    font-weight: 500;
  }

  /* ============================================
   05 — ARCHITECTURE (LIGHT)
   AutoLink as hub workspace, Website Engine and
   Marketing Manager as output surfaces that render
   from it. Hub-and-spokes hierarchy.
   ============================================ */
  .systems {
    background: var(--paper);
  }

  /* Outer composition wrapper */
  .systems-arch {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* TIER 1: hub card (AutoLink) */
  .system-card.is-hub {
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-xl);
    padding: 32px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-shadow: var(--shadow-card);
    transition: all var(--dur-base) var(--ease-out-expo);
    overflow: hidden;
  }

  .system-card.is-hub::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 12% 18%, rgba(62, 207, 178, 0.06) 0%, transparent 50%),
      radial-gradient(circle at 88% 82%, rgba(62, 207, 178, 0.04) 0%, transparent 55%);
    pointer-events: none;
  }

  .system-card.is-hub:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
  }

  @media (min-width: 900px) {
    .system-card.is-hub {
      padding: 44px;
    }
  }

  .system-hub-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 10px;
    background: var(--paper-recess);
    border: 1px solid var(--paper-line);
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--ink-50);
    align-self: flex-start;
    position: relative;
    z-index: 1;
  }

  .system-hub-tag strong {
    color: var(--teal-deep);
    font-weight: 500;
  }

  .system-hub-tag-pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal-deep);
    box-shadow: 0 0 0 3px rgba(31, 138, 117, 0.12);
  }

  .system-hub-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    position: relative;
    z-index: 1;
  }

  @media (min-width: 900px) {
    .system-hub-body {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
      gap: 48px;
      align-items: start;
    }
  }

  .system-hub-head {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .system-hub-name {
    font-size: 40px;
    line-height: 1.04;
  }

  @media (min-width: 900px) {
    .system-hub-name {
      font-size: 56px;
    }
  }

  .system-hub-role {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-70);
    max-width: 38ch;
  }

  .system-hub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--paper-line-soft);
    border-bottom: 1px solid var(--paper-line-soft);
    padding: 18px 0;
  }

  @media (max-width: 575px) {
    .system-hub-grid {
      display: block;
    }

    .protocol-grid {
      display: block;
    }

    .protocol-acp-envelope {
      font-size: 6px;
    }
  }

  .system-hub-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 14px;
    border-right: 1px solid var(--paper-line-soft);
  }

  .system-hub-stat:last-child {
    border-right: none;
  }

  .system-hub-stat:first-child {
    padding-left: 0;
  }

  .system-hub-stat-num {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink-100);
    line-height: 1;
  }

  @media (min-width: 900px) {
    .system-hub-stat-num {
      font-size: 28px;
    }
  }

  .system-hub-stat-label {
    font-size: 12px;
    color: var(--ink-50);
  }

  .system-hub-list {
    padding-top: 0;
    border-top: none;
    margin-top: 0;
    gap: 12px;
  }

  .system-hub-link {
    align-self: flex-start;
    margin-top: 4px;
  }

  /* SPINE: visual connector between hub and outputs */
  .systems-spine {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 0;
  }

  .systems-spine-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--ink-50);
    text-transform: uppercase;
  }

  .systems-spine-line {
    display: block;
    width: 1px;
    height: 32px;
    background: linear-gradient(180deg, var(--paper-line) 0%, transparent 100%);
  }

  /* TIER 2: paired output cards */
  .systems-outputs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  @media (min-width: 768px) {
    .systems-outputs {
      grid-template-columns: repeat(2, 1fr);
      gap: 22px;
    }
  }



  /* Base system card (legacy, used by output tier) */
  .system-card {
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-xl);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: var(--shadow-card);
    transition: all var(--dur-base) var(--ease-out-expo);
    position: relative;
  }

  .system-card:hover {
    transform: translateY(-3px);
    border-color: var(--teal-deep-border);
    box-shadow: var(--shadow-card-hover);
  }

  .system-card-num {
    font-size: 11px;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--ink-50);
  }

  .system-card-num strong {
    color: var(--teal-deep);
    font-weight: 500;
  }

  .system-card.is-coral .system-card-num strong {
    color: var(--coral-deep);
  }

  .system-card.is-purple .system-card-num strong {
    color: var(--purple-deep);
  }

  .system-card-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .system-card-name {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--ink-100);
    line-height: 1.1;
  }

  .system-card-role {
    font-size: 12px;
    color: var(--ink-50);
    letter-spacing: 0.02em;
  }

  .system-card-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-70);
  }

  .system-card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--paper-line-soft);
    margin-top: auto;
  }

  .system-card-list-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-90);
  }

  .system-card-list-pip {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--teal-deep);
    flex-shrink: 0;
    margin-top: 8px;
  }

  .system-card.is-coral .system-card-list-pip {
    background: var(--coral-deep);
  }

  .system-card.is-purple .system-card-list-pip {
    background: var(--purple-deep);
  }

  .system-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-family: var(--font-display);
    font-size: 13px;
    color: var(--teal-deep);
    font-weight: 500;
    transition: color var(--dur-fast);
  }

  .system-card-link:hover {
    color: var(--teal-deep);
    border-bottom: 1px solid currentColor;
  }

  .system-card-link .arrow {
    transition: transform var(--dur-base) var(--ease-out-expo);
  }

  .system-card-link:hover .arrow {
    transform: translateX(3px);
  }

  .system-card.is-coral .system-card-link {
    color: var(--coral-deep);
  }

  .system-card.is-purple .system-card-link {
    color: var(--purple-deep);
  }

  /* ============================================
   06 — LIVE FLOW (DARK)
   Stylized canvas of event flow from inventory
   to outcomes. Visual abstraction of the system
   working.
   ============================================ */
  .flow {
    padding: 100px 0;
  }

  @media (min-width: 768px) {
    .flow {
      padding: 140px 0;
    }
  }

  .flow-canvas {
    background: rgba(11, 19, 32, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-xl);
    padding: 36px 24px;
    position: relative;
    overflow: hidden;
    min-height: 320px;
    box-shadow: var(--shadow-dark-lg);
  }

  .flow-tier {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
  }

  .flow-tier:last-child {
    margin-bottom: 0;
  }

  .flow-tier-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--d-ink-50);
    flex-shrink: 0;
    min-width: 100px;
  }

  .flow-tier-nodes {
    flex: 1;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .flow-node {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: rgba(62, 207, 178, 0.1);
    border: 1px solid rgba(62, 207, 178, 0.3);
    animation: flow-pulse 2s ease infinite;
  }

  .flow-node:nth-child(2n) {
    animation-delay: 0.3s;
  }

  .flow-node:nth-child(3n) {
    animation-delay: 0.6s;
  }

  .flow-node:nth-child(4n) {
    animation-delay: 0.9s;
  }

  .flow-tier.is-build .flow-node {
    background: rgba(179, 136, 255, 0.1);
    border-color: rgba(179, 136, 255, 0.3);
  }

  .flow-tier.is-outcome .flow-node {
    background: rgba(232, 80, 42, 0.1);
    border-color: rgba(232, 80, 42, 0.3);
  }


  .flow-connector {
    height: 24px;
    display: flex;
    justify-content: center;
    margin: -8px 0;
  }

  .flow-connector::before {
    content: "";
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, rgba(62, 207, 178, 0.3), transparent);
  }

  /* ============================================
   07 — LAYOUTS (LIGHT)
   APEX / DRIVE / FLEET layout cards.
   ============================================ */
  .layouts {
    background: var(--paper);
  }

  .layouts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  @media (min-width: 900px) {
    .layouts-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }
  }

  .layout-card {
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: all var(--dur-base) var(--ease-out-expo);
    display: flex;
    flex-direction: column;
  }

  .layout-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--ink-30);
  }

  .layout-preview {
    aspect-ratio: 16 / 10;
    background: var(--paper-recess);
    border-bottom: 1px solid var(--paper-line);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* padding: 12px; */
    gap: 6px;
  }

  /* APEX — dark/premium preview */
  .layout-card.is-apex .layout-preview {
    background: #0a0a0a;
    border-bottom-color: #2a2a2a;
  }

  .layout-card.is-apex .layout-preview .skeleton {
    background: rgba(255, 255, 255, 0.08);
  }

  .layout-card.is-apex .layout-preview .skeleton.accent {
    background: rgba(234, 179, 8, 0.4);
  }

  /* DRIVE — clean/blue preview */
  .layout-card.is-drive .layout-preview {
    background: #ffffff;
  }

  .layout-card.is-drive .layout-preview .skeleton {
    background: rgba(20, 17, 14, 0.08);
  }

  .layout-card.is-drive .layout-preview .skeleton.accent {
    background: rgba(56, 132, 255, 0.5);
  }

  /* FLEET — industrial/yellow preview */
  .layout-card.is-fleet .layout-preview {
    background: #fefce8;
  }

  .layout-card.is-fleet .layout-preview .skeleton {
    background: rgba(20, 17, 14, 0.1);
  }

  .layout-card.is-fleet .layout-preview .skeleton.accent {
    background: rgba(245, 230, 0, 0.7);
  }

  .layout-preview .skeleton {
    border-radius: 3px;
    height: 6px;
  }

  .layout-preview .skeleton.tall {
    height: 14px;
  }

  .layout-preview .skeleton.short {
    width: 40%;
  }

  .layout-preview .skeleton.short-2 {
    width: 60%;
  }

  .layout-preview .skeleton.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    height: auto;
    background: transparent !important;
    margin-top: 8px;
  }

  .layout-preview .skeleton.grid>div {
    aspect-ratio: 4 / 3;
    border-radius: 3px;
  }

  .layout-card.is-apex .skeleton.grid>div {
    background: rgba(255, 255, 255, 0.06);
  }

  .layout-card.is-drive .skeleton.grid>div {
    background: rgba(20, 17, 14, 0.06);
  }

  .layout-card.is-fleet .skeleton.grid>div {
    background: rgba(20, 17, 14, 0.08);
  }

  .layout-info {
    padding: 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .layout-name {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink-100);
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
  }

  .layout-name-meta {
    font-size: 14px;
    font-weight: 400;
    color: var(--ink-50);
    letter-spacing: 0.02em;
  }

  .layout-tag {
    font-size: 14px;
    color: var(--ink-50);
    letter-spacing: 0.02em;
  }

  .layout-desc {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-70);
    margin-top: 4px;
  }

  /* ============================================
   08 — HOW IT WORKS (DARK)
   Sticky-scroll choreographed 4-step walkthrough.
   ============================================ */
  .walkthrough {
    padding: 100px 0;
  }

  @media (min-width: 768px) {
    .walkthrough {
      padding: 140px 0;
    }
  }

  .walkthrough-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  @media (min-width: 900px) {
    .walkthrough-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }
  }

  .walkthrough-step {
    background: rgba(11, 19, 32, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-xl);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
  }

  .walkthrough-step-num {
    font-size: 11px;
    letter-spacing: var(--tracking-label);
    color: var(--teal);
  }

  .walkthrough-step-num strong {
    color: var(--d-ink-100);
    font-weight: 500;
  }

  .walkthrough-step-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink-100);
    line-height: 1.2;
  }

  .walkthrough-step-desc {
    font-size: 14px;
    line-height: 1.55;
    color: var(--d-ink-70);
  }

  .walkthrough-step-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--d-ink-50);
    letter-spacing: 0.02em;
    padding-top: 12px;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* ============================================
   09 — METRICS (LIGHT)
   4 cards with count-up numbers.
   ============================================ */
  .metrics {
    background: var(--paper);
  }

  .metrics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

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

  @media (min-width: 1000px) {
    .metrics-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }
  }

  .metric-card {
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-lg);
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: var(--shadow-card);
  }

  .metric-card-label {
    font-size: 12px;
    letter-spacing: var(--tracking-base);
    text-transform: uppercase;
    color: var(--ink-50);
  }

  .metric-card-value {
    font-family: var(--font-mono);
    font-size: clamp(36px, 4.2vw, 52px);
    font-weight: 600;
    letter-spacing: -0.04em;
    color: var(--ink-100);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
    margin-top: 4px;
  }

  .metric-card-suffix {
    font-family: var(--font-mono);
    font-size: 0.42em;
    margin-left: 6px;
    font-weight: 500;
  }

  .metric-card.is-teal .metric-card-suffix {
    color: var(--teal-deep);
  }

  .metric-card.is-coral .metric-card-suffix {
    color: var(--coral-deep);
  }

  .metric-card.is-purple .metric-card-suffix {
    color: var(--purple-deep);
  }

  .metric-card-desc {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-70);
    margin-top: 6px;
  }



  /* ============================================
   10 — PILOTS (LIGHT, deeper cream)
   Real pilot dealers: Zee Motors, Keller Ford, FAM Vans.
   ============================================ */
  .pilots {
    background: var(--paper-deep);
    border-top: 1px solid var(--paper-line);
  }

  .pilot-quote-block {
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-xl);
    padding: 32px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    margin-bottom: 32px;
    box-shadow: var(--shadow-card);
  }

  @media (min-width: 900px) {
    .pilot-quote-block {
      grid-template-columns: 100px 1fr;
      gap: 36px;
      padding: 48px;
    }
  }

  .pilot-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    color: white;
    letter-spacing: -0.02em;
  }

  @media (min-width: 900px) {
    .pilot-avatar {
      width: 100px;
      height: 100px;
      font-size: 28px;
    }
  }

  .pilot-avatar.is-zee {
    background: linear-gradient(135deg, var(--teal-deep), var(--purple-deep));
  }

  .pilot-avatar.is-keller {
    background: linear-gradient(135deg, var(--coral-deep), #8B2810);
  }

  .pilot-avatar.is-fam {
    background: linear-gradient(135deg, #B87B0A, #5F3E00);
  }

  .pilot-quote-text {
    font-family: var(--font-display);
    font-size: clamp(19px, 2vw, 20px);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.35;
    color: var(--ink-100);
    margin-bottom: 16px;
    text-wrap: balance;
  }

  .pilot-quote-text::before {
    content: "“";
    display: block;
    font-family: var(--font-display);
    font-size: 56px;
    line-height: 0.4;
    color: var(--coral-deep);
  }

  .pilot-quote-cite {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .pilot-quote-name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-100);
  }

  .pilot-quote-role {
    font-size: 12px;
    color: var(--ink-50);
    letter-spacing: 0.02em;
  }

  .pilots-logos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--paper-card);
  }

  @media (min-width: 600px) {
    .pilots-logos {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .pilot-logo {
    padding: 24px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink-70);
    border-right: 1px solid var(--paper-line-soft);
    border-bottom: 1px solid var(--paper-line-soft);
    text-align: center;
    transition: color var(--dur-base), background var(--dur-base);
  }

  .pilot-logo:hover {
    color: var(--ink-100);
    background: var(--paper-deep);
  }

  /* ============================================
   11 — AUDIT FUNNEL (DARK)
   Domain entry → instant 4-point check → score
   reveal with email gate → confirmation/calendar.
   Simplified for v1: just the entry stage with
   compelling copy and design that suggests the
   funnel exists. JS state machine to come.
   ============================================ */
  .audit {
    padding: 100px 0;
  }

  @media (min-width: 768px) {
    .audit {
      padding: 140px 0;
    }
  }

  .audit::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(ellipse 70% 60% at 50% 50%, rgba(232, 80, 42, 0.06), transparent 70%);
    filter: blur(40px);
  }

  .audit-form-block {
    background: rgba(11, 19, 32, 0.6);
    border: 1px solid rgba(62, 207, 178, 0.2);
    border-radius: var(--r-xl);
    padding: 28px 24px;
    position: relative;
    box-shadow: var(--shadow-dark-lg);
  }

  @media (min-width: 768px) {
    .audit-form-block {
      padding: 40px;
    }
  }

  .audit-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  @media (min-width: 700px) {
    .audit-form {
      flex-direction: row;
    }
  }

  .audit-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    background: rgba(6, 9, 15, 0.7);
    border: 1px solid rgba(62, 207, 178, 0.25);
    border-radius: var(--r-lg);
    transition: border-color var(--dur-base);
    overflow: hidden;
  }

  .audit-input-wrap:focus-within {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(62, 207, 178, 0.15);
  }

  .audit-input-prefix {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px 0 16px;
    font-size: 13px;
    color: var(--d-ink-50);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    height: 56px;
    flex-shrink: 0;
  }

  .audit-input-prefix-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 6px var(--teal);
    animation: blink 1.6s ease infinite;
  }

  .audit-input {
    flex: 1;
    min-width: 0;
    height: 56px;
    background: transparent;
    border: 0;
    padding: 0 18px;
    color: var(--d-ink-100);
    font-size: 15px;
    outline: 0;
  }

  .audit-input::placeholder {
    color: var(--d-ink-50);
  }

  .audit-submit {
    height: 56px;
    padding: 0 24px;
    background: var(--coral);
    color: white;
    border-radius: var(--r-lg);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    transition: background var(--dur-base), transform var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base);
    box-shadow: 0 8px 30px -8px rgba(232, 80, 42, 0.5);
    cursor: pointer;
    justify-content: center;
  }

  .audit-submit:hover {
    background: var(--coral-bright);
    transform: translateY(-1px);
    box-shadow: 0 12px 40px -8px rgba(232, 80, 42, 0.7);
  }

  .audit-submit .arrow {
    transition: transform var(--dur-base) var(--ease-out-expo);
  }

  .audit-submit:hover .arrow {
    transform: translateX(3px);
  }

  .audit-disclaimer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 12px;
    color: var(--d-ink-50);
    letter-spacing: 0.02em;
    flex-wrap: wrap;
  }

  .audit-disclaimer-pip {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--teal);
  }

  /* ============================================
   12 — CTA (DARK — final close)
   ============================================ */
  .cta {
    padding: 100px 0 80px;
  }

  @media (min-width: 768px) {
    .cta {
      padding: 140px 0 100px;
    }
  }

  .cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(ellipse 80% 60% at 50% 50%, rgba(232, 80, 42, 0.08), transparent 70%);
    filter: blur(40px);
  }

  .cta-title {
    font-family: var(--font-display);
    font-size: var(--type-5xl);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 0.96;
    color: var(--d-ink-100);
    max-width: 1000px;
    margin-bottom: 22px;
    text-wrap: balance;
  }

  .cta-title em {
    font-style: italic;
    color: var(--coral);
    font-weight: 500;
  }

  .cta-sub {
    font-size: var(--type-lg);
    line-height: 1.55;
    color: var(--d-ink-70);
    max-width: 640px;
    margin-bottom: 36px;
  }

  .cta-sub strong {
    color: var(--d-ink-100);
    font-weight: 500;
  }

  .cta-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .cta-actions .btn {
    height: 52px;
    padding: 0 26px;
    font-size: 14px;
  }

  /* ============================================
   13 — FAQ (LIGHT)
   Schema.org/FAQPage marked up natively.
   ============================================ */
  .faq {
    background: var(--paper);
  }

  .faq-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--paper-line);
  }

  .faq-item {
    border-bottom: 1px solid var(--paper-line);
  }

  .faq-item summary {
    cursor: pointer;
    padding: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    list-style: none;
    transition: color var(--dur-fast);
  }

  .faq-item summary::-webkit-details-marker {
    display: none;
  }

  .faq-item-q {
    font-family: var(--font-display);
    font-size: clamp(17px, 1.5vw, 20px);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink-100);
    flex: 1;
    line-height: 1.35;
    text-wrap: balance;
  }

  .faq-item-toggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--paper-deep);
    border: 1px solid var(--paper-line);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    transition: all var(--dur-base) var(--ease-out-expo);
  }

  .faq-item-toggle::before,
  .faq-item-toggle::after {
    content: "";
    position: absolute;
    background: var(--ink-70);
    border-radius: 1px;
  }

  .faq-item-toggle::before {
    width: 12px;
    height: 1.5px;
  }

  .faq-item-toggle::after {
    width: 1.5px;
    height: 12px;
    transition: transform var(--dur-base), opacity var(--dur-base);
  }

  .faq-item[open] .faq-item-toggle::after {
    transform: rotate(90deg);
    opacity: 0;
  }

  .faq-item[open] .faq-item-toggle {
    background: var(--teal-deep-bg);
    border-color: var(--teal-deep-border);
  }

  .faq-item[open] .faq-item-toggle::before {
    background: var(--teal-deep);
  }

  .faq-item-a {
    padding: 0 0 28px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-70);
    max-width: 720px;
  }

  .faq-item-a strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .faq-item-a p+p {
    margin-top: 10px;
  }
}

/* ============================================================
   PAGE: about
   ============================================================ */
body.page-about {
  /* about.css */

  /* ============================================
   DEALERSGEAR — ABOUT PAGE
   ============================================
   Manifesto-style page. The story behind the
   product. Where ACP authorship is disclosed
   openly.

   Brand color lean: teal (foundational, neutral).
   ============================================ */

  /* ============================================
   01 — HERO (LIGHT) — manifesto opening
   ============================================ */
  .hero {
    position: relative;
    background: var(--paper);
    color: var(--ink-100);
    overflow: hidden;
    isolation: isolate;
    padding: 120px 0 80px;
  }

  @media (min-width: 768px) {
    .hero {
      padding: 160px 0 110px;
    }
  }

  @media (min-width: 1100px) {
    .hero {
      padding: 180px 0 140px;
    }
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
      linear-gradient(rgba(31, 138, 117, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(31, 138, 117, 0.035) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black, transparent 75%);
  }

  .hero::after {
    content: "";
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 1400px;
    height: 800px;
    background:
      radial-gradient(ellipse 50% 40% at 30% 50%, rgba(31, 138, 117, 0.08), transparent 70%),
      radial-gradient(ellipse 50% 40% at 70% 50%, rgba(194, 74, 31, 0.05), transparent 70%);
    filter: blur(70px);
    z-index: -1;
  }

  .hero-inner {
    max-width: 980px;
    position: relative;
    z-index: 1;
  }

  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    background: var(--teal-deep-bg);
    border: 1px solid var(--teal-deep-border);
    border-radius: var(--r-pill);
    font-size: 11px;
    letter-spacing: var(--tracking-label);
    color: var(--teal-deep);
    margin-bottom: 32px;
  }

  .hero-eyebrow-pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal-deep);
    box-shadow: 0 0 8px rgba(31, 138, 117, 0.5);
    animation: blink 2s ease infinite;
  }

  .hero-title {
    font-family: var(--font-display);
    font-size: clamp(38px, 5.6vw, 76px);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1.0;
    color: var(--ink-100);
    margin-bottom: 32px;
    text-wrap: balance;
    max-width: 920px;
  }

  .hero-title em {
    font-style: italic;
    color: var(--teal-deep);
    font-weight: 500;
  }

  .hero-lede {
    max-width: 680px;
    font-size: clamp(17px, 1.5vw, 22px);
    line-height: 1.5;
    color: var(--ink-90);
    font-weight: 400;
  }

  .hero-lede strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .hero-lede em {
    color: var(--teal-deep);
    font-style: italic;
  }

  .hero-lede p+p {
    margin-top: 18px;
  }

  /* ============================================
   02 — THE THESIS (LIGHT)
   ============================================ */
  .thesis {
    background: var(--paper);
    border-top: 1px solid var(--paper-line-soft);
  }

  .thesis-header {
    margin-bottom: 36px;
  }

  .thesis-header .section-num strong {
    color: var(--teal-deep);
  }

  .thesis-header .section-title em {
    color: var(--teal-deep);
  }

  .thesis-prose {
    max-width: 740px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink-90);
  }

  .thesis-prose p {
    margin-bottom: 22px;
  }

  .thesis-prose p:last-child {
    margin-bottom: 0;
  }

  .thesis-prose strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .thesis-prose em {
    color: var(--teal-deep);
    font-style: italic;
  }

  .thesis-callout {
    margin: 32px 0;
    padding: 24px 28px;
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-left: 3px solid var(--teal-deep);
    border-radius: var(--r-md);
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.45;
    color: var(--ink-100);
    font-style: italic;
  }

  .thesis-callout::before {
    content: "”";
    display: block;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--teal-deep);
    line-height: 0.5;
    margin-bottom: 8px;
    opacity: 0.6;
  }

  /* ============================================
   03 — THE PIVOT (DARK) — signature scene
   ============================================ */
  .pivot {
    padding: 100px 0;
  }

  @media (min-width: 768px) {
    .pivot {
      padding: 140px 0;
    }
  }

  .pivot::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(ellipse 50% 40% at 30% 30%, rgba(232, 80, 42, 0.07), transparent 70%),
      radial-gradient(ellipse 50% 40% at 70% 70%, rgba(62, 207, 178, 0.06), transparent 70%);
  }

  .pivot-header {
    margin-bottom: 56px;
    max-width: 880px;
  }

  .pivot-header .section-num strong {
    color: var(--coral);
  }

  .pivot-header .section-title em {
    color: var(--coral);
  }

  .pivot-compare {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: stretch;
  }

  @media (min-width: 800px) {
    .pivot-compare {
      grid-template-columns: 1fr auto 1fr;
      gap: 32px;
      align-items: center;
    }
  }

  .pivot-side {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-xl);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .pivot-side.is-old {
    border-top: 4px solid var(--coral);
  }

  .pivot-side.is-new {
    border-top: 4px solid var(--teal);
  }

  .pivot-side-label {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
  }

  .pivot-side.is-old .pivot-side-label {
    color: var(--coral);
  }

  .pivot-side.is-new .pivot-side-label {
    color: var(--teal);
  }

  .pivot-side-title {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.25;
    color: var(--d-ink-100);
  }

  .pivot-side-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .pivot-side-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--d-ink-70);
  }

  .pivot-side-item strong {
    color: var(--d-ink-100);
    font-weight: 500;
  }

  .pivot-side-item-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
  }

  .pivot-side.is-old .pivot-side-item-icon {
    background: rgba(232, 80, 42, 0.12);
    border: 1px solid rgba(232, 80, 42, 0.3);
    color: var(--coral);
  }

  .pivot-side.is-new .pivot-side-item-icon {
    background: rgba(62, 207, 178, 0.12);
    border: 1px solid rgba(62, 207, 178, 0.3);
    color: var(--teal);
  }

  .pivot-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--d-ink-50);
    padding: 8px 0;
  }

  @media (min-width: 800px) {
    .pivot-arrow {
      padding: 0 8px;
      font-size: 44px;
    }
  }

  /* ============================================
   04 — THREE SYSTEMS PHILOSOPHY (LIGHT)
   ============================================ */
  .systems {
    background: var(--paper);
  }

  .systems-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .systems-header .section-num strong {
    color: var(--purple-deep);
  }

  .systems-header .section-title em {
    color: var(--purple-deep);
  }

  .systems-prose {
    max-width: 740px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink-80);
    margin-bottom: 40px;
  }

  .systems-prose strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .systems-prose em {
    color: var(--purple-deep);
    font-style: italic;
  }

  .systems-three {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  @media (min-width: 900px) {
    .systems-three {
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }
  }

  .sys-card {
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-lg);
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--shadow-card);
    transition: all var(--dur-base);
  }

  .sys-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
  }

  .sys-card.is-purple {
    border-top: 3px solid var(--purple-deep);
  }

  .sys-card.is-teal {
    border-top: 3px solid var(--teal-deep);
  }

  .sys-card.is-coral {
    border-top: 3px solid var(--coral-deep);
  }

  .sys-card-tag {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-50);
  }

  .sys-card-name {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink-100);
  }

  .sys-card-role {
    font-size: 14px;
    color: var(--ink-70);
    letter-spacing: 0.02em;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--paper-line-soft);
  }

  .sys-card.is-purple .sys-card-role {
    color: var(--purple-deep);
  }

  .sys-card.is-teal .sys-card-role {
    color: var(--teal-deep);
  }

  .sys-card.is-coral .sys-card-role {
    color: var(--coral-deep);
  }

  .sys-card-why {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-90);
  }

  .sys-card-why strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  /* ============================================
   05 — THE PROTOCOL (DARK) — ACP disclosure
   ============================================ */
  .protocol {
    padding: 100px 0;
  }

  @media (min-width: 768px) {
    .protocol {
      padding: 130px 0;
    }
  }

  .protocol::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(62, 207, 178, 0.07), transparent 70%);
  }

  .protocol-header {
    margin-bottom: 48px;
    max-width: 920px;
  }

  .protocol-header .section-num strong {
    color: var(--teal);
  }

  .protocol-header .section-title em {
    color: var(--teal);
  }

  .protocol-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
    margin: 0 auto;
  }

  @media (min-width: 900px) {
    .protocol-grid {
      grid-template-columns: 1.3fr 1fr;
      gap: 48px;
      align-items: start;
    }
  }

  .protocol-copy {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--d-ink-80);
  }

  .protocol-copy p {
    margin-bottom: 18px;
  }

  .protocol-copy p:last-child {
    margin-bottom: 0;
  }

  .protocol-copy strong {
    color: var(--d-ink-100);
    font-weight: 500;
  }

  .protocol-copy em {
    color: var(--teal);
    font-style: italic;
  }

  .protocol-card {
    background: rgba(11, 19, 32, 0.65);
    border: 1px solid rgba(62, 207, 178, 0.2);
    border-radius: var(--r-xl);
    padding: 28px;
    box-shadow: var(--shadow-dark-lg);
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .protocol-card-label {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--teal);
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .protocol-card-label-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 5px var(--teal);
    animation: blink 1.8s ease infinite;
  }

  .protocol-card-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink-100);
    line-height: 1.25;
  }

  .protocol-card-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .protocol-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
  }

  .protocol-field:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .protocol-field-key {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--d-ink-50);
  }

  .protocol-field-value {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--d-ink-100);
    letter-spacing: -0.01em;
  }

  .protocol-field-value.is-mono {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.02em;
  }

  .protocol-field-value a {
    color: var(--teal);
    text-decoration: underline;
    text-decoration-color: rgba(62, 207, 178, 0.4);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--dur-base);
  }

  .protocol-field-value a:hover {
    text-decoration-color: var(--teal);
  }

  .protocol-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 12px 16px;
    background: rgba(62, 207, 178, 0.08);
    border: 1px solid rgba(62, 207, 178, 0.25);
    border-radius: var(--r-pill);
    font-size: 12px;
    color: var(--teal);
    transition: all var(--dur-base);
    align-self: flex-start;
  }

  .protocol-link:hover {
    background: rgba(62, 207, 178, 0.14);
    border-color: var(--teal);
  }

  .protocol-link-arrow {
    transition: transform var(--dur-base) var(--ease-out-expo);
  }

  .protocol-link:hover .protocol-link-arrow {
    transform: translate(3px, -3px);
  }

  /* ============================================
   06 — PRINCIPLES (LIGHT)
   ============================================ */
  .principles {
    background: var(--paper);
  }

  .principles-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .principles-header .section-num strong {
    color: var(--coral-deep);
  }

  .principles-header .section-title em {
    color: var(--coral-deep);
  }

  .principles-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  @media (min-width: 800px) {
    .principles-list {
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
  }

  .principle {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    padding: 26px;
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    align-items: flex-start;
  }

  .principle-num {
    font-family: var(--font-mono);
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: var(--ink-30);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    min-width: 50px;
    font-style: italic;
  }

  .principle-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .principle-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink-100);
    line-height: 1.3;
  }

  .principle-desc {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-70);
  }

  .principle-desc strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  /* ============================================
   07 — THE TEAM (LIGHT) — role tiles, no photos
   ============================================ */
  .team {
    background: var(--paper-deep);
    border-top: 1px solid var(--paper-line);
    border-bottom: 1px solid var(--paper-line);
  }

  .team-header {
    margin-bottom: 36px;
    max-width: 880px;
  }

  .team-header .section-num strong {
    color: var(--teal-deep);
  }

  .team-header .section-title em {
    color: var(--teal-deep);
  }

  .team-note {
    max-width: 720px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-70);
    margin-bottom: 36px;
    padding: 14px 18px;
    background: var(--paper-card);
    border: 1px dashed var(--paper-line);
    border-radius: var(--r-md);
  }

  .team-note strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  @media (min-width: 700px) {
    .team-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1000px) {
    .team-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }
  }

  .role-card {
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-lg);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--shadow-card);
  }

  .role-card-mono {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--teal-deep), #0F5A4D);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
  }

  .role-card.is-coral .role-card-mono {
    background: linear-gradient(135deg, var(--coral-deep), #8B3415);
  }

  .role-card.is-purple .role-card-mono {
    background: linear-gradient(135deg, var(--purple-deep), #4A3680);
  }

  .role-card-name {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink-100);
  }

  .role-card-role {
    font-size: 12px;
    color: var(--ink-50);
    letter-spacing: 0.02em;
  }

  .role-card-desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-80);
    margin-top: 4px;
  }

  /* ============================================
   08 — PILOTS & PARTNERS (LIGHT)
   ============================================ */
  .partners {
    background: var(--paper);
  }

  .partners-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .partners-header .section-num strong {
    color: var(--purple-deep);
  }

  .partners-header .section-title em {
    color: var(--purple-deep);
  }

  .partners-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
  }

  @media (min-width: 900px) {
    .partners-grid {
      grid-template-columns: 1fr 1fr;
      gap: 36px;
    }
  }

  .partners-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .partners-col-title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink-100);
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--paper-line);
    margin-bottom: 8px;
  }

  .partners-col-title-pip {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--teal-deep);
  }

  .partners-col.is-partners .partners-col-title-pip {
    background: var(--purple-deep);
  }

  .partner-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    padding: 14px 16px;
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-md);
    align-items: center;
    transition: all var(--dur-base);
  }

  .partner-row:hover {
    background: var(--paper-deep);
  }

  .partner-row-name {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-100);
    letter-spacing: -0.01em;
  }

  .partner-row-desc {
    font-size: 12px;
    color: var(--ink-50);
    letter-spacing: 0.02em;
    margin-top: 2px;
  }

  .partner-row-tag {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 100px;
    flex-shrink: 0;
  }

  .partner-row-tag.pilot {
    background: var(--teal-deep-bg);
    border: 1px solid var(--teal-deep-border);
    color: var(--teal-deep);
  }

  .partner-row-tag.partner {
    background: var(--purple-deep-bg);
    border: 1px solid var(--purple-deep-border);
    color: var(--purple-deep);
  }

  /* ============================================
   09 — CTA (DARK)
   ============================================ */
  .cta {
    padding: 100px 0 80px;
  }

  @media (min-width: 768px) {
    .cta {
      padding: 140px 0 100px;
    }
  }

  .cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(62, 207, 178, 0.08), transparent 70%);
    filter: blur(40px);
  }

  .cta-title {
    font-family: var(--font-display);
    font-size: var(--type-5xl);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 0.96;
    color: var(--d-ink-100);
    max-width: 1000px;
    margin-bottom: 22px;
    text-wrap: balance;
  }

  .cta-title em {
    font-style: italic;
    color: var(--teal);
    font-weight: 500;
  }

  .cta-sub {
    font-size: var(--type-lg);
    line-height: 1.55;
    color: var(--d-ink-70);
    max-width: 640px;
    margin-bottom: 36px;
  }

  .cta-sub strong {
    color: var(--d-ink-100);
    font-weight: 500;
  }

  .cta-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .cta-actions .btn {
    height: 52px;
    padding: 0 26px;
    font-size: 14px;
  }

  /* ============================================
   10 — FAQ (LIGHT)
   ============================================ */
  .faq {
    background: var(--paper);
  }

  .faq-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .faq-header .section-num strong {
    color: var(--teal-deep);
  }

  .faq-header .section-title em {
    color: var(--teal-deep);
  }

  .faq-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--paper-line);
  }

  .faq-item {
    border-bottom: 1px solid var(--paper-line);
  }

  .faq-item summary {
    cursor: pointer;
    padding: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    list-style: none;
  }

  .faq-item summary::-webkit-details-marker {
    display: none;
  }

  .faq-item-q {
    font-family: var(--font-display);
    font-size: clamp(17px, 1.5vw, 20px);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink-100);
    flex: 1;
    line-height: 1.35;
    text-wrap: balance;
  }

  .faq-item-toggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--paper-deep);
    border: 1px solid var(--paper-line);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    transition: all var(--dur-base);
  }

  .faq-item-toggle::before,
  .faq-item-toggle::after {
    content: "";
    position: absolute;
    background: var(--ink-70);
    border-radius: 1px;
  }

  .faq-item-toggle::before {
    width: 12px;
    height: 1.5px;
  }

  .faq-item-toggle::after {
    width: 1.5px;
    height: 12px;
    transition: transform var(--dur-base), opacity var(--dur-base);
  }

  .faq-item[open] .faq-item-toggle::after {
    transform: rotate(90deg);
    opacity: 0;
  }

  .faq-item[open] .faq-item-toggle {
    background: var(--teal-deep-bg);
    border-color: var(--teal-deep-border);
  }

  .faq-item[open] .faq-item-toggle::before {
    background: var(--teal-deep);
  }

  .faq-item-a {
    padding: 0 0 28px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-70);
    max-width: 720px;
  }

  .faq-item-a strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .faq-item-a p+p {
    margin-top: 10px;
  }

  /* ============================================
   11 — AEO ANSWERS (LIGHT)
   Visible answer-first Q&A for AI engine citation.
   ============================================ */
  .aeo {
    background: var(--paper-deep);
    border-top: 1px solid var(--paper-line);
    padding: 72px 0;
  }

  .aeo-item {
    width: 100%;
    max-width: var(--shell-max);
    margin: 0 auto;
    padding: 0 var(--shell-pad);
  }

  .aeo-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .aeo-q {
    font-family: var(--font-display);
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink-100);
    line-height: 1.35;
    margin-bottom: 14px;
  }

  .aeo-a {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-70);
    margin-bottom: 10px;
  }

  .aeo-a-long {
    font-size: 14px;
    line-height: 1.7;
    color: var(--ink-70);
    margin-bottom: 10px;
  }

  .aeo-facts {
    margin-top: 14px;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    list-style: disc;
    margin-bottom: 25px;
  }

  .aeo-facts li {
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-70);
  }
}

/* ============================================================
   PAGE: audit
   ============================================================ */
body.page-audit {
  /* audit.css */

  /* ============================================
   DEALERSGEAR — AUDIT FUNNEL LANDING PAGE
   ============================================
   This is NOT a marketing page. It is a
   conversion machine.

   HERO = full-stage funnel:
     Stage 1: domain entry
     Stage 2: checking animation (47 points)
     Stage 3: score reveal + email gate
     Stage 4: calendar booking

   Below hero: supporting trust + detail content.
   Brand color lean: TEAL (operational/diagnostic).
   ============================================ */

  /* ============================================
   HERO — THE FUNNEL
   ============================================ */
  .hero {
    position: relative;
    background: var(--paper);
    color: var(--ink-100);
    overflow: hidden;
    isolation: isolate;
    padding: 110px 0 80px;
    min-height: 100vh;
    display: flex;
    align-items: center;
  }

  @media (min-width: 768px) {
    .hero {
      padding: 140px 0 100px;
    }
  }

  @media (min-width: 1100px) {
    .hero {
      padding: 150px 0 120px;
      min-height: 92vh;
    }
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
      linear-gradient(rgba(31, 138, 117, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(31, 138, 117, 0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black, transparent 90%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black, transparent 90%);
  }

  .hero::after {
    content: "";
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 1500px;
    height: 900px;
    background:
      radial-gradient(ellipse 45% 35% at 30% 50%, rgba(31, 138, 117, 0.11), transparent 70%),
      radial-gradient(ellipse 45% 35% at 70% 50%, rgba(194, 74, 31, 0.06), transparent 70%);
    filter: blur(60px);
    z-index: -1;
  }

  .hero .shell {
    width: 100%;
  }

  /* eyebrow above the funnel */
  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    background: var(--teal-deep-bg);
    border: 1px solid var(--teal-deep-border);
    border-radius: var(--r-pill);
    font-size: 11px;
    letter-spacing: var(--tracking-label);
    color: var(--teal-deep);
    margin-bottom: 28px;
  }

  .hero-eyebrow-pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal-deep);
    box-shadow: 0 0 8px rgba(31, 138, 117, 0.5);
    animation: blink 2s ease infinite;
  }

  /* The funnel container — sits in the middle of hero */


  /* Each stage is a layer. Only one .is-active at a time. */
  .funnel-stage {
    display: none;
    animation: stage-in 0.5s var(--ease-out-expo);
  }

  .funnel-stage.is-active {
    display: block;
  }


  /* ============================================
   STAGE 1 — domain input
   ============================================ */
  .stage-title {
    font-family: var(--font-display);
    font-size: clamp(40px, 5.8vw, 76px);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 0.98;
    color: var(--ink-100);
    margin-bottom: 22px;
    text-wrap: balance;
  }

  .stage-title em {
    font-style: italic;
    color: var(--teal-deep);
    font-weight: 500;
    position: relative;
  }

  .stage-title em::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.05em;
    height: 0.06em;
    background: var(--teal-deep);
    opacity: 0.3;
    transform-origin: left;
    animation: underline-draw 1s var(--ease-out-expo) 0.4s both;
  }


  .stage-lede {
    max-width: 580px;
    margin-bottom: 38px;
    font-size: var(--type-lg);
    line-height: 1.55;
    color: var(--ink-70);
  }

  .stage-lede strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .stage-lede em {
    color: var(--teal-deep);
    font-style: italic;
  }

  /* Domain input field — the primary CTA */
  .audit-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 540px;
  }

  @media (min-width: 600px) {
    .audit-form {
      flex-direction: row;
      background: var(--paper-card);
      border: 1px solid var(--paper-line);
      border-radius: var(--r-pill);
      padding: 6px;
      gap: 0;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 20px 40px -20px rgba(20, 17, 14, 0.1);
      transition: all var(--dur-base) var(--ease-out-expo);
    }

    .audit-form:focus-within {
      border-color: var(--teal-deep);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 0 0 4px rgba(31, 138, 117, 0.1),
        0 20px 40px -20px rgba(31, 138, 117, 0.2);
    }
  }

  .audit-form-input {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-pill);
    padding: 0 22px;
    height: 60px;
  }

  @media (min-width: 600px) {
    .audit-form-input {
      border: 0;
      background: transparent;
      padding-left: 24px;
      height: auto;
    }
  }

  .audit-form-input::before {
    content: "https://";
    font-size: 14px;
    color: var(--ink-50);
    margin-right: 4px;
  }

  .audit-form input[type="text"] {
    flex: 1;
    border: 0;
    background: transparent;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
    color: var(--ink-100);
    letter-spacing: -0.015em;
    padding: 0;
    height: 100%;
    outline: 0;
    min-width: 0;
    width: 100%;
  }

  .audit-form input[type="text"]::placeholder {
    color: var(--ink-30);
    font-weight: 400;
  }

  .audit-form .btn {
    flex-shrink: 0;
    height: 60px;
    padding: 0 28px;
    font-size: 15px;
    font-weight: 500;
    border-radius: var(--r-pill);
  }

  @media (min-width: 600px) {
    .audit-form .btn {
      height: 48px;
      padding: 0 22px;
      font-size: 14px;
    }
  }

  .audit-form-meta {
    margin-top: 18px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-50);
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .audit-form-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  .audit-form-meta-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal-deep);
  }

  .audit-form-error {
    display: none;
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--coral-deep);
    letter-spacing: 0.02em;
  }

  .audit-form-error.is-visible {
    display: block;
  }

  /* ============================================
   STAGE 2 — checking animation
   ============================================ */
  .checking {
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-xl);
    padding: 36px;
    max-width: 620px;
    margin: 0 auto;
    text-align: left;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 30px 60px -20px rgba(20, 17, 14, 0.12);
  }

  @media (min-width: 768px) {
    .checking {
      padding: 44px;
    }
  }

  .checking-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
  }

  .checking-spinner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2.5px solid var(--paper-line);
    border-top-color: var(--teal-deep);
    animation: spin 0.9s linear infinite;
    flex-shrink: 0;
  }

  .checking-status {
    flex: 1;
    min-width: 0;
  }

  .checking-domain {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ink-50);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .checking-domain strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .checking-title {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink-100);
    line-height: 1.2;
  }

  /* Progress bar */
  .checking-progress {
    height: 4px;
    background: var(--paper-deep);
    border-radius: 100px;
    overflow: hidden;
    margin-bottom: 24px;
  }

  .checking-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--teal-deep), var(--coral-deep));
    border-radius: 100px;
    width: 0%;
    transition: width 0.3s linear;
  }

  /* Scrolling 47 points */
  .checking-feed {
    background: var(--paper-deep);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-md);
    padding: 14px 18px;
    height: 200px;
    overflow: hidden;
    position: relative;
    font-family: var(--font-mono);
    font-size: 12px;
  }

  .checking-feed::before,
  .checking-feed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 30px;
    z-index: 1;
    pointer-events: none;
  }

  .checking-feed::before {
    top: 0;
    background: linear-gradient(180deg, var(--paper-deep), transparent);
  }

  .checking-feed::after {
    bottom: 0;
    background: linear-gradient(0deg, var(--paper-deep), transparent);
  }

  .checking-feed-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: transform 0.35s var(--ease-out-expo);
  }

  .checking-feed-item {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
    color: var(--ink-70);
  }

  .checking-feed-item.is-current {
    color: var(--ink-100);
  }

  .checking-feed-item-num {
    font-size: 9px;
    letter-spacing: 0.08em;
    color: var(--ink-50);
  }

  .checking-feed-item.is-current .checking-feed-item-num {
    color: var(--teal-deep);
  }

  .checking-feed-item-label {
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .checking-feed-item-result {
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-50);
  }

  .checking-feed-item.is-pass .checking-feed-item-result {
    color: var(--teal-deep);
  }

  .checking-feed-item.is-fail .checking-feed-item-result {
    color: var(--coral-deep);
  }

  .checking-feed-item.is-warn .checking-feed-item-result {
    color: #B87B0A;
  }

  /* ============================================
   STAGE 3 — score reveal + email gate
   ============================================ */
  .score {
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
  }

  .score-head {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ink-50);
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .score-head-pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal-deep);
    box-shadow: 0 0 8px rgba(31, 138, 117, 0.5);
    animation: blink 1.4s ease infinite;
  }

  .score-domain {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink-100);
    letter-spacing: 0.02em;
    margin-bottom: 22px;
  }

  /* The big score */
  .score-number {
    font-family: var(--font-display);
    font-size: clamp(96px, 16vw, 180px);
    font-weight: 700;
    letter-spacing: -0.06em;
    line-height: 0.85;
    color: var(--ink-100);
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: flex-start;
    margin-bottom: 6px;
  }

  .score-number-out {
    font-family: var(--font-mono);
    font-size: 0.22em;
    color: var(--ink-50);
    font-weight: 400;
    letter-spacing: 0;
    margin-left: 8px;
    margin-top: 0.4em;
  }

  .score-grade {
    display: inline-block;
    padding: 5px 16px;
    background: var(--coral-deep-bg);
    border: 1px solid var(--coral-deep-border);
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--coral-deep);
    margin-bottom: 28px;
  }

  .score-grade.is-good {
    background: var(--teal-deep-bg);
    border-color: var(--teal-deep-border);
    color: var(--teal-deep);
  }

  .score-grade.is-meh {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.22);
    color: #B87B0A;
  }

  /* Breakdown by category */
  .score-breakdown {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 36px;
    text-align: left;
  }

  @media (min-width: 600px) {
    .score-breakdown {
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
    }
  }

  .score-cat {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 14px 16px;
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
    align-items: center;
  }

  .score-cat-info {
    min-width: 0;
  }

  .score-cat-name {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-100);
    letter-spacing: -0.015em;
    margin-bottom: 6px;
  }

  .score-cat-bar {
    height: 4px;
    background: var(--paper-deep);
    border-radius: 100px;
    overflow: hidden;
  }

  .score-cat-bar-fill {
    height: 100%;
    border-radius: 100px;
    background: var(--coral-deep);
    width: 0%;
    transition: width 1.1s var(--ease-out-expo);
  }

  .score-cat.is-good .score-cat-bar-fill {
    background: var(--teal-deep);
  }

  .score-cat.is-warn .score-cat-bar-fill {
    background: #B87B0A;
  }

  .score-cat-score {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--ink-100);
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
  }

  .score-cat-score-out {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-50);
    margin-left: 1px;
  }

  /* Email gate */
  .score-gate {
    background: var(--navy-900);
    border-radius: var(--r-xl);
    padding: 30px 28px;
    text-align: left;
    position: relative;
    overflow: hidden;
  }

  .score-gate::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232, 80, 42, 0.16), transparent 70%);
    pointer-events: none;
  }

  .score-gate>* {
    position: relative;
    z-index: 1;
  }

  .score-gate-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .score-gate-tag-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--coral);
    box-shadow: 0 0 5px var(--coral);
  }

  .score-gate-title {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--d-ink-100);
    margin-bottom: 10px;
  }

  .score-gate-title em {
    font-style: italic;
    color: var(--coral);
    font-weight: 500;
  }

  .score-gate-desc {
    font-size: 14px;
    line-height: 1.55;
    color: var(--d-ink-70);
    margin-bottom: 22px;
  }

  .score-gate-desc strong {
    color: var(--d-ink-100);
    font-weight: 500;
  }

  .score-gate-form {
    display: flex;
    gap: 10px;
    flex-direction: column;
  }

  @media (min-width: 600px) {
    .score-gate-form {
      flex-direction: row;
    }
  }

  .score-gate-form-input {
    flex: 1;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--r-pill);
    padding: 0 20px;
    height: 50px;
    transition: all var(--dur-base);
  }

  .score-gate-form-input:focus-within {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--coral);
    box-shadow: 0 0 0 3px rgba(232, 80, 42, 0.15);
  }

  .score-gate-form input[type="email"] {
    flex: 1;
    border: 0;
    background: transparent;
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--d-ink-100);
    padding: 0;
    outline: 0;
    min-width: 0;
  }

  .score-gate-form input[type="email"]::placeholder {
    color: var(--d-ink-50);
  }

  .score-gate-form .btn {
    height: 50px;
    padding: 0 22px;
    font-size: 14px;
    border-radius: var(--r-pill);
    flex-shrink: 0;
  }

  .score-gate-form-meta {
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--d-ink-50);
  }

  /* ============================================
   STAGE 4 — calendar booking
   ============================================ */
  .booked {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
  }

  .booked-check {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--teal-deep-bg);
    border: 2px solid var(--teal-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    position: relative;
  }

  .booked-check::before {
    content: "";
    width: 22px;
    height: 12px;
    border-left: 3px solid var(--teal-deep);
    border-bottom: 3px solid var(--teal-deep);
    transform: rotate(-45deg) translate(2px, -3px);
  }

  .booked-title {
    font-family: var(--font-display);
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.05;
    color: var(--ink-100);
    margin-bottom: 16px;
    text-wrap: balance;
  }

  .booked-title em {
    font-style: italic;
    color: var(--teal-deep);
    font-weight: 500;
  }

  .booked-desc {
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-70);
    margin-bottom: 32px;
  }

  .booked-desc strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .booked-slots {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    max-width: 480px;
    margin: 0 auto 28px;
    text-align: left;
  }

  @media (min-width: 600px) {
    .booked-slots {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .booked-slot {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all var(--dur-base) var(--ease-out-expo);
    box-shadow: var(--shadow-card);
  }

  .booked-slot:hover {
    border-color: var(--teal-deep);
    background: var(--teal-deep-bg);
    transform: translateY(-2px);
  }

  .booked-slot-day {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-50);
  }

  .booked-slot-time {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-100);
    letter-spacing: -0.015em;
  }

  .booked-slot.is-selected {
    border-color: var(--teal-deep);
    background: var(--teal-deep-bg);
    box-shadow: 0 0 0 1px var(--teal-deep);
  }

  .booked-confirm {
    max-width: 480px;
    margin: 0 auto 28px;
    padding: 16px 18px;
    background: var(--teal-deep-bg);
    border: 1px solid var(--teal-deep);
    border-radius: var(--r-md);
    text-align: center;
  }

  .booked-confirm-msg {
    font-size: 14px;
    color: var(--ink-100);
    margin: 0 0 10px;
    line-height: 1.5;
  }

  .booked-change {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--teal-deep);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
  }

  .booked-foot {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-50);
    letter-spacing: 0.02em;
  }

  /* ============================================
   WHAT WE CHECK (LIGHT)
   ============================================ */
  .checks {
    background: var(--paper-deep);
    border-top: 1px solid var(--paper-line);
  }

  .checks-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .checks-header .section-num strong {
    color: var(--teal-deep);
  }

  .checks-header .section-title em {
    color: var(--teal-deep);
  }

  .checks-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  @media (min-width: 700px) {
    .checks-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1100px) {
    .checks-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .check-cat {
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-lg);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--shadow-card);
  }

  .check-cat-head {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .check-cat-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--teal-deep-bg);
    border: 1px solid var(--teal-deep-border);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--teal-deep);
    font-weight: 600;
    flex-shrink: 0;
  }

  .check-cat-name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink-100);
  }

  .check-cat-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--ink-70);
    line-height: 1.5;
  }

  .check-cat-list li {
    display: flex;
    align-items: flex-start;
    gap: 7px;
  }

  .check-cat-list li::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ink-30);
    margin-top: 6px;
    flex-shrink: 0;
  }

  .check-cat-foot {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--paper-line-soft);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ink-50);
  }

  .check-cat-foot strong {
    color: var(--teal-deep);
    font-weight: 500;
  }

  /* ============================================
   COMMON FAILURES (DARK)
   ============================================ */
  .failures {
    padding: 90px 0;
  }

  @media (min-width: 768px) {
    .failures {
      padding: 120px 0;
    }
  }

  .failures::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(232, 80, 42, 0.07), transparent 70%);
  }

  .failures-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .failures-header .section-num strong {
    color: var(--coral);
  }

  .failures-header .section-title em {
    color: var(--coral);
  }

  .failures-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  @media (min-width: 700px) {
    .failures-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .failure {
    background: rgba(11, 19, 32, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .failure-head {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .failure-pct {
    font-family: var(--font-mono);
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: var(--coral);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .failure-pct-suffix {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--d-ink-50);
    margin-left: 2px;
    font-weight: 400;
    letter-spacing: 0;
  }

  .failure-name {
    flex: 1;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 500;
    color: var(--d-ink-100);
    letter-spacing: -0.015em;
    line-height: 1.3;
  }

  .failure-desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--d-ink-70);
  }

  .failure-desc strong {
    color: var(--d-ink-100);
    font-weight: 500;
  }

  /* ============================================
   PRIVACY (LIGHT)
   ============================================ */
  .privacy {
    background: var(--paper);
  }

  .privacy-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 1000px;
    margin: 0 auto;
    align-items: start;
  }

  @media (min-width: 800px) {
    .privacy-grid {
      grid-template-columns: 1fr 1fr;
      gap: 56px;
    }
  }

  .privacy-copy .section-num strong {
    color: var(--teal-deep);
  }

  .privacy-copy .section-title em {
    color: var(--teal-deep);
  }

  .privacy-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 28px;
  }

  .privacy-item {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 14px;
    align-items: flex-start;
  }

  .privacy-item-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--teal-deep-bg);
    border: 1px solid var(--teal-deep-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    position: relative;
  }

  .privacy-item-check::before {
    content: "";
    width: 9px;
    height: 5px;
    border-left: 2px solid var(--teal-deep);
    border-bottom: 2px solid var(--teal-deep);
    transform: rotate(-45deg) translate(1px, -1px);
  }

  .privacy-item-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-90);
  }

  .privacy-item-text strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  /* ============================================
   FAQ (LIGHT)
   ============================================ */
  .faq {
    background: var(--paper-deep);
    border-top: 1px solid var(--paper-line);
  }

  .faq-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .faq-header .section-num strong {
    color: var(--coral-deep);
  }

  .faq-header .section-title em {
    color: var(--coral-deep);
  }

  .faq-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--paper-line);
  }

  .faq-item {
    border-bottom: 1px solid var(--paper-line);
  }

  .faq-item summary {
    cursor: pointer;
    padding: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    list-style: none;
    transition: color var(--dur-fast);
  }

  .faq-item summary::-webkit-details-marker {
    display: none;
  }

  .faq-item-q {
    font-family: var(--font-display);
    font-size: clamp(17px, 1.5vw, 20px);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink-100);
    flex: 1;
    line-height: 1.35;
    text-wrap: balance;
  }

  .faq-item-toggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    transition: all var(--dur-base) var(--ease-out-expo);
  }

  .faq-item-toggle::before,
  .faq-item-toggle::after {
    content: "";
    position: absolute;
    background: var(--ink-70);
    border-radius: 1px;
  }

  .faq-item-toggle::before {
    width: 12px;
    height: 1.5px;
  }

  .faq-item-toggle::after {
    width: 1.5px;
    height: 12px;
    transition: transform var(--dur-base), opacity var(--dur-base);
  }

  .faq-item[open] .faq-item-toggle::after {
    transform: rotate(90deg);
    opacity: 0;
  }

  .faq-item[open] .faq-item-toggle {
    background: var(--teal-deep-bg);
    border-color: var(--teal-deep-border);
  }

  .faq-item[open] .faq-item-toggle::before {
    background: var(--teal-deep);
  }

  .faq-item-a {
    padding: 0 0 28px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-70);
    max-width: 720px;
  }

  .faq-item-a strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .faq-item-a p+p {
    margin-top: 10px;
  }
}

/* ============================================================
   PAGE: autolink
   ============================================================ */
body.page-autolink {
  /* product-autolink.css */

  /* ============================================
   DEALERSGEAR — AUTOLINK PRODUCT PAGE
   ============================================
   AutoLink is the dealer's operational workspace:
   CMS + inventory + leads + calls + analytics +
   ad platforms + attribution. The thing the team
   actually logs into.

   Section order:
   01 Hero (light) — product peek dashboard
   02 What lives here (light) — 6-up grid
   03 The dashboard (dark) — wider product mockup
   04 Inventory syndication (light) — destinations
   05 Lead aggregation (dark) — funnel diagram
   06 Ad platforms (light) — Google + Meta
   07 Calls + analytics (light)
   08 ACP foundation (dark)
   09 CTA (dark)
   10 FAQ (light)
   ============================================ */

  /* ============================================
   01 — HERO (LIGHT)
   Two-column on desktop. Product peek shows
   the AutoLink workspace.
   ============================================ */
  .hero {
    position: relative;
    background: var(--paper);
    color: var(--ink-100);
    overflow: hidden;
    isolation: isolate;
    padding: 120px 0 70px;
  }

  @media (min-width: 768px) {
    .hero {
      padding: 160px 0 100px;
    }
  }

  @media (min-width: 1100px) {
    .hero {
      padding: 170px 0 120px;
    }
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
      linear-gradient(rgba(107, 79, 181, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(107, 79, 181, 0.035) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black, transparent 80%);
  }

  .hero::after {
    content: "";
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 1400px;
    height: 800px;
    background:
      radial-gradient(ellipse 50% 40% at 25% 50%, rgba(107, 79, 181, 0.08), transparent 70%),
      radial-gradient(ellipse 50% 40% at 75% 50%, rgba(31, 138, 117, 0.05), transparent 70%);
    filter: blur(60px);
    z-index: -1;
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: start;
  }

  @media (min-width: 1100px) {
    .hero-grid {
      grid-template-columns: 1fr 1.2fr;
      gap: 56px;
      align-items: center;
    }
  }

  .hero-copy {
    position: relative;
    z-index: 1;
  }

  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    background: var(--purple-deep-bg);
    border: 1px solid var(--purple-deep-border);
    border-radius: var(--r-pill);
    font-size: 11px;
    letter-spacing: var(--tracking-label);
    color: var(--purple-deep);
    margin-bottom: 28px;
  }

  .hero-eyebrow-pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--purple-deep);
    box-shadow: 0 0 8px rgba(107, 79, 181, 0.5);
    animation: blink 2s ease infinite;
  }

  .hero-title {
    font-family: var(--font-display);
    font-size: clamp(40px, 5.6vw, 72px);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 0.98;
    color: var(--ink-100);
    margin-bottom: 24px;
    text-wrap: balance;
  }

  .hero-title em {
    font-style: italic;
    color: var(--purple-deep);
    font-weight: 500;
    position: relative;
  }

  .hero-title em::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.05em;
    height: 0.06em;
    background: var(--purple-deep);
    opacity: 0.3;
    transform-origin: left;
    animation: underline-draw 1s var(--ease-out-expo) 0.4s both;
  }


  .hero-lede {
    max-width: 560px;
    font-size: var(--type-lg);
    line-height: 1.55;
    color: var(--ink-70);
    margin-bottom: 32px;
  }

  .hero-lede strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 36px;
  }

  .hero-actions .btn {
    height: 52px;
    padding: 0 24px;
    font-size: 14px;
  }

  .hero-capabilities {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 18px;
    padding-top: 24px;
    border-top: 1px solid var(--paper-line);
  }

  @media (min-width: 600px) {
    .hero-capabilities {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .hero-cap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--ink-70);
  }

  .hero-cap-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--purple-deep);
    flex-shrink: 0;
  }

  .hero-cap strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  /* ============================================
   HERO PRODUCT PEEK — AutoLink dashboard
   ============================================ */
  .hero-peek {
    position: relative;
    border-radius: var(--r-xl);
    background: linear-gradient(180deg, #0B1320, #06090F);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.05) inset,
      0 30px 60px -20px rgba(20, 17, 14, 0.25),
      0 60px 120px -40px rgba(107, 79, 181, 0.18);
    overflow: hidden;
    isolation: isolate;
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
  }

  @media (min-width: 1100px) {
    .hero-peek {
      max-width: none;
      transform: rotate(-1deg) translateY(-8px);
      transition: transform var(--dur-slow) var(--ease-out-expo);
    }

    .hero-peek:hover {
      transform: rotate(0deg) translateY(-12px);
    }
  }

  .hero-peek::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: var(--r-xl);
    background: linear-gradient(135deg, rgba(107, 79, 181, 0.22), transparent 60%, rgba(62, 207, 178, 0.12));
    opacity: 0.6;
    filter: blur(20px);
  }

  .peek-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .peek-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
  }

  .peek-dot:nth-child(1) {
    background: #FF6058;
  }

  .peek-dot:nth-child(2) {
    background: #FFBD2E;
  }

  .peek-dot:nth-child(3) {
    background: #27CA3F;
  }

  .peek-title {
    margin-left: auto;
    margin-right: auto;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--d-ink-50);
  }

  .peek-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-display);
    font-size: 9px;
    letter-spacing: 0.06em;
    color: var(--teal);
    text-transform: uppercase;
  }

  .peek-status-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 5px var(--teal);
    animation: blink 1.4s ease infinite;
  }

  /* Dashboard interior: left sidebar + main panel */
  .peek-app {
    display: grid;
    grid-template-columns: 120px 1fr;
    min-height: 380px;
    font-family: var(--font-display);
    color: var(--d-ink-100);
  }

  @media (max-width: 480px) {
    .peek-app {
      grid-template-columns: 88px 1fr;
    }
  }

  .peek-side {
    background: rgba(0, 0, 0, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    padding: 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .peek-side-section {
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--d-ink-50);
    padding: 8px 10px 6px;
    margin-top: 6px;
  }

  .peek-side-section:first-child {
    margin-top: 0;
  }

  .peek-side-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--d-ink-70);
    transition: background var(--dur-fast), color var(--dur-fast);
  }

  .peek-side-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--d-ink-100);
  }

  .peek-side-item.active {
    background: rgba(107, 79, 181, 0.14);
    color: var(--d-ink-100);
  }

  .peek-side-icon {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
    position: relative;
  }

  .peek-side-item.active .peek-side-icon {
    background: var(--purple);
    box-shadow: 0 0 6px var(--purple);
  }

  .peek-side-badge {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--coral);
    background: rgba(232, 80, 42, 0.12);
    padding: 1px 5px;
    border-radius: 8px;
  }

  .peek-main {
    padding: 16px;
    overflow: hidden;
    background:
      radial-gradient(ellipse 600px 200px at 100% 0%, rgba(107, 79, 181, 0.08), transparent 70%);
  }

  .peek-main-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
  }

  .peek-main-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink-100);
  }

  .peek-main-meta {
    font-size: 10px;
    color: var(--d-ink-50);
    letter-spacing: 0.04em;
  }

  /* KPI strip inside the dashboard */
  .peek-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
  }

  .peek-kpi {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 10px 12px;
  }

  .peek-kpi-label {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--d-ink-50);
    margin-bottom: 4px;
  }

  .peek-kpi-value {
    font-family: var(--font-display);
    font-size: clamp(16px, 1.8vw, 18px);
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink-100);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  .peek-kpi-delta {
    font-family: var(--font-mono);
    font-size: 9px;
    margin-left: 4px;
  }

  .peek-kpi-delta.up {
    color: var(--teal);
  }

  .peek-kpi-delta.down {
    color: var(--coral);
  }

  /* Activity feed inside the dashboard */
  .peek-feed-label {
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--d-ink-50);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .peek-feed-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), transparent);
  }

  .peek-feed {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .peek-feed-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    padding: 7px 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--d-ink-90);
    align-items: center;
    opacity: 0;
    transform: translateY(6px);
    animation: feed-row-in 0.6s var(--ease-out-expo) forwards;
  }

  .peek-feed-row:nth-child(1) {
    animation-delay: 0.6s;
  }

  .peek-feed-row:nth-child(2) {
    animation-delay: 1.0s;
  }

  .peek-feed-row:nth-child(3) {
    animation-delay: 1.4s;
  }

  .peek-feed-row:nth-child(4) {
    animation-delay: 1.8s;
  }

  .peek-feed-type {
    font-size: 8px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--d-ink-50);
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .peek-feed-type-pip {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--purple);
  }

  .peek-feed-type.is-lead .peek-feed-type-pip {
    background: var(--coral);
  }

  .peek-feed-type.is-call .peek-feed-type-pip {
    background: var(--teal);
  }

  .peek-feed-type.is-ad .peek-feed-type-pip {
    background: var(--amber);
  }

  .peek-feed-text strong {
    color: var(--d-ink-100);
    font-weight: 500;
  }

  .peek-feed-time {
    font-size: 10px;
    color: var(--d-ink-50);
    white-space: nowrap;
  }

  /* ============================================
   02 — WHAT LIVES IN AUTOLINK (LIGHT)
   6-up grid showing the six pillars.
   ============================================ */
  .lives {
    background: var(--paper);
  }

  .lives-header {
    margin-bottom: 48px;
  }

  @media (min-width: 768px) {
    .lives-header {
      margin-bottom: 72px;
    }
  }

  .lives-header .section-num strong {
    color: var(--purple-deep);
  }

  .lives-header .section-title em {
    color: var(--purple-deep);
  }

  .lives-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

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

  @media (min-width: 1000px) {
    .lives-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }
  }

  .live-card {
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-xl);
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--shadow-card);
    transition: all var(--dur-base) var(--ease-out-expo);
  }

  .live-card:hover {
    transform: translateY(-3px);
    border-color: var(--purple-deep-border);
    box-shadow: var(--shadow-card-hover);
  }

  .live-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--purple-deep-bg);
    border: 1px solid var(--purple-deep-border);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--purple-deep);
    flex-shrink: 0;
  }

  .live-card-name {
    font-family: var(--font-display);
    font-size: clamp(17px, 1.9vw, 19px);
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink-100);
  }

  .live-card-tag {
    font-size: 12px;
    color: var(--ink-50);
    letter-spacing: 0.02em;
    margin-top: -8px;
  }

  .live-card-desc {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-70);
  }

  .live-card-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--paper-line-soft);
  }

  .live-card-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--ink-90);
  }

  .live-card-list-pip {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--purple-deep);
    flex-shrink: 0;
  }

  /* ============================================
   03 — THE DASHBOARD (DARK)
   Wider product mockup. Inventory list view.
   ============================================ */
  .dash {
    padding: 100px 0;
  }

  @media (min-width: 768px) {
    .dash {
      padding: 140px 0;
    }
  }

  .dash::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(ellipse 80% 50% at 50% 50%, rgba(107, 79, 181, 0.07), transparent 70%);
  }

  .dash-header {
    margin-bottom: 36px;
    max-width: 880px;
  }

  .dash-header .section-num strong {
    color: var(--purple);
  }

  .dash-header .section-title em {
    color: var(--purple);
  }

  /* The wider dashboard mockup */
  .dash-app {
    background: linear-gradient(180deg, #0B1320, #06090F);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-dark-lg);
  }

  .dash-app-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .dash-app-head .peek-dot {
    width: 11px;
    height: 11px;
  }

  .dash-app-title {
    margin-left: auto;
    margin-right: auto;
    font-size: 11px;
    color: var(--d-ink-70);
  }

  .dash-app-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.2);
    padding: 0 18px;
    gap: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .dash-app-tabs::-webkit-scrollbar {
    display: none;
  }

  .dash-app-tab {
    padding: 12px 16px;
    font-family: var(--font-display);
    font-size: 12px;
    color: var(--d-ink-70);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color var(--dur-fast), border-color var(--dur-fast);
  }

  .dash-app-tab:hover {
    color: var(--d-ink-100);
  }

  .dash-app-tab.active {
    color: var(--purple);
    border-bottom-color: var(--purple);
  }

  .dash-app-tab-count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 10px;
  }

  /* Inventory list */
  .dash-list {
    padding: 14px 18px;
  }

  .dash-list-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    margin-bottom: 12px;
    flex-wrap: wrap;
  }

  .dash-search {
    flex: 1;
    min-width: 200px;
    height: 32px;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    font-size: 11px;
    color: var(--d-ink-70);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .dash-chips {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
  }

  .dash-chip {
    padding: 5px 10px;
    background: rgba(107, 79, 181, 0.1);
    border: 1px solid rgba(107, 79, 181, 0.25);
    border-radius: 100px;
    font-size: 10px;
    color: var(--purple);
  }

  .dash-chip.teal {
    background: rgba(62, 207, 178, 0.08);
    border-color: rgba(62, 207, 178, 0.25);
    color: var(--teal);
  }

  .dash-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .dash-row {
    display: grid;
    grid-template-columns: 60px 1fr auto auto auto;
    gap: 14px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    align-items: center;
    transition: background var(--dur-fast);
  }

  .dash-row:hover {
    background: rgba(255, 255, 255, 0.04);
  }

  @media (max-width: 700px) {
    .dash-row {
      grid-template-columns: 50px 1fr auto;
    }

    .dash-row>.dash-row-status,
    .dash-row>.dash-row-channels {
      display: none;
    }
  }

  .dash-row-img {
    width: 60px;
    height: 40px;
    border-radius: 4px;
    background: linear-gradient(135deg, rgba(107, 79, 181, 0.2), rgba(62, 207, 178, 0.1));
    border: 1px solid rgba(255, 255, 255, 0.04);
    position: relative;
    overflow: hidden;
  }

  .dash-row-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.04) 50%, transparent 100%);
    background-size: 200% 100%;
  }

  .dash-row-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .dash-row-name {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
    color: var(--d-ink-100);
    letter-spacing: -0.015em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dash-row-meta {
    font-size: 11px;
    color: var(--d-ink-50);
    letter-spacing: 0.02em;
  }

  .dash-row-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 100px;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .dash-row-status.live {
    background: rgba(62, 207, 178, 0.1);
    border: 1px solid rgba(62, 207, 178, 0.25);
    color: var(--teal);
  }

  .dash-row-status.draft {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    color: var(--amber);
  }

  .dash-row-status-pip {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 4px currentColor;
  }

  .dash-row-channels {
    display: inline-flex;
    gap: 4px;
  }

  .dash-row-channel {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 600;
    color: var(--d-ink-70);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .dash-row-price {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--d-ink-100);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }

  /* ============================================
   04 — INVENTORY SYNDICATION (LIGHT)
   Where vehicles go. Logo grid.
   ============================================ */
  .sync {
    background: var(--paper);
  }

  .sync-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .sync-header .section-num strong {
    color: var(--coral-deep);
  }

  .sync-header .section-title em {
    color: var(--coral-deep);
  }

  .sync-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border: 1px solid var(--paper-line);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--paper-card);
  }

  @media (min-width: 600px) {
    .sync-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (min-width: 1000px) {
    .sync-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .sync-item {
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-right: 1px solid var(--paper-line-soft);
    border-bottom: 1px solid var(--paper-line-soft);
    text-align: center;
    transition: background var(--dur-fast);
    min-height: 110px;
  }

  .sync-item:hover {
    background: var(--paper-deep);
  }

  .sync-item-mark {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: white;
    letter-spacing: -0.02em;
  }

  .sync-item.is-autotrader .sync-item-mark {
    background: linear-gradient(135deg, #C24A1F, #8B2810);
  }

  .sync-item.is-cars .sync-item-mark {
    background: linear-gradient(135deg, #1F8A75, #0A5A4A);
  }

  .sync-item.is-cargurus .sync-item-mark {
    background: linear-gradient(135deg, #6B4FB5, #3D2873);
  }

  .sync-item.is-facebook .sync-item-mark {
    background: linear-gradient(135deg, #1877F2, #0D4D9E);
    border-radius: 50%;
  }

  .sync-item.is-truecar .sync-item-mark {
    background: linear-gradient(135deg, #B87B0A, #5F3E00);
  }

  .sync-item.is-carsdirect .sync-item-mark {
    background: linear-gradient(135deg, #14110E, #34322D);
  }

  .sync-item.is-oem .sync-item-mark {
    background: linear-gradient(135deg, #87807A, #14110E);
    border-radius: 4px;
  }

  .sync-item.is-google .sync-item-mark {
    background: linear-gradient(135deg, #4285F4, #34A853 50%, #FBBC04 75%, #EA4335);
  }

  .sync-item-name {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink-90);
    line-height: 1.2;
  }

  .sync-item-tag {
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ink-50);
    text-transform: uppercase;
  }

  .sync-foot {
    margin-top: 24px;
    padding: 14px 16px;
    background: var(--paper-deep);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-lg);
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-70);
    letter-spacing: 0.02em;
    flex-wrap: wrap;
  }

  .sync-foot-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--coral-deep);
    flex-shrink: 0;
    animation: blink 2s ease infinite;
  }

  .sync-foot strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  /* ============================================
   05 — LEAD AGGREGATION (DARK)
   Diagram: sources → AutoLink.
   ============================================ */
  .leads {
    padding: 100px 0;
  }

  @media (min-width: 768px) {
    .leads {
      padding: 140px 0;
    }
  }

  .leads::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(ellipse 60% 60% at 50% 50%, rgba(232, 80, 42, 0.06), transparent 70%);
  }

  .leads-header {
    margin-bottom: 56px;
    max-width: 880px;
  }

  .leads-header .section-num strong {
    color: var(--coral);
  }

  .leads-header .section-title em {
    color: var(--coral);
  }

  .leads-diagram {
    background: rgba(11, 19, 32, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-xl);
    padding: 36px 24px;
    box-shadow: var(--shadow-dark-lg);
    overflow: hidden;
  }

  @media (min-width: 768px) {
    .leads-diagram {
      padding: 48px;
    }
  }

  .leads-flow {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: center;
  }

  @media (min-width: 900px) {
    .leads-flow {
      grid-template-columns: 1fr auto 1fr;
      gap: 36px;
    }
  }

  .leads-sources {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .lead-source {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--r-lg);
    align-items: center;
  }

  .lead-source-mark {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    color: white;
  }

  .lead-source.is-form .lead-source-mark {
    background: linear-gradient(135deg, var(--teal), var(--teal-dim));
  }

  .lead-source.is-chat .lead-source-mark {
    background: linear-gradient(135deg, var(--purple), #5A3FA6);
  }

  .lead-source.is-call .lead-source-mark {
    background: linear-gradient(135deg, var(--coral), #C24A1F);
  }

  .lead-source.is-ad .lead-source-mark {
    background: linear-gradient(135deg, var(--amber), #B87B0A);
  }

  .lead-source.is-sms .lead-source-mark {
    background: linear-gradient(135deg, var(--teal-dim), var(--teal-deep));
  }

  .lead-source-name {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
    color: var(--d-ink-100);
    letter-spacing: -0.015em;
  }

  .lead-source-tag {
    font-size: 12px;
    color: var(--d-ink-50);
    letter-spacing: 0.02em;
  }

  .lead-source-count {
    font-size: 14px;
    color: var(--d-ink-90);
    font-weight: 500;
  }

  .leads-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 40px;
  }

  @media (min-width: 900px) {
    .leads-arrow {
      flex-direction: column;
      min-height: 100%;
    }
  }

  .leads-arrow svg {
    width: 60px;
    height: 24px;
  }

  @media (min-width: 900px) {
    .leads-arrow svg {
      width: 24px;
      height: 80px;
      transform: rotate(0deg);
    }
  }

  .leads-target {
    background: rgba(107, 79, 181, 0.06);
    border: 1px solid rgba(107, 79, 181, 0.3);
    border-radius: var(--r-xl);
    padding: 28px;
    text-align: center;
    position: relative;
    box-shadow:
      0 0 0 1px rgba(107, 79, 181, 0.15),
      0 8px 30px -10px rgba(107, 79, 181, 0.25);
  }

  .leads-target-label {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--purple);
    margin-bottom: 8px;
  }

  .leads-target-name {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--d-ink-100);
    margin-bottom: 8px;
  }

  .leads-target-desc {
    font-size: 12px;
    line-height: 1.5;
    color: var(--d-ink-70);
    margin-bottom: 14px;
  }

  .leads-target-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  .leads-target-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .leads-target-stat-label {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--d-ink-50);
  }

  .leads-target-stat-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--d-ink-100);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }

  /* ============================================
   06 — AD PLATFORMS (LIGHT)
   Google Ads + Meta integrations.
   ============================================ */
  .ads {
    background: var(--paper);
  }

  .ads-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .ads-header .section-num strong {
    color: var(--teal-deep);
  }

  .ads-header .section-title em {
    color: var(--teal-deep);
  }

  .ads-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
  }

  @media (min-width: 900px) {
    .ads-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  .ad-card {
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-xl);
    padding: 28px;
    box-shadow: var(--shadow-card);
  }

  .ad-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
  }

  .ad-card-mark {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    color: white;
    flex-shrink: 0;
  }

  .ad-card.is-google .ad-card-mark {
    background: linear-gradient(135deg, #4285F4, #34A853 50%, #FBBC04 75%, #EA4335);
  }

  .ad-card.is-meta .ad-card-mark {
    background: linear-gradient(135deg, #1877F2, #0D4D9E);
  }

  .ad-card-name {
    font-family: var(--font-display);
    font-size: clamp(19px, 2.2vw, 22px);
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink-100);
    line-height: 1.1;
  }

  .ad-card-tag {
    font-size: 12px;
    color: var(--ink-50);
    letter-spacing: 0.02em;
  }

  .ad-card-desc {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-70);
    margin-bottom: 18px;
  }

  .ad-card-desc strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .ad-flows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--paper-line-soft);
  }

  .ad-flow {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }

  .ad-flow-dir {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.06em;
    padding: 3px 7px;
    border-radius: 4px;
    flex-shrink: 0;
    margin-top: 1px;
  }

  .ad-flow.out .ad-flow-dir {
    background: var(--teal-deep-bg);
    color: var(--teal-deep);
  }

  .ad-flow.in .ad-flow-dir {
    background: var(--coral-deep-bg);
    color: var(--coral-deep);
  }

  .ad-flow-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-90);
  }

  .ad-flow-text strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  /* ============================================
   07 — CALLS + ANALYTICS (LIGHT)
   Attribution chain story.
   ============================================ */
  .calls {
    background: var(--paper-deep);
    border-top: 1px solid var(--paper-line);
  }

  .calls-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .calls-header .section-num strong {
    color: var(--purple-deep);
  }

  .calls-header .section-title em {
    color: var(--purple-deep);
  }

  .calls-chain {
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-xl);
    padding: 28px;
    box-shadow: var(--shadow-card);
  }

  @media (min-width: 768px) {
    .calls-chain {
      padding: 36px;
    }
  }

  .chain-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  @media (min-width: 800px) {
    .chain-steps {
      grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
      align-items: center;
      gap: 12px;
    }
  }

  .chain-step {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 14px;
    background: var(--paper-deep);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-lg);
    text-align: center;
    min-height: 140px;
    justify-content: center;
  }

  .chain-step-num {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-50);
  }

  .chain-step-name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink-100);
    line-height: 1.2;
  }

  .chain-step-desc {
    font-size: 12px;
    color: var(--ink-70);
    letter-spacing: 0.02em;
    line-height: 1.4;
  }

  .chain-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-30);
    font-family: var(--font-mono);
    font-size: 16px;
  }

  @media (max-width: 800px) {
    .chain-arrow {
      transform: rotate(90deg);
      padding: 4px 0;
    }
  }

  .calls-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--paper-line-soft);
  }

  .calls-platforms-label {
    width: 100%;
    font-size: 11px;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ink-50);
    margin-bottom: 8px;
  }

  .calls-platform {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--paper-deep);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-pill);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-90);
  }

  .calls-platform-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--purple-deep);
    flex-shrink: 0;
  }

  /* ============================================
   08 — ACP FOUNDATION (DARK)
   Brief anchor — ACP is the substrate.
   ============================================ */
  .acp {
    padding: 90px 0;
  }

  @media (min-width: 768px) {
    .acp {
      padding: 120px 0;
    }
  }

  .acp::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(62, 207, 178, 0.06), transparent 70%);
  }

  .acp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
    margin: 0 auto;
  }

  @media (min-width: 900px) {
    .acp-grid {
      grid-template-columns: 1fr 1fr;
      gap: 48px;
    }
  }

  .acp-copy .section-num strong {
    color: var(--teal);
  }

  .acp-copy .section-title em {
    color: var(--teal);
  }

  .acp-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    padding: 12px 16px;
    background: rgba(62, 207, 178, 0.06);
    border: 1px solid rgba(62, 207, 178, 0.22);
    border-radius: var(--r-pill);
    font-size: 14px;
    color: var(--teal);
    transition: all var(--dur-base);
  }

  .acp-link:hover {
    background: rgba(62, 207, 178, 0.12);
    border-color: var(--teal);
  }

  .acp-link-arrow {
    transition: transform var(--dur-base) var(--ease-out-expo);
  }

  .acp-link:hover .acp-link-arrow {
    transform: translate(3px, -3px);
  }

  .acp-envelope {
    background: rgba(6, 9, 15, 0.6);
    border: 1px solid rgba(62, 207, 178, 0.2);
    border-radius: var(--r-lg);
    padding: 18px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.7;
    color: var(--d-ink-70);
    overflow-x: auto;
  }

  .acp-envelope .key {
    color: var(--teal);
  }

  .acp-envelope .str {
    color: var(--coral);
  }

  .acp-envelope .num {
    color: var(--purple);
  }

  .acp-envelope .punct {
    color: var(--d-ink-50);
  }

  .acp-envelope .comment {
    color: var(--d-ink-50);
    opacity: 0.7;
    font-style: italic;
  }

  /* ============================================
   09 — CTA (DARK)
   ============================================ */
  .cta {
    padding: 100px 0 80px;
  }

  @media (min-width: 768px) {
    .cta {
      padding: 140px 0 100px;
    }
  }

  .cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(107, 79, 181, 0.08), transparent 70%);
    filter: blur(40px);
  }

  .cta-title {
    font-family: var(--font-display);
    font-size: var(--type-5xl);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 0.96;
    color: var(--d-ink-100);
    max-width: 1000px;
    margin-bottom: 22px;
    text-wrap: balance;
  }

  .cta-title em {
    font-style: italic;
    color: var(--purple);
    font-weight: 500;
  }

  .cta-sub {
    font-size: var(--type-lg);
    line-height: 1.55;
    color: var(--d-ink-70);
    max-width: 640px;
    margin-bottom: 36px;
  }

  .cta-sub strong {
    color: var(--d-ink-100);
    font-weight: 500;
  }

  .cta-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .cta-actions .btn {
    height: 52px;
    padding: 0 26px;
    font-size: 14px;
  }

  /* ============================================
   10 — FAQ (LIGHT)
   ============================================ */
  .faq {
    background: var(--paper);
  }

  .faq-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .faq-header .section-num strong {
    color: var(--coral-deep);
  }

  .faq-header .section-title em {
    color: var(--coral-deep);
  }

  .faq-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--paper-line);
  }

  .faq-item {
    border-bottom: 1px solid var(--paper-line);
  }

  .faq-item summary {
    cursor: pointer;
    padding: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    list-style: none;
    transition: color var(--dur-fast);
  }

  .faq-item summary::-webkit-details-marker {
    display: none;
  }

  .faq-item-q {
    font-family: var(--font-display);
    font-size: clamp(17px, 1.5vw, 20px);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink-100);
    flex: 1;
    line-height: 1.35;
    text-wrap: balance;
  }

  .faq-item-toggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--paper-deep);
    border: 1px solid var(--paper-line);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    transition: all var(--dur-base) var(--ease-out-expo);
  }

  .faq-item-toggle::before,
  .faq-item-toggle::after {
    content: "";
    position: absolute;
    background: var(--ink-70);
    border-radius: 1px;
  }

  .faq-item-toggle::before {
    width: 12px;
    height: 1.5px;
  }

  .faq-item-toggle::after {
    width: 1.5px;
    height: 12px;
    transition: transform var(--dur-base), opacity var(--dur-base);
  }

  .faq-item[open] .faq-item-toggle::after {
    transform: rotate(90deg);
    opacity: 0;
  }

  .faq-item[open] .faq-item-toggle {
    background: var(--purple-deep-bg);
    border-color: var(--purple-deep-border);
  }

  .faq-item[open] .faq-item-toggle::before {
    background: var(--purple-deep);
  }

  .faq-item-a {
    padding: 0 0 28px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-70);
    max-width: 720px;
  }

  .faq-item-a strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .faq-item-a p+p {
    margin-top: 10px;
  }
}

/* ============================================================
   PAGE: blog-post
   ============================================================ */
body.page-blog-post {
  /* page */

  /* ============================================
   DEALERSGEAR — BLOG POST TEMPLATE
   ============================================
   Single-article reading view.
   Brand lean: coral (Operations category color).
   ============================================ */

  /* ============================================
   01 — POST HEADER (LIGHT)
   ============================================ */
  .post-header {
    position: relative;
    background: var(--paper);
    color: var(--ink-100);
    overflow: hidden;
    isolation: isolate;
    padding: 110px 0 60px;
  }

  @media (min-width: 768px) {
    .post-header {
      padding: 140px 0 70px;
    }
  }

  @media (min-width: 1100px) {
    .post-header {
      padding: 150px 0 80px;
    }
  }

  .post-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
      linear-gradient(rgba(194, 74, 31, 0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(194, 74, 31, 0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black, transparent 80%);
  }

  /* Post header (hero) image — ported from the legacy blog archive. */
  .post-hero {
    background: var(--paper);
    padding: 0 0 10px;
  }

  .post-hero-figure {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
  }

  .post-hero-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 8;
    object-fit: cover;
  }

  @media (min-width: 768px) {
    .post-hero-image {
      aspect-ratio: 16 / 7;
    }
  }

  /* Legacy blog header images shown behind the featured/tile media badges. */
  .featured-media-img,
  .post-media-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }

  /* Scrim keeps the category badge/label readable over any photo. */
  .featured-media:has(.featured-media-img)::after,
  .post-media:has(.post-media-img)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.05) 55%, rgba(0, 0, 0, 0.25));
  }

  .post-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 28px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-50);
    letter-spacing: 0.04em;
    transition: color var(--dur-fast);
  }

  .post-back:hover {
    color: var(--coral-deep);
  }

  .post-back-arrow {
    transition: transform var(--dur-base);
  }

  .post-back:hover .post-back-arrow {
    transform: translateX(-3px);
  }

  .post-category {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: var(--coral-deep-bg);
    border: 1px solid var(--coral-deep-border);
    border-radius: var(--r-pill);
    font-size: 12px;
    letter-spacing: var(--tracking-label);
    color: var(--coral-deep);
    margin-bottom: 24px;
  }

  .post-category-pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--coral-deep);
  }

  .post-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5.4vw, 64px);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1.0;
    color: var(--ink-100);
    margin-bottom: 22px;
    text-wrap: balance;
    max-width: 920px;
  }

  .post-title em {
    font-style: italic;
    color: var(--coral-deep);
    font-weight: 500;
  }

  .post-deck {
    max-width: 760px;
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.5;
    color: var(--ink-70);
    margin-bottom: 36px;
  }

  .post-deck strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .post-deck em {
    color: var(--coral-deep);
    font-style: italic;
  }

  .post-byline {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--paper-line);
    flex-wrap: wrap;
  }

  .post-byline-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--coral), var(--coral-deep));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
  }

  .post-byline-author {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .post-byline-name {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-100);
    letter-spacing: -0.01em;
  }

  .post-byline-role {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-50);
    letter-spacing: 0.02em;
  }

  .post-byline-divider {
    width: 1px;
    height: 32px;
    background: var(--paper-line);
  }

  .post-byline-meta {
    display: flex;
    gap: 14px;
    font-size: 12px;
    color: var(--ink-50);
    letter-spacing: 0.02em;
  }

  .post-byline-meta strong {
    color: var(--ink-90);
    font-weight: 500;
  }

  .post-byline-stats {
    font-size: 12px;
    color: var(--ink-50);
    letter-spacing: 0.02em;
  }

  .post-byline-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  .post-byline-meta-pip {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ink-30);
  }

  .related-card-title {
    font-size: 18px;
    margin: 5px 0;
    color: var(--ink-100);
  }

  .post-dek {
    margin-bottom: 15px;
  }

  /* ============================================
   02 — POST BODY (LIGHT)
   Reading-optimized layout
   ============================================ */
  .post-body {
    background: var(--paper);
    padding: 0 0 60px;
  }

  @media (min-width: 768px) {
    .post-body {
      padding: 20px 0 100px;
    }
  }

  .post-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    max-width: 1200px;
    margin: 0 auto;
  }

  @media (min-width: 1000px) {
    .post-layout {
      grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
      gap: 60px;
      align-items: start;
    }
  }

  /* Sticky TOC */
  .post-toc {
    position: relative;
  }

  @media (min-width: 1000px) {
    .post-toc {
      position: sticky;
      top: 100px;
      align-self: start;
      max-height: calc(100vh - 120px);
      overflow-y: auto;
    }
  }

  .post-toc-label {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-50);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--paper-line);
  }

  .post-toc-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .post-toc-list a {
    display: block;
    padding: 6px 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ink-70);
    text-decoration: none;
    transition: color var(--dur-fast);
    border-left: 2px solid transparent;
    padding-left: 10px;
    margin-left: -10px;
  }

  .post-toc-list a:hover {
    color: var(--coral-deep);
    border-left-color: var(--coral-deep);
  }

  /* Article content */
  .post-content {
    max-width: 720px;
    min-width: 0;
  }

  /* No table of contents → single centered column. */
  @media (min-width: 1000px) {
    .post-layout-full {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .post-layout-full .post-content {
    max-width: 760px;
    margin-inline: auto;
  }

  /* Featured image */
  .post-hero-image {
    aspect-ratio: 16/9;
    background:
      radial-gradient(ellipse 70% 60% at 30% 30%, rgba(232, 80, 42, 0.3), transparent 70%),
      linear-gradient(135deg, #1A1208, #2A1810);
    border-radius: var(--r-xl);
    position: relative;
    overflow: hidden;
    margin-bottom: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .post-hero-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black, transparent 80%);
  }

  .post-hero-image-caption {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: 11px;
    color: white;
    letter-spacing: 0.04em;
  }

  /* Prose styles */
  .post-content p,
  .post-content ul,
  .post-content ol {
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink-90);
    margin-bottom: 22px;
    list-style: disc;
  }

  .post-content p strong {
    color: var(--ink-100);
    font-weight: 600;
  }

  .post-content p em {
    color: var(--coral-deep);
    font-style: italic;
  }

  .post-content h2 {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--ink-100);
    margin-top: 56px;
    margin-bottom: 20px;
    text-wrap: balance;
    scroll-margin-top: 100px;
  }

  .post-content h2 em {
    font-style: italic;
    color: var(--coral-deep);
    font-weight: 500;
  }

  .post-content h2:first-child {
    margin-top: 0;
  }

  .post-content h3 {
    font-family: var(--font-display);
    font-size: clamp(19px, 2vw, 22px);
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink-100);
    margin-top: 36px;
    margin-bottom: 14px;
    line-height: 1.25;
  }

  .post-content ul,
  .post-content ol {
    padding-left: 22px;
  }

  .post-content ul li,
  .post-content ol li {
    margin-bottom: 8px;
  }

  .post-content ul li::marker {
    color: var(--coral-deep);
  }

  .post-content code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    padding: 2px 6px;
    background: var(--paper-deep);
    border: 1px solid var(--paper-line-soft);
    border-radius: 4px;
    color: var(--coral-deep);
  }

  /* Pull-quote inside article */
  .post-pullquote {
    margin: 36px 0;
    padding: 28px 32px;
    background: var(--paper-deep);
    border-left: 3px solid var(--coral-deep);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.015em;
    line-height: 1.45;
    color: var(--ink-100);
  }

  .post-pullquote-cite {
    display: block;
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    font-style: normal;
    color: var(--ink-50);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* Code block */
  .post-code {
    margin: 28px 0;
    background: var(--navy-900);
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }

  .post-code-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--d-ink-50);
    letter-spacing: 0.04em;
  }

  .post-code-head-lang {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .post-code-head-pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal);
  }

  .post-code pre {
    margin: 0;
    padding: 22px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--d-ink-90);
    overflow-x: auto;
  }

  .post-code .k {
    color: var(--teal);
  }

  /* keyword */
  .post-code .s {
    color: var(--coral);
  }

  /* string */
  .post-code .c {
    color: var(--d-ink-50);
  }

  /* comment */

  /* Inline data viz / chart preview */
  .post-chart {
    margin: 36px 0;
    padding: 28px;
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
  }

  .post-chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--paper-line-soft);
    flex-wrap: wrap;
    gap: 12px;
  }

  .post-chart-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink-100);
  }

  .post-chart-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-50);
    letter-spacing: 0.04em;
  }

  .post-chart-bars {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .post-chart-bar-row {
    display: grid;
    grid-template-columns: 80px 1fr 60px;
    gap: 14px;
    align-items: center;
  }

  .post-chart-bar-label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-70);
    letter-spacing: 0.04em;
  }

  .post-chart-bar-track {
    height: 8px;
    background: var(--paper-deep);
    border-radius: 100px;
    overflow: hidden;
    position: relative;
  }

  .post-chart-bar-fill {
    height: 100%;
    border-radius: 100px;
    background: linear-gradient(90deg, var(--coral-deep), var(--coral));
    transition: width 1.2s var(--ease-out-expo);
  }

  .post-chart-bar-fill.is-before {
    background: var(--paper-line);
  }

  .post-chart-bar-value {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--ink-100);
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  /* ============================================
   03 — AUTHOR BIO (LIGHT-DEEP)
   ============================================ */
  .author-bio {
    background: var(--paper-deep);
    border-top: 1px solid var(--paper-line);
    border-bottom: 1px solid var(--paper-line);
  }

  .author-bio-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 920px;
    margin: 0 auto;
    align-items: start;
  }

  @media (min-width: 700px) {
    .author-bio-card {
      grid-template-columns: auto 1fr;
      gap: 32px;
    }
  }

  .author-bio-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--coral), var(--coral-deep));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
  }

  .author-bio-body {
    min-width: 0;
  }

  .author-bio-name {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink-100);
    line-height: 1.2;
  }

  .author-bio-role {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--coral-deep);
    letter-spacing: 0.04em;
    margin-top: 4px;
  }

  .author-bio-text {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink-70);
    margin-top: 14px;
  }

  .author-bio-text strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .author-bio-meta {
    display: flex;
    gap: 14px;
    margin-top: 18px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-50);
    letter-spacing: 0.02em;
    flex-wrap: wrap;
  }

  .author-bio-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  .author-bio-meta-item strong {
    color: var(--ink-90);
    font-weight: 500;
  }



  /* ============================================
   04 — RELATED POSTS (LIGHT)
   ============================================ */
  .related {
    background: var(--paper);
  }

  .related-header {
    margin-bottom: 40px;
    max-width: 880px;
  }

  .related-header .section-num strong {
    color: var(--coral-deep);
  }

  .related-header .section-title em {
    color: var(--coral-deep);
  }

  .related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .related-card-tag {
    font-size: var(--type-xs);
    color: var(--ink-50);
  }

  .related-card-meta {
    font-size: var(--type-xs);
    color: var(--ink-50);
  }

  @media (min-width: 700px) {
    .related-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 26px;
    }
  }

  .related-post {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    gap: 12px;
    padding: 22px;
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    transition: all var(--dur-base) var(--ease-out-expo);
  }

  .related-post:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
  }

  .related-post-cat {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .related-post.cat-aeo .related-post-cat {
    color: var(--teal-deep);
  }

  .related-post.cat-ops .related-post-cat {
    color: var(--coral-deep);
  }

  .related-post.cat-data .related-post-cat {
    color: var(--amber-deep);
  }

  .related-post-title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.25;
    color: var(--ink-100);
    text-wrap: balance;
  }

  .related-post-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-50);
    letter-spacing: 0.02em;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--paper-line-soft);
  }

  /* ============================================
   05 — CTA (DARK)
   ============================================ */
  .cta {
    padding: 100px 0 80px;
  }

  @media (min-width: 768px) {
    .cta {
      padding: 140px 0 100px;
    }
  }

  .cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(232, 80, 42, 0.08), transparent 70%);
    filter: blur(40px);
  }

  .cta-title {
    font-family: var(--font-display);
    font-size: var(--type-5xl);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 0.96;
    color: var(--d-ink-100);
    max-width: 1000px;
    margin-bottom: 22px;
    text-wrap: balance;
  }

  .cta-title em {
    font-style: italic;
    color: var(--coral);
    font-weight: 500;
  }

  .cta-sub {
    font-size: var(--type-lg);
    line-height: 1.55;
    color: var(--d-ink-70);
    max-width: 640px;
    margin-bottom: 36px;
  }

  .cta-sub strong {
    color: var(--d-ink-100);
    font-weight: 500;
  }

  .cta-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .cta-actions .btn {
    height: 52px;
    padding: 0 26px;
    font-size: 14px;
  }
}

/* ============================================================
   PAGE: blog
   ============================================================ */
body.page-blog {
  /* blog.css */

  /* ============================================
   DEALERSGEAR — BLOG INDEX
   ============================================
   Publication-style layout, not SaaS-page.
   Brand lean: mixed (each post category gets
   its own accent color).
   ============================================ */

  /* ============================================
   01 — HERO with featured post (LIGHT)
   ============================================ */
  .hero {
    position: relative;
    background: var(--paper);
    color: var(--ink-100);
    overflow: hidden;
    isolation: isolate;
    padding: 110px 0 50px;
  }

  @media (min-width: 768px) {
    .hero {
      padding: 140px 0 70px;
    }
  }

  @media (min-width: 1100px) {
    .hero {
      padding: 150px 0 80px;
    }
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
      linear-gradient(rgba(31, 138, 117, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(31, 138, 117, 0.035) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, black, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, black, transparent 80%);
  }

  .blog-masthead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--paper-line);
  }

  .blog-masthead-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1;
    color: var(--ink-100);
  }

  .blog-masthead-title em {
    font-style: italic;
    font-weight: 500;
    color: var(--coral-deep);
  }

  .blog-masthead-meta {
    display: flex;
    gap: 18px;
    font-size: 12px;
    color: var(--ink-50);
    letter-spacing: 0.04em;
    flex-wrap: wrap;
  }

  .blog-masthead-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .blog-masthead-meta-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal-deep);
  }

  /* The big featured post card */
  .featured {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: all var(--dur-base) var(--ease-out-expo);
    text-decoration: none;
    color: inherit;
  }

  @media (min-width: 900px) {
    .featured {
      grid-template-columns: 1.1fr 1fr;
      align-items: stretch;
      gap: 0;
    }
  }

  .featured:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--coral-deep-border);
  }

  .featured-media {
    aspect-ratio: 16/10;
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(ellipse 70% 60% at 30% 30%, rgba(232, 80, 42, 0.3), transparent 70%),
      linear-gradient(135deg, #1A1208, #2A1810);
    display: flex;
    align-items: flex-end;
    padding: 28px;
  }

  @media (min-width: 900px) {
    .featured-media {
      aspect-ratio: auto;
      min-height: 360px;
      padding: 36px;
    }
  }

  .featured-media::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black, transparent 80%);
  }

  .featured-media-badge {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(232, 80, 42, 0.18);
    border: 1px solid rgba(232, 80, 42, 0.3);
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--coral);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .featured-media-badge-pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--coral);
    box-shadow: 0 0 6px var(--coral);
    animation: blink 1.6s ease infinite;
  }

  .featured-info {
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  @media (min-width: 900px) {
    .featured-info {
      padding: 40px 44px;
      gap: 18px;
    }
  }

  .featured-meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: var(--ink-50);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    align-items: center;
  }

  .featured-meta-tag {
    padding: 3px 8px;
    background: var(--coral-deep-bg);
    border: 1px solid var(--coral-deep-border);
    color: var(--coral-deep);
    border-radius: 100px;
    font-weight: 500;
  }

  .featured-title {
    font-family: var(--font-display);
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--ink-100);
    text-wrap: balance;
  }

  .featured-title em {
    font-style: italic;
    color: var(--coral-deep);
    font-weight: 500;
  }

  .featured-excerpt {
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-70);
  }

  .featured-excerpt strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .featured-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--paper-line-soft);
    margin-top: auto;
  }

  .featured-author-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--coral), var(--coral-deep));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    color: white;
  }

  .featured-author-name {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-100);
    letter-spacing: -0.01em;
  }

  .featured-author-role {
    font-size: 11px;
    color: var(--ink-50);
    letter-spacing: 0.04em;
    margin-top: 2px;
  }

  /* ============================================
   02 — RECENT POSTS GRID (LIGHT)
   ============================================ */
  .posts {
    background: var(--paper);
    padding: 70px 0 90px;
  }

  @media (min-width: 768px) {
    .posts {
      padding: 80px 0 110px;
    }
  }

  .posts-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 36px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--paper-line);
  }

  .posts-header-title {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--ink-100);
  }

  .posts-header-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }

  .posts-header-filter {
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 12px;
    color: var(--ink-50);
    border: 1px solid var(--paper-line);
    background: var(--paper-card);
    cursor: pointer;
    transition: all var(--dur-fast);
    letter-spacing: 0.02em;
  }

  .posts-header-filter.is-active {
    background: var(--ink-100);
    color: var(--paper-card);
    border-color: var(--ink-100);
  }

  .posts-header-filter:hover:not(.is-active) {
    border-color: var(--ink-50);
    color: var(--ink-90);
  }

  .posts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  @media (min-width: 700px) {
    .posts-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1100px) {
    .posts-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }
  }

  .post {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    gap: 16px;
    padding: 22px;
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    transition: all var(--dur-base) var(--ease-out-expo);
  }

  .post:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
  }

  .post-media {
    aspect-ratio: 16/10;
    border-radius: var(--r-md);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 14px;
  }

  /* Category-tinted media backgrounds */
  .post.cat-aeo .post-media {
    background:
      radial-gradient(ellipse 70% 60% at 30% 30%, rgba(62, 207, 178, 0.3), transparent 70%),
      linear-gradient(135deg, #0F1117, #1A2540);
  }

  .post.cat-ops .post-media {
    background:
      radial-gradient(ellipse 70% 60% at 30% 30%, rgba(232, 80, 42, 0.3), transparent 70%),
      linear-gradient(135deg, #1A1208, #2A1810);
  }

  .post.cat-protocol .post-media {
    background:
      radial-gradient(ellipse 70% 60% at 30% 30%, rgba(179, 136, 255, 0.3), transparent 70%),
      linear-gradient(135deg, #14101F, #1F1830);
  }

  .post.cat-data .post-media {
    background:
      radial-gradient(ellipse 70% 60% at 30% 30%, rgba(245, 158, 11, 0.25), transparent 70%),
      linear-gradient(135deg, #1A1208, #2A1F10);
  }

  .post-media::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black, transparent 80%);
  }

  .post-media-cat {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: white;
  }

  .post.cat-aeo .post-media-cat {
    color: var(--teal);
  }

  .post.cat-ops .post-media-cat {
    color: var(--coral);
  }

  .post.cat-protocol .post-media-cat {
    color: var(--purple);
  }

  .post.cat-data .post-media-cat {
    color: var(--amber);
  }

  .post-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
  }

  .post-meta {
    display: flex;
    gap: 10px;
    font-size: 12px;
    color: var(--ink-50);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .post-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.25;
    color: var(--ink-100);
    text-wrap: balance;
  }

  .post-excerpt {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-70);
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .post-author {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--paper-line-soft);
    margin-top: auto;
  }

  .post-author-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, var(--coral), var(--coral-deep));
  }

  .post.cat-aeo .post-author-avatar {
    background: linear-gradient(135deg, var(--teal), var(--teal-deep));
  }

  .post.cat-ops .post-author-avatar {
    background: linear-gradient(135deg, var(--coral), var(--coral-deep));
  }

  .post.cat-protocol .post-author-avatar {
    background: linear-gradient(135deg, var(--purple), var(--purple-deep));
  }

  .post.cat-data .post-author-avatar {
    background: linear-gradient(135deg, var(--amber), var(--amber-deep));
  }

  .post-author-meta {
    min-width: 0;
  }

  .post-author-name {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-100);
    letter-spacing: -0.01em;
    line-height: 1.2;
  }

  .post-author-meta-line {
    font-size: 11px;
    color: var(--ink-50);
    letter-spacing: 0.04em;
    margin-top: 2px;
  }

  /* ============================================
   03 — TOPICS / CATEGORIES (DARK)
   ============================================ */
  .topics {
    padding: 80px 0 100px;
  }

  @media (min-width: 768px) {
    .topics {
      padding: 100px 0 130px;
    }
  }

  .topics::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(62, 207, 178, 0.06), transparent 70%);
  }

  .topics-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .topics-header .section-num strong {
    color: var(--teal);
  }

  .topics-header .section-title em {
    color: var(--teal);
  }

  .topics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
  }

  @media (min-width: 700px) {
    .topics-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1100px) {
    .topics-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 26px;
    }
  }

  .topic-col {
    background: rgba(11, 19, 32, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .topic-col-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .topic-col-pip {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }

  .topic-col.is-aeo .topic-col-pip {
    background: var(--teal);
    box-shadow: 0 0 6px var(--teal);
  }

  .topic-col.is-ops .topic-col-pip {
    background: var(--coral);
    box-shadow: 0 0 6px var(--coral);
  }

  .topic-col.is-protocol .topic-col-pip {
    background: var(--purple);
    box-shadow: 0 0 6px var(--purple);
  }

  .topic-col.is-data .topic-col-pip {
    background: var(--amber);
    box-shadow: 0 0 6px var(--amber);
  }

  .topic-col-name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink-100);
    flex: 1;
  }

  .topic-col-count {
    font-size: 12px;
    color: var(--d-ink-50);
    letter-spacing: 0.04em;
  }

  .topic-col-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .topic-col-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--d-ink-70);
    text-decoration: none;
    transition: color var(--dur-fast);
  }

  .topic-col-list a:hover {
    color: var(--d-ink-100);
  }

  .topic-col-list-arrow {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--d-ink-50);
    opacity: 0;
    transition: all var(--dur-fast);
    flex-shrink: 0;
  }

  .topic-col-list a:hover .topic-col-list-arrow {
    opacity: 1;
    transform: translateX(3px);
  }

  /* ============================================
   04 — NEWSLETTER (LIGHT)
   ============================================ */
  .newsletter {
    background: var(--paper-deep);
    border-top: 1px solid var(--paper-line);
    border-bottom: 1px solid var(--paper-line);
  }

  .newsletter-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
  }

  .newsletter-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: var(--coral-deep-bg);
    border: 1px solid var(--coral-deep-border);
    border-radius: var(--r-pill);
    font-size: 11px;
    letter-spacing: var(--tracking-label);
    color: var(--coral-deep);
    margin-bottom: 22px;
  }

  .newsletter-eyebrow-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--coral-deep);
    box-shadow: 0 0 6px rgba(194, 74, 31, 0.4);
  }

  .newsletter-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.05;
    color: var(--ink-100);
    margin-bottom: 16px;
    text-wrap: balance;
  }

  .newsletter-title em {
    font-style: italic;
    color: var(--coral-deep);
    font-weight: 500;
  }

  .newsletter-desc {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-70);
    margin-bottom: 28px;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
  }

  .newsletter-desc strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .newsletter-form {
    display: flex;
    gap: 8px;
    max-width: 480px;
    margin: 0 auto;
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-pill);
    padding: 6px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 20px 40px -20px rgba(20, 17, 14, 0.1);
    transition: all var(--dur-base) var(--ease-out-expo);
  }

  .newsletter-form:focus-within {
    border-color: var(--coral-deep);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
      0 0 0 4px rgba(194, 74, 31, 0.1),
      0 20px 40px -20px rgba(194, 74, 31, 0.2);
  }

  .newsletter-form input {
    flex: 1;
    border: 0;
    background: transparent;
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--ink-100);
    padding: 0 18px;
    outline: 0;
    height: 44px;
    min-width: 0;
  }

  .newsletter-form input::placeholder {
    color: var(--ink-30);
  }

  .newsletter-form .btn {
    height: 44px;
    padding: 0 22px;
    font-size: 13px;
    border-radius: var(--r-pill);
    flex-shrink: 0;
  }

  .newsletter-meta {
    margin-top: 16px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-50);
    letter-spacing: 0.04em;
  }

  .newsletter-error {
    margin-top: 10px;
    font-size: 13px;
    color: #c24a1f;
  }

  [x-cloak] {
    display: none !important;
  }

  /* ── Subscribe checking card (mirrors audit .checking) ── */
  .sub-checking {
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-xl);
    padding: 32px 36px;
    max-width: 540px;
    margin: 0 auto;
    text-align: left;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 24px 48px -16px rgba(20, 17, 14, .1);
  }

  .sub-checking-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
  }

  .sub-checking-spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2.5px solid var(--paper-line);
    border-top-color: var(--teal-deep);
    animation: spin 0.9s linear infinite;
    flex-shrink: 0;
  }

  .sub-checking-status {
    flex: 1;
    min-width: 0;
  }

  .sub-checking-email {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--ink-50);
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sub-checking-title {
    font-family: var(--font-display);
    font-size: clamp(17px, 2vw, 22px);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ink-100);
  }

  .sub-checking-progress {
    height: 4px;
    background: var(--paper-deep);
    border-radius: 100px;
    overflow: hidden;
    margin-bottom: 20px;
  }

  .sub-checking-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--teal-deep), var(--coral-deep));
    border-radius: 100px;
    width: 0%;
    transition: width .3s linear;
  }

  .sub-checking-feed {
    background: var(--paper-deep);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-md);
    padding: 12px 16px;
    height: 160px;
    overflow: hidden;
    position: relative;
    font-family: var(--font-mono);
    font-size: 12px;
  }

  .sub-checking-feed::before,
  .sub-checking-feed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 24px;
    z-index: 1;
    pointer-events: none;
  }

  .sub-checking-feed::before {
    top: 0;
    background: linear-gradient(180deg, var(--paper-deep), transparent);
  }

  .sub-checking-feed::after {
    bottom: 0;
    background: linear-gradient(0deg, var(--paper-deep), transparent);
  }

  .sub-checking-feed-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform .35s var(--ease-out-expo);
  }

  .sub-feed-item {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 5px 0;
    color: var(--ink-50);
  }

  .sub-feed-item.is-current {
    color: var(--ink-100);
  }

  .sub-feed-num {
    font-size: 9px;
    letter-spacing: .08em;
    color: var(--ink-30);
  }

  .sub-feed-item.is-current .sub-feed-num {
    color: var(--teal-deep);
  }

  .sub-feed-label {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sub-feed-result {
    font-size: 10px;
    color: var(--ink-30);
  }

  .sub-feed-item.is-pass .sub-feed-result {
    color: var(--teal-deep);
  }

  /* ── Subscribe done card (mirrors audit .booked) ── */
  .sub-done {
    max-width: 540px;
    margin: 0 auto;
    text-align: center;
    animation: stage-in .5s var(--ease-out-expo);
  }

  .sub-done-check {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--teal-deep-bg, rgba(0, 168, 120, .1));
    border: 2px solid var(--teal-deep);
    margin: 0 auto 20px;
    position: relative;
  }

  .sub-done-check::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%) rotate(45deg);
    width: 10px;
    height: 18px;
    border-right: 2.5px solid var(--teal-deep);
    border-bottom: 2.5px solid var(--teal-deep);
  }

  .sub-done-title {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.8vw, 32px);
    font-weight: 600;
    letter-spacing: -.03em;
    color: var(--ink-100);
    margin-bottom: 10px;
  }

  .sub-done-desc {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-70);
  }

  /* ============================================
   05 — CTA (DARK)
   ============================================ */
  .cta {
    padding: 100px 0 80px;
  }

  @media (min-width: 768px) {
    .cta {
      padding: 140px 0 100px;
    }
  }

  .cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(232, 80, 42, 0.08), transparent 70%);
    filter: blur(40px);
  }

  .cta-title {
    font-family: var(--font-display);
    font-size: var(--type-5xl);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 0.96;
    color: var(--d-ink-100);
    max-width: 1000px;
    margin-bottom: 22px;
    text-wrap: balance;
  }

  .cta-title em {
    font-style: italic;
    color: var(--coral);
    font-weight: 500;
  }

  .cta-sub {
    font-size: var(--type-lg);
    line-height: 1.55;
    color: var(--d-ink-70);
    max-width: 640px;
    margin-bottom: 36px;
  }

  .cta-sub strong {
    color: var(--d-ink-100);
    font-weight: 500;
  }

  .cta-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .cta-actions .btn {
    height: 52px;
    padding: 0 26px;
    font-size: 14px;
  }

  /* ============================================
   06 — FAQ (LIGHT-DEEP)
   ============================================ */
  .faq {
    background: var(--paper-deep);
    border-top: 1px solid var(--paper-line);
  }

  .faq-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .faq-header .section-num strong {
    color: var(--teal-deep);
  }

  .faq-header .section-title em {
    color: var(--teal-deep);
  }

  .faq-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--paper-line);
  }

  .faq-item {
    border-bottom: 1px solid var(--paper-line);
  }

  .faq-item summary {
    cursor: pointer;
    padding: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    list-style: none;
  }

  .faq-item summary::-webkit-details-marker {
    display: none;
  }

  .faq-item-q {
    font-family: var(--font-display);
    font-size: clamp(17px, 1.5vw, 20px);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink-100);
    flex: 1;
    line-height: 1.35;
    text-wrap: balance;
  }

  .faq-item-toggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    transition: all var(--dur-base) var(--ease-out-expo);
  }

  .faq-item-toggle::before,
  .faq-item-toggle::after {
    content: "";
    position: absolute;
    background: var(--ink-70);
    border-radius: 1px;
  }

  .faq-item-toggle::before {
    width: 12px;
    height: 1.5px;
  }

  .faq-item-toggle::after {
    width: 1.5px;
    height: 12px;
    transition: transform var(--dur-base), opacity var(--dur-base);
  }

  .faq-item[open] .faq-item-toggle::after {
    transform: rotate(90deg);
    opacity: 0;
  }

  .faq-item[open] .faq-item-toggle {
    background: var(--teal-deep-bg);
    border-color: var(--teal-deep-border);
  }

  .faq-item[open] .faq-item-toggle::before {
    background: var(--teal-deep);
  }

  .faq-item-a {
    padding: 0 0 28px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-70);
    max-width: 720px;
  }

  .faq-item-a strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .faq-item-a p+p {
    margin-top: 10px;
  }
}

/* ============================================================
   PAGE: marketing-manager
   ============================================================ */
body.page-marketing-manager {
  /* product-marketing-manager.css */

  /* ============================================
   DEALERSGEAR — MARKETING MANAGER PRODUCT PAGE
   ============================================
   The activation layer. AI agent that acts on
   AutoLink data: spend optimization, lead
   response, citation monitoring, reports.

   Brand color lean: CORAL (activation / conversion).
   ============================================ */

  /* ============================================
   01 — HERO (LIGHT)
   ============================================ */
  .hero {
    position: relative;
    background: var(--paper);
    color: var(--ink-100);
    overflow: hidden;
    isolation: isolate;
    padding: 120px 0 70px;
  }

  @media (min-width: 768px) {
    .hero {
      padding: 160px 0 100px;
    }
  }

  @media (min-width: 1100px) {
    .hero {
      padding: 170px 0 120px;
    }
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
      linear-gradient(rgba(194, 74, 31, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(194, 74, 31, 0.035) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black, transparent 80%);
  }

  .hero::after {
    content: "";
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 1400px;
    height: 800px;
    background:
      radial-gradient(ellipse 50% 40% at 25% 50%, rgba(194, 74, 31, 0.09), transparent 70%),
      radial-gradient(ellipse 50% 40% at 75% 50%, rgba(31, 138, 117, 0.05), transparent 70%);
    filter: blur(60px);
    z-index: -1;
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: start;
  }

  @media (min-width: 1100px) {
    .hero-grid {
      grid-template-columns: 1fr 1.2fr;
      gap: 56px;
      align-items: center;
    }
  }

  .hero-copy {
    position: relative;
    z-index: 1;
  }

  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    background: var(--coral-deep-bg);
    border: 1px solid var(--coral-deep-border);
    border-radius: var(--r-pill);
    font-size: 11px;
    letter-spacing: var(--tracking-label);
    color: var(--coral-deep);
    margin-bottom: 28px;
  }

  .hero-eyebrow-pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--coral-deep);
    box-shadow: 0 0 8px rgba(194, 74, 31, 0.5);
    animation: blink 2s ease infinite;
  }

  .hero-title {
    font-family: var(--font-display);
    font-size: clamp(40px, 5.6vw, 72px);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 0.98;
    color: var(--ink-100);
    margin-bottom: 24px;
    text-wrap: balance;
  }

  .hero-title em {
    font-style: italic;
    color: var(--coral-deep);
    font-weight: 500;
    position: relative;
  }

  .hero-title em::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.05em;
    height: 0.06em;
    background: var(--coral-deep);
    opacity: 0.3;
    transform-origin: left;
    animation: underline-draw 1s var(--ease-out-expo) 0.4s both;
  }


  .hero-lede {
    max-width: 560px;
    font-size: var(--type-lg);
    line-height: 1.55;
    color: var(--ink-70);
    margin-bottom: 32px;
  }

  .hero-lede strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .hero-lede em {
    color: var(--coral-deep);
    font-style: italic;
  }

  .hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 36px;
  }

  .hero-actions .btn {
    height: 52px;
    padding: 0 24px;
    font-size: 14px;
  }

  .hero-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding-top: 24px;
    border-top: 1px solid var(--paper-line);
  }

  @media (min-width: 600px) {
    .hero-stats {
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }
  }

  .hero-stat {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .hero-stat-label {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--ink-50);
  }

  .hero-stat-value {
    font-family: var(--font-mono);
    font-size: clamp(24px, 2.4vw, 30px);
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink-100);
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
  }

  .hero-stat-suffix {
    font-family: var(--font-mono);
    font-size: 0.5em;
    color: var(--coral-deep);
    margin-left: 4px;
  }

  /* ============================================
   HERO PRODUCT PEEK — AI agent console
   ============================================ */
  .hero-peek {
    position: relative;
    border-radius: var(--r-xl);
    background: linear-gradient(180deg, #0B1320, #06090F);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.05) inset,
      0 30px 60px -20px rgba(20, 17, 14, 0.25),
      0 60px 120px -40px rgba(194, 74, 31, 0.18);
    overflow: hidden;
    isolation: isolate;
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
  }

  @media (min-width: 1100px) {
    .hero-peek {
      max-width: none;
      transform: rotate(-1deg) translateY(-8px);
      transition: transform var(--dur-slow) var(--ease-out-expo);
    }

    .hero-peek:hover {
      transform: rotate(0deg) translateY(-12px);
    }
  }

  .hero-peek::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: var(--r-xl);
    background: linear-gradient(135deg, rgba(232, 80, 42, 0.22), transparent 60%, rgba(62, 207, 178, 0.10));
    opacity: 0.6;
    filter: blur(20px);
  }

  .peek-chrome {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .peek-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
  }

  .peek-dot:nth-child(1) {
    background: #FF6058;
  }

  .peek-dot:nth-child(2) {
    background: #FFBD2E;
  }

  .peek-dot:nth-child(3) {
    background: #27CA3F;
  }

  .peek-title {
    margin-left: auto;
    margin-right: auto;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--d-ink-50);
  }

  .peek-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.06em;
    color: var(--coral);
    text-transform: uppercase;
  }

  .peek-status-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--coral);
    box-shadow: 0 0 5px var(--coral);
    animation: blink 1.4s ease infinite;
  }

  .peek-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--d-ink-100);
  }

  .peek-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .peek-header-row .peek-title-h {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink-100);
  }

  .peek-header-row .peek-meta {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--d-ink-50);
    letter-spacing: 0.04em;
  }

  .peek-section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--d-ink-50);
    margin-bottom: 8px;
  }

  .peek-section-label-pip {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--coral);
  }

  .peek-section-label-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent);
  }

  /* Decisions list */
  .peek-decisions {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .peek-decision {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    padding: 9px 11px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    align-items: center;
    opacity: 0;
    transform: translateY(8px);
    animation: peek-decision-in 0.6s var(--ease-out-expo) forwards;
  }

  .peek-decision:nth-child(1) {
    animation-delay: 0.6s;
  }

  .peek-decision:nth-child(2) {
    animation-delay: 1.1s;
  }

  .peek-decision:nth-child(3) {
    animation-delay: 1.6s;
  }

  .peek-decision:nth-child(4) {
    animation-delay: 2.1s;
  }

  .peek-decision-icon {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: rgba(232, 80, 42, 0.12);
    border: 1px solid rgba(232, 80, 42, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--coral);
    flex-shrink: 0;
  }

  .peek-decision.is-spend .peek-decision-icon {
    background: rgba(62, 207, 178, 0.12);
    border-color: rgba(62, 207, 178, 0.25);
    color: var(--teal);
  }

  .peek-decision.is-lead .peek-decision-icon {
    background: rgba(179, 136, 255, 0.12);
    border-color: rgba(179, 136, 255, 0.25);
    color: var(--purple);
  }

  .peek-decision.is-citation .peek-decision-icon {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.25);
    color: var(--amber);
  }

  .peek-decision-text {
    font-size: 10px;
    color: var(--d-ink-90);
    line-height: 1.4;
  }

  .peek-decision-text strong {
    color: var(--d-ink-100);
    font-weight: 500;
  }

  .peek-decision-time {
    font-size: 11px;
    color: var(--d-ink-50);
    white-space: nowrap;
  }

  /* KPI strip in peek */
  .peek-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
  }

  .peek-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .peek-kpi-label {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--d-ink-50);
  }

  .peek-kpi-value {
    font-family: var(--font-mono);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--d-ink-100);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    display: inline-flex;
    align-items: baseline;
  }

  .peek-kpi-suffix {
    font-family: var(--font-mono);
    font-size: 0.45em;
    margin-left: 2px;
  }

  .peek-kpi.is-coral .peek-kpi-suffix {
    color: var(--coral);
  }

  .peek-kpi.is-teal .peek-kpi-suffix {
    color: var(--teal);
  }

  .peek-kpi.is-purple .peek-kpi-suffix {
    color: var(--purple);
  }

  /* ============================================
   02 — WHAT IT AUTOMATES (LIGHT) — 6-up grid
   ============================================ */
  .automates {
    background: var(--paper);
  }

  .automates-header {
    margin-bottom: 48px;
  }

  @media (min-width: 768px) {
    .automates-header {
      margin-bottom: 72px;
    }
  }

  .automates-header .section-num strong {
    color: var(--coral-deep);
  }

  .automates-header .section-title em {
    color: var(--coral-deep);
  }

  .automates-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

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

  @media (min-width: 1000px) {
    .automates-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }
  }

  .auto-card {
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-xl);
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--shadow-card);
    transition: all var(--dur-base) var(--ease-out-expo);
  }

  .auto-card:hover {
    transform: translateY(-3px);
    border-color: var(--coral-deep-border);
    box-shadow: var(--shadow-card-hover);
  }

  .auto-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--coral-deep-bg);
    border: 1px solid var(--coral-deep-border);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--coral-deep);
  }

  .auto-card-name {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink-100);
  }

  .auto-card-tag {
    font-size: 12px;
    color: var(--ink-50);
    letter-spacing: 0.02em;
    margin-top: -8px;
  }

  .auto-card-desc {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-70);
  }

  .auto-card-example {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--paper-deep);
    border: 1px dashed var(--paper-line);
    border-radius: var(--r-md);
    font-size: 12px;
    color: var(--ink-70);
    line-height: 1.5;
  }

  .auto-card-example strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .auto-card-example-tag {
    display: inline-block;
    margin-bottom: 4px;
    padding: 1px 6px;
    background: var(--coral-deep-bg);
    border-radius: 3px;
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--coral-deep);
  }

  /* ============================================
   03 — AGENT AT WORK (DARK) — decision timeline
   ============================================ */
  .agent {
    padding: 100px 0;
  }

  @media (min-width: 768px) {
    .agent {
      padding: 140px 0;
    }
  }

  .agent::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(ellipse 60% 50% at 30% 30%, rgba(232, 80, 42, 0.07), transparent 70%),
      radial-gradient(ellipse 60% 50% at 70% 70%, rgba(62, 207, 178, 0.04), transparent 70%);
  }

  .agent-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .agent-header .section-num strong {
    color: var(--coral);
  }

  .agent-header .section-title em {
    color: var(--coral);
  }

  .agent-timeline {
    background: rgba(11, 19, 32, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-xl);
    padding: 24px;
    box-shadow: var(--shadow-dark-lg);
  }

  @media (min-width: 768px) {
    .agent-timeline {
      padding: 36px;
    }
  }

  .agent-events {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
  }

  .agent-events::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 18px;
    bottom: 18px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(232, 80, 42, 0.25), rgba(232, 80, 42, 0.25), transparent);
  }

  .agent-event {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 18px;
    align-items: flex-start;
  }

  .agent-event-bullet {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--navy-900);
    border: 2px solid var(--coral);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--coral);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 4px rgba(11, 19, 32, 0.55);
  }

  .agent-event-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--r-md);
    padding: 16px 18px;
    min-width: 0;
  }

  .agent-event-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
  }

  .agent-event-type {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: rgba(232, 80, 42, 0.12);
    border: 1px solid rgba(232, 80, 42, 0.25);
    border-radius: 100px;
    font-size: 11px;
    color: var(--coral);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .agent-event-time {
    font-size: 12px;
    color: var(--d-ink-50);
    letter-spacing: 0.02em;
  }

  .agent-event-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink-100);
    line-height: 1.3;
    margin-bottom: 6px;
  }

  .agent-event-reason {
    font-size: 13px;
    line-height: 1.55;
    color: var(--d-ink-70);
  }

  .agent-event-reason strong {
    color: var(--d-ink-100);
    font-weight: 500;
  }

  .agent-event-outcome {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 12px;
  }

  .agent-event-outcome-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--d-ink-70);
  }

  .agent-event-outcome-item-pip {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--teal);
  }

  .agent-event-outcome-item strong {
    color: var(--teal);
    font-weight: 500;
  }

  /* ============================================
   04 — AI CITATION MONITORING (DARK)
   ============================================ */
  .citation {
    padding: 100px 0;
  }

  @media (min-width: 768px) {
    .citation {
      padding: 140px 0;
    }
  }

  .citation::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(179, 136, 255, 0.06), transparent 70%);
  }

  .citation-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .citation-header .section-num strong {
    color: var(--purple);
  }

  .citation-header .section-title em {
    color: var(--purple);
  }

  .citation-monitor {
    background: rgba(11, 19, 32, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-xl);
    padding: 28px;
    box-shadow: var(--shadow-dark-lg);
  }

  .citation-monitor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
  }

  .citation-monitor-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink-100);
  }

  .citation-monitor-meta {
    font-size: 12px;
    color: var(--d-ink-50);
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .citation-monitor-meta-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 5px var(--teal);
    animation: blink 1.6s ease infinite;
  }

  .citation-engines {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  @media (min-width: 700px) {
    .citation-engines {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .citation-engine {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--r-md);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .citation-engine-head {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .citation-engine-mark {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    color: white;
  }

  .citation-engine.is-chatgpt .citation-engine-mark {
    background: linear-gradient(135deg, #10A37F, #06664E);
  }

  .citation-engine.is-perplexity .citation-engine-mark {
    background: linear-gradient(135deg, #20B2AA, #0F5F5A);
  }

  .citation-engine.is-gemini .citation-engine-mark {
    background: linear-gradient(135deg, #4285F4, #34A853 60%, #FBBC04);
  }

  .citation-engine.is-claude .citation-engine-mark {
    background: linear-gradient(135deg, #D77655, #8B4A30);
  }

  .citation-engine-name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink-100);
  }

  .citation-engine-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--coral);
    letter-spacing: 0.02em;
  }

  .citation-engine-count strong {
    color: var(--d-ink-100);
    font-weight: 500;
  }

  .citation-engine-bar {
    height: 5px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 100px;
    overflow: hidden;
  }

  .citation-engine-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--coral), var(--coral-dim));
    border-radius: 100px;
    transition: width var(--dur-slow) var(--ease-out-expo);
  }

  .citation-engine-recent {
    font-size: 14px;
    color: var(--d-ink-70);
    line-height: 1.5;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.06);
  }

  .citation-engine-recent strong {
    color: var(--d-ink-100);
    font-weight: 500;
  }

  /* ============================================
   05 — AD SPEND OPTIMIZATION (LIGHT)
   Before / after chart-style mock
   ============================================ */
  .spend {
    background: var(--paper);
  }

  .spend-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .spend-header .section-num strong {
    color: var(--teal-deep);
  }

  .spend-header .section-title em {
    color: var(--teal-deep);
  }

  .spend-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
  }

  @media (min-width: 1000px) {
    .spend-grid {
      grid-template-columns: 1.2fr 1fr;
      gap: 28px;
    }
  }

  /* Bar chart mock */
  .spend-chart {
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-xl);
    padding: 28px;
    box-shadow: var(--shadow-card);
  }

  .spend-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .spend-chart-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink-100);
  }

  .spend-chart-legend {
    display: inline-flex;
    gap: 16px;
    font-size: 12px;
    color: var(--ink-70);
    letter-spacing: 0.02em;
  }

  .spend-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .spend-chart-legend-pip {
    width: 8px;
    height: 8px;
    border-radius: 2px;
  }

  .spend-chart-legend-pip.before {
    background: var(--ink-30);
  }

  .spend-chart-legend-pip.after {
    background: var(--coral-deep);
  }

  .spend-bars {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    align-items: end;
    height: 180px;
    padding-top: 14px;
    border-bottom: 1px solid var(--paper-line);
    margin-bottom: 12px;
  }

  .spend-bar-group {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 100%;
    position: relative;
  }

  .spend-bar {
    flex: 1;
    border-radius: 3px 3px 0 0;
    position: relative;
    min-height: 4px;
    transition: height var(--dur-slow) var(--ease-out-expo);
  }

  .spend-bar.before {
    background: var(--ink-30);
    opacity: 0.6;
  }

  .spend-bar.after {
    background: var(--coral-deep);
  }

  .spend-bar-value {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: var(--coral-deep);
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .spend-bars-labels {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    font-size: 12px;
    color: var(--ink-50);
    letter-spacing: 0.02em;
    text-align: center;
  }

  .spend-summary {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .spend-summary-stat {
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-lg);
    padding: 22px;
    box-shadow: var(--shadow-card);
  }

  .spend-summary-label {
    font-size: 12px;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ink-50);
    margin-bottom: 6px;
  }

  .spend-summary-value {
    font-family: var(--font-mono);
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: var(--ink-100);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
  }

  .spend-summary-value-suffix {
    font-family: var(--font-mono);
    font-size: 0.4em;
    margin-left: 6px;
    color: var(--coral-deep);
  }

  .spend-summary-desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-70);
    margin-top: 8px;
  }

  .spend-summary-desc strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  /* ============================================
   06 — LEAD RESPONSE (LIGHT) — chat-style mock
   ============================================ */
  .response {
    background: var(--paper-deep);
    border-top: 1px solid var(--paper-line);
  }

  .response-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .response-header .section-num strong {
    color: var(--purple-deep);
  }

  .response-header .section-title em {
    color: var(--purple-deep);
  }

  .response-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
  }

  @media (min-width: 900px) {
    .response-grid {
      grid-template-columns: 1fr 1.2fr;
      gap: 36px;
    }
  }

  .response-copy {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .response-copy-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink-100);
    line-height: 1.2;
  }

  .response-copy-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-70);
  }

  .response-copy-desc strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .response-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 8px;
  }

  .response-stat {
    padding: 16px 18px;
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-lg);
  }

  .response-stat-label {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-50);
    margin-bottom: 4px;
  }

  .response-stat-value {
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--ink-100);
    font-variant-numeric: tabular-nums;
  }

  .response-stat.is-coral .response-stat-value {
    color: var(--coral-deep);
  }

  .response-stat.is-teal .response-stat-value {
    color: var(--teal-deep);
  }

  /* The chat mock */
  .response-chat {
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
  }

  .response-chat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--paper-deep);
    border-bottom: 1px solid var(--paper-line);
  }

  .response-chat-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--coral-deep), #8B2810);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    color: white;
  }

  .response-chat-name {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-100);
    letter-spacing: -0.015em;
  }

  .response-chat-status {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.06em;
    color: var(--teal-deep);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  .response-chat-status-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal-deep);
  }

  .response-chat-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .response-msg {
    max-width: 88%;
    padding: 11px 14px;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.5;
  }

  .response-msg.from-customer {
    background: var(--paper-deep);
    color: var(--ink-90);
    border-bottom-left-radius: 4px;
    align-self: flex-start;
  }

  .response-msg.from-agent {
    background: var(--coral-deep);
    color: white;
    border-bottom-right-radius: 4px;
    align-self: flex-end;
  }

  .response-msg.from-agent strong {
    font-weight: 500;
  }

  .response-msg-meta {
    display: block;
    font-size: 11px;
    letter-spacing: 0.04em;
    margin-top: 5px;
    opacity: 0.7;
  }

  .response-handoff {
    margin: 4px 0;
    padding: 8px 12px;
    background: var(--purple-deep-bg);
    border: 1px dashed var(--purple-deep-border);
    border-radius: var(--r-md);
    font-size: 12px;
    color: var(--purple-deep);
    letter-spacing: 0.02em;
    text-align: center;
  }

  .response-handoff strong {
    font-weight: 500;
  }

  /* ============================================
   07 — PERFORMANCE REPORTS (LIGHT) — mock report
   ============================================ */
  .reports {
    background: var(--paper);
  }

  .reports-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .reports-header .section-num strong {
    color: var(--teal-deep);
  }

  .reports-header .section-title em {
    color: var(--teal-deep);
  }

  .report-mock {
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
  }

  .report-mock-head {
    padding: 24px 28px;
    background: var(--paper-deep);
    border-bottom: 1px solid var(--paper-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
  }

  .report-mock-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink-100);
  }

  .report-mock-meta {
    font-size: 12px;
    color: var(--ink-50);
    letter-spacing: 0.02em;
  }

  .report-mock-body {
    padding: 28px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
  }

  @media (min-width: 900px) {
    .report-mock-body {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .report-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .report-section-label {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-50);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--paper-line-soft);
  }

  .report-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed var(--paper-line-soft);
  }

  .report-line:last-child {
    border-bottom: 0;
  }

  .report-line-label {
    font-size: 13px;
    color: var(--ink-90);
  }

  .report-line-value {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-100);
    font-variant-numeric: tabular-nums;
  }

  .report-line-delta {
    font-family: var(--font-mono);
    font-size: 11px;
    margin-left: 8px;
  }

  .report-line-delta.up {
    color: var(--teal-deep);
  }

  .report-line-delta.down {
    color: var(--coral-deep);
  }

  .report-insight {
    margin: 20px 28px 28px;
    padding: 16px 18px;
    background: var(--coral-deep-bg);
    border: 1px solid var(--coral-deep-border);
    border-radius: var(--r-md);
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-90);
  }

  .report-insight strong {
    color: var(--coral-deep);
    font-weight: 500;
  }

  .report-insight-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
    padding: 2px 7px;
    background: rgba(232, 80, 42, 0.15);
    border-radius: 100px;
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--coral-deep);
  }

  .report-insight-tag-pip {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--coral-deep);
  }

  /* ============================================
   08 — ACP FOUNDATION (DARK) — shared treatment
   ============================================ */
  .acp {
    padding: 90px 0;
  }

  @media (min-width: 768px) {
    .acp {
      padding: 120px 0;
    }
  }

  .acp::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(62, 207, 178, 0.06), transparent 70%);
  }

  .acp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
    margin: 0 auto;
  }

  @media (min-width: 900px) {
    .acp-grid {
      grid-template-columns: 1fr 1fr;
      gap: 48px;
    }
  }

  .acp-copy .section-num strong {
    color: var(--teal);
  }

  .acp-copy .section-title em {
    color: var(--teal);
  }

  .acp-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    padding: 12px 16px;
    background: rgba(62, 207, 178, 0.06);
    border: 1px solid rgba(62, 207, 178, 0.22);
    border-radius: var(--r-pill);
    font-size: 14px;
    color: var(--teal);
    transition: all var(--dur-base);
  }

  .acp-link:hover {
    background: rgba(62, 207, 178, 0.12);
    border-color: var(--teal);
  }

  .acp-link-arrow {
    transition: transform var(--dur-base) var(--ease-out-expo);
  }

  .acp-link:hover .acp-link-arrow {
    transform: translate(3px, -3px);
  }

  .acp-envelope {
    background: rgba(6, 9, 15, 0.6);
    border: 1px solid rgba(62, 207, 178, 0.2);
    border-radius: var(--r-lg);
    padding: 18px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.7;
    color: var(--d-ink-70);
    overflow-x: auto;
  }

  .acp-envelope .key {
    color: var(--teal);
  }

  .acp-envelope .str {
    color: var(--coral);
  }

  .acp-envelope .num {
    color: var(--purple);
  }

  .acp-envelope .punct {
    color: var(--d-ink-50);
  }

  .acp-envelope .comment {
    color: var(--d-ink-50);
    opacity: 0.7;
    font-style: italic;
  }

  /* ============================================
   09 — CTA (DARK)
   ============================================ */
  .cta {
    padding: 100px 0 80px;
  }

  @media (min-width: 768px) {
    .cta {
      padding: 140px 0 100px;
    }
  }

  .cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(232, 80, 42, 0.1), transparent 70%);
    filter: blur(40px);
  }

  .cta-title {
    font-family: var(--font-display);
    font-size: var(--type-5xl);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 0.96;
    color: var(--d-ink-100);
    max-width: 1000px;
    margin-bottom: 22px;
    text-wrap: balance;
  }

  .cta-title em {
    font-style: italic;
    color: var(--coral);
    font-weight: 500;
  }

  .cta-sub {
    font-size: var(--type-lg);
    line-height: 1.55;
    color: var(--d-ink-70);
    max-width: 640px;
    margin-bottom: 36px;
  }

  .cta-sub strong {
    color: var(--d-ink-100);
    font-weight: 500;
  }

  .cta-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .cta-actions .btn {
    height: 52px;
    padding: 0 26px;
    font-size: 14px;
  }

  /* ============================================
   10 — FAQ (LIGHT)
   ============================================ */
  .faq {
    background: var(--paper);
  }

  .faq-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .faq-header .section-num strong {
    color: var(--coral-deep);
  }

  .faq-header .section-title em {
    color: var(--coral-deep);
  }

  .faq-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--paper-line);
  }

  .faq-item {
    border-bottom: 1px solid var(--paper-line);
  }

  .faq-item summary {
    cursor: pointer;
    padding: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    list-style: none;
    transition: color var(--dur-fast);
  }

  .faq-item summary::-webkit-details-marker {
    display: none;
  }

  .faq-item-q {
    font-family: var(--font-display);
    font-size: clamp(17px, 1.5vw, 20px);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink-100);
    flex: 1;
    line-height: 1.35;
    text-wrap: balance;
  }

  .faq-item-toggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--paper-deep);
    border: 1px solid var(--paper-line);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    transition: all var(--dur-base) var(--ease-out-expo);
  }

  .faq-item-toggle::before,
  .faq-item-toggle::after {
    content: "";
    position: absolute;
    background: var(--ink-70);
    border-radius: 1px;
  }

  .faq-item-toggle::before {
    width: 12px;
    height: 1.5px;
  }

  .faq-item-toggle::after {
    width: 1.5px;
    height: 12px;
    transition: transform var(--dur-base), opacity var(--dur-base);
  }

  .faq-item[open] .faq-item-toggle::after {
    transform: rotate(90deg);
    opacity: 0;
  }

  .faq-item[open] .faq-item-toggle {
    background: var(--coral-deep-bg);
    border-color: var(--coral-deep-border);
  }

  .faq-item[open] .faq-item-toggle::before {
    background: var(--coral-deep);
  }

  .faq-item-a {
    padding: 0 0 28px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-70);
    max-width: 720px;
  }

  .faq-item-a strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .faq-item-a p+p {
    margin-top: 10px;
  }
}

/* ============================================================
   PAGE: privacy
   ============================================================ */
body.page-privacy {
  /* legal.css */

  /* ============================================
   DEALERSGEAR — LEGAL PAGES SHARED CSS
   ============================================
   Used by privacy, terms, and accessibility.
   Minimal styling. Focus on long-form reading
   typography and clear table-of-contents nav.
   ============================================ */

  /* ============================================
   01 — HERO (LIGHT) — page title + meta
   ============================================ */
  .legal-hero {
    position: relative;
    background: var(--paper);
    color: var(--ink-100);
    overflow: hidden;
    isolation: isolate;
    padding: 110px 0 50px;
    border-bottom: 1px solid var(--paper-line);
  }

  @media (min-width: 768px) {
    .legal-hero {
      padding: 140px 0 70px;
    }
  }

  .legal-hero-inner {
    max-width: 880px;
  }

  .legal-crumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 0.05em;
    color: var(--ink-50);
    margin-bottom: 24px;
  }

  .legal-crumb a {
    color: var(--ink-70);
    text-decoration: none;
    transition: color var(--dur-base);
  }

  .legal-crumb a:hover {
    color: var(--teal-deep);
  }

  .legal-crumb-sep {
    opacity: 0.4;
  }

  .legal-crumb-current {
    color: var(--ink-100);
  }

  .legal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: var(--paper-deep);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-pill);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-70);
    margin-bottom: 22px;
  }

  .legal-eyebrow-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal-deep);
  }

  .legal-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 4.5vw, 56px);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.05;
    color: var(--ink-100);
    margin-bottom: 18px;
    text-wrap: balance;
  }

  .legal-lede {
    max-width: 700px;
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.6;
    color: var(--ink-80);
  }

  .legal-meta {
    margin-top: 28px;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    padding-top: 24px;
    border-top: 1px dashed var(--paper-line);
  }

  .legal-meta-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .legal-meta-key {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-50);
  }

  .legal-meta-value {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-100);
  }

  /* ============================================
   02 — BODY (LIGHT) — TOC + prose layout
   ============================================ */
  .legal-body {
    background: var(--paper);
    padding: 60px 0 100px;
  }

  @media (min-width: 768px) {
    .legal-body {
      padding: 80px 0 140px;
    }
  }

  .legal-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 1200px;
  }

  @media (min-width: 900px) {
    .legal-grid {
      grid-template-columns: 240px 1fr;
      gap: 60px;
    }
  }

  /* TOC sidebar */
  .legal-toc {
    position: relative;
    font-size: 13px;
  }

  @media (min-width: 900px) {
    .legal-toc {
      position: sticky;
      top: 96px;
      align-self: start;
      max-height: calc(100vh - 120px);
      overflow-y: auto;
    }
  }

  .legal-toc-label {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-50);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--paper-line);
  }

  .legal-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .legal-toc-item a {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-70);
    text-decoration: none;
    border-radius: var(--r-sm);
    transition: all var(--dur-base);
  }

  .legal-toc-item a:hover {
    background: var(--paper-deep);
    color: var(--ink-100);
  }

  .legal-toc-item-num {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-50);
    flex-shrink: 0;
    min-width: 24px;
  }

  .legal-toc-item-label {
    flex: 1;
  }

  /* Prose */
  .legal-prose {
    max-width: 720px;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ink-90);
  }

  .legal-section {
    padding-top: 8px;
    margin-bottom: 48px;
    scroll-margin-top: 90px;
  }

  .legal-section:last-child {
    margin-bottom: 0;
  }

  .legal-section-num {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-50);
    margin-bottom: 14px;
  }

  .legal-section-num strong {
    color: var(--teal-deep);
    font-weight: 600;
  }

  .legal-section-num-line {
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--paper-line);
  }

  .legal-prose h2 {
    font-family: var(--font-display);
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: var(--ink-100);
    margin-bottom: 18px;
    text-wrap: balance;
  }

  .legal-prose h3 {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--ink-100);
    margin-top: 24px;
    margin-bottom: 10px;
  }

  .legal-prose p {
    margin-bottom: 16px;
    color: var(--ink-80);
  }

  .legal-prose p:last-child {
    margin-bottom: 0;
  }

  .legal-prose strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .legal-prose em {
    font-style: italic;
  }

  .legal-prose code {
    font-size: 13px;
    background: var(--paper-deep);
    border: 1px solid var(--paper-line);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--ink-100);
  }

  .legal-prose ul, .legal-prose ol {
    margin: 0 0 16px;
    padding-left: 20px;
  }

  .legal-prose ul {
    list-style: disc;
  }

  .legal-prose ol {
    list-style: decimal;
  }

  .legal-prose li {
    margin-bottom: 8px;
    color: var(--ink-80);
  }

  .legal-prose li::marker {
    color: var(--ink-50);
  }

  .legal-prose a {
    color: var(--teal-deep);
    text-decoration: underline;
    text-decoration-color: rgba(31, 138, 117, 0.3);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--dur-base);
  }

  .legal-prose a:hover {
    text-decoration-color: var(--teal-deep);
  }

  .legal-prose blockquote {
    margin: 20px 0;
    padding: 16px 20px;
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-left: 3px solid var(--teal-deep);
    border-radius: var(--r-sm);
    font-size: 14.5px;
    color: var(--ink-80);
  }

  .legal-prose blockquote strong {
    color: var(--ink-100);
  }

  .legal-callout {
    margin: 20px 0;
    padding: 16px 18px;
    background: var(--paper-deep);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-md);
    font-size: 14px;
    line-height: 1.6;
  }

  .legal-callout-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal-deep);
    margin-bottom: 6px;
  }

  .legal-callout-label-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal-deep);
  }

  /* Definition list for data tables */
  .legal-deflist {
    margin: 16px 0 24px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  @media (min-width: 600px) {
    .legal-deflist {
      grid-template-columns: 200px 1fr;
      gap: 10px 24px;
    }
  }

  .legal-deflist dt {
    font-size: 13px;
    color: var(--ink-100);
    font-weight: 500;
    padding-top: 2px;
  }

  .legal-deflist dd {
    margin: 0;
    font-size: 14.5px;
    color: var(--ink-80);
    line-height: 1.55;
  }

  .legal-deflist dd+dt {
    margin-top: 8px;
  }

  /* ============================================
   03 — CTA FOOTER (LIGHT, simple)
   ============================================ */
  .legal-cta {
    background: var(--paper-deep);
    border-top: 1px solid var(--paper-line);
    padding: 60px 0;
  }

  .legal-cta-inner {
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
  }

  @media (min-width: 700px) {
    .legal-cta-inner {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }

  .legal-cta-text {
    font-family: var(--font-display);
    font-size: clamp(17px, 1.6vw, 20px);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.35;
    color: var(--ink-100);
    max-width: 540px;
  }

  .legal-cta-text em {
    font-style: italic;
    color: var(--teal-deep);
  }

  .legal-cta-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
  }
}

/* ============================================================
   PAGE: success-stories
   ============================================================ */
body.page-success-stories {
  /* success-stories.css */

  /* ============================================
   DEALERSGEAR — SUCCESS STORIES INDEX
   ============================================ */

  /* ============================================
   01 — HERO (LIGHT)
   ============================================ */
  .hero {
    position: relative;
    background: var(--paper);
    color: var(--ink-100);
    overflow: hidden;
    isolation: isolate;
    padding: 120px 0 70px;
  }

  @media (min-width: 768px) {
    .hero {
      padding: 160px 0 90px;
    }
  }

  @media (min-width: 1100px) {
    .hero {
      padding: 170px 0 110px;
    }
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
      linear-gradient(rgba(31, 138, 117, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(31, 138, 117, 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black, transparent 80%);
  }

  .hero::after {
    content: "";
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 1400px;
    height: 800px;
    background:
      radial-gradient(ellipse 50% 40% at 25% 50%, rgba(31, 138, 117, 0.1), transparent 70%),
      radial-gradient(ellipse 50% 40% at 75% 50%, rgba(232, 80, 42, 0.05), transparent 70%);
    filter: blur(60px);
    z-index: -1;
  }

  .hero-inner {
    max-width: 980px;
    position: relative;
    z-index: 1;
  }

  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    background: var(--teal-deep-bg);
    border: 1px solid var(--teal-deep-border);
    border-radius: var(--r-pill);
    font-size: 11px;
    letter-spacing: var(--tracking-label);
    color: var(--teal-deep);
    margin-bottom: 28px;
  }

  .hero-eyebrow-pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal-deep);
    box-shadow: 0 0 8px rgba(31, 138, 117, 0.5);
    animation: blink 2s ease infinite;
  }

  .hero-title {
    font-family: var(--font-display);
    font-size: clamp(40px, 5.6vw, 72px);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 0.98;
    color: var(--ink-100);
    margin-bottom: 24px;
    text-wrap: balance;
  }

  .hero-title em {
    font-style: italic;
    color: var(--teal-deep);
    font-weight: 500;
  }

  .hero-lede {
    max-width: 640px;
    font-size: var(--type-lg);
    line-height: 1.55;
    color: var(--ink-70);
    margin-bottom: 36px;
  }

  .hero-lede strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .hero-lede em {
    color: var(--teal-deep);
    font-style: italic;
  }

  .hero-aggregates {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding-top: 28px;
    border-top: 1px solid var(--paper-line);
  }

  @media (min-width: 600px) {
    .hero-aggregates {
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }
  }

  .hero-agg {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .hero-agg-label {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--ink-50);
  }

  .hero-agg-value {
    font-family: var(--font-display);
    font-size: clamp(30px, 3vw, 42px);
    font-weight: 600;
    letter-spacing: -0.035em;
    color: var(--ink-100);
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
  }

  .hero-agg-value .suffix {
    font-family: var(--font-mono);
    font-size: 0.4em;
    margin-left: 4px;
    color: var(--teal-deep);
  }

  .hero-agg-desc {
    font-size: 12px;
    color: var(--ink-70);
    margin-top: 4px;
  }

  /* ============================================
   02 — PILOTS (LIGHT)
   ============================================ */
  .pilots {
    background: var(--paper);
    border-top: 1px solid var(--paper-line-soft);
  }

  .pilots-header {
    margin-bottom: 48px;
  }

  @media (min-width: 768px) {
    .pilots-header {
      margin-bottom: 64px;
    }
  }

  .pilots-header .section-num strong {
    color: var(--teal-deep);
  }

  .pilots-header .section-title em {
    color: var(--teal-deep);
  }

  .pilots-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  @media (min-width: 768px) {
    .pilots-list {
      gap: 28px;
    }
  }

  .pilot-card {
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: all var(--dur-base) var(--ease-out-expo);
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .pilot-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
  }

  @media (min-width: 800px) {
    .pilot-card {
      grid-template-columns: 1.3fr 1fr;
    }

    .pilot-card.is-reverse {
      grid-template-columns: 1fr 1.3fr;
    }

    .pilot-card.is-reverse .pilot-card-copy {
      order: 2;
    }

    .pilot-card.is-reverse .pilot-card-stats {
      order: 1;
    }
  }

  .pilot-card-copy {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  @media (min-width: 768px) {
    .pilot-card-copy {
      padding: 40px;
    }
  }

  .pilot-card-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-50);
  }

  .pilot-card-tag-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal-deep);
  }

  .pilot-card.is-keller .pilot-card-tag-pip {
    background: var(--coral-deep);
  }

  .pilot-card.is-fam .pilot-card-tag-pip {
    background: var(--amber-deep);
  }

  .pilot-card-name {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.2vw, 38px);
    font-weight: 600;
    letter-spacing: -0.035em;
    color: var(--ink-100);
    line-height: 1.05;
    text-wrap: balance;
  }

  .pilot-card-meta {
    font-size: 14px;
    color: var(--ink-50);
    letter-spacing: 0.02em;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }

  .pilot-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  .pilot-card-meta-pip {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ink-50);
    flex-shrink: 0;
  }

  .pilot-card-headline {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink-90);
    letter-spacing: -0.015em;
    margin-top: 4px;
  }

  .pilot-card-headline strong {
    color: var(--ink-100);
    font-weight: 600;
  }

  .pilot-card-link {
    margin-top: auto;
    padding-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--teal-deep);
    font-weight: 500;
    transition: gap var(--dur-base) var(--ease-out-expo);
    border-top: 1px solid var(--paper-line-soft);
  }

  .pilot-card.is-keller .pilot-card-link {
    color: var(--coral-deep);
  }

  .pilot-card.is-fam .pilot-card-link {
    color: var(--amber-deep);
  }

  .pilot-card-link:hover {
    gap: 12px;
  }

  .pilot-card-link-arrow {
    display: inline-block;
    transition: transform var(--dur-base) var(--ease-out-expo);
  }

  .pilot-card-link:hover .pilot-card-link-arrow {
    transform: translateX(3px);
  }

  .pilot-card-stats {
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    border-left: 1px solid var(--paper-line);
  }

  @media (max-width: 799px) {
    .pilot-card-stats {
      border-left: 0;
      border-top: 1px solid var(--paper-line);
    }
  }

  @media (min-width: 768px) {
    .pilot-card-stats {
      padding: 40px;
    }
  }

  .pilot-card.is-zee .pilot-card-stats {
    background: linear-gradient(180deg, rgba(31, 138, 117, 0.06), rgba(31, 138, 117, 0.02));
  }

  .pilot-card.is-keller .pilot-card-stats {
    background: linear-gradient(180deg, rgba(194, 74, 31, 0.06), rgba(194, 74, 31, 0.02));
  }

  .pilot-card.is-fam .pilot-card-stats {
    background: linear-gradient(180deg, rgba(184, 123, 10, 0.06), rgba(184, 123, 10, 0.02));
  }

  .pilot-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--paper-line);
  }

  .pilot-stat:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .pilot-stat-label {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-50);
  }

  .pilot-stat-value {
    font-family: var(--font-mono);
    font-size: clamp(28px, 2.8vw, 36px);
    font-weight: 600;
    letter-spacing: -0.035em;
    color: var(--ink-100);
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
    display: inline-flex;
    align-items: baseline;
  }

  .pilot-stat-value-suffix {
    font-family: var(--font-mono);
    font-size: 0.42em;
    margin-left: 5px;
    font-weight: 500;
  }

  .pilot-card.is-zee .pilot-stat-value-suffix {
    color: var(--teal-deep);
  }

  .pilot-card.is-keller .pilot-stat-value-suffix {
    color: var(--coral-deep);
  }

  .pilot-card.is-fam .pilot-stat-value-suffix {
    color: var(--amber-deep);
  }

  .pilot-stat-context {
    font-size: 12px;
    color: var(--ink-70);
    line-height: 1.4;
  }

  .pilot-stat-context strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  /* ============================================
   03 — AGGREGATE WALL (DARK)
   ============================================ */
  .aggregate {
    padding: 100px 0;
  }

  @media (min-width: 768px) {
    .aggregate {
      padding: 140px 0;
    }
  }

  .aggregate::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(ellipse 50% 40% at 25% 30%, rgba(62, 207, 178, 0.07), transparent 70%),
      radial-gradient(ellipse 50% 40% at 75% 70%, rgba(232, 80, 42, 0.05), transparent 70%);
  }

  .aggregate-header {
    margin-bottom: 56px;
    max-width: 880px;
  }

  .aggregate-header .section-num strong {
    color: var(--teal);
  }

  .aggregate-header .section-title em {
    color: var(--teal);
  }

  .agg-wall {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-dark-lg);
  }

  @media (min-width: 800px) {
    .agg-wall {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .agg-cell {
    background: rgba(11, 19, 32, 0.7);
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 200px;
    justify-content: space-between;
  }

  @media (min-width: 768px) {
    .agg-cell {
      padding: 38px 28px;
      min-height: 220px;
    }
  }

  @media (max-width: 575px) {
    .agg-wall {
      grid-template-columns: 1fr;
    }
  }

  .agg-cell-label {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--d-ink-50);
  }

  .agg-cell-value {
    font-family: var(--font-mono);
    font-size: clamp(34px, 4.8vw, 40px);
    font-weight: 600;
    letter-spacing: -0.045em;
    color: var(--d-ink-100);
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
    display: inline-flex;
    align-items: baseline;
  }

  .agg-cell-value-suffix {
    font-family: var(--font-mono);
    font-size: 0.32em;
    margin-left: 6px;
    font-weight: 500;
  }

  .agg-cell.is-teal .agg-cell-value-suffix {
    color: var(--teal);
  }

  .agg-cell.is-coral .agg-cell-value-suffix {
    color: var(--coral);
  }

  .agg-cell.is-purple .agg-cell-value-suffix {
    color: var(--purple);
  }

  .agg-cell.is-amber .agg-cell-value-suffix {
    color: var(--amber);
  }

  .agg-cell-desc {
    font-size: 14px;
    line-height: 1.55;
    color: var(--d-ink-70);
  }

  .agg-cell-desc strong {
    color: var(--d-ink-100);
    font-weight: 500;
  }

  .agg-cell-source {
    font-size: 12px;
    color: var(--d-ink-50);
    letter-spacing: 0.02em;
    padding-top: 12px;
    margin-top: auto;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
  }

  /* ============================================
   04 — CATEGORIES (LIGHT)
   ============================================ */
  .categories {
    background: var(--paper);
  }

  .categories-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .categories-header .section-num strong {
    color: var(--purple-deep);
  }

  .categories-header .section-title em {
    color: var(--purple-deep);
  }

  .cat-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 22px;
    padding: 4px;
    background: var(--paper-deep);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-md);
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .cat-tabs::-webkit-scrollbar {
    display: none;
  }

  .cat-tab {
    padding: 9px 16px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ink-70);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--dur-fast);
  }

  .cat-tab:hover {
    color: var(--ink-100);
  }

  .cat-tab[aria-selected="true"] {
    background: var(--paper-card);
    color: var(--purple-deep);
    box-shadow: 0 1px 2px rgba(20, 17, 14, 0.04);
  }

  .cat-panels {
    position: relative;
  }

  .cat-panel {
    display: none;
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-xl);
    padding: 28px;
    box-shadow: var(--shadow-card);
  }

  @media (min-width: 768px) {
    .cat-panel {
      padding: 36px;
    }
  }

  .cat-panel[aria-hidden="false"] {
    display: block;
  }

  .cat-panel-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
  }

  @media (min-width: 900px) {
    .cat-panel-grid {
      grid-template-columns: 1fr 1fr 1fr;
      gap: 28px;
    }
  }

  .cat-stat {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .cat-stat-dealer {
    font-size: 12px;
    color: var(--ink-50);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .cat-stat-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .cat-stat-label {
    font-size: 13px;
    color: var(--ink-70);
  }

  .cat-stat-value {
    font-family: var(--font-mono);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.035em;
    color: var(--ink-100);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin-top: 2px;
  }

  .cat-stat-value-suffix {
    font-family: var(--font-mono);
    font-size: 0.4em;
    margin-left: 4px;
    color: var(--purple-deep);
  }

  .cat-stat-context {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ink-70);
    padding-top: 10px;
    border-top: 1px dashed var(--paper-line-soft);
  }

  .cat-stat-context strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  /* ============================================
   05 — QUOTES (DARK)
   ============================================ */
  .quotes {
    padding: 100px 0;
  }

  @media (min-width: 768px) {
    .quotes {
      padding: 140px 0;
    }
  }

  .quotes::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(62, 207, 178, 0.05), transparent 70%);
  }

  .quotes-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .quotes-header .section-num strong {
    color: var(--teal);
  }

  .quotes-header .section-title em {
    color: var(--teal);
  }

  .quotes-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
  }

  @media (min-width: 900px) {
    .quotes-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
  }

  .quote-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-xl);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: relative;
    transition: all var(--dur-base);
  }

  .quote-card:hover {
    border-color: rgba(62, 207, 178, 0.25);
    background: rgba(255, 255, 255, 0.04);
  }

  .quote-mark {
    font-family: var(--font-display);
    font-size: 64px;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--teal);
    line-height: 0.6;
    height: 22px;
    opacity: 0.5;
  }

  .quote-card.is-keller .quote-mark {
    color: var(--coral);
  }

  .quote-card.is-fam .quote-mark {
    color: var(--amber);
  }

  .quote-text {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--d-ink-90);
    letter-spacing: -0.01em;
    flex: 1;
    text-wrap: balance;
  }

  .quote-text strong {
    color: var(--d-ink-100);
    font-weight: 500;
  }

  .quote-attribution {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .quote-attr-mono {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    color: white;
    flex-shrink: 0;
  }

  .quote-card.is-zee .quote-attr-mono {
    background: linear-gradient(135deg, var(--teal-deep), #0F5A4D);
  }

  .quote-card.is-keller .quote-attr-mono {
    background: linear-gradient(135deg, var(--coral-deep), #8B3415);
  }

  .quote-card.is-fam .quote-attr-mono {
    background: linear-gradient(135deg, var(--amber-deep), #6F4B0A);
  }

  .quote-attr-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }

  .quote-attr-name {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
    color: var(--d-ink-100);
    letter-spacing: -0.015em;
  }

  .quote-attr-role {
    font-size: 12px;
    color: var(--d-ink-50);
    letter-spacing: 0.02em;
  }

  /* ============================================
   06 — PATTERN (LIGHT)
   ============================================ */
  .pattern {
    background: var(--paper-deep);
    border-top: 1px solid var(--paper-line);
    border-bottom: 1px solid var(--paper-line);
  }

  .pattern-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .pattern-header .section-num strong {
    color: var(--coral-deep);
  }

  .pattern-header .section-title em {
    color: var(--coral-deep);
  }

  .pattern-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
  }

  @media (min-width: 900px) {
    .pattern-grid {
      grid-template-columns: 1fr 1fr;
      gap: 28px;
      align-items: stretch;
    }
  }

  .pattern-side {
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-xl);
    padding: 32px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }



  .pattern-side-label {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-50);
  }

  .pattern-side.is-before .pattern-side-label {
    color: var(--coral-deep);
  }

  .pattern-side.is-after .pattern-side-label {
    color: var(--teal-deep);
  }

  .pattern-side-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink-100);
    line-height: 1.25;
  }

  .pattern-side-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .pattern-side-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-90);
  }

  .pattern-side-item-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
  }

  .pattern-side.is-before .pattern-side-item-icon {
    background: var(--coral-deep-bg);
    border: 1px solid var(--coral-deep-border);
    color: var(--coral-deep);
  }

  .pattern-side.is-after .pattern-side-item-icon {
    background: var(--teal-deep-bg);
    border: 1px solid var(--teal-deep-border);
    color: var(--teal-deep);
  }

  .pattern-side-item strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  /* ============================================
   07 — PIPELINE (LIGHT)
   ============================================ */
  .pipeline {
    background: var(--paper);
  }

  .pipeline-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .pipeline-header .section-num strong {
    color: var(--purple-deep);
  }

  .pipeline-header .section-title em {
    color: var(--purple-deep);
  }

  .pipeline-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

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

  @media (min-width: 900px) {
    .pipeline-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }
  }

  .pipeline-card {
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: var(--shadow-card);
  }

  .pipeline-card-label {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-50);
  }

  .pipeline-card-value {
    font-family: var(--font-mono);
    font-size: 38px;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: var(--ink-100);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  .pipeline-card-desc {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-70);
    margin-top: 6px;
  }

  .pipeline-card-desc strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  /* ============================================
   08 — ACP (DARK)
   ============================================ */
  .acp {
    padding: 90px 0;
  }

  @media (min-width: 768px) {
    .acp {
      padding: 120px 0;
    }
  }

  .acp::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(62, 207, 178, 0.06), transparent 70%);
  }

  .acp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
    margin: 0 auto;
  }

  @media (min-width: 900px) {
    .acp-grid {
      grid-template-columns: 1fr 1fr;
      gap: 48px;
    }
  }

  .acp-copy .section-num strong {
    color: var(--teal);
  }

  .acp-copy .section-title em {
    color: var(--teal);
  }

  .acp-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    padding: 12px 16px;
    background: rgba(62, 207, 178, 0.06);
    border: 1px solid rgba(62, 207, 178, 0.22);
    border-radius: var(--r-pill);
    font-size: 14px;
    color: var(--teal);
    transition: all var(--dur-base);
  }

  .acp-link:hover {
    background: rgba(62, 207, 178, 0.12);
    border-color: var(--teal);
  }

  .acp-link-arrow {
    transition: transform var(--dur-base) var(--ease-out-expo);
  }

  .acp-link:hover .acp-link-arrow {
    transform: translate(3px, -3px);
  }

  .acp-envelope {
    background: rgba(6, 9, 15, 0.6);
    border: 1px solid rgba(62, 207, 178, 0.2);
    border-radius: var(--r-lg);
    padding: 18px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.7;
    color: var(--d-ink-70);
    overflow-x: auto;
  }

  .acp-envelope .key {
    color: var(--teal);
  }

  .acp-envelope .str {
    color: var(--coral);
  }

  .acp-envelope .num {
    color: var(--purple);
  }

  .acp-envelope .punct {
    color: var(--d-ink-50);
  }

  .acp-envelope .comment {
    color: var(--d-ink-50);
    opacity: 0.7;
    font-style: italic;
  }

  /* ============================================
   09 — CTA (DARK)
   ============================================ */
  .cta {
    padding: 100px 0 80px;
  }

  @media (min-width: 768px) {
    .cta {
      padding: 140px 0 100px;
    }
  }

  .cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(232, 80, 42, 0.08), transparent 70%);
    filter: blur(40px);
  }

  .cta-title {
    font-family: var(--font-display);
    font-size: var(--type-5xl);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 0.96;
    color: var(--d-ink-100);
    max-width: 1000px;
    margin-bottom: 22px;
    text-wrap: balance;
  }

  .cta-title em {
    font-style: italic;
    color: var(--coral);
    font-weight: 500;
  }

  .cta-sub {
    font-size: var(--type-lg);
    line-height: 1.55;
    color: var(--d-ink-70);
    max-width: 640px;
    margin-bottom: 36px;
  }

  .cta-sub strong {
    color: var(--d-ink-100);
    font-weight: 500;
  }

  .cta-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .cta-actions .btn {
    height: 52px;
    padding: 0 26px;
    font-size: 14px;
  }

  /* ============================================
   10 — FAQ (LIGHT)
   ============================================ */
  .faq {
    background: var(--paper);
  }

  .faq-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .faq-header .section-num strong {
    color: var(--coral-deep);
  }

  .faq-header .section-title em {
    color: var(--coral-deep);
  }

  .faq-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--paper-line);
  }

  .faq-item {
    border-bottom: 1px solid var(--paper-line);
  }

  .faq-item summary {
    cursor: pointer;
    padding: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    list-style: none;
  }

  .faq-item summary::-webkit-details-marker {
    display: none;
  }

  .faq-item-q {
    font-family: var(--font-display);
    font-size: clamp(17px, 1.5vw, 20px);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink-100);
    flex: 1;
    line-height: 1.35;
    text-wrap: balance;
  }

  .faq-item-toggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--paper-deep);
    border: 1px solid var(--paper-line);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    transition: all var(--dur-base);
  }

  .faq-item-toggle::before,
  .faq-item-toggle::after {
    content: "";
    position: absolute;
    background: var(--ink-70);
    border-radius: 1px;
  }

  .faq-item-toggle::before {
    width: 12px;
    height: 1.5px;
  }

  .faq-item-toggle::after {
    width: 1.5px;
    height: 12px;
    transition: transform var(--dur-base), opacity var(--dur-base);
  }

  .faq-item[open] .faq-item-toggle::after {
    transform: rotate(90deg);
    opacity: 0;
  }

  .faq-item[open] .faq-item-toggle {
    background: var(--teal-deep-bg);
    border-color: var(--teal-deep-border);
  }

  .faq-item[open] .faq-item-toggle::before {
    background: var(--teal-deep);
  }

  .faq-item-a {
    padding: 0 0 28px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-70);
    max-width: 720px;
  }

  .faq-item-a strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .faq-item-a p+p {
    margin-top: 10px;
  }
}

/* ============================================================
   PAGE: terms
   ============================================================ */
body.page-terms {
  /* legal.css */

  /* ============================================
   DEALERSGEAR — LEGAL PAGES SHARED CSS
   ============================================
   Used by privacy, terms, and accessibility.
   Minimal styling. Focus on long-form reading
   typography and clear table-of-contents nav.
   ============================================ */

  /* ============================================
   01 — HERO (LIGHT) — page title + meta
   ============================================ */
  .legal-hero {
    position: relative;
    background: var(--paper);
    color: var(--ink-100);
    overflow: hidden;
    isolation: isolate;
    padding: 110px 0 50px;
    border-bottom: 1px solid var(--paper-line);
  }

  @media (min-width: 768px) {
    .legal-hero {
      padding: 140px 0 70px;
    }
  }

  .legal-hero-inner {
    max-width: 880px;
  }

  .legal-crumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.05em;
    color: var(--ink-50);
    margin-bottom: 24px;
  }

  .legal-crumb a {
    color: var(--ink-70);
    text-decoration: none;
    transition: color var(--dur-base);
  }

  .legal-crumb a:hover {
    color: var(--teal-deep);
  }

  .legal-crumb-sep {
    opacity: 0.4;
  }

  .legal-crumb-current {
    color: var(--ink-100);
  }

  .legal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: var(--paper-deep);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-pill);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-70);
    margin-bottom: 22px;
  }

  .legal-eyebrow-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal-deep);
  }

  .legal-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 4.5vw, 56px);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.05;
    color: var(--ink-100);
    margin-bottom: 18px;
    text-wrap: balance;
  }

  .legal-lede {
    max-width: 700px;
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.6;
    color: var(--ink-80);
  }

  .legal-meta {
    margin-top: 28px;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    padding-top: 24px;
    border-top: 1px dashed var(--paper-line);
  }

  .legal-meta-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .legal-meta-key {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-50);
  }

  .legal-meta-value {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-100);
  }

  /* ============================================
   02 — BODY (LIGHT) — TOC + prose layout
   ============================================ */
  .legal-body {
    background: var(--paper);
    padding: 60px 0 100px;
  }

  @media (min-width: 768px) {
    .legal-body {
      padding: 80px 0 140px;
    }
  }

  .legal-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 1200px;
  }

  @media (min-width: 900px) {
    .legal-grid {
      grid-template-columns: 240px 1fr;
      gap: 60px;
    }
  }

  /* TOC sidebar */
  .legal-toc {
    position: relative;
    font-size: 13px;
  }

  @media (min-width: 900px) {
    .legal-toc {
      position: sticky;
      top: 96px;
      align-self: start;
      max-height: calc(100vh - 120px);
      overflow-y: auto;
    }
  }

  .legal-toc-label {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-50);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--paper-line);
  }

  .legal-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .legal-toc-item a {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink-70);
    text-decoration: none;
    border-radius: var(--r-sm);
    transition: all var(--dur-base);
  }

  .legal-toc-item a:hover {
    background: var(--paper-deep);
    color: var(--ink-100);
  }

  .legal-toc-item-num {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-50);
    flex-shrink: 0;
    min-width: 24px;
  }

  .legal-toc-item-label {
    flex: 1;
  }

  /* Prose */
  .legal-prose {
    max-width: 720px;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ink-90);
  }

  .legal-section {
    padding-top: 8px;
    margin-bottom: 48px;
    scroll-margin-top: 90px;
  }

  .legal-section:last-child {
    margin-bottom: 0;
  }

  .legal-section-num {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-50);
    margin-bottom: 14px;
  }

  .legal-section-num strong {
    color: var(--teal-deep);
    font-weight: 600;
  }

  .legal-section-num-line {
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--paper-line);
  }

  .legal-prose h2 {
    font-family: var(--font-display);
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: var(--ink-100);
    margin-bottom: 18px;
    text-wrap: balance;
  }

  .legal-prose h3 {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--ink-100);
    margin-top: 24px;
    margin-bottom: 10px;
  }

  .legal-prose p {
    margin-bottom: 16px;
    color: var(--ink-80);
  }

  .legal-prose p:last-child {
    margin-bottom: 0;
  }

  .legal-prose strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .legal-prose em {
    font-style: italic;
  }

  .legal-prose code {
    font-size: 13px;
    background: var(--paper-deep);
    border: 1px solid var(--paper-line);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--ink-100);
  }

  .legal-prose ul, .legal-prose ol {
    margin: 0 0 16px;
    padding-left: 20px;
  }

  .legal-prose ul {
    list-style: disc;
  }

  .legal-prose ol {
    list-style: decimal;
  }

  .legal-prose li {
    margin-bottom: 8px;
    color: var(--ink-80);
  }

  .legal-prose li::marker {
    color: var(--ink-50);
  }

  .legal-prose a {
    color: var(--teal-deep);
    text-decoration: underline;
    text-decoration-color: rgba(31, 138, 117, 0.3);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--dur-base);
  }

  .legal-prose a:hover {
    text-decoration-color: var(--teal-deep);
  }

  .legal-prose blockquote {
    margin: 20px 0;
    padding: 16px 20px;
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-left: 3px solid var(--teal-deep);
    border-radius: var(--r-sm);
    font-size: 14.5px;
    color: var(--ink-80);
  }

  .legal-prose blockquote strong {
    color: var(--ink-100);
  }

  .legal-callout {
    margin: 20px 0;
    padding: 16px 18px;
    background: var(--paper-deep);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-md);
    font-size: 14px;
    line-height: 1.6;
  }

  .legal-callout-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal-deep);
    margin-bottom: 6px;
  }

  .legal-callout-label-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal-deep);
  }

  /* Definition list for data tables */
  .legal-deflist {
    margin: 16px 0 24px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  @media (min-width: 600px) {
    .legal-deflist {
      grid-template-columns: 200px 1fr;
      gap: 10px 24px;
    }
  }

  .legal-deflist dt {
    font-size: 13px;
    color: var(--ink-100);
    font-weight: 500;
    padding-top: 2px;
  }

  .legal-deflist dd {
    margin: 0;
    font-size: 14.5px;
    color: var(--ink-80);
    line-height: 1.55;
  }

  .legal-deflist dd+dt {
    margin-top: 8px;
  }

  /* ============================================
   03 — CTA FOOTER (LIGHT, simple)
   ============================================ */
  .legal-cta {
    background: var(--paper-deep);
    border-top: 1px solid var(--paper-line);
    padding: 60px 0;
  }

  .legal-cta-inner {
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
  }

  @media (min-width: 700px) {
    .legal-cta-inner {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }

  .legal-cta-text {
    font-family: var(--font-display);
    font-size: clamp(17px, 1.6vw, 20px);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.35;
    color: var(--ink-100);
    max-width: 540px;
  }

  .legal-cta-text em {
    font-style: italic;
    color: var(--teal-deep);
  }

  .legal-cta-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
  }
}

/* ============================================================
   PAGE: website-engine
   ============================================================ */
body.page-website-engine {
  /* product-website-engine.css */

  /* ============================================
   DEALERSGEAR — WEBSITE ENGINE PRODUCT PAGE
   ============================================
   Website Engine is the rendering layer. Reads
   from AutoLink, generates every public page on
   the dealer site with schema attached, deploys
   to edge CDN.

   Brand color lean: TEAL (operational, always-on).
   AutoLink leans purple. VMM will lean coral.

   Section order:
   01 Hero (light)
   02 9 page types grid (light)
   03 Build Engine (dark) — signature scene
   04 Schema deep dive (dark)
   05 SEO + AEO duality (light)
   06 Layouts (light)
   07 Performance evidence (light)
   08 ACP foundation (dark)
   09 CTA (dark)
   10 FAQ (light)
   ============================================ */

  /* ============================================
   01 — HERO (LIGHT)
   ============================================ */
  .hero {
    position: relative;
    background: var(--paper);
    color: var(--ink-100);
    overflow: hidden;
    isolation: isolate;
    padding: 120px 0 70px;
  }

  @media (min-width: 768px) {
    .hero {
      padding: 160px 0 100px;
    }
  }

  @media (min-width: 1100px) {
    .hero {
      padding: 170px 0 120px;
    }
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
      linear-gradient(rgba(31, 138, 117, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(31, 138, 117, 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black, transparent 80%);
  }

  .hero::after {
    content: "";
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 1400px;
    height: 800px;
    background:
      radial-gradient(ellipse 50% 40% at 25% 50%, rgba(31, 138, 117, 0.09), transparent 70%),
      radial-gradient(ellipse 50% 40% at 75% 50%, rgba(194, 74, 31, 0.05), transparent 70%);
    filter: blur(60px);
    z-index: -1;
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: start;
  }

  @media (min-width: 1100px) {
    .hero-grid {
      grid-template-columns: 1fr 1.2fr;
      gap: 56px;
      align-items: center;
    }
  }

  .hero-copy {
    position: relative;
    z-index: 1;
  }

  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    background: var(--teal-deep-bg);
    border: 1px solid var(--teal-deep-border);
    border-radius: var(--r-pill);
    font-size: 11px;
    letter-spacing: var(--tracking-label);
    color: var(--teal-deep);
    margin-bottom: 28px;
  }

  .hero-eyebrow-pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal-deep);
    box-shadow: 0 0 8px rgba(31, 138, 117, 0.5);
    animation: blink 2s ease infinite;
  }

  .hero-title {
    font-family: var(--font-display);
    font-size: clamp(40px, 5.6vw, 72px);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 0.98;
    color: var(--ink-100);
    margin-bottom: 24px;
    text-wrap: balance;
  }

  .hero-title em {
    font-style: italic;
    color: var(--teal-deep);
    font-weight: 500;
    position: relative;
  }

  .hero-title em::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.05em;
    height: 0.06em;
    background: var(--teal-deep);
    opacity: 0.3;
    transform-origin: left;
    animation: underline-draw 1s var(--ease-out-expo) 0.4s both;
  }


  .hero-lede {
    max-width: 560px;
    font-size: var(--type-lg);
    line-height: 1.55;
    color: var(--ink-70);
    margin-bottom: 32px;
  }

  .hero-lede strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .hero-lede em {
    color: var(--teal-deep);
    font-style: italic;
  }

  .hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 36px;
  }

  .hero-actions .btn {
    height: 52px;
    padding: 0 24px;
    font-size: 14px;
  }

  .hero-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding-top: 24px;
    border-top: 1px solid var(--paper-line);
  }

  @media (min-width: 600px) {
    .hero-stats {
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }
  }

  .hero-stat {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .hero-stat-label {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--ink-50);
  }

  .hero-stat-value {
    font-family: var(--font-mono);
    font-size: clamp(24px, 2.4vw, 30px);
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink-100);
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
  }

  .hero-stat-suffix {
    font-family: var(--font-mono);
    font-size: 0.5em;
    color: var(--teal-deep);
    margin-left: 4px;
  }

  /* ============================================
   HERO PRODUCT PEEK — A VDP being rendered.
   Browser chrome + URL bar + page content.
   ============================================ */
  .hero-peek {
    position: relative;
    border-radius: var(--r-xl);
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.8) inset,
      0 30px 60px -20px rgba(20, 17, 14, 0.15),
      0 60px 120px -40px rgba(31, 138, 117, 0.15);
    overflow: hidden;
    isolation: isolate;
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
  }

  @media (min-width: 1100px) {
    .hero-peek {
      max-width: none;
      transform: rotate(1deg) translateY(-8px);
      transition: transform var(--dur-slow) var(--ease-out-expo);
    }

    .hero-peek:hover {
      transform: rotate(0deg) translateY(-12px);
    }
  }

  .hero-peek::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: var(--r-xl);
    background: linear-gradient(135deg, rgba(31, 138, 117, 0.22), transparent 60%, rgba(194, 74, 31, 0.10));
    opacity: 0.6;
    filter: blur(20px);
  }

  /* Browser chrome */
  .peek-chrome {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: var(--paper-deep);
    border-bottom: 1px solid var(--paper-line);
  }

  .peek-dots {
    display: inline-flex;
    gap: 6px;
  }

  .peek-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }

  .peek-dot:nth-child(1) {
    background: #FF6058;
  }

  .peek-dot:nth-child(2) {
    background: #FFBD2E;
  }

  .peek-dot:nth-child(3) {
    background: #27CA3F;
  }

  .peek-url {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: 100px;
    font-size: 11px;
    color: var(--ink-70);
  }

  .peek-url-secure {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--teal-deep);
    flex-shrink: 0;
  }

  .peek-url-host {
    color: var(--ink-100);
    font-weight: 500;
  }

  .peek-url-path {
    color: var(--ink-50);
  }

  /* VDP page content */
  .peek-page {
    padding: 18px;
    background: var(--paper-card);
  }

  .peek-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }

  .peek-page-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink-100);
    line-height: 1.3;
  }

  .peek-page-trim {
    font-size: 12px;
    color: var(--ink-50);
    letter-spacing: 0.02em;
    margin-top: 2px;
  }

  .peek-page-price {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 600;
    color: var(--coral-deep);
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .peek-page-media {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, rgba(31, 138, 117, 0.15), rgba(20, 17, 14, 0.08));
    border-radius: var(--r-md);
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
  }

  .peek-page-media::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 40% at 35% 60%, rgba(255, 255, 255, 0.25), transparent 60%),
      linear-gradient(180deg, transparent 60%, rgba(20, 17, 14, 0.3));
  }

  .peek-page-media::after {
    content: "8 photos";
    position: absolute;
    bottom: 8px;
    right: 8px;
    padding: 3px 8px;
    background: rgba(20, 17, 14, 0.6);
    color: white;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.02em;
    border-radius: 100px;
    backdrop-filter: blur(8px);
  }

  /* Spec grid */
  .peek-specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
  }

  .peek-spec {
    padding: 8px 10px;
    background: var(--paper-deep);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .peek-spec-label {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-50);
  }

  .peek-spec-value {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-100);
    letter-spacing: -0.01em;
  }

  /* FAQ block — proves AEO-ready */
  .peek-faq {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: var(--teal-deep-bg);
    border: 1px solid var(--teal-deep-border);
    border-radius: var(--r-md);
  }

  .peek-faq-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--teal-deep);
    margin-bottom: 6px;
  }

  .peek-faq-tag-pip {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--teal-deep);
  }

  .peek-faq-q {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-100);
    letter-spacing: -0.01em;
    line-height: 1.35;
  }

  /* Schema overlay — small badge at bottom showing schema attached */
  .peek-schema-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--paper-deep);
    border: 1px solid var(--paper-line);
    border-radius: 100px;
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--ink-70);
  }

  .peek-schema-badge-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--purple-deep);
    box-shadow: 0 0 6px rgba(107, 79, 181, 0.5);
    animation: blink 1.6s ease infinite;
    flex-shrink: 0;
  }

  .peek-schema-badge strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  /* ============================================
   02 — NINE PAGE TYPES (LIGHT)
   ============================================ */
  .types {
    background: var(--paper);
  }

  .types-header {
    margin-bottom: 48px;
  }

  @media (min-width: 768px) {
    .types-header {
      margin-bottom: 72px;
    }
  }

  .types-header .section-num strong {
    color: var(--teal-deep);
  }

  .types-header .section-title em {
    color: var(--teal-deep);
  }

  .types-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

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

  @media (min-width: 1000px) {
    .types-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }
  }

  .type-card {
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-lg);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--shadow-card);
    transition: all var(--dur-base) var(--ease-out-expo);
  }

  .type-card:hover {
    transform: translateY(-3px);
    border-color: var(--teal-deep-border);
    box-shadow: var(--shadow-card-hover);
  }

  .type-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
  }

  .type-card-name {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink-100);
    line-height: 1.2;
  }

  .type-card-code {
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--teal-deep);
    background: var(--teal-deep-bg);
    border: 1px solid var(--teal-deep-border);
    padding: 3px 7px;
    border-radius: 4px;
    flex-shrink: 0;
    text-transform: uppercase;
  }

  .type-card-desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-70);
  }

  /* Mini wireframe inside each card */
  .type-card-mini {
    background: var(--paper-deep);
    border-radius: var(--r-md);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 90px;
  }

  .type-card-mini .bar {
    height: 5px;
    background: var(--ink-30);
    border-radius: 100px;
  }

  .type-card-mini .bar.short {
    width: 50%;
  }

  .type-card-mini .bar.medium {
    width: 75%;
  }

  .type-card-mini .bar.tiny {
    width: 30%;
  }

  .type-card-mini .bar.teal {
    background: var(--teal-deep);
    opacity: 0.5;
  }

  .type-card-mini .bar.coral {
    background: var(--coral-deep);
    opacity: 0.5;
  }

  .type-card-mini .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-top: 4px;
  }

  .type-card-mini .grid>div {
    aspect-ratio: 4 / 3;
    background: var(--ink-30);
    opacity: 0.4;
    border-radius: 3px;
  }

  .type-card-schema {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding-top: 12px;
    border-top: 1px solid var(--paper-line-soft);
    margin-top: auto;
  }

  .type-card-schema-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    background: var(--purple-deep-bg);
    border: 1px solid var(--purple-deep-border);
    border-radius: 100px;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--purple-deep);
  }

  .type-card-schema-pill-pip {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--purple-deep);
  }

  /* ============================================
   03 — THE BUILD ENGINE (DARK) — signature scene
   ============================================ */
  .build {
    padding: 100px 0;
  }

  @media (min-width: 768px) {
    .build {
      padding: 140px 0;
    }
  }

  .build::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(ellipse 60% 50% at 30% 30%, rgba(62, 207, 178, 0.06), transparent 70%),
      radial-gradient(ellipse 60% 50% at 70% 70%, rgba(179, 136, 255, 0.05), transparent 70%);
  }

  .build-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .build-header .section-num strong {
    color: var(--teal);
  }

  .build-header .section-title em {
    color: var(--teal);
  }

  /* The three-column engine: input → process → output */
  .build-engine {
    background: rgba(11, 19, 32, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-xl);
    padding: 24px;
    box-shadow: var(--shadow-dark-lg);
  }

  @media (min-width: 768px) {
    .build-engine {
      padding: 32px;
    }
  }

  .build-stage {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: stretch;
  }

  @media (min-width: 1000px) {
    .build-stage {
      grid-template-columns: 1fr auto 1fr auto 1fr;
      gap: 14px;
    }
  }

  .build-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
  }

  .build-col-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--d-ink-50);
  }

  .build-col-head-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .build-col.is-input .build-col-head-pip {
    background: var(--teal);
    box-shadow: 0 0 5px var(--teal);
    animation: blink 1.6s ease infinite;
  }

  .build-col.is-process .build-col-head-pip {
    background: var(--purple);
    box-shadow: 0 0 5px var(--purple);
    animation: blink 1.6s ease infinite;
  }

  .build-col.is-output .build-col-head-pip {
    background: var(--coral);
    box-shadow: 0 0 5px var(--coral);
    animation: blink 1.6s ease infinite;
  }

  .build-col-head-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent);
  }

  /* Input column — inventory event feed */
  .build-events {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .build-event {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(62, 207, 178, 0.15);
    border-radius: var(--r-md);
    font-size: 11px;
    color: var(--d-ink-90);
    line-height: 1.4;
  }

  .build-event-type {
    display: inline-block;
    padding: 2px 6px;
    margin-bottom: 4px;
    background: rgba(62, 207, 178, 0.12);
    color: var(--teal);
    border-radius: 3px;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .build-event strong {
    color: var(--d-ink-100);
    font-weight: 500;
  }

  .build-event-meta {
    margin-top: 4px;
    font-size: 10px;
    color: var(--d-ink-50);
    letter-spacing: 0.02em;
  }

  /* Connector arrows */
  .build-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
  }

  @media (min-width: 1000px) {
    .build-arrow {
      padding: 0 8px;
      min-height: 100%;
    }
  }

  .build-arrow svg {
    width: 32px;
    height: 16px;
  }

  @media (min-width: 1000px) {
    .build-arrow svg {
      width: 24px;
      height: 32px;
    }
  }

  .build-arrow-line {
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 1.5;
    fill: none;
    stroke-dasharray: 3 4;
    animation: dash-flow 2s linear infinite;
  }

  .build-arrow-head {
    fill: rgba(255, 255, 255, 0.4);
  }

  /* Process column — pipeline */
  .build-pipeline {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(179, 136, 255, 0.04);
    border: 1px solid rgba(179, 136, 255, 0.15);
    border-radius: var(--r-md);
    padding: 14px;
  }

  .build-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    font-size: 11px;
    color: var(--d-ink-90);
  }

  .build-step-num {
    font-size: 10px;
    color: var(--purple);
    letter-spacing: 0.08em;
    flex-shrink: 0;
  }

  .build-step strong {
    color: var(--d-ink-100);
    font-weight: 500;
  }

  .build-step-time {
    margin-left: auto;
    font-size: 10px;
    color: var(--d-ink-50);
    white-space: nowrap;
  }

  /* Output column — page panels */
  .build-outputs {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .build-output {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(232, 80, 42, 0.15);
    border-radius: var(--r-md);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--d-ink-90);
    line-height: 1.5;
  }

  .build-output-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
  }

  .build-output-name {
    font-size: 11px;
    color: var(--coral);
    letter-spacing: 0.02em;
  }

  .build-output-time {
    font-size: 11px;
    color: var(--d-ink-50);
  }

  .build-output-meta {
    font-size: 10px;
    color: var(--d-ink-70);
  }

  /* ============================================
   04 — SCHEMA DEEP DIVE (DARK)
   Tabbed JSON-LD code blocks per page type.
   ============================================ */
  .schema {
    padding: 90px 0;
  }

  @media (min-width: 768px) {
    .schema {
      padding: 130px 0;
    }
  }

  .schema::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(179, 136, 255, 0.05), transparent 70%);
  }

  .schema-header {
    margin-bottom: 36px;
    max-width: 880px;
  }

  .schema-header .section-num strong {
    color: var(--purple);
  }

  .schema-header .section-title em {
    color: var(--purple);
  }

  .schema-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 18px;
    padding: 4px;
    background: rgba(11, 19, 32, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-md);
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .schema-tabs::-webkit-scrollbar {
    display: none;
  }

  .schema-tab {
    padding: 8px 14px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--d-ink-70);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--dur-fast);
  }

  .schema-tab:hover {
    color: var(--d-ink-100);
  }

  .schema-tab[aria-selected="true"] {
    background: rgba(179, 136, 255, 0.14);
    color: var(--purple);
  }

  .schema-view {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    background: rgba(6, 9, 15, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-xl);
    padding: 20px;
    box-shadow: var(--shadow-dark-md);
  }

  @media (min-width: 900px) {
    .schema-view {
      grid-template-columns: 1fr 320px;
      padding: 28px;
      gap: 28px;
    }
  }

  .schema-code {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.75;
    color: var(--d-ink-90);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    margin: 0;
  }

  .schema-code .key {
    color: var(--teal);
  }

  .schema-code .str {
    color: var(--coral);
  }

  .schema-code .num {
    color: var(--purple);
  }

  .schema-code .punct {
    color: var(--d-ink-50);
  }

  .schema-code .annot {
    background: rgba(179, 136, 255, 0.08);
    border-bottom: 1px dashed rgba(179, 136, 255, 0.4);
    padding: 0 2px;
    border-radius: 2px;
    cursor: help;
  }

  @media (min-width: 900px) {
    .schema-code {
      white-space: pre;
      overflow-x: auto;
    }
  }

  .schema-notes {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  @media (min-width: 900px) {
    .schema-notes {
      padding-top: 0;
      padding-left: 28px;
      border-top: 0;
      border-left: 1px solid rgba(255, 255, 255, 0.06);
    }
  }

  .schema-note {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .schema-note-prop {
    font-size: 12px;
    color: var(--purple);
    font-weight: 500;
  }

  .schema-note-text {
    font-size: 12px;
    line-height: 1.55;
    color: var(--d-ink-70);
  }

  .schema-note-text strong {
    color: var(--d-ink-100);
    font-weight: 500;
  }

  /* ============================================
   05 — SEO + AEO DUALITY (LIGHT)
   ============================================ */
  .duality {
    background: var(--paper);
  }

  .duality-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .duality-header .section-num strong {
    color: var(--purple-deep);
  }

  .duality-header .section-title em {
    color: var(--purple-deep);
  }

  .duality-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  @media (min-width: 900px) {
    .duality-split {
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
  }

  .duality-panel {
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-xl);
    padding: 28px;
    box-shadow: var(--shadow-card);
  }

  .duality-panel-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-50);
    margin-bottom: 14px;
  }

  .duality-panel-tag-pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal-deep);
  }

  .duality-panel.is-ai .duality-panel-tag-pip {
    background: var(--purple-deep);
  }

  .duality-panel-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink-100);
    margin-bottom: 16px;
    line-height: 1.2;
  }

  .duality-mock {
    background: var(--paper-deep);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-md);
    padding: 16px;
  }

  .duality-mock-query {
    font-size: 12px;
    color: var(--ink-50);
    letter-spacing: 0.02em;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--paper-line);
  }

  .duality-mock-query::before {
    content: "🔍 ";
    margin-right: 6px;
  }

  .duality-mock-result {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .duality-mock-result-host {
    font-size: 11px;
    color: var(--teal-deep);
    letter-spacing: 0.02em;
  }

  .duality-mock-result-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-100);
    letter-spacing: -0.015em;
    line-height: 1.3;
  }

  .duality-mock-result-meta {
    font-size: 12px;
    color: var(--ink-70);
    line-height: 1.5;
  }

  .duality-mock-result-meta strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .duality-mock-result-stars {
    color: var(--amber-deep);
    font-size: 12px;
    margin-top: 2px;
  }

  /* AI engine answer mock */
  .duality-mock-answer {
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-90);
  }

  .duality-mock-answer strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .duality-mock-source {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--paper-line);
    font-size: 12px;
    color: var(--purple-deep);
    letter-spacing: 0.02em;
  }

  .duality-mock-source::before {
    content: "↗ ";
  }



  /* ============================================
   06 — LAYOUTS (LIGHT)
   APEX / DRIVE / FLEET layout cards.
   ============================================ */
  .layouts {
    background: var(--paper-deep);
    border-top: 1px solid var(--paper-line);
  }

  .layouts-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .layouts-header .section-num strong {
    color: var(--coral-deep);
  }

  .layouts-header .section-title em {
    color: var(--coral-deep);
  }

  .layouts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  @media (min-width: 900px) {
    .layouts-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }
  }

  .layout-card {
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: all var(--dur-base) var(--ease-out-expo);
    display: flex;
    flex-direction: column;
  }

  .layout-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--ink-30);
  }

  .layout-preview {
    aspect-ratio: 16 / 10;
    position: relative;
    overflow: hidden;
    padding: 14px 14px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  /* APEX preview — dark luxury */
  .layout-card.is-apex .layout-preview {
    background: linear-gradient(180deg, #0a0a0a, #1a1a1a);
  }

  .layout-card.is-apex .layout-preview .bar {
    background: rgba(255, 255, 255, 0.1);
  }

  .layout-card.is-apex .layout-preview .bar.brand {
    background: #C9A961;
    /* gold */
  }

  .layout-card.is-apex .layout-preview .grid>div {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(201, 169, 97, 0.1);
  }

  /* DRIVE preview — clean modern */
  .layout-card.is-drive .layout-preview {
    background: #ffffff;
    border: 1px solid var(--paper-line);
  }

  .layout-card.is-drive .layout-preview .bar {
    background: rgba(20, 17, 14, 0.08);
  }

  .layout-card.is-drive .layout-preview .bar.brand {
    background: #2563EB;
    /* blue */
  }

  .layout-card.is-drive .layout-preview .grid>div {
    background: rgba(20, 17, 14, 0.04);
    border: 1px solid rgba(20, 17, 14, 0.08);
  }

  /* FLEET preview — industrial */
  .layout-card.is-fleet .layout-preview {
    background: #fefce8;
  }

  .layout-card.is-fleet .layout-preview .bar {
    background: rgba(20, 17, 14, 0.12);
  }

  .layout-card.is-fleet .layout-preview .bar.brand {
    background: #EAB308;
    /* yellow */
  }

  .layout-card.is-fleet .layout-preview .grid>div {
    background: rgba(20, 17, 14, 0.06);
    border: 1px solid rgba(234, 179, 8, 0.2);
  }

  .layout-preview .bar {
    height: 6px;
    border-radius: 100px;
  }

  .layout-preview .bar.short {
    width: 35%;
    height: 4px;
  }

  .layout-preview .bar.tall {
    height: 12px;
    width: 70%;
  }

  .layout-preview .bar.brand {
    width: 28%;
    height: 5px;
  }

  .layout-preview .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-top: 6px;
  }

  .layout-preview .grid>div {
    aspect-ratio: 4 / 3;
    border-radius: 3px;
  }

  .layout-info {
    padding: 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .layout-name {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink-100);
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
  }

  .layout-name-meta {
    font-size: 12px;
    font-weight: 400;
    color: var(--ink-50);
    letter-spacing: 0.02em;
  }

  .layout-tag {
    font-size: 12px;
    color: var(--ink-70);
    letter-spacing: 0.02em;
    margin-bottom: 2px;
  }

  .layout-desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-70);
    margin-top: 4px;
  }

  /* ============================================
   07 — PERFORMANCE EVIDENCE (LIGHT)
   ============================================ */
  .evidence {
    background: var(--paper);
  }

  .evidence-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .evidence-header .section-num strong {
    color: var(--teal-deep);
  }

  .evidence-header .section-title em {
    color: var(--teal-deep);
  }

  .evidence-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

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

  @media (min-width: 1000px) {
    .evidence-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }
  }

  .evidence-card {
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-lg);
    padding: 24px 22px;
    box-shadow: var(--shadow-card);
  }

  .evidence-card-label {
    display: block;
    font-size: 11px;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ink-50);
  }

  .evidence-card-value {
    font-family: var(--font-mono);
    font-size: clamp(36px, 4.2vw, 52px);
    font-weight: 600;
    letter-spacing: -0.04em;
    color: var(--ink-100);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
    margin-top: 4px;
  }

  .evidence-card-suffix {
    font-family: var(--font-mono);
    font-size: 0.42em;
    margin-left: 6px;
    font-weight: 500;
  }

  .evidence-card.is-teal .evidence-card-suffix {
    color: var(--teal-deep);
  }

  .evidence-card.is-coral .evidence-card-suffix {
    color: var(--coral-deep);
  }

  .evidence-card.is-purple .evidence-card-suffix {
    color: var(--purple-deep);
  }

  .evidence-card-desc {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-70);
    margin-top: 6px;
  }



  /* ============================================
   08 — ACP FOUNDATION (DARK) — same as AutoLink
   ============================================ */
  .acp {
    padding: 90px 0;
  }

  @media (min-width: 768px) {
    .acp {
      padding: 120px 0;
    }
  }

  .acp::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(62, 207, 178, 0.06), transparent 70%);
  }

  .acp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
    margin: 0 auto;
  }

  @media (min-width: 900px) {
    .acp-grid {
      grid-template-columns: 1fr 1fr;
      gap: 48px;
    }
  }

  .acp-copy .section-num strong {
    color: var(--teal);
  }

  .acp-copy .section-title em {
    color: var(--teal);
  }

  .acp-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    padding: 12px 16px;
    background: rgba(62, 207, 178, 0.06);
    border: 1px solid rgba(62, 207, 178, 0.22);
    border-radius: var(--r-pill);
    font-size: 14px;
    color: var(--teal);
    transition: all var(--dur-base);
  }

  .acp-link:hover {
    background: rgba(62, 207, 178, 0.12);
    border-color: var(--teal);
  }

  .acp-link-arrow {
    transition: transform var(--dur-base) var(--ease-out-expo);
  }

  .acp-link:hover .acp-link-arrow {
    transform: translate(3px, -3px);
  }

  .acp-envelope {
    background: rgba(6, 9, 15, 0.6);
    border: 1px solid rgba(62, 207, 178, 0.2);
    border-radius: var(--r-lg);
    padding: 18px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.7;
    color: var(--d-ink-70);
    overflow-x: auto;
  }

  .acp-envelope .key {
    color: var(--teal);
  }

  .acp-envelope .str {
    color: var(--coral);
  }

  .acp-envelope .num {
    color: var(--purple);
  }

  .acp-envelope .punct {
    color: var(--d-ink-50);
  }

  .acp-envelope .comment {
    color: var(--d-ink-50);
    opacity: 0.7;
    font-style: italic;
  }

  /* ============================================
   09 — CTA (DARK)
   ============================================ */
  .cta {
    padding: 100px 0 80px;
  }

  @media (min-width: 768px) {
    .cta {
      padding: 140px 0 100px;
    }
  }

  .cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(232, 80, 42, 0.08), transparent 70%);
    filter: blur(40px);
  }

  .cta-title {
    font-family: var(--font-display);
    font-size: var(--type-5xl);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 0.96;
    color: var(--d-ink-100);
    max-width: 1000px;
    margin-bottom: 22px;
    text-wrap: balance;
  }

  .cta-title em {
    font-style: italic;
    color: var(--coral);
    font-weight: 500;
  }

  .cta-sub {
    font-size: var(--type-lg);
    line-height: 1.55;
    color: var(--d-ink-70);
    max-width: 640px;
    margin-bottom: 36px;
  }

  .cta-sub strong {
    color: var(--d-ink-100);
    font-weight: 500;
  }

  .cta-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .cta-actions .btn {
    height: 52px;
    padding: 0 26px;
    font-size: 14px;
  }

  /* ============================================
   10 — FAQ (LIGHT)
   ============================================ */
  .faq {
    background: var(--paper);
  }

  .faq-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .faq-header .section-num strong {
    color: var(--coral-deep);
  }

  .faq-header .section-title em {
    color: var(--coral-deep);
  }

  .faq-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--paper-line);
  }

  .faq-item {
    border-bottom: 1px solid var(--paper-line);
  }

  .faq-item summary {
    cursor: pointer;
    padding: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    list-style: none;
    transition: color var(--dur-fast);
  }

  .faq-item summary::-webkit-details-marker {
    display: none;
  }

  .faq-item-q {
    font-family: var(--font-display);
    font-size: clamp(17px, 1.5vw, 20px);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink-100);
    flex: 1;
    line-height: 1.35;
    text-wrap: balance;
  }

  .faq-item-toggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--paper-deep);
    border: 1px solid var(--paper-line);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    transition: all var(--dur-base) var(--ease-out-expo);
  }

  .faq-item-toggle::before,
  .faq-item-toggle::after {
    content: "";
    position: absolute;
    background: var(--ink-70);
    border-radius: 1px;
  }

  .faq-item-toggle::before {
    width: 12px;
    height: 1.5px;
  }

  .faq-item-toggle::after {
    width: 1.5px;
    height: 12px;
    transition: transform var(--dur-base), opacity var(--dur-base);
  }

  .faq-item[open] .faq-item-toggle::after {
    transform: rotate(90deg);
    opacity: 0;
  }

  .faq-item[open] .faq-item-toggle {
    background: var(--teal-deep-bg);
    border-color: var(--teal-deep-border);
  }

  .faq-item[open] .faq-item-toggle::before {
    background: var(--teal-deep);
  }

  .faq-item-a {
    padding: 0 0 28px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-70);
    max-width: 720px;
  }

  .faq-item-a strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .faq-item-a p+p {
    margin-top: 10px;
  }
}

/* ============================================================
   PAGE: zee-motors-case
   ============================================================ */
body.page-zee-motors-case {
  /* success-stories-zee-motors.css */

  /* ============================================
   DEALERSGEAR — CASE STUDY: ZEE MOTORS
   ============================================
   Individual case study template.
   Brand color lean: teal (operational/proof).
   This is the template; Keller and FAM clones
   follow the same structure with different
   color leans and content.
   ============================================ */

  /* ============================================
   01 — HERO (LIGHT)
   ============================================ */
  .hero {
    position: relative;
    background: var(--paper);
    color: var(--ink-100);
    overflow: hidden;
    isolation: isolate;
    padding: 110px 0 60px;
  }

  @media (min-width: 768px) {
    .hero {
      padding: 150px 0 80px;
    }
  }

  @media (min-width: 1100px) {
    .hero {
      padding: 160px 0 100px;
    }
  }

  .hero::after {
    content: "";
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 1400px;
    height: 800px;
    background:
      radial-gradient(ellipse 50% 40% at 30% 50%, rgba(31, 138, 117, 0.1), transparent 70%),
      radial-gradient(ellipse 50% 40% at 70% 50%, rgba(232, 80, 42, 0.05), transparent 70%);
    filter: blur(60px);
    z-index: -1;
  }

  .crumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ink-50);
  }

  .crumb a {
    color: var(--ink-70);
    transition: color var(--dur-fast);
  }

  .crumb a:hover {
    color: var(--teal-deep);
  }

  .crumb-sep {
    color: var(--ink-30);
  }

  .crumb-current {
    color: var(--ink-100);
    font-weight: 500;
  }

  .eee {
    margin-top: 25px;
  }

  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    background: var(--teal-deep-bg);
    border: 1px solid var(--teal-deep-border);
    border-radius: var(--r-pill);
    font-size: 11px;
    letter-spacing: var(--tracking-label);
    color: var(--teal-deep);
    margin-bottom: 24px;
  }

  .hero-eyebrow-pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal-deep);
    box-shadow: 0 0 8px rgba(31, 138, 117, 0.5);
    animation: blink 2s ease infinite;
  }

  .hero-dealer {
    font-family: var(--font-display);
    font-size: clamp(48px, 6.4vw, 88px);
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 0.95;
    color: var(--ink-100);
    margin-bottom: 18px;
    text-wrap: balance;
  }

  .hero-headline {
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: var(--ink-70);
    max-width: 740px;
    margin-bottom: 36px;
    text-wrap: balance;
  }

  .hero-headline em {
    color: var(--teal-deep);
    font-style: italic;
    font-weight: 500;
  }

  .hero-headline strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .hero-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding-top: 28px;
    border-top: 1px solid var(--paper-line);
  }

  @media (min-width: 600px) {
    .hero-stats {
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }
  }

  .hero-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .hero-stat-label {
    font-size: 12px;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ink-50);
  }

  .hero-stat-value {
    font-family: var(--font-mono);
    font-size: clamp(30px, 3vw, 42px);
    font-weight: 600;
    letter-spacing: -0.04em;
    color: var(--ink-100);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
  }

  .hero-stat-value .suffix {
    font-family: var(--font-mono);
    font-size: 0.4em;
    margin-left: 4px;
    color: var(--teal-deep);
  }

  .hero-stat-context {
    font-size: 12px;
    color: var(--ink-70);
    margin-top: 4px;
  }

  /* ============================================
   02 — AT A GLANCE (LIGHT)
   ============================================ */
  .glance {
    background: var(--paper);
    border-top: 1px solid var(--paper-line-soft);
  }

  .glance-card {
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-xl);
    padding: 28px;
    box-shadow: var(--shadow-card);
  }

  .glance-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  @media (min-width: 700px) {
    .glance-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (min-width: 1000px) {
    .glance-grid {
      grid-template-columns: repeat(6, 1fr);
      gap: 28px;
    }
  }

  .glance-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .glance-item-label {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-50);
  }

  .glance-item-value {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-100);
    letter-spacing: -0.015em;
  }

  .visually-hidden {
    margin-bottom: 25px;
  }

  /* ============================================
   03 — THE CHALLENGE (DARK)
   ============================================ */
  .challenge {
    padding: 100px 0;
  }

  @media (min-width: 768px) {
    .challenge {
      padding: 130px 0;
    }
  }

  .challenge::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(232, 80, 42, 0.07), transparent 70%);
  }

  .challenge-header {
    margin-bottom: 56px;
    max-width: 880px;
  }

  .challenge-header .section-num strong {
    color: var(--coral);
  }

  .challenge-header .section-title em {
    color: var(--coral);
  }

  .challenge-pains {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  @media (min-width: 900px) {
    .challenge-pains {
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }
  }

  .pain-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-lg);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .pain-card-rank {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--coral);
    font-weight: 500;
  }

  .pain-card-title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink-100);
    line-height: 1.3;
    margin-bottom: 15px;
  }

  .pain-card-desc {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-70);
    margin-bottom: 10px;
  }

  .pain-card-desc strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .pain-card-evidence {
    margin-top: 6px;
    padding: 10px 12px;
    background: rgba(232, 80, 42, 0.08);
    border: 1px solid rgba(232, 80, 42, 0.18);
    border-radius: 6px;
    font-size: 12px;
    color: var(--ink-90);
    line-height: 1.5;
  }

  .pain-card-evidence strong {
    color: var(--coral);
    font-weight: 500;
  }

  /* ============================================
   04 — ROLLOUT TIMELINE (DARK) — signature
   ============================================ */
  .rollout {
    padding: 100px 0;
  }

  @media (min-width: 768px) {
    .rollout {
      padding: 130px 0;
    }
  }

  .rollout::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(62, 207, 178, 0.07), transparent 70%);
  }

  .rollout-header {
    margin-bottom: 56px;
    max-width: 880px;
  }

  .rollout-header .section-num strong {
    color: var(--teal);
  }

  .rollout-header .section-title em {
    color: var(--teal);
  }

  .timeline {
    padding: 60px 24px;
  }

  @media (min-width: 768px) {
    .timeline {
      padding: 100px 0;
    }
  }

  .timeline-track {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .timeline-track::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(62, 207, 178, 0.3), rgba(62, 207, 178, 0.3), transparent);
  }

  .tl-event {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 18px;
    align-items: flex-start;
  }

  .tl-week {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--navy-900);
    border: 2px solid var(--teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--teal);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 6px rgba(11, 19, 32, 0.55);
    line-height: 1;
    text-align: center;
  }

  .tl-week span {
    display: block;
    font-size: 14px;
    color: var(--d-ink-100);
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  .tl-week.is-launch {
    border-color: var(--coral);
    color: var(--coral);
  }

  .tl-week.is-launch span {
    color: var(--coral);
  }

  .tl-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--r-md);
    padding: 16px 20px;
  }

  .tl-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    flex-wrap: wrap;
  }

  .tl-card-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--d-ink-100);
    line-height: 1.25;
  }

  .tl-card-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    background: rgba(62, 207, 178, 0.1);
    border: 1px solid rgba(62, 207, 178, 0.2);
    border-radius: 100px;
    font-size: 12px;
    color: var(--teal);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .tl-card-tag.is-launch {
    background: rgba(232, 80, 42, 0.1);
    border-color: rgba(232, 80, 42, 0.25);
    color: var(--coral);
  }

  .tl-card-desc {
    font-size: 14px;
    line-height: 1.55;
    color: var(--d-ink-70);
  }

  .tl-card-desc strong {
    color: var(--d-ink-100);
    font-weight: 500;
  }

  .tl-card-metric {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 5px;
    font-size: 12px;
    color: var(--d-ink-90);
  }

  .tl-card-metric-pip {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--teal);
  }

  .tl-card-metric strong {
    color: var(--teal);
    font-weight: 500;
  }

  /* ============================================
   05 — WHAT WE BUILT (LIGHT)
   ============================================ */
  .built {
    background: var(--paper);
  }

  .built-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .built-header .section-num strong {
    color: var(--teal-deep);
  }

  .built-header .section-title em {
    color: var(--teal-deep);
  }

  .built-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  @media (min-width: 900px) {
    .built-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }
  }

  .built-card {
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-xl);
    padding: 28px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .built-card.is-purple {
    border-top: 4px solid var(--purple-deep);
  }

  .built-card.is-teal {
    border-top: 4px solid var(--teal-deep);
  }

  .built-card.is-coral {
    border-top: 4px solid var(--coral-deep);
  }

  .built-card-product {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-50);
  }

  .built-card.is-purple .built-card-product {
    color: var(--purple-deep);
  }

  .built-card.is-teal .built-card-product {
    color: var(--teal-deep);
  }

  .built-card.is-coral .built-card-product {
    color: var(--coral-deep);
  }

  .built-card-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink-100);
    line-height: 1.25;
  }

  .built-card-desc {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-70);
  }

  .built-card-desc strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .built-card-list {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px dashed var(--paper-line-soft);
  }

  .built-card-list-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-70);
  }

  .built-card-list-item::before {
    content: "✓";
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    margin-top: 1px;
  }

  .built-card.is-purple .built-card-list-item::before {
    background: var(--purple-deep-bg);
    color: var(--purple-deep);
    border: 1px solid var(--purple-deep-border);
  }

  .built-card.is-teal .built-card-list-item::before {
    background: var(--teal-deep-bg);
    color: var(--teal-deep);
    border: 1px solid var(--teal-deep-border);
  }

  .built-card.is-coral .built-card-list-item::before {
    background: var(--coral-deep-bg);
    color: var(--coral-deep);
    border: 1px solid var(--coral-deep-border);
  }

  .built-card-list-item strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  /* ============================================
   06 — RESULTS IN NUMBERS (LIGHT)
   ============================================ */
  .results {
    background: var(--paper-deep);
    border-top: 1px solid var(--paper-line);
    border-bottom: 1px solid var(--paper-line);
  }

  .results-header {
    margin-bottom: 56px;
    max-width: 880px;
  }

  .results-header .section-num strong {
    color: var(--teal-deep);
  }

  .results-header .section-title em {
    color: var(--teal-deep);
  }

  .results-wall {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--paper-line);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
  }

  @media (min-width: 700px) {
    .results-wall {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (min-width: 700px) {
    .results-wall {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  @media (min-width: 1200px) {
    .results-wall {
      grid-template-columns: repeat(6, 1fr);
    }
  }

  .results-cell {
    background: var(--paper-card);
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 150px;
  }

  .results-cell-label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--ink-50);
  }

  .results-cell-value {
    font-family: var(--font-mono);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: var(--ink-100);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
  }

  .results-cell-suffix {
    font-family: var(--font-mono);
    font-size: 0.4em;
    margin-left: 4px;
    color: var(--teal-deep);
  }

  .results-cell-context {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-70);
    margin-top: auto;
  }

  .results-cell-context strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  /* Bar chart for citation growth */
  .results-chart {
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-xl);
    padding: 28px;
    box-shadow: var(--shadow-card);
    margin-bottom: 24px;
  }

  .results-chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .results-chart-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink-100);
  }

  .results-chart-meta {
    font-size: 12px;
    color: var(--ink-50);
    letter-spacing: 0.02em;
  }

  .results-chart-bars {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 6px;
    align-items: end;
    height: 180px;
    border-bottom: 1px solid var(--paper-line);
    padding-bottom: 24px;
  }

  .results-bar {
    background: linear-gradient(180deg, var(--teal-deep), rgba(31, 138, 117, 0.7));
    border-radius: 3px 3px 0 0;
    min-height: 6px;
    position: relative;
    transition: height var(--dur-slow) var(--ease-out-expo);
  }

  .results-bar-value {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--teal-deep);
    white-space: nowrap;
    font-weight: 500;
  }

  .results-chart-axis {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 6px;
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--ink-50);
    letter-spacing: 0.02em;
    text-align: center;
  }

  /* ============================================
   07 — TEAM PERSPECTIVE (DARK) — quotes
   ============================================ */
  .team {
    padding: 100px 0;
  }

  @media (min-width: 768px) {
    .team {
      padding: 130px 0;
    }
  }

  .team::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(62, 207, 178, 0.05), transparent 70%);
  }

  .team-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .team-header .section-num strong {
    color: var(--teal);
  }

  .team-header .section-title em {
    color: var(--teal);
  }

  .team-quotes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
  }

  @media (min-width: 900px) {
    .team-quotes {
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
  }

  .team-quote {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-xl);
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .team-quote-role {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--teal);
  }

  .team-quote-text {
    font-family: var(--font-display);
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: var(--d-ink-90);
    flex: 1;
    text-wrap: balance;
  }

  .team-quote-text strong {
    color: var(--d-ink-100);
    font-weight: 500;
  }

  .team-quote-attr {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .team-quote-attr-mono {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--teal-deep), #0F5A4D);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    color: white;
    flex-shrink: 0;
  }

  .team-quote-attr-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .team-quote-attr-name {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
    color: var(--d-ink-100);
    letter-spacing: -0.015em;
  }

  .team-quote-attr-title {
    font-size: 12px;
    color: var(--d-ink-50);
    letter-spacing: 0.02em;
  }

  /* ============================================
   08 — WHAT'S NEXT (LIGHT)
   ============================================ */
  .next {
    background: var(--paper);
  }

  .next-header {
    margin-bottom: 48px;
    max-width: 880px;
  }

  .next-header .section-num strong {
    color: var(--purple-deep);
  }

  .next-header .section-title em {
    color: var(--purple-deep);
  }

  .next-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  @media (min-width: 700px) {
    .next-list {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .next-item {
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-lg);
    padding: 22px 24px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    box-shadow: var(--shadow-card);
  }

  .next-item-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--purple-deep-bg);
    border: 1px solid var(--purple-deep-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--purple-deep);
  }

  .next-item-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .next-item-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink-100);
    line-height: 1.3;
    margin-bottom: 5px;
  }

  .next-item-desc {
    font-size: 14px;
    color: var(--ink-70);
    line-height: 1.45;
  }

  .next-item-when {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-50);
    white-space: nowrap;
  }

  /* ============================================
   09 — CTA (DARK)
   ============================================ */
  .cta {
    padding: 100px 0 80px;
  }

  @media (min-width: 768px) {
    .cta {
      padding: 140px 0 100px;
    }
  }

  .cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(232, 80, 42, 0.08), transparent 70%);
    filter: blur(40px);
  }

  .cta-title {
    font-family: var(--font-display);
    font-size: var(--type-5xl);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 0.96;
    color: var(--d-ink-100);
    max-width: 1000px;
    margin-bottom: 22px;
    text-wrap: balance;
  }

  .cta-title em {
    font-style: italic;
    color: var(--coral);
    font-weight: 500;
  }

  .cta-sub {
    font-size: var(--type-lg);
    line-height: 1.55;
    color: var(--d-ink-70);
    max-width: 640px;
    margin-bottom: 36px;
  }

  .cta-sub strong {
    color: var(--d-ink-100);
    font-weight: 500;
  }

  .cta-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .cta-actions .btn {
    height: 52px;
    padding: 0 26px;
    font-size: 14px;
  }

  /* ============================================
   10 — RELATED STORIES (LIGHT)
   ============================================ */
  .related {
    background: var(--paper);
    border-top: 1px solid var(--paper-line);
  }

  .related-header {
    margin-bottom: 36px;
  }

  .related-header .section-num strong {
    color: var(--coral-deep);
  }

  .related-header .section-title em {
    color: var(--coral-deep);
  }

  .related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  @media (min-width: 768px) {
    .related-grid {
      grid-template-columns: 1fr 1fr;
      gap: 22px;
    }
  }

  .related-card {
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-xl);
    padding: 28px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: all var(--dur-base) var(--ease-out-expo);
    text-decoration: none;
    color: inherit;
    margin-bottom: 25px;
  }

  .related-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
  }

  .related-card.is-keller:hover {
    border-color: var(--coral-deep-border);
  }

  .related-card.is-fam:hover {
    border-color: var(--amber-deep-border);
  }

  .related-card-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-100);
    margin-bottom: 5px;
  }

  .related-card-tag-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #06664E;
  }

  .related-card.is-keller .related-card-tag-pip {
    background: var(--coral-deep);
  }

  .related-card.is-fam .related-card-tag-pip {
    background: var(--amber-deep);
  }

  .related-card-name {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--ink-100);
    line-height: 1.1;
    margin-bottom: 8px;
  }

  .related-card-meta {
    font-size: 13px;
    color: var(--ink-50);
    letter-spacing: 0.02em;
    margin-bottom: 5px;
  }

  .related-card-headline {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-70);
  }

  .related-card-headline strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .related-card-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--paper-line-soft);
  }

  .related-card-stat-label {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-50);
    margin-bottom: 2px;
  }

  .related-card-stat-value {
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink-100);
    font-variant-numeric: tabular-nums;
  }

  .related-card.is-keller .related-card-stat-value {
    color: var(--coral-deep);
  }

  .related-card.is-fam .related-card-stat-value {
    color: var(--amber-deep);
  }

  .related-card-link {
    margin-top: auto;
    padding-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ink-100);
    transition: gap var(--dur-base);
  }

  .related-card:hover .related-card-link {
    gap: 10px;
  }
}

/* ============================================================
   PAGE: login
   ============================================================ */
body.page-login {

  /* ============================================
     LAYOUT
     Two-column on desktop: form card + benefits aside.
     Single column / form-only on mobile.
     ============================================ */
  .login-section {
    background:
      radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232, 80, 42, 0.05), transparent 70%),
      var(--paper);
    padding: 56px 0 96px;
    min-height: calc(100vh - 80px);
  }

  @media (min-width: 768px) {
    .login-section {
      padding: 110px 0 120px;
    }
  }

  .login-section .shell {
    display: grid;
    gap: 32px;
    grid-template-columns: 1fr;
    align-items: start;
    justify-content: center;
  }

  @media (min-width: 960px) {
    .login-section .shell {
      grid-template-columns: minmax(0, 460px) minmax(0, 380px);
      gap: 56px;
      justify-content: center;
    }
  }

  /* ============================================
     CARD
     ============================================ */
  .login-card {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-xl);
    padding: 36px 28px;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.6) inset,
      0 20px 50px -20px rgba(20, 17, 14, 0.12),
      0 2px 6px -2px rgba(20, 17, 14, 0.05);
  }

  @media (min-width: 600px) {
    .login-card {
      padding: 40px;
    }
  }

  .login-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-50);
    margin-bottom: 18px;
  }

  .login-eyebrow-pip {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--coral-deep);
    box-shadow: 0 0 0 3px var(--coral-deep-bg);
  }

  .login-title {
    font-family: var(--font-display);
    font-size: 30px;
    line-height: 1.1;
    font-weight: 600;
    color: var(--ink-100);
    letter-spacing: -0.022em;
    margin: 0 0 10px;
  }

  @media (min-width: 600px) {
    .login-title {
      font-size: 34px;
    }
  }

  .login-lede {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-70);
    margin: 0 0 28px;
  }

  /* ============================================
     FORM
     ============================================ */
  .login-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .login-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }

  .login-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
  }

  .login-label {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-70);
  }

  .login-forgot {
    font-size: 12px;
    font-weight: 500;
    color: var(--coral-deep);
    text-decoration: none;
    transition: color var(--dur-fast);
  }

  .login-forgot:hover,
  .login-forgot:focus-visible {
    color: var(--coral-bright);
    text-decoration: underline;
  }

  .login-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
  }

  .login-input {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    background: var(--paper);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-md);
    font-family: var(--font-display);
    font-size: 15.5px;
    font-weight: 500;
    color: var(--ink-100);
    letter-spacing: -0.005em;
    transition:
      border-color var(--dur-fast),
      background var(--dur-fast),
      box-shadow var(--dur-fast);
    -webkit-appearance: none;
    appearance: none;
  }

  .login-input::placeholder {
    color: var(--ink-30);
    font-weight: 400;
  }

  .login-input:hover {
    border-color: var(--ink-30);
  }

  .login-input:focus {
    outline: 0;
    border-color: var(--coral-deep);
    background: white;
    box-shadow: 0 0 0 3px var(--coral-deep-bg);
  }

  .login-input:invalid:not(:placeholder-shown) {
    border-color: var(--coral-deep);
  }

  /* Password show/hide pill */
  .login-input-wrap .login-input {
    padding-right: 64px;
  }

  .login-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    height: 36px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-70);
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast);
  }

  .login-toggle:hover {
    background: var(--paper-deep);
    color: var(--ink-100);
  }

  .login-toggle:focus-visible {
    outline: 2px solid var(--coral-deep);
    outline-offset: 2px;
  }

  .login-toggle .login-toggle-hide {
    display: none;
  }

  .login-toggle[aria-pressed="true"] .login-toggle-show {
    display: none;
  }

  .login-toggle[aria-pressed="true"] .login-toggle-hide {
    display: inline;
  }

  /* Remember-me row with custom checkbox */
  .login-remember {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--ink-70);
    cursor: pointer;
    user-select: none;
    margin-top: -2px;
  }

  .login-remember input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .login-remember-box {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--paper-line);
    border-radius: 4px;
    background: var(--paper);
    flex-shrink: 0;
    position: relative;
    transition:
      border-color var(--dur-fast),
      background var(--dur-fast);
  }

  .login-remember-box::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 5px;
    height: 9px;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    transform: translateY(-1px) rotate(45deg);
    opacity: 0;
    transition: opacity var(--dur-fast);
  }

  .login-remember:hover .login-remember-box {
    border-color: var(--ink-30);
  }

  .login-remember input:focus-visible+.login-remember-box {
    outline: 2px solid var(--coral-deep);
    outline-offset: 2px;
  }

  .login-remember input:checked+.login-remember-box {
    background: var(--coral-deep);
    border-color: var(--coral-deep);
  }

  .login-remember input:checked+.login-remember-box::after {
    opacity: 1;
  }

  /* Error/notice region (used by JS, hidden when empty) */
  .login-error {
    background: var(--coral-deep-bg);
    border: 1px solid var(--coral-deep-border);
    color: var(--coral-deep);
    font-size: 13px;
    line-height: 1.45;
    padding: 10px 14px;
    border-radius: var(--r-sm);
  }

  .login-error[data-tone="info"] {
    background: var(--teal-deep-bg);
    border-color: var(--teal-deep-border);
    color: var(--teal-deep);
  }

  /* Submit button — full width, slightly taller than default .btn */
  .login-submit {
    width: 100%;
    height: 56px;
    margin-top: 4px;
    font-size: 15px;
  }

  .login-submit[disabled] {
    opacity: 0.65;
    cursor: progress;
    transform: none;
  }

  /* Separator */
  .login-sep {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 28px 0;
    color: var(--ink-50);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .login-sep::before,
  .login-sep::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--paper-line);
  }

  /* SSO button */
  .login-sso {
    width: 100%;
    height: 52px;
    font-size: 14px;
  }

  .login-sso-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--teal-deep);
    margin-right: 4px;
  }

  /* Footer link inside card */
  .login-foot {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--paper-line);
    font-size: 13.5px;
    color: var(--ink-70);
    text-align: center;
  }

  .login-foot-cta {
    color: var(--coral-deep);
    text-decoration: none;
    font-weight: 500;
    margin-left: 6px;
    transition: color var(--dur-fast);
  }

  .login-foot-cta:hover {
    color: var(--coral-bright);
    text-decoration: underline;
  }

  /* ============================================
     ASIDE (benefits panel — hidden on small screens)
     ============================================ */
  .login-aside {
    display: none;
  }

  @media (min-width: 960px) {
    .login-aside {
      display: flex;
      padding: 12px 0px 0px 8px;
      flex-direction: column;
      justify-content: center;
      height: 100%;
    }
  }

  .login-aside-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-50);
    margin-bottom: 22px;
  }

  .login-aside-pip {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--teal-deep);
    box-shadow: 0 0 0 3px var(--teal-deep-bg);
  }

  .login-aside-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .login-aside-list li {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 14px;
    align-items: start;
  }

  .login-aside-num {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-50);
    padding-top: 2px;
  }

  .login-aside-list strong {
    display: block;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-100);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
  }

  .login-aside-list p {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-70);
    margin: 0;
  }

  .login-aside-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--paper-deep);
    border: 1px solid var(--paper-line-soft);
    border-radius: var(--r-pill);
    font-size: 12.5px;
    color: var(--ink-70);
  }

  .login-aside-status-pip {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--teal-deep);
    box-shadow: 0 0 0 3px var(--teal-deep-bg);
    animation: login-pulse 2.4s ease-in-out infinite;
  }

}

@keyframes login-pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.55;
  }
}

/* ============================================================
   PAGE: accessibility
   (Mirrors body.page-terms so the accessibility page renders
    with the same legal-page chrome that the comment in this
    block originally claimed it would.)
   ============================================================ */
body.page-accessibility {
  /* legal.css */

  /* ============================================
   DEALERSGEAR — LEGAL PAGES SHARED CSS
   ============================================
   Used by privacy, terms, and accessibility.
   Minimal styling. Focus on long-form reading
   typography and clear table-of-contents nav.
   ============================================ */

  /* ============================================
   01 — HERO (LIGHT) — page title + meta
   ============================================ */
  .legal-hero {
    position: relative;
    background: var(--paper);
    color: var(--ink-100);
    overflow: hidden;
    isolation: isolate;
    padding: 110px 0 50px;
    border-bottom: 1px solid var(--paper-line);
  }

  @media (min-width: 768px) {
    .legal-hero {
      padding: 140px 0 70px;
    }
  }

  .legal-hero-inner {
    max-width: 880px;
  }

  .legal-crumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.05em;
    color: var(--ink-50);
    margin-bottom: 24px;
  }

  .legal-crumb a {
    color: var(--ink-70);
    text-decoration: none;
    transition: color var(--dur-base);
  }

  .legal-crumb a:hover {
    color: var(--teal-deep);
  }

  .legal-crumb-sep {
    opacity: 0.4;
  }

  .legal-crumb-current {
    color: var(--ink-100);
  }

  .legal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: var(--paper-deep);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-pill);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-70);
    margin-bottom: 22px;
  }

  .legal-eyebrow-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal-deep);
  }

  .legal-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 4.5vw, 56px);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.05;
    color: var(--ink-100);
    margin-bottom: 18px;
    text-wrap: balance;
  }

  .legal-lede {
    max-width: 700px;
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.6;
    color: var(--ink-80);
  }

  .legal-meta {
    margin-top: 28px;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    padding-top: 24px;
    border-top: 1px dashed var(--paper-line);
  }

  .legal-meta-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .legal-meta-key {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-50);
  }

  .legal-meta-value {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-100);
  }

  /* ============================================
   02 — BODY (LIGHT) — TOC + prose layout
   ============================================ */
  .legal-body {
    background: var(--paper);
    padding: 60px 0 100px;
  }

  @media (min-width: 768px) {
    .legal-body {
      padding: 80px 0 140px;
    }
  }

  .legal-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 1200px;
  }

  @media (min-width: 900px) {
    .legal-grid {
      grid-template-columns: 240px 1fr;
      gap: 60px;
    }
  }

  /* TOC sidebar */
  .legal-toc {
    position: relative;
    font-size: 13px;
  }

  @media (min-width: 900px) {
    .legal-toc {
      position: sticky;
      top: 96px;
      align-self: start;
      max-height: calc(100vh - 120px);
      overflow-y: auto;
    }
  }

  .legal-toc-label {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-50);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--paper-line);
  }

  .legal-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .legal-toc-item a {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-70);
    text-decoration: none;
    border-radius: var(--r-sm);
    transition: all var(--dur-base);
  }

  .legal-toc-item a:hover {
    background: var(--paper-deep);
    color: var(--ink-100);
  }

  .legal-toc-item-num {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-50);
    flex-shrink: 0;
    min-width: 24px;
  }

  .legal-toc-item-label {
    flex: 1;
  }

  /* Prose */
  .legal-prose {
    max-width: 720px;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ink-90);
  }

  .legal-section {
    padding-top: 8px;
    margin-bottom: 48px;
    scroll-margin-top: 90px;
  }

  .legal-section:last-child {
    margin-bottom: 0;
  }

  .legal-section-num {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-50);
    margin-bottom: 14px;
  }

  .legal-section-num strong {
    color: var(--teal-deep);
    font-weight: 600;
  }

  .legal-section-num-line {
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--paper-line);
  }

  .legal-prose h2 {
    font-family: var(--font-display);
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: var(--ink-100);
    margin-bottom: 18px;
    text-wrap: balance;
  }

  .legal-prose h3 {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--ink-100);
    margin-top: 24px;
    margin-bottom: 10px;
  }

  .legal-prose p {
    margin-bottom: 16px;
    color: var(--ink-80);
  }

  .legal-prose p:last-child {
    margin-bottom: 0;
  }

  .legal-prose strong {
    color: var(--ink-100);
    font-weight: 500;
  }

  .legal-prose em {
    font-style: italic;
  }

  .legal-prose code {
    font-size: 13px;
    background: var(--paper-deep);
    border: 1px solid var(--paper-line);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--ink-100);
  }

  .legal-prose ul, .legal-prose ol {
    margin: 0 0 16px;
    padding-left: 20px;
  }

  .legal-prose ul {
    list-style: disc;
  }

  .legal-prose ol {
    list-style: decimal;
  }

  .legal-prose li {
    margin-bottom: 8px;
    color: var(--ink-80);
  }

  .legal-prose li::marker {
    color: var(--ink-50);
  }

  .legal-prose a {
    color: var(--teal-deep);
    text-decoration: underline;
    text-decoration-color: rgba(31, 138, 117, 0.3);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--dur-base);
  }

  .legal-prose a:hover {
    text-decoration-color: var(--teal-deep);
  }

  .legal-prose blockquote {
    margin: 20px 0;
    padding: 16px 20px;
    background: var(--paper-card);
    border: 1px solid var(--paper-line);
    border-left: 3px solid var(--teal-deep);
    border-radius: var(--r-sm);
    font-size: 14.5px;
    color: var(--ink-80);
  }

  .legal-prose blockquote strong {
    color: var(--ink-100);
  }

  .legal-callout {
    margin: 20px 0;
    padding: 16px 18px;
    background: var(--paper-deep);
    border: 1px solid var(--paper-line);
    border-radius: var(--r-md);
    font-size: 14px;
    line-height: 1.6;
  }

  .legal-callout-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal-deep);
    margin-bottom: 6px;
  }

  .legal-callout-label-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal-deep);
  }

  /* Definition list for data tables */
  .legal-deflist {
    margin: 16px 0 24px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  @media (min-width: 600px) {
    .legal-deflist {
      grid-template-columns: 200px 1fr;
      gap: 10px 24px;
    }
  }

  .legal-deflist dt {
    font-size: 12px;
    color: var(--ink-100);
    font-weight: 500;
    padding-top: 2px;
  }

  .legal-deflist dd {
    margin: 0;
    font-size: 14.5px;
    color: var(--ink-80);
    line-height: 1.55;
  }

  .legal-deflist dd+dt {
    margin-top: 8px;
  }

  /* ============================================
   03 — CTA FOOTER (LIGHT, simple)
   ============================================ */
  .legal-cta {
    background: var(--paper-deep);
    border-top: 1px solid var(--paper-line);
    padding: 60px 0;
  }

  .legal-cta-inner {
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
  }

  @media (min-width: 700px) {
    .legal-cta-inner {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }

  .legal-cta-text {
    font-family: var(--font-display);
    font-size: clamp(17px, 1.6vw, 20px);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.35;
    color: var(--ink-100);
    max-width: 540px;
  }

  .legal-cta-text em {
    font-style: italic;
    color: var(--teal-deep);
  }

  .legal-cta-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
  }
}

.post-crumb {
  margin-bottom: 15px;
}

.post-crumb a {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-70);
}

.post-crumb span {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-70);
}

/* ============================================================
   ELEVATE ADDITIONS
   ============================================================ */

/* TASK 3 — serif type signature.
   One reusable class on the emphasized <em> inside big headlines.
   Only sets font-family / italic / size — accent COLOR is left to
   the existing .section-title em / .hero-title em rules (untouched). */
.serif-em {
  font-family: var(--body);
  font-style: italic;
  line-height: 1;
}

/* TASK 1 — self-contained layout previews (replace project1.png x3).
   Scoped to the homepage so no other page is affected. */
body.page-index .lp {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 14px 12px;
  font-family: var(--font-display);
}

body.page-index .lp__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body.page-index .lp__badge {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  padding: 3px 7px;
  border-radius: var(--r-pill);
}

body.page-index .lp__dots {
  display: inline-flex;
  gap: 3px;
}

body.page-index .lp__dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
}

body.page-index .lp__sku {
  font-family: var(--font-mono);
  font-size: 8px;
  opacity: 0.5;
}

body.page-index .lp__shot {
  flex: 1;
  min-height: 0;
  border-radius: var(--r-md);
}

body.page-index .lp__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

body.page-index .lp__price {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

body.page-index .lp__fin {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  opacity: 0.6;
}

body.page-index .lp__spec {
  display: flex;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  opacity: 0.7;
}

body.page-index .lp__spec span {
  white-space: nowrap;
}

body.page-index .lp__cap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px 8px;
  font-size: 9px;
  align-items: baseline;
}

body.page-index .lp__cap span {
  font-family: var(--font-mono);
  opacity: 0.6;
}

body.page-index .lp__cap b {
  font-weight: 700;
  text-align: right;
}

body.page-index .lp__tco {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 9px;
  border-top: 1px solid var(--paper-line);
  padding-top: 5px;
}

body.page-index .lp__tco span {
  font-family: var(--font-mono);
  opacity: 0.6;
}

body.page-index .lp__tco b {
  font-weight: 700;
}

body.page-index .lp__cta {
  margin-top: auto;
  text-align: center;
  font-size: 9.5px;
  font-weight: 600;
  padding: 6px;
  border-radius: var(--r-sm);
}

/* APEX — dark stage, gold accent, luxury VDP */
body.page-index .lp--apex {
  color: var(--d-ink-100);
}

body.page-index .lp--apex .lp__badge {
  color: var(--amber);
  background: rgba(245, 158, 11, 0.14);
}

body.page-index .lp--apex .lp__shot {
  background: linear-gradient(135deg, #1c1a14, #0c0c0c 70%);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.12);
}

body.page-index .lp--apex .lp__price {
  color: var(--amber);
}

body.page-index .lp--apex .lp__cta {
  background: var(--amber);
  color: #0a0a0a;
}

/* DRIVE — light, blue accent, mainstream VDP */
body.page-index .lp--drive {
  color: var(--ink-100);
}

body.page-index .lp--drive .lp__badge {
  color: #1f6fe0;
  background: rgba(56, 132, 255, 0.12);
}

body.page-index .lp--drive .lp__shot {
  background: linear-gradient(135deg, #eaf1fb, #dbe6f5);
}

body.page-index .lp--drive .lp__fin {
  color: #1f6fe0;
  opacity: 1;
}

body.page-index .lp--drive .lp__cta {
  background: #3884FF;
  color: #ffffff;
}

/* FLEET — industrial, structured type, capability / TCO framing */
body.page-index .lp--fleet {
  color: var(--ink-100);
}

body.page-index .lp--fleet .lp__badge {
  color: var(--ink-100);
  background: rgba(245, 230, 0, 0.55);
  border-radius: var(--r-sm);
}

body.page-index .lp--fleet .lp__shot {
  background: repeating-linear-gradient(135deg, #e9e4d2, #e9e4d2 6px, #e3ddc8 6px, #e3ddc8 12px);
}

body.page-index .lp--fleet .lp__title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -0.01em;
}

body.page-index .lp--fleet .lp__cap b {
  color: var(--amber-deep);
}

/* ============================================================
   ERROR PAGES — body.page-error
   Self-contained pages (404, 500, 503). Do NOT extend
   layouts.app — no $setting / $meta DB context available.
   Dark navy stage to signal "this is a special state."
   ============================================================ */

body.page-error {
  background: var(--navy-900);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ── Minimal nav ───────────────────────────────────────────── */
.error-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  height: 64px;
  display: flex;
  align-items: center;
  background: rgba(6, 9, 15, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.error-nav-inner {
  max-width: var(--shell-max);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--shell-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.error-nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.error-nav-logo-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.03em;
  color: var(--d-ink-100);
  line-height: 1;
}

.error-nav-logo-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
}

.error-nav-logo img {
  height: 20px;
}

.error-nav-home {
  font-family: var(--font-display);
  font-size: var(--type-sm);
  font-weight: 500;
  color: var(--d-ink-70);
  text-decoration: none;
  transition: color var(--dur-fast);
}

.error-nav-home:hover {
  color: var(--d-ink-100);
}

/* ── Stage ─────────────────────────────────────────────────── */
.error-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px var(--shell-pad) 80px;
  position: relative;
  overflow: hidden;
  min-height: 90vh;
}

/* Subtle grid texture */
.error-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(62, 207, 178, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(62, 207, 178, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}

/* Ghost error code — massive background number */
.error-stage::after {
  content: attr(data-code);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: clamp(140px, 22vw, 280px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.03);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.error-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}

/* ── Eyebrow ───────────────────────────────────────────────── */
.error-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 7px 14px;
  background: rgba(62, 207, 178, 0.08);
  border: 1px solid rgba(62, 207, 178, 0.18);
  border-radius: var(--r-pill);
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  color: var(--teal);
}

.error-eyebrow-pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
}

/* ── Title & description ───────────────────────────────────── */
.error-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.5vw, 64px);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: 1.05;
  color: var(--d-ink-100);
  margin: 0;
}

.error-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--teal);
}

.error-desc {
  font-size: var(--type-lg);
  line-height: 1.65;
  color: var(--d-ink-70);
  max-width: 500px;
}

/* ── Actions ───────────────────────────────────────────────── */
.error-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* btn-primary / btn-ghost already handle section.dark via the
   existing selectors — but error pages don't use <section class="dark">.
   Apply the dark-surface overrides directly. */
body.page-error .btn-primary {
  background: var(--coral);
  box-shadow: 0 8px 30px -8px rgba(232, 80, 42, 0.5);
}

body.page-error .btn-primary:hover,
body.page-error .btn-primary:focus-visible {
  background: var(--coral-bright);
  box-shadow: 0 12px 50px -8px rgba(232, 80, 42, 0.7);
}

body.page-error .btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--d-ink-100);
}

body.page-error .btn-ghost:hover,
body.page-error .btn-ghost:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

/* ── Footer ────────────────────────────────────────────────── */
.error-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 24px var(--shell-pad);
}

.error-footer-inner {
  max-width: var(--shell-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.error-footer-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--d-ink-70);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color var(--dur-fast);
}

.error-footer-brand span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  flex-shrink: 0;
}

.error-footer-brand:hover {
  color: var(--d-ink-100);
}

.footer-brand img {
  height: 24px;
}

.error-footer-brand img {
  height: 24px;
}

.error-footer-links {
  list-style: none;
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.error-footer-links a {
  font-family: var(--font-display);
  font-size: var(--type-sm);
  color: var(--d-ink-50);
  text-decoration: none;
  transition: color var(--dur-fast);
}

.error-footer-links a:hover {
  color: var(--d-ink-90);
}

@media (max-width: 600px) {
  .error-footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .error-title {
    font-size: clamp(32px, 9vw, 44px);
  }
}

body.page-index .lp--fleet .lp__cta {
  background: var(--ink-100);
  color: var(--paper);
}