/* =====================================================================
   Business Process Automation page extras (loads after bpa.css)
   Scroll-linked: elements read --p (0 → 1) set by bpx.js from the scroll position.
   ===================================================================== */
main>section{overflow-x:clip}
html.sl-on .rv,html.sl-on .rv.in{transition:none!important;opacity:clamp(0,calc(.05 + var(--p,1) * 1.2),1);transform:translate3d(0,calc((1 - var(--p,1)) * 70px),0)}
html.sl-on .sign.rv:nth-child(odd){transform:translate3d(calc((1 - var(--p,1)) * -80px),0,0)}
html.sl-on .sign.rv:nth-child(even){transform:translate3d(calc((1 - var(--p,1)) * 80px),0,0)}
html.sl-on .sec-head{transform:translate3d(0,calc((1 - var(--p,1)) * 40px),0);opacity:clamp(0,calc(.1 + var(--p,1) * 1.3),1)}
html.sl-on .bpx-hero .ah-r.rv{transform:translate3d(0,calc(var(--hp,0) * -70px),0) scale(calc(1 - var(--hp,0) * .06));opacity:1}
html.sl-on .bpx-hero .ah-l{transform:translate3d(0,calc(var(--hp,0) * 40px),0);opacity:calc(1 - var(--hp,0) * .7)}
html.sl-on .bind.rv{transform:translate3d(0,calc((1 - var(--p,1)) * 90px),0) scale(calc(.94 + var(--p,1) * .06))}

/* hero illustration */
.bpx-hx{display:block;width:100%;height:auto;font-family:inherit}
.bpx-hx .hx-grid circle{fill:rgba(127,198,221,.22)}
.bx-ln{fill:none;stroke:rgba(127,198,221,.5);stroke-width:2;stroke-dasharray:1 7;stroke-linecap:round}
.bx-dot{fill:var(--mint);stroke:var(--navy);stroke-width:2;filter:drop-shadow(0 0 5px rgba(91,251,194,.9))}
.bx-card{fill:#fff}
.bx-ct{font-size:13px;font-weight:800;fill:var(--navy)}
.bx-row rect:first-child{fill:#F1F8FA;stroke:#D7E3E8}
.bx-row circle{fill:#1B7699}
.bx-row.r1 circle{fill:#5BFBC2}.bx-row.r2 circle{fill:#102B46}
.bx-bar{fill:#C9D9E0}
.bx-row{animation:bxRow 6s ease infinite}
.bx-row.r1{animation-delay:2s}.bx-row.r2{animation-delay:4s}
@keyframes bxRow{0%,30%,100%{opacity:1}12%{opacity:.4}}
.bx-n circle{fill:var(--mint);stroke:rgba(255,255,255,.25);stroke-width:6}
.bx-n.n0 circle{fill:#CDE9F2}.bx-n.n2 circle{fill:#fff}
.bx-t{font-size:13px;font-weight:800;fill:#fff}
.bx-ok circle{fill:var(--mint);stroke:var(--navy);stroke-width:2.5}
.bx-ok path{fill:none;stroke:var(--navy);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.bx-ok{animation:bxOk 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes bxOk{0%,100%{transform:translate(352px,138px) scale(1)}50%{transform:translate(352px,138px) scale(1.15)}}
@media (prefers-reduced-motion:reduce){.bx-row,.bx-ok{animation:none}.bx-dot{display:none}}

/* industries with photos */
.binds--ph .bind--ph{padding:0;overflow:hidden;display:flex;flex-direction:column}
.bind-im{display:block;aspect-ratio:16/10;overflow:hidden}
.bind-im img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.bind--ph:hover .bind-im img{transform:scale(1.06)}
.bind--ph>b{padding:16px 20px 0}
.bind--ph>span:last-child{padding:6px 20px 20px}

/* photos alongside sections */
.bx-ph{margin:0;border-radius:24px;overflow:hidden;box-shadow:0 30px 60px -42px rgba(16,43,70,.6)}
.bx-ph img{display:block;width:100%;height:100%;object-fit:cover}
.bx-split{display:grid;gap:24px;align-items:start}
@media (min-width:1000px){
  .bx-split{grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:40px}
  .bx-split--r{grid-template-columns:minmax(0,60fr) minmax(0,40fr)}
  .bx-split>.bx-ph{position:sticky;top:calc(var(--nav-h) + 30px);aspect-ratio:4/5}
  .bx-split--r>.bx-ph{aspect-ratio:4/5}
  .bx-split .signs{grid-template-columns:1fr}
}
@media (max-width:999px){.bx-split>.bx-ph{aspect-ratio:16/9}}
.bx-hd{display:grid;gap:20px;align-items:center}
@media (min-width:1000px){.bx-hd{grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:40px}.bx-hd .sec-head{margin-bottom:0}.bx-hd .bx-ph{aspect-ratio:16/9}}
@media (max-width:999px){.bx-hd .bx-ph{aspect-ratio:16/9}}
.bx-hd + *{margin-top:32px}
.startband--ph{display:grid!important;gap:24px;align-items:center}
@media (min-width:1000px){.startband--ph{grid-template-columns:240px minmax(0,1fr) auto}}
.sb-ph{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:4/3}
.sb-ph img{width:100%;height:100%;object-fit:cover}
@media (max-width:999px){.sb-ph{aspect-ratio:16/8}}
html.sl-on .bx-ph.rv.sr-l{transform:translate3d(calc((1 - var(--p,1)) * -110px),0,0)}
html.sl-on .bx-ph.rv.sr-r{transform:translate3d(calc((1 - var(--p,1)) * 110px),0,0)}
html.sl-on .bx-split>.bx-ph.rv{opacity:1}
/* difference + platforms beside photos */
@media (min-width:1000px){
  .bx-split--r .diffs{grid-template-columns:1fr}
  .bx-split--r .diff{padding:20px 0;border-top:1px solid var(--line);border-left:0}
  .bx-split--plat .plats{grid-template-columns:1fr}
  .bx-split--plat>.bx-ph{aspect-ratio:16/11}
}
/* next step over a photo */
.bx-close{position:relative;overflow:hidden;background:#0B2038!important;color:#fff}
.bx-cbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.12 - var(--cp,0) * .12))}
.bx-close::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,32,56,.86),rgba(11,32,56,.78))}
.bx-close .wrap{position:relative;z-index:2}
.bx-close .clabel{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.bx-close .h2{color:#fff}
.bx-close p{color:rgba(255,255,255,.88)}
.bx-close .btn{background:var(--mint);color:var(--navy)}
@media (prefers-reduced-motion:reduce){.bx-cbg{transform:none}}
/* services: larger left labels (numbers removed) */
.svt-tabs .svt-l{font-size:1.2rem}
.svt-tabs button{padding:17px 18px 17px 22px}
/* difference icons */
.diff-ic{display:grid;place-items:center;width:52px;height:52px;margin-bottom:14px;border-radius:16px;background:var(--navy);color:var(--mint)}
.diff:nth-child(2) .diff-ic{background:var(--mint);color:var(--navy)}
.diff-ic svg{width:24px;height:24px}
.diff>b{display:block}
.diff span.diff-ic{display:grid;margin-top:0;color:var(--mint)}
.diff:nth-child(2) span.diff-ic{color:var(--navy)}
.diff span.diff-ic svg{width:24px;height:24px}

/* Platforms & Integrations: dark band, cards joined by moving connectors */
.bx-plat{position:relative;overflow:hidden;color:#fff;background:linear-gradient(150deg,#0E2A45 0%,#0B2038 55%,#081829 100%)!important}
.bx-plat .spot,.bx-plat .dots{display:none}
.bx-plat::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(127,198,221,.16) 1px,transparent 1.2px);background-size:26px 26px;mask-image:radial-gradient(70% 80% at 50% 60%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(70% 80% at 50% 60%,#000 30%,transparent 80%)}
.bx-plat .wrap{position:relative;z-index:1}
.bx-plat .clabel{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.bx-plat .h2{color:#fff}
.bx-plat .lede{color:rgba(255,255,255,.82)}
.plats--chain{display:grid;gap:14px;align-items:stretch}
@media (min-width:900px){.plats--chain{grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr) 56px minmax(0,1fr);gap:0}}
.plats--chain .plat{background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:26px 24px;text-align:center;display:flex;flex-direction:column;align-items:center}
.plats--chain .plat:hover{border-color:rgba(91,251,194,.6);background:linear-gradient(160deg,rgba(91,251,194,.16),rgba(255,255,255,.05))}
.plats--chain .pico{width:60px;height:60px;border-radius:50%;background:var(--mint);color:var(--navy);display:grid;place-items:center;box-shadow:0 0 0 8px rgba(91,251,194,.14)}
.plats--chain .pico svg{width:26px;height:26px}
.plats--chain .plat b{margin-top:18px;color:#fff;font-size:1.1rem}
.plats--chain .plat span:last-child{color:rgba(255,255,255,.82)}
.plat-link{display:none}
@media (min-width:900px){
  .plat-link{display:flex;align-items:center}
  .plat-link i{position:relative;display:block;width:100%;height:2px;background:repeating-linear-gradient(90deg,var(--mint) 0 6px,transparent 6px 12px);background-size:24px 2px;animation:platFlow 1.2s linear infinite}
  .plat-link i::after{content:"";position:absolute;right:-2px;top:-5px;border-left:9px solid var(--mint);border-top:6px solid transparent;border-bottom:6px solid transparent}
}
@keyframes platFlow{to{background-position:24px 0}}
@media (prefers-reduced-motion:reduce){.plat-link i{animation:none}}
/* next step button: mint face with a contrasting offset edge */
.bx-close .btn{background:var(--mint);color:var(--navy);box-shadow:-5px 5px 0 0 #fff}
.bx-close .btn:hover,.bx-close .btn:focus-visible{box-shadow:-3px 3px 0 0 var(--turq)}
/* hero v2: fuller illustration */
.bx-orb{fill:none;stroke:rgba(127,198,221,.22);stroke-width:1.5;stroke-dasharray:2 8;transform-origin:280px 200px;animation:bxSpin 50s linear infinite}
@keyframes bxSpin{to{transform:rotate(360deg)}}
.bx-chd{fill:var(--navy)}
.bx-ct{fill:#fff!important;font-size:13.5px}
.bx-chip rect{fill:rgba(255,255,255,.1);stroke:rgba(127,198,221,.5)}
.bx-chi{fill:#0F3352;stroke:var(--mint);stroke-width:1.2}
.bx-chip text{font-size:12.5px;font-weight:800;fill:#fff}
.bx-chip{animation:bxFloat 6s ease-in-out infinite}
.bx-chip.c1{animation-delay:-2s}.bx-chip.c2{animation-delay:-4s}
@keyframes bxFloat{0%,100%{translate:0 0}50%{translate:0 -6px}}
.bx-ok{animation:none}
@keyframes bxOk2{0%,100%{scale:1}50%{scale:1.15}}
.bx-ok circle{animation:bxOk2 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:reduce){.bx-orb,.bx-chip,.bx-ok circle{animation:none}}

/* Why You Need It: two columns beside the photo, tighter */
@media (min-width:1000px){
  .bx-split{grid-template-columns:minmax(0,32fr) minmax(0,68fr);gap:32px}
  .bx-split .signs{grid-template-columns:1fr 1fr}
  .bx-split>.bx-ph{aspect-ratio:auto;align-self:stretch;position:relative;top:auto}
  .bx-split--faq>.bx-ph{position:sticky;top:calc(var(--nav-h) + 30px);aspect-ratio:4/5;align-self:start}
}
.bx-split .sign{padding:16px 18px}
.bx-split .sign b{font-size:.98rem}
.bx-split .sign p{font-size:.86rem;line-height:1.55}
/* Why You Need It: photo + three-column grid so the section stays short */
@media (min-width:1100px){
  .bx-split:not(.bx-split--faq){grid-template-columns:minmax(0,24fr) minmax(0,76fr);gap:24px}
  .bx-split:not(.bx-split--faq) .signs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1000px) and (max-width:1099px){.bx-split:not(.bx-split--faq) .signs{grid-template-columns:1fr 1fr}}
/* Why You Need It: photo beside the heading, benefits full width below */
@media (min-width:1000px){.bx-hd{grid-template-columns:minmax(0,55fr) minmax(0,45fr)}.bx-hd .bx-ph{aspect-ratio:16/8;max-height:260px}}
.bx-hd + .signs{margin-top:30px}
/* phones: benefits in a swipe row */
@media (max-width:699px){
  .signs{display:grid;grid-auto-flow:column;grid-auto-columns:84%;grid-template-columns:none!important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;background:none;border:0;box-shadow:none;padding:4px 20px 8px;margin:0 -20px;border-radius:0}
  .signs::-webkit-scrollbar{display:none}
  .sign{scroll-snap-align:start;padding:18px;border:1px solid var(--line)!important;border-radius:18px;background:#fff;box-shadow:0 18px 40px -34px rgba(16,43,70,.45)}
  html.sl-on .sign.rv{transform:none!important;opacity:1!important}
}

/* Why You Need It v4: heading + photo left, benefits open one at a time on the right */
.bw{display:grid;gap:26px;align-items:start}
@media (min-width:1000px){.bw{grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:48px}}
.bw-l .sec-head{margin-bottom:18px}
.bw-l .bx-ph{aspect-ratio:16/9}
.bw-acc{display:grid;gap:8px}
.bw-i{border-radius:16px;background:#fff;border:1px solid var(--line);transition:border-color .3s,box-shadow .3s}
.bw-i.open{border-color:var(--mint);box-shadow:0 22px 44px -32px rgba(16,43,70,.5)}
.bw-q{display:flex;align-items:center;gap:14px;width:100%;padding:14px 18px;border:0;background:none;font:inherit;text-align:left;cursor:pointer;color:var(--navy)}
.bw-q:focus-visible{outline:2.5px solid var(--turq);outline-offset:-3px;border-radius:16px}
.bw-q .si{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#EAF4F7;color:var(--turq);transition:background .3s,color .3s}
.bw-i.open .bw-q .si{background:var(--navy);color:var(--mint)}
.bw-q .si svg{width:20px;height:20px}
.bw-q b{flex:1;font-size:1rem;font-weight:800;line-height:1.3}
.bw-q i{position:relative;flex:none;width:14px;height:14px}
.bw-q i::before,.bw-q i::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2.4px;border-radius:2px;background:var(--turq);transition:transform .3s}
.bw-q i::after{transform:rotate(90deg)}
.bw-i.open .bw-q i::after{transform:rotate(0)}
.bw-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.bw-a>p{overflow:hidden;margin:0;padding:0 18px 0 70px;font-size:.92rem;line-height:1.62;color:#000}
.bw-i.open .bw-a{grid-template-rows:1fr}
.bw-i.open .bw-a>p{padding-bottom:16px}
@media (max-width:520px){.bw-a>p{padding-left:18px}}
@media (prefers-reduced-motion:reduce){.bw-a{transition:none}}

/* ---------- Why You Need It v5: tabs with a graphic per benefit ---------- */
.bt{display:grid;gap:18px;align-items:stretch}
@media (min-width:1000px){.bt{grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:24px}}
.bt-tabs{display:grid;gap:8px;align-content:start}
@media (max-width:999px){.bt-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bt-tabs button{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:#fff;font:inherit;text-align:left;cursor:pointer;transition:background .3s,border-color .3s,transform .3s var(--ease)}
.bt-tabs button:hover{border-color:var(--turq);transform:translateX(3px)}
.bt-tabs button[aria-selected="true"]{background:var(--navy);border-color:var(--navy)}
.bt-tabs button:focus-visible{outline:2.5px solid var(--turq);outline-offset:2px}
.bt-tabs .si{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#EAF4F7;color:var(--turq)}
.bt-tabs .si svg{width:19px;height:19px}
.bt-tabs button[aria-selected="true"] .si{background:var(--mint);color:var(--navy)}
.bt-tabs b{min-width:0;font-size:.95rem;font-weight:800;line-height:1.3;color:var(--navy)}
.bt-tabs button[aria-selected="true"] b{color:#fff}
@media (max-width:560px){.bt-tabs button{flex-direction:column;align-items:flex-start;gap:8px}.bt-tabs b{font-size:.86rem;overflow-wrap:anywhere}}
.bt-ps{display:grid;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -46px rgba(16,43,70,.6);overflow:hidden}
.bt-p{grid-area:1/1;padding:18px 22px 24px;visibility:hidden;opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s .4s}
.bt-p.is-on{visibility:visible;opacity:1;transform:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.bt-g{display:block;width:100%;height:auto;max-height:220px;border-radius:16px;background:linear-gradient(160deg,#EEF6F9,#DDEEF3);font-family:inherit}
.bt-p h3{margin:18px 0 0;font-size:1.25rem;font-weight:800;letter-spacing:-.02em;color:var(--navy)}
.bt-p p{margin:8px 0 0;font-size:.97rem;line-height:1.68;color:#000}
/* graphic parts */
.wg-bx{fill:#fff;stroke:#C9DCE3;stroke-width:1.4}
.wg-bd{fill:var(--navy)}
.wg-t{font-size:12.5px;font-weight:800;fill:var(--navy)}
.wg-tw{font-size:12.5px;font-weight:800;fill:#fff}
.wg-tw2{font-size:12px;font-weight:800;fill:var(--navy)}
.wg-cap{font-size:12px;font-weight:800;fill:#4F6370}
.wg-ar,.wg-ah{fill:none;stroke:var(--turq);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.wg-ok{fill:var(--mint)}
.wg-okt{fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.wg-tang{fill:none;stroke:#E5A15A;stroke-width:2.4;stroke-dasharray:5 5;opacity:.8}
.wg-clear{fill:none;stroke:var(--turq);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.bt-p.is-on .wg-clear,.bt-p.is-on .wg-trace{animation:wgDraw 1.3s .2s var(--ease) forwards}
@keyframes wgDraw{to{stroke-dashoffset:0}}
.wg-st{fill:#fff;stroke:var(--turq);stroke-width:3}
.wg-mv{fill:var(--mint);stroke:var(--navy);stroke-width:2}
.wg-recb{fill:var(--mint);stroke:var(--navy);stroke-width:1.5}
.wg-recl{fill:var(--navy)}
.wg-warn{fill:rgba(91,251,194,.35);stroke:var(--mint)}
.wg-wd{fill:var(--turq)}
.wg-chain{fill:none;stroke:var(--navy);stroke-width:4;stroke-linecap:round}
.wg-sh{fill:var(--mint);stroke:var(--navy);stroke-width:1.6}
.wg-trace{fill:none;stroke:var(--turq);stroke-width:2.4;stroke-dasharray:1;stroke-dashoffset:1}
.wg-cust{fill:var(--navy)}.wg-ch{fill:var(--mint)}.wg-cb{fill:var(--mint)}
.wg-gb{fill:#C9DCE3;transform-box:fill-box;transform-origin:bottom}
.wg-gb:nth-child(5){fill:var(--turq)}
.bt-p.is-on .wg-gb{animation:wgGrow .8s var(--ease) both;animation-delay:calc(var(--i) * .08s)}
@keyframes wgGrow{from{transform:scaleY(.12)}to{transform:none}}
.wg-hub{fill:var(--navy)}
.wg-pin{fill:var(--turq)}.wg-pinh{fill:#fff}
.wg-ln{stroke:#9FBFCB;stroke-width:1.6;stroke-dasharray:3 4}
.bt-p.is-on .wg-catch g{animation:wgPop .5s var(--ease) both}
.bt-p.is-on .wg-catch g:nth-child(2){animation-delay:.25s}.bt-p.is-on .wg-catch g:nth-child(3){animation-delay:.5s}
@keyframes wgPop{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.bt-p{transition:none}.wg-clear,.wg-trace{stroke-dashoffset:0;animation:none!important}.wg-gb,.wg-catch g{animation:none!important}}