.mb8-compare-labels{display:flex;justify-content:space-between;gap:20px;font-size:11px;line-height:20px;margin-bottom:12px;color:var(--muted)}
.mb8-compare-stage{position:relative;isolation:isolate;aspect-ratio:16/10;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#f5f5f5}
.mb8-compare-stage>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:top;max-width:none;pointer-events:none;user-select:none}
.mb8-compare-before{z-index:1}
.mb8-compare-divider{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:white;box-shadow:0 0 0 1px #0003;z-index:2;pointer-events:none}
.mb8-compare-divider>span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:8px;width:46px;height:46px;border-radius:50%;background:#fff;color:#242424;border:1px solid #0002;box-shadow:0 2px 8px #0002;font-size:22px;line-height:1}
.mb8-compare-divider i{display:block;height:16px;border-left:1px solid #ccc}
.mb8-compare-stage>input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3;touch-action:pan-y}
.mb8-compare-stage:has(input:focus-visible){outline:2px solid var(--text);outline-offset:4px}
.mb8-compare-stage:has(input:active) .mb8-compare-divider>span{box-shadow:0 0 0 5px #ffce3b66,0 2px 8px #0002}
.mb8-compare-controls{display:flex;justify-content:center;gap:8px;margin-top:16px}
.mb8-compare-controls>.mb4-button{min-height:44px;border-radius:7px;font-size:11px;padding-inline:14px;touch-action:manipulation}
.maybank-case-study .mb8-compare-error{font-size:12px;line-height:21px;margin-top:16px}
@media(max-width:700px){.mb8-compare-labels{font-size:10px;gap:12px}.mb8-compare-controls{gap:6px}.mb8-compare-controls>.mb4-button{padding-inline:10px;font-size:10px}}