/* IB motion scenes. Same look and same player as the Board Hub motion page. Orange is only the joining thread in the pictures. */
.mfig{--thread:#DC4F26;--surface:#FFFFFF;--border:#E2E6ED;--primary:#2563EB;--primary-d:#1D4ED8;--primary-pale:#EAF1FE;--focus-ring:rgba(37,99,235,.45);
--success:#0E7C3F;--success-pale:#E7F6ED;--success-deep:#0F3D25;--warning:#A25300;--warning-pale:#FCF0DE;--neutral-text:#57646F;--stone-brand:#6E7D89;--bh:#0E1B26;--rule:#C9D0D7;--f-display:'Archivo',sans-serif;--f-body:'IBM Plex Sans',sans-serif;--f-mono:'IBM Plex Mono',monospace}
:root{--thread:#DC4F26}
.mfig .mstage{border-radius:6px;box-shadow:0 4px 14px rgba(14,27,38,.10)}
.mfig .vdesc summary{color:var(--ink)}
.stepplayers{min-width:0}
.stepplayers figure[hidden]{display:none}
.draft-bar{background:#0E1B26;color:#fff;text-align:center;padding:10px 16px;font:500 .875rem/1.3 'IBM Plex Mono',monospace;letter-spacing:.04em}
.draft-bar p{margin:0}
.mstage{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border);width:100%}
.stage-in{position:absolute;left:0;top:0;transform-origin:0 0}
.mbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px}
.mctl{min-height:44px;padding:.35em 1.3em;border-radius:999px;border:1.5px solid var(--stone-brand);background:var(--surface);color:var(--ink);font:500 .9375rem/1 var(--f-body);cursor:pointer}
.mctl:hover{border-color:var(--ink)}
.mctl:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.mex{margin:0;font-family:var(--f-mono);font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--neutral-text)}
.vdesc{margin-top:6px;font-size:.9375rem;line-height:1.55;color:var(--neutral-text)}
.vdesc summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-family:var(--f-mono);font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--bh)}
.vdesc p{max-width:62ch;margin-top:.6em}
/* ---- inside the stage (sizes are in stage pixels, 800 wide) ---- */
.stage-in{font-family:var(--f-body);color:var(--ink);line-height:1.2}
.stage-in .tile{position:absolute;background:#fff;border:2px solid var(--ink);border-radius:16px;box-shadow:0 6px 16px rgba(14,27,38,.08);padding:16px 20px;display:flex;flex-direction:column;gap:8px;overflow:hidden;opacity:0}
.stage-in .tile.small{padding:12px 16px;gap:4px;border-radius:14px}
.stage-in .tile.accent{border-color:var(--primary);background:var(--primary-pale)}
.stage-in .kick{font:500 22px var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:#4F5C66}
.stage-in b{font:700 30px/1.15 var(--f-display);letter-spacing:-.01em}
.stage-in .small b{font-size:26px}
.stage-in .sub{font:400 24px/1.25 var(--f-body);color:#4F5C66}
.stage-in .mini{font:400 22px var(--f-body);color:#4F5C66}
.stage-in .chip{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font:500 20px var(--f-mono);border:1.5px solid #8E9BAA;border-radius:999px;padding:5px 14px;background:#fff;color:var(--ink);opacity:1}
.stage-in .chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.stage-in .chips .chip{opacity:0}
.stage-in .chip.ok{border-color:var(--success);color:var(--success-deep);background:var(--success-pale)}
.stage-in .chip.warn{border-color:var(--warning);color:#6B3700;background:var(--warning-pale);opacity:0}
.stage-in .tick{display:inline-block;width:20px;height:20px;border-radius:50%;background:var(--success);position:relative;flex:none}
.stage-in .tick:after{content:"";position:absolute;left:6px;top:3px;width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.thread{fill:none;stroke:var(--thread);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}

/* hero */
.stage-in .num{font:800 44px var(--f-display);color:var(--ink);width:56px;flex:none}
.stage-in .tile:has(.qtext){flex-direction:row;align-items:center;gap:14px}
.stage-in .qtext{display:flex;flex-direction:column;gap:6px}
.stage-in .qtext b{font-size:28px}
.stage-in .qtext em{font:500 22px var(--f-mono);font-style:normal;color:#4F5C66;opacity:0}
.stage-in .rail{position:absolute;background:var(--ink);border-radius:16px;display:flex;align-items:center;justify-content:center;opacity:0}
.stage-in .rail span{writing-mode:vertical-rl;transform:rotate(180deg);font:500 24px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#fff}

/* purpose */
.stage-in .typed{font:700 36px/1.2 var(--f-display);min-height:88px;display:block}

/* difference */
.stage-in .sign{margin-top:12px}
.stage-in .sign span{font:400 24px var(--f-body);color:#4F5C66;display:block}
.stage-in .srow{display:flex;align-items:center;gap:14px;margin-top:4px}
.stage-in .sign b{font:800 48px/1 var(--f-display);min-width:104px;text-align:right}
.stage-in .sign i{flex:1;height:14px;border-radius:7px;background:#E2E6ED;overflow:hidden;display:block}
.stage-in .sign u{display:block;height:100%;width:0;background:var(--ink);text-decoration:none;border-radius:6px}
.stage-in .quote b{font-size:32px;line-height:1.2}
.stage-in .doc u{display:block;height:14px;border-radius:7px;background:#C9D0D7;width:0;text-decoration:none;margin-top:10px}
.stage-in .doc .chip{opacity:0;margin-top:auto}

/* money */
.kick2{position:absolute;font:500 22px var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:#4F5C66}
.stage-in .node{position:absolute;width:40px;height:40px;border-radius:50%;background:#fff;border:2.5px solid #8E9BAA;font:700 22px/35px var(--f-display);text-align:center;color:#4F5C66}
.stage-in .node.done{background:var(--ink);border-color:var(--ink);color:#fff}
.stage-in .node.now{background:var(--primary);border-color:var(--primary);color:#fff;transform:scale(1.18)}
.stage-in .steplab{position:absolute;font:800 40px var(--f-display);letter-spacing:-.01em}
.stage-in .bars{display:flex;align-items:flex-end;gap:7px;height:150px;margin-top:6px}
.stage-in .bg{display:flex;align-items:flex-end;gap:2px;flex:1}
.stage-in .bg u{display:block;flex:1;background:var(--ink);height:0;text-decoration:none;border-radius:3px 3px 0 0}
.stage-in .bg u.out{background:#8E9BAA}
.stage-in .desk .dr{display:flex;justify-content:space-between;align-items:baseline;border-top:1.5px solid #E2E6ED;padding-top:12px;margin-top:8px}
.stage-in .desk .dr span{font:400 26px var(--f-body);color:#4F5C66}
.stage-in .desk .dr b{font:800 34px var(--f-display)}

/* people */
.stage-in .big{font:800 60px/1 var(--f-display);margin-top:4px}
.stage-in .dots{display:flex;gap:10px;margin-top:auto}
.stage-in .dots u{width:26px;height:26px;border-radius:50%;background:var(--ink);opacity:0}
.stage-in .li{display:flex;align-items:center;gap:12px;font:500 26px var(--f-body);margin-top:6px}
.stage-in .li .tick{opacity:1}
.stage-in .box{width:26px;height:26px;border-radius:7px;border:2.5px solid #8E9BAA;flex:none;position:relative;background:#fff}
.stage-in .ck.on .box{background:var(--success);border-color:var(--success)}
.stage-in .ck.on .box:after{content:"";position:absolute;left:7px;top:2px;width:7px;height:13px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
.stage-in .meter{display:block;height:14px;border-radius:7px;background:#E2E6ED;overflow:hidden;margin-top:auto}
.stage-in .meter u{display:block;height:100%;width:0;background:var(--ink);text-decoration:none}

/* meeting */
.stage-in .qrow{display:flex;align-items:center;gap:16px}
.stage-in .dots2{display:flex;gap:10px}
.stage-in .dots2 u{width:26px;height:26px;border-radius:50%;border:2.5px solid #8E9BAA;background:#fff}
.stage-in .dots2 u.on{background:var(--ink);border-color:var(--ink)}
.stage-in .state{opacity:0;font-size:24px}
.stage-in .ag .li{margin-top:24px}
.stage-in .votes{display:flex;gap:10px}
.stage-in .votes .chip{opacity:0}
.stage-in .stamp b{color:var(--bh);font-size:34px}
.stage-in .stamp{border-color:var(--bh);transform-origin:center}
.stage-in .lock{display:flex;align-items:center;gap:10px;font-size:28px}

/* agent */
.stage-in .chat{padding:0;display:block;opacity:1;box-shadow:none;background:#FBFCFC}
.stage-in .chat > *{position:absolute;opacity:0}
.stage-in .bub{border-radius:20px;padding:14px 20px;font:400 26px/1.3 var(--f-body)}
.stage-in .bub.me{background:var(--ink);color:#fff;max-width:470px}
.stage-in .bub.ai{background:#fff;border:2px solid var(--ink)}
.stage-in .bub .src{display:inline-flex;margin-top:10px;opacity:1}
.stage-in .prop{background:#fff;border:2px solid var(--primary);border-radius:16px;padding:16px 20px;display:flex;flex-direction:column;gap:6px}
.stage-in .prop b{font-size:28px}
.stage-in .btns{display:flex;gap:12px;margin-top:8px}
.stage-in .btn2{font:500 24px var(--f-body);padding:9px 24px;border-radius:999px;border:2px solid #8E9BAA;background:#fff}
.stage-in .btn2.yes{background:var(--primary);border-color:var(--primary);color:#fff}
.stage-in .btn2.pressed{background:var(--primary-d);box-shadow:0 0 0 5px var(--focus-ring);transform:scale(.96)}
.stage-in .proj{align-items:flex-start}
.stage-in .chat .chip u{text-decoration:underline;color:var(--primary)}
.stage-in .note{font:500 20px/1.35 var(--f-mono);color:#4F5C66}

/* handover */
.stage-in .recbox{border-color:var(--ink)}
.stage-in .g4{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
.stage-in .mini1{border:2px solid var(--ink);border-radius:12px;padding:22px 6px;font:600 22px/1.2 var(--f-display);text-align:center;opacity:0;background:#fff}
.stage-in .mini1.read{background:var(--success-pale);border-color:var(--success)}
.stage-in .person{position:absolute;display:flex;flex-direction:column;align-items:center;gap:10px;width:120px;opacity:1}
.stage-in .person i{display:block;width:76px;height:76px;border-radius:50%;background:#C9D0D7;border:2px solid var(--ink)}
.stage-in .person.next{opacity:0}
.stage-in .person.next i{background:var(--primary-pale);border-color:var(--primary)}
.stage-in .person span{font:500 22px/1.2 var(--f-mono);text-align:center;color:#4F5C66}
.stage-in .big2{position:absolute;font:800 44px/1.1 var(--f-display);text-align:center;opacity:0}

/* new scenes */
.stage-in .chipt{width:210px;height:62px;padding:0 14px;justify-content:center;border-radius:12px;transform-origin:center}
.stage-in .chipt b{font-size:24px}
.stage-in .hub .hr{margin-top:20px;font-size:30px}
.stage-in .hub .hr .tick{opacity:1;width:26px;height:26px}
.stage-in .capl{position:absolute;font:500 24px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:#4F5C66;opacity:0}
.stage-in .regt{flex-direction:row;align-items:center;justify-content:space-between}
.stage-in .regt .bigc{font:800 56px/1 var(--f-display);display:block}
.stage-in .regt .chips{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;max-width:360px;margin:0;gap:8px}
.stage-in .lane .mini{font-size:19px;line-height:1.2}
.stage-in .lane.done{border-color:var(--ink);background:#F4F6F7}
.stage-in .lane.now{border-color:var(--primary);background:var(--primary-pale)}
.stage-in .token{position:absolute;left:0;top:0;opacity:0;font:600 22px var(--f-body);background:var(--primary);color:#fff;border-radius:999px;padding:6px 18px;box-shadow:0 4px 12px rgba(37,99,235,.35);z-index:4}
.stage-in .stg{display:flex;align-items:center;gap:12px}
.stage-in .stg .arr{font:500 28px var(--f-mono)}
.stage-in .stg .chip{opacity:1}
.stage-in .stg .ok2{border-color:var(--success);background:var(--success-pale);color:var(--success-deep);opacity:0}
.stage-in .desk2 .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:10px}
.stage-in .desk2 .cols span{font:400 24px var(--f-body);color:#4F5C66;display:block}
.stage-in .desk2 .cols b{font:800 44px/1.1 var(--f-display);display:block;margin-top:8px}
.stage-in .tile .dr{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px}
.stage-in .tile .dr span{font:400 24px var(--f-body);color:#4F5C66}
.stage-in .tile .dr b{font:800 30px var(--f-display)}
.stage-in .cd{display:flex;gap:16px;align-items:center;border-top:1.5px solid #E2E6ED;padding-top:10px;margin-top:0;opacity:0}
.stage-in .cd .dt{font:500 22px var(--f-mono);width:88px;flex:none;color:var(--bh)}
.stage-in .cd .wh{display:flex;flex-direction:column;gap:4px}
.stage-in .cd .wh b{font:700 25px/1.15 var(--f-display)}
.stage-in .cd .wh i{font:500 20px var(--f-mono);font-style:normal;color:#4F5C66;letter-spacing:.04em;text-transform:uppercase}
.stage-in .nd{opacity:0;font-size:24px}
.stage-in .dotw{width:16px;height:16px;border-radius:50%;background:var(--warning);display:inline-block;flex:none}

.stage-in .lane{padding:12px 12px}
.stage-in .lane b{font-size:24px}
.stage-in .cf .sub,.stage-in .cf{font-size:22px}

/* IB scenes */
.stage-in > .chip,.stage-in > .sendp{position:absolute;white-space:nowrap}
.stage-in .mt{margin-top:10px;font-size:22px;line-height:1.35}
.stage-in .phd{position:absolute;background:#0E1B26;color:#fff;padding:12px 20px;opacity:1!important;display:flex;flex-direction:column;gap:4px}
.stage-in .phd span{font:800 30px var(--f-display)}
.stage-in .phd i{white-space:nowrap;font:500 16px var(--f-mono);font-style:normal;color:#C9D0D7}
.stage-in .inp{position:absolute;border:2px solid var(--primary);border-radius:14px;padding:16px 18px;font:400 22px/1.3 var(--f-body);color:#6B7782;background:#fff;height:50px;box-shadow:0 0 0 4px var(--focus-ring)}
.stage-in .chat .bub{font-size:24px;line-height:1.3}
.stage-in .bub.me{max-width:none}
.stage-in .chip.warn2{border-color:var(--warning);background:var(--warning-pale);color:#6B3700;opacity:1}
.stage-in .bub .chip.warn2{margin-left:8px}
.stage-in .chip.ok2{border-color:var(--primary);background:#fff;font:500 22px var(--f-body);padding:8px 18px}
.stage-in .chip.ok2 u{color:var(--primary);text-decoration:underline}
.stage-in .typed2{font:700 30px/1.25 var(--f-display);letter-spacing:-.01em;display:block;min-height:76px}
.stage-in .mrows{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.stage-in .ml{align-items:flex-start;font-size:23px;line-height:1.25;opacity:0;margin-top:12px}
.stage-in .ml .tick{margin-top:2px}
.stage-in .bigcap{position:absolute;font:800 34px/1.15 var(--f-display);letter-spacing:-.015em;text-align:center}
.stage-in .subcap{position:absolute;font:400 24px var(--f-body);color:#4F5C66;text-align:center}
.stage-in .bigcap2{position:absolute;font:700 28px var(--f-display);text-align:center}
.stage-in .ctile{padding:8px}
.stage-in .ctile b{font-size:24px;white-space:nowrap}
.stage-in .page{padding:0 20px 16px;gap:0}
.stage-in .page .phead{margin:0 -20px 16px;padding:14px 20px;background:#7A4A1F;color:#fff;font:700 28px var(--f-display)}
.stage-in .page > b{font-size:30px;margin-bottom:8px}
.stage-in .prow{display:flex;justify-content:space-between;align-items:baseline;border-top:1.5px solid #E2E6ED;border-bottom:1.5px solid transparent;padding:11px 8px;font:400 23px var(--f-body);border-radius:6px}
.stage-in .prow b{font:700 24px var(--f-display)}
.stage-in .psel{display:block;margin-top:16px;font-size:23px;line-height:1.35;color:#0E1B26}
.stage-in .psel + .mini{margin-top:12px;font-size:20px}
.stage-in .sendp{background:var(--primary);color:#fff;border-color:var(--primary);font:500 22px var(--f-body);opacity:0}
.stage-in .draft{gap:12px}
.stage-in .draft .body{font:400 25px/1.35 var(--f-body);color:#0E1B26}
.stage-in .btns2{position:absolute;display:flex;gap:12px;opacity:0}
.stage-in .btns2 .btn2{font:500 26px var(--f-body);padding:10px 34px}
.stage-in .chat .bub.ai b{font:700 24px var(--f-display)}

.stage-in .mtag{font:500 14px var(--f-mono);letter-spacing:0;color:#57646F;white-space:nowrap}