/* index.responsive.css — public terminal site (index.html): small-screen overrides (must stay last). One of the index.*.css files, linked in order from index.html. */
/* Two layers, so it is never a question of which rule wins: "page" holds the normal stylesheet rules, "element" holds exact
   styles for single elements. Anything in "element" beats anything in "page", whatever the selectors look like. */
@layer page, element;

@layer page {
/* ─────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────── */
@media (max-width: 600px) {
  .hero { flex-direction: column; align-items: center; text-align: center; }
  .hero-text .tagline { max-width: 100%; }
  nav { justify-content: center; gap: 10px 18px; }
  nav > span[style] { margin-left: 0 !important; width: 100%; justify-content: center; flex-wrap: wrap; }
  footer { flex-direction: column; gap: 8px; align-items: center; }
  .tools-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
  .tool-detail-tags, .tool-detail-platforms { display: none; }
}
}