/* Phones and touch screens: every tap target at least 44px (WCAG 2.5.5). Desktop keeps its density. */
@media (max-width: 900px), (pointer: coarse) {
  .btn, a.btn, button.btn { min-height: 44px; }
  footer nav a, footer a.flex, nav a.flex, nav a.transition, [data-nav-menu] a { display: inline-flex; align-items: center; min-height: 44px; }
  [data-nav-toggle] { min-width: 44px; min-height: 44px; }
  a.inline-flex.items-center { min-height: 44px; }
  .st-tabs button { min-height: 44px; }
  .st-input { height: 48px; }
  .st-pals { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
  .st-pal { aspect-ratio: auto; min-height: 44px; }
  .st-color { min-height: 48px; }
  .wb-edit { display: inline-flex; align-items: center; min-height: 44px; }
}

/* pricing: 4 plans (1 → 2 → 4 columns). Not in the prebuilt Tailwind file, so defined here. */
.plans4 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .plans4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .plans4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .plan-pop { transform: translateY(-12px); } }