/* Native CSS, based on the existing MagneticOne corporate palette and wordmark. */
:root{
  --ink:#102838;
  --muted:#536775;
  --blue:#007a9f;
  --cyan:#00b6ee;
  --orange:#ff7300;
  --paper:#f6f9fa;
  --line:#d7e4e9;
  --gutter:clamp(20px,6vw,96px);
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:#fff;
  font-synthesis:none
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:24px
}
body{
  margin:0
}
a{
  color:inherit;
  text-decoration:none
}
button,input{
  font:inherit
}
button,a,input,summary{
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:5px
}
button{
  cursor:pointer
}
img{
  max-width:100%;
  height:auto
}
p{
  line-height:1.65;
  color:var(--muted)
}
h1,h2,h3,p{
  margin-top:0
}
h1,h2{
  letter-spacing:-.055em;
  line-height:1.04
}
h1{
  font-size:clamp(48px,6.5vw,96px);
  font-weight:600;
  margin-bottom:30px
}
h2{
  font-size:clamp(34px,4.3vw,64px);
  font-weight:600;
  margin-bottom:24px
}
h3{
  font-size:25px;
  letter-spacing:-.025em;
  font-weight:500;
  line-height:1.2
}
button:disabled{
  opacity:.45;
  cursor:not-allowed
}
.skip{
  position:absolute;
  top:-100px;
  left:20px;
  background:#fff;
  z-index:9;
  padding:15px
}
.skip:focus{
  top:12px
}
.header{
  min-height:100px;
  padding:24px var(--gutter);
  display:flex;
  align-items:center;
  gap:40px;
  border-bottom:1px solid var(--line)
}
.brand{
  display:flex;
  align-items:center;
  gap:20px;
  margin-right:auto
}
.brand img{
  width:210px;
  max-height:42px;
  object-fit:contain
}
.brand span{
  font-size:11px;
  font-weight:700;
  letter-spacing:.2em;
  border-left:1px solid var(--line);
  padding-left:20px
}
.header nav{
  display:flex;
  gap:30px;
  font-size:14px
}
.header a:hover{
  color:var(--blue)
}
.language{
  font-size:13px;
  padding:10px;
  border:1px solid var(--line)
}
.section{
  padding:100px var(--gutter);
  max-width:1600px;
  margin:auto
}
.eyebrow{
  color:var(--blue);
  font-size:11px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  margin-bottom:28px
}
.hero{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:7%;
  align-items:center;
  padding-top:90px;
  padding-bottom:80px;
  background:linear-gradient(180deg,#fff,#f8fbfc)
}
.hero h1 span{
  color:var(--blue)
}
.hero-copy{
  min-width:0
}
.lede{
  font-size:19px;
  max-width:580px;
  line-height:1.65
}
.actions{
  display:flex;
  gap:28px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:34px
}
.button{
  display:inline-flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  border:0;
  padding:17px 22px;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  min-height:48px;
  transition:background .2s
}
.primary{
  background:var(--orange);
  color:#20160d
}
.primary:hover{
  background:#f58931
}
.text-link{
  font-size:14px;
  border-bottom:1px solid var(--blue);
  padding-bottom:7px;
  color:var(--blue)
}
.hero-note{
  font-size:11px;
  margin:28px 0 0
}
.system-visual{
  align-self:center
}
.system-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  position:relative;
  padding:30px 0
}
.energy-source{
  background:white;
  border:1px solid var(--line);
  padding:26px;
  height:185px
}
.energy-source>span{
  color:var(--blue);
  font-family:monospace;
  font-size:10px;
  display:block;
  margin-bottom:10px
}
.energy-source strong{
  font-size:18px;
  font-weight:500
}
.energy-core{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:var(--ink);
  color:white;
  border:10px solid #f8fbfc;
  width:155px;
  height:155px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center
}
.energy-core span{
  color:var(--orange);
  font-size:38px;
  font-weight:600
}
.energy-core strong{
  font:10px/1.5 monospace;
  letter-spacing:.06em
}
.solar-grid{
  background:repeating-linear-gradient(90deg,transparent,transparent 16px,#86d0e6 17px,#86d0e6 18px),repeating-linear-gradient(0deg,#e5f7fb,#e5f7fb 16px,#86d0e6 17px,#86d0e6 18px);
  height:58px;
  width:86px;
  margin-top:17px;
  transform:skewY(-8deg)
}
.grid-lines{
  width:78px;
  height:58px;
  margin:20px 0;
  background:repeating-linear-gradient(90deg,transparent,transparent 22px,#b2c7d1 23px,#b2c7d1 25px);
  border-top:3px solid #b2c7d1;
  border-bottom:3px solid #b2c7d1
}
.grid{
  padding-left:50px
}
.battery-bars{
  margin-top:26px;
  display:flex;
  gap:4px;
  width:80px;
  border:1px solid var(--blue);
  padding:5px
}
.battery-bars i{
  background:var(--cyan);
  width:15px;
  height:22px
}
.battery-bars i:last-child{
  background:#edf4f6
}
.loads{
  padding-left:50px
}
.load-bars{
  display:flex;
  gap:7px;
  align-items:end;
  height:45px;
  width:85px;
  margin-top:15px
}
.load-bars i{
  width:10px;
  height:40%;
  background:var(--blue)
}
.load-bars i:nth-child(2){
  height:75%
}
.load-bars i:nth-child(3){
  height:50%
}
.load-bars i:nth-child(4){
  height:100%;
  background:var(--orange)
}
.load-bars i:nth-child(5){
  height:60%
}
.system-visual>p{
  font-size:11px;
  text-align:center;
  margin:0
}
.product-strip{
  padding:30px var(--gutter);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px;
  background:var(--ink);
  color:white;
  border-top:4px solid var(--orange)
}
.product-strip>div{
  display:grid;
  grid-template-columns:28px 1fr;
  gap:5px 12px
}
.product-strip span{
  grid-row:span 2;
  font:11px monospace;
  color:#88d8ed;
  padding-top:5px
}
.product-strip strong{
  font-size:24px;
  font-weight:500
}
.product-strip small{
  font-size:12px;
  color:#c8dce4
}
.section-heading{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:0 12%;
  margin-bottom:55px
}
.section-heading>.eyebrow{
  grid-column:1/-1
}
.section-heading>p:last-child{
  font-size:18px;
  padding-top:10px
}
.feature-rows article{
  display:grid;
  grid-template-columns:50px .65fr 1fr 1.35fr;
  gap:28px;
  align-items:start;
  padding:30px 0;
  border-top:1px solid var(--line)
}
.feature-number{
  font:12px monospace;
  color:var(--blue);
  padding-top:6px
}
.feature-tag{
  font-size:18px;
  padding-top:2px
}
.feature-rows h3{
  margin:0;
  font-size:23px
}
.feature-rows p{
  font-size:15px;
  margin:0
}
.approach{
  background:var(--paper)
}
.steps{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:0;
  gap:34px
}
.steps span{
  display:block;
  padding:15px 0 25px;
  border-top:2px solid #c6dce4;
  font:12px monospace;
  color:var(--blue)
}
.steps h3{
  font-size:20px
}
.steps p{
  font-size:14px
}
.safety{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:13%;
  background:var(--ink);
  color:white
}
.safety .eyebrow{
  color:#8ed9ed
}
.safety p{
  color:#c1d3dc
}
.safety .text-link{
  color:#8ed9ed;
  border-color:#8ed9ed
}
.safety-list{
  padding-top:40px
}
.safety-list>div{
  display:flex;
  gap:28px;
  padding:18px 0;
  border-bottom:1px solid #375463
}
.safety-list span{
  font:11px monospace;
  color:#8ed9ed
}
.safety-list strong{
  font-weight:400;
  font-size:17px
}
.safety-list>p{
  font-size:13px;
  margin-top:28px
}
.contact p{
  max-width:600px
}
.contact .button{
  margin-top:15px
}
footer{
  padding:45px var(--gutter);
  border-top:1px solid var(--line);
  display:flex;
  gap:30px;
  justify-content:space-between;
  font-size:12px
}
footer strong{
  font-size:18px;
  font-weight:500
}
footer p{
  margin:10px 0 0
}
footer>div:last-child{
  display:flex;
  align-items:center;
  gap:30px;
  flex-wrap:wrap
}
footer span{
  color:var(--muted)
}
.privacy{
  max-width:1050px;
  min-height:65vh
}
.privacy h1{
  font-size:50px
}
.privacy>p:not(.eyebrow){
  font-size:18px
}
.lab{
  padding-top:55px
}
.lab h1{
  font-size:clamp(38px,4vw,60px);
  margin-bottom:20px
}
.lab-heading{
  display:flex;
  justify-content:space-between;
  gap:30px
}
.lab-heading .lede{
  max-width:720px;
  font-size:17px
}
.lab-heading>.text-link{
  align-self:start;
  margin-top:15px;
  white-space:nowrap
}
.sim-banner{
  background:#e5f5fa;
  color:#075771;
  border-left:4px solid var(--cyan);
  padding:15px 20px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  margin-top:20px
}
.site-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:28px 0
}
.site-tabs button{
  padding:13px 20px;
  border:1px solid var(--line);
  background:white;
  color:var(--ink);
  font-size:13px;
  min-height:44px
}
.site-tabs [aria-pressed=true]{
  background:var(--ink);
  color:white;
  border-color:var(--ink)
}
.lab-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:36px
}
.telemetry{
  background:var(--paper);
  padding:35px
}
.metric-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:38px
}
.metric-grid>div{
  display:flex;
  flex-direction:column;
  gap:10px
}
.metric-grid span{
  font-size:13px;
  color:var(--muted)
}
.metric-grid strong{
  font-size:42px;
  font-weight:500;
  letter-spacing:-.04em
}
.metric-grid small{
  font-size:11px;
  color:var(--muted)
}
.battery-state{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:38px 0 12px;
  align-items:center
}
.battery-state span{
  font:12px monospace
}
.battery-state strong{
  text-align:right;
  font-size:26px;
  font-weight:500
}
.soc-track{
  height:7px;
  background:#d4e7ed;
  grid-column:1/-1
}
.soc-track>div{
  background:var(--blue);
  height:7px;
  width:0
}
.muted{
  font-size:11px;
  color:var(--muted);
  margin-bottom:20px
}
.small{
  font-size:12px
}
.control-panel{
  padding:30px 0
}
.control-panel label{
  display:flex;
  justify-content:space-between;
  font-size:18px
}
.control-panel input{
  display:block;
  width:100%;
  margin:28px 0;
  accent-color:var(--blue)
}
.control-panel .button{
  width:100%;
  margin-bottom:12px
}
.subtle{
  background:#edf4f6;
  color:var(--ink)
}
.stop{
  display:block;
  width:100%;
  min-height:44px;
  border:1px solid #ad4920;
  background:white;
  color:#8b340f;
  padding:12px;
  font-size:13px
}
.control-panel [role=status]{
  font-size:13px;
  min-height:44px;
  color:var(--blue)
}
.journal{
  padding:48px 0
}
.journal h2,.schedule h2{
  font-size:30px;
  letter-spacing:-.03em
}
.journal ol{
  padding:0;
  list-style:none;
  max-height:280px;
  overflow:auto
}
.journal li{
  padding:14px 16px;
  background:var(--paper);
  margin-bottom:5px;
  font:12px/1.6 monospace;
  overflow-wrap:anywhere
}
.journal .empty{
  font:14px Arial;
  color:var(--muted)
}
.schedule{
  padding:35px 0;
  border-top:1px solid var(--line)
}
.schedule>div:first-child{
  max-width:660px
}
.schedule p{
  font-size:13px
}
.chart{
  display:grid;
  grid-template-columns:repeat(24,minmax(0,1fr));
  height:160px;
  align-items:end;
  gap:7px;
  padding-top:10px;
  border-bottom:1px solid var(--line);
  margin:30px 0
}
.chart .bar{
  min-height:5px;
  background:#74c7de;
  position:relative
}
.chart .bar:nth-child(6n+1)::after{
  content:attr(data-hour);
  position:absolute;
  bottom:-20px;
  left:0;
  font:10px monospace
}
.chart .bar.charge{
  background:var(--blue)
}
details{
  margin:45px 0 30px
}
summary{
  cursor:pointer;
  font-size:13px;
  color:var(--blue);
  padding:12px 0
}
.table-scroll{
  overflow:auto
}
table{
  border-collapse:collapse;
  width:100%;
  font-size:12px
}
th,td{
  padding:10px;
  text-align:left
}
thead{
  background:var(--paper)
}
tbody tr:nth-child(even){
  background:#f8fafb
}
.energy-core{
  position:relative;
  top:auto;
  left:auto;
  transform:none;
  grid-column:1/-1;
  justify-self:center
}
@media(min-width:1600px){
  .header,footer,.product-strip{
    padding-left:max(var(--gutter),calc((100vw - 1408px)/2));
    padding-right:max(var(--gutter),calc((100vw - 1408px)/2))
  }
}
@media(max-width:1023px){
  .header{
    gap:20px
  }
  .header nav{
    gap:15px
  }
  .brand img{
    width:170px
  }
  .brand span{
    padding-left:12px
  }
  .hero{
    gap:4%;
    grid-template-columns:1.1fr 1fr
  }
  .energy-source{
    height:165px;
    padding:18px
  }
  .grid,.loads{
    padding-left:35px
  }
  .energy-core{
    width:125px;
    height:125px
  }
  .feature-rows article{
    grid-template-columns:35px .6fr 1fr 1.3fr;
    gap:15px
  }
  .steps{
    gap:20px
  }
  .lab-grid{
    gap:25px
  }
  .telemetry{
    padding:25px
  }
}
@media(max-width:767px){
  .section{
    padding:65px var(--gutter)
  }
  .header{
    min-height:82px;
    padding-top:20px;
    padding-bottom:20px;
    gap:10px
  }
  .brand{
    gap:10px
  }
  .brand img{
    width:150px
  }
  .brand span{
    font-size:9px;
    padding-left:10px
  }
  .header nav{
    display:none
  }
  .hero{
    grid-template-columns:minmax(0,1fr);
    padding-top:58px;
    gap:40px
  }
  .hero h1{
    font-size:clamp(40px,11.5vw,76px)
  }
  .lede{
    font-size:17px
  }
  .system-visual{
    max-width:500px;
    width:100%;
    justify-self:center
  }
  .energy-source{
    height:170px;
    padding:22px
  }
  .grid,.loads{
    padding-left:45px
  }
  .energy-core{
    width:135px;
    height:135px
  }
  .product-strip{
    gap:15px;
    padding-top:22px;
    padding-bottom:22px
  }
  .product-strip>div{
    grid-template-columns:1fr;
    gap:6px
  }
  .product-strip span{
    grid-row:auto
  }
  .product-strip strong{
    font-size:18px
  }
  .product-strip small{
    font-size:10px;
    line-height:1.5
  }
  .section-heading{
    grid-template-columns:1fr;
    gap:0;
    margin-bottom:30px
  }
  .section-heading>p:last-child{
    font-size:16px;
    padding-top:0
  }
  .feature-rows article{
    grid-template-columns:30px 1fr;
    gap:12px 20px;
    padding:25px 0
  }
  .feature-rows h3,.feature-rows p{
    grid-column:2
  }
  .feature-tag{
    font-size:15px;
    color:var(--blue)
  }
  .feature-rows h3{
    font-size:24px
  }
  .steps{
    grid-template-columns:1fr 1fr;
    gap:20px 24px;
    margin-bottom:0
  }
  .steps span{
    padding-bottom:18px
  }
  .safety{
    grid-template-columns:1fr;
    gap:20px
  }
  .safety-list{
    padding-top:0
  }
  .safety-list strong{
    font-size:15px
  }
  .contact h2{
    font-size:38px
  }
  footer{
    flex-direction:column;
    padding-top:35px;
    padding-bottom:35px
  }
  footer>div:last-child{
    gap:20px
  }
  .lab{
    padding-top:35px
  }
  .lab-heading{
    display:block
  }
  .lab-heading>.text-link{
    display:inline-block;
    margin:0 0 15px
  }
  .lab-grid{
    grid-template-columns:1fr;
    gap:5px
  }
  .metric-grid{
    gap:30px
  }
  .metric-grid strong{
    font-size:36px
  }
  .control-panel{
    padding:25px 0
  }
  .site-tabs button{
    font-size:11px;
    padding:12px
  }
  .chart{
    gap:4px
  }
  .privacy h1{
    font-size:38px
  }
  .privacy>p:not(.eyebrow){
    font-size:16px
  }
}
@media(max-width:380px){
  .hero h1{
    font-size:36px
  }
  .energy-source,.grid,.loads{
    padding:16px
  }
  .energy-source strong{
    font-size:16px
  }
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *{
    transition:none!important
  }
}