/* Systems & API Integration, built from Web & App Development (page-web-development-v2.css): its shell, header strip, 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, site-header.css, site-footer.css); everything here scopes to .v9 or
   body.v9-page. Page-specific rules (si-*) 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:14px;padding-bottom:14px}
/* 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:-3px;bottom:-3px;left:-11px;right:0}
/* header, right side, as the reference reads: a quiet help link, then the icons (the menu's search and the menu), then the
   call button last, at the edge. The logo side is the site's own, set smaller. The row runs the full width of the window,
   and is a flex line centred on the logo; the menu's injected search button (.wbm_search) and the menu button drop their
   float offsets here. The link goes under 700px and the button under 521px, where the hero's form sits just below */
body.v9-page .header .logo{width:118px;max-width:none}
@media (max-width:765px){body.v9-page .header .logo{width:108px}}
body.v9-page .header{display:flex;align-items:center;max-width:none}
@media (min-width:1025px){body.v9-page .header{padding-left:40px!important;padding-right:40px!important}}
@media (min-width:1280px){body.v9-page .header{padding-left:56px!important;padding-right:56px!important}}
body.v9-page .header::after,body.v9-page .header-right::after{display:none}
body.v9-page .header-right{float:none;display:flex;align-items:center;gap:6px;margin-left:auto;padding:0}
body.v9-page .hp-hd{order:1;display:flex;align-items:center;gap:14px;margin-right:14px}
body.v9-page .hp-hd-sep{display:block;width:1px;height:14px;background:#C2C5CC}
body.v9-page .hp-hd-l{display:inline-flex;align-items:center;min-height:44px;font-family:'Sailec',sans-serif;font-weight:500;font-size:13.5px;line-height:1.2;color:#4f5565;text-decoration:underline;text-decoration-color:#C2C5CC;text-decoration-thickness:1px;text-underline-offset:4px;transition:color .2s cubic-bezier(.65,0,.35,1),text-decoration-color .2s cubic-bezier(.65,0,.35,1)}
body.v9-page .hp-hd-l:hover,body.v9-page .hp-hd-l:focus-visible{color:#232834;text-decoration-color:#232834}
/* the menu's injected search is not shown in this header: search stays inside the menu itself */
body.v9-page .header .wbm_search{display:none}
body.v9-page .wbm_search{order:2;float:none;width:44px;height:44px;margin:0;color:#4f5565;transition:color .2s cubic-bezier(.65,0,.35,1)}
body.v9-page .wbm_search svg{top:50%;width:20px;height:20px;transform:translate(-50%,-50%);stroke-width:1.9}
body.v9-page .wbm_search:hover{color:#232834}
body.v9-page .hp-hd-cta{order:4;height:40px;margin-left:18px;padding:0 16px 0 20px;gap:4px;font-family:'Sailec',sans-serif;font-size:14.5px}
body.v9-page a.hp-hd-cta,body.v9-page a.hp-hd-cta:hover,body.v9-page a.hp-hd-cta:visited{color:#fff;text-decoration:none}
body.v9-page .hp-hd-cta::after{content:"";position:absolute;left:0;right:0;top:-2px;bottom:-2px}
body.v9-page .hp-hd-cta svg.arr{display:block;flex:none;width:14px;height:14px;stroke:currentColor;stroke-width:2.4;fill:none;transition:transform 150ms cubic-bezier(.4,0,.2,1)}
@media (hover:hover){body.v9-page .hp-hd-cta:hover svg.arr{transform:translateX(2px)}}
body.v9-page .menu_trigger{order:3;float:none;height:38px;margin:0 0 0 8px}
/* the menu's three bars are drawn a little smaller here, scaled about their own centre so they stay level with the row */
body.v9-page .menu_trigger .slicknav_icon{transform-origin:100% 19px;scale:.82}
body.v9-page .hp-hd-l:focus-visible,body.v9-page .wbm_search:focus-visible,body.v9-page .hp-hd-cta:focus-visible,body.v9-page .menu_trigger:focus-visible{outline:2px solid #232834;outline-offset:3px}
@media (max-width:699px){body.v9-page .hp-hd{display:none}}
@media (max-width:520px){body.v9-page .hp-hd-cta{display:none}}
@media (prefers-reduced-motion:reduce){body.v9-page .hp-hd-cta svg.arr{transition:none}}
/* the dark menu marks the current page by file name only in its page list, which doesn't include this page: markMenu() marks
   its Build something new route and, inside it, its Systems & API Integration tile, in coral with the menu's own small dot */
body.v9-page #wbm .rt[aria-current="page"] b,body.v9-page #wbm .tile[aria-current="page"] b{color:#FA5478}
body.v9-page #wbm .rt[aria-current="page"] b::after,body.v9-page #wbm .tile[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}
/* the page runs a little wider than the sister pages (1360px, not 1240px), but narrower than the header, which spans the
   window: from 1280px the side space is 56px, so on wider screens the content sits inset from the logo and the call button */
.v9-wrap{max-width:1360px;margin:0 auto;padding:0 40px;position:relative}
@media (min-width:1280px){.v9-wrap{padding:0 56px}}
.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 files by laying the next over the last: each pass has its own box, stacked in one place */
.si-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}
}

/* ---------- text links: ink with a tint underline that darkens on hover, and an arrow that steps forward ---------- */
.v9 .si-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}
.si-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)}
.si-go-a{display:inline-block;transition:transform .3s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .si-go:hover{color:#232834}.si-go:hover .si-go-l{text-decoration-color:#232834}.si-go:hover .si-go-a{transform:translateX(3px)}}
.v9 .si-go:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.si-go-a{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}}

/* ---------- 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}}
/* this page's heading and line sit centred over the wall; the heading is balanced so no line holds one word alone */
.si-clients-head{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:44px;text-align:center}
.si-clients-head .v9-h2{margin:0;text-align:center;text-wrap:balance}
.si-clients-head .v9-sub{margin:0;max-width:520px;font-size:18px;line-height:1.6;color:#4f5565;text-align:center;text-wrap:balance}
@media (max-width:820px){.si-clients-head{margin-bottom:32px}}
@media (max-width:560px){.si-clients-head .v9-sub{font-size:17px}}

/* ---------- 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)}
}


/* ================= SYSTEMS & API INTEGRATION (this page's own) ================= */

/* ---------- this page's hero. The eyebrow, then a headline that holds two lines at every width. Each option is sized from
   its own longer line, measured in Sailec Bold at -.03em (A "Your systems," 6.33em; B "working as one" 6.92em; C "on the
   same page" 8.12em; D "where it's needed" 8.12em; E "works together" 7.01em): up to 1100px it is set from the viewport,
   so the longer line takes 93% of the column at most (56px at the largest); from 1101px, where the copy column is 560px,
   every option runs from 52px to 58px (C and D, the longest, then take 84% of the column). The form is sized as CLAUDE.md
   sets it for heroes: "Book a call" at 172px beside a 262px field, stacked at full width on phones ---------- */
.v9-hero.si-hero h1.si-h-a{font-size:min(56px,calc((100vw - 44px) / 6.9))}
.v9-hero.si-hero h1.si-h-b{font-size:min(56px,calc((100vw - 44px) / 7.5))}
.v9-hero.si-hero h1.si-h-c{font-size:min(56px,calc((100vw - 44px) / 8.8))}
.v9-hero.si-hero h1.si-h-d{font-size:min(56px,calc((100vw - 44px) / 8.8))}
.v9-hero.si-hero h1.si-h-e{font-size:min(56px,calc((100vw - 44px) / 7.6))}
@media (min-width:821px){.v9.si-hero .em-talk .v9-hero-form{grid-template-columns:262px auto}}
@media (min-width:561px) and (max-width:820px){.v9.si-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:561px){.v9.si-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{width:172px;padding:0}}
@media (max-width:560px){.v9-hero.si-hero .v9-lead{font-size:17px}}
@media (min-width:1101px){
.v9-hero.si-hero .v9-hero-grid{grid-template-columns:minmax(560px,5.4fr) minmax(0,6.6fr);gap:48px}
.v9-hero.si-hero h1.si-h-a,.v9-hero.si-hero h1.si-h-b,.v9-hero.si-hero h1.si-h-c,.v9-hero.si-hero h1.si-h-d,.v9-hero.si-hero h1.si-h-e{font-size:clamp(52px,4.4vw,58px)}
.v9-hero.si-hero .v9-lead{max-width:520px}
/* the drawing is enlarged a little into the page margin, not into the column gap */
.si-hero .v9-illo{width:106%;margin:0 -6% 0 0;transform:none}
}
/* the drawing's canvas is 1920 x 1480, and the box keeps that shape reserved while it loads */
.si-hero .v9-illo{aspect-ratio:1920/1480}
/* the landing view, as on Web & App Development: on desktop the hero's top space follows the window's height, so the
   headline, form and drawing hold the middle of the first view and the client wall still shows below */
.v9-hero.si-hero{padding:40px 0 64px}
@media (min-width:1101px){.v9-hero.si-hero{padding:clamp(32px,7vh,84px) 0 72px}}
@media (max-width:560px){.v9-hero.si-hero{padding:28px 0 48px}}

/* ---------- when systems don't agree: the copy, and one customer as three systems hold it, set as one small comparison: a
   column per system, a row per field, under the systems' names. The fields that disagree are marked with a wavy underline
   that settles in once, row by row, after the comparison arrives; the payment terms, the difference that would cost the
   most, carry the section's one coral part. Side by side from 1101px; below that the comparison follows the copy; up to
   640px each field becomes a block with the three values stacked, each named by its system. Headers and rows are a table
   to screen readers, and each marked field says the systems disagree ---------- */
.si-dis{border-top:1px solid #E4DFD9}
.si-dis-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px 72px;align-items:center}
.si-dis-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .si-dis-copy p{margin:0;max-width:600px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .si-dis-copy p + p{margin-top:16px}
.si-cmp{margin:0;max-width:720px;padding:22px 28px 8px;border:1px solid #E4DFD9;border-radius:20px;background:#fff}
.si-cmp-cap{margin:0 0 4px;font-weight:500;font-size:15px;line-height:1.5;color:#4f5565}
.si-cmp-t{display:grid}
.si-cmp-r{display:grid;grid-template-columns:minmax(0,.9fr) repeat(3,minmax(0,1fr));column-gap:20px;align-items:baseline;padding:17px 0;border-top:1px solid #E4DFD9}
.si-cmp-h{padding:12px 0;border-top:0;border-bottom:1px solid #232834}
.si-cmp-h + .si-cmp-r{border-top:0}
.si-cmp-h > span{font-weight:700;font-size:15px;line-height:1.4;color:#232834}
.si-cmp-k{font-weight:500;font-size:15px;line-height:1.45;color:#4f5565}
.si-cmp-r > [role="cell"]{min-width:0;font-weight:500;font-size:17px;line-height:1.45;color:#232834;overflow-wrap:anywhere}
.si-cmp-s{display:none}
.si-cmp-no{color:#6b7180}
.si-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.si-cmp-v{text-decoration-line:underline;text-decoration-style:wavy;text-decoration-thickness:1.5px;text-underline-offset:6px;text-decoration-skip-ink:none;text-decoration-color:transparent;transition:text-decoration-color .7s cubic-bezier(.65,0,.35,1)}
.si-cmp.in .x .si-cmp-v{text-decoration-color:#8E939E;transition-delay:.8s}
.si-cmp.in .x.c .si-cmp-v{text-decoration-color:#FA5478;transition-delay:1.4s}
@media (prefers-reduced-motion:reduce){.si-cmp-v{transition:none}}
@media (min-width:1101px){.si-dis-grid{grid-template-columns:minmax(0,4.5fr) minmax(0,7.5fr)}.si-cmp{max-width:none}}
@media (max-width:640px){
.si-cmp{padding:18px 20px 4px}
.si-cmp-cap{font-size:16px}
.si-cmp-h{display:none}
.si-cmp-r{grid-template-columns:minmax(0,1fr);row-gap:8px;padding:16px 0}
.si-cmp-r:nth-child(2){border-top:0}
.si-cmp-k{margin-bottom:2px;font-weight:700;font-size:16px;color:#232834}
.si-cmp-r > [role="cell"]{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:12px;align-items:baseline}
.si-cmp-s{display:block;font-size:16px;line-height:1.45;color:#4f5565}
}
@media (max-width:560px){.v9 .si-dis-copy p{font-size:17px}}

/* ---------- what we connect: one service per row between hairlines, in order from a single connection to the layer that
   joins them all, each with its own anchor (#platforms and on). Each row leads with a small drawing of how its data moves,
   in the icon language, kept at 56px (1.75px strokes) at every width: the homepage's plug for connections between platforms,
   and this page's own for the rest (art/integration/si-icons.json). Pointing at a row plays its drawing's one movement
   once (art/integration/si-oi-*.json, or the homepage's plug); leaving plays it back. The name and its line sit side by side
   from 900px; below that the line follows the name. Every row and the closing note are shown on the owner's say-so, still
   to be confirmed before launch; the showUnconfirmed tweak tags each of them To confirm ---------- */
.si-con{border-top:1px solid #E4DFD9}
.si-con-head{max-width:720px;margin:0 0 44px}
.si-con-head .v9-h2{margin:0;text-wrap:balance}
.si-con-head .v9-sub{margin:18px 0 0;max-width:640px;font-size:18px;line-height:1.6;color:#4f5565}
.v9 .si-con-list{margin:0;padding:0;list-style:none;border-bottom:1px solid #E4DFD9}
.v9 .si-con-list li{display:grid;grid-template-columns:56px minmax(0,4fr) minmax(0,7fr);column-gap:28px;align-items:center;margin:0;padding:24px 0;border-top:1px solid #E4DFD9;scroll-margin-top:32px}
.v9 .si-con-list .hp-oic.cb-ic-box{grid-row:auto;width:56px;height:56px;margin:0}
.si-con-list .cb-ic{--d:.3s}
.v9 .si-con-list h3{margin:0;font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .si-con-list p{margin:0;max-width:620px;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .si-con-note{margin:28px 0 0;max-width:none;font-weight:500;font-size:18px;line-height:1.6;color:#232834}
@media (max-width:899px){.v9 .si-con-list li{grid-template-columns:56px minmax(0,1fr);row-gap:6px;align-items:start}.v9 .si-con-list .hp-oic.cb-ic-box{grid-row:1/3}.v9 .si-con-list p{grid-column:2}.v9 .si-con-list h3{padding-top:4px}}
@media (max-width:560px){.v9 .si-con-list li{column-gap:18px;padding:22px 0}.v9 .si-con-list h3{font-size:20px}.si-con-head .v9-sub{font-size:17px}}
.v9.si-con.si-review .si-con-list [data-confirm]{display:grid!important}
.v9.si-con.si-review .si-con-note[data-confirm]{display:block!important}
.si-con.si-review [data-confirm] h3::after,.si-con.si-review .si-con-note[data-confirm]::after{content:"To confirm";display:inline-block;margin-left:10px;padding:2px 9px;border-radius:10px;background:#F1EEEA;font-weight:700;font-size:12px;line-height:1.5;letter-spacing:.04em;color:#4f5565;vertical-align:3px}

/* ---------- it starts with what the data means: the page's one interactive section, a field map. The online store's order
   and the ERP's sales order, their field names in two columns under the systems' names, joined by grey lines. Pointing at,
   tabbing to or tapping a field shows its pair: both fields darken, their line turns ink and the rule is written on it,
   its keyword in coral (split, converted, renamed, in the charge of one system). The discount code has no partner: its line
   ends on an empty, dashed field, and its rule says what happens to it. The first pair is shown until another is chosen, so the section reads with no interaction;
   once, when the map is first well in view, it steps through the other pairs and settles back on the first (the logic's
   startTour),
   and the rules sit over the lines in place, so the map holds its height and nothing below moves. The current pair is
   announced to screen readers. Up to 719px the map becomes a list of pairs, each with its rule, and tapping a pair still
   marks it: below that the space between the columns is too narrow for the rules to sit on one or two lines. Side by side
   with the copy from 1251px, where the map's columns narrow a little to leave the rules room ---------- */
.si-map{border-top:1px solid #E4DFD9}
.si-map-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:44px 72px;align-items:center}
@media (min-width:1251px){.si-map-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.si-map-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .si-map-copy p{margin:0;max-width:600px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .si-map-copy p + p{margin-top:16px}
.si-fm-rv{min-width:0}
.si-fm{--fc:184px;max-width:720px}
.si-fm-hd{display:grid;grid-template-columns:var(--fc) minmax(0,1fr) var(--fc);align-items:end;margin:0 0 18px;padding:0 0 14px;border-bottom:1px solid #232834}
.si-fm-hd > span:last-child{grid-column:3}
.si-fm-hd b{display:block;font-weight:700;font-size:16px;line-height:1.35;color:#232834}
.si-fm-hd span span{display:block;font-weight:500;font-size:15px;line-height:1.4;color:#4f5565}
.si-fm-map{position:relative;display:grid;grid-template-columns:var(--fc) minmax(0,1fr) var(--fc);grid-template-rows:360px}
.si-fm-col{display:grid;grid-template-rows:repeat(6,60px);align-content:start;align-items:center}
.si-fm-col.l{grid-column:1}.si-fm-col.r{grid-column:3}
.v9 svg.si-fm-lines{grid-column:2;grid-row:1;width:100%;height:100%;overflow:visible}
.v9 .si-fm-lines path{fill:none;stroke:#C2C5CC;stroke-width:1.5;vector-effect:non-scaling-stroke;transition:stroke .3s cubic-bezier(.65,0,.35,1)}
.v9 .si-fm.p-a .si-fm-lines path[data-p="a"],.si-fm.p-b .si-fm-lines path[data-p="b"],.si-fm.p-c .si-fm-lines path[data-p="c"],.si-fm.p-d .si-fm-lines path[data-p="d"],.si-fm.p-e .si-fm-lines path[data-p="e"]{stroke:#232834;stroke-width:2}
.v9 .si-fm-f{display:flex;align-items:center;width:100%;min-height:44px;margin:0;padding:0 16px;border:1.5px solid #E4DFD9;border-radius:12px;background:#fff;font:inherit;font-weight:500;font-size:15.5px;line-height:1.25;color:#232834;text-align:left;cursor:pointer;transition:border-color .25s cubic-bezier(.65,0,.35,1),background-color .25s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .si-fm-f:hover{border-color:#C2C5CC}}
.v9 .si-fm.p-a .si-fm-f[data-p="a"],.si-fm.p-b .si-fm-f[data-p="b"],.si-fm.p-c .si-fm-f[data-p="c"],.si-fm.p-d .si-fm-f[data-p="d"],.si-fm.p-e .si-fm-f[data-p="e"]{border-color:#232834;background:#F1EEEA}
.v9 .si-fm-f.si-fm-no{border-style:dashed;border-color:#C2C5CC;color:#4f5565;cursor:default}
.v9 .si-fm.p-e .si-fm-f.si-fm-no{border-color:#232834;background:#fff}
.v9 .si-fm-f:focus-visible,.v9 .si-fm-p:focus-visible{outline:2px solid #232834;outline-offset:3px}
.si-fm-rule{position:absolute;left:calc(var(--fc) + 14px);right:calc(var(--fc) + 14px);display:flex;justify-content:center;transform:translateY(-50%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s cubic-bezier(.65,0,.35,1),visibility 0s linear .3s}
.si-fm-rule > span{max-width:100%;padding:6px 12px;border:1.5px solid #232834;border-radius:14px;background:#fff;font-weight:500;font-size:14.5px;line-height:1.35;color:#232834;text-align:center;text-wrap:balance}
.si-fm-rule b,.si-fm-p .ru b{font-weight:700;color:#d33d5c}
.si-fm-rule[data-p="a"]{top:60px}.si-fm-rule[data-p="b"]{top:120px}.si-fm-rule[data-p="c"]{top:180px}.si-fm-rule[data-p="d"]{top:240px}.si-fm-rule[data-p="e"]{top:300px}
.si-fm.p-a .si-fm-rule[data-p="a"],.si-fm.p-b .si-fm-rule[data-p="b"],.si-fm.p-c .si-fm-rule[data-p="c"],.si-fm.p-d .si-fm-rule[data-p="d"],.si-fm.p-e .si-fm-rule[data-p="e"]{opacity:1;visibility:visible;transition:opacity .3s cubic-bezier(.65,0,.35,1),visibility 0s}
.v9 .si-fm-hint{margin:18px 0 0;font-weight:500;font-size:15px;line-height:1.5;color:#4f5565}
.si-fm-lh,.si-fm-list{display:none}
@media (min-width:1251px){.si-fm{--fc:170px}.v9 .si-fm-f{padding:0 13px;font-size:15px}}
@media (max-width:719px){
.si-fm-hd,.si-fm-map,.v9 .si-fm-hint{display:none}
.v9 .si-fm-lh{display:flex;justify-content:space-between;margin:0 0 12px;padding:0 0 10px;border-bottom:1px solid #232834;font-weight:700;font-size:16px;line-height:1.35;color:#232834}
.v9 .si-fm-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.v9 .si-fm-list li{margin:0}
.v9 .si-fm-p{display:grid;gap:6px;width:100%;margin:0;padding:14px 16px;border:1.5px solid #E4DFD9;border-radius:14px;background:#fff;font:inherit;text-align:left;cursor:pointer;transition:border-color .25s cubic-bezier(.65,0,.35,1),background-color .25s cubic-bezier(.65,0,.35,1)}
.si-fm-p .fl{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-weight:700;font-size:16px;line-height:1.4;color:#232834}
.si-fm-p .to{color:#4f5565}
.si-fm-p .no{font-weight:500;color:#4f5565}
.si-fm-p .ru{font-weight:500;font-size:16px;line-height:1.45;color:#4f5565}
.v9 .si-fm.p-a .si-fm-p[data-p="a"],.si-fm.p-b .si-fm-p[data-p="b"],.si-fm.p-c .si-fm-p[data-p="c"],.si-fm.p-d .si-fm-p[data-p="d"],.si-fm.p-e .si-fm-p[data-p="e"]{border-color:#232834;background:#F1EEEA}
.v9 .si-map-copy p{font-size:17px}
}
@media (prefers-reduced-motion:reduce){.v9 .si-fm-lines path,.v9 .si-fm-f,.si-fm-rule,.v9 .si-fm-p{transition:none}}

/* ---------- built for the day something fails: the heading and its lead, then the drawing beside the practices. The drawing
   (art/integration/si-fail-v1.json, from tools/si-fail-lottie-v1.js) plays once when it's well in view, pauses while it's
   off screen, and holds its last frame: orders wait in a queue while the warehouse is unavailable, then go through once each,
   the one sent twice applied once. With reduced motion it shows that last frame. Its space is reserved with aspect-ratio. The
   practices aren't confirmed yet, so the whole section stays hidden in place; the showUnconfirmed tweak lays it out for
   review, with the heading and each practice tagged To confirm. Side by side from 1024px, the drawing first; below that the drawing, up to 540px, sits above the practices ---------- */
.si-fail{border-top:1px solid #E4DFD9}
.si-fail-head{max-width:720px;margin:0 0 48px}
.si-fail-head .v9-h2{margin:0;text-wrap:balance}
.v9 .si-fail-head p{margin:18px 0 0;max-width:640px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.si-fail-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px 72px;align-items:center}
@media (min-width:1024px){.si-fail-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.si-fail-art{margin:0;width:100%;max-width:540px;justify-self:center}
.si-fail-box{width:100%;aspect-ratio:1400/1460}
.v9 .si-fail-list{display:grid;gap:26px;margin:0;padding:0;list-style:none}
.v9 .si-fail-list li{margin:0}
.v9 .si-fail-list h3{margin:0 0 6px;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.01em;color:#232834}
.v9 .si-fail-list p{margin:0;max-width:560px;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
@media (max-width:560px){.v9 .si-fail-head p{font-size:17px}.si-fail-head{margin-bottom:36px}}
.v9.si-fail.si-review{display:block!important}
.v9.si-fail.si-review .si-fail-list [data-confirm]{display:block!important}
.si-fail.si-review .si-fail-head .v9-h2::after,.si-fail.si-review .si-fail-list [data-confirm] h3::after{content:"To confirm";display:inline-block;margin-left:10px;padding:2px 9px;border-radius:10px;background:#F1EEEA;font-weight:700;font-size:12px;line-height:1.5;letter-spacing:.04em;color:#4f5565;vertical-align:3px}

/* ---------- an API others can build on: the copy, and one request with its response beneath it in a small ink pane, set in
   Sailec like the rest of the page. The method and path lead; the version in the path is the pane's one coral part; a few
   fields follow, with generic names. Every line wraps with a hanging indent, so the pane never scrolls sideways, and its
   text stays at 14px or more. Side by side from 1024px ---------- */
.si-api{border-top:1px solid #E4DFD9}
.si-api-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px 72px;align-items:center}
@media (min-width:1024px){.si-api-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
.si-api-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .si-api-copy p{margin:0;max-width:600px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.si-api-pane{margin:0;width:100%;max-width:520px}
.v9 .si-api-code{padding:26px 30px 28px;border-radius:20px;background:#232834;color:#C2C5CC;font-weight:500;font-size:15.5px;line-height:1.6}
.v9 .si-api-code p{margin:0;padding-left:1.2em;text-indent:-1.2em;overflow-wrap:anywhere}
.v9 .si-api-code p.i1{padding-left:2.4em;text-indent:-1.2em}
.v9 .si-api-code p.i2{padding-left:3.6em;text-indent:-1.2em}
.v9 .si-api-code .rq{color:#fff}
.si-api-code .rq b{margin-right:.4em;font-weight:700}
.si-api-code .v{font-weight:700;color:#FA5478}
.v9 .si-api-code .rs{margin-top:18px;padding-top:16px;border-top:1px solid #3a3f4b}
.v9 .si-api-code .st{margin-bottom:4px;color:#fff}
.si-api-code .k{color:#F1EEEA}
.si-api-code .s{color:#fff}
.v9 .si-api-cap{margin:14px 0 0;padding:0 4px;font-weight:500;font-size:15px;line-height:1.5;color:#4f5565;text-wrap:pretty}
@media (max-width:560px){.v9 .si-api-code{padding:22px 20px 24px;font-size:14px}.v9 .si-api-copy p{font-size:17px}}

/* ---------- connected systems make AI useful: the page's quietest section and its one bone band. The heading beside the
   copy from 1024px, and the three related services as text links set in a row under it, wrapping as they need to. No device:
   the band itself is the pause between the engineering sections ---------- */
.v9.si-ai{background:#F1EEEA}
.si-ai-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px 72px;align-items:start}
@media (min-width:1024px){.si-ai-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.si-ai .v9-h2{margin:0;max-width:560px;text-wrap:balance}
.v9 .si-ai-copy p{margin:0;max-width:640px;font-weight:500;font-size:18px;line-height:1.6;color:#3a3f4b;text-wrap:pretty}
.si-ai-links{display:flex;flex-wrap:wrap;gap:4px 32px;margin-top:18px}
.v9 .si-ai-links .si-go{margin-top:0}
@media (max-width:560px){.v9 .si-ai-copy p{font-size:17px}.si-ai-links{flex-direction:column;gap:2px}}

/* ---------- our work: the projects told by what they connect, in words, no screens. One per row between hairlines: the
   name (linking to its case study on Our Work) and sector on the left, then what it connects, and its one-line description
   from work-projects.js word for word. Halden is tagged Concept, as on the Our Work page. Which projects involved our
   integration work, and what each connected, isn't confirmed: the section and every row stay hidden in place, and the
   connects lines are drafts from each project's own "What we built". The showUnconfirmed tweak lays them out for review,
   tagged To confirm ---------- */
.si-work{border-top:1px solid #E4DFD9}
.si-work .si-work-h{margin:0 0 36px;text-wrap:balance}
.v9 .si-work-list{margin:0;padding:0;list-style:none;border-bottom:1px solid #E4DFD9}
.v9 .si-work-list li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:8px 48px;margin:0;padding:26px 0;border-top:1px solid #E4DFD9}
.v9 .si-work-n h3{margin:0;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.01em}
.v9 .si-work-n h3 a{display:inline-block;padding:9px 0;margin:-9px 0;color:#232834;text-decoration:underline;text-decoration-color:#C2C5CC;text-decoration-thickness:1.5px;text-underline-offset:5px;transition:text-decoration-color .25s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .si-work-n h3 a:hover{text-decoration-color:#232834}}
.v9 .si-work-n h3 a:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
.v9 .si-work-s{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:8px 0 0;font-weight:500;font-size:15px;line-height:1.4;color:#4f5565}
.si-work-tag{padding:2px 9px;border-radius:10px;background:#F1EEEA;font-weight:700;font-size:12px;line-height:1.5;letter-spacing:.04em;color:#4f5565}
.v9 .si-work-c{margin:0;font-weight:500;font-size:19px;line-height:1.45;color:#232834;text-wrap:pretty}
.v9 .si-work-l{margin:8px 0 0;max-width:620px;font-weight:500;font-size:16px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .si-work-go{margin-top:24px}
@media (max-width:767px){.v9 .si-work-list li{grid-template-columns:minmax(0,1fr);gap:12px}.v9 .si-work-c{font-size:18px}}
.v9.si-work.si-review{display:block!important}
.v9.si-work.si-review .si-work-list [data-confirm]{display:grid!important}
.si-work.si-review .si-work-h::after,.si-work.si-review .si-work-c::after{content:"To confirm";display:inline-block;margin-left:10px;padding:2px 9px;border-radius:10px;background:#F1EEEA;font-weight:700;font-size:12px;line-height:1.5;letter-spacing:.04em;color:#4f5565;vertical-align:3px}

/* ---------- connections need looking after: the copy on the left and, from 860px, its one quiet device beside it on the
   right (column gap 48px up to 1023px, 72px from 1024px); below 860px the device sits between the two paragraphs. The device, drawn from its own
   words: a short provider notice that an API version is being retired, its date the section's one coral part; then the
   ways to work with us and the link. Shown on the Engagement Models page's own offer of ongoing development, still to be
   confirmed: the showUnconfirmed tweak tags the heading To confirm ---------- */
.si-care{border-top:1px solid #E4DFD9}
.si-care-grid{display:grid;grid-template-columns:minmax(0,1fr);max-width:720px}
.si-care-grid > .si-go{justify-self:start}
@media (min-width:860px){
.si-care-grid{max-width:none;grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-areas:"h n" "a n" "b n" "g n";grid-template-rows:auto auto auto 1fr;column-gap:48px}
.si-care-grid > .v9-h2{grid-area:h}.si-care-p1{grid-area:a}.si-care-p2{grid-area:b}.si-care-grid > .si-go{grid-area:g;align-self:start}
.v9 .si-care-grid > .si-care-note{grid-area:n;align-self:center;justify-self:end;width:100%;max-width:480px;margin:0}
.v9 .si-care-grid > .si-care-p2{margin-top:16px}
}
@media (min-width:1024px){.si-care-grid{column-gap:72px}}
.si-care .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .si-care-grid > p{margin:0;max-width:640px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .si-care-note{margin:28px 0;max-width:520px;padding:20px 24px 22px;border:1px solid #E4DFD9;border-radius:16px;background:#fff}
.v9 .si-care-note p{margin:0}
.v9 .si-care-note .k{font-weight:700;font-size:12px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:#4f5565}
.v9 .si-care-note .t{margin-top:8px;font-weight:700;font-size:19px;line-height:1.35;color:#232834;text-wrap:balance}
.si-care-note .t b{font-weight:700;color:#d33d5c}
.v9 .si-care-note .d{margin-top:6px;font-weight:500;font-size:16px;line-height:1.55;color:#4f5565;text-wrap:pretty}
.v9 .si-care .si-go{margin-top:12px}
@media (max-width:560px){.v9 .si-care-grid > p{font-size:17px}.v9 .si-care-note{padding:18px 20px 20px}}
.si-care.si-review .v9-h2::after{content:"To confirm";display:inline-block;margin-left:10px;padding:2px 9px;border-radius:10px;background:#F1EEEA;font-weight:700;font-size:12px;line-height:1.5;letter-spacing:.04em;color:#4f5565;vertical-align:3px}

/* ---------- tap areas and the legacy menu, this page only. The logos in the header and footer are widened to 44px tap
   areas with padding cancelled by margin, so nothing moves. The site's old hidden menu sits off to the side until its script
   marks it loaded; until then it is held to no width, so it can't cause sideways scroll ---------- */
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}

/* ---------- let's connect it better: the closing email form, centred, sized and behaving as the hero's at every width.  Nothing
   follows it: urgent help is reached from the header, the menu and the footer ---------- */
.si-cta .v9-h2{text-wrap:balance}
.si-cta .v9-sub{text-wrap:pretty}