/* =========================================================
   SmileAge — Invest & Partner page styles
   -----------------------------------------------------------
   Every selector is namespaced "sa-inv-" so nothing collides
   with style.css (untouched) or any other page's CSS file.
   Fully self-contained — does not load programs.css or
   impact.css, per the site's "own file per page" convention.
   This page intentionally uses a richer, darker hero than the
   shared .sa-page-hero pattern (still built entirely from the
   site's existing color tokens) since it's the primary
   investor-facing page and was asked to stand out visually.
   ========================================================= */

/* body defaults to a dark background site-wide (see style.css) —
   every section must set its own background or it shows through. */
.sa-inv-section {
    background-color: #fff;
    padding-block: clamp(3rem, 6vh, 4.5rem);
}
section
{
    scroll-margin-top: 150px;
}
.sa-inv-section-tint {
    background-color: var(--cream-bg, #f8f4ee);
}

/* ---------- Hero ---------- */
.sa-inv-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(60rem 30rem at 85% -10%, rgba(238, 101, 24, 0.16), transparent 60%),
        radial-gradient(50rem 30rem at -5% 110%, rgba(47, 111, 214, 0.18), transparent 55%),
        linear-gradient(135deg, var(--green-dark, #16362a) 0%, var(--navy-heading, #16213e) 100%);
    padding-block: clamp(3.5rem, 8vh, 5.5rem) 0;
}

.sa-inv-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 3rem;
    align-items: center;
    padding-bottom: clamp(2.5rem, 6vh, 4rem);
}

.sa-inv-hero-badge {
    display: inline-flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.5rem 1.15rem;
    border-radius: 50rem;
    margin-bottom: 1.5rem;
}

.sa-inv-hero-title {
    font-family: var(--font-serif, "Playfair Display", serif);
    font-weight: 700;
    font-size: clamp(2.25rem, 4.2vw, 3.25rem);
    line-height: 1.15;
    color: #fff;
    margin-bottom: 1.25rem;
}

.sa-inv-hero-accent {
    background-image: linear-gradient(90deg, #7fd6ae, #9fd6ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sa-inv-hero-subtitle {
    max-width: 34rem;
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 2rem;
}

.sa-inv-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
}

.sa-inv-hero-ghost-btn {
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    padding-bottom: 0.15rem;
}

.sa-inv-hero-ghost-btn:hover {
    color: #fff;
}

.sa-inv-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.25rem;
    padding: 1.75rem;
    backdrop-filter: blur(6px);
}

.sa-inv-hero-stats div {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.sa-inv-hero-stats strong {
    font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
    font-size: 1.9rem;
    font-weight: 700;
    color: #fff;
}

.sa-inv-hero-stats span {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.68);
}

/* ---------- Jump nav ---------- */
.sa-inv-jumpnav {
    position: sticky;
    top: 101px;
    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-inv-jumpnav-scroll {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.85rem 1rem 0.85rem 0;
    scrollbar-width: none;
}

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

.sa-inv-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-inv-jumpnav-scroll a:hover {
    background: var(--icon-green-bg, #e2f0e8);
    color: var(--green, #2fa878);
}

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

.sa-inv-jumpnav-scroll.sa-inv-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%);
}

/* ---------- Section head ---------- */
.sa-inv-head {
    max-width: 40rem;
    margin: 0 auto 3rem;
    text-align: center;
}

.sa-inv-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-inv-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-inv-subtitle {
    font-size: 1rem;
    color: var(--mission-muted, #6f6c63);
    line-height: 1.7;
    margin: 0;
}

.sa-inv-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.75rem 0 1.5rem;
}

.sa-inv-subhead-flush { margin-top: 0; }

/* ---------- Theory of Change: connected progress path ---------- */
.sa-inv-path {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2.5rem;
    padding-top: 0.5rem;
}

.sa-inv-path-track {
    position: absolute;
    top: 2.75rem;
    left: 5%;
    right: 5%;
    height: 3px;
    background: linear-gradient(90deg, var(--purple, #7c3aed), var(--blue, #2f6fd6), var(--green, #2fa878), var(--orange, #ee6518));
    border-radius: 999px;
    z-index: 0;
}

.sa-inv-path-node {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
    min-width: 0;
}

.sa-inv-path-circle {
    position: relative;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: #fff;
    border: 3px solid transparent;
    box-shadow: 0 0.5rem 1.5rem rgba(22, 33, 62, 0.1);
    margin-bottom: 0.6rem;
    transition: transform 0.5s ease, box-shadow 0.5s ease, background-color 0.5s ease;
}

.sa-inv-path-node-active .sa-inv-path-circle {
    transform: scale(1.08);
}

/* The auto-cycling highlight (js/invest.js) walks this class through
   each node in turn; the glow tints to that node's own accent instead
   of a single fixed color, so it reads as "this step is lit up now"
   rather than always pointing at the same stage. */
.sa-inv-path-node-active .sa-inv-path-circle-purple { background: var(--purple-soft, #ede4fb); box-shadow: 0 0.75rem 2rem rgba(124, 58, 237, 0.3); }
.sa-inv-path-node-active .sa-inv-path-circle-blue { background: var(--blue-soft, #e3edfb); box-shadow: 0 0.75rem 2rem rgba(47, 111, 214, 0.3); }
.sa-inv-path-node-active .sa-inv-path-circle-green { background: var(--icon-green-bg, #e2f0e8); box-shadow: 0 0.75rem 2rem rgba(47, 168, 120, 0.3); }
.sa-inv-path-node-active .sa-inv-path-circle-orange { background: var(--icon-orange-bg, #fbe6d8); box-shadow: 0 0.75rem 2rem rgba(238, 101, 24, 0.3); }

.sa-inv-path-node-active .sa-inv-path-circle::after {
    content: "";
    position: absolute;
    inset: -0.5rem;
    border: 2px solid currentColor;
    border-radius: 50%;
    opacity: 0.5;
    animation: saInvPulseRing 1.8s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .sa-inv-path-node-active .sa-inv-path-circle::after { animation: none; }
}

.sa-inv-path-circle-purple { border-color: var(--purple, #7c3aed); color: var(--purple, #7c3aed); }
.sa-inv-path-circle-blue { border-color: var(--blue, #2f6fd6); color: var(--blue, #2f6fd6); }
.sa-inv-path-circle-green { border-color: var(--green, #2fa878); color: var(--green, #2fa878); }
.sa-inv-path-circle-orange { border-color: var(--orange, #ee6518); color: var(--orange, #ee6518); }

.sa-inv-path-num {
    font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mission-muted, #6f6c63);
    letter-spacing: 0.05em;
    transition: color 0.5s ease;
}

.sa-inv-path-node-active .sa-inv-path-num {
    color: var(--navy-heading, #16213e);
}

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

.sa-inv-path-node span:not(.sa-inv-path-num):not(.sa-inv-path-circle) {
    font-size: 0.8rem;
    color: var(--mission-muted, #6f6c63);
}

/* ---------- Evidence: one featured card + a stacked pair ---------- */
.sa-inv-evidence-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.sa-inv-evidence-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(22, 33, 62, 0.08);
    border-radius: 1.1rem;
    padding: 1.75rem;
    overflow: hidden;
}

.sa-inv-evidence-card-featured {
    flex: 1.3 1 20rem;
    background: var(--cream-bg, #f8f4ee);
    border-color: transparent;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sa-inv-evidence-stack {
    flex: 1 1 18rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sa-inv-evidence-mark {
    color: rgba(22, 33, 62, 0.08);
    font-size: 2rem;
    position: absolute;
    top: 1.1rem;
    right: 1.4rem;
}

.sa-inv-evidence-card-featured .sa-inv-evidence-mark {
    color: rgba(22, 33, 62, 0.1);
    font-size: 2.75rem;
}

.sa-inv-evidence-card p {
    position: relative;
    font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--ink, #1c1b17);
    font-style: italic;
    margin-bottom: 1.25rem;
}

.sa-inv-evidence-card-featured p {
    font-size: 1.2rem;
    line-height: 1.55;
}

.sa-inv-evidence-attr {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

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

.sa-inv-evidence-attr strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
    margin-bottom: 0.25rem;
}

.sa-inv-evidence-tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--green-dark, #16362a);
    background: var(--icon-green-bg, #e2f0e8);
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
}

.sa-inv-evidence-card-featured .sa-inv-evidence-tag {
    background: #fff;
}

/* ---------- Impact banner ---------- */
.sa-inv-impact-banner {
    background: linear-gradient(135deg, var(--green-dark, #16362a) 0%, var(--navy-heading, #16213e) 100%);
    border-radius: 1.25rem;
    padding: 2.25rem;
    text-align: center;
}

.sa-inv-impact-banner h3 {
    font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.75rem;
}

.sa-inv-impact-banner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1.5rem;
}

.sa-inv-impact-banner-grid div {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sa-inv-impact-banner-grid strong {
    font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--green-soft, #7fd6ae);
}

.sa-inv-impact-banner-grid span {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.75);
}

/* ---------- Roadmap: winding journey map ---------- */
.sa-inv-journeymap {
    position: relative;
    max-width: 40rem;
    margin: 0 auto;
}

.sa-inv-journeymap-svg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sa-inv-journeymap-path-base {
    fill: none;
    stroke: rgba(22, 33, 62, 0.18);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 2 10;
}

.sa-inv-journeymap-path-progress {
    fill: none;
    stroke: var(--green, #2fa878);
    stroke-width: 4;
    stroke-linecap: round;
    filter: drop-shadow(0 2px 6px rgba(47, 168, 120, 0.35));
}

.sa-inv-journeymap-stop {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 3.5rem;
}

.sa-inv-journeymap-stop:last-child { margin-bottom: 0; }

/* A gentle horizontal wobble on the marker (not the card) is what makes
   the route behind it read as winding rather than a straight line — the
   card stays put for easy reading, only the connecting path curves. */
.sa-inv-journeymap-stop-a .sa-inv-journeymap-marker { transform: translateX(-1.4rem); }
.sa-inv-journeymap-stop-b .sa-inv-journeymap-marker { transform: translateX(1.4rem); }

.sa-inv-journeymap-marker {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    transition: transform 0.5s ease;
}

.sa-inv-roadmap-marker-done,
.sa-inv-roadmap-marker-progress {
    background: linear-gradient(135deg, var(--green-dark, #16362a) 0%, var(--green, #2fa878) 100%);
    color: #fff;
    font-size: 1.3rem;
    box-shadow: 0 0.5rem 1.25rem rgba(47, 168, 120, 0.3);
}

/* A gentle, single-pulse ring marks "you are here" without being a
   distracting animation. */
.sa-inv-roadmap-marker-progress { position: relative; }

.sa-inv-roadmap-marker-progress::before {
    content: "";
    position: absolute;
    inset: -0.4rem;
    border: 2px solid rgba(47, 168, 120, 0.4);
    border-radius: 50%;
    animation: saInvPulseRing 2.4s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .sa-inv-roadmap-marker-progress::before { animation: none; }
}

@keyframes saInvPulseRing {
    0% { transform: scale(0.85); opacity: 1; }
    100% { transform: scale(1.45); opacity: 0; }
}

.sa-inv-roadmap-marker-planned {
    background: #fff;
    border: 2px dashed rgba(22, 33, 62, 0.2);
    color: var(--mission-muted, #6f6c63);
}

.sa-inv-roadmap-marker-blue { color: var(--blue, #2f6fd6); border-color: rgba(47, 111, 214, 0.35); }
.sa-inv-roadmap-marker-purple { color: var(--purple, #7c3aed); border-color: rgba(124, 58, 237, 0.35); }

.sa-inv-roadmap-card {
    position: relative;
    overflow: hidden;
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 1px solid rgba(22, 33, 62, 0.08);
    border-top: 4px solid transparent;
    border-radius: 1.1rem;
    padding: 1.75rem 1.75rem 1.5rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

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

/* Same accent-stripe language as the Impact Metrics tiles further down
   the page, so this reads as part of the same design system rather than
   a one-off card style. */
.sa-inv-roadmap-card-green { border-top-color: var(--green, #2fa878); }
.sa-inv-roadmap-card-blue { border-top-color: var(--blue, #2f6fd6); }
.sa-inv-roadmap-card-purple { border-top-color: var(--purple, #7c3aed); }

/* Oversized faint icon echoing the phase's own goal chip — fills the
   card's empty upper corner with texture instead of blank space. */
.sa-inv-roadmap-watermark {
    position: absolute;
    top: -0.75rem;
    right: -0.25rem;
    font-size: 6rem;
    color: rgba(22, 33, 62, 0.05);
    transform: rotate(-12deg);
    pointer-events: none;
}

/* The "in progress" phase is the visual anchor of the whole timeline. */
.sa-inv-roadmap-card-current {
    border-color: transparent;
    border-top-color: transparent;
    background: linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, var(--green, #2fa878), var(--green-soft, #7fd6ae)) border-box;
    border: 2px solid transparent;
    box-shadow: 0 1.25rem 2.5rem rgba(47, 168, 120, 0.14);
}

.sa-inv-roadmap-card-current .sa-inv-roadmap-watermark { color: rgba(47, 168, 120, 0.09); }

.sa-inv-roadmap-phase-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mission-muted, #6f6c63);
    margin-bottom: 0.3rem;
}

.sa-inv-roadmap-card-green .sa-inv-roadmap-phase-label,
.sa-inv-roadmap-card-current .sa-inv-roadmap-phase-label { color: var(--green, #2fa878); }
.sa-inv-roadmap-card-blue .sa-inv-roadmap-phase-label { color: var(--blue, #2f6fd6); }
.sa-inv-roadmap-card-purple .sa-inv-roadmap-phase-label { color: var(--purple, #7c3aed); }

.sa-inv-roadmap-card-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.sa-inv-roadmap-card-top strong {
    font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
}

.sa-inv-roadmap-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    white-space: nowrap;
}

.sa-inv-roadmap-status-done,
.sa-inv-roadmap-status-progress { background: var(--icon-green-bg, #e2f0e8); color: var(--icon-green-fg, #2f8a63); }
.sa-inv-roadmap-status-planned { background: var(--blue-soft, #e3edfb); color: var(--blue, #2f6fd6); }
.sa-inv-roadmap-status-planned-purple { background: var(--purple-soft, #ede4fb); color: var(--purple, #7c3aed); }

.sa-inv-roadmap-card ul {
    position: relative;
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.sa-inv-roadmap-card li {
    position: relative;
    padding-left: 1.1rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ink, #1c1b17);
    overflow-wrap: break-word;
}

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

.sa-inv-roadmap-card-blue li::before { background: var(--blue, #2f6fd6); }
.sa-inv-roadmap-card-purple li::before { background: var(--purple, #7c3aed); }

.sa-inv-roadmap-goal {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--green-dark, #16362a);
    background: var(--icon-green-bg, #e2f0e8);
    padding: 0.7rem 0.9rem;
    border-radius: 0.6rem;
}

.sa-inv-roadmap-card-blue .sa-inv-roadmap-goal { background: var(--blue-soft, #e3edfb); color: #1d4ed8; }
.sa-inv-roadmap-card-purple .sa-inv-roadmap-goal { background: var(--purple-soft, #ede4fb); color: var(--purple-dark, #5b21b6); }

/* ---------- Governance: single tabbed dashboard card ---------- */
.sa-inv-gov-card {
    background: #fff;
    border: 1px solid rgba(22, 33, 62, 0.08);
    border-radius: 1.25rem;
    padding: 2rem;
}

.sa-inv-gov-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(22, 33, 62, 0.08);
}

.sa-inv-gov-tab {
    border: none;
    background: var(--cream-bg, #f8f4ee);
    color: var(--mission-muted, #6f6c63);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.65rem 1.15rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.sa-inv-gov-tab:hover { color: var(--navy-heading, #16213e); }

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

.sa-inv-gov-panel-hidden { display: none; }

.sa-inv-fin-split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2.5rem;
}

.sa-inv-fin-split .sa-inv-chart-wrap {
    flex: 1 1 14rem;
    max-width: 16rem;
    margin-bottom: 0;
}

.sa-inv-fin-split .sa-inv-legend {
    flex: 1 1 16rem;
}

/* ---------- Trustee grid ---------- */
.sa-inv-trustee-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.sa-inv-trustee-card {
    flex: 1 1 12.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border: 1px solid rgba(22, 33, 62, 0.08);
    border-radius: 1.1rem;
    padding: 1.75rem 1.25rem;
}

.sa-inv-trustee-avatar {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--purple-soft, #ede4fb);
    color: var(--purple, #7c3aed);
    font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.sa-inv-trustee-card strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
    margin-bottom: 0.25rem;
}

.sa-inv-trustee-role {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--green, #2fa878);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 0.65rem;
}

.sa-inv-trustee-card p {
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--mission-muted, #6f6c63);
    margin: 0;
}

/* ---------- Financial stat row ---------- */
.sa-inv-fin-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 1.25rem;
    background: var(--cream-bg, #f8f4ee);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

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

.sa-inv-fin-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-inv-fin-stat-row span {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mission-muted, #6f6c63);
}

/* ---------- Generic card ---------- */
.sa-inv-card {
    background: #fff;
    border: 1px solid rgba(22, 33, 62, 0.08);
    border-radius: 1.1rem;
    padding: 1.75rem;
}

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

.sa-inv-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
    margin-bottom: 1.25rem;
}

.sa-inv-chart-wrap {
    position: relative;
    height: 200px;
    margin-bottom: 1.25rem;
}

.sa-inv-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.sa-inv-legend li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.sa-inv-legend li span:nth-child(2) {
    flex: 1;
    font-size: 0.85rem;
    color: var(--ink, #1c1b17);
}

.sa-inv-legend strong {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
}

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

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

.sa-inv-recognition-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.sa-inv-recognition-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 0.88rem;
    color: var(--ink, #1c1b17);
    line-height: 1.5;
}

.sa-inv-recognition-list i {
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: var(--green, #2fa878);
}

/* ---------- Trust badge row ---------- */
.sa-inv-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.sa-inv-badge-row span {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--navy-heading, #16213e);
    background: #fff;
    border: 1px solid rgba(22, 33, 62, 0.1);
    padding: 0.65rem 1.1rem;
    border-radius: 999px;
}

.sa-inv-badge-row i { color: var(--green, #2fa878); }

/* ---------- Impact Metrics: bento grid ---------- */
.sa-inv-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 8rem;
    gap: 1.1rem;
    margin-bottom: 2rem;
}

.sa-inv-bento-tile {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(22, 33, 62, 0.08);
    border-top: 3px solid transparent;
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sa-inv-bento-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 1rem 2rem rgba(22, 33, 62, 0.09);
}

/* Small tile color accents — a top stripe + matching icon badge, cycling
   through the same 4-color palette used for icons everywhere else on
   this page, so the grid reads as part of the same design system. */
.sa-inv-bento-tile-green { border-top-color: var(--green, #2fa878); }
.sa-inv-bento-tile-purple { border-top-color: var(--purple, #7c3aed); }
.sa-inv-bento-tile-orange { border-top-color: var(--orange, #ee6518); }
.sa-inv-bento-tile-blue { border-top-color: var(--blue, #2f6fd6); }

.sa-inv-bento-badge {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
    background: var(--icon-green-bg, #e2f0e8);
    color: var(--icon-green-fg, #2f8a63);
}

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

/* Oversized faint icon in the corner of the two big tiles — gives the
   extra space a purpose instead of reading as empty padding. */
.sa-inv-bento-watermark {
    position: absolute;
    top: -1rem;
    right: -1rem;
    font-size: 8rem;
    color: rgba(255, 255, 255, 0.08);
    transform: rotate(-12deg);
    pointer-events: none;
}

.sa-inv-bento-tile-featured,
.sa-inv-bento-tile-tall {
    justify-content: space-between;
}

.sa-inv-bento-tile-featured {
    grid-column: span 2;
    grid-row: span 2;
    background: linear-gradient(135deg, var(--green-dark, #16362a) 0%, var(--green, #2fa878) 100%);
    border-color: transparent;
}

.sa-inv-bento-tile-featured .sa-inv-bento-badge {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* .sa-inv-bento-tile strong/span below sets the default (dark-on-light)
   text color for every tile. Since .sa-inv-bento-tile-featured is a
   second class on the SAME element (not a nested descendant), a plain
   descendant-combinator override like ".sa-inv-bento-tile-featured strong"
   has the exact same specificity as ".sa-inv-bento-tile strong" — so
   whichever rule happens to sit later in the file would silently win,
   which is what made the featured tile's white text fall back to the
   dark default. Chaining both classes (".sa-inv-bento-tile.sa-inv-bento-tile-featured")
   raises the specificity so these overrides always win regardless of
   source order. */
.sa-inv-bento-tile.sa-inv-bento-tile-featured strong {
    color: #fff;
    font-size: 2.75rem;
}

.sa-inv-bento-tile.sa-inv-bento-tile-featured > span:not(.sa-inv-bento-badge) {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
}

.sa-inv-bento-tile-tall {
    grid-row: span 2;
    background: linear-gradient(160deg, #fff 0%, var(--cream-bg, #f8f4ee) 100%);
}

.sa-inv-bento-tile-tall .sa-inv-bento-watermark { color: rgba(47, 111, 214, 0.08); }
.sa-inv-bento-tile-tall .sa-inv-bento-badge { background: var(--blue-soft, #e3edfb); color: var(--blue, #2f6fd6); }
.sa-inv-bento-tile.sa-inv-bento-tile-tall strong { font-size: 2rem; }

.sa-inv-bento-tile strong {
    font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
}

.sa-inv-metric-text { font-size: 1.1rem !important; }

.sa-inv-bento-tile span:not(.sa-inv-bento-badge) {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mission-muted, #6f6c63);
}

.sa-inv-vision-banner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: linear-gradient(135deg, var(--green-dark, #16362a) 0%, var(--green, #2fa878) 100%);
    border-radius: 1.1rem;
    padding: 1.75rem 2rem;
}

.sa-inv-vision-icon {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.3rem;
}

.sa-inv-vision-banner strong {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.75);
}

.sa-inv-vision-banner span {
    font-family: var(--font-sans, "Plus Jakarta Sans", sans-serif);
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
}

/* ---------- Sponsorship: horizontal rows ---------- */
.sa-inv-sponsor-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.sa-inv-sponsor-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: #fff;
    border: 1px solid rgba(22, 33, 62, 0.08);
    border-radius: 1.1rem;
    padding: 1.5rem 1.75rem;
    text-decoration: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.sa-inv-sponsor-row:hover {
    box-shadow: 0 1rem 2.5rem rgba(22, 33, 62, 0.08);
    transform: translateY(-2px);
}

.sa-inv-sponsor-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.85rem;
    font-size: 1.1rem;
}

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

.sa-inv-sponsor-row-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sa-inv-sponsor-row-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sa-inv-sponsor-row-head strong {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--navy-heading, #16213e);
}

.sa-inv-sponsor-row-text > span {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--mission-muted, #6f6c63);
}

.sa-inv-sponsor-status {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--icon-green-fg, #2f8a63);
    background: var(--icon-green-bg, #e2f0e8);
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
}

.sa-inv-sponsor-status-new {
    color: var(--icon-orange-fg, #e2632e);
    background: var(--icon-orange-bg, #fbe6d8);
}

.sa-inv-sponsor-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--green, #2fa878);
}

.sa-inv-sponsor-row:hover .sa-inv-sponsor-link { color: var(--green-dark, #16362a); }

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

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

/* ---------- Investor deck CTA (full-bleed closing banner) ---------- */
.sa-inv-deck-cta {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(50rem 26rem at 12% 10%, rgba(47, 111, 214, 0.18), transparent 55%),
        radial-gradient(46rem 26rem at 90% 100%, rgba(238, 101, 24, 0.16), transparent 55%),
        linear-gradient(135deg, var(--green-dark, #16362a) 0%, var(--navy-heading, #16213e) 100%);
    padding-block: clamp(3.75rem, 7vh, 5.5rem);
}

/* A CSS-only dot-grid stands in for an image, per the site's image-free
   convention — faded toward the edges so it reads as texture behind the
   content rather than visual noise competing with it. */
.sa-inv-deck-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(46rem 26rem at 50% 45%, #000 0%, transparent 75%);
    mask-image: radial-gradient(46rem 26rem at 50% 45%, #000 0%, transparent 75%);
    pointer-events: none;
}

.sa-inv-deck-watermark {
    position: absolute;
    top: -2.5rem;
    right: 4%;
    font-size: 12rem;
    color: rgba(255, 255, 255, 0.05);
    transform: rotate(-12deg);
    pointer-events: none;
}

.sa-inv-deck-inner {
    position: relative;
    z-index: 1;
    max-width: 34rem;
    margin-inline: auto;
    text-align: center;
}

.sa-inv-deck-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.12);
    color: var(--green-soft, #7fd6ae);
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.22);
}

.sa-inv-deck-inner h3 {
    font-family: var(--font-serif, "Playfair Display", serif);
    font-size: 1.9rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.85rem;
}

.sa-inv-deck-inner p {
    font-size: 0.98rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 2rem;
}

.sa-inv-deck-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
}

.sa-inv-deck-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 1.25rem;
}

.sa-inv-deck-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
}

.sa-inv-deck-meta i { color: var(--green-soft, #7fd6ae); }

/* ---------- Partners ----------
   Cards sit in a centered, wrapping flex row (not a fixed-column grid)
   so a single partner today doesn't look like a mistake, and more
   logos can be added later just by copying a card — no layout change
   needed. Logo tile currently shows an icon placeholder for partners
   without artwork yet; swap in an <img class="mot-partner-logo-img">
   inside .mot-partner-logo when a real logo is available. */
.mot-partners {
    padding: 60px 15px 75px;
    background-color: var(--mot-bg);
}

.mot-partners-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

.mot-partner-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 15.5rem;
    background-color: #fff;
    border: 1px solid rgba(28, 27, 23, 0.08);
    border-radius: var(--mot-radius);
    box-shadow: var(--mot-shadow);
    padding: 2.25rem 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mot-partner-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--mot-shadow-lg);
}

.mot-partner-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 1.1rem;
    margin-bottom: 1.15rem;
    background-image: linear-gradient(135deg, var(--mot-primary), var(--mot-secondary));
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 0.5rem 1.1rem rgba(22, 33, 62, 0.14);
}

.mot-partner-logo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: inherit;
    background-color: #fff;
    padding: 0.5rem;
}

.mot-partner-name {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--mot-secondary);
    margin-bottom: 0.35rem;
}

.mot-partner-tag {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mot-muted);
}