[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-605-Cohere-Enterprise-Serif":3},"**SYSTEM PROMPT — SENIOR FRONTEND ENGINEER & EXPERT UI DESIGNER**\n**Task: Build the complete \"Cohere Enterprise Serif\" landing page in a single attempt.**\n\nAct as a Senior Frontend Engineer and Expert UI Designer. Produce the final, complete code for a production-quality enterprise AI landing page themed **\"Cohere Enterprise Serif\"** (2024–2026 Enterprise AI aesthetic: bright canvas, cool gray borders, signature 22px radius, serif display headlines, ghost buttons, deep purple full-width showcase bands, monospace uppercase labels, nearly colorless palette). Build all sections: **Sticky Header, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.** Deliver everything working on the first attempt — no TODOs, no partial builds.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* **No Inline CSS:** The `style=\"...\"` attribute is forbidden anywhere in the HTML.\n* **Class\u002FID Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors in `style.css`.\n* **Minimal HTML Modifications:** HTML must remain clean, semantic, and style-agnostic — changing the site's look must require editing only `style.css`, never the markup.\n\n**1.2 CSS Variables (`var(--...)`) & Theme Tokens**\nStore every visual token in `:root` (and theme overrides) — never hardcode values in component rules:\n\n```css\n:root {\n  \u002F* Color *\u002F\n  --primary: #000000;            \u002F* Black *\u002F\n  --secondary: #212121;           \u002F* Near Black *\u002F\n  --accent: #1863dc;              \u002F* Interaction Blue *\u002F\n  --accent-tint: rgba(24, 99, 220, 0.08);\n  --bg-primary: #fefefe;          \u002F* Page canvas *\u002F\n  --bg-secondary: #f2f2f2;        \u002F* Light Gray *\u002F\n  --bg-elevated: #ffffff;         \u002F* Card surfaces only *\u002F\n  --text-primary: #000000;\n  --text-secondary: #93939f;      \u002F* Slate *\u002F\n  --text-success: #0f7b3d;\n  --text-error: #c62828;\n  --border-default: #d9d9dd;      \u002F* Cool Gray — signature card border *\u002F\n  --border-subtle: #e5e7eb;\n  --border-hairline: #f2f2f2;\n  --border-success: #0f7b3d;\n  --border-error: #c62828;\n  --band-purple: #2b1b4e;         \u002F* Deep purple showcase band *\u002F\n  --band-purple-deep: #1e1135;\n  --text-on-band: #f2f2f2;\n  --border-on-band: rgba(242, 242, 242, 0.18);\n  \u002F* Radius *\u002F\n  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 9999px;\n  \u002F* Shadow *\u002F\n  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.08);\n  \u002F* Spacing & motion *\u002F\n  --spacing-gap: 1.5rem;\n  --transition-fast: 150ms; --transition-normal: 300ms;\n  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n  \u002F* Elevation *\u002F\n  --z-dropdown: 100; --z-modal: 1000; --z-toast: 1100;\n  \u002F* Type *\u002F\n  --font-display: \"Source Serif 4\", Georgia, serif;\n  --font-base: \"Inter\", system-ui, sans-serif;\n  --font-mono: \"JetBrains Mono\", ui-monospace, monospace;\n  --tracking-display: -0.02em;   \u002F* −1.44px at 72px *\u002F\n  --tracking-label: 0.28px;\n}\n```\n\n* **Contrast Pairing:** Every light background token must pair with a dark text token and every dark background token with a light text token — enforce this in light mode, dark mode, and on the purple bands (`--band-purple` always pairs with `--text-on-band`).\n* **Exception (white canvas):** The source spec's `#ffffff` page canvas is replaced with `#fefefe` per policy; reserve pure `#ffffff` for elevated card surfaces (`--bg-elevated`) only.\n\n**1.3 Mandatory Dark Mode Support**\n* **Implementation:** Define dark tokens both under `@media (prefers-color-scheme: dark)` (applied to `:root:not(.light)`) and a `.dark` class on `\u003Chtml>` — the class must win over the media query. Dark tokens: `--bg-primary: #121212`, `--bg-secondary: #212121`, `--bg-elevated: #1a1a1f`, `--text-primary: #f2f2f2`, `--text-secondary: #93939f`, `--primary: #f2f2f2` (inverted ink for solid buttons), `--accent: #7aa5f5` (lightened Interaction Blue for AA contrast on dark), `--accent-tint: rgba(122, 165, 245, 0.12)`, `--border-default: #3a3a44`, `--border-subtle: #2c2c33`, lightened success\u002Ferror tokens, deeper shadows. Purple band tokens stay unchanged.\n* **Theme Switching:** Background and text variables must flip seamlessly with no HTML restructuring.\n* **Persistence:** Store the user's choice in `localStorage`; fall back to `prefers-color-scheme` on first visit; provide a visible toggle button (Material icon `light_mode`\u002F`dark_mode`) with correct `aria-pressed` and `aria-label` in the header.\n* **Exception (spec conflict):** The source style spec marks dark mode as \"Not Recommended\" for this theme — dark mode remains mandatory, but implement it as a restrained monochrome adaptation of the light design (light mode is the canonical presentation).\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* Build all layout structures with Flexbox. Every flex container must default to `align-items: center` unless a documented exception is justified (e.g., text blocks inside cards may use `flex-start`).\n* Mobile-first: card rows wrap (`flex-wrap: wrap` with sensible `flex-basis`), rows convert to columns under ~768px, and horizontal scrolling is impossible at any viewport width. Use a max-width ~1200px container with fluid `clamp()` padding.\n\n**1.5 Framework Default — Clean Custom CSS via `@layer`**\nUse hand-authored custom CSS (no frameworks): organize `style.css` with `@layer tokens, base, layout, components, utilities`. All reusable patterns must be generic classes (`.btn`, `.card`, `.input-group`, `.section-label`) driven by the CSS variables — no one-off utility soup.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* **Text:** Load via Google Fonts `\u003Clink>`: **\"Source Serif 4\"** (display, weights 400\u002F600), **\"Inter\"** (body, 400\u002F500\u002F600), **\"JetBrains Mono\"** (labels, 400\u002F500). Bind to `--font-display`, `--font-base`, `--font-mono`.\n* **Exception (spec conflict):** The source spec requests Georgia\u002Fsystem-ui; per the Google Fonts mandate, substitute the hosted metrically compatible fonts above.\n* **Icons:** Use Google Material Symbols (Outlined) via the official `\u003Clink>`; raw inline SVGs and local icon files are forbidden.\n\n---\n\n## 2. THEME SPECIFICATION — \"COHERE ENTERPRISE SERIF\"\n\n**2.1 Signature Visual Language**\n* **22px radius everywhere primary:** all cards, containers, hero mock, pricing tiers, testimonial cards, step cards, and accordion items use `border-radius: var(--radius-lg)` (22px); buttons and pills use `var(--radius-pill)`.\n* **Bright canvas + cool gray borders:** `--bg-primary` canvas, cards on `--bg-elevated` with `1px solid var(--border-default)`.\n* **Serif display headlines:** `--font-display`, weight 600, hero at `clamp(40px, 7vw, 72px)` with `letter-spacing: var(--tracking-display)` (−1.44px at 72px), `line-height: 1.05`; section headings `clamp(30px, 4.5vw, 48px)` with the same negative tracking.\n* **Ghost buttons:** transparent background, 1px border, that shift to Interaction Blue on hover (see 3.1).\n* **Purple bands:** full-width deep purple sections (`linear-gradient(160deg, var(--band-purple), var(--band-purple-deep))`) for product showcases — apply to **How It Works** and **Final CTA**.\n* **Monospace uppercase labels:** `--font-mono`, 12–13px, uppercase, `letter-spacing: var(--tracking-label)` (positive, 0.28px at default size), color `--text-secondary` (light sections) or `--text-on-band` at 80% opacity (purple bands). Use as section eyebrows (\"FEATURES\", \"PRICING\"), step numbers (\"01 \u002F 02 \u002F 03\"), and card kickers.\n* **Nearly colorless palette:** black, white, cool grays only — Interaction Blue is the sole accent, reserved for hover\u002Ffocus\u002FCTA feedback.\n\n**2.2 Body & Card Typography**\nBody: Inter 16–18px, `line-height: 1.6`, `--text-secondary` for supporting copy. Card titles: Source Serif 4 at 20–22px, slight negative tracking.\n\n---\n\n## 3. COMPONENT DESIGN SPECIFICATIONS\n\n**3.1 Buttons**\n* **Base `.btn`:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target, pill radius, Inter 500, `transition: var(--transition-fast) var(--ease-standard)`.\n* **`.btn--ghost` (signature):** transparent bg, `1px solid var(--text-primary)` border, `--text-primary` text; **hover:** border + text shift to `var(--accent)` with `var(--accent-tint)` background wash and `cursor: pointer`.\n* **`.btn--solid`:** bg `var(--primary)` with `--bg-primary` text; hover fills `var(--accent)` with white text.\n* **`.btn--on-band`:** ghost variant for purple bands — `1px solid var(--border-on-band)`, `--text-on-band` text; hover brightens to white border\u002Ftext with `rgba(255,255,255,0.08)` fill.\n* **Focus:** distinct keyboard ring via `outline: 2px solid var(--accent); outline-offset: 2px` on `:focus-visible`.\n* **Active\u002FPressed:** `transform: scale(0.97)`.\n* **Loading (`.is-loading`):** `aria-busy=\"true\"`, pointer-events disabled to prevent double-clicks, animated Material `progress` icon; button dimensions must not change.\n* **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n* **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary post-submit feedback styles driven by `--text-success` \u002F `--text-error`, announced in an `aria-live` region.\n\n**3.2 Cards**\n* **Default `.card`:** flexbox layout, `--bg-elevated` surface, `1px solid var(--border-default)`, `var(--radius-lg)`, generous padding, subtle `--shadow-sm`.\n* **Hover:** `transform: translateY(-2px)` + shadow shift to `--shadow-md`.\n* **Focus-within:** border highlights to `var(--accent)` when a child link\u002Fbutton receives focus.\n* **Loading (skeleton):** `.card--skeleton` shimmer animation (gradient sweep) defined in CSS to prevent layout jumps.\n* **Empty State:** `.card--empty` fallback layout with a Material icon and clear guidance text.\n\n**3.3 Forms & Inputs**\n* **Structure `.input-group`:** flex column wrapping `\u003Clabel>`, the input, and a dedicated error feedback container with `aria-live=\"polite\"`.\n* **States:** Empty, Focused (accent outline ring), Filled, Valid (success border + Material `check` icon), Invalid (error border, red text, Material `error` icon, message in the feedback container), Disabled, Read-only — all styled via classes, never inline.\n* Apply to the Final CTA email capture and any footer newsletter field.\n\n**3.4 FAQ Accordion (and Modal, if used)**\n* **Accordion:** each item is a `\u003Cbutton>` with `aria-expanded` + `aria-controls`, controlling a panel with `role=\"region\"`; Material `expand_more` icon rotates 180° on open; panels animate via the CSS `grid-template-rows: 0fr → 1fr` technique with `transition: var(--transition-normal) var(--ease-standard)`; fully keyboard operable.\n* **Modal (only if you add a dialog, e.g., \"Watch demo\"):** centered flex overlay (`align-items: center`), backdrop, Material `close` icon button, focus trapping, `Esc` and overlay-click closing, opening\u002Fclosing animated via CSS transitions, loading and success\u002Ferror states defined.\n\n---\n\n## 4. SECTION-BY-SECTION REQUIREMENTS\n\n**4.1 Sticky Header:** wordmark (fictional enterprise AI brand — do not use \"Cohere\"), anchor nav links with hover underline feedback, theme toggle (per 1.3), ghost \"Sign in\" + solid \"Get started\" buttons; `rgba(254,254,254,0.85)` backdrop-blur with hairline bottom border (dark-mode aware); mobile hamburger (Material `menu`\u002F`close`) toggling a dropdown panel with `aria-expanded`, closing on link click and `Esc`.\n\n**4.2 Hero:** monospace uppercase eyebrow (\"ENTERPRISE AI PLATFORM\"), 72px serif display headline, supporting subcopy, one solid + one ghost CTA, and a CSS-built product mock card (chat\u002FRAG interface or API snippet in `--font-mono`) with 22px radius, cool gray border, and `--shadow-md` — no external images.\n\n**4.3 Features — 3 cards:** each with a Material icon in a bordered circle, monospace uppercase kicker (\"01 SECURITY\", \"02 GROUNDING\", \"03 SCALE\"), serif card title, body copy; topics: private\u002FVPC deployment, grounded RAG answers, enterprise-scale throughput and governance.\n\n**4.4 How It Works — deep purple full-width band:** section eyebrow and heading in `--text-on-band`; 3 step cards (`rgba(255,255,255,0.06)` bg, `--border-on-band` border, 22px radius) with monospace \"01\u002F02\u002F03\" labels — Connect your data, Customize the model, Deploy & govern.\n\n**4.5 Testimonials — 3 cards:** Material `format_quote` icon, quote in serif italic, avatar circle (Material `person` icon or initials), name + role + fictional company in monospace small caps.\n\n**4.6 Pricing — 3 tiers:** Developer ($0) \u002F Scale (highlighted) \u002F Enterprise (Custom); middle tier inverted (bg `var(--primary)`, `--text-on-band` copy, \"MOST POPULAR\" mono pill, accent CTA); feature lists with Material `check` icons; monthly\u002Fannual segmented toggle — two buttons with `aria-pressed`, prices updating with an `aria-live=\"polite\"` announcement and visible active-pill styling.\n\n**4.7 FAQ — 6 questions:** accordion per 3.4, covering security, deployment options, pricing, compliance, support, and data privacy.\n\n**4.8 Final CTA — deep purple full-width band:** serif headline, short subcopy, email capture (`.input-group` + button) with full validation → loading → success\u002Ferror flow, plus an on-band ghost secondary button.\n\n**4.9 Footer with secondary links:** brand blurb, four link columns (Product, Company, Resources, Legal), text-based social links (no brand SVGs), hairline top border, monospace copyright line.\n\n---\n\n## 5. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid `clamp()` sizing, no horizontal overflow at any width.\n* **Smooth animations:** `transition: var(--transition-normal)` on all state changes; subtle scroll-reveal (opacity + 12px translate via IntersectionObserver) that is fully disabled under `prefers-reduced-motion` and degrades gracefully (content visible without JS).\n* **Accessibility:** semantic HTML5 landmarks and heading hierarchy; skip link; AA contrast in both themes; never rely on color alone — pair icons\u002Ftext with every state; correct ARIA on the toggle, mobile menu, accordion, and pricing control; logical focus order; full keyboard operability; `aria-live` regions for form feedback.\n* **Mandatory visual feedback:** every click, hover, and submission produces a visible state change.\n* **Destructive actions:** none expected; if any are added, they must be visually distinct in both themes.\n\n---\n\n## 6. DELIVERABLE & OUTPUT FORMAT\n\n* **Files:** separate `index.html`, `style.css`, and `script.js`. No inline `\u003Cscript>` blocks beyond a single deferred `script.js` reference; no inline CSS; no unrequested placeholder elements.\n* **Naming:** one consistent **BEM** convention (`block__element--modifier`) across all files — never mix conventions.\n* **Copy:** author realistic, specific enterprise-AI copy in **English** (headlines, features, testimonials, pricing, FAQ answers) — lorem ipsum is prohibited.\n* **Output:** deliver all three files complete in one response, fully working on the first attempt.\n",1791954989876]