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


/* ================= AI SECURITY & GOVERNANCE (this page's own) ================= */

/* ---------- this page's hero, as on Application Security: 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 "within its limits" 6.92em, B "AI you can trust" 7.14em, C "governed from day one" 10.66em, D "within clear limits"
   8.07em, E "AI that does its job," 8.76em. 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, B and D run from 52px to 58px (D's longer line
   468px at most, 84% of the column), E from 50px to 56px (491px) and C from 42px to 46px (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 ---------- */
.v9-hero.sg-hero h1.sg-h-a{font-size:min(56px,calc((100vw - 44px) / 7.55))}
.v9-hero.sg-hero h1.sg-h-b{font-size:min(56px,calc((100vw - 44px) / 7.8))}
.v9-hero.sg-hero h1.sg-h-c{font-size:min(56px,calc((100vw - 44px) / 11.65))}
.v9-hero.sg-hero h1.sg-h-d{font-size:min(56px,calc((100vw - 44px) / 8.8))}
.v9-hero.sg-hero h1.sg-h-e{font-size:min(56px,calc((100vw - 44px) / 9.6))}
@media (min-width:821px){.v9.sg-hero .em-talk .v9-hero-form{grid-template-columns:262px auto}}
@media (min-width:561px) and (max-width:820px){.v9.sg-hero .em-talk .v9-hero-form{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:561px){.v9.sg-hero .em-talk .v9-hero-form.em-demo .v9-hero-go{width:172px;padding:0}}
@media (max-width:560px){.v9-hero.sg-hero .v9-lead{font-size:17px}}
@media (min-width:1101px){
.v9-hero.sg-hero .v9-hero-grid{grid-template-columns:minmax(560px,5.4fr) minmax(0,6.6fr);gap:48px}
.v9-hero.sg-hero h1.sg-h-a,.v9-hero.sg-hero h1.sg-h-b,.v9-hero.sg-hero h1.sg-h-d{font-size:clamp(52px,4.4vw,58px)}
.v9-hero.sg-hero h1.sg-h-e{font-size:clamp(50px,4.2vw,56px)}
.v9-hero.sg-hero h1.sg-h-c{font-size:clamp(42px,3.4vw,46px)}
.v9-hero.sg-hero .v9-lead{max-width:520px}
/* the drawing is enlarged a little into the page margin, not into the column gap */
.sg-hero .v9-illo{width:106%;margin:0 -6% 0 0;transform:none}
}
/* the drawing's canvas is 1600 x 1160 (art/ai-security/sg-hero-2.json), 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 action card
   and the gate labels are never cropped), so the words in the drawing are as large as they can be */
.sg-hero .v9-illo{aspect-ratio:1600/1160}
@media (max-width:560px){.sg-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.sg-hero{padding:40px 0 64px}
@media (min-width:1101px){.v9-hero.sg-hero{padding:clamp(32px,7vh,84px) 0 72px}}
@media (max-width:560px){.v9-hero.sg-hero{padding:28px 0 48px}}

/* ---------- tap areas and the legacy menu, as CLAUDE.md sets them. The logos in the header and footer are widened to 44px tap
   areas with padding cancelled by margin, so nothing moves. The site's old hidden menu sits off to the side until its script
   marks it loaded; until then it is held to no width, so it can't cause sideways scroll ---------- */
body.v9-page .header-wide.wb-hd .header .logo{padding:7px 0;margin:-7px 0}
body.v9-page .wb-ft .wb-ft-logo{padding:8px 0;margin:-8px 0}
body.v9-page #main_menu:not(.loaded){left:0;right:auto;width:0;max-width:0;overflow:hidden}

/* ---------- the closing: the email form, centred, sized and behaving as the hero's at every width. Nothing follows it: urgent
   help is reached from the header, the menu and the footer. Hidden, with the client wall, until its turn comes ---------- */
.sg-cta .v9-h2{text-wrap:balance}
.sg-cta .v9-sub{text-wrap:pretty}


/* ---------- instructions can hide in plain text: the copy, and a still comparison (checked against OWASP's LLM01:2026
   Prompt Injection on 5 October 2026). One customer's email on bone, then two readers side by side: what a person sees (a
   question to answer, and a line to ignore) and what the AI may see (two instructions to follow). The email's last request and
   the instruction it becomes share the ink underline. No animation beyond the section's ease-in. Side by side from 1024px,
   stacked below; the two readers stack on phones ---------- */
.sg-prob{border-top:1px solid #E4DFD9}
.sg-prob-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px 72px;align-items:center}
.sg-prob-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .sg-prob-copy p{margin:0;max-width:560px;font-weight:500;font-size:18px;line-height:1.65;color:#4f5565;text-wrap:pretty}
.sg-inj{display:grid;row-gap:16px;margin:0}
.sg-inj-mail{padding:26px 30px 28px;border-radius:20px;background:#F1EEEA}
.v9 .sg-inj-cap{margin:0 0 12px;font-weight:700;font-size:11.5px;line-height:1.4;letter-spacing:.22em;text-transform:uppercase;color:#4f5565}
.sg-inj-txt{display:grid;row-gap:8px}
.v9 .sg-inj-l{margin:0;font-weight:500;font-size:17px;line-height:1.55;color:#4f5565;text-wrap:pretty}
.v9 .sg-inj-l.hid,.v9 .sg-inj-i.hid{color:#232834}
.sg-inj-u{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.sg-inj-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sg-inj-r{padding:22px 24px 24px;border:1.5px solid #C2C5CC;border-radius:20px;background:#FFFFFF}
.sg-inj-r.ai{border-color:#232834}
.v9 .sg-inj-r .sg-inj-cap{margin-bottom:10px}
.v9 .sg-inj-v{margin:0;font-weight:700;font-size:18px;line-height:1.35;color:#232834;text-wrap:balance}
.sg-inj-list{display:grid;row-gap:6px;margin-top:14px}
.v9 .sg-inj-i{display:grid;grid-template-columns:20px minmax(0,1fr);margin:0;font-weight:500;font-size:16px;line-height:1.45;color:#4f5565}
.sg-inj-i .n{font-weight:700;color:#4f5565}
@media (max-width:1023px){.sg-prob-grid{grid-template-columns:minmax(0,1fr)}.sg-inj{max-width:640px}}
@media (max-width:560px){.v9 .sg-prob-copy p{font-size:16px}.sg-inj-mail{padding:22px 22px 24px}.v9 .sg-inj-l{font-size:16px}.sg-inj-two{grid-template-columns:minmax(0,1fr)}.sg-inj-r{padding:20px 22px 22px}}

/* ---------- security around the model: the controls in three short columns, by when they work: before release, in the
   system and once live. Each item has its icon (tools/sg-icons-scene.js) and hover Lottie (art/ai-security/sg-ic-*.json,
   from tools/sg-icons-lottie-v1.js), played by startIcons(). Static, with no rules between the columns. Three columns from
   1024px; below, the columns stack and their items sit two to a row, then one to a row on phones ---------- */
.sg-ctl{border-top:1px solid #E4DFD9}
.sg-ctl-head{max-width:760px;margin-bottom:56px}
.sg-ctl-head .v9-h2{margin:0;text-wrap:balance}
.sg-ctl-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 56px;align-items:start}
.v9 .sg-ctl-k{margin:0 0 28px;font-weight:700;font-size:12.5px;line-height:1.4;letter-spacing:.2em;text-transform:uppercase;color:#d33d5c}
.sg-ctl-list{display:grid;row-gap:40px;margin:0;padding:0;list-style:none}
.sg-ctl-list li{margin:0;padding:0}
.v9.sg-ctl .cb-ic-box{grid-row:auto;width:64px;height:64px;margin:0 0 18px}
.v9 .sg-ctl-list h3{margin:0 0 8px;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.01em;color:#232834;text-wrap:balance}
.v9 .sg-ctl-list p{margin:0;font-weight:500;font-size:16px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.sg-ctl-col .cb-ic{--d:.25s}
.sg-ctl-col li:nth-child(2) .cb-ic{--d:.33s}
.sg-ctl-col li:nth-child(3) .cb-ic{--d:.41s}
.sg-ctl-col:nth-child(2) li .cb-ic{--d:.4s}
.sg-ctl-col:nth-child(2) li:nth-child(2) .cb-ic{--d:.48s}
.sg-ctl-col:nth-child(2) li:nth-child(3) .cb-ic{--d:.56s}
.sg-ctl-col:nth-child(3) li .cb-ic{--d:.55s}
.sg-ctl-col:nth-child(3) li:nth-child(2) .cb-ic{--d:.63s}
.v9 .sg-ctl-more{margin:56px 0 0;font-weight:500;font-size:17px;line-height:1.5;color:#4f5565}
.v9 .sg-ctl-more a{font-weight:700;color:#d33d5c;text-decoration:none}
.v9 .sg-ctl-more a:hover,.v9 .sg-ctl-more a:focus-visible{text-decoration:underline;text-underline-offset:3px}
@media (max-width:1023px){.sg-ctl-cols{grid-template-columns:minmax(0,1fr);gap:48px}.sg-ctl-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}}
@media (max-width:560px){.sg-ctl-head{margin-bottom:40px}.sg-ctl-list{grid-template-columns:minmax(0,1fr);row-gap:32px}.v9 .sg-ctl-list h3{font-size:18px}.v9 .sg-ctl-more{font-size:16px}}

/* ---------- give it only what the task needs: the drawing first, the copy beside it. One order assistant (bone, with the
   sparkle: it marks the AI) in the middle of the systems its account could reach. The two its task needs keep a solid ink
   line and say how far it reaches (Read only, Replies only, in coral text); the other four are faint, their lines dashed, and
   say No access. Still, so it reads at a glance. The box keeps its aspect ratio, so nothing shifts; on phones the lines go,
   the assistant sits on top and the systems follow two to a row, the two it keeps first ---------- */
.sg-reach{border-top:1px solid #E4DFD9}
.sg-reach-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 72px;align-items:center}
.sg-reach-copy{grid-column:2;grid-row:1}
.sg-reach-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .sg-reach-copy p{margin:0;max-width:560px;font-weight:500;font-size:18px;line-height:1.65;color:#4f5565;text-wrap:pretty}
.sg-map{grid-column:1;grid-row:1;position:relative;margin:0;aspect-ratio:600/440}
.sg-map-ln{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sg-map-ln line{stroke:#232834;stroke-width:2px;vector-effect:non-scaling-stroke}
.sg-map-ln line.off{stroke:#C2C5CC;stroke-dasharray:4 6}
.sg-sys{position:absolute;left:var(--x);top:var(--y);width:25%;transform:translate(-50%,-50%);display:grid;row-gap:2px;padding:12px 10px;border:1.5px solid #C2C5CC;border-radius:16px;background:#FFFFFF;text-align:center}
.sg-sys b{font-weight:700;font-size:15px;line-height:1.3;color:#4f5565}
.sg-sys span{font-weight:500;font-size:13px;line-height:1.3;color:#4f5565}
.sg-sys.on{border-color:#232834}
.sg-sys.on b{color:#232834}
.sg-sys.on span{font-weight:700;color:#d33d5c}
.sg-ai{position:absolute;left:50%;top:50%;width:34%;transform:translate(-50%,-50%);display:grid;justify-items:center;row-gap:4px;padding:16px 12px 18px;border:2px solid #232834;border-radius:20px;background:#F1EEEA;text-align:center}
.sg-ai svg{display:block;width:18px;height:18px;margin-bottom:2px}
.sg-ai svg path{fill:#FA5478}
.sg-ai b{font-weight:700;font-size:17px;line-height:1.3;color:#232834}
.sg-ai span{font-weight:500;font-size:13.5px;line-height:1.3;color:#4f5565}
@media (max-width:1023px){.sg-reach-grid{grid-template-columns:minmax(0,1fr)}.sg-reach-copy,.sg-map{grid-column:auto;grid-row:auto}.sg-map{width:100%;max-width:640px}}
@media (max-width:560px){.v9 .sg-reach-copy p{font-size:16px}.sg-map{aspect-ratio:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.sg-map-ln{display:none}.sg-ai,.sg-sys{position:static;width:auto;transform:none}.sg-ai{grid-column:1/-1;padding:14px 12px 16px}}

/* ---------- a record of every answer and action: the copy, and one request's record as a narrow bone receipt with a torn
   edge. Each line is the copy's own list, in its order: the request, what the model was given, the sources, the model
   version, the tools, who approved and the result, with no times, names or real versions. Still. Each label sits above its
   value, so long values wrap with their label; on stacked layouts the receipt aligns with the copy ---------- */
.sg-rec{border-top:1px solid #E4DFD9}
.sg-rec-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 72px;align-items:center}
.sg-rec-copy .v9-h2{margin:0 0 22px;text-wrap:balance}
.v9 .sg-rec-copy p{margin:0;max-width:560px;font-weight:500;font-size:18px;line-height:1.65;color:#4f5565;text-wrap:pretty}
.sg-rcpt{justify-self:center;width:100%;max-width:400px;padding:26px 28px 38px;border-radius:20px 20px 0 0;background:#F1EEEA;-webkit-mask:radial-gradient(circle at 10px 100%,transparent 7px,#000 7.5px) 0 0/20px 100% repeat-x;mask:radial-gradient(circle at 10px 100%,transparent 7px,#000 7.5px) 0 0/20px 100% repeat-x}
.v9 .sg-rcpt-t{margin:0;padding:0 0 16px;border-bottom:1.5px dashed #C2C5CC;font-weight:700;font-size:15px;line-height:1.35;color:#232834}
.sg-rcpt dl{display:grid;row-gap:14px;margin:18px 0 0;padding:0}
.sg-rcpt dl > div{display:grid;row-gap:3px}
.v9 .sg-rcpt dt{margin:0;font-weight:700;font-size:12px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:#4f5565}
.v9 .sg-rcpt dd{margin:0;font-weight:500;font-size:16px;line-height:1.45;color:#232834;text-wrap:pretty}
.v9 .sg-rcpt-f{margin:18px 0 0;padding:16px 0 0;border-top:1.5px dashed #C2C5CC;font-weight:500;font-size:14px;line-height:1.45;color:#4f5565}
@media (max-width:1023px){.sg-rec-grid{grid-template-columns:minmax(0,1fr)}.sg-rcpt{justify-self:start}}
@media (max-width:560px){.v9 .sg-rec-copy p{font-size:16px}.sg-rcpt{padding:22px 22px 34px}}

/* ---------- know what AI you run: the copy, then the page's one interaction. What does your AI do? as six real checkboxes
   (two ticked to start, so it's never empty) and What it needs beside them, which shows one line per ticked box, in the
   boxes' order, announced politely. Its box holds the height of its longest state (every line, laid out unseen in the same
   cell), so ticking every box moves nothing below it. Each row is at least 48px to tap, with a visible focus ring. The lines
   say "asks for" and "may count as", never "you must" (checked 5 October 2026 against Article 50(1) and (2) and the Digital
   Omnibus's Annex III date; check again by 5 January 2027). Side by side from 1024px; below, What it needs sits under the
   boxes ---------- */
.sg-gov{border-top:1px solid #E4DFD9}
.sg-gov-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:20px 72px;align-items:start;margin-bottom:56px}
.sg-gov-head .v9-h2{margin:0;text-wrap:balance}
.v9 .sg-gov-head p{margin:0;font-weight:500;font-size:18px;line-height:1.65;color:#4f5565;text-wrap:pretty}
.sg-ck{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px 48px;padding:36px;border:1.5px solid #C2C5CC;border-radius:20px;background:#FFFFFF}
.sg-ck-q{min-width:0;margin:0;padding:0;border:0}
.v9 .sg-ck-h{display:block;margin:0 0 16px;padding:0;font-weight:700;font-size:20px;line-height:1.3;letter-spacing:-.01em;color:#232834}
.sg-ck-list{display:grid;row-gap:4px}
.v9 .sg-ck-row{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:14px;align-items:center;min-height:48px;margin:0 -12px;padding:10px 12px;border-radius:12px;cursor:pointer;font-weight:500;font-size:16px;line-height:1.4;color:#232834;transition:background-color .2s cubic-bezier(.65,0,.35,1)}
.v9 .sg-ck-row:hover{background:#F1EEEA}
.sg-ck-row input{-webkit-appearance:none;appearance:none;display:block;width:22px;height:22px;margin:0;border:2px solid #232834;border-radius:6px;background:#FFFFFF center/18px 18px no-repeat;cursor:pointer}
.sg-ck-row input:checked{background-color:#232834;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.sg-ck-row input:focus-visible{outline:2px solid #232834;outline-offset:3px}
.sg-ck-a{min-width:0;padding:28px 30px 30px;border-radius:16px;background:#F1EEEA}
.sg-need-box{display:grid}
.sg-need-ghost,.sg-need-live{grid-area:1/1;display:grid;align-content:start;row-gap:18px}
.sg-need-ghost{visibility:hidden}
.v9 .sg-need-t{margin:0 0 4px;font-weight:700;font-size:15px;line-height:1.4;color:#232834}
.v9 .sg-need-d{margin:0;font-weight:500;font-size:16px;line-height:1.55;color:#4f5565;text-wrap:pretty}
.v9 .sg-need-none{margin:0;font-weight:500;font-size:16px;line-height:1.55;color:#4f5565}
.v9 .sg-ck-note{margin:24px 0 0;font-weight:500;font-size:16px;line-height:1.55;color:#4f5565}
.v9 .sg-ck-note a{font-weight:700;color:#d33d5c;text-decoration:none}
.v9 .sg-ck-note a:hover,.v9 .sg-ck-note a:focus-visible{text-decoration:underline;text-underline-offset:3px}
@media (max-width:1023px){.sg-gov-head,.sg-ck{grid-template-columns:minmax(0,1fr)}.sg-gov-head{margin-bottom:40px}}
@media (max-width:560px){.v9 .sg-gov-head p{font-size:16px}.sg-ck{padding:22px 18px 18px}.sg-ck-a{padding:22px 20px 24px}.v9 .sg-ck-h{font-size:18px}}

/* ---------- if you use AI in the EU: the Act's dates as one plain list on one line, each saying "Applies from". Past dates
   are quieter (tint dot, grey date), the next one is coral, and a small Today mark sits between them by the visitor's own date
   (placeToday(), on load and on resize); screen readers hear only the list. Dates and sources are in the logic, checked 5
   October 2026; check again by 5 January 2027. Static. Six columns from 1024px; below, the list turns vertical, the line on
   its left, and Today sits in the gap before the next date ---------- */
.sg-eu{border-top:1px solid #E4DFD9}
.sg-eu-head{max-width:760px;margin-bottom:48px}
.sg-eu-head .v9-h2{margin:0;text-wrap:balance}
.sg-tl-box{position:relative}
.sg-tl{--vert:0;position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 24px;margin:0;padding:44px 0 0;list-style:none}
.sg-tl::before{content:"";position:absolute;left:0;right:0;top:51px;height:2px;background:#C2C5CC}
.sg-tl li{position:relative;display:grid;row-gap:6px;align-content:start;margin:0;padding:0}
.sg-tl-dot{display:block;width:16px;height:16px;margin:0 0 14px;border:2px solid #232834;border-radius:50%;background:#FFFFFF}
.sg-tl-d{font-weight:700;font-size:16px;line-height:1.35;color:#232834}
.sg-tl-w{font-weight:500;font-size:16px;line-height:1.5;color:#4f5565;text-wrap:pretty}
.sg-tl li.past .sg-tl-dot{border-color:#C2C5CC;background:#C2C5CC}
.sg-tl li.past .sg-tl-d{color:#4f5565}
.sg-tl li.next .sg-tl-dot{border-color:#C43A5C;background:#FA5478}
.sg-tl li.next .sg-tl-d{color:#d33d5c}
.sg-tl-now{position:absolute;left:0;top:22px;display:grid;justify-items:center;row-gap:4px;transform:translateX(-50%);visibility:hidden;pointer-events:none}
.sg-tl-now.on{visibility:visible}
.sg-tl-now .k{font-weight:700;font-size:11.5px;line-height:1.4;letter-spacing:.2em;text-transform:uppercase;color:#232834}
.sg-tl-now .t{display:block;width:2px;height:20px;border-radius:1px;background:#232834}
.v9 .sg-eu-note{max-width:760px;margin:48px 0 0;font-weight:500;font-size:18px;line-height:1.65;color:#4f5565;text-wrap:pretty}
@media (max-width:1023px){
.sg-tl{--vert:1;grid-template-columns:minmax(0,1fr);row-gap:32px;padding:4px 0 4px 40px}
.sg-tl::before{left:7px;right:auto;top:0;bottom:0;width:2px;height:auto}
.sg-tl-dot{position:absolute;left:-40px;top:2px;margin:0}
.sg-tl-now{left:0;top:0;grid-auto-flow:column;align-items:center;justify-items:start;column-gap:22px;transform:translateY(-50%)}
.sg-tl-now .t{order:-1;width:18px;height:2px;margin-left:-1px}
.sg-eu-head{margin-bottom:36px}.v9 .sg-eu-note{margin-top:36px}
}
@media (max-width:560px){.v9 .sg-eu-note{font-size:16px}}

/* ---------- start with your riskiest feature: a row of quiet feature cards, one lifted and outlined in ink (Start here), and
   below it, opening from it, what happens next: Map, Test and Fix on coral discs with white numbers, one line each. Static.
   The lifted card is always in the middle, so the panel's pointer sits under it at every width; on phones the row keeps
   three cards and the steps stack ---------- */
.sg-start{border-top:1px solid #E4DFD9}
.sg-start-head{max-width:760px}
.sg-start-head .v9-h2{margin:0;text-wrap:balance}
.sg-start-head .v9-sub{text-wrap:pretty}
.sg-pick-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;align-items:center;padding-top:14px}
.sg-feat{display:grid;place-items:center;align-content:center;min-height:72px;padding:14px 12px;border-radius:16px;background:#F1EEEA;font-weight:500;font-size:16px;line-height:1.3;color:#4f5565;text-align:center}
.sg-feat.on{row-gap:4px;min-height:88px;border:2px solid #232834;background:#FFFFFF;font-weight:700;color:#232834;transform:translateY(-10px)}
.sg-feat em{font-style:normal;font-weight:700;font-size:11.5px;line-height:1.4;letter-spacing:.2em;text-transform:uppercase;color:#d33d5c}
.sg-steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 40px;margin:22px 0 0;padding:36px;border:1.5px solid #C2C5CC;border-radius:20px;list-style:none}
.sg-steps::before{content:"";position:absolute;left:50%;top:-10px;width:18px;height:18px;border-left:1.5px solid #C2C5CC;border-top:1.5px solid #C2C5CC;background:#FFFFFF;transform:translateX(-50%) rotate(45deg)}
.sg-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;align-content:start;margin:0;padding:0}
.sg-disc{grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border:1.5px solid #C43A5C;border-radius:50%;background:#FA5478;font-weight:700;font-size:20px;line-height:1;color:#FFFFFF}
.v9 .sg-steps h3{margin:9px 0 6px;font-weight:700;font-size:20px;line-height:1.3;color:#232834}
.v9 .sg-steps p{grid-column:2;margin:0;font-weight:500;font-size:16px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .sg-start-more{margin:40px 0 0;font-weight:500;font-size:17px;line-height:1.5;color:#4f5565}
.v9 .sg-start-more a{font-weight:700;color:#d33d5c;text-decoration:none}
.v9 .sg-start-more a:hover,.v9 .sg-start-more a:focus-visible{text-decoration:underline;text-underline-offset:3px}
@media (max-width:820px){.sg-steps{grid-template-columns:minmax(0,1fr);gap:24px;padding:28px 24px}}
@media (max-width:560px){.sg-pick-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.sg-feat.x{display:none}.sg-feat{min-height:64px;padding:12px 8px;font-size:15px}.sg-feat.on{min-height:80px}.v9 .sg-steps h3{font-size:18px}.v9 .sg-start-more{font-size:16px}}

/* ---------- questions worth asking: grouped by who's asking, each group under its own small label, every answer visible (no
   accordion). Three columns from 1280px; below, the groups stack in one readable column, each keeping its label. The OWASP
   line was checked 5 October 2026 against the OWASP GenAI Security Project's Top 10 for LLM Applications 2026 (LLM01:2026
   Prompt Injection) ---------- */
.sg-faq{border-top:1px solid #E4DFD9}
.sg-faq-h{margin:0 0 48px;text-wrap:balance}
.sg-faq-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 56px;align-items:start}
.sg-faq-g{display:grid;row-gap:28px;align-content:start}
.v9 .sg-faq-k{margin:0;font-weight:700;font-size:12.5px;line-height:1.4;letter-spacing:.2em;text-transform:uppercase;color:#d33d5c}
.v9 .sg-faq-q h3{margin:0 0 8px;font-weight:700;font-size:19px;line-height:1.35;letter-spacing:-.01em;color:#232834;text-wrap:balance}
.v9 .sg-faq-q p{margin:0;font-weight:500;font-size:16px;line-height:1.6;color:#4f5565;text-wrap:pretty}
.v9 .sg-faq-q a{font-weight:700;color:#d33d5c;text-decoration:none}
.v9 .sg-faq-q a:hover,.v9 .sg-faq-q a:focus-visible{text-decoration:underline;text-underline-offset:3px}
@media (max-width:1279px){.sg-faq-cols{grid-template-columns:minmax(0,1fr);max-width:760px;gap:48px}}
@media (max-width:560px){.sg-faq-h{margin-bottom:36px}.sg-faq-cols{gap:40px}.sg-faq-g{row-gap:24px}.v9 .sg-faq-q h3{font-size:18px}}

/* ---------- from the width check (5 October 2026): the text links inside sentences get a 44px tap area without moving a line,
   and on phones the receipt's title and footnote, the checklist's result titles and the feature cards step up to 16px ---------- */
.v9 .sg-ctl-more a,.v9 .sg-ck-note a,.v9 .sg-start-more a,.v9 .sg-faq-q a{padding:10px 0}
@media (max-width:560px){.v9 .sg-rcpt-t,.v9 .sg-rcpt-f,.v9 .sg-need-t,.sg-feat{font-size:16px}}

/* ================= 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. The titles keep the 18px their own sections set. Left out by hand: the coral discs' numbers and the reach diagram's labels, which keep their sizes as drawings do ================= */
@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,.sg-clients-head .v9-sub,.v9 .sg-inj-v{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.sg-hero h1.sg-h-a{font-size:min(34px,min(56px,calc((100vw - 44px) / 7.55)));line-height:1.12}
.v9-hero.sg-hero h1.sg-h-b{font-size:min(34px,min(56px,calc((100vw - 44px) / 7.8)));line-height:1.12}
.v9-hero.sg-hero h1.sg-h-d{font-size:min(34px,min(56px,calc((100vw - 44px) / 8.8)));line-height:1.12}
.v9-hero.sg-hero h1.sg-h-e{font-size:min(34px,min(56px,calc((100vw - 44px) / 9.6)));line-height:1.12}
}