/* uitgelichte cases: de hele sectie is een lijntekening van de wereld van één case, zoals op 404 en 500; alles past binnen het scherm */
.cx{--cxH:clamp(640px,calc(100svh - 72px),860px);position:relative;isolation:isolate;overflow:hidden;background:var(--color-card);color:var(--color-ink)}
.cx-slides{display:grid}
.cx-slide{position:static;grid-area:1/1;visibility:hidden;opacity:0;transition:opacity .6s ease,visibility 0s .6s;--cx-bg:var(--color-card);--cx-soft:var(--color-accent-soft);--cx-acc:var(--color-accent)}
.cx-slide.is-on{visibility:visible;opacity:1;transition:opacity .6s ease .1s,visibility 0s}
.cx-scene{position:absolute;inset:0;z-index:-1;background:var(--cx-bg)}
.cx-bg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* lijnwerk zoals het toetsenbord op 404: kap en bovenvlak, schroeven, één accent */
.cx .cap{fill:var(--color-paper);stroke:var(--color-ink);stroke-width:1.8;stroke-linejoin:round}
.cx .top{fill:var(--color-card);stroke:var(--color-ink);stroke-width:1.1}
.cx .ln{fill:none;stroke:var(--color-ink);stroke-width:1.3;stroke-linecap:round}
.cx .hl{fill:none;stroke:var(--color-ink);stroke-opacity:.25;stroke-width:2;stroke-linecap:round}
.cx .scr{fill:var(--color-paper);stroke:var(--color-ink);stroke-width:1}
.cx .ring{fill:var(--cx-soft);stroke:var(--cx-acc);stroke-width:1.6}
.cx .hub{fill:var(--cx-acc)}
.cx .plate{fill:var(--color-paper-2);stroke:var(--color-ink);stroke-width:1}
.cx .lgm{font:600 10px var(--font-mono);fill:var(--color-ink-2);letter-spacing:.06em}
.cx .led{fill:var(--color-ok);animation:cx-led 2.4s ease-in-out infinite}
.cx .led-ring{fill:none;stroke:var(--color-ok);stroke-width:1.2;opacity:.4}
@keyframes cx-led{50%{opacity:.35}}
.cx .blk{fill:var(--color-ink);stroke:var(--color-ink);stroke-width:1.4}
.cx .ln-w{fill:none;stroke:#fff;stroke-opacity:.35;stroke-width:1.4;stroke-linecap:round}
.cx .red{fill:var(--color-accent);stroke:var(--color-ink);stroke-width:1.8;stroke-linejoin:round}
.cx .hose{fill:none;stroke:var(--color-ink);stroke-width:9;stroke-linecap:round}
.cx .hose-hl{fill:none;stroke:#fff;stroke-opacity:.22;stroke-width:2;stroke-linecap:round;stroke-dasharray:3 6}
.cx .gr{fill:var(--color-paper-2);stroke:var(--color-ink);stroke-width:1.4}
.cx .mt{fill:#E4E1DB;stroke:var(--color-ink);stroke-width:1.1}
.cx .mt-top{fill:#F4F2EE;stroke:var(--color-ink);stroke-width:1.1}
.cx .wd{fill:#EBCB94;stroke:var(--color-ink);stroke-width:1.4;stroke-linejoin:round}
.cx .wd-s{fill:#D9B273;stroke:var(--color-ink);stroke-width:1.4;stroke-linejoin:round}
.cx .kh{fill:#B9B395;stroke:var(--color-ink);stroke-width:1.4}
.cx .br{fill:#D8B46A;stroke:var(--color-ink);stroke-width:1.2}
.cx .gp{fill:#3A3A3A;stroke:#555;stroke-width:1}
.cx .jaw{fill:var(--color-card);stroke:var(--color-ink);stroke-width:1.3;stroke-linejoin:round}
.cx .serr{fill:none;stroke:var(--color-ink);stroke-width:2.2;stroke-dasharray:1.2 2.4;stroke-opacity:.55}
.cx .lbl{fill:var(--color-blueprint);stroke:none}
.cx .chain{fill:none;stroke:var(--color-ink);stroke-width:13;stroke-linecap:round}
.cx .chain-l{fill:none;stroke:#fff;stroke-opacity:.3;stroke-width:9;stroke-dasharray:1.5 6}
.cx .dark{fill:#2E2C29;stroke:var(--color-ink);stroke-width:1.6}
.cx .ln-w2{fill:none;stroke:#fff;stroke-opacity:.7;stroke-width:2;stroke-linecap:round}
.cx .glass{fill:rgb(214 228 236 / .55);stroke:var(--color-ink);stroke-width:1.6}
.cx .al{fill:#E9E7E3;stroke:var(--color-ink);stroke-width:1.4;stroke-linejoin:round}
.cx .al-s{fill:#CFCBC4;stroke:var(--color-ink);stroke-width:1.4}
.cx .fin{fill:#D7DCE0;stroke:var(--color-ink);stroke-width:1.1}
.cx .fin-top{fill:#fff;stroke:var(--color-ink);stroke-width:1.1}
.cx .lamp-a{fill:#F5B841;stroke:var(--color-ink);stroke-width:1.4}
.cx .lamp-g{fill:#4FA36B;stroke:var(--color-ink);stroke-width:1.4}
.cx .pt{fill:var(--color-postit);stroke:var(--color-ink);stroke-width:1.4}
.cx .pt-hole{fill:var(--color-card);stroke:var(--color-ink);stroke-width:1.2}
.cx .cable{fill:none;stroke:var(--color-ink);stroke-width:2;stroke-linecap:round}
.cx .cable.thin{stroke-width:1.3}
.cx .shadow{fill:var(--color-ink);opacity:.07}
.cx .hand{font-family:var(--font-hand);font-size:22px;fill:var(--cx-acc)}
.cx .arrow{fill:none;stroke:var(--cx-acc);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* inhoud */
.cx-in{position:relative;z-index:2;display:grid;gap:36px;padding-top:24px;padding-bottom:96px}
.cx-head{position:relative;z-index:2;padding-top:clamp(36px,6svh,52px)}
.cx-h{font-family:var(--font-serif);font-size:clamp(28px,2.6vw,38px);font-weight:600;line-height:1.05;letter-spacing:-.01em}
.cx-name{font-family:var(--font-serif);color:color-mix(in srgb,var(--cx-acc) 82%,#000);font-size:clamp(44px,min(5vw,8svh),76px);font-weight:600;line-height:.95;letter-spacing:-.01em}
.cx-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:12px;font-family:var(--font-serif);font-size:clamp(19px,1.6vw,23px);line-height:1.3;text-wrap:balance}
.cx-p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin-top:12px;max-width:46ch;color:var(--color-ink-2);font-size:16px;line-height:1.6}
.cx-tags{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cx-tags li{font-size:13px;font-weight:600;padding:5px 12px;border-radius:99px;background:rgb(251 248 243 / .8);border:1.5px solid var(--color-ink)}
.cx-ctas{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.cx-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:12px;background:var(--color-ink);color:var(--color-paper);font-weight:700;font-size:15px;transition:background .25s,transform .25s}
.cx-btn span{transition:transform .25s}
.cx-btn:hover{background:var(--cx-acc,var(--color-accent-strong));transform:translateY(-2px)}
.cx-btn:hover span{transform:translateX(4px)}
.cx-link{display:inline-block;padding:10px 0;font-weight:700;font-size:15px;text-decoration:underline;text-decoration-color:var(--color-rule);text-underline-offset:5px;text-decoration-thickness:2px}
.cx-link:hover{text-decoration-color:var(--cx-acc)}
.cx-btn:focus-visible,.cx-link:focus-visible,.cx button:focus-visible{outline:3px solid var(--cx-acc);outline-offset:3px}
/* het toestel: een scherm uitgewerkt zoals het toetsenbord op 404, de site scrolt erin; ernaast de cobot */
.cx-device{align-self:center;display:flex;justify-content:flex-start;margin-right:calc(-1 * min(280px,max(24px,(100vw - 1200px) / 2 + 16px)))}
.cx-rig{--w:min(100%,calc((var(--cxH) - 270px) * 1.62),var(--cx-max,960px));position:relative;width:var(--w);container-type:inline-size;padding-bottom:2cqw}
.cx-mon{position:relative;z-index:2;width:74cqw;padding:2.2cqw 2.2cqw 0;border-radius:22px;background:var(--color-paper);border:1.8px solid var(--color-ink);box-shadow:0 30px 60px -30px rgb(25 23 20 / .35)}
.cx-mon::before{content:"";position:absolute;inset:6px 6px auto 6px;bottom:6px;border-radius:17px;border:1.1px solid var(--color-ink);background:var(--color-card);z-index:-1}
.cx-mon .cam{position:absolute;top:calc(1.1cqw - 4px);left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;border:1.2px solid var(--color-ink);background:var(--color-paper)}
.cx-screen{border-radius:8px;overflow:hidden;background:#fff;border:1.8px solid var(--color-ink)}
.cx-bar{display:flex;align-items:center;gap:5px;padding:6px 9px;background:var(--color-paper);border-bottom:1.4px solid var(--color-ink)}
.cx-bar i{width:7px;height:7px;border-radius:50%;border:1.2px solid var(--color-ink);background:var(--color-card)}
.cx-bar i:first-child{background:var(--cx-soft);border-color:var(--cx-acc)}
.cx-bar span{flex:none;margin-left:8px;padding:1px 12px;border-radius:99px;background:var(--color-card);border:1.1px solid var(--color-ink);font-size:10.5px;color:var(--color-ink-2)}
.cx-bar .tab{margin-left:6px;border-color:transparent;background:transparent;color:var(--color-ink-3);animation:cx-tab 8s steps(1) infinite}
.cx-bar .tab:nth-of-type(1){margin-left:8px;animation-delay:-4s}
@keyframes cx-tab{0%{background:transparent;border-color:transparent;color:var(--color-ink-3)}50%{background:var(--color-card);border-color:var(--color-ink);color:var(--color-ink)}}
.cx-view{aspect-ratio:16/9.4;container-type:size;overflow:hidden;background:#fff}
.cx-view img{display:block;width:100%;height:auto;animation:cx-scroll var(--cx-scroll,34s) cubic-bezier(.45,0,.3,1) infinite alternate}
.cx:hover .cx-view img,.cx[data-held] .cx-view img,.cx[data-held] .cx-bar .tab{animation-play-state:paused}
@keyframes cx-scroll{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(calc(-100% + 100cqh))}}
.cx-mon .chin{display:flex;align-items:center;justify-content:flex-end;gap:6px;height:3.4cqw;min-height:22px;padding:0 1.4cqw}
.cx-mon .chin b{width:30px;height:4px;margin-right:auto;border-radius:2px;background:var(--color-rule)}
.cx-mon .chin i{width:9px;height:9px;border-radius:50%;border:1.1px solid var(--color-ink);background:var(--color-paper)}
.cx-mon .chin i:last-child{background:var(--color-ok-soft);border-color:var(--color-ok)}
.cx-stand{position:relative;z-index:2;display:block;width:23cqw;margin:-1px 0 0 calc(37cqw - 11.5cqw);overflow:visible}
.cx-bot{position:absolute;z-index:3;right:-2cqw;bottom:0;width:42cqw;height:auto;overflow:visible}
.cx-noteart{position:absolute;z-index:3;top:-5.6cqw;left:46cqw;width:27cqw;overflow:visible}
.cx-noteart.rj-note{left:34cqw;top:-6.4cqw}
/* laptop: zelfde schermrand, een dunnere rand en een onderstuk */
.cx-rig.is-laptop{--w:min(100%,calc((var(--cxH) - 270px) * 1.45),var(--cx-max,860px))}
.cx-rig.is-laptop .cx-mon{width:80cqw;margin-left:4cqw;padding:1.6cqw 1.6cqw 1.6cqw;border-radius:16px 16px 6px 6px;box-shadow:none}
.cx-rig.is-laptop .cx-mon::before{border-radius:11px 11px 3px 3px}
.cx-rig.is-laptop .cx-mon .cam{top:calc(.8cqw - 4px)}
.cx-deck{position:relative;z-index:2;display:block;width:90cqw;height:auto;margin:-1px 0 0 -1cqw;overflow:visible;filter:drop-shadow(0 24px 24px rgb(25 23 20 / .18))}
.cx-deck g .cap{stroke-width:1;stroke-opacity:.6}
.cx-deck g .top{stroke:none;fill:#fff}
.cx-ticket{position:absolute;z-index:3;right:3cqw;bottom:-5cqw;width:28cqw;max-width:calc(100% + 2cqw);height:auto;overflow:visible}
.cx .blk{fill:var(--color-ink);stroke:var(--color-ink);stroke-width:1.4}
.cx .ln-w{fill:none;stroke:#fff;stroke-opacity:.35;stroke-width:1.4;stroke-linecap:round}
.cx .red{fill:var(--color-accent);stroke:var(--color-ink);stroke-width:1.8;stroke-linejoin:round}
.cx .hose{fill:none;stroke:var(--color-ink);stroke-width:9;stroke-linecap:round}
.cx .hose-hl{fill:none;stroke:#fff;stroke-opacity:.22;stroke-width:2;stroke-linecap:round;stroke-dasharray:3 6}
.cx .gr{fill:var(--color-paper-2);stroke:var(--color-ink);stroke-width:1.4}
.cx .mt{fill:#E4E1DB;stroke:var(--color-ink);stroke-width:1.1}
.cx .mt-top{fill:#F4F2EE;stroke:var(--color-ink);stroke-width:1.1}
.cx .wd{fill:#EBCB94;stroke:var(--color-ink);stroke-width:1.4;stroke-linejoin:round}
.cx .wd-s{fill:#D9B273;stroke:var(--color-ink);stroke-width:1.4;stroke-linejoin:round}
.cx .kh{fill:#B9B395;stroke:var(--color-ink);stroke-width:1.4}
.cx .br{fill:#D8B46A;stroke:var(--color-ink);stroke-width:1.2}
.cx .gp{fill:#3A3A3A;stroke:#555;stroke-width:1}
.cx .jaw{fill:var(--color-card);stroke:var(--color-ink);stroke-width:1.3;stroke-linejoin:round}
.cx .serr{fill:none;stroke:var(--color-ink);stroke-width:2.2;stroke-dasharray:1.2 2.4;stroke-opacity:.55}
.cx .lbl{fill:var(--color-blueprint);stroke:none}
.cx .chain{fill:none;stroke:var(--color-ink);stroke-width:13;stroke-linecap:round}
.cx .chain-l{fill:none;stroke:#fff;stroke-opacity:.3;stroke-width:9;stroke-dasharray:1.5 6}
.cx .dark{fill:#2E2C29;stroke:var(--color-ink);stroke-width:1.6}
.cx .ln-w2{fill:none;stroke:#fff;stroke-opacity:.7;stroke-width:2;stroke-linecap:round}
.cx .glass{fill:rgb(214 228 236 / .55);stroke:var(--color-ink);stroke-width:1.6}
.cx .al{fill:#E9E7E3;stroke:var(--color-ink);stroke-width:1.4;stroke-linejoin:round}
.cx .al-s{fill:#CFCBC4;stroke:var(--color-ink);stroke-width:1.4}
.cx .fin{fill:#D7DCE0;stroke:var(--color-ink);stroke-width:1.1}
.cx .fin-top{fill:#fff;stroke:var(--color-ink);stroke-width:1.1}
.cx .lamp-a{fill:#F5B841;stroke:var(--color-ink);stroke-width:1.4}
.cx .lamp-g{fill:#4FA36B;stroke:var(--color-ink);stroke-width:1.4}
.cx .pt{fill:var(--color-postit);stroke:var(--color-ink);stroke-width:1.6;stroke-linejoin:round}
.cx .perf{fill:none;stroke:var(--color-ink);stroke-width:1.4;stroke-dasharray:2 5;stroke-linecap:round}
.cx .tk-h{font:600 22px var(--font-serif);fill:var(--color-ink)}
.cx .tk-s{font:500 13px var(--font-sans);fill:var(--color-ink-2)}
.cx .qr rect{fill:var(--color-ink)}
.cx .qr .qf{fill:none;stroke:var(--color-ink);stroke-width:3}
.cx .qr .scan{fill:var(--cx-acc);opacity:.85;animation:cx-scan 2.6s ease-in-out infinite}
@keyframes cx-scan{0%,100%{transform:translateY(0)}50%{transform:translateY(52px)}}
.cx .stamp{animation:cx-stamp 6s cubic-bezier(.2,.8,.2,1) infinite;transform-box:fill-box;transform-origin:center}
.cx .st-o{fill:none;stroke:var(--cx-acc);stroke-width:2.4}
.cx .st-i{fill:rgb(255 255 255 / .35);stroke:var(--cx-acc);stroke-width:1.2;stroke-dasharray:3 3}
.cx .st-t{font:800 8px var(--font-sans);letter-spacing:.12em;fill:var(--cx-acc)}
@keyframes cx-stamp{0%,30%{opacity:0;scale:1.6}38%{opacity:1;scale:.92}42%,88%{opacity:1;scale:1}96%,100%{opacity:0;scale:1}}
@media (max-width:1023px){
.cx-noteart{display:none}
}
/* indicator: klein en rustig */
.cx-ind{position:relative;z-index:4;display:flex;align-items:center;gap:18px;padding-bottom:28px;margin-top:-64px}
.cx-count{font-size:13px;color:var(--color-ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.cx-count b{color:var(--color-ink)}
.cx-count span{margin-left:6px;color:var(--color-ink-2);font-weight:600}
.cx-dots{list-style:none;margin:0;padding:0;display:flex;gap:2px}
.cx-dots button{display:flex;align-items:center;width:36px;height:44px;padding:0 4px;cursor:pointer}
.cx-dots button:hover:not([aria-disabled="true"]) i{background:rgb(25 23 20 / .5)}
.cx-dots i{display:block;width:100%;height:2px;border-radius:2px;background:rgb(25 23 20 / .28);overflow:hidden;position:relative;transition:background .2s}
.cx-dots .is-on{width:60px}
.cx-dots .is-on i::after{content:"";position:absolute;inset:0;width:0;background:var(--color-ink);animation:cx-prog var(--cx-dur,12s) linear forwards}
.cx[data-paused] .cx-dots .is-on i::after{animation-play-state:paused}
@keyframes cx-prog{to{width:100%}}
.cx-dots [aria-disabled="true"]{cursor:default}
.cx-arrows{display:flex;gap:4px}
.cx-arrows button{width:44px;height:44px;border-radius:50%;font-size:14px;color:var(--color-ink-2);cursor:pointer;transition:background .2s,color .2s}
.cx-arrows button:hover{background:rgb(25 23 20 / .07);color:var(--color-ink)}
.cx-arrows svg{width:14px;height:14px;margin:auto;fill:currentColor}
.cx-hold .i-play,.cx[data-held] .cx-hold .i-pause{display:none}
.cx[data-held] .cx-hold .i-play{display:block}
@media (min-width:1024px){
.cx-in{grid-template-columns:minmax(360px,4.2fr) 7.8fr;gap:44px;align-items:start;padding-top:clamp(28px,5svh,56px);padding-bottom:clamp(64px,8svh,84px)}
.cx-txt{align-self:center;padding-bottom:clamp(8px,3svh,32px)}
.cx-device{align-self:start;margin-top:4px}
.cx-ind{position:absolute;left:0;right:0;bottom:0;margin:0 auto;padding-bottom:clamp(10px,2svh,20px);pointer-events:none}
.cx-ind > *{pointer-events:auto}
}
/* lage schermen: de tags vallen weg, zodat titel, tekst, knoppen en de site in beeld blijven */
@media (min-width:1024px) and (max-height:820px){
.cx-tags{display:none}
.cx-p{font-size:15px;line-height:1.55}
.cx-ctas{margin-top:20px}
}
@media (max-width:1023px){
.cx-device{justify-content:center}
.cx-ticket{right:3cqw;bottom:-9cqw;width:26cqw}
.cx-bot{right:-2cqw;width:42cqw}
.cx-rig{--w:min(100%,640px)}
.cx-in{padding-bottom:40px}
/* dia's met een kleiner toestel: het toestel zakt naar onder, zodat het altijd vlak boven de bediening staat */
.cx-slide{display:flex;flex-direction:column}
.cx-in{flex:1;align-content:space-between}
.cx-ind{margin-top:0;padding-top:8px}
/* gestapeld is er plaats genoeg: de tekst niet afkappen */
.cx-title,.cx-p{display:block}
}
@media (max-width:767px){
.cx-ind{gap:8px}
.cx-count span{display:none}
.cx-dots button{width:28px}
.cx-dots .is-on{width:44px}
.cx-arrows{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){
.cx *{animation:none !important}
.cx-dots .is-on i::after{width:100%}
.cx-hold{display:none}
}