.a-stage{position:relative}

.a-stage__item + .a-stage__item{margin-top:var(--s7)}

.a-topo{width:100%;height:auto;display:block;overflow:visible}
@media (max-width:880px){
  
  .a-topo{min-width:720px}
  .a-topo .lbl{font-size:19px}
  .a-topo .lbl3p{font-size:16px}
  .a-topo .role{font-size:16px}
}

:root{
  --topo-ink:var(--text);
  --topo-ink-3:var(--label);
  --topo-role:var(--knect);
  --topo-link:var(--key);
  --topo-glow:none;
  --topo-node:rgba(17,26,28,.30);
  --topo-3p-fill:#e6ecec;
  --topo-3p-line:rgba(17,26,28,.55);
}
.g-argue,.g-device{
  --topo-ink:var(--on-deep);
  --topo-ink-3:var(--on-deep-3);
  --topo-role:var(--signal);
  --topo-link:var(--signal-soft);
  --topo-glow:drop-shadow(0 0 7px rgba(0,249,249,.55));
  --topo-node:rgba(166,249,249,.30);
  --topo-3p-fill:#0b2e3d;
  --topo-3p-line:rgba(166,249,249,.34);
}

.a-topo .wireless{stroke:var(--topo-link);stroke-width:6;stroke-linecap:round;
  stroke-dasharray:22 17;fill:none;filter:var(--topo-glow)}
.a-topo .wired{stroke:var(--wired);stroke-width:5;fill:none;stroke-linejoin:round;
  stroke-linecap:round}

.a-topo .lbl{font-family:var(--body);font-size:15px;font-weight:600;fill:var(--topo-ink)}
.a-topo .lbl3p{font-family:var(--body);font-size:13px;font-weight:600;fill:var(--topo-ink-3);
  letter-spacing:.05em}
.a-topo .role{font-family:var(--display);font-size:13px;font-weight:700;fill:var(--topo-role);
  letter-spacing:.08em}
.a-topo .packet{fill:var(--topo-link);filter:var(--topo-glow)}
.a-topo .node{fill:none;stroke:var(--topo-node);stroke-width:1.5}

.a-state .enter{opacity:0;transform:translate3d(0,8px,0) scale(.985);transform-box:fill-box;
  transform-origin:center;transition:opacity 520ms var(--ease-settle),transform 520ms var(--ease-settle)}
.a-stage__item.is-in .enter{opacity:1;transform:none}
.a-stage__item.is-in .enter:nth-of-type(2){transition-delay:80ms}
.a-stage__item.is-in .enter:nth-of-type(3){transition-delay:160ms}
.a-stage__item.is-in .enter:nth-of-type(4){transition-delay:240ms}
.a-stage__item.is-in .enter:nth-of-type(n+5){transition-delay:320ms}

.a-state .wireless{clip-path:inset(0 100% 0 0)}
.a-stage__item.is-in .wireless{clip-path:inset(0 -6% 0 0);
  transition:clip-path 900ms var(--ease-settle) 260ms}
.a-state .wired{stroke-dasharray:400;stroke-dashoffset:400}
.a-stage__item.is-in .wired{stroke-dashoffset:0;
  transition:stroke-dashoffset 620ms var(--ease-settle) 120ms}

.a-stage__caption{max-width:56ch;margin-bottom:var(--s5)}
.a-stage__name{font-family:var(--display);font-weight:700;font-size:clamp(21px,2vw,25px);
  line-height:1.15;margin:0;color:var(--on-deep)}
.a-stage__sub{font-size:16px;line-height:1.45;color:var(--on-deep-2);margin:var(--s2) 0 0}

.a-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--s5);margin:var(--s5) 0 0}

.a-facts--wide{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.a-facts > div{padding:0}
.a-facts dt{font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--knect);margin:0 0 var(--s2)}
.a-facts dd{margin:0;font-size:16.5px;line-height:1.5;color:var(--text-2)}

.g-argue .a-facts dt,.g-device .a-facts dt{color:var(--wash)}
.g-argue .a-facts dd,.g-device .a-facts dd{color:var(--on-deep-2)}

@media (max-width:620px){
  .a-facts{gap:var(--s4)}
}

@media (prefers-reduced-motion:reduce){
  
  .a-state .enter{opacity:1;transform:none;transition:none}
  .a-state .wireless{clip-path:none;transition:none}
  .a-state .wired{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
}

/* A diagram drawn twice: the wide drawing, and a version laid out for a phone,
   so nothing on a small screen scrolls sideways or hides behind the edge. */
.a-topo-phone{display:none}
@media (max-width:620px){
  .a-topo-wide{display:none}
  .a-topo-phone{display:block}
  .a-topo-phone .a-topo{min-width:0;max-width:420px;margin-inline:auto}
  .a-topo-phone .a-topo .lbl{font-size:13.5px}
  .a-topo-phone .a-topo .lbl3p{font-size:11px}
  .a-topo-phone .a-topo .role{font-size:11.5px}
  .a-topo-phone .a-topo .wireless{stroke-width:4;stroke-dasharray:14 11}
}

/* A Bluetooth link from the phone: shorter reach than the radio, so a finer dotted line. */
.a-topo .ble{fill:none;stroke:var(--topo-link);stroke-width:2.5;stroke-dasharray:1 7;stroke-linecap:round;opacity:.85}
.a-topo .cloud{fill:var(--topo-3p-fill);stroke:var(--topo-3p-line);stroke-width:2}
.a-topo .phone{fill:var(--topo-3p-fill);stroke:var(--topo-3p-line);stroke-width:2}
.a-topo .phone-screen{fill:rgba(166,249,249,.14)}