/*
 * /compare/bright-data — Act 1 only (scaffold).
 *
 * Page signature: "the wiring".  Split-pane hero on dark.
 * LEFT pane carries the Bright Data component wiring (six
 * boxes + an OUT node, connected by SVG wires).  Wires paint
 * stroke-dashoffset 100→0 on IO entry; boxes fade in on a
 * 60ms stagger.  RIGHT pane stays calm — single Zenrows
 * fetch card with a JSON response.
 *
 * Universal chrome lives in ../../_shared/chrome.css.
 */

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

main {
  width: 100%;
  max-width: 100vw;
  position: relative;
}

/* ───────────────────────────────────────────────────────────
   Act 1 — Buy the IPs.  Or buy the data.
─────────────────────────────────────────────────────────── */

.bd-act-1 {
  position: relative;
  min-height: 100vh;
  padding: clamp(96px, 14vh, 160px) clamp(20px, 4vw, 56px) clamp(72px, 10vh, 120px);
  background: var(--background);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bd-act-1-frame {
  width: 100%;
  max-width: 1280px;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
}

.bd-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 1.6vw, 24px);
}

.bd-hero-kicker { margin: 0; }

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

.bd-hero-sub {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--mkt-lead);
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 64ch;
}

/* ── Split pane ────────────────────────────────────────────
   Two equal panes on desktop with a vertical line between.
   Each pane has its own head (tag + caption) and body. */
.bd-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 56px);
  width: 100%;
  align-items: stretch;
}

.bd-split-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 28px);
  padding: clamp(20px, 2vw, 32px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 16px);
  background: rgba(255, 255, 255, 0.015);
  min-height: 440px;
}

/* Zenrows pane — same border-subtle as the BD pane, no fill.
   The mesh-gradient lives on the widget header below, not the
   pane itself, so both panes read as equal-weight containers. */
.bd-split-pane--zr {
  background: transparent;
  border-color: var(--border-subtle);
}

.bd-pane-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.bd-pane-tag {
  font-family: var(--font-base);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text-secondary);
}

.bd-pane-tag--zr {
  color: #C7B0FF;
  background: rgba(124, 79, 232, 0.16);
  border-color: rgba(124, 79, 232, 0.4);
}

.bd-pane-line {
  font-family: var(--font-base);
  font-size: 14px;
  color: var(--text-tertiary);
  letter-spacing: -0.005em;
}

/* ── BD wiring ─────────────────────────────────────────────
   400×360 SVG canvas with the wires; nodes positioned
   absolutely on top via --x / --y (CSS custom props in px,
   mapping 1:1 to the SVG viewBox).  Aspect ratio preserved
   via padding-bottom trick on the wrapper. */
.bd-wiring {
  position: relative;
  width: 100%;
  /* 400×360 viewBox aspect → 90% */
  aspect-ratio: 400 / 360;
  max-width: 460px;
  margin: 0 auto;
}

.bd-wiring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bd-wire {
  fill: none;
  stroke: rgba(255, 255, 255, 0.32);
  stroke-width: 1.5;
  /* Dashoffset paint-in: each path has its own length, but a
     uniform dasharray of 360 covers the longest curve here.
     The is-in modifier resolves offset to 0 over 1.4s with a
     stagger per wire via transition-delay. */
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  transition: stroke-dashoffset 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bd-act-1.is-in .bd-wire { stroke-dashoffset: 0; }

/* Stagger the wires by data-wire index (0..8) so they paint
   in a readable order: top row first, then middle joins, then
   bottom branch, then the OUT bundle. */
.bd-act-1.is-in .bd-wire[data-wire="0"] { transition-delay: 200ms; }
.bd-act-1.is-in .bd-wire[data-wire="1"] { transition-delay: 280ms; }
.bd-act-1.is-in .bd-wire[data-wire="2"] { transition-delay: 320ms; }
.bd-act-1.is-in .bd-wire[data-wire="3"] { transition-delay: 480ms; }
.bd-act-1.is-in .bd-wire[data-wire="4"] { transition-delay: 520ms; }
.bd-act-1.is-in .bd-wire[data-wire="5"] { transition-delay: 560ms; }
.bd-act-1.is-in .bd-wire[data-wire="6"] { transition-delay: 760ms; }
.bd-act-1.is-in .bd-wire[data-wire="7"] { transition-delay: 800ms; }
.bd-act-1.is-in .bd-wire[data-wire="8"] { transition-delay: 840ms; }

.bd-node {
  position: absolute;
  /* --x and --y are now percentages mapped 1:1 to the SVG
     viewBox so pills stay anchored as the wiring container
     scales (the earlier raw-px version drifted off the
     wires whenever the pane width changed). */
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 12, 11, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--font-base);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bd-act-1.is-in .bd-node { opacity: 1; }

/* Per-index entrance stagger so the boxes land alongside
   their connecting wires. */
.bd-act-1.is-in .bd-node[data-i="0"] { transition-delay: 80ms;  }
.bd-act-1.is-in .bd-node[data-i="1"] { transition-delay: 140ms; }
.bd-act-1.is-in .bd-node[data-i="2"] { transition-delay: 360ms; }
.bd-act-1.is-in .bd-node[data-i="3"] { transition-delay: 600ms; }
.bd-act-1.is-in .bd-node[data-i="4"] { transition-delay: 640ms; }
.bd-act-1.is-in .bd-node[data-i="5"] { transition-delay: 680ms; }
.bd-act-1.is-in .bd-node[data-i="6"] { transition-delay: 920ms; }

.bd-node-by {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-tertiary);
}

/* "BD" badge — warm violet-blue, matching the overview card. */
.bd-node--bd .bd-node-by {
  background: rgba(110, 140, 255, 0.16);
  color: #B7C2FF;
}

/* "you" badge — alert orange so the reader sees what they're
   on the hook for. */
.bd-node--you .bd-node-by {
  background: rgba(247, 188, 107, 0.16);
  color: #F7BC6B;
}

/* OUT node — bigger and brighter, since it's the actual data. */
.bd-node--out {
  font-size: 13px;
  padding: 8px 14px;
  border-color: rgba(255, 255, 255, 0.36);
  background: rgba(29, 22, 18, 0.96);
}

.bd-node--out .bd-node-name {
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* ── ZR fetch card ─────────────────────────────────────────
   Single calm glass card centred in the right pane.  Three
   parts: window-style bar, body with call + JSON, footer
   with the credit pill. */
.bd-zr-card {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  border-radius: var(--radius-lg, 14px);
  /* No fill — pane background carries through.  The mesh bar
     header below provides the only colour wash on this widget. */
  border: 1px solid var(--border-subtle);
  background: transparent;
  overflow: hidden;
}

.bd-zr-card-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
  isolation: isolate;
}

/* Mesh background — same orange-5 → purple-5 base used on the
   firecrawl Zenrows-state bar.  Drifts four colour bubbles on
   coprime durations (7/9/11/13s) so the wash never repeats
   exactly.  Sits at z-index: -1 so the bar's siblings render
   above it. */
.bd-zr-mesh-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    var(--zen-orange-5, #C97A4E) 0%,
    var(--zen-purple-5, #6B4DCF) 100%
  );
}

.bd-zr-mesh-bubble {
  position: absolute;
  width: 65%;
  height: 280%;
  border-radius: 50%;
  filter: blur(34px);
  transform: translateZ(0);
  backface-visibility: hidden;
  opacity: 0.92;
  will-change: transform;
}

.bd-zr-mesh-bubble[data-bubble="1"] {
  background: var(--zen-purple-6, #9B6FFF);
  top: -90%; left: -10%;
  animation: bd-zr-bubble-1 7s ease-in-out infinite alternate;
}
.bd-zr-mesh-bubble[data-bubble="2"] {
  background: var(--zen-orange-6, #F38C5A);
  top: -80%; left: 35%;
  animation: bd-zr-bubble-2 9s ease-in-out infinite alternate;
}
.bd-zr-mesh-bubble[data-bubble="3"] {
  background: var(--zen-red-6, #F36A6A);
  top: -100%; left: 55%;
  animation: bd-zr-bubble-3 11s ease-in-out infinite alternate;
}
.bd-zr-mesh-bubble[data-bubble="4"] {
  background: #7ADAE6;
  top: -85%; left: 18%;
  animation: bd-zr-bubble-4 13s ease-in-out infinite alternate;
}

@keyframes bd-zr-bubble-1 { 0% { transform: translate(0,0); } 100% { transform: translate(55%, 20%); } }
@keyframes bd-zr-bubble-2 { 0% { transform: translate(0,0); } 100% { transform: translate(-40%, 30%); } }
@keyframes bd-zr-bubble-3 { 0% { transform: translate(0,0); } 100% { transform: translate(45%, -25%); } }
@keyframes bd-zr-bubble-4 { 0% { transform: translate(0,0); } 100% { transform: translate(-30%, -20%); } }

/* All bar children sit above the mesh bg (which is z: -1). */
.bd-zr-card-bar > *:not(.bd-zr-mesh-bg) {
  position: relative;
  z-index: 1;
}

/* Dots + name brightened to read clean on the mesh wash. */
.bd-zr-card-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.bd-zr-card-name {
  margin-left: 8px;
  font-family: var(--font-code, "IBM Plex Mono"), monospace;
  font-size: 12px;
  font-weight: 600;
  color: #FFFFFF;
}

.bd-zr-card-status {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5BE0AC;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(91, 224, 172, 0.1);
  border: 1px solid rgba(91, 224, 172, 0.32);
}

.bd-zr-card-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.bd-zr-call,
.bd-zr-json {
  margin: 0;
  font-family: var(--font-code, "IBM Plex Mono"), monospace;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

.zr-fn { color: #C7B0FF; }
.zr-s  { color: #F7BC6B; }

.json-k { color: #C7B0FF; }
.json-s { color: #F7BC6B; }

.bd-zr-arrow {
  align-self: center;
  font-size: 14px;
  color: var(--text-tertiary);
  line-height: 1;
}

.bd-zr-card-foot {
  display: flex;
  align-items: center;
  /* Allow the "includes ..." caption to wrap below the credit
     pill on narrow widths instead of overflowing or truncating
     the list. */
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-subtle);
}

.bd-zr-card-credit {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C7B0FF;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(124, 79, 232, 0.14);
  border: 1px solid rgba(124, 79, 232, 0.4);
}

.bd-zr-card-includes {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.4;
}

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

@media (min-width: 1600px) {
  .bd-act-1-frame { max-width: 1480px; gap: 80px; }
  
  .bd-hero-sub { font-size: 22px; }
  .bd-wiring { max-width: 540px; }
  .bd-zr-card { max-width: 540px; }
  .bd-zr-call, .bd-zr-json { font-size: 14px; }
}

@media (min-width: 1920px) {
  .bd-act-1-frame { max-width: 1680px; }
  
  .bd-hero-sub { font-size: 24px; }
  .bd-wiring { max-width: 620px; }
  .bd-zr-card { max-width: 620px; }
}

@media (min-width: 2400px) {
  .bd-act-1-frame { max-width: 2000px; }
  
  .bd-hero-sub { font-size: 26px; }
  .bd-wiring { max-width: 720px; }
  .bd-zr-card { max-width: 720px; }
}

/* ───────────────────────────────────────────────────────────
   Act 2 — Two cost shapes.

   Editorial minimal beat.  No colour fills, no segments — just
   two thin monochrome bars and one chip rail.  The bd bar's
   --w drives its width via the chip selection; zr stays fixed.
─────────────────────────────────────────────────────────── */

.bd-act-2 {
  position: relative;
  background: var(--background);
  color: var(--text-primary);
  padding: clamp(96px, 12vh, 160px) clamp(20px, 4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bd-act-2-frame {
  width: 100%;
  max-width: 980px;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
  align-items: stretch;
}

.bd-act-2-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 1.6vw, 22px);
  max-width: 64ch;
}

.bd-act-2-h2 {
  margin: 0;
  font-family: var(--font-display, var(--font-base));
  font-size: var(--mkt-h2);
  line-height: 1.04;
  letter-spacing: -0.028em;
  font-weight: 500;
  color: var(--text-primary);
  text-wrap: balance;
}

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

/* Wrap stacks the chip rail above the bar rows with editorial
   breathing room between the two — without this the underline
   of the active chip sits flush against the first bar. */
.bd-cost {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 56px);
}

/* Chip rail — minimal text-only chips.  Active = underlined +
   brighter text.  No coloured pills, no backgrounds. */
.bd-cost-rail {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1vw, 16px);
  align-items: center;
}

.bd-cost-chip {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  padding: 6px 2px 8px;
  font-family: var(--font-base);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-tertiary);
  cursor: pointer;
  position: relative;
  transition: color 220ms ease;
}

.bd-cost-chip::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 0;
  height: 1px;
  background: var(--text-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bd-cost-chip:hover { color: var(--text-secondary); }

.bd-cost[data-bd-level="0"] .bd-cost-chip[data-bd-level="0"],
.bd-cost[data-bd-level="1"] .bd-cost-chip[data-bd-level="1"],
.bd-cost[data-bd-level="2"] .bd-cost-chip[data-bd-level="2"],
.bd-cost[data-bd-level="3"] .bd-cost-chip[data-bd-level="3"] {
  color: var(--text-primary);
}

.bd-cost[data-bd-level="0"] .bd-cost-chip[data-bd-level="0"]::after,
.bd-cost[data-bd-level="1"] .bd-cost-chip[data-bd-level="1"]::after,
.bd-cost[data-bd-level="2"] .bd-cost-chip[data-bd-level="2"]::after,
.bd-cost[data-bd-level="3"] .bd-cost-chip[data-bd-level="3"]::after {
  transform: scaleX(1);
}

/* Two cost rows.  3-col grid: label | track | caption.
   The track is a thin hairline with a fill bar inside; the
   fill's width transitions as the level changes. */
.bd-cost-rows {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 32px);
}

.bd-cost-row {
  display: grid;
  grid-template-columns: 120px 1fr 200px;
  gap: clamp(16px, 2vw, 28px);
  align-items: center;
}

.bd-cost-label {
  font-family: var(--font-base);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.bd-cost-track {
  position: relative;
  display: block;
  height: 2px;
  background: var(--border-subtle);
  border-radius: 1px;
}

.bd-cost-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 14%);
  background: var(--text-primary);
  border-radius: 1px;
  transition: width 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* BD fill grows per level; ZR fill always at 14%. */
.bd-cost[data-bd-level="0"] .bd-cost-fill--bd { --w: 14%; }
.bd-cost[data-bd-level="1"] .bd-cost-fill--bd { --w: 32%; }
.bd-cost[data-bd-level="2"] .bd-cost-fill--bd { --w: 64%; }
.bd-cost[data-bd-level="3"] .bd-cost-fill--bd { --w: 100%; }

.bd-cost-fill--zr { --w: 14%; }

.bd-cost-caption {
  font-family: var(--font-base);
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* BD caption changes per level — the right-edge text updates
   to reflect what's been added.  ZR caption is static. */

/* Phone — stack the row to label / track / caption vertically
   so the long captions never get truncated and the track has
   the full row width. */
@media (max-width: 720px) {
  .bd-cost-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .bd-cost-caption { white-space: normal; }
}

/* ───────────────────────────────────────────────────────────
   Act 3 — What you stop maintaining.

   Rhythm-break + alignment-break.  Header sits RIGHT (Acts 1
   and 2 are left), and the two columns are off-axis — ZR list
   anchored at the top-left, BD list pushed down ~80px from
   the right — so the eye reads a diagonal flow instead of the
   stacked-symmetric rhythm of the prior acts.

   Hover a ZR primitive: matching BD components brighten via
   .is-active (added by JS), non-matching components dim via a
   wrapper-level .is-hot flag.
─────────────────────────────────────────────────────────── */

.bd-act-3 {
  position: relative;
  background: var(--background);
  color: var(--text-primary);
  padding: clamp(96px, 12vh, 160px) clamp(20px, 4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bd-act-3-frame {
  width: 100%;
  max-width: 1080px;
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 6vw, 96px);
}

/* Header pulled to the right edge — explicit alignment-break
   from Acts 1 and 2.  max-width keeps the H2 from spanning
   the whole frame, so the white-space on the left reads as
   intentional. */
.bd-act-3-head {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: clamp(14px, 1.6vw, 22px);
  max-width: 64ch;
  margin-left: auto;
}

.bd-act-3-h2 {
  margin: 0;
  font-family: var(--font-display, var(--font-base));
  font-size: var(--mkt-h2);
  line-height: 1.04;
  letter-spacing: -0.028em;
  font-weight: 500;
  color: var(--text-primary);
  text-wrap: balance;
}

.bd-act-3-sub {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 52ch;
}

/* Two columns side-by-side.  The BD column has a top padding
   so its rows sit ~one item lower than the ZR rows, creating
   the diagonal off-axis read. */
.bd-maintain {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.bd-maintain-col {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.bd-maintain-col--bd {
  padding-top: clamp(48px, 5vw, 88px);
}

/* ── ZR primitives (left) ──────────────────────────────── */
.bd-maintain-zr {
  position: relative;
  padding: 18px 0;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: color 220ms ease;
}

.bd-maintain-zr:last-child {
  border-bottom: 1px solid var(--border-subtle);
}

.bd-maintain-zr-name {
  font-family: var(--font-code, "IBM Plex Mono"), monospace;
  font-size: var(--mkt-lead);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  transition: color 220ms ease;
}

.bd-maintain-zr-hint {
  font-family: var(--font-base);
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--text-tertiary);
}

/* Hover affordance — the active row shows a thin leading line
   on the left to mark it as the source of the highlight. */
.bd-maintain-zr::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--text-primary);
  transform: translateY(-50%) scaleX(0);
  transform-origin: right;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bd-maintain-zr.is-source::before { transform: translateY(-50%) scaleX(1); }

/* ── BD components (right) ─────────────────────────────── */
.bd-maintain-bd {
  padding: 16px 0;
  border-top: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 12px;
  transition: opacity 320ms ease, color 320ms ease;
}

.bd-maintain-bd:last-child {
  border-bottom: 1px solid var(--border-subtle);
}

.bd-maintain-bd-name {
  font-family: var(--font-base);
  font-size: var(--mkt-lead);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  transition: color 320ms ease;
}

.bd-maintain-bd-by {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: color 320ms ease, border-color 320ms ease;
}

/* When hovering a ZR row, non-matching BD rows fade.  CSS
   targets all BD rows by default and the JS-added .is-active
   on matched rows lifts them back to full opacity. */
.bd-maintain.is-hot .bd-maintain-bd { opacity: 0.32; }
.bd-maintain.is-hot .bd-maintain-bd.is-active { opacity: 1; }

/* Active row's name + badge brighten to leave no doubt. */
.bd-maintain-bd.is-active .bd-maintain-bd-name { color: #FFFFFF; }
.bd-maintain-bd.is-active .bd-maintain-bd-by {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.5);
}

/* ── Phone / narrow ──────────────────────────────────────
   Two columns become one — the diagonal off-axis read breaks
   at this width, so we drop the offset and stack the lists
   instead, with a small caption separator between the two so
   the reader still understands "left = Zenrows, right = BD". */
@media (max-width: 720px) {
  .bd-act-3-head {
    align-items: flex-start;
    text-align: left;
    margin-left: 0;
  }
  .bd-maintain {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .bd-maintain-col--bd { padding-top: 0; }
  .bd-maintain-zr { padding: 14px 0; }
  .bd-maintain-bd { padding: 12px 0; }
  .bd-maintain-zr::before { display: none; }
}

/* ───────────────────────────────────────────────────────────
   Act 4 — Closer.

   Centred brand-return on dark.  After Act 3's right-aligned
   rhythm-break, the closer returns to centre — the landing
   beat reads as resolution.  Page-signature echo: a thin
   horizontal wire below the H2, painting stroke-dashoffset on
   IO entry, references Act 1's wiring without repeating it.
─────────────────────────────────────────────────────────── */

.bd-act-4 {
  position: relative;
  background: var(--background);
  color: var(--text-primary);
  padding: clamp(120px, 18vh, 220px) clamp(20px, 4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bd-act-4-frame {
  width: 100%;
  max-width: 920px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(24px, 2.6vw, 36px);
}

.bd-act-4-kicker { margin: 0; }

.bd-act-4-h2 {
  margin: 0;
  font-family: var(--font-display, var(--font-base));
  font-size: var(--mkt-hero);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: var(--text-primary);
  max-width: 18ch;
  text-wrap: balance;
}

.bd-act-4-em {
  font-style: normal;
  font-weight: 500;
  color: var(--text-primary);
}

/* Thin wire under the H2.  Stroke-dashoffset paints in on IO
   entry — references Act 1's wires.  Width caps so it stays
   editorial-thin on wide displays. */
.bd-act-4-wire {
  width: clamp(80px, 8vw, 120px);
  height: 4px;
  color: var(--text-primary);
  opacity: 0.7;
}

.bd-act-4-wire path {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transition: stroke-dashoffset 1200ms cubic-bezier(0.22, 1, 0.36, 1) 200ms;
}

.bd-act-4.is-in .bd-act-4-wire path { stroke-dashoffset: 0; }

.bd-act-4-cta {
  margin-top: clamp(8px, 1vw, 16px);
  /* DS default is 10px between the button and its tagline;
     +4px so the tagline reads as a separate beat under the
     pill instead of sticking to its underside. */
  gap: 14px;
}

.bd-act-4-secondary {
  font-family: var(--font-base);
  font-size: var(--text-small, 13px);
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  transition: text-decoration-color 180ms;
}

.bd-act-4-secondary:hover { text-decoration-color: rgba(255, 255, 255, 0.8); }

@media (max-width: 600px) {
  .bd-act-4 { padding-top: clamp(80px, 14vh, 140px); padding-bottom: clamp(80px, 14vh, 140px); }
  
  .bd-act-4-wire { width: 72px; }
}

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

@media (max-width: 880px) {
  .bd-split { grid-template-columns: 1fr; gap: 24px; }
  .bd-split-pane { min-height: 0; }
  .bd-wiring { max-width: 380px; }
  .bd-zr-card { max-width: 100%; }
}

@media (max-width: 600px) {
  .bd-act-1 { padding-top: clamp(80px, 14vh, 120px); }
  
  .bd-hero-sub { font-size: 15px; }
  .bd-split-pane { padding: 18px; }
  .bd-wiring { max-width: 320px; }
  /* Smaller text inside nodes so the wiring stays legible
     when the pane shrinks. */
  .bd-node { font-size: 11px; padding: 4px 8px; }
  .bd-node-by { font-size: 8px; }
  .bd-zr-card-body { padding: 14px 16px; }
  .bd-zr-call, .bd-zr-json { font-size: 12px; }
  .bd-zr-card-includes { font-size: 11px; }
}

/* ══════════════════════════════════════════════════════════
   BU light overrides.  --font-display auto-flips to Mq12 via
   DS-level override.
═══════════════════════════════════════════════════════════ */
html:not(.dark) body {
  background: var(--zen-gray-3);
  color: var(--text-primary);
}

html:not(.dark) .bd-split-pane { background: rgba(29, 22, 18, 0.015); }
html:not(.dark) .bd-pane-tag {
  background: rgba(29, 22, 18, 0.06);
  border-color: rgba(29, 22, 18, 0.16);
}
/* ZENROWS tag uses light-lavender chrome on dark.  On the light
   page bg the same lavender bg + lavender text reads as
   low-contrast.  Saturate the tint and switch text to dark
   brand purple. */
html:not(.dark) .bd-pane-tag--zr {
  background: rgba(124, 79, 232, 0.14);
  border-color: rgba(124, 79, 232, 0.4);
  color: #5835B8;
}
html:not(.dark) .bd-wire { stroke: rgba(29, 22, 18, 0.32); }

/* The .bd-node blobs are intentionally warm-dark in both themes
   (theme-invariant graph chrome).  Their text colour defaults to
   var(--text-primary) which flips to dark in BU and disappears
   on the dark blob.  Pin label colour to white in BU so the node
   names + default badges keep their contrast against the blob.
   The brand-coloured BD / YOU badges (#B7C2FF / #F7BC6B) have
   their own non-token text colour and stay correct. */
html:not(.dark) .bd-node {
  border-color: rgba(29, 22, 18, 0.18);
  color: #FFFFFF;
}
/* Default badge (not BD-branded, not YOU-branded) sits on a dark
   blob — needs white-ish chrome in BU to stay readable. The
   brand-tinted BD/YOU badges have their own specific selectors
   that already win cascade order; this rule is scoped via :not
   so it doesn't fight them. */
html:not(.dark) .bd-node:not(.bd-node--bd):not(.bd-node--you) .bd-node-by {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}
html:not(.dark) .bd-node--out { border-color: rgba(29, 22, 18, 0.36); }
html:not(.dark) .bd-zr-card-dot { background: rgba(29, 22, 18, 0.4); }
html:not(.dark) .bd-maintain-bd-by {
  background: rgba(29, 22, 18, 0.04);
  border-color: rgba(29, 22, 18, 0.12);
}
html:not(.dark) .bd-maintain-bd.is-active .bd-maintain-bd-by {
  border-color: rgba(29, 22, 18, 0.5);
}
html:not(.dark) .bd-act-4-secondary { text-decoration-color: rgba(29, 22, 18, 0.3); }
html:not(.dark) .bd-act-4-secondary:hover { text-decoration-color: rgba(29, 22, 18, 0.8); }

/* Code highlight + credit chip palette flip.  The dark-theme
   #C7B0FF light-lavender reads as low-contrast purple-on-white in
   BU.  Switch to the dark brand purple #5835B8 (--zen-purple-9
   in light) for readable contrast.  JSON string values stay at
   the warm orange — those read fine on either bg. */
html:not(.dark) .zr-fn,
html:not(.dark) .json-k {
  color: #5835B8;
}
html:not(.dark) .bd-zr-card-credit {
  color: #5835B8;
  background: rgba(124, 79, 232, 0.14);
  border-color: rgba(124, 79, 232, 0.4);
}