# Customize the Clarity landing page

Use the included index.html as the starting point for a responsive landing page.

Product name: [YOUR PRODUCT]
Audience: [WHO USES IT]
Primary task: [WHAT PEOPLE NEED TO DO]
Value proposition: [ONE CLEAR, VERIFIED BENEFIT]
Primary action: [ACTION + REAL DESTINATION]
Brand color: [HEX COLOR, default #235BE4]
Verified product facts: [FEATURES AND LIMITATIONS]

Keep the airy layout, system fonts, clear hierarchy and accessible native controls. Replace the fictional Clarity copy and sample tasks with the supplied product facts. Do not invent testimonials, customers, usage figures, prices or a working backend.

Preserve working mobile navigation, Escape/focus behavior, task filters, keyboard checkboxes, computed progress, reset and FAQ disclosures. If replacing the demo, provide an equally functional interaction that communicates the product's main task. Keep illustrative data clearly labeled.

Deliver one self-contained HTML file with embedded CSS and JavaScript. No framework, external font, image CDN, analytics, remote script, account, payment or API is required. Use CSS variables, readable body text and at least 44px primary controls. Respect reduced motion. Preserve the MIT copyright and license notice with redistributed copies.

Check 375px, 768px, 1024px and 1440px widths, keyboard focus, filter/empty/reset states, every anchor and FAQ. Report what you tested and any service integrations that remain to be connected. Do not claim deployment or successful registration without verifying it.