/* utilities.css — small static utility set replacing the Tailwind Play CDN.
   Only the classes actually used by index.html are defined here, so the page needs
   no third-party stylesheet/script and the CSP can stay locked to 'self'. */

/* layout */
.relative { position: relative; }
.block { display: block; }
.hidden { display: none; }
.flex { display: flex; }
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.min-h-screen { min-height: 100vh; }
.mx-auto { margin-left: auto; margin-right: auto; }
.text-center { text-align: center; }

/* gaps */
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }

/* vertical rhythm */
.space-y-3 > * + * { margin-top: .75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }

/* max widths */
.max-w-md { max-width: 28rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }

/* margins */
.mb-1 { margin-bottom: .25rem; } .mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; }   .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; }
.mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }   .mt-5 { margin-top: 1.25rem; } .mt-10 { margin-top: 2.5rem; }

/* padding */
.p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; }
.pt-1 { padding-top: .25rem; } .pt-12 { padding-top: 3rem; }
.pb-6 { padding-bottom: 1.5rem; } .pb-16 { padding-bottom: 4rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }

/* typography */
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.underline { text-decoration: underline; }
.tracking-wide { letter-spacing: .025em; }

/* responsive padding used on cards */
@media (min-width: 640px) {
  .sm\:p-8 { padding: 2rem; }
  .sm\:p-9 { padding: 2.25rem; }
}