@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/price-monitoring — Spoke page.

   First workflow spoke shipped.  WIP: Act 1 hero styled
   first; Acts 2 (how-it-works), 3 (output), 4 (closer) land
   in follow-up commits.
─────────────────────────────────────────────────────────── */

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

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

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

   Asymmetric 2-col split: editorial column on the left
   (kicker · H1 · sub · slash-command · CTA), visual mock on
   the right (prices table + Slack alert).  Single-screen —
   no sticky stage — so the act reads as one editorial spread
   distinct from the master /workflows hero (which is sticky
   scroll).
─────────────────────────────────────────────────────────── */

[data-act="1"] {
  position: relative;
  /* Sticky scroll stage: 360vh total → 260vh of scroll budget
     across 3 verticals (~87vh each).  The hero pins to the
     viewport while the right-side demo cycles through coffee
     → SaaS → electronics. */
  min-height: 360vh;
  background: var(--background);
}

.pm-hero {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(96px, 13vh, 140px) clamp(20px, 5vw, 80px) clamp(72px, 10vh, 120px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

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

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

.pm-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;
}

.pm-hero-h em {
  font-style: normal;
  font-weight: 500;
  color: inherit;
}

.pm-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 button that copies the
   command to clipboard.  No-fill pattern matching the
   master /workflows duality widget: transparent bg, hairline
   --border-subtle, purple→teal ::before top-edge
   illumination that fades in on hover. */
.pm-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;
  /* Clip the ::before top-illumination to the rounded corners.
     Same pattern as .mc-setup-card / .sb-fw-card — without
     this the gradient line stays rectangular and pokes outside
     the curve. */
  overflow: hidden;
  transition: border-color 220ms ease;
}

.pm-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;
}

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

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

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

.pm-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);
}

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

.pm-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;
}

.pm-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;
}

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

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

/* Cursor portal — cmd button + descendants. */
.pm-hero-cmd,
.pm-hero-cmd * { cursor: pointer; }

/* ── Right column — visual mock ───────────────────────
   Prices table with a Slack-style alert card overlapping
   the top-right corner.  Editorial proof of the workflow's
   outcome. */

.pm-hero-demo {
  position: relative;
  min-width: 0;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vh, 22px);
}

/* "Watching:" context line — small mono caps annotation that
   names the active vertical above the table.  Updates with
   the scroll-driven cycle. */
.pm-hero-demo-context {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}

.pm-hero-demo-context-key {
  color: var(--text-quaternary);
}

.pm-hero-demo-context-value {
  color: var(--text-secondary);
  transition: opacity 220ms ease;
}

/* Swap effect — blur + Y-translate + opacity together, so
   the change between verticals reads as a real motion event
   rather than a flat crossfade.  Staggered slightly across
   table rows for a cascade feel. */
.pm-hero-table-body .pm-hero-table-row,
.pm-hero-alert-body,
.pm-hero-demo-context-value {
  transition:
    filter 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 320ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: filter, transform, opacity;
}

.pm-hero-table-body .pm-hero-table-row:nth-child(1) { transition-delay: 0ms; }
.pm-hero-table-body .pm-hero-table-row:nth-child(2) { transition-delay: 30ms; }
.pm-hero-table-body .pm-hero-table-row:nth-child(3) { transition-delay: 60ms; }
.pm-hero-table-body .pm-hero-table-row:nth-child(4) { transition-delay: 90ms; }
.pm-hero-table-body .pm-hero-table-row:nth-child(5) { transition-delay: 120ms; }

.pm-hero-demo.is-swapping .pm-hero-table-body .pm-hero-table-row,
.pm-hero-demo.is-swapping .pm-hero-alert-body,
.pm-hero-demo.is-swapping .pm-hero-demo-context-value {
  filter: blur(10px);
  transform: translateY(8px);
  opacity: 0;
}

.pm-hero-table {
  position: relative;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-display, 20px);
  padding: clamp(16px, 2vh, 22px) clamp(16px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pm-hero-table-head {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(10px, 1.2vw, 16px);
  padding: 0 0 clamp(12px, 1.6vh, 16px);
  border-bottom: 1px solid var(--border-subtle);
}

.pm-hero-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);
}

.pm-hero-table-th--delta { text-align: right; }

.pm-hero-table-body {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pm-hero-table-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(10px, 1.2vw, 16px);
  padding: clamp(10px, 1.4vh, 14px) 0;
  border-bottom: 1px solid var(--border-subtle);
  align-items: baseline;
}

.pm-hero-table-row:last-child { border-bottom: 0; }

.pm-hero-table-cell {
  font-family: var(--font-base);
  font-size: var(--mkt-body-sm);
  line-height: 1.3;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}

.pm-hero-table-cell--mono {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  color: var(--text-tertiary);
  font-size: var(--mkt-body-xs);
  letter-spacing: -0.005em;
}

.pm-hero-table-cell--price {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}

.pm-hero-table-cell--delta {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-weight: 600;
  font-size: var(--mkt-body-xs);
  letter-spacing: 0.02em;
  color: var(--text-quaternary);
  text-align: right;
}

.pm-hero-table-cell--delta.is-down { color: var(--zen-cyan-6, #7ADAE6); }
.pm-hero-table-cell--delta.is-up   { color: var(--zen-purple-7, #7C4FE8); }

/* Slack-style alert card overlapping a corner of the table.
   Position varies per vertical — the popover lands in a
   different corner each time so the demo feels alive, not
   templated.  JS sets data-pos on each idx change. */
.pm-hero-alert {
  position: absolute;
  width: clamp(260px, 28vw, 340px);
  padding: clamp(12px, 1.6vh, 16px) clamp(14px, 1.6vw, 18px);
  /* a floating toast over the table: needs an opaque fill so the rows behind
     it don't bleed through (transparent here read as broken). */
  background: var(--background);
  border: 1px solid color-mix(in srgb, var(--zen-purple-7, #7C4FE8) 35%, var(--border-subtle));
  border-radius: var(--radius-display, 20px);
  box-shadow: 0 24px 56px -16px rgba(0, 0, 0, 0.55);
  z-index: 2;
  transition:
    top 420ms cubic-bezier(0.22, 1, 0.36, 1),
    right 420ms cubic-bezier(0.22, 1, 0.36, 1),
    bottom 420ms cubic-bezier(0.22, 1, 0.36, 1),
    left 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Default + top-right (vertical 0 — coffee). */
.pm-hero-alert,
.pm-hero-alert[data-pos="tr"] {
  top: -28px;
  right: -20px;
  bottom: auto;
  left: auto;
}

/* Bottom-left (vertical 1 — SaaS).  Pops out the
   opposite corner so the user knows the demo has shifted. */
.pm-hero-alert[data-pos="bl"] {
  top: auto;
  right: auto;
  bottom: -28px;
  left: -20px;
}

/* Bottom-right (vertical 2 — electronics). */
.pm-hero-alert[data-pos="br"] {
  top: auto;
  right: -20px;
  bottom: -28px;
  left: auto;
}

.pm-hero-alert-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.pm-hero-alert-channel {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--zen-purple-7, #7C4FE8);
  font-weight: 600;
}

.pm-hero-alert-time {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-quaternary);
}

.pm-hero-alert-body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--mkt-body-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}

.pm-hero-alert-body strong {
  color: var(--text-primary);
  font-weight: 600;
}

.pm-hero-alert-body code {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 0.92em;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: -0.005em;
}

/* ── Mobile responsive ────────────────────────────────
   At <=1024px the sticky stage releases — the section
   collapses to its content size and the hero flows normally
   so the 3-vertical cycle becomes a static first-vertical
   render.  Acceptable trade-off: scroll-driven cycling
   isn't a fit for narrow viewports anyway. */

@media (max-width: 1024px) {
  [data-act="1"] {
    min-height: auto;
    padding: clamp(96px, 13vh, 140px) clamp(20px, 5vw, 80px) clamp(72px, 10vh, 120px);
  }
  .pm-hero {
    position: static;
    height: auto;
    padding: 0;
    grid-template-columns: 1fr;
    row-gap: clamp(48px, 7vh, 72px);
  }
  /* Override .pm-hero-alert[data-pos="X"] specificity so the
     mobile placement always wins.  Use data-pos exists
     selector to match equal specificity. */
  .pm-hero-alert,
  .pm-hero-alert[data-pos] {
    top: -36px;
    right: 0;
    bottom: auto;
    left: auto;
    width: clamp(240px, 60vw, 320px);
  }
}

@media (max-width: 600px) {
  [data-act="1"] {
    padding: clamp(96px, 13vh, 140px) clamp(18px, 5vw, 32px) clamp(56px, 8vh, 80px);
  }
  .pm-hero-h {
    font-size: var(--mkt-h4);
  }
  .pm-hero-alert,
  .pm-hero-alert[data-pos] {
    position: relative;
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
    width: 100%;
    margin-bottom: 16px;
  }
}

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

@media (min-width: 1600px) {
  .pm-hero { max-width: 1480px; }
  .pm-hero-h { font-size: 56px; }
  .pm-hero-sub { font-size: 19px; }
  .pm-hero-cmd-code { font-size: 19px; }
  .pm-hero-table-cell { font-size: 16px; }
  .pm-hero-table-cell--mono,
  .pm-hero-table-cell--delta { font-size: 14px; }
}

@media (min-width: 1920px) {
  .pm-hero { max-width: 1680px; }
  .pm-hero-h { font-size: 64px; }
  .pm-hero-sub { font-size: 20px; }
  .pm-hero-cmd-code { font-size: 21px; }
  .pm-hero-table-cell { font-size: 17px; }
}

@media (min-width: 2400px) {
  .pm-hero { max-width: 1960px; }
  .pm-hero-h { font-size: 84px; }
  .pm-hero-sub { font-size: 23px; max-width: 48ch; }
  .pm-hero-cmd-code { font-size: 24px; }
  .pm-hero-table-cell { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .pm-hero-cmd,
  .pm-hero-cmd::before,
  .pm-hero-cmd-hint {
    transition: none;
  }
}

/* ──────────────────────────────────────────────────────────
   Act 2 — How it works (editorial staircase).

   4 steps zigzag across a 2-col grid, connected by a hairline
   down the middle column gap.  Each step carries a different
   visual proof (URL list, CLI, diff, destination chips) so
   the pipeline reads as a real sequence, not a templated
   card grid.  Reveal on scroll.
─────────────────────────────────────────────────────────── */

[data-act="2"] {
  position: relative;
  background: var(--background);
  padding: clamp(96px, 14vh, 180px) clamp(20px, 5vw, 80px) clamp(120px, 18vh, 220px);
}

.pm-how {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.pm-how-head {
  max-width: 720px;
  margin: 0 0 clamp(56px, 8vh, 96px);
}

.pm-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: var(--text-primary);
  text-wrap: balance;
}

.pm-how-h em {
  font-style: normal;
  font-weight: 500;
  color: inherit;
}

.pm-how-sub {
  margin: clamp(16px, 2.2vh, 24px) 0 0;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.55;
  color: var(--text-secondary);
  text-wrap: pretty;
  max-width: 580px;
}

/* ── Staircase grid ───────────────────────────────────── */

.pm-how-steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(40px, 5vw, 96px);
  row-gap: clamp(56px, 8vh, 88px);
}

/* Hairline down the column gap — the spine that ties the
   alternating steps together. */
.pm-how-steps::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border-subtle);
  transform: translateX(-0.5px);
  pointer-events: none;
}

.pm-how-step {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.8vh, 18px);
  align-items: flex-start;
  text-align: left;
  min-width: 0;
  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);
}

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

.pm-how-step--left  { grid-column: 1; }
.pm-how-step--right { grid-column: 2; }

/* Step number — same format as .wf-catalog-n / .ag-compose-n
   across the site: mono caps, muted text-quaternary, light
   tracking.  No accent colour. */
.pm-how-step-n {
  margin: 0;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--text-quaternary);
}

.pm-how-step-body {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vh, 16px);
  width: 100%;
}

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

.pm-how-step-p {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--mkt-body-sm);
  line-height: 1.55;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.pm-how-step-p code {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 0.92em;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: -0.005em;
}

/* Code blocks per step — transparent fill, hairline border,
   mono content, no horizontal scroll (lines are short
   enough). */
.pm-how-step-code {
  margin: clamp(4px, 0.6vh, 8px) 0 0;
  padding: clamp(12px, 1.6vh, 16px) clamp(14px, 1.4vw, 18px);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-default, 12px);
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: var(--mkt-body-xs);
  line-height: 1.6;
  color: var(--text-secondary);
  width: 100%;
  overflow-x: clip;
}

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

.pm-how-step-prompt {
  color: var(--zen-purple-7, #7C4FE8);
  font-weight: 600;
  margin-right: 6px;
}

/* Step 02 BU alternative — labeled scheduler summary instead of
   the CLI command block.  Same border + radius surface; rows are
   Cadence / Pages / Output so a non-dev reader sees a real
   schedule frame instead of `zenrows extract --schema`. */
.pm-how-step-summary {
  list-style: none;
  margin: clamp(4px, 0.6vh, 8px) 0 0;
  padding: clamp(12px, 1.6vh, 16px) clamp(14px, 1.4vw, 18px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-default, 12px);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pm-how-step-summary li {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  font-family: var(--font-base);
  font-size: clamp(13px, 0.95vw, 14.5px);
  line-height: 1.5;
}

.pm-how-step-summary li + li {
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}

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

.pm-how-step-summary-v { color: var(--text-secondary); }
.pm-how-step-summary-v strong { color: var(--text-primary); font-weight: 600; }

/* Step 03 — diff line.  Transparent panel, hairline border,
   before / arrow / after / delta in one row. */
.pm-how-diff {
  margin-top: clamp(4px, 0.6vh, 8px);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: clamp(8px, 1vw, 14px);
  padding: clamp(12px, 1.6vh, 16px) clamp(14px, 1.4vw, 18px);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-default, 12px);
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: var(--mkt-body-sm);
  width: 100%;
}

.pm-how-diff-sku    { color: var(--text-tertiary); }
.pm-how-diff-before {
  color: var(--text-tertiary);
  text-decoration: line-through;
  text-decoration-color: var(--text-quaternary);
}
.pm-how-diff-arrow  { color: var(--text-quaternary); font-weight: 400; }
.pm-how-diff-after  { color: var(--text-primary); font-weight: 600; }
.pm-how-diff-delta  {
  color: var(--zen-cyan-6, #7ADAE6);
  font-weight: 600;
  margin-left: auto;
}

/* Step 04 — destination chips.  Uses the shared .pill rail
   with --icon-always so the favicons are visible at rest. */
.pm-how-dests {
  margin-top: clamp(4px, 0.6vh, 8px);
}

/* ── Mobile + tablet ──────────────────────────────────
   Below 900px the zigzag collapses to a single left-aligned
   column, the spine hairline shifts to the left edge, and
   each step gets a small left padding so it sits clear of
   the spine. */
@media (max-width: 900px) {
  .pm-how-steps {
    grid-template-columns: 1fr;
    row-gap: clamp(40px, 6vh, 64px);
  }
  .pm-how-steps::before {
    left: clamp(12px, 3vw, 20px);
    transform: none;
  }
  .pm-how-step--left,
  .pm-how-step--right {
    grid-column: 1;
    padding-left: clamp(28px, 6vw, 44px);
  }
  .pm-how-diff-delta {
    margin-left: 0;
  }
}

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

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

@media (min-width: 1600px) {
  .pm-how { max-width: 1320px; }
  .pm-how-h { font-size: 60px; }
  .pm-how-sub { font-size: 19px; max-width: 640px; }
  .pm-how-step-h { font-size: 34px; }
  .pm-how-step-p { font-size: 17px; }
  .pm-how-step-code { font-size: 15px; }
  .pm-how-diff { font-size: 16px; }
}

@media (min-width: 1920px) {
  .pm-how { max-width: 1500px; }
  .pm-how-h { font-size: 68px; }
  .pm-how-sub { font-size: 20px; }
  .pm-how-step-h { font-size: 38px; }
  .pm-how-step-p { font-size: 18px; }
  .pm-how-step-code { font-size: 16px; }
  .pm-how-diff { font-size: 17px; }
}

@media (min-width: 2400px) {
  .pm-how { max-width: 1780px; }
  .pm-how-h { font-size: 84px; }
  .pm-how-sub { font-size: 23px; max-width: 740px; }
  .pm-how-step-h { font-size: 48px; }
  .pm-how-step-p { font-size: 20px; }
  .pm-how-step-code { font-size: 18px; }
  .pm-how-diff { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .pm-how-step {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ──────────────────────────────────────────────────────────
   Act 3 — Yours to query (teal band, off-axis).

   Sticky 100vh frame inside a 220vh stage on saturated teal.
   Bloom curtain enters from the bottom-left (variety from
   /agents Act 3's top-right and /agents/workflows Act 2's
   top-left).  Composition breaks the centred / left-anchored
   pattern of the earlier acts on this page: 4 zones placed
   off-axis (top-left kicker · top-right H2 · middle-left SQL
   · middle-right table · bottom-left alert).

   Scroll progress drives the bloom AND a row-by-row reveal
   of the warehouse rows + the alert at the end.  Text in
   #1D1612 on the teal canvas.
─────────────────────────────────────────────────────────── */

[data-act="3"] {
  position: relative;
  isolation: isolate;
  overflow: clip;
  /* Sticky stage: 220vh total → 120vh of scroll budget.
     Enough room for 5 row reveals + the alert at the end. */
  min-height: 220vh;
  background: var(--background);
  color: #1D1612;
}

/* Bloom curtain — scroll-linked.  workflows-style: JS rAF
   updates --bloom (0..1) and the clip-path circle radius
   interpolates from 0 to 150%. */
.pm-warehouse-curtain {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #7ADAE6;
  /* Bottom-left anchor — mirrors /agents Act 3's top-right
     bloom for variety across the band catalog. */
  clip-path: circle(calc(var(--bloom, 0) * 150%) at 6% 100%);
  pointer-events: none;
}

.pm-warehouse {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 100vh;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(96px, 13vh, 140px) clamp(20px, 5vw, 80px) clamp(72px, 10vh, 120px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  grid-template-rows: auto auto 1fr auto;
  column-gap: clamp(32px, 4vw, 64px);
  row-gap: clamp(20px, 2.6vh, 32px);
  align-items: start;
}

/* Eyebrow on teal — muted #1D1612 (matches the band-act
   recipe). */
[data-act="3"] .pm-warehouse-kicker {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  margin: 0;
  color: color-mix(in srgb, #1D1612 60%, transparent);
}

/* H2 — top-right, italic mark on the schedule beat. */
.pm-warehouse-h {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  justify-self: end;
  text-align: right;
  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;
  max-width: 14ch;
}

.pm-warehouse-h em {
  font-style: normal;
  font-weight: 500;
  color: inherit;
}

/* SQL block — middle-left.  Transparent fill on the teal
   band so the band shows through; hairline border in
   #1D1612 alpha. */
.pm-warehouse-sql {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
  margin: 0;
  padding: clamp(16px, 2vh, 22px) clamp(18px, 1.8vw, 24px);
  background: transparent;
  border: 1px solid color-mix(in srgb, #1D1612 22%, transparent);
  border-radius: var(--radius-default, 12px);
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: var(--mkt-body-xs);
  line-height: 1.7;
  color: #1D1612;
  width: 100%;
  max-width: 460px;
  overflow-x: clip;
}

.pm-warehouse-sql code {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  color: color-mix(in srgb, #1D1612 76%, transparent);
}

.pm-warehouse-sql-k {
  color: var(--zen-purple-7, #7C4FE8);
  font-weight: 600;
}

.pm-warehouse-sql-n {
  color: #1D1612;
  font-weight: 600;
}

/* Warehouse table — middle-right.  Wider than the SQL,
   takes the visual weight.  Transparent fill, hairline
   border, 5 rows that progressively reveal. */
.pm-warehouse-table {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  width: 100%;
  border: 1px solid color-mix(in srgb, #1D1612 22%, transparent);
  border-radius: var(--radius-display, 20px);
  padding: clamp(16px, 2vh, 22px) clamp(16px, 2vw, 24px);
  background: transparent;
}

.pm-warehouse-table-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 0.9fr);
  column-gap: clamp(8px, 1vw, 14px);
  padding: 0 0 clamp(10px, 1.4vh, 14px);
  border-bottom: 1px solid color-mix(in srgb, #1D1612 18%, transparent);
}

.pm-warehouse-table-th {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: color-mix(in srgb, #1D1612 55%, transparent);
}

.pm-warehouse-table-th--delta { text-align: right; }

.pm-warehouse-table-body {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pm-warehouse-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 0.9fr);
  column-gap: clamp(8px, 1vw, 14px);
  padding: clamp(10px, 1.4vh, 14px) 0;
  border-bottom: 1px solid color-mix(in srgb, #1D1612 14%, transparent);
  align-items: baseline;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 480ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pm-warehouse-row:last-child { border-bottom: 0; }

.pm-warehouse-row.is-revealed {
  opacity: 1;
  transform: none;
}

.pm-warehouse-cell {
  font-family: var(--font-base);
  font-size: var(--mkt-body-xs);
  line-height: 1.3;
  color: #1D1612;
  letter-spacing: -0.005em;
  word-break: break-word;
}

.pm-warehouse-cell--time,
.pm-warehouse-cell--sku {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: clamp(11px, 0.82vw, 12.5px);
  color: color-mix(in srgb, #1D1612 70%, transparent);
}

.pm-warehouse-cell--price {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-weight: 600;
}

.pm-warehouse-cell--delta {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-weight: 600;
  font-size: clamp(11px, 0.82vw, 12.5px);
  text-align: right;
  color: var(--zen-purple-7, #7C4FE8);
}

/* Slack alert — bottom-left, off-axis from the main flow.
   Reveals at the end of the scroll progress. */
.pm-warehouse-alert {
  grid-column: 1;
  grid-row: 4;
  justify-self: start;
  width: clamp(260px, 28vw, 340px);
  padding: clamp(12px, 1.6vh, 16px) clamp(14px, 1.6vw, 18px);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--zen-purple-7, #7C4FE8) 50%, transparent);
  border-radius: var(--radius-display, 20px);
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 560ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pm-warehouse-alert.is-revealed {
  opacity: 1;
  transform: none;
}

.pm-warehouse-alert-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.pm-warehouse-alert-channel {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--zen-purple-7, #7C4FE8);
  font-weight: 600;
}

.pm-warehouse-alert-time {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: color-mix(in srgb, #1D1612 55%, transparent);
}

.pm-warehouse-alert-body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--mkt-body-sm);
  line-height: 1.5;
  color: color-mix(in srgb, #1D1612 80%, transparent);
}

.pm-warehouse-alert-body strong {
  color: #1D1612;
  font-weight: 700;
}

.pm-warehouse-alert-body code {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 0.92em;
  color: #1D1612;
  background: color-mix(in srgb, #1D1612 8%, transparent);
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: -0.005em;
}

/* ── Mobile + tablet ───────────────────────────────────
   Below 1024px the sticky stage releases — content flows
   in a single column, the bloom is painted flat. */
@media (max-width: 1024px) {
  [data-act="3"] {
    min-height: auto;
  }
  .pm-warehouse {
    position: static;
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: clamp(20px, 3vh, 32px);
  }
  .pm-warehouse-kicker,
  .pm-warehouse-h,
  .pm-warehouse-sql,
  .pm-warehouse-table,
  .pm-warehouse-alert {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    align-self: auto;
    text-align: left;
    max-width: 100%;
  }
  .pm-warehouse-curtain {
    clip-path: none;
    background: #7ADAE6;
  }
}

@media (max-width: 600px) {
  .pm-warehouse-h {
    font-size: var(--mkt-h4);
    max-width: 100%;
  }
  /* Drop the time column on very narrow viewports — keep
     competitor / sku / price / delta. */
  .pm-warehouse-table-head,
  .pm-warehouse-row {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 0.9fr);
  }
  .pm-warehouse-table-head .pm-warehouse-table-th:first-child,
  .pm-warehouse-row .pm-warehouse-cell--time {
    display: none;
  }
}

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

@media (min-width: 1600px) {
  .pm-warehouse { max-width: 1480px; }
  .pm-warehouse-h { font-size: 60px; }
  .pm-warehouse-sql { font-size: 15px; max-width: 520px; }
  .pm-warehouse-cell { font-size: 15px; }
}

@media (min-width: 1920px) {
  .pm-warehouse { max-width: 1680px; }
  .pm-warehouse-h { font-size: 68px; }
  .pm-warehouse-sql { font-size: 16px; max-width: 580px; }
  .pm-warehouse-cell { font-size: 16px; }
}

@media (min-width: 2400px) {
  .pm-warehouse { max-width: 1960px; }
  .pm-warehouse-h { font-size: 84px; }
  .pm-warehouse-sql { font-size: 18px; max-width: 680px; }
  .pm-warehouse-cell { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .pm-warehouse-row,
  .pm-warehouse-alert {
    opacity: 1;
    transform: none;
    transition: none;
  }
  [data-act="3"] .pm-warehouse-curtain {
    clip-path: circle(150% at 6% 100%);
  }
}

/* ──────────────────────────────────────────────────────────
   Act 4 — Closer (teal flat, continues the band).

   Centered editorial resolution.  Acts 1-3 broke alignment
   three different ways; the closer lands centered so the
   reader has one clear focal point for the CTA.  Teal flows
   in from Act 3 (no second bloom).
─────────────────────────────────────────────────────────── */

[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 .pm-teal-band
     wrapper around Act 4 + footer so they share one
     continuous band, same as /workflows/lead-enrichment. */
}

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

[data-act="4"] .pm-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. */

.pm-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;
}

.pm-end-h em {
  font-style: normal;
  font-weight: 500;
  color: inherit;
}

.pm-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;
}

/* Destinations strip — surfaces the GTM 'infrastructure
   ships to your stack' framing.  Teal-band variant: dark
   hairline borders on transparent, ink-on-teal labels. */
.pm-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;
}
.pm-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;
}
.pm-end-dests li,
.pm-end-dests li * { cursor: pointer; }
.pm-end-dests li:hover {
  background: color-mix(in srgb, #1D1612 8%, transparent);
  border-color: color-mix(in srgb, #1D1612 38%, transparent);
  color: #1D1612;
}

.pm-end-cta {
  margin-top: clamp(28px, 4vh, 40px);
  justify-content: center;
}

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

/* Cross-link to the buyer-facing twin (/solutions/pricing-intelligence) */
.pm-end-x { margin-top: clamp(22px, 3vh, 34px); }


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

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

@media (max-width: 600px) {
  .pm-end-h {
    font-size: var(--mkt-h4);
  }
  /* long cross-link: block + text-decoration so the rule hugs the wrapped
     words and the arrow stays attached. */
  .pm-end-x {
    display: block; text-align: center; border-bottom: none; padding-bottom: 0;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
    text-decoration-color: color-mix(in srgb, #1D1612 30%, transparent);
  }
  .pm-end-x:hover { text-decoration-color: #7C4FE8; }
}

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

@media (min-width: 1600px) {
  .pm-end { max-width: 880px; }
  .pm-end-h { font-size: 64px; }
  .pm-end-sub { font-size: 19px; }
}

@media (min-width: 1920px) {
  .pm-end { max-width: 1000px; }
  .pm-end-h { font-size: 72px; }
  .pm-end-sub { font-size: 20px; }
}

@media (min-width: 2400px) {
  .pm-end { max-width: 1180px; }
  .pm-end-h { font-size: 92px; }
  .pm-end-sub { font-size: 23px; }
}

/* ── Topbar adapts to teal while Act 3 OR Act 4 covers the
   topbar slot — same is-on-teal rules used elsewhere. */

/* ════════════════════════════════════════════════════════════
   Artifact-only hero variant — cross-spoke pattern shared with
   /workflows/lead-enrichment + /workflows/competitor-intel.
   Single column: the prices table + Slack alert centered and
   sized larger, slash-command copy widget below.  Sticky
   scroll behaviour preserved so the demo still cycles through
   three verticals as the reader scrolls.
   ════════════════════════════════════════════════════════════ */

.pm-hero.pm-hero--artifact-only {
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
  row-gap: clamp(28px, 4.4vh, 56px);
  justify-items: stretch;
  max-width: min(95vw, 1320px);
  /* Zero out horizontal padding so the demo reaches the same
     visual width as the heroes in /workflows/lead-enrichment
     and /workflows/competitor-intel.  Vertical padding kept
     from the base rule. */
  padding-left: 0;
  padding-right: 0;
}

.pm-hero--artifact-only .pm-hero-demo {
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

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

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

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

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

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

/* ════════════════════════════════════════════════════════════
   Teal mesh — Act 4 closer + footer.
   Same drifting four-bubble recipe used on /workflows/lead-
   enrichment's closer.  Act 4 and the footer host their own
   mesh containers with identical bubble configurations so the
   teal band reads as one continuous gradient surface.  Act 3
   keeps its flat-teal bloom curtain (intermediate beat, not
   a closer).
   ════════════════════════════════════════════════════════════ */

.pm-end-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: paint;
}

.pm-end-bubble {
  position: absolute;
  width: 42%;
  height: 55%;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.72;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

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

@keyframes pm-end-bubble-1 { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d( 20%, 15%, 0); } }
@keyframes pm-end-bubble-2 { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(-15%, 18%, 0); } }
@keyframes pm-end-bubble-3 { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d( 22%,-12%, 0); } }
@keyframes pm-end-bubble-4 { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(-18%, 12%, 0); } }

/* Teal band wrapper — holds the cyan-6 ground + the mesh
   gradient so Act 4 and the footer share one continuous
   surface.  Both children render transparent so the mesh
   below shows through both seamlessly.  Same pattern as
   /workflows/lead-enrichment. */
.pm-teal-band {
  position: relative;
  background: #7ADAE6;
  overflow: hidden;
  isolation: isolate;
}
.pm-teal-band > .pm-end-mesh { z-index: 0; }

[data-act="4"] .pm-end {
  position: relative;
  z-index: 1;
}

/* Footer is the standard dark footer (no gradient): an opaque warm-dark
   block over the mesh, with the default light text. Act 4 above keeps the teal. */
.site-footer {
  position: relative;
  background: var(--background);
  z-index: 1;
}
/* .back-to-top now ships purple + cyan arrow from the shared
   DS (chrome.css) so no override is needed here. */

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

/* ════════════════════════════════════════════════════════════
   Act 3 — on dark ground (teal removed).
   The act used to live on the teal bloom band with all
   content tinted warm-dark for that surface.  Without the
   band, flip every warm-dark colour back to the dark-theme
   text tokens so the section reads on the page's normal
   dark ground.
   ════════════════════════════════════════════════════════════ */
[data-act="3"] {
  color: var(--text-primary);
}
[data-act="3"] .pm-warehouse-kicker {
  color: var(--text-tertiary);
}
.pm-warehouse-h {
  color: var(--text-primary);
}
.pm-warehouse-sql {
  border-color: var(--border-subtle);
  color: var(--text-primary);
}
.pm-warehouse-sql code {
  color: var(--text-secondary);
}
.pm-warehouse-sql-n {
  color: var(--text-primary);
}
.pm-warehouse-table {
  border-color: var(--border-subtle);
}
.pm-warehouse-table-head {
  border-bottom-color: var(--border-subtle);
}
.pm-warehouse-table-th {
  color: var(--text-tertiary);
}
.pm-warehouse-row {
  border-bottom-color: var(--border-subtle);
}
.pm-warehouse-cell {
  color: var(--text-primary);
}
.pm-warehouse-cell--time,
.pm-warehouse-cell--sku {
  color: var(--text-tertiary);
}
.pm-warehouse-alert-time {
  color: var(--text-tertiary);
}
.pm-warehouse-alert-body {
  color: var(--text-secondary);
}
.pm-warehouse-alert-body strong {
  color: var(--text-primary);
}
.pm-warehouse-alert-body code {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}

/* ══════════════════════════════════════════════════════════
   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) .pm-hero-cmd:hover,
html:not(.dark) .pm-hero-cmd:focus-visible { border-color: rgba(29, 22, 18, 0.18); }
html:not(.dark) .pm-warehouse-alert-body code { background: rgba(29, 22, 18, 0.08); }