<style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n background: #0a0a0a;\n color: #ffffff;\n font-family: 'DM Sans', sans-serif;\n line-height: 1.6;\n min-height: 100vh;\n }\n\n .container {\n max-width: 720px;\n margin: 0 auto;\n padding: 40px 24px;\n min-height: 100vh;\n }\n\n h1, h2, h3 {\n font-family: 'Space Grotesk', sans-serif;\n }\n\n /* Start Screen */\n #start-screen {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 80vh;\n text-align: center;\n animation: fadeIn 0.5s ease;\n }\n\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .start-title {\n font-size: 2rem;\n font-weight: 700;\n color: #ffffff;\n margin-bottom: 12px;\n line-height: 1.2;\n }\n\n .start-subtitle {\n font-size: 1.1rem;\n color: #aaaaaa;\n margin-bottom: 24px;\n }\n\n .start-description {\n font-size: 1rem;\n color: #888888;\n max-width: 560px;\n margin-bottom: 32px;\n }\n\n .start-meta {\n font-size: 0.9rem;\n color: #666666;\n margin-bottom: 32px;\n }\n\n .author-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background: #111111;\n border: 1px solid #222222;\n border-radius: 20px;\n padding: 8px 16px;\n margin-bottom: 24px;\n font-size: 0.85rem;\n color: #aaaaaa;\n }\n\n .author-badge span {\n color: #00D4FF;\n }\n\n .btn-primary {\n background: #00D4FF;\n color: #0a0a0a;\n font-family: 'DM Sans', sans-serif;\n font-weight: 600;\n font-size: 1rem;\n padding: 16px 48px;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n }\n\n .btn-primary:hover {\n transform: scale(1.03);\n box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);\n }\n\n .btn-primary:focus {\n outline: 2px solid #00D4FF;\n outline-offset: 2px;\n }\n\n /* Calculator Screen */\n #calculator-screen {\n display: none;\n animation: fadeIn 0.3s ease;\n }\n\n .calculator-header {\n text-align: center;\n margin-bottom: 32px;\n }\n\n .calculator-header h2 {\n font-size: 1.5rem;\n font-weight: 600;\n margin-bottom: 8px;\n }\n\n .calculator-header p {\n color: #888888;\n font-size: 0.95rem;\n }\n\n .input-section {\n background: #111111;\n border: 1px solid #222222;\n border-radius: 12px;\n padding: 32px;\n margin-bottom: 24px;\n }\n\n .section-title {\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 2px;\n color: #00D4FF;\n margin-bottom: 24px;\n }\n\n .input-group {\n margin-bottom: 24px;\n }\n\n .input-group:last-child {\n margin-bottom: 0;\n }\n\n .input-label {\n display: block;\n font-weight: 500;\n color: #ffffff;\n margin-bottom: 8px;\n font-size: 0.95rem;\n }\n\n .input-hint {\n display: block;\n font-size: 0.8rem;\n color: #666666;\n margin-bottom: 12px;\n }\n\n .input-field {\n width: 100%;\n background: #1a1a1a;\n border: 1px solid #333333;\n border-radius: 8px;\n padding: 14px 16px;\n color: #ffffff;\n font-family: 'DM Sans', sans-serif;\n font-size: 1rem;\n transition: all 0.2s ease;\n }\n\n .input-field:hover {\n border-color: #444444;\n }\n\n .input-field:focus {\n outline: none;\n border-color: #00D4FF;\n background: #1a1a2a;\n }\n\n .input-with-prefix {\n position: relative;\n }\n\n .input-prefix {\n position: absolute;\n left: 16px;\n top: 50%;\n transform: translateY(-50%);\n color: #666666;\n font-size: 1rem;\n }\n\n .input-with-prefix .input-field {\n padding-left: 32px;\n }\n\n .input-with-suffix {\n position: relative;\n }\n\n .input-suffix {\n position: absolute;\n right: 16px;\n top: 50%;\n transform: translateY(-50%);\n color: #666666;\n font-size: 0.9rem;\n }\n\n .input-with-suffix .input-field {\n padding-right: 60px;\n }\n\n select.input-field {\n cursor: pointer;\n appearance: none;\n background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666666' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");\n background-repeat: no-repeat;\n background-position: right 16px center;\n }\n\n /* Radio Options */\n .radio-group {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n }\n\n .radio-option {\n flex: 1;\n min-width: 100px;\n }\n\n .radio-option input {\n display: none;\n }\n\n .radio-option label {\n display: block;\n background: #1a1a1a;\n border: 1px solid #333333;\n border-radius: 8px;\n padding: 12px 16px;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s ease;\n font-size: 0.9rem;\n color: #cccccc;\n }\n\n .radio-option label:hover {\n border-color: #00D4FF;\n color: #ffffff;\n }\n\n .radio-option input:checked + label {\n border-color: #00D4FF;\n background: rgba(0, 212, 255, 0.1);\n color: #ffffff;\n }\n\n .radio-option input:focus + label {\n outline: 2px solid #00D4FF;\n outline-offset: 2px;\n }\n\n /* Results Section */\n .results-section {\n background: #111111;\n border: 1px solid #222222;\n border-radius: 12px;\n padding: 32px;\n margin-bottom: 24px;\n }\n\n .result-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 0;\n border-bottom: 1px solid #222222;\n }\n\n .result-item:last-child {\n border-bottom: none;\n }\n\n .result-label {\n color: #aaaaaa;\n font-size: 0.95rem;\n }\n\n .result-value {\n font-family: 'Space Grotesk', sans-serif;\n font-size: 1.25rem;\n font-weight: 600;\n color: #ffffff;\n }\n\n .result-value.highlight {\n background: linear-gradient(135deg, #00D4FF, #7B61FF);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n font-size: 1.5rem;\n }\n\n .result-value.secondary {\n color: #00D4FF;\n }\n\n /* Effective Rate Status */\n .rate-status {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 8px;\n font-size: 0.85rem;\n }\n\n .rate-status.positive {\n color: #4ade80;\n }\n\n .rate-status.negative {\n color: #f87171;\n }\n\n /* Guidance Section */\n .guidance-section {\n background: #111111;\n border: 1px solid #222222;\n border-radius: 12px;\n padding: 32px;\n margin-bottom: 24px;\n }\n\n .guidance-item {\n padding: 16px;\n background: #0a0a0a;\n border-radius: 8px;\n margin-bottom: 12px;\n }\n\n .guidance-item:last-child {\n margin-bottom: 0;\n }\n\n .guidance-item h4 {\n font-family: 'Space Grotesk', sans-serif;\n font-size: 0.95rem;\n font-weight: 600;\n color: #ffffff;\n margin-bottom: 8px;\n }\n\n .guidance-item p {\n font-size: 0.9rem;\n color: #888888;\n }\n\n /* Pricing Reference */\n .pricing-reference {\n background: #111111;\n border: 1px solid #222222;\n border-radius: 12px;\n padding: 32px;\n margin-bottom: 24px;\n }\n\n .pricing-table {\n width: 100%;\n }\n\n .pricing-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 0;\n border-bottom: 1px solid #1a1a1a;\n }\n\n .pricing-row:last-child {\n border-bottom: none;\n }\n\n .pricing-type {\n color: #cccccc;\n font-size: 0.9rem;\n }\n\n .pricing-range {\n font-family: 'Space Grotesk', sans-serif;\n color: #00D4FF;\n font-weight: 600;\n font-size: 0.95rem;\n }\n\n /* CTA Section */\n .cta-section {\n text-align: center;\n padding: 32px;\n background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(123, 97, 255, 0.1));\n border: 1px solid #222222;\n border-radius: 12px;\n margin-bottom: 24px;\n }\n\n .cta-section h3 {\n font-size: 1.25rem;\n font-weight: 600;\n margin-bottom: 12px;\n }\n\n .cta-section p {\n color: #888888;\n margin-bottom: 24px;\n font-size: 0.95rem;\n }\n\n .btn-secondary {\n background: transparent;\n border: 1px solid #333333;\n color: #888888;\n font-family: 'DM Sans', sans-serif;\n font-weight: 500;\n font-size: 0.95rem;\n padding: 12px 24px;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n margin-top: 16px;\n }\n\n .btn-secondary:hover {\n border-color: #00D4FF;\n color: #ffffff;\n }\n\n /* Footer */\n .calculator-footer {\n text-align: center;\n padding-top: 24px;\n border-top: 1px solid #222222;\n }\n\n .calculator-footer p {\n color: #666666;\n font-size: 0.85rem;\n }\n\n /* Mobile Responsive */\n @media (max-width: 600px) {\n .container {\n padding: 20px 16px;\n }\n\n .start-title {\n font-size: 1.5rem;\n }\n\n .input-section,\n .results-section,\n .guidance-section,\n .pricing-reference,\n .cta-section {\n padding: 24px 16px;\n }\n\n .radio-group {\n flex-direction: column;\n }\n\n .radio-option {\n min-width: 100%;\n }\n\n .result-item {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n\n .result-value {\n font-size: 1.1rem;\n }\n\n .result-value.highlight {\n font-size: 1.25rem;\n }\n\n .pricing-row {\n flex-direction: column;\n align-items: flex-start;\n gap: 4px;\n }\n }\n\n /* Accessibility */\n *:focus-visible {\n outline: 2px solid #00D4FF;\n outline-offset: 2px;\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n </style>\n<div class="container">\n <!-- Start Screen -->\n <div id="start-screen">\n <div class="author-badge">\n Created by <span>David from Lemonade</span>\n </div>\n <h1 class="start-title">Landing Page Build Pricing Calculator</h1>\n <p class="start-subtitle">Scope and quote one-off landing page projects with confidence</p>\n <p class="start-description">\n Stop second-guessing your quotes or leaving money on the table. This calculator factors in complexity, platform, client readiness, and revision buffers to generate profitable pricing—so you know your floor and can protect your margins.\n </p>\n <p class="start-meta">7 inputs • Takes 5-10 minutes • Get instant pricing guidance</p>\n <button class="btn-primary" onclick="startCalculator()" aria-label="Start the pricing calculator">\n START CALCULATOR\n </button>\n </div>\n\n <!-- Calculator Screen -->\n <div id="calculator-screen">\n <div class="calculator-header">\n <h2>Project Pricing Calculator</h2>\n <p>Fill in the details below and see your pricing instantly</p>\n </div>\n\n <!-- Input Section -->\n <div class="input-section">\n <h3 class="section-title">Project Inputs</h3>\n \n <div class="input-group">\n <label class="input-label" for="hourlyRate">Hourly Rate</label>\n <span class="input-hint">Your baseline hourly rate for design/dev work</span>\n <div class="input-with-prefix">\n <span class="input-prefix">£</span>\n <input type="number" id="hourlyRate" class="input-field" value="75" min="0" step="5" oninput="calculateResults()" aria-describedby="hourlyRate-hint">\n </div>\n </div>\n\n <div class="input-group">\n <label class="input-label" for="designHours">Estimated Design Hours</label>\n <span class="input-hint">Hours needed for wireframes, mockups, and design revisions</span>\n <div class="input-with-suffix">\n <input type="number" id="designHours" class="input-field" value="4" min="0" step="0.5" oninput="calculateResults()">\n <span class="input-suffix">hours</span>\n </div>\n </div>\n\n <div class="input-group">\n <label class="input-label" for="devHours">Estimated Development Hours</label>\n <span class="input-hint">Hours needed for platform setup, responsive build, and integrations</span>\n <div class="input-with-suffix">\n <input type="number" id="devHours" class="input-field" value="6" min="0" step="0.5" oninput="calculateResults()">\n <span class="input-suffix">hours</span>\n </div>\n </div>\n\n <div class="input-group">\n <label class="input-label" for="revisionBuffer">Revision Buffer</label>\n <span class="input-hint">Industry standard is 15-25% depending on client type</span>\n <select id="revisionBuffer" class="input-field" onchange="calculateResults()">\n <option value="0.10">10% - Very organized client</option>\n <option value="0.15">15% - Standard buffer</option>\n <option value="0.20" selected>20% - Typical client</option>\n <option value="0.25">25% - Complex project</option>\n <option value="0.30">30% - High revision risk</option>\n </select>\n </div>\n\n <div class="input-group">\n <label class="input-label">Platform Complexity</label>\n <span class="input-hint">Based on client's existing tech stack or preferred platform</span>\n <div class="radio-group" role="radiogroup" aria-label="Platform Complexity">\n <div class="radio-option">\n <input type="radio" name="platform" id="platform-webflow" value="1.0" checked onchange="calculateResults()">\n <label for="platform-webflow">Webflow<br><small style="color:#666">×1.0</small></label>\n </div>\n <div class="radio-option">\n <input type="radio" name="platform" id="platform-wordpress" value="1.2" onchange="calculateResults()">\n <label for="platform-wordpress">WordPress<br><small style="color:#666">×1.2</small></label>\n </div>\n <div class="radio-option">\n <input type="radio" name="platform" id="platform-custom" value="1.5" onchange="calculateResults()">\n <label for="platform-custom">Custom<br><small style="color:#666">×1.5</small></label>\n </div>\n </div>\n </div>\n\n <div class="input-group">\n <label class="input-label">Client Readiness Score</label>\n <span class="input-hint">How prepared is the client with assets and copy?</span>\n <div class="radio-group" role="radiogroup" aria-label="Client Readiness">\n <div class="radio-option">\n <input type="radio" name="readiness" id="readiness-1" value="1" onchange="calculateResults()">\n <label for="readiness-1">1 - No assets/copy</label>\n </div>\n <div class="radio-option">\n <input type="radio" name="readiness" id="readiness-2" value="2" checked onchange="calculateResults()">\n <label for="readiness-2">2 - Partial assets</label>\n </div>\n <div class="radio-option">\n <input type="radio" name="readiness" id="readiness-3" value="3" onchange="calculateResults()">\n <label for="readiness-3">3 - Fully ready</label>\n </div>\n </div>\n </div>\n\n <div class="input-group">\n <label class="input-label">Analytics/Tracking Setup</label>\n <span class="input-hint">Additional tracking implementation required</span>\n <div class="radio-group" role="radiogroup" aria-label="Analytics Setup">\n <div class="radio-option">\n <input type="radio" name="analytics" id="analytics-0" value="0" onchange="calculateResults()">\n <label for="analytics-0">None</label>\n </div>\n <div class="radio-option">\n <input type="radio" name="analytics" id="analytics-1" value="1" checked onchange="calculateResults()">\n <label for="analytics-1">Basic GTM</label>\n </div>\n <div class="radio-option">\n <input type="radio" name="analytics" id="analytics-2" value="2" onchange="calculateResults()">\n <label for="analytics-2">Full Analytics + Heatmaps</label>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Results Section -->\n <div class="results-section" aria-live="polite">\n <h3 class="section-title">Calculated Results</h3>\n \n <div class="result-item">\n <span class="result-label">Base Project Hours</span>\n <span class="result-value" id="baseHours">10 hours</span>\n </div>\n \n <div class="result-item">\n <span class="result-label">Adjusted Project Hours</span>\n <span class="result-value secondary" id="adjustedHours">14.4 hours</span>\n </div>\n \n <div class="result-item">\n <span class="result-label">Minimum Project Cost</span>\n <span class="result-value" id="minCost">£1,080</span>\n </div>\n \n <div class="result-item">\n <div>\n <span class="result-label">Recommended Quote</span>\n <div class="rate-status" id="rateStatus"></div>\n </div>\n <span class="result-value highlight" id="recommendedQuote">£1,350</span>\n </div>\n \n <div class="result-item">\n <span class="result-label">Effective Hourly Rate</span>\n <span class="result-value secondary" id="effectiveRate">£93.75/hr</span>\n </div>\n </div>\n\n <!-- Guidance Section -->\n <div class="guidance-section" id="guidanceSection">\n <h3 class="section-title">What This Means</h3>\n <div id="guidanceContent"></div>\n </div>\n\n <!-- Pricing Reference -->\n <div class="pricing-reference">\n <h3 class="section-title">Market Pricing Reference</h3>\n <div class="pricing-table">\n <div class="pricing-row">\n <span class="pricing-type">Design Only (no dev)</span>\n <span class="pricing-range">£500-1,000</span>\n </div>\n <div class="pricing-row">\n <span class="pricing-type">Simple Landing Page (Webflow)</span>\n <span class="pricing-range">£500-2,000</span>\n </div>\n <div class="pricing-row">\n <span class="pricing-type">Standard Landing Page</span>\n <span class="pricing-range">£1,500-3,000</span>\n </div>\n <div class="pricing-row">\n <span class="pricing-type">Complex + Analytics</span>\n <span class="pricing-range">£2,500-4,500</span>\n </div>\n <div class="pricing-row">\n <span class="pricing-type">Template System (reusable)</span>\n <span class="pricing-range">£3,000-5,000+</span>\n </div>\n </div>\n </div>\n\n <!-- CTA Section -->\n <div class="cta-section">\n <h3>Need Help With Your Pricing Strategy?</h3>\n <p>Book a free strategy call to discuss your service packaging and pricing</p>\n <a href="https://calendly.com/billythemarketer/30min" target="_blank" rel="noopener">\n <button class="btn-primary">Book a Free Strategy Call</button>\n </a>\n <br>\n <button class="btn-secondary" onclick="resetCalculator()">Reset Calculator</button>\n </div>\n\n <!-- Footer -->\n <div class="calculator-footer">\n <p>Built by David from Lemonade • Managed $50M+ in ad spend • Scaled 30+ DTC brands</p>\n </div>\n </div>\n </div>\n<script>\n // State management\n const state = {\n hourlyRate: 75,\n designHours: 4,\n devHours: 6,\n revisionBuffer: 0.20,\n platformMultiplier: 1.0,\n clientReadiness: 2,\n analyticsSetup: 1\n };\n\n // DOM Elements\n const startScreen = document.getElementById('start-screen');\n const calculatorScreen = document.getElementById('calculator-screen');\n\n // Start Calculator\n function startCalculator() {\n startScreen.style.display = 'none';\n calculatorScreen.style.display = 'block';\n loadFromLocalStorage();\n calculateResults();\n }\n\n // Calculate and display results\n function calculateResults() {\n // Get input values\n state.hourlyRate = parseFloat(document.getElementById('hourlyRate').value) || 0;\n state.designHours = parseFloat(document.getElementById('designHours').value) || 0;\n state.devHours = parseFloat(document.getElementById('devHours').value) || 0;\n state.revisionBuffer = parseFloat(document.getElementById('revisionBuffer').value) || 0.20;\n \n // Get platform multiplier\n const platformInputs = document.querySelectorAll('input[name="platform"]');\n platformInputs.forEach(input => {\n if (input.checked) state.platformMultiplier = parseFloat(input.value);\n });\n \n // Get client readiness\n const readinessInputs = document.querySelectorAll('input[name="readiness"]');\n readinessInputs.forEach(input => {\n if (input.checked) state.clientReadiness = parseInt(input.value);\n });\n \n // Get analytics setup\n const analyticsInputs = document.querySelectorAll('input[name="analytics"]');\n analyticsInputs.forEach(input => {\n if (input.checked) state.analyticsSetup = parseInt(input.value);\n });\n\n // Calculate base hours\n const baseHours = state.designHours + state.devHours;\n \n // Add analytics hours (0 = 0hrs, 1 = 2hrs, 2 = 4hrs)\n const analyticsHours = state.analyticsSetup * 2;\n const baseWithAnalytics = baseHours + analyticsHours;\n \n // Calculate client readiness factor (1 = 1.35, 2 = 1.2, 3 = 1.05)\n const readinessFactor = 1.5 - (state.clientReadiness * 0.15);\n \n // Adjusted hours formula\n const adjustedHours = baseWithAnalytics * (1 + state.revisionBuffer) * state.platformMultiplier * readinessFactor;\n \n // Cost calculations\n const minCost = adjustedHours * state.hourlyRate;\n const recommendedQuote = minCost * 1.25;\n const effectiveRate = adjustedHours > 0 ? recommendedQuote / adjustedHours : 0;\n\n // Update display\n document.getElementById('baseHours').textContent = baseWithAnalytics.toFixed(1) + ' hours';\n document.getElementById('adjustedHours').textContent = adjustedHours.toFixed(1) + ' hours';\n document.getElementById('minCost').textContent = formatCurrency(minCost);\n document.getElementById('recommendedQuote').textContent = formatCurrency(recommendedQuote);\n document.getElementById('effectiveRate').textContent = formatCurrency(effectiveRate) + '/hr';\n\n // Rate status\n const rateStatus = document.getElementById('rateStatus');\n if (effectiveRate >= state.hourlyRate) {\n const premium = ((effectiveRate / state.hourlyRate - 1) * 100).toFixed(0);\n rateStatus.className = 'rate-status positive';\n rateStatus.innerHTML = `✓ ${premium}% above your target rate`;\n } else {\n const deficit = ((1 - effectiveRate / state.hourlyRate) * 100).toFixed(0);\n rateStatus.className = 'rate-status negative';\n rateStatus.innerHTML = `⚠ ${deficit}% below your target rate`;\n }\n\n // Update guidance\n updateGuidance(adjustedHours, effectiveRate, recommendedQuote);\n\n // Save to localStorage\n saveToLocalStorage();\n }\n\n // Format currency\n function formatCurrency(value) {\n return '£' + value.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ',');\n }\n\n // Update guidance section\n function updateGuidance(adjustedHours, effectiveRate, recommendedQuote) {\n const guidance = [];\n\n // Effective rate guidance\n if (effectiveRate < state.hourlyRate) {\n guidance.push({\n title: '⚠️ Your effective rate is below target',\n text: 'Consider increasing your Recommended Quote multiplier or pushing back on scope. Projects that drag your effective rate down aren\'t sustainable long-term.'\n });\n } else {\n guidance.push({\n title: '✅ Healthy margin achieved',\n text: `Your effective rate of ${formatCurrency(effectiveRate)}/hr gives you buffer for scope creep and revision requests while still hitting your targets.`\n });\n }\n\n // Client readiness guidance\n if (state.clientReadiness === 1) {\n guidance.push({\n title: '📋 Client needs preparation work',\n text: 'Add a "brand discovery" line item or require the client to provide assets before you start. Projects with unprepared clients always run over budget.'\n });\n }\n\n // Project size guidance\n if (adjustedHours > 20) {\n guidance.push({\n title: '📊 Consider reframing the project',\n text: 'At 20+ hours, this might be better scoped as a mini-site project rather than a "one-off landing page." Different positioning = different pricing expectations.'\n });\n } else if (adjustedHours < 8) {\n guidance.push({\n title: '⚡ Quick turnaround opportunity',\n text: 'This is a lightweight project. Consider whether you want to bundle with other services or position as a fast-delivery premium option.'\n });\n }\n\n // Quote range guidance\n if (recommendedQuote < 500) {\n guidance.push({\n title: '💡 Very small project',\n text: 'At this price point, make sure the project is worth your time. Consider if it leads to bigger opportunities or if it\'s taking time from higher-value work.'\n });\n } else if (recommendedQuote > 4000) {\n guidance.push({\n title: '🎯 Premium project territory',\n text: 'You\'re in the higher end of landing page pricing. Make sure you can articulate the value clearly and that the client understands what they\'re getting.'\n });\n }\n\n // Render guidance\n const guidanceContent = document.getElementById('guidanceContent');\n guidanceContent.innerHTML = guidance.map(item => `\n <div class="guidance-item">\n <h4>${item.title}</h4>\n <p>${item.text}</p>\n </div>\n `).join('');\n }\n\n // Save to localStorage\n function saveToLocalStorage() {\n const data = {\n hourlyRate: document.getElementById('hourlyRate').value,\n designHours: document.getElementById('designHours').value,\n devHours: document.getElementById('devHours').value,\n revisionBuffer: document.getElementById('revisionBuffer').value,\n platform: document.querySelector('input[name="platform"]:checked')?.value,\n readiness: document.querySelector('input[name="readiness"]:checked')?.value,\n analytics: document.querySelector('input[name="analytics"]:checked')?.value\n };\n localStorage.setItem('landing_page_calculator', JSON.stringify(data));\n }\n\n // Load from localStorage\n function loadFromLocalStorage() {\n const saved = localStorage.getItem('landing_page_calculator');\n if (saved) {\n try {\n const data = JSON.parse(saved);\n if (data.hourlyRate) document.getElementById('hourlyRate').value = data.hourlyRate;\n if (data.designHours) document.getElementById('designHours').value = data.designHours;\n if (data.devHours) document.getElementById('devHours').value = data.devHours;\n if (data.revisionBuffer) document.getElementById('revisionBuffer').value = data.revisionBuffer;\n \n if (data.platform) {\n document.querySelectorAll('input[name="platform"]').forEach(input => {\n input.checked = input.value === data.platform;\n });\n }\n \n if (data.readiness) {\n document.querySelectorAll('input[name="readiness"]').forEach(input => {\n input.checked = input.value === data.readiness;\n });\n }\n \n if (data.analytics) {\n document.querySelectorAll('input[name="analytics"]').forEach(input => {\n input.checked = input.value === data.analytics;\n });\n }\n } catch (e) {\n console.log('Could not load saved data');\n }\n }\n }\n\n // Reset calculator\n function resetCalculator() {\n document.getElementById('hourlyRate').value = 75;\n document.getElementById('designHours').value = 4;\n document.getElementById('devHours').value = 6;\n document.getElementById('revisionBuffer').value = '0.20';\n document.getElementById('platform-webflow').checked = true;\n document.getElementById('readiness-2').checked = true;\n document.getElementById('analytics-1').checked = true;\n localStorage.removeItem('landing_page_calculator');\n calculateResults();\n }\n\n // Keyboard navigation\n document.addEventListener('keydown', function(e) {\n // Number keys for quick input focus\n if (e.key === 'Escape') {\n document.activeElement.blur();\n }\n });\n\n // Initialize on page load - check if should resume\n document.addEventListener('DOMContentLoaded', function() {\n const saved = localStorage.getItem('landing_page_calculator');\n if (saved) {\n // Could add a "Resume session?" prompt here\n // For now, just keep the start screen\n }\n });\n </script>