/* Hero banner behind the escalation-handling animation (CSP-safe, no inline styles) */
.em-hero { position: relative; height: 112px; overflow: hidden; background: radial-gradient(120% 140% at 80% 50%, #1f2a44 0%, #141a24 55%, #0d1119 100%); color: #fff; border-bottom: 1px solid #000; }
.em-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.em-hero-inner { position: relative; max-width: 1280px; margin: 0 auto; padding: 8px 24px; min-height: 108px; display: flex; flex-direction: column; justify-content: center; gap: 6px; pointer-events: none; }
.em-hero-inner > * { max-width: min(46%, 520px); }
.em-hero-kicker { font: 600 12px/1 "IBM Plex Sans", system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #ff6b73; }
.em-hero-title { margin: 0; font: 700 clamp(18px, 2.2vw, 24px)/1.15 var(--brand-font, system-ui); letter-spacing: .01em; }
.em-hero-sub { margin: 0; font: 400 13px/1.4 "IBM Plex Sans", system-ui, sans-serif; color: #b9c3d6; }
.em-hero-legend { display: flex; gap: 14px; margin-top: 8px; font: 500 12px/1 "IBM Plex Sans", system-ui, sans-serif; color: #cdd6e6; }
.em-hero-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.em-hero-legend .l1 i { background: #4f8cff; } .em-hero-legend .l2 i { background: #ffb238; } .em-hero-legend .l3 i { background: #ff4a52; }
/* phones / narrow: same full-width strip, a little shorter */
@media (max-width: 759px) { .em-hero { height: 104px; } }