/* Technical Due Diligence, 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, with wd- as
   tdd-. The hero, the pause controls and the audit fixes follow Accessibility (page-accessibility.css). Everything here
   scopes to .v9 or body.v9-page. Page-specific rules (tdd-*) follow the shared ones. */
@font-face{font-family:'Sailec';src:url('assets/fonts/type_dynamic_-_sailec-webfont.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Sailec';src:url('assets/fonts/type_dynamic_-_sailec_medium-webfont.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Sailec';src:url('assets/fonts/type_dynamic_-_sailec_bold-webfont.woff2') format('woff2');font-weight:700;font-display:swap}

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


/* ================= TECHNICAL DUE DILIGENCE (this page's own) ================= */

/* ---------- this page's hero, as on Accessibility: the eyebrow, then a headline that holds two lines at every width, its
   second line the marked phrase. Each option is sized from its longer line, measured in Sailec Bold at -.03em on the woff2
   itself (November 10, 2026): A "Know the software" 8.66em ("before you decide" 8.37em), B "the way engineers do" 9.80em
   ("See the software" 7.76em), C "for the decision ahead" 10.20em ("Engineering facts" 8.06em). 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, the longer line stays under 500px: A from 48px to 56px (485px at most), B from 44px to 50px (490px), C from 42px to
   48px (490px). 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.tdd-hero .v9-eyebrow{line-height:1.48}
.v9-hero.tdd-hero .v9-lead :is(b,strong){line-height:1}
.v9-hero.tdd-hero h1.tdd-h-a{font-size:min(56px,calc((100vw - 44px) / 9.47))}
.v9-hero.tdd-hero h1.tdd-h-b{font-size:min(56px,calc((100vw - 44px) / 10.72))}
.v9-hero.tdd-hero h1.tdd-h-c{font-size:min(56px,calc((100vw - 44px) / 11.16))}
@media (min-width:821px){.v9.tdd-hero .em-talk .v9-hero-form{grid-template-columns:262px auto}}
@media (min-width:561px) and (max-width:820px){.v9.tdd-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:561px){.v9.tdd-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{width:172px;padding:0}}
@media (max-width:560px){.v9-hero.tdd-hero .v9-lead{font-size:17px}}
@media (min-width:1101px){
.v9-hero.tdd-hero .v9-hero-grid{grid-template-columns:minmax(560px,5.4fr) minmax(0,6.6fr);gap:48px}
.v9-hero.tdd-hero h1.tdd-h-a{font-size:clamp(48px,4.2vw,56px)}
.v9-hero.tdd-hero h1.tdd-h-b{font-size:clamp(44px,3.8vw,50px)}
.v9-hero.tdd-hero h1.tdd-h-c{font-size:clamp(42px,3.65vw,48px)}
.v9-hero.tdd-hero .v9-lead{max-width:520px}
/* the drawing is enlarged a little into the page margin, not into the column gap */
.tdd-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, traced, then written). Up to 1100px it sits below
   the form; at 560px and below it runs to the window's edges and shows the phone version (1100 x 1240): the tablet larger, the
   titles above it, the hand under its right half */
.tdd-hero .v9-illo{aspect-ratio:1600/1320}
@media (max-width:560px){.tdd-hero .v9-illo{width:calc(100% + 44px);max-width:none;margin:0 -22px;aspect-ratio:1100/1240}}
/* the hero's pause control (WCAG's "Pause, Stop, Hide"): the loop runs for as long as the hero is on screen, so a real button at
   the drawing's top right corner, where the drawing is empty, stops it on the frame it shows, or lets it carry on. Named "Pause
   animation" / "Play animation", its change announced. Only the drawing itself is hidden from screen readers, so the button
   and its announcement are not. Not shown with reduced motion (the still frame) */
.v9 .tdd-hero-ctl{position:absolute;top:0;right:0;z-index:1;pointer-events:auto}
@media (max-width:560px){.v9 .tdd-hero-ctl{right:22px}}
@media (prefers-reduced-motion:reduce){.v9 .tdd-hero-ctl{display:none}}
/* the landing view: on desktop the hero's top space follows the window's height, so the headline, form and drawing take the
   middle of the first view and the client wall still shows below */
.v9-hero.tdd-hero{padding:40px 0 64px}
@media (min-width:1101px){.v9-hero.tdd-hero{padding:clamp(32px,7vh,84px) 0 72px}}
@media (max-width:560px){.v9-hero.tdd-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 kept at 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 ---------- */
.tdd-cta .v9-h2{text-wrap:balance}
.tdd-cta .v9-sub{text-wrap:pretty}

/* ---------- the client wall's pause control (WCAG's "Pause, Stop, Hide"), as on Accessibility: a real button under the wall's
   lower right corner. 44px, named for what it does ("Pause logos", "Play logos"), its change announced, a visible focus ring.
   The choice isn't stored. With reduced motion the wall stays still, so the button isn't shown. Its row is there from the
   first paint, so nothing moves when the script starts ---------- */
.tdd-wall-ctl{display:flex;justify-content:flex-end;margin-top:12px}
.v9 .tdd-pause{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border:1.5px solid #232834;border-radius:50%;background:#fff;color:#232834;font:inherit;cursor:pointer;transition:background-color .2s cubic-bezier(.65,0,.35,1)}
.v9 .tdd-pause svg{width:14px;height:14px;fill:currentColor;stroke:none}
.v9 .tdd-pause .pl{display:none}
.v9 .tdd-pause.is-paused .pa{display:none}
.v9 .tdd-pause.is-paused .pl{display:block}
@media (hover:hover){.v9 .tdd-pause:hover{background:#F1EEEA}}
.v9 .tdd-pause:focus-visible{outline:2px solid #232834;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.tdd-wall-ctl{display:none}.v9 .tdd-pause{transition:none}}
/* text for screen readers only */
.tdd-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- Accessibility's own audit fixes (October 10, 2026), as that page carries them ---------- */
/* the focus rings the header logo and the footer's Cookie Preferences were missing */
body.v9-page .header-wide.wb-hd .header .logo:focus-visible{outline:2px solid #232834;outline-offset:3px;border-radius:4px}
body.v9-page .wb-ft .wb-ft-cc:focus-visible{outline:2px solid #F1EEEA;outline-offset:3px;border-radius:3px}
/* the footer's links: 44px tap areas on touch widths, from an invisible band above and below, so nothing moves */
@media (max-width:1024px){body.v9-page .wb-ft .wb-ft-cols a,body.v9-page .wb-ft .wb-ft-bar a,body.v9-page .wb-ft .wb-ft-bar .wb-ft-cc{position:relative}body.v9-page .wb-ft .wb-ft-cols a::after,body.v9-page .wb-ft .wb-ft-bar a::after,body.v9-page .wb-ft .wb-ft-bar .wb-ft-cc::after{content:"";position:absolute;left:0;right:0;top:-10.5px;bottom:-10.5px}}
/* the thank-you takes focus when it replaces the form, so it's read out; it isn't a control, so it shows no ring */
.em-talk-done:focus{outline:none}

/* ---------- shared marks in this page's drawings and table: an ink tick, an ink dash, and the coral ring that marks the one thing
   that matters in a view (#C43A5C edge on white, 5.1:1) ---------- */
.tdd-mk{position:relative;display:inline-block;flex:none;width:16px;height:16px;margin-right:10px;vertical-align:-2px}
.tdd-mk.tick::before{content:"";position:absolute;left:3px;top:1px;width:5px;height:10px;border:solid #232834;border-width:0 2px 2px 0;transform:rotate(45deg)}
.tdd-mk.dash::before{content:"";position:absolute;left:2px;right:2px;top:7px;height:2px;border-radius:1px;background:#232834}
.tdd-mk.ring::before{content:"";position:absolute;inset:1px;border:2px solid #C43A5C;border-radius:50%;background:#FA5478}
/* text links inside running text: #d33d5c, underlined at all times (WCAG's "Use of Color"), a 44px tap band on touch widths */
.v9 a.tdd-in{font-weight:700;white-space:nowrap;color:#d33d5c;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.v9 a.tdd-in:hover{color:#d33d5c}
.v9 a.tdd-in:focus-visible{outline:2px solid #232834;outline-offset:2px;border-radius:2px}
.v9 a.tdd-in{position:relative}.v9 a.tdd-in::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;margin-top:-22px}

/* ---------- A decision that rests on software (#problem): the copy beside one still device from its words, "Same screen,
   different software": two plain product screens, identical, side by side, and under each three short lines. The first with ink
   ticks, the second with ink dashes, its "Known by one person" carrying the view's one coral mark. Static. Side by side from
   641px, stacked below; beside the copy from 1101px ---------- */
.tdd-prob{border-top:1px solid #E4DFD9}
.tdd-prob-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px 72px;align-items:center}
.tdd-prob-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .tdd-prob-copy p{margin:0 0 16px;max-width:560px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .tdd-prob-copy p:last-child{margin-bottom:0}
.tdd-same{margin:0}
.v9 .tdd-same-cap{margin:0 0 18px;font-weight:700;font-size:13px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:#4f5565}
.tdd-same-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.tdd-scr{position:relative;display:grid;gap:9px;padding:16px 16px 18px;border:1.75px solid #232834;border-radius:16px;background:#fff;box-shadow:5px 5px 0 #E4DFD9;aspect-ratio:4/3;align-content:start}
.tdd-scr>span{display:block;border-radius:6px;background:#E4DFD9}
.tdd-scr .tdd-scr-bar{height:10px;width:42%;background:#C2C5CC}
.tdd-scr .tdd-scr-t{height:14px;width:64%;margin-top:6px;background:#232834;opacity:.85}
.tdd-scr .tdd-scr-r{height:20px;border:1.5px solid #C2C5CC;background:#fff}
.tdd-scr .tdd-scr-r.s{width:70%}
.tdd-scr .tdd-scr-b{position:absolute;right:16px;bottom:16px;width:30%;height:22px;border-radius:11px;background:#232834}
.tdd-same-l{display:grid;gap:10px;margin:20px 0 0;padding:0;list-style:none}
.v9 .tdd-same-l li{display:flex;align-items:center;margin:0;font-weight:500;font-size:16px;line-height:1.4;color:#232834}
.v9 .tdd-same-l li.hot{align-self:start;justify-self:start;padding:4px 12px 4px 8px;margin-left:-8px;border:2px solid #C43A5C;border-radius:16px;background:#FDE0E6}
@media (max-width:1100px){.tdd-prob-grid{grid-template-columns:minmax(0,1fr)}.tdd-same{max-width:640px}}
@media (max-width:640px){.tdd-same-pair{grid-template-columns:minmax(0,1fr);gap:32px}.tdd-scr{max-width:360px;aspect-ratio:16/10}}

/* ---------- What we review (#scope): nine items in three rows of three, each with its icon and hover Lottie, then the three hand-off
   lines. Two across up to 1100px, one on phones ---------- */
.tdd-scope{border-top:1px solid #E4DFD9}
.tdd-sc-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px;margin:0;padding:0;list-style:none}
.v9 .tdd-sc-i{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:14px;align-items:center;align-content:start;margin:0;padding:30px 0 40px;min-width:0}
.tdd-sc-i::before{content:"";position:absolute;top:0;left:0;right:-48px;height:1px;background:#C2C5CC}
.tdd-sc-i:nth-child(3n)::before,.tdd-sc-i:last-child::before{right:0}
.tdd-sc-i .cb-ic-box{grid-row:auto;width:64px;height:64px;margin:0 -4px 0 -6px}
.v9 .tdd-sc-i h3{margin:0;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.01em;color:#232834;text-wrap:balance}
.v9 .tdd-sc-i p{grid-column:1/-1;max-width:40ch;margin:0;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.tdd-more{display:grid;gap:4px;margin-top:8px}
.v9 .tdd-more p{margin:0;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565}
@media (max-width:1100px){.tdd-sc-list{grid-template-columns:repeat(2,minmax(0,1fr))}.tdd-sc-i:nth-child(3n)::before{right:-48px}.tdd-sc-i:nth-child(2n)::before,.tdd-sc-i:last-child::before{right:0}}
@media (max-width:640px){.tdd-sc-list{grid-template-columns:minmax(0,1fr)}.tdd-sc-i::before,.tdd-sc-i:nth-child(3n)::before{right:0}.v9 .tdd-sc-i{padding:24px 0 30px}.tdd-sc-i .cb-ic-box{width:56px;height:56px;margin:0 -4px 0 -5px}}

/* ---------- Every finding points to its evidence (#report): the page's one bone band and its one interaction. The copy beside a
   sample report of our own, a white card: two numbered lists, findings and evidence, joined the way a report's footnotes are. Each
   finding ends in a real link to its evidence row and each evidence row in a real link back. Following one moves focus to the row it
   names and marks it: the row landed on takes a coral bar at its left edge (the view's one coral part), and the row it came from an
   ink one. Finding 2 and its evidence are marked from the first paint. Plain anchors, so it works without script (:target) too, until the script starts (.is-js). Each bar's color is carried in a
   custom property set on the row itself, so no rule styles a pseudo-element through :has(). The
   marks are drawn inside each row's own padding, so nothing changes size and nothing below moves. Under 1101px the copy sits above
   the card; under 761px the evidence list sits below the findings ---------- */
.tdd-rep-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:40px 64px;align-items:start}
.v9 .tdd-rep-copy p{margin:0 0 16px;max-width:520px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .tdd-rep-copy p:last-child{margin-bottom:0}
.tdd-nb{white-space:nowrap}
.v9 .tdd-rep-copy .tdd-rep-tm{margin:24px 0 0;padding-top:16px;border-top:1px solid #C2C5CC;font-size:16px;line-height:1.6;color:#4f5565}
.tdd-rp-card{padding:24px 24px 22px;border:1.75px solid #232834;border-radius:20px;background:#fff}
.tdd-rp-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding-bottom:16px;border-bottom:1px solid #E4DFD9}
.v9 .tdd-rp-title{margin:0;font-weight:700;font-size:20px;line-height:1.3;color:#232834}
.v9 .tdd-rp-tag{margin:0;padding:3px 12px;border:1.5px solid #232834;border-radius:14px;font-weight:700;font-size:13px;line-height:1.4;color:#232834}
.tdd-rp-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin-top:6px}
.v9 .tdd-rp-h{margin:16px 0 4px;font-family:inherit;font-weight:700;font-size:13px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:#4f5565}
.tdd-rp-list{margin:0;padding:0;list-style:none}
.v9 .tdd-rp-row{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;margin:0;padding:12px 10px 10px 14px;border-radius:12px;outline:none}
.tdd-rp-row::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:2px;background:var(--tdd-bar,transparent)}
.tdd-rp-row.is-on,.tdd-rp-card:not(.is-js) .tdd-rp-row:target{--tdd-bar:#C43A5C;background:#FDE0E6}
.tdd-rp-row.is-src{--tdd-bar:#232834}
.tdd-rp-card:not(.is-js):has(.tdd-rp-row:target) .tdd-rp-row.is-on:not(:target),.tdd-rp-card:not(.is-js):has(.tdd-rp-row:target) .tdd-rp-row.is-src:not(:target){--tdd-bar:transparent;background:transparent}
.tdd-rp-card:not(.is-js):has(#evidence-1:target) #finding-1,.tdd-rp-card:not(.is-js):has(#evidence-2:target) #finding-2,.tdd-rp-card:not(.is-js):has(#evidence-3:target) #finding-3,.tdd-rp-card:not(.is-js):has(#evidence-4:target) #finding-4,.tdd-rp-card:not(.is-js):has(#evidence-5:target) #finding-5,.tdd-rp-card:not(.is-js):has(#finding-1:target) #evidence-1,.tdd-rp-card:not(.is-js):has(#finding-2:target) #evidence-2,.tdd-rp-card:not(.is-js):has(#finding-3:target) #evidence-3,.tdd-rp-card:not(.is-js):has(#finding-4:target) #evidence-4,.tdd-rp-card:not(.is-js):has(#finding-5:target) #evidence-5{--tdd-bar:#232834}
.tdd-rp-row:focus-visible{box-shadow:0 0 0 2px #232834}
.tdd-rp-n{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#232834;color:#fff;font-weight:700;font-size:13px;line-height:1}
.tdd-rp-b{min-width:0}
.v9 .tdd-rp-t{margin:1px 0 0;font-weight:500;font-size:16px;line-height:1.5;color:#232834;text-wrap:pretty}
.v9 .tdd-rp-w{margin:6px 0 0;font-weight:500;font-size:15px;line-height:1.5;color:#4f5565}
.tdd-rp-k{font-weight:700;color:#232834}
.tdd-rp-how{font-weight:700}
.v9 a.tdd-rp-ln{display:inline-flex;align-items:center;min-height:44px;margin:2px 0 -6px;font-weight:700;font-size:15px;line-height:1.3;color:#d33d5c;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.v9 a.tdd-rp-ln:hover{color:#d33d5c}
.v9 a.tdd-rp-ln:focus-visible{outline:2px solid #232834;outline-offset:2px;border-radius:3px}
.tdd-rp-nr{margin-top:8px;padding-top:4px;border-top:1px solid #E4DFD9}
.tdd-rp-nr ul{display:grid;gap:4px;margin:6px 0 0;padding:0 0 0 14px;list-style:none}
.v9 .tdd-rp-nr li{margin:0;font-weight:500;font-size:15px;line-height:1.5;color:#4f5565}
.tdd-rp-key{display:grid;gap:6px;margin:18px 0 0}
.tdd-rp-key>div{display:flex;flex-wrap:wrap;gap:0 6px}
.v9 .tdd-rp-key dt{margin:0;font-weight:700;font-size:16px;line-height:1.5;color:#232834}
.v9 .tdd-rp-key dd{margin:0;font-weight:500;font-size:16px;line-height:1.5;color:#4f5565}
@media (max-width:1100px){.tdd-rep-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.tdd-rp-cols{grid-template-columns:minmax(0,1fr)}.tdd-rp-card{padding:20px 16px 18px}.v9 a.tdd-rp-ln{min-height:48px}}
@media (max-width:560px){.v9 .tdd-rp-w,.v9 a.tdd-rp-ln,.v9 .tdd-rp-nr li{font-size:16px}}

/* ---------- What we ask for, and how it's handled (#access): the copy beside a real table, always shown: what we ask for, what it's
   for, how it's handled. Ink ticks for each request, and the last row, "Customer records", not needed, carries the view's one coral
   mark. On phones each row stacks, its three parts labeled; the table keeps its roles, so a screen reader still reads its headers ---------- */
.tdd-acc{border-top:1px solid #E4DFD9}
.tdd-acc-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:40px 64px;align-items:start}
.tdd-acc-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .tdd-acc-copy p{margin:0;max-width:520px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.tdd-acc-t{width:100%;border-collapse:collapse;table-layout:fixed}
.tdd-acc-t th,.tdd-acc-t td{padding:16px 16px 16px 0;border-bottom:1px solid #E4DFD9;text-align:left;vertical-align:top;font-size:16px;line-height:1.5}
.tdd-acc-t thead th{padding-top:0;border-bottom:1.5px solid #232834;font-weight:700;font-size:13px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:#4f5565}
.tdd-acc-t tbody th{position:relative;padding-left:26px;font-weight:700;color:#232834}
.tdd-acc-t tbody th .tdd-mk{position:absolute;left:0;top:20px;margin:0}
.tdd-acc-t td{font-weight:500;color:#4f5565}
.tdd-acc-t thead th:first-child{width:34%}
.tdd-acc-t tr.hot th{color:#232834}
.tdd-acc-t tr.hot td:nth-child(2){font-weight:700;color:#232834}
.tdd-acc-l{display:none}
@media (max-width:1100px){.tdd-acc-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
.tdd-acc-t,.tdd-acc-t tbody,.tdd-acc-t tr,.tdd-acc-t th,.tdd-acc-t td{display:block;width:auto}
.tdd-acc-t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
.tdd-acc-t tbody tr{padding:16px 0 14px;border-bottom:1px solid #E4DFD9}
.tdd-acc-t tbody th,.tdd-acc-t td{padding:0;border:0}
.tdd-acc-t tbody th{padding-left:26px}
.tdd-acc-t tbody th .tdd-mk{top:4px}
.tdd-acc-t td{margin-top:8px}
.tdd-acc-l{display:block;margin-bottom:2px;font-weight:700;font-size:13px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:#4f5565}
}

/* ---------- Whichever side of the table you're on (#sides): one quiet still drawing from its words, a review folded in three and
   standing, each panel above one reader's block, the same grey lines on each and one coral rule running unbroken across all three
   folds: the same review, whichever side reads it. Then the three blocks, the line on independence and the hand-off. Not an index
   tab (Legacy Modernization's dividers) and not a table seen from above (Development for Optimizely CMS sites') ---------- */
.tdd-sides{border-top:1px solid #E4DFD9}
.tdd-sides-head{margin-bottom:28px}
.tdd-fold{margin:0 0 8px;aspect-ratio:1200/300;max-width:1100px}
.v9 .tdd-fold svg{display:block;width:100%;height:100%;stroke-linejoin:round;stroke-linecap:round}
.tdd-fold .sh{fill:#E4DFD9;stroke:none}
.tdd-fold .pw{fill:#fff;stroke:#232834;stroke-width:3}
.tdd-fold .ps{fill:#F1EEEA;stroke:#232834;stroke-width:3}
.tdd-fold .ln{fill:none;stroke:#C2C5CC;stroke-width:12}
.tdd-fold .cr{fill:none;stroke:#FA5478;stroke-width:12}
.tdd-sides-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 48px;max-width:1100px}
.v9 .tdd-side h3{margin:0 0 10px;font-weight:700;font-size:20px;line-height:1.3;color:#232834}
.v9 .tdd-side p{margin:0;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.tdd-sides-foot{display:grid;gap:6px;margin-top:36px;max-width:760px}
.v9 .tdd-sides-foot p{margin:0;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565}
.v9 .tdd-sides-foot p:first-child{font-weight:700;color:#232834}
@media (max-width:820px){.tdd-sides-grid{grid-template-columns:minmax(0,1fr)}.tdd-fold{max-width:560px}}

/* ---------- Start with the decision (#start): the copy and Pricing's line beside the scope on one page, static: its four lines
   filled, "Report by: the date we agree" the view's one coral part, and at its foot what only this page's copy says, agreed by you
   and, in a deal, by the other side. Not Pricing's proposal page (an empty page filled in turn, in its hero), a list of steps, a
   checklist, a timeline or the stack pages' Keep, Fix and Move ---------- */
.tdd-start{border-top:1px solid #E4DFD9}
.tdd-start-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 72px;align-items:center}
.tdd-start-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .tdd-start-copy p{margin:0;max-width:560px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .tdd-start-copy .tdd-go-alt{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin-top:14px;font-size:17px}
.v9 .tdd-go-alt .tdd-go{margin-top:0}
.tdd-scp{margin:0;justify-self:center;width:100%;max-width:420px}
.tdd-scp-page{position:relative;display:grid;gap:14px;padding:26px 26px 22px;border:1.75px solid #232834;border-radius:20px;background:#fff;box-shadow:6px 6px 0 #E4DFD9}
.v9 .tdd-scp-title{margin:0 0 4px;font-weight:700;font-size:20px;line-height:1.3;color:#232834}
.tdd-scp-row{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;align-items:baseline;padding-bottom:12px;border-bottom:1px solid #E4DFD9}
.tdd-scp-k{font-weight:700;font-size:14px;line-height:1.4;color:#232834}
.tdd-scp-v{display:grid;gap:8px}
.tdd-scp-v i{display:block;height:10px;border-radius:5px;background:#C2C5CC}
.tdd-scp-row.hot{border-bottom:0}
.tdd-scp-d{justify-self:start;padding:3px 12px;border:2px solid #C43A5C;border-radius:14px;background:#FDE0E6;font-weight:700;font-size:14px;line-height:1.4;color:#232834}
.tdd-scp-ok{display:grid;gap:8px;padding-top:12px;border-top:1.5px solid #232834}
.tdd-scp-ok>span{display:flex;align-items:center;font-weight:500;font-size:14px;line-height:1.4;color:#232834}
@media (max-width:1100px){.tdd-start-grid{grid-template-columns:minmax(0,1fr)}.tdd-scp{justify-self:start}}

/* ---------- Questions worth asking (#questions): as Accessibility's, the heading in the left column and the questions in the right,
   divided by hairlines, every answer in the page's text so find in page reaches it. One column below 1101px ---------- */
.tdd-q{border-top:1px solid #E4DFD9}
.tdd-q-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:24px 64px;align-items:start}
.tdd-q-head .v9-h2{margin:0;text-wrap:balance}
.tdd-q-i{padding:26px 0 28px;border-top:1px solid #E4DFD9}
.tdd-q-i:first-child{padding-top:0;border-top:0}
.v9 .tdd-q-h{margin:0 0 10px;font-weight:700;font-size:clamp(20px,1.9vw,26px);line-height:1.25;letter-spacing:-.015em;color:#232834;text-wrap:balance}
.v9 .tdd-q-a{margin:0;max-width:620px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
@media (max-width:1100px){.tdd-q-grid{grid-template-columns:minmax(0,1fr)}}

/* ================= PHONE TYPE SCALE (560px and down): tools/phone-type.js, context site-legacy.css, tags from the page's markup, November 10, 2026 ================= */
@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 .tdd-go,.ai-clients-head .v9-sub,.tdd-clients-head .v9-sub,.v9 .tdd-prob-copy p,.v9 .tdd-sc-i p,.v9 .tdd-more p,.v9 .tdd-rep-copy p,.v9 .tdd-acc-copy p,.v9 .tdd-side p,.v9 .tdd-sides-foot p,.v9 .tdd-start-copy p,.v9 .tdd-start-copy .tdd-go-alt,.v9 .tdd-q-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}
.v9-hero.tdd-hero h1.tdd-h-a{font-size:min(34px,min(56px,calc((100vw - 44px) / 9.47)));line-height:1.12}
.v9 .tdd-sc-i h3,.v9 .tdd-rp-title,.v9 .tdd-side h3,.v9 .tdd-scp-title,.v9 .tdd-q-h{font-size:18px}
}