/* ── p-audience.css — what /facility-managers and /industrial add to the Commercial page's components ─────────────
   Both pages are built from app/p-commercial.css (loaded before this file) and wear commercial's blue
   (body[data-f="commercial"], theme.css). <main> is "pc pa", so every .pc rule applies; this file only adds:
   the hero's top space (p-commercial.css keys it to data-page="commercial"), the page's hidden glyph sprite, the
   still dashboard screen (/facility-managers 01), the machine tags in the four family cards and the "For sites like"
   row (/industrial 01). Colours, sizes and radii are the site's tokens (theme.css), as in p-commercial.css. */

/* the nav is fixed and floats, so the hero supplies the top space itself (as on /commercial) */
body.s6-body:is([data-page="facility-managers"], [data-page="industrial"]):not(.has-hero) .s6-page > main { padding-top: 0; }

/* the glyphs the glass icons use (#pa-fm, #pa-plant) */
.pa-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 01 (/facility-managers): one still level of commercial's dashboard screen; no tabs, so nothing steps */
.pa-screen .pc-scr-foot { justify-content: flex-start; }

/* 01 (/industrial): the machines of each family, as small tags under the card's heading */
.pa-fams .p6-point { gap: 12px; }
.pa-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pa-tags li { padding: 6px 10px; border-radius: 99px; background: var(--ct); color: var(--cd); font: 600 12.5px/1.25 var(--font); }
.pa-where { margin-top: 14px; grid-template-columns: auto minmax(0, 1fr); }

@media (max-width: 900px) {
  .pa-where { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .pa-tags li { font-size: 12px; }
}