INTERACTIVE NARRATIVE — SKILL FILE

Structure:

<div class="cards-grid">
    <div class="card">
        <div class="card-number">1</div>
        <div class="card-title">Question text</div>
        <div class="card-text">Context with <em>emphasis</em>.</div>
    </div>
</div>

Pattern 6: Comparison Table (HTML only)

Persuasive job: Creates a visual punchline. Use when the argument has a list where one item is categorically different from the rest.

How it works:

• Simple two-column table
• Most rows are neutral
• Final row is gold (text color + font-weight)
• The contrast between neutral rows and the gold punchline row carries the point

Data needed:

• 2 column headers
• 4-6 rows of neutral content
• 1 punchline row (gold)

THE PROSE-INTERACTIVE-PROSE PATTERN

This is the core rhythm that makes interactive narratives work. Every interactive is sandwiched:

1. Setup prose — Makes a claim the reader might accept intellectually but hasn't felt. "Think about the last five prospect conversations you had..."
2. Interactive — Makes them feel it. The accumulator fills up. The toggle reveals asymmetry. The sequencer shows transformation.
3. Interpretation prose — Tells them what they just experienced and connects it to the next claim. "An advisor with documented client outcomes reduces that phase significantly..."

Never drop an interactive without setup and interpretation. An interactive without setup is a toy. An interactive without interpretation is an abandoned argument.

THE ARGUMENTATIVE ARC

The Proof Gap follows this progression. Different topics will vary, but the structural beats are consistent:

Beat 1: The Pattern (cream)

Open with a specific scenario. Not a statistic. Not a claim. A recognizable situation. "A consultant I worked with had helped a mid-market services company..."

The reader should think: "I've seen that."

Beat 2: The Cost(s) (dark + interactives)

Name what the pattern costs. Be specific. Use interactives to make the cost visceral. The Proof Gap names TWO costs (trust tax + competitor comparison), each with its own section and interactive.

The reader should think: "That's happening to me."

Beat 3: The Constraint (cream)

Name the real reason this hasn't been solved. NOT "you should do X." Instead: "Here's why X hasn't happened yet." This section reframes the problem. The Proof Gap reframes from "you need more marketing" to "your proof doesn't exist in a findable form."

The reader should think: "That's actually the problem."

Beat 4: The Shift (dark + interactive)

Show what changes when the constraint is removed. Use a sequencer or similar to show the transformation at multiple touchpoints. Keep it concrete — specific conversations that change, not abstract benefits.

The reader should think: "I want that."

Beat 5: Self-Assessment (dark, continued)

Three questions that make the reader locate themselves in the argument. These should be answerable immediately without data — gut-check questions.

The reader should think: "I know my answer, and it's not good."

Beat 6: The Starting Point (off-white or cream)

Remove the objection. "You already have the material." This is NOT the CTA. It's the permission to believe the shift is possible. Short section — 2-3 paragraphs.

The reader should think: "I could actually do this."

Beat 7: CTA (dark)

One closing quote (big-quote style). One headline. One sub-line. One button. One subtext line with logistics.

<section class="cta-section">
    <div class="container" style="margin-bottom: 3rem;">
        <p class="big-quote">"Your best client outcomes should be working 
        for you <em>permanently</em> — not evaporating after delivery."</p>
    </div>
    <div class="container">
        <h2>Ready to Close the Proof Gap?</h2>
        <p class="cta-sub">One line connecting the argument to the action.</p>
        <a href="[calendly-or-tool-link]" class="cta-button">Button Text</a>
        <p class="cta-subtext">60 minutes · Find the constraint · No obligation</p>
    </div>
</section>

NARRATIVE TRACKABILITY

Interactive narratives use multiple examples, characters, and scenarios across sections. When characters share similar roles (two women, both doing financial close work) or examples are structurally similar (two firms with recurring work problems), the reader loses track of who is who and which story they're in. This problem compounds across sections — the reader from Section 1 carries assumptions into Section 2, and similar details create false continuity.

Rules

One primary character per section. Each section's example should involve one person in one situation. A section can reference a general pattern ("most firms") but the story should follow one person. Don't blend a "your team" generalization with a specific character's story in the same section.

Re-establish at every section boundary. When a new section introduces a new character, establish them with enough distinguishing detail that the reader can't confuse them with a previous character. Don't rely on gender or pronouns alone — give them a specific role, industry, firm type, or deliverable that makes them distinct.

• Weak: "She closes the books every month." (Who? The same woman from the previous section?)
• Strong: "A tax firm founder in Austin closes the books every month." (New person, clearly.)

Differentiate similar roles. If two examples across the article involve people in similar positions (managing partner, firm founder, practice owner), give them at least TWO distinguishing details: different industry + different deliverable, or different firm size + different problem. One distinguishing detail is not enough — readers skim, and they'll miss a single differentiator.

Anchor pronouns within two sentences. After introducing a character, the first pronoun reference must appear within two sentences. If the character was introduced three paragraphs ago and a pronoun appears, the reader has to scroll back. Either re-establish or restructure.

Bad: "A managing partner hired a senior accountant specifically to own the month-end close. Six weeks of shadowing. Detailed handoff conversations. She was confident." — four sentences between the managing partner and "she." Reader has to work.

Good: "A managing partner hired a senior accountant to own the month-end close. The partner spent six weeks on shadowing and detailed handoff conversations. She was confident the process had been transferred." — "the partner" re-anchors before "she" lands.

Bridge between examples. When transitioning from one example to another within the same section or across sections, the bridge must do three things:

1. Close the previous example explicitly.
2. Signal the shift — make it unmistakable that a new scenario is starting.
3. Open the new example with distinguishing context.

A subhead alone ("A Different Firm.") is the minimum viable bridge. A subhead plus a distinguishing lead sentence is better. A bare paragraph that introduces a new "she" or "he" without signaling the shift is a failure.

Numbers must trace. If Section 1 calculates $6,400 and Section 2 calculates $36,000, the difference must be clear (different firm size, different billing rate, different hours). If the numbers shift without explanation, the reader assumes it's an error — and stops trusting the math in the rest of the piece. When a bridge paragraph references costs from multiple examples ("$6,400 here, $36,000 there"), both numbers must be traceable to established calculations.

The thread test. After writing each section, pause and ask: if a reader arrived at this paragraph with no memory of the previous section, would they know who is being described and what scenario they're in? If the answer is no, the character needs re-establishing or the transition needs strengthening.

WRITING STYLE

Tone

• Second person ("you", "your") — the reader is the subject
• Specific, not abstract — "$120K in additional revenue", not "significant results"
• Present tense for patterns — "Every new prospect starts at zero"
• Confident but not aggressive — states what happens, doesn't lecture
• Uses — for em-dashes,   to prevent orphan words at line ends
• Uses ’ and “/” for proper typography

Paragraph rhythm

• Short paragraphs (2-4 sentences typical)
• Occasional single-sentence paragraphs for emphasis
• Lead paragraphs are slightly longer (set the scene)
• Never more than 3 paragraphs before a visual element breaks up the text

Emphasis

• used sparingly — 1-2 per section maximum
• for key reframe words, especially in quotes
• Gold italic in quotes for the pivotal word/phrase
• Never bold AND italic together

/* Light sections */
section.cream { background: #f5f4f0; color: #1a1a1a; }
section.off-white { background: #faf9f7; color: #1a1a1a; }

/* Dark sections */
section.dark { 
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); 
    color: #f5f4f0; 
}

h1, h2, h3, h4 { font-family: 'Cormorant Garamond', serif; font-weight: 400; }
body { font-family: 'Inter', -apple-system, sans-serif; font-weight: 400; font-size: 1rem; }
strong { font-weight: 500; } /* Not 600 or 700 — subtle emphasis */

/* Section headings */
section h2 { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.15; letter-spacing: -0.01em; }
section h3 { font-size: 1.5rem; font-weight: 500; }

/* Body text */
section p { font-size: 1rem; line-height: 1.85; margin-bottom: 1.5rem; }
.lead { font-size: 1.15rem; }

/* Micro-labels (eyebrows, stat labels, etc.) */
.section-eyebrow {
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #b79d64;
}

<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">

nav {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 3px solid #b79d64;
    padding: 20px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

.viz-container {
    background: var(--charcoal);
    border: 1px solid rgba(245, 244, 240, 0.1);
    margin: 48px 0;
    min-height: 380px;
}

/* When inside a dark section */
section.dark .viz-container {
    background: rgba(245, 244, 240, 0.03);
}

/* Tablet: 968px */
@media (max-width: 968px) {
    section { padding: 60px 5%; }
    .hero { padding: 120px 5% 80px; }
}

/* Mobile: 768px */
@media (max-width: 768px) {
    nav { padding: 16px 5%; }
    .logo-text { font-size: 1.4rem; }
    .logo img { height: 32px; }
    .nav-links { display: none; }
    .hero { padding: 100px 5% 60px; min-height: auto; }
    .cards-grid { grid-template-columns: 1fr; }
    .flipper-grid { grid-template-columns: 1fr 1fr; }
    section { padding: 60px 5%; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #1a1a1a; }
::-webkit-scrollbar-thumb { background: #b79d64; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #c4aa74; }
html { scrollbar-width: thin; scrollbar-color: #b79d64 #1a1a1a; }

<footer>
    <div class="footer-links">
        <a href="https://advisoryos.ai/contact">Contact</a>
        <a href="https://www.linkedin.com/in/itskathrynbrown/" target="_blank">LinkedIn</a>
        <a href="https://substack.com/@kathrynhbrown" target="_blank">Substack</a>
        <a href="https://creatingyourplan.com" target="_blank">Creating Your Plan</a>
    </div>
    <p class="footer-legal">&copy; 2026 Creating Your Plan. All rights reserved. | 
    <a href="https://creatingyourplan.com/privacy-policy">Privacy Policy</a> | 
    <a href="https://creatingyourplan.com/terms-of-service">Terms of Service</a> | 
    <a href="https://creatingyourplan.com/disclaimer">Disclaimer</a></p>
</footer>