/* Usage & Spend (ENG-1569, ENG-2335). Tokens only: colour comes from tokens.css. */
.usage-page { display: grid; gap: var(--space-8); min-width: 0; }
.usage-page .dl-page-hero__band { gap: var(--space-5); }
.usage-page .dl-panel__head { flex-wrap: wrap; }
.usage-page .dl-panel__titles { flex-basis: 14rem; }
.usage-page .dl-panel__body > p { margin: 0 0 var(--space-3); color: var(--text-body); line-height: var(--lh-body-card); }
.usage-page .dl-panel__body > p:last-child { margin-bottom: 0; }
.usage-breakdown th.dl-register__amount { text-align: right; }
.usage-breakdown__capability { color: var(--navy-solid); font-weight: var(--fw-bold); }

/* Below tablet width each capability stacks into one card, each figure named. */
@media (max-width: 47.99rem) {
  .usage-breakdown thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .usage-breakdown,
  .usage-breakdown tbody,
  .usage-breakdown tr,
  .usage-breakdown td { display: block; }
  .usage-breakdown tr { display: grid; gap: var(--space-1); padding: var(--space-4) 0; border-bottom: 1px solid var(--x-hairline); }
  .usage-breakdown td { padding: 0; border: 0; }
  .usage-breakdown td.dl-register__amount { display: flex; justify-content: space-between; gap: var(--space-4); }
  .usage-breakdown td.dl-register__amount::before { content: attr(data-label); color: var(--text-secondary); }
}