/* Billing: the setup steps and the bank row. Numbers mark a sequence walked once, in order. */
.bl-skel { display: block; height: 14px; width: 220px; max-width: 60%; }
.bl-steps .field .fmeta { display: flex; align-items: baseline; gap: 14px; }
.bl-step-n { flex: none; width: 18px; color: var(--faint); font-variant-numeric: tabular-nums; font-size: 0.9375rem; }
.bl-steps .fval { flex-wrap: wrap; justify-content: flex-end; }
.bl-total td { font-weight: 500; }
#bl-mandate-text { white-space: pre-line; }
@media (max-width: 640px) {
  .bl-steps .field, #bl-account-rows .field { flex-direction: column; align-items: stretch; gap: 12px; }
  .bl-steps .fval, #bl-account-rows .fval { justify-content: flex-start; }
}
#bl-price:not([hidden]) ~ #bl-setup > .section-h:first-child { margin-top: 52px; }
#bl-price:not([hidden]) ~ #bl-account { margin-top: 24px; }
@media (max-width: 640px) {
  #bl-usage thead th { white-space: normal; padding: 12px 8px; vertical-align: bottom; }
  #bl-usage tbody td { padding: 14px 8px; font-size: 0.875rem; }
  #bl-usage thead th:first-child, #bl-usage tbody td:first-child { padding-left: 0; }
  #bl-usage thead th:last-child, #bl-usage tbody td:last-child { padding-right: 0; }
}