What Stays

• The tool's intro screen (e.g., calc-intro). The narrative section above provides context, but the tool's own intro provides specific instructions. Both co-exist — narrative setup AND tool intro.
• All tool functionality — inputs, calculations, results, bridges.
• The tool's result-state CTA (bridge to diagnostic or offer).

What Gets Removed

• The tool's standalone nav and footer.
• The tool's standalone header/logo bar.
• Any standalone hero section.

CSS Namespacing

All tool CSS classes get prefixed to avoid collisions when two tools share one page:

• Calculator: calc- prefix (e.g., calc-intro, calc-body, calc-results)
• Diagnostic: diag- prefix
• Revelation tool: tool-specific prefix (e.g., sf- for Story Finder, prc- for Proof Readiness Check)

Alternatively, scope tool styles within .tool-section.calculator and .tool-section.diagnostic parent selectors.

Critical: Do not use CSS var() custom properties inside tool sections if the tool generates HTML via innerHTML. JS-generated HTML doesn't inherit CSS custom properties from the root. Hardcode hex values in any innerHTML strings.

JS Namespacing

All tool functions get prefixed:

• calcRun(), calcReset(), calcShowResult()
• diagNext(), diagPrev(), diagShowResult()
• sfNext(), sfPrev(), sfShowResult()
• prcNext(), prcPrev(), prcShowResult()

Each tool's state variables (current question index, answers array, score) use prefixed names. No global variable collisions.

Embedding Structure

<!-- Narrative section sets up the tool -->
<section class="content-section cream-bg" id="section-name">
  <div class="section-inner">
    <h2>Section Title</h2>
    <p>Condensed narrative creating the question this tool answers...</p>
  </div>
</section>

<!-- Tool embedded as its own section -->
<section class="tool-section" id="tool-name">
  <div class="tool-inner">
    <div class="calc-intro">...</div>   <!-- Kept from standalone -->
    <div class="calc-body">...</div>     <!-- Full tool functionality -->
    <div class="calc-results">...</div>  <!-- Results with offer bridge -->
  </div>
</section>

<!-- Narrative continues -->
<section class="content-section dark-bg" id="next-section">
  ...
</section>

3. Section Sequencing — The Arc Pattern

Both evergreen pages follow the same structural arc:

The Invariant Pattern

1. Hero (dark)
2. Narrative sections — establishing the problem (cream/dark alternating)
3. TOOL 1 (tool-section, dark)
4. Narrative sections — deepening the argument (off-white/dark alternating)
5. TOOL 2 (tool-section, dark)
6. Briefing section (off-white or dark)
7. Conversion Gap — "The Gap You Can't Close Alone" (dark)
8. CTA section (dark)

Comparison of Both Evergreens

Subtract/Add:                          Proof Gap:
1. Hero                                1. Hero
2. Narrative (cream)                   2. Narrative (cream)
3. Narrative (dark)                    3. Narrative + viz (dark)
4. TOOL 1 — Calculator                4. TOOL 1 — Story Finder
5. Narrative — case study (off-white)  5. Narrative (off-white)
6. Narrative (dark)                    6. Narrative + viz (dark)
7. TOOL 2 — Diagnostic                7. Narrative (cream)
8. Briefing (off-white)               8. Narrative + viz (dark)
                                        9. TOOL 2 — Readiness Check
                                       10. Narrative (off-white)
                                       11. Briefing (dark)
9. Conversion Gap (dark)              12. Conversion Gap (dark)
10. CTA (dark)                        13. CTA (dark)

How Many Narrative Sections Between Tools?

The Subtract/Add evergreen: 2 sections between tools. The Proof Gap: 4 sections (because it preserved 3 React visualizations, each needing its own section).

Governing principle: As many sections as the argument needs, but each one must earn its place. If a section doesn't shift the reader's understanding or emotional state, cut it.

Color Alternation Rules

Three backgrounds create visual rhythm:

• Cream (#f5f4f0) — warm, readable, "article" feel. Usually first narrative section after hero.
• Dark (#1a1a1a) — premium, immersive. Used for visualizations, tools, data-heavy sections, conversion gap, hero, CTA.
• Off-white (#faf9f7) — subtle variation from cream. Used for case studies, testimonials, or narrative that needs to feel distinct from adjacent cream sections.

Rules:

• Never stack two sections with the same background color.
• Tool sections are always dark background.
• Hero is always dark. CTA is always dark. Conversion gap is always dark.
• Narrative sections alternate cream and off-white, with dark sections breaking the pattern for visualizations or emphasis.

4. The Conversion Mechanism — "The Gap You Can't Close Alone"

This section is the conversion hinge between the briefing and the CTA. It reframes the page's argument: "here's what you can do alone vs. what requires outside perspective."

Structure — Always Three Points

Each point follows:

You can [thing the page/tools helped them do].
You can't [thing that requires outside perspective] — because [reason it's invisible from inside].

Three points. Can/can't structure. The "because" clause is where the diagnostic expertise argument lives.

Section Title

"The Gap You Can't Close Alone" has been used in both evergreens. It works universally because the argument is the same across campaigns: this isn't a knowledge gap (the page gave them knowledge), it's a perspective gap. Keep this title unless a campaign-specific alternative is clearly stronger.

What Follows

A brief bridge sentence or client quote, then the CTA section immediately. No additional narrative between the gap and the CTA.

5. Section Nav — What Gets Surfaced

The evergreen page has a fixed/sticky section nav that tracks scroll position and highlights the active section.

What Gets a Nav Link

• Every major narrative section representing a distinct beat in the argument (table-of-contents level)
• Both tools (always)
• The briefing (always)
• The CTA (labeled "Diagnostic" or "Book," not "CTA")

What Does NOT Get a Nav Link

• Short transition sections between major beats
• The hero (above the nav)
• The conversion gap section (transition to CTA, not a destination)

Naming Convention

Nav links use short, scannable labels:

• "Pattern" not "The Pattern You Don't See"
• "Calculator" not "The Subtract/Add Calculator"
• The nav is for wayfinding, not persuasion

Typical Nav

[Concept] | [Problem] | [Tool 1] | [Case/Comparison] | [Framework] | [Tool 2] | Briefing | Diagnostic

6. GIF Previews vs. Full Embeds

On the evergreen page: Always embed the full functional tool. Never a GIF preview.

In distribution content: GIFs of the tool being used (screen recording, sped up, autoloop) go in LinkedIn hand-raiser posts and some emails. These show what the tool does to drive someone to the page.

The rule: GIFs are distribution assets, not page assets. The page itself always has the real, functional tool.

7. The CTA Section — What Changes Per Campaign

The CTA points to the same Calendly link and "Systems Diagnostic" offer. The framing connects to the campaign's specific tension.

Elements That Stay the Same

• "Systems Diagnostic" as the offer name
• 60 minutes, free, one constraint identified
• Calendly link
• "I run these personally" language
• Limited spots framing (capacity, not marketing)

Elements That Change Per Campaign

• The anchor phrase / headline connecting CTA to the campaign's core tension
• "What I'm looking at" — three diagnostic focus areas in campaign-specific language
• Optional client quote or social proof specific to the campaign subject
• The bridge sentence from the gap section

Not a Template, But a Pattern

Each CTA section gets written fresh with campaign-specific framing, following the same beats: anchor line → what the diagnostic covers (3 items) → logistics (60 min, free, personal) → capacity note → Calendly button.

PART 2: THE EVERGREEN DISTRIBUTION SET

When to Build This

After the evergreen page is complete and live. Distribution content references the page — if the page changes, links and descriptions break.

Critical: All distribution now points to the evergreen page URL, not the standalone article. The standalone article can remain live but is no longer the primary link.

Angle Expansion Process

Step 1: Mine the Angles

Read every core asset. List every insight, data point, story moment, or emotional trigger that could anchor a LinkedIn post.

Priority order for angle mining:

1. The briefing (richest source — every segment has 2–3 unused hooks)
2. The article / evergreen page (multiple entry points, launch week used one)
3. The tools (calculator inputs and result tiers suggest angles)
4. The diagnostic results (each outcome pattern is its own angle)
5. Launch-week performance data (what got engagement)

Typical yield: 12–20 raw angles.

Step 2: Filter to Distinct Entry Emotions

Most raw angles collapse into 3–5 distinct emotional entry points. Group them.

The test: If two angles make the reader feel the same thing, they're the same angle with different examples. Keep the stronger one.

Step 3: Write the Full Content Menu

For each angle, write fully:

• LinkedIn TL post (Steve Cunningham format, no CTA, image spec, first comment links to evergreen page)
• LinkedIn hand-raiser (unique keyword, tool deliverable, image/GIF spec)
• Email alternates (2–3 per slot × 5 slots = 10–15 emails, date-agnostic)
• Substack notes (3 per slot × 3 slots = 9 notes)

Step 4: Assemble Campaign Combos

Pre-assembled weeks: 2 TL posts + 1 hand-raiser + 5 emails + 3 notes.

Each combo needs:

• A name (the angle it leads with)
• Tonally cohesive pieces (one emotional family per week)
• Unique hand-raiser keyword
• One-line description of who it targets and what it makes them feel

Minimum: 3 combos per campaign (3 full cycles before content repeats).

Step 5: Write DM Variations

One DM 1 opener per keyword. Base sequence structure (trigger → qualify → deliver → bridge → offer) carries over.

Content Menu Document Structure

# [CAMPAIGN NAME] — EVERGREEN VERSION

## Core Assets
- Evergreen Page: [URL]
- Tool 1: [name] (embedded + standalone at [URL])
- Tool 2: [name] (embedded + standalone at [URL])
- Briefing: [URL]
- Diagnostic CTA: [Calendly URL]

## Signature Block | First Comment (links to evergreen page)

# LINKEDIN TL POSTS (6–10)
# LINKEDIN HAND-RAISERS (3–5, unique keywords)
# EMAILS (2–3 per slot × 5 slots)
# SUBSTACK NOTES (3 per slot × 3 slots)
# DM SEQUENCE (base + openers per keyword)
# CAMPAIGN COMBOS (3+ pre-assembled weeks)

COMMON FAILURE MODES

Page Build

• Pasting the article instead of recomposing it. The article sections must be condensed to create momentum toward tools. If you can read a section and forget there's a tool coming, it's too long.
• CSS collisions between two inline tools. Two tools on one page with .question, .result, .intro classes will override each other. Namespace everything.
• var() in innerHTML. Tool JS that generates HTML dynamically and uses var(--gold) will render wrong. Hardcode hex.
• Skipping the tool intro screen. Thinking the narrative section replaces it. Both co-exist — the narrative creates the tension, the tool intro gives instructions.
• Not preserving article visualizations. The Proof Gap rebuild initially dropped the React visualizations and replaced them with static text. The page felt flat. If the article had interactive elements doing persuasion work, they must carry over.
• Conversion gap section is too thin. If it's one sentence instead of three structured can/can't points, the CTA feels disconnected.

Distribution

• Angles that feel like the same post reworded. Entry emotion test — each angle must target a different feeling.
• Tool descriptions that drift from actual tool. Write one accurate description, reference everywhere.
• Date-specific language surviving. "This Wednesday," "Tomorrow at midnight" — search and replace.
• First comment linking to standalone article. All distribution points to evergreen page once live.
• Keyword collision. Every keyword unique across the entire set.

BUILD SEQUENCE

PAGE BUILD:
 1. Inventory core assets (all must be ship-ready)
 2. Map section sequence (which article sections, where tools go)
 3. Recompose narrative (condense, write tool bridges)
 4. Embed Tool 1 (strip standalone chrome, namespace CSS/JS)
 5. Embed Tool 2 (same)
 6. Preserve article visualizations if applicable
 7. Add briefing section
 8. Write conversion gap (three can/can't points)
 9. Write CTA (campaign-specific framing)
10. Build nav (section labels, scroll tracking)
11. QC page (visual, functional, cross-tool, copy)

DISTRIBUTION:
12. Mine angles from all assets
13. Write full content menu
14. Assemble campaign combos
15. Write DM variations
16. QC distribution content

Steps 1–11 produce the evergreen page. Steps 12–16 produce the distribution set. Don't start distribution until the page is live.

Skill file extracted from: Subtract/Add Evergreen + Proof Gap Evergreen builds Created: February 2026