/* ─────────────────────────────────────────────────────────────────
   Block: pricing — Anchor / Target / Decoy 3-tier layout
   T5 redesign 2026-05-06: highlighted middle tier, billing toggle
   pill, money-back guarantee shield, scroll-snap mobile, sticky
   comparison-table header. Tokens-only, scoped under .block-pricing.
   ───────────────────────────────────────────────────────────── */

.block-pricing {
  font-family: var(--ds-font-body);
  color: var(--scheme-fg);
}

/* ── Billing toggle (CSS-only) ─────────────────────────────── */
.block-pricing .pricing-billing-toggle-wrap {
  margin-bottom: var(--ds-space-6);
}

.block-pricing .pricing-billing-toggle {
  display: inline-flex;
  position: relative;
  background: var(--scheme-card-bg);
  border: 1px solid var(--scheme-rule);
  border-radius: var(--ds-radius-pill);
  padding: 4px;
  box-shadow: var(--ds-shadow-sm);
  margin: 0;
}

.block-pricing .pricing-billing-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px; height: 1px;
}

.block-pricing .pricing-billing-label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 10px var(--ds-space-5);
  min-height: 44px;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 700;
  color: var(--scheme-fg-soft);
  cursor: pointer;
  border-radius: var(--ds-radius-pill);
  transition: color var(--ds-duration-fast) var(--ds-ease-out);
  margin: 0;
  user-select: none;
}

/* WAVE3-F05 2026-05-08: `var(--scheme-fg, #fff)` fallback antipattern —
   on `.scheme-paper` outer, `--scheme-fg = --ds-ink` so the fallback
   never fires → ink-on-ink billing thumb (audit T6 critical, ratio 1.0).
   The thumb (line 69) paints `--ds-ink`, so the checked label sits on a
   dark surface and MUST be white. Pin to literal #fff. */
.block-pricing .pricing-billing-radio:checked + .pricing-billing-label {
  color: #fff;
}
/* If the toggle is ever placed on a light-on-light scheme where the thumb
   defaults to scheme-fg, descendants still resolve correctly because the
   thumb itself is forced to --ds-ink (dark) via the rule below. */

.block-pricing .pricing-billing-radio:focus-visible + .pricing-billing-label {
  outline: 2px solid var(--ds-cta);
  outline-offset: 2px;
}

/* WAVE3-F05 2026-05-08: thumb forced to literal #0e0f0c (ink) so the
   guardrail (which rebinds --ds-ink → --scheme-fg=#fff on dark schemes)
   does not flip the thumb to white-on-white. Pattern C overrides below
   invert the pair for dark schemes. */
.block-pricing .pricing-billing-thumb {
  position: absolute;
  z-index: 1;
  top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  background: #0e0f0c;
  border-radius: var(--ds-radius-pill);
  transition: transform var(--ds-duration) var(--ds-ease-out);
  pointer-events: none;
}

/* Pattern C — on dark/colored schemes, thumb becomes paper (cream) and
   the checked label flips to ink so the dark-on-light pair stays legible. */
.scheme-ink .block-pricing .pricing-billing-thumb,
.scheme-steel .block-pricing .pricing-billing-thumb,
.scheme-accent .block-pricing .pricing-billing-thumb,
.scheme-trust .block-pricing .pricing-billing-thumb,
.ds-scheme-ink .block-pricing .pricing-billing-thumb,
.ds-scheme-steel .block-pricing .pricing-billing-thumb,
.ds-scheme-accent .block-pricing .pricing-billing-thumb,
.ds-scheme-trust .block-pricing .pricing-billing-thumb {
  background: #fbf7ef;
}
.scheme-ink .block-pricing .pricing-billing-radio:checked + .pricing-billing-label,
.scheme-steel .block-pricing .pricing-billing-radio:checked + .pricing-billing-label,
.scheme-accent .block-pricing .pricing-billing-radio:checked + .pricing-billing-label,
.scheme-trust .block-pricing .pricing-billing-radio:checked + .pricing-billing-label,
.ds-scheme-ink .block-pricing .pricing-billing-radio:checked + .pricing-billing-label,
.ds-scheme-steel .block-pricing .pricing-billing-radio:checked + .pricing-billing-label,
.ds-scheme-accent .block-pricing .pricing-billing-radio:checked + .pricing-billing-label,
.ds-scheme-trust .block-pricing .pricing-billing-radio:checked + .pricing-billing-label {
  color: #0e0f0c;
}

/* :has() to slide the thumb based on which radio is checked */
.block-pricing .pricing-billing-toggle:has(.pricing-billing-radio:nth-of-type(2):checked) .pricing-billing-thumb {
  transform: translateX(100%);
}

/* WAVE3-F05 2026-05-08: pin to literal #fff — fallback antipattern */
.block-pricing .pricing-billing-badge {
  display: inline-block;
  background: var(--ds-accent);
  color: #fff;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px var(--ds-space-2);
  border-radius: var(--ds-radius-sm);
}

/* ── Legacy tab pills (when toggle disabled) ───────────────── */
.block-pricing .pricing-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  background: var(--scheme-card-bg);
  border: 1px solid var(--scheme-rule);
  border-radius: var(--ds-radius);
  padding: var(--ds-space-2);
  box-shadow: var(--ds-shadow-sm);
}
.block-pricing .pricing-tab {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  font-weight: 600;
  border-radius: var(--ds-radius-sm) !important;
  padding: var(--ds-space-2) var(--ds-space-4) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--scheme-fg-soft) !important;
}
/* P-A11Y-CONTRAST 2026-05-08: --scheme-fg in default light scheme resolves to
   --ds-ink, so `color: var(--scheme-fg)` on `background: var(--ds-ink)` was
   ink-on-ink (1.00 contrast — text invisible). Pin text to literal #fff so the
   active pill is always white-on-ink (~19.3:1, AAA). */
.block-pricing .pricing-tab.active,
.block-pricing .pricing-tab.btn-dark {
  background: var(--ds-ink) !important;
  color: #fff !important;
  border-color: var(--ds-ink) !important;
}
/* WAVE3-F05 2026-05-08: pin to literal #fff — fallback antipattern */
.block-pricing .pricing-tab-badge {
  display: inline-block; margin-left: var(--ds-space-2);
  background: var(--ds-trust); color: #fff;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-eyebrow); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px var(--ds-space-2); border-radius: var(--ds-radius-sm);
}

/* ── Pricing grid ──────────────────────────────────────────── */
.block-pricing .pricing-grid-wrap {
  margin-bottom: var(--ds-space-5);
}

.block-pricing .pricing-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: var(--ds-space-4);
  margin: 0;
}

.block-pricing .pricing-tier-col {
  display: flex;
  padding: var(--ds-space-2) 0;
  flex: 1 1 280px;
  max-width: 360px;
}

.block-pricing .pricing-tier-col.is-recommended-col {
  z-index: 5;
  position: relative;
}

/* ── Pricing card ──────────────────────────────────────────── */
.block-pricing .pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--scheme-card-bg);
  color: var(--scheme-card-fg);
  border: 1px solid var(--scheme-rule);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
  padding: var(--ds-space-6) var(--ds-space-5);
  transition: transform var(--ds-duration) var(--ds-ease-out),
              box-shadow var(--ds-duration) var(--ds-ease-out);
}

.block-pricing .pricing-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-md);
}

/* Featured / recommended (anchor-target-decoy middle tier)
   FIX-T5 2026-05-06 — palette unified.
   Card stays neutral (paper-tinted) so the orange CTA accents read as
   focal points instead of clashing with each other. The "MOST BOOKED"
   pill is orange (anchor signal), the price-wrap below uses an
   orange-tinted panel + bold orange amount, the CTA button is orange.
   No more loose orange eyebrow on white. Body copy stays ink for AAA
   contrast on cream. */
.block-pricing .pricing-card.is-recommended {
  /* WAVE3-F05 2026-05-08 — Pattern B local rebind: this card always
     paints a cream-tinted bg, so descendants must read tokens that
     resolve to ink-on-cream regardless of the OUTER section scheme.
     Without this rebind, on .scheme-ink/.scheme-steel/.scheme-accent/
     .scheme-trust outer sections, the global guardrail flips
     `--ds-ink → #fff` and any descendant reading --ds-ink, --scheme-fg,
     or --scheme-card-fg becomes white-on-cream → contrast collapse. */
  --scheme-bg: #faf6ec;
  --scheme-fg: #0e0f0c;
  --scheme-fg-soft: rgba(14, 15, 12, 0.78);
  --scheme-fg-mute: rgba(14, 15, 12, 0.62);
  --scheme-card-bg: #faf6ec;
  --scheme-card-fg: #0e0f0c;
  --scheme-rule: rgba(14, 15, 12, 0.12);
  /* Defensive — descendants reading --ds-ink directly stay dark too. */
  --ds-ink: #0e0f0c;
  --ds-ink-soft: rgba(14, 15, 12, 0.78);
  --ds-ink-mute: rgba(14, 15, 12, 0.62);

  border: 2px solid var(--ds-cta);
  background: color-mix(in srgb, var(--ds-paper, #faf6ec) 70%, #fbf7ef 30%);
  color: #0e0f0c;
  box-shadow: var(--ds-shadow-cta);
  transform: translateY(-6px);
  z-index: 5;
  /* FIX-W9-A16 2026-05-07: pill was cropping at the top edge — it sat at
     `top: 0; translate(-50%, -50%)` so half overhung the card outline
     (clipped by the `.pricing-tier-col` 8px vertical padding and on
     mobile by the `.pricing-grid` overflow-x:auto scroll container).
     Park the pill INSIDE the card with a positive `top` offset and
     bump the card's top padding to make room — no negative-position
     overflow, no clipping, and the pill stays visually anchored to
     the top of the recommended card. */
  padding-top: calc(var(--ds-space-6) + var(--ds-space-5));
}

.block-pricing .pricing-card.is-recommended:hover {
  transform: translateY(-8px);
}

.block-pricing .pricing-most-popular-pill {
  position: absolute;
  /* FIX-W9-A16: pill sits inside the card, anchored to the top, no
     negative offset → no clipping by parent overflow / scroll container. */
  top: var(--ds-space-3);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ds-cta);
  /* F10 2026-05-08: pill foreground explicitly bound to --ds-cta-fg so
     Hermes can re-skin the paired bg/fg. Was --scheme-fg which is
     scheme-tied (resolves to --ds-ink in the paper scheme), not
     CTA-tied — that locked the pill text to scheme-ink under any
     re-skin. --ds-cta-fg defaults to #fff (white) → no visual change. */
  color: var(--ds-cta-fg, #fff);
  font-family: var(--ds-font-mono);
  /* WAVE3-F05 2026-05-08: bumped from --ds-fs-eyebrow (14px) to 19px
     so the pill qualifies as AA Large (≥18.66px @ 700w) — at 14px+700w
     the audit threshold flips to small-bold (4.5:1), and white-on-#e36218
     is only 3.48:1. At 19px+700w the pill comfortably passes AA Large. */
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--ds-space-2) var(--ds-space-4);
  border-radius: var(--ds-radius-pill);
  white-space: nowrap;
  box-shadow: var(--ds-shadow-cta);
  z-index: 2;
  /* white text on #e36218 ≈ 3.48:1 — AA Large pass for bold ≥18.66px
     (uppercase 700w pill text qualifies). WAVE3-F05 2026-05-08:
     corrected from earlier "4.7:1" misreading. */
}

/* ── Card head ─────────────────────────────────────────────── */
.block-pricing .pricing-card-head {
  margin-bottom: var(--ds-space-4);
}

.block-pricing .pricing-card-eyebrow {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-trust);
  font-weight: 700;
  margin-bottom: var(--ds-space-2);
}

/* FIX-W9-A4 2026-05-07: contrast bug — previous `opacity: 0.85` on
   the cream-tinted recommended-card background was visually fading
   the eyebrow into the surface ("same-color text on same-color bg"
   per QA). Drop the opacity, lock to full `--ds-ink` so the eyebrow
   passes WCAG AA decisively (~16:1 ink-on-cream-tint). Bold weight
   and wider tracking are restated for cascade clarity; orange was
   considered but only yields ~3.9:1 on this surface (fails AA for
   small text), so we keep ink and reserve orange for the pill,
   the price amount, and the CTA button. */
.block-pricing .pricing-card.is-recommended .pricing-card-eyebrow {
  color: var(--ds-ink);
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* SENIOR-T7 2026-05-07: AARP framework requires h3-style plan title in
   humanist sans, sentence-case (NOT all-caps), ≥1.5rem. Anton uppercase
   loses word-shape cues for older readers. Switch to DM Sans bold at
   1.65rem to keep visual weight without sacrificing legibility. */
.block-pricing .pricing-card-title {
  font-family: var(--ds-font-body);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: var(--ds-space-2);
  color: inherit;
}

.block-pricing .pricing-card-subtitle {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  color: inherit;
  opacity: 0.78;
  line-height: 1.4;
  margin-bottom: var(--ds-space-1);
}

/* ── Price block ───────────────────────────────────────────── */
.block-pricing .pricing-card-price-wrap {
  margin: var(--ds-space-3) 0 var(--ds-space-4);
  padding: var(--ds-space-3) 0;
  border-top: 1px solid var(--scheme-rule);
  border-bottom: 1px solid var(--scheme-rule);
}

/* FIX-T5: cream price-wrap with subtle CTA tint contains the orange
   price amount in a clearly-bounded zone (4.5:1+ contrast retained). */
.block-pricing .pricing-card.is-recommended .pricing-card-price-wrap {
  background: color-mix(in srgb, var(--ds-cta) 7%, transparent);
  border-color: color-mix(in srgb, var(--ds-cta) 30%, transparent);
  border-radius: var(--ds-radius-sm);
  padding: var(--ds-space-3) var(--ds-space-3);
  margin-left: calc(-1 * var(--ds-space-2));
  margin-right: calc(-1 * var(--ds-space-2));
}

.block-pricing .pricing-card-price { color: inherit; }

.block-pricing .pricing-price-row {
  display: block;
  line-height: 1;
}
.block-pricing .pricing-price-row.is-hidden { display: none; }

/* F3 2026-05-08: pin to --ds-ink-soft so the currency glyph is always
   8.9:1 on cream rather than collapsing under inverted scheme. */
.block-pricing .pricing-currency {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-h3);
  vertical-align: top;
  margin-right: 2px;
  color: var(--ds-ink-soft);
}

.block-pricing .pricing-amount {
  font-family: var(--ds-font-display);
  font-size: 3.5rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ds-ink);
}
.block-pricing .pricing-card.is-recommended .pricing-amount {
  color: var(--ds-cta);
}

/* F3 2026-05-08: "Daily M-F" / "/yr" period text was at 1.09:1 (audit A4)
   — scheme-fg-soft was collapsing to ink-on-ink. Pin to ink-soft for
   8.9:1 on cream paper. */
.block-pricing .pricing-period {
  display: inline-block;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 600;
  color: var(--ds-ink-soft);
  margin-left: var(--ds-space-2);
  text-transform: lowercase;
}

.block-pricing .pricing-savings-line {
  display: block;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  color: var(--ds-accent);
  font-weight: 600;
  margin-top: var(--ds-space-2);
}

.block-pricing .pricing-amount-text {
  font-family: var(--ds-font-display);
  font-size: 2rem;
  line-height: 1.1;
  color: var(--ds-ink);
}

/* ── Features ──────────────────────────────────────────────── */
.block-pricing .pricing-card-features {
  flex-grow: 1;
}

.block-pricing .pricing-feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--ds-space-5);
}

/* SENIOR-T7 2026-05-07: feature checklist must be ≥16px ≥1.5 line-height.
   Bump to body-sm (16px) at 1.6 line-height for senior breathing room. */
.block-pricing .pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-3);
  padding: var(--ds-space-2) 0;
  font-size: var(--ds-fs-body-sm);
  line-height: 1.6;
}

/* FIX-W9-A16 2026-05-07: feature icon was an empty span with circle-bg +
   ::after pseudo-tick — but at some point the bullet stopped painting
   (rendered HTML showed an empty <span>, no visible bullet). Switch to
   a stroke-only SVG inlined in the template (matches the compare-table
   ct-mark pattern from W9-A13). The CSS below handles colour + sizing
   only; the SVG inherits `currentColor`. Trust-moss for base tiers,
   CTA-orange for the recommended tier. No filled circle = modern,
   matches compare-table visual language across the pricing block. */
.block-pricing .pricing-feature-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--ds-trust);
  line-height: 1;
}
.block-pricing .pricing-feature-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.block-pricing .pricing-card.is-recommended .pricing-feature-icon {
  color: var(--ds-cta);
}

.block-pricing .pricing-feature-text { color: inherit; }

/* ── CTA ───────────────────────────────────────────────────── */
.block-pricing .pricing-card-cta { margin-top: auto; }

/* SENIOR-T7 2026-05-07: AARP requires primary CTA ≥56px. Bumped from
   48 → 56 (var --ds-touch-target-primary). Filled, not ghost. Helper
   text below CTA stays visible so the button is a clear hit-area. */
/* WAVE3-F05 2026-05-08 (CRITICAL — browser audit ratio 1.0):
   `var(--scheme-fg, #fff)` fallback never fires under default
   `.scheme-paper` outer section, so text resolved to ink-on-ink (1.0:1,
   buttons "Book free site visit" / "Talk to a project lead" rendered
   invisible). Pin both bg AND color to literal hex so they cannot
   collide via shared variable resolution. The bg is forced to literal
   #0e0f0c so the global guardrail (which rebinds --ds-ink→#fff on dark
   schemes) cannot flip the bg to white either — color stays white and
   bg stays dark across all 8 schemes. Pattern C overrides on the recommended
   tier above keep the orange CTA variant intact. */
.block-pricing .pricing-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--ds-touch-target-primary, 56px);
  padding: 16px var(--ds-space-4);
  font-family: var(--ds-font-body);
  /* WAVE3-F05 2026-05-08: --ds-fs-body resolves to 18px which is
     just below the AA Large 18.66px+700w boundary, so audit threshold
     was small-bold (4.5:1). Pin to 19px so the orange recommended CTA
     (white-on-#e36218 ≈ 3.48:1) qualifies as Large. The dark variant
     is white-on-ink at ~19:1 → no concern. */
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.005em;
  background: #0e0f0c;
  color: #fff;
  border: 2px solid #0e0f0c;
  border-radius: var(--ds-radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ds-duration-fast) var(--ds-ease-out),
              transform var(--ds-duration-fast) var(--ds-ease-out),
              box-shadow var(--ds-duration-fast) var(--ds-ease-out);
}

.block-pricing .pricing-card-btn:hover,
.block-pricing .pricing-card-btn:focus-visible {
  background: var(--ds-cta-dk, #c95514);
  transform: translateY(-1px);
  text-decoration: none;
  color: #fff;
  border-color: var(--ds-cta-dk, #c95514);
  box-shadow: var(--ds-shadow-md);
}

.block-pricing .pricing-card-btn.is-recommended-btn {
  background: var(--ds-cta);
  border-color: var(--ds-cta);
  box-shadow: var(--ds-shadow-cta);
}

.block-pricing .pricing-card-btn.is-recommended-btn:hover,
.block-pricing .pricing-card-btn.is-recommended-btn:focus-visible {
  background: var(--ds-cta-hover, #c95514);
  border-color: var(--ds-cta-hover, #c95514);
}

/* F3 2026-05-08: helper text under CTA — pin to ink-soft (8.9:1 on
   paper) so it never collapses to ink-on-ink under any scheme. */
.block-pricing .pricing-card-helper {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  color: var(--ds-ink-soft);
  margin: var(--ds-space-3) 0 0;
  text-align: center;
  line-height: 1.4;
}

/* ── Money-back guarantee ──────────────────────────────────── */
/* WAVE3-F05 2026-05-08: --ds-trust (#4d5e3a moss) on a 10%-trust wash
   over cream measured 4.2:1 — close but below the 4.5:1 AA body floor
   for 14px+600w. Darken the text via color-mix toward black so the
   moss reads at ≥ 5:1 while keeping the brand semantic. */
.block-pricing .pricing-guarantee {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  margin-top: var(--ds-space-4);
  padding: var(--ds-space-2) var(--ds-space-3);
  background: color-mix(in srgb, var(--ds-trust) 10%, transparent);
  /* WAVE3-F05 2026-05-08: 70/30 mix landed at 4.2:1 — still below the
     4.5:1 AA body floor for 14px+600w. Push to 50/50 so the moss
     reads at ≈ 6:1 while keeping the trust-green semantic. */
  color: color-mix(in srgb, var(--ds-trust) 50%, #0e0f0c);
  border-radius: var(--ds-radius-sm);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 600;
  align-self: center;
}

/* WAVE3-F05 2026-05-08: browser audit measured 2.97:1 for the orange
   guarantee-text on this orange-tinted bg (was --ds-cta on 10%-cta
   wash over cream). Switched to --ds-cta-dk and then darkened further
   via color-mix toward black so the orange reads at AA body-small (≥4.5:1)
   over the orange-tinted bg. */
.block-pricing .pricing-card.is-recommended .pricing-guarantee {
  background: color-mix(in srgb, var(--ds-cta) 10%, transparent);
  color: color-mix(in srgb, var(--ds-cta-dk, #c95514) 60%, #0e0f0c);
}

.block-pricing .pricing-guarantee-shield {
  flex-shrink: 0;
}

/* ── Comparison table — sticky header & first-col ──────────────────
   FIX-T5 2026-05-06 — rebuild to match standalone block-compare-table:
   horizontal-scroll shell, sticky <thead>, sticky first <th> column,
   highlighted recommended column, zebra rows, mobile 44px tap-area.
   Now visible at all breakpoints (was d-none d-lg-block before). */
.block-pricing .pricing-table-section-heading {
  margin-top: var(--ds-space-7);
  margin-bottom: var(--ds-space-4);
}

.block-pricing .pricing-table-section-heading h3 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-fs-display-sm);
  color: var(--scheme-fg);
  letter-spacing: 0.005em;
  text-align: center;
  margin: 0;
}

.block-pricing .pricing-table-wrap {
  margin-top: var(--ds-space-4);
}

.block-pricing .pricing-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--scheme-card-bg);
  border: 1px solid var(--scheme-rule);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow-sm);
}

.block-pricing .pricing-compare-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  color: var(--scheme-card-fg);
}

/* SENIOR-T7 2026-05-07: column header ≥18px bold sentence-case humanist
   sans (Anton-uppercase columns are unreadable for senior eyes at this
   size). Drop letter-spacing tracking too. */
.block-pricing .pricing-compare-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--ds-paper, #faf6ec);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  padding: var(--ds-space-4) var(--ds-space-3);
  border-bottom: 2px solid var(--ds-ink);
  color: var(--ds-ink);
  vertical-align: middle;
  white-space: nowrap;
  min-width: 120px;
}

.block-pricing .pricing-compare-table thead th.pricing-compare-feature-th {
  position: sticky;
  left: 0;
  z-index: 6;
  text-align: left;
  min-width: 220px;
}

/* WAVE3-F05 2026-05-08: pin to literal #fff — fallback antipattern
   was rendering ink-on-orange (≈ 2.5:1, fail) on default scheme.
   Also bump font-size to 19px so white-on-#e36218 (≈ 3.48:1) qualifies
   as AA Large at 700w (≥18.66px boundary). */
.block-pricing .pricing-compare-table thead th.is-highlighted {
  background: var(--ds-cta);
  color: #fff;
  border-bottom-color: var(--ds-cta);
  font-size: 19px;
}

/* F3 2026-05-08: A4 measured tbody cells / "STARTING AT" / "Daily M-F" /
   "2 yr" labels at 1.09:1 due to var(--scheme-card-fg) collapsing onto
   var(--scheme-card-bg) under inverted schemes. Pin tbody cells to
   ink-on-paper-card. (BANNER / .popular-plan / .pricing-tab / .best-value
   tokens are owned by F10 — NOT modified here.) */
.block-pricing .pricing-compare-table tbody th {
  position: sticky;
  left: 0;
  background: var(--scheme-card-bg, #fff);
  text-align: left;
  font-weight: 600;
  font-size: var(--ds-fs-body);
  padding: var(--ds-space-3) var(--ds-space-4);
  color: var(--ds-ink);
  border-bottom: 1px solid var(--scheme-rule);
  border-right: 1px solid var(--scheme-rule);
  z-index: 2;
  vertical-align: middle;
  min-width: 220px;
}

.block-pricing .pricing-compare-table tbody td {
  text-align: center;
  padding: var(--ds-space-3);
  color: var(--ds-ink);
  background: var(--scheme-card-bg, #fff);
  border-bottom: 1px solid var(--scheme-rule);
  vertical-align: middle;
  min-width: 120px;
}

/* F3 2026-05-08: dark-scheme restoration */
.scheme-ink .block-pricing .pricing-compare-table tbody th,
.scheme-ink .block-pricing .pricing-compare-table tbody td,
.scheme-steel .block-pricing .pricing-compare-table tbody th,
.scheme-steel .block-pricing .pricing-compare-table tbody td,
.ds-scheme-ink .block-pricing .pricing-compare-table tbody th,
.ds-scheme-ink .block-pricing .pricing-compare-table tbody td,
.ds-scheme-steel .block-pricing .pricing-compare-table tbody th,
.ds-scheme-steel .block-pricing .pricing-compare-table tbody td {
  color: #fff;
  background: var(--scheme-card-bg);
}

.block-pricing .pricing-compare-table tbody td.is-highlighted {
  background: color-mix(in srgb, var(--ds-cta) 6%, var(--scheme-card-bg) 94%);
}

.block-pricing .pricing-compare-table tbody tr:nth-child(even) th {
  background: color-mix(in srgb, var(--ds-paper, #faf6ec) 60%, var(--scheme-card-bg) 40%);
}
.block-pricing .pricing-compare-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--ds-paper, #faf6ec) 30%, var(--scheme-card-bg) 70%);
}
.block-pricing .pricing-compare-table tbody tr:nth-child(even) td.is-highlighted {
  background: color-mix(in srgb, var(--ds-cta) 12%, var(--scheme-card-bg) 88%);
}

.block-pricing .pricing-compare-table tbody tr:last-child th,
.block-pricing .pricing-compare-table tbody tr:last-child td {
  border-bottom: none;
}

.block-pricing .pricing-table-text {
  font-weight: 600;
  color: var(--ds-ink);
}
.block-pricing .pricing-table-none {
  color: var(--scheme-fg-mute);
  font-weight: 400;
}

@media (max-width: 768px) {
  /* SWEEP-B2 2026-05-08: thead column-headers and row-headers stay ≥18px on
     mobile (was 16px = --ds-fs-body-sm) to honour the AARP comparison-table
     watchout. Body <td> stays at 16px (--ds-fs-body-sm) — still ≥16px floor.
     Min-widths force horizontal scroll at 375 (160 + 90×3 = 430 > 375),
     which is the documented sticky-first-column scroll affordance. */
  .block-pricing .pricing-compare-table thead th,
  .block-pricing .pricing-compare-table tbody th {
    padding: var(--ds-space-3);
    font-size: var(--ds-fs-body);
    min-height: 44px;
  }
  .block-pricing .pricing-compare-table tbody td {
    padding: var(--ds-space-3);
    font-size: var(--ds-fs-body-sm);
    min-height: 44px;
  }
  .block-pricing .pricing-compare-table thead th.pricing-compare-feature-th,
  .block-pricing .pricing-compare-table tbody th { min-width: 160px; }
  .block-pricing .pricing-compare-table tbody td { min-width: 90px; }
  /* BUG-T7 2026-05-07: hint icon hit-area on mobile bumped to 36px so the
     senior thumb lands consistently. Desktop already comfortable on hover. */
  .block-pricing .pricing-table-hint {
    width: 36px; height: 36px;
    min-width: 36px;
    font-size: 14px;
  }
}

/* BUG-T7 2026-05-07: hint icon enlarged from 16px → 22px for visibility,
   and given a larger transparent hit-area (44×44 desktop, 44×44 mobile)
   via padding so older readers can land a finger on it without missing.
   The visible circle stays 22px (≥18px AARP non-text floor); the
   :focus / :hover state mirrors compare-table-alt for visual coherence. */
.block-pricing .pricing-table-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  min-width: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--scheme-fg-mute);
  color: var(--scheme-fg-mute);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  font-style: italic;
  font-family: var(--ds-font-body);
  line-height: 1;
  margin-left: var(--ds-space-1);
  cursor: help;
  background: var(--scheme-card-bg);
  vertical-align: middle;
  transition: color var(--ds-duration-fast) var(--ds-ease-out),
              border-color var(--ds-duration-fast) var(--ds-ease-out);
}
.block-pricing .pricing-table-hint::before { content: "i"; font-style: italic; }
.block-pricing .pricing-table-hint:hover,
.block-pricing .pricing-table-hint:focus-visible {
  color: var(--ds-cta);
  border-color: var(--ds-cta);
}

/* FIX-T5 2026-05-06 — single-render fix; see compare-table.css. */
/* WAVE3-F05 2026-05-08: pin glyph to #fff — chip backgrounds are
   colored (trust/cta) so glyph must always be white. */
.block-pricing .t-icon {
  width: 22px; height: 22px;
  vertical-align: middle;
  color: #fff;
}
.block-pricing .t-check-circle { background: var(--ds-trust); }
.block-pricing .t-x-circle {
  background: var(--scheme-fg-mute);
  opacity: 0.5;
}
.block-pricing .pricing-compare-table tbody td.is-highlighted .t-check-circle {
  background: var(--ds-cta);
}

/* ── Modern stroke-only check / em-dash mark (W9-A13 2026-05-07) ───
   Mirrors compare-table / compare-table-alt for visual coherence
   across the pricing comparison table.
   ───────────────────────────────────────────────────────────────── */
.block-pricing .pricing-compare-table .ct-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  line-height: 1;
  vertical-align: middle;
}
.block-pricing .pricing-compare-table .ct-mark--yes { color: var(--ds-trust); }
.block-pricing .pricing-compare-table .pricing-table-cell.is-highlighted .ct-mark--yes { color: var(--ds-cta); }
/* WAVE3-F05 2026-05-08: dropped opacity 0.55, bumped weight to 700
   and font-size to 24px so the em-dash glyph qualifies as AA Large
   (3:1) — at the previous 22px+500w under fg-mute the audit threshold
   fell to small-bold (4.5:1) and the dash measured 4.12:1. The dash
   is also wrapped in role="img"+aria-label so it's effectively an
   icon (decorative-pair-with-tip), but bumping size satisfies the
   automated audit too. */
.block-pricing .pricing-compare-table .ct-mark--no {
  color: var(--scheme-fg-mute);
  font-size: 24px;
  font-weight: 700;
}
@media (prefers-reduced-motion: no-preference) {
  .block-pricing .pricing-compare-table .ct-mark--yes svg {
    transition: transform var(--ds-duration-fast) var(--ds-ease);
  }
  .block-pricing .pricing-compare-table .pricing-table-cell:hover .ct-mark--yes svg {
    transform: scale(1.08);
  }
}

/* ── Bottom CTAs ───────────────────────────────────────────── */
.block-pricing .pricing-bottom-ctas {
  margin-top: var(--ds-space-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ds-space-3);
}

/* WAVE3-F05 2026-05-08 (CRITICAL — browser audit ratio 1.0):
   "Talk to sales" button rendered ink-on-ink. Pin literals like
   .pricing-card-btn above. */
.block-pricing .pricing-bottom-btn {
  font-family: var(--ds-font-body);
  font-weight: 700;
  font-size: var(--ds-fs-body);
  padding: var(--ds-space-3) var(--ds-space-5);
  border-radius: var(--ds-radius-sm);
  background: #0e0f0c;
  border: 2px solid #0e0f0c;
  color: #fff;
  text-decoration: none;
}
.block-pricing .pricing-bottom-btn:hover,
.block-pricing .pricing-bottom-btn:focus-visible {
  background: var(--ds-cta-dk, #c95514);
  border-color: var(--ds-cta-dk, #c95514);
  color: #fff;
}

.block-pricing .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 992px) {
  .block-pricing .pricing-card.is-recommended {
    transform: none;
  }
  .block-pricing .pricing-card.is-recommended:hover {
    transform: translateY(-2px);
  }
  .block-pricing .pricing-card { padding: var(--ds-space-5) var(--ds-space-4); }
}

@media (max-width: 768px) {
  /* Mobile: horizontal scroll-snap */
  .block-pricing .pricing-grid {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: var(--ds-space-4);
    padding: var(--ds-space-2) var(--ds-space-2) var(--ds-space-4);
    margin: 0 calc(var(--ds-space-4) * -1);
    -webkit-overflow-scrolling: touch;
    gap: var(--ds-space-3);
  }
  .block-pricing .pricing-tier-col {
    flex: 0 0 86%;
    max-width: 86%;
    scroll-snap-align: center;
  }
  .block-pricing .pricing-tier-col.is-recommended-col {
    order: -1; /* push highlighted tier to first on mobile */
  }
  .block-pricing .pricing-billing-label {
    padding: 10px var(--ds-space-3);
    font-size: var(--ds-fs-body-sm);
  }
  .block-pricing .pricing-amount { font-size: 2.6rem; }
  /* SENIOR-T7: sentence-case humanist h3, never below 1.5rem on mobile */
  .block-pricing .pricing-card-title { font-size: 1.5rem; }
  .block-pricing .pricing-tab {
    min-height: 44px;
    padding: 12px var(--ds-space-3) !important;
  }
}

@media (max-width: 480px) {
  .block-pricing .pricing-tier-col {
    flex: 0 0 90%;
    max-width: 90%;
  }
}