Framework Strip

<section class="ws-story-arc bg-[var(--ws-story-arc-bg)] px-6 py-20 text-stone-100"><div class="mx-auto max-w-7xl"><div class="max-w-3xl"><p class="text-sm uppercase tracking-[0.22em] text-amber-300">Story Arc</p><h2 class="mt-4 text-4xl font-semibold tracking-[-0.03em]">A deck works best when the audience always knows what comes next.</h2></div><div class="mt-12 grid gap-4 lg:grid-cols-5"><article class="rounded-[1.6rem] border border-white/10 bg-white/5 p-6"><p class="text-xs uppercase tracking-[0.18em] text-white/45">01</p><h3 class="mt-6 text-2xl font-semibold">Hook</h3><p class="mt-3 text-sm leading-7 text-stone-300">Open with the sharpest tension or payoff.</p></article><article class="rounded-[1.6rem] border border-white/10 bg-white/5 p-6"><p class="text-xs uppercase tracking-[0.18em] text-white/45">02</p><h3 class="mt-6 text-2xl font-semibold">Problem</h3><p class="mt-3 text-sm leading-7 text-stone-300">Clarify what is broken, expensive, slow, or ignored.</p></article><article class="rounded-[1.6rem] border border-white/10 bg-white/5 p-6"><p class="text-xs uppercase tracking-[0.18em] text-white/45">03</p><h3 class="mt-6 text-2xl font-semibold">Solution</h3><p class="mt-3 text-sm leading-7 text-stone-300">Show the mechanism, not just the claim.</p></article><article class="rounded-[1.6rem] border border-white/10 bg-white/5 p-6"><p class="text-xs uppercase tracking-[0.18em] text-white/45">04</p><h3 class="mt-6 text-2xl font-semibold">Proof</h3><p class="mt-3 text-sm leading-7 text-stone-300">Bring metrics, screenshots, logos, or traction.</p></article><article class="rounded-[1.6rem] border border-white/10 bg-white/5 p-6"><p class="text-xs uppercase tracking-[0.18em] text-white/45">05</p><h3 class="mt-6 text-2xl font-semibold">Ask</h3><p class="mt-3 text-sm leading-7 text-stone-300">End with the exact next move you want.</p></article></div></div></section>