.comparison-section{min-height:75vh;background:radial-gradient(ellipse at 80% 5%,#102d43,transparent 65%)}
.comparison-intro{display:grid;grid-template-columns:1.2fr .8fr;gap:35px;align-items:end;margin-bottom:30px}
.comparison-intro h1{font-size:clamp(2.6rem,6vw,4.5rem);margin-bottom:0}
.comparison-intro p{max-width:360px;margin:0}
.comparison-frame{margin:0;border:1px solid #34546c;border-radius:16px;overflow:hidden;background:#101923;box-shadow:0 22px 60px #0005}
.comparison{--reveal:50%;position:relative;aspect-ratio:1270/940;max-height:650px;overflow:hidden;cursor:ew-resize;touch-action:pan-y;user-select:none}
.comparison img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.comparison .comparison-clear{clip-path:inset(0 calc(100% - var(--reveal)) 0 0)}
.comparison-label{position:absolute;top:18px;padding:6px 12px;border:1px solid #ffffff45;border-radius:6px;background:#09121de6;color:var(--white);font-size:.75rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase;pointer-events:none}
.comparison-label.clear{left:18px;color:#bceaff}.comparison-label.cloudy{right:18px;color:#f2db9b}
.comparison-divider{position:absolute;left:var(--reveal);top:0;bottom:0;width:2px;background:#fff;transform:translateX(-50%);pointer-events:none;box-shadow:0 0 8px #0006}
.comparison-handle{position:absolute;top:50%;left:50%;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border:2px solid white;border-radius:50%;transform:translate(-50%,-50%);background:#0d2336;box-shadow:0 3px 18px #0007;color:white}
.comparison-handle svg{width:30px;height:30px}
.comparison input[type="range"]{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.comparison:focus-within{outline:3px solid var(--cyan);outline-offset:-4px}
.comparison:focus-within .comparison-handle{background:#155e91;box-shadow:0 0 0 5px #35b9ff66}
.comparison-caption{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 20px;color:var(--muted);font-size:.9rem}
.comparison-caption strong{color:var(--cyan)}
.comparison-credit{font-size:.78rem;color:var(--muted);margin:14px 0 26px;max-width:850px}.comparison-credit a{text-underline-offset:3px}
@media(min-width:940px){.comparison{aspect-ratio:1270/800}}
@media(max-width:760px){.comparison-intro{grid-template-columns:1fr;gap:20px}.comparison-intro p{max-width:580px}.comparison-caption{font-size:.8rem;padding:14px}.comparison-label{top:12px;font-size:.65rem}.comparison-label.clear{left:12px}.comparison-label.cloudy{right:12px}.comparison-handle{width:48px;height:48px}}