[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-467-Utilitarian":3},"# SYSTEM PROMPT — CODING AGENT BUILD SPECIFICATION\n\n**Project:** Complete \"UTILITARIAN\" Landing Page — production-ready, built correctly on the first attempt.\n**Design Language:** Utilitarian — Industrial Design & Military Signage. Essential, function-over-form, stark, typography-driven, information-dense.\n**Governing Mindset:** Every element must serve an informational or functional purpose. If a visual choice cannot be justified as function, delete it.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.0 Design Language Directive (Governs All Decisions)**\n* **Zero decoration:** No gradients, no rounded corners (`border-radius: 0` everywhere), no box-shadows, no photographs, no illustrations, no ornament, no filler content.\n* **Typography-driven:** Monospace only. Labels, headings, nav, buttons, and CTAs use `text-transform: uppercase`. Body copy remains sentence case for legibility at 14px.\n* **Rigid grid:** Strict 12-column grid; visible 1px grid lines are a core design element, not a defect.\n* **Functional color coding only:** Signal Red `#CC0000` = alert\u002Ferror\u002Fdestructive; Safety Yellow `#FFD700` = warning\u002Fattention\u002Ffeatured; Industrial Blue `#003366` = info\u002Flinks\u002Fconfirmation. Color is never decorative and never the sole carrier of meaning.\n* **Density over comfort:** Base font 14px, `line-height: 1.4`, base padding unit 8px, high information density, minimal whitespace.\n* **Motion policy:** No animations except functional state changes (hover, focus, active, loading, expand\u002Fcollapse, open\u002Fclose), all ≤100ms.\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n* All styling lives in `style.css`. **The `style=\"...\"` attribute is forbidden anywhere in the HTML.**\n* All design properties, layout rules, and states are targeted exclusively via class\u002FID selectors.\n* HTML stays clean, semantic, and style-agnostic: retheming the entire site must require editing `style.css` only — never the markup.\n* No inline event handlers; all behavior attaches via `addEventListener` in `script.js`.\n\n**1.2 CSS Variables & Theme Tokens**\nDefine all tokens in `:root`, overridden by theme selectors:\n* **Colors:** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.\n* **Functional signals:** `--signal-yellow: #FFD700`, `--signal-red: #CC0000`, `--industrial-blue: #003366`, `--dark-grey: #333333`, `--light-grey: #CCCCCC`, `--grid-line` (hairline color; flips with theme).\n* **Light-mode mapping:** `--primary: #000000`, `--secondary: #666666`, `--bg-primary: #FFFFFF`, `--bg-secondary: #CCCCCC`, `--text-primary: #000000`, `--text-secondary: #666666`, `--text-success: #003366` (confirmation is coded as info-blue per this palette), `--text-error: #CC0000`, `--border-default: #000000`, `--border-error: #CC0000`, `--border-success: #003366`.\n* **Contrast pairing:** every light background token pairs with a dark text token and vice versa — enforced in every theme, not just the default.\n* **Light Mode Background rule:** do not default to pure white; where a near-white is needed use `#fefefe`. **Explicit exception:** the Utilitarian spec mandates Pure White `#FFFFFF` as a functional palette token (true-white signage surface); therefore `--bg-primary: #FFFFFF` in light mode is the sanctioned exception for this build.\n* **Radius & shadows:** define `--radius-sm`, `--radius-md`, `--radius-lg` (all `0px`) and `--shadow-sm`, `--shadow-md` (both `none`). Tokens must exist per architecture; values are zeroed per the no-decoration mandate.\n* **Spacing & transitions:** `--spacing-gap: 8px`, `--transition-fast: 60ms`, `--transition-normal: 100ms`, `--ease-standard: linear` (mechanical; no easing flourish).\n* **Elevation:** `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`. Layering is expressed via z-index + solid 1px borders only — never shadows.\n* **Typography:** `--font-base: 'IBM Plex Mono', 'Courier New', monospace`; base `font-size: 14px`; `line-height: 1.4`.\n\n**1.3 Mandatory Dark Mode Support**\n* Dark mode is not optional. Define dark tokens under **both** `@media (prefers-color-scheme: dark)` and a `.dark` class on `\u003Chtml>`.\n* **Dark-mode mapping:** `--bg-primary: #000000`, `--bg-secondary: #333333`, `--text-primary: #FFFFFF`, `--text-secondary: #CCCCCC`, `--primary: #FFFFFF`, `--border-default: #FFFFFF`, `--grid-line: #FFFFFF` (grid lines invert to white hairlines). Buttons invert (white fill \u002F black text).\n* **Signal colors in dark mode:** Safety Yellow `#FFD700` passes on black and stays unchanged. Signal Red `#CC0000` fails AA as text on black — use a lightened error red for text\u002Fborders (e.g., `#FF5555`); solid `#CC0000` fills remain valid where the text on top is white. Industrial Blue `#003366` is too dark on black — use a lightened info blue for text (e.g., `#6699CC`). Hue identity must remain recognizable; verify WCAG AA in both modes.\n* **Switching:** background and text variables swap seamlessly with zero HTML restructuring.\n* **Persistence:** store the choice in `localStorage` (e.g., key `theme`); fall back to `prefers-color-scheme` on first visit. Provide a visible header toggle — a signage-style text button reading `THEME: LIGHT` \u002F `THEME: DARK` (or Material Symbols `dark_mode`\u002F`light_mode`) — with correct `aria-pressed` and `aria-label` state and a 44×44px minimum touch target.\n\n**1.4 Layout System — Rigid 12-Column Grid + Flexbox Internals**\n* **Page macro-layout (Grid):** `display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px;` — **justified exception** to the flexbox-default rule, mandated by this theme's rigid-grid spec.\n* **Visible grid-line technique:** the grid container's background is `--grid-line` (black in light mode, white in dark mode); every cell's background is `--bg-primary`. The 1px gaps expose the container background as hairline grid lines. Grid lines must remain visible at every breakpoint.\n* **Component internals (Flexbox):** every flex container defaults to `align-items: center` unless an exception is documented in this spec (e.g., `.input-group` uses `align-items: stretch` to stack label\u002Finput\u002Ferror vertically).\n* **Mobile-first responsiveness:** no horizontal scrolling, ever. Breakpoints at ~640px \u002F 768px \u002F 1024px. Below 768px the 12-column grid collapses (e.g., `repeat(2, 1fr)` or single column) while preserving the 1px grid lines; multi-column rows (features, steps, pricing) stack vertically.\n\n**1.5 Framework Default & Tailwind CSS Integration**\n* Default framework: Tailwind CSS. Custom theme CSS lives in `style.css` using Tailwind's `@layer` \u002F `@apply` directives.\n* **Markup carries semantic BEM classes only** (`.btn`, `.card`, `.input-group`, `.grid-12`, `.cell`, `.section-label`). Do not paste utility-class soup into the HTML — apply Tailwind utilities inside the BEM classes via `@apply` so retheming never touches markup.\n* All utility values must map back to the CSS variables defined in 1.2.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* **Text:** load IBM Plex Mono from Google Fonts (weights 400, 500, 700) via `\u003Clink>` in `\u003Chead>`; bind to `--font-base`. Monospace everywhere — no secondary font, no sans-serif anywhere.\n* **Icons:** Google Material Symbols (Outlined) via Google Fonts. **Inline SVGs and local icon files are forbidden. No emoji.** Icons are functional only — state indicators (error, close, check), never decoration. Where the signage aesthetic prefers typographic glyphs (`+`, `−`, `→`, `[X]`), monospace text glyphs are permitted — they are typography, not icon assets.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\nAll states are styled via CSS classes. Every state change must be visible; never rely on color alone.\n\n**2.1 Button (`.btn`; variants `.btn--primary`, `.btn--secondary`, `.btn--danger`, `.btn--info`, `.btn--warning`)**\n* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` uppercase, 1px solid border, `border-radius: 0`, minimum touch target 44×44px, padding `8px 16px`. `.btn--primary`: solid `--primary` fill with inverted text. `.btn--secondary`: transparent, 1px `--border-default`, `--text-primary` text. `.btn--danger`: Signal Red — visually distinct in both themes. `.btn--warning`: Safety Yellow fill + black text (featured pricing CTA).\n* **Hover:** fill\u002Ftext inversion (black↔white flip) or brightness shift; `cursor: pointer`. Inversion is the theme-preferred pattern.\n* **Focus:** always-visible ring: `outline: 2px solid var(--industrial-blue)` (lightened info blue in dark mode), `outline-offset: 2px`. Never remove focus rings.\n* **Active\u002FPressed:** `transform: scale(0.97)` with `transition: var(--transition-fast)`.\n* **Loading (`.is-loading`):** disables interaction and blocks double-clicks (JS sets `disabled` + `aria-busy=\"true\"`); renders a monochrome CSS spinner (rotating 1px-bordered square) or animated Material Icon without changing button dimensions; announced via `aria-live`.\n* **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`, hover inversion removed.\n* **Success\u002FError (`.is-success` \u002F `.is-error`):** temporary feedback driven by `--text-success` \u002F `--text-error`, always paired with a text label or icon (\"OK\" \u002F \"ERROR\"), announced in an `aria-live` region.\n\n**2.2 Card (`.card`)**\n* **Default:** grid cell or flex column; background `--bg-primary` (or `--bg-secondary` for panel variants); 1px solid `--border-default`; `border-radius: 0`; no shadow; 8px internal padding; dense internal layout.\n* **Hover (interactive cards only):** since shadows are forbidden, feedback = border weight 1px→2px, header-strip inversion, or subtle `transform: translateY(-2px)`. A visible change is mandatory.\n* **Focus-within:** border shifts to info blue \u002F 2px when a child link or button receives focus.\n* **Loading (skeleton):** flat `--bg-secondary` blocks with a stepped opacity blink (`steps()`) — gradient shimmer is decorative and forbidden. Under `prefers-reduced-motion`, the blink is disabled (static blocks). Skeletons must match final dimensions to prevent layout jumps.\n* **Empty state:** centered Material Icon (functional) + uppercase guidance text.\n\n**2.3 Form & Input (`.input-group`)**\n* **Structure:** flex column wrapping an uppercase `\u003Clabel>`, the field, and a dedicated error-feedback container. Documented exception: `align-items: stretch` (vertical stack).\n* **States:** empty; focused (2px solid info-blue outline ring — no glow); filled; valid (`--border-success` + \"OK\" text or check icon); invalid (`--border-error` + red error text + error icon + message — icon and text mandatory, color alone forbidden); disabled (`opacity: 0.5`, `cursor: not-allowed`); read-only (`--bg-secondary` background, no focus ring).\n* Labels bound with `for`\u002F`id`; errors wired via `aria-describedby` and announced in an `aria-live` region.\n\n**2.4 Modal \u002F Popup (`.modal`)**\n* **States:** opening, open, loading, success\u002Ferror, closing — all animated via CSS transitions limited to ≤100ms opacity (functional state changes only; no scale\u002Fslide flourishes).\n* **UX:** centered flex container (`align-items: center`); solid backdrop `rgba(0,0,0,0.7)`; panel = `--bg-primary` + 1px `--border-default`, no radius\u002Fshadow; `z-index: var(--z-modal)`; Material Icon `close` button (44×44px, `aria-label=\"Close dialog\"`); keyboard focus trap; close via `Esc` and overlay click; focus returns to the trigger; `role=\"dialog\"` + `aria-modal=\"true\"`.\n\n**2.5 FAQ Accordion (`.faq__item`)**\n* Each item: uppercase question as a `\u003Cbutton>` with `aria-expanded` + `aria-controls`, and a collapsible answer region. Indicator: monospace text glyph `+` \u002F `−` (or Material `expand_more`). Expand\u002Fcollapse transition ≤100ms (functional). Full keyboard operability; visible focus rings; never color-only state signaling.\n\n---\n\n## 3. PAGE STRUCTURE & SECTION-BY-SECTION SPECIFICATION\n\n**Global structure:** semantic `\u003Cheader>`, `\u003Cmain>`, `\u003Cfooter>`. `\u003Cmain>` is the `.grid-12` container (12 columns, visible 1px lines per 1.4). Every section opens with a full-width **section label bar** — e.g., `SEC\u002F01 \u002F\u002F HERO` — uppercase, inverted strip (black bar \u002F white text in light mode; inverted in dark). These bars are functional wayfinding, not decoration. Write all user-facing copy in English, in a terse industrial-signage voice (imperative, technical, zero marketing fluff). **Lorem ipsum is prohibited** — compose real thematic copy. No photographs or illustrations anywhere; the brand is a text wordmark.\n\n**Header (sticky):** 1px bottom border; flex row, `align-items: center`; text wordmark left; uppercase nav links (FEATURES \u002F PROCESS \u002F PRICING \u002F FAQ) with hover inversion and visible focus rings; theme toggle (per 1.3) right; a skip-link precedes it in the DOM (hidden until focused: Safety Yellow bar, black text).\n\n**SEC\u002F01 — HERO:** left cell spans 7–8 columns: metadata strip (REF\u002Fdate\u002Fversion-style data), H1 (32–48px monospace, uppercase), one sentence-case subline, `.btn--primary` + `.btn--secondary` CTAs. Right cell spans 4–5 columns: a dense \"SYSTEM STATUS\" panel — key-value rows (`STATUS: OPERATIONAL` in info blue, `UPTIME: 99.99%`, `BUILD: V2.4.1`, `REGION: EU-WEST`) demonstrating functional color coding.\n\n**SEC\u002F02 — FEATURES (3 cards):** three `.card` cells, 4 columns each (stack on mobile). Each card: index `F-01`, one functional Material Icon, uppercase title, dense sentence-case description, footer link `READ MORE →`. Apply all 2.2 states.\n\n**SEC\u002F03 — HOW IT WORKS (3 steps):** three cells, 4 columns each. Each step: `STEP 01` label, uppercase title, sentence-case description, separated by the grid's 1px lines (structural dividers only).\n\n**SEC\u002F04 — TESTIMONIALS:** three record-style entries styled as data records\u002Flog lines: sentence-case quote, metadata row (`NAME: … \u002F ROLE: … \u002F CO: … \u002F REF: …`) in uppercase secondary text, 1px separators. Layout: single column or two-per-row, collapsing on mobile.\n\n**SEC\u002F05 — PRICING (3 tiers):** three `.card` cells, 4 columns each. Each: uppercase tier name, large monospace price with `\u002FMO` unit, dense feature list using functional notation — `[+]` included, `[−]` excluded (notation, not color, carries meaning) — and a CTA. **Featured middle tier:** Safety Yellow header bar or 2px yellow border + text tag `RECOMMENDED` (text + color, never color alone); its CTA is `.btn--warning`. Other tiers use `.btn--secondary`. CTAs demonstrate loading → success states with `aria-live` feedback.\n\n**SEC\u002F06 — FAQ:** five to six accordion items (per 2.5), full-width rows with 1px dividers; each row: `Q-01` index, uppercase question, `+`\u002F`−` indicator.\n\n**SEC\u002F07 — FINAL CTA:** full-width inverted panel (black background \u002F white text in light mode; inverted in dark) with a 4px solid `--signal-yellow` left border (attention coding). Contains: uppercase headline, one sentence-case line, and an email capture `.input-group` + `.btn--primary` submit demonstrating the full state machine: empty → loading → success\u002Ferror, announced via `aria-live`.\n\n**SEC\u002F08 — FOOTER:** grid of cells: wordmark\u002Fcolophon cell; three to four uppercase link columns (secondary links: PRODUCT, COMPANY, RESOURCES, LEGAL) with hover inversion and focus rings; bottom bar: copyright line, `SYSTEM STATUS: OPERATIONAL` (info blue), dense `--bg-secondary` or inverted strip. Link columns collapse 4 → 2 → 1 across breakpoints.\n\n---\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n* **Responsive by default:** fluid sizing, no horizontal overflow at any width, grid lines preserved on mobile.\n* **Smooth animations:** transitions only on functional state changes, using `transition: var(--transition-fast|normal) var(--ease-standard)`. Honor `prefers-reduced-motion`: reduce all transitions to 0ms, disable skeleton blink and spinner rotation (fall back to text status + `aria-busy`).\n* **Accessibility:** WCAG AA contrast in both light and dark modes (apply the dark-mode signal-color adjustments from 1.3). Never rely on color alone — pair every coded color with text, icon, or notation. Semantic HTML5 throughout (`header`, `nav`, `main`, `section`, `footer`, correct `h1`–`h3` hierarchy). Correct ARIA roles\u002Flabels on the theme toggle, accordion, modal, and form feedback. Logical DOM\u002Ffocus order; full keyboard operability (no mouse-only interactions); `aria-live` regions for all dynamic feedback (form errors, loading, success).\n* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change (inversion, border weight, outline, or text status).\n* **Destructive actions:** `.btn--danger` must be visually distinct in both themes (solid `#CC0000` + white text, or red border + lightened red text in dark mode).\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n* **File structure:** three separate files — `index.html`, `style.css`, `script.js`. No inline `\u003Cscript>` blocks and no inline styles; the only script reference is a single deferred `\u003Cscript src=\"script.js\" defer>`. Google Fonts \u002F Material Symbols `\u003Clink>` tags go in `\u003Chead>`.\n* **Naming convention:** BEM only (`.btn`, `.btn--primary`, `.card`, `.card__title`, `.faq__item`, `.pricing-card--featured`, `.grid-12`, `.cell`, `.section-label`). Never mix conventions; Tailwind utilities appear only inside `@apply` in `style.css`.\n* **No unrequested placeholders:** all copy is real, English, and theme-appropriate (no lorem ipsum, no TODOs). Build exactly the sections specified — header plus SEC\u002F01–SEC\u002F08 — and nothing extra.\n* **First-attempt completeness:** the delivered page must fully work out of the box: theme toggle with persistence, accordion, all button\u002Fform states, responsive grid, and full keyboard and screen-reader operability.\n\n**Final compliance checklist (self-verify before submitting):** zero `style=\"\"` attributes · zero inline SVGs · zero border-radius · zero box-shadows · zero gradients · monospace-only typography · visible 1px grid lines at all breakpoints · complete dark mode with AA contrast · localStorage theme persistence with `aria-pressed` toggle · all component states present (hover\u002Ffocus\u002Factive\u002Floading\u002Fdisabled\u002Fvalid\u002Finvalid) · `prefers-reduced-motion` honored · no horizontal scroll · BEM-only custom classes · three files, one deferred script.\n",1791954987637]