/* Explanatory diagrams, with no simulated measurements or product controls. */
.service-diagram{--diagram-color:#638832;--diagram-pale:#e5eed8;--diagram-line:#8ea76c;display:flex;flex-direction:column;justify-content:center;gap:24px;padding:35px 0;min-width:0}
.advertiser-diagram{--diagram-color:#ac6914;--diagram-pale:#fae6bf;--diagram-line:#d69c47}
.service-diagram:before{display:none}
.diagram-scene{width:100%;max-width:520px;position:relative}
.service-diagram figcaption{margin:0;font-size:12px;line-height:1.5;color:#607368;text-align:center}
.advertiser-diagram figcaption{color:#7c6a4b}
.publication-window{position:relative;z-index:1;border:1px solid #fff;border-radius:20px;background:#fffdf5;box-shadow:0 22px 45px -20px #3a582a42,0 3px 7px #44633108;overflow:hidden}
.diagram-window-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 18px;border-bottom:1px solid #6b874e26;color:#3d6146}
.diagram-window-bar b{font-size:16px;font-weight:650}
.window-dots{font-size:17px;letter-spacing:3px;color:#9cac8c;line-height:1}
.window-menu{font-size:22px;line-height:1;color:#869d76}
.diagram-articles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;padding:23px 18px 25px}
.diagram-article{border-top:4px solid #9ab275;padding-top:15px;animation:article-emphasis 9s ease-in-out infinite;animation-delay:calc(var(--item)*3s)}
.article-topic{display:block;color:#365b41;font-size:16px;font-weight:650;letter-spacing:-.025em}
.article-lines{display:grid;gap:7px;margin-top:16px}
.article-lines i{display:block;height:5px;background:#dce4d4;border-radius:3px}
.article-lines i:last-child{width:65%}
.diagram-routes{display:block;width:100%;height:88px;overflow:visible;fill:none;stroke-width:1.5}
.route-base{stroke:var(--diagram-line);opacity:.3}
.route-flow{stroke:var(--diagram-color);stroke-dasharray:6 110;stroke-linecap:round;animation:service-flow 7s linear infinite;opacity:.65}
.route-flow:nth-of-type(4n){animation-delay:-3s}
.reader-groups,.placement-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
/* Publisher: the stories are named; reader clusters stay anonymous.  The
   flowing connections communicate shared interests without suggesting that
   people themselves belong to fixed, named groups. */
.reader-groups{padding:3px 14px 0}
.reader-group{display:flex;align-items:center;justify-content:center;min-height:48px;color:#375d43;min-width:0}
.diagram-people{display:flex;justify-content:center;align-items:flex-end;color:var(--diagram-color);gap:0}
.diagram-people svg{width:29px;height:33px;flex:none;background:var(--diagram-pale);border-radius:50% 50% 10px 10px;padding:4px}
.diagram-people svg:nth-child(2){width:36px;height:43px;background:#fffdf5;box-shadow:0 4px 10px #39532612;z-index:1;margin:0 -7px}
.publisher-diagram .reader-group .diagram-people svg{background:#e4efd2;border:1px solid #8ba76a4a;box-shadow:0 5px 12px #52713c16}
.publisher-diagram .reader-group .diagram-people svg:nth-child(2){background:#f8fbf2;box-shadow:0 7px 15px #41652722}
.publisher-diagram .reader-group:nth-child(2) .diagram-people{transform:translateY(4px)}
.publisher-diagram .reader-group:nth-child(3) .diagram-people{transform:translateY(-2px)}
.diagram-summary{margin:23px auto 0;text-align:center;color:#3c6046;font-size:16px;line-height:1.5}
.target-audience{position:relative;z-index:1;width:87%;margin:auto;display:flex;flex-direction:column;align-items:center;gap:11px;padding:23px 12px;background:#fff9ed;border:1px solid #fff9;border-radius:24px;box-shadow:0 20px 40px -24px #96621759}
.target-audience b{font-size:23px;line-height:1.15;color:#925b10}
.target-audience>span:last-child{font-size:14px;line-height:1.5;text-align:center;color:#806a48}
.target-audience .diagram-people{margin-bottom:3px}
.target-audience .diagram-people svg{width:38px;height:43px;background:#f7dfb2}
.target-audience .diagram-people svg:nth-child(2){width:47px;height:55px;background:#fff2d7}
.advertiser-diagram .diagram-routes{height:74px}
.placement{text-align:center;min-width:0}
.placement-browser{background:#fffaf0;border:1px solid #fff;border-radius:12px;overflow:hidden;box-shadow:0 15px 25px -14px #96621745}
.mini-toolbar{display:block;padding:4px 9px;font-size:15px;line-height:1;letter-spacing:2px;text-align:left;background:#e8d7b94a;color:#b69b71}
.placement-content{display:flex;flex-direction:column;gap:7px;padding:12px 10px 15px}
.ad-slot{display:flex;align-items:center;justify-content:center;min-height:44px;border:1px solid #d6a65c;background:#f8dcaa;color:#83520e;font-size:14px;font-weight:650;border-radius:4px;animation:placement-emphasis 9s ease-in-out infinite;animation-delay:calc(var(--item)*3s)}
.placement-content i{height:4px;border-radius:4px;background:#e6ddca}
.placement-content i:last-child{width:70%}
.placement:nth-child(2) .ad-slot{order:2;min-height:62px}
.placement:nth-child(3) .ad-slot{order:1;min-height:44px}
.placement>b{display:block;margin-top:13px;color:#805819;font-size:14px;font-weight:600}
.advertiser-diagram .diagram-summary{color:#805819}
@keyframes service-flow{to{stroke-dashoffset:-232}}
@keyframes article-emphasis{0%,40%,100%{border-top-color:#9ab275}12%,28%{border-top-color:#456824}}
@keyframes placement-emphasis{0%,40%,100%{background:#f8dcaa}12%,28%{background:#f0bd68}}
.paused .service-diagram *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.service-diagram *{animation:none!important}}
@media(max-width:1100px) and (min-width:761px){.service-diagram{padding:20px 0}.diagram-articles{gap:8px;padding:18px 12px}.article-topic{font-size:14px}.reader-groups,.placement-grid{gap:8px}.reader-group>span:last-child{padding:5px 7px}.diagram-people svg{width:25px}.diagram-people svg:nth-child(2){width:31px}.ad-slot{font-size:12px}}
@media(max-width:760px){
 .service-story,.service-story+.service-story{gap:0;padding-bottom:28px}
 .service-story .service-copy{display:contents}
 .service-story .service-copy>.eyebrow{order:0}
 .service-story .service-copy>h3{order:1}
 .service-story .service-copy>p{order:2}
 .service-story .service-art.service-diagram{order:3;height:auto;min-height:0;flex:none;align-self:auto;margin:26px -10px 0;padding:25px 0 0;gap:15px}
 .service-story .service-copy>ul{order:4;margin-top:28px}
 .service-story .service-copy>.service-link{order:5;align-self:flex-start;margin-top:6px}
 .diagram-window-bar{padding:13px 12px}.diagram-window-bar b{font-size:14px}
 .diagram-articles{gap:9px;padding:18px 12px 22px}.article-topic{font-size:14px}
 .article-lines{margin-top:13px;gap:6px}.article-lines i{height:4px}
 .reader-groups,.placement-grid{gap:8px}.reader-groups{padding-left:8px;padding-right:8px}
 .diagram-routes{height:65px}.diagram-summary{font-size:14px;margin-top:19px}
 .target-audience{width:94%;padding:20px 12px}.target-audience b{font-size:22px}
 .advertiser-diagram .diagram-routes{height:65px}.placement-content{padding:10px 7px 13px;gap:6px}.ad-slot{font-size:12px}
 .service-copy li b,.service-copy li span{font-size:14px}
}
@media(max-width:360px){.service-story .service-art.service-diagram{margin-left:-14px;margin-right:-14px}.diagram-articles{gap:6px;padding-left:8px;padding-right:8px}.diagram-people svg{width:25px}.diagram-people svg:nth-child(2){width:31px}.placement-grid{gap:6px}}