/* Application Security, 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 (as-*) 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: once the page
   has a route and a tile in the menu, markMenu() marks them, in coral with the menu's own small dot (none yet) */
body.v9-page #wb_menu .rt[aria-current="page"] b,body.v9-page #wb_menu .tile[aria-current="page"] b{color:#FA5478}
body.v9-page #wb_menu .rt[aria-current="page"] b::after,body.v9-page #wb_menu .tile[aria-current="page"] b::after{content:'';display:inline-block;width:7px;height:7px;margin-left:12px;border-radius:50%;background:#FA5478;vertical-align:middle}

/* ---------- 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:0 0 0 4px rgba(250,84,120,.22)}
.v9-hero-go{flex:none;width:178px;height:48px;padding:0;border-radius:24px;font-family:inherit;font-size:16px}
@media (max-width:480px){.v9-hero-form{flex-wrap:wrap}.v9-hero-email,.v9-hero-go,.em-email{flex:1 1 100%;width:100%}}
.v9-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 */
.as-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{text-align:center}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

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

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

/* ---------- 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 */
.as-clients-head{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:44px;text-align:center}
.as-clients-head .v9-h2{margin:0;text-align:center;text-wrap:balance}
.as-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){.as-clients-head{margin-bottom:32px}}
@media (max-width:560px){.as-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)}
}


/* ================= APPLICATION SECURITY (this page's own) ================= */

/* ---------- this page's hero, as on Platform 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 (5 October 2026):
   A "Security that ships" 8.55em, B "release after release" 9.19em, C "fix it in the code" 7.29em, D "Security built into"
   8.19em, E "Security from the" 7.99em. Up to 1100px the size follows the viewport, so that line takes 92% of the column at
   most, 56px at the largest; from 1101px, where the copy column is 560px, A, C, D and E run from 52px to 58px and B from
   48px to 54px, which keeps the longer line within 496px (89% of the column). 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 ---------- */
.v9-hero.as-hero h1.as-h-a{font-size:min(56px,calc((100vw - 44px) / 9.3))}
.v9-hero.as-hero h1.as-h-b{font-size:min(56px,calc((100vw - 44px) / 10))}
.v9-hero.as-hero h1.as-h-c{font-size:min(56px,calc((100vw - 44px) / 7.95))}
.v9-hero.as-hero h1.as-h-d{font-size:min(56px,calc((100vw - 44px) / 8.9))}
.v9-hero.as-hero h1.as-h-e{font-size:min(56px,calc((100vw - 44px) / 8.7))}
@media (min-width:821px){.v9.as-hero .em-talk .v9-hero-form{grid-template-columns:262px auto}}
@media (min-width:561px) and (max-width:820px){.v9.as-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:561px){.v9.as-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{width:172px;padding:0}}
@media (max-width:560px){.v9-hero.as-hero .v9-lead{font-size:17px}}
@media (min-width:1101px){
.v9-hero.as-hero .v9-hero-grid{grid-template-columns:minmax(560px,5.4fr) minmax(0,6.6fr);gap:48px}
.v9-hero.as-hero h1.as-h-a,.v9-hero.as-hero h1.as-h-c,.v9-hero.as-hero h1.as-h-d,.v9-hero.as-hero h1.as-h-e{font-size:clamp(52px,4.4vw,58px)}
.v9-hero.as-hero h1.as-h-b{font-size:clamp(48px,4vw,54px)}
.v9-hero.as-hero .v9-lead{max-width:520px}
/* the drawing is enlarged a little into the page margin, not into the column gap */
.as-hero .v9-illo{width:106%;margin:0 -6% 0 0;transform:none}
}
/* the drawing's canvas is 1920 x 1200, and the box keeps that shape reserved from the first paint. On phones it sits below the
   form and runs to the window's edges (the canvas carries its own margin, so the change card and the note are never cropped),
   so the words in the drawing are as large as they can be */
.as-hero .v9-illo{aspect-ratio:1920/1200}
@media (max-width:560px){.as-hero .v9-illo{width:calc(100% + 44px);max-width:none;margin:0 -22px}}
/* the landing view, as on the sister pages: 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.as-hero{padding:40px 0 64px}
@media (min-width:1101px){.v9-hero.as-hero{padding:clamp(32px,7vh,84px) 0 72px}}
@media (max-width:560px){.v9-hero.as-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}

/* ---------- let's secure it better: the closing 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 ---------- */
.as-cta .v9-h2{text-wrap:balance}
.as-cta .v9-sub{text-wrap:pretty}

/* ---------- anchors: a section with an anchor stops 24px below the top of the window ---------- */
.v9-sec[id]{scroll-margin-top:24px}

/* ---------- found late, fixed slowly: the copy, and one quiet drawing from its words, built on top. A coral block at the base,
   Written, the problem as it was written; grey blocks above it, each a later change, white bars inside for their code. When the
   drawing is well in view the changes settle onto it one at a time (fading in from 8px above, no bounce), "Built on top" arrives
   beside them with a tint rule, and last of all the coral block, far below them now, is marked Found. It plays once and holds;
   with reduced motion it is shown done, which is also its still. Written is white on the coral block, as asked. Every block is in the layout from
   the first paint, so nothing moves. Side by side from 1024px, the drawing under the copy below that ---------- */
.as-prob{border-top:1px solid #E4DFD9}
.as-prob-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 88px;align-items:center}
.as-prob-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .as-prob-copy p{margin:0;max-width:600px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
@media (max-width:1023px){.as-prob-grid{grid-template-columns:minmax(0,1fr)}.as-stk{max-width:520px}}
.as-stk{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;margin:0}
.as-stk-col{grid-column:1;grid-row:1;display:grid;gap:6px}
.as-stk-b{display:flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-radius:12px;background:#F1EEEA;box-shadow:inset 0 0 0 1.5px #C2C5CC;opacity:0;transform:translateY(-8px);transition:opacity .5s cubic-bezier(.65,0,.35,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.as-stk-b i{display:block;flex:none;height:8px;border-radius:4px;background:#fff}
.as-stk-b i:first-child{width:34%}.as-stk-b i:last-child{width:18%}
.as-stk-b:nth-child(even) i:first-child{width:26%}.as-stk-b:nth-child(even) i:last-child{width:24%}
.as-stk-b:nth-child(1){width:80%;margin-left:10%;transition-delay:1.62s}
.as-stk-b:nth-child(2){width:90%;margin-left:3%;transition-delay:1.4s}
.as-stk-b:nth-child(3){width:84%;margin-left:8%;transition-delay:1.18s}
.as-stk-b:nth-child(4){width:94%;margin-left:2%;transition-delay:.96s}
.as-stk-b:nth-child(5){width:86%;margin-left:6%;transition-delay:.74s}
.as-stk-b:nth-child(6){width:92%;margin-left:4%;transition-delay:.52s}
.as-stk-b:nth-child(7){width:96%;margin-left:1%;transition-delay:.3s}
.as-stk.go .as-stk-b{opacity:1;transform:none}
.as-stk-b.c{justify-content:space-between;height:64px;margin-top:2px;padding:0 12px 0 20px;background:#FA5478;box-shadow:inset 0 0 0 1.5px #C43A5C;opacity:1;transform:none;transition:none}
.as-stk-b.c b{font-weight:700;font-size:17px;line-height:1.2;color:#fff}
.as-stk-f{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1.5px #232834;font-weight:700;font-size:16px;line-height:1;color:#232834;opacity:0;transform:translateY(4px);transition:opacity .5s cubic-bezier(.65,0,.35,1) 2.9s,transform .6s cubic-bezier(.2,.7,.2,1) 2.9s}
.as-stk.go .as-stk-f{opacity:1;transform:none}
.as-stk-l{grid-column:2;grid-row:1;display:flex;align-items:center;max-width:7.5em;margin-bottom:72px;padding-left:14px;border-left:2px solid #C2C5CC;font-weight:700;font-size:16px;line-height:1.3;color:#4f5565;opacity:0;transition:opacity .6s cubic-bezier(.65,0,.35,1) 2.35s}
.as-stk.go .as-stk-l{opacity:1}
@media (max-width:560px){.v9 .as-prob-copy p{font-size:17px}.as-stk{column-gap:14px}.as-stk-b{padding:0 14px}.as-stk-b.c{padding:0 10px 0 16px}.as-stk-l{padding-left:12px}}
@media (prefers-reduced-motion:reduce){.as-stk-b,.as-stk-f,.as-stk-l{transition:none}}

/* ---------- text links: #d33d5c, underlined on hover and focus ---------- */
.v9 a.as-go{color:#d33d5c;font-weight:700;text-decoration:none;text-underline-offset:5px;text-decoration-thickness:1.5px}
/* each link's tap area reaches 44px tall, with padding cancelled by margin, so the line doesn't move */
.v9 a.as-go{display:inline-block;padding:10px 0;margin:-10px 0}
.v9 a.as-go:hover,.v9 a.as-go:focus-visible{color:#d33d5c;text-decoration:underline}
.v9 a.as-go:focus-visible{outline:2px solid #232834;outline-offset:3px;border-radius:3px}

/* ---------- security at every step: the page's one interactive section. Above the steps, "Where does the problem start?": a radio
   group of problems as chips that wrap (44px tall at every width). Picking one, by tap, click or the arrow keys, marks the
   step where it starts: that step's node warms to coral and holds the review's ink mark, "Caught here" settles beside its name,
   and the item that catches it turns #d33d5c; one quiet line says where it starts and what catches it, read out to screen
   readers. Every item stays in view, and nothing changes size, so nothing below moves. The steps run three across from 821px
   and stack below that, each item under its step's name. The items carry the homepage's hover icons where the meaning is the
   same: pen, code, key, the sparkle (the page's only one outside the hero), stack, box, window and check ---------- */
.as-every{border-top:1px solid #E4DFD9}
.as-every-head .v9-h2{text-wrap:balance}
.as-pick{margin:0 0 40px}
.v9 .as-pick-q{margin:0 0 14px;font-weight:700;font-size:20px;line-height:1.35;letter-spacing:-.015em;color:#232834}
.as-chips{display:flex;flex-wrap:wrap;gap:10px}
.v9 .as-chip{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;border:1.5px solid #C2C5CC;border-radius:22px;background:#fff;font-family:inherit;font-weight:500;font-size:16px;line-height:1.3;color:#232834;text-align:left;cursor:pointer;transition:border-color .2s cubic-bezier(.65,0,.35,1),background-color .2s cubic-bezier(.65,0,.35,1),color .2s cubic-bezier(.65,0,.35,1)}
@media (hover:hover){.v9 .as-chip:hover{border-color:#232834}}
.v9 .as-chip[aria-checked="true"]{border-color:#232834;background:#232834;color:#fff}
.v9 .as-chip:focus-visible{outline:2px solid #232834;outline-offset:3px}
.v9 .as-say{min-height:3.2em;margin:18px 0 0;max-width:720px;font-weight:500;font-size:17px;line-height:1.6;color:#3a3f4b}
.v9 .as-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 48px;margin:0;padding:0;list-style:none}
.v9 .as-step{margin:0}
.as-step-h{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 0 14px;margin:0 0 22px;border-bottom:1px solid #E4DFD9}
.as-node{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #232834;transition:background-color .35s cubic-bezier(.65,0,.35,1),box-shadow .35s cubic-bezier(.65,0,.35,1)}
.v9 .as-node svg{width:18px;height:18px;fill:#232834;stroke:none;opacity:0;transform:translateY(3px);transition:opacity .35s cubic-bezier(.65,0,.35,1),transform .45s cubic-bezier(.2,.7,.2,1)}
.v9 .as-step-h h3{margin:0;font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.015em;color:#232834}
.as-here{margin-left:auto;flex:none;white-space:nowrap;padding:3px 10px;border-radius:12px;background:#FDE0E6;font-weight:700;font-size:14px;line-height:1.4;color:#232834;opacity:0;transform:translateX(-4px);transition:opacity .35s cubic-bezier(.65,0,.35,1),transform .45s cubic-bezier(.2,.7,.2,1)}
.as-step.on .as-node{background:#FA5478;box-shadow:inset 0 0 0 2px #C43A5C}
.as-step.on .as-node svg{opacity:1;transform:none}
.as-step.on .as-here{opacity:1;transform:none}
.v9 .as-items{display:grid;gap:26px;margin:0;padding:0;list-style:none}
.v9 .as-items li{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:16px;align-content:start;margin:0}
.v9 .as-items .hp-oic.cb-ic-box{grid-row:span 2;width:48px;height:48px;margin:-10px 0 0}
.v9 .as-items h4{grid-column:2;margin:0 0 6px;font-weight:700;font-size:19px;line-height:1.35;letter-spacing:-.01em;color:#232834;transition:color .35s cubic-bezier(.65,0,.35,1)}
.v9 .as-items p{grid-column:2;margin:0;font-weight:500;font-size:16px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .as-items li.on h4{color:#d33d5c}
.v9 .as-more{margin:44px 0 0;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565}
@media (max-width:1100px){.v9 .as-steps{gap:40px 32px}}
/* from 821px to 1023px the columns are narrow: the tag and the name step down a little so each header holds one line */
@media (min-width:821px) and (max-width:1023px){.as-step-h{gap:10px}.as-node{width:30px;height:30px}.v9 .as-step-h h3{font-size:19px}.as-here{padding:2px 8px;font-size:13px}}
@media (max-width:820px){.v9 .as-steps{grid-template-columns:minmax(0,1fr);gap:36px}.v9 .as-items{max-width:560px}}
@media (max-width:560px){.v9 .as-chip{padding:8px 16px}.v9 .as-say{min-height:4.8em}}
@media (prefers-reduced-motion:reduce){.as-chip,.as-node,.as-node svg,.as-here,.as-items h4{transition:none}}

/* ---------- know what's in every release: the copy, and one release drawn as a small tree, top down and branching (not Legacy
   Modernisation's staircase of cards): the application at the top in bone with an ink outline, its packages below it and
   theirs below those, white with a tint outline, on tint connectors, the names invented. When the tree is well in view it plays
   once: a New advisory card arrives beside the bottom row, byte-buffer (three levels down, a package the team never chose)
   warms to coral, and the path from it up to the application draws in ink, each package on it taking an ink outline as the line
   reaches it. It holds; with reduced motion it is shown done. Every node is placed from the first paint in a box that keeps
   the drawing's shape (650 x 420), so nothing moves. On phones the tree shows one branch only, drawn on its own 340 x 420 plan,
   at the same type size. Side by side from 1024px, the tree under the copy below that ---------- */
.as-sc{border-top:1px solid #E4DFD9}
.as-sc-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px 72px;align-items:center}
.as-sc-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .as-sc-copy p{margin:0;max-width:560px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
@media (max-width:1023px){.as-sc-grid{grid-template-columns:minmax(0,1fr)}.as-tree{max-width:640px}}
.as-tree{position:relative;margin:0;aspect-ratio:650/420;--vw:650}
.as-tree-l{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.v9 .as-tree-l path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.v9 .as-tree-l .tk{stroke:#C2C5CC;stroke-width:2}
.v9 .as-tree-l .up{stroke:#232834;stroke-width:2.6;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s cubic-bezier(.65,0,.35,1) 1.5s}
.as-tree.go .as-tree-l .up{stroke-dashoffset:0}
.as-tree-l.p{display:none}
.as-tree-n{position:absolute;inset:0}
.as-pk,.as-adv{position:absolute;box-sizing:border-box;left:calc((var(--x) - var(--w) / 2) / var(--vw) * 100%);width:calc(var(--w) / var(--vw) * 100%);top:calc((var(--y) - 24) / 420 * 100%);height:calc(48 / 420 * 100%);display:flex;align-items:center;justify-content:center;padding:0 8px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1.5px #C2C5CC;font-weight:500;font-size:15px;line-height:1.2;color:#232834;white-space:nowrap;transition:box-shadow .35s cubic-bezier(.65,0,.35,1),background-color .4s cubic-bezier(.65,0,.35,1)}
.as-pk.app{background:#F1EEEA;box-shadow:inset 0 0 0 2px #232834}
.as-pk.app b{font-weight:700;font-size:16px}
.as-pk.hit{transition-delay:1s}
.as-pk.hit{transition-property:box-shadow,background-color,color}
.as-tree.go .as-pk.hit{background:#FA5478;box-shadow:inset 0 0 0 2px #C43A5C;color:#fff}
.as-pk.u1{transition-delay:1.85s}.as-pk.u2{transition-delay:2.25s}
.as-tree.go .as-pk.u1,.as-tree.go .as-pk.u2{box-shadow:inset 0 0 0 2px #232834}
.as-adv{top:calc((var(--y) - 39) / 420 * 100%);height:calc(78 / 420 * 100%);flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;padding:0 14px;border-radius:14px;background:#F1EEEA;box-shadow:inset 0 0 0 1.5px #232834;opacity:0;transform:translateY(4px);transition:opacity .5s cubic-bezier(.65,0,.35,1) .2s,transform .6s cubic-bezier(.2,.7,.2,1) .2s}
.as-adv i{font-style:normal;font-weight:700;font-size:11.5px;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:#4f5565}
.as-adv b{font-weight:700;font-size:16px;line-height:1.25}
.as-adv span{font-size:14px;line-height:1.3;color:#4f5565}
.as-tree.go .as-adv{opacity:1;transform:none}
@media (max-width:560px){
.v9 .as-sc-copy p{font-size:17px}
.as-tree{aspect-ratio:340/420;--vw:340;max-width:380px}
.as-tree-l.d,.as-pk.dp{display:none}
.as-tree-l.p{display:block}
.as-pk,.as-adv{left:calc((var(--px) - var(--pw) / 2) / var(--vw) * 100%);width:calc(var(--pw) / var(--vw) * 100%);top:calc((var(--py) - 24) / 420 * 100%)}
.as-adv{top:calc((var(--py) - 39) / 420 * 100%)}
}
@media (prefers-reduced-motion:reduce){.as-tree-l .up,.as-pk,.as-adv{transition:none}}

/* ---------- when someone reports a problem: the copy, and the security.txt file itself, static, as a small text card in the
   family's line (white, ink outline, radius 20, a bone bar with the file's address). Its fields are RFC 9116's, as the RFC
   writes them (checked 5 October 2026): Contact (a mailto: URI), Expires (an RFC 3339 date and time), Policy and
   Preferred-Languages, with example.com values; the two the RFC requires carry a quiet Required tag, and one line under the card
   says what the format asks. Set in Sailec, not a monospace font. Each field's name sits with its value on one row; long values
   wrap anywhere rather than overflow. Side by side from 1024px, the card under the copy below that ---------- */
.as-dis{border-top:1px solid #E4DFD9}
.as-dis-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:48px 72px;align-items:center}
.as-dis-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .as-dis-copy p{margin:0;max-width:560px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
@media (max-width:1023px){.as-dis-grid{grid-template-columns:minmax(0,1fr)}.as-txt{max-width:620px}}
.as-txt{margin:0}
.as-txt-hd{display:flex;align-items:center;min-height:56px;padding:12px 24px;border:1.5px solid #232834;border-bottom:0;border-radius:20px 20px 0 0;background:#F1EEEA}
.as-txt-hd b{font-weight:700;font-size:15px;line-height:1.4;color:#232834;overflow-wrap:anywhere}
.v9 .as-txt-f{margin:0;padding:10px 24px 14px;border:1.5px solid #232834;border-radius:0 0 20px 20px;background:#fff}
.as-txt-f > div{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:baseline;padding:12px 0;border-bottom:1px solid #E4DFD9}
.as-txt-f > div:last-child{border-bottom:0}
.v9 .as-txt-f dt{margin:0;font-weight:700;font-size:16px;line-height:1.5;color:#232834}
.v9 .as-txt-f dd{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-weight:500;font-size:16px;line-height:1.5;color:#3a3f4b;overflow-wrap:anywhere;min-width:0}
.as-req{flex:none;padding:1px 9px;border-radius:10px;background:#FDE0E6;font-weight:700;font-size:12.5px;line-height:1.5;color:#232834}
.v9 .as-txt-c{margin:14px 4px 0;font-weight:500;font-size:15px;line-height:1.55;color:#4f5565;text-wrap:pretty}
@media (max-width:420px){.as-txt-f > div{grid-template-columns:minmax(0,1fr);row-gap:2px}.v9 .as-txt-f{padding:6px 18px 10px}.as-txt-hd{padding:12px 18px}}

/* ---------- if you sell software in the EU: static. The heading and its line, then the Act's two dates in large quiet ink type,
   side by side, each with its line (Since, From). Under the first, the reporting steps as three small labelled marks down a tint
   line at every width, each a row with its deadline at the column's full width, in the Commission's words, with no scale
   implied, and one quiet line on where reports go. The legal-advisers paragraph closes it. Checked 5 October 2026; re-check every three months (next by 5 January
   2027) and whenever the Commission publishes new guidance. The dates stack from 768px down, ---------- */
.as-cra{border-top:1px solid #E4DFD9}
.as-cra-head .v9-h2{text-wrap:balance}
.as-dates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 72px;align-items:start}
.as-date{display:grid;align-content:start}
.as-date-k{font-weight:700;font-size:13px;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:#d33d5c}
.v9 .as-date-d{margin:8px 0 14px;font-weight:700;font-size:clamp(34px,3.8vw,50px);line-height:1.1;letter-spacing:-.03em;color:#232834}
.v9 .as-date-t{margin:0;max-width:520px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .as-marks{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin:30px 0 0;padding:0;list-style:none;max-width:520px}
.as-marks::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:#C2C5CC}
.v9 .as-marks li{position:relative;display:grid;align-content:start;gap:2px;margin:0;padding:0 0 0 32px}
.as-mk{position:absolute;left:0;top:3px;width:16px;height:16px;box-sizing:border-box;border:2px solid #232834;border-radius:50%;background:#fff}
.as-marks b{font-weight:700;font-size:16px;line-height:1.35;color:#232834}
.as-marks span:not(.as-mk){font-weight:500;font-size:15px;line-height:1.5;color:#4f5565;text-wrap:pretty}
.v9 .as-date-n{margin:22px 0 0;font-weight:500;font-size:15px;line-height:1.5;color:#4f5565}
.v9 .as-cra-end{margin:48px 0 0;max-width:720px;padding-top:28px;border-top:1px solid #E4DFD9;font-weight:500;font-size:18px;line-height:1.6;color:#3a3f4b;text-wrap:pretty}
@media (max-width:768px){.as-dates{grid-template-columns:minmax(0,1fr);gap:44px}}
@media (max-width:560px){
.v9 .as-date-t,.v9 .as-cra-end{font-size:17px}
}

/* ---------- evidence that builds itself: the copy, and one page of a customer's security questionnaire (not the Legacy
   Modernisation folder, nor the SEO audit's status tags): a white form in the family's line with a bone bar, four questions,
   each with its answer field. When the form is well in view the answers fill in once, one after another (each fading up 4px),
   and under each the record it came from settles in on blush, the section's one warm part. It holds; with reduced motion it is
   shown filled. Every row keeps its size from the first paint. Side by side from 1024px, the form under the copy below that ---------- */
.as-ev{border-top:1px solid #E4DFD9}
.as-ev-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px 72px;align-items:center}
.as-ev-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .as-ev-copy p{margin:0;max-width:560px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
@media (max-width:1023px){.as-ev-grid{grid-template-columns:minmax(0,1fr)}.as-q{max-width:620px}}
.as-q{margin:0;border:1.5px solid #232834;border-radius:20px;background:#fff;overflow:hidden}
.as-q-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 24px;border-bottom:1.5px solid #232834;background:#F1EEEA}
.as-q-hd b{font-weight:700;font-size:16px;line-height:1.3;color:#232834}
.as-q-hd span{font-weight:500;font-size:14px;line-height:1.3;color:#4f5565}
.v9 .as-q-list{display:grid;margin:0;padding:6px 24px 10px;list-style:none;counter-reset:q}
.v9 .as-q-list li{display:grid;gap:10px;margin:0;padding:16px 0;border-bottom:1px solid #E4DFD9;counter-increment:q}
.v9 .as-q-list li:last-child{border-bottom:0}
.v9 .as-q-list p{margin:0;font-weight:700;font-size:16px;line-height:1.45;color:#232834;text-wrap:pretty}
.v9 .as-q-list p::before{content:counter(q) ". ";color:#4f5565}
.as-q-a{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.as-q-f{display:flex;align-items:center;flex:1 1 200px;min-height:40px;padding:0 14px;border:1.5px solid #C2C5CC;border-radius:10px;font-weight:500;font-size:15px;line-height:1.3;color:transparent;transition:color .45s cubic-bezier(.65,0,.35,1),border-color .45s cubic-bezier(.65,0,.35,1)}
.as-q-s{flex:none;padding:3px 10px;border-radius:12px;background:#FDE0E6;font-weight:700;font-size:13px;line-height:1.5;color:#232834;opacity:0;transform:translateY(4px);transition:opacity .45s cubic-bezier(.65,0,.35,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.as-q.go .as-q-f{color:#232834;border-color:#232834}
.as-q.go .as-q-s{opacity:1;transform:none}
.as-q-list li:nth-child(1) .as-q-f{transition-delay:.3s}.as-q-list li:nth-child(1) .as-q-s{transition-delay:.6s}
.as-q-list li:nth-child(2) .as-q-f{transition-delay:1s}.as-q-list li:nth-child(2) .as-q-s{transition-delay:1.3s}
.as-q-list li:nth-child(3) .as-q-f{transition-delay:1.7s}.as-q-list li:nth-child(3) .as-q-s{transition-delay:2s}
.as-q-list li:nth-child(4) .as-q-f{transition-delay:2.4s}.as-q-list li:nth-child(4) .as-q-s{transition-delay:2.7s}
@media (max-width:560px){.v9 .as-ev-copy p{font-size:17px}.as-q-hd,.v9 .as-q-list{padding-left:18px;padding-right:18px}}
@media (prefers-reduced-motion:reduce){.as-q-f,.as-q-s{transition:none}}

/* ---------- start with a review: the copy, the three things the review gives as three short labelled lines between hairlines,
   and the engagement link; beside them one finding written in full, static: what, where, why it matters, the fix and the
   test, the same access check the hero catches. A white card in the family's line with a bone bar and a "First to fix" tag on
   blush. Not SEO & AI Search's ranked list, and no pipeline drawing. Side by side from 1024px, the card under the copy below ---------- */
.as-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.as-st{border-top:1px solid #E4DFD9}
.as-st-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 72px;align-items:center}
.as-st-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .as-st-copy p{margin:0;max-width:600px;font-weight:500;font-size:18px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .as-get{display:grid;margin:28px 0 0;max-width:600px;border-top:1px solid #E4DFD9}
.as-get > div{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:20px;padding:14px 0;border-bottom:1px solid #E4DFD9}
.v9 .as-get dt{margin:0;font-weight:700;font-size:17px;line-height:1.45;color:#232834}
.v9 .as-get dd{margin:0;font-weight:500;font-size:17px;line-height:1.45;color:#4f5565}
.v9 .as-st-copy .as-st-em{margin-top:24px;font-size:17px}
@media (max-width:1023px){.as-st-grid{grid-template-columns:minmax(0,1fr)}.as-fd{max-width:600px}}
.as-fd{margin:0;border:1.5px solid #232834;border-radius:20px;background:#fff;overflow:hidden}
.as-fd-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 24px;border-bottom:1.5px solid #232834;background:#F1EEEA}
.as-fd-hd b{font-weight:700;font-size:16px;line-height:1.3;color:#232834}
.as-fd-hd span{padding:3px 10px;border-radius:12px;background:#FDE0E6;font-weight:700;font-size:13px;line-height:1.5;color:#232834}
.v9 .as-fd-f{margin:0;padding:6px 24px 10px}
.as-fd-f > div{display:grid;grid-template-columns:128px minmax(0,1fr);column-gap:16px;padding:13px 0;border-bottom:1px solid #E4DFD9}
.as-fd-f > div:last-child{border-bottom:0}
.v9 .as-fd-f dt{margin:0;font-weight:700;font-size:15px;line-height:1.5;color:#4f5565}
.v9 .as-fd-f dd{margin:0;font-weight:500;font-size:16px;line-height:1.5;color:#232834;text-wrap:pretty}
@media (max-width:560px){.v9 .as-st-copy p{font-size:17px}.as-get > div{grid-template-columns:minmax(0,1fr);row-gap:2px}.as-fd-hd,.v9 .as-fd-f{padding-left:18px;padding-right:18px}.as-fd-f > div{grid-template-columns:minmax(0,1fr);row-gap:2px}}

/* ---------- questions worth asking: every question and answer visible, with no accordion and no FAQ structured data. One per
   row between hairlines, the question on the left and its answer on the right from 1024px (not SEO & AI Search's two columns of
   questions), each answer under its question below that ---------- */
.as-faq{border-top:1px solid #E4DFD9}
.v9 .as-qa{margin:0;border-top:1px solid #E4DFD9}
.as-qa > div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:10px 72px;padding:26px 0;border-bottom:1px solid #E4DFD9}
.v9 .as-qa dt{margin:0;font-weight:700;font-size:20px;line-height:1.4;letter-spacing:-.01em;color:#232834;text-wrap:balance}
.v9 .as-qa dd{margin:0;max-width:640px;font-weight:500;font-size:17px;line-height:1.6;color:#4f5565;text-wrap:pretty}
@media (max-width:1023px){.as-qa > div{grid-template-columns:minmax(0,1fr);padding:22px 0}.v9 .as-qa dd{max-width:680px}}

/* ================= THE PHONE TYPE SCALE: written 5 October 2026 by tools/phone-type.js. Up to 560px: h1 34px, section headings 26px, titles 18 to 20px, body 16px; nothing gets larger ================= */
@media (max-width:560px){
.v9-h2{font-size:26px;line-height:1.18;letter-spacing:-.025em}
.v9-head .v9-sub,.em-center .v9-sub,.ai-clients-head .v9-sub,.as-clients-head .v9-sub,.v9 .as-prob-copy p,.as-stk-b.c b,.v9 .as-say,.v9 .as-more,.v9 .as-sc-copy p,.v9 .as-dis-copy p,.v9 .as-date-t,.v9 .as-cra-end,.v9 .as-ev-copy p,.v9 .as-st-copy p,.v9 .as-get dt,.v9 .as-get dd,.v9 .as-st-copy .as-st-em,.v9 .as-qa dd{font-size:16px}
.v9-hero h1{font-size:min(34px,clamp(40px,4.6vw,64px));line-height:1.12}
.v9-hero .v9-lead,.v9 .as-pick-q,.v9 .as-qa dt{font-size:17px}
.v9-hero.as-hero h1.as-h-a{font-size:min(34px,min(56px,calc((100vw - 44px) / 9.3)));line-height:1.12}
.v9-hero.as-hero h1.as-h-b{font-size:min(34px,min(56px,calc((100vw - 44px) / 10)));line-height:1.12}
.v9-hero.as-hero h1.as-h-c{font-size:min(34px,min(56px,calc((100vw - 44px) / 7.95)));line-height:1.12}
.v9-hero.as-hero h1.as-h-d{font-size:min(34px,min(56px,calc((100vw - 44px) / 8.9)));line-height:1.12}
.v9-hero.as-hero h1.as-h-e{font-size:min(34px,min(56px,calc((100vw - 44px) / 8.7)));line-height:1.12}
.v9 .as-step-h h3{font-size:20px}
.v9 .as-items h4{font-size:18px}
.v9 .as-date-d{font-size:29px}
}