/* Solar infographic icon enhancement — approved 2026-09-12.
   Visual-only: preserves all existing solar content, structure, copy and behavior. */
#how-solar-works .solarCombinedGraphic{background:linear-gradient(180deg,#f8fcff 0%,#fffdf2 100%)!important}
#how-solar-works .scgPanel{border-color:#d9e79b!important;box-shadow:0 12px 28px rgba(13,35,64,.06)}
#how-solar-works .scgPanelTitle{background:linear-gradient(90deg,#fff4b8,#edf6c9)!important}
#how-solar-works .scgNo{background:linear-gradient(145deg,#ffd95d,#ffbc1c)!important;box-shadow:0 8px 18px rgba(13,35,64,.16)!important}

/* Right-side planning icons: larger, cleaner and more dimensional like the approved reference. */
#how-solar-works .planningPath article{position:relative}
#how-solar-works .planningIcon{
  width:98px!important;height:98px!important;border-radius:50%!important;
  display:grid!important;place-items:center!important;margin:0 auto 14px!important;
  box-shadow:0 14px 28px rgba(13,35,64,.16), inset 0 1px 0 rgba(255,255,255,.35)!important;
  border:0!important;overflow:visible!important;
}
#how-solar-works .planningIcon svg{width:54px!important;height:54px!important;filter:drop-shadow(0 2px 2px rgba(13,35,64,.12))}
#how-solar-works .planningIcon.energyUse{background:linear-gradient(145deg,#ff8b68,#ff5d39)!important;color:#fff!important}
#how-solar-works .planningIcon.sitePin{background:linear-gradient(145deg,#64b6ee,#187cc9)!important;color:#fff!important}
#how-solar-works .planningIcon.systemPlan{background:linear-gradient(145deg,#79bc59,#459537)!important;color:#fff!important}
#how-solar-works .planningIcon.monitorIcon{background:linear-gradient(145deg,#ffd35b,#f0ad24)!important;color:#0d2340!important}
#how-solar-works .planningIcon.energyUse svg path{stroke:#fff!important}
#how-solar-works .planningIcon.sitePin svg path{fill:#fff!important}
#how-solar-works .planningIcon.sitePin svg circle{fill:#2e91d3!important}
#how-solar-works .planningIcon.systemPlan svg rect{fill:#fff!important}
#how-solar-works .planningIcon.systemPlan svg path{stroke:#4f9c3e!important}
#how-solar-works .planningIcon.monitorIcon svg rect{stroke:#0d2340!important}
#how-solar-works .planningIcon.monitorIcon svg path{fill:#0d2340!important;stroke:#0d2340!important}
#how-solar-works .planNum{width:28px!important;height:28px!important;font-size:13px!important;background:linear-gradient(145deg,#268bd0,#1166ad)!important;box-shadow:0 5px 12px rgba(13,35,64,.14)!important}
#how-solar-works .planningArrow{font-size:30px!important;color:#55a145!important;font-weight:900!important;transform:translateY(-5px)}

/* Left-side energy path: add polish and stronger depth to the existing scene graphics. */
#how-solar-works .energyScene{background:linear-gradient(180deg,#fff 0%,#fbfdff 68%,#f6fbee 100%)!important}
#how-solar-works .sunMark{background:radial-gradient(circle at 38% 35%,#ffe77d,#ffc326 62%,#f2aa00)!important;box-shadow:0 0 0 9px #fff6ca,0 8px 18px rgba(242,173,0,.28)!important}
#how-solar-works .panelRack{background:#153c6d!important;border-color:#e7eef4!important;box-shadow:0 16px 26px rgba(13,35,64,.24)!important}
#how-solar-works .panelRack i{background:linear-gradient(145deg,#18518b,#5ea2db)!important;border-color:#a8d1ee!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
#how-solar-works .inverterBox{background:linear-gradient(145deg,#ffffff,#e9eef1)!important;box-shadow:0 16px 28px rgba(13,35,64,.18)!important;border-color:#bcc8d0!important}
#how-solar-works .invScreen{background:linear-gradient(180deg,#173d62,#0c2540)!important;box-shadow:inset 0 0 0 1px #3f6f94,0 2px 5px rgba(0,0,0,.14)}
#how-solar-works .houseGraphic{background:linear-gradient(145deg,#fff,#e5edf1)!important;box-shadow:0 16px 28px rgba(13,35,64,.18)!important;border-color:#a5b4bf!important}
#how-solar-works .houseGraphic .roof{background:linear-gradient(145deg,#3c5568,#263d51)!important}
#how-solar-works .houseGraphic .roofPanel{box-shadow:0 4px 8px rgba(13,35,64,.2)}
#how-solar-works .meterGraphic{background:linear-gradient(145deg,#fff,#e8eef1)!important;box-shadow:0 12px 22px rgba(13,35,64,.16)!important}
#how-solar-works .sceneArrow{font-size:32px!important;color:#2388d0!important;text-shadow:0 2px 6px rgba(35,136,208,.15)}
#how-solar-works .sceneNum{width:28px!important;height:28px!important;font-size:13px!important;background:linear-gradient(145deg,#268bd0,#1166ad)!important;box-shadow:0 5px 12px rgba(13,35,64,.14)!important}


/* Locked icon polish v2 — keep this after the base infographic styles. */
#how-solar-works .planningIcon{
  position:relative!important;width:106px!important;height:106px!important;
  border:6px solid rgba(255,255,255,.82)!important;
  box-shadow:0 0 0 2px rgba(13,35,64,.08),0 17px 34px rgba(13,35,64,.20),inset 0 3px 7px rgba(255,255,255,.28),inset 0 -7px 12px rgba(13,35,64,.10)!important;
}
#how-solar-works .planningIcon:before{content:""!important;position:absolute!important;inset:6px!important;border:1px solid rgba(255,255,255,.34)!important;border-radius:50%!important;pointer-events:none!important}
#how-solar-works .planningIcon svg{position:relative!important;z-index:1!important;width:58px!important;height:58px!important;filter:drop-shadow(0 3px 3px rgba(13,35,64,.18))!important}
#how-solar-works .planningIcon.energyUse{background:linear-gradient(145deg,#ff9877 0%,#ff6847 52%,#e9472f 100%)!important}
#how-solar-works .planningIcon.sitePin{background:linear-gradient(145deg,#70c2f3 0%,#2d95d7 50%,#146db6 100%)!important}
#how-solar-works .planningIcon.systemPlan{background:linear-gradient(145deg,#86c86a 0%,#59a447 52%,#398331 100%)!important}
#how-solar-works .planningIcon.monitorIcon{background:linear-gradient(145deg,#ffe078 0%,#ffc23f 52%,#eaa51a 100%)!important}
#how-solar-works .planNum,#how-solar-works .sceneNum{border:2px solid #fff!important;box-shadow:0 0 0 1px rgba(13,35,64,.08),0 6px 14px rgba(13,35,64,.20)!important}
#how-solar-works .panelRack{border-width:6px!important;box-shadow:0 18px 32px rgba(13,35,64,.28),inset 0 2px 3px rgba(255,255,255,.18)!important}
#how-solar-works .panelRack i{background:linear-gradient(135deg,#103f75 0%,#367fba 54%,#80bbe6 100%)!important;box-shadow:inset 2px 2px 3px rgba(255,255,255,.18),inset -2px -2px 3px rgba(7,35,65,.18)!important}
#how-solar-works .inverterBox,#how-solar-works .houseGraphic,#how-solar-works .meterGraphic{filter:drop-shadow(0 3px 2px rgba(13,35,64,.08))!important}
#how-solar-works .invScreen{box-shadow:0 0 0 2px #d9e5ec,inset 0 0 8px rgba(75,174,239,.45),0 2px 6px rgba(13,35,64,.20)!important}
#how-solar-works .houseGraphic .window{box-shadow:inset 0 0 0 1px #5fa9d8,0 2px 4px rgba(13,35,64,.12)!important}
#how-solar-works .meterGraphic span{box-shadow:inset 0 1px 3px rgba(13,35,64,.18)!important}
#how-solar-works .sceneArrow,#how-solar-works .planningArrow{filter:drop-shadow(0 3px 3px rgba(13,35,64,.12))!important}

@media(max-width:900px){
  #how-solar-works .planningIcon{width:92px!important;height:92px!important}
  #how-solar-works .planningIcon svg{width:50px!important;height:50px!important}
}
@media(max-width:620px){
  #how-solar-works .planningIcon{width:82px!important;height:82px!important}
  #how-solar-works .planningIcon svg{width:46px!important;height:46px!important}
  #how-solar-works .planningArrow{font-size:24px!important}
}

/* Desktop fit correction and icon clarity v3 — preserves the approved two-panel structure. */
@media(min-width:981px){
  #how-solar-works .scgMain{grid-template-columns:1.02fr .98fr!important}
  #how-solar-works .planningPath{grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr) 18px minmax(0,1fr) 18px minmax(0,1fr)!important;gap:3px!important;padding:28px 8px 20px!important;overflow:visible!important}
  #how-solar-works .planningPath article{min-width:0!important}
  #how-solar-works .planningIcon{width:88px!important;height:88px!important;border-width:5px!important;margin-bottom:12px!important}
  #how-solar-works .planningIcon svg{width:49px!important;height:49px!important}
  #how-solar-works .planningArrow{font-size:22px!important;transform:translateY(-4px)!important}
  #how-solar-works .planningPanel{overflow:hidden!important}
  #how-solar-works .planningPath article:last-child{padding-right:2px!important}
}
#how-solar-works .planningIcon{isolation:isolate!important}
#how-solar-works .planningIcon:after{content:""!important;position:absolute!important;inset:12px!important;border-radius:50%!important;background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.28),transparent 43%)!important;pointer-events:none!important;z-index:0!important}
#how-solar-works .planningIcon.monitorIcon svg{transform:translateX(-1px)!important}