/* Custom Software, built on Web & App Development v2 (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 (cs-*) 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 Custom Software 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 older sister pages (1360px, as Web & App Development), 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 */
.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 */
.cs-hero .v9-illo-art > div{position:absolute;inset:0}
/* a compound kept whole, so a line never breaks inside "off-the-shelf" */
.cs-nb{white-space:nowrap}
@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 .cs-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}
.cs-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)}
.cs-go-a{display:inline-block;transition:transform .3s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .cs-go:hover{color:#232834}.cs-go:hover .cs-go-l{text-decoration-color:#232834}.cs-go:hover .cs-go-a{transform:translateX(3px)}}
.v9 .cs-go:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.cs-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}}
/* the heading and line sit centred over the wall; the heading is balanced so no line holds one word alone */
.cs-clients-head{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:44px;text-align:center}
.cs-clients-head .v9-h2{margin:0;text-align:center;text-wrap:balance}
.cs-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){.cs-clients-head{margin-bottom:32px}}
@media (max-width:560px){.cs-clients-head .v9-sub{font-size:17px}}

/* ---------- build it, or buy it?: a fork. One line comes down from the question to "or" and splits into two branches of
   equal length, each landing on the heading of its own list. The two sides share one width, one type size and one weight,
   so neither reads as the answer. The branches draw once as the section arrives, outwards from "or" at the same pace.
   Under 680px the lists stack, with "or" between them. The closing line under both stays hidden until the service it
   describes (helping choose and connect a product) is confirmed ---------- */
.cs-fork{border-top:1px solid #E4DFD9}
.cs-fork-head{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.cs-fork-head .v9-h2{margin:0;text-align:center;text-wrap:balance}
.cs-fork-head .v9-sub{margin:0;max-width:640px;font-size:18px;line-height:1.6;color:#4f5565;text-align:center;text-wrap:pretty}
.cs-fork-body{--g:56px;max-width:1040px;margin:36px auto 0}
.cs-fork-draw{position:relative;width:calc(50% + var(--g) / 2);height:66px;margin:0 auto 16px}
.cs-fork-stem{position:absolute;left:50%;top:0;width:2px;height:26px;margin-left:-1px;background:#E4DFD9}
.cs-fork-arm{position:absolute;top:47px;height:19px;border-top:2px solid #E4DFD9}
.cs-fork-arm-l{left:-1px;right:50%;border-left:2px solid #E4DFD9;border-top-left-radius:16px}
.cs-fork-arm-r{right:-1px;left:50%;border-right:2px solid #E4DFD9;border-top-right-radius:16px}
.cs-fork-or,.cs-fork-or-m span{display:grid;place-items:center;width:44px;height:44px;border:2px solid #E4DFD9;border-radius:50%;background:#fff;font-weight:700;font-size:15px;line-height:1;color:#d33d5c}
.cs-fork-or{position:absolute;left:50%;top:26px;margin-left:-22px}
.cs-fork-stem{clip-path:inset(0 0 100% 0);transition:clip-path .35s cubic-bezier(.65,0,.35,1) .2s}
.cs-fork-arm{transition:clip-path .8s cubic-bezier(.65,0,.35,1) .5s}
.cs-fork-arm-l{clip-path:inset(0 0 0 100%)}
.cs-fork-arm-r{clip-path:inset(0 100% 0 0)}
.cs-fork-body.in .cs-fork-stem,.cs-fork-body.in .cs-fork-arm{clip-path:inset(0)}
@media (prefers-reduced-motion:reduce){.cs-fork-stem,.cs-fork-arm{clip-path:none;transition:none}}
.cs-fork-sides{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 var(--g)}
.cs-fork-or-m{display:none}
.cs-fork-h{margin:0 0 20px;font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.01em;text-align:center;text-wrap:balance}
.cs-fork-list{border-top:1px solid #E4DFD9}
.cs-fork-list li{padding:18px 0;border-bottom:1px solid #E4DFD9;font-size:18px;line-height:1.55;color:#3a3f4b}
.cs-fork-close{margin:40px auto 0;max-width:640px;font-size:18px;line-height:1.6;color:#3a3f4b;text-align:center;text-wrap:pretty}
@media (max-width:1100px){.cs-fork-body{--g:40px}}
@media (max-width:679px){
.cs-fork-body{margin-top:32px}
.cs-fork-draw{display:none}
.cs-fork-sides{grid-template-columns:minmax(0,1fr)}
.cs-fork-or-m{display:flex;justify-content:center;margin:28px 0}
.cs-fork-h{font-size:20px;margin-bottom:16px}
.cs-fork-list li{padding:16px 0;font-size:17px}
}
@media (max-width:560px){.cs-fork-head .v9-sub{font-size:17px}}

/* ---------- what we build: a specimen sheet. Each kind of software is shown as a small, still drawing of its own screen, with
   its name and line beneath. The first, the most common, sits with its words beside it (across two columns at four or two
   columns, across the whole row at three), so every row is full at every column count. The drawings scale with their own width (container units); generic, with no brands or figures.
   Coral appears once: the current step of the portal ---------- */
.cs-what{border-top:1px solid #E4DFD9}
.cs-what-head{display:grid;gap:18px;margin-bottom:48px}
.cs-what-head .v9-h2{margin:0;text-wrap:balance}
.cs-what-head .v9-sub{margin:0;max-width:560px;font-size:18px;line-height:1.6;color:#4f5565}
.cs-specs{--g:32px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px var(--g)}
.cs-spec{display:grid;gap:20px;align-content:start;scroll-margin-top:24px}
.cs-spec-lead{grid-column:span 2;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--g);align-items:start}
.cs-spec h3{margin:0 0 8px;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.01em;text-wrap:balance}
.cs-spec p{font-size:17px;line-height:1.6;color:#4f5565}
.cs-spec-lead h3{font-size:24px}
.cs-spec-lead p{font-size:18px}
@media (max-width:1100px){.cs-specs{--g:28px;grid-template-columns:repeat(3,minmax(0,1fr))}}
/* at three columns the first spans the full row, its drawing on the grid's first track and its words across the other two,
   so the drawing matches the others and every row stays full */
@media (min-width:901px) and (max-width:1100px){.cs-spec-lead{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,2fr);grid-template-columns:subgrid}.cs-spec-lead .cs-spec-txt{grid-column:span 2;max-width:560px}}
@media (max-width:900px){.cs-specs{--g:24px;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}}
@media (max-width:560px){.cs-what-head{margin-bottom:36px}.cs-what-head .v9-sub{font-size:17px}.cs-specs{grid-template-columns:minmax(0,1fr)}.cs-spec-lead{grid-column:auto;grid-template-columns:minmax(0,1fr)}.cs-spec-lead h3{font-size:20px}.cs-spec-lead p{font-size:17px}}
/* the drawings */
/* the drawing is its own size container: its padding is a share of its width, and its contents are spaced in cqw by margins
   (not by its own gap or padding, which would resolve against the page instead) */
.cs-shot{position:relative;aspect-ratio:16/11;container-type:inline-size;display:flex;flex-direction:column;padding:6%;border:1px solid #E4DFD9;border-radius:14px;background:#fff;overflow:hidden}
.cs-shot>*+*{margin-top:3.4cqw}
.cs-t{font-weight:700;font-size:5cqw;line-height:1;letter-spacing:-.01em;color:rgba(35,40,52,.9)}
.cs-l{display:block;flex:none;height:2.4cqw;border-radius:2cqw;background:#C2C5CC}
.cs-l.s{background:#E4DFD9}
.cs-l.k{background:#232834}
.cs-l.big{height:4cqw}
.cs-row{display:flex;align-items:center;gap:3cqw}
.cs-sb{justify-content:space-between}
.cs-box{display:grid;gap:2.4cqw;padding:3.4cqw;border:1px solid #E4DFD9;border-radius:2cqw}
.cs-btn{display:grid;place-items:center;flex:none;height:7cqw;padding:0 4cqw;border-radius:4cqw;background:#232834;color:#fff;font-weight:700;font-size:3.2cqw;line-height:1}
.cs-av{flex:none;width:6cqw;height:6cqw;border:1.5px solid #232834;border-radius:50%;background:#F1EEEA}
/* a table of records */
.cs-tb{flex:1;min-height:0;display:grid;grid-auto-rows:minmax(0,1fr);border:1px solid #E4DFD9;border-radius:2cqw;overflow:hidden}
.cs-tr{display:grid;grid-template-columns:1.2fr 1.5fr 1fr 1fr;gap:3cqw;align-items:center;padding:0 3cqw;border-top:1px solid #E4DFD9}
.cs-tr:first-child{border-top:0;background:#F1EEEA}
.cs-tr.on{background:#FBFAF8}
.cs-pill{width:80%;height:4.6cqw;border:1px solid #C2C5CC;border-radius:3cqw}
/* a progress view */
.cs-steps{position:relative;display:flex;justify-content:space-between;margin:1cqw 0 0}
.cs-steps::before,.cs-steps::after{content:"";position:absolute;left:2.5cqw;top:50%;height:1.5px;margin-top:-.75px;background:#E4DFD9}
.cs-steps::before{right:2.5cqw}
.cs-steps::after{width:62%;background:#232834}
.cs-steps i{position:relative;z-index:1;width:5cqw;height:5cqw;border:1.5px solid #C2C5CC;border-radius:50%;background:#fff}
.cs-steps i.d{border-color:#232834;background:#232834}
.cs-steps i.c{border-color:#C43A5C;background:#FA5478}
.cs-thread{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:2.6cqw}
.cs-thread .cs-row:last-child{justify-content:flex-end}
/* a schedule */
.cs-cal{flex:1;min-height:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2cqw}
.cs-cal>div{display:flex;flex-direction:column;gap:1.6cqw;padding-top:2.4cqw;border-top:1px solid #E4DFD9}
.cs-cal b{display:block;flex:none;border-radius:1.6cqw;background:#E4DFD9}
.cs-cal b.k{background:#232834}
.cs-cal b.o{border:1.5px dashed #C2C5CC;background:#fff}
/* a price breakdown */
.cs-lines{display:grid;gap:3.2cqw}
.cs-tot{padding-top:3.2cqw;border-top:1.5px solid #C2C5CC}
.cs-tt{font-weight:700;font-size:3.6cqw;line-height:1;color:rgba(35,40,52,.9)}
.cs-shot .cs-end{align-self:flex-end;margin-top:auto}
/* an approval chain */
.cs-chain{position:relative;flex:1;display:flex;flex-direction:column;justify-content:space-between}
.cs-chain::before{content:"";position:absolute;left:3.5cqw;top:3.5cqw;bottom:3.5cqw;width:1.5px;margin-left:-.75px;background:#E4DFD9}
.cs-chain li{position:relative;display:flex;align-items:center;gap:3cqw}
.cs-chain .cs-av{width:7cqw;height:7cqw}
.cs-chain em{display:block;margin-left:auto;width:5.4cqw;height:5.4cqw;border:1.5px solid #C2C5CC;border-radius:50%}
.cs-chain li.d em{border-color:#232834;background:#232834}
.cs-chain li.d em::after{content:"";display:block;width:1.3cqw;height:2.5cqw;margin:.8cqw auto 0;border:solid #fff;border-width:0 .5cqw .5cqw 0;transform:rotate(45deg)}
/* a chart */
.cs-kpi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3cqw}
.cs-bars{flex:1;min-height:0;display:flex;align-items:flex-end;gap:2.4cqw;border-bottom:1.5px solid #C2C5CC}
.cs-bars b{flex:1;border-radius:1.2cqw 1.2cqw 0 0;background:#E4DFD9}
.cs-bars b.k{background:#232834}
/* a sign-in and plan screen */
.cs-shot.cs-prod{flex-direction:row}
.cs-shot.cs-prod>*+*{margin-top:0;margin-left:5cqw}
.cs-signin{flex:1;display:flex;flex-direction:column;gap:3cqw;justify-content:center}
.cs-in{display:block;height:7cqw;border:1px solid #C2C5CC;border-radius:2cqw}
.cs-plans{flex:1;display:grid;gap:3cqw;align-content:center}
.cs-plan{display:grid;gap:2.2cqw;padding:3.4cqw;border:1px solid #E4DFD9;border-radius:2.4cqw}
.cs-plan.on{border:1.5px solid #232834}

/* ---------- from how it works today to software that fits: the same software drawn four times as it grows, from a sketch
   of the process to the full system. What is still planned is dashed; what is built is solid ink. The users grow from one
   to a few to everyone. Coral appears once: the hard part proved first. No numbers, track or plan: the drawings carry the
   order, and arrive once, one after another ---------- */
.cs-grow-sec{border-top:1px solid #E4DFD9}
.cs-grow-head{display:grid;gap:18px;margin-bottom:48px}
.cs-grow-head .v9-h2{margin:0;max-width:760px;text-wrap:balance}
.cs-grow-head .v9-sub{margin:0;max-width:560px;font-size:18px;line-height:1.6;color:#4f5565}
.cs-grow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px;margin-bottom:-48px}
.cs-gs{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start;margin-bottom:48px;opacity:0;transform:translateY(12px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
/* each step's drawing, heading and words sit on rows shared across the line, so the words start level even when one
   heading takes two lines. The grid has no row gap of its own (a subgrid would inherit it between its rows); the space
   between lines of steps is each step's bottom margin, cancelled under the last line */
.cs-gs>div:not(.cs-gd){display:contents}
.cs-gs .cs-gd{margin-bottom:22px}
.cs-gs:nth-child(2){transition-delay:.14s}
.cs-gs:nth-child(3){transition-delay:.28s}
.cs-gs:nth-child(4){transition-delay:.42s}
.cs-grow.in .cs-gs{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.cs-gs{opacity:1;transform:none;transition:none}}
.cs-gs h3{margin:0 0 8px;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.01em;text-wrap:balance}
.cs-gs p{font-size:17px;line-height:1.6;color:#4f5565}
@media (max-width:1100px){.cs-grow{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;margin-bottom:-44px}.cs-gs{margin-bottom:44px}}
@media (max-width:560px){.cs-grow-head{margin-bottom:36px}.cs-grow-head .v9-sub{font-size:17px}.cs-grow{grid-template-columns:minmax(0,1fr);margin-bottom:-40px}.cs-gs{margin-bottom:40px}}
/* the drawings: one box each, sized by its width; every part is placed in it by percentage */
.cs-gd{position:relative;aspect-ratio:4/3;container-type:inline-size}
.cs-gd *{position:absolute;box-sizing:border-box}
/* the sketch of the process: the person doing the work, the steps and the notes kept on the side */
.g-pp{left:2%;top:calc(26.5% - 5cqw);width:10cqw;height:10cqw;border:1.5px solid #232834;border-radius:50%;background:#F1EEEA}
.g-sb{top:15%;width:22%;height:23%;border:1.5px dashed #232834;border-radius:2.4cqw;background:#fff}
.g-sb i,.g-nt i{height:2.2cqw;border-radius:2cqw;background:#C2C5CC}
.g-sb i{left:20%;right:20%;top:50%;margin-top:-1.1cqw}
.g-ln{height:0;border-top:1.5px dashed #232834}
.g-ln.g-v{width:0;border-top:0;border-left:1.5px dashed #232834}
.g-nt{border:1.5px solid #232834;border-radius:1.6cqw;background:#F1EEEA}
.g-nt i{left:16%;right:22%;top:30%}
.g-nt i+i{top:58%;right:42%}
/* the screen: its window, header, menu, records and the panel for the hard part */
.g-w{left:3%;top:5%;width:94%;height:88%;border:1.5px solid #232834;border-radius:3.2cqw;background:#fff;overflow:hidden}
.g-w.dash{border:1.5px dashed #C2C5CC}
.g-bar{left:0;right:0;top:0;height:13%;border-bottom:1px solid #E4DFD9}
.g-w.dash .g-bar{border-bottom:1.5px dashed #C2C5CC}
.g-bar i{top:50%;width:2.2cqw;height:2.2cqw;margin-top:-1.1cqw;border-radius:50%;background:#E4DFD9}
.g-bar i:nth-of-type(1){left:3.5%}.g-bar i:nth-of-type(2){left:7%}.g-bar i:nth-of-type(3){left:10.5%}
.g-bar b{top:50%;width:5.4cqw;height:5.4cqw;margin-top:-2.7cqw;border:1.5px solid #232834;border-radius:50%;background:#F1EEEA;box-shadow:0 0 0 1.5px #fff}
.g-bar b:nth-of-type(1){right:3%}.g-bar b:nth-of-type(2){right:7.5%}.g-bar b:nth-of-type(3){right:12%}.g-bar b:nth-of-type(4){right:16.5%}
.g-nav{left:0;top:13%;bottom:0;width:22%;border-right:1px solid #E4DFD9}
.g-nav i{left:18%;width:58%;height:2.2cqw;border-radius:2cqw;background:#C2C5CC}
.g-nav i:nth-of-type(1){top:14%;background:#232834}.g-nav i:nth-of-type(2){top:30%}.g-nav i:nth-of-type(3){top:46%}.g-nav i:nth-of-type(4){top:62%}
.g-main{left:22%;top:13%;right:36%;bottom:0}
.g-mh,.g-pk{top:11%;height:3.4cqw;border-radius:2cqw;background:#232834}
.g-mh{left:9%;width:46%}
.g-row{left:9%;right:9%;height:15%;border-top:1px solid #E4DFD9}
.g-row:nth-of-type(1){top:30%}.g-row:nth-of-type(2){top:52%}.g-row:nth-of-type(3){top:74%}
.g-row i{top:50%;height:2.2cqw;margin-top:-1.1cqw;border-radius:2cqw;background:#C2C5CC}
.g-row i:nth-of-type(1){left:0;width:48%}.g-row i:nth-of-type(2){right:0;width:22%;background:#E4DFD9}
.g-pan{right:0;top:13%;bottom:0;width:36%;border-left:1px solid #E4DFD9}
.g-pk{left:12%;width:52%}
.g-pc{left:12%;right:12%;height:14%;border:1.5px solid #C2C5CC;border-radius:3cqw;background:#fff}
.g-pc:nth-of-type(1){top:30%}.g-pc:nth-of-type(2){top:50%}
.g-pc i{right:7%;top:50%;width:6cqw;height:3.2cqw;margin-top:-1.6cqw;border-radius:2cqw;background:#232834}
.g-pr{left:12%;right:12%;top:72%;height:14%;border:1.5px solid #232834;border-radius:3cqw;background:#F1EEEA}
/* what is still planned: an empty dashed outline in its place */
.g-ph{border:1.5px dashed #C2C5CC;border-radius:2cqw}
.g-ph>*{display:none}
.g-nav.g-ph{left:3%;top:17%;bottom:4%;width:18%}
.g-main.g-ph{left:24%;right:39%;top:17%;bottom:4%}
.g-row.g-ph{border:1.5px dashed #C2C5CC}
/* the hard part, proved first: the one coral outline in this section */
.g-pan.hard{top:17%;right:3%;bottom:4%;width:34%;border:1.5px solid #FA5478;border-radius:2.4cqw;background:#FDE0E6}
.g-pan.hard .g-pc{border-color:#232834}
.g-pan.hard .g-pr{background:#fff}
/* handed over: the documentation that goes with it */
.g-doc{left:71%;top:50%;width:24%;height:42%;border:1.5px solid #232834;border-radius:1.6cqw;background:#fff;rotate:4deg}
.g-doc i{left:16%;right:16%;height:2.2cqw;border-radius:2cqw;background:#C2C5CC}
.g-doc i:nth-of-type(1){top:18%;right:34%;background:#232834}.g-doc i:nth-of-type(2){top:38%}.g-doc i:nth-of-type(3){top:54%}.g-doc i:nth-of-type(4){top:70%;right:40%}

/* ---------- the parts a demo doesn't show: one order drawn like an anatomy diagram. The record is five bands on the left,
   each holding one of the parts, and each part's words sit on the same row to the right, joined to it by a hairline that
   ends in a pin on the part. Under 720px the record is cut into its five slices, each followed by its words. Coral
   appears once: the lock on who can see it ---------- */
.cs-parts{border-top:1px solid #E4DFD9}
.cs-parts-head{display:grid;gap:18px;margin-bottom:48px}
.cs-parts-head .v9-h2{margin:0;max-width:760px;text-wrap:balance}
.cs-parts-head .v9-sub{margin:0;max-width:560px;font-size:18px;line-height:1.6;color:#4f5565}
.cs-an{--gap:96px;--bp:28px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:var(--gap)}
.cs-an-band{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:25px var(--bp) 24px;border-left:1.5px solid #232834;border-right:1.5px solid #232834;background:#fff}
.cs-an-b1{border-top:1.5px solid #232834;border-radius:20px 20px 0 0}
.cs-an-b2,.cs-an-b3,.cs-an-b4,.cs-an-b5{border-top:1px solid #E4DFD9}
.cs-an-b5{border-bottom:1.5px solid #232834;border-radius:0 0 20px 20px}
.cs-an-txt{position:relative;padding:33px 0 32px}
.cs-an-txt h3{margin:0 0 8px;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.01em;text-wrap:balance}
.cs-an-txt p{max-width:480px;font-size:17px;line-height:1.6;color:#4f5565}
/* the leader: from the heading's middle, across the gap, to the pin on the part's right edge (46px below the row top) */
.cs-an-txt::before{content:"";position:absolute;top:46px;right:calc(100% + 14px);width:calc(var(--gap) + var(--bp) - 12.5px);border-top:1px solid #C2C5CC;clip-path:inset(0 100% 0 0);transition:clip-path .6s cubic-bezier(.65,0,.35,1) .4s}
.cs-an-txt::after{content:"";position:absolute;top:42px;right:calc(100% + var(--gap) + var(--bp) - 2.5px);width:8px;height:8px;box-sizing:border-box;border:1.5px solid #232834;border-radius:50%;background:#fff;opacity:0;transition:opacity .3s ease .3s}
.cs-an.in .cs-an-txt::before{clip-path:inset(0)}
.cs-an.in .cs-an-txt::after{opacity:1}
.cs-an-txt:nth-child(4)::before{transition-delay:.5s}.cs-an-txt:nth-child(4)::after{transition-delay:.4s}
.cs-an-txt:nth-child(6)::before{transition-delay:.6s}.cs-an-txt:nth-child(6)::after{transition-delay:.5s}
.cs-an-txt:nth-child(8)::before{transition-delay:.7s}.cs-an-txt:nth-child(8)::after{transition-delay:.6s}
.cs-an-txt:nth-child(10)::before{transition-delay:.8s}.cs-an-txt:nth-child(10)::after{transition-delay:.7s}
@media (prefers-reduced-motion:reduce){.cs-an-txt::before{clip-path:none;transition:none}.cs-an-txt::after{opacity:1;transition:none}}
@media (max-width:1100px){.cs-an{--gap:56px;--bp:22px}}
@media (max-width:719px){
.cs-an{grid-template-columns:minmax(0,1fr);column-gap:0}
.cs-an-band{padding:20px 20px;border:1.5px solid #232834;border-top:1.5px dashed #C2C5CC;border-bottom:1.5px dashed #C2C5CC;border-radius:0}
.cs-an-b1{border-top:1.5px solid #232834;border-radius:20px 20px 0 0}
.cs-an-b5{border-bottom:1.5px solid #232834;border-radius:0 0 20px 20px}
.cs-an-txt{padding:18px 0 36px}
.cs-an-txt:last-child{padding-bottom:0}
.cs-an-txt::before,.cs-an-txt::after{display:none}
}
@media (max-width:560px){.cs-parts-head{margin-bottom:36px}.cs-parts-head .v9-sub{font-size:17px}}
/* the record's parts, drawn */
.an-t{font-weight:700;font-size:22px;line-height:1;color:rgba(35,40,52,.9)}
.an-l{display:grid;gap:12px;padding-top:6px;flex:1;min-width:0}
.an-bar{display:block;flex:none;height:10px;border-radius:6px;background:#C2C5CC}
.an-bar.s{background:#E4DFD9}
.an-bar.k{background:#232834}
.an-pin{flex:none;display:flex;align-items:center;height:40px}
.an-acc{padding:0 6px 0 14px;border:1.5px solid #232834;border-radius:20px;background:#fff}
.an-lock{position:relative;flex:none;width:16px;height:20px;margin-right:10px}
.an-lock::before{content:"";position:absolute;left:3px;top:0;width:10px;height:11px;box-sizing:border-box;border:1.5px solid #232834;border-bottom:0;border-radius:6px 6px 0 0}
.an-lock::after{content:"";position:absolute;left:0;bottom:0;width:16px;height:12px;box-sizing:border-box;border:1.5px solid #C43A5C;border-radius:3px;background:#FA5478}
.an-av{flex:none;width:26px;height:26px;box-sizing:border-box;border:1.5px solid #232834;border-radius:50%;background:#F1EEEA}
.an-acc .an-av{box-shadow:0 0 0 2px #fff}
.an-acc .an-av+.an-av{margin-left:-6px}
.cs-an-b2,.cs-an-b3{display:block}
.an-evs{position:relative;display:grid}
.an-evs::before{content:"";position:absolute;left:12.25px;top:20px;bottom:15px;border-left:1.5px solid #E4DFD9}
.an-ev{position:relative;display:flex;align-items:center;gap:12px;height:40px}
.an-ev.o{height:30px}
.an-ev.o .an-av{width:20px;height:20px;margin:0 3px;background:#fff;border-color:#C2C5CC}
.an-ev .an-bar+.an-bar{margin-left:auto}
.an-clk{position:relative;flex:none;width:18px;height:18px;box-sizing:border-box;border:1.5px solid #232834;border-radius:50%}
.an-clk::before{content:"";position:absolute;left:6.75px;top:2.5px;width:3.5px;height:4.5px;border-left:1.5px solid #232834;border-bottom:1.5px solid #232834}
.an-f{display:flex;align-items:center;justify-content:space-between;gap:16px}
.an-lb{font-weight:500;font-size:15px;line-height:1;color:#4f5565}
.an-sel{gap:12px;padding:0 16px;border:1.5px solid #232834;border-radius:12px;background:#fff;font-weight:700;font-size:15px;line-height:1;color:rgba(35,40,52,.9)}
.an-sel i{width:8px;height:8px;box-sizing:border-box;border:solid #232834;border-width:0 1.5px 1.5px 0;rotate:45deg;margin-top:-4px}
.an-opts{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.an-op{flex:none;width:56px;height:26px;box-sizing:border-box;border:1.5px solid #E4DFD9;border-radius:13px;background:#fff}
.an-op.on{border-color:#232834}
.an-op.add{position:relative;width:26px;border:1.5px dashed #C2C5CC}
.an-op.add::before,.an-op.add::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;margin:-.75px 0 0 -5px;background:#4f5565}
.an-op.add::after{rotate:90deg}
.an-li{flex:1;min-width:0;display:grid}
.an-r{display:flex;align-items:center;justify-content:space-between;gap:12px;height:30px}
.an-r.an-tot{height:40px;margin-top:4px;border-top:1.5px solid #C2C5CC}
.an-tt{font-weight:700;font-size:15px;line-height:1;color:rgba(35,40,52,.9)}
.an-rep{align-items:flex-end;gap:4px;width:64px;box-sizing:border-box;padding:8px 10px;border:1.5px solid #232834;border-radius:10px;background:#fff}
.an-rep b{flex:1;align-self:flex-end;border-radius:2px 2px 0 0;background:#E4DFD9}
.an-rep b.k{background:#232834}
.an-meta{margin-top:15px}
.an-acts{gap:8px}
.an-btn{display:grid;place-items:center;height:40px;box-sizing:border-box;padding:0 16px;border:1.5px solid #232834;border-radius:20px;background:#fff;font-weight:700;font-size:14px;line-height:1;color:rgba(35,40,52,.9)}

/* ---------- connected to what you already run: one detail entered once, in the new system, reaching the systems that need
   it in turn. The cards stand in a row joined by a grey track. When the row is well on screen, "Friday" is typed into the
   new system's field, whose outline warms to coral (the section's one coral part); then a short soft coral line runs along
   each stretch of track in turn and is gone under the next card, which shows the detail in its own form with an ink tick.
   It plays once and holds. Under 1101px the cards stand in a column and the track runs down between them ---------- */
.cs-link{border-top:1px solid #E4DFD9}
.cs-link-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:56px}
.cs-link-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:24px 64px;align-items:start}
.cs-link-head .v9-h2{margin:0;text-wrap:balance}
.cs-link-txt{display:grid;gap:18px;max-width:620px}
.cs-link-txt p{font-size:18px;line-height:1.6;color:#4f5565}
/* the two services have no pages yet, so their names stand as plain text where their links will go */
.cs-link-txt .cs-plain{display:flex;flex-wrap:wrap;gap:6px 28px;padding-top:4px;font-weight:700;font-size:17px;line-height:1.5;color:#232834}
.cs-seq{--gw:48px;--gh:40px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gw)}
.cs-card{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0;padding:20px;border:1.5px solid #232834;border-radius:20px;background:#F1EEEA}
.cs-card.src{background:#fff}
.cs-card:not(:last-child)::after{content:"";position:absolute;left:calc(100% + 1.5px);top:50%;width:var(--gw);height:3px;margin-top:-1.5px;background:linear-gradient(90deg,rgba(250,84,120,0),rgba(250,84,120,.8) 35%,rgba(250,84,120,.8) 65%,rgba(250,84,120,0)) -150% 0/60% 100% no-repeat,linear-gradient(#E4DFD9,#E4DFD9) 0 50%/100% 2px no-repeat}
@keyframes csRunX{from{background-position:-150% 0,0 50%}to{background-position:250% 0,0 50%}}
@keyframes csRunY{from{background-position:0 -150%,50% 0}to{background-position:0 250%,50% 0}}
.cs-seq.go .cs-card::after{animation:csRunX .8s cubic-bezier(.65,0,.35,1) both}
.cs-seq.go .cs-card:nth-child(1)::after{animation-delay:1.7s}
.cs-seq.go .cs-card:nth-child(2)::after{animation-delay:2.55s}
.cs-seq.go .cs-card:nth-child(3)::after{animation-delay:3.4s}
.ln-k{font-weight:700;font-size:11.5px;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:#4f5565}
.ln-hd{display:flex;align-items:center;gap:12px;min-height:48px}
.ln-bars{flex:1;min-width:0;display:grid;gap:10px}
.ln-row{display:flex;align-items:center;gap:10px}
.ln-bar{display:block;flex:none;height:10px;border-radius:6px;background:#C2C5CC}
.ln-bar.w{background:#fff}
.ln-t{font-weight:700;font-size:18px;line-height:1;color:rgba(35,40,52,.9)}
.ln-av{flex:none;width:34px;height:34px;box-sizing:border-box;border:1.5px solid #232834;border-radius:50%;background:#fff}
.ln-bx{flex:none;width:16px;height:16px;box-sizing:border-box;border:1.5px solid #232834;border-radius:5px;background:#fff}
.ln-doc{flex:none;width:30px;height:38px;box-sizing:border-box;border:1.5px solid #232834;border-radius:6px;background:linear-gradient(#C2C5CC,#C2C5CC) 6px 9px/14px 3px no-repeat,linear-gradient(#C2C5CC,#C2C5CC) 6px 16px/10px 3px no-repeat,linear-gradient(#232834,#232834) 6px 25px/12px 3px no-repeat,#fff}
.ln-f{display:flex;align-items:center;gap:10px;margin-top:auto;height:46px;padding:0 12px 0 14px;border:1.5px solid #C2C5CC;border-radius:12px;background:#fff}
.ln-lb{font-weight:500;font-size:14px;line-height:1.2;color:#4f5565;white-space:nowrap}
.ln-v{margin-left:auto;font-weight:700;font-size:15px;line-height:1;color:rgba(35,40,52,.9);white-space:nowrap}
.ln-tk{position:relative;flex:none;width:18px;height:18px;border-radius:50%;background:#232834}
.ln-tk::after{content:"";position:absolute;left:6.5px;top:4px;width:4px;height:7px;border:solid #fff;border-width:0 1.5px 1.5px 0;rotate:45deg}
/* the new system: its field warms, then the detail is typed into it */
.cs-card.src .ln-f{transition:border-color .35s ease .8s}
.cs-seq.go .cs-card.src .ln-f{border-color:#FA5478}
.ln-type i{font-style:normal;opacity:0}
.cs-seq.go .ln-type i{opacity:1}
.cs-seq.go .ln-type i:nth-child(1){transition:opacity 0s 1s}
.cs-seq.go .ln-type i:nth-child(2){transition:opacity 0s 1.09s}
.cs-seq.go .ln-type i:nth-child(3){transition:opacity 0s 1.18s}
.cs-seq.go .ln-type i:nth-child(4){transition:opacity 0s 1.27s}
.cs-seq.go .ln-type i:nth-child(5){transition:opacity 0s 1.36s}
.cs-seq.go .ln-type i:nth-child(6){transition:opacity 0s 1.45s}
/* each system receives it as the line reaches its card */
.cs-card:not(.src) .ln-f{opacity:0;translate:0 4px;transition:opacity .35s ease,translate .35s ease}
.cs-seq.go .cs-card:not(.src) .ln-f{opacity:1;translate:none}
.cs-seq.go .cs-card:nth-child(2) .ln-f{transition-delay:2.15s}
.cs-seq.go .cs-card:nth-child(3) .ln-f{transition-delay:3s}
.cs-seq.go .cs-card:nth-child(4) .ln-f{transition-delay:3.85s}
@media (prefers-reduced-motion:reduce){
.cs-seq .cs-card::after{animation:none}
.cs-seq .cs-card.src .ln-f{border-color:#FA5478;transition:none}
.cs-seq .ln-type i{opacity:1;transition:none}
.cs-seq .cs-card:not(.src) .ln-f{opacity:1;translate:none;transition:none}
}
@media (max-width:1100px){
.cs-link-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 56px;align-items:start}
.cs-link-head{grid-template-columns:minmax(0,1fr)}
.cs-seq{grid-template-columns:minmax(0,1fr);row-gap:var(--gh)}
.cs-card:not(:last-child)::after{left:50%;top:calc(100% + 1.5px);width:3px;height:var(--gh);margin:0 0 0 -1.5px;background:linear-gradient(180deg,rgba(250,84,120,0),rgba(250,84,120,.8) 35%,rgba(250,84,120,.8) 65%,rgba(250,84,120,0)) 0 -150%/100% 60% no-repeat,linear-gradient(#E4DFD9,#E4DFD9) 50% 0/2px 100% no-repeat}
.cs-seq.go .cs-card::after{animation-name:csRunY}
}
@media (max-width:820px){.cs-link-grid{grid-template-columns:minmax(0,1fr)}.cs-seq{max-width:440px}}
@media (max-width:560px){.cs-link-grid{gap:40px}.cs-link-txt p{font-size:17px}}

/* ---------- AI where it helps the work: the quietest section. The paragraph and its two quiet text links, beside one small
   still sample from its own words: a record found by describing it. The description is typed in the search field, and the
   record it matches sits under it, with the words it matched on marked in blush. Coral appears once: the field's cursor.
   Still; nothing plays ---------- */
.cs-ai{border-top:1px solid #E4DFD9}
.cs-ai-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 88px;align-items:center}
.cs-ai-txt{display:grid;gap:18px;max-width:600px}
.cs-ai-txt .v9-h2{margin:0;text-wrap:balance}
.cs-ai-txt p{font-size:18px;line-height:1.6;color:#4f5565}
.cs-ai-links{display:flex;flex-wrap:wrap;gap:0 28px}
.v9 .cs-ai-links .cs-go{margin-top:0}
.cs-find{display:grid;gap:14px;max-width:440px;width:100%;justify-self:end;padding:22px;border:1.5px solid #232834;border-radius:20px;background:#fff}
.fd-q{display:flex;align-items:center;gap:12px;min-height:50px;padding:10px 16px;border:1.5px solid #232834;border-radius:14px;background:#fff}
.fd-lens{position:relative;flex:none;width:18px;height:18px}
.fd-lens::before{content:"";position:absolute;left:0;top:0;width:13px;height:13px;box-sizing:border-box;border:1.5px solid #232834;border-radius:50%}
.fd-lens::after{content:"";position:absolute;left:11px;top:11px;width:6px;height:1.5px;background:#232834;rotate:45deg;transform-origin:0 50%}
.fd-qt{font-weight:500;font-size:15px;line-height:1.4;color:rgba(35,40,52,.9)}
.fd-cur{display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-2px;background:#FA5478}
.fd-k{font-weight:700;font-size:11.5px;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:#4f5565}
.fd-rec{display:grid;gap:12px;padding:16px;border:1.5px solid #E4DFD9;border-radius:14px;background:#F1EEEA}
.fd-hd{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fd-t{font-weight:700;font-size:16px;line-height:1.2;color:rgba(35,40,52,.9)}
.fd-mk{padding:1px 4px;border-radius:3px;background:#FDE0E6;color:#232834}
.fd-bars{display:grid;gap:10px}
.fd-bar{display:block;height:10px;border-radius:6px;background:#C2C5CC}
.fd-bar.w{background:#fff}
.fd-av{flex:none;width:28px;height:28px;box-sizing:border-box;border:1.5px solid #232834;border-radius:50%;background:#fff}
.fd-f{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px;padding:0 12px;border-radius:10px;background:#fff}
.fd-lb{font-weight:500;font-size:14px;line-height:1.2;color:#4f5565}
.fd-v{font-weight:700;font-size:14px;line-height:1.2;color:rgba(35,40,52,.9)}
.fd-more{display:grid;gap:10px;padding:0 4px}
@media (max-width:1100px){.cs-ai-grid{gap:40px 56px}}
@media (max-width:820px){.cs-ai-grid{grid-template-columns:minmax(0,1fr)}.cs-find{justify-self:start}}
@media (max-width:560px){.cs-ai-txt p{font-size:17px}.cs-find{padding:18px}.fd-qt{font-size:15px}}

/* ---------- our work: one project told in depth, beside two that follow smaller. The lead shows a wide crop of its software,
   then its name, then three short parts side by side: the problem, what we built, what it replaced. The others stand in a
   narrow column beside it, each with a crop of its own software, its name and one line. Crops are served near the size
   shown (480 or 832px wide, art/custom-software/cs-work-*), set from the logic as they come near the screen; each box keeps
   its crop's shape while it loads, and the image fades in once. The lead's three parts are rows, each named on the left.
   Coral appears once: the lead's kind of software ---------- */
.cs-work{border-top:1px solid #E4DFD9}
.cs-work-head{margin-bottom:48px}
.cs-work-head .v9-h2{margin:0}
.cs-work-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:48px 56px;align-items:start}
.cs-case{display:grid;gap:24px}
.cs-wshot{position:relative;overflow:hidden;border-radius:16px;background:#232834}
.cs-wshot::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(35,40,52,.12);pointer-events:none}
.cs-wshot img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s cubic-bezier(.65,0,.35,1)}
.cs-wshot img.on{opacity:1}
@media (prefers-reduced-motion:reduce){.cs-wshot img{transition:none}}
.cs-case .cs-wshot{aspect-ratio:872/360}
.cs-more .cs-wshot{aspect-ratio:830/452;border-radius:12px}
.cs-wk{display:block;margin:0 0 8px;font-weight:700;font-size:11.5px;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:#4f5565}
.cs-case .cs-wk{color:#d33d5c}
.v9 .cs-wn{margin:0;font-weight:700;font-size:26px;line-height:1.25;letter-spacing:-.02em;text-wrap:balance}
.v9 .cs-wn a{color:#232834;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)}
@media (hover:hover){.v9 .cs-wn a:hover{color:#232834;text-decoration-color:#232834}}
.v9 .cs-wn a:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
.cs-parts3{display:grid}
.cs-part{display:grid;grid-template-columns:150px minmax(0,1fr);gap:6px 32px;padding:16px 0;border-top:1px solid #E4DFD9}
.cs-part h4{margin:0;font-weight:700;font-size:17px;line-height:1.6;color:#232834}
.cs-part p{max-width:620px;font-size:17px;line-height:1.6;color:#4f5565}
.cs-more{display:grid;gap:40px}
.cs-mini{display:grid;gap:18px}
.v9 .cs-mini .cs-wn{font-size:20px;line-height:1.3;letter-spacing:-.01em}
.cs-mini p{margin-top:8px;font-size:17px;line-height:1.6;color:#4f5565}
.cs-work-foot{margin-top:48px;padding-top:8px;border-top:1px solid #E4DFD9}
/* under 1101px the lead comes first and the others follow in two columns; the whole stays within the crops' own width, so
   the lead's crop is never shown much larger than it was made */
@media (max-width:1100px){.cs-work-grid{grid-template-columns:minmax(0,1fr);max-width:872px}.cs-more{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 28px}}
@media (max-width:699px){.cs-more{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.cs-part{grid-template-columns:minmax(0,1fr);gap:4px}}
@media (max-width:560px){.cs-work-head{margin-bottom:32px}.v9 .cs-wn{font-size:22px}.cs-wshot{border-radius:12px}.cs-work-foot{margin-top:40px}}

/* ---------- built to be looked after: the text and its links, with no drawing. The message on the left; beside it, the two
   follow-ups a CTO may have, each under a hairline: how to work with us, and what to do about software that already
   exists (Legacy modernisation has no page yet, so it stands as plain text). The handover drawing proposed for this
   section waits for the ownership line to be confirmed ---------- */
.cs-care{border-top:1px solid #E4DFD9}
.cs-care-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px 88px;align-items:start}
.cs-care-main{display:grid;gap:18px;max-width:640px}
.cs-care-main .v9-h2{margin:0;text-wrap:balance}
.cs-care-main p{font-size:18px;line-height:1.6;color:#4f5565}
.cs-care-next{display:grid;align-content:start}
.cs-care-note{display:grid;justify-items:start;align-content:start;gap:4px;padding:20px 0 22px;border-top:1px solid #E4DFD9}
.cs-care-note:last-child{border-bottom:1px solid #E4DFD9}
.cs-care-note p{font-size:17px;line-height:1.6;color:#4f5565}
.v9 .cs-care-note .cs-go{margin-top:2px}
.cs-care-plain{display:inline-flex;align-items:center;min-height:44px;margin-top:2px;font-weight:700;font-size:17px;line-height:1.3;color:#232834}
@media (max-width:1100px){.cs-care-grid{gap:40px 56px}}
@media (max-width:900px){.cs-care-grid{grid-template-columns:minmax(0,1fr)}.cs-care-next{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px}.cs-care-note:last-child{border-bottom:0}}
@media (max-width:699px){.cs-care-next{grid-template-columns:minmax(0,1fr)}.cs-care-note:last-child{border-bottom:1px solid #E4DFD9}}
@media (max-width:560px){.cs-care-main p{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" and its arrow need 235px with the button's padding). 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)}
}


/* ================= CUSTOM SOFTWARE (this page's own) ================= */

/* ---------- this page's hero. The eyebrow, then a headline that holds two lines at every width. Each headline option is
   sized from its own longer line, measured in Sailec Bold at -.03em (B "Software shaped to" 9.02em; A "the way you work"
   7.98em; C "Software that follows" 9.84em; D "your business works" 9.25em; E "When off-the-shelf" 8.88em): up to 1100px
   the size follows the viewport so that line takes 93% of the column at most, 56px at the largest; from 1101px, where the
   copy column is 560px, each option has its own range, so that line takes 93% of the column at most. The field and the
   button are the same width and height at every size (the shared form rules above; the hero's button carries "Book a
   20-minute call", so it doesn't take Web & App Development's narrower hero button) ---------- */
.v9-hero.cs-hero h1{font-size:min(56px,calc((100vw - 44px) / 9.7))}
.v9-hero.cs-hero h1.cs-h-a{font-size:min(56px,calc((100vw - 44px) / 8.6))}
.v9-hero.cs-hero h1.cs-h-c{font-size:min(56px,calc((100vw - 44px) / 10.6))}
.v9-hero.cs-hero h1.cs-h-d{font-size:min(56px,calc((100vw - 44px) / 10))}
.v9-hero.cs-hero h1.cs-h-e{font-size:min(56px,calc((100vw - 44px) / 9.6))}
@media (max-width:560px){.v9-hero.cs-hero .v9-lead{font-size:17px}}
@media (min-width:1101px){
.v9-hero.cs-hero .v9-hero-grid{grid-template-columns:minmax(560px,5.4fr) minmax(0,6.6fr);gap:48px}
.v9-hero.cs-hero h1,.v9-hero.cs-hero h1.cs-h-a,.v9-hero.cs-hero h1.cs-h-e{font-size:clamp(52px,4.4vw,58px)}
.v9-hero.cs-hero h1.cs-h-c{font-size:clamp(48px,4vw,53px)}
.v9-hero.cs-hero h1.cs-h-d{font-size:clamp(50px,4.2vw,56px)}
.v9-hero.cs-hero .v9-lead{max-width:520px}
/* the drawing is enlarged a little into the page margin (6%, well inside the gutter at every width) but not into the
   column gap, so the full 48px stays between the copy and the drawing */
.cs-hero .v9-illo{width:106%;margin:0 -6% 0 0;transform:none}
}
/* the drawing's box keeps its shape reserved while it loads: the hero animation is 1920 x 1480 */
.cs-hero .v9-illo{aspect-ratio:1920/1480}
/* the landing view: 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.cs-hero{padding:40px 0 64px}
@media (min-width:1101px){.v9-hero.cs-hero{padding:clamp(32px,7vh,84px) 0 72px}}
@media (max-width:560px){.v9-hero.cs-hero{padding:28px 0 48px}}

/* ---------- 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 build 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 ---------- */
.cs-cta .v9-h2{text-wrap:balance}
.cs-cta .v9-sub{text-wrap:pretty}

/* ---------- the hero's "Book a call" button, sized exactly as the homepage's (see "Website pages: shared standards" in
   CLAUDE.md): a fixed 172px, as wide as its label and arrow, so it keeps its width while sending. 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 ---------- */
@media (min-width:821px){.v9.cs-hero .em-talk .v9-hero-form{grid-template-columns:262px auto}}
@media (min-width:561px) and (max-width:820px){.v9.cs-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:561px){.v9.cs-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{width:172px;padding:0}}