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

QC CHECKLIST — BRIEFING LANDING PAGE

For Timer-Based Video Delivery Pages

HOW TO USE THIS CHECKLIST

Run through each section after the build is complete. Items marked with ⚠️ are the most common failure modes. Test both states (watch and expired) before deploying.

1. CONFIG & DEPLOYMENT

[ ] ⚠️ Expiration date is in UTC. The CONFIG comment should show the ET equivalent and the UTC conversion. Verify the math: ET midnight = +5 hours UTC (EST) or +4 hours (EDT).
[ ] Expiration date is in the future (for initial deploy). The page should show watch state on first load.
[ ] Vimeo embed URL is present (not about:blank). If still placeholder, flag for post-recording update.
[ ] OG meta tags updated. Title matches briefing name. Description matches hero subtitle.

2. HEADER & TIMER

[ ] Logo links to advisoryos.ai. Logo image loads from Convertri CDN.
[ ] Nav links: "The Article" links to correct article URL. "Watch" anchors to #video.
[ ] CTA button links to correct Calendly URL.
[ ] Timer bar counts down in real time (Days:Hrs:Min:Sec). Verify by checking seconds tick.
[ ] Timer separators display between units.
[ ] ⚠️ Timer expired state works. Manually set CONFIG date to the past and reload. Timer bar should show "This briefing has ended" and hide countdown.
[ ] Header is fixed and stays above content on scroll.
[ ] Header backdrop-filter works (blurred background on scroll).

3. HERO

[ ] Background image loads. Kathryn's headshot from Cloudinary URL.
[ ] Gradient overlay fades left-to-right (solid charcoal on left, transparent on right).
[ ] Eyebrow reads "The [Campaign Name] Briefing" with gold line prefix.
[ ] h1 has correct title with gold on the key word.

[ ] Subtitle includes runtime (e.g., "17 minutes") and one-sentence description.

[ ] CTA button text says "Watch the Briefing" and anchors to #video.

[ ] Subtext shows human-readable expiration: "Available until [Day], [Date] at midnight ET."

[ ] ⚠️ Expired hero state. When expired: button text changes to "Book Your Systems Diagnostic," href changes to Calendly, subtext changes to "This briefing has ended — the diagnostic covers everything in it."

4. CONTEXT SECTION

[ ] Background is cream (var(--cream)), not dark.

[ ] Eyebrow reads "The Premise."

[ ] h2 is the hook — the core tension or insight that makes someone want to watch.

[ ] 1–2 paragraphs of setup copy. Not a summary of the briefing — a reason to watch it.

[ ] ⚠️ Three context highlights present. Each has: gold left border, uppercase label, description text.

[ ] Context highlights map to briefing arc. Labels should reflect the three main movements of the briefing (e.g., The Count / The Match / The Results).

[ ] Max-width is narrower than other sections (780px vs 1100px). Verify text doesn't stretch too wide.

[ ] Copy doesn't spoil the briefing. Sets up the tension, doesn't resolve it. The viewer should want to watch, not feel like they already know the answer.

5. VIDEO SECTION — WATCH STATE

[ ] Background is dark (charcoal gradient).

[ ] Eyebrow reads "The Briefing."

[ ] h2 is the briefing title.

[ ] Subtext includes runtime + three-beat description.

[ ] Vimeo embed is responsive (16:9 container, iframe fills it).

[ ] Video countdown bar below embed mirrors header timer.

[ ] CTA below countdown: "Book Your Systems Diagnostic" + subtext.

[ ] ⚠️ Vimeo URL is correct (or flagged as placeholder). Test that video plays.

6. VIDEO SECTION — EXPIRED STATE

[ ] Header: "This Briefing Has Ended" + supporting line.

[ ] ⚠️ Four path cards present in 2×2 grid.

[ ] Card 1 — Read: Links to the campaign article. Correct URL.

[ ] Card 2 — [Tool verb]: Links to campaign micro-tool #1. Correct URL.

[ ] Card 3 — [Tool verb]: Links to campaign micro-tool #2. Correct URL.

[ ] Card 4 — Apply (primary): Links to Systems Diagnostic Calendly. Gold-bordered. Correct URL.

[ ] Each card has: eyebrow label (verb), h4 (asset name), paragraph (description), button.

[ ] Card descriptions accurately reflect each asset. No plausible-sounding but incorrect claims about what the tool does.

[ ] Bridge line present below cards. Connects the four paths narratively.

[ ] ⚠️ All links work. Click each button in expired state. No 404s, no placeholder URLs.

7. FINAL CTA

[ ] Visible in watch state. "This briefing opens the loop." + diagnostic description + CTA button + scarcity line.

[ ] ⚠️ Hidden in expired state. Set CONFIG to past, reload — this section should not appear.

8. STATE TRANSITIONS

Test both states by changing the CONFIG date:

[ ] ⚠️ Watch → Expired transition. Set expiration to 30 seconds from now. Wait. Page should transition without reload:

Timer bar switches to expired message

Video section switches from embed to path cards

Hero button/subtext update

Final CTA hides

[ ] Page loads correctly in watch state (expiration in future).

[ ] Page loads correctly in expired state (expiration in past).

[ ] No flash of wrong state on load. The correct state should appear immediately, not show watch state for a frame before switching to expired.

9. DESIGN & BRAND

[ ] Gold scrollbar on webkit browsers.

[ ] Eyebrow pattern consistent: gold text, uppercase, letter-spacing 0.2em, 40px gold line prefix.

[ ] Button style: Gold background, charcoal text, uppercase, hover lifts and lightens.

[ ] Expired path cards: Gold ::before line at top, expands on hover. Primary card has gold border + dim gold background.

[ ] Footer: Charcoal background, 3px gold top border, correct links (Contact, LinkedIn, Substack, Creating Your Plan), legal line with privacy/terms/disclaimer links.

[ ] No hardcoded colors where CSS custom properties should be used.

10. RESPONSIVE

[ ] 1024px: Hero background image hides, hero becomes solid charcoal, content goes full-width.

[ ] 968px: Header stacks vertically. Timer bar wraps. Context highlights go single-column. Expired paths go single-column.

[ ] 768px: Hero title shrinks. Section padding reduces. Footer links stack.

[ ] 480px: Further type scaling. Timer numbers shrink. Video countdown numbers shrink.

[ ] Landscape (max-height 500px): Header compresses to single row. Hero margin shrinks. Sections compact.

[ ] ⚠️ Video is reachable on mobile. Fixed header + timer bar height shouldn't push the video too far down. Scroll to video section on mobile and verify it's accessible.

11. COPY QC

[ ] No framework teaching in context section. The context sets up why the viewer should watch — it doesn't summarize the briefing's content.

[ ] Expired card descriptions match actual assets. Each card accurately describes what the user will get when they click.

[ ] Consistent campaign language. Terms used in context section, video heading, and expired cards all match (e.g., "silent list" not switching to "dead list" randomly).

[ ] Runtime matches recorded video. If subtitle says "17 minutes," the video should be approximately 17 minutes.

[ ] No orphan words in h1 or h2. Use if needed.

[ ] ⚠️ Expiration date in hero subtext matches CONFIG date. If CONFIG says March 1, subtext should say "March 1" (not a different date from a previous campaign).

12. PRE-DEPLOY CHECKLIST

Run this final pass before going live:

[ ] CONFIG expiration date is correct (future, correct timezone math)

[ ] Vimeo embed URL is real (not placeholder)

[ ] All expired path URLs are live and working

[ ] Article URL in nav is live

[ ] Calendly link is correct

[ ] OG meta tags are updated

[ ] Hero subtext date matches CONFIG

[ ] Tested both states (watch + expired)

[ ] Tested on mobile (at least one phone)

QC checklist for: Briefing Landing Page (timer-based video delivery) Companion to: briefing-landing-page-SKILL.md Created: February 20, 2026