{{-- Shown below Tailwind lg (1024px). Workspace is desktop-only. --}}
<div class="fixed inset-0 z-[9999] flex flex-col items-center justify-center bg-[#F3F4F8] px-6 py-10 text-center lg:hidden" role="alert">
    <div class="w-full max-w-md rounded-2xl border border-[#ECECEC] bg-white p-8 shadow-sm">
        <div class="flex flex-col items-center gap-3 text-center">
            @include('partials.platform-brand-mark', ['brandSize' => 'lg'])
        </div>
        <h1 class="mt-6 text-xl font-bold text-[#111111] leading-snug">Please use a desktop computer</h1>
        <p class="mt-4 text-sm text-[#5A5A5A] leading-relaxed">This workspace is not available on phones or tablets. Open it on a laptop or desktop with a full-size browser window (at least 1024px wide).</p>
    </div>
</div>