/* MCP & Agent Integration, built from Web & App Development v2 (page-web-development-v2.css): its shell, header strip, hero
   base, buttons, email form, reveal, hover icons, client wall and responsive rules are carried over unchanged. Header and
   footer are the site's own (page-seo-1/2.css, site-header.css, site-footer.css); everything here scopes to .v9 or
   body.v9-page. Page-specific rules (mc-*) follow the shared ones. Built one section at a time, the hero first */

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

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

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


/* ================= MCP & AGENT INTEGRATION (this page's own) ================= */

/* ---------- this page's hero, as on Support & Maintenance: the eyebrow, then a headline that holds two lines at every width.
   Each option is sized from its longer line, measured in Sailec Bold at -.03em on the woff2 itself (October 9, 2026): A "ready
   for AI agents" 8.69em, B "Let AI agents in," 7.33em, C "One safe way in" 7.23em, D "A proper way in" 7.19em and E "Ready for
   AI agents," 9.22em. Up to 1100px the size follows the viewport, so that line takes 92% of the column at most, 56px at the
   largest; from 1101px, where the copy column is 560px, A runs from 48px to 56px (486px at most), E from 46px to 52px (479px)
   and B, C and D from 52px to 60px (440px). The form is sized as CLAUDE.md sets it for heroes: "Book a call" at 172px beside a
   262px field, stacked at full width on phones ---------- */
/* fixed line heights keep the hero still as Sailec swaps in (1.48 is Sailec's own normal) */
.v9-hero.mc-hero .v9-eyebrow{line-height:1.48}
.v9-hero.mc-hero .v9-lead :is(b,strong){line-height:1}
.v9-hero.mc-hero h1.mc-h-a{font-size:min(56px,calc((100vw - 44px) / 9.5))}
.v9-hero.mc-hero h1.mc-h-b{font-size:min(56px,calc((100vw - 44px) / 8.02))}
.v9-hero.mc-hero h1.mc-h-c{font-size:min(56px,calc((100vw - 44px) / 7.9))}
.v9-hero.mc-hero h1.mc-h-d{font-size:min(56px,calc((100vw - 44px) / 7.86))}
.v9-hero.mc-hero h1.mc-h-e{font-size:min(56px,calc((100vw - 44px) / 10.08))}
@media (min-width:821px){.v9.mc-hero .em-talk .v9-hero-form{grid-template-columns:262px auto}}
@media (min-width:561px) and (max-width:820px){.v9.mc-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:561px){.v9.mc-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{width:172px;padding:0}}
@media (max-width:560px){.v9-hero.mc-hero .v9-lead{font-size:17px}}
@media (min-width:1101px){
.v9-hero.mc-hero .v9-hero-grid{grid-template-columns:minmax(560px,5.4fr) minmax(0,6.6fr);gap:48px}
.v9-hero.mc-hero h1.mc-h-a{font-size:clamp(48px,4.1vw,56px)}
.v9-hero.mc-hero h1.mc-h-e{font-size:clamp(46px,3.8vw,52px)}
.v9-hero.mc-hero h1.mc-h-b,.v9-hero.mc-hero h1.mc-h-c,.v9-hero.mc-hero h1.mc-h-d{font-size:clamp(52px,4.4vw,60px)}
.v9-hero.mc-hero .v9-lead{max-width:520px}
/* the drawing is enlarged a little into the page margin, not into the column gap */
.mc-hero .v9-illo{width:106%;margin:0 -6% 0 0;transform:none}
}
/* the drawing's canvas is 1600 x 1320 (art/mcp/mc-hero-1.json), and the box keeps that shape reserved from the first paint. On
   phones it sits below the form and runs to the window's edges (the canvas carries its own margin, so the hand, the cards and the
   record are never cropped), so the words in the drawing read as large as they can */
.mc-hero .v9-illo{aspect-ratio:1600/1320}
@media (max-width:560px){.mc-hero .v9-illo{width:calc(100% + 44px);max-width:none;margin:0 -22px}}
/* the landing view: on desktop the hero's top space follows the window's height, so the headline, form and drawing hold the
   middle of the first view and the client wall still shows below */
.v9-hero.mc-hero{padding:40px 0 64px}
@media (min-width:1101px){.v9-hero.mc-hero{padding:clamp(32px,7vh,84px) 0 72px}}
@media (max-width:560px){.v9-hero.mc-hero{padding:28px 0 48px}}

/* ---------- tap areas and the legacy menu, as CLAUDE.md sets them. The logos in the header and footer are widened to 44px tap
   areas with padding cancelled by margin, so nothing moves. The site's old hidden menu sits off to the side until its script
   marks it loaded; until then it is held to no width, so it can't cause sideways scroll ---------- */
body.v9-page .header-wide.wb-hd .header .logo{padding:7px 0;margin:-7px 0}
body.v9-page .wb-ft .wb-ft-logo{padding:8px 0;margin:-8px 0}
body.v9-page #main_menu:not(.loaded){left:0;right:auto;width:0;max-width:0;overflow:hidden}

/* ---------- the closing: the email form, centred, sized and behaving as the hero's at every width. Nothing follows it: urgent
   help is reached from the header, the menu and the footer ---------- */
.mc-cta .v9-h2{text-wrap:balance}
.mc-cta .v9-sub{text-wrap:pretty}



/* ---------- assistants are asking to use your product (#problem): the copy, and one quiet device drawn from its words: an
   assistant's answer to a real-sounding request, with the two things the copy names marked in the margin. The request sits above
   as the person's message ("Find the open orders from last week and draft a reply to each"); the answer, on the family's bone card
   with the sparkle (the only one in this view), says it can't open the order system and works from what was pasted in. A dashed
   block stands for the pasted rows, tagged "Pasted in by hand", and the line that follows is tagged "A guess", the section's one
   coral part. Not the hero's sign-in, not AI Security & Governance's two readers of one email and not Systems & API Integration's
   wavy underlines: an answer annotated by where each part came from. When the figure is well in view (playOnce) its lines arrive
   one at a time and the tags follow, then it holds; scrolled past, or with reduced motion, it shows complete. Side by side from
   1024px; below, the figure follows the copy; up to 560px each tag sits under its line ---------- */
.mc-prob{border-top:1px solid #E4DFD9}
.mc-prob-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px 80px;align-items:center}
.mc-prob-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .mc-prob-copy p{margin:0;max-width:560px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.mc-ask{margin:0}
.mc-ask-art{display:grid;gap:14px;max-width:600px;margin:0 0 0 auto;pointer-events:none;-webkit-user-select:none;user-select:none}
.v9 .mc-ask-q{justify-self:end;max-width:84%;margin:0;padding:13px 20px;border:1.75px solid #232834;border-radius:20px 20px 6px 20px;background:#fff;font-weight:500;font-size:17px;line-height:1.45;color:#232834}
.mc-ask-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:28px;row-gap:12px;padding:20px 24px 24px;border:1.75px solid #232834;border-radius:20px;background:#F1EEEA}
.v9 .mc-ask-who{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:0 0 6px;padding:0 0 14px;border-bottom:1px solid #C2C5CC;font-weight:700;font-size:16px;line-height:1.3;color:#232834}
.mc-ask-av{flex:none;display:grid;place-items:center;box-sizing:border-box;width:32px;height:32px;border:1.75px solid #C43A5C;border-radius:50%;background:#FA5478}
.v9 .mc-ask-av svg{width:20px;height:20px;fill:#F1EEEA;stroke:#C43A5C;stroke-width:1.1}
.v9 .mc-ask-l{grid-column:1;margin:0;font-weight:500;font-size:17px;line-height:1.5;color:#232834}
.v9 .mc-ask-l.a1{grid-column:1/-1}
.mc-ask-paste{grid-column:1;display:grid;gap:9px;padding:14px 16px;border:1.75px dashed #C2C5CC;border-radius:14px;background:#fff}
.mc-ask-paste i{display:block;height:10px;border-radius:5px;background:#C2C5CC}
.mc-ask-paste i:nth-child(1){width:82%}.mc-ask-paste i:nth-child(2){width:64%}.mc-ask-paste i:nth-child(3){width:74%}
.mc-ask-tag{grid-column:2;position:relative;justify-self:start;display:inline-flex;align-items:center;box-sizing:border-box;height:34px;padding:0 14px;border:1.75px solid #232834;border-radius:17px;background:#fff;font-weight:700;font-size:15px;line-height:1;color:#232834;white-space:nowrap}
.mc-ask-tag::before{content:"";position:absolute;right:100%;top:50%;width:22px;height:1.75px;margin:-.875px 4px 0 0;background:#232834}
.mc-ask-tag.g{border-color:#C43A5C;color:#d33d5c}
.mc-ask-tag.g::before{background:#C43A5C}
.mc-ask .a1,.mc-ask .a2,.mc-ask .a3,.mc-ask .a4,.mc-ask .a5{opacity:0;transform:translateY(4px)}
.mc-ask .a3,.mc-ask .a5{transform:translateX(-4px)}
.mc-ask.go .a1,.mc-ask.go .a2,.mc-ask.go .a3,.mc-ask.go .a4,.mc-ask.go .a5{opacity:1;transform:none;transition:opacity .5s cubic-bezier(.65,0,.35,1),transform .5s cubic-bezier(.65,0,.35,1)}
.mc-ask.go .a1{transition-delay:.3s}.mc-ask.go .a2{transition-delay:.8s}.mc-ask.go .a3{transition-delay:1.5s}.mc-ask.go .a4{transition-delay:2.1s}.mc-ask.go .a5{transition-delay:2.8s}
.mc-ask.end .mc-ask-art *{transition:none!important}
@media (prefers-reduced-motion:reduce){.mc-ask .mc-ask-art *{opacity:1!important;transform:none!important;transition:none!important}}
@media (max-width:1023px){.mc-prob-grid{grid-template-columns:minmax(0,1fr)}.mc-ask-art{margin:0;max-width:600px}}
@media (max-width:560px){.mc-ask-card{grid-template-columns:minmax(0,1fr);padding:18px 18px 20px;row-gap:10px}.mc-ask-tag{grid-column:1;margin:0 0 4px}.mc-ask-tag::before{display:none}.v9 .mc-ask-q{max-width:92%}}



/* ---------- one standard way in (#mcp): the page's one explanation of MCP, spelled out here (checked October 9, 2026 against the
   specification, revision 2026-07-28: an open protocol; servers offer tools, functions for the model to run; resources, context and
   data; prompts, templated messages and workflows for users; capabilities are negotiated on each request, so a client uses the
   parts it supports). The drawing first, the copy beside it. Three generic assistants, unnamed, as small bone cards; grey tracks
   from each meet at one door on the server card's edge, the section's one coral part, and a short soft coral line flows along
   each in turn and is gone (the second use of the family's line on the page, after the hero). The door warms as the first line
   reaches it and holds. The server card, bone, names its three parts in plain words. It plays once when well in view (playOnce)
   and holds; scrolled past, or with reduced motion, it shows the door warm with no line. Side by side from 1024px, the drawing
   on the left; from 701px the drawing runs across, below the copy; up to 700px the assistants sit in a row above the server and
   the tracks run down into the door on its top edge ---------- */
.mc-std{border-top:1px solid #E4DFD9}
.mc-std-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 80px;align-items:center}
.mc-std-copy{grid-column:2;grid-row:1}
.mc-std-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .mc-std-copy p{margin:0;max-width:560px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
/* the one link to the article, which goes deeper (both live October 9, 2026) */
.v9 .mc-std-copy .mc-std-more{margin-top:18px;font-size:17px}
.v9 .mc-std-more a{display:inline-block;padding:11px 0;font-weight:700;color:#d33d5c;text-decoration:none;white-space:nowrap}
.v9 .mc-std-more a:hover,.v9 .mc-std-more a:focus-visible{color:#d33d5c;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
@media (max-width:560px){.v9 .mc-std-copy .mc-std-more{font-size:16px}}
.mc-way{grid-column:1;grid-row:1;margin:0}
.mc-way-art{display:grid;grid-template-columns:200px minmax(64px,1fr) minmax(0,300px);align-items:center;max-width:640px;pointer-events:none;-webkit-user-select:none;user-select:none}
.mc-way-as{display:grid;grid-template-rows:repeat(3,76px);row-gap:36px;margin:0;padding:0;list-style:none}
.v9 .mc-way-as li{display:flex;align-items:center;gap:12px;box-sizing:border-box;height:76px;margin:0;padding:0 16px;border:1.75px solid #232834;border-radius:18px;background:#F1EEEA}
.mc-way-av{flex:none;display:block;box-sizing:border-box;width:30px;height:30px;border:1.75px solid #232834;border-radius:50%;background:#E4DFD9;box-shadow:inset 0 0 0 6px #fff}
.v9 .mc-way-as b{font-weight:700;font-size:16px;line-height:1.25;color:#232834}
.v9 svg.mc-way-tr{display:block;width:100%;height:300px;overflow:visible;fill:none}
.mc-way-tr path{vector-effect:non-scaling-stroke;stroke-linecap:round}
.mc-way-tr .tk{stroke:#C2C5CC;stroke-width:4px}
.mc-way-tr .fl{stroke:#FA5478;stroke-opacity:.55;stroke-width:5px;stroke-dasharray:22 300;stroke-dashoffset:22}
.mc-way.go .mc-way-tr .fl{animation:mcWay .9s cubic-bezier(.65,0,.35,1) both}
.mc-way.go .f1{animation-delay:.4s!important}.mc-way.go .f2{animation-delay:1.3s!important}.mc-way.go .f3{animation-delay:2.2s!important}
@keyframes mcWay{from{stroke-dashoffset:22}to{stroke-dashoffset:-100}}
.v9 svg.mc-way-tr.v{display:none}
.mc-way-sv{position:relative;display:grid;align-content:center;box-sizing:border-box;min-height:300px;padding:20px 20px 20px 28px;border:1.75px solid #232834;border-radius:20px;background:#F1EEEA}
.mc-way-door{position:absolute;left:-11px;top:50%;box-sizing:border-box;width:22px;height:22px;margin-top:-11px;border:1.75px solid #232834;border-radius:50%;background:#fff;transition:background-color .4s cubic-bezier(.65,0,.35,1),border-color .4s cubic-bezier(.65,0,.35,1)}
.mc-way.go .mc-way-door{background:#FA5478;border-color:#C43A5C;transition-delay:1.15s}
.v9 .mc-way-h{margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid #C2C5CC;font-weight:700;font-size:18px;line-height:1.3;color:#232834}
.mc-way-rows{display:grid;gap:8px;margin:0}
.mc-way-rows > div{display:grid;gap:2px;padding:8px 14px;border:1.75px solid #232834;border-radius:14px;background:#fff}
.v9 .mc-way-rows dt{margin:0;font-weight:700;font-size:16px;line-height:1.3;color:#232834}
.v9 .mc-way-rows dd{margin:0;font-weight:500;font-size:15px;line-height:1.35;color:#4f5565}
.mc-way.end .mc-way-art *{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){.mc-way .mc-way-art *{transition:none!important;animation:none!important}.mc-way .mc-way-door{background:#FA5478;border-color:#C43A5C}}
@media (max-width:1023px){.mc-std-grid{grid-template-columns:minmax(0,1fr)}.mc-std-copy,.mc-way{grid-column:1;grid-row:auto}}
@media (max-width:700px){
.mc-way-art{grid-template-columns:minmax(0,1fr);max-width:480px}
.mc-way-as{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;column-gap:10px;row-gap:0}
.v9 .mc-way-as li{flex-direction:column;justify-content:center;gap:8px;height:auto;min-height:104px;padding:12px 8px;text-align:center}
.v9 .mc-way-as b{font-size:15px;text-align:center}
.v9 svg.mc-way-tr.h{display:none}.v9 svg.mc-way-tr.v{display:block;height:84px}
.mc-way-sv{min-height:0;padding:30px 18px 18px}
.mc-way-door{left:50%;top:-11px;margin:0 0 0 -11px}
}



/* ---------- what we build (#scope): the page's one bone band. The heading and its line; then the two kinds of server as two wide
   white cards side by side (what the server is for); then, under a small label, "Around either one", the work that makes either
   one safe, three across (not Support & Maintenance's rows named in the margin, Web & App Development's index or AI Security &
   Governance's columns by time). Each item is its icon, title and line. The icons are drawn for this page in the family's line: a
   product window with a coral connector, stacked cards joined by a coral spine, a badge with a coral clip, a tag with a coral hole
   ring, a toggle under a coral guard, a speech card with a coral tick, a register whose newest line is coral and a magnifier with
   a coral rim; each coral part arrives once with its row. Beneath, under one tint hairline, the three hand-off lines, each link
   44px tall, in ink with a tint underline (coral text would fall short of 4.5:1 on bone). Two lines changed from the proposal to stay within what can be promised: "so an assistant can pick the right action
   and fill it in" and "tried in real AI assistants" (no client is named until one is confirmed) ---------- */
.mc-scope-head{max-width:720px;margin:0 0 44px}
.mc-scope-head .v9-h2{margin:0 0 16px;text-wrap:balance}
.v9 .mc-scope-sub{margin:0;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.mc-kinds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:0 0 52px;padding:0;list-style:none}
.v9 .mc-kinds > li{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:22px;align-content:start;margin:0;padding:28px 30px 30px;border:1.75px solid #232834;border-radius:20px;background:#fff;--d:0s}
.v9 .mc-kinds > li:nth-child(2){--d:.08s}
.mc-kinds .cb-ic-box{grid-row:1/3;width:64px;height:64px;margin:-4px 0 0 -4px}
.v9 .mc-kinds h3{margin:0 0 8px;font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.01em;color:#232834;text-wrap:balance}
.v9 .mc-kinds p{margin:0;font-weight:500;font-size:17px;line-height:1.55;color:#4f5565;text-wrap:pretty}
.v9 .mc-around{margin:0 0 28px;padding:0 0 14px;border-bottom:1px solid #C2C5CC;font-weight:700;font-size:18px;line-height:1.35;color:#232834}
.mc-parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin:0 0 48px;padding:0;list-style:none}
.v9 .mc-parts > li{margin:0;padding:0;min-width:0;--d:0s}
.v9 .mc-parts > li:nth-child(3n+2){--d:.08s}.v9 .mc-parts > li:nth-child(3n){--d:.16s}
.mc-parts .cb-ic-box{grid-row:auto;width:64px;height:64px;margin:0 0 16px -4px}
.v9 .mc-parts h3{margin:0 0 8px;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.01em;color:#232834;text-wrap:balance}
.v9 .mc-parts p{margin:0;font-weight:500;font-size:17px;line-height:1.55;color:#4f5565;text-wrap:pretty}
.cb-ic .ck{stroke:#fff}
.mc-more{display:grid;margin:0;padding:24px 0 0;border-top:1px solid #C2C5CC;list-style:none}
.v9 .mc-more li{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;min-height:44px;margin:0;padding:0;font-weight:500;font-size:17px;line-height:1.4;color:#4f5565}
.v9 .mc-more a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:#232834;text-decoration:underline;text-decoration-color:#C2C5CC;text-decoration-thickness:1.5px;text-underline-offset:5px;transition:text-decoration-color .25s cubic-bezier(.65,0,.35,1)}
.v9 .mc-more a:hover,.v9 .mc-more a:focus-visible{color:#232834;text-decoration-color:#232834}
.v9 .mc-more a:focus-visible{outline:2px solid #232834;outline-offset:2px;border-radius:2px}
@media (prefers-reduced-motion:reduce){.v9 .mc-more a{transition:none}}
@media (max-width:1023px){.mc-kinds{grid-template-columns:minmax(0,1fr)}.mc-parts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.mc-scope-head{margin-bottom:36px}.mc-kinds{margin-bottom:40px}.v9 .mc-kinds > li{grid-template-columns:minmax(0,1fr);padding:22px 20px 24px}.mc-kinds .cb-ic-box{grid-row:auto;width:56px;height:56px;margin:0 0 12px -4px}.mc-parts{grid-template-columns:minmax(0,1fr);gap:32px}.mc-parts .cb-ic-box{width:56px;height:56px;margin-bottom:12px}.v9 .mc-more li{display:block;padding:10px 0 0}.v9 .mc-more li span{display:block}}



/* ---------- read first, change with care (#permissions): the copy on the left, and on the right the page's one interaction. The
   reader plays the person: two requests an assistant might send, real buttons (at least 48px, exactly one pressed: aria-pressed),
   above a white card holding the product's permissions as a real table, every row always visible, so it reads in full without
   the buttons. "Show my open orders" marks Find orders (bone, bold name, an ink edge) and its result shows at once; "Cancel this
   order" marks Cancel an order and a confirmation waits, edged in coral, the view's one coral part, with Allow and Not now; either
   settles to one plain line. Every state sits in one grid cell, so the card keeps the height of its tallest state and nothing
   below moves; each change is said politely. Not Support & Maintenance's example reports (which classify), QA's step buttons or
   AI Security & Governance's checkboxes: the reader decides. The copy checked October 9, 2026 against the MCP specification,
   revision 2026-07-28 (Security Best Practices, scope minimization: a minimal first scope set of low-risk read operations, with
   more granted only when a privileged operation is first attempted; Tools: servers must implement proper access controls, and
   clients should ask a person to confirm sensitive operations and show a tool's inputs before it runs). Below 560px the requests
   stack at full width and the confirmation's buttons sit side by side, both 48px ---------- */
.mc-perm{border-top:1px solid #E4DFD9}
.mc-perm-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px 80px;align-items:start}
.mc-perm-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .mc-perm-copy p{margin:0;max-width:540px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .mc-try-k{margin:0 0 12px;font-weight:700;font-size:16px;line-height:1.3;color:#232834}
.mc-try-btns{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.v9 .mc-try-b{display:inline-flex;align-items:center;box-sizing:border-box;min-height:48px;margin:0;padding:10px 22px;border:1.75px solid #C2C5CC;border-radius:24px;background:#fff;font-family:inherit;font-weight:500;font-size:16px;line-height:1.3;color:#232834;cursor:pointer;transition:border-color .2s cubic-bezier(.65,0,.35,1),background-color .2s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .mc-try-b:hover{border-color:#232834}}
.v9 .mc-try-b[aria-pressed="true"]{border-color:#232834;background:#F1EEEA;font-weight:700}
.v9 .mc-try-b:focus-visible,.v9 .mc-out-b:focus-visible{outline:3px solid #d33d5c;outline-offset:3px}
.mc-try-card{padding:20px 20px 20px;border:1.75px solid #232834;border-radius:20px;background:#fff}
.v9 .mc-try-t{width:100%;margin:-6px 0 0;border:0;border-collapse:separate;border-spacing:0 6px;background:none}
.v9 .mc-try-cap{caption-side:top;margin:0;padding:0 0 8px;font-weight:700;font-size:14px;line-height:1.35;letter-spacing:.12em;text-transform:uppercase;color:#4f5565;text-align:left}
.v9 .mc-try-t th,.v9 .mc-try-t td{border:0;background:none;text-align:left;vertical-align:middle}
.v9 .mc-try-t thead th{padding:0 12px 2px;font-weight:500;font-size:14px;line-height:1.3;color:#4f5565}
.v9 .mc-try-t tbody th,.v9 .mc-try-t tbody td{padding:11px 12px;font-weight:500;font-size:16px;line-height:1.4;color:#4f5565;transition:background-color .25s cubic-bezier(.65,0,.35,1),box-shadow .25s cubic-bezier(.65,0,.35,1)}
.v9 .mc-try-t tbody th{border-radius:12px 0 0 12px;color:#232834}
.v9 .mc-try-t tbody td:last-child{border-radius:0 12px 12px 0}
.v9 .mc-try-t tbody tr.on th,.v9 .mc-try-t tbody tr.on td{background:#F1EEEA;color:#232834}
.v9 .mc-try-t tbody tr.on th{font-weight:700;box-shadow:inset 3px 0 0 #232834}
.mc-acc{display:inline-flex;align-items:center;height:26px;padding:0 10px;border:1.5px solid #C2C5CC;border-radius:13px;background:#fff;font-weight:700;font-size:14px;line-height:1;color:#232834;white-space:nowrap}
.mc-acc.ch{border-color:#232834}
.mc-out{display:grid;margin:14px 0 0}
.mc-out > div{grid-area:1/1;box-sizing:border-box;padding:16px 18px;border:1.75px solid #E4DFD9;border-radius:16px;background:#fff;visibility:hidden;opacity:0;transition:opacity .3s cubic-bezier(.65,0,.35,1),visibility 0s linear .3s}
.mc-out.r .mc-out-r,.mc-out.w .mc-out-w,.mc-out.a .mc-out-a,.mc-out.d .mc-out-d{visibility:visible;opacity:1;transition:opacity .3s cubic-bezier(.65,0,.35,1),visibility 0s}
.mc-out .mc-out-w{border-color:#FA5478}
.mc-out .mc-out-a,.mc-out .mc-out-d{display:flex;align-items:center}
.v9 .mc-out-h{margin:0 0 8px;font-weight:700;font-size:17px;line-height:1.35;color:#232834}
.v9 .mc-out-n{margin:8px 0 0;font-weight:500;font-size:16px;line-height:1.45;color:#4f5565}
.mc-out-row{display:flex;align-items:center;gap:10px;height:34px;margin:0 0 6px;padding:0 12px;border:1.5px solid #E4DFD9;border-radius:10px}
.mc-out-row i{display:block;height:9px;border-radius:5px;background:#C2C5CC}
.mc-out-row i:first-child{width:38%}.mc-out-row i:last-child{width:22%;margin-left:auto;background:#E4DFD9}
.mc-out-btns{display:flex;gap:10px;margin:14px 0 0}
.v9 .mc-out-b{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:120px;height:48px;margin:0;padding:0 22px;border:1.75px solid #232834;border-radius:24px;background:#fff;font-family:inherit;font-weight:700;font-size:16px;line-height:1;color:#232834;cursor:pointer}
.v9 .mc-out-b.ok{background:#232834;color:#fff}
@media (hover:hover){.v9 .mc-out-b:hover{background:#F1EEEA}.v9 .mc-out-b.ok:hover{background:#3a3f4b}}
.v9 .mc-out-l{display:flex;align-items:center;gap:12px;margin:0;font-weight:700;font-size:17px;line-height:1.35;color:#232834}
.mc-out-tk{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#232834}
.v9 .mc-out-tk svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mc-out-rg{flex:none;display:block;box-sizing:border-box;width:30px;height:30px;border:1.75px solid #232834;border-radius:50%}
.mc-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.v9 .mc-try-b,.v9 .mc-try-t tbody th,.v9 .mc-try-t tbody td,.mc-out > div{transition:none!important}}
@media (max-width:1023px){.mc-perm-grid{grid-template-columns:minmax(0,1fr)}.mc-try{max-width:640px}}
@media (max-width:560px){.mc-try-btns{display:grid;grid-template-columns:minmax(0,1fr)}.v9 .mc-try-b{justify-content:center;width:100%}.mc-try-card{padding:16px 12px}.v9 .mc-try-t tbody th,.v9 .mc-try-t tbody td{padding:10px 8px}.v9 .mc-try-t thead th{padding:0 8px 2px}.mc-out-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.v9 .mc-out-b{min-width:0;width:100%;padding:0 12px}}



/* ---------- what can go wrong, and how we design for it (#risks): the copy, with the line to AI Security & Governance, and one
   still trace drawn from its words. A document the assistant read, with one line in it that reads like an instruction; what the
   assistant then asked; what the server answered, a calm white card whose coral edge is the section's one coral part: "Not
   allowed for this sign-in. Nothing was exported." Short ink joins between the three, no warning signs. It says only what AI
   Security & Governance and the prompt injection article already say: text an assistant reads can carry instructions (OWASP
   LLM01, as that page checks it), a model can't reliably tell them apart, and the limits that matter sit outside the model, in
   the server's own checks and a person's approval (MCP specification, revision 2026-07-28, Tools: servers must validate inputs and
   implement proper access controls; checked October 9, 2026). Side by side from 1024px, stacked below ---------- */
.mc-risk{border-top:1px solid #E4DFD9}
.mc-risk-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px 80px;align-items:center}
.mc-risk-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .mc-risk-copy p{margin:0;max-width:540px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .mc-risk-copy .mc-risk-more{margin-top:18px;font-size:17px}
.v9 .mc-risk-more a{display:inline-block;padding:11px 0;font-weight:700;color:#d33d5c;text-decoration:none;white-space:nowrap}
.v9 .mc-risk-more a:hover,.v9 .mc-risk-more a:focus-visible{color:#d33d5c;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.mc-trace{margin:0}
.mc-trace-art{display:grid;gap:30px;max-width:540px;margin:0 0 0 auto;padding:0;list-style:none;pointer-events:none;-webkit-user-select:none;user-select:none}
.v9 .mc-trace-art > li{position:relative;display:grid;gap:8px;margin:0;padding:18px 22px;border:1.75px solid #232834;border-radius:18px;background:#fff}
.v9 .mc-trace-art > li + li::before{content:"";position:absolute;left:40px;top:-31px;width:1.75px;height:28px;background:#232834}
.v9 .mc-trace-art > li.mc-trace-doc{background:#F1EEEA}
.v9 .mc-trace-k{margin:0;font-weight:700;font-size:14px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:#4f5565}
.mc-trace-ln{display:block;width:86%;height:10px;border-radius:5px;background:#C2C5CC}
.mc-trace-ln.s{width:62%}.mc-trace-ln.m{width:72%}
.v9 .mc-trace-q{margin:2px 0;font-weight:700;font-size:17px;line-height:1.45;color:#232834}
.v9 .mc-trace-v{display:flex;align-items:center;gap:12px;margin:0;font-weight:700;font-size:17px;line-height:1.4;color:#232834}
.v9 .mc-trace-art > li.mc-trace-sv{border-color:#FA5478}
.mc-trace-rg{flex:none;display:block;box-sizing:border-box;width:26px;height:26px;border:1.75px solid #232834;border-radius:50%}
@media (max-width:1023px){.mc-risk-grid{grid-template-columns:minmax(0,1fr)}.mc-trace-art{margin:0;max-width:600px}}
@media (max-width:560px){.v9 .mc-trace-art > li{padding:16px 18px}.v9 .mc-trace-v{align-items:flex-start}.mc-trace-rg{margin-top:-1px}}



/* ---------- start with one job (#start): the drawing on the left, the copy on the right. One release card, the family's white card
   in its ink line: "Live for your support team" beside a small coral dot, the view's one coral part, then the one job, "Find last
   week's open orders", and its access, "Read only". Beneath it, in a dashed tint outline and quieter type, what comes next "once
   you've seen it used": cancel an order, after a person confirms. When the drawing is well in view (playOnce) the next card
   arrives once and holds; scrolled past, or with reduced motion, it is already there. Not a list, a checklist, a timeline or
   steps on a track: one thing live, and one thing waiting for evidence. Stacked below 1024px ---------- */
.mc-start{border-top:1px solid #E4DFD9}
.mc-start-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 80px;align-items:center}
.mc-start-copy{grid-column:2;grid-row:1}
.mc-start-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .mc-start-copy p{margin:0;max-width:560px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.mc-job{grid-column:1;grid-row:1;margin:0}
.mc-job-art{display:grid;gap:18px;max-width:520px;pointer-events:none;-webkit-user-select:none;user-select:none}
.mc-job-card{display:grid;justify-items:start;gap:10px;padding:24px 26px 26px;border:1.75px solid #232834;border-radius:20px;background:#fff}
.v9 .mc-job-st{display:flex;align-items:center;gap:10px;margin:0;font-weight:700;font-size:14px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:#4f5565}
.mc-job-dot{flex:none;display:block;box-sizing:border-box;width:12px;height:12px;border:1.75px solid #C43A5C;border-radius:50%;background:#FA5478}
.v9 .mc-job-t{margin:2px 0 0;font-weight:700;font-size:24px;line-height:1.25;letter-spacing:-.01em;color:#232834;text-wrap:balance}
.mc-job-tag{display:inline-flex;align-items:center;height:30px;padding:0 12px;border:1.5px solid #232834;border-radius:15px;background:#F1EEEA;font-weight:700;font-size:15px;line-height:1;color:#232834}
.mc-job-next{display:grid;gap:6px;margin:0 18px;padding:18px 22px;border:1.75px dashed #C2C5CC;border-radius:18px;background:#fff;opacity:0;transform:translateY(4px)}
.v9 .mc-job-k{margin:0;font-weight:700;font-size:14px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:#4f5565}
.v9 .mc-job-t2{margin:0;font-weight:500;font-size:17px;line-height:1.45;color:#4f5565}
.mc-job.go .mc-job-next{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.65,0,.35,1) .6s,transform .6s cubic-bezier(.65,0,.35,1) .6s}
.mc-job.end .mc-job-next{transition:none}
@media (prefers-reduced-motion:reduce){.mc-job .mc-job-next{opacity:1;transform:none;transition:none}}
@media (max-width:1023px){.mc-start-grid{grid-template-columns:minmax(0,1fr)}.mc-start-copy,.mc-job{grid-column:1;grid-row:auto}.mc-job-art{max-width:560px}}
@media (max-width:560px){.mc-job-card{padding:20px 20px 22px}.mc-job-next{margin:0 10px;padding:16px 18px}}



/* ---------- questions worth asking (#questions): the heading, then every question as its own card, two across from 821px, each
   answer always open, so find in page reaches it (Join the team has the accordion; Support & Maintenance a single reading column;
   AI Security & Governance groups by who's asking). No FAQ structured data. Answers checked October 9, 2026: an MCP server lists
   its tools with a name, a description and an input schema, the model can discover and call them, and there should always be a
   person able to deny a call (specification, revision 2026-07-28, Tools); capabilities are negotiated per request, so not every
   client supports every part. No AI client is named; training is answered by where the data goes, the assistant's own terms.
   Links in answers are coral text, underlined on hover and focus, each with a 44px tap area ---------- */
.mc-faq{border-top:1px solid #E4DFD9}
.v9 .mc-faq-h{margin:0 0 40px;text-wrap:balance}
.mc-faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.mc-faq-q{padding:26px 28px 28px;border:1.75px solid #E4DFD9;border-radius:20px;background:#fff}
.v9 .mc-faq-q h3{margin:0 0 10px;font-weight:700;font-size:20px;line-height:1.35;letter-spacing:-.01em;color:#232834;text-wrap:balance}
.v9 .mc-faq-q p{margin:0;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .mc-faq-q a{display:inline-block;padding:11px 0;margin:-11px 0;font-weight:700;color:#d33d5c;text-decoration:none;white-space:nowrap}
.v9 .mc-faq-q a:hover,.v9 .mc-faq-q a:focus-visible{color:#d33d5c;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
@media (max-width:820px){.mc-faq-grid{grid-template-columns:minmax(0,1fr);gap:14px}.v9 .mc-faq-h{margin-bottom:28px}}
@media (max-width:560px){.mc-faq-q{padding:20px 20px 22px}}


/* ================= THE PHONE TYPE SCALE: written October 9, 2026 by tools/phone-type.js. Up to 560px: h1 34px, section headings 26px, titles 18 to 20px, body 16px; nothing gets larger. To be run again as each section is added ================= */
@media (max-width:560px){
.v9-h2{font-size:26px;line-height:1.18;letter-spacing:-.025em}
.v9-head .v9-sub,.em-center .v9-sub,.v9 .mc-go,.ai-clients-head .v9-sub,.mc-clients-head .v9-sub,.v9 .mc-prob-copy p,.v9 .mc-ask-q,.v9 .mc-ask-l,.v9 .mc-std-copy p,.v9 .mc-scope-sub,.v9 .mc-kinds p,.v9 .mc-around,.v9 .mc-parts p,.v9 .mc-more li,.v9 .mc-perm-copy p,.v9 .mc-out-l,.v9 .mc-risk-copy p,.v9 .mc-risk-copy .mc-risk-more,.v9 .mc-trace-q,.v9 .mc-trace-v,.v9 .mc-start-copy p,.v9 .mc-job-t2,.v9 .mc-faq-q p{font-size:16px}
.v9-hero h1{font-size:min(34px,clamp(40px,4.6vw,64px));line-height:1.12}
.v9-hero .v9-lead,.v9 .mc-way-h{font-size:17px}
.v9-hero.mc-hero h1.mc-h-a{font-size:min(34px,min(56px,calc((100vw - 44px) / 9.5)));line-height:1.12}
.v9-hero.mc-hero h1.mc-h-b{font-size:min(34px,min(56px,calc((100vw - 44px) / 8.02)));line-height:1.12}
.v9-hero.mc-hero h1.mc-h-c{font-size:min(34px,min(56px,calc((100vw - 44px) / 7.9)));line-height:1.12}
.v9-hero.mc-hero h1.mc-h-d{font-size:min(34px,min(56px,calc((100vw - 44px) / 7.86)));line-height:1.12}
.v9-hero.mc-hero h1.mc-h-e{font-size:min(34px,min(56px,calc((100vw - 44px) / 10.08)));line-height:1.12}
.v9 .mc-kinds h3,.v9 .mc-job-t{font-size:20px}
.v9 .mc-parts h3,.v9 .mc-faq-q h3{font-size:18px}
}