/* Extracted from the user-owned B2C landing animation; scoped to this feature. */
  #f-agents .kxwin{position:relative;width:825px;height:486px;background:#fff;border-radius:16px;overflow:hidden;
    font-family:'Inter',var(--sans);text-align:left;
    box-shadow:0 0 0 1px rgba(14,21,38,.05),0 8px 22px rgba(14,21,38,.07),0 40px 80px rgba(14,21,38,.16)}
  #f-agents .kxbar{position:absolute;left:0;top:0;width:825px;height:52px;background:#F9FAFF;border-bottom:1px solid #557EE1}
  #f-agents .kxbar i{position:absolute;top:22px;width:12px;height:12px;border-radius:6px}
  #f-agents .kxbar i:nth-child(1){left:27px;background:#FF2D55}
  #f-agents .kxbar i:nth-child(2){left:47px;background:#FC0}
  #f-agents .kxbar i:nth-child(3){left:67px;background:#34C759}
  #f-agents .wftabs{position:absolute;left:99px;top:0;height:52px;display:flex;align-items:flex-end;gap:4px;z-index:3;padding-bottom:1px}
  #f-agents .wftab{appearance:none;-webkit-appearance:none;border:0;background:transparent;font:inherit;cursor:pointer;
    position:relative;display:flex;align-items:center;gap:8px;height:38px;padding:0 15px;
    border-radius:10px 10px 0 0;color:#5A6474;font-family:'Inter',var(--sans);font-size:12.5px;
    font-weight:500;letter-spacing:.01em;transition:background .25s ease,color .25s ease}
  #f-agents .wftab svg{width:14px;height:14px;display:block;opacity:.72}
  #f-agents .wftab:focus:not(:focus-visible){outline:none}
  #f-agents .wftab:hover{background:rgba(30,107,232,.07)}

  #f-agents .wftab.on{background:#fff;color:#101828;font-weight:600;
    box-shadow:inset 0 1px 0 #DFE6F1,inset 1px 0 0 #DFE6F1,inset -1px 0 0 #DFE6F1}
  #f-agents .wfplus{width:26px;height:26px;margin-bottom:7px;margin-left:4px;display:grid;place-items:center;
    border-radius:7px;color:#8A93A6;font-size:16px;line-height:1}
  #f-agents .wfview{position:absolute;left:0;top:52px;width:825px;height:434px;overflow:hidden;background:#fff}
  #f-agents .wfv{position:absolute;inset:0;opacity:0;transition:opacity .3s ease;pointer-events:none}
  #f-agents .wfv.on{opacity:1}

  /* ── scene 3 · the workflow builder, drawn in the page ──────────
     Four screen recordings used to live here as 16.8 MB of mp4. The
     product they showed is a handful of cards on a canvas, so the page
     draws it instead: one shell, four scripted flows.               */
  #f-agents .wfb{position:absolute;inset:0;background:#fff;font-family:'Inter',var(--sans,system-ui);
    color:#111827;overflow:hidden;--rail:55px;--hd:46px;--panel:263px}
  #f-agents .wfb *{box-sizing:border-box}

  /* header ------------------------------------------------------- */
  #f-agents .wfb .wfhd{position:absolute;left:0;top:0;right:0;height:var(--hd);background:#FAFAFA;
    border-bottom:1px solid #E5E7EB;z-index:6}
  #f-agents .wfb .wfti{position:absolute;left:var(--rail);right:0;top:0;height:var(--hd);display:grid;
    place-items:center;font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:#111827}
  #f-agents .wfb .wfsw{position:absolute;right:107px;top:0;height:var(--hd);display:flex;align-items:center;gap:9px;
    font-size:11.5px;font-weight:500;color:#6D737D}
  #f-agents .wfb .wfsw i{width:28px;height:16px;border-radius:9px;background:#D6D7DE;position:relative;
    transition:background .3s ease}
  #f-agents .wfb .wfsw i:after{content:'';position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;
    background:#fff;transition:transform .3s cubic-bezier(.34,1.4,.5,1)}
  #f-agents .wfb.live .wfsw{color:#4F46E5}
  #f-agents .wfb.live .wfsw i{background:#6366F1}
  #f-agents .wfb.live .wfsw i:after{transform:translateX(12px)}
  #f-agents .wfb .wfsave{position:absolute;right:30px;top:11px;width:54px;height:25px;border-radius:7px;
    background:#6366F1;color:#fff;font-size:11.5px;font-weight:600;display:grid;place-items:center;
    transition:transform .12s ease,filter .12s ease}
  #f-agents .wfb .wfsave.hit{transform:scale(.95);filter:brightness(.9)}

  /* left rail ---------------------------------------------------- */
  #f-agents .wfb .wfrail{position:absolute;left:0;top:0;bottom:0;width:var(--rail);background:#fff;
    border-right:1px solid #E5E7EB;z-index:7;display:flex;flex-direction:column;align-items:center;
    padding-top:15px}
  #f-agents .wfb .wflogo{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;margin-bottom:11px;
    background:radial-gradient(circle at 32% 26%,#8FB0FC,#3B6BF0 62%,#2450DC);
    box-shadow:0 1px 3px rgba(37,99,235,.32)}
  #f-agents .wfb .wflogo svg{width:14px;height:14px;display:block}
  #f-agents .wfb .wfdot{width:6px;height:6px;border-radius:50%;background:#D9DDE6;margin:9px 0}
  #f-agents .wfb .wftile{width:28px;height:28px;border-radius:9px;background:#0F3F45;display:grid;place-items:center;
    margin:6px 0 12px}
  #f-agents .wfb .wftile svg{width:16px;height:16px;stroke:#fff}
  #f-agents .wfb .wfsep{width:22px;height:1px;background:#E4E7EC;margin:9px 0}
  #f-agents .wfb .wfme{position:absolute;left:15.5px;bottom:12px;width:24px;height:24px;border-radius:50%;
    background:#EDEFF3;display:grid;place-items:center;font-size:9px;font-weight:600;color:#667085}

  /* canvas ------------------------------------------------------- */
  #f-agents .wfb .wfcv{position:absolute;left:var(--rail);right:0;top:var(--hd);bottom:0;overflow:hidden;
    transition:right .34s cubic-bezier(.4,0,.2,1)}
  #f-agents .wfb.panel .wfcv{right:var(--panel)}
  #f-agents .wfb .wfgr{position:absolute;left:50%;top:14px;width:0;height:0;
    transition:transform 1.15s cubic-bezier(.34,.08,.2,1)}

  /* a node: badge, card, and the dashed run that reaches it ------- */
  #f-agents .wfb .wfn{position:absolute;left:-164.5px;width:329px;opacity:0;transform:translateY(9px);
    transition:opacity .42s ease,transform .42s cubic-bezier(.2,.9,.3,1)}
  #f-agents .wfb .wfn.in{opacity:1;transform:none}
  #f-agents .wfb .wfn:before,#f-agents .wfb .wfn:after,#f-agents .wfb .wfcard:before{content:'';position:absolute;left:50%;opacity:0;
    transition:opacity .3s ease .1s}
  #f-agents .wfb .wfn:before{top:-24.5px;height:50px;width:0;border-left:1.5px dashed #D1D5DB;transform:translateX(-.75px)}
  #f-agents .wfb .wfn:after,#f-agents .wfb .wfcard:before{width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#fff;
    border:1.5px solid #D1D5DB;box-sizing:border-box}
  #f-agents .wfb .wfn:after{top:-20px}            /* the dot under the card above */
  #f-agents .wfb .wfcard:before{top:-10.5px}      /* the dot that meets this card */
  #f-agents .wfb .wfn.link.in:before,#f-agents .wfb .wfn.link.in:after,#f-agents .wfb .wfn.link.in .wfcard:before{opacity:1}
  #f-agents .wfb .wfnb{display:flex;width:max-content;align-items:center;gap:4px;margin-left:13px;height:20px;
    padding:0 8px;border-radius:6px;font-size:10px;font-weight:600;letter-spacing:.01em;
    background:#E5E8F8;color:#6366F1}
  #f-agents .wfb .wfnb svg{width:10px;height:10px}
  #f-agents .wfb .wfnb.act{background:#FFE8D0;color:#B45309}
  #f-agents .wfb .wfcard{margin-top:5.5px;height:55.5px;border-radius:10px;background:#fff;border:1px solid #E5E7EB;
    box-shadow:0 1px 2px rgba(16,24,40,.05),0 7px 16px -10px rgba(16,24,40,.28);position:relative;
    display:flex;align-items:center;padding:0 16px;gap:8px;transition:box-shadow .25s ease,border-color .25s ease}
  #f-agents .wfb .wfn.sel .wfcard{border-color:#6366F1;box-shadow:0 0 0 1px #6366F1,0 7px 16px -10px rgba(99,102,241,.5)}
  #f-agents .wfb .wfic{flex:none;width:26px;height:26px;border-radius:8px;background:#EFF6FF;display:grid;place-items:center}
  #f-agents .wfb .wfic svg{width:14px;height:14px;stroke:#475569}
  #f-agents .wfb .wftx{min-width:0;flex:1}
  #f-agents .wfb .wftx b{display:block;font-size:12.5px;font-weight:600;line-height:15px;color:#111827;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #f-agents .wfb .wftx i{display:block;font-style:normal;font-size:10.5px;line-height:14px;color:#6B7280;margin-top:2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #f-agents .wfb .wfwarn{flex:none;width:13px;height:13px;opacity:0;transition:opacity .3s ease}
  #f-agents .wfb .wfwarn svg{width:13px;height:13px;display:block}
  #f-agents .wfb .wfn.warn .wfwarn{opacity:1}
  #f-agents .wfb .wfkebab{flex:none;width:3px;height:13px;background:
      radial-gradient(circle,#98A2B3 1.2px,transparent 1.3px) 0 0/3px 4.4px repeat-y}

  /* the yes / no split under a condition -------------------------- */
  #f-agents .wfb .wfsplit{position:absolute;left:-178.5px;width:357px;height:34px;opacity:0;transition:opacity .35s ease}
  #f-agents .wfb .wfsplit.in{opacity:1}
  #f-agents .wfb .wfsplit:before{content:'';position:absolute;left:0;right:0;top:13px;height:0;
    border-top:1.5px dashed #D1D5DB}
  #f-agents .wfb .wfsplit:after{content:'';position:absolute;left:50%;top:0;width:0;height:13px;
    border-left:1.5px dashed #D1D5DB;transform:translateX(-.75px)}
  #f-agents .wfb .wfsplit u,#f-agents .wfb .wfsplit s{position:absolute;top:13px;width:0;height:21px;
    border-left:1.5px dashed #D1D5DB;text-decoration:none}
  #f-agents .wfb .wfsplit u{left:0}#f-agents .wfb .wfsplit s{right:0}
  #f-agents .wfb .wfsplit em{position:absolute;top:16px;font-style:normal;font-size:9.5px;color:#9CA3AF}
  #f-agents .wfb .wfsplit em.no{left:6px}#f-agents .wfb .wfsplit em.yes{right:6px}

  /* the chat pill and the bottom toolbar --------------------------- */
  #f-agents .wfb .wfpill{position:absolute;left:50%;bottom:70px;transform:translateX(-50%);height:34px;padding:0 18px;
    display:flex;align-items:center;gap:7px;border-radius:19px;background:#fff;border:1px solid #C7D2FE;
    box-shadow:0 2px 10px -4px rgba(99,102,241,.4);font-size:12.5px;font-weight:600;color:#312E81;
    transition:opacity .3s ease,transform .18s ease;z-index:4}
  #f-agents .wfb .wfpill svg{width:14px;height:14px}
  #f-agents .wfb .wfpill.hit{transform:translateX(-50%) scale(.96)}
  #f-agents .wfb.nopill .wfpill{opacity:0;pointer-events:none}
  #f-agents .wfb .wftool{position:absolute;left:50%;bottom:14.5px;transform:translateX(-50%);width:377px;height:42px;
    display:flex;align-items:center;justify-content:space-between;padding:0 11px;border-radius:12px;
    background:#fff;border:1px solid #D2D2D2;box-shadow:0 2px 12px -6px rgba(16,24,40,.35);z-index:4;
    transition:opacity .3s ease}
  #f-agents .wfb .wftool span{width:30px;height:30px;border-radius:8px;display:grid;place-items:center}
  #f-agents .wfb .wftool span svg{width:15px;height:15px;stroke:#6B7280}
  #f-agents .wfb .wftool span.on{background:#E5E8F8}
  #f-agents .wfb .wftool span.on svg{stroke:#4C72E5}
  #f-agents .wfb .wftool hr{width:1px;height:20px;border:0;background:#E8E7EB;margin:0}

  /* the AI assistant sheet ----------------------------------------- */
  #f-agents .wfb .wfai{position:absolute;left:var(--rail);right:0;top:var(--hd);bottom:0;background:#fff;z-index:8;
    opacity:0;pointer-events:none;transition:opacity .35s ease}
  #f-agents .wfb.ai .wfai{opacity:1}
  #f-agents .wfb .aihd{height:46px;display:flex;align-items:center;gap:9px;padding:0 18px;
    box-shadow:0 1px 0 rgba(16,24,40,.05)}
  #f-agents .wfb .aihd .sq{width:22px;height:22px;border-radius:7px;border:1px solid #E5E7EB;display:grid;place-items:center}
  #f-agents .wfb .aihd .sq svg{color:#6366F1}
  #f-agents .wfb .aihd svg{width:12px;height:12px}
  #f-agents .wfb .aihd b{display:block;font-size:11.5px;font-weight:600;line-height:14px}
  #f-agents .wfb .aihd i{display:block;font-style:normal;font-size:10px;color:#6B7280}
  #f-agents .wfb .aihd .x{margin-left:auto;font-size:13px;color:#9CA3AF;line-height:1}
  #f-agents .wfb .aibig{position:absolute;left:0;right:0;top:105px;text-align:center}
  #f-agents .wfb .aibig .sq{width:46px;height:46px;border-radius:13px;border:1px solid #E5E7EB;display:grid;
    place-items:center;margin:0 auto 26px;box-shadow:0 2px 10px -6px rgba(16,24,40,.3)}
  #f-agents .wfb .aibig .sq svg{width:22px;height:22px;color:#6366F1}
  #f-agents .wfb .aibig h4{margin:0 0 9px;font-size:17px;font-weight:700;letter-spacing:-.02em;color:#111827}
  #f-agents .wfb .aibig p{margin:0;font-size:11px;line-height:16px;color:#6B7280}
  #f-agents .wfb .aiin{position:absolute;left:50%;transform:translateX(-50%);bottom:56px;width:567px;height:58px;
    border-radius:13px;border:1.6px solid #C7D2FE;box-shadow:0 0 0 4px rgba(99,102,241,.09);
    display:flex;align-items:center;padding:0 12px 0 20px;gap:10px;background:#fff}
  #f-agents .wfb .aiin .txt{flex:1;font-size:12.5px;color:#111827;white-space:nowrap;overflow:hidden}
  #f-agents .wfb .aiin .txt:after{content:'';display:inline-block;width:1px;height:13px;background:#111827;
    vertical-align:-2px;margin-left:1px;animation:wfbcaret 1s steps(1,end) infinite}
  #f-agents .wfb.sent .aiin .txt:after{display:none}
  @keyframes wfbcaret{0%,50%{opacity:1}51%,100%{opacity:0}}
  #f-agents .wfb .aiin .cur{font-size:11px;color:#9CA3AF}
  #f-agents .wfb .aiin .send{width:40px;height:36px;border-radius:9px;background:#6366F1;display:grid;place-items:center;
    transition:transform .12s ease}
  #f-agents .wfb .aiin .send svg{width:15px;height:15px;stroke:#fff}
  #f-agents .wfb .aiin .send.hit{transform:scale(.93)}

  /* "Building your workflow…" -------------------------------------- */
  #f-agents .wfb .wfbuild{position:absolute;left:50%;bottom:70px;transform:translateX(-50%);font-size:12px;
    font-weight:500;z-index:5;opacity:0;transition:opacity .3s ease;
    background:linear-gradient(100deg,#B6BCC9 20%,#111827 44%,#B6BCC9 68%) 0 0/240% 100% text;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:wfbshimmer 1.5s linear infinite}
  #f-agents .wfb.building .wfbuild{opacity:1}
  #f-agents .wfb.building .wftool{opacity:.35}
  @keyframes wfbshimmer{to{background-position:-240% 0}}

  @media (prefers-reduced-motion:reduce){
    #f-agents .wfb *{animation:none!important;transition-duration:.001ms!important}
  }


#f-agents .feature-scene { aspect-ratio:1100/710; height:auto; min-width:0; margin:0; }
#f-agents .ag-source-frame { position:relative; width:100%; height:100%; aspect-ratio:1100/710; border-radius:16px; background:#fff; overflow:hidden; box-shadow:var(--sh-lift); }
#f-agents .kxwin { transform-origin:top left; box-shadow:none; font-family:var(--mock-font); }
#f-agents .kxwin * { box-sizing:border-box; }
#f-agents .wftab svg { stroke:currentColor; }
#f-agents .wftab:focus-visible { outline:2px solid #5066ff; outline-offset:-3px; }
#f-agents .wfb .wfti { right:180px; }
#f-agents .wfb .wfpn { display:none; }
#f-agents .wfb .wftx :is(b,i) { overflow:visible; text-overflow:clip; }
#f-agents .wfb .wftx i { font-size:10px; }
#f-agents .wfb .wfbuild { white-space:nowrap; }
#f-agents .wfv[hidden] { display:none; }
#f-agents [data-agent-paused] * { animation-play-state:paused!important; }
html[data-motion="paused"] #f-agents .wfb * { transition:none!important; }
@media(prefers-reduced-motion:reduce){ #f-agents .wfb *::after { animation:none!important; } }

/* Use the established Snake screen dimensions and copy-column placement. */
#f-agents .kxwin { height:532.5px; }
#f-agents .wfview { height:auto; bottom:0; }
#f-agents .wfb .wfme { background:#edeff3 url(../../img/avatar.png) center/cover no-repeat; }
#f-agents .step-tag,
#f-agents [data-channel-clip][aria-pressed="true"] { color:#f5b800; }
#f-agents [data-channel-clip]:not(:disabled):hover { background:rgb(245 184 0 / .10); }

#f-agents .wfprogress { display:none; position:absolute; left:55px; right:0; bottom:66px; text-align:center; font-size:11px; color:#607083; }
#f-agents .execution .wfprogress { display:block; }
#f-agents .wfn.complete .wfcard { border-color:#aed5bf; }
#f-agents .wfn.complete .wfnb { background:#e8f6ed; color:#32815a; }