/*
 * /products/crawl — Crawl primitive page.  Story = DISCOVERY.
 *
 *  Five acts, each its own mechanic (no card-grid + saturated-
 *  band template):
 *    1. Centered editorial hero (no visual companion)
 *    2. Sticky-stage scroll-painted walker journey (5 beats)
 *    3. Fetch vs Crawl side-by-side hover-reveal
 *    4. Live data-table fill (row-append on IO)
 *    5. Right-anchored closer with a mock-URL CTA
 *
 *  Cursor language per DESIGN.md: native pointer on every CTA
 *  + the depth-knob seg-control buttons (the seg-control DS
 *  atom already handles its own cursor).  No SVG portal scope
 *  beyond back-to-top.
 */

@import url("../../_ds/fonts.css");
@import url("../../_ds/theme.css");
@import url("../../_shared/chrome.css");
@import url("../../_shared/components.css");

/* Cursor portal scope */
.back-to-top { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════
   ACT 1 — Hero.  Centered editorial moment, no visual.
═══════════════════════════════════════════════════════════ */

.cr-hero {
  position: relative;
  padding: clamp(128px, 18vh, 200px) clamp(24px, 5vw, 56px) clamp(64px, 8vh, 96px);
  background: var(--surface);
}

.cr-hero-frame {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(20px, 2vw, 28px);
}

.cr-hero-kicker {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.cr-hero-pill {
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Semantic purple tokens: bg uses color-mix from --zen-purple-7
     which flips per theme; text uses --zen-purple-9 which is dark
     saturated purple in light (#5835B8) and light lavender in dark
     (#B39CE6).  Readable in BOTH modes without hardcoding. */
  background: color-mix(in srgb, var(--zen-purple-7) 14%, transparent);
  color: var(--zen-purple-9);
}

.cr-hero-h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-hero-xl);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--text-primary);
  text-wrap: balance;
  max-width: 18ch;
}

.cr-hero-h1 em {
  font-style: normal;
  color: var(--text-primary);
}

.cr-hero-sub {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 60ch;
  text-wrap: pretty;
}

.cr-hero-cta { margin-top: clamp(8px, 1.2vh, 16px); }

/* ═══════════════════════════════════════════════════════════
   ACT 2 — Sticky-stage walker.  The page-signature.
   --beat goes 0..4 driven by scroll; pinned section is tall
   so the user has scroll budget to read the captions.
═══════════════════════════════════════════════════════════ */

.cr-walk {
  position: relative;
  background: var(--surface);
  --beat: 0;
}

.cr-walk-stage {
  position: relative;
  min-height: 460vh;
  padding: clamp(64px, 8vh, 100px) clamp(24px, 5vw, 56px);
}

/* Sticky pin — top padding accounts for the fixed 72px topbar
   PLUS a breathing gap so the H2 doesn't collide with the
   logo on standard-height laptops.  min-height adjusted to
   accommodate the pin without forcing extra scroll. */
.cr-walk-pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(20px, 2.5vw, 40px);
  padding: clamp(110px, 12vh, 140px) 0 clamp(48px, 6vh, 72px);
  max-width: 1280px;
  margin: 0 auto;
}

.cr-walk-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 60ch;
}


.cr-walk-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-h3);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}

/* ── Canvas + SVG paint ───────────────────────────────── */
.cr-walk-canvas {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
}

.cr-walk-canvas svg {
  width: 100%;
  max-width: 880px;
  height: auto;
  max-height: 50vh;
}

.cr-walk-seed circle { fill: #7C4FE8; }
.cr-walk-seed text {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.06em;
  fill: var(--text-tertiary);
}

/* Each beat-shape group: hidden until --beat reaches its
   threshold, then fades + draws in. */
.cr-walk-shape {
  opacity: 0;
  transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cr-walk-shape path,
.cr-walk-shape circle:not(.cr-walk-keep) {
  stroke: rgba(122, 218, 230, 0.65);
  fill: rgba(122, 218, 230, 0.65);
  stroke-width: 1.2;
  fill-opacity: 1;
}
.cr-walk-shape path { fill: none; stroke-linecap: round; }

.cr-walk-shape text {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 9px;
  letter-spacing: 0.04em;
  fill: var(--text-tertiary);
  opacity: 0.8;
}

.cr-walk[style*="--beat: 1"]  .cr-walk-shape[data-beat="1"],
.cr-walk[style*="--beat: 2"]  .cr-walk-shape[data-beat="1"],
.cr-walk[style*="--beat: 2"]  .cr-walk-shape[data-beat="2"],
.cr-walk[style*="--beat: 3"]  .cr-walk-shape[data-beat="1"],
.cr-walk[style*="--beat: 3"]  .cr-walk-shape[data-beat="2"],
.cr-walk[style*="--beat: 3"]  .cr-walk-shape[data-beat="3"],
.cr-walk[style*="--beat: 4"]  .cr-walk-shape { opacity: 1; }

/* Beat 4 — filtering: the kept circles glow brand-purple,
   the rest of beat 3's nodes dim. */
.cr-walk[style*="--beat: 4"] .cr-walk-shape[data-beat="3"] circle {
  opacity: 0.18;
  fill: rgba(255, 255, 255, 0.4);
  stroke: none;
}
.cr-walk[style*="--beat: 4"] .cr-walk-shape[data-beat="3"] path {
  opacity: 0.18;
}
.cr-walk[style*="--beat: 4"] .cr-walk-keep {
  opacity: 1;
  fill: #7C4FE8;
  stroke: none;
}

/* Walker dot — positioned via inline transform from JS.
   White in dark mode (high contrast on dark page); flips to brand
   purple in BU light mode so the dot stays visible on the light bg
   (white on white would disappear).  Purple also pairs with the
   seed dot's brand purple fill on line 214. */
.cr-walk-cursor {
  fill: #FFFFFF;
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
html:not(.dark) .cr-walk-cursor { fill: #7C4FE8; }

/* ── Captions ─────────────────────────────────────────── */
.cr-walk-captions {
  position: relative;
  min-height: 96px;
}

.cr-walk-caption {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  column-gap: 18px;
  row-gap: 4px;
  align-items: baseline;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cr-walk[style*="--beat: 0"] .cr-walk-caption[data-beat="0"],
.cr-walk[style*="--beat: 1"] .cr-walk-caption[data-beat="1"],
.cr-walk[style*="--beat: 2"] .cr-walk-caption[data-beat="2"],
.cr-walk[style*="--beat: 3"] .cr-walk-caption[data-beat="3"],
.cr-walk[style*="--beat: 4"] .cr-walk-caption[data-beat="4"] {
  opacity: 1;
  transform: translateY(0);
}

.cr-walk-caption-step {
  grid-row: 1 / 3;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  padding-top: 4px;
}

.cr-walk-caption-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-h4);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.cr-walk-caption-line {
  display: block;
  font-family: var(--font-base);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 52ch;
}

@media (prefers-reduced-motion: reduce) {
  .cr-walk-shape, .cr-walk-caption { opacity: 1; transform: none; transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   ACT 3 — Depth knob on a saturated teal band.
   Solid #7ADAE6 fill via ::before with clip-path curtain-wipe.
   Interactive: 5-button seg-control drives --depth (1-5); the
   SVG tree densifies per layer and the counter updates.  Dark
   ink on teal (warm-dark #1D1612 per brand-palette rule).
═══════════════════════════════════════════════════════════ */

/* Saturated teal field shared by Acts 3 + 4.  The ::before
   sits at z-index -1 behind both sections.  Transition is a
   radial CIRCLE expand from centre — distinct from the
   vertical inset wipe used on /pricing + /security + Crawl
   Act 2.  Reversible on scroll up. */
.cr-teal-wrap {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Fill the wrap solid teal after the clip-path wipe (1400ms) finishes, so the
     central topbar watcher (_shared/nav-band-adapt.js) has a full-bleed teal bg
     to detect. The ::before already covers it by then, so no visual change. */
  transition: background-color 200ms linear 1450ms;
}
.cr-teal-wrap.is-revealed { background-color: #7ADAE6; }

.cr-teal-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #7ADAE6;
  z-index: -1;
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 1400ms cubic-bezier(0.65, 0, 0.35, 1);
  will-change: clip-path;
}

.cr-teal-wrap.is-revealed::before { clip-path: circle(140% at 50% 50%); }

@media (prefers-reduced-motion: reduce) {
  .cr-teal-wrap { transition: none; }
  .cr-teal-wrap::before { transition: none; clip-path: circle(140% at 50% 50%); }
}

/* Sticky-stage Act 3 — tall section so scroll budget drives
   the depth knob across 5 values.  Content pins inside via
   .cr-depth-pin. */
.cr-depth {
  position: relative;
  /* Sticky stage scroll duration.  150vh = 50vh of post-pin
     scroll after the depth dial cycles, which is enough for
     the user to absorb the final state before Act 4's table
     starts — without the dead-scroll empty teal Pablo flagged. */
  min-height: 150vh;
  background: transparent;
}

.cr-depth-pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(108px, 13vh, 140px) clamp(24px, 5vw, 56px) clamp(40px, 5vh, 64px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(16px, 2.5vw, 32px);
}

.cr-depth-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 24ch;
}

.cr-depth-kicker { margin: 0; color: rgba(29, 22, 18, 0.7); }

.cr-depth-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-hero);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: #1D1612;
  text-wrap: balance;
}

/* ── Stage = tree visual + controls below ────────────── */
.cr-depth-stage {
  --depth: 3;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
}

.cr-depth-viz {
  width: 100%;
}

.cr-depth-viz svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 56vh;
}

.cr-depth-seed { fill: #7C4FE8; }

.cr-depth-layer path,
.cr-depth-layer circle {
  fill: #1D1612;
  stroke: rgba(29, 22, 18, 0.55);
  stroke-width: 1;
}

.cr-depth-layer path {
  fill: none;
  stroke-linecap: round;
}

.cr-depth-leaf-paths path {
  stroke: rgba(29, 22, 18, 0.35);
  stroke-width: 0.8;
}

/* Show layers up to the current --depth value.  Higher
   layers fade out + scale down slightly. */
.cr-depth-layer {
  opacity: 0;
  transform-origin: left center;
  transition:
    opacity 480ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Layer visibility per current depth.  Uses data-depth on
   the stage (robust against CSS custom-property serialization
   differences). */
.cr-depth-stage[data-depth="1"] .cr-depth-layer[data-d="1"],
.cr-depth-stage[data-depth="2"] .cr-depth-layer[data-d="1"],
.cr-depth-stage[data-depth="2"] .cr-depth-layer[data-d="2"],
.cr-depth-stage[data-depth="3"] .cr-depth-layer[data-d="1"],
.cr-depth-stage[data-depth="3"] .cr-depth-layer[data-d="2"],
.cr-depth-stage[data-depth="3"] .cr-depth-layer[data-d="3"],
.cr-depth-stage[data-depth="4"] .cr-depth-layer[data-d="1"],
.cr-depth-stage[data-depth="4"] .cr-depth-layer[data-d="2"],
.cr-depth-stage[data-depth="4"] .cr-depth-layer[data-d="3"],
.cr-depth-stage[data-depth="4"] .cr-depth-layer[data-d="4"],
.cr-depth-stage[data-depth="5"] .cr-depth-layer { opacity: 1; }

.cr-depth-cloud--far { opacity: 0.6; }

/* ── Controls (counter + knob) ───────────────────────── */
.cr-depth-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 40px);
}

.cr-depth-counter {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-base);
  color: rgba(29, 22, 18, 0.75);
}

.cr-depth-counter-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-h2);
  line-height: 1;
  letter-spacing: -0.025em;
  color: #1D1612;
  transition: color 220ms ease;
}

.cr-depth-counter-label {
  font-size: var(--mkt-body);
}

.cr-depth-counter-label strong {
  color: #1D1612;
  font-weight: 500;
}

/* The seg-control --brand on a teal band: the default purple
   active fill reads well over teal.  Inactive option text
   sits dark-ink for legibility. */
/* colours + mono come from .seg-control--on-teal / --mono (components.css) */
.cr-depth-knob .seg-control-opt { min-width: 44px; justify-content: center; }

.cr-depth-knob {
  background: rgba(29, 22, 18, 0.08);
  border-color: rgba(29, 22, 18, 0.18);
}

/* ═══════════════════════════════════════════════════════════
   ACT 4 — Live data table that "lands" row by row
═══════════════════════════════════════════════════════════ */

/* Act 4 sits ON the teal-wrap field — bg transparent, ink
   dark warm (#1D1612).  Padding tightened so the table fits
   without forcing extra scroll. */
.cr-land {
  position: relative;
  padding: clamp(48px, 6vh, 80px) clamp(24px, 5vw, 56px) clamp(96px, 12vh, 140px);
  background: transparent;
}

.cr-land-frame {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 3vw, 48px);
}

.cr-land-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 64ch;
}

/* Kicker on the teal band — match Act 3's cr-depth-kicker so the
   warm-grey --text-tertiary doesn't read as coral against teal. */
.cr-land .act-kicker { color: rgba(29, 22, 18, 0.7); }

.cr-land-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-h3);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: #1D1612;
}

.cr-land-sub {
  margin: 0;
  font-family: var(--font-base);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(29, 22, 18, 0.75);
  max-width: 64ch;
}

/* Subtle table — single hairline border around the block,
   hairline row dividers inside.  No fill, no backdrop-blur,
   no per-row tints.  Reads as a quiet data sheet on the teal
   field. */
.cr-land-table {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(29, 22, 18, 0.18);
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
}

.cr-land-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1.2fr) 80px 1fr;
  gap: clamp(12px, 1.4vw, 24px);
  padding: 12px clamp(18px, 1.8vw, 26px);
  border-bottom: 1px solid rgba(29, 22, 18, 0.12);
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 13px;
  color: rgba(29, 22, 18, 0.7);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cr-land-row:last-child { border-bottom: none; }

.cr-land-row--head {
  font-family: var(--font-base);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(29, 22, 18, 0.55);
  opacity: 1;
  transform: none;
}

.cr-land-row span:first-child { color: #1D1612; }

.cr-land-row--ellipsis { opacity: 0; }
.cr-land-row--ellipsis span:first-child { color: rgba(29, 22, 18, 0.5); letter-spacing: 0.2em; }

.cr-land-row--final span:first-child {
  color: #1D1612;
  font-weight: 500;
}

.cr-land.is-revealed .cr-land-row {
  opacity: 1;
  transform: translateY(0);
}
.cr-land.is-revealed .cr-land-row[data-row="1"] { transition-delay:    0ms; }
.cr-land.is-revealed .cr-land-row[data-row="2"] { transition-delay:  140ms; }
.cr-land.is-revealed .cr-land-row[data-row="3"] { transition-delay:  280ms; }
.cr-land.is-revealed .cr-land-row[data-row="4"] { transition-delay:  420ms; }
.cr-land.is-revealed .cr-land-row[data-row="5"] { transition-delay:  560ms; }
.cr-land.is-revealed .cr-land-row[data-row="6"] { transition-delay:  700ms; }
.cr-land.is-revealed .cr-land-row[data-row="7"] { transition-delay:  840ms; }
.cr-land.is-revealed .cr-land-row[data-row="8"] { transition-delay:  980ms; }
.cr-land.is-revealed .cr-land-row[data-row="9"] { transition-delay: 1120ms; }
.cr-land.is-revealed .cr-land-row[data-row="10"] { transition-delay: 1280ms; }

@media (prefers-reduced-motion: reduce) {
  .cr-land-row { opacity: 1; transform: none; transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   ACT 5 — Closer.  Right-anchored wedge with mock-URL CTA.
═══════════════════════════════════════════════════════════ */

.cr-end {
  position: relative;
  padding: clamp(112px, 14vh, 160px) clamp(24px, 5vw, 56px) clamp(96px, 14vh, 160px);
  background: var(--surface);
  overflow: hidden;
}

.cr-end-frame {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: end;
  gap: clamp(40px, 5vw, 80px);
}

.cr-end-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: end;
}

.cr-end-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-h2);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  text-wrap: balance;
}

.cr-end-sub {
  margin: 0;
  font-family: var(--font-base);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 52ch;
}

/* The CTA looks like a function call.  Mock URL is the slot. */
.cr-end-cta {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: clamp(18px, 1.8vw, 26px) clamp(20px, 2vw, 28px);
  background: #7C4FE8;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: var(--mkt-lead);
  color: #FFFFFF;
  transition: background-color 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  justify-self: end;
}

.cr-end-cta:hover {
  background: #6B43D1;
  transform: translateY(-2px);
}

.cr-end-cta-method { color: rgba(255, 255, 255, 0.55); }

.cr-end-cta-url {
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.15);
  font-style: italic;
}

.cr-end-cta-arrow { margin-left: 8px; }

.cr-end-docs {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: clamp(20px, 2vh, 32px);
}

/* ═══════════════════════════════════════════════════════════
   Wide-desktop tiers + responsive
═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   Wide-desktop tiers — scale type + container per breakpoint.
═══════════════════════════════════════════════════════════ */

@media (min-width: 1600px) {
  .cr-hero-frame { max-width: 1240px; }
  
  .cr-hero-sub { font-size: 20px; max-width: 64ch; }
  .cr-depth-pin, .cr-land-frame, .cr-end-frame, .cr-walk-pin {
    max-width: 1600px;
  }
  .cr-depth-h2, .cr-land-h2, .cr-end-h2, .cr-walk-h2 { font-size: clamp(40px, 3.4vw, 60px); }
  
  .cr-depth-counter-label { font-size: 19px; }
  .cr-walk-caption-name { font-size: var(--mkt-h4); }
  .cr-land-row { font-size: 14px; padding: 14px clamp(20px, 1.8vw, 28px); }
  .cr-land-row--head { font-size: 12px; }
}

@media (min-width: 1920px) {
  .cr-hero-frame { max-width: 1360px; }
  
  .cr-depth-pin, .cr-land-frame, .cr-end-frame, .cr-walk-pin {
    max-width: 1760px;
  }
  .cr-depth-h2, .cr-land-h2, .cr-end-h2, .cr-walk-h2 { font-size: clamp(48px, 3.4vw, 72px); }
}

@media (min-width: 2400px) {
  .cr-hero-frame { max-width: 1480px; }
  .cr-depth-pin, .cr-land-frame, .cr-end-frame, .cr-walk-pin {
    max-width: 2080px;
  }
}

/* ═══════════════════════════════════════════════════════════
   Mid-desktop + tablet — collapses + tightening.
═══════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .cr-end-frame { grid-template-columns: 1fr; align-items: stretch; }
  .cr-end-cta { justify-self: stretch; justify-content: center; }
  .cr-land-row { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) 60px 1fr; gap: 12px; }
  .cr-depth-controls { flex-direction: column; align-items: flex-start; gap: 20px; }
}

@media (max-width: 720px) {
  /* Walker pin: keep 90px+ top so H2 clears the 72px topbar. */
  .cr-walk-stage { min-height: 360vh; padding-left: clamp(20px, 5vw, 28px); padding-right: clamp(20px, 5vw, 28px); }
  .cr-walk-pin { padding: clamp(96px, 12vh, 116px) 0 clamp(36px, 5vh, 56px); gap: clamp(16px, 2vw, 24px); }
  .cr-walk-canvas svg { max-height: 36vh; }
  .cr-walk-h2 { font-size: var(--mkt-h4); }
  .cr-walk-caption { grid-template-columns: 40px 1fr; column-gap: 12px; }
  .cr-walk-caption-name { font-size: 18px; }
  .cr-walk-caption-step { font-size: 11px; }
  /* Depth pin: tighter top padding so the pin fits in viewport. */
  .cr-depth { min-height: 180vh; }
  .cr-depth-pin { padding: clamp(92px, 11vh, 112px) clamp(20px, 5vw, 28px) clamp(28px, 4vh, 48px); gap: clamp(12px, 2vw, 24px); }
  .cr-depth-viz svg { max-height: 38vh; }
  
  
  .cr-depth-counter-label { font-size: 13px; }
  .cr-land { padding-top: clamp(32px, 4vh, 48px); padding-bottom: clamp(64px, 8vh, 96px); }
  .cr-land-h2 { font-size: var(--mkt-h4); }
  .cr-land-row { grid-template-columns: 1fr auto; gap: 10px; padding: 11px clamp(14px, 4vw, 22px); }
  .cr-land-row > span:nth-child(2),
  .cr-land-row > span:nth-child(3) { display: none; }
}

@media (max-width: 600px) {
  .cr-hero { padding: clamp(96px, 14vh, 140px) clamp(20px, 5vw, 28px) clamp(48px, 6vh, 72px); }
  .cr-hero-h1 { font-size: var(--mkt-h2); max-width: none; }
  .cr-hero-sub { font-size: 14px; }
  .cr-depth { min-height: 170vh; }
  
  .cr-depth-counter { gap: 10px; }
  
  .cr-depth-counter-label { font-size: 12px; }
  .cr-depth-knob .seg-control-opt { min-width: 36px; font-size: 13px; padding: 6px 10px; }
  .cr-end { padding: clamp(72px, 11vh, 110px) clamp(20px, 5vw, 28px); }
  .cr-end-h2 { font-size: var(--mkt-h4); }
  .cr-end-sub { font-size: 14px; }
  .cr-end-cta { font-size: 13px; padding: 14px 18px; flex-wrap: wrap; justify-content: center; }
  .cr-end-cta-method { display: none; }
  .cr-end-cta-url { padding: 1px 6px; }
}

@media (max-width: 400px) {
  
  .cr-walk-caption { grid-template-columns: 32px 1fr; column-gap: 10px; }
  .cr-depth-knob { width: 100%; }
  .cr-depth-knob .seg-control-opt { flex: 1 1 0; min-width: 0; }
}

/* ══════════════════════════════════════════════════════════
   body.is-on-teal — fires while Acts 3 + 4 (.cr-teal-wrap) cover
   the 72px topbar slot.  Chrome inverts to warm-dark on the teal
   band.  Hardcoded #1D1612 (not var(--background)) so the chrome
   reads dark in BOTH tech and BU modes — the teal band itself is
   theme-invariant brand colour. */
/* CTA flips to brand purple so the teal pill doesn't disappear
   on the teal band.  Hardcoded per DESIGN.md's saturated-bands
   rule (no theme-flipping vars on band chrome). */

/* ══════════════════════════════════════════════════════════
   Audience switcher + BU light theme.
   Same mechanism as home / Fetch / Browser Sessions / Extract. */
[data-audience-tech][hidden],
[data-audience-bu][hidden] { display: none !important; }

.audience-switch {
  position: fixed;
  top: 50%;
  right: 16px;
  z-index: 250;
  /* Grid 1fr 1fr forces equal-height rows so the sliding indicator
     aligns with each segment regardless of label length. */
  display: grid;
  grid-template-rows: 1fr 1fr;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--background) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  will-change: transform;
  transform: translateY(-50%) translateZ(0);
  backface-visibility: hidden;
}
/* Sliding purple pill indicator — moves between tech/bu segments
   based on body[data-audience].  CSS-only animation. */
.audience-switch::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50%;
  background: #7C4FE8;
  z-index: 0;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
body[data-audience="bu"] .audience-switch::before {
  transform: translateY(100%);
}
.audience-switch-btn {
  position: relative;
  z-index: 1;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 16px 11px;
  cursor: pointer;
  font-family: var(--font-code, var(--font-mono), "IBM Plex Mono", monospace);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1);
  writing-mode: vertical-rl;
}
.audience-switch-btn[aria-pressed="true"] {
  color: #FFFFFF;
}
.audience-switch-btn:hover:not([aria-pressed="true"]) { color: var(--text-secondary); }
/* Mobile — compact horizontal pill bottom-right (FAB-style). */
@media (max-width: 720px) {
  .audience-switch {
    top: auto;
    bottom: 20px;
    right: 16px;
    transform: translateZ(0);
    grid-template-rows: none;
    grid-template-columns: 1fr 1fr;
  }
  .audience-switch::before {
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    width: 50%;
    height: 100%;
  }
  body[data-audience="bu"] .audience-switch::before {
    transform: translateX(100%);
  }
  .audience-switch-btn {
    writing-mode: horizontal-tb;
    padding: 10px 18px;
    font-size: 10px;
  }
}

/* ── BU light mode body + chrome ── */
html:not(.dark) body {
  background: var(--background);
  color: var(--text-primary);
}
html:not(.dark) .audience-switch {
  background: var(--zen-gray-1);
  border-color: var(--border-default);
  box-shadow: 0 12px 28px -12px rgba(29, 22, 18, 0.18);
}

/* Mq12 display face on every heading in BU. */
html:not(.dark) .cr-hero-h1,
html:not(.dark) .cr-walk-h2,
html:not(.dark) .cr-depth-h2,
html:not(.dark) .cr-land-h2,
html:not(.dark) .cr-end-h2 {
  font-family: 'Mq12', system-ui, sans-serif;
  font-weight: 500;
}

/* Topbar inversion. */

/* Nav popover (.nav-dropdown) light variant. */
html:not(.dark) .nav-dropdown {
  background: #FFFFFF;
  border-color: var(--border-subtle);
  box-shadow: 0 28px 56px -20px rgba(29, 22, 18, 0.18);
}
html:not(.dark) .nav-mega-item > a { color: var(--text-secondary); }
html:not(.dark) .nav-mega-item > a:hover,
html:not(.dark) .nav-mega-item > a:focus-visible {
  background: var(--sunken-hover);
  color: var(--text-primary);
}
html:not(.dark) .nav-mega-item.is-active > a {
  background: var(--sunken-active);
  color: var(--text-primary);
}
html:not(.dark) .nav-mega-item > span { color: var(--text-tertiary); }
html:not(.dark) .nav-mega-item.is-active > span {
  background: var(--sunken-active);
  color: var(--text-secondary);
}
html:not(.dark) .nav-mega-group-label { color: var(--text-tertiary); }
html:not(.dark) .nav-mega-headline {
  background-color: #1D1612;
  border-color: rgba(29, 22, 18, 0.18);
}
html:not(.dark) .nav-mega-preview-desc { color: var(--text-secondary); }