<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 }\n\n .container {\n max-width: 720px;\n margin: 0 auto;\n padding: 40px 24px;\n }\n\n h1, h2, h3 {\n font-family: 'Space Grotesk', sans-serif;\n }\n\n /* Start Screen */\n #start-screen {\n text-align: center;\n }\n\n .start-emoji {\n font-size: 3rem;\n margin-bottom: 16px;\n }\n\n .start-title {\n font-family: 'Space Grotesk', sans-serif;\n font-size: 2rem;\n font-weight: 700;\n color: #ffffff;\n margin-bottom: 12px;\n }\n\n .start-subtitle {\n font-family: 'DM Sans', sans-serif;\n font-size: 1.1rem;\n color: #aaaaaa;\n margin-bottom: 24px;\n }\n\n .start-description {\n font-family: 'DM Sans', sans-serif;\n font-size: 1rem;\n color: #888888;\n max-width: 560px;\n margin: 0 auto 24px;\n }\n\n .start-meta {\n font-family: 'DM Sans', sans-serif;\n font-size: 0.9rem;\n color: #666666;\n margin-bottom: 32px;\n }\n\n .start-meta span {\n margin: 0 12px;\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 /* Question Container */\n #question-container {\n opacity: 1;\n transition: opacity 0.3s ease;\n }\n\n .progress-label {\n font-family: 'DM Sans', sans-serif;\n font-size: 0.85rem;\n color: #888888;\n margin-bottom: 8px;\n }\n\n .progress-bar {\n height: 6px;\n background: #222222;\n border-radius: 3px;\n margin-bottom: 24px;\n overflow: hidden;\n }\n\n .progress-fill {\n height: 100%;\n background: linear-gradient(90deg, #00D4FF, #7B61FF);\n border-radius: 3px;\n transition: width 0.4s ease;\n width: 0%;\n }\n\n .question-card {\n background: #111111;\n border: 1px solid #222222;\n border-radius: 12px;\n padding: 32px;\n }\n\n .category-label {\n text-transform: uppercase;\n font-size: 0.75rem;\n letter-spacing: 2px;\n color: #00D4FF;\n margin-bottom: 8px;\n font-weight: 500;\n }\n\n .question-text {\n font-family: 'Space Grotesk', sans-serif;\n font-size: 1.25rem;\n font-weight: 600;\n color: #ffffff;\n margin-bottom: 24px;\n }\n\n .options-container {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n\n .option-btn {\n display: block;\n width: 100%;\n background: #1a1a1a;\n border: 1px solid #333333;\n border-radius: 8px;\n padding: 14px 20px;\n color: #cccccc;\n text-align: left;\n cursor: pointer;\n font-family: 'DM Sans', sans-serif;\n font-size: 1rem;\n transition: all 0.2s ease;\n }\n\n .option-btn:hover {\n border-color: #00D4FF;\n color: #ffffff;\n background: #1a1a2a;\n }\n\n .option-btn:focus {\n outline: 2px solid #00D4FF;\n outline-offset: 2px;\n }\n\n .option-btn.selected {\n border-color: #00D4FF;\n background: rgba(0, 212, 255, 0.1);\n color: #ffffff;\n }\n\n .option-btn .option-score {\n color: #666666;\n font-size: 0.85rem;\n margin-right: 8px;\n }\n\n .nav-buttons {\n display: flex;\n justify-content: space-between;\n margin-top: 24px;\n gap: 12px;\n }\n\n .btn-back {\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: 1rem;\n padding: 12px 24px;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n }\n\n .btn-back:hover {\n border-color: #555555;\n color: #ffffff;\n }\n\n .btn-back:focus {\n outline: 2px solid #00D4FF;\n outline-offset: 2px;\n }\n\n .btn-next {\n background: #00D4FF;\n color: #0a0a0a;\n font-family: 'DM Sans', sans-serif;\n font-weight: 600;\n font-size: 1rem;\n padding: 12px 24px;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n }\n\n .btn-next:hover {\n transform: scale(1.02);\n box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);\n }\n\n .btn-next:focus {\n outline: 2px solid #00D4FF;\n outline-offset: 2px;\n }\n\n .btn-next:disabled {\n background: #333333;\n color: #666666;\n cursor: not-allowed;\n transform: none;\n box-shadow: none;\n }\n\n /* Results Screen */\n #results-screen {\n text-align: center;\n }\n\n .results-header {\n margin-bottom: 32px;\n }\n\n .score-display {\n font-family: 'Space Grotesk', sans-serif;\n font-size: 3.5rem;\n font-weight: 700;\n background: linear-gradient(135deg, #00D4FF, #7B61FF);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n margin-bottom: 8px;\n }\n\n .tier-emoji {\n font-size: 2.5rem;\n margin-bottom: 12px;\n }\n\n .tier-title {\n font-family: 'Space Grotesk', sans-serif;\n font-size: 1.5rem;\n font-weight: 600;\n color: #ffffff;\n margin-bottom: 16px;\n }\n\n .tier-description {\n font-family: 'DM Sans', sans-serif;\n font-size: 1rem;\n color: #aaaaaa;\n max-width: 560px;\n margin: 0 auto 24px;\n line-height: 1.7;\n }\n\n .priority-action {\n background: #111111;\n border: 1px solid #222222;\n border-radius: 12px;\n padding: 20px 24px;\n margin-bottom: 32px;\n text-align: left;\n }\n\n .priority-action-label {\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 2px;\n color: #00D4FF;\n margin-bottom: 8px;\n font-weight: 500;\n }\n\n .priority-action-text {\n font-family: 'DM Sans', sans-serif;\n font-size: 1rem;\n color: #ffffff;\n line-height: 1.6;\n }\n\n .category-breakdown {\n background: #111111;\n border: 1px solid #222222;\n border-radius: 12px;\n padding: 24px;\n margin-bottom: 32px;\n text-align: left;\n }\n\n .breakdown-title {\n font-family: 'Space Grotesk', sans-serif;\n font-size: 1.1rem;\n font-weight: 600;\n color: #ffffff;\n margin-bottom: 20px;\n }\n\n .category-item {\n margin-bottom: 16px;\n }\n\n .category-item:last-child {\n margin-bottom: 0;\n }\n\n .category-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 6px;\n }\n\n .category-name {\n font-family: 'DM Sans', sans-serif;\n font-size: 0.9rem;\n color: #cccccc;\n }\n\n .category-score {\n font-family: 'DM Sans', sans-serif;\n font-size: 0.9rem;\n color: #00D4FF;\n font-weight: 600;\n }\n\n .category-bar {\n height: 8px;\n background: #222222;\n border-radius: 4px;\n overflow: hidden;\n }\n\n .category-fill {\n height: 100%;\n background: linear-gradient(90deg, #00D4FF, #7B61FF);\n border-radius: 4px;\n transition: width 0.5s ease;\n }\n\n .weakest-category {\n background: rgba(255, 107, 107, 0.1);\n border: 1px solid rgba(255, 107, 107, 0.3);\n border-radius: 12px;\n padding: 20px 24px;\n margin-bottom: 32px;\n text-align: left;\n }\n\n .weakest-label {\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 2px;\n color: #FF6B6B;\n margin-bottom: 8px;\n font-weight: 500;\n }\n\n .weakest-name {\n font-family: 'Space Grotesk', sans-serif;\n font-size: 1.1rem;\n font-weight: 600;\n color: #ffffff;\n margin-bottom: 8px;\n }\n\n .weakest-recommendation {\n font-family: 'DM Sans', sans-serif;\n font-size: 0.95rem;\n color: #cccccc;\n line-height: 1.6;\n }\n\n .results-cta {\n margin-bottom: 16px;\n }\n\n .btn-restart {\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: 1rem;\n padding: 12px 24px;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n }\n\n .btn-restart:hover {\n border-color: #555555;\n color: #ffffff;\n }\n\n .btn-restart:focus {\n outline: 2px solid #00D4FF;\n outline-offset: 2px;\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 .start-subtitle {\n font-size: 1rem;\n }\n\n .start-meta span {\n display: block;\n margin: 4px 0;\n }\n\n .question-card {\n padding: 24px 20px;\n }\n\n .question-text {\n font-size: 1.1rem;\n }\n\n .option-btn {\n padding: 12px 16px;\n }\n\n .score-display {\n font-size: 2.5rem;\n }\n\n .tier-title {\n font-size: 1.25rem;\n }\n }\n\n @media (max-width: 400px) {\n .nav-buttons {\n flex-direction: column;\n }\n\n .btn-back, .btn-next {\n width: 100%;\n }\n }\n\n /* Screen reader only */\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="start-emoji">📊</div>\n <h1 class="start-title">Meta Ads Budget Allocator Assessment</h1>\n <p class="start-subtitle">Discover Where Your Budget Allocation Strategy Is Leaking Money</p>\n <p class="start-description">Stop guessing where your ad spend should go. This assessment will show you exactly which parts of your budget allocation strategy need attention and what to fix first. Answer honestly based on how things actually are right now.</p>\n <div class="start-meta">\n <span>📝 24 Questions</span>\n <span>⏱️ 15-20 minutes</span>\n </div>\n <button class="btn-primary" onclick="startAssessment()">Start Assessment</button>\n </div>\n\n <!-- Question Container -->\n <div id="question-container" style="display: none;" aria-live="polite">\n <p class="progress-label" id="progress-label">Question 1 of 24</p>\n <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="progress-bar">\n <div class="progress-fill" id="progress-fill"></div>\n </div>\n <div class="question-card">\n <p class="category-label" id="category-label">Category</p>\n <h2 class="question-text" id="question-text">Question text here</h2>\n <div class="options-container" id="options-container" role="radiogroup"></div>\n </div>\n <div class="nav-buttons" id="nav-buttons">\n <button class="btn-back" id="btn-back" onclick="prevQuestion()">← Back</button>\n <button class="btn-next" id="btn-next" onclick="nextQuestion()" disabled>Next →</button>\n </div>\n </div>\n\n <!-- Results Screen -->\n <div id="results-screen" style="display: none;">\n <div class="results-header">\n <div class="tier-emoji" id="tier-emoji">🚀</div>\n <div class="score-display" id="score-display">85%</div>\n <h2 class="tier-title" id="tier-title">Data-Informed</h2>\n <p class="tier-description" id="tier-description">Tier description here</p>\n </div>\n <div class="priority-action">\n <p class="priority-action-label">Priority Action</p>\n <p class="priority-action-text" id="priority-action-text">Action text here</p>\n </div>\n <div class="category-breakdown" id="category-breakdown">\n <h3 class="breakdown-title">Your Scores by Category</h3>\n </div>\n <div class="weakest-category" id="weakest-category">\n <p class="weakest-label">Focus Area</p>\n <h3 class="weakest-name" id="weakest-name">Category Name</h3>\n <p class="weakest-recommendation" id="weakest-recommendation">Recommendation here</p>\n </div>\n <div class="results-cta">\n <a href="https://www.lemonade.io/contact" target="_blank" rel="noopener noreferrer">\n <button class="btn-primary">Book a Free Strategy Call</button>\n </a>\n </div>\n <button class="btn-restart" onclick="restartAssessment()">Retake Assessment</button>\n </div>\n </div>\n<script>\n // Assessment Data\n const assessmentData = {\n title: "Meta Ads Budget Allocator Assessment",\n questions: [\n // Funnel Stage Clarity\n { text: "How well can you define where each of your Meta campaigns sits in the buyer journey (awareness, consideration, conversion)?", category: "Funnel Stage Clarity" },\n { text: "How consistently do you allocate budget based on documented funnel stage performance rather than intuition?", category: "Funnel Stage Clarity" },\n { text: "How reliably can you identify which funnel stage is underperforming based on your current data?", category: "Funnel Stage Clarity" },\n { text: "How well does your team agree on what \"top of funnel\" vs \"bottom of funnel\" means for your brand?", category: "Funnel Stage Clarity" },\n // Performance Signal Quality\n { text: "How accurately does your attribution setup track the true source of conversions?", category: "Performance Signal Quality" },\n { text: "How consistently do you send qualified lead data (not just any lead) back to Meta for optimization?", category: "Performance Signal Quality" },\n { text: "How reliably can you connect Meta spend to actual revenue outcomes, not just platform-reported ROAS?", category: "Performance Signal Quality" },\n { text: "How well do your UTM parameters and CRM tracking give you visibility into what's actually working?", category: "Performance Signal Quality" },\n // Creative-Budget Alignment\n { text: "How well does your creative volume match the budget you're allocating? (More budget = more creative needed)", category: "Creative-Budget Alignment" },\n { text: "How consistently do you have persona-specific creative for each major audience segment you're spending on?", category: "Creative-Budget Alignment" },\n { text: "How reliably does your creative refresh cadence keep up with your spend levels?", category: "Creative-Budget Alignment" },\n { text: "How well can you identify which creative themes justify increased budget allocation?", category: "Creative-Budget Alignment" },\n // Testing & Iteration Protocol\n { text: "How consistently do you use controlled increments (like 20% increases) when testing budget changes?", category: "Testing & Iteration Protocol" },\n { text: "How reliably do you assess whether budget increases yield proportional results before committing?", category: "Testing & Iteration Protocol" },\n { text: "How well documented is your process for reverting budget changes that don't perform?", category: "Testing & Iteration Protocol" },\n { text: "How consistently do you wait for statistical significance before making allocation decisions?", category: "Testing & Iteration Protocol" },\n // Cross-Channel Coordination\n { text: "How well do you coordinate Meta budget decisions with your Google/Search spend?", category: "Cross-Channel Coordination" },\n { text: "How consistently do you account for organic and email performance when deciding Meta allocation?", category: "Cross-Channel Coordination" },\n { text: "How reliably do you understand how Meta spend affects (or is affected by) other channels?", category: "Cross-Channel Coordination" },\n { text: "How well can you explain why Meta gets the budget percentage it does compared to other channels?", category: "Cross-Channel Coordination" },\n // Qualification & Conversion Infrastructure\n { text: "How well does your landing page convert the traffic you're paying for?", category: "Qualification & Conversion Infrastructure" },\n { text: "How consistently do you pre-qualify leads before they reach your sales team?", category: "Qualification & Conversion Infrastructure" },\n { text: "How reliably does your follow-up sequence engage leads within the first hour?", category: "Qualification & Conversion Infrastructure" },\n { text: "How well does your post-click experience match the promise made in your ads?", category: "Qualification & Conversion Infrastructure" }\n ],\n options: [\n { label: "Not at all / This doesn't exist", value: 1, description: "We haven't addressed this or it's completely broken" },\n { label: "Rarely / Very inconsistent", value: 2, description: "We've tried but it only works occasionally" },\n { label: "Sometimes / Works about half the time", value: 3, description: "We have something in place but it's hit or miss" },\n { label: "Usually / Mostly consistent", value: 4, description: "This works most of the time with occasional gaps" },\n { label: "Always / Completely dialed in", value: 5, description: "This is systematic, documented, and reliable" }\n ],\n tiers: [\n { min: 0, max: 40, title: "Guessing Mode", emoji: "🔴", description: "You're making budget allocation decisions based on gut feel, and it's costing you. Your data isn't reliable enough to know what's working, and your creative likely can't support the spend you're pushing. The good news? There's massive upside once you fix the foundations.", action: "Stop optimizing and start measuring - fix your signal quality before touching budget allocation." },\n { min: 41, max: 60, title: "Informed Guessing", emoji: "🟡", description: "You have pieces in place, but you're still making allocation decisions with incomplete information. Some campaigns are probably working great while others are quietly bleeding money. You know enough to be dangerous, but not enough to be confident.", action: "Focus on connecting your lowest-scoring foundation to your allocation decisions - that's where the leak is." },\n { min: 61, max: 80, title: "Data-Informed", emoji: "🟢", description: "You're making allocation decisions based on real signals, not guesses. Your creative supports your spend, and you have processes for testing changes. There's still room to tighten things up, but you're operating with confidence rather than hope.", action: "Double down on your systematic testing protocol - small improvements compound at your level." },\n { min: 81, max: 100, title: "Allocation Machine", emoji: "🚀", description: "Your budget allocation is systematic, documented, and responsive to real performance signals. You know exactly why money goes where it does, and you have the infrastructure to adjust quickly. This is what allows you to scale with confidence.", action: "Look for the next 10% - you're ready to test more aggressive allocation shifts because your feedback loops can handle it." }\n ],\n categoryRecommendations: {\n "Funnel Stage Clarity": "Map every active campaign to a specific funnel stage (awareness/consideration/conversion) this week, then audit whether your budget split matches where prospects are getting stuck.",\n "Performance Signal Quality": "Fix your feedback loop before touching budget - you're optimizing Meta toward the wrong outcomes. Start by auditing what signals you're actually sending back to the platform.",\n "Creative-Budget Alignment": "Your spend is probably outpacing your creative. Calculate how many unique creatives you're running per $10k of spend - if it's less than 5-7, you're asking the algorithm to do too much with too little.",\n "Testing & Iteration Protocol": "Start using 20% increments for any budget change and commit to a 2-week assessment period before deciding if it worked. Document every change and its outcome.",\n "Cross-Channel Coordination": "Build a simple weekly view of spend and results across all channels. You can't allocate Meta budget intelligently if you don't know how it interacts with everything else.",\n "Qualification & Conversion Infrastructure": "Your traffic is worthless if it doesn't convert. Before adding more budget to Meta, audit your landing page conversion rate and lead qualification process - you might be paying to create sales problems."\n }\n };\n\n // State Management\n const state = {\n currentQuestion: 0,\n answers: {},\n totalQuestions: assessmentData.questions.length,\n startTime: null\n };\n\n const STORAGE_KEY = "assessment_meta-ads-budget-allocator";\n let autoAdvanceTimeout = null;\n\n // Initialize\n document.addEventListener('DOMContentLoaded', function() {\n checkForExistingSession();\n setupKeyboardNavigation();\n });\n\n function checkForExistingSession() {\n const saved = localStorage.getItem(STORAGE_KEY);\n if (saved) {\n const data = JSON.parse(saved);\n if (data.answers && Object.keys(data.answers).length > 0) {\n if (confirm("You have a saved assessment in progress. Would you like to continue where you left off?")) {\n state.answers = data.answers;\n state.currentQuestion = data.currentQuestion || 0;\n state.startTime = data.startTime;\n document.getElementById('start-screen').style.display = 'none';\n document.getElementById('question-container').style.display = 'block';\n renderQuestion(state.currentQuestion);\n return;\n } else {\n localStorage.removeItem(STORAGE_KEY);\n }\n }\n }\n }\n\n function startAssessment() {\n state.startTime = Date.now();\n state.currentQuestion = 0;\n state.answers = {};\n \n document.getElementById('start-screen').style.display = 'none';\n document.getElementById('question-container').style.display = 'block';\n \n renderQuestion(0);\n saveState();\n }\n\n function renderQuestion(index) {\n const question = assessmentData.questions[index];\n const totalQuestions = state.totalQuestions;\n const progress = ((index) / totalQuestions) * 100;\n\n // Update progress\n document.getElementById('progress-label').textContent = `Question ${index + 1} of ${totalQuestions}`;\n document.getElementById('progress-fill').style.width = `${progress}%`;\n document.getElementById('progress-bar').setAttribute('aria-valuenow', Math.round(progress));\n\n // Update question\n document.getElementById('category-label').textContent = question.category;\n document.getElementById('question-text').textContent = question.text;\n\n // Render options\n const optionsContainer = document.getElementById('options-container');\n optionsContainer.innerHTML = '';\n \n assessmentData.options.forEach((option, optIndex) => {\n const btn = document.createElement('button');\n btn.className = 'option-btn';\n btn.setAttribute('role', 'radio');\n btn.setAttribute('aria-checked', state.answers[index] === option.value ? 'true' : 'false');\n btn.innerHTML = `<span class="option-score">${option.value}.</span> ${option.label}`;\n \n if (state.answers[index] === option.value) {\n btn.classList.add('selected');\n }\n \n btn.onclick = () => selectOption(index, option.value);\n optionsContainer.appendChild(btn);\n });\n\n // Update navigation\n const backBtn = document.getElementById('btn-back');\n const nextBtn = document.getElementById('btn-next');\n \n backBtn.style.visibility = index === 0 ? 'hidden' : 'visible';\n \n if (index === totalQuestions - 1) {\n nextBtn.textContent = 'See Results →';\n } else {\n nextBtn.textContent = 'Next →';\n }\n \n nextBtn.disabled = state.answers[index] === undefined;\n }\n\n function selectOption(questionIndex, value) {\n // Clear any pending auto-advance\n if (autoAdvanceTimeout) {\n clearTimeout(autoAdvanceTimeout);\n }\n\n state.answers[questionIndex] = value;\n saveState();\n\n // Update UI\n const options = document.querySelectorAll('.option-btn');\n options.forEach((btn, idx) => {\n btn.classList.remove('selected');\n btn.setAttribute('aria-checked', 'false');\n if (assessmentData.options[idx].value === value) {\n btn.classList.add('selected');\n btn.setAttribute('aria-checked', 'true');\n }\n });\n\n document.getElementById('btn-next').disabled = false;\n\n // Auto-advance after delay\n autoAdvanceTimeout = setTimeout(() => {\n nextQuestion();\n }, 400);\n }\n\n function prevQuestion() {\n if (state.currentQuestion > 0) {\n state.currentQuestion--;\n renderQuestion(state.currentQuestion);\n saveState();\n }\n }\n\n function nextQuestion() {\n if (autoAdvanceTimeout) {\n clearTimeout(autoAdvanceTimeout);\n }\n\n if (state.answers[state.currentQuestion] === undefined) {\n return;\n }\n\n if (state.currentQuestion < state.totalQuestions - 1) {\n state.currentQuestion++;\n renderQuestion(state.currentQuestion);\n saveState();\n } else {\n showResults();\n }\n }\n\n function calculateScores() {\n const categories = {};\n const categoryQuestionCounts = {};\n\n // Initialize categories\n assessmentData.questions.forEach((q, idx) => {\n if (!categories[q.category]) {\n categories[q.category] = { score: 0, max: 0, percentage: 0 };\n categoryQuestionCounts[q.category] = 0;\n }\n categoryQuestionCounts[q.category]++;\n categories[q.category].max = categoryQuestionCounts[q.category] * 5;\n });\n\n // Calculate scores\n let totalScore = 0;\n let totalMax = state.totalQuestions * 5;\n\n assessmentData.questions.forEach((q, idx) => {\n const answer = state.answers[idx] || 1;\n categories[q.category].score += answer;\n totalScore += answer;\n });\n\n // Calculate percentages\n let weakest = null;\n let weakestPercentage = 100;\n\n for (const cat in categories) {\n categories[cat].percentage = Math.round((categories[cat].score / categories[cat].max) * 100);\n if (categories[cat].percentage < weakestPercentage) {\n weakestPercentage = categories[cat].percentage;\n weakest = cat;\n }\n }\n\n const totalPercentage = Math.round((totalScore / totalMax) * 100);\n\n return {\n total: totalPercentage,\n categories: categories,\n weakest: weakest\n };\n }\n\n function getTier(percentage) {\n for (const tier of assessmentData.tiers) {\n if (percentage >= tier.min && percentage <= tier.max) {\n return tier;\n }\n }\n return assessmentData.tiers[0];\n }\n\n function showResults() {\n const scores = calculateScores();\n const tier = getTier(scores.total);\n\n document.getElementById('question-container').style.display = 'none';\n document.getElementById('results-screen').style.display = 'block';\n\n // Update results display\n document.getElementById('tier-emoji').textContent = tier.emoji;\n document.getElementById('score-display').textContent = `${scores.total}%`;\n document.getElementById('tier-title').textContent = tier.title;\n document.getElementById('tier-description').textContent = tier.description;\n document.getElementById('priority-action-text').textContent = tier.action;\n\n // Category breakdown\n const breakdownContainer = document.getElementById('category-breakdown');\n breakdownContainer.innerHTML = '<h3 class="breakdown-title">Your Scores by Category</h3>';\n \n const categoryOrder = [\n "Funnel Stage Clarity",\n "Performance Signal Quality",\n "Creative-Budget Alignment",\n "Testing & Iteration Protocol",\n "Cross-Channel Coordination",\n "Qualification & Conversion Infrastructure"\n ];\n\n categoryOrder.forEach(cat => {\n if (scores.categories[cat]) {\n const catData = scores.categories[cat];\n const item = document.createElement('div');\n item.className = 'category-item';\n item.innerHTML = `\n <div class="category-header">\n <span class="category-name">${cat}</span>\n <span class="category-score">${catData.percentage}%</span>\n </div>\n <div class="category-bar">\n <div class="category-fill" style="width: ${catData.percentage}%"></div>\n </div>\n `;\n breakdownContainer.appendChild(item);\n }\n });\n\n // Weakest category\n document.getElementById('weakest-name').textContent = scores.weakest;\n document.getElementById('weakest-recommendation').textContent = assessmentData.categoryRecommendations[scores.weakest];\n\n // Clear localStorage\n localStorage.removeItem(STORAGE_KEY);\n }\n\n function restartAssessment() {\n state.currentQuestion = 0;\n state.answers = {};\n state.startTime = null;\n \n localStorage.removeItem(STORAGE_KEY);\n \n document.getElementById('results-screen').style.display = 'none';\n document.getElementById('start-screen').style.display = 'block';\n }\n\n function saveState() {\n const data = {\n answers: state.answers,\n currentQuestion: state.currentQuestion,\n startTime: state.startTime\n };\n localStorage.setItem(STORAGE_KEY, JSON.stringify(data));\n }\n\n function setupKeyboardNavigation() {\n document.addEventListener('keydown', function(e) {\n const questionContainer = document.getElementById('question-container');\n if (questionContainer.style.display === 'none') return;\n\n // Number keys 1-5 to select options\n if (e.key >= '1' && e.key <= '5') {\n const optionIndex = parseInt(e.key) - 1;\n const options = document.querySelectorAll('.option-btn');\n if (options[optionIndex]) {\n options[optionIndex].click();\n }\n }\n\n // Arrow keys for navigation\n if (e.key === 'ArrowLeft') {\n prevQuestion();\n } else if (e.key === 'ArrowRight') {\n if (state.answers[state.currentQuestion] !== undefined) {\n nextQuestion();\n }\n }\n\n // Arrow up/down for option navigation\n if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n e.preventDefault();\n const options = document.querySelectorAll('.option-btn');\n const focused = document.activeElement;\n let currentIndex = Array.from(options).indexOf(focused);\n \n if (currentIndex === -1) {\n options[0].focus();\n } else {\n if (e.key === 'ArrowUp' && currentIndex > 0) {\n options[currentIndex - 1].focus();\n } else if (e.key === 'ArrowDown' && currentIndex < options.length - 1) {\n options[currentIndex + 1].focus();\n }\n }\n }\n\n // Enter to select focused option\n if (e.key === 'Enter') {\n const focused = document.activeElement;\n if (focused.classList.contains('option-btn')) {\n focused.click();\n }\n }\n });\n }\n </script>