/* The grid is the baseline: motion only enhances a complete, readable comparison. */
.comparison-scene{position:relative;margin:0 auto;max-width:1500px}
.comparison-scene-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0 0 22px;border-top:1px solid #b9bec4;padding-top:17px}
.comparison-scene-head p{margin:0;font-size:11px;letter-spacing:.13em;text-transform:uppercase}
.comparison-scene-head p span{color:#8b673f;margin-right:12px}
.comparison-controls{display:flex;gap:20px;align-items:center}
.comparison-hint{font-size:11px;color:#626a72;white-space:nowrap}
.comparison-hint:after{content:'↓';margin-left:10px}
.comparison-settle{background:transparent;color:var(--ink);font-size:11px;text-decoration:underline;text-underline-offset:4px;padding:8px 0;min-height:36px;white-space:nowrap}
.comparison-controls[hidden]{display:none}
.comparison-canvas{position:relative;display:grid;align-items:center}
.comparison-grid{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;position:relative;isolation:isolate;margin:auto}
.full-comparison .comparison-card{position:relative;margin:0;min-width:0;background:transparent;border:0;box-shadow:none;transform-origin:center;backface-visibility:hidden}
.full-comparison .comparison-card figcaption{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 0;padding:0 16px;min-height:61px;background:transparent}
.comparison-card figcaption>div{min-width:0}
.full-comparison .comparison-card figcaption strong{display:block;font-size:21px;line-height:1.15}
.full-comparison .comparison-card figcaption span{display:block;font-size:11px;margin-top:5px;line-height:1.4}
/* A slim laptop, with real references kept intact inside the screen. */
.comparison-laptop{position:relative;width:100%;padding-bottom:3px}
.comparison-laptop-display{position:relative;width:calc(100% - 32px);margin:0 auto;padding:12px 6px 8px;border:1px solid #a9abad;border-radius:14px 14px 3px 3px;background:#1b1c1e;box-shadow:inset 0 0 0 1px #353638}
.comparison-laptop-display:before{content:'';position:absolute;top:4px;left:50%;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:#08090a;box-shadow:0 0 0 1px #2c2e31;pointer-events:none}
.comparison-laptop-base{position:relative;display:block;width:100%;height:11px;margin-top:-1px;border:1px solid #c5c7c9;border-top-color:#e4e5e6;border-bottom-color:#a8aaad;border-radius:1px 1px 38% 38% / 1px 1px 65% 65%;background:linear-gradient(#f4f5f5 0%,#e3e4e6 35%,#bfc1c4 75%,#9d9fa3 100%);box-shadow:0 3px 3px -2px #00000026}
.comparison-laptop-base:before{content:'';position:absolute;top:-1px;left:42%;width:16%;height:5px;border-radius:0 0 8px 8px;background:linear-gradient(#9da0a4,#d9dbdd);border-bottom:1px solid #f5f5f6}
.comparison-card .viewport-frame{box-shadow:none;background:#fff;border-radius:3px;isolation:isolate}
.comparison-card .viewport-frame>img{object-fit:contain}
.comparison-card .scaled-preview{container-type:inline-size}
@supports(transform:scale(calc(100cqw / 1152px))){.comparison-card .scaled-preview iframe{transform:scale(calc(100cqw / 1152px))}}
.comparison-card-link{display:block;position:relative;background:#fff}
.comparison-card-link:focus-visible{outline-offset:-4px;outline-width:3px;z-index:7}
.comparison-view{flex-shrink:0;font-size:10px;text-transform:uppercase;letter-spacing:.08em;min-height:36px;display:inline-flex;align-items:center;gap:8px}
.comparison-view:after{content:'↗';font-size:17px}
.comparison-view:hover{text-decoration:underline;text-underline-offset:4px}
.comparison-card[data-comparison-front]{z-index:5}
.comparison-card[data-comparison-layer="1"]{z-index:4}
.comparison-card[data-comparison-layer="2"]{z-index:3}
.comparison-card[data-comparison-layer="3"]{z-index:2}
.comparison-scene--pair .comparison-card--current{grid-column:2;grid-row:1}
.comparison-scene--pair .comparison-card--proposed{grid-column:1;grid-row:1}
.comparison-note{margin:26px auto 0;max-width:1500px}
.section-comparison-intro{max-width:800px;margin:95px 0 34px}
.section-comparison-intro .eyebrow{margin-bottom:17px}
.section-comparison-intro h3{font-size:clamp(35px,4vw,57px);line-height:1.12;margin:0 0 20px}
.section-comparison-intro>p:last-child{max-width:640px;margin:0;font-size:16px;line-height:1.65}
.comparison-scene.is-enhanced{height:var(--comparison-track-height)}
.is-enhanced .comparison-sticky{position:sticky;top:24px}
.is-enhanced .comparison-canvas{height:var(--comparison-canvas-height)}
.is-enhanced .comparison-grid{max-width:var(--comparison-grid-width)}
.is-enhanced .comparison-card{will-change:transform}
.is-enhanced .comparison-card:not([data-comparison-front]) figcaption{opacity:var(--comparison-caption-opacity,0)}
/* The four moving cards must finish separating before any label appears.
   Opacity preserves accessible names; keyboard focus already settles the grid.
   Fade in only at rest. Reverse scrolling hides labels immediately. */
.comparison-scene--four.is-enhanced .comparison-card figcaption{opacity:0;pointer-events:none;transition:none}
.comparison-scene--four.is-enhanced.is-settled .comparison-card figcaption{opacity:1;pointer-events:auto;transition:opacity .18s ease-out}
.is-enhanced.is-settled .comparison-card{will-change:auto}
.comparison-image-dialog{background:#fff;color:var(--ink);width:min(96vw,1700px);max-width:1700px;max-height:94svh;padding:0;border:0;overflow:auto}
.comparison-image-dialog .comparison-dialog-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:20px;justify-content:space-between;background:#fff;padding:16px 70px 16px 24px;border-bottom:1px solid #caced1}
.comparison-image-dialog h2{font-size:23px;line-height:1.2;margin:0;letter-spacing:-.02em}
.comparison-image-dialog .comparison-original-link{font-size:12px;white-space:nowrap;text-decoration:underline;text-underline-offset:4px}
.comparison-image-dialog .close-dialog{position:absolute;background:#fff;color:var(--ink);top:10px;right:12px}
.comparison-image-dialog img{width:100%;height:auto;max-width:none;background:#fff}
.comparison-image-dialog::backdrop{background:#071a22cc}
@media(max-width:1100px){.full-comparison .comparison-card figcaption{padding:0 16px;min-height:61px}.full-comparison .comparison-card figcaption strong{font-size:18px}.comparison-view{font-size:9px;letter-spacing:.03em}.comparison-grid{gap:24px}}
@media(max-width:799px){
 .comparison-grid{grid-template-columns:1fr;gap:38px}
 .comparison-scene--pair .comparison-card--current,.comparison-scene--pair .comparison-card--proposed{grid-column:auto;grid-row:auto}
 .full-comparison .comparison-card figcaption{min-height:62px;padding:0 10px;margin-top:14px}
 .full-comparison .comparison-card figcaption strong{font-size:21px}
 .comparison-view{font-size:10px;min-height:44px}
 .comparison-laptop-display{width:calc(100% - 20px);padding:9px 4px 6px;border-radius:10px 10px 2px 2px}
 .comparison-laptop-display:before{top:3px;width:2px;height:2px;margin-left:-1px}
 .comparison-laptop-base{height:8px}
 .comparison-laptop-base:before{height:4px}
 .section-comparison-intro{margin-top:72px}
 .comparison-scene-head{margin-bottom:20px;gap:12px}
 .comparison-scene-head p{font-size:10px;letter-spacing:.09em}
 .comparison-image-dialog .comparison-dialog-bar{padding:17px 60px 17px 16px;display:block}
 .comparison-image-dialog h2{font-size:21px;margin-bottom:5px}
 .comparison-image-dialog .comparison-original-link{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
 .comparison-scene.is-enhanced{height:auto!important}
 .is-enhanced .comparison-sticky{position:static}
 .is-enhanced .comparison-canvas{height:auto!important}
 .is-enhanced .comparison-grid{max-width:none!important}
 .is-enhanced .comparison-card{transform:none!important;will-change:auto}
 .comparison-controls{display:none}
}

.section-comparison-intro{max-width:940px}
.section-comparison-intro>p:not(.eyebrow){max-width:850px;font-size:16px;line-height:1.75;margin:0 0 18px}
.section-comparison-intro>.comparison-explainer{font-size:14px;color:#636b74;max-width:760px}
.comparison-scroll-guide{display:none;margin-top:9px}
.section-comparison-intro:has(+.comparison-scene.is-enhanced) .comparison-scroll-guide{display:block}
@media(max-width:799px){.section-comparison-intro>p:not(.eyebrow){font-size:15px}}

/* A shared, shallow keyboard deck. Screen geometry stays flat and untouched. */
main .comparison-laptop > .comparison-laptop-base{
 height:clamp(18px,2.1vw,32px);margin-top:-1px;
 border:1px solid #b7bcc2;border-top-color:#dce0e4;
 border-radius:1px 1px 8px 8px;
 background:linear-gradient(180deg,#c4c9cf 0%,#e2e5e9 12%,#e9ecef 78%,#c5cbd1 82%,#a4acb5 94%,#cbd0d5 100%);
 clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 82%,99.5% 96%,98% 100%,2% 100%,.5% 96%,0 82%);
 box-shadow:none;pointer-events:none;
}
main .comparison-laptop > .comparison-laptop-base::before{
 content:'';position:absolute;top:12%;left:20%;width:60%;height:39%;margin:0;
 border:1px solid #a6adb5;border-radius:2px;
 background:repeating-linear-gradient(90deg,transparent 0,transparent calc(6.25% - 1px),#c4cbd3 calc(6.25% - 1px),#c4cbd3 6.25%),repeating-linear-gradient(180deg,#555f6a 0,#555f6a calc(33.333% - 1px),#bac2cb calc(33.333% - 1px),#bac2cb 33.333%);
 transform:perspective(180px) rotateX(24deg);transform-origin:center top;
 opacity:.78;box-shadow:0 1px 0 #ffffff80;
}
main .comparison-laptop > .comparison-laptop-base::after{
 content:'';position:absolute;top:59%;left:43%;width:14%;height:17%;
 border:1px solid #adb6bf;border-radius:2px;background:#dce1e6;
 box-shadow:0 1px 0 #ffffff80;
}