[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-647-Airbnb-Coral-Marketplace":3},"# SYSTEM PROMPT — CODING AGENT TASK: BUILD THE \"AIRBNB CORAL MARKETPLACE\" LANDING PAGE\n\n**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-quality single-page landing page described below in one pass. Do not ask clarifying questions; where this spec grants freedom (final English copy wording, image seeds, copy details), decide confidently and deliver real, finished content.\n\n**Product:** \"CoralStay\" — a warm, photography-first travel marketplace landing page inspired by Airbnb's 2024–2026 design language: near-white canvas, Rausch Red as the single iconic accent, warm near-black text (never pure black), rounded terminals, three-layer shadows, generous radii, and circular controls.\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.\n* **Class Selectors Only:** All design properties, layout rules, and states must live in `style.css`, targeted via class or ID selectors. No inline `onclick`-style handlers either — all JavaScript behavior is attached via `addEventListener` in `script.js`.\n* **Minimal HTML Modifications:** Keep HTML semantic and style-agnostic. Changing the theme must require editing only `style.css`.\n\n**1.2 CSS Variables & Theme Tokens**\nStore every visual token in `:root` (light) and `:root[data-theme=\"dark\"]` (dark). Never hardcode a raw color, radius, shadow, duration, or z-index outside the token definitions.\n\n```css\n:root {\n  \u002F* Color — Light (default) *\u002F\n  --primary: #ff385c;              \u002F* Rausch Red — the singular iconic accent *\u002F\n  --primary-hover: #d70466;\n  --accent-text: #d70466;          \u002F* Use whenever Rausch appears as text on the light canvas (AA-safe) *\u002F\n  --gradient-primary: linear-gradient(to right, #e61e4d, #e31c5f, #d70466); \u002F* iconic CTA gradient *\u002F\n  --secondary: #460479;            \u002F* Luxe Purple — reserved for the premium pricing tier *\u002F\n  --bg-primary: #fefefe;\n  --bg-secondary: #f2f2f2;         \u002F* Light Surface *\u002F\n  --text-primary: #222222;         \u002F* warm near-black — never #000000 *\u002F\n  --text-secondary: #6a6a6a;\n  --text-success: #008a05;\n  --text-error: #c13515;\n  --border-default: #c1c1c1;\n  --border-error: #c13515;\n  --border-success: #008a05;\n  --focused: #3f3f3f;              \u002F* hover shade for near-black fills *\u002F\n  --ring: rgba(255, 56, 92, 0.28); \u002F* input focus ring tint *\u002F\n  --photo-filter: none;\n\n  \u002F* Radii *\u002F\n  --radius-sm: 8px;     \u002F* buttons, inputs *\u002F\n  --radius-md: 14px;    \u002F* badges *\u002F\n  --radius-lg: 20px;    \u002F* cards *\u002F\n  --radius-xl: 32px;    \u002F* large surfaces: hero card, CTA band, search pill *\u002F\n  --radius-circle: 50%; \u002F* carousel controls, avatars, logo, icon buttons *\u002F\n\n  \u002F* Three-layer shadows *\u002F\n  --shadow-sm: 0 0 0 1px rgba(0,0,0,0.02), 0 2px 6px rgba(0,0,0,0.04);\n  --shadow-md: 0 0 0 1px rgba(0,0,0,0.02), 0 2px 6px rgba(0,0,0,0.04), 0 4px 8px rgba(0,0,0,0.1); \u002F* canonical three-layer *\u002F\n  --shadow-lg: 0 0 0 1px rgba(0,0,0,0.02), 0 6px 16px rgba(0,0,0,0.06), 0 12px 24px rgba(0,0,0,0.12); \u002F* hover lift *\u002F\n\n  \u002F* Spacing, motion, elevation *\u002F\n  --spacing-gap: clamp(1.25rem, 2.5vw, 2rem);\n  --spacing-section: clamp(4rem, 10vw, 7rem);\n  --transition-fast: 150ms;\n  --transition-normal: 300ms;\n  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n  --z-header: 100; --z-dropdown: 200; --z-modal: 300; --z-toast: 400;\n}\n```\n\n* **Contrast Pairing:** Every light background token must pair with a dark text token and every dark background token with a light text token — in every theme. Verify ≥ 4.5:1 (AA) for body text. Rausch Red is a fill\u002Faccent color first; when it appears as text, use `--accent-text`. Any body-size white text placed on `--gradient-primary` or `--primary` must also verify ≥ 4.5:1 — bias the gradient toward the `#d70466` end and use weight ≥ 600 where needed.\n* **Canvas Exception:** The source style requests pure white `#ffffff`; per the mandatory token rule, the canvas must instead be `--bg-primary: #fefefe` (visually near-identical on the warm canvas). Do not use `#ffffff` for surfaces.\n* **Dark tokens:** Under `:root[data-theme=\"dark\"]` (and duplicated inside `@media (prefers-color-scheme: dark) { :root:not([data-theme=\"light\"]) }`) define: `--primary: #ff385c; --primary-hover: #ff5a76; --accent-text: #ff5a76; --secondary: #c39bef; --bg-primary: #1a1a1a; --bg-secondary: #272727; --text-primary: #f7f7f7; --text-secondary: #b3b3b3; --text-success: #00c26e; --text-error: #ff8177; --border-default: #3f3f3f; --border-error: #ff8177; --border-success: #00c26e; --focused: #6a6a6a; --ring: rgba(255,56,92,0.45); --photo-filter: brightness(0.85);` and replace shadow ring layers with `0 0 0 1px rgba(255,255,255,0.06\u002F0.08)` plus deeper black blurs.\n\n**1.3 Mandatory Dark Mode Support**\n* **Implementation:** Dark mode must be fully implemented per the tokens above via the `[data-theme=\"dark\"]` class on `\u003Chtml>` with a `prefers-color-scheme` fallback when no stored preference exists. Background\u002Ftext variables must switch with zero HTML restructuring.\n* **Persistence:** Read `localStorage` key `coralstay-theme` on load; fall back to `matchMedia('(prefers-color-scheme: dark)')`; listen for system changes only when no stored preference exists.\n* **Visible Toggle:** A circular icon button in the header (Material Symbols `light_mode` \u002F `dark_mode`) with dynamic `aria-pressed` (true = dark active) and `aria-label` (\"Switch to dark theme\" \u002F \"Switch to light theme\"); every click produces a visible change.\n* **Theme Exception:** The source theme lists Dark Mode as \"Not Recommended\" — per the mandatory architecture it must still be fully implemented and toggleable. Treat light mode as the default\u002Fprimary design; dark mode is a tasteful warm-dark adaptation (near-black `#1a1a1a` canvas, unchanged Rausch accent, dimmed photography via `--photo-filter`).\n\n**1.4 Flexbox Layout & Mobile-First Alignment**\n* **Default Alignment Rule:** Every flex container must default to `align-items: center` unless a spec below justifies an exception (e.g., `.input-group` stacks, step connectors). Mark each exception with a CSS comment explaining why.\n* **Mobile-First:** Author base styles for ≤ 640px, then enhance at `640px`, `768px`, `1024px`, `1280px`. Rows must convert to columns on small viewports. No horizontal scrolling at any width from 320px to 1920px — achieve this with `min-width: 0` on flex children, `max-width: 100%` on media, and fluid `clamp()` sizing (never `overflow-x: hidden` as a band-aid).\n* **Container:** One `.container` utility, `max-width: 1280px`, `padding-inline: clamp(1rem, 4vw, 3rem)`, `margin-inline: auto`.\n\n**1.5 Framework & Naming Convention**\n* Use **clean custom CSS** in `style.css` (optionally organized in `@layer` blocks: tokens, base, layout, components, utilities). Do not use Tailwind or any framework.\n* **One convention only — BEM** (`block__element--modifier`) for every component class: `.btn`, `.btn--primary`, `.card`, `.card--featured`, `.faq__trigger`, `.site-header__toggle`, etc. Never mix conventions.\n\n**1.6 Typography & Icons (Google Fonts Mandatory)**\n* **Font Exception:** Airbnb's Cereal VF is proprietary and unavailable on Google Fonts — per the mandatory Google Fonts rule, load **Figtree** (variable, rounded warm terminals, the closest open approximation of Cereal) and bind it to `--font-base: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif` (keeping the source's `system-ui` only as the first fallback).\n* **Link tags:** Include Google Fonts preconnects, `Figtree:wght@400..800`, and Material Symbols Rounded: `family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,300..600,0..1,0`.\n* **Weights:** Use the 500–700 range only — body 500, subheadings\u002Flabels\u002Fbuttons 600, display\u002Fheadings 700. (Weight 400 permitted solely for legal fine print.)\n* **Negative Tracking:** Apply negative letter-spacing to all headings for intimacy, within the absolute range **−0.18px to −0.44px, never beyond**: H1\u002Fdisplay −0.44px; H2 −0.38px; H3 −0.30px; 22px section titles −0.44px (source anchor); compact headings may relax toward −0.18px. Body text: no negative tracking.\n* **Icons:** Google Material Symbols **Rounded** variant only, via `\u003Cspan class=\"material-symbols-rounded\" aria-hidden=\"true\">icon_name\u003C\u002Fspan>`. Raw inline SVGs and local icon files are forbidden. Brand-icon exception: since Airbnb's \"bélo\" logo cannot be reproduced as SVG, build the logo as a circular (`--radius-circle`) Rausch-red disc containing the white Material Symbol `house` plus the wordmark \"CoralStay\" at weight 700 with negative tracking.\n\n---\n\n## 2. PAGE STRUCTURE & SECTION SPECIFICATIONS\n\nAll user-facing copy is written **in English**, in a warm, confident marketplace voice. Write real, finished copy — lorem ipsum is forbidden. Photography uses seeded placeholders only: `https:\u002F\u002Fpicsum.photos\u002Fseed\u002F\u003Cseed>\u002F\u003Cw>\u002F\u003Ch>` with descriptive `alt` text where the image is content, `alt=\"\"` where decorative.\n\n**2.1 Global Shell & Sticky Header**\n* Semantic landmarks: skip-link, `\u003Cheader>`, `\u003Cnav aria-label=\"Primary\">`, `\u003Cmain>`, `\u003Cfooter contentinfo>`. One `\u003Ch1>` (Hero). Each section is `\u003Csection id=\"...\" aria-labelledby=\"...\">` with `scroll-margin-top: 88px` for anchor navigation.\n* **Sticky header** (`--z-header`), background `--bg-primary`, gains `.site-header--scrolled` (with `--shadow-sm`) after 8px of scroll. Contents (flex row, `align-items: center`, wrapping on small screens): logo link (`aria-label=\"CoralStay — home\"`); nav links \"Stays\", \"Experiences\", \"Host\" (anchors to page sections; hover = `--bg-secondary` pill with `--radius-xl`, focus-visible ring); a small language dropdown (circular `language` icon button with `aria-expanded`\u002F`aria-controls`, panel at `--z-dropdown` with 3 options, closes on `Esc`\u002Foutside click, focus returns to the trigger); the **theme toggle**; and a `.btn--dark` \"Become a host\" CTA (min 44px touch target).\n* **Mobile:** nav links collapse behind a circular `menu`\u002F`close` icon button with `aria-expanded`, an animated disclosure panel, `Esc` to close, and focus management (into panel on open, back to toggle on close).\n\n**2.2 Hero (photography-first)**\n* Full-width hero: a large travel photograph (picsum seed `coralstay-hero`, 1920×1080, eager, `fetchpriority=\"high\"`, `alt=\"\"`, `object-fit: cover`) with a subtle bottom scrim for depth.\n* Floating content card — `--bg-primary`, `--radius-xl`, `--shadow-lg`, `padding: clamp(1.5rem, 4vw, 3rem)`, `max-width: 640px`, left-aligned inside the container — containing: an optional eyebrow badge (`--radius-md`, `--bg-secondary`, `--text-secondary`, weight 600, e.g., \"Trusted by 2M+ travelers\"); the `\u003Ch1>` (display size `clamp(2.5rem, 5vw, 3.75rem)`, weight 700, −0.44px tracking, e.g., \"Find a stay that feels made for you\"); a one-sentence subcopy in `--text-secondary`; and the **search bar**.\n* **Search bar:** a `--radius-xl` pill on `--bg-secondary`, `padding: 8px`, flex row → column below 640px, three fields (\"Where\" text input placeholder \"Where are you going?\", \"Dates\" placeholder \"Add dates\", \"Guests\" placeholder \"Add guests\"), visually hidden labels, 1px `--border-default` dividers between fields, and a circular (`--radius-circle`, 48px) `--gradient-primary` submit button with the white `search` icon and `aria-label=\"Search stays\"`. All input focus states per §3.3.\n\n**2.3 Features — 3 Cards**\n* Section `\u003Ch2>` (weight 700, −0.38px) plus a one-line lede; grid `gap: var(--spacing-gap)`, 1 column → 3 columns at ≥ 768px.\n* Each `.card--feature`: `--bg-primary`, `--radius-lg`, `--shadow-sm` → hover `--shadow-lg` + `translateY(-2px)`; `padding: clamp(1.5rem, 3vw, 2rem)`; a 48px circular icon chip (`--bg-secondary` disc, Rausch Material icon: `verified`, `event_available`, `support_agent`); `\u003Ch3>` weight 600; body copy in `--text-secondary`; a \"Learn more\" text link with the `arrow_forward` icon (hover: text turns `--accent-text`, arrow translates 2px). Card hover and `:focus-within` both highlight the card (§3.2).\n\n**2.4 How It Works — 3 Steps**\n* Full-width band on `--bg-secondary` (section padding `--spacing-section`). Flex row at ≥ 1024px with a 1px `--border-default` connector line between steps (pseudo-element); stacked column on mobile with connectors hidden.\n* Each step: a Rausch-red circular number chip (01 \u002F 02 \u002F 03, white, weight 700), an optional Material icon, an `\u003Ch3>` weight 600, and supporting copy in `--text-secondary`. Content direction: search & compare → book instantly → travel covered end-to-end.\n\n**2.5 Testimonials**\n* Section header is a flex row (`align-items: center`): `\u003Ch2>` left, carousel controls right. Cards sit in a horizontal scroll-snap track on \u003C 1024px (snap-align, styled hidden scrollbar) and a 3-column grid at ≥ 1024px.\n* Each `.card--testimonial`: `--bg-primary`, `--radius-lg`, `--shadow-sm`, hover `--shadow-lg`; a star row of five filled Material `star` icons in `--primary` (`font-variation-settings: 'FILL' 1`, `aria-hidden`) with an `sr-only` \"Rated 5 out of 5\"; the quote in `--text-primary` weight 500; an author row with a 48px circular avatar (picsum, `alt=\"\"`), name at weight 600, and meta line in `--text-secondary` (e.g., \"Stayed in Lisbon · March 2025\").\n* **Carousel controls:** circular 44px buttons (`--radius-circle`, `--bg-primary`, 1px `--border-default`, `--shadow-sm`), `chevron_left`\u002F`chevron_right` icons in `--text-primary` → `--primary` on hover, `aria-label=\"Previous testimonials\"` \u002F `\"Next testimonials\"`, `scrollBy`-driven, disabled (opacity 0.5, `cursor: not-allowed`) at track ends.\n\n**2.6 Pricing — 3 Tiers**\n* `\u003Ch2>` + lede; grid 1 → 3 columns at ≥ 1024px, `gap: var(--spacing-gap)`, `align-items: center` with the featured card elevated.\n* Tier 1 \"Explorer\" (free) and Tier 3 \"Luxe\" are `.pricing-card` (`--bg-primary`, `--radius-lg`, `--shadow-sm`, generous padding) with `.btn--ghost` full-width CTAs and check-item lists (Material `check` in `--text-secondary`).\n* **Tier 2 \"Traveler Plus\" is `.pricing-card--featured`:** `--shadow-md`, larger padding, a \"Most popular\" badge (`--gradient-primary`, white text, `--radius-md`, weight 600) overlapping the top edge, `check` icons in `--accent-text`, and a full-width `.btn--primary` CTA. The featured card must remain visually dominant in both themes.\n* **Tier 3 \"Luxe\"** carries the Luxe Purple accent: heading and checks use `--secondary` (`#460479` light \u002F `#c39bef` dark), badge tinted purple — never replacing Rausch as the primary accent.\n* Prices at weight 700 with −0.44px tracking, \"\u002Fmonth\" suffix in `--text-secondary`. Write real tier names, blurbs, and 4–5 features per tier.\n\n**2.7 FAQ**\n* Centered column (`max-width: 760px`). 5 real questions (safety, cancellations, host payouts, service fees, support). Accordion behavior per §3.4.\n\n**2.8 Final CTA**\n* A full-width band whose inner container is a `--radius-xl` card filled with `--gradient-primary`, `padding: clamp(2.5rem, 6vw, 4rem)`, centered flex column.\n* White `\u003Ch2>` (weight 700, −0.44px), supporting line at `rgba(255,255,255,0.9)`, and an email capture form: visible label (\"Email address\"), white input (`--bg-primary`, `--text-primary`, `--radius-sm`) and a `.btn--on-accent` (white fill, `--text-primary`, weight 700, `--radius-sm`) \"Get early access\" — row on ≥ 640px, column below. Simulate submission locally: loading → success (button swaps to `check` icon via `.is-success`, polite `aria-live` message \"You're on the list — check your inbox.\") or error (invalid email → error border, error icon, message \"Please enter a valid email address.\"). Include a short privacy note in translucent white. Verify white-on-gradient contrast per §1.2.\n\n**2.9 Footer — Secondary Links**\n* Background `--bg-secondary`. Top area: brand block (logo + one-line tagline in `--text-secondary`) beside four link columns — \"Explore\", \"Company\", \"Support\", \"Legal\" — each with a weight-600 `--text-primary` column title and 4–5 secondary links (`--text-secondary`, weight 500; hover\u002Ffocus: `--text-primary` + underline offset). Link `href=\"#\"` is acceptable only here, and every link must still show hover\u002Ffocus feedback.\n* Bottom bar (`border-top: 1px var(--border-default)`, flex, wrap, space-between): \"© 2025 CoralStay, Inc.\", locale\u002Fcurrency buttons (circular `language` icon + \"English (US) · USD\"), and text links \"Instagram\", \"X\", \"YouTube\" (no brand SVG icons — text only).\n\n---\n\n## 3. COMPONENT DESIGN SPECIFICATIONS\n\n**3.1 Buttons**\n* **Base `.btn`:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `--radius-sm`, weight 600, `transition: all var(--transition-fast) var(--ease-standard)`.\n* **Variants:** `.btn--primary` (`--gradient-primary`, white text), `.btn--dark` (`--text-primary` fill, white text, hover `--focused`), `.btn--ghost` (transparent, 1px `--border-default`, hover `--bg-secondary`), `.btn--on-accent` (white fill for use on the gradient band), `.btn--danger` (built from `--text-error`; distinct in both themes; define it even though this page has no destructive action).\n* **Hover:** brightness\u002Flift shift with `cursor: pointer`. **Focus-visible:** `box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--text-primary)` — clearly visible in both themes. **Active:** `transform: scale(0.97)`.\n* **Loading (`.is-loading`):** `aria-busy=\"true\"`, pointer-events disabled to prevent double-clicks, label made transparent with an absolutely-centered CSS border spinner — button dimensions must not change. **Disabled\u002F`[disabled]`:** `opacity: 0.5`, `filter: grayscale(1)`, `cursor: not-allowed`. **Success\u002FError:** `.is-success` \u002F `.is-error` swap in Material `check` \u002F `close` icons tinted with `--text-success` \u002F `--text-error`, always paired with an `aria-live` announcement — never color alone.\n\n**3.2 Cards**\n* **Default:** flexbox layout, `--bg-secondary`\u002F`--bg-primary` surfaces with `--radius-lg`, subtle 1px borders or `--shadow-sm`, all values from tokens.\n* **Hover:** `--shadow-lg` + `translateY(-2px)` (photography scale 1.02 on listing-style imagery). **Focus-within:** card border\u002Fring highlights when a child link or button receives focus.\n* **Skeleton (`.card--skeleton`):** define a CSS shimmer gradient animation for loading states that matches final card dimensions (no layout jump). **Empty (`.card--empty`):** structured fallback with a Google icon and one line of guidance text.\n* **Wishlist hearts:** circular white translucent buttons on hero\u002Ftestimonial imagery; toggling flips `aria-pressed` and switches the Material heart to filled via `font-variation-settings: 'FILL' 1` + `--primary` color — visible feedback in both themes.\n\n**3.3 Forms & Inputs**\n* **Structure:** `.input-group` — flex column wrapping a visible (or `sr-only` where the spec says so) `\u003Clabel>`, the input, and a dedicated `.input-group__error` feedback container.\n* **States — all via CSS classes\u002Fattributes:** empty; focus (2px `--ring` via box-shadow, Rausch-tinted); filled; valid (`--border-success` + `check` icon); invalid (`--border-error`, `--text-error` message, `error` icon, `aria-invalid=\"true\"`, `aria-describedby`); disabled (opacity 0.5, `--bg-secondary`, `cursor: not-allowed`); read-only (flat `--bg-secondary`, no focus ring).\n* All inputs: min-height 44px, `--radius-sm`, weight 500, token-driven colors only.\n\n**3.4 Accordion (FAQ)**\n* Each item: a full-width `\u003Cbutton class=\"faq__trigger\">` (flex, `align-items: center`, `justify-content: space-between`, `cursor: pointer`) with `aria-expanded` and `aria-controls`, question at weight 600 in `--text-primary`, trailing `expand_more` icon rotating 180° on open (`var(--transition-normal)`).\n* Panel: animate open\u002Fclose with the CSS `grid-template-rows: 0fr → 1fr` technique (plus a hidden inner overflow wrapper) — no JS height math. Dividers: `1px solid var(--border-default)`. Open item gets a subtle background shift. Keyboard operable by default (native buttons).\n\n**3.5 Overlays, Toasts & Stacking**\n* No modal is in scope, but `--z-modal` must still be defined. Define a `.toast` region (`role=\"status\"`, `aria-live=\"polite\"`, `--z-toast`, `--shadow-md`, `--radius-md`) used for form feedback. The language dropdown is the only overlay: `--z-dropdown`, animated via CSS, closes on `Esc` and outside click.\n\n---\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n* **4.1 Responsive by Default:** Fluid `clamp()` sizing, the breakpoints in §1.4, zero horizontal overflow, images with `aspect-ratio` + `object-fit: cover` to prevent layout shift; `loading=\"lazy\"` + `decoding=\"async\"` on all imagery below the hero.\n* **4.2 Smooth Animations:** Every state change transitions with `var(--transition-fast)` or `var(--transition-normal)` and `var(--ease-standard)`. Inside `@media (prefers-reduced-motion: reduce)`: disable transforms, shimmer, and `scroll-behavior: smooth`; keep instant color transitions only.\n* **4.3 Accessibility:** AA contrast in both light and dark modes (verify every token pair). Never rely on color alone — pair icons\u002Ftext with every state. Semantic HTML5, logical DOM\u002Ffocus order, visible focus on every interactive element, full keyboard operability (menu, dropdown, carousel, accordion, forms), `aria-live` for dynamic feedback, correct ARIA on all custom widgets, and `sr-only` text where icons carry meaning.\n* **4.4 Mandatory Visual Feedback:** Every click, hover, focus, and submission must produce a visible state change. Anchor navigation uses CSS smooth scrolling with `scroll-margin-top` compensation.\n* **4.5 Destructive Actions:** `.btn--danger` must be visually distinct in both themes per §3.1.\n\n---\n\n## 5. DELIVERABLE & OUTPUT FORMAT\n\n* **File Structure:** Three files — `index.html`, `style.css`, `script.js`. The HTML contains exactly one script reference: `\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>`. No inline `\u003Cscript>` blocks, no inline styles, no inline event handlers.\n* **Naming Convention:** BEM only, consistent across all three files.\n* **No Unrequested Placeholders:** All copy is real, final, English marketplace copy authored by you (headlines, features, steps, testimonials, tiers, FAQs, footer). Lorem ipsum is forbidden. Seeded picsum photography is permitted only because imagery was unspecified, and every meaningful image needs descriptive alt text. The page must render and function with zero console errors from 320px to 1920px wide, in both themes, with and without a stored theme preference.\n",1791954990449]