ui-ux-master 1.2.1 → 1.5.0

package/references/brand-method-editorial-brand-world.md

@@ -0,0 +1,265 @@
+# Brand Method: Editorial Brand World
+
+Use this skill when building for fashion, luxury lifestyle, sportswear, beverage, entertainment campaigns, or any brand where the world, culture, and story are the primary product.
+
+Reference brands: Nike, Louis Vuitton, Gucci, Chanel, Hermès, Dior, Cartier, Coca-Cola, Pepsi, Red Bull, Heineken, Adidas, Puma.
+
+---
+
+## When to Apply This Method
+
+Apply Editorial Brand World when:
+- The brand has a strong cultural identity, campaign world, or emotional territory.
+- Photography, art direction, and campaign storytelling are the primary brand assets.
+- The user journey is: feel → belong → explore → buy.
+- The brand is fashion, sportswear, luxury, beverage, or entertainment.
+
+Do not apply when:
+- The primary task is search, track, or compare (use Utility Command Center).
+- The brand is enterprise or B2B (use Enterprise Trust Hub).
+- Conversion speed is the primary goal (use Conversion Simplicity).
+
+---
+
+## Layout Structure
+
+### Hero / Campaign Opening
+- Full-viewport, photography or video-driven.
+- Minimal UI chrome — logo, navigation, and one optional CTA are the only non-image elements.
+- Campaign headline: bold, large, sometimes a single word or short phrase. Never a product list.
+- CTA: secondary-style or none on the first hero — let the image breathe before selling.
+- Autoplay video: allowed if muted, with `prefers-reduced-motion` fallback to static poster.
+
+### Page Flow (in order)
+1. **Campaign hero** — brand world, emotion, culture.
+2. **Product/collection entry** — editorial grid or featured items emerging from campaign imagery.
+3. **Brand story / culture section** — athlete, artist, moment, season, or philosophy.
+4. **Secondary collections** — horizontal scroll or masonry grid.
+5. **Social / community proof** — UGC gallery, press mentions, cultural credentials.
+6. **Commerce entry** — subtle but clear: "Shop [Collection]" or "Explore [Season]".
+
+### Navigation
+- Minimal fixed or scroll-away nav.
+- Logo centered or left.
+- Navigation: text-only links, ultra-light weight, never crowded.
+- On scroll: nav may disappear, reappear on upward scroll.
+- Mobile: hamburger with full-screen overlay featuring campaign imagery as background.
+
+### Collection / Product Grid
+- Masonry or editorial grid (not rigid uniform cards).
+- Images dominate — minimal text per item.
+- Product name and price appear on hover (desktop) or permanently (mobile).
+- "Add to bag" or "Shop" appears on hover or as a persistent small link.
+
+---
+
+## Color Scheme
+
+### Palette Archetypes by Brand Type
+
+**Sportswear / Performance (Nike, Adidas, Puma)**
+- Background: `#FFFFFF` or `#000000`
+- Text: inverse of background
+- Accent: campaign color (varies per drop)
+- Rule: monochrome base, campaign accent changes seasonally. Product photography provides color.
+
+**Luxury Fashion (LV, Gucci, Chanel, Hermès)**
+- Background: `#FFFFFF`, `#FAF8F5` (warm white), or `#0A0A0A`
+- Primary text: `#1A1A1A` or `#F5F0E8`
+- Accent: heritage color (LV brown `#8B5E3C`/`#D4AF37`, Chanel black, Hermès orange `#E8611A`, Gucci green `#1F5C33`)
+- Never use bright primary colors in luxury editorial.
+
+**Luxury Jewelry / Watches (Cartier, Rolex)**
+- Background: deep red `#8B0000` (Cartier) or dark green `#1B3A2F` (Rolex) or cream
+- Gold accent: `#D4A017` or `#B8960C`
+- Text: cream `#F5F0E8` on dark, near-black on light
+- Use close-up product photography as hero, not lifestyle.
+
+**Beverage / Culture (Coca-Cola, Pepsi, Red Bull)**
+- Hero: brand signature color (Coca-Cola red `#E61830`, Pepsi blue `#004B93`/black, Red Bull blue/silver)
+- Background: white or black beneath campaign
+- Campaign images provide color contrast — backgrounds stay neutral or brand-primary.
+
+**Fashion Retail (Zara, H&M)**
+- Zara: black `#000000` / white `#FFFFFF` — extreme contrast, let product provide color.
+- H&M: white with seasonal campaign color accent.
+
+### Rules
+- Never introduce new brand colors mid-page — stay within 1-2 established tones.
+- Campaign accent color is temporary (seasonal) — built into component vars, not global tokens.
+- Photography must provide the emotional color — background palette supports, not competes.
+- Low-contrast luxury copy (e.g., gray-on-white) is culturally appropriate but requires WCAG-minimum compliance.
+
+---
+
+## Typography
+
+### Scale
+| Role | Size | Weight | Notes |
+|---|---|---|---|
+| Campaign headline | 64-120px | 700-900 | Ultra-bold or ultra-light depending on brand |
+| Sub-headline | 32-48px | 400-700 | |
+| Section headline | 22-32px | 400-600 | |
+| Body / story copy | 16-18px | 300-400 | Wide line-height 1.7-1.9 |
+| Product name | 13-16px | 400-500 | |
+| Price | 14-16px | 500-600 | Tabular |
+| Caption / credit | 11-12px | 300-400 | Tracked +0.1em |
+| Navigation | 12-14px | 400-500 | All-caps, tracked |
+| CTA | 12-14px | 500-600 | Underline or subtle button |
+
+### Font Pairings by Brand Type
+| Brand type | Heading | Body |
+|---|---|---|
+| Sportswear | Bebas Neue, Dharma Gothic, or brand condensed | Inter, Helvetica Neue |
+| Luxury fashion | Didot, Bodoni, Playfair Display | Garamond, Cormorant, Montserrat Light |
+| Luxury watches | Optima, Gill Sans, custom serif | Helvetica Neue Light |
+| Beverage / culture | Brand typeface or Impact-style for campaigns | System font for body |
+| Contemporary fashion | Helvetica Neue Condensed, Neue Haas | Helvetica Neue Light |
+
+### Rules
+- One display typeface maximum per brand.
+- Never mix a serif headline with a serif body — pair contrasting type personalities.
+- White text on dark campaign imagery requires `text-shadow` or scrim for legibility.
+
+---
+
+## Spacing System
+
+| Token | Value | Use |
+|---|---|---|
+| `--space-xs` | 4-6px | Caption gaps, inline elements |
+| `--space-sm` | 12px | Nav link spacing |
+| `--space-md` | 24px | Card padding, text blocks |
+| `--space-lg` | 48px | Between editorial sections |
+| `--space-xl` | 80-96px | Major story section separation |
+| `--space-2xl` | 120-160px | Hero breathing room |
+| `--space-3xl` | 200-240px | Full-screen campaign breathing room |
+
+- Editorial brands use whitespace aggressively — it signals luxury, curation, and confidence.
+- Product grids: 20-32px gap. Editorial masonry: irregular gaps for art-direction feel.
+- Mobile: reduce by 50% but never lose the sense of breathing room.
+
+---
+
+## Motion and Interaction
+
+### Scroll and Reveal
+- Images fade and scale in: `opacity 0→1`, `scale 1.03→1`, duration 600-800ms, ease-out.
+- Campaign text reveals: staggered word or line animation, 50ms stagger, 500ms per element.
+- Parallax: background image scrolls at 0.7× rate — creates depth without distraction.
+- Cursor: custom cursor (dot, circle, brand symbol) on desktop for premium fashion brands.
+
+### Hover
+- Product images: secondary image crossfade on hover (front view → detail/model view).
+- Collection items: overlay appears with product name + price + add-to-bag.
+- Navigation links: underline slide-in or letter-spacing shift.
+
+### Transitions
+- Page transitions: cross-fade or slide, 300-400ms ease-in-out.
+- Section transitions: wipe or fade, never instant cut unless brand is minimalist.
+
+### `prefers-reduced-motion`
+- Replace all scroll animations with instant opacity transitions.
+- Disable custom cursor.
+- Disable parallax.
+
+---
+
+## Responsive Behavior
+
+| Breakpoint | Key changes |
+|---|---|
+| Mobile 375px | Stack all editorial content. Full-width hero image. Typography scales down (campaign headline 36-48px). Nav: full-screen overlay. Product grid: 2 columns or single-column film strip. |
+| Tablet 768px | 2-column editorial grid. Nav collapses. |
+| Desktop 1024px | Full editorial layout, masonry grid, parallax active. |
+| Wide 1440px+ | Hero fills viewport. Max-width on text columns (800-1000px) to preserve readability. |
+
+- Mobile: disable hover-reveal product details — show product name and price by default.
+- Mobile: replace parallax with static images.
+- Mobile: CTA must be reachable without pinch or complex navigation.
+
+---
+
+## Accessibility Requirements
+
+- Low-contrast luxury typography (e.g., light gray on white) must still meet 4.5:1 minimum ratio. If brand demands lower contrast, apply only to decorative, non-essential copy — never to CTAs, product names, or prices.
+- Campaign images with text overlay: **always add a scrim** (minimum `rgba(0,0,0,0.35)` or equivalent) before placing text.
+- Custom cursor: must not be the only indicator of interactive state. Underlines, outlines, or color changes required in addition.
+- Autoplay video: muted, `prefers-reduced-motion` stops it, pause button always visible.
+- Hover-reveal product details: provide same content accessible via keyboard focus.
+- Masonry grid: ensure tab order follows reading order (top-left to bottom-right), not DOM insertion order if CSS reorders.
+- Image-heavy pages: always use `alt` text that describes the scene or product, not just "campaign image".
+- Navigation overlay: trap focus within overlay when open. `Escape` closes it.
+- Language of campaign copy: if multilingual, use `lang` attribute on copy blocks.
+
+---
+
+## UX Principles for This Method
+
+1. **The brand world is the product.** Sell the identity before the item.
+2. **Restraint is luxury.** The fewer elements on screen, the more premium the perception.
+3. **Photography is the primary design element.** Every layout decision serves the image.
+4. **Commerce is a destination, not the landing.** Guide users to shop through desire, not aggressive CTAs.
+5. **Seasonal freshness.** The page should feel like a new campaign with each collection — build for easy content refresh.
+6. **Speed of desire.** Even editorial pages must load quickly. A slow luxury page destroys the premium feeling.
+
+---
+
+## Component Specs
+
+### Editorial Hero
+```
+Height: 100vh minimum (can be taller for immersive)
+Image: object-fit: cover, object-position: center
+Scrim: linear-gradient for text readability
+Campaign headline: absolute positioned, z-index above image
+CTA: absolute or below hero, never covering face/product center
+```
+
+### Product Hover Overlay
+```
+Trigger: CSS :hover + :focus-within
+Overlay: rgba(0,0,0,0.4) over image
+Content: product name (14-16px white), price (14px white), CTA ("Add" or "Shop")
+Transition: opacity 200ms ease
+Keyboard: same content revealed on :focus-within
+```
+
+### Editorial Grid (Masonry-style)
+```
+CSS Grid: grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))
+For masonry: grid-template-rows: masonry (or JS solution)
+Gutter: 2-3% or 20-32px
+Item border-radius: 0 (editorial) | 4px (softer brand)
+No card borders — let whitespace and images define items
+```
+
+---
+
+## Anti-Patterns to Avoid
+
+- Do not use stock photography — editorial brands live and die by authentic imagery.
+- Do not add multiple CTAs to the campaign hero — one message, one direction.
+- Do not use countdown timers unless the brand explicitly uses urgency (e.g., drops/limited editions).
+- Do not use rigid uniform grids — they destroy editorial feel.
+- Do not clutter the page with social share buttons, chat widgets, or promo banners at load.
+- Do not use Comic Sans, Impact, or novelty typefaces unless the brand identity demands it.
+- Do not copy a brand's exact trademark color combination (e.g., LV monogram brown + gold pattern).
+- Do not remove all contrast in pursuit of minimalism — accessibility is non-negotiable.
+
+---
+
+## QA Checklist
+
+- [ ] Campaign hero image loads with correct poster/fallback.
+- [ ] Text on images passes 4.5:1 contrast (include scrim in measurement).
+- [ ] `prefers-reduced-motion` replaces animations with instant transitions.
+- [ ] Hover-reveal product details are also accessible via keyboard focus.
+- [ ] Navigation overlay traps focus, `Escape` closes it.
+- [ ] Masonry grid tab order is logical and readable.
+- [ ] All images have meaningful `alt` text.
+- [ ] Mobile: product name and price visible without hover.
+- [ ] No autoplay audio.
+- [ ] Page loads in under 3s on 4G (LCP ≤ 2.5s — use lazy loading for below-fold images).
+- [ ] Custom cursor does not break keyboard navigation.
+- [ ] No brand trademark colors, logos, or exact layouts copied from reference brands.

package/references/brand-method-enterprise-trust-hub.md

@@ -0,0 +1,298 @@
+# Brand Method: Enterprise Trust Hub
+
+Use this skill when building for B2B SaaS, enterprise software, infrastructure, finance, healthcare, industrial, or any context where the buyer is a professional making a high-stakes purchasing decision.
+
+Reference brands: Microsoft, Cisco, Oracle, SAP, IBM, Siemens, Salesforce, GE, Goldman Sachs, JPMorgan Chase, Philips, HSBC, Bank of America.
+
+---
+
+## When to Apply This Method
+
+Apply Enterprise Trust Hub when:
+- The buyer is a professional: IT decision-maker, CFO, compliance officer, procurement team.
+- The sales cycle is long (weeks to months), involving multiple stakeholders.
+- Proof of security, compliance, reliability, and ROI must be on the page.
+- The primary CTA is "Contact Sales", "Request Demo", or "Get Pricing".
+- The product is B2B software, infrastructure, finance, healthcare systems, or industrial.
+
+Do not apply when:
+- The buyer is a consumer (use Product Cinema, Playful Familiarity, or Conversion Simplicity).
+- Brand storytelling is the primary goal (use Editorial Brand World).
+- The product is simple and direct sign-up (use Conversion Simplicity).
+
+---
+
+## Layout Structure
+
+### Header
+- Logo left.
+- Mega-navigation: audience/role, product/solution, industry, resources, pricing (if available), login, primary CTA ("Get Demo" or "Contact Sales").
+- Mega-nav dropdowns: clean grids of links with icons, grouped by category.
+- Sticky on scroll.
+
+### Homepage Structure (in order)
+1. **Hero** — clear value proposition (what it does + for whom + key outcome). Primary CTA above fold.
+2. **Social proof bar** — 5-8 recognizable customer logos, muted/grayscale.
+3. **Product capability overview** — 3-4 card/icon blocks, one capability each.
+4. **Solution or audience routing** — "For IT Teams | For Finance | For Operations" segmentation.
+5. **Feature deep-dive** — alternating image/text blocks, one feature per section.
+6. **Proof section** — metric cards ("40% faster", "99.99% uptime"), case study card(s).
+7. **Security / compliance** — badges, certifications, brief copy (SOC2, ISO 27001, HIPAA, GDPR).
+8. **CTA section** — "Start Free Trial" or "Talk to Sales", with objection-handling copy.
+9. **Resource section** — whitepaper, webinar, or docs teaser.
+
+### Solution / Product Pages
+- Clear breadcrumb.
+- Hero: product name, value prop, screenshot/diagram, CTA.
+- Feature sections: alternating layout, screenshot or diagram + explanation.
+- Integration section: compatible tools/platforms logos.
+- Pricing teaser (or full pricing page link).
+- Case study or customer quote.
+- Related products/solutions.
+- Footer CTA.
+
+### Navigation
+- Mega-navigation with grouped links.
+- Role/industry segmentation in nav or above nav.
+- Search available in nav.
+- Mobile: hamburger → accordion mega-nav.
+
+---
+
+## Color Scheme
+
+### Primary Palette by Sub-category
+
+**Enterprise Tech / SaaS (Microsoft, Salesforce, IBM)**
+- Background: `#FFFFFF`
+- Primary: `#0078D4` (Microsoft blue), `#00A1E0` (Salesforce), `#1F70C1` (IBM)
+- Surface: `#F4F6F9`
+- Text: `#323130` or `#1A1A1A`
+- Secondary text: `#605E5C`
+- CTA: primary color as background, white text
+- Hover: darken 10%
+- Border: `#EDEBE9`
+- Success: `#107C10`
+- Warning: `#D83B01`
+- Error: `#A4262C`
+
+**Finance / Banking (Goldman Sachs, JPMorgan, HSBC)**
+- Background: `#FFFFFF`
+- Primary: Navy `#003366` or `#002D72`
+- Gold accent: `#C8A96E` or `#B8860B` (sparingly, for premium signals)
+- Surface: `#F7F8FA`
+- Text: `#1A1A2E`
+- CTA: navy background, white text
+- Secondary CTA: outlined navy
+
+**Healthcare / Pharma (Philips, 3M)**
+- Background: `#FFFFFF`
+- Primary: `#0072CE` (calm blue) or `#00A7B5` (teal)
+- Surface: `#F0F7FF`
+- Text: `#1A2B3C`
+- Accent for health: teal, green — calming, clinical trust
+
+**Industrial / Infrastructure (Siemens, GE)**
+- Background: `#FFFFFF`
+- Primary: `#009999` (Siemens teal) or `#0067B1` (GE blue)
+- Surface: `#F5F5F5`
+- Text: `#333333`
+- Accent: brand teal or blue, never decorative
+
+### Rules
+- Conservative palette: blue, white, and neutral grays carry enterprise trust.
+- Never use bright orange, yellow, or green as primary CTA in a finance or healthcare context.
+- Security section: dark background with trust icons is acceptable and expected.
+- Proof metrics: use brand color for the number, neutral for the description.
+
+---
+
+## Typography
+
+### Scale
+| Role | Size | Weight | Notes |
+|---|---|---|---|
+| H1 / hero headline | 36-52px | 600-700 | Clear value prop |
+| H2 / section title | 26-36px | 600-700 | |
+| H3 / feature title | 18-22px | 600 | |
+| Body | 15-17px | 400 | 1.6-1.7 line-height |
+| Proof metric | 40-60px | 700-800 | Tabular numerals |
+| Metric label | 14-16px | 400 | Below the number |
+| CTA | 14-16px | 600 | |
+| Navigation | 14px | 500 | |
+| Badge / certification | 11-12px | 600 | All-caps or bold |
+
+### Font Pairings
+| Context | Font |
+|---|---|
+| Enterprise SaaS | Segoe UI (Microsoft), Salesforce Sans, or Inter |
+| Finance | Georgia (editorial), Helvetica Neue, or IBM Plex Sans |
+| Healthcare | Source Sans Pro, Open Sans, Roboto |
+| Industrial | Roboto, Noto Sans, or system font |
+
+### Rules
+- Avoid decorative or display typefaces — clarity and authority over style.
+- Body text line-height must be ≥ 1.6 — enterprise docs are information-dense.
+- Metric numbers: use `font-variant-numeric: tabular-nums` and a display weight.
+
+---
+
+## Spacing System
+
+| Token | Value | Use |
+|---|---|---|
+| `--space-xs` | 4px | Icon gaps |
+| `--space-sm` | 8px | Inline elements |
+| `--space-md` | 16px | Card padding, form inputs |
+| `--space-lg` | 24-32px | Section inner padding |
+| `--space-xl` | 48-64px | Between major sections |
+| `--space-2xl` | 80-96px | Hero and CTA sections |
+
+- Enterprise pages are information-dense by design — tighter than consumer pages.
+- Never so dense that scanning is difficult: group related content, use dividers or cards.
+- Card padding: 24-32px. Cards should feel substantial, not cramped.
+
+---
+
+## Motion and Interaction
+
+### Principles
+- Animation is minimal and purposeful — this is a professional context, not entertainment.
+- Proof metric numbers can count up on scroll: `0 → 40%`, duration 800ms, ease-out.
+- Feature illustrations: subtle fade-in on scroll.
+- No parallax, no cinematic scrolling, no custom cursors.
+
+### Key Component States
+| Component | States |
+|---|---|
+| Primary CTA | Default, hover (darken 8%), active (darken 12%), focus (ring), loading, disabled |
+| Secondary CTA | Default (outlined), hover (fill lightly), focus |
+| Accordion / FAQ | Collapsed, expanded (smooth 200ms height transition), focus |
+| Mega-nav dropdown | Closed, opening (200ms fade + translate), open, closing |
+| Form input | Default, focused (border color), filled, error (red border + message), success |
+| Customer logo | Default (grayscale 50%), hover (full color 100%) |
+
+### Form UX
+- Label above input always (not inside as placeholder-only).
+- Inline validation: only after user leaves the field (blur), not on keystroke.
+- Submit: clear loading state, success message, error recovery.
+- Required fields: marked with `*` and explained ("* Required").
+
+---
+
+## Responsive Behavior
+
+| Breakpoint | Key changes |
+|---|---|
+| Mobile 375px | Single column. Mega-nav → hamburger + accordion. Proof metrics stack. CTA full-width. Feature sections stack vertically. |
+| Tablet 768px | 2-column feature sections. Mega-nav collapses. |
+| Desktop 1024px | Full mega-nav. 3-column capability grid. Alternating feature layout. |
+| Wide 1440px+ | Content max-width 1200-1440px centered. No full-bleed backgrounds except CTA/footer. |
+
+- Mobile: mega-nav must work as well as desktop — executives use phones.
+- Mobile: proof metrics still prominent — enterprise buyers research on mobile.
+
+---
+
+## Accessibility Requirements
+
+- Mega-nav: keyboard-navigable with arrow keys within mega-nav dropdowns. `Escape` closes. Focus returns to trigger.
+- Proof metrics: `aria-label="40 percent faster"` — not just "40%".
+- Customer logos: `alt="[Company Name] logo"` or `aria-label` if CSS background.
+- Form: every input has a `<label>`. Error messages are programmatically associated (`aria-describedby`). Required fields marked with `aria-required="true"`.
+- Accordion: `aria-expanded`, `aria-controls`, button as trigger.
+- Tables (pricing, comparison): use `<th scope="col/row">`, proper header association.
+- Color: never use color alone to communicate status — pair with icon or text.
+- PDF downloads: ensure PDFs are tagged and accessible (mention this in handoff).
+- Security / certification badge images: `alt` text names the certification.
+- All text: minimum 4.5:1 contrast.
+
+---
+
+## UX Principles for This Method
+
+1. **Route by role, not by product.** Enterprise buyers think "I'm a CTO" not "I want product SKU 7."
+2. **Proof before promise.** Show the customer logos, the metrics, the case study early. Enterprise buyers are skeptical.
+3. **Make complex simple.** Diagrams, progressive disclosure, comparison tables — never walls of feature bullets.
+4. **Respect the sales cycle.** Provide self-serve research paths (docs, pricing, case studies) AND demo/contact paths.
+5. **Security and compliance are features.** They belong on the product page, not buried in footer.
+6. **Trust is earned incrementally.** Layer proof throughout the page: logos → metric → case study → cert → CTA.
+7. **Forms are gates, not walls.** Ask for minimum information at each stage. Qualify progressively.
+
+---
+
+## Component Specs
+
+### Proof Metric Card
+```
+Background: white or very light surface
+Border: 1px solid var(--border) or none
+Padding: 32px 24px
+Metric number: 48-60px, brand primary, font-weight 700
+Label: 14-16px, text-secondary, margin-top 8px
+Optional icon: 24-32px, muted brand color, above number
+Border-radius: 8px
+```
+
+### Customer Logo Strip
+```
+Display: flex, gap 32-48px, align-items: center, flex-wrap: wrap
+Logo image: grayscale filter 80-100%, opacity 0.5-0.6
+Logo image hover: filter none, opacity 1.0, transition 200ms
+Max-height per logo: 32-40px
+Heading above: "Trusted by teams at" in muted text-secondary
+```
+
+### Mega-Navigation Dropdown
+```
+Position: absolute, full-width or column-aligned below nav
+Background: white
+Shadow: 0 8px 24px rgba(0,0,0,0.08)
+Padding: 24-32px
+Grid: 3-4 columns of grouped links
+Link groups: heading (11px, all-caps, text-muted), links (14px, weight 400)
+Icon per link: 16-20px, brand color
+Open/close: aria-expanded, transition 200ms opacity + translateY
+```
+
+### CTA Section
+```
+Background: brand primary or dark surface
+Padding: 64-80px
+H2: 28-36px, white/contrasting
+Sub-copy: 16-18px, secondary white
+CTA button: white background, brand-colored text, or outlined
+Secondary CTA: outlined, white border, white text
+Spacing between CTAs: 16px
+```
+
+---
+
+## Anti-Patterns to Avoid
+
+- Do not bury the CTA below the fold without any CTA in the hero.
+- Do not use vague value propositions ("We make business better") — be specific about what, for whom, and the outcome.
+- Do not require registration to read case studies or pricing pages.
+- Do not show a wall of features without diagrams, screenshots, or social proof.
+- Do not use stock photography of people shaking hands or smiling at laptops — use real product screenshots.
+- Do not hide pricing — at minimum, acknowledge it exists and offer a pricing page.
+- Do not use small fonts for compliance/security copy — it must be readable.
+- Do not mix consumer design patterns (countdown timers, emoji-heavy copy) in an enterprise context.
+- Do not use `color: red` for all error states — also provide icon and text.
+
+---
+
+## QA Checklist
+
+- [ ] Hero value proposition is clear in 5 seconds without reading body text.
+- [ ] Customer logos visible above fold or within first scroll.
+- [ ] At least one proof metric with source/context.
+- [ ] Mega-nav keyboard navigable (arrow keys, Escape closes).
+- [ ] All form inputs have visible labels.
+- [ ] Form error messages are programmatically associated with inputs.
+- [ ] Security / compliance section present with specific certifications.
+- [ ] Mobile: mega-nav works as hamburger accordion.
+- [ ] Mobile: CTAs accessible without horizontal scroll.
+- [ ] All text meets 4.5:1 contrast.
+- [ ] Pricing is findable within 2 clicks or clearly explained.
+- [ ] Page loads LCP ≤ 2.5s (enterprise buyers measure performance).