<div>
    <x-slot:title>{{ $title }} — Zemail</x-slot:title>

    <div class="flex-1">
        <!-- Reusable Cinematic Header -->
        <x-bento.page-header 
            :title="$title" 
            :subtitle="$subtitle"
            :breadcrumb="$breadcrumb"
        />

        <!-- Content Area -->
        <main class="pt-12 pb-12 bg-app-bg relative overflow-hidden">
            <!-- Background Decorations -->
            <div class="absolute top-0 right-0 w-[600px] h-[600px] bg-emerald-500/[0.03] rounded-full blur-[120px] -z-10"></div>
            <div class="absolute bottom-0 left-0 w-[600px] h-[600px] bg-pink-500/[0.03] rounded-full blur-[120px] -z-10"></div>
            
            <div class="container mx-auto px-4 lg:px-8 max-w-7xl">
                <!-- Main Legal Content (Full Width Alignment) -->
                <article class="w-full" x-init="gsap.from($el, { y: 30, opacity: 0, duration: 1, ease: 'power3.out', delay: 0.2 })">
                    <div class="relative p-10 md:p-16 rounded-[40px] bg-zinc-900/40 border border-white/5 backdrop-blur-3xl shadow-2xl overflow-hidden">
                        <!-- Inner Decorative Glows -->
                        <div class="absolute -top-24 -left-24 w-48 h-48 bg-pink-500/10 rounded-full blur-[40px]"></div>
                        
                        <!-- Last Updated Badge (Pulsing) -->
                        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-pink-500/10 border border-pink-500/20 mb-12">
                            <div class="w-1.5 h-1.5 rounded-full bg-pink-500 animate-pulse"></div>
                            <span class="text-[10px] font-bold tracking-widest text-pink-500 uppercase">Last Updated: {{ $lastUpdated ?? date('F d, Y') }}</span>
                        </div>

                        <!-- Styled Content Slots -->
                        <div class="legal-content relative z-10">
                            {{ $slot }}
                        </div>

                        <!-- Subtle "Proof of Secure" Watermark -->
                        <div class="absolute bottom-8 right-8 pointer-events-none opacity-5">
                            <h2 class="text-6xl font-black text-white tracking-widest leading-none rotate-12">SECURE</h2>
                        </div>
                    </div>

                    <!-- Helpful Footer Note -->
                    <div class="mt-12 flex flex-col md:flex-row items-center justify-between gap-6 p-8 rounded-3xl bg-zinc-900/20 border border-white/5 backdrop-blur-xl">
                        <div class="flex items-center gap-4 text-center md:text-left">
                            <div class="w-10 h-10 rounded-full bg-pink-500/20 flex items-center justify-center">
                                <svg class="w-5 h-5 text-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            </div>
                            <div>
                                <h4 class="text-sm font-bold text-white mb-1">Need legal clarification?</h4>
                                <p class="text-xs text-zinc-500 font-medium tracking-tight">Our compliance team is available to answer any questions.</p>
                            </div>
                        </div>
                        <a href="mailto:legal@imail.me" class="px-6 py-3 rounded-xl bg-white/5 border border-white/10 text-white font-bold text-[11px] uppercase tracking-widest hover:bg-white/10 transition-all">
                            Send Email
                        </a>
                    </div>
                </article>
            </div>
        </main>
    </div>

    <!-- Final CTA Footer -->
    <x-bento.cta />
    <x-bento.footer />

    <!-- Enhanced Style Overrides for Legal Content -->
    <style>
        .legal-content h2 { @apply text-2xl md:text-3xl font-black text-zinc-200 tracking-tighter mb-6 mt-16 first:mt-0; }
        .legal-content p { @apply text-zinc-500 leading-relaxed mb-8 text-base md:text-lg; }
        .legal-content ul { @apply space-y-4 mb-8; }
        .legal-content li { @apply flex gap-4 text-zinc-500 text-sm md:text-base leading-relaxed; }
        .legal-content li::before { content: '→'; @apply text-emerald-500/60 font-black mt-1 flex-shrink-0; }
        .legal-content strong { @apply text-zinc-300 font-bold; }
        .legal-content a { @apply text-pink-500 decoration-pink-500/30 underline decoration-2 underline-offset-4 hover:text-pink-400 transition-colors; }
    </style>
</div>
