Give appraisal intake fields persistent, programmatic labels

public/audit.html

@@ -78,8 +78,8 @@
     <h1>We read your page <em>as a customer with intent reads it.</em></h1>
     <p class="sub">Four passes, by hand, on the surfaces that decide whether someone who arrived ready to buy stays that way. You get a short, plain document — each fault named, in order of what it costs you, with the fix beside each one. No deck. No dashboard.</p>
     <form class="lead two" id="start" action="/api/signups" method="post">
-      <input type="text" name="website" required inputmode="url" autocomplete="url" placeholder="yourwebsite.com" aria-label="Your website domain" pattern="(https?://)?([a-zA-Z0-9\-]+\.)+[a-zA-Z]{2,}(:[0-9]+)?(/[^\s]*)?" title="Enter your domain, like example.com">
-      <input type="email" name="email" required placeholder="Your work email" aria-label="Your work email">
+      <label for="intake-website"><span>Your website domain</span><input type="text" name="website" id="intake-website" required inputmode="url" autocomplete="url" placeholder="yourwebsite.com" pattern="(https?://)?([a-zA-Z0-9\-]+\.)+[a-zA-Z]{2,}(:[0-9]+)?(/[^\s]*)?" title="Enter your domain, like example.com"></label>
+      <label for="intake-email"><span>Your work email</span><input type="email" name="email" id="intake-email" required placeholder="you@company.com"></label>
       <button>Request the appraisal</button>
     </form>
     <p class="micro">Thirty seconds to ask. Findings inside five working days. Yours to keep either way.</p>

public/index.html

@@ -72,8 +72,8 @@
     <h1>Most of them leave <em>before they ever get in touch.</em></h1>
     <p class="sub">We read the one page your revenue depends on the way a customer with intent reads it, and show you the exact points at which they go.</p>
     <form class="lead two" id="start" action="/api/signups" method="post">
-      <input type="text" name="website" required inputmode="url" autocomplete="url" placeholder="yourwebsite.com" aria-label="Your website domain" pattern="(https?://)?([a-zA-Z0-9\-]+\.)+[a-zA-Z]{2,}(:[0-9]+)?(/[^\s]*)?" title="Enter your domain, like example.com">
-      <input type="email" name="email" required placeholder="Your work email" aria-label="Your work email">
+      <label for="intake-website"><span>Your website domain</span><input type="text" name="website" id="intake-website" required inputmode="url" autocomplete="url" placeholder="yourwebsite.com" pattern="(https?://)?([a-zA-Z0-9\-]+\.)+[a-zA-Z]{2,}(:[0-9]+)?(/[^\s]*)?" title="Enter your domain, like example.com"></label>
+      <label for="intake-email"><span>Your work email</span><input type="email" name="email" id="intake-email" required placeholder="you@company.com"></label>
       <button>Show me where our site undersells us</button>
     </form>
     <p class="micro">Thirty seconds to ask. Findings inside five working days. No call at any point.</p>

public/shared.css

@@ -97,15 +97,19 @@ footer a:hover{color:var(--ink)}
   [data-r].in{opacity:1;transform:none}
 }
 
-/* two-field lead form — website + email, still one line on desktop */
+/* two-field lead form — website + email, still one line on desktop.
+   Each field carries a persistent <label> caption: placeholder text alone
+   disappears as buyers type, so the caption never doubles as the label. */
 form.lead.two{max-width:720px;padding:7px 7px 7px 0;overflow:hidden}
-form.lead.two input{flex:1 1 0;min-width:0;padding:12px 18px 12px 24px}
-form.lead.two input:first-child{border-right:1px solid var(--line)}
+form.lead.two label{display:grid;gap:2px;flex:1 1 0;min-width:0;padding:10px 18px 11px 24px}
+form.lead.two label + label{border-left:1px solid var(--line);padding-left:18px}
+form.lead.two label span{font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--muted)}
+form.lead.two input{padding:0;width:100%}
 form.lead.two button{flex:0 0 auto}
 @media (max-width:760px){
   form.lead.two{flex-direction:column;align-items:stretch;border-radius:20px;padding:8px;max-width:100%}
-  form.lead.two input{padding:14px 18px}
-  form.lead.two input:first-child{border-right:0;border-bottom:1px solid var(--line)}
+  form.lead.two label{padding:12px 14px}
+  form.lead.two label + label{border-left:0;border-top:1px solid var(--line)}
   form.lead.two button{width:100%}
 }
 

scripts/check-site.mjs

@@ -1633,12 +1633,12 @@ for (const [pageName, pageHtml] of titlePages) {
 }
 
 // ---- Intake field labels (activation) -------------------------------------
-// Both appraisal intake forms (homepage and /audit) labelled their fields
-// only with placeholder text, which disappears the moment a buyer starts
-// typing and is not a persistent programmatic label. Each intake input must
-// carry a non-empty aria-label so the field keeps its name for assistive
-// tech and for the browser's own validation announcements, no matter what
-// the field contains.
+// Both appraisal intake forms (homepage and /audit) must label each field
+// persistently AND programmatically: a visible <label> bound to the input via
+// label[for]/input[id], so the name survives typing and is exposed to
+// assistive tech and the browser's validation announcements. aria-label alone
+// is programmatic but invisible; placeholder-only labels disappear the moment
+// a buyer starts typing — neither is enough.
 const intakePages = [
   ["homepage", siteHome],
   ["audit page", siteAudit]
@@ -1648,9 +1648,16 @@ for (const [pageName, pageHtml] of intakePages) {
   for (const input of pageHtml.matchAll(/<input\b[^>]*>/gi)) {
     const tag = input[0];
     if (!/\bname="(?:website|email)"/.test(tag)) continue;
-    const aria = tag.match(/\baria-label="([^"]*)"/)?.[1] ?? "";
-    if (!aria.trim()) {
-      failures.push(`Intake input on ${pageName} must carry a persistent programmatic aria-label (placeholder-only labels disappear as buyers type): ${tag}`);
+    const id = tag.match(/\bid="([^"]*)"/)?.[1] ?? "";
+    if (!id.trim()) {
+      failures.push(`Intake input on ${pageName} must carry an id so a persistent <label> can bind to it: ${tag}`);
+      continue;
+    }
+    const labelBody = pageHtml.match(
+      new RegExp(`<label\\b[^>]*\\bfor="${id}"[^>]*>([\\s\\S]*?)<\\/label>`, "i")
+    )?.[1] ?? "";
+    if (!labelBody.trim()) {
+      failures.push(`Intake input on ${pageName} must be bound to a persistent programmatic <label for="${id}"> (placeholder-only labels disappear as buyers type): ${tag}`);
     }
   }
 }