.comparison-section{border-top:1px solid var(--line)}
.comparison-section .section-heading>p{max-width:370px}
.comparison-process>.container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:clamp(40px,7vw,100px);align-items:center}
.comparison-process h2{font-size:var(--type-section)}
.comparison-process .section-heading{display:block;margin:0}
.comparison-process .section-heading>p{margin-top:30px}
.comparison-process .comparison{min-width:0}
@media(max-width:960px){.comparison-process>.container{grid-template-columns:minmax(0,1fr);gap:33px}.comparison-process .comparison{width:100%;max-width:500px;justify-self:center}.comparison-process .section-heading>p{max-width:560px;margin-top:24px}}
.comparison{margin:0}
.comparison-frame{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;position:relative;background:var(--navy-light);border-radius:16px;overflow:hidden;isolation:isolate}
.comparison-layer{position:relative;min-width:0}
.comparison-before{order:-1}
.comparison-layer img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.comparison-label{display:block;padding:12px 16px;font-size:14px;line-height:1.4;color:var(--ivory)}
.comparison-divider,.comparison-control{display:none}
.comparison figcaption,.comparison-static-note{font-size:14px;line-height:1.8;color:var(--text-soft);margin-top:20px;max-width:800px}
.comparison.is-ready .comparison-frame{display:block;aspect-ratio:var(--comparison-ratio);touch-action:pan-y}
.comparison.is-ready .comparison-layer{position:absolute;inset:0;background:var(--navy-light)}
.comparison.is-ready .comparison-layer img{height:100%;object-fit:contain}
.comparison.is-ready .comparison-before{clip-path:inset(0 calc(100% - var(--comparison-position)) 0 0);z-index:1}
.comparison.is-ready .comparison-label{position:absolute;bottom:24px;padding:9px 14px;background:var(--overlay-label);border:1px solid var(--border-dark-bright);border-radius:5px}
.comparison-before .comparison-label{left:24px}
.comparison-after .comparison-label{right:24px}
.comparison.is-ready .comparison-divider{display:block;position:absolute;top:0;bottom:0;left:var(--comparison-position);width:1px;background:var(--ivory);z-index:2;pointer-events:none}
.comparison-divider>span{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);display:grid;place-items:center;width:64px;height:64px;background:var(--ivory);color:var(--navy);border-radius:50%;box-shadow:0 3px 24px var(--shadow-soft)}
.comparison-divider svg{width:32px;height:24px}
.comparison-frame.is-following .comparison-before{transition:clip-path .14s ease-out}
.comparison-frame.is-following .comparison-divider{transition:left .14s ease-out}
@media(prefers-reduced-motion:reduce){.comparison-frame.is-following .comparison-before,.comparison-frame.is-following .comparison-divider{transition:none}}
.comparison.is-ready .comparison-control{display:block;position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;opacity:0;z-index:3;cursor:ew-resize;touch-action:pan-y}
.comparison-frame:has(.comparison-control:focus-visible){outline:2px solid var(--gold);outline-offset:5px}
.comparison-frame:has(.comparison-control:focus-visible) .comparison-divider>span{box-shadow:0 0 0 4px var(--gold)}
@media(max-width:380px){.comparison-section h2{font-size:var(--type-section)}}
@media(max-width:600px){.comparison-frame{border-radius:10px;gap:10px}.comparison-divider>span{width:46px;height:46px}.comparison-divider svg{width:26px}.comparison.is-ready .comparison-label{bottom:12px;padding:6px 9px;font-size:12px}.comparison-before .comparison-label{left:12px}.comparison-after .comparison-label{right:12px}.comparison figcaption{font-size:13px;margin-top:15px}}