/*
 * MRKT Manager landing page v2 — refreshed front-door.
 * Self-contained — token block + Archivo Variable @font-face are inlined below,
 * so this stylesheet drops onto the marketing site without colors_and_type.css.
 *
 * Direction: same DNA, but tighter. Drops the radial-gradient marketing feel
 * for a sharper "operator console" hierarchy — denser numerics, status pulses,
 * monospace stock-numbers in marketing copy, and a single confident teal hue
 * instead of mint+teal competing for attention.
 */

/* ─── Typefaces (all self-hosted, all OFL 1.1) ───────────────
 *
 * All three faces ship with the site. This is not a nicety: before this, only
 * the body sans was a real webfont. The display face and the mono were bare
 * system stacks, so the two most brand-defining elements on the page were an
 * OS lottery — headlines came out Iowan Old Style on a Mac, Palatino Linotype
 * on Windows (which has no 600 weight, so the browser faked the bold), and
 * Georgia or worse on Android. Every visitor saw a different company.
 *
 * Serif + mono are IBM Plex: one superfamily, so the headline, the small-caps
 * labels and the spec numerals are drawn by the same hand. Latin subsets only,
 * ~105 KB for all six files.
 */
/* Body sans is Archivo — the same face the app ships, so the marketing page and
   the product no longer read as two different companies. It replaced Inter, which
   is the default face of every AI-generated product page and was undercutting the
   "existed before the template" argument the serif headline is making below. */
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/Archivo-Latin.woff2') format('woff2-variations');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo Variable';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/Archivo-Latin-Italic.woff2') format('woff2-variations');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/Archivo-LatinExt.woff2') format('woff2-variations');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo Variable';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/Archivo-LatinExt-Italic.woff2') format('woff2-variations');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face { font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/PlexSerif-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/PlexSerif-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/PlexSerif-600.woff2') format('woff2'); }

@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/PlexMono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/PlexMono-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/PlexMono-600.woff2') format('woff2'); }

/* ─── Tokens — dark theme is canonical on the landing site ─ */
:root {
  color-scheme: dark;

  --teal-200: 153 246 228;
  --teal-700:  15 118 110;
  --teal-dark-primary:       61 155 122;
  --teal-dark-primary-hover: 52 130 102;
  --mrkt-mint:              139 197 177;

  --surface-0: 11 15 20;
  --surface-1: 17 22 29;
  --surface-2: 17 22 29;
  --surface-3: 21 27 35;
  --surface-4: 28 35 44;

  --color-background:                var(--surface-0);
  --color-surface:                   var(--surface-1);
  --color-surface-1:                 var(--surface-1);
  --color-surface-3:                 var(--surface-3);
  --color-surface-container:         var(--surface-2);
  --color-surface-container-high:    var(--surface-3);
  --color-surface-container-highest: var(--surface-4);

  --color-on-surface:         230 237 243;
  --color-on-surface-variant: 154 164 175;
  --color-on-surface-dim:     141 150 161;  /* was 107 114 128 - failed AA (3.98:1) at 13-14px */

  --color-primary:        var(--teal-dark-primary);
  --color-primary-hover:  var(--teal-dark-primary-hover);
  --color-on-primary:     240 253 248;
  --color-outline:         42 52 66;
  --color-outline-variant: 31 38 48;

  --color-brand-green:        61 155 122;
  --color-error:    239  68  68;
  --color-warning:  245 158  11;

  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
  --ease-spring:     cubic-bezier(0.34, 1.45, 0.64, 1);
  --dur-2: 160ms;
  --dur-3: 220ms;

  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-pill: 9999px;

  /* Headlines are set in a serif. The tight-tracked heavy sans display face,
     with a brand-colour word dropped into the last clause, is the house style
     of every generated startup page; a serif reads like a company that existed
     before the template did. Plex Serif is the engineered kind of serif rather
     than the literary kind, which is the right register for a tool. */
  --font-display: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;

  /* Every small-caps label, stock number, price and spec numeral on the site. */
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  --shadow-overlay: 0 30px 80px -16px rgb(0 0 0 / 0.70), 0 6px 16px -4px rgb(0 0 0 / 0.50);
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* `cv11 / ss01 / ss03` were private to Inter — in any other family those tags
     address unrelated alternates, so they must not outlive the face that needed
     them. Numerals are stated as standard properties instead: tabular so the spec
     figures line up column-wise, slashed zero so 0 stays distinct from O. */
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: 'calt' on, 'liga' on;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: rgb(var(--color-background));
  color: rgb(var(--color-on-surface));
  font-family: 'Archivo Variable', Archivo, system-ui, sans-serif;
  overflow-x: hidden;
}

/* Clicking marketing chrome (headings, buttons, the mock UIs) shouldn't drop a
   blinking text I-beam or select text like an input. Keep long-form legal prose
   and real form fields selectable. */
body { -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable], .prose, .prose * {
  -webkit-user-select: text; user-select: text;
}

/* ─── Layout ─────────────────────────────────────────────── */
.shell { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px; }
section { padding: 112px 0; position: relative; }
.section-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; margin-bottom: 48px; }
.section-hd .meta { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--color-on-surface-dim)); font-family: var(--font-mono); }

/* ─── Top nav — slimmer, monospace section index ─────────── */
.topnav {
  position: sticky; top: 0; z-index: 30;
  background: rgb(var(--color-background) / 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgb(var(--color-outline) / 0.18);
}
.topnav .row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0;
  min-height: 52px;
}
.topnav .nav-links { display: flex; gap: 4px; align-items: center; }
.topnav .nav-links a {
  font-size: 13px; font-weight: 500;
  letter-spacing: -0.005em;
  color: rgb(var(--color-on-surface-variant));
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 7px;
  transition: color 160ms var(--ease-standard), background-color 160ms var(--ease-standard);
}
.topnav .nav-links a:hover { color: rgb(var(--color-on-surface)); background: rgb(255 255 255 / 0.03); }
.topnav .nav-links a .ix {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgb(var(--color-on-surface-dim));
  margin-right: 6px;
  letter-spacing: 0;
}
.topnav .actions { display: flex; gap: 8px; align-items: center; }

/* Wordmark */
.wm-inline { display: flex; align-items: center; gap: 8px; flex-shrink: 0; text-decoration: none; }
.wm-inline .bars { display: flex; flex-direction: column; gap: 1.5px; }
.wm-inline .bar { height: 3px; border-radius: 0.75px; }
.wm-inline .b1, .wm-inline .b2 { width: 17px; background: rgb(var(--color-on-surface)); }
.wm-inline .b3 { display: flex; gap: 0.75px; }
.wm-inline .b3a { width: 5.2px; height: 3px; border-radius: 0.75px; background: rgb(var(--color-on-surface)); }
.wm-inline .b3b { width: 11.05px; height: 3px; border-radius: 0.75px; background: rgb(var(--mrkt-mint)); }
.wm-inline .word { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: rgb(var(--color-on-surface)); line-height: 1; }
.wm-inline .mgr { font-size: 8.5px; font-weight: 400; letter-spacing: -0.01em; color: rgb(var(--color-on-surface-variant)); margin-left: 3px; vertical-align: 3px; }

/* ─── Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 16px; height: 36px;
  border-radius: 8px;
  font-size: 13.5px; font-weight: 600;
  font-family: inherit; cursor: pointer; text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 160ms var(--ease-standard), border-color 160ms var(--ease-standard), transform 160ms var(--ease-standard);
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn.primary { background: rgb(var(--mrkt-mint)); color: #07100c; border-color: rgb(var(--mrkt-mint)); }
.btn.primary:hover { background: rgb(var(--teal-200)); }
.btn.ghost { background: rgb(var(--color-surface-container) / 0.5); color: rgb(var(--color-on-surface)); border-color: rgb(var(--color-outline) / 0.4); }
.btn.ghost:hover { background: rgb(var(--color-surface-container-high)); border-color: rgb(var(--color-outline) / 0.7); }
.btn.text { background: transparent; color: rgb(var(--color-on-surface)); border: none; padding: 0 10px; }
.btn.text:hover { color: rgb(var(--mrkt-mint)); }
/* Bold mint outline — reads as a real button on the dark nav, distinct from the solid primary. */
.btn.outline { background: rgb(var(--mrkt-mint) / 0.08); color: rgb(var(--mrkt-mint)); border: 1.5px solid rgb(var(--mrkt-mint) / 0.85); font-weight: 700; }
/* Stays an outlined button on hover — brighter fill + border, text stays mint, so it never
   flips into the solid-green look of the Download primary. */
.btn.outline:hover { background: rgb(var(--mrkt-mint) / 0.18); color: rgb(var(--teal-200)); border-color: rgb(var(--mrkt-mint)); }
.btn.lg { height: 44px; padding: 0 20px; font-size: 14.5px; }
.btn .kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgb(0 0 0 / 0.18);
  color: inherit;
  opacity: 0.7;
  margin-left: 2px;
}

/* ─── Eyebrow / labels ──────────────────────────────────── */
/* Plain sentence-case kicker. No monospace, no uppercase tracking, no pulsing
   status dot — that combination is the tell, not the label itself. */
/* Same reasoning as .hero .copy .kicker: these are short labels with no sentence around them, and
   one of them is literally "AI listings", which set in sentence-case Archivo reads as "Al listings".
   Uppercase puts the reader in caps so the I cannot be mistaken for an l. */
.eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgb(var(--color-on-surface-dim));
  font-family: inherit;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgb(var(--mrkt-mint) / 0.18); }
  50%      { box-shadow: 0 0 0 5px rgb(var(--mrkt-mint) / 0.08); }
}

/* ─── Hero ──────────────────────────────────────────────── */
.hero {
  padding: 64px 0 80px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgb(var(--color-outline) / 0.15);
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 50px);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.14;
  margin: 4px 0 22px;
  max-width: 20ch;
  text-wrap: pretty;
}
.hero p.sub {
  font-size: 17px; line-height: 1.62;
  color: rgb(var(--color-on-surface-variant));
  max-width: 560px;
  margin: 0 0 32px;
}
.hero .ctas { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hero .ctas .note {
  font-size: 12px;
  color: rgb(var(--color-on-surface-dim));
  margin-left: 6px;
  font-family: var(--font-mono);
  letter-spacing: -0.005em;
}

/* Hero — copy on the left, a framed peek of the real app on the right */
.hero .lo { display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr); gap: 44px; align-items: center; }
.hero .copy { max-width: 560px; }
.hero .copy h1 { max-width: 24ch; font-size: clamp(34px, 3.7vw, 50px); margin: 4px 0 20px; }
.hero .copy p.sub { max-width: 520px; }

/* Real product screenshot — framed "operator console" window.
   We crop to a legible PEEK (the sidebar + first cars) rather than the whole
   screen, and fade the trailing edges, so the app reads as real without handing
   the full layout over to be copied pixel-for-pixel. */
.hero-shot {
  margin: 0;
  height: 420px;
  border-radius: 16px;
  border: 1px solid rgb(var(--color-outline) / 0.35);
  background: rgb(var(--color-surface-container));
  box-shadow: 0 40px 90px -24px rgb(0 0 0 / 0.65), 0 0 0 1px rgb(var(--mrkt-mint) / 0.04);
  overflow: hidden;
  position: relative;
}
.hero-shot::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgb(var(--mrkt-mint) / 0.45), transparent);
}
/* Trailing-edge fade — the UI dissolves into the page instead of ending on a hard crop. */
.hero-shot::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 58%, rgb(var(--color-background) / 0.92) 100%),
    linear-gradient(0deg, rgb(var(--color-background) / 0.85) 0%, transparent 20%);
}
.hero-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }

/* ─── What-it-does flow graphic (hero right) ─────────────── */
.hero-flow {
  position: relative;
  border-radius: 14px;
  border: 1px solid rgb(var(--color-outline) / 0.35);
  background: rgb(var(--color-surface-container));
  box-shadow: 0 40px 80px -20px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(var(--mrkt-mint) / 0.04);
  padding: 26px 24px;
  display: flex; flex-direction: column;
}
.hero-flow::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgb(var(--color-outline) / 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--color-outline) / 0.12) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black, transparent 80%);
  opacity: 0.5;
}
.hero-flow > * { position: relative; z-index: 1; }
.hero-flow .hf-node {
  border: 1px solid rgb(var(--color-outline) / 0.3);
  border-radius: 12px;
  background: rgb(var(--color-surface-3));
  padding: 14px 16px;
}
.hero-flow .hf-k { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--color-on-surface-dim)); margin-bottom: 12px; }
.hero-flow .hf-rows { display: flex; flex-direction: column; gap: 9px; }
.hero-flow .hf-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: rgb(var(--color-on-surface)); letter-spacing: -0.01em; }
.hero-flow .hf-row b { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums slashed-zero; }
.hero-flow .hf-row .sd { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.hero-flow .hf-row .sd.live { background: rgb(var(--mrkt-mint)); box-shadow: 0 0 6px rgb(var(--mrkt-mint) / 0.6); }
.hero-flow .hf-row .sd.draft { background: #fbbf24; }
.hero-flow .hf-link { position: relative; height: 34px; }
.hero-flow .hf-link::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: linear-gradient(rgb(var(--color-outline) / 0.5), rgb(var(--mrkt-mint) / 0.45)); }
.hero-flow .hf-flow { position: absolute; left: 50%; width: 7px; height: 7px; border-radius: 50%; transform: translateX(-50%); background: rgb(var(--mrkt-mint)); box-shadow: 0 0 8px rgb(var(--mrkt-mint) / 0.8); animation: hf-travel 1.9s var(--ease-standard) infinite; }
@keyframes hf-travel { 0% { top: -2px; opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { top: 31px; opacity: 0; } }
.hero-flow .hf-node.hub, .hero-flow .hf-node.out { display: flex; align-items: center; gap: 13px; }
.hero-flow .hf-node.hub { border-color: rgb(var(--mrkt-mint) / 0.4); background: rgb(var(--mrkt-mint) / 0.07); }
.hero-flow .hf-badge { position: relative; flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: rgb(var(--mrkt-mint) / 0.16); color: rgb(var(--mrkt-mint)); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.hero-flow .hf-node.hub .hf-badge { animation: hf-glow 2.6s var(--ease-standard) infinite; }
@keyframes hf-glow { 0%, 100% { box-shadow: 0 0 0 0 rgb(var(--mrkt-mint) / 0); } 50% { box-shadow: 0 0 18px 0 rgb(var(--mrkt-mint) / 0.45); } }
.hero-flow .hf-badge.live::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--mrkt-mint)); box-shadow: 0 0 8px rgb(var(--mrkt-mint) / 0.7); }
.hero-flow .hf-ping { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%); animation: hf-ping 2.2s var(--ease-standard) infinite; }
@keyframes hf-ping { 0% { box-shadow: 0 0 0 0 rgb(var(--mrkt-mint) / 0.5); } 70%, 100% { box-shadow: 0 0 0 16px rgb(var(--mrkt-mint) / 0); } }
.hero-flow .hf-txt strong { display: block; font-size: 14px; font-weight: 600; color: rgb(var(--color-on-surface)); letter-spacing: -0.01em; }
.hero-flow .hf-txt .hf-sub { font-size: 12px; color: rgb(var(--color-on-surface-variant)); }
@media (prefers-reduced-motion: reduce) {
  .hero-flow .hf-flow, .hero-flow .hf-node.hub .hf-badge, .hero-flow .hf-ping { animation: none; }
  .hero-flow .hf-flow { opacity: 1; top: 14px; }
}

/* Live status strip — above hero copy */
.live-strip {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid rgb(var(--color-outline) / 0.3);
  border-radius: 999px;
  padding: 2px 4px 2px 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  background: rgb(var(--color-surface-container) / 0.5);
  backdrop-filter: blur(6px);
}
.live-strip .seg {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  color: rgb(var(--color-on-surface-variant));
  letter-spacing: 0.04em;
}
.live-strip .seg + .seg { border-left: 1px solid rgb(var(--color-outline) / 0.3); }
.live-strip .seg strong { color: rgb(var(--color-on-surface)); font-weight: 700; }
.live-strip .seg .dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--mrkt-mint)); box-shadow: 0 0 8px rgb(var(--mrkt-mint) / 0.6); animation: pulse 2.4s var(--ease-standard) infinite; }
.live-strip .seg.tag { color: rgb(var(--mrkt-mint)); font-weight: 600; padding-right: 14px; }
/* live activity meter — sits inside the NOW tag, signals "running right now" */
.live-strip .bars-live { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.live-strip .bars-live i { width: 2px; height: 100%; border-radius: 1px; background: rgb(var(--mrkt-mint)); transform-origin: bottom; animation: eq 1.2s ease-in-out infinite; }
.live-strip .bars-live i:nth-child(1) { animation-delay: 0s; }
.live-strip .bars-live i:nth-child(2) { animation-delay: 0.18s; }
.live-strip .bars-live i:nth-child(3) { animation-delay: 0.36s; }
.live-strip .bars-live i:nth-child(4) { animation-delay: 0.54s; }
@keyframes eq { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .live-strip .bars-live i { animation: none; transform: scaleY(0.7); }
  .live-strip .seg .dot { animation: none; }
}

/* Hero product window — flatter, more "console" */
.hero-mock {
  margin-top: 72px;
  border-radius: 14px;
  border: 1px solid rgb(var(--color-outline) / 0.35);
  background: rgb(var(--color-surface-container));
  box-shadow:
    0 40px 80px -16px rgb(0 0 0 / 0.65),
    0 0 0 1px rgb(var(--mrkt-mint) / 0.04);
  overflow: hidden;
  position: relative;
}
/* mock title-bar — combines mac chrome + status badge */
.win-chrome {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: rgb(var(--color-surface-3));
  border-bottom: 1px solid rgb(var(--color-outline) / 0.3);
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgb(var(--color-on-surface-variant));
}
.win-chrome .traffic { display: flex; gap: 6px; }
.win-chrome .traffic span { width: 11px; height: 11px; border-radius: 50%; }
.win-chrome .traffic span:nth-child(1) { background: #ff5f56; }
.win-chrome .traffic span:nth-child(2) { background: #ffbd2e; }
.win-chrome .traffic span:nth-child(3) { background: #27c93f; }
.win-chrome .crumb {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: 8px;
}
.win-chrome .crumb .pip { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--mrkt-mint)); box-shadow: 0 0 6px rgb(var(--mrkt-mint) / 0.6); }
.win-chrome .crumb .sep { color: rgb(var(--color-on-surface-dim)); }
.win-chrome .crumb strong { color: rgb(var(--color-on-surface)); font-weight: 600; }
.win-chrome .right-meta { margin-left: auto; display: inline-flex; gap: 14px; color: rgb(var(--color-on-surface-dim)); font-size: 10.5px; }
.win-chrome .right-meta .ok { color: rgb(var(--mrkt-mint)); }

/* App sub-header — the actual app's nav strip */
.mock-nav {
  display: flex; align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid rgb(var(--color-outline) / 0.18);
  gap: 8px;
  background: rgb(var(--color-background));
}
.mock-nav .tab {
  font-size: 12px; font-weight: 500;
  padding: 5px 9px;
  border-radius: 6px;
  color: rgb(var(--color-on-surface-variant));
  display: inline-flex; align-items: center; gap: 5px;
  letter-spacing: -0.01em;
}
.mock-nav .tab .ix { font-family: var(--font-mono); font-size: 9.5px; color: rgb(var(--color-on-surface-dim)); margin-right: 1px; }
.mock-nav .tab.act { background: rgb(var(--color-primary) / 0.18); color: rgb(var(--color-primary)); font-weight: 600; }
.mock-nav .spacer { flex: 1; }
.mock-nav .btn-row { display: flex; gap: 6px; }
.mock-nav .btn-pill { font-size: 11px; padding: 4px 10px; border-radius: 6px; border: 1px solid rgb(var(--color-outline) / 0.4); color: rgb(var(--color-on-surface-variant)); display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
.mock-nav .btn-pill.fb { color: rgb(var(--color-brand-green)); border-color: rgb(var(--color-brand-green) / 0.4); background: rgb(var(--color-brand-green) / 0.1); }

/* Inventory mock — same 3-pane shape but tighter density */
.inv-mock { display: grid; grid-template-columns: 184px 1fr 296px; min-height: 480px; }
.inv-mock .side { padding: 16px 14px; border-right: 1px solid rgb(var(--color-outline) / 0.2); background: rgb(var(--color-background)); }
.inv-mock .side .lbl { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--color-on-surface-dim)); margin: 0 0 8px; }
.inv-mock .side .pill { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; border-radius: 5px; font-size: 12px; color: rgb(var(--color-on-surface)); margin-bottom: 1px; }
.inv-mock .side .pill.act { background: rgb(var(--color-primary) / 0.14); color: rgb(var(--color-primary)); font-weight: 600; }
.inv-mock .side .pill .ct { font-size: 11px; color: rgb(var(--color-on-surface-variant)); font-variant-numeric: tabular-nums; }
.inv-mock .side .pill.act .ct { color: rgb(var(--color-primary) / 0.85); }
.inv-mock .side .pill .sw { width: 6px; height: 6px; border-radius: 50%; margin-right: 7px; display: inline-block; vertical-align: middle; }
.inv-mock .side hr { border: 0; border-top: 1px solid rgb(var(--color-outline) / 0.18); margin: 14px -14px; }

.inv-mock .list { padding: 14px 18px 0; min-width: 0; }
.inv-mock .list .toolbar {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgb(var(--color-outline) / 0.18);
}
.inv-mock .list .toolbar .search {
  flex: 1; max-width: 280px;
  padding: 6px 10px;
  background: rgb(var(--color-surface-container) / 0.5);
  border: 1px solid rgb(var(--color-outline) / 0.3);
  border-radius: 7px;
  font-size: 12px; color: rgb(var(--color-on-surface-variant));
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}
.inv-mock .list .toolbar .kbd { font-family: var(--font-mono); font-size: 10px; color: rgb(var(--color-on-surface-dim)); border: 1px solid rgb(var(--color-outline) / 0.4); border-radius: 4px; padding: 1px 5px; margin-left: 6px; }
.inv-mock .list .toolbar .right { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: 10.5px; color: rgb(var(--color-on-surface-dim)); }
.inv-mock .list .row {
  display: grid; grid-template-columns: 52px 1fr 52px 80px; gap: 10px; align-items: center;
  padding: 8px 6px;
  border-bottom: 1px solid rgb(var(--color-outline) / 0.08);
  font-size: 13px;
  border-radius: 4px;
}
.inv-mock .list .row.sel { background: rgb(var(--color-primary) / 0.08); position: relative; }
.inv-mock .list .row.sel::before { content: ''; position: absolute; left: -6px; top: 6px; bottom: 6px; width: 2px; border-radius: 1px; background: rgb(var(--color-primary)); }
.inv-mock .list .row .thumb { width: 52px; height: 36px; border-radius: 5px; border: 1px solid rgb(var(--color-outline) / 0.4); }
.inv-mock .list .row .veh { font-size: 13px; font-weight: 600; color: rgb(var(--color-on-surface)); letter-spacing: -0.01em; }
.inv-mock .list .row .meta { font-size: 10.5px; color: rgb(var(--color-on-surface-dim)); font-variant-numeric: tabular-nums slashed-zero; margin-top: 2px; font-family: var(--font-mono); letter-spacing: -0.01em; }
.inv-mock .list .row .stat { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; text-align: center; letter-spacing: 0.04em; font-family: var(--font-mono); }
.inv-mock .list .row .stat.live { background: rgba(94,234,212,0.14); color: #5eead4; }
.inv-mock .list .row .stat.draft { background: rgba(251,191,36,0.14); color: #fbbf24; }
.inv-mock .list .row .stat.queue { background: rgba(125,211,252,0.13); color: #7dd3fc; border: 1px solid rgba(125,211,252,0.3); }
.inv-mock .list .row .price { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums slashed-zero; text-align: right; }

.inv-mock .detail {
  padding: 16px 18px;
  border-left: 1px solid rgb(var(--color-outline) / 0.2);
  background: rgb(var(--color-background));
}
.inv-mock .detail h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 4px; }
.inv-mock .detail .stk { font-family: var(--font-mono); font-size: 10.5px; color: rgb(var(--color-on-surface-dim)); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 4px; }
.inv-mock .detail .mini-strip { display: flex; gap: 4px; margin: 12px 0; }
.inv-mock .detail .mini-strip .tn { width: 36px; height: 26px; border-radius: 4px; background: linear-gradient(135deg, #1e2a36, #11161D); border: 1px solid rgb(var(--color-outline) / 0.4); }
.inv-mock .detail .mini-strip .tn.act { border-color: rgb(var(--color-primary)); }
.inv-mock .detail .price-row { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 0 10px; }
.inv-mock .detail .price-row .price { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums slashed-zero; }
.inv-mock .detail .price-row .since { font-family: var(--font-mono); font-size: 10px; color: rgb(var(--color-on-surface-dim)); }
.inv-mock .detail .ai {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgb(var(--mrkt-mint) / 0.07);
  border: 1px solid rgb(var(--mrkt-mint) / 0.28);
}
.inv-mock .detail .ai .h { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; color: rgb(var(--mrkt-mint)); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-mono); }
.inv-mock .detail .ai .h .glow { width: 14px; height: 14px; border-radius: 3px; background: rgb(var(--mrkt-mint) / 0.22); color: rgb(var(--mrkt-mint)); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; }
.inv-mock .detail .ai .p { font-size: 11.5px; color: rgb(var(--color-on-surface-variant)); margin-top: 6px; line-height: 1.45; }
.inv-mock .detail .ai .row { display: flex; gap: 6px; margin-top: 8px; }
.inv-mock .detail .ai .row .b { font-size: 10.5px; padding: 4px 8px; border-radius: 5px; background: rgb(var(--mrkt-mint)); color: #07100c; font-weight: 600; font-family: inherit; }
.inv-mock .detail .ai .row .g { font-size: 10.5px; padding: 4px 8px; border-radius: 5px; background: transparent; color: rgb(var(--color-on-surface-variant)); border: 1px solid rgb(var(--color-outline) / 0.4); font-family: inherit; }
.inv-mock .detail .specs { margin-top: 12px; display: grid; grid-template-columns: 72px 1fr; row-gap: 5px; column-gap: 12px; font-size: 11.5px; }
.inv-mock .detail .specs .k { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--color-on-surface-dim)); align-self: center; }
.inv-mock .detail .specs .v { color: rgb(var(--color-on-surface)); font-variant-numeric: tabular-nums; }

/* ─── Activity ticker (replaces logo zoo) ──────────────── */
.activity {
  padding: 28px 0;
  border-bottom: 1px solid rgb(var(--color-outline) / 0.18);
  background: rgb(var(--color-surface-1));
}
.activity .row {
  display: flex; align-items: center; gap: 36px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.activity .blurb {
  font-size: 13px;
  color: rgb(var(--color-on-surface-variant));
  letter-spacing: -0.005em;
  max-width: 380px;
}
.activity .blurb strong { color: rgb(var(--color-on-surface)); font-weight: 700; }
.activity .logos { display: flex; gap: 28px; align-items: center; opacity: 0.65; flex-wrap: wrap; }
.activity .logos .lg { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; color: rgb(var(--color-on-surface-variant)); }
.activity .logos .lg.caps { letter-spacing: 0.14em; font-size: 11px; font-weight: 700; }
.activity .logos .lg.serif { font-family: 'Georgia', serif; font-weight: 400; font-style: italic; font-size: 15px; }
.activity .logos .lg.mono { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.activity .logos .lg.cond { font-stretch: 75%; font-weight: 800; font-size: 17px; }

/* ─── Capabilities — control panel layout ─────────────── */
.capabilities { padding: 112px 0; }
.capabilities h2 { font-family: var(--font-display); font-size: clamp(28px, 2.9vw, 38px); font-weight: 600; letter-spacing: -0.005em; margin: 8px 0 16px; max-width: 22ch; line-height: 1.18; }
.capabilities p.lead { font-size: 16px; color: rgb(var(--color-on-surface-variant)); max-width: 580px; line-height: 1.55; margin: 0; }

.cap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
  margin-top: 56px;
}
.cap {
  border-radius: 14px;
  border: 1px solid rgb(var(--color-outline) / 0.28);
  background: rgb(var(--color-surface-container) / 0.5);
  padding: 24px 24px 0;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 320px;
}
.cap.wide { grid-column: span 2; min-height: 280px; }
.cap .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.cap .head .l { flex: 1; min-width: 0; }
.cap .ix {
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.06em;
  color: rgb(var(--color-on-surface-dim));
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.cap .ix .stat-dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--mrkt-mint)); box-shadow: 0 0 6px rgb(var(--mrkt-mint) / 0.6); }
.cap .ix .stat-dot.amber { background: #fbbf24; box-shadow: 0 0 6px rgb(251 191 36 / 0.6); }
.cap .ix .stat-dot.sky   { background: #7dd3fc; box-shadow: 0 0 6px rgb(125 211 252 / 0.5); }
.cap h3 { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: 0; margin: 0 0 10px; line-height: 1.25; }
.cap p { font-size: 15px; line-height: 1.55; color: rgb(var(--color-on-surface-variant)); margin: 0; max-width: 44ch; }

.cap .visual { margin: 24px -1px -1px; border-top: 1px solid rgb(var(--color-outline) / 0.2); padding: 18px 20px 20px; background: rgb(var(--color-background) / 0.5); font-family: var(--font-mono); font-size: 11.5px; }
.cap .visual .log-row { display: grid; grid-template-columns: 56px 1fr 80px; gap: 12px; padding: 4px 0; align-items: center; color: rgb(var(--color-on-surface-variant)); letter-spacing: -0.01em; }
.cap .visual .log-row .t { color: rgb(var(--color-on-surface-dim)); font-size: 10.5px; }
.cap .visual .log-row .e { color: rgb(var(--color-on-surface)); }
.cap .visual .log-row .e .tag { color: rgb(var(--mrkt-mint)); font-weight: 600; }
.cap .visual .log-row .e .tag.amber { color: #fbbf24; }
.cap .visual .log-row .e .tag.orange { color: #f59e0b; }
.cap .visual .log-row .r { text-align: right; font-size: 10.5px; color: rgb(var(--color-on-surface-dim)); }
.cap .visual .log-row .r.ok { color: rgb(var(--mrkt-mint)); }
.cap .visual .blink { animation: blink 1.4s var(--ease-standard) infinite; }
@keyframes blink { 50% { opacity: 0.3; } }

/* meter visual for the "queue draining" card */
.meter {
  margin: 16px 0 0;
  height: 8px;
  background: rgb(var(--color-outline) / 0.25);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.meter .fill {
  height: 100%;
  background: linear-gradient(90deg, rgb(var(--color-primary)), rgb(var(--mrkt-mint)));
  width: 67%;
  border-radius: 4px;
}
.meter-row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: rgb(var(--color-on-surface-variant)); margin-top: 8px; }
.meter-row strong { color: rgb(var(--color-on-surface)); }

/* CRM visual stack inside cap */
.cap .alert-stack { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.cap .alert-stack .alert {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 7px;
  background: rgb(var(--color-surface-container) / 0.8);
  border: 1px solid rgb(var(--color-outline) / 0.25);
  font-size: 12px;
}
.cap .alert-stack .alert .tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 5px; border-radius: 3px; }
.cap .alert-stack .alert .tag.warm { background: rgb(251 191 36 / 0.15); color: #fbbf24; }
.cap .alert-stack .alert .tag.hot  { background: rgb(248 113 113 / 0.15); color: #f87171; }
.cap .alert-stack .alert .nm { color: rgb(var(--color-on-surface)); font-weight: 600; }
.cap .alert-stack .alert .sub { color: rgb(var(--color-on-surface-variant)); font-size: 11px; margin-top: 1px; }
.cap .alert-stack .alert .act { font-size: 10.5px; color: rgb(var(--mrkt-mint)); font-weight: 600; font-family: var(--font-mono); }

/* ─── Story sections ──────────────────────────────────── */
.story { padding: 112px 0; border-top: 1px solid rgb(var(--color-outline) / 0.15); }
.story .lo { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 80px; align-items: center; }
/* A story with no screenshot: one confident column of type, not a half-empty grid. */
.story.textonly .lo { grid-template-columns: 1fr; gap: 0; }
.story.textonly .copy { max-width: 760px; }
.story.reverse .lo { grid-template-areas: 'b a'; }
.story.reverse .copy { grid-area: a; }
.story.reverse .visual { grid-area: b; }
.story .copy h2 { font-family: var(--font-display); font-size: clamp(26px, 2.7vw, 36px); font-weight: 600; letter-spacing: -0.005em; line-height: 1.2; margin: 8px 0 18px; }
.story .copy p { font-size: 16px; line-height: 1.6; color: rgb(var(--color-on-surface-variant)); margin: 0 0 16px; }
.story .copy .pts { margin-top: 28px; display: flex; flex-direction: column; gap: 18px; }
.story .copy .pts .pt { display: grid; grid-template-columns: 22px 1fr; gap: 14px; }
.story .copy .pts .pt .ix {
  width: 22px; height: 22px;
  border-radius: 5px;
  background: rgb(var(--mrkt-mint) / 0.16);
  color: rgb(var(--mrkt-mint));
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  margin-top: 2px;
}
.story .copy .pts .pt h4 { font-size: 15px; font-weight: 600; margin: 0 0 4px; color: rgb(var(--color-on-surface)); letter-spacing: -0.01em; }
.story .copy .pts .pt p { font-size: 15px; margin: 0; color: rgb(var(--color-on-surface-variant)); line-height: 1.55; }

/* Chat-style Reply Assistant mock — tighter */
.chat {
  border-radius: 14px;
  background: rgb(var(--color-surface-container));
  border: 1px solid rgb(var(--color-outline) / 0.3);
  padding: 0;
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.55);
  overflow: hidden;
}
.chat .hd {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.04em;
  font-weight: 500; color: rgb(var(--color-on-surface-variant));
  padding: 12px 18px; background: rgb(var(--color-surface-3));
  border-bottom: 1px solid rgb(var(--color-outline) / 0.2);
  display: flex; align-items: center; gap: 10px;
}
.chat .hd .dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--mrkt-mint)); box-shadow: 0 0 6px rgb(var(--mrkt-mint) / 0.6); }
.chat .hd strong { color: rgb(var(--color-on-surface)); font-weight: 600; }
.chat .hd .meta { margin-left: auto; color: rgb(var(--color-on-surface-dim)); }
.chat .read {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgb(var(--color-outline) / 0.2);
  border-bottom: 1px solid rgb(var(--color-outline) / 0.2);
}
.chat .read .cell { background: rgb(var(--color-surface-container)); padding: 10px 12px; }
.chat .read .cell .k { font-family: var(--font-mono); font-size: 9.5px; color: rgb(var(--color-on-surface-dim)); letter-spacing: 0.08em; text-transform: uppercase; }
.chat .read .cell .v { font-size: 12px; color: rgb(var(--color-on-surface)); font-weight: 600; margin-top: 3px; }
.chat .read .cell .v.amber { color: #fbbf24; }
.chat .read .cell .v.mint { color: rgb(var(--mrkt-mint)); }
.chat .msgs { padding: 16px 18px; display: flex; flex-direction: column; gap: 7px; }
.chat .bubble { max-width: 80%; padding: 8px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; }
.chat .bubble.them { align-self: flex-start; border-bottom-left-radius: 5px; background: rgb(var(--color-surface-container-high)); border: 1px solid rgb(var(--color-outline) / 0.2); }
.chat .bubble.me { align-self: flex-end; border-bottom-right-radius: 5px; background: rgb(var(--color-primary)); color: rgb(var(--color-on-primary)); }
.chat .activity-line { align-self: center; font-family: var(--font-mono); font-size: 10px; padding: 2px 8px; border-radius: 9999px; background: transparent; border: 1px solid rgb(var(--color-outline) / 0.25); color: rgb(var(--color-on-surface-dim)); letter-spacing: 0.04em; }
.chat .draft {
  margin: 4px 18px 18px;
  background: rgb(var(--mrkt-mint) / 0.07);
  border: 1px solid rgb(var(--mrkt-mint) / 0.3);
  border-radius: 10px;
  padding: 12px 14px;
}
.chat .draft .lbl { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--mrkt-mint)); display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.chat .draft .lbl .play { font-size: 9.5px; color: rgb(var(--color-on-surface-variant)); border: 1px solid rgb(var(--color-outline) / 0.4); padding: 1px 5px; border-radius: 3px; }
.chat .draft .txt { font-size: 13.5px; line-height: 1.5; color: rgb(var(--color-on-surface)); }
.chat .draft .ft { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-family: var(--font-mono); font-size: 10px; color: rgb(var(--color-on-surface-variant)); }
.chat .draft .ft .ok { color: rgb(var(--mrkt-mint)); }
.chat .draft .ft .btn-mini { background: rgb(var(--mrkt-mint)); color: #07100c; padding: 4px 10px; border-radius: 6px; font-size: 11.5px; font-weight: 600; font-family: inherit; border: none; cursor: pointer; letter-spacing: 0; }

/* CRM mock — second story */
.crm-mock {
  border-radius: 14px;
  background: rgb(var(--color-surface-container));
  border: 1px solid rgb(var(--color-outline) / 0.3);
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.55);
}
.crm-mock .hd {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgb(var(--color-on-surface-variant));
  padding: 12px 18px;
  background: rgb(var(--color-surface-3));
  border-bottom: 1px solid rgb(var(--color-outline) / 0.2);
  display: flex; align-items: center; gap: 12px;
}
.crm-mock .hd strong { color: rgb(var(--color-on-surface)); font-weight: 600; }
.crm-mock .hd .meta { margin-left: auto; color: rgb(var(--color-on-surface-dim)); }
.crm-mock .filter-row { display: flex; gap: 6px; padding: 10px 18px; border-bottom: 1px solid rgb(var(--color-outline) / 0.15); }
.crm-mock .filter-row .chip { font-family: var(--font-mono); font-size: 10px; padding: 3px 9px; border-radius: 999px; border: 1px solid rgb(var(--color-outline) / 0.3); color: rgb(var(--color-on-surface-variant)); letter-spacing: 0.04em; }
.crm-mock .filter-row .chip.act { background: rgb(var(--color-primary) / 0.18); color: rgb(var(--color-primary)); border-color: rgb(var(--color-primary) / 0.3); }
.crm-mock .body { padding: 0 18px; }
.crm-mock .ev { display: grid; grid-template-columns: 28px 1fr 60px auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid rgb(var(--color-outline) / 0.12); font-size: 13px; }
.crm-mock .ev:last-of-type { border-bottom: none; }
.crm-mock .ev .ava { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, rgb(var(--mrkt-mint)), rgb(var(--teal-700))); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; }
.crm-mock .ev .name { font-weight: 600; }
.crm-mock .ev .sub { font-size: 11px; color: rgb(var(--color-on-surface-variant)); margin-top: 1px; font-family: var(--font-mono); letter-spacing: -0.005em; }
.crm-mock .ev .since { font-family: var(--font-mono); font-size: 10.5px; color: rgb(var(--color-on-surface-dim)); text-align: right; }
.crm-mock .ev .stage { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-mono); }
.crm-mock .ev .stage.hot { background: rgba(239,68,68,0.16); color: #fca5a5; }
.crm-mock .ev .stage.warm { background: rgba(245,158,11,0.16); color: #fcd34d; }
.crm-mock .ev .stage.sold { background: rgba(94,234,212,0.15); color: #5eead4; }
.crm-mock .alert {
  margin: 8px 18px 18px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgb(var(--color-warning) / 0.10);
  border: 1px solid rgb(var(--color-warning) / 0.3);
  display: grid; grid-template-columns: 14px 1fr auto; gap: 12px; align-items: center;
  font-size: 12.5px;
}
.crm-mock .alert .ic-warn { color: rgb(var(--color-warning)); font-weight: 700; font-size: 14px; line-height: 1; }
.crm-mock .alert strong { color: rgb(var(--color-on-surface)); }
.crm-mock .alert .sub { font-size: 11px; color: rgb(var(--color-on-surface-variant)); margin-top: 2px; font-family: var(--font-mono); letter-spacing: -0.005em; }
.crm-mock .alert .btn-mini { background: rgb(var(--color-warning) / 0.22); color: rgb(var(--color-warning)); border: 1px solid rgb(var(--color-warning) / 0.4); padding: 5px 12px; border-radius: 6px; font-size: 11.5px; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap; }


/* ─── How it works — 3 steps ────────────────────────────── */
.how { border-top: 1px solid rgb(var(--color-outline) / 0.15); }
.how .head { max-width: 640px; margin-bottom: 48px; }
.how .head h2 { font-family: var(--font-display); font-size: clamp(26px, 2.7vw, 36px); font-weight: 600; letter-spacing: -0.005em; line-height: 1.2; margin: 8px 0 0; text-wrap: balance; }
.how .head p { font-size: 16px; line-height: 1.6; color: rgb(var(--color-on-surface-variant)); margin: 16px 0 0; max-width: 52ch; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step {
  border: 1px solid rgb(var(--color-outline) / 0.28);
  background: rgb(var(--color-surface-container) / 0.5);
  border-radius: 16px;
  padding: 24px 24px 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.step .n {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; color: rgb(var(--color-on-surface-dim));
}
.step .n .num { width: 26px; height: 26px; border-radius: 7px; background: rgb(var(--mrkt-mint) / 0.16); color: rgb(var(--mrkt-mint)); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.step h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin: 16px 0 8px; line-height: 1.2; }
.step p { font-size: 13.5px; line-height: 1.55; color: rgb(var(--color-on-surface-variant)); margin: 0; }
.step .vis {
  margin: 20px -24px 0; padding: 14px 20px 18px;
  border-top: 1px solid rgb(var(--color-outline) / 0.2);
  background: rgb(var(--color-background) / 0.5);
  font-family: var(--font-mono); font-size: 11px;
  color: rgb(var(--color-on-surface-variant));
  margin-top: auto;
}
.step .vis .ln { display: flex; align-items: center; gap: 8px; padding: 3px 0; white-space: nowrap; overflow: hidden; }
.step .vis .ln .tag { color: rgb(var(--mrkt-mint)); font-weight: 600; }
.step .vis .ln .tag.orange { color: #f59e0b; }
.step .vis .ln .r { margin-left: auto; color: rgb(var(--color-on-surface-dim)); font-size: 10px; }
.step .vis .ln .r.ok { color: rgb(var(--mrkt-mint)); }
.step .vis .bub { background: rgb(var(--color-surface-container-high)); border: 1px solid rgb(var(--color-outline) / 0.25); border-radius: 9px; border-bottom-left-radius: 3px; padding: 7px 10px; font-size: 11.5px; color: rgb(var(--color-on-surface)); }

/* ─── AI listing composer (feature story visual) ─────────── */
.composer {
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgb(var(--color-outline) / 0.3);
  background: rgb(var(--color-surface-container));
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.55);
}
.composer .ch {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: rgb(var(--color-surface-3));
  border-bottom: 1px solid rgb(var(--color-outline) / 0.2);
  font-family: var(--font-mono); font-size: 11px; color: rgb(var(--color-on-surface-variant));
}
.composer .ch .pip { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--mrkt-mint)); box-shadow: 0 0 6px rgb(var(--mrkt-mint) / 0.6); }
.composer .ch strong { color: rgb(var(--color-on-surface)); font-weight: 600; }
.composer .ch .right { margin-left: auto; color: rgb(var(--color-on-surface-dim)); }
.composer .facts { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 16px; border-bottom: 1px solid rgb(var(--color-outline) / 0.15); }
.composer .facts .lbl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--color-on-surface-dim)); width: 100%; margin-bottom: 2px; }
.composer .facts .chip { font-family: var(--font-mono); font-size: 11px; padding: 3px 9px; border-radius: 6px; background: rgb(var(--color-surface-container-high)); border: 1px solid rgb(var(--color-outline) / 0.3); color: rgb(var(--color-on-surface)); }
.composer .out { padding: 16px; }
.composer .out .lbl { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--mrkt-mint)); margin-bottom: 10px; }
.composer .out .txt { font-size: 13.5px; line-height: 1.6; color: rgb(var(--color-on-surface)); }
.composer .out .txt .cur { display: inline-block; width: 6px; height: 14px; background: rgb(var(--mrkt-mint)); vertical-align: -2px; margin-left: 2px; animation: cur-blink 1.1s steps(1) infinite; }
@keyframes cur-blink { 50% { opacity: 0; } }
.composer .tone { display: flex; align-items: center; gap: 6px; padding: 0 16px 14px; }
.composer .tone .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--color-on-surface-dim)); margin-right: 4px; }
.composer .tone .t { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgb(var(--color-outline) / 0.35); color: rgb(var(--color-on-surface-variant)); }
.composer .tone .t.act { background: rgb(var(--mrkt-mint) / 0.16); color: rgb(var(--mrkt-mint)); border-color: rgb(var(--mrkt-mint) / 0.35); font-weight: 600; }
.composer .cfoot { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid rgb(var(--color-outline) / 0.2); background: rgb(var(--color-background) / 0.5); font-family: var(--font-mono); font-size: 10.5px; color: rgb(var(--color-on-surface-variant)); }
.composer .cfoot .ok { color: rgb(var(--mrkt-mint)); }
.composer .cfoot .post { background: rgb(var(--color-brand-green)); color: #fff; border: none; font-family: inherit; font-size: 11.5px; font-weight: 600; padding: 6px 13px; border-radius: 7px; cursor: pointer; }

/* ─── Inventory sync log (feature story visual) ──────────── */
.synclog {
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgb(var(--color-outline) / 0.3);
  background: rgb(var(--color-surface-container));
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.55);
}
.synclog .sh {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: rgb(var(--color-surface-3));
  border-bottom: 1px solid rgb(var(--color-outline) / 0.2);
  font-family: var(--font-mono); font-size: 11px; color: rgb(var(--color-on-surface-variant));
}
.synclog .sh .pip { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--mrkt-mint)); box-shadow: 0 0 6px rgb(var(--mrkt-mint) / 0.6); }
.synclog .sh strong { color: rgb(var(--color-on-surface)); font-weight: 600; }
.synclog .sh .right { margin-left: auto; color: rgb(var(--color-on-surface-dim)); }
.synclog .body { padding: 6px 16px 10px; font-family: var(--font-mono); font-size: 12px; }
.synclog .row { display: grid; grid-template-columns: 70px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid rgb(var(--color-outline) / 0.1); }
.synclog .row:last-child { border-bottom: none; }
.synclog .row .t { color: rgb(var(--color-on-surface-dim)); font-size: 10.5px; }
.synclog .row .e { color: rgb(var(--color-on-surface)); letter-spacing: -0.01em; }
.synclog .row .e .tag { font-weight: 600; }
.synclog .row .e .tag.up { color: rgb(var(--mrkt-mint)); }
.synclog .row .e .tag.down { color: #f87171; }
.synclog .row .e .tag.new { color: #7dd3fc; }
.synclog .row .r { font-size: 10px; color: rgb(var(--color-on-surface-dim)); text-align: right; }
.synclog .row .r.ok { color: rgb(var(--mrkt-mint)); }
.synclog .sfoot { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-top: 1px solid rgb(var(--color-outline) / 0.2); background: rgb(var(--color-background) / 0.5); font-family: var(--font-mono); font-size: 10.5px; color: rgb(var(--color-on-surface-variant)); }
.synclog .sfoot .dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--mrkt-mint)); box-shadow: 0 0 6px rgb(var(--mrkt-mint) / 0.6); }
.synclog .sfoot strong { color: rgb(var(--color-on-surface)); font-weight: 700; }

/* ─── Quote ─────────────────────────────────────────────── */
.quote {
  background: rgb(var(--color-background));
  padding: 96px 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgb(var(--color-outline) / 0.15);
}
.quote::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgb(var(--color-outline) / 0.12) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 60% 50% at 85% 50%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 85% 50%, black, transparent 75%);
  opacity: 0.5;
}
.quote .shell { position: relative; z-index: 1; }
.quote .mk { display: inline-block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--mrkt-mint)); }
.quote blockquote {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.2;
  margin: 18px 0 36px;
  max-width: 22ch;
  text-wrap: pretty;
}
.quote blockquote .accent { color: inherit; }
.quote .cite { display: flex; align-items: center; gap: 14px; }
.quote .cite .ava { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, rgb(var(--mrkt-mint)), rgb(var(--teal-700))); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.quote .cite .who { font-size: 14px; font-weight: 600; }
.quote .cite .role { font-size: 12px; color: rgb(var(--color-on-surface-variant)); margin-top: 2px; font-family: var(--font-mono); letter-spacing: -0.005em; }

/* ─── Pricing ───────────────────────────────────────────── */
.pricing { padding: 112px 0; border-top: 1px solid rgb(var(--color-outline) / 0.15); }
.pricing .head { text-align: center; margin-bottom: 56px; }
.pricing h2 { font-family: var(--font-display); font-size: clamp(26px, 2.7vw, 36px); font-weight: 600; letter-spacing: -0.005em; margin: 8px 0 14px; line-height: 1.2; }
.pricing p.lead { font-size: 16px; color: rgb(var(--color-on-surface-variant)); max-width: 540px; margin: 0 auto; line-height: 1.55; }
.pricing .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 860px; margin: 0 auto; }
.tier {
  border-radius: 14px;
  padding: 32px 28px;
  border: 1px solid rgb(var(--color-outline) / 0.28);
  background: rgb(var(--color-surface-container) / 0.5);
  display: flex; flex-direction: column;
  position: relative;
}
.tier.feat { border-color: rgb(var(--mrkt-mint) / 0.45); background: rgb(var(--mrkt-mint) / 0.04); }
.tier.feat .badge {
  position: absolute; top: -10px; left: 24px;
  background: rgb(var(--mrkt-mint)); color: #07100c;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 5px;
}
.tier .ttl { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--color-on-surface-variant)); }
.tier .price { font-size: 52px; font-weight: 700; letter-spacing: -0.04em; margin: 12px 0 4px; line-height: 1; font-variant-numeric: tabular-nums; }
.tier .price .per { font-size: 14px; color: rgb(var(--color-on-surface-variant)); font-weight: 500; letter-spacing: 0; margin-left: 4px; font-family: var(--font-mono); }
/* The price slot when it holds words instead of a figure. 52px is sized for a short numeral;
   a phrase at that size shouts. Drops to display-copy scale, qualifier on its own line. */
.tier .price.ask { font-size: 27px; letter-spacing: -0.02em; line-height: 1.15; }
.tier .price.ask .per { display: block; margin-left: 0; margin-top: 6px; }
.tier .desc { font-size: 13px; color: rgb(var(--color-on-surface-variant)); margin-bottom: 24px; line-height: 1.55; }
.tier ul { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.tier ul li { font-size: 13px; color: rgb(var(--color-on-surface)); line-height: 1.5; padding-left: 22px; position: relative; }
.tier ul li::before { content: '+'; color: rgb(var(--mrkt-mint)); font-family: var(--font-mono); font-weight: 700; font-size: 13px; position: absolute; left: 0; top: 0; }
.tier .btn { width: 100%; }

/* ─── FAQ ───────────────────────────────────────────────── */
.faq { background: rgb(var(--color-surface-1)); border-top: 1px solid rgb(var(--color-outline) / 0.18); }
.faq h2 { font-family: var(--font-display); font-size: clamp(25px, 2.6vw, 33px); font-weight: 600; letter-spacing: -0.005em; text-align: center; margin: 12px 0 48px; line-height: 1.2; }
.faq .list { max-width: 760px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid rgb(var(--color-outline) / 0.2);
  padding: 18px 0;
}
.faq summary {
  list-style: none;
  font-size: 15.5px; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  cursor: pointer;
  letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--font-mono); font-size: 18px; font-weight: 400; color: rgb(var(--color-on-surface-variant)); flex-shrink: 0; transition: transform 200ms var(--ease-standard); }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.6; color: rgb(var(--color-on-surface-variant)); max-width: 64ch; }

/* ─── Compare — no demo wall ────────────────────────────── */
.compare { padding: 112px 0; border-top: 1px solid rgb(var(--color-outline) / 0.15); }
.compare h2 { font-family: var(--font-display); font-size: clamp(26px, 2.7vw, 36px); font-weight: 600; letter-spacing: -0.005em; line-height: 1.2; margin: 8px 0 16px; max-width: 26ch; }
.compare h2 .accent { color: inherit; }
.compare p.lead { font-size: 16px; color: rgb(var(--color-on-surface-variant)); max-width: 600px; line-height: 1.55; margin: 0; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; }
.compare-grid .col {
  border-radius: 14px; padding: 24px;
  border: 1px solid rgb(var(--color-outline) / 0.28);
  background: rgb(var(--color-surface-container) / 0.5);
}
.compare-grid .col.ours { border-color: rgb(var(--mrkt-mint) / 0.45); background: rgb(var(--mrkt-mint) / 0.04); }
.compare-grid .col .tl {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgb(var(--color-on-surface-variant)); margin-bottom: 18px;
}
.compare-grid .col.ours .tl { color: rgb(var(--mrkt-mint)); }
.compare-grid .col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.compare-grid .col li { font-size: 14px; line-height: 1.5; color: rgb(var(--color-on-surface)); padding-left: 26px; position: relative; }
.compare-grid .col.usual li { color: rgb(var(--color-on-surface-variant)); }
.compare-grid .col.usual li::before { content: '\00d7'; position: absolute; left: 0; top: -1px; color: rgb(var(--color-on-surface-dim)); font-family: var(--font-mono); font-weight: 700; font-size: 15px; }
.compare-grid .col.ours li::before { content: '+'; position: absolute; left: 0; top: 0; color: rgb(var(--mrkt-mint)); font-family: var(--font-mono); font-weight: 700; font-size: 14px; }
.compare .ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 40px; }
@media (max-width: 1100px) { .compare-grid { grid-template-columns: 1fr; } }

/* ─── CTA band ──────────────────────────────────────────── */
.cta-band {
  padding: 112px 0 96px;
  background: rgb(var(--color-background));
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgb(var(--color-outline) / 0.15);
}
.cta-band::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 80%, rgb(var(--mrkt-mint) / 0.14), transparent 60%);
  pointer-events: none;
}
.cta-band .shell { position: relative; }
.cta-band h2 { font-family: var(--font-display); font-size: clamp(30px, 3.2vw, 42px); font-weight: 600; letter-spacing: -0.005em; line-height: 1.18; max-width: 22ch; margin: 0 auto 18px; }
.cta-band h2 .accent { color: inherit; }
.cta-band p { font-size: 16px; color: rgb(var(--color-on-surface-variant)); max-width: 480px; margin: 0 auto 32px; line-height: 1.55; }
.cta-band .ctas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ─── Site footer ───────────────────────────────────────── */
.footer { padding: 48px 0 28px; border-top: 1px solid rgb(var(--color-outline) / 0.18); background: rgb(var(--color-background)); }
.footer .top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px; margin-bottom: 36px; }
.footer .brand p { font-size: 12.5px; color: rgb(var(--color-on-surface-variant)); margin-top: 14px; max-width: 260px; line-height: 1.55; }
.footer .col h5 { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--color-on-surface-dim)); margin: 0 0 14px; }
.footer .col a { display: block; font-size: 13px; color: rgb(var(--color-on-surface)); text-decoration: none; padding: 3px 0; }
.footer .col a:hover { color: rgb(var(--mrkt-mint)); }
.footer .bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid rgb(var(--color-outline) / 0.15); font-family: var(--font-mono); font-size: 11px; color: rgb(var(--color-on-surface-dim)); letter-spacing: -0.005em; }
.footer .bottom .legal { display: flex; gap: 18px; }
.footer .bottom .legal a { color: rgb(var(--color-on-surface-variant)); text-decoration: none; }
.footer .bottom .legal a:hover { color: rgb(var(--mrkt-mint)); }

/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 1100px) {
  .inv-mock { grid-template-columns: 168px 1fr 260px; }
  .cap-grid { grid-template-columns: 1fr; }
  .cap.wide { grid-column: span 1; }
  .steps { grid-template-columns: 1fr; }
  .pricing .cards { grid-template-columns: 1fr; }
  .story .lo { grid-template-columns: 1fr; gap: 48px; }
  .story.reverse .lo { grid-template-areas: 'a' 'b'; }
  .hero .lo { grid-template-columns: 1fr; gap: 48px; }
  .hero .copy { max-width: none; }
  /* Stacked: show the whole framed screenshot (the peek/crop is a desktop-only device). */
  .hero-shot { height: auto; }
  .hero-shot img { height: auto; object-fit: contain; }
  .hero-shot::before { display: none; }
  .footer .top { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 720px) {
  .inv-mock { grid-template-columns: 1fr; min-height: auto; }
  .inv-mock .side, .inv-mock .detail { display: none; }
  .topnav .nav-links { display: none; }
  .shell { padding: 0 20px; }
  section { padding: 64px 0; }
  .hero { padding: 40px 0 32px; }
  .footer .top { grid-template-columns: 1fr; gap: 24px; }
  .live-strip { flex-wrap: wrap; }
  .activity .row { flex-direction: column; align-items: flex-start; gap: 16px; }
  /* Log-style mock rows: on narrow screens the fixed time/result columns crush the
     middle column and the event text wraps into a tall, ragged block. Stack instead:
     "time … result" on top, the event line full width below. */
  .cap .visual .log-row,
  .synclog .row {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'meta-l meta-r' 'evt evt';
    column-gap: 12px;
    row-gap: 2px;
    align-items: baseline;
  }
  .cap .visual .log-row .t, .synclog .row .t { grid-area: meta-l; }
  .cap .visual .log-row .r, .synclog .row .r { grid-area: meta-r; }
  .cap .visual .log-row .e, .synclog .row .e { grid-area: evt; }
}

/* ════════════════════════════════════════════════════════════════════════
   SUBPAGE HELPERS — /features, /pricing, legal pages
   Added so the subpages share the v2 console design system instead of the
   legacy styles.css. v2 tokens only; no styles.css dependency.
   ════════════════════════════════════════════════════════════════════════ */

/* Generic subpage section */
.section { padding: 96px 0; border-top: 1px solid rgb(var(--color-outline) / 0.15); }
.section > .shell > .eyebrow { margin-bottom: 14px; }
.section h2 { font-family: var(--font-display); font-size: clamp(26px, 2.7vw, 36px); font-weight: 600; letter-spacing: -0.005em; line-height: 1.2; margin: 6px 0 12px; }
.section .sub { font-size: 16px; color: rgb(var(--color-on-surface-variant)); margin: 0 0 8px; max-width: 62ch; line-height: 1.55; }
.section .lead { font-size: 16px; color: rgb(var(--color-on-surface-variant)); margin: 0; max-width: 600px; line-height: 1.55; }

/* Centered subpage hero (overrides the home .hero grid backdrop) */
.page-hero { padding: 72px 0 8px; text-align: center; border-bottom: none; }
.page-hero::before, .page-hero::after { display: none; }
.page-hero .eyebrow { justify-content: center; }
.page-hero h1 { font-family: var(--font-display); font-size: clamp(32px, 3.4vw, 44px); font-weight: 600; letter-spacing: -0.005em; line-height: 1.18; margin: 10px auto 18px; max-width: 22ch; }
.page-hero .lede { font-size: 17px; line-height: 1.55; color: rgb(var(--color-on-surface-variant)); max-width: 58ch; margin: 0 auto; }
.accent-text { color: inherit; }

/* "Coming soon" inline badge */
.tag-soon { display: inline-block; margin-left: 8px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #fbbf24; background: rgb(251 191 36 / 0.12); border: 1px solid rgb(251 191 36 / 0.32); border-radius: 999px; padding: 2px 7px; vertical-align: middle; }

/* Features — 6 compact "details that add up" cards (spotlight rows reuse .story) */
.feat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.feat-card { border-radius: 14px; border: 1px solid rgb(var(--color-outline) / 0.28); background: rgb(var(--color-surface-container) / 0.5); padding: 22px 22px 24px; transition: border-color 160ms var(--ease-standard), background-color 160ms var(--ease-standard); }
.feat-card:hover { border-color: rgb(var(--color-outline) / 0.5); background: rgb(var(--color-surface-container) / 0.85); }
.feat-card .ico { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; margin-bottom: 14px; color: rgb(var(--mrkt-mint)); background: rgb(var(--mrkt-mint) / 0.12); border: 1px solid rgb(var(--mrkt-mint) / 0.28); }
.feat-card .ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.feat-card h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 6px; }
.feat-card p { font-size: 13.5px; line-height: 1.55; color: rgb(var(--color-on-surface-variant)); margin: 0; }

/* Pricing — "both plans include everything" checklist */
.includes-block { max-width: 860px; margin: 28px auto 0; border-radius: 14px; border: 1px solid rgb(var(--color-outline) / 0.28); background: rgb(var(--color-surface-container) / 0.5); padding: 24px 26px; }
.includes-title { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--color-on-surface-variant)); margin: 0 0 16px; }
.includes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 28px; }
.includes li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: rgb(var(--color-on-surface)); line-height: 1.5; }
.includes li > span { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.includes svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: rgb(var(--mrkt-mint)); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Pricing tier — supplementary lines (v2 .tier base lives above) */
.tier .plan-cta, .tier .btn { width: 100%; }
.tier .plan-tax { font-size: 12px; color: rgb(var(--color-on-surface-dim)); margin: 0 0 18px; }
.tier .plan-fine { font-family: var(--font-mono); font-size: 10.5px; color: rgb(var(--color-on-surface-dim)); text-align: center; margin: 10px 0 0; }

/* Closing CTA band — supporting meta/fineprint under the button */
.cta-band .cta-meta, .cta-band .fineprint { font-family: var(--font-mono); font-size: 11.5px; color: rgb(var(--color-on-surface-dim)); margin: 16px auto 0; max-width: 54ch; }
.cta-band .cta-meta a, .cta-band .fineprint a { color: rgb(var(--color-on-surface-variant)); text-decoration: underline; text-underline-offset: 2px; }
.cta-band .cta-meta a:hover, .cta-band .fineprint a:hover { color: rgb(var(--mrkt-mint)); }

/* Legal pages (terms / privacy / beta) — scoped to main.legal so it can't hit .footer .bottom .legal */
main.legal { padding: 56px 0 24px; max-width: 760px; }
main.legal .back { display: inline-block; font-family: var(--font-mono); font-size: 12px; color: rgb(var(--color-on-surface-variant)); margin-bottom: 24px; text-decoration: none; }
main.legal .back:hover { color: rgb(var(--mrkt-mint)); }
.prose { max-width: 720px; }
.prose h1 { font-family: var(--font-display); font-size: clamp(26px, 2.8vw, 34px); font-weight: 600; letter-spacing: -0.005em; margin: 0 0 20px; line-height: 1.2; }
.prose h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 32px 0 8px; }
.prose h3 { font-size: 16px; font-weight: 600; margin: 24px 0 6px; }
.prose p, .prose li { color: rgb(var(--color-on-surface-variant)); font-size: 15px; line-height: 1.65; }
.prose strong { color: rgb(var(--color-on-surface)); }
.prose a { color: rgb(var(--mrkt-mint)); text-decoration: underline; text-underline-offset: 2px; }
.prose ul, .prose ol { padding-left: 20px; }
.prose li { margin: 5px 0; }
.prose blockquote { margin: 16px 0; padding: 10px 16px; border-left: 3px solid rgb(var(--color-outline) / 0.6); background: rgb(var(--color-surface-container) / 0.5); border-radius: 0 8px 8px 0; color: rgb(var(--color-on-surface-dim)); }
.prose hr { border: 0; border-top: 1px solid rgb(var(--color-outline) / 0.3); margin: 32px 0; }
.prose code { background: rgb(var(--color-surface-container-high)); border: 1px solid rgb(var(--color-outline) / 0.4); border-radius: 4px; padding: 1px 6px; font-size: 0.9em; font-family: var(--font-mono); }
.prose table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 14px; }
.prose th, .prose td { border: 1px solid rgb(var(--color-outline) / 0.4); padding: 8px 12px; text-align: left; }
.prose th { background: rgb(var(--color-surface-container) / 0.6); color: rgb(var(--color-on-surface)); }

/* ─── Find-your-dealership checker ──────────────────────── */
/* Tight vertical rhythm: the finder is short (often just the prompt line), so the section's
   default 96px top/bottom left a big void below it. */
.checker { padding-top: 36px; padding-bottom: 40px; }
.checker-shell { max-width: 640px; }
.checker-form { display: grid; gap: 16px; border-radius: 14px; border: 1px solid rgb(var(--color-outline) / 0.32); background: rgb(var(--color-surface-container) / 0.5); padding: 28px; }
.checker-form .fld { display: grid; gap: 6px; }
.checker-form label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; color: rgb(var(--color-on-surface-variant)); }
.checker-form label .opt { font-weight: 400; color: rgb(var(--color-on-surface-dim)); }
.checker-form input { width: 100%; height: 42px; padding: 0 12px; border-radius: 9px; border: 1px solid rgb(var(--color-outline) / 0.5); background: rgb(var(--color-background) / 0.6); color: rgb(var(--color-on-surface)); font-family: inherit; font-size: 14px; transition: border-color 160ms var(--ease-standard), box-shadow 160ms var(--ease-standard); }
.checker-form input::placeholder { color: rgb(var(--color-on-surface-dim)); }
.checker-form input:focus { outline: none; border-color: rgb(var(--mrkt-mint) / 0.8); box-shadow: 0 0 0 3px rgb(var(--mrkt-mint) / 0.16); }
.checker-form .btn.primary { width: 100%; margin-top: 4px; }
.checker-form .btn[disabled] { opacity: 0.6; cursor: progress; }
.checker-form .hint { margin: 0; font-size: 12px; color: rgb(var(--color-on-surface-dim)); text-align: center; line-height: 1.5; }

.checker-result { margin-top: 8px; }
.dc-card { border-radius: 14px; border: 1px solid rgb(var(--color-outline) / 0.32); background: rgb(var(--color-surface-container) / 0.5); padding: 28px; border-left-width: 3px; }
.dc-card[data-state="ok"] { border-left-color: rgb(var(--mrkt-mint)); }
.dc-card[data-state="pending"] { border-left-color: rgb(var(--color-warning)); }
.dc-card[data-state="error"] { border-left-color: rgb(var(--color-error)); }
.dc-card h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.018em; margin: 0 0 8px; }
.dc-card[data-state="ok"] h3 { color: rgb(var(--mrkt-mint)); }
.dc-card p { font-size: 14.5px; line-height: 1.6; color: rgb(var(--color-on-surface-variant)); margin: 0; }
.dc-card .dc-cta { margin-top: 18px; }
.dc-card .dc-cta .btn { width: 100%; }
.dc-card .dc-again { margin-top: 12px; padding: 0; }

/* ─── Name-first dealership finder (dealer-finder.js) — console motif ──────
   Default: just the prompt line shows. A name match swaps in the result panel;
   a miss reveals the inventory-URL block. The !important below is load-bearing:
   the [hidden] attribute must win over the grid/flex display rules here. */
.dealer-finder { display: block; }
.dealer-finder [hidden] { display: none !important; }

/* Console window — a header strip (dots + mono title) over a filled body, so the finder
   reads as a real panel (matches the site's mock-UI), not a thin floating outline. */
/* The finder used to be a fake app window: an outer bordered card with a mock
   titlebar wrapping an inner bordered console. Three nested rounded borders read
   as clutter (and the fake-window chrome is itself a generated-UI tell). It's now
   a single clean search field sitting on the page — no card, no titlebar. */
.df-window {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.df-titlebar { display: none; }
.df-body { padding: 0; }
.df-form { display: grid; gap: 12px; }

/* The prompt row: a teal `>` caret, the name input, and an inline Check button. */
.df-console {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid rgb(var(--color-outline) / 0.7);
  background: rgb(var(--color-background) / 0.45);
  border-radius: var(--radius-md);
  padding: 7px 7px 7px 15px;
  transition: border-color 160ms var(--ease-standard), box-shadow 160ms var(--ease-standard);
}
.df-console:focus-within { border-color: rgb(var(--mrkt-mint) / 0.85); box-shadow: 0 0 0 3px rgb(var(--mrkt-mint) / 0.16); }
.df-console .df-caret { font-family: var(--font-mono); font-weight: 700; font-size: 16px; color: rgb(var(--mrkt-mint)); line-height: 1; }
.df-console input {
  flex: 1 1 auto; min-width: 0; height: 44px; border: 0; background: transparent;
  color: rgb(var(--color-on-surface)); font-size: 15.5px; font-weight: 500; letter-spacing: -0.006em;
}
.df-console input:focus { outline: none; }
.df-console input::placeholder { color: rgb(var(--color-on-surface-dim)); font-weight: 400; }
.df-go { flex: 0 0 auto; height: 36px; padding: 0 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.df-go[disabled] { opacity: 0.6; cursor: progress; }

/* Status line under the prompt — site font, quiet. */
.df-status {
  margin: 0; padding-left: 3px;
  font-size: 13px; line-height: 1.5; color: rgb(var(--color-on-surface-dim));
}

/* Revealed inventory-URL block (on a miss) — inset, dashed, secondary. */
.df-urls {
  display: grid; gap: 13px; padding: 16px;
  border: 1px dashed rgb(var(--color-outline) / 0.8); border-radius: var(--radius-md);
  background: rgb(var(--color-surface-container) / 0.35);
}
.df-urls .df-field { display: grid; gap: 6px; }
.df-urls label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; color: rgb(var(--color-on-surface-dim));
}
.df-urls label .opt { font-weight: 400; text-transform: none; letter-spacing: 0; }
.df-urls input {
  width: 100%; height: 42px; padding: 0 12px; border-radius: 8px;
  border: 1px solid rgb(var(--color-outline) / 0.6); background: rgb(var(--color-background) / 0.6);
  color: rgb(var(--color-on-surface)); font-size: 14px;
  transition: border-color 160ms var(--ease-standard), box-shadow 160ms var(--ease-standard);
}
.df-urls input:focus { outline: none; border-color: rgb(var(--mrkt-mint) / 0.8); box-shadow: 0 0 0 3px rgb(var(--mrkt-mint) / 0.16); }
.df-urls input::placeholder { color: rgb(var(--color-on-surface-dim)); }
/* The block's own submit. The inline CHECK sits beside the NAME field, a whole form above these
   inputs -- once the block is open that button is out of the reader's field of view, so the URL
   block carries the submit and the inline one hides. */
.df-send { width: 100%; height: 46px; margin-top: 4px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.df-send[disabled] { opacity: 0.6; cursor: progress; }

/* Result — prints as a boot-log readout under the prompt (no card box). */
.df-out { display: grid; gap: 16px; padding: 6px 2px 2px 16px; }
.df-rows { display: grid; gap: 8px; }
.df-row { display: grid; grid-template-columns: 58px 1fr; gap: 16px; align-items: baseline; }
.df-k {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--color-on-surface-dim));
}
.df-v {
  font-size: 14.5px; letter-spacing: -0.006em;
  color: rgb(var(--color-on-surface)); line-height: 1.45;
}
.df-v.is-name { font-size: 15px; text-transform: uppercase; letter-spacing: 0.035em; font-weight: 700; }
.df-out[data-state="ok"] .df-v.is-status { color: rgb(var(--mrkt-mint)); }
.df-out[data-state="pending"] .df-v.is-status { color: rgb(var(--color-warning)); }
.df-out[data-state="error"] .df-v.is-status { color: rgb(var(--color-error)); }
.df-out .df-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
/* CTA reads as a terminal action — monospace, matches the CHECK button. */
.df-cta { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 12.5px; min-width: 190px; }
.df-out .df-again { padding: 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; }

/* Two-column bay: the console window + a supporting panel, so it fills the width and reads
   with context instead of floating alone. Stacks on narrow screens. */
.finder-bay { display: grid; grid-template-columns: 1.55fr 1fr; gap: 24px; align-items: start; max-width: 920px; margin: 0 auto; }
.finder-aside { display: grid; gap: 22px; align-content: start; padding-top: 8px; }
.fa-block { display: grid; gap: 10px; }
.fa-k { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--color-on-surface-dim)); }
.fa-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fa-list li { position: relative; padding-left: 17px; font-size: 15px; line-height: 1.5; color: rgb(var(--color-on-surface-variant)); }
.fa-list li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--mrkt-mint) / 0.85); }
.fa-list.plain li::before { background: rgb(var(--color-outline)); top: 9px; width: 8px; height: 1px; border-radius: 0; }
/* Numbered "how it works" steps — mono 01/02/03 markers (no platform names revealed).
   NB: class is fa-steps, not steps — the bare .steps is the 3-col how-it-works grid (line ~707). */
.fa-list.fa-steps { counter-reset: fastep; }
.fa-list.fa-steps li { padding-left: 26px; }
.fa-list.fa-steps li::before {
  counter-increment: fastep; content: counter(fastep, decimal-leading-zero);
  left: 0; top: 1px; width: auto; height: auto; border-radius: 0; background: none;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.04em; color: rgb(var(--mrkt-mint));
}
.checker-head { max-width: 640px; margin: 0 auto 30px; text-align: center; }

/* Find-your-dealership: a solo, full-width console with a "supported platforms"
   dropdown beneath it (replaces the side panel so the console fills the width). */
.finder-solo { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.df-platforms { border: 1px solid rgb(var(--color-outline) / 0.6); border-radius: var(--radius-md); background: rgb(var(--color-surface-container) / 0.45); overflow: hidden; }
.df-platforms > summary { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 12px; padding: 15px 18px; }
.df-platforms > summary::-webkit-details-marker { display: none; }
.df-platforms .dfp-label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--color-on-surface-dim)); transition: color 160ms var(--ease-standard); }
.df-platforms .dfp-chev { margin-left: auto; color: rgb(var(--mrkt-mint)); font-size: 12px; line-height: 1; transition: transform 200ms var(--ease-standard); }
.df-platforms[open] .dfp-chev { transform: rotate(180deg); }
.df-platforms > summary:hover .dfp-label { color: rgb(var(--color-on-surface-variant)); }
.dfp-body { padding: 0 18px 18px; display: grid; gap: 14px; }
.dfp-list { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid rgb(var(--color-outline) / 0.3); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; }
.dfp-list li { position: relative; padding-left: 17px; font-size: 13.5px; line-height: 1.45; color: rgb(var(--color-on-surface-variant)); }
.dfp-list li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--mrkt-mint) / 0.85); }
.dfp-list li.dfp-more { color: rgb(var(--color-on-surface-dim)); }
.dfp-list li.dfp-more::before { background: rgb(var(--color-outline)); }
.dfp-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: rgb(var(--color-on-surface-dim)); }

/* Mobile overflow guard. The finder is a grid/flex stack; grid/flex items default to
   min-width:auto and keep their intrinsic content width, which pushed the console mock
   past the column and the whole page wider than the phone. Let the chain shrink. */
.finder-bay, .finder-solo, .finder-bay > *, .finder-solo > *,
.dealer-finder, .df-window, .df-body, .df-form, .df-console { min-width: 0; }

@media (max-width: 760px) {
  .finder-bay { grid-template-columns: 1fr; gap: 20px; }
  .finder-aside { padding-top: 0; }
}

@media (max-width: 860px) {
  .feat-cards { grid-template-columns: repeat(2, 1fr); }
  .includes { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .feat-cards { grid-template-columns: 1fr; }
  .checker-form, .dc-card { padding: 20px; }
}

/* ════════════════════════════════════════════════════════════════════════
   AUTO LIGHT MODE — honors the visitor's OS/browser appearance setting.
   Dark (above) stays canonical; this block only engages when the device
   asks for light. Designed, not inverted: the single light "mint" token
   becomes a deep teal so accents stay legible on white, mint-fill buttons
   flip to light text, heavy black shadows soften, and the bright status
   chips drop to darker, higher-contrast variants. No JS, no toggle.
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    /* Brand teal, re-tuned for contrast on white. The mint that read as a
       light accent on dark must become a deep teal here to stay legible as
       text/borders; button-fill rules that paired mint with near-black text
       are flipped to light text further down. */
    --teal-200:                11  92  70;   /* primary button hover fill */
    --teal-700:                 8  70  60;   /* avatar gradient anchor     */
    --teal-dark-primary:       15 118  90;
    --teal-dark-primary-hover: 12 100  76;
    --mrkt-mint:               13 122  92;   /* deep teal accent (#0D7A5C) */

    /* Surfaces: off-white page, white cards lifted above it, slightly
       cooler strips for chrome — mirrors the dark "raised card" hierarchy. */
    --surface-0: 249 250 251;
    --surface-1: 244 246 248;
    --surface-2: 255 255 255;
    --surface-3: 240 243 246;
    --surface-4: 233 237 241;

    --color-on-surface:          22  27  34;  /* near-black slate */
    --color-on-surface-variant:  82  91 102;
    --color-on-surface-dim:     91 99 109;  /* was 120 130 140 - failed AA (3.74:1) */

    --color-primary:        var(--teal-dark-primary);
    --color-primary-hover:  var(--teal-dark-primary-hover);
    --color-on-primary:     240 253 248;      /* light text on teal fills */

    /* Mid-gray outlines so the many low-alpha hairlines stay visible on white. */
    --color-outline:         100 112 126;
    --color-outline-variant: 124 136 150;

    --color-brand-green: 15 118 90;
    --color-error:      220  38  38;
    --color-warning:    180  83   9;

    --shadow-overlay: 0 30px 80px -16px rgb(15 23 42 / 0.18), 0 6px 16px -4px rgb(15 23 42 / 0.10);
  }

  /* Nav hover overlay: was a white film for dark; use a black film on light. */
  .topnav .nav-links a:hover { background: rgb(0 0 0 / 0.04); }

  /* Mint-fill controls paired near-black text for the dark theme; on the deep
     teal fill of light mode that text vanishes, so switch it to light. */
  .btn.primary,
  .inv-mock .detail .ai .row .b,
  .chat .draft .ft .btn-mini,
  .tier.feat .badge { color: rgb(var(--color-on-primary)); }

  /* Soften the heavy near-black drop shadows tuned for a dark canvas. */
  .hero-mock { box-shadow: 0 40px 80px -24px rgb(15 23 42 / 0.18), 0 0 0 1px rgb(var(--mrkt-mint) / 0.06); }
  .chat,
  .crm-mock { box-shadow: 0 30px 60px -24px rgb(15 23 42 / 0.16); }

  /* Status chips were bright-on-dark (mint/amber/sky/red). Drop them to darker,
     higher-contrast variants so they read on the light surfaces. */
  .inv-mock .list .row .stat.live  { background: rgb(15 118 90 / 0.12);  color: #0f765a; }
  .inv-mock .list .row .stat.draft { background: rgb(180 83 9 / 0.12);   color: #b45309; }
  .inv-mock .list .row .stat.queue { background: rgb(3 105 161 / 0.10);  color: #0369a1; border-color: rgb(3 105 161 / 0.30); }

  .cap .visual .log-row .e .tag.amber  { color: #b45309; }
  .cap .visual .log-row .e .tag.orange { color: #c2410c; }
  .step .vis .ln .tag.orange { color: #c2410c; }
  .synclog .row .e .tag.down { color: #dc2626; }
  .synclog .row .e .tag.new { color: #0369a1; }
  .cap .ix .stat-dot.amber { background: #d97706; box-shadow: 0 0 6px rgb(217 119 6 / 0.5); }
  .cap .ix .stat-dot.sky   { background: #0ea5e9; box-shadow: 0 0 6px rgb(14 165 233 / 0.45); }
  .cap .alert-stack .alert .tag.warm { background: rgb(180 83 9 / 0.13);  color: #b45309; }
  .cap .alert-stack .alert .tag.hot  { background: rgb(220 38 38 / 0.12); color: #dc2626; }

  .chat .read .cell .v.amber { color: #b45309; }

  .crm-mock .ev .stage.hot  { background: rgb(220 38 38 / 0.12); color: #dc2626; }
  .crm-mock .ev .stage.warm { background: rgb(180 83 9 / 0.13);  color: #b45309; }
  .crm-mock .ev .stage.sold { background: rgb(15 118 90 / 0.12); color: #0f765a; }

  .tag-soon { color: #b45309; background: rgb(180 83 9 / 0.10); border-color: rgb(180 83 9 / 0.30); }

  /* The dark mini "photo" thumbnails read as black smudges on white. */
  .inv-mock .detail .mini-strip .tn { background: linear-gradient(135deg, #e7ecf1, #d7dee6); }

  /* Hero Marketplace mock — soften shadow + darken bright-on-dark accents. */
  .hero-flow { box-shadow: 0 40px 80px -24px rgb(15 23 42 / 0.18), 0 0 0 1px rgb(var(--mrkt-mint) / 0.06); }
  .hero-flow .hf-row .sd.draft { background: #b45309; }
}

/* ─── Download guide link + Install page ───────────────────────────────── */
/* "2-minute install guide" link that sits under the hero download buttons.
   Reads as a real, visible link (mint + underline) so first-timers actually spot it. */
.dl-guide { flex-basis: 100%; margin-top: 8px; font-size: 14.5px; font-weight: 500; letter-spacing: -0.005em; color: rgb(var(--mrkt-mint)); text-decoration: underline; text-underline-offset: 3px; }
.dl-guide:hover { color: rgb(var(--mrkt-mint)); text-decoration: underline; opacity: 0.82; }

.install-meta { margin-top: 16px; font-family: var(--font-mono); font-size: 11.5px; color: rgb(var(--color-on-surface-dim)); letter-spacing: -0.005em; }

/* Requirements card */
.install-req { padding-top: 40px; }
.req-card { max-width: 760px; margin: 0 auto; border-radius: 16px; border: 1px solid rgb(var(--color-outline) / 0.28); background: rgb(var(--color-surface-container) / 0.5); padding: 26px 28px; }
.req-k { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgb(var(--mrkt-mint)); margin-bottom: 14px; }
.req-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.req-list li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.55; color: rgb(var(--color-on-surface-variant)); }
.req-list li b { color: rgb(var(--color-on-surface)); font-weight: 600; }
.req-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: rgb(var(--mrkt-mint)); font-weight: 700; }

/* Per-OS step columns */
.install-steps { padding-top: 8px; }
.install-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.install-os { border-radius: 16px; border: 1px solid rgb(var(--color-outline) / 0.28); background: rgb(var(--color-surface-container) / 0.5); padding: 24px 26px 26px; }
.os-h { display: flex; align-items: center; gap: 11px; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 18px; }
.os-mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: rgb(var(--mrkt-mint)); background: rgb(var(--mrkt-mint) / 0.14); border: 1px solid rgb(var(--mrkt-mint) / 0.3); font-size: 15px; }
.os-mark.mac { position: relative; }
.os-mark.mac::before { content: ""; width: 13px; height: 13px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.4 12.6c0-2.3 1.9-3.4 2-3.5-1.1-1.6-2.8-1.8-3.4-1.8-1.4-.1-2.8.9-3.5.9-.7 0-1.8-.8-3-.8-1.5 0-2.9.9-3.7 2.3-1.6 2.7-.4 6.8 1.1 9 .7 1.1 1.6 2.3 2.7 2.3 1.1 0 1.5-.7 2.8-.7 1.3 0 1.6.7 2.8.7 1.2 0 1.9-1.1 2.6-2.2.8-1.2 1.2-2.4 1.2-2.5-.1 0-2.3-.9-2.4-3.4ZM14.1 5.9c.6-.7 1-1.7.9-2.7-.9 0-2 .6-2.6 1.3-.5.6-1 1.6-.9 2.6 1 .1 2-.5 2.6-1.2Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.4 12.6c0-2.3 1.9-3.4 2-3.5-1.1-1.6-2.8-1.8-3.4-1.8-1.4-.1-2.8.9-3.5.9-.7 0-1.8-.8-3-.8-1.5 0-2.9.9-3.7 2.3-1.6 2.7-.4 6.8 1.1 9 .7 1.1 1.6 2.3 2.7 2.3 1.1 0 1.5-.7 2.8-.7 1.3 0 1.6.7 2.8.7 1.2 0 1.9-1.1 2.6-2.2.8-1.2 1.2-2.4 1.2-2.5-.1 0-2.3-.9-2.4-3.4ZM14.1 5.9c.6-.7 1-1.7.9-2.7-.9 0-2 .6-2.6 1.3-.5.6-1 1.6-.9 2.6 1 .1 2-.5 2.6-1.2Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.os-steps { margin: 0; padding-left: 20px; display: grid; gap: 11px; }
.os-steps li { font-size: 14px; line-height: 1.55; color: rgb(var(--color-on-surface-variant)); padding-left: 4px; }
.os-steps li b { color: rgb(var(--color-on-surface)); font-weight: 600; }
.os-steps code { font-family: var(--font-mono); font-size: 12px; background: rgb(var(--color-surface-container-high)); border: 1px solid rgb(var(--color-outline) / 0.25); border-radius: 5px; padding: 1px 5px; color: rgb(var(--color-on-surface)); }

/* ── Step visuals: on-brand mock-ups of the one-time OS prompts ─────────── */
.step-shot { margin: 22px 0 0; }
.step-shot figcaption { margin-top: 12px; text-align: center; font-size: 12.5px; color: rgb(var(--color-on-surface-dim)); }
.step-shot figcaption b { color: rgb(var(--color-on-surface)); font-weight: 600; }
.shot { border-radius: 12px; border: 1px solid rgb(var(--color-outline) / 0.35); background: rgb(var(--color-surface-container-high) / 0.8); box-shadow: 0 18px 40px -24px rgb(0 0 0 / 0.7); overflow: hidden; }

/* Windows SmartScreen "protected your PC" box */
.shot-win { padding: 18px 18px 16px; }
.sw-title { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: rgb(var(--color-on-surface)); margin-bottom: 9px; }
.sw-shield { flex: none; width: 16px; height: 16px; border-radius: 4px; background: rgb(var(--mrkt-mint) / 0.9); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3Z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.sw-text { font-size: 12.5px; line-height: 1.5; color: rgb(var(--color-on-surface-variant)); margin: 0 0 8px; }
.sw-app { font-size: 12px; color: rgb(var(--color-on-surface-dim)); margin: 0 0 4px; }
.sw-app b { color: rgb(var(--color-on-surface)); font-weight: 500; font-family: var(--font-mono); font-size: 11.5px; }
.sw-more { display: inline-block; font-size: 12.5px; color: rgb(var(--mrkt-mint)); text-decoration: underline; text-underline-offset: 2px; margin: 4px 0 14px; }
.sw-actions { display: flex; justify-content: flex-end; gap: 9px; }
.sw-btn { font-size: 12.5px; padding: 6px 14px; border-radius: 6px; border: 1px solid rgb(var(--color-outline) / 0.45); color: rgb(var(--color-on-surface-variant)); }
.sw-btn.primary { border-color: transparent; background: rgb(var(--mrkt-mint)); color: #06231b; font-weight: 600; box-shadow: 0 0 0 3px rgb(var(--mrkt-mint) / 0.18); }

/* ── Animated SmartScreen walkthrough: cursor clicks More info → Run anyway ── */
.shot-win.sw-anim { position: relative; }
/* Faux cursor pointer */
.sw-anim .sw-cursor {
  position: absolute; top: 0; left: 0; width: 17px; height: 17px; pointer-events: none; z-index: 4;
  background: #fff; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.55));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6 1.4L9.8 19 5 3Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6 1.4L9.8 19 5 3Z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: sw-cursor 7s cubic-bezier(.45,.05,.3,1) infinite;
}
/* App line + actions start hidden, revealed after the "More info" click */
.sw-anim .sw-app    { animation: sw-reveal 7s ease infinite; }
.sw-anim .sw-actions{ animation: sw-reveal 7s ease infinite; }
.sw-anim .sw-more   { animation: sw-more-press 7s ease infinite; }
.sw-anim .sw-btn.primary { animation: sw-run-press 7s ease infinite; }

@keyframes sw-cursor {
  0%   { transform: translate(195px, 145px); opacity: 0; }
  6%   { transform: translate(195px, 145px); opacity: 1; }
  20%  { transform: translate(34px, 96px); opacity: 1; }   /* arrive at More info */
  24%  { transform: translate(31px, 93px); opacity: 1; }   /* click dip */
  27%  { transform: translate(34px, 96px); opacity: 1; }
  46%  { transform: translate(56px, 132px); opacity: 1; }  /* arrive at Run anyway */
  50%  { transform: translate(53px, 129px); opacity: 1; }  /* click dip */
  53%  { transform: translate(56px, 132px); opacity: 1; }
  82%  { transform: translate(56px, 132px); opacity: 1; }
  96%  { transform: translate(195px, 145px); opacity: 0; }
  100% { transform: translate(195px, 145px); opacity: 0; }
}
/* Reveal app line + Run anyway only after More info is clicked (~24%) */
@keyframes sw-reveal {
  0%, 23%  { opacity: 0; transform: translateY(-5px); }
  31%, 90% { opacity: 1; transform: translateY(0); }
  98%,100% { opacity: 0; transform: translateY(-5px); }
}
/* More info link press */
@keyframes sw-more-press {
  0%, 21%  { color: rgb(var(--mrkt-mint)); transform: none; }
  24%      { color: rgb(var(--color-on-surface)); transform: scale(0.95); }
  27%, 100%{ color: rgb(var(--mrkt-mint)); transform: none; }
}
/* Run anyway button press + glow */
@keyframes sw-run-press {
  0%, 47%  { transform: none; box-shadow: 0 0 0 3px rgb(var(--mrkt-mint) / 0.18); }
  50%      { transform: scale(0.96); box-shadow: 0 0 0 7px rgb(var(--mrkt-mint) / 0.28); }
  56%      { transform: none; box-shadow: 0 0 0 3px rgb(var(--mrkt-mint) / 0.18); }
  90%, 100%{ transform: none; box-shadow: 0 0 0 3px rgb(var(--mrkt-mint) / 0.18); }
}
/* Respect users who prefer no motion — show the resolved state, no loop */
@media (prefers-reduced-motion: reduce) {
  .sw-anim .sw-cursor { display: none; }
  .sw-anim .sw-app, .sw-anim .sw-actions, .sw-anim .sw-more, .sw-anim .sw-btn.primary { animation: none; }
}

/* Mac System Settings → Privacy & Security "Open Anyway" row */
.shot-mac { padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mac-path { white-space: nowrap; font-weight: 600; color: rgb(var(--color-on-surface)); }
.mac-settings { width: 100%; border-radius: 8px; border: 1px solid rgb(var(--color-outline) / 0.4); background: rgb(var(--color-surface-container) / 0.96); padding: 12px 14px 14px; box-shadow: 0 14px 36px -18px rgb(0 0 0 / 0.8); }
.mac-set-h { font-size: 13px; font-weight: 700; color: rgb(var(--color-on-surface)); margin-bottom: 12px; }
.mac-set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mac-set-txt { font-size: 12.5px; line-height: 1.45; color: rgb(var(--color-on-surface-variant)); }
.mac-set-btn { flex: none; font-size: 12.5px; padding: 6px 14px; border-radius: 6px; border: 1px solid rgb(var(--color-outline) / 0.45); color: rgb(var(--color-on-surface-variant)); }
.mac-set-btn.hi { border-color: transparent; background: rgb(var(--mrkt-mint)); color: #06231b; font-weight: 600; box-shadow: 0 0 0 3px rgb(var(--mrkt-mint) / 0.18); }

/* ── Animated Gatekeeper walkthrough: cursor clicks Open Anyway → confirm dialog → Open Anyway ── */
.shot-mac.mac-anim { position: relative; min-height: 216px; justify-content: flex-start; }
/* macOS "cannot verify the developer" confirmation dialog — hidden until the first click */
.mac-anim .mac-confirm {
  position: absolute; left: 50%; bottom: 16px; z-index: 3;
  width: min(300px, 88%);
  border-radius: 12px;
  border: 1px solid rgb(var(--color-outline) / 0.5);
  background: rgb(var(--color-surface-container-high) / 0.98);
  box-shadow: 0 24px 54px -18px rgb(0 0 0 / 0.85);
  padding: 14px 14px 12px;
  text-align: center;
  opacity: 0;
  animation: mac-confirm-in 8s ease infinite;
}
.mac-confirm-txt { font-size: 12px; line-height: 1.45; color: rgb(var(--color-on-surface)); margin: 0 0 12px; }
.mac-confirm-actions { display: flex; justify-content: center; gap: 8px; }
.mac-cbtn { font-size: 12px; padding: 5px 12px; border-radius: 6px; border: 1px solid rgb(var(--color-outline) / 0.45); color: rgb(var(--color-on-surface-variant)); }
.mac-cbtn.hi { border-color: transparent; background: rgb(var(--mrkt-mint)); color: #06231b; font-weight: 600; box-shadow: 0 0 0 3px rgb(var(--mrkt-mint) / 0.18); }
/* Faux cursor pointer (same arrow as the Windows walkthrough) */
.mac-anim .mac-cursor {
  position: absolute; width: 17px; height: 17px; margin: -3px 0 0 -3px; pointer-events: none; z-index: 5;
  background: #fff; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.55));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6 1.4L9.8 19 5 3Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6 1.4L9.8 19 5 3Z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: mac-cursor 8s cubic-bezier(.45,.05,.3,1) infinite;
}
.mac-anim .mac-set-btn.hi { animation: mac-set-press 8s ease infinite; }
.mac-anim .mac-cbtn.hi { animation: mac-cbtn-press 8s ease infinite; }

/* Cursor: fade in → click the settings "Open Anyway" → drop to the dialog's "Open Anyway" → click */
@keyframes mac-cursor {
  0%   { left: 54%; top: 92%; opacity: 0; }
  6%   { left: 54%; top: 92%; opacity: 1; }
  20%  { left: 82%; top: 34%; opacity: 1; }   /* arrive at settings Open Anyway */
  24%  { left: 82.6%; top: 35.6%; opacity: 1; }/* click dip */
  27%  { left: 82%; top: 34%; opacity: 1; }
  46%  { left: 66%; top: 82%; opacity: 1; }   /* arrive at dialog Open Anyway */
  50%  { left: 66.6%; top: 83.6%; opacity: 1; }/* click dip */
  53%  { left: 66%; top: 82%; opacity: 1; }
  84%  { left: 66%; top: 82%; opacity: 1; }
  95%  { left: 54%; top: 92%; opacity: 0; }
  100% { left: 54%; top: 92%; opacity: 0; }
}
/* The confirm dialog appears only after the settings button is clicked (~26%) */
@keyframes mac-confirm-in {
  0%, 25%  { opacity: 0; transform: translate(-50%, 8px) scale(0.97); }
  30%, 88% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  96%,100% { opacity: 0; transform: translate(-50%, 8px) scale(0.97); }
}
/* Settings "Open Anyway" press */
@keyframes mac-set-press {
  0%, 21%  { transform: none; box-shadow: 0 0 0 3px rgb(var(--mrkt-mint) / 0.18); }
  24%      { transform: scale(0.96); box-shadow: 0 0 0 7px rgb(var(--mrkt-mint) / 0.28); }
  28%, 100%{ transform: none; box-shadow: 0 0 0 3px rgb(var(--mrkt-mint) / 0.18); }
}
/* Dialog "Open Anyway" press */
@keyframes mac-cbtn-press {
  0%, 47%  { transform: none; box-shadow: 0 0 0 3px rgb(var(--mrkt-mint) / 0.18); }
  50%      { transform: scale(0.96); box-shadow: 0 0 0 7px rgb(var(--mrkt-mint) / 0.28); }
  56%, 100%{ transform: none; box-shadow: 0 0 0 3px rgb(var(--mrkt-mint) / 0.18); }
}
/* Respect reduced-motion — show the settings row, hide the loop + dialog */
@media (prefers-reduced-motion: reduce) {
  .mac-anim .mac-cursor { display: none; }
  .mac-anim .mac-confirm { display: none; }
  .mac-anim .mac-set-btn.hi { animation: none; }
}

.install-note { max-width: 720px; margin: 28px auto 0; text-align: center; font-size: 13.5px; line-height: 1.6; color: rgb(var(--color-on-surface-dim)); }
.install-note a { color: rgb(var(--mrkt-mint)); }

/* After-install sign-in card */
.after-card { max-width: 720px; margin: 0 auto; text-align: center; border-radius: 18px; border: 1px solid rgb(var(--color-outline) / 0.28); background: rgb(var(--color-surface-container) / 0.5); padding: 36px 32px; }
.after-k { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgb(var(--mrkt-mint)); margin-bottom: 12px; }
.after-card h2 { font-family: var(--font-display); font-size: clamp(22px, 2.3vw, 29px); font-weight: 600; letter-spacing: -0.005em; margin: 0 0 12px; line-height: 1.2; }
.after-card p { font-size: 15px; line-height: 1.6; color: rgb(var(--color-on-surface-variant)); margin: 0 auto; max-width: 56ch; }
.after-card .ctas { justify-content: center; }

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

/* ═══════════════════════════════════════════════════════════════════════════
 * De-templating pass (2026-07-12)
 * ---------------------------------------------------------------------------
 * Dealers were reading the site as machine-generated, and therefore as a scam.
 * The tells were specific and mostly presentational: monospace uppercase
 * eyebrows with pulsing status dots, a brand-colour word dropped into the last
 * clause of every headline, glowing pips, and mock panels dressed up as
 * terminal output with invented timestamps. This section walks those back.
 * Headlines moved to --font-display (serif) above; the rest is here.
 * Token-based so it holds in both light and dark.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Hero fine print — was inline-styled monospace */
.hero-meta {
  margin-top: 18px;
  font-size: 14px;
  color: rgb(var(--color-on-surface-dim));
}
.hero-fine {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: rgb(var(--color-on-surface-variant));
}
.hero-fine a { color: rgb(var(--mrkt-mint)); }
.cta-band .hero-meta { color: rgb(var(--color-on-surface-dim)); }

/* Facts strip under the hero — plain sentences, no mono/caps logo-zoo */
.activity .logos { opacity: 1; gap: 24px; }
.activity .logos .lg,
.activity .logos .lg.mono,
.activity .logos .lg.caps {
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: rgb(var(--color-on-surface-dim));
}

/* Capability cards — label instead of a blinking console index */
.cap { padding: 24px; }
.cap .ix {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: rgb(var(--color-on-surface-dim));
  margin-bottom: 10px;
  gap: 8px;
}
.cap .ix .tag-soon {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgb(var(--color-warning) / 0.14);
  color: rgb(var(--color-warning));
}
.cap p { max-width: 52ch; }
.cap-facts {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgb(var(--color-outline) / 0.2);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cap-facts li {
  position: relative;
  padding-left: 16px;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgb(var(--color-on-surface-variant));
}
.cap-facts li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgb(var(--mrkt-mint) / 0.7);
}

/* Story bullet indices — plain numerals, not mint keycaps */
.story .copy .pts .pt .ix {
  background: none;
  color: rgb(var(--color-on-surface-dim));
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  justify-content: flex-start;
  width: auto;
}

/* How-it-works steps — no fabricated log strip, plain numbered cards */
.step { padding: 24px; }
.step .n { gap: 0; }
.step .n .num {
  background: none;
  color: rgb(var(--color-on-surface-dim));
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  width: auto; height: auto;
  border-radius: 0;
}
.step h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0;
  margin: 8px 0 8px;
  line-height: 1.28;
}

/* Composer + sync panels — real product chrome, not a hacker terminal.
   Sans-serif labels, no glowing pips, no blinking cursor, no shouty caps. */
.composer .ch,
.synclog .sh,
.composer .cfoot,
.synclog .sfoot,
.synclog .body,
.crm-mock .hd {
  font-family: inherit;
  font-size: 12px;
}
.composer .ch .pip,
.synclog .sh .pip,
.synclog .sfoot .dot { display: none; }
.composer .facts .lbl,
.composer .out .lbl,
.composer .tone .k {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: rgb(var(--color-on-surface-dim));
}
.composer .out .lbl { margin-bottom: 8px; }
.composer .facts .chip { font-family: inherit; font-size: 11.5px; }
.composer .out .txt .cur { display: none; }
.composer .cfoot { font-size: 12px; }

.synclog .row { grid-template-columns: 1fr auto; }
.synclog .row .e { font-size: 13px; letter-spacing: 0; }
.synclog .row .r { font-size: 11.5px; }
.synclog .sfoot { font-size: 12px; }

/* Trust panel — emoji avatars removed from the markup */
.crm-mock .ev { grid-template-columns: 1fr auto; }
.crm-mock .ev .sub { font-family: inherit; font-size: 12px; letter-spacing: 0; }
.crm-mock .ev .stage {
  font-family: inherit;
  font-size: 10.5px;
  letter-spacing: 0;
  text-transform: none;
}

/* De-templating pass, part 2 — the remaining console chrome.
   Monospace was being used as decoration on ordinary marketing labels
   (section kickers, footer, comparison headers, the dealership finder).
   Reserve it for nothing here; plain sans reads as a company, not a demo. */

.compare-grid .col .tl {
  font-family: inherit;
  font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: rgb(var(--color-on-surface-dim));
}
.compare-grid .col.ours .tl { color: rgb(var(--color-on-surface-dim)); }
.compare-grid .col.usual li::before,
.compare-grid .col.ours li::before { font-family: inherit; }

.footer .col h5 {
  font-family: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: rgb(var(--color-on-surface-dim));
}
.footer .bottom { font-family: inherit; font-size: 12px; letter-spacing: 0; }

.section-hd .meta { font-family: inherit; letter-spacing: 0; text-transform: none; font-size: 13px; }

/* Pricing + FAQ */
.tier .ttl { font-family: inherit; font-size: 13px; letter-spacing: 0; text-transform: none; }
.tier .price .per { font-family: inherit; }
.tier ul li::before { font-family: inherit; }
.tier .plan-fine { font-family: inherit; font-size: 12px; }
.faq summary::after { font-family: inherit; }

/* Dealership finder — was dressed as a terminal window, traffic lights and all */
.df-dots { display: none; }
.df-title { font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0; }
.df-console .df-caret { display: none; }
.df-go, .df-send { font-family: inherit; font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 600; }
.df-cta { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; }
.df-out .df-again { font-family: inherit; font-size: 13px; letter-spacing: 0; }
.df-platforms .dfp-label { font-family: inherit; font-size: 12px; letter-spacing: 0; text-transform: none; }
.fa-k { font-family: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: rgb(var(--color-on-surface-dim)); }
.fa-list.fa-steps li::before {
  content: counter(fastep) '.';
  font-family: inherit; font-size: 13px; font-weight: 600;
  letter-spacing: 0; color: rgb(var(--color-on-surface-dim));
}

.tag-soon, .cap .ix .tag-soon {
  font-family: inherit; font-size: 10.5px; font-weight: 600;
  text-transform: none; letter-spacing: 0;
}

.crm-mock .filter-row .chip { font-family: inherit; font-size: 11.5px; letter-spacing: 0; }
.chat .hd, .chat .draft .lbl, .chat .draft .ft { font-family: inherit; letter-spacing: 0; text-transform: none; }

.cta-band .cta-meta, .cta-band .fineprint { font-family: inherit; font-size: 12.5px; }

.includes-title { font-family: inherit; font-size: 14px; letter-spacing: 0; text-transform: none; }
.tier .badge { font-family: inherit; font-size: 11px; letter-spacing: 0; text-transform: none; }

/* ═══════════════════════════════════════════════════════════════════════════
 * Craft pass (2026-07-12) — research-led. See the notes below each block.
 *
 * Reference points that drove these numbers:
 *  - Stanford Web Credibility (Fogg 2003): "design look" is the single largest
 *    driver of credibility judgements (28.5% of coded responses). Craft here is
 *    not decoration, it is the trust argument.
 *  - NN/g on scroll animation: users cannot tell a decorative delay from system
 *    lag; never animate primary body text; skip reveals entirely on goal-focused
 *    B2B tools. We are one of those.
 *  - The catalogued "AI slop" tells: coloured glows, pulsing live-dots, blurred
 *    orbs/radial washes, uniform negative tracking, one accent used everywhere.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. No glows, no pulses, no radial washes ───────────────────────────────
   A coloured halo behind a chip or a pulsing "live" dot is the loudest visual
   tell on the list, and it means nothing. Neutralise every one of them. */
.eyebrow::before,
.live-strip .seg .dot,
.live-strip .bars-live,
.win-chrome .crumb .pip,
.cap .ix .stat-dot,
.chat .hd .dot,
.composer .ch .pip,
.synclog .sh .pip,
.synclog .sfoot .dot,
.hero-flow .hf-flow,
.hero-flow .hf-badge.live::after,
.composer .out .txt .cur { display: none !important; }

.hero::before, .hero::after,
.quote::before,
.cta-band::before, .cta-band::after { content: none !important; background: none !important; }

.hero-flow .hf-node.hub .hf-badge,
.cap .visual .blink { animation: none !important; }

/* ── 2. Type discipline ────────────────────────────────────────────────────
   The AI signature is UNIFORM negative tracking — tight on everything,
   including body. The professional rule is size- and case-dependent:
   tighten only at display sizes, leave body alone, always track OUT caps. */
body { letter-spacing: 0; }
p, li, .sub, .lead, .lede { letter-spacing: 0; }
[class*="caps"], .btn, th {
  letter-spacing: 0.04em;
}

/* Line-height ladder: scales inversely with size. A flat 1.5 everywhere is the
   amateur default. */
h1 { line-height: 1.14; }
h2 { line-height: 1.2; }
h3, h4 { line-height: 1.3; }
p, li { line-height: 1.6; }

/* Measure: 60-80 characters, target 66. Long lines are a readability failure
   and they read as "nobody set this". */
.story .copy p, .capabilities p.lead, .how .head p, .compare p.lead { max-width: 66ch; }
.hero p.sub { max-width: 54ch; }

/* Orphans and widows cost one line to fix and are invisible when done. */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Figures should not jitter. Tabular numerals on anything numeric. */
.price, .hero-meta, .tier .price, .synclog .sfoot, .cap-facts, .plan-tax,
.compare-grid li, .num, td { font-variant-numeric: tabular-nums; }

/* ── 3. Motion ─────────────────────────────────────────────────────────────
   Micro-interactions 100-150ms, entrances ease-out. Never animate layout
   properties. And per NN/g, no scroll-triggered reveals on an ops tool: they
   read as lag, and every section compounds the annoyance. */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 120ms;
}
.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

a, .btn { transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }

/* ── 4. Focus states ───────────────────────────────────────────────────────
   Absent entirely before this. A visible focus ring is both an accessibility
   requirement and a signal that somebody actually finished the job. */
:focus-visible {
  outline: 2px solid rgb(var(--mrkt-mint));
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── 5. Accent restraint (60/30/10) ────────────────────────────────────────
   The accent's persuasive power IS its scarcity. Reserve mint for CTAs, links
   and active state. It is already off the headlines; keep it off decoration. */
::selection { background: rgb(var(--mrkt-mint) / 0.25); }

/* Hero kicker — names the category in plain nouns above the headline.
   Deliberately NOT the old uppercase-mono-with-a-pulsing-dot eyebrow. */
/* Uppercase on purpose, and it is not decoration. Archivo is a grotesque: capital I and lowercase l
   are both plain vertical bars, so at 14px in sentence case "AI listing software" reads as "Al
   listing software" - a man's name, or a typo. AI is the thing this line exists to say, so it can't
   be the ambiguous part. All-caps removes the collision because the reader is already in caps, and
   the tracking keeps it from setting tight. */
.hero .copy .kicker {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgb(var(--color-on-surface-dim));
}

/* Objection FAQ on the home page. .faq already carries the summary/details
   styling from the pricing page; just give it a top rule and left-align the
   heading, since centred multi-line text is an amateur tell. */
.faq { border-top: 1px solid rgb(var(--color-outline) / 0.15); }
#faq-shortcut h2 { text-align: left; margin-bottom: 32px; }
#faq-shortcut .list { max-width: 760px; }
#faq-shortcut summary { font-weight: 600; }
#faq-shortcut p { max-width: 68ch; }

#faq-shortcut .list { margin-left: 0; margin-right: 0; }

/* Centred paragraphs over two lines are an amateur signature: the ragged left
   edge destroys the vertical anchor the eye reads down. Centre only short
   headline units. */
.checker-head { text-align: left; }
.checker-head h2 { text-align: left; }
.checker-head p.sub { margin-left: 0; max-width: 68ch; }

.checker-head { max-width: 68ch; margin: 0 0 30px; text-align: left; }

/* ── Mobile top nav ────────────────────────────────────────────────────────
   The header had no mobile rule at all: the links stayed in the flex row and
   pushed the two action buttons off the right edge, so "Download" — the only
   thing the page is asking anyone to do — was clipped in half on a phone. */
@media (max-width: 860px) {
  .topnav .nav-links { display: none; }
  .topnav .row { gap: 12px; }
  .topnav .actions { gap: 6px; margin-left: auto; }
  .topnav .actions .btn { height: 36px; padding: 0 12px; font-size: 13.5px; white-space: nowrap; }
}
@media (max-width: 420px) {
  /* "Web App" used to be dropped here, on the theory that the footer sign-in link covered it.
     It does not: a phone visitor got a header offering only Download, which points at a Windows
     or macOS installer they cannot run on the device in their hand, while the one thing they CAN
     use was buried at the bottom of the page under a different name. Both stay now. The room
     comes out of the wordmark and the button padding rather than out of the link itself. */
  .topnav .actions { gap: 5px; }
  .topnav .actions .btn { height: 34px; padding: 0 9px; font-size: 12.5px; }
  .wm-inline .word { font-size: 15.5px; }
  .wm-inline .mgr { display: none; }
}

/* .topnav .row set `padding: 12px 0`, whose shorthand zeroed the horizontal
   padding .shell provides. Above 1240px the max-width centring hid it; below,
   the header ran flush to both viewport edges. Set the block padding only and
   let .shell keep its gutter. */
.topnav .row { padding: 12px 0; padding-inline: 32px; }
@media (max-width: 860px) { .topnav .row { padding-inline: 20px; } }

/* 404. A real one, with the links people were actually going to. */
.notfound-links { list-style: none; padding: 0; margin: 28px auto 32px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.notfound-links a {
  display: inline-block; padding: 9px 15px;
  border: 1px solid rgb(var(--color-outline) / 0.5);
  border-radius: var(--radius-md);
  color: rgb(var(--color-on-surface)); text-decoration: none; font-size: 14px; font-weight: 500;
}
.notfound-links a:hover { border-color: rgb(var(--mrkt-mint) / 0.7); color: rgb(var(--mrkt-mint)); }

/* Setup steps — an editorial numbered list, not a third row of cards.
   Hairline rules and a hanging numeral: the rhythm of the page changes, which
   is the actual fix for the "assembled from components" look. */
.setup-steps {
  list-style: none;
  counter-reset: setup;
  margin: 40px 0 0;
  padding: 0;
  max-width: 780px;
}
.setup-steps li {
  counter-increment: setup;
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 4px 20px;
  padding: 24px 0;
  border-top: 1px solid rgb(var(--color-outline) / 0.28);
}
.setup-steps li:last-child { border-bottom: 1px solid rgb(var(--color-outline) / 0.28); }
.setup-steps li::before {
  content: counter(setup, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: rgb(var(--color-on-surface-dim));
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.setup-steps h3 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
  margin: 0 0 6px;
}
.setup-steps p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgb(var(--color-on-surface-variant));
  max-width: 62ch;
}
@media (max-width: 620px) {
  .setup-steps li { grid-template-columns: 40px 1fr; gap: 4px 14px; }
  .setup-steps li::before { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Spacing system (2026-07-12)
 *
 * Before this the page used 112 / 40 / 36 / 28 / 18 / 12 / 6 — no scale, just
 * whatever looked right at the time. Seven different values were doing the job
 * of "gap under a heading". That inconsistency is what makes a layout feel
 * assembled rather than designed, even when nobody can point at why.
 *
 * Two rules, both from the craft brief:
 *   1. 8pt grid with a 4pt half-step. Every value below is on it. No 13px.
 *   2. PROXIMITY HIERARCHY — the gap *within* a component must be visibly
 *      smaller than the gap *between* components, which must be smaller than
 *      the gap between sections. If a heading sits 16px from its body and the
 *      next component is also 16px away, the page has no structure. The ladder
 *      here is 8 → 16 → 24 → 48 → 96.
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  --section-y: var(--sp-8);   /* 64 — tightened from 96; the page was too long */
}

/* ── Section rhythm ────────────────────────────────────────────────────────
   One value, honoured everywhere, instead of 112 for most and 36 for the one
   that happened to be built later. */
section,
.capabilities,
.story,
.how,
.faq,
.checker { padding-top: var(--section-y); padding-bottom: var(--section-y); }

/* The hero carries the page, so it gets more room beneath than above. */
.hero { padding: var(--sp-7) 0 var(--sp-8); }

/* The facts strip is a rule, not a section: it should read as attached to the
   hero above it, not float as its own movement. */
.activity { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }

/* The closing CTA is the one place a little extra air is earned. */
.cta-band { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }

/* ── Heading blocks ────────────────────────────────────────────────────────
   Kicker → heading → lede is ONE unit: tight internally, then a clear break
   before the content it introduces. This is the proximity rule doing its job. */
.eyebrow, .kicker { margin-bottom: var(--sp-2); }

.capabilities h2,
.story .copy h2,
.how .head h2,
.compare h2,
.section h2,
#faq-shortcut h2 { margin-top: var(--sp-2); margin-bottom: var(--sp-4); }

.capabilities p.lead,
.how .head p,
.checker-head p.sub { margin-top: 0; margin-bottom: 0; }

/* …then the break before the content. Bigger than any gap inside the block. */
.cap-grid { margin-top: var(--sp-7); }
.setup-steps { margin-top: var(--sp-7); }
#faq-shortcut .list { margin-top: var(--sp-7); }
.how .head { margin-bottom: 0; }
.checker-head { margin-bottom: var(--sp-7); }

/* ── Within components ─────────────────────────────────────────────────────
   Tightest tier of the ladder. */
.cap { padding: var(--sp-5); }
.cap h3 { margin-bottom: var(--sp-2); }
.cap p { margin-bottom: 0; }
.cap-facts { margin-top: var(--sp-4); padding-top: var(--sp-4); }
.cap-grid { gap: var(--sp-4); }

.story .copy p { margin-bottom: var(--sp-4); }
.story .copy .pts { margin-top: var(--sp-6); gap: var(--sp-5); }
.story .copy .pts .pt h4 { margin-bottom: var(--sp-1); }

/* ── Mobile ────────────────────────────────────────────────────────────────
   96 is right on a 27" monitor and absurd on a phone. */
@media (max-width: 760px) {
  :root { --section-y: var(--sp-8); }   /* 64 */
  .hero { padding: var(--sp-6) 0 var(--sp-7); }
  .cta-band { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
  .cap-grid, .setup-steps, #faq-shortcut .list { margin-top: var(--sp-6); }
}

.cta-band h2 { margin-bottom: var(--sp-4); }
.cta-band p { margin-top: 0; margin-bottom: var(--sp-5); }

/* ── Capability cards: let them size to their content ──────────────────────
   .cap carried min-height:320 (and .wide 280) from when the copy was three
   times longer. After the dedupe the cards were being held open around dead
   space. Grid already equalises the row height, so the floor is unnecessary. */
.cap { min-height: 0; }

/* The full-width card spanned two columns but stacked its content in one, so
   the right half of it was empty. Lay it out across the width it occupies. */
.cap.wide {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--sp-7);
  align-content: start;
}
.cap.wide .ix { grid-column: 1 / -1; }
.cap.wide h3  { grid-column: 1; grid-row: 2; }
.cap.wide p   { grid-column: 1; grid-row: 3; }
.cap.wide .cap-facts {
  grid-column: 2;
  grid-row: 2 / span 2;
  align-self: start;
  margin-top: var(--sp-1);
  padding-top: 0;
  border-top: none;
}
@media (max-width: 1100px) {
  .cap.wide { grid-template-columns: 1fr; }
  .cap.wide h3, .cap.wide p, .cap.wide .cap-facts { grid-column: 1; grid-row: auto; }
  .cap.wide .cap-facts {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid rgb(var(--color-outline) / 0.2);
  }
}

/* The bullet list spans the heading and body rows, and since it is the taller
   of the two columns the browser was distributing its overflow BACK into those
   rows - which pushed the heading and its line apart. Give the grid a trailing
   flexible row and let the slack collect there instead. */
.cap.wide {
  grid-template-rows: auto auto auto 1fr;
  align-content: stretch;
}
.cap.wide h3 { align-self: start; }
.cap.wide p  { align-self: start; margin-top: 0; }
.cap.wide .cap-facts { grid-row: 2 / -1; }

/* The finder was centred (max-width + margin auto) while its heading block is
   flush left, so the widget sat ~130px inside the heading above it. Two
   different left edges in one section reads as a mistake, because it is one.
   Align it to the same axis and widen it to the column it now owns. */
.finder-bay {
  max-width: 1040px;
  margin: 0;
  gap: var(--sp-7);
  align-items: start;
}
.finder-aside { padding-top: 0; gap: var(--sp-5); }

/* ── Component-level spacing ───────────────────────────────────────────────
   The previous pass put SECTIONS on the scale but left the gaps inside them
   ad-hoc: the hero copy column ran 10 / 20 / 32 / 18 / 13, and in every story
   block the eyebrow sat 16px from its heading while the heading sat 16px from
   its body - so the label didn't group with the thing it labels. Same ladder,
   applied inside the components this time. */

/* Hero copy column: label hugs headline; headline group; then a clear break to
   the buttons; then the fine print reads as one quiet block, not three. */
.hero .copy .kicker { margin: 0 0 var(--sp-2); }
.hero .copy h1 { margin: 0 0 var(--sp-4); }
.hero .copy p.sub { margin: 0 0 var(--sp-6); }
.hero .copy .ctas { margin-bottom: var(--sp-5); }
.hero .copy .hero-meta { margin: 0 0 var(--sp-2); }
.hero .copy .hero-fine { margin: 0; }

/* Eyebrow must hug its heading (8), and the heading is then 16 from its body.
   Zero the heading's top margin so the two gaps don't compound into one. */
.eyebrow, .kicker { display: block; margin: 0 0 var(--sp-2); }
.story .copy h2,
.capabilities h2,
.how .head h2,
.section h2,
#faq-shortcut h2 { margin-top: 0; margin-bottom: var(--sp-4); }
.story .copy p { margin-top: 0; }

/* Card interiors on the same ladder. */
.cap .ix { margin: 0 0 var(--sp-2); }
.cap h3 { margin: 0 0 var(--sp-2); }

/* Steps: numeral/heading/body group tightly, rows breathe. */
.setup-steps h3 { margin: 0 0 var(--sp-1); }

/* Story sections: the two columns were vertically centred against each other,
   so the panel's top edge lined up with nothing in the copy - the section had
   no shared baseline and the leftover height fell out as an arbitrary void
   under whichever column was shorter. Top-align them: both columns now start
   on the same line, and the short one simply ends earlier, which is what an
   editorial two-column layout is supposed to do. Gap onto the scale (was 80). */
.story .lo {
  align-items: start;
  gap: var(--sp-8);
}

/* ── Dead space ────────────────────────────────────────────────────────────
   Measured on the built page: 1,770px of the 5,894px desktop page was padding.
   30%. Every section paid 96+96 regardless of how much was in it, so the thin
   ones (sync: 234px of content in a 427px section) were mostly air, and the
   narrow max-widths left the right third of the viewport empty.

   Vertical: 96 -> 72. Still generous, still on the 8pt grid, ~400px lighter.
   Horizontal: the lists get the width they were already sitting in. */

:root { --section-y: 72px; }
.cta-band { padding-top: var(--sp-9); padding-bottom: 72px; }
.hero { padding: var(--sp-8) 0 72px; }

@media (max-width: 760px) {
  :root { --section-y: var(--sp-7); }   /* 48 */
  .cta-band { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
}

/* The FAQ was a 760px column in a 1192px shell — half the width sat empty and
   the answers ran down forever. Two columns fills the space and halves the
   height. Details/summary keeps working; the columns just balance. */
@media (min-width: 900px) {
  #faq-shortcut .list {
    max-width: none;
    columns: 2;
    column-gap: var(--sp-8);
  }
  #faq-shortcut .list > details {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* The setup list was capped at 780. Let it use the column it lives in; the
   prose inside stays at a readable measure via its own max-width. */
.setup-steps { max-width: 1000px; }
.setup-steps li { grid-template-columns: 64px 1fr; }

/* The story panels were small relative to the column they sit in, which is
   where the rest of the horizontal void was. Let them fill it. */
.story .visual > * { width: 100%; }

/* In the reversed story the visual sits in grid column 1, which is the NARROW
   one (0.9fr) - so the panel was squeezed while the short copy got the wide
   column. Flip the ratio when reversed so the panel always gets the room. */
.story.reverse .lo { grid-template-columns: 1.1fr 0.9fr; }

/* CTA band was 501px tall around 308px of content. */
.cta-band { padding-top: 72px; padding-bottom: 72px; }

/* Mobile: the desktop rules for the wide card were appended AFTER the 1100px
   media query, so they were overriding it and the 4-row grid survived on a
   phone - leaving a 159px hole between the label and the heading. Restate the
   stacked layout at the end so it actually wins. */
@media (max-width: 1100px) {
  .cap.wide {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .cap.wide .ix,
  .cap.wide h3,
  .cap.wide p,
  .cap.wide .cap-facts { grid-column: 1; grid-row: auto; }
  .cap.wide .cap-facts {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid rgb(var(--color-outline) / 0.2);
  }
}

/* Contrast: white on mint failed AA (3.40:1 on the composer's Approve button,
   3.13:1 on the install page's action buttons). Mint is a light hue - it needs
   dark text on it, not white. */
.composer .cfoot .post,
.sw-btn.primary,
.mac-set-btn.hi {
  background: rgb(var(--mrkt-mint));
  color: #07100c;
  border-color: rgb(var(--mrkt-mint));
}

/* Tinted status chips were landing at ~4.2:1 in light mode. Deepen the ink. */
@media (prefers-color-scheme: light) {
  .tag-soon, .cap .ix .tag-soon { color: #8a4b06; background: rgb(180 83 9 / 0.12); border-color: rgb(180 83 9 / 0.35); }
  .crm-mock .ev .stage.warm { background: rgb(146 64 14 / 0.14); color: #7c3d0a; }
  .crm-mock .ev .stage.sold { background: rgb(13 100 78 / 0.14); color: #0b5c47; }
  .composer .tone .t.act { color: #0b5c47; border-color: rgb(13 100 78 / 0.4); background: rgb(13 100 78 / 0.12); }
  .crm-mock .filter-row .chip.act { color: #0b5c47; border-color: rgb(13 100 78 / 0.4); background: rgb(13 100 78 / 0.12); }
}

/* Install page overflowed the viewport on a phone (458px of content in a 375px
   screen), so the whole page could be dragged sideways. Grid/flex children
   default to min-width:auto and hold their intrinsic content width - and the
   long installer filename in a <code> tag has no break opportunities, so it set
   that intrinsic width. Let the chain shrink and let the filename wrap. */
.install-grid, .install-grid > *, .install-os, .os-steps, .os-steps li, .step-shot { min-width: 0; }
.install-os code, .os-steps code, .install-os kbd {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.step-shot img { max-width: 100%; height: auto; }

/* Mint is a LIGHT hue in dark mode (dark ink belongs on it) but the light theme
   remaps the token to a deep teal, where dark ink fails. Text colour has to
   follow the theme, not the class. */
@media (prefers-color-scheme: light) {
  .composer .cfoot .post,
  .sw-btn.primary,
  .mac-set-btn.hi { color: #f0fdf8; }

  .crm-mock .ev .stage.hot { background: rgb(153 27 27 / 0.12); color: #991b1b; }
}

/* Chips sitting on dark surfaces used the primary token (a mid teal) which only
   reached 4.20:1. Use the lighter mint so small text clears AA. */
.crm-mock .filter-row .chip.act {
  color: rgb(var(--mrkt-mint));
  border-color: rgb(var(--mrkt-mint) / 0.4);
  background: rgb(var(--mrkt-mint) / 0.14);
}

/* The real cause of the install page's mobile overflow: .mac-path is
   white-space:nowrap and holds "Apple menu > System Settings > Privacy &
   Security" - 356px of text that cannot break, in a 375px viewport. Nowrap is
   there to stop the menu path splitting mid-item, which is a good instinct on a
   desktop and unshippable on a phone. Allow it to wrap between items. */
.mac-path { white-space: normal; overflow-wrap: anywhere; }

/* Small mint-tinted marks/buttons that still missed AA. */
.os-mark { color: rgb(var(--color-on-surface)); }

/* Last three AA failures, all the same root cause: white-ish or dark-ish ink
   chosen against a mid-tone brand fill without checking the pair.

   .mac-cbtn.hi — a second confirm-button class alongside .mac-set-btn that I
   missed on the first pass; dark ink on the deep-teal fill was 3.13:1. */
@media (prefers-color-scheme: light) {
  .mac-cbtn.hi { color: #f0fdf8; }
  .crm-mock .filter-row .chip.act { color: #094536; }
}

/* The reply-mock's outgoing bubble put near-white on the mid-green primary
   (3.26:1). Deepen the fill rather than dim the text. */
.chat .bubble.me {
  background: rgb(var(--teal-700));
  color: #f0fdf8;
}

/* ═══════════════════════════════════════════════════════════════════════
   Horizontal layout pass: stop stacking what belongs side by side.

   The install page was two centred columns run one under the other: a
   ~760px hero stack (headline, lede, buttons, version meta), then a
   separate ~760px card holding three short requirements as a VERTICAL
   list. On a 1440px screen that is a ribbon of text down the middle with
   roughly 400px of nothing on either side, and it pushed the actual
   install steps below the fold.

   It is now one screen: the pitch and the requirements on the left, the
   download panel on the right. The "What you need" section is gone as a
   section, folded into the copy column where it reads as support for
   "you'll need a computer to run it".
   ═════════════════════════════════════════════════════════════════════ */

.install-hero { padding-bottom: var(--sp-7); text-align: left; }
.install-hero .eyebrow { justify-content: flex-start; }

.ih-lo {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--sp-8);
  align-items: start;
}

/* Un-centre the shared page-hero type: it is margin-auto'd by default. */
.install-hero h1 { margin: var(--sp-2) 0 var(--sp-4); max-width: 16ch; }
.install-hero .lede { margin: 0; max-width: 46ch; }

.install-hero .req-list { margin-top: var(--sp-6); gap: var(--sp-3); }

/* The download panel. Self-contained action card, top-aligned: it is
   shorter than the copy column and should not stretch to match it. */
.ih-dl {
  border: 1px solid rgb(var(--color-outline) / 0.32);
  border-radius: 16px;
  background: rgb(var(--color-surface-container) / 0.5);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  position: sticky;
  top: 88px;
}
.ih-dl-k {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(var(--mrkt-mint));
  margin-bottom: var(--sp-4);
}
/* Buttons go full-width and stack inside the panel: two side-by-side
   downloads in a 400px column would wrap raggedly anyway. */
.ih-dl .ctas {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-2);
  margin: 0;
}
.ih-dl .ctas .btn { width: 100%; justify-content: center; }
.ih-dl .install-meta { margin-top: var(--sp-4); line-height: 1.7; }
.ih-dl-foot {
  margin: var(--sp-4) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid rgb(var(--color-outline) / 0.28);
  font-size: 13px;
  color: rgb(var(--color-on-surface-dim));
}
.ih-dl-foot a { color: rgb(var(--mrkt-mint)); }

/* The closing card had the same shape problem at a smaller scale: a 720px
   centred stack of heading, paragraph, then two buttons on their own row.
   It is a band now, copy left and the action right, which is what the
   pricing page's enterprise row already does. */
.after-card {
  max-width: none;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5) var(--sp-7);
  padding: var(--sp-6) var(--sp-7);
}
.after-copy { min-width: 0; flex: 1 1 34ch; }
.after-card h2 { margin: 0 0 var(--sp-2); }
.after-card p { margin: 0; max-width: 62ch; }
.after-card .ctas { flex: none; justify-content: flex-start; margin: 0; }

@media (max-width: 900px) {
  .ih-lo { grid-template-columns: 1fr; gap: var(--sp-6); }
  .ih-dl { position: static; }
  .install-hero h1, .install-hero .lede { max-width: none; }
  .after-card { padding: var(--sp-6) var(--sp-5); }
}

/* The button icons (Windows/Apple marks) never had a size rule. They have a
   viewBox and no width/height, so their used size resolved against whatever
   space the parent happened to offer. In the old content-width row of CTAs
   that landed near 16px by luck; the moment a button was stretched to a full
   column the Apple mark resolved to 253px and covered the panel behind it.
   Pin them. */
.btn svg, .nav-cta svg { flex: none; width: 16px; height: 16px; }

/* The closing CTA was the same shape as the install page: a 477px-tall band
   whose content was a 480px ribbon of centred text, i.e. 39% of the shell in
   use and 224px of pure padding wrapped around two short lines. It repeats at
   the foot of every page, so it was the single most-repeated piece of dead
   space on the site.

   It is a bar now: the ask on the left, the button on the right, which is what
   a closing bar is for. Copy and actions are wrapped (.cta-copy / .cta-act)
   because the children differ per page (home has 4, features 5, pricing 4) and
   grid-area placement on flat siblings would break on each variation. */
/* Grid, not flex-wrap. With flex the two blocks measured 523px + 629px + 32px
   of gap = 1184px against a 1176px content box: over by 8px, so they wrapped
   onto separate lines and stacked, which is the exact layout being replaced.
   A 2-column grid cannot wrap. The copy column takes the slack, the action
   column sizes to its content and sits flush right. */
.cta-band .shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  gap: var(--sp-5) var(--sp-8);
  text-align: left;
}
.cta-copy { min-width: 0; }
.cta-act { min-width: 0; justify-self: end; }

/* Undo the centring the stacked version relied on. */
.cta-band h2 { margin: 0 0 var(--sp-2); max-width: 20ch; }
.cta-band p { margin: 0; max-width: 52ch; }
.cta-band .ctas { justify-content: flex-start; margin: 0; }
.cta-band .cta-meta,
.cta-band .fineprint,
.cta-band .hero-meta {
  margin: var(--sp-3) 0 0;
  max-width: 44ch;
}
.cta-band .fineprint { margin-top: var(--sp-2); }

/* Padding was sized for a tall centred composition it no longer is. */
.cta-band { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }

@media (max-width: 860px) {
  .cta-band .shell { grid-template-columns: 1fr; gap: var(--sp-5); }
  .cta-band h2, .cta-band p { max-width: none; }
  .cta-act { justify-self: stretch; }
}

/* ═══════════════════════════════════════════════════════════
   HERO SHOT — the real app, at a size where it can be read
   ═══════════════════════════════════════════════════════════
   The old hero image was a pre-cropped strip, so it happened to sit in the
   600px column at ~75% scale and stayed legible. The real inventory screen is
   a full 1700px-wide window; dropped into the same column it renders at 35%
   and the rows turn to grey mush, which reads as a stock dashboard placeholder
   — the exact "nobody really uses this" tell we are trying to kill.

   Scale is box width over crop width, so the only cure is a wider box. The
   shot now runs off the right edge of the viewport instead of stopping at the
   shell. A product shot that bleeds off the page also reads as a window onto
   something larger, which is true here: this is one screen of 744 cars. */
.hero { overflow: hidden; }
.hero .lo { grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr); gap: var(--sp-7); }
.hero-shot {
  height: 480px;
  /* Bleed to the viewport's right edge: half the overshoot of the shell's own
     max-width, plus its padding. Clamped at 0 so it never inverts on narrow
     screens where the shell is already full-bleed. */
  margin-right: calc(-1 * max(0px, (100vw - 1240px) / 2) - 32px);
  border-right: 0;
  border-radius: 16px 0 0 16px;
}
.hero-shot img { object-position: left top; }

@media (max-width: 1000px) {
  .hero .lo { grid-template-columns: 1fr; }
  .hero-shot { height: auto; margin-right: 0; border-right: 1px solid rgb(var(--color-outline) / 0.35); border-radius: 16px; }
}

/* The trailing-edge fade was tuned for an image that stopped inside the shell.
   Now that the shot runs off the viewport it no longer has an edge to hide, and
   at 58% it was fading out the price column — the single most persuasive thing
   in the frame. Push it to the last sliver and lighten it. */
.hero-shot::before {
  background:
    linear-gradient(90deg, transparent 86%, rgb(var(--color-background) / 0.55) 100%),
    linear-gradient(0deg, rgb(var(--color-background) / 0.75) 0%, transparent 22%);
}

/* The fade was painted in the page background colour, which works on the dark
   theme and fails on the light one: a white gradient over a dark screenshot is
   fog, not a dissolve. The app shot is dark in BOTH themes (it is a fixed
   image), so the fade has to be dark in both — a vignette that belongs to the
   picture rather than to the page. The right edge needs no fade at all now that
   it runs off the viewport. */
.hero-shot::before {
  background: linear-gradient(0deg, rgb(6 9 12 / 0.85) 0%, rgb(6 9 12 / 0) 24%);
}

/* ═══════════════════════════════════════════════════════════
   SHOT PANEL — a real screen where a drawing of one used to be
   ═══════════════════════════════════════════════════════════
   The story sections used to hold hand-built HTML mock-ups: a "listing
   composer" with an invented stock number and invented copy, and a sync log
   claiming "128 vehicles in step, 0 stale prices". Fabricated particularity is
   the loudest fiction tell there is — a dealer reads one invented stock number
   and the whole page becomes a story. These are now crops of the real app. */
.shot-panel {
  margin: 0;
  border: 1px solid rgb(var(--color-outline) / 0.35);
  border-radius: 14px;
  overflow: hidden;
  background: rgb(6 9 12);
  box-shadow: 0 30px 70px -22px rgb(0 0 0 / 0.55);
}
.shot-panel img { display: block; width: 100%; height: auto; }

/* ═══════════════════════════════════════════════════════════
   SECTION RHYTHM — make sections begin and end
   ═══════════════════════════════════════════════════════════
   Eight of the eleven sections on the home page shared the identical
   transparent background, separated only by a 0.8px hairline. You scrolled five
   thousand pixels and nothing ever started or stopped: one undifferentiated
   charcoal field, which is what "flat" and "generic" actually mean here. It
   isn't a colour problem — dark surface-1 sits 6/255 off the background, so
   even the sections that WERE tinted did not read as tinted.

   Alternating bands, marked in the markup rather than by :nth-child so the
   rhythm survives a section being added or moved. */
.band {
  background: rgb(var(--surface-1));
  border-top: 1px solid rgb(var(--color-outline) / 0.22);
  border-bottom: 1px solid rgb(var(--color-outline) / 0.22);
}
/* Two bands cannot end up flush; if they ever do, one hairline is enough. */
.band + .band { border-top: 0; }

/* Cards have to stay distinct FROM the band they sit on, or the band swallows
   them. On an untinted section a card lifts off the background; on a band it
   needs to lift off surface-1 instead. */
.band .cap,
.band .fa-block,
.band .dealer-finder { background: rgb(var(--color-background) / 0.55); }

@media (prefers-color-scheme: light) {
  /* On light the same 5/255 problem exists in reverse: the page is 249 250 251
     and surface-1 is 244 246 248. Read as one flat sheet. Push the band down. */
  .band { background: rgb(238 241 244); border-color: rgb(var(--color-outline) / 0.16); }
  .band .cap,
  .band .fa-block,
  .band .dealer-finder { background: rgb(255 255 255); }
}

/* The posting-queue strip is 6:1 -- the app is a wide window and any honest crop
   of it is wide. Dropped into a half-width story column it renders at 45% and the
   labels stop being labels. So this one story runs its copy over a full-width
   shot instead of beside a narrow one. */
.story.stack .lo { display: block; }
.story.stack .copy { max-width: 62ch; }
.story.stack .visual { margin-top: var(--sp-6); }

/* ── Blog index ────────────────────────────────────────────────────────────
   The article list sits inside .prose, which styles <li> as body copy with a
   disc marker. An index of articles is a stack of entries, not a bulleted
   list, so the marker and the tight li spacing both have to go. Kept here
   rather than in a <style> block so the blog inherits the same tokens as
   everything else. */
.prose .blog-list { list-style: none; padding-left: 0; margin: 28px 0 0; }
.prose .blog-item { margin: 0; padding: 20px 0; border-top: 1px solid rgb(var(--color-outline) / 0.3); }
.prose .blog-item:first-child { border-top: 0; padding-top: 0; }
.prose .blog-item h2 { margin: 0 0 4px; font-size: 18px; line-height: 1.35; }
.prose .blog-item h2 a { color: rgb(var(--color-on-surface)); text-decoration: none; }
.prose .blog-item h2 a:hover { color: rgb(var(--mrkt-mint)); text-decoration: underline; text-underline-offset: 2px; }
.prose .blog-date { margin: 0 0 8px; font-size: 13px; color: rgb(var(--color-on-surface-dim)); }
.prose .blog-item p:last-child { margin: 0; }

/* ── Explainer diagrams ────────────────────────────────────────────────────
   Built out of the app's own furniture rather than abstract dots: a real
   vehicle row, the real Draft / Live / Sold badges (amber, emerald, rose, the
   same three the app uses), the real "3 customers waiting" chip, a real queue
   with a daily count. Someone who reads this page should recognise what they
   are looking at the first time they open the app.

   Each plays once on scroll-in through the `.reveal` -> `.in` hook already in
   app.js, and each is aria-hidden: the heading and paragraph beside it carry
   the same meaning for anyone not looking at it.

   Hidden start states are scoped to `.js`, because with scripting off nothing
   ever adds `.in` and the content would be gone rather than merely still. */

.viz { margin-top: 24px; }
.js .viz [data-step] { opacity: 0; transform: translateY(6px); }
.js .viz.in [data-step] { animation: viz-in .5s cubic-bezier(.22,.7,.3,1) forwards; }
@keyframes viz-in { to { opacity: 1; transform: none; } }

/* A piece that takes its turn and then hands over to the next one. */
.js .viz [data-phase] { opacity: 0; }
.js .viz.in [data-phase] { animation: viz-phase both cubic-bezier(.22,.7,.3,1); }
@keyframes viz-phase {
  0% { opacity: 0; transform: translateY(-3px); }
  14%, 86% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(3px); }
}
/* The LAST state of a sequence has to end visible. `viz-phase` closes on opacity 0 so each state can
   hand over to the next, which means the closing badge, the new price and the match chip would all
   have faded out and left the row half-empty at rest. Finals get a keyframe that ends where it
   should stop: on screen. */
.js .viz.in [data-phase][data-final] { animation-name: viz-phase-final; }
@keyframes viz-phase-final {
  0% { opacity: 0; transform: translateY(-3px); }
  14%, 100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .viz [data-step] { opacity: 1; transform: none; animation: none !important; }
  .js .viz [data-phase] { animation: none !important; }
  .js .viz [data-phase]:not([data-final]) { display: none; }
  .js .viz [data-final] { opacity: 1; }
  .js .viz.in .vrow.dimming { animation: none !important; }
  .js .viz.in .qmeter i { animation: none !important; width: 30%; }
  .js .viz.in .vstep .pip { animation: none !important; background: rgb(var(--mrkt-mint)); }
}

/* — a vehicle row, drawn the way the app draws one — */
.vrow { display: flex; align-items: center; gap: 14px; border: 1px solid rgb(var(--color-outline) / 0.3); border-radius: 12px; background: rgb(var(--color-surface-container) / 0.5); padding: 13px 16px; }
.vrow .thumb { width: 54px; height: 40px; flex: none; border-radius: 6px; background: linear-gradient(145deg, rgb(var(--color-outline) / 0.3), rgb(var(--color-outline) / 0.12)); }
.vrow .who { min-width: 0; flex: 1; }
.vrow .who b { display: block; font-size: 14.5px; font-weight: 600; color: rgb(var(--color-on-surface)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vrow .who span { display: block; font-size: 12.5px; color: rgb(var(--color-on-surface-variant)); margin-top: 2px; }
.vrow .money { position: relative; min-width: 92px; height: 22px; }
.vrow .money span { position: absolute; inset: 0; text-align: right; font-size: 15px; font-variant-numeric: tabular-nums; color: rgb(var(--color-on-surface)); line-height: 22px; }
.vrow .money span.was { color: rgb(var(--color-on-surface-variant)); text-decoration: line-through; text-decoration-thickness: 1px; }
.vrow .badge-slot { position: relative; width: 80px; height: 24px; flex: none; }
.js .viz.in .vrow.dimming { animation: vrow-dim .9s 4.6s forwards; }
@keyframes vrow-dim { to { opacity: .45; } }

@media (max-width: 620px) {
  .vrow { gap: 10px; padding: 11px 12px; }
  .vrow .thumb { width: 40px; height: 30px; }
  .vrow .who b { font-size: 13px; }
  .vrow .who span { font-size: 11.5px; }
  .vrow .money { min-width: 76px; }
  .vrow .money span { font-size: 13.5px; }
  .vrow .badge-slot { width: 68px; }
}

/* the app's own Draft / Live / Sold chips, same three colours */
.sbadge { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; border: 1px solid; font-size: 12px; font-weight: 600; }
.sbadge i { width: 6px; height: 6px; border-radius: 50%; }
.sbadge.draft { border-color: rgb(245 195 90 / 0.45); background: rgb(245 195 90 / 0.12); color: rgb(238 190 100); }
.sbadge.draft i { background: rgb(245 195 90); }
.sbadge.live { border-color: rgb(var(--mrkt-mint) / 0.5); background: rgb(var(--mrkt-mint) / 0.12); color: rgb(var(--mrkt-mint)); }
.sbadge.live i { background: rgb(var(--mrkt-mint)); box-shadow: 0 0 8px rgb(var(--mrkt-mint) / 0.55); }
.sbadge.sold { border-color: rgb(232 130 120 / 0.45); background: rgb(232 130 120 / 0.12); color: rgb(232 140 130); }
.sbadge.sold i { background: rgb(232 130 120); }

/* a stepper under the row, the way the app shows the phases of a job */
.vsteps { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.vstep { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: rgb(var(--color-on-surface-variant)); }
.vstep .pip { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--color-outline) / 0.5); flex: none; }
.js .viz.in .vstep .pip { animation: pip-on .4s forwards; }
@keyframes pip-on { to { background: rgb(var(--mrkt-mint)); box-shadow: 0 0 7px rgb(var(--mrkt-mint) / 0.5); } }
.vstep + .vstep { padding-left: 8px; border-left: 1px solid rgb(var(--color-outline) / 0.25); }
@media (max-width: 620px) { .vstep + .vstep { padding-left: 0; border-left: 0; } .vsteps { gap: 6px 14px; } }

/* — watchlist — */
.wstack { display: flex; flex-direction: column; gap: 10px; }
.wcard { border: 1px solid rgb(var(--color-outline) / 0.3); border-radius: 12px; background: rgb(var(--color-surface-container) / 0.5); padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.wcard .who b { display: block; font-size: 14.5px; font-weight: 600; color: rgb(var(--color-on-surface)); }
.wcard .who span { display: block; font-size: 12.5px; color: rgb(var(--color-on-surface-variant)); margin-top: 2px; }
.wslot { position: relative; width: 150px; height: 26px; flex: none; }
.wchip { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; padding: 0 11px; font-size: 12.5px; font-weight: 600; border: 1px solid rgb(var(--mrkt-mint) / 0.45); background: rgb(var(--mrkt-mint) / 0.12); color: rgb(var(--mrkt-mint)); white-space: nowrap; }
.wchip.idle { border-color: rgb(var(--color-outline) / 0.35); background: none; color: rgb(var(--color-on-surface-variant)); font-weight: 500; }
@media (max-width: 620px) { .wslot { width: 128px; } .wcard { padding: 11px 12px; gap: 10px; } .wcard .who b { font-size: 13px; } }

/* — queue anywhere, one machine posts — */
.chain { display: flex; align-items: stretch; gap: 14px; flex-wrap: wrap; }
.chain .card { border: 1px solid rgb(var(--color-outline) / 0.3); border-radius: 12px; background: rgb(var(--color-surface-container) / 0.45); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.chain .card u { display: block; text-decoration: none; font-size: 11px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: rgb(var(--color-on-surface-variant) / 0.8); }
.chain .card.you { width: 210px; }
.chain .card.host { flex: 1; min-width: 250px; border-color: rgb(var(--mrkt-mint) / 0.5); background: rgb(var(--mrkt-mint) / 0.08); }
.chain .mini { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: rgb(var(--color-on-surface)); }
.chain .mini em { font-style: normal; color: rgb(var(--color-on-surface-variant)); }
.chain .qbtn { border-radius: 6px; border: 1px solid rgb(var(--color-outline) / 0.4); padding: 3px 9px; font-size: 11.5px; color: rgb(var(--color-on-surface-variant)); white-space: nowrap; }
.chain .qbtn.go { border-color: rgb(var(--mrkt-mint) / 0.5); background: rgb(var(--mrkt-mint) / 0.14); color: rgb(var(--mrkt-mint)); font-weight: 600; }
.chain .to { align-self: center; color: rgb(var(--color-on-surface-variant) / 0.7); font-size: 18px; }
@media (max-width: 760px) { .chain .to { display: none; } .chain .card.you, .chain .card.host { width: 100%; min-width: 0; } }

/* — the queue, paced — */
.queue { border: 1px solid rgb(var(--color-outline) / 0.3); border-radius: 12px; background: rgb(var(--color-surface-container) / 0.5); padding: 14px 16px; display: flex; flex-direction: column; gap: 11px; max-width: 620px; }
.qhead { display: flex; align-items: baseline; justify-content: space-between; font-size: 12.5px; color: rgb(var(--color-on-surface-variant)); }
.qhead b { color: rgb(var(--color-on-surface)); font-variant-numeric: tabular-nums; font-weight: 600; }
.qmeter { height: 6px; border-radius: 3px; background: rgb(var(--color-outline) / 0.3); overflow: hidden; }
.qmeter i { display: block; height: 100%; width: 0; border-radius: 3px; background: rgb(var(--mrkt-mint)); }
.js .viz.in .qmeter i { animation: qfill 1.6s 1.1s cubic-bezier(.3,0,.2,1) forwards; }
@keyframes qfill { to { width: 30%; } }
.qrow { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.qrow .t { width: 54px; flex: none; font-variant-numeric: tabular-nums; color: rgb(var(--color-on-surface-variant)); }
.qrow .n { flex: 1; min-width: 0; color: rgb(var(--color-on-surface)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qrow .gap { font-size: 11.5px; color: rgb(var(--color-on-surface-variant) / 0.85); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qnote { font-size: 12.5px; color: rgb(var(--color-on-surface-variant)); }

/* — same truck, two dealerships —
   These rules were dropped when the diagram block was rewritten, while the markup that needs them
   stayed. The result shipped: the two voice cards rendered as plain text with underlined labels,
   because <u> without a rule is just an underline. Restored, and kept next to the markup they
   serve so the pair is harder to separate again. */
.voice-same { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pill { display: inline-flex; align-items: center; border: 1px solid rgb(var(--color-outline) / 0.3); border-radius: 999px; padding: 4px 11px; font-size: 13px; color: rgb(var(--color-on-surface-variant)); white-space: nowrap; }
.want-arrow { color: rgb(var(--color-on-surface-variant) / 0.7); }
.voices { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .voices { grid-template-columns: 1fr; } }
.voice { border: 1px solid rgb(var(--color-outline) / 0.28); border-radius: 12px; background: rgb(var(--color-surface-container) / 0.45); padding: 16px 18px; }
.voice u { display: block; text-decoration: none; font-size: 11.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: rgb(var(--color-on-surface-variant) / 0.85); margin-bottom: 9px; }
.voice p { margin: 0; font-size: 15px; line-height: 1.55; color: rgb(var(--color-on-surface)); }
.voice.a { border-left: 2px solid rgb(var(--mrkt-mint)); }
.voice.b { border-left: 2px solid rgb(var(--color-on-surface-variant) / 0.55); }

/* The wide capability card is a two-column grid, so a diagram dropped in after the copy gets
   auto-placed into column two and leaves a hole under the heading. It belongs across the bottom. */
.cap.wide .viz { grid-column: 1 / -1; }

/* A diagram is a figure, not a paragraph: let it use the full band rather than inherit the 760px
   measure that exists to keep prose readable. */
.story.textonly .copy .viz { width: 100%; max-width: 1000px; }

/* Two by two, not four-across-and-clipped. Forcing one line looked tidier in the rule and then
   ran the fourth phase straight off the card, which has overflow hidden. A grid cannot spill. */
.vsteps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.vstep + .vstep { padding-left: 0; border-left: 0; }

/* — one truck, two voices —
   This was two text boxes sitting under a pill that said "Same truck". Nothing about it was a
   picture; it just set prose in a border and hoped. The idea is a FORK, so the section draws one:
   the vehicle once at the top, a split, and the same car described two ways underneath. The
   quotes are also half the length they were — the point lands on the difference between them,
   not on reading two full listings. */
.fork-viz { max-width: 720px; }
/* Wide enough for the full trim name: at 420px "Elevation" truncated to "Elevati...", which makes
   the one vehicle in the picture look like a rendering bug rather than a car. */
.vrow.solo { max-width: 480px; margin: 0 auto; }
.fork { position: relative; height: 32px; }
.fork::before { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 14px; background: rgb(var(--mrkt-mint) / 0.5); }
/* The arms land on the CARD centres, not on the quarter points. Two columns with a 14px gap put
   each card centre a quarter of that gap inside the quarter mark, so plain 25%/75% misses by about
   13px and the fork visibly does not meet what it forks into. */
.fork::after { content: ''; position: absolute; left: calc(25% - 3.5px); right: calc(25% - 3.5px); top: 14px; height: 1px; background: rgb(var(--mrkt-mint) / 0.5); }
.fork i { position: absolute; top: 14px; width: 1px; height: 18px; background: rgb(var(--mrkt-mint) / 0.5); }
.fork i:first-child { left: calc(25% - 3.5px); }
.fork i:last-child { left: calc(75% + 3.5px); }
@media (max-width: 760px) {
  /* Stacked, a fork has nothing to fork into. One stem is honest; two dangling arms are not. */
  .fork { height: 20px; }
  .fork::after, .fork i { display: none; }
  .fork::before { height: 20px; }
  .vrow.solo { max-width: none; }
}

/* ── Getting started walkthrough (/getting-started) ────────────────────────
   Six numbered steps, copy on one side and a figure on the other, alternating.
   The figures are built from the same furniture as the home-page explainers
   (.vrow, .sbadge, the mono stock number) rather than a second visual language,
   so a dealer who reads both pages sees one product, and what they see here is
   what the app actually looks like.

   Every figure is aria-hidden and every one of them plays once through the
   existing `.reveal` -> `.in` hook in app.js. Start states stay scoped to `.js`
   for the same reason the other diagrams do: with scripting off, nothing adds
   `.in`, and hidden-by-default would mean gone rather than merely still. */

.gs-steps > .shell > .head,
.gs-week > .shell > .head,
.gs-needs > .shell > .head { max-width: 660px; margin-bottom: var(--sp-7); }
.gs-steps > .shell > .head p,
.gs-week > .shell > .head p { font-size: 16px; line-height: 1.6; color: rgb(var(--color-on-surface-variant)); margin: 0; max-width: 66ch; }

/* Step one carries the download button, so the hero aside needs one line of
   context above it or the button is an orphan. */
.gs-dl-line { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: rgb(var(--color-on-surface-variant)); }

/* — a step — */
.gs-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: center;
  padding: var(--sp-7) 0;
  border-top: 1px solid rgb(var(--color-outline) / 0.18);
}
.gs-step:first-of-type { border-top: 0; padding-top: 0; }
/* Alternate the side the figure sits on. A column of six identical rows reads
   as a form to fill in; alternating reads as a sequence to follow. */
.gs-step:nth-of-type(even) .gs-copy { order: 2; }
.gs-step:nth-of-type(even) .gs-viz  { order: 1; }

.gs-n {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgb(var(--mrkt-mint) / 0.85);
  margin-bottom: var(--sp-3);
}
.gs-copy h3 {
  font-family: var(--font-display);
  font-size: clamp(21px, 2vw, 26px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: 0 0 var(--sp-3);
  color: rgb(var(--color-on-surface));
}
.gs-copy p { font-size: 15.5px; line-height: 1.62; color: rgb(var(--color-on-surface-variant)); margin: 0; max-width: 60ch; }
.gs-aside {
  margin-top: var(--sp-4) !important;
  padding-left: 13px;
  border-left: 2px solid rgb(var(--color-outline) / 0.45);
  font-size: 14px !important;
  color: rgb(var(--color-on-surface-dim)) !important;
}
.gs-copy, .gs-viz { min-width: 0; }
.gs-viz .viz { margin-top: 0; }

/* Shared small parts across the six figures. */
.gs-stock { font-family: var(--font-mono); font-size: 11.5px; font-variant-numeric: tabular-nums; color: rgb(var(--color-on-surface-dim)); flex: none; }
.gs-nm { min-width: 0; flex: 1; font-size: 13.5px; color: rgb(var(--color-on-surface)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-num { font-size: 13.5px; font-variant-numeric: tabular-nums; color: rgb(var(--color-on-surface)); flex: none; }
.gs-panel, .gs-read, .gs-join, .gs-queue, .gs-price, .gs-sold, .gs-write {
  border: 1px solid rgb(var(--color-outline) / 0.3);
  border-radius: 12px;
  background: rgb(var(--color-surface-container) / 0.5);
  padding: 14px 16px;
}
.gs-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 11px; border-top: 1px solid rgb(var(--color-outline) / 0.22); font-size: 12.5px; color: rgb(var(--color-on-surface-variant)); }
/* A drawn tick rather than a dot: this line is a result, not a status light. */
.gs-tick { width: 11px; height: 6px; flex: none; border-left: 1.5px solid rgb(var(--mrkt-mint)); border-bottom: 1.5px solid rgb(var(--mrkt-mint)); transform: rotate(-45deg) translateY(-1px); }

/* — 01 reading the inventory page — */
.gs-bar {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid rgb(var(--color-outline) / 0.4);
  border-radius: 8px;
  padding: 8px 11px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: rgb(var(--color-on-surface));
  background: rgb(var(--surface-0) / 0.55);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.gs-dim { color: rgb(var(--color-on-surface-dim)); }
.gs-lock { width: 9px; height: 8px; flex: none; border: 1.5px solid rgb(var(--color-on-surface-dim)); border-radius: 2px; position: relative; }
.gs-lock::before { content: ''; position: absolute; left: 1.5px; right: 1.5px; top: -4px; height: 4px; border: 1.5px solid rgb(var(--color-on-surface-dim)); border-bottom: 0; border-radius: 3px 3px 0 0; }
.gs-rows { margin-top: 12px; display: flex; flex-direction: column; }
.gs-r { display: flex; align-items: center; gap: 12px; padding: 8px 2px; }
.gs-r + .gs-r { border-top: 1px solid rgb(var(--color-outline) / 0.16); }

/* The ask is ONE LINK, so the figure has to look like handing something over
   rather than like something being taken. Bar plus a Send control, then the
   go-ahead, and only then the lot. */
.gs-send { display: flex; align-items: stretch; gap: 8px; }
.gs-send .gs-bar { flex: 1; min-width: 0; }
.gs-sendbtn { flex: none; display: flex; align-items: center; border-radius: 8px; padding: 0 18px; font-size: 13px; font-weight: 600; background: rgb(var(--mrkt-mint) / 0.16); border: 1px solid rgb(var(--mrkt-mint) / 0.5); color: rgb(var(--mrkt-mint)); }
.gs-appr { display: flex; align-items: center; gap: 8px; margin-top: 11px; font-size: 12.5px; font-weight: 600; color: rgb(var(--mrkt-mint)); }

/* — 02 the write-up — */
.gs-write .vrow { border: 0; background: none; padding: 0 0 12px; }
.gs-draft { border-top: 1px solid rgb(var(--color-outline) / 0.22); padding-top: 13px; }
.gs-line { margin: 0 0 7px; font-size: 14px; line-height: 1.55; color: rgb(var(--color-on-surface)); }
.gs-approve { display: flex; gap: 8px; margin-top: 13px; }
.gs-btn { border-radius: 7px; padding: 5px 13px; font-size: 12.5px; font-weight: 600; border: 1px solid rgb(var(--mrkt-mint) / 0.5); background: rgb(var(--mrkt-mint) / 0.14); color: rgb(var(--mrkt-mint)); }
.gs-btn.ghost { border-color: rgb(var(--color-outline) / 0.45); background: none; color: rgb(var(--color-on-surface-variant)); font-weight: 500; }

/* — 03 the join —
   The gesture is SIDEWAYS: a listing that already exists meets the vehicle
   record it belongs to. The connector is the whole point, so it is drawn, and
   the pair it cannot join is drawn differently rather than left out. */
.gs-join-h { display: grid; grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr); gap: 10px; margin-bottom: 10px; }
.gs-join-h span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: rgb(var(--color-on-surface-dim)); }
.gs-join-h span:last-child { grid-column: 3; }
.gs-pair { display: grid; grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 9px; }
.gs-pair:last-child { margin-bottom: 0; }
.gs-chip {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid rgb(var(--color-outline) / 0.35);
  border-radius: 8px; padding: 9px 11px;
  font-size: 13px; color: rgb(var(--color-on-surface-variant));
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gs-chip.solid { border-color: rgb(var(--mrkt-mint) / 0.45); background: rgb(var(--mrkt-mint) / 0.08); color: rgb(var(--color-on-surface)); }
.gs-chip.open { border-style: dashed; color: rgb(var(--color-on-surface-dim)); }
.gs-link { position: relative; height: 1px; background: rgb(var(--mrkt-mint) / 0.5); }
.gs-link i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: rgb(var(--mrkt-mint)); }
.gs-link.dashed { background: none; border-top: 1px dashed rgb(var(--color-outline) / 0.6); }
.gs-link.dashed i { background: rgb(var(--color-outline) / 0.9); }

/* — 04 the queue —
   Reads top to bottom as sent, sent, sending, waiting, waiting: the one thing
   this figure must not imply is a burst. */
.gs-q-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 12.5px; color: rgb(var(--color-on-surface-variant)); padding-bottom: 10px; border-bottom: 1px solid rgb(var(--color-outline) / 0.22); margin-bottom: 4px; }
.gs-q-head b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: rgb(var(--color-on-surface)); }
.gs-q-row { display: flex; align-items: center; gap: 12px; padding: 9px 2px; }
.gs-q-row + .gs-q-row { border-top: 1px solid rgb(var(--color-outline) / 0.14); }
.gs-q-row.waiting .gs-nm { color: rgb(var(--color-on-surface-variant)); }
.gs-q-tag { flex: none; border-radius: 999px; border: 1px solid rgb(var(--color-outline) / 0.35); padding: 3px 10px; font-size: 11.5px; color: rgb(var(--color-on-surface-dim)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gs-q-tag.sent { border-color: rgb(var(--mrkt-mint) / 0.4); color: rgb(var(--mrkt-mint)); }
.gs-q-tag.now { border-color: rgb(var(--mrkt-mint) / 0.6); background: rgb(var(--mrkt-mint) / 0.14); color: rgb(var(--mrkt-mint)); font-weight: 600; }

/* — 05 one price per unit —
   Three different numbers on purpose. Equal ones would read as a single edit
   propagating, which is exactly what does not happen on a lot of used units. */
.gs-p-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; }
.gs-p-row + .gs-p-row { border-top: 1px solid rgb(var(--color-outline) / 0.14); }
.gs-money { flex: none; display: flex; align-items: center; gap: 9px; font-variant-numeric: tabular-nums; }
.gs-money s { font-size: 12.5px; color: rgb(var(--color-on-surface-dim)); text-decoration-thickness: 1px; }
.gs-money b { font-size: 14.5px; font-weight: 600; color: rgb(var(--color-on-surface)); }

/* — 06 sold comes down — */
.gs-s-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 2px; }
.gs-s-row + .gs-s-row { border-top: 1px solid rgb(var(--color-outline) / 0.14); }
.gs-s-row .badge-slot { position: relative; flex: none; width: 74px; height: 24px; }
.gs-strike { position: absolute; left: 0; top: 50%; height: 1px; width: 0; background: rgb(232 130 120 / 0.6); }
.js .viz.in .gs-strike[data-step] { animation: gs-strike .55s cubic-bezier(.3,0,.2,1) forwards; }
@keyframes gs-strike { from { opacity: 1; width: 0; } to { opacity: 1; width: calc(100% - 84px); } }

/* — the first two weeks — */
.gs-timeline { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; max-width: 760px; }
.gs-timeline::before { content: ''; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px; background: rgb(var(--color-outline) / 0.4); }
.gs-timeline li { position: relative; padding-bottom: var(--sp-6); }
.gs-timeline li:last-child { padding-bottom: 0; }
.gs-timeline li::before { content: ''; position: absolute; left: -26px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--surface-0)); border: 1.5px solid rgb(var(--mrkt-mint) / 0.75); }
.gs-when { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--color-on-surface-dim)); margin-bottom: 5px; }
.gs-timeline b { display: block; font-size: 16px; font-weight: 600; color: rgb(var(--color-on-surface)); margin-bottom: 5px; }
.gs-timeline p { margin: 0; font-size: 15px; line-height: 1.6; color: rgb(var(--color-on-surface-variant)); max-width: 62ch; }

/* — what it needs from you — */
.gs-need-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.gs-need { border: 1px solid rgb(var(--color-outline) / 0.28); border-radius: 12px; background: rgb(var(--color-surface-container) / 0.4); padding: var(--sp-5); }
.gs-need h3 { font-size: 16px; font-weight: 600; margin: 0 0 var(--sp-2); color: rgb(var(--color-on-surface)); }
.gs-need p { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgb(var(--color-on-surface-variant)); }
.gs-needs .install-note { margin-top: var(--sp-5); }

@media (max-width: 900px) {
  .gs-need-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  /* Stacked, the figure belongs under the words that explain it — on every step,
     including the ones that alternate on a wide screen. */
  /* minmax(0, 1fr), not 1fr: a plain fr track floors at the widest child's
     min-content, and the mono URL bar in step one does not wrap, so the column
     grew past the viewport and put a horizontal scrollbar on the page. */
  .gs-step { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); padding: var(--sp-6) 0; }
  .gs-step:nth-of-type(even) .gs-copy { order: 0; }
  .gs-step:nth-of-type(even) .gs-viz  { order: 0; }
  /* A join has nothing to join across when the columns stack, so the connector
     turns vertical rather than dangling sideways off a full-width chip. */
  .gs-join-h { display: none; }
  .gs-pair { grid-template-columns: minmax(0, 1fr); gap: 0; margin-bottom: 14px; }
  .gs-link { height: 16px; width: 1px; margin: 0 auto; background: rgb(var(--mrkt-mint) / 0.5); }
  .gs-link.dashed { border-top: 0; border-left: 1px dashed rgb(var(--color-outline) / 0.6); }
}
@media (max-width: 620px) {
  .gs-r .gs-num { display: none; }
  .gs-q-row .gs-stock, .gs-p-row .gs-stock, .gs-s-row .gs-stock { display: none; }
  .gs-money s { font-size: 11.5px; }
  .gs-roll { min-width: 66px; }
  .gs-money { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  /* The strike is a state, not an effect: with motion off it should already be
     drawn rather than sitting at zero width forever. */
  .gs-strike { width: calc(100% - 84px); }
  .js .viz.in .gs-strike[data-step] { animation: none !important; }
}

/* ── Getting started: the two figures that have to MOVE ────────────────────
   Four of the six figures were the same shape — a panel of rows with a tick
   line under it — which made the walkthrough read as one diagram repeated six
   times. These two now draw their own verb: step 04 DRAINS, step 05 ROLLS. */

/* — 04, the drain: a stack goes quiet on the left while the right fills — */
.gs-q-cols { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); gap: 10px; align-items: start; }
.gs-q-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 9px; margin-bottom: 4px; border-bottom: 1px solid rgb(var(--color-outline) / 0.22); }
.gs-q-h span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: rgb(var(--color-on-surface-dim)); }
/* Fixed slot: the count swaps 12 → 11 → 10 → 9 through the same data-phase hand-off
   the money slot uses, and a slot that resizes per digit would jog the header. */
.gs-count { position: relative; display: inline-block; width: 24px; height: 19px; }
.gs-count span { position: absolute; inset: 0; text-align: right; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 19px; color: rgb(var(--color-on-surface)); }
.gs-q-row .gs-t { flex: none; font-family: var(--font-mono); font-size: 11.5px; font-variant-numeric: tabular-nums; color: rgb(var(--mrkt-mint)); }
.gs-q-row.more { color: rgb(var(--color-on-surface-dim)); font-size: 12.5px; }
/* A row that has gone out does not vanish — a hole where a row was reads as a bug.
   It goes quiet and stays in place, and its counterpart appears on the right, so
   the frame stays balanced and the eye can see WHERE the work went.
   No data-step on these: they start visible (they are already approved) and only
   the leaving is animated, which keeps one animation per element so the inline
   animation-delay means what it says. */
.gs-q-row.leaves { opacity: 1; }
.js .viz.in .gs-q-row.leaves { animation: gs-leave .5s cubic-bezier(.22,.7,.3,1) forwards; }
@keyframes gs-leave { from { opacity: 1; } to { opacity: 0.3; } }
.gs-q-arrow { align-self: center; position: relative; height: 1px; background: rgb(var(--color-outline) / 0.5); margin-top: 40px; }
.gs-q-arrow::after { content: ''; position: absolute; right: 0; top: -3px; border-left: 5px solid rgb(var(--color-outline) / 0.8); border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; }
.gs-q-col.out .gs-q-row { border-top: 0; }
.gs-q-col.out .gs-q-row + .gs-q-row { border-top: 1px solid rgb(var(--color-outline) / 0.14); }

/* — 05, the roll: the old number lifts out of the slot, the new one rises in — */
.gs-roll { position: relative; display: inline-block; min-width: 74px; height: 21px; }
.gs-roll b { position: absolute; inset: 0; text-align: right; line-height: 21px; font-size: 14.5px; font-weight: 600; color: rgb(var(--color-on-surface)); }
/* Only the NAME is overridden: duration, delay and fill still come from the base
   data-phase rule plus the inline style, so the two stay in step. */
.js .viz.in .gs-roll [data-phase] { animation-name: gs-roll-out; }
.js .viz.in .gs-roll [data-phase][data-final] { animation-name: gs-roll-in; }
@keyframes gs-roll-out {
  0% { opacity: 0; transform: translateY(9px); }
  16%, 68% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-11px); }
}
@keyframes gs-roll-in {
  0% { opacity: 0; transform: translateY(11px); }
  34%, 100% { opacity: 1; transform: none; }
}

/* — first-hour questions —
   .faq brings the shared summary/details styling; this only sets the measure and
   undoes the centring the pricing page applies to its own copy of the block. */
.gs-faq .head { margin-bottom: var(--sp-6); }
.gs-faq h2 { text-align: left; margin: 6px 0 12px; }
.gs-faq .list { max-width: 760px; margin-left: 0; margin-right: 0; }
.gs-faq summary { font-weight: 600; }
/* The site has no global anchor colour — every context declares its own — so a link
   dropped into one that never had a rule falls back to the browser's rgb(0,0,238).
   That was already happening on the live /pricing page, whose "What does it actually
   cost?" answer carries a link, so this is scoped to .faq rather than to this page. */
.faq details p a,
.gs-aside a { color: rgb(var(--mrkt-mint)); text-decoration: underline; text-underline-offset: 2px; }
.gs-faq p { max-width: 68ch; }

@media (max-width: 860px) {
  /* Stacked, the arrow points at nothing. The two columns keep their headings,
     which is what carries "these came out of that". */
  .gs-q-cols { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .gs-q-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* Both figures must still say the same thing standing still: the three that went
     out are quiet, and each price shows the number it landed on. */
  .js .viz.in .gs-q-row.leaves { animation: none !important; opacity: 0.3; }
}

/* ─── The film (home page) ─────────────────────────────────
   A 4:5 cut of the marketing film, framed as an object on the page rather than
   dropped in as a bare rectangle: the cut is near-white and the site is not, so
   without the frame it reads as a hole punched in the section. Same border,
   radius and drop shadow as the hero screenshot, so the two product visuals on
   the page look like they belong to one site.

   Capped at 400px. The film's own type is set for a phone held in a hand, so it
   stays legible small, and anything wider makes a 4:5 taller than the copy
   beside it. */
.story.film .lo { align-items: center; }
.film-frame {
  margin: 0;
  justify-self: center;
  width: 100%;
  max-width: 440px;
  position: relative;
  border-radius: 16px;
  border: 1px solid rgb(var(--color-outline) / 0.35);
  background-color: rgb(var(--color-surface-container));
  /* The opening still, per ground. Dark is the default because the site's is;
     the light one is swapped in by the same media query that themes the page,
     so there is no script in the path and no flash of the wrong ground. */
  background-image: url('/assets/approve-it-posts-poster-dark.webp');
  background-size: cover;
  background-position: center top;
  box-shadow: 0 40px 90px -24px rgb(0 0 0 / 0.65), 0 0 0 1px rgb(var(--mrkt-mint) / 0.04);
  overflow: hidden;
}
/* Transparent, so the still above shows through until there is a frame to paint.
   A `poster` attribute would have been one file for both grounds. */
.film-frame .film-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  background: transparent;
  cursor: pointer;
}
/* No caption element: the cut carries "ILLUSTRATED. SAMPLE LISTINGS." along its own
   foot, in every frame and in the poster, so an HTML one only covered it up. */
/* Play badge. Visible whenever the film is not running: before it scrolls in,
   after a click to pause, and for the whole visit under reduced motion. */
.film-play, .film-sound { display: none; }
.js .film-play { display: flex; }
.film-play {
  position: absolute; inset: 0; margin: auto;
  width: 62px; height: 62px;
  align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgb(var(--mrkt-mint));
  color: #07100c;
  cursor: pointer;
  box-shadow: 0 10px 30px -8px rgb(0 0 0 / 0.5);
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.film-play svg { width: 26px; height: 26px; margin-left: 3px; }
.film-play:hover { transform: scale(1.06); }
.js .film-frame.is-playing .film-play { opacity: 0; pointer-events: none; }
/* Sound is off by default because the page must never make noise on its own.
   The control says what pressing it does, not what the current state is. */
.js .film-frame.is-playing .film-sound { display: block; }
.film-sound {
  position: absolute; right: 10px; top: 10px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgb(232 238 243 / 0.14);
  background: rgb(13 18 25 / 0.82);
  color: rgb(232 238 243 / 0.78);
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer;
}
.film-sound:hover { background: rgb(13 18 25); color: rgb(232 238 243); }

/* The light ground. The film is rendered twice, so the page and the picture in it
   are never in different modes. Both the still and the sound pill flip here; the
   pill sits ON the film, so it follows the film's ground, not the page's. */
@media (prefers-color-scheme: light) {
  .film-frame { background-image: url('/assets/approve-it-posts-poster-light.webp'); }
  .film-sound {
    border-color: rgb(17 22 29 / 0.12);
    background: rgb(255 255 255 / 0.86);
    color: rgb(17 22 29 / 0.75);
  }
  .film-sound:hover { background: rgb(255 255 255); color: rgb(17 22 29); }
}

@media (max-width: 1100px) {
  /* Stacked, the film is the only thing in its row, so let it take the column
     the copy above it uses rather than sitting in a 400px well on the left. */
  .film-frame { max-width: 440px; justify-self: start; }
}