Prompt it

Create a practical, responsive website footer for a small product studio using a semantic footer landmark with a clear accessible name, a short brand description, a contact link, three labelled navigation groups with three links each, and a final legal row. Keep every custom CSS selector scoped under .cf-site-footer and ensure every class selector appears in the supplied HTML so edits are reflected in the live preview. Use readable contrast, visible keyboard focus, 44px minimum link targets, responsive columns that adapt at 760px and 420px (including a 320px viewport), and reduced-motion handling for hover transitions. Use no JavaScript, frameworks, or external assets. Return complete copy-ready HTML and dependency-free CSS, then explain the footer landmark, navigation label, and responsive layout.