/* Spreadsheetproof-scène. Alleen transform en opacity bewegen. Familiekleuren: marine #20496B, papier #F7F9FC, oranje #FF6600 (één accent), actie #C64A00. */
.sp-scene{--sp-ink:#152c42;--sp-navy:#20496b;--sp-mu:#496177;--sp-line:#c5d3df;--sp-wash:#e7eef5;--sp-orange:#ff6600;--sp-action:#c64a00;margin:0;padding:16px 20px 14px;background:#f7f9fc;color:var(--sp-ink);border:1px solid var(--sp-line);border-radius:2px;font-family:'Public Sans',Arial,sans-serif;text-align:left;min-width:0;box-sizing:border-box}
.sp-scene *{box-sizing:border-box}
.sp-svg{display:block;width:100%;height:auto;overflow:visible}
.sp-svg-m{display:none;max-width:560px;margin-inline:auto}
.sp-svg text{font-family:'Public Sans',Arial,sans-serif;fill:var(--sp-ink);stroke:none;font-size:13.5px}
.sp-svg .sp-mo{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:13.5px;font-variant-numeric:tabular-nums}
.sp-svg .sp-fm{font-size:13px}
.sp-svg .sp-sm{font-size:13px}
.sp-svg .sp-mu{fill:var(--sp-mu)}
.sp-svg .sp-b{font-weight:700}
.sp-svg .sp-it{font-style:italic}
.sp-svg .sp-ac{fill:var(--sp-action)}
.sp-svg .sp-big{font-size:14px}
.sp-svg .sp-panel{fill:#fff;stroke:#b9cfdf;stroke-width:1}
.sp-svg .sp-head{fill:var(--sp-wash);stroke:none}
.sp-svg .sp-tab{fill:#fff;stroke:none}
.sp-svg .sp-row{fill:#fff;stroke:none}
.sp-svg .sp-grid{stroke:#d3dee8;stroke-width:1}
.sp-svg .sp-ol{stroke:var(--sp-orange);stroke-width:2;stroke-linecap:round;fill:none}
.sp-svg .sp-mark{fill:none;stroke:var(--sp-orange);stroke-width:2.5}
.sp-svg .sp-fly{fill:none;stroke:var(--sp-orange);stroke-width:2.5;vector-effect:non-scaling-stroke;opacity:0}
.sp-svg .sp-edge{fill:var(--sp-orange);stroke:none}
.sp-svg .sp-hl{fill:#ffe6d3;stroke:none}
.sp-svg .sp-head-o{fill:var(--sp-orange);stroke:none}
.sp-svg .sp-link{fill:none;stroke:#8aa4b8;stroke-width:1.5}
.sp-svg .sp-node{fill:var(--sp-navy);stroke:none}
.sp-svg .sp-pt{fill:var(--sp-navy);stroke:none}
.sp-svg .sp-tickp{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sp-svg .sp-dot{fill:var(--sp-orange);stroke:none}
.sp-svg .sp-chip{fill:#fff;stroke:#b9cfdf;stroke-width:1}
.sp-svg .sp-strip{fill:#fff;stroke:var(--sp-navy);stroke-width:1.5}
.sp-svg .sp-badge{fill:var(--sp-navy);stroke:none}
.sp-svg .sp-tick{stroke:#fff;stroke-width:2.6;stroke-linecap:round;fill:none}
.sp-svg [data-move]{transform-box:fill-box;transform-origin:center}
.sp-svg [data-move^="fly-"]{transform-origin:0% 0%}
.sp-svg [data-move="tick1"],.sp-svg [data-move="tick2"]{transform-origin:0% 50%}
.sp-svg .sp-old{opacity:0}
.sp-captions{display:grid;margin:12px 0 0;min-height:0}
.sp-cap{grid-area:1/1;margin:0;font-size:15px;line-height:1.5;color:var(--sp-ink);visibility:hidden;max-width:78ch}
.sp-cap[data-on]{visibility:visible}
.sp-bar{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:stretch;justify-content:space-between;margin-top:12px;border-top:1px solid var(--sp-line);padding-top:10px}
.sp-steps{display:flex;flex:1 1 420px;gap:6px;min-width:0}
.sp-steps button{flex:1 1 0;min-width:0;min-height:48px;text-align:left;font:600 14px/1.25 'Public Sans',Arial,sans-serif;color:var(--sp-ink);background:none;border:0;border-top:3px solid #9fb6c8;padding:8px 4px 6px;cursor:pointer;border-radius:0}
.sp-steps button b{display:block;font-size:12px;font-weight:600;color:var(--sp-mu);margin-bottom:2px;letter-spacing:.04em}
.sp-steps button[aria-pressed=true]{border-top-color:var(--sp-orange)}
.sp-steps button[aria-pressed=true] b{color:var(--sp-action)}
.sp-play{flex:0 0 auto;align-self:center;min-width:132px;min-height:44px;padding:8px 16px;font:600 14px/1 'Public Sans',Arial,sans-serif;color:var(--sp-navy);background:#fff;border:1px solid var(--sp-navy);border-radius:2px;cursor:pointer}
.sp-play[hidden]{display:none}
.sp-scene button{transition:transform 160ms cubic-bezier(.23,1,.32,1);touch-action:manipulation}
.sp-scene button:active{transform:scale(.98)}
.sp-scene button:focus-visible{outline:3px solid var(--sp-orange);outline-offset:3px}
@media(hover:hover) and (pointer:fine){.sp-play:hover{background:var(--sp-wash)}.sp-steps button:hover{border-top-color:var(--sp-navy)}}
.sp-note{margin:10px 0 0;font-size:12px;line-height:1.4;color:var(--sp-mu)}
@media(max-width:699px){
 .sp-svg-d{display:none}.sp-svg-m{display:block}
 .sp-scene{padding:10px 8px 12px}
 .sp-svg-m text{font-size:14px}.sp-svg-m .sp-mo{font-size:13.5px}.sp-svg-m .sp-big{font-size:14.5px}
 .sp-cap{font-size:14px}
 .sp-steps{flex-basis:100%}.sp-steps button{font-size:13px;padding-inline:3px}
 .sp-play{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){.sp-scene *{animation:none!important;transition:none!important}}
/* Specificiteit boven de algemene paginahero-regels (die p-tekst licht maken). */
[data-brand] .sp-scene .sp-cap{color:#152c42;font-size:15px;line-height:1.5;margin:0;max-width:78ch}
[data-brand] .sp-scene .sp-note{color:#496177;font-size:12px;margin:10px 0 0;max-width:none}
@media(max-width:699px){[data-brand] .sp-scene .sp-cap{font-size:14px}}
.sp-svg .sp-gh{fill:none;stroke:#b9cfdf;stroke-width:1.2;stroke-dasharray:4 4}
/* Brede schermen: vaste ontwerpbreedte, als geheel geschaald met zoom (--sp-s, gezet door spreadsheetproof-scene.js). Alleen met .sp-stage[data-fit]. */
.sp-stage{position:relative;width:100%;min-width:0}
.sp-stage[data-fit]>.sp-scene{width:644px;max-width:none;margin:0 0 0 auto;zoom:var(--sp-s,.7)}
