[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-674-Raw-Grid":3},"# CODING PROMPT — \"RAW GRID\" NEO-BRUTALIST LANDING PAGE\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete landing page on the first attempt. Every rule below is mandatory. Deliver production-quality, accessible, responsive code — no drafts, no apologies, no lorem ipsum.\n\n---\n\n## 0. THEME DEFINITION — \"RAW GRID\"\n\n- **Style:** Neo-Brutalist, Scrappy, Graphic, Direct (2020s Neo-Brutalism)\n- **Keywords:** thick borders, pink offset shadows, sage accents, dense grid, compact spacing, no-nonsense copy\n- **Global Aesthetic Laws (apply to every component):**\n  - Every surface and interactive element carries a hard `3px solid` border. No soft blurs, no gradients, no glassmorphism.\n  - Shadows are hard-edged solid offsets, never blurred: `box-shadow: 5px 5px 0 #F472B6` (primary pink) and `3px 3px 0` black ink (secondary\u002Fsmall elements).\n  - Sharp corners by default (`--radius-sm: 0`).\n  - Hover = bold color shift at 150ms. Active\u002Fpressed = element translates INTO its shadow (shadow collapses to `0 0 0`, element moves by the offset). High-contrast, tactile, graphic-confident.\n  - Dense rhythm: compact `1.2rem` gaps, tight typography, grid-line texture in the hero (CSS gradients only — never images).\n  - **No raster images anywhere.** All visuals are built from CSS: borders, tints, offset shadows, chips, and Google Material Symbols icons.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in `style.css`. **The `style=\"...\"` attribute is forbidden in the HTML.**\n- Target everything via class\u002FID selectors only.\n- HTML stays semantic and styling-agnostic (`header`, `main`, `section`, `footer`, `h1`–`h3`, `nav`, `button`, `label`, `input`); reskinning the site must require CSS edits only.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all visual tokens in `:root`. Exact values:\n\n```css\n:root {\n  \u002F* Action & ink *\u002F\n  --primary: #111111;         \u002F* borders, button ink, black offset shadows *\u002F\n  --secondary: #F472B6;       \u002F* hard pink accent: offset shadows, highlights *\u002F\n  \u002F* Surfaces *\u002F\n  --bg-primary: #FAFAFA;      \u002F* page background — never #ffffff *\u002F\n  --bg-secondary: #FEFEFE;    \u002F* card surfaces *\u002F\n  --bg-tertiary: #F5F5F5;     \u002F* gray chips, badges, meta strips *\u002F\n  \u002F* Text *\u002F\n  --text-primary: #0A0A0A;\n  --text-secondary: #555555;\n  --text-success: #2F6B3F;\n  --text-error: #D7263D;\n  \u002F* Tints *\u002F\n  --pink-tint: #F2D4CF;       \u002F* soft pink panels — dark text only *\u002F\n  --sage: #86A882;            \u002F* sage accent: borders, icons, chips *\u002F\n  --sage-tint: #E5EDD6;       \u002F* soft sage panels — dark text only *\u002F\n  \u002F* Borders (full shorthand) *\u002F\n  --border-default: 3px solid #111111;\n  --border-error: 3px solid #D7263D;\n  --border-success: 3px solid #2F6B3F;\n  \u002F* Shape & depth *\u002F\n  --radius-sm: 0;  --radius-md: 2px;  --radius-lg: 4px;\n  --shadow-sm: 3px 3px 0 #111111;    \u002F* small elements: black offset *\u002F\n  --shadow-md: 5px 5px 0 #F472B6;    \u002F* primary components: pink offset *\u002F\n  \u002F* Rhythm & motion *\u002F\n  --spacing-gap: 1.2rem;\n  --transition-fast: 120ms;\n  --transition-normal: 150ms;\n  --ease-standard: cubic-bezier(0.2, 0, 0, 1);\n  \u002F* Type *\u002F\n  --font-base: 'Space Grotesk', sans-serif;\n  \u002F* Stacking *\u002F\n  --z-dropdown: 100;  --z-modal: 200;  --z-toast: 300;\n}\n```\n\n- **Contrast Pairing (enforced in every theme, not just default):** light surfaces (`#FAFAFA`, `#FEFEFE`, `#F5F5F5`, `--pink-tint`, `--sage-tint`) pair only with `--text-primary` dark text; dark\u002Fink surfaces pair only with `--text-primary` light text. `--secondary` (#F472B6) and `--sage` (#86A882) are **never** used as backgrounds behind body text — they are reserved for borders, offset shadows, icons, and chips.\n\n**1.3 Mandatory Dark Mode**\n- **Exception note:** the source style spec lists dark mode as \"None\"; the mandatory dark-mode rule overrides this — dark mode must ship, styled as an inverted ink-on-paper variant of Raw Grid.\n- Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>` (class takes precedence when applied):\n\n```css\n--primary: #FAFAFA;\n--bg-primary: #0A0A0A;\n--bg-secondary: #161616;\n--bg-tertiary: #212121;\n--text-primary: #FAFAFA;\n--text-secondary: #A6A6A6;\n--text-success: #7FC98B;\n--text-error: #FF6B7E;\n--pink-tint: #3B2530;   \u002F* light text only *\u002F\n--sage: #9DBE99;\n--sage-tint: #252F26;   \u002F* light text only *\u002F\n--border-default: 3px solid #FAFAFA;\n--border-error: 3px solid #FF6B7E;\n--border-success: 3px solid #7FC98B;\n--shadow-sm: 3px 3px 0 #FAFAFA;\n--shadow-md: 5px 5px 0 #F472B6;   \u002F* pink stays — it pops on ink *\u002F\n```\n\n- Background and text variables must flip seamlessly with **zero HTML restructuring**. Primary buttons invert automatically (light surface, dark text) because they are driven by tokens.\n- **Toggle control:** a visible `.theme-toggle` button in the header with a Google Material Symbols icon (`dark_mode` \u002F `light_mode`), correct `aria-pressed` state, and a dynamic `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\").\n- **Persistence:** store the choice in `localStorage`; on first visit fall back to `prefers-color-scheme`.\n- **Exception clause:** one minimal inline theme-bootstrap `\u003Cscript>` in `\u003Chead>` is permitted solely to apply the stored theme class before first paint and prevent a flash of the wrong theme; no other inline script may exist.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout structures with Flexbox (`display: flex`).\n- **Every flex container defaults to `align-items: center`** unless an exception is justified with an inline CSS comment. Justified exceptions on this page: card columns (`stretch`, for equal heights) and card\u002Fstep body text (`flex-start`, for readability).\n- Card grids use `flex-wrap` with `gap: var(--spacing-gap)`; rows convert to a single column below `48em` (768px). Media queries are mobile-first `min-width` only.\n- No horizontal scrolling at any viewport down to 320px. Use a fluid container: `width: min(100% - 2.5rem, 72rem); margin-inline: auto;` and `clamp()` for all type sizes.\n\n**1.5 CSS Methodology**\n- Use clean custom CSS organized in native `@layer` blocks, in order: `tokens, base, layout, components, utilities`. Do not add any CSS framework or CDN.\n- Every component style maps back to the tokens above via reusable classes: `.btn`, `.btn--primary`, `.card`, `.chip`, `.input-group`, `.faq__item`, etc. Never hardcode hex values outside the token layer.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load **Space Grotesk** (weights 400, 500, 700) via Google Fonts `\u003Clink>` with `preconnect`. Bind it to `--font-base`. Body text is 400\u002F1.5; headings and buttons are 700, uppercase kickers with slight positive tracking, hero display with tight negative tracking. Hero H1: `clamp(2.75rem, 7vw, 5rem)`.\n- **Exception note:** the source spec's \"Segoe UI \u002F system-ui for hero headlines\" directive is superseded by the mandatory Google Fonts rule — Space Grotesk is both the body and display face; system fonts may appear only as fallbacks inside the font stack.\n- Icons: **Google Material Symbols (Sharp variant)** loaded via its Google Fonts stylesheet, with `font-variation-settings: 'FILL' 1` configured in CSS. **Raw inline SVGs and local icon files are forbidden.** Use only real glyph names, e.g.: `bolt`, `grid_view`, `rocket_launch`, `shield`, `speed`, `check`, `close`, `expand_more`, `format_quote`, `mail`, `arrow_forward`, `error`, `task_alt`, `progress_activity`, `dark_mode`, `light_mode`.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons — All States as CSS Classes**\n- **Base `.btn`:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; min-width: 44px; padding: 0.75rem 1.5rem; font-weight: 700; text-transform: uppercase; border: var(--border-default); cursor: pointer;` with transitions on `background-color`, `transform`, and `box-shadow` at `var(--transition-normal) var(--ease-standard)`.\n- **`.btn--primary`:** background `--primary`, text `#FEFEFE` (light) \u002F inverted in dark, `box-shadow: var(--shadow-md)` (pink offset).\n- **`.btn--secondary`:** background `--bg-secondary`, text `--text-primary`, `box-shadow: var(--shadow-sm)` (black offset).\n- **Hover (150ms):** bold color shift per the spec — e.g., secondary flips its fill to `--secondary` pink with ink text — plus `transform: translate(-2px, -2px)` and the shadow grows (7px pink \u002F 4px ink).\n- **Active\u002FPressed:** `transform: translate(3px, 3px)` and `box-shadow: 0 0 0` — the button slams into its shadow.\n- **Focus:** global `:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }` — the offset gap guarantees visibility on every surface in both themes. Never remove or restyle focus rings away.\n- **Loading `.btn--loading`:** `pointer-events: none` (prevents double-clicks), `aria-busy=\"true\"`, label replaced by the rotating Material Symbol `progress_activity` (CSS keyframe rotation) **without changing button dimensions** (fixed content box \u002F consistent padding).\n- **Disabled `[disabled]`:** `opacity: 0.5; filter: grayscale(1); box-shadow: none; cursor: not-allowed;` no transforms.\n- **Success\u002FError:** `.btn--success` \u002F `.btn--error` swap border and fill to the success\u002Ferror tokens plus a status icon (`task_alt` \u002F `error`); announce outcomes through an `aria-live=\"polite\"` region that exists in the DOM from first render.\n- **`.btn--danger`:** define it (error tokens, high-contrast in both themes) even though this page has no destructive action — the pattern must ship.\n\n**2.2 Cards — Features, Testimonials, Pricing Tiers**\n- **Default `.card`:** flex column, background `--bg-secondary`, `border: var(--border-default)`, `box-shadow: var(--shadow-sm)`, `border-radius: var(--radius-sm)`, internal `gap: var(--spacing-gap)`, consistent padding. Equal heights via the documented `stretch` exception.\n- **Hover (interactive cards only — features and pricing):** `transform: translate(-2px, -2px)` with shadow growth. Testimonial cards are non-interactive: **no hover transform** (never fake interactivity).\n- **Focus-within:** when a card's inner link\u002Fbutton receives focus, the card border shifts to `--secondary` or `--sage` — the relationship must be visible.\n- **Loading (Skeleton):** ship a `.card--skeleton` class with a CSS shimmer sweep animation (linear-gradient, 1.2s loop) that preserves layout dimensions.\n- **Empty State:** ship a `.card--empty` pattern — centered Material Symbol icon in a bordered chip plus one line of guidance text.\n\n**2.3 Form & Input — Final CTA Email Capture**\n- **Structure `.input-group`:** flex container wrapping a `\u003Clabel>`, an `\u003Cinput>`, and a dedicated `.form-error` feedback element with `aria-live=\"polite\"`.\n- **States, all defined in CSS:** empty; focused (the global focus ring plus a `--secondary` border shift); filled; valid (`.input--success`: success border + inline `task_alt` icon); invalid (`.input--error`: error border, `--text-error` message text, `error` icon — never color alone); disabled; read-only.\n- The Final CTA form (Section 5.8) must exercise empty → focus → invalid (empty\u002Fmalformed email) → valid → loading → success.\n\n**2.4 Modal \u002F Popup**\n- Not applicable: no modal is requested — **do not build one.** Retain `--z-modal` unused. If an overlay were ever added, it must follow: animated open\u002Fclose via CSS, centered flex backdrop, Material Symbol close button, focus trap, `Esc` and overlay-click dismissal.\n\n**2.5 FAQ Accordion (Custom Widget — A11y Critical)**\n- Pattern per item: `\u003Ch3>\u003Cbutton class=\"faq__question\" aria-expanded=\"false\" aria-controls=\"...\" id=\"...\">Question \u003Cspan class=\"material-symbols-sharp\">expand_more\u003C\u002Fspan>\u003C\u002Fbutton>\u003C\u002Fh3>` followed by `\u003Cdiv class=\"faq__answer\" role=\"region\" aria-labelledby=\"...\" hidden>`.\n- Toggle `aria-expanded` and `hidden` in `script.js`; chevron rotates 180°; open question gains a `--secondary` border highlight, 150ms.\n- Fully keyboard operable (native `button` semantics, logical tab order); animation respects `prefers-reduced-motion`.\n- First item renders open (`aria-expanded=\"true\"`, answer visible).\n\n**2.6 Theme Toggle**\n- `.theme-toggle` is a 44×44px bordered button following all `.btn` state rules (hover shift, active press-into-shadow, focus ring), with icon swap, `aria-pressed`, and dynamic `aria-label` per Section 1.3.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` type, mobile-first breakpoints at 768px and 1024px, zero horizontal overflow at 320px.\n- **Motion:** every state change transitions at `var(--transition-normal)` (150ms). Under `prefers-reduced-motion: reduce`, disable transforms, shimmer, spinner rotation, and `scroll-behavior: smooth`.\n- **Accessibility:** body text contrast ≥ 4.5:1 and UI\u002Flarge text ≥ 3:1 in **both** themes; never communicate state by color alone (always icon + text); semantic HTML5 with exactly one `h1`, logical `h2`\u002F`h3` hierarchy; ARIA on the toggle, accordion, and live regions; complete keyboard operability; visible focus everywhere; a visually hidden skip-link to `\u003Cmain>` as the first focusable element.\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.\n- **Anchors:** `scroll-margin-top` on sections so sticky-header navigation never obscures headings.\n- **Hero grid texture:** decorative grid lines via CSS `linear-gradient` background only, adapted for dark mode, never an image.\n\n---\n\n## 4. DELIVERABLES & OUTPUT FORMAT\n\n- **Files:** `index.html`, `style.css`, `script.js` — separate, complete, runnable. Exactly one `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>` before `\u003C\u002Fbody>`, plus the single permitted theme-bootstrap line in `\u003Chead>` (Section 1.3 exception). Google Fonts `\u003Clink>`s in `\u003Chead>`.\n- **Naming:** strict BEM (`block__element--modifier`) across the entire deliverable — never mix conventions.\n- **Copy:** author all user-facing copy yourself, in **English**, in the Raw Grid voice — scrappy, direct, confident, zero fluff. Short declarative sentences. Punchy, benefit-led headlines (tone anchor: \"Work fast. Ship loud.\"). Realistic testimonial quotes with first name + role, plausible pricing numbers, 4–5 genuine FAQ questions with 2–3 sentence answers. **No lorem ipsum anywhere.**\n- **Placeholders:** the only permitted `href=\"#\"` placeholders are the footer's secondary links to pages that don't exist (About, Careers, Privacy, Terms); anchor links to on-page sections must use real IDs.\n- **Product identity:** invent one short, punchy product name and use it consistently across header wordmark, hero, footer, and copy.\n\n---\n\n## 5. PAGE SECTION SPECIFICATION (Build in This Order)\n\n**5.1 Header (slim, sticky):** skip-link, then a flex bar (`align-items: center`, `justify-content: space-between`): bordered wordmark chip, anchor links to `#features`, `#how`, `#pricing`, `#faq` (hidden below 768px via media query — no JS menu), and the `.theme-toggle` at the right. `border-bottom: var(--border-default)`, background `--bg-primary`, z-index `--z-dropdown`.\n\n**5.2 Hero:** dense CSS grid-line texture background; mobile: flex column; desktop: two-part flex row. One `h1` in Space Grotesk 700 with one word wrapped in `.highlight` (pink-tint background, 3px border, slight rotate for the scrappy feel). Direct subhead (1–2 sentences). CTA row: `.btn--primary` + `.btn--secondary`. A proof strip with `check` icons. Right side: a CSS-built graphic — a cluster of bordered stat\u002Flabel chips with pink and black offset shadows.\n\n**5.3 Features (3 cards):** kicker chip + `h2`; flex-wrap row of three equal `.card`s (1-up mobile, 3-up ≥ 768px), each with a Material Symbol icon in a bordered sage-tint badge, `h3`, direct description, and a \"Learn more\" text link with icon — demonstrating card hover and `:focus-within`.\n\n**5.4 How It Works (3 steps):** three bordered step cards with oversized Space Grotesk numerals (\"01\", \"02\", \"03\") in pink\u002Fsage bordered chips, icon, title, short copy. Flex column mobile, row desktop, connected by a CSS pseudo-element rule line on desktop.\n\n**5.5 Testimonials:** three non-interactive `.card`s — `format_quote` icon, quote copy, and an author row: bordered initials chip (alternating pink\u002Fsage tints), name, role.\n\n**5.6 Pricing (3 tiers):** flex row of three `.card`s. Middle tier `.card--featured`: `--pink-tint` background, `--shadow-md` pink offset, a rotated (-2deg) \"MOST POPULAR\" badge chip, larger padding, and `.btn--primary`; side tiers use `.btn--secondary`. Each tier: name, big price, 3–4 list items with `check` icons. **Do not add a monthly\u002Fyearly toggle — it was not requested.**\n\n**5.7 FAQ:** bordered container stack with `var(--spacing-gap)` gaps; 4–5 accordion items per Section 2.5; first item open.\n\n**5.8 Final CTA:** high-impact panel — `--pink-tint` background, 3px border, `--shadow-md`; `h2`, one direct line, and the email capture `.input-group` (per Section 2.3) with a `.btn--primary` submit. On submit: validate → invalid shows `.form-error` in `--text-error` with `aria-live` announcement → valid shows `.btn--loading` (800ms) → `.btn--success` with a confirmation message in the live region. This front-end demo lives in `script.js`.\n\n**5.9 Footer with secondary links:** `border-top: var(--border-default)`. Flex-wrap columns: wordmark + one-liner; \"Product\" group (real anchors to Features, Pricing, FAQ); \"Company\" group (About, Careers, Contact — `href=\"#\"` permitted); \"Legal\" group (Privacy, Terms). Bottom bar: © 2025 + product name, \"Back to top\" link. No newsletter form here — the capture already lives in 5.8.\n\n**5.10 `script.js` scope (nothing more):** theme bootstrap\u002Ftoggle with `localStorage`; FAQ accordion; CTA form demo. No other JavaScript.\n\n---\n\n## 6. ACCEPTANCE CHECKLIST (verify before submitting)\n\n- Zero inline `style` attributes; zero inline SVGs; icons are Material Symbols only.\n- Dark mode fully functional: toggle works, `aria-pressed` correct, choice persists across reloads, correct `prefers-color-scheme` fallback, no theme flash.\n- Every `.btn` state exists: hover, active press-into-shadow, focus ring, loading, disabled, success, error, danger.\n- Cards show hover\u002Ffocus-within where interactive; skeleton and empty-state classes ship.\n- Full keyboard walkthrough succeeds: skip-link → toggle → anchors → CTAs → FAQ → form, with visible focus everywhere.\n- No horizontal scroll at 320px; reduced-motion respected; contrast verified in both themes.\n- BEM naming consistent end to end; copy in English, on-voice, lorem-ipsum-free; three files, one deferred script.\n",1791954991080]