/* Entity profile — supplementary styles for /countries/, /sectors/, /universities/.
   Used in addition to company-profile.css. Defines the patterns specific to
   ecosystem-level teaser pages: sparkline cards row, breakdown stacked bars,
   founder origin columns, gradient hero variants, peer rankings. */

/* ============================================================
   Dark-mode scrollbar — applies to every overflow:auto element on the page
   (mm-carousel, ovr-tbl-wrap, hf-track, page body). Firefox uses
   scrollbar-color; WebKit/Blink uses ::-webkit-scrollbar pseudo-elements.
   ============================================================ */
html {
    scrollbar-color: rgba(255,255,255,0.14) transparent;
    scrollbar-width: thin;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.14);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }

/* ============================================================
   Hero — entity variant
   Uses a colored radial-gradient overlay. Color comes from --hero-accent
   (set inline per page). Default = blue. Sectors override via inline style.
   ============================================================ */
.hero.is-entity {
    --hero-accent: #3B82F6;
    background:
        radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--hero-accent) 22%, transparent) 0%, rgba(20,27,45,0) 60%),
        var(--navy);
    padding: 4rem 2rem 1.5rem;
}
.hero.is-entity .hero-eyebrow {
    color: color-mix(in srgb, var(--hero-accent) 70%, white 30%);
}
.entity-platform-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.5rem;
    margin-left: 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(16, 185, 129, 0.36);
    background: rgba(16, 185, 129, 0.11);
    color: #6EE7B7;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}
.entity-card-platform {
    margin-left: 0;
    flex-shrink: 0;
}
.hero.is-entity .hero-logo {
    width: 92px; height: 92px;
    background: color-mix(in srgb, var(--hero-accent) 14%, var(--navy-light));
    border: 1px solid color-mix(in srgb, var(--hero-accent) 35%, transparent);
    color: var(--white);
    font-family: var(--font-display, 'Source Sans 3', system-ui, sans-serif);
    font-size: 2.4rem;
    font-weight: 600;
}
.hero.is-entity .hero-flag {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", emoji, sans-serif;
    font-size: 3.4rem;
    line-height: 1;
}
.hero.is-entity .hero-emoji {
    font-size: 2.8rem;
    line-height: 1;
}

/* Hero with map — restructure the row into logo · content · map */
.hero-row.has-map {
    grid-template-columns: auto minmax(0, 1fr) minmax(280px, 380px);
    gap: 1.75rem;
    align-items: stretch;
}
@media (max-width: 1000px) {
    .hero-row.has-map {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .hero-row.has-map .hero-map { grid-column: 1 / -1; min-height: 220px; max-width: 480px; }
}
@media (max-width: 720px) {
    .hero-row.has-map { grid-template-columns: auto 1fr; }
    .hero-row.has-map .hero-map { min-height: 180px; }
}

/* Location map card — edge-to-edge SVG, sea-colored background, sharp
   focus-country highlight with a soft accent glow. */
.hero-map {
    position: relative;
    border-radius: 14px;
    border: 1px solid var(--border-light);
    background: #141B30; /* sea — slightly darker than hero radial */
    overflow: hidden;
    min-height: 220px;
}
.hero-map-inner {
    position: relative;
    width: 100%;
    height: 100%;
}
.hero-map-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.hero-map-svg svg.lm-svg {
    width: 100%;
    height: 100%;
    display: block;
    max-width: none;
}
/* Default country fill — slate landmasses, faint inter-country borders. */
.hero-map .lm-c {
    fill: #2C3654;
    stroke: #1A2138;
    stroke-width: 0.5;
    transition: fill 0.2s ease;
    vector-effect: non-scaling-stroke;
}
/* Subtle elevation on landmasses near the focus country */
.hero-map .lm-c {
    filter: none;
}
/* Highlighted country — accent fill, bright stroke, soft accent glow.
   The `is-focus` class is added by the runtime injector after the SVG
   loads, keyed off the data-iso attribute on the parent. */
.hero-map .lm-c.is-focus {
    fill: var(--hero-accent);
    stroke: color-mix(in srgb, var(--hero-accent) 45%, white 55%);
    stroke-width: 1.2;
    filter: drop-shadow(0 1px 4px color-mix(in srgb, var(--hero-accent) 60%, transparent));
}
.hero-map.is-map-regional .lm-c {
    stroke-width: 0.38;
}
.hero-map.is-map-regional .lm-c.is-focus {
    stroke-width: 0.95;
    filter: drop-shadow(0 1px 3px color-mix(in srgb, var(--hero-accent) 52%, transparent));
}
.hero-map.is-map-small .lm-c,
.hero-map.is-map-micro .lm-c {
    stroke-width: 0.26;
}
.hero-map.is-map-small .lm-c.is-focus,
.hero-map.is-map-micro .lm-c.is-focus {
    stroke-width: 0.7;
    filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--hero-accent) 42%, transparent));
}

/* Pin marker — overlays the map at a percentage offset (set inline as
   --lm-x / --lm-y from the country centroid). */
.hero-map-pin {
    position: absolute;
    left: var(--lm-x, 50%);
    top: var(--lm-y, 50%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.hero-map-pin::before,
.hero-map-pin::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}
.hero-map-pin::before {
    width: 22px; height: 22px;
    background: color-mix(in srgb, var(--hero-accent) 35%, transparent);
    animation: hero-map-pulse 2.4s ease-out infinite;
}
.hero-map-pin::after {
    width: 12px; height: 12px;
    background: var(--hero-accent);
    box-shadow: 0 0 0 3px rgba(20,27,45,0.85), 0 0 12px rgba(0,0,0,0.4);
}
@keyframes hero-map-pulse {
    0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0.85; }
    100% { transform: translate(-50%, -50%) scale(2.2);  opacity: 0; }
}

/* Caption (e.g. city name) below the map */
.hero-map-caption {
    position: absolute;
    left: 50%;
    bottom: 0.65rem;
    transform: translateX(-50%);
    font-family: var(--font-display, 'Source Sans 3', system-ui, sans-serif);
    font-style: italic;
    font-size: 0.8125rem;
    color: var(--white);
    background: rgba(20,27,45,0.7);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--border-light);
    pointer-events: none;
    backdrop-filter: blur(4px);
    letter-spacing: 0.01em;
    white-space: nowrap;
    max-width: calc(100% - 1.4rem);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Until the SVG is fetched, show a faint placeholder shimmer */
.hero-map:not(.is-loaded) .hero-map-svg::before {
    content: "";
    display: block;
    width: 70%;
    aspect-ratio: 2 / 1;
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 100%);
    background-size: 200% 100%;
    animation: hero-map-shimmer 1.4s linear infinite;
    border-radius: 8px;
}
@keyframes hero-map-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* Hero stat strip — 3-up big numbers above the KPI grid */
.hero-statline {
    max-width: 1140px;
    margin: 1.4rem auto 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.85rem;
    padding: 0 0;
}
.hero-stat {
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 0.85rem 1rem;
}
.hero-stat-num {
    font-family: var(--font-display, 'Source Sans 3', system-ui, sans-serif);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.05;
    color: var(--white);
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}
.hero-stat-num .delta {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--teal);
    letter-spacing: 0;
}
.hero-stat-num .delta.is-down { color: #FCA5A5; }
.hero-stat-label {
    color: var(--text-lighter);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: 0.4rem;
}
.hero-stat-sub {
    color: var(--text-faint);
    font-size: 0.7rem;
    margin-top: 0.3rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* ============================================================
   Compact headliner chip strip — replaces the verbose feat-grid
   inside the Overview section. Logo + name + valuation, single
   line per chip, wraps onto multiple rows on narrow viewports.
   ============================================================ */
.feat-strip {
    max-width: 1140px;
    margin: 1.4rem auto 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.feat-strip-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.7rem 0.35rem 0.4rem;
    border-radius: 999px;
    background: rgba(0,0,0,0.22);
    border: 1px solid var(--border-light);
    color: var(--white);
    text-decoration: none;
    font-size: 0.8125rem;
    line-height: 1.2;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.feat-strip-chip:hover {
    background: rgba(255,255,255,0.05);
    border-color: var(--border-mid);
}
/* No per-tier border colours on the chips: the tinted outlines read as noise
   with no legend to explain them (the data-tier attribute stays in the markup
   as metadata). All chips share the neutral border above. */
.feat-strip-logo {
    width: 20px; height: 20px;
    border-radius: 5px;
    /* Theme-matched logo tile (light tile in light mode, dark tile in dark) —
       never var(--white), which flips dark in light mode. Inset ring instead
       of a border so the 20px box doesn't grow. */
    background: var(--logo-tile-bg);
    box-shadow: inset 0 0 0 1px var(--logo-tile-border);
    display: inline-flex;
    align-items: center; justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.feat-strip-logo img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.feat-strip-logo > span { display: none; }
.feat-strip-logo.is-fallback {
    background: linear-gradient(135deg, #3B82F6, #8B5CF6);
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 600;
}
.feat-strip-logo.is-fallback img { display: none; }
.feat-strip-logo.is-fallback > span { display: block; }
.feat-strip-name {
    font-family: var(--font-display, 'Source Sans 3', system-ui, sans-serif);
    font-weight: 600;
}
.feat-strip-ev {
    color: var(--text-lighter);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    padding-left: 0.25rem;
    border-left: 1px solid var(--border-light);
    margin-left: 0.05rem;
}

/* ============================================================
   Sector largest-rounds treemap
   ============================================================ */
.sector-rounds-treemap {
    margin-top: 0.5rem;
}
.srt-card {
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--navy);
    overflow: hidden;
}
.srt-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem 0.85rem;
    border-bottom: 1px solid var(--border-light);
}
.srt-title {
    color: var(--white);
    font-family: var(--font-display, 'Source Sans 3', system-ui, sans-serif);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 0.25rem;
    letter-spacing: 0;
}
.srt-subtitle {
    color: var(--text-lighter);
    font-size: 0.8125rem;
    line-height: 1.35;
}
.srt-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-lighter);
    font-size: 0.8125rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.srt-meta strong {
    color: var(--white);
    font-weight: 600;
}
.srt-filter-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--border-light);
}
.srt-filter-label {
    color: var(--text-lighter);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-right: 0.2rem;
}
.srt-filter-pill {
    appearance: none;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    background: var(--navy-light);
    color: var(--text-light);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.45rem 0.72rem;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.srt-filter-pill:hover {
    color: var(--white);
    border-color: var(--border-mid);
}
.srt-filter-pill.is-active {
    color: var(--white);
    background: var(--navy-lighter);
    border-color: var(--blue);
}
/* Metric toggle — "By <year> round" vs "By EV". Injected by JS above the
   location filter (only when the page baked EV data); reads as the mode switch
   that swaps what the tiles measure. */
.srt-view-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--border-light);
}
.srt-view-row[hidden],
.srt-year-row[hidden] { display: none; }
.srt-view-pill {
    appearance: none;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    background: var(--navy-light);
    color: var(--text-light);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.45rem 0.8rem;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.srt-view-pill:hover {
    color: var(--white);
    border-color: var(--border-mid);
}
.srt-view-pill.is-active {
    color: var(--white);
    background: var(--navy-lighter);
    border-color: var(--blue);
}
/* "Show more years" slider — the handle is the earliest year shown; dragging
   left widens the window toward the current year. Injected by JS, so the row
   only exists when the script has enhanced the card. */
.srt-year-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.7rem 1.1rem;
    border-bottom: 1px solid var(--border-light);
}
.srt-year-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1 1 180px;
    max-width: 320px;
    height: 18px;
    margin: 0;
    background: transparent;
    cursor: pointer;
}
.srt-year-slider:focus { outline: none; }
/* The window runs from the handle to today, so the track is blue from the
   handle (--srt-fill, set by the widget) to its right end. */
.srt-year-slider::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(to right, var(--navy-lighter) 0, var(--navy-lighter) var(--srt-fill, 100%), var(--blue) var(--srt-fill, 100%), var(--blue) 100%);
    border: 1px solid var(--border-light);
}
.srt-year-slider::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(to right, var(--navy-lighter) 0, var(--navy-lighter) var(--srt-fill, 100%), var(--blue) var(--srt-fill, 100%), var(--blue) 100%);
    border: 1px solid var(--border-light);
}
.srt-year-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -7px;
    border-radius: 50%;
    background: var(--blue);
    border: 2px solid var(--navy);
    transition: transform 0.12s ease;
}
.srt-year-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--blue);
    border: 2px solid var(--navy);
}
.srt-year-slider:active::-webkit-slider-thumb { transform: scale(1.12); }
.srt-year-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4); } /* theme-guardrail-allow: brand-blue focus ring, same accent both themes (matches .ctrl-pill.active) */
.srt-year-slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4); } /* theme-guardrail-allow: brand-blue focus ring, same accent both themes (matches .ctrl-pill.active) */
.srt-year-display {
    color: var(--white);
    font-size: 0.82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 5.2em;
}
.srt-chart {
    position: relative;
    width: 100%;
    height: 520px;
    min-height: 420px;
    background: var(--navy-light);
    overflow: hidden;
}
.srt-card.is-loading .srt-chart {
    opacity: 0.72;
}
.srt-group-bg,
.srt-group-hdr,
.srt-tile {
    position: absolute;
    overflow: hidden;
}
.srt-group-bg {
    border-radius: 4px;
}
.srt-group-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    padding: 0 0.45rem;
    color: var(--white);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}
.srt-group-hdr span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.srt-group-hdr strong {
    flex: none;
    font-size: 0.68rem;
    font-weight: 700;
}
.srt-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    border: 1px solid var(--border-light);
    color: var(--white);
    text-align: center;
    cursor: default;
    transition: filter 0.12s ease, border-color 0.12s ease;
}
.srt-tile:hover {
    filter: brightness(1.18);
    border-color: var(--border-mid);
    z-index: 20;
}
/* EV-view tiles link through to the company profile. */
a.srt-tile {
    cursor: pointer;
    text-decoration: none;
}
.srt-tile-name {
    max-width: 92%;
    color: var(--white);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.18;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.srt-tile-name.is-small {
    color: var(--text-light);
    font-size: 0.62rem;
}
.srt-tile-amount {
    color: var(--blue);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.1;
}
.srt-loading,
.srt-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
    color: var(--text-light);
    font-size: 0.9rem;
    text-align: center;
    pointer-events: none;
    padding: 1rem;
}
.srt-loading[hidden],
.srt-empty[hidden] {
    display: none;
}
.srt-loading::before {
    content: "";
    width: 22px;
    height: 22px;
    margin-right: 0.6rem;
    border-radius: 50%;
    border: 2px solid var(--border-light);
    border-top-color: var(--blue);
    animation: srt-spin 0.85s linear infinite;
}
@keyframes srt-spin { to { transform: rotate(360deg); } }
.srt-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.72rem 1.1rem;
    border-top: 1px solid var(--border-light);
    color: var(--text-faint);
    font-size: 0.74rem;
}
.srt-card-foot a {
    color: var(--text-light);
    text-decoration: none;
}
.srt-card-foot a:hover {
    color: var(--white);
}
.srt-tip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5000;
    max-width: 300px;
    min-width: 190px;
    padding: 0.72rem 0.8rem;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: linear-gradient(180deg, var(--navy-light), var(--navy));
    box-shadow: var(--shadow-lg);
    color: var(--white);
    opacity: 0;
    pointer-events: none;
    transform: translate(-9999px, -9999px);
    transition: opacity 0.12s ease;
}
.srt-tip.is-visible {
    opacity: 1;
}
.srt-tip-name {
    color: var(--white);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.22;
    margin-bottom: 0.32rem;
}
.srt-tip-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.32rem;
    color: var(--text-light);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
}
.srt-tip-meta span {
    color: var(--text-faint);
}
.srt-tip-location {
    color: var(--text-lighter);
    font-size: 0.76rem;
    margin-top: 0.35rem;
}
.srt-tip-investors,
.srt-tip-tagline {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-light);
    color: var(--text-light);
    font-size: 0.75rem;
    line-height: 1.42;
}
@media (max-width: 760px) {
    .srt-card-head {
        flex-direction: column;
        gap: 0.55rem;
    }
    .srt-meta {
        white-space: normal;
    }
    .srt-chart {
        height: 420px;
    }
}
@media (max-width: 520px) {
    .srt-view-row,
    .srt-filter-row,
    .srt-year-row {
        align-items: stretch;
    }
    .srt-year-slider {
        flex: 1 1 100%;
        max-width: none;
    }
    .srt-filter-label {
        flex: 0 0 100%;
    }
    .srt-filter-pill,
    .srt-view-pill {
        flex: 1 1 calc(50% - 0.45rem);
        min-width: 0;
        padding-left: 0.45rem;
        padding-right: 0.45rem;
    }
    .srt-card-foot {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   Sparkline cards row — Unicorns / Decacorns / Thoroughbreds
   Mirrors the thoroughbreds infographic header band.
   ============================================================ */
.sparkrow {
    max-width: 1140px;
    margin: 0 auto;
    padding: 1.25rem 2rem 0.5rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}
.sparkcard {
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.sparkcard-spark[data-spark-values] { cursor: crosshair; }
.sparkpoint-tooltip {
    position: fixed;
    z-index: 3000;
    max-width: 12rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    background: rgba(20,27,45,0.95);
    box-shadow: 0 14px 34px rgba(0,0,0,0.28);
    color: var(--white);
    font-size: 0.68rem;
    line-height: 1.35;
    letter-spacing: 0.01em;
    opacity: 0;
    transform: translate(-50%, -8px);
    pointer-events: none;
    transition: opacity 0.1s ease, transform 0.1s ease;
}
.sparkpoint-tooltip.is-visible {
    opacity: 1;
    transform: translate(-50%, -14px);
}
.sparkcard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
}
.sparkcard-emoji {
    font-size: 1rem;
    line-height: 1;
}
.sparkcard-label {
    color: var(--text-lighter);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
}
.sparkcard-yoy {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--teal);
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.32);
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.sparkcard-yoy.is-down {
    color: #FCA5A5;
    background: rgba(239,68,68,0.10);
    border-color: rgba(239,68,68,0.32);
}
.sparkcard-num {
    font-family: var(--font-display, 'Source Sans 3', system-ui, sans-serif);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.05;
    margin-top: 0.55rem;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--white);
}
.sparkcard-spark {
    width: 100%; height: 36px;
    margin-top: 0.6rem;
    display: block;
    opacity: 0.95;
}
.sparkcard-foot {
    color: var(--text-faint);
    font-size: 0.7rem;
    margin-top: 0.5rem;
    letter-spacing: 0.04em;
}
@media (max-width: 800px) { .sparkrow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sparkrow { grid-template-columns: 1fr; } }

/* Sparkline gradient fills — match column accent colors */
.spark-purple { stroke: #C4B5FD; }
.spark-purple-fill { fill: url(#g-purple); }
.spark-blue { stroke: #93C5FD; }
.spark-blue-fill { fill: url(#g-blue); }
.spark-teal { stroke: #5DD9AA; }
.spark-teal-fill { fill: url(#g-teal); }
.spark-amber { stroke: #FBBF24; }
.spark-amber-fill { fill: url(#g-amber); }

/* ============================================================
   Breakdown table — stacked bars by sector / location.
   Each row shows total + colored segments by company-type tier.
   ============================================================ */
.bd-table { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.5rem; }
.bd-row {
    display: grid;
    grid-template-columns: 200px 1fr 90px;
    gap: 0.85rem;
    align-items: center;
    padding: 0.45rem 0;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.bd-row:first-child { border-top: none; }
.bd-name {
    color: var(--text-light);
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bd-name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.12s ease;
}
.bd-name a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.bd-bar {
    display: flex;
    height: 18px;
    border-radius: 5px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    min-width: 0;
}
.bd-seg {
    height: 100%;
    transition: filter 0.12s ease;
    cursor: default;
}
.bd-seg:hover { filter: brightness(1.2); }
/* Tier colors — match company-types palette */
.bd-seg-colt        { background: #5DD9AA; }
.bd-seg-thoroughbred{ background: #93C5FD; }
.bd-seg-unicorn     { background: #C4B5FD; }
.bd-seg-decacorn    { background: #A78BFA; }
.bd-seg-centicorn   { background: #8B5CF6; }
.bd-seg-gigacorn    { background: #7C3AED; }
.bd-seg-titan       { background: #DC2626; }

.bd-total {
    color: var(--white);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
    text-align: right;
}
.bd-legend {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
    font-size: 0.7rem;
    color: var(--text-lighter);
    letter-spacing: 0.02em;
}
.bd-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.bd-legend i {
    width: 9px; height: 9px;
    border-radius: 2px;
    display: inline-block;
}
@media (max-width: 720px) {
    .bd-row { grid-template-columns: 130px 1fr 60px; gap: 0.5rem; }
    .bd-bar { height: 14px; }
}

/* ============================================================
   Founder origin / hub list columns
   3- or 4-column grids of ranked bar lists (the thoroughbreds 4-col block)
   ============================================================ */
/* ── Country "Startup hubs" map (js/country-hubs-map.js) ─────────────────
   Bubble map on the country's own outline beside the EV ranking. The map
   palette is chart-internal, same tints as the NPA map card. */
.hubs-map-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr);
    gap: 1rem;
    align-items: stretch;
}
@media (max-width: 860px) { .hubs-map-layout { grid-template-columns: 1fr; } }
.chm-map {
    --chm-water: #F4F6FA; /* theme-guardrail-allow: map palette tokens, same tints as the NPA map card */
    --chm-other: #E7EAF0; /* theme-guardrail-allow: map palette tokens */
    --chm-other-line: #D4D9E3; /* theme-guardrail-allow: map palette tokens */
    --chm-land: #CFD9E7; /* theme-guardrail-allow: map palette tokens */
    --chm-land-line: #AFBDD1; /* theme-guardrail-allow: map palette tokens */
    position: relative;
    /* Same 4:3 box as the SVG viewBox, reserved before the map loads. */
    aspect-ratio: 4 / 3;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: var(--chm-water);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chm-map .chm-svg { display: block; width: 100%; height: auto; opacity: 0; transition: opacity 0.4s ease; }
/* The side column can be taller than the map (hubs + universities), so the
   row must not stretch the map card past its 4:3 box. */
.hubs-map-layout { align-items: start; }
.chm-map .chm-svg.is-in { opacity: 1; }
.chm-map .chm-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.chm-other { fill: var(--chm-other); stroke: var(--chm-other-line); stroke-width: 0.6; }
.chm-land { fill: var(--chm-land); stroke: var(--chm-land-line); stroke-width: 1; stroke-linejoin: round; }
.hubs-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.chm-hub { cursor: pointer; }
/* University / research-institute layers: small dots under the hub bubbles. */
.chm-uni-hit { cursor: pointer; }
.chm-uni { fill: var(--series-c4); fill-opacity: 0.75; stroke: var(--chm-water); stroke-width: 0.8; transition: fill-opacity 0.15s ease; }
.chm-research { fill: var(--series-c3); fill-opacity: 0.8; stroke: var(--chm-water); stroke-width: 0.8; transition: fill-opacity 0.15s ease; }
.chm-uni-hit:hover .chm-uni, .chm-uni-hit:hover .chm-research { fill-opacity: 1; }
.chm-label-uni { fill: var(--series-c4); font-weight: 600; }
.chm-label-uni.is-research { fill: var(--series-c3); }
.origin-list .origin-row .origin-bar-fill.is-uni { background: var(--series-c4); }
/* On phones the chips would cover the south of the map: park them under it. */
@media (max-width: 640px) {
    .chm-map { flex-direction: column; align-items: stretch; aspect-ratio: auto; }
    .chm-map .chm-svg { aspect-ratio: 4 / 3; }
    .chm-map .chm-legend { position: static; padding: 0.5rem 0.6rem; }
}
.chm-legend { position: absolute; left: 0.6rem; bottom: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.35rem; z-index: 2; }
.chm-legend-chip { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--border-light); border-radius: 999px; padding: 0.22rem 0.6rem; background: var(--surface-card); color: var(--white); font-family: inherit; font-size: 0.72rem; font-weight: 600; cursor: pointer; }
.chm-legend-chip span { color: var(--text-lighter); font-weight: 500; }
.chm-legend-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
.chm-legend-chip.is-uni i { background: var(--series-c4); }
.chm-legend-chip.is-research i { background: var(--series-c3); }
.chm-legend-chip[aria-pressed="false"] { opacity: 0.5; }
.chm-legend-chip[aria-pressed="false"] i { background: var(--text-faint); }
.chm-bubble {
    fill: var(--blue);
    fill-opacity: 0.5;
    stroke: var(--blue);
    stroke-width: 1.5;
    transition: fill-opacity 0.15s ease;
}
.chm-hub:hover .chm-bubble, .chm-hub:focus-visible .chm-bubble { fill-opacity: 0.85; }
.chm-hub:focus { outline: none; }
.chm-label {
    /* font-size comes from the <g> attribute: the script sizes it to the
       card's rendered width so phone labels don't shrink to 5px. */
    font-family: var(--font-sans);
    font-weight: 700;
    fill: var(--white);
    paint-order: stroke;
    stroke: var(--chm-water);
    stroke-width: 3.5px;
    stroke-linejoin: round;
    pointer-events: none;
}
.chm-label .chm-label-val { font-weight: 500; fill: var(--text-light); }
.chm-loading, .chm-empty { color: var(--text-lighter); font-size: 0.85rem; padding: 2rem; }
.chm-tip-meta { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.chm-tip-meta strong { color: var(--white); }
.chm-tip .srt-tip-location { margin-top: 0.4rem; color: var(--blue); font-size: 0.76rem; font-weight: 600; }

/* ── Founder origins half-sankey (js/founder-origins-flow.js) ─────────────
   The /talent/founder-dna/#origins chart on a country page: card chrome from
   .vc-flows-card, segmented sort control on the same grey track as the
   corn table's. */
.fo-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.85rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.fo-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-light); margin: 0 0 0.25rem; }
.fo-note { color: var(--text-lighter); font-size: 0.74rem; line-height: 1.4; margin: 0; }
.fo-seg { display: inline-flex; background: #EFF3F8; border-radius: 999px; padding: 3px; gap: 2px; flex: 0 0 auto; } /* theme-guardrail-allow: control track, same tint as the corn table's */
.fo-seg button { border: 0; border-radius: 999px; background: transparent; padding: 0.28rem 0.85rem; font-family: inherit; font-size: 0.8rem; font-weight: 600; color: var(--text-light); cursor: pointer; white-space: nowrap; }
.fo-seg button.is-on { background: #FFFFFF; color: var(--white); box-shadow: 0 1px 2px rgba(16,24,40,0.14); } /* theme-guardrail-allow: active segment on the grey control track */
.fo-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; align-items: center; margin: 0.2rem 0 0.5rem; font-size: 0.78rem; color: var(--text-light); }
.fo-legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
.fo-legend i { width: 10px; height: 10px; border-radius: 50%; }
/* Reserve roughly the finished height so the panels don't push the page
   down when they render; then fade them in. */
.fo-panel { min-height: 560px; opacity: 0; transition: opacity 0.4s ease; }
.fo-panel[data-founder-abroad] { min-height: 1000px; }
.fo-panel.is-in { opacity: 1; }
.fo-panel + .fo-panel { margin-top: 1rem; }
.fo-abroad .peer-bar-fill { transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
@media (max-width: 640px) { .fo-panel { min-height: 420px; } .fo-panel[data-founder-abroad] { min-height: 1000px; } }
.fo-abroad { margin-top: 0.4rem; }
.fo-abroad .peer-bar { cursor: default; }
/* Growth multiplier riding along the EV value in the hub map's side list. */
.origin-row .origin-count .origin-count-sub { color: var(--text-lighter); font-weight: 500; font-size: 0.72rem; margin-left: 0.25rem; }
.fo-wrap { overflow-x: auto; margin: 0.25rem 0 0; }
.fo-wrap svg { display: block; width: 100%; min-width: 640px; height: auto; font-family: var(--font-sans); }

.origin-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
.origin-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.origin-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .origin-grid, .origin-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px)  { .origin-grid, .origin-grid.cols-3, .origin-grid.cols-2 { grid-template-columns: 1fr; } }

.origin-col {
    background: rgba(0,0,0,0.22);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 1.1rem 1.15rem;
}
.origin-col-eyebrow {
    color: var(--text-lighter);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
    font-weight: 500;
}
.origin-list {
    display: flex; flex-direction: column;
    gap: 0.55rem;
}
.origin-row {
    display: grid;
    grid-template-columns: 1.2rem 1fr auto;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.8125rem;
}
.origin-rank {
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.origin-row .origin-name {
    color: var(--text-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.origin-row .origin-name a {
    color: inherit;
    text-decoration: none;
}
.origin-row .origin-name a:hover {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.origin-row .origin-count {
    color: var(--white);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.origin-row .origin-bar {
    grid-column: 2 / -1;
    height: 3px;
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 2px;
}
.origin-row .origin-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #3B82F6, #8B5CF6);
    border-radius: 999px;
}

/* ============================================================
   Peer ranking strip — list of nearby ecosystems / sectors at adjacent ranks
   ============================================================ */
.peer-strip {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}
.peer-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-light);
    color: var(--text-light);
    font-size: 0.8125rem;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.peer-pill .peer-rank {
    color: var(--text-faint);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}
.peer-pill:hover {
    color: var(--white);
    background: rgba(255,255,255,0.08);
    border-color: var(--border-mid);
}
.peer-pill.is-self {
    background: color-mix(in srgb, var(--hero-accent, #3B82F6) 18%, transparent);
    border-color: color-mix(in srgb, var(--hero-accent, #3B82F6) 50%, transparent);
    color: var(--white);
    cursor: default;
}

/* ============================================================
   Featured-companies cards — used on country/sector profiles
   to show top 8 companies as a teaser
   ============================================================ */
.feat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}
.feat-card {
    background: rgba(0,0,0,0.22);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 0.95rem 1.05rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.feat-card:hover {
    background: rgba(255,255,255,0.04);
    border-color: var(--border-mid);
    transform: translateY(-1px);
}
.feat-card-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.feat-card-logo {
    width: 30px; height: 30px;
    border-radius: 7px;
    /* Theme-matched logo tile — see .feat-strip-logo above. */
    background: var(--logo-tile-bg);
    box-shadow: inset 0 0 0 1px var(--logo-tile-border);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.feat-card-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
/* The initial span is always in the DOM behind the <img>; visible only when
   we add .is-fallback (no logoUrl) or when the img errors out. */
.feat-card-logo > span { display: none; }
.feat-card-logo.is-fallback {
    background: linear-gradient(135deg, #3B82F6, #8B5CF6);
    color: var(--white);
    font-size: 0.85rem;
    font-weight: 600;
}
.feat-card-logo.is-fallback img { display: none; }
.feat-card-logo.is-fallback > span { display: block; }
.feat-card-name {
    font-family: var(--font-display, 'Source Sans 3', system-ui, sans-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.feat-card-meta {
    display: flex;
    gap: 0.6rem;
    font-size: 0.75rem;
    color: var(--text-lighter);
    flex-wrap: wrap;
}
.feat-card-meta strong { color: var(--white); font-weight: 600; }
.feat-card-tier {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
}
.feat-card-tier.tier-titan      { color: #FCA5A5; background: rgba(220,38,38,0.15); border: 1px solid rgba(220,38,38,0.4); }
.feat-card-tier.tier-decacorn   { color: #C4B5FD; background: rgba(124,58,237,0.18); border: 1px solid rgba(124,58,237,0.4); }
.feat-card-tier.tier-unicorn    { color: #C4B5FD; background: rgba(139,92,246,0.18); border: 1px solid rgba(139,92,246,0.35); }
.feat-card-tier.tier-thoroughbred { color: #93C5FD; background: rgba(59,130,246,0.18); border: 1px solid rgba(59,130,246,0.35); }
.feat-card-tier.tier-colt       { color: #6EE7B7; background: rgba(16,185,129,0.14); border: 1px solid rgba(16,185,129,0.32); }

/* ============================================================
   Index landing pages — grid of all entities (countries / sectors / unis)
   ============================================================ */
.entity-index-hero {
    padding: 4.5rem 2rem 1.5rem;
    background:
        radial-gradient(ellipse at 50% -20%, rgba(59,130,246,0.18), rgba(20,27,45,0) 60%),
        var(--navy);
    text-align: center;
}
.entity-index-hero .hero-eyebrow { color: var(--eyebrow); margin-bottom: 0.45rem; font-family: var(--font-display, 'Source Sans 3', system-ui, sans-serif); font-size: 0.95rem; }
.entity-index-hero h1 {
    font-family: var(--font-display, 'Source Sans 3', system-ui, sans-serif);
    font-weight: 600;
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}
.entity-index-hero p {
    color: var(--text-light);
    font-size: 1.0625rem;
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.55;
}

.entity-search-row {
    max-width: 760px;
    margin: 1.25rem auto 0;
    display: flex;
    gap: 0.5rem;
}
.entity-search-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--border-mid);
    background: rgba(0,0,0,0.25);
    color: var(--white);
    font-family: inherit;
    font-size: 0.95rem;
}
.entity-search-input::placeholder { color: var(--text-faint); }
.entity-search-input:focus {
    outline: 2px solid var(--blue);
    outline-offset: -1px;
}

.entity-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.85rem;
}
.entity-card {
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 1rem 1.15rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.entity-card:hover {
    background: rgba(255,255,255,0.04);
    border-color: var(--border-mid);
    transform: translateY(-2px);
}
.entity-card-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.3rem;
}
.entity-card-emoji {
    font-size: 1.4rem;
    line-height: 1;
}
.entity-card-name {
    font-family: var(--font-display, 'Source Sans 3', system-ui, sans-serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--white);
    line-height: 1.2;
    margin-right: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.entity-card-rank {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.entity-card-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.45rem;
    margin-top: 0.4rem;
}
.entity-card-stat {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}
.entity-card-stat .num {
    font-family: var(--font-display, 'Source Sans 3', system-ui, sans-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--white);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.entity-card-stat .label {
    color: var(--text-faint);
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.entity-card-stat .label[title] {
    cursor: help;
    text-decoration: underline dotted rgba(148,163,184,0.68);
    text-underline-offset: 0.16em;
}
.entity-card-tags {
    display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.5rem;
}
.entity-card-tag {
    font-size: 0.66rem;
    color: var(--text-lighter);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-light);
    border-radius: 999px;
    padding: 0.12rem 0.5rem;
    letter-spacing: 0.02em;
}
.entity-card-submatch {
    margin-top: 0.55rem;
    padding: 0.35rem 0.6rem;
    background: rgba(242,165,94,0.10);
    border: 1px solid rgba(242,165,94,0.32);
    border-radius: 6px;
    color: #FBBF77;
    font-size: 0.7rem;
    line-height: 1.35;
}
.entity-card-submatch strong { color: var(--white); font-weight: 600; }

.entity-index-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}
.entity-index-section h2 {
    font-family: var(--font-display, 'Source Sans 3', system-ui, sans-serif);
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 0.4rem;
}
.entity-index-section p.section-intro {
    color: var(--text-light);
    margin-bottom: 1.3rem;
    max-width: 720px;
}

/* Tabs across continents / sub-categories on the index */
.entity-tabs {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto 0.75rem;
    padding: 1rem 2rem 0;
}
.entity-tab {
    padding: 0.45rem 0.95rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-light);
    border-radius: 999px;
    color: var(--text-light);
    font-size: 0.8125rem;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    font-family: inherit;
}
.entity-tab:hover { color: var(--white); background: rgba(255,255,255,0.08); }
.entity-tab.is-active {
    color: var(--white);
    background: rgba(59,130,246,0.16);
    border-color: rgba(59,130,246,0.5);
}
.entity-index-note {
    max-width: 1200px;
    margin: 0.2rem auto 0;
    padding: 0 2rem;
    color: var(--text-faint);
    font-size: 0.76rem;
    line-height: 1.4;
}

/* ============================================================
   Market-maps carousel — horizontal snap-scroll on sector pages
   ============================================================ */
.mm-carousel {
    display: flex;
    gap: 0.85rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 0.25rem 0 1rem;
    margin: 0 -0.25rem;
}
.mm-carousel { scrollbar-color: rgba(255,255,255,0.14) transparent; }
.mm-carousel::-webkit-scrollbar { height: 6px; }
.mm-carousel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 999px; background-clip: padding-box; }
.mm-card {
    flex: 0 0 280px;
    background: var(--navy-light);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex; flex-direction: column;
    scroll-snap-align: start;
    cursor: pointer;
    transition: border-color 0.2s ease;
}
.mm-card:hover {
    border-color: var(--teal, #14B8A6);
}
.mm-card:focus-visible {
    outline: 2px solid var(--teal, #14B8A6);
    outline-offset: 2px;
}
/* Live iframe preview — scaled down (0.3125 = 32%) so a 1024px-wide chart
   fits inside the 280px card. Matches .chart-preview-container on
   /resources?tab=marketmap. */
.mm-card-preview {
    height: 158px;
    position: relative;
    overflow: hidden;
    background: var(--navy);
    pointer-events: none;
}
.mm-card-preview iframe {
    width: 320%;
    height: 320%;
    border: 0;
    transform: scale(0.3125);
    transform-origin: top left;
    pointer-events: none;
    overflow: hidden;
}
.mm-card-body {
    padding: 0.85rem 1rem 1rem;
    display: flex; flex-direction: column; gap: 0.35rem;
    flex: 1;
}
.mm-card-title {
    font-family: var(--font-display, 'Source Sans 3', system-ui, sans-serif);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--white);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mm-card-meta {
    display: flex; align-items: center; gap: 0.4rem;
    color: var(--text-lighter);
    font-size: 0.75rem;
    margin-top: auto;
}
.mm-card-meta strong {
    color: var(--white);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.mm-card-meta .dot { color: var(--text-faint); }
.mm-foot {
    margin-top: 0.5rem;
    color: var(--text-faint);
    font-size: 0.8125rem;
}
.mm-foot a { color: var(--blue); text-decoration: none; }
.mm-foot a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 600px) { .mm-card { flex-basis: 230px; } }

/* Market-map modal — opens in-page when a card is clicked. Mirrors
   .chart-modal-overlay on /resources?tab=marketmap, slimmed down for
   sector pages (no share/download/theme — the embedded chart has its
   own controls). */
.mm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.mm-modal-overlay[hidden] { display: none; }
.mm-modal-overlay.is-open { opacity: 1; visibility: visible; }
.mm-modal-container {
    position: relative;
    width: 100%;
    max-width: 1400px;
    height: 90vh;
    background: var(--navy);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-light);
    display: flex; flex-direction: column;
}
.mm-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: var(--navy-light);
    border-bottom: 1px solid var(--border-light);
    gap: 1rem;
    flex-shrink: 0;
}
.mm-modal-title {
    font-family: var(--font-display, 'Source Sans 3', system-ui, sans-serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--white);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mm-modal-actions {
    display: flex; align-items: center; gap: 0.5rem;
    flex-shrink: 0;
}
.mm-modal-btn {
    width: 40px; height: 40px;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    background: var(--navy);
    color: var(--text-light);
    cursor: pointer;
    display: inline-flex;
    align-items: center; justify-content: center;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mm-modal-btn:hover {
    background: var(--navy-lighter);
    color: var(--white);
    border-color: var(--text-lighter);
}
.mm-modal-body {
    flex: 1;
    min-height: 0;
}
.mm-modal-body iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
@media (max-width: 720px) {
    .mm-modal-overlay { padding: 0; }
    .mm-modal-container { height: 100vh; border-radius: 0; border: 0; max-width: none; }
    .mm-modal-header { padding: 0.75rem 1rem; }
    .mm-modal-title { font-size: 1rem; }
}

/* ============================================================
   Hero funnel — Pre-Seed → Decacorn, the visual centerpiece
   ============================================================ */
.hero-funnel {
    margin-top: 1rem;
}
.hf-track {
    display: flex; align-items: stretch; gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 0.5rem;
}
.hf-track::-webkit-scrollbar { height: 6px; }
.hf-track::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
.hf-stage {
    flex: 1 1 0;
    min-width: 96px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 0.95rem 0.5rem;
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--hf-accent, rgba(255,255,255,0.10));
    border-radius: 12px;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.02),
        0 0 28px -10px var(--hf-accent, transparent);
    position: relative;
}
.hf-stage::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: 12px;
    background: linear-gradient(180deg, var(--hf-accent, transparent) 0%, transparent 60%);
    opacity: 0.10;
    pointer-events: none;
}
.hf-stage-label {
    color: var(--text-light);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-bottom: 0.55rem;
    text-align: center;
    white-space: nowrap;
}
.hf-stage-count {
    color: var(--white);
    font-family: var(--font-display, 'Source Sans 3', system-ui, sans-serif);
    font-size: 1.85rem;
    font-weight: 650;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.hf-arrow {
    flex: 0 0 48px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: rgba(255,255,255,0.32);
    padding: 0 0.15rem;
    position: relative;
}
.hf-arrow svg {
    width: 26px; height: 18px;
    display: block;
}
.hf-conv {
    color: var(--text-light);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 600;
    margin-top: 0.4rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.hf-arrow.is-derived .hf-conv { color: var(--text-lighter); font-weight: 500; }
.hf-conv sup {
    font-size: 0.55rem;
    color: var(--text-lighter);
    margin-left: 1px;
    cursor: help;
}
.hf-footnote {
    color: var(--text-lighter);
    font-size: 0.7rem;
    line-height: 1.45;
    margin-top: 0.85rem;
    max-width: 760px;
}
@media (max-width: 720px) {
    .hf-stage { flex: 0 0 110px; padding: 0.85rem 0.55rem; }
    .hf-stage-count { font-size: 1.4rem; }
    .hf-stage-label { font-size: 0.65rem; }
    .hf-arrow { flex: 0 0 44px; }
    .hf-arrow svg { width: 24px; height: 16px; }
    .hf-conv { font-size: 0.65rem; }
}

/* ============================================================
   Notable companies — name pills grouped by tier (decacorn / unicorn / TB+)
   ============================================================ */
.named-companies {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
@media (max-width: 900px) { .named-companies { grid-template-columns: 1fr; } }
.nc-col {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 0.95rem 1rem;
}
.nc-col-head {
    display: flex; align-items: baseline; gap: 0.55rem;
    margin-bottom: 0.7rem;
    flex-wrap: wrap;
}
.nc-col-tier {
    color: var(--white);
    font-family: var(--font-display, 'Source Sans 3', system-ui, sans-serif);
    font-size: 1.05rem;
    font-weight: 650;
}
.nc-col-sub {
    color: var(--text-lighter);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}
.nc-col-count {
    margin-left: auto;
    color: var(--nc-accent, var(--text-light));
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.nc-pills {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
}
.nc-pill {
    color: var(--text-light);
    font-size: 0.78rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    padding: 0.22rem 0.65rem;
    line-height: 1.3;
}
.nc-more {
    color: var(--text-lighter);
    font-size: 0.72rem;
    padding: 0.22rem 0.55rem;
    align-self: center;
}

/* ============================================================
   Capital autonomy — % domestic VC by funding stage
   ============================================================ */
.capital-autonomy { margin-top: 1rem; }
.ca-legend {
    color: var(--text-lighter);
    font-size: 0.72rem;
    display: flex; align-items: center; gap: 0.4rem;
    margin-bottom: 0.6rem;
}
.ca-swatch {
    display: inline-block; width: 10px; height: 10px;
    border-radius: 2px; background: linear-gradient(90deg, #3B82F6, #6366F1);
}
.ca-row {
    display: grid;
    grid-template-columns: 100px 1fr 110px;
    gap: 0.85rem;
    align-items: center;
    padding: 0.4rem 0;
}
.ca-label {
    color: var(--white);
    font-size: 0.85rem;
    font-weight: 500;
}
.ca-track {
    height: 22px;
    background: rgba(255,255,255,0.04);
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}
.ca-fill {
    height: 100%;
    background: linear-gradient(90deg, #3B82F6, #6366F1);
    border-radius: 5px;
    transition: width 0.3s ease;
}
.ca-pct {
    position: absolute;
    top: 50%; left: 0.5rem;
    transform: translateY(-50%);
    color: var(--white);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.ca-intl {
    color: var(--text-lighter);
    font-size: 0.78rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
    .ca-row { grid-template-columns: 80px 1fr 80px; gap: 0.55rem; }
    .ca-label { font-size: 0.78rem; }
    .ca-intl { font-size: 0.7rem; }
}

/* ============================================================
   Academia panel — university spinouts + alumni-founded company funnel
   ============================================================ */
.academia-panel {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin-top: 1rem;
}
.ac-head {
    color: var(--text-light);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
}
.ac-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.85rem;
}
@media (max-width: 900px) { .ac-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .ac-grid { grid-template-columns: repeat(2, 1fr); } }
.ac-stat {
    text-align: left;
    padding: 0.6rem 0.7rem;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    border-left: 2px solid #3B82F6;
}
.ac-stat-val {
    color: var(--white);
    font-family: var(--font-display, 'Source Sans 3', system-ui, sans-serif);
    font-size: 1.45rem;
    font-weight: 650;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.15rem;
}
.ac-stat-label {
    color: var(--text-lighter);
    font-size: 0.72rem;
    line-height: 1.3;
}

/* University founder ranking table (replaces the academia treemap).
   Colours come entirely from semantic tokens (--white, --text-*, --border-light)
   so light/dark contrast flips automatically — no theme-css overrides needed. */
.ac-rank { margin-top: 0.15rem; }
.ac-rank-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
    color: var(--text-light);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.55rem;
}
.ac-rank-note {
    color: var(--text-faint);
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.7rem;
}
.ac-rank .ovr-tbl-wrap { margin-top: 0; padding-bottom: 6px; }
.ovr-tbl.ac-rank-tbl { min-width: 440px; }
.ac-rank-tbl td.ac-rank-pos { width: 1px; white-space: nowrap; color: var(--text-faint); }
.ac-rank-tbl td.ac-rank-city { color: var(--text-lighter); }
.ac-rank-tbl td.ac-rank-cos { color: var(--white); font-weight: 600; }
.ac-rank-tbl td .ac-rank-name { color: var(--text-light); }
.ac-rank-flag { margin-right: 0.5rem; font-size: 1.02em; line-height: 1; }
/* Blurred placeholder rows — the gated long tail behind the Book-a-Demo CTA.
   --ac-lb is set per-row inline for a progressive "receding" blur. */
.ac-rank-tbl tbody tr.ac-rank-locked {
    opacity: 0.7;
    pointer-events: none;
    user-select: none;
}
.ac-rank-bar {
    display: inline-block;
    width: 70%;
    height: 11px;
    border-radius: 5px;
    vertical-align: middle;
    background: linear-gradient(90deg, rgba(59,130,246,0.5), rgba(139,92,246,0.42)); /* theme-guardrail-allow: decorative semi-transparent skeleton shimmer, reads on both themes (matches .teaser-bar) */
    filter: blur(var(--ac-lb, 4px));
}
.ac-rank-bar-city { width: 78%; max-width: 86px; }
.ac-rank-bar-num { width: 100%; max-width: 40px; }
.ac-rank-cta { margin-top: 0.95rem; }
@media (max-width: 760px) {
    .ac-rank-head { flex-direction: column; gap: 0.2rem; align-items: flex-start; }
}
@media (max-width: 560px) {
    /* Phones: drop the secondary City column (col 3) and release the 440px
       floor so the four ranking columns (#, University, the headline metric,
       Companies) fit the viewport — instead of scrolling the metric, which is
       what the table is ranked by, off the right edge. */
    .ovr-tbl.ac-rank-tbl { min-width: 0; }
    .ac-rank-tbl thead th:nth-child(3),
    .ac-rank-tbl tbody td:nth-child(3) { display: none; }
    .ac-rank-tbl thead th, .ac-rank-tbl tbody td { padding-left: 0.5rem; padding-right: 0.5rem; }
}

/* Top universities list inside academia panel */
.ac-unis-head {
    color: var(--text-light);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin: 1.1rem 0 0.55rem;
    padding-top: 0.95rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.ac-unis {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.ac-uni {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 0.55rem 0.75rem 0.6rem;
}
.ac-uni-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.ac-uni-flag {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", emoji, sans-serif;
    font-size: 0.95rem;
    line-height: 1;
}
.ac-uni-name {
    color: var(--white);
    font-family: var(--font-display, 'Source Sans 3', system-ui, sans-serif);
    font-size: 0.98rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dotted rgba(255,255,255,0.18);
}
.ac-uni-name:hover { border-bottom-color: var(--white); }
.ac-uni-sub {
    color: var(--text-lighter);
    font-size: 0.74rem;
}
.ac-uni-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    font-size: 0.74rem;
}
.ac-uni-pills-label {
    color: var(--text-lighter);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.64rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-right: 0.15rem;
}
.ac-uni-pill {
    color: var(--text-light);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 999px;
    padding: 0.16rem 0.55rem;
    line-height: 1.3;
    font-size: 0.74rem;
}
/* Blurred teaser rows at the end of the university list — the gated tail
   behind the Book-a-Demo CTA (same bars/blur as the ranking table's
   .ac-rank-locked rows; --ac-lb set per-row inline for a receding blur). */
.ac-uni-locked {
    opacity: 0.7;
    pointer-events: none;
    user-select: none;
}
.ac-uni-locked .ac-uni-head {
    margin-bottom: 0;
    align-items: center;
    flex-wrap: nowrap;
}
.ac-uni-bar-name { width: 34%; max-width: 250px; height: 13px; }
.ac-uni-bar-sub { width: 22%; max-width: 140px; height: 10px; }
.ac-unis-cta { margin-top: 0.95rem; }

/* ============================================================
   Recent VC — 2024 vs 2025 paired bars by stage
   ============================================================ */
.recent-vc { margin-top: 1rem; }
.rv-legend {
    color: var(--text-lighter);
    font-size: 0.72rem;
    display: flex; gap: 1.1rem;
    margin-bottom: 0.85rem;
}
.rv-legend > span { display: flex; align-items: center; gap: 0.35rem; }
.rv-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.rv-dot-prev { background: rgba(139,92,246,0.55); }
.rv-dot-curr { background: #F2A55E; }
.rv-rows { display: flex; flex-direction: column; gap: 0.6rem; }
.rv-row {
    display: grid;
    grid-template-columns: 130px 1fr 80px;
    gap: 0.85rem;
    align-items: center;
}
.rv-stage {
    color: var(--white);
    font-size: 0.85rem;
    font-weight: 500;
}
.rv-bars { display: flex; flex-direction: column; gap: 0.25rem; }
.rv-bar {
    height: 18px;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.rv-bar-fill {
    height: 100%;
    border-radius: 4px;
}
.rv-prev .rv-bar-fill { background: rgba(139,92,246,0.55); }
.rv-curr .rv-bar-fill { background: #F2A55E; }
.rv-val {
    position: absolute; top: 50%; right: 0.45rem;
    transform: translateY(-50%);
    color: var(--white);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.rv-yoy { color: var(--text-light); font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.rv-yoy-up { color: #34D399; }
.rv-yoy-down { color: #F87171; }
.rv-yoy-cell { text-align: right; }
@media (max-width: 720px) {
    .rv-row { grid-template-columns: 90px 1fr 60px; gap: 0.55rem; }
    .rv-stage { font-size: 0.78rem; }
    .rv-yoy { font-size: 0.7rem; }
}

/* Three-up "ecosystem signals" — autonomy + academia + recent VC */
.signals-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 0.5rem;
}
.signals-grid > .signal-card {
    background: transparent;
}
.signal-card {
    padding-top: 0.4rem;
}
.signal-card-head {
    color: var(--text-light);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}
.signal-card-sub {
    color: var(--text-lighter);
    font-size: 0.78rem;
    margin-bottom: 0.5rem;
    max-width: 56ch;
}

/* ============================================================
   Startup funnel — vertical taper from VC-backed startups → centacorns
   ============================================================ */
.funnel-chart {
    display: flex; flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.funnel-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.25rem;
    align-items: center;
}
.funnel-label { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.funnel-name {
    color: var(--white);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
}
.funnel-capital {
    color: var(--text-faint);
    font-size: 0.7rem;
    letter-spacing: 0.02em;
}
.funnel-bar-wrap {
    display: flex; align-items: center; gap: 0.85rem;
    min-width: 0;
}
.funnel-bar {
    height: 32px;
    border-radius: 5px;
    display: flex; align-items: center;
    padding: 0 0.85rem;
    color: var(--white);
    font-family: var(--font-display, 'Source Sans 3', system-ui, sans-serif);
    font-size: 0.95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset;
    flex-shrink: 0;
    min-width: 60px;
}
.funnel-conv {
    color: var(--text-lighter);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    white-space: nowrap;
}
@media (max-width: 720px) {
    .funnel-row { grid-template-columns: 130px 1fr; gap: 0.6rem; }
    .funnel-bar { height: 26px; font-size: 0.8125rem; padding: 0 0.6rem; }
    .funnel-name { font-size: 0.8125rem; }
}

/* ============================================================
   Time-series chart wrapper
   ============================================================ */
.ts-chart {
    width: 100%; height: auto;
    display: block;
    max-width: 760px;
    margin: 0.5rem auto 0;
}

/* Compact intro variant — sits inside the overview band, just below
   the hero-metric statline and sparkrow. Mirrors the overview rhythm
   without spinning up a full body-section wrapper. */
.intro-trend {
    margin-top: 1.75rem;
    padding: 1rem 1.1rem 1.1rem;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    background: rgba(255,255,255,0.015);
}
.intro-trend-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    margin-bottom: 0.15rem;
}
.intro-trend-eyebrow {
    color: var(--eyebrow);
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
    margin: 0;
}
.intro-trend-title {
    color: var(--white);
    font-family: 'Vidaloka', Georgia, serif;
    font-size: 1.45rem;
    line-height: 1.2;
    font-weight: 400;
    margin: 0.1rem 0 0;
}
.intro-trend-sub {
    color: var(--text-faint);
    font-size: 0.825rem;
    margin: 0.35rem 0 0;
    max-width: 760px;
}
.intro-trend .ts-chart { max-width: none; margin: 0.6rem 0 0; }

/* ts-chart hover columns + tooltip — exact values per year on hover. */
.ts-chart-wrap {
    position: relative;
    width: 100%;
    max-width: 760px;
    margin: 0.5rem auto 0;
}
.intro-trend .ts-chart-wrap { max-width: none; margin: 0.6rem 0 0; }
.ts-chart-wrap .ts-chart { margin: 0; max-width: none; }
.ts-chart .tsc-col { cursor: crosshair; }
.ts-chart .tsc-col .tsc-guide,
.ts-chart .tsc-col .tsc-dots { opacity: 0; transition: opacity 0.1s ease; pointer-events: none; }
.ts-chart .tsc-col.is-active .tsc-guide,
.ts-chart .tsc-col.is-active .tsc-dots { opacity: 1; }
.ts-chart-tip {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, calc(-100% - 10px));
    background: rgba(20, 22, 30, 0.96);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
    color: var(--white);
    font-size: 0.8125rem;
    line-height: 1.35;
    white-space: nowrap;
    box-shadow: 0 4px 18px rgba(0,0,0,0.45);
    transition: opacity 0.12s ease;
    font-variant-numeric: tabular-nums;
}
.ts-chart-tip.is-visible { opacity: 1; }
.ts-chart-tip .tst-year { font-weight: 600; font-size: 0.75rem; color: var(--text-light); margin-bottom: 0.2rem; }
.ts-chart-tip .tst-row { display: flex; align-items: center; gap: 0.5rem; }
.ts-chart-tip .tst-row + .tst-row { margin-top: 0.1rem; }
.ts-chart-tip .tst-swatch { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.ts-chart-tip .tst-label { color: var(--text-light); margin-right: 0.25rem; }
.ts-chart-tip .tst-val { font-weight: 600; margin-left: auto; }
.ts-chart-tip .tst-raw { color: var(--text-faint); font-size: 0.7rem; margin-top: 0.05rem; padding-left: 1rem; font-variant-numeric: tabular-nums; }

/* ============================================================
   Peer comparison — horizontal EV bars
   ============================================================ */
.peer-bars {
    display: flex; flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.5rem;
}
.peer-bar {
    display: grid;
    grid-template-columns: 180px 1fr 90px;
    gap: 0.85rem;
    align-items: center;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    transition: background 0.12s ease;
}
.peer-bar:hover { background: rgba(255,255,255,0.03); }
.peer-bar.is-self {
    background: rgba(242,165,94,0.10);
    box-shadow: 0 0 0 1px rgba(242,165,94,0.32);
}
.peer-bar .peer-name {
    color: var(--text-light);
    font-size: 0.875rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.peer-bar .peer-name a { color: inherit; text-decoration: none; }
.peer-bar .peer-name a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.peer-bar.is-self .peer-name { color: var(--white); font-weight: 600; }
.peer-bar-track {
    height: 14px;
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
    overflow: hidden;
}
.peer-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #3B82F6, #8B5CF6);
    border-radius: 4px;
}
.peer-bar.is-self .peer-bar-fill {
    background: linear-gradient(90deg, #F2A55E, #F7A340);
}
.peer-val {
    color: var(--white);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
    text-align: right;
}
@media (max-width: 720px) {
    .peer-bar { grid-template-columns: 110px 1fr 70px; gap: 0.5rem; padding: 0.35rem 0.4rem; }
    .peer-bar .peer-name { font-size: 0.8125rem; }
    .peer-val { font-size: 0.8125rem; }
}

/* ============================================================
   Scatter chart wrapper — interactive: hover tooltip, click-through
   ============================================================ */
.peer-scatter-wrap {
    position: relative;
    max-width: 600px;
    margin: 0.5rem auto 0;
}
.peer-scatter {
    width: 100%; height: auto;
    display: block;
}
.peer-scatter .ps-dot { cursor: pointer; }
.peer-scatter .ps-mark {
    transition: r 0.12s ease, stroke-width 0.12s ease, filter 0.12s ease;
}
.peer-scatter .ps-dot:hover .ps-mark,
.peer-scatter .ps-dot.is-active .ps-mark {
    stroke: #F2A55E;
    stroke-width: 2;
    filter: drop-shadow(0 0 6px rgba(242,165,94,0.55));
}
.peer-scatter .ps-dot:hover .ps-mark { r: 7; }
.peer-scatter .ps-dot.is-self:hover .ps-mark { r: 9; }
.peer-scatter .ps-label { pointer-events: none; }
/* Grid + axes: a subtle reference grid plus clearer L-shaped axes (left + bottom).
   Colours come from the shared, theme-aware chart tokens (defined for both light
   and dark in dealroom-theme) so they invert with the active theme. */
.peer-scatter .ps-grid {
    stroke: var(--chart-grid);
    stroke-width: 1;
    shape-rendering: crispEdges;
}
.peer-scatter .ps-axis {
    stroke: var(--chart-axis);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.peer-scatter-tip {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, calc(-100% - 10px));
    background: rgba(20, 22, 30, 0.96);
    border: 1px solid rgba(242,165,94,0.35);
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
    color: var(--white);
    font-size: 0.8125rem;
    line-height: 1.35;
    white-space: nowrap;
    box-shadow: 0 4px 18px rgba(0,0,0,0.45);
    transition: opacity 0.12s ease;
    max-width: 220px;
}
.peer-scatter-tip.is-visible { opacity: 1; }
.peer-scatter-tip .pst-name { font-weight: 600; }
.peer-scatter-tip .pst-meta { color: var(--text-light); font-size: 0.75rem; margin-top: 0.15rem; font-variant-numeric: tabular-nums; }
.peer-scatter-tip .pst-link { color: var(--orange); font-size: 0.7rem; margin-top: 0.25rem; }

/* ============================================================
   Comparison explorer — one card with a 3-way view toggle
   (EV size / EV growth / Growth × size). Layout + token colours
   only; the active-tab surface polish lives in the theme file so
   raw colours stay in the central token layer.
   ============================================================ */
.cmp-explorer { margin-top: 0.5rem; }
.cmp-toggle {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    border-radius: 999px;
    background: var(--navy-light);
    border: 1px solid var(--border-light);
    margin-bottom: 1.15rem;
    max-width: 100%;
    flex-wrap: wrap;
}
.cmp-tab {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-light);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.cmp-tab:hover { color: var(--white); }
.cmp-tab:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.cmp-tab[aria-selected="true"] {
    background: var(--navy-lighter);
    color: var(--white);
    font-weight: 600;
}
.cmp-views { position: relative; min-height: 260px; }
.cmp-view[hidden] { display: none; }
.cmp-view .peer-bars { margin-top: 0; }
.cmp-caption {
    margin: 1rem 0 0;
    color: var(--text-lighter);
    font-size: 0.8125rem;
    line-height: 1.5;
}
@media (max-width: 560px) {
    .cmp-tab { padding: 0.5rem 0.7rem; font-size: 0.78rem; }
    .cmp-views { min-height: 0; }
}

/* ============================================================
   Generic collapsible block — used to hide the All-18-sectors
   table behind an "Expand" button on sector pages.
   ============================================================ */
.collapsible { margin-top: 0.75rem; }
.collapsible-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--border-light);
    background: rgba(255,255,255,0.025);
    color: var(--text-light);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.collapsible-toggle:hover {
    background: rgba(255,255,255,0.06);
    border-color: var(--border-mid);
    color: var(--white);
}
.collapsible-toggle:focus-visible {
    outline: 2px solid var(--teal, #14B8A6);
    outline-offset: 2px;
}
.collapsible-toggle-icon {
    transition: transform 0.2s ease;
    color: var(--text-faint);
}
.collapsible.is-open .collapsible-toggle-icon { transform: rotate(180deg); }
.collapsible.is-open .collapsible-toggle { color: var(--white); }
.collapsible-body { margin-top: 0.85rem; }

/* ============================================================
   Geographic concentration — sub-block divider when the
   over-index panel is appended below the city/country hubs.
   ============================================================ */
.geo-subblock {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-light);
}
.geo-subblock > .section-eyebrow { margin-top: 0; }

/* ============================================================
   Overview comparison table
   ============================================================ */
.ovr-tbl-wrap {
    overflow-x: auto;
    margin-top: 0.5rem;
    -webkit-overflow-scrolling: touch;
}
.ovr-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    min-width: 640px;
}
.ovr-tbl thead th {
    color: var(--text-faint);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    padding: 0.6rem 0.65rem;
    border-bottom: 1px solid var(--border-light);
    text-align: left;
    white-space: nowrap;
}
.ovr-tbl tbody td {
    padding: 0.55rem 0.65rem;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
}
.ovr-tbl .num { text-align: right; }
.ovr-tbl tbody tr:hover { background: rgba(255,255,255,0.025); }
.ovr-tbl tbody tr.is-self {
    background: rgba(242,165,94,0.08);
    box-shadow: inset 3px 0 0 0 #F2A55E;
}
.ovr-tbl tbody tr.is-self td { color: var(--white); font-weight: 500; }
.ovr-tbl .ovr-name a { color: var(--text-light); text-decoration: none; }
.ovr-tbl .ovr-name a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.ovr-tbl tbody tr.is-self .ovr-name a { color: var(--white); }

/* ============================================================
   Top quantum companies table (renderQuantumTopCompaniesTable)
   Baked from a pure Next Gen API pull (quantum-top-companies.json).
   Theme-safe: dual-mode tokens + opacity only. The exit-status badges borrow
   the central --tag-* category hues (the same pair the homepage news chips
   use), which are defined for both modes and contrast-safe.
   ============================================================ */
.qtc-wrap {
    overflow-x: auto;
    margin-top: 0.9rem;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    /* Primary page-surface fill (--navy): a crisp card surface in light mode and
       a page-matched card in dark mode, bordered against the page — replaces the
       faint elevated --navy-light tint used before. The tinted header
       (--navy-lighter) + row hover keep the table's structure. */
    background: var(--navy);
    -webkit-overflow-scrolling: touch;
}
.qtc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    min-width: 760px;
}
.qtc-table thead th {
    color: var(--text-faint);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.68rem;
    padding: 0.5rem 0.85rem;
    border-bottom: 1px solid var(--border-light);
    text-align: left;
    white-space: nowrap;
    background: var(--navy-lighter);
}
.qtc-table th.num, .qtc-table td.num { text-align: right; }
.qtc-table tbody td {
    padding: 0.22rem 0.85rem;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
    line-height: 1.2;
}
.qtc-table tbody tr:last-child td { border-bottom: 0; }
.qtc-table tbody tr:hover { background: var(--navy-lighter); }
.qtc-rank { color: var(--text-faint); width: 1%; white-space: nowrap; }

/* Company cell — logo tile + name + HQ flag */
.qtc-co { max-width: 340px; }
.qtc-co-link { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; color: inherit; }
.qtc-logo {
    width: 24px; height: 24px;
    border-radius: 6px;
    background: var(--logo-tile-bg);
    box-shadow: inset 0 0 0 1px var(--logo-tile-border);
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
}
.qtc-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.qtc-logo > span { display: none; color: var(--text-light); font-weight: 600; font-size: 0.78rem; }
.qtc-logo.is-fallback img { display: none; }
.qtc-logo.is-fallback > span { display: block; }
.qtc-co-text { display: flex; flex-direction: column; min-width: 0; }
.qtc-co-name {
    font-family: var(--font-display, 'Source Sans 3', system-ui, sans-serif);
    font-weight: 600;
    font-size: 1rem;
    color: var(--white);
    line-height: 1.2;
}
.qtc-hq { font-size: 0.8rem; }
.qtc-co-link:hover .qtc-co-name { text-decoration: underline; text-underline-offset: 2px; }

.qtc-flags { font-size: 1rem; letter-spacing: 0.05em; white-space: nowrap; }
.qtc-none { color: var(--text-faint); }

/* Exit-status badge */
.qtc-badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.16rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}
.qtc-badge-yr { font-weight: 500; opacity: 0.75; }
.qtc-badge.is-private { color: var(--text-faint); }
.qtc-badge.is-spac { background: rgba(var(--tag-acquisition), 0.16); color: rgb(var(--tag-acquisition)); } /* theme-guardrail-allow: exit-status category hue from the central --tag-acquisition pair (dual-theme, contrast-safe) */
.qtc-badge.is-ipo { background: rgba(var(--tag-fundraise), 0.16); color: rgb(var(--tag-fundraise)); } /* theme-guardrail-allow: exit-status category hue from the central --tag-fundraise pair (dual-theme, contrast-safe) */
.qtc-badge.is-acquired { background: rgba(var(--tag-launch), 0.16); color: rgb(var(--tag-launch)); } /* theme-guardrail-allow: exit-status category hue from the central --tag-launch pair (dual-theme, contrast-safe) */

/* Revenue year stamp */
.qtc-yr { color: var(--text-faint); font-size: 0.72rem; }
.qtc-yr.is-est { font-style: italic; }

/* Valuation cell — same type treatment as the revenue figure (not bold, not a
   bigger/display font); the proportional bar is what marks it as the ranked
   metric. Kept in the primary ink colour so the sort key stays the most legible. */
.qtc-val { white-space: nowrap; }
.qtc-val-num { color: var(--white); }
.qtc-val-bar {
    display: block;
    height: 3px;
    margin-top: 2px;
    margin-left: auto;
    border-radius: 2px;
    background: var(--eyebrow);
    opacity: 0.55;
    min-width: 8px;
}
.qtc-foot {
    color: var(--text-faint);
    font-size: 0.74rem;
    margin-top: 0.7rem;
    line-height: 1.5;
}
.qtc-foot a { color: var(--eyebrow); text-decoration: none; }
.qtc-foot a:hover { text-decoration: underline; }
@media (max-width: 640px) {
    .qtc-table { font-size: 0.86rem; min-width: 0; }
    /* Phones: the 6-column table can't fit, so collapse to the essential
       ranking columns (#, Company, Status, Valuation). Founder-origin flags
       and the (mostly-empty) revenue column drop off so the headline metric —
       Valuation — stays on screen instead of scrolling out of view. Full data
       remains on the linked Dealroom list. */
    .qtc-table thead th.qtc-origins, .qtc-table tbody td.qtc-origins,
    .qtc-table thead th.qtc-rev, .qtc-table tbody td.qtc-rev { display: none; }
    .qtc-table thead th, .qtc-table tbody td { padding-left: 0.5rem; padding-right: 0.5rem; }
}
@media (max-width: 480px) {
    /* Phones: also drop Status. Valuation is the rightmost column, so it is the
       first to be clipped by the scroll wrap on narrow viewports; with only
       #, Company and Valuation the table fits every phone width and the
       headline metric is always fully readable. */
    .qtc-table thead th.qtc-exit, .qtc-table tbody td.qtc-exit { display: none; }
}

/* ============================================================
   Over-index panel — used both ways:
   - country page: sectors where this country over-/under-indexes
   - sector page: countries that over-/under-index in this sector
   ============================================================ */
.oi-panel {
    display: flex; flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.oi-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto auto;
    column-gap: 1rem;
    row-gap: 0.15rem;
    align-items: center;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.04);
}
.oi-row:hover { background: rgba(255,255,255,0.04); border-color: var(--border-light); }
.oi-label {
    display: flex; align-items: center; gap: 0.55rem;
    grid-row: 1;
    min-width: 0;
}
.oi-emoji {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}
.oi-name {
    color: var(--white);
    font-size: 0.9375rem;
    font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oi-name a { color: inherit; text-decoration: none; }
.oi-name a:hover { text-decoration: underline; text-underline-offset: 2px; }
.oi-bar-wrap {
    grid-row: 1;
    display: flex; align-items: center; gap: 0.85rem;
    min-width: 0;
}
.oi-bar-track {
    flex: 1;
    height: 12px;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
    overflow: hidden;
    min-width: 0;
}
.oi-bar-fill {
    height: 100%;
    border-radius: 4px;
}
.oi-multiplier {
    color: var(--white);
    font-weight: 600;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    min-width: 4em;
    text-align: right;
}
.oi-row[data-direction="under"] .oi-multiplier { color: var(--text-lighter); }
.oi-meta {
    grid-row: 2;
    grid-column: 1 / -1;
    color: var(--text-faint);
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    padding-left: calc(1rem + 16px);
}
@media (max-width: 720px) {
    .oi-row { grid-template-columns: 1fr; row-gap: 0.35rem; }
    .oi-bar-wrap { grid-row: auto; }
    .oi-meta { padding-left: 0; }
}

/* ============================================================
   Hottest sub-sectors panel — compact responsive grid
   ============================================================ */
.hot-panel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.55rem;
    margin-top: 0.5rem;
}
.hot-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 0.65rem;
    align-items: center;
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    background: rgba(0,0,0,0.22);
    border: 1px solid var(--border-light);
    color: inherit;
    text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
a.hot-row:hover {
    background: rgba(255,255,255,0.04);
    border-color: var(--border-mid);
    transform: translateY(-1px);
}
.hot-rank {
    font-family: var(--font-display, 'Source Sans 3', system-ui, sans-serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--orange-accent, #F7A340);
    text-align: center;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.hot-body { min-width: 0; }
.hot-name {
    font-family: var(--font-display, 'Source Sans 3', system-ui, sans-serif);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--white);
    line-height: 1.25;
    margin-bottom: 0.4rem;
}
.hot-metrics {
    display: flex; align-items: baseline; flex-wrap: wrap;
    gap: 0.35rem 0.55rem;
    margin-bottom: 0.5rem;
}
.hot-meta {
    color: var(--text-lighter);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}
.hot-chip {
    display: inline-flex; align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    border: 1px solid;
}
.hot-chip.is-up {
    color: #6EE7B7;
    background: rgba(16,185,129,0.10);
    border-color: rgba(16,185,129,0.32);
}
.hot-chip.is-down {
    color: #FCA5A5;
    background: rgba(239,68,68,0.10);
    border-color: rgba(239,68,68,0.32);
}
.hot-bar-track {
    height: 3px;
    background: rgba(255,255,255,0.05);
    border-radius: 999px;
    overflow: hidden;
}
.hot-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #F2A55E, #F7A340, #F87171);
    border-radius: 999px;
}
.hot-arrow {
    color: var(--text-faint);
    font-size: 1.1rem;
    font-weight: 300;
    transition: transform 0.12s ease, color 0.12s ease;
}
a.hot-row:hover .hot-arrow {
    color: var(--white);
    transform: translateX(3px);
}
.hot-foot {
    margin-top: 1rem;
    color: var(--text-faint);
    font-size: 0.75rem;
    line-height: 1.5;
}

/* ============================================================
   VC investment — live Next Gen API widgets on continent profiles.
   1) .vc-flows-*   quarterly stacked-by-round-size column chart
   2) .vc-leaders-* country bars w/ year picker + biggest/growing toggle
   Dark-only, matching the rest of the entity profile.
   ============================================================ */
.vc-loading,
.vc-empty {
    color: var(--text-lighter);
    font-size: 0.875rem;
    padding: 2.5rem 0.5rem;
    text-align: center;
}
.vc-empty a,
.vc-loading a { color: var(--blue); text-decoration: none; }
.vc-empty a:hover { text-decoration: underline; }

/* --- 1. Quarterly flows chart --- */
.vc-flows-card {
    position: relative;
    max-width: 100%;
    overflow-x: clip;
    background: rgba(0,0,0,0.22); /* theme-guardrail-allow: dark-only card surface (matches .origin-col) */
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 1.4rem 1.5rem 1.15rem;
}
/* Hover-reveal PNG download button (mirrors the chart-studio .dl-png-btn). */
.vc-png-btn {
    position: absolute;
    top: 14px; right: 16px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px;
    font-family: inherit; font-size: 0.66rem; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-light);
    background: rgba(255,255,255,0.06); /* theme-guardrail-allow: dark control surface */
    border: 1px solid rgba(255,255,255,0.14); /* theme-guardrail-allow: dark control border */
    border-radius: 999px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.18s ease, background 0.18s ease, color 0.18s ease;
    z-index: 6;
}
.vc-flows-card:hover .vc-png-btn,
.vc-leaders-card:hover .vc-png-btn,
.vc-png-btn:focus-visible { opacity: 1; }
.vc-png-btn:hover { background: rgba(255,255,255,0.14); color: var(--white); } /* theme-guardrail-allow: dark hover tint */
.vc-png-btn[disabled] { opacity: 1; cursor: progress; }
.vc-png-btn svg { width: 12px; height: 12px; }
@media (hover: none) { .vc-png-btn { opacity: 1; } }
.vc-flows-controls {
    /* Flow the control clusters horizontally and let them wrap, instead of
       forcing one cluster per row. Mirrors the VC-dashboard #monthly-flows
       toolbar (.chart-controls): a generous column gap separates the clusters
       (Stack by … / Metric … / etc.) so it stays clear which pills belong to
       which axis, a tighter row gap only bites when a line genuinely wraps.
       Cuts the control block from ~7 stacked rows to ~3 packed lines. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    margin-bottom: 0.85rem;
    padding-right: 72px; /* clear the hover PNG button */
}
.vc-control-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.42rem;
    flex: 0 1 auto; /* each cluster takes its natural width, then flows */
    min-height: 34px;
}
.vc-location-row {
    /* The location/scope picker leads on its own line — it selects *what* data
       the chart shows, distinct from the *how-to-view* pills below it. */
    flex-basis: 100%;
    margin-bottom: 0.5rem;
}
.vc-control-label {
    flex: 0 0 auto;
    color: var(--text-faint);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.vc-control-pill {
    appearance: none;
    border: 1px solid rgba(255,255,255,0.11); /* theme-guardrail-allow: dark control border */
    border-radius: 999px;
    background: rgba(255,255,255,0.04); /* theme-guardrail-allow: dark control surface */
    color: var(--text-light);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.52rem 0.72rem;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.vc-control-pill:hover {
    background: rgba(255,255,255,0.09); /* theme-guardrail-allow: dark control hover */
    color: var(--white);
}
.vc-control-pill.is-on {
    background: rgba(255,255,255,0.16); /* theme-guardrail-allow: dark selected control */
    border-color: rgba(255,255,255,0.28); /* theme-guardrail-allow: dark selected border */
    color: var(--white);
}
.vc-control-pill:focus-visible {
    outline: 2px solid rgba(96,165,250,0.8); /* theme-guardrail-allow: dark focus ring */
    outline-offset: 2px;
}

/* The Ownership pill joins the Group row only on the Combined EV metric
   (js/emea-ev-charts.js). A control that appears mid-interaction is easy to
   miss, so it pulses a soft ring twice on arrival and then sits still. Kept in
   step with the same rules in css/ev-charts.css, which the power-law page uses. */
@keyframes vcPillArrive {
    0%   { box-shadow: 0 0 0 0 rgba(96,165,250,0.55); } /* theme-guardrail-allow: transient arrival ring, matches the control focus ring */
    45%  { box-shadow: 0 0 0 5px rgba(96,165,250,0); }  /* theme-guardrail-allow: transient arrival ring, matches the control focus ring */
    55%  { box-shadow: 0 0 0 0 rgba(96,165,250,0.45); } /* theme-guardrail-allow: transient arrival ring, matches the control focus ring */
    100% { box-shadow: 0 0 0 5px rgba(96,165,250,0); }  /* theme-guardrail-allow: transient arrival ring, matches the control focus ring */
}
.vc-control-pill.is-newly-available {
    animation: vcPillArrive 1.4s ease-out 1;
    border-color: rgba(96,165,250,0.55); /* theme-guardrail-allow: transient arrival ring, matches the control focus ring */
}
@media (prefers-reduced-motion: reduce) {
    .vc-control-pill.is-newly-available { animation: none; }
}
.vc-location-select {
    appearance: none;
    min-width: 150px;
    max-width: min(260px, 100%);
    height: 34px;
    padding: 0 1.9rem 0 0.85rem;
    color: var(--white);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    /* Token border (flips per theme, like .vc-year-select) so the outline is
       visible on the dark card AND the light card; the light-mode surface +
       dark chevron are swapped in dealroom-theme-*.css. */
    background: rgba(255,255,255,0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 0.7rem center; /* theme-guardrail-allow: dark select surface + chevron */
    border: 1px solid var(--border-light);
    border-radius: 999px;
    cursor: pointer;
}
.vc-location-select:focus-visible {
    outline: 2px solid rgba(96,165,250,0.8); /* theme-guardrail-allow: dark focus ring */
    outline-offset: 2px;
}
.vc-location-select option {
    color: #0d1322; /* theme-guardrail-allow: native select option text */
}
.vc-years-row {
    gap: 0.6rem;
    /* Keep label + slider + readout together as one rigid cluster: the slider
       sets min-width:0, so under flow pressure a wrapping row would otherwise
       fragment (label / slider / readout each on their own line). Don't shrink,
       don't wrap — if it doesn't fit, the whole cluster drops to the next line.
       Mobile re-enables wrap so the slider can stack full-width under the label. */
    flex: 0 0 auto;
    flex-wrap: nowrap;
}
.vc-year-range {
    position: relative;
    /* Definite width: the track + range inputs are absolutely positioned, so
       this element has no intrinsic size. Inside the rigid, content-sized years
       cluster it would otherwise collapse to 0. Mobile widens it to 100%. */
    flex: 0 0 240px;
    min-width: 0;
    height: 34px;
}
.vc-year-range-track {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 15px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,0.1); /* theme-guardrail-allow: dark range track */
}
.vc-year-range-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #60A5FA, #34D399); /* theme-guardrail-allow: functional chart range fill */
}
.vc-year-input {
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
    appearance: none;
    background: transparent;
    pointer-events: none;
}
.vc-year-input::-webkit-slider-runnable-track {
    height: 34px;
    background: transparent;
}
.vc-year-input::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    margin-top: 9px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid #60A5FA; /* theme-guardrail-allow: functional slider handle */
    box-shadow: 0 2px 8px rgba(0,0,0,0.32); /* theme-guardrail-allow: dark handle shadow */
    pointer-events: auto;
    cursor: pointer;
}
.vc-year-input::-moz-range-track {
    height: 34px;
    background: transparent;
}
.vc-year-input::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid #60A5FA; /* theme-guardrail-allow: functional slider handle */
    box-shadow: 0 2px 8px rgba(0,0,0,0.32); /* theme-guardrail-allow: dark handle shadow */
    pointer-events: auto;
    cursor: pointer;
}
.vc-year-readout {
    min-width: 78px;
    color: var(--text-light);
    font-size: 0.78rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.vc-flow-summary {
    color: var(--text-lighter);
    font-size: 0.76rem;
    line-height: 1.45;
    margin: 0.15rem 72px 1rem 0;
    overflow-wrap: anywhere;
}
.vc-flows-plot {
    position: relative;
    height: clamp(260px, 34vw, 360px);
}
.vc-flow-chart {
    position: relative;
    height: 100%;
    min-height: 238px;
}
.vc-flows-grid {
    position: absolute;
    left: 64px; right: 0; top: 0; bottom: 34px;
    pointer-events: none;
}
.vc-grid-line {
    position: absolute;
    left: 0; right: 0; height: 0;
    border-top: 1px solid rgba(255,255,255,0.06); /* theme-guardrail-allow: chart gridline (--chart-grid unavailable on entity pages) */
}
.vc-grid-label {
    position: absolute;
    left: -64px;
    transform: translateY(-50%);
    width: 58px;
    text-align: right;
    color: var(--text-faint);
    font-size: 0.76rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.vc-flows-cols {
    position: absolute;
    left: 64px; right: 0; top: 0; bottom: 34px;
    display: flex;
    align-items: flex-end;
    gap: clamp(1px, 0.5vw, 4px);
}
.vc-col {
    position: relative;
    flex: 1 1 0;
    height: 100%;
    cursor: crosshair;
}
.vc-col-stack {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column-reverse;
    border-radius: 3px 3px 0 0;
    overflow: hidden;
    transition: filter 0.12s ease;
}
.vc-seg { display: block; width: 100%; flex: 0 0 auto; }
.vc-col.is-active .vc-col-stack { filter: brightness(1.18); }
.vc-flows-xaxis {
    position: absolute;
    left: 64px; right: 0; bottom: 0;
    height: 28px;
    pointer-events: none;
}
.vc-x-label {
    position: absolute;
    top: 6px;
    transform: translateX(-50%);
    white-space: nowrap;
    color: var(--text-faint);
    font-size: 0.76rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.vc-flows-plot.is-split {
    height: auto;
}
.vc-flow-panels {
    display: grid;
    /* Column count set per-render via --vc-panel-count (3 split / 5 detailed);
       the media queries below still override to fewer columns when narrow. */
    grid-template-columns: repeat(var(--vc-panel-count, 3), minmax(0, 1fr));
    gap: 1rem;
}
/* Detailed = five bands. Five panels in one row read as spikes — wrap at
   three per row (2 rows) so each panel is nearly twice as wide. */
.vc-flows-plot.is-detailed .vc-flow-panels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.vc-flows-plot.is-detailed .vc-flow-panel-title span { font-size: 0.85rem; }
.vc-flows-plot.is-detailed .vc-flow-panel-title strong { font-size: 0.85rem; }
.vc-flows-plot.is-detailed .vc-flow-panel-title em { font-size: 0.72rem; }
@media (min-width: 921px) and (max-width: 1180px) {
    .vc-flows-plot.is-detailed .vc-flow-panels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.vc-flow-panel {
    min-width: 0;
}
.vc-flow-panel-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.15rem 0.6rem;
    margin-bottom: 0.6rem;
}
.vc-flow-panel-title span {
    color: var(--white);
    font-size: 0.78rem;
    font-weight: 800;
}
.vc-flow-panel-title em {
    grid-column: 1;
    color: var(--text-faint);
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 700;
}
.vc-flow-panel-title strong {
    grid-column: 2;
    grid-row: 1 / span 2;
    color: var(--text-light);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}
.vc-flow-panel-plot {
    position: relative;
    height: clamp(230px, 26vw, 310px);
}
.vc-flows-tip {
    position: absolute;
    bottom: calc(100% - 4px);
    min-width: 168px;
    background: #0d1322; /* theme-guardrail-allow: dark tooltip surface (matches .ts-chart-tip) */
    border: 1px solid var(--border-light);
    border-radius: 9px;
    padding: 0.55rem 0.65rem;
    box-shadow: 0 12px 30px rgba(0,0,0,0.5); /* theme-guardrail-allow: dark elevation shadow */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
    z-index: 5;
}
.vc-flows-tip.is-visible { opacity: 1; }
.vc-tip-head {
    display: flex; align-items: baseline; gap: 0.5rem;
    font-weight: 600; font-size: 0.72rem; color: var(--white);
    margin-bottom: 0.4rem;
}
.vc-tip-total { margin-left: auto; color: var(--white); font-variant-numeric: tabular-nums; }
.vc-tip-row {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.7rem; color: var(--text-light);
}
.vc-tip-row + .vc-tip-row { margin-top: 0.15rem; }
.vc-tip-row i { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.vc-tip-label { color: var(--text-light); }
.vc-tip-val { margin-left: auto; color: var(--white); font-weight: 600; font-variant-numeric: tabular-nums; }
.vc-flows-legend {
    display: flex; flex-wrap: wrap;
    gap: 0.45rem 0.9rem;
    margin-top: 1.25rem;
}
.vc-legend-item {
    display: inline-flex; align-items: center; gap: 0.4rem;
    color: var(--text-lighter);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}
.vc-legend-item i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
@media (max-width: 920px) {
    .vc-flow-panels {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .vc-flows-card {
        padding: 1.1rem 1rem 1rem;
    }
    .vc-flows-controls {
        padding-right: 0;
        padding-top: 2.15rem;
    }
    .vc-control-row {
        /* One cluster per line on phones — no side-by-side packing. */
        flex-basis: 100%;
    }
    .vc-control-label {
        flex-basis: 100%;
    }
    .vc-control-pill {
        font-size: 0.7rem;
        padding: 0.48rem 0.62rem;
    }
    .vc-years-row {
        flex-wrap: wrap; /* let the slider stack full-width under its label */
    }
    .vc-year-range {
        width: 100%;
        flex-basis: 100%;
        max-width: none;
    }
    .vc-flow-summary {
        margin-right: 0;
    }
    .vc-flows-grid,
    .vc-flows-cols,
    .vc-flows-xaxis {
        left: 54px;
    }
    .vc-grid-label {
        left: -54px;
        width: 48px;
        font-size: 0.7rem;
    }
    .vc-x-label {
        font-size: 0.7rem;
    }
}

/* --- 2. Country leaders bars --- */
.vc-leaders-card {
    position: relative;
    background: rgba(0,0,0,0.22); /* theme-guardrail-allow: dark-only card surface (matches .origin-col) */
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 1.25rem 1.4rem 1.35rem;
}
.vc-leaders-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.75rem 1.1rem;
    margin-bottom: 1.1rem;
    padding-right: 72px; /* clear the hover PNG button */
}
.vc-toggle {
    display: inline-flex;
    gap: 0.2rem;
    padding: 0.2rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.04); /* theme-guardrail-allow: dark control surface (matches .ac-treemap-controls) */
    border: 1px solid rgba(255,255,255,0.07); /* theme-guardrail-allow: dark control border */
}
.vc-toggle-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-lighter);
    font: inherit;
    font-size: 0.78rem;
    padding: 0.34rem 0.85rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease;
}
.vc-toggle-btn:hover { color: var(--white); }
.vc-toggle-btn.is-on {
    background: color-mix(in srgb, var(--blue) 22%, transparent); /* theme-guardrail-allow: --blue tint (color-mix flagged as advanced; matches .ac-treemap checked state) */
    color: var(--white);
    font-weight: 600;
}
.vc-year {
    display: inline-flex; align-items: center; gap: 0.45rem;
    color: var(--text-lighter);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.vc-year-select {
    appearance: none;
    background: rgba(255,255,255,0.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 0.55rem center; /* theme-guardrail-allow: dark select surface + inline chevron glyph */
    border: 1px solid var(--border-light);
    border-radius: 8px;
    color: var(--white);
    font: inherit;
    font-size: 0.8rem;
    padding: 0.34rem 1.9rem 0.34rem 0.7rem;
    cursor: pointer;
}
.vc-year-select:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.vc-leaders-bars {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.vc-bar {
    display: grid;
    grid-template-columns: 1.4rem 150px 1fr 76px;
    align-items: center;
    gap: 0.75rem;
    padding: 0.32rem 0.4rem;
    border-radius: 8px;
    transition: background 0.12s ease;
}
.vc-bar:hover { background: rgba(255,255,255,0.03); } /* theme-guardrail-allow: dark hover tint (matches .peer-bar:hover) */
.vc-bar-rank {
    color: var(--text-faint);
    font-size: 0.72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.vc-bar-name {
    color: var(--text-light);
    font-size: 0.875rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vc-bar-name a { color: inherit; text-decoration: none; }
.vc-bar-name a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.vc-bar-track {
    height: 14px;
    background: rgba(255,255,255,0.04); /* theme-guardrail-allow: dark track surface (matches .peer-bar-track) */
    border-radius: 4px;
    overflow: hidden;
}
.vc-bar-fill {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--blue), var(--purple));
}
.vc-bar.is-growing.is-up .vc-bar-fill { background: linear-gradient(90deg, #34D399, #5DD9AA); } /* theme-guardrail-allow: data-viz positive */
.vc-bar.is-growing.is-down .vc-bar-fill { background: linear-gradient(90deg, var(--orange), #F87171); } /* theme-guardrail-allow: data-viz negative */
.vc-bar-val {
    color: var(--white);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
    text-align: right;
}
.vc-bar.is-growing.is-down .vc-bar-val { color: #F8B4B4; } /* theme-guardrail-allow: data-viz negative text */
.vc-leaders-note {
    color: var(--text-faint);
    font-size: 0.72rem;
    line-height: 1.5;
    margin: 1rem 0 0;
}
@media (max-width: 720px) {
    .vc-flows-card, .vc-leaders-card { padding: 1.1rem 1rem; }
    .vc-bar { grid-template-columns: 1.2rem 96px 1fr 62px; gap: 0.5rem; }
    .vc-bar-name { font-size: 0.8125rem; }
    .vc-bar-val { font-size: 0.8125rem; }
    .vc-flows-legend { gap: 0.35rem 0.8rem; }
    .vc-legend-item { font-size: 0.68rem; }
}

/* --- 2b. VC investment by destination (cross-cutting sector pages) ---
   Replicates the VC dashboard's "By location" card: a gridded horizontal bar
   chart plus year×location heat / rank-heat maps, scoped server-side to the
   sector tag. Reuses the .vc-flows-card surface + .vc-control-* pills; every
   colour is a flipping token (var(--white)/--text-*/--border-light) or a JS-set
   data-viz fill, so it works in light AND dark with no per-selector override.
   Driven by js/sector-vc-destination.js. */
.svd-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-right: 72px; /* clear the hover PNG button */
}
.svd-title {
    margin: 0;
    font-family: var(--font-display, inherit);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--white);
}
.svd-sub {
    margin-top: 0.22rem;
    font-size: 0.78rem;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}
.svd-meta {
    flex: 0 0 auto;
    font-size: 0.8rem;
    color: var(--text-light);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.svd-meta strong { color: var(--white); font-weight: 700; }
.svd-controls { margin-bottom: 1rem; }
.svd-plotwrap { position: relative; min-height: 440px; transition: min-height 0.34s cubic-bezier(0.4, 0, 0.2, 1); }
.svd-plotwrap > .vc-loading,
.svd-plotwrap > .vc-empty { min-height: 440px; display: flex; align-items: center; justify-content: center; }

/* --- bar chart (inline HTML/CSS, mirrors the dashboard's fill-the-height bars) --- */
.svd-plot {
    --svd-label-w: 132px;
    position: relative;
    height: 440px; /* fallback; JS shrink-wraps via inline height to the row count */
    display: flex;
    flex-direction: column;
    padding-bottom: 1.7rem; /* room for the x-axis tick labels */
    transition: height 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}
.svd-grid {
    position: absolute;
    top: 0;
    bottom: 1.7rem;
    left: calc(var(--svd-label-w) + 0.6rem);
    right: 0;
    pointer-events: none;
}
.svd-gridline {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--border-light);
}
.svd-gridline:first-child { border-left-color: transparent; } /* bars start at the $0 baseline */
.svd-tick {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateX(-50%);
    padding-top: 0.45rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-faint);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.svd-gridline:first-child .svd-tick { transform: translateX(0); }
.svd-gridline:last-child .svd-tick { transform: translateX(-100%); }
.svd-rows { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.svd-row {
    flex: 1 1 0;
    display: grid;
    grid-template-columns: var(--svd-label-w) 1fr;
    align-items: center;
    gap: 0.6rem;
    min-height: 0;
}
.svd-row-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--white);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.svd-row-label a { color: inherit; text-decoration: none; }
.svd-row-label a:hover { text-decoration: underline; text-underline-offset: 2px; }
.svd-row-plot { position: relative; height: 100%; }
.svd-bar {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: min(76%, 26px);
    min-width: 2px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    transition: width 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}
.svd-row:hover .svd-bar { filter: brightness(1.07); }
.svd-val {
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1; /* crisp vertical centring against the bar */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.svd-val.in { color: #fff; padding-right: 7px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } /* theme-guardrail-allow: label sits on a saturated data-viz bar */
.svd-val.out { position: absolute; top: 50%; transform: translateY(-50%); color: var(--text-light); }

/* --- pie / donut: share of the metric across places (inline SVG, no chart lib) ---
   Slice fills are JS-set data-viz colours; the thin separator between slices is
   var(--navy) so it flips to the card surface (light tile in light mode, dark in
   dark mode), matching the .vc-flows-card background in either theme. */
.svd-pie {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    min-height: 360px;
    padding: 0.5rem 0 1rem;
}
.svd-pie-chart { position: relative; flex: 0 0 auto; width: 248px; height: 248px; }
.svd-pie-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.svd-pie-svg path,
.svd-pie-svg circle {
    stroke: var(--navy);
    stroke-width: 2.5;
    stroke-linejoin: round;
    transition: opacity 0.16s ease;
}
.svd-pie-svg path:hover { opacity: 0.82; }
.svd-pie-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}
.svd-pie-total {
    font-family: var(--font-display, inherit);
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--white);
    font-variant-numeric: tabular-nums;
}
.svd-pie-total-sub { margin-top: 0.32rem; font-size: 0.72rem; color: var(--text-faint); }
.svd-pie-legend {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.svd-pie-leg {
    display: grid;
    grid-template-columns: 0.7rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.34rem 0.2rem;
    font-size: 0.8rem;
}
.svd-pie-leg + .svd-pie-leg { border-top: 1px solid var(--border-light); }
.svd-pie-dot { width: 0.7rem; height: 0.7rem; border-radius: 3px; flex: 0 0 auto; }
.svd-pie-name {
    color: var(--white);
    font-weight: 600;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.svd-pie-name a { color: inherit; text-decoration: none; }
.svd-pie-name a:hover { text-decoration: underline; text-underline-offset: 2px; }
.svd-pie-val { color: var(--white); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.svd-pie-pct { color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 2.7rem; text-align: right; }

/* --- heat map / rank heat map (year × location grid) --- */
.svd-heat {
    height: 440px;
    display: grid;
    grid-template-columns: minmax(118px, 1.1fr) repeat(var(--heat-cols, 10), minmax(54px, 1fr));
    grid-template-rows: repeat(var(--heat-rows, 16), minmax(0, 1fr));
    gap: 2px;
    align-content: stretch;
    overflow-x: auto;
    overflow-y: hidden;
}
.svd-heat-cell {
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.24rem;
    border-radius: 5px;
    color: var(--white); /* token flips per theme — strong-contrast text over the data-viz cell fills */
    font: 700 0.74rem var(--font-sans, 'DM Sans', sans-serif);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background: rgba(120, 140, 170, 0.08); /* theme-guardrail-allow: neutral data-viz cell base */
    box-shadow: inset 0 0 0 1px var(--border-light);
}
.svd-heat-cell.header,
.svd-heat-cell.row-label { color: var(--text-light); background: transparent; box-shadow: none; }
.svd-heat-cell.header { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em; }
.svd-heat-cell.row-label { justify-content: flex-end; padding-right: 0.6rem; color: var(--white); text-align: right; white-space: nowrap; }
.svd-heat-cell.empty { color: var(--text-faint); background: rgba(120, 140, 170, 0.06); } /* theme-guardrail-allow: neutral empty cell */

/* --- live-source line --- */
.svd-source { display: flex; align-items: center; gap: 0.45rem; margin-top: 1rem; font-size: 0.72rem; color: var(--text-faint); }
.svd-dot { width: 7px; height: 7px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18); } /* theme-guardrail-allow: data-viz "live" status dot */

@media (max-width: 720px) {
    .svd-head { flex-direction: column; gap: 0.35rem; padding-right: 58px; }
    .svd-meta { text-align: left; }
    .svd-plot { --svd-label-w: 100px; }
    .svd-heat { height: 380px; grid-template-columns: minmax(94px, 1fr) repeat(var(--heat-cols, 10), minmax(46px, 1fr)); }
    .svd-pie { flex-direction: column; gap: 0.75rem; align-items: stretch; }
    .svd-pie-chart { align-self: center; width: 208px; height: 208px; }
    .svd-pie-total { font-size: 1.4rem; }
}

/* --- 3. Sector share-of-VC line chart (cross-cutting sector pages) ---
   Reuses the .vc-flows-card surface + .vc-flows-tip tooltip; adds the
   location-chip controls and the SVG line-chart text styles. */
.vc-share-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1.1rem;
    padding-right: 72px; /* clear the hover PNG button */
}
.vc-share-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.vc-share-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.6rem 0.28rem 0.55rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.05); /* theme-guardrail-allow: dark control surface (matches .vc-toggle) */
    border: 1px solid rgba(255,255,255,0.09); /* theme-guardrail-allow: dark control border */
    color: var(--text-light);
    font-size: 0.76rem;
    line-height: 1;
    white-space: nowrap;
}
.vc-share-chip i {
    width: 9px; height: 9px;
    border-radius: 3px;
    background: var(--chip-color, var(--blue));
    flex: 0 0 auto;
}
.vc-share-chip.is-loading i {
    animation: vc-share-pulse 0.9s ease-in-out infinite alternate;
}
.vc-share-chip.is-error {
    border-color: rgba(248,113,113,0.45); /* theme-guardrail-allow: semantic error border */
}
.vc-share-chip-status,
.vc-share-chip-retry {
    border-left: 1px solid rgba(255,255,255,0.12); /* theme-guardrail-allow: dark chip divider */
    color: var(--text-faint);
    font-size: 0.68rem;
    line-height: 1;
    padding-left: 0.4rem;
}
.vc-share-chip-retry {
    appearance: none;
    background: transparent;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    cursor: pointer;
    font: inherit;
    font-size: 0.68rem;
}
.vc-share-chip-retry:hover {
    color: var(--text-light);
}
@keyframes vc-share-pulse {
    from { opacity: 0.35; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}
.vc-share-chip-x {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-faint);
    font: inherit;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0 0 0 0.1rem;
    cursor: pointer;
    transition: color 0.12s ease;
}
.vc-share-chip-x:hover { color: var(--white); }
.vc-share-add {
    display: inline-flex;
    align-items: center;
    position: relative;
}
.vc-share-add-label {
    color: var(--text-lighter);
    font-size: 0.76rem;
    pointer-events: none;
    position: absolute;
    left: 0.7rem;
    z-index: 1;
}
.vc-share-select {
    appearance: none;
    background: rgba(255,255,255,0.04); /* theme-guardrail-allow: dark control surface (matches .vc-toggle) */
    border: 1px solid rgba(255,255,255,0.09); /* theme-guardrail-allow: dark control border */
    border-radius: 999px;
    color: transparent; /* the floating label is the visible text */
    font: inherit;
    font-size: 0.76rem;
    padding: 0.3rem 0.7rem;
    min-width: 122px;
    cursor: pointer;
    transition: background 0.14s ease;
}
.vc-share-select:hover:not(:disabled) { background: rgba(255,255,255,0.09); } /* theme-guardrail-allow: dark hover tint */
.vc-share-select:disabled { cursor: default; opacity: 0.55; }
.vc-share-select option, .vc-share-select optgroup { color: #0F172A; } /* theme-guardrail-allow: native dropdown popup renders on a light OS surface */
.vc-share-plot { position: relative; }
.vc-share-svg { display: block; width: 100%; height: auto; }
.vcs-grid { stroke: rgba(255,255,255,0.06); } /* theme-guardrail-allow: chart gridline (matches .vc-grid-line) */
.vcs-axis {
    fill: var(--text-faint);
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.vcs-endlabel {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
}
.vcs-cursor { stroke: rgba(255,255,255,0.18); stroke-dasharray: 3 3; pointer-events: none; } /* theme-guardrail-allow: chart hover cursor line */
.vcs-hit { cursor: crosshair; }
.vc-share-tip {
    bottom: auto;
    top: 8px;
    transform: translateX(-50%);
    min-width: 200px;
}
.vc-share-tip .vc-tip-val small { color: var(--text-lighter); font-weight: 400; font-size: 0.92em; }
.vc-share-note {
    color: var(--text-faint);
    font-size: 0.72rem;
    line-height: 1.5;
    margin: 0.9rem 0 0;
}
/* View / scale toggle row — reuses the .vc-control-* pills so the split toggle
   matches the VC-flows widget on the same page. Leads above the chip row and
   clears the hover PNG button (top-right of the card). */
.vc-share-views {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.1rem;
    margin-bottom: 0.85rem;
    padding-right: 72px;
}
/* Split-by-stage view — three compact line-chart panels mirroring the VC-flows
   "Split by stage" layout; the chip row + bottom legend identify the lines.
   Collapses to one column on narrow screens. */
.vc-share-panels {
    display: grid;
    grid-template-columns: repeat(var(--vc-panel-count, 3), minmax(0, 1fr));
    gap: 1rem 1.25rem;
}
.vc-share-panel { min-width: 0; }
.vc-share-panel-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.15rem 0.5rem;
    margin-bottom: 0.45rem;
}
.vc-share-panel-title span {
    color: var(--white);
    font-size: 0.82rem;
    font-weight: 800;
}
.vc-share-panel-title em {
    color: var(--text-faint);
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.vc-share-panel-svg { display: block; width: 100%; height: auto; }
.vc-share-panel-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 0 1rem;
    text-align: center;
    color: var(--text-faint);
    font-size: 0.76rem;
    line-height: 1.5;
}
.vc-share-panel .vc-share-tip { min-width: 150px; }
.vc-share-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.9rem;
    margin-top: 1rem;
}
@media (max-width: 920px) {
    .vc-share-panels { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .vc-share-card { padding: 1.1rem 1rem; }
    .vc-share-controls { padding-right: 0; }
    .vc-share-views { padding-right: 0; padding-top: 2.15rem; }
}

/* ─────────────────────────────────────────────────────────────
   Grouped table of contents (sector pages)
   The flat TOC list is grouped under named, collapsible chapters
   so a long page reads as ~5 scannable sections, not 16 siblings.
   Theme-aware via tokens only — the sidebar glass + light-mode flip
   are inherited from the base .toc-* rules in company-profile.css.
   ───────────────────────────────────────────────────────────── */
.toc-group { list-style: none; }
.toc-group + .toc-group { margin-top: 0.1rem; }
.toc-group-label {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    width: 100%; margin: 0; padding: 0.5rem 1rem 0.3rem 0.875rem;
    background: none; border: 0; cursor: pointer; text-align: left;
    font-family: var(--font-display, 'Source Sans 3', system-ui, sans-serif);
    font-size: 0.625rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--text-light); transition: color 0.15s ease;
}
/* Chapter number ("1", "2"…) ahead of the group name — mirrors the body's
   numbered chapter dividers; the sub-section links below carry "N.M" (1.1, 1.2…). */
.toc-group-head { display: flex; align-items: baseline; gap: 0.45rem; min-width: 0; }
.toc-group-num { flex: none; font-weight: 800; color: var(--eyebrow); font-variant-numeric: tabular-nums; }
.toc-group-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Section links carry "N.M" (wider than a single char) — give the number a fixed
   gutter so the labels stay aligned. */
.toc-group-items .toc-num { min-width: 1.85rem; }
/* Outline number in a body section's eyebrow (e.g. "1.1 COMBINED EV") — matches
   the grouped TOC link exactly. Inherits the eyebrow colour/size. */
.section-eyebrow-num { font-variant-numeric: tabular-nums; }
.toc-group-label:hover { color: var(--eyebrow); }
.toc-group-label:focus-visible { outline: 1px solid var(--eyebrow); outline-offset: -2px; border-radius: 4px; }
.toc-group.active > .toc-group-label { color: var(--eyebrow); }
.toc-group-chevron { width: 11px; height: 11px; flex: none; opacity: 0.55; transition: transform 0.2s ease, opacity 0.15s ease; }
.toc-group-label:hover .toc-group-chevron { opacity: 1; }
.toc-group.collapsed > .toc-group-label .toc-group-chevron { transform: rotate(-90deg); }
.toc-group-items { list-style: none; margin: 0; padding: 0; }
.toc-group.collapsed > .toc-group-items { display: none; }

/* ─────────────────────────────────────────────────────────────
   Section group dividers (sector page "chapters")
   A slim numbered band that introduces each TOC group in the body,
   so the page mirrors the grouped TOC. Transparent — sits over the
   page background between sections. Tokens only (theme-aware).
   ───────────────────────────────────────────────────────────── */
.section-divider { padding: 2.75rem 2rem 0; scroll-margin-top: 84px; }
.section-divider-inner {
    display: flex; align-items: baseline; gap: 1rem;
    padding-top: 2.25rem; border-top: 1px solid var(--navy-lighter);
}
.section-divider--first { padding-top: 1.75rem; }
.section-divider--first .section-divider-inner { padding-top: 0; border-top: 0; }
.section-divider-num {
    flex: none;
    font-family: var(--font-display, 'Source Sans 3', system-ui, sans-serif);
    font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em;
    color: var(--eyebrow); font-variant-numeric: tabular-nums;
}
.section-divider-text { min-width: 0; }
.section-divider-label {
    margin: 0;
    font-family: var(--font-display, 'Source Sans 3', system-ui, sans-serif);
    font-size: 1.7rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.015em;
}
/* Tuck the group's first section up under its divider so the band reads as a header. */
.section-divider + .body-section { padding-top: 1.25rem; }
@media (max-width: 768px) {
    .section-divider { padding: 2rem 1.25rem 0; }
    .section-divider-inner { padding-top: 1.6rem; gap: 0.75rem; }
    .section-divider-num { font-size: 1.6rem; }
    .section-divider-label { font-size: 1.4rem; }
}

/* ───────────────────────────────────────────────────────────────────────────
   EMEA metro areas ranking (/regions/emea/ #metro-areas — js/emea-metro-areas.js)
   Reuses the .vc-flows-card surface + .vc-control-* pills + .vc-year-range
   slider; below are only the ranked-bar-list pieces. Dark is the default
   (this stylesheet's convention); light surface overrides live in
   dealroom-theme-3da7d8e.css next to the other .vc-* widget overrides. */
.mxr-summary {
    color: var(--text-lighter);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
    margin: 0.15rem 72px 0.95rem 0;
}
.mxr-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.mxr-row {
    display: grid;
    grid-template-columns: 1.5rem minmax(108px, 146px) minmax(0, 1fr) minmax(72px, auto);
    align-items: center;
    gap: 0.65rem;
    min-height: 24px;
    transition: opacity 0.25s ease;
}
/* Rows outside the active location lens (top strip) drop back. */
.mxr-row.mxr-dim { opacity: 0.3; }
.mxr-rank {
    color: var(--text-faint);
    font-size: 0.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.mxr-name {
    color: var(--white);
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mxr-flag { margin-right: 0.35rem; }
.mxr-card { --mxr-compare: #8D8272; } /* theme-guardrail-allow: muted compare fill, dark theme */
.mxr-track {
    position: relative;
    height: 21px;
    border-radius: 5px;
    background: rgba(255,255,255,0.06); /* theme-guardrail-allow: dark bar track */
    overflow: hidden;
}
.mxr-bar {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    display: flex;
    border-radius: 5px;
    overflow: hidden;
}
.mxr-bar i { display: block; height: 100%; flex: 0 0 auto; }
.mxr-val {
    color: var(--white);
    font-size: 0.82rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.mxr-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin-top: 0.95rem;
}
.mxr-key {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-lighter);
    font-size: 0.7rem;
    font-weight: 600;
}
.mxr-key i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}
.mxr-note {
    color: var(--text-lighter);
    font-size: 0.72rem;
    line-height: 1.5;
    margin: 0.75rem 0 0;
}
.mxr-foot {
    color: var(--text-faint);
    font-size: 0.68rem;
    line-height: 1.5;
    margin-top: 0.95rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-light);
}
.mxr-foot a { color: var(--blue); text-decoration: none; }
.mxr-foot a:hover { text-decoration: underline; }
.mxr-retry {
    appearance: none;
    margin-left: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--white);
    font: 700 0.74rem inherit;
    font-family: inherit;
    cursor: pointer;
}
@media (max-width: 640px) {
    .mxr-row { grid-template-columns: 1.2rem minmax(86px, 108px) minmax(0, 1fr) auto; gap: 0.45rem; }
    .mxr-name { font-size: 0.76rem; }
    .mxr-val { font-size: 0.76rem; }
    .mxr-summary { margin-right: 0; }
}
/* Total (all-time) rank-by modes: the period slider stays visible but muted. */
.mxr-muted {
    opacity: 0.45;
    transition: opacity 0.15s ease;
}
.mxr-muted .vc-year-input { pointer-events: none; }
.mxr-card .vc-control-pill[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}
/* "All" split view — first column names, one column per metric, per-column bars. */
.mxr-tblwrap { overflow-x: auto; }
.mxr-tbl {
    display: grid;
    grid-template-columns: 1.5rem minmax(120px, 150px) repeat(6, minmax(86px, 1fr));
    align-items: center;
    gap: 0.3rem 0.7rem;
    min-width: 780px;
}
.mxr-th {
    color: var(--text-faint);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--border-light);
    white-space: nowrap;
}
.mxr-cell { min-width: 0; }
.mxr-cell b {
    display: block;
    color: var(--white);
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.mxr-mini {
    display: block;
    margin-top: 0.2rem;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,0.07); /* theme-guardrail-allow: dark mini-bar track */
    overflow: hidden;
}
.mxr-mini i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #3B82F6; /* theme-guardrail-allow: functional bar fill */
}
/* Comparison rows (benchmarks / custom adds) */
.mxr-vs {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.32rem;
    border-radius: 999px;
    border: 1px solid var(--border-light);
    color: var(--text-faint);
    font-size: 0.56rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    vertical-align: 1px;
}
.mxr-chips { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
.mxr-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.35rem 0.3rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--border-light);
    background: rgba(255,255,255,0.08); /* theme-guardrail-allow: dark chip surface */
    color: var(--white);
    font-size: 0.72rem;
    font-weight: 700;
}
.mxr-chip button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-faint);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.15rem;
}
.mxr-chip button:hover { color: var(--white); }
/* "+ Add location" typeahead */
.mxr-addwrap { position: relative; display: inline-flex; }
.mxr-add {
    appearance: none;
    width: 150px;
    height: 30px;
    padding: 0 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border-light);
    background: rgba(255,255,255,0.04); /* theme-guardrail-allow: dark control surface */
    color: var(--white);
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 600;
}
.mxr-add::placeholder { color: var(--text-faint); }
.mxr-add:focus-visible { outline: 2px solid rgba(96,165,250,0.8); outline-offset: 2px; } /* theme-guardrail-allow: dark focus ring */
.mxr-add-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    min-width: 250px;
    max-height: 260px;
    overflow: auto;
    padding: 0.3rem;
    border-radius: 10px;
    border: 1px solid var(--border-light);
    background: #1E2A45; /* theme-guardrail-allow: dark dropdown surface */
    box-shadow: 0 14px 30px rgba(0,0,0,0.35); /* theme-guardrail-allow: dark dropdown shadow */
}
.mxr-add-item {
    appearance: none;
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.42rem 0.6rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--white);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}
.mxr-add-item:hover { background: rgba(255,255,255,0.08); } /* theme-guardrail-allow: dark hover tint */
.mxr-add-item i {
    color: var(--text-faint);
    font-style: normal;
    font-weight: 500;
    margin-left: 0.4rem;
    font-size: 0.68rem;
}
/* ───────────────────────────────────────────────────────────────────────────
   EMEA page lens (js/emea-page-lens.js) — location strip + Pages (slide) view.
   The strip reuses the .family-subnav classes injected by mobile-nav.js; the
   additions below cover the button variant, the stats chip and the right-side
   view toggle. Slides are literal paper-style 16:9 pages (1280×720 = 13.33×7.5in
   at CSS 96dpi), so their chrome uses fixed light literals by design. */
.emea-lens-bar .family-subnav-link {
    appearance: none;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}
.emea-lens-stats {
    flex: none;
    margin-left: 0.35rem;
    color: var(--text-faint);
    font-size: 0.72rem;
    white-space: nowrap;
}
.emea-lens-stats b {
    color: var(--text-light);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.emea-lens-right {
    flex: none;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding-left: 1rem;
}
@media (max-width: 980px) { .emea-lens-stats { display: none; } }

body.drp-pages { background: #e8ecf2 !important; } /* theme-guardrail-allow: slide-deck canvas behind white pages */
body.drp-pages .hero,
body.drp-pages .body-section:not(.drp-slide),
body.drp-pages .section-divider,
body.drp-pages #tocSidebar,
body.drp-pages #tocFab,
/* Page furniture that is NOT a .body-section — the marketing CTA band and the
   related-data rail — otherwise floats on the slide canvas and prints as a
   ragged extra page after the last slide. */
body.drp-pages .cta-band,
body.drp-pages .rdr-section,
body.drp-pages #footer-placeholder { display: none !important; }
body.drp-pages .drp-slide {
    display: block !important;
    width: 1280px;
    height: 720px;
    margin: 26px auto;
    padding: 0 !important;
    background: #ffffff !important; /* theme-guardrail-allow: literal white slide */
    box-shadow: 0 10px 30px rgba(15,23,42,0.14); /* theme-guardrail-allow: slide shadow on deck canvas */
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}
body.drp-pages .drp-slide .body-inner {
    transform-origin: top left;
    width: 1280px;
    max-width: none;
    margin: 0;
    padding: 38px 52px 20px;
}
.drp-foot {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 52px;
    border-top: 1px solid rgba(15,23,42,0.08); /* theme-guardrail-allow: slide footer hairline on white page */
    background: #ffffff; /* theme-guardrail-allow: literal white slide footer */
    color: #64748B; /* theme-guardrail-allow: slide footer ink on white page */
    font-size: 12px;
    z-index: 3;
}
@media print {
    body.drp-pages nav,
    body.drp-pages .family-subnav { display: none !important; }
    body.drp-pages { background: #ffffff !important; padding-top: 0 !important; } /* theme-guardrail-allow: print canvas */
    body.drp-pages { margin: 0 !important; }
    body.drp-pages .drp-slide {
        margin: 0;
        box-shadow: none;
        border-radius: 0;
        page-break-after: always;
        break-after: page;
        page-break-inside: avoid;
        break-inside: avoid;
    }
    body.drp-pages .drp-slide * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}
/* EMEA EV charts (js/emea-ev-charts.js) */
.evx-plot { margin-top: 0.4rem; }
.evx-plot svg text { font-family: inherit; }
.evx-pack { margin-top: 0.4rem; min-height: 320px; }
.evx-hint {
    margin-left: auto;
    color: var(--text-faint);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Lens crumb in the hero title ("EMEA › European lens") */
.emea-lens-crumb {
    color: var(--text-lighter);
    font-size: 0.55em;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
}
/* Pages-view deck layout: title/text in the left third, chart in the right
   two-thirds. Slides force light theme, so slide chrome uses paper literals. */
body.drp-pages .drp-slide .body-inner {
    display: flex;
    align-items: stretch;
    gap: 44px;
    padding: 40px 52px 56px;
    /* Fill the slide (720px minus the footer strip) so the main column can
       centre its exhibit; fitSlides() still scales anything taller. */
    min-height: 674px;
}
.drp-side {
    flex: 0 0 30%;
    min-width: 0;
}
.drp-main {
    flex: 1 1 auto;
    min-width: 0;
    /* Titles hang top-left, the exhibit floats mid-column (consulting-deck
       layout) — short charts otherwise leave a bottom-heavy void. */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
body.drp-pages .drp-slide .drp-side .section-title {
    font-size: 1.7rem;
    line-height: 1.12;
}
body.drp-pages .drp-slide .drp-side .section-sub {
    font-size: 0.82rem;
    line-height: 1.55;
    margin-top: 0.6rem;
}
/* Slides are static pages: hide every interactive controller and export chrome. */
body.drp-pages .drp-slide [data-agent-hide],
body.drp-pages .drp-slide .vc-png-btn,
body.drp-pages .drp-slide .png-btn,
body.drp-pages .drp-slide .srt-filter-row,
body.drp-pages .drp-slide .srt-year-row,
body.drp-pages .drp-slide .mxr-addwrap { display: none !important; }
/* Cover block on the first slide */
[data-drp-cover] { margin-bottom: 1.4rem; }
.drp-cover-kicker {
    margin: 0 0 0.6rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #4B6BEB; /* theme-guardrail-allow: slide chrome on forced-light paper */
}
.drp-cover-title {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #0F172A; /* theme-guardrail-allow: slide ink on forced-light paper */
}
.drp-cover-sub {
    margin: 0.85rem 0 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #475569; /* theme-guardrail-allow: slide ink on forced-light paper */
}
/* Hero metric cards stack vertically in the cover slide's chart column. */
body.drp-pages #overview .sparkrow {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 16px;
}
/* Deck cover slide — big title block left, the three metric cards stacked
   right (inherits the split layout, with more presence). */
body.drp-pages .drp-cover-slide .drp-side {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
body.drp-pages .drp-cover-slide .drp-cover-title {
    font-size: 3.3rem;
}
body.drp-pages .drp-cover-slide .drp-cover-sub {
    font-size: 1.02rem;
    max-width: 34ch;
}
body.drp-pages .drp-cover-slide .drp-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Criteria line under each slide's title — what the page actually shows. */
[data-drp-criteria] {
    margin: 0.9rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(15,23,42,0.1); /* theme-guardrail-allow: slide hairline on forced-light paper */
    font-size: 0.74rem;
    line-height: 1.55;
    color: #475569; /* theme-guardrail-allow: slide ink on forced-light paper */
    font-variant-numeric: tabular-nums;
}
/* Time-series flows chart gets a taller plot on its slide. */
body.drp-pages #vc-investment .vc-flows-plot {
    height: 470px !important;
    min-height: 470px !important;
}
/* Deck typography — chart text at presentation size, and no nested card
   chrome: charts sit directly on the page instead of a widget-in-a-box. */
body.drp-pages .drp-slide .vc-flows-card,
body.drp-pages .drp-slide .srt-card {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}
body.drp-pages .drp-slide .srt-tile-name { font-size: 0.86rem; }
body.drp-pages .drp-slide .srt-tile-amount { font-size: 0.8rem; }
body.drp-pages .drp-slide .srt-group-hdr { font-size: 0.82rem; }
body.drp-pages .drp-slide .mxr-name,
body.drp-pages .drp-slide .mxr-val { font-size: 0.95rem; }
body.drp-pages .drp-slide .mxr-summary { font-size: 0.86rem; }
body.drp-pages .drp-slide .mxr-key { font-size: 0.8rem; }
body.drp-pages .drp-slide .mxr-note,
body.drp-pages .drp-slide .mxr-foot { font-size: 0.78rem; }
body.drp-pages .drp-slide .vc-grid-label { font-size: 0.82rem; }
body.drp-pages .drp-slide .vc-legend-item { font-size: 0.82rem; }
body.drp-pages .drp-slide .vc-flow-summary { font-size: 0.84rem; }
body.drp-pages .drp-slide .funnel-card,
body.drp-pages .drp-slide .ac-rank,
body.drp-pages .drp-slide .cmp-explorer {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
body.drp-pages .drp-slide .collapsible-toggle,
body.drp-pages .drp-slide .drp-main [data-mxr-summary] {
    display: none !important;
}
/* EV constellation interactivity: hovered bubbles light up, a tooltip names
   them (small bubbles have no room for an in-bubble label). */
.evx-pack { position: relative; }
.evx-pack [data-evc-bubbles] circle { transition: filter 0.15s ease, fill-opacity 0.15s ease; }
.evx-pack [data-evc-bubbles] circle:hover { filter: brightness(1.18) saturate(1.08); fill-opacity: 1; }
.evx-pack [data-evc-decor] { pointer-events: none; }
.evx-tip {
    position: absolute;
    z-index: 30; /* above bubbles, group labels and any hovered-filter stacking contexts */
    pointer-events: none;
    background: var(--navy);
    border: 1px solid var(--logo-tile-border);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 7px;
    box-shadow: var(--shadow-md);
    white-space: nowrap;
}
/* Deck: the academia teaser (blurred locked rows + unlock CTA) reads as a
   glitch on a static page — slides show the clean top-8 table only. */
body.drp-pages .drp-slide .ac-rank-locked,
body.drp-pages .drp-slide .ac-rank-cta,
body.drp-pages .drp-slide .ac-uni-locked,
body.drp-pages .drp-slide .ac-unis-cta { display: none !important; }
/* Cover agenda — what's inside the deck. */
body.drp-pages .drp-cover-slide .drp-cover-toc {
    margin: 1.6rem 0 0;
    padding-left: 1.25rem;
    font-size: 0.87rem;
    line-height: 2.05;
    opacity: 0.75;
}
body.drp-pages .drp-cover-slide .drp-cover-toc li { padding-left: 0.3rem; }
/* Funnel now has its own slide (mountFunnelSlide), so the cover is a clean
   full-width title + agenda page: centre it vertically and flow the 7-item
   agenda in two columns instead of one tall list down the left third. */
body.drp-pages .drp-cover-slide .body-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
body.drp-pages .drp-cover-slide [data-drp-cover] { margin: 0; max-width: 62rem; }
body.drp-pages .drp-cover-slide .drp-cover-toc { columns: 2; column-gap: 3.5rem; }
/* The lifted funnel is a full-bleed exhibit — no title column, centred. */
body.drp-pages #funnel .body-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* "No split" is a display toggle, not a band filter — give it breathing
   room from the round-size pills. */
.mxr-nosplit { margin-left: 0.6rem; }
.mxr-view-label { margin-left: 0.9rem; }
/* NPA supercluster map (EMEA page) — Leaflet palette rides these tokens so
   the map follows the page theme; JS reads them and restyles on theme flip. */
.npa-map-card {
    --npa-land: #26334E; /* theme-guardrail-allow: map palette token, dark theme */
    --npa-land-line: #384765; /* theme-guardrail-allow: map palette token, dark theme */
    --npa-conn: #9DB1D8; /* theme-guardrail-allow: map palette token, dark theme */
    --sc-water: #141B2D; /* theme-guardrail-allow: map water token, dark theme */
    --sc-rest: #8B96A8; /* theme-guardrail-allow: hubs outside every zone, both themes */
    /* One colour per zone (categorical, from the chart palette; read the same
       way in both themes). */
    --sc-z-npa: #3B82F6; /* theme-guardrail-allow: zone colour token */
    --sc-z-nordics: #14B8A6; /* theme-guardrail-allow: zone colour token */
    --sc-z-dach: #F59E0B; /* theme-guardrail-allow: zone colour token */
    --sc-z-alpine: #8B5CF6; /* theme-guardrail-allow: zone colour token */
    --sc-z-cee: #EC4899; /* theme-guardrail-allow: zone colour token */
    --sc-z-iberia: #10B981; /* theme-guardrail-allow: zone colour token */
    position: relative;
    /* Trap Leaflet's z-indexes inside the card (control corners are z-index
       1000) so the +/- zoom buttons pass under the fixed nav and lens strip
       (z-index 999) instead of floating over them. */
    isolation: isolate;
    /* Map + zone panel side by side across the full text column — the layout
       the US HQ-regions map uses. The map keeps a near-square box of its own:
       Leaflet fits the north–south range and fills the rest with longitude,
       so a 1140px-wide map put most of Russia on screen to show Europe. */
    display: flex;
    gap: 1rem;
    align-items: stretch;
    width: 100%;
    padding: 0.9rem;
    border-radius: 12px;
    background: var(--surface-card);
    border: 1px solid var(--border-light);
}
.npa-map-card #npa-supercluster-map {
    flex: 1 1 auto;
    min-width: 0;
    height: 720px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--sc-water);
}
.npa-map-card .leaflet-container { background: transparent; }
.npa-lbl, .npa-city {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    white-space: nowrap;
}
.npa-lbl::before, .npa-city::before { display: none !important; }
/* .leaflet-tooltip.* (not bare .npa-*): leaflet.css is injected at runtime
   AFTER page CSS, and its .leaflet-tooltip rule sets a fixed near-black ink
   that ties a bare class on specificity — so leaflet's colour silently won
   and vanished in dark mode. The compound selector outranks it both themes. */
.leaflet-tooltip.npa-lbl { font-weight: 700; font-size: 15px; text-align: left; color: var(--white); } /* theme-adaptive ink token (inverted-token system) */
.npa-lbl .d { display: block; font-weight: 400; font-size: 13px; color: var(--text-light); line-height: 1.3; }
.leaflet-tooltip.npa-city { font-weight: 400; font-size: 13px; text-align: left; color: var(--text-light); }
.leaflet-tooltip-left.npa-lbl, .leaflet-tooltip-left.npa-city { text-align: right; }
.leaflet-tooltip-top.npa-lbl, .leaflet-tooltip-bottom.npa-lbl,
.leaflet-tooltip-top.npa-city, .leaflet-tooltip-bottom.npa-city { text-align: center; }
.npa-hint {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 600;
    background: var(--navy);
    border: 1px solid var(--logo-tile-border);
    border-radius: 6px;
    padding: 4px 9px;
    font-size: 12px;
    color: var(--text-light);
    pointer-events: none;
}
.npa-dot { cursor: pointer; transition: fill-opacity 0.15s; }
.npa-dot:hover { fill-opacity: 0.72; }
/* Super clusters (Europe view) overlays on the same card. */
.sc-halo { cursor: pointer; transition: fill-opacity 0.2s; }
/* Zone panel beside the map: legend and navigation in one. Rows highlight
   their zone on hover and zoom on click; the active zone reads as pressed. */
.sc-panel {
    width: 250px;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.4rem 0.15rem;
}
.sc-panel-title { font-weight: 700; font-size: 0.95rem; color: var(--white); line-height: 1.3; } /* theme-adaptive ink token (inverted-token system) */
.sc-panel-sub { font-size: 0.8rem; color: var(--text-light); line-height: 1.4; margin-bottom: 0.5rem; }
.sc-zone-list { display: flex; flex-direction: column; gap: 2px; }
.sc-zone-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.45rem 0.5rem;
    border: 0;
    border-radius: 8px;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    color: var(--white); /* theme-adaptive ink token (inverted-token system) */
    transition: background 0.15s;
}
.sc-zone-row:hover, .sc-zone-row.is-hot { background: var(--navy-light); }
.sc-zone-row.is-active { background: var(--navy-light); box-shadow: inset 0 0 0 1px var(--border-mid); }
.sc-zone-rest { cursor: default; margin-top: 0.15rem; padding-top: 0.6rem; border-top: 1px solid var(--border-light); border-radius: 0; }
.sc-zone-rest:hover { background: none; }
.sc-zone-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.sc-zone-name { flex: 1; font-weight: 600; font-size: 0.88rem; line-height: 1.25; }
.sc-zone-num { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; font-variant-numeric: tabular-nums; }
.sc-zone-num b { font-size: 0.88rem; font-weight: 700; }
.sc-zone-num span { font-size: 0.72rem; color: var(--text-light); }
.sc-size-key { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border-light); }
.sc-panel-note { margin-top: 0.9rem; font-size: 0.74rem; color: var(--text-light); line-height: 1.4; }
.sc-size-key-title { display: block; font-size: 0.74rem; color: var(--text-light); margin-bottom: 0.5rem; }
.sc-sizes { display: flex; align-items: flex-end; gap: 0.9rem; }
.sc-size { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; font-size: 0.72rem; color: var(--text-light); font-variant-numeric: tabular-nums; }
.sc-size i { display: block; border-radius: 50%; background: var(--sc-rest); opacity: 0.55; }
.sc-back {
    display: none;
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 600;
    background: var(--navy);
    border: 1px solid var(--logo-tile-border);
    border-radius: 6px;
    padding: 5px 11px;
    font-size: 12.5px;
    font-family: inherit;
    color: var(--white);
    cursor: pointer;
}
.sc-back:hover { border-color: var(--text-light); }
.npa-map-card:not([data-sc-state="europe"]) .sc-back { display: block; }
.sc-source {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 600;
    font-size: 11px;
    color: var(--text-light);
    opacity: 0.85;
    pointer-events: none;
}
/* Zone names sit inside their blob, over bubbles and city labels, so they
   carry their own backdrop rather than relying on finding empty space. */
.leaflet-tooltip.sc-cluster-lbl {
    /* .npa-lbl clears the tooltip chrome with !important (leaflet.css loads
       last), so the zone label has to re-assert its backdrop the same way. */
    background: var(--npa-zone-lbl-bg, rgba(16, 24, 42, 0.88)) !important; /* theme-guardrail-allow: map label backdrop, paired with the light override in the token sheet */
    padding: 4px 8px !important;
    border-radius: 7px;
    line-height: 1.25;
    text-align: center;
    /* Above the city labels: a zone name half-covered by "Amsterdam" is worse
       than a city name covered by its zone. */
    z-index: 650;
}
/* Share-of-the-world donuts (#global-shares): three columns that stack to two
   on a phone. The donut itself is inline SVG, so only the frame lives here.
   The % sits in the hole; the "X of Y" line shows on hover (always on touch
   screens, and in PNG exports via the .agent-exporting clone hook). */
.evs-pies {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem 1rem;
    padding: 0.5rem 0 0.25rem;
}
.evs-pie { text-align: center; }
.evs-pie-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 0.6rem;
    letter-spacing: 0.01em;
}
.evs-pie-pct {
    font-family: var(--font-display, inherit);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--white);
    margin-top: 0.45rem;
    line-height: 1.1;
}
.evs-pie-abs { font-size: 0.82rem; color: var(--text-light); margin-top: 0.15rem; }
.evs-donut { position: relative; width: 104px; margin: 0 auto; }
.evs-donut svg { display: block; }
.evs-donut .evs-pie-pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    font-size: 1.35rem;
}
.evs-pie-abs-hover { opacity: 0; transition: opacity 0.15s ease; }
.evs-pie:hover .evs-pie-abs-hover,
.agent-exporting .evs-pie-abs-hover { opacity: 1; }
@media (hover: none) {
    .evs-pie-abs-hover { opacity: 1; }
}
.evs-pie-sub { display: block; font-weight: 500; font-size: 0.75rem; color: var(--text-lighter); margin-top: 0.1rem; }
@media (max-width: 700px) {
    .evs-pies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sc-cluster-lbl b { font-size: 13px; }
.sc-cluster-lbl .d { font-size: 11.5px; opacity: 0.9; }
.sc-city-lbl { font-size: 12px; }
@media (max-width: 860px) {
    .npa-map-card { flex-direction: column; gap: 0.75rem; }
    /* Column flex: the main axis is height, where flex-basis would win over
       the height property — pin the map with flex:none. */
    .npa-map-card #npa-supercluster-map { flex: none; height: 520px; }
    .sc-panel { width: auto; padding: 0.15rem 0.1rem; }
    .sc-zone-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 0.75rem; }
    .sc-size-key { margin-top: 0.5rem; }
}
@media (max-width: 640px) {
    .npa-map-card #npa-supercluster-map { height: 440px; }
    .sc-zone-list { grid-template-columns: 1fr; }
    .sc-city-lbl { font-size: 10.5px; }
}
body.drp-pages .drp-slide .npa-map-card #npa-supercluster-map { height: 520px; }
body.drp-pages .drp-slide .npa-hint,
body.drp-pages .drp-slide .leaflet-control-zoom { display: none !important; }
/* Deck footers exist only on slides — never in the restored web view. */
body:not(.drp-pages) .drp-foot { display: none !important; }

/* Four plain hero cards (EMEA: unicorns, TBs, colts, EV) share one row. */
.sparkrow:has(> .sparkcard:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .sparkrow:has(> .sparkcard:nth-child(4)) { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sparkrow:has(> .sparkcard:nth-child(4)) { grid-template-columns: 1fr; } }

/* Numbered section eyebrows (EMEA outline). */
.eyebrow-num {
    font-family: var(--font-mono);
    font-weight: 600;
    opacity: 0.55;
    margin-right: 0.35rem;
    letter-spacing: 0;
}
/* Hero funnel (EMEA): Simple/Detailed toggle + the stat strip that
   replaced the metric cards. */
.hero-funnel-toggle { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.9rem; }
/* Desktop hero funnel: the grouped tapered widget (startup-funnel.css) serves
   >760px; the swipeable card strip stays the phone view. The
   unicorn/thoroughbred outcome lens only exists in the widget's Detailed
   view, so its pills hide with the Simple view and on phones. */
.hero-funnel-toggle .hero-fv-group { margin-left: auto; }
.hero-funnel-block:not(.is-detailed) .hero-fv-group { display: none; }
/* Detailed-only heroes (EMEA): the lens pills sit INSIDE the funnel card,
   sharing one row with the pool headline — pills left, headline centered
   (equal 1fr flanks keep it truly centered while max-content stops the
   pills from overflowing on narrow cards). */
.hero-funnel-desktop .funnel-lens-row {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    align-items: center;
    gap: 0.8rem;
    margin: -0.35rem 0 0.7rem;
}
.hero-funnel-desktop .funnel-lens-row .fv-group { justify-self: start; }
.funnel-lens-row .funnel-pool { margin: 0; padding: 0; }
.funnel-lens-row .fv-group { padding: 2px; gap: 2px; border-radius: 9px; }
.funnel-lens-row .fv-btn.fv-emoji { height: 24px; padding: 0 0.5rem; gap: 0.28rem; border-radius: 6px; }
.funnel-lens-row .fv-emoji-glyph { font-size: 12px; }
.funnel-lens-row .fv-emoji-text { font-size: 0.66rem; }
/* The hero gives the funnel less vertical room than a standalone section —
   scale the stage taper down while keeping the height ratios intact. 0.8
   (up from 0.72) keeps the log-scale steps visible now that the conversion
   chips hang below the bars instead of stretching them from inside. */
.hero-funnel-desktop .funnel-card[data-layout="horizontal"] .funnel-bar {
    min-height: calc(var(--stage-height, 160px) * 0.8);
}
@media (min-width: 761px) {
    .hero-funnel-block [data-hf-strips] { display: none; }
}
@media (max-width: 760px) {
    .hero-funnel-block .hero-funnel-desktop { display: none; }
    .hero-funnel-block .hero-fv-group { display: none; }
}
.hf-stage-sub { font-size: 0.68rem; color: var(--text-faint); margin-top: 0.15rem; }
.hero-statline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1.5rem;
    margin-top: 1.15rem;
    padding-top: 0.95rem;
    border-top: 1px solid var(--logo-tile-border);
    color: var(--text-light);
    font-size: 0.85rem;
}
.hero-statline b { color: var(--white); font-weight: 800; font-variant-numeric: tabular-nums; margin-right: 0.15rem; }
/* Simple-funnel outcome fork: the valuation + revenue outcome tiers stack
   at the end of the track. */
.hf-outcomes { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }
.hf-outcomes .hf-stage { padding-top: 0.55rem; padding-bottom: 0.55rem; }
.hf-outcomes .hf-stage .hf-stage-count { font-size: 1.35rem; }
/* The auto-injected PNG export button floats over the hero funnel's cards
   on narrow screens (the hero has no card chrome to anchor it) — desktop
   keeps the export, phones hide it. */
@media (max-width: 760px) {
    [data-hero-funnel] .png-btn { display: none !important; }
}
/* Mobile controls collapse — only cards the EMEA lens JS tagged. Desktop
   is untouched (toggle hidden, controls always visible). */
.mob-controls-toggle { display: none; }
@media (max-width: 760px) {
    .mob-collapsible .mob-controls-toggle {
        display: inline-flex;
        align-items: center;
        margin-bottom: 0.65rem;
    }
    .mob-collapsible:not(.mob-open) .vc-flows-controls,
    .mob-collapsible:not(.mob-open) .srt-filter-row,
    .mob-collapsible:not(.mob-open) .srt-group-row,
    .mob-collapsible:not(.mob-open) .srt-size-row,
    .mob-collapsible:not(.mob-open) .srt-year-row { display: none !important; }
    /* Expanded: each category is ONE row with horizontal swipe. */
    .mob-collapsible.mob-open .vc-control-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .mob-collapsible.mob-open .vc-control-row::-webkit-scrollbar { display: none; }
    .mob-collapsible.mob-open .vc-control-row .vc-control-pill,
    .mob-collapsible.mob-open .vc-control-row .vc-control-label,
    .mob-collapsible.mob-open .vc-control-row .mxr-addwrap,
    .mob-collapsible.mob-open .vc-control-row .mxr-chips { flex: 0 0 auto; white-space: nowrap; }
    .mob-collapsible.mob-open .srt-filter-row,
    .mob-collapsible.mob-open .srt-group-row,
    .mob-collapsible.mob-open .srt-size-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    /* Funnel track swipes instead of clipping. */
    [data-hero-funnel] .hf-track { scrollbar-width: none; }
    [data-hero-funnel] .hf-track::-webkit-scrollbar { display: none; }
    [data-hero-funnel] .hf-stage { flex: 0 0 auto; min-width: 130px; }
    [data-hero-funnel] .hf-outcomes { flex: 0 0 auto; }
}
/* Chart caption — states metric + unit even with filters collapsed. */
.evx-caption {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-light);
    margin: 0.2rem 0 0.4rem;
}
/* Premium-analytics FOMO band (EMEA): locked-feature chips + one CTA. */
.fomo-band {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.15rem;
    margin-top: 0.4rem;
}
.fomo-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.fomo-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    border: 1px dashed var(--border-light);
    color: var(--text-light);
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
}
.fomo-chip-more { border-style: solid; color: var(--text-faint); font-weight: 600; }
.fomo-cta { align-self: flex-start; }

/* ── US HQ-regions map (/countries/united-states/ #usa-regions) ──────────
   Reuses .npa-map-card as the shell; .usm-card (added by js/usa-regions-map.js
   on boot) reshapes it for the US: light surface under CARTO light tiles, a
   wide flex layout — the map on the left, the region legend as a right-hand
   column — and a shorter height, since the US is landscape where Europe is
   near-square. */
.npa-map-card.usm-card {
    max-width: none;
    height: auto;
    display: flex;
    gap: 0.9rem;
    align-items: stretch;
    background: var(--surface-card);
    padding: 0.9rem;
}
/* Leaflet stamps .leaflet-container onto the mount itself, and the NPA
   block's `.npa-map-card .leaflet-container { height: 100% }` would zero it
   out (100% of an auto flex row) — the triple selector outranks it. */
.npa-map-card.usm-card [data-usa-regions-map] {
    flex: 1;
    min-width: 0;
    height: 540px;
    border-radius: 10px;
    overflow: hidden;
}
.usm-legend {
    width: 200px;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.35rem 0.15rem;
}
.usm-key { display: flex; gap: 0.55rem; align-items: flex-start; }
.usm-key i { width: 14px; height: 14px; border-radius: 4px; margin-top: 2px; flex: none; }
.usm-key-label { font-weight: 700; font-size: 0.88rem; color: var(--white); line-height: 1.25; } /* theme-adaptive ink token (inverted-token system) */
.usm-key-count { font-size: 0.8rem; color: var(--text-light); font-variant-numeric: tabular-nums; }
.usm-ba {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    border: 0;
    background: none;
    padding: 0.55rem 0 0;
    margin-top: 0.25rem;
    border-top: 1px solid var(--border-light);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.usm-ba .usm-key-label, .usm-ba .usm-key-count { display: block; }
.usm-ba-pill {
    width: 30px;
    height: 17px;
    border-radius: 999px;
    background: var(--border-light); /* --chart-track doesn't exist on site surfaces */
    position: relative;
    flex: none;
    margin-top: 2px;
    transition: background 0.15s;
}
.usm-ba-pill::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--surface-card);
    transition: left 0.15s;
}
.usm-ba.is-on .usm-ba-pill { background: var(--eyebrow); }
.usm-ba.is-on .usm-ba-pill::after { left: 15px; }
.leaflet-tooltip.usm-tip { font-weight: 600; font-size: 12.5px; }
@media (max-width: 760px) {
    .npa-map-card.usm-card { flex-direction: column; }
    /* Column flex: the main axis is height, where flex-basis 0 would win over
       the height property — pin the map with flex:none. */
    .npa-map-card.usm-card [data-usa-regions-map] { flex: none; height: 380px; }
    .usm-legend { width: auto; flex-direction: row; flex-wrap: wrap; gap: 0.6rem 1.1rem; }
    .usm-ba { border-top: 0; padding-top: 0; margin-top: 0; }
}