/* Comparison block: LCOE bars and a ratings matrix across on-site power technology categories. */
.cx-hype{--cx-bg:#0b2a22;--cx-line:rgba(169,216,191,.16);--cx-mint:#7fd49a;--cx-glow:#43a05a;background:var(--cx-bg);background-image:linear-gradient(var(--cx-line) 1px,transparent 1px),linear-gradient(90deg,var(--cx-line) 1px,transparent 1px);background-size:40px 40px;color:#fff;padding:clamp(64px,8vw,120px) 0;overflow:hidden}
.cx-hype-inner{display:grid;gap:clamp(40px,5vw,72px)}
.cx-hype-inner>*{min-width:0}
.cx-hype-kicker{font-family:var(--fm,ui-monospace,monospace);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cx-mint);margin:0 0 14px}
.cx-hype-head h2{font-size:clamp(40px,5.2vw,78px);font-weight:550;letter-spacing:-.055em;line-height:.98;margin:0 0 16px;color:#fff}
.cx-hype-lead{font-size:17px;color:#cfe6d8;margin:0}

.cx-lcoe{margin:0}
.cx-lcoe-plot{position:relative;display:grid;gap:10px;padding-top:52px}
.cx-row{display:grid;grid-template-columns:minmax(150px,230px) 1fr;align-items:center;gap:20px;min-height:58px}
.cx-row-name strong{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em;color:rgba(255,255,255,.78)}
.cx-row-name span{display:block;font-size:12px;color:rgba(207,230,216,.62);margin-top:3px}
.cx-row-track{position:relative;height:26px;margin-left:0}
.cx-bar{position:absolute;top:0;bottom:0;left:0;width:var(--hi);border-radius:6px;background:linear-gradient(90deg,rgba(255,255,255,.06) 0,rgba(255,255,255,.06) calc(var(--lo) / var(--hi) * 100%),rgba(255,255,255,.28) calc(var(--lo) / var(--hi) * 100%),rgba(255,255,255,.28) 100%);transform-origin:left;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.cx-row em{position:absolute;left:calc(var(--hi) + 12px);top:50%;transform:translateY(-50%);font-style:normal;font-size:14px;font-weight:600;white-space:nowrap;color:rgba(255,255,255,.72);opacity:0;transition:opacity .5s .7s}
.cx-row.is-dor .cx-row-name strong{color:#fff;font-size:20px}
.cx-row.is-dor .cx-row-name span{color:var(--cx-mint)}
.cx-row.is-dor .cx-bar{background:linear-gradient(90deg,rgba(127,212,154,.18) 0,rgba(127,212,154,.18) calc(var(--lo) / var(--hi) * 100%),var(--cx-mint) calc(var(--lo) / var(--hi) * 100%),#b6f0c4 100%);box-shadow:0 0 28px rgba(127,212,154,.55),0 0 2px #b6f0c4}
.cx-row.is-dor em{color:var(--cx-mint);font-size:18px}
.cx-grid-overlay{position:absolute;inset:0;display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:20px;pointer-events:none}
.cx-grid-col{position:relative}
.cx-grid-line{position:absolute;top:0;bottom:0;left:var(--at);width:0;border-left:1px dashed rgba(255,255,255,.35)}
.cx-grid-line b{position:absolute;top:2px;left:6px;font-family:var(--fm,ui-monospace,monospace);font-weight:400;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6);white-space:nowrap}
.cx-lcoe figcaption{margin-top:22px;font-size:12px;line-height:1.6;color:rgba(207,230,216,.6);max-width:92ch}
.cx-hype.is-in .cx-bar{transform:scaleX(1)}
.cx-hype.is-in .cx-row em{opacity:1}
.cx-hype.is-in .cx-row:nth-child(3) .cx-bar{transition-delay:.1s}.cx-hype.is-in .cx-row:nth-child(4) .cx-bar{transition-delay:.2s}.cx-hype.is-in .cx-row:nth-child(5) .cx-bar{transition-delay:.3s}.cx-hype.is-in .cx-row:nth-child(6) .cx-bar{transition-delay:.4s}.cx-hype.is-in .cx-row:nth-child(7) .cx-bar{transition-delay:.5s}

.cx-matrix-title{font-size:clamp(28px,3vw,42px);font-weight:550;letter-spacing:-.04em;margin:0 0 22px;color:#fff}
.cx-matrix-scroll{overflow-x:auto;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid rgba(169,216,191,.18)}
.cx-matrix{width:100%;min-width:760px;border-collapse:collapse}
.cx-matrix th,.cx-matrix td{padding:16px 12px;text-align:center;border-bottom:1px solid rgba(169,216,191,.12)}
.cx-matrix thead th{font-size:13px;font-weight:600;color:rgba(255,255,255,.7);vertical-align:bottom}
.cx-matrix tbody th{text-align:left;padding-left:22px}
.cx-matrix tbody th strong{display:block;font-size:15px;font-weight:600;color:#fff}
.cx-matrix tbody th span{display:block;font-size:12px;font-weight:400;color:rgba(207,230,216,.6);margin-top:2px}
.cx-matrix tr:last-child th,.cx-matrix tr:last-child td{border-bottom:0}
.cx-matrix .is-dor{background:rgba(127,212,154,.1)}
.cx-matrix thead .is-dor{color:var(--cx-bg);background:var(--cx-mint);font-size:14px;border-radius:12px 12px 0 0}
.cx-dot{display:inline-block;width:16px;height:16px;border-radius:50%;vertical-align:middle;border:1.5px solid rgba(255,255,255,.5)}
.cx-dot[data-level="5"]{background:#fff;border-color:#fff}
.cx-dot[data-level="4"]{background:rgba(255,255,255,.72);border-color:rgba(255,255,255,.72)}
.cx-dot[data-level="3"]{background:rgba(255,255,255,.42);border-color:rgba(255,255,255,.42)}
.cx-dot[data-level="2"]{background:rgba(255,255,255,.16)}
.cx-dot[data-level="1"]{background:none}
.cx-matrix .is-dor .cx-dot[data-level="5"]{background:var(--cx-mint);border-color:var(--cx-mint);box-shadow:0 0 12px rgba(127,212,154,.7)}
.cx-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin:16px 0 8px;font-size:12px;color:rgba(207,230,216,.7)}
.cx-legend span{display:inline-flex;align-items:center;gap:8px}
.cx-legend .cx-dot{width:12px;height:12px}
.cx-foot{font-size:12px;line-height:1.6;color:rgba(207,230,216,.6);margin:0;max-width:92ch}
.cx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cx-matrix-scroll:focus-visible{outline:2px solid var(--cx-mint);outline-offset:3px}

@media(max-width:700px){
  .cx-row{grid-template-columns:1fr;gap:8px;min-height:0}
  .cx-row-track{height:auto;padding-top:22px}
  .cx-bar{bottom:auto;height:22px}
  .cx-row em{position:static;transform:none;display:block;margin-top:6px;font-size:13px}
  .cx-row.is-dor em{font-size:15px}
  .cx-grid-overlay{display:none}
  .cx-lcoe-plot{padding-top:0}
}
@media(prefers-reduced-motion:reduce){.cx-bar,.cx-row em{transition:none}}
.cx-grid-line:nth-child(2) b{top:20px}
.cx-hype .hx-wrap{width:100%;max-width:1440px;margin-inline:auto;padding-inline:clamp(22px,5.2vw,80px)}
.cmp-wrap .cx-hype{margin:36px calc(50% - 50vw) 48px}