/**
 * DocuPOW — Pricing page styles (page-templates/pricing.php only).
 *
 * Scope: everything lives under .page-pricing (BEM). Global chrome,
 * container, buttons, links and scroll-reveal come from main.css — this
 * file adds the centered white hero, the Monthly/Annual segmented billing
 * toggle, the three-tier card row (with the Professional "Recommended"
 * treatment + in-card credit slider), the "How credits work" disclosure,
 * and the gray estimator band (v2) with the white calculator card: custom
 * range slider, pages-per-document stepper, segmented benchmark selector,
 * citation line and the "Compare all benchmarks" disclosure.
 *
 * Contrast contract (tokens + two documented derived values only):
 *  - h1 / tier h2s / prices / band h2 are var(--ink) — 16.68:1 on white,
 *    15.54:1 on --gray (AA).
 *  - Leads / taglines / captions are var(--text-muted) — 9.34:1 on white,
 *    8.70:1 on --gray (AA).
 *  - Check glyphs: var(--techblue) (Starter/Enterprise) and var(--indigo)
 *    (Professional) — decorative reinforcement, aria-hidden in markup; the
 *    item text carries the meaning.
 *  - DERIVED HEX #1 — volume chip text #276CC1: the house ~8%-darkened
 *    Tech Blue (#2B76D2 x 0.92 -> #276CC1, documented for the
 *    .dp-btn--primary hover in main.css). Raw --techblue is only 4.00:1 on
 *    the rgba(43,118,210,.10) tint (composites to ~#EAF1FB over white);
 *    #276CC1 is 4.62:1 on the tint — AA for the 13px/600 mono chip
 *    (flows.css .page-flows__step-num precedent).
 *  - DERIVED HEX #2 — savings figure + "Save up to 10%" chip text #0A7B56:
 *    the documented darkened --ok (extraction/platform/infinity/
 *    solution-sales precedent). The math: raw --ok #10B981 has relative
 *    luminance 0.364 -> (0.364+0.05)/... = only 2.54:1 on white, failing
 *    even the 3:1 large-text bar; #0A7B56 (luminance 0.149) is
 *    (1.0+0.05)/(0.149+0.05) = 5.28:1 on white — AA even for normal text,
 *    comfortably past the 48px/700 large-text bar. On the chip's
 *    rgba(16,185,129,.12) --ok tint (composites to #E2F7F0 over white,
 *    luminance 0.890) it is (0.890+0.05)/(0.149+0.05) = 4.72:1 — AA for
 *    the 11px/600 mono chip.
 *  - rgba tints (token-derived, never text backgrounds for body copy):
 *    rgba(43,118,210,.10) chip fill (--techblue at 10%); card hover border
 *    rgba(43,118,210,.30) (--techblue at 30%, per the export's
 *    hover:border-[#2B76D2]/30 — decorative hairline, not a signal);
 *    rgba(16,185,129,.12) savings-chip fill (--ok at 12% — math above).
 *  - Recommended badge: var(--white) on var(--indigo) — 11.52:1 (AA).
 *  - FLAT POLICY: zero elevation shadows. Card hover is border-colour only
 *    (no lift on this page — the export animates border alone).
 *
 * NO gradient borders on this page (budget 0): flat tier cards and the
 * gray estimator band are the only surfaces — hairline --border only.
 *
 * CONFIRMED CREDIT-BASED PRICING (owner decision — the old PLACEHOLDER
 * PRICING gate is superseded): the figures this sheet styles ($99/$89
 * Starter, the $499–$1,999 / $449–$1,799 interpolated Professional slider
 * price, 400 credits/month) are live. KEEP IN SYNC with pricing.php,
 * pricing.js and the AggregateOffer in inc/seo.php. Rows/figures still
 * TO SUPPLY (credit conversions beyond 1 page = 1 credit) render muted
 * "Coming soon" — see .page-pricing__credits-row--tbd.
 *
 * ZERO-LAYOUT-SHIFT CONTRACT (billing toggle + credit slider + estimator):
 *  - Price figures reserve width via min-width in ch units (mono, so ch is
 *    exact): --starter 3ch ("$99"/"$89"), --variable 6ch ("$1,999").
 *  - The "billed annually" notes are ALWAYS in flow and gated by
 *    visibility (never display) via .page-pricing.is-annual.
 *  - The toggle options keep identical font-weight in both states; the
 *    "Save up to 10%" chip is permanently rendered in the Annual label.
 *  - The per-credit caption has the same character count in both modes.
 *  - ESTIMATOR v2: the savings figure and the $0-floor note are GRID-
 *    STACKED in .page-pricing__result-slot (same cell, visibility-swapped
 *    via .is-floored) so the slot's height is always max(figure, note);
 *    the Enterprise caption is ALWAYS in flow and visibility-gated
 *    (.is-active); the benchmark segments keep identical font-weight/
 *    border in both states — switching sources, stepping pages across the
 *    10,000-credit threshold, or flipping the page's billing toggle (which
 *    no longer touches the estimator at all — v2 decoupling) never shifts
 *    layout.
 *
 * Functional contract: the billing toggle, credit slider, disclosure
 * open/close STATES, and the calculator (slider + pages stepper +
 * benchmark radios + savings figure + citation) are FUNCTIONAL, not
 * decorative — none of their states sit inside a motion media query, so
 * they work identically under prefers-reduced-motion: reduce (only the
 * disclosures' 200ms transitions are motion-gated). Figures update
 * instantly on input (user-driven feedback, not decorative motion — no
 * count-up, ever).
 *
 * Motion contract (transform/opacity only — STANDARD tier):
 *  - Hidden "entrance" base states sit inside
 *    @media (prefers-reduced-motion: no-preference), so with reduced motion
 *    (or if pricing.js never runs) everything is visible. NO floats, NO
 *    bobs, NO loops, NO count-ups.
 *  - pricing.js hooks: .is-ready on .page-pricing__hero (staged copy
 *    entrance: h1/lead, 0/80ms). main.js owns [data-dp-reveal] /
 *    [data-dp-reveal-stagger] (S2–S3 roots + the staggered tier cards);
 *    pricing.js clears the stagger's inline delays post-reveal so the card
 *    hover border changes are never postponed.
 *  - A final prefers-reduced-motion: reduce block forces every animated
 *    element fully visible and static (belt-and-braces over main.css).
 */

/* =========================================================================
   Page scope — section rhythm (96 desktop / 64 <768)
   ========================================================================= */
.page-pricing {
  overflow-x: clip; /* insurance: nothing may cause horizontal scroll @320px */
}

.page-pricing__hero,
.page-pricing__tiers,
.page-pricing__estimator {
  padding-block: var(--space-7);
}

@media (max-width: 767.98px) {
  .page-pricing__hero,
  .page-pricing__tiers,
  .page-pricing__estimator {
    padding-block: var(--space-6);
  }
}

/* The hero and the tier row share the white canvas; the export runs them as
   one continuous block, so the hero gives back its bottom half-measure. */
.page-pricing__hero {
  padding-block-end: 0;
}

/* =========================================================================
   S1 — Hero (white, centered, max 768)
   ========================================================================= */
.page-pricing__hero {
  background-color: var(--white);
  text-align: center;
}

/* Export max-w-3xl = 768px. */
.page-pricing__hero-inner {
  max-width: 768px;
  margin-inline: auto;
}

/* The single h1 — headline-xl (64/1.1/-0.02em/700) in Ink (16.68:1 — AA). */
.page-pricing__title {
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-3);
}

/* body-lg lead — var(--text-muted) (9.34:1 — AA). */
.page-pricing__lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* =========================================================================
   S2 — Tier cards (3 -> 1 <1024, equal height via stretch + flex columns)
   ========================================================================= */
.page-pricing__tiers {
  background-color: var(--white);
}

/* -------------------------------------------------------------------------
   Billing toggle — native radio group styled as a segmented pill. The
   radios themselves are .dp-visually-hidden (still focusable; arrow keys
   move within the group natively); the sibling __billing-text spans carry
   the visuals. Both states share font-weight/padding so checking an option
   NEVER changes the control's size (zero layout shift).
   ------------------------------------------------------------------------- */
.page-pricing__billing {
  border: 0;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  justify-content: center;
}

.page-pricing__billing-control {
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
  background-color: var(--gray);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 4px;
}

.page-pricing__billing-opt {
  position: relative; /* keeps the clipped radio anchored to its label */
  display: inline-flex;
  cursor: pointer;
}

/* Option pill — muted on the gray track (8.70:1 — AA). Transparent border
   reserves the checked state's hairline so checking never resizes. */
.page-pricing__billing-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600; /* SAME weight when checked — zero layout shift */
  color: var(--text-muted);
  border: 1px solid transparent;
  border-radius: 9999px;
  padding: 6px var(--space-2);
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Checked — white pill, ink text (16.68:1), hairline border. */
.page-pricing__billing-radio:checked + .page-pricing__billing-text {
  background-color: var(--white);
  color: var(--ink);
  border-color: var(--border);
}

/* Keyboard focus — the house techblue ring, drawn on the visible pill
   (the radio itself is visually hidden). */
.page-pricing__billing-radio:focus-visible + .page-pricing__billing-text {
  outline: 2px solid var(--techblue);
  outline-offset: 2px;
}

/* "Save up to 10%" chip — mono 11/600 in the documented darkened --ok
   #0A7B56 on the rgba(16,185,129,.12) --ok tint: 4.72:1 (math in the
   header). ALWAYS rendered inside the Annual label so toggling never
   changes the control's width. */
.page-pricing__billing-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 600;
  color: #0A7B56; /* darkened --ok — 4.72:1 on the tint (header math) */
  background-color: rgba(16, 185, 129, .12); /* --ok tint */
  border-radius: 9999px;
  padding: 2px var(--space-1);
  white-space: nowrap;
}

.page-pricing__tiers-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: stretch;
}

.page-pricing__tiers-grid > * {
  min-width: 0;
}

@media (max-width: 1023.98px) {
  .page-pricing__tiers-grid {
    grid-template-columns: 1fr;
  }
}

/* Tier card — white, hairline border, 12px radius (export rounded-xl),
   32px padding, flex column so the CTA pins to the bottom (equal height).
   Hover: border -> subtle techblue tint per the export's
   hover:border-[#2B76D2]/30 — border only, NO shadows, NO lift. */
.page-pricing__tier {
  position: relative; /* anchors the Recommended badge */
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-4);
  transition:
    opacity .6s ease,
    transform .6s ease,
    border-color .3s ease;
}

.page-pricing__tier:hover {
  border-color: rgba(43, 118, 210, .30); /* --techblue @30% — export hover */
}

/* Recommended variant — 2px indigo top border; the hover tint must not
   swallow it, so the top edge is restated on hover too. */
.page-pricing__tier--recommended {
  border-top: 2px solid var(--indigo);
}

.page-pricing__tier--recommended:hover {
  border-top-color: var(--indigo);
}

/* Badge pill — absolute, centered over the top edge; white mono 11
   uppercase tracked on indigo (11.52:1 — AA). */
.page-pricing__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--indigo);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px var(--space-2);
  border-radius: 9999px;
  white-space: nowrap;
}

.page-pricing__tier-head {
  margin-bottom: var(--space-5);
}

/* Extra clearance under the badge on the recommended card (export mt-2). */
.page-pricing__tier--recommended .page-pricing__tier-head {
  margin-top: var(--space-1);
}

/* headline-md (24/1.3/500) in Ink. */
.page-pricing__tier-name {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--space-2);
}

/* Price row — mono figure + /mo on a shared baseline. min-height keeps the
   three tier heads level (32/40px figures + the Contact Us slot). */
.page-pricing__price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-height: 60px;
  margin-bottom: var(--space-1);
}

/* CONFIRMED figure (credit model — template docblock) — mono 32/600 in Ink. */
.page-pricing__price {
  font-family: var(--font-mono);
  font-size: 32px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
}

/* Professional's featured figure — mono 40/600. */
.page-pricing__price--featured {
  font-size: 40px;
}

/* Fixed-width price slots (zero-layout-shift contract, header note):
   mono figures, so ch units are exact. Starter "$99"/"$89" = 3ch;
   Professional spans "$499".."$1,999" = up to 6ch — the slot reserves the
   maximum so neither the billing toggle nor slider drags move the /mo
   suffix or anything below. */
.page-pricing__price--starter {
  min-width: 3ch;
}

.page-pricing__price--variable {
  min-width: 6ch;
}

/* /mo suffix — mono 13 muted. */
.page-pricing__per {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
}

/* "billed annually" note — mono 11 muted. ALWAYS in flow; monthly mode
   hides it with visibility (not display) so the annual/monthly toggle
   never shifts layout. pricing.js toggles .is-annual on .page-pricing. */
.page-pricing__annual-note {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 2px;
  visibility: hidden;
}

.page-pricing.is-annual .page-pricing__annual-note {
  visibility: visible;
}

/* Starter credits line — mono 13/600 in Ink ("400 credits / month"). */
.page-pricing__credits {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-1);
}

/* Professional per-credit caption — mono 13 muted ("≈ $0.20 per credit";
   the annual string "≈ $0.18 per credit" is the same character count, so
   the toggle never shifts it). */
.page-pricing__credit-rate {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 2px;
}

/* -------------------------------------------------------------------------
   Professional in-card credit picker — label row + the shared
   .page-pricing__slider treatment (techblue thumb on --border track) +
   mono readout. FUNCTIONAL: never motion-gated.
   ------------------------------------------------------------------------- */
.page-pricing__credit-picker {
  margin-bottom: var(--space-4);
}

.page-pricing__credit-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1);
  flex-wrap: wrap;
  margin-bottom: var(--space-1);
}

/* 13/500 in Ink — compact in-card label. */
.page-pricing__credit-label {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink);
}

/* Live readout — mono 13/600 in Ink ("5,000 credits / month"). */
.page-pricing__credit-readout {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

/* Enterprise price slot — Inter 36/600 in Ink (headline-lg, not mono:
   "Contact Us" is prose, not a figure). */
.page-pricing__price-contact {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--ink);
  align-self: center;
}

/* Tagline — 16 muted; min-height (export h-12) keeps the lists level. */
.page-pricing__tagline {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  min-height: 48px;
}

/* Feature list (confirmed credit-model copy — template docblock). flex:1
   pushes the CTA to the card bottom for equal-height rows. */
.page-pricing__list {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  flex: 1 1 auto;
  display: grid;
  gap: var(--space-2);
}

.page-pricing__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}

/* Check glyph — 20px inline SVG, techblue by default (decorative,
   aria-hidden; the text carries the meaning). Nudged onto the first
   text line's center. */
.page-pricing__check {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--techblue);
  margin-top: 2px;
}

/* Professional's check-circles run indigo per the export. */
.page-pricing__tier--recommended .page-pricing__check {
  color: var(--indigo);
}

.page-pricing__item-text {
  min-width: 0;
}

/* Inline figures inside items ("Up to 5 user seats", "2,500–10,000
   credits/mo") — mono bold per the export. */
.page-pricing__figure {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
}

/* Full-width CTA pinned to the card bottom (mt-auto). */
.page-pricing__tier-cta {
  width: 100%;
  margin-top: auto;
}

/* -------------------------------------------------------------------------
   "How credits work" disclosure — directly below the tier row. The panel
   ships EXPANDED server-side (.is-open + aria-expanded="true", NO
   [hidden]) so the conversion table renders and is crawlable without JS;
   pricing.js collapses it on init. Open/closed STATES are unconditional
   (functional under reduce); only the 200ms transition is motion-gated
   at the bottom of this sheet (the FAQ accordion pattern).
   ------------------------------------------------------------------------- */
.page-pricing__credits-info {
  max-width: 768px;
  margin: var(--space-5) auto 0;
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.page-pricing__credits-heading {
  margin: 0;
}

/* Full-row native button trigger — 18/600 ink, chevron pinned right. */
.page-pricing__credits-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
}

.page-pricing__credits-btn-text {
  min-width: 0;
}

/* Chevron — decorative direction cue (aria-hidden); rotates when open. */
.page-pricing__credits-chevron {
  flex: none;
  color: var(--text-muted);
}

.page-pricing__credits-btn[aria-expanded="true"] .page-pricing__credits-chevron {
  transform: rotate(180deg);
}

/* Panel — the grid-template-rows 0fr -> 1fr technique: the closed panel
   measures zero height without a magic max-height. Closed panels ALSO
   carry [hidden] (display:none) — pricing.js sequences the attribute
   around the transition. Server markup ships .is-open (no-JS expanded). */
.page-pricing__credits-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
}

.page-pricing__credits-panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* Vertical spacing lives on the CHILDREN (not this wrapper): padding here
   would keep measuring height at 0fr and break the collapsed state. */
.page-pricing__credits-panel-inner {
  min-height: 0;
  overflow: hidden;
  padding-inline: var(--space-4);
}

/* Conversion table — two-col, minimal hairline rows. */
/* Confirmed top-up pack figures. The tier-card parenthetical and the
   disclosure approx-notes render mono per the brand money rule; nbsp-glued
   groups wrap as units at narrow widths (no mid-figure breaks). */
.page-pricing__item-figure {
  font-family: var(--font-mono);
  font-size: 14px;
  white-space: nowrap;
}

.page-pricing__credits-table--topup {
  margin-top: var(--space-2);
}

.page-pricing__credits-approx {
  color: var(--text-muted);
  white-space: nowrap;
}

.page-pricing__topup-note {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}

.page-pricing__credits-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-3);
}

/* Column headers — mono 11 uppercase tracked muted (9.34:1 — AA). */
.page-pricing__credits-table thead th {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.page-pricing__credits-table th,
.page-pricing__credits-table td {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

/* Action column — 14/500 ink. */
.page-pricing__credits-table tbody th {
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--ink);
}

/* Value column — mono 13/600 ink, right-aligned figures. */
.page-pricing__credits-table td,
.page-pricing__credits-table thead th:last-child {
  text-align: right;
}

.page-pricing__credits-table td {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
}

/* TO-SUPPLY rows — visibly muted "Coming soon" placeholders (8.70:1+ on
   white — AA): credit conversions for API call / Infinity query / document
   storage are unconfirmed and NEVER invented (ledgered in
   LAUNCH-BLOCKERS.md). */
.page-pricing__credits-row--tbd th,
.page-pricing__credits-row--tbd td {
  color: var(--text-muted);
  font-weight: 500;
}

/* "Request Details" CTA in the TBD rows — a real link to /contact/ (the
   conversion figures are unconfirmed). Indigo + persistent underline reads
   clearly as a link and stays AA on either the white or gray table surface;
   inherits the table's mono face. */
.page-pricing__tbd-link {
  color: var(--indigo);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page-pricing__tbd-link:hover,
.page-pricing__tbd-link:focus-visible {
  color: var(--ink);
}

/* Top-up note — 14 muted; bottom padding closes the panel's box (spacing
   on children, not the 0fr wrapper — see above). */
.page-pricing__topup {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  padding-bottom: var(--space-3);
}

/* =========================================================================
   S3 — Estimator (gray rounded band, max 896, white calculator card)
   ========================================================================= */
.page-pricing__estimator {
  background-color: var(--white);
}

/* Export max-w-4xl = 896px; gray band, hairline border, 12px radius,
   48px padding. */
.page-pricing__band {
  max-width: 896px;
  margin-inline: auto;
  background-color: var(--gray);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-5);
}

@media (max-width: 767.98px) {
  .page-pricing__band {
    padding: var(--space-3);
  }
}

.page-pricing__band-head {
  text-align: center;
  margin-bottom: var(--space-5);
}

/* headline-lg (36/1.2/-0.01em/600) in Ink (15.54:1 on --gray — AA; the
   export keys this heading to ink, not indigo). */
.page-pricing__band-heading {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.page-pricing__band-sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Inner white calculator card — hairline border, 8px radius, 32px padding. */
.page-pricing__calc {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
}

/* 2-col grid with a vertical hairline divider >=768; single column with a
   horizontal divider below. */
.page-pricing__calc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: center;
}

.page-pricing__calc-grid > * {
  min-width: 0;
}

.page-pricing__calc-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-left: 1px solid var(--border);
  padding-left: var(--space-4);
}

@media (max-width: 767.98px) {
  .page-pricing__calc-grid {
    grid-template-columns: 1fr;
  }

  .page-pricing__calc-result {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--border);
    padding-top: var(--space-3);
  }
}

/* Label row — label left, live chip right, baseline-ish alignment. */
.page-pricing__calc-label-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

/* 16/500 in Ink. */
.page-pricing__calc-label {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--ink);
}

/* Live value chip — mono 13/600 #276CC1 on the rgba(43,118,210,.10) tint:
   4.62:1 on the tint — the flows.css step-number precedent (raw --techblue
   is only 4.00:1 there). pricing.js rewrites the text on input.
   min-width 16ch (mono, so ch is exact) reserves the LONGEST readout
   ("50,000 documents") so volume changes never re-wrap the label row —
   part of the estimator's zero-layout-shift contract. */
.page-pricing__calc-chip {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  color: #276CC1; /* darkened --techblue (main.css button-hover derivation) — 4.62:1 on the tint */
  background-color: rgba(43, 118, 210, .10); /* --techblue tint */
  padding: 4px 12px;
  border-radius: 6px;
  white-space: nowrap;
  min-width: 16ch; /* "50,000 documents" — the widest readout */
  text-align: center;
}

/* Custom range slider — 8px --border track, 20px round --techblue thumb.
   accent-color is the belt-and-braces fallback for engines that skip the
   vendor pseudo-elements. FUNCTIONAL control: never motion-gated. */
.page-pricing__slider {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 20px; /* full hit area = thumb height */
  background: transparent;
  accent-color: var(--techblue);
  cursor: pointer;
  margin: 0 0 var(--space-1);
}

.page-pricing__slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 9999px;
  background-color: var(--border);
}

.page-pricing__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -6px; /* centers the 20px thumb on the 8px track */
  border: 0;
  border-radius: 50%;
  background-color: var(--techblue);
}

.page-pricing__slider::-moz-range-track {
  height: 8px;
  border-radius: 9999px;
  background-color: var(--border);
}

.page-pricing__slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background-color: var(--techblue);
}

/* Keyboard focus — techblue ring (house input-focus treatment). */
.page-pricing__slider:focus-visible {
  outline: 2px solid var(--techblue);
  outline-offset: 4px;
  border-radius: 9999px;
}

/* Scale ends — mono 11 muted (9.34:1 on white — AA), decorative bounds
   (aria-hidden; the slider's min/max carry the real semantics). */
.page-pricing__scale {
  display: flex;
  justify-content: space-between;
}

.page-pricing__scale-end {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
}

.page-pricing__result-caption {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

/* Result slot — GRID STACK (zero-layout-shift contract, header note): the
   savings figure and the $0-floor note share the single cell and swap via
   visibility (.is-floored from pricing.js), so the slot's height is always
   max(figure, note) — hitting the floor (mathematically unreachable within
   the shipped ranges, but guarded) never moves the captions below. */
.page-pricing__result-slot {
  display: grid;
  justify-items: center;
  align-items: center;
  margin-bottom: var(--space-1);
}

.page-pricing__result-slot > * {
  grid-area: 1 / 1;
}

/* Savings figure — mono 48/700 in the documented darkened --ok #0A7B56
   (5.28:1 on white — raw --ok #10B981 is only 2.54:1 and fails even the
   3:1 large-text bar; math in the header). Updated INSTANTLY by pricing.js
   on input — user-driven feedback, never a count-up. */
.page-pricing__savings {
  font-family: var(--font-mono);
  font-size: 48px;
  line-height: 1.2;
  font-weight: 700;
  color: #0A7B56; /* darkened --ok — 5.28:1 on white (raw --ok fails) */
  white-space: nowrap; /* a wrapped figure would break the reserved slot height */
}

/* $0-floor note — calm prose (14 muted), hidden at rest; .is-floored swaps
   it in for the figure (visibility both ways — reserved space). */
.page-pricing__savings-note {
  visibility: hidden;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 320px;
  text-align: center;
}

.page-pricing__result-slot.is-floored .page-pricing__savings {
  visibility: hidden;
}

.page-pricing__result-slot.is-floored .page-pricing__savings-note {
  visibility: visible;
}

/* Fixed economics caption — mono 11 muted, centered ("… ≈ $0.20 per credit
   · 1 page = 1 credit."); the pinned Professional-monthly rate the
   estimator maths against (aria-describedby target for slider + stepper). */
.page-pricing__calc-note {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
  max-width: 360px;
  margin-inline: auto;
  text-align: center;
}

/* Enterprise caption — same mono 11 muted treatment; ALWAYS in flow and
   visibility-gated (.is-active from pricing.js) so crossing the
   10,000-credit threshold reserves its space and never shifts layout. */
.page-pricing__enterprise-note {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
  max-width: 360px;
  margin-top: 2px;
  margin-inline: auto;
  text-align: center;
  visibility: hidden;
}

.page-pricing__enterprise-note.is-active {
  visibility: visible;
}

/* -------------------------------------------------------------------------
   Pages-per-document stepper — house input treatment (contact.css
   precedent: white, hairline border, 8px radius, techblue focus ring) on a
   native number input (keyboard arrows work for free), flanked by real
   +/- buttons. The VALUE is a figure -> mono per the type contract.
   FUNCTIONAL: never motion-gated.
   ------------------------------------------------------------------------- */
.page-pricing__pages {
  margin-top: var(--space-3);
}

.page-pricing__pages-label {
  display: block;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--space-1);
}

.page-pricing__pages-control {
  display: inline-flex;
  align-items: stretch;
  gap: var(--space-1);
}

/* +/- buttons — 36px hairline squares, ink glyphs, techblue focus ring. */
.page-pricing__pages-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .18s ease;
}

.page-pricing__pages-btn:hover {
  border-color: var(--techblue);
}

.page-pricing__pages-btn:focus-visible {
  outline: 2px solid var(--techblue);
  outline-offset: 2px;
}

/* The number input — mono 14/600 ink, centered; native spinners hidden
   (the +/- buttons and native keyboard arrows cover the affordance). */
.page-pricing__pages-input {
  width: 64px;
  height: 36px;
  padding: 6px var(--space-1);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .18s ease, box-shadow .18s ease;
  appearance: textfield;
  -moz-appearance: textfield;
}

.page-pricing__pages-input::-webkit-outer-spin-button,
.page-pricing__pages-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.page-pricing__pages-input:focus,
.page-pricing__pages-input:focus-visible {
  outline: none;
  border-color: var(--techblue);
  box-shadow: 0 0 0 2px var(--techblue);
}

/* -------------------------------------------------------------------------
   Benchmark selector — the billing toggle's fieldset + visually-hidden-
   radios segmented pattern, full-calc-width under the calc grid. ONE
   semantic structure at every width: >=640px three horizontal segments,
   <640px the SAME radios stacked as rows (flex-direction only). Each
   segment is two lines — org (13/600) over the mono figure (11/600) — so
   long org names never force horizontal scroll. Checked state = white
   surface + hairline + ink (identical weights/borders both states — zero
   layout shift on switch). FUNCTIONAL: never motion-gated.
   ------------------------------------------------------------------------- */
.page-pricing__benchmarks {
  border: 0;
  margin: var(--space-4) 0 0;
  padding: 0;
}

.page-pricing__benchmarks-legend {
  padding: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--space-1);
}

.page-pricing__benchmarks-control {
  display: flex;
  gap: 4px;
  background-color: var(--gray);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
}

@media (max-width: 639.98px) {
  .page-pricing__benchmarks-control {
    flex-direction: column;
  }
}

.page-pricing__benchmark-opt {
  position: relative; /* keeps the clipped radio anchored to its label */
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  cursor: pointer;
}

/* Option surface — muted on the gray track (8.70:1 — AA). Transparent
   border reserves the checked hairline so checking never resizes. */
.page-pricing__benchmark-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: var(--space-1) var(--space-2);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.page-pricing__benchmark-org {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600; /* SAME weight when checked — zero layout shift */
  color: var(--text-muted);
}

.page-pricing__benchmark-figure {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--text-muted);
}

/* Checked — white surface, hairline border, ink text (16.68:1). */
.page-pricing__benchmark-radio:checked + .page-pricing__benchmark-text {
  background-color: var(--white);
  border-color: var(--border);
}

.page-pricing__benchmark-radio:checked + .page-pricing__benchmark-text .page-pricing__benchmark-org,
.page-pricing__benchmark-radio:checked + .page-pricing__benchmark-text .page-pricing__benchmark-figure {
  color: var(--ink);
}

/* Keyboard focus — the house techblue ring on the visible surface (the
   radio itself is visually hidden; billing-toggle precedent). */
.page-pricing__benchmark-radio:focus-visible + .page-pricing__benchmark-text {
  outline: 2px solid var(--techblue);
  outline-offset: 2px;
}

/* Citation — tertiary mono 11 link under the calculator card, muted +
   underlined (affordance never colour-alone); hover/focus -> ink. Real
   external citation targets from docupow_roi_benchmarks() (inc/setup.php);
   pricing.js re-points it as the benchmark selection changes. */
.page-pricing__citation {
  margin-top: var(--space-3);
  text-align: center;
}

.page-pricing__citation-link {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page-pricing__citation-link:hover,
.page-pricing__citation-link:focus-visible {
  color: var(--ink);
}

/* -------------------------------------------------------------------------
   "Compare all benchmarks" — QUIET disclosure (FAQ button+region pattern,
   the credits-disclosure mechanics at whisper volume). Ships COLLAPSED
   ([hidden]) — supplementary reference data, unlike the credits panel
   which ships expanded as primary crawlable content. Open/closed STATES
   unconditional (functional under reduce); only the 200ms transition is
   motion-gated at the bottom of this sheet.
   ------------------------------------------------------------------------- */
.page-pricing__compare {
  margin-top: var(--space-2);
  text-align: center;
}

/* Trigger — tertiary mono 12 muted text-button with a chevron cue. */
.page-pricing__compare-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px var(--space-1);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
}

.page-pricing__compare-btn:hover {
  color: var(--ink);
}

.page-pricing__compare-btn:focus-visible {
  outline: 2px solid var(--techblue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Chevron — decorative direction cue (aria-hidden); rotates when open. */
.page-pricing__compare-chevron {
  flex: none;
}

.page-pricing__compare-btn[aria-expanded="true"] .page-pricing__compare-chevron {
  transform: rotate(180deg);
}

/* Panel — the same grid-template-rows 0fr -> 1fr technique as the credits
   panel (closed measures zero height, [hidden] sequenced by pricing.js). */
.page-pricing__compare-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
}

.page-pricing__compare-panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.page-pricing__compare-inner {
  min-height: 0;
  overflow: hidden;
}

/* The list — small mono rows, centered under the trigger. */
.page-pricing__compare-list {
  list-style: none;
  margin: 0;
  padding: var(--space-1) 0 0;
  display: grid;
  gap: 4px;
}

.page-pricing__compare-item {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-muted);
}

.page-pricing__compare-link {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page-pricing__compare-link:hover,
.page-pricing__compare-link:focus-visible {
  color: var(--ink);
}

/* -------------------------------------------------------------------------
   Named markup hooks that intentionally carry no styles of their own —
   named here so every markup class resolves in this sheet (build rule).
   ------------------------------------------------------------------------- */
.page-pricing__calc-input {
  /* no-op: block-flow column; layout comes from __calc-grid */
}

.page-pricing__credits-row {
  /* no-op: rows are styled via the table's th/td selectors; the --tbd
     modifier above carries the muted TO-SUPPLY treatment */
}

.page-pricing__compare-btn-text {
  /* no-op: inline text span; the trigger's type lives on __compare-btn */
}

/* =========================================================================
   Mobile type scale (<768) — 64->44, 36->28, 48->40 figure
   ========================================================================= */
@media (max-width: 767.98px) {
  .page-pricing__title {
    font-size: 44px;
    line-height: 1.1;
  }

  .page-pricing__band-heading,
  .page-pricing__price-contact {
    font-size: 28px;
    line-height: 1.2;
  }

  .page-pricing__savings {
    font-size: 40px;
  }

  /* Disclosure — tighter padding on the narrow canvas. */
  .page-pricing__credits-btn {
    padding: var(--space-2) var(--space-3);
    font-size: 16px;
  }

  .page-pricing__credits-panel-inner {
    padding-inline: var(--space-3);
  }
}

/* Narrow phones (<480): the savings figure is nowrap (reserved-height
   contract), so step it down once more — the widest realistic figure
   ("$444,500", 50,000 docs × 10 pages × Ardent) must fit the 320px card
   without wrapping or clipping. */
@media (max-width: 479.98px) {
  .page-pricing__savings {
    font-size: 30px;
  }
}

/* =========================================================================
   Motion — entrance base states (no-preference only)
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* Hero entrance — pricing.js adds .is-ready on init (double rAF);
     h1 then lead rise in with 0/80ms delays. */
  .page-pricing__hero .page-pricing__title,
  .page-pricing__hero .page-pricing__lead {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity .5s cubic-bezier(0.16, 1, 0.3, 1),
      transform .5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .page-pricing__hero .page-pricing__lead {
    transition-delay: 80ms;
  }

  .page-pricing__hero.is-ready .page-pricing__title,
  .page-pricing__hero.is-ready .page-pricing__lead {
    opacity: 1;
    transform: none;
  }

  /* Disclosures ("How credits work" + "Compare all benchmarks") — 200ms
     grid-rows/opacity + chevron rotation. pricing.js's collapse timer
     matches this duration (OPEN_MS). The open/closed STATES live
     unconditionally above. */
  .page-pricing__credits-panel,
  .page-pricing__compare-panel {
    transition: grid-template-rows .2s ease, opacity .2s ease;
  }

  .page-pricing__credits-chevron,
  .page-pricing__compare-chevron {
    transition: transform .2s ease;
  }
}

/* =========================================================================
   Reduced motion — every animated element visible and static; the billing
   toggle, credit slider, disclosure STATE and calculator are functional
   markup + JS and stay fully operational — only their decorative
   transitions are stilled (the toggle pill recolours and the disclosure
   opens/closes instantly).
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .page-pricing__hero .page-pricing__title,
  .page-pricing__hero .page-pricing__lead {
    opacity: 1;
    transform: none;
  }

  .page-pricing__billing-text,
  .page-pricing__credits-panel,
  .page-pricing__credits-chevron,
  .page-pricing__compare-panel,
  .page-pricing__compare-chevron,
  .page-pricing__benchmark-text,
  .page-pricing__pages-btn,
  .page-pricing__pages-input {
    transition: none;
  }
}