/* Pricing, built from Web & App Development v2 (page-web-development-v2.css) as Accessibility carries it (page-accessibility.css,
   October 10, 2026): its shell, header strip, hero base, buttons, email form, reveal, hover icons, client wall and responsive
   rules are carried over unchanged, with the fixes from Accessibility's own audit (its two pause controls left out on your call, October 11, 2026). 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 (pr-*) 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, and Pricing has no route or tile in it, so markMenu() marks nothing; these rules stay with the shared call */
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 */
.pr-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 .pr-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}
.pr-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)}
.pr-go-a{display:inline-block;transition:transform .3s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .pr-go:hover{color:#232834}.pr-go:hover .pr-go-l{text-decoration-color:#232834}.pr-go:hover .pr-go-a{transform:translateX(3px)}}
.v9 .pr-go:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.pr-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 */
.pr-clients-head{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:44px;text-align:center}
.pr-clients-head .v9-h2{margin:0;text-align:center;text-wrap:balance}
.pr-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){.pr-clients-head{margin-bottom:32px}}
@media (max-width:560px){.pr-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)}
}


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

/* ---------- this page's hero, as on Accessibility: 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 11, 2026, the method
   checked against Accessibility's and Discovery & MVP's figures): A "Know what you'll pay" 9.67em ("before you commit" 8.76em),
   B "in plain terms" 6.17em, C "see the price first" 7.90em, D "before work begins" 8.89em and E "Pricing, explained" 8.21em.
   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 51px (493px at most), B from 52px to
   64px (395px), C from 50px to 60px (474px), D from 46px to 56px (498px) and E from 48px to 58px (476px). 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.pr-hero .v9-eyebrow{line-height:1.48}
.v9-hero.pr-hero .v9-lead :is(b,strong){line-height:1}
.v9-hero.pr-hero h1.pr-h-a{font-size:min(56px,calc((100vw - 44px) / 10.57))}
.v9-hero.pr-hero h1.pr-h-b{font-size:min(56px,calc((100vw - 44px) / 6.75))}
.v9-hero.pr-hero h1.pr-h-c{font-size:min(56px,calc((100vw - 44px) / 8.64))}
.v9-hero.pr-hero h1.pr-h-d{font-size:min(56px,calc((100vw - 44px) / 9.73))}
.v9-hero.pr-hero h1.pr-h-e{font-size:min(56px,calc((100vw - 44px) / 8.98))}
@media (min-width:821px){.v9.pr-hero .em-talk .v9-hero-form{grid-template-columns:262px auto}}
@media (min-width:561px) and (max-width:820px){.v9.pr-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:561px){.v9.pr-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{width:172px;padding:0}}
@media (max-width:560px){.v9-hero.pr-hero .v9-lead{font-size:17px}}
@media (min-width:1101px){
.v9-hero.pr-hero .v9-hero-grid{grid-template-columns:minmax(560px,5.4fr) minmax(0,6.6fr);gap:48px}
.v9-hero.pr-hero h1.pr-h-a{font-size:clamp(44px,3.9vw,51px)}
.v9-hero.pr-hero h1.pr-h-b{font-size:clamp(52px,4.6vw,64px)}
.v9-hero.pr-hero h1.pr-h-c{font-size:clamp(50px,4.3vw,60px)}
.v9-hero.pr-hero h1.pr-h-d{font-size:clamp(46px,4vw,56px)}
.v9-hero.pr-hero h1.pr-h-e{font-size:clamp(48px,4.2vw,58px)}
.v9-hero.pr-hero .v9-lead{max-width:520px}
/* the drawing is enlarged a little into the page margin, not into the column gap */
.pr-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, one page, agreed first). Up to 1100px it sits below
   the form; at 560px and below it runs to the window's edges and shows the phone version (1100 x 1606): the same parts on a
   narrower canvas, so they read about 1.45 times larger, the request card above the tablet */
.pr-hero .v9-illo{aspect-ratio:1600/1320}
@media (max-width:560px){.pr-hero .v9-illo{width:calc(100% + 44px);max-width:none;margin:0 -22px;aspect-ratio:1100/1606}}
/* 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.pr-hero{padding:40px 0 64px}
@media (min-width:1101px){.v9-hero.pr-hero{padding:clamp(32px,7vh,84px) 0 72px}}
@media (max-width:560px){.v9-hero.pr-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 ---------- */
.pr-cta .v9-h2{text-wrap:balance}
.pr-cta .v9-sub{text-wrap:pretty}

/* text for screen readers only */
.pr-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}


/* ---------- How we charge (#models): how each way of working is paid, drawn over time. Each model's name and line as real text,
   beside a thin time line of how it's paid: fixed price one span that ends with the agreed scope; dedicated team and offshore
   development center a fee each month that carries on (they're paid the same way, so they share a shape); hybrid both, on two
   lanes. No figures and no stages (unconfirmed). As each row comes into view its marks settle in once, left to right (the span
   writes itself across, the monthly marks follow it, 4px); with reduced motion they're there at once. aria-hidden, with its
   label: the words say the same. Not Engagement Models' four cards with icons, nor Support & Maintenance's support windows on a
   time axis (versions, not payments). Text links inside a paragraph are #d33d5c and underlined at all times ---------- */
.pr-mod{border-top:1px solid #E4DFD9}
.pr-mod-head{margin-bottom:44px}
.pr-mod-head .v9-sub{margin:18px 0 0;max-width:640px;font-size:18px;line-height:1.6;color:#4f5565}
.v9 a.pr-in{color:#d33d5c;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.v9 a.pr-in:hover{color:#C43A5C}
.v9 a.pr-in:focus-visible{outline:2px solid #232834;outline-offset:2px;border-radius:2px}
.pr-mod-list{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:64px;border-bottom:1px solid #E4DFD9}
.pr-mod-k{grid-column:2;margin:0 0 12px;font-weight:700;font-size:11.5px;line-height:1.48;letter-spacing:.22em;text-transform:uppercase;color:#4f5565}
.pr-mod-row{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;padding:30px 0;border-top:1px solid #E4DFD9}
.v9 .pr-mod-h{font-weight:700;font-size:24px;line-height:1.25;letter-spacing:-.015em}
.v9 .pr-mod-p{margin-top:8px;max-width:440px;font-size:18px;line-height:1.6;color:#4f5565}
.pr-mod-art{display:grid;gap:12px}
.pr-ln{position:relative;display:block;height:22px}
.pr-ln::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:1px;background:#E4DFD9}
.pr-ln i{position:relative;display:block;height:22px;border:1.75px solid #232834;border-radius:11px;background:#fff}
.pr-one{width:66%;clip-path:inset(0 100% 0 0 round 11px);transition:clip-path 1s cubic-bezier(.65,0,.35,1) .25s}
.pr-one-h{width:46%}
.pr-ln-m{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px}
.pr-ln-m i{opacity:0;transform:translateX(-4px);transition:opacity .5s cubic-bezier(.65,0,.35,1) calc(.3s + var(--k,0) * 60ms),transform .6s cubic-bezier(.2,.7,.2,1) calc(.3s + var(--k,0) * 60ms)}
.pr-mod-row.v9-rv.in .pr-one{clip-path:inset(0 0 0 0 round 11px)}
.pr-mod-row.v9-rv.in .pr-ln-m i{opacity:var(--o,1);transform:none}
.v9 .pr-mod-note{margin-top:30px;font-size:18px;line-height:1.6;color:#232834}
@media (max-width:820px){
.pr-mod-list{grid-template-columns:minmax(0,1fr)}
.pr-mod-k{display:none}
.pr-mod-row{grid-template-columns:minmax(0,1fr);gap:18px;padding:26px 0}
.v9 .pr-mod-p{max-width:620px}
}
@media (max-width:560px){.pr-mod-head{margin-bottom:32px}.pr-ln-m{gap:5px}}
@media (prefers-reduced-motion:reduce){.pr-one,.pr-ln-m i{transition:none}.pr-one{clip-path:none}.pr-ln-m i{opacity:var(--o,1);transform:none}}

/* ---------- What changes the cost (#cost): two briefs that sound alike. Two of the family's white document cards, each headed
   "Brief" and titled "A booking app", the same words at the same size; beneath, four of the drivers each brief answers
   differently, so the same name hides different work. No sizes, bars or figures. Static; aria-hidden (the drivers below say the
   same in the page's text). Then the seven drivers as real text in a spec grid (four across from 1101px, two to 561px, one on
   phones), and the line to Discovery & MVP as a standalone arrow link: #d33d5c, underlined on hover and focus ---------- */
.pr-cost{border-top:1px solid #E4DFD9}
.pr-cost-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 64px;align-items:center;margin-bottom:64px}
.pr-cost-head .v9-sub{margin:18px 0 0;max-width:520px;font-size:18px;line-height:1.6;color:#4f5565}
.v9 .pr-brief{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.pr-brief-c{padding:24px 26px 26px;border:1.75px solid #232834;border-radius:20px;background:#fff;box-shadow:6px 7px 0 #E4DFD9}
.v9 .pr-brief-k{margin:0 0 10px;font-weight:700;font-size:11.5px;line-height:1.48;letter-spacing:.22em;text-transform:uppercase;color:#4f5565}
.v9 .pr-brief-t{padding-bottom:16px;border-bottom:1px solid #E4DFD9;font-weight:700;font-size:22px;line-height:1.25;letter-spacing:-.015em;color:#232834}
.v9 .pr-brief-dl{display:grid;gap:14px;margin:0;padding-top:16px}
.v9 .pr-brief-dl dt{margin:0;font-size:14px;line-height:1.4;color:#4f5565}
.v9 .pr-brief-dl dd{margin:2px 0 0;font-size:16px;line-height:1.45;color:#232834}
.v9 .pr-drv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 32px}
.v9 .pr-drv li{padding-top:20px;border-top:1px solid #E4DFD9}
.v9 .pr-drv-h{font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.01em}
.v9 .pr-drv-p{margin-top:8px;font-size:17px;line-height:1.6;color:#4f5565}
.pr-cost-more{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;margin-top:48px}
.v9 .pr-cost-more p{font-size:18px;line-height:1.6;color:#232834}
.v9 a.pr-arw{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:18px;line-height:1.3;color:#d33d5c;text-decoration:none;text-underline-offset:4px;text-decoration-thickness:1.5px}
.v9 a.pr-arw:hover,.v9 a.pr-arw:focus-visible{color:#d33d5c;text-decoration:underline}
.v9 a.pr-arw:focus-visible{outline:2px solid #232834;outline-offset:3px;border-radius:3px}
@media (max-width:1100px){.pr-cost-top{grid-template-columns:minmax(0,1fr)}.v9 .pr-drv{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pr-cost-top{margin-bottom:48px}.v9 .pr-brief{grid-template-columns:minmax(0,1fr);gap:16px}.v9 .pr-drv{grid-template-columns:minmax(0,1fr);gap:24px}.pr-cost-more{margin-top:36px}}

/* ---------- What you can count on (#terms): the two confirmed lines (section 1, October 11, 2026), set large as plain statements,
   each under its own icon with a hover Lottie (tools/pr-icons-scene.js): a calendar page with one slot booked (the first call)
   and a folded page with its signature line (the written proposal). The heading holds the left column, the two lines the right,
   side by side from 821px, stacked below. No document frame, no tick list, no numbering: two lines read best as two lines. The
   icons' coral part settles in with the reveal; on hover (mouse or trackpad, from 821px) each plays once and holds, and plays
   back on leave; static with reduced motion. The lines aren't links, so there's no focus to play them ---------- */
.pr-terms{border-top:1px solid #E4DFD9}
.pr-terms-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:40px 64px;align-items:start}
.pr-terms-head .v9-sub{margin:18px 0 0;max-width:420px;font-size:18px;line-height:1.6;color:#4f5565}
.v9 .pr-terms-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 48px}
.v9 .pr-term{display:grid;grid-template-rows:auto auto;gap:18px;align-content:start;padding-top:24px;border-top:1px solid #E4DFD9}
.pr-term .cb-ic-box{grid-row:auto;margin:0 0 0 -6px}
.v9 .pr-term-t{font-weight:700;font-size:24px;line-height:1.35;letter-spacing:-.015em;color:#232834;text-wrap:pretty}
@media (max-width:1100px){.pr-terms-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){.v9 .pr-terms-list{grid-template-columns:minmax(0,1fr);gap:32px}}

/* ---------- Ask for your own estimate (#estimate): the page's one bone band and its one interaction. The copy on the left, and on
   the right the estimate form on one white sheet: real controls on one page, no pick cards and no steps (not Engagement Models'
   step form). Tick boxes as plain rows under hairlines, the way a printed form sets them, with an ink box that takes an ink tick;
   radios inline with an ink dot; text fields 48px, the project field taller. Optional fields say so; the rest are required.
   Errors sit under their fields in the site's error red with words (never color alone), and the first takes focus. On send the
   button keeps its size and shows the spinner; then the thank-you takes the form's place in the same sheet, which keeps its
   height, so nothing below moves. On phones every tick box and radio is a full-width row at least 48px tall, and the button runs
   the full width ---------- */
.pr-est-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:40px 64px;align-items:start}
.pr-est-copy .v9-sub{margin:18px 0 0;max-width:400px;font-size:18px;line-height:1.6;color:#4f5565}
.pr-est-sheet{display:grid;padding:40px 44px 44px;border:1px solid #E4DFD9;border-radius:20px;background:#fff}
.pr-est-sheet>*{grid-area:1/1;min-width:0}
.pr-est-form{display:grid;gap:30px;transition:opacity .45s cubic-bezier(.65,0,.35,1),transform .55s cubic-bezier(.65,0,.35,1)}
.pr-est-sheet.done .pr-est-form{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}
.v9 .pr-fs{min-width:0;margin:0;padding:0;border:0}
.v9 .pr-lg{float:left;width:100%;margin:0 0 14px;padding:0;font-weight:700;font-size:18px;line-height:1.35;color:#232834}
.v9 .pr-lg + *{clear:both}
.v9 .pr-opt{margin-left:6px;font-weight:500;font-size:14px;line-height:1.35;color:#4f5565}
.pr-cks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;border-top:1px solid #E4DFD9}
.v9 .pr-ck{position:relative;display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 6px 10px 2px;border-bottom:1px solid #E4DFD9;cursor:pointer}
.v9 .pr-ck input,.v9 .pr-rd input{position:absolute;left:0;top:50%;width:22px;height:22px;margin:-11px 0 0;opacity:0;cursor:pointer}
.v9 .pr-box{flex:none;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:1.75px solid #232834;border-radius:6px;background:#fff;transition:background-color .2s cubic-bezier(.65,0,.35,1)}
.v9 .pr-box svg{width:14px;height:14px;stroke:#fff;stroke-width:2.4;fill:none;opacity:0;transition:opacity .2s cubic-bezier(.65,0,.35,1)}
.v9 .pr-ck input:checked + .pr-box{background:#232834}
.v9 .pr-ck input:checked + .pr-box svg{opacity:1}
.v9 .pr-ck input:focus-visible + .pr-box,.v9 .pr-rd input:focus-visible + .pr-dot{outline:2px solid #232834;outline-offset:3px}
.v9 .pr-ck-t{display:grid;gap:2px;font-size:16px;line-height:1.35;color:#232834}
.v9 .pr-ck-t small{font-size:14px;line-height:1.35;color:#4f5565}
@media (hover:hover){.v9 .pr-ck:hover .pr-box,.v9 .pr-rd:hover .pr-dot{background-color:#F1EEEA}.v9 .pr-ck:hover input:checked + .pr-box{background-color:#232834}}
.pr-rds{display:flex;flex-wrap:wrap;gap:0 30px}
.v9 .pr-rd{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:48px;cursor:pointer;font-size:16px;line-height:1.3;color:#232834}
.v9 .pr-dot{flex:none;width:22px;height:22px;border:1.75px solid #232834;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 4px #fff;transition:background-color .2s cubic-bezier(.65,0,.35,1)}
.v9 .pr-rd input:checked + .pr-dot,.v9 .pr-rd:hover input:checked + .pr-dot{background-color:#232834}
.pr-fl{display:flex;flex-direction:column;min-width:0}
.v9 .pr-lb{margin:0 0 8px;font-weight:700;font-size:16px;line-height:1.35;color:#232834}
.v9 .pr-hint{margin:-2px 0 8px;font-size:14px;line-height:1.4;color:#4f5565}
.v9 .pr-tx{display:block;width:100%;min-width:0;height:48px;margin:0;padding:0 16px;border:1.5px solid #CFC9C1;border-radius:12px;background:#fff;font:inherit;font-size:16px;line-height:1.4;color:#232834;outline:0;box-shadow:none;transition:border-color .2s cubic-bezier(.65,0,.35,1)}
.v9 .pr-tx:focus{border-color:#232834}
.v9 .pr-ta{height:auto;min-height:140px;padding:12px 16px;line-height:1.5;resize:vertical}
.v9 .pr-tx.bad{border-color:#d33d5c}
.pr-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}
.v9 .pr-err{margin:0;font-size:14px;line-height:20px;color:#c62d4f}
.v9 .pr-fs .pr-err,.v9 .pr-fl .pr-err{min-height:20px;margin-top:8px}
/* every error line has its row from the first paint, so nothing below moves when one shows; below 360px the project's (255px)
   can wrap to a second line, so it keeps two */
@media (max-width:359px){.v9 #est-project-err{min-height:40px}}
.pr-est-end{display:grid;justify-items:start;gap:12px;padding-top:4px}
.v9 .pr-est-end .pr-err{min-height:40px}
@media (max-width:560px){.v9 .pr-est-end .pr-err{min-height:60px}}
.v9 .pr-est-go{position:relative;min-width:226px;height:48px;padding:0 28px;font-size:16px}
.v9 .v9-btn.pr-est-go .em-spin{position:absolute;left:50%;top:50%;margin:-10px 0 0 -10px}
.v9 .pr-est-go.sending .em-btn-lbl,.v9 .pr-est-go.sending .arr{visibility:hidden}
.v9 .v9-btn.pr-est-go.sending .em-spin{display:block}
.v9 .pr-est-go.sending{background:#FCA3B6}
.v9 .pr-est-go.sending:disabled{opacity:1}
.pr-est-done{align-self:center;justify-self:center;display:grid;justify-items:center;gap:14px;max-width:440px;padding:24px 0;text-align:center;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}
.pr-est-sheet.done .pr-est-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}
.pr-est-done:focus{outline:none}
.v9 .pr-est-done-h{font-weight:700;font-size:24px;line-height:1.3;letter-spacing:-.015em;text-align:center}
.v9 .pr-est-done-p{font-size:18px;line-height:1.6;color:#4f5565;text-align:center}
@media (max-width:1100px){.pr-est-grid{grid-template-columns:minmax(0,1fr)}.pr-est-copy .v9-sub{max-width:620px}}
@media (max-width:640px){.pr-cks{grid-template-columns:minmax(0,1fr)}.pr-two{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
.pr-est-sheet{padding:26px 20px 28px;border-radius:16px}
.v9 .pr-ck{min-height:56px}
.pr-rds{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid #E4DFD9}
.v9 .pr-rd{display:flex;min-height:52px;border-bottom:1px solid #E4DFD9}
.pr-est-end{justify-items:stretch}
.v9 .pr-est-go{width:100%;min-width:0}
}
@media (prefers-reduced-motion:reduce){.pr-est-form,.pr-est-sheet.done .pr-est-form,.pr-est-done,.pr-est-sheet.done .pr-est-done,.v9 .pr-box,.v9 .pr-box svg,.v9 .pr-dot,.v9 .pr-tx{transition:none}}

/* ---------- Questions worth asking (#questions): set the way a newspaper sets its columns: two columns with a rule between, each
   question a bold heading with its answer open beneath it, so find in page reaches every answer. One column below 821px. Not
   Discovery & MVP's run-in, Support & Maintenance's reading column, MCP's cards, AI-Assisted Engineering's answer first or
   Accessibility's heading beside a ruled list. Links inside an answer are underlined at all times (.pr-in) ---------- */
.pr-q{border-top:1px solid #E4DFD9}
.v9 .pr-q-head{margin-bottom:44px}
.v9 .pr-q-cols{columns:2;column-gap:72px;column-rule:1px solid #E4DFD9}
.v9 .pr-q-i{break-inside:avoid;padding:0 0 36px}
.v9 .pr-q-h{font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .pr-q-a{margin-top:10px;font-size:17px;line-height:1.65;color:#4f5565}
@media (max-width:820px){.v9 .pr-q-cols{columns:1}.v9 .pr-q-i{padding-bottom:30px}.v9 .pr-q-head{margin-bottom:32px}}

/* ---------- Accessibility's own audit (October 10, 2026): its fixes, carried here as on that page; 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}
/* the hand-over audit (October 11, 2026). The header logo has no size of its own until its image loads, so the strip grew from
   14px to 45px and moved the hero (layout shift 0.008 at 390px, 0.016 at 1280px): its box is reserved from its file's shape,
   4393 x 1501. A shared part: the same rule belongs on every page at go-live */
body.v9-page .header-wide.wb-hd .logo img{aspect-ratio:4393/1501;height:auto}
/* and the cookie notice's mount: until Cookie Consent.dc.html arrives, the runtime holds its place with a 0 x 0 placeholder whose
   1px borders still make it 2px tall, above the header; when the notice mounts (fixed, out of the flow) the whole page moves up
   2px. Its borders are dropped, so it holds no height at all. A shared part too, for every page at go-live */
body.v9-page .sc-placeholder[title="Cookie Consent"]{border:0;background:none}
/* and the type: until Sailec arrives the fallback sets each line's text box from its own height, 115% of the size against Sailec's
   148% (ascent 108% and descent 40% in Bold, 107% and 36% in Medium, measured on the woff2 files), and runs narrower, so the hero's
   lines moved up to 6px, and the words after a change of weight sideways, when the font swapped. The fallback is Arial (on Mac and
   Windows alike) scaled to Sailec's average width (Bold 101.65%, Medium against Arial's regular 107.64%, measured on this page's
   own headings and lead) and given Sailec's heights (the overrides are scaled with it). With both weights preloaded in the page,
   the swap usually comes before the first paint anyway */
@font-face{font-family:'Sailec Fallback';font-weight:100 600;src:local('Arial'),local('ArialMT');size-adjust:107.64%;ascent-override:99.41%;descent-override:33.44%;line-gap-override:0%;
font-display: swap;
}
@font-face{font-family:'Sailec Fallback';font-weight:700 900;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:101.65%;ascent-override:106.25%;descent-override:39.35%;line-gap-override:0%;
font-display: swap;
}
.v9{font-family:Sailec,'Sailec Fallback',Helvetica,Arial,sans-serif}
/* links inside a paragraph keep their place in the sentence; on touch widths each gets a 44px tap band from an invisible strip
   above and below, as the footer's links do, so nothing moves */
@media (max-width:1024px){.v9 a.pr-in{position:relative}.v9 a.pr-in::after{content:"";position:absolute;left:0;right:0;top:-10.5px;bottom:-10.5px}}

/* ================= THE PHONE TYPE SCALE: written October 11, 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 .pr-go,.ai-clients-head .v9-sub,.pr-clients-head .v9-sub,.pr-mod-head .v9-sub,.v9 .pr-mod-p,.v9 .pr-mod-note,.pr-cost-head .v9-sub,.v9 .pr-drv-p,.v9 .pr-cost-more p,.v9 a.pr-arw,.pr-terms-head .v9-sub,.pr-est-copy .v9-sub,.v9 .pr-lg,.v9 .pr-est-done-p,.v9 .pr-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 .pr-mod-h,.v9 .pr-brief-t,.v9 .pr-term-t,.v9 .pr-est-done-h,.v9 .pr-q-h{font-size:20px}
.v9 .pr-drv-h{font-size:18px}
/* the headline options by hand: the tool reads 390px, where option A's formula is under 34px, but from about 400px to 560px it
   would run past it; the five are kept together here */
.v9-hero.pr-hero h1.pr-h-a{font-size:min(34px,min(56px,calc((100vw - 44px) / 10.57)));line-height:1.12}
.v9-hero.pr-hero h1.pr-h-b{font-size:min(34px,min(56px,calc((100vw - 44px) / 6.75)));line-height:1.12}
.v9-hero.pr-hero h1.pr-h-c{font-size:min(34px,min(56px,calc((100vw - 44px) / 8.64)));line-height:1.12}
.v9-hero.pr-hero h1.pr-h-d{font-size:min(34px,min(56px,calc((100vw - 44px) / 9.73)));line-height:1.12}
.v9-hero.pr-hero h1.pr-h-e{font-size:min(34px,min(56px,calc((100vw - 44px) / 8.98)));line-height:1.12}
}