.credits-hero {
  padding-top: var(--space-6, 3rem);
  padding-bottom: var(--space-5, 2rem);
}

.credits-hero__inner {
  max-width: 720px;
}

.credits-hero__lead {
  max-width: 60ch;
}

.credits-balance-card {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: var(--space-4, 1.5rem);
  padding: var(--space-3, 1rem) var(--space-4, 1.5rem);
  border-radius: var(--radius-lg, 16px);
  border: 1px solid var(--accent-gold, #b8860b);
  background: rgba(184, 134, 11, 0.08);
}

.credits-balance-card span {
  font-size: var(--fs-caption, 0.8125rem);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.credits-balance-card strong {
  font-size: var(--fs-h2, 1.75rem);
  color: var(--accent-gold, #b8860b);
}

.credit-pack-grid {
  display: grid;
  /* Equal-width tracks. auto-fit + minmax lets a wider card claim more space
     than its neighbours, so the columns came out uneven. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: var(--space-3, 1rem);
  /* Room for the "Best value" badge, which is pulled above the card edge. */
  margin: calc(var(--space-4, 1.5rem) + 0.75rem) 0 var(--space-4, 1.5rem);
}

.credit-pack-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  padding: var(--space-4, 1.5rem) var(--space-3, 1rem);
  /* Fill the grid row so every card is the same height regardless of whether
     its credits line wraps. */
  height: 100%;
}

.credit-pack-card.is-best-value {
  border-color: var(--accent-gold, #b8860b);
  box-shadow: var(--shadow-md, 0 12px 32px rgba(60, 40, 30, 0.1));
}

.credit-pack-card__badge {
  position: absolute;
  top: -0.75rem;
}

.credit-pack-card__price {
  font-size: var(--fs-h2, 1.75rem);
  font-weight: 800;
  margin: 0;
  color: var(--text-primary);
}

/* The credits paid for. Its own line, with the bonus stated separately below,
   so the base rate stays legible as "a credit is a rupee".

   The old two-line min-height is gone: it existed to match a single card whose
   text wrapped, and now that the bonus has its own lines it only added a blank
   line to the one pack without a bonus. Buttons stay aligned regardless — the
   grid stretches the cards and .credit-pack-card__buy pins itself to the
   bottom with margin-top:auto. */
.credit-pack-card__credits {
  margin: 0;
  color: var(--text-secondary);
}

.credit-pack-card__bonus {
  margin: 0;
  font-weight: 800;
  color: var(--accent-success, #2f7a4d);
}

.credit-pack-card__total {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* margin-top:auto pins every Buy Now to the bottom of its card, so the row of
   buttons is aligned even when the text above differs in height. */
.credit-pack-card__buy {
  width: 100%;
  margin-top: auto;
}

.credit-buy-status {
  min-height: 1.5em;
  color: var(--text-secondary);
}

.credits-layout__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4, 1.5rem);
}

.credits-price-card h2 {
  margin-bottom: var(--space-2, 0.75rem);
}

.credit-price-list {
  list-style: none;
  margin: 0 0 var(--space-3, 1rem);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.credit-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--border-color, rgba(120, 90, 70, 0.18));
  font-size: var(--fs-body, 0.9375rem);
}

.credit-price-row:last-child {
  border-bottom: none;
}

.credits-note {
  font-size: var(--fs-caption, 0.8125rem);
  color: var(--text-secondary);
  margin: 0;
}