Goal progress bars

Create a goals progress block with Tailwind CSS: a bordered rounded-2xl card titled with the current quarter and a small "Updated today" note. Inside, three or four goal rows, each with a label on the left, a current-versus-target value on the right, and a thin rounded progress track below with a filled bar of a different width per row. Use a dark fill for on-track goals and an amber fill for the one that is behind, with a tiny status word beneath it.

<section class="mx-auto max-w-2xl px-6 py-16">
  <div class="rounded-2xl border border-neutral-200 bg-white p-8">
    <div class="flex items-center justify-between">
      <h2 class="text-lg font-semibold text-neutral-900">Q3 company goals</h2>
      <span class="text-xs text-neutral-400">Updated today</span>
    </div>
    <div class="mt-8 space-y-7">
      <div>
        <div class="flex items-baseline justify-between text-sm">
          <span class="font-medium text-neutral-900">Net new ARR</span>
          <span class="text-neutral-500">$1.8M <span class="text-neutral-300">/</span> $2.2M</span>
        </div>
        <div class="mt-2 h-2 w-full overflow-hidden rounded-full bg-neutral-100">
          <div class="h-full w-[82%] rounded-full bg-neutral-900"></div>
        </div>
      </div>
      <div>
        <div class="flex items-baseline justify-between text-sm">
          <span class="font-medium text-neutral-900">Enterprise logos</span>
          <span class="text-neutral-500">14 <span class="text-neutral-300">/</span> 20</span>
        </div>
        <div class="mt-2 h-2 w-full overflow-hidden rounded-full bg-neutral-100">
          <div class="h-full w-[70%] rounded-full bg-neutral-900"></div>
        </div>
      </div>
      <div>
        <div class="flex items-baseline justify-between text-sm">
          <span class="font-medium text-neutral-900">Support CSAT</span>
          <span class="text-neutral-500">4.3 <span class="text-neutral-300">/</span> 4.8</span>
        </div>
        <div class="mt-2 h-2 w-full overflow-hidden rounded-full bg-neutral-100">
          <div class="h-full w-[45%] rounded-full bg-amber-500"></div>
        </div>
        <p class="mt-1.5 text-xs text-amber-600">Behind pace</p>
      </div>
    </div>
  </div>
</section>