Steps Horizontal

<section class="ws-steps bg-[var(--ws-steps-bg)] py-20">
  <div class="mx-auto max-w-5xl px-6">
    <div class="text-center">
      <h2 class="text-3xl font-bold tracking-tight text-[var(--ws-steps-text)] sm:text-4xl">How it works</h2>
      <p class="mt-3 text-lg text-[var(--ws-steps-text-soft)]">Get started in four simple steps.</p>
    </div>

    <div class="mt-16">
      <!-- Desktop: horizontal -->
      <div class="hidden sm:block">
        <div class="relative flex items-start justify-between">
          <!-- Connector line -->
          <div class="absolute left-[calc(12.5%+20px)] right-[calc(12.5%+20px)] top-5 h-0.5 bg-[var(--ws-steps-line)]" aria-hidden="true"></div>

          <div class="relative flex w-1/4 flex-col items-center text-center">
            <div class="flex h-10 w-10 items-center justify-center rounded-full bg-[var(--ws-steps-accent)] text-sm font-bold text-[var(--ws-steps-accent-text)]">1</div>
            <h3 class="mt-4 text-base font-semibold text-[var(--ws-steps-text)]">Create account</h3>
            <p class="mt-2 text-sm text-[var(--ws-steps-text-soft)]">Sign up in seconds with your email or social account.</p>
          </div>

          <div class="relative flex w-1/4 flex-col items-center text-center">
            <div class="flex h-10 w-10 items-center justify-center rounded-full bg-[var(--ws-steps-accent)] text-sm font-bold text-[var(--ws-steps-accent-text)]">2</div>
            <h3 class="mt-4 text-base font-semibold text-[var(--ws-steps-text)]">Configure project</h3>
            <p class="mt-2 text-sm text-[var(--ws-steps-text-soft)]">Set up your workspace and invite team members.</p>
          </div>

          <div class="relative flex w-1/4 flex-col items-center text-center">
            <div class="flex h-10 w-10 items-center justify-center rounded-full bg-[var(--ws-steps-accent)] text-sm font-bold text-[var(--ws-steps-accent-text)]">3</div>
            <h3 class="mt-4 text-base font-semibold text-[var(--ws-steps-text)]">Import data</h3>
            <p class="mt-2 text-sm text-[var(--ws-steps-text-soft)]">Connect your existing tools or upload data directly.</p>
          </div>

          <div class="relative flex w-1/4 flex-col items-center text-center">
            <div class="flex h-10 w-10 items-center justify-center rounded-full border-2 border-[var(--ws-steps-accent)] text-sm font-bold text-[var(--ws-steps-accent)]">4</div>
            <h3 class="mt-4 text-base font-semibold text-[var(--ws-steps-text)]">Go live</h3>
            <p class="mt-2 text-sm text-[var(--ws-steps-text-soft)]">Launch your project and start tracking results.</p>
          </div>
        </div>
      </div>

      <!-- Mobile: vertical -->
      <div class="sm:hidden">
        <div class="relative space-y-8 pl-10">
          <!-- Vertical connector -->
          <div class="absolute bottom-0 left-[19px] top-0 w-0.5 bg-[var(--ws-steps-line)]" aria-hidden="true"></div>

          <div class="relative">
            <div class="absolute -left-10 flex h-10 w-10 items-center justify-center rounded-full bg-[var(--ws-steps-accent)] text-sm font-bold text-[var(--ws-steps-accent-text)]">1</div>
            <h3 class="text-base font-semibold text-[var(--ws-steps-text)]">Create account</h3>
            <p class="mt-1 text-sm text-[var(--ws-steps-text-soft)]">Sign up in seconds with your email or social account.</p>
          </div>

          <div class="relative">
            <div class="absolute -left-10 flex h-10 w-10 items-center justify-center rounded-full bg-[var(--ws-steps-accent)] text-sm font-bold text-[var(--ws-steps-accent-text)]">2</div>
            <h3 class="text-base font-semibold text-[var(--ws-steps-text)]">Configure project</h3>
            <p class="mt-1 text-sm text-[var(--ws-steps-text-soft)]">Set up your workspace and invite team members.</p>
          </div>

          <div class="relative">
            <div class="absolute -left-10 flex h-10 w-10 items-center justify-center rounded-full bg-[var(--ws-steps-accent)] text-sm font-bold text-[var(--ws-steps-accent-text)]">3</div>
            <h3 class="text-base font-semibold text-[var(--ws-steps-text)]">Import data</h3>
            <p class="mt-1 text-sm text-[var(--ws-steps-text-soft)]">Connect your existing tools or upload data directly.</p>
          </div>

          <div class="relative">
            <div class="absolute -left-10 flex h-10 w-10 items-center justify-center rounded-full border-2 border-[var(--ws-steps-accent)] text-sm font-bold text-[var(--ws-steps-accent)]">4</div>
            <h3 class="text-base font-semibold text-[var(--ws-steps-text)]">Go live</h3>
            <p class="mt-1 text-sm text-[var(--ws-steps-text-soft)]">Launch your project and start tracking results.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>