/* 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%}

/* ---------- guardrails: one lane, two rails ---------- */
.lane .rail{fill:none;stroke:#0C595C;stroke-width:1.5;stroke-linecap:round}
.lane .rail-hit{fill:none;stroke:#15999D;stroke-width:4;stroke-linecap:round;opacity:0}
.lane .rail-ring{fill:none;stroke:#15999D;stroke-width:1.5;opacity:0}
.lane .lane-base{fill:none;stroke:#D4D8DD;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:2 6}
.lane .lane-on{fill:none;stroke:#15999D;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.lane .lane-ghost{fill:none;stroke:#8A929A;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:2 6;opacity:0}
.lane .lane-dot{fill:#0C595C}
.l-hit{position:absolute;font:400 15px/1.2 var(--sans);color:#0C595C;white-space:nowrap;opacity:0}
.is-tall .l-hit{width:52px;font-size:13px;white-space:normal}
.l-node{position:absolute;width:0;height:0}
.ln-tile{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:18px;background:#fff;color:#5F6872;display:grid;place-items:center;transition:background .35s ease,color .35s ease}
.ln-tile .gi{width:26px;height:26px}
.l-ai .ln-tile{left:-38px;top:-38px;width:76px;height:76px;border-radius:22px;color:#0C595C}
.l-ai .ln-tile .gi{width:32px;height:32px}
.ln-name{position:absolute;left:-60px;width:120px;top:44px;text-align:center;font:400 15px/1.2 var(--sans);color:#5F6872;transition:color .35s ease}
.l-ai .ln-name{top:52px}
.l-node.on .ln-tile{background:#0C595C;color:#fff}
.l-node.on .ln-name{color:var(--ink)}
.is-tall .ln-name{left:44px;top:-9px;width:120px;text-align:left}
.is-tall .l-ai .ln-name{left:52px}

/* ---------- 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}
.hw-card{position:absolute;display:flex;align-items:center;gap:14px;width:264px;height:66px;margin:-33px 0 0 -132px;padding:0 15px;border-radius:18px;background:#fff;
  box-shadow:0 1px 2px rgba(11,23,36,.04),0 14px 28px -18px rgba(11,23,36,.25)}
.hw-av{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:#E4F0EF;color:#0C595C}
.hw-av .gi,.hw-ok .gi,.hw-gi .gi{width:20px;height:20px}
.hw-bars{flex:1;display:flex;flex-direction:column;gap:8px}
.hw-bars i{display:block;height:8px;border-radius:4px;background:#EEF0F1}
.hw-bars i:last-child{width:56%}
.hw-ok{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:#F2F4F3;color:#8A929A;transition:background .35s ease,color .35s ease}
.hw-card.on .hw-ok{background:#0C595C;color:#fff}
.hw-goal{position:absolute;display:flex;align-items:center;gap:14px;width:264px;height:36px;margin:-18px 0 0 -132px;padding:0 15px;--f:.4}
.hw-gi{display:grid;place-items:center;flex:none;width:36px;color:#0C595C}
.hw-track{position:relative;flex:1;height:10px;border-radius:5px;background:#fff}
.hw-track i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--f) * 100%);border-radius:5px;background:#15999D}
.hw-track b{position:absolute;left:85%;top:-6px;width:2px;height:22px;margin-left:-1px;border-radius:1px;background:#0B1724}

/* ---------- custom app builder: the five popular apps ---------- */
.ax-card{position:absolute;inset:0;display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:18px;background:#fff}
.ax-head{display:flex;align-items:center;gap:12px;height:36px;margin-bottom:4px}
.ax-head b{font:400 16px/1.2 var(--sans);color:var(--ink);white-space:nowrap}
.ax-head em{margin-left:auto;font:400 13px/1 var(--sans);font-style:normal;color:var(--accent);white-space:nowrap}
.ax-tile{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:11px;background:var(--accent-tint);color:var(--accent);transition:background .35s ease,color .35s ease}
.ax-tile.on{background:var(--accent);color:#fff}
.ax-tile .gi,.ax-chk .gi,.ax-foot .gi{width:18px;height:18px}
.ax-av{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--accent-tint);color:var(--accent);font:500 12px var(--sans)}
/* a label and its value on one quiet row */
.ax-kv{display:flex;align-items:center;justify-content:space-between;gap:12px;height:36px;padding:0 14px;border-radius:12px;background:#F6F7F9;opacity:0;transition:background-color .35s ease}
.ax-kv span{font:400 13.5px/1 var(--sans);color:var(--t3);white-space:nowrap}
.ax-kv strong{font:400 14px/1 var(--sans);color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.ax-go strong{color:var(--accent)}
.ax-kv.hit{background:var(--accent-tint)}
.ax-total{margin-top:2px;background:var(--accent)}
.ax-total span{color:#D6EEEF}.ax-total strong{font-size:18px;color:#fff}
.ax-foot{display:flex;align-items:center;gap:10px;margin-top:auto;font:400 13px/1.2 var(--sans);color:var(--t3);white-space:nowrap;opacity:0}
.ax-foot .gi{color:var(--accent)}
.ax-foot .ax-av{width:26px;height:26px;font-size:10.5px}
.ax-hipaa{display:flex;align-items:center;gap:6px;margin-left:auto;color:var(--accent)}
.ax-hipaa .gi{width:16px;height:16px}
.ax-step{display:flex;align-items:center;gap:12px;height:36px;font:400 14px var(--sans);color:var(--t3);white-space:nowrap;transition:color .3s ease}
.ax-step em{margin-left:auto;font:400 13px var(--sans);font-style:normal;color:var(--t4);transition:color .3s ease}
.ax-chk{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:#F2F4F4;color:#F2F4F4;transition:background .3s ease,color .3s ease}
.ax-step.done{color:var(--ink)}
.ax-step.done .ax-chk{background:var(--accent);color:#fff}
.ax-step.busy{color:var(--ink)}
.ax-step.busy .ax-chk{background:var(--accent-tint);color:var(--accent-tint)}
.ax-step.busy em{color:var(--accent)}
.ax-bi{gap:14px}
.ax-kpi{display:flex;flex-direction:column;gap:6px}
.ax-kpi span{font:400 13.5px var(--sans);color:var(--t3)}
.ax-kpi strong{font:400 30px/1 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.ax-kpi em{font:400 13px var(--sans);font-style:normal;color:var(--accent)}
.ax-bars{flex:1;display:flex;align-items:flex-end;gap:10px;min-height:60px}
.ax-bars i{flex:1;height:var(--h);border-radius:6px 6px 3px 3px;background:var(--accent-tint);transform-origin:50% 100%;transform:scaleY(0)}
.ax-bars i:last-child{background:var(--accent)}

/* ---------- component library: the parts, and the app they make ---------- */

/* ---------- natively agentic: the loop ---------- */

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