/* Visualizations — page-specific styles */

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html, body { width: 100%; height: 100%; background: var(--clr-bg-page); overflow: hidden; }
        .viz-wrap {
            width: 100%; height: 100vh;
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            position: relative;
        }
        canvas { cursor: grab; }
        canvas:active { cursor: grabbing; }
        .back-link {
            position: fixed; top: 2.8rem; left: 1rem;
            font-family: 'Inter', sans-serif; font-size: 0.75rem;
            color: var(--clr-dark-text); text-decoration: none; z-index: 10;
            background: rgba(255, 255, 255, 0.85); padding: 0.4rem 0.8rem;
            border-radius: 6px; backdrop-filter: blur(4px);
            box-shadow: 0 1px 4px rgba(0,0,0,0.08);
        }
        .back-link:hover { color: var(--clr-primary); }
        .viz-caption {
            position: fixed; bottom: 2rem; left: 50%;
            transform: translateX(-50%); text-align: center;
            font-family: 'Inter', sans-serif; font-size: 0.8rem;
            color: var(--clr-dark-text); max-width: 90%; z-index: 10;
            background: rgba(255, 255, 255, 0.92); padding: 0.6rem 1.5rem;
            border-radius: 8px; backdrop-filter: blur(4px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            transition: opacity 0.8s;
        }
        .viz-caption .red { color: var(--clr-danger); font-weight: 700; }
        .viz-caption .gold { color: var(--clr-amber); font-weight: 600; }
        .viz-stat {
            position: fixed; top: 2.8rem; right: 1rem;
            font-family: 'Inter', sans-serif; z-index: 10;
            background: rgba(255, 255, 255, 0.92); padding: 0.8rem 1.2rem;
            border-radius: 10px; backdrop-filter: blur(4px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            text-align: right;
        }
        .viz-stat .label { font-size: 0.65rem; color: var(--clr-text-secondary); text-transform: uppercase; letter-spacing: 0.08em; }
        .viz-stat .val { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 0.15rem; }
        .viz-stat .val.red { color: var(--clr-danger); }
        .viz-stat .val.grey { color: var(--clr-slate-dark); font-size: 0.9rem; font-weight: 500; }
        .viz-stat .divider { height: 1px; background: var(--clr-border); margin: 0.5rem 0; }
        /* Phase intro overlay */
        .intro-overlay {
            position: fixed; inset: 0; z-index: 30;
            display: flex; align-items: center; justify-content: center;
            background: var(--clr-bg-page);
            transition: opacity 1s;
        }
        .intro-overlay.fade { opacity: 0; pointer-events: none; }
        .intro-text {
            text-align: center; font-family: 'Inter', sans-serif;
        }
        .intro-text .big { font-size: 5rem; font-weight: 700; color: var(--clr-danger); line-height: 1; }
        .intro-text .sub { font-size: 1.1rem; color: var(--clr-text-secondary); margin-top: 0.6rem; font-weight: 400; }
        /* Company marquee bar */
        .company-bar {
            position: fixed; top: 0; left: 0; right: 0; z-index: 15;
            background: rgba(255,255,255,0.92); backdrop-filter: blur(4px);
            border-bottom: 1px solid var(--clr-border);
            overflow: hidden; white-space: nowrap;
            padding: 0.4rem 0;
            opacity: 0; transition: opacity 0.8s;
        }
        .company-track {
            display: inline-block;
            animation: marquee-scroll 40s linear infinite;
            white-space: nowrap;
        }
        .company-track span {
            display: inline-block;
            font-family: 'Inter', sans-serif;
            font-size: 0.7rem; font-weight: 600;
            letter-spacing: 0.04em;
            color: var(--clr-text-muted);
            padding: 0.15rem 1rem;
            cursor: pointer;
            transition: color 0.2s;
        }
        .company-track span:hover { color: var(--clr-danger); }
        .company-track span.active { color: var(--clr-danger); font-weight: 700; }
        @keyframes marquee-scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .company-bar:hover .company-track { animation-play-state: paused; }
        @media (prefers-reduced-motion: reduce) { .company-track { animation: none; } }
        @media (max-width: 600px) {
            .intro-text .big { font-size: 3rem; }
            .intro-text .sub { font-size: 0.9rem; }
            .viz-stat .val { font-size: 1.2rem; }
            .back-link { top: 3.2rem; }
            .viz-stat { top: 3.2rem; }
        }