.refonte-demo .sec-head { max-width: 750px; }
.refonte-comparison { max-width: 1024px; margin: auto; }
.comparison-stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.comparison-pane { position: relative; min-width: 0; }
.comparison-pane img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; }
.comparison-badge { position: absolute; top: 16px; left: 16px; padding: 6px 13px; border: 1px solid rgba(255,255,255,.24); border-radius: 99px; font-size: .7rem; font-weight: 600; background: #14243a; color: #fff; box-shadow: 0 3px 14px rgba(0,0,0,.15); }
.comparison-divider { display: none; }
.comparison-controls[hidden] { display: none; }
.refonte-comparison.is-enhanced .comparison-stage { display: block; --reveal: 50%; cursor: ew-resize; touch-action: pan-y; user-select: none; }
.is-enhanced .comparison-after .comparison-badge { left: auto; right: 16px; }
.is-enhanced .comparison-before { position: absolute; inset: 0; z-index: 2; clip-path: inset(0 calc(100% - var(--reveal)) 0 0); }
.is-enhanced .comparison-divider { display: block; position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--reveal); width: 2px; background: #f97316; transform: translateX(-50%); pointer-events: none; }
.comparison-divider > span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #f97316; color: #101a2b; border: 3px solid #fff; box-shadow: 0 4px 20px rgba(0,0,0,.2); font-size: 1.3rem; }
.comparison-controls { padding: 22px 26px 18px; margin-top: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); text-align: center; }
.comparison-controls label { display: block; font-family: 'Space Grotesk',sans-serif; font-size: .9rem; color: var(--white); }
.comparison-controls input { display: block; width: 100%; height: 44px; margin: 4px 0; cursor: ew-resize; accent-color: #f97316; }
.comparison-controls input:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
.comparison-controls p { color: var(--slate-400); font-size: .73rem; }
.refonte-comparison figcaption { max-width: 790px; margin: 18px auto 0; font-size: .78rem; color: var(--slate-400); text-align: center; line-height: 1.7; }
.comparison-takeaways { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; max-width: 1024px; margin: 38px auto 0; }
.comparison-takeaways > div { border-top: 1px solid var(--line); padding-top: 20px; }
.comparison-takeaways span { color: var(--accent-text); font-size: .73rem; }
.comparison-takeaways h3 { font-size: 1.05rem; margin: 12px 0 10px; }
.comparison-takeaways p { font-size: .88rem; line-height: 1.8; color: var(--slate-300); }
@media (max-width: 620px) {
 .comparison-stage { grid-template-columns: 1fr; gap: 12px; border-radius: 10px; }
 .comparison-badge { top: 9px; left: 9px; padding: 4px 9px; font-size: .62rem; }
 .is-enhanced .comparison-after .comparison-badge { right: 9px; }
 .comparison-divider > span { width: 34px; height: 34px; font-size: 1rem; }
 .comparison-controls { padding: 18px; }
 .comparison-takeaways { grid-template-columns: 1fr; gap: 22px; }
}