@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");

/* ──────────────────────────────────────────────────────────
   /workflows/competitor-intel — Spoke page.

   Second /workflows spoke.  Same act rhythm as price-
   monitoring (hero · how-it-works · output band · closer) so
   the section reads coherently, but each act's visual proof
   differs.  WIP: Act 1 hero styled first.
─────────────────────────────────────────────────────────── */

body {
  overscroll-behavior-y: none;
}

.ci-bg { display: none; }

main {
  position: relative;
  /* No z-index here on purpose — adding one would create a
     stacking context on main that competes with the
     fixed-positioned topbar (z-index 90) and could trap the
     aperture band above the logo. */
}

/* Belt-and-braces: bump the topbar's z-index well above
   anything that could leak through.  Some SVG quirks with
   transform-box can create stacking contexts that interfere;
   isolation + a high z-index hard-locks the topbar on top. */
.topbar {
  isolation: isolate;
  z-index: 200;
}

.back-to-top { cursor: pointer; }

/* ──────────────────────────────────────────────────────────
   Aperture band — purple-7 layer that covers the hero plus
   the top half of Act 2 and dissolves into large square
   pixels at its bottom edge.

   "Zenrows as a black hole" metaphor: data + momentum get
   pulled in as the reader scrolls down.  The SVG mask is
   built client-side in competitor-intel.js; each square is
   ~64px in display space and the dropout pattern is
   deterministic (hashed from r + c) so it stays stable.
─────────────────────────────────────────────────────────── */

.ci-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Hero is ~100vh; Act 2's bloom curtain top lives in the
     next ~50-60vh.  150vh covers the whole pull region. */
  height: 150vh;
  /* Above the acts (z-index: 1) so the dark lid paints OVER
     Act 2's purple where the band overlaps it.  Hero content
     gets z-index: 3 below to stay readable. */
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

/* SVG fills the band container — left/right/width 100% so it
   matches the div's computed width regardless of intrinsic
   SVG sizing quirks. */
.ci-bg-svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Per-cell detach event: each event has a paired hole (dark
   rect that opens AT the cell to show the page bg through
   the band) AND a falling pixel (purple rect that drifts
   down + fades).  Both share the same --ci-d duration and
   --ci-delay phase so the hole opens exactly as the pixel
   detaches.  Loops forever with random per-cell delays. */
.ci-bg-svg .is-fall,
.ci-bg-svg .is-hole {
  transform-origin: center;
  transform-box: fill-box;
}

.ci-bg-svg .is-fall {
  animation: ci-pixel-fall var(--ci-d, 6s) linear var(--ci-delay, 0s) infinite;
}

.ci-bg-svg .is-hole {
  /* Holes punch through the dark band to reveal the purple
     body beneath — the colour shows through the lid as each
     pixel detaches. */
  fill: var(--zen-purple-7, #7C4FE8);
  animation: ci-hole-open var(--ci-d, 6s) linear var(--ci-delay, 0s) infinite;
  opacity: 0;
}

/* Pixel cycle — both ends of the loop start + end invisible
   so the boundary is seamless.  Quick fade-in at the lid
   edge, holds visible, then a short drop + fade-out.  Loops
   forever with random per-pixel duration + delay. */
@keyframes ci-pixel-fall {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  6% {
    opacity: 1;
    transform: translateY(0);
  }
  70% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* Hole opens exactly as the pixel detaches, stays open
   briefly, then closes when the loop restarts.  The band
   reads as intact most of the cycle and disintegrating only
   in the detach window. */
@keyframes ci-hole-open {
  0%, 60% { opacity: 0; }
  70%, 95% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ci-bg-svg .is-fall,
  .ci-bg-svg .is-hole {
    animation: none;
  }
  .ci-bg-svg .is-hole { opacity: 0; }
}

/* Act 1 + Act 2 sit ABOVE the band so the editorial content
   reads on top of the purple canvas. */
[data-act="1"],
[data-act="2"] {
  position: relative;
  z-index: 1;
}

/* ──────────────────────────────────────────────────────────
   Act 1 — Hero.

   Asymmetric 2-col split (left editorial · right artifact).
   Single-screen, no sticky stage — variety from price-
   monitoring's 360vh sticky cycle hero.  The right column
   is the artifact this workflow produces: a sample weekly
   Markdown brief with three sections (Pricing · Hiring ·
   Velocity), each line fades up with a stagger when the
   section enters the viewport.
─────────────────────────────────────────────────────────── */

[data-act="1"] {
  position: relative;
  /* Above the band (z-index: 2) so the hero content sits on
     top of the dark lid instead of being covered by it.
     The band is still visible BEHIND the hero — Act 1's
     transparent bg lets it paint through where there's no
     content. */
  z-index: 3;
  min-height: 100vh;
  background: transparent;
  padding: clamp(96px, 13vh, 140px) clamp(20px, 5vw, 80px) clamp(72px, 10vh, 120px);
  display: flex;
  align-items: center;
}

.ci-hero {
  position: relative;
  /* Lifts hero content above the .ci-bg's solid dark lid
     (z-index: 2) so H1, brief and CTA stay readable. */
  z-index: 3;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

/* ── Left column — editorial ─────────────────────────── */

.ci-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 2.6vh, 32px);
  min-width: 0;
}

.ci-hero-h {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: var(--mkt-h3);
  line-height: 1.06;
  letter-spacing: var(--tracking-dense, -0.024em);
  font-weight: 500;
  color: var(--text-primary);
  text-wrap: balance;
}

.ci-hero-h em {
  font-style: italic;
  font-weight: 500;
  color: inherit;
}

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

/* Slash-command block — clickable copy button.  No-fill
   pattern matching the price-monitoring spoke + master
   /workflows duality widget.  Purple→teal ::before top-edge
   illumination on hover, overflow: hidden so the gradient
   follows the rounded corners. */
.ci-hero-cmd {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(16px, 2vh, 22px) clamp(18px, 2vw, 26px);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-display, 20px);
  color: var(--text-primary);
  font-family: inherit;
  text-align: left;
  width: 100%;
  max-width: 460px;
  outline: none;
  position: relative;
  overflow: hidden;
  transition: border-color 220ms ease;
}

.ci-hero-cmd::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--zen-purple-7, #7C4FE8) 0%,
    var(--zen-cyan-6, #7ADAE6) 35%,
    transparent 80%
  );
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.ci-hero-cmd:hover,
.ci-hero-cmd:focus-visible {
  border-color: rgba(255, 255, 255, 0.18);
}

.ci-hero-cmd:hover::before,
.ci-hero-cmd:focus-visible::before {
  opacity: 1;
}

.ci-hero-cmd.is-copied {
  border-color: var(--zen-cyan-6, #7ADAE6);
}
.ci-hero-cmd.is-copied::before {
  opacity: 1;
}

.ci-hero-cmd-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-tertiary);
}

.ci-hero-cmd-prompt {
  color: var(--zen-purple-7, #7C4FE8);
}

.ci-hero-cmd-code {
  display: block;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: var(--mkt-body);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  line-height: 1.3;
  word-break: break-all;
}

.ci-hero-cmd-hint {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-tertiary);
  transition: color 220ms ease;
}

.ci-hero-cmd.is-copied .ci-hero-cmd-hint {
  color: var(--zen-cyan-6, #7ADAE6);
}

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

.ci-hero-cmd,
.ci-hero-cmd * { cursor: pointer; }

/* ── Right column — Markdown brief mockup ─────────────────
   The artifact the workflow produces: a sample weekly brief
   with file/week meta + headline + three sections (Pricing ·
   Hiring · Velocity).  Transparent fill, hairline border,
   editorial typography (not literal mono code).  Lines fade
   up with stagger on enter viewport. */

.ci-brief {
  position: relative;
  width: 100%;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-display, 20px);
  padding: clamp(20px, 2.6vh, 32px) clamp(22px, 2.4vw, 36px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.2vh, 24px);
  align-self: stretch;
}

.ci-brief-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: clamp(12px, 1.6vh, 18px);
  border-bottom: 1px solid var(--border-subtle);
}

.ci-brief-meta {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.ci-brief-meta-file { color: var(--zen-purple-7, #7C4FE8); font-weight: 600; }
.ci-brief-meta-sep  { color: var(--text-quaternary); }
.ci-brief-meta-week { color: var(--text-tertiary); }

.ci-brief-h {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: var(--mkt-h4);
  line-height: 1.1;
  letter-spacing: var(--tracking-dense, -0.018em);
  font-weight: 500;
  color: var(--text-primary);
}

.ci-brief-section {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vh, 12px);
}

.ci-brief-section-h {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-base);
  font-size: var(--mkt-body-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-tertiary);
}

.ci-brief-section-mark {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 0.92em;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--zen-purple-7, #7C4FE8);
}

.ci-brief-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vh, 12px);
}

.ci-brief-list li {
  position: relative;
  padding-left: 18px;
  font-family: var(--font-base);
  font-size: var(--mkt-body-sm);
  line-height: 1.5;
  color: var(--text-secondary);
  text-wrap: pretty;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 580ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 580ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ci-brief-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--text-quaternary);
  font-weight: 500;
}

.ci-brief-list li strong {
  color: var(--text-primary);
  font-weight: 600;
}

.ci-brief.is-revealed .ci-brief-list li {
  opacity: 1;
  transform: none;
}

/* Per-line stagger — three sections × two lines each = six
   bullets total, cascaded by ~120ms.  Order matches DOM. */
.ci-brief-section:nth-child(2) .ci-brief-list li:nth-child(1) { transition-delay:   0ms; }
.ci-brief-section:nth-child(2) .ci-brief-list li:nth-child(2) { transition-delay: 120ms; }
.ci-brief-section:nth-child(3) .ci-brief-list li:nth-child(1) { transition-delay: 240ms; }
.ci-brief-section:nth-child(3) .ci-brief-list li:nth-child(2) { transition-delay: 360ms; }
.ci-brief-section:nth-child(4) .ci-brief-list li:nth-child(1) { transition-delay: 480ms; }
.ci-brief-section:nth-child(4) .ci-brief-list li:nth-child(2) { transition-delay: 600ms; }

/* ── Responsive ──────────────────────────────────────── */

@media (max-width: 1024px) {
  .ci-hero {
    grid-template-columns: 1fr;
    row-gap: clamp(48px, 7vh, 72px);
  }
}

@media (max-width: 600px) {
  [data-act="1"] {
    padding: clamp(96px, 13vh, 140px) clamp(18px, 5vw, 32px) clamp(56px, 8vh, 80px);
    min-height: auto;
  }
  .ci-hero-h {
    font-size: var(--mkt-h4);
  }
  .ci-brief-h {
    font-size: var(--mkt-h4);
  }
}

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

@media (min-width: 1600px) {
  .ci-hero { max-width: 1480px; }
  .ci-hero-h { font-size: 56px; }
  .ci-hero-sub { font-size: 19px; }
  .ci-hero-cmd-code { font-size: 19px; }
  .ci-brief-h { font-size: 36px; }
  .ci-brief-list li { font-size: 17px; }
}

@media (min-width: 1920px) {
  .ci-hero { max-width: 1680px; }
  .ci-hero-h { font-size: 64px; }
  .ci-hero-sub { font-size: 20px; }
  .ci-hero-cmd-code { font-size: 21px; }
  .ci-brief-h { font-size: 40px; }
  .ci-brief-list li { font-size: 18px; }
}

@media (min-width: 2400px) {
  .ci-hero { max-width: 1960px; }
  .ci-hero-h { font-size: 84px; }
  .ci-hero-sub { font-size: 23px; max-width: 48ch; }
  .ci-hero-cmd-code { font-size: 24px; }
  .ci-brief-h { font-size: 48px; }
  .ci-brief-list li { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .ci-hero-cmd,
  .ci-hero-cmd::before,
  .ci-hero-cmd-hint {
    transition: none;
  }
  .ci-brief-list li {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ──────────────────────────────────────────────────────────
   Act 2 — How it works (purple band).

   Saturated purple-7 with a scroll-linked bloom curtain
   entering from the top-right.  Five-step editorial flow:
   big display number on the left, title + sub + visual on
   the right.  Per-step visual proof varies (URL list ·
   surface chips · JSON · diff · destination chips) so the
   sequence reads as a real pipeline, not a card grid.
─────────────────────────────────────────────────────────── */

[data-act="2"] {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #7C4FE8;
  color: #FFFFFF;
  padding: clamp(96px, 14vh, 160px) clamp(20px, 5vw, 80px) clamp(120px, 18vh, 200px);
}

/* Barcode curtain — 24 dark vertical bars cover the top of
   the section at rest.  When .is-revealed is added (IO
   trigger), each bar shrinks scaleY(1) → scaleY(0) from its
   top edge with a per-bar randomized delay so the cascade
   is desynchronised — a "data scan completing" feel. */
.ci-bars {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 70vh;
  display: flex;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.ci-bar {
  flex: 1 1 0;
  min-width: 0;
  background: var(--background);
  transform-origin: top;
  transform: scaleY(1);
  transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-act="2"].is-revealed .ci-bar {
  transform: scaleY(0);
}

@media (prefers-reduced-motion: reduce) {
  .ci-bar {
    transform: scaleY(0);
    transition: none;
  }
}

.ci-how {
  position: relative;
  /* Above the bars curtain (z-index 2) so the kicker/H2/
     steps stay readable as the bars retreat. */
  z-index: 3;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.ci-how-head {
  max-width: 720px;
  margin: 0 0 clamp(64px, 10vh, 120px);
}

[data-act="2"] .ci-how-kicker {
  color: rgba(255, 255, 255, 0.72);
}

.ci-how-h {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: var(--mkt-h2);
  line-height: 1.06;
  letter-spacing: var(--tracking-dense, -0.024em);
  font-weight: 500;
  color: #FFFFFF;
  text-wrap: balance;
}

.ci-how-h em {
  font-style: italic;
  font-weight: 500;
  color: inherit;
}

.ci-how-sub {
  margin: clamp(18px, 2.4vh, 28px) 0 0;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.84);
  max-width: 620px;
  text-wrap: pretty;
}

/* Steps list — vertical flow, big number left + content
   right.  No card framing — pure editorial typography. */
.ci-how-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 9vh, 104px);
}

.ci-how-step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 2.6fr);
  column-gap: clamp(28px, 4vw, 64px);
  align-items: start;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ci-how-step.is-revealed {
  opacity: 1;
  transform: none;
}

/* Step number — display type, big, dim white so it acts as
   a column marker without screaming. */
.ci-how-n {
  display: block;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: clamp(56px, 8vw, 132px);
  line-height: 0.9;
  letter-spacing: var(--tracking-dense, -0.034em);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.28);
}

.ci-how-body {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.8vh, 18px);
  min-width: 0;
  padding-top: clamp(8px, 1.2vh, 16px);
}

.ci-how-step-h {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: var(--mkt-h4);
  line-height: 1.1;
  letter-spacing: var(--tracking-dense, -0.018em);
  font-weight: 500;
  color: #FFFFFF;
  text-wrap: balance;
}

.ci-how-step-p {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  text-wrap: pretty;
  max-width: 56ch;
}

.ci-how-step-p code {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 0.92em;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.12);
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: -0.005em;
}

/* Visual proofs — transparent on the purple band, hairline
   white-alpha borders, mono content where appropriate. */
.ci-how-step-code {
  margin: clamp(4px, 0.6vh, 8px) 0 0;
  padding: clamp(14px, 1.8vh, 20px) clamp(16px, 1.6vw, 22px);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-default, 12px);
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: clamp(12.5px, 0.92vw, 14.5px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  width: 100%;
  max-width: 560px;
  overflow-x: clip;
}

.ci-how-step-code code {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Step 02 — surface chips inline. */
.ci-how-surfaces {
  margin-top: clamp(4px, 0.6vh, 8px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ci-how-surface {
  display: inline-block;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-full, 999px);
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}

/* Step 04 — diff line. */
.ci-how-diff {
  margin-top: clamp(4px, 0.6vh, 8px);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: clamp(10px, 1.2vw, 16px);
  padding: clamp(14px, 1.8vh, 20px) clamp(16px, 1.6vw, 22px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-default, 12px);
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: var(--mkt-body-sm);
  width: 100%;
  max-width: 480px;
}

.ci-how-diff-field { color: rgba(255, 255, 255, 0.72); }
.ci-how-diff-before {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.32);
}
.ci-how-diff-arrow  { color: rgba(255, 255, 255, 0.5); font-weight: 400; }
.ci-how-diff-after  { color: #FFFFFF; font-weight: 600; }
.ci-how-diff-delta  { color: var(--zen-cyan-6, #7ADAE6); font-weight: 600; margin-left: auto; }

/* Step 05 — destination chips.  Pills with --pill-accent
   forced to teal-6 so the hover halo reads on the purple
   ground. */
.ci-how-dests {
  margin-top: clamp(4px, 0.6vh, 8px);
  --pill-accent: var(--zen-cyan-6, #7ADAE6);
  /* The default DS pill surface/border tokens resolve dark
     against dark.  On the purple band that reads as a black
     rectangle without a border — so we re-scope the tokens
     locally to white-alpha values (saturated-band exemption
     in the DS strict-colors rule). */
  --sunken-base: rgba(255, 255, 255, 0.10);
  --border-subtle: rgba(255, 255, 255, 0.24);
}

/* ── Step 01 physics pile ───────────────────────────────
   Pile is clipped to the code-block container so the falling
   tokens settle inside the URL list rectangle.  The wrap
   provides position-relative anchoring + matches the code
   block's own border-radius via overflow: hidden. */
.ci-how-step-code-wrap {
  position: relative;
  width: 100%;
  max-width: 560px;
  min-height: clamp(260px, 32vh, 340px);
  /* Border now lives on the wrap (not the inner <pre>) so
     the URL list + pile area read as one bordered container.
     The pre below loses its own border to avoid doubling. */
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-default, 12px);
  overflow: hidden;
}

.ci-how-step-code-wrap .ci-how-step-code {
  border: 0;
  border-radius: 0;
}

.ci-pile {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.ci-pile-logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #FFFFFF;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(40, 14, 70, 0.5);
  will-change: transform;
  transform: translate3d(0, 0, 0);
  /* Initially hidden until the sim spawns them. */
  opacity: 0;
}

.ci-pile.is-spawning .ci-pile-logo {
  opacity: 1;
}

.ci-pile-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 900px) {
  .ci-pile { display: none; }
}

/* ── Responsive ──────────────────────────────────────── */

@media (max-width: 900px) {
  .ci-how-step {
    grid-template-columns: 1fr;
    row-gap: clamp(12px, 2vh, 20px);
  }
  .ci-how-n { font-size: clamp(48px, 12vw, 72px); }
}

@media (max-width: 600px) {
  .ci-how-h { font-size: var(--mkt-h4); }
  .ci-how-step-h { font-size: clamp(20px, 5.5vw, 24px); }
}

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

@media (min-width: 1600px) {
  .ci-how { max-width: 1400px; }
  .ci-how-h { font-size: 64px; }
  .ci-how-sub { font-size: 19px; }
  .ci-how-n { font-size: 156px; }
  .ci-how-step-h { font-size: 40px; }
  .ci-how-step-p { font-size: 18px; }
}

@media (min-width: 1920px) {
  .ci-how { max-width: 1580px; }
  .ci-how-h { font-size: 72px; }
  .ci-how-sub { font-size: 20px; }
  .ci-how-n { font-size: 180px; }
  .ci-how-step-h { font-size: 44px; }
  .ci-how-step-p { font-size: 19px; }
}

@media (min-width: 2400px) {
  .ci-how { max-width: 1860px; }
  .ci-how-h { font-size: 92px; }
  .ci-how-sub { font-size: 23px; }
  .ci-how-n { font-size: 224px; }
  .ci-how-step-h { font-size: 56px; }
  .ci-how-step-p { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .ci-how-step {
    opacity: 1;
    transform: none;
    transition: none;
  }
  [data-act="2"] .ci-how-curtain {
    clip-path: circle(150% at 94% 0%);
  }
}

/* ── Topbar adapts to the purple aperture band while it
   covers the topbar slot.  Logo gets inverted to white (the
   default zenrows-logo.svg is filled in purple-7, which
   blends into the band — invisible without the filter),
   nav links go white, marketing CTA inverts to teal-5,
   cursor portal recolors to teal so the spinning O reads
   on purple. */
/* @pattern body-is-on-purple START
   Canonical topbar / chrome inversion overrides for when a saturated
   purple-7 band covers the topbar slot.  Mirror set for teal and light
   bands (search @pattern body-is-on-teal / body-is-on-light).  Port
   verbatim — keep the CSS variable fallbacks and the .topbar { transition:
   none } override (prevents transition lag when the body class flips). */
/* @pattern body-is-on-purple END */

/* ════════════════════════════════════════════════════════════
   Act 3 — Signal (editorial breather)
   Dark, restrained, layout-led minimalism.  Asymmetric 7/5
   grid: statement left, diff-log right.  No cards, no chrome,
   no decorative motion — just typography + dividing rules so
   the act reads as a deliberate pause after Act 2's choreography.
   ════════════════════════════════════════════════════════════ */
[data-act="3"] {
  position: relative;
  padding: clamp(96px, 16vh, 180px) clamp(20px, 5vw, 80px);
}

.ci-signal {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(48px, 7vw, 120px);
  row-gap: 56px;
  align-items: start;
}

.ci-signal-left { display: flex; flex-direction: column; gap: 16px; }
.ci-signal-right { display: flex; flex-direction: column; gap: clamp(20px, 2.4vh, 28px); }

.ci-signal-h {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: clamp(40px, 5.2vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  font-weight: 500;
}
.ci-signal-h em {
  font-style: italic;
  font-weight: 400;
  color: inherit;
}

.ci-signal-lead {
  margin: 0;
  max-width: 48ch;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--text-secondary);
}


.ci-signal-label {
  margin: 0;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.ci-signal-moves {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ci-signal-move {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: clamp(16px, 1.4vw, 24px);
  padding: 18px 0;
  border-top: 1px solid var(--border-subtle);
  align-items: baseline;
}
.ci-signal-moves > .ci-signal-move:last-child {
  border-bottom: 1px solid var(--border-subtle);
}

.ci-signal-tag {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--zen-purple-7, #7C4FE8);
}

.ci-signal-text {
  font-family: var(--font-base);
  font-size: var(--mkt-body-sm);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}

@media (max-width: 900px) {
  .ci-signal {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 48px;
  }
  .ci-signal-move { grid-template-columns: 84px 1fr; }
}

@media (max-width: 600px) {
  .ci-signal-h { font-size: var(--mkt-h3); }
  .ci-signal-move {
    grid-template-columns: 72px 1fr;
    gap: 14px;
    padding: 14px 0;
  }
}

@media (min-width: 1600px) {
  .ci-signal { max-width: 1480px; }
  .ci-signal-h { font-size: 76px; }
  .ci-signal-lead { font-size: 19px; }
  .ci-signal-text { font-size: 17px; }
  .ci-signal-move { grid-template-columns: 108px 1fr; }
}

@media (min-width: 1920px) {
  .ci-signal { max-width: 1680px; }
  .ci-signal-h { font-size: 84px; }
  .ci-signal-lead { font-size: 20px; }
  .ci-signal-text { font-size: 18px; }
  .ci-signal-move { grid-template-columns: 120px 1fr; }
}

@media (min-width: 2400px) {
  .ci-signal { max-width: 1960px; }
  .ci-signal-h { font-size: 104px; }
  .ci-signal-lead { font-size: 23px; }
  .ci-signal-text { font-size: 21px; }
  .ci-signal-move { grid-template-columns: 144px 1fr; }
}

/* ════════════════════════════════════════════════════════════
   Act 4 — Closer (resolution beat)
   Centered editorial close after three different alignment
   breaks in earlier acts.  Warm dark ground, restrained type
   scale (smaller than Act 3's headline — this is an essay
   close, not another statement).  Single purple-7 dot above
   the heading is the only colored element.
   ════════════════════════════════════════════════════════════ */
[data-act="4"] {
  position: relative;
  padding: clamp(120px, 18vh, 200px) clamp(20px, 5vw, 80px) clamp(96px, 14vh, 160px);
}

.ci-end {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(20px, 2.4vh, 32px);
}

/* End-of-essay mark — small purple-7 dot, single color note. */
.ci-end-mark {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #7C4FE8;
  display: block;
  margin-bottom: clamp(8px, 1vh, 14px);
}

.ci-end-h {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: var(--mkt-h2);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--text-primary);
  font-weight: 500;
}
.ci-end-h em {
  font-style: italic;
  font-weight: 400;
  color: inherit;
}

.ci-end-sub {
  margin: 0;
  max-width: 48ch;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--text-secondary);
}

.ci-end-cta { margin-top: clamp(8px, 1.6vh, 16px); }

.ci-end-link {
  margin-top: clamp(20px, 3vh, 40px);
  align-self: center;
  text-align: center;
}

@media (max-width: 600px) {
  .ci-end-h { font-size: var(--mkt-h3); }
}

@media (min-width: 1600px) {
  .ci-end { max-width: 960px; }
  .ci-end-h { font-size: 68px; }
  .ci-end-sub { font-size: 19px; }
}

@media (min-width: 1920px) {
  .ci-end { max-width: 1040px; }
  .ci-end-h { font-size: 76px; }
  .ci-end-sub { font-size: 20px; }
  .ci-end-mark { width: 12px; height: 12px; }
}

@media (min-width: 2400px) {
  .ci-end { max-width: 1200px; }
  .ci-end-h { font-size: 92px; }
  .ci-end-sub { font-size: 23px; }
  .ci-end-mark { width: 14px; height: 14px; }
}


/* ════════════════════════════════════════════════════════════
   Scroll-driven editorial reveal — fade + blur-clear + lift
   Applies to [data-ci-reveal] containers (hero text, signal,
   closer).  IO toggles .is-revealed on enter; CSS cascades a
   stagger across each container's children via nth-child
   transition-delays.  Keeps the page feeling alive between the
   busier Acts.
   ════════════════════════════════════════════════════════════ */

/* ── Act 1 hero text ──────────────────────────────────── */
.ci-hero-text[data-ci-reveal] > * {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(8px);
  transition:
    opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 620ms ease;
}
.ci-hero-text[data-ci-reveal].is-revealed > * {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.ci-hero-text[data-ci-reveal].is-revealed > *:nth-child(1) { transition-delay:   0ms; }
.ci-hero-text[data-ci-reveal].is-revealed > *:nth-child(2) { transition-delay: 120ms; }
.ci-hero-text[data-ci-reveal].is-revealed > *:nth-child(3) { transition-delay: 240ms; }
.ci-hero-text[data-ci-reveal].is-revealed > *:nth-child(4) { transition-delay: 360ms; }
.ci-hero-text[data-ci-reveal].is-revealed > *:nth-child(5) { transition-delay: 480ms; }

/* ── Act 3 signal — split editorial cascade ───────────── */
.ci-signal[data-ci-reveal] .ci-signal-left > *,
.ci-signal[data-ci-reveal] .ci-signal-right > *,
.ci-signal[data-ci-reveal] .ci-signal-move {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(8px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 600ms ease;
}
.ci-signal[data-ci-reveal].is-revealed .ci-signal-left > *,
.ci-signal[data-ci-reveal].is-revealed .ci-signal-right > *,
.ci-signal[data-ci-reveal].is-revealed .ci-signal-move {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
/* Left column — label then moves with their own per-row stagger. */
.ci-signal[data-ci-reveal].is-revealed .ci-signal-left > *:nth-child(1) { transition-delay:   0ms; }
.ci-signal[data-ci-reveal].is-revealed .ci-signal-move:nth-child(1)     { transition-delay: 140ms; }
.ci-signal[data-ci-reveal].is-revealed .ci-signal-move:nth-child(2)     { transition-delay: 240ms; }
.ci-signal[data-ci-reveal].is-revealed .ci-signal-move:nth-child(3)     { transition-delay: 340ms; }
.ci-signal[data-ci-reveal].is-revealed .ci-signal-move:nth-child(4)     { transition-delay: 440ms; }
/* Right column — kicker, h2, lead. */
.ci-signal[data-ci-reveal].is-revealed .ci-signal-right > *:nth-child(1) { transition-delay: 180ms; }
.ci-signal[data-ci-reveal].is-revealed .ci-signal-right > *:nth-child(2) { transition-delay: 300ms; }
.ci-signal[data-ci-reveal].is-revealed .ci-signal-right > *:nth-child(3) { transition-delay: 460ms; }

/* ── Act 4 closer — centered cascade ──────────────────── */
.ci-end[data-ci-reveal] > * {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(8px);
  transition:
    opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 620ms ease;
}
.ci-end[data-ci-reveal].is-revealed > * {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.ci-end[data-ci-reveal].is-revealed > *:nth-child(1) { transition-delay:   0ms; }
.ci-end[data-ci-reveal].is-revealed > *:nth-child(2) { transition-delay: 100ms; }
.ci-end[data-ci-reveal].is-revealed > *:nth-child(3) { transition-delay: 220ms; }
.ci-end[data-ci-reveal].is-revealed > *:nth-child(4) { transition-delay: 380ms; }
.ci-end[data-ci-reveal].is-revealed > *:nth-child(5) { transition-delay: 520ms; }
.ci-end[data-ci-reveal].is-revealed > *:nth-child(6) { transition-delay: 660ms; }

@media (prefers-reduced-motion: reduce) {
  .ci-hero-text[data-ci-reveal] > *,
  .ci-signal[data-ci-reveal] .ci-signal-left > *,
  .ci-signal[data-ci-reveal] .ci-signal-right > *,
  .ci-signal[data-ci-reveal] .ci-signal-move,
  .ci-end[data-ci-reveal] > * {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════════
   /workflows/lead-enrichment overrides — Act 1 terminal-only.
   Replace the inherited 2-col asymmetric hero with a single,
   centered, oversized terminal modeled on /cli's
   .cli-term.  Terminal is wider than the standard 1320px hero
   container so it visually overflows the page's shoulders.
   ════════════════════════════════════════════════════════════ */

[data-act="1"] {
  /* Zero out horizontal padding so the artifact reaches the
     same visual width as the heroes in /workflows/price-
     monitoring + /workflows/competitor-intel.  Vertical
     padding kept from the base rule. */
  padding-left: 0;
  padding-right: 0;
  overflow-x: clip;
}

.le-hero {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(28px, 4.4vh, 56px);
  padding: 0;
}

/* H1 + copy widget row beneath the terminal.  Editorial
   H1 left, slash-command pill right.  Constrained to the
   same width as the terminal so the three vertical bands
   (terminal · row) read as a single composition. */
.le-hero-row {
  width: min(95vw, 1320px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(24px, 4vw, 64px);
  align-items: center;
}

.le-hero-h {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: var(--mkt-h2);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  font-weight: 500;
}
.le-hero-h em {
  font-style: normal;
  font-weight: 400;
  color: inherit;
}

.le-hero .le-hero-cmd {
  max-width: 440px;
}

/* Terminal — sized to match the other workflow hero
   artifacts (brief mockup + prices table).  Frame-only
   border-subtle, body holds the typed output. */
.le-term {
  position: relative;
  width: min(95vw, 1320px);
  margin: 0 auto;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-display, 20px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: clamp(420px, 56vh, 580px);
}

.le-term-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.78);
  overflow: hidden;
  isolation: isolate;
  min-height: 44px;
}

/* Mesh-gradient backdrop — green/cyan biased so the bar reads
   as "enrichment / pipeline" instead of the orange/purple
   mix on the CLI page.  Four bubbles drift on independent
   loops; the linear base guarantees full coverage. */
.le-term-mesh {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    var(--zen-green-7, #3FA371) 0%,
    var(--zen-cyan-7, #2BA8B8) 100%
  );
}

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

.le-term-bubble[data-bubble="1"] {
  background: var(--zen-green-6, #6ED49A);
  top: -90%;
  left: -10%;
  animation: le-bubble-1 7s ease-in-out infinite alternate;
}
.le-term-bubble[data-bubble="2"] {
  background: #7ADAE6;
  top: -80%;
  left: 35%;
  animation: le-bubble-2 9s ease-in-out infinite alternate;
}
.le-term-bubble[data-bubble="3"] {
  background: var(--zen-purple-6, #9B6FFF);
  top: -100%;
  left: 55%;
  animation: le-bubble-3 11s ease-in-out infinite alternate;
}
.le-term-bubble[data-bubble="4"] {
  background: var(--zen-yellow-6, #F5C56A);
  top: -85%;
  left: 18%;
  animation: le-bubble-4 13s ease-in-out infinite alternate;
}

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

.le-term-bar > *:not(.le-term-mesh) {
  position: relative;
  z-index: 1;
}

.le-term-dots {
  display: inline-flex;
  gap: 6px;
}
.le-term-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}

.le-term-title {
  margin-left: 8px;
  font-weight: 600;
  color: #FFFFFF;
}

.le-term-status {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--radius-full, 999px);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.20);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  transition: background 240ms ease, border-color 240ms ease, color 240ms ease;
}
.le-term-status[data-le-status="busy"] {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.45);
  color: #FFFFFF;
}
.le-term-status[data-le-status="done"] {
  background: rgba(110, 212, 154, 0.32);
  border-color: rgba(110, 212, 154, 0.65);
  color: #FFFFFF;
}

.le-term-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: clamp(20px, 2.2vw, 30px) clamp(22px, 2.2vw, 32px);
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: clamp(12px, 0.95vw, 15px);
  line-height: 1.65;
  color: var(--text-secondary);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scrollbar-width: none;
}
.le-term-body::-webkit-scrollbar { display: none; }

.le-line {
  display: block;
  height: 1.65em;
  line-height: 1.65em;
  white-space: pre;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.le-line.is-shown {
  opacity: 1;
  transform: translateY(0);
}

.le-line[data-kind="cmd"]    { color: var(--text-primary); }
.le-line[data-kind="cmd"]::before {
  content: "$ ";
  color: var(--zen-green-6, #6ED49A);
  font-weight: 600;
}
.le-line[data-kind="info"]   { color: var(--text-tertiary); }
.le-line[data-kind="ok"]     { color: var(--zen-green-6, #6ED49A); }
.le-line[data-kind="data"]   { color: var(--text-secondary); }
.le-line[data-kind="warn"]   { color: var(--zen-yellow-6, #F5C56A); }
.le-line[data-kind="head"]   {
  color: var(--text-tertiary);
  font-size: 0.86em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Blinking caret on the active typed line. */
.le-line.is-typing::after {
  content: "▍";
  display: inline-block;
  margin-left: 2px;
  color: var(--zen-green-6, #6ED49A);
  animation: le-caret 0.9s steps(1) infinite;
}
@keyframes le-caret {
  0%, 50%   { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

@media (max-width: 900px) {
  .le-term {
    width: min(96vw, 720px);
    min-height: clamp(360px, 52vh, 520px);
  }
  .le-term-body { padding: 18px 18px; font-size: 12px; }
  .le-hero-row {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
  .le-hero .le-hero-cmd { max-width: 100%; justify-self: start; }
}

@media (min-width: 1600px) {
  .le-term      { width: min(95vw, 1480px); }
  .le-hero-row  { width: min(95vw, 1480px); }
  .le-hero-h    { font-size: 68px; }
}
@media (min-width: 1920px) {
  .le-term      { width: min(95vw, 1680px); }
  .le-hero-row  { width: min(95vw, 1680px); }
  .le-hero-h    { font-size: 76px; }
}
@media (min-width: 2400px) {
  .le-term      { width: min(95vw, 1960px); }
  .le-hero-row  { width: min(95vw, 1960px); }
  .le-hero-h    { font-size: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  .le-term-bubble { animation: none; }
  .le-line { opacity: 1; transform: none; transition: none; }
  .le-line.is-typing::after { animation: none; opacity: 0; }
}

/* ════════════════════════════════════════════════════════════
   Act 2 — Before / after split table.
   Editorial header + two-pane CSV comparison.  Input pane
   (one column) on the left, arrow rail in the middle, output
   pane (five columns) on the right.  Four added columns are
   tinted with brand purple-7 + cascade in on IO entry.
   Override [data-act="2"] inherited purple-band styling
   from the competitor-intel template — this act is dark
   editorial, no saturated band.
   ════════════════════════════════════════════════════════════ */

[data-act="2"] {
  background: transparent;
  color: var(--text-primary);
  padding: clamp(96px, 14vh, 160px) clamp(20px, 5vw, 80px) clamp(120px, 18vh, 200px);
  isolation: auto;
}
[data-act="2"]::before { display: none; }

.le-split {
  position: relative;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 9vh, 112px);
}

.le-split-head {
  max-width: 100%;
}

/* Tagline sits below the compare table on the same x as the
   H1's right gutter would have been — grid mirrors the
   header track so the sub lines up with where it would have
   appeared beside the H1. */
.le-split-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
  column-gap: clamp(32px, 5vw, 80px);
}
.le-split-foot .le-split-sub {
  grid-column: 2;
}

.le-split-h {
  margin: 16px 0 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: var(--mkt-h2);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--text-primary);
  font-weight: 500;
}
.le-split-h em {
  font-style: normal;
  font-weight: 400;
  color: inherit;
}

.le-split-sub {
  margin: 0 0 8px;
  max-width: 38ch;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--text-secondary);
}

/* ── Compare table — drag-to-reveal enriched data ──────
   Single table layout (style modeled on /workflows/price-
   monitoring's .pm-hero-table) with two stacked layers:
   .le-compare-table--after holds the filled values; the
   .le-compare-table--before sits on top with em-dashes in
   the four added columns and is clipped from the left by
   the handle's position.  Drag the handle right to reveal
   the enriched values.  No accent colour on filled cells —
   the action carries the meaning. */

.le-compare {
  --reveal-x: 32%;
  position: relative;
  width: 100%;
  user-select: none;
  isolation: isolate;
  /* No clip here — the handle line extends 8px above and
     below the table.  The inner .le-compare-frame holds the
     border + rounded corners + overflow clip for the table
     stack. */
}

.le-compare-frame {
  position: relative;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-display, 20px);
  overflow: hidden;
}

.le-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-base);
  font-size: var(--mkt-body-sm);
  line-height: 1.3;
  color: var(--text-primary);
  margin: 0;
}

/* The "before" table sits on top of the "after" table.  Both
   tables share identical column count + row count so the
   layout aligns to the pixel.  The before table is clipped
   from the left by --reveal-x so dragging the handle right
   reveals the enriched cells beneath. */
.le-compare-table--after {
  position: relative;
  z-index: 1;
}
.le-compare-table--before {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--surface, #181210);
  clip-path: inset(0 0 0 var(--reveal-x));
  pointer-events: none;
  transition: clip-path 60ms linear;
}
.le-compare.is-dragging .le-compare-table--before {
  transition: none;
}

.le-compare-table thead tr {
  border-bottom: 1px solid var(--border-subtle);
}
.le-compare-table tbody tr {
  border-bottom: 1px solid var(--border-subtle);
}
.le-compare-table tbody tr:last-child {
  border-bottom: 0;
}

.le-compare-table th,
.le-compare-table td {
  padding: clamp(12px, 1.6vh, 18px) clamp(14px, 1.8vw, 22px);
  text-align: left;
  vertical-align: middle;
}

.le-compare-table th {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-tertiary);
}

.le-compare-key {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  color: var(--text-secondary);
  font-size: var(--mkt-body-xs);
  letter-spacing: -0.005em;
}

.le-compare-empty {
  color: var(--text-quaternary);
}

/* Vertical handle that the reader drags to reveal data.
   Line + knob.  Cursor ew-resize on the entire handle area
   for forgiving hit targets.  Extends 8px above and below
   the table frame so the rail reads as a control independent
   of the table edges. */
.le-compare-handle {
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: var(--reveal-x);
  width: 48px;
  transform: translateX(-50%);
  z-index: 5;
  cursor: ew-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  /* Stop the browser from interpreting touch on the handle as
     a vertical scroll gesture — without this, on phones the
     drag gets hijacked by the page scroll mid-stroke (the
     'encalla' bug Pablo flagged). */
  touch-action: none;
}
.le-compare-handle:focus-visible .le-compare-handle-knob {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.20);
}

.le-compare-handle-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--text-quaternary);
  transform: translateX(-0.5px);
}

.le-compare-handle-knob {
  position: relative;
  width: clamp(36px, 3.4vw, 48px);
  height: clamp(36px, 3.4vw, 48px);
  border-radius: 50%;
  background: var(--surface, #181210);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.6);
  transition: border-color 200ms ease, color 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.le-compare-handle-knob svg {
  width: 18px;
  height: 18px;
}
.le-compare-handle:hover .le-compare-handle-knob,
.le-compare.is-dragging .le-compare-handle-knob {
  border-color: var(--text-primary);
  color: var(--text-primary);
  transform: scale(1.06);
}

/* Subtle hint animation on first reveal — the knob pulses
   once to advertise the affordance. */
@keyframes le-compare-hint {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.08); }
}
.le-compare.is-revealed:not(.is-dragging):not(:hover) .le-compare-handle-knob {
  animation: le-compare-hint 1.6s ease-in-out 0.6s 2;
}

/* Header + foot cascade — both use data-ci-reveal. */
.le-split-head[data-ci-reveal] > *,
.le-split-foot[data-ci-reveal] > * {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(8px);
  transition:
    opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 540ms ease;
}
.le-split-head[data-ci-reveal].is-revealed > *,
.le-split-foot[data-ci-reveal].is-revealed > * {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.le-split-head[data-ci-reveal].is-revealed > *:nth-child(1) { transition-delay:   0ms; }
.le-split-head[data-ci-reveal].is-revealed > *:nth-child(2) { transition-delay: 120ms; }

/* Container fades up on IO entry. */
.le-compare {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(8px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 600ms ease;
}
.le-compare.is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@media (max-width: 900px) {
  .le-split-h { font-size: var(--mkt-h4); }
  .le-compare-table { font-size: 12px; }
  .le-compare-table th,
  .le-compare-table td { padding: 10px 12px; }
  .le-split-foot { grid-template-columns: 1fr; }
  .le-split-foot .le-split-sub { grid-column: 1; }
}

@media (max-width: 600px) {
  .le-compare-handle { width: 56px; }
  .le-compare-handle-knob { width: 38px; height: 38px; }
  .le-compare-handle-knob svg { width: 16px; height: 16px; }
}

@media (min-width: 1600px) {
  .le-split-h { font-size: 58px; }
}
@media (min-width: 1920px) {
  .le-split-h { font-size: 64px; }
}
@media (min-width: 2400px) {
  .le-split-h { font-size: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  .le-split-head[data-ci-reveal] > *,
  .le-split-foot[data-ci-reveal] > *,
  .le-compare {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .le-compare-table--before { transition: none; }
  .le-compare.is-revealed:not(.is-dragging):not(:hover) .le-compare-handle-knob {
    animation: none;
  }
}

/* ════════════════════════════════════════════════════════════
   Act 3 — Three personas, three queries.
   Editorial breather.  Vertical staircase: each persona
   indents further right, so the eye descends diagonally
   across the page as the reader passes through the three
   roles.  No chrome, no chart — pure typography.
   ════════════════════════════════════════════════════════════ */

[data-act="3"] {
  position: relative;
  padding: clamp(96px, 14vh, 160px) clamp(20px, 5vw, 80px) clamp(120px, 18vh, 200px);
}

.le-personas {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 8vh, 96px);
}

.le-personas-head {
  max-width: 720px;
}

.le-personas-h {
  margin: 16px 0 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: var(--mkt-hero);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  font-weight: 500;
}
.le-personas-h em {
  font-style: normal;
  font-weight: 400;
  color: inherit;
}

.le-personas-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 8vh, 96px);
}

.le-persona {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vh, 16px);
  max-width: 56ch;
}

/* Staircase indent — each persona shifts right by a unit so
   the eye walks diagonally down the page.  Editorial rhythm
   break vs Act 2's centered table. */
.le-persona:nth-child(1) { margin-left: 0; }
.le-persona:nth-child(2) { margin-left: clamp(40px, 12vw, 180px); }
.le-persona:nth-child(3) { margin-left: clamp(80px, 24vw, 360px); }

.le-persona-role {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-tertiary);
}

.le-persona-action {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: var(--mkt-h2);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--text-primary);
  font-weight: 500;
}
.le-persona-action code {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 2px 8px;
  vertical-align: 0.06em;
}

.le-persona-outcome {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--text-secondary);
  max-width: 48ch;
}

/* Reveal — each persona enters with fade + blur clear + lift,
   triggered by [data-ci-reveal] IO. */
.le-persona[data-ci-reveal] > *,
.le-personas-head[data-ci-reveal] > * {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(8px);
  transition:
    opacity 680ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 680ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 600ms ease;
}
.le-persona[data-ci-reveal].is-revealed > *,
.le-personas-head[data-ci-reveal].is-revealed > * {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.le-persona[data-ci-reveal].is-revealed > *:nth-child(1) { transition-delay:   0ms; }
.le-persona[data-ci-reveal].is-revealed > *:nth-child(2) { transition-delay: 120ms; }
.le-persona[data-ci-reveal].is-revealed > *:nth-child(3) { transition-delay: 260ms; }
.le-personas-head[data-ci-reveal].is-revealed > *:nth-child(1) { transition-delay:   0ms; }
.le-personas-head[data-ci-reveal].is-revealed > *:nth-child(2) { transition-delay: 120ms; }

@media (max-width: 900px) {
  
  .le-persona-action { font-size: var(--mkt-h4); }
  .le-persona:nth-child(1) { margin-left: 0; }
  .le-persona:nth-child(2) { margin-left: clamp(20px, 6vw, 40px); }
  .le-persona:nth-child(3) { margin-left: clamp(40px, 12vw, 80px); }
}

@media (max-width: 600px) {
  .le-persona { max-width: 100%; }
  .le-persona:nth-child(2),
  .le-persona:nth-child(3) { margin-left: 0; }
}

@media (min-width: 1600px) {
  .le-personas { max-width: 1640px; }
  
  .le-persona-action { font-size: 58px; }
}
@media (min-width: 1920px) {
  .le-personas { max-width: 1840px; }
  
  .le-persona-action { font-size: 64px; }
}
@media (min-width: 2400px) {
  .le-personas { max-width: 2160px; }
  
  .le-persona-action { font-size: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .le-persona[data-ci-reveal] > *,
  .le-personas-head[data-ci-reveal] > * {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════════
   Act 4 — Closer (teal band).
   Saturated cyan-6 ground, centered editorial resolution.
   Three-line H2 with italic on the middle line, CTA stack,
   cross-link to sibling spoke.  Mirrors the /workflows/
   price-monitoring closer so the section reads as one
   design language across spokes.
   ════════════════════════════════════════════════════════════ */

[data-act="4"] {
  position: relative;
  background: transparent;
  color: #1D1612;
  padding: clamp(96px, 14vh, 180px) clamp(20px, 5vw, 80px) clamp(120px, 18vh, 220px);
  display: flex;
  justify-content: center;
  /* Teal background + mesh now live on the .le-teal-band
     wrapper so Act 4 + footer share one continuous band. */
}

/* @pattern closer-footer-wrap-mesh-band START
   Canonical wrapper that holds the closer act + the site footer on one
   continuous brand surface.  Pair with closer-footer-wrap-mesh-bubbles
   (anchored below) for the animated mesh overlay.  Port verbatim,
   recolor only the `background:` value to your brand variant.  See
   docs/patterns.md → closer-footer-wrap-mesh. */
.le-teal-band {
  position: relative;
  background: #7ADAE6;
  overflow: hidden;
  isolation: isolate;
}
/* @pattern closer-footer-wrap-mesh-band END */

.le-end {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

[data-act="4"] .le-end-kicker {
  margin: 0 0 clamp(24px, 3vh, 36px);
  color: color-mix(in srgb, #1D1612 60%, transparent);
}

/* CTA button — always purple in the closer: the default teal .btn-marketing
   disappears against this teal band, so use purple-7 for brand contrast. */

.le-end-h {
  margin: 0;
  font-family: var(--font-display, "Rawest", system-ui, sans-serif);
  font-size: var(--mkt-h2);
  line-height: 1.06;
  letter-spacing: var(--tracking-dense, -0.024em);
  font-weight: 500;
  color: #1D1612;
  text-wrap: balance;
}
.le-end-h em {
  font-style: normal;
  font-weight: 500;
  color: inherit;
}

.le-end-sub {
  margin: clamp(24px, 3.2vh, 36px) 0 0;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.55;
  color: color-mix(in srgb, #1D1612 76%, transparent);
  max-width: 56ch;
  text-wrap: pretty;
}

.le-end-cta {
  margin-top: clamp(36px, 5vh, 56px);
  justify-content: center;
}

[data-act="4"] .cta-stack-tag {
  color: color-mix(in srgb, #1D1612 65%, transparent);
}

.le-end-link {
  margin-top: clamp(24px, 3.2vh, 36px);
  align-self: center;
}

/* Closer reveal — header → H2 → sub → CTA → cross-link
   stagger via [data-ci-reveal] hook. */
.le-end[data-ci-reveal] > * {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(8px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 600ms ease;
}
.le-end[data-ci-reveal].is-revealed > * {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.le-end[data-ci-reveal].is-revealed > *:nth-child(1) { transition-delay:   0ms; }
.le-end[data-ci-reveal].is-revealed > *:nth-child(2) { transition-delay: 120ms; }
.le-end[data-ci-reveal].is-revealed > *:nth-child(3) { transition-delay: 280ms; }
.le-end[data-ci-reveal].is-revealed > *:nth-child(4) { transition-delay: 400ms; }
.le-end[data-ci-reveal].is-revealed > *:nth-child(5) { transition-delay: 520ms; }
.le-end[data-ci-reveal].is-revealed > *:nth-child(6) { transition-delay: 640ms; }

/* Destinations strip — surfaces the GTM 'infrastructure
   ships to your stack' framing.  Teal-band variant: dark
   hairline borders on transparent, ink-on-teal labels. */
.le-end-dests {
  list-style: none;
  margin: clamp(28px, 4vh, 40px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
}
.le-end-dests li {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border: 1px solid color-mix(in srgb, #1D1612 22%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, #1D1612 72%, transparent);
  background: transparent;
  white-space: nowrap;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.le-end-dests li,
.le-end-dests li * { cursor: pointer; }
.le-end-dests li:hover {
  background: color-mix(in srgb, #1D1612 8%, transparent);
  border-color: color-mix(in srgb, #1D1612 38%, transparent);
  color: #1D1612;
}

/* ── Topbar adapts while Act 4's teal band covers it. ──── */

@media (max-width: 900px) {
  [data-act="4"] {
    padding: clamp(80px, 11vh, 120px) clamp(20px, 5vw, 32px) clamp(96px, 14vh, 160px);
  }
}

@media (max-width: 600px) {
  .le-end-h { font-size: var(--mkt-h4); }
}

@media (min-width: 1600px) {
  .le-end { max-width: 880px; }
  .le-end-h { font-size: 64px; }
  .le-end-sub { font-size: 19px; }
}
@media (min-width: 1920px) {
  .le-end { max-width: 1000px; }
  .le-end-h { font-size: 72px; }
  .le-end-sub { font-size: 20px; }
}
@media (min-width: 2400px) {
  .le-end { max-width: 1200px; }
  .le-end-h { font-size: 88px; }
  .le-end-sub { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .le-end[data-ci-reveal] > * {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════════
   Act 4 mesh + scroll-linked motion.
   Four blurred bubbles drift across the cyan band on
   independent loops so the closer breathes instead of sitting
   flat.  Same brand-signature mesh used on the Act 1 terminal
   bar, retuned for a larger ground surface.  Content sits
   above the mesh via z-index.
   ════════════════════════════════════════════════════════════ */
.le-end-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* contain: paint isolates repaints inside the mesh so the
     blurred bubbles don't invalidate the rest of the page when
     they animate.  Big win on integrated GPUs (Intel iMacs)
     where blur filter is expensive. */
  contain: paint;
}

/* @pattern closer-footer-wrap-mesh-bubbles START
   The 4 blurred bubble overlays that sit inside the mesh band wrapper.
   Width/height 42% × 55% + blur 72px + opacity 0.72 + GPU promotion are
   INVARIANTS — do not change.  Per-bubble position (top/left/animation)
   and per-bubble fill colour CAN be recolored per the page palette.
   See docs/patterns.md → closer-footer-wrap-mesh for the recolor table. */
.le-end-bubble {
  position: absolute;
  /* Smaller bubbles + lighter blur = drastically less GPU
     work per frame.  Was 60% × 80% with blur 120px which on a
     4K screen ended up convolving a ~1500×1000px texture per
     frame — chunky on integrated GPUs.  New numbers keep the
     visual softness without thrashing the compositor. */
  width: 42%;
  height: 55%;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.72;
  will-change: transform;
  /* Force each bubble onto its own GPU layer so the
     transform animation never touches the main paint
     pipeline.  Stops scroll jank on older hardware. */
  transform: translateZ(0);
  backface-visibility: hidden;
}

.le-end-bubble[data-bubble="1"] {
  background: #9B6FFF;
  top: -10%;
  left: -10%;
  animation: le-end-bubble-1 22s ease-in-out infinite alternate;
}
.le-end-bubble[data-bubble="2"] {
  background: #FFFFFF;
  top: 15%;
  left: 50%;
  animation: le-end-bubble-2 26s ease-in-out infinite alternate;
}
.le-end-bubble[data-bubble="3"] {
  background: #6ED49A;
  top: 40%;
  left: 5%;
  animation: le-end-bubble-3 24s ease-in-out infinite alternate;
}
.le-end-bubble[data-bubble="4"] {
  background: #F5C56A;
  top: 5%;
  left: 65%;
  opacity: 0.45;
  animation: le-end-bubble-4 30s ease-in-out infinite alternate;
}

@keyframes le-end-bubble-1 { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d( 20%, 15%, 0); } }
@keyframes le-end-bubble-2 { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(-15%, 18%, 0); } }
@keyframes le-end-bubble-3 { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d( 22%,-12%, 0); } }
@keyframes le-end-bubble-4 { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(-18%, 12%, 0); } }
/* @pattern closer-footer-wrap-mesh-bubbles END */

/* Closer content lifts subtly with scroll progress — gives
   the section a parallax beat as the reader passes through. */
.le-end {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .le-end-bubble { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   Footer in teal — continues the Act 4 band so the page
   resolves on one chord.  Only the lead-enrichment spoke
   inherits this; the rest of the site keeps the shared
   transparent footer.  Text + links + back-to-top recolor
   to warm-dark so the band reads.
   ════════════════════════════════════════════════════════════ */
/* Footer: standard dark (no gradient). Opaque warm-dark over the mesh,
   default light text. The Act 4 band above keeps the teal. */
.site-footer {
  background: var(--background);
  position: relative;
  z-index: 1;
}

/* .back-to-top now ships purple + cyan arrow from the shared
   DS (chrome.css) so no override is needed here. */

/* ══════════════════════════════════════════════════════════
   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);
}
/* Per-page rgba-white flips below. */
html:not(.dark) .ci-hero-cmd:hover,
html:not(.dark) .ci-hero-cmd:focus-visible { border-color: rgba(29, 22, 18, 0.18); }
html:not(.dark) .le-compare-handle:focus-visible .le-compare-handle-knob { box-shadow: 0 0 0 2px rgba(29, 22, 18, 0.20); }
html:not(.dark) .le-persona-action code { background: rgba(29, 22, 18, 0.08); }