/* Native scroll drives the panel; the video itself plays normally, without seeking. */
.product-explanations{position:relative}.explanation-intro{padding-bottom:56px}.explanation-intro>p:not(.eyebrow){margin-top:32px;color:var(--muted)}.explanation-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.explanation-links a{font-size:12px;border:1px solid #74ddeb35;border-radius:30px;padding:10px 20px;background:#111a20}.explanation-links a:hover{border-color:#74ddeb;color:#74ddeb}
.explanation{position:relative;height:158svh;margin:0 var(--pad);scroll-margin-top:95px}.explanation-stage{height:calc(100svh - 96px);position:sticky;top:96px;max-width:1800px;margin:auto;--video-reveal:1}.explanation-heading{position:absolute;top:2%;left:0;width:100%;pointer-events:none}.explanation-heading h3{font-size:clamp(36px,5.6vw,84px);line-height:1.08;letter-spacing:-.055em;font-weight:500}.explanation-heading .eyebrow{margin-bottom:16px}.explanation-copy{position:absolute;top:31%;left:57%;width:38%;max-width:450px;pointer-events:none}.explanation-copy h4{font-size:21px;line-height:1.3;margin:0 0 16px;font-weight:400}.explanation-copy p{font-size:15px;line-height:1.7;color:var(--muted)}.explanation-duration{display:block;margin-top:26px;font:10px monospace;letter-spacing:.08em;color:#74ddeb}
.explanation-screen{position:absolute;width:min(100%,calc((100svh - 200px)*16/9));aspect-ratio:16/9;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #74ddeb25;border-radius:14px;background:#080c10;overflow:hidden;isolation:isolate;box-shadow:0 20px 70px #0004;will-change:transform}.explanation-screen video{width:100%;height:100%;object-fit:contain;display:block;background:#080c10}.explanation-tint{position:absolute;inset:0;background:#31b5c9;mix-blend-mode:color;opacity:0;pointer-events:none}.explanation-play{position:absolute;inset:0;display:flex;gap:clamp(15px,3vw,40px);justify-content:center;align-items:center;background:linear-gradient(transparent 20%,#050a1044,transparent 80%);text-shadow:0 2px 14px #0008;font-size:clamp(16px,3.5vw,48px);font-weight:400;letter-spacing:-.03em}.play-disc{display:grid;place-items:center;width:clamp(48px,6vw,90px);height:clamp(36px,4vw,60px);border-radius:50px;color:#0a1419;background:#ecf0f1;text-shadow:none;font-size:18px;box-shadow:0 0 35px #74ddeb28;transition:background .2s,transform .2s}.explanation-play:hover .play-disc{background:#74ddeb;transform:scale(1.08)}.explanation-play:focus-visible{outline-offset:-8px;border-radius:inherit}.explanation-foot{position:absolute;left:0;right:0;bottom:2%;display:flex;justify-content:space-between;font:9px monospace;letter-spacing:.12em;color:#8eacb6}.explanation-foot:before{content:'+';position:absolute;top:-26px;left:0;color:#74ddeb}.explanation-foot:after{content:'+';position:absolute;top:-26px;right:0;color:#74ddeb}.explanation-status:empty{display:none}.explanation-status{position:absolute;bottom:9%;left:5%;right:5%;font-size:13px;text-align:center;background:#0a151ddd;padding:12px;pointer-events:none}
.explanation.is-watching .explanation-tint{display:none}.explanation.is-watching .explanation-play{display:none}.explanation.is-watching .explanation-copy,.explanation.is-watching .explanation-heading{opacity:0!important}
@media(max-width:800px){.explanation{height:140svh;margin:0 20px;scroll-margin-top:84px}.explanation-stage{top:84px;height:calc(100svh - 84px)}.explanation-heading{top:3%}.explanation-heading h3{font-size:40px}.explanation-copy{left:0;top:22%;width:100%;max-width:500px}.explanation-copy h4{font-size:17px;margin-bottom:8px}.explanation-copy p{font-size:13px;max-width:38ch}.explanation-duration{margin-top:13px}.explanation-screen{width:100%;top:60%;border-radius:10px}.explanation-foot{font-size:8px;bottom:8%}.explanation-foot span:last-child{max-width:90px;text-align:right}.explanation-play{font-size:16px;gap:18px}.explanation-intro{padding-bottom:36px}}
@media(prefers-reduced-motion:reduce){.explanation{height:auto;margin-bottom:65px}.explanation-stage{position:relative;top:0;height:auto;display:flex;flex-direction:column;gap:25px}.explanation-heading,.explanation-copy,.explanation-screen,.explanation-foot{position:relative;inset:auto;transform:none!important;width:100%;max-width:none}.explanation-copy{opacity:1!important}.explanation-screen{border-radius:12px}.explanation-foot{padding-top:10px}.explanation-screen,.play-disc{will-change:auto;transition:none}}

@media(max-width:800px){.explanation.is-watching .explanation-copy,.explanation.is-watching .explanation-heading{opacity:1!important}}

/* The panel bends on a subdivided mesh during expansion, then becomes native video. */
.video-warp-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.explanation-screen{z-index:2}
.has-video-warp .explanation-screen{background:transparent;border-color:transparent;box-shadow:none;overflow:visible}
.has-video-warp .explanation-screen video,.has-video-warp .explanation-tint{visibility:hidden}
.has-video-warp .explanation-play{background:none}
.explanation-play .play-word{opacity:var(--watch-label,1)}
.explanation-play .play-disc{opacity:var(--watch-disc,1)}
.explanation-play:focus-visible .play-word,.explanation-play:focus-visible .play-disc{opacity:1}
.explanation-intro{padding-top:50px}