/* commerce.css — the money path (pricing, products, login, account,
   delete-account, billing) on the Pop house system. Tokens only: semantic
   vars (--bg --surface --text --muted --line --drop --accent …) + the pop
   palette (--paper --ink --yellow --mint --red …). Owned by the commerce
   revamp slice. */

/* ------------------------------------------------------------ utilities ---- */
/* app.js toggles the `hidden` CLASS on the login steps and the frozen modals,
   and the `hidden` ATTRIBUTE on the delete-account steps — my display rules on
   those elements must never beat either. */
.hidden, [hidden] { display: none !important; }

.commerce-page { padding-block: clamp(20px, 4vw, 44px) clamp(40px, 6vw, 72px); }
.commerce-page > * + * { margin-top: clamp(26px, 4vw, 44px); }

/* Quiet inline link-button (login's "I already have a code"). */
.link-button {
  background: none; border: 0; padding: 2px; margin-inline: auto;
  color: var(--text-soft); font: 600 14px/1.4 var(--font-body);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  border-radius: 6px; width: fit-content;
}
.link-button:hover { color: var(--text); }

/* Label-pill variants on the house pill. */
.pop-label--kicker { margin-bottom: 2px; }
.pop-label--danger { color: var(--red); }

/* ------------------------------------------------------------ page hero ---- */
.commerce-hero { text-align: center; max-width: 720px; margin-inline: auto; display: grid; justify-items: center; gap: 16px; padding-top: clamp(6px, 2vw, 22px); }
.commerce-hero h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(38px, 6vw, 60px); line-height: 0.96; letter-spacing: -0.045em;
  text-wrap: balance;
}
.commerce-hero__sub { max-width: 560px; color: var(--text-soft); font-size: 17px; line-height: 1.55; }
.commerce-hero__sub code { font-size: 0.85em; background: var(--paper-sunk); border: 1.5px solid var(--ink); border-radius: 6px; padding: 1px 5px; }

/* -------------------------------------------------------- billing toggle ---- */
.billing-toggle-row { display: flex; justify-content: center; }
.billing-toggle {
  display: inline-flex; gap: 4px; padding: 4px;
  border: 3px solid var(--ink); border-radius: var(--radius-pill);
  background: var(--paper); box-shadow: var(--shadow-sm);
}
.billing-toggle a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px 7px; border-radius: var(--radius-pill);
  color: var(--text-soft); background: transparent;
  font: 700 14.5px/1.2 var(--font-body); text-decoration: none;
  transition: none;
}
.billing-toggle a.is-active { background: var(--side); color: var(--side-text); }
.billing-toggle .billing-save {
  padding: 2px 8px 1px; border-radius: var(--radius-pill);
  background: var(--mint); color: #111; border: 2px solid var(--ink);
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  white-space: nowrap;
}

/* Lazy live-Stripe-schedule slot (markup server-rendered, state via app.js). */
.lazy-billing-slot {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: fit-content; margin-inline: auto; padding: 8px 16px;
  border: 2px dashed var(--ink); border-radius: var(--radius-pill);
  background: var(--paper-sunk); color: var(--text-soft);
  font: 600 13.5px/1.4 var(--font-body);
}
.lazy-billing-slot.is-done { border-style: solid; }
.lazy-billing-slot.is-error { border-color: var(--red); color: var(--text); }
.spinner {
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 3px solid currentColor; border-right-color: transparent;
  animation: pop-spin 0.7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; opacity: 0.5; } }

/* ---------------------------------------------------------- pricing grid ---- */
.pricing-grid {
  display: grid; gap: 28px 22px;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  align-items: stretch; max-width: 1120px; margin-inline: auto;
  padding-top: 10px;
}
.pricing-grid .pop-price { min-width: 0; }

/* Interval swap: the page root carries data-billing; .billing-view blocks
   show only in their own interval. (app.js swaps the attribute in place.) */
.pricing-page[data-billing="monthly"] .billing-view[data-billing="yearly"],
.pricing-page[data-billing="yearly"] .billing-view[data-billing="monthly"] { display: none !important; }

/* Reserved price box: both interval states fit inside, so the monthly/yearly
   toggle never shifts the cards. Numbers are tabular via .pop-price__amount. */
.plan-price-box { min-height: 96px; display: grid; align-content: start; }
.plan-price-box .billing-view { display: grid; gap: 7px; }
.plan-price-note { color: var(--text-faint); font-size: 12.5px; line-height: 1.45; font-weight: 600; font-variant-numeric: tabular-nums; }
.plan-was-price { color: var(--text-faint); text-decoration-thickness: 2px; }

/* Card flags: house flag is yellow; current plan = mint, queued change = blue. */
.pop-price__flag { text-transform: none; }
.plan-flag--current { background: var(--mint); color: #111; }
.plan-flag--next { background: var(--blue); color: #fff; }
.price-plan.is-current { box-shadow: var(--shadow-md), 0 0 0 0 transparent; }
.plan-meta-line { font-variant-numeric: tabular-nums; }

/* Actions: one full-width CTA per visible interval. */
.plan-actions { display: grid; gap: 10px; margin-top: 2px; }
.plan-actions .pop-btn { width: 100%; justify-content: center; }

/* Scheduled-change card (also injected by app.js after the live check). */
.schedule-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border: 2px dashed var(--ink); border-radius: 14px;
  background: var(--paper-sunk); font-size: 13px;
}
.pop-price--featured .schedule-card { background: rgba(255, 250, 240, 0.65); }
.schedule-card > div { display: grid; gap: 1px; min-width: 0; }
.schedule-card span { color: var(--text-faint); font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.schedule-card strong { font-family: var(--font-display); font-size: 14.5px; letter-spacing: -0.02em; }
.schedule-card time { color: var(--text-soft); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.schedule-card-next { border-style: solid; }
.plan-schedule-slot:empty { display: none; }
.plan-schedule-slot { display: grid; gap: 10px; }

/* ------------------------------------------------------------ trust strip ---- */
.trust-strip {
  list-style: none; margin-inline: auto; padding: 0; max-width: 1060px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
  color: var(--text-soft); font: 600 13.5px/1.5 var(--font-body);
}
.trust-strip li { display: inline-flex; align-items: center; gap: 8px; }
.trust-strip .pop-icon { width: 17px; height: 17px; color: var(--text); }

/* -------------------------------------------------------------- duo cards ---- */
.commerce-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 24px; max-width: 1060px; margin-inline: auto; }
.commerce-check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14.5px; font-weight: 600; }
.commerce-check-list li { display: flex; align-items: flex-start; gap: 10px; }
.commerce-check-list .pop-icon {
  width: 19px; height: 19px; flex: none; margin-top: 2px; padding: 2px;
  border: 2px solid var(--ink); border-radius: 50%;
  background: var(--mint); color: #111; stroke-width: 3.4;
}
.commerce-card-cta { margin-top: 14px; }

/* ---------------------------------------------------------- products page ---- */
.checkout-cancel-note {
  display: flex; align-items: flex-start; gap: 12px;
  max-width: 720px; margin-inline: auto; padding: 14px 18px;
  border: 2.5px solid var(--ink); border-radius: 18px;
  background: var(--paper); box-shadow: var(--shadow-xs);
  color: var(--text-soft); font-size: 14.5px; line-height: 1.55;
}
.checkout-cancel-note .pop-icon { margin-top: 3px; color: var(--blue); }
.checkout-cancel-note a { color: var(--text); font-weight: 700; }

.product-sales-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 26px; align-items: start; max-width: 1060px; margin-inline: auto; }
.product-card-grid { display: grid; gap: 26px; }
.product-plan { gap: 12px; }
.product-amount { flex-wrap: wrap; row-gap: 4px; }
.product-compare-at { font-size: 22px; color: var(--text-faint); text-decoration-thickness: 3px; margin-right: 2px; }
.product-launch-note { color: var(--text-soft); }
.plan-meta { display: flex; flex-wrap: wrap; gap: 8px; }
/* Badges sit on vivid card fills: keep them flash-white with ink text so they
   read in both themes (dark paper on pink/yellow would vanish). */
.pop-price .pop-badge { background: var(--flash); color: #111; }
.product-actions-primary { margin-top: 4px; }
.home-buy-reassure { text-align: left; font-size: 12.5px; }
.home-buy-fineprint { color: var(--text-faint); font-size: 11.5px; line-height: 1.55; }
.home-buy-fineprint a { color: inherit; }
.product-plan .pop-price__note,
.product-plan .home-buy-fineprint { color: #111; }

/* The storefront single-product card: purchase block + what's-in-the-box. */
.is-storefront-product { grid-template-columns: minmax(0, 1fr); }
.product-plan-purchase, .product-plan-detail { display: grid; gap: 12px; align-content: start; }
.product-plan-detail { border-top: 2px dashed var(--ink); padding-top: 18px; margin-top: 6px; }
/* One full-width card: buy column (price, CTA, what happens next, licence
   line, fine print) beside what's in the box, its list in two columns — no
   side stack, so neither column trails off into empty card. */
.product-sales-grid.is-single-product { grid-template-columns: minmax(0, 1fr); max-width: 1180px; }
.product-steps { margin-top: 6px; padding: 16px 0 2px; border-top: 2px dashed var(--ink); }
.product-steps li strong { color: #111; }
.product-lifetime { font-size: 14px; line-height: 1.55; color: #111; }
.product-lifetime strong { font-family: var(--font-display); }
@media (min-width: 860px) {
  .is-storefront-product { display: grid; grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.6fr); gap: 34px; padding: 34px 36px 36px; }
  .is-storefront-product { align-items: stretch; }
  .product-plan-purchase { position: sticky; top: 96px; align-self: start; }
  .is-storefront-product .product-plan-detail { display: flex; flex-direction: column; gap: 12px; }
  .product-plan-detail { border-top: 0; border-left: 2px dashed var(--ink); padding: 2px 0 2px 34px; margin-top: 0; }
}
@media (min-width: 1100px) {
  .product-feature-list { grid-template-columns: 1fr 1fr; column-gap: 28px; row-gap: 14px; }
}
/* What's-in-the-box numbers, pinned to the foot of the detail column. */
.product-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: auto 0 0; padding: 18px 0 0; list-style: none; border-top: 2px dashed var(--ink); }
.product-stats li { display: grid; gap: 2px; padding: 10px 12px; border: 2.5px solid var(--ink); border-radius: 14px; background: var(--flash); color: #111; }
.product-stats b { font: 800 26px/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.product-stats span { font-size: 12px; font-weight: 700; line-height: 1.3; }
@media (max-width: 560px) { .product-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Multi-line features: tick sits on the first line, not the middle. */
.product-feature-list li { align-items: flex-start; line-height: 1.45; }
.product-feature-list .pop-icon { margin-top: 1px; }

.product-support-stack { display: grid; gap: 22px; }
.flow-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.flow-list li { display: flex; align-items: center; gap: 12px; }
.flow-list li span {
  display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none;
  border: 2.5px solid var(--ink); border-radius: 50%;
  background: var(--flash); color: #111;
  font: 800 14px/1 var(--font-display); box-shadow: var(--shadow-xs);
}
.flow-list li strong { font-size: 14.5px; }

.file-vault-list { display: grid; gap: 10px; margin-top: 14px; }
.file-vault-list:empty { margin-top: 0; }
.file-vault-empty { color: var(--text-soft); font-size: 13.5px; line-height: 1.55; margin-top: 10px; }
.file-vault-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 2px solid var(--ink); border-radius: 14px;
  background: var(--paper-sunk);
}
.file-vault-meta { display: grid; gap: 1px; min-width: 0; }
.file-vault-meta strong { font-size: 14px; }
.file-vault-meta span { color: var(--text-faint); font-size: 12.5px; overflow-wrap: anywhere; }

.product-demo-strip { max-width: 1180px; margin-inline: auto; text-align: center; }
.product-demo-strip .pop-label { margin-inline: auto; }
.demo-pills .pop-tag--strong { background: var(--yellow); color: #141414; font-weight: 800; }
.demo-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.demo-pills .pop-tag { text-decoration: none; }

.fine-print-section { max-width: 1180px; margin-inline: auto; display: grid; gap: 22px; }
.fine-print-head { display: grid; gap: 10px; justify-items: start; }
.fine-print-head h2 { font-size: clamp(26px, 4vw, 34px); letter-spacing: -0.04em; }
/* One panel of balanced text columns, not a card grid: five or six clauses
   of uneven length never leave a hole. Each clause is a plain block. */
.fine-print-grid {
  columns: 2 380px; column-gap: 44px; column-rule: 2px dashed var(--line);
  padding: clamp(22px, 3vw, 34px); border: 3px solid var(--ink); border-radius: var(--radius-card);
  background: var(--paper); box-shadow: var(--shadow-md);
}
.fine-print-grid > .pop-card {
  break-inside: avoid; margin: 0 0 22px; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
}
.fine-print-grid > .pop-card:last-child { margin-bottom: 0; }
.fine-print-grid h3 { font-size: 16px; margin-bottom: 8px; }
.fine-print-grid p { color: var(--text-soft); font-size: 13.5px; line-height: 1.6; }
.fine-print-grid a { color: var(--text); font-weight: 700; }

/* --------------------------------------------------------------- /login ---- */
.auth-page { display: grid; justify-items: center; padding: clamp(28px, 6vw, 72px) 16px clamp(48px, 8vw, 96px); }
.auth-card {
  width: min(430px, 100%); display: grid; gap: 18px;
  padding: clamp(24px, 5vw, 36px) clamp(20px, 4vw, 32px);
  border: 3px solid var(--ink); border-radius: var(--radius-lg);
  background: var(--paper); box-shadow: var(--shadow-lift);
}
.auth-head { display: grid; gap: 12px; }
.auth-head h1 { font-size: clamp(30px, 5vw, 38px); line-height: 1.02; letter-spacing: -0.045em; }
.auth-sub { color: var(--text-soft); font-size: 15px; line-height: 1.55; }
.auth-providers { display: grid; gap: 10px; }
.oauth-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 1px 20px 0;
  border: 3px solid var(--ink); border-radius: var(--radius-pill);
  background: var(--paper); color: var(--text);
  font: 700 14.5px/1.2 var(--font-body); text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-snap) var(--ease-pop);
}
.oauth-button:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-md); }
.oauth-button:active { transform: translate(3px, 3px); box-shadow: var(--shadow-press); }
.oauth-button svg { width: 18px; height: 18px; flex: none; }
.oauth-apple { background: var(--side); color: var(--side-text); }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--text-faint); font: 700 11.5px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-top: 2px dashed var(--ink); opacity: 0.35; }
.auth-form { display: grid; gap: 12px; }
.auth-form .pop-btn { width: 100%; justify-content: center; }
.auth-code-step { display: grid; gap: 12px; padding-top: 14px; border-top: 2px dashed var(--ink); margin-top: 4px; }
.auth-code-input {
  font-family: var(--font-display); font-weight: 800; font-size: 26px;
  letter-spacing: 0.35em; text-align: center; font-variant-numeric: tabular-nums;
}
.auth-remember { margin-block: 2px; }
.auth-foot { color: var(--text-faint); font-size: 13px; line-height: 1.5; text-align: center; }
.auth-foot a { color: var(--text-soft); font-weight: 700; }
.auth-trust {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--text-faint); font-size: 12.5px; font-weight: 600;
}
.auth-trust .pop-icon { width: 15px; height: 15px; }
.auth-demo-enter { justify-content: center; }

/* ----------------------------------------------- member page head (shell) ---- */
.account-page { max-width: 1020px; margin-inline: auto; }
.member-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.member-pagehead > div { display: grid; gap: 10px; }
.member-pagehead h1 { font-size: clamp(30px, 4.5vw, 40px); line-height: 1; letter-spacing: -0.045em; }
.member-pagehead__sub { color: var(--text-soft); font-size: 15px; }
.member-pagehead__sub strong { overflow-wrap: anywhere; }

/* -------------------------------------------------------------- /account ---- */
.account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; align-items: stretch; }
.acct-card { display: grid; gap: 12px; align-content: start; }
.acct-card__status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acct-card__status h2 { font-size: 21px; letter-spacing: -0.035em; }
.acct-card h2 { font-size: 21px; letter-spacing: -0.035em; }
.acct-card__body { color: var(--text-soft); font-size: 14.5px; line-height: 1.55; }
.acct-card__body strong { overflow-wrap: anywhere; }
.account-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.acct-linked-badge { align-self: center; }

.acct-danger-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px; border: 3px solid var(--red); border-radius: var(--radius-card);
  background: var(--paper); box-shadow: 6px 6px 0 var(--red);
}
.acct-danger-text { display: grid; gap: 2px; min-width: 0; }
.acct-danger-text strong { font-family: var(--font-display); font-size: 17px; letter-spacing: -0.03em; }
.acct-danger-text span { color: var(--text-soft); font-size: 13.5px; }

/* ------------------------------------------------------- /delete-account ---- */
.delete-card { max-width: 640px; }
.delete-card h2 { font-size: 23px; letter-spacing: -0.035em; }
.delete-losses { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.delete-losses li {
  position: relative; padding: 10px 14px 10px 38px;
  border: 2px solid var(--ink); border-radius: 14px; background: var(--paper-sunk);
  font-size: 13.5px; line-height: 1.55; color: var(--text-soft);
}
.delete-losses li strong { color: var(--text); }
.delete-losses li::before {
  content: "×"; position: absolute; left: 12px; top: 10px;
  display: inline-grid; place-items: center; width: 17px; height: 17px;
  border: 2px solid var(--ink); border-radius: 50%;
  background: var(--red); color: #fff; font: 800 12px/1 var(--font-body);
}
.delete-retention { color: var(--text-faint); font-size: 12.5px; line-height: 1.6; border-top: 2px dashed var(--ink); padding-top: 12px; }
.delete-card--final { border-color: var(--red); box-shadow: 6px 6px 0 var(--red); }

/* ------------------------------------------------- /billing (skeleton +
   markup INJECTED by billing_content_html() — legacy classes, styled here) ---- */
.billing-page #billing-content { display: grid; gap: 24px; }
.billing-cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 22px; align-items: start; }
@media (max-width: 860px) { .billing-cols { grid-template-columns: 1fr; } }

#billing-content .panel {
  display: grid; gap: 14px; align-content: start; padding: var(--space-6);
  border: 3px solid var(--ink); border-radius: var(--radius-card);
  background: var(--paper); color: var(--text); box-shadow: var(--shadow-md);
}
#billing-content .eyebrow {
  display: inline-flex; align-items: center; width: fit-content;
  padding: 5px 11px 4px; border-radius: var(--radius-pill);
  background: var(--side); color: var(--yellow);
  font: 700 11.5px/1.25 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
#billing-content h2 { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.035em; margin: 0; }
#billing-content .muted { color: var(--text-soft); }
#billing-content .hint { color: var(--text-faint); font-size: 12.5px; line-height: 1.55; }
.billing-status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.billing-plan { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.04em; }
.billing-facts { display: grid; gap: 10px; margin: 0; }
.billing-facts > div { display: flex; justify-content: space-between; gap: 14px; border-bottom: 2px dashed var(--paper-sunk); padding-bottom: 8px; }
.billing-facts dt { color: var(--text-faint); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.billing-facts dd { margin: 0; font-weight: 600; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }

/* Legacy .status-pill → house badge look; fixed meanings: mint=paid/active,
   yellow=waiting/cancelling/open, red=failed/inactive. */
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 2px; border: 2px solid var(--ink); border-radius: var(--radius-pill);
  background: var(--paper); color: var(--text);
  font: 700 11.5px/1.4 var(--font-body); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
}
.status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-pill.status-ready { background: var(--mint); color: #111; }
.status-pill.status-pending { background: var(--yellow); color: #111; }
.status-pill.status-failed { background: var(--red); color: #fff; }

/* Legacy .button inside injected billing markup + the frozen modals. */
#billing-content .button, .modal-card .button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 1px 20px 0; width: fit-content;
  border: 3px solid var(--ink); border-radius: var(--radius-pill);
  background: var(--paper); color: var(--text);
  font: 700 14.5px/1.2 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-snap) var(--ease-pop);
}
#billing-content .button:hover, .modal-card .button:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-md); }
#billing-content .button:active, .modal-card .button:active { transform: translate(3px, 3px); box-shadow: var(--shadow-press); }
#billing-content .button:disabled, .modal-card .button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
#billing-content .button-primary, .modal-card .button-primary { background: var(--yellow); color: #111; }

/* Invoice table (injected). */
.table-wrap { overflow-x: auto; border: 3px solid var(--ink); border-radius: 18px; background: var(--paper); }
.billing-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.billing-table thead th {
  background: var(--side); color: var(--side-text);
  font: 700 11.5px/1.3 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
  text-align: left; padding: 10px 14px;
}
.billing-table tbody td { padding: 11px 14px; border-top: 2px solid var(--paper-sunk); font-variant-numeric: tabular-nums; }
.billing-table tbody tr:first-child td { border-top: 0; }
.billing-table .inv-link a { color: var(--text); font-weight: 700; white-space: nowrap; }

/* Skeleton shimmer (opacity only; off under reduced motion). */
.skeleton { display: inline-block; border-radius: 10px; background: var(--paper-sunk); border: 2px solid var(--ink); opacity: 0.6; }
@media (prefers-reduced-motion: no-preference) {
  .skeleton { animation: commerce-skeleton 1.1s ease-in-out infinite alternate; }
  @keyframes commerce-skeleton { from { opacity: 0.45; } to { opacity: 0.8; } }
}
.skeleton-pill { width: 72px; height: 24px; border-radius: var(--radius-pill); }
.skeleton-h { width: 60%; height: 30px; }
.skeleton-line { width: 110px; height: 16px; }
.skeleton-btn { width: 190px; height: 44px; border-radius: var(--radius-pill); margin-top: 4px; }
.skeleton-row { display: block; width: 100%; height: 40px; border-radius: 12px; }
.billing-skeleton-rows { display: grid; gap: 10px; }

/* The frozen-modal styles (.modal-backdrop/.modal-card/.consent-check) were
   lifted into app-layout.css — they render on every page via the shared
   footer chrome, not just commerce pages. */

/* ------------------------------------------------------------ responsive ---- */
@media (max-width: 960px) {
  .product-sales-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .billing-toggle a { padding: 8px 13px 7px; font-size: 13.5px; }
  .shell-member .commerce-page { padding-inline: 0; }
  .member-pagehead h1 { overflow-wrap: anywhere; }
}

/* Featured pricing uses a fixed pink surface in either theme. */
.pricing-grid .pop-price--featured { background: var(--pink); color: #111; }
.pop-price--featured :is(.pop-price__name,.pop-price__amount,.pop-price__amount small,.plan-price-note,.pop-price__blurb,.pop-price__list,.pop-price__note) { color: inherit; opacity: 1; }