@props([
    'title',
    'lead' => null,
    'updated' => null,
])

{{-- Shared shell for long-form pages (legal, FAQ, about) so typography and
     measure stay identical across all of them. --}}
<section class="mx-auto max-w-3xl px-4 py-16 sm:px-6 lg:py-24">
    <h1 class="font-display text-4xl font-bold tracking-tight text-silver-100 sm:text-5xl">
        {{ $title }}
    </h1>

    @if ($lead)
        <p class="mt-5 text-lg text-silver-300">{{ $lead }}</p>
    @endif

    @if ($updated)
        <p class="mt-4 text-xs text-silver-500">Last updated {{ $updated }}</p>
    @endif

    <div class="zylo-divider my-10"></div>

    <div class="space-y-8 text-silver-300
                [&_h2]:font-display [&_h2]:text-xl [&_h2]:font-semibold [&_h2]:text-silver-100
                [&_h3]:font-display [&_h3]:text-base [&_h3]:font-semibold [&_h3]:text-silver-100
                [&_p]:mt-3 [&_p]:text-sm [&_p]:leading-relaxed
                [&_ul]:mt-3 [&_ul]:space-y-2 [&_ul]:text-sm
                [&_li]:relative [&_li]:pl-5
                [&_li]:before:absolute [&_li]:before:left-0 [&_li]:before:top-2
                [&_li]:before:h-1.5 [&_li]:before:w-1.5 [&_li]:before:rounded-full
                [&_li]:before:bg-electric-500
                [&_a]:text-electric-300 hover:[&_a]:text-electric-200">
        {{ $slot }}
    </div>
</section>