`) | Component | Root class | Structure | |-----------|-----------|-----------| | **Hero** | `.hero-mkt` | `.eyebrow` + `h1` + `.subhead` + `.hero-actions` (+ optional `.hero-visual`) | | **Section wrapper** | `.section` (`.alt` / `.tight`) | `.container` → `.section-head` (`.eyebrow`+`h2`+`p`) + body | | **Feature grid** | `.feature-grid` | `.feature` = `.f-ico` + `h3` + `p` | | **Product grid** | `.product-grid` | `.product-card` = `.p-ico` + `h3` + `p` + `.p-more` | | **Comparison table** | `.compare-wrap` → `table.compare` | mark the BELA column with `class="bela"` | | **Stats** | `.stats` | `.stat` = `.stat-n` + `.stat-l` (values must be sourced) | | **Pricing cards** | `.pricing-grid` | `.price-card` (`.featured` + `.p-flag` for highlight) | | **Steps** | `.steps.grid` | `.step` (auto-numbered) = `h3` + `p` | | **Workflow** | `.workflow` | two `.wf-col` (Your part / BELA's part) | | **Before / After** | `.beforeafter` | `.ba-col.before` + `.ba-col.after` | | **Industry chips** | `.chips` | `.chip` = `.chip-ic` + label | | **Screenshots** | `.mockup-grid` | `.mockup` = `.mk-bar` + `.mk-body` (placeholder frames) | | **Engineering Pipeline** | `.pipeline` → `.pl-groups` | 5× `.pl-group` (`.pl-num`,`h4`,`.pl-sub`, `.pl-stage`) — signature | | **Engineering Passport** | `.passport-wrap` | `.passport-copy` + `.passport-card` (`.pp-row`, `.pp-seal`) — signature | | **Testimonials** | `.testi-grid` | `.testi` = `.quote` + `.who` (real quotes only) | | **Video** | `.video-frame` | `.play` button (embed real media when available) | | **FAQ** | `.faq` | `.faq-item` = `.faq-q` button + `.faq-a`→`.faq-a-inner` (accordion) | | **CTA band** | `.cta-band` | `h2` + `p` + `.hero-actions` (gradient) | | **Related** | `.related-grid` | `.related-card` | | **Tabs** | `.tabs` | `.tablist [data-tab="id"]` + `.tab-panel#id` | | **Pull-quote** | `.pullquote` | large centered statement | | **Principles** | `.principles` | `.principle` = `.pr-ico` + `h4` + `p` | | **Use-cases** | `.usecases` | `.usecase` = `h4` + `p` | | **Contact form** | `.contact-grid` | `.contact-side` + `.contact-form` (mailto fallback) | ## Reveal animation Add `class="reveal"` to any element to fade/rise it in on scroll. Stagger is automatic. Safe with no JS (stays visible) and under reduced-motion. ## Icons Inline stroke SVGs (1.8–1.9 weight, `currentColor`). Keep the set consistent; place custom icons in `icons/`. --- ## Golden rules 1. **Never duplicate chrome** — edit `components.js` once. 2. **Compose with tokens** — no new colors or fonts. 3. **Both themes, always** — verify light *and* dark. 4. **Claims Ledger governs copy** — no unsourced numbers, no invented testimonials, tier future features (Available Today / In Progress / Planned / Future Vision). 5. **One primary CTA per screen.**