/* Spatiq Connect — zero-touch provisioning, prepared for Nils & Abbas.
   Visual language: an engineering drawing. Ink on a cool sheet, compressed-air lines in
   pipe-code light blue, ISO safety yellow for advisories, running green for live. One
   family (Archivo) whose width axis carries the "compressed → expanded" idea. */

:root{
  --sheet:#F2F4F5; --sheet-2:#E7EBEE; --paper:#FFFFFF;
  --ink:#13243A; --ink-2:#4A5A6E; --rule:#C5CED6; --grid:rgba(19,36,58,.055);
  --air:#3E9BE0; --air-deep:#155E9E; --air-soft:#D6EAF8;
  --signal:#F2A900; --signal-deep:#8A5D00; --signal-soft:#FFF1C9;
  --live:#1C9A6C; --live-deep:#127552; --live-soft:#D8F2E7;
  --alarm:#D14343;
  --gut:max(18px, calc((100vw - 1300px) / 2 + 20px));
  --capw:min(420px, 34vw);
  --ease:cubic-bezier(.65,0,.3,1);
}

*{box-sizing:border-box}
html{scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;position:relative;background:var(--sheet);color:var(--ink);font-family:"Archivo",system-ui,sans-serif;font-size:17px;line-height:1.55;font-stretch:100%;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg{display:block}
a{color:var(--air-deep)}
:focus-visible{outline:3px solid var(--air-deep);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:8px;z-index:99;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px}
.skip:focus{left:12px}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:10px;font:650 16px/1 "Archivo",sans-serif;font-stretch:104%;padding:14px 20px;border-radius:10px;border:2.5px solid var(--ink);color:var(--ink);background:var(--paper);text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--ink)}
.btn:active{transform:none;box-shadow:none}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{box-shadow:3px 3px 0 var(--air)}
.btn-sm{padding:10px 14px;font-size:14px;border-width:2px;border-radius:9px}

/* ── nav ── */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px var(--gut);background:rgba(242,244,245,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1.5px solid var(--rule)}
.brand{display:flex;gap:10px;align-items:center;color:var(--ink);text-decoration:none}
.brand b{display:block;font-weight:800;font-stretch:118%;font-size:16px;line-height:1.1}
.brand em{display:block;font-style:normal;font-size:12.5px;color:var(--ink-2);line-height:1.2}
.nav-links{display:flex;gap:24px}
.nav-links a{font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.nav-links a:hover{border-bottom-color:var(--air)}

/* ── the air line that threads the page ── */
.pipe-css{background:var(--air);border:2.5px solid var(--ink)}
.airline{position:absolute;left:calc(var(--gut) - 6px);width:12px;top:var(--al-top,100vh);height:var(--al-h,0px);background:var(--air-soft);border-left:2.5px solid var(--ink);border-right:2.5px solid var(--ink);z-index:1;pointer-events:none}
.airline-fill{position:absolute;inset:0;background:var(--air);transform-origin:top;transform:scaleY(var(--alp,0));overflow:hidden}
.airline-fill::after,.run::after,.f-pipe::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.95) 0 3px,transparent 3px 26px);animation:flowV 1.1s linear infinite;opacity:.85}
@keyframes flowV{to{background-position:0 26px}}
.run{position:absolute;background:var(--air);z-index:0;overflow:hidden}
.run-v{width:12px;border-left:2.5px solid var(--ink);border-right:2.5px solid var(--ink)}
.run-h{height:12px;border-top:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink)}
.run-h::after{background:repeating-linear-gradient(270deg,rgba(255,255,255,.95) 0 3px,transparent 3px 26px);animation:flowH 1.1s linear infinite}
@keyframes flowH{to{background-position:-26px 0}}

/* ── hero ── */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.8fr);gap:32px;align-items:center;padding:112px var(--gut) 104px calc(var(--gut) + 52px)}
.hero-title{font-size:clamp(46px,6.6vw,100px);line-height:.92;font-weight:850;letter-spacing:-.012em;margin:0 0 30px}
.hero-title span{display:block;font-stretch:62%;animation:expand 1.1s cubic-bezier(.2,.8,.2,1) forwards}
.hero-title .hl-1{animation-delay:.15s}
.hero-title .hl-2{animation-delay:.5s}
.hero-title .hl-3{animation-delay:.85s}
@keyframes expand{from{font-stretch:62%}to{font-stretch:125%}}
.led-dot{display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--rule);margin-left:.14em;vertical-align:.08em;animation:ledOn .35s 1.85s forwards}
@keyframes ledOn{to{background:var(--live);box-shadow:0 0 0 .07em var(--live-soft),0 0 .35em rgba(28,154,108,.55)}}
.lede{font-size:clamp(17px,1.4vw,20px);max-width:54ch;color:var(--ink-2);margin:0 0 32px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-art{position:relative;margin:0;display:flex;flex-direction:column;align-items:center;gap:22px;z-index:2}
.hero-gw{width:min(280px,58vw)}
.hero-gw svg{width:100%;height:auto;overflow:visible}
.hero-tag{position:relative;display:flex;gap:10px;align-items:center;font-weight:650;font-size:15px;background:var(--paper);border:2px solid var(--ink);border-radius:99px;padding:8px 16px}
.blink-amber{width:10px;height:10px;border-radius:50%;background:var(--signal);animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}

/* gateway drawing (shared by hero and the animatic) */
.gw-body{fill:var(--paper);stroke:var(--ink);stroke-width:3}
.gw-rib,.gw-term{stroke:var(--ink);stroke-width:2.2;fill:none;stroke-linecap:round}
.gw-ant{stroke:var(--ink);stroke-width:4;stroke-linecap:round}
.gw-ant-k{fill:var(--ink)}
.gw-label{fill:var(--paper);stroke:var(--ink);stroke-width:1.6}
.gw-t{font:700 8.5px "Archivo",sans-serif;fill:var(--ink)}
.gw-svg .led-pwr,.gw-svg .led-net,.gw-svg .led-data{fill:#C9D0D5;stroke:var(--ink);stroke-width:1.4}
.hero-gw .led-pwr{fill:var(--live)}
.hero-gw .led-net{fill:var(--signal);animation:blink 1.1s steps(2) infinite}

/* ── generic bands ── */
.band{position:relative;padding:clamp(76px,10vw,144px) 0}
.wrap{padding:0 var(--gut) 0 calc(var(--gut) + 52px)}
.h2{font-size:clamp(34px,4.8vw,62px);font-weight:800;font-stretch:108%;line-height:1.02;letter-spacing:-.012em;margin:0 0 22px;max-width:19ch}
.band .h2::before{content:"";position:absolute;left:calc(var(--gut) - 13px);width:26px;height:18px;margin-top:.28em;z-index:2;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 18'%3E%3Cpath d='M2 2 L13 9 L2 16 Z M24 2 L13 9 L24 16 Z' fill='%23fff' stroke='%2313243A' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.section-lede{font-size:clamp(17px,1.45vw,20px);max-width:62ch;color:var(--ink-2);margin:0 0 48px}
.prose p{max-width:58ch;font-size:18px;margin:0 0 18px}

/* ── context: two lifelines ── */
.ctx-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:center}
.lifelines{border-top:2.5px solid var(--ink)}
.lifeline{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:start;gap:16px;padding:26px 0 22px;border-bottom:1.5px solid var(--rule)}
.ll-name{font-weight:800;font-stretch:115%;padding-top:14px}
.ll-track{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding-top:26px}
.ll-track::before{content:"";position:absolute;left:6px;right:6px;top:7px;height:5px;border-radius:3px;background:var(--air)}
.quiet .ll-track::before{background:repeating-linear-gradient(90deg,var(--rule) 0 9px,transparent 9px 16px)}
.ll-ev{position:relative;font-size:14px;line-height:1.3;display:flex;flex-direction:column;max-width:118px}
.ll-ev::before{content:"";position:absolute;top:-26px;left:0;width:14px;height:14px;border-radius:50%;background:var(--paper);border:3px solid var(--ink)}
.ll-ev b{font-weight:700}
.ll-ev small{color:var(--ink-2);font-size:12.5px;margin-top:2px}
.ll-ev.end{text-align:right;align-items:flex-end}
.ll-ev.end::before{left:auto;right:0}
.ll-ev.bad::before{border-color:var(--alarm);background:#FBE3E3}
.ll-ev.warn::before{border-color:var(--signal-deep);background:var(--signal-soft)}
.ll-ev.good::before{border-color:var(--live);background:var(--live-soft)}
.ll-gap{font-size:13px;color:var(--ink-2);font-style:italic;padding-top:2px}

/* ═════════ the animatic ═════════ */
.track{position:relative;z-index:3;background:var(--sheet);border-top:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--sheet)}
.world{position:absolute;left:0;top:0;width:2400px;height:1500px;transform-origin:0 0;transition:transform 1.35s var(--ease),opacity .6s;will-change:transform;
  background-image:linear-gradient(var(--grid) 1.5px,transparent 1.5px),linear-gradient(90deg,var(--grid) 1.5px,transparent 1.5px),linear-gradient(rgba(19,36,58,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(19,36,58,.025) 1px,transparent 1px);
  background-size:250px 250px,250px 250px,50px 50px,50px 50px}
.world .lines{position:absolute;inset:0;overflow:visible}
.frame{fill:none;stroke:var(--ink);stroke-width:2;opacity:.35}
.ink{stroke:var(--ink);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ink.thin{stroke-width:2}
.ink-fill{fill:var(--ink)}
.paper-fill{fill:var(--paper);stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
.screen-fill{fill:var(--ink)}
.scr-t{fill:#7FD4AE;font:700 19px "Archivo",sans-serif}
.stop{fill:var(--alarm)}
.led-live{fill:var(--live)}
.vent{stroke:var(--ink);stroke-width:2;opacity:.45}
.tiny{font:500 15px "Archivo",sans-serif;fill:var(--ink-2)}
.lbl{font:650 20px "Archivo",sans-serif;fill:var(--ink)}
.lbl.strong{font-size:25px;font-weight:800;font-stretch:115%}
.pipe-o{stroke:var(--ink);stroke-width:17;fill:none;stroke-linejoin:round}
.pipe-i{stroke:var(--air);stroke-width:11;fill:none;stroke-linejoin:round}
.pipe-f{stroke:#fff;stroke-width:3;fill:none;stroke-dasharray:3 24;animation:dash 1.2s linear infinite;opacity:.95}
@keyframes dash{to{stroke-dashoffset:-27}}
.cable{stroke:var(--ink);stroke-width:4.5;fill:none;stroke-linecap:round}
.sdraw{stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);transition:stroke-dashoffset 1.1s var(--ease)}
.sdraw.on{stroke-dashoffset:0}
.signal path{stroke:var(--live);stroke-width:4.5;fill:none;stroke-linecap:round}
.signal.on path{animation:sig 1.6s ease-in-out infinite}
.signal.on path:nth-child(2){animation-delay:.2s}
.signal.on path:nth-child(3){animation-delay:.4s}
@keyframes sig{0%,100%{opacity:.25}50%{opacity:1}}
.link-base{stroke:var(--ink);stroke-width:2.5;stroke-dasharray:6 10;fill:none;opacity:.4}
.link-live{stroke:var(--air-deep);stroke-width:6;fill:none;stroke-linecap:round;stroke-dasharray:16 18;animation:dash2 .9s linear infinite}
@keyframes dash2{to{stroke-dashoffset:-34}}
.leader{stroke:var(--ink);stroke-width:2;fill:none;stroke-dasharray:4 7}
.sreveal{opacity:0;transition:opacity .6s}
.sreveal.on{opacity:1}

/* elements that appear on cue */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s,transform .55s var(--ease);pointer-events:none}
.reveal.on{opacity:1;transform:none;pointer-events:auto}

/* the gateway travels from the bench to the wall */
.gw{position:absolute;left:250px;top:1030px;width:124px;height:150px;z-index:2;transition:left 1.4s var(--ease),top 1.4s var(--ease)}
.gw.on{left:1308px;top:802px}
.gw .gw-svg{position:absolute;left:-8px;top:-54px;width:140px;height:214px;overflow:visible}
.gw.on .led-pwr{fill:var(--live)}
.gw.on .led-net{fill:var(--signal);animation:blink 1.1s steps(2) infinite}
.stage[data-scene="4"] .gw .led-net,.stage[data-scene="5"] .gw .led-net,.stage[data-scene="6"] .gw .led-net,.stage[data-scene="7"] .gw .led-net,.stage[data-scene="8"] .gw .led-net{fill:var(--live);animation:none}
.stage[data-scene="7"] .gw .led-data,.stage[data-scene="8"] .gw .led-data{fill:var(--live);animation:blink .5s steps(2) infinite}

/* drawing cards */
.card{position:absolute;z-index:3;background:var(--paper);border:2.5px solid var(--ink);border-radius:14px;padding:18px 24px 22px;font-size:19px;line-height:1.4;box-shadow:9px 9px 0 rgba(19,36,58,.09)}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:800;font-size:24px;font-stretch:112%;line-height:1.15;margin:0 0 14px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.pill{flex:none;font-size:14.5px;font-weight:700;font-stretch:100%;padding:4px 11px;border-radius:99px;border:2px solid var(--ink)}
.pill.amber{background:var(--signal-soft);border-color:var(--signal-deep);color:var(--signal-deep)}
.pill.live{background:var(--live-soft);border-color:var(--live-deep);color:var(--live-deep)}
.kv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:9px 16px;margin:0}
.kv dt{color:var(--ink-2);font-weight:500}
.kv dd{margin:0;font-weight:650}
.sstrike{transition:color .4s}
.sstrike.on{text-decoration:line-through;text-decoration-thickness:2px;color:var(--ink-2)}
.hlrow{transition:background .4s,box-shadow .4s}
.hlrow.on{background:var(--signal-soft);box-shadow:0 0 0 5px var(--signal-soft)}
.asking{margin:4px 0;font-size:19px;font-weight:600}
.asking small{font-weight:500;color:var(--ink-2)}
.dots{display:inline-flex;gap:5px;margin-left:8px}
.dots b{width:7px;height:7px;border-radius:50%;background:var(--air-deep);animation:blink .9s infinite}
.dots b:nth-child(2){animation-delay:.3s}
.dots b:nth-child(3){animation-delay:.6s}
.stack{display:grid}
.stack > *{grid-area:1/1;align-self:start}
.cands{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.cands li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:10px 14px;border:2px solid var(--rule);border-radius:9px;color:var(--ink-2)}
.cands li.match{border-color:var(--live);background:#E9F7F1;color:var(--ink);font-weight:650}
.cands em{font-style:normal;font-size:14.5px;color:var(--live-deep);font-weight:700;white-space:nowrap}
.sigs{width:100%;border-collapse:collapse;font-size:17px}
.sigs caption{text-align:left;font-weight:700;margin-bottom:8px}
.sigs th{text-align:left;font-weight:600;padding:8px 0;border-top:1.5px solid var(--rule)}
.sigs td{padding:8px 0 8px 12px;border-top:1.5px solid var(--rule);color:var(--ink-2);white-space:nowrap}
.sigs.on tr{animation:rowIn .45s both}
.sigs.on tr:nth-child(2){animation-delay:.08s}.sigs.on tr:nth-child(3){animation-delay:.16s}.sigs.on tr:nth-child(4){animation-delay:.24s}.sigs.on tr:nth-child(5){animation-delay:.32s}.sigs.on tr:nth-child(6){animation-delay:.4s}
@keyframes rowIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.nameplate{background:linear-gradient(var(--paper),var(--paper)) padding-box}
.nameplate .card-h{font-stretch:125%;letter-spacing:.01em}
.readout{display:flex;align-items:baseline;gap:8px;margin:0 0 6px}
.readout b{font-size:66px;line-height:1;font-weight:850;font-stretch:118%;font-variant-numeric:tabular-nums}
.readout span{font-size:22px;color:var(--ink-2);font-weight:600}
.spark{width:100%;height:110px}
.spark-band{stroke:var(--rule);stroke-dasharray:4 6;stroke-width:1.5;fill:none;vector-effect:non-scaling-stroke}
.spark-line{stroke:var(--air-deep);stroke-width:3;fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.buffer{font-size:16.5px;background:#EEF6FD;border-left:4px solid var(--air);padding:10px 12px;margin:12px 0 0}
.tag{position:absolute;z-index:3;background:var(--ink);color:#fff;font-size:17px;font-weight:650;padding:8px 13px;border-radius:7px;white-space:nowrap}

.titleblock{position:absolute;display:grid;grid-template-columns:1.5fr 1fr;border:2.5px solid var(--ink);background:var(--paper);font-size:16px;z-index:2}
.titleblock div{padding:8px 12px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.titleblock div:nth-child(2n){border-right:0}
.titleblock div:nth-child(n+3){border-bottom:0}
.titleblock span{display:block;font-size:12.5px;color:var(--ink-2)}
.titleblock b{font-weight:700}

/* the installer's phone */
.phone{position:absolute;z-index:4;width:300px;height:620px;border-radius:46px;background:var(--ink);padding:12px;box-shadow:16px 16px 0 rgba(19,36,58,.12)}
.phone.reveal{transform:translateY(60px) rotate(2deg)}
.phone.reveal.on{transform:none}
.phone-in{position:relative;width:100%;height:100%;border-radius:35px;background:var(--paper);overflow:hidden}
.p-status{position:relative;z-index:2;height:38px;display:flex;justify-content:space-between;align-items:center;padding:4px 24px 0;font-size:14px;font-weight:700}
.p-screen{position:absolute;top:38px;left:0;right:0;bottom:0;padding:16px 20px 20px;display:flex;flex-direction:column;gap:10px;font-size:15.5px}
.p-screen.reveal{transform:translateX(24px)}
.p-screen.reveal.on{transform:none}
.p-screen.dark{top:0;padding-top:54px;background:#0F1B2A;color:#fff}
.stage .phone-in:has(.p-screen.dark.on) .p-status{color:#fff}
.p-hint{font-size:16.5px;text-align:center;margin:6px 0 0;font-weight:600}
.p-hint.small{font-size:14px;opacity:.7;font-weight:500}
.viewfinder{position:relative;width:212px;height:212px;margin:20px auto 10px}
.vf-qr{position:absolute;inset:34px;background:var(--paper);padding:9px;border-radius:6px;transform:rotate(-4deg)}
.vf-qr svg{width:100%;height:100%}
.vf-c{position:absolute;width:38px;height:38px;border:4px solid #fff}
.vf-c.tl{top:0;left:0;border-right:0;border-bottom:0;border-top-left-radius:14px}
.vf-c.tr{top:0;right:0;border-left:0;border-bottom:0;border-top-right-radius:14px}
.vf-c.bl{bottom:0;left:0;border-right:0;border-top:0;border-bottom-left-radius:14px}
.vf-c.br{bottom:0;right:0;border-left:0;border-top:0;border-bottom-right-radius:14px}
.scanline{position:absolute;left:12px;right:12px;top:22px;height:3px;border-radius:2px;background:#5BE3A8;box-shadow:0 0 14px #5BE3A8;animation:scan 1.5s ease-in-out infinite alternate}
@keyframes scan{to{top:186px}}
.p-kick{font-size:13.5px;font-weight:700;color:var(--ink-2);margin:4px 0 0}
.p-big{font-size:34px;line-height:1.05;font-weight:850;font-stretch:115%;margin:0}
.p-sub{margin:0;color:var(--ink-2);font-size:15px}
.center{text-align:center}
.p-row{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1.5px solid var(--rule)}
.p-row span{color:var(--ink-2)}
.t-amber{color:var(--signal-deep)}
.t-muted{color:var(--ink-2);font-weight:500}
.p-btn{margin-top:auto;background:var(--ink);color:#fff;border:0;border-radius:14px;font:700 17px "Archivo",sans-serif;padding:16px}
.p-btn.pressed{background:var(--live)}
.p-field{display:flex;flex-direction:column;border:2px solid var(--rule);border-radius:11px;padding:7px 12px}
.p-field span{font-size:12.5px;color:var(--ink-2)}
.p-field b{font-size:16px}
.p-done{width:88px;height:88px;margin:18px auto 4px}
.p-done svg{width:100%;height:100%}
.p-done circle{fill:var(--live-soft);stroke:var(--live);stroke-width:3}
.p-done path{stroke:var(--live);stroke-width:4.5;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40}
.p-screen.on .p-done path{animation:tick .6s .25s forwards}
@keyframes tick{to{stroke-dashoffset:0}}
.p-steps{list-style:none;padding:0;margin:auto 0 0}
.p-steps li{position:relative;padding:10px 0 10px 28px;border-top:1.5px solid var(--rule)}
.p-steps li::before{content:"";position:absolute;left:3px;top:15px;width:13px;height:13px;border-radius:50%;border:2.5px solid var(--ink-2)}
.p-steps li.done::before{background:var(--live);border-color:var(--live)}

/* S8: the two screens */
.stage[data-scene="8"] .world{opacity:.14}
.duo{position:absolute;inset:0;z-index:6}
.duo.reveal{transform:none}
.duo-inner{position:absolute;left:0;top:0;width:920px;height:540px;transform-origin:0 0;display:flex;align-items:flex-end;gap:44px}
.duo.reveal .duo-inner > *{transition:transform .8s var(--ease),opacity .6s;opacity:0;transform:translateY(40px)}
.duo.on .duo-inner > *{opacity:1;transform:none}
.duo.on .duo-inner > .mobile{transition-delay:.2s}
.laptop{width:640px}
.lt-screen{background:var(--paper);border:11px solid var(--ink);border-radius:16px 16px 4px 4px;height:400px;overflow:hidden;font-size:14px}
.lt-base{height:16px;background:var(--ink);border-radius:0 0 16px 16px;margin:0 -30px}
.mobile{width:236px}
.mb-screen{background:var(--paper);border:10px solid var(--ink);border-radius:36px;height:460px;overflow:hidden;padding:12px 12px 14px;display:flex;flex-direction:column;gap:8px}
.duo-cap{font-size:16px;font-weight:700;font-stretch:108%;text-align:center;margin:16px 0 0}
.ui-bar{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:12px 16px;border-bottom:2px solid var(--ink);background:var(--sheet)}
.ui-bar b{font-weight:800;font-stretch:112%}
.ui-bar span{font-size:13px;color:var(--ink-2)}
.ui-bar.small{margin:-12px -12px 4px;padding:26px 14px 10px;flex-direction:column;gap:0}
.ui-counters{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1.5px solid var(--rule)}
.ui-counters div{padding:10px 16px;border-right:1.5px solid var(--rule)}
.ui-counters div:last-child{border-right:0}
.ui-counters b{display:block;font-size:28px;line-height:1.1;font-weight:850;font-stretch:112%}
.ui-counters span{font-size:12.5px;color:var(--ink-2)}
.ui-table{width:100%;border-collapse:collapse;font-size:13.5px}
.ui-table th{text-align:left;font-weight:600;color:var(--ink-2);padding:9px 14px;border-bottom:1.5px solid var(--rule)}
.ui-table td{padding:10px 14px;border-bottom:1px solid #E3E8EC}
.sd{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:1px}
.sd.live{background:var(--live)}
.sd.amber{background:var(--signal)}
.sd.off{background:#9AA8B5}
.same{font-weight:800;margin-left:4px;padding:1px 3px;border-radius:4px;transition:box-shadow .4s}
.rowhl{transition:background .4s}
.rowhl.on{background:#EEF6FD}
.rowhl.on .same{box-shadow:0 0 0 2.5px var(--air)}
.mb-machine{display:flex;flex-direction:column;padding:10px 4px;border-bottom:1.5px solid var(--rule)}
.mb-machine span{font-size:12.5px;color:var(--ink-2)}
.mb-machine b{font-size:30px;line-height:1.1;font-weight:850;font-stretch:112%}
.mb-machine small{font-size:12.5px}
.mb-btn{margin-top:auto;background:var(--ink);color:#fff;border-radius:12px;text-align:center;padding:12px;font-weight:700;font-size:15px}

/* caption panel */
.caption{position:absolute;left:28px;bottom:28px;width:var(--capw);z-index:8;background:var(--paper);border:2.5px solid var(--ink);border-radius:16px;padding:18px 20px 14px;box-shadow:9px 9px 0 rgba(19,36,58,.09)}
.rail{position:relative;display:flex;justify-content:space-between;list-style:none;padding:0;margin:0 0 16px}
.rail::before,.rail::after{content:"";position:absolute;left:16px;top:50%;height:5px;margin-top:-2.5px;border-radius:3px}
.rail::before{right:16px;background:var(--rule)}
.rail::after{width:calc((100% - 32px) * var(--railp,0));background:var(--air);transition:width .5s var(--ease)}
.rail li{position:relative;z-index:1}
.rail button{width:32px;height:32px;border-radius:50%;border:2.5px solid var(--ink);background:var(--paper);font:750 13px "Archivo",sans-serif;color:var(--ink);cursor:pointer;padding:0;transition:background .3s,color .3s}
.rail button.done{background:var(--air-soft)}
.rail button.cur{background:var(--ink);color:#fff}
.caps{display:grid}
.cap{grid-area:1/1;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s var(--ease);visibility:hidden}
.cap.on{opacity:1;transform:none;visibility:visible}
.cap h3{font-size:clamp(22px,2vw,28px);font-weight:800;font-stretch:112%;margin:0 0 8px;line-height:1.08}
.cap p{margin:0;font-size:16.5px;line-height:1.5}
.cap-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1.5px solid var(--rule)}
.play-i{width:0;height:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.playing .play-i{width:10px;height:12px;border:0;border-left:3.5px solid currentColor;border-right:3.5px solid currentColor}
.clock{display:flex;align-items:baseline;gap:8px}
.clock span{font-size:13px;color:var(--ink-2)}
.clock b{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;font-stretch:110%}
.stage-note{position:absolute;right:20px;bottom:16px;z-index:7;margin:0;font-size:13px;color:var(--ink-2);background:rgba(242,244,245,.9);padding:4px 8px;border-radius:5px}

/* ═════════ after-sales ═════════ */
.as-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:52px;align-items:start}
.valves{list-style:none;padding:0;margin:0;position:relative}
.valves::before{content:"";position:absolute;left:23px;top:30px;bottom:30px;width:12px;background:var(--air);border-left:2.5px solid var(--ink);border-right:2.5px solid var(--ink)}
.valves button{position:relative;display:flex;gap:18px;align-items:center;width:100%;text-align:left;background:none;border:0;padding:9px 0;cursor:pointer;font:inherit;color:inherit}
.bubble{position:relative;flex:none;width:58px;height:58px;border-radius:50%;border:2.5px solid var(--ink);background:var(--paper);display:grid;grid-template-rows:1fr 1fr;justify-items:center;font-size:12.5px;font-weight:800;transition:background .25s,color .25s}
.bubble::after{content:"";position:absolute;left:5px;right:5px;top:50%;height:2px;margin-top:-1px;background:currentColor}
.bubble i{font-style:normal;line-height:1}
.bubble i:first-child{align-self:end;padding-bottom:4px}
.bubble i:last-child{align-self:start;padding-top:4px}
.valves [aria-pressed="true"] .bubble{background:var(--ink);color:#fff}
.valves b{display:block;font-size:18px;font-weight:750;line-height:1.25}
.valves small{display:block;color:var(--ink-2);font-size:14.5px;line-height:1.35}
.valves button:hover b{text-decoration:underline;text-decoration-color:var(--air);text-decoration-thickness:2px;text-underline-offset:3px}
.desk{position:sticky;top:96px}
.desk-screen{background:var(--paper);border:2.5px solid var(--ink);border-radius:14px;overflow:hidden;box-shadow:10px 10px 0 rgba(19,36,58,.08)}
.desk-body{position:relative;min-height:400px;padding:22px 26px 24px}
.dv{display:none}
.dv.on{display:block;animation:dvIn .4s var(--ease)}
@keyframes dvIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dv h3{font-size:26px;font-weight:800;font-stretch:108%;margin:6px 0 10px;line-height:1.15}
.dv p{margin:0 0 10px;max-width:60ch}
.dv-kick{font-size:14px;font-weight:700;color:var(--ink-2);margin:0}
.dv-chart{width:100%;height:auto;margin:12px 0;background:linear-gradient(#EEF1F3 1px,transparent 1px) 0 0/100% 28px}
.thr{stroke:var(--alarm);stroke-dasharray:6 6;stroke-width:1.5}
.thr-t{font:600 12px "Archivo",sans-serif;fill:var(--alarm)}
.trend{fill:none;stroke:var(--air-deep);stroke-width:3;stroke-linejoin:round}
.visit{stroke:var(--live);stroke-width:2;stroke-dasharray:4 4}
.dv-meta{font-size:14px;color:var(--ink-2);border-top:1.5px solid var(--rule);padding-top:10px;margin-top:14px !important}
.dv blockquote{margin:12px 0;padding:14px 16px;background:#F4F7F9;border-left:4px solid var(--air);font-size:17px}
.dv-actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.chip{display:inline-block;padding:8px 14px;border-radius:99px;border:2px solid var(--ink);font-weight:700;font-size:14px}
.chip.on{background:var(--live);border-color:var(--live);color:#fff}
.q-table{width:100%;border-collapse:collapse;font-size:15px;margin:8px 0}
.q-table td{padding:10px 6px;border-bottom:1.5px solid var(--rule)}
.q-table td:nth-child(2){text-align:center;width:40px}
.q-table td:last-child{color:var(--ink-2);font-size:13.5px}
.desk-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}

/* ═════════ customer's screen ═════════ */
.tablet{border:14px solid var(--ink);border-radius:30px;background:var(--paper);overflow:hidden;box-shadow:14px 14px 0 rgba(19,36,58,.08)}
.portal{font-size:15px}
.pt-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 22px;border-bottom:2px solid var(--ink);background:var(--sheet)}
.pt-top b{font-size:19px;font-weight:800;font-stretch:112%;margin-right:10px}
.pt-top span{color:var(--ink-2)}
.pt-partner{font-size:14px;color:var(--ink-2)}
.pt-partner b{font-size:14px;color:var(--ink);font-stretch:100%;margin:0}
.pt-body{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:540px}
.pt-machines{border-right:1.5px solid var(--rule);padding:12px;display:flex;flex-direction:column;gap:6px;background:#FAFBFC}
.pt-m{text-align:left;background:none;border:2px solid transparent;border-radius:10px;padding:12px;font:inherit;color:inherit;cursor:pointer}
.pt-m span{display:block;font-weight:750}
.pt-m small{display:block;color:var(--ink-2);font-size:13px;line-height:1.35;margin-top:2px}
.pt-m:hover{border-color:var(--rule)}
.pt-m.on{border-color:var(--ink);background:var(--paper)}
.pt-main{padding:20px 24px 24px;display:flex;flex-direction:column;gap:16px;min-width:0}
.pt-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.pt-head h3{margin:0;font-size:26px;line-height:1.1;font-weight:800;font-stretch:108%}
.pt-head p{margin:4px 0 0;color:var(--ink-2);font-size:14px}
.pt-live{display:grid;grid-template-columns:160px minmax(0,1fr);gap:16px;align-items:center;border:1.5px solid var(--rule);border-radius:12px;padding:14px 16px}
.pt-read span{display:block;font-size:13px;color:var(--ink-2)}
.pt-read b{font-size:50px;line-height:1.05;font-weight:850;font-stretch:115%;font-variant-numeric:tabular-nums}
.pt-read em{font-style:normal;margin-left:4px;color:var(--ink-2);font-weight:600}
.pt-read small{display:block;font-weight:700;color:var(--live-deep)}
.pt-chart{width:100%;height:120px}
.pt-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1.5px solid var(--rule);border-radius:12px}
.pt-facts div{padding:12px 14px;border-right:1.5px solid var(--rule)}
.pt-facts div:last-child{border-right:0}
.pt-facts span{display:block;font-size:12.5px;color:var(--ink-2)}
.pt-facts b{font-size:17px;font-weight:750}
.pt-advice{border:2px solid var(--signal-deep);background:#FFF8E1;border-radius:12px;padding:14px 16px}
.pt-advice p{margin:6px 0 12px}
.pt-advice .dv-kick{margin:0}
.pt-advice-actions,.pt-form-actions{display:flex;flex-wrap:wrap;gap:8px}
.pt-form{border:2px solid var(--ink);border-radius:12px;padding:14px 16px}
.pt-form fieldset{border:0;padding:0;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:8px 20px}
.pt-form legend{font-weight:750;margin-bottom:8px;padding:0}
.pt-form label{display:flex;gap:8px;align-items:center;cursor:pointer}
.pt-form input{accent-color:var(--ink);width:18px;height:18px}
.pt-toast{margin:0;background:#E9F7F1;border:2px solid var(--live);border-radius:12px;padding:12px 14px;font-weight:650}
.pt-docs{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:14px;margin-top:auto;padding-top:14px;border-top:1.5px solid var(--rule)}
.pt-docs span{font-weight:750}
.fine{font-size:13px;color:var(--ink-2);margin:14px 0 0}

/* ═════════ under the hood ═════════ */
.flow{display:grid;grid-template-columns:auto minmax(50px,1fr) auto minmax(50px,1fr) auto minmax(250px,1.25fr);grid-template-rows:auto auto;align-items:center;margin:8px 0 60px}
.f-node{position:relative;z-index:1;border:2.5px solid var(--ink);border-radius:12px;background:var(--paper);padding:14px 16px;min-width:140px}
.f-node b{display:block;font-weight:800;font-stretch:108%;font-size:17px;line-height:1.2}
.f-node small{color:var(--ink-2);font-size:13.5px}
.f-node.strong{background:var(--ink);color:#fff}
.f-node.strong small{color:#C9D6E3}
.f-pipe{position:relative;height:14px;background:var(--air);border-top:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);overflow:visible}
.f-pipe::after{background:repeating-linear-gradient(90deg,rgba(255,255,255,.95) 0 3px,transparent 3px 24px);animation:flowH2 1.1s linear infinite}
@keyframes flowH2{to{background-position:24px 0}}
.f-pipe span{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);font-size:13px;line-height:1.25;text-align:center;width:max-content;max-width:160px;color:var(--ink-2);font-weight:650}
.f-split{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center}
.f-ends{display:flex;flex-direction:column;gap:14px}
.f-ctrl{grid-column:3 / 6;grid-row:2;height:44px;margin:0 70px;border:2.5px dashed var(--ink);border-top:0;border-radius:0 0 14px 14px;position:relative}
.f-ctrl span{position:absolute;left:50%;top:52px;transform:translateX(-50%);font-size:13.5px;color:var(--ink-2);font-weight:650;white-space:nowrap}
.spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 52px;margin:48px 0 0}
.spec div{display:grid;grid-template-columns:180px minmax(0,1fr);gap:16px;padding:16px 0;border-top:1.5px solid var(--rule)}
.spec dt{font-weight:750}
.spec dd{margin:0;color:var(--ink-2)}

/* ═════════ honest split ═════════ */
.split-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:36px}
.split-col{border:2.5px solid var(--ink);border-radius:14px;padding:26px 28px;background:var(--paper)}
.split-col.site{background:repeating-linear-gradient(45deg,var(--paper) 0 11px,#F1F4F6 11px 22px)}
.split-col h3{margin:0 0 14px;font-size:24px;font-weight:800;font-stretch:110%}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding:9px 0 9px 30px;border-top:1.5px solid var(--rule)}
.ticks li::before{content:"";position:absolute;left:2px;top:15px;width:14px;height:8px;border-left:3px solid var(--live);border-bottom:3px solid var(--live);transform:rotate(-45deg)}
.site .ticks li::before{width:12px;height:12px;border:3px solid var(--ink-2);border-radius:2px;transform:none;top:14px}

/* ═════════ roles ═════════ */
.roles-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2.5px solid var(--ink);margin-top:32px}
.role{padding:22px 28px 6px 0}
.role + .role{padding-left:28px;border-left:1.5px solid var(--rule)}
.role h3{margin:0 0 10px;font-size:22px;font-weight:800;font-stretch:112%}
.role ul{margin:0;padding-left:18px}
.role li{margin:6px 0}

/* ═════════ pilot ═════════ */
.pilot{border-top:2.5px solid var(--ink)}
.pilot-wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;align-items:start}
.pilot-card{border:2.5px solid var(--ink);border-radius:16px;padding:26px 28px;background:var(--paper);box-shadow:10px 10px 0 rgba(19,36,58,.08)}
.pilot-card h3{margin:0 0 12px;font-size:22px;font-weight:800;font-stretch:110%}
.pilot-list{margin:0;padding:0;list-style:none}
.pilot-list li{position:relative;padding:10px 0 10px 28px;border-top:1.5px solid var(--rule)}
.pilot-list li::before{content:"";position:absolute;left:2px;top:16px;width:12px;height:12px;border-radius:50%;border:3px solid var(--air-deep)}

.foot{position:relative;z-index:2;border-top:2.5px solid var(--ink);padding:28px 0 44px;font-size:14px;color:var(--ink-2);background:var(--sheet)}
.foot p{margin:0 0 6px;max-width:80ch}
.foot b{color:var(--ink)}

/* ═════════ responsive ═════════ */
@media (max-width:1100px){
  .nav-links{display:none}
  .as-grid,.pilot-wrap,.ctx-grid{grid-template-columns:minmax(0,1fr)}
  .desk{position:relative;top:auto}
  .flow{grid-template-columns:minmax(0,1fr);justify-items:start;gap:0}
  .flow .f-pipe{width:14px;height:44px;margin-left:36px;border:0;border-left:2.5px solid var(--ink);border-right:2.5px solid var(--ink)}
  .flow .f-pipe::after{background:repeating-linear-gradient(180deg,rgba(255,255,255,.95) 0 3px,transparent 3px 24px);animation:flowV 1.1s linear infinite}
  .flow .f-pipe span{left:30px;bottom:auto;top:50%;transform:translateY(-50%);text-align:left;max-width:240px}
  .f-split{grid-template-columns:minmax(0,1fr);width:100%}
  .f-split > .f-pipe span{display:none}
  .f-ends{flex-direction:row;flex-wrap:wrap}
  .f-ctrl{grid-column:1;grid-row:auto;height:auto;margin:22px 0 0;border:2.5px dashed var(--ink);border-radius:12px;padding:10px 14px}
  .f-ctrl span{position:static;transform:none;white-space:normal}
}
@media (max-width:860px){
  :root{--gut:16px}
  body{font-size:16px}
  .nav{padding:8px 14px}
  .brand em{display:none}
  .hero{grid-template-columns:minmax(0,1fr);padding:92px 18px 96px 46px;gap:44px;min-height:auto}
  .hero-title{font-size:clamp(40px,12.2vw,76px)}
  .hero-art{align-items:flex-start}
  .hero-gw{width:190px;margin-left:30px}
  .wrap{padding:0 18px 0 46px}
  .band .h2::before{left:3px}
  .lifeline{grid-template-columns:minmax(0,1fr);gap:4px}
  .ll-name{padding-top:0}
  .ll-track{flex-direction:column;gap:16px;padding:6px 0 0 30px}
  .ll-track::before{left:5px;right:auto;top:6px;bottom:6px;width:5px;height:auto}
  .quiet .ll-track::before{background:repeating-linear-gradient(180deg,var(--rule) 0 9px,transparent 9px 16px)}
  .ll-ev,.ll-ev.end{max-width:none;text-align:left;align-items:flex-start}
  .ll-ev::before,.ll-ev.end::before{left:-31px;right:auto;top:1px}
  .caption{left:10px;right:10px;bottom:10px;width:auto;padding:12px 14px 10px;border-radius:14px;box-shadow:5px 5px 0 rgba(19,36,58,.09)}
  .rail{margin-bottom:10px}
  .rail button{width:28px;height:28px;font-size:12px}
  .cap h3{font-size:20px;margin-bottom:5px}
  .cap p{font-size:14.5px;line-height:1.45}
  .cap-foot{margin-top:10px;padding-top:9px}
  .stage-note{top:62px;bottom:auto;right:10px;font-size:11.5px}
  .valves b{font-size:16.5px}
  .desk-body{padding:18px;min-height:0}
  .dv h3{font-size:22px}
  .tablet{border-width:8px;border-radius:20px}
  .pt-top{padding:12px 14px}
  .pt-body{grid-template-columns:minmax(0,1fr);min-height:0}
  .pt-machines{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1.5px solid var(--rule);padding:8px}
  .pt-m{flex:none;min-width:150px;padding:9px 10px}
  .pt-main{padding:16px}
  .pt-live{grid-template-columns:minmax(0,1fr);gap:6px}
  .pt-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pt-facts div:nth-child(2){border-right:0}
  .pt-facts div:nth-child(-n+2){border-bottom:1.5px solid var(--rule)}
  .spec{grid-template-columns:minmax(0,1fr)}
  .spec div{grid-template-columns:minmax(0,1fr);gap:4px}
  .split-grid,.roles-grid{grid-template-columns:minmax(0,1fr)}
  .role,.role + .role{padding:18px 0 4px;border-left:0}
  .role + .role{border-top:1.5px solid var(--rule)}
  .btn{font-size:15px;padding:13px 16px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;animation-delay:0s !important;transition-duration:.001s !important;scroll-behavior:auto !important}
}