[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-462-Scandinavian-Nordic":3},"**Role & Objective:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready **Scandinavian \u002F Nordic landing page** (archetype: `claude-artisan\u002Fminimal-organic` — warm minimalism, hygge, light woods, soft neutrals, human-centered simplicity; modern references: IKEA, Muuto, HAY) **on the first attempt, in a single response, with no truncated sections**. Invent one coherent fictional brand in the Nordic home\u002Flifestyle space (e.g., \"Hjem\", \"Fjord & Form\", \"The Hygge Club\" — a curated Nordic home-goods subscription works well) and keep it consistent everywhere. The page must contain, in order: **Header\u002FNav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.** All user-facing copy must be written in **English** — real, on-brand, hygge-toned copy for every section; lorem ipsum is prohibited.\n\n---\n\n## 1. STRICT RULES & ARCHITECTURE\n\n**1.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in a dedicated `style.css`. The `style=\"...\"` attribute is **forbidden** anywhere in the HTML.\n- All design properties, layout rules, and states are targeted exclusively via class or ID selectors.\n- HTML stays semantic and styling-agnostic: re-theming the page must require editing only `style.css`, never the markup.\n\n**1.2 CSS Variables & Theme Tokens (Light Mode — Default)**\nUse exactly these mandatory tokens, seeded with the Scandinavian palette. Note two explicit exceptions to the source spec: the source's `#ffffff` surface is replaced with `#fefefe` (near-white rule), and the source's plain component classes are reorganized into the layered\u002FBEM system required below.\n\n```css\n:root {\n  \u002F* color *\u002F\n  --bg-primary: #f7f4ef;       \u002F* warm off-white page background — never pure white *\u002F\n  --bg-secondary: #efe9e1;    \u002F* warm sand surface *\u002F\n  --bg-surface: #fefefe;      \u002F* card surface *\u002F\n  --text-primary: #2b2b2b;\n  --text-secondary: #6f6a63;\n  --primary: #3a5a40;          \u002F* forest green *\u002F\n  --primary-contrast: #fefefe;  \u002F* text on primary fills *\u002F\n  --secondary: #a8c5d6;        \u002F* muted sky — decorative fills, pair with dark text *\u002F\n  --accent: #c98a6a;           \u002F* terracotta — decorative fills, icons, borders only *\u002F\n  --accent-text: #96543a;      \u002F* contrast-safe accent for text\u002Flinks *\u002F\n  --wood: #d8b8a0;             \u002F* decorative *\u002F\n  --text-success: #3a6b47;\n  --text-error: #b04a3a;\n  --border-default: #e4ddd2;   \u002F* hairline *\u002F\n  --border-success: #3a6b47;\n  --border-error: #b04a3a;\n  \u002F* radius & shadow *\u002F\n  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px;\n  --shadow-sm: 0 2px 8px rgba(43,43,43,0.05);\n  --shadow-md: 0 6px 20px rgba(43,43,43,0.08);\n  \u002F* spacing, motion, elevation *\u002F\n  --spacing-gap: 24px;\n  --transition-fast: 120ms; --transition-normal: 240ms;\n  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n  --z-dropdown: 100; --z-modal: 200; --z-toast: 300;\n  \u002F* type *\u002F\n  --font-base: 'Poppins', 'Work Sans', system-ui, sans-serif;\n  --font-display: 'Fraunces', Georgia, serif;\n  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem;\n  --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --text-5xl: 4rem;\n  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px;\n  --space-6: 48px; --space-8: 64px; --space-12: 96px; --space-16: 128px;\n}\n```\n\n- **Contrast pairing is mandatory per theme:** every light background token pairs with dark text tokens, every dark background token pairs with light text tokens. `--accent`, `--secondary`, and `--wood` are never used as text colors on light backgrounds — use `--accent-text` for accent-colored text.\n- No hardcoded hex values inside component rules; hex lives only in token definitions.\n\n**1.3 Mandatory Dark Mode Support**\nThe source specification does not declare color modes and requires validation in both light and dark before publishing — therefore dark mode is **mandatory**, using these required warm-charcoal tokens (never pure black):\n\n```css\nhtml.dark {\n  --bg-primary: #201e1b; --bg-secondary: #2a2723; --bg-surface: #262420;\n  --text-primary: #f1ece3; --text-secondary: #a9a29a;\n  --primary: #a5c3a5;          \u002F* sage, lightened for dark surfaces *\u002F\n  --primary-contrast: #1e2b20;\n  --secondary: #a8c5d6; --accent: #d4a183; --accent-text: #d4a183; --wood: #b3947f;\n  --text-success: #a5c3a5; --text-error: #e29a8a;\n  --border-default: #3b372f; --border-success: #a5c3a5; --border-error: #e29a8a;\n  --shadow-sm: 0 2px 8px rgba(0,0,0,0.35); --shadow-md: 0 6px 20px rgba(0,0,0,0.45);\n}\n```\n\n- Replicate this dark block under `@media (prefers-color-scheme: dark)` scoped to `:root:not(.light)` so system-preference users render correctly before JS runs (no FOUC), and under `html.dark` for explicit overrides.\n- Provide a **visible theme toggle** in the header (Material Symbols `light_mode` \u002F `dark_mode`): correct `aria-pressed` state, dynamic `aria-label` (\"Switch to dark mode\" \u002F \"Switch to light mode\"), persistence via `localStorage` (e.g., key `theme`), falling back to `prefers-color-scheme` on first visit. Switching must require zero HTML restructuring — tokens only.\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout structures with Flexbox. Every flex container **defaults to `align-items: center`**; deviations (e.g., `align-items: stretch` for equal-height card rows) are permitted only as explicitly justified exceptions, marked with a CSS comment.\n- Mobile-first: rows collapse to columns below ~768px; prevent horizontal overflow at every viewport ≥320px through `flex-wrap` and `min-width: 0` — never by clipping with `overflow-x: hidden`.\n\n**1.5 Framework Default & Tailwind CSS Integration**\n- Use clean custom CSS organized in Tailwind-style cascade layers: declare `@layer tokens, base, components, sections, utilities;` at the top of `style.css`. (Tailwind itself is optional; if used, every utility must resolve back to the CSS variables.)\n- Expose reusable component classes — `.btn`, `.card`, `.input-group`, `.badge`, `.nav` — that consume only tokens.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n- Load **Google Fonts** via `\u003Clink>` with `preconnect`: **Fraunces** (display serif — all headings) and **Poppins** (body\u002FUI, Work Sans fallback). Bind them to `--font-display` and `--font-base`. No local fonts.\n- Icons: **Google Material Symbols (Rounded variant)** via CDN `\u003Clink>`. **Inline SVGs, local icon files, and emoji-as-icons are forbidden.** Use only valid symbol names (e.g., `eco`, `chair`, `spa`, `coffee`, `forest`, `check`, `star`, `expand_more`, `arrow_forward`, `menu`, `close`, `mail`, `light_mode`, `dark_mode`). Material Symbols has no brand logos — render social links as text links or generic icons with accessible names.\n\n**1.7 Scandinavian Mood & Signature Visual Effects**\n- Hygge aesthetic: generous whitespace (`--space-6`–`--space-12` section rhythm), hairline borders (`--border-default`), soft elevation, organic rounded corners, muted natural tones. No harsh gradients, no neon, no pure black.\n- Signature effects: **frosted header** (semi-transparent `--bg-surface` + `backdrop-filter: blur(12px)`), soft shadows, hover lifts (`translateY(-2px)` + `--shadow-md`), tinted icon chips (`--bg-secondary` circles with `--primary` icons), fluid `clamp()`-based type mapped to the `--text-*` scale.\n\n---\n\n## 2. COMPONENT & SECTION DESIGN SPECIFICATIONS\n\n**2.1 Button Component Requirements** — all states as CSS classes (JS toggles classes\u002Fattributes only):\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; `--font-display` 700.\n- **Hover:** brightness\u002Fshadow shift, `cursor: pointer`. **Focus-visible:** distinct ring using `--accent` (2px outline, 2px offset). **Active:** `transform: scale(0.97)`.\n- **Loading (`.is-loading`):** interactions disabled, double-clicks prevented, spinning Material `progress` icon via CSS rotation, button dimensions unchanged (no layout shift).\n- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`. **Success\u002FError (`.is-success` \u002F `.is-error`):** feedback driven by `--text-success` \u002F `--text-error` with check\u002Ferror icons.\n- Variants (BEM): `.btn--primary` (`--primary` bg + `--primary-contrast` text), `.btn--ghost` (`--bg-surface` + hairline border), `.btn--accent`, and `.btn--danger` (muted brick red, visually distinct in **both** themes).\n\n**2.2 Card Component Requirements**\n- **Default:** flex column, `--bg-surface`, hairline border, `--radius-md`\u002F`--radius-lg`, `--shadow-sm`.\n- **Hover:** elevation shift + `translateY(-2px)`. **Focus-within:** border shifts to `--primary` when a child link\u002Fbutton is focused.\n- **Loading (skeleton):** define `.skeleton` shimmer keyframes in CSS (surface-2 blocks matching final dimensions — no layout jumps). **Empty state:** define `.card--empty` — centered Material icon + clear guidance text.\n\n**2.3 Form & Input Requirements** (newsletter signup in the Final CTA)\n- Structure: flex-column `.input-group` = `\u003Clabel>` + `\u003Cinput type=\"email\" autocomplete=\"email\">` + dedicated error feedback container.\n- States via classes: empty, focused (2px `--primary` outline ring), filled, valid (`--border-success` + check icon), invalid (`--border-error`, `--text-error` message + error icon, `aria-invalid=\"true\"`, message linked via `aria-describedby`, announced in an `aria-live=\"polite\"` region), disabled, read-only.\n- Real validation in `script.js` (`novalidate` + custom logic); submit → button loading (~1.2s simulated) → success state with inline confirmation. No `alert()`\u002F`confirm()`.\n\n**2.4 FAQ Accordion Requirements**\n- Each item: `\u003Ch3>\u003Cbutton aria-expanded aria-controls>\u003C\u002Fbutton>\u003C\u002Fh3>` + panel with `role=\"region\"` + `aria-labelledby`; `expand_more` icon rotates 180° on open; height animates via CSS (`grid-template-rows: 0fr → 1fr`) with `--transition-normal`; fully keyboard operable; first item open by default; instant toggle under reduced motion.\n\n**2.5 Modal \u002F Popup Requirements** (only if a dialog genuinely serves the design, e.g., plan details)\n- `role=\"dialog\" aria-modal=\"true\" aria-labelledby`; backdrop overlay; centered flex container (`align-items: center`); open\u002Fclose animated via CSS classes; focus trapped inside and returned on close; closes via `Esc` and overlay click; layered at `--z-modal`; Google icon close button; loading\u002Fsuccess\u002Ferror states for any async content.\n\n**2.6 Pricing Billing Toggle Requirements**\n- Segmented Monthly\u002FYearly control built as a `\u003Cfieldset>` + `\u003Clegend>` with two styled radio inputs (keyboard-native); price text swaps with a `--transition-fast` fade; the change is announced via a polite `aria-live` region; yearly state shows a \"Save 20%\" badge.\n\n**2.7 Page Section Blueprint**\n- **Global:** semantic landmarks (`header`, `nav`, `main`, `section`, `footer`); exactly one `\u003Ch1>` (Hero); each section has an `\u003Ch2>` and `aria-labelledby` + anchor id (`#features`, `#how-it-works`, `#pricing`, `#faq`) with `scroll-margin-top` for the sticky header; a visually hidden \"Skip to content\" link; smooth scrolling disabled under reduced motion.\n- **Header\u002FNav:** sticky, frosted blur; brand wordmark in Fraunces; links to Features, How It Works, Pricing, FAQ; theme toggle; primary CTA. Mobile: links collapse into a hamburger (`menu`) opening a panel at `--z-dropdown` with `aria-expanded`, closing on link click and `Esc`.\n- **Hero:** two-column flex (stacks on mobile): eyebrow `.badge`, `--text-5xl` Fraunces headline, supporting paragraph in `--text-secondary`, `.btn--primary` + `.btn--ghost` pair, trust row (star icons + text, never icon-only). Right column: imagery via `https:\u002F\u002Fpicsum.photos\u002Fseed\u002F\u003Cdescriptive-seed>\u002F800\u002F640` with meaningful `alt`, `--radius-lg`, hairline border, `--shadow-md`, fixed `aspect-ratio` (no layout shift) — or a CSS-composed layered visual in wood\u002Fsky\u002Fsand tones.\n- **Features (3 cards):** flex-wrap row, equal height (documented stretch exception); each card: Material icon chip, `\u003Ch3>`, description (e.g., sustainable materials \u002F functional timeless design \u002F everyday calm). Hover lift + focus-within per 2.2.\n- **How It Works (3 steps):** numbered 01\u002F02\u002F03 with a hairline connector on desktop (hidden on mobile), step icon, `\u003Ch3>`, text.\n- **Testimonials (3):** quote cards with `figure`\u002F`blockquote`\u002F`cite`, star row (`star` icons `aria-hidden` + visually hidden \"Rated 5 out of 5\" text), avatar (CSS initials circle in tinted tones or picsum seed), name + role.\n- **Pricing (3 tiers):** plausible prices (e.g., Essential \u002F Classic \u002F Complete); middle tier featured — `--primary` bg with `--primary-contrast` text and a \"Most popular\" `.badge` (`--accent` bg + `--text-primary`, contrast-checked in both themes); feature lists with `check` icons; per-tier CTA; billing toggle per 2.6.\n- **FAQ:** 5–6 real Q&As (shipping, materials, returns, sustainability, billing) per 2.4.\n- **Final CTA:** full-bleed band on `--primary` with light text (contrast pairing), Fraunces headline, inline email form per 2.3 (flex row → column on mobile) with loading → success feedback announced via `aria-live`.\n- **Footer:** `--bg-secondary` band; brand + tagline; secondary link groups (Product, Company, Support) as flex-wrap columns; social text links with `aria-label`s; bottom bar with copyright and Privacy\u002FTerms links. Every link is a real, focusable anchor.\n\n---\n\n## 3. CORE UX & MICRO-INTERACTION RULES\n\n- **Responsive by default:** fluid `clamp()` type, flex-wrap everywhere, zero horizontal overflow from 320px up.\n- **Smooth animations:** every state change transitions with `var(--transition-normal)` \u002F `var(--transition-fast)` and `var(--ease-standard)`; under `prefers-reduced-motion: reduce`, disable transitions\u002Fanimations (spinner → static \"Loading…\" label, shimmer → opacity pulse, accordion instant).\n- **Accessibility (a11y):** WCAG AA contrast in both light and dark modes (≥4.5:1 body text, ≥3:1 large text\u002FUI); never rely on color alone — pair color with icons, text, or borders; semantic HTML5; correct ARIA roles\u002Flabels on all custom widgets; logical DOM\u002Ffocus order; full keyboard operability (no mouse-only interactions); `aria-live` regions for form feedback, price changes, and loading states; visible `:focus-visible` rings on all interactive elements.\n- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change. No dead buttons — anchors scroll, forms validate, toggle switches.\n- **Destructive actions:** `.btn--danger` must be visually distinct in both themes (define it even if unused).\n- No console errors, no broken links or images, no layout shift; simulate async operations with `setTimeout` — never real network posts.\n\n---\n\n## 4. DELIVERABLE & OUTPUT FORMAT\n\n- **File structure:** three separate files — `index.html`, `style.css`, `script.js`. The HTML contains exactly one script reference: `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`. Zero inline styles, zero additional inline scripts. `\u003Chtml lang=\"en\">` with title, meta description, and viewport meta.\n- **Naming convention:** BEM everywhere (`.card`, `.card__title`, `.card--featured`, `.btn--primary`); never mix conventions.\n- **CSS organization:** `@layer tokens → base → components → sections → utilities`; tokens at the top.\n- **Copy:** all user-facing text in English, real and on-brand (calm, warm, plain-spoken hygge tone — e.g., \"Soft living, made simple.\"). Lorem ipsum is prohibited. Photographic placeholders are permitted only via `picsum.photos` with descriptive seeds, `alt` text, `loading=\"lazy\"` for below-the-fold images, and fixed aspect ratios.\n- **Output:** the complete code for all three files in one response, on the first attempt — no TODOs, no placeholders where real copy is required, no external JS dependencies beyond Google Fonts and Material Symbols. Before finishing, self-validate both light and dark modes (toggle behavior, persistence, contrast) as the source specification requires.\n",1791954987544]