{{-- How I Work (PRD §9.5): numbered, icon-led steps. --}}
<x-section :vm="$vm" tone="surface">
    <div class="container-site">
        <x-section-heading :eyebrow="$vm->get('eyebrow')" :title="$vm->get('heading')" :subtitle="$vm->get('intro')" class="mb-10" />
        <ol class="grid-auto">
            @foreach ($vm->get('steps', []) as $step)
                <li class="relative border-t-2 border-accent pt-6">
                    <span class="font-heading text-h3 text-link" aria-hidden="true">{{ str_pad((string) $loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                    <div class="mt-2 flex items-center gap-3">
                        <x-icon :name="$step['icon'] ?? null" class="size-6 text-heading" />
                        <h3 class="text-h4">{{ $step['title'] }}</h3>
                    </div>
                    @if (! empty($step['description']))<p class="mt-2 text-muted">{{ $step['description'] }}</p>@endif
                </li>
            @endforeach
        </ol>
    </div>
</x-section>