feat: add 6-digit code email verification to signup flow

- POST /v1/signup/free now returns verification code (temp in response)
- New POST /v1/signup/verify endpoint to verify code and get API key
- Codes expire after 15 minutes, max 3 attempts
- Frontend updated with 2-step signup modal (email → code → key)
- Legacy token verification kept for existing links

public/app.js

@@ -1,6 +1,9 @@
+var signupEmail = '';
+
 function showState(state) {
-  ['signupInitial', 'signupLoading', 'signupResult'].forEach(function(id) {
-    document.getElementById(id).classList.remove('active');
+  ['signupInitial', 'signupLoading', 'signupVerify', 'signupResult'].forEach(function(id) {
+    var el = document.getElementById(id);
+    if (el) el.classList.remove('active');
   });
   document.getElementById(state).classList.add('active');
 }
@@ -9,7 +12,10 @@ function openSignup() {
   document.getElementById('signupModal').classList.add('active');
   showState('signupInitial');
   document.getElementById('signupError').style.display = 'none';
+  document.getElementById('verifyError').style.display = 'none';
   document.getElementById('signupEmail').value = '';
+  document.getElementById('verifyCode').value = '';
+  signupEmail = '';
 }
 
 function closeSignup() {
@@ -48,8 +54,11 @@ async function submitSignup() {
       return;
     }
 
-    // Show "check your email" message
-    showState('signupResult');
+    signupEmail = email;
+    document.getElementById('verifyEmailDisplay').textContent = email;
+    showState('signupVerify');
+    document.getElementById('verifyCode').focus();
+    btn.disabled = false;
   } catch (err) {
     showState('signupInitial');
     errEl.textContent = 'Network error. Please try again.';
@@ -58,11 +67,50 @@ async function submitSignup() {
   }
 }
 
+async function submitVerify() {
+  var errEl = document.getElementById('verifyError');
+  var btn = document.getElementById('verifyBtn');
+  var codeInput = document.getElementById('verifyCode');
+  var code = codeInput.value.trim();
+
+  if (!code || !/^\d{6}$/.test(code)) {
+    errEl.textContent = 'Please enter a 6-digit code.';
+    errEl.style.display = 'block';
+    return;
+  }
+
+  errEl.style.display = 'none';
+  btn.disabled = true;
+
+  try {
+    var res = await fetch('/v1/signup/verify', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ email: signupEmail, code: code })
+    });
+    var data = await res.json();
+
+    if (!res.ok) {
+      errEl.textContent = data.error || 'Verification failed.';
+      errEl.style.display = 'block';
+      btn.disabled = false;
+      return;
+    }
+
+    document.getElementById('apiKeyText').textContent = data.apiKey;
+    showState('signupResult');
+  } catch (err) {
+    errEl.textContent = 'Network error. Please try again.';
+    errEl.style.display = 'block';
+    btn.disabled = false;
+  }
+}
+
 function copyKey() {
   var key = document.getElementById('apiKeyText').textContent;
   var btn = document.getElementById('copyBtn');
   function showCopied() {
-    btn.textContent = '✓ Copied!';
+    btn.textContent = '\u2713 Copied!';
     setTimeout(function() { btn.textContent = 'Copy'; }, 2000);
   }
   try {
@@ -96,6 +144,7 @@ document.addEventListener('DOMContentLoaded', function() {
   document.getElementById('btn-checkout').addEventListener('click', checkout);
   document.getElementById('btn-close-signup').addEventListener('click', closeSignup);
   document.getElementById('signupBtn').addEventListener('click', submitSignup);
+  document.getElementById('verifyBtn').addEventListener('click', submitVerify);
   document.getElementById('signupModal').addEventListener('click', function(e) {
     if (e.target === this) closeSignup();
   });

public/index.html

@@ -113,10 +113,11 @@ footer .container { display: flex; align-items: center; justify-content: space-b
 .modal .close:hover { color: var(--fg); }
 
 /* Signup states */
-#signupInitial, #signupLoading, #signupResult { display: none; }
+#signupInitial, #signupLoading, #signupVerify, #signupResult { display: none; }
 #signupInitial.active { display: block; }
 #signupLoading.active { display: flex; flex-direction: column; align-items: center; padding: 40px 0; text-align: center; }
 #signupResult.active { display: block; }
+#signupVerify.active { display: block; }
 .spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; margin-bottom: 16px; }
 @keyframes spin { to { transform: rotate(360deg); } }
 
@@ -356,12 +357,24 @@ html, body {
       <p style="color:var(--muted);margin:0">Generating your API key…</p>
     </div>
 
+    <div id="signupVerify">
+      <h2>Enter verification code</h2>
+      <p>We sent a 6-digit code to <strong id="verifyEmailDisplay"></strong></p>
+      <div class="signup-error" id="verifyError"></div>
+      <input type="text" id="verifyCode" placeholder="123456" maxlength="6" pattern="[0-9]{6}" inputmode="numeric" style="width:100%;padding:14px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:1.4rem;letter-spacing:0.3em;text-align:center;margin-bottom:16px;font-family:monospace;" required>
+      <button class="btn btn-primary" style="width:100%" id="verifyBtn">Verify →</button>
+      <p style="margin-top:16px;color:var(--muted);font-size:0.8rem;text-align:center;">Code expires in 15 minutes</p>
+    </div>
+
     <div id="signupResult">
-      <h2>📧 Check your email!</h2>
-      <p style="color:var(--fg);line-height:1.7;">We've sent a verification link to your email address. Click the link to get your API key.</p>
+      <h2>🚀 Your API key is ready!</h2>
       <div class="warning-box">
-        <span class="icon">💡</span>
-        <span>The link expires in 24 hours. Check your spam folder if you don't see it.</span>
+        <span class="icon">⚠️</span>
+        <span>Save your API key now — we can't recover it later.</span>
+      </div>
+      <div style="background:var(--bg);border:1px solid var(--accent);border-radius:8px;padding:14px;font-family:monospace;font-size:0.82rem;word-break:break-all;margin:16px 0;position:relative;">
+        <span id="apiKeyText"></span>
+        <button onclick="copyKey()" id="copyBtn" style="position:absolute;top:8px;right:8px;background:var(--accent);color:var(--bg);border:none;border-radius:4px;padding:4px 12px;cursor:pointer;font-size:0.8rem;">Copy</button>
       </div>
       <p style="margin-top:20px;color:var(--muted);font-size:0.9rem;">100 free PDFs/month • <a href="/docs">Read the docs →</a></p>
     </div>