/* KAR usage page (/usage). Mobile first; the design system's tokens only. */
.usage-wrap { max-width: 760px; margin: 0 auto; padding: 28px 16px 64px; }
.usage-head { margin-bottom: 22px; }
.usage-head .kar-kicker { margin: 0 0 6px; }
.usage-head h1 { margin: 0 0 8px; }
.usage-lead { margin: 0; color: var(--c-text-2); line-height: var(--lh-body); }

.usage-plan {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: var(--fs-sm); color: var(--c-text-2);
}
.usage-plan b {
  padding: 3px 10px; border-radius: var(--r-sm); font-weight: 600; font-size: var(--fs-xs);
  letter-spacing: .02em; color: var(--c-inverse-text); background: var(--c-brand);
}

.usage-note {
  margin: 0 0 18px; padding: 10px 14px; border-radius: var(--r-md);
  font-size: var(--fs-sm); line-height: 1.5; color: var(--c-text-2); background: var(--c-sunken);
}
.usage-card {
  padding: 18px 18px 16px; margin-bottom: 14px;
  background: var(--c-surface); border: 1px solid transparent; border-radius: var(--r-lg);
}
.usage-row + .usage-row { margin-top: 18px; padding-top: 18px; border-top: 0; }
.usage-row--minor .usage-label { font-size: var(--fs-sm); font-weight: 500; color: var(--c-text-2); }
.usage-row--minor .usage-figure { font-size: var(--fs-sm); }
.usage-row--minor .usage-bar { height: 6px; }
.usage-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.usage-label { margin: 0; font-size: var(--fs-md); font-weight: 600; color: var(--c-text); }
.usage-figure { font-family: var(--font-mono); font-size: var(--fs-md); color: var(--c-text); white-space: nowrap; }
.usage-bar {
  position: relative; height: 8px; overflow: hidden;
  background: var(--c-sunken); border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--c-rule-soft);
}
.usage-bar__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--c-brand); border-radius: var(--r-sm); transition: width .4s var(--ease, ease); }
.usage-bar--near .usage-bar__fill { background: var(--c-brand-2); }
.usage-bar--full .usage-bar__fill { background: var(--c-warn); }
.usage-reset { margin: 8px 0 0; font-size: var(--fs-xs); color: var(--c-text-3); }
.usage-sub { margin: 6px 0 0; font-size: var(--fs-xs); color: var(--c-text-3); line-height: 1.5; }

.usage-section-title { margin: 30px 0 10px; font-size: var(--fs-lg); font-weight: 600; }
.usage-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.usage-table th { text-align: left; font-weight: 600; color: var(--c-text-3); font-size: var(--fs-xs); padding: 0 8px 8px 0; border-bottom: 1px solid var(--c-rule); }
.usage-table td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--c-rule-soft); color: var(--c-text); vertical-align: top; }
.usage-table td:last-child, .usage-table th:last-child { text-align: right; padding-right: 0; }
.usage-table td:last-child { font-family: var(--font-mono); }
.usage-empty { margin: 0; color: var(--c-text-3); font-size: var(--fs-sm); }
.usage-how { margin: 0; padding-left: 18px; color: var(--c-text-2); font-size: var(--fs-sm); line-height: 1.7; }

.usage-cta {
  margin-top: 14px; padding: 18px; border-radius: var(--r-lg);
  background: var(--c-inverse); color: var(--c-inverse-text);
}
.usage-cta h2 { margin: 0 0 6px; font-size: var(--fs-lg); color: var(--c-inverse-text); }
.usage-cta p { margin: 0 0 14px; color: var(--c-inverse-text-2); font-size: var(--fs-sm); line-height: 1.55; }
.usage-cta .usage-cta__row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.usage-cta a.usage-cta__signin { color: var(--c-inverse-text); font-weight: 600; font-size: var(--fs-sm); text-decoration: underline; }
.usage-cta .kar-btn { --btn-bg: var(--kar-gold); --btn-bd: var(--kar-gold); --btn-fg: var(--kar-navy-900); }

@media (min-width: 720px) {
  .usage-wrap { padding-top: 44px; }
  .usage-card { padding: 22px 24px 20px; }
}