/* Compare sliders — layered full-bleed images, clip-path reveal, smooth slide */
.dc-compare__head{margin-top:clamp(40px,6vw,72px)}
.dc-compare__grid{display:grid;grid-template-columns:1fr;gap:var(--dc-gap);align-items:stretch}
.dc-compare{margin:0;display:flex;flex-direction:column;height:100%}
.dc-compare__stage{position:relative;overflow:hidden;border-radius:var(--dc-radius-lg);border:1px solid var(--dc-border);background:var(--dc-surface);touch-action:pan-y}
.dc-compare__img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;user-select:none;pointer-events:none}
/* The "before" layer always fills the stage; the clip does the revealing so the
   picture never squishes or stretches while dragging. */
.dc-compare__reveal{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--dc-pos,50%)) 0 0)}
.dc-compare__reveal .dc-compare__img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
.dc-compare.is-animating .dc-compare__reveal{transition:clip-path .5s var(--dc-ease,ease)}
.dc-compare__handle{
	position:absolute;top:0;bottom:0;left:var(--dc-pos,50%);width:44px;transform:translateX(-50%);
	cursor:ew-resize;display:flex;align-items:center;justify-content:center;background:transparent;border:0;
}
.dc-compare.is-animating .dc-compare__handle{transition:left .5s var(--dc-ease,ease)}
.dc-compare__handle::before{content:"";position:absolute;top:0;bottom:0;width:2px;background:var(--dc-accent)}
.dc-compare__grip{width:38px;height:38px;border-radius:var(--dc-radius-pill);background:var(--dc-accent);color:var(--dc-on-accent);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px -6px var(--dc-accent-glow);position:relative;z-index:1}
.dc-compare__grip::before,.dc-compare__grip::after{content:"";width:0;height:0;border-block:5px solid transparent}
.dc-compare__grip::before{border-right:6px solid var(--dc-on-accent);margin-right:3px}
.dc-compare__grip::after{border-left:6px solid var(--dc-on-accent);margin-left:3px}
.dc-compare__tag{position:absolute;top:12px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:var(--dc-radius-pill);background:rgba(10,10,10,.7);color:#fff}
.dc-compare__tag--before{left:12px}
.dc-compare__tag--after{right:12px;background:var(--dc-accent);color:var(--dc-on-accent)}
.dc-compare__caption{text-align:center;font-family:var(--dc-font-head);font-weight:600;color:var(--dc-text-muted);margin-top:.7em;font-size:.9rem}

@media(min-width:768px){.dc-compare__grid{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.dc-compare.is-animating .dc-compare__reveal,.dc-compare.is-animating .dc-compare__handle{transition:none}}