Three small but visible regressions in the previous step:
1. Tailwind's "border" utility only sets the width; with preflight
disabled the style fell back to the browser default (none), so the
carrier cards in step 1 rendered without any visible outline. Add a
minimal *,::before,::after rule that restores border-style: solid
and a sensible default border-color, mirroring the relevant slice
of preflight without breaking legacy screens.
2. The active tab underline was a mix of Tailwind border-b-2 utility
classes on the button and a CSS border-bottom override. Because the
button used flex items-center inside an li, the underline floated
somewhere in the middle of the header instead of hugging the bottom.
Drop the Tailwind border-* classes and switch to a single inset
box-shadow at the bottom of the button, which always anchors to the
header's lower edge regardless of padding.
3. The carrier grid was 4 columns on lg, which made 6 providers wrap
awkwardly. Match the Stitch mockup: 2 cols on small screens, 3 on
lg. Card corner radius shrunk from rounded-lg back to rounded (4px)
to match the Stitch tool-style aesthetic.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
kerimatilganandClaude Opus 4.7
e464a4160d