/* 30-spend: corporate cards. */
.sp-meter { display: block; height: 5px; margin-top: 4px; background: var(--hair, #eef2f7); border-radius: 4px; overflow: hidden; min-width: 80px; }
.sp-meter span { display: block; height: 100%; background: var(--brand-accent, #1f6feb); }
.sp-meter span.hi { background: var(--bad, #c0392b); }
.sp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.sp-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line, #e3e8ef); border-radius: 14px; background: var(--card, #fff); }
.sp-card.off { opacity: .8; }
.sp-card-face { aspect-ratio: 1.586; max-width: 340px; border-radius: 12px; padding: 16px 18px; color: #fff; display: flex; flex-direction: column; justify-content: space-between;
    background: linear-gradient(135deg, var(--brand-navy, #0b2545) 0%, var(--brand-navy-2, #13315c) 60%, var(--brand-accent, #1f6feb) 140%); }
.sp-card.off .sp-card-face { filter: grayscale(.7); }
.sp-card-top { display: flex; justify-content: space-between; font-weight: 600; font-size: 14px; }
.sp-card-num { font-size: 18px; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.sp-card-bot { display: flex; justify-content: space-between; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; opacity: .9; }
.sp-card-info { display: flex; flex-direction: column; gap: 8px; }
.sp-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
@media (max-width: 640px) { .sp-cards { grid-template-columns: 1fr; } }
.sp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }