/* ============================================================
   Utility classes — replaces Tailwind CDN
   All classes that were used across the site HTML files.
   ============================================================ */

/* --- Base reset (previously provided by Tailwind preflight) --- */
a { text-decoration: none; color: inherit; }

/* --- Container --- */
.container, .container-fluid { width: 100%; }
@media (min-width: 640px)  { .container { max-width: 640px;  } }
@media (min-width: 768px)  { .container { max-width: 768px;  } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }
@media (min-width: 1536px) { .container { max-width: 1536px; } }

/* --- Display --- */
.block        { display: block; }
.inline-block { display: inline-block; }
.inline-flex  { display: inline-flex; }
.flex         { display: flex; }
.grid         { display: grid; }
.hidden       { display: none; }

/* --- Flexbox --- */
.flex-wrap    { flex-wrap: wrap; }
.flex-col     { flex-direction: column; }
.flex-row     { flex-direction: row; }
.items-center { align-items: center; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.justify-start   { justify-content: flex-start; }
.self-stretch    { align-self: stretch; }
.grow    { flex-grow: 1; }
.grow-0  { flex-grow: 0; }

/* --- Grid --- */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.col-span-1  { grid-column: span 1 / span 1; }
.col-span-2  { grid-column: span 2 / span 2; }

/* --- Gap --- */
.gap-2   { gap: 8px; }
.gap-5   { gap: 20px; }
.gap-8   { gap: 32px; }
.gap-10  { gap: 40px; }
.gap-x-3 { column-gap: 12px; }
.gap-x-5 { column-gap: 20px; }
.gap-x-8 { column-gap: 32px; }
.gap-y-10 { row-gap: 40px; }

/* --- Order --- */
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }

/* --- Padding --- */
.p-3  { padding: 12px; }
.p-4  { padding: 16px; }
.px-1 { padding-left: 4px;  padding-right: 4px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.py-3 { padding-top: 12px;  padding-bottom: 12px; }
.py-4 { padding-top: 16px;  padding-bottom: 16px; }
.py-5 { padding-top: 20px;  padding-bottom: 20px; }
.py-8 { padding-top: 32px;  padding-bottom: 32px; }
.py-10 { padding-top: 40px; padding-bottom: 40px; }
.py-12 { padding-top: 48px; padding-bottom: 48px; }
.py-14 { padding-top: 56px; padding-bottom: 56px; }
.pb-4 { padding-bottom: 16px; }
.pl-2 { padding-left: 8px; }
.pt-4 { padding-top: 16px; }

/* --- Margin --- */
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }
.mt-auto { margin-top: auto; }
.ml-3  { margin-left: 12px; }
.ml-4  { margin-left: 16px; }
.ml-5  { margin-left: 20px; }
.mr-1  { margin-right: 4px; }
.mt-2  { margin-top: 8px; }
.mt-10 { margin-top: 40px; }
.mb-0  { margin-bottom: 0; }
.mb-2  { margin-bottom: 8px; }
.mb-3  { margin-bottom: 12px; }
.mb-4  { margin-bottom: 16px; }
.mb-5  { margin-bottom: 20px; }
.mb-8  { margin-bottom: 32px; }
.mb-10 { margin-bottom: 40px; }
.mb-12 { margin-bottom: 48px; }
.mb-14 { margin-bottom: 56px; }
.mb-24 { margin-bottom: 96px; }
.my-10 { margin-top: 40px; margin-bottom: 40px; }
.my-14 { margin-top: 56px; margin-bottom: 56px; }

/* --- Sizing --- */
.w-full { width: 100%; }
/* Keep full-width images in proportion — without this they inherit their
   height="" attribute and render squished (e.g. dashboard/careers banners). */
img.w-full { height: auto; }
.w-auto { width: auto; }
.w-10   { width: 40px; }
.h-full { height: 100%; }
.h-10   { height: 40px; }
.max-w-full { max-width: 100%; }

/* --- Position & overflow --- */
.relative        { position: relative; }
.overflow-hidden { overflow: hidden; }
.z-10            { z-index: 10; }

/* --- Typography --- */
.text-center    { text-align: center; }
.text-left      { text-align: left; }
.text-black     { color: #000; }
.text-white     { color: #fff; }
.text-gray-400  { color: #9ca3af; }
.text-lg        { font-size: 18px; line-height: 28px; }
.font-semibold  { font-weight: 600; }
.uppercase      { text-transform: uppercase; }
.capitalize     { text-transform: capitalize; }
.cursor-pointer { cursor: pointer; }

/* --- Backgrounds & borders --- */
.bg-gray-100    { background-color: #f3f4f6; }
.bg-transparent { background-color: transparent; }
.border         { border-width: 1px; border-style: solid; }
.border-b       { border-bottom-width: 1px; border-bottom-style: solid; }
.border-black   { border-color: #000; }
.border-dashed  { border-style: dashed; }
.border-slate-400 { border-color: #94a3b8; }
.rounded-lg     { border-radius: 8px; }

/* --- Misc --- */
.space-y-6 > * + * { margin-top: 24px; }
.focus\:outline-none:focus { outline: none; }

/* ============================================================
   Responsive: sm (≥ 640px)
   ============================================================ */
@media (min-width: 640px) {
  .sm\:flex        { display: flex; }
  .sm\:flex-row    { flex-direction: row; }
  .sm\:order-1     { order: 1; }
  .sm\:text-left   { text-align: left; }
  .sm\:gap-14      { gap: 56px; }
  .sm\:gap-x-10    { column-gap: 40px; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:mb-10       { margin-bottom: 40px; }
  .sm\:mb-12       { margin-bottom: 48px; }
  .sm\:w-1\/2      { width: 50%; }
  .sm\:py-14       { padding-top: 56px; padding-bottom: 56px; }
  .sm\:py-10       { padding-top: 40px; padding-bottom: 40px; }
  .sm\:py-5        { padding-top: 20px; padding-bottom: 20px; }
  .sm\:p-5         { padding: 20px; }
  .sm\:px-3        { padding-left: 12px; padding-right: 12px; }
}

/* ============================================================
   Responsive: md (≥ 768px)
   ============================================================ */
@media (min-width: 768px) {
  .md\:grid        { display: grid; }
  .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\:col-span-1  { grid-column: span 1 / span 1; }
  .md\:col-span-2  { grid-column: span 2 / span 2; }
  .md\:gap-4       { gap: 16px; }
  .md\:gap-5       { gap: 20px; }
  .md\:gap-10      { gap: 40px; }
  .md\:gap-14      { gap: 56px; }
  .md\:max-w-md    { max-width: 28rem; }
  .md\:mb-8        { margin-bottom: 32px; }
  .md\:mb-20       { margin-bottom: 80px; }
  .md\:my-20       { margin-top: 80px; margin-bottom: 80px; }
  .md\:p-6         { padding: 24px; }
  .md\:p-10        { padding: 40px; }
  .md\:py-8        { padding-top: 32px;  padding-bottom: 32px; }
  .md\:py-10       { padding-top: 40px;  padding-bottom: 40px; }
  .md\:py-14       { padding-top: 56px;  padding-bottom: 56px; }
  .md\:py-16       { padding-top: 64px;  padding-bottom: 64px; }
  .md\:py-20       { padding-top: 80px;  padding-bottom: 80px; }
}

/* ============================================================
   Responsive: lg (≥ 1024px)
   ============================================================ */
@media (min-width: 1024px) {
  .lg\:block       { display: block; }
  .lg\:flex        { display: flex; }
  .lg\:grid        { display: grid; }
  .lg\:inline-flex { display: inline-flex; }
  .lg\:hidden      { display: none; }
  .lg\:order-1     { order: 1; }
  .lg\:order-2     { order: 2; }
  .lg\:order-3     { order: 3; }
  .lg\:grow-0      { flex-grow: 0; }
  .lg\:justify-between { justify-content: space-between; }
  .lg\:justify-end     { justify-content: flex-end; }
  .lg\:justify-start   { justify-content: flex-start; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:gap-0  { gap: 0; }
  .lg\:gap-8  { gap: 32px; }
  .lg\:gap-10 { gap: 40px; }
  .lg\:gap-20 { gap: 80px; }
  .lg\:max-w-xl { max-width: 36rem; }
  .lg\:mb-0   { margin-bottom: 0; }
  .lg\:mb-14  { margin-bottom: 56px; }
  .lg\:mb-20  { margin-bottom: 80px; }
  .lg\:mb-24  { margin-bottom: 96px; }
  .lg\:mb-36  { margin-bottom: 144px; }
  .lg\:ml-auto { margin-left: auto; }
  .lg\:mt-0   { margin-top: 0; }
  .lg\:mt-10  { margin-top: 40px; }
  .lg\:mt-20  { margin-top: 80px; }
  .lg\:my-0   { margin-top: 0; margin-bottom: 0; }
  .lg\:px-20  { padding-left: 80px;  padding-right: 80px; }
  .lg\:py-10  { padding-top: 40px;   padding-bottom: 40px; }
  .lg\:py-16  { padding-top: 64px;   padding-bottom: 64px; }
  .lg\:py-20  { padding-top: 80px;   padding-bottom: 80px; }
  .lg\:py-24  { padding-top: 96px;   padding-bottom: 96px; }
  .lg\:py-28  { padding-top: 112px;  padding-bottom: 112px; }
  .lg\:py-32  { padding-top: 128px;  padding-bottom: 128px; }
  .lg\:w-1\/3 { width: 33.333333%; }
  .lg\:w-2\/3 { width: 66.666667%; }
  .lg\:w-auto { width: auto; }
  .lg\:w-full { width: 100%; }
}

/* ============================================================
   Responsive: xl (≥ 1280px)
   ============================================================ */
@media (min-width: 1280px) {
  .xl\:gap-16      { gap: 64px; }
  .xl\:gap-20      { gap: 80px; }
  .xl\:gap-24      { gap: 96px; }
  .xl\:gap-32      { gap: 128px; }
  .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xl\:mb-8        { margin-bottom: 32px; }
  .xl\:mb-48       { margin-bottom: 192px; }
  .xl\:p-14        { padding: 56px; }
  .xl\:px-28       { padding-left: 112px; padding-right: 112px; }
  .xl\:py-20       { padding-top: 80px;   padding-bottom: 80px; }
  .xl\:w-3\/5      { width: 60%; }
}

/* ============================================================
   Responsive: 2xl (≥ 1536px)
   ============================================================ */
@media (min-width: 1536px) {
  .2xl\:gap-24 { gap: 96px; }
  .2xl\:py-8   { padding-top: 32px;  padding-bottom: 32px; }
  .2xl\:py-20  { padding-top: 80px;  padding-bottom: 80px; }
}