.performance-crm{display:flex;align-items:center;justify-content:center;background-color:#E8E2FD;background-image:var(--grain-d);padding:20px 0;aspect-ratio:5/4.4;overflow:hidden}
.s9{position:relative;z-index:2;width:min(92%,540px);aspect-ratio:500/440;container-type:inline-size}
.s9-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.s9-rail{fill:none;stroke:rgba(14,20,82,.1);stroke-width:1.5;stroke-dasharray:2 6;stroke-linecap:round}
.s9-rail.c{stroke:rgba(63,79,230,.22)}
.s9-nz{fill:var(--fg3)}
.s9-cl{fill:var(--cobalt);filter:drop-shadow(0 0 2.5px rgba(63,79,230,.6))}

/* cards: the same paper skeleton style as the other feature visuals */
.s9-card{position:absolute;z-index:2;width:34%;padding:2.8cqw 3.2cqw;border-radius:6px;background:var(--a-bg);box-shadow:0 26px 44px -22px rgba(14,26,120,.42),0 0 0 1px rgba(14,20,82,.05)}
.s9-crm{left:5%;top:6%;transform:rotate(-4deg)}
.s9-pl{right:5%;bottom:6%;transform:rotate(3deg)}
.s9-hd{display:flex;align-items:center;gap:1.4cqw;margin-bottom:2cqw}
.s9-hd i{width:3cqw;height:3cqw;border-radius:50%;background:var(--a-pale)}
.s9-hd s{height:1.5cqw;width:40%;border-radius:2px;background:rgba(14,20,82,.18);text-decoration:none}
.s9-r{display:flex;align-items:center;gap:1.4cqw;height:4.2cqw}
.s9-r+.s9-r{margin-top:1cqw}
.s9-r i{flex:none;width:2cqw;height:2cqw;border-radius:50%;background:var(--a-pale)}
.s9-r s{height:1.3cqw;border-radius:2px;background:rgba(14,20,82,.16);text-decoration:none}
.s9-r u{margin-left:auto;flex:none;height:2.6cqw;border-radius:999px;text-decoration:none}

/* the CRM: every row in a different shape and colour, none of it lined up */
.s9-crm .s9-r{animation:s9Jit 3.2s ease-in-out infinite;animation-delay:calc(var(--j)*-.8s)}
.s9-crm .r1{--j:0}
.s9-crm .r2{--j:1;margin-left:2.4cqw;margin-right:-1.6cqw}
.s9-crm .r3{--j:2;rotate:2.2deg}
.s9-crm .r4{--j:3;margin-left:1cqw;margin-right:2.4cqw;opacity:.65}
.s9-crm u.a{width:20%;background:#FCE3C6}
.s9-crm u.b{width:12%;background:none;box-shadow:inset 0 0 0 1.2px rgba(14,20,82,.22)}
.s9-crm u.c{width:26%;background:#F1EDFE}
.s9-crm u.d{width:9%;background:rgba(14,20,82,.1)}
.s9-crm u.e{width:16%;background:rgba(249,197,61,.45)}
@keyframes s9Jit{0%,100%{translate:0 0}30%{translate:.5cqw -.2cqw}60%{translate:-.4cqw .25cqw}}

/* the platforms: a results chart whose columns climb as the clean signal lands, i.e. the platforms learning and bringing more pipeline */
.s9-tabs{display:flex;gap:1.2cqw;margin-bottom:2.6cqw}
.s9-tabs i{height:3cqw;width:24%;border-radius:999px;background:var(--a-soft)}
.s9-tabs i:first-child{background:var(--cobalt)}
.s9-ch{position:relative;display:flex;align-items:flex-end;gap:1.5cqw;height:17cqw;padding-bottom:.2cqw;border-bottom:1px solid var(--a-line)}
.s9-ch::before,.s9-ch::after{content:"";position:absolute;left:0;right:0;border-top:1px dashed rgba(14,20,82,.08)}
.s9-ch::before{top:20%}.s9-ch::after{top:58%}
.s9-ch i{position:relative;z-index:1;flex:1;height:calc(var(--h,0)*100%);border-radius:2px 2px 0 0;background:var(--cobalt);opacity:.35;transition:height .7s var(--spring),opacity .4s ease}
.s9-ch i.on{opacity:1}
.s9-ch i.top::after{content:"";position:absolute;left:50%;bottom:calc(100% + .9cqw);width:3.4cqw;height:3.4cqw;margin-left:-1.7cqw;background:linear-gradient(160deg,var(--gold),var(--orange));-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat;animation:s9Pop .5s var(--spring)}
.s9-pl.fade .s9-ch i{transition:height .6s var(--ease),opacity .4s ease}
.s9-ax{display:flex;gap:1.5cqw;margin-top:1.4cqw}
.s9-ax s{flex:1;height:1cqw;border-radius:2px;background:rgba(14,20,82,.1);text-decoration:none}
.s9-pl.ping{box-shadow:0 26px 44px -22px rgba(14,26,120,.42),0 0 0 1px rgba(14,20,82,.05),0 0 0 3px rgba(63,79,230,.22)}
@keyframes s9Pop{0%{transform:scale(0) rotate(-30deg)}100%{transform:none}}

/* names: pills pinned to the card corners, Addie on the orb */
.s9-tag{position:absolute;z-index:3;padding:.6em 1.1em;border-radius:999px;background:var(--paper);box-shadow:var(--a-shadow);font-size:clamp(12px,3cqw,15px);font-weight:500;line-height:1.2;letter-spacing:-.1px;color:var(--fg);white-space:nowrap}
.s9-tag.t1{left:3%;top:6%;transform:translateY(-50%) rotate(-4deg)}
.s9-tag.t3{right:3%;bottom:6%;transform:translateY(50%) rotate(3deg)}
.s9-tag.mess{left:53.5%;top:26%;padding:.45em .95em;font-size:clamp(11px,2.6cqw,13px);color:var(--a-body);transform:translateY(-50%) rotate(2deg)}
.s9-a{position:absolute;z-index:3;left:50%;top:50%;display:grid;place-items:center;width:15cqw;height:15cqw;border-radius:50%;background:var(--cobalt);color:var(--paper);font-size:clamp(12px,3.2cqw,16px);font-weight:500;letter-spacing:-.1px;transform:translate(-50%,-50%);box-shadow:0 0 0 2cqw rgba(63,79,230,.16),0 0 8cqw 1cqw rgba(63,79,230,.35),var(--a-shadow);transition:transform .25s var(--spring)}
.s9-a::after{content:"";position:absolute;inset:-2cqw;border-radius:50%;box-shadow:0 0 0 2px rgba(249,197,61,.85);opacity:0}
.s9-a.ping::after{animation:lpRing .9s var(--ease)}
.s9-a.gulp{transform:translate(-50%,-50%) scale(1.06)}

@media (prefers-reduced-motion:reduce){.s9-crm .s9-r{animation:none}.s9-ch i.top::after{animation:none}}

@media(max-width:980px){.performance-crm{aspect-ratio:auto;padding:24px 0}}

.s9:not(.motion-active) .s9-r{animation-play-state:paused}

.s9-a svg{display:block;width:82%;height:82%}