/* Payments — new (upgrade page). Plan cards reuse the landing pricing classes
   (surface-card, grid-3-32, bordered-gradient-brand, pill, card-anchor,
   home-feature-check). Only the upgrade-specific bits live here. */

/* Static CTA shown when a plan is already owned / is the current plan. Sized to
   line up with the brand md button (48px) so the cards stay aligned. */
.payments-cta-owned {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 var(--spacing-32);
  border-radius: var(--corner-radius-xs);
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-500);
  font-size: var(--font-size-16);
  color: var(--text-tertiary);
  border: var(--stroke-weight-1) solid var(--border-default);
}

.payments-cancel-note {
  font-size: var(--font-size-14);
  color: var(--text-tertiary);
}

/* Promo entry — a separate block below the fine print. */
.payments-promo {
  max-width: 28rem;
  margin-inline: auto;
  margin-top: var(--spacing-24);
  text-align: center;
}

.payments-promo-form {
  display: flex;
  gap: var(--spacing-8);

  & .form-input { flex: 1 1 auto; }
}

/* Sits between the plan cards and the promo block. */
.payments-fine-print {
  text-align: center;
  margin-top: var(--spacing-48);
}