/* Gated diagrams inlined on the pages (card 28G-C39). Wide drawing from 760 px, the phone drawing below. */
.dg{display:block;width:100%;max-width:1152px;margin-inline:auto}
.dg svg{display:block;width:100%;height:auto}
.dg-compact{display:none}
@media (max-width:759px){.dg-wide{display:none}.dg-compact{display:block}}
.dg-pad{margin-block:32px}
.dg-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.mo-off .dg svg *{animation:none!important}
html.mo-off .dg svg [data-s]{transition:none}
/* the drawings need the full stage width to keep their labels readable: the two-column players and the host switch stack */
.host2:has(.dg),.devplayer:has(.dev-fig-dg),.forkplayer:has(.fk-fig-dg){grid-template-columns:minmax(0,1fr);row-gap:32px}
.devplayer:has(.dev-fig-dg) > :has(.dev-fig-dg),.forkplayer:has(.fk-fig-dg) > :has(.fk-fig-dg){order:-1}
.needs-grid.needs-dg{display:block}
.needs-dg .needs-units{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;margin-top:24px;align-items:start}
.needs-dg .needs-units > .dg{width:100%}
.needs-grid.needs-dg .needs-units .unit{grid-column:1!important;grid-row:auto!important}
.needs-dg .needs-units .dg-wide{max-width:760px}
.needs-dg .unit{justify-content:start}
.needs-dg .unit{display:grid;grid-template-columns:230px minmax(0,1fr);column-gap:48px;align-items:center;margin:0}
.needs-dg .unit .ugrid{margin-bottom:0}
@media (max-width:759px){.needs-dg .unit{grid-template-columns:minmax(0,1fr);row-gap:20px}}
.tc-an{margin:var(--s2,16px) 0 0}
.tc-card > .tc-an{margin:0;max-width:1152px}
.tc-an img{display:block;width:100%;height:auto;border-radius:12px}
.tc-an figcaption{margin-top:8px;font-size:14px;line-height:1.4;opacity:.8}
.nf-draw .dg{max-width:640px}
.nf-draw .gk .fl{fill:var(--left)}
.nf-draw .gk .scr{fill:revert-layer}