/* ═══════════════════════════════════════════════════════════════════
   NOMAD VSL — nomad-vsl-pagina-1.css
   De trainingspagina (/training) als landingspagina in de taal van de
   homepage: terminalframe, route, pijlers, dashboard, instrumentarium,
   volumeprofiel, bewijs (covers en wins-muur), finale. Laadt NA nomad-vsl-1.css en leunt op
   de tokens daar.

   Eén DOM, twee producten. Desktop en telefoon delen de secties; per
   breekpunt verschilt de vorm (raster of veegstrook) en de volgorde
   (`order` op main.lp). Wat maar op één van beide hoort staat op
   .alleen-desktop / .alleen-mobiel. Het video-iframe bestaat één keer.

   Het desktopdeel is de stijl uit het voorstel, ontdaan van de .h5-scope;
   de mobiele laag is opnieuw geschreven op echte telefoonmaten (in het
   voorstel was hij geschaald voor een telefoonkader van 22rem).

   CACHE: geladen als nomad-vsl-pagina-1.css?v=N; verhoog N bij elke
   wijziging. Zie de kop van nomad-vsl-1.css. Huidige versie: ?v=14.
   ═══════════════════════════════════════════════════════════════════ */

/* ── desktop: uit het voorstel ────────────────────────────────────── */
*{box-sizing:border-box}
.container{width:90%;max-width:80rem;margin-inline:auto}
@media (max-width:767px){.container{width:92%}}
img,svg,canvas{max-width:100%;display:block}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:800;line-height:1.06;letter-spacing:-.02em}
h1{font-size:clamp(2.6rem,1.9rem + 3.5vw,5rem);font-weight:900}
h2{font-size:clamp(1.9rem,1.45rem + 2.3vw,3.4rem)}
h3{font-size:clamp(1.05rem,1rem + .4vw,1.3rem);line-height:1.25;font-weight:700}
p{margin:0}
a{color:var(--blue);transition:color .16s ease}
.dot{color:var(--blue)}
.accent{color:var(--blue)}
.eyebrow{font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:var(--blue);margin:0 0 1rem;}
.lead{font-size:clamp(1rem,.96rem + .3vw,1.2rem);line-height:1.6;color:var(--muted)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.nav{position:sticky;top:0;z-index:999;height:var(--nav-h);
  background:transparent;border-bottom:1px solid transparent;
  display:flex;align-items:center;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),backdrop-filter .25s var(--ease);}
.hero-grid{position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 63px,var(--line) 63px,var(--line) 64px),
    repeating-linear-gradient(90deg,transparent,transparent 63px,var(--line) 63px,var(--line) 64px);
  opacity:.32;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 38%,#000 25%,transparent 72%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 38%,#000 25%,transparent 72%);}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cc{padding:0 5% clamp(3rem,2rem + 4vw,6rem);position:relative;background:var(--bg)}
.cc-frame{max-width:72rem;margin:-14vh auto 0;position:relative;
  background:var(--bg);border:1px solid var(--line);border-radius:20px;
  overflow:hidden;color:var(--ink);
  box-shadow:0 30px 70px rgba(6,7,13,.10);}
.cc-chrome{display:flex;align-items:center;gap:1rem;padding:.8rem 1.1rem;border-bottom:1px solid var(--line);background:var(--bg-2)}
.cc-dots{display:flex;gap:6px}
.cc-dots i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.cc-tabs{display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:none}
.cc-tabs::-webkit-scrollbar{display:none}
.cc-tabs span{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--stil);padding:.45em .9em;border-radius:999px;white-space:nowrap;}
.cc-tabs span.on{background:var(--chip-bg);color:var(--chip-tx)}
.cc-live{margin-left:auto;display:inline-flex;align-items:center;gap:.5em;flex:none;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stil);}
.cc-live i{width:7px;height:7px;border-radius:50%;background:var(--blue)}
.cc-body{display:grid;grid-template-columns:2.1fr 1fr;gap:1px;background:var(--line)}
/* Op de trainingspagina is de rail weg (zie training.html): één kolom, de
   video over de volle breedte van het kader. */
.lp-cc .cc-body{grid-template-columns:1fr}
@media (max-width:860px){.cc-body{grid-template-columns:1fr}}
.cc-screen{margin:0;background:var(--bg);position:relative;padding:1.2rem 1.3rem 1rem}
.cc-rail{display:grid;gap:1px;background:var(--line)}
.cc-panel{background:var(--bg-2);padding:1rem 1.1rem;display:flex;flex-direction:column;justify-content:center}
.cc-p-head{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stil);margin-bottom:.7rem}
.cc-bias{font-family:var(--display);font-weight:800;font-size:1.7rem;letter-spacing:-.02em}
.cc-meter{display:flex;gap:4px;margin-top:.55rem}
.cc-meter i{height:4px;flex:1;border-radius:2px;background:var(--line)}
.cc-meter i.on{background:var(--blue)}
.cc-p-cap{font-size:.72rem;color:var(--stil);margin-top:.55rem}
.cot{display:grid;gap:.45rem}
.cot-row{display:grid;grid-template-columns:3.2em 1fr;align-items:center;gap:.6em}
.cot-row span{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;color:var(--stil)}
.cot-row i{display:block;height:8px;border-radius:3px;background:var(--c);width:var(--w)}
.season{display:flex;align-items:flex-end;gap:3px;height:52px}
.season i{flex:1;border-radius:2px 2px 0 0;background:color-mix(in srgb,var(--blue) 18%,var(--bg));height:var(--h)}
.season i.hot{background:var(--blue)}
.cc-foot{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line)}
@media (max-width:860px){.cc-foot{grid-template-columns:1fr}}
.cc-cell{background:var(--bg);padding:1.1rem 1.2rem;text-decoration:none;color:var(--ink);transition:background-color .2s var(--ease)}
.cc-cell:hover{background:var(--bg-2);color:var(--ink)}
.cc-cell .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stil);margin-bottom:.45rem}
.cc-cell h3{font-size:1rem;margin-bottom:.3rem}
.cc-cell p{font-size:.8rem;color:var(--muted);line-height:1.5}
.cc-cell .arrow{color:var(--blue);margin-left:.35em;display:inline-block;transition:transform .2s var(--ease)}
.cc-cell:hover .arrow{transform:translateX(4px)}
.dash2{display:grid;grid-template-columns:172px 1fr;gap:1px;background:var(--line)}
@media (max-width:1080px){.dash2{grid-template-columns:1fr}
.d2-side{display:none}}
.d2-side{background:var(--bg-2);padding:1rem .95rem;display:flex;flex-direction:column;gap:.95rem;min-width:0}
.d2-brand{font-family:var(--display);font-weight:900;font-size:.95rem;letter-spacing:-.02em}
.d2-brand small{font-family:var(--mono);font-weight:500;font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stil);margin-left:.5em}
.d2-live{display:inline-flex;align-items:center;gap:.5em;align-self:flex-start;
  font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--chip-tx);background:var(--chip-bg);border-radius:999px;padding:.5em .9em;}
.d2-live i{width:5px;height:5px;border-radius:50%;background:var(--blue)}
.d2-h{font-family:var(--mono);font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stil)}
.d2-menu{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.d2-menu li{display:flex;justify-content:space-between;align-items:center;gap:.5em;font-size:.8rem;color:var(--muted);padding:.5em .65em;border-radius:8px}
.d2-menu li.on{background:var(--chip-bg);color:var(--chip-tx);font-weight:500}
.d2-menu li b{font-family:var(--mono);font-weight:500;font-size:.58rem;color:var(--stil);background:var(--panel-2);border-radius:999px;padding:.2em .65em}
.d2-main{background:var(--bg);padding:1.15rem 1.25rem;display:grid;gap:1rem;align-content:start;min-width:0}
.d2-date{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.d2-hi{font-family:var(--display);font-weight:800;font-size:1.3rem;letter-spacing:-.02em;margin-top:.25rem}
.d2-sub{font-size:.8rem;color:var(--stil);margin-top:.25rem}
.d2-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem}
@media (max-width:900px){.d2-tiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.d2-tiles{grid-template-columns:repeat(2,1fr)}}
.d2-tile{border:1px solid var(--line);border-radius:10px;background:var(--bg-2);padding:.7rem .8rem;min-width:0}
.d2-tile .k{font-family:var(--mono);font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stil)}
.d2-tile .v{font-family:var(--display);font-weight:800;font-size:1.2rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:.3em 0 .15em}
.d2-tile.hl .v{color:var(--blue)}
.d2-tile .c{font-size:.66rem;color:var(--stil)}
.d2-mt5{border:1px solid var(--line);border-radius:10px;padding:.8rem .95rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.d2-mt5 .k{font-family:var(--mono);font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stil)}
.d2-acc{font-weight:700;font-size:.9rem;margin-top:.3rem;display:flex;align-items:center;gap:.5em;flex-wrap:wrap}
.d2-acc i{width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none}
.d2-acc .num{font-family:var(--mono);font-weight:400;font-size:.66rem;color:var(--stil)}
.d2-mt5-r{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.d2-verb{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.d2-btn{border:1px solid var(--line);border-radius:8px;padding:.45em .9em;font-size:.72rem;color:var(--muted)}
.d2-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.d2-chips{display:flex;gap:.5rem;align-items:flex-start;flex-wrap:wrap}
.d2-chip{display:inline-flex;align-items:center;gap:.6em;border:1px solid var(--line);border-radius:9px;
  padding:.5em .8em;font-size:.7rem;font-weight:500;color:var(--muted);background:var(--bg-2);white-space:nowrap;}
.d2-chip.qa{background:var(--bg)}
.d2-chip.qa .qi{color:var(--blue)}
.d2-chip.qa b{font-size:.7rem;display:block;line-height:1.25}
.d2-chip.qa em{display:block;font-style:normal;font-family:var(--mono);font-size:.52rem;letter-spacing:.08em;text-transform:uppercase;color:var(--stil)}
.d2-chip.qa i{font-style:normal;font-family:var(--mono);font-weight:700;font-size:.72rem;color:var(--blue)}
.d2-mt5sub{font-size:.7rem;color:var(--stil);margin-top:.25rem}
.d2-bottom{display:grid;grid-template-columns:1.1fr 1fr;gap:.8rem}
@media (max-width:900px){.d2-bottom{grid-template-columns:1fr}}
.d2-video{border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;background:var(--bg)}
.d2-vk{font-family:var(--mono);font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.d2-stagevid{margin:.7rem 0;aspect-ratio:16/6;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 14%,var(--bg)),color-mix(in srgb,var(--blue) 4%,var(--bg)));
  border:1px solid var(--line);}
.d2-play{width:2.4rem;height:2.4rem;border-radius:50%;background:var(--bg);border:1px solid var(--line);
  display:grid;place-items:center;font-size:.7rem;color:var(--blue);}
.d2-mod{font-family:var(--mono);font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stil)}
.d2-vtitle{font-weight:700;font-size:.9rem;margin-top:.2rem}
.d2-vbar{height:4px;border-radius:2px;background:var(--panel-2);overflow:hidden;margin-top:.55rem}
.d2-vbar i{display:block;height:100%;width:var(--p);background:var(--blue);border-radius:2px}
.d2-sess{border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;background:var(--bg)}
.d2-sesshead{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.6rem}
.d2-sess .k{font-family:var(--mono);font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stil)}
.d2-sess .k2{font-size:.66rem;color:var(--stil)}
.d2-sess ul{list-style:none;margin:0;padding:0;display:grid}
.d2-sess li{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
.d2-sess li:last-child{border-bottom:0}
.d2-sess li span{font-size:.8rem;font-weight:500}
.d2-sess li em{display:block;font-style:normal;font-family:var(--mono);font-size:.54rem;letter-spacing:.08em;text-transform:uppercase;color:var(--stil);margin-top:.2em}
.d2-sess li b{font-family:var(--mono);font-weight:700;font-size:.8rem;text-align:right;font-variant-numeric:tabular-nums}
.d2-sess li b em{color:var(--blue)}
.cc-cap-l{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.85rem 1.25rem;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--stil);}
.cc-cap-l b{font-weight:500;color:var(--chip-tx);background:var(--chip-bg);border-radius:999px;padding:.2em .9em}
.lint{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:1rem 0;overflow:hidden;background:var(--bg);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.lint-track{display:flex;width:max-content;animation:mq 52s linear infinite}
.lint:hover .lint-track{animation-play-state:paused}
.lint ul{display:flex;list-style:none;margin:0;padding:0;align-items:center}
.lint li{font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.3em;
  text-transform:uppercase;color:var(--stil);white-space:nowrap;
  padding:0 2rem;position:relative;}
.lint li::after{content:"·";position:absolute;right:-.3rem;color:var(--line-2);letter-spacing:0}
.marquees{padding:1.4rem 0;display:grid;gap:.9rem;overflow:hidden;background:var(--bg);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);}
.mq{overflow:hidden}
.mq-track{display:flex;width:max-content;animation:mq 40s linear infinite}
.mq--reverse .mq-track{animation-direction:reverse}
.marquees:hover .mq-track{animation-play-state:paused}
.mq-group{display:flex;align-items:center}
.mq-group span{font-family:var(--display);font-weight:800;letter-spacing:-.01em;white-space:nowrap;
  font-size:clamp(1.05rem,1rem + .45vw,1.45rem);padding:0 1.1rem;color:var(--ink);}
.mq--stroke .mq-group span{color:transparent;-webkit-text-stroke:1px var(--line-2)}
.mq-group .star{color:var(--blue);font-size:.75em;padding:0}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.section{padding:clamp(3rem,1.8rem + 6vw,8rem) 0;background:var(--bg)}
.section + .section{border-top:1px solid var(--line)}
.section-head{max-width:56rem;margin-bottom:clamp(1.75rem,1.4rem + 2vw,3.25rem)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head .intro{margin-top:1.1rem;max-width:60ch;color:var(--muted)}
.section-head.center .intro{margin-inline:auto}
.card{border:1px solid var(--line);border-radius:16px;background:var(--bg);
  padding:clamp(1.1rem,1rem + .6vw,1.6rem);
  transition:background-color .2s var(--ease);}
.card:hover{background:var(--bg-2)}
.card-tag{font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:.7rem}
.card h3{margin-bottom:.5rem}
.card p{font-size:.92rem;color:var(--muted);line-height:1.6}
.vp3d{padding:clamp(3rem,1.8rem + 6vw,8rem) 5%;border-top:1px solid var(--line);background:var(--bg-2)}
.vp3d-head{text-align:center;max-width:44rem;margin:0 auto 2.5rem}
.vp3d-head .intro{margin-top:1.1rem;color:var(--muted)}
.vp3d-panel{--panel:var(--bg);--border:var(--line);--border-soft:var(--line);
  --text:var(--ink);--muted-d:var(--stil);--dim-d:var(--stil);
  --blue-soft:var(--blue);--blue-pale:var(--blue);
  position:relative;max-width:72rem;margin:0 auto;text-align:left;color:var(--text);
  background:var(--panel);border:1px solid var(--border);border-radius:24px;overflow:hidden;
  box-shadow:0 34px 90px rgba(6,7,13,.13);}
.vp3d-glow{display:none}
.vp3d-bar{position:relative;z-index:2;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--border-soft);background:var(--bg)}
.vp3d-bar .sym{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted-d)}
.vp3d-bar .px{font-family:var(--mono);font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
.vp3d-bar .chg{font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums}
.vp3d-modes{margin-left:auto;display:flex;gap:2px;background:var(--panel-2);border-radius:10px;padding:3px}
.vp3d-modes button{font-family:var(--body);font-weight:600;font-size:12px;color:var(--stil);background:transparent;border:0;border-radius:8px;padding:7px 15px;cursor:pointer;transition:color .16s ease,background-color .16s ease}
.vp3d-modes button:hover{color:var(--ink)}
.vp3d-modes button.on{background:#FFFFFF;color:var(--ink);box-shadow:0 1px 4px rgba(6,7,13,.14)}
.vp3d-stage{position:relative;height:min(56vh,540px,calc(62vw + 37px));min-height:380px;background:var(--bg)}
.vp3d-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.vp3d-hint{position:absolute;top:12px;left:16px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--dim-d);pointer-events:none}
.vp3d-legend{position:absolute;bottom:12px;left:16px;display:flex;gap:13px;flex-wrap:wrap;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--dim-d);pointer-events:none}
.vp3d-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.vp3d-tip{position:absolute;left:0;top:0;z-index:4;display:none;pointer-events:none;background:rgba(255,255,255,.97);border:1px solid rgba(0,82,255,.3);border-radius:10px;padding:9px 12px;min-width:160px;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11px;box-shadow:0 8px 32px rgba(6,7,13,.14);color:var(--ink)}
.vp3d-tip .t1{font-size:12.5px;font-weight:700}
.vp3d-tip .t2{font-size:9px;letter-spacing:.1em;color:var(--blue);margin:1px 0 6px}
.vp3d-tip .row{display:flex;justify-content:space-between;gap:16px}
.vp3d-tip .row span:first-child{color:var(--dim-d)}
.vp3d-stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border-soft)}
.vp3d-stats>div{padding:14px 20px;border-right:1px solid var(--border-soft)}
.vp3d-stats>div:last-child{border-right:none}
.vp3d-stats .k{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--dim-d)}
.vp3d-stats .v{font-family:var(--mono);font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:3px}
@media (max-width:720px){.vp3d-stats{grid-template-columns:repeat(2,1fr)}
.vp3d-stats>div:nth-child(2){border-right:none}
.vp3d-stage{min-height:320px}}
.vp3d-tag{display:block;text-align:center;margin:1.1rem auto 0;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stil)}
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:991px){.tools-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.tools-grid{grid-template-columns:1fr}}
.tool-meet{font-family:var(--mono);font-size:.68rem;letter-spacing:.02em;color:var(--blue);margin-top:.9rem;font-variant-numeric:tabular-nums}
.tools-voet{margin-top:2rem;font-size:.9rem;color:var(--stil)}
.route{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:1.1rem}
@media (max-width:1080px){.route{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.route{grid-template-columns:1fr}}
.route::before{content:"";position:absolute;left:1%;right:1%;top:5px;height:1px;background:var(--line-2)}
@media (max-width:1080px){.route::before{display:none}}
.rstep{position:relative;padding-top:1.5rem}
.rstep::before{content:"";position:absolute;top:0;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--bg);border:2.5px solid var(--blue);box-sizing:border-box;}
.rstep--doel::before{background:var(--blue)}
.rstep .fase{font-family:var(--mono);font-size:.58rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:.55rem}
.rstep h3{font-size:1.02rem;margin-bottom:.45rem}
.rstep p{font-size:.87rem;color:var(--muted);line-height:1.6}
.rstep .tag{display:inline-block;margin-top:.8rem;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.06em;border:1px dashed var(--line-2);border-radius:999px;
  padding:.35em .9em;color:var(--stil);}
.ipv{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(1.5rem,1rem + 2.5vw,3.5rem);
  align-items:center;margin-top:clamp(2.5rem,2rem + 2.5vw,4.5rem);}
@media (max-width:860px){.ipv{grid-template-columns:1fr}}
.ipv-txt h3{font-size:clamp(1.2rem,1.1rem + .5vw,1.55rem);margin-bottom:.7rem}
.ipv-txt p{font-size:.95rem;color:var(--muted);line-height:1.65;max-width:52ch}
.ipv-card{position:relative;background:var(--tint-04);color:var(--ink);
  border:1px solid var(--line);border-radius:16px;
  padding:clamp(1.3rem,1.1rem + .8vw,1.8rem);overflow:hidden;min-height:21rem;
  display:flex;flex-direction:column;justify-content:center;}
.ipv-veil{display:none}
.ipv-top{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--stil);margin-bottom:.85rem;}
.ipv-top b{color:var(--blue);font-weight:500}
.ipv-bar{position:relative;height:3px;border-radius:2px;background:var(--line);overflow:hidden;margin-bottom:1.25rem}
.ipv-bar i{display:block;height:100%;width:0;background:var(--blue);border-radius:2px;transition:width .4s var(--ease)}
.ipv-q{position:relative;font-family:var(--display);font-weight:700;font-size:1.12rem;letter-spacing:-.01em;line-height:1.3}
.ipv-opties{position:relative;display:grid;gap:.55rem;margin-top:1rem}
.ipv-keuze{display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;
  text-align:left;font:500 .88rem/1.4 var(--body);color:var(--ink);
  background:var(--bg);border:1px solid var(--line);
  border-radius:11px;padding:.8em 1em;cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,transform .14s var(--ease);}
.ipv-keuze:hover{background:var(--bg-2);border-color:color-mix(in srgb,var(--blue) 45%,var(--line))}
.ipv-keuze:active{transform:scale(.985)}
.ipv-keuze .pijl{color:var(--blue);flex:none}
.ipv-klaar{position:relative}
.ipv-klaar .sub{font-size:.82rem;color:var(--stil);margin-top:.35rem}
.ipv-lijst{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.5rem}
.ipv-lijst li{display:flex;gap:.7em;align-items:center;
  background:var(--bg);border:1px solid var(--line);
  border-radius:10px;padding:.6em .85em;
  opacity:.25;transform:translateY(4px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),border-color .4s var(--ease);}
.ipv-lijst li.aan{opacity:1;transform:none;border-color:color-mix(in srgb,var(--blue) 35%,var(--line))}
.ipv-lijst i{font-style:normal;flex:none;width:1.5em;height:1.5em;border-radius:50%;
  display:grid;place-items:center;font-size:.68rem;
  background:var(--chip-bg);color:var(--blue);}
.ipv-lijst em{display:block;font-style:normal;font-family:var(--mono);font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stil)}
.ipv-lijst li span{font-size:.82rem;min-width:0}
.ipv-acties{position:relative;margin-top:1.2rem;display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.ipv-reset{background:var(--bg);border:1px solid var(--line);color:var(--ink);border-radius:10px;
  padding:.6em 1em;font:500 .8rem var(--body);cursor:pointer;
  transition:background-color .16s ease;}
.ipv-reset:hover{background:var(--bg-2)}
.ipv-cap{position:relative;display:block;margin-top:1.1rem;font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stil)}
.finale{position:relative;overflow:hidden;background:#06070D;color:#EEF1F8;
  padding:clamp(4.5rem,3rem + 8vw,11rem) 5%;text-align:center;}
.finale-veil{position:absolute;inset:0;background:radial-gradient(ellipse 62% 55% at 50% 0%,rgba(0,82,255,.26),transparent 68%)}
.finale-inner{position:relative;z-index:2;max-width:50rem;margin-inline:auto;display:grid;gap:1.5rem;justify-items:center}
.finale h2{font-size:clamp(2.2rem,1.7rem + 2.6vw,4rem);font-weight:900}
.finale-eyebrow{font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:#4D7CFF;margin:0}
.footer{border-top:1px solid var(--line);padding-top:clamp(2.5rem,2rem + 3vw,4.5rem);background:var(--bg);overflow:clip}
.frow{display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;justify-content:space-between;align-items:baseline}
.frow .links{display:flex;gap:1.5rem;flex-wrap:wrap}
.frow a{color:var(--ink);text-decoration:none;font-size:.9rem;font-weight:500}
.foot-meta{font-family:var(--mono);font-size:.68rem;color:var(--stil)}
.foot-risk{margin-top:1.5rem;font-size:.78rem;color:var(--stil);max-width:64ch}
.giant{margin-top:.5rem;font-family:var(--display);
  font-size:clamp(5rem,1rem + 22vw,19rem);
  font-weight:900;letter-spacing:-.05em;line-height:.85;white-space:nowrap;
  text-align:center;user-select:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 26%,var(--line-2)),color-mix(in srgb,var(--blue) 4%,var(--bg)));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transform:translateY(16%);}
.footer:hover .giant{background:linear-gradient(115deg,var(--blue) 0%,var(--blue-pale-l) 60%,var(--line) 100%);
  -webkit-background-clip:text;background-clip:text;}
.vis-box{border:1px solid var(--line);border-radius:12px;background:var(--tint-04);
  display:grid;place-items:center;height:110px;margin-bottom:1rem;}
.vis-box svg{height:72%;width:auto;max-width:80%}
.vis-box.vis-wide{display:flex;align-items:center;padding:1.1rem}
.vis-box.vis-wide > div{width:100%}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:991px){.pillars{grid-template-columns:1fr}}
.pillar{border:1px solid var(--line);border-radius:16px;overflow:clip;background:var(--bg);display:flex;flex-direction:column;transition:background-color .2s var(--ease)}
.pillar:hover{background:var(--bg-2)}
.pillar-media{aspect-ratio:4/3;background:var(--tint-04);border-bottom:1px solid var(--line);display:grid;place-items:center}
.pillar-media svg{width:44%;height:auto}
.pillar-body{padding:clamp(1.1rem,1rem + .5vw,1.5rem);display:grid;gap:.6rem;align-content:start}
.pillar-body .k{font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.pillar-body p{font-size:.92rem;color:var(--muted);line-height:1.6}
.tab{text-align:left;background:none;border:0;border-radius:12px;cursor:pointer;padding:1rem 1.1rem .9rem;font:inherit;color:var(--ink);transition:background-color .2s var(--ease)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;animation:none!important}
.mq-track,.lint-track{animation:none!important}}
.nav{position:sticky;top:0;height:var(--nav-h)}
.cc{margin-top:0}
.cc-frame{margin-top:-6rem}
.h5-cc-dash{padding-top:clamp(3rem,1.8rem + 6vw,8rem);border-top:1px solid var(--line)}
.h5-dash-head{margin-bottom:2rem}
.h5-cc-dash .cc-frame{margin-top:0}
.h5-one{grid-template-columns:1fr}
.section + .cc{border-top:0}
.inst{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
@media (max-width:900px){.inst{grid-template-columns:1fr}}
.inst-panel{border:1px solid var(--line);border-radius:16px;background:var(--bg);overflow:hidden;display:grid;grid-template-rows:auto 1fr auto auto}
.inst-bar{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;padding:1rem 1.1rem .6rem}
.inst-k{font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin:0 0 .3rem}
.inst-t{font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:-.02em;margin:0;line-height:1.2}
.inst-chips{display:flex;gap:4px;background:var(--panel-2);border-radius:10px;padding:3px}
.inst-chips button{font:600 12px var(--body);color:var(--stil);background:transparent;border:0;border-radius:8px;padding:6px 11px;cursor:pointer;transition:color .16s,background-color .16s;white-space:nowrap}
.inst-chips button:hover{color:var(--ink)}
.inst-chips button.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(6,7,13,.14)}
.inst-stage{padding:.2rem .6rem 0}
.inst-stage svg{width:100%;height:auto;display:block}
.inst-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.inst-stats>div{padding:.7rem 1rem;border-right:1px solid var(--line);min-width:0}
.inst-stats>div:last-child{border-right:0}
.inst-stats .k{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stil)}
.inst-stats .v{font-family:var(--mono);font-size:.92rem;font-weight:700;font-variant-numeric:tabular-nums;margin-top:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inst-cap{padding:.6rem 1.1rem .75rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--stil);margin:0;background:var(--bg-2)}
@media (max-width:600px){.inst-stats{grid-template-columns:repeat(2,1fr)}
.inst-stats>div:nth-child(2){border-right:0}
.inst-stats>div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
.inst{grid-template-columns:1fr}
.inst-panel{grid-template-rows:none}
.inst-bar{align-items:flex-start}
.inst-bar > div:first-child{max-width:60ch}
.inst-sub{margin:.35rem 0 0;font-size:.82rem;color:var(--muted);line-height:1.5}
.inst-legend{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;padding:.6rem 1.2rem .2rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:var(--stil)}
.inst-legend i{display:inline-block;width:14px;height:5px;border-radius:2px;margin-right:6px;vertical-align:1px}
.inst-uitleg{margin:.4rem 1.2rem .7rem;font-size:.86rem;line-height:1.5;color:var(--muted)}
.inst-uitleg b{font-weight:600}
.inst-chips-2{display:flex;gap:.5rem;background:none;padding:0;flex-wrap:wrap}
.inst-chips-2 .grp{display:flex;gap:4px;background:var(--panel-2);border-radius:10px;padding:3px}
.inst-stats{margin-top:.6rem}
.inst-stage{margin:.4rem 1.1rem 0;padding:.3rem .2rem 0;border-top:1px solid var(--line)}
.inst-stage svg{width:100%;height:auto;display:block}
.cot-simpel{display:grid;gap:.7rem;padding:.9rem .2rem .4rem}
.cot-rij{display:grid;grid-template-columns:minmax(9rem,14rem) 1fr minmax(9rem,auto);gap:.9rem;align-items:center}
.cot-k{font-size:.82rem;font-weight:500;color:var(--ink)}
.cot-balk{display:block;height:12px;border-radius:6px;background:var(--panel-2);overflow:hidden}
.cot-balk i{display:block;height:100%;border-radius:6px;transition:width .5s var(--ease)}
.cot-v{font-family:var(--mono);font-size:.92rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.cot-v small{font-size:.66rem;font-weight:500;color:var(--stil)}
.cot-as{display:grid;grid-template-columns:minmax(9rem,14rem) 1fr minmax(9rem,auto)}
.cot-as span:first-child,.cot-as span:last-child{display:none}
.cot-as span:nth-child(2),.cot-as span:nth-child(3),.cot-as span:nth-child(4){grid-column:2;font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stil)}
.cot-as{position:relative}
.cot-as span:nth-child(2){justify-self:start}
.cot-as span:nth-child(3){justify-self:center;grid-row:1}
.cot-as span:nth-child(4){justify-self:end;grid-row:1}
.eyebrow,.card-tag,.pillar-body .k,.rstep .fase,.rstep .tag,.cc-tabs span,.cc-live,.cc-cell .k,.cc-p-head,.cc-cap-l,.cc-cap-l b,.cot-row span,.d2-brand small,.d2-live,.d2-h,.d2-menu li b,.d2-date,.d2-tile .k,.d2-mt5 .k,.d2-verb,.d2-chip.qa em,.d2-vk,.d2-mod,.d2-sess .k,.d2-sess li em,.inst-k,.inst-cap,.inst-legend,.inst-stats .k,.cot-as span,.tool-meet,.ipv-top,.ipv-cap,.ipv-lijst em,.lint li,.finale-eyebrow,.foot-meta,.vp3d-bar .sym,.vp3d-stats .k,.vp3d-tag,.vp3d-legend,.vp3d-hint{font-family:var(--body);letter-spacing:0;text-transform:none}
.eyebrow{font-size:.84rem;font-weight:500;color:var(--stil)}
.card-tag,.pillar-body .k,.cc-cell .k,.inst-k,.rstep .fase{font-size:.8rem;font-weight:500;color:var(--stil)}
.rstep .tag{font-size:.74rem}
.cc-tabs span{font-size:.74rem}
.cc-live,.d2-live{font-size:.72rem;font-weight:500}
.cc-p-head,.d2-tile .k,.d2-mt5 .k,.d2-sess .k,.inst-stats .k,.vp3d-stats .k{font-size:.7rem;font-weight:500}
.d2-h,.d2-date,.d2-vk,.d2-mod,.d2-sess li em,.d2-chip.qa em,.d2-verb,.d2-brand small,.ipv-lijst em{font-size:.66rem;font-weight:500}
.cc-cap-l,.inst-cap,.inst-legend,.foot-meta,.ipv-cap,.vp3d-tag,.tool-meet,.cot-as span,.vp3d-legend{font-size:.76rem}
.cc-cap-l b{font-size:.72rem}
.ipv-top{font-size:.74rem;font-weight:500}
.lint li{font-size:.86rem;font-weight:500;letter-spacing:0}
.finale-eyebrow{font-size:.9rem;font-weight:500}
.cot-row span{font-size:.7rem}
.vp3d-bar .sym{font-size:.8rem;font-weight:500}

/* ── eigen laag: wat het voorstel openliet ────────────────────────── */
.pane-punten{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.pane-punten li{display:flex;gap:.6em;align-items:baseline;font-size:.88rem;color:var(--muted);line-height:1.5}
.pane-punten li::before{content:"✓";color:var(--blue);font-weight:700;flex:none}
.lp{display:flex;flex-direction:column}
.lp > *{width:100%}
@media (max-width:760px){.alleen-desktop{display:none!important}}
@media (min-width:761px){.alleen-mobiel{display:none!important}}

/* nav: vijf ankers en één knop; op de telefoon alleen de knop */
.nav-links{display:flex;gap:.15rem;list-style:none;margin:0;padding:0}
.nav-links a{display:inline-block;color:var(--ink);text-decoration:none;font-size:.9rem;font-weight:500;padding:.5em .8em;border-radius:9px;transition:color .16s ease,background-color .16s ease}
.nav-links a:hover{color:var(--ink);background:var(--bg-2)}
@media (max-width:991px){.nav-links{display:none}}
.s-nav .g-word{text-decoration:none;color:var(--ink)}

/* hero: op desktop de homepage-hero (raster, grote kop, één knop); het
   terminalframe schuift er een stuk overheen */
.lp-hero{position:relative}
.lp-hero .hero-grid{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 63px,var(--line) 63px,var(--line) 64px),repeating-linear-gradient(90deg,transparent,transparent 63px,var(--line) 63px,var(--line) 64px);
  opacity:.32;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 38%,#000 25%,transparent 72%);mask-image:radial-gradient(ellipse 80% 70% at 50% 38%,#000 25%,transparent 72%)}
.lp-hero > *{position:relative}
.lp-hero h1 .ln{display:block}
.s-tip{margin:.7rem auto 0;max-width:46ch;font-size:.9rem;color:var(--muted)}
.s-tip b{color:var(--ink);font-weight:600}
.sys-cta{margin-top:1.8rem;display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap}
.cta-note{margin-top:1rem;font-size:.84rem;color:var(--stil)}
@media (min-width:761px){
  .lp-hero{padding-bottom:8rem}
  .lp-hero h1{font-size:clamp(2.9rem,1.75rem + 5.75vw,7rem);line-height:.95}
  .lp-hero .sub{max-width:44ch}
  .lp-cc .cc-frame{margin-top:-5rem}
}
.lp-cc{padding-top:0}
.lp-vidwrap{padding:0;display:grid;grid-template-rows:1fr auto}
.lp-vidwrap .vid{border-radius:0;border:0;box-shadow:none}
.cc-cell{cursor:pointer}
.cc-cell.kn{background:var(--bg);border:0;font:inherit;text-align:left;width:100%}
@media (max-width:760px){
  .lp-cc{padding:0 1rem;margin-top:1.5rem}
  .lp-cc .cc-frame{border:0;border-radius:18px;box-shadow:0 34px 90px rgba(6,7,13,.16);margin:0}
  .lp-cc .cc-body{grid-template-columns:1fr}
  .lp-vidwrap .vid{border-radius:18px}
  .s-hero{padding-bottom:0}
}

/* ── de telefoon als eigen product ────────────────────────────────── */
.m-head{display:none}
.m-dots{display:inline-flex;gap:4px}
.m-dots i{width:5px;height:5px;border-radius:50%;background:var(--line-2);transition:background-color .2s,width .2s}
.m-dots i.on{background:var(--blue);width:14px;border-radius:3px}
.m-steps,.lp-dashcard{display:none}
@media (max-width:760px){
  .section{padding:2rem 0 .6rem}
  .section + .section{border-top:0}
  .section-head{margin-bottom:1.1rem}
  .section-head .intro{display:none}
  .lp .container{width:100%;padding:0 1.1rem}
  .m-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem}
  .m-head .eyebrow{margin:0}
  .m-mini{font-size:.76rem;font-weight:500;color:var(--stil)}
  h2{font-size:1.45rem}
  /* wat je krijgt: drie veegkaarten */
  .pillars{display:flex;gap:.7rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.2rem 1.1rem 1rem;margin:0 -1.1rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pillars::-webkit-scrollbar{display:none}
  .pillar{flex:0 0 78%;scroll-snap-align:start;border-radius:16px;min-height:11rem}
  .pillar-media{aspect-ratio:auto;height:4rem;border:0;background:none;padding:1rem 1rem 0;place-items:start}
  .pillar-media svg{width:3rem;height:3rem;padding:.5rem;border-radius:11px;background:var(--tint-04);border:1px solid var(--line)}
  .pillar-body{padding:.6rem 1rem 1rem;gap:.35rem}
  .pillar-body h3{font-size:1rem}
  .pillar-body p{font-size:.82rem}
  /* het instrumentarium */
  .inst{grid-template-columns:1fr;gap:.8rem}
  .inst-bar{padding:.9rem 1rem .4rem}
  .inst-t{font-size:1rem}
  .inst-sub{display:none}
  .inst-chips{width:100%;overflow-x:auto;scrollbar-width:none}
  .inst-chips button{flex:1;padding:6px 8px;font-size:12px}
  .inst-stage{margin:.3rem .7rem 0}
  .inst-legend{padding:.5rem 1rem .1rem;font-size:.66rem;gap:.3rem .8rem}
  .inst-uitleg{font-size:.8rem;margin:.3rem 1rem .5rem}
  .cot-rij{grid-template-columns:1fr;gap:.25rem}
  /* de as (leeg · 50 · vol) past niet naast balken op volle breedte */
  .cot-as{display:none}
  /* de mobiele kop 'Wat je krijgt' vervangt de desktopkop van de pijlers */
  .lp-pijlers .section-head{display:none}
  .tools-grid{display:flex;gap:.6rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.2rem 1.1rem 1rem;margin:0 -1.1rem;scrollbar-width:none}
  .tools-grid::-webkit-scrollbar{display:none}
  .tools-grid .card{flex:0 0 66%;scroll-snap-align:start;padding:.9rem .95rem}
  .tools-grid .card p{font-size:.8rem}
  .vis-box{height:4.2rem;margin-bottom:.6rem}
  .tools-voet{font-size:.8rem;margin-top:.6rem}
  /* volumeprofiel: vast in 2D, 240px */
  .vp3d{padding:2rem 1.1rem 1rem;border-top:0;background:var(--bg)}
  .vp3d-head{margin-bottom:1rem;text-align:left}
  .vp3d-head .intro{display:none}
  .vp3d-panel{border-radius:16px;box-shadow:0 16px 40px rgba(6,7,13,.1)}
  .vp3d-bar{padding:10px 12px;gap:8px}
  .vp3d-bar .px{font-size:14px}
  .vp3d-stage{height:240px;min-height:0}
  .vp3d-stage canvas{touch-action:pan-y}
  .vp3d-hint,.vp3d-tip,.vp3d-legend{display:none!important}
  .vp3d-stats>div{padding:9px 12px}
  .vp3d-tag{margin-top:.7rem}
  /* zo start het: drie stappen naast elkaar */
  .m-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;list-style:none;margin:0;padding:0}
  .m-steps li{border:1px solid var(--line);border-radius:14px;padding:.8rem .7rem;display:grid;gap:.35rem;align-content:start}
  .m-steps li.on{border-color:var(--blue);background:var(--tint-04)}
  .m-steps i{width:1.4rem;height:1.4rem;border-radius:50%;border:2px solid var(--blue);display:grid;place-items:center;font:700 .66rem var(--body);color:var(--blue);font-style:normal}
  .m-steps li.on i{background:var(--blue);color:#fff}
  .m-steps b{font:700 .84rem var(--display);line-height:1.2}
  .m-steps span{font-size:.7rem;font-weight:500;color:var(--stil)}
  /* het dashboard, klein */
  .lp-dashcard{display:block;padding:1.6rem 1.1rem .4rem}
  .m-dashcard{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg);box-shadow:0 16px 40px rgba(6,7,13,.08)}
  .m-dashcard .chrome{display:flex;align-items:center;gap:.5rem;padding:.55rem .8rem;border-bottom:1px solid var(--line);background:var(--bg-2)}
  .m-dashcard .chrome i{width:7px;height:7px;border-radius:50%;background:var(--line-2)}
  .m-dashcard .chrome span{margin-left:auto;font-size:.66rem;font-weight:500;color:var(--stil);display:inline-flex;align-items:center;gap:.4em}
  .m-dashcard .chrome span b{width:5px;height:5px;border-radius:50%;background:var(--blue)}
  .m-dashcard .body{padding:.9rem .9rem;display:grid;gap:.7rem}
  .m-dashcard .d{font-size:.7rem;font-weight:500;color:var(--blue)}
  .m-dashcard .hi{font:800 1.05rem var(--display);letter-spacing:-.02em;margin:.15rem 0 0}
  .m-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
  .m-tile{border:1px solid var(--line);border-radius:10px;background:var(--bg-2);padding:.6rem .7rem}
  .m-tile .k{font-size:.66rem;font-weight:500;color:var(--stil)}
  .m-tile .v{font:800 1.15rem var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:.15em 0}
  .m-tile.hl .v{color:var(--blue)}
  .m-tile .c{font-size:.68rem;color:var(--stil)}
  .m-dashcard .cap{padding:.55rem .9rem;border-top:1px solid var(--line);font-size:.68rem;font-weight:500;color:var(--stil)}
  /* volgorde op de telefoon */
  .lp-dashcard{order:10}
  .finale{order:11}
  .footer{order:12}
  .finale{padding:2.6rem 1.1rem 2.4rem}
  .finale h2{font-size:1.8rem}
  .footer{padding-top:1.5rem;padding-bottom:5.5rem}
  .giant{font-size:3.6rem;transform:none;margin-top:.6rem}
  .foot-risk{font-size:.7rem}
}

/* ── intake: op de gate (drie tikken vóór de velden) en als voorstap in
      het agendavenster ─────────────────────────────────────────────── */
.itop{display:flex;justify-content:space-between;align-items:baseline;font-size:.78rem;font-weight:600;color:var(--stil);margin-bottom:.5rem}
.itop b{color:var(--blue);font-weight:600}
.ibar{height:3px;border-radius:2px;background:var(--line);overflow:hidden;margin-bottom:.9rem}
.ibar i{display:block;height:100%;width:0;background:var(--blue);border-radius:2px;transition:width .4s var(--ease)}
.iq{font:700 1.1rem/1.3 var(--display);letter-spacing:-.01em;margin:0}
.iopt{display:grid;gap:.45rem;margin-top:.8rem}
.iopt button{display:flex;justify-content:space-between;align-items:center;gap:.6rem;width:100%;min-height:2.9rem;text-align:left;font:500 .92rem/1.35 var(--body);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:.75em .9em;cursor:pointer;transition:background-color .16s,border-color .16s,transform .14s var(--ease)}
.iopt button:hover{background:var(--bg-2);border-color:color-mix(in srgb,var(--blue) 45%,var(--line))}
.iopt button:active{transform:scale(.985)}
.iopt button span{color:var(--blue);flex:none}
/* ── DE INTAKE IN DE TAAL VAN DE AGENDA ───────────────────────────────
   Het waren nette rijen onder een dun balkje, en het agendavenster ernaast
   kreeg diepte, een streepjesschaal en een mechaniek. Dan voelt de stap
   ervóór als een formulier uit een ander pak.

   .itop en .ibar hierboven blijven staan: .g-card gebruikt .ibar nog. Het
   intakevenster tekent sinds 13-09-2026 .istap en .itiks. */
/* De kop van beide schermen: er belt een mens, en dat mag je zien. Staat
   boven de intake én boven de agenda, zodat de twee als één ding lezen. */
.v-wie{display:flex;align-items:center;gap:.65rem;margin:0 0 .8rem}
.v-mono{
  flex:none;width:2.5rem;height:2.5rem;border-radius:50%;position:relative;
  background:linear-gradient(148deg,color-mix(in srgb,var(--blue) 78%,#fff),var(--blue) 58%,var(--blue-2));
  color:#fff;display:grid;place-items:center;
  font:700 .82rem var(--display);letter-spacing:.02em;
  box-shadow:0 6px 14px -4px color-mix(in srgb,var(--blue) 58%,transparent);
}
.v-mono::after{
  content:"";position:absolute;right:-1px;bottom:-1px;width:.72rem;height:.72rem;
  border-radius:50%;background:#18C964;border:2.5px solid var(--bg);
}
.v-wie-t{min-width:0;line-height:1.28}
.v-wie-t b{display:block;font:700 .86rem var(--display);letter-spacing:-.01em;color:var(--ink)}
.v-wie-t small{font-size:.72rem;color:var(--stil)}
.v-pil{
  margin-left:auto;flex:none;
  font:600 .64rem/1 var(--body);letter-spacing:.04em;text-transform:uppercase;
  color:var(--blue-2);background:var(--chip-bg);border-radius:99px;padding:.4rem .6rem;
}
@media (max-width:560px){
  .v-mono{width:2.25rem;height:2.25rem}
  /* De sluitknop zit rechtsboven; op smalle schermen botst de pil daarmee. */
  .v-pil{display:none}
}

.istap{display:flex;align-items:center;gap:.9rem;margin:0 0 1.3rem}
.itiks{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.itiks i{
  height:2px;width:10px;border-radius:2px;background:var(--line-2);flex:none;
  transition:width .3s var(--ease),background-color .3s;
}
.itiks i.klaar{background:color-mix(in srgb,var(--blue) 45%,var(--bg))}
.itiks i.nu{width:30px;background:var(--blue)}
.istap .n{
  font:600 .72rem var(--body);font-variant-numeric:tabular-nums;
  color:var(--stil);letter-spacing:.05em;white-space:nowrap;
}

/* De vraag komt van rechts binnen, en bij "vorige" van links. Zonder dat
   wisselt het scherm zonder dat je ziet welke kant je op gaat. */
.ikaart{animation:ikom .34s cubic-bezier(.2,.7,.2,1)}
.ikaart.terug{animation-name:ikomterug}
@keyframes ikom{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes ikomterug{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}

/* Eén ding per scherm, en dat ding is de vraag. */
#cal-int .iq{font-size:1.5rem;line-height:1.14;letter-spacing:-.025em;text-wrap:balance}
@media (max-width:560px){#cal-int .iq{font-size:1.3rem}}

/* WAAROM DE RIJEN IN RUST AL BLAUW ZIJN
   Bij de klok is het blauw er meteen: de band ligt er, bleekblauw met een
   blauwe haarrand, ook als je nog niets hebt gedaan. Bij de vragen verscheen
   blauw pas op het moment dat je iets aanraakte, en dan lezen de twee
   schermen als twee verschillende producten. Dit is letterlijk dezelfde
   vulling en dezelfde haarrand als .cal-band -- zie nomad-vsl-1.css. */
#cal-int .iopt button{
  justify-content:flex-start;gap:.8rem;padding:.85em .95em;
  background:var(--chip-bg);
  border-color:transparent;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blue) 13%,transparent);
}
#cal-int .iopt button:hover{
  background:color-mix(in srgb,var(--blue) 14%,var(--bg));
  border-color:transparent;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blue) 34%,transparent);
}
.iopt button .bol{
  width:1.2rem;height:1.2rem;border-radius:50%;flex:none;
  border:1.5px solid color-mix(in srgb,var(--blue) 32%,var(--line-2));background:var(--bg);
  transition:border-color .18s,box-shadow .18s,background-color .18s;
}
.iopt button .tk{color:var(--ink);flex:1 1 auto;min-width:0}
.iopt button .pl{margin-left:auto;color:color-mix(in srgb,var(--blue) 55%,var(--line-2));flex:none;transition:transform .16s,color .16s}
.iopt button:hover .bol{border-color:var(--blue)}
.iopt button:hover .pl{transform:translateX(3px);color:var(--blue)}
.iopt button.aan{
  background:linear-gradient(148deg,color-mix(in srgb,var(--blue) 84%,#fff),var(--blue) 62%,var(--blue-2));
  border-color:transparent;
  box-shadow:0 10px 24px -8px color-mix(in srgb,var(--blue) 60%,transparent);
}
.iopt button.aan .tk{color:#fff}
.iopt button.aan .bol{border-color:#fff;background:#fff;box-shadow:inset 0 0 0 5px var(--blue)}
.iopt button.aan .pl{color:rgba(255,255,255,.85);transform:translateX(3px)}

/* Het spoor: wat er al ligt, in korte vorm. Geen versiering -- dit is
   letterlijk wat er straks als voorbereiding naar Juliën gaat. */
.ispoor{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--line);
}
.ispoor .kop{
  font:600 .62rem var(--body);letter-spacing:.1em;text-transform:uppercase;
  color:var(--stil);margin-right:.15rem;
}
.ispoor .chip{
  display:inline-flex;align-items:center;gap:.4rem;
  font:500 .72rem var(--body);color:var(--chip-tx);
  background:var(--chip-bg);border-radius:99px;padding:.32rem .7rem .32rem .42rem;
  animation:ichip .3s cubic-bezier(.2,.7,.2,1);
}
@keyframes ichip{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
/* Blauw en niet groen: het groen in dit venster is de stip op het monogram,
   en die betekent "hij is bereikbaar" -- een status, geen vinkje. Twee
   betekenissen op één kleur maakt allebei zwakker. */
.ispoor .chip i{
  width:.82rem;height:.82rem;border-radius:50%;background:var(--blue);color:#fff;
  display:grid;place-items:center;font:700 .5rem var(--body);font-style:normal;flex:none;
}

.ivoet{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:1rem}
.ivoet .inote{margin:0}
.ivoet .iterug{padding:0}

@media (prefers-reduced-motion:reduce){
  .ikaart,.ispoor .chip{animation:none}
}

.iterug{background:none;border:0;padding:.5rem 0 0;font:500 .78rem var(--body);color:var(--stil);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.inote{margin:.7rem 0 0;font-size:.76rem;color:var(--stil)}
.ichips{display:flex;flex-wrap:wrap;gap:.3rem;margin:.5rem 0 .2rem}
.ichips span{font-size:.7rem;font-weight:500;color:var(--chip-tx);background:var(--chip-bg);border-radius:999px;padding:.3em .75em}
.gnote{margin-top:.6rem;font-size:.76rem;color:var(--stil);text-align:center}
.g-card .consent.kort{text-align:center}
#cal-int{display:flex;flex-direction:column;min-height:0}
#cal-int > .v-top,#cal-int > .cal-voet{flex:none}
#cal-int > .v-body{flex:1 1 auto}
#cal-int .v-body{padding:1rem 1.4rem 1.2rem}
#cal-int .cal-voet .micro{text-align:left;margin:0}
@media (max-width:560px){#cal-int .v-body{padding:.8rem 1.15rem 1rem}}
@media (max-width:760px){
  .gnote{display:none}
  .g-card .consent.kort{font-size:.68rem}
}

/* ── de video in de pagina: het scherm doet wat de video niet doet ──── */
/* de witte kaart over het beeld: eerst poster, daarna per hoofdstuk */
/* de regel onderin het beeld: drie woorden, wit met schaduw */
/* Boven de bedieningsrij, niet ernaast: met twee knoppen linksonder blijft er
   anders een strook van niks over voor drie woorden. */
/* de hoofdstukbalk */
.v6-track{display:flex;gap:2px;padding:.75rem 1rem .2rem;background:var(--bg)}
.v6-seg{flex:var(--f,1);border:0;background:none;padding:0;cursor:pointer;display:grid;gap:.4rem;text-align:left;min-width:0;font:inherit}
.v6-seg .lijn{display:block;height:4px;border-radius:2px;background:var(--panel-2);overflow:hidden}
.v6-seg .lijn i{display:block;height:100%;width:0;background:var(--blue);border-radius:2px;transition:width .45s var(--ease)}
.v6-seg.was .lijn i{width:100%}
.v6-seg .lbl{font:500 .64rem var(--body);color:var(--stil);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v6-seg.aan .lbl{color:var(--blue-2);font-weight:600}
.v6-seg:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

/* ══ DE BLAUWE STROOK EN DE DOORZICHTIGE NAV ═══════════════════════
   Twee dingen die samenwerken.

   De strook staat boven de nav en scrollt gewoon weg. Hij hoort bij het
   moment van binnenkomen: hier is wat je erbij krijgt. Blijven plakken zou
   hem van aankondiging tot meubel maken, en hij zou de hele pagina lang
   verticale ruimte kosten op precies het scherm waar die het schaarst is.

   De nav begint doorzichtig. Bij binnenkomst zie je daardoor de kop en de
   knop "Plan je call" zonder balk ertussen -- dat is het beeld dat de
   homepage ook geeft. Zodra de strook voorbij is, krijgt de nav zijn eigen
   ondergrond; zonder dat loopt de tekst van de pagina eronderdoor. */
.lp-bar{
  display:block;width:100%;border:0;margin:0;cursor:pointer;
  background:linear-gradient(90deg,var(--blue) 0%,#2C6BFF 100%);
  color:#fff;font-family:inherit;text-align:left;
  padding:.62rem clamp(1.1rem,4vw,3rem);
  transition:filter .16s var(--ease);
}
.lp-bar:hover{filter:brightness(1.06)}
.lp-bar:focus-visible{outline:2px solid #fff;outline-offset:-3px}
.lp-bar-in{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.35rem .7rem;
  max-width:78rem;margin-inline:auto;font-size:.84rem;line-height:1.35}
.lp-bar .merkje{flex:none;font-style:normal;font-size:.58rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;background:rgba(255,255,255,.22);border-radius:999px;padding:.3em .65em}
.lp-bar-tekst{font-weight:500;color:rgba(255,255,255,.95)}
.lp-bar-cta{font-weight:700;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.5);white-space:nowrap}
.lp-bar-cta b{display:inline-block;font-weight:700;transition:transform .18s var(--ease)}
@media (hover:hover) and (pointer:fine){.lp-bar:hover .lp-bar-cta b{transform:translateX(3px)}}

/* De kop begint achter de nav, niet eronder.
   Zonder dit was de nav wel doorzichtig, maar stond er wit achter: de
   gekleurde band van de kop begon pas ónder de nav, dus je zag alsnog een
   witte strook met een knop erin. Nu loopt die band door tot bovenaan en
   staat "Plan je call" erop, precies zoals op de homepage.

   De hoogte komt uit de pagina zelf (een scriptje in training.html zet
   --sv-nav-h), want de nav heeft geen vaste hoogte maar padding die met het
   scherm meeschaalt. De terugval is de hoogte op een laptop. */
.lp-hero{margin-top:calc(-1 * var(--sv-nav-h,4.6rem));padding-top:var(--sv-nav-h,4.6rem)}

/* De nav zelf. `.s-nav` staat in nomad-vsl-1.css met een witte ondergrond;
   hier maken we die stand voorwaardelijk. */
.s-nav{background:transparent;border-bottom-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  transition:background-color .28s var(--ease),border-color .28s var(--ease),backdrop-filter .28s var(--ease)}
.s-nav.vast{background:rgba(255,255,255,.9);border-bottom-color:var(--line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

@media (max-width:720px){
  .lp-bar{padding:.5rem .8rem}
  /* Eén regel, niet twee. De zin brak hier af naar een tweede regel en
     dan wordt de balk hoger dan de nav eronder.
     Het merkje gaat weg -- dat zei alleen "extra" en dat staat al in de
     zin -- en de rij mag niet meer afbreken. nomad-balk.css zet daarna
     de korte zin aan en de lange uit. */
  .lp-bar-in{font-size:.78rem;gap:.3rem .45rem;flex-wrap:nowrap;
             white-space:nowrap;overflow:hidden}
  .lp-bar .merkje{display:none}
}
@media (prefers-reduced-motion:reduce){
  .s-nav,.lp-bar,.lp-bar-cta b{transition:none}
}

/* ── de voortgang op de telefoon ────────────────────────────────────
   Dezelfde hoofdstukbalk als op de computer. Alleen de labels gaan weg:
   zeven namen naast elkaar worden op 390 pixels zeven afgekapte woorden,
   terwijl de streepjes zelf precies doen wat hier nodig is -- ze laten
   zien hoe de video is ingedeeld en hoe ver je erin bent. De streepjes
   worden wel iets dikker en krijgen ruimte eromheen, want een balk van
   vier pixels is geen doel dat je met een duim raakt.

   Eronder in woorden waar je zit, en rechts wat er nog komt. Dat laatste
   is de vraag die je op een telefoon stelt: hoe lang moet ik dit nog
   vasthouden. Op de computer staat daar de tijdcode; die heeft alle
   ruimte, hier telt elke letter. */
@media (max-width:760px){
  .v6-track{padding:.7rem 1rem .55rem;gap:3px}
  .v6-seg{padding-block:.3rem;gap:0}
  .v6-seg .lijn{height:5px;border-radius:3px}
  .v6-seg .lbl{display:none}
}
.v6-mob{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:0 1rem .2rem;font:500 .76rem var(--body);color:var(--stil);min-width:0}
.v6-mob > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v6-mob b{flex:none;font-weight:600;color:var(--blue-2);background:var(--chip-bg);
  border-radius:999px;padding:.2em .8em;font-variant-numeric:tabular-nums}
.v6-cap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.7rem 1rem .85rem;border-top:1px solid var(--line);margin-top:.6rem;font:500 .76rem var(--body);color:var(--stil)}
.v6-cap b{font-weight:500;color:var(--blue-2);background:var(--chip-bg);border-radius:999px;padding:.2em .9em;font-variant-numeric:tabular-nums}
/* de rail: dof tot hij het noemt */
/* de voet: licht op als hij zelf om het gesprek vraagt */
.v6-foot{border-top:1px solid var(--line);padding:.85rem 1.2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:var(--bg);transition:background-color .4s var(--ease)}
.v6-foot.actief{background:var(--chip-bg)}
.v6-foot .txt{font:500 .8rem var(--body);color:var(--stil);min-width:0}
.v6-foot .txt b{display:block;font:700 .95rem var(--display);letter-spacing:-.02em;color:var(--ink)}
.v6-foot .btn{flex:none;transition:transform .2s var(--ease)}
.v6-foot.actief .btn{transform:scale(1.04)}
/* de mini-speler op de telefoon */
.v6-mp{display:none}
@media (max-width:760px){
  /* Eén bron voor de maten: het beeld ligt als position:fixed exact over de
     .slot in de balk, dus die twee moeten gelijk blijven. 7.5rem is 120px op
     een telefoon: groot genoeg om te zien wát er speelt, klein genoeg om de
     pagina niet te blokkeren. */
  body{--mini-b:7.5rem;--mini-h:4.22rem;--mini-x:1.1rem;--mini-y:1.1rem}
  /* nooit twee balken: is de mini-speler er, dan wijkt de vaste knopbalk */
  body.mini-actief .s-vast{display:none}
  .v6-mp{position:fixed;left:.5rem;right:.5rem;bottom:.6rem;z-index:30;display:flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px;padding:.5rem .6rem;box-shadow:0 12px 30px rgba(6,7,13,.18)}
  .v6-mp[hidden]{display:none}
  .v6-mp .terug{flex:1;min-width:0;display:flex;align-items:center;gap:.7rem;background:none;border:0;padding:0;margin:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
  .v6-mp .terug:active{opacity:.75}
  .v6-mp .slot{flex:none;width:var(--mini-b);height:var(--mini-h)}
  .v6-mp .t{min-width:0;flex:1}
  .v6-mp .t b{display:block;font:700 .84rem var(--display);letter-spacing:-.01em;line-height:1.2;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .v6-mp .t span{font:500 .7rem var(--body);color:var(--stil);font-variant-numeric:tabular-nums}
  .v6-mp .pijl{flex:none;width:2rem;height:2rem;border-radius:50%;background:var(--chip-bg);color:var(--blue);display:grid;place-items:center}
  .v6-mp .pijl svg{width:1.1rem;height:1.1rem}
  .v6-mp .x{flex:none;width:2.2rem;height:2.2rem;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--stil);font-size:.8rem;display:grid;place-items:center;cursor:pointer}
  /* de speler zelf, in het vak linksonder. pointer-events:none: een tik op het
     beeld hoort door te vallen naar de knop eronder, zodat je terugspringt naar
     de video in plaats van de Vimeo-iframe te raken. */
  .vid.mini{position:fixed;left:var(--mini-x);bottom:var(--mini-y);width:var(--mini-b);height:var(--mini-h);aspect-ratio:auto;z-index:31;border-radius:10px;box-shadow:0 6px 16px rgba(6,7,13,.25);pointer-events:none}
  .vid.mini .vid-bediening{display:none}
}

/* ── het bewijs: zes leden na de video, het wins-kanaal aan het eind ──
   Gevuld door nomad-vsl-bewijs-1.js. De cover schaalt met cqw op zijn
   eigen breedte, zodat dezelfde kaart klopt in een raster van drie én in
   een veegstrook van één. ────────────────────────────────────────────── */
.bewijs{padding:clamp(2.5rem,1.8rem + 4vw,5rem) 0;border-top:1px solid var(--line);background:var(--bg)}
.rvs{display:grid;grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));gap:1rem;margin-top:.4rem}
/* Zeven kaarten: op een breed scherm vier plus drie. In drie kolommen zou de
   zevende er alleen bij hangen. */
@media (min-width:1200px){.rvs{grid-template-columns:repeat(4,1fr)}}
.rv{container-type:inline-size;position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#06070D;color:#EEF1F8;border:0;padding:0;text-align:left;font-family:var(--display);display:block;width:100%}
button.rv{cursor:pointer}
.rv .still{position:absolute;inset:0;background-color:#171a24;background-size:cover;background-position:62% 30%;background-repeat:no-repeat}
.rv .veil{position:absolute;inset:0;background:linear-gradient(94deg,#06070D 0%,#06070D 40%,rgba(6,7,13,.55) 62%,transparent 82%),radial-gradient(ellipse 60% 55% at 12% 0%,rgba(0,82,255,.3),transparent 68%)}
.rv .in{position:relative;z-index:2;height:100%;padding:6cqw 6cqw 11cqw;display:flex;flex-direction:column;justify-content:center}
.rv .q{font-weight:900;text-transform:uppercase;font-size:6.4cqw;line-height:.98;letter-spacing:-.028em;max-width:58cqw;margin:0}
.rv .q i{color:#5B84F0;font-style:normal}
.rv mark{background:var(--blue);color:#fff;padding:.02em .18em .06em;border-radius:.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.rv .streep{width:15cqw;height:.5cqw;background:var(--blue);border-radius:.3cqw;margin:3cqw 0 2cqw}
.rv .n{display:flex;align-items:baseline;gap:1cqw;flex-wrap:wrap}
.rv .n b{font-weight:800;text-transform:uppercase;font-size:max(3.3cqw,.72rem);letter-spacing:-.02em}
.rv .n span{font-family:var(--body);font-weight:500;font-size:max(1.9cqw,.64rem);color:#8089A0}
.rv .merk{position:absolute;left:6cqw;bottom:4.6cqw;z-index:3;font-weight:900;font-size:max(2.4cqw,.62rem);letter-spacing:-.035em}
.rv .merk i{color:var(--blue);font-style:normal}
.rv .play{position:absolute;right:5cqw;bottom:5cqw;z-index:3;width:9cqw;height:9cqw;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;transition:transform .2s var(--ease)}
.rv .play::after{content:"";border-left:2.6cqw solid #14171C;border-top:1.6cqw solid transparent;border-bottom:1.6cqw solid transparent;margin-left:.7cqw}
.rv:hover .play{transform:scale(1.08)}

/* ── de uitnodiging op de achtste plek ──────────────────────────────
   Zelfde vorm en zelfde letter als een coverkaart, maar zonder foto en
   zonder naam: dit is geen achtste verhaal, het is de lege stoel. Blauw
   in plaats van een still, zodat hij in de rij opvalt als het enige wat
   je kunt doen in plaats van bekijken. */
.rv-nodig{background:var(--dark);cursor:pointer}
.rv-nodig .gloed{position:absolute;inset:0;
  background:radial-gradient(ellipse 78% 70% at 18% 0%,rgba(0,82,255,.55),transparent 64%),
             linear-gradient(160deg,rgba(0,82,255,.18),transparent 58%)}
.rv-nodig .in{justify-content:center}
.rv-nodig .q{max-width:70cqw}
.rv-nodig .n b{font-family:var(--display)}
.rv-nodig .n span{color:#9AA5BC}
.rv-nodig .pijl{position:absolute;right:5cqw;bottom:4.4cqw;z-index:3;width:9cqw;height:9cqw;border-radius:50%;
  background:var(--blue);color:#fff;display:grid;place-items:center;font-size:4.4cqw;line-height:1;
  transition:transform .2s var(--ease)}
.rv-nodig:hover{border:0}
.rv-nodig:hover .pijl{transform:translateX(.9cqw)}
.rv-nodig:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.8rem;margin-top:1rem}
.quo{border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;background:var(--bg);display:grid;gap:.5rem;align-content:start}
.quo.acc{background:var(--tint-07);border-color:color-mix(in srgb,var(--blue) 25%,var(--line))}
.quo q{quotes:none;font:500 .95rem/1.45 var(--body);color:var(--ink)}
.quo q::before{content:"\201C";color:var(--blue);font:800 1.5rem var(--display);line-height:0;margin-right:.12em;vertical-align:-.32em}
.quo .w{font-size:.76rem;color:var(--stil)}
.quo .w b{color:var(--ink);font-weight:700}
.muur{display:flex;gap:.8rem;align-items:flex-start}
.muur .kol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:.8rem}
.muur button{margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg);cursor:pointer;display:block;width:100%}
.muur img{width:100%;height:auto;display:block}
.voetnoot{margin-top:1.4rem;font-size:.8rem;color:var(--stil);line-height:1.6;max-width:72ch}

/* telefoon: twee stroken in dezelfde container */
.m-bw{display:grid;gap:.15rem}
.m-bw .m-eyebrow{font-size:.76rem;font-weight:500;color:var(--stil);margin:0}
.m-bw .m-later{margin-top:1.5rem}
.m-bw h2{font-size:1.45rem;margin-top:.1rem}
.m-bw .m-sub{margin:.3rem 0 .55rem;font-size:.86rem;color:var(--muted);line-height:1.45}
.m-strook{display:flex;gap:.6rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:.1rem 0 .2rem}
.m-strook::-webkit-scrollbar{display:none}
.m-strook > *{flex:none;scroll-snap-align:center}
.m-strook-vid > *{width:100%}
/* Vaste hoogte, breedte volgt de foto. Zo staat elk bericht er compleet in
   plaats van bijgesneden tot een reepje, en verspringt de strook niet. */
.m-strook-win{align-items:flex-start}
.m-strook-win > *{width:auto;height:min(56vh,430px)}
.m-rv2{border-radius:14px;border:1px solid var(--dark);box-shadow:0 10px 26px rgba(6,7,13,.16)}
.m-win2{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg);padding:0;cursor:pointer;display:block}
.m-win2 img{height:100%;width:auto;max-width:none;display:block}
.bw-dots{display:flex;justify-content:center;gap:5px;padding:.55rem 0 0}
.bw-dots i{width:5px;height:5px;border-radius:50%;background:var(--line-2);transition:width .2s,background-color .2s}
.bw-dots i.on{background:var(--blue);width:14px;border-radius:3px}
.m-meer{display:flex;align-items:center;justify-content:center;gap:.5em;width:100%;margin-top:.8rem;border:1px solid var(--line);border-radius:12px;background:var(--bg);padding:.85rem 1rem;font:600 .8rem var(--body);color:var(--ink);cursor:pointer}
.m-meer i{font-style:normal;color:var(--blue)}

/* het schuifvel met alle berichten: zelfde bouw als het agendavenster */
.modal--bw{max-width:40rem;max-height:calc(100vh - 2rem);max-height:calc(100dvh - 2rem);display:flex;flex-direction:column;min-height:0}
.modal--bw .v-top{flex:none}
.modal--bw .modal-x{width:2.75rem;height:2.75rem;font-size:1rem}
.bw-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:.4rem 1.15rem 2rem}
.m-lijst{columns:2;column-gap:.55rem}
.m-lijst button{break-inside:avoid;margin:0 0 .55rem;width:100%;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg);cursor:pointer;display:block}
.m-lijst img{width:100%;height:auto;display:block}
@media (max-width:560px){
  #scrim-bw{place-items:end center;padding:0}
  .modal--bw{max-width:none;margin:0;height:88vh;height:88dvh;max-height:none;border-radius:22px 22px 0 0;border-bottom:0;transform:translateY(40px)}
  .scrim.open .modal--bw{transform:none}
  .modal--bw .modal-x{top:1.05rem;right:.8rem;width:2.5rem;height:2.5rem}
}

/* het vergrootglas: boven alles, ook boven het schuifvel */
.licht{position:fixed;inset:0;z-index:300;background:rgba(6,7,13,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;place-items:center;padding:1.5rem}
.licht.open{display:grid}
.licht figure{margin:0;max-width:min(52rem,92vw);display:grid;gap:.8rem;justify-items:center}
.licht img{max-height:78vh;max-height:78dvh;width:auto;max-width:100%;border-radius:10px;background:#fff}
.licht .vid{width:min(64rem,92vw);aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
/* Zes van de zeven reviews zijn met een telefoon opgenomen en dus staand. In
   een liggend kader worden dat twee zwarte balken met een postzegel ertussen;
   zo vult de opname de hoogte en klopt de vorm. */
.licht .vid.staand{width:auto;height:min(76vh,76dvh);aspect-ratio:9/16;max-width:92vw}
.licht .vid iframe{width:100%;height:100%;border:0;display:block}
.licht figcaption{color:#EEF1F8;font-size:.86rem;text-align:center;font-family:var(--body);max-width:60ch}
.licht figcaption b{display:block;font:700 1rem var(--display);margin-bottom:.15rem}
.licht button{position:fixed;width:2.9rem;height:2.9rem;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;font-size:1.1rem;cursor:pointer;display:grid;place-items:center}
.licht .sluit{top:1.2rem;right:1.2rem}
.licht .vorige{top:50%;left:1.2rem;transform:translateY(-50%)}
.licht .volgende{top:50%;right:1.2rem;transform:translateY(-50%)}
@media (max-width:560px){
  .licht{padding:3.5rem .75rem 4.5rem}
  .licht img{max-height:70vh;max-height:70dvh}
  .licht .vorige,.licht .volgende{top:auto;bottom:1rem;transform:none}
  .licht .vorige{left:1rem}.licht .volgende{right:1rem}
}

/* ═══════════════════════════════════════════════════════════════════
   BEWEGING OP DE PAGINA — vervolg op de laag in nomad-vsl-1.css.
   Daar staan de vensters en de knoppen; hier de pagina zelf: kaarten
   die op een muis reageren, secties die binnenkomen als je erbij bent,
   het vergrootglas, en de mini-speler die omhoog schuift.

   LET OP bij transform op een sectie: een element met een transform
   wordt het referentiekader voor alles wat position:fixed is dat erin
   staat. De sectie met de video valt daarom bewust buiten het
   binnenkomen -- de mini-speler is fixed en zou aan die sectie blijven
   plakken in plaats van aan het scherm.
   ═══════════════════════════════════════════════════════════════════ */

/* ── binnenkomen bij het scrollen ───────────────────────────────────
   Twaalf pixels omhoog en van doorzichtig naar vol. Verder niets: het
   mag opvallen dat de pagina leeft, niet dát er een animatie is.
   Zonder JavaScript blijft alles gewoon staan (geen .onthul-klasse). */
.onthul{opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.onthul.zichtbaar{opacity:1;transform:none}

/* ── kaarten onder een muis ─────────────────────────────────────────*/
@media (hover:hover) and (pointer:fine){
  .rv,.muur button,.m-win2,.quo,.pillar,.card,.tool,.cc-cell,.m-meer{
    transition:transform .22s var(--ease),box-shadow .22s var(--ease),
               border-color .22s var(--ease),background-color .22s var(--ease)}
  button.rv:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(6,7,13,.22)}
  .muur button:hover,.m-win2:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(6,7,13,.12);border-color:var(--blue)}
  .quo:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(6,7,13,.07)}
  .m-meer:hover{border-color:var(--blue);background:var(--tint-04)}
  .pillar:hover,.card:hover,.tool:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(6,7,13,.08)}
  .cc-cell:hover{background:var(--bg-2)}
  .story-arrows .circle-btn:hover{transform:scale(1.06)}
}
.muur button:active,.m-win2:active,button.rv:active{transform:scale(.985)}

/* ── vegen ──────────────────────────────────────────────────────────
   scroll-padding lijnt de eerste kaart uit met de tekst ernaast, zodat
   een strook niet half tegen de rand begint. */
.m-strook{scroll-padding-inline:0}
.m-strook > *{transition:transform .3s var(--ease)}

/* ── het vergrootglas ───────────────────────────────────────────────
   display:none kan niet faden; met opacity en visibility wel. De plaat
   zelf komt iets opgeschaald binnen, alsof hij naar voren stapt. */
.licht{display:grid;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .26s var(--ease),visibility 0s .26s}
.licht.open{opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .26s var(--ease),visibility 0s}
.licht figure{transform:scale(.94);transition:transform .34s var(--ease)}
.licht.open figure{transform:none}
.licht button{transition:background-color .18s var(--ease),transform .18s var(--ease)}
.licht button:hover{background:rgba(255,255,255,.22)}
.licht button:active{transform:scale(.92)}
.licht .sluit:hover{transform:rotate(90deg)}

/* ── het schuifvel met alle berichten ───────────────────────────────*/
@media (max-width:560px){
  .modal--bw{opacity:1;transform:translateY(100%);transition:transform var(--t-blad) var(--ease)}
  .scrim.open .modal--bw{transform:none}
}

@media (prefers-reduced-motion:reduce){
  .onthul,.onthul.zichtbaar{opacity:1;transform:none;transition:none}
  .licht figure,.licht.open figure{transform:none;transition:none}
  .rv,.muur button,.m-win2,.quo,.pillar,.card,.tool,.cc-cell,.m-meer{transition:none}
  .modal--bw,.scrim.open .modal--bw{transition:opacity .01s linear;transform:none}
}

/* ── de mini-speler schuift omhoog ──────────────────────────────────
   [hidden] is display:none en daar valt niets aan te bewegen. Vandaar
   een klasse op <body> die JavaScript één beeldje later zet: dan is de
   balk al getekend en heeft de overgang iets om van te vertrekken.
   Alleen de balk reist; het verkleinde beeld faded, want dat verdwijnt
   op het moment dat de video zelf weer in beeld staat. */
@media (max-width:760px){
  .v6-mp{transform:translateY(150%);transition:transform .42s var(--ease)}
  body.mini-in .v6-mp{transform:none}
  .vid.mini{opacity:0;transition:opacity .22s var(--ease)}
  body.mini-in .vid.mini{opacity:1}
  .s-vast{transition:transform .32s var(--ease),opacity .22s var(--ease)}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .v6-mp,body.mini-in .v6-mp{transform:none;transition:none}
  .vid.mini{opacity:1;transition:none}
}

/* Het vergrootglas dekt alles af; de mini-speler is position:fixed en zou
   eronderdoor blijven schemeren. Zolang je een bericht groot bekijkt, wijkt hij. */
body.licht-open .v6-mp{display:none}

/* ── de mini-speler op de laptop ─────────────────────────────────────
   Dezelfde machinerie als op de telefoon, andere vorm. Daar is het een
   balk over de volle breedte met een postzegel ernaast, want breedte is
   schaars. Hier is er ruimte, dus wordt het een kaart rechtsonder: het
   beeld boven, een bijschrift eronder. Je kunt gewoon blijven kijken.

   De hoogte van de bijschriftrij staat vast op 3.4rem. Dat is geen
   luiheid maar noodzaak: het beeld ligt er als position:fixed exact
   overheen, en zonder vaste rijhoogte zou --mini-y met de tekst
   meebewegen en het beeld scheef komen te liggen. */
@media (min-width:761px){
  body{--mini-b:22rem;--mini-h:12.375rem;--mini-x:1.5rem;--mini-y:4.9rem}  /* 22rem in 16:9 = 12.375rem */
  .v6-mp{position:fixed;right:var(--mini-x);bottom:1.5rem;left:auto;z-index:30;
    width:var(--mini-b);display:block;padding:0;overflow:hidden;
    background:rgba(255,255,255,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    /* geen rand: het beeld ligt er als los element overheen en zou anders een
       haarlijn onder de bovenrand uitsteken. De schaduw geeft genoeg definitie. */
    border:0;border-radius:16px;box-shadow:0 24px 64px rgba(6,7,13,.26),0 2px 8px rgba(6,7,13,.10)}
  .v6-mp[hidden]{display:none}
  /* De sluitknop staat in de bijschriftregel en niet over het beeld. Dat is
     geen smaakkwestie: het beeld ligt als los, hoger gestapeld element over de
     kaart heen, en een kruisje daaronder is onzichtbaar. Naast de pijl is het
     bovendien altijd te zien in plaats van pas bij hover. */
  .v6-mp .terug{display:grid;grid-template-columns:1fr auto;grid-template-rows:var(--mini-h) 3.4rem;
    grid-template-areas:"slot slot" "tekst pijl";
    width:100%;background:none;border:0;padding:0;margin:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
  .v6-mp .slot{grid-area:slot;width:100%;height:var(--mini-h);background:#06070D}
  .v6-mp .t{grid-area:tekst;align-self:center;min-width:0;padding-left:.95rem}
  .v6-mp .t b{display:block;font:700 .88rem var(--display);letter-spacing:-.01em;line-height:1.2;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .v6-mp .t span{font:500 .72rem var(--body);color:var(--stil);font-variant-numeric:tabular-nums}
  .v6-mp .pijl{grid-area:pijl;align-self:center;margin-right:3.2rem;
    width:2.1rem;height:2.1rem;border-radius:50%;background:var(--chip-bg);color:var(--blue);
    display:grid;place-items:center;transition:transform .2s var(--ease)}
  .v6-mp .pijl svg{width:1.15rem;height:1.15rem}
  .v6-mp .x{position:absolute;right:.85rem;bottom:1.05rem;
    width:1.8rem;height:1.8rem;border-radius:50%;border:1px solid var(--line);background:var(--bg);
    color:var(--stil);font-size:.7rem;display:grid;place-items:center;cursor:pointer;
    transition:background-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
  .v6-mp .x:hover{background:var(--bg-2);color:var(--ink);transform:rotate(90deg)}
  .v6-mp:hover .pijl{transform:translateY(-2px)}
  /* het beeld ligt exact over de slot. pointer-events:none, zodat een klik op
     het beeld doorvalt naar de knop eronder en je terugspringt naar de video
     in plaats van de Vimeo-iframe te raken. */
  .vid.mini{position:fixed;left:auto;right:var(--mini-x);bottom:var(--mini-y);
    width:var(--mini-b);height:var(--mini-h);aspect-ratio:auto;z-index:31;
    border-radius:16px 16px 0 0;box-shadow:none;pointer-events:none}
  .vid.mini .vid-bediening{display:none}
  /* dezelfde reis omhoog als op de telefoon */
  .v6-mp{transform:translateY(150%);transition:transform .42s var(--ease)}
  body.mini-in .v6-mp{transform:none}
  .vid.mini{opacity:0;transition:opacity .22s var(--ease)}
  body.mini-in .vid.mini{opacity:1}
}
@media (min-width:761px) and (prefers-reduced-motion:reduce){
  .v6-mp,body.mini-in .v6-mp{transform:none;transition:none}
  .vid.mini{opacity:1;transition:none}
}

/* De hint onder een intakevraag (alleen de investeringsvraag heeft er een).
   Hij hoort bij de vraag, dus vlak eronder en in de stille kleur. */
.ihint{margin:.35rem 0 0;font-size:.82rem;line-height:1.45;color:var(--stil)}
#cal-int .ihint{margin-bottom:.2rem}
/* Negen vragen in plaats van drie: het blad moet kunnen scrollen als een
   vraag vijf opties heeft, en de knoppen mogen niet aan elkaar plakken. */
#cal-int .v-body{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.iopt{gap:.45rem}

/* De intakekaart naast de route houdt negen vragen aan in plaats van drie.
   Twee gevolgen: een vraag kan vijf opties hebben, en het lijstje met
   antwoorden aan het eind is drie keer zo lang. Beide mogen scrollen binnen
   de kaart in plaats van hem uit te rekken. */
.ipv-card{min-height:24rem;max-height:34rem}
.ipv-opties{max-height:15rem;overflow-y:auto;overscroll-behavior:contain;padding-right:.2rem}
.ipv-lijst{max-height:13rem;overflow-y:auto;overscroll-behavior:contain;padding-right:.2rem}
.ipv-lijst em{text-transform:none;letter-spacing:0;font-size:.6rem;color:var(--stil);margin-bottom:.1rem}
.ipv-lijst li span{line-height:1.3}

/* De nieuwe opname heeft de ondertitels in het beeld gebrand, onderin het
   midden. Op een computer is de video hoog genoeg en staan de knoppen daar
   onder; op een telefoon van 200px hoog vallen ze er precies overheen en
   dekte "Geluid aan" de zin af. Daarom daar naar de bovenhoek. */
@media (max-width:760px){
  .vid-bediening{top:.55rem;bottom:auto}
  .vid.mini .vid-bediening{display:none}
}

/* ═══════════════════════════════════════════════════════════════════
   DE FINALE — de training is uitgekeken

   Het ene moment waarop iets mag opkomen zonder dat het de video in de weg
   zit: de video is klaar. Daarom groter dan de WhatsApp-kaart, en met een
   opkomst die het moment markeert: de ring loopt vol tot 4:01, de vink
   springt erin met een korte vonkenregen, en pas daarna komen de twee
   keuzes -- de call, of eerst de strategie-video. De kop is donker in de
   taal van het slotpaneel; de keuzes staan wit eronder, de call in het
   blauw van elke primaire knop, de WhatsApp-weg met het groen van WhatsApp
   als herkenning op één plek.

   Met "beweging beperken" staat alles er meteen. */
#scrim-fin{background:radial-gradient(ellipse 70% 60% at 50% 25%,rgba(0,82,255,.30),rgba(6,7,13,.72) 70%)}
.modal--fin{max-width:30rem;max-height:calc(100dvh - 2rem);overflow:auto;overscroll-behavior:contain;outline:none}
.modal--fin .modal-x{width:2.75rem;height:2.75rem;font-size:1rem;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff}
.fin-kop{position:relative;background:var(--dark);color:#EEF1F8;padding:1.7rem 1.5rem 1.45rem;text-align:center;overflow:hidden}
.fin-kop::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 85% 70% at 50% -5%,rgba(0,82,255,.55),transparent 66%)}
.fin-kop > *{position:relative;z-index:2}
.fin-kop .grip{background:rgba(255,255,255,.35);margin-bottom:1rem}

/* de ring: 2π·52 ≈ 326.7, de omtrek van de cirkel in de viewBox */
/* ── WIE ER BELT, BOVEN DE VRAAG ──────────────────────────────────
   Dezelfde kop als het agendavenster en de zes intakevragen: een monogram
   met een groene stip en zijn naam. De hele trechter spreekt daarmee één
   taal -- je plant geen call, je spreekt met iemand af.

   De grote ring met de vonkenregen hieronder staat er niet meer in de
   markup. Twee keer hetzelfde gebaar boven elkaar (een ring die zich vult
   én een monogram) is er één te veel; het monogram wint omdat het de taal
   van de rest van de trechter is. De regels blijven staan voor het geval
   je hem terug wilt. */
/* Met een monogram links hoort de hele kop links te staan: een gecentreerde
   titel boven een linkse naamregel leest als twee losse dingen. */
.fin-kop{text-align:left}
.fin-wie{display:flex;align-items:center;gap:.65rem;margin:0 0 .9rem}
.fin-mono{
  flex:none;width:2.6rem;height:2.6rem;border-radius:50%;position:relative;
  background:linear-gradient(148deg,color-mix(in srgb,var(--blue) 78%,#fff),var(--blue) 58%,var(--blue-2));
  color:#fff;display:grid;place-items:center;
  font:700 .85rem var(--display);letter-spacing:.02em;
  box-shadow:0 6px 14px -4px color-mix(in srgb,var(--blue) 58%,transparent);
}
.fin-mono::after{
  content:"";position:absolute;right:-1px;bottom:-1px;width:.74rem;height:.74rem;
  /* De rand neemt de kleur van het vlak eronder aan, zodat de stip er echt
     uitgeknipt uitziet -- ook in de donkere jas, waar --dark anders is. */
  border-radius:50%;background:#18C964;border:2.5px solid var(--dark);
}
.fin-wie-t{min-width:0;line-height:1.28}
.fin-wie-t b{display:block;font:700 .9rem var(--display);letter-spacing:-.01em;color:#fff}
.fin-wie-t small{font-size:.74rem;color:rgba(255,255,255,.62)}

.fin-ring{position:relative;width:6.6rem;height:6.6rem;margin:0 auto 1rem}
.fin-ring svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
.fin-ring circle{fill:none;stroke-width:6;stroke-linecap:round}
.fin-ring .spoor{stroke:rgba(255,255,255,.12)}
.fin-ring .baan{stroke:var(--blue);stroke-dasharray:326.7;stroke-dashoffset:326.7;filter:drop-shadow(0 0 6px rgba(0,82,255,.7))}
.scrim.open .fin-ring .baan{animation:fin-ring 1.1s .3s var(--ease) forwards}
@keyframes fin-ring{to{stroke-dashoffset:0}}
.fin-ring .fin-vink{position:absolute;inset:0;display:grid;place-items:center;color:#fff;transform:scale(.2);opacity:0}
.fin-ring .fin-vink svg{width:2.3rem;height:2.3rem;transform:none}
.scrim.open .fin-ring .fin-vink{animation:fin-vink .55s 1.3s var(--ease) forwards}
@keyframes fin-vink{0%{transform:scale(.2);opacity:0}60%{transform:scale(1.28);opacity:1}100%{transform:scale(1);opacity:1}}
.fin-ring .vonken{position:absolute;inset:0;pointer-events:none}
.fin-ring .vonken i{position:absolute;left:50%;top:50%;width:.42rem;height:.42rem;margin:-.21rem 0 0 -.21rem;border-radius:50%;background:#fff;opacity:0;
  box-shadow:0 0 8px rgba(255,255,255,.9);transform:rotate(var(--r)) translateY(-2.4rem) scale(.3)}
.fin-ring .vonken i:nth-child(odd){background:#5B84F0;box-shadow:0 0 8px rgba(91,132,240,.9)}
.scrim.open .fin-ring .vonken i{animation:fin-vonk .8s 1.32s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes fin-vonk{0%{opacity:0;transform:rotate(var(--r)) translateY(-2.4rem) scale(.3)}18%{opacity:1}100%{opacity:0;transform:rotate(var(--r)) translateY(-5.4rem) scale(1)}}

.fin-tijd{margin:0 0 .55rem;font-size:.78rem;font-weight:600;color:#8089A0;font-variant-numeric:tabular-nums}
.fin-kop h2{font-size:clamp(1.55rem,1.2rem + 1.6vw,2.05rem);font-weight:900;line-height:1.04;letter-spacing:-.03em;margin:0;text-wrap:balance}
.fin-kop h2 .dot{color:var(--blue)}
.fin-sub{margin:.7rem auto 0;font-size:.93rem;line-height:1.5;color:#A8B0C4;max-width:33ch;text-wrap:pretty}

.fin-body{padding:1.15rem 1.5rem 1.4rem;display:grid;gap:.6rem}
.fin-keus{display:grid;grid-template-columns:2.6rem 1fr auto;gap:.9rem;align-items:center;text-align:left;width:100%;padding:.95rem 1rem;
  border:1px solid var(--line);border-radius:16px;background:var(--bg);color:var(--ink);font-family:inherit;cursor:pointer;
  transition:transform var(--t-tik) var(--ease),border-color var(--t-tik) var(--ease),background-color var(--t-tik) var(--ease),box-shadow var(--t-tik) var(--ease)}
.fin-keus:hover{border-color:var(--line-2);background:var(--bg-2)}
.fin-keus:active{transform:scale(.985)}
.fin-keus:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.fin-keus .ic{width:2.6rem;height:2.6rem;border-radius:12px;display:grid;place-items:center;background:var(--chip-bg);color:var(--blue)}
.fin-keus .ic svg{width:1.35rem;height:1.35rem}
.fin-keus b{display:block;font-size:.98rem;line-height:1.25}
.fin-keus .tekst > span{display:block;font-size:.8rem;color:var(--stil);line-height:1.45;margin-top:.18rem}
.fin-keus .arrow{color:var(--stil);font-size:1.05rem}
.fin-keus.primair{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 14px 34px rgba(0,82,255,.28)}
.fin-keus.primair:hover{background:var(--blue-2);border-color:var(--blue-2);box-shadow:0 10px 26px rgba(0,82,255,.32)}
.fin-keus.primair .ic{background:rgba(255,255,255,.16);color:#fff}
.fin-keus.primair .tekst > span,.fin-keus.primair .arrow{color:rgba(255,255,255,.8)}
.fin-keus.wa .ic{background:#E4F7EC;color:#118A47}

/* de opkomst: eerst de ring, dan de tijd en de kop, dan de keuzes */
.scrim.open .fin-tijd,.scrim.open .fin-kop h2,.scrim.open .fin-sub,.scrim.open .fin-keus,.scrim.open .fin-body .cal-ghost{animation:nv-paneel-in .5s var(--ease) both}
.scrim.open .fin-tijd{animation-delay:.95s}
.scrim.open .fin-kop h2{animation-delay:.55s}
.scrim.open .fin-sub{animation-delay:.72s}
.scrim.open .fin-keus:nth-child(1){animation-delay:1.05s}
.scrim.open .fin-keus:nth-child(2){animation-delay:1.18s}
.scrim.open .fin-body .cal-ghost{animation-delay:1.4s}

@media (max-width:560px){
  #scrim-fin{place-items:end center;padding:0}
  .modal--fin{max-width:none;margin:0;max-height:92vh;max-height:92dvh;border-radius:22px 22px 0 0;border-bottom:0}
  .fin-kop{padding:1.1rem 1.25rem 1.2rem}
  .fin-ring{width:5.6rem;height:5.6rem;margin-bottom:.8rem}
  .fin-kop h2{font-size:1.6rem}
  .fin-body{padding:.9rem 1.15rem 1.3rem;gap:.5rem}
  .fin-keus{padding:.85rem .9rem;gap:.75rem;grid-template-columns:2.3rem 1fr auto}
  .fin-keus .ic{width:2.3rem;height:2.3rem}
}
@media (prefers-reduced-motion:reduce){
  .scrim.open .fin-ring .baan{animation:none;stroke-dashoffset:0}
  .scrim.open .fin-ring .fin-vink{animation:none;transform:none;opacity:1}
  .scrim.open .fin-ring .vonken i{animation:none}
  .scrim.open .fin-tijd,.scrim.open .fin-kop h2,.scrim.open .fin-sub,.scrim.open .fin-keus,.scrim.open .fin-body .cal-ghost{animation:none}
}