/* AI Chatbots & Assistants page, built on the AI Services (v2) page format: its shell, hero, 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 are at the end. */

@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 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}
@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. "around your business" runs longer than the sister pages' headline lines, so the
   headline is sized to fill the same measure on two lines instead of wrapping to a third ---------- */
@media (min-width:1101px){.v9-hero.cb-hero h1{font-size:clamp(40px,3.6vw,48px)}}
@media (max-width:820px){.v9-hero.cb-hero h1{font-size:min(40px,calc((100vw - 48px) / 10))}}

/* ---------- the answer exists: a short statement. The headline across the top, then the two paragraphs side by side
   under a hairline: where answers sit today (quieter), and what a well-built assistant changes (in ink) ---------- */
.cb-gap{padding-top:72px}
.cb-gap .v9-h2{max-width:720px;text-wrap:balance}
.cb-gap-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 72px;margin-top:40px;padding-top:32px;border-top:1px solid #E4DFD9}
.cb-gap-cols p{max-width:520px;font-size:18px;line-height:1.65;color:#4f5565}
.cb-gap-cols p + p{color:#232834}
@media (max-width:820px){.cb-gap{padding-top:48px}.cb-gap-cols{grid-template-columns:minmax(0,1fr);margin-top:28px;padding-top:24px}}

/* ---------- where an assistant can help: four uses in a 2x2 split by hairlines. Icons are drawn in the illustration's
   language: ink outline over a white body, warm shade for depth, and one coral part that means something (the reply,
   the way that fits, the key to the account, the document found), which arrives once, in one direction, with the section ---------- */
.cb-help{border-top:1px solid #E4DFD9}
.cb-uses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.cb-uses li{--d:calc(var(--i,0) * 140ms + 380ms);display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:28px;row-gap:10px;align-items:start;padding:36px 48px 36px 0}
.cb-uses li:nth-child(even){padding-left:48px;padding-right:0;border-left:1px solid #E4DFD9}
.cb-uses li:nth-child(n+3){border-top:1px solid #E4DFD9;padding-bottom:4px}
.cb-uses li:nth-child(-n+2){padding-top:4px}
.cb-uses li:nth-child(2){--i:1}.cb-uses li:nth-child(3){--i:2}.cb-uses li:nth-child(4){--i:3}
.cb-uses h3{grid-column:2;margin-top:6px;font-weight:700;font-size:19px;line-height:1.3;letter-spacing:-.015em}
.cb-uses p{grid-column:2;max-width:440px;font-size:16px;line-height:1.6;color:#4f5565}
.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}
/* the hover Lottie sits exactly over the icon; its first frame is the icon, so the swap on first hover is invisible */
.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 .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)}
.cb-ic-reply .a{transform-origin:0 0;transform:translate(-5px,-5px)}
.cb-ic-sign .a{transform:translateX(-12px)}
.cb-ic-key .a{transform:translateX(-12px)}
.cb-ic-folder .a{transform:translateY(16px)}
.cb-ic-pen .a{transform:translate(6px,-6px)}
.cb-ic-plug .a{transform:translateY(12px)}
.cb-ic-stack .a{transform:translateY(-10px)}
.cb-ic-update .a{transform-origin:0 50%;transform:scaleX(0)}
.cb-ic-eval .a{transform:translate(8px,8px)}
.cb-ic-gauge .a{transform-box:view-box;transform-origin:48px 70px;transform:rotate(-70deg)}
.cb-ic .tk{stroke:#C2C5CC}
.v9-rv.in .cb-ic .a{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.cb-ic .a{opacity:1;transform:none;transition:none}}
@media (max-width:900px){
.cb-uses{grid-template-columns:minmax(0,1fr)}
.cb-uses li,.cb-uses li:nth-child(even),.cb-uses li:nth-child(n+3),.cb-uses li:nth-child(-n+2){grid-template-columns:56px minmax(0,1fr);column-gap:20px;padding:28px 0;border-left:0;border-top:1px solid #E4DFD9}
.cb-uses li:first-child{border-top:0;padding-top:0}
.cb-uses p{max-width:none}
.cb-uses .cb-ic-box{width:56px;height:56px;margin:-4px 0 0 -3px}
}

/* ---------- the conversation is only part of the system: the headline and intro on the left with one animation under them,
   and what sits behind the conversation as a ruled list on the right. The animation shows one row at a time, from behind the
   chat (tools/cb-system-scene.js); the list follows it, and picking a row plays that part and holds it ---------- */
.cb-sys{border-top:1px solid #E4DFD9}
.cb-sys-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 88px;align-items:start}
.cb-sys-head .v9-sub{margin:18px 0 0;max-width:460px;font-size:18px;line-height:1.6;color:#4f5565}
.cb-sys-fig{margin-top:36px}
.cb-sys-art{width:100%;aspect-ratio:1280/1130}
.cb-sys-art svg{display:block;fill:#000;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}
.cb-sys-list{border-bottom:1px solid #E4DFD9}
.cb-sys-list li{position:relative;padding:26px 0 28px;border-top:1px solid #E4DFD9}
.cb-sys-list li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:#FA5478;opacity:0;transition:opacity .45s cubic-bezier(.65,0,.35,1)}
.cb-sys-list li.on::before{opacity:1}
.cb-sys-list h3{margin:0 0 8px;font-weight:700;font-size:19px;line-height:1.3;letter-spacing:-.015em}
.cb-sys-btn{appearance:none;margin:0;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;color:inherit;text-align:left;cursor:pointer}
.cb-sys-btn::after{content:"";position:absolute;inset:0}
.cb-sys-btn:focus-visible{outline:0}
.cb-sys-btn:focus-visible::after{outline:2px solid #232834;outline-offset:2px;border-radius:6px}
.cb-sys-list p{font-size:16px;line-height:1.6;color:#6b7180;transition:color .45s cubic-bezier(.65,0,.35,1)}
.cb-sys-list li.on p{color:#3a3f4b}
@media (hover:hover){.cb-sys-list li:not(.on):hover p{color:#4f5565}}
@media (prefers-reduced-motion:reduce){.cb-sys-list li::before,.cb-sys-list p{transition:none}}
@media (max-width:1100px){.cb-sys-grid{grid-template-columns:minmax(0,1fr)}.cb-sys-head .v9-sub{max-width:640px}.cb-sys-fig{max-width:620px}}

/* ---------- built around real conversations: four steps along one grey track. As the section arrives, a short soft coral
   line flows once from the first step to the last and is gone; each step's marker warms as the line reaches it, and holds.
   The line moves at a steady speed, so the head passes marker i at i x 0.3 of its run. Stacked below 1100px ---------- */
.cb-build{border-top:1px solid #E4DFD9}
.cb-steps{--gap:40px;--base:.45s;--dur:2.2s;--beat:.66s;position:relative}
.cb-steps ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 var(--gap)}
.cb-steps li{position:relative;display:flex;flex-direction:column;gap:10px}
.cb-steps li:nth-child(2){--i:1}.cb-steps li:nth-child(3){--i:2}.cb-steps li:nth-child(4){--i:3}
.cb-step-n{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:14px;border:1.5px solid #232834;border-radius:50%;background:#fff;font-weight:700;font-size:14px;line-height:1;letter-spacing:.02em;color:#232834;transition:background-color .5s cubic-bezier(.65,0,.35,1),border-color .5s cubic-bezier(.65,0,.35,1),color .5s cubic-bezier(.65,0,.35,1);transition-delay:calc(var(--base) + var(--i,0) * var(--beat))}
.cb-steps.in .cb-step-n{background:#FA5478;border-color:#C43A5C;color:#fff}
.cb-steps h3{font-weight:700;font-size:19px;line-height:1.3;letter-spacing:-.015em}
.cb-steps p{font-size:16px;line-height:1.6;color:#4f5565}
.cb-steps-track{position:absolute;z-index:0;top:19px;left:22px;right:calc((100% - 3 * var(--gap)) / 4 - 22px);height:6px;overflow:hidden}
.cb-steps-track::before{content:"";position:absolute;left:0;right:0;top:2px;height:2px;background:#E4DFD9}
.cb-steps-flow{position:absolute;inset:0;transform:translateX(-100%)}
.cb-steps-flow i{position:absolute;right:0;top:1px;width:96px;height:4px;border-radius:2px;background:rgba(250,84,120,.55)}
.cb-steps.in .cb-steps-flow{animation:cbFlow var(--dur) linear var(--base) 1 both}
@keyframes cbFlow{from{transform:translateX(-100%)}to{transform:translateX(96px)}}
@media (prefers-reduced-motion:reduce){.cb-step-n{transition:none}.cb-steps.in .cb-steps-flow{animation:none}}

/* ---------- useful AI needs ongoing attention: the page's one bone band. The headline on the left; on the right the two
   paragraphs, the caution quieter and the answer to it in ink, as in the opening statement ---------- */
.cb-care-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 32px;align-items:start}
.cb-care .v9-h2{max-width:460px}
.cb-care-body{display:flex;flex-direction:column;gap:20px;max-width:656px;padding:6px 0 4px 56px;border-left:1px solid #E4DFD9}
.cb-care-body p{font-size:18px;line-height:1.65;color:#4f5565}
.cb-care-body p + p{color:#232834}
.cb-care-body b{font-weight:700;color:#232834}
/* the hero's marker, on the one word this band is about: it sweeps in once as the headline arrives, not at page load */
.cb-care .v9-hl::before{animation:none;transform:rotate(-1deg) scaleX(0);transition:transform .9s cubic-bezier(.65,0,.35,1) .45s}
.cb-care .v9-rv.in .v9-hl::before{transform:rotate(-1deg) scaleX(1)}
@media (prefers-reduced-motion:reduce){.cb-care .v9-hl::before{transform:rotate(-1deg);transition:none}}
@media (max-width:900px){.cb-care-grid{grid-template-columns:minmax(0,1fr)}.cb-care-body{padding:0;border-left:0}}

/* ---------- when the conversation needs to go further: the three related services as full-width link rows. Each icon
   rests just before its action and completes it on hover (the pencil writes on, the plug goes in, the stray layer slides
   into line); the name warms and the arrow moves 4px on. The icons arrive once with the list, like the uses above ---------- */
.cb-links{border-bottom:1px solid #E4DFD9}
.cb-links li{--d:calc(var(--i,0) * 140ms + 380ms);border-top:1px solid #E4DFD9}
.cb-links li:nth-child(2){--i:1}.cb-links li:nth-child(3){--i:2}
.v9 a.cb-link,.v9 a.cb-link:hover{display:grid;grid-template-columns:72px minmax(0,300px) minmax(0,1fr) 24px;align-items:center;column-gap:32px;padding:24px 0;color:#232834}
.cb-link .cb-ic-box{grid-row:auto;margin:-4px 0 -4px -4px}
.cb-link b{font-weight:700;font-size:21px;line-height:1.3;letter-spacing:-.015em;transition:color .3s cubic-bezier(.65,0,.35,1)}
.cb-link-d{max-width:560px;font-size:16px;line-height:1.6;color:#4f5565}
.v9 .cb-link svg.cb-arr{width:22px;height:22px;stroke:#232834;stroke-width:2;fill:none;transition:transform .3s cubic-bezier(.2,.7,.2,1),stroke .3s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 a.cb-link:hover b{color:#d33d5c}.v9 a.cb-link:hover svg.cb-arr{transform:translateX(4px);stroke:#d33d5c}}
.v9 a.cb-link:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:6px}
@media (prefers-reduced-motion:reduce){.cb-link b,.v9 .cb-link svg.cb-arr{transition:none}}
@media (max-width:820px){
.v9 a.cb-link,.v9 a.cb-link:hover{grid-template-columns:56px minmax(0,1fr) 22px;column-gap:20px;row-gap:6px;align-items:start;padding:22px 0}
.cb-link .cb-ic-box{grid-row:1/3;margin:-4px 0 0 -3px}
.cb-link b{grid-column:2;font-size:19px}
.cb-link-d{grid-column:2;max-width:none}
.v9 .cb-link svg.cb-arr{grid-column:3;grid-row:1;margin-top:3px}
}
@media (max-width:1100px){
.cb-steps ol{grid-template-columns:minmax(0,1fr)}
.cb-steps-track{display:none}
.cb-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:24px;row-gap:8px;padding-bottom:36px}
.cb-steps li:last-child{padding-bottom:0}
.cb-steps li:not(:last-child)::before{content:"";position:absolute;left:21px;top:44px;bottom:0;width:2px;background:#E4DFD9}
.cb-step-n{grid-row:1/3;margin:0}
.cb-steps h3{padding-top:10px}
.cb-steps p{max-width:640px}
}

/* ---------- 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 template's centred email form. The field and the button are sized by the shared email form rules,
   the same as on every page ---------- */
.cb-cta .v9-h2{text-wrap:balance}
/* ---------- 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)}
}

/* ================= SYNCED 2 OCTOBER 2026: the rest of the shared email form, copied as it is from page-web-development-v2.css ================= */
/* ---------- 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 hero's button is sized exactly as the homepage's: a fixed 172px from 561px, only as wide as its label and arrow, so
   it keeps that width while sending and nothing shifts. The field is 262px beside it from 821px and takes the rest of the
   row from 561px to 820px; on phones the pair stacks at full width */
@media (min-width:821px){.v9.cb-hero .em-talk .v9-hero-form{grid-template-columns:262px auto}}
@media (min-width:561px) and (max-width:820px){.v9.cb-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:561px){.v9.cb-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{width:172px;padding:0}}

/* ---------- tap areas and the legacy menu, as on every page: the header and footer logos get 44px tap areas with padding
   cancelled by margin, so nothing moves; the site's old hidden menu is held to no width until its script marks it loaded ---------- */
body.v9-page .header-wide.wb-hd .header .logo{padding:7px 0;margin:-7px 0}
body.v9-page .wb-ft .wb-ft-logo{padding:8px 0;margin:-8px 0}
body.v9-page #main_menu:not(.loaded){left:0;right:auto;width:0;max-width:0;overflow:hidden}

/* ================= THE PHONE TYPE SCALE: synced 2 October 2026 from the homepage, by tools/phone-type.js. Up to 560px: h1 34px, section headings 26px, titles 18 to 20px, body 16px; nothing gets larger ================= */
@media (max-width:560px){
.v9-h2{font-size:26px;line-height:1.18;letter-spacing:-.025em}
.v9-head .v9-sub,.em-center .v9-sub,.cb-gap-cols p,.cb-sys-head .v9-sub,.cb-care-body p,.ai-clients-head .v9-sub{font-size:16px}
.v9-hero h1{font-size:min(34px,clamp(40px,4.6vw,64px));line-height:1.12}
.v9-hero .v9-lead,.cb-link b{font-size:17px}
.v9-hero.cb-hero h1{font-size:min(34px,min(40px,calc((100vw - 48px) / 10)));line-height:1.12}
.cb-uses h3,.cb-sys-list h3,.cb-steps h3{font-size:18px}
}