.water-compare-section{padding:var(--space-xl) 0;background-color:var(--color-surface, #ffffff);overflow:hidden}.water-compare-header{text-align:center;margin-bottom:var(--space-xl)}.water-compare-title{font-family:var(--font-display);font-size:clamp(2rem,4vw,3.5rem);color:var(--color-gray-800);margin:0}.water-compare-subtitle{color:var(--color-gray-500);margin-top:var(--space-sm);font-size:var(--font-size-lg)}.water-compare-wrapper{position:relative;width:100%;max-width:1200px;height:min(60vh,500px);margin:0 auto;border-radius:var(--radius-2xl);overflow:hidden;box-shadow:0 20px 40px #0000001a}.water-compare-layer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.water-compare-image{width:100%;height:100%;object-fit:cover}.water-compare-after{z-index:2;will-change:clip-path}.water-compare-points{position:absolute;top:50%;transform:translateY(-50%);width:fit-content;max-width:280px;pointer-events:none}.water-compare-points--left{left:5%}.water-compare-points--right{right:5%}.water-compare-points ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.water-compare-point{background:#0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:8px 16px;font-size:13px;font-weight:500;color:#fff;display:flex;align-items:center;gap:12px;box-shadow:0 4px 12px #00000026}.water-compare-points--right .water-compare-point{flex-direction:row-reverse}.water-compare-point-icon{font-size:16px;display:flex;align-items:center;justify-content:center}.water-compare-divider{position:absolute;top:0;bottom:0;width:4px;background-color:#fff;z-index:3;box-shadow:0 0 14px #0006,0 0 0 1px #0000001a;pointer-events:none}.water-compare-handle{position:absolute;top:50%;width:64px;height:64px;background-color:#fff;border-radius:50%;z-index:4;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px #00000059,0 0 0 4px #fff6;border:2px solid var(--color-primary);will-change:transform,left;color:var(--color-primary)}.water-compare-readout{position:absolute;top:24px;background-color:#fffffff2;padding:6px 14px;border-radius:20px;font-size:14px;font-weight:700;color:var(--color-gray-800);z-index:4;box-shadow:0 2px 8px #0003;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);white-space:nowrap;will-change:transform,left}.water-compare-hint{position:absolute;bottom:30px;left:50%;transform:translate(-50%);background-color:#0009;color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;z-index:5;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.water-compare-labels{display:flex;justify-content:space-between;max-width:1200px;margin:var(--space-md) auto 0;padding:0 var(--space-md)}.water-compare-label{font-size:var(--font-size-md);font-weight:600;color:var(--color-gray-600)}.water-compare-label--right{color:var(--color-primary)}@media(max-width:768px){.water-compare-section{padding:var(--space-2xl) 0}.water-compare-wrapper{height:60vh;border-radius:0}.water-compare-handle{width:36px;height:36px}.water-compare-handle svg{width:16px;height:16px}.water-compare-readout{top:16px;padding:4px 10px;font-size:11px}}@media(prefers-reduced-motion:reduce){.water-compare-after{clip-path:inset(0 0 0 50%)!important}.water-compare-divider,.water-compare-handle{left:50%!important}.water-compare-readout{left:50%!important;display:none}.water-compare-hint{display:none}}