/* ---------------------------------------------------------------------------
   Utility classes — local replacement for the Tailwind 2.2.19 CDN build.
   Only the ~20 utilities the markup actually uses are defined here, which
   removes a ~300 KB render-blocking third-party stylesheet.
   Breakpoint mirrors Tailwind's `md` (768px).
   --------------------------------------------------------------------------- */

/* Display & layout */
.flex            { display: flex; }
.hidden          { display: none; }
.items-center    { align-items: center; }
.justify-between { justify-content: space-between; }
.w-full          { width: 100%; }

/* Horizontal rhythm — mirrors Tailwind's space-x-4 (1rem gap between children) */
.space-x-4 > * + * { margin-left: 1rem; }

/* Spacing */
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.mr-2  { margin-right: 0.5rem; }
.mx-1  { margin-left: 0.25rem; margin-right: 0.25rem; }

/* Typography */
.text-xl        { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl       { font-size: 1.5rem;  line-height: 2rem; }
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }
.text-center    { text-align: center; }
.text-primary   { color: var(--primary); }

/* Surfaces */
.bg-gray-50 { background-color: #F9FAFB; }

/* Responsive variants — declared after the base rules so they win at >=768px */
@media (min-width: 768px) {
    .md\:flex   { display: flex; }
    .md\:hidden { display: none; }
}