# Meta Ads Landing Page: Build Instructions

> A complete, opinionated specification for building a high-converting landing page for Meta (Facebook and Instagram) paid traffic. Feed this file to Claude Code as the source of truth. If anything here conflicts with a request, ask before deviating.

---

## 0. How to use this file

1. Read this whole file before writing any code.
2. Treat every rule marked **MUST** as non-negotiable. Rules marked **SHOULD** are strong defaults that can be overridden with a stated reason.
3. Before you build, confirm the four inputs in Section 1.2. If they are missing, ask for them.
4. Build mobile-first. Roughly 80 to 90 percent of Meta traffic is on mobile, so the mobile layout is the primary design, not an afterthought.
5. When done, run the QA checklist in Section 18 and report pass or fail on each item.

---

## 1. Objective and success metrics

### 1.1 The one job of this page

A Meta ads landing page exists to convert paid traffic into a single, measurable action. It is not a homepage, a brochure, or an "about us" page. Every element on the page either moves the visitor toward that one action or it gets cut.

### 1.2 Required inputs (confirm before building)

The build cannot start correctly without these. Ask if not provided:

1. **Conversion goal**: one of lead form, call, purchase, app install, webinar or event registration, demo or consultation booking, or quote request.
2. **The offer**: the exact product or service, the price or price framing, and what the visitor gets.
3. **The ad context**: the ad headline, primary text, and creative angle the visitor just clicked. This drives message match (Section 3).
4. **The audience**: who they are, their main pain, their objection, and their level of awareness (problem-aware, solution-aware, or product-aware).

### 1.3 Metrics this page is optimized for

| Metric | Definition | Healthy benchmark |
|---|---|---|
| Conversion rate | conversions divided by landing page views | 10 percent or higher is strong for lead gen; varies by industry |
| Bounce rate | single-engagement sessions | under 40 percent |
| Largest Contentful Paint (LCP) | time to render the largest above-fold element | under 2.5 seconds |
| Interaction to Next Paint (INP) | responsiveness to taps and clicks | under 200 milliseconds |
| Cumulative Layout Shift (CLS) | visual stability | under 0.1 |
| Time to first CTA visible | hero CTA on screen | immediate, no scroll required |

---

## 2. Core conversion principles (non-negotiables)

These are the load-bearing rules. Violating them quietly is the most common reason a page underperforms.

1. **MUST: One page, one goal, one primary CTA.** Pick a single action. Repeat that same CTA down the page. Do not offer competing actions (no "or sign up for our newsletter" next to the main button).
2. **MUST: Remove the navigation menu.** No top nav links, no menu, no footer link farm. Every exit that is not the CTA is a leak. Keep only the logo (not linked, or linked to the same page top), the CTA, and legally required footer links.
3. **MUST: Match the ad.** The headline and hero visual must echo the ad the visitor just clicked. A mismatch breaks trust in the first 3 seconds.
4. **MUST: The value is clear in 5 seconds.** A first-time visitor must understand what is offered, who it is for, and what to do next, without scrolling and without reading carefully.
5. **SHOULD: Lead with benefits, support with features.** People buy outcomes, not specs.
6. **SHOULD: Reduce friction at every step.** Fewer form fields, fewer decisions, fewer words, faster load.
7. **SHOULD: Earn the click with proof.** Pair every claim with evidence (numbers, testimonials, logos, guarantees).
8. **MUST: The CTA is always within reach.** On mobile, use a sticky CTA bar so the action is one tap away at any scroll position.

---

## 3. Message match (ad to page)

Message match is the single biggest lever on quality and conversion. The visitor formed an expectation from the ad. The page must pay it off immediately.

- **MUST**: The hero headline restates the ad's core promise, ideally reusing the ad's key phrase verbatim or near-verbatim.
- **MUST**: The hero visual style matches the ad creative (same product shot, same person, same color world).
- **MUST**: The offer on the page is exactly the offer in the ad. If the ad says "free trial," the page leads with the free trial, not a paid plan.
- **SHOULD**: If you run multiple ad angles (for example, price angle versus outcome angle), build a page variant per angle rather than one generic page.

A quick test: if you put the ad and the top of the page side by side, a stranger should instantly see they belong together.

---

## 4. Page anatomy (section by section, in order)

Build sections in this order. Not every page needs all of them, but this is the canonical full-length structure. For low-friction lead gen, the page can be much shorter (hero plus proof plus form). For higher-commitment or higher-price offers, use the full stack.

### 4.1 Hero (above the fold) — MUST

The most important real estate on the page. It must contain, visible without scrolling:

- **Headline**: the main benefit-driven promise (matches the ad). One clear sentence.
- **Subheadline**: one or two lines that clarify, add specificity, or handle the first objection.
- **Primary CTA button**: high contrast, action-oriented label.
- **Hero visual**: a product shot, a person using the product, a result, or a short looping muted video. No generic stock photos.
- **Trust strip**: a small row of proof (star rating, customer count, recognizable logos, or a one-line guarantee).

Keep the hero uncluttered. White space is a feature, not wasted space.

### 4.2 Problem and agitation — SHOULD

Name the pain the visitor feels in their own words. Make them nod. Short. This section earns the right to present the solution. Skip it for product-aware audiences who already know they want this.

### 4.3 Solution and core value proposition — MUST

Introduce the product or service as the answer to that pain. State the transformation: from current bad state to desired good state. This is where the "what it is" lives.

### 4.4 Benefits (not features) — MUST

Three to five benefits, each framed as an outcome for the visitor. Pattern for each: lead with the benefit, then optionally the feature that delivers it. Use icons or simple visuals to make the block scannable. Avoid a wall of text.

### 4.5 Social proof — MUST

The trust engine of the page. Place it near every decision point, not just once. Include some mix of:

- Customer testimonials with real name, photo, and a specific result.
- Recognizable client or media logos.
- Star ratings and review counts.
- Hard numbers (customers served, money saved, time saved, results delivered).
- Short case study snippets or before-and-after.

Specific and verifiable beats generic praise. "Cut our reporting time from 6 hours to 20 minutes" outperforms "Great product, highly recommend."

### 4.6 How it works — SHOULD

A simple three-step (or four-step) visual that removes the "is this complicated?" objection. Each step gets a short label and one line of explanation.

### 4.7 Offer and pricing — depends on goal

For purchase and pricing pages: present the offer clearly, anchor the price, show what is included, and highlight the recommended option. For lead gen, this may instead be a clear statement of what the visitor gets for free (consultation, quote, guide).

### 4.8 Risk reversal and guarantee — SHOULD

Lower the perceived risk of acting: money-back guarantee, free trial, no credit card required, cancel anytime, free shipping and returns, or "no obligation." Place it next to the CTA and the form.

### 4.9 FAQ — SHOULD

Answer the top five to eight real objections and questions. Each answer doubles as a place to restate value and reduce hesitation. Use an accordion to keep the page tight.

### 4.10 Final CTA section — MUST

Close with a strong, full-width CTA block: restate the core promise, restate the risk reversal, repeat the button. This is the last chance for visitors who scrolled to the bottom.

### 4.11 Footer — MUST (minimal)

Only what is legally and trust-required: copyright line, privacy policy link, terms link, contact method, and any required disclaimers. No navigation, no link farm, no social icons that send people off the page.

---

## 5. Copywriting rules

- **MUST**: Write to one person, in second person ("you"), in plain language.
- **MUST**: Headlines are specific and benefit-led. Avoid clever-but-vague.
- **SHOULD**: Read at a grade 6 to 8 level. Short sentences. Short paragraphs (one to three lines).
- **SHOULD**: Replace adjectives with evidence. Instead of "amazing results," show the number.
- **SHOULD**: Use the audience's own words for their problem (voice of customer).
- **MUST**: No jargon the audience would not use, no internal company language.
- **SHOULD**: Every section has a clear job. If a paragraph does not move toward the conversion, cut it.

### 5.1 Headline formulas (use as starting points)

- Outcome plus timeframe: "Get [outcome] in [timeframe] without [pain]."
- Problem plus solution: "Tired of [pain]? [Product] helps you [outcome]."
- How-to: "How [audience] [achieve outcome] (even if [objection])."
- Big promise plus proof: "[Outcome]. Trusted by [number] [audience]."

---

## 6. Calls to action (CTA)

- **MUST**: One primary CTA action, repeated. The hero CTA, mid-page CTAs, and final CTA all do the same thing.
- **MUST**: Button label is first-person or action-led and specific. Prefer "Get my free quote," "Start my free trial," "Book my call" over "Submit" or "Click here."
- **MUST**: High color contrast against the background. The button should be the most visually dominant element in its section. Meet WCAG AA contrast (4.5:1 for the label text).
- **MUST**: Tap target at least 48 by 48 pixels with comfortable padding.
- **SHOULD**: Place a CTA in the hero, after the benefits, after social proof, and in the final section. As a rule of thumb, a visitor should never have to scroll far to find the next CTA.
- **SHOULD**: Add a small reassurance line directly under the button (for example, "No credit card required" or "Takes 60 seconds").

---

## 7. Forms and lead capture

Forms are friction. Treat every field as a cost.

- **MUST**: Ask only for what you truly need to follow up. For most lead gen that is name, email, and phone (3 fields). Each extra field lowers completion.
- **SHOULD**: For higher-intent or qualified leads, a multi-step form (one question per step with a progress indicator) often converts better than one long form, because the first easy step builds momentum.
- **MUST**: Use correct mobile input types and attributes so the right keyboard appears and autofill works: `type="email"`, `type="tel"`, `inputmode`, `autocomplete` on every field.
- **MUST**: Label every field. Do not rely on placeholder text as the only label (it disappears on focus and fails accessibility).
- **MUST**: Inline validation with clear, friendly error messages near the field. Never clear the form on error.
- **SHOULD**: Keep the form above the fold or one short scroll away for low-friction offers. Repeat or anchor-link to it from later CTAs.
- **MUST**: Show a clear success state after submit (a thank-you message or a redirect to a thank-you page). The thank-you page is where you fire the conversion event and can set up next steps.
- **SHOULD**: Protect the form from spam without adding friction (honeypot field, or invisible bot protection). Avoid heavy visible captchas unless spam is a real problem.

---

## 8. Trust and social proof

Trust must be present, specific, and placed near decisions.

- **MUST**: At least one strong proof element above the fold (rating, count, or logo strip).
- **SHOULD**: Testimonials use a real name, a photo, a role or location, and a specific outcome.
- **SHOULD**: Add recognizable logos (clients, press, partners, payment providers, security badges) where relevant and true.
- **MUST**: Never fabricate proof. False testimonials or fake counts are both unethical and a policy and legal risk.
- **SHOULD**: Numbers beat adjectives. Quantify wherever you can.

---

## 9. Visual design system

Define tokens once and reuse them. Do not hardcode random values throughout the page.

### 9.1 Color

- Define a small palette: one primary brand color, one high-contrast accent reserved for CTAs, a neutral scale for text and backgrounds, plus semantic colors for success and error.
- **MUST**: The CTA accent color is used almost exclusively for CTAs, so it stays special and obvious.
- **MUST**: Body text meets WCAG AA contrast (4.5:1). Large text meets 3:1.

### 9.2 Typography

- One or two typefaces maximum. A clean sans-serif for body is the safe default.
- **MUST**: Body text at least 16px on mobile. Comfortable line height (around 1.5).
- Establish a clear type scale (for example: hero headline, section headline, subheadline, body, small) and use it consistently.
- Line length around 50 to 75 characters for readability on body copy.

### 9.3 Spacing and layout

- Use a consistent spacing scale (for example multiples of 4 or 8 pixels).
- Generous white space. Let sections breathe.
- Single-column layout on mobile. On desktop, keep content centered with a max content width (roughly 1100 to 1280px) so lines do not stretch too wide.

### 9.4 Imagery

- **MUST**: Real, relevant images (product, people, results). Avoid obviously generic stock photography.
- **MUST**: All images optimized and served in modern formats (see Section 11).
- Use a muted, autoplaying, looping hero video only if it loads fast and does not block render.

---

## 10. Mobile-first requirements

Design and build for a narrow phone screen first, then enhance for larger screens.

- **MUST**: Everything important works and looks intentional at roughly 360 to 414px wide.
- **MUST**: Sticky mobile CTA bar pinned to the bottom of the viewport so the primary action is always one tap away.
- **MUST**: Tap targets at least 48 by 48px, with enough spacing that fingers do not mis-tap.
- **MUST**: No horizontal scrolling. Content fits the viewport width.
- **MUST**: Forms use mobile-friendly input types and trigger the correct keyboard.
- **SHOULD**: Test on a real phone, not just a desktop browser resized.

---

## 11. Performance and Core Web Vitals

Speed is both a conversion driver and a quality factor. Slow pages bleed conversions and waste ad spend. Treat these as hard targets.

| Metric | Target |
|---|---|
| Largest Contentful Paint (LCP) | under 2.5 seconds |
| Interaction to Next Paint (INP) | under 200 milliseconds |
| Cumulative Layout Shift (CLS) | under 0.1 |
| Total page weight | as light as possible; aim well under 1 MB on mobile where feasible |
| Fully interactive | under 3 seconds on a mid-range phone on 4G |

How to hit them:

- **MUST**: Optimize and compress all images. Serve modern formats (WebP or AVIF). Size images to their displayed dimensions. Use responsive images (`srcset`).
- **MUST**: Lazy-load below-the-fold images and embeds. Eager-load only the hero image.
- **MUST**: Reserve space for images, embeds, and ads with explicit width and height (or aspect ratios) to prevent layout shift (CLS).
- **MUST**: Preload the hero image or critical font so LCP is fast.
- **SHOULD**: Inline critical CSS, defer the rest. Defer non-critical JavaScript. Avoid render-blocking resources.
- **SHOULD**: Self-host fonts or use `font-display: swap`. Limit font weights and files.
- **SHOULD**: Minimize third-party scripts. Each tag (chat widgets, heatmaps, extra pixels) costs speed. Load tracking asynchronously.
- **SHOULD**: Use a CDN and proper caching headers for static assets.
- **MUST**: Measure with Lighthouse and field data (PageSpeed Insights). Do not ship a page that fails the three Core Web Vitals on mobile.

---

## 12. Meta Pixel, Conversions API, and tracking

Accurate tracking is mandatory. Without it, the ad algorithm cannot optimize and you cannot measure conversion rate. Set up both browser-side (Pixel) and server-side (Conversions API) tracking, and deduplicate them.

### 12.1 Meta Pixel (browser-side)

- **MUST**: Install the base Pixel in the document head so it loads on every page, firing `PageView`.
- **MUST**: Fire the conversion event that matches the goal at the right moment (see the event table below).
- **SHOULD**: Fire `ViewContent` on key content views and `Lead` or the relevant event on conversion.

### 12.2 Conversions API (server-side)

- **SHOULD (strongly)**: Implement the Conversions API to send the same events from your server. This is more reliable than the browser Pixel alone, because ad blockers, browser privacy features, and tracking restrictions drop a meaningful share of browser events.
- **MUST (if using both)**: Deduplicate browser and server events by sending a shared `event_id` (and `event_name`) on both, so Meta counts each conversion once.

### 12.3 Standard event reference

Fire the event that matches the conversion goal:

| Conversion goal | Standard event | When it fires |
|---|---|---|
| Lead form submit | `Lead` | on successful form submission or thank-you page |
| Sign-up or registration complete | `CompleteRegistration` | after account or webinar registration |
| Contact request or call | `Contact` | on call click or contact form submit |
| Newsletter or plan subscribe | `Subscribe` | on subscription confirm |
| Booking or appointment | `Schedule` | on booking confirmed |
| Started checkout | `InitiateCheckout` | when checkout begins |
| Add to cart | `AddToCart` | on add to cart |
| Purchase | `Purchase` | on order confirmed (include value and currency) |
| Key content viewed | `ViewContent` | on important page or product view |

- **MUST**: For purchase events, always send `value` and `currency`.
- **SHOULD**: Pass available customer parameters for better matching where allowed, hashed as required, and only with proper consent.

### 12.4 UTMs and attribution

- **MUST**: Ensure ad URLs carry UTM parameters (source, medium, campaign, content, term) so analytics can attribute traffic to the right ad and angle.
- **SHOULD**: Make sure your analytics (for example a privacy-conscious analytics tool or GA4) records UTMs and conversions independently of Meta for a second source of truth.

### 12.5 Consent and tags

- **MUST**: Tracking respects consent. In regions that require it, fire non-essential tags only after the visitor consents (see Section 13).
- **SHOULD**: Manage tags through a single, lean setup. Avoid piling on duplicate or unused pixels.

---

## 13. Compliance and policy

Non-compliance can get ads rejected, accounts restricted, or create legal exposure. Build compliance in from the start.

### 13.1 Meta advertising and landing page policies

- **MUST**: A visible, working **Privacy Policy** link. Meta requires this, especially for lead gen and any data collection.
- **MUST**: The landing page content matches the ad and matches the product. No bait-and-switch, no broken or under-construction pages, no excessive redirects.
- **MUST**: No prohibited or restricted claims. Avoid sensational or false health, financial, or weight-loss claims, no "guaranteed income," no claiming to know personal attributes of the user.
- **MUST**: No deceptive elements: no fake close buttons, no fake system messages, no nonfunctional features, no auto-downloads.
- **MUST**: Functional, accessible page on the device the ad runs on. No popups that trap the user.
- **SHOULD**: If the offer is regulated (finance, health, supplements, crypto, gambling, and similar), include the required disclaimers and follow category rules.

### 13.2 Privacy law (apply what is relevant to the audience)

- **MUST**: A clear privacy policy explaining what data is collected, why, and how it is used and shared.
- **MUST (where applicable, for example EU and UK)**: A cookie and tracking consent banner that blocks non-essential tags (including the Meta Pixel) until the user consents, with a real reject option.
- **SHOULD (where applicable, for example US state laws)**: Provide the relevant notices and opt-out mechanisms.
- **MUST**: Forms collecting personal data state what the visitor is signing up for and link to the privacy policy near the submit button.

### 13.3 Trust and transparency

- **MUST**: Real business identity in the footer (legal name, contact). Visitors and Meta both reward legitimacy.
- **MUST**: Honest scarcity only. Do not use fake countdown timers or fake "only 2 left" messages.

---

## 14. Accessibility (a11y)

Accessible pages are usable by more people, rank and perform better, and reduce legal risk. Target WCAG 2.1 AA.

- **MUST**: Semantic HTML (`header`, `main`, `section`, `nav` where used, `footer`, proper headings `h1` to `h3` in order, one `h1`).
- **MUST**: All images have meaningful `alt` text (or empty `alt` for decorative images).
- **MUST**: Color contrast meets AA (4.5:1 body text, 3:1 large text and meaningful UI).
- **MUST**: All interactive elements are keyboard reachable and operable, with a visible focus state.
- **MUST**: Form fields have associated labels and accessible error messaging.
- **SHOULD**: Do not rely on color alone to convey meaning. Respect reduced-motion preferences for animations and autoplay video.
- **SHOULD**: Buttons are real `button` elements, links are real `a` elements, used for their correct purpose.

---

## 15. SEO and technical setup

Paid landing pages are not SEO pages, but technical hygiene still matters.

- **MUST**: A clear `title` tag and meta description (used for any shares and as a quality signal).
- **MUST**: Open Graph and Twitter card tags so the page previews cleanly when shared.
- **MUST**: A favicon and correct viewport meta tag (`width=device-width, initial-scale=1`).
- **MUST**: HTTPS everywhere, valid certificate, no mixed content.
- **SHOULD**: Mark pure paid landing pages `noindex` if they should not appear in organic search (optional, depends on strategy).
- **MUST**: Canonical URL set. Clean, readable URL.
- **SHOULD**: Structured data where genuinely applicable (for example product, FAQ), used honestly.

---

## 16. Recommended tech stack and file structure

Pick the lightest stack that meets the need. A landing page does not need a heavy framework.

### 16.1 Stack options (in order of preference for speed)

1. **Static HTML, CSS, and minimal vanilla JavaScript.** Fastest to load, simplest to host, ideal for a single landing page. Strong default.
2. **Astro** (or a similar static-first framework). Ships little to no JavaScript by default, great Core Web Vitals, good components.
3. **Next.js (static export or static generation) with Tailwind CSS.** Good if the project will grow, needs reusable components, or integrates with an existing React codebase. Avoid shipping unnecessary client JavaScript.

Whatever the stack: ship minimal JavaScript, optimize images, and hit the Section 11 targets.

### 16.2 Suggested file structure (adapt to the chosen stack)

```
/
  index.html (or the page entry)
  /assets
    /images        optimized, responsive, modern formats
    /fonts         self-hosted, subset
  /styles
    tokens.css     colors, type scale, spacing variables
    base.css       resets and base element styles
    components.css buttons, form, cards, sections
  /scripts
    main.js        form handling, sticky CTA, accordion (keep small)
    tracking.js    Pixel and event firing (loaded async, consent-gated)
  /legal
    privacy.html
    terms.html
  README.md        how to run, deploy, and where to set Pixel ID and form endpoint
```

### 16.3 Configuration the build must expose

- A single place to set the Meta Pixel ID and the Conversions API access token (never hardcode secrets in client code; keep server tokens server-side or in environment variables).
- A single place to set the form submission endpoint or integration.
- Design tokens (colors, fonts, spacing) in one file so the page is easy to rebrand.

---

## 17. A/B testing plan

Build the page so it is easy to test one variable at a time. Test in rough order of impact:

1. **Headline and core promise** (highest impact, test first).
2. **Hero visual** (image versus video, product versus person versus result).
3. **CTA label and color.**
4. **Form length and structure** (single versus multi-step, number of fields).
5. **Offer framing** (the words around the same offer, the risk reversal).
6. **Social proof placement and type.**
7. **Page length** (short versus long form).

Rules:

- **MUST**: Test one element at a time so you know what caused the change.
- **MUST**: Let tests run long enough to reach a meaningful sample and account for day-of-week effects. Do not call a winner on a handful of conversions.
- **SHOULD**: Keep a changelog of what was tested and the result.

---

## 18. Pre-launch QA checklist

Run every item. Report pass or fail.

**Conversion and content**
- [ ] One primary goal and one repeated CTA action across the whole page
- [ ] Navigation menu removed; only logo, CTA, and legal footer links remain
- [ ] Hero headline and visual match the ad (message match)
- [ ] Value is clear in 5 seconds without scrolling
- [ ] CTA present in hero, mid-page, and final section
- [ ] Mobile sticky CTA bar works
- [ ] Social proof appears above the fold and near decision points
- [ ] Risk reversal or guarantee shown near the CTA and form

**Forms and tracking**
- [ ] Form asks only for needed fields; labels present; correct mobile input types
- [ ] Inline validation works; form does not clear on error
- [ ] Success state or thank-you page works
- [ ] Meta Pixel base code fires PageView on load
- [ ] Correct conversion event fires at the right moment (verify in Meta Events Manager and the Pixel Helper)
- [ ] Conversions API sends matching events with a shared event_id (deduplicated)
- [ ] UTMs flow through to analytics; conversions tracked in a second analytics source

**Performance**
- [ ] LCP under 2.5s on mobile (PageSpeed Insights)
- [ ] INP under 200ms
- [ ] CLS under 0.1 (no layout jumps; images and embeds have reserved space)
- [ ] Images optimized, modern format, responsive, below-fold lazy-loaded
- [ ] Page fully interactive in roughly 3s on a mid-range phone

**Compliance and trust**
- [ ] Privacy policy link present and working
- [ ] Consent banner gates non-essential tags where required (EU/UK), with a real reject option
- [ ] No prohibited or false claims; required disclaimers present for regulated offers
- [ ] No deceptive UI, no fake timers, no fake scarcity
- [ ] Real business identity and contact in footer

**Accessibility and technical**
- [ ] Semantic HTML; one h1; logical heading order
- [ ] All images have appropriate alt text
- [ ] Contrast meets WCAG AA; visible keyboard focus states
- [ ] All interactive elements keyboard operable
- [ ] HTTPS, valid cert, no mixed content
- [ ] title, meta description, Open Graph, favicon, viewport tag all set
- [ ] No horizontal scroll on mobile; tested on a real device

---

## 19. Anti-patterns (do NOT do these)

- Do not reuse the homepage as the ad landing page.
- Do not add a navigation menu or a footer full of links.
- Do not offer multiple competing CTAs or goals.
- Do not write a vague, clever headline that hides the offer.
- Do not bury the CTA below long blocks of text with no CTA in the hero.
- Do not ask for more form fields than you need.
- Do not use generic stock photos or fabricated testimonials.
- Do not ship heavy, render-blocking scripts or unoptimized images.
- Do not fire the Pixel before consent in regions that require consent.
- Do not use fake countdown timers, fake stock counters, or fake system messages.
- Do not let the page mismatch the ad in promise, offer, or look.

---

## Appendix A: Section length guidance by offer type

- **Low-friction lead gen (free quote, free guide, newsletter):** short page. Hero with form, trust strip, three benefits, social proof, final CTA. Get to the form fast.
- **Mid-commitment (consultation, demo, webinar registration):** medium page. Add problem, how it works, FAQ, stronger social proof.
- **High-commitment or higher-price (purchase, B2B, courses):** long page. Use the full anatomy in Section 4, heavy on proof, risk reversal, and FAQ.

## Appendix B: Quick build order for Claude Code

1. Confirm the four inputs (Section 1.2).
2. Set up the project, design tokens, and base styles.
3. Build the hero first and get it pixel-right on mobile.
4. Add sections in the Section 4 order.
5. Wire the form and success state.
6. Add Pixel, conversion event, and Conversions API with deduplication.
7. Add consent gating and legal links.
8. Optimize images and performance to hit Core Web Vitals.
9. Run the full QA checklist (Section 18) and report results.
