Source: frameworks/kit-thank-you-page/05-thank-you-page-output-skill.md

05 — OUTPUT SKILL: Thank-You Page

Scope

Produces: A single HTML thank-you page shown after lead magnet opt-in. Audience: The person who just opted in — warm, curious, still engaged. Filename: [lead-magnet-slug]-thank-you.html (e.g., cib-thank-you.html) Lifecycle: One-shot per lead magnet. Updated when the next offer changes.

Required Inputs

Lead magnet name — full name, no acronyms (e.g., "Client Intelligence Brief")
Lead magnet delivery method — how they get it (e.g., "email with download link")
Lead magnet one-line description — what it is and does
Next offer name — the paid product or event being pitched
Next offer one-line pitch — single sentence describing the offer
Next offer details — sessions/modules, deliverables, dates, time, format, price
Next offer CTA URL — destination for the button
Next offer CTA text — button label
Next offer price — real number, not TBD
Brand variant — "CYP" or "AOS"

Optional inputs: pricing context (e.g., "Launch pricing — returns to $97 after April 22"), header CTA text/URL, reassurance line, bottom note.

Content Rules

Lead magnet name is always spelled out in full. No acronyms in customer-facing copy. After first mention, use natural shorthand ("the brief," "the skill").
Confirmation section is factual. It tells them what's coming, where to find it, and what to do if they don't see it. No selling in the confirmation section.
Pitch section bridges, not sells. It creates enough interest to click through. It does not try to close the sale — the offer page does that.
Pitch headline connects the lead magnet to the next offer. Shows the gap: "The brief handles one part. The Build gives you the whole system."
Sessions/deliverables must be real. Every item listed must match the actual offer. Nothing fabricated.
"Launch pricing" is the only urgency frame. Never "early bird," "founding cohort," "beta pricing," or "introductory rate."
One CTA only. The pitch section has one button linking to one destination. No competing actions.
No income claims or specific dollar-amount outcome promises. FTC compliant.
No scroll-reveal animations or JavaScript. Static HTML with inline styles only.
No CSS var() in final output. Every color is a hardcoded hex value.
Meta-compliant footer required. Full Meta disclaimer, results disclaimer, entity attribution, legal links.
noindex/nofollow required. This page has no SEO value — it is post-opt-in only.

External QC Dependencies

Run these before delivering the page:

File	When	What to Fix
`business-aos/reference/brand/copy-qc.md`	After all copy is written	All P1 violations. All P2 violations without valid exceptions.
`business-aos/reference/core/voice.md`	While writing copy	Read-aloud test: every line should sound like Kathryn in conversation.
`vip/.claude/lenses/ftc-compliance.md`	After pitch section is written	Income claims, false scarcity, endorsement violations.
`vip/.claude/lenses/meta-policy.md`	After final build	Personal attributes, prohibited keywords, circumventing triggers.

Page Architecture

Three sections + header + footer. Each has one job.

#	Section	Background	Job
1	Header	Dark (sticky)	Brand logo + primary CTA button
2	Confirmation	Dark gradient, centered	Confirm delivery: headline + where to find it + spam note
3	Pitch	Light, left-aligned	Bridge to next offer: transition label + headline + body + sessions + deliverables + details card + CTA + reassurance
4	Footer	Dark	Meta disclaimer + results disclaimer + entity + contact + legal links

Component Templates

Header (CYP variant shown — swap colors/fonts for AOS)

<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="{{BRAND_URL}}" style="display: flex; align-items: center; gap: 1rem; text-decoration: none;">
            <img src="{{LOGO_URL}}" alt="{{BRAND_NAME}}" style="height: 45px;">
            <div>
                <div style="font-family: '{{HEADING_FONT}}', serif; font-size: 1.5rem; color: {{LIGHT_TEXT}}; font-weight: 700; line-height: 1;">{{BRAND_NAME}}</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="{{HEADER_CTA_URL}}" style="color: {{DARK_BG}}; 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>

Confirmation Section

<section style="background: linear-gradient(135deg, {{DARK_BG}} 0%, {{DARK_SECONDARY}} 100%); color: {{LIGHT_TEXT}}; padding: 6rem 5%; text-align: center;">
    <div style="max-width: 640px; margin: 0 auto;">
        <h1 style="font-family: '{{HEADING_FONT}}', serif; font-size: 2.75rem; color: {{LIGHT_TEXT}}; margin-bottom: 1.25rem; font-weight: 800; line-height: 1.15;">Your {{LEAD_MAGNET_NAME}} Is on Its&nbsp;Way.</h1>
        <p style="font-size: 1.05rem; color: rgba({{LIGHT_TEXT_RGB}}, 0.85); line-height: 1.7; margin-bottom: 1.5rem;">{{DELIVERY_DESCRIPTION}}</p>
        <p style="font-size: 0.85rem; color: #b79d64; font-weight: 600;">Don&rsquo;t see it? Check your spam folder or promotions&nbsp;tab.</p>
    </div>
</section>

Pitch Section — Transition Label

<div style="font-size: 0.9rem; color: {{LABEL_COLOR}}; letter-spacing: 2px; font-weight: 700; text-transform: uppercase; margin-bottom: 1rem;">While You&rsquo;re Here</div>

Label color: CYP = #6b5d3e, AOS = #8a8680

Pitch Section — Headline

<h2 style="font-family: '{{HEADING_FONT}}', serif; font-size: 2.5rem; color: {{DARK_TEXT}}; font-weight: 800; line-height: 1.2; margin-bottom: 1.5rem;">{{BRIDGE_HEADLINE}} <span style="color: #b79d64;">{{OFFER_NAME}}</span> {{BRIDGE_HEADLINE_END}}</h2>

The headline names the lead magnet, names the next offer (in gold), and shows the gap. Pattern from golden example: "The Brief Preps You for the Call. The Build Gives You the Whole System."

Pitch Section — Sessions List

<div style="margin-bottom: 2.5rem;">
    <div style="padding: 1rem 0; border-bottom: 1px solid rgba({{DARK_RGB}}, 0.08); display: flex; gap: 1rem; align-items: baseline;">
        <span style="font-family: '{{HEADING_FONT}}', serif; font-size: 0.85rem; font-weight: 700; color: #b79d64; min-width: 80px;">Session 1</span>
        <span style="font-size: 0.95rem; color: #334155; line-height: 1.6;"><strong style="color: {{DARK_TEXT}};">{{SESSION_VERB}}</strong>&nbsp;&mdash; {{SESSION_DESCRIPTION}}</span>
    </div>
    <!-- Repeat for each session. Last item: no border-bottom. -->
</div>

Pitch Section — Deliverables (Arrow List)

<div style="margin-bottom: 2rem;">
    <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;">&rsaquo;</span>
        {{DELIVERABLE_TEXT}}
    </div>
    <!-- Repeat for each deliverable -->
</div>

Pitch Section — Details Card

<div style="background: rgba({{DARK_RGB}}, 0.04); border-left: 4px solid #b79d64; padding: 1.25rem 1.5rem; margin-bottom: 2rem; border-radius: 0 4px 4px 0;">
    <p style="font-size: 0.95rem; color: #334155; line-height: 1.7; margin: 0;"><strong style="color: {{DARK_TEXT}};">{{DATES}}</strong> &middot; {{TIME}} &middot; {{FORMAT}}</p>
    <p style="font-size: 1.1rem; color: #b79d64; font-weight: 700; margin: 0.5rem 0 0;">{{PRICE}} <span style="font-size: 0.85rem; font-weight: 400; color: #64748b;">&mdash; {{PRICING_CONTEXT}}</span></p>
</div>

Pitch Section — CTA Block

<div style="text-align: center; margin-bottom: 1rem;">
    <a href="{{CTA_URL}}" style="display: inline-block; padding: 1rem 3rem; background: #b79d64; color: {{DARK_BG}}; font-family: '{{BODY_FONT}}', sans-serif; font-size: 0.9rem; font-weight: 700; text-decoration: none; border-radius: 4px;">{{CTA_TEXT}}</a>
</div>
<p style="text-align: center; font-size: 0.8rem; color: #64748b;">{{REASSURANCE_LINE}}</p>

Pitch Section — Bottom Note (Optional)

<p style="font-size: 0.8rem; color: #64748b; text-align: center; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba({{DARK_RGB}}, 0.08);">{{BOTTOM_NOTE}}</p>

Footer — Meta Compliant

<footer style="background: {{DARK_BG}}; padding: 2.5rem 5% 2rem; border-top: 3px solid #b79d64; text-align: center;">
    <div style="max-width: 700px; margin: 0 auto;">
        <p style="font-size: 0.7rem; color: rgba({{LIGHT_TEXT_RGB}}, 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,&nbsp;Inc.</p>

        <p style="font-size: 0.7rem; color: rgba({{LIGHT_TEXT_RGB}}, 0.35); line-height: 1.7; margin-bottom: 1.5rem; text-align: left;">{{RESULTS_DISCLAIMER}}</p>

        <p style="font-size: 0.75rem; color: rgba({{LIGHT_TEXT_RGB}}, 0.45); margin-bottom: 1rem;">{{ENTITY_LINE}} &middot; {{YEAR}} &middot; All Rights&nbsp;Reserved</p>

        <p style="margin-bottom: 1.25rem; font-size: 0.8rem; color: {{LIGHT_TEXT}};">Questions? <a href="mailto:{{EMAIL}}" style="color: #b79d64; font-weight: 600; text-decoration: none;">{{EMAIL}}</a></p>

        <p style="font-size: 0.75rem;">
            <a href="{{PRIVACY_URL}}" style="color: rgba({{LIGHT_TEXT_RGB}}, 0.4); text-decoration: none;">Privacy Policy</a>
            <span style="color: rgba({{LIGHT_TEXT_RGB}}, 0.2); margin: 0 0.5rem;">|</span>
            <a href="{{TERMS_URL}}" style="color: rgba({{LIGHT_TEXT_RGB}}, 0.4); text-decoration: none;">Terms of Service</a>
            <span style="color: rgba({{LIGHT_TEXT_RGB}}, 0.2); margin: 0 0.5rem;">|</span>
            <a href="{{DISCLAIMER_URL}}" style="color: rgba({{LIGHT_TEXT_RGB}}, 0.4); text-decoration: none;">Disclaimer</a>
        </p>
    </div>
</footer>

Full Template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{PAGE_TITLE}} | {{BRAND_NAME}}</title>
    <meta name="robots" content="noindex, nofollow">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="{{GOOGLE_FONTS_URL}}" rel="stylesheet">
    <style>
        ::-webkit-scrollbar { width: 12px; }
        ::-webkit-scrollbar-track { background: {{DARK_BG}}; }
        ::-webkit-scrollbar-thumb { background: #b79d64; border-radius: 6px; }
        ::-webkit-scrollbar-thumb:hover { background: #9d8556; }
        * { scrollbar-width: thin; scrollbar-color: #b79d64 {{DARK_BG}}; }
        html, body { overflow-x: hidden; width: 100%; }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        img { max-width: 100%; height: auto; }

        @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: '{{BODY_FONT}}', sans-serif; color: {{DARK_TEXT}}; background: {{LIGHT_BG}}; line-height: 1.6; overflow-x: hidden;">

<!-- HEADER -->
{{HEADER_COMPONENT}}

<!-- CONFIRMATION -->
{{CONFIRMATION_COMPONENT}}

<!-- PITCH -->
<section style="background: {{LIGHT_BG}}; padding: 5rem 5%;">
    <div style="max-width: 700px; margin: 0 auto;">
        {{TRANSITION_LABEL}}
        {{PITCH_HEADLINE}}
        {{PITCH_BODY_COPY}}
        {{SESSIONS_LIST}}
        {{PRE_SESSION_NOTE}} <!-- Optional: e.g., "Before the sessions start, you'll build your Practice Brain..." -->
        {{DELIVERABLES_LABEL}}
        {{DELIVERABLES_LIST}}
        {{DETAILS_CARD}}
        {{CTA_BLOCK}}
        {{BOTTOM_NOTE}} <!-- Optional -->
    </div>
</section>

<!-- FOOTER -->
{{FOOTER_COMPONENT}}

</body>
</html>

Production Steps

Step 1: Validate Inputs

Confirm all required inputs from the list above are present. If any are missing, ask before building.

Present your build plan:

"Here's what I'm going to build: a thank-you page for [lead magnet name] with a pitch for [next offer name]. Brand variant: [CYP/AOS]. Does this match your intent?"

Step 2: Write Confirmation Section Copy

Headline: "Your [Lead Magnet Name] Is on Its Way." (or similar — names the asset, confirms it's coming)
Body: 1-2 sentences telling them where to look and what they'll get
Spam note: "Don't see it? Check your spam folder or promotions tab."

Step 3: Write Pitch Section Copy

Transition label: "While You're Here" (or equivalent)
Headline: Connect the lead magnet to the next offer. Name both. Show the gap in gold.
Body paragraphs: 2-3 paragraphs. First names the limitation of the lead magnet. Second introduces the next offer with specifics. Third makes the offer tangible (what they do, not what they get).
Sessions/modules list: Each with a label (bold, gold, heading font) and a description. Pattern: Verb — what they do in that session.
Pre-session note (optional): Setup or prerequisite framing.
Deliverables label: "What you walk away with:" (bold, direct)
Deliverables list: Arrow list (gold rsaquo bullet). Each item is a concrete thing they keep or can use.
Details card: Date, time, format, price, pricing context. Left-border gold accent.
CTA button: Gold background, dark text, specific label.
Reassurance line: One sentence addressing the primary hesitation.
Bottom note (optional): Additional context below a thin rule.

Step 4: Run Copy QC

Read business-aos/reference/brand/copy-qc.md. Scan all copy for:

P1 violations (twinning, mirror reversals, question-revelation arcs) — must fix
P2 violations (three-beat lists, "not because X / because Y," formulaic setups) — must fix unless exception applies
P3 compound accumulation — fix if 2+ appear

Read business-aos/reference/core/voice.md. Apply the read-aloud test to every line.

Step 5: Assemble the Page

Select brand variant (CYP or AOS) and set all color/font values
Build from the full template, replacing all {{PLACEHOLDER}} tags with real content
Replace every remaining var() with hex values
Verify all links point to real URLs

Step 6: Compliance Check

Read vip/.claude/lenses/ftc-compliance.md:

No income claims or specific dollar-amount outcome promises
No false scarcity (countdown timers, "only X spots" when unlimited)
"Launch pricing" with real future price is compliant

Read vip/.claude/lenses/meta-policy.md:

No personal attributes violations ("Are you struggling with...")
No prohibited keywords
Landing page content matches any ads that will drive traffic to the opt-in

Verify Meta-compliant footer is present with all required elements.

Step 7: Technical Verification

Search output for var( — must return zero results
Confirm is present
Confirm Google Fonts preconnect + stylesheet links are present
Confirm all inline styles are complete (no missing semicolons, no unclosed quotes)
Confirm responsive media queries are in