/* Approved Scene hero. These rules are isolated from the rest of the site. */
.hero-section .hero-comparison-heading{display:block;text-align:center;margin-bottom:25px}
.hero-section .hero-comparison-heading h1{font-size:clamp(36px,4.3vw,60px);line-height:1.08;max-width:none;letter-spacing:-.03em}
.hero-section .hero-comparison-heading p{display:block;min-width:0;max-width:none;font-size:17px;line-height:1.45;margin:12px 0 0;color:var(--secondary)}
.audio-comparison{background:#0c1523;color:#fff;border-radius:16px;padding:21px 28px 24px;overflow:hidden;isolation:isolate}
.audio-comparison .comparison-panel-top{display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative;z-index:2}
.audio-comparison .comparison-panel-top>p{font-size:16px;font-weight:500}
.audio-comparison .comparison-order{display:flex;align-items:center;gap:12px;min-height:44px;padding:9px 15px;border:1px solid #536277;border-radius:9px;font-size:14px;line-height:1.4;color:#fff;background:transparent;white-space:nowrap;transition:background .18s,border-color .18s}
.audio-comparison .comparison-order img{filter:brightness(0) invert(1)}
.audio-comparison .comparison-order:hover{background:#19283c;border-color:#98b2a4}
.audio-comparison #comparison-stage{height:clamp(250px,33vh,360px);position:relative;touch-action:pan-y;cursor:ew-resize;isolation:isolate}
.audio-comparison #comparison-stage:focus-visible{outline:3px solid #49c299;outline-offset:-3px;border-radius:10px}
.audio-comparison #wave-canvas{display:block;width:100%;height:100%}
.audio-comparison .wave-handle{position:absolute;left:clamp(26px,var(--split),calc(100% - 26px));top:8px;bottom:8px;width:2px;background:rgba(217,234,240,.55);pointer-events:none;transform:translateX(-50%)}
.audio-comparison .wave-handle>span{position:absolute;left:50%;top:50%;width:52px;height:62px;transform:translate(-50%,-50%);display:grid;place-items:center;background:#182838;border:1px solid #758da3;border-radius:12px}
.audio-comparison .wave-handle img{filter:brightness(0) invert(1)}
.audio-comparison .comparison-controls{display:grid;grid-template-columns:1fr 220px 1fr;grid-template-areas:'before sound after';gap:18px;align-items:stretch;position:relative;z-index:2}
.audio-comparison .mode-button{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 21px;min-height:80px;border:1px solid #5a6e84;border-radius:12px;background:transparent;color:#fff;font-size:20px;font-weight:600;text-align:left;line-height:1.15;transition:color .2s,background .2s,border-color .2s}
.audio-comparison .mode-button small{display:block;font-size:13px;font-weight:400;line-height:1.4;margin-top:6px;color:#c3d0dc}
.audio-comparison .mode-button img{filter:brightness(0) invert(1);opacity:.85;flex:none}
.audio-comparison .mode-before{grid-area:before}
.audio-comparison .mode-after{grid-area:after}
.audio-comparison .mode-before[aria-pressed=true]{background:#078462;border-color:#078462}
.audio-comparison .mode-after[aria-pressed=true]{background:#3159d9;border-color:#3159d9}
.audio-comparison .mode-button[aria-pressed=true] small{color:#fff}
.audio-comparison .mode-button[aria-pressed=true] img{opacity:1}
.audio-comparison .mode-button:hover{border-color:#49c299}
.audio-comparison .mode-before[aria-pressed=true]:hover{background:#08785e}
.audio-comparison .mode-after[aria-pressed=true]:hover{background:#2548b8;border-color:#2548b8}
.audio-comparison .sound-button{grid-area:sound;display:flex;align-items:center;justify-content:center;gap:11px;min-height:80px;padding:12px 16px;border:1px solid #5a6e84;border-radius:12px;background:#182838;color:#fff;font-size:15px;font-weight:500;line-height:1.4;transition:background .2s}
.audio-comparison .sound-button img{filter:brightness(0) invert(1);flex:none}
.audio-comparison .sound-button:hover{background:#25384b}
.audio-comparison .sound-button[aria-pressed=true]{background:#fff;color:var(--ink);border-color:#fff}
.audio-comparison .sound-button[aria-pressed=true] img{filter:none}
.audio-comparison button:focus-visible,.audio-comparison a:focus-visible{outline-color:#49c299;outline-offset:4px}
.audio-comparison #sound-status{max-width:none;font-size:13px;line-height:1.45;color:#d2e4ee;margin-top:14px}
.audio-comparison #sound-status:empty{display:none}
.audio-comparison #sound-status:not([data-notice=true]){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1450px){.audio-comparison #comparison-stage{height:360px}}
@media(max-width:1050px){.audio-comparison .comparison-controls{grid-template-columns:1fr 180px 1fr;gap:12px}.audio-comparison .mode-button{font-size:18px;padding:15px}.audio-comparison .sound-button{font-size:14px;gap:8px}}
@media(max-width:760px){
 .hero-section .hero-comparison-heading{text-align:left;margin-bottom:23px}
 .hero-section .hero-comparison-heading h1{font-size:36px;line-height:1.05;max-width:13em}
 .hero-section .hero-comparison-heading p{font-size:14px;margin-top:12px;max-width:30em}
 .audio-comparison{padding:15px 14px 18px;border-radius:12px}
 .audio-comparison .comparison-panel-top{gap:12px}
 .audio-comparison .comparison-panel-top>p{font-size:12px;max-width:100px;line-height:1.2}
 .audio-comparison .comparison-order{min-height:44px;padding:8px 11px;gap:8px;font-size:12px}
 .audio-comparison .comparison-order img{width:16px;height:16px}
 .audio-comparison #comparison-stage{height:240px;margin-inline:-4px}
 .audio-comparison .wave-handle{top:12px;bottom:12px;left:clamp(24px,var(--split),calc(100% - 24px))}
 .audio-comparison .wave-handle>span{width:45px;height:57px;border-radius:11px}
 .audio-comparison .comparison-controls{grid-template-columns:1fr 1fr;grid-template-areas:'before after' 'sound sound';gap:11px}
 .audio-comparison .mode-button{font-size:15px;min-height:74px;padding:13px 12px;gap:9px}
 .audio-comparison .mode-button small{font-size:11px;line-height:1.3;margin-top:5px}
 .audio-comparison .mode-button img{display:none}
 .audio-comparison .sound-button{min-height:60px;font-size:15px;gap:11px}
 .audio-comparison .sound-button img{width:29px;height:29px}
 .audio-comparison #sound-status{font-size:12px}
}
@media(max-width:390px){.hero-section .hero-comparison-heading h1{font-size:32px}}
@media(prefers-reduced-motion:reduce){.audio-comparison button,.audio-comparison a{transition:none}}