Pricing expressed as a bento grid, built as a plain, fully editable Etch tree: section > container > header (eyebrow, h2, intro, billing toggle) > a grid holding three "Plan Cell" component instances (the middle one featured, spanning 2×2), three "Add-on Cell" component instances (small cells) and two plain cells — an FAQ strip (three native <details> rows) and a money-back guarantee badge. Plan Cell props: name, tagline, priceMonthly, priceYearly, period suffix, featured (boolean, 2×2 span + accent border), ctaLabel/ctaHref and four optional feature lines (feature1-4, empty hides via etch/condition). Add-on Cell props: name, price, unit, description. The billing switch (a labelled aria-pressed toggle in the header) sets data-billing (monthly|yearly) on the grid wrapper; every plan price is a 2-position vertical odometer — both figures are always in the DOM, the visible one rolls in via a CSS transform driven purely by the [data-billing] attribute (no per-tick JS), while a visually-hidden span always holds the current real figure for assistive tech and a labelled aria-live region announces "Now showing yearly pricing" / "Now showing monthly pricing" on toggle. Below the tablet breakpoint the grid is a single column with the featured plan first (order); from the 48em container breakpoint it becomes a dense grid with the featured plan's 2×2 span. :focus-visible rings, AA contrast, forced-colors support; the whole grid, toggle and FAQ work with JavaScript disabled (prices simply show the monthly figure).