/* line-art scenes (art.js). One stroke weight, one ink, one signal, one neutral. */
.stage{position:absolute;left:0;top:0;transform-origin:0 0}
.stage>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gi{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sig{fill:#15999D}
.edge,.rail-base{fill:none;stroke:#D4D8DD;stroke-width:1.25;vector-effect:non-scaling-stroke}
.edge-on,.rail-prog{fill:none;stroke:#15999D;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}

/* ---------- hero: documents in, decisions out ---------- */
.demo-hero{position:relative}
.mt{font-family:var(--sans);color:var(--ink)}
.mt-lane{position:absolute;inset:0;-webkit-mask:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.is-tall .mt-lane{-webkit-mask:linear-gradient(180deg,transparent 0,#000 12%,#000 90%,transparent 100%);mask:linear-gradient(180deg,transparent 0,#000 12%,#000 90%,transparent 100%)}
.mt-item{position:absolute;left:0;top:0;will-change:transform}
.mt-item{border-radius:20px;box-shadow:0 1px 2px rgba(11,23,36,.04),0 22px 44px -22px rgba(11,23,36,.22)}
.mt-doc,.mt-res{position:absolute;inset:0;border-radius:20px;background:#fff;padding:22px}
.md-h,.mr-h{display:flex;align-items:center;gap:12px}
.md-h b,.mr-h b{font:500 15px/1.2 var(--sans);color:var(--ink);white-space:nowrap}
.md-ico,.mr-ico{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px}
.md-ico{background:#F2F4F4;color:#5F6872}
.mr-ico{background:#0C595C;color:#fff}
.md-ico .gi,.mr-ico .gi{width:18px;height:18px}
.md-lines{display:flex;flex-direction:column;gap:13px;margin-top:28px}
.md-lines i{display:block;height:8px;border-radius:4px;background:#EEF0F1}
.md-lines i:nth-child(1){width:92%}.md-lines i:nth-child(2){width:74%}.md-lines i:nth-child(3){width:86%}
.md-lines i:nth-child(4){width:58%}.md-lines i:nth-child(5){width:90%}.md-lines i:nth-child(6){width:68%}
.mt-res{display:flex;flex-direction:column}
.mr-v{display:flex;flex-direction:column;gap:6px;margin-top:auto}
.mr-v span{font:400 14px/1.2 var(--sans);color:#5F6872}
.mr-v strong{font:400 28px/1.15 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.mr-n{display:flex;align-items:center;gap:8px;margin-top:22px;font:500 14px/1.2 var(--sans);color:#0C595C}
.mr-n em{font-style:normal}
.mr-av{display:none;place-items:center;width:24px;height:24px;border-radius:50%;background:#E3EEF2;color:#2D4A5E;font:600 10px var(--sans)}
.mt-res.to-person .mr-av{display:grid}
.mt-res.to-person .mr-n{color:var(--ink)}
.is-tall .mt-item,.is-tall .mt-doc,.is-tall .mt-res{border-radius:18px}
.is-tall .mt-doc,.is-tall .mt-res{padding:18px 20px}
.is-tall .md-lines{gap:11px;margin-top:20px}
.is-tall .md-lines i:nth-child(n+4){display:none}
.is-tall .mr-v{margin-top:14px;flex-direction:row;align-items:baseline;gap:10px}
.is-tall .mr-v strong{font-size:22px}
.is-tall .mr-n{margin-top:auto}
.mt-tile.is-small{width:56px;height:56px;margin:-28px 0 0 -28px}
/* the axis: a hairline in the logo's teal, a soft light that swells while a document crosses, the logo centred on it */
.mt-axis{position:absolute;width:0;--g:0}
.mt-line{position:absolute;top:0;bottom:0;left:-.75px;width:1.5px;background:linear-gradient(180deg,transparent,#4A9AA0 22%,#4A9AA0 78%,transparent)}
.mt-glow{position:absolute;top:8%;bottom:8%;left:-70px;width:140px;background:radial-gradient(closest-side,rgba(74,154,160,.3),rgba(74,154,160,0));opacity:calc(.25 + var(--g) * .75)}
.mt-axis.is-h{height:0;width:auto}
.mt-axis.is-h .mt-line{left:0;right:0;top:-.75px;bottom:auto;width:auto;height:1.5px;background:linear-gradient(90deg,transparent,#4A9AA0 18%,#4A9AA0 82%,transparent)}
.mt-axis.is-h .mt-glow{left:6%;right:6%;top:-60px;bottom:auto;width:auto;height:120px}
.mt-tile{position:absolute;z-index:2;width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%;--g:0;transform:scale(calc(1 + var(--g) * .05))}
.mt-tile img{display:block;width:100%;height:100%}


/* ---------- deploy: one tile, three places ---------- */
.dp-surf{position:absolute;border-radius:26px;background:#fff;overflow:hidden;box-shadow:0 1px 2px rgba(11,23,36,.04),0 30px 60px -36px rgba(11,23,36,.25)}
.dp-sil{position:absolute;inset:0;opacity:0}
.dp-sil i{position:absolute;display:block;border-radius:10px;background:#F2F2EF}
.dp-tile{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;border-radius:20px;
  background:#0C595C;color:#fff;will-change:transform}
.dp-mark{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#fff;color:#0C595C}
.dp-mark .kz-mark{width:32px;height:32px;animation:spin 18s linear infinite}
.dp-tile b{font:400 16px/1.25 var(--sans);text-align:center;padding:0 14px}
.dp-tile.small{gap:8px}
.dp-tile.small .dp-mark{width:40px;height:40px}
.dp-tile.small .dp-mark .kz-mark{width:24px;height:24px}
.dp-tile.small b{font-size:13px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.dp-mark .kz-mark{animation:none}}

/* ---------- difference ---------- */
.art-diff svg{width:100%;height:100%;overflow:visible}
.iso-coin{font:400 17px var(--sans);fill:#0B1724;text-anchor:middle;opacity:0}
.art-fade{-webkit-mask:linear-gradient(115deg,transparent 4%,#000 22%,#000 78%,transparent 96%);mask:linear-gradient(115deg,transparent 4%,#000 22%,#000 78%,transparent 96%)}

/* ---------- connect · build · manage ---------- */
.hw{font-family:var(--sans)}
.hw .hw-line{fill:none;stroke:#D4D8DD;stroke-width:1.5}
.hw .hw-pulse{fill:none;stroke:#15999D;stroke-width:2;stroke-linecap:round;stroke-dasharray:.2 1.2;stroke-dashoffset:.2;opacity:0}
.hw-tile{position:absolute;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:#fff;color:#5F6872;transform:translate(-50%,-50%);
  box-shadow:0 1px 2px rgba(11,23,36,.04),0 12px 24px -16px rgba(11,23,36,.25);transition:background .35s ease,color .35s ease}
.hw-tile .gi{width:24px;height:24px}
.hw-tile.hw-on{background:#0C595C;color:#fff}
.hw-hub{position:absolute;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;--g:0;transform:scale(calc(1 + var(--g) * .05))}
.hw-hub img{display:block;width:100%;height:100%}
.hw-node{position:absolute;display:flex;align-items:center;gap:12px;width:176px;height:52px;margin:-26px 0 0 -88px;padding:0 10px;border-radius:16px;background:#fff;--g:0;
  box-shadow:0 1px 2px rgba(11,23,36,.04),0 12px 24px -16px rgba(11,23,36,.25);transform:scale(calc(1 + var(--g) * .04))}
.hw-node .hw-tile{position:static;flex:none;width:32px;height:32px;border-radius:10px;transform:none;box-shadow:none}
.hw-node .hw-tile .gi{width:18px;height:18px}
.hw-node i{display:block;flex:none;height:8px;border-radius:4px;background:#EEF0F1}
.hw-node i:nth-of-type(1){width:64px}.hw-node i:nth-of-type(2){width:34px}
/* build: the workflow builder, abstracted (steps as a kind pill and a title bar) */
.hf-node{position:absolute;display:flex;flex-direction:column;justify-content:center;gap:8px;height:38px;margin-top:-19px;padding:0 10px;border-radius:10px;background:#fff;
  box-shadow:0 1px 2px rgba(11,23,36,.04),0 10px 20px -14px rgba(11,23,36,.25)}
.hf-pill{display:flex;align-items:center;width:30px;height:9px;padding-left:3px;border-radius:5px;background:var(--pb)}
.hf-pill b{width:4px;height:4px;border-radius:50%;background:var(--pf)}
.hf-bar{display:block;height:6px;border-radius:3px;background:#E3E7EA}
.hf-more{position:absolute;right:9px;top:9px;width:12px;height:3px;background:radial-gradient(circle,#B9BFC4 1.2px,transparent 1.5px) 0 0/4px 3px repeat-x}
.hf .hw-pulse{stroke-dasharray:.12 1.2}
.hf-plus{position:absolute;display:grid;place-items:center;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px #DCE2E7;color:#3F8BD6}
.hf-plus .gi{width:12px;height:12px;stroke-width:2}
/* control: the same tiles and line as its neighbours, a ring of outputs round you (the teal disc) */
.hc .hc-pulse{stroke-dasharray:.1 .9;opacity:1}
.hc-me{position:absolute;display:grid;place-items:center;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:#0C595C;color:#fff;
  box-shadow:0 1px 2px rgba(11,23,36,.04),0 12px 24px -16px rgba(11,23,36,.3)}
.hc-me .gi{width:30px;height:30px}
.hw-tile.hc-t{width:40px;height:40px;border-radius:13px}
.hw-tile.hc-t .gi{width:19px;height:19px}

/* Kizen icons used through the sprite carry their own strokes */
.gi.kzi{fill:none;stroke:none}