offer card
ecommerce-style selection card for therapies, services, and other purchasable SKUs. horizontal layout: square product image (with a thin border) on the left, title + detail + price on the right. price renders BMI-card style — large bold value, smaller unit baseline-aligned. selected state keeps the blue surface but darkens it slightly and adds a 2px gold outline plus a gold checkmark — consistent with the vial-card and StatusCard "attention" treatments.
import from @klera/ui/components/dashboard/OfferCard
variants
default — unselected
selected — darker blue, gold outline, gold checkmark
interactive — 3-card stack (click to select)
mirrors the actual intake usage. radio behavior — selecting one deselects the others.
long title + long detail (overflow)
custom price unit
priceUnit defaults to '/mo'. pass any short suffix, or empty string to omit.
light theme — translucent on bright blue ground
what onboarding renders. wrap in `data-theme="light"` to remap surface tokens.