Discount programmes panel

Design a discount eligibility section with Tailwind CSS. Start with a heading, a paragraph explaining that the standard price is not the only price, and a muted line naming how many organisations are on a reduced rate. Below, a grid of four programme cards: education, registered non-profits, early-stage startups and open-source maintainers. Each card is a bordered rounded-xl tile with a glyph tile, the programme name, the discount as a bold percentage or "free", two lines describing who qualifies, and a footer row with a small "What we need from you" line and a text link to apply. Give the open-source card a neutral-900 background with inverted text so one option stands out. Under the grid, a three-step application strip — apply, we verify, discount applied within two working days — laid out with numerals and hairline separators, plus a line about annual re-verification.

<section class="mx-auto max-w-5xl px-6 py-16">
  <div class="max-w-2xl">
    <h2 class="text-3xl font-semibold tracking-tight text-neutral-900">The list price is not the only price</h2>
    <p class="mt-3 leading-relaxed text-neutral-500">
      If you are teaching, running a charity, or maintaining something the rest of us depend on, you should not be paying the same as a bank.
    </p>
    <p class="mt-2 text-sm text-neutral-400">1,840 organisations are currently on a reduced rate.</p>
  </div>

  <div class="mt-10 grid gap-4 sm:grid-cols-2">
    <div class="rounded-xl border border-neutral-200 bg-white p-6">
      <span class="grid h-10 w-10 place-items-center rounded-lg bg-neutral-100 text-neutral-700"><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="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9l-6-6Z"/><path d="M14 3v6h6M8 13h8M8 17h6"/></svg></span>
      <p class="mt-4 text-sm font-semibold text-neutral-900">Education</p>
      <p class="mt-1 text-2xl font-semibold tracking-tight text-neutral-900">50% off</p>
      <p class="mt-2 text-sm leading-relaxed text-neutral-500">Accredited schools, colleges and universities, for teaching and academic research. Students get the full product free.</p>
      <div class="mt-5 border-t border-neutral-100 pt-4">
        <p class="text-xs text-neutral-400">We need: an institutional email address</p>
        <a href="#" class="mt-1.5 inline-block text-sm font-medium text-neutral-900 underline-offset-4 hover:underline">Apply <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="M14 4h6v6M20 4l-9 9"/><path d="M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6"/></svg></a>
      </div>
    </div>

    <div class="rounded-xl border border-neutral-200 bg-white p-6">
      <span class="grid h-10 w-10 place-items-center rounded-lg bg-neutral-100 text-neutral-700"><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"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3"/></svg></span>
      <p class="mt-4 text-sm font-semibold text-neutral-900">Non-profits</p>
      <p class="mt-1 text-2xl font-semibold tracking-tight text-neutral-900">40% off</p>
      <p class="mt-2 text-sm leading-relaxed text-neutral-500">Registered charities and NGOs of any size. The discount applies to every plan, including Enterprise.</p>
      <div class="mt-5 border-t border-neutral-100 pt-4">
        <p class="text-xs text-neutral-400">We need: your registration number</p>
        <a href="#" class="mt-1.5 inline-block text-sm font-medium text-neutral-900 underline-offset-4 hover:underline">Apply <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="M14 4h6v6M20 4l-9 9"/><path d="M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6"/></svg></a>
      </div>
    </div>

    <div class="rounded-xl border border-neutral-200 bg-white p-6">
      <span class="grid h-10 w-10 place-items-center rounded-lg bg-neutral-100 text-neutral-700"><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="M14 5c2.4-2.4 5.2-2.1 5.2-2.1s.3 2.8-2.1 5.2l-5.6 5.6-4.2-4.2L14 5Z"/><path d="m9 8-4.5.5L3 10l4 1m5 4 1 4 1.5-1.5.5-4.5M7 17c-1 1-3 1-3 1s0-2 1-3"/></svg></span>
      <p class="mt-4 text-sm font-semibold text-neutral-900">Early-stage startups</p>
      <p class="mt-1 text-2xl font-semibold tracking-tight text-neutral-900">First year free</p>
      <p class="mt-2 text-sm leading-relaxed text-neutral-500">Under 20 people, under $2M raised, incorporated in the last three years. Then 30% off in year two.</p>
      <div class="mt-5 border-t border-neutral-100 pt-4">
        <p class="text-xs text-neutral-400">We need: a company number and headcount</p>
        <a href="#" class="mt-1.5 inline-block text-sm font-medium text-neutral-900 underline-offset-4 hover:underline">Apply <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="M14 4h6v6M20 4l-9 9"/><path d="M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6"/></svg></a>
      </div>
    </div>

    <div class="rounded-xl bg-neutral-900 p-6 text-white">
      <span class="grid h-10 w-10 place-items-center rounded-lg bg-white/10"><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="M15 21v-3.5c0-1 .1-1.4-.5-2 2.8-.3 5.7-1.4 5.7-6.2 0-1.4-.5-2.5-1.3-3.4.1-.3.6-1.7-.1-3.4 0 0-1.1-.3-3.6 1.3a12.4 12.4 0 0 0-6.5 0C6.2 2.2 5.1 2.5 5.1 2.5c-.7 1.7-.2 3.1-.1 3.4a5 5 0 0 0-1.3 3.4c0 4.8 2.9 5.9 5.7 6.2-.5.5-.6 1-.5 2V21"/><path d="M9 18c-2.7.8-2.7-1.3-3.8-1.6"/></svg></span>
      <p class="mt-4 text-sm font-semibold">Open-source maintainers</p>
      <p class="mt-1 text-2xl font-semibold tracking-tight">Free, always</p>
      <p class="mt-2 text-sm leading-relaxed text-neutral-400">Any project under an OSI-approved licence with public contribution history. No headcount test and no expiry.</p>
      <div class="mt-5 border-t border-neutral-800 pt-4">
        <p class="text-xs text-neutral-500">We need: a link to the repository</p>
        <a href="#" class="mt-1.5 inline-block text-sm font-medium text-white underline-offset-4 hover:underline">Apply <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="M14 4h6v6M20 4l-9 9"/><path d="M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6"/></svg></a>
      </div>
    </div>
  </div>

  <div class="mt-8 grid gap-px overflow-hidden rounded-2xl border border-neutral-200 bg-neutral-200 sm:grid-cols-3">
    <div class="bg-white px-6 py-5">
      <p class="font-mono text-xs text-neutral-400">01</p>
      <p class="mt-1.5 text-sm font-medium text-neutral-900">Send the form</p>
      <p class="mt-1 text-sm text-neutral-500">Four fields and one link. No deck required.</p>
    </div>
    <div class="bg-white px-6 py-5">
      <p class="font-mono text-xs text-neutral-400">02</p>
      <p class="mt-1.5 text-sm font-medium text-neutral-900">A person checks it</p>
      <p class="mt-1 text-sm text-neutral-500">Usually the same day, always by a human.</p>
    </div>
    <div class="bg-white px-6 py-5">
      <p class="font-mono text-xs text-neutral-400">03</p>
      <p class="mt-1.5 text-sm font-medium text-neutral-900">Rate applied</p>
      <p class="mt-1 text-sm text-neutral-500">Within two working days, backdated to your last invoice.</p>
    </div>
  </div>

  <p class="mt-4 text-xs text-neutral-400">Programmes are re-verified once a year. If circumstances change we will tell you before anything on the invoice does.</p>
</section>