.payment-main { padding-top: 56px; padding-bottom: 72px; }
.payment-heading { max-width: 800px; margin-bottom: 36px; }
.payment-eyebrow { margin: 0 0 12px; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.payment-heading h1 { margin: 0 0 20px; font-family: "Fraunces", serif; font-size: clamp(2.3rem, 5vw, 3.8rem); line-height: 1.1; letter-spacing: -.04em; }
.payment-intro { margin: 0; max-width: 680px; font-size: 1.15rem; }
.payment-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.cost-card, .credit-pack { min-width: 0; padding: 28px; border: 1px solid var(--home-line); border-radius: 26px; background: var(--home-paper-light); }
.cost-card h2, .credit-pack h2 { margin: 22px 0 12px; font-size: 1.25rem; font-weight: 700; line-height: 1.35; }
.cost-card p { margin: 0; }
.cost-card--free { background: var(--home-mint); }
.payment-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 13px; background: var(--home-sand-light); color: var(--home-ink); font-size: 1.25rem; }
.cost-card--free .payment-icon { background: var(--home-paper-light); }
.credit-pack { display: flex; flex-direction: column; }
.credit-pack__price { margin: 0 0 16px; font-family: "Fraunces", serif; font-size: 2.8rem; line-height: 1.2; overflow-wrap: anywhere; }
.credit-pack__price span { font-family: "DM Sans", sans-serif; font-size: 1rem; }
.credit-pack__detail { flex-grow: 1; margin-bottom: 26px; }
.payment-page .payment-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 12px 24px; border: 1px solid var(--home-ink); border-radius: 999px; background: var(--home-ink); color: var(--home-paper-light); font: inherit; font-weight: 700; text-decoration: none; text-align: center; }
.payment-page .payment-button:hover { background: var(--home-ink-deep); border-color: var(--home-ink-deep); }
.credit-pack .payment-button { width: 100%; }
.credits-account { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; padding: 20px 26px; border: 1px solid var(--home-line); border-radius: 20px; background: var(--home-sand-light); }
.credits-account p { margin: 0; }
.credits-account strong { margin-left: 8px; }
.credits-account a, .payment-next a:not(.payment-button) { font-weight: 700; text-underline-offset: 4px; }
.payment-next { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--home-line); }
.payment-next p { max-width: 690px; margin: 0; }
.payment-next > a { flex-shrink: 0; }
.credits-disclaimer { font-size: .9rem; }
.credits-disclaimer a { text-underline-offset: 3px; }
.credits-empty { grid-column: 1 / -1; padding: 28px; border: 1px dashed var(--home-line); border-radius: 20px; }
.payment-page :focus-visible { outline: 3px solid var(--home-ink); outline-offset: 4px; }
.payment-page #feedback-widget { display: none; }
@media (max-width: 991.98px) {
  .payment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payment-next { align-items: flex-start; flex-direction: column; gap: 20px; }
}
@media (max-width: 575.98px) {
  .payment-main { padding-top: 32px; padding-bottom: 44px; }
  .payment-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cost-card, .credit-pack { padding: 24px; }
  .credits-account { align-items: flex-start; flex-direction: column; gap: 12px; padding: 20px; }
}