.comparison-heading{max-width:850px;margin:0 auto 40px}.comparison-heading h2{margin:14px 0 20px;text-align:center;font-weight:800}.comparison-heading .eyebrow{text-align:center}.comparison-heading p{font-size:16px;line-height:1.7;color:#60605a;text-align:center;max-width:570px;margin:auto}.montage-comparison{display:grid;grid-template-columns:minmax(0,210px) minmax(0,420px);gap:32px;align-items:center;justify-content:center;max-width:850px;margin:auto}.comparison-card{min-width:0;text-align:center}.comparison-card h3{display:inline-flex;align-items:center;justify-content:center;font-size:17px;line-height:1;letter-spacing:-.3px;margin:0 0 18px;padding:10px 23px;border-radius:100px;background:#fff;box-shadow:0 3px 18px #28231d0d;font-weight:800}.comparison-after h3{background:#ee8068;color:#29211c}.comparison-video{aspect-ratio:9/16;position:relative;border-radius:20px;overflow:hidden;background:#24241f;box-shadow:0 20px 50px #2a282121;isolation:isolate}.comparison-before .comparison-video{border-radius:15px}.comparison-video video{display:block;width:100%;height:100%;object-fit:cover;background:#24241f}.comparison-controls{display:flex;justify-content:center;gap:10px;margin:30px auto 0}.comparison-controls button{font:600 13px Manrope,sans-serif;background:#fff;color:#252522;border:1px solid #d4d2ca;border-radius:100px;padding:12px 20px;min-height:44px}.comparison-controls button:hover{background:#f1eee7}.comparison-controls [data-montage-sound]{background:#252522;color:#fff;border-color:#252522}.comparison-controls [data-montage-sound]:hover{background:#44433e}.comparison-status{font-size:13px;text-align:center;margin:16px auto 0;color:#91402b;max-width:520px}.comparison-status[hidden]{display:none}.montage-showcase{padding:80px 0 90px}.homepage-carousel{padding-left:0!important;padding-right:0!important}.homepage-carousel .homepage-carousel-shell{max-width:100%}.homepage-carousel-dialog img{max-width:100%}
@media(max-width:760px){.montage-comparison{gap:15px;grid-template-columns:minmax(0,1fr) minmax(0,2fr)}.comparison-card h3{font-size:13px;margin-bottom:12px;padding:8px 17px}.comparison-heading{margin-bottom:28px}.comparison-heading h2{font-size:36px}.comparison-heading p{font-size:14px}.comparison-video{border-radius:14px;box-shadow:0 12px 30px #2a28211c}.comparison-before .comparison-video{border-radius:10px}.montage-showcase{padding-top:50px;padding-bottom:55px}.comparison-controls{margin-top:25px}.comparison-controls button{font-size:12px;padding:11px 17px}}

/* Keep the complete before/after demo, including sound controls, in one viewport. */
.montage-showcase{padding:clamp(16px,3.2svh,32px) 0 clamp(18px,3.8svh,38px)}
.comparison-heading{max-width:100%;margin:0 auto clamp(12px,2svh,20px)}
.comparison-heading h2{font-size:clamp(30px,3.15vw,44px);line-height:1.04;letter-spacing:-1.5px;margin:7px 0 10px;text-align:center}
.comparison-heading p{font-size:14px;line-height:1.45;max-width:720px}
.montage-comparison{grid-template-columns:auto auto;gap:clamp(14px,2.4vw,32px)}
.comparison-after .comparison-video{width:min(30.94svh,281px,calc(66.65vw - 36px));height:auto;aspect-ratio:9/16}
.comparison-before .comparison-video{width:50%;height:auto;aspect-ratio:9/16}
.comparison-card h3{font-size:14px;padding:8px 19px;margin-bottom:10px;min-height:0}
.comparison-controls{margin-top:clamp(10px,1.8svh,16px)}
.comparison-controls button{min-height:40px;padding:9px 17px}
@media(max-width:760px){
 .montage-showcase{padding:clamp(14px,2.8svh,24px) 0 clamp(16px,3svh,28px)}
 .comparison-heading{margin-bottom:clamp(10px,1.8svh,16px)}
 .comparison-heading h2{font-size:clamp(27px,7.2vw,36px);letter-spacing:-1.1px;line-height:1.04;margin:6px 0 8px}
 .comparison-heading .eyebrow{font-size:9px}
 .comparison-heading p{font-size:12px;line-height:1.4;max-width:520px}
 .montage-comparison{gap:12px}
 .comparison-after .comparison-video{width:min(28.69svh,231px,calc(66.66vw - 36px))}
 .comparison-card h3{font-size:12px;padding:7px 15px;margin-bottom:8px}
 .comparison-controls{margin-top:11px;gap:8px}
 .comparison-controls button{font-size:11px;min-height:38px;padding:8px 13px}
}
@supports not (height:1svh){.comparison-after .comparison-video{width:min(30.94vh,281px,calc(66.65vw - 36px))}@media(max-width:760px){.comparison-after .comparison-video{width:min(28.69vh,231px,calc(66.66vw - 36px))}}}
/* Use the remaining viewport height while preserving the 1:2 comparison sizes. */
.montage-comparison{--comparison-after-width:min(31vh,18vw,281px,max(68px,calc((100vh - 410px)*.5625)))}
.comparison-after .comparison-video{width:var(--comparison-after-width);height:auto;aspect-ratio:9/16}
.comparison-before .comparison-video{width:calc(var(--comparison-after-width)*.5);height:auto;aspect-ratio:9/16}
.comparison-heading p{max-width:900px;white-space:normal}
@media(max-width:760px){
 .montage-comparison{--comparison-after-width:min(28.5vh,50vw,231px,max(68px,calc((100vh - 410px)*.5625)))}
 .comparison-heading p{max-width:520px}
}
@supports(height:1svh){
 .montage-comparison{--comparison-after-width:min(31svh,18vw,281px,max(68px,calc((100svh - 410px)*.5625)))}
 @media(max-width:760px){.montage-comparison{--comparison-after-width:min(28.5svh,50vw,231px,max(68px,calc((100svh - 410px)*.5625)))}}
}

/* Inline controls keep the comparison compact and give the video frames more room. */
.article-body>.montage-showcase{margin:24px 0 0}
.montage-showcase{padding:clamp(42px,6svh,70px) 0 clamp(58px,7.4svh,88px)}
.comparison-video{cursor:pointer;touch-action:manipulation}
.comparison-video video{pointer-events:none}
.comparison-video-controls{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-end;padding:12px;pointer-events:none;background:linear-gradient(0deg,#0007,transparent 24%);opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease}
[data-controls-visible="true"] .comparison-video-controls,.comparison-video:is(:focus-visible,:has(:focus-visible)) .comparison-video-controls,.comparison-video-controls button:focus-visible{opacity:1;visibility:visible}
.comparison-video-controls button{pointer-events:auto;display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid #ffffff70;border-radius:50%;background:#111a;color:#fff;backdrop-filter:blur(8px);cursor:pointer;transition:background .16s ease,transform .16s ease}
.comparison-video-controls button:hover{background:#000c;transform:scale(1.05)}
.comparison-play-control{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0}
.comparison-play-control:hover{transform:translate(-50%,-50%) scale(1.05)!important}
[data-controls-visible="true"] .comparison-play-control,.comparison-video:is(:focus-visible,:has(:focus-visible)) .comparison-play-control,.comparison-play-control:focus-visible{opacity:1}
.media-icon{display:block;width:15px;height:17px;position:relative}
.media-icon-play{width:0;height:0;margin-left:3px;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:14px solid #fff}
[data-montage-state="playing"] .comparison-play-control .media-icon-play{width:14px;height:17px;margin:0;border:0}
[data-montage-state="playing"] .comparison-play-control .media-icon-play:before,[data-montage-state="playing"] .comparison-play-control .media-icon-play:after{content:"";position:absolute;top:0;width:4px;height:17px;border-radius:1px;background:#fff}
[data-montage-state="playing"] .comparison-play-control .media-icon-play:before{left:1px}
[data-montage-state="playing"] .comparison-play-control .media-icon-play:after{right:1px}
.comparison-sound-control{position:absolute;right:12px;bottom:12px}
.comparison-sound-control svg{width:20px;height:20px;fill:currentColor}
.comparison-sound-control .sound-muted-mark{display:block}
.comparison-sound-control[data-muted="false"] .sound-muted-mark{display:none}
.comparison-status:not([hidden]){position:absolute;z-index:2;top:12px;left:12px;right:12px;width:auto;margin:0;padding:8px 10px;border-radius:8px;background:#111d;color:#fff;font-size:12px;line-height:1.4;text-align:left;backdrop-filter:blur(8px)}
.comparison-status[hidden]{display:none}
@media(hover:none){.comparison-video-controls{background:linear-gradient(0deg,#0007,transparent 24%)}.comparison-play-control{opacity:0}}
@media(max-width:760px){.montage-showcase{padding:clamp(34px,5svh,52px) 0 clamp(48px,6svh,68px)}.comparison-video-controls{padding:8px}.comparison-video-controls button{width:36px;height:36px}.comparison-sound-control{right:8px;bottom:8px}}
@media(prefers-reduced-motion:reduce){.comparison-video-controls,.comparison-video-controls button{transition:none}}

/* A little more room for both reels now that the detached toolbar is gone. */
@supports(height:1svh){
 .montage-comparison{--comparison-after-width:min(34svh,19vw,310px,max(68px,calc((100svh - 350px)*.5625)))}
 @media(max-width:760px){.montage-comparison{--comparison-after-width:min(31svh,56vw,251px,max(72px,calc((100svh - 350px)*.5625)))}}
}
@supports not (height:1svh){
 .montage-comparison{--comparison-after-width:min(34vh,19vw,310px,max(68px,calc((100vh - 350px)*.5625)))}
 @media(max-width:760px){.montage-comparison{--comparison-after-width:min(31vh,56vw,251px,max(72px,calc((100vh - 350px)*.5625)))}}
}

.comparison-controls{display:none!important}