fix(site): align install requirements grid responsively

[huyua9]

What changed

• use three columns at the md breakpoint and five at lg for the five install requirements
• keep mobile row dividers and align row/column borders at responsive breakpoints
• avoid an orphaned fifth card and stray divider at the md row break

Why

The live install page already has five requirements but still uses md:grid-cols-4 md:divide-y-0, which leaves the fifth requirement alone on a second row without a matching horizontal boundary.

Validation

• git diff origin/main...HEAD --check
• ./node_modules/.bin/tsc --noEmit
• ./node_modules/.bin/tailwindcss -i ./app/globals.css -o /tmp/sendo-install-grid.css --minify
• next build attempted; blocked by the environment failing to fetch the existing Google Font (IBM Plex Mono) from Google Fonts

AI-assisted; the change is intentionally limited to apps/site/app/install/page.tsx.

[vercel]

@ming1523 is attempting to deploy a commit to the postigodev's projects Team on Vercel.

A member of the Team first needs to authorize it.

[postigodev]

The layout bug this fixes is real, but I don't want to merge this implementation as-is. The selector string is doing too much layout work through nth-child overrides and becomes fragile as soon as the requirement count or breakpoint behavior changes.

Can you simplify this so the grid/borders follow the layout structurally rather than encoding individual card positions? A small wrapper/layout adjustment or a simpler responsive grid with per-card border rules would be preferable. Please keep the fix readable enough that someone can understand the md/lg behavior without mentally evaluating several nth-child selectors.

Also, since the PR changes responsive presentation, please rebase/update against current main and include a quick visual verification for the relevant widths if possible.