/* WORKFLOWS section: business flows across the apps a company already uses */
.wf{background:#fff;background-image:radial-gradient(rgba(1,23,56,.09) 1px,transparent 1.2px);background-size:22px 22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wf-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:end}
.wf-top .hw{font-size:28px;justify-self:end;transform:rotate(-2deg)}
.wf-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.wf-tab{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 20px;border:1.5px solid var(--line);border-radius:14px 14px 14px 3px;background:#fff;color:var(--navy);font:700 15px Montserrat,sans-serif;cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}
.wf-tab small{font:800 11.5px Montserrat,sans-serif;letter-spacing:.1em;color:var(--pen)}
.wf-tab:hover{border-color:var(--navy);transform:translateY(-2px)}
.wf-tab.on{background:var(--navy);border-color:var(--navy);color:#fff}
.wf-tab.on small{color:var(--sky)}
.wf-tab i{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--blue)}
.wf.auto .wf-tab.on i{animation:wfbar 7s linear both}
@keyframes wfbar{to{width:100%}}

.wf-card{margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:28px 28px 28px 5px;padding:clamp(10px,1.6vw,18px) clamp(10px,1.6vw,18px) clamp(18px,3vw,40px);box-shadow:0 40px 80px -50px rgba(1,23,56,.45)}
.wf-card>.wf-story{margin-inline:clamp(8px,1.6vw,22px)}

/* stage: tinted dotted canvas, 3 columns (trays · hub · outputs); wires are an SVG measured from the DOM */
.wf-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,.5fr) minmax(0,.8fr);align-items:center;gap:24px;min-height:400px;padding:76px clamp(18px,3vw,44px) 52px;border-radius:22px 22px 22px 4px;background:#EEF5FF radial-gradient(rgba(1,23,56,.11) 1px,transparent 1.3px) 0 0/20px 20px;overflow:hidden}
.wf-svg{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.wf-ins,.wf-mid,.wf-outs{position:relative;z-index:1}
.wf-ins{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.wf-outs{display:flex;flex-direction:column;align-items:flex-start;gap:10px;justify-self:end}
.wf-mid{display:grid;place-items:center}
.wf-head{font:700 11.5px Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);transition:opacity .5s ease .6s}

.wf-tray{display:flex;flex-direction:column;align-items:flex-start}
.wf-tray[data-g=msg]{--tb:#8FD3AC;--tt:#E1F5E9}.wf-tray[data-g=mail]{--tb:#F0A79E;--tt:#FDEAE7}.wf-tray[data-g=web]{--tb:#A3C4F3;--tt:#E2EDFF}.wf-tray[data-g=sys]{--tb:#CFC6B2;--tt:#F5F2EA}
.wf-tag{padding:4px 10px 3px;border:1.5px solid var(--tb);border-bottom:0;border-radius:8px 8px 0 0;background:var(--tt);font:700 10.5px Montserrat,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);transition:border-color .6s ease .5s,background .6s ease .5s,color .6s ease .5s}
.wf-tr{display:flex;flex-wrap:wrap;gap:8px;padding:8px;border:1.5px solid var(--tb);border-radius:0 14px 14px 14px;background:rgba(255,255,255,.8);transition:border-color .6s ease .5s,background .6s ease .5s,box-shadow .4s ease}
.wf-tray.on .wf-tr{box-shadow:0 0 0 4px rgba(1,117,253,.13)}

.wf-n{position:relative;display:flex;align-items:center;gap:10px;transition:opacity .4s ease,filter .4s ease}
.wf-n.dim{opacity:.4;filter:grayscale(.85)}
.wf-t{display:grid;place-items:center;flex:none;width:46px;aspect-ratio:1;border-radius:30% 30% 30% 8%;box-shadow:0 8px 16px -8px rgba(1,23,56,.55);transition:transform .9s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease}
.wf-t svg{width:54%;height:54%;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.wf-t.wf-a2b{background:var(--navy)}.wf-t.wf-a2b img{width:58%}
.wf-n.on>.wf-t{transform:scale(1.08);box-shadow:0 0 0 5px rgba(1,117,253,.18),0 12px 22px -10px rgba(1,23,56,.6)}
.wf-tr .wf-n>b{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);z-index:3;padding:4px 9px;border-radius:7px;background:var(--navy);color:#fff;font:600 11.5px Montserrat,sans-serif;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease}
.wf-tr .wf-n:hover>b{opacity:1}
.wf-o>b{font:600 13.5px Montserrat,sans-serif;color:var(--navy);white-space:nowrap;transition:opacity .5s ease .6s}

.wf-hub{position:relative;transition:opacity .6s ease .35s,transform .8s cubic-bezier(.3,1.5,.5,1) .35s}
.wf-hub span{position:relative;display:grid;place-items:center;width:clamp(84px,8.5vw,112px);aspect-ratio:1;border-radius:30% 30% 30% 8%;background:var(--navy);box-shadow:0 0 0 10px rgba(255,255,255,.9),0 30px 50px -20px rgba(1,23,56,.7)}
.wf-hub span::before,.wf-hub span::after{content:"";position:absolute;inset:-10px;border-radius:inherit;border:2px solid var(--blue);opacity:0;animation:halo 2.4s ease-out infinite}
.wf-hub span::after{animation-delay:1.2s}
.wf-hub img{width:52%}
.wf-hub b{position:absolute;top:calc(100% + 20px);left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;background:#fff;border:1px solid var(--line);font:700 13px Montserrat,sans-serif;white-space:nowrap}
.wf-hub b i{width:7px;height:7px;border-radius:50%;background:var(--blue);animation:blink 1.6s ease-in-out infinite}

.wf-w{fill:none;stroke:#9DB3D1;stroke-width:1.6;stroke-dasharray:5 6;stroke-linecap:round;transition:opacity .6s ease .7s,stroke .4s ease}
.wf-w.on{stroke:var(--blue);stroke-width:2.2;stroke-dasharray:none}
.wf-dots{transition:opacity .4s ease .9s}
.wf-m{fill:none;stroke:var(--red);stroke-width:1.4;opacity:.7}.wf-m.dash{stroke-dasharray:5 6}

/* point A: scattered, tangled, no hub; .nt snaps into it without transitions (replay) */
.wf-stage.chaos .wf-n>.wf-t{transform:translate(var(--cx,0),var(--cy,0)) rotate(var(--cr,0))}
.wf-stage.chaos .wf-n{opacity:1;filter:none}
.wf-stage.chaos .wf-tag{border-color:transparent;background:transparent;color:transparent;transition-delay:0s}
.wf-stage.chaos .wf-tr{border-color:transparent;background:transparent;box-shadow:none;transition-delay:0s}
.wf-stage.chaos .wf-o>b,.wf-stage.chaos .wf-head{opacity:0;transition-delay:0s}
.wf-stage.chaos .wf-hub{opacity:0;transform:scale(.5) rotate(-12deg);transition-delay:0s}
.wf-stage.chaos .wf-w,.wf-stage.chaos .wf-dots{opacity:0;transition-delay:0s}
.wf-stage.nt,.wf-stage.nt *{transition:none!important}

.wf-cap{position:absolute;left:50%;top:14px;z-index:2;margin:0;transform:translateX(-50%) rotate(-2deg);font-size:clamp(21px,2.3vw,29px);white-space:nowrap}
.wf-cap span{transition:opacity .5s ease}
.wf-cap .ca{color:var(--red)}
.wf-cap .cb{position:absolute;left:50%;top:0;transform:translateX(-50%);opacity:0}
.wf-stage:not(.chaos) .wf-cap .ca{opacity:0}.wf-stage:not(.chaos) .wf-cap .cb{opacity:1}
.wf-replay{position:absolute;bottom:14px;inset-inline-end:16px;z-index:2;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:10px 10px 10px 3px;background:#fff;color:var(--slate);font:600 12.5px Montserrat,sans-serif;cursor:pointer;transition:color .2s ease,border-color .2s ease}
.wf-replay:hover{color:var(--navy);border-color:var(--navy)}

/* phone: trays on top, hub, outputs as a grid below */
.wf-stage.m{grid-template-columns:minmax(0,1fr);gap:70px;padding:104px 12px 72px}
.wf-stage.m .wf-cap{top:20px;font-size:21px}
.wf-stage.m .wf-ins{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:16px}
.wf-stage.m .wf-head{width:100%;text-align:center}
.wf-stage.m .wf-outs{flex-direction:row;flex-wrap:wrap;justify-content:center;justify-self:stretch;gap:14px 6px}
.wf-stage.m .wf-o{flex-direction:column;gap:6px;width:74px}
.wf-stage.m .wf-o>b{font-size:11px;line-height:1.2;white-space:normal;text-align:center}
.wf-stage.m .wf-t{width:42px}

.wf-story{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(20px,4vw,48px);margin-top:clamp(24px,3vw,36px);padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--line)}
.wf-story h3{font:800 clamp(21px,2.2vw,28px)/1.2 Montserrat,sans-serif;letter-spacing:-.02em}
.wf-steps{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;counter-reset:none}
.wf-steps li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px 12px;padding:14px 16px 16px;border:1px solid var(--line);border-radius:16px 16px 16px 4px;background:#fff;box-shadow:0 10px 24px -20px rgba(1,23,56,.5);animation:fu .5s cubic-bezier(.2,.8,.2,1) calc(var(--i)*.28s) both}
.wf-steps li>.wf-t{width:36px;box-shadow:none}
.wf-steps li>b{font:700 13.5px/1.25 Montserrat,sans-serif;color:var(--navy);min-width:0}
.wf-steps li>em{font:800 11.5px Montserrat,sans-serif;font-style:normal;letter-spacing:.08em;color:var(--pen);align-self:start;padding-top:2px}
.wf-steps li>p{grid-column:1/-1;margin:0;font-size:15px;line-height:1.5;color:var(--slate)}
.wf-steps li:first-child{border-color:#BFD6F6;background:linear-gradient(180deg,#F4F8FF,#fff)}
.wf-res{display:flex;flex-direction:column;justify-content:center;padding:26px;border-radius:22px 22px 22px 4px;background:var(--navy);color:#fff;box-shadow:8px 8px 0 var(--blue)}
.wf-res strong{font:800 clamp(36px,3.6vw,48px)/1 Montserrat,sans-serif;letter-spacing:-.04em;color:#fff;animation:fu .6s ease both}
.wf-res p{margin-top:12px;color:var(--soft);font-size:16px}
.wf-res small{margin-top:16px;font-size:12.5px;color:var(--soft);opacity:.8}

.wf-more{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:28px}
.wf-more>b{font:700 12px Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-inline-end:8px}
.wf-more span{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:99px;background:#fff;font:600 13.5px Montserrat,sans-serif;transition:border-color .25s ease,transform .25s ease}
.wf-more span:hover{border-color:var(--navy);transform:translateY(-2px)}
.wf-more span i{width:9px;height:9px;border-radius:3px}
.wf-foot{margin-top:22px;color:var(--slate);font-size:16px}

/* Arabic: same fonts and mirrored corners as the rest of ar.html */
[dir=rtl] .wf-tag,[dir=rtl] .wf-head,[dir=rtl] .wf-replay,[dir=rtl] .wf-o>b,[dir=rtl] .wf-tab,[dir=rtl] .wf-tab small,[dir=rtl] .wf-cols,[dir=rtl] .wf-n b,[dir=rtl] .wf-hub b,[dir=rtl] .wf-story h3,[dir=rtl] .wf-steps li>b,[dir=rtl] .wf-steps li>em,[dir=rtl] .wf-more>b,[dir=rtl] .wf-more span{font-family:'IBM Plex Sans Arabic',sans-serif;letter-spacing:0}
[dir=rtl] .wf-res strong{font-family:'IBM Plex Sans Arabic',Montserrat,sans-serif;letter-spacing:-.01em}
[dir=rtl] .wf-tab,[dir=rtl] .wf-card{border-radius:14px 14px 3px 14px}[dir=rtl] .wf-card{border-radius:28px 28px 5px 28px}
[dir=rtl] .wf-t,[dir=rtl] .wf-hub span{border-radius:30% 30% 8% 30%}
[dir=rtl] .wf-tr{border-radius:14px 0 14px 14px}[dir=rtl] .wf-stage{border-radius:22px 22px 4px 22px}
[dir=rtl] .wf-steps li{border-radius:16px 16px 4px 16px}
[dir=rtl] .wf-res{border-radius:22px 22px 4px 22px;box-shadow:-8px 8px 0 var(--blue)}
[dir=rtl] .wf-tab i{left:auto;right:0}

@media (max-width:1040px){.wf-top,.wf-story{grid-template-columns:minmax(0,1fr)}.wf-top .hw{justify-self:start}}
@media (max-width:720px){.wf-tab{flex:1 1 calc(50% - 10px);padding:0 14px;font-size:14px}.wf-cols{display:none}}

/* ROI calculator (assets/roi.js) */
.roi{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(20px,3vw,40px);margin-top:36px;align-items:stretch}
.roi-in{display:flex;flex-direction:column;gap:26px;padding:clamp(22px,3vw,36px);background:#fff;border:1px solid var(--line);border-radius:28px 28px 28px 5px}
.roi-f{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 16px;align-items:baseline;font-weight:500;color:var(--slate)}
.roi-f b{font:800 22px Montserrat,sans-serif;color:var(--navy);white-space:nowrap}
.roi-f input{grid-column:1/-1;width:100%;height:28px;margin:0;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
.roi-f input::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--blue) var(--v,50%),var(--line) var(--v,50%))}
.roi-f input::-moz-range-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--blue) var(--v,50%),var(--line) var(--v,50%))}
.roi-f input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:30% 30% 30% 8%;background:var(--navy);border:3px solid #fff;box-shadow:0 2px 8px rgba(1,23,56,.4)}
.roi-f input::-moz-range-thumb{width:20px;height:20px;border-radius:30% 30% 30% 8%;background:var(--navy);border:3px solid #fff}
.roi-f input:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.roi-out{display:flex;flex-direction:column;padding:clamp(24px,3vw,36px);border-radius:28px 28px 28px 5px;background:var(--navy);color:#fff;box-shadow:10px 10px 0 var(--blue)}
.roi-out strong{font:800 clamp(48px,5vw,68px)/1 Montserrat,sans-serif;letter-spacing:-.04em}
.roi-out>span{color:var(--sky);font-weight:600;margin-top:6px}
.roi-out dl{margin:26px 0 0;border-top:1px solid rgba(255,255,255,.2)}
.roi-out dl div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.2)}
.roi-out dt{color:var(--soft)}.roi-out dd{margin:0;font:800 20px Montserrat,sans-serif}
.roi-out small{margin-top:18px;color:var(--soft);font-size:13.5px}
.roi-out .btn{margin-top:20px;align-self:flex-start}
[dir=rtl] .roi-f b,[dir=rtl] .roi-out strong,[dir=rtl] .roi-out dd{font-family:'IBM Plex Sans Arabic',Montserrat,sans-serif}
[dir=rtl] .roi-in,[dir=rtl] .roi-out{border-radius:28px 28px 5px 28px}
[dir=rtl] .roi-out{box-shadow:-10px 10px 0 var(--blue)}
[dir=rtl] .roi-f input::-webkit-slider-runnable-track{background:linear-gradient(-90deg,var(--blue) var(--v,50%),var(--line) var(--v,50%))}
[dir=rtl] .roi-f input::-moz-range-track{background:linear-gradient(-90deg,var(--blue) var(--v,50%),var(--line) var(--v,50%))}
@media (max-width:860px){.roi{grid-template-columns:minmax(0,1fr)}}

/* integrations rail (A2BFlow.rail) */
.rl{position:relative;overflow:hidden;direction:ltr;padding:30px 0 30px;-webkit-user-select:none;user-select:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.rl-row{position:relative;height:110px}
.rl-row:hover{z-index:2}
.rl-row:first-child .rl-i b{top:auto;bottom:calc(100% + 10px)}
.rl-track{position:relative;height:110px;animation:rlmove var(--dur) linear infinite}
.rl-rev .rl-track{animation-direction:reverse}
.rl:hover .rl-track{animation-play-state:paused}
@keyframes rlmove{to{transform:translateX(-50%)}}
.rl-track>svg{position:absolute;left:0;top:0;overflow:visible}
.rl-track>svg path{fill:none;stroke:var(--navy);stroke-width:1.5;stroke-dasharray:5 7;stroke-linecap:round;opacity:.3}
.rl-i{position:absolute;transform:translate(-50%,-50%);z-index:1}
.rl-i .wf-t{width:54px;box-shadow:0 0 0 7px #fff,0 12px 22px -10px rgba(1,23,56,.55);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.rl-i:hover .wf-t{transform:scale(1.15) rotate(-5deg)}
.rl-i b{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);padding:4px 10px;border-radius:8px;background:var(--navy);color:#fff;font:600 12px Montserrat,sans-serif;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease}
.rl-i:hover b{opacity:1}
[dir=rtl] .rl-i b{font-family:'IBM Plex Sans Arabic',sans-serif}
@media (max-width:720px){.rl-i .wf-t{width:46px}}

/* plain-text workflows in pre-built pages (what crawlers and no-JS visitors see; the live diagram replaces it) */
.wf-static{margin-top:28px;padding:clamp(18px,3vw,32px);border:1px solid var(--line);border-radius:22px 22px 22px 4px;background:#fff}
.wf-static h3{font:800 19px/1.3 Montserrat,sans-serif;margin-top:22px}.wf-static h3:first-child{margin-top:0}
.wf-static ol{margin:10px 0 0;padding-inline-start:20px;color:var(--slate)}
.wf-static p{margin-top:8px;color:var(--slate)}
[dir=rtl] .wf-static h3{font-family:'IBM Plex Sans Arabic',sans-serif}