/* Two views of the same sample site. The host switches its improvement phase. */
.scene-comparison-site{position:absolute;inset:0;overflow:hidden;background:#fff;color:#173953}
.scene-comparison-site>.scene-site-before,.scene-comparison-site>.scene-site-after{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.scene-comparison-site>.scene-site-before{z-index:1;opacity:0;background:#e5e7e9;color:#737b83}
.scene-comparison-site>.scene-site-after{z-index:2;opacity:1;background:#fff;color:#173953}
[data-improvement-phase="before"] .scene-site-before{opacity:1}
[data-improvement-phase="before"] .scene-site-after{opacity:0}
[data-improvement-phase="after"] .scene-site-before{opacity:calc(1 - var(--improvement-visual,1))}
[data-improvement-phase="after"] .scene-site-after{opacity:var(--improvement-visual,1)}

.scene-comparison-site .scene-before-header{display:flex;align-items:center;justify-content:space-between;gap:5%;height:12%;padding:0 5%;border-bottom:1px solid #c9cdd1;background:#dce0e3;font:500 clamp(4px,.43vw,8px)/1 var(--font);letter-spacing:.02em;color:#7b8288}
.scene-comparison-site .scene-before-header>strong{display:block;flex:none;width:24%;max-width:96px;line-height:0}
.scene-comparison-site .scene-before-header img{display:block;width:100%;height:auto;object-fit:contain}
.scene-comparison-site .scene-before-header>span{flex:1;text-align:right;white-space:nowrap}
.scene-comparison-site .scene-comparison-label{flex:none;display:inline-block;padding:4px 6px;border:1px solid #b9bec3;border-radius:2px;font:600 clamp(5px,.48vw,9px)/1.1 var(--font);letter-spacing:.05em;white-space:nowrap}
.scene-comparison-site .scene-before-hero{position:relative;height:61%;overflow:hidden;border-bottom:1px solid #c4c9cd;background:#d9dde0}
.scene-comparison-site .scene-before-photo{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(1);opacity:.18}
.scene-comparison-site .scene-before-copy{position:absolute;inset:25% 10% auto;text-align:center}
.scene-comparison-site .scene-before-title{display:block;font:500 clamp(8px,.84vw,14px)/1.5 var(--font);letter-spacing:.025em;color:#69727b}
.scene-comparison-site .scene-before-text{margin:4% 0 5%;font:400 clamp(4px,.43vw,8px)/1.7 var(--font);color:#7a838a}
.scene-comparison-site .scene-before-cta{display:inline-block;padding:3px 9px;border:1px solid #a9b0b6;background:#e7e9eb;font:500 clamp(4px,.44vw,8px)/1.4 var(--font);color:#78818a}
.scene-comparison-site .scene-before-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:27%;padding:4% 5%;background:#e2e5e7}
.scene-comparison-site .scene-before-services>div{min-width:0;padding:0 8%;border-left:1px solid #c3c9ce;text-align:center}
.scene-comparison-site .scene-before-services>div:first-child{border-left:0}
.scene-comparison-site .scene-before-services strong{display:block;font:500 clamp(5px,.49vw,9px)/1.5 var(--font);white-space:nowrap;color:#737d86}
.scene-comparison-site .scene-before-services span{display:block;margin-top:4%;font:400 clamp(3.5px,.36vw,7px)/1.65 var(--font);color:#8b939a}

.scene-comparison-site .scene-site-after .scene-site-header{height:12%;padding:0 5%;gap:4%;border-bottom:1px solid #dceef3;background:#fff;font:600 clamp(5px,.49vw,9px)/1 var(--font);letter-spacing:.02em;color:#173953}
.scene-comparison-site .scene-site-after .scene-site-header>strong{width:30%;max-width:132px;flex:none;line-height:0}
.scene-comparison-site .scene-site-after .scene-site-header>strong img{display:block;width:100%;height:auto;object-fit:contain}
.scene-comparison-site .scene-site-after .scene-site-header>span{flex:1;text-align:center;white-space:nowrap}
.scene-comparison-site .scene-site-after .scene-site-header>.scene-comparison-label{padding:4px 6px;border:1px solid #a9e4ec;border-radius:2px;background:#e8f9fc;color:#007f91;font:700 clamp(5px,.48vw,9px)/1.1 var(--font)}
.scene-comparison-site .scene-site-after .scene-site-hero{position:relative;height:61%;overflow:hidden;background:#f2fbfd}
.scene-comparison-site .scene-site-after .scene-photo{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 0 0 51%);transform-origin:right center}
.scene-comparison-site .scene-site-after .scene-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:none}
.scene-comparison-site .scene-site-after .scene-hero-backplate{position:absolute;inset:0 45% 0 0;background:#f2fbfd;opacity:1;pointer-events:none}
.scene-comparison-site .scene-site-after .scene-site-title{position:absolute;left:6%;top:17%;margin:0;font:800 clamp(16px,1.65vw,32px)/1.17 var(--font);letter-spacing:-.025em;color:#173953}
.scene-comparison-site .scene-site-after .scene-site-text{position:absolute;left:6%;top:62%;margin:0;font:500 clamp(5px,.55vw,10px)/1.4 var(--font);letter-spacing:.01em;white-space:nowrap;color:#506b7d}
.scene-comparison-site .scene-site-after .scene-site-cta{position:absolute;left:6%;bottom:9%;display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid #007c92;border-radius:2px;background:#00a7b5;color:#fff;font:700 clamp(5.5px,.58vw,10px)/1.2 var(--font);letter-spacing:0;white-space:nowrap;box-shadow:0 3px 8px #007c9224}
.scene-comparison-site .scene-site-after .scene-site-cta>span{font-size:1.15em;line-height:1}
.scene-comparison-site .scene-site-after .scene-site-mark{position:absolute;right:4%;bottom:10%;font:600 clamp(7px,.73vw,14px)/1.3 var(--font);letter-spacing:.02em;color:#fff;text-shadow:0 1px 5px #00112666}
.scene-comparison-site .scene-site-after .scene-site-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4%;height:27%;padding:3% 5% 2%;border-top:2px solid #00a7b5;background:#fff}
.scene-comparison-site .scene-site-after .scene-site-cards>div{position:relative;min-width:0;overflow:hidden;padding-top:0;border:0}
.scene-comparison-site .scene-site-after .scene-comparison-number{display:block;margin-bottom:2px;font:700 clamp(4px,.43vw,8px)/1.1 var(--font);letter-spacing:.1em;color:#00a7b5}
.scene-comparison-site .scene-site-after .scene-site-cards strong{display:block;font:700 clamp(6px,.6vw,11px)/1.35 var(--font);letter-spacing:0;color:#173953;white-space:nowrap}
.scene-comparison-site .scene-site-after .scene-site-cards small{display:block;margin-top:2px;font:400 clamp(4px,.44vw,8px)/1.5 var(--font);letter-spacing:0;color:#647b8e}

@media(max-width:650px){
 .scene-comparison-site .scene-before-header{font-size:4px;gap:3%}
 .scene-comparison-site .scene-comparison-label{padding:3px 4px;font-size:5px}
 .scene-comparison-site .scene-before-title{font-size:8px}
 .scene-comparison-site .scene-before-text{font-size:4px}
 .scene-comparison-site .scene-before-cta{font-size:4px;padding:2px 7px}
 .scene-comparison-site .scene-before-services strong{font-size:5px}
 .scene-comparison-site .scene-before-services span{font-size:3.5px}
 .scene-comparison-site .scene-site-after .scene-site-header{font-size:4.5px;gap:3%}
 .scene-comparison-site .scene-site-after .scene-site-header>.scene-comparison-label{padding:3px 4px;font-size:5px}
 .scene-comparison-site .scene-site-after .scene-site-title{font-size:clamp(12px,4.2vw,18px);line-height:1.17}
 .scene-comparison-site .scene-site-after .scene-site-text{font-size:5px;line-height:1.3}
 .scene-comparison-site .scene-site-after .scene-site-cta{gap:6px;padding:4px 7px;font-size:5.5px}
 .scene-comparison-site .scene-site-after .scene-site-mark{font-size:7px}
 .scene-comparison-site .scene-site-after .scene-site-cards{padding-top:2.5%;border-top-width:1px}
 .scene-comparison-site .scene-site-after .scene-comparison-number{font-size:4px;margin-bottom:1px}
 .scene-comparison-site .scene-site-after .scene-site-cards strong{font-size:6px}
 .scene-comparison-site .scene-site-after .scene-site-cards small{font-size:4px;margin-top:1px}
}
@media(prefers-reduced-motion:reduce){
 .scene-comparison-site>.scene-site-before,.scene-comparison-site>.scene-site-after{transition:none}
}