/* 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 .hero-shot{margin-top:40px;border:.5px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg-soft);max-width:900px}
#page-solar .hero-shot img{display:block;width:100%;height:auto}
#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. Two per row (William, 2026-07-23): four cards over
   auto-fit resolved to three columns at this content width, leaving an
   awkward 3+1. A fixed two-column grid always lands four cards as 2x2. */
#page-solar .pain{display:grid;grid-template-columns:repeat(2,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-ink);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-ink)}

/* Animated funnel dots: two pass through, four are removed at the first
   filter, two at the second and one at the third. 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}
#page-solar .fnl .fm9{animation-name:fnlDropG;animation-delay:3s}
@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}}
@keyframes fnlDropG{0%{transform:translate(28px,68px);opacity:0}7%{opacity:.8}60%{transform:translate(340px,96px);opacity:.8}80%{transform:translate(350px,150px);opacity:0}100%{transform:translate(350px,150px);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-ink)}
#page-solar .leadrec .r .v{color:var(--navy);font-weight:500;text-align:right}

/* Your deal-making tools. Two cards per row, not three, matching the Gmaven CRE
   tools grids (William, 2026-07-22): at three across the picture in each card
   was only about 250px wide, too small to read anything in a product screen.
   Six cards over two columns is exactly three rows. The tile is taller to suit
   the extra width, so the picture is not left in a letterbox slot. */
#page-solar .tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,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:190px;display:flex;flex-direction:column;justify-content:center;padding:18px}

/* Real screenshot in a tool card, with the click-to-enlarge lightbox.
   Mirrors the Gmaven CRE tools pages (see brokers.css), scoped to this page. */
#page-solar .tool .shot{border:.5px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg-soft)}
#page-solar .tool .shot a{display:block}
#page-solar .tool .shot a:hover{opacity:.9}
#page-solar .tool .shot img{display:block;width:100%;height:auto}
#page-solar .shotbox{display:none}
#page-solar .shotbox:target{display:flex;align-items:center;justify-content:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;padding-top:26px;padding-bottom:26px;padding-left:26px;padding-right:26px}
#page-solar .shot-scrim{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(8,46,74,.86)}
#page-solar .shot-frame{position:relative;width:100%;max-width:1180px}
#page-solar .shot-frame img{display:block;width:100%;height:auto;max-height:84vh;object-fit:contain;border-radius:10px}
#page-solar .shot-close{position:absolute;top:12px;right:12px;background:var(--navy);color:var(--bg);border-radius:999px;padding-top:7px;padding-bottom:7px;padding-left:16px;padding-right:16px;font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
#page-solar .shot-close:hover{background:var(--cyan);color:var(--ink-on-cyan)}

/* Why us: credibility items. Two per row (William, 2026-07-23), same reasoning
   as .pain above: a fixed two-column grid always lands four cards as 2x2. */
#page-solar .secret{display:grid;grid-template-columns:repeat(2,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-ink);margin-top:2px;max-width:210px}

/* The fixed two-column .pain and .secret grids need to collapse to one column
   on a phone; auto-fit used to do this for free. */
@media(max-width:640px){
  #page-solar .pain{grid-template-columns:1fr}
  #page-solar .secret{grid-template-columns:1fr}
}