.hf-finance,
.hf-payment-page,
.hf-forward-page,
.hf-secure-auth {
  display: grid;
  gap: 1.25rem;
  max-inline-size: 88rem;
  margin-inline: auto;
}

.hf-finance-toolbar {
  display: grid;
  grid-template-columns: minmax(16rem, 2fr) repeat(3, minmax(9rem, 1fr));
  gap: .75rem;
  padding: .875rem;
  align-items: end;
}
.hf-finance-toolbar__search { min-inline-size: 0; }
.hf-finance-filter-empty { text-align: center; }
.hf-finance-filter-empty[hidden] { display: none; }

.hf-finance-table-wrap { padding: 0; overflow-x: auto; }
.hf-finance-table { inline-size: 100%; border-collapse: collapse; min-inline-size: 44rem; }
.hf-finance-table th,
.hf-finance-table td { padding: .75rem 1rem; border-block-end: 1px solid var(--hf-color-border); text-align: right; vertical-align: middle; }
.hf-finance-table th { color: var(--hf-color-text-muted); font-size: .75rem; font-weight: 500; background: var(--hf-color-surface-muted); }
.hf-finance-table tbody tr { block-size: 3.75rem; }
.hf-finance-table tbody tr:last-child td { border-block-end: 0; }
.hf-finance-table tr[hidden] { display: none; }

.hf-finance-cards,
.hf-quotes__grid,
.hf-payment-methods__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hf-space-4); }
.hf-finance-cards { display: none; }
.hf-finance-card,
.hf-quote-card,
.hf-payment-method { min-inline-size: 0; display: grid; align-content: start; gap: .875rem; padding: 1rem; border: 1px solid var(--hf-color-border); border-radius: var(--hf-radius-lg); background: var(--hf-color-surface); box-shadow: var(--hf-shadow-sm); }
.hf-finance-card[hidden], .hf-quote-card[hidden] { display: none; }
.hf-finance-card__head,
.hf-quote-card__head,
.hf-payment-method__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--hf-space-3); }
.hf-finance-card__eyebrow { display: block; color: var(--hf-color-text-muted); font-size: .76rem; }
.hf-finance-card__title { display: block; margin-block-start: var(--hf-space-1); font-size: 1.05rem; overflow-wrap: anywhere; }
.hf-finance-card__meta,
.hf-quote-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hf-space-3); margin: 0; }
.hf-finance-card__meta > div,
.hf-quote-card dl > div { min-inline-size: 0; padding: var(--hf-space-3); border-radius: var(--hf-radius-md); background: var(--hf-color-surface-muted); }
.hf-finance-card__meta dt,
.hf-quote-card dt { color: var(--hf-color-text-muted); font-size: .75rem; }
.hf-finance-card__meta dd,
.hf-quote-card dd { margin: var(--hf-space-1) 0 0; font-weight: 500; overflow-wrap: anywhere; }
.hf-finance-card__actions,
.hf-payment-method__actions,
.hf-payment-methods__actions { display: flex; flex-wrap: wrap; gap: var(--hf-space-2); }
.hf-finance-card--danger { border-color: color-mix(in srgb, var(--hf-color-danger) 25%, var(--hf-color-border)); }
.hf-finance-card--warning { border-color: color-mix(in srgb, var(--hf-color-warning) 25%, var(--hf-color-border)); }

.hf-invoice-document,
.hf-quote-document { min-block-size: 100vh; background: var(--hf-color-bg); color: var(--hf-color-text); }
.hf-invoice-document__main { display: grid; gap: var(--hf-space-5); max-inline-size: 72rem; margin-inline: auto; padding: var(--hf-space-6); }
.hf-invoice-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--hf-space-5); }
.hf-invoice-hero h1 { margin: var(--hf-space-1) 0; }
.hf-invoice-hero__dates { display: flex; flex-wrap: wrap; gap: var(--hf-space-3); color: var(--hf-color-text-muted); }
.hf-invoice-hero__status { display: grid; justify-items: end; gap: var(--hf-space-3); font-size: 1.15rem; }
.hf-invoice-parties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hf-space-4); }
.hf-invoice-parties h2,
.hf-invoice-items h2,
.hf-finance-payment-panel h2,
.hf-credit-apply h2,
.hf-transactions h2,
.hf-masspay__summary h2,
.hf-quote-accept h2 { margin-block-start: 0; }
.hf-invoice-address { line-height: 1.9; overflow-wrap: anywhere; }
.hf-invoice-items { overflow-x: auto; }
.hf-finance-summary { display: grid; gap: var(--hf-space-2); inline-size: min(100%, 25rem); margin-inline-start: auto; margin-block-start: var(--hf-space-4); }
.hf-finance-summary__row { display: flex; justify-content: space-between; gap: var(--hf-space-4); padding-block: var(--hf-space-2); }
.hf-finance-summary__row--emphasis { margin-block-start: var(--hf-space-2); padding-block-start: var(--hf-space-4); border-block-start: 1px solid var(--hf-color-border); font-size: 1.06rem; font-weight: 500; }
.hf-invoice-document__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--hf-space-2); }

.hf-finance-payment-panel { display: flex; justify-content: space-between; align-items: end; gap: var(--hf-space-5); }
.hf-payment-button-compat,
.hf-gateway-owned { min-inline-size: 0; }
.hf-payment-button-compat form,
.hf-gateway-owned form { max-inline-size: 100%; }
.hf-credit-apply { display: grid; gap: var(--hf-space-3); }
.hf-credit-apply form { display: flex; flex-wrap: wrap; gap: var(--hf-space-3); align-items: end; }
.hf-finance-result { display: grid; gap: var(--hf-space-2); }
.hf-finance-result--success { border-color: color-mix(in srgb, var(--hf-color-success) 28%, var(--hf-color-border)); background: color-mix(in srgb, var(--hf-color-success) 7%, var(--hf-color-surface)); }
.hf-finance-result--danger { border-color: color-mix(in srgb, var(--hf-color-danger) 28%, var(--hf-color-border)); background: color-mix(in srgb, var(--hf-color-danger) 7%, var(--hf-color-surface)); }

.hf-add-funds__layout { display: grid; grid-template-columns: minmax(15rem, .55fr) minmax(0, 1.45fr); gap: var(--hf-space-4); align-items: start; }
.hf-credit-balance { display: grid; gap: var(--hf-space-2); position: sticky; inset-block-start: calc(var(--hf-topbar-height) + var(--hf-space-4)); }
.hf-credit-balance span { color: var(--hf-color-text-muted); }
.hf-credit-balance strong { font-size: clamp(1.25rem, 2.3vw, 1.65rem); }
.hf-quick-amounts { display: flex; flex-wrap: wrap; gap: var(--hf-space-2); margin-block: var(--hf-space-3); }
.hf-quick-amounts button { min-block-size: 2.5rem; padding-inline: var(--hf-space-3); border: 1px solid var(--hf-color-border); border-radius: 999px; background: var(--hf-color-surface-muted); color: var(--hf-color-text); cursor: pointer; }
.hf-quick-amounts button:hover { border-color: var(--hf-color-primary); color: var(--hf-color-primary); }

.hf-payment-methods__actions { justify-content: flex-end; }
.hf-payment-method { transition: border-color var(--hf-motion-fast) var(--hf-ease), transform var(--hf-motion-fast) var(--hf-ease); }
.hf-payment-method:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--hf-color-primary) 22%, var(--hf-color-border)); }
.hf-payment-method--default { border-color: color-mix(in srgb, var(--hf-color-success) 28%, var(--hf-color-border)); }
.hf-payment-method-manage,
.hf-billing-contact { max-inline-size: 62rem; }

.hf-masspay > form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(18rem, .6fr); gap: var(--hf-space-4); align-items: start; }
.hf-masspay__items { display: grid; gap: var(--hf-space-4); }
.hf-masspay-invoice { display: grid; gap: var(--hf-space-3); padding-block-end: var(--hf-space-4); border-block-end: 1px solid var(--hf-color-border); }
.hf-masspay-invoice:last-child { border-block-end: 0; padding-block-end: 0; }
.hf-masspay-invoice header,
.hf-masspay-line { display: flex; justify-content: space-between; gap: var(--hf-space-4); }
.hf-masspay-line span { min-inline-size: 0; overflow-wrap: anywhere; }
.hf-masspay__summary { position: sticky; inset-block-start: calc(var(--hf-topbar-height) + var(--hf-space-4)); display: grid; gap: var(--hf-space-4); }

.hf-payment-page { max-inline-size: 48rem; }
.hf-payment-form,
.hf-payment-remote { display: grid; gap: var(--hf-space-4); }
.hf-payment-frame { inline-size: 100%; min-block-size: 32rem; border: 1px solid var(--hf-color-border); border-radius: var(--hf-radius-md); background: var(--hf-color-surface); }
.hf-forward-page,
.hf-secure-auth { max-inline-size: 48rem; text-align: center; padding: var(--hf-space-6); }
.hf-forward-page__loader { inline-size: 2.75rem; block-size: 2.75rem; margin-inline: auto; border: .2rem solid var(--hf-color-border); border-block-start-color: var(--hf-color-primary); border-radius: 999px; animation: hf-finance-spin .8s linear infinite; }
@keyframes hf-finance-spin { to { transform: rotate(1turn); } }
.hf-muted { color: var(--hf-color-text-muted); }

@media print {
  .hf-invoice-document__actions,
  .hf-payment-button-compat,
  .hf-finance-payment-panel { display: none !important; }
  .hf-invoice-document,
  .hf-quote-document { background: var(--hf-color-surface); }
  .hf-card { box-shadow: none; }
}

@media (max-width: 1000px) {
  .hf-finance-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-finance-cards,
  .hf-quotes__grid,
  .hf-payment-methods__grid { grid-template-columns: 1fr; }
  .hf-masspay > form { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .hf-finance,
  .hf-payment-page,
  .hf-forward-page,
  .hf-secure-auth { gap: var(--hf-space-4); }
  .hf-finance-toolbar { grid-template-columns: 1fr; padding: var(--hf-space-4); }
  .hf-finance-table-wrap { display: none; }
  .hf-finance-cards { display: grid; }
  .hf-finance-card,
  .hf-quote-card,
  .hf-payment-method { padding: var(--hf-space-4); }
  .hf-finance-card__meta,
  .hf-quote-card dl { grid-template-columns: 1fr; }
  .hf-finance-card__actions .hf-btn,
  .hf-payment-method__actions .hf-btn { flex: 1 1 auto; }
  .hf-invoice-document__main { padding: var(--hf-space-4); }
  .hf-invoice-hero,
  .hf-finance-payment-panel { flex-direction: column; align-items: stretch; }
  .hf-invoice-hero__status { justify-items: start; }
  .hf-invoice-parties { grid-template-columns: 1fr; }
  .hf-invoice-document__actions { display: grid; grid-template-columns: 1fr; }
  .hf-add-funds__layout { grid-template-columns: 1fr; }
  .hf-credit-balance { position: static; }
  .hf-masspay__summary { inset-block-start: auto; inset-block-end: calc(var(--hf-mobile-nav-height) + env(safe-area-inset-bottom) + var(--hf-space-2)); z-index: var(--hf-z-sticky); }
  .hf-masspay-line { align-items: flex-start; }
  .hf-payment-frame { min-block-size: 26rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hf-forward-page__loader { animation: none; }
  .hf-payment-method { transition: none; }
}