.belt-before-after{background:#f4f9f5;text-align:center}
.belt-before-after .section-head{margin-bottom:28px}
.belt-comparison{--position:50%;position:relative;direction:ltr;width:min(100%,900px);aspect-ratio:1448/1086;margin:auto;overflow:hidden;border-radius:22px;background:#edf2ee;box-shadow:0 20px 55px rgba(7,43,24,.12);isolation:isolate}
.belt-comparison img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;pointer-events:none}
.belt-comparison-after{clip-path:inset(0 0 0 var(--position))}
.belt-comparison-label{position:absolute;top:18px;padding:7px 18px;border-radius:30px;background:#103b27;color:white;font-size:16px;font-weight:800;z-index:2;pointer-events:none}
.belt-comparison-label.before{left:18px}.belt-comparison-label.after{right:18px}
.belt-comparison-divider{position:absolute;top:0;bottom:0;left:var(--position);width:3px;transform:translateX(-50%);background:white;box-shadow:0 0 0 1px rgba(0,0,0,.15);z-index:3;pointer-events:none}
.belt-comparison-divider span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:52px;height:52px;border:3px solid white;border-radius:50%;background:#006b45;color:white;font-size:24px;box-shadow:0 3px 16px rgba(0,0,0,.24)}
.belt-comparison input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:4;touch-action:none}
.belt-comparison:focus-within{outline:3px solid #006b45;outline-offset:4px}
.belt-comparison-note{color:#5b6d61;font-size:14px;line-height:1.6;margin:18px auto 0;max-width:640px}
@media(max-width:550px){.belt-comparison{border-radius:16px}.belt-comparison-label{top:12px;padding:5px 12px;font-size:14px}.belt-comparison-label.before{left:12px}.belt-comparison-label.after{right:12px}.belt-comparison-divider span{width:44px;height:44px;font-size:20px}}