From 12cb33f4829a4e1bd2e60cd95fdb9e68a72f7d41 Mon Sep 17 00:00:00 2001
From: qxZap <MileaMihai@outlook.it>
Date: Tue, 8 Sep 2026 14:58:20 +0300
Subject: [PATCH] feat: render the waitlist form natively so it themes in light
 and dark

The waitlist form was a cross-origin Tally iframe, which meant it could not
follow the site theme: in dark mode its labels rendered near-black on the
near-black page and the fields read as grey on grey.

Every route to theming the embed was tested against the live form, and all of
them are closed:

- CSS into the frame is blocked by same-origin policy.
- Tally's postMessage protocol is outbound-only (FormLoaded, FormPageView,
  FormSubmitted, FormRedirect, viewport height). No inbound command exists,
  so the frame cannot be driven from the parent either.
- There is no theme or color URL parameter; the palette lives server-side in
  the form's settings.styles.
- Tally's custom CSS is a paid feature and this workspace is on FREE.
- color-scheme does not propagate into the frame: with the OS in light mode
  and color-scheme:dark on the iframe, prefers-color-scheme inside still
  reports light. Tally's own embed.js additionally force-sets
  iframe.style.colorScheme = 'light' whenever transparentBackground=1.

So the form is now our own markup, POSTed straight to
api.tally.so/forms/<id>/respond, which takes no API key and reflects our
origin in its CORS headers. Same Tally form, same dashboard, same downstream
pipeline, but the markup is ours and themes with the rest of the site.

Verified end to end: Tally returns 200 with a submissionId, and success routes
to /thank-you client-side rather than following Tally's absolute production
redirect, so the visitor stays in the SPA.

Field UUIDs are Tally's internal block identifiers and are the contract
between our fields and Tally's columns; config.ts documents how to re-read
them if the form is edited in the dashboard. A dropdown answer is sent as an
array containing the option UUID, not its label.

Accessibility: labels bound to inputs, aria-invalid and aria-describedby per
field, focus moved to the first invalid field on a failed submit, the submit
error announced via role="alert", and the required marker reads as "Required"
rather than a bare asterisk. An invalid field's focus ring flips to the danger
colour, outranking the global :focus-visible accent ring. :root now sets
color-scheme per theme so native controls follow the site theme.

A failed submission keeps everything the visitor typed, shows the error, and
offers a mailto fallback. Spam is handled by an off-screen honeypot, since the
embed's own heuristics are gone.

CSP: connect-src allows https://api.tally.so; tally.so is dropped from
script-src and frame-src as nothing is embedded any more.

Privacy policy updated: Tally is no longer an embed, so nothing loads from
Tally while browsing and no Tally script runs on the site. Tally remains the
processor for submissions.

Also adds an optional Docker dev setup, which is how this was validated across
mobile, tablet, and desktop.

Docs synced: dev-guide (why an embed cannot be themed, and the rules for
posting to Tally directly), design-system.html, site-copy (with the iframe
kept as a [cut] note), build-plan, README, and the frontend-review checklist.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../frontend-review/references/checklist.md   |   5 +
 .dockerignore                                 |   3 +
 README.md                                     |  12 +
 compose.yaml                                  |  16 ++
 docs/build-plan.md                            |   2 +-
 docs/design-system.html                       |  14 +
 docs/dev-guide.md                             |  29 ++
 docs/site-copy.md                             |   6 +-
 src/config.ts                                 |  28 ++
 src/copy.ts                                   |  21 ++
 src/index.css                                 |  41 +++
 src/pages/Privacy.tsx                         |   2 +-
 src/sections/WaitlistForm.tsx                 | 248 +++++++++++++++---
 vercel.json                                   |   2 +-
 vite.config.ts                                |   8 +
 15 files changed, 402 insertions(+), 35 deletions(-)
 create mode 100644 .dockerignore
 create mode 100644 compose.yaml

diff --git a/.claude/skills/frontend-review/references/checklist.md b/.claude/skills/frontend-review/references/checklist.md
index c797366..dacc6bb 100644
--- a/.claude/skills/frontend-review/references/checklist.md
+++ b/.claude/skills/frontend-review/references/checklist.md
@@ -155,6 +155,11 @@ Forward-looking: Tally (live in `WaitlistForm`), Cal.eu (live in `ThankYou`), an
 
 **E5**: Embeds that set cookies (Cal.eu, Stripe) must be reflected in the privacy policy. A new tracking or cookie-setting embed is a legal-page update trigger (ties to L1).
 
+**E6**: A cross-origin embed cannot be themed or driven from the parent page. Flag as ineffective any attempt to style inside a vendor iframe (injected `<style>`, `!important` targeting embed internals) or to drive one (writing to `contentDocument`, synthesizing clicks, sending `postMessage` commands a vendor does not document as inbound). If an embed must match the site theme, the answer is to own the markup, not to work around the boundary. See `docs/dev-guide.md`. Do not "fix" a vendor iframe with `filter: invert()`.
+
+**E7**: The waitlist form posts directly to `api.tally.so`. `TALLY_FIELDS` / `TALLY_ROLE_OPTIONS` in `src/config.ts` are Tally's internal block UUIDs and are the contract with Tally's columns. Flag any change to the form's fields that does not re-read them, and flag a dropdown answer sent as a label rather than an array containing the option UUID.
+
+**E8**: A submission must never fail silently. Any change to the submit path keeps a non-2xx or thrown request visible: preserve what the visitor typed, show the error, and keep the `mailto:` fallback. A lost signup is the one failure this page cannot absorb.
 ---
 
 ## 10. Performance (P)
diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..a21f178
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,3 @@
+node_modules
+dist
+.git
diff --git a/README.md b/README.md
index 8dd5bd9..8e57bf8 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,18 @@ bun run dev
 | `bun run lint` | ESLint |
 | `bun run preview` | Preview the production build locally |
 
+### Docker (optional)
+
+Runs the same dev server in a container, so you need nothing but Docker installed. Serves on `localhost:5173` with hot reload.
+
+```bash
+docker compose up          # start (add -d to detach)
+docker compose down        # stop
+docker compose exec web bun run typecheck
+```
+
+`compose.yaml` uses the stock `oven/bun:1` image, no Dockerfile. Dependencies live in a named volume rather than the bind mount, so the host's `node_modules` and the container's stay independent: run `bun install` on the host too if you want editor type resolution. The `DOCKER=1` env var switches Vite's watcher to polling, because bind mounts do not propagate inotify events.
+
 ## CI
 
 Every PR and push to `main` runs typecheck, lint, and build via GitHub Actions (`.github/workflows/ci.yml`). The check must pass before merging.
diff --git a/compose.yaml b/compose.yaml
new file mode 100644
index 0000000..df04475
--- /dev/null
+++ b/compose.yaml
@@ -0,0 +1,16 @@
+# ponytail: stock bun image, no Dockerfile. Add one when the build needs system deps.
+services:
+  web:
+    image: oven/bun:1
+    working_dir: /app
+    environment:
+      DOCKER: "1"
+    command: sh -c "bun install --frozen-lockfile && bun run dev --host 0.0.0.0"
+    ports:
+      - "5173:5173"
+    volumes:
+      - .:/app
+      - node_modules:/app/node_modules
+
+volumes:
+  node_modules:
diff --git a/docs/build-plan.md b/docs/build-plan.md
index 26f75c3..92aa7f0 100644
--- a/docs/build-plan.md
+++ b/docs/build-plan.md
@@ -218,7 +218,7 @@ Single route: `/`. Sections in render order:
 5. `<RuleRegistry />`: the moat section with registry preview card
 6. `<BuiltFor />`: 3 industry cards: fintech, medtech, HR (fintech first)
 7. `<Pricing />`: Free / Startup / Enterprise tiers, self-host note
-8. `<WaitlistForm id="waitlist" />`: Tally form embed
+8. `<WaitlistForm id="waitlist" />`: native form, POSTed directly to Tally (the iframe embed was dropped: a cross-origin embed cannot follow the site theme)
 9. `<Footer />`: company info, legal note, Driftware Dynamics Ltd
 
 The deadline badge JS logic:
diff --git a/docs/design-system.html b/docs/design-system.html
index d0ee135..6cb733a 100644
--- a/docs/design-system.html
+++ b/docs/design-system.html
@@ -96,6 +96,9 @@
   --shadow-card:none;
 }
 
+.form-input-invalid { border-color: var(--danger-border); }
+.form-error { font-size: 12px; line-height: 1.6; color: var(--danger-text); margin-top: 6px; }
+
 /* ═══ FONT SWITCHING ═══ */
 [data-font="A"] .f-display      { font-family: var(--f-display-A); }
 [data-font="A"] .f-body         { font-family: var(--f-body-AB); }
@@ -846,6 +849,17 @@
   <div>
     <div class="group-label">Hash Block</div>
     <div class="hash-block">sha256:a3f8c2d91e74b60527f9e4c1d8a2b35f6e7c9d04a1b8e250c37f8d96e4b2a10f3e5d7c9b1a8f2e4d6c0b8a7e2d1c5b3</div>
+
+    <div class="group-label" style="margin-top:28px">Waitlist Form, field states</div>
+    <p class="note">The waitlist form is rendered natively and POSTed straight to Tally, so it themes with the rest of the site. It reuses <strong class="hl">.form-input</strong>, <strong class="hl">.form-textarea</strong> and <strong class="hl">.btn-primary</strong>; the only form-specific additions are the invalid state and the error message.</p>
+    <p class="note">An invalid field takes <strong class="hl">--danger-border</strong> and its focus ring flips to <strong class="hl">--danger-text</strong>, outranking the global <code style="font-family:var(--f-mono);font-size:12px">:focus-visible</code> accent ring so a focused invalid field still reads as invalid.</p>
+    <div style="max-width:420px">
+      <label class="form-label" style="display:block">Work email *</label>
+      <input class="form-input" placeholder="you@company.com" style="margin-bottom:16px">
+      <label class="form-label" style="display:block">Work email * (invalid)</label>
+      <input class="form-input form-input-invalid" value="not-an-email">
+      <p class="form-error">Enter a valid work email address.</p>
+    </div>
   </div>
 </div>
 
diff --git a/docs/dev-guide.md b/docs/dev-guide.md
index 13f6eeb..799975d 100644
--- a/docs/dev-guide.md
+++ b/docs/dev-guide.md
@@ -153,6 +153,35 @@ The site is static and client-only, so every integration runs in the browser: Ta
 - When a Content-Security-Policy is added to `vercel.json`, `frame-src` / `connect-src` must allow the embed origins (tally.so, cal.eu, stripe.com).
 - Embeds that set cookies (Cal.eu, Stripe) must be reflected in the privacy policy. Adding such an embed is a legal-page update trigger.
 
+### A vendor iframe cannot be themed: render the form yourself
+
+The waitlist form is **not** an embed. It is our own markup in `src/sections/WaitlistForm.tsx`, POSTed straight to Tally. That is a deliberate decision, and this section records why, so nobody re-embeds the iframe to "simplify" things.
+
+A cross-origin iframe cannot be styled or driven from the parent page. Every route was tested against the live Tally embed, and all of them are closed:
+
+| Route | Result |
+|-------|--------|
+| CSS into the frame (`!important`, injected `<style>`, `::part()`) | Blocked by same-origin policy |
+| Drive it via `postMessage` | Tally's protocol is outbound-only: `FormLoaded`, `FormPageView`, `FormSubmitted`, `FormRedirect`, viewport height. No inbound command exists |
+| Synthesize clicks or typing into it | Cross-origin: cannot focus, dispatch events, or reach any element inside |
+| A theme or color URL parameter | None. The palette lives server-side in the form's `settings.styles` |
+| Tally's own custom CSS | A paid feature; this workspace is on `FREE` |
+| Propagate `color-scheme` so CSS inside could follow our toggle | Does not propagate. With the OS in light mode and `color-scheme: dark` on the iframe, `prefers-color-scheme` inside the frame still reports light. Tally's `embed.js` also force-sets `iframe.style.colorScheme = 'light'` whenever `transparentBackground=1` |
+
+The general rule: **if a third-party embed has to match your theme, you cannot use the embed.** Own the markup and talk to the vendor's endpoint directly.
+
+Do not reach for a `filter: invert()` hack. It inverts the accent color and semi-transparent input fills along with the text, and it breaks focus rings.
+
+### Posting to Tally directly
+
+`TALLY_SUBMIT_URL` in `src/config.ts` posts to `api.tally.so/forms/<id>/respond`. It takes no API key and its CORS headers reflect our origin, so the browser permits the cross-origin POST.
+
+- `TALLY_FIELDS` and `TALLY_ROLE_OPTIONS` hold Tally's internal block UUIDs. **They are the contract between our fields and Tally's columns.** If a field is added, removed, or reordered in the Tally dashboard, re-read them or answers land in the wrong column. `config.ts` documents exactly how.
+- The endpoint is undocumented, so treat a non-2xx as expected rather than exceptional. The form keeps everything the visitor typed, shows the error, and offers a `mailto:` fallback. Never let a submission fail silently: a lost signup is the one outcome this page cannot afford.
+- Dropdown answers are sent as an **array of the selected option's UUID**, not its label.
+- Success navigates to `/thank-you` with the router, so the visitor stays in the SPA. Tally's own `redirectOnCompletion` is an absolute production URL and is now bypassed entirely.
+- Spam is handled with an off-screen honeypot rather than a captcha, since the embed's own heuristics are gone. Escalate only if spam actually arrives.
+
 `CAL_BOOKING_URL` in `src/config.ts` points to `https://www.cal.eu/traced-ai/discovery`. The `/thank-you` booking CTA is an **outbound `<a>` link** that opens cal.eu in a new tab, not an on-page embed. This sets no cookies on our domain and does not trigger a privacy-policy update. Switching to an inline `@calcom/embed` later (lazy-loaded on `/thank-you` only) would set cookies and require a privacy-policy cookie disclosure update before shipping.
 
 ## Editing `src/copy.ts`
diff --git a/docs/site-copy.md b/docs/site-copy.md
index 2de9777..8a2e6c6 100644
--- a/docs/site-copy.md
+++ b/docs/site-copy.md
@@ -90,7 +90,11 @@ Section label, headline, subheadline, and fine print: `waitlist.*`.
 
 Voice: the headline stays company "we" ("We're building for the companies..."), but the reply promise in the subheadline is deliberately founder "I" ("You'll hear back from me personally") because the response is a personal act by the solo founder. Revert to "we" when the team grows. [cut: "We'll respond personally." — company-voice version of the reply promise, swapped to founder voice while solo.]
 
-**Tally embed (form fields are in the Tally config, not copy.ts):**
+**Implementation note:** the form is rendered natively (`src/sections/WaitlistForm.tsx`) and POSTed straight to Tally; it is no longer an iframe embed. It therefore themes with the rest of the site in both light and dark. All field labels, placeholders, the submit label and every validation message are ours and live in `waitlist.form.*` in copy.ts. The role options are the exception: their labels live in `TALLY_ROLE_OPTIONS` in `src/config.ts`, because each label is paired with the Tally option UUID it submits.
+
+[cut: the Tally iframe embed, plus a `.tally-surface` light card that hosted it so it stayed readable in dark mode. The card was readable but never themed: a light form on a black page. Replaced once it was established that a cross-origin embed cannot follow the site theme by any route. See `docs/dev-guide.md`.]
+
+**Fields (mirrored from the Tally form definition; the UUID mapping is in `src/config.ts`):**
 1. Business email (required) — placeholder `you@company.com`
 2. Company name (required) — placeholder `Acme Financial GmbH`
 3. Your role (required) — CTO / Head of Engineering / Head of Compliance / Founder / Legal Counsel / Other
diff --git a/src/config.ts b/src/config.ts
index 6ad6ae6..b84b180 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,4 +1,32 @@
 export const TALLY_FORM_ID = 'xXvOJk';
+
+/**
+ * The waitlist form is rendered natively (see `src/sections/WaitlistForm.tsx`) and
+ * POSTed straight to Tally, rather than embedded as an iframe. Tally's embed is
+ * cross-origin and bakes its own palette in, so it could never follow the site theme.
+ *
+ * These UUIDs are Tally's internal block identifiers, read from the form definition.
+ * They are the contract between our fields and Tally's columns: if a field is added,
+ * removed, or reordered in the Tally dashboard, the UUIDs must be re-read here or
+ * submissions will land in the wrong column. Re-read them from
+ * `https://tally.so/embed/<id>` (the `__NEXT_DATA__` blob, `props.pageProps.blocks`,
+ * using each block's `groupUuid`).
+ */
+export const TALLY_SUBMIT_URL = `https://api.tally.so/forms/${TALLY_FORM_ID}/respond`;
+
+export const TALLY_FIELDS = {
+  email: '650acce8-c72a-4299-8a91-91c534fc31fd',
+  company: '7ab8e551-0b18-4f48-966b-fe8b3ffb1cd3',
+  role: '1fb220fa-0f27-40f6-a322-4f916378fc6b',
+  useCase: '0b8a4e51-cec2-4191-89bb-1b4cb1ae2b6f',
+} as const;
+
+/** Role is a dropdown: Tally expects an array of the selected option's UUID. */
+export const TALLY_ROLE_OPTIONS = [
+  { id: 'b8749454-7dfd-4da2-8a46-34bde19067d8', label: 'Founder or C-suite' },
+  { id: 'b83d3d9c-6ce7-4c49-9497-863b55e44aa1', label: 'Engineering or Technical lead' },
+  { id: '9ccafe05-3112-4332-97db-40c769c03aa6', label: 'Compliance, Risk, or Legal' },
+] as const;
 export const CAL_BOOKING_URL = 'https://www.cal.eu/traced-ai/discovery';
 export const ANNEX_III_APPLICATION_DATE = '2027-12-02';
 export const DOMAIN = 'https://www.traced-ai.com';
diff --git a/src/copy.ts b/src/copy.ts
index 870e07d..1601675 100644
--- a/src/copy.ts
+++ b/src/copy.ts
@@ -295,6 +295,27 @@ export const waitlist = {
     'Two minutes. Tell us what you’re building and what you can’t yet explain. You’ll hear back from me personally.',
   finePrint:
     "Once you’ve joined, you can book a 30-minute call. Optional, not required.",
+  form: {
+    email: { label: 'Work email', placeholder: 'you@company.com' },
+    company: { label: 'Company', placeholder: 'Company name or link' },
+    role: { label: 'Role', placeholder: 'Select your role' },
+    useCase: {
+      label: 'What does your AI decide in production, and how would you evidence it to an auditor today?',
+      placeholder:
+        'e.g. We score loan applications with an LLM. We can explain the logic, but we have no structured, tamper-evident record per decision. If a regulator asked us to reconstruct a specific case from 3 months ago, we’d be pulling from CloudWatch for a week.',
+    },
+    submit: 'Join the waitlist →',
+    submitting: 'Joining…',
+    required: 'Required',
+    errors: {
+      email: 'Enter a valid work email address.',
+      company: 'Tell us which company you’re with.',
+      role: 'Select the option closest to your role.',
+      useCase: 'A sentence or two is plenty.',
+      submit:
+        'Something went wrong on our side and your details were not saved. Try again, or email us directly.',
+    },
+  },
 };
 
 export const thankYou = {
diff --git a/src/index.css b/src/index.css
index ea48fc5..6645ad8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -43,6 +43,7 @@
   --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
   --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
   --r-sm: 4px; --r-md: 8px; --r-lg: 12px;
+  color-scheme: light;
 }
 
 /* ─── DARK THEME ─── */
@@ -81,6 +82,7 @@
   --deadline-bg: rgba(74, 222, 128, 0.08);
   --deadline-border: rgba(74, 222, 128, 0.22);
   --shadow-card: none;
+  color-scheme: dark;
 }
 
 /* ─── TAILWIND TOKEN MAPPING ─── */
@@ -604,6 +606,34 @@ body {
 .form-input::placeholder { color: var(--tx-2); }
 .form-textarea { min-height: 88px; resize: vertical; line-height: 1.6; }
 
+/* A native <select> keeps the UA arrow, which follows :root color-scheme. */
+select.form-input { cursor: pointer; }
+
+.form-input-invalid { border-color: var(--danger-border); }
+.form-input-invalid:focus {
+  border-color: var(--danger-border);
+  box-shadow: 0 0 0 3px var(--danger-bg);
+}
+/* Outranks the global :focus-visible accent ring, so an invalid field reads as
+   invalid while focused instead of flipping back to the teal accent. */
+.form-input-invalid:focus-visible { outline-color: var(--danger-text); }
+.form-error {
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--danger-text);
+  margin-top: 6px;
+}
+
+/* Spam trap: off-screen rather than display:none, which some bots skip. */
+.honeypot {
+  position: absolute;
+  left: -9999px;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
 /* ─── MUTED TEXT ─── */
 .footnote  { font-size: 10px; color: var(--tx-2); line-height: 1.7; }
 .legal-sub-label { font-size: 13px; color: var(--tx-2); font-weight: 500; margin-top: 20px; margin-bottom: 8px; }
@@ -691,6 +721,17 @@ body {
 
 /* ─── ACCESSIBILITY ─── */
 
+/* Visible to screen readers only: carries the "Required" word behind the * glyph. */
+.sr-only {
+  position: absolute;
+  width: 1px; height: 1px;
+  padding: 0; margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
 /* All hash-targeted elements need clearance from the 56px sticky navbar. */
 [id] { scroll-margin-top: 72px; }
 
diff --git a/src/pages/Privacy.tsx b/src/pages/Privacy.tsx
index 08d8828..fbc8b20 100644
--- a/src/pages/Privacy.tsx
+++ b/src/pages/Privacy.tsx
@@ -84,7 +84,7 @@ export default function Privacy() {
 
           <LegalSection id="5" title="Cookies and analytics">
             <p><strong>Vercel Web Analytics</strong> is cookieless. It sets no cookies, collects no personally identifiable information, and identifies sessions by a request hash that is discarded after 24 hours. No consent banner is required for it.</p>
-            <p>The <strong>Tally</strong> waitlist form is a third-party embed. Tally does not use cookie tracking on forms; it operates under its own privacy notice: <a href="https://tally.so/privacy" target="_blank" rel="noopener noreferrer">Tally privacy policy</a>.</p>
+            <p>The <strong>Tally</strong> waitlist form is not an embed: the form is served by this site and your answers are sent directly to Tally when you submit it. Nothing is loaded from Tally while you browse, and no Tally cookie or tracking script runs on this site. Tally processes the submission under its own privacy notice: <a href="https://tally.so/privacy" target="_blank" rel="noopener noreferrer">Tally privacy policy</a>.</p>
             <p>The <strong>Cal.eu</strong> booking widget is a third-party embed. It operates under its own privacy notice and may set cookies within its embed context: <a href="https://cal.com/privacy" target="_blank" rel="noopener noreferrer">Cal.eu privacy policy</a>.</p>
             <p>When user authentication is added to the product, any session cookies introduced will be listed here with their purpose and lifespan.</p>
           </LegalSection>
diff --git a/src/sections/WaitlistForm.tsx b/src/sections/WaitlistForm.tsx
index 961d45e..18e26f1 100644
--- a/src/sections/WaitlistForm.tsx
+++ b/src/sections/WaitlistForm.tsx
@@ -1,43 +1,107 @@
-import { useEffect } from 'react'
-import { TALLY_FORM_ID } from '../config'
+import { useId, useRef, useState } from 'react'
+import type { FormEvent } from 'react'
+import { useNavigate } from 'react-router-dom'
+import {
+  CONTACT_EMAIL,
+  TALLY_FIELDS,
+  TALLY_ROLE_OPTIONS,
+  TALLY_SUBMIT_URL,
+} from '../config'
 import { waitlist } from '../copy'
 
-type TallyWindow = Window & { Tally?: { loadEmbeds: () => void } }
+const f = waitlist.form
 
-function TallyEmbed() {
-  useEffect(() => {
-    const existing = document.getElementById('tally-js')
-    if (existing) {
-      if (typeof (window as TallyWindow).Tally !== 'undefined') {
-        (window as TallyWindow).Tally?.loadEmbeds()
-      }
+type FieldName = 'email' | 'company' | 'role' | 'useCase'
+type Values = Record<FieldName, string>
+type Errors = Partial<Record<FieldName | 'submit', string>>
+
+const EMPTY: Values = { email: '', company: '', role: '', useCase: '' }
+const ORDER: FieldName[] = ['email', 'company', 'role', 'useCase']
+
+/** Deliberately loose: this catches typos, Tally still does the real validation. */
+const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+function validate(v: Values): Errors {
+  const e: Errors = {}
+  if (!EMAIL.test(v.email.trim())) e.email = f.errors.email
+  if (!v.company.trim()) e.company = f.errors.company
+  if (!v.role) e.role = f.errors.role
+  if (!v.useCase.trim()) e.useCase = f.errors.useCase
+  return e
+}
+
+const inputClass = (invalid?: string) => `form-input${invalid ? ' form-input-invalid' : ''}`
+
+export default function WaitlistForm() {
+  const navigate = useNavigate()
+  const formId = useId()
+  const [values, setValues] = useState<Values>(EMPTY)
+  const [errors, setErrors] = useState<Errors>({})
+  const [submitting, setSubmitting] = useState(false)
+  // ponytail: honeypot rather than a captcha. Revisit only if spam actually arrives.
+  const honeypot = useRef<HTMLInputElement>(null)
+
+  const fieldId = (name: string) => `${formId}-${name}`
+  const errorId = (name: string) => `${formId}-${name}-error`
+
+  function set(name: FieldName, value: string) {
+    setValues(prev => ({ ...prev, [name]: value }))
+    // Clear a field's error as soon as the visitor starts correcting it.
+    if (errors[name]) setErrors(prev => ({ ...prev, [name]: undefined }))
+  }
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    if (submitting) return
+
+    const found = validate(values)
+    if (Object.keys(found).length > 0) {
+      setErrors(found)
+      const first = ORDER.find(name => found[name])
+      if (first) document.getElementById(fieldId(first))?.focus()
       return
     }
 
-    const s = document.createElement('script')
-    s.src = 'https://tally.so/widgets/embed.js'
-    s.id = 'tally-js'
-    s.onload = () => {
-      (window as TallyWindow).Tally?.loadEmbeds()
+    // A bot filled the hidden field. Behave as if it worked rather than explaining why not.
+    if (honeypot.current?.value) {
+      navigate('/thank-you')
+      return
     }
-    document.body.appendChild(s)
-  }, [])
 
-  return (
-    <iframe
-      data-tally-src={`https://tally.so/embed/${TALLY_FORM_ID}?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1`}
-      loading="lazy"
-      width="100%"
-      height="500"
-      frameBorder="0"
-      title="Join the Traced AI waitlist"
-    />
-  )
-}
+    setSubmitting(true)
+    setErrors({})
+    try {
+      const response = await fetch(TALLY_SUBMIT_URL, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          sessionUuid: crypto.randomUUID(),
+          respondentUuid: crypto.randomUUID(),
+          responses: {
+            [TALLY_FIELDS.email]: values.email.trim(),
+            [TALLY_FIELDS.company]: values.company.trim(),
+            [TALLY_FIELDS.role]: [values.role],
+            [TALLY_FIELDS.useCase]: values.useCase.trim(),
+          },
+          captchas: {},
+          isCompleted: true,
+          password: null,
+        }),
+      })
+      if (!response.ok) throw new Error(`Tally responded ${response.status}`)
+      navigate('/thank-you')
+    } catch {
+      // Never strand a submission silently: surface it and keep what they typed.
+      setErrors({ submit: f.errors.submit })
+      setSubmitting(false)
+    }
+  }
 
-export default function WaitlistForm() {
   return (
-    <section id="waitlist" style={{ background: 'var(--bg-0)', borderTop: '1px solid var(--br-subtle)' }}>
+    <section
+      id="waitlist"
+      style={{ background: 'var(--bg-0)', borderTop: '1px solid var(--br-subtle)' }}
+    >
       <div className="page-section">
         <div className="section-label">{waitlist.sectionLabel}</div>
 
@@ -49,7 +113,111 @@ export default function WaitlistForm() {
         </p>
 
         <div style={{ maxWidth: '560px' }}>
-          <TallyEmbed />
+          <form onSubmit={handleSubmit} noValidate>
+            <div className="form-group">
+              <label className="form-label" htmlFor={fieldId('email')}>
+                {f.email.label} <RequiredMark />
+              </label>
+              <input
+                id={fieldId('email')}
+                type="email"
+                className={inputClass(errors.email)}
+                placeholder={f.email.placeholder}
+                value={values.email}
+                autoComplete="email"
+                required
+                aria-invalid={errors.email ? true : undefined}
+                aria-describedby={errors.email ? errorId('email') : undefined}
+                onChange={e => set('email', e.target.value)}
+              />
+              <FieldError id={errorId('email')} message={errors.email} />
+            </div>
+
+            <div className="form-group">
+              <label className="form-label" htmlFor={fieldId('company')}>
+                {f.company.label} <RequiredMark />
+              </label>
+              <input
+                id={fieldId('company')}
+                type="text"
+                className={inputClass(errors.company)}
+                placeholder={f.company.placeholder}
+                value={values.company}
+                autoComplete="organization"
+                required
+                aria-invalid={errors.company ? true : undefined}
+                aria-describedby={errors.company ? errorId('company') : undefined}
+                onChange={e => set('company', e.target.value)}
+              />
+              <FieldError id={errorId('company')} message={errors.company} />
+            </div>
+
+            <div className="form-group">
+              <label className="form-label" htmlFor={fieldId('role')}>
+                {f.role.label} <RequiredMark />
+              </label>
+              <select
+                id={fieldId('role')}
+                className={inputClass(errors.role)}
+                value={values.role}
+                required
+                aria-invalid={errors.role ? true : undefined}
+                aria-describedby={errors.role ? errorId('role') : undefined}
+                onChange={e => set('role', e.target.value)}
+              >
+                <option value="" disabled>
+                  {f.role.placeholder}
+                </option>
+                {TALLY_ROLE_OPTIONS.map(option => (
+                  <option key={option.id} value={option.id}>
+                    {option.label}
+                  </option>
+                ))}
+              </select>
+              <FieldError id={errorId('role')} message={errors.role} />
+            </div>
+
+            <div className="form-group">
+              <label className="form-label" htmlFor={fieldId('useCase')}>
+                {f.useCase.label} <RequiredMark />
+              </label>
+              <textarea
+                id={fieldId('useCase')}
+                className={`${inputClass(errors.useCase)} form-textarea`}
+                placeholder={f.useCase.placeholder}
+                value={values.useCase}
+                rows={5}
+                required
+                aria-invalid={errors.useCase ? true : undefined}
+                aria-describedby={errors.useCase ? errorId('useCase') : undefined}
+                onChange={e => set('useCase', e.target.value)}
+              />
+              <FieldError id={errorId('useCase')} message={errors.useCase} />
+            </div>
+
+            {/* Off-screen and hidden from assistive tech: only an automated filler completes it. */}
+            <input
+              ref={honeypot}
+              type="text"
+              name="company-website"
+              tabIndex={-1}
+              autoComplete="off"
+              aria-hidden="true"
+              className="honeypot"
+            />
+
+            <button type="submit" className="btn btn-primary btn-full" disabled={submitting}>
+              {submitting ? f.submitting : f.submit}
+            </button>
+
+            {/* role="alert" so a failed submission is announced, not only shown. */}
+            {errors.submit && (
+              <p className="form-error" role="alert" style={{ marginTop: '12px' }}>
+                {errors.submit} <a href={`mailto:${CONTACT_EMAIL}`}>{CONTACT_EMAIL}</a>
+              </p>
+            )}
+          </form>
+
           <p style={{ fontSize: '12px', color: 'var(--tx-2)', marginTop: '16px', lineHeight: 1.7 }}>
             {waitlist.finePrint}
           </p>
@@ -58,3 +226,21 @@ export default function WaitlistForm() {
     </section>
   )
 }
+
+function RequiredMark() {
+  return (
+    <>
+      <span aria-hidden="true">*</span>
+      <span className="sr-only">{f.required}</span>
+    </>
+  )
+}
+
+function FieldError({ id, message }: { id: string; message?: string }) {
+  if (!message) return null
+  return (
+    <p className="form-error" id={id}>
+      {message}
+    </p>
+  )
+}
diff --git a/vercel.json b/vercel.json
index 37af55f..d5f2a4a 100644
--- a/vercel.json
+++ b/vercel.json
@@ -7,7 +7,7 @@
         { "key": "X-Frame-Options", "value": "DENY" },
         { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" },
         { "key": "Permissions-Policy", "value": "camera=(), microphone=(), geolocation=()" },
-        { "key": "Content-Security-Policy", "value": "default-src 'self'; script-src 'self' https://tally.so https://vercel.live; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https:; frame-src https://tally.so https://vercel.live; connect-src 'self' https://tally.so https://vercel.live; frame-ancestors 'none'; base-uri 'self'; form-action 'self'; object-src 'none'; upgrade-insecure-requests" }
+        { "key": "Content-Security-Policy", "value": "default-src 'self'; script-src 'self' https://vercel.live; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https:; frame-src https://vercel.live; connect-src 'self' https://api.tally.so https://vercel.live; frame-ancestors 'none'; base-uri 'self'; form-action 'self'; object-src 'none'; upgrade-insecure-requests" }
       ]
     }
   ],
diff --git a/vite.config.ts b/vite.config.ts
index c676acd..c8d332d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,9 +2,17 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
 
+// ponytail: the only Node global this config touches. Declaring it here beats
+// adding @types/node as a dependency for one env var.
+declare const process: { env: Record<string, string | undefined> }
+
 export default defineConfig({
   plugins: [
     react(),
     tailwindcss(),
   ],
+  server: {
+    // Bind mounts do not propagate inotify events, so HMR needs polling in Docker.
+    watch: process.env.DOCKER ? { usePolling: true } : undefined,
+  },
 })