/* Energy: solar, the commercial-solar leads page.
   Page-specific styles, all scoped under #page-solar. Shared chrome (header,
   buttons, eyebrow, band-soft base, the .contrast compare, .imgspec, .xlink,
   the cta-band, breadcrumb, footer) lives in chrome.css and is reused, not
   cloned. Raw #fff swapped for var(--bg); the muted-red pain icon and the
   faint lead-record divider use the --pain-icon / --line-faint tokens added
   to tokens.css. The funnel's inline SVG keeps its own fills (SVG attributes,
   not CSS). These blocks will later be shared with the wheeling and fmc pages;
   for now only solar exists, so they are scoped to it. */

/* Hero and section rhythm (mirrors the other pages) */
#page-solar .hero{padding-top:78px;padding-bottom:14px}
#page-solar .hero h1{font-size:clamp(33px,5vw,48px);font-weight:700;max-width:760px}
#page-solar .hero p.lead{font-size:19px;max-width:600px;margin-top:22px;color:var(--slate)}
#page-solar .sec{padding-top:64px;padding-bottom:64px}
#page-solar .sec>h2,#page-solar .band-soft h2{font-size:clamp(26px,3.2vw,34px);font-weight:700;max-width:640px}
#page-solar .sec>.sub,#page-solar .band-soft .sub{font-size:16px;max-width:600px;margin-top:8px;color:var(--slate)}

/* The problem: pain cards */
#page-solar .pain{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:16px;margin-top:30px}
#page-solar .pain .p{border:.5px solid var(--line);border-radius:12px;padding:22px;background:var(--bg)}
#page-solar .pain .p h3{font-size:15.5px;font-weight:600;color:var(--navy);margin-bottom:6px;display:flex;gap:9px;align-items:flex-start}
#page-solar .pain .p h3 .gic{color:var(--pain-icon);flex:0 0 auto;margin-top:1px}
#page-solar .pain .p p{font-size:13.5px;line-height:1.5}

/* The approach: funnel diagram */
#page-solar .funnel{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:26px;background:var(--bg);border:.5px solid var(--line);border-radius:14px;padding:24px 30px}
#page-solar .funnel .big{font-family:var(--display);font-weight:700;font-size:34px;color:var(--navy);letter-spacing:-.03em;line-height:1}
#page-solar .funnel .cap{font-size:12px;color:var(--muted);margin-top:4px}
#page-solar .funnel .fnl{flex:1 1 260px;min-width:240px;max-width:560px;height:auto;display:block}
#page-solar .funnel .fcap{flex-basis:100%;font-size:13px;color:var(--muted)}

/* Animated funnel dots: two pass through, four are removed at the first
   filter, two at the second. Each removal falls out just before its dashed
   line. Motion is disabled for reduced-motion users. */
#page-solar .fnl .fm{opacity:0;animation-duration:6.6s;animation-timing-function:linear;animation-iteration-count:infinite}
#page-solar .fnl .fm1{animation-name:fnlPassA}
#page-solar .fnl .fm2{animation-name:fnlDropA;animation-delay:.7s}
#page-solar .fnl .fm3{animation-name:fnlDropB;animation-delay:1.4s}
#page-solar .fnl .fm5{animation-name:fnlDropC;animation-delay:2s}
#page-solar .fnl .fm4{animation-name:fnlPassB;animation-delay:2.7s}
#page-solar .fnl .fm7{animation-name:fnlDropE;animation-delay:3.6s}
#page-solar .fnl .fm8{animation-name:fnlDropF;animation-delay:4.5s}
#page-solar .fnl .fm6{animation-name:fnlDropD;animation-delay:5.4s}
@keyframes fnlPassA{0%{transform:translate(28px,62px);opacity:0}6%{opacity:.85}62%{transform:translate(392px,79px);opacity:.85}82%{transform:translate(508px,80px);opacity:.85}90%{transform:translate(534px,80px);opacity:0}100%{transform:translate(534px,80px);opacity:0}}
@keyframes fnlPassB{0%{transform:translate(36px,118px);opacity:0}6%{opacity:.85}64%{transform:translate(392px,83px);opacity:.85}84%{transform:translate(512px,80px);opacity:.85}92%{transform:translate(534px,80px);opacity:0}100%{transform:translate(534px,80px);opacity:0}}
@keyframes fnlDropA{0%{transform:translate(30px,95px);opacity:0}7%{opacity:.8}36%{transform:translate(136px,101px);opacity:.8}54%{transform:translate(146px,172px);opacity:0}100%{transform:translate(146px,172px);opacity:0}}
@keyframes fnlDropB{0%{transform:translate(32px,45px);opacity:0}7%{opacity:.8}38%{transform:translate(140px,55px);opacity:.8}48%{transform:translate(146px,118px);opacity:.6}60%{transform:translate(151px,174px);opacity:0}100%{transform:translate(151px,174px);opacity:0}}
@keyframes fnlDropE{0%{transform:translate(48px,130px);opacity:0}7%{opacity:.8}34%{transform:translate(133px,124px);opacity:.8}52%{transform:translate(141px,170px);opacity:0}100%{transform:translate(141px,170px);opacity:0}}
@keyframes fnlDropF{0%{transform:translate(26px,72px);opacity:0}7%{opacity:.8}40%{transform:translate(141px,80px);opacity:.8}58%{transform:translate(149px,168px);opacity:0}100%{transform:translate(149px,168px);opacity:0}}
@keyframes fnlDropC{0%{transform:translate(30px,80px);opacity:0}7%{opacity:.8}52%{transform:translate(256px,90px);opacity:.8}70%{transform:translate(264px,162px);opacity:0}100%{transform:translate(264px,162px);opacity:0}}
@keyframes fnlDropD{0%{transform:translate(40px,132px);opacity:0}7%{opacity:.8}50%{transform:translate(258px,104px);opacity:.8}68%{transform:translate(266px,158px);opacity:0}100%{transform:translate(266px,158px);opacity:0}}
@media(prefers-reduced-motion:reduce){#page-solar .fnl .fm{animation:none;display:none}}

/* What's in a lead: sample lead record */
#page-solar .leadrec{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:26px;border:.5px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg)}
#page-solar .leadrec .grp{padding:22px 24px;border-right:.5px solid var(--line)}
#page-solar .leadrec .grp:last-child{border-right:0}
#page-solar .leadrec .gh{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-ink);font-weight:600;margin-bottom:12px}
#page-solar .leadrec .r{display:flex;justify-content:space-between;gap:14px;font-size:13px;padding:6px 0;border-bottom:.5px solid var(--line-faint)}
#page-solar .leadrec .r:last-child{border-bottom:0}
#page-solar .leadrec .r .k{color:var(--muted)}
#page-solar .leadrec .r .v{color:var(--navy);font-weight:500;text-align:right}

/* Your deal-making tools */
#page-solar .tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:30px}
#page-solar .tool h3{font-size:15px;font-weight:600;color:var(--navy);margin:0 0 10px}
#page-solar .tool .imgspec{min-height:118px;display:flex;flex-direction:column;justify-content:center;padding:18px}

/* Why us: credibility items */
#page-solar .secret{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:20px;margin-top:30px}
#page-solar .secret .s{display:flex;gap:11px;align-items:flex-start}
#page-solar .secret .s .gic{color:var(--cyan-ink);flex:0 0 auto;margin-top:2px}
#page-solar .secret .s h3{font-size:15.5px;font-weight:600;color:var(--navy)}
#page-solar .secret .s p{font-size:13.5px;line-height:1.5}

/* The prize: proof band */
#page-solar .proofband{display:flex;flex-wrap:wrap;gap:46px;margin-top:6px}
#page-solar .proofband .v{font-family:var(--display);font-weight:700;font-size:32px;color:var(--navy);letter-spacing:-.03em}
#page-solar .proofband .l{font-size:13px;color:var(--muted);margin-top:2px;max-width:210px}