/* MG PRO 2.4 — interactive cinematic before/after comparison */
.compare-section{padding:37px 0 17px;position:relative;isolation:isolate;scroll-margin-top:84px}
.compare-section::before{content:"";position:absolute;z-index:-1;inset:15% -8%;background:radial-gradient(ellipse at center,rgba(152,63,248,.20),transparent 67%);pointer-events:none}
.compare-intro{text-align:center;margin:0 auto 26px;max-width:850px}
.compare-kicker{color:#d0a2ff;font-weight:850;font-size:13px;letter-spacing:.35px;display:flex;align-items:center;justify-content:center;gap:11px}
.compare-spark{color:#ffbdfa;text-shadow:0 0 12px #f17bfd;display:inline-block;animation:compare-twinkle 3s ease-in-out infinite}
.compare-spark:last-child{animation-delay:1.5s}
.compare-intro h2{font-weight:950;line-height:1.2;letter-spacing:-.9px;font-size:clamp(27px,3.5vw,44px);margin:6px 0 6px;color:#fff}
.compare-intro h2 em{font-style:normal;background:linear-gradient(125deg,#f9c8ff,#be66fa,#80eaf7);background-clip:text;-webkit-background-clip:text;color:transparent}
.compare-intro p{color:#cebae7;font-size:14px;margin:9px auto 0;max-width:650px}
.comparison-shell{padding:12px;border-radius:27px;max-width:1040px;margin:0 auto;overflow:hidden;border-color:rgba(198,106,250,.6);box-shadow:0 0 0 1px rgba(153,67,255,.13),0 20px 75px #3c087377,0 0 40px #a544ee2b;background:linear-gradient(125deg,rgba(117,48,173,.48),rgba(12,7,36,.92))}
.comparison-topbar{display:flex;align-items:center;gap:10px;padding:2px 10px 11px;font-size:12px;color:#dec9ed;direction:ltr}
.comparison-topbar b{font-size:15px;font-style:italic;color:#fff;letter-spacing:.2px}
.comparison-live-dot{width:8px;height:8px;border-radius:50%;background:#67f3e0;box-shadow:0 0 13px #2be4df;display:inline-block;animation:compare-twinkle 2.4s infinite}
.comparison-top-caption{margin-inline-start:8px}
.comparison-top-deco{margin-left:auto;color:#986ec0;letter-spacing:4px;font-size:8px}
.comparison-stage{--split:50%;position:relative;aspect-ratio:16/9;touch-action:pan-y;cursor:ew-resize;overflow:hidden;background:#13041d;border-radius:17px;user-select:none;box-shadow:inset 0 0 0 1px #c67aff60}
.comparison-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.comparison-before-mask{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--split)) 0 0);pointer-events:none;overflow:hidden}
.comparison-before{filter:brightness(.87)}
.comparison-stage::before{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;box-shadow:inset 0 0 65px rgba(18,2,38,.38);border-radius:17px}
.comparison-label{position:absolute;z-index:4;top:18px;display:inline-flex;align-items:center;gap:9px;padding:8px 15px;background:rgba(13,4,34,.80);border:1px solid rgba(255,255,255,.27);border-radius:14px;color:white;font-weight:900;font-size:14px;pointer-events:none;box-shadow:0 8px 28px rgba(0,0,0,.22);backdrop-filter:blur(10px)}
.comparison-label small{font-size:11px;font-weight:600;color:#ded0f1}
.comparison-label-before{left:18px}.comparison-label-after{right:18px;border-color:rgba(116,255,226,.46)}
.comparison-label-after:before{content:"";background:#65f6dd;width:6px;height:6px;border-radius:50%;box-shadow:0 0 11px #64ffe6}
.comparison-divider{pointer-events:none;position:absolute;z-index:5;left:var(--split);top:0;height:100%;width:2px;background:#fff;box-shadow:0 0 8px #fff,0 0 18px #d354ff;transform:translateX(-50%)}
.comparison-grip{display:flex;align-items:center;justify-content:center;gap:7px;border:3px solid #fff;border-radius:50%;width:64px;height:64px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(145deg,#b05eff,#6128c0);box-shadow:0 4px 35px rgba(177,64,255,.9),inset 0 2px 5px #ebbbff;color:#fff;font-size:30px;font-weight:800;line-height:1;direction:ltr;animation:compare-float 4s ease-in-out infinite}
.comparison-range{position:absolute;z-index:8;inset:0;height:100%;width:100%;margin:0;opacity:0;cursor:ew-resize;appearance:none;-webkit-appearance:none;touch-action:pan-y}
.comparison-range:focus-visible{opacity:.001;outline:3px solid #a7ffea;outline-offset:-5px}
.comparison-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 8px 4px}
.comparison-hint{display:flex;align-items:center;gap:9px;font-size:13px;color:#fff}
.comparison-hand{display:grid;place-items:center;font-size:28px;background:#6b2bb172;border:1px solid #b579fa60;width:36px;height:36px;border-radius:50%;color:#f4cfff;line-height:1}
.comparison-hint small{color:#bda4d2;font-size:11px}
.comparison-play{background:rgba(117,55,188,.25);border:1px solid #ad74f66d;border-radius:13px;color:#f5e6ff;padding:8px 16px;display:flex;gap:10px;align-items:center;font-size:12px;transition:background .2s}
.comparison-play:hover{background:rgba(150,75,225,.5)}
.comparison-disclosure{text-align:center;font-size:11px;color:#ae9abb;margin:11px auto 0;max-width:950px}
@keyframes compare-float{0%,100%{box-shadow:0 4px 25px #9a31eccc, inset 0 2px 5px #ebbbff}50%{box-shadow:0 4px 42px #d55cffff,inset 0 2px 5px #ebbbff}}
@keyframes compare-twinkle{0%,100%{opacity:.7;transform:scale(.9)}50%{opacity:1;transform:scale(1.2)}}
@media(max-width:780px){.compare-section{padding-top:30px}.comparison-shell{padding:7px;border-radius:20px}.comparison-stage{border-radius:13px}.comparison-topbar{padding:5px 9px 9px}.comparison-label{top:10px;padding:5px 9px;font-size:12px;gap:5px;border-radius:9px}.comparison-label small{display:none}.comparison-label-before{left:9px}.comparison-label-after{right:9px}.comparison-grip{width:51px;height:51px;font-size:26px}.comparison-footer{padding:10px 5px 4px;gap:6px}.comparison-hint{font-size:11px}.comparison-hint small{display:none}.comparison-play{padding:7px 10px;font-size:11px}.comparison-disclosure{font-size:10px;line-height:1.8}}
@media(max-width:450px){.comparison-grip{width:43px;height:43px;font-size:22px;gap:4px}.comparison-intro p{font-size:12px}.compare-kicker{font-size:11px}.comparison-hint{gap:5px}.comparison-hand{width:28px;height:28px;font-size:20px}.comparison-top-caption{font-size:10px}}
@media(prefers-reduced-motion:reduce){.compare-spark,.comparison-grip,.comparison-live-dot{animation:none!important}}

/* Real user-supplied 44–58s clip, centered inside a 9:16 phone mockup */
.phone-comparison-shell{max-width:510px;padding:15px 20px 13px;display:flex;flex-direction:column;align-items:center}
.phone-comparison-shell .comparison-topbar{width:100%;justify-content:center;margin-bottom:8px}
.phone-comparison-shell .comparison-top-deco{display:none}
.phone-frame{position:relative;margin:auto;width:min(100%,316px);aspect-ratio:9/19.4;border-radius:46px;padding:12px 10px;background:linear-gradient(135deg,#98929f 0%,#17101f 13%,#09030f 40%,#7a4d96 76%,#11081b 100%);box-shadow:0 0 0 2px #dcb7ff75,0 5px 14px 2px #c45bff47,0 28px 75px #030008d0,inset 0 0 0 2px #ffffff4c}
.phone-frame:before{content:"";position:absolute;top:25%;left:-4px;width:4px;height:75px;border-radius:4px 0 0 4px;background:linear-gradient(#cf91fa,#43275f)}
.phone-frame:after{content:"";position:absolute;top:29%;right:-4px;width:4px;height:49px;border-radius:0 4px 4px 0;background:linear-gradient(#b85aee,#503568)}
.phone-island{position:absolute;z-index:11;top:17px;left:50%;transform:translateX(-50%);width:92px;height:24px;border-radius:25px;background:#09050a;border:1px solid #2a2534;box-shadow:inset 0 2px 5px #0009;pointer-events:none}
.phone-comparison-shell .comparison-stage{width:100%;height:100%;aspect-ratio:auto;border-radius:36px;overflow:hidden;background:#010101;box-shadow:inset 0 0 0 1px #fff2}
.phone-comparison-shell .comparison-video{object-fit:cover}
.phone-comparison-shell .comparison-label{top:52px;font-size:12px;padding:5px 9px;gap:4px}
.phone-comparison-shell .comparison-label small{font-size:9px}
.phone-comparison-shell .comparison-label-before{left:9px}.phone-comparison-shell .comparison-label-after{right:9px}
.phone-comparison-shell .comparison-grip{width:51px;height:51px;font-size:24px}
.phone-comparison-shell .comparison-footer{width:100%;margin-top:12px}
.comparison-range{touch-action:none!important}
.phone-comparison-shell .comparison-range:focus-visible{opacity:.015}
.compare-intro{max-width:620px}
@media(max-width:530px){.phone-comparison-shell{padding:12px 8px}.phone-frame{width:min(84vw,312px)}.phone-comparison-shell .comparison-label small{display:none}.phone-comparison-shell .comparison-footer{width:97%}}
@media(prefers-reduced-motion:reduce){.phone-comparison-shell .comparison-grip{animation:none}}