{{-- Single ordered reference for Accounts & Earnings Overview. --}}
<div class="rounded-2xl border border-[#ECECEC] bg-white shadow-sm overflow-hidden">
    <div class="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-[#ECECEC]">
        <section class="px-4 py-3 md:py-4 space-y-1.5">
            <h2 class="text-[10px] font-semibold uppercase tracking-wider text-[#6F6F6F]">Treasury headline</h2>
            <p class="text-xs text-[#4A4A4A] leading-relaxed">Treasury movements that build the <strong class="font-medium text-[#111]">Company Treasury Summary</strong> on this page — linked reserve, executed ledger credits, and live voyage exposure.</p>
        </section>
        <section class="px-4 py-3 md:py-4 space-y-1.5">
            <h2 class="text-[10px] font-semibold uppercase tracking-wider text-[#6F6F6F]">Completed payouts</h2>
            <p class="text-xs text-[#4A4A4A] leading-relaxed">Finished international payout instructions — beneficiary wires that have cleared the active pipeline.</p>
        </section>
        <section class="px-4 py-3 md:py-4 space-y-1.5">
            <h2 class="text-[10px] font-semibold uppercase tracking-wider text-[#6F6F6F]">Invoices &amp; posture</h2>
            <p class="text-xs text-[#4A4A4A] leading-relaxed">Operational invoice queue, payout routing, and security status cards below — obligations and corridor checks on this dashboard.</p>
        </section>
    </div>

    <div class="border-t border-[#ECECEC] px-4 py-3 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 bg-[#FAFBFE]/80">
        @include('partials.stripe-powered-financial-rail', ['variant' => 'compact', 'class' => 'shrink-0'])
        <p class="text-[10px] text-[#7B7B7B] leading-snug sm:text-right sm:max-w-md">Transactions, payouts, and internal transfers run on Stripe Treasury rails.</p>
    </div>

    <div class="border-t border-[#ECECEC] px-4 py-3 md:py-4">
        <h2 class="text-[10px] font-semibold uppercase tracking-wider text-[#6F6F6F] mb-2">Where to go</h2>
        <ol class="text-xs text-[#4A4A4A] space-y-1.5 list-decimal pl-4 max-w-3xl leading-relaxed">
            <li><a href="{{ route('treasury') }}#treasury-summary-buildup" class="font-semibold text-[#012169] underline-offset-2 hover:underline">Treasury summary</a> — full ledger-linked buildup behind the headline figure.</li>
            <li><a href="{{ route('payouts.index') }}#completed-payouts" class="font-semibold text-[#012169] underline-offset-2 hover:underline">Completed payouts</a> — archive of finished international transfers.</li>
            <li><span class="font-semibold text-[#111]">Invoice Payments</span> card below — <a href="{{ route('payables') }}#invoice-payments-workflow" class="font-semibold text-[#012169] underline-offset-2 hover:underline">Open payables queue</a> for the operational invoice workflow.</li>
            <li><span class="font-semibold text-[#111]">Payout Routing</span> and <span class="font-semibold text-[#111]">Security Status</span> cards — new instructions, active pipeline, and authorization posture without leaving this overview.</li>
        </ol>
    </div>
</div>