/* minimal utility classes for responsive padding and layout */
.px-4 { padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px) { .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 768px) { .md\:px-8 { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .lg\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; } }
@media (min-width: 1280px) { .xl\:px-12 { padding-left: 3rem; padding-right: 3rem; } }

.w-full { width: 100%; }
.max-w-sm { max-width: 24rem; }
@media (min-width: 768px) { .md\:max-w-md { max-width: 28rem; } }
@media (min-width: 1024px) { .lg\:max-w-lg { max-width: 32rem; } }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-6 { margin-bottom: 1.5rem; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
@media (min-width: 640px) { .sm\:flex-row { flex-direction: row; } }
.gap-2 { gap: 0.5rem; }
.text-lg { font-size: 1.125rem; }
@media (min-width: 640px) { .sm\:text-xl { font-size: 1.25rem; } }
@media (min-width: 1024px) { .lg\:text-2xl { font-size: 1.5rem; } }
.font-bold { font-weight: 700; }

/* optional helpers for non-tailwind pages */
@media (max-width: 768px) {
  .mobile-full { width: 100% !important; padding-left: 1rem; padding-right: 1rem; }
  .mobile-stack { display: block !important; }
}