/* Home #audiences: a small line drawing beside each roster row (audience-art.py). Replaces
   the console screens, which looked alike across the four audiences. The words keep the
   wide column; the drawing sits to the right, and under the words on phones. */
.roster-item:has(.roster-art){grid-template-columns:56px minmax(0,1fr) clamp(200px,32%,300px);
  align-items:start;row-gap:12px}
.roster-item:has(.roster-art) .roster-id,.roster-item:has(.roster-art) .roster-copy{grid-column:2}
.roster-art{grid-column:3;grid-row:1 / span 2;margin:0;align-self:center}
@media(max-width:1020px){.roster-item:has(.roster-art){grid-template-columns:44px minmax(0,1fr) clamp(180px,34%,280px)}}
@media(max-width:700px){
  .roster-item:has(.roster-art){grid-template-columns:44px minmax(0,1fr)}
  .roster-art{grid-column:2;grid-row:auto;max-width:320px;margin-top:6px}
}

.aa{display:block;width:100%;height:auto;overflow:visible;
  --aa-steel:color-mix(in srgb,var(--steel) 62%,transparent);
  --aa-faint:color-mix(in srgb,var(--steel) 34%,transparent)}
.aa *{stroke-linecap:round;stroke-linejoin:round}
.aa-plate{fill:var(--wash);stroke:var(--aa-faint)}
.aa-env{fill:var(--surface);stroke:var(--aa-faint)}
.aa-env.dash{stroke-dasharray:4 3;stroke:var(--aa-steel)}
.aa-tile{fill:var(--surface);stroke:var(--aa-steel);stroke-width:1.2}
.aa-app.acc .aa-tile{stroke:var(--amber)}
.aa-bar{stroke:var(--aa-faint)}
.aa-dot{fill:var(--amber)}
.aa-txt{stroke:var(--aa-faint);stroke-width:2.2}
.aa-ico{fill:none;stroke:var(--steel);stroke-width:1.3}
.aa-ico.acc{stroke:var(--amber)}
.aa-ico .fillbg{fill:var(--surface)}
.aa-ring{fill:var(--surface);stroke:color-mix(in srgb,var(--amber) 70%,transparent);stroke-width:1.3}
.aa-link{fill:none;stroke:var(--aa-steel);stroke-width:1.2}
.aa-link.acc{stroke:color-mix(in srgb,var(--amber) 80%,transparent)}
.aa-layer{fill:color-mix(in srgb,var(--steel) 38%,transparent)}
.aa-layer.acc{fill:var(--amber)}
.aa-border{fill:color-mix(in srgb,var(--amber) 5%,transparent);stroke:color-mix(in srgb,var(--amber) 70%,transparent);
  stroke-width:1.3;stroke-dasharray:6 5}
.aa-ext{opacity:.5}
.aa-off{fill:none;stroke:var(--muted);stroke-width:1.2;stroke-dasharray:2 3}
.aa-wire{fill:none;stroke:var(--aa-faint);stroke-width:1.2}
.aa-node{fill:var(--surface);stroke:var(--aa-steel);stroke-width:1.2}
.aa-node.acc{stroke:var(--amber)}
.aa-pulse{fill:none;stroke:var(--amber);stroke-width:2.6;stroke-dasharray:.14 1;stroke-dashoffset:.14;opacity:0}
/* Still frame (reduced motion): the end of each story. */
.aa-software .aa-move{transform:translateX(160px)}

@media (prefers-reduced-motion:no-preference){
  .aa [class*="aa-"]{transform-box:fill-box}
  .aa-link{stroke-dasharray:1}
  /* Enterprise: applications arrive one after another, each joining the same sign-in. */
  .aa-enterprise .aa-step .aa-app{animation:aa-pop 9s calc(var(--i) * .7s) infinite both}
  .aa-enterprise .aa-step .aa-link{animation:aa-draw 9s calc(var(--i) * .7s + .3s) infinite both}
  /* Systems integrators: the same approach is carried to each client in turn. */
  .aa-partners .aa-step .aa-link{animation:aa-draw 9s calc(var(--i) * .9s) infinite both}
  .aa-partners .aa-step .aa-copy{animation:aa-pop 9s calc(var(--i) * .9s + .5s) infinite both}
  /* Founders and ISVs: move clouds, then a private deployment for one customer. */
  .aa-software .aa-move{animation:aa-move 9s infinite both}
  .aa-software .aa-to-private{animation:aa-late-draw 9s infinite both}
  .aa-software .aa-private{animation:aa-late-pop 9s infinite both}
  /* Governments: work flows inside the boundary; the outside link stays off. */
  .aa-border{animation:aa-march 4s linear infinite}
  .aa-pulse{opacity:1;animation:aa-pulse 2.8s linear infinite}
  .aa-pulse.p2{animation-delay:.7s}.aa-pulse.p3{animation-delay:1.4s}.aa-pulse.p4{animation-delay:2.1s}
}
@keyframes aa-pop{0%{opacity:0;transform:translateY(-8px)}7%,70%{opacity:1;transform:none}77%,100%{opacity:0;transform:none}}
@keyframes aa-draw{0%{stroke-dashoffset:1;opacity:1}8%,70%{stroke-dashoffset:0;opacity:1}77%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes aa-move{0%,18%{transform:none;opacity:1}28%,80%{transform:translateX(160px);opacity:1}
  86%{transform:translateX(160px);opacity:0}88%{transform:none;opacity:0}96%,100%{transform:none;opacity:1}}
@keyframes aa-late-draw{0%,34%{stroke-dashoffset:1;opacity:1}42%,80%{stroke-dashoffset:0;opacity:1}86%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes aa-late-pop{0%,40%{opacity:0;transform:translateY(-8px)}47%,80%{opacity:1;transform:none}86%,100%{opacity:0;transform:none}}
@keyframes aa-march{to{stroke-dashoffset:-22}}
@keyframes aa-pulse{from{stroke-dashoffset:.14}to{stroke-dashoffset:-1}}