/* Solar Bill homepage sections. Loads after site.css (tokens, header, buttons, footer). */
ol,ul{padding:0;margin:0;list-style:none}
.wide{max-width:1280px}
.narrow{max-width:820px}
.band{padding-block:clamp(88px,11vw,152px)}
.band.alt{background:var(--alt)}
.center{text-align:center}

.eyebrow{display:block;font-size:clamp(1.05rem,.95rem + .4vw,1.3rem);font-weight:600;letter-spacing:-.01em;color:var(--fg3);margin-bottom:10px}
.h2{font-size:clamp(2.3rem,1.5rem + 3.4vw,4rem);font-weight:600;line-height:1.06;letter-spacing:-.028em;text-wrap:balance}
.intro{font-size:clamp(1.12rem,1rem + .45vw,1.35rem);line-height:1.45;color:var(--fg2);max-width:40em;margin-top:22px;text-wrap:pretty}
.center .intro{margin-inline:auto}

/* actions row */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;margin-top:34px}
.center .actions{justify-content:center}

/* hero */
.hero{padding-top:clamp(64px,9vw,120px);text-align:center;overflow:hidden}
.hero h1{font-size:clamp(2.9rem,1.6rem + 5.4vw,5.6rem);font-weight:600;line-height:1.02;letter-spacing:-.034em;text-wrap:balance;max-width:12.5em;margin:0 auto}
.hero .intro{margin-top:24px;max-width:31em;margin-inline:auto}
.hero .actions{justify-content:center}
.shot{margin:clamp(56px,7vw,88px) auto 0;max-width:1068px}
.shot img{width:100%;border-radius:1.76% / 2.18%;box-shadow:var(--shade)}
@media (max-width:600px){.shot{max-width:400px}.shot img,.split .shot img{border-radius:18px}}
.shot figcaption{margin-top:22px;font-size:.84rem;color:var(--fg3)}
.works{margin-top:clamp(56px,7vw,80px);padding-block:26px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:8px 28px;font-size:.92rem;color:var(--fg2)}
.works b{font-weight:600;color:var(--fg);letter-spacing:.01em}
@media (max-width:600px){.works{gap:6px 18px}.works span{flex-basis:100%;text-align:center}}

/* the answer: why a net exporter still pays */
.dark{background:#000;color:#f5f5f7;--fg2:#a1a1a6;--fg3:#86868b;--accent:#3b9bff;--hair:rgba(255,255,255,.14)}
.sum{display:grid;grid-template-columns:repeat(5,auto);justify-content:center;align-items:start;gap:0 clamp(18px,3vw,48px);margin-top:clamp(56px,7vw,96px);text-align:left}
.sum .op{font-size:clamp(2.2rem,4vw,3.6rem);font-weight:300;color:var(--fg3);line-height:1.1}
.sum strong{display:block;white-space:nowrap;font-size:clamp(2.6rem,1.6rem + 3.6vw,4.8rem);font-weight:600;letter-spacing:-.035em;line-height:1.02}
.sum span{display:block;margin-top:12px;color:var(--fg2);font-size:.98rem;line-height:1.4;max-width:13em}
.sum .total strong{color:var(--warm)}
@media (max-width:920px){
  .sum{grid-template-columns:minmax(0,1fr);gap:18px;text-align:center}
  .sum span{margin-inline:auto}
}
.note{margin:clamp(48px,6vw,72px) auto 0;max-width:40em;color:var(--fg2);font-size:1.06rem;line-height:1.55;text-wrap:pretty}
.note b{color:#f5f5f7;font-weight:600}

/* feature list: hairlines, no cards */
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(28px,4vw,56px);margin-top:clamp(56px,7vw,88px)}
@media (max-width:900px){.feats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.feats{grid-template-columns:minmax(0,1fr)}}
.feats li{border-top:1px solid var(--line);padding:26px 0 40px}
.feats svg{color:var(--fg);margin-bottom:18px}
.feats h3{font-size:1.28rem;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.feats p{margin-top:8px;color:var(--fg2)}

/* second product shot */
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,88px);align-items:center}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}
.split .shot{margin:0}
.split .shot img{border-radius:1.76% / 2.2%}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px clamp(28px,4vw,56px);margin-top:clamp(56px,7vw,88px);counter-reset:s;text-align:left}
@media (max-width:760px){.steps{grid-template-columns:minmax(0,1fr)}}
.steps li{counter-increment:s}
.steps li::before{content:counter(s);display:block;font-size:3rem;font-weight:300;line-height:1;color:var(--fg3);margin-bottom:22px;font-variant-numeric:tabular-nums}
.steps h3{font-size:1.28rem;font-weight:600;letter-spacing:-.02em}
.steps p{margin-top:8px;color:var(--fg2)}

/* privacy facts */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(48px,6vw,72px);border-top:1px solid var(--line)}
@media (max-width:760px){.facts{grid-template-columns:minmax(0,1fr)}}
.facts li{padding:26px 24px 0;text-align:center}
.facts li + li{border-left:1px solid var(--line)}
@media (max-width:760px){.facts li + li{border-left:0;border-top:1px solid var(--line);margin-top:26px}}
.facts b{display:block;font-weight:600;font-size:1.06rem}
.facts span{display:block;margin-top:4px;color:var(--fg2);font-size:.95rem}

/* reference tables (glossary, 2026 rules) */
.ref{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.ref > div{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:6px 40px;padding:20px 0;border-bottom:1px solid var(--line)}
@media (max-width:640px){.ref > div{grid-template-columns:minmax(0,1fr)}}
.ref dt{font-weight:600}
.ref dt code{font-family:var(--code);font-size:.8em;font-weight:500;color:var(--fg3);margin-left:6px}
.ref dd{color:var(--fg2)}
.stamp{font-size:.84rem;color:var(--fg3);margin-top:18px}

/* FAQ */
.faq{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;font-size:clamp(1.08rem,1rem + .3vw,1.24rem);font-weight:600;letter-spacing:-.018em;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:9px;height:9px;border-right:1.5px solid var(--fg2);border-bottom:1.5px solid var(--fg2);transform:translateY(-3px) rotate(45deg);transition:transform .25s ease}
.faq details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.faq .a{padding:0 44px 26px 0;color:var(--fg2);display:flex;flex-direction:column;gap:10px}

/* quiet entrance for images only */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(24px) scale(.985);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
  .js .reveal.on{opacity:1;transform:none}
}