.lighting-comparison-section { padding: 12px 0 64px; }
.lighting-comparison-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.lighting-comparison-heading h2 { margin:0; font-size:clamp(2rem,3.8vw,3.2rem); line-height:1.12; letter-spacing:-.03em; }
.lighting-comparison-heading h2 span { color:var(--blue,#5363ff); }
.lighting-comparison-heading>p { max-width:280px; margin:0 0 4px; font-size:1rem; line-height:1.6; color:#596172; }
.lighting-comparison { margin:0; }
.lighting-comparison-stage { --reveal:50%; position:relative; aspect-ratio:3/2; overflow:hidden; border-radius:20px; background:#10131a; isolation:isolate; }
.lighting-comparison-stage>img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; user-select:none; }
.lighting-comparison-stage.is-ready .lighting-before { clip-path:inset(0 calc(100% - var(--reveal)) 0 0); }
.lighting-comparison-label { position:absolute; top:20px; z-index:2; padding:9px 14px; border-radius:999px; background:rgba(10,12,16,.82); color:#fff; font-size:.875rem; font-weight:700; line-height:1.3; pointer-events:none; }
.lighting-comparison-label-before { left:20px; }
.lighting-comparison-label-after { right:20px; }
.lighting-comparison-divider { display:none; position:absolute; z-index:3; inset-block:0; left:var(--reveal); width:2px; background:#fff; transform:translateX(-50%); box-shadow:0 0 8px #0004; pointer-events:none; }
.lighting-comparison-handle { position:absolute; top:50%; left:50%; display:flex; align-items:center; justify-content:center; gap:7px; width:48px; height:48px; transform:translate(-50%,-50%); border:2px solid #fff; border-radius:50%; background:#10131a; color:#fff; box-shadow:0 4px 20px #0004; }
.lighting-comparison-handle svg { width:30px; height:20px; }
.lighting-comparison-range { display:none; position:absolute; z-index:4; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; touch-action:pan-y; }
.lighting-comparison-stage.is-ready .lighting-comparison-range,.lighting-comparison-stage.is-ready .lighting-comparison-divider { display:block; }
.lighting-comparison-stage:focus-within { outline:3px solid var(--blue,#5363ff); outline-offset:5px; }
.lighting-comparison-stage:focus-within .lighting-comparison-handle { background:var(--blue,#5363ff); }
.lighting-comparison-stage:not(.is-ready) .lighting-comparison-label-after { display:none; }
.lighting-comparison-caption { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:16px 30px; padding-top:18px; }
.lighting-comparison-details { display:flex; flex-wrap:wrap; gap:12px 28px; }
.lighting-comparison-details p { margin:0; color:#596172; font-size:.875rem; line-height:1.6; }
.lighting-comparison-details strong { display:block; color:var(--ink,#10131a); font-size:.9375rem; }
.lighting-comparison-caption>p { margin:0; color:#596172; font-size:.875rem; line-height:1.6; }
.lighting-comparison-caption>p span { display:block; }
.lighting-comparison-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media(max-width:620px) {
  .lighting-comparison-section { padding-bottom:44px; }
  .lighting-comparison-heading { display:block; margin-bottom:20px; }
  .lighting-comparison-heading>p { max-width:none; margin:12px 0 0; }
  .lighting-comparison-stage { border-radius:12px; }
  .lighting-comparison-label { top:12px; padding:7px 11px; }
  .lighting-comparison-label-before { left:12px; }
  .lighting-comparison-label-after { right:12px; }
  .lighting-comparison-handle { width:44px; height:44px; }
  .lighting-comparison-caption { gap:14px; }
  .lighting-comparison-details { display:grid; grid-template-columns:1fr 1fr; width:100%; gap:16px; }
}


.lighting-teaser .lighting-comparison { min-width:0; }
.lighting-teaser .lighting-comparison-caption {display:block;}
.lighting-teaser .lighting-comparison-caption p {margin:10px 0 0;font-size:.875rem;line-height:1.5;color:#c9cddd;}
.lighting-teaser .lighting-comparison-caption span {color:#c9cddd;}
.lighting-teaser .lighting-comparison-hint {margin:0 0 12px;font-size:1rem;color:#fff;}

.lighting-teaser .lighting-comparison-details strong {color:#fff;}