/* Free replies and owned usage reuse the ivory/teal public site. The launch
   shows one introductory offer; the card grid is reserved for future paid plans.
   billing.html renders the content, with no browser script or build pipeline. */
.billing-page { padding: 48px 0 80px; }
.billing-heading { text-align: center; max-width: 780px; margin: 0 auto 38px; }
.billing-heading h1 { font: 500 clamp(2.4rem,5vw,4.5rem)/1.08 var(--font-serif, Georgia, serif); margin: 18px 0 22px; }
.billing-heading em { color: var(--teal-strong); }
.billing-page .landing-primary { display: inline-flex; gap: 12px; align-items: center; padding: 14px 20px; border: 0; border-radius: 4px; background: var(--teal-strong); color: var(--on-accent); text-decoration: none; font-weight: 600; font-size: .9rem; }
.billing-page .landing-primary:hover { background: var(--teal-hover); }
.billing-heading > p:last-child { line-height: 1.8; color: var(--muted); }
.billing-notice { padding: 14px 20px; border: 1px solid #d5bc94; background: #f1e7d7; border-radius: 8px; }
/* Usage stays separate from the offers so a returning learner can resume first. */
.billing-balance, .billing-free, .billing-topup { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px; border: 1px solid var(--line); border-radius: 12px; margin: 24px 0; }
.billing-balance { background: var(--teal-soft); }
.billing-balance strong { font: 3rem Georgia, serif; }
/* A tester has a dated entitlement instead of a misleading numeric balance. */
.billing-tester-title { font: 2rem Georgia, serif; margin: 10px 0; }
.billing-balance p, .billing-free p, .billing-topup p { margin: 8px 0; line-height: 1.65; }
.billing-free h2, .billing-topup h2 { font: 1.65rem Georgia, serif; margin: 0; }
.billing-free-number { font: 3rem Georgia, serif; color: var(--teal-strong); }
.billing-free > div { flex: 1; }
.billing-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin: 28px 0; }
.billing-card { display: flex; flex-direction: column; padding: 28px 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.billing-card h2 { font: 3rem Georgia, serif; margin: 8px 0 16px; }
.billing-card h2 span { font: .85rem Arial, sans-serif; letter-spacing: 0; margin-left: 6px; color: var(--muted); }
.billing-card > p { line-height: 1.65; }
.billing-quantity { min-height: 3em; }
.billing-quantity strong { color: var(--teal-strong); }
.billing-card form, .billing-card > a, .billing-card > button { margin-top: auto; }
.billing-card .landing-primary { width: 100%; justify-content: center; margin-top: 16px; padding: 14px 8px; }
/* Disabled buttons are visibly inactive in preview and remain keyboard-safe. */
.billing-page button:disabled { opacity: .55; cursor: not-allowed; }
.billing-link { border: 0; padding: 0; color: var(--teal-strong); background: transparent; text-decoration: underline; }
.billing-topup { background: var(--surface-soft); }
.billing-topup > div { max-width: 670px; }
/* The free launch has one quiet announcement instead of a grid of paid offers. */
.billing-coming { text-align: center; padding: 36px 24px; margin: 28px 0; background: var(--teal-soft); border: 1px solid var(--teal-line); border-radius: 12px; }
.billing-coming h2 { font: 2rem Georgia, serif; margin: 12px 0; }
.billing-coming > p:last-child { color: var(--muted); line-height: 1.7; margin-bottom: 0; }
.billing-explained { max-width: 800px; margin: 56px auto 0; }
.billing-explained h2 { font: 2rem Georgia, serif; }
.billing-explained details { padding: 18px 0; border-bottom: 1px solid var(--line); }
.billing-explained summary { cursor: pointer; font-weight: 600; }
.billing-explained p { line-height: 1.75; color: var(--muted); }
.billing-footnote { font-size: .85rem; }
/* Aggregate staff tables scroll inside their panel, never the whole page. */
.metrics-table { overflow-x: auto; }
.metrics-table table { border-collapse: collapse; width: 100%; }
.metrics-table th, .metrics-table td { padding: 12px; text-align: left; border-bottom: 1px solid var(--line); }
@media (max-width: 1000px) { .billing-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) {
  .billing-page { padding-top: 28px; }
  .billing-grid { grid-template-columns: 1fr; }
  .billing-balance, .billing-free, .billing-topup { align-items: flex-start; flex-direction: column; padding: 22px; }
  .billing-heading h1 { font-size: 2.5rem; }
}