.development-comparison { margin: 2.5rem 0 3rem; }
.development-comparison > p { max-width: 48rem; }
.development-comparison figure { margin: 1.5rem 0 0; overflow: hidden; border: 1px solid #b6c9bb; border-radius: 16px; background: #123b30; }
.comparison-stage { --reveal: 50%; position: relative; isolation: isolate; aspect-ratio: 4 / 3; overflow: hidden; touch-action: pan-y; }
.comparison-stage img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; pointer-events: none; }
.comparison-stage .comparison-future { clip-path: inset(0 calc(100% - var(--reveal)) 0 0); }
.comparison-divider { position: absolute; inset: 0 auto 0 var(--reveal); width: 2px; transform: translateX(-50%); background: #fff; box-shadow: 0 0 5px #163c3277; pointer-events: none; }
.comparison-divider span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid #fff; border-radius: 50%; color: #163c32; background: #f7fbf4; box-shadow: 0 3px 15px #123b3040; font-size: 26px; }
.comparison-badge { position: absolute; top: 1rem; padding: .4rem .7rem; border-radius: 5px; background: #10382fe8; color: #fff; font: 600 .875rem/1.4 Arial, sans-serif; pointer-events: none; }
.comparison-badge-future { left: 1rem; }
.comparison-badge-before { right: 1rem; }
.comparison-stage[data-position="before"] .comparison-badge-future,
.comparison-stage[data-position="future"] .comparison-badge-before { visibility: hidden; }
.comparison-controls { padding: 1.2rem 1.4rem; color: #eff6ef; }
.comparison-controls label { display: block; margin-bottom: .35rem; font-size: 1rem; }
.comparison-controls input { display: block; width: 100%; height: 32px; margin: 0; accent-color: #d4b777; cursor: ew-resize; }
.comparison-controls input:focus-visible { outline: 2px solid #f5d89c; outline-offset: 4px; border-radius: 4px; }
.comparison-endpoints { display: flex; justify-content: space-between; gap: 1rem; margin-top: .3rem; }
.comparison-endpoints button { border: 1px solid #7d9e89; border-radius: 6px; padding: .55rem .8rem; background: transparent; color: inherit; font: inherit; font-size: .875rem; min-height: 44px; cursor: pointer; }
.comparison-endpoints button:hover { background: #2b5143; }
.comparison-endpoints button:focus-visible { outline: 2px solid #f5d89c; outline-offset: 3px; }
.development-comparison figcaption { padding: 1rem 1.4rem; border-top: 1px solid #42604c; color: #d7e4d9; font-size: .875rem; line-height: 1.6; }
.development-comparison:not([data-ready]) .comparison-controls { display: none; }
.development-comparison[data-ready] .comparison-stage { cursor: ew-resize; }
@media (max-width: 600px) { .comparison-badge { top: .6rem; font-size: .75rem; max-width: 40%; } .comparison-badge-future { left: .6rem; } .comparison-badge-before { right: .6rem; } .comparison-controls { padding: 1rem; } }