Luxe Private Chef Pricing Section for Divi 5: Three-Tier Dining Experiences

The section opens with a centered header block on a near-black #16120e ground — a full-bleed section with 160px vertical padding that collapses to 112px on tablet and 72px on mobile. A small-caps eyebrow in Jost at 13px and #b3a794 (the warm stone tone used throughout for secondary text) precedes the H2 headline set in Cormorant Garamond at 44px, weight 300, with a 1.15 line-height and textWrap: balance applied — a deliberate choice that keeps the two-line phrase from orphaning a single word at narrower viewports. The subtitle in Jost 18px sits inside a constrained 640px group centered below, holding the tone relaxed rather than declarative.

The three pricing cards below form a true equal-column flex row with a 24px gap and alignItems: stretch — so all three columns reach the same bottom edge regardless of feature-list length. The middle card breaks the dark palette entirely: its background switches to #c8a46a, a warm antique gold, with all text inverted to #1a1409 (deep espresso). A small pill badge — dark background, #f3ece0 text, 3px letter-spacing, 12px uppercase Jost — floats inline above the tier name, marking it as the recommended choice without any heavy visual affordance like a thick border or drop shadow. The outer two cards stay on #1f1a15 with a 1px #3a3127 border, using #f3ece0 for primary text and #b3a794 for secondary — a palette with enough contrast to read comfortably against the near-black while keeping the gold card unmistakably prominent.

Each card's internal structure is the same: a header group with tier name (Cormorant Garamond H3, 22px) and a brief descriptor, a price display with a 44px bold Cormorant Garamond figure set baseline-aligned next to a small "per guest" label in Jost 15px, and a feature list beneath a 1px top border with 24px padding. The feature list uses native Divi 5 Icon modules (FontAwesome checkmark, 15px) paired with Text modules in a row group, so each line item scales independently and never wraps awkwardly. Each card ends with a ghost-style Button module — transparent background, 1px solid border, 2px letter-spaced uppercase Jost — that sits at the card's natural bottom because the feature-list group carries flexGrow and flexShrink, pushing the button flush to the base of every column regardless of list length.

On tablet the three columns wrap to full width (24_24), stacking vertically; on phone the row direction flips to column. Section padding steps down proportionally at each breakpoint. The font sizes on the large price numerals also step: 44px desktop, 40px tablet, 36px phone — keeping the numbers legible without overwhelming the card at small sizes.