/*
 * /pricing — AI Web Platform default + Infrastructure secondary.
 *
 * Per CEO doc:
 *   Simple by default. Powerful when needed.
 *   Outcome-priced at the top. Infrastructure-controlled
 *   underneath.
 *
 * Act 1 lands the table immediately — no long hero between
 * the topbar and the cards.  This page is a decision frame
 * loaded with behavioral design: Launch is the visual anchor
 * (badge + brand-purple border + scale + bloom), Annual is
 * the default-selected toggle (anchor higher-commit), and
 * each card's inclusion list reads as what the plan UNLOCKS
 * (loss-aversion framing).
 *
 * Universal chrome lives in ../_shared/chrome.css.
 */

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

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

/* Cursor portal scope — interactive widgets only: the two
   tab buttons, the two billing-toggle options, and every
   plan CTA.  Native hand stays on the topbar links + card
   anchors that navigate to app.zenrows.com. */
.back-to-top, .back-to-top *,
.pr-calc-sheet, .pr-calc-sheet * { cursor: pointer; }

/* ───────────────────────────────────────────────────────────
   Act 1 — Pricing table.

   Decision frame above the fold:
     · Tight editorial header (kicker + H1 + sub) ~ small
     · Tabs + billing toggle on the same row
     · 6 plan cards in a row at desktop, Launch featured
─────────────────────────────────────────────────────────── */

.pr-act-1 {
  position: relative;
  background: var(--background);
  color: var(--text-primary);
  padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 56px) clamp(64px, 8vh, 120px);
}

.pr-act-1-frame {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.4vw, 48px);
}

/* ── Editorial header ─────────────────────────────────── */
.pr-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(10px, 1.2vw, 18px);
}

.pr-head-kicker { margin: 0; }

.pr-head-h1 {
  margin: 0;
  font-family: var(--font-display, var(--font-base));
  font-size: var(--mkt-h2);
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--text-primary);
  max-width: 28ch;
  text-wrap: balance;
}

.pr-head-em {
  font-style: normal;
  font-weight: 500;
}

.pr-head-sub {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--mkt-body);
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 54ch;
}

/* ── Controls (tabs + billing toggle) ─────────────────── */
.pr-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 4px 0;
}

/* Tabs + billing toggle visuals live in /_shared/components.css
   under .seg-control + .seg-control--underline.  The only
   pricing-specific decoration is the purple "Save 20%" badge
   nested inside the Annual option. */
.pr-billing-save {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(124, 79, 232, 0.18);
  color: #C7B0FF;
  margin-left: 2px;
}

.seg-control-opt.is-active .pr-billing-save {
  background: rgba(124, 79, 232, 0.22);
  color: #4A2BB0;
}

/* BU light: inactive chip on light page bg needs darker text;
   active chip sits on a #1D1612 dark pill so needs light text. */
html:not(.dark) .pr-billing-save {
  background: rgba(124, 79, 232, 0.18);
  color: #4A2BB0;
}
html:not(.dark) .seg-control-opt.is-active .pr-billing-save {
  background: rgba(124, 79, 232, 0.32);
  color: #C7B0FF;
}

/* ── View swap (AI Web Platform vs Infrastructure) ───────
   The act frame carries data-pr-view; one panel is visible
   per state.  Infrastructure also hides the monthly/annual
   billing toggle (legacy plans don't use that swap). */
.pr-act-1-frame[data-pr-view="platform"] .pr-infra,
.pr-act-1-frame[data-pr-view="infrastructure"] .pr-cards,
.pr-act-1-frame[data-pr-view="infrastructure"] .pr-billing {
  display: none;
}

/* ── Plan cards row ──────────────────────────────────────
   6 cards in a row at desktop.  Launch is featured: a touch
   wider (1.1fr vs 1fr) + brand-purple border + bloom shadow
   + "Most popular" pill on top. */
.pr-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 20px);
  align-items: stretch;
}

/* Plan card — hairline-bordered editorial column.  Transparent
   fill keeps the SaaS card weight off the row while the
   subtle 1px border still defines each plan's footprint. */
.pr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.4vw, 22px);
  padding: clamp(24px, 2vw, 32px) clamp(18px, 1.4vw, 24px);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: transparent;
  isolation: isolate;
  transition: border-color 240ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pr-card:hover { border-color: rgba(255, 255, 255, 0.22); }

/* Featured card — Launch.  Full solid brand-purple band that
   runs the height of the column.  Border still hairline-matched
   to the fill so the column wears a clean rounded silhouette. */
.pr-card--featured {
  background: #7C4FE8;
  border-color: #7C4FE8;
}
.pr-card--featured:hover { border-color: #7C4FE8; }

.pr-card--featured .pr-card-name,
.pr-card--featured .pr-card-price,
.pr-card--featured .pr-card-price-num {
  color: #FFFFFF;
}
.pr-card--featured .pr-card-promise,
.pr-card--featured .pr-card-credits,
.pr-card--featured .pr-card-price-currency,
.pr-card--featured .pr-card-price-period,
.pr-card--featured .pr-card-price-custom {
  color: rgba(255, 255, 255, 0.78);
}
.pr-card--featured .pr-card-credits strong {
  color: #FFFFFF;
}

/* Editorial label at the top of the Launch column instead of
   the floating pill badge. */
.pr-card-badge {
  position: static;
  align-self: flex-start;
  transform: none;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  padding: 0;
  background: none;
  white-space: nowrap;
}

/* Card head: plan name + promise. */
.pr-card-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pr-card-name {
  margin: 0;
  font-family: var(--font-display, var(--font-base));
  font-size: clamp(20px, 1.6vw, 24px);
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--text-primary);
}

.pr-card-promise {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--mkt-body-xs);
  line-height: 1.4;
  color: var(--text-tertiary);
}

/* Price — display type.  Currency dim, num bold, period
   small.  Custom variant for Enterprise. */
.pr-card-price {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-display, var(--font-base));
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}

.pr-card-price-currency {
  font-size: var(--mkt-h4);
  color: var(--text-tertiary);
  font-weight: 500;
  align-self: flex-start;
  padding-top: 0.2em;
}

.pr-card-price-num {
  font-size: clamp(40px, 3.4vw, 56px);
  font-weight: 600;
  line-height: 1;
}

.pr-card-price-period {
  font-size: var(--mkt-body-sm);
  color: var(--text-tertiary);
  margin-left: 4px;
  font-weight: 500;
}

.pr-card-price-custom {
  font-family: var(--font-display, var(--font-base));
  font-size: var(--mkt-h3);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.pr-card-credits {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--mkt-body-xs);
  line-height: 1.4;
  color: var(--text-secondary);
}

.pr-card-credits strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Inclusions list — editorial dash markers in mono, no check
   icons.  Reads as a typographic spec list, not a feature
   bullet block. */
.pr-card-incl {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.pr-card-incl li {
  position: relative;
  padding-left: 18px;
  font-family: var(--font-base);
  font-size: var(--mkt-body-xs);
  line-height: 1.45;
  color: var(--text-secondary);
}

.pr-card-incl li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  color: var(--text-tertiary);
  font-weight: 400;
  font-size: 12px;
}

.pr-card--featured .pr-card-incl li { color: rgba(255, 255, 255, 0.82); }
.pr-card--featured .pr-card-incl li::before {
  color: #C7B0FF;
}

/* CTAs use the marketing DS (.btn-marketing + variants);
   this rule only handles the card-flex placement so the
   button sits flush to the card bottom and spans the width. */
.pr-card-cta {
  margin-top: auto;
  align-self: stretch;
}

/* ── Infrastructure tab panel ────────────────────────────
   Three product surfaces (Residential Proxies, Scraper API,
   Browser Sessions) each with their own meter + entry price
   + spec list + configure-plan CTA.  A small grandfathering
   footer sits below for existing customers.  Visible only
   when [data-pr-view="infrastructure"] is on the act frame. */
.pr-infra {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 3.5vw, 56px);
  padding: clamp(24px, 3vw, 48px) 0;
}

.pr-infra-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 64ch;
}

.pr-infra-kicker {
  margin: 0;
}

.pr-infra-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-h3);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}

.pr-infra-sub {
  margin: 0;
  font-family: var(--font-base);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.pr-infra-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 24px);
}

/* Editorial product columns — hairline-bordered, transparent
   fill, slightly looser padding than the Act 1 plan cards
   since there are only three. */
.pr-infra-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(24px, 2vw, 32px);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: transparent;
  transition: border-color 240ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pr-infra-card:hover { border-color: rgba(255, 255, 255, 0.22); }

.pr-infra-card-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pr-infra-card-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.pr-infra-card-meter {
  margin: 0;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}

.pr-infra-card-price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.pr-infra-card-price-from {
  font-family: var(--font-base);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.pr-infra-card-price-amount {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--mkt-h3);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}

.pr-infra-card-price-unit {
  font-family: var(--font-base);
  font-size: 13px;
  color: var(--text-secondary);
}

.pr-infra-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}

.pr-infra-card-list li {
  position: relative;
  padding-left: 18px;
  font-family: var(--font-base);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.pr-infra-card-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  color: var(--text-tertiary);
  font-weight: 400;
  font-size: 12px;
}

.pr-infra-card-cta {
  margin-top: auto;
  align-self: stretch;
}

.pr-infra-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: clamp(16px, 2vw, 28px);
  border-top: 1px solid var(--border-subtle);
}

.pr-infra-foot-copy {
  margin: 0;
  font-family: var(--font-base);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-tertiary);
  max-width: 60ch;
}

/* ── Wide-desktop tiers ──────────────────────────────── */
@media (min-width: 1600px) {
  .pr-act-1-frame { max-width: 1600px; gap: clamp(40px, 3vw, 56px); }
  .pr-head-h1 { font-size: clamp(48px, 4vw, 72px); }
  .pr-head-sub { font-size: 18px; }
  .pr-card-name { font-size: 26px; }
  .pr-card-price-num { font-size: clamp(52px, 3.4vw, 68px); }
}

@media (min-width: 1920px) {
  .pr-act-1-frame { max-width: 1760px; }
  .pr-head-h1 { font-size: clamp(56px, 4vw, 84px); }
  .pr-card-name { font-size: 28px; }
  .pr-card-price-num { font-size: clamp(60px, 3.4vw, 76px); }
}

@media (min-width: 2400px) {
  .pr-act-1-frame { max-width: 2080px; }
  .pr-head-h1 { font-size: 96px; }
  .pr-card-price-num { font-size: 84px; }
}

/* ── Tablet / narrow desktop ───────────────────────────
   6 cards become 3×2 grid. */
@media (max-width: 1280px) {
  .pr-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 880px) {
  .pr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-controls { flex-direction: column; align-items: stretch; gap: 12px; }
  .pr-controls > [data-pr-tabs]    { justify-content: center; }
  .pr-controls > [data-pr-billing] { justify-content: center; align-self: center; }
  .pr-infra-grid { grid-template-columns: 1fr; }
}

/* ── Mobile ──────────────────────────────────────────── */
@media (max-width: 600px) {
  .pr-act-1 { padding: clamp(80px, 12vh, 120px) clamp(16px, 4vw, 24px) clamp(48px, 8vh, 80px); }
  .pr-head-h1 { font-size: var(--mkt-h3); max-width: 22ch; }
  .pr-head-sub { font-size: 14px; }
  .pr-cards { grid-template-columns: 1fr; gap: 12px; }
  .pr-card { padding: 18px; }
  /* Launch shifts up on mobile via order so the anchor reads
     first when the row stacks. */
  .pr-card[data-plan="launch"] { order: -1; }
  .pr-card-name { font-size: 22px; }
  .pr-card-price-num { font-size: 44px; }
}

/* ═══════════════════════════════════════════════════════════
   ACT 2 — How credits work (interactive calculator)
═══════════════════════════════════════════════════════════ */

.pr-act-2 {
  position: relative;
  padding: clamp(80px, 12vh, 140px) clamp(16px, 4vw, 32px);
  background: var(--surface);
}

.pr-act-2-frame {
  max-width: 1480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 4vw, 64px);
}

.pr-act-2-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 64ch;
}

.pr-act-2-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-h2);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}

.pr-act-2-em {
  font-style: normal;
  color: var(--text-primary);
}

.pr-act-2-sub {
  margin: 0;
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 64ch;
}

/* ── Calculator + spotlight ────────────────────────────── */
.pr-calc {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 2.4vw, 40px);
  align-items: stretch;
}

.pr-calc-widget {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2vw, 36px);
  padding: clamp(8px, 1vw, 16px) 0;
  background: none;
  border: none;
}

.pr-calc-field {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pr-calc-label {
  font-family: var(--font-base);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Op chips: brand seg-control, wider hit area + cost suffix. */
.pr-calc-ops { flex-wrap: wrap; }
.pr-calc-ops .seg-control-opt {
  padding: 10px 16px;
  font-size: 13px;
  gap: 8px;
}

.pr-calc-chip-cost {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Active chip flips the cost label color so it's readable on
   the white-fill active state (dark ink on white). */
.pr-calc-ops .seg-control-opt.is-active .pr-calc-chip-cost,
.pr-calc-ops .seg-control-opt[aria-checked="true"] .pr-calc-chip-cost {
  color: rgba(29, 22, 18, 0.6);
}

/* Sliding active pill — replaces the per-chip is-active fill
   with a single shared element that translates between chips
   on click.  Two layers so we can compose two transforms:
     outer  → translateX + width (where the pill is + how wide)
     inner  → scaleX/scaleY (mid-flight squash/stretch)
   Outer rides an overshoot curve so it slightly past-shoots
   and settles back; inner squashes horizontally for ~240ms
   right after a click to read as acceleration + deceleration. */
.pr-calc-ops { position: relative; }

/* Suppress the seg-control DS active fill on these chips —
   the sliding pill underneath does the work, and we don't
   want two stacked whites flashing. */
.pr-calc-ops .seg-control-opt {
  position: relative;
  z-index: 1;
}
.pr-calc-ops .seg-control-opt.is-active,
.pr-calc-ops .seg-control-opt[aria-checked="true"] {
  background: transparent;
}

.pr-calc-ops-pill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  transform: translate(0, 0);
  opacity: 0;
  pointer-events: none;
  will-change: transform, width, height;
  transition:
    transform 460ms cubic-bezier(0.34, 1.45, 0.64, 1),
    width     460ms cubic-bezier(0.34, 1.45, 0.64, 1),
    height    460ms cubic-bezier(0.34, 1.45, 0.64, 1),
    opacity   200ms ease;
}

.pr-calc-ops-pill.is-ready { opacity: 1; }

.pr-calc-ops-pill-inner {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: #FFFFFF;
  transform-origin: center;
  transition: transform 280ms cubic-bezier(0.34, 1.45, 0.64, 1);
}

/* Mid-flight squash — applied during the ~240ms after click,
   removed automatically by JS so the pill returns to its
   natural shape on arrival. */
.pr-calc-ops-pill.is-traveling .pr-calc-ops-pill-inner {
  transform: scaleX(1.08) scaleY(0.86);
}

/* Slider — minimal, brand-purple filled track via accent-color
   (browser-native, no gradient), small disc thumb, floating
   value bubble that tracks the thumb position. */
.pr-calc-slider {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pr-calc-slider-track {
  position: relative;
  padding-top: 42px;
}

.pr-calc-range {
  width: 100%;
  accent-color: #7C4FE8;
  cursor: pointer;
  margin: 0;
}

.pr-calc-range:focus-visible {
  outline: 2px solid #7ADAE6;
  outline-offset: 6px;
  border-radius: 999px;
}

/* WebKit fine-tuning — clean disc thumb, no border halo. */
.pr-calc-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
}

.pr-calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #7C4FE8;
  border: none;
  margin-top: -7px;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pr-calc-range::-webkit-slider-thumb:hover   { transform: scale(1.18); }
.pr-calc-range:active::-webkit-slider-thumb,
.pr-calc-range::-webkit-slider-thumb:active  { transform: scale(1.25); }

.pr-calc-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #7C4FE8;
  border: none;
}

/* Floating value bubble — anchored to thumb % via inline
   --pos var set by JS.  Mono digits, anchored by its center. */
.pr-calc-slider-bubble {
  position: absolute;
  top: 0;
  left: var(--pr-bubble-pos, 5%);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 11px;
  color: var(--text-primary);
  white-space: nowrap;
  transition: left 220ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.pr-calc-slider-bubble [data-pr-calc-volume-display] {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.pr-calc-volume-unit {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Scale axis labels — endpoints, mono, subtle. */
.pr-calc-slider-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 4px 2px 0;
}

/* Live result — anchored at the bottom of the widget. */
.pr-calc-result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: clamp(16px, 2vw, 24px);
  border-top: 1px solid var(--border-subtle);
}

.pr-calc-result-label {
  font-family: var(--font-base);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.pr-calc-result-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 4vw, 64px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  transition: color 220ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pr-calc.is-bloom .pr-calc-result-num {
  color: #C7B0FF;
  transform: scale(1.04);
}

/* ── Plan spotlight ──────────────────────────────────────
   Saturated brand band per the brand-palette rule: SOLID
   teal (#7ADAE6) + dark ink + brand-purple CTA.  No radials,
   no gradients, no ambient blooms.  Free and Enterprise
   tiers (no brand color) drop the band for outlined neutral. */
.pr-calc-spotlight {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid #7ADAE6;
  border-radius: 20px;
  background: #7ADAE6;
  overflow: hidden;
  transition: border-color 320ms ease, background-color 320ms ease;
}

/* Pulse on tier change — transform only, no bloom shadow
   (a shadow would read as a soft halo / pseudo-gradient). */
.pr-calc-spotlight.is-pulse { animation: pr-calc-pulse 700ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes pr-calc-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* Default text — dark ink on teal fill. */
.pr-calc-spotlight-badge {
  position: relative;
  align-self: flex-start;
  font-family: var(--font-base);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(29, 22, 18, 0.18);
  color: #1D1612;
}

.pr-calc-spotlight-name {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--mkt-h3);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #1D1612;
}

.pr-calc-spotlight-promise {
  position: relative;
  margin: 0;
  font-family: var(--font-base);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(29, 22, 18, 0.78);
}

/* All plans share the same spotlight chrome — solid teal,
   dark ink, brand-purple CTA.  No per-plan overrides. */

.pr-calc-spotlight-meta {
  position: relative;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pr-calc-spotlight-meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}

.pr-calc-spotlight-meta-row:last-child { border-bottom: none; }

/* Default meta colors — dark ink on teal fill. */
.pr-calc-spotlight-meta dt {
  font-family: var(--font-base);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(29, 22, 18, 0.7);
}

.pr-calc-spotlight-meta dd {
  margin: 0;
  font-family: var(--font-base);
  font-size: 14px;
  color: #1D1612;
}

.pr-calc-spotlight-meta dd strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
}

.pr-calc-spotlight-price-period {
  font-size: 12px;
  color: rgba(29, 22, 18, 0.7);
  margin-left: 2px;
}

.pr-calc-spotlight-meta-row {
  border-color: rgba(29, 22, 18, 0.18);
}

.pr-calc-spotlight-cta {
  position: relative;
  margin-top: auto;
  align-self: stretch;
}

/* ── Credit cheat sheet ──────────────────────────────────
   Editorial spec-sheet vibe: no card chrome, no cell fill,
   just rows divided by 1px hairlines.  Mono numerals on the
   left (delibrately large + tracked-in), names on the right
   in body type.  Hover lifts the number to brand purple and
   nudges the row to primary text. */
.pr-calc-sheet {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(40px, 5vw, 96px);
  row-gap: 0;
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.pr-calc-sheet li {
  display: flex;
  align-items: baseline;
  gap: clamp(18px, 2vw, 32px);
  padding: clamp(16px, 1.6vw, 22px) 0;
  border-bottom: 1px solid var(--border-subtle);
  background: none;
  font-family: var(--font-base);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary);
  transition: color 220ms ease;
  cursor: default;
}

/* Drop the hairline on the last row so the section doesn't
   end with a stray line under the last items. */
.pr-calc-sheet li:nth-last-child(-n+2) { border-bottom: none; }

.pr-calc-sheet li strong {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-weight: 500;
  font-size: var(--mkt-h4);
  letter-spacing: -0.025em;
  color: var(--text-primary);
  flex-shrink: 0;
  min-width: 72px;
  text-align: right;
  transition: color 220ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pr-calc-sheet li:hover           { color: var(--text-primary); }
.pr-calc-sheet li:hover strong    { color: #7C4FE8; transform: translateX(-2px); }

/* Active row — mirrors the operation chip selected in the
   calculator above.  Number flips to brand purple, label
   primary, with a soft left-accent line that grows in. */
.pr-calc-sheet li.is-current        { color: var(--text-primary); }
.pr-calc-sheet li.is-current strong { color: #7C4FE8; }
.pr-calc-sheet li.is-current::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: #7C4FE8;
  transform: translate(-22px, -50%) scaleX(0);
  transform-origin: right;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pr-calc-sheet li.is-current::before { transform: translate(-22px, -50%) scaleX(1); }
.pr-calc-sheet li { position: relative; }

/* ── Wide-desktop tiers ──────────────────────────────── */
@media (min-width: 1600px) {
  .pr-act-2-frame { max-width: 1600px; }
  .pr-act-2-h2 { font-size: clamp(40px, 3.4vw, 60px); }
  .pr-calc-result-num { font-size: clamp(48px, 4vw, 72px); }
}

@media (min-width: 1920px) {
  .pr-act-2-frame { max-width: 1760px; }
  .pr-act-2-h2 { font-size: clamp(48px, 3.4vw, 72px); }
}

@media (min-width: 2400px) {
  .pr-act-2-frame { max-width: 2080px; }
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .pr-calc { grid-template-columns: 1fr; }
  .pr-calc-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .pr-act-2 { padding: clamp(64px, 10vh, 100px) clamp(16px, 4vw, 24px); }
  .pr-act-2-h2 { font-size: var(--mkt-h4); }
  .pr-act-2-sub { font-size: 14px; }
  .pr-calc-widget { padding: 20px; }
  .pr-calc-spotlight { padding: 20px; }
  .pr-calc-result-num { font-size: 36px; }
  .pr-calc-spotlight-name { font-size: 28px; }
  /* Op chips: 2×2 grid on phones so the chip names don't
     wrap ragged and the sliding pill has a predictable
     two-row footprint to travel across. */
  .pr-calc-ops { flex-wrap: wrap; }
  .pr-calc-ops .seg-control-opt {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    justify-content: center;
    padding: 10px 8px;
    font-size: 12px;
    gap: 6px;
  }
  .pr-calc-chip-cost { font-size: 9px; }
  .pr-calc-sheet { grid-template-columns: 1fr; }
  /* In 1-col the bottom row is only the last item; restore the
     hairline on the previously-shared row above. */
  .pr-calc-sheet li:nth-last-child(2) { border-bottom: 1px solid var(--border-subtle); }
  .pr-calc-sheet li:last-child        { border-bottom: none; }
}

/* ═══════════════════════════════════════════════════════════
   ACT 3 — Eight primitives (the platform vocabulary)
═══════════════════════════════════════════════════════════ */

.pr-act-3 {
  position: relative;
  padding: clamp(80px, 12vh, 140px) clamp(16px, 4vw, 32px);
  background: var(--surface);
}

.pr-act-3-frame {
  max-width: 1480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 4vw, 64px);
}

.pr-act-3-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 64ch;
}

.pr-act-3-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-h2);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}

.pr-act-3-em {
  font-style: normal;
  color: var(--text-primary);
}

.pr-act-3-sub {
  margin: 0;
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 64ch;
}

/* ── Grid of primitives ──────────────────────────────── */
.pr-prims {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 20px);
}

.pr-prim {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2vw, 30px) clamp(20px, 1.8vw, 26px);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 240ms ease;
}

/* Top-edge accent line — fades in on hover (same recipe as
   the MCP page setup cards). */
.pr-prim::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #7C4FE8 0%, #7ADAE6 35%, transparent 80%);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

.pr-prim:hover {
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}

.pr-prim:hover::before { opacity: 1; }

.pr-prim, .pr-prim * { cursor: pointer; }

/* Curtain-rise — staggered fade as the grid enters view. */
.pr-prims.is-visible .pr-prim {
  opacity: 1;
  transform: translateY(0);
}
.pr-prims.is-visible .pr-prim:nth-child(1) { transition-delay:   0ms; }
.pr-prims.is-visible .pr-prim:nth-child(2) { transition-delay:  60ms; }
.pr-prims.is-visible .pr-prim:nth-child(3) { transition-delay: 120ms; }
.pr-prims.is-visible .pr-prim:nth-child(4) { transition-delay: 180ms; }
.pr-prims.is-visible .pr-prim:nth-child(5) { transition-delay: 240ms; }
.pr-prims.is-visible .pr-prim:nth-child(6) { transition-delay: 300ms; }
.pr-prims.is-visible .pr-prim:nth-child(7) { transition-delay: 360ms; }
.pr-prims.is-visible .pr-prim:nth-child(8) { transition-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
  .pr-prim { opacity: 1; transform: none; transition: border-color 240ms ease; }
}

.pr-prim-num {
  position: absolute;
  top: 16px;
  right: 18px;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.pr-prim-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--mkt-h4);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text-primary);
}

/* Maturity label — pill that wears one of GA / Beta / Private
   Beta / Coming Soon / Planned per the CEO brief sect 12.  No
   page may imply a maturity that doesn't exist. */
.pr-prim-label {
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pr-prim-label[data-maturity="ga"] {
  background: rgba(122, 218, 230, 0.18);
  color: #7ADAE6;
}
.pr-prim-label[data-maturity="beta"] {
  background: rgba(124, 79, 232, 0.18);
  color: #C7B0FF;
}
.pr-prim-label[data-maturity="private-beta"] {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}
.pr-prim-label[data-maturity="coming-soon"],
.pr-prim-label[data-maturity="planned"] {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-tertiary);
}

.pr-prim-code {
  align-self: flex-start;
  padding: 5px 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 12px;
  letter-spacing: 0;
  color: var(--text-primary);
}

/* BU variant: same chrome, body font + lowercase, so the lozenge reads as
   a plain-language tagline rather than a function signature. */
.pr-prim-code--bu {
  font-family: var(--font-base);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}

.pr-prim-line {
  margin: 0;
  font-family: var(--font-base);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  flex: 1;
}

.pr-prim-cost {
  margin: 0;
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}

.pr-prim-cost strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  text-transform: none;
  margin-right: 4px;
}

/* Wide-desktop tiers — bump type + container width. */
@media (min-width: 1600px) {
  .pr-act-3-frame { max-width: 1600px; }
  .pr-act-3-h2 { font-size: clamp(40px, 3.4vw, 60px); }
  .pr-prim-name { font-size: var(--mkt-h4); }
}

@media (min-width: 1920px) {
  .pr-act-3-frame { max-width: 1760px; }
  .pr-act-3-h2 { font-size: clamp(48px, 3.4vw, 72px); }
}

@media (min-width: 2400px) {
  .pr-act-3-frame { max-width: 2080px; }
}

/* Responsive collapses. */
@media (max-width: 1100px) {
  .pr-prims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .pr-act-3 { padding: clamp(64px, 10vh, 100px) clamp(16px, 4vw, 24px); }
  .pr-act-3-h2 { font-size: var(--mkt-h4); }
  .pr-act-3-sub { font-size: 14px; }
  .pr-prims { grid-template-columns: 1fr; }
  .pr-prim { padding: 20px; }
  .pr-prim-name { font-size: 22px; }
}

/* ═══════════════════════════════════════════════════════════
   ACT 4 — Why Zenrows (saturated brand band, solid purple)
═══════════════════════════════════════════════════════════ */

.pr-act-4 {
  position: relative;
  padding: clamp(96px, 14vh, 160px) clamp(24px, 5vw, 56px);
  background: transparent;
  isolation: isolate;
  overflow: hidden;
  /* Fill solid purple after the clip-path wipe (1100ms) so the central topbar
     watcher (_shared/nav-band-adapt.js) sees a full-bleed purple bg. The
     ::before covers it by then, so no visual change. */
  transition: background-color 200ms linear 1150ms;
}
.pr-act-4.is-revealed { background-color: #7C4FE8; }

/* Solid brand-purple fill lives on a pseudo so we can curtain-
   wipe it in from the bottom (clip-path) when the act enters
   the viewport. The fill is solid #7C4FE8, no gradient. */
.pr-act-4::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #7C4FE8;
  z-index: -1;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1100ms cubic-bezier(0.65, 0, 0.35, 1);
  will-change: clip-path;
}

.pr-act-4.is-revealed::before { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .pr-act-4 { transition: none; }
  .pr-act-4::before { transition: none; clip-path: inset(0); }
}

.pr-act-4-frame {
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}

/* ── Left column: editorial brand statement ──────────── */
.pr-act-4-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: clamp(80px, 10vh, 120px);
}

.pr-act-4-kicker {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
}

.pr-act-4-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-h2);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: #FFFFFF;
}

.pr-act-4-sub {
  margin: 0;
  font-family: var(--font-base);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

/* ── Right column: numbered beats ────────────────────── */
.pr-why-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.pr-why-beat {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: clamp(16px, 1.6vw, 28px);
  padding: clamp(22px, 2.2vw, 32px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pr-why-beat:first-child { padding-top: 0; }
.pr-why-beat:last-child  { border-bottom: none; padding-bottom: 0; }

/* Stagger reveal — same pattern as Act 3 primitives. */
.pr-why-list.is-visible .pr-why-beat                  { opacity: 1; transform: translateY(0); }
.pr-why-list.is-visible .pr-why-beat:nth-child(1)     { transition-delay:   0ms; }
.pr-why-list.is-visible .pr-why-beat:nth-child(2)     { transition-delay: 120ms; }
.pr-why-list.is-visible .pr-why-beat:nth-child(3)     { transition-delay: 240ms; }
.pr-why-list.is-visible .pr-why-beat:nth-child(4)     { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .pr-why-beat { opacity: 1; transform: none; transition: none; }
}

.pr-why-num {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
  padding-top: 6px;
}

.pr-why-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pr-why-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--mkt-h4);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}

.pr-why-line {
  margin: 0;
  font-family: var(--font-base);
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 52ch;
}

/* Wide-desktop tiers. */
@media (min-width: 1600px) {
  .pr-act-4-frame { max-width: 1600px; }
  
  .pr-why-name { font-size: var(--mkt-h4); }
}

@media (min-width: 1920px) {
  .pr-act-4-frame { max-width: 1760px; }
  
}

@media (min-width: 2400px) {
  .pr-act-4-frame { max-width: 2080px; }
}

/* Responsive collapse — stack head over beats below 960. */
@media (max-width: 960px) {
  .pr-act-4-frame { grid-template-columns: 1fr; gap: clamp(32px, 5vw, 56px); }
  .pr-act-4-head  { position: static; max-width: none; }
}

@media (max-width: 600px) {
  .pr-act-4 { padding: clamp(72px, 11vh, 110px) clamp(20px, 5vw, 28px); }
  
  .pr-act-4-sub { font-size: 14px; }
  .pr-why-beat { grid-template-columns: 40px 1fr; gap: 12px; }
  .pr-why-name { font-size: 20px; }
  .pr-why-line { font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════
   ACT 5 — FAQ.  Editorial accordion on dark.
═══════════════════════════════════════════════════════════ */

.pr-act-faq {
  position: relative;
  padding: clamp(96px, 14vh, 160px) clamp(24px, 5vw, 56px);
  background: var(--surface);
}

.pr-act-faq-frame {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 4vw, 64px);
}

.pr-act-faq-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 64ch;
}

.pr-act-faq-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-h2);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}

.pr-faq-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-subtle);
}

.pr-faq-item {
  border-bottom: 1px solid var(--border-subtle);
}

.pr-faq-q {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 1.6vw, 28px);
  width: 100%;
  padding: clamp(20px, 2vw, 28px) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-base);
  color: var(--text-primary);
  transition: color 220ms ease;
}

.pr-faq-q, .pr-faq-q * { cursor: pointer; }

.pr-faq-num {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  transition: color 220ms ease;
}

.pr-faq-q-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: inherit;
}

.pr-faq-q-mark {
  font-family: var(--font-code, "IBM Plex Mono", monospace);
  font-size: 20px;
  font-weight: 400;
  color: var(--text-tertiary);
  transition: color 220ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  width: 24px;
  text-align: center;
}

.pr-faq-q:hover           { color: var(--text-primary); }
.pr-faq-q:hover .pr-faq-num,
.pr-faq-q:hover .pr-faq-q-mark { color: #7C4FE8; }

.pr-faq-q[aria-expanded="true"] .pr-faq-num,
.pr-faq-q[aria-expanded="true"] .pr-faq-q-mark { color: #7C4FE8; }

.pr-faq-q[aria-expanded="true"] .pr-faq-q-mark { transform: rotate(45deg); }

.pr-faq-a {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: clamp(16px, 1.6vw, 28px);
  padding: 0 0 clamp(24px, 2.4vw, 32px);
}

/* The display: grid above outranks the browser's default
   `[hidden] { display: none }`, so we have to restate the
   collapse explicitly here. */
.pr-faq-a[hidden] { display: none; }

.pr-faq-a p {
  grid-column: 2 / 3;
  margin: 0;
  font-family: var(--font-base);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 64ch;
}

/* Wide-desktop tiers — looser frame + bigger q text. */
@media (min-width: 1600px) {
  .pr-act-faq-frame { max-width: 1240px; }
  .pr-act-faq-h2 { font-size: clamp(40px, 3.4vw, 60px); }
  .pr-faq-q-text { font-size: clamp(20px, 1.4vw, 24px); }
}

@media (min-width: 1920px) {
  .pr-act-faq-frame { max-width: 1360px; }
}

@media (max-width: 600px) {
  .pr-act-faq { padding: clamp(72px, 11vh, 110px) clamp(20px, 5vw, 28px); }
  .pr-act-faq-h2 { font-size: var(--mkt-h4); }
  .pr-faq-q { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; }
  .pr-faq-q-text { font-size: 15px; }
  .pr-faq-a { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; }
}

/* ═══════════════════════════════════════════════════════════
   ACT 6 — Closer.  Dark, centered, editorial.
═══════════════════════════════════════════════════════════ */

.pr-act-5 {
  position: relative;
  padding: clamp(96px, 14vh, 160px) clamp(24px, 5vw, 56px) clamp(80px, 12vh, 140px);
  background: var(--surface);
}

.pr-act-5-frame {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(20px, 2vw, 28px);
}

.pr-act-5-kicker { margin: 0 0 clamp(12px, 1.5vh, 20px); }

.pr-act-5-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--mkt-hero);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  text-wrap: balance;
}

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

.pr-act-5-cta {
  margin-top: clamp(16px, 2vh, 28px);
}

.pr-act-5-talk {
  margin-top: clamp(12px, 1.6vh, 20px);
  align-self: center;
}

/* Wide-desktop tiers. */
@media (min-width: 1600px) {
  .pr-act-5-frame { max-width: 960px; }
  
}

@media (min-width: 1920px) {
  .pr-act-5-frame { max-width: 1040px; }
  
}

@media (max-width: 600px) {
  .pr-act-5 { padding: clamp(72px, 11vh, 110px) clamp(20px, 5vw, 28px); }
  
  .pr-act-5-sub { font-size: 14px; }
}

/* ══════════════════════════════════════════════════════════
   BU (light) overrides.
   The page is dark-by-default; html.dark stays untouched.
   In html:not(.dark) (Business audience) we:
   - Swap display headings to Mq12 (the BU display face)
   - Flip the rgba(255,255,255,X) accents used on warm-dark page
     surfaces to rgba(29,22,18,X) so they read on light bg.
     The rgba-white rules INSIDE .pr-card--featured + .pr-act-4
     are intentionally NOT overridden — those text colours sit
     on a SOLID brand-purple band that stays brand-purple in
     both themes (theme-invariant chrome per CLAUDE.md).
═══════════════════════════════════════════════════════════ */

/* Body recess — same approach as /home: bg slightly below
   --background so the hairline-bordered transparent cards read
   on a sunken canvas. */
html:not(.dark) body {
  background: var(--zen-gray-3);
  color: var(--text-primary);
}

html:not(.dark) .pr-head-h1,
html:not(.dark) .pr-infra-h2,
html:not(.dark) .pr-act-2-h2,
html:not(.dark) .pr-act-3-h2,
html:not(.dark) .pr-act-faq-h2,
html:not(.dark) .pr-act-5-h2 {
  font-family: "Mq12", system-ui, sans-serif;
  font-weight: 500;
  color: var(--text-primary);
}

/* Card / row / chip chromes that were rgba-white on warm dark
   need warm-dark rgba on light.  Same alpha values, inverse hue. */
html:not(.dark) .pr-card:hover { border-color: rgba(29, 22, 18, 0.22); }
html:not(.dark) .pr-infra-card:hover { border-color: rgba(29, 22, 18, 0.22); }
html:not(.dark) .pr-prim:hover { border-color: rgba(29, 22, 18, 0.18); }

html:not(.dark) .pr-prim-label[data-maturity="private-beta"] {
  background: rgba(29, 22, 18, 0.08);
  color: rgba(29, 22, 18, 0.7);
}
html:not(.dark) .pr-prim-label[data-maturity="coming-soon"],
html:not(.dark) .pr-prim-label[data-maturity="planned"] {
  background: rgba(29, 22, 18, 0.08);
  color: rgba(29, 22, 18, 0.65);
}
/* BETA chip: light lavender on faint lavender → unreadable in
   BU light. Switch to dark brand purple text on a slightly more
   saturated tint. */
html:not(.dark) .pr-prim-label[data-maturity="beta"] {
  background: rgba(124, 79, 232, 0.18);
  color: #5835B8;
}
html:not(.dark) .pr-prim-code { background: rgba(29, 22, 18, 0.04); }

/* Calc slider bubble — on warm-dark page bg, needs flip.
   (.pr-calc-spotlight-meta-row's dashed border at rgba-white-0.08
   sits INSIDE the teal saturated band and stays as-is.) */
html:not(.dark) .pr-calc-slider-bubble {
  background: rgba(29, 22, 18, 0.06);
}

/* Teal text on light bg — GA-maturity primitive label flip.
   Saturate the bg tint a touch so the chip has presence on the
   light page bg (default 0.18 reads as nearly-invisible). */
html:not(.dark) .pr-prim-label[data-maturity="ga"] {
  background: rgba(28, 158, 151, 0.18);
  color: #146863;
}

/* CR cost-chip inside seg-control options — Pablo flagged the
   active state showing dark-on-dark in BU light (2026-06-15).
   Dark mode active pill is white → dark CR ink is correct.
   BU light active pill is now #1D1612 (per the DS seg-control
   fix in 17753fb / 31e5201) → CR ink needs to flip to white-
   alpha so it stays readable on the dark pill.
   Inactive state already inherits --text-tertiary which reads
   on the light page bg; bump opacity for slightly more contrast. */
html:not(.dark) .pr-calc-chip-cost {
  color: rgba(29, 22, 18, 0.75);
}
html:not(.dark) .pr-calc-ops .seg-control-opt.is-active .pr-calc-chip-cost,
html:not(.dark) .pr-calc-ops .seg-control-opt[aria-checked="true"] .pr-calc-chip-cost {
  color: rgba(255, 255, 255, 0.75);
}

/* Topbar adaptation on the .pr-act-4 saturated purple band.
   Pablo flagged on 2026-06-15: navbar wasn't adapting when the
   .pr-act-4 (#7C4FE8 purple band) scrolled under it. Added
   initPurpleTopbar() watcher in pricing.js; this block ships
   the matching chrome — white-on-purple while body.is-on-purple
   is set.
   Hardcoded #FFFFFF (NOT var(--background)) because the band is
   theme-invariant and var(--background) flips to near-white in
   BU light, defeating the point. */

/* ═══════════════════════════════════════════════════════════
   Pricing rebuild (2026-07) — real app plans, Business volume
   slider, and the usage calculator. Reuses .pr-card / .pr-calc
   / .pr-calc-spotlight; this block only adds the new atoms.
═══════════════════════════════════════════════════════════ */

/* Plan volume line (replaces the old AI-credits line). */
.pr-card-volume { margin: 0; font-family: var(--font-base); font-size: var(--mkt-body-xs); line-height: 1.4; color: var(--text-secondary); }
.pr-card-volume strong { color: var(--text-primary); font-weight: 600; }

/* Footnote under the plan cards. */
.pr-cards-note { margin: clamp(20px,3vh,32px) auto 0; max-width: 60ch; font-family: var(--font-base); font-size: var(--mkt-body-xs); line-height: 1.5; color: var(--text-tertiary); text-align: center; }

/* Business card — internal volume slider (Bright Data style).
   The featured card is a solid purple fill, so the slider runs in
   WHITE ink (a purple fill/thumb/label would vanish into the card). */
[data-pr-biz] .pr-card-cta { margin-top: auto; }
.pr-biz-slider { margin: 6px 0 2px; }
.pr-biz-range { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.3); outline: none; cursor: pointer; }
.pr-biz-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #ffffff; border: 3px solid #7C4FE8; box-shadow: 0 0 0 1.5px #ffffff; cursor: pointer; transition: transform 160ms ease; }
.pr-biz-range::-webkit-slider-thumb:hover { transform: scale(1.14); }
.pr-biz-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #ffffff; border: 3px solid #7C4FE8; box-shadow: 0 0 0 1.5px #ffffff; cursor: pointer; }
.pr-biz-range:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; }
.pr-biz-scale { display: flex; justify-content: space-between; margin-top: 12px; }
.pr-biz-scale button { background: none; border: none; padding: 2px; font-family: var(--font-code); font-size: 11px; color: rgba(255,255,255,0.62); cursor: pointer; transition: color 200ms ease; }
.pr-biz-scale button:hover { color: rgba(255,255,255,0.9); }
.pr-biz-scale button.is-active { color: #ffffff; font-weight: 600; }

/* Calculator — per-field label + live value row. */
.pr-calc-field-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.pr-calc-field-val { font-family: var(--font-display); font-weight: 500; font-size: clamp(18px,1.6vw,22px); letter-spacing: -0.01em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.pr-calc-field-unit { font-family: var(--font-base); font-size: 12px; font-weight: 400; color: var(--text-tertiary); letter-spacing: 0; }

/* Calculator — recommended-plan price block (dark ink on the teal spotlight). */
.pr-calc-spotlight-price { display: flex; align-items: flex-start; gap: 1px; margin: 2px 0 6px; color: #1D1612; }
.pr-calc-spotlight-price-cur { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1; padding-top: 5px; }
.pr-calc-spotlight-price-num { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px,4vw,56px); line-height: 0.9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }