/* ==========================================================================
   Case-study bento: "From request to repair" (case-study-3 only).
   Ported from bento-reference.html. Everything is scoped: classes, keyframes
   and the --mb-n / --mb-bar custom properties carry an mb- prefix, and the
   tokens live on .mb, so nothing leaks into or out of the site's CSS.
   Product UI stays light in dark mode on purpose (RMX dark values unverified).
   The bento never takes focus: it's an illustration.
   ========================================================================== */
.mb,.mb *,.mb *::before,.mb *::after{box-sizing:border-box}
.mb{display:block;color-scheme:light;color:var(--text-secondary);font:400 14px/1.4 var(--rmx);letter-spacing:normal;text-transform:none;text-align:left;text-indent:0;font-style:normal}
 @property --mb-n{syntax:'<integer>';inherits:false;initial-value:0}
.mb{color-scheme:light; --text-primary:#666666; --text-secondary:#13314c; --text-link:#008dd5; --text-disabled:#b3b3b3; --border-primary:#cedbe7; --border-secondary:#008dd5; --border-disabled:#ebf1f5; --background-ui-primary:#f3f4f8; --container-tertiary:#f5f8fa; --row-selected:#e8f6fa; --brand:#008dd5; --error:#eb343c; --notice:#faa61c; --success:#6eb744; --attention:#f58220; --lz-error:#fbd6d8; --lz-brand:#cce8f7; --lz-caution:#feedd2; --lz-success:#e2f1da; --lane:#d6e4ee; --lane-line:#b6d1e4; --twa-blue:#3f8bd2; --twa-sel:#d4e6f6; --twa-sel-line:#4b8fd1; --twa-line:#c9c9c9; --twa-ink:#1d1d1f; --cell-line:#dde3ea; --rmx:"Roboto",system-ui,sans-serif; --twa:"Lato","Helvetica Neue",system-ui,sans-serif; --radius-sm:4px;}
.mb-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;row-gap:40px}
.mb-cell{background:#fff;border:1px solid var(--cell-line);border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.10),0 4px 10px -2px rgba(0,0,0,.12),0 10px 18px -4px rgba(0,0,0,.12);display:grid;align-content:start;min-width:0;container-type:inline-size;position:relative;overflow:hidden}
.mb-c-twa{padding:22px 20px}.mb-c-board{padding:16px 18px 18px}
.mb-c-tile{display:flex;flex-direction:column}
/* Each card sits in a step: header row + card row. Subgrid lets side-by-side steps share both rows,
   so the cards stay aligned (and the tile stretches to the twa card) however many lines a title wraps to. */
.mb-step{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:12px;min-width:0}
.mb-step--twa{grid-column:1/8;margin-right:4px}.mb-step--tile{grid-column:8/13;margin-left:-4px}.mb-step--board,.mb-step--map{grid-column:1/13}
@media (max-width:1000px){.mb-step--twa,.mb-step--tile{grid-column:1/-1;margin-inline:0}}
@media (max-width:640px){.mb-bento{row-gap:32px}.mb-cell{border-radius:8px}.mb-c-twa,.mb-c-board{padding:14px}}
.mb-cell:not(.mb-play) *,.mb-cell:not(.mb-play) *::before,.mb-cell:not(.mb-play) *::after{animation-play-state:paused!important}
@keyframes mb-fi{from{opacity:0;translate:0 4px}to{opacity:1;translate:0 0}}
@keyframes mb-fo{to{opacity:0;visibility:hidden}}
@keyframes mb-draw{to{stroke-dashoffset:0}}
.mb-stack{display:grid}.mb-stack > *{grid-area:1/1}
.mb-in{opacity:0;animation:mb-fi .3s var(--t) forwards}
.mb-out{animation:mb-fo .2s var(--t) forwards}
.mb-count{counter-reset:mb-n var(--mb-n)}.mb-count::after{content:counter(mb-n)}
.mb-cur{position:absolute;width:18px;height:22px;opacity:0;pointer-events:none;z-index:6;animation:mb-tap .7s var(--t) cubic-bezier(.4,0,.2,1) forwards}
.mb-cur path{fill:#13314c;stroke:#fff;stroke-width:1.5}
@keyframes mb-tap{0%{opacity:0;translate:36px 30px}25%{opacity:1}65%{translate:0 0;scale:1}75%{scale:.82}85%{scale:1;opacity:1}100%{opacity:0;translate:0 0}}
.mb-twa{font-family:var(--twa);color:var(--twa-ink);display:grid;grid-template-columns:minmax(0,1fr) 228px;gap:18px}
.mb-twa-pick{display:grid;gap:12px;min-width:0}
.mb-twa h4{font:400 14px var(--twa);text-align:center;margin:0}
.mb-days{display:grid;grid-template-columns:30px repeat(3,minmax(0,1fr)) 30px;gap:10px;align-items:start}
.mb-navb{width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);display:grid;place-items:center;margin-top:32px}
.mb-navb svg{width:12px;height:12px;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mb-navb.mb-l svg{stroke:#9aa0a6}.mb-navb.mb-r svg{stroke:var(--twa-blue)}
.mb-dcol{display:grid;gap:9px;min-width:0}
.mb-day{border:1px solid #8f8f8f;border-radius:6px;box-shadow:0 2px 4px rgba(0,0,0,.22);aspect-ratio:1.05;max-height:96px;display:grid;place-content:center;text-align:center;line-height:1;margin-bottom:6px}
.mb-day small{font:700 9px var(--twa);display:block;margin-bottom:4px}
.mb-day b{font:900 13px var(--twa);display:block}
.mb-day strong{font:900 clamp(30px,6cqw,44px)/1 var(--twa);display:block;margin-top:2px}
.mb-slot{position:relative;height:34px;border:1px solid var(--twa-line);border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.16);display:grid;place-items:center;font:400 12.5px var(--twa);white-space:nowrap;background:#fff}
.mb-slot.mb-pick{animation:mb-pickS .2s var(--t) forwards}
@keyframes mb-pickS{to{background:var(--twa-sel);border-color:var(--twa-sel-line);font-weight:700}}
.mb-slot .mb-tag{position:absolute;top:-8px;left:50%;translate:-50% 3px;white-space:nowrap;font:400 9px/1.4 var(--twa);background:#fff;border:1px solid #9aa0a6;border-radius:8px;padding:0 7px;opacity:0;animation:mb-tagIn .2s var(--t) forwards}
@keyframes mb-tagIn{to{opacity:1;translate:-50% 0}}
.mb-slot .mb-cur{right:16%;bottom:-8px}
.mb-twa-side{border-left:1px solid #dcdcdc;padding-left:16px;display:grid;gap:8px;align-content:start;min-width:0}
.mb-twa-side h5{font:900 15px var(--twa);text-align:center;margin:0}
.mb-twa-side .mb-help{font:400 11px/1.35 var(--twa);text-align:center;min-height:30px}
.mb-box{border:1px solid #c9c9c9;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.12);padding:10px 12px 12px;display:grid;gap:8px}
.mb-box hr{border:0;border-top:1px solid #d9d9d9;margin:2px 0}
.mb-lab{font:400 12px var(--twa)}
.mb-pick-row{display:grid;grid-template-columns:minmax(0,1fr) 22px;gap:8px;align-items:center}
.mb-chip{position:relative;height:42px;border-radius:4px;display:grid;place-content:center;text-align:center;font:400 11.5px/1.25 var(--twa)}
.mb-chip.mb-empty{border:1px dashed #c9c9c9;color:#9aa0a6;font-style:italic}
.mb-chip.mb-full{background:var(--twa-sel);border:1px solid var(--twa-sel-line);opacity:0;scale:.92;animation:mb-chipIn .3s var(--t) cubic-bezier(.2,.8,.2,1.2) forwards}
.mb-chip.mb-full b{font-weight:900}
@keyframes mb-chipIn{to{opacity:1;scale:1}}
.mb-chip .mb-x{position:absolute;top:-7px;right:-7px;width:15px;height:15px;border-radius:50%;background:#fff;border:1.5px solid var(--error);display:grid;place-items:center}
.mb-chip .mb-x::before,.mb-chip .mb-x::after{content:"";position:absolute;width:7px;height:1.5px;background:var(--error);rotate:45deg}.mb-chip .mb-x::after{rotate:-45deg}
.mb-reord{width:20px;height:18px;fill:var(--brand);opacity:.3;justify-self:center}
.mb-reord.mb-on{animation:mb-on .2s var(--t) forwards}
@keyframes mb-on{to{opacity:1}}
.mb-submit{position:relative;height:36px;border-radius:2px;background:var(--twa-blue);color:#fff;display:grid;place-items:center;font:700 13px var(--twa);margin-top:8px;opacity:.45; animation:mb-on .2s var(--t) forwards,mb-press .25s var(--t2) ease-out,mb-ok .3s var(--t3) forwards}
@keyframes mb-press{50%{scale:.96}}
@keyframes mb-ok{to{background:var(--success)}}
.mb-submit .mb-cur{right:22%;bottom:-10px}
.mb-submit{display:flex;justify-content:center;align-items:center}
.mb-submit .mb-chk{width:0;height:14px;margin-left:0;opacity:0;overflow:visible;flex:none;animation:mb-chk .35s var(--t3) cubic-bezier(.2,.8,.2,1) forwards}
.mb-submit .mb-chk path{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:mb-draw .3s calc(var(--t3) + .15s) ease-out forwards}
@keyframes mb-chk{to{width:14px;margin-left:8px;opacity:1}}
@container (max-width:640px){.mb-twa{grid-template-columns:1fr}
.mb-twa-side{border-left:0;border-top:1px solid #dcdcdc;padding:14px 0 0}
.mb-box{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mb-box hr{display:none}
.mb-box .mb-submit{grid-column:1/-1}
.mb-reord{display:none}.mb-pick-row{grid-template-columns:1fr}
}
@container (max-width:440px){.mb-days{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mb-navb{display:none}
.mb-slot{font-size:11px}
.mb-box{grid-template-columns:1fr}
}
.mb-ms{display:grid;gap:10px;position:relative}
.mb-ms-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mb-lnk{color:var(--text-link)}
.mb-ms-left{display:flex;align-items:center;gap:6px;font-size:13px}
.mb-ms-left svg{width:16px;height:16px;fill:var(--brand)}
.mb-ms-date{display:flex;align-items:center;gap:10px;font:500 17px var(--rmx)}
.mb-rb{width:26px;height:26px;border-radius:50%;border:1px solid var(--border-primary);display:grid;place-items:center}
.mb-rb svg{width:10px;height:10px;fill:none;stroke:var(--text-secondary);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mb-btn{height:32px;padding:0 14px;border-radius:var(--radius-sm);background:var(--brand);color:#fff;display:inline-grid;place-items:center;font:500 13px var(--rmx);white-space:nowrap}
.mb-cols{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:8px;--cols:4}
.mb-colh{display:flex;align-items:center;justify-content:center;gap:8px;height:40px;font-size:14px;white-space:nowrap;min-width:0;overflow:hidden}
.mb-colh + .mb-colh{border-left:1px solid var(--border-primary)}
.mb-ava{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--text-secondary);display:grid;place-items:center;font:500 10px var(--rmx);flex:none}
.mb-blk{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border:1px solid var(--lane-line);border-radius:var(--radius-sm);background:var(--container-tertiary);font-size:13px}
.mb-blk.mb-closed{border-color:var(--border-primary)}
.mb-blk .mb-chev{width:12px;height:12px;fill:none;stroke:var(--brand);stroke-width:2.4;stroke-linecap:round}
.mb-blk .mb-sp{flex:1}
.mb-blk .mb-tm{white-space:nowrap}
.mb-twa-pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--radius-sm);background:var(--lz-success);font-size:12px;white-space:nowrap}
.mb-twa-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--success)}
.mb-gear{width:18px;height:18px;fill:var(--brand)}
.mb-lanes{container-type:inline-size;position:relative}
.mb-lane{background:var(--lane);border:1px solid var(--lane-line);border-radius:2px;min-height:178px;padding:6px;display:grid;gap:6px;align-content:start;position:relative;min-width:0}
.mb-bcard{position:relative;background:#fff;border-radius:var(--radius-sm);padding:8px 10px 8px 14px;display:grid;gap:3px;font-size:11.5px; box-shadow:0 1px 2px rgba(19,49,76,.12),0 2px 6px rgba(19,49,76,.10),0 0 0 1px rgba(19,49,76,.04);min-width:0}
.mb-bcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;border-radius:4px 0 0 4px;background:var(--mb-bar,var(--text-disabled))}
.mb-bcard .mb-nm{display:flex;align-items:center;gap:6px;font:600 13px var(--rmx);color:var(--text-link);min-width:0}
.mb-bcard .mb-nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-bcard .mb-nm svg{width:12px;height:12px;fill:var(--brand);flex:none}
.mb-bcard .mb-kb{position:absolute;right:6px;top:8px;width:4px;height:14px;background:radial-gradient(circle,var(--brand) 1.6px,transparent 1.8px) 0 0/4px 5px}
.mb-bcard .mb-pl{display:flex;align-items:center;gap:6px;color:var(--text-primary)}
.mb-bcard .mb-pl svg{width:12px;height:12px;fill:var(--text-primary)}
.mb-bcard .mb-iss{color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-bcard .mb-pref{color:var(--text-primary)}
.mb-bcard .mb-pref b{color:var(--text-secondary);font-weight:600}
.mb-dragc{z-index:5;animation:mb-drag 2.1s .3s cubic-bezier(.65,0,.35,1) forwards,mb-barc .2s 2.25s forwards}
@keyframes mb-drag{0%{translate:0 0;scale:1;rotate:0deg}
14%{translate:0 0;scale:1.04;rotate:-1.5deg;box-shadow:0 18px 30px -12px rgba(19,49,76,.45)}
80%{translate:calc(100cqw / var(--cols) + 8px / var(--cols)) 0;scale:1.04;rotate:-1.5deg;box-shadow:0 18px 30px -12px rgba(19,49,76,.45)}
92%,100%{translate:calc(100cqw / var(--cols) + 8px / var(--cols)) 0;scale:1;rotate:0deg}}
@keyframes mb-barc{to{--mb-bar:var(--brand)}}
@property --mb-bar{syntax:'<color>';inherits:true;initial-value:#b3b3b3}
.mb-dragc .mb-cur{right:24px;bottom:-12px;animation:mb-hold 2.4s .2s forwards}
@keyframes mb-hold{0%{opacity:0;translate:30px 26px}10%{opacity:1;translate:0 0}14%,86%{scale:.85}92%{scale:1;opacity:1}100%{opacity:0}}
.mb-drop{position:absolute;inset:6px 6px auto;height:84px;border:2px dashed var(--brand);border-radius:var(--radius-sm);background:rgba(255,255,255,.55);opacity:0;animation:mb-dropz 2.1s .3s forwards}
@keyframes mb-dropz{0%,20%{opacity:0}35%,85%{opacity:1}100%{opacity:0}}
.mb-toast{position:absolute;left:50%;top:0;translate:-50% -12px;z-index:8;display:flex;align-items:center;gap:10px;height:40px;padding:0 16px;border-radius:var(--radius-sm);background:var(--success);color:#fff;font:500 13px var(--rmx);white-space:nowrap; box-shadow:0 8px 20px -8px rgba(19,49,76,.45);opacity:0;animation:mb-toastIn .35s var(--t) cubic-bezier(.2,.8,.2,1) forwards,mb-fo .3s calc(var(--t) + 2.6s) forwards;max-width:calc(100% - 16px)}
.mb-toast svg{width:18px;height:18px;flex:none}
@keyframes mb-toastIn{to{opacity:1;translate:-50% 0}}
@container (max-width:700px){.mb-cols{--cols:2}
.mb-cols > :nth-child(4n+3),.mb-cols > :nth-child(4n+4){display:none}
.mb-ms-left,.mb-ms-bar .mb-btn{display:none}
.mb-ms-bar{justify-content:center}
.mb-blk .mb-tm{font-size:12px}
.mb-blk .mb-twa-pill{display:none}
.mb-ms .mb-toast{font-size:12px;padding:0 12px;gap:8px}
.mb-ms .mb-toast svg{width:16px;height:16px}
}
.mb-stm{overflow:hidden;position:relative}
.mb-stm-tabs{display:flex;align-items:center;gap:0;padding:8px;border-bottom:1px solid var(--border-primary);background:#fff}
.mb-tab{height:30px;padding:0 12px;display:grid;place-items:center;border:1px solid var(--border-primary);font-size:12.5px;white-space:nowrap;background:#fff}
.mb-tab + .mb-tab{border-left:0}
.mb-tab:first-child{border-radius:4px 0 0 4px}.mb-tab:nth-child(3){border-radius:0 4px 4px 0}
.mb-tab.mb-on{background:var(--container-tertiary);box-shadow:inset 0 -2px 0 var(--brand);font-weight:500}
.mb-legend{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12.5px;white-space:nowrap}
.mb-legend svg{width:12px;height:16px;fill:var(--brand)}
.mb-stm-body{display:grid;grid-template-columns:272px minmax(0,1fr);height:440px}
.mb-stm-panel{border-right:1px solid var(--border-primary);padding:12px;display:grid;gap:10px;align-content:start;background:#fff;overflow:hidden;font-size:12.5px}
.mb-back{color:var(--text-primary);display:flex;align-items:center;gap:6px}
.mb-back svg{width:14px;height:14px;fill:none;stroke:var(--brand);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mb-stm-panel h4{font:600 14px var(--rmx);margin:0;padding-bottom:6px;border-bottom:1px solid var(--text-secondary)}
.mb-stm-panel .mb-desc{color:var(--text-secondary);margin:-2px 0 2px}
.mb-tech{display:grid;grid-template-columns:30px minmax(0,1fr);gap:4px 10px;padding:10px 6px;border-bottom:1px solid var(--border-disabled);border-radius:var(--radius-sm)}
.mb-tech.mb-me{animation:mb-selr .3s var(--t) forwards}
@keyframes mb-selr{to{background:var(--row-selected)}}
.mb-tech .mb-pin{width:26px;height:32px;grid-row:span 3}
.mb-tech .mb-who{font-weight:600;color:var(--text-secondary)}
.mb-tech .mb-who span{font-weight:400}
.mb-tech .mb-note{font-style:italic;color:var(--text-secondary)}
.mb-tech .mb-st.mb-stack{display:grid}
.mb-tech .mb-st{display:flex;align-items:center;gap:6px;color:var(--text-secondary)}
.mb-tech .mb-st svg{width:14px;height:14px;flex:none}
.mb-tech .mb-eta .mb-count::after{content:counter(mb-n) " min"}
.mb-obtn{height:30px;padding:0 12px;border:1px solid var(--brand);border-radius:var(--radius-sm);color:var(--brand);display:inline-grid;place-items:center;width:max-content;font-size:12.5px}
.mb-map{position:relative;overflow:hidden;background:#efeeec}
.mb-map svg.mb-base{position:absolute;inset:0;width:100%;height:100%;display:block}
.mb-bld{fill:#d9d4cc;stroke:#cbc5bb;stroke-width:.6}
.mb-str{stroke:#ffffff;fill:none}
.mb-road{stroke:#fbe7a6;fill:none}
.mb-road-e{stroke:#ecd38a;fill:none}
.mb-slbl{fill:#6f6f6f;font:400 9px var(--rmx)}
.mb-route-u{stroke:#fff;fill:none;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:mb-draw 2.6s .3s cubic-bezier(.45,0,.2,1) forwards}
.mb-route{stroke:var(--brand);fill:none;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:mb-draw 2.6s .3s cubic-bezier(.45,0,.2,1) forwards}
.mb-ipulse{fill:var(--attention);opacity:0;transform-box:fill-box;transform-origin:center;animation:mb-ip 1.8s 2.9s ease-out infinite}
@keyframes mb-ip{0%{opacity:.4;scale:1}100%{opacity:0;scale:2.6}}
.mb-zoom{position:absolute;right:10px;top:10px;display:grid;background:#fff;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.mb-zoom span{width:26px;height:26px;display:grid;place-items:center;color:#666;font-size:16px}
.mb-zoom span + span{border-top:1px solid #e3e3e3}
.mb-collapse{position:absolute;left:8px;top:8px;width:22px;height:22px;border-radius:3px;background:var(--brand);display:grid;place-items:center}
.mb-collapse svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mb-mpin-static{display:none}
.mb-mpin-move{opacity:0;animation:mb-on .01s .3s forwards}
.mb-stm .mb-toast{top:auto;bottom:12px;translate:-50% 12px}
.mb-stm .mb-toast{animation:mb-toastUp .35s var(--t) cubic-bezier(.2,.8,.2,1) forwards,mb-fo .3s calc(var(--t) + 2.6s) forwards}
@keyframes mb-toastUp{to{opacity:1;translate:-50% 0}}
@container (max-width:760px){.mb-stm-body{grid-template-columns:1fr;height:auto}
.mb-map{height:300px;order:-1}
.mb-stm-panel{border-right:0;border-top:1px solid var(--border-primary)}
.mb-tech.mb-far{display:none}
.mb-stm .mb-toast{font-size:12px;padding:0 12px;gap:8px}
.mb-stm .mb-toast svg{width:16px;height:16px}
.mb-legend{display:none}
.mb-tab:nth-child(3){display:none}.mb-tab:nth-child(2){border-radius:0 4px 4px 0}
}
.mb-tile{background:#fff;flex:1;display:flex;flex-direction:column}
.mb-th{height:44px;padding-inline:12px!important;display:flex;align-items:center;gap:8px;padding:0 8px;border-bottom:2px solid var(--border-secondary)}
.mb-th .mb-home{width:20px;height:20px;fill:var(--brand);flex:none}
.mb-th h3{font:500 16px var(--rmx);margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-th .mb-res{white-space:nowrap}
.mb-ib{width:28px;height:28px;display:grid;place-items:center;border-radius:var(--radius-sm);flex:none}
.mb-ib svg{width:18px;height:18px;fill:var(--brand)}
.mb-ib.mb-kab{border:1.5px solid var(--border-secondary)}
.mb-tb{padding:16px;display:flex;flex-direction:column;gap:16px;flex:1}
.mb-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mb-sc{display:flex;align-items:center;gap:4px;height:72px;padding:8px;border:1px solid var(--border-primary);border-radius:var(--radius-sm);min-width:0}
.mb-sc svg{width:32px;height:32px;flex:none;rotate:-90deg}
.mb-sc .mb-trk{fill:none;stroke:var(--border-disabled);stroke-width:5}
.mb-sc .mb-arc{fill:none;stroke:var(--c);stroke-width:5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;animation:mb-ring 1.2s calc(.2s + var(--i) * .1s) cubic-bezier(.3,0,.1,1) forwards}
.mb-sc .mb-arc.mb-shift{animation:mb-ring 1.2s calc(.2s + var(--i) * .1s) cubic-bezier(.3,0,.1,1) forwards,mb-ring2 .6s 2.6s cubic-bezier(.3,0,.1,1) forwards}
@keyframes mb-ring{to{stroke-dashoffset:calc(100 - var(--v))}}
@keyframes mb-ring2{to{stroke-dashoffset:calc(100 - var(--v2))}}
.mb-sc .mb-num{font:600 20px/1 var(--rmx);font-variant-numeric:tabular-nums}
.mb-sc .mb-num .mb-count{--mb-n:0;animation:mb-cnt 1.2s calc(.2s + var(--i) * .1s) cubic-bezier(.2,.8,.2,1) forwards}
@keyframes mb-cnt{to{--mb-n:var(--to)}}
.mb-sc .mb-lbl{font-size:12px;color:var(--text-primary);display:flex;align-items:center;gap:5px;white-space:nowrap;min-width:0}
.mb-sc .mb-lbl i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.mb-sc .mb-txt{display:grid;gap:4px;min-width:0;flex:1}
.mb-sc.mb-bump{animation:mb-bump .5s 2.6s ease-out}
@keyframes mb-bump{40%{border-color:var(--c);box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 25%,transparent)}}
.mb-reg{border-top:1px solid var(--border-primary);margin:0 -16px}
.mb-row{display:grid;grid-template-columns:minmax(0,2.2fr) 112px minmax(0,1.3fr) 48px;align-items:center;height:36px;padding:0 16px;border-bottom:1px solid var(--border-disabled);gap:12px}
.mb-row > *{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-rh{font-weight:700;letter-spacing:.04em;font-size:13px}
.mb-row.mb-live{animation:mb-selr .3s 2.6s forwards,mb-unsel .6s 4s forwards}
@keyframes mb-unsel{to{background:#fff}}
.mb-loz{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:var(--radius-sm);font-size:12px;font-weight:500;background:var(--bg);width:max-content}
.mb-loz::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.mb-s-open{--c:var(--error);--bg:var(--lz-error)}.mb-s-sch{--c:var(--brand);--bg:var(--lz-brand)}.mb-s-ip{--c:var(--notice);--bg:var(--lz-caution)}.mb-s-done{--c:var(--success);--bg:var(--lz-success)}
.mb-tf{display:flex;justify-content:flex-end;margin-top:auto}
.mb-pg{display:flex;align-items:center;gap:10px;color:var(--text-primary);font-size:14px}
.mb-pg span{width:28px;height:28px;border-radius:var(--radius-sm);display:grid;place-items:center;background:var(--brand)}
.mb-pg span.mb-off{background:#8fcbec}
.mb-pg svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@container (max-width:535px){.mb-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.mb-row{grid-template-columns:minmax(0,1fr) 108px 44px}
.mb-row .mb-c-ten{display:none}
}
@media (prefers-reduced-motion: reduce){.mb *,.mb *::before,.mb *::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important}
.mb-mpin-move{display:none}.mb-mpin-static{display:inline}
}
@keyframes mb-etac{from{--mb-n:8}to{--mb-n:0}}

/* Site integration */
/* "The Flow" block: a panel as wide as the hero (hero-wrap's 24px / 16px side margins, no max-width) that hugs
   its content: 32px all round (16px at the sides on phones, where 32px would squeeze the cards).
   --panel-tint is the site's light grey in light mode and its dark panel tint in dark mode. Holds the .cs-section-title and the bento. */
.cs-flow{margin:0 24px;padding:32px;display:flex;flex-direction:column;gap:48px;background:var(--panel-tint);border:1px solid var(--muted);border-radius:8px}
@media (max-width:860px){.cs-flow{margin-inline:16px}}
@media (max-width:640px){.cs-flow{padding-inline:16px}}

/* Step headers. They sit on the page, not inside the light-only product UI, so they use the site's
   theme tokens and Khand like the My Influence stepper (.cs-influence-step-*), not the .mb product tokens. */
@property --mb-sweep{syntax:'<angle>';inherits:false;initial-value:0deg}
.mb-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mb-step-head{display:flex;align-items:flex-start;gap:8px;transition:opacity .4s ease}
.mb-step-num{position:relative;flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg-panel);border:1px solid var(--fg);box-shadow:0 2px 2px rgba(0,0,0,.1);font-family:var(--font-display);font-weight:700;font-size:17px;line-height:1;letter-spacing:.02em;color:var(--fg);transition:border-color .3s ease}
.mb-step-n{transition:opacity .2s ease}
.mb-step-check{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;scale:.5;transition:opacity .25s ease,scale .25s ease}
.mb-step-check svg{width:12px;height:auto;display:block}
.mb-step-title{margin:0;padding-top:3px;font-family:var(--font-display);font-weight:700;font-size:20px;line-height:20px;letter-spacing:.02em;text-transform:capitalize;color:var(--fg);text-wrap:balance}
/* The sweep: while a step plays, an orange ring runs once around its counter, taking as long as the card's animation. */
.mb-step-num::before{content:"";position:absolute;inset:-4px;border-radius:50%;pointer-events:none;opacity:0;background:conic-gradient(var(--orange-102) var(--mb-sweep),transparent 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px))}
/* JS adds .mb-seq: steps that haven't played yet are muted, so the headers read as a sequence. */
.mb-seq .mb-step:not(.mb-active):not(.mb-done) .mb-step-head{opacity:.45}
/* Cards that haven't played yet are dimmed 20% so the eye goes to the active step first. */
.mb-seq .mb-step .mb-cell{transition:opacity .4s ease}
.mb-seq .mb-step:not(.mb-active):not(.mb-done) .mb-cell{opacity:.8}
.mb-seq .mb-step:not(.mb-active):not(.mb-done) .mb-step-num{border-color:color-mix(in srgb,var(--fg) 40%,transparent)}
.mb-active .mb-step-num::before{opacity:1;animation:mb-sweep var(--mb-dur) linear forwards}
@keyframes mb-sweep{to{--mb-sweep:360deg}}
.mb-done .mb-step-n{opacity:0}
.mb-done .mb-step-check{opacity:1;scale:1}
@media (prefers-reduced-motion: reduce){.mb-step-head,.mb-step-num,.mb-step-n,.mb-step-check{transition:none}.mb-active .mb-step-num::before{animation:none;opacity:0}}