.explainer-section{background:#F5F5F7;padding:clamp(80px,9vw,136px) 0;scroll-margin-top:85px;overflow:hidden}
.explainer-grid{display:grid;grid-template-columns:.82fr 1.65fr;gap:clamp(40px,5vw,76px);align-items:center}
.explainer-copy{padding-bottom:58px}
.explainer-label{font:500 11px/1.5 var(--ff-b);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 25px}
.explainer-copy h2{font:800 clamp(36px,4vw,58px)/1.04 var(--ff-h);letter-spacing:-.035em;margin:0 0 25px;color:var(--text)}
.explainer-copy h2>span{display:inline}
.explainer-intro{font:400 14px/1.85 var(--ff-b);color:#626275;max-width:34ch;margin:0 0 25px}
.explainer-text-play{border:0;border-bottom:1px solid var(--accent);padding:8px 0;background:none;color:var(--text);font:500 13px/1.6 var(--ff-b);display:inline-flex;gap:30px;align-items:center;cursor:pointer}
.explainer-text-play span{color:var(--accent);font-size:22px;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.explainer-text-play:hover span{transform:translate(3px,-3px)}
.explainer-frame{position:relative;isolation:isolate;aspect-ratio:16/9;background:white;box-shadow:0 18px 60px -30px rgba(26,26,46,.16)}
.explainer-frame video{display:block;width:100%;height:100%;object-fit:contain;background:white}
.explainer-cover{position:absolute;z-index:2;left:20px;bottom:20px;display:flex;align-items:center;gap:14px;border:0;background:var(--accent);color:white;padding:0 20px 0 0;font:500 12px/1.4 var(--ff-b);cursor:pointer;transition:background .3s,opacity .3s,transform .4s cubic-bezier(.16,1,.3,1)}
.explainer-cover:hover{background:#4648dc;transform:translateY(-3px)}
.explainer-play-icon{width:48px;height:48px;display:grid;place-items:center;border-right:1px solid rgba(255,255,255,.25);font-size:14px}
.explainer-duration{margin-left:18px;opacity:.75;font-size:11px}
.explainer-frame.is-playing .explainer-cover{opacity:0;pointer-events:none;visibility:hidden}
.explainer-corner{position:absolute;pointer-events:none;z-index:3;width:33%;height:33%;--weight:clamp(5px,1.05vw,13px)}
.explainer-tr{top:calc(-1 * var(--weight));right:calc(-1 * var(--weight))}
.explainer-bl{bottom:calc(-1 * var(--weight));left:calc(-1 * var(--weight))}
.explainer-corner i,.explainer-corner b{display:block;position:absolute;background:var(--accent)}
.explainer-corner i{height:var(--weight);width:100%}
.explainer-corner b{width:var(--weight);height:100%}
.explainer-tr i{top:0;right:0;transform-origin:right}.explainer-tr b{right:0;top:0;transform-origin:top}
.explainer-bl i{bottom:0;left:0;transform-origin:left}.explainer-bl b{left:0;bottom:0;transform-origin:bottom}
.explainer-chapters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:35px}
.explainer-chapters button{background:none;border:0;padding:0;text-align:left;cursor:pointer;color:var(--text);min-height:66px;position:relative}
.explainer-chapter-meta{display:flex;justify-content:space-between;font:400 10px/1.5 var(--ff-b);color:#737386;margin-bottom:8px}
.explainer-chapter-meta time{font-variant-numeric:tabular-nums}
.explainer-chapter-title{display:flex;justify-content:space-between;font:700 clamp(13px,1.45vw,18px)/1.3 var(--ff-h)}
.explainer-chapter-title>span{color:var(--accent);opacity:0;transform:translate(-3px,3px);transition:opacity .25s,transform .35s}
.explainer-chapters button:hover .explainer-chapter-title>span,.explainer-chapters button:focus-visible .explainer-chapter-title>span{opacity:1;transform:none}
.explainer-track{display:block;height:2px;background:#dedee7;margin-top:14px;overflow:hidden}.explainer-track i{display:block;height:100%;background:var(--accent);transform:scaleX(var(--progress,0));transform-origin:left}
.explainer-chapters button[aria-current=true] .explainer-chapter-title{color:var(--accent)}
.explainer-status:empty{display:none}.explainer-status{font:400 12px/1.6 var(--ff-b);margin-top:16px}
.explainer-transcript{margin-top:23px;font:400 12px/1.8 var(--ff-b);color:#626275}.explainer-transcript summary{cursor:pointer;width:fit-content}.explainer-transcript div{padding-top:16px;max-width:64ch}.explainer-transcript p+p{margin-top:12px}
.explainer-section button:focus-visible,.explainer-section summary:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.explainer-section.is-entering .explainer-copy>*{animation:explainer-rise .95s cubic-bezier(.16,1,.3,1) both}
.explainer-section.is-entering .explainer-copy h2{animation-delay:.09s}.explainer-section.is-entering .explainer-intro{animation-delay:.17s}.explainer-section.is-entering .explainer-text-play{animation-delay:.25s}
.explainer-section.is-entering .explainer-film{animation:explainer-rise 1.1s .12s cubic-bezier(.16,1,.3,1) both}
.explainer-section.is-entering .explainer-corner i{animation:explainer-arm-x 1.15s .3s cubic-bezier(.16,1,.3,1) both}.explainer-section.is-entering .explainer-corner b{animation:explainer-arm-y 1.15s .45s cubic-bezier(.16,1,.3,1) both}
@keyframes explainer-rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes explainer-arm-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes explainer-arm-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media(max-width:800px){.explainer-grid{grid-template-columns:1fr;gap:42px}.explainer-copy{padding-bottom:0;max-width:520px}.explainer-copy h2{max-width:14ch;font-size:clamp(38px,7vw,54px)}.explainer-intro{max-width:44ch}.explainer-corner{--weight:8px}.explainer-cover{left:12px;bottom:12px}.explainer-chapters{gap:16px;margin-top:28px}.explainer-chapter-title{font-size:16px}.explainer-duration{margin-left:12px}}
@media(max-width:400px){.explainer-play-icon{height:40px;width:40px}.explainer-cover{font-size:11px}.explainer-chapter-title{font-size:14px}.explainer-chapters{gap:12px}}
@media(prefers-reduced-motion:reduce){.explainer-section *{animation:none!important;transition:none!important}}
