/* Automation Republic — animated control-system mock-ups (KlareSoft motion vocabulary).
   The mock screens are deliberately one look in both themes: a dark industrial HMI. */
:root{
  --hmi-bg:#0f1216; --hmi-panel:#171b21; --hmi-line:#2a3039; --hmi-text:#e8eaed; --hmi-dim:#8b93a0; --hmi-faint:#5b6370;
  --hmi-ok:#3ccf7a; --hmi-warn:#f2b336; --hmi-err:#ff5a4f; --hmi-accent:#ff6a32; --hmi-cyan:#4cc4d8;
  --metal:#c9ccd1; --metal-2:#a9adb4; --metal-ink:#1e2126; --rail:#8d9198; --bp:#101a26; --bp-line:rgba(120,170,220,.16);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- home hero with the 3D stack ---------- */
.hero.has-stage .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:30px;align-items:center}
.hero.has-stage h1{font-size:clamp(46px,6.6vw,96px)}
@media(max-width:960px){.hero.has-stage .wrap{grid-template-columns:1fr}}
.hero-stage{perspective:1600px;height:clamp(340px,40vw,540px);position:relative}
.stack{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(-10deg) rotateX(6deg)}
.stack .shot{position:absolute;left:50%;top:50%;width:min(520px,92%);aspect-ratio:16/10;
  transform:translate(-50%,-50%) translateZ(var(--z)) translateX(var(--x)) translateY(var(--y)) rotate(var(--r));
  border-radius:10px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.35);
  animation:float 7s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes float{0%,100%{margin-top:0}50%{margin-top:-10px}}
.shot-1{--z:0px;--x:-70px;--y:-40px;--r:-3deg;--d:0s}
.shot-2{--z:120px;--x:10px;--y:30px;--r:1.5deg;--d:1.2s}
.stack .shot-3{--z:230px;--x:220px;--y:10px;--r:4deg;--d:2.4s;width:150px;aspect-ratio:9/19}
@media(max-width:960px){.hero-stage{height:min(78vw,420px)}.stack .shot{width:min(520px,84%)}.stack .shot-3{--x:min(30vw,170px);width:112px}.shot-1{--x:-30px}}

/* ---------- HMI screen ---------- */
.hmi{background:var(--hmi-bg);color:var(--hmi-text);font:500 10px/1.35 var(--body);height:100%;display:grid;grid-template-rows:auto 1fr auto;border:1px solid var(--hmi-line)}
.h-top{display:flex;align-items:center;gap:10px;padding:7px 10px;background:var(--hmi-panel);border-bottom:1px solid var(--hmi-line)}
.h-top b{font-weight:600;font-size:10.5px;margin-right:auto}
.h-tab{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--hmi-dim)}
.h-mode{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;background:var(--hmi-ok);color:#06210f;padding:2px 6px;border-radius:2px;font-weight:600}
.h-clock{font-family:var(--mono);font-size:9px;color:var(--hmi-dim);font-variant-numeric:tabular-nums}
.h-body{display:grid;grid-template-columns:30% 1fr 22%;gap:8px;padding:8px;min-height:0}
.h-body.one{grid-template-columns:1fr;align-content:start}
.h-axes{display:grid;gap:6px;align-content:start}
.h-axes div,.dv-ax div{display:grid;grid-template-columns:1fr auto;gap:2px 6px;background:var(--hmi-panel);border:1px solid var(--hmi-line);padding:5px 7px}
.h-axes small,.dv-ax small,.h-kpi small{font-size:8px;color:var(--hmi-dim);letter-spacing:.02em}
.h-axes b,.dv-ax b{font-family:var(--mono);font-size:11px;font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.h-axes em,.dv-ax em{grid-column:1/-1;height:3px;background:var(--hmi-line);display:block;overflow:hidden}
.h-axes em i,.dv-ax em i{display:block;height:100%;width:var(--v,40%);background:var(--hmi-cyan);transition:width .25s linear}
.h-main{position:relative;background:var(--hmi-panel);border:1px solid var(--hmi-line);min-height:0;display:grid}
.h-part{width:100%;height:100%;display:block}
.h-part .grid line{stroke:var(--hmi-line);stroke-width:.6}
.h-part .wire{fill:none;stroke:var(--hmi-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;animation:wireForm 6s var(--ease) infinite}
.h-part .die{fill:none;stroke:var(--hmi-dim);stroke-width:1.2}
@keyframes wireForm{0%,6%{stroke-dashoffset:100}70%,86%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
.h-step{position:absolute;left:7px;bottom:5px;font-family:var(--mono);font-size:8px;color:var(--hmi-dim)}
.h-step b{color:var(--hmi-text);font-weight:500}
.h-kpi{display:grid;gap:6px;align-content:start}
.h-kpi div{background:var(--hmi-panel);border:1px solid var(--hmi-line);padding:5px 7px;display:grid}
.h-kpi b{font-family:var(--mono);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}
.h-alarm{display:flex;align-items:center;gap:7px;padding:6px 10px;border-top:1px solid var(--hmi-line);background:var(--hmi-panel);font-size:9px;color:var(--hmi-dim)}
.h-alarm i{width:7px;height:7px;border-radius:50%;background:var(--hmi-ok);box-shadow:0 0 6px var(--hmi-ok)}
.h-alarm.warn i{background:var(--hmi-warn);box-shadow:0 0 6px var(--hmi-warn);animation:pulse 1.2s infinite}
.h-tbl{width:100%;border-collapse:collapse;font-size:9px}
.h-tbl th{font-family:var(--mono);font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--hmi-faint);text-align:left;padding:4px 6px;border-bottom:1px solid var(--hmi-line);font-weight:500}
.h-tbl td{padding:5px 6px;border-bottom:1px solid var(--hmi-line);font-variant-numeric:tabular-nums}
.h-tbl td:first-child{font-family:var(--mono);color:var(--hmi-dim)}
.h-tbl .r{text-align:right;font-family:var(--mono)}
.h-tbl td i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px;background:var(--hmi-ok)}
.h-tbl tr.warn td i{background:var(--hmi-warn)} .h-tbl tr.err td i{background:var(--hmi-err)}
.h-tbl tr.err td:last-child{color:var(--hmi-err)} .h-tbl tr.warn td:last-child{color:var(--hmi-warn)}
.h-trend{width:100%;height:auto;aspect-ratio:300/120;display:block;background:var(--hmi-panel);border:1px solid var(--hmi-line)}
.h-trend .g{stroke:var(--hmi-line);stroke-width:.8}
.h-trend path{fill:none;stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:calc(100 * var(--cp,1)) 100}
.h-trend .t1{stroke:var(--hmi-accent)} .h-trend .t2{stroke:var(--hmi-cyan)}
.h-leg{display:flex;gap:14px;font-size:8.5px;color:var(--hmi-dim);margin-top:6px}
.h-leg span::before{content:"";display:inline-block;width:10px;height:2px;margin-right:5px;vertical-align:middle;background:var(--hmi-faint)}
.h-leg .l1::before{background:var(--hmi-accent)} .h-leg .l2::before{background:var(--hmi-cyan)} .h-leg .l3{margin-left:auto}
.h-rec{display:flex;justify-content:space-between;gap:8px;margin-bottom:6px;font-size:9.5px}
.h-rec span{color:var(--hmi-dim);font-size:8.5px}

/* ---------- PLC rack ---------- */
.rack{height:100%;background:linear-gradient(var(--metal),var(--metal-2));color:var(--metal-ink);display:grid;grid-template-rows:auto 1fr auto auto;font:600 9px/1.2 var(--body);padding:8px;gap:7px}
.rk-top{display:flex;justify-content:space-between;align-items:center;font-size:9.5px}
.rk-top span{font-weight:500;font-size:8.5px;display:flex;align-items:center;gap:5px}
.lamp{width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--hmi-faint)}
.lamp.ok{background:var(--hmi-ok);box-shadow:0 0 6px var(--hmi-ok)}
.rk-rail{display:flex;gap:2px;background:var(--rail);padding:6px 6px 0;border-radius:2px;min-height:0;align-items:stretch}
.mod{flex:1;background:#e9eaec;border:1px solid #9a9ea5;border-bottom:0;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;padding:4px 2px;gap:4px;min-width:0}
.mod.m-cpu{flex:1.6;background:#dfe1e4} .mod.m-ps{flex:1.1}
.mod .mk{font-family:var(--mono);font-size:8px;color:#222}
.mod .leds{display:grid;grid-template-columns:repeat(2,6px);gap:3px;align-content:start}
.mod .leds i{width:6px;height:6px;border-radius:1px;background:#3a3f45}
.mod .leds i.on{background:#39d36f;box-shadow:0 0 4px #39d36f}
.mod.m-cpu .leds i.on:nth-child(2),.mod.m-bc .leds i.on:nth-child(3){background:#ffb22e;box-shadow:0 0 4px #ffb22e}
.mod .leds i.blink{animation:ledBlink 1.1s steps(1) infinite;animation-delay:var(--d)}
@keyframes ledBlink{0%,55%{opacity:1}56%,100%{opacity:.18}}
.mod .mn{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-size:7px;font-weight:500;color:#4a4f56;letter-spacing:.04em;white-space:nowrap;overflow:hidden;max-height:80px}
.rk-duct{display:flex;justify-content:space-around;background:#5d6168;color:#d9dbde;font-family:var(--mono);font-size:7.5px;padding:4px;border-radius:2px}
.rk-term{display:grid;grid-template-columns:repeat(24,1fr);gap:1px}
.rk-term i{font-style:normal;font-family:var(--mono);font-size:6px;text-align:center;background:#7aa0c8;color:#0c1a28;padding:3px 0}
.rk-term i:nth-child(4n){background:#d8463a;color:#fff}

/* ---------- servo drive ---------- */
.drive{height:100%;background:linear-gradient(#2a2e34,#1c1f24);color:var(--hmi-text);display:grid;grid-template-rows:auto auto auto 1fr auto;gap:8px;padding:9px;font:500 9px/1.25 var(--body);border:1px solid #3a3f47}
.dv-head{display:grid}
.dv-head b{font-weight:700;font-size:10px;letter-spacing:.02em}
.dv-head span{font-family:var(--mono);font-size:7.5px;color:var(--hmi-dim)}
.dv-seg{background:#060807;border:1px solid #333;padding:5px;text-align:center}
.dv-seg span{font-family:var(--mono);font-size:16px;letter-spacing:.2em;color:#ff3b30;text-shadow:0 0 8px rgba(255,59,48,.7)}
.dv-leds{display:flex;justify-content:space-between;font-family:var(--mono);font-size:7px;color:var(--hmi-dim)}
.dv-leds span{display:grid;justify-items:center;gap:3px}
.dv-leds i{width:7px;height:7px;border-radius:50%;background:#3a3f45}
.dv-leds i.on{background:#39d36f;box-shadow:0 0 5px #39d36f}
.dv-leds i.blink{animation:ledBlink .8s steps(1) infinite}
.dv-ax{display:grid;gap:5px;align-content:start}
.dv-ax div{padding:4px 6px}
.dv-ax b{font-size:9.5px}
.dv-plugs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.dv-plugs i{height:14px;background:#0d0f12;border:1px solid #444;border-radius:2px}
.dv-plugs i:nth-child(2){background:#c5531f}

/* ---------- exploded layers: blueprint machine, field wiring, PLC+drives, remote ---------- */
.bp{position:relative;height:100%;background:var(--bp);background-image:linear-gradient(var(--bp-line) 1px,transparent 1px),linear-gradient(90deg,var(--bp-line) 1px,transparent 1px);background-size:16px 16px;
  --ink:#dfe6ee;--ink-2:#8ea3b8;--surface-2:#16263a;--signal:#ff6a32}
.bp-art{position:absolute;inset:8% 6% 16%}
.bp-art svg{width:100%;height:100%}
.bp .dim{position:absolute;font-family:var(--mono);font-size:9px;color:#9fc3e6;letter-spacing:.06em;display:flex;align-items:center;gap:6px}
.bp .dim::before{content:"";width:18px;height:1px;background:#9fc3e6}
.bp .d1{left:58%;top:14%} .bp .d2{left:62%;top:46%} .bp .d3{left:10%;top:40%}
.bp-title{position:absolute;left:12px;bottom:10px;display:grid;font-family:var(--mono);font-size:9px;color:#9fc3e6}
.bp-title b{color:#dfe6ee;font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.fld{height:100%;background:#d9dbdf;color:#1d2025;display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:1fr 18px;gap:8px;padding:9px;font:500 9px/1.3 var(--body)}
.fld-term{display:grid;align-content:start;gap:6px}
.fld-term span{font-family:var(--mono);font-size:8.5px;font-weight:600}
.fld-term div{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.fld-term i{font-style:normal;font-family:var(--mono);font-size:7px;text-align:center;padding:6px 0;background:#7aa0c8;color:#0c1a28;border-radius:1px;position:relative}
.fld-term i.r{background:#d8463a;color:#fff}
.fld-term i::after{content:"";position:absolute;left:50%;top:100%;width:1.5px;height:7px;background:#3d4249}
.fld-io{display:grid;gap:4px;align-content:start}
.fld-io div{display:grid;grid-template-columns:auto 1fr auto;gap:6px;align-items:center;background:#f2f3f5;border:1px solid #b9bcc2;padding:4px 6px}
.fld-io b{font-family:var(--mono);font-size:8.5px}
.fld-io span{color:#4d535b;font-size:8.5px}
.fld-io i{width:7px;height:7px;border-radius:50%;background:#39d36f;box-shadow:0 0 4px #39d36f}
.fld-duct{grid-column:1/-1;background:repeating-linear-gradient(90deg,#8f949b 0 10px,#7f848b 10px 12px);border-radius:2px}
.pd{height:100%;display:grid;grid-template-columns:1fr 31%;gap:0;background:var(--metal-2)}
.pd .rack{border-right:1px solid #8d9198}
.rem{height:100%;background:var(--hmi-bg);color:var(--hmi-text);display:grid;grid-template-rows:auto 1fr auto;font:500 10px/1.35 var(--body);border:1px solid var(--hmi-line)}
.rem-top{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;background:var(--hmi-panel);border-bottom:1px solid var(--hmi-line)}
.rem-top span{font-family:var(--mono);font-size:8.5px;color:var(--hmi-dim);display:flex;gap:6px;align-items:center}
.rem-body{display:grid;grid-template-columns:38% 1fr;gap:8px;padding:8px;align-content:start}
.rem-sites{display:grid;gap:5px;align-content:start}
.rem-sites div{display:grid;grid-template-columns:auto auto 1fr;gap:6px;align-items:center;background:var(--hmi-panel);border:1px solid var(--hmi-line);padding:5px 7px}
.rem-sites b{font-family:var(--mono);font-size:9px;font-weight:500}
.rem-sites span{color:var(--hmi-dim);font-size:8.5px;text-align:right}
.rem-sites i{width:7px;height:7px;border-radius:50%;background:var(--hmi-ok)}
.rem-sites .warn i{background:var(--hmi-warn);animation:pulse 1.2s infinite}
.rem-foot{padding:6px 10px;border-top:1px solid var(--hmi-line);font-family:var(--mono);font-size:8.5px;color:var(--hmi-dim)}

/* ---------- exploded view ---------- */
.explode{height:240vh;background:var(--bp);color:#e7ecf2;border-top:1px solid var(--rule)}
.explode-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;align-items:center;padding-top:66px;box-sizing:border-box;
  background-image:linear-gradient(var(--bp-line) 1px,transparent 1px),linear-gradient(90deg,var(--bp-line) 1px,transparent 1px);background-size:48px 48px}
.explode-inner{display:grid;grid-template-columns:1.3fr .8fr;gap:40px;align-items:center;width:min(1160px,100% - 56px);margin-inline:auto}
.explode-stage{perspective:1800px;height:min(78vh,700px);position:relative}
.explode-rig{position:absolute;inset:0;transform-style:preserve-3d;--cp:1}
.layer{position:absolute;left:50%;top:50%;width:min(560px,100%);aspect-ratio:16/10;
  transform:translate(-50%,-50%) rotateX(var(--rx,0deg)) rotateZ(var(--rz,0deg)) translateZ(var(--tz,0px));
  border-radius:8px;overflow:visible;box-shadow:0 30px 60px -20px rgba(0,0,0,.85);transform-style:preserve-3d;will-change:transform}
.layer > :not(.layer-label){border-radius:8px;overflow:hidden;height:100%}
.layer-label{position:absolute;left:8px;bottom:100%;margin-bottom:10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#ffb08f;
  opacity:var(--lo,0);transition:opacity .3s;display:flex;align-items:center;gap:8px;white-space:nowrap}
.layer-label::before{content:"";width:26px;height:1px;background:#ffb08f}
.explode-copy{display:grid;gap:12px}
.explode-copy .label{color:#9fb3c8}
.explode-copy h2{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.6vw,50px);line-height:.95;margin:0;color:#f3f2ec}
.explode-copy h2 em{font-style:normal;color:var(--signal)}
.explode-copy .lede{margin:0;color:#b4c2d1;font-size:16px}
.explode-steps{display:grid;gap:2px;margin-top:6px}
.xstep{padding:10px 14px;border-left:2px solid transparent;transition:background .3s,border-color .3s;color:#8fa1b4;font-size:14px;line-height:1.45}
.xstep b{display:block;color:#d9e1ea;font-weight:600;margin-bottom:2px;font-size:15px}
.xstep.on{background:rgba(255,255,255,.05);border-left-color:var(--signal)}
.xstep.on b{color:#ffb08f}
.xstep:not(.on) p,.xstep:not(.on){max-height:none}
.explode-progress{height:3px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:8px}
.explode-progress i{display:block;height:100%;width:0;background:var(--signal)}
@media(max-width:900px){
  .explode{height:210vh}
  .explode-inner{grid-template-columns:1fr;gap:12px;width:calc(100% - 32px)}
  .explode-stage{height:46vh;order:-1}
  .layer{width:min(86vw,460px)}
  .explode-copy .lede{display:none}
  .explode-copy h2{font-size:28px}
  .xstep{padding:7px 10px;font-size:13px}
  .xstep:not(.on){display:none}
}

/* ---------- counters ---------- */
.counters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.counters > div{padding:24px 22px;border-right:1px solid var(--rule);min-width:0}
.counters > div:last-child{border-right:0}
.counters .n{font-family:var(--display);font-weight:900;font-size:clamp(46px,5.4vw,76px);line-height:.9;color:var(--ink);font-variant-numeric:tabular-nums}
.counters .k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--signal-ink);margin:12px 0 6px}
.counters p{margin:0;color:var(--ink-2);font-size:14px}
@media(max-width:860px){.counters{grid-template-columns:repeat(2,minmax(0,1fr))}.counters > div:nth-child(2){border-right:0}.counters > div:nth-child(-n+2){border-bottom:1px solid var(--rule)}}
@media(max-width:480px){.counters{grid-template-columns:1fr}.counters > div{border-right:0;border-bottom:1px solid var(--rule)}}

/* ---------- HMI screen switcher with page fold ---------- */
.seg{display:inline-flex;border:1px solid var(--rule-2);margin-bottom:18px;flex-wrap:wrap}
.seg button{position:relative;border:0;background:none;color:var(--ink-2);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:11px 18px;cursor:pointer;border-right:1px solid var(--rule-2)}
.seg button:last-child{border-right:0}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--ink);color:var(--bg)}
.seg button::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--signal)}
.seg button.on.run::after{animation:seg-dwell var(--screen-dwell,4.6s) linear forwards}
@keyframes seg-dwell{from{width:0}to{width:100%}}
.screens{display:grid;perspective:2400px;max-width:920px}
.screens .scr{grid-area:1/1;aspect-ratio:16/9;position:relative;opacity:0;visibility:hidden;transform-origin:left center;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.screens .scr .hmi{font-size:12px}
.screens .scr.on{opacity:1;visibility:visible}
.screens .scr.out{opacity:1;visibility:visible;z-index:2;animation:page-fold .85s cubic-bezier(.55,.05,.45,.95) forwards}
.screens .scr.out::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(11,18,32,.08),rgba(11,18,32,.55));opacity:0;animation:page-shade .85s linear forwards}
.screens.back .scr{transform-origin:right center}
.screens.back .scr.out{animation-name:page-fold-back}
@keyframes page-fold{from{transform:rotateY(0)}to{transform:rotateY(-112deg)}}
@keyframes page-fold-back{from{transform:rotateY(0)}to{transform:rotateY(112deg)}}
@keyframes page-shade{from{opacity:0}60%{opacity:1}to{opacity:1}}
/* scale the mock HMI's type up with the larger frame */
.screens .h-top b{font-size:13px} .screens .h-tbl{font-size:11.5px} .screens .h-tbl th{font-size:9.5px}
.screens .h-axes b{font-size:14px} .screens .h-kpi b{font-size:17px} .screens .h-axes small,.screens .h-kpi small{font-size:10px}
.screens .h-alarm{font-size:11px} .screens .h-leg{font-size:10.5px} .screens .h-rec{font-size:12px}
@media(max-width:620px){.screens .scr{aspect-ratio:4/3}.screens .h-body{grid-template-columns:1fr 1fr}.screens .h-main{display:none}}

/* ---------- reveal on scroll (only for things that start below the fold) ---------- */
.reveal{transform:translateY(18px);transition:transform .6s var(--ease)}
.reveal.in{transform:none}

@media(prefers-reduced-motion:reduce){
  .stack .shot,.h-part .wire,.mod .leds i.blink,.dv-leds i.blink{animation:none}
  .h-part .wire{stroke-dashoffset:0}
  .screens .scr.out{animation:none;visibility:hidden;opacity:0}
  .reveal{transform:none;transition:none}
}

/* the copy column must fit in the pinned viewport: only the active step shows its paragraph */
.xstep .xp{display:block;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s var(--ease),opacity .3s}
.xstep.on .xp{max-height:140px;opacity:1}
.explode-sticky{padding-bottom:16px}
@media(max-height:820px){.explode-copy .lede{display:none}.explode-copy h2{font-size:clamp(28px,3vw,40px)}.xstep{padding:7px 12px}}
@media(max-width:900px){.explode-stage{height:min(42vh,380px)}.explode-copy{gap:8px}.explode-copy h2{font-size:26px}}

/* ---------- B&R X20 rack sliding onto the rail (pinned while you scroll) ---------- */
.rackin{height:100vh;min-height:560px;background:var(--bp);border-top:1px solid var(--rule);position:relative}
.rackin-sticky{position:relative;height:100%;overflow:hidden;
  background-image:linear-gradient(var(--bp-line) 1px,transparent 1px),linear-gradient(90deg,var(--bp-line) 1px,transparent 1px);background-size:48px 48px}
.rackin-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.rackin-copy{position:absolute;left:max(28px,calc((100vw - 1160px)/2 + 28px));top:96px;width:min(380px,calc(100% - 56px));display:grid;gap:12px;color:#e7ecf2;pointer-events:none}
.rackin-copy .label{color:#9fb3c8}
.rackin-copy h2{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.6vw,50px);line-height:.95;margin:0;color:#f3f2ec}
.rackin-copy h2 em{font-style:normal;color:var(--signal)}
.rackin-steps{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:2px}
.rackin-steps li{padding:8px 12px;border-left:2px solid transparent;color:#7f91a4;font-size:14px;transition:background .3s,border-color .3s,color .3s}
.rackin-steps li b{display:block;color:#c9d3dd;font-weight:600;font-size:15px}
.rackin-steps li span{display:block;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s var(--ease),opacity .3s}
.rackin-steps li.on{background:rgba(255,255,255,.05);border-left-color:var(--signal)}
.rackin-steps li.on b{color:#ffb08f}
.rackin-steps li.on span{max-height:80px;opacity:1;color:#b4c2d1}
.rackin-bar{height:3px;background:rgba(255,255,255,.12);overflow:hidden}
.rackin-bar i{display:block;height:100%;width:0;background:var(--signal)}
.rackin-note{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6f8396}
@media(max-width:900px){
  .rackin{height:100vh}
  .rackin-copy{top:76px;left:16px;width:calc(100% - 32px)}
  .rackin-steps li:not(.on){display:none}
  .rackin-copy h2{font-size:28px}
  .rackin-canvas{top:34vh;height:66vh}
}
@media(max-height:760px){.rackin-copy{top:80px}.rackin-copy h2{font-size:clamp(26px,3vw,38px)}}