/* SEO & AI Search (seo.dc.html, live from 4 October 2026; built as seo-v2), built from Web & App Development (page-web-development-v2.css): its shell, header strip, hero base,
   buttons, email form, reveal, hover icons, client wall and responsive rules are carried over unchanged. Header and footer
   are the site's own (page-seo-1/2.css, site-header.css, site-footer.css); everything here scopes to .v9 or body.v9-page.
   Page-specific rules (sa-*) 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}}
/* markMenu()'s marks, in coral with the menu's own small dot. SEO & AI Search is in the menu's search only, with no route
   or tile, so on this page nothing is marked */
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 */
.sa-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 .sa-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}
.sa-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)}
.sa-go-a{display:inline-block;transition:transform .3s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .sa-go:hover{color:#232834}.sa-go:hover .sa-go-l{text-decoration-color:#232834}.sa-go:hover .sa-go-a{transform:translateX(3px)}}
.v9 .sa-go:focus-visible{outline:2px solid #232834;outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.sa-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 */
.sa-clients-head{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:44px;text-align:center}
.sa-clients-head .v9-h2{margin:0;text-align:center;text-wrap:balance}
.sa-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){.sa-clients-head{margin-bottom:32px}}
@media (max-width:560px){.sa-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)}
}


/* ================= SEO & AI SEARCH (this page's own) ================= */

/* ---------- this page's hero, as on Platform 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 (tools: run_script on the woff2, 3 October
   2026): A "Easier to find," 6.16em, B "and in AI answers" 7.98em, C "Search starts" 6.01em, D "Made to be found" 8.17em, E "Clear to read," 6.15em. 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,
   the longer line stays within 509px (91%). 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.sa-hero h1.sa-h-a{font-size:min(56px,calc((100vw - 44px) / 6.7))}
.v9-hero.sa-hero h1.sa-h-b{font-size:min(56px,calc((100vw - 44px) / 8.7))}
.v9-hero.sa-hero h1.sa-h-c{font-size:min(56px,calc((100vw - 44px) / 6.55))}
.v9-hero.sa-hero h1.sa-h-d{font-size:min(56px,calc((100vw - 44px) / 8.9))}
.v9-hero.sa-hero h1.sa-h-e{font-size:min(56px,calc((100vw - 44px) / 6.7))}
@media (min-width:821px){.v9.sa-hero .em-talk .v9-hero-form{grid-template-columns:262px auto}}
@media (min-width:561px) and (max-width:820px){.v9.sa-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:561px){.v9.sa-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{width:172px;padding:0}}
@media (max-width:560px){.v9-hero.sa-hero .v9-lead{font-size:17px}}
@media (min-width:1101px){
.v9-hero.sa-hero .v9-hero-grid{grid-template-columns:minmax(560px,5.4fr) minmax(0,6.6fr);gap:48px}
.v9-hero.sa-hero h1.sa-h-a,.v9-hero.sa-hero h1.sa-h-b,.v9-hero.sa-hero h1.sa-h-c,.v9-hero.sa-hero h1.sa-h-d,.v9-hero.sa-hero h1.sa-h-e{font-size:clamp(52px,4.4vw,58px)}
.v9-hero.sa-hero .v9-lead{max-width:520px}
/* the drawing is enlarged a little into the page margin, not into the column gap */
.sa-hero .v9-illo{width:106%;margin:0 -6% 0 0;transform:none}
}
/* the drawing's canvas is 2000 x 1200, and it keeps its shape reserved from the first paint. On
   phones it sits below the form and runs to the window's edges, as on Platform Engineering; the canvas carries its own
   margin, so the browser frame is never cropped */
.sa-hero .v9-illo{aspect-ratio:2000/1200}
@media (max-width:560px){.sa-hero .v9-illo{width:calc(100% + 44px);max-width:none;margin:0 -22px}}
/* the landing view, as on the sister pages: on desktop the hero's top space follows the window's height, so the headline, form
   and drawing hold the middle of the first view and the client wall still shows below */
.v9-hero.sa-hero{padding:40px 0 64px}
@media (min-width:1101px){.v9-hero.sa-hero{padding:clamp(32px,7vh,84px) 0 72px}}
@media (max-width:560px){.v9-hero.sa-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}
/* nothing shifts as the page loads: the header logo keeps its shape (4393 x 1501) before it arrives, and the two Sailec weights
   used above the fold are preloaded in the page's head, so the text doesn't reflow when they swap in */
body.v9-page .header .logo .logo-dark{aspect-ratio:4393/1501;height:auto}

/* ---------- anchors: a section with an anchor stops 24px below the top of the window ---------- */
.v9-sec[id]{scroll-margin-top:24px}

/* ---------- recommendations aren't fixes: the copy, and one SEO audit as a bone card in the family's line (ink outline, radius
   20). Its findings sit as rows between tint hairlines, each with its status as a white tag. When the card is well in view, one
   tag changes once and holds: "Fixed" gives way to "Undone by a release", in coral with a small coral dot, since the copy says
   the next release can undo the work that did ship. Both labels share one cell, so nothing moves when it changes; with reduced
   motion the card shows that last state from the start. Copy and card side by side from 1024px, the card below the copy under
   that; below 481px each tag sits under its finding, and no tag ever wraps ---------- */
.sa-prob{border-top:1px solid #E4DFD9}
.sa-prob-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px 80px;align-items:center}
.sa-prob-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .sa-prob-copy p{margin:0;max-width:540px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .sa-prob-copy p + p{margin-top:16px}
.sa-audit{margin:0;padding:26px 30px 12px;border:1.5px solid #232834;border-radius:20px;background:#F1EEEA}
.sa-audit-title{display:block;margin:0 0 12px;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.015em;color:#232834}
.v9 .sa-audit ol{margin:0;padding:0;list-style:none}
.v9 .sa-audit li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 24px;margin:0;padding:16px 0;border-top:1px solid #C2C5CC}
.sa-audit-f{font-weight:500;font-size:17px;line-height:1.45;color:#232834;text-wrap:pretty}
.sa-tag{display:grid;justify-items:end}
.sa-tag>span{grid-area:1/1;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border:1.5px solid #C2C5CC;border-radius:16px;background:#fff;font-weight:700;font-size:14px;line-height:1;color:#4f5565;white-space:nowrap;transition:opacity .35s cubic-bezier(.65,0,.35,1),visibility 0s}
.sa-tag>.k-fix{border-color:#232834;color:#232834}
.sa-tag>.sa-tag-b{border-color:#FA5478;color:#d33d5c;opacity:0;visibility:hidden}
.sa-tag-b i{flex:none;width:9px;height:9px;border-radius:50%;background:#FA5478;box-shadow:inset 0 0 0 1.5px #C43A5C}
.sa-audit.sa-on .sa-tag>.k-fix{opacity:0;visibility:hidden;transition:opacity .35s cubic-bezier(.65,0,.35,1),visibility 0s linear .35s}
.sa-audit.sa-on .sa-tag>.sa-tag-b{opacity:1;visibility:visible;transition:opacity .45s cubic-bezier(.65,0,.35,1) .4s,visibility 0s linear .4s}
@media (prefers-reduced-motion:reduce){.sa-tag>span,.sa-audit.sa-on .sa-tag>.k-fix,.sa-audit.sa-on .sa-tag>.sa-tag-b{transition:none}}
@media (max-width:1023px){.sa-prob-grid{grid-template-columns:minmax(0,1fr)}.sa-audit{max-width:640px}}
@media (max-width:480px){.sa-audit{padding:22px 20px 8px}.v9 .sa-audit li{grid-template-columns:minmax(0,1fr);gap:10px;padding:14px 0}.sa-tag{justify-items:start}}

/* ---------- search results, answers and assistants: the heading on the left and its copy on the right from 1024px, then the
   three places as columns of text, three across from 900px. Each column ends, on a shared baseline, on what is different about
   it: where it reads pages from. Under all three, one ink bracket joins them, its stem leading to what they have in common. No
   cards, frames or icons: the hero already draws an answer, so this stays in words. Below 900px the columns stack and the
   bracket still runs under them all ---------- */
.sa-where{border-top:1px solid #E4DFD9}
.sa-where-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px 80px;align-items:start;margin:0 0 56px}
.sa-where-head .v9-h2{margin:0;text-wrap:balance}
.v9 .sa-where-intro p{margin:0;max-width:640px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .sa-where-intro p + p{margin-top:16px}
.v9 .sa-where-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 48px;margin:0;padding:0;list-style:none}
.v9 .sa-where-cols li{display:flex;flex-direction:column;margin:0;padding:24px 0 0;border-top:1px solid #C2C5CC}
.v9 .sa-where-cols h3{margin:0 0 10px;font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .sa-where-cols p{margin:0;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .sa-where-cols .sa-where-d{margin-top:auto;padding-top:20px;font-size:16px;line-height:1.55;color:#232834}
.v9 .sa-where-cols p + .sa-where-d{margin-top:auto}
.v9 .sa-where-cols li > p:nth-child(2){margin-bottom:20px}
.sa-where-share{position:relative;margin-top:30px}
.sa-brk{position:relative;display:block;height:22px;border:2px solid #232834;border-top:0;border-radius:0 0 14px 14px}
.sa-brk::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:24px;margin-left:-1px;background:#232834}
.v9 .sa-where-share p{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:560px;margin:46px auto 0;text-align:center}
.sa-share-title{font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.sa-where-share p span{font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:balance}
@media (max-width:1023px){.sa-where-head{grid-template-columns:minmax(0,1fr);margin-bottom:44px}}
@media (max-width:899px){.v9 .sa-where-cols{grid-template-columns:minmax(0,1fr);gap:32px}.v9 .sa-where-cols p{max-width:620px}}
@media (max-width:560px){.sa-where-share{margin-top:26px}.sa-brk{height:18px;border-radius:0 0 12px 12px}.sa-brk::after{height:20px}.v9 .sa-where-share p{margin-top:40px}}

/* ---------- what we work on: the page's one interactive section. A sample page in a quiet window (ink outline, radius 20, a
   bone bar) and a switch between two views of it: what people see, and what search engines read, the same page as its parts
   (its title, description, headings in order, links, structured data and its rule for crawlers). Every value in the second
   view is on the page in the first, so nothing is reachable only through the switch. Both views share one cell, so the
   section holds its height, and one fades out before the other fades in. The switch is a pair of tabs: each is focusable
   with a visible ring, the arrow keys move between them and the choice is announced. Beside it from 1101px, the work as a
   list, each item with its icon (art/seo/sa-ic-*.json, tools/sa-icons-lottie-v1.js) and hover Lottie; below that the sample
   sits above the list, which runs two across from 700px. Items waiting on a decision are built hidden ---------- */
.sa-work{border-top:1px solid #E4DFD9}
.sa-work-head .v9-h2{text-wrap:balance}
.sa-work-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px 72px;align-items:start}
.sa-sw{display:inline-grid;grid-auto-flow:column;gap:4px;margin:0 0 18px;padding:4px;border:1.5px solid #232834;border-radius:999px;background:#fff}
.v9 .sa-sw-b{min-height:44px;padding:8px 20px;border:0;border-radius:999px;background:transparent;font:inherit;font-weight:700;font-size:15px;line-height:1.2;color:#232834;cursor:pointer;transition:background-color .3s cubic-bezier(.65,0,.35,1),color .3s cubic-bezier(.65,0,.35,1)}
.v9 .sa-sw-b[aria-selected="true"]{background:#232834;color:#fff;cursor:default}
@media (hover:hover){.v9 .sa-sw-b[aria-selected="false"]:hover{background:#F1EEEA}}
.v9 .sa-sw-b:focus-visible{outline:2px solid #232834;outline-offset:3px}
.sa-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sa-pg{border:1.5px solid #232834;border-radius:20px;background:#fff;overflow:hidden}
.sa-pg-bar{display:flex;align-items:center;gap:7px;height:42px;padding:0 18px;border-bottom:1.5px solid #232834;background:#F1EEEA}
.sa-pg-bar i{flex:none;width:10px;height:10px;border:1.5px solid #232834;border-radius:50%;background:#fff}
.sa-pg-bar span{flex:0 1 220px;height:14px;margin-left:12px;border:1.5px solid #C2C5CC;border-radius:7px;background:#fff}
.sa-pg-views{display:grid}
.sa-view{grid-area:1/1;min-width:0;padding:26px 30px 30px;transition:opacity .25s cubic-bezier(.65,0,.35,1) .2s,visibility 0s}
.sa-pg.is-see .sa-view-read,.sa-pg.is-read .sa-view-see{opacity:0;visibility:hidden;transition:opacity .2s cubic-bezier(.65,0,.35,1),visibility 0s linear .2s}
@media (prefers-reduced-motion:reduce){.sa-view,.sa-pg.is-see .sa-view-read,.sa-pg.is-read .sa-view-see,.v9 .sa-sw-b{transition:none}}
.sa-view-see{display:flex;flex-direction:column;align-items:flex-start}
.sa-pc{margin:0 0 10px;font-weight:700;font-size:13px;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:#d33d5c}
.sa-ph{margin:0 0 8px;font-weight:700;font-size:28px;line-height:1.15;letter-spacing:-.025em;color:#232834}
.sa-pb{margin:0 0 14px;font-weight:500;font-size:14px;line-height:1.4;color:#4f5565}
.sa-pl{max-width:440px;margin:0 0 18px;font-weight:500;font-size:16px;line-height:1.55;color:#3a3f4b}
.sa-pi{position:relative;display:block;width:100%;aspect-ratio:16/6;margin:0 0 18px;overflow:hidden;border-radius:12px;background:#E4DFD9}
.sa-pi::before{content:"";position:absolute;right:16%;top:20%;width:8%;aspect-ratio:1;border-radius:50%;background:#fff}
.sa-pi::after{content:"";position:absolute;left:6%;right:28%;bottom:0;height:60%;background:#fff;clip-path:polygon(0 100%,30% 28%,48% 62%,70% 14%,100% 100%)}
.sa-p2{margin:2px 0 10px;font-weight:700;font-size:17px;line-height:1.3;color:#232834}
.sa-px{display:block;width:92%;height:10px;margin:0 0 9px;border-radius:5px;background:#C2C5CC}
.sa-px.s{width:68%;margin-bottom:16px}.sa-px.m{width:80%;margin-bottom:18px}
.sa-pbtn{display:inline-flex;align-items:center;height:40px;margin-top:4px;padding:0 20px;border-radius:20px;background:#FA5478;font-weight:700;font-size:15px;line-height:1;color:#fff}
.v9 .sa-rd{display:grid;margin:0}
.v9 .sa-rd>div{display:grid;grid-template-columns:136px minmax(0,1fr);gap:4px 16px;padding:12px 0;border-top:1px solid #E4DFD9}
.v9 .sa-rd>div:first-child{padding-top:0;border-top:0}
.v9 .sa-rd dt{margin:0;padding-top:3px;font-weight:700;font-size:12.5px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:#4f5565}
.v9 .sa-rd dd{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;font-weight:500;font-size:16px;line-height:1.5;color:#232834}
.sa-hx{display:flex;align-items:baseline;gap:10px;width:100%}
.sa-hx b{flex:none;width:24px;font-weight:700;font-size:12.5px;letter-spacing:.04em;color:#4f5565}
.sa-hx.k2{padding-left:18px}
.sa-chip{display:inline-flex;align-items:center;height:30px;padding:0 12px;border:1.5px solid #C2C5CC;border-radius:15px;font-weight:700;font-size:14px;line-height:1;color:#232834;white-space:nowrap}
.sa-chip.c{border-color:#FA5478;color:#d33d5c}
.v9 .sa-ix{display:grid;gap:30px;margin:0;padding:6px 0 0;list-style:none}
.v9 .sa-ix li{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:22px;align-content:start;margin:0;scroll-margin-top:32px}
.v9 .sa-ix .cb-ic-box{grid-row:1/3;width:56px;height:56px;margin:-12px 0 0}
.v9 .sa-ix h3{grid-column:2;margin:0 0 6px;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .sa-ix p{grid-column:2;max-width:500px;margin:0;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.cb-ic .wd{fill:#fff;stroke:#C43A5C}
/* text links in the copy: small coral text on white (#d33d5c), underlined on hover and focus */
.v9 a.sa-link{font-weight:700;color:#d33d5c;text-decoration:none;white-space:nowrap}
.v9 a.sa-link:hover,.v9 a.sa-link:focus-visible{color:#d33d5c;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.v9 a.sa-link:focus-visible{outline:2px solid #232834;outline-offset:3px;border-radius:3px}
/* each text link's tap area is 44px tall, centred on its line, with nothing moving */
.v9 a.sa-link{position:relative}
.v9 a.sa-link::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;margin-top:-22px}
/* review only: parts waiting on a decision show with a note of what they wait on */
.sa-review [data-unconfirmed]{display:grid!important;outline:2px dashed #C2C5CC;outline-offset:10px;border-radius:4px}
.sa-review [data-unconfirmed]::after{content:attr(data-unconfirmed);grid-column:2;margin-top:8px;font-weight:700;font-size:14px;line-height:1.4;color:#d33d5c}
@media (max-width:1100px){.sa-work-grid{grid-template-columns:minmax(0,1fr)}.sa-two{max-width:680px}}
@media (min-width:700px) and (max-width:1100px){.v9 .sa-ix{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 48px}}
@media (max-width:560px){
.sa-sw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
.v9 .sa-sw-b{padding:8px 10px}
.sa-view{padding:20px 18px 22px}
.sa-ph{font-size:24px}
.v9 .sa-rd>div{grid-template-columns:minmax(0,1fr);gap:4px}
.v9 .sa-ix li{grid-template-columns:48px minmax(0,1fr);column-gap:16px}
.v9 .sa-ix .cb-ic-box{width:48px;height:48px;margin-top:-10px}
}

/* ---------- search work that survives the next release: the copy, its two points and the link on the left; on the right one
   release's ordinary changes, read for search. A white card in the family's line (ink outline, radius 20): each change on the
   left and what it does to search on the right, three of them fine (a small check), one not: "Old addresses lead nowhere", in
   small coral text with a coral dot. Its bone foot holds the outcome, "Held before release", and why. It is still: the audit
   card above already changes once in view, so this one doesn't move. Change and effect share a row from 481px; below that
   they stack and the column labels go ---------- */
.sa-rel{border-top:1px solid #E4DFD9}
.sa-rel-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px 80px;align-items:center}
.sa-rel-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .sa-rel-copy > p{margin:0 0 30px;max-width:540px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .sa-rel-pts{display:grid;gap:22px;margin:0;padding:0;list-style:none}
.v9 .sa-rel-pts li{margin:0;padding:18px 0 0;border-top:1px solid #E4DFD9}
.v9 .sa-rel-pts h3{margin:0 0 6px;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .sa-rel-pts p{margin:0;max-width:520px;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .sa-rel-copy > p.sa-rel-more{margin:24px 0 0;font-size:17px}
.sa-rc{margin:0;border:1.5px solid #232834;border-radius:20px;background:#fff;overflow:hidden}
.sa-rc-hd{padding:24px 28px 14px}
.sa-rc-title{display:block;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.015em;color:#232834}
.sa-rc-cols,.v9 .sa-rc li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:6px 24px}
.sa-rc-cols{padding:0 28px 10px;font-weight:700;font-size:12.5px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:#4f5565}
.v9 .sa-rc ol{margin:0;padding:0 28px 6px;list-style:none}
.v9 .sa-rc li{align-items:baseline;margin:0;padding:15px 0;border-top:1px solid #E4DFD9}
.sa-rc-c{font-weight:500;font-size:17px;line-height:1.45;color:#232834;text-wrap:pretty}
.sa-rc-e{display:flex;align-items:baseline;gap:10px;font-weight:500;font-size:16px;line-height:1.45;color:#4f5565;text-wrap:pretty}
.sa-rc-ok{flex:none;align-self:center;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#F1EEEA}
.v9 .sa-rc-ok svg{width:12px;height:12px;stroke:#232834;stroke-width:2.6}
.sa-rc-dot,.sa-rc-held i{flex:none;align-self:center;display:block;width:10px;height:10px;margin:0 5px;border-radius:50%;background:#FA5478;box-shadow:inset 0 0 0 1.5px #C43A5C}
.v9 .sa-rc li.k-hold .sa-rc-e{font-weight:700;color:#d33d5c}
.sa-rc-ft{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:18px 28px 22px;border-top:1.5px solid #232834;background:#F1EEEA}
.sa-rc-held{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 16px 0 12px;border:1.5px solid #FA5478;border-radius:18px;background:#fff;font-weight:700;font-size:15px;line-height:1;color:#d33d5c;white-space:nowrap}
.sa-rc-n{font-weight:500;font-size:16px;line-height:1.5;color:#232834;text-wrap:pretty}
@media (max-width:1023px){.sa-rel-grid{grid-template-columns:minmax(0,1fr)}.sa-rc{max-width:640px}}
@media (max-width:480px){.sa-rc-hd{padding:20px 20px 10px}.sa-rc-cols{display:none}.v9 .sa-rc ol{padding:0 20px 4px}.v9 .sa-rc li{grid-template-columns:minmax(0,1fr);gap:4px;padding:13px 0}.sa-rc-ft{padding:16px 20px 18px}}

/* ---------- measured where people search: the copy and its sources on the left; on the right, in words only, a sample of the
   fixed questions. No card, chart or figures: each question in quotes, and under it one word for what the latest askings show,
   with its mark: Cited (coral), Mentioned (half ink) or Not yet (a tint ring). The closing line sits under the sample, since
   it says how to read those words. Side by side from 1024px, the sample below the copy under that ---------- */
.sa-meas{border-top:1px solid #E4DFD9}
.sa-meas-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 88px;align-items:start}
.sa-meas-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .sa-meas-copy > p{margin:0 0 24px;max-width:600px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .sa-src{margin:0;padding:0;list-style:none;border-top:1px solid #E4DFD9}
.v9 .sa-src li{margin:0;padding:16px 0;border-bottom:1px solid #E4DFD9;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .sa-src b{font-weight:700;color:#232834}
.sa-qs-fig{margin:0;padding-top:8px}
.sa-qs-k{display:block;margin:0 0 20px;font-weight:700;font-size:12.5px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:#4f5565}
.v9 .sa-qs{display:grid;gap:26px;margin:0;padding:0;list-style:none}
.v9 .sa-qs li{display:grid;justify-items:start;gap:10px;margin:0}
.sa-q-title{font-weight:700;font-size:21px;line-height:1.35;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.sa-qw{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;line-height:1.2;color:#232834}
.sa-qw i{flex:none;box-sizing:border-box;width:14px;height:14px;border:1.5px solid #232834;border-radius:50%;background:#fff}
.sa-qw.c{color:#d33d5c}.sa-qw.c i{border-color:#C43A5C;background:#FA5478}
.sa-qw.m i{background:linear-gradient(90deg,#232834 50%,#fff 50%)}
.sa-qw.n{color:#4f5565}.sa-qw.n i{border-color:#C2C5CC}
.v9 .sa-qs-note{max-width:460px;margin:30px 0 0;padding-top:20px;border-top:1px solid #E4DFD9;font-weight:500;font-size:17px;line-height:1.6;color:#232834;text-wrap:pretty}
@media (max-width:1023px){.sa-meas-grid{grid-template-columns:minmax(0,1fr)}.sa-qs-fig{max-width:560px}}

/* ---------- start with what's in the way: the copy and its engagement link, and a sample of the short list itself as quiet
   type, with no card: the audit's findings, now as fixes ranked by likely effect and effort. Each is numbered on a coral disc
   (white numbers), with its effect, effort and who builds it in words. From 1024px the list sits on the left and the copy on
   the right, for the page's rhythm (the copy still comes first in the markup and on smaller screens); below 1024px the list
   follows the copy ---------- */
.sa-start{border-top:1px solid #E4DFD9}
.sa-start-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 88px;align-items:center}
@media (min-width:1024px){.sa-fx-fig{grid-column:1;grid-row:1}.sa-start-copy{grid-column:2;grid-row:1}}
.sa-start-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .sa-start-copy p{margin:0;max-width:540px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .sa-start-copy p + p{margin-top:16px}
.sa-fx-fig{margin:0}
.sa-fx-k{display:block;margin:0 0 6px;font-weight:700;font-size:12.5px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:#4f5565}
.v9 .sa-fx{margin:0;padding:0;list-style:none}
.v9 .sa-fx li{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:18px;margin:0;padding:20px 0;border-bottom:1px solid #E4DFD9}
.sa-fx-n{grid-row:1/3;display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin-top:-1px;border-radius:50%;background:#FA5478;font-weight:700;font-size:14px;line-height:1;color:#fff}
.sa-fx-title{grid-column:2;margin:0 0 10px;font-weight:700;font-size:20px;line-height:1.35;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .sa-fx-m{grid-column:2;display:flex;flex-wrap:wrap;gap:8px 28px;margin:0}
.v9 .sa-fx-m div{display:flex;align-items:baseline;gap:8px}
.v9 .sa-fx-m dt{font-weight:700;font-size:12.5px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:#4f5565}
.v9 .sa-fx-m dd{margin:0;font-weight:500;font-size:16px;line-height:1.4;color:#232834}
@media (max-width:1023px){.sa-start-grid{grid-template-columns:minmax(0,1fr)}.sa-fx-fig{max-width:620px}}
@media (max-width:480px){.v9 .sa-fx li{column-gap:14px;padding:18px 0}.v9 .sa-fx-m{gap:6px 18px}}

/* ---------- questions worth asking: the page's one bone band and its quietest section. Every question and answer is visible,
   with no accordion, and there is no FAQ structured data (FAQ isn't in Google's list of structured data features, checked 3
   October 2026). Two columns from 1024px that read across, the heading in the first place so the grid closes evenly; one
   column below that. Hairlines are tint, as shade barely shows on bone ---------- */
.v9 .sa-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 72px}
.sa-faq-head{padding:22px 0 30px}
.sa-faq-head .v9-h2{margin:0;max-width:460px;text-wrap:balance}
.v9 .sa-qa{margin:0;padding:26px 0 32px;border-top:1px solid #C2C5CC}
.v9 .sa-qa h3{margin:0 0 10px;font-weight:700;font-size:21px;line-height:1.3;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .sa-qa p{margin:0;max-width:540px;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
@media (max-width:1023px){.v9 .sa-faq{grid-template-columns:minmax(0,1fr)}.sa-faq-head{padding:0 0 28px}.v9 .sa-qa p{max-width:640px}}
.v9-bone + .em-cta{border-top:0}

/* ---------- let's do it better: the closing email form, centred, with nothing after it ---------- */
.sa-cta .v9-h2{text-wrap:balance}
.sa-cta .v9-sub{text-wrap:pretty}

/* ================= THE PHONE TYPE SCALE: synced 3 October 2026 from the homepage, by tools/phone-type.js. Up to 560px: h1 34px, section headings 26px, titles 18 to 20px, body 16px; nothing gets larger ================= */
@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 .sa-go,.ai-clients-head .v9-sub,.sa-clients-head .v9-sub,.v9 .sa-prob-copy p,.sa-audit-f,.v9 .sa-where-intro p,.v9 .sa-where-cols p,.sa-where-share p span,.sa-p2,.v9 .sa-ix p,.v9 .sa-rel-copy > p,.v9 .sa-rel-pts p,.v9 .sa-rel-copy > p.sa-rel-more,.sa-rc-c,.v9 .sa-meas-copy > p,.v9 .sa-src li,.v9 .sa-qs-note,.v9 .sa-start-copy p,.v9 .sa-qa p{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-hero.sa-hero h1.sa-h-a,.v9-hero.sa-hero h1.sa-h-e{font-size:min(34px,min(56px,calc((100vw - 44px) / 6.7)));line-height:1.12}
.v9-hero.sa-hero h1.sa-h-b{font-size:min(34px,min(56px,calc((100vw - 44px) / 8.7)));line-height:1.12}
.v9-hero.sa-hero h1.sa-h-c{font-size:min(34px,min(56px,calc((100vw - 44px) / 6.55)));line-height:1.12}
.v9-hero.sa-hero h1.sa-h-d{font-size:min(34px,min(56px,calc((100vw - 44px) / 8.9)));line-height:1.12}
.sa-audit-title,.sa-share-title,.v9 .sa-ix h3,.v9 .sa-rel-pts h3,.sa-rc-title,.sa-q-title,.sa-fx-title,.v9 .sa-qa h3{font-size:18px}
.v9 .sa-where-cols h3,.sa-ph{font-size:20px}
}