/* Before/after comparison: a quiet, tactile proof point after the cost comparison. */
.before-after{background:#f4f6f1}
.before-after__frame{--split:50%;position:relative;display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;isolation:isolate;aspect-ratio:16/9;min-height:420px;overflow:hidden;border:1px solid #d8dfd5;border-radius:24px;background:#dfe6dd;box-shadow:0 22px 60px rgba(10,40,18,.12)}
.before-after__image{position:absolute;inset:0}
.before-after__image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.before-after__image--before img{filter:saturate(.72) contrast(.96) brightness(.97)}
.before-after__image--after{z-index:1;clip-path:inset(0 0 0 var(--split));background:#18351f}
.before-after__image--after img{object-position:center}
.before-after__divider{position:absolute;z-index:3;top:0;bottom:0;left:var(--split);width:2px;background:#fff;box-shadow:0 0 0 1px rgba(7,35,15,.24),0 0 22px rgba(0,0,0,.18);pointer-events:none}
.before-after__handle{position:absolute;z-index:4;top:50%;left:var(--split);display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(255,255,255,.8);border-radius:50%;background:#075d20;color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.24);transform:translate(-50%,-50%);pointer-events:none}
.before-after__handle::before,.before-after__handle::after{content:'';width:7px;height:7px;border-top:2px solid #fff;border-right:2px solid #fff}
.before-after__handle::before{margin-right:-10px;transform:rotate(-135deg)}
.before-after__handle::after{margin-left:-10px;transform:rotate(45deg)}
.before-after__label{position:absolute;z-index:4;top:18px;display:inline-flex;align-items:center;padding:8px 11px;border:1px solid rgba(255,255,255,.34);border-radius:9px;background:rgba(7,35,15,.72);backdrop-filter:blur(8px);color:#fff;font-size:11px;font-weight:800;letter-spacing:.01em;pointer-events:none}
.before-after__label--before{left:18px}.before-after__label--after{right:18px}
.before-after__range{position:absolute;z-index:5;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;appearance:none;-webkit-appearance:none}
.before-after__range:focus-visible{outline:3px solid #55c22c;outline-offset:-6px;border-radius:22px}
.before-after__note{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:14px;color:#687169;font-size:12px}
.before-after__note strong{color:#17331f;font-size:13px}
.before-after__note span:last-child{text-align:right}
@media(max-width:640px){.before-after__frame{aspect-ratio:4/3;min-height:300px;border-radius:18px}.before-after__label{top:12px;padding:7px 9px;font-size:10px}.before-after__label--before{left:12px}.before-after__label--after{right:12px}.before-after__handle{width:40px;height:40px}.before-after__note{align-items:flex-start;flex-direction:column;gap:5px}.before-after__note span:last-child{text-align:left}}
@media(prefers-reduced-motion:reduce){.before-after__range{scroll-behavior:auto}}