/* Critical CSS - Loads before any JavaScript to prevent layout shifts */
/* Grid layouts */
.grid{display:grid}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Flexbox */
.flex{display:flex}
.flex-col{flex-direction:column}
.flex-row{flex-direction:row}
.flex-shrink-0{flex-shrink:0}
.items-start{align-items:flex-start}
.items-center{align-items:center}
.items-baseline{align-items:baseline}
.justify-between{justify-content:space-between}

/* Spacing */
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}
.mb-2{margin-bottom:.5rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.mb-12{margin-bottom:3rem}
.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}
.mt-10{margin-top:2.5rem}

/* Padding */
.p-3{padding:.75rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.pb-4{padding-bottom:1rem}

/* Positioning */
.relative{position:relative}
.absolute{position:absolute}
.sticky{position:sticky}
.top-0{top:0}

/* Visibility */
.hidden{display:none}

/* Z-index */
.z-50{z-index:50}

/* Width */
.w-full{width:100%}

/* Aspect ratio */
.aspect-\[366\/228\]{aspect-ratio:366/228}

/* Borders */
.border{border-width:1px}
.rounded-lg{border-radius:.5rem}
.rounded-md{border-radius:.375rem}
.overflow-hidden{overflow:hidden}

/* Colors - critical backgrounds/text only */
.bg-gray-100{background-color:rgb(243 244 246)}
.bg-gray-50{background-color:rgb(249 250 251)}
.bg-neutral-50{background-color:rgb(250 250 250)}
.text-gray-900{color:rgb(17 24 39)}
.text-gray-600{color:rgb(75 85 99)}
.border-gray-200{border-color:rgb(229 231 235)}
.border-gray-300{border-color:rgb(209 213 219)}

/* Responsive breakpoints */
@media(min-width:640px){
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sm\:mt-16{margin-top:4rem}
  .sm\:px-5{padding-left:1.25rem;padding-right:1.25rem}
  .sm\:py-4\.5{padding-top:1.125rem;padding-bottom:1.125rem}
}

@media(min-width:768px){
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:gap-4{gap:1rem}
  .md\:pb-0{padding-bottom:0}
  .md\:py-6{padding-top:1.5rem;padding-bottom:1.5rem}
  .md\:p-4{padding:1rem}
  .md\:text-base{font-size:1rem;line-height:1.5rem}
  .md\:text-sm{font-size:.875rem;line-height:1.25rem}
}

@media(min-width:1024px){
  .lg\:block{display:block}
  .lg\:hidden{display:none}
  .lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
  .lg\:grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}
  .lg\:col-span-3{grid-column:span 3/span 3}
  .lg\:col-span-12{grid-column:span 12/span 12}
  .lg\:pb-8{padding-bottom:2rem}
}

@media(min-width:1280px){
  .xl\:col-span-6{grid-column:span 6/span 6}
}