<section class="site-main-section">
    <div class="site-container">
        <div class="site-card overflow-hidden bg-primary px-6 py-8 text-primary-content md:px-10">
            <div class="grid gap-6 md:grid-cols-[1.2fr_2fr] md:items-center">
                <div>
                    <p class="mb-3 text-xs font-semibold uppercase tracking-[0.28em] text-primary-content">Program Highlights</p>
                    <h3 class="text-3xl font-bold text-primary-content">Learn, claim, redeem, and grow your balance in one place.</h3>
                    <p class="mt-4 max-w-xl text-sm leading-7 text-primary-content">
                        The refreshed rewards experience brings account activity, catalog redemption, and participant tools into a cleaner flow inspired by the new Ignite reference theme.
                    </p>
                </div>
                <div class="grid gap-4 md:grid-cols-3">
                    <article class="rounded-2xl border border-white/10 bg-white/5 p-5">
                        <div class="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full border border-primary-strong bg-primary-strong text-primary-strong-content">
                            <span class="fa-solid fa-user-plus"></span>
                        </div>
                        <h4 class="font-semibold text-primary-content">Enroll</h4>
                        <p class="mt-2 text-sm leading-6 text-primary-content">Create your account and confirm the details needed to participate.</p>
                    </article>
                    <article class="rounded-2xl border border-white/10 bg-white/5 p-5">
                        <div class="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full border border-primary-strong bg-primary-strong text-primary-strong-content">
                            <span class="fa-solid fa-file-circle-check"></span>
                        </div>
                        <h4 class="font-semibold text-primary-content">Claim</h4>
                        <p class="mt-2 text-sm leading-6 text-primary-content">Submit activity and sales claims with a more focused, guided layout.</p>
                    </article>
                    <article class="rounded-2xl border border-white/10 bg-white/5 p-5">
                        <div class="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full border border-primary-strong bg-primary-strong text-primary-strong-content">
                            <span class="fa-solid fa-gift"></span>
                        </div>
                        <h4 class="font-semibold text-primary-content">Redeem</h4>
                        <p class="mt-2 text-sm leading-6 text-primary-content">Browse rewards, manage favorites, and check out with confidence.</p>
                    </article>
                </div>
            </div>
        </div>
    </div>
</section>
