/* Performance & Optimisation, built from Web & App Development v2 (page-web-development-v2.css), the starting point CLAUDE.md
   names: its shell, header strip, hero base, buttons, email form, reveal, hover icons, client wall and responsive rules are
   carried over unchanged, with its page classes renamed po-*. Like Data Engineering it runs at 1360px. 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 (po-*) follow the shared ones. */

@font-face{font-family:'Sailec';src:url('assets/fonts/type_dynamic_-_sailec-webfont.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Sailec';src:url('assets/fonts/type_dynamic_-_sailec_medium-webfont.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Sailec';src:url('assets/fonts/type_dynamic_-_sailec_bold-webfont.woff2') format('woff2');font-weight:700;font-display:swap}

/* ---------- page shell: white header strip, then the page ---------- */
body.v9-page .top-wrap{background-color:#fff;background-image:none}
body.v9-page .top-wrap-inner{background:none;min-height:0;padding-bottom:0}
body.v9-page .top-wrap::after,body.v9-page .top-wrap::before{display:none}
body.v9-page .content-area{padding:0}
body.v9-page .logo-white{display:none}
body.v9-page .logo-dark{display:block}
body.v9-page .menu_trigger{color:#232834}
body.v9-page .slicknav_icon-bar{background-color:#232834}
body.v9-page .header-wide{margin-bottom:0;padding-bottom:0}
body.v9-page .header{margin-bottom:0;padding-top:14px;padding-bottom:14px}
/* the site's menu button is 33px wide: its tap area is widened to 44px towards the page, with nothing moving */
body.v9-page .menu_trigger::after{content:"";position:absolute;top:-3px;bottom:-3px;left:-11px;right:0}
/* header, right side, as the reference reads: a quiet help link, then the icons (the menu's search and the menu), then the
   call button last, at the edge. The logo side is the site's own, set smaller. The row runs the full width of the window,
   and is a flex line centred on the logo; the menu's injected search button (.wbm_search) and the menu button drop their
   float offsets here. The link goes under 700px and the button under 521px, where the hero's form sits just below */
body.v9-page .header .logo{width:118px;max-width:none}
@media (max-width:765px){body.v9-page .header .logo{width:108px}}
body.v9-page .header{display:flex;align-items:center;max-width:none}
@media (min-width:1025px){body.v9-page .header{padding-left:40px!important;padding-right:40px!important}}
@media (min-width:1280px){body.v9-page .header{padding-left:56px!important;padding-right:56px!important}}
body.v9-page .header::after,body.v9-page .header-right::after{display:none}
body.v9-page .header-right{float:none;display:flex;align-items:center;gap:6px;margin-left:auto;padding:0}
body.v9-page .hp-hd{order:1;display:flex;align-items:center;gap:14px;margin-right:14px}
body.v9-page .hp-hd-sep{display:block;width:1px;height:14px;background:#C2C5CC}
body.v9-page .hp-hd-l{display:inline-flex;align-items:center;min-height:44px;font-family:'Sailec',sans-serif;font-weight:500;font-size:13.5px;line-height:1.2;color:#4f5565;text-decoration:underline;text-decoration-color:#C2C5CC;text-decoration-thickness:1px;text-underline-offset:4px;transition:color .2s cubic-bezier(.65,0,.35,1),text-decoration-color .2s cubic-bezier(.65,0,.35,1)}
body.v9-page .hp-hd-l:hover,body.v9-page .hp-hd-l:focus-visible{color:#232834;text-decoration-color:#232834}
/* the menu's injected search is not shown in this header: search stays inside the menu itself */
body.v9-page .header .wbm_search{display:none}
body.v9-page .wbm_search{order:2;float:none;width:44px;height:44px;margin:0;color:#4f5565;transition:color .2s cubic-bezier(.65,0,.35,1)}
body.v9-page .wbm_search svg{top:50%;width:20px;height:20px;transform:translate(-50%,-50%);stroke-width:1.9}
body.v9-page .wbm_search:hover{color:#232834}
body.v9-page .hp-hd-cta{order:4;height:40px;margin-left:18px;padding:0 16px 0 20px;gap:4px;font-family:'Sailec',sans-serif;font-size:14.5px}
body.v9-page a.hp-hd-cta,body.v9-page a.hp-hd-cta:hover,body.v9-page a.hp-hd-cta:visited{color:#fff;text-decoration:none}
body.v9-page .hp-hd-cta::after{content:"";position:absolute;left:0;right:0;top:-2px;bottom:-2px}
body.v9-page .hp-hd-cta svg.arr{display:block;flex:none;width:14px;height:14px;stroke:currentColor;stroke-width:2.4;fill:none;transition:transform 150ms cubic-bezier(.4,0,.2,1)}
@media (hover:hover){body.v9-page .hp-hd-cta:hover svg.arr{transform:translateX(2px)}}
body.v9-page .menu_trigger{order:3;float:none;height:38px;margin:0 0 0 8px}
/* the menu's three bars are drawn a little smaller here, scaled about their own centre so they stay level with the row */
body.v9-page .menu_trigger .slicknav_icon{transform-origin:100% 19px;scale:.82}
body.v9-page .hp-hd-l:focus-visible,body.v9-page .wbm_search:focus-visible,body.v9-page .hp-hd-cta:focus-visible,body.v9-page .menu_trigger:focus-visible{outline:2px solid #232834;outline-offset:3px}
@media (max-width:699px){body.v9-page .hp-hd{display:none}}
@media (max-width:520px){body.v9-page .hp-hd-cta{display:none}}
@media (prefers-reduced-motion:reduce){body.v9-page .hp-hd-cta svg.arr{transition:none}}
/* the dark menu marks the current page by file name only in its page list, which doesn't include this page: markMenu() marks
   its Improve what you already run route and, inside it, its Performance & Optimisation tile, in coral with the menu's own small dot */
body.v9-page #wbm .rt[aria-current="page"] b,body.v9-page #wbm .tile[aria-current="page"] b{color:#FA5478}
body.v9-page #wbm .rt[aria-current="page"] b::after,body.v9-page #wbm .tile[aria-current="page"] b::after{content:'';display:inline-block;width:7px;height:7px;margin-left:12px;border-radius:50%;background:#FA5478;vertical-align:middle}

/* ---------- base ---------- */
.v9{font-family:Sailec,Helvetica,Arial,sans-serif;font-weight:500;color:#232834;-webkit-font-smoothing:antialiased;text-wrap:pretty}
.v9 *{box-sizing:border-box}
.v9 :where(h1,h2,h3,p,ul,ol,li){margin:0;padding:0;background:none;font-family:inherit;color:inherit;font-size:inherit;line-height:inherit;text-align:left;font-weight:inherit}
.v9 :where(ul,ol,li){list-style:none}
.v9 :where(li)::marker{content:""}
.v9 a{color:inherit;text-decoration:none}
.v9 a:hover{color:#d33d5c}
.v9 svg{display:block;width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* the page runs a little wider than the sister pages (1360px, not 1240px), but narrower than the header, which spans the
   window: from 1280px the side space is 56px, so on wider screens the content sits inset from the logo and the call button */
.v9-wrap{max-width:1360px;margin:0 auto;padding:0 40px;position:relative}
@media (min-width:1280px){.v9-wrap{padding:0 56px}}
.v9-eyebrow{display:block;font-weight:700;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:#d33d5c;margin:0 0 14px}
.v9-h2{font-weight:700;font-size:clamp(30px,3.4vw,44px);line-height:1.1;letter-spacing:-.03em}
.v9-sec{padding:88px 0}
.v9-bone{background:#F1EEEA}
.v9-head{margin-bottom:48px}
.v9-head .v9-sub{margin:18px 0 0;max-width:640px;font-size:18px;line-height:1.6;color:#4f5565}

/* ---------- reveal: sections ease in once as they reach the viewport ---------- */
.v9-rv{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.v9-rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.v9-rv{opacity:1;transform:none;transition:none}}

/* ---------- hero: copy on the left, the animation on the right ---------- */
.v9-hero{background:#fff;color:#232834;padding:24px 0 64px}
.v9-hero-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:48px 72px;align-items:center}
.v9-hero h1{font-weight:700;font-size:clamp(40px,4.6vw,64px);line-height:1.1;letter-spacing:-.03em;margin:0 0 24px}
.v9-hero .v9-lead{font-size:18px;line-height:1.65;color:#3a3f4b;max-width:520px;margin:0 0 36px}
.v9-hero .v9-lead b{font-weight:700;color:#232834}
/* the one marked word: coral type on a blush marker that sweeps in once */
.v9-hl{position:relative;z-index:0;color:#d33d5c;white-space:nowrap}
.v9-hl::before{content:"";position:absolute;z-index:-1;left:-.07em;right:-.09em;top:.32em;bottom:.12em;background:#FDE0E6;border-radius:.06em .18em .08em .2em;transform:rotate(-1deg);transform-origin:left center;animation:v9Hl .9s cubic-bezier(.65,0,.35,1) .35s both}
@keyframes v9Hl{from{transform:rotate(-1deg) scaleX(0)}to{transform:rotate(-1deg) scaleX(1)}}
@media (prefers-reduced-motion:reduce){.v9-hl::before{animation:none}}
.v9-hero-form{display:flex;flex-wrap:nowrap;gap:10px}
.v9-hero-email{flex:0 1 262px;width:262px;min-width:0;height:48px;padding:0 22px;border:1.5px solid #CFC9C1;border-radius:24px;background:#fff;font:inherit;font-size:16px;color:#232834;outline:0;transition:border-color .2s,box-shadow .2s}
.v9-hero-email::placeholder{color:#6b7180}
.v9-hero-email:focus{border-color:#232834;box-shadow:0 0 0 4px rgba(250,84,120,.22)}
.v9-hero-go{flex:none;width:178px;height:48px;padding:0;border-radius:24px;font-family:inherit;font-size:16px}
@media (max-width:480px){.v9-hero-form{flex-wrap:wrap}.v9-hero-email,.v9-hero-go,.em-email{flex:1 1 100%;width:100%}}
.v9-illo{position:relative;width:100%;max-width:720px;margin:0 auto;aspect-ratio:1920/1805;pointer-events:none}
.v9-illo-art{position:absolute;inset:0}
.v9-illo-art svg{display:block;fill:#000;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}
/* the hero swaps files by laying the next over the last: each pass has its own box, stacked in one place */
.po-hero .v9-illo-art > div{position:absolute;inset:0}
@media (min-width:1101px){
.v9-illo{max-width:none;width:112%;margin:-24px -6% -4% -6%;transform:translateY(-7%)}
.v9-hero .v9-hero-grid{grid-template-columns:minmax(452px,5.2fr) minmax(0,6.8fr);gap:48px}
.v9-hero h1{font-size:clamp(44px,4.2vw,60px);margin-bottom:24px}
.v9-hero .v9-lead{max-width:480px}
}

/* ---------- buttons: a coral pill that lifts on hover onto a soft blush step ---------- */
.v9-btn{--btn-step:#FBC0CC;--btn-ease:cubic-bezier(.5,2.5,.7,.7);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:48px;padding:0 26px;border:1px solid transparent;border-radius:9999px;background:#FA5478;color:#fff;font-family:inherit;font-weight:700;font-size:15px;line-height:20px;white-space:nowrap;text-decoration:none;cursor:pointer;box-shadow:0 0 0 0 var(--btn-step);transition-property:transform,translate,box-shadow;transition-duration:150ms;transition-timing-function:var(--btn-ease)}
.v9 a.v9-btn,.v9 a.v9-btn:hover,.v9 a.v9-btn:visited,.v9 button.v9-btn{color:#fff}
.v9-btn::before{content:"";position:absolute;left:0;top:0;z-index:-1;width:100%;height:100%;background:transparent}
.v9 .v9-btn svg.arr{display:block;flex-shrink:0;width:14px;height:14px;margin-left:6px;stroke:currentColor;stroke-width:2.4;fill:none;transition:transform 150ms cubic-bezier(.4,0,.2,1)}
@media (hover:hover){
.v9-btn:hover{translate:0 -5px;box-shadow:0 5px 0 0 var(--btn-step)}
.v9-btn:hover::before{transform:scaleY(1.4)}
.v9 .v9-btn:hover svg.arr{transform:translateX(2px)}
}
.v9-btn:active{translate:0 -3px;box-shadow:0 3px 0 0 var(--btn-step)}
.v9-btn:focus-visible{outline:2px solid #232834;outline-offset:2px}
.v9-btn:disabled{pointer-events:none;opacity:.5}
.v9-btn.v9-btn-ghost{--btn-step:#E4DFD9;background:#fff;border-color:#232834}
.v9 a.v9-btn.v9-btn-ghost,.v9 a.v9-btn.v9-btn-ghost:hover,.v9 a.v9-btn.v9-btn-ghost:visited{color:#232834}
.v9-hero-go{padding:0;font-size:16px}
@media (prefers-reduced-motion:reduce){.v9-btn,.v9 .v9-btn svg.arr{transition:none}.v9-btn:hover,.v9-btn:active{translate:none}}
.em-center{display:flex;flex-direction:column;align-items:center;text-align:center}
.em-center .v9-h2{text-align:center;max-width:760px}
.em-center .v9-sub{text-align:center;max-width:560px;margin:18px auto 34px;font-size:18px;line-height:1.6;color:#4f5565}
/* ---------- closing: the hero's email and call button, centred ---------- */
.em-cta{border-top:1px solid #E4DFD9;padding-bottom:104px}
.em-cta .v9-sub{margin-bottom:30px}
.em-cta .v9-hero-form{justify-content:center}
.em-cta .em-talk{justify-items:center}
.em-cta .em-status{text-align:center}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- email and call: a valid email shows a check in the field; on send the button narrows to a spinner,
   then the form fades away and a thank-you settles in its place ---------- */
.em-talk{display:grid}
.em-talk>*{grid-area:1/1}
.em-email{position:relative;flex:0 1 262px;width:262px;min-width:0}
.em-email .v9-hero-email{width:100%;padding-right:52px;transition:border-color .35s cubic-bezier(.65,0,.35,1)}
.em-email-check{position:absolute;top:50%;right:10px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:#FDE0E6;transform:scale(0);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.v9 .em-email-check svg{width:15px;height:15px;stroke:#d33d5c;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.em-demo.sending .em-email-check,.em-talk.done .em-email-check{transform:scale(1)}
.em-demo.sending .v9-hero-email,.em-talk.done .v9-hero-email{border-color:#FA5478}
.em-email .v9-hero-email:not(:placeholder-shown):valid{border-color:#FA5478}
.em-email .v9-hero-email:not(:placeholder-shown):valid ~ .em-email-check{transform:scale(1)}
.v9 .v9-btn .em-spin{display:none;width:20px;height:20px;margin-right:10px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;animation:emSpin .8s linear infinite}
.em-demo .v9-btn{transition-property:transform,translate,box-shadow,background-color,width;transition-duration:150ms,150ms,150ms,.35s,.5s;transition-timing-function:var(--btn-ease),var(--btn-ease),var(--btn-ease),cubic-bezier(.65,0,.35,1),cubic-bezier(.65,0,.35,1)}
.em-demo.sending .v9-btn,.em-talk.done .v9-btn{width:100px;background:#FCA3B6}
.em-demo.sending .em-btn-lbl,.em-talk.done .em-btn-lbl{display:none}
.v9 .em-demo.sending .em-spin,.v9 .em-talk.done .em-spin{display:block}
.em-demo.sending .v9-btn:disabled{opacity:1}
.em-demo.sending .v9-btn:hover{translate:none;box-shadow:none}
@keyframes emSpin{to{transform:rotate(360deg)}}
.em-demo{transition:opacity .45s cubic-bezier(.65,0,.35,1),transform .55s cubic-bezier(.65,0,.35,1)}
.em-talk.done .em-demo{opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;transition:opacity .45s cubic-bezier(.65,0,.35,1),transform .55s cubic-bezier(.65,0,.35,1),visibility 0s linear .55s}
.em-talk-done{display:flex;align-items:center;gap:12px;min-height:48px;margin:0;font-size:16px;line-height:1.5;color:#232834;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .5s cubic-bezier(.65,0,.35,1),transform .6s cubic-bezier(.65,0,.35,1),visibility 0s linear .6s}
.em-talk.done .em-talk-done{opacity:1;visibility:visible;transform:none;transition:opacity .55s cubic-bezier(.65,0,.35,1) .3s,transform .65s cubic-bezier(.65,0,.35,1) .3s,visibility 0s}
.em-talk-ic{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#FA5478}
.v9 .em-talk-ic svg{width:14px;height:14px;stroke:#fff;stroke-width:2.6;fill:none}
.em-status{min-height:22px;margin:12px 0 0;font-size:14px;line-height:1.5;color:#c62d4f}
@media (prefers-reduced-motion:reduce){.em-email-check,.em-demo,.em-talk.done .em-demo,.em-talk-done,.em-talk.done .em-talk-done{transition:none}.v9 .v9-btn .em-spin{animation-duration:2.4s}}

/* ---------- responsive ---------- */
@media (max-width:1100px){
.v9-hero-grid{grid-template-columns:minmax(0,1fr)}
.v9-hero .v9-lead{max-width:620px}
}
@media (max-width:820px){
.v9-wrap{padding:0 22px}
.v9-sec{padding:64px 0}
.v9-hero{padding:20px 0 48px}
}

/* ---------- text links: ink with a tint underline that darkens on hover, and an arrow that steps forward ---------- */
.v9 .po-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}
.po-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)}
.po-go-a{display:inline-block;transition:transform .3s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .po-go:hover{color:#232834}.po-go:hover .po-go-l{text-decoration-color:#232834}.po-go:hover .po-go-a{transform:translateX(3px)}}
.v9 .po-go:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.po-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 */
.po-clients-head{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:44px;text-align:center}
.po-clients-head .v9-h2{margin:0;text-align:center;text-wrap:balance}
.po-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){.po-clients-head{margin-bottom:32px}}
@media (max-width:560px){.po-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)}
}


/* ================= PERFORMANCE & OPTIMISATION (this page's own) ================= */

/* ---------- this page's hero, as on Data Engineering: 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: A "Software that feels" 8.71em, B "Fast where it
   matters," 9.79em, C "Faster for the people" 9.49em, D "Find what's slow," 7.64em, E "steady when it's busy" 9.78em. Up to
   1100px the size follows the viewport, so that line takes 92% of the column at most, 56px at the largest; from 1101px, where
   the copy column is 560px, each runs up to the size that keeps it within 515px (92%). The form is sized as CLAUDE.md sets it
   for heroes: "Book a call" at 172px beside a 262px field, stacked at full width on phones ---------- */
.v9-hero.po-hero h1.po-h-a{font-size:min(56px,calc((100vw - 44px) / 9.5))}
.v9-hero.po-hero h1.po-h-b,.v9-hero.po-hero h1.po-h-e{font-size:min(56px,calc((100vw - 44px) / 10.7))}
.v9-hero.po-hero h1.po-h-c{font-size:min(56px,calc((100vw - 44px) / 10.4))}
.v9-hero.po-hero h1.po-h-d{font-size:min(56px,calc((100vw - 44px) / 8.4))}
@media (min-width:821px){.v9.po-hero .em-talk .v9-hero-form{grid-template-columns:262px auto}}
@media (min-width:561px) and (max-width:820px){.v9.po-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:561px){.v9.po-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{width:172px;padding:0}}
@media (max-width:560px){.v9-hero.po-hero .v9-lead{font-size:17px}}
@media (min-width:1101px){
.v9-hero.po-hero .v9-hero-grid{grid-template-columns:minmax(560px,5.4fr) minmax(0,6.6fr);gap:48px}
.v9-hero.po-hero h1.po-h-a,.v9-hero.po-hero h1.po-h-d{font-size:clamp(52px,4.4vw,58px)}
.v9-hero.po-hero h1.po-h-c{font-size:clamp(52px,4.4vw,54px)}
.v9-hero.po-hero h1.po-h-b,.v9-hero.po-hero h1.po-h-e{font-size:52px}
.v9-hero.po-hero .v9-lead{max-width:520px}
/* the drawing is enlarged a little into the page margin, not into the column gap */
.po-hero .v9-illo{width:106%;margin:0 -6% 0 0;transform:none}
}
/* the drawing's canvas is 1920 x 1200, and the box keeps that shape reserved from the first paint */
.po-hero .v9-illo{aspect-ratio:1920/1200}
/* the landing view, as on the sister pages: on desktop the hero's top space follows the window's height, so the headline, form
   and drawing hold the middle of the first view and the client wall still shows below */
.v9-hero.po-hero{padding:40px 0 64px}
@media (min-width:1101px){.v9-hero.po-hero{padding:clamp(32px,7vh,84px) 0 72px}}
@media (max-width:560px){.v9-hero.po-hero{padding:28px 0 48px}}

/* ---------- tap areas and the legacy menu, as on the sister pages. 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 is held to no width until its
   script marks it loaded, so it can't cause sideways scroll ---------- */
body.v9-page .header-wide.wb-hd .header .logo{padding:7px 0;margin:-7px 0}
body.v9-page .wb-ft .wb-ft-logo{padding:8px 0;margin:-8px 0}
body.v9-page #main_menu:not(.loaded){left:0;right:auto;width:0;max-width:0;overflow:hidden}

/* ---------- let's run it better: the closing email form, centred, sized and behaving as the hero's at every width, with
   nothing after it ---------- */
.po-cta .v9-h2{text-wrap:balance}
.po-cta .v9-sub{text-wrap:pretty}

/* ---------- when slow becomes normal: the copy, and one phone screen loading as a filmstrip of four frames at equal moments.
   The page fills in part by part, and in the last frame a late image pushes the button down as the thumb reaches for it: a
   faint dashed outline is left where the button was, the tap lands on it, and that frame is the one coral part. Beside the
   copy from 1024px, below it on tablets, and two by two in order on phones. The frames appear in turn once, as the section
   comes into view; the push happens once and holds. Every frame keeps its shape from the first paint ---------- */
.po-slow{border-top:1px solid #E4DFD9}
.po-slow .v9-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
@media (min-width:1024px){.po-slow .v9-wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:center}}
.po-slow-copy .v9-h2{margin:0 0 24px;text-wrap:balance}
.v9 .po-slow-copy p{margin:0 0 18px;max-width:560px;font-size:18px;line-height:1.65;color:#4f5565}
.v9 .po-slow-copy p.po-urgent{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin:4px 0 0;color:#232834}
.v9 .po-urgent .po-go{margin-top:0}
@media (max-width:560px){.v9 .po-slow-copy p{font-size:17px}}
.po-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.po-fs{position:relative;width:100%;max-width:720px;margin:0}
.v9 .po-fs ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
@media (max-width:560px){.v9 .po-fs ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}}
.v9 .po-fs li{display:grid;gap:12px;align-content:start;margin:0;padding:0}
.po-fs-ph{position:relative;display:block;aspect-ratio:9/17;border:1.75px solid #232834;border-radius:18px;background:#fff;overflow:hidden}
.po-fs-ph > span{position:absolute;display:block}
.po-fs-hd{left:0;right:0;top:0;height:11%;border-bottom:1.5px solid #E4DFD9}
.po-fs-logo{left:10%;top:3.4%;width:11%;aspect-ratio:1;border:1.75px solid #232834;border-radius:50%}
.po-fs-nav{right:10%;top:4.8%;width:24%;height:2.4%;border-radius:9px;background:#C2C5CC}
.po-fs-t{left:10%;top:16%;width:62%;height:3.2%;border-radius:9px;background:#232834}
.po-fs-l1,.po-fs-l2,.po-fs-l3{left:10%;height:2.4%;border-radius:9px;background:#C2C5CC}
.po-fs-l1{top:23%;width:80%}
.po-fs-l2{top:28%;width:72%}
.po-fs-l3{top:33%;width:54%}
.po-fs-btn{left:10%;right:10%;top:41%;height:7%;border:1.75px solid #232834;border-radius:999px;background:#fff}
.po-fs-btn::after{content:"";position:absolute;left:30%;right:30%;top:39%;bottom:39%;border-radius:9px;background:#C2C5CC}
.po-fs-img{left:10%;right:10%;top:41%;height:26%;border:1.75px solid #232834;border-radius:10px;background:#F1EEEA;transform-origin:50% 0}
.po-fs-was{left:10%;right:10%;top:41%;height:7%;border:1.5px dashed #C2C5CC;border-radius:999px}
.po-fs-tap{left:50%;top:44.5%;width:16%;aspect-ratio:1;margin-left:-8%;transform:translateY(-50%);border:1.75px solid #232834;border-radius:50%;background:#E4DFD9}
.po-fs-k{display:block;font-size:14px;line-height:1.4;color:#4f5565;text-align:center;text-wrap:balance}
.po-fs .k-moved .po-fs-ph{border-color:#FA5478;box-shadow:0 0 0 1px #FA5478}
.po-fs .k-moved .po-fs-k{font-weight:700;color:#d33d5c}
/* the frames appear in turn; then, in the last, the image arrives, the button is pushed down (by 29% of the screen: the image
   and its gap) and the tap lands where it was */
.v9 .po-fs li{opacity:0;transform:translateY(8px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.v9 .po-fs.in li{opacity:1;transform:none}
.v9 .po-fs.in li:nth-child(2){transition-delay:.15s}
.v9 .po-fs.in li:nth-child(3){transition-delay:.3s}
.v9 .po-fs.in li:nth-child(4){transition-delay:.45s}
.po-fs .k-moved .po-fs-img{transform:scaleY(0);transition:transform .7s cubic-bezier(.65,0,.35,1) 1.1s}
.po-fs .k-moved .po-fs-btn{transition:transform .7s cubic-bezier(.65,0,.35,1) 1.1s}
.po-fs .k-moved .po-fs-was,.po-fs .k-moved .po-fs-tap{opacity:0;transition:opacity .45s cubic-bezier(.65,0,.35,1) 1.3s}
.po-fs.in .k-moved .po-fs-img{transform:none}
.po-fs.in .k-moved .po-fs-btn{transform:translateY(414.3%)}
.po-fs.in .k-moved .po-fs-was,.po-fs.in .k-moved .po-fs-tap{opacity:1}
@media (prefers-reduced-motion:reduce){
.v9 .po-fs li,.po-fs .k-moved .po-fs-img,.po-fs .k-moved .po-fs-btn,.po-fs .k-moved .po-fs-was,.po-fs .k-moved .po-fs-tap{transition:none}
.v9 .po-fs li{opacity:1;transform:none}
.po-fs .k-moved .po-fs-img{transform:none}
.po-fs .k-moved .po-fs-btn{transform:translateY(414.3%)}
.po-fs .k-moved .po-fs-was,.po-fs .k-moved .po-fs-tap{opacity:1}
}

/* ---------- measured from the user's side: the copy, and real visits to one page drawn as bars from the quickest to the
   slowest, with no figures. The shape is a typical long tail: most visits are quick, and the slow ones trail off to the right.
   The ten coral bars hold exactly a quarter of the visits (105.6 of 422.6 in the drawing's own counts), so "One visit in four"
   is true of the picture; the average hairline is the drawing's real mean (bin 8.1 of 20, 38% across), and it sits among the
   quick visits. The figure sits left of the copy from 1024px and below it on smaller screens; the chart keeps its shape at every
   width. The bars rise once, left to right, when the chart is well in view ---------- */
.po-meas{border-top:1px solid #E4DFD9}
.po-meas .v9-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
@media (min-width:1024px){.po-meas .v9-wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:center}.po-meas .po-hg{order:-1}}
.po-meas-copy .v9-h2{margin:0 0 24px;text-wrap:balance}
.v9 .po-meas-copy p{margin:0 0 18px;max-width:560px;font-size:18px;line-height:1.65;color:#4f5565}
.v9 .po-meas-copy p:last-child{margin-bottom:0}
@media (max-width:560px){.v9 .po-meas-copy p{font-size:17px}}
.po-hg{width:100%;max-width:680px;margin:0}
.po-hg-chart{position:relative;display:block;aspect-ratio:16/10}
.po-hg-chart > span{position:absolute;display:block}
.po-hg-y{left:0;top:0;font-size:14px;line-height:1.3;color:#4f5565}
.po-hg-bars{left:0;right:0;top:20%;bottom:13%;display:grid!important;grid-template-columns:repeat(20,minmax(0,1fr));gap:0 clamp(2px,.5vw,6px);align-items:end}
.po-hg-bars i{display:block;background:#8E939E;border-radius:3px 3px 0 0;transform:scaleY(0);transform-origin:50% 100%;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.po-hg-bars i.c{background:#FA5478}
.po-hg-bars i:nth-child(1){height:5.8%;transition-delay:0ms}
.po-hg-bars i:nth-child(2){height:19.2%;transition-delay:35ms}
.po-hg-bars i:nth-child(3){height:46.2%;transition-delay:70ms}
.po-hg-bars i:nth-child(4){height:76.9%;transition-delay:105ms}
.po-hg-bars i:nth-child(5){height:96.2%;transition-delay:140ms}
.po-hg-bars i:nth-child(6){height:100%;transition-delay:175ms}
.po-hg-bars i:nth-child(7){height:88.5%;transition-delay:210ms}
.po-hg-bars i:nth-child(8){height:73.1%;transition-delay:245ms}
.po-hg-bars i:nth-child(9){height:57.7%;transition-delay:280ms}
.po-hg-bars i:nth-child(10){height:46.2%;transition-delay:315ms}
.po-hg-bars i:nth-child(11){height:42.5%;transition-delay:350ms}
.po-hg-bars i:nth-child(12){height:35.2%;transition-delay:385ms}
.po-hg-bars i:nth-child(13){height:28.7%;transition-delay:420ms}
.po-hg-bars i:nth-child(14){height:23.5%;transition-delay:455ms}
.po-hg-bars i:nth-child(15){height:19.2%;transition-delay:490ms}
.po-hg-bars i:nth-child(16){height:16%;transition-delay:525ms}
.po-hg-bars i:nth-child(17){height:12.7%;transition-delay:560ms}
.po-hg-bars i:nth-child(18){height:10.6%;transition-delay:595ms}
.po-hg-bars i:nth-child(19){height:8.5%;transition-delay:630ms}
.po-hg-bars i:nth-child(20){height:6.3%;transition-delay:665ms}
.po-hg-base{left:0;right:0;bottom:13%;height:1.5px;background:#232834}
.po-hg-avg{left:38%;top:12%;bottom:13%;width:0;border-left:1.5px solid #232834}
.po-hg-avg span{position:absolute;bottom:100%;left:0;margin-bottom:6px;transform:translateX(-50%);font-size:14px;font-weight:700;line-height:1.3;color:#232834;white-space:nowrap}
.po-hg-tail{left:calc(50% + 1px);right:1px;top:50%;height:8px;border:1.5px solid #FA5478;border-bottom:0;border-radius:3px 3px 0 0}
.po-hg-tail span{position:absolute;bottom:100%;left:50%;margin-bottom:6px;transform:translateX(-50%);font-size:15px;font-weight:700;line-height:1.3;color:#d33d5c;white-space:nowrap}
.po-hg-x{left:0;right:0;bottom:0;display:flex!important;justify-content:space-between;font-size:14px;line-height:1.3;color:#4f5565}
.po-hg-avg,.po-hg-tail{opacity:0;transition:opacity .5s cubic-bezier(.65,0,.35,1)}
.po-hg.go .po-hg-bars i{transform:none}
.po-hg.go .po-hg-avg{opacity:1;transition-delay:1.1s}
.po-hg.go .po-hg-tail{opacity:1;transition-delay:1.35s}
@media (prefers-reduced-motion:reduce){.po-hg-bars i,.po-hg-avg,.po-hg-tail{transition:none!important}.po-hg-bars i{transform:none}.po-hg-avg,.po-hg-tail{opacity:1}}

/* ---------- fixed in order of impact: the copy across the top, then one slow request's trace, its parts as spans in time order
   (the page, the API, a database query and a payment provider), each in proportion to the time it takes. The longest is the
   coral part, marked "Fix first", so the section reads with nothing chosen. Choosing a fix shortens the spans it affects and
   leaves a faint dashed outline of where each changed span used to be; "Fix first" then moves to whatever is now longest. One
   fix at a time; choosing it again clears it. The trace holds its height in every state, so nothing below it moves. When it is
   well in view, a short soft coral line runs once along it, just under the spans, and is gone. Labels sit beside the spans,
   and above them on phones. Below it, the four kinds of fix, each with its anchor and its icon's hover Lottie ---------- */
.po-fix{border-top:1px solid #E4DFD9}
.po-fix-head{max-width:760px;margin:0 0 44px}
.po-fix-head .v9-h2{margin:0 0 24px;text-wrap:balance}
.v9 .po-fix-head p{max-width:680px;font-size:18px;line-height:1.65;color:#4f5565}
@media (max-width:560px){.v9 .po-fix-head p{font-size:17px}}
.po-tr{position:relative;margin:0}
.po-tr-chart{position:relative;display:grid;border-top:1px solid #E4DFD9;border-bottom:1px solid #E4DFD9}
.po-tr-row{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:24px;align-items:center;min-height:64px}
.po-tr-row + .po-tr-row{border-top:1px solid #F1EEEA}
.po-tr-lbl{display:flex;align-items:baseline;gap:10px;min-width:0;font-size:15px;line-height:1.3;color:#232834;white-space:nowrap}
.po-tr-lbl b{font-weight:500}
.v9 .po-tr-tag{font-style:normal;font-weight:700;font-size:14px;color:#d33d5c;opacity:0;transition:opacity .45s cubic-bezier(.65,0,.35,1)}
.po-tr-lane{position:relative;display:block;height:26px}
.po-tr-bar,.po-tr-was{position:absolute;top:0;bottom:0;display:block;border-radius:4px}
.po-tr-bar{background:#8E939E;transition:left .6s cubic-bezier(.65,0,.35,1),width .6s cubic-bezier(.65,0,.35,1),background-color .45s cubic-bezier(.65,0,.35,1)}
.po-tr-was{border:1.5px dashed #C2C5CC;opacity:0;transition:opacity .45s cubic-bezier(.65,0,.35,1)}
.po-tr-chart .r1 .po-tr-bar,.po-tr-chart .r1 .po-tr-was{left:0%;width:15%}
.po-tr-chart .r2 .po-tr-bar,.po-tr-chart .r2 .po-tr-was{left:15%;width:13%}
.po-tr-chart .r3 .po-tr-bar,.po-tr-chart .r3 .po-tr-was{left:28%;width:48%}
.po-tr-chart .r4 .po-tr-bar,.po-tr-chart .r4 .po-tr-was{left:76%;width:24%}
.po-tr-chart.fx-1 .r1 .po-tr-bar{left:0%;width:7%}.po-tr-chart.fx-1 .r1 .po-tr-was{opacity:1}
.po-tr-chart.fx-1 .r2 .po-tr-bar{left:7%;width:13%}.po-tr-chart.fx-1 .r2 .po-tr-was{opacity:1}
.po-tr-chart.fx-1 .r3 .po-tr-bar{left:20%;width:48%}.po-tr-chart.fx-1 .r3 .po-tr-was{opacity:1}
.po-tr-chart.fx-1 .r4 .po-tr-bar{left:68%;width:24%}.po-tr-chart.fx-1 .r4 .po-tr-was{opacity:1}
.po-tr-chart.fx-2 .r2 .po-tr-bar{left:15%;width:9%}.po-tr-chart.fx-2 .r2 .po-tr-was{opacity:1}
.po-tr-chart.fx-2 .r3 .po-tr-bar{left:24%;width:14%}.po-tr-chart.fx-2 .r3 .po-tr-was{opacity:1}
.po-tr-chart.fx-2 .r4 .po-tr-bar{left:38%;width:24%}.po-tr-chart.fx-2 .r4 .po-tr-was{opacity:1}
.po-tr-chart.fx-3 .r2 .po-tr-bar{left:15%;width:5%}.po-tr-chart.fx-3 .r2 .po-tr-was{opacity:1}
.po-tr-chart.fx-3 .r3 .po-tr-bar{left:20%;width:6%}.po-tr-chart.fx-3 .r3 .po-tr-was{opacity:1}
.po-tr-chart.fx-3 .r4 .po-tr-bar{left:26%;width:24%}.po-tr-chart.fx-3 .r4 .po-tr-was{opacity:1}
.po-tr-chart.fx-4 .r4 .po-tr-bar{left:76%;width:10%}.po-tr-chart.fx-4 .r4 .po-tr-was{opacity:1}
.po-tr-chart:is(.fx-0,.fx-1,.fx-4) .r3 .po-tr-bar,.po-tr-chart:is(.fx-2,.fx-3) .r4 .po-tr-bar{background:#FA5478}
.po-tr-chart:is(.fx-0,.fx-1,.fx-4) .r3 .po-tr-tag,.po-tr-chart:is(.fx-2,.fx-3) .r4 .po-tr-tag{opacity:1}
@media (max-width:560px){.po-tr-row{grid-template-columns:minmax(0,1fr);row-gap:8px;align-items:start;min-height:0;padding:12px 0 14px}}
.v9 svg.po-tr-flow{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.v9 .po-tr-flow path{fill:none;stroke:#FA5478;stroke-opacity:.55;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:8 200;stroke-dashoffset:8}
.po-tr.go .po-tr-flow path{stroke-dashoffset:-100;transition:stroke-dashoffset 2.6s cubic-bezier(.65,0,.35,1) .3s}
.po-tr-try{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:24px 0 0}
.po-tr-try-k{margin-right:6px;font-weight:700;font-size:15px;color:#232834}
.v9 .po-tr-fix{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1.5px solid #C2C5CC;border-radius:999px;background:#fff;font:inherit;font-weight:700;font-size:15px;line-height:1.2;color:#232834;cursor:pointer;transition:border-color .2s,background-color .2s}
@media (hover:hover){.v9 .po-tr-fix:hover{border-color:#232834}}
.v9 .po-tr-fix[aria-pressed="true"]{border-color:#FA5478;background:#FDE0E6}
.v9 .po-tr-fix:focus-visible{outline:2px solid #232834;outline-offset:3px}
.v9 .po-fx{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 32px;margin:0;padding:0;list-style:none}
.v9 .po-fx li{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;margin:0;padding:0;scroll-margin-top:32px}
.v9 .po-fx{margin-top:56px}
.v9 .po-fx .hp-oic.cb-ic-box{grid-row:auto;width:56px;height:56px;margin:0 0 16px -4px}
.v9 .po-fx h3{margin:0 0 8px;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .po-fx p{font-size:16px;line-height:1.6;color:#4f5565}
@media (max-width:1023px){.v9 .po-fx{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.v9 .po-fx{grid-template-columns:minmax(0,1fr);gap:36px}}
@media (prefers-reduced-motion:reduce){.po-tr-bar,.po-tr-was,.v9 .po-tr-tag,.v9 .po-tr-fix{transition:none}.v9 .po-tr-flow{display:none}}

/* ---------- when everyone arrives at once: the copy, and one checkout at its busiest moment, drawn as a quiet window in the
   page's line with real text. The recommendations panel waits on a slow provider and shows its fallback, "Back shortly", the
   one coral part; the basket, the delivery choice and the button to pay carry on as normal. The window is laid out in normal
   flow, so it holds its space from the first paint and stays readable on phones. As it comes into view its placeholders show,
   then the fallback settles in, once. Below it, its three entries and the line to Cloud, DevOps & Security ---------- */
.po-peak{border-top:1px solid #E4DFD9}
.po-peak-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
@media (min-width:1024px){.po-peak-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:center}}
.po-peak-copy .v9-h2{margin:0 0 24px;text-wrap:balance}
.v9 .po-peak-copy p{max-width:560px;font-size:18px;line-height:1.65;color:#4f5565}
@media (max-width:560px){.v9 .po-peak-copy p{font-size:17px}}
.po-bz{width:100%;max-width:560px;margin:0;justify-self:center}
.po-bz-win{border:1.75px solid #232834;border-radius:20px;background:#fff;overflow:hidden}
.po-bz-bar{display:flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-bottom:1.5px solid #E4DFD9;background:#F1EEEA}
.po-bz-bar i{flex:none;width:10px;height:10px;border:1.5px solid #232834;border-radius:50%;background:#fff}
.po-bz-url{flex:0 1 200px;height:20px;margin:0 auto;border:1.5px solid #E4DFD9;border-radius:10px;background:#fff}
.po-bz-body{display:grid;gap:18px;padding:24px 24px 26px}
.v9 .po-bz-h{font-weight:700;font-size:20px;line-height:1.2;color:#232834}
.v9 .po-bz-items{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.v9 .po-bz-items li{display:grid;grid-template-columns:48px minmax(0,1fr) 56px;align-items:center;gap:14px}
.po-bz-th{width:48px;height:48px;border:1.5px solid #232834;border-radius:10px;background:#F1EEEA}
.po-bz-n{font-size:16px;line-height:1.3;color:#232834}
.po-bz-q{height:28px;border:1.5px solid #C2C5CC;border-radius:14px}
.po-bz-rec{display:grid;gap:10px}
.v9 .po-bz-k{font-weight:700;font-size:15px;line-height:1.3;color:#232834}
.po-bz-fb{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px;border:1.75px solid #FA5478;border-radius:14px}
.po-bz-sk{aspect-ratio:1;border-radius:10px;background:#F1EEEA;transition:opacity .5s cubic-bezier(.65,0,.35,1) .6s}
.po-bz-fb b{position:absolute;left:50%;top:50%;padding:7px 16px;border-radius:999px;background:#fff;font-weight:700;font-size:15px;line-height:1.3;color:#d33d5c;white-space:nowrap;transform:translate(-50%,-50%);opacity:0;transition:opacity .5s cubic-bezier(.65,0,.35,1) .75s}
.po-bz.in .po-bz-sk{opacity:.45}
.po-bz.in .po-bz-fb b{opacity:1}
.po-bz-del{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1.5px solid #E4DFD9;border-bottom:1.5px solid #E4DFD9;font-size:15px;line-height:1.3;color:#232834}
.po-bz-chip{padding:6px 14px;border:1.5px solid #232834;border-radius:999px;font-weight:700;font-size:14px}
.po-bz-pay{display:flex;align-items:center;justify-content:center;height:48px;border-radius:999px;background:#232834;color:#fff;font-weight:700;font-size:16px}
.v9 .po-bz-cap{margin:16px 0 0;font-size:15px;line-height:1.5;color:#4f5565;text-align:center;text-wrap:balance}
@media (max-width:560px){.po-bz-body{gap:16px;padding:20px 18px 22px}.v9 .po-bz-items li{grid-template-columns:40px minmax(0,1fr) 48px;gap:12px}.po-bz-th{width:40px;height:40px}}
@media (prefers-reduced-motion:reduce){.po-bz-sk,.po-bz-fb b{transition:none}.po-bz-sk{opacity:.45}.po-bz-fb b{opacity:1}}
.v9 .po-fx.po-fx-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1023px){.v9 .po-fx.po-fx-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.v9 .po-fx.po-fx-3{grid-template-columns:minmax(0,1fr)}}
.v9 .po-peak-more{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin:40px 0 0;font-size:17px;line-height:1.6;color:#4f5565}
.v9 .po-peak-more .po-go{margin-top:0}

/* ---------- AI features people don't wait for: the page's one bone band and its quietest section. The copy and the two AI links,
   and one small still drawing from its own words: an answer as a line of grey words, with a short coral bracket over its first
   words and a longer ink one over the whole line, the two waits the copy names. The brackets draw in once, first words first. ---------- */
.po-ai-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
@media (min-width:1024px){.po-ai-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:center}}
.po-ai-copy .v9-h2{margin:0 0 24px;text-wrap:balance}
.v9 .po-ai-copy p{max-width:640px;font-size:18px;line-height:1.65;color:#4f5565}
@media (max-width:560px){.v9 .po-ai-copy p{font-size:17px}}
.po-ai-links{display:flex;flex-wrap:wrap;gap:0 28px;margin:16px 0 0}
.po-ai-fig{width:100%;max-width:520px;margin:0;padding:32px 28px 36px;border-radius:20px;background:#fff;justify-self:center}
.po-ai-d{display:grid;gap:12px}
.po-ai-row{display:grid;gap:6px}
.po-ai-first{width:37%}
.po-ai-lb{font-weight:700;font-size:14px;line-height:1.3;white-space:nowrap}
.po-ai-full .po-ai-lb{color:#232834}
.po-ai-first .po-ai-lb{color:#d33d5c}
.po-ai-br{display:block;height:10px;border:1.5px solid #232834;border-bottom:0;border-radius:3px 3px 0 0;transform:scaleX(0);transform-origin:0 50%;transition:transform .7s cubic-bezier(.65,0,.35,1)}
.po-ai-first .po-ai-br{border-color:#FA5478;border-width:2px 2px 0}
.po-ai-lb{opacity:0;transition:opacity .45s cubic-bezier(.65,0,.35,1)}
.po-ai-fig.in .po-ai-first .po-ai-br{transform:none;transition-delay:.4s}
.po-ai-fig.in .po-ai-first .po-ai-lb{opacity:1;transition-delay:.7s}
.po-ai-fig.in .po-ai-full .po-ai-br{transform:none;transition-delay:1s}
.po-ai-fig.in .po-ai-full .po-ai-lb{opacity:1;transition-delay:1.3s}
.po-ai-line{display:flex;gap:0 1%;margin-top:2px}
.po-ai-line i{display:block;height:12px;border-radius:6px;background:#C2C5CC}
.po-ai-line i:nth-child(1){width:12%}
.po-ai-line i:nth-child(2){width:8%}
.po-ai-line i:nth-child(3){width:15%}
.po-ai-line i:nth-child(4){width:10%}
.po-ai-line i:nth-child(5){width:6%}
.po-ai-line i:nth-child(6){width:14%}
.po-ai-line i:nth-child(7){width:9%}
.po-ai-line i:nth-child(8){width:11%}
.po-ai-line i:nth-child(9){width:7%}
@media (prefers-reduced-motion:reduce){.po-ai-br,.po-ai-lb{transition:none}.po-ai-br{transform:none}.po-ai-lb{opacity:1}}

/* ---------- so it stays fast: the copy and the link to the engagement models, and one journey's budget written in plain words
   on a single note, with no figures. Its lines follow the hero's three cards (shows, responds, holds still) and say when it is
   checked; the "Budget" tag is the one coral part. The lines settle in turn, once ---------- */
.po-keep{border-top:1px solid #E4DFD9}
.po-keep-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
@media (min-width:1024px){.po-keep-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:center}}
.po-keep-copy .v9-h2{margin:0 0 24px;text-wrap:balance}
.v9 .po-keep-copy p{margin:0 0 18px;max-width:600px;font-size:18px;line-height:1.65;color:#4f5565}
.v9 .po-keep-copy .po-go{margin-top:0}
@media (max-width:560px){.v9 .po-keep-copy p{font-size:17px}}
.po-bud{width:100%;max-width:460px;margin:0;padding:28px 28px 22px;border:1.75px solid #232834;border-radius:20px;background:#fff;justify-self:center}
.po-bud-tag{display:inline-flex;align-items:center;height:30px;padding:0 14px;border:1.75px solid #FA5478;border-radius:999px;font-weight:700;font-size:14px;line-height:1;color:#d33d5c}
.v9 .po-bud-t{margin:14px 0 14px;font-weight:700;font-size:24px;line-height:1.2;letter-spacing:-.02em;color:#232834}
.po-bud dl{display:grid;margin:0}
.po-bud dl > div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:4px 16px;padding:14px 0;border-top:1px solid #E4DFD9}
.po-bud dt{margin:0;font-weight:700;font-size:15px;line-height:1.5;color:#232834}
.po-bud dd{margin:0;font-size:15px;line-height:1.5;color:#4f5565}
@media (max-width:560px){.po-bud{padding:24px 20px 18px}.po-bud dl > div{grid-template-columns:minmax(0,1fr)}}
.po-bud dl > div{opacity:0;transform:translateY(6px);transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
.po-bud.in dl > div{opacity:1;transform:none}
.po-bud.in dl > div:nth-child(1){transition-delay:.3s}
.po-bud.in dl > div:nth-child(2){transition-delay:.45s}
.po-bud.in dl > div:nth-child(3){transition-delay:.6s}
.po-bud.in dl > div:nth-child(4){transition-delay:.75s}
@media (prefers-reduced-motion:reduce){.po-bud dl > div{opacity:1;transform:none;transition:none}}

/* phones: body text inside the budget note and under the busy screen at 16px, as everywhere on the page */
@media (max-width:560px){.po-bud dt,.po-bud dd{font-size:16px}.v9 .po-bz-cap{font-size:16px}.v9 .po-bz-k{font-size:16px}}