/* Small moving previews keep the feature comparison readable in one screen */
body[data-page="compare"]{--compare-preview-width:64px}
.compare-head>div{padding:11px 8px}
.compare-head span{font-size:16px}
.comparison .compare-row{padding:12px 0}
.comparison .compare-row>h2{font-size:19px;line-height:1.2;margin-bottom:9px}
.comparison .compare-grid>div{padding-inline:12px}
.comparison .compare-grid h3{font-size:14px;line-height:1.3;min-height:0;margin-bottom:8px}
.comparison .compare-grid .reel{width:var(--compare-preview-width);max-width:none;margin:0 auto;border-radius:8px}
.comparison .compare-grid .sample{display:none}
.comparison .compare-grid .play{width:24px;height:24px;right:4px;bottom:4px;font-size:9px}
.comparison .compare-grid .carousel{width:128px;max-width:100%;margin-inline:auto}
.comparison .compare-grid .rail{width:var(--compare-preview-width);max-width:100%;margin-inline:auto;padding:0;gap:12px}
.comparison .compare-grid .rail figure{flex-basis:100%}
.comparison .compare-grid .rail figcaption{font-size:10px;line-height:1.3;margin-top:4px;min-height:26px;display:block;text-align:center;overflow-wrap:anywhere}
.comparison .compare-grid .rail-controls{gap:2px;margin-top:0}
.comparison .compare-grid .rail-controls button{width:40px;height:40px;flex-shrink:0;font-size:17px;border:0;background:transparent}
.comparison .compare-grid .rail-controls span{min-width:36px;font-size:10px}
.comparison .empty{min-height:114px;font-size:32px}
.comparison .empty p{font-size:11px;line-height:1.4;margin-top:5px}
.comparison .repurpose{grid-template-columns:repeat(4,minmax(0,1fr));max-width:154px;gap:5px;padding:0}
.comparison .repurpose>span{aspect-ratio:9/16;border-radius:5px;font-size:12px}
.comparison .repurpose>div{grid-column:span 2;font-size:10px;padding:8px 2px}
.comparison .also{padding:28px 8px}
.comparison .also h2{font-size:25px}
.comparison .also>div{gap:20px;margin-top:20px}
.comparison .also h3{font-size:17px}
.comparison .also p{font-size:13px;line-height:1.5;margin-top:8px}
.comparison .also .shared{margin-top:24px}
@media(min-width:901px){
 body[data-page="compare"]{--compare-preview-width:72px}
 .comparison,.compare-head{padding-inline:max(16px,calc((100vw - 700px)/2))}
}
@media(max-width:350px){
 body[data-page="compare"]{--compare-preview-width:54px}
 .comparison .compare-grid>div{padding-inline:6px}
 .comparison .compare-row>h2{font-size:18px}
 .comparison .compare-grid h3{font-size:13px}
 .comparison .compare-grid .rail figcaption{font-size:9px}
}