/* ── Agentic workflows ──────────────────────────────── Figma 9585:16252 ── */

/* ── the live workflow ───────────────────────────────── homepage, unpinned ─
   The homepage draws this diagram at fixed geometry with hand-placed SVG
   connectors. Here the cards carry their own x/y and the wires are computed
   from the cards' boxes every frame they need it, so a card can be dragged
   anywhere and its connections re-route. Same run loop, same states. */
.zr-wfx{ position:relative; width:min(560px,100%); margin-left:auto; }
.zr-wfx__stage{
  position:relative; width:100%; aspect-ratio:560 / 486;
  container-type:inline-size;
  touch-action:pan-y;                       /* the page still scrolls on touch */
}
.zr-wfx__wires{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.zr-wfx__wire      { stroke:#D1D3D6; stroke-width:1.4; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.zr-wfx__wire--live{
  stroke:#0FC27B; stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset .75s cubic-bezier(.4,0,.2,1);
}
.zr-wfx__wire--live.is-on{ stroke-dashoffset:0; }
.zr-wfx__tip      { stroke:#D1D3D6; stroke-width:1.4; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.zr-wfx__tip--live{ stroke:#0FC27B; opacity:0; transition:opacity .2s ease .55s; }
.zr-wfx__tip--live.is-on{ opacity:1; }
/* while a card is being dragged nothing animates its geometry */
.zr-wfx.is-dragging .zr-wfx__wire--live{ transition:none; }

/* cards are positioned in the stage's own 560x486 space, in percentages, so
   one transform serves every width the stage is scaled to */
.zr-wfx__node{
  position:absolute; left:0; top:0;                   /* the runtime writes both */
  width:47.14%;                              /* 264 / 560 */
  padding:11px 13px 13px; border-radius:12px;
  background:#fff; border:1px solid #E6EAF0;
  box-shadow:0 12px 30px -16px rgba(16,49,110,.3), 0 1px 2px rgba(16,49,110,.05);
  transition:box-shadow .25s var(--zr-ease-out-quad), border-color .25s var(--zr-ease-out-quad);
  z-index:2;
}
/* the ports */
.zr-wfx__node::before, .zr-wfx__node::after{
  content:""; position:absolute; left:50%; width:7px; height:7px; border-radius:50%;
  background:#fff; border:1.5px solid #C9D0DA; translate:-50% 0; transition:border-color .35s ease;
}
.zr-wfx__node::before{ top:-4.5px; } .zr-wfx__node::after{ bottom:-4.5px; }
.zr-wfx__node[data-node="n1"]::before{ display:none; }
.zr-wfx__node[data-node="n4"]::after,
.zr-wfx__node[data-node="n5"]::after{ display:none; }
.zr-wfx__node[data-fired="true"]::after{ border-color:#0FC27B; }

.zr-wfx__head{ display:flex; align-items:center; gap:10px; }
.zr-wfx__head b{ font-size:14px; font-weight:500; letter-spacing:-.01em; color:var(--pp-ink); }
.zr-wfx__ico{ display:grid; place-items:center; width:26px; height:26px; flex:0 0 auto; border-radius:8px; background:var(--bg,#E8F0FE); color:var(--fg,#215BC4); }
.zr-wfx__ico svg{ width:14px; height:14px; }
.zr-wfx__node p{ margin:6px 0 0 36px; font-size:12.5px; line-height:18px; color:var(--pp-dim); }

/* the status chip, driven by data-state — the homepage's three states */
.zr-wfx__st{
  position:absolute; right:10px; top:-12px;
  display:none; align-items:center; gap:5px; padding:3px 8px; border-radius:6px;
  font-size:11px; font-weight:600; white-space:nowrap;
}
.zr-wfx__st::before{ content:""; width:10px; height:10px; flex:0 0 auto; }
.zr-wfx__node[data-state="running"] .zr-wfx__st,
.zr-wfx__node[data-state="done"]    .zr-wfx__st{ display:inline-flex; }
.zr-wfx__node[data-state="running"] .zr-wfx__st{ background:#F1F3F6; color:#4B5563; }
.zr-wfx__node[data-state="running"] .zr-wfx__st::before{
  border-radius:50%; border:1.6px solid rgba(75,85,99,.28); border-top-color:#4B5563;
  animation:zr-wfx-spin 1s linear infinite;
}
.zr-wfx__node[data-state="running"] .zr-wfx__st::after{ content:"Running"; }
.zr-wfx__node[data-state="done"] .zr-wfx__st{ background:#E4F7EC; color:#0F7A45; }
.zr-wfx__node[data-state="done"] .zr-wfx__st::before{
  background:
    linear-gradient(45deg, transparent 46%, currentColor 46%, currentColor 60%, transparent 60%) no-repeat 1px 4px / 5px 5px,
    linear-gradient(-45deg, transparent 46%, currentColor 46%, currentColor 60%, transparent 60%) no-repeat 3px 1px / 7px 7px;
}
.zr-wfx__node[data-state="done"] .zr-wfx__st::after{ content:"Completed"; }
@keyframes zr-wfx-spin{ to{ transform:rotate(360deg); } }
.zr-wfx__node[data-state="running"]{ border-color:#C9D6F2; box-shadow:0 14px 34px -16px rgba(20,99,245,.36), 0 0 0 1px rgba(20,99,245,.08); }

/* the trigger tab, tucked behind the first card */
.zr-wfx__trigger{
  position:absolute; left:0; top:0; z-index:1;
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 8px 16px; border-radius:6px 6px 0 0;
  background:#E8F0FE; color:#1D4ED8; font-size:11px; font-weight:600;
}
.zr-wfx__trigger svg{ width:10px; height:10px; }

/* ── the drag affordance ──────────────────────────────────────────────────
   Desktop only, and only when the pointer is fine: a grip that fades in on
   hover, a lift while held. Off on touch — the page has to keep scrolling. */
.zr-wfx__grip{
  position:absolute; left:6px; top:50%; translate:0 -50%;
  display:none; grid-template-columns:repeat(2, 3px); gap:3px;
  opacity:0; transition:opacity .16s var(--zr-ease-out-quad);
}
.zr-wfx__grip i{ width:3px; height:3px; border-radius:50%; background:#C3C8CF; }
.zr-wfx.is-draggable .zr-wfx__node{ cursor:grab; }
.zr-wfx.is-draggable .zr-wfx__grip{ display:grid; }
.zr-wfx.is-draggable .zr-wfx__node:hover .zr-wfx__grip,
.zr-wfx.is-draggable .zr-wfx__node:focus-visible .zr-wfx__grip{ opacity:1; }
.zr-wfx.is-draggable .zr-wfx__node:hover{ border-color:#C9D6F2; box-shadow:0 18px 40px -18px rgba(16,49,110,.34); }
.zr-wfx__node.is-held{
  cursor:grabbing; z-index:5; scale:1.02;
  box-shadow:0 26px 50px -20px rgba(16,49,110,.42), 0 0 0 1px rgba(20,99,245,.14);
  transition:none;
}
.zr-wfx__node:focus-visible{ outline:2px solid var(--zr-blue); outline-offset:3px; }

.zr-wfx__hint{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:14px 0 0; font-size:12.5px; color:var(--pp-dim);
}
.zr-wfx__hint svg{ width:14px; height:14px; }
.zr-wfx__hint button{
  padding:4px 10px; border:1px solid var(--pp-hair); border-radius:7px; background:#fff;
  font:inherit; font-size:12px; font-weight:500; color:var(--pp-ink); cursor:pointer;
  opacity:0; pointer-events:none; transition:opacity .18s var(--zr-ease-out-quad), border-color .16s;
}
.zr-wfx__hint button:hover{ border-color:#C9D6F2; }
.zr-wfx.is-moved .zr-wfx__hint button{ opacity:1; pointer-events:auto; }

@media (prefers-reduced-motion: reduce){
  .zr-wfx__wire--live{ transition:none; }
  .zr-wfx__node[data-state="running"] .zr-wfx__st::before{ animation:none; }
}
/* stacked, the diagram is the widest thing on the page — let it breathe */
@media (max-width:1040px){
  .zr-wfx{ margin-inline:auto; }
}
@media (max-width:560px){
  .zr-wfx__stage{ aspect-ratio:560 / 520; }
  .zr-wfx__node{ width:56%; }
  .zr-wfx__node p{ margin-left:0; }
  .zr-wfx__head b{ font-size:13px; }
}

/* gap → published content */
.zr-bento--wf .zr-b1{ grid-column:1 / span 8; }
.zr-bento--wf .zr-b2{ grid-column:1 / span 4; }
.zr-bento--wf .zr-b3{ grid-column:5 / span 4; }
.zr-bento--wf .zr-b4{ grid-column:9 / span 4; grid-row:1 / span 2; }
.zr-win{ margin:0 auto; width:min(560px,100%); overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%); mask-image:linear-gradient(180deg,#000 62%,transparent 100%); }
.zr-win__bar{ display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
.zr-win__brand{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:#fff; }
.zr-win__brand svg{ width:16px; height:15px; }
.zr-win__rows{ list-style:none; margin:0; padding:10px 16px 4px; display:flex; flex-direction:column; gap:8px; }
.zr-win__rows li{ display:flex; align-items:center; gap:12px; }
.zr-win__path{ flex:0 0 auto; padding:6px 10px; border-radius:7px; background:rgba(255,255,255,.08); font-family:var(--pp-mono); font-size:12px; color:rgba(255,255,255,.85); width:var(--w,52%); }
.zr-win__rows em{ margin-left:auto; font-style:normal; font-family:var(--pp-mono); font-size:11.5px; color:rgba(255,255,255,.6); }
.zr-win__rows .zr-eng svg{ width:14px; height:14px; }
.zr-yt{ display:inline-flex; align-items:center; gap:10px; padding:10px 14px; font-size:13.5px; color:rgba(255,255,255,.55); }
.zr-yt i{ display:grid; place-items:center; width:22px; height:16px; border-radius:4px; background:#FF0000; }
.zr-yt i::after{ content:""; border-style:solid; border-width:4px 0 4px 7px; border-color:transparent transparent transparent #fff; margin-left:1px; }
.zr-post{ margin-top:12px; padding:16px; }
.zr-post .zr-skel i{ --sk:rgba(255,255,255,.16); }
.zr-post .zr-skel i:first-child{ height:14px; --sk:rgba(255,255,255,.28); }
.zr-faqmock{ padding:16px; background:#fff; color:var(--pp-ink); border-radius:14px; }
.zr-faqmock b{ display:block; text-align:center; font-style:italic; font-weight:500; font-size:14px; margin-bottom:12px; }
.zr-faqmock span{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; margin-top:8px; border:1px solid #EEF1F5; border-radius:9px; font-size:12.5px; color:var(--pp-body); }
.zr-faqmock span i{ font-style:normal; color:#9AA1AC; font-size:16px; line-height:1; }
.zr-faqmock span:last-child{ opacity:.5; }
.zr-langs{ padding:16px; display:flex; flex-direction:column; gap:10px; }
.zr-langs__src{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.1); font-size:13px; color:#fff; }
.zr-langs__src b{ font-family:var(--pp-mono); font-size:11px; font-weight:600; padding:2px 6px; border-radius:5px; background:#fff; color:#0F2A1E; }
.zr-langs__src span{ font-family:var(--pp-mono); font-size:12px; color:rgba(255,255,255,.75); }
.zr-langs__arrow{ margin-left:22px; width:1px; height:14px; background:rgba(255,255,255,.3); }
.zr-langs ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.zr-langs li{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; background:rgba(255,255,255,.06); font-size:13px; color:rgba(255,255,255,.85); }
.zr-langs li b{ font-family:var(--pp-mono); font-size:11px; font-weight:600; padding:2px 6px; border-radius:5px; background:rgba(255,255,255,.14); color:#fff; }
.zr-langs li .zr-chip{ margin-left:auto; background:rgba(125,211,167,.16); color:#7DD3A7; }
.zr-langs li .zr-chip--wait{ background:rgba(255,255,255,.1); color:rgba(255,255,255,.6); }

/* templates */
.zr-tpls-stage{ position:relative; isolation:isolate; }
.zr-tpls-stage::before, .zr-tpls-stage::after{
  content:""; position:absolute; top:0; bottom:0; z-index:-1; width:min(320px,26vw); border-radius:16px;
  background:repeating-linear-gradient(180deg, #F7F8FA 0 122px, transparent 122px 136px);
  -webkit-mask-image:linear-gradient(90deg, transparent 10%, rgba(0,0,0,.5)); mask-image:linear-gradient(90deg, transparent 10%, rgba(0,0,0,.5));
}
.zr-tpls-stage::before{ left:0; }
.zr-tpls-stage::after{ right:0; -webkit-mask-image:linear-gradient(270deg, transparent 10%, rgba(0,0,0,.5)); mask-image:linear-gradient(270deg, transparent 10%, rgba(0,0,0,.5)); }
.zr-tpls{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; width:min(720px,100%); margin:0 auto; }
.zr-tpl{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:20px 22px;
  border-radius:16px; background:#F7F8FA; border:1px solid #EEF1F5; text-decoration:none;
  transition:background .16s var(--zr-ease-out-quad), border-color .16s var(--zr-ease-out-quad);
}
.zr-tpl:hover{ background:#F1F4F9; border-color:#DDE5F2; }
.zr-tpl__t{ display:flex; align-items:center; gap:10px; font-size:15.5px; font-weight:500; color:var(--pp-ink); }
.zr-tpl__ico{ display:grid; place-items:center; width:26px; height:26px; border-radius:7px; background:#E8F0FE; color:var(--zr-blue); }
.zr-tpl__ico svg{ width:14px; height:14px; }
.zr-tpl p{ margin:0; font-size:13.5px; line-height:20px; color:var(--pp-dim); text-wrap:pretty; }
.zr-tpl__go{ display:inline-flex; align-items:center; gap:4px; margin-top:4px; font-size:13.5px; font-weight:500; color:var(--zr-blue); }
.zr-tpl__go svg{ width:14px; height:14px; transition:translate .2s var(--zr-ease); }
.zr-tpl:hover .zr-tpl__go svg{ translate:3px 0; }

@media (max-width:1040px){
  .zr-bento--wf .zr-b1{ grid-column:1 / span 6; }
  .zr-bento--wf .zr-b2{ grid-column:1 / span 3; }
  .zr-bento--wf .zr-b3{ grid-column:4 / span 3; }
  .zr-bento--wf .zr-b4{ grid-column:1 / span 6; grid-row:auto; }
  .zr-tpls-stage::before, .zr-tpls-stage::after{ display:none; }
}
@media (max-width:720px){
  .zr-bento--wf .zr-b1, .zr-bento--wf .zr-b2, .zr-bento--wf .zr-b3, .zr-bento--wf .zr-b4{ grid-column:auto; }
  .zr-tpls{ grid-template-columns:minmax(0,1fr); }
}


/* the integrations band */
.zr-ints{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(20px,3vw,40px); padding:clamp(24px,3vw,34px); }
.zr-ints ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.zr-ints li{ padding:8px 14px; border-radius:999px; background:#fff; border:1px solid #EDF1F7; font-size:13.5px; color:var(--pp-ink); }
@media (max-width:900px){ .zr-ints{ grid-template-columns:minmax(0,1fr); } }