.home .process-art.interactive-process{pointer-events:auto;clip-path:none;mask-image:none;overflow:visible;aspect-ratio:auto;margin-bottom:0;background:radial-gradient(ellipse at 50% 45%,#00385866,transparent 65%);color:#e8f6ff}
.demo-caption{font-size:10px;letter-spacing:1.8px;color:#67c8f5;margin-bottom:12px;text-align:center}.demo-canvas{position:relative;aspect-ratio:2/1;background-image:linear-gradient(#089cee08 1px,transparent 1px),linear-gradient(90deg,#089cee08 1px,transparent 1px);background-size:24px 24px}
.demo-wires{position:absolute;width:100%;height:100%;inset:0;overflow:visible}.wire-base{stroke:#0789b5;stroke-width:1.5;fill:none;opacity:.55}.wire-pulse{fill:none;stroke:#d6ffff;stroke-width:2;stroke-dasharray:3 5 1 91;opacity:0;filter:drop-shadow(0 0 3px #00ddff)}.wire-live{opacity:1;animation:electrical-travel 1s linear infinite}
.demo-inputs,.demo-outputs{position:absolute;top:2%;bottom:2%;display:grid;grid-template-rows:repeat(4,1fr);gap:5%;margin:0;padding:0;list-style:none}.demo-inputs{left:0;width:22.5%}.demo-outputs{left:70.625%;width:29.375%}.demo-input,.demo-outputs li{display:flex;align-items:center;gap:8px;border:1px solid #24536d;border-radius:10px;padding:8px;background:linear-gradient(115deg,#0a2940,#061a30);text-align:left;color:#e8f6ff;min-width:0}.demo-input{cursor:pointer;width:100%;font:inherit}.demo-input[aria-pressed=true]{border-color:#00d5ff;box-shadow:0 0 18px #00caff22;background:#08354e}.demo-input:hover{border-color:#91e8ff}.demo-input strong,.demo-outputs strong{display:block;font-size:clamp(9px,.87vw,13px);line-height:1.3}.demo-input small,.demo-outputs small{display:block;font-size:clamp(7px,.68vw,10px);line-height:1.4;color:#aacce5;margin-top:5px}.source-icon{flex-shrink:0;font-weight:800;font-size:20px;width:28px;height:32px;display:grid;place-items:center;border-radius:5px;background:#047b51;color:#fff}.source-1{background:#157ab1}.source-2{background:#c9e5ff;color:#165795}.source-3{background:#235fdb}
.demo-hub{position:absolute;left:37.5%;top:26%;width:22.5%;height:48%;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:17px;border:1px solid #12d4ff;background:linear-gradient(150deg,#0d3550,#061c30);box-shadow:0 0 24px #00bfff35;gap:4px}.demo-hub .hub-brand{display:flex;flex-direction:column;align-items:center;gap:6px;width:86%}.demo-hub .hub-mark{width:42%;line-height:0}.demo-hub .hub-mark img{position:static!important;width:100%!important;max-width:100%!important;height:auto!important;display:block;inset:auto!important;filter:none!important}.demo-hub .hub-word{font-size:clamp(15px,1.7vw,22px);font-weight:750;letter-spacing:-.04em;line-height:1;color:#d7e6f2}.demo-hub .hub-word span{background:linear-gradient(90deg,#00d4ff,#3d6bff 52%,#8b5cff);-webkit-background-clip:text;background-clip:text;color:transparent}.hub-gear{font-size:24px;color:#45d5ff;line-height:1.2}.hub-state{font-size:clamp(8px,.75vw,11px);color:#b3dbed}.demo-working .hub-gear{animation:gear-turn 2s linear infinite}.demo-outputs li{opacity:.62;filter:saturate(.55);transition:opacity .35s,border-color .35s;transform:none!important}.demo-outputs li.result-shown{opacity:1;filter:none;border-color:#2ab790;box-shadow:0 0 12px #00d3a022}.demo-outputs li.result-review{border-color:#dc943b}.result-symbol{display:grid;place-items:center;flex-shrink:0;background:#0b684d;color:white;width:27px;height:27px;border-radius:50%;font-size:19px}.result-review .result-symbol{background:#bc6917}.demo-controls{display:flex;align-items:center;gap:8px;margin-top:14px}.demo-status{flex:1;font-size:11px;color:#97dff4}.demo-controls button{border:1px solid #356179;border-radius:18px;background:#092638;color:#ddf6ff;padding:6px 12px;font-size:10px;cursor:pointer}.demo-note{font-size:10px;color:#87aabf;margin-top:10px}.demo-paused .wire-pulse,.demo-paused .hub-gear{animation-play-state:paused}.demo-input:focus-visible,.demo-controls button:focus-visible,.step-arrow:focus-visible,.run-arrow:focus-visible{outline:2px solid #00c6ff;outline-offset:3px}
.workflow-card .step-arrow{border:0;background:none;padding:0;cursor:pointer;font:inherit;font-size:23px;color:#008def;align-self:flex-start;line-height:58px;min-width:22px}.workflow-card .step .art-icon,.node-icon{animation:none!important;transform:none!important}.electric-steps li::after{animation:none!important;background:#b7dce9;box-shadow:none}.run-arrow{position:absolute;top:16px;right:-15px;z-index:3;background:#f2fbff;border:0;color:#0089d9;font-size:23px;line-height:30px;cursor:pointer;border-radius:50%;width:30px;padding:0}.arrow-active{color:#00ccff!important;filter:drop-shadow(0 0 4px #00adff);animation:arrow-current .45s linear infinite!important}.is-done .art-icon,.is-done .node-icon{box-shadow:0 0 0 2px #18a77d45}.is-processing .art-icon,.is-processing .node-icon{background:#fff!important;box-shadow:0 0 0 2px #00bfff80,0 0 18px #00bfff35;color:transparent}.is-processing .art-icon::after,.is-processing .node-icon::after{content:'⚙';position:absolute;inset:0;display:grid;place-items:center;font-size:35px;color:#078af1;animation:gear-turn 1.1s linear infinite}.art-icon{position:relative}.is-final .art-icon::after,.is-final .node-icon::after{content:'✓';position:absolute;inset:0;border-radius:14px;background:#08a36c;color:#fff;font-size:35px;display:grid;place-items:center}.workflow-card .workflow-detail{font-size:11px;color:#076eaf;display:block;margin-top:16px;text-decoration:underline}.workflow-card .card-heading{text-decoration:none;color:inherit}
@keyframes electrical-travel{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}@keyframes gear-turn{to{transform:rotate(360deg)}}@keyframes arrow-current{50%{filter:drop-shadow(0 0 7px #00caff)}}
@media(max-width:800px){.home .process-art.interactive-process{width:100%;margin:30px 0}.demo-input strong,.demo-outputs strong{font-size:clamp(8px,2vw,14px)}.demo-input small,.demo-outputs small{font-size:clamp(6px,1.5vw,10px)}.demo-hub strong{font-size:clamp(12px,3vw,22px)}.demo-input,.demo-outputs li{padding:5px;gap:5px;border-radius:7px}.source-icon{width:21px;height:26px;font-size:15px}.result-symbol{width:20px;height:20px;font-size:15px}.demo-status{font-size:10px}.hub-state{font-size:8px}.hub-gear{font-size:18px}.demo-hub{border-radius:10px}.demo-note{font-size:9px}.run-arrow{right:-14px}}
@media(max-width:440px){.demo-input small{display:none}.demo-input{flex-direction:column;justify-content:center;gap:4px}.demo-outputs small{margin-top:2px}.demo-hub{gap:1px}.demo-controls button{padding:7px 9px}.demo-caption{font-size:8px}}
@media(prefers-reduced-motion:reduce){.wire-live{animation:none;stroke-dasharray:none;opacity:.7}.demo-working .hub-gear,.is-processing .art-icon::after,.is-processing .node-icon::after,.arrow-active{animation:none!important}.demo-outputs li{transition:none}}

.electric-steps li::after{display:none}.is-processing .node-icon{position:relative}.workflow-card .steps .step-arrow{animation:none}.workflow-card .steps .step-arrow.arrow-active{animation:arrow-current .45s linear infinite}

@media(min-width:801px){
  .home .hero{height:640px}
  .home .process-art.interactive-process{top:8px;bottom:100px;height:auto;overflow:hidden;margin-bottom:0}
  .home .benefits{z-index:2}
}

.demo-inputs,.demo-outputs{top:0;bottom:0;display:block}.demo-inputs>button,.demo-outputs>li{position:absolute;width:100%;height:20%;box-sizing:border-box}.demo-inputs>:nth-child(1),.demo-outputs>:nth-child(1){top:3.5%}.demo-inputs>:nth-child(2),.demo-outputs>:nth-child(2){top:27.5%}.demo-inputs>:nth-child(3),.demo-outputs>:nth-child(3){top:51.5%}.demo-inputs>:nth-child(4),.demo-outputs>:nth-child(4){top:75.5%}

@media(max-width:440px){.demo-outputs small{display:none}.demo-outputs strong{font-size:9px}.demo-outputs li{gap:4px}.result-symbol{width:17px;height:17px;font-size:12px}}

/* ---------------------------------------------------------------
   Phones: the three-column wiring diagram squeezes the labels down
   to 8-9px and hides the descriptions. Below 700px the demo stacks
   instead, at a text size a person can actually read.
   --------------------------------------------------------------- */
@media(max-width:700px){
  .home .process-art.interactive-process{width:100%;margin:26px 0;background:none}
  .demo-canvas{aspect-ratio:auto;display:grid;gap:12px;background-image:none}
  .demo-wires{display:none}
  .demo-inputs,.demo-outputs{position:static;top:auto;bottom:auto;left:auto;width:100%;display:grid;grid-template-rows:auto;gap:8px}
  .demo-inputs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .demo-inputs>button,.demo-outputs>li{position:static;width:100%;height:auto;top:auto;min-height:56px}
  .demo-input,.demo-outputs li{padding:11px;gap:10px;border-radius:11px}
  .demo-input{flex-direction:row;justify-content:flex-start}
  .demo-hub{position:static;width:100%;height:auto;flex-direction:row;justify-content:center;gap:14px;padding:13px;border-radius:12px}
  .demo-hub .hub-brand{flex-direction:row;align-items:center;width:auto;gap:9px}
  .demo-hub .hub-mark{width:26px}
  .demo-hub .hub-word{font-size:19px}
  .demo-input strong,.demo-outputs strong{font-size:15px;line-height:1.25}
  .demo-input small,.demo-outputs small{display:block;font-size:13px;line-height:1.35;margin-top:3px;color:#b9d8ec}
  .hub-gear{font-size:21px}
  .hub-state{font-size:13px}
  .source-icon{width:31px;height:35px;font-size:18px}
  .result-symbol{width:26px;height:26px;font-size:17px}
  .demo-caption{font-size:11px;letter-spacing:1.4px;margin-bottom:10px}
  .demo-status{font-size:13px}
  .demo-note{font-size:12px;margin-top:12px}
  .demo-controls{margin-top:12px}
  .demo-controls button{font-size:13px;padding:9px 15px}
  .run-arrow{right:-13px}
}

/* Legibility floor. The demo labels were dropping to ~9.8px on a 1440px
   screen and 8px on a small one. Nothing here goes below 11px. */
@media(min-width:701px){
  .demo-input strong,.demo-outputs strong{font-size:clamp(12px,.95vw,14px);line-height:1.3}
  .demo-input small,.demo-outputs small{font-size:clamp(11px,.78vw,12.5px);line-height:1.4;color:#bcd9ec}
  .hub-state{font-size:clamp(11px,.8vw,12px)}
  .demo-caption{font-size:11px}
  .demo-note{font-size:11.5px}
  .demo-controls button{font-size:11.5px}
}