/* Blog page (and, later, the article template), built on the Urgent help page: its font faces, shell, header strip, base,
   reveal, hero base, marked word, buttons and send states are carried over unchanged, except that the page's ground is plain
   white. Header and footer are the site's own (page-seo-1/2.css, site-footer.css); everything here scopes to .v9 or
   body.v9-page. The blog's own rules (bl-*) 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:transparent;background-image:none}
/* the blog is white throughout: no wash, no gradient */
body.v9-page .main-wrap{background:#fff}
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 strip, as on the homepage draft: the quiet links (Sign in, Urgent help?) then the menu. This page leaves
   out the draft's Book a call button, so nothing in the header competes with Request urgent help, and marks Urgent help? as
   the current page: ink, without its underline. The links go under 700px, as on the homepage ---------- */
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}
body.v9-page .hp-hd-l[aria-current="page"]{color:#232834;text-decoration:none}
body.v9-page .header .wbm_search{display:none}
body.v9-page .menu_trigger{order:3;float:none;height:38px;margin:0 0 0 8px}
body.v9-page .menu_trigger .slicknav_icon{transform-origin:100% 19px;scale:.82}
body.v9-page .hp-hd-l: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}}

/* ---------- 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 as wide as the homepage draft (1360px): from 1280px its side space is 56px, as the header's is */
.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}

/* ---------- reveal: sections ease in once as they reach the viewport (never the form) ---------- */
.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 base ---------- */
.v9-hero{background:#fff;color:#232834;padding:24px 0 64px}
.v9-hero h1{font-weight:700;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}
/* 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}}

/* ---------- 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}
@media (prefers-reduced-motion:reduce){.v9-btn,.v9 .v9-btn svg.arr{transition:none}.v9-btn:hover,.v9-btn:active{translate:none}}

/* ---------- the family's send states: on send the button quietens to a spinner (#FCA3B6); the thank-you's coral check disc;
   the error line ---------- */
.v9 .v9-btn .em-spin{display:none;width:20px;height:20px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;animation:emSpin .8s linear infinite}
@keyframes emSpin{to{transform:rotate(360deg)}}
.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){.v9 .v9-btn .em-spin{animation-duration:2.4s}}

@media (max-width:820px){
.v9-wrap{padding:0 22px}
.v9-sec{padding:64px 0}
.v9-hero{padding:20px 0 48px}
}

/* ================= BLOG (this page's own) ================= */
/* ---------- the opening: the family's hero grid. The eyebrow, headline and lead on the left; on the right, the newest
   article itself (its cover, Latest, its topic, title, standfirst and date) as one link. One column below 1101px ---------- */
.v9.bl-hero{padding:24px 0 80px}
.bl-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;align-items:center}
@media (min-width:1101px){.bl-hero-grid{grid-template-columns:minmax(452px,5.2fr) minmax(0,6.8fr);gap:48px 72px}}
.bl-copy{container-type:inline-size;min-width:0}
/* "Practical notes on" is the longer line: 8.26em in Sailec Bold at -.03em (about 8.45em with its marker), so the size is set
   from the copy column's own width and the two lines hold at every width */
.v9-hero.bl-hero h1{font-size:min(58px,calc(100cqi / 8.9));margin:0 0 24px}
.bl-h1-l{display:block;white-space:nowrap}
.v9-hero.bl-hero .v9-lead{max-width:520px}
.v9-hero.bl-hero .v9-lead b{font-weight:700;color:#232834}
@media (max-width:1100px){.v9-hero.bl-hero .v9-lead{max-width:620px}}
@media (max-width:820px){.v9.bl-hero{padding:20px 0 56px}.bl-hero-grid{gap:40px}}
@media (max-width:560px){.v9-hero.bl-hero .v9-lead{font-size:17px}}

.bl-lt{position:relative;min-width:0;max-width:720px}
@media (min-width:1101px){.bl-lt{max-width:none}}
.bl-lt .bl-cv{border-radius:20px}
.bl-lt-body{padding:28px 0 0}
.v9 .bl-lt-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 12px;font-size:14.5px;line-height:1.4;color:#4f5565}
.bl-lt-tag{font-weight:700;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:#d33d5c}
.v9 .bl-lt .bl-t{font-size:clamp(24px,2.2vw,32px);line-height:1.2;letter-spacing:-.02em}
.v9 .bl-lt .bl-sf{max-width:620px}

/* ---------- covers: one object on a bone ground, 16:10, its space held by aspect-ratio so nothing moves as it loads. The
   drawing is a hover Lottie whose first frame is the cover; it eases in once loaded, and its strokes stay 1.75px at every
   size a cover is shown ---------- */
.bl-cv{position:relative;display:block;width:100%;aspect-ratio:16/10;border-radius:14px;background:#F1EEEA;overflow:hidden}
/* the drawing fills a small cover; in a large one it stops growing at 400px wide, so the object keeps its size against the
   1.75px line and gains room around it */
.bl-cv-lt{position:absolute;left:50%;top:50%;width:min(100%,400px);aspect-ratio:16/10;transform:translate(-50%,-50%);opacity:0;transition:opacity .45s cubic-bezier(.65,0,.35,1)}
.bl-cv.ready .bl-cv-lt{opacity:1}
.v9 .bl-cv-lt svg{display:block;width:100%;height:100%;fill:#000;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}
.bl-cv-lt svg path{vector-effect:non-scaling-stroke}
@media (prefers-reduced-motion:reduce){.bl-cv-lt{transition:none}}
/* ---------- the articles: the topic filter (a row of buttons that wraps; a topic shows once it has an article, and the
   filter once two topics have), the count, the search once there are more than 12, then one row per article under
   hairlines. Each row is one link, on its title, stretched over the whole row ---------- */
.v9.bl-list{padding:8px 0 112px}
.bl-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding:0 0 28px}
.bl-topics{display:flex;flex-wrap:wrap;gap:10px}
.v9 .bl-tb{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0 20px;border:1.5px solid #E4DFD9;border-radius:9999px;background:#fff;color:#232834;font:inherit;font-weight:500;font-size:15px;line-height:1.2;cursor:pointer;transition:border-color .2s cubic-bezier(.65,0,.35,1),background-color .2s cubic-bezier(.65,0,.35,1),color .2s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .bl-tb:hover{border-color:#C2C5CC}}
.v9 .bl-tb[aria-pressed="true"]{background:#232834;border-color:#232834;color:#fff}
.v9 .bl-tb:focus-visible{outline:2px solid #232834;outline-offset:2px}
@media (max-width:560px){.bl-topics{gap:8px}.v9 .bl-tb{flex:1 1 auto;justify-content:center;padding:0 14px;font-size:14.5px}}
.bl-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-left:auto}
.v9 .bl-count{font-size:15px;line-height:1.4;color:#4f5565;white-space:nowrap}
.bl-q{position:relative;width:300px;max-width:100%}
.v9 .bl-q input{display:block;width:100%;height:44px;margin:0;padding:0 18px 0 44px;border:1.5px solid #CFC9C1;border-radius:9999px;background:#fff;font:inherit;font-weight:500;font-size:16px;color:#232834;outline:0;-webkit-appearance:none;appearance:none;transition:border-color .2s cubic-bezier(.65,0,.35,1),box-shadow .2s cubic-bezier(.65,0,.35,1)}
.v9 .bl-q input::placeholder{color:#6b7180}
.v9 .bl-q input::-webkit-search-cancel-button{-webkit-appearance:none}
.v9 .bl-q input:focus{border-color:#232834;box-shadow:0 0 0 1px #232834}
.v9 .bl-q svg{position:absolute;left:16px;top:50%;width:18px;height:18px;margin-top:-9px;color:#4f5565;stroke-width:1.75;pointer-events:none}
.bl-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:767px){.bl-tools{width:100%;margin-left:0;justify-content:space-between}.bl-q{flex:1 1 100%;width:auto}}

.bl-rows{border-top:1px solid #E4DFD9}
.bl-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:24px 56px;align-items:center;padding:32px 0;border-bottom:1px solid #E4DFD9}
.bl-row[hidden]{display:none}
.bl-row-body{min-width:0;max-width:760px}
.v9 .bl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:0 0 10px;font-size:14.5px;line-height:1.4;color:#4f5565}
.bl-tp{font-weight:700;color:#232834}
.bl-dot{flex:none;width:3px;height:3px;border-radius:50%;background:#8E939E}
.bl-sample{display:inline-flex;align-items:center;height:22px;padding:0 9px;border:1px solid #C2C5CC;border-radius:9999px;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#4f5565}
.v9 .bl-t{font-weight:700;font-size:24px;line-height:1.25;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 a.bl-a{color:inherit;transition:color .2s cubic-bezier(.65,0,.35,1)}
.bl-a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:16px}
.v9 a.bl-a:focus-visible{outline:0;color:#d33d5c}
.v9 a.bl-a:focus-visible::after{outline:2px solid #232834;outline-offset:6px}
@media (hover:hover){.v9 .bl-row:hover a.bl-a,.v9 .bl-lt:hover a.bl-a{color:#d33d5c}}
.v9 .bl-sf{margin:10px 0 0;font-size:17px;line-height:1.6;color:#4f5565}
.v9 .bl-rt{margin:12px 0 0;font-size:14.5px;line-height:1.4;color:#4f5565}
@media (max-width:1100px){.bl-row{grid-template-columns:minmax(0,1fr) 220px;gap:24px 36px}}
@media (max-width:767px){
.bl-row{grid-template-columns:minmax(0,1fr);gap:20px;padding:28px 0}
.bl-row .bl-cv{order:-1}
.v9 .bl-t{font-size:21px}
.v9 .bl-sf{font-size:16px}
}

/* ---------- Show more reveals the next 12 below the last, so nothing above moves; the family's button in its outline form ---------- */
.bl-more{display:flex;justify-content:center;margin:40px 0 0}
.v9-btn.v9-btn-ghost{--btn-step:#E4DFD9;background:#fff;border-color:#232834}
.v9 button.v9-btn.v9-btn-ghost{color:#232834}
.bl-none{padding:40px 0;border-top:1px solid #E4DFD9;border-bottom:1px solid #E4DFD9}
.v9 .bl-none p{font-size:17px;line-height:1.6;color:#4f5565}
.v9 .bl-none button{-webkit-appearance:none;appearance:none;margin:0;padding:0;border:0;background:none;font:inherit;font-weight:700;color:#232834;text-decoration:underline;text-decoration-color:#C2C5CC;text-decoration-thickness:1.5px;text-underline-offset:3px;cursor:pointer}
@media (hover:hover){.v9 .bl-none button:hover{text-decoration-color:#232834}}
.v9 .bl-none button:focus-visible{outline:2px solid #232834;outline-offset:2px;border-radius:2px}
@media (max-width:820px){.v9.bl-list{padding-bottom:88px}}

/* ================= THE CLOSING: the family's centred email form (from the AI Agents page, unchanged) ================= */
.v9-hero-form{display:flex;flex-wrap:nowrap;gap:10px}
.v9-hero-email{flex:0 1 262px;width:262px;min-width:0;height:48px;padding:0 22px;border:1.5px solid #CFC9C1;border-radius:24px;background:#fff;font:inherit;font-size:16px;color:#232834;outline:0;transition:border-color .2s,box-shadow .2s}
.v9-hero-email::placeholder{color:#6b7180}
.v9-hero-email:focus{border-color:#232834;box-shadow:0 0 0 4px rgba(250,84,120,.22)}
.v9-hero-go{flex:none;width:178px;height:48px;padding:0;border-radius:24px;font-family:inherit;font-size:16px}
@media (max-width:480px){.v9-hero-form{flex-wrap:wrap}.v9-hero-email,.v9-hero-go,.em-email{flex:1 1 100%;width:100%}}
.v9-hero-go{padding:0;font-size:16px}
.em-center{display:flex;flex-direction:column;align-items:center;text-align:center}
.em-center .v9-h2{text-align:center;max-width:760px}
.em-center .v9-sub{text-align:center;max-width:560px;margin:18px auto 34px;font-size:18px;line-height:1.6;color:#4f5565}
/* ---------- closing: the hero's email and call button, centred ---------- */
.em-cta{border-top:1px solid #E4DFD9;padding-bottom:104px}
.em-cta .v9-sub{margin-bottom:30px}
.em-cta .v9-hero-form{justify-content:center}
.em-cta .em-talk{justify-items:center}
.em-cta .em-status{text-align:center}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

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

/* ---------- 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)}
}
/* the blog's closing: its headline and line break into balanced lines on phones */
.bl-cta .v9-h2,.bl-cta .v9-sub{text-wrap:balance}