/* ============================================================
   StaffLink homepage — mobile-only compact overrides.
   Plain hand-written CSS, NOT Tailwind/Vite output — no build
   step needed, upload and it works immediately.

   Scoped strictly to max-width:639px so it can NEVER affect
   tablet/desktop (Tailwind's own sm: breakpoint starts at
   min-width:640px — the two ranges never overlap).

   Selectors target the *existing* Tailwind classes already
   shipped in the compiled CSS (via [class*="..."] substring
   matching, which needs no bracket-escaping) plus a handful of
   plain marker classes (mc-hero, mc-overview, ...) added to each
   section's root <section> tag in the Blade files.
   ============================================================ */

@media (max-width: 639px) {

    /* ===== Hero ===== */
    .mc-hero { padding: 1.25rem 1rem 2rem !important; }
    .mc-hero div[class*="rounded-[36px]"] { border-radius: 22px !important; }
    .mc-hero div[class*="grid gap-8"] { gap: 1.25rem !important; padding: 1.5rem 1.25rem !important; }
    .mc-hero h1 { font-size: 1.5rem !important; }
    .mc-hero h2 { font-size: 1rem !important; }
    .mc-hero h3 { font-size: 1rem !important; }
    .mc-hero div[class="grid gap-4"] { gap: 0.75rem !important; }
    .mc-hero div[class*="bg-[#1f5f46]/80"] { padding: 1rem !important; }
    .mc-hero div[class*="items-stretch gap-3"] { gap: 0.5rem !important; }
    .mc-hero div[class*="min-h-[91px]"] { min-height: 64px !important; padding: 0.625rem 0.75rem !important; }
    .mc-hero div[class*="gap-4 text-center"] { gap: 0.625rem !important; }
    .mc-hero div[class*="h-10 w-10 shrink-0"] { height: 1.75rem !important; width: 1.75rem !important; }
    .mc-hero svg[class*="h-[2rem]"] { height: 1rem !important; width: 1rem !important; }
    .mc-hero p[class*="text-[0.8rem]"] { font-size: 0.68rem !important; }
    .mc-hero div[class*="mt-4 grid gap-3"] { margin-top: 0.75rem !important; gap: 0.5rem !important; }
    .mc-hero a[class*="px-4 py-3"] { padding: 0.625rem 1rem !important; font-size: 0.72rem !important; }

    /* ===== Overview ===== */
    .mc-overview { padding-left: 1rem !important; padding-right: 1rem !important; padding-bottom: 2.5rem !important; }
    .mc-overview div[class*="rounded-[32px]"] { border-radius: 22px !important; padding: 1.75rem 1.25rem !important; gap: 1.5rem !important; }
    .mc-overview div[class*="grid gap-6 sm:grid-cols-2"] { gap: 1rem !important; }
    .mc-overview div[class="rounded-2xl px-5 py-6"] { padding: 1rem !important; }
    .mc-overview div[class*="h-10 w-10 items-center justify-center rounded-full border"] { height: 2rem !important; width: 2rem !important; }
    .mc-overview h3 { font-size: 1rem !important; margin-top: 0.75rem !important; }
    .mc-overview p[class*="mt-2 text-sm text-[#6b6b66]"] { font-size: 0.75rem !important; margin-top: 0.375rem !important; }
    .mc-overview button { padding: 0.5rem 1rem !important; font-size: 0.75rem !important; }

    /* ===== Industries ===== */
    .mc-industries { padding: 1rem 1rem 2.5rem !important; }
    .mc-industries div[class*="mt-3 max-w-4xl"] { margin-top: 0.5rem !important; }
    .mc-industries h2 { font-size: 1.5rem !important; }
    .mc-industries p[class*="mt-3 max-w-3xl"] { font-size: 0.75rem !important; margin-top: 0.5rem !important; }
    .mc-industries div[class*="mt-10 grid gap-6"] { margin-top: 1.5rem !important; gap: 1rem !important; }
    .mc-industries article { padding: 1rem !important; }
    .mc-industries div[class*="h-11 w-11"] { height: 2.25rem !important; width: 2.25rem !important; }
    .mc-industries h3 { font-size: 1rem !important; margin-top: 0.75rem !important; }
    .mc-industries p[class*="mt-2 text-sm leading-relaxed"] { font-size: 0.75rem !important; margin-top: 0.375rem !important; }

    /* ===== Staffing / career categories ===== */
    .mc-staffing { padding-top: 2rem !important; padding-bottom: 2rem !important; padding-left: 1rem !important; padding-right: 1rem !important; }
    .mc-staffing p[class*="tracking-[0.3em]"] { font-size: 0.65rem !important; }
    .mc-staffing h2 { font-size: 1.5rem !important; margin-top: 0.5rem !important; }
    .mc-staffing p[class*="mt-3 max-w-2xl"] { font-size: 0.75rem !important; margin-top: 0.5rem !important; }
    .mc-staffing div[class*="mt-10 grid gap-6"] { margin-top: 1.5rem !important; gap: 1rem !important; }
    .mc-staffing div[class*="flex-1 flex-col p-5"] { padding: 0.875rem !important; }
    .mc-staffing h3[class*="min-h-[3rem]"] { min-height: 2.5rem !important; font-size: 0.875rem !important; }

    /* ===== CTA / Get Started ===== */
    .mc-cta { padding: 1.5rem 1rem !important; }
    .mc-cta div[class*="rounded-[32px]"] { border-radius: 22px !important; padding: 1.75rem 1.25rem !important; }
    .mc-cta div[class*="flex-wrap items-center justify-between gap-6"] { gap: 1rem !important; }
    .mc-cta h2 { font-size: 1.5rem !important; }
    .mc-cta p[class="mt-2 text-sm text-white/80"] { font-size: 0.75rem !important; margin-top: 0.375rem !important; }
    .mc-cta button[class*="rounded-full bg-[#b28b2e]"] { padding: 0.375rem 1rem !important; font-size: 0.75rem !important; }
    .mc-cta div[class*="mt-8 grid gap-6"] { margin-top: 1.25rem !important; gap: 1rem !important; }
    .mc-cta div[class*="rounded-2xl bg-white/15"] { padding: 1rem !important; }
    .mc-cta div[class*="h-9 w-9"] { height: 1.75rem !important; width: 1.75rem !important; }
    .mc-cta h3[class*="mt-4 text-base"] { font-size: 0.875rem !important; margin-top: 0.75rem !important; }

    /* ===== FAQ ===== */
    .mc-faq { padding: 0.75rem 1rem 2rem !important; }
    .mc-faq div[class*="max-w-6xl gap-6"] { gap: 1rem !important; }
    .mc-faq div[class*="overflow-hidden rounded-[30px]"] { border-radius: 18px !important; }
    .mc-faq iframe { height: 220px !important; }
    .mc-faq div[class*="rounded-[30px] bg-white"] { border-radius: 18px !important; padding: 1rem !important; }
    .mc-faq h2 { font-size: 1.25rem !important; margin-bottom: 1rem !important; }
    .mc-faq details { padding: 0.75rem 1rem !important; }
    .mc-faq summary { gap: 0.75rem !important; }
    .mc-faq summary span[class*="text-base font-semibold text-[#1f5f46]"] { font-size: 0.875rem !important; }
    .mc-faq summary span[class*="h-6 w-6"] { height: 1.25rem !important; width: 1.25rem !important; }
    .mc-faq .faq-answer-inner { font-size: 0.75rem !important; margin-top: 0.5rem !important; padding-top: 0.5rem !important; }

}