/* Without JavaScript, both originals remain visible. */
.page-red-sea-redemption .content > :is(p, ul, h2, h3, figure) { width:70%; }
.page-red-sea-redemption .software-downloads { position:sticky; top:24px; float:right; width:26%; margin:0 0 24px 4%; padding:16px; border:1px solid var(--line); border-radius:8px; background:white; box-shadow:0 4px 18px #172a3512; z-index:5; }
.page-red-sea-redemption .software-downloads p { margin:0; }
.page-red-sea-redemption .software-downloads a[download] { display:flex; width:100%; margin:0; padding:12px 14px; font-size:.875rem; text-align:center; }
.page-red-sea-redemption .software-downloads a[download] + a[download] { margin-top:10px; }
.page-red-sea-redemption.local-preview .software-downloads { top:60px; }
@media(max-width:700px) {
  .page-red-sea-redemption .content > :is(p, ul, h2, h3, figure) { width:100%; }
  .page-red-sea-redemption .software-downloads { float:none; width:100%; margin:0 0 24px; padding:10px; top:8px; }
  .page-red-sea-redemption .software-downloads p { display:flex; gap:10px; }
  .page-red-sea-redemption .software-downloads a[download] { flex:1; width:auto; min-width:0; padding:10px 8px; font-size:.75rem; }
  .page-red-sea-redemption .software-downloads a[download] + a[download] { margin-top:0; }
}
.image-comparison > img { width:49%; vertical-align:top; }
.comparison-stage { --split:50%; position:relative; overflow:hidden; border-radius:8px; background:#172a35; isolation:isolate; }
.comparison-stage > img { display:block; width:100%; height:auto; margin:0; max-width:none; user-select:none; }
.comparison-stage > .comparison-before { position:absolute; inset:0; width:100%; height:100%; clip-path:inset(0 calc(100% - var(--split)) 0 0); }
.comparison-divider { position:absolute; top:0; bottom:0; left:var(--split); width:2px; transform:translateX(-50%); background:white; box-shadow:0 0 4px #0006; pointer-events:none; }
.comparison-divider > span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:46px; height:46px; border:2px solid white; border-radius:50%; color:white; background:#172a35b3; font:28px/1 system-ui,sans-serif; box-shadow:0 2px 8px #0004; }
.comparison-label { position:absolute; top:16px; padding:4px 12px; border-radius:4px; color:white; background:#172a35c9; font-size:.875rem; font-weight:650; pointer-events:none; }
.comparison-label-before { left:16px; }
.comparison-label-after { right:16px; }
.comparison-control { position:absolute; inset:0; display:block; width:100%; height:100%; margin:0; padding:0; opacity:0; cursor:ew-resize; touch-action:pan-y; }
.comparison-stage:has(.comparison-control:focus-visible) { outline:3px solid var(--accent); outline-offset:4px; }
.comparison-stage:has(.comparison-control:focus-visible) .comparison-divider > span { background:var(--accent); }
@media(max-width:600px) { .comparison-label { top:10px; padding:3px 8px; font-size:.75rem; } .comparison-label-before { left:10px; } .comparison-label-after { right:10px; } }