/* Readable before-state override. Phase timing and the after-state stay with the host. */
.hero[data-result-phase] .scene-comparison-site .scene-site-before{background:#e9edf0;color:#465360}
.hero[data-result-phase] .scene-comparison-site .scene-before-header{border-bottom-color:#b8c2ca;background:#e1e7ec;font-size:clamp(5px,.48vw,9px);font-weight:600;color:#455565}
.hero[data-result-phase] .scene-comparison-site .scene-before-header>.scene-comparison-label{border-color:#9aa8b3;background:#edf1f4;color:#435565}
.hero[data-result-phase] .scene-comparison-site .scene-before-hero{border-bottom-color:#b4bec7;background:#dce2e7}
.hero[data-result-phase] .scene-comparison-site .scene-before-photo{opacity:.65}
.hero[data-result-phase] .scene-comparison-site .scene-before-copy{padding:3px 5px;border:1px solid #aebbc678;background:#f0f3f6e6}
.hero[data-result-phase] .scene-comparison-site .scene-before-title{font-size:clamp(9px,.9vw,15px);font-weight:600;line-height:1.45;color:#3e4d5b}
.hero[data-result-phase] .scene-comparison-site .scene-before-text{margin:3% 0;font-size:clamp(5px,.49vw,9px);font-weight:500;line-height:1.65;color:#52616f}
.hero[data-result-phase] .scene-comparison-site .scene-before-cta{border-color:#8e9da9;background:#e2e8ed;font-size:clamp(4.5px,.47vw,8px);font-weight:600;color:#435565}
.hero[data-result-phase] .scene-comparison-site .scene-before-services{background:#e9edf0}
.hero[data-result-phase] .scene-comparison-site .scene-before-services>div{border-left-color:#b4c0ca}
.hero[data-result-phase] .scene-comparison-site .scene-before-services strong{font-size:clamp(6px,.56vw,10px);font-weight:600;color:#465563}
.hero[data-result-phase] .scene-comparison-site .scene-before-services span{font-size:clamp(4.5px,.42vw,8px);color:#657482}

@media(max-width:650px){
 .hero[data-result-phase] .scene-comparison-site .scene-before-header{font-size:4.5px}
 .hero[data-result-phase] .scene-comparison-site .scene-before-header>.scene-comparison-label{font-size:5px}
 .hero[data-result-phase] .scene-comparison-site .scene-before-title{font-size:9px}
 .hero[data-result-phase] .scene-comparison-site .scene-before-text{font-size:5px}
 .hero[data-result-phase] .scene-comparison-site .scene-before-cta{font-size:4.5px}
 .hero[data-result-phase] .scene-comparison-site .scene-before-services strong{font-size:6px}
 .hero[data-result-phase] .scene-comparison-site .scene-before-services span{font-size:4.5px}
}