Wagtail Animal Clinic — Playful Veterinary Wellness Plans Page for Divi 5

The layout opens on a white section (#ffffff) with a 1px peach bottom border (#f1dfcc), divided into an asymmetric two-column row. The left column, weighted at 16/24, carries a breadcrumb in Fredoka at 13px and an H1 in deep navy (#2b2457) at 52px on desktop, stepping down to 32px on phones. The right column, weighted at 8/24, holds a single supporting sentence in Nunito at 18px, padded 36px from the top so it sits at optical mid-height against the heading. On phones both columns expand to full width and stack cleanly. This entrance communicates the page's purpose before any pricing appears.

The plan cards section places three equal columns inside a warm cream section (#fff7ec) with 88px vertical padding that compresses to 40px on phones. A centred overline in Fredoka at 13px and an H2 at 44px introduce the cards, then a row with alignItems: stretch forces all three columns to the same height regardless of feature-list length. Each card is a Divi 5 column module with 36px corner radius, a 2px solid navy border, and a preset4 box shadow offset 6px right and 6px down at zero blur. The middle Adult card ($29/month) swaps in a hot-pink background (#ff7aa5) and a "Most popular" badge built from a nested Group module containing a single Text module in a white 12px-radius pill. Feature rows inside every card pair a Font Awesome checkmark icon at 15px with a Nunito Text module inside a flex-row Group using alignItems: flex-start, keeping the icon anchored to the first baseline even when copy wraps. Each card closes with a full-width ghost CTA button (2px navy border, 999px border-radius) that fills navy on hover.

The comparison section reuses the cream background and builds its table entirely from nested Divi Group modules. The outer Group is set to display: grid with gridColumnCount: 4 and 1px column and row gaps filled by a #f1dfcc border, producing clean cell separators with no plugin or custom CSS. Cell backgrounds alternate between #fff7ec and white for zebra striping, with the Adult data column kept white to echo its highlighted card above. Five feature rows cover wellness exams, vaccines, dental cleaning, senior bloodwork, and mobility checks, using checkmark icons and text dashes as indicators. Below the table a pink "Join a plan" button provides a second conversion point before the FAQ.

The FAQ places six questions across two balanced columns on a white background, each question anchored by a 3px solid navy top border. The section header row aligns the H2 to the bottom edge against a "Call the clinic" ghost button using alignItems: flex-end, giving heading and phone CTA equal visual weight. The layout closes with a full-bleed pink strip (#ff7aa5) matching the Adult card accent, carrying a Fredoka heading at 48px and a white-filled "Book a visit" button with the same hard box shadow used on every card throughout. On phones the strip's horizontal flex row collapses to a stacked column with left-aligned text, and all heading sizes step down through tablet and phone breakpoints baked into each individual heading module.