Plan comparison table

A three-tier pricing and feature comparison layout: top header cards with plan names, prices, and conversion buttons, followed immediately by an aligned capability table.

A header tier that asks, and a matrix that answers. Three bordered plan cards carry the names, the monthly prices and the buttons; the capability matrix sits directly under them, so the decision and the evidence read as one block. The cards are thirds of the band and the table's columns size to their content, so the two tiers are stacked, not ruled into a single grid.

• The typeface. No font family is stated anywhere.
• Your colours. base for ground, contrast for text, borders, and buttons.

The table states hasFixedLayout: false, so its columns size to their content instead of being forced into equal fractions of the screen. .wp-block-table is a WordPress core overflow-x: auto container, so once the columns need more room than the phone has, the table becomes a horizontal rail inside its own figure: the page never scrolls sideways, the table does, and every column stays whole. Fixed layout would have shredded the words instead, because core sets word-break: break-word on the cells of a fixed table. The figcaption says the table scrolls, because a scroll container with no affordance is a silent failure of its own. No CSS ships to buy any of this.