05 — OUTPUT SKILL: CYP Paid Traffic Page
Scope
Produces: A single-purpose HTML landing page for paid traffic funnels — opt-in (lead capture) or purchase (product sell) Audience: Cold or warm traffic from Meta ads, email sequences, or direct links Filename: [page-purpose].html (e.g., opt-in-cib-v4.html, lto-standalone-page.html, oto-sop-manual.html) Lifecycle: One-shot per page. Each funnel page is a standalone build.
Required Inputs
- Page type —
opt-inorpurchase(determines section selection) - Product/offer name — exact name as it appears in headlines
- One-line product description — becomes hero subhead and meta description
- Target audience — who this page speaks to
- CTA destination — URL (ThriveCart) or anchor (
#get-it) - CTA button text — what the button says
- Credibility statement — 1-2 sentences on who built this and why
- Meta description — 155 characters max
- Legal disclaimers needed — Meta, Anthropic/Claude, results (check context file)
Opt-in additional: MailerLite form HTML, account ID, success redirect URL, feature list (4 items) Purchase additional: Price, product contents/categories, what's included, problem statement, FAQ (3-5 items) Optional: Testimonials, countdown timer, decline link, comparison options, before/after items, photo URL
Content Rules
- One job per page. Every element either advances the visitor toward the CTA or builds trust. Nothing else.
- No navigation. Header: logo only (+ CTA anchor on opt-in). Footer: legal links only.
- Voice is direct, pattern-revealing, grounded. Short sentences for impact. Longer sentences for patterns. Zero sales pressure. Calm authority.
- No fabricated statistics. Every number traces to a source. Describe patterns instead if no source exists.
- AI product pages use locked vernacular. Download → Upload → Run. Never paste. Never quote Claude pricing. Never reference "Projects feature."
- Gold on light must be accessible. #6b5d3e on cream/white/off-white backgrounds. #b79d64 only on dark backgrounds.
- All CSS inline. No external stylesheets. No CSS variables. Exception:
.cta-btnhover and responsive media queries go in atag in. - Section backgrounds alternate. Plot backgrounds before building. Never two consecutive same-background sections.
- Minimum CTA frequency: 2 (above fold + bottom). Purchase pages: 3-5 CTAs.
- Copy under 1,200 words for purchase pages. Under 400 words for opt-in pages. Density over length.
- Run Copy QC after all copy is written. Fix all P1 and P2 violations before shipping. Reference:
business-aos/reference/brand/copy-qc.md.
External QC Dependencies
| File | When to Run | What to Fix |
|---|---|---|
business-aos/reference/brand/copy-qc.md | After all copy complete | All P1 and P2 violations |
business-aos/reference/brand/linkedin-sentence-editor.md | After copy QC | Tighten prose |
business-aos/reference/core/voice.md | During copy writing | Tone calibration |
business-aos/reference/brand/ftc-compliance.md | Before shipping | Income/results claims |
business-aos/reference/brand/meta-policy.md | Before shipping (if Meta ads) | Ad policy compliance |
Component Templates
Document Shell
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{PAGE_TITLE}} | Practice Builders</title>
<meta name="description" content="{{META_DESCRIPTION}}">
<meta name="robots" content="noindex, nofollow">
<meta property="og:title" content="{{OG_TITLE}}">
<meta property="og:description" content="{{META_DESCRIPTION}}">
<meta property="og:type" content="website">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Montserrat:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #0f2d3e; }
::-webkit-scrollbar-thumb { background: #b79d64; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #9d8556; }
* { scrollbar-width: thin; scrollbar-color: #b79d64 #0f2d3e; }
html, body { overflow-x: hidden; width: 100%; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; }
.cta-btn { transition: background 0.3s ease, transform 0.2s ease; }
.cta-btn:hover { background: #c4aa74 !important; transform: translateY(-1px); }
@media (max-width: 968px) {
/* Grid collapse: all multi-column grids to 1fr */
/* Sticky form becomes static */
/* Hero copy-details hidden (opt-in) */
/* Header may stack */
}
@media (max-width: 840px) {
h1 { font-size: 2.2rem !important; }
h2 { font-size: 1.8rem !important; }
section { padding: 4rem 5% !important; }
}
@media (max-width: 640px) {
h1 { font-size: 1.8rem !important; }
h2 { font-size: 1.5rem !important; }
section { padding: 3rem 4% !important; }
header div { flex-wrap: wrap; gap: 0.75rem; }
}
</style>
</head>
<body style="margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; color: #0f2d3e; background: #f1ede6; line-height: 1.6; overflow-x: hidden;">
Header (Logo Only — Purchase Pages)
<header style="background: #0f2d3e; padding: 1.25rem 5%; position: sticky; top: 0; z-index: 100; border-bottom: 3px solid #b79d64;">
<div style="max-width: 1400px; margin: 0 auto; display: flex; justify-content: center; align-items: center;">
<a href="https://thepracticebuilders.ai" style="display: flex; align-items: center; gap: 1rem; text-decoration: none;">
<img src="https://cdn.convertri.com/01a6df52-3d55-11ea-99fe-0697e5ca793e%2F1e660f39a4c0923479dfce82ce3cf3916e7e317b%2FIcon-White.png" alt="Practice Builders" style="height: 40px;">
<div>
<div style="font-family: 'Fraunces', serif; font-size: 1.3rem; color: #f1ede6; font-weight: 700; line-height: 1;">Practice Builders</div>
<div style="font-size: 0.65rem; color: #b79d64; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin-top: 0.25rem;">Kathryn Brown</div>
</div>
</a>
</div>
</header>
Header (Logo + CTA Anchor — Opt-in Pages)
<header style="background: #0f2d3e; padding: 1.5rem 5%; position: sticky; top: 0; z-index: 100; border-bottom: 3px solid #b79d64;">
<div style="max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;">
<a href="https://thepracticebuilders.ai" style="display: flex; align-items: center; gap: 1rem; text-decoration: none;">
<img src="https://cdn.convertri.com/01a6df52-3d55-11ea-99fe-0697e5ca793e%2F1e660f39a4c0923479dfce82ce3cf3916e7e317b%2FIcon-White.png" alt="Practice Builders" style="height: 45px;">
<div>
<div style="font-family: 'Fraunces', serif; font-size: 1.5rem; color: #f1ede6; font-weight: 700; line-height: 1;">Practice Builders</div>
<div style="font-size: 0.7rem; color: #b79d64; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin-top: 0.35rem;">Kathryn Brown</div>
</div>
</a>
<a href="#get-it" class="cta-btn" style="color: #0f2d3e; background: #b79d64; text-decoration: none; font-weight: 700; font-size: 0.85rem; padding: 0.75rem 1.25rem; border-radius: 4px;">{{HEADER_CTA_TEXT}}</a>
</div>
</header>
Meta Pills Row
<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2rem;">
<span style="font-size: 0.8rem; color: #f1ede6; padding: 0.6rem 1rem; border: 1px solid rgba(183,157,100,0.4); background: rgba(183,157,100,0.15); border-radius: 20px; font-weight: 500;">{{PILL_1}}</span>
<span style="font-size: 0.8rem; color: #f1ede6; padding: 0.6rem 1rem; border: 1px solid rgba(183,157,100,0.4); background: rgba(183,157,100,0.15); border-radius: 20px; font-weight: 500;">{{PILL_2}}</span>
<span style="font-size: 0.8rem; color: #f1ede6; padding: 0.6rem 1rem; border: 1px solid rgba(183,157,100,0.4); background: rgba(183,157,100,0.15); border-radius: 20px; font-weight: 500;">{{PILL_3}}</span>
</div>
Glass Card (Dark Background)
<div style="background: rgba(241,237,230,0.06); border: 1px solid rgba(183,157,100,0.25); border-radius: 6px; padding: 2rem; position: relative;">
<!-- Optional: Gold top-accent bar -->
<span style="position: absolute; top: 0; left: 2rem; right: 2rem; height: 3px; background: #b79d64; border-radius: 0 0 2px 2px;"></span>
<!-- Card content -->
</div>
Gold Left-Border Card (Light Background)
<div style="background: white; border-left: 4px solid #b79d64; border-radius: 0 6px 6px 0; padding: 1.5rem 2rem;">
<h4 style="font-family: 'Fraunces', serif; font-size: 1.05rem; font-weight: 700; margin-bottom: 0.5rem;">{{HEADING}}</h4>
<p style="font-size: 0.95rem; color: #3e666e; line-height: 1.6; margin: 0;">{{DESCRIPTION}}</p>
</div>
Gold Left-Border Card (Dark/Teal Background — FAQ)
<div style="background: rgba(241,237,230,0.06); border: 1px solid rgba(183,157,100,0.2); border-left: 4px solid #b79d64; border-radius: 0 6px 6px 0; padding: 1.5rem 2rem;">
<h4 style="font-family: 'Fraunces', serif; font-size: 1.05rem; font-weight: 700; color: #f1ede6; margin-bottom: 0.75rem;">{{QUESTION}}</h4>
<p style="font-size: 0.95rem; color: rgba(241,237,230,0.8); line-height: 1.6; margin: 0;">{{ANSWER}}</p>
</div>
Section Header Label (Dark Background)
<p style="font-size: 0.9rem; color: #b79d64; letter-spacing: 2px; font-weight: 700; text-transform: uppercase; text-align: center; margin-bottom: 1rem;">{{SECTION_LABEL}}</p>
Section Header Label (Light Background)
<p style="font-size: 0.9rem; color: #6b5d3e; letter-spacing: 2px; font-weight: 700; text-transform: uppercase; text-align: center; margin-bottom: 1rem;">{{SECTION_LABEL}}</p>
CTA Button (Large)
<a href="{{CTA_URL}}" class="cta-btn" style="display: inline-block; background: #b79d64; color: #0f2d3e; text-decoration: none; font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 700; padding: 1.25rem 3rem; border-radius: 4px; border: none; cursor: pointer;">{{CTA_TEXT}}</a>
CTA Button (Standard)
<a href="{{CTA_URL}}" class="cta-btn" style="display: inline-block; background: #b79d64; color: #0f2d3e; text-decoration: none; font-family: 'Montserrat', sans-serif; font-size: 0.95rem; font-weight: 700; padding: 1rem 2.5rem; border-radius: 4px; border: none; cursor: pointer;">{{CTA_TEXT}}</a>
Decline Link
<p style="font-size: 0.85rem; color: rgba(241,237,230,0.5); margin-top: 1rem;">
<a href="{{DECLINE_URL}}" style="color: rgba(241,237,230,0.5); text-decoration: underline;">{{DECLINE_TEXT}}</a>
</p>
Angle Bracket List Item
<div style="padding: 6px 0 6px 1.5rem; position: relative; font-size: 0.95rem; color: {{TEXT_COLOR}}; line-height: 1.6;">
<span style="position: absolute; left: 0; color: #b79d64; font-weight: 700;">›</span>
{{ITEM_TEXT}}
</div>
Outcome Box (Inside Cards)
<div style="background: rgba(183,157,100,0.1); border-radius: 4px; padding: 0.75rem 1rem; margin-top: 1.5rem;">
<p style="font-size: 0.85rem; color: #b79d64; font-weight: 600; margin: 0;">{{OUTCOME_LABEL}}: {{OUTCOME_TEXT}}</p>
</div>
Numbered Problem Card
<div style="background: rgba(241,237,230,0.06); border: 1px solid rgba(183,157,100,0.25); border-radius: 6px; padding: 2rem;">
<p style="font-family: 'Fraunces', serif; font-size: 1rem; color: #b79d64; font-weight: 700; margin-bottom: 0.75rem;">{{NUMBER}}</p>
<h3 style="font-family: 'Fraunces', serif; font-size: 1.25rem; color: #f1ede6; font-weight: 700; line-height: 1.3; margin-bottom: 1rem;">{{HEADING}}</h3>
<p style="font-size: 0.95rem; color: rgba(241,237,230,0.75); line-height: 1.6;">{{DESCRIPTION}}</p>
</div>
Before/After Transformation Columns
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 1000px; margin: 0 auto;">
<!-- Before Column -->
<div style="background: rgba(241,237,230,0.05); border: 1px solid rgba(241,237,230,0.1); border-radius: 6px; padding: 2rem;">
<p style="font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(241,237,230,0.5); margin-bottom: 1.5rem;">Before</p>
<!-- Items with hollow bullets -->
<div style="padding: 8px 0 8px 1.5rem; position: relative; font-size: 0.95rem; color: rgba(241,237,230,0.75); line-height: 1.6;">
<span style="position: absolute; left: 0; top: 14px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid rgba(241,237,230,0.2);"></span>
{{BEFORE_ITEM}}
</div>
</div>
<!-- After Column -->
<div style="background: rgba(183,157,100,0.08); border: 1px solid rgba(183,157,100,0.25); border-radius: 6px; padding: 2rem;">
<p style="font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #b79d64; margin-bottom: 1.5rem;">After</p>
<!-- Items with filled gold bullets -->
<div style="padding: 8px 0 8px 1.5rem; position: relative; font-size: 0.95rem; color: rgba(241,237,230,0.85); line-height: 1.6;">
<span style="position: absolute; left: 0; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: #b79d64;"></span>
{{AFTER_ITEM}}
</div>
</div>
</div>
Qualification Two-Column Grid
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 1000px; margin: 0 auto;">
<!-- Built for You -->
<div style="background: white; padding: 2rem; border-left: 4px solid #b79d64; border-radius: 0 6px 6px 0;">
<h3 style="font-family: 'Fraunces', serif; font-size: 1.15rem; font-weight: 700; margin-bottom: 1rem;">Built for You If</h3>
<div style="padding: 6px 0 6px 1.5rem; position: relative; font-size: 0.95rem; color: #334155; line-height: 1.6;">
<span style="position: absolute; left: 0; color: #b79d64; font-weight: 700;">›</span>
{{ITEM}}
</div>
</div>
<!-- Not for You -->
<div style="background: white; padding: 2rem; border-left: 4px solid #3e666e; border-radius: 0 6px 6px 0;">
<h3 style="font-family: 'Fraunces', serif; font-size: 1.15rem; font-weight: 700; margin-bottom: 1rem;">Not for You If</h3>
<div style="padding: 6px 0 6px 1.5rem; position: relative; font-size: 0.95rem; color: #334155; line-height: 1.6;">
<span style="position: absolute; left: 0; color: #3e666e; font-weight: 700;">—</span>
{{ITEM}}
</div>
</div>
</div>
Comparison Cards with Recommended Badge
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1400px; margin: 0 auto;">
<!-- Standard Option -->
<div style="background: white; border: 1px solid #e2ddd6; border-radius: 6px; padding: 2rem;">
<p style="font-size: 0.8rem; color: #b79d64; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 0.75rem;">{{OPTION_LABEL}}</p>
<h3 style="font-family: 'Fraunces', serif; font-size: 1.15rem; font-weight: 700; color: #0f2d3e; margin-bottom: 1rem;">{{OPTION_NAME}}</h3>
<p style="font-size: 0.95rem; color: #3e666e; line-height: 1.6;">{{OPTION_DESC}}</p>
</div>
<!-- Recommended Option -->
<div style="background: white; border: 2px solid #b79d64; border-radius: 6px; padding: 2rem; position: relative;">
<span style="position: absolute; top: -12px; left: 2rem; background: #b79d64; color: #0f2d3e; font-size: 0.7rem; font-weight: 700; padding: 0.3rem 0.75rem; border-radius: 3px; letter-spacing: 1px; text-transform: uppercase;">Recommended</span>
<p style="font-size: 0.8rem; color: #b79d64; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 0.75rem;">{{OPTION_LABEL}}</p>
<h3 style="font-family: 'Fraunces', serif; font-size: 1.15rem; font-weight: 700; color: #0f2d3e; margin-bottom: 1rem;">{{OPTION_NAME}}</h3>
<p style="font-size: 0.95rem; color: #3e666e; line-height: 1.6;">{{OPTION_DESC}}</p>
</div>
</div>
Gold Testimonial Band
<section style="background: #b79d64; padding: 4rem 5%; text-align: center;">
<div style="max-width: 800px; margin: 0 auto;">
<p style="font-size: 0.9rem; color: #0f2d3e; letter-spacing: 2px; font-weight: 700; text-transform: uppercase; margin-bottom: 1.5rem;">{{LABEL}}</p>
<p style="font-family: 'Fraunces', serif; font-size: 1.75rem; font-weight: 600; color: #0f2d3e; line-height: 1.4; font-style: italic; margin-bottom: 1.25rem;">"{{QUOTE}}"</p>
<p style="font-size: 0.9rem; color: #0f2d3e; font-weight: 600; margin: 0;">{{NAME}}, {{TITLE}} · {{COMPANY}}</p>
</div>
</section>
Photo-Overlay Authority Section
<section style="position: relative; overflow: hidden; min-height: 500px; max-height: 650px; height: 65vh;">
<div style="position: absolute; inset: 0; z-index: 1;">
<img src="{{PHOTO_URL}}" alt="{{NAME}}" style="width: 100%; height: 100%; object-fit: cover; object-position: right top;">
</div>
<div style="position: absolute; inset: 0; z-index: 2; background: linear-gradient(to right, #0f2d3e 0%, #0f2d3e 30%, rgba(15,45,62,0.95) 40%, rgba(15,45,62,0.85) 50%, rgba(15,45,62,0.5) 60%, rgba(15,45,62,0.2) 70%, transparent 80%); pointer-events: none;"></div>
<div style="position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 50px 5% 50px 8%; max-width: 550px;">
<p style="font-size: 0.9rem; color: #b79d64; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; margin-bottom: 1rem;">{{SECTION_LABEL}}</p>
<h3 style="font-family: 'Fraunces', serif; font-size: 2rem; font-weight: 700; color: #f1ede6; line-height: 1.2; margin-bottom: 1rem;">{{HEADING}}</h3>
<p style="font-size: 1rem; color: rgba(241,237,230,0.85); line-height: 1.7; margin-bottom: 1rem;">{{BIO_TEXT}}</p>
</div>
</section>
Circular Authority Photo (Inline — for Opt-in)
<div style="display: flex; gap: 2rem; align-items: center; max-width: 700px; margin: 0 auto;">
<img src="{{PHOTO_URL}}" alt="{{NAME}}" style="width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid #b79d64; flex-shrink: 0;">
<div>
<p style="font-size: 0.95rem; color: #3e666e; line-height: 1.7; margin: 0;">{{BIO_TEXT}}</p>
</div>
</div>
Mechanism / Shift (Cream or Off-White Background)
<section style="background: #f1ede6; padding: 5rem 5%;">
<div style="max-width: 700px; margin: 0 auto;">
<p style="font-size: 0.9rem; color: #6b5d3e; letter-spacing: 2px; font-weight: 700; text-transform: uppercase; text-align: center; margin-bottom: 1.5rem;">{{SECTION_LABEL}}</p>
<h2 style="font-family: 'Fraunces', serif; font-size: 1.75rem; color: #0f2d3e; text-align: center; margin-bottom: 1.5rem; font-weight: 700;">{{HEADING}}</h2>
<p style="font-size: 1rem; color: #334155; line-height: 1.8; margin-bottom: 1.25rem;">{{BEFORE_PARAGRAPH — what happens without the mechanism}}</p>
<p style="font-size: 1rem; color: #334155; line-height: 1.8; margin-bottom: 1.25rem; font-weight: 500;">{{SHIFT_PARAGRAPH — what changes with this approach}}</p>
<p style="font-size: 1rem; color: #0f2d3e; line-height: 1.8; font-weight: 600;">{{MECHANISM_STATEMENT — name the mechanism and what it does}}</p>
</div>
</section>
Purpose: Bridges problem to product. Answers "why does this specific approach work?" before revealing what they get. Brunson's Story element. Required for cold traffic — they don't trust you yet, so you need to explain the mechanism before asking them to buy.
Placement: After Problem bridge, before Product cards or Results-in-Advance.
Results-in-Advance (Off-White or Cream Background)
<section style="background: #f7f5f0; padding: 5rem 5%;">
<div style="max-width: 800px; margin: 0 auto;">
<p style="font-size: 0.9rem; color: #6b5d3e; letter-spacing: 2px; font-weight: 700; text-transform: uppercase; text-align: center; margin-bottom: 1rem;">{{SECTION_LABEL}}</p>
<h2 style="font-family: 'Fraunces', serif; font-size: 1.75rem; color: #0f2d3e; text-align: center; margin-bottom: 0.75rem; font-weight: 700;">{{HEADING}}</h2>
<p style="font-size: 0.95rem; color: #3e666e; text-align: center; margin-bottom: 2.5rem;">{{SUBHEAD}}</p>
<div style="display: flex; flex-direction: column; gap: 1.25rem;">
<!-- Repeat per example output -->
<div style="background: white; border-left: 4px solid #b79d64; border-radius: 0 6px 6px 0; padding: 1.5rem 2rem;">
<h4 style="font-family: 'Fraunces', serif; font-size: 1.05rem; font-weight: 700; margin-bottom: 0.5rem;">{{OUTPUT_NAME}}</h4>
<p style="font-size: 0.95rem; color: #3e666e; line-height: 1.6; margin: 0;">{{WHAT_IT_PRODUCES — specific, concrete, shows the actual deliverable}}</p>
</div>
</div>
<p style="font-size: 0.95rem; color: #0f2d3e; font-weight: 600; text-align: center; margin-top: 2rem;">{{CLOSING_LINE — "These aren't templates..." or similar}}</p>
</div>
</section>
Purpose: Shows the prospect the actual output before they buy — not a promise, the result itself. Kern's core principle: give the result in advance. Different from a testimonial (someone else's outcome) — this shows what the product itself produces.
Placement: After Mechanism/Shift or after Product cards. Before Value stack.
How It Works (Cream Background, 3-Step Cards)
<section style="background: #f1ede6; padding: 5rem 5%;">
<div style="max-width: 900px; margin: 0 auto; text-align: center;">
<p style="font-size: 0.9rem; color: #6b5d3e; letter-spacing: 2px; font-weight: 700; text-transform: uppercase; margin-bottom: 1rem;">{{SECTION_LABEL}}</p>
<h2 style="font-family: 'Fraunces', serif; font-size: 1.75rem; color: #0f2d3e; margin-bottom: 2rem; font-weight: 700;">{{HEADING}}</h2>
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;">
<div style="background: white; border-radius: 6px; padding: 2rem; position: relative;">
<span style="position: absolute; top: 0; left: 1.5rem; right: 1.5rem; height: 3px; background: #b79d64; border-radius: 0 0 2px 2px;"></span>
<p style="font-family: 'Fraunces', serif; font-size: 1rem; color: #b79d64; font-weight: 700; margin-bottom: 0.75rem; padding-top: 0.5rem;">01</p>
<h4 style="font-family: 'Fraunces', serif; font-size: 1.05rem; font-weight: 700; color: #0f2d3e; margin-bottom: 0.5rem;">{{STEP_NAME}}</h4>
<p style="font-size: 0.9rem; color: #3e666e; line-height: 1.6; margin: 0;">{{STEP_DESCRIPTION}}</p>
</div>
<!-- Repeat for steps 02, 03 -->
</div>
</div>
</section>
Purpose: Reduces perceived effort (Hormozi's Value Equation denominator). Shows the prospect exactly what they need to do — typically 3 steps. For cold traffic who's never encountered the product type, this answers "but how does it actually work?" and collapses uncertainty.
Placement: After Results-in-Advance or after Product cards. Before FAQ or Register.
Countdown Timer (JavaScript)
<div id="countdown-timer" style="font-family: 'Fraunces', serif; font-size: 2rem; color: #b79d64; font-weight: 700; margin-bottom: 1.5rem;">
<span id="timer-minutes">{{DURATION}}</span>:<span id="timer-seconds">00</span>
</div>
<script>
(function() {
var duration = {{DURATION_MINUTES}} * 60;
var timer = setInterval(function() {
var minutes = Math.floor(duration / 60);
var seconds = duration % 60;
document.getElementById('timer-minutes').textContent = minutes < 10 ? '0' + minutes : minutes;
document.getElementById('timer-seconds').textContent = seconds < 10 ? '0' + seconds : seconds;
if (--duration < 0) {
clearInterval(timer);
document.getElementById('timer-minutes').textContent = '00';
document.getElementById('timer-seconds').textContent = '00';
}
}, 1000);
})();
</script>
Category Card with Icon and Arrows
<div style="background: white; border-radius: 6px; padding: 1.5rem; position: relative;">
<span style="position: absolute; top: 0; left: 1.5rem; right: 1.5rem; height: 3px; background: #b79d64; border-radius: 0 0 2px 2px;"></span>
<h4 style="font-family: 'Fraunces', serif; font-size: 1rem; font-weight: 700; color: #0f2d3e; margin-bottom: 0.75rem; padding-top: 0.5rem;">{{EMOJI}} {{CATEGORY_NAME}}</h4>
<div style="padding: 3px 0 3px 1.25rem; position: relative; font-size: 0.85rem; color: #334155; line-height: 1.6;">
<span style="position: absolute; left: 0; color: #b79d64; font-weight: 600;">→</span>
{{ITEM_TEXT}}
</div>
</div>
Footer
<footer style="background: #0f2d3e; padding: 2.5rem 5% 2rem; border-top: 3px solid #b79d64; text-align: center;">
<div style="max-width: 700px; margin: 0 auto;">
<!-- Meta disclaimer (required on all purchase pages) -->
<p style="font-size: 0.7rem; color: rgba(241,237,230,0.35); line-height: 1.7; margin-bottom: 1.5rem; text-align: left;">This site is not a part of the Meta website or Meta Platforms, Inc. Additionally, this site is NOT endorsed by Meta in any way. FACEBOOK is a trademark of Meta Platforms, Inc.</p>
<!-- Anthropic/Claude disclaimer (if AI product) -->
<p style="font-size: 0.7rem; color: rgba(241,237,230,0.35); line-height: 1.7; margin-bottom: 1.5rem; text-align: left;">This product is not affiliated with, endorsed by, or sponsored by Anthropic, PBC or its Claude product. Claude is a trademark of Anthropic, PBC.</p>
<!-- Results disclaimer (customize per product) -->
<p style="font-size: 0.7rem; color: rgba(241,237,230,0.35); line-height: 1.7; margin-bottom: 1.5rem; text-align: left;">{{RESULTS_DISCLAIMER}}</p>
<!-- Copyright -->
<p style="font-size: 0.75rem; color: rgba(241,237,230,0.45); margin-bottom: 1rem;">Practice Builders is a brand of Creating Your Plan · {{YEAR}} · All Rights Reserved</p>
<!-- Contact -->
<p style="margin-bottom: 1.25rem; font-size: 0.8rem; color: #f1ede6;">Questions? <a href="mailto:kathryn@creatingyourplan.com" style="color: #b79d64; font-weight: 600; text-decoration: none;">kathryn@creatingyourplan.com</a></p>
<!-- Legal links -->
<p style="font-size: 0.75rem;">
<a href="https://creatingyourplan.com/privacy-policy" style="color: rgba(241,237,230,0.4); text-decoration: none;">Privacy Policy</a>
<span style="color: rgba(241,237,230,0.2); margin: 0 0.5rem;">|</span>
<a href="https://thepracticebuilders.ai/terms" style="color: rgba(241,237,230,0.4); text-decoration: none;">Terms of Use</a>
<span style="color: rgba(241,237,230,0.2); margin: 0 0.5rem;">|</span>
<a href="https://creatingyourplan.com/disclaimer" style="color: rgba(241,237,230,0.4); text-decoration: none;">Disclaimer</a>
</p>
</div>
</footer>
Confirmation Bar (Thank-You with Offer Variant)
<section style="background: linear-gradient(135deg, #0f2d3e 0%, #3e666e 100%); color: #f1ede6; padding: 3rem 5%; text-align: center;">
<div style="max-width: 640px; margin: 0 auto;">
<h2 style="font-family: 'Fraunces', serif; font-size: 1.75rem; color: #f1ede6; margin-bottom: 0.75rem; font-weight: 700;">{{CONFIRMATION_HEADING}}</h2>
<p style="font-size: 0.95rem; color: rgba(241,237,230,0.85); line-height: 1.7; margin-bottom: 0.5rem;">{{CONFIRMATION_MESSAGE}}</p>
<p style="font-size: 0.85rem; color: #b79d64; font-weight: 600;">{{CHECK_INBOX_NOTE}}</p>
</div>
</section>
Section Library — Selection by Page Type
Opt-in Page Sections (in order)
| # | Section | Required | Background |
|---|---|---|---|
| 1 | Header (logo + CTA anchor) | Yes | Dark teal |
| 2 | Hero (2-column: copy + sticky form) | Yes | Teal gradient |
| 3 | What You Get (feature list) | Yes | Cream |
| 4 | Second CTA (dark card) | Yes | Dark teal card on cream |
| 5 | Built By (photo + bio) | Yes | White |
| 6 | Footer | Yes | Dark teal |
Purchase Page Sections (select based on price point × audience temperature)
Base section architecture — all purchase pages:
| # | Section | Background | Job |
|---|---|---|---|
| 1 | Header (logo only) | Dark teal | Brand frame |
| 2 | Hero (headline + meta pills) | Dark teal or gradient | 5-second test: who, what, price |
| 3 | Problem bridge | Dark teal | Validate the pain |
| 4 | Mechanism / Shift | Cream | Why this approach works (Brunson's Story) |
| 5 | Results-in-Advance | Off-white | Show actual output, not promises (Kern) |
| 6 | Qualification (built for / not for) | Cream | Self-select the right buyer |
| 7 | Product cards (categories/sessions) | Teal gradient | What's inside / what they build |
| 8 | How It Works | Cream | Reduce perceived effort (Hormozi) |
| 9 | Value stack | Cream or off-white | Price + everything included |
| 10 | Transformation (before/after) | Teal gradient | Visualize the change |
| 11 | Authority (photo overlay or inline) | Photo overlay or white | Who built this and why |
| 12 | Testimonial band | Gold | Social proof — transformation, not praise |
| 13 | Comparison cards | Cream | This vs. alternatives |
| 14 | FAQ | Mid-teal or off-white | Handle objections |
| 15 | Register/CTA section | Teal gradient | Consolidate: price, includes, CTA, guarantee |
| 16 | Proof quote | Cream | Strongest single testimonial line |
| 17 | Final CTA | Teal gradient | Summary line + CTA |
| 18 | Footer | Dark teal | Disclaimers, legal, contact |
Section selection by price × audience temperature:
| Section | Warm $7-12 | Cold $7-12 | Warm $27-49 | Cold $27-49 | $97+ (any) |
|---|---|---|---|---|---|
| Header | Yes | Yes | Yes | Yes | Yes |
| Hero | Yes | Yes | Yes | Yes | Yes |
| Problem bridge | Yes | Yes | Yes | Yes | Yes |
| Mechanism / Shift | — | Yes | — | Yes | Optional |
| Results-in-Advance | — | Yes | Optional | Yes | Optional |
| Qualification | — | Yes | Yes | Yes | Yes |
| Product cards | Yes | Yes | Yes | Yes | Yes |
| How It Works | — | Yes | — | Optional | — |
| Value stack | Yes | Yes | Yes | Yes | Yes |
| Transformation | — | — | Optional | Optional | Yes |
| Authority | Yes | Yes | Yes | Yes | Yes |
| Testimonial band | — | — | Optional | Optional | Yes |
| Comparison | — | — | — | — | Yes |
| FAQ | Yes | Yes | Yes | Yes | Yes |
| Register/CTA | Yes | Yes | Yes | Yes | Yes |
| Proof quote | — | — | Optional | Optional | Yes |
| Final CTA | — | Optional | Optional | Optional | Yes |
| Footer | Yes | Yes | Yes | Yes | Yes |
Section count guidance:
| Warm | Cold | |
|---|---|---|
| $7-12 | 8-9 sections | 11-13 sections |
| $27-49 | 10-11 sections | 12-14 sections |
| $97-200 | 13-15 sections | 13-15 sections (full architecture) |
Word count limits still apply. More sections means tighter copy per section, not more total words. 1,200 words maximum for purchase pages regardless of section count.
Why cold traffic needs more sections at the same price: Cold traffic has no prior relationship, no trust, and no context for who you are or why this works. The Mechanism section builds the "why." Results-in-Advance shows the proof. How It Works reduces perceived effort. Qualification builds trust by self-selecting. These aren't padding — they're the conversion elements warm traffic already has from prior exposure.
Thank-You with Offer Variant
Insert Confirmation Bar as section 2 (between Header and Hero). All other sections per the Purchase page selection.
OTO Variant
Same as Purchase page sections, plus:
- Add countdown timer to hero or register section
- Replace standard CTA with accept/decline dual CTA
- Add urgency framing: "This offer is only available on this page"
Production Steps
Step 1: Gather Inputs
Collect all required inputs per page type (see Required Inputs above). Confirm with Kathryn: "Here's what I'm going to build. Here's what I'm working from. Does this match your intent?"
Step 2: Select Sections
Based on page type, price point, and audience temperature (warm vs. cold), select sections from the Section Library. Plot the background rhythm — write it down before building:
Section 1: dark teal (header)
Section 2: teal gradient (hero)
Section 3: cream (problem)
Section 4: teal gradient (categories)
...
Verify no two consecutive sections share the same background.
Step 3: Write Copy
Draft all section copy. Follow content rules. Use voice.md for tone calibration. Keep total word count under limits (400 for opt-in, 1,200 for purchase).
Step 4: Assemble Page
Start with the document shell. Add sections in order using component templates. Replace all {{PLACEHOLDER}} tags with real content. Add responsive breakpoints specific to this page's grid layouts.
Step 5: Add Tracking (if needed)
Meta Pixel, MailerLite universal script, or other tracking. Place in before the closing tag.
Step 6: Run Copy QC
Read business-aos/reference/brand/copy-qc.md. Scan all visible copy. Fix all P1 and P2 violations. Run sentence editor.
Step 7: Run Design QC
Score against the quality checklist (file 04). Must score 90+. Fix any failures before presenting.
Step 8: Test
- Open in browser. Verify layout renders correctly.
- Resize to 968px, 840px, 640px. Verify responsive behavior.
- Click every CTA link. Verify destinations.
- If countdown timer: verify it starts and counts down.
- Check footer: all disclaimers present, links work.
Step 9: Deliver
Present the HTML file to Kathryn. Note any placeholder URLs that need ThriveCart links.
Post-Production
After Kathryn reviews and approves (or makes changes):
- If she changed anything by hand → update the golden example reference and this output skill (Mode 2)
- If QC missed something she caught → update the quality checklist (Mode 2)
- If the kit should do something it doesn't → update this output skill (Mode 2)
Don't interrupt the first run. When testing a new page, let the full build complete before correcting. Compare to golden examples, document gaps, fix the kit files.
Delivery Checklist
Before presenting to Kathryn:
- [ ] Page type matches request (opt-in or purchase)
- [ ] Section count appropriate for price point and audience temperature (warm vs. cold)
- [ ] Section backgrounds alternate (no consecutive duplicates)
- [ ] All CSS inline (no external stylesheets, no var())
- [ ] Three responsive breakpoints present and tested
- [ ] CTA buttons have .cta-btn hover effect
- [ ] Gold text on light backgrounds uses #6b5d3e
- [ ] Scrollbar styling present
- [ ] No navigation links (header: logo only, footer: legal only)
- [ ] Copy QC passed (zero P1/P2)
- [ ] Voice matches (direct, grounded, no forbidden terms)
- [ ] AI product vernacular correct (upload, not paste)
- [ ] Footer disclaimers complete (Meta, Anthropic, results as needed)
- [ ] All CTA links point to correct destination (or flagged as placeholder)
- [ ] Mobile responsive verified at all breakpoints
- [ ] No fabricated statistics