/* Subscription plan cards: a grid of plan tiers, each bound to a native product and its native
   selling plan. Brand-neutral — every colour comes from the section's colour scheme and the shared
   tokens; the "feature" tier inverts to the scheme's ink surface. */
.plan-cards { padding-block: var(--plan-cards-pad, 56px); }
.plan-cards--pad-top { padding-bottom: 0; }
.plan-cards--pad-bottom { padding-top: 0; }
.plan-cards--pad-none { padding-block: 0; }
.plan-cards {
  display: block;
  background: rgba(var(--color-background));
  color: rgba(var(--color-text));
}
.plan-cards__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: rgba(var(--color-card-background));
  border: 2px solid var(--theme-line);
  border-radius: var(--radius-xl);
  padding: var(--plan-cards-card-pad, 30px);
  color: var(--theme-ink);
}
.plan-cards__card.is-feature {
  background: var(--theme-ink);
  border-color: var(--theme-ink);
  color: var(--theme-cream);
}
.plan-cards__tag { align-self: flex-start; }
.plan-cards__name { font: 700 24px/1.1 var(--font-body); }
.plan-cards__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
/* The plan price is the tier's headline: one fixed display size per breakpoint. */
.plan-cards__amount { font-size: var(--plan-cards-price-size, 38px); }
.plan-cards__per { font: 500 13px/1 var(--font-mono); opacity: 0.7; }
.plan-cards__perks { display: grid; gap: 9px; font-size: 15px; line-height: 1.4; margin-top: 8px; }
.plan-cards__perks li { display: flex; gap: 10px; }
.plan-cards__perks li span:first-child { color: var(--theme-green); font-weight: 700; }
.plan-cards__card.is-feature .plan-cards__perks li span:first-child { color: var(--theme-accent); }
/* The native product form wraps the CTA; `display: contents` keeps the button a flex child of the
   card so it still pins to the bottom and every card in a row shares one height. */
.plan-cards__form,
.plan-cards__product-form { display: contents; }
.plan-cards__card .theme-btn { margin-top: auto; }
.plan-cards__error { margin-top: 8px; }
.plan-cards__note { margin-top: var(--plan-cards-note-gap, 18px); }

@media (max-width: 760px) {
  .plan-cards__card { padding: var(--plan-cards-card-pad-narrow, 24px); }
}
@media (max-width: 560px) {
  .plan-cards { padding-block: var(--plan-cards-pad-narrow, 40px); }
  .plan-cards--pad-top { padding-bottom: 0; }
  .plan-cards--pad-bottom { padding-top: 0; }
  .plan-cards--pad-none { padding-block: 0; }
}
@media (max-width: 480px) {
  .plan-cards__amount { font-size: var(--plan-cards-price-size-narrow, 32px); }
}