/* Solar design preview (/solar-design/). Builds on service.css; everything here is scoped to .solar-design. */
.solar-design button[data-aurora-embed]{cursor:pointer;font-family:inherit}
.solar-design .solar-design-inline{background:none;border:0;border-bottom:1px solid currentColor;padding:0 0 10px;color:#84f5d8}

/* Hero illustration: a roof that fills with panels while the three questions tick off. */
.solar-design-preview{position:relative;padding:24px;border-radius:22px;background:rgba(7,29,30,.55);border:1px solid rgba(255,255,255,.14);box-shadow:0 35px 70px rgba(0,24,39,.28);backdrop-filter:blur(6px)}
.sdp-head{display:flex;align-items:center;gap:10px;font-size:10px;font-weight:800;letter-spacing:.16em;color:#c6e7e7}
.sdp-dot{width:9px;height:9px;border-radius:50%;background:#34d399;box-shadow:0 0 0 6px rgba(52,211,153,.14)}
.sdp-tag{margin-left:auto;padding:4px 9px;border:1px solid rgba(255,255,255,.2);border-radius:100px;font-size:9px;color:#9fc9c6}
.sdp-roof{display:block;width:100%;height:auto;margin:18px 0 12px;overflow:visible}
.sdp-ground{stroke:rgba(255,255,255,.22);stroke-width:1.5}
.sdp-house{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.3);stroke-width:1.5}
.sdp-roof-shape{fill:#14344a;stroke:#66e2c1;stroke-width:1.5;stroke-linejoin:round}
.sdp-panel{fill:#1b6b6e;stroke:#8ff5dc;stroke-width:1;opacity:0;transform-box:fill-box;transform-origin:center;animation:sdp-place 9s var(--ease) infinite;animation-delay:calc(1.6s + var(--i) * .18s)}
.sdp-sun-path{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1;stroke-dasharray:3 5}
.sdp-sun{fill:#34d399;filter:drop-shadow(0 0 8px #34d399);offset-path:path('M30 40Q200 -20 370 40');animation:sdp-sun 9s linear infinite}
.sdp-checks{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.sdp-checks li{flex:1;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.14);font-size:12px;font-weight:700;color:#9fc9c6;animation:sdp-check 9s var(--ease) infinite}
.sdp-checks li::before{content:'○';margin-right:7px}
.sdp-checks li:nth-child(1){animation-delay:.2s}.sdp-checks li:nth-child(2){animation-delay:.6s}.sdp-checks li:nth-child(3){animation-delay:1s}
.sdp-ready{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);animation:sdp-ready 9s var(--ease) infinite}
.sdp-ready span{font-size:10px;font-weight:800;letter-spacing:.15em;color:#77e9ce}
.sdp-ready strong{font:600 20px JakartaLocal,sans-serif;letter-spacing:-.04em;color:#fff}
@keyframes sdp-place{0%,8%{opacity:0;transform:translateY(-10px) scale(.85)}16%,88%{opacity:1;transform:none}100%{opacity:0}}
@keyframes sdp-sun{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes sdp-check{0%,6%{border-color:rgba(255,255,255,.14);color:#9fc9c6;background:transparent}12%,88%{border-color:#34d399;color:#fff;background:rgba(52,211,153,.12)}100%{border-color:rgba(255,255,255,.14)}}
@keyframes sdp-ready{0%,40%{opacity:.25}50%,88%{opacity:1}100%{opacity:.25}}

.solar-design-step-label{display:block;margin-bottom:10px;font-size:10px;font-weight:850;letter-spacing:.12em;color:#1b6b6e}

@media(max-width:900px){.solar-design-preview{max-width:520px}}
@media(max-width:600px){.solar-design-preview{padding:18px}.sdp-checks li{padding:8px;font-size:11px}.sdp-ready strong{font-size:17px}}
@media(prefers-reduced-motion:reduce){.sdp-panel{animation:none;opacity:1}.sdp-sun{animation:none;offset-distance:50%}.sdp-checks li,.sdp-ready{animation:none}.sdp-checks li{border-color:#34d399;color:#fff}}
/* The quote-first heading is long; keep it to three or four lines. */
.solar-design #sd-next-title{font-size:clamp(38px,4.2vw,60px);line-height:1.04}