/* Workflow Automation page, built on the AI Agents page: its shell, hero base, buttons, email form, reveal, hover icons,
   client wall and responsive rules are carried over unchanged. Header and footer are the site's own (page-seo-1/2.css);
   everything here scopes to .v9 or body.v9-page. Page-specific rules follow the shared ones. */

@font-face{font-family:'Sailec';src:url('assets/fonts/type_dynamic_-_sailec-webfont.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Sailec';src:url('assets/fonts/type_dynamic_-_sailec_medium-webfont.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Sailec';src:url('assets/fonts/type_dynamic_-_sailec_bold-webfont.woff2') format('woff2');font-weight:700;font-display:swap}

/* ---------- page shell: white header strip, then the page ---------- */
body.v9-page .top-wrap{background-color:#fff;background-image:none}
body.v9-page .top-wrap-inner{background:none;min-height:0;padding-bottom:0}
body.v9-page .top-wrap::after,body.v9-page .top-wrap::before{display:none}
body.v9-page .content-area{padding:0}
body.v9-page .logo-white{display:none}
body.v9-page .logo-dark{display:block}
body.v9-page .menu_trigger{color:#232834}
body.v9-page .slicknav_icon-bar{background-color:#232834}
body.v9-page .header-wide{margin-bottom:0;padding-bottom:0}
body.v9-page .header{margin-bottom:0;padding-top:18px;padding-bottom:18px}
/* the site's menu button is 33px wide: its tap area is widened to 44px towards the page, with nothing moving */
body.v9-page .menu_trigger::after{content:"";position:absolute;top:0;bottom:0;left:-11px;right:0}

/* the dark menu has no link to this page yet, so its AI route is marked as current: coral with the menu's own small dot */
body.v9-page #wbm .rt[aria-current="page"] b{color:#FA5478}
body.v9-page #wbm .rt[aria-current="page"] b::after{content:'';display:inline-block;width:7px;height:7px;margin-left:12px;border-radius:50%;background:#FA5478;vertical-align:middle}

/* ---------- base ---------- */
.v9{font-family:Sailec,Helvetica,Arial,sans-serif;font-weight:500;color:#232834;-webkit-font-smoothing:antialiased;text-wrap:pretty}
.v9 *{box-sizing:border-box}
.v9 :where(h1,h2,h3,p,ul,ol,li){margin:0;padding:0;background:none;font-family:inherit;color:inherit;font-size:inherit;line-height:inherit;text-align:left;font-weight:inherit}
.v9 :where(ul,ol,li){list-style:none}
.v9 :where(li)::marker{content:""}
.v9 a{color:inherit;text-decoration:none}
.v9 a:hover{color:#d33d5c}
.v9 svg{display:block;width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.v9-wrap{max-width:1240px;margin:0 auto;padding:0 40px;position:relative}
.v9-eyebrow{display:block;font-weight:700;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:#d33d5c;margin:0 0 14px}
.v9-h2{font-weight:700;font-size:clamp(30px,3.4vw,44px);line-height:1.1;letter-spacing:-.03em}
.v9-sec{padding:88px 0}
.v9-bone{background:#F1EEEA}
.v9-head{margin-bottom:48px}
.v9-head .v9-sub{margin:18px 0 0;max-width:640px;font-size:18px;line-height:1.6;color:#4f5565}

/* ---------- reveal: sections ease in once as they reach the viewport ---------- */
.v9-rv{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.v9-rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.v9-rv{opacity:1;transform:none;transition:none}}

/* ---------- hero: copy on the left, the animation on the right ---------- */
.v9-hero{background:#fff;color:#232834;padding:24px 0 64px}
.v9-hero-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:48px 72px;align-items:center}
.v9-hero h1{font-weight:700;font-size:clamp(40px,4.6vw,64px);line-height:1.1;letter-spacing:-.03em;margin:0 0 24px}
.v9-hero .v9-lead{font-size:18px;line-height:1.65;color:#3a3f4b;max-width:520px;margin:0 0 36px}
.v9-hero .v9-lead b{font-weight:700;color:#232834}
/* the one marked word: coral type on a blush marker that sweeps in once */
.v9-hl{position:relative;z-index:0;color:#d33d5c;white-space:nowrap}
.v9-hl::before{content:"";position:absolute;z-index:-1;left:-.07em;right:-.09em;top:.32em;bottom:.12em;background:#FDE0E6;border-radius:.06em .18em .08em .2em;transform:rotate(-1deg);transform-origin:left center;animation:v9Hl .9s cubic-bezier(.65,0,.35,1) .35s both}
@keyframes v9Hl{from{transform:rotate(-1deg) scaleX(0)}to{transform:rotate(-1deg) scaleX(1)}}
@media (prefers-reduced-motion:reduce){.v9-hl::before{animation:none}}
.v9-hero-form{display:flex;flex-wrap:nowrap;gap:10px}
.v9-hero-email{flex:0 1 262px;width:262px;min-width:0;height:48px;padding:0 22px;border:1.5px solid #CFC9C1;border-radius:24px;background:#fff;font:inherit;font-size:16px;color:#232834;outline:0;transition:border-color .2s,box-shadow .2s}
.v9-hero-email::placeholder{color:#6b7180}
.v9-hero-email:focus{border-color:#232834;box-shadow:0 0 0 4px rgba(250,84,120,.22)}
.v9-hero-go{flex:none;width:178px;height:48px;padding:0;border-radius:24px;font-family:inherit;font-size:16px}
@media (max-width:480px){.v9-hero-form{flex-wrap:wrap}.v9-hero-email,.v9-hero-go,.em-email{flex:1 1 100%;width:100%}}
.v9-illo{position:relative;width:100%;max-width:720px;margin:0 auto;aspect-ratio:1920/1805;pointer-events:none}
.v9-illo-art{position:absolute;inset:0}
.v9-illo-art svg{display:block;fill:#000;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}
/* the hero swaps scenarios by laying the next over the last: each pass has its own box, stacked in one place */
.wf-hero .v9-illo-art > div{position:absolute;inset:0}
@media (min-width:1101px){
.v9-illo{max-width:none;width:112%;margin:-24px -6% -4% -6%;transform:translateY(-7%)}
.v9-hero .v9-hero-grid{grid-template-columns:minmax(452px,5.2fr) minmax(0,6.8fr);gap:48px}
.v9-hero h1{font-size:clamp(44px,4.2vw,60px);margin-bottom:24px}
.v9-hero .v9-lead{max-width:480px}
}

/* ---------- buttons: a coral pill that lifts on hover onto a soft blush step ---------- */
.v9-btn{--btn-step:#FBC0CC;--btn-ease:cubic-bezier(.5,2.5,.7,.7);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:48px;padding:0 26px;border:1px solid transparent;border-radius:9999px;background:#FA5478;color:#fff;font-family:inherit;font-weight:700;font-size:15px;line-height:20px;white-space:nowrap;text-decoration:none;cursor:pointer;box-shadow:0 0 0 0 var(--btn-step);transition-property:transform,translate,box-shadow;transition-duration:150ms;transition-timing-function:var(--btn-ease)}
.v9 a.v9-btn,.v9 a.v9-btn:hover,.v9 a.v9-btn:visited,.v9 button.v9-btn{color:#fff}
.v9-btn::before{content:"";position:absolute;left:0;top:0;z-index:-1;width:100%;height:100%;background:transparent}
.v9 .v9-btn svg.arr{display:block;flex-shrink:0;width:14px;height:14px;margin-left:6px;stroke:currentColor;stroke-width:2.4;fill:none;transition:transform 150ms cubic-bezier(.4,0,.2,1)}
@media (hover:hover){
.v9-btn:hover{translate:0 -5px;box-shadow:0 5px 0 0 var(--btn-step)}
.v9-btn:hover::before{transform:scaleY(1.4)}
.v9 .v9-btn:hover svg.arr{transform:translateX(2px)}
}
.v9-btn:active{translate:0 -3px;box-shadow:0 3px 0 0 var(--btn-step)}
.v9-btn:focus-visible{outline:2px solid #232834;outline-offset:2px}
.v9-btn:disabled{pointer-events:none;opacity:.5}
.v9-btn.v9-btn-ghost{--btn-step:#E4DFD9;background:#fff;border-color:#232834}
.v9 a.v9-btn.v9-btn-ghost,.v9 a.v9-btn.v9-btn-ghost:hover,.v9 a.v9-btn.v9-btn-ghost:visited{color:#232834}
.v9-hero-go{padding:0;font-size:16px}
@media (prefers-reduced-motion:reduce){.v9-btn,.v9 .v9-btn svg.arr{transition:none}.v9-btn:hover,.v9-btn:active{translate:none}}
.em-center{display:flex;flex-direction:column;align-items:center;text-align:center}
.em-center .v9-h2{text-align:center;max-width:760px}
.em-center .v9-sub{text-align:center;max-width:560px;margin:18px auto 34px;font-size:18px;line-height:1.6;color:#4f5565}
/* ---------- closing: the hero's email and call button, centred ---------- */
.em-cta{border-top:1px solid #E4DFD9;padding-bottom:104px}
.em-cta .v9-sub{margin-bottom:30px}
.em-cta .v9-hero-form{justify-content:center}
.em-cta .em-talk{justify-items:center}
.em-cta .em-status{text-align:center}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- email and call: a valid email shows a check in the field; on send the button narrows to a spinner,
   then the form fades away and a thank-you settles in its place ---------- */
.em-talk{display:grid}
.em-talk>*{grid-area:1/1}
.em-email{position:relative;flex:0 1 262px;width:262px;min-width:0}
.em-email .v9-hero-email{width:100%;padding-right:52px;transition:border-color .35s cubic-bezier(.65,0,.35,1)}
.em-email-check{position:absolute;top:50%;right:10px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:#FDE0E6;transform:scale(0);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.v9 .em-email-check svg{width:15px;height:15px;stroke:#d33d5c;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.em-demo.sending .em-email-check,.em-talk.done .em-email-check{transform:scale(1)}
.em-demo.sending .v9-hero-email,.em-talk.done .v9-hero-email{border-color:#FA5478}
.em-email .v9-hero-email:not(:placeholder-shown):valid{border-color:#FA5478}
.em-email .v9-hero-email:not(:placeholder-shown):valid ~ .em-email-check{transform:scale(1)}
.v9 .v9-btn .em-spin{display:none;width:20px;height:20px;margin-right:10px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;animation:emSpin .8s linear infinite}
.em-demo .v9-btn{transition-property:transform,translate,box-shadow,background-color,width;transition-duration:150ms,150ms,150ms,.35s,.5s;transition-timing-function:var(--btn-ease),var(--btn-ease),var(--btn-ease),cubic-bezier(.65,0,.35,1),cubic-bezier(.65,0,.35,1)}
.em-demo.sending .v9-btn,.em-talk.done .v9-btn{width:100px;background:#FCA3B6}
.em-demo.sending .em-btn-lbl,.em-talk.done .em-btn-lbl{display:none}
.v9 .em-demo.sending .em-spin,.v9 .em-talk.done .em-spin{display:block}
.em-demo.sending .v9-btn:disabled{opacity:1}
.em-demo.sending .v9-btn:hover{translate:none;box-shadow:none}
@keyframes emSpin{to{transform:rotate(360deg)}}
.em-demo{transition:opacity .45s cubic-bezier(.65,0,.35,1),transform .55s cubic-bezier(.65,0,.35,1)}
.em-talk.done .em-demo{opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;transition:opacity .45s cubic-bezier(.65,0,.35,1),transform .55s cubic-bezier(.65,0,.35,1),visibility 0s linear .55s}
.em-talk-done{display:flex;align-items:center;gap:12px;min-height:48px;margin:0;font-size:16px;line-height:1.5;color:#232834;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .5s cubic-bezier(.65,0,.35,1),transform .6s cubic-bezier(.65,0,.35,1),visibility 0s linear .6s}
.em-talk.done .em-talk-done{opacity:1;visibility:visible;transform:none;transition:opacity .55s cubic-bezier(.65,0,.35,1) .3s,transform .65s cubic-bezier(.65,0,.35,1) .3s,visibility 0s}
.em-talk-ic{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#FA5478}
.v9 .em-talk-ic svg{width:14px;height:14px;stroke:#fff;stroke-width:2.6;fill:none}
.em-status{min-height:22px;margin:12px 0 0;font-size:14px;line-height:1.5;color:#c62d4f}
@media (prefers-reduced-motion:reduce){.em-email-check,.em-demo,.em-talk.done .em-demo,.em-talk-done,.em-talk.done .em-talk-done{transition:none}.v9 .v9-btn .em-spin{animation-duration:2.4s}}

/* ---------- responsive ---------- */
@media (max-width:1100px){
.v9-hero-grid{grid-template-columns:minmax(0,1fr)}
.v9-hero .v9-lead{max-width:620px}
}
@media (max-width:820px){
.v9-wrap{padding:0 22px}
.v9-sec{padding:64px 0}
.v9-hero{padding:20px 0 48px}
}

/* ---------- this page's hero. The headline holds two lines at every width: "between your systems" is the longer line
   (10.33em in Sailec Bold at -.03em), so each size keeps it inside the copy column with room to spare. From 1101px the
   copy column is 560px: room for that line at 50px, and for the email field and the button side by side at the same
   width ---------- */
.v9-hero.wf-hero h1{font-size:min(52px,calc((100vw - 44px) / 10.9))}
@media (min-width:1101px){
.v9-hero.wf-hero .v9-hero-grid{grid-template-columns:minmax(560px,5.4fr) minmax(0,6.6fr);gap:48px}
.v9-hero.wf-hero h1{font-size:clamp(40px,3.6vw,50px)}
.v9-hero.wf-hero .v9-lead{max-width:520px}
/* the relay fills its canvas from the top, so it is not lifted the way the AI Agents drawing is: it starts below the header */
.wf-hero .v9-illo{margin-top:0;transform:none}
}

/* ---------- hover icons, as on the AI Chatbots page: ink outline over a white body, warm shade for depth, and one coral part
   that arrives once, in one direction, with its section. A hover Lottie sits exactly over each icon; its first frame is the
   icon, so the swap on first hover is invisible ---------- */
.cb-ic-box{grid-row:1/3;position:relative;display:block;width:72px;height:72px;margin:-6px 0 0 -4px}
.v9 svg.cb-ic{width:100%;height:100%;overflow:visible;fill:none;stroke:#232834;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round}
.cb-ic-lt{position:absolute;inset:0;display:block;pointer-events:none;visibility:hidden}
.cb-ic-lt svg{display:block;fill:#000;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}
.cb-ic-box.lt-on .cb-ic-lt{visibility:visible}
.cb-ic-box.lt-on svg.cb-ic{visibility:hidden}
.cb-ic *{vector-effect:non-scaling-stroke}
.cb-ic .w{fill:#fff}
.cb-ic .s{fill:#E4DFD9;stroke:none}
.cb-ic .so{fill:#E4DFD9}
.cb-ic .tn{fill:#C2C5CC;stroke:none}
.cb-ic .wn{fill:#fff;stroke:none}
.cb-ic .c{fill:#FA5478;stroke:#C43A5C}
.cb-ic .dc{stroke:#C43A5C}
.cb-ic .ik{fill:#232834;stroke:none}
.cb-ic .tk{stroke:#C2C5CC}
.cb-ic .a{transform-box:fill-box;opacity:0;transition:transform .8s cubic-bezier(.2,.7,.2,1) var(--d),opacity .5s cubic-bezier(.65,0,.35,1) var(--d)}
.v9-rv.in .cb-ic .a{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.cb-ic .a{opacity:1;transform:none;transition:none}}

/* ---------- your team shouldn't have to carry every step: the copy on the left; beside it, the four small jobs from the first
   paragraph as one enquiry's to-do note, unticked and still, on a pad of the same notes (the next enquiry's list is already
   underneath). The note's title, the enquiry that starts it all, is the section's one coral part; the third paragraph, what
   we build instead, is in ink.
   Stacked below 1000px ---------- */
.wf-carry{padding-top:72px}
.wf-carry-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:48px 96px;align-items:center}
.wf-carry-copy{display:flex;flex-direction:column;gap:18px;max-width:640px}
.wf-carry-copy .v9-h2{margin:0 0 10px;text-wrap:balance}
.wf-carry-copy p{font-size:18px;line-height:1.65;color:#4f5565}
.wf-carry-copy p:last-child{color:#232834}
.wf-note{position:relative;width:100%;margin:0 0 12px;justify-self:end}
.wf-note.v9-rv{transition-delay:.12s}
.wf-note::before{content:"";position:absolute;inset:0;border:1px solid #E4DFD9;border-radius:16px;background:#fff;transform:translateY(12px) scaleX(.94);transform-origin:50% 100%}
.wf-note-sheet{position:relative;padding:26px 28px 6px;border:1px solid #E4DFD9;border-radius:16px;background:#fff;overflow:hidden}
.v9 .wf-note-t{margin:0 0 8px;font-weight:700;font-size:18px;line-height:1.35;color:#d33d5c}
.v9 .wf-note ul{margin:0 -28px;padding:0}
.wf-note li{display:flex;align-items:flex-start;gap:14px;min-height:60px;padding:14px 28px;border-top:1px solid #E4DFD9;font-size:18px;line-height:1.4;color:#3a3f4b}
.wf-note li > span:last-child{text-wrap:balance}
/* the box sits on the item's first line, so an item that wraps on a small phone still reads as one entry */
.wf-box{flex:none;width:20px;height:20px;margin-top:calc(.7em - 10px);border:1.75px solid #232834;border-radius:5px;background:#fff}
@media (max-width:1199px){.wf-carry-grid{gap:48px 64px}}
@media (max-width:999px){.wf-carry-grid{grid-template-columns:minmax(0,1fr)}.wf-note{justify-self:start;max-width:480px}}
@media (max-width:820px){.wf-carry{padding-top:48px}}
@media (max-width:560px){.wf-carry-copy p{font-size:17px}.wf-note-sheet{padding:22px 20px 4px}.v9 .wf-note ul{margin:0 -20px}.wf-note li{min-height:56px;padding:12px 20px;font-size:17px}}
@media (prefers-reduced-motion:reduce){.wf-note.v9-rv{transition-delay:0s}}

/* ---------- what we can take off your team's list: four ruled entries. Every workflow begins with something that starts it,
   so each entry's trigger is pulled out beside its title, set as the rule would read it: "When …". The word When is the
   section's one coral part. Trigger beside the title, on its baseline, from 821px; above the title on phones. Under the
   list, an open invitation sits in the text column, its trigger left for the reader to name ---------- */
.wf-take{border-top:1px solid #E4DFD9}
.wf-take-head{display:flex;flex-direction:column;gap:14px;max-width:760px;margin:0 0 40px}
.wf-take-head .v9-h2{margin:0 0 6px;text-wrap:balance}
.wf-take-head p{font-size:18px;line-height:1.65;color:#4f5565}
.v9 .wf-take-list{margin:0;padding:0;border-bottom:1px solid #E4DFD9}
.wf-take-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:10px 56px;align-items:baseline;padding:32px 0 34px;border-top:1px solid #E4DFD9}
.v9 .wf-when{margin:0;max-width:340px;font-size:18px;line-height:1.45;color:#3a3f4b;text-wrap:balance}
.wf-when b{font-weight:700;color:#d33d5c}
.wf-take-body h3{margin:0 0 10px;font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.wf-take-body p{margin:0;max-width:640px;font-size:17px;line-height:1.65;color:#4f5565}
.wf-take-more{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:10px 56px;padding:36px 0 0}
.wf-take-more .wf-take-body{grid-column:2}
/* the invitation's icon, a compass (tools/wf-icons-scene.js), for "we'll help you work out" where to go. Its needle fades in
   with the block; pointing at the block, or focusing its link from the keyboard, turns it once to a new heading */
.wf-take-more .cb-ic-box{grid-row:auto;width:64px;height:64px;margin:-3px 0 0 -8px}
.wf-take-more .cb-ic{--d:.3s}
.v9 .wf-go{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:10px;font-weight:700;font-size:17px;line-height:1.3;color:#232834;text-decoration:none}
.wf-go-l{text-decoration:underline;text-decoration-color:#C2C5CC;text-decoration-thickness:1.5px;text-underline-offset:6px;transition:text-decoration-color .25s cubic-bezier(.65,0,.35,1)}
.wf-go-a{display:inline-block;transition:transform .3s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .wf-go:hover{color:#232834}.wf-go:hover .wf-go-l{text-decoration-color:#232834}.wf-go:hover .wf-go-a{transform:translateX(3px)}}
.v9 .wf-go:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
.wf-take-row.v9-rv:nth-child(2){transition-delay:.08s}.wf-take-row.v9-rv:nth-child(3){transition-delay:.16s}.wf-take-row.v9-rv:nth-child(4){transition-delay:.24s}
@media (max-width:820px){.wf-take-head{margin-bottom:28px}.wf-take-more{grid-template-columns:minmax(0,1fr);padding-top:28px}.wf-take-more .wf-take-body{grid-column:auto}.wf-take-more .cb-ic-box{width:56px;height:56px;margin:0 0 2px -7px}.wf-take-row{grid-template-columns:minmax(0,1fr);gap:8px;padding:24px 0 26px}.wf-take-body h3{font-size:20px}.wf-take-body p{font-size:16px}.v9 .wf-when{max-width:none;font-size:17px}}
@media (max-width:560px){.wf-take-head p{font-size:17px}}
@media (prefers-reduced-motion:reduce){.wf-take-row.v9-rv{transition-delay:0s}.wf-go-a{transition:none}}

/* ---------- built around your process: a small swimlane map of one enquiry, made from the four things we map: what starts
   it (the dot), the systems it touches (the lanes), the decision it needs (a person's choice) and what completion looks
   like (the booked call). While the map is in view it shows the process before and after, in turn: the step that
   shouldn't be automated, forwarding the details through an inbox, is taken out (its tracks go and it stays behind as a
   dashed outline) and the path joins straight to the CRM;
   on the wide map the steps after it also close up. That holds, then the old process eases back, and again. With reduced
   motion the map shows the improved process only. The map sits
   left of the copy from 1152px; from 900px to 1151px it turns on its side (the lanes as columns) and sits right of the
   copy; from 680px to 899px it is below the copy at full size, and on phones below it on its side ---------- */
.wf-proc{border-top:1px solid #E4DFD9}
.wf-proc-grid{display:grid;grid-template-columns:624px minmax(0,1fr);grid-template-areas:"map copy";gap:48px 72px;align-items:center}
.wf-proc-copy{grid-area:copy;display:flex;flex-direction:column;gap:18px;max-width:560px}
.wf-proc-copy .v9-h2{margin:0 0 10px;text-wrap:balance}
.wf-proc-copy p{font-size:18px;line-height:1.65;color:#4f5565}
.wf-proc-copy p:last-child{color:#232834}
.wf-map{grid-area:map;margin:0}
.wf-map.v9-rv{transition-delay:.12s}
.v9 .wf-map svg{overflow:visible;fill:none;stroke:none}
.v9 .wf-map-h{display:block;width:624px;height:288px}
.v9 .wf-map-v{display:none;width:316px;height:344px}
.wf-map .ln{stroke:#E4DFD9;stroke-width:1}
.wf-map text{font-family:Sailec,Helvetica,Arial,sans-serif;stroke:none}
.wf-map .lb{font-weight:700;font-size:15px;fill:#232834}
.wf-map-v .lb{font-size:12px;text-anchor:middle}
.wf-map .sx{font-weight:500;font-size:14px;fill:#3a3f4b;text-anchor:middle}
.wf-map-v .sx{font-size:15px;text-anchor:start}
.wf-map .bx{fill:#fff;stroke:#232834;stroke-width:1.5}
.wf-map .st{fill:#232834}
.wf-map .tk{fill:none;stroke:#C2C5CC;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wf-map .dn circle{fill:#232834}
.wf-map .dn path{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.wf-map .gh{fill:none;stroke:#C2C5CC;stroke-width:1.5;stroke-dasharray:5 5}
/* back to the old process: the path opens, and the removed step returns last */
.wf-map .lb{transition:fill .5s cubic-bezier(.65,0,.35,1) .2s}
.wf-map .mv{transition:transform .7s cubic-bezier(.65,0,.35,1) .15s}
.wf-map .nw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s cubic-bezier(.65,0,.35,1) .15s}
.wf-map .rm-t,.wf-map .rm-b{transition:opacity .5s cubic-bezier(.65,0,.35,1) .7s}
.wf-map .rm-x{transition:fill .5s cubic-bezier(.65,0,.35,1) .7s}
/* taking the step out: it empties first, then the path closes up */
.wf-map.run .rm-t,.wf-map.run .rm-b{opacity:0;transition:opacity .5s cubic-bezier(.65,0,.35,1) .1s}
.wf-map.run .rm-x{fill:#8E939E;transition:fill .5s cubic-bezier(.65,0,.35,1) .1s}
.wf-map.run .wf-map-h .mv{transform:translateX(-104px);transition:transform .8s cubic-bezier(.65,0,.35,1) .7s}
.wf-map.run .nw{stroke-dashoffset:0;transition:stroke-dashoffset .8s cubic-bezier(.65,0,.35,1) .7s}
.wf-map.run .lb.off{fill:#8E939E;transition:fill .6s cubic-bezier(.65,0,.35,1) .8s}
@media (prefers-reduced-motion:reduce){
.wf-map.v9-rv{transition-delay:0s}
.wf-map .rm-t,.wf-map .rm-b,.wf-map .rm-x,.wf-map .mv,.wf-map .nw,.wf-map .dn,.wf-map .lb{transition:none}
.wf-map .rm-t,.wf-map .rm-b{opacity:0}.wf-map .rm-x{fill:#8E939E}.wf-map .wf-map-h .mv{transform:translateX(-104px)}.wf-map .nw{stroke-dashoffset:0}.wf-map .lb.off{fill:#8E939E}.wf-map .dn{opacity:1;transform:none}
}
@media (max-width:1199px){.wf-proc-grid{gap:48px 56px}}
@media (max-width:1151px){.wf-proc-grid{grid-template-columns:minmax(0,1fr) 360px;grid-template-areas:"copy map"}.wf-proc-copy{max-width:600px}.v9 .wf-map-h{display:none}.v9 .wf-map-v{display:block;width:360px;height:auto}}
@media (max-width:899px){.wf-proc-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "map"}.wf-proc-copy{max-width:640px}.v9 .wf-map-h{display:block}.v9 .wf-map-v{display:none}}
@media (max-width:679px){.v9 .wf-map-h{display:none}.v9 .wf-map-v{display:block;width:316px;height:344px}}
@media (max-width:560px){.wf-proc-copy p{font-size:17px}}

/* ---------- the exceptions are part of the process: one enquiry's run on a small status board (Done, Waiting, For review).
   It opens on the routine run, every step done. The reader picks one of the three situations from the opening lines, and
   the same board shows how the build handles it: the second copy matched to the existing record; the run held with the
   missing item flagged and the later steps waiting; the CRM step retried, then surfaced for review, with the completed
   steps left as they are. Cards glide once to their new column, a label leaves before the next arrives, and the card the
   exception touched carries the section's one coral mark. Nothing plays until the reader picks. The four build items sit
   beside the board from 1200px and below it under that; up to 760px the board's columns stack as lanes ---------- */
.wf-exc{border-top:1px solid #E4DFD9}
.wf-exc-head{display:flex;flex-direction:column;gap:14px;max-width:760px;margin:0 0 44px}
.wf-exc-head .v9-h2{margin:0 0 6px;text-wrap:balance}
.wf-exc-head p{font-size:18px;line-height:1.65;color:#4f5565}
.wf-exc-head p:last-child{color:#232834}
.wf-exc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:48px 64px;align-items:start}
.wf-run{padding:22px;border:1px solid #E4DFD9;border-radius:20px;background:#fff}
.wf-run.v9-rv{transition-delay:.08s}
.wf-pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 28px}
.v9 .wf-pk{-webkit-appearance:none;appearance:none;min-height:52px;margin:0;padding:8px 10px;border:1px solid #C2C5CC;border-radius:14px;background:#fff;font:inherit;font-size:15px;line-height:1.3;color:#3a3f4b;text-align:center;text-wrap:balance;cursor:pointer;transition:background-color .25s cubic-bezier(.65,0,.35,1),border-color .25s cubic-bezier(.65,0,.35,1),color .25s cubic-bezier(.65,0,.35,1)}
.v9 .wf-pk[aria-pressed="true"]{background:#232834;border-color:#232834;color:#fff;cursor:default}
@media (hover:hover){.v9 .wf-pk:hover{border-color:#232834}}
.v9 .wf-pk:focus-visible{outline:2px solid #232834;outline-offset:2px}
/* the board: three lanes; each card's lane (--c) and row (--r) are set per situation below */
.wf-board{position:relative;height:328px}
.wf-lane{--l:0;position:absolute;top:32px;left:calc(var(--l) * ((100% - 24px) / 3 + 12px));width:calc((100% - 24px) / 3);height:296px;border:1px solid #E4DFD9;border-radius:14px}
.wf-lane.l1{--l:1}.wf-lane.l2{--l:2}
.wf-lane b{position:absolute;left:2px;bottom:100%;margin-bottom:9px;font-weight:700;font-size:14px;line-height:1.2;color:#232834;white-space:nowrap}
.wf-lane i{position:absolute;left:0;right:0;top:8px;height:64px;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:15px;color:#6b7180;transition:opacity .25s cubic-bezier(.65,0,.35,1)}
.wf-card{--c:0;--r:0;position:absolute;left:calc(var(--c) * ((100% - 24px) / 3 + 12px) + 8px);top:calc(40px + var(--r) * 72px);width:calc((100% - 24px) / 3 - 16px);height:64px;display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid #C2C5CC;border-radius:12px;background:#fff;transition:left .6s cubic-bezier(.65,0,.35,1),top .6s cubic-bezier(.65,0,.35,1)}
.wf-card.k2{--r:1}.wf-card.k3{--r:2}.wf-card.k4{--r:3}
.wf-board[data-s="inc"] .k2{--c:1;--r:0}.wf-board[data-s="inc"] .k3{--c:1;--r:1}.wf-board[data-s="inc"] .k4{--c:1;--r:2}
.wf-board[data-s="down"] .k3{--c:2;--r:0}.wf-board[data-s="down"] .k4{--c:1;--r:0}
.wf-board[data-s="inc"] .l1 i,.wf-board[data-s="down"] .l1 i,.wf-board[data-s="down"] .l2 i{opacity:0}
/* marks: done (ink), waiting (dashed), and the one the exception touched (coral: matched, or needs attention) */
.v9 .wf-mk{flex:none;width:20px;height:20px;overflow:visible}
.wf-mk > *{opacity:0;transition:opacity .3s cubic-bezier(.65,0,.35,1)}
.wf-mk .m-d{opacity:1}
.wf-mk .m-d circle{fill:#232834;stroke:none}
.wf-mk .m-d path,.wf-mk .m-m path,.wf-mk .m-f path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wf-mk .m-m circle,.wf-mk .m-f circle{fill:#FA5478;stroke:#C43A5C;stroke-width:1.25}
.wf-mk .m-f circle.dot{fill:#fff;stroke:none}
.wf-mk .m-w{fill:none;stroke:#232834;stroke-width:1.5;stroke-dasharray:3 2.6}
.wf-board[data-s="dup"] .k2 .m-d,.wf-board[data-s="inc"] .k2 .m-d,.wf-board[data-s="inc"] .k3 .m-d,.wf-board[data-s="inc"] .k4 .m-d,.wf-board[data-s="down"] .k3 .m-d,.wf-board[data-s="down"] .k4 .m-d{opacity:0}
.wf-board[data-s="dup"] .k2 .m-m,.wf-board[data-s="inc"] .k2 .m-f,.wf-board[data-s="down"] .k3 .m-f,.wf-board[data-s="inc"] .k3 .m-w,.wf-board[data-s="inc"] .k4 .m-w,.wf-board[data-s="down"] .k4 .m-w{opacity:1}
/* labels: the old one leaves before the new one arrives */
.wf-cl{position:relative;flex:1 1 auto;align-self:stretch;min-width:0}
.wf-cl > span{position:absolute;inset:0;display:flex;align-items:center;font-size:15px;line-height:1.3;color:#232834;opacity:0;visibility:hidden;transition:opacity .2s cubic-bezier(.65,0,.35,1),visibility 0s linear .2s}
.wf-board:not([data-s="dup"]):not([data-s="inc"]):not([data-s="down"]) .t0,.wf-board[data-s="dup"] .t1,.wf-board[data-s="inc"] .k1 .t0,.wf-board[data-s="inc"] .t2,.wf-board[data-s="down"] .k1 .t0,.wf-board[data-s="down"] .k2 .t0,.wf-board[data-s="down"] .k3 .t3,.wf-board[data-s="down"] .k4 .t2{opacity:1;visibility:visible;transition:opacity .25s cubic-bezier(.65,0,.35,1) .2s,visibility 0s}
.wf-board[data-s="inc"] .k3 .t2,.wf-board[data-s="inc"] .k4 .t2,.wf-board[data-s="down"] .k4 .t2{color:#4f5565}
.v9 .wf-run-cap{min-height:52px;margin:18px 0 0;font-size:16px;line-height:1.6;color:#3a3f4b}
.wf-exc-items{display:flex;flex-direction:column;gap:30px;padding-top:4px}
.wf-exc-items h3{margin:0 0 8px;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.wf-exc-items p{font-size:17px;line-height:1.65;color:#4f5565}
.wf-exc-items li.v9-rv:nth-child(2){transition-delay:.08s}.wf-exc-items li.v9-rv:nth-child(3){transition-delay:.16s}.wf-exc-items li.v9-rv:nth-child(4){transition-delay:.24s}
@media (max-width:1279px){.wf-exc-grid{grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:48px 56px}}
@media (max-width:1199px){.wf-exc-grid{grid-template-columns:minmax(0,1fr)}.wf-exc-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 48px;padding-top:0}}
@media (max-width:820px){.wf-exc-head{margin-bottom:32px}}
/* phones and small tablets: the lanes stack, each card full width; a card's top comes from its lane and row */
@media (max-width:760px){
.wf-run{padding:16px}
.wf-pick{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:34px}
.v9 .wf-pk{font-size:16px}
.wf-board{height:644px}
.wf-lane{left:0;width:100%}
.wf-lane.l0{top:28px;height:264px}.wf-lane.l1{top:332px;height:200px}.wf-lane.l2{top:572px;height:72px}
.wf-lane i{height:56px;font-size:16px}
.wf-card{left:8px;width:calc(100% - 16px);height:56px;top:calc(36px + min(var(--c), 1) * 304px + max(var(--c) - 1, 0) * 240px + var(--r) * 64px);padding:0 14px;gap:12px}
.wf-cl > span{font-size:16px}
}
@media (max-width:700px){.wf-exc-items{grid-template-columns:minmax(0,1fr);gap:26px}}
@media (max-width:560px){.wf-exc-head p,.wf-exc-items p{font-size:16px}}
@media (prefers-reduced-motion:reduce){.wf-card,.wf-mk > *,.wf-cl > span,.wf-board .wf-cl > span,.wf-lane i,.v9 .wf-pk{transition:none}.wf-run.v9-rv,.wf-exc-items li.v9-rv{transition-delay:0s}}

/* ---------- AI where interpretation helps: the copy on the left; beside it, one incoming email above the enquiry record it
   feeds. While the demo is in view: each of three phrases in the email is marked in turn, a short soft coral line (the
   section's one coral part, and the only one on the page after the hero) runs once down the track labelled "AI reads the
   email", and the value settles into its field. Then the workflow's rules check the fields, and only then does the enquiry
   move on. It holds, eases back and runs again; off screen it resets to the empty start, so it always
   arrives empty and plays forward. With reduced motion it shows only the finished record. Beside the copy from 900px,
   narrower up to 1099px; stacked below 900px ---------- */
.wf-ai{border-top:1px solid #E4DFD9}
.wf-ai-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:48px 80px;align-items:center}
.wf-ai-copy{display:flex;flex-direction:column;gap:18px;max-width:600px}
.wf-ai-copy .v9-h2{margin:0 0 10px;text-wrap:balance}
.wf-ai-copy p{font-size:18px;line-height:1.65;color:#4f5565}
.wf-ai-copy p:nth-child(4){color:#232834}
.wf-demo{margin:0}
.wf-demo.v9-rv{transition-delay:.12s}
.wf-mail,.wf-rec{border:1px solid #E4DFD9;border-radius:20px;background:#fff}
.wf-mail{padding:20px 24px 22px}
.v9 .wf-mail-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 16px;margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid #E4DFD9;font-size:16px;line-height:1.4}
.wf-mail-h b{font-weight:700;color:#232834}
.wf-mail-h span{color:#4f5565}
.v9 .wf-mail-b{margin:0;font-size:16px;line-height:1.75;color:#3a3f4b}
.wf-ph{color:#232834;background-image:linear-gradient(#E4DFD9,#E4DFD9);background-repeat:no-repeat;background-position:0 50%;background-size:0% 100%;border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .5s cubic-bezier(.65,0,.35,1)}
.wf-demo.a1 .p1,.wf-demo.a4 .p2,.wf-demo.a7 .p3{background-size:100% 100%}
.wf-pass{display:flex;align-items:center;gap:14px;height:64px;padding-left:36px}
.wf-pass-tk{position:relative;flex:none;width:6px;height:100%;overflow:hidden}
.wf-pass-tk::before{content:"";position:absolute;left:2px;top:0;bottom:0;width:2px;border-radius:1px;background:#E4DFD9}
.wf-pass-tk i{position:absolute;left:1px;top:0;width:4px;height:26px;border-radius:2px;background:rgba(250,84,120,.55);transform:translateY(-100%)}
.v9 .wf-pass-l{font-size:15px;line-height:1.3;color:#6b7180}
.wf-rec{padding:18px 24px 20px}
.v9 .wf-rec-h{margin:0 0 6px;font-weight:700;font-size:16px;line-height:1.4;color:#232834}
.wf-fd{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:12px;align-items:center;min-height:50px;border-bottom:1px solid #E4DFD9;font-size:16px;line-height:1.35}
.wf-fd .k{color:#4f5565}
.wf-fd .v{position:relative;display:flex;align-items:center;min-height:24px}
.wf-fd .v i{position:absolute;left:0;top:50%;width:min(140px,80%);height:12px;margin-top:-6px;border-radius:6px;background:#E4DFD9;transition:opacity .3s cubic-bezier(.65,0,.35,1)}
.wf-fd .v b{font-weight:700;color:#232834;opacity:0;transform:translateY(4px);transition:opacity .45s cubic-bezier(.65,0,.35,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.wf-demo.a3 .f1 .v i,.wf-demo.a6 .f2 .v i,.wf-demo.a9 .f3 .v i{opacity:0}
.wf-demo.a3 .f1 .v b,.wf-demo.a6 .f2 .v b,.wf-demo.a9 .f3 .v b{opacity:1;transform:none}
.wf-ok{display:grid;grid-template-columns:20px minmax(0,1fr);gap:4px 12px;align-items:center;padding-top:16px}
.wf-ok .wf-mk > *{transition:opacity .3s cubic-bezier(.65,0,.35,1)}
.wf-ok .m-d{opacity:0}
.wf-ok .m-w{opacity:1}
.wf-demo.a10 .wf-ok .m-w{opacity:0}.wf-demo.a10 .wf-ok .m-d{opacity:1}
.wf-ok-l{position:relative;display:block;min-height:22px;font-size:16px;line-height:1.35}
.wf-ok-l > span{position:absolute;left:0;top:0;white-space:nowrap;transition:opacity .2s cubic-bezier(.65,0,.35,1)}
.wf-ok-l .o0{color:#6b7180}
.wf-ok-l .o1{color:#232834;opacity:0}
.wf-demo.a10 .wf-ok-l .o0{opacity:0}
.wf-demo.a10 .wf-ok-l .o1{opacity:1;transition:opacity .25s cubic-bezier(.65,0,.35,1) .2s}
.v9 .wf-ok-n{grid-column:2;font-weight:700;font-size:16px;line-height:1.35;color:#232834;opacity:0;transform:translateY(4px);transition:opacity .45s cubic-bezier(.65,0,.35,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.wf-demo.a11 .wf-ok-n{opacity:1;transform:none}
/* easing back before the next run: everything returns together */
.wf-demo.back *{transition-delay:0s !important}
/* ...but where two things share a place, the one returning waits for the other to leave */
.wf-demo.back .wf-ok-l .o0{transition:opacity .25s cubic-bezier(.65,0,.35,1) .2s !important}
.wf-demo.back .wf-fd .v i{transition:opacity .3s cubic-bezier(.65,0,.35,1) .4s !important}
@media (max-width:1279px){.wf-ai-grid{gap:48px 64px}}
@media (max-width:1099px){.wf-ai-grid{grid-template-columns:minmax(0,1fr) 380px;gap:48px}}
@media (max-width:899px){.wf-ai-grid{grid-template-columns:minmax(0,1fr)}.wf-ai-copy{max-width:640px}.wf-demo{max-width:640px}}
@media (max-width:560px){.wf-ai-copy p{font-size:17px}.v9 .wf-pass-l{font-size:16px}.wf-mail{padding:18px 18px 20px}.wf-rec{padding:16px 18px 18px}.wf-pass{padding-left:28px}.wf-fd{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}}
@media (prefers-reduced-motion:reduce){.wf-demo.v9-rv{transition-delay:0s}.wf-demo *{transition:none !important}}

/* ---------- start with a process worth improving: one editorial column, the four paragraphs in turn. Beside each, in the right
   margin on its first line, a short note names its stage (the notes are the section's one coral part). No steps, numbers or
   scores. Below 821px each note sits above its paragraph ---------- */
.wf-start{border-top:1px solid #E4DFD9}
.wf-start .v9-h2{max-width:760px;margin:0 0 40px;text-wrap:balance}
.wf-start-col{display:flex;flex-direction:column;gap:30px}
.wf-st{display:grid;grid-template-columns:minmax(0,760px) minmax(250px,1fr);grid-template-areas:"p n";column-gap:72px;align-items:baseline}
.v9 .wf-st > p{grid-area:p;margin:0;font-size:20px;line-height:1.6;color:#3a3f4b;text-wrap:pretty}
.v9 .wf-st > .wf-st-n{grid-area:n;display:block;white-space:nowrap;font-weight:700;font-size:15px;line-height:1.4;color:#d33d5c}
/* the leader is inline, so the note's first baseline is its text's and lines up with the paragraph's first line */
.wf-st-n::before{content:"";display:inline-block;width:20px;height:1px;margin-right:12px;vertical-align:middle;background:#C2C5CC}
@media (max-width:1099px){.wf-st{grid-template-columns:minmax(0,1fr) 220px;column-gap:48px}.wf-st-n::before{display:none}}
@media (max-width:820px){.wf-start .v9-h2{margin-bottom:28px}.wf-start-col{gap:26px}.wf-st{grid-template-columns:minmax(0,1fr);grid-template-areas:"n" "p";row-gap:8px}.v9 .wf-st > .wf-st-n{white-space:normal}.wf-st-n::before{display:inline-block}.v9 .wf-st > p{font-size:18px}}
@media (max-width:560px){.v9 .wf-st > p{font-size:17px}}

/* ---------- connected to the work around it: the four related services as linked cards around the workflow they support, each
   joined by a grey track to a small "Your workflow" node. Pointing at a card, or focusing it, darkens its track and plays its
   icon (the three shared service icons are the AI Chatbots page's; Custom Software's is this page's own). From 821px to 1099px
   the icons sit above the titles; below 821px the node and tracks go and the cards stack ---------- */
.wf-rel{border-top:1px solid #E4DFD9}
.wf-rel .v9-h2{max-width:760px;margin:0 0 34px;text-wrap:balance}
.wf-hub{--core:220px;--node:140px;--arm:24px;display:grid;grid-template-columns:minmax(0,1fr) var(--core) minmax(0,1fr);grid-auto-rows:1fr}
.v9 .wf-hub-c{display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:20px;align-content:start;margin:10px 0;padding:24px 28px 26px 24px;border:1px solid #E4DFD9;border-radius:20px;background:#fff;color:#232834;text-decoration:none;transition:border-color .3s cubic-bezier(.65,0,.35,1)}
.wf-hub-c.c1{grid-area:1/1}.wf-hub-c.c2{grid-area:1/3}.wf-hub-c.c3{grid-area:2/1}.wf-hub-c.c4{grid-area:2/3}
.wf-hub-c.v9-rv:nth-child(2){transition-delay:.06s}.wf-hub-c.v9-rv:nth-child(3){transition-delay:.12s}.wf-hub-c.v9-rv:nth-child(4){transition-delay:.18s}
.v9 .wf-hub-h{margin:4px 0 8px;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .wf-hub-d{margin:0;font-size:16px;line-height:1.6;color:#4f5565}
.v9 .wf-hub-c:focus-visible{outline:2px solid #232834;outline-offset:3px}
.wf-hub .cb-ic{--d:.25s}
.wf-hub-core{grid-area:1/2/3/3;position:relative}
.wf-hub-core.v9-rv{transition-delay:.1s}
.wf-hub-core i{position:absolute;width:var(--arm);height:calc(25% + 1px);border:0 solid #C2C5CC;transition:border-color .3s cubic-bezier(.65,0,.35,1)}
.wf-hub-core .s1{left:0;top:calc(25% - 1px);border-top-width:2px;border-right-width:2px;border-top-right-radius:12px}
.wf-hub-core .s3{left:0;top:50%;border-bottom-width:2px;border-right-width:2px;border-bottom-right-radius:12px}
.wf-hub-core .s2{right:0;top:calc(25% - 1px);border-top-width:2px;border-left-width:2px;border-top-left-radius:12px}
.wf-hub-core .s4{right:0;top:50%;border-bottom-width:2px;border-left-width:2px;border-bottom-left-radius:12px}
.wf-hub-core::before,.wf-hub-core::after{content:"";position:absolute;top:50%;width:calc((var(--core) - var(--node)) / 2 - var(--arm) + 2px);height:2px;margin-top:-1px;background:#C2C5CC}
.wf-hub-core::before{left:calc(var(--arm) - 2px)}
.wf-hub-core::after{right:calc(var(--arm) - 2px)}
.v9 .wf-hub-n{position:absolute;left:50%;top:50%;width:var(--node);transform:translate(-50%,-50%);padding:11px 8px;border-radius:999px;background:#232834;color:#fff;font-weight:700;font-size:15px;line-height:1.2;text-align:center;white-space:nowrap}
.wf-hub:has(.c1:focus-visible) .s1,.wf-hub:has(.c2:focus-visible) .s2,.wf-hub:has(.c3:focus-visible) .s3,.wf-hub:has(.c4:focus-visible) .s4{border-color:#232834}
@media (hover:hover){.v9 .wf-hub-c:hover{color:#232834;border-color:#C2C5CC}.wf-hub:has(.c1:hover) .s1,.wf-hub:has(.c2:hover) .s2,.wf-hub:has(.c3:hover) .s3,.wf-hub:has(.c4:hover) .s4{border-color:#232834}}
@media (max-width:1099px){.wf-hub{--core:196px;--node:132px;--arm:18px}.v9 .wf-hub-c{grid-template-columns:minmax(0,1fr);grid-template-rows:none;padding:22px 22px 24px}.wf-hub-c .cb-ic-box{grid-row:auto;margin:-6px 0 10px -4px}.v9 .wf-hub-n{font-size:14px}}
@media (max-width:820px){.wf-rel .v9-h2{margin-bottom:24px}.wf-hub{display:flex;flex-direction:column;gap:12px}.wf-hub-core{display:none}.v9 .wf-hub-c{margin:0;grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:16px;padding:20px 20px 22px 18px}.wf-hub-c .cb-ic-box{grid-row:1/3;margin:-6px 0 0 -4px}.v9 .wf-hub-h{font-size:18px}}
@media (prefers-reduced-motion:reduce){.wf-hub-c.v9-rv,.wf-hub-core.v9-rv{transition-delay:0s}.wf-hub-core i{transition:none}}

/* ---------- clients: a wall of twelve cells; one cell swaps its logo at a time (out, then in), the rest hold still ---------- */
.ai-clients{border-top:1px solid #E4DFD9}
.ai-clients-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 56px;flex-wrap:wrap;margin-bottom:44px}
.ai-clients-head .v9-sub{margin:0;max-width:420px;font-size:17px;line-height:1.6;color:#4f5565}
.ai-wall{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid #E4DFD9;border-left:1px solid #E4DFD9}
.ai-lg{position:relative;height:120px;border-right:1px solid #E4DFD9;border-bottom:1px solid #E4DFD9;overflow:hidden}
.ai-lg img{position:absolute;inset:0;margin:auto;display:block;width:min(170px,90%);height:auto;filter:grayscale(1) opacity(.62);opacity:0;transition:opacity .9s cubic-bezier(.65,0,.35,1),filter .3s ease}
.ai-lg img.on{opacity:1}
@media (hover:hover){.ai-lg:hover img{filter:none}}
@media (max-width:820px){.ai-wall{grid-template-columns:repeat(3,minmax(0,1fr))}.ai-lg{height:96px}.ai-clients-head{margin-bottom:32px}}
@media (prefers-reduced-motion:reduce){.ai-lg img{transition:none}}

/* ---------- closing: the centred email form, "Book a 20-minute call" sized to its label ---------- */
.wf-cta{border-top:1px solid #E4DFD9}
.wf-cta .v9-h2{text-wrap:balance}
/* the written alternative, a quiet line under the form */
.v9 .wf-alt{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 8px;margin:6px 0 0;font-size:17px;line-height:1.5;color:#4f5565}
.v9 .wf-alt .wf-go{margin-top:0}

/* ---------- the email form from 821px up: the field and the button share one row at the same width and height, 262px
   each ("Book a 20-minute call" needs 255px). The button keeps that width while sending, so nothing shifts; a closing
   form centres the pair ---------- */
@media (min-width:821px){
.v9 .em-talk .v9-hero-form{display:grid;grid-template-columns:repeat(2,262px);gap:10px;justify-content:start}
.v9.em-cta .em-talk .v9-hero-form{justify-content:center}
.v9 .em-talk .v9-hero-form .em-email,.v9 .em-talk .v9-hero-form.em-demo .v9-hero-go{width:100%;min-width:0}
.v9 .em-talk .v9-hero-form.em-demo .v9-hero-go{padding:0 16px}
}
/* ---------- the email form on phones and small tablets: the field and the button are always the same size. Up to 560px
   they stack at the full width; from 561px to 820px they share one row in equal halves, 560px at most. The button keeps
   its size while sending, so the pair never shifts, and the closing form stays centred ---------- */
@media (max-width:820px){
.v9 .em-talk{justify-items:stretch}
.v9.em-cta .em-talk{width:100%;max-width:560px}
.v9.em-cta .em-talk-done{justify-content:center}
.v9 .em-talk .v9-hero-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:560px}
.v9 .em-talk .v9-hero-form .em-email,.v9 .em-talk .v9-hero-form.em-demo .v9-hero-go{width:100%;min-width:0}
.v9 .em-talk .v9-hero-form.em-demo .v9-hero-go{padding:0 16px}
}
@media (max-width:560px){
.v9 .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr)}
}

/* ---------- the hero's "Book a call" button, sized exactly as the homepage's: only as wide as its label and arrow (169px), a
   fixed 172px, so it keeps that width while sending and nothing shifts. From 821px the field is 262px beside it; from 561px
   to 820px the field takes the rest of the row; up to 560px the pair stacks at full width. The rest of the form system is unchanged. ---------- */
@media (min-width:821px){.v9.wf-hero .em-talk .v9-hero-form{grid-template-columns:262px auto}}
@media (min-width:561px) and (max-width:820px){.v9.wf-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:561px){.v9.wf-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{width:172px;padding:0}}