.head h1 { font-size: 28px; }
.card.main { position: relative; padding: 22px 24px 18px; }
.hero-l { font-size: 13px; color: var(--muted); }
.hero { font-size: 52px; font-weight: 650; letter-spacing: -.025em; line-height: 1.05; margin-top: 4px; }
.hero-d { font-size: 17px; font-weight: 550; letter-spacing: 0; margin-left: 10px; }
.card.main .card-head { margin-bottom: 18px; }
.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 14px 0 18px; border-top: 1px solid var(--grid); border-bottom: 1px solid var(--grid); }
.chart-head { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 8px; gap: 10px; flex-wrap: wrap; }
.lg { display: inline-flex; align-items: center; gap: 6px; }
.small { font-size: 12.5px; }
.chart { position: relative; height: 420px; }
@media (max-width: 640px) {
  .card.main { padding: 16px 14px 12px; }
  .hero { font-size: 40px; }
  .hero-d { display: block; margin: 4px 0 0; font-size: 14px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat .v { font-size: 16px; }
  .chart { height: 320px; }
}