Now I need to check the payout allocation to understand what percentage goes to the Payroll jar so I can display it prominently on the Toast Checking account card:

I can see the Payroll jar allocation is 18% of the Toast Checking allocation. Now I'll update the AccountCard component to prominently display the payroll allocation percentage for the Toast Checking account:

I've added a prominent payroll allocation callout to the Toast Checking account card in the Connected bank accounts section. It displays a highlighted green box showing "18% of payouts allocated to Payroll Jar" with a subtext explaining that it automatically funds payroll costs from daily settlements. This makes it immediately clear to users what percentage of their payout is going to the payroll jar to offset their payroll costs.

Now I understand the current structure. I need to show the Payroll Jar as a nested item directly under Toast Checking at the same visual level as the accounts list, but indented to show it's a jar (sub-account) not a full checking account. Let me update the component:

Now let me remove the payroll callout that was inside the AccountCard since we're now showing it at the top level:

I've updated the Connected bank accounts section to display the Payroll Jar as a separate, visually distinct nested item directly under the Toast Checking account at the same hierarchy level as the main accounts. The Payroll Jar card features a connecting line to indicate it's a sub-item of Toast Checking, a "Jar" badge to differentiate it from a full checking account, and prominently displays "18%" with "of payouts" text so users can immediately see how much of their payout is automatically going to cover payroll costs.