Option 1 · Hour chipsStyle: monochrome + one accent, Cal.com-calm · Components: four hour tiles with the price on each (AED 440 / 880 / 1,320 / 1,760), an amber "Most booked" dot on 2 hours, "Longer sessions: ask us" at 4 · Art: none · Motion: press 0.97, hex ripple, the chosen tile lights (sheen + tactile fill) and shows a check · Material: flat tiles, the chosen one tactilerole=radiogroup · 2 × 2 grid (a 4-across row would squeeze "AED 1,760" under 16 px) · amber = the one accent, used once

Option 2 · Stepper with rolling totalStyle: Swiss grid, numbers as the hero · Components: 56 px −/+ stepper, a total card whose digits roll, the time window in words · Art: none · Motion: each digit of the total rolls on its own column (NumberFlow-style, plain CSS); the thousands digit slides in at 3 hours; instant swap under reduced motion · Material: flat card, tactile "+"per-digit strip translateY(-d × 1em) · thousands column max-width 0 → 0.62em · money in an LTR isolate · sr-only plain total for screen readers

Option 3 · Slider railStyle: light-modelled hardware, a desk fader for time · Components: a native range input over a drawn rail that starts at 12:00, four detents (13:00 → 16:00), a raised disc handle, tappable hour labels as the plain alternative (WCAG 2.5.7) · Art: the filled rail IS the session · Motion: free drag, snap to the nearest hour on release (180 ms), a light haptic at each detent, the disc lights while held · Material: four-shadow disc in light, rim-lit disc in darkinput[type=range] step .01 + snap on change · arrows = whole hours · fill width from inline-start (mirrors in RTL) · phLab.lightHaptic()

Option 4 · Glass segmentedStyle: A5 liquid glass (faked, no refraction) over the real Aura photo · Components: a glass capsule with four segments, a translucent thumb with a specular highlight, the summary on a glass chip · Art: the room itself · Motion: the thumb glides 260 ms ease-brand and its highlight catches the light · Material: frost (blur 18 + saturate 160) with a tint dense enough that the labels pass contrast on their own; solid fallbackbackdrop-filter + 78 % surface tint · thumb: layered gradients + inset rim + radial specular ::before · photo scrim from --ph-ink · no SVG displacement (iPhones never see it)

Option 5 · Timeline blocksStyle: Swiss grid on a time axis · Components: the session as stacked hour cards on a vertical clock, "+ 1 hour" to extend, × on the last extension, the total pinned below with the start times that still fit · Art: the axis line and hour ticks · Motion: a new hour slides in from the axis (260 ms ease-brand), a removed one folds away · Material: flat cards; the base hour is tinted, extensions are whiteAcuity model: base block + "+1 hour" extensions; fits = 13 − hours start times in a 10:00–22:00 day (12 → 9) · ol/li timeline · axis mirrors in RTL