/* HELIOS H250 · H500 · DC-coupled solar converter (Oct 2026): /systems/dc-coupled-solar. Builds on nexus.css; own widgets use hel-* */
:root{--sun:#F2B45C; --sun-lt:#FFD9A0}

/* ---------- hero: indoor | outdoor split ---------- */
.apx .hel-ph{display:block}
.hel-ph picture{display:block; width:100%; height:100%}
.hel-chip{position:absolute; z-index:2; top:31%; display:inline-flex; align-items:center; gap:10px; padding:9px 14px 8px 11px; border-radius:999px;
  font-family:var(--fm); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:#fff;
  background:rgba(5,7,12,.55); border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.hel-chip svg{width:16px; height:16px; flex:none; fill:none; stroke-width:1.4}
.hel-chip em{font-style:normal; color:var(--mut); letter-spacing:.16em}
.hel-chip.in{right:calc(50% + 22px)}
.hel-chip.in svg{stroke:var(--cyan)}
.hel-chip.out{left:calc(50% + 22px)}
.hel-chip.out svg{stroke:var(--sun)}
.apx-tag span.hel-new{background:var(--sun)}

/* ---------- sold-only-as-a-system strip ---------- */
.hel-only{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px 28px; margin-top:clamp(28px,3.4vw,44px); padding:20px 24px;
  border:1px solid rgba(242,180,92,.38); border-radius:14px; background:linear-gradient(90deg,rgba(242,180,92,.10),rgba(8,12,20,.4) 60%)}
.hel-only>i{display:grid; place-items:center; width:46px; height:46px; border-radius:50%; border:1px solid var(--sun); color:var(--sun)}
.hel-only>i svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6}
.hel-only b{display:block; font-family:var(--fd); font-weight:500; font-size:clamp(17px,1.4vw,20px); color:var(--ink); letter-spacing:-.005em}
.hel-only p{margin-top:5px; font-size:14px; line-height:1.6; color:var(--ink2); max-width:78ch}
.hel-only nav{display:flex; gap:8px; flex-wrap:wrap}
.hel-only nav a{display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border:1px solid var(--line2); border-radius:8px; font-family:var(--fm); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink2); transition:border-color .3s,color .3s}
.hel-only nav a:hover{border-color:var(--cyan); color:#fff}

/* ---------- four-step power path (apx-path with four stops) ---------- */
.apx-path.hel-path{grid-template-columns:repeat(4,1fr)}
.hel-path .st:last-child i{border-color:var(--sun); color:var(--sun)}
.hel-path .st:nth-child(2) i{border-color:var(--sun); color:var(--sun)}
.hel-path .st:nth-child(2) .k{color:var(--sun)}

/* ---------- indoor / outdoor stage ---------- */
.hel-env-h{display:flex; justify-content:space-between; align-items:flex-end; gap:20px 40px; flex-wrap:wrap}
.hel-env-h p{max-width:46ch}
.hel-seg{display:inline-flex; padding:4px; gap:4px; border:1px solid var(--line2); border-radius:12px; background:rgba(8,12,20,.6)}
.hel-seg button{display:inline-flex; align-items:center; gap:10px; padding:11px 18px; border:0; border-radius:8px; background:transparent; cursor:pointer;
  font-family:var(--fm); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink2); transition:background .35s,color .35s}
.hel-seg button svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.4}
.hel-seg button:hover{color:#fff}
.hel-seg button[aria-selected="true"]{background:var(--ink); color:#05070C}
.hel-seg button[data-env="out"][aria-selected="true"]{background:var(--sun)}
.hel-stage{position:relative; margin-top:clamp(20px,2.6vw,32px); border-radius:18px; overflow:hidden; aspect-ratio:16/9; background:#05070C; border:1px solid var(--line)}
.hel-stage figure{position:absolute; inset:0; margin:0; opacity:0; transition:opacity .8s var(--e); pointer-events:none}
.hel-stage figure.on{opacity:1}
.hel-stage img{display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.035); transition:transform 2.4s var(--e)}
.hel-stage figure.on img{transform:none}
.hel-stage figure::before{content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(5,7,12,.7) 0%,rgba(5,7,12,.35) 30%,rgba(5,7,12,0) 48%)}
.hel-card{position:absolute; z-index:2; left:clamp(16px,2.6vw,36px); top:50%; transform:translateY(-50%); width:min(360px,34%); padding:clamp(18px,2vw,26px); border:1px solid var(--line2); border-radius:14px; background:rgba(6,9,15,.74); -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1);
  opacity:0; transition:opacity .6s var(--e) .15s; pointer-events:none}
.hel-card.on{opacity:1; pointer-events:auto}
.hel-card .ip{display:flex; align-items:baseline; gap:12px}
.hel-card .ip b{font-family:var(--fd); font-weight:300; font-size:clamp(46px,5.4vw,82px); line-height:.9; letter-spacing:-.03em; color:#fff}
.hel-card .ip span{font-family:var(--fm); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan)}
.hel-card.out .ip span{color:var(--sun)}
.hel-card.out{border-color:rgba(242,180,92,.35)}
.hel-card h3{margin-top:12px; font-size:clamp(19px,1.7vw,24px); font-weight:400; letter-spacing:-.015em; line-height:1.25}
.hel-card dl{margin:18px 0 0; border-top:1px solid var(--line2)}
.hel-card dl>div{display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--line)}
.hel-card dt{font-size:12.5px; color:var(--ink2)}
.hel-card dd{margin:0; font-size:12.5px; color:var(--ink); text-align:right}
.hel-common{display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:16px; font-family:var(--fm); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim)}
.hel-common b{font-weight:400; color:var(--ink2)}

/* ---------- anatomy plate: indoor | outdoor bands + per-cabinet captions ---------- */
.hel-bands{position:relative; display:grid; grid-template-columns:var(--mid) 1fr; gap:10px; margin-top:clamp(16px,2.2vw,26px)}
.hel-bands div{display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:9px; color:#fff; font-family:var(--fm); font-size:11px; letter-spacing:.24em; text-transform:uppercase}
.hel-bands div:first-child{background:linear-gradient(90deg,#0A1217,#14273A)}
.hel-bands div:last-child{background:linear-gradient(90deg,#1A1408,#3A2A10)}
.hel-bands svg{width:16px; height:16px; fill:none; stroke-width:1.4}
.hel-bands div:first-child svg{stroke:var(--cyan)}
.hel-bands div:last-child svg{stroke:var(--sun)}
.hel-bands em{font-style:normal; font-family:var(--fb); font-size:12.5px; letter-spacing:0; text-transform:none; color:#AFC0D4}
.apx-fig.hel-fig{margin-top:6px}
.apx-fig.hel-fig::before{content:''; position:absolute; left:var(--mid); top:4%; bottom:4%; border-left:1px dashed #D3DBE3}
.hel-caps{position:relative; height:86px; margin-top:4px}
.hel-caps>div{position:absolute; left:var(--x); width:var(--w); padding-top:10px; border-top:1px solid #C9D2DB}
.hel-caps>div::before,.hel-caps>div::after{content:''; position:absolute; top:-5px; height:9px; border-left:1px solid #C9D2DB}
.hel-caps>div::before{left:0}
.hel-caps>div::after{right:0}
.hel-caps b{display:block; font-family:var(--fm); font-size:13px; font-weight:500; letter-spacing:.06em; color:#0A1217; white-space:nowrap}
.hel-caps span{display:block; margin-top:3px; font-size:12px; color:#2D7DA0; white-space:nowrap}
.hel-caps>div.o span{color:#A86914}
.hel-caps em{display:block; margin-top:2px; font-style:normal; font-family:var(--fm); font-size:10.5px; color:#8A96A3; white-space:nowrap}
.apx-anat .apx-hs.o:hover,.apx-anat .apx-hs.o.on{background:#A86914}

/* ---------- side-by-side table ---------- */
.hel-cmp{margin-top:clamp(18px,2.4vw,30px); border-top:1px solid #E3E9EF}
.hel-cmp>div{display:grid; grid-template-columns:minmax(150px,.7fr) 1fr 1fr; gap:18px; padding:12px 0; border-bottom:1px solid #EEF2F6; font-size:13.5px; line-height:1.5; color:#0A1217}
.hel-cmp>div>span:first-child{color:#5F6C79}
.hel-cmp .hd{font-family:var(--fm); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#8A96A3}
.hel-cmp .hd span:nth-child(2){color:#2D7DA0}
.hel-cmp .hd span:nth-child(3){color:#A86914}
.hel-cmp b{font-weight:500}

/* ---------- AC vs DC coupling ---------- */
.hel-cpl{display:grid; gap:14px; margin-top:clamp(22px,3vw,40px)}
.hel-lane{display:grid; grid-template-columns:minmax(170px,.55fr) 1fr auto; align-items:center; gap:20px 30px; padding:clamp(18px,2.2vw,28px); border:1px solid var(--line2); border-radius:16px; background:var(--bg2)}
.hel-lane.dc{border-color:rgba(60,204,252,.45); background:radial-gradient(ellipse 60% 120% at 100% 50%,#0B2A3D 0%,var(--bg2) 70%)}
.hel-lane .lk{font-family:var(--fm); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--mut)}
.hel-lane.dc .lk{color:var(--cyan)}
.hel-lane h4{margin-top:8px; font-size:18px; font-weight:500; letter-spacing:-.01em}
.hel-chain{display:flex; align-items:center; flex-wrap:wrap; gap:8px 0}
.hel-chain>span{display:flex; flex-direction:column; padding:10px 14px; border:1px solid var(--line2); border-radius:9px; background:rgba(5,7,12,.5); min-width:96px}
.hel-chain>span b{font-size:13.5px; font-weight:500; color:var(--ink); white-space:nowrap}
.hel-chain>span em{margin-top:3px; font-style:normal; font-family:var(--fm); font-size:10px; letter-spacing:.08em; color:var(--dim); white-space:nowrap}
.hel-chain>span.cv{border-color:rgba(242,180,92,.6)}
.hel-chain>span.cv em{color:var(--sun)}
.hel-chain>span.hx{border-color:var(--cyan); background:rgba(60,204,252,.08)}
.hel-chain>span.hx em{color:var(--cyan)}
.hel-chain>i{width:clamp(14px,2vw,30px); height:1px; background:var(--line3); position:relative}
.hel-chain>i::after{content:''; position:absolute; right:0; top:-3px; border:3.5px solid transparent; border-left:5px solid var(--line3); border-right:0}
.hel-lane .n{text-align:right}
.hel-lane .n b{display:block; font-family:var(--fd); font-weight:300; font-size:clamp(44px,4.6vw,66px); line-height:.9; letter-spacing:-.03em}
.hel-lane.dc .n b{color:var(--cyan)}
.hel-lane .n span{display:block; margin-top:6px; font-family:var(--fm); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim)}
.hel-cpl-f{font-size:13px; color:var(--dim)}

/* ---------- a day on site ---------- */
.hel-day{display:grid; grid-template-columns:1fr 290px; gap:clamp(18px,2.4vw,32px); margin-top:clamp(22px,3vw,40px); padding:clamp(18px,2.4vw,30px);
  border:1px solid var(--line2); border-radius:18px; background:radial-gradient(ellipse 80% 70% at 0% 0%,#101B28 0%,var(--bg2) 65%)}
.hel-day svg{display:block; width:100%; height:auto; touch-action:pan-y; cursor:crosshair}
.hel-day svg text{font-family:var(--fm); font-size:12px; fill:var(--dim)}
.hel-day svg .an{font-size:11.5px; letter-spacing:.06em}
.hel-day input[type=range]{width:100%; margin-top:14px; accent-color:var(--cyan)}
.hel-ro{display:flex; flex-direction:column}
.hel-ro .t{font-family:var(--fd); font-weight:300; font-size:clamp(44px,4.4vw,62px); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.hel-ro .ph{margin-top:8px; min-height:2.8em; font-size:13.5px; color:var(--ink2); line-height:1.45}
.hel-ro dl{margin:16px 0 0; border-top:1px solid var(--line2)}
.hel-ro dl>div{display:grid; grid-template-columns:12px 1fr auto; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line)}
.hel-ro dl i{width:10px; height:10px; border-radius:2px}
.hel-ro dt{font-size:13px; color:var(--mut)}
.hel-ro dd{margin:0; font-family:var(--fm); font-size:13.5px; color:var(--ink); font-variant-numeric:tabular-nums}
.hel-ro .note{margin-top:auto; padding-top:16px; font-size:11.5px; color:var(--dim); line-height:1.5}

/* ---------- voltage windows ---------- */
.hel-volt{margin-top:clamp(22px,3vw,40px); padding:clamp(20px,2.6vw,34px); border:1px solid var(--line2); border-radius:18px; background:var(--bg2)}
.hel-vrow{display:grid; grid-template-columns:minmax(150px,.3fr) 1fr; gap:20px; align-items:center; padding:12px 0}
.hel-vrow>span b{display:block; font-size:14px; font-weight:500}
.hel-vrow>span em{display:block; margin-top:2px; font-style:normal; font-size:12px; color:var(--dim)}
.hel-vtrack{position:relative; height:30px; border-radius:4px; background:rgba(150,190,255,.05)}
.hel-vtrack i{position:absolute; top:0; bottom:0; left:calc((var(--a) - 200) / 800 * 100%); width:calc((var(--b) - var(--a)) / 800 * 100%); border-radius:4px;
  display:flex; align-items:center; justify-content:center; font-style:normal; font-family:var(--fm); font-size:11px; letter-spacing:.06em; color:#05070C; white-space:nowrap;
  transform-origin:0 50%; transform:scaleX(0); transition:transform 1.1s var(--e)}
.hel-volt.in .hel-vtrack i{transform:none}
.hel-vtrack i.bat{background:linear-gradient(90deg,var(--deep),var(--cyan))}
.hel-vtrack i.amq{background:var(--cyan-lt)}
.hel-vtrack i.pv{background:linear-gradient(90deg,#B97A2A,var(--sun))}
.hel-vtrack i.pv2{background:var(--sun-lt)}
.hel-vtrack u{position:absolute; top:-6px; bottom:-6px; left:calc((var(--v) - 200) / 800 * 100%); border-left:1.5px dashed #fff; text-decoration:none}
.hel-vtrack u::after{content:attr(data-l); position:absolute; left:6px; top:-14px; font-family:var(--fm); font-size:10px; color:#fff; white-space:nowrap}
.hel-vscale{display:grid; grid-template-columns:minmax(150px,.3fr) 1fr; gap:20px; margin-top:6px}
.hel-vscale div{position:relative; height:20px; border-top:1px solid var(--line2)}
.hel-vscale div span{position:absolute; top:6px; transform:translateX(-50%); font-family:var(--fm); font-size:10.5px; color:var(--dim)}
.hel-vnote{display:grid; grid-template-columns:repeat(3,1fr); gap:20px 34px; margin-top:22px; padding-top:20px; border-top:1px solid var(--line)}
.hel-vnote b{display:block; font-family:var(--fd); font-weight:300; font-size:clamp(28px,2.6vw,38px); line-height:1; letter-spacing:-.02em}
.hel-vnote b u{text-decoration:none; font-size:.4em; color:var(--cyan); margin-left:5px}
.hel-vnote span{display:block; margin-top:8px; font-size:13px; color:var(--mut); line-height:1.55}

/* ---------- the system ---------- */
.hel-sys{position:relative; margin-top:clamp(22px,3vw,40px); padding:clamp(22px,3vw,40px); border:1px solid rgba(242,180,92,.32); border-radius:20px;
  background:radial-gradient(ellipse 70% 90% at 50% 0%,#14202E 0%,var(--bg2) 70%)}
.hel-ems{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 18px; border:1px solid var(--cyan); border-radius:12px; background:rgba(60,204,252,.07)}
.hel-ems b{font-family:var(--fd); font-weight:500; font-size:17px}
.hel-ems span{font-family:var(--fm); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan)}
.hel-ctl{display:grid; grid-template-columns:repeat(4,1fr); gap:0 clamp(18px,3vw,46px); height:34px}
.hel-ctl i{position:relative}
.hel-ctl i::before{content:''; position:absolute; left:50%; top:0; bottom:0; border-left:1.5px dashed rgba(60,204,252,.6)}
.hel-ctl i:first-child::before{display:none}
.hel-ctl i span{position:absolute; left:calc(50% + 8px); top:50%; transform:translateY(-50%); font-family:var(--fm); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); white-space:nowrap}
.hel-flow{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,3vw,46px)}
.hel-node{position:relative; padding:18px 18px 16px; border:1px solid var(--line2); border-radius:12px; background:rgba(5,7,12,.55)}
.hel-node:not(:last-child)::after{content:''; position:absolute; top:50%; left:100%; width:clamp(18px,3vw,46px); height:2px; background:linear-gradient(90deg,var(--sun),var(--cyan))}
.hel-node .k{font-family:var(--fm); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim)}
.hel-node b{display:block; margin-top:8px; font-family:var(--fd); font-weight:500; font-size:18px; letter-spacing:-.01em}
.hel-node p{margin-top:6px; font-size:12.5px; color:var(--mut); line-height:1.5}
.hel-node.pv{border-color:rgba(242,180,92,.5)}
.hel-node.pv .k{color:var(--sun)}
.hel-node.hx{border-color:var(--cyan); background:rgba(60,204,252,.08)}
.hel-node.hx .k{color:var(--cyan)}
.hel-node.bt .k{color:var(--cyan-lt)}
.hel-wire{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,3vw,46px); margin-top:10px; font-family:var(--fm); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim)}
.hel-wire span{text-align:right; padding-right:4px}
.hel-sys-f{margin-top:22px; padding-top:16px; border-top:1px solid var(--line); text-align:center; font-family:var(--fm); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--sun)}

/* pairing picker */
.hel-pair{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(24px,4vw,64px); align-items:start; margin-top:clamp(40px,5vw,72px)}
.hel-pick{border:1px solid var(--line2); border-radius:16px; padding:clamp(20px,2.4vw,32px); background:radial-gradient(ellipse 90% 70% at 100% 0%,#0E2536 0%,var(--bg2) 64%)}
.hel-pick .sc-seg{display:grid; grid-template-columns:repeat(4,1fr); width:100%}
.hel-pick .sc-seg button{padding:11px 8px; line-height:1.35; font-size:11px}
.hel-pick .sc-seg button small{display:block; font-size:10px; opacity:.75}
.hel-units{display:flex; align-items:flex-end; gap:6px; height:92px; margin-top:22px; padding:0 4px 10px; border-bottom:1px solid var(--line2)}
.hel-units i{display:block; border-radius:3px 3px 0 0; transition:height .5s var(--e),opacity .4s}
.hel-units i.b{width:58px; background:linear-gradient(180deg,#DDE6EE,#9FB0C0)}
.hel-units i.b.big{width:96px}
.hel-units i.h{width:22px; height:62px; background:linear-gradient(180deg,#fff,#C9D3DC); box-shadow:inset 0 3px 0 var(--cyan)}
.hel-units i.h.w{width:32px}
.hel-units .lbl{margin-left:10px; font-family:var(--fm); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); align-self:center}
.hel-pick .sc-out{grid-template-columns:repeat(3,1fr)}
.hel-pick .sc-out>div+div{padding-left:18px}
.hel-pick .sc-out b{font-size:clamp(30px,3vw,44px)}
.hel-crate{margin-top:20px}
.hel-crate .bar{position:relative; height:8px; margin-top:10px; border-radius:2px; background:rgba(150,190,255,.07)}
.hel-crate .bar i{position:absolute; left:0; top:0; bottom:0; width:var(--w,50%); border-radius:2px; background:linear-gradient(90deg,var(--sun),var(--cyan)); transition:width .7s var(--e)}
.hel-crate .row{display:flex; justify-content:space-between; font-family:var(--fm); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim)}

/* ---------- next steps ---------- */
.hel-steps{list-style:none; margin:clamp(22px,3vw,40px) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); column-gap:clamp(16px,2vw,30px); row-gap:28px; counter-reset:s}
.hel-steps.c3{grid-template-columns:repeat(3,1fr)}
.hel-steps li{position:relative; padding-top:22px; border-top:1px solid var(--line2)}
.hel-steps li::after{content:''; position:absolute; left:0; top:-1px; width:36px; height:1px; background:var(--cyan)}
.hel-steps li i{font-family:var(--fm); font-style:normal; font-size:11px; letter-spacing:.14em; color:var(--cyan)}
.hel-steps h4{margin-top:14px; font-size:18px; font-weight:500; letter-spacing:-.01em}
.hel-steps p{margin-top:10px; font-size:14px; color:var(--mut); line-height:1.6}
.hel-io{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,40px); margin-top:clamp(26px,3vw,40px)}
.hel-io>div{padding:clamp(18px,2.2vw,28px); border:1px solid var(--line2); border-radius:14px}
.hel-io ul{list-style:none; margin:14px 0 0; padding:0}
.hel-io li{padding:10px 0 10px 22px; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink2); position:relative}
.hel-io li:last-child{border-bottom:0}
.hel-io li::before{content:''; position:absolute; left:2px; top:17px; width:8px; height:1px; background:var(--cyan)}
.hel-io>div:first-child li::before{background:var(--sun)}
.hel-model{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:clamp(22px,3vw,34px); padding:16px 20px; border:1px dashed var(--line3); border-radius:12px}
.hel-model code{font-family:var(--fm); font-size:clamp(20px,2vw,26px); letter-spacing:.14em; color:#fff}
.hel-model code u{text-decoration:none; color:var(--cyan)}
.hel-model code s{text-decoration:none; color:var(--sun)}
.hel-model span{font-size:13px; color:var(--mut)}
.apx-sg dl>div.hel-hl{margin:4px -10px; padding:11px 10px; border:1px solid rgba(242,180,92,.45); border-radius:8px; background:rgba(242,180,92,.07)}
.apx-sg dl>div.hel-hl dd+dd{color:var(--sun-lt)}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .apx-path.hel-path{grid-template-columns:1fr 1fr; row-gap:34px}
  .hel-path .apx-wire{display:none}
  .hel-day{grid-template-columns:1fr}
  .hel-pair{grid-template-columns:1fr}
  .hel-steps,.hel-steps.c3{grid-template-columns:1fr 1fr}
  .hel-card{width:min(360px,46%)}
}
@media(max-width:860px){
  .hel-only{grid-template-columns:auto 1fr}
  .hel-only nav{grid-column:1/-1}
  .hel-stage{aspect-ratio:auto; display:flex; flex-direction:column}
  .hel-stage figure{position:relative; inset:auto; aspect-ratio:16/9; display:none}
  .hel-stage figure.on{display:block}
  .hel-stage figure::before{display:none}
  .hel-card{position:relative; left:auto; top:auto; transform:none; width:auto; padding:20px; display:none; border:0; border-radius:0; background:var(--bg2); -webkit-backdrop-filter:none; backdrop-filter:none}
  .hel-card.on{display:block}
  .hel-lane{grid-template-columns:1fr; gap:14px}
  .hel-lane .n{text-align:left}
  .hel-flow,.hel-ctl,.hel-wire{grid-template-columns:1fr 1fr}
  .hel-ctl,.hel-wire{display:none}
  .hel-node:not(:last-child)::after{display:none}
  .hel-vnote{grid-template-columns:1fr}
  .hel-cmp>div{grid-template-columns:1fr 1fr; gap:4px 14px}
  .hel-cmp>div>span:first-child{grid-column:1/-1; font-family:var(--fm); font-size:10px; letter-spacing:.16em; text-transform:uppercase}
  .hel-cmp .hd span:first-child{display:none}
  .hel-io{grid-template-columns:1fr}
}
@media(max-width:700px){
  .hel-chip{top:auto; bottom:30%; padding:7px 10px 6px 8px; font-size:9px; letter-spacing:.16em}
  .hel-chip em{display:none}
  .hel-chip.in{right:calc(50% + 8px)}
  .hel-chip.out{left:calc(50% + 8px)}
  .apx-path.hel-path{grid-template-columns:1fr}
  .hel-seg{width:100%}
  .hel-seg button{flex:1; justify-content:center; padding:11px 8px; letter-spacing:.12em}
  .hel-bands em{display:none}
  .hel-bands div{padding:9px 10px; font-size:9.5px; letter-spacing:.14em; gap:8px}
  .hel-caps{height:auto; display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px}
  .hel-caps>div{position:relative; left:auto; width:auto}
  .hel-flow{grid-template-columns:1fr}
  .hel-vrow{grid-template-columns:1fr; gap:8px}
  .hel-vscale{grid-template-columns:1fr}
  .hel-vscale>span{display:none}
  .hel-vscale div span:nth-child(even){display:none}
  .hel-pick .sc-seg{grid-template-columns:1fr 1fr}
  .hel-pick .sc-out{grid-template-columns:1fr 1fr}
  .hel-pick .sc-out>div:nth-child(3){grid-column:1/-1; padding-left:0; border-left:0; border-top:1px solid var(--line); margin-top:14px}
  .hel-steps,.hel-steps.c3{grid-template-columns:1fr}
  .hel-day svg text{font-size:22px}
  .hel-day svg .an{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hel-stage figure,.hel-stage img,.hel-card,.hel-vtrack i,.hel-crate .bar i,.hel-units i{transition:none}
  .hel-vtrack i{transform:none}
}