{{-- "How it works" numbered steps. Reorderable; step number is automatic. --}}
<section id="steps" class="lp-section">
    <div class="lp-wrap">
        <div class="lp-head" data-reveal>
            <div class="lp-eyebrow" data-lp="steps_heading.eyebrow">{{ data_get($c, 'steps_heading.eyebrow') }}</div>
            <h2 class="lp-h2" data-lp="steps_heading.title">{{ data_get($c, 'steps_heading.title') }}</h2>
            <p class="lp-lead" data-lp="steps_heading.subtitle">{{ data_get($c, 'steps_heading.subtitle') }}</p>
        </div>
        <div class="lp-steps" data-reveal>
            @foreach ((array) data_get($c, 'steps', []) as $i => $step)
                <div class="lp-step">
                    <span class="lp-step-num">{{ $i + 1 }}</span>
                    <h3 data-lp="steps.{{ $i }}.title">{{ $step['title'] ?? '' }}</h3>
                    <p data-lp="steps.{{ $i }}.text">{{ $step['text'] ?? '' }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>