[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-361-IBM-Plex-Sans-Typography":3},"# SYSTEM PROMPT — CODING AGENT TASK\n## Complete Landing Page · Theme: \"IBM Plex Sans Typography\" · Category: Typography-Driven\n\n**Role & Objective:** Act as a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete Landing Page on the first attempt. Generate the final, production-ready code immediately — no clarifying questions, no scaffolding, no TODOs. Every decision you must make on the user's behalf is specified below.\n\n**Project Definition:**\n- **Theme:** IBM Plex Sans Typography — corporate, engineered humanist sans; technical precision; Contemporary Web.\n- **Category:** Typography-Driven — type is the primary visual device. No photography, no illustrations, no decorative gradients. Typography, whitespace, hairline rules, and the two-color palette carry the entire design.\n- **Required sections, in this exact order:** Header (site chrome: wordmark, anchor nav, theme toggle, CTA) → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA (email capture) → Footer with secondary links.\n\n**Design Direction (Authoritative Theme Spec):**\n- **Signature CSS:** `font-family: 'IBM Plex Sans', sans-serif; letter-spacing: -0.03em; line-height: 0.9;` — applied to all display headings (hero, section titles, prices, step numerals). Headings are **strictly left-aligned, never centered**.\n- **Palette:** Primary `#FFFFFF` · Secondary `#09524F` (deep engineered teal).\n- **Hero visual direction (implement exactly):** 2D isolated typography on a solid `#09524F` surface — `#FFFFFF` IBM Plex Sans display text, tracking −3%, leading 90%, strictly left-aligned, the text block optically centered in the viewport, headline set at approximately 50% of viewport width (fluid via `clamp()`).\n- **Body copy exception:** body\u002Fparagraph text uses `line-height: 1.6` and at most `letter-spacing: -0.01em` for readability. Micro-labels (eyebrows) may use uppercase with `+0.08em` tracking as a deliberate contrast device.\n- **Section rhythm:** brand-teal bands (`var(--secondary)`, white type) for Hero, Testimonials, Final CTA, and Footer; light bands (`var(--bg-primary)`) for Features, How It Works, Pricing, FAQ.\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. Zero inline event-handler attributes (`onclick`, `onsubmit`, etc.) — all behavior attaches via `addEventListener` in `script.js`.\n- **Class\u002FID Selectors Only:** All design properties, layout rules, and states are targeted via class or ID selectors defined in `style.css`.\n- **Minimal HTML Modifications:** HTML must remain clean, semantic, and style-agnostic. Re-theming the page must require editing `style.css` only — never the markup.\n\n### 1.2 CSS Variables & Theme Tokens\nStore every visual token in `:root` and override per theme. Use exactly this system:\n\n```css\n:root { \u002F* Light theme — default *\u002F\n  --primary: #ffffff;        \u002F* inverted type & controls on teal (palette Primary) *\u002F\n  --secondary: #09524f;      \u002F* brand teal (palette Secondary) *\u002F\n  --accent: #09524f;         \u002F* interactive accent: links, focus rings, highlights *\u002F\n  --bg-primary: #fefefe;     \u002F* page background — NEVER #ffffff *\u002F\n  --bg-secondary: #f1f4f3;   \u002F* elevated card\u002Fpanel surfaces *\u002F\n  --text-primary: #0c1f1e;   \u002F* dark teal-ink on light surfaces *\u002F\n  --text-secondary: #4a6360; \u002F* muted slate-teal *\u002F\n  --text-success: #0e7a43;\n  --text-error: #c0392b;\n  --border-default: #d9e2e0;\n  --border-success: #0e7a43;\n  --border-error: #c0392b;\n  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px;\n  --shadow-sm: 0 1px 2px rgba(12,31,30,.08);\n  --shadow-md: 0 10px 28px rgba(12,31,30,.14);\n  --spacing-gap: 1.5rem;\n  --transition-fast: 150ms; --transition-normal: 300ms;\n  --ease-standard: cubic-bezier(.2, 0, .2, 1);\n  --z-dropdown: 100; --z-modal: 200; --z-toast: 300;\n  --font-base: 'IBM Plex Sans', sans-serif;\n}\n```\n\nDark theme overrides (under both `@media (prefers-color-scheme: dark)` and `.dark`):\n\n```css\n--accent: #45b8b2; --bg-primary: #061514; --bg-secondary: #0c2b28;\n--text-primary: #fefefe; --text-secondary: #9db5b2;\n--text-success: #57c98a; --text-error: #ff8a7d;\n--border-default: #1e3d3a; --border-success: #57c98a; --border-error: #ff8a7d;\n--shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow-md: 0 10px 28px rgba(0,0,0,.6);\n```\n\n- **Contrast Pairing (mandatory, every theme):** light background ↔ dark text (`--bg-primary` ↔ `--text-primary`), dark background ↔ light text. Brand-teal bands (`--secondary` `#09524F`) always pair with `#FFFFFF`\u002F`--primary` type; inverted cards on teal bands pair a `#fefefe` surface with `--text-primary`-dark ink. Verify ≥ 4.5:1 for body text and ≥ 3:1 for large display text in **both** themes.\n- **Brand bands are theme-constant:** Hero, Testimonials, Final CTA, and Footer keep the `#09524F` surface with white type in light **and** dark mode — this is the theme's signature.\n- **Elevation\u002FStacking:** any layered UI must use `--z-dropdown` \u002F `--z-modal` \u002F `--z-toast`; the sticky header sits below `--z-dropdown`.\n\n### 1.3 Mandatory Dark Mode Support\n- **Implementation:** Provide dark tokens under `@media (prefers-color-scheme: dark)` (system default, no flash) **and** a `.dark` class on `\u003Chtml>` for explicit user override (also define `.light` to force light against a dark system preference). Background and text variables must switch with zero HTML restructuring.\n- **Persistence:** Store the user's choice in `localStorage` (e.g., key `theme`); on load, apply the stored value, falling back to `prefers-color-scheme` on first visit. Apply the override class at the very top of `script.js` (before any other logic) to minimize flash-of-wrong-theme.\n- **Toggle Control:** A visible icon button in the header using a Google Material Symbol (`dark_mode` \u002F `light_mode`), with `aria-pressed` reflecting state and a dynamic `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\").\n\n### 1.4 Flexbox Layout & Mobile-First Alignment\n- Build every layout structure with Flexbox (`display: flex`).\n- **Default Alignment Rule:** every flex container defaults to `align-items: center` unless an exception is explicitly justified with a CSS comment (e.g., `align-items: stretch` for equal-height pricing\u002Ffeature card rows).\n- **Mobile-Friendly First:** base styles are mobile (single column); rows are introduced at `min-width` breakpoints. Fluid `clamp()` type, `max-width: 100%`, wrapping flex rows — **no horizontal scrolling at any viewport width down to 320px**.\n\n### 1.5 Framework Default & Tailwind CSS Integration\n- Use the Tailwind CSS Play CDN (external `\u003Cscript src=\"https:\u002F\u002Fcdn.tailwindcss.com\">` in `\u003Chead>`) for **layout, spacing, and responsive utilities only**.\n- All color, font, radius, and shadow decisions must come from the CSS variables — use arbitrary-value utilities bound to tokens (e.g., `bg-[var(--bg-primary)]`, `text-[var(--text-primary)]`) or the reusable component classes (`.btn`, `.card`, `.input-group`). **Never hardcode hex values in class attributes.**\n- **No `tailwind.config` inline script** (zero-inline-JS rule). If a utility cannot be expressed without config, write it in `style.css` instead. `body { font-family: var(--font-base); }` is set in `style.css` — do not use font-family utilities.\n\n### 1.6 Typography & Icons (Google Fonts Mandatory)\n- **Text:** Load Google Font **IBM Plex Sans** (weights 300; 400; 500; 600; 700) via `\u003Clink>` tags in `\u003Chead>`; bind to `--font-base`. Optionally load **IBM Plex Mono** (400; 500) — same Google Fonts superfamily — used **only** for micro-labels, step numerals, and pricing figures to reinforce the engineered character; headings and body remain IBM Plex Sans.\n- **Icons:** Use Google Material Symbols (Outlined) via the standard stylesheet. Mark decorative icons `aria-hidden=\"true\"`; give meaningful icons accessible labels. **Forbidden:** raw inline SVGs, local icon files, emoji-as-icons, icon images.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n### 2.1 Button Component Requirements\nStyle all states via CSS classes. 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: 600; border-radius: var(--radius-md); transition: all var(--transition-fast) var(--ease-standard);`\n- **Variants:** `.btn--primary` (light surfaces: `--secondary` fill, white text; on teal bands: inverted — `--primary` fill, `--secondary` text), `.btn--secondary` (1px outlined, transparent fill, theme-aware), `.btn--danger` (defined with `--text-error`\u002F`--border-error`, visually distinct in both themes — no destructive action exists in scope, but the class must be theme-safe).\n- **Hover:** brightness\u002Fshadow shift + `cursor: pointer`.\n- **Focus:** `:focus-visible` renders a distinct ring via `outline`\u002F`box-shadow` using `--accent` (never remove focus indication without replacement).\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading:** `.is-loading` disables interaction (`pointer-events: none`), prevents double-clicks (JS also sets `disabled` + `aria-busy=\"true\"`), and renders a pure-CSS border spinner or animated Material Symbol **without changing button dimensions** (overlay or reserved space; no layout shift).\n- **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`.\n- **Success\u002FError:** `.is-success` \u002F `.is-error` temporary feedback states driven by `--text-success` \u002F `--text-error` (used by the Final CTA submit).\n\n### 2.2 Card Component Requirements\n- **Default:** `.card` — flexible Flexbox column, `--bg-secondary` surface, 1px `--border-default` hairline, `--radius-md`, `--shadow-sm`, children spaced with `gap: var(--spacing-gap)`.\n- **Hover:** only interactive cards (`.card--interactive`, e.g., pricing) get `transform: translateY(-2px)` + `--shadow-md` + accent border. Static cards (Features, Testimonials) must **not** show hover-lift affordances.\n- **Focus-within:** `.card--interactive` highlights its border when a child link\u002Fbutton receives focus.\n- **Featured:** `.card--featured` — teal accent treatment (accent border or teal header band + \"Most popular\" badge), distinct in both themes.\n- **Loading (Skeleton):** define `.skeleton`, `.skeleton__line`, `.skeleton__box` with a CSS shimmer keyframe (linear-gradient background-position animation), fixed `min-height`s to prevent layout jumps, and a static fallback under `prefers-reduced-motion`.\n- **Empty State:** define `.card--empty` — centered Google Material Symbol + clear guidance text. (Skeleton and empty classes are part of the reusable system even where content is static.)\n\n### 2.3 Form & Input Requirements\nThe Final CTA contains the page's email capture. Structure: `.input-group` — a flex container (column on mobile, row ≥ 640px) wrapping a `\u003Clabel for>`, `\u003Cinput type=\"email\" required>`, and a dedicated feedback container `\u003Cp class=\"input-group__feedback\" aria-live=\"polite\">`.\n- **States (all styled in CSS):** empty, `:focus` (2px `--accent` ring), filled, valid (`.is-valid`: `--border-success` + trailing `check` Material Symbol), invalid (`.is-invalid` \u002F `[aria-invalid=\"true\"]`: `--border-error`, error icon, error message text in `--text-error` injected into the feedback container), disabled, read-only.\n- **Behavior (script.js):** validate on blur and on submit with an email regex; never use native browser alert popups; on success, the submit button enters `.is-loading` (brief simulated delay) then `.is-success`, with confirmation text written to the `aria-live` region; double submits prevented.\n\n### 2.4 FAQ Accordion Requirements (Interactive Component)\n- Each item: `\u003Ch3 class=\"accordion__heading\">\u003Cbutton class=\"accordion__trigger\" aria-expanded=\"false\" aria-controls=\"faq-panel-N\" id=\"faq-trigger-N\">Question \u003Cspan class=\"material-symbols-outlined\" aria-hidden=\"true\">expand_more\u003C\u002Fspan>\u003C\u002Fbutton>\u003C\u002Fh3>` followed by `\u003Cdiv class=\"accordion__panel\" id=\"faq-panel-N\" role=\"region\" aria-labelledby=\"faq-trigger-N\">`.\n- Open\u002Fclose animated purely in CSS (e.g., `grid-template-rows: 0fr → 1fr` transition) with the chevron rotating 180°; JS only toggles `aria-expanded` and a state class. Fully keyboard-operable (native buttons), logical focus order, no layout jump.\n- **Modal\u002FPopup:** none are in scope — do **not** introduce modals, dialogs, or popups anywhere on this page.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by Default:** fluid `clamp()` type scale, responsive breakpoints, zero horizontal overflow (verify at 320px). Sticky header offset handled via `scroll-margin-top` on sections.\n- **Smooth Animations:** every state change transitions with `transition: var(--transition-normal)` (or `--transition-fast` for micro-interactions); `scroll-behavior: smooth` for anchor navigation. All of it — transforms, shimmer, spinners, smooth scroll — is disabled under `@media (prefers-reduced-motion: reduce)`.\n- **Accessibility (a11y):** semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby` pointing to section headings, `footer`); a skip-to-content link; contrast per 1.2 in both themes; **never rely on color alone** — pair every state with an icon and\u002For text; full keyboard operability with visible `:focus-visible` styles on every interactive element; `aria-live` regions for form feedback and dynamic state changes; touch targets ≥ 44×44px.\n- **Mandatory Visual Feedback:** every click, hover, focus, and submission triggers a visible state change.\n- **Destructive Actions:** none in scope; `.btn--danger` must still be visually distinct in both light and dark themes.\n\n---\n\n## 4. SECTION-BY-SECTION BUILD SPECIFICATION\n\n### 4.1 Header (Site Chrome)\nSticky, `--bg-primary` surface with hairline bottom border; wordmark (typographic logo, tight tracking); anchor nav (Features, How It Works, Pricing, FAQ) hidden below 768px — the footer duplicates these links, so no hamburger menu is required; theme toggle per 1.3; compact `.btn--primary` CTA.\n\n### 4.2 Hero\nFull brand-teal band (`min-height: 90vh`, flex-centered). Implements the visual direction exactly: eyebrow micro-label (uppercase, `+0.08em`, white at 80% opacity); display headline in `#FFFFFF`, `clamp(2.75rem, 9vw, 7.5rem)`, `letter-spacing: -0.03em`, `line-height: 0.9`, strictly left-aligned, block maxed at ~50–60% viewport width; supporting subcopy (max-width 46ch, white at 78% opacity, `line-height: 1.6`); CTA row (flex, wrap, gap): `.btn--primary` inverted + `.btn--secondary` white outline. Optional CSS-only technical detail (hairline rules, coordinate microcopy). No images.\n\n### 4.3 Features (3 Cards)\nConsistent section-heading pattern (eyebrow + left-aligned `h2` with signature tracking\u002Fleading + lede). Three `.card` children: Material Symbol in a tile, `h3` title, copy. Column on mobile → flex row ≥ 768px, `align-items: stretch` (commented exception), `gap: var(--spacing-gap)`. Static cards — no hover affordance.\n\n### 4.4 How It Works (3 Steps)\nThree steps with oversized numerals `01 \u002F 02 \u002F 03` (IBM Plex Sans 700 or the Plex Mono accent, `--accent` color, tight tracking), each with a title and copy. Column on mobile → row ≥ 768px; a hairline connector between steps on desktop via CSS pseudo-elements only.\n\n### 4.5 Testimonials\nBrand-teal band. Three inverted `.card` quotes (`#fefefe` surface, dark teal-ink text, constant across themes). Oversized typographic quotation mark via `::before` in `--accent`-on-light \u002F white-on-teal; quote at `line-height: 1.6`; attribution row: CSS monogram circle (initials, teal fill, white text — no photos) + name + role. Column → row ≥ 992px.\n\n### 4.6 Pricing (3 Tiers)\nLight band. Three `.card--interactive` tiers, equal height (`align-items: stretch`, commented); middle tier is `.card--featured` (\"Most popular\" badge, accent border, elevation). Each: tier name, price in large tight-tracked numerals (Plex Mono permitted here), feature list with `check` Material Symbols, CTA — `.btn--primary` on the featured tier, `.btn--secondary` on the others — anchoring to `#final-cta`. Column on mobile → row ≥ 992px.\n\n### 4.7 FAQ\nLight band, left-aligned measure (max-width ~48rem). 5–6 accordion items built exactly per 2.4.\n\n### 4.8 Final CTA\nBrand-teal band. Headline in white with signature tracking\u002Fleading; supporting line; the email capture `.input-group` per 2.3 with `.btn--primary` inverted submit exercising loading → success\u002Ferror states; privacy microcopy beneath.\n\n### 4.9 Footer with Secondary Links\nBrand-teal band, white type. Wordmark + one-line brand blurb; 2–3 columns of secondary links (e.g., Product, Company, Resources) — link to on-page sections where a real target exists; links with no real destination may use `href=\"#\"` as structural placeholders (do not invent fake external URLs). Bottom bar: © year, brand name, \"Back to top\" link. All links carry hover and `:focus-visible` underline styles.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n### 5.1 File Structure\nThree separate files: `index.html`, `style.css`, `script.js`. The only `\u003Cscript>` tags in the HTML are the Tailwind Play CDN (external, `\u003Chead>`) and exactly one `\u003Cscript defer src=\"script.js\">\u003C\u002Fscript>`. Zero inline `\u003Cscript>` blocks, zero inline styles, zero inline handlers. `script.js` contains only: theme toggle + persistence, FAQ accordion behavior, and form validation — no other libraries.\n\n### 5.2 Naming Convention\nAll hand-written class names follow **BEM** strictly (`.card`, `.card__title`, `.card--featured`, `.accordion__trigger`, `.input-group__feedback`). Tailwind utilities are permitted for layout\u002Fspacing only and must never carry hardcoded colors. Never mix in one-off conventions.\n\n### 5.3 Copy & Placeholder Policy\nAll user-facing copy is written in **English** in a precise, technical, corporate voice consistent with the \"engineered precision\" mood. Invent a concise, credible brand name and write real copy for every section — **no lorem ipsum**. Placeholder text is permitted only in the genuinely unspecified footer secondary links (per 4.9).\n\n### 5.4 Acceptance Checklist (self-verify before output)\n- Zero `style=\"...\"` attributes, zero inline scripts\u002Fhandlers, zero inline SVGs, zero hardcoded hex values outside `style.css` tokens.\n- Dark mode: toggle works, persists via `localStorage`, correct `aria-pressed`\u002F`aria-label`, no flash for system-preference users.\n- Every button has hover, focus-visible, active, loading, and disabled styles; every interactive element gives visible feedback.\n- Form covers empty\u002Ffocus\u002Ffilled\u002Fvalid\u002Finvalid\u002Fdisabled states with `aria-live` feedback; FAQ accordion is keyboard-operable with correct ARIA.\n- No horizontal scroll at 320px; `prefers-reduced-motion` respected; contrast ≥ 4.5:1 body \u002F ≥ 3:1 display in both themes; headings left-aligned with `letter-spacing: -0.03em; line-height: 0.9`.\n- Output the complete code for all three files in a single response, on the first attempt.\n",1791954985666]