/* Accessibility, built from Web & App Development v2 (page-web-development-v2.css) as Discovery & MVP carries it: 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 (ax-*) 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 menu stays
   as it is for now; markMenu() marks its Improve what you already run route, 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 */
.ax-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 .ax-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}
.ax-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)}
.ax-go-a{display:inline-block;transition:transform .3s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .ax-go:hover{color:#232834}.ax-go:hover .ax-go-l{text-decoration-color:#232834}.ax-go:hover .ax-go-a{transform:translateX(3px)}}
.v9 .ax-go:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.ax-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 */
.ax-clients-head{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:44px;text-align:center}
.ax-clients-head .v9-h2{margin:0;text-align:center;text-wrap:balance}
.ax-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){.ax-clients-head{margin-bottom:32px}}
@media (max-width:560px){.ax-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)}
}



/* ================= ACCESSIBILITY (this page's own) ================= */

/* ---------- this page's hero, as on Discovery & MVP: 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 (October 10, 2026): A "Accessible
   by design," 9.99em ("and kept that way" 8.15em), B "Software more people" 10.30em, C "Open to everyone" 8.26em, D "Usable by
   more people," 10.83em and E "Accessibility that lasts" 10.33em. Up to 1100px the size follows the viewport, so that line takes
   91% of the column at most, 56px at the largest; from 1101px, where the copy column is 560px, the longer line stays under 500px:
   A runs from 44px to 50px (499px at most), B from 42px to 48px (495px), C from 52px to 60px (496px), D from 40px to 46px (498px)
   and E from 42px to 48px (496px). 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 ---------- */
/* fixed line heights keep the hero still as Sailec swaps in (1.48 is Sailec's own normal) */
.v9-hero.ax-hero .v9-eyebrow{line-height:1.48}
.v9-hero.ax-hero .v9-lead :is(b,strong){line-height:1}
.v9-hero.ax-hero h1.ax-h-a{font-size:min(56px,calc((100vw - 44px) / 10.92))}
.v9-hero.ax-hero h1.ax-h-b{font-size:min(56px,calc((100vw - 44px) / 11.27))}
.v9-hero.ax-hero h1.ax-h-c{font-size:min(56px,calc((100vw - 44px) / 9.04))}
.v9-hero.ax-hero h1.ax-h-d{font-size:min(56px,calc((100vw - 44px) / 11.84))}
.v9-hero.ax-hero h1.ax-h-e{font-size:min(56px,calc((100vw - 44px) / 11.31))}
@media (min-width:821px){.v9.ax-hero .em-talk .v9-hero-form{grid-template-columns:262px auto}}
@media (min-width:561px) and (max-width:820px){.v9.ax-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:561px){.v9.ax-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{width:172px;padding:0}}
@media (max-width:560px){.v9-hero.ax-hero .v9-lead{font-size:17px}}
@media (min-width:1101px){
.v9-hero.ax-hero .v9-hero-grid{grid-template-columns:minmax(560px,5.4fr) minmax(0,6.6fr);gap:48px}
.v9-hero.ax-hero h1.ax-h-a{font-size:clamp(44px,3.8vw,50px)}
.v9-hero.ax-hero h1.ax-h-b{font-size:clamp(42px,3.65vw,48px)}
.v9-hero.ax-hero h1.ax-h-c{font-size:clamp(52px,4.4vw,60px)}
.v9-hero.ax-hero h1.ax-h-d{font-size:clamp(40px,3.5vw,46px)}
.v9-hero.ax-hero h1.ax-h-e{font-size:clamp(42px,3.65vw,48px)}
.v9-hero.ax-hero .v9-lead{max-width:520px}
/* the drawing is enlarged a little into the page margin, not into the column gap */
.ax-hero .v9-illo{width:106%;margin:0 -6% 0 0;transform:none}
}
/* the drawing's box keeps its shape reserved from the first paint (1600 x 1320, three ways in). Up to 1100px it sits below the
   form; at 560px and below it runs to the window's edges and shows the phone version (1600 x 1966): the tablet and the transcript card 1.5 times
   larger, the keyboard card and the hand 1.35 */
.ax-hero .v9-illo{aspect-ratio:1600/1320}
@media (max-width:560px){.ax-hero .v9-illo{width:calc(100% + 44px);max-width:none;margin:0 -22px;aspect-ratio:1600/1966}}
/* the hero's pause control (WCAG's "Pause, Stop, Hide"): the loop runs for as long as the hero is on screen, so a real button at
   the drawing's top right corner, where the drawing is empty, holds it on the frame it shows, or lets it carry on. The wall's
   button, named "Pause animation" / "Play animation", its change announced. Only the drawing itself is hidden from screen
   readers, so the button and its announcement are not. Not shown with reduced motion (the still frame) */
.v9 .ax-hero-ctl{position:absolute;top:0;right:0;z-index:1;pointer-events:auto}
@media (max-width:560px){.v9 .ax-hero-ctl{right:22px}}
@media (prefers-reduced-motion:reduce){.v9 .ax-hero-ctl{display:none}}
/* 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.ax-hero{padding:40px 0 64px}
@media (min-width:1101px){.v9-hero.ax-hero{padding:clamp(32px,7vh,84px) 0 72px}}
@media (max-width:560px){.v9-hero.ax-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 ---------- */
.ax-cta .v9-h2{text-wrap:balance}
.ax-cta .v9-sub{text-wrap:pretty}

/* ---------- the client wall's pause control (WCAG's "Pause, Stop, Hide"): the wall changes on its own for as long as it's on
   screen, so a real button under its lower right corner holds it. 44px, named for what it does ("Pause logos", "Play logos"),
   its change announced, a visible focus ring. The choice isn't stored. With reduced motion the wall holds still, so the button
   isn't shown. Its row is there from the first paint, so nothing moves when the script starts ---------- */
.ax-wall-ctl{display:flex;justify-content:flex-end;margin-top:12px}
.v9 .ax-pause{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border:1.5px solid #232834;border-radius:50%;background:#fff;color:#232834;font:inherit;cursor:pointer;transition:background-color .2s cubic-bezier(.65,0,.35,1)}
.v9 .ax-pause svg{width:14px;height:14px;fill:currentColor;stroke:none}
.v9 .ax-pause .pl{display:none}
.v9 .ax-pause.held .pa{display:none}
.v9 .ax-pause.held .pl{display:block}
@media (hover:hover){.v9 .ax-pause:hover{background:#F1EEEA}}
.v9 .ax-pause:focus-visible{outline:2px solid #232834;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.ax-wall-ctl{display:none}.v9 .ax-pause{transition:none}}
/* text for screen readers only */
.ax-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}


/* ---------- Barriers you can't see from your own screen (#problem): the copy beside one small screen and what's behind it. The
   screen, in the family's coral frame, looks complete: a menu button, a search field, a heading, two orders and a Track order
   button. Beside it, "Behind the screen": the same parts in reading order as plain type, each its small glyph, its role and its
   name, the outline assistive technology works from. The menu button's name is an empty place, a dashed edge that turns coral
   (the view's one coral part; coral on white, 3.2:1). As the drawing comes well into view the rows settle in once, one after
   another (4px), then the empty place warms; with reduced motion it shows at once. Not the hero's spoken words (one control, heard),
   nor Mobile Apps' record shown twice with its rows joined: here nothing is joined, the outline reads on its own. The drawing is
   aria-hidden; the copy says the same ---------- */
.ax-prob{border-top:1px solid #E4DFD9}
.ax-prob-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px 72px;align-items:center}
.ax-prob-copy p{margin:20px 0 0;max-width:520px;font-size:18px;line-height:1.65;color:#4f5565}
.ax-out{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start;margin:0}
.ax-out .ax-g{flex:none;display:flex;align-items:center;justify-content:center}
.v9 .ax-out .ax-g svg{width:18px;height:18px;stroke:#232834;stroke-width:1.75}
.ax-out-scr{padding:14px;border:1.5px solid #C43A5C;border-radius:28px;background:#FA5478}
.ax-out-page{display:grid;gap:16px;padding:18px;border:1.5px solid #C43A5C;border-radius:16px;background:#F1EEEA}
.ax-out-top{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:center}
.ax-out-menu{width:40px;height:40px;border:1.5px solid #232834;border-radius:12px;background:#fff}
.ax-out-search{display:flex;align-items:center;gap:8px;min-width:0;height:40px;padding:0 14px;border:1.5px solid #232834;border-radius:20px;background:#fff;font-size:16px;line-height:1;color:#6b7180;white-space:nowrap;overflow:hidden}
.v9 .ax-out-search .ax-g svg{width:16px;height:16px;stroke:#6b7180}
.v9 .ax-out-h{font-weight:700;font-size:20px;line-height:1.2;letter-spacing:-.015em;color:#232834}
.ax-out-rows{display:grid;gap:10px}
.ax-out-rows>span{display:grid;gap:8px;padding:12px 14px;border:1.5px solid #232834;border-radius:12px;background:#fff}
.ax-out-rows i{display:block;height:8px;border-radius:4px;background:#C2C5CC}
.ax-out-rows i+i{width:55%;background:#E4DFD9}
.ax-out-rows i:first-child{width:80%}
.ax-out-btn{justify-self:start;display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:20px;background:#232834;color:#fff;font-weight:700;font-size:16px;line-height:1}
.ax-out-tree{padding:18px 18px 10px;border:1.5px solid #232834;border-radius:20px;background:#fff}
.v9 .ax-out-k{margin:0 0 6px;font-weight:700;font-size:11.5px;line-height:1.5;letter-spacing:.18em;text-transform:uppercase;color:#4f5565}
.ax-out-r{display:grid;grid-template-columns:24px auto minmax(0,1fr);gap:8px 10px;align-items:center;min-height:48px;padding:8px 0;border-top:1px solid #E4DFD9;font-size:16px;line-height:1.35;opacity:0;transform:translateY(4px);transition:opacity .5s cubic-bezier(.65,0,.35,1),transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(.6s + var(--k,0) * .14s)}
.ax-out-r:first-child{border-top:0}
.v9 .ax-out-r b{font-weight:700;color:#232834}
.ax-out-n{color:#4f5565;min-width:0}
.ax-out-slot{display:block;justify-self:start;width:88px;height:26px;border:2px dashed #C2C5CC;border-radius:13px;transition:border-color .6s cubic-bezier(.65,0,.35,1) 1.5s}
.ax-out.in .ax-out-r{opacity:1;transform:none}
.ax-out.in .ax-out-slot{border-color:#FA5478}
@media (max-width:1100px){.ax-prob-grid{grid-template-columns:minmax(0,1fr)}.ax-out{max-width:760px}}
@media (max-width:640px){.ax-out{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.ax-out-r{opacity:1;transform:none;transition:none}.ax-out-slot{border-color:#FA5478;transition:none}}


/* ---------- One standard to measure against (#standard): the page's one bone band. The copy beside one success criterion set as a
   reference card, the one #problem's menu button fails: its number hung in the margin (#d33d5c, large, 4.6:1 on white: the view's
   one coral part), "From WCAG 2.2", its name as a heading with its level, then what it asks and how it's checked as a plain
   definition list, in W3C's terms (checked October 10, 2026 against WCAG 2.2 and Understanding 4.1.2). Real text, read in order:
   the heading carries the number for screen readers. Static. Not Data Engineering's dictionary entry (a term and its senses) nor
   Application Security's file card ---------- */
.ax-std-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px 72px;align-items:center}
.ax-std-copy p{margin:20px 0 0;max-width:520px;font-size:18px;line-height:1.65;color:#4f5565}
.ax-sc{display:grid;grid-template-columns:118px minmax(0,1fr);column-gap:24px;padding:32px 36px 34px;border:1.5px solid #232834;border-radius:20px;background:#fff}
.ax-sc-n{padding-top:22px;font-weight:700;font-size:44px;line-height:1;letter-spacing:-.03em;color:#d33d5c}
.v9 .ax-sc-k{margin:0 0 10px;font-weight:700;font-size:11.5px;line-height:1.5;letter-spacing:.18em;text-transform:uppercase;color:#4f5565}
.ax-sc-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding-bottom:22px;border-bottom:1px solid #E4DFD9}
.v9 .ax-sc-t{font-weight:700;font-size:28px;line-height:1.2;letter-spacing:-.02em;color:#232834}
.ax-sc-l{display:inline-flex;align-items:center;height:30px;padding:0 12px;border:1.5px solid #232834;border-radius:15px;font-weight:700;font-size:14px;line-height:1;color:#232834;white-space:nowrap}
.ax-sc-dl{display:grid;gap:20px;margin:0;padding-top:22px}
.ax-sc-dl dt{margin:0 0 6px;font-weight:700;font-size:16px;line-height:1.4;color:#232834}
.ax-sc-dl dd{margin:0;font-size:17px;line-height:1.6;color:#4f5565}
@media (max-width:1100px){.ax-std-grid{grid-template-columns:minmax(0,1fr)}.ax-sc{max-width:760px}}
@media (max-width:560px){.ax-sc{grid-template-columns:minmax(0,1fr);padding:24px 22px 26px}.ax-sc-n{padding:0 0 14px}}


/* ---------- What we do (#scope): a lead and five. Audits leads, wider and on its own row under the heading, since every engagement
   starts there; the other five sit in one row beneath it (three across up to 1100px, one on phones), each its icon (hover Lottie,
   tools/ax-icons-scene.js; frame 0 is the static icon, its coral part settling in with the reveal), its name and its line, separated
   by space alone. Then the two hand-off lines, #d33d5c on white (4.6:1), underlined on hover and focus. Not QA's grid of four, AI-
   Assisted Engineering's even grid, MCP's two wide cards, Support & Maintenance's named rows or Web & App Development's index ---------- */
.ax-do{border-top:1px solid #E4DFD9}
.ax-do-head{margin-bottom:44px}
.ax-do .cb-ic-box{grid-row:auto;width:64px;height:64px;margin:0 0 14px -4px}
.cb-ic .ck{stroke:#fff}
.ax-do-lead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 28px;align-items:start;padding:0 0 40px;margin:0 0 44px;border-bottom:1px solid #E4DFD9}
.ax-do-lead .cb-ic-box{width:72px;height:72px;margin:-4px 0 0 -4px}
.v9 .ax-do-h{font-weight:700;font-size:19px;line-height:1.3;letter-spacing:-.01em;color:#232834}
.v9 .ax-do-lead .ax-do-h{font-size:28px;line-height:1.2;letter-spacing:-.02em}
.ax-do-p{margin:8px 0 0;font-size:16px;line-height:1.6;color:#4f5565}
.ax-do-lead .ax-do-p{max-width:640px;margin-top:10px;font-size:18px;line-height:1.65}
.ax-do-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:40px 32px}
.ax-do-more{display:flex;flex-wrap:wrap;gap:4px 40px;margin:48px 0 0}
.ax-do-more li{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;min-height:44px;font-size:17px;line-height:1.4;color:#4f5565}
.v9 .ax-do-more a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:#d33d5c;text-decoration:none;text-underline-offset:4px}
.v9 .ax-do-more a:hover,.v9 .ax-do-more a:focus-visible{color:#d33d5c;text-decoration:underline}
.v9 .ax-do-more a:focus-visible{outline:2px solid #232834;outline-offset:3px;border-radius:4px}
@media (max-width:1100px){.ax-do-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.ax-do-list{grid-template-columns:minmax(0,1fr);gap:32px}.ax-do-lead{grid-template-columns:minmax(0,1fr);gap:0}}


/* ---------- Tools find some issues, people find the rest (#method): one field, read twice. A white card holds one form field,
   its label "Field 1"; beneath it two notes. The scan's: an ink tick, "Has a label" (a tool can see that a label is there). The
   person's: the family's person, "Doesn't say what to enter" (whether it makes sense takes a person), whose edge turns coral: the
   view's one coral part (2px, 3.2:1 on white; a whole edge, not a stripe). As the drawing comes well into view the notes settle in
   once, the scan's first; with reduced motion all at once. aria-hidden: the copy says the same. From 1101px the drawing sits on the
   left (the sections above have theirs on the right); below, after the copy. Checked October 10, 2026 against W3C WAI's
   "Selecting Web Accessibility Evaluation Tools" and "Evaluating Web Accessibility Overview" ---------- */
.ax-meth{border-top:1px solid #E4DFD9}
.ax-meth-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px 72px;align-items:center}
.ax-meth-copy p{margin:20px 0 0;max-width:540px;font-size:18px;line-height:1.65;color:#4f5565}
.ax-read{width:100%;max-width:480px;margin:0;justify-self:center}
.ax-read-card{padding:24px 24px 28px;border:1.5px solid #232834;border-radius:20px;background:#fff}
.v9 .ax-read-l{margin:0 0 10px;font-weight:700;font-size:16px;line-height:1.3;color:#232834}
.ax-read-f{display:block;height:48px;border:1.5px solid #232834;border-radius:24px;background:#fff}
.ax-read-notes{display:grid;gap:12px;margin:16px 0 0 40px}
.ax-read-n{display:grid;grid-template-columns:64px 24px minmax(0,1fr);align-items:center;gap:0 10px;min-height:56px;padding:10px 16px;border:2px solid #E4DFD9;border-radius:16px;background:#fff;font-size:16px;line-height:1.35;color:#232834;opacity:0;transform:translateY(4px);transition:opacity .5s cubic-bezier(.65,0,.35,1) .6s,transform .6s cubic-bezier(.2,.7,.2,1) .6s,border-color .6s cubic-bezier(.65,0,.35,1) 1.5s}
.ax-read-n.p{transition-delay:.85s,.85s,1.5s}
.ax-read.in .ax-read-n{opacity:1;transform:none}
.ax-read.in .ax-read-n.p{border-color:#FA5478}
.ax-read-k{font-weight:700;font-size:11.5px;line-height:1.5;letter-spacing:.16em;text-transform:uppercase;color:#4f5565}
.ax-read-ic{display:block;width:24px;height:24px}
.v9 .ax-read-ic svg{width:24px;height:24px}
.v9 .ax-read-d{fill:#232834;stroke:none}
.v9 .ax-read-t{fill:none;stroke:#fff;stroke-width:2.2}
.v9 .ax-read-h{fill:#E4DFD9;stroke:#232834;stroke-width:1.6}
@media (min-width:1101px){.ax-read{order:-1}}
@media (max-width:1100px){.ax-meth-grid{grid-template-columns:minmax(0,1fr)}.ax-read{justify-self:start}}
@media (max-width:560px){.ax-read-notes{margin-left:0}.ax-read-n{grid-template-columns:24px minmax(0,1fr);gap:4px 10px}.ax-read-k{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.ax-read-n,.ax-read-n.p{opacity:1;transform:none;transition:none}.ax-read-n.p{border-color:#FA5478}}


/* ---------- Kept accessible in every release (#release): a ratchet, the part that lets progress go one way only. One wheel in the
   family's line (white body, ink outline, warm shade, rounded teeth so it reads as a mechanism, not a blade) and its pawl, a coral
   claw on a pin. As the drawing comes well into view the wheel turns one tooth forward, once: the pawl rides up the tooth's slope
   and drops into the next notch, and only then warms from blush to coral, the view's one coral part. No bounce, nothing returns.
   Frames worked out offline (startRatchet in the page), so the pawl never passes through a tooth; with reduced motion the last
   frame shows at once. aria-hidden: the copy says the same. From 1101px the drawing on the right; below, after the copy ---------- */
.ax-rel{border-top:1px solid #E4DFD9}
.ax-rel-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 72px;align-items:center}
.ax-rel-copy p{margin:20px 0 0;max-width:560px;font-size:18px;line-height:1.65;color:#4f5565}
.ax-rat{width:100%;max-width:330px;margin:0;justify-self:center}
.v9 .ax-rat svg{display:block;width:100%;height:auto;aspect-ratio:301/328;overflow:visible}
.v9 .ax-rat .ax-rat-sh{fill:#E4DFD9;stroke:none}
.v9 .ax-rat .ax-rat-wb{fill:#fff;stroke:#232834;stroke-width:1.75px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.v9 .ax-rat .ax-rat-ho{fill:#E4DFD9;stroke:#232834;stroke-width:1.75px;vector-effect:non-scaling-stroke}
.v9 .ax-rat .ax-rat-ax{fill:#232834;stroke:none}
.v9 .ax-rat .ax-rat-pf{fill:#FBC0CC;stroke:#C43A5C;stroke-width:1.75px;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:fill .6s cubic-bezier(.65,0,.35,1)}
.v9 .ax-rat.ax-rat-on .ax-rat-pf{fill:#FA5478}
.v9 .ax-rat.ax-rat-still .ax-rat-pf{transition:none}
.v9 .ax-rat .ax-rat-pin{fill:#fff;stroke:#232834;stroke-width:1.75px;vector-effect:non-scaling-stroke}
@media (max-width:1100px){.ax-rel-grid{grid-template-columns:minmax(0,1fr)}.ax-rat{justify-self:start;max-width:300px}}
@media (max-width:560px){.ax-rat{max-width:250px}}


/* ---------- Start with the journeys that matter (#start): a map of one product's pages as small tiles (tools/ax-map.js), three key
   journeys traced through it in ink (buying, getting help, signing up), the pages outside them quieter (tint outline). Signing up,
   the one audited first, carries a coral ribbon on each of its pages (blush, dark-coral edge, so the shape is 5:1 on white). As
   the drawing comes well into view the soft coral line flows once along it, under its pages, and is gone; each page it reaches
   warms its ribbon to coral: the family's line, its one use outside the hero. With reduced motion the ribbons are coral at once.
   aria-hidden: the copy says the same. Two layouts: wide (4 x 3) and, up to 560px, phone (3 x 4), so the labels still read.
   From 1101px the drawing on the left; below, after the copy ---------- */
.ax-start{border-top:1px solid #E4DFD9}
.ax-start-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 72px;align-items:center}
.ax-start-copy p{margin:20px 0 0;max-width:540px;font-size:18px;line-height:1.65;color:#4f5565}
.ax-map{width:100%;max-width:585px;margin:0;justify-self:center}
.v9 .ax-map svg{display:block;width:100%;height:auto;overflow:visible;stroke:none}
.v9 .ax-map .ax-map-w{aspect-ratio:585/293}
.v9 .ax-map .ax-map-p{display:none;aspect-ratio:401/361}
.v9 .ax-map .ax-map-sh{fill:#E4DFD9}
.v9 .ax-map .ax-map-tb{fill:#fff;stroke:#232834;stroke-width:1.75px;vector-effect:non-scaling-stroke}
.v9 .ax-map .ax-map-tm{fill:#fff;stroke:#C2C5CC;stroke-width:1.75px;vector-effect:non-scaling-stroke}
.v9 .ax-map text{font-family:Sailec,Helvetica,Arial,sans-serif;font-weight:500}
.v9 .ax-map .ax-map-l{fill:#232834}
.v9 .ax-map .ax-map-lm{fill:#4f5565}
.v9 .ax-map .ax-map-b{fill:#C2C5CC}
.v9 .ax-map .ax-map-bm{fill:#E4DFD9}
.v9 .ax-map .ax-map-j{fill:none;stroke:#232834;stroke-width:2.5px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.v9 .ax-map .ax-map-flow{fill:none;stroke:#FA5478;stroke-width:4.5;stroke-linecap:round}
.v9 .ax-map .ax-map-rib{fill:#FBC0CC;stroke:#C43A5C;stroke-width:1.75px;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:fill .6s cubic-bezier(.65,0,.35,1)}
.v9 .ax-map .ax-map-rib.on{fill:#FA5478}
.v9 .ax-map.ax-map-still .ax-map-rib{transition:none}
@media (min-width:1101px){.ax-map{order:-1}}
@media (max-width:1100px){.ax-start-grid{grid-template-columns:minmax(0,1fr)}.ax-map{justify-self:start}}
@media (max-width:560px){.v9 .ax-map .ax-map-w{display:none}.v9 .ax-map .ax-map-p{display:block}.ax-map{max-width:401px}}


/* ---------- Questions worth asking (#questions): each question set large, its answer beneath in a narrower column set in from
   the left; all open, no rules, cards or toggles, so find in page reaches every answer. Three questions: testing with people,
   mobile apps and conformance reports stay off (unconfirmed). Answers checked October 10, 2026 against W3C, the Department of
   Justice (Federal Register), the U.S. Access Board and EUR-Lex: prompts/accessibility-notes.md ---------- */
.ax-q{border-top:1px solid #E4DFD9}
/* revised October 10, 2026, on your comment that it felt empty: the heading holds the left column and the questions the
   right, divided by hairlines, so the section fills its width; one column below 1101px */
.ax-q .v9-wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:28px 72px;align-items:start}
.ax-q-list{display:grid}
.ax-q-i{padding:32px 0 36px;border-top:1px solid #E4DFD9}
.ax-q-i:first-child{padding-top:6px;border-top:0}
.v9 .ax-q-h{max-width:640px;font-weight:700;font-size:clamp(20px,1.9vw,26px);line-height:1.25;letter-spacing:-.015em;color:#232834}
.ax-q-a{max-width:620px;margin:12px 0 0;font-size:18px;line-height:1.65;color:#4f5565}
@media (max-width:1100px){.ax-q .v9-wrap{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.ax-q-i{padding:24px 0 28px}.ax-q-a{margin-top:10px}}


/* ---------- the page's own audit (October 10, 2026): fixed here first, and on every page at go-live ---------- */
/* the coral button stays the site's coral, as on every other page (your call, October 10, 2026). The audit's finding stands:
   white on #FA5478 is 3.2:1, under the 4.5:1 its 14 to 16px label needs; to be decided for every page at once */
/* the focus rings the header logo and the footer's Cookie Preferences were missing */
body.v9-page .header-wide.wb-hd .header .logo:focus-visible{outline:2px solid #232834;outline-offset:3px;border-radius:4px}
body.v9-page .wb-ft .wb-ft-cc:focus-visible{outline:2px solid #F1EEEA;outline-offset:3px;border-radius:3px}
/* the footer's links: 44px tap areas on touch widths, from an invisible band above and below, so nothing moves */
@media (max-width:1024px){body.v9-page .wb-ft .wb-ft-cols a,body.v9-page .wb-ft .wb-ft-bar a,body.v9-page .wb-ft .wb-ft-bar .wb-ft-cc{position:relative}body.v9-page .wb-ft .wb-ft-cols a::after,body.v9-page .wb-ft .wb-ft-bar a::after,body.v9-page .wb-ft .wb-ft-bar .wb-ft-cc::after{content:"";position:absolute;left:0;right:0;top:-10.5px;bottom:-10.5px}}
/* the thank-you takes focus when it replaces the form, so it's read out; it isn't a control, so it shows no ring */
.em-talk-done:focus{outline:none}

/* ---------- Pricing (October 11, 2026): the cost question's link, in the answers' own color, underlined at all times inside the
   paragraph (coral and bold, as the page's other text links), with a 44px tap band on touch widths, so nothing moves ---------- */
.v9 .ax-q-a a.ax-in{font-weight:700;color:#d33d5c;white-space:nowrap;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.v9 .ax-q-a a.ax-in:hover{color:#d33d5c}
.v9 .ax-q-a a.ax-in:focus-visible{outline:2px solid #232834;outline-offset:2px;border-radius:2px}
@media (max-width:1024px){.v9 .ax-q-a a.ax-in{position:relative}.v9 .ax-q-a a.ax-in::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;margin-top:-22px}}

/* ================= THE PHONE TYPE SCALE: written October 10, 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 .ax-go,.ai-clients-head .v9-sub,.ax-clients-head .v9-sub,.ax-prob-copy p,.ax-std-copy p,.ax-sc-dl dd,.ax-do-lead .ax-do-p,.ax-do-more li,.ax-meth-copy p,.ax-rel-copy p,.ax-start-copy p,.ax-q-a{font-size:16px}
.v9-hero h1{font-size:min(34px,clamp(40px,4.6vw,64px));line-height:1.12}
.v9-hero .v9-lead{font-size:17px}
.v9 .ax-out-h,.v9 .ax-do-h{font-size:18px}
.v9 .ax-sc-t,.v9 .ax-do-lead .ax-do-h{font-size:26px;line-height:1.18}
.v9 .ax-q-h{font-size:20px;line-height:1.3}
/* the headline options by hand: the tool reads 390px, where most formulas are under 34px, but from about 400px to 560px they
   would run past it */
.v9-hero.ax-hero h1.ax-h-a{font-size:min(34px,min(56px,calc((100vw - 44px) / 10.92)));line-height:1.12}
.v9-hero.ax-hero h1.ax-h-b{font-size:min(34px,min(56px,calc((100vw - 44px) / 11.27)));line-height:1.12}
.v9-hero.ax-hero h1.ax-h-c{font-size:min(34px,min(56px,calc((100vw - 44px) / 9.04)));line-height:1.12}
.v9-hero.ax-hero h1.ax-h-d{font-size:min(34px,min(56px,calc((100vw - 44px) / 11.84)));line-height:1.12}
.v9-hero.ax-hero h1.ax-h-e{font-size:min(34px,min(56px,calc((100vw - 44px) / 11.31)));line-height:1.12}
/* by hand: the criterion's number, a large figure the tool leaves, steps down with the section headings */
.ax-sc-n{font-size:34px}
}