/* Always visible, with thumb-sized controls on the existing before/after pair */
.hero-video-controls{position:absolute;z-index:5;left:8px;right:8px;bottom:8px;display:flex;justify-content:space-between;gap:8px;pointer-events:none}
.hero-video-control{appearance:none;display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-width:44px;padding:10px;border:1px solid #d7e0fa;border-radius:50%;background:#fffffff2;color:#111527;box-shadow:0 2px 8px #11152726;pointer-events:auto;cursor:pointer;touch-action:manipulation}
.hero-video-control svg{display:block;width:22px;height:22px}
.hero-video-control:hover,.hero-video-control[aria-pressed="true"]{color:#144cff;background:#fff}
.hero-video-control:focus-visible{outline:3px solid #144cff;outline-offset:3px}
.hero-video-control .play-symbol,.hero-video-control .sound-symbol{display:none}
.hero-video-control[data-paused="true"] .play-symbol,.hero-video-control[aria-pressed="true"] .sound-symbol{display:block}
.hero-video-control[data-paused="true"] .pause-symbol,.hero-video-control[aria-pressed="true"] .muted-symbol{display:none}

/* The visible face moves; its 44px hit target stays still under the thumb. */
[data-pair-sound]{position:relative;isolation:isolate;overflow:visible}
[data-pair-sound]::before,[data-pair-sound]::after{content:"";position:absolute;pointer-events:none;border-radius:50%;opacity:0}
[data-pair-sound]::before{inset:-1px;z-index:-1;background:linear-gradient(125deg,#144cff,#6243ff,#0878dc,#144cff);background-size:280% 280%}
[data-pair-sound]::after{inset:-9px;z-index:-2;background:conic-gradient(from 40deg,#144cff,#ab63ff,#56ccff,#144cff);filter:blur(9px)}
[data-pair-sound][data-sound-nudge="true"]{color:#fff!important;border-color:transparent;background:transparent;box-shadow:none}
[data-pair-sound][data-sound-nudge="true"]::before{opacity:1;animation:sound-face-shake 1.6s ease-in-out infinite,sound-fill-flow 3.4s ease-in-out infinite}
[data-pair-sound][data-sound-nudge="true"]::after{opacity:.7;animation:sound-glow-flow 2.8s ease-in-out infinite}
[data-pair-sound][data-sound-nudge="true"] svg{animation:sound-face-shake 1.6s ease-in-out infinite}
[data-pair-sound][data-sound-visible="false"]::before,[data-pair-sound][data-sound-visible="false"]::after,[data-pair-sound][data-sound-visible="false"] svg{animation-play-state:paused}
[data-pair-sound]:focus-visible{outline-color:#144cff;outline-offset:8px}
@keyframes sound-face-shake{
 0%{transform:translate(-2px,-1px) rotate(-8deg) scale(1.04)}
 8%{transform:translate(3px,0) rotate(10deg) scale(1.08)}
 17%{transform:translate(-3px,-2px) rotate(-10deg) scale(1.04)}
 26%{transform:translate(2px,1px) rotate(8deg) scale(1.08)}
 36%{transform:translate(-1px,-1px) rotate(-5deg) scale(1.03)}
 48%,72%{transform:translate(0,0) rotate(0) scale(1)}
 86%{transform:translate(0,-2px) rotate(-3deg) scale(1.06)}
 100%{transform:translate(-2px,-1px) rotate(-8deg) scale(1.04)}
}
@keyframes sound-fill-flow{0%,100%{background-position:0% 30%}50%{background-position:100% 70%}}
@keyframes sound-glow-flow{0%,100%{transform:rotate(0deg) scale(.94);opacity:.55}50%{transform:rotate(160deg) scale(1.18);opacity:.85}}
@media(prefers-reduced-motion:reduce){
 [data-pair-sound][data-sound-nudge="true"]::before,[data-pair-sound][data-sound-nudge="true"]::after,[data-pair-sound][data-sound-nudge="true"] svg{animation:none;transform:none}
 [data-pair-sound][data-sound-nudge="true"]::after{opacity:.55}
}

/* One decoded frame contains both cards; the cut-out reveals the page grid. */
.hero .pair.hero-composite{display:block;padding-bottom:0}
.hero-pair-labels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6.25%;font-size:13px;font-weight:700;text-align:center;line-height:1;margin-bottom:10px}
.hero-pair-picture{position:relative;width:100%;aspect-ratio:6/5}
.hero-pair-media{position:relative;width:100%;height:100%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1280'%3E%3Crect width='720' height='1280' rx='54' fill='white'/%3E%3Crect x='816' width='720' height='1280' rx='54' fill='white'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1280'%3E%3Crect width='720' height='1280' rx='54' fill='white'/%3E%3Crect x='816' width='720' height='1280' rx='54' fill='white'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.hero-pair-picture video{display:block;width:100%;height:100%;object-fit:fill}
/* A separate image survives denied autoplay, buffering and native poster quirks. */
.hero-pair-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:1;pointer-events:none}
[data-sync-pair][data-frame-ready="true"] .hero-pair-poster{visibility:hidden}
.hero-pair-picture .before-after-arrow{top:50%}
@media(max-width:700px){.hero-pair-labels{font-size:9px;line-height:12px;margin-bottom:7px}}