/* ============================================================
   PRODUCT PAGES, SIMPLE VERSION (prefix ps-)
   What is left of the simple version's own styles: the written feature
   list of the phone-app pages (.ps-list, .ps-one) and the numbered section
   eyebrow for the pages that do not load foxpert-pro.css. The hero feature
   tiles and the flow diagram were replaced by the isometric scenes in
   product-scenes.css. Load after foxpert-pro.css where a page uses it;
   tokens come from mindfox-redesign.css. No new colours.
   ============================================================ */


/* ══ APP FEATURE LIST (mobile-app pages) ═══════════════════
   The phone-app pages keep their written feature list; with the slideshow gone
   it spans the section as two columns of cards (one on a phone).
   ────────────────────────────────────────────────────────── */
.mf-foxrt__inner.ps-one { grid-template-columns: minmax(0, 1fr); }
.ps-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
}
.ps-list .mf-foxrt__feature {
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}
.ps-list .mf-foxrt__feature-icon { width: 42px; height: 42px; }
.ps-list .mf-foxrt__feature-icon svg { width: 21px; height: 21px; }
.ps-list .mf-foxrt__feature strong { font-size: 15px; }
.ps-list .mf-foxrt__feature span { font-size: 13.5px; line-height: 1.55; }

/* ══ NUMBERED SECTION EYEBROW ══════════════════════════════
   The section heading's eyebrow with its number badge, as the fp pages draw
   it (.fp-eyebrow, .fp-eyebrow__num in foxpert-pro.css), for the simple
   pages that do not load that sheet (FoXpert Web, FoXpert for iPad, Fox RT
   Guide, Fox Radiation Safety). The declarations are copied unchanged, so the
   pages that load both sheets render as before; only these two plain class
   rules are copied (foxpert-pro.css has no context rules for them).
   ────────────────────────────────────────────────────────── */
.fp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}
.fp-eyebrow__num {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.68rem;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--orange-glow);
  border: 1px solid rgba(255, 123, 28, 0.22);
  letter-spacing: 0.06em;
}

/* ══ RESPONSIVE ════════════════════════════════════════════ */
@media (max-width: 560px) {
  .ps-list { grid-template-columns: minmax(0, 1fr); }
}