{{-- Ownership clarity (PRD §11.2): two distinct, consistently styled panels. --}}
<x-section :vm="$vm" class="!py-8 lg:!py-10">
    <h2 class="text-h2">{{ $vm->heading }}</h2>
    <div class="mt-6 grid gap-6 md:grid-cols-2">
        <div class="rounded-[var(--radius-card)] border-2 border-accent bg-surface shadow-[var(--shadow-card)] p-6">
            <h3 class="flex items-center gap-2 text-h4"><x-icon name="heroicon-o-user" class="size-5 text-link" />{{ $vm->get('owned_label') }}</h3>
            <x-rich-text :html="$vm->get('owned_body')" class="mt-3" />
        </div>
        @if ($vm->get('team_body'))
            <div class="rounded-[var(--radius-card)] border border-transparent bg-surface shadow-[var(--shadow-card)] p-6">
                <h3 class="flex items-center gap-2 text-h4"><x-icon name="heroicon-o-user-group" class="size-5 text-muted" />{{ $vm->get('team_label') }}</h3>
                <x-rich-text :html="$vm->get('team_body')" class="mt-3 text-muted" />
            </div>
        @endif
    </div>
</x-section>