Priority escalation card

Create an urgent support escalation panel with Tailwind CSS. Use a max-w-lg card with a red-tinted header strip holding a warning glyph, a heading reading "Production incident?" and a line stating this route wakes an on-call engineer. The body starts with a bordered checklist of three criteria that qualify — customer-facing outage, data loss risk, or a security incident — each with a check glyph, followed by a muted line asking people to use normal support otherwise, with a link. Then a phone number as a large monospaced link, a "Start a priority chat" dark button and a copyable incident reference in a bordered row. Under it, a two-column block giving the current on-call region and the average pickup time. Finish with a muted footnote about false alarms being fine and never held against anyone.

<section class="mx-auto max-w-lg px-6 py-14">
  <div class="overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-sm">
    <div class="flex items-start gap-3.5 border-b border-red-200 bg-red-50 px-7 py-5">
      <span class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-red-100 text-red-600"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M4.5 18a9 9 0 1 1 15 0"/><path d="m12 14 4-4"/><path d="M8 18h8"/></svg></span>
      <div>
        <h1 class="text-lg font-semibold text-red-900">Production incident?</h1>
        <p class="mt-0.5 text-sm text-red-800">This route pages an on-call engineer directly, day or night.</p>
      </div>
    </div>

    <div class="p-7">
      <p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">Use this if</p>
      <div class="mt-3 space-y-2.5 rounded-xl border border-neutral-200 p-4 text-sm text-neutral-700">
        <p class="flex items-start gap-2.5"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg> <span>Your customers are seeing errors or an outage</span></p>
        <p class="flex items-start gap-2.5"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg> <span>Data is being lost, duplicated or corrupted</span></p>
        <p class="flex items-start gap-2.5"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg> <span>You suspect a security incident or exposed credential</span></p>
      </div>
      <p class="mt-3 text-xs leading-relaxed text-neutral-500">
        Anything else — including things that are annoying but not urgent — belongs in <a href="#" class="font-medium text-neutral-700 underline underline-offset-2 hover:text-neutral-900">normal support</a>, which is faster than you would expect.
      </p>

      <a href="#" class="mt-6 block text-center font-mono text-2xl font-semibold tracking-tight text-neutral-900 underline underline-offset-8">+31 10 421 8899</a>

      <button class="mt-5 w-full rounded-xl bg-neutral-900 py-3 text-sm font-medium text-white transition hover:bg-neutral-800">Start a priority chat</button>

      <div class="mt-4 flex items-center gap-3 rounded-xl border border-neutral-200 bg-neutral-50 px-4 py-3">
        <div class="min-w-0 flex-1">
          <p class="text-[11px] uppercase tracking-widest text-neutral-400">Quote this reference</p>
          <p class="mt-0.5 truncate font-mono text-sm text-neutral-900">ws_studioform · plan_scale</p>
        </div>
        <button class="shrink-0 rounded-lg border border-neutral-200 bg-white px-2.5 py-1.5 text-xs font-medium text-neutral-600 transition hover:bg-neutral-100">Copy</button>
      </div>

      <div class="mt-6 grid grid-cols-2 gap-4 border-t border-neutral-200 pt-5 text-center">
        <div>
          <p class="text-sm font-medium text-neutral-900">Europe · Rotterdam</p>
          <p class="mt-0.5 text-xs text-neutral-500">On call right now</p>
        </div>
        <div>
          <p class="text-sm font-medium text-neutral-900">4 minutes</p>
          <p class="mt-0.5 text-xs text-neutral-500">Average pickup, last 90 days</p>
        </div>
      </div>

      <p class="mt-6 text-center text-xs leading-relaxed text-neutral-400">
        If it turns out not to be an incident, that is genuinely fine. We would rather be woken for a false alarm than read about a real one in the morning.
      </p>
    </div>
  </div>
</section>