/* AI Agents page, built on the AI Chatbots & Assistants page: its shell, hero base, buttons, email form, reveal 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 */
.ag-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: "AI agents that move" is the longer line
   (9.2em in Sailec Bold at -.03em), so each size keeps it inside the copy column with room to spare. From 1101px the
   copy column is wide enough for the email field and the button side by side at the same width ---------- */
.v9-hero.ag-hero h1{font-size:min(52px,calc((100vw - 44px) / 9.8))}
@media (min-width:1101px){
.v9-hero.ag-hero .v9-hero-grid{grid-template-columns:minmax(540px,5.4fr) minmax(0,6.6fr);gap:48px}
.v9-hero.ag-hero h1{font-size:clamp(44px,4.2vw,56px)}
.v9-hero.ag-hero .v9-lead{max-width:520px}
}

/* ---------- from a request to an approved action: the opening statement. How the work is done today is set large as the
   lead; beside it, on the lead's first baseline, what an agent can do (quieter) and what we engineer around it (in ink).
   "to an approved" is kept together, so the headline breaks after "request" ---------- */
.ag-open{padding-top:72px}
.ag-open .v9-h2{max-width:760px;text-wrap:balance}
.ag-open-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:28px 72px;margin-top:40px;align-items:baseline}
.ag-open-lead{max-width:640px;font-size:clamp(21px,2.2vw,28px);line-height:1.45;letter-spacing:-.012em;color:#3a3f4b}
.ag-open-side{display:flex;flex-direction:column;gap:20px;max-width:480px}
.ag-open-side p{font-size:18px;line-height:1.65;color:#4f5565}
.ag-open-side p + p{color:#232834}
.ag-open-side.v9-rv{transition-delay:.12s}
@media (max-width:900px){.ag-open-grid{grid-template-columns:minmax(0,1fr);margin-top:28px}.ag-open-side{max-width:640px}}
@media (max-width:820px){.ag-open{padding-top:48px}}
@media (prefers-reduced-motion:reduce){.ag-open-side.v9-rv{transition-delay:0s}}
/* the section's one marked line: the first sentence of the lead, the observation the section rests on. A blush marker
   sweeps under it once as it arrives and holds, line by line when it wraps */
.ag-mark{color:#232834;background-image:linear-gradient(#FDE0E6,#FDE0E6);background-repeat:no-repeat;background-position:0 86%;background-size:0% .56em;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 1.2s cubic-bezier(.65,0,.35,1) .4s}
.v9-rv.in .ag-mark{background-size:100% .56em}
@media (prefers-reduced-motion:reduce){.ag-mark{background-size:100% .56em;transition: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}}

/* ---------- where an agent can help: four work cards. Each traces the work from the icon where it arrives, along a short grey
   track, to the icon where it lands. As the section arrives, card by card: the first icon's coral part settles, a short soft
   coral line runs the track once and is gone, and the second icon's coral part lands. With a mouse, pointing at a card plays
   it again: the first icon acts, the line runs, and the second icon completes its action as the line reaches it; leaving plays
   the icons back. Four in a row from 1200px, two by two down to 641px, then one column ---------- */
.ag-help{border-top:1px solid #E4DFD9}
.ag-uses{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.ag-use{--f:calc(var(--i,0) * 260ms + 560ms);display:flex;flex-direction:column;padding:28px 26px 30px;border:1px solid #E4DFD9;border-radius:20px;background:#fff;transition:border-color .3s cubic-bezier(.65,0,.35,1)}
.ag-use:nth-child(2){--i:1}.ag-use:nth-child(3){--i:2}.ag-use:nth-child(4){--i:3}
@media (hover:hover){.ag-use:hover{border-color:#C2C5CC}}
.ag-trace{display:flex;align-items:center;margin:0 0 22px}
.ag-trace .cb-ic-box{grid-row:auto;flex:none;width:64px;height:64px;margin:0}
.ag-from{--d:calc(var(--i,0) * 260ms + 380ms)}
.ag-to{--d:calc(var(--i,0) * 260ms + 1040ms)}
.ag-track{position:relative;flex:1 1 auto;min-width:32px;height:6px;margin:0 8px;overflow:hidden}
.ag-track::before{content:"";position:absolute;left:0;right:0;top:2px;height:2px;border-radius:1px;background:#E4DFD9}
.ag-flow{position:absolute;inset:0;transform:translateX(-100%)}
.ag-flow i{position:absolute;right:0;top:1px;width:40px;height:4px;border-radius:2px;background:rgba(250,84,120,.55)}
.ag-uses.in .ag-flow{animation:agFlow .75s cubic-bezier(.65,0,.35,1) var(--f) 1 both}
@keyframes agFlow{from{transform:translateX(-100%)}to{transform:translateX(40px)}}
.ag-use h3{margin:0 0 10px;font-weight:700;font-size:19px;line-height:1.3;letter-spacing:-.015em;text-wrap:balance}
.ag-use p{font-size:16px;line-height:1.6;color:#4f5565}
.ag-ic-mail .a{transform:translateY(10px)}
.ag-ic-assign .a{transform:translateX(10px)}
.ag-ic-ticket .a{transform:translateX(-10px)}
.ag-ic-toggle .a{transform-origin:50% 50%;transform:scale(.4)}
.ag-ic-docs .a{transform:translate(6px,-6px)}
.ag-ic-check .a{transform-origin:50% 50%;transform:scale(.4)}
.ag-ic-lens .a{transform:translate(-8px,8px)}
.ag-ic-stage .a{transform:translateX(-26px)}
@media (prefers-reduced-motion:reduce){.ag-use{transition:none}.ag-uses.in .ag-flow{animation:none}}
@media (max-width:1199px){.ag-uses{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ag-uses{grid-template-columns:minmax(0,1fr);gap:16px}.ag-use{padding:24px 22px 26px}}

/* ---------- choose the right level of automation: the copy on the left; on the right, two small drawings of the same work.
   Workflow automation is one fixed path. With an agent, the path reaches one choice point (the section's one coral part)
   between permitted actions, and only the chosen one continues. Each is drawn once as the section arrives, at one steady
   pace, the fixed path first. Stacked below 1100px; the drawings share a row down to 561px ---------- */
.ag-auto{border-top:1px solid #E4DFD9}
.ag-auto-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px 80px;align-items:center}
.ag-auto-copy{display:flex;flex-direction:column;gap:18px;max-width:520px}
.ag-auto-copy .v9-h2{margin-bottom:10px;text-wrap:balance}
.ag-auto-copy p{font-size:18px;line-height:1.65;color:#4f5565}
.ag-auto-copy p:last-child{color:#232834}
.ag-auto-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 40px}
.ag-auto-figs.v9-rv{transition-delay:.12s}
.ag-fig{margin:0;padding-top:18px;border-top:1px solid #E4DFD9}
.ag-fig figcaption{font-weight:700;font-size:16px;line-height:1.35;color:#232834}
.v9 .ag-fig svg{width:100%;height:auto;aspect-ratio:320/170;margin-top:14px;overflow:visible;stroke-linecap:round;stroke-linejoin:round}
.ag-fig .ln{fill:none;stroke:#C2C5CC;stroke-width:2.25;stroke-dasharray:1;stroke-dashoffset:1}
.ag-fig .nd{fill:#fff;stroke:#232834;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.6)}
.ag-fig .nd.ag-st{fill:#232834;stroke:none}
.ag-fig .nd.off{stroke:#C2C5CC}
.ag-fig .ck{fill:none;stroke:#232834;stroke-width:2.25}
.ag-auto-figs.in .ln{stroke-dashoffset:0;transition:stroke-dashoffset var(--ld) linear var(--lt)}
.ag-auto-figs.in .nd{opacity:1;transform:none;transition:opacity .35s cubic-bezier(.65,0,.35,1) var(--nt),transform .45s cubic-bezier(.2,.7,.2,1) var(--nt),fill .5s cubic-bezier(.65,0,.35,1) calc(var(--nt) + .3s),stroke .5s cubic-bezier(.65,0,.35,1) calc(var(--nt) + .3s)}
.ag-auto-figs.in .nd.cp{fill:#FA5478;stroke:#C43A5C}
.ag-fig .la{--ld:.9s;--lt:.3s}
.ag-fig .a0{--nt:.3s}.ag-fig .a1{--nt:.56s}.ag-fig .a2{--nt:.84s}.ag-fig .a3{--nt:1.12s}
.ag-fig .lb1{--ld:.39s;--lt:1.2s}.ag-fig .lb2{--ld:.26s;--lt:1.8s}.ag-fig .lb3{--ld:.24s;--lt:2.14s}
.ag-fig .b0{--nt:1.2s}.ag-fig .b1{--nt:1.42s}.ag-fig .cp{--nt:1.56s}.ag-fig .b2{--nt:2.02s}.ag-fig .b3{--nt:2.34s}
@media (prefers-reduced-motion:reduce){.ag-fig .ln{stroke-dashoffset:0}.ag-fig .nd{opacity:1;transform:none}.ag-fig .nd.cp{fill:#FA5478;stroke:#C43A5C}.ag-auto-figs.in .ln,.ag-auto-figs.in .nd{transition:none}.ag-auto-figs.v9-rv{transition-delay:0s}}
@media (max-width:1100px){.ag-auto-grid{grid-template-columns:minmax(0,1fr)}.ag-auto-copy{max-width:640px}}
@media (max-width:560px){.ag-auto-figs{grid-template-columns:minmax(0,1fr)}}

/* ---------- clear boundaries are part of the build: the four controls as a plain spec sheet. Each row gives the control,
   what we build, and one rule as it would be set in practice; the rule's arrow is the section's one coral part. Three
   columns from 1100px; two below that, with the rule under the control; one column on phones ---------- */
.ag-rules{border-top:1px solid #E4DFD9}
.ag-rules-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px 80px;align-items:end;margin-bottom:48px}
.ag-rules-head .v9-h2{margin:0;text-wrap:balance}
.ag-rules-head p{margin:0;max-width:600px;font-size:18px;line-height:1.65;color:#3a3f4b}
.ag-rules-cols,.ag-rule{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3.4fr);gap:12px 48px}
.ag-rules-cols{padding:0 0 12px;border-bottom:1px solid #E4DFD9;font-weight:700;font-size:12px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:#6b7180}
.v9 .ag-rules-list{list-style:none;margin:0;padding:0}
.ag-rule{align-items:start;padding:30px 0;border-bottom:1px solid #E4DFD9}
.ag-rule h3{margin:0;font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.ag-rule p{margin:0;font-size:17px;line-height:1.65;color:#4f5565}
.v9 .ag-rule .ag-rule-eg{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;justify-self:start;padding:12px 16px;border-radius:12px;background:#F1EEEA;font-size:16px;line-height:1.4;color:#3a3f4b}
.ag-rule-eg b{font-weight:700;color:#232834}
.v9 .ag-rule-eg svg{width:14px;height:14px;flex:none;fill:none;stroke:#d33d5c;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ag-rule.v9-rv:nth-child(2){transition-delay:.08s}.ag-rule.v9-rv:nth-child(3){transition-delay:.16s}.ag-rule.v9-rv:nth-child(4){transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.ag-rule.v9-rv{transition-delay:0s}}
@media (max-width:1100px){.ag-rules-head{grid-template-columns:minmax(0,1fr);margin-bottom:32px}}
@media (max-width:1099px){.ag-rules-cols{display:none}.v9 .ag-rules-list{border-top:1px solid #E4DFD9}.ag-rule{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:14px 40px}.ag-rule p:not(.ag-rule-eg){grid-column:2;grid-row:1 / span 2}.v9 .ag-rule .ag-rule-eg{grid-column:1;grid-row:2}}
@media (max-width:699px){.ag-rule{grid-template-columns:minmax(0,1fr);padding:24px 0}.ag-rule p:not(.ag-rule-eg),.v9 .ag-rule .ag-rule-eg{grid-column:auto;grid-row:auto}.ag-rule h3{font-size:20px}.ag-rule p{font-size:16px}}

/* ---------- start with one useful task: the text as one readable column; beside it, the four measures it names pulled
   out as a scorecard, under the one it looks beyond ("sounds convincing"), struck through in the section's one coral.
   Stacked below 1000px ---------- */
.ag-start{border-top:1px solid #E4DFD9}
.ag-start-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px 80px;align-items:start}
.ag-start-copy{display:flex;flex-direction:column;gap:18px;max-width:640px}
.ag-start-copy .v9-h2{margin:0 0 10px;text-wrap:balance}
.ag-start-copy p{margin:0;font-size:18px;line-height:1.65;color:#4f5565}
.ag-start-copy p:last-child{color:#232834}
.ag-score{padding:28px 30px 12px;border:1px solid #E4DFD9;border-radius:20px;background:#fff}
.ag-score.v9-rv{transition-delay:.12s}
.v9 .ag-score-k{margin:0 0 18px;font-weight:700;font-size:12px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:#6b7180}
.v9 .ag-score-no{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin:0;padding:0 0 16px;border-bottom:1px solid #E4DFD9;font-size:16px;line-height:1.5}
.ag-score-no s{font-weight:700;font-size:18px;color:#6b7180;text-decoration:line-through;text-decoration-color:#FA5478;text-decoration-thickness:2px}
.ag-score-no span{color:#6b7180}
.ag-score dl{margin:0}
.ag-score dl div{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid #E4DFD9}
.ag-score dl div:last-child{border-bottom:0}
.ag-score dt{font-weight:700;font-size:18px;line-height:1.35;color:#232834}
.ag-score dd{margin:0;font-size:16px;line-height:1.5;color:#4f5565}
@media (max-width:999px){.ag-start-grid{grid-template-columns:minmax(0,1fr)}.ag-score{max-width:560px}}
@media (max-width:560px){.ag-score{padding:22px 20px 6px}}
@media (prefers-reduced-motion:reduce){.ag-score.v9-rv{transition-delay:0s}}

/* ---------- built to keep working as your business changes: the three things that change, set large, one after another
   under hairlines; "changes" in the headline is the section's one coral part. Then what we plan for, in two columns
   from 821px ---------- */
.ag-keep{border-top:1px solid #E4DFD9}
.ag-keep .v9-h2{max-width:760px;margin:0 0 36px;text-wrap:balance}
.ag-keep-w{color:#d33d5c}
.v9 .ag-keep-list{list-style:none;margin:0;padding:0;border-top:1px solid #E4DFD9}
.v9 .ag-keep-list li{margin:0;padding:18px 0 20px;border-bottom:1px solid #E4DFD9;font-weight:700;font-size:clamp(30px,4.2vw,58px);line-height:1.12;letter-spacing:-.03em;color:#232834;text-wrap:balance}
.ag-keep-list li.v9-rv:nth-child(2){transition-delay:.15s}.ag-keep-list li.v9-rv:nth-child(3){transition-delay:.3s}
.ag-keep-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 64px;max-width:1040px;margin-top:40px}
.ag-keep-cols p{margin:0;font-size:18px;line-height:1.65;color:#4f5565}
.ag-keep-cols p + p{color:#232834}
@media (max-width:820px){.ag-keep-cols{grid-template-columns:minmax(0,1fr);margin-top:28px}.ag-keep .v9-h2{margin-bottom:24px}.v9 .ag-keep-list li{padding:14px 0 16px}}
@media (prefers-reduced-motion:reduce){.ag-keep-list li.v9-rv{transition-delay:0s}}

/* ---------- connected to the rest of your software: the four related services on one shared rail, each a whole-block link
   starting from its own node. The arrows are the section's one coral part; pointing or focusing moves one on and darkens
   its node. Four across from 1100px, two by two down to 641px, then one column ---------- */
.ag-conn{border-top:1px solid #E4DFD9}
.ag-conn .v9-h2{max-width:760px;margin:0 0 40px;text-wrap:balance}
.v9 .ag-links{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 40px;margin:0;padding:0}
.v9 .ag-links li{margin:0;padding:0}
.v9 a.ag-link{position:relative;display:block;height:100%;padding:28px 0 8px;border-top:1px solid #E4DFD9;color:inherit;text-decoration:none;border-radius:2px}
.ag-link::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:#C2C5CC;transition:background-color .3s cubic-bezier(.65,0,.35,1)}
.ag-link h3{display:flex;align-items:baseline;gap:10px;margin:0 0 10px;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.015em;color:#232834}
.ag-link h3 span{text-wrap:balance}
.v9 .ag-link svg{flex:none;width:16px;height:16px;position:relative;top:2px;fill:none;stroke:#d33d5c;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.65,0,.35,1)}
.ag-link p{margin:0;font-size:16px;line-height:1.6;color:#4f5565}
.v9 a.ag-link:focus-visible{outline:2px solid #232834;outline-offset:6px}
.ag-link:focus-visible::before{background:#232834}
.ag-link:focus-visible svg{transform:translateX(4px)}
@media (hover:hover){.ag-link:hover::before{background:#232834}.ag-link:hover svg{transform:translateX(4px)}}
@media (max-width:1099px){.v9 .ag-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 40px}}
@media (max-width:640px){.v9 .ag-links{grid-template-columns:minmax(0,1fr);gap:4px}.ag-conn .v9-h2{margin-bottom:28px}.v9 a.ag-link{padding:24px 0 20px}}
@media (prefers-reduced-motion:reduce){.ag-link svg,.ag-link::before{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 ---------- */
.ag-cta{border-top:1px solid #E4DFD9}
.ag-cta .v9-h2{text-wrap:balance}

/* ---------- 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.ag-hero .em-talk .v9-hero-form{grid-template-columns:262px auto}}
@media (min-width:561px) and (max-width:820px){.v9.ag-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:561px){.v9.ag-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{width:172px;padding:0}}