@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: normal;
  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: normal;
  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 03 BU alternative — labeled summary list instead of the
   raw JSON code block.  Same widget surface (transparent bg,
   hairline white border on the purple band) but content is
   structured Key / Value rows instead of code syntax.  Forces
   a business-shaped read: "Pricing → Pro plan $14/user (+40%)"
   instead of `{"pricing": {"pro": "$14/user", "delta": "+40%"}}`. */
.ci-how-step-summary {
  list-style: none;
  margin: clamp(4px, 0.6vh, 8px) 0 0;
  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);
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ci-how-step-summary li {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  font-family: var(--font-base);
  font-size: var(--mkt-body-sm);
  line-height: 1.5;
}

.ci-how-step-summary li + li {
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ci-how-step-summary-k {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.ci-how-step-summary-v {
  color: rgba(255, 255, 255, 0.92);
}

.ci-how-step-summary-v strong {
  color: #FFFFFF;
  font-weight: 600;
}

/* 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. */

/* ════════════════════════════════════════════════════════════
   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: normal;
  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: normal;
  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: 500ms; }
.ci-end[data-ci-reveal].is-revealed > *:nth-child(6) { transition-delay: 620ms; }
.ci-end[data-ci-reveal].is-revealed > *:nth-child(7) { transition-delay: 740ms; }

/* Destinations strip — surfaces the GTM 'web data
   infrastructure ships to your stack' framing.  Dark-ground
   variant: hairline borders on transparent, secondary-text
   labels, brighter on hover. */
.ci-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;
}
.ci-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 var(--border-subtle);
  border-radius: 999px;
  color: var(--text-secondary);
  background: transparent;
  white-space: nowrap;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.ci-end-dests li,
.ci-end-dests li * { cursor: pointer; }
.ci-end-dests li:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
  color: var(--text-primary);
}

@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;
  }
}

/* ════════════════════════════════════════════════════════════
   Artifact-only hero variant — cross-spoke pattern shared with
   /workflows/lead-enrichment + /workflows/price-monitoring.
   Strips the editorial left column; the brief mockup centers
   and grows; the slash-command copy widget sits centered below.
   Existing reveal motion on .ci-brief stays, just retargeted
   onto the new layout.
   ════════════════════════════════════════════════════════════ */

.ci-hero.ci-hero--artifact-only {
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
  row-gap: clamp(28px, 4.4vh, 56px);
  justify-items: stretch;
  /* !important to guarantee the base wide-tier rule
     `.ci-hero { max-width: 1480px }` at line 496 cannot
     overshadow this when source order, specificity, or
     cache shuffling get in the way.  Width is the actual
     constraint, not max-width, so the grid track is sized
     deterministically. */
  width: min(95vw, 1320px) !important;
  max-width: none !important;
}

.ci-hero--artifact-only .ci-brief {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  font-size: var(--mkt-body);
}

.ci-hero--artifact-only .ci-brief-h {
  font-size: var(--mkt-h3);
}

.ci-hero--artifact-only .ci-brief-section-h {
  font-size: var(--mkt-body);
}

/* H1 + copy widget row beneath the brief mockup. */
.ci-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(24px, 4vw, 64px);
  align-items: center;
  width: 100%;
}

.ci-hero--artifact-only .ci-hero-h {
  margin: 0;
  font-size: var(--mkt-h2);
  line-height: 1.04;
  letter-spacing: -0.025em;
}

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

@media (max-width: 900px) {
  .ci-hero-row { grid-template-columns: 1fr; row-gap: 24px; }
  .ci-hero-cmd--below { max-width: 100%; justify-self: start; }
}

@media (min-width: 1600px) { .ci-hero.ci-hero--artifact-only { width: min(95vw, 1480px) !important; } .ci-hero--artifact-only .ci-hero-h { font-size: 68px; } }
@media (min-width: 1920px) { .ci-hero.ci-hero--artifact-only { width: min(95vw, 1680px) !important; } .ci-hero--artifact-only .ci-hero-h { font-size: 76px; } }
@media (min-width: 2400px) { .ci-hero.ci-hero--artifact-only { width: min(95vw, 1960px) !important; } .ci-hero--artifact-only .ci-hero-h { font-size: 92px; } }

/* ════════════════════════════════════════════════════════════
   Artifact-only hero — animated entrance for the brief and
   the H1 + copy widget row.  The brief currently only
   cascades its bullet lines; here we add a global fade-up +
   blur-clear so the whole artifact reads as "arriving on
   screen" instead of statically present.
   ════════════════════════════════════════════════════════════ */

/* The brief mockup as a whole — fades up with a blur clear
   the first time it enters the viewport (initBriefReveal
   toggles .is-revealed). */
.ci-hero--artifact-only .ci-brief {
  opacity: 0;
  transform: translateY(22px);
  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 620ms ease;
}
.ci-hero--artifact-only .ci-brief.is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Section headers + meta line cascade with the bullets so
   the whole brief feels alive, not just the bullet lines. */
.ci-hero--artifact-only .ci-brief-meta,
.ci-hero--artifact-only .ci-brief-h,
.ci-hero--artifact-only .ci-brief-section-h {
  opacity: 0;
  transform: translateY(8px);
  filter: blur(6px);
  transition:
    opacity 540ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 540ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 480ms ease;
}
.ci-hero--artifact-only .ci-brief.is-revealed .ci-brief-meta,
.ci-hero--artifact-only .ci-brief.is-revealed .ci-brief-h,
.ci-hero--artifact-only .ci-brief.is-revealed .ci-brief-section-h {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.ci-hero--artifact-only .ci-brief.is-revealed .ci-brief-meta                                  { transition-delay: 160ms; }
.ci-hero--artifact-only .ci-brief.is-revealed .ci-brief-h                                     { transition-delay: 240ms; }
.ci-hero--artifact-only .ci-brief.is-revealed .ci-brief-section:nth-child(2) .ci-brief-section-h { transition-delay: 360ms; }
.ci-hero--artifact-only .ci-brief.is-revealed .ci-brief-section:nth-child(3) .ci-brief-section-h { transition-delay: 580ms; }
.ci-hero--artifact-only .ci-brief.is-revealed .ci-brief-section:nth-child(4) .ci-brief-section-h { transition-delay: 800ms; }

/* H1 + copy widget row — fade up + blur clear with stagger
   between H1 and pill.  Uses the shared [data-ci-reveal] hook
   so the existing initRevealOnEnter IIFE handles the trigger. */
.ci-hero-row[data-ci-reveal] > * {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(8px);
  transition:
    opacity 640ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 640ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 540ms ease;
}
.ci-hero-row[data-ci-reveal].is-revealed > * {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.ci-hero-row[data-ci-reveal].is-revealed > *:nth-child(1) { transition-delay:   0ms; }
.ci-hero-row[data-ci-reveal].is-revealed > *:nth-child(2) { transition-delay: 140ms; }

@media (prefers-reduced-motion: reduce) {
  .ci-hero--artifact-only .ci-brief,
  .ci-hero--artifact-only .ci-brief-meta,
  .ci-hero--artifact-only .ci-brief-h,
  .ci-hero--artifact-only .ci-brief-section-h,
  .ci-hero-row[data-ci-reveal] > * {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════════
   Hero width unification.  The base [data-act="1"] rule has
   horizontal padding from when the hero was an asymmetric
   2-col with editorial framing.  In artifact-only mode the
   .ci-hero handles its own max-width centering, so we zero
   out the section's horizontal padding to let the artifact
   reach the same visual size as the terminal in /workflows/
   lead-enrichment and the demo in /workflows/price-monitoring.
   Vertical padding stays from the base rule.

   Unconditional override (no :has()) for broader browser
   support — the section only renders artifact-only mode now.
   ════════════════════════════════════════════════════════════ */
[data-act="1"] {
  padding-left: 0;
  padding-right: 0;
}

/* ══════════════════════════════════════════════════════════
   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) .ci-end-dests li:hover { background: rgba(29, 22, 18, 0.04); }

/* Destination pills (.ci-how-dests > .pill) sit on the SATURATED
   purple band — theme-invariant chrome.  The DS .pill BU override
   (components.css) defaults text + bg to warm-dark on the assumption
   the pill lives on a light page bg.  On the purple band that
   produces dark-on-purple = unreadable (Pablo 2026-06-15).
   Force white-on-purple chrome with the same white-alpha tokens
   the page already declares for the dark-mode equivalent. */