@import url("lind-cable-reel.css?v=20261030-3");

:root {
  --navy: #062c52;
  --navy-2: #004987;
  --blue: #005eb8;
  --blue-dark: #004681;
  --cyan: #65c8ef;
  --lime: #b6e548;
  --ink: #102a3e;
  --paper: #edf3f7;
}

.hero { background: linear-gradient(120deg, #03294e 0%, #005eb8 58%, #0099c8 100%); }
.hero::before { position: absolute; inset: 0; background: radial-gradient(circle at 80% 24%, rgba(255,255,255,.18), transparent 24%), linear-gradient(90deg, rgba(2,26,51,.96), rgba(0,94,184,.55)); content: ""; }
.meter-grid { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(90deg, transparent 15%, #000 72%); }
.eaton-logo { display: block; width: 210px; max-height: 76px; object-fit: contain; margin-bottom: 26px; padding: 16px 18px; border-radius: 7px; background: #fff; }
.hero-content, .hero-boundary { position: relative; }
.hero-kicker { color: var(--lime); }
.profile-card { margin: 25px 0 18px; padding: 20px; border: 1px solid rgba(101,200,239,.35); border-radius: 7px; background: rgba(101,200,239,.08); }
.profile-card span, .profile-card small { display: block; }
.profile-card span { color: var(--cyan); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.profile-card strong { display: block; margin: 8px 0 5px; font-size: 25px; line-height: 1.12; }
.profile-card small { color: #bdd4e3; }
.meter-purpose-options span { min-height: 128px; }
.mounting-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.communications-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.io-details { margin-top: 0; padding: 18px; border: 1px solid var(--line); border-radius: 7px; background: #f6f9fb; }
.meter-mark { position: relative; width: 130px; height: 92px; margin-bottom: 26px; border: 3px solid var(--cyan); border-radius: 8px; }
.meter-mark::before { position: absolute; inset: 13px 15px 34px; border: 2px solid rgba(101,200,239,.7); border-radius: 3px; content: ""; }
.meter-mark i, .meter-mark b, .meter-mark em { position: absolute; bottom: 12px; width: 10px; height: 10px; border: 2px solid var(--cyan); border-radius: 50%; }
.meter-mark i { left: 24px; }
.meter-mark b { left: 55px; }
.meter-mark em { left: 86px; }
#meter-result-summary { display: grid; gap: 1px; max-height: 560px; overflow-y: auto; margin: 20px 0; padding-right: 4px; }
#meter-result-summary div { padding: 10px 12px; background: rgba(255,255,255,.07); }
#meter-result-summary dt { color: #9ac1da; font-size: 8px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
#meter-result-summary dd { margin: 3px 0 0; color: #fff; font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 850px) {
  .mounting-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .eaton-logo { width: 180px; }
  .mounting-grid, .communications-grid { grid-template-columns: 1fr; }
}