feat(docs): add How It Works job-flow strip

[pratyush618]

A small interactive landing-page section that earns its keep by demonstrating the product instead of decorating it.

What

Drops a 300×56 SVG strip between Hero and Features showing a job traveling enqueue → queue → worker → result on a 4.5-second loop. Pure SVG + CSS keyframes — no Framer Motion, no client component, no extra deps.

• The job (small filled circle in the brand accent color) moves between four station markers, holding briefly at each.
• A pulse ring expands at each station the moment the job arrives — subtle "the worker just picked it up" cue.
• Connecting line is dashed, suggesting "data in motion" without being too literal.
• Station labels live below each marker (`enqueue`, `queue`, `worker`, `result`).

Why this and not other animation options

The animations I deliberately skipped, and why:

• Card-tilt / spotlight on Features grid — generic AI aesthetic, doesn't say anything taskito-specific.
• Counting-up "7 vs 22 lines" above the Comparison — the side-by-side panels already do that work; a ticker reads as marketing.
• Scroll-triggered fade-ins — fights screen readers, gets disabled by reduced-motion anyway, adds perceived latency.
• Animated gradient backgrounds — pure decoration. The static radial gradient in the Hero is enough.
• Typed-out hero code snippet — cliché. The Shiki-highlighted static snippet is more honest.

The job-flow strip is the only one that teaches the model — it visualizes what taskito actually does, in a way the comparison panels (which show code, not behavior) can't.

Implementation notes

• Server component, async-free. Pure rendered SVG — animations run via CSS that the browser handles.
• prefers-reduced-motion: reduce disables the keyframes entirely. The strip falls back to a static end-state showing all four stations, no motion. Fully WCAG-compliant.
• No new dependencies. Uses the same --color-fd-* tokens as the rest of the landing page.
• CSS is colocated in an inline `<style>` tag inside the component (React supports this in server components). Class names are prefixed `taskito-job-*` to avoid collisions.
• Compatible with `output: 'export'` — everything pre-renders at build time; the only "runtime" thing is the browser playing CSS keyframes.

Test plan

• `pnpm --dir docs types:check` — clean
• `pnpm --dir docs lint` — clean (2 known scaffold-CSS warnings unchanged)
• `pnpm --dir docs build` — clean static export, same route count
• CI: `Deploy Docs` job
• Visual smoke on the deploy preview:
  • Strip sits below Hero, above Features, with proper vertical rhythm
  • Job circle moves smoothly between stations, no jitter on Chromium / Firefox / Safari
  • Pulse ring fires at each station as the job arrives
  • Dark mode: line is faint dashed (`--color-fd-border`), job is amber (`--color-fd-primary`), labels are muted
• Accessibility check: System Settings → Accessibility → "Reduce motion" enabled → strip should render static (no animation), still readable
• Mobile (375px viewport) — strip scales via `max-w-lg`, labels stay legible

Non-goals

• No interactivity (clicking, hovering). The strip is illustrative, not a control surface.
• No real-time data binding to actual queue stats. The flow is a generic illustration of the model, not a live dashboard.
• No expansion to other sections of the site. This is landing-page only.