Fix a UI bug from a pasted screenshot instead of a vague text description

An image is attached showing the actual broken state of the UI. Look at it directly before reading anything else below — the screenshot is the primary evidence here, not a supporting detail to the text description.

WHAT THE SCREENSHOT SHOWS
The pricing table on the /pricing page has its middle "Pro" plan card overlapping the card to its right by about 20 pixels, only at the tablet breakpoint.

WHAT IT SHOULD LOOK LIKE INSTEAD
All three plan cards should sit in an evenly spaced row with no overlap, matching how they already render correctly on desktop.

VIEWPORT AND CONTEXT THE SCREENSHOT WAS TAKEN AT
Screenshot taken at 768px width in Chrome; also check 820px and 900px, the other two breakpoints this component defines.

COMPONENT SUSPECTS, IF ANY ARE ALREADY KNOWN
Likely PricingCard.tsx or the shared .grid-3-col utility class it uses, but not confirmed.

PROCESS
1. Describe back, in your own words, the specific visual discrepancy you actually see in the image — not a restatement of the text description above, an independent read of the pixels themselves: what element, what property, roughly how far off, at what point in the layout. If what you see does not match The pricing table on the /pricing page has its middle "Pro" plan card overlapping the card to its right by about 20 pixels, only at the tablet breakpoint., say so before proceeding rather than silently trusting the text over your own read of the image.
2. Locate the component and the specific CSS or layout rule responsible, citing the real file and selector, not a guess based on what usually causes this category of visual bug. If Likely PricingCard.tsx or the shared .grid-3-col utility class it uses, but not confirmed. names a candidate, check it first, but do not stop at the first plausible-looking rule if it does not actually explain the specific discrepancy described in step one.
3. Before editing, state the specific property change that should fix it and, just as important, whether that same rule affects any other component or breakpoint, since a fix scoped to a shared class or a global selector can resolve the reported instance while visually changing something nobody reported as broken.
4. Make the change, scoped to the specific rule identified, not a broader rewrite of the surrounding component.

AFTER THE CHANGE
A local dev server is running at localhost:3000 and can be checked via the browser tools available in this session.
If a way to re-check the rendered result exists in this session, capture it and compare directly against All three plan cards should sit in an evenly spaced row with no overlap, matching how they already render correctly on desktop. before declaring the fix complete — a diff that looks correct in the source is not the same evidence as a rendered result that actually matches, and CSS in particular has enough interaction effects between an edited rule and its surrounding cascade that reading the changed line is not sufficient proof on its own.
If no way to re-render exists in this session, say so explicitly and name exactly what a human should visually check before merging, rather than presenting the change as visually verified when it was not.

CONSTRAINTS
- Do not fix the general area if you cannot state the specific discrepancy; a vague 'this looks better' is not an acceptable basis for a change.
- Do not assume the screenshot's viewport is the only one affected — check whether the same rule applies at other breakpoints named in Screenshot taken at 768px width in Chrome; also check 820px and 900px, the other two breakpoints this component defines..