/* Solar Home. Colors sampled from solar_home_primary.png. */
:root,:root[data-theme="light"]{
 --navy:#003870;--teal:#00c0b0;--gold:#f8a008;--orange:#f8a008;--orange-dark:#855400;
 --orange-soft:#fff3db;--btn:#003870;--btn-h:#005593;--ink:#082e59;--dark:#082e59;
 --text:#395574;--muted:#526983;--rule:#dce9f1;--sand:#f1f8fc;--paper:#fff;--page:#fff;
 --disp:'InterVar',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
 --body:'InterVar',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
 --leaf:#007e74;--leaf-soft:#e4f8f3;--shell:1240px;color-scheme:light;
}
body{font-weight:400;background:var(--page);color:var(--text)}
h1,h2,h3,h4{font-family:var(--disp);color:var(--dark);font-weight:750;letter-spacing:-.035em}
h1{font-size:clamp(36px,4.15vw,58px);line-height:1.04;font-weight:850;letter-spacing:-.055em}
h2{font-size:clamp(28px,3.1vw,40px);line-height:1.14}h3{letter-spacing:-.025em}
a{color:#00588c}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #007e74;outline-offset:4px}
.top{background:#fff;border-bottom:1px solid #e4eff5;padding:18px 0}
.top .logo{height:46px!important;width:auto;max-width:245px;object-fit:contain}
.top .brandmark{background:none!important;border-radius:0!important;padding:0!important}
.top nav a,.signin-link{font-family:var(--body);font-size:13px;font-weight:650;color:var(--navy)}
.top .wrap{gap:26px}.top nav{gap:24px}.top-act{gap:18px}
.btn{background:linear-gradient(110deg,#0056ad,#007f92);color:#fff;border:0;border-radius:999px;box-shadow:0 8px 20px #0056ad20;font-family:var(--body);font-weight:650;letter-spacing:0;text-transform:none;min-height:50px;padding:13px 24px;transition:transform .2s,box-shadow .2s}
.btn:hover{background:linear-gradient(110deg,#003870,#006e72);transform:translateY(-2px);box-shadow:0 12px 25px #00387028}
.btn-ghost,.btn-quiet{background:#ffffffc9;border:1px solid #92b8da;color:var(--navy);box-shadow:none}
.btn-ghost:hover,.btn-quiet:hover{background:#edf7ff;color:var(--navy)}
.btn-sm{min-height:42px;padding:10px 20px;font-size:13px}
.kicker{color:#38608d;background:none;padding:0;font-size:11px;letter-spacing:.2em;font-weight:700}
.grad{background:linear-gradient(95deg,#0060b7 4%,#008f91 47%,#f8a008 79%);background-clip:text;-webkit-background-clip:text;color:transparent}
.hero{position:relative;max-width:none;padding:0;isolation:isolate;overflow:hidden;background:#eff8fc}
.hero::before{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#f6fcff 0%,#f6fcffef 31%,#f6fcff30 70%),linear-gradient(0deg,#fff,transparent 42%),url('/img/learn/solar-electric.webp') right center/auto 100% no-repeat}
.hero-grid{max-width:1240px;margin:auto;padding:64px 24px 76px;grid-template-columns:1fr 1.12fr;align-items:center;gap:28px;min-height:640px}
.hero .stack{gap:22px}.hero .lede{font-size:18px;line-height:1.55;max-width:39ch}.hero .herobtns{gap:12px;margin:2px 0}.hero .herobtns .btn{width:auto}
.hero .signin-col{position:relative;top:auto;min-width:0;gap:0}
.hero .trustline{font-size:13px;border:0;padding:0;max-width:46ch;color:#345577}
.hero-checks{display:flex;flex-wrap:wrap;gap:10px 19px;font-size:11px;color:#315578}.hero-checks span::before{content:'✓';display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#00877c;color:#fff;margin-right:6px;font-weight:750}
.devicestage{position:relative;padding:64px 38px 56px 0;margin-top:56px;isolation:isolate;transform:rotate(-2deg)}
.laptop{position:relative;border:8px solid #132a3e;border-bottom-width:13px;border-radius:18px 18px 7px 7px;background:#f4faff;box-shadow:0 24px 50px #00387030}
.laptop-bar{display:flex;gap:5px;align-items:center;height:26px;background:#f8fcff;padding:0 10px;border-bottom:1px solid #dce9f1}.laptop-bar>span{width:5px;height:5px;border-radius:50%;background:#96acbd}.laptop-bar img{height:17px;width:auto;margin-right:auto}
.laptop-screen{background:#eff7fc;min-height:260px;display:grid;grid-template-columns:98px 1fr}
.device-nav{padding:18px 10px;background:white;display:flex;flex-direction:column;gap:16px;font-size:9px;color:#395574;border-right:1px solid #dce9f1}.device-nav b{color:#005daf}.device-nav span::before{content:'◇';margin-right:6px;color:#008d98}
.laptop .shot-body{padding:17px 13px;background:transparent;gap:14px;min-width:0}.laptop-base{position:absolute;bottom:-24px;left:-29px;right:-29px;height:14px;background:linear-gradient(#dae4ec,#889aa9);border-radius:2px 2px 50% 50%;box-shadow:0 10px 16px #00387026}.laptop-base::after{content:'';position:absolute;width:70px;height:5px;left:calc(50% - 35px);background:#7e919f;border-radius:0 0 6px 6px}
.phone{position:absolute;right:-4px;bottom:16px;width:132px;background:#14283a;border:6px solid #14283a;border-radius:23px;box-shadow:0 20px 30px #00387040;transform:rotate(7deg)}
.phone-screen{background:white;border-radius:17px;padding:17px 9px 13px;display:flex;flex-direction:column;gap:9px;min-height:220px}.phone-screen>img{width:100%;height:auto;margin:5px 0 8px}.phone-row{display:flex;gap:7px;align-items:center;color:#395574;font-size:9px;padding:5px 0}.phone-dot{width:18px;height:18px;border-radius:6px;background:#e2f8f4!important;display:block;flex:none}.phone-screen .demo{font-size:7px;color:#526983;line-height:1.45;margin-top:6px}
.device-caption{font-size:12px;position:absolute;bottom:-17px;left:35px;color:var(--navy);transform:rotate(2deg)}
.shot-body{background:#f0f7fc!important;color:#395574!important}.shot-chrome{background:#e4f0f7}.shot-chrome span{background:#a0b8c9}
.shot b,.shot-body b{font-family:var(--body);color:#003870!important}.s-row{gap:8px}.s-row>b{font-size:12px}.s-pill{color:#00796f!important;background:#e1f6f0!important;border-color:#b6e6dd!important;font-size:8px}
.s-tiles{gap:7px}.s-tiles>div{background:#fff!important;border:1px solid #dce9f1!important;border-radius:9px;padding:10px!important}.s-tiles span{color:#526983!important;font-size:9px!important}.s-tiles b{font-size:17px!important}.s-line,.s-kv,.s-doc,.s-ev{border-color:#dce9f1!important;color:#395574!important}.s-line b{font-size:10px}.s-line span,.s-kv span,.s-ev span{color:#526983!important}.s-ico{color:#007e74!important}.demo,.finelight{color:#526983}.laptop .finelight{font-size:9px;line-height:1.5;margin:0}
.demo-bars{height:42px;display:flex;align-items:flex-end;gap:5px;border-bottom:1px solid #cee2ed}.demo-bars i{flex:1;height:var(--h);background:linear-gradient(#7ce6d2,#00877c);border-radius:2px 2px 0 0}
.home-sections{margin-top:0!important;padding-top:52px;gap:72px;padding-bottom:60px}.home-sections section>p{max-width:78ch}
.bengrid{border:0;background:none;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;margin-top:10px}
.ben{position:relative;min-width:0;border:1px solid #d7e9f1;border-radius:16px;background:linear-gradient(145deg,#fff,var(--tint,#effbf8));padding:25px!important;gap:12px;box-shadow:0 9px 28px #005a8110;transition:transform .25s,box-shadow .25s;transition-delay:calc(var(--i,0)*18ms)}
.ben:nth-child(2){--tint:#eff8ff;--i:1}.ben:nth-child(3){--tint:#fff6e5;--i:2}.ben:nth-child(4){--tint:#f5f1ff;--i:3}.ben:nth-child(5){--tint:#edf7ff;--i:4}.ben:nth-child(6){--tint:#effbf8;--i:5}.ben:last-child{grid-column:auto}
.ben-icon{position:static;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:inset 0 2px 5px #ffffff80,0 8px 18px #00387012;margin-bottom:5px}.ben-icon svg{width:29px;height:29px;stroke-width:1.8}.ic-a,.ic-f{background:linear-gradient(135deg,#45e1ca,#008d87)}.ic-b,.ic-e{background:linear-gradient(135deg,#46bbff,#005abe)}.ic-c{background:linear-gradient(135deg,#ffcb38,#f38b00)}.ic-d{background:linear-gradient(135deg,#c098ff,#693aeb)}
.ben h3{font-size:18px}.ben p{font-size:14px;line-height:1.65}.ben .go{font-size:13px;margin-top:auto;align-self:flex-start;color:#00588c}
@media(hover:hover){.bengrid:hover .ben{transform:translateY(-3px)}.bengrid .ben:hover{transform:translateY(-10px);box-shadow:0 20px 35px #0038701c}.ben:focus-within{transform:translateY(-6px)}.shot:hover{transform:translateY(-5px)}}
.peace-band{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px;padding:40px 0;border-top:1px solid #e2eef5;border-bottom:1px solid #e2eef5}.peace-band .peace-icon{font-size:25px;color:#00877c;background:#eaf9f6;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin-bottom:16px}.peace-band h3{font-size:18px;margin-bottom:10px}.peace-band p{font-size:14px;line-height:1.65}.peace-band h2{font-size:34px;margin:12px 0 16px}
.shots{gap:16px}.shot{box-shadow:0 9px 24px #0038700b;border-radius:14px;transition:transform .2s}.shot figcaption{font-size:13px}.shot .demo{font-size:10px}.shots .s-tiles b{font-size:18px!important}
.cat,.moncard,.card,.faq{border-radius:16px;border:1px solid var(--rule);box-shadow:0 8px 24px #00387006}.cat{overflow:hidden;border-top:0}.cat-photo{height:170px;object-fit:cover}.cat ul{font-size:12px}.cat h3{font-size:18px}.catgrid{gap:18px}.moncard{background:#f4f9fc}.moncard .pill{font-size:10px}.faq{box-shadow:none}.faq summary{font-family:var(--body);color:var(--navy)}
.cta-band{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:1.1fr 1fr;gap:48px;padding:48px;border:1px solid #f1e4ce;border-radius:25px;background:radial-gradient(ellipse at 8% 5%,#ffdea0,transparent 52%),radial-gradient(ellipse at 95% 100%,#bfefe6,transparent 50%),#fffaf0}
.cta-band h2{font-size:38px;max-width:12ch}.cta-band .t{gap:14px}.cta-band p{font-size:15px}.cta-acts{display:flex;flex-direction:column;background:#fff;border:1px solid #fff;border-radius:18px;padding:27px;box-shadow:0 14px 40px #83662312;justify-content:center;gap:16px}.cta-acts .btn{width:100%;min-height:50px}.cta-acts h3{font-size:20px}.cta-acts .small{font-size:12px}
footer{background:#f6fafc;border-top:1px solid #dfebf2}.footer-logo{width:200px;height:auto;display:block;margin-bottom:26px}.footnav a{font-size:13px}.footfoot{font-size:12px}
/* Portal forms and signed in cards share the same visual language. */
.solar-home-portal .hero-grid{min-height:590px;grid-template-columns:1.1fr .9fr;gap:70px}.solar-home-portal .hero::before{background:radial-gradient(ellipse at 90% 10%,#c8f2ed,transparent 50%),radial-gradient(ellipse at 10% 95%,#fff0cb,transparent 60%),#f4faff}
.solar-home-portal #signin{scroll-margin-top:110px;padding:32px;background:#fff;border-top:4px solid var(--teal);box-shadow:0 20px 50px #00387012;border-radius:22px}.solar-home-portal #signin h2{font-size:27px}.solar-home-portal #signin p{font-size:14px}.solar-home-portal #signin label{color:#345577;font-size:13px;font-weight:600}.solar-home-portal input{border-radius:10px;border:1px solid #b9d0e1;background:#f9fcff;color:#003870}.solar-home-portal .hero .signin-col{position:static}
:root.solar-home-app{--o:#005e96;--o-2:#007e85;--o-deep:#003870;--o-ink:#fff;--bg:#f2f8fc;--panel:#fff;--panel-2:#edf6fa;--side:#fff;--line:#d9e7ef;--ink:#082e59;--txt:#395574;--dim:#526983;--good:#007e74;--good-dim:#e4f8f3;--good-ink:#00685f;--good-border:#a8dbd1;--ring-track:#e1edf4;--live-glow:#d9f7f0;--em:#855400;--scrim:242,248,252;--r:18px}
.solar-home-app .side{border-right:1px solid var(--line)}.solar-home-app .side-logo{background:#f5fbff;padding:23px 18px}.solar-home-app .side-logo img{max-width:100%;width:205px;height:auto}.solar-home-app .top-logo{width:145px;height:auto}.solar-home-app .app-top{background:var(--panel);border-bottom:1px solid var(--line)}.solar-home-app .side-nav a.active{border-radius:12px;background:var(--good-dim);color:var(--o-deep)}.solar-home-app .card,.solar-home-app .stat,.solar-home-app .tile{box-shadow:0 6px 22px #00387006}.solar-home-app .b-pri{background:linear-gradient(110deg,#0056ad,#007f92);color:#fff;border-radius:999px}.solar-home-app .app-foot{color:var(--dim)}
@media(prefers-color-scheme:dark){:root.solar-home-app:not([data-theme="light"]){--o:#65cfd7;--o-2:#a1e8e5;--o-deep:#78d8de;--o-ink:#082e59;--bg:#091d31;--panel:#102b44;--panel-2:#16364f;--side:#0c243b;--line:#294860;--ink:#eff8ff;--txt:#c1d5e5;--dim:#a4bbce;--good:#65d8ba;--good-dim:#123d3a;--good-ink:#b0f0de;--good-border:#296158;--ring-track:#28465d;--live-glow:#113f46;--scrim:9,29,49;--em:#ffd07c}}
:root.solar-home-app[data-theme="dark"]{--o:#65cfd7;--o-2:#a1e8e5;--o-deep:#78d8de;--o-ink:#082e59;--bg:#091d31;--panel:#102b44;--panel-2:#16364f;--side:#0c243b;--line:#294860;--ink:#eff8ff;--txt:#c1d5e5;--dim:#a4bbce;--good:#65d8ba;--good-dim:#123d3a;--good-ink:#b0f0de;--good-border:#296158;--ring-track:#28465d;--live-glow:#113f46;--scrim:9,29,49;--em:#ffd07c}
@media(max-width:1050px){.top .logo{max-width:195px}.top nav{gap:15px}.hero-grid{grid-template-columns:1fr 1fr;gap:16px}.laptop-screen{grid-template-columns:70px 1fr}.device-nav{font-size:8px;padding:15px 6px}.laptop .s-row{flex-wrap:wrap}.laptop .s-tiles b{font-size:13px!important}.phone{width:112px}.peace-band{gap:22px}.solar-home-portal .hero-grid{gap:30px}}
@media(max-width:800px){.hero-grid,.solar-home-portal .hero-grid{grid-template-columns:1fr;padding:40px 24px 48px;gap:20px;min-height:0}.hero::before{background:linear-gradient(#f6fcff 10%,#f6fcff70 65%,#fff),url('/img/learn/solar-electric.webp') center bottom/auto 75% no-repeat}.hero .lede{max-width:50ch}.hero h1{max-width:16ch}.devicestage{max-width:560px;width:100%;margin:0 auto;padding-top:20px}.laptop-screen{grid-template-columns:98px 1fr}.device-nav{font-size:9px}.laptop .s-tiles b{font-size:19px!important}.phone{width:130px;right:2px}.home-sections{gap:48px}.bengrid{grid-template-columns:repeat(2,minmax(0,1fr))}.peace-band{grid-template-columns:1fr 1fr}.peace-band>div:first-child{grid-column:1/-1}.cta-band{gap:25px;padding:30px;grid-template-columns:1fr}.cta-band h2{max-width:none}.cat-photo{height:190px}.solar-home-portal #signin{scroll-margin-top:95px}}
@media(max-width:480px){.top .logo{max-width:190px;height:39px!important}.wrap{padding-left:20px;padding-right:20px}.hero-grid{padding:32px 20px 42px}.hero .herobtns{flex-direction:column;align-items:stretch}.hero .herobtns .btn{width:100%}.devicestage{padding-right:26px}.laptop{border-width:6px}.laptop-screen{grid-template-columns:1fr;min-height:235px}.device-nav{display:none}.laptop .shot-body{padding-right:36px;padding-left:10px}.laptop .s-tiles b{font-size:14px!important}.laptop .s-tiles>div{padding:6px!important}.laptop .s-pill{font-size:7px}.laptop-base{left:-14px;right:-14px}.phone{width:99px;right:-5px;bottom:8px}.phone-screen{padding:12px 6px;min-height:195px;gap:6px}.phone-row{font-size:8px}.phone-dot{width:13px;height:13px}.bengrid{gap:12px}.ben{padding:19px!important}.ben-icon{width:52px;height:52px}.ben h3{font-size:16px}.ben p{font-size:13px}.ben .go{font-size:12px}.peace-band{gap:24px}.peace-band h2{font-size:30px}.cta-band{padding:24px}.cta-acts{padding:22px}.cta-band h2{font-size:31px}.hero-checks{font-size:10px;gap:8px 12px}.solar-home-portal #signin{padding:24px}.top .wrap{gap:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.ben,.bengrid:hover .ben,.bengrid .ben:hover,.shot:hover,.btn:hover{transform:none!important}}
.portal-reassure{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-top:45px;padding-bottom:50px}.portal-reassure h2{font-size:22px;margin-bottom:12px}.portal-reassure p{font-size:15px}@media(max-width:640px){.portal-reassure{grid-template-columns:1fr;gap:25px}}
/* Ed 2026-09-28: same "wasted space on either side" issue as my.allsolarenergy.com,
   asked to be checked here too. Both the hero and the closing reassurance section
   were capped at the marketing page's normal 1240px shell on a wide desktop.
   Matched to the same 1560px used on the AllSolar page, scoped to this exact
   marketing page (.solar-home-portal) so it never touches app.html or any other
   consumer of the shared .hero-grid/.wrap classes. */
.solar-home-portal .hero-grid,.solar-home-portal .portal-reassure{max-width:1560px}
:root.solar-home-app{--dark:var(--ink);--text:var(--txt);--muted:var(--dim);--rule:var(--line);--paper:var(--panel);--sand:var(--panel-2);--page:var(--bg)}.solar-home-app .app-top{background:#f5fbff;--ink:#003870;--dim:#526983;--txt:#395574;--panel-2:#e8f3f8}
@media(max-width:640px){.top .top-act .btn-sm{display:none}.top .top-act .signin-link{display:inline-flex;padding:8px;white-space:nowrap}.top .logo{max-width:185px}}.solar-home-portal .hero.wrap{padding-left:0;padding-right:0}
.solar-home-app .side{background:#f5fbff;--ink:#003870;--txt:#395574;--dim:#526983;--o:#005e96;--panel:#fff;--panel-2:#e9f4f8;--line:#dce9f1}.solar-home-app .side-logo{background:none;border:0;box-shadow:none;padding:12px 6px 20px}.solar-home-app .nav-item.is-on{background:#dcf3ef;border-color:#abdcd3;color:#003870}.solar-home-app .avatar{background:linear-gradient(135deg,#f8c854,#f8a008);color:#003870}.solar-home-app .side-help .btn-call,.solar-home-app .side-help .btn-call:hover,.solar-home-app .b-pri:hover,.solar-home-app .b.b-pri:hover{background:linear-gradient(110deg,#003870,#007e85);color:white}.solar-home-app .hero{padding:28px;background:linear-gradient(110deg,var(--panel),var(--good-dim))}.solar-home-app .hero::before,.solar-home-app .hero::after{display:none}
/* ⛔ Fixed 2026-09-27 (Ed: "dark mode, the left hamburger menu's item labels
 * are hard to read"). The block above hardcodes a light sidebar (background
 * + --ink/--txt/--dim/--o/--panel/--panel-2/--line) with NO dark-mode guard —
 * no [data-theme] selector, no @media query — so it always wins on
 * specificity over the correctly-computed :root dark variables (lines 65/66
 * above) for anything inside .side, in EITHER theme. The two rules below
 * restore dark mode for the sidebar and its active-item highlight, reusing
 * this file's own dark palette (same --side/--panel/--line/--good-* values
 * every other dark-mode surface already uses) rather than inventing new
 * colors, and using var(--side) so a future dark palette edit is not
 * duplicated here. Same fix, same reasoning, for .app-top (line above) —
 * the header bar had the identical unconditional-light bug. */
:root.solar-home-app[data-theme="dark"] .side,
:root.solar-home-app[data-theme="dark"] .app-top{background:var(--side);--ink:#eff8ff;--txt:#c1d5e5;--dim:#a4bbce;--o:#65cfd7;--panel:#102b44;--panel-2:#16364f;--line:#294860}
:root.solar-home-app[data-theme="dark"] .nav-item.is-on{background:var(--good-dim);border-color:var(--good-border);color:var(--good-ink)}
@media(prefers-color-scheme:dark){
  :root.solar-home-app:not([data-theme="light"]) .side,
  :root.solar-home-app:not([data-theme="light"]) .app-top{background:var(--side);--ink:#eff8ff;--txt:#c1d5e5;--dim:#a4bbce;--o:#65cfd7;--panel:#102b44;--panel-2:#16364f;--line:#294860}
  :root.solar-home-app:not([data-theme="light"]) .nav-item.is-on{background:var(--good-dim);border-color:var(--good-border);color:var(--good-ink)}
}