/* ==========================================================================
   Pixel-grid illustrations (js/pixel-grid.js draws them). Canvases take their size
   from these rules; the script fills them with round dots on a fixed grid.
   ========================================================================== */
canvas[data-px] { display: block; }

/* ---------- homepage services: one portrait illustration per service ---------- */
.service__art { width: auto; height: min(36vh, 360px); aspect-ratio: 26 / 38; max-width: 100%; margin-bottom: 18px; }

/* ---------- feature icons (supermarkets: retail media) ---------- */
.px-icon { width: 72px; height: 72px; margin-bottom: 8px; }
.px-icon + h3::before { display: none; }   /* the icon replaces the tile's lit square */

/* ---------- network illustrations (fuel, supermarkets) ---------- */
.pxnet { max-width: 1180px; margin: clamp(36px, 4.5vw, 56px) auto 0; display: grid; gap: 18px; }
.pxnet__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.pxnet__modes { display: flex; flex-wrap: wrap; gap: 8px; }
.pxnet__modes button { font: 500 14px/1 var(--f-body, Inter, sans-serif); color: rgba(255,255,255,.74); padding: 10px 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; transition: color .2s, border-color .2s, background .2s; }
.pxnet__modes button:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.pxnet__modes button[aria-pressed="true"] { color: #fff; background: var(--accent, #dc4f35); border-color: var(--accent, #dc4f35); }
.pxnet__status { font: 500 13px/1 "Pixelify Sans", monospace; letter-spacing: .04em; color: rgba(255,255,255,.7); }
.pxnet__status b { color: var(--accent, #dc4f35); font-weight: 500; }
.pxnet__panel { padding: clamp(12px, 2vw, 24px); border-radius: var(--radius, 14px); border: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, #15162b 0%, #121326 100%); }
.pxnet__stage { position: relative; margin-bottom: 40px; }
.pxnet--super .pxnet__stage { margin-bottom: 56px; }
.pxnet__stage canvas { width: 100%; height: auto; }
.pxnet--fuel .pxnet__stage canvas { aspect-ratio: 110 / 44; }
.pxnet--super .pxnet__stage canvas { aspect-ratio: 110 / 50; }
.pxnet__labels { position: absolute; inset: 0; pointer-events: none; }
.pxnet__labels span { position: absolute; transform: translate(-50%, 0); font-size: 11px; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.5); white-space: nowrap; transition: color .3s; }
.pxnet__labels span.lit { color: #fff; }
.pxnet__legend { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: rgba(255,255,255,.6); }
.pxnet__legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; }
@media (max-width: 700px) {
  .pxnet__labels span { font-size: 8px; letter-spacing: .02em; }
  /* phones: the wide diagrams scroll sideways rather than shrinking past legibility */
  .pxnet__panel { overflow-x: auto; }
  .pxnet__stage { min-width: 620px; }
}