# Tilda Speech Launch Landing Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Build a one-block HTML/CSS/JS landing page for Tilda Zero Block promoting local speech launch services for children aged 1.5–4.

**Architecture:** A single self-contained HTML block with a unique wrapper `.ks-speech-landing-v1`. All CSS is scoped under the wrapper. No external libraries, no edits to `body` or `html`, and JS is optional/minimal in an IIFE only for smooth scrolling/form UX.

**Tech Stack:** Plain HTML, scoped CSS, vanilla JavaScript IIFE.

**Spec:** Approved in chat on 2026-08-20: hybrid warm expert + problem/solution concept.

## Global Constraints

- Everything must be inside one HTML block for Tilda Zero Block.
- No external libraries.
- Styles must be isolated through a unique wrapper.
- Do not style or modify `body`/`html`.
- Responsive breakpoints must support 320/480/768/1200 widths.
- JavaScript only if needed, wrapped in IIFE.
- Must not break Tilda styles.
- Target audience: mothers aged 22–45.
- Goal: leave a consultation request.
- Theme: speech launch for children aged 1.5–4 in one local city.

---

### Task 1: Build semantic HTML structure

**Files:**
- Create: `artifacts/tilda-speech-launch-landing.html`

**Interfaces:**
- Produces: one copy-pasteable HTML snippet with wrapper `ks-speech-landing-v1`.

- [ ] Create the wrapper and sections: hero, signs, help, process, trust, result, final CTA/form.
- [ ] Use Russian conversion-focused copy approved in brainstorming.
- [ ] Keep form fields short: name, phone, child age, optional comment.

### Task 2: Add isolated responsive CSS

**Files:**
- Modify: `artifacts/tilda-speech-launch-landing.html`

**Interfaces:**
- Consumes: wrapper `ks-speech-landing-v1`.
- Produces: scoped CSS with responsive behavior at 320/480/768/1200.

- [ ] Add all styles under `.ks-speech-landing-v1`.
- [ ] Avoid global selectors for `body`, `html`, `a`, `button`, `input` outside wrapper.
- [ ] Implement mobile-first responsive grids and typography.
- [ ] Use warm expert minimalism: cream background, coral CTA, sage accents, graphite text.

### Task 3: Add safe vanilla JS only for UX

**Files:**
- Modify: `artifacts/tilda-speech-launch-landing.html`

**Interfaces:**
- Consumes: CTA links and form inside wrapper.
- Produces: IIFE-scoped JS for smooth anchor scroll and non-breaking form submit placeholder.

- [ ] Wrap JS in `(function(){ ... })();`.
- [ ] Scope DOM queries to `.ks-speech-landing-v1`.
- [ ] Smooth-scroll internal CTA anchors.
- [ ] On form submit, prevent default and show a small success message; note that in real Tilda this can be connected to Tilda forms/CRM.

### Task 4: Verify snippet constraints

**Files:**
- Read: `artifacts/tilda-speech-launch-landing.html`

**Interfaces:**
- Consumes: final HTML snippet.
- Produces: verification that constraints are satisfied.

- [ ] Check there are no external library URLs.
- [ ] Check no `body` or `html` selectors are styled.
- [ ] Check wrapper class is present and CSS is scoped.
- [ ] Check JS is inside an IIFE.
- [ ] Check adaptive media queries include 480, 768, 1200 and base supports 320.