/* PolicySims landing page (www.policysims.com) */
    :root {
        --fiscal-dk: #a78bfa; --trade-dk: #2997ff; --regional-dk: #34c27a; --slide-ms: 8000ms;
        --ocean: #eef1f5; --land: #ffffff; --land-line: #b8bdc7;
        --arc: #0a3d80; --nat-fill: #e1d4fb; --nat-line: #9f86e6; --reg-line: #4f9a76;
    }

    /* ---------- Dark hero ---------- */
    .dark { background: var(--black); color: #f5f5f7; }
    .dark .brand { color: #fff; }
    .dark .nav-links a { color: #d2d2d7; }
    .dark .nav-links a[aria-current="page"] { color: #fff; font-weight: 500; }
    @media (max-width: 820px) { .nav-links { display: flex; } }
    @media (max-width: 560px) { .nav-links { gap: 16px; } }

    .hero { padding: clamp(36px, 6vw, 80px) 0 clamp(48px, 6vw, 80px); }
    .hero h1 { font-size: clamp(36px, 4.9vw, 66px); line-height: 1.04; font-weight: 600; letter-spacing: -0.03em; max-width: 21ch; text-wrap: balance; color: #fff; }
    .hero .lede .ast { color: #86868b; }
    .hero .lede { margin-top: 22px; font-size: clamp(17px, 1.5vw, 20px); color: #d2d2d7; max-width: 34em; }
    .hero .fnote { margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: #86868b; max-width: 72em; }

    /* ---------- Carousel ---------- */
    .carousel { margin-top: clamp(40px, 5vw, 64px); }
    .rail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    .pill {
        position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px;
        background: transparent; color: #d2d2d7; border: 1px solid #424245; border-radius: var(--radius-capsule);
        padding: 8px 16px; font-size: 14.5px; cursor: pointer;
        transition: border-color 160ms var(--ease), color 160ms var(--ease), background 160ms var(--ease);
    }
    .pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
    .pill:hover { border-color: #86868b; }
    .pill[aria-selected="true"] { color: #fff; border-color: #6e6e73; background: #1d1d1f; font-weight: 500; }
    .pill .prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--c); transform: scaleX(0); transform-origin: left; }
    .pill[aria-selected="true"] .prog { animation: fill var(--slide-ms) linear forwards; }
    .carousel.paused .pill .prog { animation-play-state: paused; }
    .carousel.static .pill[aria-selected="true"] .prog { animation: none; transform: scaleX(1); }
    @keyframes fill { to { transform: scaleX(1); } }
    .pause { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #424245; background: transparent; color: #d2d2d7; cursor: pointer; display: grid; place-items: center; }
    .pause:hover { border-color: #86868b; color: #fff; }
    .pause svg { width: 12px; height: 12px; fill: currentColor; }

    .stage { display: grid; margin-top: 22px; border-top: 1px solid #272729; padding-top: clamp(24px, 3vw, 36px); }
    .slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px);
        opacity: 0; visibility: hidden; transition: opacity 420ms var(--ease), visibility 0s linear 420ms; }
    .slide.on { opacity: 1; visibility: visible; transition: opacity 420ms var(--ease), visibility 0s; }
    .who { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: #a1a1a6; }
    .who::before { content: ""; flex: none; width: 3px; align-self: stretch; border-radius: 2px; background: var(--c); }
    .who b { display: block; color: #f5f5f7; font-weight: 500; }
    .slide h2 { margin-top: 22px; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; font-weight: 600; letter-spacing: -0.025em; color: #fff; max-width: 18ch; }
    .stats { margin: 28px 0 0; display: grid; }
    .stats div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid #272729; }
    .stats dt { font-size: 15px; color: #a1a1a6; }
    .stats dd { margin: 0; font: 600 24px var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; }

    .panel { margin: 0; background: #1d1d1f; border-radius: var(--radius-xl); padding: clamp(18px, 2.4vw, 28px); display: flex; flex-direction: column; min-height: 420px;
        --chart-ink: #f5f5f7; --chart-ink-2: #d2d2d7; --chart-muted: #a1a1a6; --chart-axis: #424245; --chart-node: #1d1d1f; }
    .panel .cap { font-size: 14px; color: #d2d2d7; font-weight: 500; }
    .panel .chart { margin-top: 18px; flex: 1; display: flex; align-items: center; }
    .panel .chart > svg { width: 100%; }
    .panel .illustrative { color: #86868b; margin-top: 12px; }
    .panel.map-panel { padding: 0; overflow: hidden; position: relative; }
    .map-panel .cap { position: absolute; z-index: 500; left: 18px; top: 16px; right: 18px; pointer-events: none; text-shadow: 0 1px 6px #000; }
    .map-panel .illustrative { position: absolute; z-index: 500; left: 18px; bottom: 12px; margin: 0; pointer-events: none; text-shadow: 0 1px 4px #000; max-width: 60%; }
    #map { flex: 1; min-height: 420px; background: #0e0e10; }
    .leaflet-container { font-family: var(--font-text); }
    .leaflet-control-attribution { background: rgba(0,0,0,0.6) !important; color: #86868b !important; font-size: 10.5px; }
    .leaflet-control-attribution a { color: #a1a1a6 !important; }
    .new-road { stroke-dasharray: 900; stroke-dashoffset: 900; }
    .slide.on .new-road { animation: draw 1600ms var(--ease) 300ms forwards; }
    @keyframes draw { to { stroke-dashoffset: 0; } }
    .badge { background: rgba(0,0,0,0.78); border: 1px solid #34c27a; color: #fff; border-radius: 10px; padding: 5px 9px; font: 500 12px/1.25 var(--font-text); white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,0.5); }
    .badge b { display: block; font: 600 17px var(--font-display); letter-spacing: -0.01em; color: #34c27a; }
    .badge.quiet { border-color: #424245; }
    .badge.quiet b { color: #f5f5f7; }
    .leaflet-div-icon { background: none; border: 0; }

    /* ---------- Levels: regional, national and global ---------- */
    .levels { padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 104px); }
    .levels h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; font-weight: 600; }
    .levels .intro { margin-top: 10px; color: var(--ink-2); font-size: 18px; }

    .lt-card { background: var(--pale); border-radius: var(--radius-2xl); padding: clamp(22px, 3vw, 36px); }
    .lt { transition: opacity 180ms var(--ease); }
    .lt.fading { opacity: 0; }
    .lt-who { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
    .lt-who::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
    .lt h3 { margin-top: 8px; font-size: 26px; font-weight: 600; line-height: 1.15; }
    .lt-line { margin-top: 6px; color: var(--ink-2); font-size: 16px; }
    .lt-q { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
    .lt-q li { position: relative; padding-left: 16px; font: 500 16px/1.4 var(--font-display); letter-spacing: -0.01em; }
    .lt-q li::before { content: ""; position: absolute; left: 0; top: 0.58em; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
    .lt-out { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
    .lt-out > span { font-size: 13px; color: var(--muted); margin-right: 2px; }
    .lt-out ul { display: contents; }
    .lt-out li { list-style: none; font-size: 13px; color: var(--ink-2); background: #fff; border: 1px solid var(--hair); border-radius: var(--radius-capsule); padding: 3px 10px; }
    .map-note { margin-top: 10px; font-size: 12.5px; color: var(--muted); }

    /* Map layers. Each layer of the stack sets its level with data-lv. */
    .geo { display: block; width: 100%; height: auto; }
    .geo path, .geo rect { vector-effect: non-scaling-stroke; stroke-linejoin: round; }
    .geo .land, .geo .idn, .geo .bali { fill: var(--land); stroke: var(--land-line); stroke-width: 0.7; transition: fill 500ms var(--ease), stroke 500ms var(--ease); }
    .geo .bali-line, .geo .road { fill: none; stroke: transparent; transition: stroke 500ms var(--ease); }
    /* The world: every country in blue with white borders, Indonesia as one shape */
    [data-lv="global"] .land { fill: var(--trade); stroke: #fff; stroke-width: 0.5; }
    [data-lv="global"] .idn, [data-lv="global"] .bali { fill: var(--trade); stroke: var(--trade); stroke-width: 1.2; }
    [data-lv="national"] .idn { fill: var(--nat-fill); stroke: var(--nat-line); stroke-width: 0.7; }
    [data-lv="national"] .bali { fill: var(--nat-fill); stroke: var(--nat-fill); }
    [data-lv="national"] .bali-line { stroke: var(--nat-line); stroke-width: 0.7; }
    [data-lv="regional"] .bali { fill: color-mix(in srgb, var(--regional) calc(var(--v) * 100%), #fff); stroke: var(--reg-line); stroke-width: 0.8; }
    [data-lv="regional"] .road { stroke: rgba(29, 29, 31, 0.24); stroke-width: 0.9; }
    .geo .arc { fill: none; stroke: var(--arc); stroke-width: calc(var(--w) * 0.6); stroke-linecap: round; stroke-opacity: 0.8; }
    .geo .spill { fill: none; stroke: #064d30; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 4 3; }
    .geo .pt-o { stroke: #fff; stroke-width: 9; stroke-linecap: round; }
    .geo .pt-i { stroke: #064d30; stroke-width: 5; stroke-linecap: round; }
    .geo .zf { fill: none; stroke-width: 1.4; stroke-dasharray: 5 4; pointer-events: none; }
    .geo .zf-n { stroke: var(--fiscal); }
    .geo .zf-r { stroke: var(--regional); }

    /* ---------- Stacked layers, the world on top ---------- */
    .st-grid { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: clamp(24px, 3.5vw, 48px); align-items: center; }
    .st .geo { overflow: visible; }
    .st-lift { transition: transform 1100ms var(--ease); }
    .st.collapsed .st-lift { transform: translateY(var(--dy)); }
    .st .cone { transition: opacity 500ms var(--ease) 800ms; }
    .st.collapsed .cone { opacity: 0; transition: none; }
    .st-name, .st-place, .st-dot { transition: opacity 400ms var(--ease) 900ms; }
    .st.collapsed .st-name, .st.collapsed .st-place, .st.collapsed .st-dot { opacity: 0; transition: none; }
    .cone line { stroke-width: 1; stroke-opacity: 0.6; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
    .st-plane { cursor: pointer; outline: none; }
    .st-plane .shadow { fill: rgba(0, 0, 0, 0.14); }
    .st-plane .edge { fill: #d9dce3; }
    .st-plane .face { fill: var(--ocean); }
    .st-plane .ring { fill: none; stroke: #c9ccd3; stroke-width: 1; transition: stroke 200ms var(--ease), stroke-width 200ms var(--ease); }
    .st-plane:hover .ring { stroke: var(--c); }
    .st-plane[aria-pressed="true"] .ring { stroke: var(--c); stroke-width: 2.5; }
    .st-plane:focus-visible .ring { stroke: var(--action); stroke-width: 3; }
    .st-name { font: 600 17px var(--font-display); letter-spacing: -0.01em; fill: var(--ink-2); }
    .st-place { font: 400 13px var(--font-text); fill: var(--muted); }
    .st-plane[aria-pressed="true"] .st-name { fill: var(--ink); }
    .st-dot { fill: var(--c); }
    .st-ctrl { margin-top: 26px; display: flex; align-items: center; gap: 12px; }
    .st-ctrl[hidden] { display: none; }
    .st-track { flex: 1; height: 3px; border-radius: 2px; background: var(--soft); overflow: hidden; }
    .st-prog { display: block; height: 100%; background: var(--c); transform: scaleX(0); transform-origin: left; }
    .st-pause { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--soft); background: #fff; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
    .st-pause:hover { border-color: var(--muted); color: var(--ink); }
    .st-pause svg { width: 11px; height: 11px; fill: currentColor; }
    .st-run .st-prog { animation: st-fill 4000ms linear forwards; }
    .st-run.st-held .st-prog { animation-play-state: paused; }
    @keyframes st-fill { to { transform: scaleX(1); } }

    /* ---------- Footer ---------- */
    .foot { border-top: 1px solid var(--hair); padding: 28px 0 40px; font-size: 13.5px; color: var(--muted); }
    .foot .wrap { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: baseline; justify-content: space-between; }
    .foot strong { color: var(--ink); font: 600 15px var(--font-display); }
    .foot .credits { flex-basis: 100%; margin-top: 10px; font-size: 12px; }

    @media (max-width: 900px) {
        .slide, .st-grid { grid-template-columns: 1fr; }
        .panel, #map { min-height: 340px; }
    }