Feature Media Left

<section class="ws-features bg-[var(--ws-features-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="grid items-center gap-12 lg:grid-cols-2 lg:gap-20">

      <!-- Media Block (left) -->
      <div class="order-2 lg:order-1">
        <div class="overflow-hidden rounded-2xl border border-[var(--ws-features-border)] bg-[var(--ws-features-card-bg)] shadow-lg">
          <div class="aspect-[4/3] p-6">
            <div class="h-full rounded-xl border border-[var(--ws-features-border)] bg-[var(--ws-features-bg)] p-4">
              <div class="mb-3 flex gap-2">
                <div class="h-2.5 w-2.5 rounded-full bg-red-400"></div>
                <div class="h-2.5 w-2.5 rounded-full bg-yellow-400"></div>
                <div class="h-2.5 w-2.5 rounded-full bg-green-400"></div>
              </div>
              <div class="space-y-2">
                <div class="h-4 w-3/4 rounded bg-[var(--ws-features-border)]"></div>
                <div class="h-3 w-full rounded bg-[var(--ws-features-border)] opacity-60"></div>
                <div class="h-3 w-5/6 rounded bg-[var(--ws-features-border)] opacity-60"></div>
                <div class="h-3 w-4/6 rounded bg-[var(--ws-features-border)] opacity-40"></div>
                <div class="mt-4 h-3 w-full rounded bg-[var(--ws-features-border)] opacity-60"></div>
                <div class="h-3 w-3/4 rounded bg-[var(--ws-features-border)] opacity-40"></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Text Block (right) -->
      <div class="order-1 lg:order-2">
        <p class="mb-3 text-sm font-semibold uppercase tracking-widest text-[var(--ws-features-icon-color)]">Write</p>
        <h2 class="text-balance text-3xl font-bold tracking-tight text-[var(--ws-features-text)] sm:text-4xl">
          Powerful docs, simple for everyone
        </h2>
        <p class="mt-4 text-lg text-[var(--ws-features-text-soft)]">
          Build rich documents with blocks, embeds, and databases. Everything stays in sync — no imports, no exports.
        </p>
        <ul class="mt-8 space-y-4">
          <li class="flex items-start gap-3">
            <div class="mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[var(--ws-features-icon-bg)]">
              <svg class="h-3 w-3 text-[var(--ws-features-icon-color)]" fill="none" viewBox="0 0 12 12" aria-hidden="true">
                <path d="M2 6l3 3 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <div>
              <p class="font-medium text-[var(--ws-features-text)]">Block-based editor</p>
              <p class="text-sm text-[var(--ws-features-text-muted)]">Compose content from reusable blocks — text, images, code, and more.</p>
            </div>
          </li>
          <li class="flex items-start gap-3">
            <div class="mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[var(--ws-features-icon-bg)]">
              <svg class="h-3 w-3 text-[var(--ws-features-icon-color)]" fill="none" viewBox="0 0 12 12" aria-hidden="true">
                <path d="M2 6l3 3 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <div>
              <p class="font-medium text-[var(--ws-features-text)]">Real-time collaboration</p>
              <p class="text-sm text-[var(--ws-features-text-muted)]">Multiple people, one document. Changes sync instantly without conflicts.</p>
            </div>
          </li>
          <li class="flex items-start gap-3">
            <div class="mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-[var(--ws-features-icon-bg)]">
              <svg class="h-3 w-3 text-[var(--ws-features-icon-color)]" fill="none" viewBox="0 0 12 12" aria-hidden="true">
                <path d="M2 6l3 3 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <div>
              <p class="font-medium text-[var(--ws-features-text)]">Local-first by default</p>
              <p class="text-sm text-[var(--ws-features-text-muted)]">Your data stays on your device. Cloud sync is opt-in, never forced.</p>
            </div>
          </li>
        </ul>
      </div>

    </div>
  </div>
</section>