/* impact_bar block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   restyled onto .impact-bar / __inner / __text / colour modifiers */

.impact-bar { border-radius: var(--radius-md); }
.impact-bar__inner { display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.6rem; text-align: left; }
.impact-bar__icon { flex: 0 0 auto; color: var(--white); display: flex; }
.impact-bar__text { font-family: var(--font-display); font-weight: 800; font-size: 1.4375rem; line-height: 1.25; color: var(--white); max-width: none; }
.impact-bar__text em { font-style: var(--em-style); color: var(--white); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .15em; }
.impact-bar--blue { background: var(--surface-blue); }
.impact-bar--navy { background: var(--surface-dark-alt); }
.impact-bar--green { background: var(--aud-employers-text); }
.impact-bar--magenta { background: var(--surface-brand); }
@media (max-width: 600px) { .impact-bar--has-icon .impact-bar__inner { flex-direction: column; text-align: center; } }