Act as a mobile conversion designer and engineer. Add a sticky bottom call-to-action bar for {{business_name}}, a {{business_type}}, on screens under 768px only. Primary action: {{call_to_action}}. Optional second action: call us. Keep existing button components. When it shows: - appears once the hero's own button has scrolled out of view (IntersectionObserver), not on page load - hides when the footer, or any form doing the same action, is on screen - hides while an input is focused or the on-screen keyboard is open (watch visualViewport) - never shows on pages where the action makes no sense (checkout, sign-in, legal) Size and layout: 64px tall plus env(safe-area-inset-bottom); buttons 48px tall, 16px text, primary 2/3 width and secondary 1/3, or the primary full width if alone; surface token with a 1px top border, no heavy shadow. Not covering content: - add bottom padding to the page equal to the bar's height, and scroll-padding-bottom, so focused elements are never hidden behind it (WCAG 2.2 focus not obscured) - check its layering against the cookie banner, chat widget and toasts; only one bottom-fixed thing at a time, and the banner wins Accessibility: no announcement when it appears; buttons are links or buttons as appropriate with clear names ("Call 512 555 0100"); visible focus. States: hover and pressed, focus-visible, loading if the primary opens a booking flow; long labels shorten via a short label prop, never truncating mid-word. Motion: slides up from translateY(100%) in 220ms ease-out, down in 180ms; under prefers-reduced-motion, it just appears. Avoid: showing it on desktop, two stacked sticky bars, a bounce or wiggle to draw attention, covering the cookie banner's buttons, discount countdowns. Tell me which pages get the bar and why.