.audience-showcase{padding:88px 0 64px;background:linear-gradient(180deg,#f7f9fe,#fff);border-top:1px solid #e8edf6;overflow:hidden}
.audience-heading{margin-bottom:46px}.audience-heading h2{font-size:clamp(38px,4.5vw,62px);line-height:1.03}.audience-heading h2 span{color:#2563eb}.audience-heading>p{max-width:380px;font-size:14px}
.audience-roles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.role{--accent:#2563eb;--tint:#e7efff;--pale:#f2f6ff;position:relative;min-width:0;border-radius:22px;background:white;border:1px solid #e2e8f2;transition:transform .25s ease,box-shadow .25s ease}
.role-marketer{--accent:#c54413;--tint:#ffddc7;--pale:#fff4ed}.role-agency{--accent:#7543c7;--tint:#e8dcff;--pale:#f7f2ff}.role-developer{--accent:#087963;--tint:#c7efe3;--pale:#effbf6}
.role-art{height:320px;position:relative;isolation:isolate;overflow:hidden;border-radius:21px 21px 0 0;background:linear-gradient(145deg,var(--pale),#fff)}.role-art:after{content:'';position:absolute;bottom:24px;left:20%;right:20%;height:16px;border-radius:50%;background:var(--accent);opacity:.09;filter:blur(8px);z-index:-1}
.role-number{position:absolute;top:12px;left:18px;font-size:79px;line-height:1;font-weight:850;letter-spacing:-.09em;color:var(--accent);opacity:.10}.role-orbit{position:absolute;width:230px;height:230px;max-width:92%;border-radius:50%;background:var(--tint);left:50%;top:53px;transform:translateX(-50%);z-index:-1}.role-orbit:after{content:'';position:absolute;inset:-12px;border:1px dashed var(--accent);border-radius:50%;opacity:.2}
.role-art img{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);height:280px;width:90%;object-fit:contain;transition:transform .35s ease;filter:drop-shadow(0 6px 4px #17254212)}.role-marketer .role-art img{height:259px;width:99%;bottom:25px}.role-developer .role-art img{height:278px}
.role-sticker{position:absolute;bottom:9px;left:17px;right:17px;background:var(--accent);color:white;text-align:center;font-size:9px;font-weight:750;letter-spacing:.05em;line-height:1.4;border-radius:7px;padding:10px 6px;transform:rotate(-3deg);box-shadow:0 4px 0 #14223709}.role-marketer .role-sticker,.role-developer .role-sticker{transform:rotate(3deg)}
.role-float{position:absolute;top:66px;right:9px;border:1px solid #ffffffbb;border-radius:7px;padding:6px 8px;background:#fffffff2;font-size:9px;font-weight:600;color:var(--accent);box-shadow:0 4px 16px #1d34681a;transform:rotate(7deg)}.role-marketer .role-float{top:49px;right:8px;transform:rotate(-5deg)}.role-agency .role-float{top:89px}.role-developer .role-float{top:45px;right:5px;transform:rotate(-6deg)}
.role-copy{padding:24px 21px 22px}.role-copy h3{font-size:25px;font-weight:750;line-height:1.13;letter-spacing:-.045em}.role-copy p{font-size:12px;line-height:1.8;color:#58657b;margin-top:17px;min-height:87px}.role-copy ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:20px 0 0}.role-copy li{font-size:9px;line-height:1.4;font-weight:600;color:var(--accent);background:var(--pale);border-radius:5px;padding:6px 7px}
.audience-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:30px;margin-top:32px;border-top:1px solid #e1e7f1}.audience-bottom strong{display:block;font-size:19px;letter-spacing:-.025em}.audience-bottom p>span{display:block;font-size:12px;color:#66738a;margin-top:5px}.audience-bottom .button{font-size:12px;min-height:48px}
.role.role-arrive .role-art img{animation:role-reveal .65s ease-out both;animation-delay:var(--delay,0ms)}@keyframes role-reveal{from{opacity:.3;translate:0 18px}to{opacity:1;translate:0 0}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.role:hover{transform:translateY(-6px);box-shadow:0 18px 35px -20px #1737744d}.role:hover .role-art img{transform:translateX(-50%) scale(1.035)}}
@media(max-width:1100px){.audience-roles{gap:12px}.role-copy{padding:23px 15px}.role-copy h3{font-size:21px}.role-copy p{font-size:11px;min-height:100px}.role-art{height:290px}.role-art img{height:257px}.role-developer .role-art img{height:257px}.role-marketer .role-art img{height:234px}.role-float{font-size:8px}.role-sticker{font-size:8px;left:10px;right:10px}.role-orbit{width:180px;height:180px;top:68px}}
@media(max-width:900px){.audience-roles{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.role-art{height:315px}.role-art img,.role-developer .role-art img{height:281px}.role-marketer .role-art img{height:264px;width:87%}.role-orbit{width:230px;height:230px;top:49px}.role-copy{padding:25px}.role-copy h3{font-size:28px}.role-copy p{font-size:13px;min-height:70px}.role-copy li{font-size:10px}.role-sticker{left:24px;right:24px;font-size:10px}.role-float{right:19px;font-size:10px}.audience-heading>p{font-size:12px}}
@media(max-width:600px){.audience-showcase{padding:50px 0 42px}.audience-heading{margin-bottom:28px}.audience-heading h2{font-size:42px}.audience-heading>p{font-size:13px;margin-top:20px}.audience-heading>p br{display:none}.audience-roles{grid-template-columns:minmax(0,1fr);gap:22px}.role-art{height:309px}.role-art img,.role-developer .role-art img{height:278px}.role-marketer .role-art img{height:259px;max-width:300px}.role-copy{padding:25px}.role-copy h3{font-size:28px}.role-copy h3 br{display:none}.role-copy p{font-size:13px;min-height:0;margin-top:13px}.role-copy ul{margin-top:17px}.role-float{right:24px;top:73px}.role-number{font-size:86px;top:17px;left:22px}.role-sticker{left:24px;right:24px}.audience-bottom{align-items:stretch;flex-direction:column;margin-top:25px;padding-top:25px;gap:20px}.audience-bottom strong{font-size:19px}.audience-bottom p>span{font-size:12px}.audience-bottom .button{justify-content:space-between;width:100%}}
/* Keep captions away from faces at every breakpoint. */
.audience-showcase .role-copy h3 br{display:initial}
.audience-showcase .role .role-float{top:auto;bottom:67px;right:9px}
@media(prefers-reduced-motion:reduce){.audience-showcase *{animation:none!important;transition:none!important}}