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

/* ──────────────────────────────────────────────────────────
   /products/batch — An open queue.  Drained at your pace.

   CEO architecture primitive: "Batch" (cloud, planned).
   Editorial split vs Monitor — Monitor owns recurring-on-
   schedule (regular jobs); Batch leans into Open jobs, the
   queue paradigm.  Same warm-dark canvas as the rest of the
   spoke set.  Brand accents: purple-7 on the active item +
   caret; teal-5 on the "delivered" exit flash.
─────────────────────────────────────────────────────────── */


main {
  position: relative;
  z-index: 1;
}

/* Cursor suppression — every selector in batch.js's
   cursorSelector hides the native pointer so the spinning O
   portal is the ONLY pointer on hover. */
.back-to-top,
.bt-queue,
.bt-queue *,
.bt-fan-workers,
.bt-fan-workers *,
.bt-bento-tile,
.bt-bento-tile * {
  cursor: pointer;
}

/* ──────────────────────────────────────────────────────────
   Act 1 — Hero.  Right-aligned editorial + oversize CLI queue.
─────────────────────────────────────────────────────────── */

[data-act="1"] {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  padding: clamp(96px, 12vh, 140px) clamp(20px, 4vw, 48px) clamp(56px, 8vh, 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--background);
  z-index: 1;
}

.bt-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

/* Editorial column — text-aligned right, breaks rhythm vs
   the other spokes.  Max-width caps the line length so the H1
   wraps in its column instead of bleeding into the queue
   territory. */
.bt-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  max-width: 540px;
  min-width: 0;
  justify-self: end;
}

.bt-hero-h1 {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: var(--mkt-h2);
  line-height: 1.02;
  letter-spacing: var(--tracking-dense, -0.022em);
  font-weight: 500;
  color: var(--text-primary);
  text-wrap: balance;
}

.bt-hero-line { display: block; }

.bt-hero-mark {
  font-style: normal;
  color: inherit;
}

.bt-hero-sub {
  margin: clamp(20px, 2.4vh, 32px) 0 0;
  max-width: 460px;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ── Queue widget — no fill, no shadow, no border ──────── */

.bt-hero-demo {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  min-width: 0;
}

.bt-queue {
  --row-h: clamp(54px, 5.4vh, 72px);
  --row-count: 5;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vh, 28px);
  min-width: 0;
}

/* Small editorial meta line above the queue.  No frame, no
   chrome — just the kind of single-line eyebrow you'd see in
   a CLI status header. */
.bt-queue-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-code, monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.bt-queue-meta-label { color: var(--text-tertiary); font-weight: 600; }
.bt-queue-meta-sep { color: var(--text-quaternary); }
.bt-queue-meta-num {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: color 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  font-variant-numeric: tabular-nums;
  display: inline-block;
}
.bt-queue-meta-num.is-bumped {
  color: #7ADAE6;
  transform: translateY(-2px);
}
.bt-queue-meta-tag {
  color: var(--text-quaternary);
  font-size: 10.5px;
}

/* The list itself.  Explicit height (rows × row-h) so absolute-
   positioned items have a known canvas; a thin 1px guide on
   the very left threads through the dots.

   `clip-path: inset(0 -800px 0 -32px)` clips entering items
   below the list bottom + slid items to the right without
   clipping the active dot's halo on the left.  Used in place
   of `overflow: hidden` (which would chop the halo). */
.bt-queue-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  height: calc(var(--row-count) * var(--row-h));
  clip-path: inset(0 -800px 0 -32px);
}

/* Track guide — runs exactly through the column-1 centre so
   the dots sit ON the line.  Column 1 is 28px wide; centre at
   14px; this 1px line sits at 13.5..14.5. */
.bt-queue-list::before {
  content: "";
  position: absolute;
  top: calc(var(--row-h) * 0.5);
  bottom: calc(var(--row-h) * 0.5);
  left: 13.5px;
  width: 1px;
  background: var(--border-subtle);
  pointer-events: none;
}

/* Each item.  Absolutely positioned; --slot CSS var maps to a
   row index.  Column 1 (28px) houses the dot — wider than the
   dot itself so the scaled-active variant + halo stay
   visually centred on the guide line. */
.bt-queue-item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--row-h);
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 1.4vw, 20px);
  padding: 0 clamp(8px, 1vw, 14px) 0 0;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: var(--mkt-lead);
  letter-spacing: -0.005em;
  transform: translateY(calc(var(--slot, 0) * var(--row-h)));
  transition:
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 520ms ease;
  will-change: transform, opacity;
}

.bt-queue-dot {
  justify-self: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-quaternary);
  transition:
    background 240ms ease,
    box-shadow 240ms ease;
}

.bt-queue-url {
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 240ms ease;
}

.bt-queue-status {
  font-family: var(--font-code, monospace);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-quaternary);
  font-weight: 500;
  opacity: 0;
  transition: opacity 240ms ease, color 240ms ease;
}

/* State — active.  Continuous pulse on the dot (scale + halo
   breathing).  URL pops to text-primary; caret fades in;
   "running" status visible. */
.bt-queue-item[data-state="active"] .bt-queue-dot {
  background: #7C4FE8;
  animation: bt-active-pulse 1.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes bt-active-pulse {
  0%, 100% {
    transform: scale(1.2);
    box-shadow: 0 0 0 4px rgba(124, 79, 232, 0.18);
  }
  50% {
    transform: scale(1.55);
    box-shadow: 0 0 0 10px rgba(124, 79, 232, 0.05);
  }
}

.bt-queue-item[data-state="active"] .bt-queue-url {
  color: var(--text-primary);
  font-weight: 500;
}

.bt-queue-item[data-state="active"] .bt-queue-status {
  opacity: 1;
  color: #7C4FE8;
}

/* State — done.  Stops pulsing, locks at teal-5 with the
   "delivered" tag visible.  Brief moment before .is-leaving
   slides the row out. */
.bt-queue-item[data-state="done"] .bt-queue-dot {
  background: #7ADAE6;
  animation: none;
  transform: scale(1.4);
  box-shadow: 0 0 0 8px rgba(122, 218, 230, 0.22);
}
.bt-queue-item[data-state="done"] .bt-queue-url {
  color: var(--text-primary);
}
.bt-queue-item[data-state="done"] .bt-queue-status {
  opacity: 1;
  color: #7ADAE6;
}

/* Leaving — slides right + rotates + fades + blurs.  Reads
   as "delivered, off-screen to the right" without conflicting
   with the upward rise of the rest of the queue. */
.bt-queue-item.is-leaving {
  transform:
    translateY(calc(var(--slot, 0) * var(--row-h)))
    translateX(clamp(80px, 14vw, 200px))
    rotate(-2.5deg);
  opacity: 0;
  filter: blur(2px);
  pointer-events: none;
}

/* Entering — new item materialises one row below its target
   slot, then drifts up.  JS sets --slot and adds .is-entering
   on insert; one rAF later swaps to .is-ready to trigger the
   transition. */
.bt-queue-item.is-entering {
  opacity: 0;
  transform:
    translateY(calc((var(--slot, 0) + 0.4) * var(--row-h)));
  filter: blur(1px);
}

.bt-queue-item.is-entering.is-ready {
  opacity: 1;
  transform: translateY(calc(var(--slot, 0) * var(--row-h)));
  filter: blur(0);
}

/* Push button — same shell as /products overview's
   .hms-card-cta: purple-7 outline + translucent fill, an
   arrow that nudges right on hover.  Reads as the secondary
   marketing CTA pattern of the site. */
.bt-queue-push {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: var(--font-base);
  font-size: var(--text-small, 13px);
  font-weight: 500;
  color: #7C4FE8;
  border-radius: var(--radius-full, 999px);
  border: 1px solid rgba(124, 79, 232, 0.5);
  background: rgba(124, 79, 232, 0.1);
  text-decoration: none;
  transition:
    background 180ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.bt-queue-push::after {
  content: "→";
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bt-queue-push:hover {
  background: rgba(124, 79, 232, 0.18);
  border-color: rgba(124, 79, 232, 0.75);
  transform: translateY(-1px);
}

.bt-queue-push:hover::after { transform: translateX(4px); }

.bt-queue-push:active { transform: translateY(0); }

/* ── Mobile responsive ──────────────────────────────────── */

@media (max-width: 1023px) {
  [data-act="1"] {
    padding: clamp(80px, 11vh, 120px) clamp(18px, 5vw, 32px) clamp(48px, 8vh, 80px);
  }
  /* On phone / narrow tablet: editorial first (left-aligned
     for natural reading), demo below. */
  .bt-hero {
    grid-template-columns: 1fr;
    gap: clamp(36px, 5vh, 56px);
    max-width: 600px;
  }
  .bt-hero-text {
    align-items: flex-start;
    text-align: left;
    justify-self: stretch;
    max-width: none;
    order: 1;
  }
  .bt-hero-sub { max-width: 540px; }
  .bt-hero-demo {
    order: 2;
    justify-content: stretch;
  }
  .bt-queue { --row-h: 56px; }
  .bt-queue-item { font-size: 15px; }
}

@media (max-width: 600px) {
  .bt-hero-h1 { font-size: var(--mkt-h2); }
  .bt-hero-sub { font-size: 15.5px; }
  .bt-queue { --row-h: 52px; }
  .bt-queue-item { font-size: 14px; }
  .bt-queue-status { display: none; }
}

/* ── Wide-desktop tiers ─────────────────────────────────── */

@media (min-width: 1600px) {
  .bt-hero { max-width: 1380px; }
  .bt-hero-text { max-width: 640px; }
  .bt-hero-h1 { font-size: 68px; }
  .bt-hero-sub { max-width: 540px; font-size: 19px; }
  .bt-queue { --row-h: 84px; }
  .bt-queue-item { font-size: 26px; }
}

@media (min-width: 1920px) {
  .bt-hero { max-width: 1520px; }
  .bt-hero-text { max-width: 720px; }
  .bt-hero-h1 { font-size: 80px; }
  .bt-hero-sub { max-width: 600px; font-size: 20px; }
  .bt-queue { --row-h: 96px; }
  .bt-queue-item { font-size: 30px; }
}

@media (min-width: 2400px) {
  .bt-hero { max-width: 1700px; }
  .bt-hero-text { max-width: 820px; }
  .bt-hero-h1 { font-size: 96px; }
  .bt-hero-sub { max-width: 680px; font-size: 22px; }
  .bt-queue { --row-h: 116px; }
  .bt-queue-item { font-size: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .bt-queue-item { transition: none; }
  .bt-queue-dot { transition: none; }
}

/* ──────────────────────────────────────────────────────────
   Act 2 — The fan-out

   Sticky stage; --draw 0..1 drives the worker activation
   cascade.  Editorial centred above (breaks vs Act 1's
   right-aligned column).  Workers grid below: 32 cells in
   auto-fit columns, wrap on mobile.  Each active cell
   continuously emits a small JSON chip rising upward.

   Same z-index + margin-top: -100vh handoff pattern as the
   Monitor acts so the workers panel mounts cleanly over the
   hero as the reader scrolls past it.
─────────────────────────────────────────────────────────── */

[data-act="2"] {
  position: relative;
  z-index: 2;
  background: var(--background);
}

.bt-fan-stage {
  position: relative;
  min-height: 320vh;
  --draw: 0;
}

.bt-fan-frame {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: clamp(32px, 4vh, 56px);
  padding: clamp(96px, 12vh, 140px) clamp(20px, 4vw, 48px) clamp(56px, 8vh, 96px);
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
  min-width: 0;
}

/* Inline row — h2 (left, sized down so it reads as a caption
   to the animation rather than a billboard) + workers grid
   (right, fills the horizontal slot).  align-items: center so
   the h2's vertical centre lines up with the workers row when
   the grid sits as one row at wide widths. */
.bt-fan-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  align-items: center;
  gap: clamp(36px, 4.5vw, 80px);
}

.bt-fan-h2 {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  /* Reduced from clamp(36px, 4.6vw, 56px) per Pablo's call —
     this is a caption now, not a billboard. */
  font-size: var(--mkt-h3);
  line-height: 1.06;
  letter-spacing: var(--tracking-dense, -0.022em);
  font-weight: 500;
  color: var(--text-primary);
  text-wrap: balance;
}

.bt-fan-sub {
  margin: 0;
  align-self: flex-end;
  text-align: right;
  max-width: clamp(280px, 38%, 480px);
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.55;
  color: var(--text-secondary);
}

/* Programmatic-push snippet — sits under the tagline, also
   pinned bottom-right.  Frame-only treatment (no fill, no
   shadow) per the family of code blocks across /products.  A
   small uppercase mono label above so the box reads as a
   labelled snippet rather than orphan code. */
.bt-fan-snippet {
  align-self: flex-end;
  max-width: clamp(320px, 42%, 540px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.bt-fan-snippet-code {
  margin: 0;
  padding: clamp(14px, 1.6vw, 20px) clamp(16px, 1.6vw, 22px);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-medium, 12px);
  font-family: var(--font-code, monospace);
  font-size: var(--mkt-body-xs);
  line-height: 1.7;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
  text-align: left;
  overflow-x: clip;
}

.bt-fan-snippet-code code { display: block; white-space: pre; }
.bt-fan-snippet-verb { color: #7C4FE8; font-weight: 600; }
.bt-fan-snippet-key { color: var(--text-primary); }
.bt-fan-snippet-str { color: #7ADAE6; }
.bt-fan-snippet-brace { color: var(--text-quaternary); }

/* Counter — top-left, large tabular number; ticks up as
   --draw advances. */
.bt-fan-counter {
  margin: 0;
  align-self: flex-start;
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-code, monospace);
  font-size: clamp(13px, 1.1vw, 17px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.bt-fan-counter-tag { color: var(--text-quaternary); font-weight: 600; }
.bt-fan-counter-num {
  font-size: var(--mkt-h3);
  letter-spacing: -0.005em;
  color: var(--text-primary);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  text-align: right;
  transition: color 200ms ease;
}
.bt-fan-counter-sep { color: var(--text-quaternary); }
.bt-fan-counter-max {
  font-size: var(--mkt-h4);
  color: var(--text-tertiary);
  letter-spacing: -0.005em;
  font-weight: 500;
}

/* Workers grid.  Auto-fit columns so the row count adapts to
   the grid cell's width: roughly one row of 32 at desktop,
   wrapping on mobile.  No max-width — fills its inline-row
   parent. */
.bt-fan-workers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28px, 1fr));
  gap: clamp(6px, 0.7vw, 12px);
  width: 100%;
  min-width: 0;
}

.bt-fan-worker {
  position: relative;
  aspect-ratio: 1;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  background: transparent;
  transition:
    background 280ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 280ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bt-fan-worker.is-active {
  background: rgba(124, 79, 232, 0.18);
  border-color: rgba(124, 79, 232, 0.55);
  box-shadow: 0 0 0 3px rgba(124, 79, 232, 0.08);
}

/* JSON chip emitting upward from each active worker.
   Continuous loop, staggered by --idx so the field reads as
   distributed parallel work, not a metronome.  Symbol `{}`
   in mono — abstract enough to read as a JSON document
   without committing to specific text. */
.bt-fan-worker::after {
  content: "{}";
  position: absolute;
  bottom: 100%;
  left: 50%;
  font-family: var(--font-code, monospace);
  font-size: clamp(9px, 0.85vw, 11px);
  font-weight: 500;
  color: #7ADAE6;
  letter-spacing: -0.02em;
  transform: translate(-50%, 4px);
  opacity: 0;
  pointer-events: none;
}

.bt-fan-worker.is-active::after {
  animation: bt-fan-emit 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  animation-delay: calc(var(--idx, 0) * 70ms);
}

@keyframes bt-fan-emit {
  0%   { transform: translate(-50%, 4px); opacity: 0; }
  10%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate(-50%, -36px); opacity: 0; }
}

/* Hover delight — workers respond to pointer.  Cursor portal
   targets .bt-fan-workers as well (added in batch.js). */
.bt-fan-worker:hover {
  border-color: rgba(124, 79, 232, 0.75);
  transform: translateY(-2px);
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Mobile responsive ──────────────────────────────────── */

@media (max-width: 1023px) {
  .bt-fan-stage {
    min-height: 0;
    margin-top: 0;
    --draw: 1;
  }
  .bt-fan-frame {
    position: static;
    height: auto;
    padding: clamp(80px, 11vh, 120px) clamp(18px, 5vw, 32px) clamp(48px, 8vh, 80px);
    gap: clamp(32px, 4vh, 48px);
  }
  /* Mobile: stack the inline row vertically; sub reverts to
     a normal left-aligned block (no more bottom-right pin). */
  .bt-fan-row {
    grid-template-columns: 1fr;
    gap: clamp(20px, 3vh, 32px);
  }
  .bt-fan-sub {
    align-self: stretch;
    text-align: left;
    max-width: 540px;
  }
  .bt-fan-snippet {
    align-self: stretch;
    max-width: 540px;
  }
  .bt-fan-workers {
    grid-template-columns: repeat(auto-fit, minmax(24px, 1fr));
    gap: 8px;
    max-width: 520px;
  }
}

@media (max-width: 600px) {
  .bt-fan-h2 { font-size: var(--mkt-h4); }
  .bt-fan-counter-num { font-size: 24px; }
  .bt-fan-counter-max { font-size: 18px; }
  .bt-fan-worker::after { display: none; }
}

/* ── Wide-desktop tiers ─────────────────────────────────── */

@media (min-width: 1600px) {
  .bt-fan-frame { max-width: 1400px; }
  .bt-fan-h2 { font-size: 44px; }
  .bt-fan-sub { font-size: 19px; max-width: 460px; }
  .bt-fan-snippet { max-width: 520px; }
  .bt-fan-snippet-code { font-size: 14px; }
  .bt-fan-counter-num { font-size: 48px; }
  .bt-fan-counter-max { font-size: 34px; }
}

@media (min-width: 1920px) {
  .bt-fan-frame { max-width: 1520px; }
  .bt-fan-h2 { font-size: 52px; }
  .bt-fan-sub { font-size: 20px; max-width: 520px; }
  .bt-fan-snippet { max-width: 580px; }
  .bt-fan-snippet-code { font-size: 15px; }
  .bt-fan-counter-num { font-size: 56px; }
  .bt-fan-counter-max { font-size: 38px; }
}

@media (min-width: 2400px) {
  .bt-fan-frame { max-width: 1700px; }
  .bt-fan-h2 { font-size: 60px; }
  .bt-fan-sub { font-size: 22px; max-width: 600px; }
  .bt-fan-snippet { max-width: 660px; }
  .bt-fan-snippet-code { font-size: 16px; }
  .bt-fan-counter-num { font-size: 64px; }
  .bt-fan-counter-max { font-size: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .bt-fan-stage { --draw: 1; }
  .bt-fan-worker.is-active::after { animation: none; opacity: 1; transform: translate(-50%, -16px); }
  .bt-fan-worker { transition: none; }
}

/* ──────────────────────────────────────────────────────────
   Act 3 — Bento grid (what comes with the job)

   Visual family continues from Act 2's worker blocks — all
   tiles frame-only border-subtle, no fill, no shadow.
   Asymmetric layout so the bento doesn't read as a flat
   feature table: DELIVERY (wide, top-left) + RETRIES (narrow,
   top-right) + DLQ (narrow, bottom-left) + STATUS (wide,
   bottom-right).  Each tile reveals on IO cascade.
─────────────────────────────────────────────────────────── */

[data-act="3"] {
  position: relative;
  z-index: 3;
  background: var(--background);
}

.bt-bento-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vh, 64px);
  padding: clamp(96px, 12vh, 140px) clamp(20px, 4vw, 48px) clamp(96px, 14vh, 160px);
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
  min-width: 0;
}

.bt-bento-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 720px;
}

.bt-bento-h2 {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: var(--mkt-h2);
  line-height: 1.04;
  letter-spacing: var(--tracking-dense, -0.022em);
  font-weight: 500;
  color: var(--text-primary);
  text-wrap: balance;
}

.bt-bento-sub {
  margin: 0;
  max-width: 560px;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.55;
  color: var(--text-secondary);
}

/* The bento itself.  3-col asymmetric grid; auto rows so each
   tile sizes to its content.  Gap matches the rhythm of the
   workers grid above so the two surfaces feel like the same
   visual family. */
.bt-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "del del ret"
    "dlq sta sta";
  gap: clamp(14px, 1.4vw, 24px);
}

.bt-bento-tile {
  position: relative;
  padding: clamp(18px, 2vw, 28px) clamp(20px, 2vw, 28px);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-medium, 12px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vh, 18px);
  min-width: 0;
  /* IO cascade — pre-reveal state.  batch.js adds .is-revealed
     on first crossing; per-tile delay via :nth-of-type so the
     four tiles arrive in a staircase. */
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bt-bento-tile.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.bt-bento-tile:nth-of-type(2) { transition-delay: 140ms, 140ms, 0ms; }
.bt-bento-tile:nth-of-type(3) { transition-delay: 280ms, 280ms, 0ms; }
.bt-bento-tile:nth-of-type(4) { transition-delay: 420ms, 420ms, 0ms; }

.bt-bento-tile--delivery { grid-area: del; }
.bt-bento-tile--retries  { grid-area: ret; }
.bt-bento-tile--dlq      { grid-area: dlq; }
.bt-bento-tile--status   { grid-area: sta; }

.bt-bento-tile:hover {
  border-color: rgba(124, 79, 232, 0.5);
  transform: translateY(-2px);
}

.bt-bento-tile-label {
  margin: 0;
  font-family: var(--font-code, monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-quaternary);
  font-weight: 500;
}

/* Code blocks inside delivery + status tiles.  Same tokens
   the rest of the page uses: purple-7 verb, teal-5 strings,
   text-primary keys. */
.bt-bento-tile-code {
  margin: 0;
  font-family: var(--font-code, monospace);
  font-size: var(--mkt-body-xs);
  line-height: 1.7;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
  overflow-x: clip;
}

.bt-bento-tile-code code { display: block; white-space: pre; }

.bt-bento-verb {
  color: #7C4FE8;
  font-weight: 500;
}
.bt-bento-key   { color: var(--text-primary); }
.bt-bento-str   { color: #7ADAE6; }
.bt-bento-num   { color: var(--text-primary); font-weight: 500; }
.bt-bento-brace { color: var(--text-quaternary); }

/* Retries — three-attempt ladder.  Each row reads as one
   attempt with its backoff window and final state. */
.bt-bento-attempts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-code, monospace);
  font-size: var(--mkt-body-xs);
}

.bt-bento-attempts li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
}

.bt-bento-attempt-n {
  color: var(--text-quaternary);
  font-weight: 500;
}
.bt-bento-attempt-wait {
  color: var(--text-secondary);
}
.bt-bento-attempt-state {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-quaternary);
}
.bt-bento-attempt-state[data-state="done"] { color: #7ADAE6; }

/* DLQ — failed URLs list + replay anchor. */
.bt-bento-dlq {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-code, monospace);
  font-size: var(--mkt-body-xs);
  color: var(--text-tertiary);
}

.bt-bento-dlq li {
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bt-bento-dlq-mark {
  color: var(--text-quaternary);
  font-weight: 500;
}

.bt-bento-dlq-replay {
  margin: 0;
  padding-top: clamp(8px, 1.2vh, 12px);
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-code, monospace);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: #7C4FE8;
  font-weight: 500;
  align-self: flex-start;
}


/* ── Mobile responsive ──────────────────────────────────── */

@media (max-width: 1023px) {
  .bt-bento-stage {
    padding: clamp(80px, 11vh, 120px) clamp(18px, 5vw, 32px) clamp(80px, 12vh, 120px);
  }
  .bt-bento {
    grid-template-columns: 1fr;
    grid-template-areas:
      "del"
      "ret"
      "dlq"
      "sta";
    gap: clamp(12px, 2vh, 18px);
  }
}

@media (max-width: 600px) {
  .bt-bento-h2 { font-size: var(--mkt-h4); }
  .bt-bento-tile-code { font-size: 12px; }
}

/* ── Wide-desktop tiers ─────────────────────────────────── */

@media (min-width: 1600px) {
  .bt-bento-stage { max-width: 1400px; }
  .bt-bento-h2 { font-size: 60px; }
  .bt-bento-sub { font-size: 19px; max-width: 640px; }
  .bt-bento-tile-code { font-size: 15px; }
}

@media (min-width: 1920px) {
  .bt-bento-stage { max-width: 1520px; }
  .bt-bento-h2 { font-size: 72px; }
  .bt-bento-sub { font-size: 20px; max-width: 720px; }
  .bt-bento-tile-code { font-size: 16px; }
  .bt-bento-attempts { font-size: 16px; }
  .bt-bento-dlq { font-size: 16px; }
}

@media (min-width: 2400px) {
  .bt-bento-stage { max-width: 1700px; }
  .bt-bento-h2 { font-size: 84px; }
  .bt-bento-sub { font-size: 22px; max-width: 800px; }
  .bt-bento-tile-code { font-size: 18px; }
  .bt-bento-attempts { font-size: 18px; }
  .bt-bento-dlq { font-size: 18px; }
}


/* ──────────────────────────────────────────────────────────
   Act 4 — Saturated purple-7 brand band.

   The page's first colour break.  Sticky stage, bloom curtain
   reveals from the top-left as the user scrolls in.  Editorial
   weight on the parallel "Push one.  Push a million." claim;
   a counter under it ticks from 1 → 1,000,000 via scroll
   progress.

   Band recipe (per memory `feedback_zenrows_band_act_recipe`):
   - saturated brand hex #7C4FE8 as the base
   - mirrored bloom corners (top-left here; if future acts add
     another band, mirror to bottom-right)
   - white editorial text; teal-5 accents kept for hierarchy
─────────────────────────────────────────────────────────── */

[data-act="4"] {
  position: relative;
  z-index: 4;
  /* Section bg stays dark — the bloom curtain below is the
     ONLY purple, and its clip-path growth from the top-left
     is what reveals the brand band as the reader scrolls. */
  background: var(--background);
  color: #FFFFFF;
  isolation: isolate;
  overflow: hidden;
}

.bt-band-stage {
  position: relative;
  /* Shorter stage so the bloom reaches full early, then Act 5
     starts soon after — less empty-purple gap between the
     two acts of the band. */
  min-height: 160vh;
  --enter: 0;
}

/* Bloom curtain — saturated purple radial growing from the
   top-left as --enter advances 0..1.  Sits above the section
   bg so the corner reveal reads as a "wave" filling in the
   band. */
.bt-band-curtain {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #7C4FE8;
  /* Max radius 160% so the far corner (sqrt(2) * 100% ≈
     141%) is fully covered before --enter reaches 1. */
  clip-path: circle(calc(var(--enter, 0) * 160%) at 0% 0%);
  pointer-events: none;
  will-change: clip-path;
}

.bt-band-frame {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(40px, 6vh, 72px);
  padding: clamp(96px, 12vh, 140px) clamp(20px, 4vw, 48px) clamp(56px, 8vh, 96px);
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
  min-width: 0;
  z-index: 1;
}

.bt-band-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(18px, 2.4vh, 28px);
  max-width: 920px;
  margin: 0 auto;
}

.bt-band-kicker {
  color: rgba(255, 255, 255, 0.65);
}

.bt-band-h2 {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: var(--mkt-hero);
  line-height: 0.98;
  letter-spacing: var(--tracking-dense, -0.022em);
  font-weight: 500;
  color: #FFFFFF;
  text-wrap: balance;
}

.bt-band-line { display: block; }

.bt-band-sub {
  margin: 0;
  max-width: 560px;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

/* Meter — big tabular number that ticks 1 → 1,000,000 with
   scroll.  Centred under the headline; the eye lands on the
   number, not the tag below. */
.bt-band-meter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.bt-band-meter-num {
  font-family: var(--font-code, monospace);
  font-size: clamp(80px, 12vw, 180px);
  line-height: 1;
  letter-spacing: -0.022em;
  font-weight: 500;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  /* No transition — JS writes this per scroll frame so it
     reads as a continuous counter, not a hop. */
}

.bt-band-meter-tag {
  font-family: var(--font-code, monospace);
  font-size: var(--mkt-body-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}

/* ── Mobile responsive ──────────────────────────────────── */

@media (max-width: 1023px) {
  /* Mobile: drop the curtain mechanic entirely and paint the
     section bg purple directly.  On desktop, the frame is
     sticky + z-indexed above the absolute curtain; on mobile
     the frame goes static so its z-index stops working, which
     left the curtain covering the editorial content. */
  [data-act="4"] { background: #7C4FE8; }
  .bt-band-curtain { display: none; }
  .bt-band-stage {
    min-height: 0;
    --enter: 1;
  }
  .bt-band-frame {
    position: static;
    height: auto;
    padding: clamp(88px, 14vh, 140px) clamp(18px, 5vw, 32px) clamp(72px, 12vh, 120px);
  }
}

@media (max-width: 600px) {
  
  .bt-band-sub { font-size: 15.5px; }
  .bt-band-meter-num { font-size: clamp(72px, 18vw, 100px); }
}

/* ── Wide-desktop tiers ─────────────────────────────────── */

@media (min-width: 1600px) {
  .bt-band-frame { max-width: 1400px; }
  
  .bt-band-sub { font-size: 20px; max-width: 640px; }
  .bt-band-meter-num { font-size: 200px; }
}

@media (min-width: 1920px) {
  .bt-band-frame { max-width: 1520px; }
  
  .bt-band-sub { font-size: 21px; max-width: 720px; }
  .bt-band-meter-num { font-size: 224px; }
}

@media (min-width: 2400px) {
  .bt-band-frame { max-width: 1700px; }
  
  .bt-band-sub { font-size: 23px; max-width: 800px; }
  .bt-band-meter-num { font-size: 256px; }
}

@media (prefers-reduced-motion: reduce) {
  .bt-band-stage { --enter: 1; }
  .bt-band-curtain { clip-path: none; }
  .bt-bento-tile {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ──────────────────────────────────────────────────────────
   Act 5 — Regular jobs (constrained variant)

   Continues the purple-7 band from Act 4.  By the time the
   reader reaches Act 5, Act 4's bloom curtain has fully
   covered the viewport — so this section sits on a solid
   purple bg and the colour reads as continuous.

   Editorial: closed-list variant of Batch.  CSV in, JSON out,
   no queue to manage.  Two side-by-side panels with a thin
   arrow between them; both panels frame-only with white-alpha
   borders so the contrast against the purple band works.
─────────────────────────────────────────────────────────── */

[data-act="5"] {
  position: relative;
  z-index: 5;
  background: #7C4FE8;
  color: #FFFFFF;
  overflow: hidden;
}

.bt-regular-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(40px, 5.5vh, 64px);
  /* Tighter top/bottom padding so Act 5's content lands close
     to where the bloom finished, not after a tall purple gap. */
  padding: clamp(56px, 8vh, 96px) clamp(20px, 4vw, 48px) clamp(72px, 11vh, 120px);
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
}

.bt-regular-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(14px, 2vh, 22px);
  max-width: 760px;
}

.bt-regular-kicker { color: rgba(255, 255, 255, 0.65); }

.bt-regular-h2 {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.02;
  letter-spacing: var(--tracking-dense, -0.022em);
  font-weight: 500;
  color: #FFFFFF;
  text-wrap: balance;
}

.bt-regular-sub {
  margin: 0;
  max-width: 580px;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

/* Spread — two panels + a thin arrow between them.  Grid on
   desktop so panels stay vertically centred with the arrow;
   stacks vertically on mobile. */
.bt-regular-spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(20px, 2.4vw, 36px);
  width: 100%;
  max-width: 1080px;
}

.bt-regular-panel {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-medium, 12px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: left;
}

.bt-regular-panel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  font-family: var(--font-code, monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
}

.bt-regular-panel-name { font-weight: 600; }
.bt-regular-panel-tag {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}

.bt-regular-panel-body {
  margin: 0;
  padding: clamp(16px, 1.8vw, 22px) clamp(16px, 1.8vw, 22px);
  font-family: var(--font-code, monospace);
  font-size: var(--mkt-body-xs);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.92);
  overflow-x: clip;
}

.bt-regular-panel-body code { display: block; white-space: pre; }
.bt-regular-dim { color: rgba(255, 255, 255, 0.5); font-style: italic; }

/* Arrow between panels — single oversize mono glyph, no
   leader line.  Centred vertically so it reads as one beat
   between the two panels. */
.bt-regular-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-code, monospace);
  font-size: var(--mkt-h3);
  font-weight: 500;
  line-height: 1;
}

/* ── Mobile responsive ──────────────────────────────────── */

@media (max-width: 1023px) {
  .bt-regular-spread {
    grid-template-columns: 1fr;
    max-width: 520px;
  }
  .bt-regular-arrow {
    transform: rotate(90deg);
    transform-origin: center;
    margin: 4px 0;
  }
}

@media (max-width: 600px) {
  .bt-regular-h2 { font-size: var(--mkt-h2); }
  .bt-regular-sub { font-size: 15px; }
  .bt-regular-panel-body { font-size: 12px; }
}

/* ── Wide-desktop tiers ─────────────────────────────────── */

@media (min-width: 1600px) {
  .bt-regular-stage { max-width: 1400px; }
  .bt-regular-h2 { font-size: 84px; }
  .bt-regular-sub { font-size: 19px; max-width: 640px; }
  .bt-regular-spread { max-width: 1280px; }
  .bt-regular-panel-body { font-size: 15px; }
}

@media (min-width: 1920px) {
  .bt-regular-stage { max-width: 1520px; }
  .bt-regular-h2 { font-size: 96px; }
  .bt-regular-sub { font-size: 20px; max-width: 720px; }
  .bt-regular-spread { max-width: 1400px; }
  .bt-regular-panel-body { font-size: 16px; }
}

@media (min-width: 2400px) {
  .bt-regular-stage { max-width: 1700px; }
  .bt-regular-h2 { font-size: 112px; }
  .bt-regular-sub { font-size: 22px; max-width: 800px; }
  .bt-regular-spread { max-width: 1560px; }
  .bt-regular-panel-body { font-size: 18px; }
}

/* ──────────────────────────────────────────────────────────
   Act 6 — Closer.

   Back to the warm-dark canvas (the band closes after Act 5).
   Single-beat editorial: a centred parallel-sentence H2 +
   CTA stack.  Brand purple-7 on the second line as a small
   accent so the reader's eye lands on the verb.
─────────────────────────────────────────────────────────── */

[data-act="6"] {
  position: relative;
  z-index: 6;
  background: var(--background);
}

/* Closer layout — H2 stacked on top, CTA row below with the
   button + tagline side-by-side.  Breaks the typical centred-
   stack template most spokes use. */
.bt-closer-stage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(40px, 6vh, 72px);
  padding: clamp(120px, 18vh, 200px) clamp(20px, 4vw, 48px);
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
}

.bt-closer-h2 {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: var(--mkt-hero);
  line-height: 0.98;
  letter-spacing: var(--tracking-dense, -0.022em);
  font-weight: 500;
  color: var(--text-primary);
  text-wrap: balance;
}

.bt-closer-line { display: block; }

/* Layout + tag styles come from .cta-stack--inline +
   .cta-stack-tag in components.css.  Only the page-specific
   gap override (slightly wider) remains. */
.bt-closer-cta {
  gap: clamp(20px, 2.4vw, 32px);
}

@media (max-width: 600px) {
  
  .bt-closer-stage { padding: clamp(96px, 14vh, 140px) clamp(18px, 5vw, 32px); }
}

@media (min-width: 1600px) {
  .bt-closer-stage { max-width: 1400px; }
  
  .bt-closer-tag { font-size: 13px; }
}

@media (min-width: 1920px) {
  .bt-closer-stage { max-width: 1520px; }
  
  .bt-closer-tag { font-size: 13.5px; }
}

@media (min-width: 2400px) {
  .bt-closer-stage { max-width: 1700px; }
  
  .bt-closer-tag { font-size: 14px; }
}

/* ══════════════════════════════════════════════════════════
   Canonical body.is-on-purple — fires while Acts 4 + 5 cover
   the 72px topbar slot.  Both acts paint solid #7C4FE8.
   Hardcoded #1D1612 so chrome reads dark in BOTH tech and BU. */
/* btn-marketing — chrome.css ships #7ADAE6 default, theme-invariant.
   No override needed; teal pill stays bright on purple. */

/* ══════════════════════════════════════════════════════════
   Audience switcher + BU light theme. */
[data-audience-tech][hidden],
[data-audience-bu][hidden] { display: none !important; }

.audience-switch {
  position: fixed;
  top: 50%;
  right: 16px;
  z-index: 250;
  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;
}
.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; }

/* Mobile — horizontal pill bottom-right. */
@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 on every heading in BU. */
html:not(.dark) .bt-hero-h1,
html:not(.dark) .bt-fan-h2,
html:not(.dark) .bt-bento-h2,
html:not(.dark) .bt-band-h2,
html:not(.dark) .bt-regular-h2,
html:not(.dark) .bt-closer-h2 {
  font-family: 'Mq12', system-ui, sans-serif;
  font-weight: 500;
}

/* Topbar inversion — yields to body.is-on-purple on Acts 4+5. */

/* Nav popover 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); }

/* Teal text on light bg.  Hardcoded #7ADAE6 on warm-dark body
   chrome (queue terminal, fan-worker labels, bento JSON) reads
   fine in dark but disappears on the BU light page.  Flip to
   #1C9E97 (--zen-cyan-7 in light scope) for contrast.  Pablo
   2026-06-15.  Saturated-band rgba teal (.bt-closer / on-purple)
   stays theme-invariant. */
html:not(.dark) .bt-queue-meta-num.is-bumped,
html:not(.dark) .bt-queue-item[data-state="done"] .bt-queue-status,
html:not(.dark) .bt-fan-snippet-str,
html:not(.dark) .bt-fan-worker::after,
html:not(.dark) .bt-bento-str,
html:not(.dark) .bt-bento-attempt-state[data-state="done"] {
  color: #1C9E97;
}