[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-534-U-S-Web-Design-System":3},"## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- Keep all styling strictly inside a dedicated `style.css` file. **No `style=\"...\"` attributes anywhere in the HTML.**\n- Target all design properties, layout rules, and states via class or ID selectors only.\n- HTML must remain clean, semantic, and agnostic of visual styling — changing the site's look requires modifying only the CSS file, never the markup.\n\n**1.2 CSS Variables & Theme Tokens**\nStore all visual tokens in `:root` using the U.S. Web Design System palette below. Do not hardcode hex values outside `:root`:\n\n- **Colors:** `--color-bg: #ffffff` (use `#fefefe` if a near-white is needed), `--color-surface: #f0f0f0`, `--color-surface-strong: #e6e6e6`, `--color-border: #a9aeb1`, `--color-text: #1b1b1b`, `--color-text-muted: #565c65`, `--color-primary: #005ea2`, `--color-accent: #b50909`, `--color-primary-dark: #1a4480`, `--color-focus: #2491ff`.\n- **Additional tokens:** `--radius-sm: 4px`, `--radius-md: 6px`, `--radius-lg: 8px`, `--radius-pill: 999px`, `--shadow-sm`, `--shadow-md`, `--shadow-lg`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard: cubic-bezier(0.2, 0, 0, 1)`, `--z-dropdown`, `--z-modal`, `--z-toast`.\n- **Signature \"gov band\" token:** `--gov-band: linear-gradient(180deg, var(--color-primary-dark) 0%, var(--color-primary-dark) 70%, var(--color-accent) 70%, var(--color-accent) 100%)` — apply as the nav's top edge (a deep federal-blue rule with a thin red hairline) and echo it as `--trust-rule: 4px solid var(--color-primary)` on the left border of every card.\n- **Contrast pairing:** every light background token pairs with dark text tokens and vice versa, in both light and dark themes.\n\n**1.3 Mandatory Dark Mode Support**\n- Define dark mode tokens under `@media (prefers-color-scheme: dark)` **and** a `.dark` class selector. Suggested dark palette: `--color-bg: #1b1b1b`, `--color-surface: #21282e`, `--color-surface-strong: #2b333a`, `--color-text: #fefefe`, `--color-text-muted: #a9aeb1`, keep `--color-primary: #58b0ff`-adjusted for contrast on dark surfaces.\n- Theme choice must persist via `localStorage`, falling back to `prefers-color-scheme` on first visit. Include a visible toggle button with correct `aria-pressed` and `aria-label` state (\"Switch to dark mode\" \u002F \"Switch to light mode\").\n- The source spec does not declare light\u002Fdark modes; validate contrast in **both** modes before delivering.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout structures with Flexbox (`display: flex`).\n- Every flex container **must default to `align-items: center`** unless an explicitly justified exception exists (e.g., card grids stretching equal heights — document the exception in a CSS comment).\n- All layouts must be mobile-responsive out of the box: multi-column rows (features, pricing, steps) convert to single columns on small viewports. No horizontal scrolling at any width.\n\n**1.5 Framework Default**\n- Use Tailwind CSS (or clean custom CSS via `@layer` \u002F `@apply`) unless otherwise needed; all utility classes must map back to the CSS variables or generic reusable class names (`.btn`, `.card`, `.input-group`).\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load **Public Sans** from Google Fonts for both `--font-base` and `--font-display` (this is the USWDS official typeface); load **Roboto Mono** for `--font-mono` if needed.\n- Use **Google Material Symbols** for all icons. **Explicitly forbidden: raw inline SVGs or local icon files.**\n- All user-facing copy must be written in **English**, in plain-language style (short sentences, no jargon) consistent with U.S. federal government communication guidelines.\n\n---\n\n## 2. COMPONENT DESIGN SPECIFICATIONS\n\n**2.1 Buttons**\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px. Primary variant: solid `--color-primary` background, white text, `border-bottom: 3px solid var(--color-accent)` (the trust rule under primary buttons).\n- **Hover:** background shift toward `--color-primary-dark`, `cursor: pointer`.\n- **Focus:** distinct `outline: 3px solid var(--color-focus); outline-offset: 2px;` ring for keyboard navigation.\n- **Active\u002FPressed:** `transform: scale(0.97)`.\n- **Loading:** disables interactions, prevents double-clicks, renders a CSS spinner or animated Google Icon without distorting button dimensions.\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary feedback styles driven by `--text-success` \u002F `--text-error`.\n\n**2.2 Cards (Features, Pricing tiers, Testimonials)**\n- **Default:** Flexbox layout, `background: var(--color-surface)`, `border-left: var(--trust-rule)`, `box-shadow: var(--shadow-sm)`, `border-radius: var(--radius-sm)`.\n- **Hover:** elevation shift to `--shadow-md` or subtle `transform: translateY(-2px)` (if interactive).\n- **Focus-within:** highlight card borders when a child link\u002Fbutton receives focus.\n- **Loading (Skeleton):** shimmer animation defined in CSS to prevent layout jumps.\n- **Empty State:** structured fallback with a Google Icon and clear guidance text.\n\n**2.3 Forms & Inputs (Final CTA email capture, if included)**\n- **States:** Empty, Focused (focus ring), Filled, Valid (success border\u002Ficon), Invalid (error border, red text, error icon), Disabled, Read-only.\n- **Structure:** Flex container wrapping a label, input field, and dedicated error feedback container.\n\n**2.4 FAQ Accordion**\n- **States:** Opening, Open, Closing — animated via CSS transitions (`transition: var(--transition-normal)`), respecting `prefers-reduced-motion`.\n- **A11y:** semantic `\u003Cdetails>`\u002F`\u003Csummary>` or ARIA `button` + `region` pattern with `aria-expanded`, `aria-controls`; full keyboard operability.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid sizing, no horizontal overflow at any breakpoint.\n- **Smooth animations:** CSS transitions on all state changes, respecting `prefers-reduced-motion`.\n- **Accessibility (a11y) — Section 508 \u002F trust-first is the core identity of this theme:** sufficient contrast in both light and dark modes; never rely solely on color to communicate state; semantic HTML5 elements (`\u003Cheader>`, `\u003Cmain>`, `\u003Csection>`, `\u003Cnav>`, `\u003Cfooter>`); correct ARIA roles\u002Flabels on custom widgets; logical DOM\u002Ffocus order; full keyboard operability; `aria-live` regions for dynamic feedback (form errors, toasts, loading states).\n- **Mandatory visual feedback:** every click, hover, or submission triggers a visible state change.\n- **Destructive actions:** `.btn-danger` or delete actions must be visually distinct (use `--color-accent: #b50909`) in both light and dark themes.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **File structure:** separate `index.html`, `style.css`, and `script.js` files. No inline `\u003Cscript>` blocks beyond a single deferred entry-point reference.\n- **Naming convention:** one consistent convention (BEM, e.g., `.btn--primary`, `.card__title`) across the entire deliverable — never mix conventions.\n- **No unrequested placeholders:** write real, plain-language English copy for every section; no lorem ipsum.\n- **Sections required (in order):**\n  1. **Hero** — headline, subheadline, primary CTA button, secondary link-button; gov band rule along the top of the page.\n  2. **Features** — 3 cards, each with a Google Material Symbol icon, title, and description.\n  3. **How It Works** — 3 numbered steps with connecting visual rhythm.\n  4. **Testimonials** — quote cards with attribution.\n  5. **Pricing** — 3 tiers; middle tier visually emphasized (badge: \"Most popular\"); each with a CTA button.\n  6. **FAQ** — accessible accordion, 5–6 plain-language questions.\n  7. **Final CTA** — full-width band using `--color-primary-dark` background with light text and a primary action button.\n  8. **Footer** — secondary links in multiple columns, plain-language legal\u002Fprivacy links, and the theme toggle must remain reachable in the header nav.\n- **Theme identity:** flat, high-legibility, trust-first federal aesthetic — Public Sans typeface, government blue\u002Fred\u002Fneutral palette, the signature gov band (deep blue + red hairline) on the nav top edge and card left borders, and subtle shadows only (`--shadow-sm`\u002F`--shadow-md`), never heavy depth effects.\n",1791954988724]