/* Landing exhibits inherit the CrowdCent palette. All research examples are synthetic. */
.pillar-row {
    padding-top: 1.25rem;
}

.pillar-exhibit {
    --exhibit-mono: "Consolas", "Monaco", monospace;
    background: var(--bg-primary);
    text-align: left;
    overflow: hidden;
}

.exhibit-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    color: var(--text-secondary);
    background: transparent;
}

.exhibit-icon-button:hover {
    color: var(--brand-accent);
    border-color: var(--border-color);
    background: var(--accent-05);
}

.pillar-exhibit button:focus-visible, .pillar-exhibit canvas:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: -2px; }

.exhibit-footnote {
    padding: 0.4rem 0;
    color: var(--text-muted);
    font-size: 0.59rem;
    line-height: 1.6;
    margin: 0;
}

.pillar-copy { padding-left: 3rem; }

.pillar-copy h2 {
    color: var(--text-primary);
    font-size: clamp(1.65rem, 2.3vw, 2.15rem);
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
}

.pillar-description {
    color: var(--text-primary);
    opacity: 0.9;
    font-size: 1.02rem;
    line-height: 1.9;
    margin-bottom: 1.6rem;
}

.pillar-support { font-size: 0.85rem; line-height: 1.85; color: var(--text-muted); }
.pillar-copy .btn-accent-link { font-size: 0.77rem; }
.pillar-secondary-link { color: var(--text-muted); font-size: 0.75rem; text-decoration: none; }
.pillar-secondary-link i { margin-left: 0.4rem; }
.pillar-secondary-link:hover { color: var(--brand-accent); }

.allocation-exhibit { padding: 2rem 0; }
.allocation-labels { display: grid; grid-template-columns: 42% 24% 34%; align-items: end; color: var(--text-secondary); font: 0.67rem/1.6 var(--exhibit-mono); text-align: center; }
.allocation-diagram { display: block; width: 100%; height: auto; }
.allocation-guides { fill: none; stroke: var(--border-color); stroke-width: 0.5; opacity: 0.4; }
.allocation-forecasts, .allocation-collective { fill: var(--brand-accent); }
.allocation-zero { fill: none; stroke: var(--text-muted); stroke-width: 0.65; }
.allocation-long { fill: var(--brand-accent); opacity: 0.8; }
.allocation-short { fill: var(--brand-primary-light); stroke: var(--brand-accent); stroke-width: 0.65; opacity: 0.7; }

@media (max-width: 1199.98px) {
    .pillar-copy { padding-left: 1.5rem; }
}

@media (max-width: 991.98px) {
    .pillar-row { max-width: 720px; margin-left: auto; margin-right: auto; }
    .pillar-copy { padding: 1rem 0.75rem 0; }
    .pillar-copy h2 { font-size: 2rem; }
}

@media (max-width: 575.98px) {
    .pillar-row { padding-top: 0; }
    .pillar-row > :first-child { padding-left: 0; padding-right: 0; }
    .exhibit-footnote { padding: 0.4rem 0; font-size: 0.56rem; }
    .pillar-copy h2 { font-size: 1.85rem; }
    .pillar-description { font-size: 0.96rem; }
    .allocation-exhibit { padding: 1rem 0; }
    .allocation-labels { font-size: 0.53rem; }
}

.challenge-video { display: block; width: 100%; height: auto; border: 1px solid var(--accent-20); }
.challenge-video-note { margin: 0.65rem 0 0; color: var(--text-muted); font-size: 0.65rem; line-height: 1.7; }
.challenge-video-note a { color: var(--brand-accent); text-decoration: none; }
.challenge-video-note a:hover { text-decoration: underline; }
@media (min-width: 992px) {
    .data-scientist-copy { container-type: inline-size; }
    .data-scientist-copy h2 { font-size: min(2.15rem, 6.8cqi); white-space: nowrap; }
}
.walkthrough-terminal { margin-top: 1.5rem; border: 1px solid var(--accent-40); background: var(--bg-primary); box-shadow: 2px 2px 0 var(--accent-10); }
.walkthrough-terminal-header { display: flex; align-items: stretch; padding: 0; border-bottom: 1px solid var(--accent-40); font: 0.62rem/1.5 "Consolas", "Monaco", monospace; color: var(--text-muted); }
.terminal-tabs { display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.walkthrough-terminal-header [role="tab"] { flex: 0 0 auto; padding: 0.6rem 0.9rem; border: 0; border-right: 1px solid var(--accent-20); background: transparent; color: var(--text-muted); font: inherit; cursor: pointer; }
.walkthrough-terminal-header [role="tab"]:hover { color: var(--brand-accent); }
.walkthrough-terminal-header [role="tab"][aria-selected="true"] { color: var(--bg-primary); background: var(--brand-accent); font-weight: 600; }
.walkthrough-terminal-header [role="tab"]:focus-visible { outline: 2px solid var(--text-primary); outline-offset: -2px; }
/* Panels share one grid cell, so the window keeps the tallest example's height. */
.terminal-panels { display: grid; }
.terminal-panels > pre { grid-area: 1 / 1; min-width: 0; overflow-x: auto; }
.terminal-panels > pre[data-inactive] { visibility: hidden; }
.terminal-docs { flex: 0 0 auto; margin-left: auto; padding: 0.6rem 0.9rem; color: var(--text-muted); text-decoration: none; }
.terminal-docs:hover { color: var(--brand-accent); }
/* While the tabs cycle, the selected tab fills as a timer; pausing freezes it. */
@media (prefers-reduced-motion: no-preference) {
    .walkthrough-terminal.is-cycling [role="tab"][aria-selected="true"] { position: relative; }
    .walkthrough-terminal.is-cycling [role="tab"][aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--bg-primary); opacity: 0.5; transform-origin: left; animation: tab-progress 7s linear forwards; }
    .walkthrough-terminal.is-paused [role="tab"]::after { animation-play-state: paused; }
}
@keyframes tab-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.walkthrough-code .string { color: var(--text-primary); }
.walkthrough-code .comment { color: var(--text-muted); }
.walkthrough-code { background: transparent; padding: 0.8rem 0.9rem; margin: 0; color: var(--text-secondary); font: 0.73rem/1.7 "Consolas", "Monaco", monospace; }
.walkthrough-code .keyword, .walkthrough-code .function { color: var(--brand-accent); }
@media (max-width: 575.98px) {
    .walkthrough-code { font-size: 0.71rem; }
}

.walkthrough-code code { color: inherit; }

.pillar-eyebrow { color: var(--brand-accent); font: 600 0.7rem/1.5 "Consolas", "Monaco", monospace; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.75rem; }
@media (min-width: 992px) {
    .pillar-copy-start { padding-left: 0; padding-right: 3rem; }
}

/* How it works: quiet rules and centered labels; cyan anchors the CrowdCent core. */
.flow-diagram svg { display: block; width: 100%; height: auto; overflow: visible; }
.flow-edges { fill: none; stroke: var(--text-muted); stroke-width: 1; opacity: 0.65; }
.flow-arrowhead { fill: var(--text-muted); stroke: none; }
.flow-nodes rect { fill: var(--bg-primary); stroke: var(--border-color); stroke-width: 1; }
.flow-nodes text, .flow-edge-labels text, .flow-core-word { font-family: "Consolas", "Monaco", monospace; letter-spacing: 0.04em; }
.flow-nodes text, .flow-core-word { fill: var(--text-primary); font-size: 13px; text-anchor: middle; dominant-baseline: central; }
.flow-edge-labels text { fill: var(--text-muted); font-size: 11px; }
.flow-core-frame { fill: var(--bg-primary); stroke: var(--accent-40); stroke-width: 1; }
.flow-core-word { letter-spacing: 0.12em; }
.flow-tall .flow-nodes text { font-size: 11px; }
.flow-tall .flow-edge-labels text { font-size: 10px; }
.flow-packets { fill: var(--brand-accent); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
    .flow-packets { display: none; }
}

/* Motion waits for the script to arm it, so a page without JavaScript shows every final state. */
@media (prefers-reduced-motion: no-preference) {
    .allocation-exhibit[data-live="armed"] rect { transform-box: fill-box; transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.19, 1, 0.22, 1); }
    .allocation-exhibit[data-live="armed"]:not(.is-live) .allocation-forecasts rect { opacity: 0 !important; }
    .allocation-forecasts rect:nth-child(8n+2) { transition-delay: 0.07s; }
    .allocation-forecasts rect:nth-child(8n+3) { transition-delay: 0.14s; }
    .allocation-forecasts rect:nth-child(8n+4) { transition-delay: 0.21s; }
    .allocation-forecasts rect:nth-child(8n+5) { transition-delay: 0.28s; }
    .allocation-forecasts rect:nth-child(8n+6) { transition-delay: 0.35s; }
    .allocation-forecasts rect:nth-child(8n+7) { transition-delay: 0.42s; }
    .allocation-forecasts rect:nth-child(8n) { transition-delay: 0.49s; }
    .allocation-exhibit[data-live="armed"]:not(.is-live) .allocation-collective rect { transform: scaleX(0); }
    .allocation-collective rect { transform-origin: left; transition-delay: 0.7s !important; }
    .allocation-exhibit[data-live="armed"]:not(.is-live) .allocation-book rect { transform: scaleX(0); }
    .allocation-book .allocation-long { transform-origin: left; }
    .allocation-book .allocation-short { transform-origin: right; }
    .allocation-book rect { transition-delay: 1s !important; }
    .allocation-book rect:nth-child(n+4) { transition-delay: 1.08s !important; }
    .allocation-book rect:nth-child(n+8) { transition-delay: 1.16s !important; }
    .allocation-book rect:nth-child(n+12) { transition-delay: 1.24s !important; }

}
/* The row's gutters overhang the band, so the grid stays inside it rather than clipping them. */
#investment-management.grid-overlay { overflow: visible; }
#investment-management.grid-overlay::before { inset: 0; width: auto; height: auto; }