/* Energy: wheeling, the offtaker-leads page.
   Page-specific styles, all scoped under #page-wheeling. Shared chrome (header,
   buttons, eyebrow, band-soft base, the .contrast compare, .imgspec, .ownkey,
   .xlink, the cta-band, breadcrumb, footer) lives in chrome.css and is reused,
   not cloned. The block grammar here (pain, funnel, leadrec, tools, secret,
   proofband) mirrors the solar page's, re-scoped to this page; when solar and
   Find me customers are built these become a shared block. Tokens only, no raw
   hex. The funnel's inline SVG keeps its own fills (SVG presentation
   attributes, not CSS). */

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

/* Secondary hero button scrolls to the market block (no hash link), so it is a
   real button element reset to match the shared ghost-button (.btn-g) look. */
#page-wheeling .hero .actions .btn-scroll{background:none;font-family:var(--body);cursor:pointer;line-height:1.2}

/* 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-wheeling .pain{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:30px}
#page-wheeling .pain .p{border:.5px solid var(--line);border-radius:12px;padding:22px;background:var(--bg)}
#page-wheeling .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-wheeling .pain .p h3 .gic{color:var(--pain-icon);flex:0 0 auto;margin-top:1px}
#page-wheeling .pain .p p{font-size:13.5px;line-height:1.5}

/* The approach: funnel diagram */
#page-wheeling .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-wheeling .funnel .big{font-family:var(--display);font-weight:700;font-size:34px;color:var(--navy);letter-spacing:-.03em;line-height:1}
#page-wheeling .funnel .cap{font-size:12px;color:var(--muted-ink);margin-top:4px}
#page-wheeling .funnel .fnl{flex:1 1 260px;min-width:240px;max-width:560px;height:auto;display:block}
#page-wheeling .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-wheeling .fnl .fm{opacity:0;animation-duration:6.6s;animation-timing-function:linear;animation-iteration-count:infinite}
#page-wheeling .fnl .fm1{animation-name:whFnlPassA}
#page-wheeling .fnl .fm2{animation-name:whFnlDropA;animation-delay:.7s}
#page-wheeling .fnl .fm3{animation-name:whFnlDropB;animation-delay:1.4s}
#page-wheeling .fnl .fm5{animation-name:whFnlDropC;animation-delay:2s}
#page-wheeling .fnl .fm4{animation-name:whFnlPassB;animation-delay:2.7s}
#page-wheeling .fnl .fm7{animation-name:whFnlDropE;animation-delay:3.6s}
#page-wheeling .fnl .fm8{animation-name:whFnlDropF;animation-delay:4.5s}
#page-wheeling .fnl .fm6{animation-name:whFnlDropD;animation-delay:5.4s}
#page-wheeling .fnl .fm9{animation-name:whFnlDropG;animation-delay:3s}
@keyframes whFnlPassA{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 whFnlPassB{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 whFnlDropA{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 whFnlDropB{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 whFnlDropE{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 whFnlDropF{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 whFnlDropC{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 whFnlDropD{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 whFnlDropG{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-wheeling .fnl .fm{animation:none;display:none}}

/* What's in a lead: sample lead record */
#page-wheeling .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-wheeling .leadrec .grp{padding:22px 24px;border-right:.5px solid var(--line)}
#page-wheeling .leadrec .grp:last-child{border-right:0}
#page-wheeling .leadrec .gh{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-ink);font-weight:600;margin-bottom:12px}
#page-wheeling .leadrec .r{display:flex;justify-content:space-between;gap:14px;font-size:13px;padding:6px 0;border-bottom:.5px solid var(--line-faint)}
#page-wheeling .leadrec .r:last-child{border-bottom:0}
#page-wheeling .leadrec .r .k{color:var(--muted-ink)}
#page-wheeling .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 and the solar page (William, 2026-07-23): 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-wheeling .tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:16px;margin-top:30px}
#page-wheeling .tool h3{font-size:15px;font-weight:600;color:var(--navy);margin:0 0 10px}
#page-wheeling .tool .imgspec{min-height:190px;display:flex;flex-direction:column;justify-content:center;padding:18px}

/* 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-wheeling .secret{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:30px}
#page-wheeling .secret .s{display:flex;gap:11px;align-items:flex-start}
#page-wheeling .secret .s .gic{color:var(--cyan-ink);flex:0 0 auto;margin-top:2px}
#page-wheeling .secret .s h3{font-size:15.5px;font-weight:600;color:var(--navy)}
#page-wheeling .secret .s p{font-size:13.5px;line-height:1.5}

/* The prize and Proven in market: both use this proof band. Always one row of
   four equal columns (William, 2026-07-23): flex-wrap let the longer "Proven
   in market" labels wrap unevenly while the shorter "The prize" labels
   happened to fit on one line, so the same component looked different in the
   two places it is used. */
#page-wheeling .proofband{display:grid;grid-template-columns:repeat(4,1fr);gap:46px;align-items:start;margin-top:6px}
#page-wheeling .proofband .v{font-family:var(--display);font-weight:700;font-size:32px;color:var(--navy);letter-spacing:-.03em}
#page-wheeling .proofband .l{font-size:13px;color:var(--muted-ink);margin-top:2px;max-width:210px}

/* The market block: the quiet generation-side line beneath the workings */
#page-wheeling .genline{margin-top:22px;font-size:14px;color:var(--muted-ink);max-width:680px}
#page-wheeling .genline a{color:var(--cyan-ink);font-weight:600}
#page-wheeling .genline a:hover{color:var(--navy)}

/* The fixed-column .pain, .secret and .proofband grids need to collapse on a
   phone; auto-fit and flex-wrap used to do this for free. Proofband goes to
   2x2 rather than a single column, so four short stats do not stack into an
   overly tall strip. */
@media(max-width:640px){
  #page-wheeling .pain{grid-template-columns:1fr}
  #page-wheeling .secret{grid-template-columns:1fr}
  #page-wheeling .proofband{grid-template-columns:repeat(2,1fr)}
}