default period to yearly, add coupon code input, send coupon in webhook

index.html

@@ -946,6 +946,19 @@
         }
         .pricing-config-select:hover { border-color: var(--accent); }
         .pricing-config-select:focus { border-color: var(--accent); }
+        .pricing-config-input {
+            background: var(--bg);
+            border: 1px solid var(--border);
+            border-radius: var(--radius);
+            color: var(--text);
+            font-size: 13px;
+            padding: 6px 12px;
+            outline: none;
+            transition: border-color 0.2s;
+            width: 120px;
+        }
+        .pricing-config-input:focus { border-color: var(--accent); }
+        .pricing-config-input::placeholder { color: var(--text-muted); opacity: 0.6; }
 
         @media (max-width: 900px) {
             .pricing-grid { grid-template-columns: 1fr; max-width: 420px; }
@@ -1799,12 +1812,13 @@
                     <option value="openclaw">OpenClaw</option>
                 </select>
                 <select class="pricing-config-select" id="pricing-period">
-                    <option value="monthly" selected>Monthly</option>
+                    <option value="monthly">Monthly</option>
-                    <option value="yearly">Yearly</option>
+                    <option value="yearly" selected>Yearly</option>
                 </select>
                 <select class="pricing-config-select" id="pricing-location">
                     <option value="france">France</option>
                 </select>
+                <input type="text" class="pricing-config-input" id="pricing-coupon" placeholder="Coupon code" />
             </div>
 
             <!-- ── Plans grid ── -->
@@ -2327,6 +2341,7 @@
             document.getElementById('period-senior').textContent = yearly ? '/ month ✦ yearly' : '/ month';
         }
         document.getElementById('pricing-period').addEventListener('change', updatePeriodDisplay);
+        updatePeriodDisplay(); // fire on load so yearly bonuses show by default
 
         /* ── Hire Agent Webhook ───────────────────────────── */
         const ORDER_WEBHOOK = "https://n8n.derez.ai/webhook/5318a0d8-d064-42fb-95b7-aa5552cb3fa9";
@@ -2335,6 +2350,7 @@
             const agent = document.getElementById('pricing-agent').value;
             const period = document.getElementById('pricing-period').value;
             const location = document.getElementById('pricing-location').value;
+            const coupon = document.getElementById('pricing-coupon').value.trim();
 
             try {
                 await fetch(ORDER_WEBHOOK, {
@@ -2345,6 +2361,7 @@
                         agent: agent,
                         period: period,
                         location: location,
+                        coupon: coupon || null,
                     }),
                 });
             } catch (err) {