.subscription-plans .page-intro { text-align: center; }
.subscription-plans .lede { max-width: 42rem; margin-inline: auto; }
main.subscription-plans > .page-intro:first-child > * { margin-inline: auto; }
.plan-eyebrow, .plan-kicker { font-size: var(--nf-text-sm); font-weight: var(--nf-weight-semibold); }
.plan-eyebrow { letter-spacing: .08em; }
.plan-selector { padding-block: var(--nf-space-4); }
.billing-toggle { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--nf-space-2); border: 0; margin: 0 auto; padding: 0; }
.billing-toggle legend { text-align: center; margin-bottom: var(--nf-space-2); }
.billing-toggle label { display: flex; align-items: center; gap: var(--nf-space-2); min-height: var(--nf-control-min); padding: var(--nf-space-2) var(--nf-space-3); border: 1px solid var(--nf-control-border); border-radius: var(--nf-radius-ctl); cursor: pointer; }
.billing-toggle label:has(input:checked) { background: var(--nf-surface); border-color: var(--nf-fg); }
.billing-toggle input { accent-color: var(--nf-accent); }
.billing-toggle input:focus-visible { outline: var(--nf-focus-ring-width) solid var(--nf-fg); outline-offset: 3px; }
.plans-status { min-height: 1.5em; text-align: center; margin-block: var(--nf-space-3); }
#plans-status { width: 100%; max-width: none; }
#plans-retry { display: block; margin: var(--nf-space-3) auto; cursor: pointer; }
#plans-retry[hidden] { display: none; }
.plan-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--nf-space-4); align-items: stretch; }
.plan-card { display: flex; flex-direction: column; min-width: 0; background: var(--nf-surface); border: 1px solid var(--nf-control-border); border-radius: var(--nf-radius-card); padding: var(--nf-space-4); }
.plan-card-featured { border: 2px solid var(--nf-accent); }
.plan-card h2 { font-size: var(--nf-display-3); margin: var(--nf-space-2) 0; }
.plan-card > p:not(.plan-price) { min-height: 3em; margin-block: var(--nf-space-2); }
.plan-card .plan-kicker { min-height: 0; }
.plan-price { font-size: var(--nf-display-2); font-weight: var(--nf-weight-bold); font-variant-numeric: tabular-nums; margin: var(--nf-space-4) 0 0; line-height: var(--nf-leading-tight); }
.plan-cadence { font-size: var(--nf-text-md); }
.plan-action { text-align: center; justify-content: center; margin: var(--nf-space-2) 0 var(--nf-space-3); }
.plan-action[aria-disabled="true"] { opacity: .65; cursor: default; pointer-events: none; }
.plan-benefits { padding-left: var(--nf-space-4); margin-top: var(--nf-space-3); }
.plan-benefits li { padding-block: var(--nf-space-2); }
.plan-footnote { text-align: center; max-width: 50rem; margin: var(--nf-space-4) auto; }
.plan-promises { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--nf-space-5); padding-block: var(--nf-space-5); border-block: 1px solid var(--nf-border); }
.plan-promises h2 { font-size: var(--nf-display-4); }
.subscription-plans summary { min-height: var(--nf-control-min); cursor: pointer; padding-block: var(--nf-space-3); font-weight: var(--nf-weight-semibold); }
.subscription-plans details { border-bottom: 1px solid var(--nf-border); }
@media (max-width: 800px) {
  .plan-grid, .plan-promises { grid-template-columns: minmax(0,1fr); }
  .plan-card > p:not(.plan-price) { min-height: 0; }
  .plan-card { padding: var(--nf-space-4); }
}

/* #7746: the generic mobile demo bar is useful on marketing pages, but it is
   the wrong primary action on the pricing decision surface. It also sits over
   plan-card actions while a visitor scrolls between tiers. Keep the visible,
   in-flow plan actions as the only conversion controls on this page. */
@media (max-width: 720px) {
  .page-pricing .mobile-sticky-cta { display: none; }
  body.page-pricing:has(.mobile-sticky-cta) { padding-bottom: 0; }
  html:has(body.page-pricing) { scroll-padding-bottom: var(--nf-space-2); }
}