# Per-Section QA Checklist

Run this for every brand before marking the brief page done.

## Page-Level

- [ ] CSS custom properties set: `--brand-primary`, `--brand-dark`, `--bg` on `<body>`
- [ ] `<link>` to shared `brief-page.css` present (not inline styles)
- [ ] Scroll progress bar present (`<div class="scroll-bar" id="sb">`)
- [ ] Header: brand name, threat level badge, Brief/Full toggle, back link
- [ ] `Full` toggle links to working `index.html`
- [ ] No 404s — run: `grep -o 'src="[^"]*"' brief.html | sed 's/src="//;s/"//' | while read f; do [ -f "$(dirname $0)/$f" ] || echo "MISSING: $f"; done`
- [ ] No `border-radius` visible on any card or image
- [ ] Page loads without console errors

## Hero

- [ ] Left panel: brand name + tagline + 3 stats visible on dark background
- [ ] Right panel: brand identity (logo/wordmark OR iconic product) — NOT campaign photography
- [ ] Right panel: no campaign imagery (celebrities, seasonal ads, specific moments)
- [ ] Right panel: no images with baked-in rounded corners

## TL;DR Strip

- [ ] 4–5 stats present (MAU/users, revenue, markets, founding year minimum)
- [ ] Strategic call present and sharp — "Borrow / Watch / Reject" framing
- [ ] Strategic call is a recommendation, not a description

## §01 Quick Facts

- [ ] Image: primary product artifact, not a campaign image
- [ ] Fact grid: founded, revenue, MAU/users, parent, markets, employees (minimum 4 cells)
- [ ] No empty fact cells

## §02 Positioning

- [ ] Image: brand's cultural world — lifestyle or brand environment (opens LEFT COL, should be impactful)
- [ ] Image height: 280–340px (largest card in left col)
- [ ] No campaign-specific imagery (if celebrity is brand ambassador, check if it's a specific ad or brand identity)
- [ ] Face fully visible if person is the subject — not cropped at forehead or crown
- [ ] Quote from brand/executive present if available

## §03 Brand Evolution

- [ ] Image: wide/panoramic brand overview (natural ratio preferred — creates short contrast card after tall §02)
- [ ] Timeline present: minimum 3 stages with years
- [ ] Current stage marked clearly

## §04–05 Color & Typography

- [ ] Card image: brand visual system or typography in use (not a product shot)
- [ ] **Expanded — Logo sub-section:** wordmark image + logo construction/spacing guide image
- [ ] **Expanded — Color sub-section:** CSS color swatches with hex values (minimum primary + dark + accent)
- [ ] **Expanded — Typography sub-section:** type specimen image OR typeface name demonstrated at display size
- [ ] Missing any of the 3 sub-sections = FAIL

## §06 Layout & UX

- [ ] Card image: website homepage or app landing screen (shows full design intent)
- [ ] Card image: natural ratio (not forced crop)
- [ ] **Expanded — minimum 3 screens:** homepage/hero → core feature → secondary feature
- [ ] Screens at natural ratio, full-bleed (margin: 0 -20px)
- [ ] No app store screenshots with rounded device borders
- [ ] No small image grids with forced crops

## §07 Assessment

- [ ] Strengths list: minimum 4 items
- [ ] Vulnerabilities list: minimum 3 items
- [ ] Items are strategic insights, not generic observations ("Daily habit loop" not "popular app")

## §08 Verdict

- [ ] Image: brand's most iconic artifact — "this is what [brand] IS"
- [ ] Three columns present: Borrow / Watch / Reject
- [ ] Each column: minimum 2 items
- [ ] Link to full analysis present

## §09 Brand Personality

- [ ] Archetype present (e.g., The Outlaw, The Creator)
- [ ] Tone described in 3 adjectives
- [ ] Primary audience: age + geography + psychographic (not just "Gen Z")
- [ ] "What they never say" or equivalent — defines what the brand ISN'T

## §10 Social

- [ ] Image: social-native content — designed TO be shared, not a screenshot OF a feed
- [ ] Face fully visible if person is in frame (not cropped at crown)
- [ ] Social platforms covered: minimum 3 with distinct descriptions per platform
- [ ] #hashtag strategy or giveaway mechanic documented if relevant

## §11 Campaigns

- [ ] Image: cinematic, film-grade — the brand at its most produced (left col visual anchor)
- [ ] Natural ratio preferred (panoramic landscape)
- [ ] Minimum 2 campaigns documented with: name, year, agency, channels, description
- [ ] Campaign sub-images present (3-column mini-grid of campaign assets)

## §12 Audience

- [ ] Image: documentary/lifestyle — shows actual demographic (face visible if portrait)
- [ ] Core demographic: age range + geography + psychographic descriptor
- [ ] Retention driver identified
- [ ] Vulnerability / aging curve noted (when do they become our prospect?)

## §13 vs [Client]

- [ ] Image: frames the comparison well — cultural or campaign image
- [ ] Comparison table: minimum 5 dimensions
- [ ] Win/loss columns clear (`.wc` = competitor wins, `.we` = client wins)
- [ ] Strategic call present at bottom
- [ ] Link to full analysis present

## Brand in Practice

- [ ] Preview: 3 images visible before expand
- [ ] Expanded: minimum 9 additional images (total 12+)
- [ ] ZERO images duplicated from section cards — check manually
- [ ] Images cover variety: agency work + 3D objects + product variants + illustration + motion (where available)
- [ ] All images load (no broken grid cells)

## Final

- [ ] Page reviewed at 1280px width (desktop standard)
- [ ] Page reviewed at 768px width (tablet — mosaic should stack to single column)
- [ ] Page reviewed at 375px width (mobile — all text readable, images not broken)
- [ ] Scroll progress bar works
- [ ] All expand/collapse interactions work (click card → expands, click again → collapses)
