Blog Newsletter Inline

<section class="ws-blog bg-[var(--ws-color-bg-secondary)] py-16">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mx-auto max-w-4xl overflow-hidden rounded-3xl border border-[var(--ws-color-border)] bg-[var(--ws-blog-card-bg)] px-8 py-10 sm:px-12 sm:py-12">
      <div class="grid items-center gap-8 lg:grid-cols-2">

        <!-- Left: copy -->
        <div>
          <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-blog-accent)]">Newsletter</p>
          <h2 class="mt-2 text-balance text-2xl font-bold tracking-tight text-[var(--ws-blog-text)] sm:text-3xl">Stay in the loop</h2>
          <p class="mt-3 text-sm leading-relaxed text-[var(--ws-blog-text-soft)]">The best stories from our blog — delivered weekly. No noise, no spam. Just the articles worth reading.</p>

          <!-- Trust signals -->
          <div class="mt-5 flex flex-wrap items-center gap-x-4 gap-y-2">
            <div class="flex -space-x-1.5">
              <div class="h-6 w-6 rounded-full border-2 border-[var(--ws-blog-card-bg)] bg-indigo-300"></div>
              <div class="h-6 w-6 rounded-full border-2 border-[var(--ws-blog-card-bg)] bg-emerald-300"></div>
              <div class="h-6 w-6 rounded-full border-2 border-[var(--ws-blog-card-bg)] bg-amber-300"></div>
              <div class="h-6 w-6 rounded-full border-2 border-[var(--ws-blog-card-bg)] bg-rose-300"></div>
            </div>
            <p class="text-xs text-[var(--ws-blog-text-muted)]">Join 14,200 subscribers · Unsubscribe anytime</p>
          </div>
        </div>

        <!-- Right: form -->
        <div>
          <form class="flex flex-col gap-3 sm:flex-row" novalidate>
            <label for="nl-email" class="sr-only">Email address</label>
            <input
              id="nl-email"
              type="email"
              name="email"
              placeholder="you@example.com"
              autocomplete="email"
              required
              class="min-w-0 flex-1 rounded-xl border border-[var(--ws-color-border)] bg-[var(--ws-color-bg)] px-4 py-3 text-sm text-[var(--ws-blog-text)] placeholder-[var(--ws-blog-text-muted)] outline-none ring-offset-0 transition focus:border-[var(--ws-blog-accent)] focus:ring-2 focus:ring-[var(--ws-blog-accent)]/30"
            />
            <button
              type="submit"
              class="shrink-0 rounded-xl bg-[var(--ws-blog-accent)] px-5 py-3 text-sm font-semibold text-white transition hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-[var(--ws-blog-accent)]/50"
            >
              Subscribe
            </button>
          </form>
          <p class="mt-3 text-xs text-[var(--ws-blog-text-muted)]">We respect your privacy. Read our <a href="#" class="underline hover:text-[var(--ws-blog-text-soft)]">privacy policy</a>.</p>
        </div>

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