Architecture flow diagram

Build an architecture explainer with Tailwind CSS that draws a data flow without images. Above the diagram, a heading and a muted line. The diagram is a horizontal row of four stages on lg screens, stacking vertically on small ones: each stage is a bordered rounded-xl card with a small numbered label, a glyph tile, a title, a one-line description and two tiny monospaced tags; between stages, an arrow glyph centred in a narrow column that rotates to point downward when stacked. Above the row, a dashed-border band labelled "Your infrastructure" enclosing the first stage only, to show the boundary. Under the diagram, three footnote cards explaining what never leaves the customer network, where encryption is applied, and what is retained, each with a glyph and two lines. Keep everything monochrome except one green accent on the encryption note.

<section class="mx-auto max-w-6xl px-6 py-16">
  <div class="max-w-xl">
    <h2 class="text-3xl font-semibold tracking-tight text-neutral-900">Where your data actually goes</h2>
    <p class="mt-3 text-neutral-500">Four hops, one of which never leaves your own network.</p>
  </div>

  <div class="mt-10 flex flex-col items-stretch gap-4 lg:flex-row lg:items-center">
    <div class="rounded-2xl border-2 border-dashed border-neutral-300 p-4">
      <p class="mb-3 text-[11px] font-medium uppercase tracking-widest text-neutral-400">Your infrastructure</p>
      <div class="rounded-xl border border-neutral-200 bg-white p-5">
        <p class="font-mono text-xs text-neutral-400">01</p>
        <span class="mt-3 grid h-10 w-10 place-items-center rounded-lg bg-neutral-100 text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><rect x="4" y="3" width="16" height="7" rx="2"/><rect x="4" y="14" width="16" height="7" rx="2"/><path d="M8 6.5h.01M8 17.5h.01M12 6.5h5M12 17.5h5"/></svg></span>
        <p class="mt-3 text-sm font-semibold text-neutral-900">Source database</p>
        <p class="mt-1 text-sm leading-relaxed text-neutral-500">A read-only role we connect through, scoped to the tables you name.</p>
        <div class="mt-3 flex flex-wrap gap-1.5">
          <span class="rounded bg-neutral-100 px-1.5 py-0.5 font-mono text-[10px] text-neutral-600">read-only</span>
          <span class="rounded bg-neutral-100 px-1.5 py-0.5 font-mono text-[10px] text-neutral-600">your VPC</span>
        </div>
      </div>
    </div>

    <div class="grid place-items-center py-1 text-neutral-300 lg:py-0"><span class="rotate-90 text-xl lg:rotate-0">→</span></div>

    <div class="flex-1 rounded-xl border border-neutral-200 bg-white p-5">
      <p class="font-mono text-xs text-neutral-400">02</p>
      <span class="mt-3 grid h-10 w-10 place-items-center rounded-lg bg-neutral-100 text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M7 7h12m0 0-3-3m3 3-3 3M17 17H5m0 0 3 3m-3-3 3-3"/></svg></span>
      <p class="mt-3 text-sm font-semibold text-neutral-900">Sync agent</p>
      <p class="mt-1 text-sm leading-relaxed text-neutral-500">Pulls changed rows on a schedule, batches them, and signs the payload.</p>
      <div class="mt-3 flex flex-wrap gap-1.5">
        <span class="rounded bg-neutral-100 px-1.5 py-0.5 font-mono text-[10px] text-neutral-600">TLS 1.3</span>
        <span class="rounded bg-neutral-100 px-1.5 py-0.5 font-mono text-[10px] text-neutral-600">5 min</span>
      </div>
    </div>

    <div class="grid place-items-center py-1 text-neutral-300 lg:py-0"><span class="rotate-90 text-xl lg:rotate-0">→</span></div>

    <div class="flex-1 rounded-xl border border-neutral-200 bg-white p-5">
      <p class="font-mono text-xs text-neutral-400">03</p>
      <span class="mt-3 grid h-10 w-10 place-items-center rounded-lg bg-neutral-100 text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m13 2-8 12h7l-1 8 8-12h-7l1-8Z"/></svg></span>
      <p class="mt-3 text-sm font-semibold text-neutral-900">Processing</p>
      <p class="mt-1 text-sm leading-relaxed text-neutral-500">Validation, deduplication and metric computation in your chosen region.</p>
      <div class="mt-3 flex flex-wrap gap-1.5">
        <span class="rounded bg-neutral-100 px-1.5 py-0.5 font-mono text-[10px] text-neutral-600">eu-central</span>
        <span class="rounded bg-neutral-100 px-1.5 py-0.5 font-mono text-[10px] text-neutral-600">stateless</span>
      </div>
    </div>

    <div class="grid place-items-center py-1 text-neutral-300 lg:py-0"><span class="rotate-90 text-xl lg:rotate-0">→</span></div>

    <div class="flex-1 rounded-xl border border-neutral-200 bg-white p-5">
      <p class="font-mono text-xs text-neutral-400">04</p>
      <span class="mt-3 grid h-10 w-10 place-items-center rounded-lg bg-neutral-100 text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M4 20V10m5 10V4m6 16v-7m5 7V7"/></svg></span>
      <p class="mt-3 text-sm font-semibold text-neutral-900">Serving layer</p>
      <p class="mt-1 text-sm leading-relaxed text-neutral-500">Dashboards, the API and scheduled exports read from one materialised store.</p>
      <div class="mt-3 flex flex-wrap gap-1.5">
        <span class="rounded bg-neutral-100 px-1.5 py-0.5 font-mono text-[10px] text-neutral-600">cached</span>
        <span class="rounded bg-neutral-100 px-1.5 py-0.5 font-mono text-[10px] text-neutral-600">row-level ACL</span>
      </div>
    </div>
  </div>

  <div class="mt-10 grid gap-4 sm:grid-cols-3">
    <div class="rounded-xl border border-neutral-200 p-5">
      <span class="grid h-9 w-9 place-items-center rounded-lg bg-neutral-100 text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 3 4.5 6v5.5c0 4.7 3.2 7.7 7.5 9.5 4.3-1.8 7.5-4.8 7.5-9.5V6L12 3Z"/><path d="m9 12 2 2 4-4"/></svg></span>
      <p class="mt-3 text-sm font-medium text-neutral-900">Credentials stay put</p>
      <p class="mt-1 text-sm leading-relaxed text-neutral-500">Database passwords never leave your network — the agent holds them locally.</p>
    </div>
    <div class="rounded-xl border border-green-200 bg-green-50 p-5">
      <span class="grid h-9 w-9 place-items-center rounded-lg bg-green-100 text-green-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 3 4.5 6v5.5c0 4.7 3.2 7.7 7.5 9.5 4.3-1.8 7.5-4.8 7.5-9.5V6L12 3Z"/><path d="m9 12 2 2 4-4"/></svg></span>
      <p class="mt-3 text-sm font-medium text-green-900">Encrypted at both ends</p>
      <p class="mt-1 text-sm leading-relaxed text-green-800">TLS 1.3 in flight, AES-256 at rest, with customer-managed keys on Enterprise.</p>
    </div>
    <div class="rounded-xl border border-neutral-200 p-5">
      <span class="grid h-9 w-9 place-items-center rounded-lg bg-neutral-100 text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/></svg></span>
      <p class="mt-3 text-sm font-medium text-neutral-900">Retention you set</p>
      <p class="mt-1 text-sm leading-relaxed text-neutral-500">Raw payloads are dropped after 7 days by default; aggregates follow your policy.</p>
    </div>
  </div>
</section>