<.plan_card>

A single plan in a pricing grid. The grid escalates in visual weight across the tiers, so the two dearest plans invert to light-on-dark. `emphasis` is the highlighted tier and is the darkest surface; `premium` sits above it in price but reads lighter, which keeps the highlight on the plan being recommended rather than on the most expensive one. `emphasis` and `premium` set `inverted`, so descendants written against the `inverted:` custom variant (`ConnieUI.Typography`, or a consumer reaching for `inverted:text-primary_on-brand`) flip without the caller branching on tone. The tones deliberately avoid `bg-brand-section` and `bg-overlay`: brand-800 is too saturated to sit beside a white sibling card, and gray-950 reads as a hole punched in the page rather than as a heavier surface. The badge sits top right, clear of the heading row, so a long plan name and a badge never compete for the same horizontal space. The caller is expected to leave room for it above the heading on every card, badged or not, so the titles stay on one baseline across the grid. The card isolates its own stacking, so the badge's z-index lifts it above the card's content and no further. Without that it competes with the page's sticky header at the same z-index, and the later badge paints over the header as the grid scrolls under it.