/* Pricing page - scoped to .pricing-page

   This component paints NO background, NO text colour and NO font of its own.
   It is a token scope plus layout, so it dissolves into whatever hosts it -
   the standalone /pricing page and the landing-page embed alike. The previous
   version declared its own cream/near-black palette and Inter, which is why
   the embed read as a foreign slab and why projects needed hundreds of lines
   of !important overrides to claw it back.

   Every colour derives from the project's own tokens, so a project rebrands
   the pricing page by doing nothing at all. Structure follows the shared base
   components (.btn, .status-badge, .base-seg-tabs, .collapse-container,
   .data-table); only the plan/credit/one-time cards are pricing-specific. */

.pricing-page {
  /* THE brand lever - --primary-blue, never --primary-color: the latter is
     the framework's TEAL (base_style.css), and consuming it is why a project
     that never defined --primary rendered its pricing page in teal. */
  --pp-accent: var(--primary-blue);

  /* Surfaces are brand-TINTED mixes rather than raw --card-bg. A project may
     bridge the neutral tokens only on app pages (eduloo does), and an
     untinted grey card reads as foreign material on a branded marketing
     page. The mix keeps every surface in the page's own hue family. */
  --pp-surface: color-mix(in oklch, var(--primary-blue) 4%, var(--card-bg));
  --pp-surface-2: color-mix(
    in oklch,
    var(--primary-blue) 3%,
    var(--container-bg)
  );
  --pp-border: var(--border-color);
  --pp-text: var(--text-color);
  --pp-text-muted: var(--muted-text);

  --pp-radius-card: 24px;
  --pp-radius-ctl: 14px;
  --pp-radius-pill: 999px;
  --pp-card-pad: 28px;
  --pp-gap: 22px;
  --pp-popular-lift: -8px;
  --pp-section-max: 1200px;
}

body.theme-light .pricing-page {
  --pp-border-strong: color-mix(
    in oklch,
    var(--border-color) 55%,
    var(--text-color)
  );
  --pp-text-2: color-mix(in oklch, var(--text-color) 82%, transparent);
  --pp-text-faint: color-mix(in oklch, var(--muted-text) 72%, transparent);

  --pp-accent-soft: color-mix(in oklch, var(--pp-accent) 14%, transparent);
  --pp-accent-border: color-mix(in oklch, var(--pp-accent) 40%, transparent);
  --pp-accent-tint: color-mix(in oklch, var(--pp-accent) 8%, transparent);

  /* Shadows stay per-theme rgba. Expressing them as a mix of --text-color
     (as some project overlays do) paints a WHITE glow in dark theme, because
     there --text-color is near-white. */
  --pp-shadow-xs: 0 4px 14px -10px rgba(20, 15, 10, 0.14);
  --pp-shadow-sm: 0 10px 26px -16px rgba(20, 15, 10, 0.18);
  --pp-shadow-md: 0 18px 40px -20px rgba(20, 15, 10, 0.22);

  --pp-popular-bg: color-mix(in oklch, var(--pp-accent) 5%, var(--pp-surface));
  --pp-popular-ring: color-mix(in oklch, var(--pp-accent) 50%, transparent);
  --pp-popular-shadow:
    0 0 0 1px color-mix(in oklch, var(--pp-accent) 22%, transparent),
    0 26px 52px -24px color-mix(in oklch, var(--pp-accent) 36%, transparent);
}

body.theme-dark .pricing-page {
  --pp-border-strong: color-mix(
    in oklch,
    var(--border-color) 55%,
    var(--text-color)
  );
  --pp-text-2: color-mix(in oklch, var(--text-color) 82%, transparent);
  --pp-text-faint: color-mix(in oklch, var(--muted-text) 72%, transparent);

  --pp-accent-soft: color-mix(in oklch, var(--pp-accent) 20%, transparent);
  --pp-accent-border: color-mix(in oklch, var(--pp-accent) 50%, transparent);
  --pp-accent-tint: color-mix(in oklch, var(--pp-accent) 14%, transparent);

  --pp-shadow-xs: 0 4px 14px -10px rgba(0, 0, 0, 0.45);
  --pp-shadow-sm: 0 10px 26px -16px rgba(0, 0, 0, 0.55);
  --pp-shadow-md: 0 18px 40px -20px rgba(0, 0, 0, 0.62);

  --pp-popular-bg: color-mix(in oklch, var(--pp-accent) 8%, var(--pp-surface));
  --pp-popular-ring: color-mix(in oklch, var(--pp-accent) 50%, transparent);
  --pp-popular-shadow:
    0 0 0 1px color-mix(in oklch, var(--pp-accent) 26%, transparent),
    0 26px 52px -24px color-mix(in oklch, var(--pp-accent) 42%, transparent);
}

.pricing-page,
.pricing-page * {
  box-sizing: border-box;
}

/* Prices used to be set in JetBrains Mono. The point was never the typeface -
   it was column-aligned digits, which tabular figures give in the project's
   own font. */
.pricing-page .mono {
  font-family: inherit;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings:
    'tnum' 1,
    'lnum' 1;
}

.pricing-page .is-hidden {
  display: none !important;
}

/* Guarantee horizontal centering of direct sections regardless of any host
   project rules that might re-align them. !important is required because
   some projects (e.g. secretnote) ship a universal `* { margin: 0 !important }`
   reset that would otherwise win on specificity. Excluded for the embed,
   where the host container owns width and alignment. */
.pricing-page:not(.pricing-page--embed) > .pricing-hero,
.pricing-page:not(.pricing-page--embed) > .pricing-section,
.pricing-page:not(.pricing-page--embed) > .pricing-group-tabs-wrap,
.pricing-page:not(.pricing-page--embed) > .pricing-trust > .pricing-trust-row {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------- Base-component adapters ----------
   These are the ONLY rules that touch a shared component's own classes.
   Everything else about buttons, badges, tabs, collapses and tables is
   inherited, so they stay in sync with the rest of the site for free. */

/* base_elements.css ships `margin: 8px 8px 8px 0` on every button. */
.pricing-page .btn {
  margin: 0;
}
.pricing-page .pp-btn-block {
  width: 100%;
}
.pricing-page .pp-btn-sm {
  padding: 7px 16px;
  font-size: 13px;
}
.pricing-page .pp-badge-sm {
  padding: 4px 9px;
  font-size: 11px;
  letter-spacing: 0;
}
/* Badges don't nudge on hover inside a card - the card itself already lifts. */
.pricing-page .status-badge:hover {
  transform: none;
}

/* A brand badge inside the ACTIVE segmented tab would be brand-on-brand and
   effectively invisible: the tab pill is already --primary-blue. */
.pricing-page .base-seg-tab--active .status-badge {
  border-color: transparent !important;
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}
.pricing-page .base-seg-tabs {
  border-radius: var(--pp-radius-pill);
}
.pricing-page .base-seg-tabs .base-seg-tab {
  border-radius: var(--pp-radius-pill) !important;
}
.pricing-page .base-seg-indicator {
  border-radius: var(--pp-radius-pill);
}
.pricing-page .pp-group-tabs {
  max-width: 100%;
  overflow-x: auto;
}

/* ---------- Page layout ---------- */
.pricing-page {
  padding: 0;
}

.pricing-hero {
  padding: 56px 40px 40px;
  text-align: center;
  max-width: var(--pp-section-max);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.pricing-hero-title {
  /* Cap the width so longer titles wrap onto ~2 lines instead of one very
     wide line; text-wrap: balance keeps the two lines roughly even. Short
     titles still fit on a single line. !important on margin + text-align
     defends against project overlays (heading resets / `* { margin:0 }`)
     that otherwise left-align the now-constrained title. */
  margin: 0 auto !important;
  max-width: 960px;
  text-align: center !important;
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -1.3px;
  line-height: 1.1;
  color: var(--pp-text);
  text-wrap: balance;
}
/* The subtitle (a <p>) centers fine, but project overlays ship an h1-specific
   rule that left-aligns this title and beats the rule above. This
   higher-specificity selector (0,3,1) re-centers it for good. */
.pricing-page .pricing-hero h1.pricing-hero-title {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
.pricing-hero-sub {
  margin: 16px auto 0 !important;
  font-size: 17px;
  color: var(--pp-text-muted);
  max-width: 560px;
  line-height: 1.5;
}

.pricing-group-tabs-wrap {
  padding: 0 40px;
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
  width: 100%;
}

@keyframes pricing-panel-flash {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.pricing-subs.is-flash,
.pricing-page [data-billing-display].is-flash,
.pricing-page .pp-plan-billing-note.is-flash {
  animation: pricing-panel-flash 0.22s ease-out;
}

.pricing-section {
  padding: 32px 40px;
  max-width: var(--pp-section-max);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.pricing-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: nowrap;
}
.pricing-section-header > :first-child {
  min-width: 0;
  flex: 1 1 auto;
}
.pricing-section-header > .base-seg-tabs {
  flex: 0 0 auto;
}
.pricing-eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: var(--pp-accent);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.pricing-section-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--pp-text);
}
.pricing-section-tagline {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--pp-text-muted);
}
.pricing-section-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.pricing-section-aside {
  margin: 0;
  font-size: 14px;
  color: var(--pp-text-muted);
}

/* ---------- Price ---------- */
.pricing-page .pp-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pricing-page .pp-price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--pp-text);
  flex-wrap: wrap;
}
.pricing-page .pp-price-int {
  font-weight: 700;
  letter-spacing: -1.2px;
  line-height: 1;
}
.pricing-page .pp-price-dec {
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--pp-text-2);
}
.pricing-page .pp-price-strike {
  color: var(--pp-text-faint);
  text-decoration: line-through;
  margin-right: 4px;
}
.pricing-page .pp-price-period {
  color: var(--pp-text-muted);
  font-weight: 500;
}
.pricing-page .pp-price-cap {
  color: var(--pp-text-faint);
  font-weight: 500;
}

.pricing-page .pp-price--lg .pp-price-int {
  font-size: 46px;
}
.pricing-page .pp-price--lg .pp-price-dec,
.pricing-page .pp-price--lg .pp-price-strike {
  font-size: 22px;
}
.pricing-page .pp-price--lg .pp-price-period {
  font-size: 14px;
}
.pricing-page .pp-price--lg .pp-price-cap {
  font-size: 12px;
}

.pricing-page .pp-price--md .pp-price-int {
  font-size: 22px;
}
.pricing-page .pp-price--md .pp-price-dec,
.pricing-page .pp-price--md .pp-price-strike {
  font-size: 14px;
}
.pricing-page .pp-price--md .pp-price-period {
  font-size: 12px;
}
.pricing-page .pp-price--md .pp-price-cap {
  font-size: 11px;
}

/* ---------- Plan cards ---------- */
.pricing-plans {
  display: grid;
  gap: var(--pp-gap);
}
.pricing-plans[data-plan-count='2'] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pricing-plans[data-plan-count='3'] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pricing-plans[data-plan-count='4'] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pp-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--pp-card-pad);
  background: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-card);
  box-shadow: var(--pp-shadow-sm);
  min-height: 480px;
  transition:
    transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 240ms ease,
    border-color 240ms ease;
}
.pp-plan-card:hover {
  border-color: var(--pp-accent-border);
  box-shadow: var(--pp-shadow-md);
}
.pp-plan-card--popular {
  background: var(--pp-popular-bg);
  border: 1.5px solid var(--pp-popular-ring);
  box-shadow: var(--pp-popular-shadow);
}
/* The lift only makes sense while the cards sit side by side. */
@media (min-width: 901px) {
  .pp-plan-card--popular {
    transform: translateY(var(--pp-popular-lift));
  }
  .pp-plan-card--popular:hover {
    transform: translateY(calc(var(--pp-popular-lift) - 4px));
  }
}
.pp-plan-popular-badge {
  position: absolute;
  top: -13px;
  left: var(--pp-card-pad);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(
    135deg,
    var(--cta-gradient-start) 0%,
    var(--cta-gradient-mid) 55%,
    var(--cta-gradient-end) 100%
  );
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 6px 12px;
  border-radius: var(--pp-radius-pill);
  box-shadow: 0 8px 18px -10px var(--pp-accent);
}
.pp-plan-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.pp-plan-name {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--pp-text);
  letter-spacing: -0.3px;
}
.pp-plan-tagline {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--pp-text-muted);
  line-height: 1.5;
  /* Reserve up to two lines so a longer description on one plan doesn't push
     its price + CTA down out of line with the other cards. */
  min-height: 40px;
}
.pp-plan-price-block {
  margin-bottom: 6px;
}
.pp-plan-billing-note {
  font-size: 12px;
  color: var(--pp-text-muted);
  margin-top: 4px;
  min-height: 18px;
}
.pricing-page .pp-plan-cta {
  margin-top: 18px;
  margin-bottom: 18px;
}
/* Lead-in for the feature list ("Everything in Free, plus:"), so it aligns with
   the rows it introduces rather than with the button above it. */
.pp-plan-hint {
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-text-2);
  margin: 0 0 14px;
}
/* Seats a plan covers. Hollow glyphs are the seats the NEXT plan up would add,
   so Pro and Family read as the same row at different fill levels. */
.pp-plan-seats {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pp-border);
}
.pp-seats-heads {
  display: flex;
  align-items: center;
  gap: 3px;
}
.pp-seat {
  display: block;
  color: var(--pp-text-faint);
}
.pp-seat.is-on {
  color: var(--pp-accent);
}
.pp-seats-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--pp-accent);
  margin-left: 2px;
}
.pp-seats-label {
  font-size: 13px;
  color: var(--pp-text-muted);
}

.pp-plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pp-plan-feature {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--pp-text-2);
  line-height: 1.5;
}
.pp-plan-feature-icon {
  margin-top: 3px;
  color: var(--pp-accent);
  flex: 0 0 auto;
  display: inline-flex;
}
.pp-plan-feature.is-excluded {
  color: var(--pp-text-faint);
}
.pp-plan-feature.is-excluded .pp-plan-feature-icon {
  color: var(--pp-text-faint);
}
.pp-plan-feature.is-excluded .pp-plan-feature-text {
  text-decoration: line-through;
}

/* ---------- Credit packages ---------- */
.pricing-credits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.pp-credit-card {
  position: relative;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 20px !important;
  margin: 0 !important;
  background: var(--pp-surface) !important;
  border: 1px solid var(--pp-border) !important;
  border-radius: var(--pp-radius-card) !important;
  box-shadow: var(--pp-shadow-xs) !important;
  color: var(--pp-text) !important;
  cursor: pointer;
  text-decoration: none !important;
  transition:
    transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.16s,
    box-shadow 0.16s;
  font: inherit;
  font-family: inherit;
}
.pp-credit-card:hover {
  transform: translateY(-3px);
  border-color: var(--pp-accent-border) !important;
  box-shadow: var(--pp-shadow-md) !important;
}
.pp-credit-badge {
  position: absolute;
  top: -12px;
  right: 16px;
}
.pp-credit-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pp-credit-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--pp-radius-ctl);
  background: var(--pp-accent-soft);
  color: var(--pp-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pp-credit-amount {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--pp-text);
}
.pp-credit-label {
  font-size: 11px;
  color: var(--pp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.pp-credit-bonus {
  font-size: 12px;
  color: var(--pp-accent);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
.pp-credit-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--pp-border);
}
.pp-credit-per {
  font-size: 11px;
  color: var(--pp-text-muted);
}
.pp-credit-per-strike {
  text-decoration: line-through;
  color: var(--pp-text-faint);
  margin-right: 4px;
}
.pp-credit-savings {
  font-size: 11px;
  font-weight: 700;
  color: var(--pp-accent);
}

/* The per-action cost list is a .collapse-container; only the summary content
   and the table inside it are pricing's business. */
.pricing-page .pp-credit-costs {
  margin-top: 20px;
}
.pricing-page .pp-credit-costs-list {
  display: flex;
  gap: 24px;
  font-size: 12px;
  color: var(--pp-text-muted);
  flex-wrap: wrap;
}
.pricing-page .pp-credit-costs-list strong {
  color: var(--pp-text);
  font-weight: 600;
}
.pricing-page .pp-cost-cell {
  text-align: right;
  font-weight: 600;
  color: var(--pp-accent);
}
.pricing-page .pp-cost-action {
  font-weight: 600;
  color: var(--pp-text);
  white-space: nowrap;
}
.pricing-page .pp-cost-desc {
  color: var(--pp-text-muted);
}

/* ---------- One-time unlocks ---------- */
.pricing-onetime {
  padding-bottom: 80px;
}
.pricing-onetime-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.pp-onetime-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  background: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-card);
  box-shadow: var(--pp-shadow-xs);
  min-height: 220px;
  transition:
    border-color 0.16s,
    box-shadow 0.16s;
}
.pp-onetime-card:hover {
  border-color: var(--pp-accent-border);
  box-shadow: var(--pp-shadow-sm);
}
.pp-onetime-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--pp-radius-ctl);
  background: var(--pp-accent-soft);
  color: var(--pp-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pp-onetime-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--pp-text);
  letter-spacing: -0.2px;
}
.pp-onetime-desc {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--pp-text-muted);
  line-height: 1.5;
}
.pp-onetime-footer {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

/* ---------- Trust footer ---------- */
.pricing-trust {
  padding: 32px 40px;
  border-top: 1px solid var(--pp-border);
  background: var(--pp-surface-2);
}
.pricing-trust-row {
  max-width: var(--pp-section-max);
  margin: 0 auto;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.pricing-trust-items {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: var(--pp-text-muted);
  flex-wrap: wrap;
}
.pricing-trust-items span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pricing-trust-note {
  font-size: 12px;
  color: var(--pp-text-faint);
  max-width: 480px;
}

/* ---------- Compare table ----------
   The shell is a .collapse-container and the table is a .data-table; only the
   marketing-specific behaviour lives here. */
.pricing-page .pp-compare {
  margin-top: 32px;
  /* base_collapse.js writes an inline max-height when JS drives the open
     animation, but the print / reduced-motion path falls back to this. */
  --collapse-max-height: 4000px;
}
.pricing-page .pp-compare .collapse-header-title {
  font-size: 14px;
  font-weight: 600;
}
/* Inside a collapse the table wrapper must not draw a second card. */
.pricing-page .collapse-content-inner .data-table-wrap {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
/* base_data_table.css centers and nowraps every header cell; the feature
   column is prose. */
.pricing-page .pp-compare-th-feature,
.pricing-page .pp-compare-feature {
  text-align: left !important;
  white-space: normal;
  width: 28%;
}
.pricing-page .pp-compare-feature {
  font-weight: 600;
  color: var(--pp-text-2);
}
.pricing-page .pp-compare-feature-ic {
  display: inline-flex;
  margin-right: 6px;
  color: var(--pp-accent);
}
.pricing-page .pp-compare-feature-ic i {
  font-size: 13px;
}
.pricing-page .pp-compare-feature-desc {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: 12px;
  color: var(--pp-text-muted);
  line-height: 1.4;
}
.pricing-page .pp-compare-th-plan.is-popular {
  color: var(--pp-accent);
  position: relative;
}
.pricing-page .pp-compare-th-plan.is-popular::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 2px;
  background: var(--pp-accent);
}
/* Must beat the zebra stripe on even rows. */
.pricing-page .data-table tbody td.is-popular,
.pricing-page .data-table tbody tr:nth-child(even) td.is-popular {
  background: var(--pp-accent-tint);
  font-weight: 600;
}
/* Category rows escape the zebra and the column rules. */
.pricing-page .pp-compare-category-row td,
.pricing-page .data-table tbody tr.pp-compare-category-row:nth-child(even) td {
  background: var(--pp-surface-2);
  text-align: left !important;
  font-size: 11px;
  font-weight: 700;
  color: var(--pp-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 0;
}
.pricing-page .pp-compare-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pp-accent);
}
.pricing-page .pp-compare-dash {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pp-text-faint);
}
.pricing-page .data-table tfoot td {
  padding: 20px 16px;
  border-bottom: 0;
}
.pricing-page .pp-compare-cta-cell.is-popular {
  background: var(--pp-accent-tint);
}
.pricing-page .pp-compare-cta-cell .btn {
  width: 100%;
}

/* ---------- Landing-page embed ----------
   The embed only ever REMOVES page chrome: the host section owns the
   background, the host container owns width and horizontal padding. */
.pricing-page--embed > .pricing-section {
  padding: 0;
  max-width: none;
}
.pricing-page--embed .pp-compare {
  display: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .pricing-hero {
    padding: 40px 16px 24px;
  }
  .pricing-hero-title {
    font-size: 32px;
  }
  .pricing-hero-sub {
    font-size: 15px;
  }
  .pricing-group-tabs-wrap,
  .pricing-section,
  .pricing-trust {
    padding-left: 16px;
    padding-right: 16px;
  }
  .pricing-section {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .pricing-page--embed > .pricing-section {
    padding-left: 0;
    padding-right: 0;
  }

  .pricing-section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .pricing-plans,
  .pricing-plans[data-plan-count='2'],
  .pricing-plans[data-plan-count='3'],
  .pricing-plans[data-plan-count='4'] {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .pp-plan-card {
    min-height: auto;
  }

  /* Compare table: keep horizontal scroll on mobile */
  .pricing-page .data-table {
    font-size: 12px;
  }
  .pricing-page .data-table th,
  .pricing-page .data-table td {
    padding: 10px 12px;
  }

  .pricing-credits-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .pricing-page .pp-credit-costs-list {
    gap: 12px;
  }

  .pricing-onetime-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .pricing-onetime {
    padding-bottom: 48px;
  }

  .pricing-trust-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 520px) {
  .pricing-credits-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-page .pp-plan-card,
  .pricing-page .pp-credit-card,
  .pricing-page .pp-onetime-card {
    transition: none;
  }
  .pricing-page .pp-credit-card:hover {
    transform: none;
  }
  .pricing-subs.is-flash,
  .pricing-page [data-billing-display].is-flash,
  .pricing-page .pp-plan-billing-note.is-flash {
    animation: none;
  }
}