/* Billing surfaces only. Shared tokens and photo screens remain unchanged. */
.customer-app :is(.premium-pricing, .purchase-confirmation, .mypage-contract) {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.85;
  overflow-wrap: anywhere;
}
.customer-app :is(.premium-pricing, .purchase-confirmation) :is(p, dd, li) { color: var(--ink); font-size: 15px; line-height: 1.85; }
.customer-app :is(.premium-pricing, .purchase-confirmation) :is(dt, .eyebrow) { color: var(--text-2); font-size: 14px; font-weight: 700; line-height: 1.8; }
.customer-app :is(.premium-pricing, .purchase-confirmation) :is(small, .small, .muted, .plan-audience, .plan-value, .plan-seat-limit, .plan-change-date, .plan-compare-note, .expiry-notice) {
  color: var(--text-2); font-size: 14px; line-height: 1.8;
}
.customer-app :is(.premium-pricing, .purchase-confirmation) :is(h2, h3, a) { color: var(--navy); }
.customer-app :is(.premium-pricing, .purchase-confirmation) :is(.primary, .secondary) { min-height: 48px; font-size: 16px; font-weight: 700; }
.customer-app :is(.premium-pricing, .purchase-confirmation) .secondary { color: var(--navy); background: var(--surface); border: 2px solid var(--navy); }
.customer-app :is(.premium-pricing, .purchase-confirmation) .primary,
.customer-app .premium-pricing .plan-card.recommended .plan-action :is(.primary, .secondary) {
  color: #FFFFFF; background: var(--teal-700); border: 2px solid var(--teal-700);
}
.customer-app :is(.premium-pricing, .purchase-confirmation) .primary:not(:disabled):is(:hover, :active),
.customer-app .premium-pricing .plan-card.recommended .plan-action :is(.primary, .secondary):not(:disabled):is(:hover, :active) {
  color: #FFFFFF; background: var(--navy); border-color: var(--navy);
}
.customer-app :is(.premium-pricing, .purchase-confirmation) .secondary:not(:disabled):is(:hover, :active) { color: var(--navy); background: var(--navy-50); }
.customer-app :is(.premium-pricing, .purchase-confirmation) button:disabled { color: var(--text-2); background: var(--navy-50); border-color: var(--navy); opacity: 1; }

.customer-app .premium-pricing .balance-stats { color: var(--text-2); font-size: 14px; }
.customer-app .premium-pricing .balance-stats strong { color: var(--ink); font-size: 15px; }
.customer-app .premium-pricing .ledger-list span { color: var(--ink); font-size: 15px; }
.customer-app .premium-pricing .ledger-list time { color: var(--text-2); font-size: 14px; }
.customer-app :is(.premium-pricing, .purchase-confirmation) :is(.text-link-button, .text-link, .back-link) { color: var(--navy); font-size: 15px; }
.customer-app .purchase-confirmation .form-error { color: var(--danger); font-size: 15px; }

/* A coloured heading identifies the recommendation independently of its button. */
.customer-app .premium-pricing .plan-heading { padding: 12px; border-radius: 10px; background: var(--navy-50); }
.customer-app .premium-pricing .plan-card.recommended .plan-heading { background: var(--teal-700); }
.customer-app .premium-pricing .plan-card.recommended .plan-heading h3 { color: #FFFFFF; }
.customer-app .premium-pricing :is(.plan-badge, .plan-status-badge, .plan-bonus) { font-size: 14px; }
.customer-app .premium-pricing .plan-badge { color: var(--teal-700); background: var(--surface); }
.customer-app .premium-pricing .plan-status-badge { color: #FFFFFF; background: var(--navy); }
.customer-app .premium-pricing .plan-status-badge.plan-upcoming { color: var(--navy); background: var(--navy-50); }
.customer-app .premium-pricing .plan-card.current { border-color: var(--navy); background: var(--teal-50); }
.customer-app .premium-pricing .plan-price strong { color: var(--navy); font-size: 32px; font-weight: 700; }
.customer-app .premium-pricing .plan-credit { color: var(--teal-700); }
.customer-app .premium-pricing .plan-credit strong { font-size: 28px; font-weight: 700; }
.customer-app .premium-pricing :is(.plan-renewal, .pricing-context, .pricing-explanation, .one-time-detail, .billing-tools p, .pricing-faq p) { color: var(--ink); font-size: 15px; }
.customer-app .premium-pricing .plan-action .plan-change-date { color: var(--text-2); font-size: 14px; }
.customer-app .premium-pricing .payment-warning { color: var(--danger); font-size: 15px; }
.customer-app .premium-pricing .current-contract { padding: 16px; border-radius: 12px; background: var(--navy-50); }
.customer-app .premium-pricing :is(.balance-main > span, .current-contract > span) { color: var(--text-2); font-size: 14px; font-weight: 700; }
.customer-app .premium-pricing .current-contract strong { color: var(--navy); font-size: 18px; font-weight: 700; }
.customer-app .premium-pricing :is(.one-time-price, .one-time-quantity) { color: var(--navy); }
.customer-app .premium-pricing .one-time-quantity strong { font-size: 28px; }
.customer-app .premium-pricing .one-time-quantity > span { font-size: 15px; }
.customer-app .premium-pricing .one-time-price { font-size: 18px; font-weight: 700; }
.customer-app .premium-pricing .one-time-price small { color: var(--text-2); font-size: 14px; }
.customer-app .premium-pricing :is(.plan-comparison, .pricing-faq) > summary { color: var(--navy); font-size: 16px; font-weight: 700; }
.customer-app .premium-pricing .plan-compare :is(th, td) { white-space: normal; overflow-wrap: anywhere; line-height: 1.8; }
.customer-app .premium-pricing .plan-compare thead th { color: var(--navy); background: var(--navy-50); font-size: 14px; }
.customer-app .premium-pricing .plan-compare tbody th { color: var(--text-2); background: var(--navy-50); font-size: 14px; font-weight: 700; }
.customer-app .premium-pricing .plan-compare td { color: var(--ink); font-size: 15px; }
.customer-app .premium-pricing .plan-compare thead th.is-recommended { color: #FFFFFF; background: var(--teal-700); }
.customer-app .premium-pricing .plan-compare tbody tr > * { border-top-color: var(--control-border); }
.customer-app .premium-pricing .pricing-faq[open] { padding-inline: 12px; background: var(--navy-50); border-radius: 10px; }
.customer-app .premium-pricing .payment-result { color: var(--ink); background: var(--teal-50); border: 2px solid var(--teal-700); }
.customer-app .premium-pricing .payment-result strong { color: var(--navy); font-size: 18px; }

/* The net price is prominent; tax is explained beside the payment action. */
.customer-app .purchase-confirmation .purchase-summary { background: var(--navy-50); border-top: 4px solid var(--navy); }
.customer-app .purchase-confirmation .purchase-summary h2 { color: var(--navy); font-size: 26px; }
.customer-app .purchase-confirmation .confirmation-price { gap: 4px; line-height: 1.5; }
.customer-app .purchase-confirmation .confirmation-price strong { color: var(--navy); font-size: 32px; font-weight: 700; white-space: nowrap; line-height: 1.4; }
.customer-app .purchase-confirmation .confirmation-price span { color: var(--ink); font-size: 15px; white-space: nowrap; }
.customer-app .purchase-confirmation .purchase-conditions { padding: 0; overflow: hidden; }
.customer-app .purchase-confirmation .purchase-conditions > div { grid-template-columns: 168px minmax(0, 1fr); gap: 0; padding: 0; border-bottom: 1px solid var(--control-border); }
.customer-app .purchase-confirmation .purchase-conditions dt { padding: 14px 16px; color: var(--text-2); background: var(--navy-50); font-size: 14px; }
.customer-app .purchase-confirmation .purchase-conditions dd { min-width: 0; padding: 14px 16px; color: var(--ink); font-size: 15px; }
.customer-app .purchase-confirmation .confirmation-accept { color: var(--ink); font-size: 15px; line-height: 1.85; }
.customer-app .purchase-confirmation .confirmation-actions { border-top: 3px solid var(--teal-700); }

/* Only the payment link in My Page and this particular completion notice. */
.customer-app .billing-section-title { color: var(--navy); font-size: 16px; font-weight: 700; }
.customer-app .mypage-balance { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; background: var(--navy-50); border-left: 4px solid var(--navy); }
.customer-app .mypage-balance .run-count { grid-column: 1; grid-row: 1; }
.customer-app .mypage-balance > span:last-child { grid-column: 2; grid-row: 1 / span 2; color: var(--navy); font-size: 15px; font-weight: 700; }
.customer-app .mypage-contract { display: grid; grid-column: 1; gap: 4px; min-width: 0; }
.customer-app .mypage-contract .contract-label { color: var(--text-2); font-size: 14px; font-weight: 700; }
.customer-app .mypage-contract strong { color: var(--navy); font-size: 18px; }
.customer-app .mypage-contract small { color: var(--ink); font-size: 15px; line-height: 1.85; }
.customer-app .flash.plan-change-result { color: var(--ink); background: var(--teal-50); border: 2px solid var(--teal-700); border-left-width: 6px; font-size: 16px; font-weight: 700; line-height: 1.85; }
@media (max-width:720px) {
  .customer-app .premium-pricing .one-time-row { grid-template-columns: minmax(0, 1fr) minmax(0, auto) auto; gap: 8px; }
  .customer-app .premium-pricing .one-time-row button { min-width: 64px; padding-inline: 8px; }
  .customer-app .premium-pricing .one-time-quantity { min-width: 0; }
  .customer-app .premium-pricing .plan-compare :is(th, td) { padding: 10px 4px; }
  .customer-app .purchase-confirmation .purchase-conditions > div { grid-template-columns: minmax(110px, .4fr) minmax(0, 1fr); }
  .customer-app .purchase-confirmation .purchase-conditions :is(dt, dd) { padding: 12px; }
  .customer-app .mypage-balance { gap: 8px 12px; }
}

.customer-app .premium-pricing .pricing-tax-notice,
.customer-app .purchase-confirmation .checkout-tax-notice { min-width: 0; color: var(--text-2); font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }

.customer-app .premium-pricing .pricing-hints { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:16px 0; }
.customer-app .premium-pricing .pricing-hint { display:grid; gap:4px; text-align:left; white-space:normal; font-size:14px; }
.customer-app .premium-pricing .plan-seat-extra { display:block; font-size:14px; color:var(--text-2); }
.customer-app .premium-pricing .plan-card.plan-highlight { outline:3px solid var(--teal-700); outline-offset:3px; }
@media(max-width:720px) {
  .customer-app .premium-pricing .plan-card.recommended { order:-1; }
  .customer-app .premium-pricing .pricing-hints { grid-template-columns:1fr; }
}