/* A single visual system for the property, its benefits and the next step. */
.solar-scene .ss-viewport{background-image:radial-gradient(ellipse at 36% 40%,rgb(255 255 255/.16),transparent 66%),radial-gradient(ellipse at 42% 80%,rgb(69 139 178/.07),transparent 62%)}
.solar-scene .ss-topline{gap:12px}
.solar-scene .ss-stage-nav .ss-chapters{--ss-active-index:0;position:relative;isolation:isolate;padding:3px;box-shadow:0 6px 22px rgb(17 42 70/.07)}
.solar-scene .ss-chapters:has(button:nth-child(2)[aria-pressed=true]){--ss-active-index:1}
.solar-scene .ss-chapters:has(button:nth-child(3)[aria-pressed=true]){--ss-active-index:2}
.solar-scene .ss-chapters:has(button:nth-child(4)[aria-pressed=true]){--ss-active-index:3}
.solar-scene .ss-stage-nav .ss-chapters::before{content:"";position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/4);border-radius:8px;background:var(--ss-petrol);transform:translateX(calc(var(--ss-active-index)*100%));transition:transform .5s cubic-bezier(.22,1,.36,1);pointer-events:none}
.solar-scene .ss-stage-nav .ss-chapters button{position:relative;z-index:1;transition:color .25s}
.solar-scene .ss-stage-nav .ss-chapters button[aria-pressed=true],.solar-scene .ss-stage-nav .ss-chapters button[aria-pressed=true]:hover{background:transparent;color:#fff}
.solar-scene .ss-stage-nav .ss-chapters button:hover{background:transparent}

/* The numeral and explanation share one card, with no nested white boxes. */
.solar-scene .ss-savings,.solar-scene.ss-wide .ss-savings,.solar-scene.ss-pin-compact:not(.ss-wide) .ss-savings{padding:0;border:0;border-radius:0;background:none}
.solar-scene .ss-savings-metric,.solar-scene.ss-wide .ss-savings-credit{padding:16px;border:1px solid color-mix(in srgb,var(--ss-petrol) 14%,white);border-radius:18px;box-shadow:0 10px 30px rgb(17 42 70/.035)}
.solar-scene.ss-wide.is-night .ss-savings-credit{padding:16px;border:1px solid color-mix(in srgb,var(--ss-petrol) 14%,white)}
.solar-scene:not(.ss-has-number-mesh) .ss-savings-metric{background:#fff}
.solar-scene .ss-savings-metric,.solar-scene.ss-wide .ss-savings-credit,.solar-scene.ss-wide.is-night .ss-savings-credit{border-color:color-mix(in srgb,color-mix(in srgb,var(--ss-petrol) 14%,white) calc(var(--ss-number-opacity,1)*100%),transparent)}
.solar-scene .ss-metric-context,.solar-scene.ss-pin-compact:not(.ss-wide) .ss-metric-context{padding:0;border:0;border-radius:0;background:none}
.solar-scene .ss-savings-number,.solar-scene.ss-wide .ss-savings-number,.solar-scene.ss-pin-compact .ss-savings-number{padding:0;margin-bottom:12px}
.solar-scene .ss-savings-cost .ss-savings-number small{order:-1}
.solar-scene .ss-metric-heading,.solar-scene.ss-wide .ss-metric-heading{font-size:14px;letter-spacing:-.01em}
.solar-scene .ss-savings-label{font-weight:500}
.solar-scene .ss-savings-condition{color:color-mix(in srgb,var(--ss-petrol) 83%,white)}
.solar-scene .ss-metric-context a{font-weight:550;text-decoration-color:color-mix(in srgb,var(--ss-petrol) 35%,white)}
.solar-scene.ss-wide .ss-savings-metrics{gap:14px}
@media(min-width:820px) and (max-width:1047px){
.solar-scene.ss-wide-short .ss-savings{--ss-number-height:68px}
.solar-scene.ss-wide-short .ss-savings-metric{padding:12px}
.solar-scene.ss-wide-short.is-night .ss-savings-credit{padding:12px}
}
.solar-scene.ss-pin-compact:not(.ss-wide) .ss-savings-metric{padding:12px;border-radius:15px}
.solar-scene.ss-pin-compact:not(.ss-wide) .ss-savings-number{padding:0;margin-bottom:9px}

/* A quiet story caption, useful controls, and a direct route to the real form. */
.solar-scene .ss-controls{padding:16px 18px 10px;border-radius:18px;box-shadow:0 12px 32px rgb(17 42 70/.08);background:#fff;backdrop-filter:none}
.solar-scene .ss-readout{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:center}
.solar-scene .ss-readout .energy-chapters>li{display:block}
.solar-scene .ss-readout .energy-chapters h3{max-width:calc(100% - 142px);font-size:17px;line-height:1.35}
.solar-scene .ss-readout .energy-chapters p{display:none}
.solar-scene .ss-readout .energy-chapters>li:not([hidden]){animation:ss-caption-arrive .38s cubic-bezier(.22,1,.36,1) both}
.solar-scene .ss-assessment-link{position:absolute;right:18px;top:10px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 12px;border-radius:9px;background:var(--ss-amber);color:var(--ss-petrol);font:600 12px/1.2 var(--sans,sans-serif);text-decoration:none;transition:background-color .2s,transform .2s}
.solar-scene .ss-assessment-link:hover{background:color-mix(in srgb,var(--ss-amber) 85%,white);transform:translateY(-1px)}
.solar-scene .ss-controls:has(.ss-detail:not([hidden])) .ss-assessment-link{display:none}
.solar-scene .ss-controls-foot{margin-top:10px;padding-top:7px;border-top-color:color-mix(in srgb,var(--ss-petrol) 12%,white)}
.solar-scene .ss-hotspot{min-height:42px;padding:4px 0;border:0;border-radius:0;background:none;gap:2px 8px}
.solar-scene .ss-hotspot:hover{background:none;color:var(--ss-petrol)}
.solar-scene .ss-hotspot[aria-expanded=true]{padding-inline:8px;border-radius:8px;background:var(--ss-petrol);color:#fff}
.solar-scene .ss-hotspot .ss-hotspot-icon{font-weight:400;color:var(--ss-amber)}
.solar-scene .ss-tag-text{box-shadow:0 3px 12px rgb(17 42 70/.06);font-size:11px}
@keyframes ss-caption-arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:680px){
.solar-scene .ss-controls,.solar-scene.ss-pin-compact .ss-controls{padding:14px 12px 8px}
.solar-scene .ss-readout .energy-chapters h3,.solar-scene.ss-pin-compact .ss-readout .energy-chapters h3{max-width:calc(100% - 126px);font-size:15px;line-height:1.3}
.solar-scene .ss-assessment-link{right:12px;top:9px;padding-inline:9px;font-size:11px;gap:5px}
.solar-scene .ss-hotspot .ss-hotspot-state{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.solar-scene .ss-stage-nav .ss-chapters::before,.solar-scene .ss-assessment-link{transition:none}.solar-scene .ss-readout .energy-chapters>li:not([hidden]){animation:none}}