/* Crossdeck — landing design system */
:root {
  --ds-bg: #f7f3ec;
  --ds-bg-soft: #faf7f0;
  --ds-canvas: #fbfaf6;
  --ds-surface: #ffffff;
  --ds-surface-soft: #fafaf6;
  --ds-border: rgba(23, 19, 17, 0.09);
  --ds-border-strong: rgba(23, 19, 17, 0.16);
  --ds-divider: rgba(23, 19, 17, 0.06);
  --ds-text: #14110f;
  --ds-text-soft: #2a2421;
  --ds-muted: #6b6259;
  --ds-muted-soft: #948a7e;
  --ds-accent-red: #ff3431;
  --ds-accent: #ff6e45;
  --ds-accent-strong: #ee4f25;
  --ds-accent-warm: #ff8d4b;
  --ds-accent-soft: rgba(255, 110, 69, 0.1);
  --ds-success: #0e7a52;
  --ds-success-soft: rgba(14, 122, 82, 0.1);
  --ds-warning: #b06912;
  --ds-warning-soft: rgba(176, 105, 18, 0.1);
  --ds-danger: #b3382a;
  --ds-danger-soft: rgba(179, 56, 42, 0.08);
  --ds-info: #2f5fc3;
  --ds-shadow-sm: 0 1px 2px rgba(20, 17, 15, 0.04);
  --ds-shadow-md: 0 8px 28px rgba(20, 17, 15, 0.06);
  --ds-shadow-lg: 0 24px 64px rgba(20, 17, 15, 0.08);
  --ds-radius: 10px;
  --ds-radius-sm: 6px;
  --ds-radius-lg: 14px;
  --ds-radius-pill: 999px;
  --ds-mono: "SF Mono", "JetBrains Mono", "Menlo", ui-monospace, monospace;
  --ds-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --ds-display: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Helvetica Neue", Arial, sans-serif;
  --max-width: 1200px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Global horizontal-overflow guard — any single overflowing element must NOT
     side-scroll the whole site (the cardinal mobile sin). Neutralizes overflow
     sources at the root; individual sources are still fixed below.
     `clip` (not `hidden`): hidden makes the root a scroll container, which
     disables `position: sticky` for descendants (it killed the reel pin). clip
     stops the horizontal scroll WITHOUT establishing a scroll container. */
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--ds-bg);
  color: var(--ds-text);
  font-family: var(--ds-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11", "tnum";
}

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

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

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

::selection {
  background: rgba(255, 110, 69, 0.22);
  color: var(--ds-text);
}

/* ============ HEADER ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: rgba(247, 243, 236, 0.78);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--ds-border);
}

.site-header-inner {
  width: min(calc(100% - 32px), var(--max-width));
  margin: 0 auto;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
}

.brand img {
  height: 22px;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13.5px;
  color: var(--ds-text-soft);
}

.site-nav a {
  padding: 6px 12px;
  border-radius: var(--ds-radius-sm);
  font-weight: 500;
  color: var(--ds-text-soft);
  /* Never wrap a nav link mid-phrase. "Sign in" is the only two-word
     plain link, so without this it's the one that breaks onto two lines
     when Safari's flex sizing gets tight — and the ::after hover
     underline (bottom:2px) then lands under the wrapped second line.
     The .btn CTAs already nowrap; plain links must too. */
  white-space: nowrap;
}

.site-nav a:hover {
  color: var(--ds-text);
  background: rgba(23, 19, 17, 0.04);
}

.site-nav .nav-signin {
  color: var(--ds-text);
}

.nav-cta {
  margin-left: 6px;
}

/* Mobile menu button — hidden on desktop; all its visuals + the overlay menu
   live in the max-width:768px block, so desktop rendering is untouched. */
.nav-toggle { display: none; }

/* ---- Auth-aware CTA swap (bank-grade, no flash) ----
   Inline pre-paint script in <head> stamps <html data-authed="1">
   when a workspace is cached. These rules then swap anon CTAs
   ("Sign in" / "Start free") for the authed variant ("Go to
   dashboard"). Mirrors Stripe's marketing-site pattern. */
[data-show-when="authed"] { display: none !important; }
html[data-authed="1"] [data-show-when="anon"] { display: none !important; }
html[data-authed="1"] [data-show-when="authed"] { display: inline-flex !important; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  color: var(--ds-text);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 140ms, background 140ms, transform 140ms,
    box-shadow 140ms;
}

.btn:hover {
  border-color: var(--ds-border-strong);
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-sm);
}

.btn-primary {
  background: var(--ds-text);
  color: #fff;
  border-color: var(--ds-text);
}

.btn-primary:hover {
  background: #000;
  border-color: #000;
}

.btn-accent {
  background: linear-gradient(180deg, var(--ds-accent) 0%, var(--ds-accent-strong) 100%);
  color: #fff;
  border-color: var(--ds-accent-strong);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 4px 12px rgba(238, 79, 37, 0.2);
}

.btn-accent:hover {
  filter: brightness(1.04);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
}

.btn svg {
  width: 13px;
  height: 13px;
}

/* ============ SECTION SHELL ============ */
.section {
  width: min(calc(100% - 32px), var(--max-width));
  margin: 0 auto;
  padding: 96px 0 0;
}

.section-tight {
  padding-top: 64px;
}

.section-narrow {
  max-width: 880px;
  margin: 0 auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  padding: 4px 10px;
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  color: var(--ds-muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--ds-radius-pill);
}

.eyebrow .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ds-accent-strong);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
  margin-bottom: 36px;
}

.section-head h2 {
  margin: 0;
  font-family: var(--ds-display);
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ds-text);
}

.section-head p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ds-muted);
  max-width: 56ch;
}

.section-head.is-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  align-items: center;
}

.section-head.is-center p {
  margin-left: auto;
  margin-right: auto;
}

/* ============ HERO ============ */
.hero {
  width: min(calc(100% - 32px), var(--max-width));
  margin: 0 auto;
  padding: 80px 0 24px;
  text-align: center;
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -40px -40px auto -40px;
  height: 520px;
  background:
    radial-gradient(ellipse 60% 70% at 50% 0%, rgba(255, 110, 69, 0.14), transparent 70%),
    radial-gradient(ellipse 80% 50% at 50% 80%, rgba(255, 141, 75, 0.08), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 6px;
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  border-radius: var(--ds-radius-pill);
  font-size: 12px;
  font-weight: 500;
  color: var(--ds-text-soft);
  margin-bottom: 22px;
}

.hero-eyebrow .badge {
  background: var(--ds-text);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0 auto;
  max-width: 18ch;
  font-family: var(--ds-display);
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--ds-text);
}

.hero h1 .accent {
  background: linear-gradient(96deg, var(--ds-accent-red) 0%, var(--ds-accent) 50%, var(--ds-accent-warm) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline;
}

.hero-subhead {
  margin: 22px auto 0;
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ds-muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

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

.hero-trust {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  margin-top: 20px;
  font-size: 12.5px;
  color: var(--ds-muted);
}

.hero-trust .sep {
  color: var(--ds-muted-soft);
}

/* Hero dashboard preview */
.hero-stage {
  width: min(calc(100% - 32px), 1100px);
  margin: 56px auto 0;
  perspective: 2000px;
}

.hero-frame {
  position: relative;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  box-shadow: var(--ds-shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  overflow: hidden;
  transform-style: preserve-3d;
  transform: rotateX(var(--hero-rotate-x, 0deg)) rotateY(var(--hero-rotate-y, 0deg))
    translate3d(var(--hero-shift-x, 0), var(--hero-shift-y, 0), 0);
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hero-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, transparent 35%);
  pointer-events: none;
  opacity: var(--hero-sheen-opacity, 0.18);
  transform: translate3d(var(--hero-sheen-x, 0), var(--hero-sheen-y, 0), 0);
  mix-blend-mode: overlay;
}

/* Hero shot — a real screenshot framed in place of the built mock.
   Narrower stage (the journey is a portrait-ish timeline) and the image
   fills the frame edge-to-edge over the canvas tone. */
.hero-stage--shot {
  width: min(calc(100% - 32px), 980px);
  display: flex;
  justify-content: center;
}
.hero-frame-shot {
  margin: 0;
  background: var(--ds-canvas);
  max-width: 100%;
}
/* The journey is a long timeline — cap it by HEIGHT so it's a tasteful
   product shot, never a full-width wall; width follows to keep the aspect. */
.hero-frame-shot img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 440px;
}

/* Orchestrated load — the hero beats rise in sequence on first paint.
   Honest motion: nothing fakes data, the real shot just settles into place. */
@media (prefers-reduced-motion: no-preference) {
  .hero h1,
  .hero .hero-subhead,
  .hero .hero-actions,
  .hero .hero-stage {
    opacity: 0;
    animation: heroRise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  }
  .hero h1 { animation-delay: 0.04s; }
  .hero .hero-subhead { animation-delay: 0.15s; }
  .hero .hero-actions { animation-delay: 0.26s; }
  .hero .hero-stage { animation-delay: 0.42s; }
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* ============================================================
   v3 index sections
   ============================================================ */
.is-legacy-hidden { display: none !important; }

/* VERIFY band — thin reassurance strip under the hero */
.verify-band {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 22px 32px;
  border-top: 1px solid var(--ds-divider);
  border-bottom: 1px solid var(--ds-divider);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
}
.verify-band-kicker {
  margin: 0;
  font-family: var(--ds-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ds-text);
}
.verify-band-text { margin: 0; font-size: 14px; color: var(--ds-muted); flex: 1; min-width: 260px; }
.verify-band-text a { color: var(--ds-accent-strong); font-weight: 550; text-decoration: none; white-space: nowrap; }
.verify-band-text a:hover { text-decoration: underline; }

/* "Verify it yourself" badge on the verify-claim sections */
.verify-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: var(--ds-radius-pill);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-success);
  background: var(--ds-success-soft);
  vertical-align: middle;
}

/* Premium screenshot frame (real <img>, or labelled placeholder until shot lands) */
.shot { max-width: var(--max-width); margin: 8px auto 0; padding: 0 16px; }
.shot-wide { margin-top: 44px; }
.shot-frame {
  margin: 0;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-canvas);
  box-shadow: var(--ds-shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  overflow: hidden;
}
.shot-frame img { display: block; width: 100%; height: auto; }
.shot-ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  padding: 40px 24px 56px;
  text-align: center;
  font-family: var(--ds-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--ds-muted-soft);
  background: repeating-linear-gradient(135deg, transparent 0 22px, rgba(23, 19, 17, 0.02) 22px 23px);
}
.shot-ph-tall { min-height: 420px; }
.shot-ph::after {
  content: attr(data-cap);
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  font-family: var(--ds-mono);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ds-muted-soft);
  opacity: 0.8;
}

/* Feature row — copy beside a shot, alternating sides for rhythm */
.feature-row {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 72px 32px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: 56px;
}
.feature-row.is-reverse .feature-copy { order: 2; }
.feature-row.is-reverse .feature-shot { order: 1; }
.feature-copy .eyebrow { margin-bottom: 14px; }
.feature-copy h2 {
  margin: 0 0 14px;
  font-family: var(--ds-display);
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ds-text);
}
.feature-copy p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ds-muted); max-width: 46ch; }

/* Before / after pair (§4 identity stitch) */
.ba-pair {
  max-width: var(--max-width);
  margin: 40px auto 0;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}
.ba-card.is-before { opacity: 0.78; }
.ba-arrow { color: var(--ds-accent-strong); display: flex; }
.ba-arrow svg { width: 26px; height: 26px; }

/* Three tools collapse into one — vector, not a comparison matrix */
.collapse {
  max-width: 720px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 14px;
  align-items: center;
  text-align: center;
}
.collapse-src {
  padding: 12px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
  font-size: 14px;
  font-weight: 550;
  color: var(--ds-muted);
}
.collapse-line {
  grid-column: 1 / -1;
  height: 26px;
  background: linear-gradient(var(--ds-border-strong), var(--ds-border-strong)) center / 1px 100% no-repeat;
}
.collapse-dst {
  grid-column: 1 / -1;
  padding: 16px;
  border: 1px solid var(--ds-accent);
  border-radius: var(--ds-radius);
  background: var(--ds-accent-soft);
  font-family: var(--ds-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ds-accent-strong);
}

/* Verify centerpiece — the moat, the scroll's emotional peak */
.verify-center {
  position: relative;
  padding: 28px 0 12px;
  background: radial-gradient(1200px 360px at 50% 0%, var(--ds-accent-soft), transparent 70%);
}

/* Centred Swift code card (§8) */
.code-card-center { max-width: 640px; margin: 40px auto 0; }

@media (max-width: 820px) {
  .feature-row { grid-template-columns: 1fr; gap: 28px; padding: 48px 24px; }
  .feature-row.is-reverse .feature-copy,
  .feature-row.is-reverse .feature-shot { order: initial; }
  .ba-pair { grid-template-columns: 1fr; }
  .ba-arrow { transform: rotate(90deg); justify-self: center; }
  .verify-band { flex-direction: column; gap: 6px; }
}

/* Mini-dashboard inside hero */
.mini-dash {
  display: grid;
  grid-template-columns: 156px 1fr;
  height: 480px;
  background: var(--ds-canvas);
}

.mini-side {
  background: #f1ece3;
  border-right: 1px solid var(--ds-border);
  padding: 14px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11px;
  color: var(--ds-text-soft);
}

.mini-side-brand {
  font-family: var(--ds-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.02em;
  color: var(--ds-text);
  padding: 4px 4px 8px;
}

.mini-side-section {
  margin-top: 6px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-muted-soft);
  padding: 0 4px;
}

.mini-side-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px;
  border-radius: 5px;
  font-weight: 500;
}

.mini-side-item.is-active {
  background: #fff;
  box-shadow: var(--ds-shadow-sm);
  color: var(--ds-text);
}

.mini-side-item .dot {
  width: 4px;
  height: 4px;
  background: var(--ds-muted-soft);
  border-radius: 50%;
}

.mini-side-item.is-active .dot {
  background: var(--ds-accent-strong);
}

.mini-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mini-top {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-bottom: 1px solid var(--ds-border);
  font-size: 11px;
  color: var(--ds-muted);
}

.mini-top .crumb {
  color: var(--ds-text);
  font-weight: 600;
}

.mini-top .env {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid var(--ds-border);
  border-radius: 999px;
  background: #fff;
  font-size: 10.5px;
}

.mini-top .env .dot {
  width: 5px;
  height: 5px;
  background: var(--ds-success);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--ds-success-soft);
}

.mini-content {
  padding: 14px;
  display: grid;
  gap: 10px;
}

.mini-page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.mini-page-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.mini-page-head .range {
  font-size: 10.5px;
  color: var(--ds-muted);
  border: 1px solid var(--ds-border);
  background: #fff;
  padding: 3px 8px;
  border-radius: 5px;
}

.mini-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.mini-kpi {
  background: #fff;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mini-kpi .label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ds-muted);
  letter-spacing: 0.01em;
}

.mini-kpi .value {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ds-text);
  font-variant-numeric: tabular-nums;
}

.mini-kpi .delta {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ds-success);
  font-variant-numeric: tabular-nums;
}

.mini-kpi .delta.is-down {
  color: var(--ds-danger);
}

.mini-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 10px;
}

.mini-card {
  background: #fff;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  overflow: hidden;
}

.mini-card-head {
  padding: 8px 10px;
  border-bottom: 1px solid var(--ds-divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mini-card-head .title {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-text);
}

.mini-card-head .sub {
  font-size: 9.5px;
  color: var(--ds-muted);
}

.mini-card-head .tabs {
  display: inline-flex;
  border: 1px solid var(--ds-border);
  border-radius: 5px;
  padding: 1px;
  gap: 1px;
  background: var(--ds-canvas);
}

.mini-card-head .tabs span {
  padding: 1px 6px;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--ds-muted);
  border-radius: 3px;
}

.mini-card-head .tabs span.is-active {
  background: #fff;
  color: var(--ds-text);
  box-shadow: var(--ds-shadow-sm);
}

.mini-chart-wrap {
  padding: 10px 10px 0;
}

.mini-chart-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}

.mini-chart-meta .big {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.mini-chart-meta .delta {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-success);
}

.mini-chart svg {
  display: block;
  width: 100%;
  height: 132px;
}

.mini-stream {
  padding: 6px;
  display: flex;
  flex-direction: column;
}

.mini-stream-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 6px;
  font-size: 10.5px;
  color: var(--ds-muted);
}

.mini-stream-head .live {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-success);
  box-shadow: 0 0 0 0 rgba(14, 122, 82, 0.5);
  animation: mini-pulse 1.8s ease-out infinite;
}

@keyframes mini-pulse {
  0% { box-shadow: 0 0 0 0 rgba(14, 122, 82, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(14, 122, 82, 0); }
  100% { box-shadow: 0 0 0 0 rgba(14, 122, 82, 0); }
}

.mini-stream-item {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 5px 6px;
  border-radius: 5px;
  font-size: 11px;
}

.mini-stream-item:hover {
  background: var(--ds-canvas);
}

.mini-stream-item .ic {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-size: 9px;
  color: #fff;
}

.mini-stream-item .ic.s { background: var(--ds-success); }
.mini-stream-item .ic.w { background: var(--ds-warning); }
.mini-stream-item .ic.i { background: var(--ds-info); }
.mini-stream-item .ic.d { background: var(--ds-danger); }

.mini-stream-item .meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mini-stream-item .title-t {
  font-weight: 500;
  color: var(--ds-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-stream-item .sub-t {
  font-size: 9.5px;
  color: var(--ds-muted);
  font-family: var(--ds-mono);
}

.mini-stream-item .time {
  font-size: 9.5px;
  color: var(--ds-muted-soft);
  font-variant-numeric: tabular-nums;
}

/* ============ PILLARS / FEATURES ============ */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.pillar {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 200px;
  transition: transform 200ms, box-shadow 200ms;
}

.pillar:hover {
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-md);
}

.pillar-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--ds-accent-soft);
  color: var(--ds-accent-strong);
  display: grid;
  place-items: center;
}

.pillar-icon svg {
  width: 14px;
  height: 14px;
}

.pillar h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ds-text);
}

.pillar p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ds-muted);
}

.pillar-foot {
  margin-top: auto;
  padding-top: 8px;
  font-size: 11.5px;
  color: var(--ds-muted-soft);
  font-family: var(--ds-mono);
  border-top: 1px solid var(--ds-divider);
}

/* ============ DECKS STORY ============ */
.decks {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}

.deck-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}

.deck-card.deck-revenue::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 110, 69, 0.18), transparent 70%);
  pointer-events: none;
}

.deck-card.deck-telemetry::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(47, 95, 195, 0.14), transparent 70%);
  pointer-events: none;
}

.deck-card.deck-errors::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(179, 56, 42, 0.14), transparent 70%);
  pointer-events: none;
}

.deck-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-accent-strong);
}

.deck-card.deck-telemetry .deck-label {
  color: var(--ds-info);
}

.deck-card.deck-errors .deck-label {
  color: var(--ds-danger);
}

.deck-card h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ds-text);
}

.deck-card p {
  margin: 0;
  color: var(--ds-muted);
  font-size: 14px;
}

.deck-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--ds-text-soft);
}

.deck-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ds-mono);
  font-size: 12px;
  color: var(--ds-text);
  padding: 6px 8px;
  border-radius: 5px;
  background: var(--ds-canvas);
  border: 1px solid var(--ds-border);
}

.deck-list li::before {
  content: "·";
  color: var(--ds-accent-strong);
  font-weight: 700;
}

.deck-card.deck-telemetry .deck-list li::before {
  color: var(--ds-info);
}

.deck-card.deck-errors .deck-list li::before {
  color: var(--ds-danger);
}

.decks-merge {
  position: relative;
  margin: 32px auto 0;
  max-width: 880px;
  padding: 26px;
  background: var(--ds-text);
  color: #fff;
  border-radius: var(--ds-radius);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

.decks-merge::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 30%;
  width: 1px;
  height: 16px;
  background: var(--ds-border-strong);
}

.decks-merge::after {
  content: "";
  position: absolute;
  top: -16px;
  right: 30%;
  width: 1px;
  height: 16px;
  background: var(--ds-border-strong);
}

.merge-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--ds-accent-red), var(--ds-accent-warm));
  color: #fff;
}

.merge-icon svg {
  width: 18px;
  height: 18px;
}

.merge-text strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.merge-text span {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
}

.merge-result {
  text-align: right;
  font-family: var(--ds-mono);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}

/* ============ INSTALL ============ */
.install {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}

.code-card {
  background: #14110f;
  color: rgba(255, 255, 255, 0.92);
  border-radius: var(--ds-radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.code-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.6);
}

.code-head .dots {
  display: inline-flex;
  gap: 5px;
}

.code-head .dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.code-tabs {
  margin-left: auto;
  display: inline-flex;
  gap: 0;
}

.code-tabs span {
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 500;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.55);
}

.code-tabs span.is-active {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.95);
}

.code-card pre {
  margin: 0;
  padding: 18px 20px;
  font-family: var(--ds-mono);
  font-size: 12.5px;
  line-height: 1.7;
  overflow-x: auto;
}

.code-card pre code {
  font-family: inherit;
}

.code-tok-key { color: #d77265; }
.code-tok-fn { color: #ffb479; }
.code-tok-str { color: #92cd89; }
.code-tok-com { color: rgba(255, 255, 255, 0.4); font-style: italic; }
.code-tok-kw { color: #c79bf3; }

.install-flow {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.install-flow h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.install-flow > p {
  margin: 0;
  color: var(--ds-muted);
  font-size: 13.5px;
}

.flow-step {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  background: var(--ds-canvas);
}

.flow-num {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--ds-text);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
}

.flow-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.flow-body strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-text);
}

.flow-body span {
  font-size: 11.5px;
  color: var(--ds-muted);
}

.flow-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ds-success);
  padding: 2px 7px;
  background: var(--ds-success-soft);
  border-radius: 999px;
}

.flow-status.pending {
  color: var(--ds-warning);
  background: var(--ds-warning-soft);
}

.flow-status .ddot {
  width: 5px;
  height: 5px;
  background: currentColor;
  border-radius: 50%;
}

/* ============ COMPARE ============ */
.compare {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  overflow: hidden;
}

.compare table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.compare th {
  text-align: left;
  padding: 14px 16px;
  background: var(--ds-canvas);
  border-bottom: 1px solid var(--ds-divider);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-muted);
}

.compare th.is-cd {
  color: var(--ds-accent-strong);
  background: linear-gradient(180deg, var(--ds-accent-soft), transparent);
}

.compare td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ds-divider);
  color: var(--ds-text);
  vertical-align: middle;
}

.compare tr:last-child td {
  border-bottom: 0;
}

.compare td.feature {
  font-weight: 500;
  color: var(--ds-text);
  width: 30%;
}

.compare td.cd {
  color: var(--ds-accent-strong);
  font-weight: 600;
}

.cell-yes {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ds-success);
  font-weight: 600;
  font-size: 13px;
}

.cell-no {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ds-muted-soft);
  font-size: 12px;
}

.cell-yes svg, .cell-no svg {
  width: 13px;
  height: 13px;
}

/* ============ TRUST ============ */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.trust-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trust-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--ds-canvas);
  border: 1px solid var(--ds-border);
  color: var(--ds-text);
  display: grid;
  place-items: center;
}

.trust-icon svg {
  width: 14px;
  height: 14px;
}

.trust-card h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ds-text);
}

.trust-card p {
  margin: 0;
  color: var(--ds-muted);
  font-size: 13px;
  line-height: 1.55;
}

/* ============ Depth atmosphere — living background, four planes ============ */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}
.atmosphere::before {
  content: "";
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(38% 34% at 16% 10%, rgba(255, 110, 69, 0.18), transparent 60%),
    radial-gradient(42% 38% at 86% 6%, rgba(255, 141, 75, 0.13), transparent 62%),
    radial-gradient(46% 42% at 64% 88%, rgba(255, 52, 49, 0.09), transparent 60%),
    radial-gradient(40% 40% at 8% 70%, rgba(255, 141, 75, 0.08), transparent 60%);
  filter: blur(18px);
  transform: translate3d(0, calc(var(--scroll, 0) * -0.04px), 0);
  animation: meshDrift 30s ease-in-out infinite alternate;
}
.atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(23, 19, 17, 0.10) 1.5px, transparent 1.6px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 130% 125% at 50% 30%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 130% 125% at 50% 30%, #000 55%, transparent 100%);
  opacity: 0.9;
}
@keyframes meshDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(3%, 2%, 0) scale(1.07); }
}

/* ============ App-window frame — every screenshot lives in real chrome ============ */
.appframe {
  position: relative;
  border-radius: 14px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.55) inset;
  overflow: hidden;
}
.appframe-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 14px;
  background: linear-gradient(var(--ds-bg-soft), var(--ds-canvas));
  border-bottom: 1px solid var(--ds-border);
}
.appframe-dots { display: inline-flex; gap: 6px; }
.appframe-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--ds-border-strong); opacity: 0.7; }
.appframe-dots i:first-child { background: #ff6058; opacity: 1; }
.appframe-dots i:nth-child(2) { background: #febc2e; opacity: 1; }
.appframe-dots i:nth-child(3) { background: #28c840; opacity: 1; }
.appframe-url {
  flex: 1;
  max-width: 360px;
  margin: 0 auto;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border-radius: 7px;
  background: var(--ds-canvas);
  border: 1px solid var(--ds-border);
  font-size: 11.5px;
  color: var(--ds-muted-soft);
  font-family: var(--ds-mono);
}
.appframe-body {
  position: relative;
  max-height: 540px;
  overflow: hidden;
}
.appframe-body img { display: block; width: 100%; height: auto; }
.appframe-body::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  background: linear-gradient(transparent, var(--ds-surface));
  pointer-events: none;
}

/* Floating UI fragment — a real chip lifted OUT of the screenshot */
.frag {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: 11px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow-md), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  font-size: 13px;
  font-weight: 550;
  color: var(--ds-text);
  white-space: nowrap;
  transform: translate3d(0, calc(var(--scroll, 0) * var(--frag-rate, 0.02px)), 0);
}
.frag .frag-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.frag .frag-dot.ok { background: var(--ds-success); box-shadow: 0 0 0 4px var(--ds-success-soft); }
.frag .frag-dot.warn { background: var(--ds-accent-strong); box-shadow: 0 0 0 4px var(--ds-accent-soft); }
.frag code { font-family: var(--ds-mono); font-size: 12px; color: var(--ds-text); }
.frag-hero { left: 20px; bottom: 56px; --frag-rate: 0.03px; }
.hero-frame-shot .appframe-body { max-height: 400px; }
@media (max-width: 600px) { .frag-hero { left: 12px; bottom: 40px; font-size: 11.5px; padding: 7px 10px; } }

/* Hero annotation — a designed callout lifted off the shot that states the
   insight the screenshot shows but doesn't say (the identity collapse). */
/* Hero annotations — a constellation of designed callouts pulled off the shot,
   each naming a real thing in the record: a paid sub unlocking Pro, a signed
   audit trail (both lifted into the left margin), and every rail ID collapsing
   into one person (lifted into the right margin, leading with a coral ring).
   Each drifts on its own parallax rate and fades in on a stagger. */
.anno {
  position: absolute;
  z-index: 4;
  opacity: 0;
  transform: translate3d(0, calc(var(--scroll, 0) * var(--frag-rate, 0.04px)), 0);
  animation: annoIn 0.6s ease forwards;
}
.anno-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-radius: 13px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  /* Layered lift — a wide soft shadow + a tighter contact shadow + a crisp top
     highlight reads as a card floating well above the frame, not stuck to it. */
  box-shadow:
    0 22px 44px -14px rgba(23, 19, 17, 0.32),
    0 7px 14px -5px rgba(23, 19, 17, 0.16),
    0 1px 0 0 rgba(255, 255, 255, 0.85) inset,
    0 0 0 1px rgba(23, 19, 17, 0.05);
}
.anno-ic {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--ds-accent-red), var(--ds-accent-warm));
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
}
.anno-text { display: flex; flex-direction: column; line-height: 1.2; }
.anno-text strong { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; color: var(--ds-text); }
.anno-text span { font-size: 11px; color: var(--ds-muted); font-family: var(--ds-mono); margin-top: 2px; }

/* hairline connector + dot, tying a card back to the region it names */
.anno-stem { position: absolute; top: 50%; width: 28px; height: 1.5px; }
.anno-stem::before {
  content: "";
  position: absolute;
  top: -2.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-accent-strong);
  box-shadow: 0 0 0 4px var(--ds-accent-soft);
}

/* RIGHT — identity collapse: the lead callout. Pulled furthest out, carrying a
   soft coral ring so the eye lands here first. Stem points left into the panel. */
.anno-identity { top: 64px; right: -42px; --frag-rate: 0.045px; animation-delay: 0.45s; }
.anno-identity .anno-card {
  box-shadow:
    0 26px 52px -14px rgba(23, 19, 17, 0.36),
    0 9px 18px -5px rgba(23, 19, 17, 0.18),
    0 1px 0 0 rgba(255, 255, 255, 0.85) inset,
    0 0 0 4px var(--ds-accent-soft);
}
.anno-identity .anno-stem { left: -26px; background: linear-gradient(90deg, transparent, var(--ds-accent-strong)); }
.anno-identity .anno-stem::before { left: -3px; }

/* LEFT-TOP — paid unlocks Pro. Stem points right into the subscription rows. */
.anno-sub { top: 150px; left: -40px; --frag-rate: 0.03px; animation-delay: 0.6s; }
.anno-sub .anno-stem { right: -26px; background: linear-gradient(90deg, var(--ds-accent-strong), transparent); }
.anno-sub .anno-stem::before { right: -3px; }

/* LEFT-BOTTOM — signed audit trail. Stem points right into the timeline. */
.anno-audit { top: 300px; left: -26px; --frag-rate: 0.055px; animation-delay: 0.75s; }
.anno-audit .anno-stem { right: -26px; background: linear-gradient(90deg, var(--ds-accent-strong), transparent); }
.anno-audit .anno-stem::before { right: -3px; }

@keyframes annoIn { to { opacity: 1; } }
@media (max-width: 900px) { .anno { display: none; } }
@media (prefers-reduced-motion: reduce) { .anno { animation: none; opacity: 1; } }

/* ============ Screenshot-led product sections (v3.1) ============ */
/* ============ THE REEL — one customer, three signals, one timeline ============ */
/* A pinned cinematic: the stage sticks while you scroll the tall section, and
   one real customer's events ignite down a single spine in the order they
   happened — analytics, then revenue, then an error that hit a paying user,
   then recovery. Scroll progress (--reel-p, set in script.js) drives the spine
   fill and the active signal; per-event ignition is toggled by .is-lit. */
.reel { position: relative; height: 300vh; --reel-p: 0; }
.reel-stage {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.reel-grid {
  width: min(calc(100% - 32px), var(--max-width));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(32px, 6vw, 92px);
  align-items: center;
  padding: 88px 0;
}
.reel-copy { position: relative; }
.reel-copy .eyebrow { margin-bottom: 16px; }
.reel-copy h2 {
  margin: 0 0 18px;
  font-family: var(--ds-display);
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ds-text);
}
.reel-copy > p {
  margin: 0 0 28px;
  max-width: 42ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ds-muted);
}
.reel-steps { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 6px; }
.reel-step {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid transparent;
  opacity: 0.5;
  transition: background 280ms ease, border-color 280ms ease, opacity 280ms ease, box-shadow 280ms ease;
}
.reel-step.is-active {
  opacity: 1;
  background: var(--ds-surface);
  border-color: var(--ds-border);
  box-shadow: var(--ds-shadow-md);
}
.reel-step-mark {
  width: 11px; height: 11px; margin-top: 5px;
  border-radius: 50%;
  background: var(--mark, var(--ds-border-strong));
  transition: box-shadow 280ms ease;
}
.reel-step.is-active .reel-step-mark { box-shadow: 0 0 0 5px var(--mark-soft, var(--ds-accent-soft)); }
.reel-step b { display: block; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; color: var(--ds-text); }
.reel-step span span,
.reel-step > span > span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--ds-muted); font-weight: 400; }
.reel-note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ds-text); font-weight: 560; }
.reel-step[data-signal="analytics"] { --mark: #5b6470; --mark-soft: rgba(91,100,112,0.16); }
.reel-step[data-signal="revenue"]   { --mark: var(--ds-success); --mark-soft: var(--ds-success-soft); }
.reel-step[data-signal="errors"]    { --mark: var(--ds-accent-red); --mark-soft: var(--ds-accent-soft); }

.reel-timeline { position: relative; display: grid; gap: 14px; padding-left: 36px; }
.reel-spine {
  position: absolute;
  left: 10px; top: 8px; bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--ds-divider);
  overflow: hidden;
}
.reel-spine::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc(var(--reel-p) * 100%);
  background: linear-gradient(180deg, #5b6470 0%, var(--ds-success) 42%, var(--ds-accent-red) 82%);
}
.reel-event {
  position: relative;
  opacity: 0.26;
  transform: translateY(9px);
  transition: opacity 440ms ease, transform 440ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reel-event.is-lit { opacity: 1; transform: none; }
.reel-node {
  position: absolute;
  left: -31px; top: 15px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--ds-canvas);
  border: 2px solid var(--ds-border-strong);
  transition: background 440ms ease, box-shadow 440ms ease, border-color 440ms ease;
}
.reel-event.is-lit .reel-node { background: var(--sig); border-color: var(--sig); box-shadow: 0 0 0 5px var(--sig-soft); }
.reel-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-left: 3px solid var(--ds-border-strong);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: var(--ds-shadow-md);
  transition: border-left-color 440ms ease;
}
.reel-event.is-lit .reel-card { border-left-color: var(--sig); }
.reel-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.reel-tag { font-size: 10.5px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sig-ink, var(--ds-muted)); }
.reel-card-top time { font-family: var(--ds-mono); font-size: 11.5px; color: var(--ds-muted); flex: none; }
.reel-card-title { margin: 0; font-size: 14.5px; font-weight: 560; line-height: 1.35; color: var(--ds-text); }
.reel-card-title code { font-family: var(--ds-mono); font-size: 0.88em; background: var(--ds-canvas); border: 1px solid var(--ds-border); padding: 0 4px; border-radius: 4px; color: var(--ds-text); }
.reel-card-sub { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ds-muted); }
.reel-card-sub strong { color: var(--ds-accent-red); font-weight: 650; }
.reel-card-sub .ok { color: var(--ds-success); font-weight: 600; }
.reel-event[data-signal="analytics"] { --sig: #5b6470; --sig-soft: rgba(91,100,112,0.16); --sig-ink: #5b6470; }
.reel-event[data-signal="revenue"]   { --sig: var(--ds-success); --sig-soft: var(--ds-success-soft); --sig-ink: var(--ds-success); }
.reel-event[data-signal="errors"]    { --sig: var(--ds-accent-red); --sig-soft: var(--ds-accent-soft); --sig-ink: var(--ds-accent-red); }

@media (max-width: 860px) {
  .reel { height: auto; }
  .reel-stage { position: static; min-height: 0; overflow: visible; }
  .reel-grid { grid-template-columns: 1fr; gap: 36px; padding: 56px 0; }
  .reel-event, .reel-step { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .reel { height: auto; }
  .reel-stage { position: static; min-height: 0; }
  .reel-event { opacity: 1; transform: none; }
}

.product { padding: 92px 0; }
.product.is-alt {
  background: var(--ds-bg-soft);
  border-top: 1px solid var(--ds-divider);
  border-bottom: 1px solid var(--ds-divider);
}
.product-head,
.product > .product-shot,
.product-duo {
  width: min(calc(100% - 32px), var(--max-width));
  margin-inline: auto;
}
.product-head { margin-bottom: 40px; }
.product-head .eyebrow { margin-bottom: 14px; }
.product-head h2 {
  margin: 0 0 14px;
  max-width: 26ch;
  font-family: var(--ds-display);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--ds-text);
}
.product-head p {
  margin: 0;
  max-width: 58ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ds-muted);
}
.product-head em { font-style: normal; color: var(--ds-text); font-weight: 600; }
.product-head code {
  font-family: var(--ds-mono);
  font-size: 0.88em;
  background: var(--ds-canvas);
  border: 1px solid var(--ds-border);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--ds-text);
}
.product-head.is-center { text-align: center; }
.product-head.is-center h2 { max-width: 22ch; margin-inline: auto; }
.product-head.is-center p { margin-inline: auto; }

/* The framed screenshot — same premium frame language as the hero */
.product-shot {
  margin: 0;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-canvas);
  box-shadow: var(--ds-shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  overflow: hidden;
}
.product-shot img { display: block; width: 100%; height: auto; }

/* Two shots as a stacked deck (analytics, errors). They sit one on top of the
   other, near full width; the back card peeks out diagonally to the bottom-right.
   Hover either — the front, or the peeking corner — and that card lifts and comes
   fully to the front over the other. Calm and tactile, not a fanned playing-card.
   Hover motion is scale + a small lift with position held, so the pointer never
   leaves the card it just brought forward — no flicker. */
.product-duo {
  display: grid;
  place-items: center;
  padding-bottom: 70px;
}
.product-duo .product-shot {
  grid-area: 1 / 1;
  width: 84%;
  transform-origin: center;
  transition:
    transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 520ms ease,
    filter 520ms ease;
  will-change: transform;
  cursor: pointer;
}
.product-duo .product-shot:first-child { z-index: 2; }
/* Back card: a deliberate diagonal offset so it's instantly, obviously a second
   card behind — plus a touch smaller + dimmer so depth reads at a glance. The
   X offset is bounded (width 84% + 76px) so it can never push past the viewport
   near the 861px breakpoint. */
.product-duo .product-shot:last-child {
  z-index: 1;
  transform: translate(76px, 66px) scale(0.94);
  filter: brightness(0.965) saturate(0.97);
}
.product-duo .product-shot:first-child:hover {
  z-index: 3;
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 46px 92px -26px rgba(23, 19, 17, 0.36), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}
.product-duo .product-shot:last-child:hover {
  z-index: 3;
  transform: translate(76px, 58px) scale(0.975);
  filter: none;
  box-shadow: 0 46px 92px -26px rgba(23, 19, 17, 0.36), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}
.product-duo:hover .product-shot:not(:hover) { filter: brightness(0.965) saturate(0.98); }

@media (prefers-reduced-motion: reduce) {
  .product-duo { grid-template-columns: 1fr 1fr; gap: 22px; place-items: stretch; padding-bottom: 0; }
  .product-duo .product-shot,
  .product-duo .product-shot:first-child,
  .product-duo .product-shot:last-child {
    grid-area: auto; width: 100%; transform: none; transition: none; filter: none;
  }
}

/* Prove it — the moat climax and the call to action */
.prove {
  padding: 100px 0 96px;
  position: relative;
  background: radial-gradient(1100px 440px at 50% 0%, var(--ds-accent-soft), transparent 72%);
}
.prove .product-head,
.prove .product-shot {
  width: min(calc(100% - 32px), var(--max-width));
  margin-inline: auto;
}
.prove-cta { display: flex; justify-content: center; gap: 12px; margin-top: 36px; }

@media (max-width: 860px) {
  .product { padding: 60px 0; }
  .product-duo { grid-template-columns: 1fr; gap: 16px; place-items: stretch; padding-bottom: 0; }
  .product-duo .product-shot,
  .product-duo .product-shot:first-child,
  .product-duo .product-shot:last-child {
    grid-area: auto; width: 100%; transform: none; filter: none; cursor: default;
  }
  .prove { padding: 64px 0; }
}

/* ============ FINAL CTA ============ */
.final-cta {
  width: min(calc(100% - 32px), var(--max-width));
  margin: 96px auto 64px;
  padding: 60px 40px;
  background:
    linear-gradient(135deg, rgba(255, 52, 49, 0.06), rgba(255, 141, 75, 0.06)),
    var(--ds-text);
  color: #fff;
  border-radius: 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 100%, rgba(255, 110, 69, 0.25), transparent 60%);
  pointer-events: none;
}

.final-cta h2 {
  position: relative;
  margin: 0 auto;
  font-family: var(--ds-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.025em;
  max-width: 22ch;
  line-height: 1.1;
}

.final-cta p {
  position: relative;
  margin: 16px auto 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 50ch;
}

.final-cta .hero-actions {
  position: relative;
  margin-top: 28px;
}

.final-cta .btn {
  height: 40px;
  padding: 0 18px;
  font-size: 14px;
}

.final-cta .btn:not(.btn-accent) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.final-cta .btn:not(.btn-accent):hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ============ FOOTER ============ */
.site-footer {
  border-top: 1px solid var(--ds-border);
  background: var(--ds-bg-soft);
}

.footer-shell {
  width: min(calc(100% - 32px), var(--max-width));
  margin: 0 auto;
  padding: 48px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 32px;
  margin-bottom: 32px;
}

.footer-brand {
  font-family: var(--ds-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ds-text);
}

.footer-tagline {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--ds-muted);
  max-width: 30ch;
  line-height: 1.55;
}

.footer-column .footer-heading {
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-text);
}

.footer-column a {
  display: block;
  font-size: 13px;
  color: var(--ds-muted);
  padding: 4px 0;
  transition: color 120ms;
}

.footer-column a:hover {
  color: var(--ds-text);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--ds-border);
  font-size: 12px;
  color: var(--ds-muted);
}

.footer-meta {
  display: inline-flex;
  gap: 14px;
}

/* ============ REVEAL ANIMATION ============ */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger reveal — child elements animate sequentially */
.stagger > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

.stagger.is-visible > *:nth-child(1) { transition-delay: 60ms; }
.stagger.is-visible > *:nth-child(2) { transition-delay: 120ms; }
.stagger.is-visible > *:nth-child(3) { transition-delay: 180ms; }
.stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.stagger.is-visible > *:nth-child(5) { transition-delay: 300ms; }
.stagger.is-visible > *:nth-child(6) { transition-delay: 360ms; }

/* ============ HERO MOTION ============ */
.hero-frame-floater {
  position: relative; /* positioning context for the annotations that overhang the frame */
  animation: floatY 7s ease-in-out infinite;
  will-change: transform;
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-frame-floater { animation: none; }
  .reveal, .stagger > * { opacity: 1; transform: none; transition: none; }
}

/* Hero accent — subtle ambient glow drift */
.hero-aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.hero-aurora::before,
.hero-aurora::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
}

.hero-aurora::before {
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(255, 110, 69, 0.55), transparent 70%);
  top: -120px;
  left: 18%;
  animation: drift1 18s ease-in-out infinite;
}

.hero-aurora::after {
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(255, 141, 75, 0.4), transparent 70%);
  top: 60px;
  right: 14%;
  animation: drift2 22s ease-in-out infinite;
}

@keyframes drift1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(40px, 24px); }
}

@keyframes drift2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-30px, 20px); }
}

/* ============ KPI COUNT-UP ============ */
.mini-kpi .value.is-animating {
  font-variant-numeric: tabular-nums;
}

/* ============ CHART DRAW-IN ============ */
.mini-chart .draw-line {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
}

.mini-chart .draw-line.is-drawn {
  animation: drawLine 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: 200ms;
}

.mini-chart .draw-area {
  opacity: 0;
}

.mini-chart .draw-area.is-drawn {
  animation: fadeArea 1.4s ease-out forwards;
  animation-delay: 800ms;
}

.mini-chart .draw-dot {
  opacity: 0;
}

.mini-chart .draw-dot.is-drawn {
  animation: fadeIn 600ms ease-out forwards;
  animation-delay: 1700ms;
}

@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

@keyframes fadeArea {
  to { opacity: 1; }
}

@keyframes fadeIn {
  to { opacity: 1; }
}

/* ============ STREAM LIVE ============ */
.mini-stream-list {
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 130px;
}

.mini-stream-item {
  transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 280ms ease-out;
}

.mini-stream-item.is-new {
  animation: streamSlide 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mini-stream-item.is-new::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--ds-accent-strong);
  border-radius: 2px;
  animation: flashBar 1.2s ease-out forwards;
}

.mini-stream-item.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
}

@keyframes streamSlide {
  0% { opacity: 0; transform: translateY(-12px); background: rgba(238, 79, 37, 0.06); }
  60% { opacity: 1; transform: translateY(0); }
  100% { background: transparent; }
}

@keyframes flashBar {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* ============ PILLAR HOVER GLOW ============ */
.pillar {
  position: relative;
  overflow: hidden;
}

.pillar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    280px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 110, 69, 0.08),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 200ms ease-out;
  pointer-events: none;
}

.pillar:hover::after {
  opacity: 1;
}

.pillar-icon svg {
  transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pillar:hover .pillar-icon svg {
  transform: scale(1.12) rotate(-4deg);
}

/* ============ DECKS MERGE FLOW LINES ============ */
.decks-merge {
  margin-top: 56px;
}

.merge-rails {
  position: absolute;
  left: 0;
  right: 0;
  top: -36px;
  height: 36px;
  pointer-events: none;
}

.merge-rails svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.merge-rails .rail {
  fill: none;
  stroke: var(--ds-border-strong);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.merge-rails .pulse {
  fill: var(--ds-accent-strong);
  opacity: 0;
}

.merge-rails .pulse.is-on {
  animation: pulseDown 2.2s linear infinite;
}

.merge-rails .pulse.delay-1 {
  animation-delay: 1.1s;
}

@keyframes pulseDown {
  0% { opacity: 0; transform: translateY(-32px); }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(0); }
}

/* ============ COMPARE STAGGER ============ */
.compare tbody tr {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.compare.is-revealed tbody tr {
  opacity: 1;
  transform: translateY(0);
}

.compare.is-revealed tbody tr:nth-child(1) { transition-delay: 60ms; }
.compare.is-revealed tbody tr:nth-child(2) { transition-delay: 120ms; }
.compare.is-revealed tbody tr:nth-child(3) { transition-delay: 180ms; }
.compare.is-revealed tbody tr:nth-child(4) { transition-delay: 240ms; }
.compare.is-revealed tbody tr:nth-child(5) { transition-delay: 300ms; }
.compare.is-revealed tbody tr:nth-child(6) { transition-delay: 360ms; }

.compare th.is-cd {
  position: relative;
  overflow: hidden;
}

.compare th.is-cd::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 110, 69, 0.18),
    transparent
  );
  transform: translateX(-100%);
  animation: sweep 4s ease-in-out infinite;
}

@keyframes sweep {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

/* ============ FLOW STEP CHECK ANIMATION ============ */
.flow-status .ddot {
  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.4); }
}

/* ============ MAGNETIC BUTTON ============ */
.btn {
  transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 200ms ease-out, border-color 140ms, background 140ms;
}

.btn-accent {
  position: relative;
  overflow: hidden;
}

.btn-accent::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 700ms ease-out;
}

.btn-accent:hover::before {
  transform: translateX(100%);
}

/* ============ FINAL CTA SHIMMER ============ */
.final-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 40% 60% at 30% 50%,
    rgba(255, 110, 69, 0.18),
    transparent 70%
  );
  animation: ctaDrift 10s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ctaDrift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(40%); }
}

/* ============ HEADER UNDERLINE INDICATOR ============ */
.site-nav a:not(.nav-cta) {
  position: relative;
}

.site-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 1.5px;
  background: var(--ds-accent-strong);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.site-nav a:not(.nav-cta):hover::after {
  transform: scaleX(1);
}

/* Active page — persistent underline + full-strength text so the menu always
   shows which marketing page you're on (Pricing / Compare / …). */
.site-nav a.is-current { color: var(--ds-text); }
.site-nav a.is-current::after { transform: scaleX(1); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .pillars {
    grid-template-columns: repeat(2, 1fr);
  }
  .install {
    grid-template-columns: 1fr;
  }
  .trust-grid {
    grid-template-columns: 1fr;
  }
  .decks {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  /* ---------- Mobile nav: hamburger → full-screen overlay menu ---------- */
  /* The header's backdrop-filter (desktop frost) makes .site-header the
     CONTAINING BLOCK for the fixed overlay nav below — a descendant — which
     traps the overlay's `inset: 56px 0 0 0` to the 56px header box, so it opens
     with ~zero height and never shows. Drop the filter on mobile (a solid bar
     reads fine here) so the overlay positions to the viewport. Desktop keeps the
     frost — this override is inside the mobile breakpoint only. */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(247, 243, 236, 0.97);
  }
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0 10px;
    margin-right: -4px;
    border: 1px solid var(--ds-border);
    border-radius: 11px;
    background: var(--ds-surface);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 60;
  }
  .nav-toggle span {
    display: block;
    width: 100%;
    height: 1.7px;
    background: var(--ds-text);
    border-radius: 2px;
    transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 200ms ease;
  }
  .site-header.is-open .nav-toggle span:first-child { transform: translateY(3.35px) rotate(45deg); }
  .site-header.is-open .nav-toggle span:last-child { transform: translateY(-3.35px) rotate(-45deg); }

  /* The overlay only governs headers that HAVE the toggle (the home page).
     Subpages that share this stylesheet but don't ship the button keep their
     own nav (fallback below), so they're never left with a hidden, un-openable
     menu. */
  .site-header:has(.nav-toggle) .site-nav {
    position: fixed;
    inset: 56px 0 0 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 12px 20px calc(28px + env(safe-area-inset-bottom, 0px));
    background: rgba(247, 243, 236, 0.98);
    backdrop-filter: saturate(150%) blur(10px);
    -webkit-backdrop-filter: saturate(150%) blur(10px);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 240ms ease, transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 240ms;
    z-index: 55;
  }
  .site-header.is-open .site-nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .site-header:has(.nav-toggle) .site-nav a:not(.nav-cta) {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 4px 2px;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ds-text);
    border-radius: 0;
    border-bottom: 1px solid var(--ds-divider);
  }
  .site-header:has(.nav-toggle) .site-nav a:not(.nav-cta):hover { background: transparent; }
  .site-header:has(.nav-toggle) .site-nav a:not(.nav-cta)::after { display: none; }
  .site-header:has(.nav-toggle) .site-nav .nav-signin { color: var(--ds-text); }
  .site-header:has(.nav-toggle) .nav-cta {
    margin: 22px 0 0;
    width: 100%;
    height: 52px;
    font-size: 16px;
    justify-content: center;
    border-radius: 12px;
  }
  body.nav-open { overflow: hidden; }

  /* Fallback for subpages without the hamburger (pricing / compare / docs):
     keep the prior behaviour — hide the secondary links, leave Sign in + the
     CTA reachable — until the hamburger is rolled out to them too. */
  .site-header:not(:has(.nav-toggle)) .site-nav a:not(.nav-cta):not(.nav-signin) {
    display: none;
  }

  /* ---------- Hero — confident type, single column, full-width CTAs ---------- */
  .hero { padding: 52px 0 8px; }
  .hero h1 { font-size: clamp(32px, 8.6vw, 44px); letter-spacing: -0.03em; max-width: 16ch; }
  .hero-subhead { font-size: 16px; margin-top: 18px; max-width: 44ch; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 26px; }
  .hero-actions .btn { width: 100%; height: 50px; font-size: 15px; justify-content: center; }
  .hero-stage { margin-top: 40px; }

  /* ---------- Product shots: a legible top-crop, not a shrunk-to-nothing wall.
     object-fit: cover at a fixed height + top anchor zooms each dashboard so the
     meaningful top region (titles, headline numbers, first rows) reads cleanly,
     instead of a 16:9 screenshot squished into ~190px. The Stripe pattern. ---- */
  .appframe-body { max-height: none; }
  .appframe-body img {
    height: 340px;
    object-fit: cover;
    object-position: top center;
  }
  .hero-frame-shot .appframe-body { max-height: none; }
  .hero-frame-shot .appframe-body img { height: 300px; }

  /* ---------- Section type + rhythm ---------- */
  .product { padding: 52px 0; }
  .product-head { margin-bottom: 28px; }
  .product-head h2 { font-size: clamp(26px, 7.4vw, 34px); }
  .product-head p { font-size: 15.5px; }
  .reel-grid { padding: 44px 0; }
  .reel-copy h2 { font-size: clamp(28px, 8.6vw, 40px); }
  .reel-copy > p { font-size: 15.5px; }
  .reel-note { font-size: 13.5px; }
  .prove .product-head h2 { font-size: clamp(26px, 7.4vw, 34px); }
  .final-cta { padding: 44px 22px; }
  .final-cta h2 { font-size: clamp(26px, 7.5vw, 34px); }
  .final-cta .hero-actions { flex-direction: column; align-items: stretch; }
  .final-cta .hero-actions .btn { width: 100%; }

  .pillars {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand-block {
    grid-column: 1 / -1;
  }
  .mini-dash {
    grid-template-columns: 1fr;
    height: auto;
  }
  .mini-side {
    display: none;
  }
  .mini-grid {
    grid-template-columns: 1fr;
  }
  .mini-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  .compare table {
    font-size: 12px;
  }
  .compare th, .compare td {
    padding: 10px 12px;
  }
  .final-cta {
    padding: 40px 22px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE STRIPE-GRADE — P0-A foundation + homepage overflow / touch / text.
   80% of traffic is mobile; zero horizontal scroll at 375px is the launch bar.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Tap targets ≥44px (base .btn was 36px, .nav-toggle 42px). */
  .btn { min-height: 44px; }
  .nav-toggle { width: 44px; height: 44px; }
  /* Overflow sources — belt-and-braces with the root overflow-x guard. */
  .verify-band-text { min-width: 0; }
  .hero::before { inset: 0; }
  /* Text floor — Stripe bottoms out around 12px. */
  .eyebrow { font-size: 13px; }
  .hero-eyebrow, .mini-top, .code-head { font-size: 13px; }
}
@media (max-width: 480px) {
  /* The 200×200 decorative pseudo-elements that overflowed the deck cards. */
  .deck-card::before { width: 120px; height: 120px; }
}

/* P2 — blanket reduced-motion: honour the OS setting everywhere (covers the
   .btn-accent shine, .product-duo hover, parallax, etc. that weren't wrapped). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Cross-platform identity — the moat visual (3 anon IDs → one customer) ── */
.idstitch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  max-width: 860px;
  margin: 44px auto 0;
  padding: 28px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: 0 1px 2px rgba(23, 19, 17, 0.04), 0 18px 44px -30px rgba(23, 19, 17, 0.28);
}
.idstitch-sources { display: flex; flex-direction: column; gap: 14px; }
.idstitch-src {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--ds-surface-soft);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
}
.idstitch-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.idstitch-src[data-p="web"] .idstitch-dot { background: #5b6470; }
.idstitch-src[data-p="ios"] .idstitch-dot { background: var(--ds-text); }
.idstitch-src[data-p="and"] .idstitch-dot { background: var(--ds-success, #1f9d55); }
.idstitch-meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.idstitch-meta b { font-size: 14px; color: var(--ds-text); font-weight: 600; }
.idstitch-meta i {
  font-style: normal; font-size: 12px; color: var(--ds-muted-soft);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.idstitch-wire { width: 130px; height: 200px; align-self: stretch; }
.idstitch-wire path { stroke: var(--ds-accent); stroke-width: 1.6; opacity: 0.5; }
.idstitch-node { fill: var(--ds-accent); }
.idstitch-customer {
  padding: 18px;
  background: var(--ds-bg-soft);
  border: 1px solid var(--ds-accent-soft);
  border-radius: var(--ds-radius);
  box-shadow: 0 14px 34px -24px rgba(238, 79, 37, 0.45);
}
.idstitch-cust-head { display: flex; align-items: center; gap: 12px; }
.idstitch-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--ds-accent-soft); color: var(--ds-accent-strong);
  font-weight: 700; font-size: 13px; letter-spacing: 0.02em;
}
.idstitch-customer .idstitch-meta b { font-size: 15px; }
.idstitch-customer .idstitch-meta i { font-family: var(--ds-sans); color: var(--ds-muted); }
.idstitch-signals { display: flex; gap: 8px; margin: 16px 0 12px; }
.idstitch-sig {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 8px 4px; border-radius: var(--ds-radius-sm);
  background: var(--ds-surface); border: 1px solid var(--ds-border);
}
.idstitch-sig b { font-size: 15px; font-weight: 700; color: var(--ds-text); }
.idstitch-sig i { font-style: normal; font-size: 11px; color: var(--ds-muted-soft); }
.idstitch-sig[data-s="rev"] b { color: var(--ds-success, #1f9d55); }
.idstitch-sig[data-s="err"] b { color: var(--ds-accent-red); }
.idstitch-tl { margin: 0; font-size: 12.5px; color: var(--ds-muted); text-align: center; }
@media (max-width: 720px) {
  .idstitch { grid-template-columns: 1fr; gap: 14px; padding: 20px; }
  .idstitch-wire { display: none; }
}

/* --- "In production at" line (homepage, between identity and the closing CTA).
   One sentence, not a logo wall: the claim is that the identity stitch above is
   running somewhere real whose install you can go and read. --- */
.in-production {
  width: min(calc(100% - 32px), var(--max-width));
  margin: 0 auto;
  padding: clamp(18px, 3vw, 30px) 0 0;
  text-align: center;
  font-size: clamp(14px, 1.3vw, 15.5px);
  line-height: 1.6;
  color: var(--ds-muted);
}

.in-production a {
  color: var(--ds-accent-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--ds-accent-strong) 42%, transparent);
  transition: text-decoration-color 120ms ease;
}

.in-production a:hover {
  text-decoration-color: var(--ds-accent-strong);
}

.in-production a:focus-visible {
  outline: 2px solid var(--ds-accent-strong);
  outline-offset: 2px;
  border-radius: 2px;
}