/* =============================================================================
   pricing.css — page-scoped styles for /pricing/
   -----------------------------------------------------------------------------
   Loaded only when a page sets `pageCss: pricing.css` in front-matter
   (gated <link> in base.html). Consolidated 2026-05-20 — was 2335 lines of
   page-prefixed CSS slop (18 raw hex, 33 raw rgba, 43 raw font-size px, 11
   competing eyebrow class definitions). Now routes through canonical
   wz-editorial-* / wz-eyebrow-* / .badge primitives and design tokens.

   Order matches original document order: hero/calculator first, then
   platform mockup, ROI/TCO, principles, trust, footnotes.

   Rules:
   - Tokens only — no raw hex / rgba() / px font-size outside annotated one-off art.
   - Genuine one-off art (Mac traffic lights, 132px LCP price clamp) is
     annotated inline and grandfathered.
   - Eyebrows use canonical .wz-editorial-eyebrow or .wz-eyebrow-pill, never
     local .pr-*-eyebrow redefinitions.
   ============================================================================= */

/* =============================================================================
   0. INNER CONTAINER — shared layout rail for all pricing sections.
      All .inner divs on this page get consistent horizontal gutters and centering.
   ============================================================================= */
.pr-suites .inner { max-width: var(--max-w, 1280px); margin: 0 auto; padding: 0 var(--pad-inner); }

/* =============================================================================
   1. HERO — "HR software pricing, in one number."
   ============================================================================= */
.pr-hero-zone {
  position: relative;
  background: var(--color-page);
  padding-top: calc(var(--nav-h) + var(--gap-md));
  /* tightened 2026-06-05: short headline + lede only, so the calculator sits
     right under it without a tall empty band. */
  padding-bottom: var(--gap-md);
  overflow: hidden;
}
/* 2026-05-22: dropped the warm-tint band + green radial orb. The combo read
   muddy beige-grey vs the body's cream. Stripe / Linear / Mercury all blend
   the hero into the page; the deep-green hero price card carries the visual
   weight instead. */
/* 2026-06-05: stacked, centered header (homepage pattern). Was a two-column
   grid with a product screenshot aside; the screenshot was dropped and the
   calculator pulled up directly beneath this header. */
.pr-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--pad-inner);
}
.pr-hero-head { text-align: center; }
.pr-hero-head h1 {
  /* 2026-06-05 full heading pass: sizing via the site-wide hero token
     (same source the get-started "golden" hero now uses). em inline so
     "One price." stays on the line. */
  font-size: var(--text-hero-h1);
  font-weight: var(--fw-hero-h1);
  letter-spacing: var(--tracking-hero-h1);
  line-height: var(--lh-hero-h1);
  color: var(--color-text-primary);
  margin: 0 0 var(--gap-md);
  text-wrap: balance;
}
.pr-hero-head h1 em {
  /* inline green emphasis, matching .gs-hero h1 em (medium / accent-text). */
  font-style: normal;
  font-weight: var(--fw-medium);
  color: var(--accent-text);
}

/* =============================================================================
   1b. PROOF STRIP — three real customer stats below the hero
   ============================================================================= */
.pr-proof-strip {
  padding: var(--section-tight-v) 0;
  background: var(--color-page);
}
.pr-proof-inner {
  max-width: var(--max-w, 1280px);
  margin: 0 auto;
  padding: 0 var(--pad-inner);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pad-inner-sm);
}
.pr-proof-stat {
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: transform var(--dur-snap) var(--ease),
              border-color var(--dur-snap) var(--ease),
              box-shadow var(--dur-snap) var(--ease);
}
.pr-proof-stat:hover {
  transform: var(--hover-lift);
  border-color: var(--green-wash-30);
  box-shadow: var(--shadow-card-hover);
}
/* Full-bleed case-study image header (2026-06-05) — gives each proof stat a
   face. Real client photo, gently zooms on hover. */
.pr-proof-media {
  display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--gray-1);
  border-bottom: 1px solid var(--color-border);
}
.pr-proof-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-default) var(--ease);
}
.pr-proof-stat:hover .pr-proof-media img { transform: scale(1.04); }
.pr-proof-body {
  display: flex; flex-direction: column; flex: 1;
  padding: var(--pad-inner-sm) var(--pad-inner-sm);
}
.pr-proof-num {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: var(--fw-light);
  letter-spacing: -0.025em;
  color: var(--brand-green-deep);
  line-height: 1;
  margin-bottom: var(--gap-xs);
  font-variant-numeric: tabular-nums;
}
.pr-proof-label {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  line-height: 1.4;
  margin-bottom: var(--gap-sm);
}
.pr-proof-link {
  margin-top: auto;
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--brand-green-text);
}
@media (max-width: 768px) {
  .pr-proof-inner { grid-template-columns: 1fr; }
}

/* Hero product render — replaced the deep-green abstract price card with a
   compact Workzoom dashboard preview on 2026-05-22. Pattern: Linear / Mercury
   hero — the product is the focal element, the price floats as a glass chip
   anchored to it. Shows what $4 actually buys instead of selling a number in
   abstract space. */
.pr-hero-product {
  position: relative;
  align-self: stretch;
  display: flex; align-items: center;
}
.pr-hero-product-window {
  position: relative;
  width: 100%;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow:
    0 1px 2px rgba(10, 74, 37, 0.06),
    0 8px 24px rgba(10, 74, 37, 0.10),
    0 32px 80px var(--pr-suite-hr-mid);
  overflow: visible;
}
.pr-hero-product-chrome {
  display: flex; align-items: center; gap: var(--gap-xs);
  padding: var(--gap-sm) var(--gap-sm);
  background: linear-gradient(180deg, var(--teal-wash-02), var(--teal-wash-02));
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.pr-hero-product-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
/* one-off art — Mac traffic lights, do not promote */
.pr-hero-product-dot:nth-of-type(1) { background: #ff5f57; }
.pr-hero-product-dot:nth-of-type(2) { background: #febc2e; }
.pr-hero-product-dot:nth-of-type(3) { background: #28c840; }
.pr-hero-product-url {
  margin-left: var(--gap-sm); padding: var(--gap-2xs) var(--gap-sm);
  background: var(--color-page);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  font-size: var(--text-eyebrow); color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}
/* "Sample run" disclosure — the payroll numbers in the hero are illustrative,
   not a real customer. Mercury / Stripe label illustrative mockups similarly. */
.pr-hero-product-sample {
  margin-left: auto;
  padding: var(--gap-2xs) var(--gap-xs);
  background: var(--green-wash-08);
  border: 1px solid var(--green-wash-15);
  border-radius: var(--r-sm);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-green-text);
}
/* Real product screenshot fills the body. Aspect 16:10 (1920x1200) hard-locked
   so the chip-overlap math stays predictable. The bottom strip beneath the
   image (created by overflow-y padding via aspect-ratio) is where the chip
   floats — we use a flex column with extra bottom space instead of padding
   the body since the body is now an <a><img>. */
.pr-hero-product-shot {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1200;
  background: var(--color-surface-card);
  overflow: hidden;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.pr-hero-product-shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top left;
  display: block;
  /* hairline desaturation so the screenshot doesn't fight the page palette */
  filter: saturate(0.95);
}
.pr-hero-product-shot:hover img {
  filter: saturate(1);
}

/* Floating $4 price chip anchored bottom-left of the product window.
   Sits half off-card so it reads as a separate object layered over the
   product. Deep-green carries the brand. */
.pr-hero-price-chip {
  position: absolute;
  left: -24px;
  bottom: -28px;
  z-index: 2;
  padding: var(--gap-md) var(--gap-md);
  background: var(--brand-green-deep);
  border-radius: var(--r-lg);
  box-shadow:
    0 1px 2px var(--pr-suite-hr-mid),
    0 18px 40px rgba(10, 74, 37, 0.28);
  /* center the units stack against the monumental $4 instead of baseline-aligning
     to it (units were sitting at the bottom of the chip, leaving dead space
     at the top). 2026-05-22. */
  display: flex; align-items: center; gap: var(--gap-tween);
}
.pr-hero-price-chip-amount {
  font-size: 72px;
  font-weight: var(--fw-light);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.pr-hero-price-chip-cur {
  font-size: var(--text-xl);
  font-weight: var(--fw-regular);
  color: var(--white);
  opacity: 0.78;
  vertical-align: top;
  margin-right: 2px;
}
.pr-hero-price-chip-units {
  display: flex; flex-direction: column;
  gap: var(--gap-2xs);
  padding-left: var(--gap-tween);
  border-left: 1px solid var(--brand-green);
}
.pr-hero-price-chip-units span {
  /* bumped from --text-eyebrow (~11px) to --text-xs (~13px) so the units
     read as readable copy, not a label */
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  color: var(--brand-green-bright);
  line-height: 1.4;
}
.pr-hero-price-chip-units .pr-hero-price-chip-unit-lead {
  color: var(--white);
  font-weight: var(--fw-semibold);
}

@media (max-width: 900px) {
  .pr-hero-price-chip { left: var(--gap-xs); bottom: -20px; padding: var(--gap-tween) var(--gap-tween); }
  .pr-hero-price-chip-amount { font-size: 52px; }
  .pr-hero-price-chip-cur { font-size: var(--text-lg); }
}
/* Proof row */
.pr-hero-chips {
  list-style: none; padding: 0;
  margin: var(--gap-mlg) 0 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--gap-xs) var(--gap-md);
}
@media (max-width: 900px) {
  .pr-hero-inner { grid-template-columns: 1fr; gap: var(--gap-lg); }
  .pr-hero-product { align-self: start; }
}
.pr-hero-chips li {
  display: inline-flex; align-items: center; gap: var(--gap-xs);
  font-size: var(--text-sm); font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
}
.pr-hero-chips li svg {
  width: 14px; height: 14px; flex-shrink: 0;
  padding: var(--gap-2xs);
  box-sizing: content-box;
  background: var(--green-wash-15);
  border-radius: 50%;
  color: var(--accent-text);
}

.pr-hero-cta {
  display: flex;
  gap: var(--gap-sm);
  margin-top: var(--gap-mlg);
  flex-wrap: wrap;
  justify-content: center;
}

/* 2026-06-05: .pr-close-cta band removed. Its chips duplicated the total-strip
   foot and the "05 Get started" panel already carries the closing CTA + trust
   chips, so the band was cut from pricing.html along with these rules. */

/* Hero lede + AEO answer */
.pr-hero-lede {
  /* 2026-06-05: sized for a clear, objective sub — between the old tiny 16-19
     and the oversized gs 20-25. Tighter 46ch measure so the two short
     sentences set as a clean two lines, centered. h1 owns the gap above. */
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  letter-spacing: -0.014em;
  color: var(--color-text-secondary);
  margin: 0 auto;
  max-width: 50ch;
}
.pr-hero-lede strong {
  color: var(--color-text-primary);
  font-weight: var(--fw-semibold);
}
/* 2026-05-24: bg was --surface-tint-warm (cream) which read as a random
   cream block below the white pricing summary. Dropped to transparent
   with a thin top rule; the block now reads as continuation of the
   pricing context, not a separate card. */
.pr-suites .pr-hero-answer {
  max-width: 760px;
  margin: var(--gap-lg) auto 0;
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 32px) 0;
  background: transparent;
  border: none;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-secondary);
  text-align: left;
}
.pr-suites .pr-hero-answer strong { color: var(--color-text-primary); font-weight: var(--fw-semibold); }
.pr-suites .pr-hero-answer a {
  color: var(--color-text-secondary); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--teal-wash-18);
}
.pr-suites .pr-hero-answer a:hover { text-decoration-color: var(--color-overlay-shadow-32); }

/* Freshness stamp + disclaimer alignment — 2026-05-25: was text-align: left
   per a prior decision to align with the disclaimer paragraph above. User
   now wants both centered (matches the editorial section-eyebrow centering
   used elsewhere on the page). Centering the stamp; pricing-scoped rule
   below centers the disclaimer text too. */
.pr-updated {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--gap-xs) var(--pad-inner) var(--gap-lg);
  background: var(--surface-page);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  letter-spacing: 0.01em;
  text-align: center;
}
/* Pricing fineprint wrapper — centers the disclaimer + freshness stamp as
   a single block without touching the sitewide .wz-disclaimer atom (other
   pages keep their own alignment). 2026-05-25. */
.pr-fineprint { text-align: center; }
.pr-fineprint .wz-disclaimer-text,
.pr-fineprint .wz-disclaimer-inner { text-align: center; }

/* =============================================================================
   2. SUITES — interactive selector cards
   ============================================================================= */
/* Suite accent palette — collapsed to a single brand-green scale for all four
   suites. 2026-06-05: rainbow was removed (per-suite hue tokens made cards
   read cheap at a glance). All four cards now share the same green tokens so
   selection state and hover are the only visual differentiators.
     --sc        primary accent (selected ring, section-label, divider)
     --sc-light  subtle card surface tint when selected
     --sc-mid    border tint (top stripe on unselected card)
     --sc-pill   module-chip bg (replaced by neutral gray scale below) */
.pr-suite-card {
  --sc:       var(--accent);
  --sc-light: var(--green-wash-06);
  --sc-pill:  var(--green-wash-12);
  --sc-mid:   var(--green-wash-14);
}
/* All four suites resolve to the same base green — no per-suite hue override. */
.pr-suite-card[data-suite="hr"],
.pr-suite-card[data-suite="wf"],
.pr-suite-card[data-suite="pay"],
.pr-suite-card[data-suite="talent"] {
  --sc:       var(--accent);
  --sc-light: var(--green-wash-06);
  --sc-pill:  var(--green-wash-12);
  --sc-mid:   var(--green-wash-14);
}

/* Price is near-black, NOT green — the price is data, not branding. */
.pr-suite-card .pr-suite-price { color: var(--color-text-primary); }

/* Module rows: no grey behind them. Each module is a clean line — a
   dark-green icon on a light-green tile + label — defined in the canonical
   .pr-suite-module-tag rules below. 2026-06-05: removed the old gray-1 row
   background + gray-2 border + muted-grey icon that were overriding the
   green tiles on specificity (the grey Matthew flagged). */

/* Selected-card: flat green-wash bg + crisp inset ring. Calm and premium.
   2026-06-05: single green accent everywhere; top-border goes full accent
   on selection. */
.pr-suite-card[data-selected="true"]:not(.pr-suite-core) {
  /* Composite the wash over the opaque card surface so the section's
     wz-bg-dots don't bleed through the translucent green. 2026-06-05. */
  background: linear-gradient(var(--green-wash-06), var(--green-wash-06)), var(--color-surface-card);
}

.pr-suites {
  /* 2026-06-05: tightened top so the calculator sits right under the hero
     headline instead of after a tall gap. */
  padding: var(--gap-lg) 0 var(--section-v);
  background: var(--color-page);
}
/* Width override removed 2026-05-25 — pricing picks up sitewide --max-w
   (1600px) so the 4-across row gets the +40px it needs to breathe. */
.pr-suites-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-tween);
  margin-top: var(--gap-mlg);
  align-items: stretch;
}
/* Card base: white surface, 1px neutral border, generous radius.
   No rainbow top-border on the base card — top accent only on selected.
   2026-06-05: Stripe/Linear/Vercel pattern — clean white, nothing
   "in your face" until a card is selected. */
.pr-suite-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: none;
  transition: border-color var(--dur-snap) var(--ease),
              box-shadow var(--dur-snap) var(--ease),
              background var(--dur-snap) var(--ease),
              transform var(--dur-snap) var(--ease);
}
.pr-suite-card-inner {
  /* 2026-05-25: bumped top + bottom from 28/32 → 32/40 for more breathing
     room. Sides stay tighter at 4-across via media query below. */
  padding: var(--gap-mlg) var(--pad-inner-sm) var(--gap-lg);
  display: flex; flex-direction: column; flex: 1;
}
.pr-suite-header {
  /* 2026-05-25: min-height locks the header row to 32px (= optional badge
     diameter). HR's CORE pill is shorter (~22px) than the 32px optional
     circles, which was bouncing the $4 row up on HR vs the other three —
     reads as broken symmetry. Lock the row, center vertically, $4 aligns. */
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-xs); margin-bottom: var(--gap-md);
  min-height: 32px;
}
.pr-suite-badge {
  font-size: var(--text-eyebrow); font-weight: var(--fw-bold);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: var(--gap-2xs) var(--gap-xs); border-radius: var(--r-sm);
  white-space: nowrap; flex-shrink: 0;
  background: var(--sc-light); color: var(--sc); border: 1px solid var(--sc-mid);
}
/* Required badge (HR Core) = solid filled brand-green pill. Differentiates
   from the per-suite-tinted optional outline so "core" reads as included,
   not as another card to choose. 2026-05-25. */
.pr-suite-badge.required {
  background: var(--brand-green-deep);
  color: var(--white);
  border-color: var(--brand-green-deep);
}
/* .pr-suite-badge.optional + .pr-suite-action moved to pricing.html inline
   <style> (2026-05-22) — the corner badge is now the only selection
   affordance; the bottom "Add suite" pill was deleted. */
.pr-suite-name {
  font-size: var(--text-base); font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.02em; line-height: 1.2;
}
/* Price block: naked at the top of the card (no tint background, no radius).
   Decision 2026-05-22 — modern SaaS (Stripe/Linear/Mercury/Ramp) never wrap
   prices in tinted boxes; the price is already the dominant mark. Color is
   --brand-green-deep so it reads as a branded anchor per card. */
.pr-suite-price-row {
  display: flex; align-items: baseline; gap: var(--gap-xs);
  margin: 0 0 var(--pad-inner-xs);
  padding: 0;
  background: transparent;
}
/* one-off art: 64px display number — card-level monumental price (display class).
   2026-06-05: price is near-black (data, not branding). Per Stripe/Linear/Vercel
   pricing pages — the price is the dominant mark, not a coloured brand signal. */
.pr-suite-price {
  font-size: 64px; font-weight: var(--fw-light); letter-spacing: -0.05em;
  color: var(--color-text-primary); line-height: 1;
}
.pr-suite-price-meta {
  font-size: var(--text-eyebrow); line-height: 1.55;
  color: var(--color-text-muted); font-weight: var(--fw-medium);
}
/* Shared monumental stat baseline — consolidated 2026-05-25. Every "value
   display" number on the page (suite price, viz bar values, killed fee
   costs, scale totals) shares tabular nums + tight tracking. Each rule
   only sets what's unique (size, weight, color). Fixed inconsistency:
   .pr-suite-price was missing tabular-nums, so the four $4s weren't
   sitting on the same number grid as the rest of the page. */
.pr-suite-price,
.pr-pri-viz-bar-val,
.pr-pri-viz-fee-cost,
.pr-pri-viz-scale-total {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.pr-suite-divider {
  height: 1px; background: var(--color-border); margin: 0 0 var(--gap-md);
}
.pr-suite-bottom { flex: 1; display: flex; flex-direction: column; }
/* 2026-06-05: removed min-height (was for layout alignment with deleted
   "Includes" block). margin-bottom removed since modules are now the last
   item in the card bottom; padding on card-inner handles the floor. */
/* Modules — stacked vertical list, one per row (2026-06-05). Was a wrapping
   row of grey chips that read as noisy tags; now each module is a clear line
   with a green-tinted icon tile + label, so "what's included" scans top to
   bottom like a spec list. */
.pr-suite-modules {
  display: flex; flex-direction: column; gap: var(--gap-sm);
  align-content: flex-start;
}
.pr-suite-module-tag {
  width: 100%;
  font-size: var(--text-sm); font-weight: var(--fw-medium); letter-spacing: 0;
  padding: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--color-text-primary);
  border: 0;
  display: flex; align-items: center; gap: var(--gap-sm);
}
.pr-suite-module-tag svg {
  /* dark-green icon on a light-green tile — the "spec list" look Matthew
     asked for. 2026-06-05: deepened icon to brand-green-deep, larger tile. */
  width: 34px; height: 34px; flex-shrink: 0; padding: 8px;
  box-sizing: border-box;
  color: var(--brand-green-deep);
  background: var(--green-wash-09); border-radius: var(--r-md);
  stroke-width: 2;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
/* On card hover / selection, the icon tiles deepen — color lives in the tile,
   not the whole row, so the list stays calm. */
.pr-suite-card:hover .pr-suite-module-tag svg,
.pr-suite-card[data-selected="true"] .pr-suite-module-tag svg {
  background: var(--green-wash-15);
}
.pr-suite-section-label {
  font-size: var(--text-eyebrow); font-weight: var(--fw-bold);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 var(--gap-sm); display: block;
}
/* .pr-suite-features + li::before removed 2026-06-05 — the "Includes"
   feature-list block was deleted from all four suite cards (too dense).
   Rules kept as stubs so any future reintroduction doesn't need rewriting. */
.pr-suite-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--gap-tween); }
.pr-suite-features li { font-size: var(--text-xs); color: var(--color-text-primary); line-height: 1.6; font-weight: var(--fw-regular); }
/* Addable cards: pointer cursor, accent hover border + subtle lift.
   2026-06-05: no shadow on base — just border accent and tiny translate
   so unselected cards stay calm and the selection state pops. */
.pr-suite-card:not(.pr-suite-core) { cursor: pointer; }
.pr-suite-card:not(.pr-suite-core):hover {
  transform: var(--hover-lift);
  border-color: var(--accent);
  box-shadow: 0 4px 16px var(--green-wash-12);
}
/* Selected card: crisp 1.5px inset accent ring + green-wash background.
   The ring is inset so the card doesn't shift size. Shadow gives gentle
   elevation above the unselected cards. */
.pr-suite-card[data-selected="true"]:not(.pr-suite-core) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 4px 20px var(--green-wash-18);
}
/* Hover-when-selected: ring stays constant, lift stays. No twitch. */
.pr-suite-card[data-selected="true"]:not(.pr-suite-core):hover {
  transform: var(--hover-lift);
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 6px 24px var(--green-wash-22);
}
/* Core card (HR, always selected): matches the selected aesthetic —
   same inset ring + wash so it reads as part of the same selection language.
   No different border color just because it's required. */
.pr-suite-core {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 4px 20px var(--green-wash-18);
  background: var(--green-wash-06);
}

/* Desktop 4-across (>=1100px). Below 1100px, the default 2x2 rule (line 376)
   still applies; the existing <768px mobile collapse stays intact. Pulls all
   four suites into one row so toggling never pushes the total price out of
   the viewport — see plan in-price-page-also-swirling-hellman.md (2026-05-25). */
@media (min-width: 1100px) {
  .pr-suites-grid { grid-template-columns: repeat(4, 1fr); }
  .pr-suite-card-inner { padding: var(--gap-mlg) var(--gap-mlg) var(--gap-lg); }
  /* 2026-06-05: removed the 124px min-height that was pinned to align the
     now-deleted "Includes" labels. Let the module pills size naturally. */
  .pr-suite-price { font-size: clamp(44px, 4.4vw, 56px); }
}

/* =============================================================================
   3. CALCULATOR CONTROLS — employees, billing cycle, nonprofit toggle
   ============================================================================= */
/* Controls — centered panel (2026-06-05). Team size is the primary input
   (big number + slider + one-tap presets); billing / currency / discount are
   secondary preferences in a centered row beneath, separated by a thin rule.
   Replaces the old left-aligned four-across form row that clashed with the
   centered hero above it. */
.pr-controls {
  /* 2026-06-05: all four controls (Employees / Billing / Currency / Discount)
     on ONE centered, bottom-aligned row. Was a tall stack (big employee field
     + slider + presets above a separate prefs row). */
  /* 2026-06-05: left-aligned to sit flush under the "1. Set details" step
     head (was centered). */
  max-width: 860px;
  margin: 0 0 var(--gap-lg);
  display: flex; flex-wrap: wrap;
  justify-content: flex-start; align-items: flex-end;
  gap: var(--gap-md) var(--pad-inner-xs);
}
/* Compact employee number input — sits inline with the other controls. */
.pr-emp-input {
  width: 116px; height: 52px; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Primary: team size */
.pr-emp-field {
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--gap-md);
}
.pr-emp-head { display: flex; flex-direction: column; align-items: center; gap: var(--gap-sm); }
.pr-emp-label {
  font-size: var(--text-lg); font-weight: var(--fw-semibold);
  letter-spacing: -0.01em; color: var(--color-text-primary);
}
.pr-emp-input-wrap { display: inline-flex; align-items: baseline; gap: var(--gap-xs); }
.pr-emp-input-suffix {
  font-size: var(--text-md); font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
}
.pr-control-input {
  width: 160px; height: 52px; padding: 0 var(--gap-tween);
  font-size: var(--text-md); font-weight: var(--fw-semibold);
  font-family: var(--font);
  color: var(--color-text-primary); background: var(--color-surface-card);
  border: 1.5px solid var(--color-border); border-radius: var(--r-md); outline: none;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
  -moz-appearance: textfield;
}
/* Employee field input: big and centered — it's the page's main interaction. */
.pr-emp-field .pr-control-input {
  width: 132px; height: 64px; text-align: center;
  font-size: var(--text-xl); font-weight: var(--fw-bold);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.pr-control-input::-webkit-outer-spin-button,
.pr-control-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.pr-control-input:focus {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 3px var(--green-wash-09);
}

/* Team-size slider — tactile "drag to your size" (log-scaled in JS, 1-10000). */
.pr-emp-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; max-width: 440px; height: 6px;
  background: var(--color-border); border-radius: var(--r-sm);
  outline: none; cursor: pointer;
}
.pr-emp-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand-green-deep); border: 3px solid var(--white);
  box-shadow: 0 1px 4px var(--color-overlay-shadow-32);
  cursor: pointer; transition: transform var(--dur-fast) var(--ease);
}
.pr-emp-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.pr-emp-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand-green-deep); border: 3px solid var(--white);
  box-shadow: 0 1px 4px var(--color-overlay-shadow-32); cursor: pointer;
}
.pr-emp-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--green-wash-15); }
.pr-emp-slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--green-wash-15); }

/* One-tap common sizes */
.pr-emp-presets { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-xs); }
.pr-emp-preset {
  min-width: 60px; padding: var(--gap-xs) var(--gap-tween);
  font-family: var(--font); font-size: var(--text-sm); font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary); background: var(--color-surface-card);
  border: 1.5px solid var(--color-border); border-radius: var(--r-sm); cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.pr-emp-preset:hover { border-color: var(--green-wash-30); color: var(--color-text-primary); }
.pr-emp-preset.is-active {
  color: var(--brand-green-text); border-color: var(--accent);
  background: var(--green-wash-06);
}

/* Secondary preferences — centered row under the team-size block */
.pr-prefs-row {
  width: 100%;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end;
  gap: var(--pad-inner-xs);
  padding-top: var(--gap-mlg);
  border-top: 1px solid var(--color-border);
}
.pr-control-group { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-xs); }
/* Desktop: keep billing / currency / discount on one bottom-aligned row.
   They wrap on mobile via the default flex-wrap above. 2026-06-05. */
@media (min-width: 769px) {
  .pr-controls { flex-wrap: nowrap; align-items: flex-end; }
}
.pr-control-label {
  font-size: var(--text-eyebrow); font-weight: var(--fw-bold);
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--color-text-primary);
  display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--gap-xs);
  flex-wrap: wrap;
}

/* Billing cycle — custom dropdown (2026-05-15). Native <select> can't render
   the green "Save 5%" badges inside its option list. */
.pr-cycle-dd { position: relative; min-width: 200px; }
.pr-cycle-dd-trigger {
  width: 100%; height: 52px; padding: 0 var(--gap-tween) 0 var(--gap-tween);
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: var(--gap-sm);
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  font-family: var(--font);
  color: var(--color-text-primary); background: var(--color-surface-card);
  border: 1.5px solid var(--color-border); border-radius: var(--r-md);
  cursor: pointer; outline: none;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.pr-cycle-dd-trigger:hover { border-color: var(--green-wash-30); }
.pr-cycle-dd-trigger:focus-visible,
.pr-cycle-dd.is-open .pr-cycle-dd-trigger {
  border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--green-wash-09);
}
.pr-cycle-dd-current { display: inline-flex; align-items: center; gap: var(--gap-xs); }
.pr-cycle-dd-chev {
  width: 12px; height: 8px; flex-shrink: 0;
  color: var(--color-text-tertiary);
  transition: transform var(--dur-fast) var(--ease);
}
.pr-cycle-dd.is-open .pr-cycle-dd-chev { transform: rotate(180deg); }
.pr-cycle-dd-panel {
  position: absolute; z-index: 20; top: calc(100% + var(--gap-2xs)); left: 0; right: 0;
  margin: 0; padding: var(--gap-2xs); list-style: none;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border); border-radius: var(--r-md);
  box-shadow: 0 16px 40px var(--teal-wash-14);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              visibility var(--dur-fast) var(--ease);
}
.pr-cycle-dd.is-open .pr-cycle-dd-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.pr-cycle-dd-option {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-sm);
  padding: var(--gap-sm) var(--gap-sm); border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur-snap) var(--ease);
}
.pr-cycle-dd-option:hover { background: var(--green-wash-06); }
.pr-cycle-dd-option.is-selected { background: var(--green-wash-09); }
.pr-cycle-dd-option.is-active-key { background: var(--green-wash-06); }
.pr-cycle-dd-name {
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}
.pr-cycle-dd-note {
  font-size: var(--text-xs); font-weight: var(--fw-medium);
  color: var(--color-text-tertiary);
}

/* Nonprofit toggle — same visual language as billing dropdown */
.pr-nonprofit-toggle {
  height: 52px; padding: 0 var(--pad-inner-xs);
  display: inline-flex; align-items: center; gap: var(--gap-xs);
  background: var(--color-surface-card);
  border: 1.5px solid var(--color-border); border-radius: var(--r-md);
  cursor: pointer;
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  font-family: var(--font);
  color: var(--color-text-primary);
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.pr-nonprofit-toggle:hover {
  color: var(--color-text-primary); border-color: var(--accent-text);
}
.pr-nonprofit-toggle[data-active="true"] {
  background: var(--accent); border-color: var(--accent-text);
  color: var(--white); box-shadow: 0 1px 4px var(--green-wash-22);
}
.pr-nonprofit-toggle[data-active="true"] .badge-success {
  background: rgba(255,255,255,0.2); color: var(--white);
}
.pr-nonprofit-check {
  width: 18px; height: 18px; border-radius: var(--r-sm);
  border: 1.5px solid var(--color-text-muted); background: transparent;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.pr-nonprofit-toggle[data-active="true"] .pr-nonprofit-check {
  background: var(--white); border-color: rgba(255,255,255,0.8);
}
.pr-nonprofit-check svg {
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
  color: var(--accent-text);
}
.pr-nonprofit-toggle[data-active="true"] .pr-nonprofit-check svg {
  opacity: 1; color: var(--accent-text);
}
/* −5% badge: bigger and optically centered in the toggle. Was the default tiny
   eyebrow badge; bumped to text-xs with even padding so the discount reads as a
   real value, not a footnote. 2026-06-05. */
.pr-nonprofit-toggle .badge-success {
  display: inline-flex; align-items: center;
  font-size: var(--text-xs); font-weight: var(--fw-bold);
  line-height: 1; padding: 4px 8px;
  font-variant-numeric: tabular-nums;
}

/* =============================================================================
   4. TOTAL STRIP — monumental estimate + savings preview
   ============================================================================= */
/* 2026-06-05: wide horizontal invoice card. estimate (left) + always-visible
   breakdown panel (right); foot row spans both. Was a tall centered column
   with the breakdown hidden in a <details>. */
.pr-total-strip {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  column-gap: var(--gap-xl);
  row-gap: var(--gap-md);
  text-align: left;
  margin-top: var(--gap-lg);
  padding: var(--gap-lg) var(--gap-xl);
  background: linear-gradient(135deg, var(--color-surface-card) 0%, var(--green-wash-02) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: 0 16px 48px var(--teal-wash-08);
  position: relative;
  overflow: hidden;
}
.pr-total-strip::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 0% 0%, var(--green-wash-06) 0%, transparent 55%);
}
.pr-total-main {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start;
}
.pr-total-label {
  font-size: var(--text-eyebrow); font-weight: var(--fw-bold);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-text); margin: 0 0 var(--gap-xs);
}
/* summary line "HR · 100 employees · 1 suite" (.pr-total-summary owns base
   styling in the inline block; this keeps the dead .pr-total-breakdown class
   harmless) */
.pr-total-breakdown {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: var(--fw-medium);
  line-height: 1.5;
}
/* one-off art: monumental number, sized to live in the left half */
.pr-total-amount {
  font-size: clamp(58px, 7vw, 96px);
  font-weight: var(--fw-light);
  letter-spacing: -0.05em;
  color: var(--color-text-primary);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  transition: transform var(--dur-fast) cubic-bezier(0.23,1,0.32,1),
              opacity var(--dur-fast) var(--ease);
}
.pr-total-amount.updating {
  transform: translateY(-4px);
  opacity: 0.4;
}
.pr-total-period {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  margin-top: var(--gap-xs);
}
.pr-total-was {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  text-decoration: line-through;
  text-decoration-color: var(--color-overlay-shadow-32);
  text-decoration-thickness: 1.5px;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
  margin-top: var(--gap-xs);
}
.pr-total-floor-note {
  display: inline-flex; align-items: center; gap: var(--gap-2xs);
  margin-top: var(--gap-sm);
  font-size: var(--text-xs); font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  line-height: 1.4;
  max-width: 380px;
  text-align: left;
}
.pr-total-floor-note[hidden] { display: none; }
.pr-total-floor-note::before {
  content: ''; flex-shrink: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-text);
  opacity: 0.55;
}
.pr-total-savings-pill {
  margin-top: var(--gap-md);
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  padding: var(--gap-xs) var(--gap-tween);
  background: var(--green-wash-08);
  border: 1px solid var(--green-wash-30);
  color: var(--brand-green-deep);
  border-radius: var(--r-md);
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}
/* Breakdown panel — always visible (no <details>), right column. */
.pr-total-breakdown-panel {
  position: relative; z-index: 1;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  /* 2026-06-05: more breathing room — the rows read as a cramped stack before.
     Larger inner padding + row gap so each line gets its own space. */
  padding: var(--gap-mlg);
  display: flex; flex-direction: column; gap: var(--gap-sm);
}
.pr-total-breakdown-panel .pr-breakdown-row { font-size: var(--text-sm); }
.pr-breakdown-heading {
  font-size: var(--text-eyebrow); font-weight: var(--fw-bold);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 var(--gap-2xs);
}
.pr-breakdown-row--total {
  margin-top: var(--gap-2xs); padding-top: var(--gap-xs);
  border-top: 1px solid var(--color-border);
}
.pr-breakdown-row--total .pr-breakdown-label,
.pr-breakdown-row--total .pr-breakdown-value {
  font-weight: var(--fw-bold); color: var(--color-text-primary);
}
.pr-total-foot {
  grid-column: 1 / -1;
  position: relative; z-index: 1;
  /* 2026-06-05: more separation from the breakdown above + wider gap between
     the two reassurance items so the foot reads as its own calm row. */
  margin-top: var(--gap-sm); padding-top: var(--gap-md);
  border-top: 1px solid var(--color-border);
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-sm) var(--gap-xl);
  font-size: var(--text-eyebrow); color: var(--color-text-secondary);
}
@media (max-width: 880px) {
  .pr-total-strip {
    grid-template-columns: 1fr; text-align: center;
    padding: var(--gap-lg) var(--pad-inner-sm);
  }
  .pr-total-main { align-items: center; }
  .pr-total-floor-note { text-align: center; }
}
.pr-total-foot strong { color: var(--color-text-primary); font-weight: var(--fw-semibold); }
.pr-total-foot-item { display: inline-flex; align-items: center; gap: var(--gap-sm); }
.pr-total-foot-item svg { color: var(--accent-text); flex-shrink: 0; }

/* =============================================================================
   5. CTA — closing panel
   ============================================================================= */
.pr-cta {
  padding: var(--section-snug-v) 0;
  background: var(--color-page);
}
.pr-cta-panel {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(44px, 6vw, 72px) clamp(28px, 5vw, 64px);
  background: var(--surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.pr-cta h2 {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: var(--fw-regular);
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
  margin-bottom: var(--gap-tween);
}
.pr-cta p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  max-width: 480px;
  margin: 0 auto 36px;
  line-height: 1.65;
}
/* "Send an RFP instead" inline link — was inheriting the UA blue. Brand it
   green with a subtle underline so it reads as a quiet secondary path, not a
   default hyperlink. 2026-06-05. */
.pr-cta p a {
  color: var(--brand-green-text);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--green-wash-30);
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
.pr-cta p a:hover { text-decoration-color: var(--brand-green-text); }
.pr-cta-trust {
  margin-top: var(--gap-md);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  display: flex;
  gap: var(--pad-inner-sm);
  justify-content: center;
  flex-wrap: wrap;
}
.pr-cta-trust span {
  display: flex; align-items: center; gap: var(--gap-xs);
}
.pr-cta-trust svg {
  width: 16px; height: 16px; color: var(--accent-text); flex-shrink: 0;
}

/* =============================================================================
   6. RESPONSIVE — pricing-grid + collapse toggle
   ============================================================================= */
@media (max-width: 1200px) {
  .pr-suites-grid { grid-template-columns: repeat(2, 1fr); gap: var(--gap-tween); }
}
/* Suite-card collapse mechanic + collapse-toggle base styles promoted to
   default scope in pricing.html inline <style> on 2026-05-22 (was mobile-only
   here). Only the responsive grid + total-strip stack remain mobile-only. */
@media (max-width: 768px) {
  .pr-suites-grid { grid-template-columns: 1fr; gap: var(--gap-sm); max-width: 440px; }
  .pr-controls { flex-direction: column; gap: var(--gap-tween); }
  .pr-total-strip { padding: var(--pad-inner-xs) var(--pad-inner-xs); }
  /* mobile-only: shrink the monumental total to avoid line-wrap */
  .pr-total-amount { font-size: 48px; }
}
@media (max-width: 480px) {
  .pr-suite-card-inner { padding: var(--gap-md) var(--gap-md) var(--gap-md); }
}

/* Count-up keyframe + reduced-motion */
@keyframes pr-count-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.pr-total-strip.is-visible .pr-total-amount {
  animation: pr-count-in 0.6s cubic-bezier(0.23,1,0.32,1) 0.15s both;
}
.pr-total-strip.is-visible .pr-total-savings-pill {
  animation: pr-count-in 0.5s cubic-bezier(0.23,1,0.32,1) 0.3s both;
}
@media (prefers-reduced-motion: reduce) {
  .pr-total-amount { transition: none; }
  .pr-total-strip.is-visible .pr-total-amount,
  .pr-total-strip.is-visible .pr-total-savings-pill { animation: none; }
}

/* =============================================================================
   6b. COMPETITOR COMPARE — published-rates table (verified vs canonical compare.html)
   ============================================================================= */
.pr-compare {
  padding: var(--section-snug-v) 0;
  background: var(--surface-tint-warm);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.pr-compare .inner { max-width: 1080px; margin: 0 auto; padding: 0 var(--pad-inner); }
.pr-compare-foot {
  /* 2026-06-05: centered + width-capped, and the full sourcing detail moved
     into the collapsible below so the section reads lighter. */
  margin: var(--gap-mlg) auto 0;
  max-width: 660px; text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  line-height: 1.6;
  font-style: normal;
}
.pr-compare-sourcing { margin-top: var(--gap-sm); }
.pr-compare-sourcing-body {
  margin: var(--gap-sm) auto 0; max-width: 640px;
  padding: var(--pad-inner-xs) var(--gap-md);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border); border-radius: var(--r-md);
  font-size: var(--text-xs); color: var(--color-text-tertiary);
  line-height: 1.65; text-align: left;
}

/* =============================================================================
   7. MINIMUMS DETAIL — collapsed by default. Most buyers (100+ EE) don't
      hit the floor; small-team buyers click to expand. 2026-05-22.
   ============================================================================= */
.pr-min-detail {
  margin: var(--gap-mlg) auto 0;
  max-width: 620px;
  /* centers the inline-flex summary chip below the calculator (2026-06-05) */
  text-align: center;
}
.pr-min-detail > summary {
  display: inline-flex; align-items: center; gap: var(--gap-xs);
  cursor: pointer; list-style: none; user-select: none;
  padding: var(--gap-xs) var(--gap-sm);
  border-radius: var(--r-sm);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-green-text);
  transition: background var(--dur-fast) var(--ease);
}
.pr-min-detail > summary::-webkit-details-marker { display: none; }
.pr-min-detail > summary:hover { background: var(--green-wash-05); }
.pr-min-detail > summary svg {
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease);
}
.pr-min-detail[open] > summary svg { transform: rotate(180deg); }
.pr-min-detail-body {
  margin-top: var(--gap-sm);
  padding: var(--pad-inner-sm) var(--gap-mlg);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
}
.pr-min-detail-note {
  font-size: var(--text-xs); color: var(--color-text-secondary);
  line-height: 1.6; margin: 0 0 var(--gap-tween);
}
.pr-min-detail-note strong {
  color: var(--color-text-primary); font-weight: var(--fw-semibold);
}
.pr-min-detail-table {
  border-collapse: collapse; font-size: var(--text-xs); width: 100%;
}
.pr-min-detail-table th {
  text-align: left;
  font-size: var(--text-eyebrow); font-weight: var(--fw-bold);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-tertiary);
  padding: 0 0 var(--gap-xs);
  border-bottom: 1px solid var(--color-border);
}
.pr-min-detail-table th:not(:first-child) { text-align: right; }
.pr-min-detail-table td {
  padding: var(--gap-xs) 0; color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}
.pr-min-detail-table td:not(:first-child) {
  color: var(--color-text-primary); font-weight: var(--fw-semibold);
  text-align: right;
}
.pr-min-detail-table tr + tr td { border-top: 1px solid var(--color-border); }

/* =============================================================================
   10. PRINCIPLES — manifesto + 2x2 cards with Mercury micro-visuals
   ============================================================================= */
.pr-principles {
  padding: var(--section-tight-v) 0;
  background: var(--color-page);
  border-top: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}
.pr-principles .inner { max-width: 1280px; margin: 0 auto; padding: 0 var(--pad-inner); position: relative; z-index: 1; }
/* Decorative gradient orb anchored top-right, Mercury painterly treatment */
.pr-principles::before {
  content: '';
  position: absolute;
  top: -180px; right: -160px;
  width: 520px; height: 520px;
  background: radial-gradient(circle at 30% 30%, var(--green-wash-08), transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.pr-principles-shell { display: flex; flex-direction: column; gap: var(--gap-lg); }
.pr-principles-head {
  text-align: center; max-width: 720px; margin: 0 auto;
}
.pr-principles-head .wz-editorial-eyebrow { justify-content: center; }
.pr-principles-head .wz-editorial-title {
  margin: var(--gap-sm) 0 var(--gap-tween);
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.pr-principles-head .wz-editorial-lead {
  max-width: 56ch; margin: 0 auto;
}
.pr-principles-legend { display: none; }
.pr-principles-legend-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: var(--gap-sm);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  letter-spacing: -0.005em;
}
.pr-principles-legend-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--brand-green-light), var(--brand-green-bright));
  color: var(--white);
  font-size: var(--text-eyebrow); font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 14px var(--green-wash-30);
}

/* 2x2 grid of compact principle cards */
.pr-principles-rail {
  display: grid;
  /* minmax(0,1fr) (not 1fr) so a column can shrink below its content's
     min-content width — otherwise the viz rows force the track wider than the
     container and the card overflows on mobile. 2026-06-05. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--pad-inner-xs);
}
.pr-pri-row {
  position: relative;
  min-width: 0;
  display: flex; flex-direction: column;
  gap: var(--gap-sm);
  padding: var(--pad-inner-sm) var(--pad-inner-sm);
  background: var(--color-surface-card);
  border: 1px solid var(--border-card-tinted);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-snap) var(--ease),
              box-shadow var(--dur-snap) var(--ease),
              transform var(--dur-snap) var(--ease);
}
.pr-pri-row:hover {
  border-color: var(--green-wash-30);
  box-shadow: var(--shadow-card-hover);
  transform: var(--hover-lift);
}
.pr-pri-row + .pr-pri-row { position: relative; }
.pr-pri-row + .pr-pri-row::before { display: none; }
.pr-pri-row:first-child { padding-top: var(--pad-inner-sm); }
.pr-pri-row-copy {
  min-width: 0;
  display: flex; flex-direction: column; gap: var(--gap-xs);
}
.pr-pri-row-meta {
  /* 2026-05-25: switched from baseline → center now that the row number is
     a monumental sans display value (was inline serif). Center keeps the
     badge pill visually balanced against the bigger number. */
  display: flex; align-items: center; gap: var(--gap-md);
}
/* 2026-05-25: was previously rendering with the serif token — violated CLAUDE.md rule
   that serif is reserved for .wz-cs-stat-num only, and clashed with every
   other number on this page (Switzer). Now: monumental sans display number,
   light weight, muted color so it labels the principle without competing
   with the headline. Matches the Mercury/Stripe "huge thin number" anchor. */
.pr-pri-row-num {
  /* 2026-05-25: brand-green-deep matches .wz-editorial-eyebrow-digit (the
     "04 Pricing principles" mark on the left rail) so all numbers on the
     page sing in the same key. Was --color-text-tertiary (muted grey)
     which read as a footnote. */
  font-family: var(--font);
  font-size: clamp(40px, 4vw, 56px);
  font-weight: var(--fw-light);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: var(--brand-green-deep);
}
/* .pr-pri-row-tag is now a canonical .badge .badge-tint — no scoped rule needed */
.pr-pri-h {
  /* 2026-05-25: bumped from clamp(20,1.5vw,24) → clamp(23,2vw,28) so the
     question reads as a section header, not body text. Floor matches
     --text-md (23px); ceiling matches --text-lg. */
  font-size: clamp(23px, 2vw, 28px);
  font-weight: var(--fw-regular);
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--color-text-primary);
  margin: 0; text-wrap: balance;
}
/* 2026-05-25: stripped italic, font-weight, line-height. The gradient is
   the emphasis; em inherits parent type so nothing fights the headline. */
.pr-pri-h em {
  background: linear-gradient(135deg, var(--brand-green-light) 0%, var(--brand-green-bright) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  padding-bottom: 0.12em;
  padding-right: 0.08em;
  margin-right: -0.08em;
}
.pr-pri-body {
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
}
/* .pr-pri-foot rules deleted 2026-05-25 — the kicker line duplicated the
   headline; cleaner without it. */

/* 2026-05-24: surface-tint-cool bg killed (the "random blue" callout)
   and type sizes bumped one step (eyebrow -> xs / xs -> sm) because the
   "numbers are so tiny, graphics are mid too" feedback. Bars get a thicker
   track and a darker accent stop so the chart reads at editorial weight,
   not as decorative trim. */
.pr-pri-viz {
  align-self: stretch; flex: 1;
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: var(--pad-inner-sm);
  display: flex; flex-direction: column; gap: var(--gap-md);
  margin-top: var(--gap-xs);
  min-height: 0; position: relative; overflow: hidden;
}
.pr-pri-viz-label {
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-secondary); margin: 0;
}

/* Viz 1 — equal-bar chart: all four suites at $4 */
.pr-pri-viz--bars { gap: var(--gap-sm); }
.pr-pri-viz-bars {
  display: flex; flex-direction: column;
  flex: 1; justify-content: center; gap: var(--gap-sm);
}
.pr-pri-viz-bar-row {
  display: grid;
  grid-template-columns: 88px 1fr 44px;
  align-items: center;
  gap: var(--gap-sm);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  letter-spacing: -0.005em;
}
.pr-pri-viz-bar-track {
  /* 2026-05-25: per-suite color by row via nth-child + new --pr-suite-*
     tokens. Default uses brand-green gradient as fallback. Bars stay equal
     length (the principle is "same $4"); the color variance makes "4
     different suites" land visually instead of just textually. */
  height: 14px;
  border-radius: var(--r-lg);
  background: linear-gradient(90deg, var(--brand-green) 0%, var(--brand-green-bright) 100%);
  width: 92%;
  position: relative;
  box-shadow: 0 1px 0 var(--glass-white-18) inset, 0 1px 2px var(--green-wash-15);
}
.pr-pri-viz-bar-row:nth-child(1) .pr-pri-viz-bar-track {
  background: linear-gradient(90deg, var(--pr-suite-hr) 0%, color-mix(in srgb, var(--pr-suite-hr) 65%, white) 100%);
}
.pr-pri-viz-bar-row:nth-child(2) .pr-pri-viz-bar-track {
  background: linear-gradient(90deg, var(--pr-suite-pay) 0%, color-mix(in srgb, var(--pr-suite-pay) 65%, white) 100%);
}
.pr-pri-viz-bar-row:nth-child(3) .pr-pri-viz-bar-track {
  background: linear-gradient(90deg, var(--pr-suite-wf) 0%, color-mix(in srgb, var(--pr-suite-wf) 65%, white) 100%);
}
.pr-pri-viz-bar-row:nth-child(4) .pr-pri-viz-bar-track {
  background: linear-gradient(90deg, var(--pr-suite-talent) 0%, color-mix(in srgb, var(--pr-suite-talent) 65%, white) 100%);
}
.pr-pri-viz-bar-val {
  /* tabular-nums + letter-spacing now via shared stat baseline above */
  font-size: var(--text-lg); font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  text-align: right;
}

/* Viz 2 — strikethrough fee chips */
.pr-pri-viz-fees {
  display: flex; flex-direction: column;
  gap: var(--gap-xs);
  flex: 1; justify-content: center;
}
.pr-pri-viz-fee {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--gap-tween) var(--gap-mlg);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  font-size: var(--text-base);
  letter-spacing: -0.005em;
}
.pr-pri-viz-fee-name { color: var(--color-text-primary); font-weight: var(--fw-medium); }
/* 2026-05-25: was --text-sm (18px) — competitor sticker prices read as body
   text instead of as the comparison value they are. Now matches the row at
   --text-base (20px) and weights bold for sticker prominence. */
.pr-pri-viz-fee-cost {
  /* tabular-nums + letter-spacing now via shared stat baseline above */
  color: var(--color-text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--color-overlay-shadow-32);
  text-decoration-thickness: 1.5px;
  font-weight: var(--fw-bold);
  font-size: var(--text-md);
}
/* 2026-05-25: Workzoom row hero-ified. Bigger padding + brand-green-deep
   surface tint with green border so it visually wins against the 3
   strikethrough competitor rows above it. The $0 itself jumps to text-xl
   (38px) — the comparison should land like a punch line, not a footnote. */
.pr-pri-viz-fee--ours {
  background: linear-gradient(180deg, var(--green-wash-08), var(--green-wash-12));
  border-color: var(--brand-green-deep);
  border-width: 1.5px;
  padding: var(--gap-md) var(--gap-mlg);
  margin-top: var(--gap-xs);
}
.pr-pri-viz-fee--ours .pr-pri-viz-fee-name {
  color: var(--brand-green-deep); font-weight: var(--fw-bold);
  font-size: var(--text-base); letter-spacing: -0.005em;
}
.pr-pri-viz-fee--ours .pr-pri-viz-fee-cost {
  color: var(--brand-green-deep);
  text-decoration: none;
  font-weight: var(--fw-bold);
  font-size: var(--text-xl);
  letter-spacing: -0.04em;
}

/* Viz 3 — 12 month dots, last one open (cancel anytime) */
.pr-pri-viz-months {
  display: flex; align-items: center; justify-content: space-between;
  flex: 1; padding: var(--gap-xs) 0;
}
.pr-pri-viz-month {
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-bright) 100%);
  opacity: 0.95;
  flex-shrink: 0;
  box-shadow: 0 1px 0 var(--glass-white-18) inset, 0 1px 2px var(--green-wash-15);
}
/* 2026-05-25: was a faint dashed circle that read as "another dot." Now
   visibly an "exit" — slightly larger, dashed in brand-green-deep, with
   the surrounding fade so the eye reads it as "you can stop here." */
.pr-pri-viz-month--gap {
  width: 22px; height: 22px;
  background: var(--color-surface-card);
  border: 2px dashed var(--brand-green-deep);
  opacity: 1;
  box-shadow: none;
}
.pr-pri-viz-months-foot {
  display: flex; justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  letter-spacing: -0.005em;
  font-weight: var(--fw-medium);
  margin-top: var(--gap-xs);
}
.pr-pri-viz-months-foot span:last-child {
  color: var(--brand-green-deep); font-weight: var(--fw-bold);
}

/* Viz 4 — 2026-05-25: replaced abstract line chart with a 3-row "EE x $4 =
   total" calculation. Concrete arithmetic the CFO can actually scan, no
   clipping risk from absolutely-positioned labels in an overflow:hidden
   container. The principle (rate stays flat as you scale) lands as math,
   not as a comparison the reader has to interpret. */
.pr-pri-viz-scale {
  display: flex; flex-direction: column;
  gap: var(--gap-sm);
  flex: 1; justify-content: center;
}
.pr-pri-viz-scale-row {
  /* tabular-nums on .pr-pri-viz-scale-total via shared stat baseline */
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  align-items: baseline;
  gap: var(--gap-sm);
  padding: var(--gap-xs) 0;
}
.pr-pri-viz-scale-row + .pr-pri-viz-scale-row {
  border-top: 1px solid var(--color-border);
}
.pr-pri-viz-scale-ee {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}
.pr-pri-viz-scale-op {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  font-weight: var(--fw-regular);
}
.pr-pri-viz-scale-rate {
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--brand-green-deep);
}
.pr-pri-viz-scale-total {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  text-align: right;
}
@media (max-width: 880px) {
  /* Single column + content-sized rows. grid-auto-rows:1fr (desktop) forces
     every card to the tallest card's height, which leaves big dead space
     under the short cards once they stack. 2026-06-05. */
  .pr-principles-rail { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
}
@media (max-width: 768px) {
  .pr-pri-row { padding: var(--gap-md) var(--gap-md); }
  .pr-principles::before { width: 320px; height: 320px; }
}

/* =============================================================================
   11. TRUST — security spec strip
   ============================================================================= */
.pr-trust {
  padding: var(--section-snug-v) 0;
  background: var(--color-page);
  border-top: 1px solid var(--color-border);
}
.pr-trust-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: var(--gap-xl);
  max-width: 1080px; margin: 0 auto;
  align-items: start;
}
.pr-trust-aside .wz-editorial-title { margin: var(--gap-sm) 0 var(--gap-tween); }
.pr-trust-lead {
  font-size: var(--text-sm); color: var(--color-text-secondary);
  line-height: 1.62; margin: 0;
}
.pr-trust-cta {
  display: inline-flex; align-items: center; gap: var(--gap-xs);
  margin-top: var(--gap-md);
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  color: var(--brand-green-deep); text-decoration: none;
  transition: gap var(--dur-fast) var(--ease);
}
.pr-trust-cta:hover { gap: 11px; }
.pr-trust-cta svg { width: 14px; height: 14px; flex-shrink: 0; }
.pr-trust-specs { display: flex; flex-direction: column; }
.pr-trust-spec {
  display: flex; flex-direction: column; gap: var(--gap-2xs);
  padding: var(--gap-md) 0;
  border-top: 1px solid var(--color-border);
}
.pr-trust-spec:first-child { border-top: none; padding-top: 0; }
.pr-trust-spec:last-child { padding-bottom: 0; }
.pr-trust-spec-label {
  font-size: var(--text-eyebrow); font-weight: var(--fw-semibold);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-text); margin: 0;
}
.pr-trust-spec-title {
  font-size: var(--text-sm); font-weight: var(--fw-semibold);
  color: var(--color-text-primary); letter-spacing: -0.01em; margin: 0;
}
.pr-trust-desc {
  font-size: var(--text-xs); color: var(--color-text-secondary);
  line-height: 1.6; margin: 0;
}
@media (max-width: 860px) {
  .pr-trust-layout { grid-template-columns: 1fr; gap: var(--gap-lg); }
}

/* =============================================================================
   12. FOOTNOTES — collapsible definitions
   ============================================================================= */
.wz-fn {
  padding: var(--gap-lg) 0;
  background: var(--color-page);
  border-top: 1px solid var(--color-border);
}
.wz-fn-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-inner);
}
.wz-fn-toggle {
  display: flex; align-items: center; gap: var(--gap-2xs);
  font-family: var(--font);
  font-size: var(--text-eyebrow); font-weight: var(--fw-semibold);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-muted); background: none; border: none; cursor: pointer;
  padding: 0;
  transition: color var(--dur-micro) var(--ease-color);
}
.wz-fn-toggle:hover { color: var(--color-text-tertiary); }
.wz-fn-toggle svg {
  width: 12px; height: 12px;
  transition: transform var(--dur-fast) var(--ease);
}
.wz-fn-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.wz-fn-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-default) var(--ease);
}
.wz-fn-body[data-open] { grid-template-rows: 1fr; }
.wz-fn-body-inner { overflow: hidden; }
.wz-fn-list {
  padding-top: var(--gap-tween);
  columns: 2; column-gap: var(--gap-mlg);
}
.wz-fn-item {
  font-size: var(--text-eyebrow);
  color: var(--color-text-tertiary);
  line-height: 1.6;
  margin-bottom: var(--gap-xs);
  break-inside: avoid;
}
.wz-fn-term { font-weight: var(--fw-semibold); color: var(--color-text-secondary); }
@media (max-width: 768px) { .wz-fn-list { columns: 1; } }

/* =============================================================================
   ONE COST ARGUMENT — merged competitor comparison (CSS bar chart)
   Added 2026-06-02. Replaces the prior starting-price table + 3-year TCO table
   + hidden-costs grid with a single scannable graphic. Competitor figures stay
   as text for crawlers; included-at-$0 items fold into <details>.
   ============================================================================= */
.pr-cost { max-width: 980px; margin: var(--gap-xl) auto 0; }
.pr-cost-chart { display: flex; flex-direction: column; gap: var(--gap-xs); }
.pr-cost-row {
  display: grid;
  grid-template-columns: minmax(190px, 240px) 1fr minmax(96px, auto);
  align-items: center; gap: var(--gap-md);
  padding: var(--gap-sm) var(--gap-md);
  border-radius: var(--r-md); border: 1px solid transparent;
}
.pr-cost-row--wz { background: var(--green-wash-06); border-color: var(--green-wash-15); }
.pr-cost-vendor {
  display: flex; flex-direction: column; gap: 2px;
  font-size: var(--text-sm); font-weight: var(--fw-semibold);
  color: var(--color-text-primary); line-height: 1.25;
}
.pr-cost-vendor a { color: var(--color-text-primary); text-decoration: none; }
.pr-cost-vendor a:hover { color: var(--brand-green-text); text-decoration: underline; text-underline-offset: 3px; }
.pr-cost-vendor small {
  font-size: var(--text-xs); font-weight: var(--fw-medium);
  color: var(--color-text-tertiary); letter-spacing: 0;
}
.pr-cost-track {
  position: relative;
  height: 18px; background: var(--gray-1);
  border-radius: var(--r-sm); overflow: hidden;
}
/* Range extension — the "could run up to" zone for quote-based competitors.
   Sits behind the solid floor; the right edge marks the high estimate. */
.pr-cost-range {
  position: absolute; left: 0; top: 0; height: 100%;
  width: calc(var(--w-hi, var(--w)) * 1%);
  background: var(--n300); border-radius: var(--r-sm);
  border-right: 2px solid var(--n400);
  transition: width var(--dur-default) var(--ease);
}
/* Floor segment — the "at least" you pay. Layered on top of the range. */
.pr-cost-bar {
  position: absolute; left: 0; top: 0;
  height: 100%; width: calc(var(--w-lo, var(--w)) * 1%);
  background: var(--color-text-muted); border-radius: var(--r-sm);
  transition: width var(--dur-default) var(--ease);
}
.pr-cost-row--wz .pr-cost-bar { background: linear-gradient(90deg, var(--brand-green-light), var(--brand-green)); }

/* Bars grow in from left to right when the cost chart scrolls into view.
   scaleX preserves each bar's --w width; transform-origin:left = rightward
   growth. Staggered per row to echo the .fade row entrance. 2026-06-05. */
.pr-cost-bar, .pr-cost-range { transform-origin: left center; }
.pr-cost.is-visible .pr-cost-bar,
.pr-cost.is-visible .pr-cost-range { animation: prCostGrow 0.8s var(--ease) both; }
.pr-cost.is-visible .pr-cost-row:nth-child(1) .pr-cost-bar,
.pr-cost.is-visible .pr-cost-row:nth-child(1) .pr-cost-range { animation-delay: 0.05s; }
.pr-cost.is-visible .pr-cost-row:nth-child(2) .pr-cost-bar,
.pr-cost.is-visible .pr-cost-row:nth-child(2) .pr-cost-range { animation-delay: 0.15s; }
.pr-cost.is-visible .pr-cost-row:nth-child(3) .pr-cost-bar,
.pr-cost.is-visible .pr-cost-row:nth-child(3) .pr-cost-range { animation-delay: 0.25s; }
.pr-cost.is-visible .pr-cost-row:nth-child(4) .pr-cost-bar,
.pr-cost.is-visible .pr-cost-row:nth-child(4) .pr-cost-range { animation-delay: 0.35s; }
@keyframes prCostGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .pr-cost.is-visible .pr-cost-bar,
  .pr-cost.is-visible .pr-cost-range { animation: none; }
}
.pr-cost-total {
  font-size: var(--text-sm); font-weight: var(--fw-semibold);
  color: var(--color-text-primary); font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap;
}
.pr-cost-row--wz .pr-cost-total { color: var(--brand-green-text); }
/* Best-value flag on the Workzoom row */
.pr-cost-vendor-name { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.pr-cost-flag {
  display: inline-flex; align-items: center;
  padding: 1px 7px; border-radius: var(--r-sm);
  background: var(--brand-green-50); color: var(--brand-green-deep);
  font-size: var(--text-eyebrow); font-weight: var(--fw-bold);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.pr-cost-callout {
  max-width: 720px; margin: var(--gap-lg) auto 0; text-align: center;
  font-size: var(--text-base); font-weight: var(--fw-medium);
  color: var(--color-text-primary); line-height: 1.5;
}
.pr-cost-details { max-width: 640px; margin: var(--gap-mlg) auto 0; }
.pr-cost-details > summary {
  display: flex; align-items: center; justify-content: center; gap: var(--gap-xs);
  cursor: pointer; list-style: none;
  font-size: var(--text-eyebrow); font-weight: var(--fw-bold);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-secondary);
  padding: var(--gap-xs) var(--gap-sm); border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease);
}
.pr-cost-details > summary::-webkit-details-marker { display: none; }
.pr-cost-details > summary:hover { color: var(--color-text-primary); }
.pr-cost-details > summary svg { flex-shrink: 0; transition: transform var(--dur-fast) var(--ease); }
.pr-cost-details[open] > summary svg { transform: rotate(180deg); }
.pr-cost-incl {
  list-style: none; margin: var(--gap-sm) 0 0;
  padding: var(--pad-inner-xs) var(--gap-md);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border); border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: var(--gap-xs);
}
.pr-cost-incl li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--gap-md); font-size: var(--text-xs); line-height: 1.4;
}
.pr-cost-incl li > span { color: var(--color-text-primary); font-weight: var(--fw-medium); }
.pr-cost-incl li > span::before {
  content: ''; display: inline-block;
  width: 14px; height: 14px; margin-right: var(--gap-xs); vertical-align: -2px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230a7a3d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 8.5l3 3 6-7'/></svg>") center/14px no-repeat;
}
.pr-cost-incl s { color: var(--color-text-tertiary); white-space: nowrap; }
@media (max-width: 680px) {
  .pr-cost-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "vendor total" "track track";
    gap: var(--gap-xs) var(--gap-sm);
  }
  .pr-cost-vendor { grid-area: vendor; }
  .pr-cost-total { grid-area: total; }
  .pr-cost-track { grid-area: track; }
}