/* Concept stage: shared styles for animated concept visuals.
   Brand theme follows the scholten.io Brand Design System; schematic theme is the plain draft look. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Ubuntu:wght@400;500;700&display=swap');
:root{--bg:#DFDEDE;--deep:#0E3158;--deep2:#0A2644;--blue:#1A5A99;--orange:#FF8C42;--orange-h:#E07A2F;--cyan:#4ABFBF;--paper:#EDE8DD;--dark:#333333;--muted:#595959;--white:#FFFFFF;
--fh:'Montserrat','Arial Black','Helvetica Neue',Arial,sans-serif;--fb:'Ubuntu','Segoe UI','Helvetica Neue',Arial,sans-serif;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--dark);font-family:var(--fb)}
.cs-wrap{max-width:1080px;margin:0 auto;padding-block:36px;padding-inline:16px}
.cs-kicker{font:700 .78rem/1 var(--fh);letter-spacing:.25rem;text-transform:uppercase;color:var(--orange);margin:0 0 10px}
.cs-wrap h1{font:900 clamp(1.7rem,4vw,2.6rem)/1.1 var(--fh);color:var(--blue);margin:0 0 10px;text-wrap:balance}
.cs-lede{margin:0 0 24px;color:var(--muted);font-size:1.05rem;line-height:1.55;max-width:62ch}
.cs-stage{background:var(--deep);border-radius:12px;overflow:hidden;box-shadow:inset 0 4px 0 var(--orange),0 1px 2px rgba(14,49,88,.08),0 10px 30px rgba(14,49,88,.18)}
.cs-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:18px 20px 0}
.cs-tab{font:500 .85rem var(--fb);color:var(--paper);background:transparent;border:1px solid rgba(237,232,221,.22);border-radius:999px;padding:8px 14px;cursor:pointer;display:flex;gap:8px;align-items:center}
.cs-tab b{font:900 .75rem var(--fh);color:var(--orange)}
.cs-tab[aria-pressed="true"]{background:var(--paper);color:var(--deep);border-color:var(--paper)}
.cs-tab:hover{border-color:var(--orange)}
.cs-tab:focus-visible,.cs-play:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.cs-playbox{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.cs-count{font:500 .78rem/1 var(--fb);color:var(--paper);opacity:.75;min-height:1em;white-space:nowrap;font-variant-numeric:tabular-nums}
.cs-play{font:700 .72rem var(--fh);letter-spacing:.15rem;text-transform:uppercase;color:var(--deep);background:var(--orange);border:0;border-radius:999px;padding:9px 16px;cursor:pointer}
.cs-play:hover{background:var(--orange-h)}
.cs-svgbox{overflow-x:auto}
.cs-svgbox svg{display:block;width:100%;min-width:560px;height:auto}
.cs-embed{display:block;width:100%;aspect-ratio:1000/640;border:0;background:var(--deep)}
.cs-embed[hidden]{display:none}
body.embed .cs-embed{height:100%;aspect-ratio:auto}
.cs-cap{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:baseline;padding:4px 24px 24px;border-top:1px solid rgba(237,232,221,.12)}
.cs-num{grid-row:span 2;font:900 3.2rem/1 var(--fh);color:var(--orange);padding-top:16px}
.cs-cap h2{font:900 1.35rem/1.2 var(--fh);color:var(--white);margin:18px 0 0}
.cs-cap p{margin:0;color:var(--paper);opacity:.85;line-height:1.55;max-width:70ch}
.cs-why{grid-column:2;margin-top:12px;padding:9px 14px;border-left:3px solid var(--orange);background:rgba(255,140,66,.10);color:var(--white);line-height:1.5;max-width:70ch;border-radius:0 6px 6px 0}
.cs-why[hidden]{display:none}
.cs-why b{display:block;font:700 .68rem/1 var(--fh);letter-spacing:.18rem;text-transform:uppercase;color:var(--orange);margin-bottom:6px}
.cs-tab.cs-next{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange)}
.cs-legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px;font-size:.85rem;color:var(--muted)}
.cs-legend span{display:flex;align-items:center;gap:7px}
.cs-legend svg{width:16px;height:16px}
.cs-hint{margin-left:auto}
body.embed .cs-wrap{padding:0;max-width:none}
body.embed header,body.embed .cs-legend{display:none}
body.embed .cs-stage{border-radius:0}
/* In an embed (iframe, modal) the panel fits the frame height: bar and caption keep their size, the drawing scales down. */
body.embed{margin:0;height:100vh;overflow:hidden}
body.embed .cs-wrap,body.embed #stage{height:100%}
body.embed .cs-stage{height:100%;display:flex;flex-direction:column}
body.embed .cs-svgbox{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;justify-content:center}
body.embed .cs-svgbox svg{width:auto;height:100%;min-width:0;max-width:100%}
@media (max-width:560px){.cs-playbox{margin-left:0;align-items:flex-start}.cs-num{font-size:2.4rem}}
/* Schematic theme: neutral draft for agreeing on meaning before the brand pass */
body.schematic{--bg:#F2F3F5;--deep:#FFFFFF;--deep2:#E4E7EC;--blue:#18202C;--orange:#D2781F;--cyan:#17826A;--paper:#18202C;--white:#18202C;--muted:#5B6573;--fh:system-ui,sans-serif;--fb:system-ui,sans-serif}
body.schematic .cs-stage{box-shadow:none;border:1px solid #C3C9D2}
body.schematic .cs-play{color:#fff}
body.schematic .cs-tab{border-color:#C3C9D2}
body.schematic .cs-tab[aria-pressed="true"]{color:#fff}