.pricing-summary { max-width: 1080px; margin: 0 auto; padding: 1rem max(16px, 1rem); } /* Q111-OV5: the side gutter never falls under 16 px */
.pricing-summary h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); margin: 0 0 .75rem; }
/* The card shell (.wdv-co-tier, .wdv-co-profile-grid, RECOMMENDED, the price and feature list) comes from
   checkout.css, already loaded on this page. pricing-summary.js wears .wdv-co-pricing-page so those rules
   apply here exactly as they did on the second set (F7, 2026-09-21). */
#pricing-returning { display: block; padding: .65rem 0; color: var(--accent-ink, var(--accent)); text-decoration: underline; text-underline-offset: 3px; }
#pricing-returning[hidden] { display: none; }
/* A11Y-PERF-1 (#110): the three cards arrive by script; until they do, the chooser keeps their height (measured for a
   signed-out visitor: one row of three from 961 px, a stack below), so the sign-in line and the catalog below do not
   jump down when they land (layout shift 0.35 at 1440). The rule stops matching once the cards are in. */
/* SURFACE-SWEEP-1 batch 2: the kept height was an empty band 687 px tall (1,675 px on a phone) while the prices loaded. Three
   outline cards (pricing.html, aria-hidden) now hold the same height until pricing-summary.js replaces them. */
.pricing-summary__ghosts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1080px; margin: 0 auto; min-height: 641px; }
@media (max-width: 960px) { .pricing-summary__ghosts { grid-template-columns: 1fr; max-width: 520px; min-height: 1628px; } }
.pricing-ghost { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 20px 16px 16px; border: 2px solid var(--border); border-radius: 18px; background: var(--border-subtle); }
.pricing-ghost span { display: block; height: 12px; width: 82%; border-radius: 6px; background: var(--border); animation: pricing-ghost-pulse 1.4s ease-in-out infinite alternate; }
.pricing-ghost span:first-child { width: 45%; height: 18px; }
.pricing-ghost span:nth-child(2) { width: 35%; height: 40px; }
.pricing-ghost span:nth-child(odd):not(:first-child):not(:last-child) { width: 68%; }
.pricing-ghost span:last-child { width: 100%; height: 44px; border-radius: 12px; }
@keyframes pricing-ghost-pulse { from { opacity: 1; } to { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .pricing-ghost span { animation: none; } }
/* The three cards keep their own heights, so a short card holds no empty block above its button. */
.wdv-co-pricing-page .wdv-co-profile-grid { align-items: start; }
.pricing-details__title { font-size: 1.4rem; margin: 0 0 .5rem; }

/* Stage 4 item 14 (Buying P1-13, P2-18; 2026-09-23): the headings ran upside down (the page title 25.6 px, the section titles
   48 px from the global h2), and the gate kept 120 px of padding above "See every report and package". */
.wt-choose h2 { font-size: 1.5rem; }
.pricing-compare .section-header h2 { font-size: clamp(1.6rem, 3.2vw, 2rem); }
#pricing.gate { padding-top: 24px; padding-bottom: 48px; }
/* Stage 4 item 15: the owner's line under the cards, with its two next steps. */
.pricing-owned-top { margin: 1rem auto 0; max-width: 40rem; text-align: center; font-size: 1rem; line-height: 1.55; color: var(--text); }
.pricing-owned-top p { margin: 0 0 .5rem; }
.pricing-owned-top__links { display: flex; gap: .5rem 1.5rem; justify-content: center; flex-wrap: wrap; }
.pricing-owned-top__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-text, #E07A6B); text-decoration: underline; text-underline-offset: 3px; }
[data-theme="light"] .pricing-owned-top__link { color: #9C4A3E; }
/* Q108-W1 (#108's production walk, fixed for #109): the RECOMMENDED badge rises 12 px above its card, and the heading kept
   only a 12 px margin, so on a phone the badge sat on the heading's bottom edge. The options leave room for the badge. */
.pricing-summary__options { padding-top: 18px; }
/* PRICING-PLANS-112: Plus and Pro on /pricing, after the report chooser; the side gutter never falls under 16 px (Q111-OV5). */
.pricing-plans { max-width: 1080px; margin: 0 auto; padding: 1rem max(16px, 1rem) 2rem; }
.pricing-plans__title { font-size: clamp(1.35rem, 3vw, 1.75rem); margin: 0 0 1rem; text-wrap: balance; }
.pricing-plans__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; align-items: start; }
.pricing-plans__plan { min-width: 0; padding: 20px; border: 1px solid var(--border, rgba(127,127,127,.3)); border-radius: 14px; background: var(--bg-1, transparent); }
.pricing-plans__name { margin: 0 0 .4rem; font-size: 1.2rem; }
.pricing-plans__tagline { margin: 0 0 .75rem; color: var(--text-secondary, inherit); line-height: 1.5; }
.pricing-plans__features { margin: 0 0 1rem; padding-left: 1.2rem; line-height: 1.55; }
.pricing-plans__features li + li { margin-top: .35rem; }
.pricing-plans__price { margin: 0 0 .75rem; font-weight: 600; line-height: 1.45; }
.pricing-plans__buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.pricing-plans__buttons .btn { flex: 1 1 200px; white-space: normal; text-align: center; }
.pricing-plans__note { max-width: 640px; margin: 1rem 0 0; color: var(--text-secondary, inherit); line-height: 1.5; }
.pricing-plans__more { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pricing-plans__intro { max-width: 720px; margin: 0 0 1.25rem; color: var(--text-secondary, inherit); line-height: 1.55; }
.pricing-plans__member { max-width: 720px; margin: 0 0 1.25rem; padding: 12px 16px; border-radius: 10px; background: var(--bg-2, rgba(127,127,127,.12)); line-height: 1.5; }
.pricing-plans__both { margin: 1.25rem 0 .5rem; font-weight: 600; }
/* CARD-DISCOVER-1: the sentence under the chooser that tells the result image apart from the digital card. */
.pricing-summary__card { margin: 14px auto 0; max-width: 640px; font-size: 0.95rem; line-height: 1.55; color: var(--text-2); text-align: center; }
.pricing-summary__card a { color: var(--accent-text, var(--accent)); text-decoration: underline; text-underline-offset: 3px; }
/* Partner line for card owners (partner-pays.js). */
.wt-partner-pays { margin: 18px 0 0; padding: 14px 16px; border-left: 3px solid var(--accent, currentColor); background: var(--bg-card, transparent); border-radius: 6px; }
.wt-partner-pays__line { margin: 0 0 6px; font-weight: 600; color: var(--text); }
.wt-partner-pays__join { margin: 8px 0 0; font-weight: 600; }
.wt-partner-pays__note { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }