.energy-solution {
  container: energy-solution / inline-size;
}

.energy-solution .energy-solution-description {
  max-width: 515px;
}

.energy-solution-visual {
  --solution-stacked: 0;
  position: relative;
  width: 100%;
  height: 560px;
  overflow: clip;
  border-radius: 24px;
  background: #f2f1f0;
}

.energy-solution-note {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  box-sizing: border-box;
  padding: 10.154px 10.154px 10.154px 13.538px;
  border-radius: 12px;
  background: rgb(31 47 50 / 6%);
  color: #2b2b2b;
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

.energy-solution-note h3,
.energy-solution-note p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: normal;
}

.energy-solution-note h3 { font-weight: 600; }
.energy-solution-note p { font-weight: 400; }

.energy-solution-metrics-note {
  top: 21px;
  left: 68px;
  width: 624px;
}

.energy-solution-operators-note {
  top: 475px;
  left: 68px;
  width: 668px;
}

.energy-solution-monitor {
  position: absolute;
  top: 104px;
  left: 5px;
  width: 642.436px;
  height: 351px;
  container: energy-monitor / inline-size;
}

.energy-solution-screen {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  object-position: bottom;
}

.energy-solution-mini {
  position: absolute;
  top: 34.84900285%;
  left: 74.1723674%;
  display: flex;
  flex-direction: column;
  gap: .27956cqw;
  box-sizing: border-box;
  width: 21.8543195%;
  height: 11.5150997%;
  padding: .83884cqw .83884cqw .83884cqw 1.11855cqw;
  overflow: hidden;
  border-radius: .27956cqw;
  background: #163238;
  font-family: Poppins, Inter, sans-serif;
  font-size: 1.0896cqw;
  line-height: 1.3981cqw;
  color: #c1c6c7;
}

.energy-solution-mini-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
  font-size: 1.25834cqw;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  white-space: nowrap;
}

.energy-solution-mini p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.energy-solution-mini-arrow {
  display: block;
  flex: none;
  width: 8px;
  height: 8px;
}

.energy-solution-mini-arrow img {
  display: block;
  max-width: none;
  transform: scale(.4);
  transform-origin: top left;
}

.energy-solution-connections {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  visibility: hidden;
  pointer-events: none;
  color: #fd7040;
}

.energy-solution-connections.is-ready { visibility: visible; }
.energy-solution-connections path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.energy-solution-connections circle { fill: currentColor; }

.energy-solution-panel {
  position: absolute;
  top: 147px;
  left: 661px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
  width: 209px;
  padding: 10.154px 10.154px 10.154px 13.538px;
  border-radius: 5px;
  background: #0d262c;
  color: #b7bcbd;
  font-family: Poppins, Inter, sans-serif;
  font-size: 12px;
  line-height: 18px;
}

.energy-solution-panel h3,
.energy-solution-panel h4,
.energy-solution-panel p {
  margin: 0;
  letter-spacing: normal;
}

.energy-solution-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  color: #fff;
}

.energy-solution-panel-heading h3 {
  font-family: inherit;
  font-size: 15.231px;
  font-weight: 500;
  line-height: 1.5;
}

.energy-solution-panel-close {
  display: block;
  flex: none;
  width: 14px;
  height: 14px;
  color: #b7bcbd;
}

.energy-solution-panel-close svg {
  display: block;
  width: 14px;
  height: 14px;
}

.energy-solution-panel-rule {
  height: 1px;
  width: 100%;
  background: #2e494e;
}

.energy-solution-reason {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 114px;
}

.energy-solution-reason h4 {
  font-family: inherit;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  color: #fff;
}

.energy-solution-negative { color: #f54d50; }
.energy-solution-positive { color: #00c17a; }
.energy-solution-highlight { color: #fbc866; font-weight: 500; }

@container energy-solution (min-width: 870px) {
  .energy-solution-metrics-note p { letter-spacing: -.12px; }
}

/* The desktop composition is exact at the design's 888 px content width.
   Narrow containers use readable captions and a full-width insights panel. */
@container energy-solution (max-width: 869px) {
  .energy-solution-visual {
    --solution-stacked: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: auto;
    padding: 22px 18px;
    border-radius: 20px;
  }

  .energy-solution-metrics,
  .energy-solution-operators,
  .energy-solution-insights {
    position: relative;
    padding-left: 24px;
  }

  .energy-solution-note {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 21px;
  }

  .energy-solution-monitor {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 642.436 / 351;
  }

  .energy-solution-panel {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    gap: 10px;
    padding: 16px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 21px;
  }

  .energy-solution-panel-heading h3 { font-size: 16px; }
  .energy-solution-reason { gap: 4px; min-height: 0; }
  .energy-solution-reason h4 { font-size: 14px; line-height: 21px; }

}

@container energy-solution (max-width: 380px) {
  .energy-solution-visual { padding: 18px 12px; gap: 16px; }
  .energy-solution-metrics,
  .energy-solution-operators,
  .energy-solution-insights { padding-left: 16px; }
  .energy-solution-note { padding: 10px 12px; }
  .energy-solution-panel { padding: 14px; }
}