/* The pricing comparison stays a grid on desktop and a native swipe rail on phones. */
.plan-navigation, .mobile-plan-includes, .plan-swipe-hint { display: none; }
@media (max-width: 640px) {
  .pricing-hero { padding: 1.6rem 0 1rem; }
  .pricing-hero h1 { max-width: 17ch; font-size: clamp(1.9rem, 8vw, 2.7rem); line-height: 1.05; }
  .pricing-lede { margin-top: .7rem; font-size: .88rem; line-height: 1.5; }
  .pricing-promise { display: none; }
  .pricing-section { padding: 1.3rem 0 2.5rem; }
  .pricing-controls { gap: 1rem; margin-bottom: .5rem; }
  .pricing-controls h2 { max-width: none; font-size: 1.25rem; }
  .pricing-controls .eyebrow { display: none; }
  .pricing-status { min-height: 0; margin: 0; }
  .pricing-status:not(:empty) { margin: .6rem 0; }
  .pricing-grid {
    display: flex; gap: .85rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: thin;
    padding: 1rem 0; margin-bottom: .2rem;
  }
  .pricing-grid > .plan-card { flex: 0 0 78%; }
  /* Trailing space lets the last card snap to the same leading edge. */
  .pricing-grid::after { content: ""; flex: 0 0 calc(22% - .85rem); }
  .plan-card { scroll-snap-align: start; padding: 1rem; box-shadow: var(--shadow-sm); }
  .plan-swipe-hint { display: flex; justify-content: space-between; align-items: center; margin: .85rem 0 0; color: var(--ink-soft); font-size: .78rem; }
  .plan-swipe-hint span { color: var(--brand-primary); font-size: 1.25rem; }
  .plan-card.is-featured { --ink: var(--surface); --ink-soft: var(--surface-soft); color: var(--surface); background: var(--brand-primary); border-color: var(--brand-primary); }
  .plan-card.is-featured .plan-index, .plan-card.is-featured li::before { color: var(--surface); }
  .plan-card.is-featured .plan-badge { top: 1rem; right: 1rem; }
  .plan-index { margin-bottom: .9rem; }
  .plan-heading h3 { font-size: 1.45rem; }
  .plan-heading p { font-size: .8rem; }
  .plan-price { font-size: 2rem; }
  .plan-card .plan-shared { display: none; }
  .plan-card .plan-limits { margin: .85rem 0 1rem; padding-top: .85rem; }
  .plan-card .btn { min-height: 48px; }
  .plan-navigation:not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: .6rem 0 1.3rem; }
  .plan-counter { margin: 0; color: var(--ink); font-size: .85rem; font-weight: 700; }
  .plan-arrows { display: flex; gap: .65rem; }
  .plan-arrows button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 2px solid var(--brand-dark); border-radius: 50%; background: var(--surface); color: var(--brand-dark); font: inherit; font-size: 1.5rem; cursor: pointer; }
  .plan-arrows button:disabled { opacity: .35; cursor: default; }
  .plan-arrows button:focus-visible, .pricing-grid:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 3px; }
  .mobile-plan-includes { display: block; margin: 1rem 0; padding: 1.25rem; border: 1px solid var(--line); border-radius: 20px; background: var(--surface-soft); }
  .mobile-plan-includes h3 { margin: 0; font-size: 1.1rem; }
  .mobile-plan-includes p { margin: .6rem 0; color: var(--ink-soft); font-size: .85rem; line-height: 1.6; }
  .mobile-plan-includes a { display: inline-flex; min-height: 44px; align-items: center; gap: .5rem; color: var(--brand-primary); font-size: .85rem; font-weight: 700; }
}

/* Four plans side by side on a desktop. The cards are narrower than they
   were at three, so the padding, the price and the badge give a little. */
@media (min-width: 1101px) {
  .pricing-grid > .plan-card { min-height: 560px; padding: 1.35rem 1.25rem; }
  .pricing-grid .plan-heading h3 { font-size: 1.3rem; }
  .pricing-grid .plan-heading p { min-height: 3.6rem; font-size: .8rem; }
  .pricing-grid .plan-price { font-size: clamp(1.7rem, 2.3vw, 2.15rem); }
  .pricing-grid .plan-badge { top: 1.1rem; right: 1rem; }
  .pricing-grid .plan-index { margin-bottom: 1.75rem; }
}
/* Two by two on a tablet, where four would be too narrow to read. */
@media (min-width: 641px) and (max-width: 1100px) {
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Explain integration setup separately from plan capacities and controls. */
.integration-scope { margin-top: 2rem; padding-block: 1.5rem; border-block: 1px solid var(--line); }
.integration-scope h3 { margin: 0 0 1rem; font-size: 1.25rem; letter-spacing: -.025em; }
.integration-scope > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.integration-scope p { margin: 0; color: var(--ink-soft); font-size: .9375rem; line-height: 1.65; }
.integration-scope strong { color: var(--ink); }
.integration-scope .integration-note { margin-top: 1.25rem; font-size: .8125rem; }
@media (max-width: 800px) { .integration-scope > div { grid-template-columns: 1fr; gap: 1rem; } }

/* The full comparison works with native scrolling and no JavaScript. */
.plan-core-note { margin: 0 0 1.25rem; color: var(--ink-soft); font-size: .8125rem; line-height: 1.6; }
.plan-core-note a { color: inherit; text-underline-offset: .2em; }
.pricing-charge-note { max-width: 60rem; margin: 1rem 0; color: var(--ink-soft); font-size: .8125rem; line-height: 1.65; }
.plan-comparison, .pricing-addons { margin-block: 3rem; }
.comparison-heading { max-width: 46rem; margin-bottom: 1.25rem; }
.comparison-heading h2 { margin: 0 0 .75rem; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.035em; }
.comparison-heading p:not(.eyebrow) { color: var(--ink-soft); line-height: 1.65; }
.comparison-scroll-hint { font-size: .8125rem; }
.comparison-scroll { overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.comparison-scroll:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 4px; }
.comparison-table { width: 100%; min-width: 49rem; border-collapse: separate; border-spacing: 0; font-size: .875rem; line-height: 1.5; }
.comparison-table caption { padding: 1rem; color: var(--ink-soft); text-align: left; font-size: .8125rem; }
.comparison-table th, .comparison-table td { padding: 1rem; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.comparison-table thead th { background: var(--surface-soft); font-weight: 800; min-width: 7rem; }
.comparison-table th[scope="row"], .comparison-table thead th:first-child { width: 34%; min-width: 14rem; }
.comparison-table th[scope="row"] { font-weight: 750; }
.comparison-table small { display: block; margin-top: .4rem; color: var(--ink-soft); font-size: .75rem; font-weight: 500; line-height: 1.6; }
.comparison-group th { background: var(--surface-soft); color: var(--ink); font-size: .8125rem; font-weight: 800; }
.comparison-value { display: inline-block; font-weight: 700; }
.comparison-value.is-excluded { color: var(--ink-soft); font-weight: 500; }
.comparison-value.is-addon, .comparison-value.is-setup { color: var(--ink); }
.comparison-conditions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.25rem; }
.comparison-conditions p, .addon-billing-note { margin: 0; color: var(--ink-soft); font-size: .8125rem; line-height: 1.75; }
.comparison-conditions strong { color: var(--ink); }
.addon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.pricing-addon { min-width: 0; padding: 1.25rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow-wrap: anywhere; }
.pricing-addon h3 { margin: 0 0 .75rem; font-size: 1rem; line-height: 1.5; }
.pricing-addon p { color: var(--ink-soft); font-size: .8125rem; line-height: 1.65; }
.pricing-addon .addon-price { color: var(--ink); font-size: 1.125rem; font-weight: 800; }
.addon-price span { font-size: .75rem; font-weight: 500; }
.pricing-addon .addon-grants { color: var(--ink); font-weight: 700; }
.pricing-addon .addon-availability { padding-top: .75rem; border-top: 1px solid var(--line); }
.addon-billing-note { margin-top: 1.25rem; }
.pricing-empty { padding: 1.5rem; border: 1px solid var(--line); border-radius: 16px; }
@media (max-width: 900px) { .addon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .plan-comparison, .pricing-addons { margin-block: 2rem; }
  .comparison-table { min-width: 42rem; table-layout: fixed; }
  .comparison-table th, .comparison-table td { padding: .85rem; }
  .comparison-table th[scope="row"], .comparison-table thead th:first-child { position: sticky; left: 0; z-index: 1; width: 11rem; min-width: 11rem; max-width: 11rem; background: var(--surface); }
  .comparison-conditions, .addon-grid { grid-template-columns: 1fr; gap: 1rem; }
}