/* Waardeladder, DoDiversity */
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/dm-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/dm-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/dm-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/dm-sans-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Arvo";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/arvo-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Arvo";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/arvo-latin-700-normal.woff2") format("woff2")}
:root{
  --blue:#377AFF; --blue-d:#1F57C8; --dark:#0E2A5E; --dark-d:#061838; --sage:#8DAB7F; --sage-d:#6A8A5C; --light:#A8C4FF; --light-d:#7FA3F0;
  --bg:#FAFAF8; --surface:#FFFFFF; --surface-2:#F1F3EF; --ink:#1A1A1A; --head:#0E2A5E; --muted:#666666; --line:#E0E0DC;
  --wood:#CDBB9F; --wood-d:#A8957A;
  --font-head:"Rockwell","Rockwell Nova","Arvo",Georgia,serif; --font-body:"DM Sans",Calibri,system-ui,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0D1B2A;--surface:#15263A;--surface-2:#1B2F47;--ink:#F0F0EE;--head:#F0F0EE;--muted:#A9B3BF;--line:#2A3D55;--wood:#7D6E5A;--wood-d:#5F5344;}}
:root[data-theme="dark"]{--bg:#0D1B2A;--surface:#15263A;--surface-2:#1B2F47;--ink:#F0F0EE;--head:#F0F0EE;--muted:#A9B3BF;--line:#2A3D55;--wood:#7D6E5A;--wood-d:#5F5344;}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2{font-family:var(--font-head);font-weight:700;color:var(--head);line-height:1.12;margin:0}
h1{font-size:clamp(40px,6.5vw,68px)}
h2{font-size:clamp(28px,3.6vw,40px)}
h3{font-size:18px;font-weight:700;color:var(--head);margin:0}
p{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.sub{color:var(--muted);margin-top:10px;max-width:52ch}
.note{color:var(--muted);font-size:14.5px;margin-top:8px}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--surface);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:18px;padding-top:10px;padding-bottom:10px}
.brand{background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-head);font-weight:700;font-size:22px;color:var(--head);white-space:nowrap}
.rail{flex:1;display:flex;position:relative;min-width:0}
.rail::before{content:"";position:absolute;left:7%;right:7%;top:9px;height:3px;background:var(--line);border-radius:3px}
.knot{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;padding:0;cursor:pointer;color:var(--muted);font-size:13px;font-weight:500;min-width:0}
.knot .k{width:20px;height:20px;border-radius:50%;background:var(--surface);border:3px solid var(--kc,var(--line));display:grid;place-items:center}
.knot .k svg{display:block}
.knot.done .k{background:var(--kc,var(--sage));border-color:var(--kc,var(--sage))}
.knot.now{color:var(--head)}
.knot.now .k{background:var(--kc,var(--blue));border-color:var(--kc,var(--blue));transform:scale(1.2);box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--kc,var(--blue))}
.knot:disabled{cursor:default;opacity:.5}
.tools{display:flex;gap:8px;align-items:center}
.iconbtn{background:none;border:1.5px solid var(--line);border-radius:8px;width:36px;height:34px;display:grid;place-items:center;cursor:pointer;color:var(--head)}
@media (max-width:820px){.top .wrap{flex-wrap:wrap;gap:6px 10px}.rail{order:3;flex-basis:100%;padding-bottom:18px}.tools{margin-left:auto}.knot span.t{display:none}.knot.now span.t{display:block;position:absolute;top:22px;white-space:nowrap}}
main{padding:30px 0 90px}

/* buttons, inputs */
.btn{font-family:var(--font-body);font-weight:700;font-size:17px;padding:.72em 1.4em;border-radius:10px;border:0;background:var(--blue);color:#fff;box-shadow:0 4px 0 var(--blue-d);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .08s,box-shadow .08s}
.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--blue-d)}
.btn.alt{background:var(--surface);color:var(--head);box-shadow:inset 0 0 0 1.5px var(--line),0 4px 0 var(--line)}
.btn.sm{font-size:15px;padding:.5em 1em}
.btn:disabled{opacity:.4;cursor:not-allowed}
.linkbtn{background:none;border:0;padding:.3em 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;color:var(--head);font-size:15px}
.actions{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-top:28px;flex-wrap:wrap}
.actions .r{display:flex;gap:12px;flex-wrap:wrap;margin-left:auto}
.field{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;max-width:620px}
input[type=text],textarea{font:inherit;font-size:19px;padding:.7em .9em;border-radius:10px;border:2px solid var(--line);background:var(--surface);color:var(--ink);min-width:0;flex:1}
textarea{width:100%;min-height:96px;resize:vertical}
input[type=text]:focus,textarea:focus{border-color:var(--pc,var(--blue));outline:none}

/* part colors */
.p-merk{--pc:var(--blue);--pd:var(--blue-d);--pt:#fff}
.p-persoon{--pc:var(--sage);--pd:var(--sage-d);--pt:#0E2A5E}
.p-werkgever{--pc:var(--dark);--pd:var(--dark-d);--pt:#fff}
.p-niet{--pc:var(--light);--pd:var(--light-d);--pt:#0E2A5E}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--pc);color:var(--pt);border-radius:999px;padding:3px 12px;font-size:14.5px;font-weight:700}

/* planks */
.plank{position:relative;display:inline-flex;align-items:center;gap:8px;background:var(--pc);color:var(--pt);border:0;border-radius:6px;padding:.5em .95em;font-weight:700;font-size:17px;line-height:1.25;box-shadow:inset 0 -4px 0 rgba(0,0,0,.12),0 4px 0 var(--pd);text-align:left;max-width:100%}
.plank.neg{background:var(--surface);color:var(--muted);box-shadow:0 3px 0 var(--line);outline:2px dashed var(--line);outline-offset:-2px;text-decoration:line-through}
.plank .x{background:rgba(0,0,0,.15);color:inherit;border:0;border-radius:50%;width:22px;height:22px;display:grid;place-items:center;cursor:pointer;font-size:15px;line-height:1;text-decoration:none}
.plank.neg .x{background:var(--surface-2)}
button.plank{cursor:pointer;transition:transform .1s}
button.plank:hover{transform:translateY(-2px)}
.plank .rank{background:var(--surface);color:var(--head);border-radius:50%;width:26px;height:26px;display:grid;place-items:center;font-size:14px;box-shadow:0 0 0 2px var(--pd)}
.plank.off{opacity:.55}
.pile{display:flex;flex-wrap:wrap;gap:14px;margin-top:20px;min-height:10px}
.drop{animation:drop .6s cubic-bezier(.3,1.5,.5,1)}
@keyframes drop{0%{transform:translateY(-60px) rotate(-8deg);opacity:0}60%{opacity:1}100%{transform:none}}
.ctx{margin-top:18px}

/* stage */
.stage{display:grid;grid-template-columns:1fr 330px;gap:34px;align-items:start}
@media (max-width:860px){.stage{grid-template-columns:1fr}}
.qarea{min-width:0}

/* ladder */
.lbox{position:sticky;top:96px;max-height:calc(100vh - 140px);overflow-y:auto;background:var(--surface);border:1.5px solid var(--line);border-radius:20px;scroll-behavior:smooth}
@media (max-width:860px){.lbox{position:relative;top:0;max-height:340px}}
.lbox.big{max-height:calc(100vh - 140px)}
.done-mark{width:88px;height:88px;border-radius:50%;background:var(--pc);display:grid;place-items:center;margin:0 auto 14px;animation:drop .6s cubic-bezier(.3,1.5,.5,1)}
.new .plank{animation:drop .6s cubic-bezier(.3,1.5,.5,1)}
.lad{position:relative;padding:14px 0 0}
.lad::before,.lad::after{content:"";position:absolute;top:0;bottom:30px;width:10px;border-radius:5px;background:var(--wood);box-shadow:inset -2px 0 0 var(--wood-d);z-index:0}
.lad::before{left:34px}.lad::after{right:34px}
.zone{position:relative;z-index:1;margin:4px 16px 14px;font-size:12.5px;font-weight:700;color:var(--muted);text-align:center;background:var(--surface);border-radius:999px;padding:2px 10px;width:max-content;max-width:calc(100% - 32px);margin-left:auto;margin-right:auto}
.rung{position:relative;height:50px;display:flex;align-items:center;justify-content:center;z-index:1}
.rung .bar{position:absolute;left:34px;right:34px;top:50%;height:7px;margin-top:-3px;border-radius:4px;background:var(--wood);box-shadow:0 2px 0 var(--wood-d)}
.rung .plank{font-size:14px;padding:.35em .7em;max-width:calc(100% - 56px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;z-index:1}
.rung.lit .plank{box-shadow:inset 0 -4px 0 rgba(0,0,0,.12),0 4px 0 var(--pd),0 0 0 4px #F6C945}
.ground{height:30px;background:var(--surface-2);position:relative;z-index:1}
.fig{position:absolute;left:calc(100% - 30px);top:0;width:52px;height:58px;z-index:3;transform:translate(-50%,0);transition:top .45s cubic-bezier(.3,1.3,.5,1);pointer-events:none}
.fig svg{display:block;animation:bob 2.4s ease-in-out infinite}
.fig.jump svg{animation:jump .5s ease-out,bob 2.4s .5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-3px)}}
@keyframes jump{30%{transform:translateY(-18px) scaleY(1.05)}60%{transform:translateY(0) scaleY(.9)}100%{transform:none}}

/* start */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
@media (max-width:860px){.hero{grid-template-columns:1fr}}
.steps{display:flex;flex-direction:column;gap:10px;margin-top:22px;max-width:420px}
.steps .plank{font-size:18px}
.figs{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.figbtn{background:var(--surface);border:2.5px solid var(--line);border-radius:18px;padding:10px 10px 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:14px;font-weight:600;color:var(--head);transition:transform .12s}
.figbtn:hover{transform:translateY(-3px)}
.figbtn[aria-pressed="true"]{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 25%,transparent)}
.figbtn[aria-pressed="true"] svg{animation:jump .6s ease-out}
.bigfig svg{width:180px;height:200px;animation:bob 2.4s ease-in-out infinite}

/* klaar */
.cele{text-align:center;padding:10px 0}
.cele .bigfig svg{animation:jump .7s ease-out,bob 2.4s .7s ease-in-out infinite}

/* museum scene */
.scene{position:relative;overflow:hidden;max-width:760px;border-radius:22px;border:1.5px solid var(--line);margin-top:20px;background:#DCE8FF}
.scene svg.land{display:block;width:100%;height:auto}
.wall{position:absolute;inset:0;background-color:#B7A48A;background-image:linear-gradient(#9C8A70 2px,transparent 2px),linear-gradient(90deg,#9C8A70 2px,transparent 2px),linear-gradient(90deg,#9C8A70 2px,transparent 2px);background-size:100% 34px,68px 68px,68px 68px;background-position:0 0,0 0,34px 34px;transition:transform 1.3s cubic-bezier(.6,0,.3,1);display:grid;place-items:center}
.scene.open .wall{transform:translateY(101%)}
.wall .btn{box-shadow:0 4px 0 var(--dark-d);background:var(--dark)}
.sails{transform-box:fill-box;transform-origin:center;animation:turn 9s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
.peek{position:absolute;left:18px;bottom:-4px;width:70px}

/* summary */
.sheet{background:var(--surface);border:1.5px solid var(--line);border-radius:22px;padding:26px;margin-top:22px}
.sheet .sec{margin-top:22px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.arr{color:var(--muted);font-weight:700}
.sendbox{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:22px}
.step{background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.num{width:30px;height:30px;border-radius:8px;background:var(--dark);color:#fff;display:grid;place-items:center;font-weight:700}
.addr{font-weight:700;color:var(--head);user-select:all}

#overlay{position:fixed;inset:0;z-index:400;background:rgba(8,18,40,.5);display:flex;align-items:flex-end;justify-content:center}
#overlay[hidden]{display:none}
.dlg{background:var(--surface);width:min(520px,100%);border-radius:22px 22px 0 0;padding:24px 24px calc(22px + env(safe-area-inset-bottom,0px))}
@media (min-width:700px){#overlay{align-items:center}.dlg{border-radius:22px}}
.foot{border-top:1px solid var(--line);padding:18px 0 26px;font-size:13px;color:var(--muted)}
.foot .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.foot a{color:var(--muted);text-underline-offset:3px}
.foot a:hover{color:var(--head)}
.fine{font-size:12.5px;color:var(--muted);margin:0}
.fine a{color:var(--muted)}
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;background:var(--dark);color:#fff;padding:12px 18px;border-radius:10px;z-index:500;transition:.25s;max-width:calc(100% - 32px);font-size:15px}
#toast.on{opacity:1;transform:translateX(-50%)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{.top,.actions,.sendbox,#toast,.noprint,.foot{display:none!important}body{background:#fff}main{padding:0}.sheet{border:0;padding:0}}