/* n8n / MCP automation page */
/* ---------- workflow canvas ---------- */
.wf{position:relative;margin:0;background:#101a23;border:1px solid rgba(255,255,255,.1);border-radius:16px;box-shadow:0 40px 80px -40px rgba(0,0,0,.8);overflow:hidden}
.wf__bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);font-size:13px;color:var(--on-dark-mute)}
.wf__bar>b{color:#fff;font:700 14px/1 var(--head)}
.wf__dot{width:10px;height:11px;background:var(--gold);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.wf__state{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:4px 9px;border-radius:999px;background:rgba(22,163,74,.14);color:#7ee2a8;font-weight:600;font-size:12px}
.wf__state i{width:7px;height:7px;border-radius:50%;background:#34d27b}
.wf__runs b{color:#fff;font:700 13px/1 var(--body)}
.wf__svg{width:100%;height:auto;display:block}
.wf__svg--v{display:none}
@media (max-width:560px){.wf__svg--h{display:none}.wf__svg--v{display:block;max-width:360px;margin:0 auto}}
.wf-gridpt{fill:rgba(255,255,255,.09)}
.wf-edge{fill:none;stroke:rgba(255,255,255,.2);stroke-width:2}
.wf-node__box{fill:#1c2a36;stroke:rgba(255,255,255,.14);stroke-width:1}
.wf-node__ring{fill:none;stroke:var(--brand-l);stroke-width:2;opacity:0;transition:opacity .5s var(--ease)}
.wf-node.is-run .wf-node__ring{opacity:.9;transition-duration:.12s}
.wf-node__ico{fill:rgba(255,255,255,.08)}
.wf-node.is-brand .wf-node__ico{fill:var(--brand)}
.wf-node.is-gold .wf-node__ico{fill:var(--gold)}
.wf-node__glyph{fill:none;stroke:#e9edf1;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wf-node.is-gold .wf-node__glyph{stroke:var(--deep)}
.wf-node.is-brand .wf-node__glyph{stroke:#fff}
.wf-node__t{fill:#fff;font:700 13px var(--head)}
.wf-node__s{fill:#93a0ad;font:500 10.5px var(--body)}
.wf-node__ok{fill:#16a34a;opacity:0;transition:opacity .3s var(--ease)}
.wf-node__tick{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .3s var(--ease)}
.wf-node.is-done .wf-node__ok,.wf-node.is-done .wf-node__tick{opacity:1}
.wf-port{fill:#101a23;stroke:rgba(255,255,255,.35);stroke-width:1.5}
.wf-pulse{fill:var(--gold)}
.wf-pulse__glow{fill:var(--gold);opacity:.25}
.wf__cap{position:absolute;right:12px;bottom:8px;font-size:11.5px;color:#7d8a97}

/* ---------- why self-host ---------- */
.wf-vs{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.wf-vs__row{display:grid;grid-template-columns:minmax(140px,.55fr) 1fr 1fr;border-top:1px solid var(--line)}
.wf-vs__row:first-child{border-top:0}
.wf-vs__row>span{padding:20px 22px;font-size:15.5px;line-height:1.55;display:flex;gap:10px;align-items:flex-start}
.wf-vs__row>span:first-child{font:700 16px/1.35 var(--head);color:var(--ink)}
.wf-vs__head>span{padding:16px 22px;font:700 14px/1.3 var(--head)!important;color:var(--muted)!important}
.wf-vs__head>span:last-child{color:#fff!important;background:var(--deep)}
.wf-vs__them{color:var(--muted)}
.wf-vs__them .hp-ico{color:#9aa4ae;margin-top:2px}
.wf-vs__us{background:var(--brand-tint);color:var(--ink)}
.wf-vs__us .hp-ico{color:var(--brand);stroke-width:2.4;margin-top:2px}
.wf-vs__head .wf-vs__us,.wf-vs__head>span:nth-child(3){background:var(--deep)}

/* ---------- examples ---------- */
.wf-ex{display:grid;gap:22px;padding:32px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--tint);margin-top:22px}
.wf-ex p{max-width:70ch;color:var(--muted);font-size:16px}
.wf-chain{display:flex;flex-wrap:wrap;gap:0;align-items:stretch}
.wf-chain li{position:relative;display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fff;border:1px solid var(--line-2);border-radius:12px;font-weight:600;font-size:14.5px;margin-right:40px}
.wf-chain li:last-child{margin-right:0}
.wf-chain li::after{content:"";position:absolute;right:-34px;top:50%;width:28px;height:2px;background:linear-gradient(90deg,var(--brand),var(--gold))}
.wf-chain li:last-child::after{display:none}
.wf-chain li span{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:var(--brand-tint);color:var(--brand-d)}
.wf-chain li span .hp-ico{width:17px;height:17px}
.hp-mo .wf-ex .wf-chain li{opacity:0;transform:translateX(-10px);transition:opacity .5s var(--ease-o),transform .6s var(--ease-o);transition-delay:calc(.15s + var(--i) * 120ms)}
.hp-mo .wf-ex.in .wf-chain li{opacity:1;transform:none}
.wf-risk{margin-top:18px;font-size:13.5px;color:var(--muted);max-width:80ch}

/* ---------- steps ---------- */
.wf-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.wf-steps li{position:relative;padding:26px 22px 24px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.wf-steps__n{display:inline-flex;align-items:center;justify-content:center;width:44px;height:48px;margin-bottom:18px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--deep);color:var(--gold);font:800 18px/1 var(--head)}
.wf-steps li:not(:last-child)::after{content:"";position:absolute;top:49px;right:-21px;width:22px;height:2px;background:var(--line-2)}
.wf-steps h3{font-size:18px;margin-bottom:8px}
.wf-steps p{color:var(--muted);font-size:15px}

@media (max-width:1023px){
  .wf{max-width:620px}
  .wf-steps{grid-template-columns:repeat(2,1fr)}
  .wf-steps li::after{display:none}
}
@media (max-width:767px){
  .wf-vs__head{display:none}
  .wf-vs__row{grid-template-columns:1fr}
  .wf-vs__row>span{padding:12px 18px}
  .wf-vs__row>span:first-child{padding-top:18px}
  .wf-vs__row>span:last-child{padding-bottom:18px}
  .wf-vs__them,.wf-vs__us{flex-wrap:wrap}
  .wf-vs__them::before,.wf-vs__us::before{content:attr(data-label);flex-basis:100%;font-size:12.5px;font-weight:600;color:var(--muted)}
  .wf-vs__them>span,.wf-vs__us>span{flex:1;min-width:0}
  .wf-chain{flex-direction:column;gap:22px}
  .wf-chain li{margin-right:0}
  .wf-chain li::after{right:auto;left:31px;top:auto;bottom:-22px;width:2px;height:22px;background:linear-gradient(180deg,var(--brand),var(--gold))}
  .wf-ex{padding:20px}
  .wf-steps{grid-template-columns:1fr}
  .wf__runs{display:none}
}