/* Pricing page (Figma 220:12035): pricing section reused, plus fine print and a comparison table. */
.page-pricing .s-pricing .section-head { margin-bottom: var(--space-10); }
.p-pricing__fine { margin-top: var(--space-12); text-align: center; font-size: var(--para-sm-size); line-height: var(--para-sm-lh); color: var(--text-low); }

.p-pricing__compare { padding-block: var(--space-8) var(--space-12); }
.p-pricing__table-wrap { max-width: 1024px; margin-inline: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.p-pricing__table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: var(--body-sm-size); color: var(--text-strong); }
.p-pricing__table thead th { padding: var(--space-3) var(--space-4); font-weight: var(--fw-medium); font-size: var(--body-md-size); text-align: center; }
.p-pricing__table tbody th[scope="row"] { padding: var(--space-4); font-weight: var(--fw-medium); text-align: left; }
.p-pricing__table td { padding: var(--space-4); text-align: center; color: var(--text-strong); width: 21%; }
.p-pricing__group th { padding: var(--space-3) var(--space-4); background: var(--base-medium); text-align: left; font-weight: var(--fw-semibold); }
.p-pricing__group th { border-radius: var(--radius-sm); }
.p-pricing__group:not(:first-child) th { box-shadow: 0 -16px 0 var(--base-high); }
.p-pricing__yes { display: inline-block; width: 16px; height: 16px; color: var(--green-600); vertical-align: middle; }
.p-pricing__no { color: var(--text-medium); }
@media (min-width: 1024px) {
  .p-pricing__compare { padding-block: var(--space-12) var(--space-16); }
  .p-pricing__table { font-size: var(--body-md-size); }
}

/* Figma QC: desktop rhythm of the pricing page (title 144, switch 256, plans 344, table 1014, FAQ 1801, footer 2637) */
.page-pricing .s-pricing__title { font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: var(--h1-ls); }
.p-pricing__table thead th { height: 51px; }
.p-pricing__table tbody th[scope="row"], .p-pricing__table td { height: 56px; }
.p-pricing__group th { height: 40px; padding-block: 0; }
.p-pricing__group:not(:first-child) th { box-shadow: none; }
/* 16px gap after each group, as in the design */
.p-pricing__table tbody tr:has(+ .p-pricing__group) > * { height: 72px; padding-bottom: var(--space-8); }
@media (min-width: 1024px) {
  .page-pricing .s-pricing { padding-top: calc(var(--header-h) + var(--space-2) + var(--space-16) + var(--space-2)); }
  .page-pricing .s-pricing .section-head { gap: var(--space-10); margin-bottom: 44px; }
  .page-pricing .s-pricing__billing { margin-top: 0; }
  .page-pricing .p-pricing__fine { margin-top: var(--space-20, 80px); }
  .p-pricing__compare { padding-block: 0 var(--space-20, 80px); }
  .page-pricing .s-faq { padding-bottom: 112px; }
}
.p-pricing__table td { width: 208px; }
.p-pricing__no { color: var(--text-strong); }

/* Mobile QC: keep the feature names visible while the comparison table scrolls sideways */
@media (max-width: 1023px) {
  .p-pricing__table thead td, .p-pricing__table tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--base-high); box-shadow: 1px 0 0 var(--border-thin); }
  .p-pricing__table tbody th[scope="row"] { min-width: 150px; }
  .p-pricing__group th span { position: sticky; left: var(--space-4); display: inline-block; }
}

/* Interactions: comparison table hover, column highlight (js/pages/pricing.js sets data-col), checkmark pop, scroll hint.
   Plan cards, switch and price changes animate from css/sections/pricing.css + js/sections/pricing.js. */
.p-pricing__table thead th,
.p-pricing__table tbody tr:not(.p-pricing__group) > * { transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.p-pricing__table thead th { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
@media (hover: hover) {
  .p-pricing__table tbody tr:not(.p-pricing__group):hover > * { background-color: var(--base-medium); }
  .p-pricing__table tbody tr:not(.p-pricing__group):hover > :first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
  .p-pricing__table tbody tr:not(.p-pricing__group):hover > :last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
  .p-pricing__table[data-col="1"] tr:not(.p-pricing__group) > :nth-child(2),
  .p-pricing__table[data-col="2"] tr:not(.p-pricing__group) > :nth-child(3),
  .p-pricing__table[data-col="3"] tr:not(.p-pricing__group) > :nth-child(4) { background-image: linear-gradient(var(--black-5), var(--black-5)); }
  .p-pricing__table tbody tr:not(.p-pricing__group):hover .p-pricing__yes { transform: scale(1.15); }
}
.p-pricing__yes { transition: transform var(--dur) var(--ease-spring); }

/* Checkmarks pop in as their row comes into view (js/pages/pricing.js adds .is-in) */
.motion .p-pricing__table tbody tr:not(.is-in) .p-pricing__yes { transform: scale(0.3); opacity: 0; }
.motion .p-pricing__table tbody tr.is-in .p-pricing__yes { transition: transform var(--dur-slow) var(--ease-spring), opacity var(--dur) var(--ease-out); }

/* Fade the right edge while the table has more to scroll to (mobile) */
.p-pricing__table-wrap.is-scrollable:not(.is-end) {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--space-12)), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - var(--space-12)), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .p-pricing__yes { transition: none; }
  .p-pricing__table tbody tr:hover .p-pricing__yes { transform: none; }
}