/* ===== Shared base ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }

/* ===== Direction A: Editorial / Audit Report ===== */
.dirA {
  --paper: #f3efe7;
  --paper-2: #ebe5d9;
  --rule: #1a1814;
  --ink: #14110d;
  --ink-soft: #4a4540;
  --ink-faint: #8b857c;
  --amber: #c2410c;        /* risk */
  --amber-bg: #f4d9b8;
  --red: #8a0f0f;          /* stalled */
  --green: #1f5132;        /* verified */
  --serif: "Source Serif 4", "Source Serif Pro", "Iowan Old Style", "Charter", Georgia, serif;
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  width: 100%;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  overflow-y: visible;
}

/* Paper grain overlay */
.dirA::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(20,17,13,0.035) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
  z-index: 1;
}
.dirA > * { position: relative; z-index: 2; }

.dirA .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dirA .label-amber { color: var(--amber); }
.dirA .label-red   { color: var(--red); }

/* ===== Direction A: Header ===== */
.dirA-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 22px 56px;
  border-bottom: 1px solid var(--rule);
}
.dirA-wordmark {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.dirA-wordmark .logo {
  width: 26px; height: 26px;
  background: var(--ink);
  position: relative;
}
.dirA-wordmark .logo::after {
  content: "";
  position: absolute;
  left: 6px; top: 6px; width: 14px; height: 14px;
  border: 1.5px solid var(--paper);
  border-right: none; border-bottom: none;
}
.dirA-nav {
  display: flex; gap: 30px; justify-self: center;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft);
}
.dirA-nav a:hover { color: var(--ink); }
.dirA-cta-mini {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 10px 16px;
  border: 1px solid var(--rule);
  background: var(--ink); color: var(--paper);
  transition: background .15s;
}
.dirA-cta-mini:hover { background: var(--amber); border-color: var(--amber); }

/* ===== Direction A: Issue Bar ===== */
.dirA-issue {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 56px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft);
}
.dirA-issue .live::before {
  content: ""; display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber);
  margin-right: 8px;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.35 } }

/* ===== Direction A: Hero ===== */
.dirA-hero {
  padding: 64px 56px 56px;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 64px;
  align-items: end;
}
.dirA-hero-eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 28px;
}
.dirA-hero-eyebrow .dot {
  width: 6px; height: 6px; background: var(--amber); border-radius: 50%;
}
.dirA-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 84px;
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0 0 28px;
  text-wrap: balance;
}
.dirA-hero h1 em {
  font-style: italic;
  color: var(--amber);
}
.dirA-hero h1 .strike {
  text-decoration: line-through;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 3px;
  color: var(--ink-soft);
}
.dirA-hero-deck {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0 0 40px;
  font-style: italic;
}
.dirA-hero-actions {
  display: flex; gap: 14px; align-items: center;
}
.dirA-cta-primary {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  padding: 16px 24px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  display: inline-flex; align-items: center; gap: 12px;
  transition: all .15s;
}
.dirA-cta-primary:hover { background: var(--amber); border-color: var(--amber); }
.dirA-cta-primary svg { transition: transform .15s; }
.dirA-cta-primary:hover svg { transform: translateX(3px); }
.dirA-cta-secondary {
  font-family: var(--sans);
  font-size: 14px;
  padding: 16px 0;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  display: inline-flex; gap: 8px;
}
.dirA-cta-secondary:hover { color: var(--amber); border-color: var(--amber); }

/* Hero side: the ledger */
.dirA-ledger {
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 0;
  font-family: var(--mono);
  font-size: 13px;
}
.dirA-ledger-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.dirA-ledger-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(26,24,20,0.18);
  font-size: 13px;
}
.dirA-ledger-row:last-child { border-bottom: none; }
.dirA-ledger-row .deal { color: var(--ink); }
.dirA-ledger-row .meta { color: var(--ink-faint); font-size: 11px; }
.dirA-ledger-row .status {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid currentColor;
}
.dirA-ledger-row.stall .status { color: var(--amber); background: var(--amber-bg); border-color: var(--amber); }
.dirA-ledger-row.dead  .status { color: var(--paper); background: var(--red); border-color: var(--red); }
.dirA-ledger-row.live  .status { color: var(--green); border-color: var(--green); }
.dirA-ledger-row .amt { color: var(--ink); font-feature-settings: "tnum"; }
.dirA-ledger-foot {
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  display: flex; justify-content: space-between;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}

/* ===== Direction A: Stat Strip ===== */
.dirA-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--rule);
}
.dirA-stat {
  padding: 36px 32px;
  border-right: 1px solid var(--rule);
  position: relative;
}
.dirA-stat:last-child { border-right: none; }
.dirA-stat-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.dirA-stat-value {
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 10px;
}
.dirA-stat-value .accent { color: var(--amber); }
.dirA-stat-note {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.4;
  max-width: 240px;
}

/* ===== Direction A: Diagnosis Section ===== */
.dirA-diag {
  padding: 88px 56px;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 56px;
}
.dirA-section-head .label { margin-bottom: 18px; display: block; }
.dirA-section-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.dirA-section-head p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}

.dirA-diag-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-left: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
}
.dirA-diag-item {
  padding: 28px 28px 32px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.dirA-diag-item .num {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.dirA-diag-item .quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 16px;
}
.dirA-diag-item .reality {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--amber);
  letter-spacing: 0.04em;
  border-top: 1px dashed var(--amber);
  padding-top: 14px;
}
.dirA-diag-item .reality::before {
  content: "REALITY  ";
  color: var(--ink);
  letter-spacing: 0.14em;
  margin-right: 6px;
}

/* ===== Direction A: Mechanism (Detect / Force / Verify) ===== */
.dirA-mech {
  padding: 88px 56px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.dirA-mech-head {
  display: flex; justify-content: space-between; align-items: end;
  margin-bottom: 56px;
}
.dirA-mech-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 12px 0 0;
  max-width: 720px;
}
.dirA-mech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.dirA-mech-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 32px;
  position: relative;
  min-height: 360px;
  display: flex; flex-direction: column;
}
.dirA-mech-card .step {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin-bottom: 28px;
}
.dirA-mech-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.dirA-mech-card p {
  font-size: 14px; line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 auto;
}
.dirA-mech-card .visual {
  margin-top: 32px;
  font-family: var(--mono);
  font-size: 11px;
}
.dirA-mech-card .vrow {
  display: flex; justify-content: space-between;
  padding: 8px 0;
  border-top: 1px solid rgba(26,24,20,0.15);
}
.dirA-mech-card .vrow:last-child { border-bottom: 1px solid rgba(26,24,20,0.15); }
.dirA-mech-card .vrow .k { color: var(--ink-soft); }
.dirA-mech-card .vrow .v { color: var(--ink); }
.dirA-mech-card .vrow.bad .v { color: var(--amber); }
.dirA-mech-card .vrow.good .v { color: var(--green); }

/* ===== Direction A: Stack Positioning ===== */
.dirA-stack {
  padding: 88px 56px;
  border-bottom: 1px solid var(--rule);
}
.dirA-stack h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 18px 0 56px;
  max-width: 800px;
}
.dirA-stack-table {
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 13px;
}
.dirA-stack-row {
  display: grid;
  grid-template-columns: 220px 1fr 1fr 1fr;
  border-bottom: 1px solid var(--rule);
}
.dirA-stack-row:last-child { border-bottom: none; }
.dirA-stack-row > div {
  padding: 22px 24px;
  border-right: 1px solid var(--rule);
}
.dirA-stack-row > div:last-child { border-right: none; }
.dirA-stack-row.head {
  background: var(--ink); color: var(--paper);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
}
.dirA-stack-row.head > div { border-color: rgba(243,239,231,0.2); }
.dirA-stack-row .cat {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
}
.dirA-stack-row.nudge { background: var(--paper-2); }
.dirA-stack-row.nudge .cat { color: var(--amber); font-style: normal; font-weight: 600; font-family: var(--sans); letter-spacing: 0.02em; }

/* ===== Direction A: Quote / Footer CTA ===== */
.dirA-quote {
  padding: 100px 56px;
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
.dirA-quote blockquote {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 920px;
  margin: 0 auto 32px;
  text-wrap: balance;
}
.dirA-quote blockquote em { color: var(--amber); font-style: italic; }
.dirA-quote .attribution {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
}

.dirA-final {
  padding: 88px 56px;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 56px;
  align-items: end;
}
.dirA-final h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 16px 0 0;
  max-width: 720px;
}
.dirA-final h2 em { color: var(--amber); font-style: italic; }
.dirA-final .label { color: rgba(243,239,231,0.6); }
.dirA-final-cta {
  display: flex; flex-direction: column; gap: 12px; align-items: stretch;
}
.dirA-final-cta a {
  padding: 18px 28px;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 24px;
  min-width: 280px;
  transition: background .15s;
}
.dirA-final-cta a:hover { background: var(--amber); color: var(--paper); }
.dirA-final-cta a.ghost {
  background: transparent; color: var(--paper);
  border: 1px solid rgba(243,239,231,0.3);
}
.dirA-final-cta a.ghost:hover { border-color: var(--amber); color: var(--amber); background: transparent; }

.dirA-foot {
  padding: 24px 56px;
  display: flex; justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper);
}

/* ===== Direction B: Manifesto ===== */
.dirB {
  --bg: #f6f5f2;
  --bg-2: #ecebe6;
  --ink: #0e0d0b;
  --ink-soft: #5a5852;
  --ink-faint: #9a978f;
  --rule: #0e0d0b;
  --red: #e02e1a;
  --red-deep: #a01a0a;
  --amber: #e89924;
  --green: #1f5132;
  --display: "Inter Tight", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  width: 1280px;
  position: relative;
  overflow: hidden;
}

.dirB .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ===== Direction B: Deck layout =====
   The track is a native vertical scroller with CSS scroll-snap. Each section
   is exactly viewport-minus-header tall and snaps to the top. JS smooth-
   scrolls the track to the next/previous section on wheel/key/swipe. */
html, body { height: 100%; overflow: hidden; margin: 0; padding: 0; }
.dirB.dirB-deck {
  width: 100%;
  height: 100vh;
  max-width: none;
  overflow: hidden;
  position: relative;
}
.dirB.dirB-deck .dirB-track {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  /* No scroll-snap — JS (useDeckNav) drives section transitions with
     scrollTo({behavior:'smooth'}). CSS scroll-snap fights that smooth
     scroll and produces visible vibration at section boundaries. */
  scroll-behavior: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  z-index: 1;
}
.dirB.dirB-deck .dirB-track::-webkit-scrollbar { width: 0; height: 0; display: none; }
.dirB.dirB-deck .dirB-track > section {
  width: 100%;
  min-height: calc(100vh - 64px);
}

/* ===== Direction B: Header — editorial, sharp ===== */
.dirB-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 64px;
  z-index: 60;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 0 32px;
  margin: 0;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.dirB.mono.dark .dirB-header {
  background: rgba(12,12,12,0.72);
  border-bottom-color: rgba(245,245,245,0.10);
}
.dirB-header .dirB-wordmark {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
}
.dirB-header .dirB-wordmark .dirB-logo-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.dirB-header .dirB-wordmark .dirB-logo-dots i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.dirB-header .dirB-wordmark .dirB-logo-dots i:nth-child(1) { opacity: 0.22; }
.dirB-header .dirB-wordmark .dirB-logo-dots i:nth-child(2) { opacity: 0.5; }
.dirB-header .dirB-wordmark .dirB-logo-dots i:nth-child(3) { opacity: 1; }
.dirB-header .dirB-wordmark-text { line-height: 1; }
.dirB-header .dirB-wordmark .reg {
  font-size: 0.42em;
  font-weight: 500;
  margin-left: 1px;
  opacity: 0.55;
  vertical-align: super;
}

.dirB-header .dirB-nav {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding: 0;
  border: 0;
  background: transparent;
}
.dirB-nav-link {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 22px 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.005em;
  line-height: 1;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  background: transparent;
  border: 0;
  border-radius: 0;
  transition: color .15s;
  cursor: pointer;
}
.dirB-nav-link:hover { color: var(--ink); }
.dirB-nav-link.is-active { color: var(--ink); }
.dirB-nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1.5px;
  background: var(--ink);
}
.dirB-nav-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  opacity: 0.6;
  font-feature-settings: "tnum" 1;
}
.dirB.mono.dark .dirB-nav-link { color: rgba(245,245,245,0.55); }
.dirB.mono.dark .dirB-nav-link:hover { color: #f5f5f5; }
.dirB.mono.dark .dirB-nav-link.is-active { color: #f5f5f5; }
.dirB.mono.dark .dirB-nav-link.is-active::after { background: #f5f5f5; }

.dirB-header-tools {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.dirB-header-tools .dirB-cta-mini {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 11px 18px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  border-radius: 0;
  transition: background .15s, color .15s;
}
.dirB-header-tools .dirB-cta-mini:hover {
  background: transparent;
  color: var(--ink);
}
.dirB.mono.dark .dirB-header-tools .dirB-cta-mini {
  border-color: #f5f5f5;
  background: #f5f5f5;
  color: #0a0a0a;
}
.dirB.mono.dark .dirB-header-tools .dirB-cta-mini:hover {
  background: transparent;
  color: #f5f5f5;
}
.dirB-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  background: transparent;
  color: var(--ink);
  border-radius: 0;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  font-family: var(--mono);
}
.dirB-theme-toggle:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.dirB.mono.dark .dirB-theme-toggle { border-color: rgba(245,245,245,0.25); }
.dirB.mono.dark .dirB-theme-toggle:hover {
  background: #f5f5f5;
  color: #0a0a0a;
  border-color: #f5f5f5;
}
@media (max-width: 900px) {
  .dirB-header { padding: 0 20px; gap: 16px; }
  .dirB-header .dirB-nav { display: none; }
}
@media (max-width: 720px) {
  .dirB-header { padding: 0 16px; gap: 12px; }
  .dirB-header-tools .dirB-cta-mini { padding: 9px 14px; font-size: 10px; }
}

/* ===== Deck dot indicator on the right edge ===== */
.dirB-deck-dots {
  position: fixed;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 55;
  pointer-events: auto;
}
.dirB-deck-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  padding: 0;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}
.dirB-deck-dot:hover { border-color: var(--ink); }
.dirB-deck-dot.is-active {
  background: var(--ink);
  border-color: var(--ink);
  transform: scale(1.25);
}
.dirB.mono.dark .dirB-deck-dot { border-color: rgba(245,245,245,0.35); }
.dirB.mono.dark .dirB-deck-dot:hover { border-color: #f5f5f5; }
.dirB.mono.dark .dirB-deck-dot.is-active { background: #f5f5f5; border-color: #f5f5f5; }
@media (max-width: 720px) {
  .dirB-deck-dots { right: 12px; gap: 10px; }
  .dirB-deck-dot { width: 7px; height: 7px; }
}
.dirB-wordmark {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.dirB-wordmark:hover { opacity: 0.8; }
/* Three-dot brand mark — uses currentColor so it adapts to its surface */
.dirB-logo-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  line-height: 1;
}
.dirB-logo-dots i {
  display: block;
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: currentColor;
}
.dirB-logo-dots i:nth-child(1) { opacity: 0.18; }
.dirB-logo-dots i:nth-child(2) { opacity: 0.42; }
.dirB-logo-dots i:nth-child(3) { opacity: 1; }
.dirB-wordmark .reg,
.dirB-stack-row.nudge .reg {
  font-size: 0.45em;
  font-weight: 500;
  vertical-align: super;
  margin-left: 0.05em;
  opacity: 0.7;
}
/* Header wordmark — tighten the dots a touch */
.dirB-wordmark .dirB-logo-dots { gap: 4px; margin-right: 4px; }
.dirB-wordmark .dirB-logo-dots i { width: 8px; height: 8px; }
/* Stack "Nudge →" row — keep the cat as a horizontal flex of dots + brand + arrow */
.dirB-stack-row.nudge .cat {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
}
.dirB-stack-row.nudge .cat .dirB-logo-dots {
  align-self: center;
  gap: 5px;
}
.dirB-stack-row.nudge .cat .dirB-logo-dots i {
  width: 10px; height: 10px;
}
.dirB-stack-row.nudge .cat .arrow { opacity: 0.55; font-weight: 500; }

/* ===== Direction B: Hero ===== */
.dirB-hero {
  padding: 60px 48px 80px;
  position: relative;
}
.dirB-hero-tag {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--ink);
  border-radius: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 36px;
}
.dirB-hero-tag .blip {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(224,46,26,0.18);
  animation: pulse 1.6s ease-in-out infinite;
}

/* Editorial eyebrow — quiet typographic hierarchy, no pill, no animated dot */
.dirB-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
  color: var(--ink);
  line-height: 1;
}
.dirB-hero-eyebrow .rule {
  display: block;
  width: 36px;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
  flex: 0 0 auto;
}
.dirB-hero-eyebrow .cat {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.dirB-hero-eyebrow .sep {
  font-family: var(--display);
  font-weight: 300;
  font-size: 14px;
  opacity: 0.32;
  transform: translateY(-1px);
}
.dirB-hero-eyebrow .desc {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  opacity: 0.78;
}
.dirB-hero h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 132px;
  line-height: 0.86;
  letter-spacing: -0.045em;
  margin: 0 0 36px;
  max-width: 1100px;
  text-wrap: balance;
}
.dirB-hero h1 .red { color: var(--red); }
.dirB-hero h1 .strike {
  position: relative;
  color: var(--ink-faint);
}
.dirB-hero h1 .strike::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%;
  top: 52%;
  height: 8px;
  background: var(--red);
  transform: rotate(-2deg);
}
.dirB-hero-deck {
  font-family: var(--display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.35;
  color: var(--ink-soft);
  max-width: 720px;
  margin: 0 0 44px;
  letter-spacing: -0.01em;
}
.dirB-hero-deck strong { color: var(--ink); font-weight: 600; }
.dirB-hero-actions { display: flex; gap: 14px; align-items: center; margin-bottom: 0; }
.dirB-cta-primary {
  font-size: 15px; font-weight: 600;
  padding: 16px 26px;
  background: var(--ink); color: var(--bg);
  border-radius: 0;
  display: inline-flex; align-items: center; gap: 14px;
  transition: all .15s;
}
.dirB-cta-primary:hover { background: var(--red); transform: translateY(-1px); }
.dirB-cta-secondary {
  font-size: 15px; font-weight: 500;
  padding: 18px 24px;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
}
.dirB-cta-secondary:hover { color: var(--red); }
.dirB-cta-secondary .arrow { transition: transform .15s; }
.dirB-cta-secondary:hover .arrow { transform: translateX(3px); }

/* ===== Direction B: The Lie / The Truth ===== */
.dirB-truth {
  padding: 96px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--ink);
}
.dirB-truth-side {
  padding: 0 32px;
  border-right: 1px solid var(--ink);
}
.dirB-truth-side:last-child { border-right: none; padding-right: 0; }
.dirB-truth-side:first-child { padding-left: 0; }
.dirB-truth-side .tag {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 28px;
  display: inline-block;
  padding: 6px 12px;
}
.dirB-truth-side.lie .tag { background: var(--ink); color: var(--bg); }
.dirB-truth-side.real .tag { background: var(--red); color: var(--bg); }
.dirB-truth-side h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 56px;
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0 0 32px;
}
.dirB-truth-side .real h3 { color: var(--red); }
.dirB-truth-side ul {
  list-style: none; padding: 0; margin: 0;
}
.dirB-truth-side li {
  padding: 18px 0;
  border-top: 1px solid var(--ink);
  font-size: 19px;
  line-height: 1.4;
  display: flex; gap: 18px;
  font-weight: 500;
}
.dirB-truth-side li:last-child { border-bottom: 1px solid var(--ink); }
.dirB-truth-side li .num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  padding-top: 4px;
  flex-shrink: 0;
  width: 28px;
}
.dirB-truth-side.real li .num { color: var(--red); }

/* ===== Direction B: Stat ===== */
/* ===== Big-stat section (63.8%) — single-viewport layout =====
   Designed to fit one 100vh swipe panel without internal scroll:
     header                · eyebrow + H2 (typewriter)
     row (3 cols)          · giant 63.8% │ copy + cascade │ deal grid + legend
     stats (3 cols inline) · 16.8 days · 91.8% · citation

   All emphasis colors use explicit hex (no var(--red)) inside .dirB.mono.dark
   to dodge cascade fights with the global mono-dark theme. */

.dirB-bigstat {
  padding: 100px 48px 48px;
  background: #14110d;
  color: #f6f5f2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-content: start;
}
.dirB-bigstat > * { max-width: 1280px; width: 100%; margin-left: auto; margin-right: auto; }

/* Header */
.dirB-bigstat-head { padding: 0; }
.dirB-bigstat-head .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246,245,242,0.55);
}
.dirB-bigstat-head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 12px 0 16px;
  max-width: 920px;
}

/* The punch row — 3 columns: giant number │ copy │ visualization */
.dirB-bigstat-row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(260px, 1fr) minmax(0, auto);
  gap: 48px;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid rgba(246,245,242,0.18);
  border-bottom: 1px solid rgba(246,245,242,0.18);
}

.dirB-bigstat-row .punch-num {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(140px, 14vw, 200px);
  line-height: 0.82;
  letter-spacing: -0.06em;
  color: #e02e1a;
  font-feature-settings: "tnum" 1;
  display: inline-flex;
  align-items: flex-start;
  margin: 0;
}
.dirB-bigstat-row .punch-num .countup { display: inline-block; min-width: 2.4em; }
.dirB-bigstat-row .punch-num sup {
  font-size: 0.32em;
  vertical-align: top;
  line-height: 1;
  margin-left: 4px;
  margin-top: 0.08em;
}

.dirB-bigstat-row .punch-copy { display: grid; gap: 14px; max-width: 460px; }
.dirB-bigstat-row .punch-line {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.22;
  letter-spacing: -0.015em;
  margin: 0;
  color: #f6f5f2;
}
.dirB-bigstat-row .punch-line em {
  font-style: normal;
  color: #e02e1a;
  font-weight: 700;
}
.dirB-bigstat-row .punch-cascade {
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(246,245,242,0.18);
  display: grid;
  gap: 4px;
}
.dirB-bigstat-row .punch-cascade li {
  font-family: var(--display);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.25;
  letter-spacing: -0.012em;
  font-weight: 500;
  color: rgba(246,245,242,0.7);
}
.dirB-bigstat-row .punch-cascade li:nth-child(2) { color: rgba(246,245,242,0.85); }
.dirB-bigstat-row .punch-cascade li:last-child { color: #f6f5f2; font-weight: 700; }
.dirB-bigstat-row .punch-cascade li:last-child b { color: #e02e1a; font-weight: 700; }

/* Visualization column — caption + grid + legend */
.dirB-bigstat-row .punch-viz { display: grid; gap: 10px; justify-items: start; }
.dirB-bigstat-row .viz-caption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246,245,242,0.55);
}

.deal-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(246,245,242,0.16);
  background: rgba(246,245,242,0.02);
  width: clamp(240px, 22vw, 320px);
}
.deal-cell {
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  background: transparent;
  border: 1px solid rgba(246,245,242,0.28);
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.deal-cell.is-dead {
  background: #e02e1a;
  border-color: #e02e1a;
  transform: scale(0.92);
}

.dirB-bigstat-row .viz-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246,245,242,0.6);
}
.dirB-bigstat-row .viz-legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(246,245,242,0.4);
}
.swatch.swatch-dead { background: #e02e1a; border-color: #e02e1a; }
.swatch.swatch-alive { background: transparent; }

/* Bottom stats strip — 3 inline cells (2 stats + citation) */
.dirB-bigstat-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: end;
}
.dirB-bigstat-stats li {
  display: grid;
  grid-template-rows: auto auto;
  gap: 4px;
  padding-right: 16px;
  border-right: 1px solid rgba(246,245,242,0.10);
}
.dirB-bigstat-stats li:last-child { border-right: 0; }
.dirB-bigstat-stats b {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: #f6f5f2;
  font-feature-settings: "tnum" 1;
}
.dirB-bigstat-stats .unit {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246,245,242,0.5);
  margin-left: 6px;
}
.dirB-bigstat-stats .desc {
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(246,245,242,0.7);
  max-width: 320px;
}
/* Diagnosis slot — third stat is a qualitative finding (no number).
   Uses the same display-type b + desc skeleton as the numerical stats
   so the row reads consistently: number · number · word. */
.dirB-bigstat-stats li.diagnosis b {
  /* Slightly smaller than the numerical b's because words are wider than
     2-3 digit numerals; this keeps the row visually balanced. */
  font-size: clamp(24px, 2.6vw, 32px);
  color: #e02e1a;
  letter-spacing: -0.025em;
  font-feature-settings: normal;
}

/* Source attribution — discreet line under the stats. Names the report
   without quoting its specific numbers; the page's own stats stand on
   their own, the report is the credibility anchor. */
.dirB-bigstat-source {
  margin: 22px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(246,245,242,0.4);
  line-height: 1.5;
}
.dirB-bigstat-source em {
  font-style: italic;
  color: rgba(246,245,242,0.55);
  text-transform: none;
  letter-spacing: 0.04em;
}

/* Dark variant — unified with the rest of the mono-dark site.
   No background inversion: the page's mono-dark gradient shows through.
   Base CSS already targets a dark surface (light text, explicit #e02e1a for
   emphasis), so the only override we need is making the section transparent
   so the page surface continues underneath. */
.dirB.mono.dark .dirB-bigstat {
  background: transparent;
}

@media (max-width: 1100px) {
  .dirB-bigstat { padding: 72px 24px 32px; gap: 20px; }
  .dirB-bigstat-head h2 { font-size: 26px; }
  .dirB-bigstat-row {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px 0;
  }
  .dirB-bigstat-row .punch-num { font-size: clamp(110px, 32vw, 160px); }
  .dirB-bigstat-row .punch-viz { justify-items: stretch; }
  .deal-grid { width: 100%; max-width: 100%; }
  .dirB-bigstat-stats {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .dirB-bigstat-stats li {
    border-right: 0;
    padding-right: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(246,245,242,0.10);
  }
  .dirB-bigstat-stats li:last-child { border-bottom: 0; padding-bottom: 0; }
  .dirB.mono.dark .dirB-bigstat-stats li { border-bottom-color: rgba(10,10,10,0.10); }
}

/* ===== Direction B: Mechanism ===== */
.dirB-mech {
  padding: 120px 48px 100px;
}
.dirB-mech-head { margin-bottom: 64px; max-width: 800px; }
.dirB-mech-head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 12px 0 16px;
}
.dirB-mech-head h2 .red { color: var(--red); }
.dirB-mech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
}
.dirB-mech-step {
  padding: 36px 32px 40px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  position: relative;
  min-height: 380px;
  display: flex; flex-direction: column;
}
.dirB-mech-step:last-child { border-right: none; }
.dirB-mech-step .num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  margin-bottom: 28px;
  color: var(--red);
}
.dirB-mech-step h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 56px;
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0 0 16px;
}
.dirB-mech-step p {
  font-size: 16px; line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 auto;
  max-width: 320px;
}
.dirB-mech-step .demo {
  margin-top: 36px;
  background: var(--bg-2);
  border: 1px solid var(--ink);
  padding: 16px;
  font-family: var(--mono);
  font-size: 12px;
}
.dirB-mech-step .demo .row { display: flex; justify-content: space-between; padding: 5px 0; }
.dirB-mech-step .demo .row .v.bad { color: var(--red); font-weight: 600; }
.dirB-mech-step .demo .row .v.good { color: var(--green); font-weight: 600; }
.dirB-mech-step .demo .row .k { color: var(--ink-soft); }

/* ===== Direction B: Stack table ===== */
.dirB-stack {
  padding: 120px 48px;
  background: var(--bg-2);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.dirB-stack h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 12px 0 20px;
  max-width: 900px;
}
.dirB-stack h2 .red { color: var(--red); }
.dirB-stack-sub {
  max-width: 760px;
  margin: 0 0 44px;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.5;
}
/* ===== Stack · layered tower + data spine =====
   Two columns side by side:
     - tower (left):   the 5 layer slabs, Nudge on top → CRM on bottom
     - spine (right):  vertical track with labeled tokens streaming down,
                       showing the actual field names Nudge writes back to CRM.
   The spine replaces the previous SVG-curve loop. It's a literal, content-
   carrying loop: you see *what* gets written, not just an abstract dot. */
.dirB-stack-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  max-width: 1100px;
  /* Left-align with the section title rather than centering inside the
     section width. The header (label + h2) sits flush left at the section's
     48px padding edge; the frame should follow the same edge. */
  margin: 0;
}
.seller-flow {
  padding: 22px 0 18px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.seller-flow-label {
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.seller-flow-lane {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.seller-flow-node {
  font-family: var(--display);
  font-size: clamp(22px, 2.25vw, 30px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
  white-space: nowrap;
}
.seller-flow-arrow {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--ink-faint);
  flex: 0 0 auto;
}
.seller-flow-nudge {
  position: relative;
  display: grid;
  gap: 4px;
  flex: 0 0 auto;
  padding: 0 4px 8px;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: translateY(-2px);
}
.seller-flow-nudge:before {
  display: none;
}
.seller-flow-nudge span {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.seller-flow-nudge strong {
  font-family: var(--display);
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink);
  white-space: nowrap;
}
.seller-flow-note {
  max-width: 760px;
  margin: 22px 0 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.5;
}
.seller-flow-context {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.seller-flow-context strong {
  color: var(--ink);
  font-weight: 700;
}

/* ===== StackReel — animated horizontal walk-through of 5 moments =====
   Pills above mark each step; the active pill carries a thin progress bar
   that fills over the interval. Below, the active slide is foregrounded
   while past/future slides translate horizontally and fade. */
.stack-reel {
  display: grid;
  gap: 32px;
  max-width: 1100px;
}
.stack-reel-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.stack-reel-pill {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 0 4px;
  background: transparent;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  cursor: pointer;
  text-align: left;
  color: color-mix(in srgb, var(--ink) 40%, transparent);
  transition: color .2s;
  font-family: inherit;
}
.stack-reel-pill.is-past { color: color-mix(in srgb, var(--ink) 60%, transparent); }
.stack-reel-pill.is-active { color: var(--ink); }
.reel-pill-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
}
.reel-pill-label {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.reel-pill-prog {
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  background: var(--ink);
  width: 0;
  animation: reelPillFill linear forwards;
}
@keyframes reelPillFill {
  from { width: 0; }
  to { width: 100%; }
}

.stack-reel-stage {
  position: relative;
  min-height: 320px;
  overflow: hidden;
}
.stack-reel-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  column-gap: 60px;
  align-items: center;
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 500ms ease;
  pointer-events: none;
  will-change: transform, opacity;
}
.stack-reel-slide.is-active {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.stack-reel-slide.is-past {
  transform: translateX(-48px);
  opacity: 0;
}
.stack-reel-slide.is-future {
  transform: translateX(48px);
  opacity: 0;
}
.reel-slide-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.reel-slide-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
}
.reel-slide-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.reel-slide-when {
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.reel-slide-where {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.reel-slide-what {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.reel-slide-mock {
  padding-left: 28px;
  border-left: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.reel-mock-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #b32118;
}
.reel-slide-mock p {
  margin: 0;
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink);
}
.reel-mock-row {
  display: flex;
  gap: 14px;
}
.reel-mock-row b {
  min-width: 100px;
  color: var(--ink-faint);
  font-weight: 500;
  letter-spacing: 0.04em;
}

@media (max-width: 900px) {
  .stack-reel-pills { gap: 6px; }
  .reel-pill-label { font-size: 11px; }
  .stack-reel-stage { min-height: 420px; }
  .stack-reel-slide {
    grid-template-columns: 1fr;
    align-content: start;
    row-gap: 22px;
  }
  .reel-slide-mock { padding-left: 22px; }
}

/* Mono-dark adjustments */
.dirB.mono.dark .stack-reel-pill {
  border-top-color: rgba(245,245,245,0.18);
  color: rgba(245,245,245,0.4);
}
.dirB.mono.dark .stack-reel-pill.is-past { color: rgba(245,245,245,0.55); }
.dirB.mono.dark .stack-reel-pill.is-active { color: #f5f5f5; }
.dirB.mono.dark .reel-pill-prog { background: #f5f5f5; }
.dirB.mono.dark .reel-slide-num { color: rgba(245,245,245,0.5); }
.dirB.mono.dark .reel-slide-when { color: #f5f5f5; }
.dirB.mono.dark .reel-slide-where { color: rgba(245,245,245,0.55); }
.dirB.mono.dark .reel-slide-what { color: #f5f5f5; }
.dirB.mono.dark .reel-slide-mock {
  color: rgba(245,245,245,0.7);
  border-left-color: rgba(245,245,245,0.22);
}
.dirB.mono.dark .reel-slide-mock p { color: #f5f5f5; }
.dirB.mono.dark .reel-mock-row b { color: rgba(245,245,245,0.45); }
.dirB.mono.dark .reel-mock-label { color: #d8a14a; }

/* Legacy timeline rules (kept until fully removed) — neutralized. */
.nudge-moments {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 8px 0 8px 40px;
  display: grid;
  gap: 60px;
  max-width: 1100px;
}
.nudge-moments::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: color-mix(in srgb, var(--ink) 25%, transparent);
}
.nudge-moment {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  column-gap: 56px;
  align-items: start;
}
.nudge-moment::before {
  content: "";
  position: absolute;
  left: -33px;
  top: 14px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 4px var(--bg);
}
.nm-num {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.nm-head {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}
.nm-when {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.nm-where {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.nm-what {
  grid-column: 1;
  grid-row: 3;
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 3.1vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.nm-mock {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  padding-left: 22px;
  border-left: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.nm-mock-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #b32118;
}
.nm-mock p {
  margin: 0;
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.42;
  color: var(--ink);
}
.nm-mock-row {
  display: flex;
  gap: 14px;
}
.nm-mock-row b {
  min-width: 100px;
  color: var(--ink-faint);
  font-weight: 500;
  letter-spacing: 0.04em;
}

@media (max-width: 900px) {
  .nudge-moments { padding-left: 32px; gap: 44px; }
  .nudge-moments::before { left: 7px; }
  .nudge-moment {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }
  .nudge-moment::before { left: -25px; }
  .nm-mock {
    grid-column: 1;
    grid-row: auto;
    align-self: start;
    padding-left: 18px;
  }
}

/* Mono-dark adjustments */
.dirB.mono.dark .nudge-moments::before { background: rgba(245,245,245,0.22); }
.dirB.mono.dark .nudge-moment::before {
  background: #f5f5f5;
  box-shadow: 0 0 0 4px var(--bg);
}
.dirB.mono.dark .nm-num { color: rgba(245,245,245,0.5); }
.dirB.mono.dark .nm-when { color: #f5f5f5; }
.dirB.mono.dark .nm-where { color: rgba(245,245,245,0.55); }
.dirB.mono.dark .nm-what { color: #f5f5f5; }
.dirB.mono.dark .nm-mock {
  color: rgba(245,245,245,0.7);
  border-left-color: rgba(245,245,245,0.22);
}
.dirB.mono.dark .nm-mock p { color: #f5f5f5; }
.dirB.mono.dark .nm-mock-row b { color: rgba(245,245,245,0.45); }
.dirB.mono.dark .nm-mock-label { color: #d8a14a; }
.dirB-stack-tower {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.dirB-stack-layer {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: 22px 28px;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  background: color-mix(in srgb, var(--ink) 2%, transparent);
}
.dirB-stack-layer .layer-tier {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
}
.dirB-stack-layer .layer-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  font-feature-settings: "tnum" 1;
}
.dirB-stack-layer .layer-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.dirB-stack-layer .layer-does {
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.dirB-stack-layer .layer-verdict {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* Base layer (CRM) — visually wider/heavier to feel like the foundation */
.dirB-stack-layer.is-base {
  border-bottom-width: 2px;
}

/* Nudge cap — high-contrast, ink-on-bg slab + dot-mark + brand red verdict */
.dirB-stack-layer.is-nudge {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  padding: 28px;
}
.dirB-stack-layer.is-nudge .layer-name {
  color: var(--bg);
  font-size: 32px;
  font-weight: 700;
}
.dirB-stack-layer.is-nudge .reg {
  font-size: 0.45em;
  margin-left: 1px;
  opacity: 0.7;
  vertical-align: super;
}
.dirB-stack-layer.is-nudge .layer-does {
  color: rgba(246,245,242,0.78);
  font-size: 16px;
}
.dirB-stack-layer.is-nudge .layer-verdict {
  color: var(--red);
  font-weight: 700;
}
.dirB-stack-layer.is-nudge .dirB-logo-dots {
  display: inline-flex;
  gap: 4px;
  margin-right: 4px;
  vertical-align: middle;
}
.dirB-stack-layer.is-nudge .dirB-logo-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ===== Stack · data spine =====
   Vertical track with labeled tokens streaming from top (Nudge writes) to
   bottom (CRM). Each token is a mono-coded field name — what Nudge actually
   pushes back to CRM after verifying buyer movement. 5 tokens are staggered
   so 2–3 are visible at once, giving a continuous "writing" sensation. */
.dirB-stack-spine {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: stretch;
  min-height: 480px;
}
.spine-head, .spine-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}
.spine-head-tag, .spine-foot-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.spine-head-arrow, .spine-foot-arrow {
  font-family: var(--mono);
  font-size: 12px;
  color: #e02e1a;
  line-height: 1;
}
.spine-head { padding-bottom: 12px; }
.spine-foot { padding-top: 12px; }

.spine-track {
  position: relative;
  min-height: 320px;
  overflow: hidden;
}
.spine-rail {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(224,46,26,0) 0%,
    rgba(224,46,26,0.45) 12%,
    rgba(224,46,26,0.65) 50%,
    rgba(224,46,26,0.45) 88%,
    rgba(224,46,26,0) 100%);
  transform: translateX(-50%);
}
/* Each token: pinned to center, animates from above the track down past
   the bottom. opacity in/out keeps it from popping. */
.spine-token {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  padding: 6px 12px;
  background: rgba(245,245,245,0.06);
  border: 1px solid rgba(245,245,245,0.20);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #f5f5f5;
  white-space: nowrap;
  opacity: 0;
  animation: spineTokenFlow 5.4s linear infinite;
  box-shadow: 0 0 18px rgba(224,46,26,0.10);
}
.spine-token b {
  font-weight: 700;
  color: #e02e1a;
  margin-left: 4px;
}
.spine-token.t-0 { animation-delay: 0s; }
.spine-token.t-1 { animation-delay: 1.08s; }
.spine-token.t-2 { animation-delay: 2.16s; }
.spine-token.t-3 { animation-delay: 3.24s; }
.spine-token.t-4 { animation-delay: 4.32s; }

@keyframes spineTokenFlow {
  0%   { top: -6%;  opacity: 0; }
  6%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { top: 106%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .spine-token { animation: none; opacity: 1; }
  .spine-token.t-0 { top: 12%; }
  .spine-token.t-1 { top: 32%; }
  .spine-token.t-2 { top: 52%; }
  .spine-token.t-3 { top: 72%; }
  .spine-token.t-4 { top: 92%; }
}

/* Light-mono fallback colors (kept for completeness) */
.dirB.mono:not(.dark) .spine-token {
  background: rgba(20,17,13,0.06);
  border-color: rgba(20,17,13,0.18);
  color: var(--ink);
}
.dirB.mono:not(.dark) .spine-token b { color: #b32118; }
.dirB.mono:not(.dark) .spine-rail {
  background: linear-gradient(180deg,
    rgba(179,33,24,0) 0%,
    rgba(179,33,24,0.45) 12%,
    rgba(179,33,24,0.65) 50%,
    rgba(179,33,24,0.45) 88%,
    rgba(179,33,24,0) 100%);
}

/* Responsive: drop the spine on narrow viewports, show a single label */
@media (max-width: 900px) {
  .dirB-stack-frame { grid-template-columns: 1fr; gap: 24px; }
  .dirB-stack-spine { min-height: 240px; }
  .spine-track { min-height: 180px; }
  .seller-flow-lane {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .seller-flow-arrow {
    transform: rotate(90deg);
  }
  .seller-flow-node,
  .seller-flow-nudge strong {
    white-space: normal;
  }
  .seller-flow-nudge:before {
    display: none;
  }
}

/* Mono-dark overrides */
.dirB.mono.dark .dirB-stack-layer {
  border-color: rgba(245,245,245,0.18);
  background: rgba(245,245,245,0.025);
}
.dirB.mono.dark .dirB-stack-layer .layer-num { color: rgba(245,245,245,0.45); }
.dirB.mono.dark .dirB-stack-layer .layer-name { color: #f5f5f5; }
.dirB.mono.dark .dirB-stack-layer .layer-does { color: rgba(245,245,245,0.65); }
.dirB.mono.dark .dirB-stack-layer .layer-verdict { color: rgba(245,245,245,0.5); }
.dirB.mono.dark .dirB-stack-layer.is-nudge {
  background: #f5f5f5;
  color: #0a0a0a;
  border-color: #f5f5f5;
}
.dirB.mono.dark .dirB-stack-layer.is-nudge .layer-name { color: #0a0a0a; }
.dirB.mono.dark .dirB-stack-layer.is-nudge .layer-does { color: rgba(10,10,10,0.7); }
.dirB.mono.dark .dirB-stack-layer.is-nudge .layer-verdict { color: #d8a14a; }

@media (max-width: 900px) {
  .dirB-stack-layer {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 20px;
  }
  .dirB-stack-layer .layer-verdict { justify-self: start; }
}

/* ===== Direction B: Quote ===== */
.dirB-quote {
  padding: 140px 48px;
  text-align: left;
  max-width: 1100px;
}
.dirB-quote .mark {
  font-family: var(--display);
  font-size: 200px;
  font-weight: 700;
  line-height: 0.7;
  color: var(--red);
  margin-bottom: 0;
}
.dirB-quote blockquote {
  font-family: var(--display);
  font-weight: 600;
  font-size: 60px;
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0 0 32px;
  text-wrap: balance;
}
.dirB-quote .attr {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ===== Direction B: Final CTA ===== */
.dirB-final {
  padding: 120px 48px;
  background: var(--red);
  color: var(--bg);
  position: relative;
  overflow: hidden;
}
.dirB-final::before {
  content: "NUDGE";
  position: absolute;
  bottom: -80px; right: -40px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 480px;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: rgba(255,255,255,0.08);
  pointer-events: none;
}
.dirB-final-content { position: relative; z-index: 2; max-width: 900px; }
.dirB-final h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 100px;
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin: 24px 0 36px;
  text-wrap: balance;
}
.dirB-final p {
  font-size: 21px; line-height: 1.5;
  max-width: 620px;
  margin: 0 0 44px;
  color: rgba(246,245,242,0.85);
}
.dirB-final-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.dirB-final-actions a,
.dirB-final-actions button {
  font-family: inherit;
  font-size: 15px; font-weight: 600;
  padding: 16px 26px;
  border-radius: 0;
  display: inline-flex; align-items: center; gap: 12px;
  transition: all .15s;
  cursor: pointer;
  border: 0;
}
.dirB-final-actions .primary {
  background: var(--ink); color: var(--bg);
  border: 1px solid var(--ink);
}
.dirB-final-actions .primary:hover { background: var(--bg); color: var(--ink); }
.dirB-final-actions .ghost {
  background: transparent; color: var(--bg);
  border: 1px solid var(--bg);
}
.dirB-final-actions .ghost:hover { background: var(--bg); color: var(--red); }

.dirB-foot {
  padding: 28px 48px;
  background: var(--ink);
  color: rgba(246,245,242,0.6);
  display: flex; justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ===== Direction B: Product showcase ===== */
.dirB-product {
  padding: 120px 48px 100px;
  border-top: 1px solid var(--ink);
}
.dirB-product-head { max-width: 920px; margin: 0 0 64px; }
.dirB-product-head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 12px 0 16px;
}
.dirB-product-head h2 .red { color: var(--red); }
.dirB-product-head p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 640px;
}

.dirB-feature {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 56px;
  align-items: center;
  padding: 48px 0;
  border-top: 1px solid var(--ink);
}
.dirB-feature.flip { grid-template-columns: 1fr 420px; }
.dirB-feature.flip .copy { order: 2; }
.dirB-feature .step {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--red);
  margin-bottom: 18px;
}
.dirB-feature h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 0 0 18px;
}
.dirB-feature p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 20px;
}
.dirB-feature ul {
  list-style: none; padding: 0; margin: 0;
}
.dirB-feature li {
  padding: 10px 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.dirB-feature li::before {
  content: "→";
  color: var(--red);
  font-family: var(--display);
}
.dirB-shot {
  border: 1px solid var(--ink);
  background: var(--ink);
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(14,13,11,0.45);
}
.dirB-shot img {
  width: 100%;
  height: auto;
  display: block;
}
.dirB-shot-bar {
  display: flex; gap: 6px;
  padding: 10px 14px;
  background: #1a1a1a;
  border-bottom: 1px solid #2a2a2a;
  align-items: center;
}
.dirB-shot-bar .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #3a3a3a;
}
.dirB-shot-bar .dot:nth-child(1) { background: #ff5f57; }
.dirB-shot-bar .dot:nth-child(2) { background: #febc2e; }
.dirB-shot-bar .dot:nth-child(3) { background: #28c840; }
.dirB-shot-bar .url {
  margin-left: 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.06em;
}

/* ===== Direction B: Product mock placeholders ===== */
.dirB-mock {
  background: #0a0a0a;
  color: #e8e6e0;
  font-family: var(--sans);
  font-size: 12px;
  position: relative;
  display: block;
}
.dirB-mock-bar {
  display: flex; gap: 6px;
  padding: 10px 14px;
  background: #1a1a1a;
  border-bottom: 1px solid #2a2a2a;
  align-items: center;
}
.dirB-mock-bar .dot { width: 10px; height: 10px; border-radius: 50%; }
.dirB-mock-bar .dot:nth-child(1) { background: #ff5f57; }
.dirB-mock-bar .dot:nth-child(2) { background: #febc2e; }
.dirB-mock-bar .dot:nth-child(3) { background: #28c840; }
.dirB-mock-bar .url {
  margin-left: 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(255,255,255,0.45);
}

/* Pipeline mock */
.mock-pipeline { padding: 18px 18px 22px; }
.mock-pipeline .head { display:flex; justify-content:space-between; align-items:center; margin-bottom: 14px; }
.mock-pipeline .head h5 { margin:0; font-size: 13px; font-weight:600; }
.mock-pipeline .head .meta { font-size: 11px; color: rgba(255,255,255,0.45); font-family: var(--mono); }
.mock-pipeline .stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mock-pipeline .stage {
  background: #141414;
  border: 1px solid #232323;
  border-radius: 6px;
  padding: 10px;
}
.mock-pipeline .stage-h { display: flex; justify-content: space-between; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); margin-bottom: 8px; }
.mock-pipeline .stage-h .amt { color: #fff; font-family: var(--mono); }
.mock-pipeline .deal {
  background: #1c1c1c;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  padding: 10px;
  margin-top: 6px;
  position: relative;
}
.mock-pipeline .deal .name { font-weight: 600; font-size: 12px; margin-bottom: 2px; }
.mock-pipeline .deal .sub { font-size: 10px; color: rgba(255,255,255,0.45); margin-bottom: 8px; }
.mock-pipeline .deal .amt { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.mock-pipeline .bar { display:flex; align-items:center; gap:6px; font-size:10px; color: rgba(255,255,255,0.6); margin-bottom: 4px; }
.mock-pipeline .bar .track { flex:1; height: 4px; background: #2a2a2a; border-radius: 2px; overflow: hidden; position: relative;}
.mock-pipeline .bar .fill { height: 100%; }
.mock-pipeline .bar .fill.seller { background: #c2410c; }
.mock-pipeline .bar .fill.buyer { background: #e02e1a; }
.mock-pipeline .bar .pct { font-family: var(--mono); width: 32px; text-align: right; }
.mock-pipeline .gap { font-family: var(--mono); font-size: 10px; color: #e02e1a; margin-top: 4px; }
.mock-pipeline .actions { display:flex; gap:6px; margin-top: 10px; }
.mock-pipeline .actions .btn {
  flex:1; padding: 6px 8px; border: 1px solid #2a2a2a; border-radius: 4px;
  font-size: 10px; display: flex; align-items: center; justify-content: center; gap: 4px;
  background: #141414;
}
.mock-pipeline .actions .btn.ai { color: #fff; }
.mock-pipeline .actions .btn .badge { background: #e02e1a; color: #fff; border-radius: 999px; padding: 0 5px; font-size: 9px; font-weight: 700; }

/* Deal room mock — light bg */
.mock-deal { background: #fafaf8; color: #14110d; padding: 22px; }
.mock-deal .top { display:flex; justify-content:space-between; align-items:center; padding-bottom: 14px; border-bottom: 1px solid #e6e2da; margin-bottom: 18px; }
.mock-deal .title { font-size: 14px; font-weight: 600; }
.mock-deal .pills { display:flex; gap: 6px; }
.mock-deal .pill { font-size: 10px; padding: 3px 8px; border-radius: 999px; font-weight: 600; }
.mock-deal .pill.hot { background: #fde68a; color: #92400e; }
.mock-deal .pill.healthy { background: #d1fae5; color: #065f46; }
.mock-deal .pill.risk { background: #fecaca; color: #7f1d1d; }
.mock-deal h6 { font-size: 13px; font-weight: 700; margin: 0 0 14px; }
.mock-deal .badges { display: flex; gap: 8px; align-items:center; margin-bottom: 18px; }
.mock-deal .badges .stage { font-size: 11px; color: #4a4540; }
.mock-deal .grid { display: grid; grid-template-columns: 180px 1fr 1fr; gap: 18px; }
.mock-deal .col h7 {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #8b857c; display:block; margin-bottom: 10px;
}
.mock-deal .scorecard { background: #fff; border: 1px solid #e6e2da; border-radius: 6px; padding: 14px; }
.mock-deal .scorecard .row { margin-bottom: 10px; }
.mock-deal .scorecard .row .lbl { font-size: 10px; color: #4a4540; margin-bottom: 4px; display:flex; justify-content:space-between; }
.mock-deal .scorecard .row .lbl .pct { font-weight: 700; color: #14110d; font-family: var(--mono); }
.mock-deal .scorecard .row .track { height: 6px; background: #ebe5d9; border-radius: 3px; overflow: hidden; }
.mock-deal .scorecard .row .fill { height: 100%; border-radius: 3px; }
.mock-deal .scorecard .row .fill.seller { background: #1f5132; }
.mock-deal .scorecard .alert { background: #fecaca; border-radius: 4px; padding: 10px; margin-top: 6px; font-size: 11px; color: #7f1d1d; font-weight: 600; text-align: center; }
.mock-deal .gaps { display:flex; flex-direction:column; gap: 8px; }
.mock-deal .gap-item { background: #fff; border: 1px solid #e6e2da; border-left: 3px solid #c2410c; border-radius: 4px; padding: 12px; position:relative; }
.mock-deal .gap-item .num { position: absolute; right: 10px; top: 10px; background: #fde68a; color: #92400e; border-radius: 999px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.mock-deal .gap-item .tag { font-family: var(--mono); font-size: 9px; color: #c2410c; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.mock-deal .gap-item .gtitle { font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.mock-deal .gap-item .ev { font-size: 10px; color: #8b857c; margin-bottom: 4px; }
.mock-deal .gap-item .addy { font-size: 10px; color: #c2410c; }
.mock-deal .action-card { background: #fff; border: 1px solid #e6e2da; border-radius: 4px; padding: 12px; }
.mock-deal .action-card .hdr { display:flex; justify-content:space-between; align-items:center; margin-bottom: 10px; }
.mock-deal .action-card .hdr .ltag { background: #fde68a; color: #92400e; border-radius: 999px; padding: 2px 8px; font-size: 10px; font-weight: 600; }
.mock-deal .action-card .hdr .meta { font-family: var(--mono); font-size: 9px; color: #c2410c; letter-spacing: 0.06em; }
.mock-deal .action-card .atitle { font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.mock-deal .action-card .preview { font-size: 11px; line-height: 1.45; color: #4a4540; margin-bottom: 12px; }
.mock-deal .action-card .exec { background: #14110d; color: #fff; border-radius: 4px; padding: 8px; text-align: center; font-size: 11px; font-weight: 600; }
.mock-deal .action-card .footer { font-size: 10px; color: #8b857c; margin-top: 10px; line-height: 1.4; }

/* Email mock */
.mock-email { background: #fafaf8; color: #14110d; padding: 26px 30px; max-width: 420px; margin: 0 auto; }
.mock-email .head { display:flex; justify-content:space-between; align-items:center; margin-bottom: 8px; }
.mock-email .head h5 { font-size: 16px; font-weight: 700; margin: 0; display:flex; align-items:center; gap:8px; }
.mock-email .head .x { font-size: 18px; color: #8b857c; }
.mock-email .sub { font-size: 12px; color: #8b857c; margin-bottom: 22px; }
.mock-email label { display:block; font-size: 12px; font-weight: 600; margin-bottom: 6px; margin-top: 14px; }
.mock-email .field { background: #fff; border: 1.5px solid #14110d; border-radius: 6px; padding: 10px 12px; font-size: 12px; }
.mock-email .field.msg { line-height: 1.5; min-height: 160px; white-space: pre-line; }
.mock-email .field.normal { border: 1px solid #e6e2da; }
.mock-email .gen { background: #fff; border: 1px solid #14110d; border-radius: 8px; padding: 12px; margin-top: 18px; text-align: center; font-size: 13px; font-weight: 600; display:flex; align-items:center; justify-content:center; gap: 8px; }

/* Home mock */
.mock-home { background: #fafaf8; color: #14110d; padding: 22px 24px; }
.mock-home .greet h5 { font-size: 16px; font-weight: 700; margin: 0; }
.mock-home .greet .day { font-size: 14px; color: #14110d; font-weight: 600; }
.mock-home .greet .ts { font-size: 11px; color: #8b857c; margin-top: 4px; }
.mock-home .grid { display: grid; grid-template-columns: 280px 1fr 280px; gap: 16px; margin-top: 18px; }
.mock-home .addy-card { background: #2a2522; color: #f5f1e8; border-radius: 12px; padding: 14px; }
.mock-home .addy-card .who { display:flex; justify-content:space-between; align-items:center; margin-bottom: 10px; }
.mock-home .addy-card .who .name { font-size: 11px; font-weight: 700; }
.mock-home .addy-card .who .pill { background: #e02e1a; color:#fff; padding: 2px 8px; border-radius: 999px; font-size: 9px; font-weight: 600; }
.mock-home .addy-card .dtitle { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.mock-home .addy-card p { font-size: 11px; line-height: 1.45; color: rgba(245,241,232,0.78); margin: 0; }
.mock-home .scoreboard { background: #fff; border: 1px solid #e6e2da; border-radius: 8px; padding: 14px; }
.mock-home .scoreboard .lab { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: #8b857c; margin-bottom: 12px; }
.mock-home .scoreboard .stats { display:flex; justify-content:space-between; }
.mock-home .scoreboard .s { text-align: left; }
.mock-home .scoreboard .s .n { font-size: 22px; font-weight: 700; }
.mock-home .scoreboard .s .l { font-size: 10px; color: #8b857c; margin-top: 2px; }
.mock-home .scoreboard .s.buy .n { color: #c2410c; }
.mock-home .scoreboard .s.sell .n { color: #1f5132; }
.mock-home .scoreboard .s.gap .n { color: #e02e1a; }
.mock-home .scoreboard .bars { margin-top: 14px; padding-top: 14px; border-top: 1px solid #ebe5d9; }
.mock-home .scoreboard .bar { display:flex; align-items:center; gap: 8px; font-size: 10px; margin: 6px 0; }
.mock-home .scoreboard .bar .lbl { width: 36px; color: #8b857c; }
.mock-home .scoreboard .bar .track { flex:1; height: 6px; background: #ebe5d9; border-radius: 3px; overflow: hidden; }
.mock-home .scoreboard .bar .fill { height: 100%; }
.mock-home .scoreboard .bar .fill.seller { background: #1f5132; }
.mock-home .scoreboard .bar .fill.buyer { background: #c2410c; }
.mock-home .scoreboard .bar .pct { width: 28px; text-align: right; font-family: var(--mono); font-weight: 600; color: #14110d; }
.mock-home .scoreboard .alert { background: #fecaca; color: #7f1d1d; font-size: 10px; padding: 6px 10px; border-radius: 4px; margin-top: 10px; font-weight: 600; }
.mock-home .gaps { display:flex; flex-direction:column; gap: 8px; }
.mock-home .gap-row { background: #fff; border: 1px solid #e6e2da; border-left: 3px solid #c2410c; border-radius: 4px; padding: 10px; display:flex; justify-content:space-between; align-items: center; gap: 8px; }
.mock-home .gap-row .info .tag { font-family: var(--mono); font-size: 8px; color: #c2410c; letter-spacing: 0.1em; }
.mock-home .gap-row .info .gt { font-size: 11px; font-weight: 600; margin-top: 2px; }
.mock-home .gap-row .btn { font-size: 10px; padding: 6px 10px; border: 1px solid #14110d; border-radius: 4px; flex-shrink:0; }

/* Addy mock */
.mock-addy { padding: 18px 22px; min-height: 360px; display:flex; flex-direction:column; gap: 12px; }
.mock-addy .top { display:flex; justify-content:space-between; align-items:center; padding-bottom: 12px; border-bottom: 1px solid #2a2a2a; }
.mock-addy .top .left { display:flex; gap: 10px; align-items:center; }
.mock-addy .top .av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg,#fde68a,#e02e1a); }
.mock-addy .top .name { font-size: 13px; font-weight: 700; }
.mock-addy .top .sub { font-size: 10px; color: rgba(255,255,255,0.5); }
.mock-addy .top .mode { background: #1f5132; color: #d1fae5; font-size: 10px; padding: 4px 10px; border-radius: 999px; font-weight: 600; }
.mock-addy .msg { display: flex; gap: 10px; align-items: flex-start; max-width: 80%; }
.mock-addy .msg.user { align-self: flex-end; flex-direction: row-reverse; }
.mock-addy .msg .av { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg,#fde68a,#e02e1a); flex-shrink: 0; }
.mock-addy .msg.user .av { background: #2a2a2a; }
.mock-addy .msg .bubble {
  background: #1a1a1a;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
}
.mock-addy .msg.user .bubble { background: #2a2522; color: #f5f1e8; }
.mock-addy .msg .ts { font-size: 9px; color: rgba(255,255,255,0.4); margin-top: 6px; }
.mock-addy .suggest { padding-top: 10px; border-top: 1px solid #2a2a2a; }
.mock-addy .suggest .lbl { font-size: 10px; color: rgba(255,255,255,0.5); margin-bottom: 6px; }
.mock-addy .suggest .chips { display:flex; gap: 6px; flex-wrap: wrap; }
.mock-addy .suggest .chip { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 999px; padding: 6px 10px; font-size: 10px; color: rgba(255,255,255,0.75); }
.mock-addy .input { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 8px; padding: 10px 12px; font-size: 11px; color: rgba(255,255,255,0.5); display:flex; justify-content:space-between; align-items: center; }
.mock-addy .input .arrow { color: #e02e1a; }

.dirB-shot { padding: 0; }
.dirB-shot .frame { background: #fafaf8; }
.dirB-shot .frame.dark { background: #0a0a0a; }

/* Pull quote between features */
.dirB-pullq {
  padding: 72px 48px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--bg-2);
}
.dirB-pullq blockquote {
  font-family: var(--display);
  font-weight: 600;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 1000px;
}
.dirB-pullq blockquote .red { color: var(--red); }

/* ===== Why we can help — three reason cards in the prebook slot ===== */
.dirB-why {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 1100px;
}
.dirB-why-card {
  padding: 32px 28px;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  background: color-mix(in srgb, var(--ink) 2%, transparent);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dirB-why-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.dirB-why-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
}
.dirB-why-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dirB-why-headline {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(22px, 1.95vw, 26px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
.dirB-why-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}
@media (max-width: 900px) {
  .dirB-why { grid-template-columns: 1fr; }
  .dirB-why-card { padding: 24px 20px; }
}
.dirB.mono.dark .dirB-why-card {
  border-color: rgba(245,245,245,0.18);
  background: rgba(245,245,245,0.025);
}
.dirB.mono.dark .dirB-why-num { color: rgba(245,245,245,0.45); }
.dirB.mono.dark .dirB-why-label { color: rgba(245,245,245,0.6); }
.dirB.mono.dark .dirB-why-headline { color: #f5f5f5; }
.dirB.mono.dark .dirB-why-body { color: rgba(245,245,245,0.7); }

/* ===== Pre-book section — fit diagnostic + FAQ inspector under one frame =====
   Replaces the standalone .dirB-icp and .dirB-faq sections. Tabs switch
   between the two tools; both stay mounted so their state persists. */
.dirB-prebook {
  padding: 100px 48px;
  border-top: 1px solid var(--ink);
}
.dirB-prebook-head {
  max-width: 920px;
  margin-bottom: 36px;
}
.dirB-prebook-head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 5.4vw, 72px);
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin: 12px 0 16px;
}
.dirB-prebook-deck {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 640px;
}
.dirB-prebook-wrap {
  max-width: 1100px;
}
.dirB-prebook-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-bottom: 0;
  background: color-mix(in srgb, var(--ink) 2%, transparent);
}
.dirB-prebook-tab {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 2px;
  align-items: baseline;
  padding: 18px 24px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--ink-soft);
  transition: color 220ms ease, background 220ms ease;
}
.dirB-prebook-tab + .dirB-prebook-tab {
  border-left: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.dirB-prebook-tab:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.dirB-prebook-tab:focus-visible { outline: 2px solid color-mix(in srgb, var(--ink) 35%, transparent); outline-offset: -3px; }
.dirB-prebook-tab.is-active { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.dirB-prebook-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: #d8a14a;
}
.prebook-tab-num {
  grid-row: 1 / span 2;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  font-feature-settings: "tnum" 1;
  padding-top: 4px;
}
.dirB-prebook-tab.is-active .prebook-tab-num { color: #d8a14a; }
.prebook-tab-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.014em;
  line-height: 1.1;
}
.prebook-tab-sub {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Panel body — both tabs stay mounted; hidden attribute + display none
   handle visibility so internal state survives switches. */
.dirB-prebook-body {
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-top: 0;
}
.dirB-prebook-panel { display: none; padding: 28px; }
.dirB-prebook-panel.is-active {
  display: block;
  animation: prebookPanelIn 320ms cubic-bezier(.2,.7,.2,1);
}
@keyframes prebookPanelIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* When inside the panel, drop the redundant outer border on FitDiagnostic
   and FaqInspector since the prebook frame already provides one. */
.dirB-prebook-panel .dirB-fit,
.dirB-prebook-panel .dirB-faq-inspector {
  border: 0;
  max-width: 100%;
}

/* Mono-dark overrides */
.dirB.mono.dark .dirB-prebook-tabs {
  border-color: rgba(245,245,245,0.18);
  background: rgba(245,245,245,0.04);
}
.dirB.mono.dark .dirB-prebook-tab + .dirB-prebook-tab { border-left-color: rgba(245,245,245,0.18); }
.dirB.mono.dark .dirB-prebook-tab { color: rgba(245,245,245,0.65); }
.dirB.mono.dark .dirB-prebook-tab:hover { color: #f5f5f5; background: rgba(245,245,245,0.04); }
.dirB.mono.dark .dirB-prebook-tab.is-active { color: #f5f5f5; background: rgba(245,245,245,0.08); }
.dirB.mono.dark .prebook-tab-num { color: rgba(245,245,245,0.45); }
.dirB.mono.dark .prebook-tab-sub { color: rgba(245,245,245,0.45); }
.dirB.mono.dark .dirB-prebook-body { border-color: rgba(245,245,245,0.18); }

@media (max-width: 700px) {
  .dirB-prebook { padding: 72px 24px; }
  .dirB-prebook-tabs { grid-template-columns: 1fr; }
  .dirB-prebook-tab + .dirB-prebook-tab {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  }
  .dirB.mono.dark .dirB-prebook-tab + .dirB-prebook-tab { border-top-color: rgba(245,245,245,0.18); }
  .dirB-prebook-panel { padding: 18px; }
}

/* ---- Legacy ICP wrapper kept only for any external references; the head
   styles are no longer used by the new prebook section. ---- */
/* ===== ICP · self-diagnostic — framed as "running Nudge on yourself" =====
   Mirrors the mock-deal aesthetic used elsewhere on the site: a card with
   a terminal header bar, signal rows, and a footer that scores + verdicts
   the visitor as if they were a deal. */
.dirB-icp-head { max-width: 920px; margin-bottom: 36px; }
.dirB-icp-head .deck {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 640px;
}

.dirB-fit {
  max-width: 940px;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  background: color-mix(in srgb, var(--ink) 2%, transparent);
  font-family: var(--display);
  transition: border-color 320ms ease;
}

/* Terminal-style head bar */
.dirB-fit-head {
  padding: 14px 22px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.dirB-fit-head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dirB-fit-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dirB-fit-tag .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #d8a14a;
  box-shadow: 0 0 8px rgba(216,161,74,0.6);
  animation: fitPulse 2s ease-in-out infinite;
}
.dirB-fit-id {
  font-family: var(--mono);
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--ink-faint);
}
.dirB-fit-id b {
  color: var(--ink);
  font-weight: 600;
  font-feature-settings: "tnum" 1;
}
@keyframes fitPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}

/* Body — signals list */
.dirB-fit-body {
  padding: 20px 22px 8px;
}
.dirB-fit-section-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.dirB-fit-section-label .muted {
  color: var(--ink-faint);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: none;
  font-size: 11px;
}

.dirB-fit-list { list-style: none; margin: 0; padding: 0; }
.dirB-fit-list li { border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.dirB-fit-list li:last-child { border-bottom: 0; }

.dirB-fit-item {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--ink-soft);
  font-family: var(--display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.014em;
  transition: color 200ms ease;
}
.dirB-fit-item:hover { color: var(--ink); }
.dirB-fit-item:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ink) 35%, transparent);
  outline-offset: 2px;
}
.dirB-fit-item.is-on { color: var(--ink); }

/* Custom marker — ring + check that swap on toggle */
.dirB-fit-marker {
  position: relative;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dirB-fit-marker .ring {
  position: absolute; inset: 2px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--ink) 35%, transparent);
  transition: border-color 200ms ease, transform 220ms cubic-bezier(.2,.7,.2,1), opacity 180ms ease;
}
.dirB-fit-marker .check {
  position: absolute; inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  transform: scale(0.4);
  opacity: 0;
  transition: transform 240ms cubic-bezier(.2,.7,.2,1), opacity 180ms ease;
}
.dirB-fit-item:hover .dirB-fit-marker .ring { border-color: var(--ink); }
.dirB-fit-item.is-on .dirB-fit-marker .ring { opacity: 0; transform: scale(1.3); }
.dirB-fit-item.is-on .dirB-fit-marker .check { opacity: 1; transform: scale(1); }

.dirB-fit-label { min-width: 0; }
.dirB-fit-status {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color 220ms ease;
}
.dirB-fit-item.is-on .dirB-fit-status { color: #d8a14a; }

/* Footer — score bar, verdict, sub, CTA */
.dirB-fit-foot {
  padding: 18px 22px 20px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  transition: background 320ms ease;
  display: grid;
  gap: 10px;
}
.dirB-fit-foot-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dirB-fit-foot-key { color: var(--ink-faint); }
.dirB-fit-foot-val {
  color: var(--ink);
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.06em;
}
.dirB-fit-foot-val b {
  font-weight: 700;
  font-size: 14px;
}
.dirB-fit-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  height: 8px;
}
.dirB-fit-bar-seg {
  border-radius: 1px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  transition: background 320ms ease, transform 220ms cubic-bezier(.2,.7,.2,1);
}
.dirB-fit-bar-seg.is-on {
  background: var(--ink);
  animation: fitSegPop 320ms cubic-bezier(.2,.7,.2,1);
}
@keyframes fitSegPop {
  0%   { transform: scaleY(0.3); }
  60%  { transform: scaleY(1.25); }
  100% { transform: scaleY(1); }
}

.dirB-fit-verdict-row { padding-top: 4px; }
.dirB-fit-verdict-headline {
  grid-column: 2 / -1;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  transition: color 280ms ease;
}
.dirB-fit-foot-sub {
  margin: 4px 0 0;
  padding-left: 84px;
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
}
.dirB-fit-cta {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: start;
  justify-self: start;
  padding: 12px 22px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  text-transform: none;
  text-decoration: none;
  transition: transform 220ms cubic-bezier(.2,.7,.2,1), background 200ms ease;
  animation: fitCtaIn 400ms cubic-bezier(.2,.7,.2,1) both;
}
.dirB-fit-cta:hover { transform: translateX(3px); }
@keyframes fitCtaIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Tone reshaping */
.dirB-fit.tone-idle .dirB-fit-verdict-headline { color: var(--ink-faint); }
.dirB-fit.tone-cold .dirB-fit-verdict-headline { color: var(--ink-soft); }
.dirB-fit.tone-warm .dirB-fit-foot { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.dirB-fit.tone-warm .dirB-fit-verdict-headline { color: var(--ink); }
.dirB-fit.tone-warm .dirB-fit-bar-seg.is-on { background: var(--ink); }
.dirB-fit.tone-hot {
  border-color: #d8a14a;
  box-shadow: 0 0 0 1px rgba(216,161,74,0.4), 0 18px 40px -22px rgba(216,161,74,0.6);
}
.dirB-fit.tone-hot .dirB-fit-foot { background: #d8a14a; }
/* Hot state: amber footer + deep-ink text gives the contrast white-on-amber
   would lack. The CTA inverts (ink pill, amber glyph) so it pops against
   the warm background. */
.dirB-fit.tone-hot .dirB-fit-foot-key { color: rgba(10,10,10,0.65); }
.dirB-fit.tone-hot .dirB-fit-foot-val,
.dirB-fit.tone-hot .dirB-fit-verdict-headline { color: #0a0a0a; }
.dirB-fit.tone-hot .dirB-fit-foot-sub { color: rgba(10,10,10,0.75); }
.dirB-fit.tone-hot .dirB-fit-bar-seg { background: rgba(10,10,10,0.18); }
.dirB-fit.tone-hot .dirB-fit-bar-seg.is-on { background: #0a0a0a; }
.dirB-fit.tone-hot .dirB-fit-cta { background: #0a0a0a; color: #d8a14a; }
.dirB-fit.tone-hot .dirB-fit-cta .prompt { color: #d8a14a; }

/* Mono-dark overrides — explicit colors throughout */
.dirB.mono.dark .dirB-fit {
  border-color: rgba(245,245,245,0.18);
  background: rgba(245,245,245,0.03);
}
.dirB.mono.dark .dirB-fit-head {
  background: rgba(245,245,245,0.05);
  border-bottom-color: rgba(245,245,245,0.18);
}
.dirB.mono.dark .dirB-fit-head-row { color: rgba(245,245,245,0.55); }
.dirB.mono.dark .dirB-fit-id { color: rgba(245,245,245,0.45); }
.dirB.mono.dark .dirB-fit-id b { color: #f5f5f5; }
.dirB.mono.dark .dirB-fit-section-label {
  border-bottom-color: rgba(245,245,245,0.12);
  color: #f5f5f5;
}
.dirB.mono.dark .dirB-fit-section-label .muted { color: rgba(245,245,245,0.4); }
.dirB.mono.dark .dirB-fit-list li { border-bottom-color: rgba(245,245,245,0.10); }
.dirB.mono.dark .dirB-fit-item { color: rgba(245,245,245,0.65); }
.dirB.mono.dark .dirB-fit-item:hover { color: #f5f5f5; }
.dirB.mono.dark .dirB-fit-item.is-on { color: #f5f5f5; }
.dirB.mono.dark .dirB-fit-marker .ring { border-color: rgba(245,245,245,0.35); }
.dirB.mono.dark .dirB-fit-item:hover .dirB-fit-marker .ring { border-color: #f5f5f5; }
.dirB.mono.dark .dirB-fit-marker .check { background: #f5f5f5; color: #0a0a0a; }
.dirB.mono.dark .dirB-fit-status { color: rgba(245,245,245,0.35); }
.dirB.mono.dark .dirB-fit-item.is-on .dirB-fit-status { color: #d8a14a; }
.dirB.mono.dark .dirB-fit-foot {
  background: rgba(245,245,245,0.05);
  border-top-color: rgba(245,245,245,0.18);
}
.dirB.mono.dark .dirB-fit-foot-key { color: rgba(245,245,245,0.5); }
.dirB.mono.dark .dirB-fit-foot-val { color: #f5f5f5; }
.dirB.mono.dark .dirB-fit-bar-seg { background: rgba(245,245,245,0.12); }
.dirB.mono.dark .dirB-fit-bar-seg.is-on { background: #f5f5f5; }
.dirB.mono.dark .dirB-fit-verdict-headline { color: #f5f5f5; }
.dirB.mono.dark .dirB-fit-foot-sub { color: rgba(245,245,245,0.65); }
.dirB.mono.dark .dirB-fit-cta { background: #f5f5f5; color: #0a0a0a; }
.dirB.mono.dark .dirB-fit.tone-idle .dirB-fit-verdict-headline { color: rgba(245,245,245,0.45); }
.dirB.mono.dark .dirB-fit.tone-cold .dirB-fit-verdict-headline { color: rgba(245,245,245,0.7); }
.dirB.mono.dark .dirB-fit.tone-warm .dirB-fit-foot { background: rgba(245,245,245,0.08); }
.dirB.mono.dark .dirB-fit.tone-warm .dirB-fit-bar-seg.is-on { background: #f5f5f5; }
.dirB.mono.dark .dirB-fit.tone-hot { border-color: #d8a14a; }
.dirB.mono.dark .dirB-fit.tone-hot .dirB-fit-foot { background: #d8a14a; }
.dirB.mono.dark .dirB-fit.tone-hot .dirB-fit-foot-key { color: rgba(10,10,10,0.65); }
.dirB.mono.dark .dirB-fit.tone-hot .dirB-fit-foot-val,
.dirB.mono.dark .dirB-fit.tone-hot .dirB-fit-verdict-headline { color: #0a0a0a; }
.dirB.mono.dark .dirB-fit.tone-hot .dirB-fit-foot-sub { color: rgba(10,10,10,0.75); }
.dirB.mono.dark .dirB-fit.tone-hot .dirB-fit-cta { background: #0a0a0a; color: #d8a14a; }

@media (max-width: 700px) {
  .dirB-fit-head, .dirB-fit-body, .dirB-fit-foot { padding-left: 16px; padding-right: 16px; }
  .dirB-fit-head-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .dirB-fit-item { font-size: 16px; gap: 14px; }
  .dirB-fit-status { display: none; }
  .dirB-fit-foot-row { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; }
  .dirB-fit-foot-sub { padding-left: 70px; }
}

/* FAQ — two-column inspector */
.dirB-faq {
  padding: 100px 48px;
  border-top: 1px solid var(--ink);
}
.dirB-faq-head { max-width: 920px; margin-bottom: 36px; }
.dirB-faq h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 5.4vw, 72px);
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin: 12px 0 16px;
}
.dirB-faq-deck {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.dirB-faq-inspector {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  max-width: 1100px;
}
.dirB-faq-questions {
  list-style: none;
  margin: 0;
  padding: 0;
  border-right: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  background: color-mix(in srgb, var(--ink) 2%, transparent);
}
.dirB-faq-questions li { border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.dirB-faq-questions li:last-child { border-bottom: 0; }
.dirB-faq-question {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) 28px;
  gap: 14px;
  align-items: baseline;
  padding: 18px 22px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--display);
  color: var(--ink-soft);
  transition: color 200ms ease, background 200ms ease;
}
.dirB-faq-question:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.dirB-faq-question:focus-visible { outline: 2px solid color-mix(in srgb, var(--ink) 35%, transparent); outline-offset: -2px; }
.dirB-faq-question.is-active {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.dirB-faq-question.is-active::before {
  content: "";
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 3px;
  background: #d8a14a;
}
.dirB-faq-question-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  text-transform: uppercase;
  padding-top: 4px;
}
.dirB-faq-question.is-active .dirB-faq-question-num { color: #d8a14a; }
.dirB-faq-question-text {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.012em;
}
.dirB-faq-question.is-active .dirB-faq-question-text { font-weight: 600; }
.dirB-faq-question-arrow {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink-faint);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 200ms ease, transform 200ms cubic-bezier(.2,.7,.2,1);
  justify-self: end;
}
.dirB-faq-question:hover .dirB-faq-question-arrow,
.dirB-faq-question.is-active .dirB-faq-question-arrow {
  opacity: 1;
  transform: translateX(0);
}
.dirB-faq-question.is-active .dirB-faq-question-arrow { color: var(--ink); }

/* Detail panel — keyed so it re-mounts and fades in on selection change */
.dirB-faq-detail {
  padding: 32px 36px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 18px;
  align-content: start;
  animation: faqDetailIn 360ms cubic-bezier(.2,.7,.2,1);
}
@keyframes faqDetailIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dirB-faq-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dirB-faq-detail-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dirB-faq-detail-tag::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #d8a14a;
  box-shadow: 0 0 8px rgba(216,161,74,0.6);
}
.dirB-faq-detail-counter { color: var(--ink-faint); font-feature-settings: "tnum" 1; }
.dirB-faq-detail-counter span { margin: 0 4px; }

.dirB-faq-detail-q {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 640px;
}
.dirB-faq-detail-a {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 620px;
}
.dirB-faq-detail-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.dirB-faq-detail-nav {
  padding: 8px 14px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 220ms cubic-bezier(.2,.7,.2,1);
}
.dirB-faq-detail-nav:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.dirB-faq-detail-nav.primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.dirB-faq-detail-nav.primary:hover { transform: translateX(3px); }

/* Mono-dark overrides */
.dirB.mono.dark .dirB-faq-inspector { border-color: rgba(245,245,245,0.18); }
.dirB.mono.dark .dirB-faq-questions {
  border-right-color: rgba(245,245,245,0.18);
  background: rgba(245,245,245,0.03);
}
.dirB.mono.dark .dirB-faq-questions li { border-bottom-color: rgba(245,245,245,0.10); }
.dirB.mono.dark .dirB-faq-question { color: rgba(245,245,245,0.65); }
.dirB.mono.dark .dirB-faq-question:hover { color: #f5f5f5; background: rgba(245,245,245,0.04); }
.dirB.mono.dark .dirB-faq-question.is-active { color: #f5f5f5; background: rgba(245,245,245,0.08); }
.dirB.mono.dark .dirB-faq-question-num { color: rgba(245,245,245,0.45); }
.dirB.mono.dark .dirB-faq-question-arrow { color: rgba(245,245,245,0.45); }
.dirB.mono.dark .dirB-faq-question.is-active .dirB-faq-question-arrow { color: #f5f5f5; }
.dirB.mono.dark .dirB-faq-detail-head { color: rgba(245,245,245,0.55); }
.dirB.mono.dark .dirB-faq-detail-counter { color: rgba(245,245,245,0.4); }
.dirB.mono.dark .dirB-faq-detail-q { color: #f5f5f5; }
.dirB.mono.dark .dirB-faq-detail-a { color: rgba(245,245,245,0.7); }
.dirB.mono.dark .dirB-faq-detail-foot { border-top-color: rgba(245,245,245,0.18); }
.dirB.mono.dark .dirB-faq-detail-nav {
  border-color: rgba(245,245,245,0.25);
  color: rgba(245,245,245,0.65);
}
.dirB.mono.dark .dirB-faq-detail-nav:hover { color: #f5f5f5; border-color: #f5f5f5; }
.dirB.mono.dark .dirB-faq-detail-nav.primary {
  background: #f5f5f5;
  color: #0a0a0a;
  border-color: #f5f5f5;
}

@media (max-width: 900px) {
  .dirB-faq-inspector {
    grid-template-columns: 1fr;
  }
  .dirB-faq-questions { border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
  .dirB.mono.dark .dirB-faq-questions { border-bottom-color: rgba(245,245,245,0.18); }
  .dirB-faq-detail { padding: 24px 22px; }
  .dirB-faq-detail-q { font-size: 22px; }
  .dirB-faq-detail-a { font-size: 16px; }
}
.dirB-faq-list { border-top: 1px solid var(--ink); }
.dirB-faq-item {
  border-bottom: 1px solid var(--ink);
}
.dirB-faq-q {
  display: grid;
  grid-template-columns: 80px 1fr 32px;
  gap: 24px;
  align-items: baseline;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 28px 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: opacity .15s;
}
.dirB-faq-q:hover { opacity: 0.7; }
.dirB-faq-q .num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--red);
  letter-spacing: 0.14em;
}
.dirB-faq-q .q {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.dirB-faq-q .chev {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1;
  text-align: right;
  transition: color .15s;
}
.dirB-faq-item.open .dirB-faq-q .chev { color: var(--red); }
.dirB-faq-a {
  padding: 0 0 28px 104px;
  animation: faqFadeIn 0.25s ease;
}
.dirB-faq-a p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 760px;
}
@keyframes faqFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Product carousel ===== */
.dirB-carousel {
  border-top: 1px solid var(--ink);
  padding-top: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.dirB-carousel-viewport {
  overflow: hidden;
  width: 100%;
}
.dirB-carousel-rail {
  display: flex;
  width: 100%;
  transition: transform 620ms cubic-bezier(0.65, 0.05, 0.25, 1);
  will-change: transform;
}
.dirB-carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(360px, 460px) 1fr;
  gap: 64px;
  align-items: center;
  padding: 0 2px;
  box-sizing: border-box;
}
.dirB-carousel-copy .step {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--red);
  margin-bottom: 18px;
}
.dirB-carousel-copy h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 0 0 18px;
  animation: caroFade .5s ease;
}
.dirB-carousel-copy p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 22px;
  animation: caroFade .5s ease .05s both;
}
.dirB-carousel-copy ul {
  list-style: none; padding: 0; margin: 0 0 32px;
  animation: caroFade .5s ease .1s both;
}
.dirB-carousel-copy li {
  padding: 10px 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  display: flex; gap: 12px; align-items: baseline;
}
.dirB-carousel-copy li::before {
  content: "→";
  color: var(--red);
  font-family: var(--display);
}
.dirB-carousel-controls {
  display: flex; align-items: center; gap: 14px;
  padding-top: 20px;
  border-top: 1px solid rgba(20,17,13,0.15);
}
.dirB-carousel-controls button {
  width: 36px; height: 36px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
  border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
  font-family: var(--mono);
}
.dirB-carousel-controls button:hover { background: var(--ink); color: var(--bg); }
.dirB-carousel-controls .pause { margin-left: auto; font-size: 11px; }
.dirB-carousel-controls .counter {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.dirB-carousel-controls .counter .div { color: var(--ink-soft); margin: 0 4px; }
.dirB-carousel-controls .counter .tot { color: var(--ink-soft); }

.dirB-carousel-shot {
  border: 1px solid var(--ink);
  background: var(--ink);
  overflow: hidden;
  box-shadow: 0 28px 70px -32px rgba(14,13,11,0.5);
  animation: caroSlide .55s ease;
}
@keyframes caroFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes caroSlide {
  from { opacity: 0; transform: translateY(12px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.dirB-carousel-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid rgba(20,17,13,0.15);
}
.dirB-carousel-tab {
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(20,17,13,0.15);
  padding: 18px 16px 14px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: inherit;
  color: var(--ink-soft);
  transition: color .2s;
}
.dirB-carousel-tab:last-child { border-right: 0; }
.dirB-carousel-tab:hover { color: var(--ink); }
.dirB-carousel-tab.active { color: var(--ink); }
.dirB-carousel-tab .t-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--red);
}
.dirB-carousel-tab .t-name {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}
.dirB-carousel-tab .t-track {
  display: block;
  height: 2px;
  background: rgba(20,17,13,0.12);
  margin-top: 6px;
  overflow: hidden;
}
.dirB-carousel-tab .t-fill {
  display: block;
  height: 100%;
  background: var(--red);
  transition: width 0.08s linear;
}
.dirB-carousel-tab.active .t-fill { background: var(--red); }
@media (max-width: 1024px) {
  .dirB-carousel-slide { grid-template-columns: 1fr; gap: 32px; min-height: 0; }
  .dirB-carousel-tabs { grid-template-columns: repeat(2, 1fr); }
}
.dirB-faq-item .q {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  line-height: 1.25;
}
.dirB-faq-item .a {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 820px;
  margin: 0;
}


/* ===== Direction B — Mono variant (black & grey) ===== */
.dirB.mono {
  --bg: #f5f5f5;
  --bg-2: #e8e8e8;
  --ink: #0a0a0a;
  --ink-soft: #525252;
  --ink-faint: #8a8a8a;
  --rule: #0a0a0a;
  --red: #1a1a1a;          /* was accent red — collapses to dark grey */
  --red-deep: #2a2a2a;
  --amber: #6a6a6a;
  --green: #3a3a3a;
}

/* Tag pill: keep the dot visible without color */
.dirB.mono .dirB-hero-tag .blip {
  background: #0a0a0a;
  box-shadow: 0 0 0 4px rgba(10,10,10,0.12);
}

/* Strike-through bar — keep it visible as a dark grey band */
.dirB.mono .dirB-hero h1 .strike::after { background: #2a2a2a; }
.dirB.mono .dirB-hero h1 .red { color: #1a1a1a; }

/* Bigstat — was a deep red feature; mute to graphite (light-mono only).
   These rules used to leak into .dirB.mono.dark and override the dark-mode
   bigstat colors via higher specificity (0,4,0 > 0,2,0), making the giant
   red number render white-on-white. Scoped to :not(.dark) to stay out. */
.dirB.mono:not(.dark) .dirB-bigstat { background: #1a1a1a; color: #f5f5f5; }
.dirB.mono:not(.dark) .dirB-bigstat .num { color: #f5f5f5; }

/* CTAs — primary stays dark on hover (no red flash) */
.dirB.mono .dirB-cta-primary:hover { background: #2a2a2a; }
.dirB.mono .dirB-cta-mini:hover { background: #2a2a2a; }
.dirB.mono .dirB-cta-secondary:hover { color: #2a2a2a; }

/* Truth split — keep contrast via tone, not color */
.dirB.mono .dirB-truth-side.real { background: #0a0a0a; color: #f5f5f5; }
.dirB.mono .dirB-truth-side.real .tag { color: rgba(245,245,245,0.6); }

/* Final CTA — dark band */
.dirB.mono .dirB-final { background: #0a0a0a; color: #f5f5f5; }
.dirB.mono .dirB-final-actions a.primary { background: #f5f5f5; color: #0a0a0a; }
.dirB.mono .dirB-final-actions a.primary:hover { background: #e0e0e0; color: #0a0a0a; }
.dirB.mono .dirB-final-actions a.ghost:hover { color: #0a0a0a; background: #f5f5f5; }

/* Footer */
.dirB.mono .dirB-foot { background: #0a0a0a; color: rgba(245,245,245,0.6); }

/* Stack rows — Nudge highlighted row mutes */
.dirB.mono .dirB-stack-row.nudge { background: #e8e8e8; }
.dirB.mono .dirB-stack-row.nudge .cat { color: #0a0a0a; }

/* FAQ chevron */
.dirB.mono .dirB-faq-item.open .dirB-faq-q .chev { color: #0a0a0a; }

/* ===== Mock UI: neutralize all the warm/red/amber chips inside the product carousel mocks ===== */
.dirB.mono .mock-pipeline .bar .fill.seller { background: #6a6a6a; }
.dirB.mono .mock-pipeline .bar .fill.buyer  { background: #2a2a2a; }
.dirB.mono .mock-pipeline .gap { color: #2a2a2a; }
.dirB.mono .mock-pipeline .deal .actions .btn .badge { background: #2a2a2a; }

.dirB.mono .mock-deal .pill.hot     { background: #d4d4d4; color: #2a2a2a; }
.dirB.mono .mock-deal .pill.healthy { background: #d4d4d4; color: #2a2a2a; }
.dirB.mono .mock-deal .pill.risk    { background: #2a2a2a; color: #f5f5f5; }
.dirB.mono .mock-deal .badges .pill { background: #d4d4d4 !important; color: #2a2a2a !important; }
.dirB.mono .mock-deal .scorecard .row .fill.seller { background: #2a2a2a; }
.dirB.mono .mock-deal .scorecard .row .fill        { background: #2a2a2a !important; }
.dirB.mono .mock-deal .scorecard .alert { background: #2a2a2a; color: #f5f5f5; }
.dirB.mono .mock-deal .gap-item { border-left-color: #2a2a2a; }
.dirB.mono .mock-deal .gap-item .num { background: #d4d4d4; color: #2a2a2a; }
.dirB.mono .mock-deal .gap-item .tag { color: #525252; }
.dirB.mono .mock-deal .gap-item .addy { color: #2a2a2a; }
.dirB.mono .mock-deal .action-card .hdr .ltag { background: #d4d4d4; color: #2a2a2a; }
.dirB.mono .mock-deal .action-card .hdr .meta { color: #525252; }

.dirB.mono .mock-email .gen span { color: #0a0a0a !important; }

.dirB.mono .mock-home .addy-card { background: #1a1a1a; }
.dirB.mono .mock-home .addy-card .who .pill { background: #6a6a6a; color: #f5f5f5; }
.dirB.mono .mock-home .scoreboard .s.buy .n { color: #2a2a2a; }
.dirB.mono .mock-home .scoreboard .s.sell .n { color: #525252; }
.dirB.mono .mock-home .scoreboard .s.gap .n { color: #0a0a0a; }
.dirB.mono .mock-home .scoreboard .bar .fill.seller { background: #525252; }
.dirB.mono .mock-home .scoreboard .bar .fill.buyer  { background: #2a2a2a; }
.dirB.mono .mock-home .scoreboard .alert { background: #2a2a2a; color: #f5f5f5; }
.dirB.mono .mock-home .gap-row { border-left-color: #2a2a2a; }
.dirB.mono .mock-home .gap-row .info .tag { color: #525252; }

.dirB.mono .mock-addy .top .av,
.dirB.mono .mock-addy .msg .av { background: linear-gradient(135deg, #6a6a6a, #2a2a2a) !important; }
.dirB.mono .mock-addy .top .mode { background: #2a2a2a; color: #f5f5f5; }
.dirB.mono .mock-addy .input .arrow { color: #f5f5f5; }
.dirB.mono .mock-addy .msg .bubble strong { color: #f5f5f5 !important; }

/* Carousel tabs/track */
.dirB.mono .dirB-carousel-tab .t-num { color: #525252; }
.dirB.mono .dirB-carousel-tab .t-fill { background: #0a0a0a; }
.dirB.mono .dirB-carousel-tab.active .t-fill { background: #0a0a0a; }
.dirB.mono .dirB-carousel-copy .step { color: #525252; }
.dirB.mono .dirB-carousel-copy li::before { color: #525252; }

/* ICP icons */
.dirB.mono .dirB-icp-col.fit h4 { color: #0a0a0a; }
.dirB.mono .dirB-icp-col.unfit h4 { color: #525252; }
.dirB.mono .dirB-icp-col.fit li::before { color: #0a0a0a; }
.dirB.mono .dirB-icp-col.unfit li::before { color: #8a8a8a; }

/* Mech section red accents */
.dirB.mono .dirB-mech-card .vrow.bad .v { color: #2a2a2a; }
.dirB.mono .dirB-mech-card .vrow.good .v { color: #525252; }
.dirB.mono .dirB-mech-step .num { color: #525252; }

/* FAQ red num */
.dirB.mono .dirB-faq-q .num { color: #525252; }

/* Pull-quote red */
.dirB.mono .dirB-pullq blockquote .red { color: #2a2a2a; }

/* Stack row red */
.dirB.mono .dirB-stack h2 .red { color: #2a2a2a; }
.dirB.mono .dirB-product-head h2 .red { color: #2a2a2a; }
.dirB.mono .dirB-icp h2 .red { color: #2a2a2a; }


/* ===== Direction B — Mono Dark variant ===== */
.dirB.mono.dark {
  --bg: #0a0a0a;
  --bg-2: #161616;
  --ink: #f5f5f5;
  --ink-soft: #a8a8a8;
  --ink-faint: #6a6a6a;
  --rule: #f5f5f5;
  --red: #f5f5f5;
  --red-deep: #d4d4d4;
  --amber: #a8a8a8;
  --green: #c8c8c8;
}

.dirB.mono.dark .dirB-hero-tag { border-color: #f5f5f5; }
.dirB.mono.dark .dirB-hero-tag .blip {
  background: #f5f5f5;
  box-shadow: 0 0 0 4px rgba(245,245,245,0.18);
}
.dirB.mono.dark .dirB-hero h1 .strike::after { background: #d4d4d4; }
/* Single accent — warm signal amber, used very lightly on the headline payoff */
.dirB.mono.dark .dirB-hero h1 .red {
  color: #d8a14a;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  filter: drop-shadow(0 0 24px rgba(216,161,74,0.18));
}
.dirB.mono.dark .dirB-hero-eyebrow .rule {
  background: #d8a14a;
  opacity: 0.55;
}
.dirB.mono.dark .dirB-hero-eyebrow .desc {
  color: #d8a14a;
  opacity: 0.78;
}

/* Bigstat — invert: light card on dark bg.
   Number color and most other tokens are set in the new bigstat rules above;
   this block intentionally no longer overrides .num (keeps it red). */

/* CTAs */
.dirB.mono.dark .dirB-cta-primary { background: #f5f5f5; color: #0a0a0a; }
.dirB.mono.dark .dirB-cta-primary:hover { background: #d4d4d4; }
.dirB.mono.dark .dirB-cta-mini { background: #f5f5f5; color: #0a0a0a; }
.dirB.mono.dark .dirB-cta-mini:hover { background: #d4d4d4; }
.dirB.mono.dark .dirB-cta-secondary:hover { color: #d4d4d4; }

/* Truth split — flip: dark side becomes the "real" emphasis */
.dirB.mono.dark .dirB-truth-side.lie { background: #0a0a0a; color: #a8a8a8; }
.dirB.mono.dark .dirB-truth-side.real { background: #f5f5f5; color: #0a0a0a; }
.dirB.mono.dark .dirB-truth-side.real .tag { color: rgba(10,10,10,0.6); }
.dirB.mono.dark .dirB-truth-side.real h3 { color: #0a0a0a; }

/* Final CTA — light band on dark page */
.dirB.mono.dark .dirB-final { background: #f5f5f5; color: #0a0a0a; }
.dirB.mono.dark .dirB-final h2 { color: #0a0a0a; }
.dirB.mono.dark .dirB-final p { color: rgba(10,10,10,0.72) !important; }
.dirB.mono.dark .dirB-final .label { color: rgba(10,10,10,0.55) !important; }
.dirB.mono.dark .dirB-final-actions a.primary { background: #0a0a0a; color: #f5f5f5; }
.dirB.mono.dark .dirB-final-actions a.primary:hover { background: #2a2a2a; }
.dirB.mono.dark .dirB-final-actions a.ghost { color: #0a0a0a; border-color: #0a0a0a; }
.dirB.mono.dark .dirB-final-actions a.ghost:hover { background: #0a0a0a; color: #f5f5f5; }

/* Footer */
.dirB.mono.dark .dirB-foot { background: #161616; color: rgba(245,245,245,0.5); border-top: 1px solid #2a2a2a; }

/* Header / wordmark */
.dirB.mono.dark .dirB-header { border-bottom-color: #2a2a2a; }

/* Headline metallic shine — only on dark-bg sections */
.dirB.mono.dark .dirB-hero h1,
.dirB.mono.dark .dirB-hero h1 .rv,
.dirB.mono.dark .dirB-truth-head h2,
.dirB.mono.dark .dirB-mech-head h2,
.dirB.mono.dark .dirB-mech-step h3,
.dirB.mono.dark .dirB-product-head h2,
.dirB.mono.dark .dirB-stack h2,
.dirB.mono.dark .dirB-icp h2,
.dirB.mono.dark .dirB-faq h2,
.dirB.mono.dark .dirB-truth-side.lie h3 {
  background-image: linear-gradient(
    165deg,
    #b8b8b8 0%,
    #ffffff 32%,
    #f5f5f5 48%,
    #9a9a9a 68%,
    #d8d8d8 100%
  );
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Breathing room so descenders (g, p, y) don't get clipped by tight line-heights */
  padding-bottom: 0.14em;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,0.22))
    drop-shadow(0 0 18px rgba(220,235,255,0.14))
    drop-shadow(0 10px 28px rgba(0,0,0,0.55));
}
/* Don't shine the inline accent spans; restore their solid colors */
.dirB.mono.dark .dirB-hero h1 .strike,
.dirB.mono.dark .dirB-hero h1 .red,
.dirB.mono.dark .dirB-mech-head h2 .red,
.dirB.mono.dark .dirB-product-head h2 .red,
.dirB.mono.dark .dirB-stack h2 .red,
.dirB.mono.dark .dirB-icp h2 .red {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #f5f5f5;
  filter: none;
}

/* Stack rows */
.dirB.mono.dark .dirB-stack-row.nudge { background: #161616; }
.dirB.mono.dark .dirB-stack-row.nudge .cat { color: #f5f5f5; }
.dirB.mono.dark .dirB-stack-row { border-color: #2a2a2a; }

/* Pull-quote bg */
.dirB.mono.dark .dirB-pullq { background: #161616; }

/* FAQ borders */
.dirB.mono.dark .dirB-faq-item { border-bottom-color: #2a2a2a; }
.dirB.mono.dark .dirB-faq-list { border-top-color: #2a2a2a; }
.dirB.mono.dark .dirB-faq-q .chev { color: #f5f5f5; }
.dirB.mono.dark .dirB-faq-item.open .dirB-faq-q .chev { color: #f5f5f5; }
.dirB.mono.dark .dirB-faq-q:hover { opacity: 0.7; }
.dirB.mono.dark .dirB-faq-q .num { color: #6a6a6a; }

/* Carousel */
.dirB.mono.dark .dirB-carousel { border-top-color: #2a2a2a; }
.dirB.mono.dark .dirB-carousel-controls { border-top-color: rgba(245,245,245,0.15); }
.dirB.mono.dark .dirB-carousel-controls button { border-color: #f5f5f5; color: #f5f5f5; }
.dirB.mono.dark .dirB-carousel-controls button:hover { background: #f5f5f5; color: #0a0a0a; }
.dirB.mono.dark .dirB-carousel-tabs { border-top-color: #2a2a2a; }
.dirB.mono.dark .dirB-carousel-tab { border-right-color: rgba(245,245,245,0.15); color: #6a6a6a; }
.dirB.mono.dark .dirB-carousel-tab:hover, .dirB.mono.dark .dirB-carousel-tab.active { color: #f5f5f5; }
.dirB.mono.dark .dirB-carousel-tab .t-num { color: #a8a8a8; }
.dirB.mono.dark .dirB-carousel-tab .t-track { background: rgba(245,245,245,0.12); }
.dirB.mono.dark .dirB-carousel-tab .t-fill { background: #f5f5f5; }
.dirB.mono.dark .dirB-carousel-shot { box-shadow: 0 28px 70px -32px rgba(0,0,0,0.7); border-color: #f5f5f5; }
.dirB.mono.dark .dirB-carousel-copy .step { color: #a8a8a8; }
.dirB.mono.dark .dirB-carousel-copy li::before { color: #a8a8a8; }

/* Hero strike-through accent under headline */
.dirB.mono.dark .dirB-hero h1 .strike { color: #6a6a6a; }

/* Section borders */
.dirB.mono.dark .dirB-product, .dirB.mono.dark .dirB-stack, .dirB.mono.dark .dirB-icp,
.dirB.mono.dark .dirB-faq, .dirB.mono.dark .dirB-truth, .dirB.mono.dark .dirB-mech,
.dirB.mono.dark .dirB-pullq, .dirB.mono.dark .dirB-final {
  border-top-color: #2a2a2a;
}
.dirB.mono.dark .dirB-icp-grid { border-top-color: #2a2a2a; }
.dirB.mono.dark .dirB-icp-col { border-bottom-color: #2a2a2a; }
.dirB.mono.dark .dirB-icp-col:nth-child(odd) { border-right-color: #2a2a2a; }

/* ICP fit/unfit */
.dirB.mono.dark .dirB-icp-col.fit h4 { color: #f5f5f5; }
.dirB.mono.dark .dirB-icp-col.unfit h4 { color: #6a6a6a; }
.dirB.mono.dark .dirB-icp-col.fit li::before { color: #f5f5f5; }
.dirB.mono.dark .dirB-icp-col.unfit li::before { color: #6a6a6a; }

/* Mech */
.dirB.mono.dark .dirB-mech-card { border-color: #2a2a2a; }
.dirB.mono.dark .dirB-mech-card .vrow { border-color: #2a2a2a; }
.dirB.mono.dark .dirB-mech-card .vrow.bad .v { color: #d4d4d4; }
.dirB.mono.dark .dirB-mech-card .vrow.good .v { color: #a8a8a8; }
.dirB.mono.dark .dirB-mech-step .num { color: #a8a8a8; }

/* Mock UI surface neutralization on dark */
.dirB.mono.dark .dirB-shot, .dirB.mono.dark .dirB-carousel-shot { background: #f5f5f5; }


/* ===== Mono variants: subtle texture + sheen ===== */
.dirB.mono {
  background-color: var(--bg);
  background-image:
    /* fine grain dots */
    radial-gradient(rgba(0,0,0,0.035) 1px, transparent 1px),
    /* diagonal sheen */
    linear-gradient(115deg,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0) 18%,
      rgba(0,0,0,0) 50%,
      rgba(255,255,255,0.45) 78%,
      rgba(255,255,255,0) 100%),
    /* base wash */
    linear-gradient(180deg, #fafafa 0%, #ececec 100%);
  background-size: 3px 3px, 100% 100%, 100% 100%;
  background-attachment: scroll, scroll, scroll;
}

.dirB.mono.dark {
  background-color: #0a0a0a;
  background-image:
    /* very fine grain */
    radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    /* diagonal metallic sheen — brighter, narrower bands */
    linear-gradient(115deg,
      rgba(255,255,255,0.06) 0%,
      rgba(255,255,255,0) 22%,
      rgba(255,255,255,0) 48%,
      rgba(255,255,255,0.05) 72%,
      rgba(255,255,255,0) 100%),
    /* base graphite wash */
    linear-gradient(180deg, #0e0e0e 0%, #050505 100%);
  background-size: 3px 3px, 100% 100%, 100% 100%;
}

/* Soften section dividers so the texture continues through */
.dirB.mono section,
.dirB.mono header { background: transparent; }
.dirB.mono.dark section,
.dirB.mono.dark header { background: transparent; }

/* But keep the dark inverse blocks (bigstat, final, footer, truth.real) opaque so they read as cards */
.dirB.mono .dirB-bigstat { position: relative; z-index: 1; }
.dirB.mono.dark .dirB-bigstat { position: relative; z-index: 1; }

/* Add a soft inner-light highlight on the very top of each mono variant for the "polished" feel */
.dirB.mono::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 220px;
  background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
  z-index: 0;
}
.dirB.mono.dark::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 100%);
}
.dirB.mono { position: relative; }
.dirB.mono > *:not(.dirB-contact-backdrop):not(.dirB-track):not(.dirB-drawer-backdrop) { position: relative; z-index: 1; }


/* ===== Cursor parallax: sheen tracks the mouse ===== */
.dirB.mono {
  --mx: 50%;
  --my: 50%;
  --shift-x: 0px;
  --shift-y: 0px;
}

/* Replace the static background images with a cursor-tracked radial spotlight + shifting sheen */
.dirB.mono {
  background-image:
    /* cursor-following spotlight */
    radial-gradient(circle 600px at var(--mx) var(--my),
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.15) 30%,
      rgba(255,255,255,0) 60%),
    /* fine grain dots */
    radial-gradient(rgba(0,0,0,0.035) 1px, transparent 1px),
    /* diagonal sheen bands */
    linear-gradient(115deg,
      rgba(255,255,255,0.4) 0%,
      rgba(255,255,255,0) 18%,
      rgba(0,0,0,0) 50%,
      rgba(255,255,255,0.35) 78%,
      rgba(255,255,255,0) 100%),
    /* base wash */
    linear-gradient(180deg, #fafafa 0%, #ececec 100%);
  background-size: 100% 100%, 3px 3px, 100% 100%, 100% 100%;
  background-position: 0 0, var(--shift-x) var(--shift-y), 0 0, 0 0;
  background-attachment: scroll, scroll, scroll, scroll;
}

.dirB.mono.dark {
  background-image:
    /* cursor spotlight — brighter on dark for "wet glass" feel */
    radial-gradient(circle 500px at var(--mx) var(--my),
      rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0.04) 30%,
      rgba(255,255,255,0) 60%),
    /* fine grain */
    radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    /* diagonal metallic sheen */
    linear-gradient(115deg,
      rgba(255,255,255,0.05) 0%,
      rgba(255,255,255,0) 22%,
      rgba(255,255,255,0) 48%,
      rgba(255,255,255,0.045) 72%,
      rgba(255,255,255,0) 100%),
    /* base graphite wash */
    linear-gradient(180deg, #0e0e0e 0%, #050505 100%);
  background-size: 100% 100%, 3px 3px, 100% 100%, 100% 100%;
  background-position: 0 0, var(--shift-x) var(--shift-y), 0 0, 0 0;
}


/* ===== 3D metallic parallax — overrides the flat sheen ===== */
.dirB.mono {
  /* Light variant: layered metallic shine — sharp specular hot-spot, soft halo, wide sheen */
  background-image:
    /* SHARP specular hot-spot — small, intense, follows cursor 1:1 */
    radial-gradient(circle 180px at var(--mx) var(--my),
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.4) 25%,
      rgba(255,255,255,0) 60%),
    /* WIDE halo — slower drift, softer */
    radial-gradient(circle 700px at calc(var(--mx) * 0.92 + 4%) calc(var(--my) * 0.92 + 4%),
      rgba(255,255,255,0.35) 0%,
      rgba(255,255,255,0.08) 40%,
      rgba(255,255,255,0) 70%),
    /* shadow opposite the cursor for depth */
    radial-gradient(circle 600px at calc(100% - var(--mx)) calc(100% - var(--my)),
      rgba(0,0,0,0.08) 0%,
      rgba(0,0,0,0) 60%),
    /* fine grain */
    radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    /* diagonal sheen bands — anchored, gives the surface "rolled metal" look */
    linear-gradient(115deg,
      rgba(255,255,255,0.45) 0%,
      rgba(255,255,255,0) 14%,
      rgba(0,0,0,0.04) 30%,
      rgba(255,255,255,0) 50%,
      rgba(0,0,0,0.04) 68%,
      rgba(255,255,255,0.4) 86%,
      rgba(255,255,255,0) 100%),
    /* base metallic gradient — silver to graphite */
    linear-gradient(165deg, #f8f8f8 0%, #e2e2e2 50%, #cfcfcf 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 3px 3px, 100% 100%, 100% 100%;
  background-position: 0 0, 0 0, 0 0, var(--shift-x) var(--shift-y), 0 0, 0 0;
  background-blend-mode: normal, normal, multiply, normal, overlay, normal;
}

.dirB.mono.dark {
  /* Dark variant: gunmetal with bright specular shine */
  background-image:
    /* SHARP cool specular — like polished steel */
    radial-gradient(circle 320px at var(--mx) var(--my),
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.22) 22%,
      rgba(255,255,255,0.06) 45%,
      rgba(255,255,255,0) 70%),
    /* warmer secondary highlight, slower drift */
    radial-gradient(circle 900px at calc(var(--mx) * 0.82 + 9%) calc(var(--my) * 0.82 + 9%),
      rgba(225,235,255,0.22) 0%,
      rgba(225,235,255,0.08) 35%,
      rgba(225,235,255,0) 70%),
    /* deep shadow opposite — stronger so the lit side really pops */
    radial-gradient(circle 900px at calc(100% - var(--mx)) calc(100% - var(--my)),
      rgba(0,0,0,0.65) 0%,
      rgba(0,0,0,0.2) 40%,
      rgba(0,0,0,0) 70%),
    /* fine grain */
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    /* anchored sheen bands — punchier so the brushed-metal striping is more visible */
    linear-gradient(115deg,
      rgba(255,255,255,0.14) 0%,
      rgba(255,255,255,0) 18%,
      rgba(0,0,0,0.28) 35%,
      rgba(255,255,255,0) 50%,
      rgba(0,0,0,0.28) 65%,
      rgba(255,255,255,0.12) 84%,
      rgba(255,255,255,0) 100%),
    /* base gunmetal gradient */
    linear-gradient(165deg, #1a1a1a 0%, #0a0a0a 50%, #050505 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 3px 3px, 100% 100%, 100% 100%;
  background-position: 0 0, 0 0, 0 0, var(--shift-x) var(--shift-y), 0 0, 0 0;
}

/* Hero parallax — pronounced layered depth opposite the cursor */
.dirB.mono .dirB-hero h1 {
  transform: translate3d(calc(var(--shift-x) * -0.85), calc(var(--shift-y) * -0.85), 0);
  transition: transform 0.08s linear;
}
.dirB.mono .dirB-hero-tag,
.dirB.mono .dirB-hero-eyebrow,
.dirB.mono .dirB-hero-deck {
  transform: translate3d(calc(var(--shift-x) * -0.45), calc(var(--shift-y) * -0.45), 0);
  transition: transform 0.08s linear;
}
.dirB.mono .dirB-hero-actions {
  transform: translate3d(calc(var(--shift-x) * -0.22), calc(var(--shift-y) * -0.22), 0);
  transition: transform 0.08s linear;
}
/* ===== Typewriter + Reveal ===== */
.tw-target { }
.tw-cursor {
  display: inline-block;
  margin-left: 2px;
  opacity: 0.7;
  animation: tw-blink 0.85s steps(2) infinite;
  font-weight: 400;
  color: currentColor;
}
@keyframes tw-blink { 0%,49% { opacity: 0.85; } 50%,100% { opacity: 0; } }
.rv {
  opacity: 0;
  transform: translateY(var(--rv-y, 8px));
  transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.rv.rv-in {
  opacity: 1;
  transform: translateY(0);
}
.dirB-bigstat .ast { font-size: 0.55em; vertical-align: super; opacity: 0.7; margin-left: 2px; }
.dirB-bigstat .src { display: block; max-width: 540px; line-height: 1.45; }

/* NUDGE watermark — make sure it's visible across all variants */
.dirB.mono.dark .dirB-final::before {
  color: rgba(10,10,10,0.10) !important;
}
.dirB.mono .dirB-final::before {
  color: rgba(255,255,255,0.05) !important;
}


/* ===== Truth split — fix mono variant contrast ===== */

/* Variant B (light mono): .real side is dark, so flip everything inside it to light */
.dirB.mono .dirB-truth-side.real .tag {
  background: #f5f5f5;
  color: #0a0a0a;
}
.dirB.mono .dirB-truth-side.real h3 {
  color: #f5f5f5;
}
.dirB.mono .dirB-truth-side.real li {
  border-top-color: rgba(245,245,245,0.18);
}
.dirB.mono .dirB-truth-side.real li:last-child {
  border-bottom-color: rgba(245,245,245,0.18);
}
.dirB.mono .dirB-truth-side.real li .num {
  color: rgba(245,245,245,0.55);
}

/* Variant B: .lie side stays light — keep the tag dark, num dark, borders dark (already fine via base) */
.dirB.mono .dirB-truth-side.lie .tag {
  background: #0a0a0a;
  color: #f5f5f5;
}
.dirB.mono .dirB-truth-side.lie li .num {
  color: rgba(10,10,10,0.55);
}

/* Variant C (dark mono): .lie side is dark, .real side is light */
/* .lie on dark: tag must be light-on-dark, num light, borders dim-light */
.dirB.mono.dark .dirB-truth-side.lie .tag {
  background: #f5f5f5 !important;
  color: #0a0a0a !important;
}
.dirB.mono.dark .dirB-truth-side.lie h3 {
  color: #f5f5f5;
}
.dirB.mono.dark .dirB-truth-side.lie li {
  border-top-color: rgba(245,245,245,0.18);
  color: #c5c5c5;
}
.dirB.mono.dark .dirB-truth-side.lie li:last-child {
  border-bottom-color: rgba(245,245,245,0.18);
}
.dirB.mono.dark .dirB-truth-side.lie li .num {
  color: rgba(245,245,245,0.55);
}

/* .real on light: tag dark-on-light, num dark, borders dim-dark */
.dirB.mono.dark .dirB-truth-side.real .tag {
  background: #0a0a0a !important;
  color: #f5f5f5 !important;
}
.dirB.mono.dark .dirB-truth-side.real li {
  border-top-color: rgba(10,10,10,0.18);
}
.dirB.mono.dark .dirB-truth-side.real li:last-child {
  border-bottom-color: rgba(10,10,10,0.18);
}
.dirB.mono.dark .dirB-truth-side.real li .num {
  color: rgba(10,10,10,0.55);
}

/* The vertical divider between the two halves: must contrast with BOTH backgrounds.
   In mono variants, halve the divider to a neutral so it works on either side. */
.dirB.mono .dirB-truth { border-top-color: #d8d8d8; }
.dirB.mono .dirB-truth-side { border-right-color: rgba(128,128,128,0.3); }
.dirB.mono.dark .dirB-truth { border-top-color: #2a2a2a; }
.dirB.mono.dark .dirB-truth-side { border-right-color: rgba(128,128,128,0.3); }


/* ===========================================
   SECTION SWIPE NAVIGATION
   =========================================== */

/* When swipe is ON: container is a single viewport, sections are panels on a horizontal track */
.dirB.swipe-on {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.dirB.swipe-on .dirB-track {
  display: flex;
  width: max-content;
  height: 100vh;
  transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}

.dirB.swipe-on .dirB-track > section {
  flex: 0 0 100vw;
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* center content vertically when section is shorter than viewport */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* leave room at top for the fixed header (~64px) */
  padding-top: 84px;
  padding-bottom: 40px;
  box-sizing: border-box;
}

/* Sections that are tall (faq, mech grid, icp, pricing) shouldn't center-align — top-align them and let them scroll */
.dirB.swipe-on .dirB-track > section.dirB-mech,
.dirB.swipe-on .dirB-track > section.dirB-faq,
.dirB.swipe-on .dirB-track > section.dirB-stack,
.dirB.swipe-on .dirB-track > section.dirB-icp,
.dirB.swipe-on .dirB-track > section.dirB-product,
.dirB.swipe-on .dirB-track > section.dirB-pricing {
  justify-content: flex-start;
}

/* Header stays fixed on top in swipe mode */
.dirB.swipe-on .dirB-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}

/* Footer hidden in swipe mode (it's at the end of a section already, or could be floated) */
.dirB.swipe-on .dirB-foot {
  display: none;
}

/* Hide internal scrollbars on section panels for cleaner look */
.dirB.swipe-on .dirB-track > section::-webkit-scrollbar { width: 0; height: 0; }
.dirB.swipe-on .dirB-track > section { scrollbar-width: none; }

/* Floating swipe-mode toggle */
.dirB-swipe-toggle {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(20, 17, 13, 0.85);
  color: #f6f5f2;
  border: 1px solid rgba(246, 245, 242, 0.15);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 200ms, transform 200ms;
  opacity: 0.55;
}
.dirB-swipe-toggle:hover { opacity: 1; transform: translateY(-1px); }
.dirB-swipe-toggle-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f6f5f2;
  display: inline-block;
  transition: background 200ms;
}
.dirB-swipe-toggle-dot[data-on="true"] { background: #d63927; box-shadow: 0 0 0 3px rgba(214,57,39,0.18); }
.dirB.mono .dirB-swipe-toggle-dot[data-on="true"] { background: #f6f5f2; box-shadow: 0 0 0 3px rgba(246,245,242,0.15); }

/* In swipe mode, sections that had top-borders for stacking visuals shouldn't show them */
.dirB.swipe-on .dirB-bigstat,
.dirB.swipe-on .dirB-truth,
.dirB.swipe-on .dirB-mech,
.dirB.swipe-on .dirB-product,
.dirB.swipe-on .dirB-stack,
.dirB.swipe-on .dirB-prebook,
.dirB.swipe-on .dirB-final {
  border-top: none !important;
}

/* The compare-stage layout interferes — when swipe-on, each variant is its own viewport; 
   but the compare-stage flexes them horizontally, so the user pans across variants by horizontal scroll on body.
   That's fine. */

/* Reduce side padding inside swipe sections so content fits */
.dirB.swipe-on .dirB-track > section {
  padding-left: 0;
  padding-right: 0;
}

/* For tall sections that need to scroll internally, allow them more vertical room */
.dirB.swipe-on .dirB-prebook,
.dirB.swipe-on .dirB-mech,
.dirB.swipe-on .dirB-stack,
.dirB.swipe-on .dirB-product {
  padding-top: 100px !important;
}

/* Hero is full-screen, no padding constraints */
.dirB.swipe-on .dirB-hero {
  padding: 84px 48px 48px !important;
}

/* Final CTA full-screen */
.dirB.swipe-on .dirB-final {
  padding: 84px 48px 48px !important;
}

/* Bigstat full-screen — see the dedicated rule below for the actual sizing.
   This used to set padding on its own; the canonical version lives further
   down so it wins on rule order. */

/* Truth split full-screen */
.dirB.swipe-on .dirB-truth {
  padding: 84px 48px 48px !important;
  height: 100vh;
}


/* ===========================================
   SWIPE MODE: Content fits 100vh
   =========================================== */

/* HERO — was 132px h1 + tape, way too tall. Compact. */
.dirB.swipe-on .dirB-hero h1 {
  font-size: clamp(56px, 7vw, 96px) !important;
  line-height: 0.95 !important;
  margin: 14px 0 22px !important;
}
.dirB.swipe-on .dirB-hero-deck {
  font-size: clamp(15px, 1.4vw, 19px) !important;
  margin: 0 0 24px !important;
  max-width: 640px;
}
.dirB.swipe-on .dirB-hero-tag,
.dirB.swipe-on .dirB-hero-eyebrow {
  margin-bottom: 0 !important;
}
.dirB.swipe-on .dirB-hero-actions {
  margin-top: 8px !important;
}
.dirB.swipe-on .dirB-hero {
  max-width: none;
  align-items: flex-start;
  padding: 110px 56px 40px !important;
}

/* TRUTH split — was a tall section, fix to 100vh grid */
.dirB.swipe-on .dirB-truth {
  height: 100vh !important;
  padding: 110px 48px 40px !important;
  align-items: stretch;
}
.dirB.swipe-on .dirB-truth-side h3 {
  font-size: clamp(34px, 3.6vw, 56px) !important;
  margin: 16px 0 20px !important;
}
.dirB.swipe-on .dirB-truth-side li {
  padding: 12px 0 !important;
  font-size: 14px !important;
}

/* BIGSTAT in swipe mode — single-viewport layout.
   Pinned to flex-start so the title can't slip behind the fixed header,
   and overflow:hidden so nothing leaks past the panel bottom. The content
   is sized to fit 100vh − header − padding on any reasonable viewport. */
.dirB.swipe-on .dirB-bigstat {
  height: 100vh;
  padding: 100px 48px 36px !important;
  gap: 20px !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
}
.dirB.swipe-on .dirB-bigstat-head h2 {
  font-size: clamp(32px, 4.2vw, 56px) !important;
  margin: 8px 0 12px !important;
}
.dirB.swipe-on .dirB-bigstat-row {
  padding: 16px 0 !important;
  gap: 36px !important;
}
.dirB.swipe-on .dirB-bigstat-row .punch-num {
  font-size: clamp(110px, 12vw, 170px) !important;
}
.dirB.swipe-on .dirB-bigstat-row .punch-line {
  font-size: clamp(16px, 1.5vw, 20px) !important;
}
.dirB.swipe-on .dirB-bigstat-row .punch-cascade li {
  font-size: clamp(13px, 1.2vw, 16px) !important;
}
.dirB.swipe-on .deal-grid {
  width: clamp(200px, 18vw, 280px) !important;
  padding: 10px !important;
  gap: 3px !important;
}
.dirB.swipe-on .dirB-bigstat-stats { gap: 20px !important; }
.dirB.swipe-on .dirB-bigstat-stats b {
  font-size: clamp(24px, 2.6vw, 34px) !important;
}

/* MECH — 3 columns of cards. Reduce padding + cap heights so the grid fits. */
.dirB.swipe-on .dirB-mech {
  padding: 110px 48px 40px !important;
}
.dirB.swipe-on .dirB-mech-head h2 {
  font-size: clamp(32px, 4.2vw, 56px) !important;
  margin: 8px 0 12px !important;
}
.dirB.swipe-on .dirB-mech-step h3 {
  font-size: 22px !important;
  margin: 8px 0 10px !important;
}
.dirB.swipe-on .dirB-mech-step p {
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 0 14px !important;
}
.dirB.swipe-on .dirB-mech-step .demo .row {
  padding: 8px 12px !important;
  font-size: 12px !important;
}

/* PRODUCT — was 2193px. Hide the bottom pull-quote in swipe mode and compress carousel chrome. */
.dirB.swipe-on .dirB-product {
  padding: 110px 48px 40px !important;
}
.dirB.swipe-on .dirB-product-head h2 {
  font-size: clamp(32px, 4.2vw, 56px) !important;
  margin: 8px 0 12px !important;
}
.dirB.swipe-on .dirB-product-head p {
  font-size: 15px !important;
  line-height: 1.5 !important;
  margin: 0 0 18px !important;
  max-width: 720px;
}
.dirB.swipe-on .dirB-pullq {
  display: none !important; /* moves to its own slot via the truth section anyway; hide here */
}

/* STACK — vertical layered tower, fits if layers are compact */
.dirB.swipe-on .dirB-stack {
  padding: 100px 48px 36px !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
}
.dirB.swipe-on .dirB-stack h2 {
  font-size: clamp(32px, 4.2vw, 56px) !important;
  margin: 8px 0 16px !important;
}
.dirB.swipe-on .dirB-stack-tower { gap: 4px !important; max-width: 860px !important; }
.dirB.swipe-on .dirB-stack-layer {
  padding: 12px 22px !important;
  gap: 22px !important;
}
.dirB.swipe-on .dirB-stack-layer .layer-name {
  font-size: 18px !important;
}
.dirB.swipe-on .dirB-stack-layer .layer-does {
  font-size: 13px !important;
}
.dirB.swipe-on .dirB-stack-layer .layer-verdict {
  font-size: 10px !important;
}
.dirB.swipe-on .dirB-stack-layer.is-nudge { padding: 16px 22px !important; }
.dirB.swipe-on .dirB-stack-layer.is-nudge .layer-name { font-size: 24px !important; }
.dirB.swipe-on .dirB-stack-layer.is-nudge .layer-does { font-size: 13.5px !important; }

/* REPLACES — pin to flex-start so the header doesn't eat the title,
   compress padding + gaps so the head + 5 rows + summary all fit in 100vh. */
.dirB.swipe-on .dirB-replaces {
  padding: 100px 48px 36px !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  overflow: hidden !important;
}
.dirB.swipe-on .dirB-stack-replaces-head h2,
.dirB.swipe-on .dirB-stack-replaces-head h3 {
  font-size: clamp(32px, 4.2vw, 56px) !important;
  margin: 8px 0 12px !important;
}
.dirB.swipe-on .dirB-stack-replaces-head p {
  font-size: 14px !important;
}
.dirB.swipe-on .dirB-stack-replace { padding: 12px 0 !important; gap: 14px !important; }
.dirB.swipe-on .dirB-stack-replace .cat { font-size: 16px !important; }
.dirB.swipe-on .dirB-stack-replace .ex { font-size: 10.5px !important; }
.dirB.swipe-on .dirB-stack-replace .price .amt { font-size: 20px !important; }
.dirB.swipe-on .dirB-stack-replace .total { font-size: 12px !important; }
.dirB.swipe-on .dirB-stack-replaces-sum {
  padding: 18px 22px !important;
  gap: 12px !important;
}
.dirB.swipe-on .dirB-stack-replaces-sum .col b { font-size: clamp(28px, 3vw, 36px) !important; }
.dirB.swipe-on .dirB-stack-replaces-sum .save { font-size: 13px !important; padding-top: 12px !important; }

/* PREBOOK — shared swipe-mode sizing for the merged fit + faq section.
   Container scrolls if needed; tab body is compact so each panel fits. */
.dirB.swipe-on .dirB-prebook {
  padding: 100px 48px 36px !important;
  justify-content: flex-start !important;
  overflow-y: auto !important;
}
.dirB.swipe-on .dirB-prebook h2 {
  font-size: clamp(32px, 4.2vw, 56px) !important;
  margin: 8px 0 12px !important;
}
.dirB.swipe-on .dirB-prebook-deck { font-size: 14px !important; }
.dirB.swipe-on .dirB-prebook-head { margin-bottom: 18px !important; }
.dirB.swipe-on .dirB-prebook-tab { padding: 14px 20px !important; }
.dirB.swipe-on .prebook-tab-label { font-size: 15px !important; }
.dirB.swipe-on .dirB-prebook-panel { padding: 20px !important; }
.dirB.swipe-on .dirB-fit-meter { padding: 18px 22px !important; gap: 8px !important; }
.dirB.swipe-on .dirB-fit-count b { font-size: 48px !important; }
.dirB.swipe-on .dirB-fit-count .of,
.dirB.swipe-on .dirB-fit-count .total { font-size: 28px !important; }
.dirB.swipe-on .dirB-fit-verdict { padding: 18px 22px !important; }
.dirB.swipe-on .dirB-fit-verdict-headline { font-size: clamp(18px, 2vw, 24px) !important; }
.dirB.swipe-on .dirB-fit-verdict-sub { font-size: 13px !important; }
.dirB.swipe-on .dirB-fit-item {
  padding: 12px 22px !important;
  font-size: 15.5px !important;
  gap: 14px !important;
}
.dirB.swipe-on .dirB-fit-item.is-on { padding-left: 28px !important; }

/* FAQ inspector inside the prebook panel — keep the rules that scale the
   inspector's own internal type for swipe mode (still applies when the FAQ
   tab is active). The wrapping section padding/centering is handled above
   by .dirB-prebook itself. */
.dirB.swipe-on .dirB-faq-question { padding: 12px 18px !important; }
.dirB.swipe-on .dirB-faq-question-text { font-size: 14px !important; }
.dirB.swipe-on .dirB-faq-detail { padding: 22px 24px !important; gap: 14px !important; }
.dirB.swipe-on .dirB-faq-detail-q { font-size: clamp(18px, 2vw, 24px) !important; }
.dirB.swipe-on .dirB-faq-detail-a { font-size: 14.5px !important; }

/* FINAL CTA */
.dirB.swipe-on .dirB-final {
  padding: 110px 48px 40px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dirB.swipe-on .dirB-final h2 {
  font-size: clamp(56px, 7vw, 100px) !important;
  margin: 18px 0 22px !important;
}
.dirB.swipe-on .dirB-final p {
  font-size: 17px !important;
  margin: 0 0 28px !important;
}

/* GLOBAL: cap any internal scrollbar that does appear, since we want visual cleanliness */
.dirB.swipe-on .dirB-track > section {
  scrollbar-color: rgba(0,0,0,0.2) transparent;
}


/* ===========================================
   TRUTH BEATS — sequential strikethrough beats (replaces the paired grid)
   =========================================== */
.dirB-truth-beats {
  display: flex !important;
  flex-direction: column;
  gap: 36px;
  padding: 100px 64px !important;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.dirB-truth-beats .dirB-truth-head {
  max-width: 900px;
}
.dirB-truth-beats .dirB-truth-head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 12px 0 16px;
}
.dirB-truth-beats .dirB-truth-head .deck {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 640px;
}
.dirB-truth-beats-list {
  list-style: none;
  margin: 0;
  padding: 24px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  display: grid;
  gap: 0;
}
.truth-beat {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.truth-beat-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  font-feature-settings: "tnum" 1;
  padding-top: 6px;
}
.truth-beat-body {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.truth-beat-lie {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--ink-soft);
  transition: color 400ms ease;
}
.truth-beat-lie .strikethrough {
  position: relative;
  display: inline;
}
/* Strikethrough line — starts at scaleX(0). When the beat scrolls into view,
   .is-revealed flips and the line draws across over 500ms after --strike-delay. */
.truth-beat-lie .strikethrough::after {
  content: "";
  position: absolute;
  left: -2px; right: -2px;
  top: 52%;
  height: 1.5px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--strike-delay, 0ms);
}
.truth-beat.is-revealed .truth-beat-lie .strikethrough::after {
  transform: scaleX(1);
}
.truth-beat.is-revealed .truth-beat-lie {
  color: var(--ink-faint);
}

.truth-beat-real {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 12px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 480ms cubic-bezier(.2,.7,.2,1), transform 480ms cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.truth-beat.is-revealed .truth-beat-real {
  opacity: 1;
  transform: none;
}
.truth-beat-real .arrow {
  font-family: var(--mono);
  font-size: 0.7em;
  color: var(--red);
  flex: 0 0 auto;
}
.truth-beat-real strong { color: var(--ink); font-weight: 700; }

.dirB-truth-beats-foot {
  margin-top: 12px;
  padding-top: 28px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  display: grid;
  gap: 8px;
}
.dirB-truth-beats-foot .lie-verdict {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 28px);
  color: var(--ink-soft);
  letter-spacing: -0.018em;
}
.dirB-truth-beats-foot .lie-verdict .strikethrough {
  position: relative;
  display: inline;
}
.dirB-truth-beats-foot .lie-verdict .strikethrough::after {
  content: "";
  position: absolute;
  left: -4px; right: -4px;
  top: 56%;
  height: 2px;
  background: var(--red);
}
.dirB-truth-beats-foot .real-verdict {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(32px, 3.8vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--ink);
}


/* Mono-dark overrides */
.dirB.mono.dark .dirB-truth-beats-list { border-top-color: rgba(245,245,245,0.18); }
.dirB.mono.dark .truth-beat { border-bottom-color: rgba(245,245,245,0.10); }
.dirB.mono.dark .truth-beat-num { color: rgba(245,245,245,0.45); }
.dirB.mono.dark .truth-beat-lie { color: rgba(245,245,245,0.55); }
.dirB.mono.dark .truth-beat-real { color: #f5f5f5; }
.dirB.mono.dark .truth-beat-real .arrow { color: #d8a14a; }
.dirB.mono.dark .truth-beat-lie .strikethrough::after,
.dirB.mono.dark .dirB-truth-beats-foot .lie-verdict .strikethrough::after {
  background: #d8a14a;
}
.dirB.mono.dark .dirB-truth-beats-foot { border-top-color: rgba(245,245,245,0.18); }
.dirB.mono.dark .dirB-truth-beats-foot .lie-verdict { color: rgba(245,245,245,0.55); }
.dirB.mono.dark .dirB-truth-beats-foot .real-verdict { color: #f5f5f5; }

@media (max-width: 1100px) {
  .dirB-truth-beats { padding: 72px 28px !important; gap: 28px; }
  .truth-beat { grid-template-columns: 40px 1fr; gap: 14px; padding: 16px 0; }
  .truth-beat-lie, .truth-beat-real { font-size: 18px; }
  .dirB-truth-beats-foot .real-verdict { font-size: 28px; }
}

/* Swipe mode */
.dirB.swipe-on .dirB-truth-beats {
  padding: 100px 64px 36px !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  gap: 18px !important;
}
.dirB.swipe-on .dirB-truth-beats .dirB-truth-head h2 {
  font-size: clamp(32px, 4.2vw, 56px) !important;
  margin: 8px 0 12px !important;
}
.dirB.swipe-on .dirB-truth-beats .dirB-truth-head .deck { font-size: 14px !important; }
.dirB.swipe-on .truth-beat { padding: 12px 0 !important; }
.dirB.swipe-on .truth-beat-lie, .dirB.swipe-on .truth-beat-real {
  font-size: clamp(16px, 1.6vw, 22px) !important;
}
.dirB.swipe-on .dirB-truth-beats-foot { padding-top: 18px !important; }
.dirB.swipe-on .dirB-truth-beats-foot .real-verdict {
  font-size: clamp(24px, 2.8vw, 36px) !important;
}

/* ===========================================
   TRUTH SIMPLE — one message, one illustration
   =========================================== */
.dirB-truth-simple {
  display: grid !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  align-items: center;
  gap: clamp(64px, 10vw, 140px);
  padding: 140px 64px !important;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.dirB-truth-simple-copy {
  max-width: 720px;
}
.dirB-truth-simple-copy .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dirB-truth-simple-copy h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(64px, 7vw, 108px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 18px 0 24px;
}
.dirB-truth-simple-copy p {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(26px, 2.8vw, 42px);
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: var(--ink-soft);
  max-width: 560px;
}
.dirB-truth-simple-viz {
  display: grid;
  gap: 42px;
  padding: clamp(18px, 2vw, 28px) 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  background: transparent;
  min-height: 320px;
  align-content: center;
}
.truth-lane {
  display: grid;
  gap: 14px;
}
.lane-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.lane-line {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
}
.lane-line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
}
.truth-lane.seller .lane-line {
  justify-content: space-between;
}
.lane-dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.truth-lane.buyer .lane-line {
  justify-content: flex-end;
}
.lane-flat {
  position: absolute;
  left: 0;
  right: 210px;
  top: 50%;
  height: 1px;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
}
.lane-stop {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.truth-viz-caption {
  margin: 2px 0 0;
  padding-top: 26px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  font-family: var(--display);
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.dirB.mono.dark .dirB-truth-simple {
  border-top-color: rgba(245,245,245,0.12);
  border-bottom-color: rgba(245,245,245,0.12);
}
.dirB.mono.dark .dirB-truth-simple-copy .label,
.dirB.mono.dark .dirB-truth-simple-copy p,
.dirB.mono.dark .lane-label {
  color: rgba(245,245,245,0.58);
}
.dirB.mono.dark .dirB-truth-simple-copy h2,
.dirB.mono.dark .truth-viz-caption {
  color: #f5f5f5;
}
.dirB.mono.dark .dirB-truth-simple-viz {
  border-top-color: rgba(245,245,245,0.12);
  border-bottom-color: rgba(245,245,245,0.12);
  background: transparent;
}
.dirB.mono.dark .lane-line::before,
.dirB.mono.dark .lane-flat {
  background: rgba(245,245,245,0.18);
}
.dirB.mono.dark .lane-dot {
  border-color: rgba(245,245,245,0.22);
  background: #0a0a0a;
  color: rgba(245,245,245,0.82);
}
.dirB.mono.dark .lane-stop {
  border-color: #f5f5f5;
  background: #f5f5f5;
  color: #0a0a0a;
}
.dirB.mono.dark .truth-viz-caption {
  border-top-color: rgba(245,245,245,0.12);
}
@media (max-width: 1100px) {
  .dirB-truth-simple {
    grid-template-columns: 1fr;
    padding: 78px 28px !important;
    gap: 36px;
  }
  .dirB-truth-simple-viz { min-height: 300px; }
}
@media (max-width: 640px) {
  .dirB-truth-simple-copy h2 { font-size: clamp(42px, 13vw, 62px); }
  .dirB-truth-simple-copy p { font-size: 22px; }
  .dirB-truth-simple-viz { padding: 22px; gap: 26px; }
  .lane-dot { width: 60px; font-size: 9px; }
  .lane-stop { white-space: normal; text-align: center; }
  .lane-flat { right: 130px; }
}
.dirB.swipe-on .dirB-truth-simple {
  height: 100vh !important;
  padding: 112px 64px 56px !important;
  overflow: hidden !important;
}
.dirB.swipe-on .dirB-truth-simple-copy h2 {
  font-size: clamp(48px, 5.8vw, 84px) !important;
}
.dirB.swipe-on .dirB-truth-simple-copy p {
  font-size: clamp(22px, 2.2vw, 34px) !important;
}
.dirB.swipe-on .dirB-truth-simple-viz {
  min-height: 320px;
}

/* ===========================================
   TRUTH PAIRED — one-vs-one comparison rows (legacy)
   =========================================== */

.dirB-truth-paired {
  display: flex !important;
  flex-direction: column;
  gap: 28px;
  padding: 96px 64px !important;
  border-top: 1px solid var(--ink);
  background: var(--bg);
}

.dirB-truth-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 8px;
}
.dirB-truth-head .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.dirB-truth-head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 4.5vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0;
  max-width: 900px;
}

/* Reveal inside h1 must be inline-block so translateY still applies */
.dirB-hero h1 .rv {
  display: inline-block;
}

/* === Header row: editorial labels, no pills === */
.dirB-truth-paired-head {
  display: grid;
  grid-template-columns: 1fr 110px 1fr;
  gap: 32px;
  align-items: end;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(245,245,245,0.18);
  position: relative;
}
.dirB-truth-paired-head .col-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dirB-truth-paired-head .col-head .tag {
  background: transparent !important;
  color: rgba(245,245,245,0.45) !important;
  padding: 0 !important;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.dirB-truth-paired-head .col-head .sub {
  display: block;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.dirB-truth-paired-head .col-head.real {
  text-align: right;
  align-items: flex-end;
}

/* === Paired rows — central rail, italic strike on lie, clean accent on real === */
.dirB-truth-pairs {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-top: 8px;
}
.dirB-truth-pairs::before {
  /* continuous vertical hairline through the central column */
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(245,245,245,0.10);
  transform: translateX(-50%);
  pointer-events: none;
}
.dirB-truth-pairs .pair {
  display: grid;
  grid-template-columns: 1fr 110px 1fr;
  gap: 32px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid rgba(245,245,245,0.07) !important;
  font-size: 17px;
  line-height: 1.4;
  position: relative;
  transition: background 240ms ease;
}
.dirB-truth-pairs .pair:hover {
  background: rgba(245,245,245,0.025);
}
.dirB-truth-pairs .pair:last-child {
  border-bottom: none !important;
}

.dirB-truth-pairs .pair-lie {
  display: flex;
  align-items: baseline;
  gap: 18px;
  color: rgba(245,245,245,0.55) !important;
  font-style: italic;
  text-decoration: line-through;
  text-decoration-color: rgba(245,245,245,0.22);
  text-decoration-thickness: 1px;
}
.dirB-truth-pairs .pair-lie .num {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(245,245,245,0.32);
  letter-spacing: 0.18em;
  flex: 0 0 auto;
  text-decoration: none;
  font-style: normal;
}
.dirB-truth-pairs .pair-lie strong {
  font-weight: 700;
  color: rgba(245,245,245,0.7);
}

.dirB-truth-pairs .pair-vs {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(245,245,245,0.30);
  text-align: center;
  border: none !important;
  padding: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dirB-truth-pairs .pair-vs::before,
.dirB-truth-pairs .pair-vs::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 16px;
  height: 1px;
  background: rgba(245,245,245,0.20);
  transform: translateY(-50%);
}
.dirB-truth-pairs .pair-vs::before { left: 16px; }
.dirB-truth-pairs .pair-vs::after  { right: 16px; }

.dirB-truth-pairs .pair-real {
  text-align: right;
  color: var(--ink) !important;
  font-weight: 500;
  position: relative;
  padding-right: 18px;
}
.dirB-truth-pairs .pair-real::after {
  /* tiny anchored accent — full-bright bar to mark "this is the truth" side */
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 18px;
  background: var(--ink);
  border-radius: 1px;
  opacity: 0.85;
}

/* === Footer verdicts === */
.dirB-truth-paired-foot {
  display: grid;
  grid-template-columns: 1fr 110px 1fr;
  gap: 32px;
  align-items: center;
  padding-top: 28px;
  margin-top: 8px;
  border-top: 1px solid rgba(245,245,245,0.18);
}
.dirB-truth-paired-foot .lie-verdict {
  font-family: var(--display);
  font-style: italic;
  font-size: 28px;
  color: rgba(245,245,245,0.40) !important;
  text-decoration: line-through;
  text-decoration-color: rgba(245,245,245,0.28);
}
.dirB-truth-paired-foot .real-verdict {
  font-family: var(--display);
  font-weight: 700;
  font-size: 36px;
  color: var(--ink) !important;
  text-align: right;
  letter-spacing: -0.02em;
  grid-column: 3;
}

/* ===== Mono variants ===== */
/* Variant B (light mono) */
.dirB.mono .dirB-truth-paired-head .col-head.real .tag {
  background: #0a0a0a;
  color: #f5f5f5;
}
.dirB.mono .dirB-truth-paired-head .col-head.real .sub {
  color: #0a0a0a;
}
.dirB.mono .dirB-truth-pairs .pair-real {
  color: #0a0a0a;
}
.dirB.mono .dirB-truth-paired-foot .real-verdict {
  color: #0a0a0a;
}

/* Variant C (dark mono) */
.dirB.mono.dark .dirB-truth-paired {
  background: #0a0a0a;
  border-top-color: #2a2a2a;
}
.dirB.mono.dark .dirB-truth-paired-head {
  border-bottom-color: rgba(245,245,245,0.18);
}
.dirB.mono.dark .dirB-truth-paired-head .col-head.lie .tag {
  background: #f5f5f5;
  color: #0a0a0a;
}
.dirB.mono.dark .dirB-truth-paired-head .col-head.lie .sub,
.dirB.mono.dark .dirB-truth-pairs .pair-lie {
  color: #c5c5c5;
}
.dirB.mono.dark .dirB-truth-paired-head .col-head.real .tag {
  background: #f5f5f5;
  color: #0a0a0a;
}
.dirB.mono.dark .dirB-truth-paired-head .col-head.real .sub,
.dirB.mono.dark .dirB-truth-pairs .pair-real,
.dirB.mono.dark .dirB-truth-paired-foot .real-verdict {
  color: #f5f5f5;
}
.dirB.mono.dark .dirB-truth-pairs .pair {
  border-bottom-color: rgba(245,245,245,0.12);
}
.dirB.mono.dark .dirB-truth-pairs .pair:last-child {
  border-bottom-color: rgba(245,245,245,0.3);
}
.dirB.mono.dark .dirB-truth-pairs .pair-vs {
  color: rgba(245,245,245,0.4);
  border-left-color: rgba(245,245,245,0.15);
  border-right-color: rgba(245,245,245,0.15);
}
.dirB.mono.dark .dirB-truth-paired-foot .lie-verdict {
  color: rgba(245,245,245,0.45);
  text-decoration-color: rgba(245,245,245,0.3);
}
.dirB.mono.dark .dirB-truth-pairs .pair-lie .num {
  color: rgba(245,245,245,0.45);
}

/* Override the old side-based styling so it doesn't double up */
.dirB-truth-paired .dirB-truth-side { display: none !important; }

/* === Block-reveal — SCOPED TO #evidence ONLY ===
   Every other section has SECTION_BLOCKS=1, so a single swipe moves on; their
   data-block-index attributes are kept for structure but no longer drive any
   visual gating. The demo-pain section keeps the progressive reveal because
   the punch-then-proof beat is the deliberate dramatic build of the page. */
.dirB.swipe-on .dirB-track > section#evidence [data-block-index] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 600ms cubic-bezier(.2,.7,.2,1),
    transform 600ms cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
  will-change: opacity, transform;
}
.dirB.swipe-on .dirB-track > section#evidence[data-revealed-up-to] [data-block-index="0"] {
  opacity: 1; transform: none; pointer-events: auto;
}
.dirB.swipe-on .dirB-track > section#evidence[data-revealed-up-to="1"] [data-block-index="1"],
.dirB.swipe-on .dirB-track > section#evidence[data-revealed-up-to="2"] [data-block-index="1"] {
  opacity: 1; transform: none; pointer-events: auto;
  transition-delay: 80ms;
}
.dirB.swipe-on .dirB-track > section#evidence[data-revealed-up-to="2"] [data-block-index="2"] {
  opacity: 1; transform: none; pointer-events: auto;
  transition-delay: 80ms;
}

/* ===========================================================
   Amber accent (#d8a14a) — used very lightly on payoff lines,
   verification indicators, and Nudge-side emphases. Dark variant only.
   =========================================================== */

/* Truth — verdict line and the right-edge accent bar on each "real" cell */
.dirB.mono.dark .dirB-truth-paired-foot .real-verdict {
  color: #d8a14a !important;
  text-shadow: 0 0 18px rgba(216,161,74,0.20);
}
.dirB.mono.dark .dirB-truth-pairs .pair-real::after {
  background: #d8a14a;
  opacity: 0.85;
}

/* Mech — verification (good) values get a soft amber tint */
.dirB.mono.dark .dirB-mech-step .demo .row .v.good {
  color: #d8a14a;
}

/* Product pull-quote — the "It should progress because the buyer moved" payoff */
.dirB.mono.dark .dirB-pullq blockquote .red {
  color: #d8a14a;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  filter: drop-shadow(0 0 18px rgba(216,161,74,0.18));
}

/* Stack — the Nudge row's closing tag and arrow read as Nudge's answer */
.dirB.mono.dark .dirB-stack-row.nudge .stops {
  color: #d8a14a;
}
.dirB.mono.dark .dirB-stack-row.nudge .cat .arrow {
  color: #d8a14a;
  opacity: 0.85;
}

/* ICP — Strong fit checkmarks tinted amber (the column-header stays neutral) */
.dirB.mono.dark .dirB-icp-col.fit li::before {
  color: #d8a14a;
}

/* In swipe mode, fits 100vh */
.dirB.swipe-on .dirB-truth-paired {
  padding: 100px 64px 40px !important;
}
.dirB.swipe-on .dirB-truth-pairs .pair {
  padding: 12px 0 !important;
  font-size: 15px !important;
}
.dirB.swipe-on .dirB-truth-paired-head .col-head .sub {
  font-size: 19px !important;
}
.dirB.swipe-on .dirB-truth-paired-foot .lie-verdict {
  font-size: 22px;
}
.dirB.swipe-on .dirB-truth-paired-foot .real-verdict {
  font-size: 28px;
}


/* ===========================================
   PREMIUM PRODUCT SCREENSHOT FRAME
   =========================================== */

/* Replace the flat .dirB-carousel-shot with a layered "lifted" frame */
.dirB-carousel-shot {
  position: relative;
  border: none !important;
  background: transparent !important;
  border-radius: 18px;
  padding: 0;
  isolation: isolate;
  /* Outer drop shadow (soft, far) */
  filter: drop-shadow(0 32px 64px rgba(14, 13, 11, 0.18))
          drop-shadow(0 12px 24px rgba(14, 13, 11, 0.12));
  animation: caroLiftIn 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Soft ambient glow behind the screenshot */
.dirB-carousel-shot::before {
  content: "";
  position: absolute;
  inset: -8% -6% -4% -6%;
  background: radial-gradient(ellipse at 50% 60%,
    rgba(214, 57, 39, 0.18) 0%,
    rgba(214, 57, 39, 0.08) 25%,
    transparent 60%);
  filter: blur(40px);
  z-index: -2;
  opacity: 0.7;
  pointer-events: none;
}

/* Bezel container — rounded with inner border highlight */
.dirB-carousel-shot > * {
  border-radius: 14px !important;
  overflow: hidden;
  position: relative;
  background: #0a0a0a;
  /* Bezel edge: gradient border that simulates polished metal frame */
  box-shadow:
    /* outer ring (subtle dark frame) */
    0 0 0 1px rgba(14, 13, 11, 0.85),
    /* secondary ring for the metallic feel */
    0 0 0 2px rgba(255, 255, 255, 0.04),
    /* inner highlight at the very top edge — simulates light catching the bezel */
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    /* inner shadow at the bottom — anchors the screen in the frame */
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}

/* Top reflection sheen on the screenshot */
.dirB-carousel-shot::after {
  content: "";
  position: absolute;
  top: 0;
  left: 6%;
  right: 6%;
  height: 35%;
  border-radius: 14px 14px 50% 50% / 14px 14px 100% 100%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.03) 35%,
    transparent 70%);
  pointer-events: none;
  z-index: 2;
  opacity: 0.6;
  mix-blend-mode: screen;
}

/* Subtle parallax: tilt slightly on hover */
.dirB-carousel:hover .dirB-carousel-shot {
  transform: perspective(1400px) rotateX(0.5deg) rotateY(-1deg) translateY(-3px);
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.dirB-carousel-shot {
  transform: perspective(1400px) rotateX(0deg) rotateY(0deg);
  transition: transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes caroLiftIn {
  from {
    opacity: 0;
    transform: perspective(1400px) translateY(20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: perspective(1400px) translateY(0) scale(1);
  }
}

/* Override the old caroSlide animation since we replaced it */
.dirB-carousel-shot { animation: caroLiftIn 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) !important; }

/* ===== Mono variants — different glow tone ===== */
.dirB.mono .dirB-carousel-shot::before {
  background: radial-gradient(ellipse at 50% 60%,
    rgba(140, 140, 140, 0.25) 0%,
    rgba(100, 100, 100, 0.12) 30%,
    transparent 65%);
}
.dirB.mono .dirB-carousel-shot {
  filter: drop-shadow(0 32px 64px rgba(0, 0, 0, 0.22))
          drop-shadow(0 12px 24px rgba(0, 0, 0, 0.14));
}

.dirB.mono.dark .dirB-carousel-shot::before {
  background: radial-gradient(ellipse at 50% 60%,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.03) 35%,
    transparent 70%);
  opacity: 1;
}
.dirB.mono.dark .dirB-carousel-shot {
  filter: drop-shadow(0 32px 80px rgba(0, 0, 0, 0.6))
          drop-shadow(0 12px 24px rgba(0, 0, 0, 0.4));
}
.dirB.mono.dark .dirB-carousel-shot > * {
  box-shadow:
    0 0 0 1px rgba(245, 245, 245, 0.08),
    0 0 0 2px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}

/* Make the frame breathe — give it some space within the carousel */
.dirB-carousel-stage {
  align-items: center;
}
.dirB-carousel-shot {
  margin: 12px 0;
}


/* ===========================================
   RESPONSIVE — tablet & mobile
   =========================================== */

/* The compare-stage stacks variants horizontally for desktop review.
   On narrow screens, stack them vertically instead so each variant is fully usable. */
@media (max-width: 1100px) {
  .compare-stage {
    flex-direction: column !important;
  }
  .compare-stage > div {
    width: 100vw !important;
  }
}

/* ============== TABLET (≤ 1024px) ============== */
@media (max-width: 1024px) {
  .dirB-nav { gap: 18px; }
  .dirB-nav a { font-size: 12px; }

  .dirB-hero { padding: 16px 32px 48px !important; }
  .dirB-hero h1 { font-size: clamp(48px, 8vw, 84px) !important; }

  .dirB-carousel-stage { grid-template-columns: 1fr !important; gap: 24px !important; }
  .dirB-mech-grid { grid-template-columns: 1fr 1fr !important; }
  .dirB-icp-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .dirB-stack-row { grid-template-columns: 140px 1fr !important; }
  .dirB-stack-row .stops { grid-column: 1 / -1; padding-top: 6px; }
}

/* ============== MOBILE (≤ 768px) ============== */
@media (max-width: 768px) {
  /* Auto-disable swipe mode on mobile — vertical scroll is more natural */
  .dirB.swipe-on { width: 100% !important; height: auto !important; overflow: visible !important; }
  .dirB.swipe-on .dirB-track {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
  }
  .dirB.swipe-on .dirB-track > section {
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    padding-top: 80px !important;
    padding-bottom: 60px !important;
    display: block !important;
  }
  .dirB.swipe-on .dirB-header { position: relative !important; backdrop-filter: none !important; }
  .dirB-swipe-toggle { display: none !important; }

  .dirB-header .dirB-nav { display: none; }

  /* Hero */
  .dirB-hero {
    padding: 80px 20px 40px !important;
    min-height: auto !important;
  }
  .dirB-hero h1 {
    font-size: clamp(40px, 11vw, 60px) !important;
    line-height: 0.98 !important;
    margin: 12px 0 18px !important;
  }
  .dirB-hero-deck { font-size: 15px !important; max-width: 100% !important; }
  .dirB-hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .dirB-hero-actions a { text-align: center; }
  .dirB-hero-tag { font-size: 10px !important; }

  /* Truth paired — stack each pair vertically */
  .dirB-truth-paired { padding: 60px 20px !important; }
  .dirB-truth-paired-head {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding-bottom: 16px !important;
  }
  .dirB-truth-paired-head .col-head.real { text-align: left !important; }
  .dirB-truth-paired-head .col-head .sub { font-size: 18px !important; }
  .dirB-truth-paired-head .col-head.spacer { display: none !important; }
  .dirB-truth-pairs .pair {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 14px 0 !important;
    font-size: 14px !important;
  }
  .dirB-truth-pairs .pair-vs {
    border: none !important;
    padding: 0 !important;
    align-self: flex-start;
    text-align: left !important;
    font-size: 10px !important;
    color: rgba(20,17,13,0.45) !important;
    justify-content: flex-start !important;
  }
  .dirB-truth-pairs .pair-real { text-align: left !important; }
  .dirB-truth-paired-foot {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .dirB-truth-paired-foot .real-verdict {
    grid-column: 1 !important;
    text-align: left !important;
    font-size: 24px !important;
  }
  .dirB-truth-paired-foot .lie-verdict { font-size: 18px !important; }

  /* Bigstat — keep big number readable */
  .dirB-bigstat {
    padding: 60px 20px !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .dirB-bigstat .num { font-size: clamp(120px, 38vw, 180px) !important; line-height: 0.85 !important; }
  .dirB-bigstat .copy h3 { font-size: 20px !important; }

  /* Mech */
  .dirB-mech { padding: 60px 20px !important; }
  .dirB-mech-head h2 { font-size: clamp(36px, 9vw, 56px) !important; }
  .dirB-mech-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Product */
  .dirB-product { padding: 60px 20px !important; }
  .dirB-product-head h2 { font-size: clamp(32px, 8vw, 52px) !important; }
  .dirB-carousel-stage { padding: 0 !important; }
  .dirB-carousel-tabs {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  .dirB-carousel-tab { padding: 10px 12px !important; }
  .dirB-carousel-controls { flex-wrap: wrap; gap: 12px; }

  /* Stack */
  .dirB-stack { padding: 60px 20px !important; }
  .dirB-stack h2 { font-size: clamp(32px, 8vw, 52px) !important; }
  .dirB-stack-row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 14px 0 !important;
  }
  .dirB-stack-row .cat { font-size: 14px !important; }
  .dirB-stack-row .does { font-size: 13px !important; }
  .dirB-stack-row .stops { font-size: 11px !important; }

  /* ICP */
  .dirB-icp { padding: 60px 20px !important; }
  .dirB-icp h2 { font-size: clamp(32px, 8vw, 52px) !important; }
  .dirB-icp-grid { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* FAQ */
  .dirB-faq { padding: 60px 20px !important; }
  .dirB-faq h2 { font-size: clamp(32px, 8vw, 52px) !important; }
  .dirB-faq-q { grid-template-columns: 50px 1fr 24px !important; gap: 8px !important; padding: 14px 0 !important; }
  .dirB-faq-q .q { font-size: 15px !important; }

  /* Final CTA */
  .dirB-final {
    padding: 60px 20px !important;
    text-align: left;
  }
  .dirB-final h2 { font-size: clamp(40px, 10vw, 64px) !important; }
  .dirB-final-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .dirB-final-actions a { text-align: center !important; }

  /* Watermark "NUDGE" — shrink so it doesn't overflow */
  .dirB-final::before { font-size: 40vw !important; }

  /* Footer */
  .dirB-foot {
    flex-direction: column;
    gap: 8px;
    padding: 24px 20px !important;
  }
}

/* ============== SMALL MOBILE (≤ 380px) ============== */
@media (max-width: 380px) {
  .dirB-hero h1 { font-size: 38px !important; }
  .dirB-bigstat .num { font-size: 36vw !important; }
  .dirB-cta-mini { padding: 8px 12px !important; font-size: 11px !important; }
}

/* Force the global compare-label spacer to not eat layout on mobile */
@media (max-width: 768px) {
  .compare-label { display: none !important; }
}

/* ===========================================
   INTERACTIVE ADDY — chat input + scroll list
   =========================================== */
.mock-addy { min-height: 0; }
.mock-addy .addy-scroll {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 160px;
  max-height: 280px;
  padding-right: 4px;
  scroll-behavior: smooth;
}
.mock-addy .addy-scroll::-webkit-scrollbar { width: 4px; }
.mock-addy .addy-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
.mock-addy .msg.thinking .bubble {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 12px 14px;
}
.mock-addy .dot-typ {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,0.55);
  display: inline-block;
  animation: addyTyp 1s infinite ease-in-out;
}
.mock-addy .dot-typ:nth-child(2) { animation-delay: 0.15s; }
.mock-addy .dot-typ:nth-child(3) { animation-delay: 0.3s; }
@keyframes addyTyp {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}
.mock-addy .suggest .chip {
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.mock-addy .suggest .chip:hover {
  background: #232323;
  border-color: #3a3a3a;
  color: #fff;
  transform: translateY(-1px);
}
.mock-addy form.input {
  gap: 8px;
}
.mock-addy form.input input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: #f5f1e8;
  font-family: inherit;
  font-size: 11px;
  padding: 0;
}
.mock-addy form.input input::placeholder { color: rgba(255,255,255,0.4); }
.mock-addy form.input button.arrow {
  background: transparent;
  border: 0;
  color: #e02e1a;
  font-size: 14px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.mock-addy form.input button.arrow:disabled { opacity: 0.35; cursor: default; }
.dirB.mono .mock-addy form.input button.arrow { color: #f5f5f5; }

/* ===========================================
   PRODUCT SECTION — single viewport, horizontal slides
   =========================================== */
/* Pull quote is decorative, hide in swipe so the carousel fits */
.dirB.swipe-on .dirB-product .dirB-pullq { display: none; }

/* Tighten the section so head + tabs + slide all share one viewport */
.dirB.swipe-on .dirB-product {
  padding: 84px 48px 28px !important;
}
.dirB.swipe-on .dirB-product-head {
  margin-bottom: 18px;
}
.dirB.swipe-on .dirB-product-head h2 {
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 0.98;
  margin: 8px 0 12px;
}
.dirB.swipe-on .dirB-product-head p { display: none; }

/* Carousel layout in swipe mode — tabs first, single slide visible */
.dirB.swipe-on .dirB-carousel {
  border-top: 0;
  padding-top: 0;
  gap: 20px;
}
.dirB.swipe-on .dirB-carousel-tab { padding: 12px 14px 10px; }
.dirB.swipe-on .dirB-carousel-tab .t-name { font-size: 11px; }
.dirB.swipe-on .dirB-carousel-tab .t-num { font-size: 10px; }

/* Slide compaction */
.dirB.swipe-on .dirB-carousel-slide {
  min-height: 0;
  gap: 40px;
  align-items: center;
}
.dirB.swipe-on .dirB-carousel-copy h3 {
  font-size: 36px;
  line-height: 1.02;
  margin-bottom: 14px;
}
.dirB.swipe-on .dirB-carousel-copy p {
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 0;
}
/* In swipe mode, the wheel/swipe is the navigation — controls aren't shown */

/* Cap the screenshot height so it stays within the viewport */
.dirB.swipe-on .dirB-carousel-shot { max-height: 56vh; }
.dirB.swipe-on .dirB-carousel-shot > * { max-height: 56vh; overflow: auto; }
.dirB.swipe-on .mock-addy .addy-scroll { max-height: 22vh; min-height: 100px; }

/* Subtle hint that horizontal nav is wired to the swipe */
.dirB.swipe-on .dirB-carousel-tab.active .t-name { color: var(--red); }

/* Mono dark — keep tab borders visible against the dark surface */
.dirB.mono.dark .dirB-carousel-tabs {
  border-top-color: rgba(246,245,242,0.18);
  border-bottom-color: rgba(246,245,242,0.08);
}
.dirB.mono.dark.swipe-on .dirB-carousel-tab.active .t-name { color: #f6f5f2; }

/* ===========================================
   ADDY SLIDE — interactive cues
   =========================================== */

/* "Live · try it" pill on the screenshot frame */
.dirB-shot-livepill {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: rgba(214, 57, 39, 0.96);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(214, 57, 39, 0.4), 0 0 0 1px rgba(255,255,255,0.08) inset;
  pointer-events: none;
}
.dirB-shot-livepill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.85);
  animation: livePillPulse 1.6s ease-in-out infinite;
}
@keyframes livePillPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.0); opacity: 1; }
  50% { box-shadow: 0 0 0 5px rgba(255,255,255,0.0); opacity: 0.55; }
}

/* Try-cue under the body copy on the Addy slide */
.dirB-carousel-trycue {
  margin-top: 16px;
  padding: 10px 12px;
  border: 1px dashed rgba(214, 57, 39, 0.55);
  border-radius: 8px;
  background: rgba(214, 57, 39, 0.06);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--ink);
  display: flex;
  gap: 10px;
  align-items: center;
  max-width: 460px;
}
.dirB-carousel-trycue b { color: var(--red); font-weight: 700; }
.dirB-carousel-trycue .cue-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  animation: livePillPulse 1.6s ease-in-out infinite;
}

/* Pulse the chat input on the active Addy slide so it reads as live */
.dirB-carousel-slide.is-live[aria-hidden="false"] .mock-addy form.input {
  border-color: rgba(214, 57, 39, 0.6);
  animation: addyInputGlow 2.4s ease-in-out infinite;
}
.dirB-carousel-slide.is-live[aria-hidden="false"] .mock-addy form.input:focus-within {
  animation: none;
  border-color: rgba(214, 57, 39, 0.9);
  box-shadow: 0 0 0 3px rgba(214, 57, 39, 0.18);
}
@keyframes addyInputGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214, 57, 39, 0.45); }
  60% { box-shadow: 0 0 0 8px rgba(214, 57, 39, 0); }
}

/* Mono Dark — recolor cues to match the amber accent used elsewhere */
.dirB.mono.dark .dirB-shot-livepill {
  background: #d8a14a;
  color: #0a0a0a;
  box-shadow: 0 6px 18px rgba(216, 161, 74, 0.4), 0 0 0 1px rgba(0,0,0,0.15) inset;
}
.dirB.mono.dark .dirB-shot-livepill .dot { background: #0a0a0a; }
.dirB.mono.dark .dirB-carousel-trycue {
  border-color: rgba(216, 161, 74, 0.55);
  background: rgba(216, 161, 74, 0.08);
  color: #f6f5f2;
}
.dirB.mono.dark .dirB-carousel-trycue b { color: #d8a14a; }
.dirB.mono.dark .dirB-carousel-trycue .cue-dot { background: #d8a14a; }
.dirB.mono.dark .dirB-carousel-slide.is-live[aria-hidden="false"] .mock-addy form.input {
  border-color: rgba(216, 161, 74, 0.65);
  animation-name: addyInputGlowMono;
}
.dirB.mono.dark .dirB-carousel-slide.is-live[aria-hidden="false"] .mock-addy form.input:focus-within {
  border-color: rgba(216, 161, 74, 0.95);
  box-shadow: 0 0 0 3px rgba(216, 161, 74, 0.2);
}
@keyframes addyInputGlowMono {
  0%, 100% { box-shadow: 0 0 0 0 rgba(216, 161, 74, 0.45); }
  60% { box-shadow: 0 0 0 8px rgba(216, 161, 74, 0); }
}

/* Mono Light variant — same idea with steel tone */
.dirB.mono:not(.dark) .dirB-shot-livepill {
  background: #1a1a1a;
  color: #f6f5f2;
}
.dirB.mono:not(.dark) .dirB-carousel-trycue {
  border-color: rgba(20,17,13,0.45);
  background: rgba(20,17,13,0.04);
}
.dirB.mono:not(.dark) .dirB-carousel-trycue b { color: var(--ink); }
.dirB.mono:not(.dark) .dirB-carousel-trycue .cue-dot { background: var(--ink); }

/* ===========================================
   ASK ADDY — global floating chat (FAB + panel)
   Self-scoped tokens so the editorial treatment
   is identical regardless of mono/dark variant.
   =========================================== */
.addy-fab,
.addy-hint,
.addy-panel {
  --paper: #f6f5f2;
  --paper-2: #ecebe6;
  --ink: #14110d;
  --ink-soft: #5a5852;
  --ink-faint: #9a978f;
  --accent: #d63927;
  --accent-soft: rgba(214, 57, 39, 0.10);
  --rule: #14110d;
  --rule-soft: rgba(20, 17, 13, 0.12);
  --display: 'Inter Tight', 'Inter', 'Helvetica Neue', sans-serif;
  --mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
}

/* ----- FAB (calling card) ----- */
.addy-fab {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 250;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  font-family: var(--display);
  color: var(--ink);
  box-shadow: 0 24px 60px -20px rgba(20, 17, 13, 0.18),
              0 6px 20px -8px rgba(20, 17, 13, 0.10);
  /* Hidden until revealed: held off-stage with a tiny lift, no events. */
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.32s ease, transform 0.32s ease, background 0.18s ease, color 0.18s ease;
}
.addy-fab.is-visible {
  opacity: 0.55;          /* discrete — present but not loud */
  pointer-events: auto;
  transform: translateY(0);
}
.addy-fab.is-visible:hover,
.addy-fab.is-visible:focus-visible,
.addy-fab.is-open {
  opacity: 1;
}
.addy-fab-star {
  font-family: var(--display);
  font-size: 13px;
  color: var(--accent);
  line-height: 1;
}
.addy-fab-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1;
}
.addy-fab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  animation: addyFabDotPulse 1.6s ease-in-out infinite;
}
.addy-fab:hover,
.addy-fab.is-open {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-2px);
}
.addy-fab:hover .addy-fab-star,
.addy-fab.is-open .addy-fab-star { color: var(--accent); }
@keyframes addyFabDotPulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--accent-soft); }
  50%      { box-shadow: 0 0 0 6px rgba(214, 57, 39, 0); }
}

/* ----- Peek hint ----- */
.addy-hint {
  position: fixed;
  right: 28px;
  bottom: 86px;
  z-index: 249;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 14px 16px 13px;
  max-width: 280px;
  font-family: var(--display);
  color: var(--ink);
  box-shadow: 0 18px 40px -16px rgba(20, 17, 13, 0.22);
  animation: addyHintIn 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.addy-hint-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.addy-hint-msg {
  font-size: 14px;
  line-height: 1.4;
}
.addy-hint::after {
  content: '';
  position: absolute;
  bottom: -7px;
  right: 24px;
  width: 12px;
  height: 12px;
  background: var(--paper);
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  transform: rotate(45deg);
}
@keyframes addyHintIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ----- Panel ----- */
.addy-panel {
  position: fixed;
  right: 28px;
  bottom: 90px;
  width: 420px;
  height: 600px;
  max-height: calc(100vh - 120px);
  background: var(--paper);
  border: 1px solid var(--ink);
  z-index: 251;
  display: flex;
  flex-direction: column;
  box-shadow: 28px 28px 0 0 rgba(20, 17, 13, 0.04),
              0 30px 80px -20px rgba(20, 17, 13, 0.28);
  animation: addyPanelIn 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
  font-family: var(--display);
}
@keyframes addyPanelIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Panel header */
.addy-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--rule);
}
.addy-panel-titles { display: flex; flex-direction: column; gap: 6px; }
.addy-panel-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  color: var(--ink);
  line-height: 1;
}
.addy-panel-title .star { color: var(--accent); }
.addy-panel-status {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.addy-panel-status .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
  animation: addyFabDotPulse 1.6s ease-in-out infinite;
}
.addy-panel-close {
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  padding: 0 4px;
  transition: color 0.15s;
}
.addy-panel-close:hover { color: var(--ink); }

/* Panel body */
.addy-panel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-behavior: smooth;
}
.addy-panel-body::-webkit-scrollbar { width: 4px; }
.addy-panel-body::-webkit-scrollbar-thumb { background: var(--rule-soft); }

/* Addy messages — pull-quote treatment, no bubble */
.addy-msg-addy {
  border-left: 2px solid var(--accent);
  padding: 2px 0 2px 14px;
}
.addy-msg-addy p {
  margin: 0;
  font-family: var(--display);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
}
.addy-cursor {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: var(--accent);
  margin-left: 2px;
  vertical-align: -2px;
  animation: addyCursorBlink 0.9s steps(2, jump-none) infinite;
}
@keyframes addyCursorBlink {
  0%, 49.99%   { opacity: 1; }
  50%, 100%    { opacity: 0; }
}

/* Typing indicator (three thin square marks) */
.addy-msg-thinking {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-top: 4px;
  padding-bottom: 4px;
}
.addy-tdot {
  width: 4px;
  height: 4px;
  background: var(--ink-faint);
  display: inline-block;
  animation: addyTypMark 1s ease-in-out infinite;
}
.addy-tdot:nth-child(2) { animation-delay: 0.15s; }
.addy-tdot:nth-child(3) { animation-delay: 0.3s; }
@keyframes addyTypMark {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40%           { opacity: 1; transform: translateY(-2px); }
}

/* User messages */
.addy-msg-user {
  align-self: flex-end;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  padding: 8px 14px;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  max-width: 88%;
  border-radius: 0;
  line-height: 1.4;
}

/* Suggested-prompts list */
.addy-prompts {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule-soft);
  margin-top: 4px;
  padding-top: 14px;
}
.addy-prompts-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.addy-prompt {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  padding: 12px 0;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color 0.15s;
}
.addy-prompt:last-child { border-bottom: 0; }
.addy-prompt-arrow {
  color: var(--accent);
  font-family: var(--display);
  font-size: 14px;
  display: inline-block;
  transition: transform 0.15s;
}
.addy-prompt:hover { color: var(--accent); }
.addy-prompt:hover .addy-prompt-arrow { transform: translateX(3px); }

/* Input strip */
.addy-panel-input {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--rule);
}
.addy-panel-input input {
  flex: 1 1 auto;
  border: 0;
  border-bottom: 1.5px solid var(--ink);
  background: transparent;
  outline: none;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  padding: 6px 0;
  transition: border-color 0.15s;
  border-radius: 0;
}
.addy-panel-input input::placeholder {
  color: var(--ink-faint);
  font-style: italic;
  font-weight: 400;
}
.addy-panel-input input:focus { border-bottom-color: var(--accent); }
.addy-panel-input button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--ink);
  background: var(--paper);
  font-family: var(--display);
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  border-radius: 0;
  transition: background 0.15s, color 0.15s;
}
.addy-panel-input button:hover {
  background: var(--ink);
  color: var(--paper);
}
.addy-panel-input button:disabled {
  opacity: 0.35;
  cursor: default;
}
.addy-panel-input button:disabled:hover {
  background: var(--paper);
  color: var(--ink);
}

/* Inline mini deal-record card under Addy's reply */
.addy-deal-card {
  margin-top: 12px;
  max-width: 320px;
  border: 1px solid var(--rule-soft);
  padding: 12px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--paper);
}
.addy-deal-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.addy-deal-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.2;
}
.addy-deal-status {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}
.addy-deal-card.status-atrisk  .addy-deal-status { color: var(--accent); }
.addy-deal-card.status-stalled .addy-deal-status { color: #b07418; }
.addy-deal-card.status-healthy .addy-deal-status { color: #1f5132; }
.addy-deal-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.addy-deal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.addy-deal-bar-label { flex: 0 0 auto; }
.addy-deal-track {
  flex: 1 1 auto;
  height: 2px;
  background: var(--rule-soft);
  position: relative;
  overflow: hidden;
}
.addy-deal-fill {
  display: block;
  height: 100%;
  background: var(--ink);
  transition: width 0.4s ease;
}
.addy-deal-card.status-atrisk  .addy-deal-fill { background: var(--accent); }
.addy-deal-card.status-stalled .addy-deal-fill { background: #b07418; }
.addy-deal-card.status-healthy .addy-deal-fill { background: #1f5132; }
.addy-deal-pct { flex: 0 0 auto; color: var(--ink); font-weight: 500; }

/* Mobile — collapse panel to fill the screen */
@media (max-width: 480px) {
  .addy-fab { right: 16px; bottom: 16px; }
  .addy-hint { right: 16px; bottom: 72px; }
  .addy-panel {
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 88vh;
    max-height: 88vh;
    border-left: 0;
    border-right: 0;
  }
}

/* Reduced-motion: kill the chat anims, keep dot pulse muted */
@media (prefers-reduced-motion: reduce) {
  .addy-panel,
  .addy-hint,
  .addy-fab,
  .addy-fab-dot,
  .addy-panel-status .dot,
  .addy-cursor,
  .addy-tdot { animation: none !important; transition: none !important; }
}

/* ===== Direction B · Pricing section ===== */
.dirB-pricing {
  padding: 120px 48px 100px;
  border-bottom: 1px solid var(--rule);
}
.dirB-pricing-head {
  margin-bottom: 56px;
  max-width: 880px;
}
.dirB-pricing-head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 80px;
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 16px 0 28px;
}
.dirB-pricing-sub {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 680px;
}
.dirB-pricing-sub em {
  font-style: normal;
  color: var(--ink);
  font-weight: 600;
}

/* Plans grid — three cards, middle one elevated. No dropshadows, no fluff:
   tone the recommended plan with an inverted background so it reads as the
   default choice without color. */
.dirB-pricing-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.dirB-pricing-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 36px 32px 32px;
  border-right: 1px solid var(--ink);
  min-height: 480px;
}
.dirB-pricing-plan:last-child { border-right: none; }
.dirB-pricing-plan .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  margin-bottom: 24px;
  color: var(--ink-soft);
}
.dirB-pricing-plan h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 56px;
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0 0 14px;
}
.dirB-pricing-plan .purpose {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: 320px;
}
.dirB-pricing-plan .cap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}
.dirB-pricing-plan .cap em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dirB-pricing-plan .cap b {
  font-family: var(--display);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  font-feature-settings: "tnum" 1;
}
.dirB-pricing-plan .cap span {
  font-size: 13px;
  color: var(--ink-soft);
}
.dirB-pricing-plan .price {
  padding: 14px 0 18px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.dirB-pricing-plan .price .amount {
  font-family: var(--display);
  font-weight: 700;
  font-size: 44px;
  letter-spacing: -0.03em;
  line-height: 1;
  font-feature-settings: "tnum" 1;
}
.dirB-pricing-plan .price .cycle {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dirB-pricing-plan .value {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  font-weight: 600;
  margin: 0 0 6px;
}
.dirB-pricing-plan .includes {
  font-size: 12px;
  color: var(--ink-faint);
  margin: 0 0 24px;
  line-height: 1.45;
}
.dirB-pricing-plan .cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  background: transparent;
  transition: background 140ms ease, color 140ms ease;
  align-self: flex-start;
  cursor: pointer;
  appearance: none;
  border-radius: 0;
  text-align: left;
  line-height: 1.2;
}
.dirB-pricing-plan .cta:hover {
  background: var(--ink);
  color: var(--bg);
}

/* Recommended plan — invert surface for visible default-choice signal */
.dirB-pricing-plan.is-recommended {
  background: var(--ink);
  color: var(--bg);
}
.dirB-pricing-plan.is-recommended .num,
.dirB-pricing-plan.is-recommended .purpose,
.dirB-pricing-plan.is-recommended .cap em,
.dirB-pricing-plan.is-recommended .cap span,
.dirB-pricing-plan.is-recommended .price .cycle,
.dirB-pricing-plan.is-recommended .includes { color: color-mix(in srgb, var(--bg) 65%, transparent); }
.dirB-pricing-plan.is-recommended h3,
.dirB-pricing-plan.is-recommended .cap b,
.dirB-pricing-plan.is-recommended .price .amount,
.dirB-pricing-plan.is-recommended .value { color: var(--bg); }
.dirB-pricing-plan.is-recommended .cap,
.dirB-pricing-plan.is-recommended .price { border-top-color: color-mix(in srgb, var(--bg) 22%, transparent); }
.dirB-pricing-plan.is-recommended .cta {
  border-color: var(--bg);
  color: var(--bg);
}
.dirB-pricing-plan.is-recommended .cta:hover {
  background: var(--bg);
  color: var(--ink);
}
.dirB-pricing-plan.is-recommended .badge {
  position: absolute;
  top: 0;
  right: 0;
  padding: 6px 14px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bg);
  border-left: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

/* Workflow definition + side notes — two columns under the plans */
.dirB-pricing-explain {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--ink);
}
.dirB-pricing-define {
  padding: 48px 40px 48px 0;
  border-right: 1px solid var(--ink);
}
.dirB-pricing-define p {
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  margin: 14px 0 32px;
  max-width: 540px;
}
.dirB-pricing-define-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.dirB-pricing-define-grid em {
  display: block;
  font-style: normal;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}
.dirB-pricing-define-grid ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dirB-pricing-define-grid li {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  position: relative;
  padding-left: 18px;
}
.dirB-pricing-define-grid .counts li::before {
  content: "+";
  position: absolute;
  left: 0;
  font-family: var(--mono);
  color: var(--ink);
  font-weight: 600;
}
.dirB-pricing-define-grid .counts-not li::before {
  content: "−";
  position: absolute;
  left: 0;
  font-family: var(--mono);
  color: var(--ink-faint);
  font-weight: 600;
}
.dirB-pricing-define-grid .counts-not li { color: var(--ink-soft); }

.dirB-pricing-aside {
  padding: 48px 0 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.dirB-pricing-note p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 8px 0 0;
}
.dirB-pricing-note em {
  font-style: normal;
  color: var(--ink);
  font-weight: 600;
}
.dirB-pricing-faq {
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}
.dirB-pricing-faq .dirB-faq-item {
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.dirB-pricing-faq .dirB-faq-item:first-of-type { border-top: 0; }

/* Mono · dark overrides — invert recommended-plan tones, soften rules */
.dirB.mono.dark .dirB-pricing-plans { border-color: rgba(245,245,245,0.18); }
.dirB.mono.dark .dirB-pricing-plan { border-right-color: rgba(245,245,245,0.18); }
.dirB.mono.dark .dirB-pricing-plan .cap,
.dirB.mono.dark .dirB-pricing-plan .price { border-top-color: rgba(245,245,245,0.14); }
.dirB.mono.dark .dirB-pricing-plan.is-recommended { background: #f5f5f5; color: #0a0a0a; }
.dirB.mono.dark .dirB-pricing-plan.is-recommended h3,
.dirB.mono.dark .dirB-pricing-plan.is-recommended .cap b,
.dirB.mono.dark .dirB-pricing-plan.is-recommended .price .amount,
.dirB.mono.dark .dirB-pricing-plan.is-recommended .value { color: #0a0a0a; }
.dirB.mono.dark .dirB-pricing-plan.is-recommended .num,
.dirB.mono.dark .dirB-pricing-plan.is-recommended .purpose,
.dirB.mono.dark .dirB-pricing-plan.is-recommended .cap em,
.dirB.mono.dark .dirB-pricing-plan.is-recommended .cap span,
.dirB.mono.dark .dirB-pricing-plan.is-recommended .price .cycle,
.dirB.mono.dark .dirB-pricing-plan.is-recommended .includes { color: rgba(10,10,10,0.6); }
.dirB.mono.dark .dirB-pricing-plan.is-recommended .cap,
.dirB.mono.dark .dirB-pricing-plan.is-recommended .price { border-top-color: rgba(10,10,10,0.18); }
.dirB.mono.dark .dirB-pricing-plan.is-recommended .cta {
  border-color: #0a0a0a;
  color: #0a0a0a;
}
.dirB.mono.dark .dirB-pricing-plan.is-recommended .cta:hover {
  background: #0a0a0a;
  color: #f5f5f5;
}
.dirB.mono.dark .dirB-pricing-plan.is-recommended .badge {
  background: #0a0a0a;
  color: #f5f5f5;
  border-color: rgba(245,245,245,0.18);
}
.dirB.mono.dark .dirB-pricing-plan .cta {
  border-color: #f5f5f5;
  color: #f5f5f5;
}
.dirB.mono.dark .dirB-pricing-plan .cta:hover {
  background: #f5f5f5;
  color: #0a0a0a;
}
.dirB.mono.dark .dirB-pricing-explain { border-bottom-color: rgba(245,245,245,0.18); }
.dirB.mono.dark .dirB-pricing-define { border-right-color: rgba(245,245,245,0.18); }
.dirB.mono.dark .dirB-pricing-define-grid em { border-bottom-color: rgba(245,245,245,0.14); }
.dirB.mono.dark .dirB-pricing-define-grid .counts li::before { color: #d8a14a; }
.dirB.mono.dark .dirB-pricing-faq { border-top-color: rgba(245,245,245,0.14); }
.dirB.mono.dark .dirB-pricing-faq .dirB-faq-item { border-top-color: rgba(245,245,245,0.12); }

/* Narrower screens — stack plans, then stack explainer */
@media (max-width: 1100px) {
  .dirB-pricing-plans { grid-template-columns: 1fr; }
  .dirB-pricing-plan { border-right: none; border-bottom: 1px solid var(--ink); min-height: 0; }
  .dirB-pricing-plan:last-child { border-bottom: none; }
  .dirB-pricing-explain { grid-template-columns: 1fr; }
  .dirB-pricing-define { padding: 40px 0 32px; border-right: 0; border-bottom: 1px solid var(--ink); }
  .dirB-pricing-aside { padding: 32px 0 40px; }
}


/* ===== Pricing · feature bullets (inside plan cards) ===== */
.dirB-pricing-plan .features {
  list-style: none;
  margin: 0 0 18px;
  padding: 18px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dirB-pricing-plan .features li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.dirB-pricing-plan .features li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--mono);
  font-weight: 600;
  color: var(--ink);
}
.dirB-pricing-plan .features li b {
  color: var(--ink);
  font-weight: 600;
}
.dirB-pricing-plan.is-recommended .features { border-top-color: color-mix(in srgb, var(--bg) 22%, transparent); }
.dirB-pricing-plan.is-recommended .features li { color: color-mix(in srgb, var(--bg) 75%, transparent); }
.dirB-pricing-plan.is-recommended .features li::before { color: var(--bg); }
.dirB-pricing-plan.is-recommended .features li b { color: var(--bg); }

/* ===== Pricing · comparison matrix ===== */
.dirB-pricing-matrix {
  padding: 80px 0 24px;
}
.dirB-pricing-matrix-head {
  margin-bottom: 32px;
  max-width: 720px;
}
.dirB-pricing-matrix-head h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 14px 0 12px;
}
.dirB-pricing-matrix-head .muted {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
.dirB-pricing-matrix-table {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.dirB-pricing-matrix-row {
  display: grid;
  grid-template-columns: minmax(280px, 2.4fr) repeat(3, minmax(140px, 1fr));
  gap: 0;
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
}
.dirB-pricing-matrix-row:last-child { border-bottom: 0; }
.dirB-pricing-matrix-row > span {
  padding: 14px 18px;
  font-size: 13.5px;
  line-height: 1.4;
}
.dirB-pricing-matrix-row .dirB-pricing-matrix-cap { color: var(--ink); font-weight: 500; }
.dirB-pricing-matrix-row .cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  font-feature-settings: "tnum" 1;
}
.dirB-pricing-matrix-row .cell.value { color: var(--ink); font-weight: 600; }
.dirB-pricing-matrix-row .cell.yes { color: var(--ink); }
.dirB-pricing-matrix-row .cell.no { color: color-mix(in srgb, var(--ink) 28%, transparent); font-weight: 500; }
.dirB-pricing-matrix-row > span:nth-child(2),
.dirB-pricing-matrix-row > span:nth-child(3),
.dirB-pricing-matrix-row > span:nth-child(4) {
  text-align: center;
  border-left: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
}
/* Recommended column (Advance) — soft band running the height of the matrix */
.dirB-pricing-matrix-row > span:nth-child(3) {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.dirB-pricing-matrix-row.dirB-pricing-matrix-thead {
  border-bottom: 1px solid var(--ink);
}
.dirB-pricing-matrix-row.dirB-pricing-matrix-thead > span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 16px;
  padding-bottom: 16px;
}
.dirB-pricing-matrix-row.dirB-pricing-matrix-thead > span.is-recommended { color: var(--ink); font-weight: 600; }

/* Group label rows — quiet section dividers inside the matrix */
.dirB-pricing-matrix-row.dirB-pricing-matrix-group {
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.dirB-pricing-matrix-row.dirB-pricing-matrix-group .dirB-pricing-matrix-group-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 18px;
  padding-bottom: 12px;
}
.dirB-pricing-matrix-row.dirB-pricing-matrix-group > span:nth-child(n+2) {
  border-left: 0;
  background: transparent;
  padding: 0;
}

/* ===== Mono · dark overrides for matrix ===== */
.dirB.mono.dark .dirB-pricing-plan .features { border-top-color: rgba(245,245,245,0.14); }
.dirB.mono.dark .dirB-pricing-plan .features li { color: rgba(245,245,245,0.65); }
.dirB.mono.dark .dirB-pricing-plan .features li::before { color: #d8a14a; }
.dirB.mono.dark .dirB-pricing-plan .features li b { color: #f5f5f5; }
.dirB.mono.dark .dirB-pricing-plan.is-recommended .features { border-top-color: rgba(10,10,10,0.18); }
.dirB.mono.dark .dirB-pricing-plan.is-recommended .features li { color: rgba(10,10,10,0.7); }
.dirB.mono.dark .dirB-pricing-plan.is-recommended .features li::before { color: #0a0a0a; }
.dirB.mono.dark .dirB-pricing-plan.is-recommended .features li b { color: #0a0a0a; }

.dirB.mono.dark .dirB-pricing-matrix-table { border-color: rgba(245,245,245,0.18); }
.dirB.mono.dark .dirB-pricing-matrix-row { border-bottom-color: rgba(245,245,245,0.10); }
.dirB.mono.dark .dirB-pricing-matrix-row > span:nth-child(n+2) { border-left-color: rgba(245,245,245,0.10); }
.dirB.mono.dark .dirB-pricing-matrix-row.dirB-pricing-matrix-thead { border-bottom-color: rgba(245,245,245,0.18); }
.dirB.mono.dark .dirB-pricing-matrix-row > span:nth-child(3) { background: rgba(245,245,245,0.04); }
.dirB.mono.dark .dirB-pricing-matrix-row.dirB-pricing-matrix-group { background: rgba(245,245,245,0.03); }
.dirB.mono.dark .dirB-pricing-matrix-row .cell.no { color: rgba(245,245,245,0.28); }
.dirB.mono.dark .dirB-pricing-matrix-row .cell.yes { color: #d8a14a; }

@media (max-width: 1100px) {
  .dirB-pricing-matrix-row {
    grid-template-columns: minmax(160px, 1.4fr) repeat(3, 1fr);
  }
  .dirB-pricing-matrix-row > span { padding: 12px 10px; font-size: 12.5px; }
}

/* ===== Pricing · title redesign ===== */
.dirB-pricing-head {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 56px;
  align-items: end;
  margin-bottom: 56px;
}
.dirB-pricing-title {
  margin: 0 0 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 88px;
  line-height: 0.95;
  letter-spacing: -0.045em;
}
.dirB-pricing-title .muted {
  color: var(--ink-faint);
  font-weight: 600;
}
.dirB-pricing-title .rule {
  display: block;
  height: 1px;
  width: 96px;
  background: var(--ink);
  margin: 14px 0 6px;
  opacity: 0.7;
}
.dirB-pricing-sub {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.35;
  color: var(--ink-soft);
  max-width: 520px;
  letter-spacing: -0.005em;
}
.dirB-pricing-sub em {
  font-style: normal;
  color: var(--ink);
  font-weight: 600;
}
/* TL;DR strip — three at-a-glance figures sitting on the right of the title.
   Each cell has a giant tabular figure, a mono caption, and the plan name. */
.dirB-pricing-tldr {
  list-style: none;
  margin: 0;
  padding: 18px 22px;
  border: 1px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.dirB-pricing-tldr li {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 4px;
  align-items: end;
}
.dirB-pricing-tldr li b {
  font-family: var(--display);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-feature-settings: "tnum" 1;
}
.dirB-pricing-tldr li span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 2px;
}
.dirB-pricing-tldr li em {
  font-style: normal;
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  font-feature-settings: "tnum" 1;
}
.dirB-pricing-tldr li.is-recommended b { color: var(--ink); }
.dirB-pricing-tldr li.is-recommended em {
  color: var(--ink);
  font-weight: 600;
}

/* Mono · dark overrides for new title block */
.dirB.mono.dark .dirB-pricing-title .muted { color: rgba(245,245,245,0.45); }
.dirB.mono.dark .dirB-pricing-title .rule { background: #f5f5f5; opacity: 0.55; }
.dirB.mono.dark .dirB-pricing-sub em { color: #d8a14a; }
.dirB.mono.dark .dirB-pricing-tldr {
  border-color: rgba(245,245,245,0.18);
  background: rgba(245,245,245,0.03);
}
.dirB.mono.dark .dirB-pricing-tldr li em { border-top-color: rgba(245,245,245,0.14); }
.dirB.mono.dark .dirB-pricing-tldr li.is-recommended b { color: #d8a14a; }
.dirB.mono.dark .dirB-pricing-tldr li.is-recommended em { color: #d8a14a; }

/* ===== Tighten section bottom — no empty scroll past content =====
   The pricing section is now a single-block reveal (no progressive blocks),
   so its natural content height is the entire scrollable area. We let the
   bottom padding hug the last block instead of leaving 100vh of breathing
   room past the FAQ. */
.dirB.swipe-on .dirB-track > section.dirB-pricing {
  padding-bottom: 64px;
  height: 100vh;
}
.dirB-pricing { padding-top: 100px; padding-bottom: 56px; border-bottom: 0; }
.dirB-pricing-matrix { padding: 64px 0 8px; }
.dirB-pricing-explain { padding-bottom: 8px; }

@media (max-width: 1100px) {
  .dirB-pricing-head { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .dirB-pricing-title { font-size: 60px; }
  .dirB-pricing-tldr { padding: 14px 16px; gap: 12px; }
  .dirB-pricing-tldr li b { font-size: 32px; }
}

/* ===== Pricing · clean restructured bottom (replaces explain/aside) ===== */
.dirB-pricing-define {
  padding: 80px 0 56px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.dirB-pricing-define-head {
  margin-bottom: 36px;
  max-width: 720px;
}
.dirB-pricing-define-head .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dirB-pricing-define-head h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 14px 0 16px;
}
.dirB-pricing-define-head p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.dirB-pricing-counts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.dirB-pricing-counts > div {
  padding: 28px 32px 28px 0;
}
.dirB-pricing-counts > div:last-child {
  padding-left: 32px;
  padding-right: 0;
  border-left: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.dirB-pricing-counts em {
  display: block;
  font-style: normal;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.dirB-pricing-counts ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dirB-pricing-counts li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink);
}
.dirB-pricing-counts .counts li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--mono);
  color: var(--ink);
  font-weight: 600;
}
.dirB-pricing-counts .counts-not li {
  color: var(--ink-soft);
}
.dirB-pricing-counts .counts-not li::before {
  content: "−";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--mono);
  color: var(--ink-faint);
  font-weight: 600;
}

/* Three short notes under the definition. No accordions, no boxes — just a
   clean three-up grid separated by hairlines. */
.dirB-pricing-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 16px 0 8px;
}
.dirB-pricing-note {
  padding: 24px 32px 24px 0;
  border-right: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.dirB-pricing-note + .dirB-pricing-note { padding-left: 32px; }
.dirB-pricing-note:last-child { border-right: 0; padding-right: 0; }
.dirB-pricing-note em {
  display: block;
  font-style: normal;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.dirB-pricing-note p {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.dirB-pricing-note p b {
  font-weight: 600;
  color: var(--ink);
}
.dirB-pricing-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  transition: color 140ms ease, border-color 140ms ease, gap 140ms ease;
}
.dirB-pricing-cta-link:hover { gap: 12px; }

/* Mono · dark overrides */
.dirB.mono.dark .dirB-pricing-define { border-top-color: rgba(245,245,245,0.12); }
.dirB.mono.dark .dirB-pricing-counts {
  border-top-color: rgba(245,245,245,0.12);
  border-bottom-color: rgba(245,245,245,0.12);
}
.dirB.mono.dark .dirB-pricing-counts > div:last-child { border-left-color: rgba(245,245,245,0.12); }
.dirB.mono.dark .dirB-pricing-counts .counts li::before { color: #d8a14a; }
.dirB.mono.dark .dirB-pricing-counts .counts-not li::before { color: rgba(245,245,245,0.4); }
.dirB.mono.dark .dirB-pricing-note { border-right-color: rgba(245,245,245,0.12); }
.dirB.mono.dark .dirB-pricing-cta-link {
  color: #d8a14a;
  border-bottom-color: #d8a14a;
}
.dirB.mono.dark .dirB-pricing-cta-link:hover {
  color: #f5f5f5;
  border-bottom-color: #f5f5f5;
}

@media (max-width: 1100px) {
  .dirB-pricing-counts { grid-template-columns: 1fr; }
  .dirB-pricing-counts > div:last-child {
    padding-left: 0;
    padding-top: 0;
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
    margin-top: 24px;
    padding-top: 24px;
  }
  .dirB-pricing-notes { grid-template-columns: 1fr; }
  .dirB-pricing-note {
    padding: 24px 0;
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  }
  .dirB-pricing-note + .dirB-pricing-note { padding-left: 0; }
  .dirB-pricing-note:last-child { border-bottom: 0; }
}

/* ===== Pricing · sizing helper line ===== */
.dirB-pricing-plan .sizing {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 18px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--ink) 32%, transparent);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.dirB-pricing-plan .sizing em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.dirB-pricing-plan .sizing b {
  font-weight: 600;
  color: var(--ink);
  font-feature-settings: "tnum" 1;
}
.dirB-pricing-plan .sizing span {
  color: var(--ink-soft);
}
.dirB-pricing-plan.is-recommended .sizing {
  background: color-mix(in srgb, var(--bg) 10%, transparent);
  border-left-color: color-mix(in srgb, var(--bg) 50%, transparent);
}
.dirB-pricing-plan.is-recommended .sizing em { color: color-mix(in srgb, var(--bg) 55%, transparent); }
.dirB-pricing-plan.is-recommended .sizing b { color: var(--bg); }
.dirB-pricing-plan.is-recommended .sizing span { color: color-mix(in srgb, var(--bg) 70%, transparent); }

/* Mono · dark mode overrides */
.dirB.mono.dark .dirB-pricing-plan .sizing {
  background: rgba(245,245,245,0.04);
  border-left-color: rgba(245,245,245,0.28);
}
.dirB.mono.dark .dirB-pricing-plan .sizing em { color: rgba(245,245,245,0.4); }
.dirB.mono.dark .dirB-pricing-plan .sizing b { color: #d8a14a; }
.dirB.mono.dark .dirB-pricing-plan .sizing span { color: rgba(245,245,245,0.6); }
.dirB.mono.dark .dirB-pricing-plan.is-recommended .sizing {
  background: rgba(10,10,10,0.06);
  border-left-color: rgba(10,10,10,0.3);
}
.dirB.mono.dark .dirB-pricing-plan.is-recommended .sizing em { color: rgba(10,10,10,0.45); }
.dirB.mono.dark .dirB-pricing-plan.is-recommended .sizing b { color: #0a0a0a; }
.dirB.mono.dark .dirB-pricing-plan.is-recommended .sizing span { color: rgba(10,10,10,0.65); }

/* ===== Pricing · cap with inline rep-hint (replaces standalone .sizing) ===== */
.dirB-pricing-plan .cap em.rep-hint {
  margin-left: auto;
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink-faint);
  font-feature-settings: "tnum" 1;
}
.dirB-pricing-plan.is-recommended .cap em.rep-hint {
  color: color-mix(in srgb, var(--bg) 55%, transparent);
}
.dirB.mono.dark .dirB-pricing-plan .cap em.rep-hint { color: rgba(245,245,245,0.5); }
.dirB.mono.dark .dirB-pricing-plan.is-recommended .cap em.rep-hint { color: rgba(10,10,10,0.55); }

/* ===== Pricing · expand-on-request disclosure =====
   The full matrix + workflow definition + customer quote live inside a native
   <details> so they're hidden by default and one click away. Keeps the
   pricing section short while preserving the full reference for visitors who
   want to dig in. */
.dirB-pricing-more {
  margin: 24px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.dirB-pricing-more > summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color 160ms ease;
}
.dirB-pricing-more > summary::-webkit-details-marker { display: none; }
.dirB-pricing-more > summary:hover { color: var(--ink); }
.dirB-pricing-more-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1;
  color: var(--ink);
  transition: transform 220ms cubic-bezier(.2,.7,.2,1), background 160ms ease, color 160ms ease;
}
.dirB-pricing-more[open] > summary {
  color: var(--ink);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.dirB-pricing-more[open] .dirB-pricing-more-chev {
  transform: rotate(45deg);
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.dirB-pricing-more-body {
  padding: 32px 0 0;
  display: grid;
  gap: 48px;
}
/* Quote sits at top of expansion as the social-proof anchor */
.dirB-pricing-more-body .dirB-pricing-quote {
  margin: 0;
}
/* Matrix/define rules already exist below — these just neutralize their old
   surrounding spacing assumptions inside the disclosure body */
.dirB-pricing-more-body .dirB-pricing-matrix { padding: 0; }
.dirB-pricing-more-body .dirB-pricing-define { padding: 0; border: 0; }

/* Mono-dark overrides */
.dirB.mono.dark .dirB-pricing-more {
  border-top-color: rgba(245,245,245,0.18);
}
.dirB.mono.dark .dirB-pricing-more > summary { color: rgba(245,245,245,0.6); }
.dirB.mono.dark .dirB-pricing-more > summary:hover { color: #f5f5f5; }
.dirB.mono.dark .dirB-pricing-more[open] > summary {
  color: #f5f5f5;
  border-bottom-color: rgba(245,245,245,0.18);
}
.dirB.mono.dark .dirB-pricing-more-chev {
  border-color: rgba(245,245,245,0.35);
  color: #f5f5f5;
}
.dirB.mono.dark .dirB-pricing-more[open] .dirB-pricing-more-chev {
  background: #f5f5f5;
  color: #0a0a0a;
  border-color: #f5f5f5;
}

/* ===== Pricing fine-print strip — 3 inline clarifiers under the plan cards.
   Replaces the old long-form definition/notes/closing blocks. ===== */
.dirB-pricing-fineprint {
  list-style: none;
  margin: 28px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.dirB-pricing-fineprint li {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.dirB-pricing-fineprint li em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  display: block;
  margin-bottom: 6px;
}
.dirB-pricing-fineprint li b {
  color: var(--ink);
  font-weight: 700;
  font-feature-settings: "tnum" 1;
}
.dirB.mono.dark .dirB-pricing-fineprint { border-top-color: rgba(245,245,245,0.18); }
.dirB.mono.dark .dirB-pricing-fineprint li { color: rgba(245,245,245,0.7); }
.dirB.mono.dark .dirB-pricing-fineprint li em { color: #f5f5f5; }
.dirB.mono.dark .dirB-pricing-fineprint li b { color: #d8a14a; }
@media (max-width: 900px) {
  .dirB-pricing-fineprint { grid-template-columns: 1fr; gap: 18px; padding-top: 18px; }
}

/* ===== Pricing · solo-title head (no right column) ===== */
.dirB-pricing-head.dirB-pricing-head--solo {
  grid-template-columns: 1fr;
  align-items: start;
  margin-bottom: 28px;
}

/* ===== Pricing · plans bar (holds the billing toggle above the tiers) ===== */
.dirB-pricing-plans-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin: 0 0 18px;
  padding-bottom: 0;
}
.dirB-pricing-plans-bar .bar-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dirB.mono.dark .dirB-pricing-plans-bar .bar-label { color: rgba(245,245,245,0.55); }
@media (max-width: 1100px) {
  .dirB-pricing-plans-bar { justify-content: flex-start; flex-wrap: wrap; }
}

/* ===== Pricing · Annual/Monthly toggle ===== */
.dirB-pricing-toggle {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.dirB-pricing-toggle .pill {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.dirB-pricing-toggle .pill:hover { color: var(--ink); }
.dirB-pricing-toggle .pill.is-active {
  background: var(--ink);
  color: var(--bg);
}
.dirB-pricing-toggle .save {
  margin-left: 6px;
  padding-left: 12px;
  padding-right: 8px;
  border-left: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.dirB.mono.dark .dirB-pricing-toggle {
  border-color: rgba(245,245,245,0.18);
  background: rgba(245,245,245,0.03);
}
.dirB.mono.dark .dirB-pricing-toggle .pill { color: rgba(245,245,245,0.6); }
.dirB.mono.dark .dirB-pricing-toggle .pill:hover { color: #f5f5f5; }
.dirB.mono.dark .dirB-pricing-toggle .pill.is-active {
  background: #f5f5f5;
  color: #0a0a0a;
}
.dirB.mono.dark .dirB-pricing-toggle .save {
  border-left-color: rgba(245,245,245,0.18);
  color: #d8a14a;
}
@media (max-width: 1100px) {
  .dirB-pricing-toggle { justify-self: start; align-self: start; }
}

/* ===== Pricing matrix · capability tooltip ===== */
.matrix-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: help;
  outline: none;
}
.matrix-tip::after {
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.matrix-tip:hover::after,
.matrix-tip:focus-visible::after {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.matrix-tip-body {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 20;
  width: max-content;
  max-width: 280px;
  padding: 10px 12px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--body);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.matrix-tip-body::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 14px;
  width: 10px;
  height: 10px;
  background: var(--ink);
  transform: rotate(45deg);
}
.matrix-tip:hover .matrix-tip-body,
.matrix-tip:focus-visible .matrix-tip-body,
.matrix-tip:focus-within .matrix-tip-body {
  opacity: 1;
  transform: translateY(0);
}
.dirB.mono.dark .matrix-tip::after {
  border-color: rgba(245,245,245,0.35);
  color: rgba(245,245,245,0.55);
}
.dirB.mono.dark .matrix-tip:hover::after,
.dirB.mono.dark .matrix-tip:focus-visible::after {
  background: #f5f5f5;
  color: #0a0a0a;
  border-color: #f5f5f5;
}
.dirB.mono.dark .matrix-tip-body {
  background: #f5f5f5;
  color: #0a0a0a;
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}
.dirB.mono.dark .matrix-tip-body::before { background: #f5f5f5; }

/* ===== Pricing plan · subtle hover-elevation ===== */
.dirB-pricing-plan {
  transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
}
.dirB-pricing-plan:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -18px color-mix(in srgb, var(--ink) 45%, transparent);
  background: color-mix(in srgb, var(--ink) 2%, transparent);
  z-index: 1;
}
.dirB-pricing-plan.is-recommended:hover {
  background: var(--ink);
  box-shadow: 0 18px 38px -16px color-mix(in srgb, var(--ink) 55%, transparent);
}
.dirB.mono.dark .dirB-pricing-plan:hover {
  background: rgba(245,245,245,0.04);
  box-shadow: 0 16px 36px -18px rgba(0,0,0,0.65);
}
.dirB.mono.dark .dirB-pricing-plan.is-recommended:hover {
  background: #f5f5f5;
  box-shadow: 0 22px 44px -16px rgba(0,0,0,0.75);
}

/* ===== Pricing · customer quote (social proof under plans) ===== */
.dirB-pricing-quote {
  margin: 36px 0 0;
  padding: 28px 32px;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(220px, 1fr);
  gap: 28px;
  align-items: center;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.dirB-pricing-quote blockquote {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.dirB-pricing-quote blockquote p { margin: 0; }
.dirB-pricing-quote blockquote p::before {
  content: "“";
  margin-right: 2px;
  color: var(--ink-faint);
}
.dirB-pricing-quote blockquote p::after {
  content: "”";
  margin-left: 2px;
  color: var(--ink-faint);
}
.dirB-pricing-quote figcaption {
  display: grid;
  gap: 6px;
  padding-left: 22px;
  border-left: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dirB-pricing-quote figcaption .who b {
  color: var(--ink);
  font-weight: 700;
}
.dirB-pricing-quote figcaption .result {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  font-family: var(--body);
  font-size: 12.5px;
}
.dirB.mono.dark .dirB-pricing-quote {
  border-color: rgba(245,245,245,0.16);
  background: rgba(245,245,245,0.03);
}
.dirB.mono.dark .dirB-pricing-quote blockquote { color: #f5f5f5; }
.dirB.mono.dark .dirB-pricing-quote blockquote p::before,
.dirB.mono.dark .dirB-pricing-quote blockquote p::after {
  color: rgba(245,245,245,0.35);
}
.dirB.mono.dark .dirB-pricing-quote figcaption {
  border-left-color: rgba(245,245,245,0.16);
  color: rgba(245,245,245,0.6);
}
.dirB.mono.dark .dirB-pricing-quote figcaption .who b { color: #f5f5f5; }
.dirB.mono.dark .dirB-pricing-quote figcaption .result { color: #d8a14a; }
@media (max-width: 900px) {
  .dirB-pricing-quote { grid-template-columns: 1fr; padding: 22px 20px; }
  .dirB-pricing-quote figcaption { padding-left: 0; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); padding-top: 14px; }
  .dirB.mono.dark .dirB-pricing-quote figcaption { border-top-color: rgba(245,245,245,0.16); }
}

/* ===== "What it replaces" — its own section, sibling to dirB-stack =====
   Separated from the stack section so the swipe nav advances cleanly into
   it instead of forcing the user to scroll past dead space inside the
   stack panel. */
.dirB-replaces {
  padding: 110px 48px 90px;
  background: transparent;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-content: start;
}
.dirB-replaces > * { max-width: 1180px; width: 100%; margin-left: auto; margin-right: auto; }

/* Head wrapper spans the same 1180px container as the rows below, so all
   three children share a left edge. Text widths are constrained on the
   individual elements (h2/p) instead of the wrapper. Title style mirrors
   .dirB-stack h2 so the two halves of the stack narrative read as siblings.
   Margins collapsed so the head reads as one tight block — eyebrow, title,
   one-line description — and the section gap alone separates it from the rows. */
.dirB-stack-replaces-head { margin: 0; }
.dirB-stack-replaces-head h2,
.dirB-stack-replaces-head h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 12px 0 16px;
  max-width: 900px;
}
.dirB-stack-replaces-head p {
  margin: 0;
  max-width: 640px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
}
/* (Duplicate p rule removed — superseded by the unified deck spec above.) */
.dirB-stack-replaces-head p b { color: var(--ink); font-weight: 600; }

.dirB-stack-replaces-grid {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}
.dirB-stack-replace {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(220px, 1.6fr) minmax(140px, 1fr) minmax(120px, auto);
  align-items: baseline;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
}
.dirB-stack-replace .cat {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.dirB-stack-replace .ex {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.dirB-stack-replace .price { font-feature-settings: "tnum" 1; }
.dirB-stack-replace .price .amt {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-right: 6px;
}
.dirB-stack-replace .price .per {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.dirB-stack-replace .total {
  justify-self: end;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  font-feature-settings: "tnum" 1;
}

.dirB-stack-replaces-sum {
  display: grid;
  gap: 18px;
  padding: 28px 32px;
  border: 1px solid var(--ink);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.dirB-stack-replaces-sum .vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  align-items: center;
}
.dirB-stack-replaces-sum .col {
  display: grid;
  gap: 4px;
}
.dirB-stack-replaces-sum .col em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dirB-stack-replaces-sum .col b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink);
  font-feature-settings: "tnum" 1;
}
.dirB-stack-replaces-sum .col span {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.dirB-stack-replaces-sum .col.is-nudge b { color: var(--ink); }
.dirB-stack-replaces-sum .arrow {
  font-family: var(--display);
  font-size: 28px;
  color: var(--ink-faint);
  align-self: center;
}
.dirB-stack-replaces-sum .save {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.dirB-stack-replaces-sum .save b {
  color: var(--ink);
  font-weight: 700;
  font-feature-settings: "tnum" 1;
}

/* Mono · dark overrides for the replaces section — background is transparent
   so the page gradient continues underneath, matching the rest of the site. */
.dirB.mono.dark .dirB-replaces { background: transparent; }
.dirB.mono.dark .dirB-stack-replaces-head .label { color: rgba(245,245,245,0.55); }
.dirB.mono.dark .dirB-stack-replaces-head h2,
.dirB.mono.dark .dirB-stack-replaces-head h3 { color: #f5f5f5; }
.dirB.mono.dark .dirB-stack-replaces-head p { color: rgba(245,245,245,0.65); }
.dirB.mono.dark .dirB-stack-replaces-head p b { color: #d8a14a; }
.dirB.mono.dark .dirB-stack-replaces-grid { border-top-color: rgba(245,245,245,0.18); }
.dirB.mono.dark .dirB-stack-replace { border-bottom-color: rgba(245,245,245,0.10); }
.dirB.mono.dark .dirB-stack-replace .cat { color: #f5f5f5; }
.dirB.mono.dark .dirB-stack-replace .ex { color: rgba(245,245,245,0.55); }
.dirB.mono.dark .dirB-stack-replace .price .amt { color: #f5f5f5; }
.dirB.mono.dark .dirB-stack-replace .price .per { color: rgba(245,245,245,0.45); }
.dirB.mono.dark .dirB-stack-replace .total { color: rgba(245,245,245,0.7); }
.dirB.mono.dark .dirB-stack-replaces-sum {
  border-color: rgba(245,245,245,0.22);
  background: rgba(245,245,245,0.04);
}
.dirB.mono.dark .dirB-stack-replaces-sum .col em { color: rgba(245,245,245,0.6); }
.dirB.mono.dark .dirB-stack-replaces-sum .col b { color: #f5f5f5; }
.dirB.mono.dark .dirB-stack-replaces-sum .col.is-nudge b { color: #d8a14a; }
.dirB.mono.dark .dirB-stack-replaces-sum .col span { color: rgba(245,245,245,0.55); }
.dirB.mono.dark .dirB-stack-replaces-sum .arrow { color: rgba(245,245,245,0.3); }
.dirB.mono.dark .dirB-stack-replaces-sum .save { color: rgba(245,245,245,0.65); border-top-color: rgba(245,245,245,0.18); }
.dirB.mono.dark .dirB-stack-replaces-sum .save b { color: #d8a14a; }

@media (max-width: 1100px) {
  .dirB-stack-replace {
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
  }
  .dirB-stack-replace .cat { grid-column: 1 / -1; }
  .dirB-stack-replace .ex { grid-column: 1 / -1; }
  .dirB-stack-replace .total { justify-self: end; }
}
@media (max-width: 720px) {
  .dirB-stack-replaces-sum { padding: 22px 20px; }
  .dirB-stack-replaces-sum .vs { grid-template-columns: 1fr; gap: 18px; }
  .dirB-stack-replaces-sum .arrow { transform: rotate(90deg); justify-self: start; }
  .dirB-stack-replaces-head h3 { font-size: 32px; }
}

/* ===== Simplified visitor experience ===== */

.dirB-product {
  padding: 96px 64px 48px;
}
.dirB-product-head {
  max-width: 760px;
  margin: 0 0 32px;
}
.dirB-product-head h2 {
  max-width: 780px;
  margin-bottom: 18px;
}
.dirB-product-head p {
  max-width: 660px;
  font-size: 17px;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
}
.dirB-carousel {
  border-top: 0;
  gap: 34px;
}
.dirB-carousel-tabs {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: 100%;
  gap: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  padding: 0;
  margin: 0 0 2px;
  border-radius: 0;
  background: transparent;
}
.dirB-carousel-tab {
  border: 0 !important;
  min-width: 112px;
  padding: 12px 18px;
  border-radius: 0;
  color: var(--ink-soft);
  gap: 8px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.dirB-carousel-tab:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.dirB-carousel-tab.active {
  color: var(--bg);
  background: var(--ink);
}
.dirB-carousel-tab .t-num {
  color: inherit;
  opacity: 0.56;
}
.dirB-carousel-tab .t-name {
  letter-spacing: 0.08em;
}
.dirB-carousel-tab .t-track {
  display: none;
}
.dirB-carousel-slide {
  grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 88px);
  min-height: 500px;
  padding: 6px 0;
}
.dirB-carousel-copy h3 {
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.02;
  margin-bottom: 16px;
}
.dirB-carousel-copy p {
  max-width: 430px;
  font-size: 16px;
  line-height: 1.58;
  margin-bottom: 0;
}
.dirB-carousel-trycue {
  margin-top: 22px;
}
.dirB-carousel-shot {
  margin: 0;
}
.dirB-carousel-shot::before {
  inset: -5% -4%;
  filter: blur(28px);
  opacity: 0.55;
}
.dirB-carousel:hover .dirB-carousel-shot {
  transform: none;
}

.dirB.mono.dark .dirB-nav {
  border-color: rgba(245,245,245,0.12);
  background: rgba(245,245,245,0.035);
}
.dirB.mono.dark .dirB-nav a:hover {
  color: #f5f5f5;
  background: rgba(245,245,245,0.08);
}
.dirB.mono.dark .dirB-carousel-tabs {
  border: 1px solid rgba(245,245,245,0.10);
  background: rgba(245,245,245,0.04);
}
.dirB.mono.dark .dirB-carousel-tab {
  color: rgba(245,245,245,0.62);
}
.dirB.mono.dark .dirB-carousel-tab:hover {
  color: #f5f5f5;
  background: rgba(245,245,245,0.08);
}
.dirB.mono.dark .dirB-carousel-tab.active {
  color: #0a0a0a;
  background: #f5f5f5;
}
.dirB.mono.dark .dirB-product-head p,
.dirB.mono.dark .dirB-carousel-copy p {
  color: rgba(245,245,245,0.68);
}

@media (max-width: 1024px) {
  .dirB-nav {
    justify-self: end;
  }
  .dirB-nav a {
    padding: 8px 11px;
    font-size: 12px;
  }
  .dirB-product {
    padding: 96px 32px 82px;
  }
  .dirB-carousel-slide {
    grid-template-columns: 1fr;
    gap: 30px;
    min-height: 0;
  }
}

@media (max-width: 768px) {
  .dirB-product {
    padding: 66px 20px;
  }
  .dirB-carousel-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    border-radius: 18px;
  }
  .dirB-carousel-tab {
    min-width: 0;
    padding: 11px 8px !important;
  }
  .dirB-carousel-tab .t-num {
    display: none;
  }
}

/* Product spacing refinement */
.dirB-product-head {
  margin-bottom: 24px;
}
.dirB-product-head p {
  margin-bottom: 0;
}
.dirB-carousel {
  gap: 20px;
}
.dirB-carousel-tabs {
  margin-bottom: 0;
}
.dirB-carousel-slide {
  min-height: 460px;
  align-items: start;
}
.dirB-carousel-copy {
  padding-top: 18px;
}
.dirB-carousel-copy h3 {
  margin-bottom: 10px;
}
.dirB-carousel-shot {
  align-self: start;
}

/* Seller workflow: animated, simple, obvious */
.seller-flow {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 5%, transparent), transparent),
    color-mix(in srgb, var(--ink) 3%, transparent);
}
.seller-flow-label {
  margin-bottom: 14px;
}
.seller-flow-signals {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 50%, transparent);
}
.seller-flow-signals span {
  padding: 7px 11px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.seller-flow-lane {
  position: relative;
  display: grid;
  grid-template-columns: minmax(110px, 1fr) 20px minmax(130px, 1fr) minmax(210px, 1.15fr) 20px minmax(160px, 1fr) 20px minmax(120px, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 24px 0 14px;
}
.seller-flow-lane::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(245,245,245,0.08),
    rgba(216,161,74,0.72),
    rgba(245,245,245,0.08));
  transform: translateY(-50%);
  opacity: 0.8;
}
.seller-flow-lane::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 4%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d8a14a;
  box-shadow:
    0 0 0 6px rgba(216,161,74,0.12),
    0 0 28px rgba(216,161,74,0.42);
  transform: translate(-50%, -50%);
  animation: sellerFlowPacket 4.8s cubic-bezier(0.45, 0, 0.2, 1) infinite;
  z-index: 3;
}
.seller-flow-node {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 88px;
  padding: 18px 16px;
  border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  font-size: clamp(16px, 1.45vw, 20px);
  text-align: center;
  white-space: normal;
  box-shadow: 0 18px 42px rgba(0,0,0,0.14);
}
.seller-flow-arrow {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  color: #d8a14a;
  opacity: 0.8;
}
.seller-flow-nudge {
  z-index: 4;
  min-height: 112px;
  justify-items: center;
  place-content: center;
  padding: 20px 18px;
  border: 1px solid #d8a14a;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(216,161,74,0.24), transparent 56%),
    #f5f5f5;
  color: #0a0a0a;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.34),
    0 0 0 6px rgba(216,161,74,0.08);
  border-bottom-width: 1px;
  transform: none;
}
.seller-flow-nudge span {
  color: rgba(10,10,10,0.58);
}
.seller-flow-nudge strong {
  color: #0a0a0a;
  font-size: clamp(18px, 1.75vw, 24px);
  text-align: center;
  white-space: normal;
}
.seller-flow-note {
  margin-top: 18px;
}
.seller-flow-context {
  margin-top: 18px;
}
@keyframes sellerFlowPacket {
  0% { left: 4%; opacity: 0; }
  8% { opacity: 1; }
  46% { left: 48%; opacity: 1; }
  56% { left: 51%; opacity: 0.35; transform: translate(-50%, -50%) scale(1.6); }
  66% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  92% { opacity: 1; }
  100% { left: 96%; opacity: 0; }
}
.dirB.mono.dark .seller-flow {
  border-color: rgba(245,245,245,0.12);
  background:
    linear-gradient(180deg, rgba(245,245,245,0.045), transparent),
    rgba(245,245,245,0.025);
}
.dirB.mono.dark .seller-flow-signals {
  border-color: rgba(245,245,245,0.10);
  background: rgba(245,245,245,0.035);
}
.dirB.mono.dark .seller-flow-signals span {
  color: rgba(245,245,245,0.66);
  background: rgba(245,245,245,0.06);
}
.dirB.mono.dark .seller-flow-node {
  border-color: rgba(245,245,245,0.12);
  background: rgba(10,10,10,0.72);
}

@media (max-width: 1024px) {
  .dirB-carousel-slide {
    min-height: 0;
  }
  .seller-flow-lane {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 8px 0 0;
  }
  .seller-flow-lane::before,
  .seller-flow-lane::after {
    display: none;
  }
  .seller-flow-arrow {
    transform: rotate(90deg);
  }
}

@media (max-width: 768px) {
  .dirB-product-head {
    margin-bottom: 18px;
  }
  .dirB-carousel {
    gap: 16px;
  }
  .dirB-carousel-copy {
    padding-top: 4px;
  }
  .seller-flow {
    padding: 18px;
  }
  .seller-flow-signals {
    display: flex;
    overflow-x: auto;
    width: 100%;
  }
  .seller-flow-node,
  .seller-flow-nudge {
    min-height: 76px;
  }
}

/* ===== Contact dialog — opened from plan CTAs ===== */
.dirB-contact-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 64px 24px 32px;
  background: rgba(10,10,10,0.72);
  backdrop-filter: blur(6px);
  overflow-y: auto;
  animation: contactFadeIn 140ms ease;
}
@keyframes contactFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.dirB-contact {
  position: relative;
  width: min(640px, 100%);
  background: var(--bg);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  padding: 40px 40px 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  font-family: var(--display);
}
.dirB-contact-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: color .12s;
}
.dirB-contact-close:hover { color: var(--ink); }
.dirB-contact-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  margin-bottom: 18px;
}
.dirB-contact-plan-tag {
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  color: var(--ink);
  letter-spacing: 0.14em;
}
.dirB-contact-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 26px;
  color: var(--ink);
  text-wrap: balance;
}
.dirB-contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
}
.dirB-contact-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.dirB-contact-field--full { grid-column: 1 / -1; }
.dirB-contact-field > span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.dirB-contact-field > span em {
  font-style: normal;
  color: color-mix(in srgb, var(--ink) 40%, transparent);
  text-transform: none;
  letter-spacing: 0.02em;
}
.dirB-contact-field input,
.dirB-contact-field textarea {
  font-family: var(--display);
  font-size: 15px;
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  padding: 11px 12px;
  outline: none;
  transition: border-color .12s, background .12s;
}
.dirB-contact-field textarea {
  resize: vertical;
  min-height: 80px;
  font-family: var(--display);
}
.dirB-contact-field input::placeholder,
.dirB-contact-field textarea::placeholder {
  color: color-mix(in srgb, var(--ink) 32%, transparent);
}
.dirB-contact-field input:focus,
.dirB-contact-field textarea:focus {
  border-color: color-mix(in srgb, var(--ink) 55%, transparent);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.dirB-contact-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.dirB-contact-submit {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: 13px 22px;
  cursor: pointer;
  transition: background .12s, color .12s, opacity .12s;
}
.dirB-contact-submit:hover { background: #d8a14a; color: #0a0a0a; border-color: #d8a14a; }
.dirB-contact-submit:disabled { opacity: 0.55; cursor: default; }
.dirB-contact-fine {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
}
.dirB-contact-error {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
}
.dirB-contact-done p {
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--ink) 85%, transparent);
  margin: 0 0 22px;
}
@media (max-width: 640px) {
  .dirB-contact { padding: 30px 22px 24px; }
  .dirB-contact-form { grid-template-columns: 1fr; }
}

/* Guided scroll lives in JS (useGuidedScroll). CSS only sets smooth scroll
   for programmatic jumps; the hook intercepts wheel/keys to step section by
   section. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ===== Full responsive pass + bottom whitespace trim ===== */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
.dirB {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
}
.dirB-track {
  width: 100%;
}
.dirB-track > section {
  width: 100%;
}
.dirB-hero,
.dirB-truth,
.dirB-bigstat,
.dirB-mech,
.dirB-product,
.dirB-stack,
.dirB-replaces,
.dirB-pricing,
.dirB-prebook,
.dirB-final {
  padding-left: clamp(20px, 4vw, 64px);
  padding-right: clamp(20px, 4vw, 64px);
}
.dirB-hero {
  padding-top: clamp(10px, 1.4vw, 18px);
  padding-bottom: clamp(44px, 6vw, 72px);
}
.dirB-truth,
.dirB-bigstat,
.dirB-mech,
.dirB-product,
.dirB-stack,
.dirB-replaces,
.dirB-pricing,
.dirB-prebook {
  padding-top: clamp(64px, 8vw, 104px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
.dirB-final {
  padding-top: clamp(64px, 8vw, 104px);
  padding-bottom: clamp(48px, 6vw, 72px);
}
.dirB-carousel-slide {
  min-height: 0;
}
.dirB-product {
  padding-bottom: clamp(34px, 4vw, 52px);
}
.dirB-stack {
  padding-bottom: clamp(36px, 4vw, 56px);
}
.dirB-replaces {
  padding-bottom: clamp(42px, 5vw, 64px);
}
.dirB-pricing {
  padding-bottom: clamp(38px, 5vw, 56px);
}
.dirB-prebook {
  padding-bottom: clamp(38px, 5vw, 56px);
}
.dirB-final + .dirB-foot,
.dirB-foot {
  margin-top: 0;
}
.dirB-carousel-viewport,
.dirB-carousel-rail,
.dirB-carousel-slide,
.dirB-carousel-shot,
.dirB-mock {
  max-width: 100%;
  min-width: 0;
}
.dirB-carousel-shot > * {
  max-width: 100%;
}

@media (max-width: 1180px) {
  .dirB-hero h1 {
    font-size: clamp(64px, 10vw, 118px);
  }
  .dirB-carousel-slide {
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 34px;
  }
  .mock-pipeline .stages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mock-home .grid {
    grid-template-columns: minmax(220px, 0.9fr) minmax(260px, 1fr);
  }
  .mock-home .gaps {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .dirB-nav {
    justify-self: end;
    gap: 3px;
    padding: 4px;
  }
  .dirB-nav a {
    padding: 8px 10px;
    font-size: 12px;
  }
  .dirB-nav a span {
    display: none;
  }
  .dirB-hero-eyebrow {
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
  }
  .dirB-hero h1 {
    font-size: clamp(48px, 12vw, 82px);
    line-height: 0.96;
    margin-bottom: 24px;
  }
  .dirB-hero-deck {
    font-size: clamp(18px, 3.2vw, 23px);
    max-width: 640px;
  }
  .dirB-truth-simple,
  .dirB-bigstat-row,
  .dirB-mech-grid,
  .dirB-carousel-slide,
  .dirB-pricing-head,
  .dirB-pricing-plans,
  .dirB-prebook-wrap,
  .dirB-faq-inspector {
    grid-template-columns: 1fr !important;
  }
  .dirB-bigstat-row .punch-viz {
    justify-items: stretch;
  }
  .dirB-bigstat-stats,
  .dirB-pricing-fineprint {
    grid-template-columns: 1fr;
  }
  .dirB-mech-head {
    margin-bottom: 28px;
  }
  .dirB-mech-step {
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  }
  .dirB-carousel-copy {
    padding-top: 0;
  }
  .dirB-carousel-shot {
    width: 100%;
  }
  .dirB-stack-sub,
  .seller-flow-note {
    font-size: 15px;
  }
  .dirB-pricing-title {
    font-size: clamp(42px, 10vw, 64px);
  }
  .dirB-pricing-plans-bar {
    align-items: flex-start;
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  .dirB-nav {
    display: none !important;
  }
  .dirB-wordmark {
    font-size: 20px;
  }
  .dirB-cta-mini {
    padding: 9px 13px;
    font-size: 12px;
  }
  .dirB-hero {
    padding-top: 14px;
  }
  .dirB-hero h1 {
    font-size: clamp(39px, 13vw, 58px);
    line-height: 1;
  }
  .dirB-hero-deck {
    font-size: 16px;
  }
  .dirB-hero-actions,
  .dirB-final-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .dirB-hero-actions a,
  .dirB-final-actions a {
    justify-content: center;
    text-align: center;
  }
  .dirB-bigstat-row .punch-num {
    font-size: clamp(96px, 34vw, 142px);
  }
  .dirB-product-head h2,
  .dirB-stack h2,
  .dirB-stack-replaces-head h2,
  .dirB-stack-replaces-head h3,
  .dirB-prebook-head h2,
  .dirB-final h2 {
    font-size: clamp(32px, 10vw, 48px) !important;
    line-height: 1.03;
  }
  .dirB-carousel-tabs {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .dirB-carousel-tab {
    min-width: 0;
    padding: 10px 6px !important;
  }
  .dirB-carousel-copy h3 {
    font-size: clamp(28px, 8vw, 38px);
  }
  .mock-pipeline {
    padding: 14px;
  }
  .mock-pipeline .head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .mock-pipeline .stages,
  .mock-deal .grid,
  .mock-home .grid {
    grid-template-columns: 1fr;
  }
  .mock-deal {
    padding: 16px;
  }
  .mock-deal .top,
  .mock-deal .badges,
  .mock-home .gap-row,
  .mock-addy .top {
    align-items: flex-start;
    flex-direction: column;
  }
  .mock-home {
    padding: 16px;
  }
  .mock-addy {
    min-height: 0;
    padding: 14px;
  }
  .mock-addy .msg {
    max-width: 92%;
  }
  .mock-addy .suggest .chips {
    gap: 5px;
  }
  .seller-flow-signals {
    margin-bottom: 16px;
  }
  .seller-flow-node,
  .seller-flow-nudge {
    padding: 14px 12px;
  }
  .seller-flow-context {
    display: grid;
    gap: 8px;
  }
  .dirB-stack-replace {
    grid-template-columns: 1fr !important;
  }
  .dirB-stack-replace .price,
  .dirB-stack-replace .total {
    justify-self: start;
  }
  .dirB-stack-replaces-sum .col b {
    font-size: 34px;
  }
  .dirB-pricing-toggle {
    width: 100%;
    border-radius: 18px;
  }
  .dirB-pricing-toggle .pill {
    flex: 1 1 0;
    padding-left: 10px;
    padding-right: 10px;
  }
  .dirB-pricing-toggle .save {
    flex-basis: 100%;
    margin-left: 0;
    padding: 8px 8px 4px;
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
    white-space: normal;
    text-align: center;
  }
  .dirB-pricing-plan {
    padding: 24px 20px;
  }
  .dirB-pricing-plan .price .amount {
    font-size: clamp(34px, 11vw, 48px);
  }
  .dirB-pricing-more > summary {
    align-items: flex-start;
  }
  .dirB-pricing-more-label {
    line-height: 1.45;
  }
  .dirB-prebook-panel,
  .dirB-faq-detail {
    padding: 18px !important;
  }
  .dirB-fit-foot-row {
    grid-template-columns: 1fr;
  }
  .dirB-fit-foot-sub {
    padding-left: 0;
  }
  .dirB-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 22px 20px;
  }
}

@media (max-width: 420px) {
  .dirB-hero-eyebrow .desc,
  .dirB-hero-eyebrow .sep {
    display: none;
  }
  .dirB-carousel-tabs {
    gap: 4px;
    padding: 4px;
  }
  .dirB-carousel-tab .t-name {
    font-size: 10px;
  }
  .dirB-mock-bar .url {
    margin-left: 6px;
    font-size: 9px;
  }
  .mock-pipeline .actions {
    flex-direction: column;
  }
  .dirB-pricing-plan .cap,
  .dirB-pricing-plan .price {
    gap: 6px;
  }
}

/* =====================================================================
   Header system — unified section-title pass.
   Two tiers, one eyebrow, one rhythm. Wins by being last in the cascade.

     Tier 1 · Standard (Evidence, How, Product, Stack, Prebook)
       clamp(44px, 5.4vw, 76px) · -0.035em · line-height 0.96
     Tier 2 · Display (Truth, Pricing-title, Final CTA)
       clamp(60px, 6.6vw, 104px) · -0.045em · line-height 0.92

   Eyebrow: 11px mono, 0.22em tracking, 62% ink, with a 28px rule
   prefix. Hero keeps its bespoke 4-piece eyebrow.
   ===================================================================== */
:where(.dirB) {
  --hd-eyebrow: rgba(246, 245, 242, 0.66);
  --hd-eyebrow-rule: rgba(246, 245, 242, 0.32);
}
.dirB.mono:not(.dark) {
  --hd-eyebrow: rgba(10, 10, 10, 0.6);
  --hd-eyebrow-rule: rgba(10, 10, 10, 0.32);
}

/* Eyebrow label inside any section head — uniform mono, with a leading
   1px rule that visually re-uses the hero's editorial vocabulary. */
.dirB-bigstat-head > .label,
.dirB-mech-head > .label,
.dirB-product-head > .label,
.dirB-stack-head > .label,
.dirB-prebook-head > .label,
.dirB-pricing-head > .label,
.dirB-truth-simple-copy > .label,
.dirB-final-content > .label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hd-eyebrow) !important;
  line-height: 1;
  margin-bottom: 18px;
}
.dirB-bigstat-head > .label::before,
.dirB-mech-head > .label::before,
.dirB-product-head > .label::before,
.dirB-stack-head > .label::before,
.dirB-prebook-head > .label::before,
.dirB-pricing-head > .label::before,
.dirB-truth-simple-copy > .label::before,
.dirB-final-content > .label::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--hd-eyebrow-rule);
  flex: 0 0 auto;
}

/* Tier 1 · Standard h2 — Evidence, How, Product, Stack, Prebook */
.dirB-bigstat-head h2,
.dirB-mech-head h2,
.dirB-product-head h2,
.dirB-stack-head h2,
.dirB-prebook-head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(44px, 5.4vw, 76px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 0 0 18px;
  max-width: 900px;
  text-wrap: balance;
}

/* Tier 2 · Display h2 — Truth, Pricing, Final */
.dirB-truth-simple-copy h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(60px, 6.6vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 0 0 22px;
  text-wrap: balance;
}
.dirB-pricing-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(60px, 6.6vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 0 0 18px;
}
.dirB-pricing-title .rule {
  width: 64px;
  margin: 18px 0 10px;
  opacity: 0.55;
}
.dirB-final h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(60px, 6.6vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 0 0 28px;
  text-wrap: balance;
}

/* Deck paragraph (sub) — shared rhythm under all section heads */
.dirB-bigstat-head + p,
.dirB-mech-head + p,
.dirB-product-head p,
.dirB-stack-head + p,
.dirB-prebook-head p,
.dirB-prebook-deck,
.dirB-truth-simple-copy p,
.dirB-final p {
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  max-width: 640px;
}

/* Hero eyebrow contrast — bump the dim mid-pieces so the editorial
   eyebrow reads at distance without overpowering the headline. */
.dirB-hero-eyebrow .cat {
  color: var(--hd-eyebrow);
}
.dirB-hero-eyebrow .desc {
  opacity: 0.85;
}
.dirB-hero-eyebrow .sep {
  opacity: 0.45;
}

/* Vertical rhythm: head block → first content block */
.dirB-bigstat-head,
.dirB-mech-head,
.dirB-product-head,
.dirB-stack-head,
.dirB-prebook-head {
  margin-bottom: clamp(32px, 4vw, 56px);
}

/* Final CTA (light-bg inverted in mono.dark): keep label readable on
   the pale panel and bump the watermark legibility per the variant
   spec without recoloring the whole section. */
.dirB.mono.dark .dirB-final .label {
  color: rgba(10, 10, 10, 0.62) !important;
}
.dirB.mono.dark .dirB-final-content > .label::before {
  background: rgba(10, 10, 10, 0.32);
}

/* Cap the hero headline tighter so it never bleeds outside the column
   on intermediate widths between 1100 and 1440. */
.dirB-hero h1 {
  font-size: clamp(80px, 9.4vw, 140px);
}

/* =====================================================================
   Page header — redesign pass.
   Goals:
     · slimmer visual weight (1px hairline, no heavy blur band)
     · cohesive nav: num and label read as one editorial token
     · refined CTA: editorial outline + chevron, no chunky black slab
     · clean theme toggle: 14px monogram glyph, hairline frame
   Height stays at 64px because JS pins `.dirB-track { top: 64px }`.
   ===================================================================== */
.dirB.mono.dark .dirB-header,
.dirB.mono .dirB-header {
  background: rgba(10, 10, 10, 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid rgba(245, 245, 245, 0.07);
  padding: 0 clamp(20px, 3vw, 40px);
  gap: clamp(20px, 2.4vw, 36px);
}
.dirB.mono:not(.dark) .dirB-header {
  background: rgba(247, 246, 243, 0.72);
  border-bottom: 1px solid rgba(10, 10, 10, 0.07);
}

/* Wordmark — tighter glyph, dots become a single mark */
.dirB-header .dirB-wordmark {
  font-size: 17px;
  letter-spacing: -0.02em;
  gap: 9px;
}
.dirB-header .dirB-wordmark .dirB-logo-dots { gap: 3px; }
.dirB-header .dirB-wordmark .dirB-logo-dots i {
  width: 5px;
  height: 5px;
}
.dirB-header .dirB-wordmark .reg {
  font-size: 0.38em;
  opacity: 0.42;
}

/* Nav — number and label read as one editorial token */
.dirB-header .dirB-nav {
  gap: clamp(18px, 2.4vw, 36px);
}
.dirB-nav-link {
  padding: 22px 2px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.005em;
  gap: 7px;
  color: rgba(245, 245, 245, 0.5);
  align-items: center;
}
.dirB.mono:not(.dark) .dirB-nav-link { color: rgba(10, 10, 10, 0.5); }
.dirB-nav-link:hover { color: #f5f5f5; }
.dirB.mono:not(.dark) .dirB-nav-link:hover { color: #0a0a0a; }
.dirB-nav-link.is-active { color: #f5f5f5; }
.dirB.mono:not(.dark) .dirB-nav-link.is-active { color: #0a0a0a; }
.dirB-nav-link.is-active::after {
  height: 1px;
  bottom: 18px;
  left: 2px;
  right: 2px;
  background: currentColor;
  opacity: 0.85;
}
.dirB-nav-num {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  opacity: 0.55;
  margin-right: 1px;
  font-variant-numeric: tabular-nums;
}

/* Header-right cluster: theme toggle + CTA share a hairline rhythm */
.dirB-header-tools { gap: 8px; }

.dirB-theme-toggle {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(245, 245, 245, 0.18);
  color: rgba(245, 245, 245, 0.78);
  font-family: var(--display);
  font-size: 13px;
  transition: color .15s, border-color .15s, background .15s;
}
.dirB.mono:not(.dark) .dirB-theme-toggle {
  border-color: rgba(10, 10, 10, 0.18);
  color: rgba(10, 10, 10, 0.78);
}
.dirB-theme-toggle:hover {
  background: transparent;
  border-color: currentColor;
  color: #f5f5f5;
}
.dirB.mono:not(.dark) .dirB-theme-toggle:hover { color: #0a0a0a; }

/* CTA — editorial outline, not a slab. Chevron baked into pseudo. */
.dirB-header-tools .dirB-cta-mini {
  font-family: var(--display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.005em;
  text-transform: none;
  padding: 8px 16px 8px 18px;
  background: transparent;
  color: #f5f5f5;
  border: 1px solid rgba(245, 245, 245, 0.32);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  line-height: 1;
  height: 30px;
}
.dirB-header-tools .dirB-cta-mini::after {
  content: "→";
  font-size: 13px;
  opacity: 0.72;
  transition: transform .18s ease;
}
.dirB-header-tools .dirB-cta-mini:hover {
  background: #f5f5f5;
  color: #0a0a0a;
  border-color: #f5f5f5;
}
.dirB-header-tools .dirB-cta-mini:hover::after {
  transform: translateX(2px);
  opacity: 1;
}
.dirB.mono:not(.dark) .dirB-header-tools .dirB-cta-mini {
  color: #0a0a0a;
  border-color: rgba(10, 10, 10, 0.32);
}
.dirB.mono:not(.dark) .dirB-header-tools .dirB-cta-mini:hover {
  background: #0a0a0a;
  color: #f5f5f5;
  border-color: #0a0a0a;
}

/* Nullify the stray nav background from the dark-variant overrides earlier
   in this file — the new header rests on its own backdrop blur and the
   inline-nav tile was creating a faintly-lit "rectangle" that read as a
   broken band, especially over the light CTA section. */
.dirB.mono.dark .dirB-header .dirB-nav,
.dirB.mono:not(.dark) .dirB-header .dirB-nav {
  background: transparent !important;
  border: 0 !important;
}
.dirB.mono.dark .dirB-header .dirB-nav a:hover {
  background: transparent;
}

/* Hide the side deck-dots — the page already has the nav and number
   markers; the dot strip duplicates that navigation cue. */
.dirB-deck-dots { display: none; }

/* Final-CTA section flips to a light panel inside the otherwise-dark page.
   When scrolled to that section in dark mode, the dark header on light bg
   was creating a visible band. Keep the header dark but soften the join
   with a stronger blur and matching hairline so the transition reads as
   intentional rather than broken. */
.dirB.mono.dark .dirB-final {
  border-top: 1px solid rgba(10, 10, 10, 0.08);
}


/* ===== VideoMock — looping product captures inside the carousel device frame.
   Direct child of .dirB-carousel-shot so it inherits the bezel/shadow that
   wraps the static mocks. Aspect-ratio is set inline per-slide from each
   clip's native dimensions — no cropping, no letterbox. */
.dirB-mock-video {
  background: #0a0a0a;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.dirB-mock-video video,
.dirB-mock-video .dirB-mock-video-still {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: #0a0a0a;
}
/* Hairline progress at the bottom — quiet "this is alive" tell without a
   player UI. Sits over the video, z-index above the bezel inner shadow. */
.dirB-mock-video-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.85) 100%);
  pointer-events: none;
  z-index: 3;
  transition: width 0.12s linear;
}
/* When reduced motion is on, show the poster image only — no progress bar. */
.dirB-mock-video.is-reduced .dirB-mock-video-progress { display: none; }

/* Tap-to-play fallback — only renders if play() rejected (autoplay blocked).
   Covers the video frame with a centered affordance, removed the moment
   playback starts. */
.dirB-mock-video-tap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.18) 70%);
  color: rgba(255,255,255,0.95);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 4;
  backdrop-filter: blur(2px);
}
.dirB-mock-video-tap-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  color: #0a0a0a;
  font-size: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  transition: transform 0.18s, background 0.18s;
}
.dirB-mock-video-tap:hover .dirB-mock-video-tap-icon {
  background: #fff;
  transform: scale(1.05);
}

/* The carousel already gives video slides the "Live · in product" pill via
   the existing .dirB-shot-livepill rule. We swap the wording in JS but reuse
   the same styles so nothing else has to know. */

/* ===== Direction B: Industry data (#data) + Manifesto (#manifesto) ===== */
.dirB-data {
  min-height: auto;          /* secondary band — not a full-viewport primary slide */
  padding: 52px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.dirB-data > * { width: 100%; max-width: 1180px; margin-left: auto; margin-right: auto; }
.dirB-data-head { max-width: 820px; margin-bottom: 28px; }
.dirB-data-head .label {
  display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 18px;
}
.dirB-data-head h2 {
  font-family: var(--display, var(--serif)); font-weight: 600;
  font-size: clamp(23px, 2.7vw, 34px); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--ink); margin: 0 0 10px;
}
.dirB-data-head p { font-family: var(--sans); font-size: 15px; color: var(--ink-soft); margin: 0; }
.dirB-data-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--ink); border-left: 1px solid var(--rule);
}
.dirB-data-card {
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 28px 30px 24px; display: flex; flex-direction: column; gap: 12px;
}
/* Figure = the focal number + a one-line "what it measures", divided from the depth below. */
.dirB-data-figure {
  display: flex; flex-direction: column; gap: 6px;
  padding-bottom: 16px; border-bottom: 1px solid var(--rule);
}
.dirB-data-stat {
  font-family: var(--display, var(--serif)); font-weight: 600;
  font-size: clamp(44px, 4.4vw, 64px); line-height: 0.95; letter-spacing: -0.03em; color: var(--red);
}
.dirB-data-caption {
  font-family: var(--sans); font-size: 13px; line-height: 1.35; color: var(--ink-soft); max-width: 30ch;
}
.dirB-data-card h3 {
  font-family: var(--sans); font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--ink); margin: 0;
}
.dirB-data-card p {
  font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: 0;
}
.dirB-data-card p strong { color: var(--ink); }
.dirB-data-card cite {
  font-family: var(--mono); font-style: normal; font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: auto; padding-top: 10px;
}
@media (max-width: 620px) { .dirB-data-grid { grid-template-columns: 1fr; } }

/* Secondary deck dots: smaller + muted so #data / #manifesto read as minor stops. */
.dirB-deck-dot.is-minor { width: 4px; height: 4px; opacity: 0.5; }
.dirB-deck-dot.is-minor.is-active { opacity: 1; }

.dirB-manifesto {
  padding: 88px 32px 36px;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--bg-2, var(--bg));
}
.dirB-manifesto-inner { width: 100%; max-width: 760px; margin: 0 auto; }
.dirB-manifesto .label {
  display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 20px;
}
.dirB-manifesto h2 {
  font-family: var(--display, var(--serif)); font-weight: 600;
  font-size: clamp(32px, 4.5vw, 56px); line-height: 1.04; letter-spacing: -0.02em;
  color: var(--ink); margin: 0 0 28px;
}
.dirB-manifesto p {
  font-family: var(--sans); font-size: 18px; line-height: 1.62; color: var(--ink-soft); margin: 0 0 18px;
}
.dirB-manifesto p em { color: var(--ink); font-style: italic; }
.dirB-manifesto-sign { color: var(--ink) !important; font-size: 20px !important; margin-top: 28px !important; }
.dirB-manifesto-sign strong { color: var(--red); }
.dirB-manifesto-by {
  display: block; font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em;
  color: var(--ink-faint); margin-top: 14px;
}
.dirB-manifesto-foot {
  width: 100%; max-width: 760px; margin: 52px auto 0; padding-top: 22px;
  border-top: 1px solid var(--rule); display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-faint);
}
.dirB-manifesto-foot .dirB-logo-dots { display: inline-flex; gap: 4px; }
.dirB-manifesto-foot .dirB-logo-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); display: block; }

/* ===== Direction B: Vision / thesis closer (#vision) ===== */
.dirB-vision {
  padding: 80px 32px 40px;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--bg-2, var(--bg));
}
.dirB-vision-inner { width: 100%; max-width: 1180px; margin: 0 auto; }
.dirB-vision .label {
  display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 18px;
}
.dirB-vision-thesis {
  font-family: var(--display, var(--serif)); font-weight: 600;
  font-size: clamp(32px, 4.6vw, 58px); line-height: 1.04; letter-spacing: -0.02em;
  color: var(--ink); margin: 0 0 30px; max-width: 22ch;
}
.dirB-vision-thesis .muted { color: var(--ink-faint); }
.dirB-vision-thesis::after {
  content: ""; display: block; width: 64px; height: 2px; margin-top: 24px;
  background: var(--red);
}
.dirB-vision-pov { max-width: 720px; }
.dirB-vision-pov p {
  font-family: var(--sans); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.62;
  color: var(--ink-soft); margin: 0 0 18px;
}
.dirB-vision-pov p:last-child { margin-bottom: 0; }
.dirB-vision-pov p em, .dirB-vision-manifesto p em { color: var(--ink); font-style: italic; }
.dirB-vision-subhead {
  display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px;
}
.dirB-vision-evidence { margin-top: 52px; }
.dirB-vision-subnote {
  font-family: var(--sans); font-size: 15px; color: var(--ink-soft); margin: 0 0 20px; max-width: 620px;
}
.dirB-vision-manifesto { margin-top: 52px; max-width: 720px; }
.dirB-vision-manifesto p {
  font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 16px;
}

/* ===== Lead-magnet report CTA (in #evidence) ===== */
/* The #evidence (.dirB-bigstat) band is dark in BOTH themes, so this CTA uses
   fixed light colors rather than the theme's --ink (which is black in light mode). */
.dirB-report-cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;align-self:flex-start;
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:#f5f5f5;
  background:transparent;border:1px solid rgba(245,245,245,0.34);
  border-radius:999px;padding:10px 18px;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s;
}
.dirB-report-cta span{color:rgba(245,245,245,0.6);transition:color .2s;}
.dirB-report-cta:hover{background:#f5f5f5;color:#141414;border-color:#f5f5f5;}
.dirB-report-cta:hover span{color:#141414;}

/* ===== Mobile hamburger + slide-in drawer ===== */
.dirB-burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; padding:0 9px; margin-right:-6px;
  background:transparent; border:none; cursor:pointer;
}
.dirB-burger span{ display:block; height:2px; width:100%; background:var(--ink); border-radius:2px; }

.dirB-drawer-backdrop{
  position:fixed !important; inset:0; z-index:90; display:flex; justify-content:flex-end;
  background:rgba(0,0,0,0.5); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  animation:dirB-drawer-fade .2s ease;
}
.dirB-drawer{
  width:min(85vw,330px); height:100%; background:var(--bg);
  border-left:1px solid var(--rule); box-shadow:-24px 0 70px rgba(0,0,0,0.45);
  display:flex; flex-direction:column; padding:18px 22px 26px;
  animation:dirB-drawer-in .26s cubic-bezier(0.22,1,0.36,1);
}
@keyframes dirB-drawer-fade{ from{opacity:0} to{opacity:1} }
@keyframes dirB-drawer-in{ from{transform:translateX(100%)} to{transform:translateX(0)} }
.dirB-drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.dirB-drawer-head .dirB-logo-dots{ font-size:18px; color:var(--ink); display:inline-flex; }
.dirB-drawer-close{ background:none; border:none; color:var(--ink); font-size:28px; line-height:1; cursor:pointer; padding:0 6px; }
.dirB-drawer-nav{ display:flex; flex-direction:column; }
.dirB-drawer-link{
  display:flex; align-items:baseline; gap:12px; padding:15px 2px;
  font-family:var(--sans); font-size:22px; font-weight:600; letter-spacing:-0.01em;
  color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule-soft);
}
.dirB-drawer-link:active{ opacity:.6; }
.dirB-drawer-num{ font-family:var(--mono); font-size:11px; font-weight:400; color:var(--ink-faint); }
.dirB-drawer-foot{ margin-top:auto; display:flex; flex-direction:column; gap:10px; padding-top:22px; }
.dirB-drawer-report{
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--ink);
  background:transparent; border:1px solid var(--rule); border-radius:999px; padding:13px; cursor:pointer;
}
.dirB-drawer-cta{
  font-family:var(--sans); font-size:15px; font-weight:600; color:var(--bg);
  background:var(--ink); border:none; border-radius:999px; padding:14px; cursor:pointer;
}
@media (max-width:900px){
  .dirB-burger{ display:flex; }
  .dirB-header .dirB-cta-mini{ display:none; }   /* Book audit lives in the drawer on mobile */
}