/* Engagement Models page (v2), in the Voice Agents page format. Header and footer are the site's own
   (page-seo-1/2.css) and are untouched; everything here scopes to .v9 or body.v9-page. */

@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}

/* ---------- base ---------- */
.v9{font-family:Sailec,Helvetica,Arial,sans-serif;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 svg{display:block;width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.v9-wrap{max-width:1240px;margin:0 auto;padding:0 40px;position:relative}
.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-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:52px;padding:0 28px;border-radius:26px;background:#FA5478;color:#fff;font-weight:700;font-size:15px;border:0;cursor:pointer;transition:background .3s,color .3s,transform .3s}
.v9-btn .arr{display:inline-block;transition:transform .26s cubic-bezier(.19,1,.22,1)}
.v9-ic{flex:none;width:32px;height:32px;color:#232834}

/* ---------- reveal ---------- */
.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}

body.v9-page .header{padding-top:18px;padding-bottom:18px}

/* ---------- hero ---------- */
.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 .v9-eyebrow{color:#d33d5c;margin-bottom:22px}
.v9-hero h1{font-weight:700;font-size:clamp(40px,4.6vw,64px);line-height:1.04;letter-spacing:-.035em;margin:0 0 26px}
.v9-hero .v9-lead{font-size:18px;line-height:1.6;color:#4f5565;max-width:520px;margin:0 0 40px}
/* hero copy: two-line headline with one marked word, a lead that closes on a bold phrase, email + demo button */
.v9-hero-copy h1{line-height:1.1;letter-spacing:-.03em;margin:0 0 24px}
.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)}}
.v9-hero-copy .v9-lead{color:#3a3f4b;line-height:1.65;margin:0 0 36px}
.v9-hero-copy .v9-lead b{font-weight:700;color:#232834}
.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-hero-go svg.arr{width:18px;height:18px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.v9-hl::before{animation:none}}
.v9-illo{position:relative;width:100%;max-width:720px;margin:0 auto;aspect-ratio:1920/1805}
.v9-illo{pointer-events:none}
@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{font-size:18px;max-width:480px;margin-bottom:36px}
}
.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}


/* ---------- capabilities and trust: four columns with hairlines ---------- */
.v9-four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.v9-four li{padding:8px 32px 4px;border-left:1px solid #dcd7d0;display:flex;flex-direction:column;gap:14px}
.v9-four li:first-child{border-left:0;padding-left:0}
.v9-four.center li{align-items:center;text-align:center}
.v9-four.center li p{text-align:center}
.v9-four b{display:block;font-weight:700;font-size:16.5px;letter-spacing:-.015em;line-height:1.25}
.v9-four p{font-size:14.5px;line-height:1.55;color:#5a6172;max-width:240px}
.v9-four .v9-ic{margin-bottom:6px}

/* ---------- the four models: the hero's tool cards, drifting gently; each card's own coral part pops in with the section ---------- */
.v9-head .v9-sub{margin:18px 0 0;max-width:640px;font-size:18px;line-height:1.6;color:#4f5565}
.em-ic{display:block;margin-bottom:10px}
.v9 svg.em-card-ic{display:block;width:124px;height:100px;fill:none;stroke:#232834;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round;overflow:visible;animation:v9Float 7s cubic-bezier(.45,0,.55,1) infinite;animation-delay:calc(var(--i,0) * -1.75s)}
.em-card-ic *{vector-effect:non-scaling-stroke}
.em-card-ic .b{fill:#F1EEEA}
.em-card-ic .t{fill:#C2C5CC}
.em-card-ic .tn{fill:#C2C5CC;stroke:none}
.em-card-ic .c{fill:#FA5478;stroke:#C43A5C}
.em-card-ic .cl{stroke:#FA5478;stroke-width:2.4px}
.em-card-ic .a{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .6s cubic-bezier(.34,1.56,.64,1) calc(var(--i,0) * 90ms + 350ms)}
.v9-rv.in .em-card-ic .a{transform:scale(1)}
.v9-rv>li:nth-child(2){--i:1}.v9-rv>li:nth-child(3){--i:2}.v9-rv>li:nth-child(4){--i:3}
@keyframes v9Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.v9 svg.em-card-ic{animation:none}.em-card-ic .a{transform:none;transition:none}}

/* ---------- model sections: the illustration on one side, the fit and the choice on the other ---------- */
.em-model{border-top:1px solid #E4DFD9}
.em-model-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.em-model.rev .em-model-fig{order:2}
.em-lottie{display:block;width:100%;max-width:620px;margin:0 auto;aspect-ratio:1920/1360}
.em-lottie svg{display:block;fill:#000;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}
.em-model-body .v9-sub{margin:18px 0 28px;max-width:560px;font-size:17px;line-height:1.65;color:#4f5565}
.em-model-body .v9-h2{font-size:clamp(28px,2.8vw,38px)}
.em-fit{margin:0 0 36px}
.em-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px}
.em-checks li{display:flex;align-items:center;gap:12px;font-weight:500;font-size:15px;line-height:1.4;color:#232834}
.em-ck{flex:none;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#FA5478;transform:scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1) calc(var(--k,0) * 70ms + 300ms)}
.v9-rv.in .em-ck{transform:scale(1)}
.em-checks li:nth-child(2){--k:1}.em-checks li:nth-child(3){--k:2}.em-checks li:nth-child(4){--k:3}.em-checks li:nth-child(5){--k:4}.em-checks li:nth-child(6){--k:5}
.v9 .em-ck svg{display:block;width:12px;height:12px;stroke:#fff;stroke-width:2.2;fill:none}
@media (max-width:640px){.em-checks{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.em-ck{transform:none;transition:none}}
.em-choose svg.arr{width:18px;height:18px;stroke:currentColor;stroke-width:2.2;fill:none}

/* ---------- buttons: a coral pill that lifts on hover and leaves a soft blush step beneath it ---------- */
.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;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{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-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}}

/* ---------- help choosing: one calm, centred band ---------- */
.em-help{background:#F1EEEA}
.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}
.em-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.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}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- engineering standards: the models on one foundation, then the nine standards ---------- */
.em-std-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center;margin-bottom:56px}
.em-std-grid .v9-sub{margin:18px 0 0;max-width:440px;font-size:18px;line-height:1.6;color:#4f5565}
.em-lottie.em-lottie-std{aspect-ratio:1920/1080}
.em-prin{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.em-prin li{display:flex;align-items:center;gap:16px;padding:16px 18px;border:1px solid #E4DFD9;border-radius:16px;background:#fff}
.em-prin-ic{flex:none;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:#F1EEEA}
.v9 .em-prin-ic svg{width:26px;height:26px;stroke:#232834;stroke-width:1.5;fill:none}
.em-prin b{font-weight:700;font-size:15.5px;letter-spacing:-.01em;line-height:1.3}

/* ---------- get started: a new three-step flow on one bone panel; each step eases in ---------- */
.em-start{border-top:1px solid #E4DFD9}
.v9 button.v9-btn{color:#fff}
.em-flow{max-width:1000px;margin:0 auto;padding:36px 40px 40px;border-radius:28px;background:#F1EEEA}
/* stepper: numbered steps joined by a hairline that fills coral as you move on; finished steps take you back */
.em-flow-top{margin-bottom:30px}
.em-steps2{display:flex;align-items:center;gap:14px;margin:0;padding:0;list-style:none}
.em-steps2 li{display:flex;align-items:center}
.em-steps2 .sep{position:relative;flex:1;height:2px;border-radius:1px;background:#DDD8D1;overflow:hidden}
.em-steps2 .sep::after{content:"";position:absolute;inset:0;background:#FA5478;transform:scaleX(0);transform-origin:left center;transition:transform .7s cubic-bezier(.65,0,.35,1)}
.em-steps2 .sep.done::after{transform:scaleX(1)}
.em-steps2 button{appearance:none;display:inline-flex;align-items:center;gap:10px;padding:0;border:0;background:none;font:inherit;font-weight:700;font-size:14px;color:#5a6172;white-space:nowrap;transition:color .3s}
.em-steps2 button:disabled{cursor:default;opacity:1}
.em-steps2 .n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1.5px solid #CFC9C1;background:#fff;font-size:13px;transition:background .4s,border-color .4s,color .4s}
.em-steps2 .n b{font-weight:700}
.v9 .em-steps2 .n svg{display:none;width:14px;height:14px;stroke:#fff;stroke-width:2.6;fill:none}
.em-steps2 .on button{color:#232834}
.em-steps2 .on .n{background:#232834;border-color:#232834;color:#fff}
.em-steps2 .done button{color:#232834;cursor:pointer}
.em-steps2 .done button:disabled{cursor:default}
.em-steps2 .done .n{background:#FA5478;border-color:#FA5478;color:#fff}
.em-steps2 .done .n b{display:none}
.v9 .em-steps2 .done .n svg{display:block}
.em-steps2 .done button:not(:disabled):hover{color:#d33d5c}
.em-steps2 .open button{color:#232834;cursor:pointer}
.em-steps2 .open .n{border-color:#232834;color:#232834}
.em-steps2 .open button:hover{color:#d33d5c}
.em-steps2 button:focus-visible{outline:2px solid #FA5478;outline-offset:4px;border-radius:6px}
/* steps share one space: the old one fades out, then the new one fades in with a short glide, so nothing jumps */
.em-flow-panes{display:grid}
.em-flow-pane{grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(20px);transition:opacity .4s cubic-bezier(.65,0,.35,1),transform .6s cubic-bezier(.65,0,.35,1),visibility 0s linear .6s}
.em-flow-pane.prev{transform:translateX(-20px)}
.em-flow-pane.on{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .5s cubic-bezier(.65,0,.35,1) .15s,transform .7s cubic-bezier(.65,0,.35,1) .15s,visibility 0s}
.em-flow-pane.em-done{align-self:center}
/* model cards: every drawing stays visible; its coral part rests in grey and warms to coral on the chosen card */
.em-pick-card .em-card-ic .c{fill:#C2C5CC;stroke:#232834;transition:fill .5s cubic-bezier(.65,0,.35,1),stroke .5s cubic-bezier(.65,0,.35,1)}
.em-pick-card .em-card-ic .cl{stroke:#8E939E;transition:stroke .5s cubic-bezier(.65,0,.35,1)}
.em-pick-card.on .em-card-ic .c{fill:#FA5478;stroke:#C43A5C}
.em-pick-card.on .em-card-ic .cl{stroke:#FA5478}
.v9 .em-pick-card svg.em-card-ic{transition:transform .55s cubic-bezier(.65,0,.35,1)}
.em-pick-card.on svg.em-card-ic{transform:translateY(-3px)}
.em-pick{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:28px}
.em-pick-card{appearance:none;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px 16px 18px;border:1.5px solid transparent;border-radius:20px;background:#fff;font:inherit;color:#232834;text-align:left;cursor:pointer;transition:border-color .35s}
.em-pick-card:hover{border-color:#CFC9C1}
.em-pick-card.on{border-color:#232834}
.em-pick-card:focus-visible{outline:2px solid #FA5478;outline-offset:2px}
.em-pick-card b{font-weight:700;font-size:15px;line-height:1.25;letter-spacing:-.01em}
.em-pick-card .l{font-size:13px;line-height:1.45;color:#5a6172}
.v9 .em-pick-card svg.em-card-ic{width:84px;height:68px;margin-bottom:6px;animation:none}
.em-field{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.em-field>span{font-weight:700;font-size:14px;color:#232834}
.em-field>span i{font-style:normal;font-weight:500;color:#5a6172}
.em-field .req{color:#d33d5c}
.em-in{width:100%;height:50px;padding:0 18px;border:1.5px solid #CFC9C1;border-radius:14px;background:#fff;font:inherit;font-size:16px;color:#232834;outline:0;transition:border-color .2s,box-shadow .2s}
textarea.em-in{height:auto;min-height:104px;padding:14px 18px;line-height:1.5;resize:vertical}
.em-in::placeholder{color:#6b7180}
.em-in:focus{border-color:#232834;box-shadow:none}
.em-in.bad{border-color:#d33d5c}
.em-chips{display:flex;flex-wrap:wrap;gap:8px}
.em-chip{appearance:none;height:40px;padding:0 16px;border:1.5px solid #CFC9C1;border-radius:20px;background:#fff;font:inherit;font-weight:500;font-size:14px;color:#232834;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.em-chip:hover{border-color:#232834}
.em-chip.on{background:#232834;border-color:#232834;color:#fff}
.em-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.em-err{font-size:13.5px;line-height:1.5;color:#c62d4f}
.em-acts{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:10px;padding-top:22px;border-top:1px solid #E4DFD9}
.em-acts .v9-btn{margin-left:auto}
.em-back{appearance:none;display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;font:inherit;font-weight:700;font-size:14px;color:#5a6172;cursor:pointer;transition:color .2s}
.v9 .em-back svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.2;fill:none}
.em-back:hover{color:#232834}
/* one quiet line: the model you chose, and a way to change it */
.em-sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px;margin:0 0 24px;font-size:15px;color:#5a6172}
.em-sum b{font-weight:700;color:#232834}
.em-sum button{appearance:none;margin-left:4px;padding:0;border:0;background:none;font:inherit;font-weight:700;font-size:14px;color:#d33d5c;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* buttons inside the flow stay still on hover, so nothing moves while you fill it in */
.em-flow .v9-btn:hover,.em-flow .v9-btn:active{translate:none;box-shadow:none}
.em-flow .v9-btn:hover::before{transform:none}
.v9 .em-flow .v9-btn:hover svg.arr{transform:none}
.em-done{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 0;text-align:center}
.em-done-ic{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:#FA5478}
.v9 .em-done-ic svg{width:28px;height:28px;stroke:#fff;stroke-width:2.6;fill:none}
.em-done b{font-weight:700;font-size:24px;letter-spacing:-.02em}
.em-done p{max-width:420px;text-align:center;font-size:16px;line-height:1.6;color:#5a6172}
@media (max-width:980px){.em-pick{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.em-flow{padding:26px 20px 28px;border-radius:22px}.em-pick{grid-template-columns:repeat(2,minmax(0,1fr))}.em-two{grid-template-columns:minmax(0,1fr)}.em-steps2{gap:10px}.em-steps2 button{font-size:13px;gap:8px}}
@media (prefers-reduced-motion:reduce){.em-flow-pane,.em-flow-pane.on,.em-steps2 .sep::after,.v9 .em-pick-card svg.em-card-ic,.em-pick-card .em-card-ic .c,.em-pick-card .em-card-ic .cl{transition:none}}

/* the side panel keeps your choices in view while you fill in the project and your details */
.em-flow-pane.em-split{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:32px;align-items:start}
.em-side{display:flex;flex-direction:column;gap:16px;padding:20px 20px 22px;border-radius:20px;background:#fff}
.em-side-lbl{font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#5a6172}
.em-side-model{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.v9 .em-side svg.em-card-ic{width:84px;height:68px;animation:none}
.em-side-model b{font-weight:700;font-size:16px;line-height:1.3;letter-spacing:-.01em}
.em-side-row{display:flex;flex-direction:column;gap:3px;padding-top:14px;border-top:1px solid #E4DFD9}
.em-side-row span{font-size:12.5px;color:#5a6172}
.em-side-row b{font-weight:700;font-size:14.5px;line-height:1.35}
.em-side-edit{appearance:none;align-self:flex-start;padding:0;border:0;background:none;font:inherit;font-weight:700;font-size:13.5px;color:#d33d5c;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (max-width:860px){.em-flow-pane.em-split{grid-template-columns:minmax(0,1fr);gap:20px}.em-side{order:-1}}

/* ---------- closing: the hero's email and call button, centred ---------- */
.em-cta{border-top:1px solid #E4DFD9}
.em-cta .v9-hero-form{justify-content:center}
.em-cta .v9-sub{margin-bottom:30px}

/* ---------- email and call: on send the field confirms and the button quietens to a spinner; then the form gives way to a thank-you ---------- */
.em-talk{display:grid}
.em-talk>*{grid-area:1/1}
.em-cta .em-talk{justify-items:center}
.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}
.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)}
/* while sending, the button narrows to fit just the spinner and the arrow */
.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-done b{font-weight:700}
.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}
.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}}
@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,.em-model-grid,.em-std-grid{grid-template-columns:minmax(0,1fr)}
.em-prin{grid-template-columns:repeat(2,minmax(0,1fr))}
.em-model-grid{gap:40px}
.em-model.rev .em-model-fig{order:0}
.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}
.v9-four{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 0}
.v9-four li{padding:0 24px}
.v9-four li:nth-child(odd){border-left:0;padding-left:0}
.v9-four li:nth-child(even){padding-right:0}
.v9-four p{max-width:none}
}
@media (max-width:520px){
.v9-four{grid-template-columns:minmax(0,1fr)}
.v9-four li,.v9-four li:nth-child(even){padding:0;border-left:0}
}


@media (max-width:620px){.em-prin{grid-template-columns:minmax(0,1fr)}}

/* the field confirms as soon as the email is valid, as it does while sending; the form button carries a full arrow */
.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-hero-go svg.arr{width:16px;height:16px;margin-left:8px;stroke-width:2.2}

/* ---------- the hero's "Book a call" button, sized exactly as the homepage's: only as wide as its label and arrow (169px), a
   fixed 172px, so it keeps that width while sending and nothing shifts. From 821px the field is 262px beside it; from 561px
   to 820px the field takes the rest of the row; up to 560px the pair stacks at full width. This page's hero form becomes the homepage's grid; its closing form follows the shared rules at the end of this file. ---------- */
.v9.v9-hero .em-talk .v9-hero-form{display:grid;grid-template-columns:262px auto;gap:10px;justify-content:start}
.v9.v9-hero .em-talk .v9-hero-form .em-email{width:100%;min-width:0}
.v9.v9-hero .em-talk .v9-hero-form .v9-hero-email{flex:none;width:100%;min-width:0}
.v9.v9-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{flex:none;width:172px;min-width:0;padding:0}
@media (max-width:820px){.v9.v9-hero .em-talk{width:100%;max-width:560px}.v9.v9-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr) auto;width:100%;max-width:560px}}
@media (max-width:560px){.v9.v9-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr)}.v9.v9-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{width:100%}}

/* ================= SYNCED 2 OCTOBER 2026: the shared email form, copied as it is from page-web-development-v2.css ================= */
/* ---------- 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)}
}

/* ---------- tap areas and the legacy menu, as on every page: the header and footer logos get 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 ---------- */
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 PHONE TYPE SCALE: synced 2 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,.em-model-body .v9-h2{font-size:26px;line-height:1.18;letter-spacing:-.025em}
.v9-hero h1{font-size:min(34px,clamp(40px,4.6vw,64px));line-height:1.12}
.v9-hero .v9-lead{font-size:17px}
.v9-four b,.v9-head .v9-sub,.em-model-body .v9-sub,.em-center .v9-sub,.em-std-grid .v9-sub{font-size:16px}
.em-done b{font-size:20px}
}