/* Support & Maintenance, built from 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 (sp-*) follow the shared ones. Built one section at a time, the hero first */

@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. The page isn't
   in the menu until it goes live; then markMenu() marks its Improve route (and its tile, if it gets one), in coral with the
   menu's own small dot */
body.v9-page #wb_menu .rt[aria-current="page"] b,body.v9-page #wb_menu .tile[aria-current="page"] b{color:#FA5478}
body.v9-page #wb_menu .rt[aria-current="page"] b::after,body.v9-page #wb_menu .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:none}
.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 */
.sp-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{align-self:stretch;width:100%;max-width:534px;margin-left:auto;margin-right:auto;text-align:left}
@media (max-width:820px){.em-cta .em-status{max-width:560px}}
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)}
.em-email .v9-hero-email.bad{border-color:#d33d5c}
.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 .sp-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}
.sp-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)}
.sp-go-a{display:inline-block;transition:transform .3s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .sp-go:hover{color:#232834}.sp-go:hover .sp-go-l{text-decoration-color:#232834}.sp-go:hover .sp-go-a{transform:translateX(3px)}}
.v9 .sp-go:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.sp-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 */
.sp-clients-head{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:44px;text-align:center}
.sp-clients-head .v9-h2{margin:0;text-align:center;text-wrap:balance}
.sp-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){.sp-clients-head{margin-bottom:32px}}
@media (max-width:560px){.sp-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)}
}

/* ================= SUPPORT & MAINTENANCE (this page's own) ================= */

/* ---------- this page's hero, as on QA & Test Automation: the eyebrow, then a headline that holds two lines at every width.
   Each option is sized from its longer line, measured in Sailec Bold at -.03em on the woff2 itself (7 October 2026):
   A "Software kept current," 10.29em, B "long after launch" 7.74em, C "Your software," 6.59em, D "the software you run"
   9.38em. Up to 1100px the size follows the viewport, so that line takes 92% of the column at most, 56px at the largest;
   from 1101px, where the copy column is 560px, A runs from 44px to 48px (494px at most, 88% of the column), D from 46px to
   52px (488px) and B and C from 52px to 58px (B's 449px at most). 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 ---------- */
/* Sailec arrives after the first paint: fixed line heights keep the hero still when it swaps in (the shared eyebrow's
   "normal" line height grew 4px with the font and pushed the hero down; 1.48 is Sailec's own normal, so nothing looks different) */
.v9-hero.sp-hero .v9-eyebrow{line-height:1.48}
.v9-hero.sp-hero .v9-lead :is(b,strong){line-height:1}
.v9-hero.sp-hero h1.sp-h-a{font-size:min(56px,calc((100vw - 44px) / 11.25))}
.v9-hero.sp-hero h1.sp-h-b{font-size:min(56px,calc((100vw - 44px) / 8.45))}
.v9-hero.sp-hero h1.sp-h-c{font-size:min(56px,calc((100vw - 44px) / 7.2))}
.v9-hero.sp-hero h1.sp-h-d{font-size:min(56px,calc((100vw - 44px) / 10.25))}
@media (min-width:821px){.v9.sp-hero .em-talk .v9-hero-form{grid-template-columns:262px auto}}
@media (min-width:561px) and (max-width:820px){.v9.sp-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:561px){.v9.sp-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{width:172px;padding:0}}
@media (max-width:560px){.v9-hero.sp-hero .v9-lead{font-size:17px}}
@media (min-width:1101px){
.v9-hero.sp-hero .v9-hero-grid{grid-template-columns:minmax(560px,5.4fr) minmax(0,6.6fr);gap:48px}
.v9-hero.sp-hero h1.sp-h-a{font-size:clamp(44px,3.6vw,48px)}
.v9-hero.sp-hero h1.sp-h-d{font-size:clamp(46px,4vw,52px)}
.v9-hero.sp-hero h1.sp-h-b,.v9-hero.sp-hero h1.sp-h-c{font-size:clamp(52px,4.4vw,58px)}
.v9-hero.sp-hero .v9-lead{max-width:520px}
/* the drawing is enlarged a little into the page margin, not into the column gap */
.sp-hero .v9-illo{width:106%;margin:0 -6% 0 0;transform:none}
}
/* the drawing's canvas is 1600 x 1320 (art/support/sp-hero-1.json), and the box keeps that shape reserved from the first paint. On
   phones it sits below the form and runs to the window's edges (the canvas carries its own margin, so the hand, the cards and the
   logbook are never cropped), so the words in the drawing read as large as they can */
.sp-hero .v9-illo{aspect-ratio:1600/1320}
@media (max-width:560px){.sp-hero .v9-illo{width:calc(100% + 44px);max-width:none;margin:0 -22px}}
/* the landing view, as on the sister pages: 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.sp-hero{padding:40px 0 64px}
@media (min-width:1101px){.v9-hero.sp-hero{padding:clamp(32px,7vh,84px) 0 72px}}
@media (max-width:560px){.v9-hero.sp-hero{padding:28px 0 48px}}

/* ---------- tap areas and the legacy menu, as CLAUDE.md sets them. 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}

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


/* ---------- software ages, even when nobody touches it (#problem): the copy, and one bone system card drawn from its words.
   "Your system", "Last changed at launch", then its parts as rows inside the card (not Data Engineering's bone card with tags
   beneath it): Packages, Framework, Runtime, Certificate and Know-how. When the card is well in view a short note types beside
   each part, one at a time, and holds: Fixes released, New major version, Support ending, Expires soon, In one person's head.
   The card never moves, and it is ink only: nothing here is alarming. Each note's letters hold their space from the first
   paint, so nothing shifts; scrolled past, or with reduced motion, every note is already written. Side by side from 1024px,
   the card on the right; stacked below; up to 400px each note sits under its part. "End of support" is explained where it
   first appears, from Microsoft's lifecycle overview (learn.microsoft.com, checked 7 October 2026: at the end of support
   "there will be no new security updates, non-security updates, or assisted support") ---------- */
.sp-prob{border-top:1px solid #E4DFD9}
.sp-prob-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px 80px;align-items:center}
.sp-prob-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .sp-prob-copy p{margin:0;max-width:560px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.sp-age{margin:0}
.sp-age-card{box-sizing:border-box;max-width:540px;margin:0 0 0 auto;padding:26px 30px 8px;border:1.75px solid #232834;border-radius:20px;background:#F1EEEA;pointer-events:none;-webkit-user-select:none;user-select:none}
.v9 .sp-age-h{margin:0;font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.01em;color:#232834}
.v9 .sp-age-s{margin:4px 0 0;padding:0 0 18px;border-bottom:1px solid #C2C5CC;font-weight:500;font-size:16px;line-height:1.5;color:#4f5565}
.sp-age-rows{display:grid}
.sp-age-r{display:grid;grid-template-columns:128px minmax(0,1fr);column-gap:20px;align-items:baseline;padding:15px 0;border-bottom:1px solid #C2C5CC}
.sp-age-r:last-child{border-bottom:0}
.v9 .sp-age-k{margin:0;font-weight:700;font-size:17px;line-height:1.4;color:#232834}
.v9 .sp-age-n{margin:0;font-weight:500;font-size:17px;line-height:1.4;color:#232834}
.v9 .sp-age-n i{font:inherit;font-style:normal;opacity:0}
.v9 .sp-age.go .sp-age-n i{opacity:1;transition:opacity .12s linear}
.sp-age.end .sp-age-card *{transition:none!important}
@media (prefers-reduced-motion:reduce){.sp-age .sp-age-card *{transition:none!important}}
@media (max-width:1023px){.sp-prob-grid{grid-template-columns:minmax(0,1fr)}.sp-age-card{margin:0;max-width:560px}}
@media (max-width:560px){.sp-age-card{padding:20px 20px 6px}.sp-age-r{grid-template-columns:112px minmax(0,1fr);column-gap:14px;padding:13px 0}}
@media (max-width:400px){.sp-age-r{grid-template-columns:minmax(0,1fr);row-gap:2px}}


/* ---------- what we look after (#scope): the page's one bone band. The heading and its line, then the items in three rows, each
   named in the left margin (not QA's grid, Web & App Development's index or AI Security & Governance's columns by time): Kept
   current (regular updates, security fixes first, upgrades planned ahead), Kept working (monitoring and alerts, fixes by
   priority, small improvements) and Kept on record (renewals tracked, documentation kept current, a monthly report). Each item
   is its icon, title and line; the icon is drawn for this page (tools/sp-icons-scene.js) and plays its hover Lottie
   (art/support/sp-ic-*.json, 13 KB at most) as the pointer rests on the item, from 821px with a mouse or trackpad, never with
   reduced motion. The items aren't links, so there is nothing to focus. Beneath, under one tint hairline, the three hand-off
   lines, each link 44px tall, in ink with a tint underline (coral text would fall short of 4.5:1 on bone). Every item, and so
   the section, is hidden until it's confirmed; review mode (showUnconfirmed) shows them with a "To confirm" tag. From 1101px
   each row's name sits in a 200px margin with its items three across; below, the name sits above its row, three across to
   821px, two to 600px, one on phones. "Security fixes first" checked 7 October 2026 against CISA, "Reducing the Significant
   Risk of Known Exploited Vulnerabilities" (cisa.gov): CISA recommends every organisation prioritise remediation of the
   vulnerabilities listed in its KEV catalog ---------- */
.sp-scope-head{max-width:720px;margin:0 0 52px}
.sp-scope-head .v9-h2{margin:0 0 16px;text-wrap:balance}
.v9 .sp-scope-sub{margin:0;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.sp-row{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:40px;padding:36px 0 44px;border-top:1px solid #C2C5CC}
.v9 .sp-row-k{margin:0;padding-top:22px;font-weight:700;font-size:18px;line-height:1.35;letter-spacing:-.01em;color:#232834}
.sp-row-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin:0;padding:0;list-style:none}
.sp-row-list > li{display:block;margin:0;padding:0;min-width:0;--d:0s}
.sp-row-list > li:nth-child(2){--d:.08s}.sp-row-list > li:nth-child(3){--d:.16s}
.sp-row-list .cb-ic-box{grid-row:auto;width:64px;height:64px;margin:0 0 16px -4px}
.v9 .sp-row-list h3{margin:0 0 8px;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.01em;color:#232834;text-wrap:balance}
.v9 .sp-row-list p{margin:0;font-weight:500;font-size:17px;line-height:1.55;color:#4f5565;text-wrap:pretty}
.sp-more{display:grid;margin:0;padding:24px 0 0;border-top:1px solid #C2C5CC;list-style:none}
.v9 .sp-more li{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;min-height:44px;margin:0;padding:0;font-weight:500;font-size:17px;line-height:1.4;color:#4f5565}
.v9 .sp-more a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;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)}
.v9 .sp-more a:hover,.v9 .sp-more a:focus-visible{color:#232834;text-decoration-color:#232834}
.v9 .sp-more a:focus-visible{outline:2px solid #232834;outline-offset:2px;border-radius:2px}
@media (prefers-reduced-motion:reduce){.v9 .sp-more a{transition:none}}
@media (max-width:1100px){.sp-row{grid-template-columns:minmax(0,1fr);row-gap:24px}.v9 .sp-row-k{padding-top:0}}
@media (max-width:820px){.sp-row-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.sp-scope-head{margin-bottom:40px}.sp-row{padding:28px 0 36px}.sp-row-list{grid-template-columns:minmax(0,1fr);gap:32px}.sp-row-list .cb-ic-box{width:56px;height:56px;margin-bottom:12px}.v9 .sp-more li{display:block;padding:10px 0 0}.v9 .sp-more li span{display:block}}
/* review mode: the hidden items show, each tagged, so they can be read in place before they're confirmed */
.v9.sp-scope.sp-review{display:block!important}
.sp-scope.sp-review li[data-confirm]{display:block!important}
.sp-review .sp-scope-head .v9-h2::after,.sp-review li[data-confirm] h3::after{content:"To confirm";display:inline-block;margin-left:10px;padding:2px 9px;border-radius:10px;background:#fff;font-weight:700;font-size:12px;line-height:18px;letter-spacing:.06em;text-transform:uppercase;color:#4f5565;vertical-align:middle}


/* ---------- small updates, planned upgrades (#updates): the copy on the right, and on the left one framework's support windows,
   static, with no dates and no Today mark. Three versions as bars on one quiet time axis, each starting after the last: full
   support (white, in the ink outline), then security fixes only (shade), then a short ink tick for the end of support. The one
   coral part is the marker on the oldest bar, "Your version"; just before that bar ends, a short ink line drops to the next
   version, "Upgrade planned". Not Performance & Optimisation's trace (spans of one request) or AI Security & Governance's
   timeline: lifetimes of versions, side by side. Every label sits above, beside or under its bar, never on it, so nothing
   overlaps at any width; the bars keep their proportions. Checked 7 October 2026 against Semantic Versioning 2.0.0 (semver.org:
   a major version for incompatible API changes, minor and patch versions for backward compatible changes), Node.js's
   End-Of-Life page (nodejs.org: major versions are released, patched and designated end of life on a predictable schedule) and
   Microsoft's lifecycle definitions (learn.microsoft.com: end of servicing, when a version will no longer receive quality or
   security updates) ---------- */
.sp-upd{border-top:1px solid #E4DFD9}
.sp-upd-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 80px;align-items:center}
.sp-upd-copy{grid-column:2;grid-row:1}
.sp-upd-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .sp-upd-copy p{margin:0;max-width:560px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.sp-win{grid-column:1;grid-row:1;margin:0}
.sp-win-art{max-width:620px;pointer-events:none;-webkit-user-select:none;user-select:none}
.sp-win-key{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0 0 30px;padding:0;list-style:none}
.v9 .sp-win-key li{display:flex;align-items:center;gap:10px;margin:0;font-weight:500;font-size:16px;line-height:1.3;color:#4f5565}
.sp-win-sw{flex:none;display:block;box-sizing:border-box;width:30px;height:14px;border:1.75px solid #232834;border-radius:7px;background:#fff}
.sp-win-sw.s{background:#E4DFD9}
.sp-win-sw.e{width:1.75px;height:24px;margin:0 6px;border:0;border-radius:1px;background:#232834}
.sp-win-rows{display:grid}
.v9 .sp-win-you{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-weight:700;font-size:16px;line-height:1.3;color:#232834}
.sp-win-dot{flex:none;display:block;box-sizing:border-box;width:13px;height:13px;border:1.75px solid #C43A5C;border-radius:50%;background:#FA5478}
.sp-win-r{position:relative;height:28px}
.sp-win-r.r3{margin-top:20px}
.sp-win-bar{position:absolute;top:0;bottom:0;display:flex;box-sizing:border-box;width:58%;border:1.75px solid #232834;border-radius:14px;background:#fff}
.r1 .sp-win-bar{left:0}.r2 .sp-win-bar{left:21%}.r3 .sp-win-bar{left:42%}
.sp-win-bar i{display:block;height:100%}
.sp-win-bar .f{flex:62 1 0;border-radius:12px 0 0 12px;background:#fff}
.sp-win-bar .s{flex:38 1 0;border-left:1.75px solid #232834;border-radius:0 12px 12px 0;background:#E4DFD9}
.sp-win-bar::after{content:"";position:absolute;right:-1.75px;top:-9px;bottom:-9px;width:1.75px;border-radius:1px;background:#232834}
.sp-win-up{position:relative;height:46px}
.sp-win-ln{position:absolute;left:50%;top:0;bottom:3px;width:1.75px;margin-left:-.875px;background:#232834}
.sp-win-ln::after{content:"";position:absolute;left:-4.1px;bottom:-4px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid #232834}
.v9 .sp-win-up-l{position:absolute;left:calc(50% + 14px);top:50%;transform:translateY(-50%);margin:0;font-weight:700;font-size:16px;line-height:1.2;color:#232834;white-space:nowrap}
.v9 .sp-win-ax{margin:22px 0 0;padding:10px 0 0;border-top:1.75px solid #C2C5CC;font-weight:500;font-size:16px;line-height:1.3;color:#4f5565;text-align:right}
@media (max-width:1023px){.sp-upd-grid{grid-template-columns:minmax(0,1fr)}.sp-upd-copy,.sp-win{grid-column:1;grid-row:auto}.sp-win-art{max-width:600px}}
@media (max-width:560px){.sp-win-key{gap:8px 18px;margin-bottom:24px}}


/* ---------- renewals come round faster now (#renewals): the copy on the left, and on the right one certificate card above the
   longest life a public certificate can have, drawn as bars in proportion (398, 200, 100 and 47 days), each labelled with the
   date it applies from. The first bar is there from the start; when the drawing is well in view the shorter steps arrive one at
   a time and hold, so the bars settle into a descending staircase. The one coral part is the last step, 47 days. Scrolled past,
   or with reduced motion, the whole staircase shows at once. On phones each date sits above its bar and the day count beside
   it, so nothing overlaps at 360px. Dates read 7 October 2026 in the CA/Browser Forum's TLS Baseline Requirements, version 2.3.1
   of 4 October 2026, section 1.2.2 (maximum validity of subscriber certificates: 200 days from 2026-03-15, 100 days from
   2027-03-15, 47 days from 2029-03-15; schedule introduced by Ballot SC081, adopted 2025-04-11, listed as passed on
   cabforum.org/ballots); 398 days for certificates issued before 15 March 2026, from the ballot's table on the Forum's
   servercert-wg list. Scope: publicly-trusted TLS server certificates, the ones websites use ---------- */
.sp-ren{border-top:1px solid #E4DFD9}
.sp-ren-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px 80px;align-items:center}
.sp-ren-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .sp-ren-copy p{margin:0;max-width:560px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.sp-cert{margin:0}
.sp-cert-art{max-width:560px;margin:0 0 0 auto;pointer-events:none;-webkit-user-select:none;user-select:none}
.sp-cert-card{display:flex;align-items:center;gap:16px;width:max-content;max-width:100%;margin:0 0 30px;padding:16px 24px 16px 18px;border:1.75px solid #232834;border-radius:16px;background:#fff}
.sp-cert-seal{flex:none;display:block;box-sizing:border-box;width:36px;height:36px;border:1.75px solid #232834;border-radius:50%;background:#E4DFD9;box-shadow:inset 0 0 0 7px #fff}
.sp-cert-tx{display:grid;gap:2px}
.v9 .sp-cert-t{font-weight:700;font-size:18px;line-height:1.25;color:#232834}
.v9 .sp-cert-s{font-weight:500;font-size:16px;line-height:1.3;color:#4f5565}
.v9 .sp-cert-k{margin:0 0 14px;font-weight:700;font-size:16px;line-height:1.3;color:#232834}
.sp-cert-steps{display:grid;gap:16px;margin:0;padding:0;list-style:none}
.v9 .sp-cert-steps li{display:grid;grid-template-columns:200px minmax(0,1fr);align-items:center;column-gap:16px;margin:0}
.v9 .sp-cert-d{font-weight:500;font-size:16px;line-height:1.3;color:#4f5565}
.sp-cert-row{display:flex;align-items:center;gap:12px;min-width:0}
.sp-cert-bar{flex:none;display:block;box-sizing:border-box;height:26px;border:1.75px solid #232834;border-radius:13px;background:#E4DFD9}
.st1 .sp-cert-bar{width:calc((100% - 96px) * 1)}
.st2 .sp-cert-bar{width:calc((100% - 96px) * .5025)}
.st3 .sp-cert-bar{width:calc((100% - 96px) * .2513)}
.st4 .sp-cert-bar{width:max(26px,calc((100% - 96px) * .1181));border-color:#C43A5C;background:#FA5478}
.v9 .sp-cert-n{flex:none;font-weight:700;font-size:16px;line-height:1.2;color:#232834;white-space:nowrap}
.sp-cert .st2,.sp-cert .st3,.sp-cert .st4{opacity:0;transform:translateY(4px)}
.sp-cert.go .st2,.sp-cert.go .st3,.sp-cert.go .st4{opacity:1;transform:none;transition:opacity .5s cubic-bezier(.65,0,.35,1),transform .5s cubic-bezier(.65,0,.35,1)}
.sp-cert.go .st2{transition-delay:.4s}.sp-cert.go .st3{transition-delay:1.1s}.sp-cert.go .st4{transition-delay:1.8s}
.sp-cert.end .sp-cert-steps li{transition:none!important}
@media (prefers-reduced-motion:reduce){.sp-cert .sp-cert-steps li{opacity:1;transform:none;transition:none!important}}
@media (max-width:1023px){.sp-ren-grid{grid-template-columns:minmax(0,1fr)}.sp-cert-art{margin:0;max-width:600px}}
@media (max-width:640px){.v9 .sp-cert-steps li{grid-template-columns:minmax(0,1fr);row-gap:6px}.sp-cert-steps{gap:18px}}


/* ---------- when something goes wrong (#response): the copy and the Urgent help line on the left; on the right, the page's one
   interaction. Four example reports as real buttons (at least 48px tall, exactly one pressed: aria-pressed), above a white card
   holding the priorities as a real table, every row always visible, so it reads in full without the buttons. Choosing a report
   marks its row with a coral outline and a bold name (aria-current) and says the result politely; the first report is chosen
   from the start. Only colours and weights change, and the name column is fixed, so nothing below moves. With reduced motion
   the mark moves at once. No response times are stated: the card says they are agreed in each support plan. Below 560px the
   buttons stack at full width. Not Data Engineering's figures that open a panel, QA's step buttons or AI Security &
   Governance's checkboxes: an example picks its priority. The review line checked 7 October 2026 against the Google SRE Book,
   "Postmortem Culture: Learning from Failure" (sre.google: a blameless postmortem focuses on the contributing causes without
   indicting any individual or team, and puts preventive actions in place) ---------- */
.sp-resp{border-top:1px solid #E4DFD9}
.sp-resp-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px 80px;align-items:start}
.sp-resp-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .sp-resp-copy p{margin:0;max-width:540px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .sp-resp-copy .sp-resp-alt{margin-top:20px;font-size:17px}
.v9 .sp-resp-alt a{display:inline-block;padding:11px 0;font-weight:700;color:#d33d5c;text-decoration:none;white-space:nowrap}
.v9 .sp-resp-alt a:hover,.v9 .sp-resp-alt a:focus-visible{color:#d33d5c;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.v9 .sp-pri-k{margin:0 0 12px;font-weight:700;font-size:16px;line-height:1.3;color:#232834}
.sp-pri-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 20px}
.v9 .sp-pri-b{display:flex;align-items:center;box-sizing:border-box;min-height:56px;margin:0;padding:10px 18px;border:1.75px solid #C2C5CC;border-radius:16px;background:#fff;font-family:inherit;font-weight:500;font-size:16px;line-height:1.35;color:#232834;text-align:left;cursor:pointer;transition:border-color .2s cubic-bezier(.65,0,.35,1),background-color .2s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .sp-pri-b:hover{border-color:#232834}}
.v9 .sp-pri-b[aria-pressed="true"]{border-color:#232834;background:#F1EEEA}
.v9 .sp-pri-b:focus-visible{outline:3px solid #d33d5c;outline-offset:3px}
.sp-pri-card{padding:20px 20px 16px;border:1.75px solid #232834;border-radius:20px;background:#fff}
.v9 .sp-pri-t{width:100%;margin:-6px 0 0;border:0;border-collapse:separate;border-spacing:0 6px;background:none}
.v9 .sp-pri-cap{caption-side:top;margin:0;padding:0 0 8px;font-weight:700;font-size:14px;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:#4f5565;text-align:left}
.v9 .sp-pri-t th,.v9 .sp-pri-t td{border:0;background:none;text-align:left;vertical-align:top}
.v9 .sp-pri-t thead th{padding:0 14px 2px;font-weight:500;font-size:14px;line-height:1.3;color:#4f5565}
.v9 .sp-pri-t tbody th,.v9 .sp-pri-t tbody td{padding:13px 14px;font-size:16px;line-height:1.45;transition:box-shadow .25s cubic-bezier(.65,0,.35,1)}
.v9 .sp-pri-t tbody th{width:112px;border-radius:12px 0 0 12px;font-weight:500;color:#232834}
.v9 .sp-pri-t tbody td{border-radius:0 12px 12px 0;font-weight:500;color:#4f5565}
.v9 .sp-pri-t tbody tr.on th{font-weight:700;box-shadow:inset 2px 0 0 #FA5478,inset 0 2px 0 #FA5478,inset 0 -2px 0 #FA5478}
.v9 .sp-pri-t tbody tr.on td{color:#232834;box-shadow:inset -2px 0 0 #FA5478,inset 0 2px 0 #FA5478,inset 0 -2px 0 #FA5478}
.v9 .sp-pri-note{margin:10px 14px 0;font-weight:500;font-size:15px;line-height:1.45;color:#4f5565}
.sp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.v9 .sp-pri-b,.v9 .sp-pri-t tbody th,.v9 .sp-pri-t tbody td{transition:none}}
@media (max-width:1023px){.sp-resp-grid{grid-template-columns:minmax(0,1fr)}.sp-pri{max-width:640px}}
@media (max-width:560px){.sp-pri-btns{grid-template-columns:minmax(0,1fr)}.v9 .sp-pri-b{min-height:48px;padding:10px 16px}.sp-pri-card{padding:16px 12px 14px}.v9 .sp-pri-t tbody th{width:88px;padding:12px 10px}.v9 .sp-pri-t tbody td{padding:12px 10px}.v9 .sp-pri-t thead th{padding:0 10px 2px}.v9 .sp-pri-note{margin:10px 10px 0;font-size:16px}}


/* ---------- taking over from another team (#takeover): the drawing on the left, the copy on the right. A key ring, drawn in the
   family's line: one ink ring at the top, and six tags hanging from it in two rows of three at every width, each tag naming an
   account and who owns it: Domain, Hosting, Code, App stores, Payments and Email. Five read "Your company"; Code reads "A former
   supplier", and when the drawing is well in view it changes once to "Your company" beside a small ink tick, and its hole warms
   to coral, the one coral part. It plays once and holds; scrolled past, or with reduced motion, it shows the changed tag. Both
   owner lines sit in the same place, so the tag keeps its size. The drawing keeps its shape with aspect-ratio (taller on phones,
   where the owners take two lines) ---------- */
.sp-take{border-top:1px solid #E4DFD9}
.sp-take-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 80px;align-items:center}
.sp-take-copy{grid-column:2;grid-row:1}
.sp-take-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .sp-take-copy p{margin:0;max-width:560px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.sp-ring{grid-column:1;grid-row:1;margin:0}
.sp-ring-art{position:relative;max-width:560px;aspect-ratio:560/450;pointer-events:none;-webkit-user-select:none;user-select:none}
.v9 svg.sp-ring-ln{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:#232834;stroke-width:1.75px}
.sp-ring-ln path{vector-effect:non-scaling-stroke}
.sp-ring-o{position:absolute;left:50%;top:7%;width:48px;height:48px;transform:translate(-50%,-50%);box-sizing:border-box;border:5px solid #232834;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 4px #E4DFD9}
.sp-ring-tags{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.v9 .sp-tag{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-sizing:border-box;width:29%;height:25%;margin:0;padding:18px 10px 8px;border:1.75px solid #232834;border-radius:14px;background:#fff;text-align:center;transform:translateX(-50%)}
.sp-tag::before{content:"";position:absolute;left:50%;top:7px;box-sizing:border-box;width:11px;height:11px;margin-left:-5.5px;border:1.75px solid #232834;border-radius:50%;background:#fff;transition:background-color .4s cubic-bezier(.65,0,.35,1) 1.3s,border-color .4s cubic-bezier(.65,0,.35,1) 1.3s}
.sp-tag.t1{left:17%;top:30%}.sp-tag.t2{left:50%;top:30%}.sp-tag.t3{left:83%;top:30%}
.sp-tag.t4{left:17%;top:64%}.sp-tag.t5{left:50%;top:64%}.sp-tag.t6{left:83%;top:64%}
.v9 .sp-tag b{font-weight:700;font-size:17px;line-height:1.2;color:#232834}
.v9 .sp-tag-o{display:grid;justify-items:center;font-weight:500;font-size:16px;line-height:1.25;color:#4f5565}
.sp-tag-o > span{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.sp-tag.mv .o1{opacity:0;transform:translateY(3px)}
.sp-ring.go .sp-tag.mv .o0{opacity:0;transform:translateY(-3px);transition:opacity .3s cubic-bezier(.65,0,.35,1) .9s,transform .3s cubic-bezier(.65,0,.35,1) .9s}
.sp-ring.go .sp-tag.mv .o1{opacity:1;transform:none;color:#232834;transition:opacity .4s cubic-bezier(.65,0,.35,1) 1.2s,transform .4s cubic-bezier(.65,0,.35,1) 1.2s}
.sp-tag-tk{flex:none;display:block;width:16px;height:16px;border-radius:50%;background:#232834}
.v9 .sp-tag-tk svg{display:block;width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sp-ring.go .sp-tag.mv::before{border-color:#C43A5C;background:#FA5478}
.sp-ring.end .sp-ring-art *,.sp-ring.end .sp-tag::before{transition:none!important}
@media (prefers-reduced-motion:reduce){.sp-ring .sp-ring-art *,.sp-ring .sp-tag::before{transition:none!important}}
@media (max-width:1023px){.sp-take-grid{grid-template-columns:minmax(0,1fr)}.sp-take-copy,.sp-ring{grid-column:1;grid-row:auto}.sp-ring-art{max-width:600px}}
@media (max-width:560px){.sp-ring-art{aspect-ratio:32/44}.v9 .sp-tag{width:31%;height:27%;padding:18px 5px 6px;gap:2px}.sp-tag.t1,.sp-tag.t4{left:16.5%}.sp-tag.t3,.sp-tag.t6{left:83.5%}.sp-tag.t1,.sp-tag.t2,.sp-tag.t3{top:27%}.sp-tag.t4,.sp-tag.t5,.sp-tag.t6{top:62%}.v9 .sp-tag b{font-size:16px}.v9 .sp-tag-o{font-size:15px}.sp-tag-o > span{flex-wrap:wrap;gap:3px}}


/* ---------- start with a health check (#start): the copy on the left, and on the right one short report, bound at the top (not
   the hero's logbook, which opens like a book): a bone cover, "Health check / Your system", that lifts once from its binding
   when the drawing is well in view, to show the first page beneath: four findings ranked by risk, each on its own line beside
   its rank. The top finding carries the one coral part, a "Fixed first" tab, which settles in once the cover has lifted. Not a
   checklist (nothing is ticked), a timeline or steps on a track. The cover lies over the page, so the box keeps the page's
   height; scrolled past, or with reduced motion, the page shows open with its tab. The engagement models link stays hidden
   until Engagement Models describes support ---------- */
.sp-start{border-top:1px solid #E4DFD9}
.sp-start-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px 80px;align-items:center}
.sp-start-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .sp-start-copy p{margin:0;max-width:560px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .sp-start-copy p + p{margin-top:20px}
.sp-hc{margin:0}
.sp-hc-art{position:relative;max-width:520px;margin:0 0 0 auto;perspective:1400px;pointer-events:none;-webkit-user-select:none;user-select:none}
.sp-hc-bind{position:relative;z-index:2;display:block;height:16px;border:1.75px solid #232834;border-radius:12px 12px 4px 4px;background:#E4DFD9}
.sp-hc-page{box-sizing:border-box;margin:-2px 8px 0;padding:22px 24px 14px;border:1.75px solid #232834;border-top:0;border-radius:0 0 18px 18px;background:#fff}
.v9 .sp-hc-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin:0;padding:0 0 14px;border-bottom:1px solid #E4DFD9;font-weight:700;font-size:20px;line-height:1.3;color:#232834}
.v9 .sp-hc-r{font-weight:500;font-size:15px;color:#4f5565}
.sp-hc-list{margin:0;padding:0;list-style:none}
.v9 .sp-hc-list li{display:flex;align-items:center;gap:14px;margin:0;padding:13px 0;border-bottom:1px solid #E4DFD9}
.v9 .sp-hc-list li:last-child{border-bottom:0}
.sp-hc-n{flex:none;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:28px;height:28px;border:1.75px solid #232834;border-radius:50%;font-weight:700;font-size:14px;line-height:1;color:#232834}
.v9 .sp-hc-t{flex:1 1 auto;min-width:0;font-weight:500;font-size:16px;line-height:1.4;color:#232834}
.sp-hc-tab{flex:none;display:inline-flex;align-items:center;height:28px;padding:0 11px;border:1.5px solid #C43A5C;border-radius:14px;background:#FA5478;font-weight:700;font-size:14px;line-height:1;color:#fff;white-space:nowrap;opacity:0;transform:translateX(6px)}
.sp-hc-cover{position:absolute;z-index:1;left:8px;right:8px;top:14px;bottom:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;box-sizing:border-box;padding:0 32px;border:1.75px solid #232834;border-top:0;border-radius:0 0 18px 18px;background:#F1EEEA;transform-origin:50% 0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.v9 .sp-hc-ct{font-weight:700;font-size:30px;line-height:1.15;letter-spacing:-.02em;color:#232834}
.v9 .sp-hc-cs{font-weight:500;font-size:17px;line-height:1.3;color:#4f5565}
.sp-hc.go .sp-hc-cover{transform:rotateX(-100deg);opacity:0;transition:transform 1s cubic-bezier(.65,0,.35,1) .4s,opacity .25s linear 1.15s}
.sp-hc.go .sp-hc-tab{opacity:1;transform:none;transition:opacity .4s cubic-bezier(.65,0,.35,1) 1.6s,transform .4s cubic-bezier(.65,0,.35,1) 1.6s}
.sp-hc.end .sp-hc-art *{transition:none!important}
@media (prefers-reduced-motion:reduce){.sp-hc .sp-hc-art *{transition:none!important}.sp-hc .sp-hc-cover{opacity:0;transform:none}.sp-hc .sp-hc-tab{opacity:1;transform:none}}
@media (max-width:1023px){.sp-start-grid{grid-template-columns:minmax(0,1fr)}.sp-hc-art{margin:0;max-width:560px}}
@media (max-width:560px){.sp-hc-page{padding:18px 16px 10px}.v9 .sp-hc-list li{flex-wrap:wrap;gap:10px 12px}.sp-hc-tab{margin-left:40px}.sp-hc-cover{padding:0 22px}.v9 .sp-hc-r{font-size:16px}}


/* ---------- questions worth asking (#questions): the heading on the left from 1024px, and every question with its answer open
   in one reading column on the right, a hairline between them, with no accordion (Join the team has one) and no FAQ structured
   data. Not QA's centred column, SEO & AI Search's two columns, Application Security's rows with the answer to the right or AI
   Security & Governance's groups. "Do you work outside office hours?" stays hidden (style="display:none") until the hours are
   confirmed; no answer states a response time, an hour or a tool. Stacked below 1024px ---------- */
.sp-faq{border-top:1px solid #E4DFD9}
.sp-faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:32px 80px;align-items:start}
.v9 .sp-faq-h{margin:0;text-wrap:balance}
.sp-faq-list{max-width:720px}
.sp-faq-q{padding:26px 0;border-top:1px solid #E4DFD9}
.sp-faq-q:first-child{padding-top:0;border-top:0}
.sp-faq-q:last-child{padding-bottom:0}
.v9 .sp-faq-q h3{margin:0 0 8px;font-weight:700;font-size:20px;line-height:1.35;letter-spacing:-.01em;color:#232834;text-wrap:balance}
.v9 .sp-faq-q p{margin:0;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .sp-faq-q a{display:inline-block;padding:11px 0;margin:-11px 0;font-weight:700;color:#d33d5c;text-decoration:none;white-space:nowrap}
.v9 .sp-faq-q a:hover,.v9 .sp-faq-q a:focus-visible{color:#d33d5c;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
@media (max-width:1023px){.sp-faq-grid{grid-template-columns:minmax(0,1fr)}.v9 .sp-faq-h{margin-bottom:8px}}
@media (max-width:560px){.sp-faq-q{padding:22px 0}}


/* ================= THE PHONE TYPE SCALE: written 7 October 2026 by tools/phone-type.js. Up to 560px: h1 34px, section headings 26px, titles 18 to 20px, body 16px; nothing gets larger. To be run again as each section is added ================= */
@media (max-width:560px){
.v9-h2{font-size:26px;line-height:1.18;letter-spacing:-.025em}
.v9-head .v9-sub,.em-center .v9-sub,.v9 .sp-go,.ai-clients-head .v9-sub,.sp-clients-head .v9-sub,.v9 .sp-prob-copy p,.v9 .sp-age-k,.v9 .sp-age-n,.v9 .sp-scope-sub,.v9 .sp-row-list p,.v9 .sp-more li,.v9 .sp-upd-copy p,.v9 .sp-ren-copy p,.v9 .sp-cert-t,.v9 .sp-resp-copy p,.v9 .sp-resp-copy .sp-resp-alt,.v9 .sp-take-copy p,.v9 .sp-start-copy p,.v9 .sp-hc-cs,.v9 .sp-faq-q p{font-size:16px}
.v9-hero h1{font-size:min(34px,clamp(40px,4.6vw,64px));line-height:1.12}
.v9-hero .v9-lead,.v9 .sp-row-k{font-size:17px}
.v9-hero.sp-hero h1.sp-h-b{font-size:min(34px,min(56px,calc((100vw - 44px) / 8.45)));line-height:1.12}
.v9-hero.sp-hero h1.sp-h-c{font-size:min(34px,min(56px,calc((100vw - 44px) / 7.2)));line-height:1.12}
.v9 .sp-age-h{font-size:20px}
.v9 .sp-row-list h3,.v9 .sp-hc-h,.v9 .sp-faq-q h3{font-size:18px}
.v9 .sp-hc-ct{font-size:26px}
}