/* ===== minimal utility layer (Tailwind-like, no build step needed) ===== */
.flex{display:flex}
.grid{display:grid}
.hidden{display:none}
.inline-flex{display:inline-flex}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.text-center{text-align:center}
.relative{position:relative}
.absolute{position:absolute}
.inset-0{inset:0}
.mx-auto{margin-left:auto;margin-right:auto}

.gap-1{gap:4px} .gap-2{gap:8px} .gap-3{gap:12px} .gap-4{gap:16px}
.gap-6{gap:24px} .gap-8{gap:32px} .gap-10{gap:40px} .gap-14{gap:56px}

.mt-2{margin-top:8px} .mt-3{margin-top:12px} .mt-4{margin-top:16px}
.mt-6{margin-top:24px} .mt-8{margin-top:32px} .mt-10{margin-top:40px} .mt-12{margin-top:48px}
.mb-5{margin-bottom:20px} .mb-8{margin-bottom:32px}
.p-4{padding:16px} .p-6{padding:24px}
.py-3{padding-top:12px;padding-bottom:12px}
.py-4{padding-top:16px;padding-bottom:16px}

.max-w-2xl{max-width:42rem}
.w-full{width:100%}

.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}

@media (min-width:768px){
  .md\:flex{display:flex}
  .md\:hidden{display:none}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:767px){
  .grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .container .grid{grid-template-columns:1fr}
  .container .grid.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

[data-mobile-menu].open{max-height:420px !important}