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


/* ================= DISCOVERY & MVP (this page's own) ================= */

/* ---------- this page's hero, as on AI-Assisted Engineering: the eyebrow, then a headline that holds two lines at every width.
   Each option is sized from its longer line, measured in Sailec Bold at -.03em on the woff2 itself (October 10, 2026): A "to a
   first release" 7.21em, B "before you build it all" 9.57em, C "learn what matters" 8.56em, D "worth building on" 8.12em and E
   "then built to keep" 8.06em ("Your idea, tested," 7.90em). Up to 1100px the size follows the viewport, so that line takes 91%
   of the column at most, 56px at the largest; from 1101px, where the copy column is 560px, A runs from 52px to 60px (433px at
   most), B from 44px to 50px (479px), C from 50px to 56px (479px), D from 52px to 58px (471px) and E from 52px to 58px (468px).
   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.dm-hero .v9-eyebrow{line-height:1.48}
.v9-hero.dm-hero .v9-lead :is(b,strong){line-height:1}
.v9-hero.dm-hero h1.dm-h-a{font-size:min(56px,calc((100vw - 44px) / 7.89))}
.v9-hero.dm-hero h1.dm-h-b{font-size:min(56px,calc((100vw - 44px) / 10.47))}
.v9-hero.dm-hero h1.dm-h-c{font-size:min(56px,calc((100vw - 44px) / 9.36))}
.v9-hero.dm-hero h1.dm-h-d{font-size:min(56px,calc((100vw - 44px) / 8.88))}
.v9-hero.dm-hero h1.dm-h-e{font-size:min(56px,calc((100vw - 44px) / 8.82))}
@media (min-width:821px){.v9.dm-hero .em-talk .v9-hero-form{grid-template-columns:262px auto}}
@media (min-width:561px) and (max-width:820px){.v9.dm-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:561px){.v9.dm-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{width:172px;padding:0}}
@media (max-width:560px){.v9-hero.dm-hero .v9-lead{font-size:17px}}
@media (min-width:1101px){
.v9-hero.dm-hero .v9-hero-grid{grid-template-columns:minmax(560px,5.4fr) minmax(0,6.6fr);gap:48px}
.v9-hero.dm-hero h1.dm-h-a{font-size:clamp(52px,4.4vw,60px)}
.v9-hero.dm-hero h1.dm-h-b{font-size:clamp(44px,3.65vw,50px)}
.v9-hero.dm-hero h1.dm-h-c{font-size:clamp(50px,4.1vw,56px)}
.v9-hero.dm-hero h1.dm-h-d{font-size:clamp(52px,4.25vw,58px)}
.v9-hero.dm-hero h1.dm-h-e{font-size:clamp(52px,4.25vw,58px)}
.v9-hero.dm-hero .v9-lead{max-width:520px}
/* the drawing is enlarged a little into the page margin, not into the column gap */
.dm-hero .v9-illo{width:106%;margin:0 -6% 0 0;transform:none}
}
/* the drawing's box keeps its shape reserved from the first paint (1600 x 1320, the hard part first). Up to 1100px it sits below
   the form; at 560px and below it runs to the window's edges and shows the phone version (1600 x 2115), whose parts are 1.35
   times larger */
.dm-hero .v9-illo{aspect-ratio:1600/1320}
@media (max-width:560px){.dm-hero .v9-illo{width:calc(100% + 44px);max-width:none;margin:0 -22px;aspect-ratio:1600/2115}}
/* 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.dm-hero{padding:40px 0 64px}
@media (min-width:1101px){.v9-hero.dm-hero{padding:clamp(32px,7vh,84px) 0 72px}}
@media (max-width:560px){.v9-hero.dm-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 ---------- */
.dm-cta .v9-h2{text-wrap:balance}
.dm-cta .v9-sub{text-wrap:pretty}

/* ---------- The costly part is building the wrong thing (#problem): the copy beside one build plan for the hero's idea, its
   features as grey bars. As it comes well into view the card turns over, once, and its back shows what the plan rests on: the
   four assumptions from the copy, each with an open dashed ring (not yet tested). Then the one everything else depends on,
   "People need this", takes a coral edge and its tag, "Test first": the view's one coral part. Both faces share one grid cell,
   so the card holds its height; with reduced motion it shows its back from the start. Static otherwise. Side by side from
   1024px; below, the drawing follows the copy ---------- */
.dm-prob{border-top:1px solid #E4DFD9}
.dm-prob-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px 80px;align-items:center}
.dm-prob-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .dm-prob-copy p{margin:0;max-width:560px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.dm-plan{margin:0;perspective:1800px}
.dm-plan-card{display:grid;max-width:520px;margin:0 0 0 auto;transform-style:preserve-3d;pointer-events:none;-webkit-user-select:none;user-select:none}
.dm-plan-f{grid-area:1/1;display:grid;align-content:start;gap:14px;padding:22px 24px 24px;border:1.75px solid #232834;border-radius:20px;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.dm-plan-f.a{background:#F1EEEA}
.dm-plan-f.b{background:#fff;transform:rotateY(180deg)}
.v9 .dm-plan-k{margin:0;font-weight:700;font-size:12px;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:#4f5565}
.v9 .dm-plan-t{margin:0;padding:0 0 16px;border-bottom:1px solid #C2C5CC;font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.01em;color:#232834}
.dm-plan-bars{display:grid;gap:16px;padding:6px 0 0}
.dm-plan-bars i{display:block;height:12px;border-radius:6px;background:#C2C5CC}
.dm-plan-bars i:nth-child(1){width:78%}.dm-plan-bars i:nth-child(2){width:92%}.dm-plan-bars i:nth-child(3){width:64%}.dm-plan-bars i:nth-child(4){width:86%}.dm-plan-bars i:nth-child(5){width:52%}
.dm-plan-rows{display:grid;margin:0;padding:0;list-style:none}
.v9 .dm-plan-rows li{display:flex;align-items:center;gap:12px;box-sizing:border-box;min-height:56px;margin:0;padding:8px 14px;border:1.75px solid transparent;border-top-color:#E4DFD9;border-radius:0;font-weight:500;font-size:17px;line-height:1.35;color:#232834}
.v9 .dm-plan-rows li:first-child{border-top-color:transparent}
.dm-plan-rows li::before{content:"";flex:none;box-sizing:border-box;width:20px;height:20px;border:1.75px dashed #8E939E;border-radius:50%}
.v9 .dm-plan-tag{margin-left:auto;font-weight:700;font-size:15px;line-height:1.3;color:#d33d5c;white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
.dm-plan-card{transition:transform 1.1s cubic-bezier(.65,0,.35,1) .9s}
.dm-plan:not(.in) .dm-plan-card{transform:none}
.dm-plan.in .dm-plan-card{transform:rotateY(180deg)}
.v9 .dm-plan-rows li.key{transition:border-color .5s cubic-bezier(.65,0,.35,1) 2.2s,border-radius .5s cubic-bezier(.65,0,.35,1) 2.2s}
.dm-plan-tag{transition:opacity .5s cubic-bezier(.65,0,.35,1) 2.4s}
.dm-plan:not(.in) .dm-plan-tag{opacity:0}
}
@media (prefers-reduced-motion:reduce){.dm-plan-card{transform:rotateY(180deg)}}
.dm-plan.in .dm-plan-rows li.key{border-color:#FA5478;border-radius:14px}
.dm-plan.in .dm-plan-rows li.key + li{border-top-color:transparent}
@media (prefers-reduced-motion:reduce){.v9 .dm-plan-rows li.key{border-color:#FA5478;border-radius:14px}.v9 .dm-plan-rows li.key + li{border-top-color:transparent}}
@media (max-width:1023px){.dm-prob-grid{grid-template-columns:minmax(0,1fr)}.dm-plan-card{margin:0}}
@media (max-width:560px){.dm-plan-f{padding:20px 18px 20px}}

/* ---------- What a discovery answers (#discovery): the page's one bone band and its one interaction. The questions as a list, each
   with its icon and hover Lottie (tools/dm-icons-scene.js); beside them, one page of the discovery for the hero's idea, a row per
   question, still blank (grey bars). Choosing a question, by pointing, focus or tap, writes its example answer into its row, where
   it stays, so the page fills as the reader goes; the chosen row warms (blush, a coral edge: the view's one coral part) and the
   chosen question comes forward as a white panel. Only colors and opacity change: each row holds both its bars and its answer in
   one grid cell, so nothing below moves. The first is chosen on load. Every question's text is in the list, so the section reads
   fully without choosing. Up to 1023px the page sits above the questions (two across to 761px); up to 560px the page goes and
   each question shows its own example beneath it. The links are 19px, large text, so #d33d5c holds 3:1 on bone ---------- */
.dm-disc-head{max-width:720px;margin:0 0 48px}
.dm-disc-head .v9-h2{margin:0 0 16px;text-wrap:balance}
.v9 .dm-disc-sub{margin:0;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.dm-disc-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:40px 64px;align-items:start;margin:0 0 44px}
.dm-q{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.v9 .dm-q-i{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:20px;align-content:start;box-sizing:border-box;margin:0;padding:18px 22px 20px;border:1.75px solid transparent;border-radius:18px;--d:0s;transition:background-color .3s cubic-bezier(.65,0,.35,1),border-color .3s cubic-bezier(.65,0,.35,1)}
.v9 .dm-q-i:nth-child(2){--d:.05s}.v9 .dm-q-i:nth-child(3){--d:.1s}.v9 .dm-q-i:nth-child(4){--d:.15s}.v9 .dm-q-i:nth-child(5){--d:.2s}.v9 .dm-q-i:nth-child(6){--d:.25s}
.v9 .dm-q-i.on{background:#fff;border-color:#232834}
@media (hover:hover){.v9 .dm-q-i:not(.on):hover{background:rgba(255,255,255,.5)}}
.dm-q-i .cb-ic-box{grid-row:1/4;width:64px;height:64px;margin:-4px 0 0 -4px}
.v9 .dm-q-h{grid-column:2;margin:0 0 6px;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.01em;color:#232834;text-wrap:balance}
.v9 .dm-q-b{display:inline;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;letter-spacing:inherit;text-align:left;cursor:pointer;outline:0;-webkit-tap-highlight-color:transparent}
.dm-q-b::after{content:"";position:absolute;inset:0;border-radius:18px}
.v9 .dm-q-i:has(.dm-q-b:focus-visible){outline:2px solid #232834;outline-offset:3px}
.v9 .dm-q-p{grid-column:2;margin:0;font-weight:500;font-size:17px;line-height:1.55;color:#4f5565;text-wrap:pretty}
.v9 .dm-q-ex{display:none}
.dm-file{margin:0}
.dm-file-card{box-sizing:border-box;padding:24px 26px 14px;border:1.75px solid #232834;border-radius:20px;background:#fff;pointer-events:none;-webkit-user-select:none;user-select:none}
.v9 .dm-file-k{margin:0 0 8px;font-weight:700;font-size:12px;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:#4f5565}
.v9 .dm-file-t{margin:0;padding:0 0 16px;border-bottom:1px solid #C2C5CC;font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.01em;color:#232834}
.dm-file-rows{display:grid;margin:0;padding:10px 0 0;list-style:none}
.v9 .dm-file-r{display:grid;gap:6px;margin:0 -14px;padding:12px 14px 14px;border:1.75px solid transparent;border-radius:14px;transition:background-color .35s cubic-bezier(.65,0,.35,1),border-color .35s cubic-bezier(.65,0,.35,1)}
.v9 .dm-file-r.on{background:#FDE0E6;border-color:#FA5478}
.v9 .dm-file-l{display:block;font-weight:700;font-size:14px;line-height:1.4;color:#4f5565}
.dm-file-a{display:grid}
.dm-file-a > span{grid-area:1/1}
.dm-file-bars{display:grid;align-content:start;gap:10px;padding:6px 0 0;transition:opacity .3s cubic-bezier(.65,0,.35,1)}
.dm-file-bars i{display:block;height:10px;border-radius:5px;background:#C2C5CC}
.dm-file-bars i:first-child{width:92%}.dm-file-bars i:last-child{width:56%}
.v9 .dm-file-r:nth-child(even) .dm-file-bars i:first-child{width:84%}.v9 .dm-file-r:nth-child(even) .dm-file-bars i:last-child{width:64%}
.v9 .dm-file-x{display:block;font-weight:500;font-size:16px;line-height:1.45;color:#232834;visibility:hidden;opacity:0;transition:opacity .4s cubic-bezier(.65,0,.35,1),visibility 0s linear .4s}
.v9 .dm-file-r.fill .dm-file-x{visibility:visible;opacity:1;transition:opacity .4s cubic-bezier(.65,0,.35,1) .1s}
.dm-file-r.fill .dm-file-bars{opacity:0}
.dm-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.dm-more{display:grid;margin:0;padding:24px 0 0;border-top:1px solid #C2C5CC;list-style:none}
.v9 .dm-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 .dm-more a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:19px;color:#d33d5c;text-decoration:none;text-underline-offset:5px;text-decoration-thickness:1.5px}
.v9 .dm-more a:hover,.v9 .dm-more a:focus-visible{color:#d33d5c;text-decoration:underline}
.v9 .dm-more a:focus-visible{outline:2px solid #232834;outline-offset:2px;border-radius:2px}
@media (prefers-reduced-motion:reduce){.v9 .dm-q-i,.v9 .dm-file-r,.dm-file-bars,.v9 .dm-file-x,.v9 .dm-file-r.fill .dm-file-x{transition:none}}
@media (max-width:1023px){.dm-disc-grid{grid-template-columns:minmax(0,1fr)}.dm-file{order:-1;max-width:640px}.dm-q{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.dm-q{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
.dm-disc-head{margin-bottom:28px}
.dm-file{display:none}
.dm-q{gap:0}
.v9 .dm-q-i,.v9 .dm-q-i.on{grid-template-columns:48px minmax(0,1fr);column-gap:16px;padding:18px 0 20px;background:none;border:0;border-top:1px solid #C2C5CC;border-radius:0}
.dm-q-i .cb-ic-box{width:48px;height:48px;margin:-2px 0 0 -2px}
.dm-q-b::after{display:none}
.v9 .dm-q-i:has(.dm-q-b:focus-visible){outline-offset:0}
.v9 .dm-q-ex{display:block;grid-column:2;margin:12px 0 0;padding:12px 14px 14px;border-radius:12px;background:#fff;font-weight:500;font-size:16px;line-height:1.5;color:#232834}
.v9 .dm-q-ex span{display:block;margin:0 0 4px;font-weight:700;font-size:12px;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:#4f5565}
.dm-disc-grid{margin-bottom:32px}
}

/* ---------- What you have at the end of it (#outputs): the drawing first, then the copy (copy first below 1024px). One bone card for
   the hero's idea, ready for the client's decision: its name, the tag "Ready to decide" (blush, a dark-coral edge, ink type: the
   view's one coral part) and, under "Attached", the outputs as files, each a white row with a small page. As the card comes into
   view the files settle in one after another (4px, once) and the tag follows; with reduced motion all of it shows at once. Not a
   checklist (no ticks), and not Legacy Modernization's folder handed over at the end: a decision with its evidence attached ---------- */
.dm-out{border-top:1px solid #E4DFD9}
.dm-out-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 80px;align-items:center}
.dm-out-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .dm-out-copy p{margin:0;max-width:560px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.dm-dec{margin:0}
.dm-dec-card{display:grid;max-width:500px;padding:22px 22px 24px;border:1.75px solid #232834;border-radius:20px;background:#F1EEEA;pointer-events:none;-webkit-user-select:none;user-select:none}
.dm-dec-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:0 0 18px;margin:0 0 16px;border-bottom:1px solid #C2C5CC}
.v9 .dm-dec-t{margin:0;font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.01em;color:#232834}
.v9 .dm-dec-tag{display:inline-flex;align-items:center;box-sizing:border-box;min-height:36px;padding:6px 14px;border:1.75px solid #C43A5C;border-radius:18px;background:#FDE0E6;font-weight:700;font-size:15px;line-height:1.3;color:#232834}
.v9 .dm-dec-k{margin:0 0 10px;font-weight:700;font-size:12px;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:#4f5565}
.dm-dec-files{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.v9 .dm-dec-files li{display:flex;align-items:center;gap:14px;box-sizing:border-box;min-height:56px;margin:0;padding:10px 16px;border:1.75px solid #232834;border-radius:14px;background:#fff;font-weight:500;font-size:17px;line-height:1.35;color:#232834}
.dm-dec-f{position:relative;flex:none;box-sizing:border-box;width:22px;height:28px;border:1.75px solid #232834;border-radius:4px;background:#F1EEEA}
.dm-dec-f::before{content:"";position:absolute;left:4px;top:7px;width:10px;height:3px;border-radius:2px;background:#C2C5CC;box-shadow:0 6px 0 #C2C5CC,0 12px 0 #C2C5CC}
@media (prefers-reduced-motion:no-preference){
.dm-dec-files li{transition:opacity .5s cubic-bezier(.65,0,.35,1),transform .5s cubic-bezier(.65,0,.35,1)}
.dm-dec:not(.in) .dm-dec-files li{opacity:0;transform:translateY(4px)}
.dm-dec-files li:nth-child(1){transition-delay:.6s}.dm-dec-files li:nth-child(2){transition-delay:.75s}.dm-dec-files li:nth-child(3){transition-delay:.9s}.dm-dec-files li:nth-child(4){transition-delay:1.05s}.dm-dec-files li:nth-child(5){transition-delay:1.2s}
.v9 .dm-dec-tag{transition:opacity .5s cubic-bezier(.65,0,.35,1) 1.65s}
.dm-dec:not(.in) .dm-dec-tag{opacity:0}
}
@media (max-width:1023px){.dm-out-grid{grid-template-columns:minmax(0,1fr)}.dm-out-copy{order:-1}}
@media (max-width:560px){.dm-dec-card{padding:18px 16px 18px}.v9 .dm-dec-files li{gap:12px;padding:10px 14px}}

/* ---------- A first release, built to keep (#first-release): the copy beside a vertical slice. The product's layers run across as
   wide bone bands with a dashed tint edge (the whole product, not built yet): Screens, Sign-in, Data, Tests and monitoring. One
   narrow column cuts down through every band and is built in each, in blush with a dark-coral edge: the first release, the view's
   one coral part, under its plain ink label. Static. Not Web & App Development's product pinned on its layers, nor Mobile Apps'
   stacks per approach: one thin slice through all of them. Copy first; side by side from 1024px ---------- */
.dm-rel{border-top:1px solid #E4DFD9}
.dm-rel-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px 80px;align-items:center}
.dm-rel-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .dm-rel-copy p{margin:0;max-width:560px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .dm-rel-copy .dm-rel-more{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;margin-top:18px;font-size:17px;line-height:1.4}
.v9 .dm-rel-more a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:#d33d5c;text-decoration:none;text-underline-offset:5px;text-decoration-thickness:1.5px}
.v9 .dm-rel-more a:hover,.v9 .dm-rel-more a:focus-visible{color:#d33d5c;text-decoration:underline}
.v9 .dm-rel-more a:focus-visible{outline:2px solid #232834;outline-offset:2px;border-radius:2px}
.dm-slice{display:grid;gap:16px;max-width:540px;margin:0 0 0 auto}
.dm-slice-art{--sc:112px;--sr:56px;display:grid;gap:12px;pointer-events:none;-webkit-user-select:none;user-select:none}
.dm-slice-hd,.dm-band{display:grid;grid-template-columns:minmax(0,1fr) var(--sc) var(--sr);align-items:center}
.dm-slice-hd{padding:0 0 2px}
.v9 .dm-slice-tag{grid-column:2;justify-self:center;font-weight:700;font-size:16px;line-height:1.3;color:#232834;text-align:center;white-space:nowrap}
.dm-band{box-sizing:border-box;min-height:66px;padding:8px 0;border:1.75px dashed #C2C5CC;border-radius:14px;background:#F1EEEA}
.v9 .dm-band-n{padding:0 14px 0 18px;font-weight:500;font-size:16px;line-height:1.35;color:#4f5565;text-wrap:balance}
.dm-band-c{grid-column:2;align-self:stretch;box-sizing:border-box;min-height:46px;border:1.75px solid #C43A5C;border-radius:10px;background:#FDE0E6}
.v9 .dm-slice-k{margin:0;font-weight:500;font-size:16px;line-height:1.45;color:#4f5565;text-wrap:balance}
@media (max-width:1023px){.dm-rel-grid{grid-template-columns:minmax(0,1fr)}.dm-slice{margin:0}}
@media (max-width:560px){.dm-slice-art{--sc:76px;--sr:22px}.v9 .dm-band-n{padding:0 10px 0 14px}.v9 .dm-slice-tag{font-size:15px;white-space:normal}}

/* ---------- Not a prototype, not the whole product (#difference): the heading and its paragraph, then three plain columns set as
   type, no cards: Prototype, First release, Whole product, each its name set large and one line on what it's for. One rule runs
   across their tops; its middle third is coral, and the middle name is #d33d5c, the view's one coral part: the first release sits
   between the other two. Static. Up to 1023px the columns stack, each under its own rule (narrower, "First release" and
   "Whole product" would leave one word on a second line: measured to about 1010px) ---------- */
.dm-dif{border-top:1px solid #E4DFD9}
.dm-dif-head{max-width:760px;margin:0 0 56px}
.dm-dif-head .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .dm-dif-head p{margin:0;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.dm-dif-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none}
.v9 .dm-dif-cols li{position:relative;margin:0;padding:30px 36px 0 0;border-top:1.75px solid #C2C5CC}
.v9 .dm-dif-cols li + li{padding-left:36px}
.v9 .dm-dif-cols li.mid{border-top-color:transparent}
.v9 .dm-dif-cols li.mid::before{content:"";position:absolute;left:0;right:0;top:-2.875px;height:4px;border-radius:2px;background:#FA5478}
.v9 .dm-dif-t{margin:0 0 12px;font-weight:700;font-size:34px;line-height:1.15;letter-spacing:-.025em;color:#4f5565;text-wrap:balance}
.v9 .dm-dif-cols li.mid .dm-dif-t{color:#d33d5c}
.v9 .dm-dif-p{margin:0;max-width:300px;font-weight:500;font-size:18px;line-height:1.55;color:#4f5565;text-wrap:pretty}
.v9 .dm-dif-cols li.mid .dm-dif-p{color:#232834}
@media (max-width:1023px){
.dm-dif-cols{grid-template-columns:minmax(0,1fr);row-gap:32px}
.v9 .dm-dif-cols li,.v9 .dm-dif-cols li + li{padding:24px 0 0}
.dm-dif-head{margin-bottom:40px}
}

/* ---------- Questions worth asking (#questions): run-in, as on a printed page. Each question, in bold ink, opens its own paragraph
   and its answer runs on after it on the same line; the question stays a heading (h3) for screen readers, set inline. Two text
   columns from 1024px, one below. Every answer is in the page's text, no accordion. Not Support & Maintenance's reading column,
   QA's centered column, Application Security's rows, MCP's cards or AI-Assisted Engineering's answer first ---------- */
.dm-qa{border-top:1px solid #E4DFD9}
.v9 .dm-qa-h{margin:0 0 40px;text-wrap:balance}
.dm-qa-cols{columns:2;column-gap:80px}
.dm-qa-i{break-inside:avoid;margin:0 0 30px;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.dm-qa-i:last-child{margin-bottom:0}
.v9 .dm-qa-q{display:inline;margin:0;font-weight:700;font-size:20px;line-height:1.5;letter-spacing:-.01em;color:#232834}
.v9 .dm-qa-a{display:inline;margin:0;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565}
@media (max-width:1023px){.dm-qa-cols{columns:1;max-width:720px}}


/* ================= THE PHONE TYPE SCALE: written October 10, 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 .dm-go,.ai-clients-head .v9-sub,.dm-clients-head .v9-sub,.v9 .dm-prob-copy p,.v9 .dm-plan-rows li,.v9 .dm-disc-sub,.v9 .dm-q-p,.v9 .dm-more li,.v9 .dm-out-copy p,.v9 .dm-dec-files li,.v9 .dm-rel-copy p,.v9 .dm-rel-copy .dm-rel-more,.v9 .dm-dif-head p,.v9 .dm-dif-p,.dm-qa-i,.v9 .dm-qa-a{font-size:16px}
.v9-hero h1{font-size:min(34px,clamp(40px,4.6vw,64px));line-height:1.12}
.v9-hero .v9-lead{font-size:17px}
/* by hand: the discovery links stay 19px bold on phones, large text, so #d33d5c keeps 3:1 on bone (17px would need 4.5:1) */
.v9-hero.dm-hero h1.dm-h-a{font-size:min(34px,min(56px,calc((100vw - 44px) / 7.89)));line-height:1.12}
.v9-hero.dm-hero h1.dm-h-c{font-size:min(34px,min(56px,calc((100vw - 44px) / 9.36)));line-height:1.12}
.v9-hero.dm-hero h1.dm-h-d{font-size:min(34px,min(56px,calc((100vw - 44px) / 8.88)));line-height:1.12}
.v9-hero.dm-hero h1.dm-h-e{font-size:min(34px,min(56px,calc((100vw - 44px) / 8.82)));line-height:1.12}
.v9 .dm-plan-t,.v9 .dm-file-t,.v9 .dm-dec-t{font-size:20px}
.v9 .dm-q-h,.v9 .dm-qa-q{font-size:18px}
.v9 .dm-dif-t{font-size:26px;line-height:1.18}
/* B by hand: the tool reads 390px, where B's formula is 33px, but from 401px to 560px it would run past 34px */
.v9-hero.dm-hero h1.dm-h-b{font-size:min(34px,min(56px,calc((100vw - 44px) / 10.47)));line-height:1.12}
}