/* P20 R47: distinct chapters on the fees page; existing VI type and widths stay shared. */
:root[data-release] .pricing-page .pricing-band {
  background: var(--vi-surface);
}
:root[data-release] .pricing-page .pricing-hero {
  padding-block: var(--vi-space-16) var(--vi-space-20);
}
:root[data-release] .pricing-page :is(.full-plans, .plan-compare, .pricing-faq, .contact-section) {
  padding-block: var(--vi-section-space);
}
:root[data-release] .pricing-page .plans-section-line {
  margin-bottom: var(--vi-space-8);
  justify-content: flex-end;
}
:root[data-release] .pricing-page .plans-scope-note {
  margin-block: var(--vi-space-6) 0;
}
:root[data-release] .pricing-page .compare-heading {
  margin-bottom: var(--vi-heading-gap);
}
:root[data-release] .pricing-page .pricing-faq {
  align-items: start;
}
:root[data-release] .pricing-page .pricing-questions details:first-child {
  border-top: 0;
}
:root[data-release] .pricing-page .contact-section {
  border-top: 0;
}
@media (max-width: 760px) {
  :root[data-release] .pricing-page .pricing-hero {
    padding-block: var(--vi-space-12) var(--vi-space-16);
  }
  :root[data-release] .pricing-page .plans-section-line {
    margin-bottom: var(--vi-space-6);
  }
  :root[data-release] .pricing-page .pricing-questions {
    margin-top: var(--vi-space-10);
  }
}

/* R53: keep comparison headers and sticky labels on the same gray surface. */
:root[data-release] .pricing-page .pricing-band .comparison-scroll thead th {
  background: var(--vi-surface);
}
@media (max-width: 760px) {
  :root[data-release] .pricing-page .pricing-band .comparison-scroll th:first-child {
    background: var(--vi-surface);
    box-shadow: 5px 0 8px rgb(245 245 247 / .6);
  }
}