/* Hero: title block + live ICP figure */
#hero { padding-block: 44px 36px; }
#hero .hero-grid { gap: 32px 44px; }
#hero .hero-text { min-width: 0; }
#hero .kicker { margin-bottom: 14px; }
#hero .kicker span { white-space: nowrap; }   /* wrap only between the two groups */
#hero h1 { margin-bottom: 18px; }
#hero h1 .tgt { letter-spacing: -0.03em; }
#hero .lede { color: var(--ink); opacity: 0.86; margin-bottom: 20px; text-wrap: pretty; }
#hero .hero-legend { margin: 0 0 24px; gap: 6px 18px; }
#hero .hero-legend span { white-space: nowrap; }
#hero .hero-cta { gap: 10px; }
#hero .hero-cta a.btn { display: inline-flex; align-items: center; text-decoration: none; padding: 10px 18px; font-size: 0.95rem; }
#hero .hero-cta a.btn:not(.btn-primary) { background: var(--surface); }

#hero .hero-fig { margin: 0; min-width: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 12px;
  box-shadow: 0 18px 40px -28px color-mix(in srgb, var(--ink) 45%, transparent); }
#hero .hero-fig canvas.plot { aspect-ratio: 16 / 11; }
#hero .hero-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 0 2px; }
#hero .hero-cap { font-family: var(--f-mono); font-size: 0.82rem; font-variant-numeric: tabular-nums; color: var(--muted); min-width: 0; }
#hero .hero-cap b { color: var(--ink); font-weight: 600; }
#hero .hero-cap .sep { margin: 0 0.15em; opacity: 0.6; white-space: pre; }
#hero .hero-bar .btn { padding: 6px 12px; font-size: 0.85rem; flex: none; }

@media (max-width: 520px) {
  #hero { padding-block: 28px 24px; }
  #hero .lede { font-size: 1.1rem; }
  #hero .hero-legend { font-size: 0.88rem; }
  #hero .hero-fig { padding: 8px; }
  #hero .hero-cap { font-size: 0.76rem; }
}