Notes

A split hero for a dog groomer where the booking itself is the picture: a card built entirely from Divs with a five-day date strip (one day selected), four time slots on a two-column grid (one selected, one full) and a full-width confirm Button. Selected states use the brand colour with the on-primary text token, and the full slot uses the raised surface with a dashed border, so all three states swap cleanly in dark mode. The inner Div is an advanced grid, 6/5 on desktop and one column from tablet portrait down, so on phones the card sits under the headline and its reassurance points with the panel padding pulled in to 12px. It is a static mock: point the confirm Button at your real booking page, or swap the card for the form from your booking plugin.