ui-ux-master 1.2.0 → 1.5.0

package/references/brand-method-card-based-discovery.md

@@ -0,0 +1,285 @@
+# Brand Method: Card-Based Discovery
+
+Use this skill when building for marketplaces, media platforms, travel aggregators, content libraries, product catalogs, rental platforms, or any context where the user browses, saves, and discovers from a large collection.
+
+Reference brands: Airbnb, YouTube, Spotify, Netflix, Disney+, LEGO, Nintendo, Booking.com listings, Etsy, Pinterest.
+
+---
+
+## When to Apply This Method
+
+Apply Card-Based Discovery when:
+- The product is a catalog, marketplace, or content library.
+- Users browse, save, filter, and compare rather than searching for one specific item.
+- The value proposition is breadth: "there's always something for you."
+- Discovery and serendipity are core to the experience.
+
+Do not apply when:
+- Users arrive with a specific known item in mind (use Utility Command Center).
+- The brand has a single product hero (use Product Cinema).
+- The primary goal is subscription sign-up (use Conversion Simplicity).
+
+---
+
+## Layout Structure
+
+### Hero / Entry Point
+- Not a full-screen hero — the card grid IS the value proposition.
+- Compact hero: search bar, category tabs, or personalized greeting with immediate content below.
+- Alternative: carousel or featured editorial band (1-3 items), then immediate card grid.
+- Call to action: "Browse [Category]" or personalized "Continue Watching / Listening / Exploring."
+
+### Card Grid
+- Primary layout pattern.
+- Grid: responsive, 2-6 columns depending on card type and screen.
+- Card rows: grouped by category, mood, recommendation engine, or curator picks.
+- Section headings above each row with optional "See all →" link.
+- Horizontal scroll rows for mobile (swipe gesture expected).
+
+### Filter and Sort Controls
+- Persistent or collapsible filter panel.
+- Filter types: category, price/rating range, location, date, availability, mood/genre.
+- Active filter chips shown above results — easy to clear individually or all.
+- Sort: relevance, price, rating, newest, most popular.
+
+### Card Types
+Define at least one primary card type per context:
+- **Content card**: thumbnail (16:9 or 1:1), title, creator/source, metadata (duration, views, rating).
+- **Product card**: image, name, price, rating, badge (deal, new, bestseller).
+- **Place/listing card**: image (4:3), name, location, rating, price/night, favorite icon.
+- **Media card**: album art, title, artist/show, play button.
+
+### Detail Page
+- Hero: large image or media player.
+- Primary action: "Play", "Book", "Add to Cart", "Save."
+- Metadata: ratings, description, related tags.
+- Recommendation section: "More like this", "Because you watched/liked."
+- Reviews (if applicable): summary + individual reviews.
+
+---
+
+## Color Scheme
+
+### Palette by Sub-category
+
+**Travel Marketplace (Airbnb)**
+- Background: `#FFFFFF`
+- Primary: `#FF385C` (coral/brand)
+- Surface: `#F7F7F7`
+- Text: `#222222`
+- Secondary text: `#717171`
+- Border: `#DDDDDD`
+- Map accent: brand coral
+- Favorite icon: `#FF385C`
+
+**Streaming / Media (Netflix, Spotify)**
+- Background: `#141414` (Netflix) or `#121212` (Spotify)
+- Surface: `#1E1E1E` or `#282828`
+- Primary text: `#FFFFFF`
+- Secondary text: `#B3B3B3`
+- Accent: `#E50914` (Netflix red) or `#1DB954` (Spotify green)
+- Progress bar: accent color on dark track
+
+**Family / Toys (LEGO, Disney, Nintendo)**
+- Background: `#FFFFFF`
+- Primary: Brand color (LEGO yellow `#FFD700` / red, Nintendo red `#E4000F`)
+- Surface: `#F8F8F8`
+- Text: `#1A1A1A`
+- Secondary text: `#666666`
+- Card border: `#EEEEEE`
+- Accent / CTA: brand primary
+
+**General Marketplace (Etsy)**
+- Background: `#FFFFFF`
+- Primary: `#F1641E` (Etsy orange)
+- Surface: `#F4F4F4`
+- Text: `#222222`
+
+### Rules
+- Dark surfaces: Spotify and Netflix — vivid accent pops against dark. Use sparingly.
+- Light surfaces: marketplaces, travel — clean white lets imagery drive color.
+- Card backgrounds must be neutral — let card content (images) provide color energy.
+- Favorites / save icon: always high-contrast so users can find it.
+
+---
+
+## Typography
+
+### Scale
+| Role | Size | Weight | Notes |
+|---|---|---|---|
+| Section heading | 18-24px | 600-700 | |
+| Card title | 14-16px | 500-600 | 1-2 line clamp |
+| Card metadata | 12-14px | 400 | Duration, views, rating |
+| Price | 14-16px | 600 | Tabular numerals |
+| Badge | 10-12px | 600-700 | All-caps, high contrast on brand color |
+| Filter label | 13-14px | 500 | |
+| CTA | 14-16px | 600 | |
+| Hero headline (if any) | 28-40px | 700 | |
+
+### Font Pairings
+| Context | Font |
+|---|---|
+| Travel / marketplace | Cereal (Airbnb), Circular, or Inter |
+| Streaming dark | Netflix Sans, or Inter/Roboto |
+| Music | Circular, Montserrat, or Nunito |
+| Family/toys | Nunito, Poppins, or Fredoka One |
+
+### Rules
+- Card titles must be readable at small sizes — minimum 14px.
+- Use `line-clamp` to keep card grids uniform — never let one card blow the layout.
+- Price: bold, tabular numerals, never ambiguous position on card.
+
+---
+
+## Spacing System
+
+| Token | Value | Use |
+|---|---|---|
+| `--space-xs` | 4px | Icon nudges, badge padding |
+| `--space-sm` | 8px | Card inner gaps |
+| `--space-md` | 12-16px | Card padding |
+| `--space-lg` | 20-24px | Grid gutters |
+| `--space-xl` | 32-40px | Section separation (heading to grid) |
+| `--space-2xl` | 48-64px | Between major content sections |
+
+- Grid gutter: 16-24px between cards. Smaller for media, larger for travel listings.
+- Section separation: 32-48px between category rows.
+- Cards must have consistent height within a row (use fixed aspect ratio on images).
+
+---
+
+## Motion and Interaction
+
+### Card Interactions
+- Hover: subtle shadow lift `box-shadow: 0 4px 16px rgba(0,0,0,0.15)`, image zoom `scale(1.03)` transition 200ms.
+- Favorite/save button: heart icon fill animation on click (scale 1.2 → 1.0, 150ms).
+- Play button overlay: appears on card hover with opacity transition.
+- Carousel/row scroll: smooth scroll with momentum. Show scroll indicator or arrows at edges.
+
+### Loading
+- Always use skeleton screens for card grids — never blank areas.
+- Skeleton: match exact card dimensions. Animate shimmer gradient left to right.
+- Infinite scroll: load next batch 200px before viewport bottom. Show spinner at bottom.
+
+### Transitions
+- Page navigation: instant load with skeleton → content fade-in. No full-page loading spinners.
+- Filter apply: instant result update with skeleton transition, never full page reload.
+- Media player appear: slide-up from bottom (mobile) or smooth expand (desktop).
+
+---
+
+## Responsive Behavior
+
+| Breakpoint | Key changes |
+|---|---|
+| Mobile 375px | Single column (1-2 cards wide). Horizontal scroll rows. Filter: bottom sheet. Search: full width. |
+| Tablet 768px | 2-3 column grid. Horizontal scroll or pagination. Collapsible filter sidebar. |
+| Desktop 1024px | 3-5 column grid. Persistent or toggle filter panel. |
+| Wide 1440px+ | 4-6 columns for media/product cards. Max-width content container. |
+
+- Mobile: horizontal scroll card rows (Netflix-style) are expected and usable.
+- Mobile: filter is a full-screen bottom sheet with apply/clear buttons.
+- Mobile: card images must be large enough to see detail (min 140px width).
+
+---
+
+## Accessibility Requirements
+
+- Card: each card is a single interactive unit. Use `<article>` or `<li>`. Primary action (title link) is the main focus target.
+- Favorite button: `aria-label="Save [Item Name]"` or `aria-pressed="true/false"`.
+- Play button: `aria-label="Play [Title]"`.
+- Rating stars: `aria-label="4.2 out of 5 stars"`.
+- Carousel/row: `role="region"` with `aria-label="[Category Name]"`. Left/right scroll buttons keyboard accessible.
+- Infinite scroll: announce new results with `aria-live="polite"` — "12 more results loaded."
+- Filter: `<fieldset>` + `<legend>` per group. Active filters: each chip has a remove button with `aria-label="Remove [filter name] filter"`.
+- Image thumbnails: `alt` describes the content (movie title, product name, property name).
+- Dark streaming UI: ensure text-on-image thumbnails meet contrast. Provide text overlays only with scrim.
+- Touch targets: card images, titles, and favorite buttons all ≥ 44×44px on mobile.
+
+---
+
+## UX Principles for This Method
+
+1. **Discovery over search.** Browsing should feel rewarding — "I didn't know I wanted that."
+2. **Cards are atoms.** Every card must be independently scannable: image, title, key metadata in one glance.
+3. **Personalization is the feature.** Surface what the user is likely to want next — recommendation rows are high-value real estate.
+4. **Save and resume.** Favorites, watch later, saved searches — users leave and return. Meet them where they left off.
+5. **Never lose the user in the grid.** Section headings, pagination, and "see all" links provide orientation.
+6. **Fast first render.** Skeletons, lazy images, and fast first card row matter — the grid must feel instant.
+
+---
+
+## Component Specs
+
+### Standard Card
+```
+Width: flexible (grid cell) — typically 200-320px
+Image: aspect-ratio 16:9 (video/media), 1:1 (music/product), 4:3 (travel/place)
+Image object-fit: cover
+Title: 14-16px, font-weight 500-600, 2-line clamp
+Metadata row: 12-13px, text-secondary
+Price (if applicable): 14-16px, bold
+Favorite button: absolute top-right, 36×36px, heart icon, background: white circle with shadow
+Border-radius: 8-12px (travel/marketplace) | 4px (media) | 0 (ultra editorial)
+Shadow: default none, hover: 0 4px 16px rgba(0,0,0,0.1)
+```
+
+### Category Section Row
+```
+Heading: 18-22px, font-weight 600, margin-bottom 12px
+"See all" link: right-aligned, 14px, brand color
+Horizontal scroll: overflow-x: scroll, scroll-snap-type: x mandatory
+Scroll snapping: scroll-snap-align: start per card
+Scrollbar: hidden (visually), accessible via keyboard
+```
+
+### Filter Bottom Sheet (Mobile)
+```
+Position: fixed bottom 0, full width
+Height: auto, max-height 85vh, overflow-y: scroll
+Background: white
+Border-radius: 16px 16px 0 0
+Handle bar: 4px × 32px, centered top, gray
+Animation: slide up 250ms ease
+Footer: "Apply Filters" (primary) + "Clear All" (ghost), sticky
+```
+
+### Skeleton Card
+```
+Background: var(--surface)
+Image area: same aspect ratio as real card, background: linear-gradient shimmer
+Title lines: 2 lines, height 14px, border-radius 4px, same shimmer
+Animation: @keyframes shimmer, background-position shift 1.5s linear infinite
+```
+
+---
+
+## Anti-Patterns to Avoid
+
+- Do not show more than 6 items per horizontal scroll row before a "See all" link.
+- Do not hide card metadata (price, rating, duration) until hover — mobile users cannot hover.
+- Do not use infinite scroll without an easy way to get back to a specific position.
+- Do not auto-play media in card hover on mobile.
+- Do not use pagination alone without telling users how many total results exist.
+- Do not load the full product catalog without filtering options.
+- Do not use pop-up interstitials over the card grid.
+- Do not make the save/favorite button so small it's untappable on mobile.
+
+---
+
+## QA Checklist
+
+- [ ] Card grid renders correctly at 375px, 768px, 1024px, 1440px.
+- [ ] Skeleton cards shown while data loads.
+- [ ] Infinite scroll loads next batch before hitting bottom.
+- [ ] Filter updates results without full page reload.
+- [ ] Active filter chips visible above results with individual remove buttons.
+- [ ] Favorite button has `aria-label` with item name.
+- [ ] Rating stars have accessible text alternative.
+- [ ] Horizontal scroll rows keyboard navigable (arrow keys or tab).
+- [ ] `aria-live` announces new results loaded.
+- [ ] Mobile filter bottom sheet accessible and closeable via swipe or close button.
+- [ ] All card images have meaningful `alt` text.
+- [ ] Dark streaming UI: text-on-image contrast passes 4.5:1.
+- [ ] No media autoplays on mobile.

package/references/brand-method-conversion-simplicity.md

@@ -0,0 +1,276 @@
+# Brand Method: Conversion Simplicity
+
+Use this skill when building for subscription products, fintech signups, mobile app downloads, SaaS trials, waitlists, or any context where the entire page exists to convert one type of visitor to one action.
+
+Reference brands: Netflix, PayPal, Uber, Google (signup), Instagram (signup), LinkedIn (signup), Dropbox, Stripe, Linear.
+
+---
+
+## When to Apply This Method
+
+Apply Conversion Simplicity when:
+- There is one primary user action: sign up, start trial, download, subscribe, join waitlist.
+- The user is a new visitor evaluating whether to commit.
+- Reducing friction is more valuable than providing exhaustive information.
+- The funnel is: land → understand → trust → act.
+
+Do not apply when:
+- Users need to browse or discover first (use Card-Based Discovery).
+- Multiple stakeholders are evaluating a complex product (use Enterprise Trust Hub).
+- The product experience is the selling point (use Product Cinema or Editorial Brand World).
+
+---
+
+## Layout Structure
+
+### Above the Fold (the only thing that matters)
+- **One promise**: the most compelling, specific outcome the user gets. Not a feature list.
+- **One primary CTA**: email signup, "Start Free Trial", "Get the App", "Join Waitlist". Nothing else.
+- **Visual proof**: product screenshot, phone mockup, short testimonial, or simple illustration.
+- **Objection handler**: one line of trust copy beneath the CTA ("No credit card required", "Free forever plan", "Cancel anytime").
+
+### Page Flow (in order)
+1. **Hero** — promise + CTA + objection handler.
+2. **Social proof** — trusted by N users/companies, logo strip, star rating aggregate.
+3. **Core benefit blocks** — 3 benefits max. Each: icon, one-line headline, one supporting sentence.
+4. **Product proof** — screenshot, animation, or short demo video showing the product working.
+5. **Testimonials** — 3 specific quotes with name, title, company, photo.
+6. **FAQ** — 5-7 questions answering the top objections (pricing, commitment, compatibility).
+7. **Final CTA** — repeat the hero CTA with the same promise, no new information.
+
+### Navigation
+- Minimal: logo left, 2-3 links max (Features, Pricing, Login), primary CTA right.
+- Do not provide a full mega-nav — it gives users escape routes.
+- No sticky nav unless it includes the CTA.
+
+### Footer
+- Minimal. Legal links, privacy, terms, social icons. No sitemap.
+
+---
+
+## Color Scheme
+
+### Primary Palette Patterns
+
+**SaaS / Startup (Stripe, Linear, Vercel)**
+- Background: `#FFFFFF` or dark `#0A0A0A` / `#111111`
+- Primary: brand color (`#635BFF` Stripe purple, `#5E6AD2` Linear, `#000000` Vercel)
+- Surface: `#F4F4F5` (light) or `#1C1C1E` (dark)
+- Text: `#0F0F0F` (light) or `#FAFAFA` (dark)
+- Secondary text: `#71717A`
+- CTA: brand primary, white text — maximum contrast
+- CTA hover: darken 10%
+- Accent: gradient (`#635BFF → #0074D9`) for premium SaaS feel
+
+**Fintech / Payments (PayPal, Stripe)**
+- Background: `#FFFFFF`
+- Primary: `#0070BA` (PayPal blue) or `#635BFF`
+- Trust accent: `#00457C` (darker blue, for security copy)
+- CTA: primary blue, white text
+- Success: `#007B5E`
+
+**Consumer App (Netflix, Uber, Instagram)**
+- Netflix: Background `#000000`, accent `#E50914` (red), text white
+- Uber: Background `#000000` or `#FFFFFF`, monochrome, CTA black-on-white or white-on-black
+- Instagram: gradient CTA on white background, or gradient hero
+
+**Minimal / Developer (Vercel, GitHub, Linear)**
+- Background: `#000000` or `#FAFAFA`
+- Text: inverse of background
+- Accent: 1 brand color or white
+- No gradients unless minimal and purposeful
+
+### Rules
+- CTA button must be the highest-contrast interactive element on the page.
+- Social proof logos: grayscale — they support, not compete.
+- Testimonial sections: slightly different background (`#F9FAFB`) to create visual rhythm.
+- Never use two competing CTAs in the hero (no "Sign Up" + "Learn More" — pick one).
+
+---
+
+## Typography
+
+### Scale
+| Role | Size | Weight | Notes |
+|---|---|---|---|
+| Hero headline | 40-72px | 700-900 | Bold, specific promise |
+| Hero subheadline | 18-22px | 400 | Supporting detail, max 2 lines |
+| Section headline | 28-36px | 600-700 | |
+| Benefit headline | 18-20px | 600 | |
+| Benefit body | 15-16px | 400 | 1 sentence |
+| Testimonial quote | 18-22px | 400-500 | Italic optional |
+| Testimonial attribution | 14px | 500 | Name, title, company |
+| FAQ question | 16-18px | 600 | |
+| FAQ answer | 15-16px | 400 | |
+| CTA | 15-18px | 600 | |
+| Trust copy (under CTA) | 12-14px | 400 | Muted color |
+
+### Font Pairings
+| Context | Font |
+|---|---|
+| SaaS / startup | Inter, Plus Jakarta Sans, or Geist |
+| Fintech | Helvetica Neue, DM Sans, or Lato |
+| Consumer app | Circular, Nunito, or Poppins |
+| Developer tool | Geist, JetBrains Mono (for code), Inter |
+
+### Rules
+- Hero headline: the most important thing on the page. It must be large and specific.
+- Avoid vague headlines ("The future of work") — use outcomes ("Ship 3× faster with automated deploys").
+- Trust copy under CTA: 12-14px, muted color — supportive, not competing.
+
+---
+
+## Spacing System
+
+| Token | Value | Use |
+|---|---|---|
+| `--space-xs` | 4px | Trust copy gap from CTA |
+| `--space-sm` | 8px | Icon to text, badge padding |
+| `--space-md` | 16-20px | Component padding |
+| `--space-lg` | 32-40px | Between sections within same topic |
+| `--space-xl` | 64-80px | Between major page sections |
+| `--space-2xl` | 96-128px | Hero padding, final CTA section |
+
+- Hero: generous padding top and bottom (80-128px) — breathing room signals confidence.
+- Benefit blocks: equal spacing, grid alignment — visual consistency conveys professionalism.
+- FAQ: no extra spacing — tight, scannable, no wasted room.
+
+---
+
+## Motion and Interaction
+
+### Hero CTA
+- Button: no over-engineered animation. Hover: darken 8-10%, scale `1.02`, transition 150ms.
+- On submit: show loading spinner inside button, disable button, replace text with "…".
+- On success: replace CTA area with success message ("Check your email!" or redirect).
+- On error: show inline error below CTA, shake animation on button (3-frame, 200ms).
+
+### Product Preview
+- Short looping video (10-15s, muted, no controls) OR animated GIF OR screenshot with subtle entrance animation.
+- `prefers-reduced-motion`: replace with static screenshot.
+- Load above fold immediately — this is conversion-critical content.
+
+### FAQ Accordion
+- Height transition: `max-height` 0 → auto equivalent, 200ms ease.
+- Icon rotates 90° or 45° when open.
+- Only one open at a time (optional — single-expand pattern).
+
+### Scroll Animations
+- Keep minimal: fade-in of benefit blocks, testimonials. Duration 300-500ms.
+- Never use scroll animations on the CTA — users may be scrolling to reach it.
+
+---
+
+## Responsive Behavior
+
+| Breakpoint | Key changes |
+|---|---|
+| Mobile 375px | Hero: headline 28-36px. CTA: full-width button. Benefit blocks: single column. Testimonials: horizontal scroll or single-column. Nav: logo + CTA only (no extra links). |
+| Tablet 768px | Hero: headline 36-48px. 2-column benefits. |
+| Desktop 1024px | Full layout. Side-by-side hero text + product image/video. |
+| Wide 1440px+ | Max-width 1100-1200px centered. Hero may use split layout at 1440px+. |
+
+- Mobile CTA: full-width button, at least 48px height, pinned to viewport if possible.
+- Mobile: no horizontal scroll except testimonials carousel.
+
+---
+
+## Accessibility Requirements
+
+- CTA button: descriptive label — not just "Sign Up" but "Start your free trial" or match the specific offer.
+- Email input: always a `<label>`. `type="email"`, `autocomplete="email"`, `inputmode="email"`.
+- Trust copy under CTA: `role="note"` or just visible text — no hidden aria required.
+- Product video: `<video>` with `aria-label`, `loop`, `muted`, no `autoplay` without `playsinline`; poster image required; `prefers-reduced-motion` disables autoplay.
+- Testimonial images: `alt="[Person Name], [Title] at [Company]"`.
+- FAQ accordion: `<button aria-expanded="true/false" aria-controls="faq-answer-id">`. Answer `<div id="faq-answer-id">`.
+- Social proof logos: `alt="[Company Name]"`.
+- All text: 4.5:1 contrast minimum. CTA text on brand button must pass.
+- Focus: CTA is the first logical focus target after the hero heading.
+
+---
+
+## UX Principles for This Method
+
+1. **One job, one CTA.** Every element on the page exists to support the single conversion event.
+2. **Answer objections before they form.** "No credit card" under the CTA is worth more than a features section.
+3. **Specificity converts.** "Save 5 hours/week on reporting" beats "Save time." Name the number, name the outcome.
+4. **Social proof is not decoration.** Real names, real companies, specific outcomes in quotes.
+5. **Remove escape routes.** Minimal nav means fewer ways to leave the page without converting.
+6. **Repeat the CTA.** Users need to see it multiple times before committing — top, middle, and bottom of page.
+7. **Speed is a conversion feature.** A 1-second delay reduces conversions. Image optimization, no-blocking scripts, instant form feedback.
+
+---
+
+## Component Specs
+
+### Hero CTA Button
+```
+Background: brand primary (max contrast)
+Text: white or high-contrast inverse
+Padding: 14-16px 32-40px
+Border-radius: 6px (modern) | 24px (friendly) | 2px (serious/fintech)
+Font: 16-18px, weight 600
+Min-height: 48-52px
+Width: auto (desktop) | 100% (mobile)
+Transition: background 150ms, transform 120ms
+```
+
+### Trust Copy (under CTA)
+```
+Font: 12-13px
+Color: var(--text-muted)
+Margin-top: 10-12px
+Icon: optional checkmark or lock icon (14px)
+Example: "✓ No credit card required  ·  ✓ Cancel anytime"
+```
+
+### Testimonial Card
+```
+Background: white (on light) or var(--surface) (on dark)
+Border: 1px solid var(--border)
+Border-radius: 12px
+Padding: 24-28px
+Quote: 17-20px, weight 400, font-style italic optional
+Attribution: 14px, weight 500, flex row with avatar
+Avatar: 36-40px, border-radius 50%
+```
+
+### FAQ Item
+```
+Border-bottom: 1px solid var(--border)
+Trigger button: full width, text-left, 17-18px, weight 600, padding 16px 0
+Chevron icon: right-aligned, 16px, rotates 180° on open, transition 200ms
+Answer: 15-16px, text-secondary, padding 0 0 16px, line-height 1.6
+```
+
+---
+
+## Anti-Patterns to Avoid
+
+- Do not add a full navigation with 8+ links — it gives users too many ways to leave.
+- Do not use vague CTAs like "Learn More" as the primary action — users need to know what happens next.
+- Do not put pricing objections in a way that makes pricing seem scary — be honest and frame value first.
+- Do not require more than an email (and optionally a name) for the first signup step.
+- Do not use dark patterns: pre-checked marketing consent, hidden trial-to-paid, confusing cancellation.
+- Do not show 10 testimonials — 3 specific, credible testimonials outperform 10 generic ones.
+- Do not use countdown timers unless the offer genuinely expires.
+- Do not make the page long before you've earned the scroll — the best Conversion Simplicity pages are short.
+
+---
+
+## QA Checklist
+
+- [ ] Hero headline is specific and outcome-focused — not generic.
+- [ ] CTA is the visually dominant interactive element.
+- [ ] Trust copy (no credit card / cancel anytime) visible below CTA.
+- [ ] Email input has `<label>` and correct input type.
+- [ ] CTA button has descriptive accessible label.
+- [ ] Form error message shown inline, associated with input via `aria-describedby`.
+- [ ] Product video: muted, poster, `prefers-reduced-motion` fallback.
+- [ ] Social proof logos grayscale.
+- [ ] FAQ accordion has `aria-expanded` and `aria-controls`.
+- [ ] Final CTA section repeats the hero CTA.
+- [ ] Mobile: CTA full-width, at least 48px height.
+- [ ] No more than 3 links in nav.
+- [ ] Page LCP ≤ 2.5s — hero content must be server-rendered or critically preloaded.
+- [ ] No dark patterns: no pre-checked marketing consent, no hidden costs, no fake urgency.