/* Mobile layout and touch controls */
    html { scroll-padding-top: 6rem; }
    a:focus-visible, button:focus-visible, summary:focus-visible {
      outline: 2px solid var(--accent, var(--accent2, #e8ff47)); outline-offset: 4px;
    }
    .footer-links { flex-wrap: wrap; gap: 0.5rem 1rem; }
    .footer-links a, .nav-back {
      display: inline-flex; align-items: center; min-height: 44px;
      padding: 0.4rem 0;
    }
    .mobile-nav { display: none; }
    .mobile-nav summary {
      cursor: pointer; min-height: 44px; display: flex;
      align-items: center; padding: 0.5rem 0.75rem;
      border: 1px solid var(--border); border-radius: 4px;
      color: var(--text); font-family: var(--mono);
    }
    .mobile-nav summary::after { content: '+'; margin-left: 0.75rem; }
    .mobile-nav[open] summary::after { content: '\2212'; }
    .mobile-nav ul {
      list-style: none; position: absolute; right: 1.25rem;
      top: 100%; width: min(20rem, calc(100vw - 2.5rem));
      max-height: calc(100dvh - 6rem); overflow-y: auto;
      padding: 0.5rem; background: var(--bg2);
      border: 1px solid var(--border); border-radius: 4px;
    }
    .mobile-nav a {
      display: flex; align-items: center; min-height: 44px;
      padding: 0.6rem 0.75rem; color: var(--text);
      text-decoration: none; overflow-wrap: anywhere;
    }
    @media (max-width: 768px) {
      .nav-links { display: none; }
      .mobile-nav { display: block; }
      nav { padding: 0.5rem 1.25rem; gap: 0.75rem; }
      .footer-links a { font-size: 0.85rem; }
      footer { padding: 1.5rem 1.25rem; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation: none !important; transition: none !important; }
      .fade-in { opacity: 1; transform: none; }
    }


/* Keep each grid track within the available phone width. */
.stages-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem; margin-top: 3rem;
}
.stages-grid > *, .hero-grid > *, .parts-grid > *,
.pin-grid > *, .grid > *, .firmware-grid > * { min-width: 0; }
.stages-grid .etap-card > div:last-child { flex-wrap: wrap; }
.stages-grid a { overflow-wrap: anywhere; }
.stages-grid .etap-card > div:last-child a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.85rem; padding: 0.25rem 0;
}
.firmware-grid { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.pin-grid, .grid { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.summary-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.pin-row > *, .row > *, .summary-row > * { min-width: 0; overflow-wrap: anywhere; }
.back { white-space: normal; }
a.back, .back a { display: inline-flex; align-items: center; min-height: 44px; }
.table-wrap, .compare-wrap, .parts-table-wrap { max-width: 100%; }
.table-wrap:focus-visible, .compare-wrap:focus-visible, .parts-table-wrap:focus-visible {
  outline: 2px solid var(--accent, var(--accent2, #e8ff47)); outline-offset: 4px;
}
.flash-btn, .lcd-select { min-height: 44px; }
.lcd-select { font-size: 16px; }
.download-counter { flex-wrap: wrap; gap: 0.5rem; }
.firmware-card { overflow-wrap: anywhere; }
@media (max-width: 768px) {
  .stages-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .step-header { flex-direction: column; gap: 0.5rem; padding: 1rem; }
  .step-body { padding: 0 1rem 1rem; }
  .wip-card { padding: 1.5rem 1.25rem; }
  .nav-back { font-size: 0.75rem; text-align: right; }
  .nav-logo, nav .logo { flex-shrink: 0; }
  .pin-section, .summary-box, .card, .summary, .firmware-card { padding: 1.25rem 1rem; }
  .pin-row { grid-template-columns: 4.5rem minmax(0, 1fr); font-size: 0.8rem; }
  .row { grid-template-columns: 5rem minmax(0, 1fr); }
  .summary-row { grid-template-columns: 4.5rem minmax(0, 1fr); }
}
@media (max-width: 360px) {
  .gallery-grid { grid-template-columns: minmax(0, 1fr); }
  .etap-card { padding: 1.25rem; }
}