.comparisons{background:var(--hero)}
.comparisons-heading{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:42px}
.comparisons-heading h2{max-width:650px}
.comparisons-heading>p{max-width:310px;font-size:16px;line-height:1.7}
.comparisons-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.85fr);gap:clamp(40px,7vw,100px);align-items:center}
.comparisons-library{min-width:0}
.comparison-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.comparison-tabs button{background:transparent;color:var(--secondary);border:0;padding:12px 17px;min-height:46px;font-size:14px;line-height:1.5;transition:background-color .2s,color .2s}
.comparison-tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink)}
.comparison-tabs button:hover{background:var(--surface);color:var(--ink)}
.comparison-tabs button:hover:not([aria-selected="true"]){background:var(--ground)}
.comparison-case[hidden]{display:none!important}
.comparison-stage{position:relative;width:min(100%,calc(650px * var(--comparison-ratio)));aspect-ratio:var(--comparison-ratio);margin-inline:auto;background:var(--surface);isolation:isolate;--split:50%}
.comparison-layer{position:absolute;inset:0;overflow:hidden}
.comparison-photo{display:block;position:absolute;inset:0;width:100%;height:100%;stroke:none;fill:none;pointer-events:none}
.comparison-before{clip-path:inset(0 0 calc(100% - var(--split)) 0);z-index:1}
.comparison-label{position:absolute;left:14px;display:block;background:var(--ground);color:var(--ink);padding:7px 12px;font-size:14px;line-height:1.5;pointer-events:none}
.comparison-label-before{top:14px}
.comparison-label-after{bottom:14px}
.comparison-attribution{position:absolute;right:12px;bottom:12px;padding:7px 10px;background:var(--ground);color:var(--ink);font-size:13px;line-height:1.5;text-align:right;pointer-events:none;z-index:1}
.comparison-divider{position:absolute;top:var(--split);left:0;width:100%;height:48px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;z-index:2;cursor:ns-resize;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}
/* The full-width drag target stays invisible; keyboard focus belongs to the grip. */
.comparison-divider[tabindex]:focus{outline:0}
.comparison-divider:before{content:"";position:absolute;left:0;right:0;top:23px;height:2px;background:var(--white)}
.comparison-grip{position:relative;display:grid;place-items:center;width:48px;height:48px;background:var(--action);border:2px solid var(--white);border-radius:50%;color:var(--white);transition:background-color .2s}
.comparison-grip svg{width:24px;height:24px;stroke-width:1.7}
.comparison-divider:hover .comparison-grip{background:var(--ink)}
.comparison-divider:focus-visible .comparison-grip{outline:3px solid var(--ink);outline-offset:4px}
.comparison-stage.is-dragging,.comparison-stage.is-dragging *{cursor:ns-resize}
.comparison-case figcaption{display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;margin-top:20px;font-size:13px;line-height:1.7;color:var(--secondary)}
.comparisons-copy{padding-bottom:55px}
.comparisons-copy>.comparison-intro{font-size:clamp(27px,2.7vw,36px);line-height:1.25;letter-spacing:-.025em;margin-bottom:27px}
.comparisons-copy>p{max-width:44ch;font-size:17px;line-height:1.8;margin-bottom:23px}
.comparisons-copy>.comparison-context{font-size:14px;color:var(--secondary);line-height:1.8;margin-bottom:18px}
.comparisons-copy>.text-link{margin-top:12px}
@media(max-width:1000px){.comparisons-layout{grid-template-columns:minmax(0,1.1fr) minmax(250px,.9fr);gap:35px}.comparison-tabs button{padding:12px;font-size:13px}.comparison-case figcaption{display:block}.comparison-case figcaption>span{display:block}.comparisons-copy{padding-bottom:0}}
@media(max-width:760px){.comparisons-heading{display:block;margin-bottom:26px}.comparisons-heading h2{font-size:38px}.comparisons-heading>p{max-width:38ch;margin-top:20px}.comparisons-layout{display:block}.comparison-tabs{gap:4px;flex-wrap:nowrap;margin-bottom:30px}.comparison-tabs button{flex:1;padding:12px 6px;font-size:13px;text-align:center;min-height:48px}.comparison-stage{width:min(100%,calc(590px * var(--comparison-ratio)))}.comparison-case figcaption{margin-top:18px;font-size:13px}.comparison-label{left:12px;font-size:13px;padding:6px 10px}.comparison-label-before{top:12px}.comparison-label-after{bottom:12px}.comparisons-copy{margin-top:32px}.comparisons-copy>.comparison-intro{font-size:27px;line-height:1.3;margin-bottom:20px}.comparisons-copy>p{font-size:16px;margin-bottom:20px}.comparisons-copy>.comparison-context{font-size:14px;margin-bottom:16px}.comparisons-copy>.text-link{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.comparison-tabs button,.comparison-grip{transition:none}}
noscript .comparison-original{display:block}