Source: frameworks/kit-opt-in-page/04-opt-in-page-quality.md

04 — QUALITY: Opt-In Page

Pass threshold: 90 / 100 When to run: After every new opt-in page build (Mode 1) and after every update (Mode 2). Run before presenting to Kathryn.

External QC dependencies:

Run business-aos/reference/brand/copy-qc.md against all page copy. Fix all P1 and P2 violations before scoring.
Verify footer compliance against vip/.claude/lenses/ftc-compliance.md and vip/.claude/lenses/meta-policy.md.

Page Structure (20 points)

#	Check	Points
1	All 6 required sections present in correct order: Header, Hero (two-column with sticky form), What's Inside (with second CTA), Built By, Footer	4
2	Hero uses two-column grid: copy on left, sticky form panel on right. Grid div has `class="hero-grid"`. Copy div has `class="hero-copy"`. Grid declaration: `grid-template-columns: 1fr 400px`	3
3	Form panel has `position: sticky; top: 100px` and collapses to static at 968px breakpoint	3
4	Header is sticky (`position: sticky; top: 0; z-index: 100`) with gold bottom border	2
5	Three responsive breakpoints present: 968px (grid collapse via `.hero-grid` class selector + form unstick + `order: -1` on `.form-panel` + `display: none` on `.copy-details`), 840px (font/padding reduction), 640px (further reduction + header wrap)	4
6	Page uses `max-width: 1400px` for hero grid and `max-width: 700px` for centered content sections	2
7	No `var()` CSS anywhere. No class-based CSS in body content except allowed classes: `.form-panel`, `.cta-btn`, `.hero-grid`, `.hero-copy`, `.copy-details`, and MailerLite form classes. Style tag contains only resets, scrollbar, sticky form, placeholders, and responsive rules	2

Form & Conversion (20 points)

#	Check	Points
8	MailerLite universal script present in with correct account ID	2
9	Form contains exactly two fields: first name (`fields[name]`) and email (`fields[email]`) — no additional fields	3
10	Form action URL points to a real MailerLite endpoint (not a placeholder)	2
11	Form submit button uses specific CTA text (not generic "Submit" or "Sign Up") — e.g., "Send Me the Brief"	3
12	Form redirect JavaScript function present with correct form ID and real thank-you URL	3
13	Trust line present below form: "Free. No credit card. No sales call." (or equivalent friction-removing language)	2
14	Permission line present below trust line: explains what happens after opt-in + unsubscribe mention	2
15	Second CTA present in What's Inside section — links to `#get-it` (the form panel anchor)	3

Copy Quality (20 points)

#	Check	Points
16	Hero follows problem-bridge-mechanism structure: problem statement (concrete pain), gold bridge line (names the solution), mechanism description (how to use it + bullet list)	4
17	Zero LLM brand names anywhere on the page. Uses "any large language model" or equivalent neutral phrasing	4
18	Zero internal acronyms in customer-facing copy (no CIB, PB, AOS, CPM)	3
19	"What's Inside" section lists every section of the lead magnet with numbered items and descriptions	3
20	Copy passes brand voice check: direct, concrete, no hype language, no corporate speak, no "transformation/journey/leverage/synergy"	3
21	Passes Copy QC (`copy-qc.md`): no twinning, no mirror reversals, no three-beat parallel lists, no rhetorical hand-holding	3

Compliance (20 points)

#	Check	Points
22	Meta platform disclaimer present in footer: "This site is not a part of the Meta website or Meta Platforms, Inc..." (exact required language)	4
23	Results disclaimer present in footer: names the specific lead magnet, states results vary, states no guarantee of specific outcome	4
24	Entity line present: "[Brand] is a brand of Creating Your Plan" with year and rights reserved	3
25	Contact email present and linked: `kathryn@creatingyourplan.com`	2
26	Three legal links present: Privacy Policy, Terms of Service, Disclaimer — all pointing to `creatingyourplan.com/[page]`	4
27	No outcome promises, no income claims, no "guaranteed" or "proven results" language anywhere on page	3

Brand & Visual Consistency (10 points)

#	Check	Points
28	Correct font pairing loaded: Fraunces + Montserrat (CYP) or Cormorant Garamond + Inter (AOS)	2
29	Color palette is internally consistent — no mixed-variant colors. All hex values match the specified brand variant.	3
30	Gold text on light backgrounds uses `#6b5d3e` (WCAG-safe), never `#b79d64` directly on cream/white	2
31	Header matches brand: correct logo, brand name in serif font, "Kathryn Brown" subline in gold uppercase, CTA button	1
32	Scrollbar styling matches brand: gold thumb on primary-background track	1
33	No scroll-reveal animations. No `var()`. No external CSS files.	1

Technical Quality (10 points)

#	Check	Points
34	Valid HTML5: , , charset UTF-8, viewport meta tag	2
35	OG meta tags present: og:title, og:description, og:type, og:image	1
35a	Meta Pixel code present in : `fbq('init', ...)` + `fbq('track', 'PageView')` + noscript fallback. Required on every page running Meta ads	1
36	MailerLite form CSS present and correctly scoped to the form ID (not conflicting with page styles)	2
37	MailerLite webforms.min.js loaded at bottom of page	1
38	Loading spinner CSS present (`.ml-form-embedSubmitLoad`) with animation keyframes	1
39	Form success state styled (`.ml-form-successBody`) but hidden by default (`display: none`)	1
40	No dead links, no broken image references, no console errors when served locally	1

Common Failure Modes

Failure	What Happens	How to Fix
LLM brand name slip	Copy says "ChatGPT" or "Claude" instead of neutral language	Search entire page for LLM brand names. Replace with "any large language model" or "any AI assistant."
Internal acronym leak	Page says "the CIB" or "join PB"	Spell out every instance. Use natural shorthand ("the brief," "the skill") if the full name is too long for repeated use.
`var()` CSS	A CSS custom property slips into inline styles	Replace with the hardcoded hex/rgba value. Grep the file for `var(` to catch all instances.
Class-based body CSS	A `class="..."` attribute appears in body content with styling	Move the styles to the element's `style=""` attribute. The only classes allowed in body content are MailerLite form classes (required by MailerLite's embed code).
Missing form redirect	Form submits but stays on page instead of redirecting	Verify the `mlwebformsuccess[FORMID]()` function exists and the form ID matches the MailerLite embed.
Gold on cream WCAG fail	Gold text `#b79d64` used on cream `#f1ede6` or white background — fails contrast	Use `#6b5d3e` for any gold-colored text on light backgrounds. `#b79d64` is only for dark backgrounds.
Missing Meta disclaimer	Footer omits the Meta platform disclaimer — ad account risk	Add the exact disclaimer language. This is non-negotiable for any page running Meta ads.
Results disclaimer too generic	Footer disclaimer says "results may vary" without naming the specific lead magnet	Rewrite to name the lead magnet: "The [Lead Magnet Name] is a free skill file for use with AI assistants. Your results will vary..."
Attribute selector in responsive breakpoint	968px breakpoint uses `div[style*="grid-template-columns"]` instead of `.hero-grid` — breaks in Facebook in-app browser where all Meta ad traffic lands	Use `.hero-grid` class selector. Never target grid via attribute selectors on inline styles.
Form buried on mobile	Form falls below multiple scrolls of content on mobile — visitor never sees it	Add `order: -1` on `.hero-grid .form-panel` at 968px so form renders first. Add `display: none` on `.hero-copy .copy-details` to hide bullets/credential that push form below fold.
Missing Meta Pixel	Page runs Meta ads but has no pixel code — no conversion tracking, no optimization signal	Add Meta Pixel `fbq('init', ...)` + `fbq('track', 'PageView')` in with noscript fallback.
Form panel lost on mobile	Two-column grid doesn't collapse on small screens	Verify 968px breakpoint changes grid to single column and form panel to `position: static`.
Sticky form overlap	Form panel overlaps the header on scroll	Verify `top: 100px` on the sticky form (must clear the sticky header height).
Outcome promise in copy	A sentence implies guaranteed results ("you will" / "guaranteed to")	Rewrite to describe the mechanism, not the outcome. "Surfaces commitments that have gone quiet" (mechanism) vs. "You'll never miss a follow-up again" (promise).
Mixed brand variants	Page uses CYP colors but AOS fonts, or vice versa	Pick one variant and verify every color, font, entity name, and domain matches that variant's spec.
Scroll-reveal animation added	CSS animations on scroll intersection added to sections	Remove all scroll-reveal / fade-in animations. Opt-in pages use static content only.