/* How Solar Works: animated explainers that lead each video section (Oct 8 2026, Claude).
   The videos stay on the page behind a "Watch the full video" button. Presentation only. */
.ssx{
  --x-ink:#13243a;--x-ink2:#213b56;--x-muted:#52657a;--x-line:#cbddeb;--x-card:#fff;
  --x-sky:#eaf6ff;--x-blue:#187fb5;--x-blue2:#26bae6;--x-sun:#ffc34c;--x-gold:#eb9600;--x-night:#16264a;--x-ground:#e3efe6;
  --x-display:Montserrat,"Segoe UI",Arial,sans-serif;--x-body:"Open Sans","Segoe UI",Arial,sans-serif;
  background:var(--x-card);border:1px solid var(--x-line);border-radius:20px;overflow:hidden;
  box-shadow:0 24px 50px -40px rgba(19,36,58,.5);color:var(--x-ink);font-family:var(--x-body);min-width:0;width:100%
}
.ssx *{box-sizing:border-box}
.ssx button{font-family:var(--x-display)}

/* page layout while an explainer is mounted: copy, then explainer, then the video when opened */
.video-guide:has(> .ssx){grid-template-columns:minmax(0,1fr)!important;align-items:start;row-gap:28px!important}
.video-guide:has(> .ssx) > .video-guide-copy{order:1;max-width:780px}
.video-guide:has(> .ssx) .feature-list,.video-guide:has(> .ssx) .video-step-list{display:none}
.video-guide:has(> .ssx) > .ssx{order:2}
.video-guide:has(> .ssx) > .video-player-shell{order:3;display:none}
.video-guide:has(> .ssx.ssx-open) > .video-player-shell{display:block;width:100%;max-width:900px;justify-self:center}

.ssx-stage{position:relative;margin:18px 18px 0;border-radius:14px;overflow:hidden;background:var(--x-sky)}
.ssx-stage svg{display:block;width:100%;height:auto}
.ssx-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:0 22px 20px}
.ssx-ctrl{display:flex;gap:8px}
.ssx-btn{appearance:none;border:1px solid var(--x-line);background:var(--x-card);color:var(--x-ink);font:600 13px/1 var(--x-display);min-height:42px;padding:0 14px;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.ssx-btn:hover{border-color:var(--x-blue);color:var(--x-blue)}
.ssx-btn svg{width:14px;height:14px;flex:none}
.ssx-watch{background:var(--x-ink);border-color:var(--x-ink);color:#fff}
.ssx-watch:hover{background:var(--x-ink2);color:#fff;border-color:var(--x-ink2)}
.ssx-watch small{font:600 12px/1 var(--x-display);opacity:.75}
.ssx-btn:focus-visible,.ssx-step:focus-visible,.ssx-jstep:focus-visible{outline:3px solid var(--x-blue2);outline-offset:2px}
.ssx-fine{margin:0;padding:0 22px 16px;color:var(--x-muted);font-size:13px;line-height:1.55}

/* step chips (piece 1) */
.ssx-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;padding:14px 18px 0}
.ssx-step{appearance:none;text-align:center;border:1px solid var(--x-line);background:var(--x-card);border-radius:10px;padding:12px 8px 13px;cursor:pointer;position:relative;overflow:hidden;color:var(--x-muted);font:600 13px/1.25 var(--x-display)}
.ssx-step[aria-current="step"]{border-color:var(--x-ink);color:var(--x-ink);background:#fbfdff}
.ssx-bar{position:absolute;left:0;bottom:0;height:3px;width:calc(var(--p,0)*100%);background:var(--x-sun)}
.ssx-step.done .ssx-bar{width:100%;background:var(--x-line)}
.ssx-cap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;align-items:start;padding:16px 22px 14px}
.ssx-cap h3{font:700 20px/1.25 var(--x-display);margin:0;letter-spacing:-.02em;color:var(--x-ink)}
.ssx-cap p{margin:4px 0 0;color:var(--x-ink2);max-width:640px;font-size:16px;line-height:1.6}
.ssx-route{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end;font:700 12.5px/1 var(--x-display)}
.ssx-route span{padding:7px 10px;border-radius:999px;background:var(--x-sky);color:var(--x-ink)}
.ssx-route i{font-style:normal;color:var(--x-muted)}
.ssx-route .dc{background:#fff2d4;color:#7a4f00}
.ssx-route .ac{background:#e1f1fb;color:#0d5a85}

/* scene 1 */
.ssx .sky{fill:var(--x-sky);transition:fill .9s}
.ssx .night .sky{fill:var(--x-night)}
.ssx .ground{fill:var(--x-ground);transition:fill .9s}
.ssx .night .ground{fill:#22355c}
.ssx .sun{transition:opacity .8s}
.ssx .night .sun{opacity:0}
.ssx .rays{animation:ssx-spin 24s linear infinite;transform-origin:0 0}
.ssx .moon,.ssx .star{opacity:0;transition:opacity .9s}
.ssx .night .moon,.ssx .night .star{opacity:1}
.ssx .beam{opacity:0;transition:opacity .6s}
.ssx .lit .beam{opacity:.55}
.ssx .panel{fill:#24357a;stroke:#9fb3ff;stroke-width:1.2;transition:fill .6s}
.ssx .lit .panel{fill:#3d56c4}
.ssx .s1 .panel{animation:ssx-shimmer 1.6s ease-in-out infinite alternate}
.ssx .panel:nth-child(odd){animation-delay:.25s}
.ssx .shade{fill:var(--x-night);opacity:0;transition:opacity .9s;pointer-events:none}
.ssx .night .shade{opacity:.28}
.ssx .wire{fill:none;stroke:#c9d6e4;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.ssx .flow{fill:none;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3 15;opacity:0;transition:opacity .45s}
.ssx .flow.dc{stroke:var(--x-gold)}.ssx .flow.ac{stroke:var(--x-blue)}
.ssx .flow.on{opacity:1;animation:ssx-flow .8s linear infinite}
.ssx .flow.rev{animation-direction:reverse}
.ssx .bulb{fill:#e6ebf2;transition:fill .5s}
.ssx .glow{opacity:0;transition:opacity .5s}
.ssx .loads-on .bulb{fill:var(--x-sun)}.ssx .loads-on .glow{opacity:.35}
.ssx .s2 .inv-box{animation:ssx-pulse 1.1s ease-in-out infinite}
.ssx .batt-level{fill:var(--x-blue);transition:height 1.6s ease,y 1.6s ease}
.ssx .needle{transform-origin:0 0}
.ssx .spin .needle{animation:ssx-spin 1.6s linear infinite}
.ssx .spin.back .needle{animation-direction:reverse}
.ssx .tag{opacity:0;transition:opacity .4s}
.ssx .tag.on{opacity:1}
.ssx .tag rect{fill:#fff;stroke:var(--x-ink);stroke-width:1.5}
.ssx .tag text{font:700 15px var(--x-display);fill:var(--x-ink)}
.ssx .tag line{stroke:var(--x-ink);stroke-width:1.5;stroke-dasharray:3 3}
.ssx .chip{opacity:0}
.ssx .chip.on{animation:ssx-rise 2.4s ease-out infinite}
.ssx .chip rect{fill:var(--x-sun)}.ssx .chip text{font:800 14px var(--x-display);fill:var(--x-ink)}
.ssx .chip.cred rect{fill:#dff3e6}.ssx .chip.cred text{fill:#1f6b3d}

/* piece 2 */
.ssx-journey{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:0 22px;padding:18px 18px 0;align-items:start}
.ssx-journey .ssx-stage{margin:0}
.ssx-jsteps{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ssx-jsteps li{min-width:0;margin:0}
.ssx-jstep{appearance:none;width:100%;text-align:left;border:1px solid var(--x-line);background:var(--x-card);border-radius:12px;padding:10px 14px 12px;cursor:pointer;position:relative;overflow:hidden;color:var(--x-ink);display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 12px}
.ssx-jstep .n{grid-row:1/3;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--x-sky);color:var(--x-blue);font:800 13px/1 var(--x-display);margin-top:1px}
.ssx-jstep .t{font:700 15px/1.3 var(--x-display);display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px}
.ssx-jstep .t small{font:600 12px/1.6 var(--x-display);color:var(--x-muted)}
.ssx-jstep .more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s ease}
.ssx-jstep .in{display:block;overflow:hidden;min-height:0}
.ssx-jstep .ln{display:block;margin:6px 0 0;font:400 14px/1.55 var(--x-body);color:var(--x-ink2)}
.ssx-jstep .ln b{font:700 11px/1 var(--x-display);letter-spacing:.1em;text-transform:uppercase;color:var(--x-blue);margin-right:6px}
.ssx-jstep .ln.you b{color:var(--x-gold)}
.ssx-jstep[aria-current="step"]{border-color:var(--x-ink);background:#fbfdff}
.ssx-jstep[aria-current="step"] .n{background:var(--x-ink);color:#fff}
.ssx-jstep[aria-current="step"] .more{grid-template-rows:1fr}
.ssx-jstep.done .n{background:var(--x-sun);color:var(--x-ink)}
.ssx-tl{padding:18px 22px 6px}
.ssx-tl-row{display:flex;gap:4px;position:relative}
.ssx-seg{border-radius:8px;padding:10px 12px;min-width:0;font:700 12.5px/1.3 var(--x-display);color:var(--x-ink);background:var(--x-sky)}
.ssx-seg small{display:block;font:600 11.5px/1.35 var(--x-display);color:var(--x-muted);margin-top:2px}
.ssx-seg.a{flex:6;background:#fff2d4}.ssx-seg.b{flex:4;background:#e1f1fb}.ssx-seg.pre{flex:2.2}
.ssx-marker{position:absolute;top:-9px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--x-ink);border:3px solid #fff;box-shadow:0 2px 8px rgba(19,36,58,.35);transition:left .7s cubic-bezier(.5,0,.2,1)}
.ssx .prop{opacity:0;transition:opacity .45s,transform .6s cubic-bezier(.3,1.4,.5,1);transform-box:fill-box;transform-origin:center;transform:translateY(10px) scale(.92)}
.ssx .prop.on{opacity:1;transform:none}
.ssx .jpanel{opacity:0;transform:translateY(-14px);transition:opacity .35s,transform .45s cubic-bezier(.3,1.4,.5,1);transform-box:fill-box}
.ssx .jpanel.on{opacity:1;transform:none}
.ssx .live .jpanel.on{fill:#3d56c4}
.ssx .bars rect{transform-box:fill-box;transform-origin:bottom;transform:scaleY(.15);transition:transform .8s ease}
.ssx .prop.on .bars rect{transform:none}
.ssx .stamp{transform-box:fill-box;transform-origin:center;transform:scale(1.8) rotate(-14deg);opacity:0;transition:transform .45s cubic-bezier(.4,1.6,.6,1) .5s,opacity .2s .5s}
.ssx .prop.on .stamp{transform:rotate(-10deg);opacity:1}
.ssx .ring{fill:none;stroke:var(--x-sun);stroke-width:3;opacity:0;transform-box:fill-box;transform-origin:center}
.ssx .prop.on .ring{animation:ssx-ring 1.6s ease-out infinite}
.ssx .jsun{transition:transform 1.1s ease,opacity .8s;transform:translateY(40px);opacity:.35}
.ssx .live .jsun{transform:none;opacity:1}

@keyframes ssx-spin{to{transform:rotate(360deg)}}
@keyframes ssx-flow{to{stroke-dashoffset:-18}}
@keyframes ssx-shimmer{from{fill:#2b3f95}to{fill:#5470e0}}
@keyframes ssx-pulse{50%{fill:#fff2d4}}
@keyframes ssx-rise{0%{opacity:0;transform:translateY(8px)}15%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translateY(-22px)}}
@keyframes ssx-ring{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(1.5)}}

@media (max-width:860px){.ssx-journey{grid-template-columns:1fr;gap:12px}}
@media (max-width:640px){
  .ssx{border-radius:16px}
  .ssx-stage{margin:12px 0 0;border-radius:0}
  .ssx-journey{padding:12px 0 0}
  .ssx-jsteps{padding:0 12px}
  .ssx-steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(104px,1fr);overflow-x:auto;padding:12px 12px 2px;scrollbar-width:none}
  .ssx-cap{grid-template-columns:1fr;padding:14px 16px 12px}
  .ssx-route{justify-content:flex-start}
  .ssx .tag{display:none}
  .ssx-tl{padding:16px 12px 4px}
  .ssx-seg{padding:8px;font-size:11.5px}
  .ssx-seg small{font-size:10.5px}
  .ssx-fine{padding:0 16px 14px}
  .ssx-foot{padding:0 12px 16px}
  .ssx-watch{flex:1 1 100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .ssx .flow.on,.ssx .rays,.ssx .panel,.ssx .chip.on,.ssx .spin .needle,.ssx .inv-box,.ssx .prop.on .ring{animation:none!important}
  .ssx .chip.on{opacity:1}
  .ssx .flow.on{stroke-dasharray:none;opacity:.85}
  .ssx *{transition-duration:.01s!important}
}

/* ===== Homepage story order and mobile layout (Oct 8 2026, Claude) =====
   Order: promise, proof, why, how it works, what you want, how to pay, customer proof,
   installations, project, team, the process, start your plan, answers, reference, care, family. */
main:has(> .studio-home-hero){display:flex;flex-direction:column}
main:has(> .studio-home-hero) > script{display:none}
main:has(> .studio-home-hero) > .studio-home-hero{order:1}
main:has(> .studio-home-hero) > .proof-bar{order:2}
main:has(> .studio-home-hero) > #home-why{order:3;background:#fff}
main:has(> .studio-home-hero) > .hs-flow{order:4;background:#f4f7fa}
main:has(> .studio-home-hero) > #solutions{order:5;background:#fff}
main:has(> .studio-home-hero) > section:has(.sun-payment-list){order:6;background:#f4f7fa}
main:has(> .studio-home-hero) > #customer-proof{order:7;background:#fff}
main:has(> .studio-home-hero) > .customer-stories{order:8;background:#f4f7fa}
main:has(> .studio-home-hero) > .proof-installations{order:9;background:#fff}
main:has(> .studio-home-hero) > .project-feature{order:10;background:#f4f7fa}
main:has(> .studio-home-hero) > .sun-why{order:11;background:#fff}
main:has(> .studio-home-hero) > .hs-journey{order:12;background:#f4f7fa}
main:has(> .studio-home-hero) > #solar-plan{order:13;background:#fff}
main:has(> .studio-home-hero) > .hs-questions{order:14;background:#f4f7fa}
main:has(> .studio-home-hero) > section:has(.sun-utility-links){order:15;background:#fff}
main:has(> .studio-home-hero) > .sun-equipment{order:16;background:#f4f7fa}
main:has(> .studio-home-hero) > .faq-section{order:17;background:#fff}
main:has(> .studio-home-hero) > .solar-care-home{order:18}
main:has(> .studio-home-hero) > .sun-crosslinks{order:19}
main:has(> .studio-home-hero) > .energy-family-section{order:20}

/* team section: photo and words line up, photo stays in view while you read */
main:has(> .studio-home-hero) > .sun-why .sun-editorial{align-items:start}
@media (min-width:781px){
  main:has(> .studio-home-hero) > .sun-why .sun-team-photo{position:sticky;top:110px}
  main:has(> .studio-home-hero) > .sun-why .sun-editorial > div:last-child > h2{margin-top:0}
}

/* new homepage sections */
.hs-head{max-width:760px;margin-bottom:26px}
.hs-head p{color:#52657a;font-size:17px;line-height:1.6;margin:8px 0 0}
.hs-flow .ssx,.hs-journey .ssx{max-width:1080px;margin:0 auto}
.hs-qgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hs-q{display:flex;flex-direction:column;border:1px solid #cbddeb;border-radius:14px;overflow:hidden;background:#fff;color:#13243a;text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s;min-width:0}
.hs-q:hover,.hs-q:focus-visible{border-color:#096caa;transform:translateY(-2px);box-shadow:0 16px 30px -22px rgba(19,36,58,.6)}
.hs-q img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:#e8f1f7}
.hs-qt{display:flex;flex-direction:column;flex:1;padding:14px 16px 16px}
.hs-qk{font:700 11px/1 Montserrat,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#9c6800}
.hs-q strong{display:block;margin:8px 0 12px;font:700 17px/1.3 Montserrat,Arial,sans-serif}
.hs-go{margin-top:auto;font:700 13px/1 Montserrat,Arial,sans-serif;color:#845600}
.hs-more{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hs-more a{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border-radius:999px;border:1px solid #cbddeb;background:#fff;color:#13243a;font:600 14px/1.2 Montserrat,Arial,sans-serif;text-decoration:none}
.hs-more a:hover{border-color:#096caa}
.hs-more a.hs-all{background:#13243a;border-color:#13243a;color:#fff}

/* ===== phone: its own layout, swipe rails instead of long stacks, thumb-size targets ===== */
@media (max-width:780px){
  main:has(> .studio-home-hero) > .section{padding-top:52px;padding-bottom:52px}
  main:has(> .studio-home-hero) h2{text-wrap:balance}
  /* swipe rails */
  main:has(> .studio-home-hero) .ss-why-grid,
  main:has(> .studio-home-hero) .review-grid,
  main:has(> .studio-home-hero) .proof-grid,
  main:has(> .studio-home-hero) .sun-payment-list,
  main:has(> .studio-home-hero) .sun-stories,
  main:has(> .studio-home-hero) .hs-qgrid{
    display:grid!important;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:82%;
    gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin-left:-15px;margin-right:-15px;padding:4px 15px 14px;scroll-padding-left:15px;scrollbar-width:none}
  main:has(> .studio-home-hero) .ss-why-grid::-webkit-scrollbar,
  main:has(> .studio-home-hero) .review-grid::-webkit-scrollbar,
  main:has(> .studio-home-hero) .proof-grid::-webkit-scrollbar,
  main:has(> .studio-home-hero) .sun-payment-list::-webkit-scrollbar,
  main:has(> .studio-home-hero) .sun-stories::-webkit-scrollbar,
  main:has(> .studio-home-hero) .hs-qgrid::-webkit-scrollbar{display:none}
  main:has(> .studio-home-hero) .ss-why-grid > *,
  main:has(> .studio-home-hero) .review-grid > *,
  main:has(> .studio-home-hero) .proof-grid > *,
  main:has(> .studio-home-hero) .sun-payment-list > *,
  main:has(> .studio-home-hero) .sun-stories > *,
  main:has(> .studio-home-hero) .hs-qgrid > *{scroll-snap-align:start;min-width:0;margin:0}
  main:has(> .studio-home-hero) .proof-grid{grid-auto-columns:78%;grid-template-rows:none!important;grid-auto-rows:250px}
  main:has(> .studio-home-hero) .proof-grid > *{grid-column:auto!important;grid-row:auto!important;height:250px!important;width:auto!important}
  main:has(> .studio-home-hero) .sun-payment-list{grid-auto-columns:66%}
  main:has(> .studio-home-hero) .sun-payment-list > article{background:#fff;border:1px solid #cbddeb;border-radius:14px;padding:16px}
  /* swipe hint under each rail */
  main:has(> .studio-home-hero) .ss-why-grid::after,
  main:has(> .studio-home-hero) .review-grid::after,
  main:has(> .studio-home-hero) .proof-grid::after,
  main:has(> .studio-home-hero) .hs-qgrid::after{content:"";width:1px}
  /* reference sections live behind the answers hub on phones */
  main:has(> .studio-home-hero) > section:has(.sun-utility-links),
  main:has(> .studio-home-hero) > .sun-equipment{display:none}
  .hs-q strong{font-size:16px}
  .hs-more{gap:8px}
  .hs-more a{flex:1 1 calc(50% - 8px);justify-content:center;text-align:center;font-size:13px;padding:10px 12px}
  .hs-more a.hs-all{flex-basis:100%}
  .hs-head{margin-bottom:18px}
  .hs-head p{font-size:15.5px}
  .hs-flow .ssx,.hs-journey .ssx{margin:0 -3px}
  /* team: photo, then a tight read */
  main:has(> .studio-home-hero) > .sun-why .sun-company-awards{margin-top:10px}
  main:has(> .studio-home-hero) > .sun-why .sun-editorial > .sun-team-photo{order:2}
}