.before-after{background:var(--blue);padding:clamp(90px,11vw,155px) 24px;text-align:center}
.before-after[hidden]{display:none}
.before-after-heading{margin:0 auto 50px;max-width:1100px}
.before-after .section-heading{font-size:clamp(3.3rem,8vw,8rem);line-height:.95}
.before-after-hint{font-size:1rem;line-height:1.6;margin:25px auto 0;color:rgba(255,255,255,.85)}
.comparison-viewer{width:min(100%,600px);margin:0 auto}
.comparison{margin:0 auto}
.comparison[hidden]{display:none}
.comparison-panel{--split:50%;position:relative;isolation:isolate;overflow:hidden;aspect-ratio:4/3;background:var(--ink);cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.comparison-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.comparison-before{clip-path:inset(0 calc(100% - var(--split)) 0 0);z-index:1}
.comparison-tag{position:absolute;z-index:2;top:20px;padding:9px 13px;background:rgba(9,12,14,.78);color:#fff;font-size:.875rem;line-height:1.4;font-weight:700;letter-spacing:.1em;text-transform:uppercase;pointer-events:none}
.comparison-tag-before{left:20px}
.comparison-tag-after{right:20px}
.comparison-divider{position:absolute;z-index:3;top:0;bottom:0;left:var(--split);width:3px;background:#fff;transform:translateX(-50%);box-shadow:0 0 9px rgba(0,0,0,.45);pointer-events:none}
.comparison-handle{position:absolute;left:var(--split);top:50%;z-index:4;display:grid;place-items:center;width:64px;height:64px;border:3px solid #fff;border-radius:50%;background:rgba(9,12,14,.85);color:#fff;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 3px 18px rgba(0,0,0,.25)}
.comparison-handle svg{width:38px;height:30px;fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:square;stroke-linejoin:miter}
.comparison-range{position:absolute;z-index:5;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.comparison-panel:focus-within{outline:3px solid var(--yellow);outline-offset:5px}
.comparison figcaption{max-width:720px;margin:22px auto 0;font-size:1rem;line-height:1.6;color:var(--paper)}
.comparison-navigation{display:flex;align-items:center;justify-content:center;gap:30px;margin-top:22px}
.comparison-step{display:grid;place-items:center;width:56px;height:56px;padding:14px;border:0;border-radius:50%;background:rgba(9,12,14,.8);color:#fff;cursor:pointer;transition:background .2s ease,opacity .2s ease}
.comparison-step:hover:not(:disabled),.comparison-step:focus-visible{background:var(--paper);color:var(--ink)}
.comparison-step:disabled{opacity:.35;cursor:default}
.comparison-step svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:square;stroke-linejoin:miter}
.comparison-count{min-width:50px;font-size:.875rem;line-height:1.5;font-variant-numeric:tabular-nums}
.comparison-note{max-width:430px;margin:26px auto 0;font-size:.875rem;line-height:1.6;color:rgba(255,255,255,.78)}
@media(max-width:560px){
  .before-after{padding-left:16px;padding-right:16px}
  .before-after-heading{margin-bottom:32px}
  .comparison-tag{top:12px;padding:7px 10px;font-size:.875rem;letter-spacing:.06em}
  .comparison-tag-before{left:12px}.comparison-tag-after{right:12px}
  .comparison-handle{width:56px;height:56px}
  .comparison-step{width:52px;height:52px;padding:12px}
}
@media(prefers-reduced-motion:reduce){.comparison-step{transition:none}}