/* ---------------------------------------------------------------------------
   Workspace peek: a short, looping replay of the workspace a buyer gets.
   Sits next to the price, so "what do I actually get?" is answered at the
   moment someone almost buys. Same paper and ink as the page; it mirrors the
   real screen (/os on .com, /werkruimte on .nl) with the sample founder's data.
   --------------------------------------------------------------------------- */
.wsp-head{margin-top:72px}
.wsp-head h3{font-size:clamp(24px,5.6vw,32px);letter-spacing:-.035em;line-height:1.15;margin-top:12px}
.wsp-head p{font-size:17px;color:var(--ink-2);margin-top:10px;max-width:34em}
.wsp-wrap{margin-top:28px}
.wsp .frame-bar .live{display:inline-flex;align-items:center;gap:7px}
.wsp-body{position:relative;transition:opacity .45s var(--ease)}
.wsp-body.fade{opacity:.25}
.wsp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- .com: the /os screen ---- */
.wsp-os{display:grid;grid-template-columns:1fr}
.wsp-side{display:none;border-right:1px solid var(--rule-2);background:#FBF9F3;padding:18px 16px}
.wsp-side .nm{font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.wsp-side .nm span{color:var(--ink-3);font-weight:500}
.wsp-side ul{list-style:none;margin:14px 0 0;padding:0}
.wsp-side li{font-size:13px;color:var(--ink-2);padding:6px 10px;border-left:2px solid transparent;line-height:1.3}
.wsp-side li.on{background:#EFEBE1;border-left-color:var(--ink);color:var(--ink);font-weight:600}
.wsp-side li.more{color:var(--ink-3);font-size:12.5px}
.wsp-prog .k{display:block;font-size:11px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.wsp-prog .rail{height:3px;background:var(--rule-2);margin-top:9px;border-radius:2px;overflow:hidden}
.wsp-prog .rail i{display:block;height:100%;width:0;background:var(--ink);transition:width .6s var(--ease)}
.wsp-prog .t{font-size:12.5px;color:var(--ink-2);margin-top:7px;font-variant-numeric:tabular-nums}
.wsp-side .wsp-prog{margin-top:20px;padding-top:14px;border-top:1px solid var(--rule-2)}
.wsp-main{padding:20px 18px 22px;min-width:0}
.wsp-main .eb{font-size:11px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.wsp-main h4{font-size:clamp(19px,4.6vw,24px);font-weight:750;letter-spacing:-.035em;line-height:1.15;margin:6px 0 0;max-width:32ch}
.wsp-main > .wsp-prog{margin-top:14px;max-width:260px}
.wsp-scores{display:grid;grid-template-columns:repeat(3,1fr);margin-top:16px;border:1px solid var(--rule-2);border-radius:6px;overflow:hidden}
.wsp-scores div{padding:10px 12px;background:var(--sheet)}
.wsp-scores div + div{border-left:1px solid var(--rule-2)}
.wsp-scores span{display:block;font-size:10.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);line-height:1.25}
.wsp-scores b{display:block;font-size:22px;font-weight:650;letter-spacing:-.03em;margin-top:2px;font-variant-numeric:tabular-nums}
.wsp-scores em{display:block;height:3px;background:var(--rule-2);margin-top:6px;border-radius:2px;overflow:hidden}
.wsp-scores em i{display:block;height:100%;background:var(--ink)}
.wsp-main h5{font-size:16px;font-weight:700;letter-spacing:-.02em;margin:20px 0 4px}
.wsp-list{list-style:none;margin:0;padding:0}
.wsp-list li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;padding:10px 0;border-bottom:1px solid var(--rule-2)}
.wsp-list .cb{width:18px;height:18px;border:1.5px solid var(--ink-3);border-radius:4px;margin-top:2px;display:grid;place-items:center;
  transition:background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
.wsp-list .cb svg{width:12px;height:12px;opacity:0;transform:scale(.5);transition:opacity .2s var(--ease),transform .25s var(--ease)}
.wsp-list .lb{display:block;font-size:14.5px;line-height:1.35;color:var(--ink);transition:color .3s var(--ease)}
.wsp-list .wk{display:block;font-size:10.5px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.wsp-list li.press .cb{box-shadow:0 0 0 4px rgba(23,22,15,.12);border-color:var(--ink)}
.wsp-list li.done .cb{background:var(--ink);border-color:var(--ink)}
.wsp-list li.done .cb svg{opacity:1;transform:none}
.wsp-list li.done .lb{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1px}
@media (min-width:760px){
  .wsp-os{grid-template-columns:220px 1fr}
  .wsp-side{display:block}
  .wsp-main{padding:24px 28px 26px}
  .wsp-main > .wsp-prog{display:none}
}

/* ---- .nl: the /werkruimte screen ---- */
.wsp-wr{padding:16px 14px 18px}
.wsp-wr .ttl{font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.wsp-kpi{display:grid;grid-template-columns:repeat(3,1fr);margin-top:12px;border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.wsp-kpi div{padding:10px 10px 11px;background:var(--sheet);min-width:0}
.wsp-kpi div + div{border-left:1px solid var(--rule)}
.wsp-kpi .n{display:block;font-family:var(--serif);font-size:24px;font-weight:600;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.wsp-kpi .n small{font-family:var(--sans);font-size:12px;font-weight:500;color:var(--ink-2);letter-spacing:0}
.wsp-kpi .l{display:block;font-size:12px;line-height:1.3;color:var(--ink-2);margin-top:5px}
.wsp-kpi .s{display:block;font-size:11px;color:var(--ink-3);margin-top:3px;font-variant-numeric:tabular-nums}
.wsp-kpi .n.bump{animation:wspBump .5s var(--ease)}
@keyframes wspBump{0%{transform:none}35%{transform:translateY(-2px)}100%{transform:none}}
.wsp-wr h5{font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:-.01em;margin:16px 0 2px}
.wsp-wr .hint{font-size:12.5px;color:var(--ink-3);line-height:1.4}
.wsp-tbl{margin-top:10px;border:1px solid var(--rule);border-radius:4px;overflow:hidden;background:var(--sheet)}
.wsp-tr{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;padding:10px 12px;border-top:1px solid var(--rule-2);transition:background .35s var(--ease)}
.wsp-tr:first-child{border-top:0}
.wsp-tr.th{display:none}
.wsp-tr .task{font-size:13.5px;font-weight:600;line-height:1.3;letter-spacing:-.005em}
.wsp-tr .meta{grid-column:1;font-size:11.5px;color:var(--ink-3);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wsp-tr .own,.wsp-tr .hrs,.wsp-tr .dec{display:none}
.wsp-tr .st{grid-column:2;grid-row:1 / span 2;justify-self:end}
.wsp-tr.hot{background:#F3EFE4}
.wsp-st{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2);white-space:nowrap}
.wsp-st i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink-3);flex:none;transition:background .3s var(--ease),border-color .3s var(--ease)}
.wsp-st.s1 i{border-color:var(--ink);background:linear-gradient(90deg,var(--ink) 30%,transparent 30%)}
.wsp-st.s2 i{border-color:var(--ink);background:linear-gradient(90deg,var(--ink) 60%,transparent 60%)}
.wsp-st.s3 i,.wsp-st.s4 i{border-color:var(--ink);background:var(--ink)}
.wsp-st.s3,.wsp-st.s4{color:var(--ink);font-weight:600}
.wsp-st b{font-weight:inherit;display:inline-block;transition:opacity .2s var(--ease),transform .25s var(--ease)}
.wsp-st b.swap{opacity:0;transform:translateY(3px)}
@media (min-width:760px){
  .wsp-wr{padding:22px 24px 24px}
  .wsp-wr .ttl{font-size:26px}
  .wsp-kpi div{padding:12px 16px 13px}
  .wsp-kpi .n{font-size:30px}
  .wsp-kpi .n small{font-size:13.5px}
  .wsp-kpi .l{font-size:13px}
  .wsp-tr{grid-template-columns:minmax(0,2.2fr) 1.1fr 1.5fr .6fr 1.5fr;gap:12px}
  .wsp-tr.th{display:grid;padding:8px 12px;font-size:10.5px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
  .wsp-tr .meta{display:none}
  .wsp-tr .own,.wsp-tr .hrs,.wsp-tr .dec{display:block;font-size:13px;color:var(--ink-2)}
  .wsp-tr .hrs{font-variant-numeric:tabular-nums}
  .wsp-tr .st{grid-column:auto;grid-row:auto;justify-self:start}
}

/* small phones: keep the replay short and inside the frame */
@media (max-width:479px){
  .wsp-scores{display:none}
  .wsp-list li:nth-child(n+5){display:none}
  .wsp-kpi div{padding:9px 8px 10px}
  .wsp-kpi .n{font-size:20px}
  .wsp-kpi .n small{font-size:11px}
  .wsp-kpi .l{font-size:11.5px}
  .wsp-kpi .s{display:none}
}

@media (prefers-reduced-motion:reduce){
  .wsp-body,.wsp-prog .rail i,.wsp-list .cb,.wsp-list .cb svg,.wsp-list .lb,.wsp-tr,.wsp-st i,.wsp-st b{transition:none}
  .wsp-kpi .n.bump{animation:none}
}