Clinical Stats Section with Highlighted Metrics

<section class="text-emerald-50 bg-[#0b0f0e] w-full border-emerald-900/60 border-t">
<link id="all-fonts-link-font-playfair" rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&amp;display=swap">
<style id="all-fonts-style-font-playfair">
  .font-playfair {
    font-family: 'Playfair Display', serif !important;
  }
</style>
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-14 lg:py-20">
    <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-10 mb-10">
      <div class="max-w-xl">
        <h2 class="font-playfair text-3xl sm:text-4xl lg:text-[2.7rem] leading-tight tracking-tight">
          The Numbers
          <span class="italic text-emerald-300">behind quiet skin</span>
        </h2>
        <p class="mt-4 text-sm sm:text-base text-emerald-100/80">
          A calm barrier shows up in the data first. These are the results our community sees
          after making the nightly ritual a habit.
        </p>
      </div>
      <div class="flex flex-col items-start gap-4 max-w-sm">
        <p class="text-xs sm:text-sm text-emerald-200/80">
          Strategy, science, and consistency—your skin’s long-term support system, bottled.
        </p>
        <button class="inline-flex items-center gap-2 rounded-full bg-emerald-400 text-emerald-950 px-4 py-2 text-xs sm:text-sm font-medium hover:bg-emerald-300 transition-colors">
          View full clinical report
          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" aria-hidden="true">
            <path fill="currentColor" d="M13.293 5.293a1 1 0 0 1 1.414 0l4 4a.997.997 0 0 1 .083.094l.007.01l.007.01a.997.997 0 0 1 .083.148l.003.01l.005.01A1 1 0 0 1 19.999 11v.003a1 1 0 0 1-.293.704l-4 4a1 1 0 0 1-1.414-1.414L16.586 12H6a1 1 0 1 1 0-2h10.586l-3.293-3.293a1 1 0 0 1 0-1.414Z" class=""></path>
          </svg>
        </button>
      </div>
    </div>

    <div class="grid gap-5 lg:gap-6 lg:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)_minmax(0,1fr)]">
      <!-- Stat 1 -->
      <article
        class="rounded-3xl bg-emerald-300 text-emerald-950 px-6 py-7 sm:px-8 sm:py-9 shadow-sm border border-emerald-500/60 flex flex-col justify-between">
        <div class="">
          <p class="text-xs sm:text-sm font-medium tracking-[0.18em] uppercase text-emerald-900/70 mb-3">
            COMMUNITY
          </p>
          <p class="text-4xl sm:text-5xl lg:text-6xl font-semibold tracking-tight">
            180k
          </p>
          <p class="mt-1 text-sm sm:text-base text-emerald-950/80">
            Nightly rituals completed
          </p>
        </div>
        <p class="mt-5 text-xs sm:text-sm text-emerald-950/80 max-w-md">
          From first cleanse to final cream, over one hundred eighty thousand evening routines have been logged by our
          most consistent customers.
        </p>
      </article>

      <!-- Stat 2 -->
      <article
        class="rounded-3xl bg-[#0e1513] px-6 py-7 sm:px-7 sm:py-8 border border-emerald-900/70 flex flex-col justify-between">
        <div>
          <p class="text-xs sm:text-sm font-medium tracking-[0.18em] uppercase text-emerald-400 mb-3">
            SKIN COMFORT
          </p>
          <div class="flex items-baseline gap-1">
            <p class="text-4xl sm:text-5xl font-semibold tracking-tight">
              93
            </p>
            <span class="text-lg sm:text-xl font-medium tracking-tight">%</span>
          </div>
          <p class="mt-1 text-sm sm:text-base text-emerald-100/85">
            Less dryness reported
          </p>
        </div>
        <p class="mt-5 text-xs sm:text-sm text-emerald-200/80 max-w-xs">
          After 6 weeks, ninety-three percent of users noticed fewer dry patches and a softer, more even texture.
        </p>
      </article>

      <!-- Stat 3 -->
      <article
        class="rounded-3xl bg-[#111715] px-6 py-7 sm:px-7 sm:py-8 border border-emerald-900/70 flex flex-col justify-between">
        <div class="">
          <p class="text-xs sm:text-sm font-medium tracking-[0.18em] uppercase text-emerald-300 mb-3">
            ROUTINE LOYALTY
          </p>
          <div class="flex items-baseline gap-1">
            <p class="text-4xl sm:text-5xl font-semibold tracking-tight">
              27
            </p>
            <span class="text-lg sm:text-xl font-medium tracking-tight">days</span>
          </div>
          <p class="mt-1 text-sm sm:text-base text-emerald-100/85">
            Average streak length
          </p>
        </div>
        <p class="mt-5 text-xs sm:text-sm text-emerald-200/80 max-w-xs">
          Most members stay with their ritual for at least twenty-seven consecutive nights before switching or adding
          new steps.
        </p>
      </article>
    </div>
  </div>
</section>