Source: business/marketing/qc-agents/qc-checklist-briefing-interactive.md

QC CHECKLIST — BRIEFING INTERACTIVE

For Recording Visuals Used in Screen-Recorded Briefings

HOW TO USE THIS CHECKLIST

Run through each section after the build is complete. Items marked with ⚠️ are the most common failure modes — check these first.

1. CONTENT FRAMING

The #1 failure mode for briefing interactives is restating the article framework instead of showing real client work.

[ ] ⚠️ Behind-the-scenes test: Could someone watch this briefing WITHOUT reading the article and understand it as a complete story? If not, it's too dependent on the framework.
[ ] ⚠️ Repetition test: Read the article and the briefing side by side. Is any section of the briefing just the article's framework with different CSS? If yes, rewrite as client-specific narrative.
[ ] Specific client: Opens with a practice profile (type, revenue, team, what they thought the problem was). Not a generic persona.
[ ] Client voice: At least 1–2 direct quotes from the client showing their mindset before and during the discovery.
[ ] Your read vs. their read: At least one moment where you show what the client believed vs. what you found. The gap between their interpretation and yours IS the value demonstration.
[ ] Specifics over categories: Findings are "her 8 no-shows" not "the no-show wound type." Numbers, timelines, dollar amounts, and details from THIS engagement — not industry averages.
[ ] Process visibility: The viewer can see WHAT you did (counted categories, walked through their CRM, wrote messages together) — not just WHAT you concluded.
[ ] ⚠️ Framework vs. story test: For each section, ask: "Am I teaching a concept or telling what happened?" Every section should answer the latter.

2. INTERACTION MODEL

[ ] ⚠️ Zero buttons. No "Reveal Next," no "Click to see," no toggles, no "Calculate." Everything is hover or scroll. Search the HTML for and onclick — there should be zero results.


[ ] All detail panels use hover-expand. max-height: 0 → max-height: 300px on :hover. No click handlers.
[ ] All list items use scroll-stagger. IntersectionObserver with data-delay attributes. Items cascade in on scroll, not on click.
[ ] Scroll reveal on all content blocks. Every , every content group has .reveal class or is inside a stagger container.
[ ] No auto-advance. Nothing moves on a timer. The presenter controls all pacing by scrolling and hovering.
[ ] Hover hint text is absent. No "hover to expand" or "click to reveal" instructions. The presenter knows how the page works — the viewer never sees hover states, only the results.



3. NARRATIVE ARC

[ ] Beat 1 — The Practice: Profile cards present. Problem card (red) present. Client quote establishing what they thought the problem was.
[ ] Beat 2 — The Discovery: Shows the actual exercise/process you did together. Stagger list or equivalent showing items emerging.
[ ] Beat 3 — The Findings: Hover-expand items showing what you found in their specific practice. Each item tells a story, not just states a category.
[ ] Beat 4 — The Rewrite/Build: Before/after side-by-side zones showing the actual work product. Specific to this client (dollar amounts, timeframes, service details).
[ ] Beat 5 — The Results: Stagger result lines → hero number → comparison block. Clear build from activity to outcome.
[ ] Beat 6 — The Gap: Layer stack showing what the client could do alone vs. what requires a system. "Did / We Did / Still Open" or equivalent framing.
[ ] Beat 7 — The Decision: Two offer cards (free tool + diagnostic). CTA section.
[ ] ⚠️ No missing beats. Every beat above must be present. A briefing without the practice profile is an article. A briefing without the gap is a testimonial. The full arc is what makes it a briefing.


4. INTERACTION PATTERNS
For each interactive element in the briefing:

[ ] Pattern matches narrative need. Profile cards for the practice. Stagger lists for discovery. Hover-expand for findings. Side-by-side for rewrites. Summary numbers for results. Layer stack for the gap. Offer cards for the close.
[ ] Hover-expand panels have enough content. Each hover detail should be 2–4 sentences of narrative, not just a restatement of the title in more words.
[ ] Stagger delays are paced for narration. 200–400ms between items. Too fast (< 150ms) = no time to narrate each one. Too slow (> 500ms) = awkward dead air.
[ ] Side-by-side zones have real contrast. The "after" column should feel materially different from the "before" — not just a rephrasing.
[ ] ⚠️ Summary numbers earn the pause. The hero number (gold, large) should be the emotional climax of the results sequence. If it's not surprising, it shouldn't be a hero number.
[ ] Big quotes are between sections, not inside them. Used as punctuation/transition, not decoration.
[ ] Maximum 2–3 big quotes per briefing. More than that dilutes the impact.


5. DESIGN & BRAND

[ ] Dark theme only. No cream or off-white sections. Background is #141414 with #1e1e1e and #1a1a1a for cards/variants.
[ ] Body text is 20px. Larger than articles (16px) for video readability.
[ ] Detail text in hover panels is 17px. Slightly smaller than body but still readable on video.
[ ] Cormorant Garamond for all headings. Font-weight 400.
[ ] Inter for body text. Font-weight 300.
[ ] strong is 500. Never 600 or 700.
[ ] Gold (#b79d64) used for: eyebrows, key numbers,  in quotes, hover borders/backgrounds, the problem emphasis.

[ ] Red (#c45a4a) used for: the problem card in the profile, and nowhere else (unless a secondary severity indicator is needed).
[ ] Nav: Fixed, blurred background, "Briefing" tag in gold with border. NOT the heavy 3px gold bottom border (that's micro-tools and articles).
[ ] Hero: Full viewport, centered, "An Advisory OS Briefing" label, h1 with gold , subtitle describing the specific client scenario.

[ ] Standard Advisory OS footer with all links.
[ ] CSS custom properties (var()) are acceptable. Unlike micro-tools, briefing interactives have no JS-generated HTML, so var() won't break.


6. RESPONSIVE

[ ] Profile cards collapse to 3-column at 968px, 2-column at 768px.
[ ] Side-by-side zones collapse to single column at 968px.
[ ] Comparison blocks collapse to single column at 968px.
[ ] Offer grid collapses to single column at 968px.
[ ] Layer stack rows switch from grid to single column at 768px.
[ ] Nav text shrinks at 768px. Logo image shrinks.
[ ] Section padding compresses at breakpoints.
[ ] ⚠️ Primary use case is desktop. This is opened full-screen in Chrome for recording. Responsive is a secondary concern — but the page should still be functional on mobile in case someone opens it on a phone.


7. JAVASCRIPT

[ ] IntersectionObserver for scroll reveals. Threshold 0.15, rootMargin 0px 0px -40px 0px.
[ ] Separate observers for stagger containers. Each container with stagger children gets its own observer instance.
[ ] Observer unobserves after triggering. observer.unobserve(entry.target) — animations fire once, not on every scroll.
[ ] Stagger delays via data-delay attributes. Not hardcoded in JS.
[ ] No click event listeners. All interactivity is CSS hover or scroll-triggered JS.
[ ] No external dependencies. Vanilla JS only. No React, no libraries (unlike interactive narrative articles which use React via CDN).


8. COPY QC
Run these checks against all visible text — headings, body text, hover-expand detail, quotes, and offer descriptions.

[ ] Proper typography: — for em-dashes, ’ for apostrophes, “/” for quotes,   to prevent orphan words.
[ ] No orphan words in headings (use   before the last word).
[ ] ⚠️ No twinning. Scan for negation-then-correction patterns ("It's not X. It's Y."). One instance is acceptable if it reads as factual correction. Two or more is a pattern violation.
[ ] ⚠️ No parallel structures across 3+ items. Scan for repeated sentence structures across finding items, layer descriptions, or offer cards.
[ ] No formulaic AI patterns. No "here's the thing," "let's be honest," "the reality is." The copy should sound like the presenter's natural speaking voice.
[ ] Client quotes sound human. Not polished or strategic — slightly messy, the way people actually talk.
[ ] Hover-expand detail reads as narrative. "She assumed they weren't interested. When we dug in, most had canceled same-day..." — NOT "No-shows are typically caused by embarrassment and shame compounding over time."


9. CONGRUENCE WITH CAMPAIGN

[ ] Briefing tells a different story than the article. Different case details, different emphasis, complementary not redundant.
[ ] Offer cards link to actual campaign assets. Tool name and description match the real tool. Diagnostic link is correct.
[ ] Numbers are consistent. If the briefing says 53 contacts and $62K, those numbers don't conflict with the article's case details (which should be different — separate case).
[ ] No article content leaks. The briefing doesn't use the article's comparison tables, framework diagrams, or specific examples. It references the same underlying methodology but through the lens of a client story.


10. RECORDING READINESS

[ ] Open in Chrome full-screen. Does everything render correctly?
[ ] Scroll from top to bottom at narration pace. Do elements appear at the right moment? Any elements that appear too late or too early?
[ ] Hover over every expandable item. Do details expand and collapse smoothly? Any jank?
[ ] Pause on each big quote and summary number. Does the pacing feel right for a 3-second hold?
[ ] Full scroll-through takes 10–20 minutes at narration pace. If shorter, content may be too thin. If longer, consider cutting a section.
[ ] ⚠️ No scroll jank. Smooth scrolling throughout. No layout shifts when hover panels expand.
[ ] Nav stays fixed and unobtrusive. Doesn't overlap content. Logo visible but not distracting.


QC checklist for: Briefing Interactive recording visuals Companion to: briefing-interactive-SKILL.md Created: February 20, 2026