/* p-up200a: the before/after drawing sits on the dark band. proto.css only
   re-colours .box, .line and .muted there, so the uP200A panel, the bars and
   the leaders get their dark versions here. On phones a stacked copy of the
   drawing replaces the wide one, capped so it does not grow on small tablets. */
.up2-dark .sec-head p,
.up2-dark .dia figcaption { color: var(--dark-muted); }
.up2-dark .dia .box-ours { fill: var(--blue); fill-opacity: .22; stroke: var(--sky); }
.up2-dark .dia .fill-ours { fill: var(--sky); }
.up2-dark .dia .fill-soft { fill: var(--dark-muted); fill-opacity: .5; }
.up2-dark .dia .soft { stroke: var(--dark-muted); stroke-opacity: .4; }
.up2-dark .dia .accent { stroke: var(--sky); }
/* two class selectors, to outrank proto.css's `.dia svg { display: block }` */
.up2-dia .up2-dia-v { display: none; max-width: 420px; }
@media (max-width: 700px) {
  .up2-dia .up2-dia-h { display: none; }
  .up2-dia .up2-dia-v { display: block; }
}

.up2-dark .steps-h { margin-top: 80px; }

/* scope band: a caption on a light band, two short machine notes, and the
   small print kept small (.split-copy > p would set it at 18px) */
.up2-scope .split-media { margin: 0; }
.up2-scope .split-media figcaption { color: var(--muted); }
.up2-scope .entities { gap: 24px; }
.up2-scope .entities > div { align-content: start; }
.up2-scope .entities p { font-size: 15px; line-height: 1.6; }
.up2-scope .split-copy > .fine { font-size: 14px; }
.up2-scope .split-copy > .callout { font-size: 14px; margin-top: 8px; }