/* ─────────────────────────────────────────────────────────────
   Canisight — public marketing website
   Plain static site (no framework). Palette and tokens mirror the
   Command app's app.css so the two feel like one product.
   ───────────────────────────────────────────────────────────── */

:root {
    --cs-green: #3d6f42;
    --cs-green-dark: #1e3120;
    --cs-green-light: #4a8a50;
    --cs-beige: #f8f5f2;
    --cs-gray: #e2e2e2;
    --cs-gray-light: #f2f3f5;
    --cs-text: #212934;
    --cs-text-muted: #6b7280;
    --cs-white: #ffffff;
    --cs-danger: #e50000;

    --cs-maxwidth: 1080px;
    --cs-radius: 10px;
    --cs-shadow: 0 1px 2px rgba(30, 49, 32, .06), 0 8px 24px rgba(30, 49, 32, .08);
    --cs-shadow-lg: 0 12px 40px rgba(30, 49, 32, .16);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--cs-beige);
    color: var(--cs-text);
    margin: 0;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin-top: 0; color: var(--cs-green-dark); font-weight: 700; line-height: 1.2; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); letter-spacing: -.01em; }
h3 { font-size: 1.2rem; font-weight: 600; color: var(--cs-text); }
p  { margin-top: 0; }

a { color: var(--cs-green); text-decoration: none; }
a:hover { color: var(--cs-green-dark); }

.cs-container { width: 100%; max-width: var(--cs-maxwidth); margin-inline: auto; padding-inline: 1.25rem; }

/* ── Buttons ─────────────────────────────────────── */

.cs-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    font: inherit;
    font-weight: 600;
    padding: .75rem 1.75rem;
    min-height: 48px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cs-button:hover { text-decoration: none; transform: translateY(-1px); }
.cs-button--primary { color: #fff; background-color: var(--cs-green); border-color: var(--cs-green); }
.cs-button--primary:hover { color: #fff; background-color: var(--cs-green-dark); border-color: var(--cs-green-dark); }
.cs-button--secondary { color: var(--cs-text); background-color: var(--cs-white); border-color: var(--cs-gray); }
.cs-button--secondary:hover { background-color: var(--cs-gray-light); border-color: var(--cs-text-muted); }
.cs-button--lg { padding: .95rem 2.25rem; font-size: 1.1rem; min-height: 56px; }
.cs-button svg { width: 20px; height: 20px; }

/* ── Header / nav ────────────────────────────────── */

.cs-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: rgba(248, 245, 242, .85);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--cs-gray);
}
.cs-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 64px;
}
.cs-brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; color: var(--cs-green-dark); font-size: 1.15rem; }
.cs-brand:hover { color: var(--cs-green-dark); }
.cs-brand svg { width: 26px; height: 26px; color: var(--cs-green); }

.cs-nav { display: flex; align-items: center; gap: .35rem; }
.cs-nav a {
    padding: .5rem .85rem;
    border-radius: 7px;
    color: var(--cs-text);
    font-weight: 500;
}
.cs-nav a:hover { background-color: var(--cs-gray-light); color: var(--cs-green-dark); }
/* aria-current covers any plain links; .active is what Blazor's NavLink sets. */
.cs-nav a[aria-current="page"],
.cs-nav a.active:not(.cs-button) { color: var(--cs-green-dark); background-color: rgba(61, 111, 66, .1); }
.cs-nav .cs-button { padding: .5rem 1.1rem; min-height: 40px; }
.cs-nav .cs-button.active { color: #fff; }

/* Mobile nav — CSS-only toggle (checkbox hack, no JS) */
.cs-nav-toggle, .cs-nav-burger { display: none; }
@media (max-width: 720px) {
    .cs-nav-burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px; height: 44px;
        border: 1px solid var(--cs-gray);
        border-radius: 8px;
        background: var(--cs-white);
        cursor: pointer;
    }
    .cs-nav-burger svg { width: 22px; height: 22px; }
    .cs-nav {
        position: absolute;
        top: 64px; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: .25rem;
        padding: .75rem 1.25rem 1.25rem;
        background: var(--cs-beige);
        border-bottom: 1px solid var(--cs-gray);
        box-shadow: var(--cs-shadow);
        display: none;
    }
    .cs-nav-toggle:checked ~ .cs-nav { display: flex; }
    .cs-nav .cs-button { justify-content: center; }
}

/* ── Sections ────────────────────────────────────── */

.cs-section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.cs-section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.cs-section--alt { background: linear-gradient(180deg, var(--cs-white), var(--cs-beige)); border-block: 1px solid var(--cs-gray); }

.cs-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .8rem;
    font-weight: 700;
    color: var(--cs-green);
    margin-bottom: .75rem;
}
.cs-lead { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--cs-text-muted); max-width: 52ch; }

/* ── Hero ────────────────────────────────────────── */

.cs-hero { padding-block: clamp(3rem, 7vw, 6rem); overflow: hidden; }
.cs-hero__grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.cs-hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }
.cs-hero__media {
    position: relative;
    border-radius: var(--cs-radius);
    box-shadow: var(--cs-shadow-lg);
    overflow: hidden;
    background: var(--cs-white);
}
.cs-hero__art { width: 100%; height: auto; display: block; }

/* Live camera card overlaid on the hero photo */
.cs-live-card {
    position: absolute;
    top: .85rem;
    left: .85rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .75rem .4rem .45rem;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(6px);
    border-radius: 999px;
    box-shadow: var(--cs-shadow);
    font-size: .82rem;
    font-weight: 600;
    color: var(--cs-text);
}
.cs-live-card__icon { width: 18px; height: 18px; color: var(--cs-green); }
.cs-live-card__text { white-space: nowrap; }
.cs-live-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .5rem;
    background: var(--cs-danger);
    color: #fff;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
}
.cs-live-dot {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: #fff;
    animation: cs-live-pulse 1.4s ease-in-out infinite;
}
@keyframes cs-live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(.6); }
}
@media (prefers-reduced-motion: reduce) {
    .cs-live-dot { animation: none; }
}

@media (max-width: 860px) {
    .cs-hero__grid { grid-template-columns: 1fr; }
    .cs-hero__media { max-width: 480px; margin-inline: auto; order: -1; }
}

/* ── Feature cards ───────────────────────────────── */

.cs-grid { display: grid; gap: 1.25rem; }
.cs-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cs-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px) { .cs-grid--3, .cs-grid--2 { grid-template-columns: 1fr; } }

.cs-card {
    background: var(--cs-white);
    border: 1px solid var(--cs-gray);
    border-radius: var(--cs-radius);
    padding: 1.75rem;
    box-shadow: var(--cs-shadow);
}
.cs-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border-radius: 12px;
    background: rgba(61, 111, 66, .1);
    color: var(--cs-green);
    margin-bottom: 1rem;
}
.cs-card__icon svg { width: 24px; height: 24px; }
.cs-card h3 { margin-bottom: .4rem; }
.cs-card p { color: var(--cs-text-muted); margin-bottom: 0; }

/* ── Product choice cards ────────────────────────── */

.cs-choice {
    display: flex;
    flex-direction: column;
    background: var(--cs-white);
    border: 1px solid var(--cs-gray);
    border-radius: var(--cs-radius);
    padding: 2rem;
    box-shadow: var(--cs-shadow);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cs-choice:hover { transform: translateY(-3px); box-shadow: var(--cs-shadow-lg); border-color: var(--cs-green-light); }
.cs-choice__badge {
    align-self: flex-start;
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px;
    border-radius: 14px;
    background: var(--cs-green); color: #fff;
    margin-bottom: 1.25rem;
}
.cs-choice__badge svg { width: 28px; height: 28px; }
.cs-choice h3 { font-size: 1.4rem; color: var(--cs-green-dark); }
.cs-choice p { color: var(--cs-text-muted); flex: 1 1 auto; }
.cs-choice .cs-button { margin-top: 1.5rem; width: 100%; }

/* ── Figure / photo ──────────────────────────────── */

.cs-figure {
    border-radius: var(--cs-radius);
    overflow: hidden;
    box-shadow: var(--cs-shadow-lg);
    background: var(--cs-white);
    border: 1px solid var(--cs-gray);
}
.cs-figure img, .cs-figure svg { display: block; width: 100%; height: auto; }
.cs-figure figcaption { padding: .85rem 1.25rem; font-size: .9rem; color: var(--cs-text-muted); border-top: 1px solid var(--cs-gray); }

/* ── Prose (terms, contact) ──────────────────────── */

.cs-prose { max-width: 68ch; }
.cs-prose h2 { margin-top: 2.5rem; }
.cs-prose h2:first-child { margin-top: 0; }
.cs-prose p, .cs-prose li { color: var(--cs-text); }
.cs-prose ul, .cs-prose ol { padding-left: 1.25rem; }
.cs-prose li { margin-bottom: .5rem; }

.cs-notice {
    padding: 1rem 1.25rem;
    border-radius: var(--cs-radius);
    border: 1px solid transparent;
    margin-bottom: 1.5rem;
}
.cs-notice--warn { color: #7a4f01; background-color: #fff4e0; border-color: #ffe2b0; }
.cs-notice--info { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; }
.cs-notice strong { color: inherit; }

/* ── Contact ─────────────────────────────────────── */

.cs-contact-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--cs-white);
    border: 1px solid var(--cs-gray);
    border-radius: var(--cs-radius);
    padding: 1.5rem;
    box-shadow: var(--cs-shadow);
    max-width: 460px;
}
.cs-contact-card__avatar {
    flex: 0 0 auto;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(61, 111, 66, .12);
    color: var(--cs-green);
    display: inline-flex; align-items: center; justify-content: center;
}
.cs-contact-card__avatar svg { width: 28px; height: 28px; }
.cs-contact-card .name { font-weight: 700; color: var(--cs-green-dark); }
.cs-contact-card a { font-weight: 600; }

/* ── CTA band ────────────────────────────────────── */

.cs-cta {
    background: linear-gradient(135deg, var(--cs-green-dark), var(--cs-green));
    color: #fff;
    border-radius: var(--cs-radius);
    padding: clamp(2rem, 4vw, 3rem);
    text-align: center;
}
.cs-cta h2 { color: #fff; }
.cs-cta p { color: rgba(255, 255, 255, .85); max-width: 48ch; margin-inline: auto; }
.cs-cta .cs-button--primary { background: #fff; color: var(--cs-green-dark); border-color: #fff; }
.cs-cta .cs-button--primary:hover { background: var(--cs-beige); color: var(--cs-green-dark); }

/* ── Footer ──────────────────────────────────────── */

.cs-footer {
    border-top: 1px solid var(--cs-gray);
    background: var(--cs-white);
    padding-block: 2rem;
    margin-top: 2rem;
}
.cs-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.cs-footer a { color: var(--cs-text-muted); font-weight: 500; margin-right: 1rem; }
.cs-footer a:hover { color: var(--cs-green-dark); }
.cs-footer small { color: var(--cs-text-muted); }

/* ── Demo-animatie ───────────────────────────────── */

/* Eén lus van 25 seconden, opgedeeld in vijf stappen. Alles hangt aan dezelfde
   duur: zolang elke stap dezelfde keyframe-percentages aanhoudt, lopen de
   telefoon, het dashboard en het bijschrift gelijk. Aanpassen doe je hier —
   --cs-demo-loop is de enige plek waar de tijd staat. */
.cs-demo {
    --cs-demo-loop: 25s;
    margin: 0;
}

.cs-demo__stage {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--cs-radius);
    background: var(--cs-white);
    box-shadow: var(--cs-shadow);
}

.cs-demo__stage text { font-family: inherit; }

/* Vormen */
.cs-demo__phone-body, .cs-demo__desk-body { fill: var(--cs-green-dark); }
.cs-demo__desk-bar { fill: #16261a; }
.cs-demo__dot { fill: rgba(255, 255, 255, .35); }
.cs-demo__notch { fill: rgba(255, 255, 255, .25); }
.cs-demo__screen { fill: var(--cs-beige); }
.cs-demo__viewport { fill: #0e1a11; }
.cs-demo__map { fill: #dfe9d8; }
.cs-demo__map-lines { stroke: #cbd9c2; stroke-width: 2; fill: none; }
.cs-demo__input, .cs-demo__code-box { fill: var(--cs-white); stroke: var(--cs-gray); stroke-width: 2; }
.cs-demo__notice { fill: #d1ecf1; stroke: #bee5eb; stroke-width: 2; }
.cs-demo__button { fill: var(--cs-green); }

/* Tekst */
.cs-demo__h { font-size: 17px; font-weight: 700; fill: var(--cs-green-dark); }
.cs-demo__h-sm { font-size: 13px; font-weight: 600; fill: var(--cs-white); }
.cs-demo__phone .cs-demo__h-sm { fill: var(--cs-text); }
.cs-demo__small { font-size: 12px; fill: var(--cs-text-muted); }

/* Tekst die op het donkere dashboard staat in plaats van op een licht vlak. Zonder dit verdween de
   kop "Koppelcode" volledig: donkergroen op donkergroen. */
.cs-demo__h--op-donker { fill: var(--cs-white); }
.cs-demo__small--op-donker { fill: rgba(255, 255, 255, .7); }
.cs-demo__label { font-size: 12px; font-weight: 600; fill: rgba(255, 255, 255, .75); }
.cs-demo__button-text { font-size: 14px; font-weight: 600; fill: var(--cs-white); }
/* Maat en spatiëring zo dat zes cijfers binnen het invoervak van de telefoon blijven: op 22px
   met 6px spatiëring liep de code het vak uit en bijna het scherm af. */
.cs-demo__code-text { font-size: 17px; font-weight: 700; letter-spacing: 3px; fill: var(--cs-text); }
.cs-demo__code-big { font-size: 34px; font-weight: 700; letter-spacing: 8px; fill: var(--cs-green-dark); }
.cs-demo__pill-bg { fill: rgba(0, 0, 0, .6); }
.cs-demo__pill-text { font-size: 11px; font-weight: 600; fill: var(--cs-white); }
.cs-demo__rec-dot { fill: var(--cs-danger); }
.cs-demo__rec-box { fill: #d1ecf1; stroke: #bee5eb; stroke-width: 2; }
.cs-demo__rec-text { font-size: 12px; font-weight: 600; fill: #0c5460; }

/* GPS-schuifje: aan, in dezelfde kleur als in de app */
.cs-demo__switch-track { fill: var(--cs-green); }
.cs-demo__switch-thumb { fill: var(--cs-white); }

/* Tabbladen — Video is actief in stap 3, Route in stap 4 en 5 */
.cs-demo__tab { fill: transparent; }
.cs-demo__tab-text { font-size: 13px; font-weight: 600; fill: rgba(255, 255, 255, .6); }
.cs-demo__tab-rule { stroke: rgba(255, 255, 255, .2); stroke-width: 2; }

/* Route: blauw is de hele wandeling, rood het opgenomen stuk */
.cs-demo__route-line {
    fill: none;
    stroke: #2563eb;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}
.cs-demo__route-rec {
    fill: none;
    stroke: #c0392b;
    stroke-width: 6;
    stroke-linecap: round;
    /* Toon alleen 35%–63% van het pad: dat is het stuk dat is opgenomen. */
    stroke-dasharray: 28 100;
    stroke-dashoffset: -35;
    opacity: 0;
}
.cs-demo__route-head { fill: #c0392b; stroke: var(--cs-white); stroke-width: 3; opacity: 0; }
.cs-demo__legend-bg { fill: rgba(255, 255, 255, .85); }
.cs-demo__legend-rec { stroke: #c0392b; stroke-width: 4; stroke-linecap: round; }
.cs-demo__legend-walk { stroke: #2563eb; stroke-width: 4; stroke-linecap: round; }
.cs-demo__legend-text { font-size: 11px; fill: var(--cs-text); }

/* ── De lus ──────────────────────────────────────── */

/* Stap 1 (0–5 s), 2 (5–9 s), 3 (9–14 s), 4 (14–19,5 s), 5 (19,5–25 s).
   De percentages zijn die grenzen gedeeld door 25 s. */
.cs-demo__step { opacity: 0; }
.cs-demo__step--1 { animation: cs-demo-s1 var(--cs-demo-loop) infinite; }
.cs-demo__step--2 { animation: cs-demo-s2 var(--cs-demo-loop) infinite; }
.cs-demo__step--3 { animation: cs-demo-s345 var(--cs-demo-loop) infinite; }

@keyframes cs-demo-s1  { 0%, 18% { opacity: 1 } 20%, 100% { opacity: 0 } }
@keyframes cs-demo-s2  { 0%, 20% { opacity: 0 } 22%, 34% { opacity: 1 } 36%, 100% { opacity: 0 } }
@keyframes cs-demo-s345 { 0%, 34% { opacity: 0 } 36%, 98% { opacity: 1 } 100% { opacity: 0 } }

/* De code verschijnt cijfer voor cijfer, zoals iemand hem intikt. */
.cs-demo__digit { opacity: 0; animation: cs-demo-digit var(--cs-demo-loop) infinite; }
.cs-demo__digit--1 { animation-delay: calc(var(--cs-demo-loop) * .02); }
.cs-demo__digit--2 { animation-delay: calc(var(--cs-demo-loop) * .04); }
.cs-demo__digit--3 { animation-delay: calc(var(--cs-demo-loop) * .06); }
.cs-demo__digit--4 { animation-delay: calc(var(--cs-demo-loop) * .08); }
.cs-demo__digit--5 { animation-delay: calc(var(--cs-demo-loop) * .10); }
.cs-demo__digit--6 { animation-delay: calc(var(--cs-demo-loop) * .12); }
@keyframes cs-demo-digit { 0% { opacity: 0 } 4%, 18% { opacity: 1 } 20%, 100% { opacity: 0 } }

/* Wachtstipjes tijdens "wachten op goedkeuring" */
.cs-demo__wait { fill: var(--cs-green); animation: cs-demo-wait 1.2s ease-in-out infinite; }
.cs-demo__wait--2 { animation-delay: .2s; }
.cs-demo__wait--3 { animation-delay: .4s; }
@keyframes cs-demo-wait { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }

/* De goedkeurknop krijgt een tik op het moment dat de trainer hem indrukt. */
.cs-demo__approve { transform-origin: 575px 258px; animation: cs-demo-press var(--cs-demo-loop) infinite; }
@keyframes cs-demo-press {
    0%, 29% { transform: scale(1) }
    31% { transform: scale(.94) }
    33%, 100% { transform: scale(1) }
}

/* Tabblad wisselt van Video naar Route halverwege stap 4. */
.cs-demo__tab--video { animation: cs-demo-tab-video var(--cs-demo-loop) infinite; }
.cs-demo__tab--route { animation: cs-demo-tab-route var(--cs-demo-loop) infinite; }
.cs-demo__tab-text--video { animation: cs-demo-tabtext-video var(--cs-demo-loop) infinite; }
.cs-demo__tab-text--route { animation: cs-demo-tabtext-route var(--cs-demo-loop) infinite; }
@keyframes cs-demo-tab-video { 0%, 54% { fill: var(--cs-beige) } 56%, 100% { fill: transparent } }
@keyframes cs-demo-tab-route { 0%, 54% { fill: transparent } 56%, 100% { fill: var(--cs-beige) } }
@keyframes cs-demo-tabtext-video { 0%, 54% { fill: var(--cs-green-dark) } 56%, 100% { fill: rgba(255,255,255,.6) } }
@keyframes cs-demo-tabtext-route { 0%, 54% { fill: rgba(255,255,255,.6) } 56%, 100% { fill: var(--cs-green-dark) } }

/* Videopaneel en routepaneel wisselen op hetzelfde moment als de tabbladen. */
.cs-demo__panel--video { animation: cs-demo-panel-video var(--cs-demo-loop) infinite; }
.cs-demo__panel--route { opacity: 0; animation: cs-demo-panel-route var(--cs-demo-loop) infinite; }
@keyframes cs-demo-panel-video { 0%, 54% { opacity: 1 } 56%, 100% { opacity: 0 } }
@keyframes cs-demo-panel-route { 0%, 54% { opacity: 0 } 56%, 100% { opacity: 1 } }

/* De route tekent zichzelf in stap 4; in stap 5 kleurt het opgenomen stuk rood. */
.cs-demo__route-line { animation: cs-demo-draw var(--cs-demo-loop) infinite; }
@keyframes cs-demo-draw { 0%, 56% { stroke-dashoffset: 100 } 76%, 100% { stroke-dashoffset: 0 } }

.cs-demo__route-rec { animation: cs-demo-rec-show var(--cs-demo-loop) infinite; }
@keyframes cs-demo-rec-show { 0%, 78% { opacity: 0 } 82%, 100% { opacity: 1 } }

/* De kop van de route loopt met het tekenen mee. */
.cs-demo__route-head {
    offset-path: path("M340 350c60-10 70-60 120-70s90 30 140 10 80-60 110-66");
    animation: cs-demo-head var(--cs-demo-loop) infinite;
}
@keyframes cs-demo-head {
    0%, 56% { offset-distance: 0%; opacity: 0 }
    58% { opacity: 1 }
    76% { offset-distance: 100%; opacity: 1 }
    100% { offset-distance: 100%; opacity: 1 }
}

/* Opnamebadge: aan tijdens het opnemen, weg zodra er wordt nabesproken. */
.cs-demo__recording { opacity: 0; animation: cs-demo-rec var(--cs-demo-loop) infinite; }
@keyframes cs-demo-rec { 0%, 60% { opacity: 0 } 62%, 76% { opacity: 1 } 78%, 100% { opacity: 0 } }

.cs-demo__legend { opacity: 0; animation: cs-demo-legend var(--cs-demo-loop) infinite; }
@keyframes cs-demo-legend { 0%, 78% { opacity: 0 } 80%, 100% { opacity: 1 } }

/* ── Bijschriften ────────────────────────────────── */

/* Vaste hoogte: de regels liggen op elkaar, dus zonder dit springt de pagina
   bij elke stap een stukje. */
.cs-demo__captions {
    position: relative;
    min-height: 3.2em;
    margin-top: 1rem;
    color: var(--cs-text-muted);
}

.cs-demo__caption {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.cs-demo__caption strong { color: var(--cs-green-dark); }
.cs-demo__caption--1 { animation: cs-demo-s1 var(--cs-demo-loop) infinite; }
.cs-demo__caption--2 { animation: cs-demo-s2 var(--cs-demo-loop) infinite; }
.cs-demo__caption--3 { animation: cs-demo-c3 var(--cs-demo-loop) infinite; }
.cs-demo__caption--4 { animation: cs-demo-c4 var(--cs-demo-loop) infinite; }
.cs-demo__caption--5 { animation: cs-demo-c5 var(--cs-demo-loop) infinite; }
@keyframes cs-demo-c3 { 0%, 34% { opacity: 0 } 36%, 54% { opacity: 1 } 56%, 100% { opacity: 0 } }
@keyframes cs-demo-c4 { 0%, 54% { opacity: 0 } 56%, 76% { opacity: 1 } 78%, 100% { opacity: 0 } }
@keyframes cs-demo-c5 { 0%, 76% { opacity: 0 } 78%, 98% { opacity: 1 } 100% { opacity: 0 } }

/* Wie liever geen beweging ziet, krijgt het eindbeeld: de nabesproken route met
   beide kleuren erin. Dat is het plaatje dat het meeste vertelt. */
@media (prefers-reduced-motion: reduce) {
    .cs-demo *, .cs-demo *::before, .cs-demo *::after { animation: none !important; }
    .cs-demo__step--1, .cs-demo__step--2, .cs-demo__panel--video, .cs-demo__recording { opacity: 0; }
    .cs-demo__step--3, .cs-demo__panel--route, .cs-demo__legend, .cs-demo__digit { opacity: 1; }
    .cs-demo__route-line { stroke-dashoffset: 0; }
    .cs-demo__route-rec { opacity: 1; }
    .cs-demo__route-head { opacity: 1; offset-distance: 100%; }
    .cs-demo__tab--route { fill: var(--cs-beige); }
    .cs-demo__tab-text--route { fill: var(--cs-green-dark); }
    .cs-demo__caption { position: static; opacity: 1; }
    .cs-demo__caption--1, .cs-demo__caption--2, .cs-demo__caption--3, .cs-demo__caption--4 { display: none; }
    .cs-demo__captions { min-height: 0; }
}

/* ── Utilities ───────────────────────────────────── */

.cs-mt-1 { margin-top: 1rem; }
.cs-mt-2 { margin-top: 2rem; }
.cs-center { text-align: center; }
.cs-section-head { max-width: 60ch; margin-bottom: 2.5rem; }
.cs-center .cs-section-head { margin-inline: auto; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}