.ecosystem{height:210vh;background:#0a1828;color:#fff;--reveal:1}.ecosystem-stage{position:sticky;top:0;min-height:100svh;overflow:hidden;padding:45px 5% 25px}.ecosystem-heading{display:flex;align-items:center;gap:4%;position:relative;z-index:2}.ecosystem-heading .eyebrow{width:14%;font-size:11px;color:#85bda9;margin:0}.ecosystem-heading h2{font-size:clamp(30px,3vw,49px);margin:0;flex:1}.ecosystem-heading p{font-size:15px;line-height:1.6;color:#a9bdc8}.ecosystem-map{transform-origin:39% 45%;margin:28px auto 0;max-width:1500px;will-change:transform}.group-identity{text-align:center;margin-bottom:24px;opacity:var(--reveal)}.group-identity>span{font-size:13px;letter-spacing:3px;color:#b5c9d4}.group-identity p{font-size:23px;margin:12px 0}.group-identity i{font-style:normal;font-size:11px;color:#8ea7b7;margin-left:8px}.group-identity b{font-weight:400;color:#40ba8d;margin:0 20px}.channel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.channel{background:#102536;color:white;text-align:left;border:1px solid #2a4151;border-radius:2px;padding:18px 20px;position:relative;opacity:var(--reveal);transition:background .2s,border-color .2s}.channel.selected{background:#14372f;border-color:#40ba8d;opacity:1}.channel:hover{border-color:#7bc9ad}.channel-number{font-size:10px;letter-spacing:1px;color:#9db5c1}.channel h3{font-size:24px;line-height:1.2;min-height:58px;margin:18px 0 10px;letter-spacing:-.8px}.channel p{font-size:13px;color:#9eb6c3;margin:0 0 20px}.channel-entry{border-top:1px solid #ffffff20;display:block;padding-top:12px;font-size:11px;color:#c5d8e0}.publish-lines{display:grid;grid-template-columns:repeat(4,1fr);margin:0 12%;height:37px;border-bottom:1px solid #40ba8d;opacity:var(--reveal)}.publish-lines span{border-left:1px solid #40ba8d;justify-self:center}.drm-core{display:flex;align-items:center;justify-content:center;gap:30px;border-top:1px solid #40ba8d;padding:17px 24px;margin:20px auto 0;position:relative;max-width:650px;background:#122b3b}.drm-core:before{content:'';position:absolute;top:-21px;left:50%;height:20px;border-left:1px solid #40ba8d}.drm-core strong{display:block;font-size:32px;letter-spacing:2px}.drm-core span{font-size:9px;letter-spacing:2px;color:#7bcea9}.drm-core p{font-size:14px;line-height:1.7;color:#c5d6df;margin:0}.channel-detail{margin:22px 0 0;border-top:1px solid #2c4352;padding-top:15px}.channel-detail>span{font-size:12px;color:#72cda7}.channel-detail dl{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:12px 0 0}.channel-detail dt{font-size:11px;color:#839eaf;margin-bottom:7px}.channel-detail dd{font-size:13px;line-height:1.5;margin:0;color:#d4e1e8}.ecosystem-hint{display:block;text-align:center;color:#7893a5;font-size:11px;margin-top:18px}.publishing-proof{padding:95px 0 50px;background:#eef2f3}.publishing-proof .real-screen{display:block}.publishing-proof .real-screen img{height:auto;width:100%}@media(max-height:780px) and (min-width:801px){.ecosystem-stage{padding-top:24px}.ecosystem-heading h2{font-size:30px}.ecosystem-map{margin-top:18px}.group-identity{margin-bottom:15px}.channel{padding:12px 14px}.channel h3{font-size:20px;min-height:45px;margin:12px 0 8px}.channel p{margin-bottom:12px}.publish-lines{height:24px}.drm-core{padding:10px 20px}.channel-detail{margin-top:15px}.ecosystem-hint{margin-top:10px}}@media(max-width:800px){.ecosystem{height:auto}.ecosystem-stage{position:relative;padding:70px 6% 40px;overflow:visible}.ecosystem-heading{display:block}.ecosystem-heading .eyebrow{width:auto;margin-bottom:20px}.ecosystem-heading h2{font-size:39px}.ecosystem-heading p{font-size:16px}.ecosystem-map{transform:none!important}.group-identity{margin-top:35px;opacity:1}.group-identity i{display:none}.channel-grid{grid-template-columns:1fr 1fr;gap:10px}.channel{opacity:1;padding:16px 12px}.channel h3{font-size:20px;min-height:48px}.channel-number{font-size:9px}.channel p{font-size:11px;min-height:28px}.channel-entry{font-size:10px}.publish-lines{opacity:1}.drm-core{gap:18px;padding:16px}.drm-core p{font-size:12px}.channel-detail dl{grid-template-columns:1fr;gap:16px}.channel-detail dd{font-size:15px}.publishing-proof{padding-top:60px}}@media(prefers-reduced-motion:reduce){.ecosystem{height:auto}.ecosystem-stage{position:relative}.ecosystem-map{transform:none!important}.channel,.group-identity,.publish-lines{opacity:1}}

.client-thread{height:150px;background:#0a1828;position:relative;overflow:hidden}.client-thread:before{content:'';position:absolute;left:50%;top:0;height:100%;width:2px;background:#40ba8d}.client-thread span{position:absolute;left:calc(50% - 5px);width:12px;height:12px;border-radius:50%;background:#40ba8d;box-shadow:0 0 20px #40ba8d77;animation:thread-travel 3s linear infinite}.publish-flows{display:block;width:100%;height:65px;overflow:visible;opacity:var(--reveal)}.flow-paths{fill:none;stroke:#40ba8d;stroke-width:1.5}.publish-flows circle{fill:#70e3b4;filter:drop-shadow(0 0 4px #40ba8d)}.drm-core{margin-top:0}.drm-core:before{display:none}.channel{border:0;border-top:1px solid #416072;background:transparent;border-radius:0}.channel.selected{background:#17382e;border-top:2px solid #40ba8d}.group-identity{border-bottom:1px solid #213b4d;padding-bottom:14px}.channel-entry{line-height:1.5}.ecosystem-map{transform-origin:38% 32%}@keyframes thread-travel{from{top:-15px}to{top:160px}}@media(max-height:780px) and (min-width:801px){.publish-flows{height:40px}.group-identity{padding-bottom:8px;margin-bottom:10px}.ecosystem-map{margin-top:12px}}@media(max-width:800px){.publish-flows{height:70px;opacity:1}.client-thread{height:90px}}@media(prefers-reduced-motion:reduce){.publish-flows circle,.client-thread span{display:none}}.ecosystem.no-motion .publish-flows circle{display:none}.ecosystem.no-motion{height:auto}.ecosystem.no-motion .ecosystem-stage{position:relative}

.channel-thumbnail{position:relative;display:block;height:68px;overflow:hidden;margin:0 0 12px;background:#e7ebed}.channel-thumbnail img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}.channel-thumbnail>span{position:absolute;bottom:0;left:0;right:0;background:#071827e8;padding:5px 8px;color:#fff;font-size:11px;text-align:center}.missing-thumbnail{background:transparent;border:1px dashed #4c6677}.missing-thumbnail>span{top:0;display:flex;align-items:center;justify-content:center;background:transparent;color:#a9c0ce}.channel{cursor:zoom-in}.channel h3{margin-top:12px}.channel p{margin-bottom:12px}#missing-preview{padding:70px 35px;text-align:center;background:#edf2f4}#missing-preview p{line-height:1.8;color:#526c7c}@media(min-width:801px){.ecosystem-stage{padding-top:24px}.ecosystem-map{margin-top:15px}.group-identity{margin-bottom:12px}.channel-detail{margin-top:12px}.channel-detail dl{margin-top:8px}}@media(max-height:780px) and (min-width:801px){.channel-thumbnail{height:48px;margin-bottom:8px}.channel h3{margin-top:8px}.group-identity p{margin:7px 0}.ecosystem-heading h2{font-size:27px}.channel-detail dd{font-size:12px}.ecosystem-hint{display:none}}

.ecosystem-stage{display:flex;flex-direction:column;justify-content:center}.ecosystem-heading{margin-bottom:15px}.ecosystem-map{width:100%}.channel-thumbnail{height:105px;margin-bottom:0}.channel{padding:16px}.channel-number{display:none}.channel h3{margin:0 0 18px}.drm-core{max-width:760px;padding:24px}.group-identity{margin-bottom:30px}.ecosystem-heading .eyebrow{display:none}.ecosystem-heading h2{font-size:clamp(30px,3.4vw,50px)}@media(max-width:800px){.channel-thumbnail{height:82px}.drm-core{padding:18px}.ecosystem-stage{display:block}.group-identity{margin-bottom:20px}}
/* Multiple client journeys, with room for future sites. */
.audience-title h2{font-size:clamp(29px,3.3vw,48px)}.ecosystem-heading .audience-title p{margin:12px 0 0;font-size:clamp(17px,1.8vw,25px);color:#9ddabc}.channel-expansion{display:flex;align-items:center;justify-content:flex-end;gap:13px;margin:0 0 20px;opacity:var(--reveal)}.expansion-plus{display:grid;place-items:center;width:38px;height:38px;border:1px dashed #40ba8d;border-radius:50%;color:#75e0b5;font-size:25px;flex-shrink:0}.channel-expansion p{margin:0;font-size:13px;line-height:1.6;color:#c7d9df}.channel-expansion strong{display:block;font-size:11px;font-weight:400;color:#85bda9}.publish-flows{height:110px}.flow-paths{stroke-width:1.5}.publish-flows circle{fill:#70e3b4}.group-identity{margin-bottom:18px}.drm-core{border-top:2px solid #40ba8d}
@media(max-height:780px) and (min-width:801px){.ecosystem-stage{padding-top:20px;padding-bottom:20px}.ecosystem-heading{margin-bottom:8px}.ecosystem-heading h2{font-size:30px}.ecosystem-heading .audience-title p{font-size:18px;margin-top:7px}.group-identity{margin-bottom:10px}.channel-expansion{margin-bottom:12px}.channel-thumbnail{height:75px}.channel h3{font-size:21px;margin-bottom:12px}.publish-flows{height:75px}.drm-core{padding:16px}}
@media(max-width:800px){.channel-expansion{opacity:1;justify-content:flex-start;margin:20px 0}.channel-expansion p{font-size:12px}.publish-flows{height:95px}.ecosystem-heading h2{font-size:35px}}
@media(prefers-reduced-motion:reduce){.channel-expansion{opacity:1}}
/* The incoming client thread becomes four streams landing on the channels. */
.client-thread:before{display:none}.incoming-strand{position:absolute;top:0;bottom:0;left:calc(5% + 90% * (var(--strand) + .5) / 4);width:1px;background:#40ba8d}.incoming-strand i{position:absolute;left:-3px;width:7px;height:7px;border-radius:50%;background:#70e3b4;box-shadow:0 0 9px #40ba8d88;animation:incoming-fall 4.2s linear infinite;animation-delay:var(--delay)}@keyframes incoming-fall{from{top:-8px}to{top:100%}}
.incoming-flows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}.incoming-flows path{fill:none;stroke:#40ba8d;stroke-width:1.3}.incoming-flows circle{fill:#70e3b4;filter:drop-shadow(0 0 3px #40ba8d)}.ecosystem-heading,.ecosystem-map{position:relative;z-index:1}.audience-title,.group-identity,.channel-expansion{background:#0a1828}.audience-title{padding:12px 16px 12px 0}.channel-grid{padding-top:32px}.channel{background:#0a1828}.ecosystem.no-motion .incoming-flows circle{display:none}
@media(prefers-reduced-motion:reduce){.incoming-strand i,.incoming-flows circle{display:none}}
.incoming-strand{width:2px}.incoming-strand i{width:8px;height:8px;left:-3px}.incoming-flows path{stroke-width:2}.incoming-flows circle{r:4px}
/* Fade out before the endpoint; short paths keep the line without crowded dots. */
@keyframes incoming-fall{0%{top:-8px;opacity:0}6%{opacity:1}80%{opacity:1}94%{opacity:0}100%{top:100%;opacity:0}}
.incoming-flows.short-stream circle{display:none}