/* =========================================================
   SmileAge — Impact & Reports page styles
   -----------------------------------------------------------
   Every selector is namespaced "sa-imp-" so nothing collides
   with style.css (untouched, owned by another developer) or
   the classes already defined in programs.css / events.css /
   research.css. This page reuses the shared .sa-page-hero
   pattern (from programs.css) and the shared scroll-reveal /
   count-up / meter-fill utility (scroll-animate.css + .js).
   Small viewport / breakpoint rules live in responsive.css,
   not here, per site convention.
   ========================================================= */

/* ---------- Hero action row ---------- */
.sa-imp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.1rem;
    margin-top: 2.25rem;
}

.sa-imp-hero-btn-outline {
    background-color: transparent;
    border: 1.5px solid rgba(22, 33, 62, 0.18);
    color: var(--navy-heading, #16213e);
    font-weight: 600;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.sa-imp-hero-btn-outline:hover,
.sa-imp-hero-btn-outline:focus {
    border-color: var(--green, #2fa878);
    color: var(--green-dark, #16362a);
    background-color: var(--icon-green-bg, #e2f0e8);
}

.sa-imp-hero-link {
    display: inline-flex;
    align-items: center;
    color: var(--green-dark, #16362a);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    border-bottom: 1.5px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.sa-imp-hero-link:hover {
    color: var(--green, #2fa878);
}

/* ---------- Jump nav ---------- */
.sa-imp-jumpnav {
    position: sticky;
    top: 127px;
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid rgba(22, 33, 62, 0.08);
    box-shadow: 0 2px 10px rgba(22, 33, 62, 0.04);
}

.sa-imp-jumpnav-scroll {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.85rem 1rem 0.85rem 0;
    scrollbar-width: none;
    transition: mask-image 0.2s ease;
}

.sa-imp-jumpnav-scroll::-webkit-scrollbar {
    display: none;
}

/* Only fades the trailing edge while there's more to scroll — cleared
   by JS once the last pill is fully in view, so it never looks "cut off". */
.sa-imp-jumpnav-scroll.sa-imp-jumpnav-more-right {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent 100%);
}

.sa-imp-jumpnav-scroll a {
    flex-shrink: 0;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mission-muted, #6f6c63);
    text-decoration: none;
    background: var(--cream-bg, #f8f4ee);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.sa-imp-jumpnav-scroll a:hover {
    background: var(--icon-green-bg, #e2f0e8);
    color: var(--green, #2fa878);
}

.sa-imp-jumpnav-scroll a.sa-imp-jumpnav-active {
    background: var(--green, #2fa878);
    color: #fff;
}

/* ---------- Section shells ---------- */
.sa-imp-section {
    background-color: #fff;
    padding-block: 4.5rem;
}

.sa-imp-section-tint {
    background: var(--cream-bg, #f8f4ee);
}

.sa-imp-head {
    max-width: 40rem;
    margin: 0 auto 3rem;
    text-align: center;
}

.sa-imp-eyebrow {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--green, #2fa878);
    margin-bottom: 0.75rem;
}

.sa-imp-title {
    font-family: var(--font-serif, "Playfair Display", serif);
    font-size: clamp(1.85rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--navy-heading, #16213e);
    margin-bottom: 0.75rem;
}

.sa-imp-subtitle {
    font-size: 1rem;
    color: var(--mission-muted, #6f6c63);
    line-height: 1.7;
    margin: 0;
}

.sa-imp-subhead {
    font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
    margin: 2.25rem 0 1.25rem;
}

/* Explicit opt-in only — :first-of-type was zeroing the top margin on
   ANY subhead that happened to be the first h3 in its container, which
   wrongly flattened "Top Fundraising Campaigns" (it follows a Bootstrap
   row that carries no bottom margin of its own, so the two zeros left
   no gap at all). Only subheads that genuinely sit flush against the
   section head above them should opt in via this class. */
.sa-imp-subhead-flush {
    margin-top: 0;
}

/* ---------- Stat icon color variants (shared across the page) ---------- */
.sa-imp-stat-icon-green { background: var(--icon-green-bg, #e2f0e8); color: var(--icon-green-fg, #2f8a63); }
.sa-imp-stat-icon-purple { background: var(--purple-soft, #ede4fb); color: var(--purple, #7c3aed); }
.sa-imp-stat-icon-orange { background: var(--icon-orange-bg, #fbe6d8); color: var(--icon-orange-fg, #e2632e); }
.sa-imp-stat-icon-blue { background: var(--blue-soft, #e3edfb); color: var(--blue, #2f6fd6); }

/* ---------- Live Impact Dashboard stat grid ---------- */
.sa-imp-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
    gap: 1.1rem;
}

.sa-imp-stat-tile {
    background: #fff;
    border: 1px solid rgba(22, 33, 62, 0.07);
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.sa-imp-stat-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.sa-imp-stat-tile strong {
    font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
    line-height: 1.2;
}

.sa-imp-stat-tile span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mission-muted, #6f6c63);
}

/* ---------- Key Insights panel ---------- */
.sa-imp-insights {
    margin-top: 1.5rem;
    background: #fff;
    border: 1px solid rgba(22, 33, 62, 0.07);
    border-radius: 1.1rem;
    padding: 1.75rem;
}

.sa-imp-insights-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.sa-imp-insights-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--purple-soft, #ede4fb);
    color: var(--purple, #7c3aed);
    font-size: 1rem;
}

.sa-imp-insights-head strong {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
}

.sa-imp-insights-head span {
    font-size: 0.78rem;
    color: var(--mission-muted, #6f6c63);
}

.sa-imp-insights-text {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--ink, #1c1b17);
    margin-bottom: 1.5rem;
}

.sa-imp-insights-cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px dashed rgba(22, 33, 62, 0.1);
}

.sa-imp-insights-cols h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
    margin-bottom: 0.75rem;
}

.sa-imp-insights-cols h4 i {
    color: var(--green, #2fa878);
    font-size: 0.8rem;
}

.sa-imp-insights-cols ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.sa-imp-insights-cols li {
    position: relative;
    padding-left: 1rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--mission-muted, #6f6c63);
}

.sa-imp-insights-cols li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--green, #2fa878);
}

/* ---------- Mini stat row (Programs / Fund Utilization / Geo headline) ---------- */
.sa-imp-mini-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 1.25rem;
    background: #fff;
    border: 1px solid rgba(22, 33, 62, 0.07);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 2.5rem;
}

.sa-imp-mini-stat-row-7 {
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}

.sa-imp-mini-stat-row div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-align: center;
}

.sa-imp-mini-stat-row i {
    color: var(--green, #2fa878);
    font-size: 0.95rem;
    margin-bottom: 0.15rem;
}

.sa-imp-mini-stat-row strong {
    font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
}

.sa-imp-mini-stat-row span {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mission-muted, #6f6c63);
}

/* ---------- Program cards (Programs rollup) ---------- */
.sa-imp-prog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.sa-imp-prog-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(22, 33, 62, 0.07);
    border-radius: 1.25rem;
    padding: 1.75rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.sa-imp-prog-card:hover {
    box-shadow: 0 1.25rem 2.5rem rgba(22, 33, 62, 0.1);
    transform: translateY(-3px);
}

.sa-imp-prog-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.sa-imp-prog-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.sa-imp-prog-name {
    font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
    margin-bottom: 0.4rem;
}

.sa-imp-prog-desc {
    font-size: 0.82rem;
    color: var(--mission-muted, #6f6c63);
    line-height: 1.5;
    margin-bottom: 1.35rem;
}

/* Impact score gauge: reuses the .sa-rep-gauge class purely as a hook so
   the shared js/scroll-animate.js (checks classList for "sa-rep-gauge")
   animates --pct on this element too. All visual styling is scoped to
   .sa-imp-prog-gauge below — .sa-rep-gauge itself has no rules here since
   events.css (which owns that class) isn't loaded on this page. */
.sa-imp-prog-score {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--cream-bg, #f8f4ee);
    border-radius: 0.85rem;
    margin-bottom: 1.35rem;
}

.sa-imp-prog-gauge {
    position: relative;
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(var(--sa-imp-gauge-color, #2fa878) calc(var(--pct) * 1%), rgba(22, 33, 62, 0.1) 0);
}

.sa-imp-prog-gauge::before {
    content: "";
    position: absolute;
    inset: 0.4rem;
    border-radius: 50%;
    background: #fff;
}

.sa-imp-prog-gauge span {
    position: relative;
    z-index: 1;
    font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--navy-heading, #16213e);
}

.sa-imp-prog-gauge-green { --sa-imp-gauge-color: var(--green, #2fa878); }
.sa-imp-prog-gauge-purple { --sa-imp-gauge-color: var(--purple, #7c3aed); }
.sa-imp-prog-gauge-orange { --sa-imp-gauge-color: var(--orange, #ee6518); }

.sa-imp-prog-score-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.sa-imp-prog-score-text strong {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
}

.sa-imp-prog-score-text span {
    font-size: 0.76rem;
    color: var(--mission-muted, #6f6c63);
}

.sa-imp-prog-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.35rem;
}

.sa-imp-prog-stats > div {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.sa-imp-prog-stats i {
    color: var(--green, #2fa878);
    font-size: 0.85rem;
}

.sa-imp-prog-stats strong {
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
}

.sa-imp-prog-stats span {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--mission-muted, #6f6c63);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.sa-imp-prog-budget {
    margin-bottom: 1.35rem;
}

.sa-imp-prog-budget-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
    margin-bottom: 0.5rem;
}

.sa-imp-prog-budget-head span {
    font-weight: 600;
    color: var(--mission-muted, #6f6c63);
}

.sa-imp-prog-budget-amounts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.74rem;
    color: var(--mission-muted, #6f6c63);
    margin-top: 0.5rem;
}

.sa-imp-prog-sdgs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
}

.sa-imp-prog-cta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.65rem;
    background: var(--icon-green-bg, #e2f0e8);
    color: var(--icon-green-fg, #2f8a63);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.sa-imp-prog-cta:hover {
    background: var(--green, #2fa878);
    color: #fff;
}

/* ---------- Row cards (Events rollup) ---------- */
.sa-imp-rowcard-list {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.sa-imp-rowcard {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    background: #fff;
    border: 1px solid rgba(22, 33, 62, 0.07);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.sa-imp-rowcard:hover {
    box-shadow: 0 12px 28px rgba(22, 33, 62, 0.08);
    transform: translateY(-2px);
}

.sa-imp-rowcard-main {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1 1 16rem;
    min-width: 0;
}

.sa-imp-rowcard-icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.sa-imp-rowcard-main h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
    margin: 0.35rem 0 0.25rem;
}

.sa-imp-rowcard-main p {
    font-size: 0.85rem;
    color: var(--mission-muted, #6f6c63);
    margin: 0;
}

.sa-imp-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--icon-green-fg, #2f8a63);
    background: var(--icon-green-bg, #e2f0e8);
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
}

.sa-imp-status-pill i { font-size: 0.5rem; }

.sa-imp-status-pill-pilot {
    color: var(--icon-orange-fg, #e2632e);
    background: var(--icon-orange-bg, #fbe6d8);
}

.sa-imp-rowcard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 1rem 1.5rem;
    flex: 2 1 24rem;
}

.sa-imp-rowcard-stats > div {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.sa-imp-rowcard-stats strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
}

.sa-imp-rowcard-stats span {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mission-muted, #6f6c63);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.sa-imp-rowcard-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: flex-start;
}

.sa-imp-chip {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}

.sa-imp-chip-green { background: var(--icon-green-bg, #e2f0e8); color: var(--icon-green-fg, #2f8a63); }
.sa-imp-chip-purple { background: var(--purple-soft, #ede4fb); color: var(--purple, #7c3aed); }
.sa-imp-chip-orange { background: var(--icon-orange-bg, #fbe6d8); color: var(--icon-orange-fg, #e2632e); }
.sa-imp-chip-blue { background: var(--blue-soft, #e3edfb); color: var(--blue, #2f6fd6); }

.sa-imp-rowcard-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--green, #2fa878);
    text-decoration: none;
    white-space: nowrap;
}

.sa-imp-rowcard-link:hover { color: var(--green-dark, #16362a); }

.sa-imp-viewall {
    display: inline-flex;
    align-items: center;
    margin-top: 1.75rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
    text-decoration: none;
}

.sa-imp-viewall:hover { color: var(--green, #2fa878); }

/* ---------- Event cards (Events rollup) ---------- */
.sa-imp-event-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.sa-imp-event-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(22, 33, 62, 0.07);
    border-radius: 1.25rem;
    padding: 1.75rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.sa-imp-event-card:hover {
    box-shadow: 0 1.25rem 2.5rem rgba(22, 33, 62, 0.1);
    transform: translateY(-3px);
}

/* Single row, vertically centered: icon left, one combined status pill
   right. Deliberately not two stacked pills — a taller stacked badge
   column next to a shorter icon reads as misaligned. */
.sa-imp-event-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}

.sa-imp-event-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.sa-imp-event-top .sa-imp-status-pill {
    flex-shrink: 0;
    white-space: nowrap;
}

.sa-imp-event-name {
    font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--navy-heading, #16213e);
    margin-bottom: 0.5rem;
}

.sa-imp-event-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--mission-muted, #6f6c63);
    margin-bottom: 1.35rem;
}

.sa-imp-event-meta i { color: var(--green, #2fa878); }

.sa-imp-event-score {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--cream-bg, #f8f4ee);
    border-radius: 0.85rem;
    margin-bottom: 1.35rem;
}

.sa-imp-event-gauge {
    position: relative;
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(var(--sa-imp-gauge-color, #2fa878) calc(var(--pct) * 1%), rgba(22, 33, 62, 0.1) 0);
}

.sa-imp-event-gauge::before {
    content: "";
    position: absolute;
    inset: 0.4rem;
    border-radius: 50%;
    background: #fff;
}

.sa-imp-event-gauge span {
    position: relative;
    z-index: 1;
    font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--navy-heading, #16213e);
}

.sa-imp-event-gauge-green { --sa-imp-gauge-color: var(--green, #2fa878); }
.sa-imp-event-gauge-purple { --sa-imp-gauge-color: var(--purple, #7c3aed); }
.sa-imp-event-gauge-blue { --sa-imp-gauge-color: var(--blue, #2f6fd6); }

/* Non-numeric variant for events that haven't happened yet — same slot
   and size as the gauge so the layout stays consistent, but shows an
   icon instead of implying a score that doesn't exist yet. */
.sa-imp-event-gauge-badge {
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--icon-orange-bg, #fbe6d8);
    color: var(--icon-orange-fg, #e2632e);
    font-size: 1.35rem;
}

.sa-imp-event-score-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.sa-imp-event-score-text strong {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
}

.sa-imp-event-score-text span {
    font-size: 0.76rem;
    color: var(--mission-muted, #6f6c63);
}

.sa-imp-event-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.35rem;
}

.sa-imp-event-stats > div {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.sa-imp-event-stats i {
    color: var(--green, #2fa878);
    font-size: 0.85rem;
}

.sa-imp-event-stats strong {
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
}

.sa-imp-event-stats span {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--mission-muted, #6f6c63);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.sa-imp-event-budget {
    margin-bottom: 1.35rem;
}

.sa-imp-event-budget-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
    margin-bottom: 0.5rem;
}

.sa-imp-event-budget-head span {
    font-weight: 600;
    color: var(--mission-muted, #6f6c63);
}

/* Empty/dashed track for events that haven't spent anything yet — keeps
   the same block height and rhythm as a filled budget bar without
   implying a fake percentage. */
.sa-imp-track-pending {
    border: 1px dashed rgba(22, 33, 62, 0.18);
    background: transparent;
}

.sa-imp-event-budget-amounts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.74rem;
    color: var(--mission-muted, #6f6c63);
    margin-top: 0.5rem;
}

.sa-imp-event-cta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.65rem;
    background: var(--icon-green-bg, #e2f0e8);
    color: var(--icon-green-fg, #2f8a63);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.sa-imp-event-cta:hover {
    background: var(--green, #2fa878);
    color: #fff;
}

/* ---------- Program groups (Events grouped under their program) ----------
   Built to stay flat and scannable at any program count: collapsed rows
   are a single compact line, so 3 programs or 30 take the same vertical
   space until a visitor chooses to expand one. */
.sa-imp-progroup-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sa-imp-progroup {
    background: #fff;
    border: 1px solid rgba(22, 33, 62, 0.07);
    border-radius: 1.1rem;
    overflow: hidden;
}

.sa-imp-progroup-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

.sa-imp-progroup-head:hover { background: var(--cream-bg, #f8f4ee); }

.sa-imp-progroup-head-static {
    cursor: default;
}

.sa-imp-progroup-head-static:hover { background: none; }

.sa-imp-progroup-head-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1 1 auto;
    min-width: 0;
}

.sa-imp-progroup-head-text strong {
    font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
}

.sa-imp-progroup-head-text span {
    font-size: 0.78rem;
    color: var(--mission-muted, #6f6c63);
}

.sa-imp-progroup-count {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--icon-green-fg, #2f8a63);
    background: var(--icon-green-bg, #e2f0e8);
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    white-space: nowrap;
}

.sa-imp-progroup-count-empty {
    color: var(--mission-muted, #6f6c63);
    background: rgba(22, 33, 62, 0.06);
}

.sa-imp-progroup-chevron {
    flex-shrink: 0;
    color: var(--mission-muted, #6f6c63);
    font-size: 0.85rem;
    transition: transform 0.25s ease;
}

.sa-imp-progroup-head[aria-expanded="true"] .sa-imp-progroup-chevron {
    transform: rotate(180deg);
}

.sa-imp-progroup-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.4s ease;
}

.sa-imp-progroup-body-collapsed {
    grid-template-rows: 0fr;
}

/* min-height:0 + overflow:hidden is what lets this shrink to the 0fr
   row track above. Padding/border must live on .sa-imp-progroup-body-content
   (a real child) instead of here — padding on THIS element would still
   render even at 0 height, since padding is never clipped by an
   element's own overflow, which is why the collapsed state used to show
   a leftover strip of white space. */
.sa-imp-progroup-body-inner {
    min-height: 0;
    overflow: hidden;
}

.sa-imp-progroup-body-content {
    border-top: 1px solid rgba(22, 33, 62, 0.06);
    padding: 1.5rem;
}

.sa-imp-progroup-more {
    display: inline-flex;
    align-items: center;
    margin-top: 1.25rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--green, #2fa878);
    text-decoration: none;
}

.sa-imp-progroup-more:hover { color: var(--green-dark, #16362a); }

.sa-imp-progroup-empty {
    background: var(--cream-bg, #f8f4ee);
    border-style: dashed;
}

/* ---------- Generic content card (Fundraising / Fund Utilization / ESG) ---------- */
.sa-imp-card {
    background: #fff;
    border: 1px solid rgba(22, 33, 62, 0.07);
    border-radius: 1rem;
    padding: 1.75rem;
}

.sa-imp-card-fill { height: 100%; }

.sa-imp-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.sa-imp-card-title-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.sa-imp-card-subtext {
    font-size: 0.82rem;
    color: var(--mission-muted, #6f6c63);
    margin-top: -0.85rem;
    margin-bottom: 1.25rem;
}

.sa-imp-sdg-charts-row {
    margin-bottom: 1.5rem;
}

.sa-imp-schedule-vii-card {
    margin-bottom: 2.5rem;
}

.sa-imp-esg-charts-row {
    margin-top: 0.5rem;
}

.sa-imp-beneficiary-charts-row {
    margin-top: 2rem;
}

/* Donation source / spend-category legend list */
.sa-imp-source-list {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.sa-imp-source-list-compact {
    margin-top: 1.25rem;
    margin-bottom: 0;
    gap: 0.65rem;
}

.sa-imp-source-list li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.sa-imp-dot {
    flex-shrink: 0;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
}

.sa-imp-dot-green { background: var(--green, #2fa878); }
.sa-imp-dot-purple { background: var(--purple, #7c3aed); }
.sa-imp-dot-orange { background: var(--orange, #ee6518); }
.sa-imp-dot-blue { background: var(--blue, #2f6fd6); }

.sa-imp-source-label {
    flex: 1;
    font-size: 0.88rem;
    color: var(--ink, #1c1b17);
    min-width: 0;
}

.sa-imp-source-list strong {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
    white-space: nowrap;
}

.sa-imp-source-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.1rem;
    border-top: 1px dashed rgba(22, 33, 62, 0.12);
}

.sa-imp-source-total span {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--mission-muted, #6f6c63);
}

.sa-imp-source-total strong {
    font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
    font-size: 1.3rem;
    color: var(--green, #2fa878);
}

/* Chart card header + tab toggle */
.sa-imp-chart-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.sa-imp-chart-head .sa-imp-card-title { margin-bottom: 0; }

.sa-imp-tabs {
    display: flex;
    gap: 0.35rem;
    background: var(--cream-bg, #f8f4ee);
    border-radius: 999px;
    padding: 0.3rem;
}

.sa-imp-tab {
    border: none;
    background: transparent;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--mission-muted, #6f6c63);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.sa-imp-tab-active {
    background: var(--green, #2fa878);
    color: #fff;
}

.sa-imp-chart-wrap {
    position: relative;
    width: 100%;
    height: 260px;
}

.sa-imp-chart-wrap-pie {
    height: 220px;
    margin-bottom: 0.5rem;
}

.sa-imp-chart-wrap-compact {
    height: 200px;
}

.sa-imp-compare-card {
    margin-bottom: 2rem;
}

/* ---------- Campaign progress cards ---------- */
.sa-imp-campaign-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.25rem;
}

.sa-imp-subhead-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2.25rem;
}

.sa-imp-subhead-row .sa-imp-subhead { margin-bottom: 1.25rem; }

.sa-imp-viewall-inline {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--green, #2fa878);
    text-decoration: none;
    white-space: nowrap;
}

.sa-imp-viewall-inline:hover { color: var(--green-dark, #16362a); }

.sa-imp-campaign-card {
    display: block;
    background: #fff;
    border: 1px solid rgba(22, 33, 62, 0.07);
    border-radius: 1rem;
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.sa-imp-campaign-card:hover {
    box-shadow: 0 1rem 2.25rem rgba(22, 33, 62, 0.1);
    transform: translateY(-3px);
    color: inherit;
}

.sa-imp-campaign-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(22, 33, 62, 0.1);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--green, #2fa878);
    width: 100%;
}

.sa-imp-campaign-card h4 {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
    margin-bottom: 1rem;
}

.sa-imp-track {
    width: 100%;
    height: 0.55rem;
    border-radius: 999px;
    background: rgba(22, 33, 62, 0.08);
    overflow: hidden;
    margin-bottom: 1.1rem;
}

.sa-imp-fill {
    height: 100%;
    border-radius: 999px;
}

.sa-imp-fill-green { background: var(--green, #2fa878); }
.sa-imp-fill-purple { background: var(--purple, #7c3aed); }
.sa-imp-fill-orange { background: var(--orange, #ee6518); }
.sa-imp-fill-blue { background: var(--blue, #2f6fd6); }

.sa-imp-campaign-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem;
}

.sa-imp-campaign-meta div {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.sa-imp-campaign-meta strong {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
}

.sa-imp-campaign-meta span {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mission-muted, #6f6c63);
}

/* ---------- Icon stat grid (Beneficiaries / ESG) ---------- */
.sa-imp-icon-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1rem;
}

.sa-imp-icon-stat-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}

.sa-imp-icon-stat-grid > div {
    background: #fff;
    border: 1px solid rgba(22, 33, 62, 0.07);
    border-radius: 0.85rem;
    padding: 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sa-imp-icon-stat-grid-compact > div {
    background: var(--cream-bg, #f8f4ee);
    border: none;
}

.sa-imp-icon-stat-grid i {
    color: var(--green, #2fa878);
    font-size: 1.1rem;
}

.sa-imp-icon-stat-grid strong {
    font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
}

.sa-imp-icon-stat-grid span {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mission-muted, #6f6c63);
}

/* ---------- Geographical impact ---------- */
.sa-imp-geo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.25rem;
}

.sa-imp-geo-card {
    text-align: left;
    background: #fff;
    border: 1px solid rgba(22, 33, 62, 0.07);
    border-radius: 1rem;
    padding: 1.75rem;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sa-imp-geo-card:hover {
    box-shadow: 0 12px 28px rgba(22, 33, 62, 0.08);
    transform: translateY(-2px);
    border-color: var(--green, #2fa878);
}

.sa-imp-geo-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background: var(--icon-green-bg, #e2f0e8);
    color: var(--icon-green-fg, #2f8a63);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.sa-imp-geo-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
}

.sa-imp-geo-sub {
    font-size: 0.8rem;
    color: var(--mission-muted, #6f6c63);
}

.sa-imp-geo-cta {
    margin-top: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--green, #2fa878);
}

.sa-imp-geo-modal-content { text-align: left; }

.sa-imp-geo-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1rem;
}

.sa-imp-geo-modal-grid > div {
    background: var(--cream-bg, #f8f4ee);
    border-radius: 0.85rem;
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.sa-imp-geo-modal-grid i {
    color: var(--green, #2fa878);
    font-size: 1.05rem;
}

.sa-imp-geo-modal-grid strong {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
}

.sa-imp-geo-modal-grid span {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mission-muted, #6f6c63);
}

/* ---------- SDG Alignment ---------- */
.sa-imp-sdg-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

/* flex-basis 50% + flex-grow:1 means a lone card left over in the final
   row (odd card count) naturally stretches to fill the row instead of
   leaving an empty gap next to a half-width card. */
.sa-imp-sdg-card {
    flex: 1 1 calc(50% - 0.75rem);
    background: #fff;
    border: 1px solid rgba(22, 33, 62, 0.07);
    border-left: 5px solid transparent;
    border-radius: 1rem;
    padding: 1.75rem;
}

.sa-imp-sdg-card-green { border-left-color: var(--green, #2fa878); }
.sa-imp-sdg-card-purple { border-left-color: var(--purple, #7c3aed); }
.sa-imp-sdg-card-orange { border-left-color: var(--orange, #ee6518); }
.sa-imp-sdg-card-blue { border-left-color: var(--blue, #2f6fd6); }

.sa-imp-sdg-num {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--mission-muted, #6f6c63);
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

.sa-imp-sdg-card h3 {
    font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
    margin-bottom: 1.1rem;
}

.sa-imp-sdg-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}

.sa-imp-sdg-stats div {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.sa-imp-sdg-stats strong {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
}

.sa-imp-sdg-stats span {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mission-muted, #6f6c63);
}

.sa-imp-sdg-outcome {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.88rem;
    color: var(--ink, #1c1b17);
    line-height: 1.6;
    margin-bottom: 1.1rem;
}

.sa-imp-sdg-outcome i {
    flex-shrink: 0;
    margin-top: 0.25rem;
    color: var(--green, #2fa878);
}

.sa-imp-sdg-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--green, #2fa878);
    text-decoration: none;
}

.sa-imp-sdg-link:hover { color: var(--green-dark, #16362a); }

/* ---------- Government Compliance ---------- */
.sa-imp-compliance-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--green-dark, #16362a);
    color: #fff;
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.75rem;
}

.sa-imp-compliance-banner i {
    font-size: 1.4rem;
    color: var(--green-soft, #7fd6ae);
}

.sa-imp-compliance-banner strong {
    display: block;
    font-size: 1.05rem;
}

.sa-imp-compliance-banner span {
    font-size: 0.85rem;
    opacity: 0.8;
}

.sa-imp-compliance-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sa-imp-compliance-row {
    display: grid;
    grid-template-columns: minmax(11rem, 1fr) 9.5rem minmax(9rem, 13rem) 7rem;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border: 1px solid rgba(22, 33, 62, 0.07);
    border-radius: 0.85rem;
    padding: 1.1rem 1.35rem;
}

.sa-imp-compliance-name {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
    min-width: 0;
}

.sa-imp-compliance-name i {
    flex-shrink: 0;
    color: var(--green, #2fa878);
    width: 1.1rem;
    text-align: center;
}

.sa-imp-compliance-status {
    justify-self: start;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    white-space: nowrap;
}

.sa-imp-status-active {
    background: var(--icon-green-bg, #e2f0e8);
    color: var(--icon-green-fg, #2f8a63);
}

.sa-imp-status-na {
    background: rgba(22, 33, 62, 0.06);
    color: var(--mission-muted, #6f6c63);
}

.sa-imp-compliance-valid {
    font-size: 0.82rem;
    color: var(--mission-muted, #6f6c63);
    min-width: 0;
}

.sa-imp-compliance-dl {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--green, #2fa878);
    text-decoration: none;
    white-space: nowrap;
}

.sa-imp-compliance-dl:hover { color: var(--green-dark, #16362a); }

.sa-imp-compliance-dl-muted {
    color: var(--mission-muted, #6f6c63);
    cursor: default;
}

.sa-imp-compliance-dl-muted:hover { color: var(--mission-muted, #6f6c63); }

/* ---------- Reports & Downloads ---------- */
.sa-imp-report-cat-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

/* flex-wrap + flex-grow lets a leftover card in the final row (5 cards
   don't divide evenly into fixed columns) stretch to fill the row instead
   of leaving empty grid tracks — the same fix applied to the SDG grid. */
.sa-imp-report-cat {
    flex: 1 1 15.5rem;
    background: #fff;
    border: 1px solid rgba(22, 33, 62, 0.07);
    border-radius: 1rem;
    padding: 1.75rem;
}

.sa-imp-report-cat-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    margin-bottom: 1rem;
}

.sa-imp-report-cat h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
    margin-bottom: 1rem;
}

.sa-imp-report-cat ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.sa-imp-report-cat li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink, #1c1b17);
    text-decoration: none;
    padding: 0.5rem 0;
    border-bottom: 1px dashed rgba(22, 33, 62, 0.1);
    transition: color 0.2s ease;
}

.sa-imp-report-cat li:last-child a { border-bottom: none; }

.sa-imp-report-cat li a i {
    color: var(--mission-muted, #6f6c63);
    font-size: 0.8rem;
}

.sa-imp-report-cat li a:hover {
    color: var(--green, #2fa878);
}

.sa-imp-report-cat li a:hover i { color: var(--green, #2fa878); }

/* ---------- Report Generator ---------- */
.sa-imp-generator-card {
    background: #fff;
    border: 1px solid rgba(22, 33, 62, 0.07);
    border-radius: 1.25rem;
    padding: 2rem;
}

.sa-imp-gen-row { margin-bottom: 1.75rem; }
.sa-imp-gen-row:last-child { margin-bottom: 0; }

.sa-imp-format-select {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.sa-imp-format-card {
    flex: 1 1 16rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-align: left;
    background: var(--cream-bg, #f8f4ee);
    border: 1.5px solid transparent;
    border-radius: 0.85rem;
    padding: 1rem 1.15rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.sa-imp-format-card:hover { border-color: rgba(47, 168, 120, 0.35); }

.sa-imp-format-card-active {
    background: #fff;
    border-color: var(--green, #2fa878);
    box-shadow: 0 0.5rem 1.25rem rgba(47, 168, 120, 0.12);
}

.sa-imp-format-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--icon-green-bg, #e2f0e8);
    color: var(--icon-green-fg, #2f8a63);
    font-size: 1rem;
}

.sa-imp-format-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.sa-imp-format-text strong {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
}

.sa-imp-format-text > span {
    font-size: 0.76rem;
    color: var(--mission-muted, #6f6c63);
}

.sa-imp-format-open-link {
    display: inline-flex;
    align-items: center;
    margin-top: 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mission-muted, #6f6c63);
    text-decoration: none;
}

.sa-imp-format-open-link:hover { color: var(--green, #2fa878); }

.sa-imp-gen-row-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
}

.sa-imp-gen-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
    margin-bottom: 0.75rem;
}

.sa-imp-chip-select {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sa-imp-chip-opt {
    border: 1px solid rgba(22, 33, 62, 0.14);
    background: #fff;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink, #1c1b17);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sa-imp-chip-opt:hover {
    border-color: var(--green, #2fa878);
}

.sa-imp-chip-opt-active {
    background: var(--green, #2fa878);
    border-color: var(--green, #2fa878);
    color: #fff;
}

.sa-imp-select {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(22, 33, 62, 0.14);
    background: #fff;
    font-size: 0.9rem;
    color: var(--ink, #1c1b17);
}

.sa-imp-select:focus {
    outline: none;
    border-color: var(--green, #2fa878);
    box-shadow: 0 0 0 3px rgba(47, 168, 120, 0.15);
}

.sa-imp-gen-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(22, 33, 62, 0.1);
}

.sa-imp-gen-result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    transition: opacity 0.3s ease;
}

.sa-imp-gen-result-hidden {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

.sa-imp-gen-result > span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--icon-green-fg, #2f8a63);
}

.sa-imp-gen-dl {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
    text-decoration: none;
    padding: 0.5rem 0.9rem;
    border-radius: 0.6rem;
    background: var(--cream-bg, #f8f4ee);
}

.sa-imp-gen-dl:hover { background: var(--icon-green-bg, #e2f0e8); color: var(--icon-green-fg, #2f8a63); }

/* ---------- Research & Case Studies preview ---------- */
.sa-imp-research-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

.sa-imp-research-card {
    display: block;
    background: #fff;
    border: 1px solid rgba(22, 33, 62, 0.07);
    border-radius: 1rem;
    padding: 1.5rem;
    text-decoration: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.sa-imp-research-card:hover {
    box-shadow: 0 12px 28px rgba(22, 33, 62, 0.08);
    transform: translateY(-2px);
}

.sa-imp-research-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    margin-bottom: 0.85rem;
}

.sa-imp-research-tag-research { background: var(--icon-green-bg, #e2f0e8); color: var(--icon-green-fg, #2f8a63); }
.sa-imp-research-tag-news { background: var(--blue-soft, #e3edfb); color: var(--blue, #2f6fd6); }
.sa-imp-research-tag-blog { background: var(--purple-soft, #ede4fb); color: var(--purple, #7c3aed); }
.sa-imp-research-tag-article { background: var(--icon-orange-bg, #fbe6d8); color: var(--icon-orange-fg, #e2632e); }

.sa-imp-research-card h3 {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--navy-heading, #16213e);
    margin-bottom: 0.5rem;
}

.sa-imp-research-card p {
    font-size: 0.8rem;
    color: var(--mission-muted, #6f6c63);
    margin: 0;
}

/* ---------- FAQs ---------- */
.sa-imp-faq-wrap {
    max-width: 46rem;
    margin: 0 auto;
}

.sa-imp-accordion-item {
    background: #fff;
    border: 1px solid rgba(22, 33, 62, 0.07);
    border-radius: 0.85rem;
    margin-bottom: 0.85rem;
    overflow: hidden;
}

.sa-imp-accordion-btn {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
    background: #fff;
    box-shadow: none;
}

.sa-imp-accordion-btn:not(.collapsed) {
    color: var(--green, #2fa878);
    background: #fff;
    box-shadow: none;
}

.sa-imp-accordion-btn:focus {
    box-shadow: none;
    border-color: transparent;
}

.sa-imp-accordion-btn::after {
    filter: hue-rotate(70deg) saturate(2);
}

.sa-imp-accordion-body {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--mission-muted, #6f6c63);
}

.sa-imp-accordion-body a {
    color: var(--green, #2fa878);
    font-weight: 600;
}