SpaceXAI Grok Build 0.1 – Personal Finance

via xAI · Generated

  • AIMAC Debt 24.12
  • Cost $0.04
  • Total Violations 22
  • HTML Size 80 KB
  • Em Dashes 4

Screenshot

View SpaceXAI Grok Build 0.1 Personal Finance page View Live Page

Accessibility Issues Found

8 Critical 14 Serious

  • color-contrast serious 11 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <span class="uppercase tracking-[1px] text-xs font-semibold text-sky-600">Comprehensive Solutions</span>
  • label critical 8 instances

    Form elements must have labels

    Example HTML <input type="number" id="income" value="7850" class="w-full pl-8 pr-4 py-3 border border-slate-300 focus:border-sky-400 outline-none rounded-2xl te...
  • link-name serious 3 instances

    Links must have discernible text

    Example HTML <a href="#" class="text-slate-400 hover:text-slate-700"><i class="fa-brands fa-twitter"></i></a>

Artifacts

View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aether Finance • Personal Finance</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&amp;family=Space+Grotesk:wght@500;600&amp;display=swap');
        
        :root {
            --primary: #0F172A;
        }
        
        body {
            font-family: 'Inter', system_ui, sans-serif;
        }
        
        .heading-font {
            font-family: 'Space Grotesk', 'Inter', system_ui, sans-serif;
            font-weight: 600;
        }

        .finance-gradient {
            background: linear-gradient(135deg, #0F172A 0%, #1E2937 100%);
        }

        .section-header {
            font-size: 2.25rem;
            line-height: 1.1;
            font-weight: 700;
            letter-spacing: -0.025em;
        }

        .nav-active {
            color: #0EA5E9;
            font-weight: 600;
        }

        .stat-number {
            font-variant-numeric: tabular-nums;
        }

        .finance-card {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .finance-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgb(15 23 42 / 0.1), 0 8px 10px -6px rgb(15 23 42 / 0.1);
        }

        .nav-link {
            transition: color 0.2s ease;
        }
        
        .nav-link:hover {
            color: #0EA5E9;
        }

        .metric-value {
            font-family: 'Space Grotesk', system_ui, sans-serif;
        }

        .insight-card {
            transition: all 0.3s ease;
        }

        .modern-shadow {
            box-shadow: 0 10px 15px -3px rgb(15 23 42 / 0.1), 0 4px 6px -4px rgb(15 23 42 / 0.1);
        }

        .money-green {
            color: #10B981;
        }

        .tail-container {
            max-width: 1280px;
            margin-left: auto;
            margin-right: auto;
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }

        .accordion-open .accordion-content {
            max-height: 200px;
        }

        .hero-bg {
            background-image: linear-gradient(rgba(15, 23, 42, 0.65), rgba(15, 23, 42, 0.55)), url('https://picsum.photos/id/1015/2000/1200');
            background-size: cover;
            background-position: center;
        }
    </style>
</head>
<body class="bg-slate-50 text-slate-800">
    <!-- HEADER -->
    <header class="bg-white border-b border-slate-200 sticky top-0 z-50">
        <div class="max-w-screen-xl mx-auto">
            <div class="px-8 py-5 flex items-center justify-between">
                <!-- Logo -->
                <div class="flex items-center gap-x-3">
                    <div class="flex items-center gap-x-2.5">
                        <img src="https://placehold.co/48x48/0F172A/FFFFFF?text=AF" 
                             alt="Aether Finance Logo" 
                             class="w-11 h-11 rounded-2xl shadow-inner object-cover">
                        <div>
                            <span class="font-bold text-3xl tracking-tighter heading-font text-slate-900">Aether</span>
                            <span class="font-bold text-3xl tracking-tighter heading-font text-sky-600">Finance</span>
                        </div>
                    </div>
                </div>

                <!-- Desktop Navigation -->
                <nav class="hidden md:flex items-center gap-x-8 text-sm font-medium">
                    <a href="#tools" class="nav-link text-slate-700 px-2">Tools</a>
                    <a href="#services" class="nav-link text-slate-700 px-2">Insurance</a>
                    <a href="#budget-planner" class="nav-link text-slate-700 px-2">Budget Planner</a>
                    <a href="#insights" class="nav-link text-slate-700 px-2">Investments</a>
                    <a href="#resources" class="nav-link text-slate-700 px-2">Resources</a>
                    <a href="#about" class="nav-link text-slate-700 px-2">About</a>
                    <a href="#contact" class="nav-link text-slate-700 px-2">Contact</a>
                </nav>

                <!-- Header Actions -->
                <div class="flex items-center gap-x-3">
                    <button onclick="showLoginModal()"
                            class="hidden md:block px-4 py-2 text-sm font-semibold text-slate-700 hover:text-slate-900 transition-colors">
                        Log in
                    </button>
                    <button onclick="startOnboarding()"
                            class="px-5 py-2.5 text-sm font-semibold bg-slate-900 hover:bg-slate-800 transition-all text-white rounded-2xl shadow-sm flex items-center gap-x-2">
                        <span>Get Started</span>
                    </button>
                    
                    <!-- Mobile Menu -->
                    <button id="mobile-menu-button" 
                            class="md:hidden w-10 h-10 flex items-center justify-center text-slate-700 hover:bg-slate-100 rounded-2xl transition-colors"
                            onclick="toggleMobileMenu()">
                        <i class="fa-solid fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- HERO SECTION -->
    <section class="hero-bg h-[640px] flex items-center relative">
        <div class="max-w-screen-xl mx-auto px-8 pt-8">
            <div class="max-w-xl">
                <div class="inline-flex items-center gap-x-2 bg-white/90 backdrop-blur-md px-3 py-1.5 rounded-3xl mb-6 shadow-sm">
                    <div class="flex items-center">
                        <div class="w-2.5 h-2.5 bg-emerald-500 rounded-full animate-pulse"></div>
                        <span class="ml-2 text-xs font-semibold tracking-wider text-emerald-700">2024 TOP RATED</span>
                    </div>
                </div>
                
                <h1 class="text-6xl leading-[1.05] font-bold tracking-tighter text-white heading-font">
                    Take control of<br>your financial<br>future.
                </h1>
                
                <p class="mt-6 max-w-md text-lg text-white/90">
                    Professional-grade tools and expert guidance to build wealth, 
                    manage risk, and achieve lasting financial independence.
                </p>
                
                <div class="mt-8 flex flex-wrap items-center gap-3">
                    <button onclick="document.getElementById('budget-planner').scrollIntoView({ behavior: 'smooth' })" 
                            class="px-7 py-4 text-base font-semibold bg-white hover:bg-slate-100 transition-colors text-slate-900 rounded-3xl shadow-md flex items-center gap-x-2">
                        <span>Start Budget Planner</span>
                    </button>
                    
                    <button onclick="document.getElementById('insights').scrollIntoView({ behavior: 'smooth' })" 
                            class="px-6 py-4 text-base font-semibold border border-white/70 hover:bg-white/10 transition-colors text-white rounded-3xl flex items-center gap-x-2">
                        <span>Explore Investments</span>
                    </button>
                </div>
                
                <div class="mt-8 flex items-center gap-x-4">
                    <div class="flex -space-x-2">
                        <img src="https://i.pravatar.cc/28?u=1" class="w-7 h-7 rounded-full ring-2 ring-white object-cover" alt="">
                        <img src="https://i.pravatar.cc/28?u=2" class="w-7 h-7 rounded-full ring-2 ring-white object-cover" alt="">
                        <img src="https://i.pravatar.cc/28?u=3" class="w-7 h-7 rounded-full ring-2 ring-white object-cover" alt="">
                    </div>
                    <span class="text-white/90 text-sm font-medium">Trusted by 214,000+ individuals</span>
                </div>
            </div>
        </div>
    </section>

    <!-- TRUST BAR -->
    <div class="max-w-screen-xl mx-auto px-8 py-6 border-b border-slate-100">
        <div class="flex flex-wrap items-center justify-center md:justify-between gap-y-4 gap-x-8 text-sm">
            <div class="flex items-center gap-x-8 text-slate-500 text-xs font-medium tracking-wider">
                <div class="flex items-center gap-x-1.5">
                    <i class="fa-solid fa-check text-emerald-500"></i> 
                    <span>SEC Registered</span>
                </div>
                <div class="flex items-center gap-x-1.5">
                    <i class="fa-solid fa-check text-emerald-500"></i> 
                    <span>FIDICIA Certified</span>
                </div>
                <div class="flex items-center gap-x-1.5">
                    <i class="fa-solid fa-check text-emerald-500"></i> 
                    <span>BBB A+ Rated</span>
                </div>
            </div>
            
            <div class="flex items-center gap-x-6">
                <div class="flex items-center text-xs">
                    <span class="font-semibold text-slate-900">4.9/5</span> 
                    <span class="ml-2 text-slate-500">from 42k reviews</span>
                </div>
            </div>
        </div>
    </div>

    <!-- SERVICES SECTION -->
    <section id="services" class="max-w-screen-xl mx-auto px-8 pt-16 pb-12">
        <div class="flex flex-col md:flex-row md:items-end md:justify-between mb-10">
            <div>
                <span class="uppercase tracking-[1px] text-xs font-semibold text-sky-600">Comprehensive Solutions</span>
                <h2 class="section-header text-slate-900 mt-1">Tools built for real life.</h2>
            </div>
            <a href="#tools" class="mt-4 md:mt-0 text-sm font-semibold text-sky-600 hover:text-sky-700 flex items-center gap-x-1">
                View all tools <i class="fa-solid fa-arrow-right ml-1"></i>
            </a>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-5">
            <!-- Service Cards -->
            <div class="finance-card bg-white border border-slate-200 rounded-3xl p-5">
                <div class="w-10 h-10 bg-emerald-100 text-emerald-600 rounded-2xl flex items-center justify-center mb-4">
                    <i class="fa-solid fa-chart-line text-xl"></i>
                </div>
                <h4 class="font-semibold text-lg">Budget Planning</h4>
                <p class="text-sm text-slate-600 mt-1.5 leading-relaxed">Real-time cash flow analysis and automated categorization.</p>
                <div class="mt-4">
                    <a href="#budget-planner" class="text-xs font-semibold text-emerald-700 hover:text-emerald-600 flex items-center">
                        OPEN PLANNER <i class="fa-solid fa-arrow-right ml-1.5 text-xs"></i>
                    </a>
                </div>
            </div>
            
            <div class="finance-card bg-white border border-slate-200 rounded-3xl p-5">
                <div class="w-10 h-10 bg-sky-100 text-sky-600 rounded-2xl flex items-center justify-center mb-4">
                    <i class="fa-solid fa-chart-pie text-xl"></i>
                </div>
                <h4 class="font-semibold text-lg">Investment Management</h4>
                <p class="text-sm text-slate-600 mt-1.5 leading-relaxed">Diversified portfolios with tax optimization strategies.</p>
                <div class="mt-4">
                    <a href="#insights" class="text-xs font-semibold text-sky-700 hover:text-sky-600 flex items-center">
                        START INVESTING <i class="fa-solid fa-arrow-right ml-1.5 text-xs"></i>
                    </a>
                </div>
            </div>
            
            <div class="finance-card bg-white border border-slate-200 rounded-3xl p-5">
                <div class="w-10 h-10 bg-amber-100 text-amber-600 rounded-2xl flex items-center justify-center mb-4">
                    <i class="fa-solid fa-shield-halved text-xl"></i>
                </div>
                <h4 class="font-semibold text-lg">Insurance</h4>
                <p class="text-sm text-slate-600 mt-1.5 leading-relaxed">Compare rates across life, health, auto, and property coverage.</p>
                <div class="mt-4">
                    <button onclick="compareInsurance()" class="text-xs font-semibold text-amber-700 hover:text-amber-600 flex items-center">
                        COMPARE RATES <i class="fa-solid fa-arrow-right ml-1.5 text-xs"></i>
                    </button>
                </div>
            </div>
            
            <div class="finance-card bg-white border border-slate-200 rounded-3xl p-5">
                <div class="w-10 h-10 bg-violet-100 text-violet-600 rounded-2xl flex items-center justify-center mb-4">
                    <i class="fa-solid fa-hand-holding-usd text-xl"></i>
                </div>
                <h4 class="font-semibold text-lg">Retirement Planning</h4>
                <p class="text-sm text-slate-600 mt-1.5 leading-relaxed">Maximize 401(k), IRA, and pension contributions.</p>
                <div class="mt-4">
                    <a href="#tools" class="text-xs font-semibold text-violet-700 hover:text-violet-600 flex items-center">
                        PLAN RETIREMENT <i class="fa-solid fa-arrow-right ml-1.5 text-xs"></i>
                    </a>
                </div>
            </div>
            
            <div class="finance-card bg-white border border-slate-200 rounded-3xl p-5">
                <div class="w-10 h-10 bg-rose-100 text-rose-600 rounded-2xl flex items-center justify-center mb-4">
                    <i class="fa-solid fa-credit-card text-xl"></i>
                </div>
                <h4 class="font-semibold text-lg">Credit Optimization</h4>
                <p class="text-sm text-slate-600 mt-1.5 leading-relaxed">Improve your score and reduce interest expenses.</p>
                <div class="mt-4">
                    <button onclick="alert('Credit optimization tool coming soon. Our advisors are ready to help.')" class="text-xs font-semibold text-rose-700 hover:text-rose-600 flex items-center">
                        IMPROVE SCORE <i class="fa-solid fa-arrow-right ml-1.5 text-xs"></i>
                    </button>
                </div>
            </div>
            
            <div class="finance-card bg-white border border-slate-200 rounded-3xl p-5">
                <div class="w-10 h-10 bg-teal-100 text-teal-600 rounded-2xl flex items-center justify-center mb-4">
                    <i class="fa-solid fa-calculator text-xl"></i>
                </div>
                <h4 class="font-semibold text-lg">Tax Optimization</h4>
                <p class="text-sm text-slate-600 mt-1.5 leading-relaxed">Capital gains planning and tax-efficient strategies.</p>
                <div class="mt-4">
                    <button onclick="document.getElementById('insights').scrollIntoView({ behavior: 'smooth' })" class="text-xs font-semibold text-teal-700 hover:text-teal-600 flex items-center">
                        LEARN MORE <i class="fa-solid fa-arrow-right ml-1.5 text-xs"></i>
                    </button>
                </div>
            </div>
        </div>
    </section>

    <!-- INTERACTIVE ELEMENT: BUDGET PLANNER -->
    <section id="budget-planner" class="max-w-screen-xl mx-auto px-8 py-14 bg-white border-y border-slate-100">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-10">
            <div class="lg:col-span-5">
                <div class="sticky top-24">
                    <span class="px-3 py-1 text-xs font-semibold bg-emerald-100 text-emerald-700 rounded-2xl">INTERACTIVE TOOL</span>
                    <h2 class="section-header text-slate-900 mt-3">Monthly Budget Planner</h2>
                    <p class="text-slate-600 mt-4 text-[15px] leading-relaxed">
                        Get instant clarity on your cash flow. Input your income and expenses below to see your savings rate, 
                        remaining balance, and personalized recommendations. This tool helps you identify opportunities for 
                        improved liquidity and smarter spending.
                    </p>
                    
                    <div class="mt-6 bg-slate-50 border border-slate-200 rounded-3xl p-4">
                        <div class="flex items-center gap-x-3 text-sm">
                            <div class="flex-1">
                                <div class="text-emerald-600 font-semibold">Average user saves</div>
                                <div class="text-3xl font-bold text-emerald-600 metric-value">$1,240</div>
                                <div class="text-xs text-emerald-700">per month after 3 months</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-5 text-xs text-slate-500 flex items-center gap-x-2">
                        <i class="fa-solid fa-info-circle"></i>
                        <span>All calculations are private and stored locally.</span>
                    </div>
                </div>
            </div>
            
            <!-- Budget Calculator -->
            <div class="lg:col-span-7">
                <div class="bg-white border border-slate-200 shadow-sm rounded-3xl p-7 finance-card">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-5">
                        <!-- Income -->
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 mb-1.5">MONTHLY INCOME</label>
                            <div class="relative">
                                <div class="absolute left-4 top-3 text-slate-400">$</div>
                                <input type="number" id="income" value="7850" 
                                       class="w-full pl-8 pr-4 py-3 border border-slate-300 focus:border-sky-400 outline-none rounded-2xl text-lg font-semibold"
                                       oninput="calculateBudget()">
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 mb-1.5">SAVINGS TARGET</label>
                            <div class="relative">
                                <div class="absolute left-4 top-3 text-slate-400">$</div>
                                <input type="number" id="savings-target" value="1800" 
                                       class="w-full pl-8 pr-4 py-3 border border-slate-300 focus:border-sky-400 outline-none rounded-2xl text-lg font-semibold"
                                       oninput="calculateBudget()">
                            </div>
                        </div>
                        
                        <!-- Expenses -->
                        <div class="md:col-span-2 pt-2">
                            <div class="text-xs font-semibold text-slate-600 mb-3">MONTHLY EXPENSES</div>
                            
                            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                                <div>
                                    <label class="text-xs text-slate-500">Housing / Rent</label>
                                    <div class="relative mt-1">
                                        <div class="absolute left-3 top-2.5 text-slate-400">$</div>
                                        <input type="number" id="housing" value="2450" class="w-full pl-7 border border-slate-200 py-2 px-3 rounded-2xl text-sm" oninput="calculateBudget()">
                                    </div>
                                </div>
                                <div>
                                    <label class="text-xs text-slate-500">Utilities &amp; Internet</label>
                                    <div class="relative mt-1">
                                        <div class="absolute left-3 top-2.5 text-slate-400">$</div>
                                        <input type="number" id="utilities" value="285" class="w-full pl-7 border border-slate-200 py-2 px-3 rounded-2xl text-sm" oninput="calculateBudget()">
                                    </div>
                                </div>
                                <div>
                                    <label class="text-xs text-slate-500">Groceries &amp; Food</label>
                                    <div class="relative mt-1">
                                        <div class="absolute left-3 top-2.5 text-slate-400">$</div>
                                        <input type="number" id="food" value="620" class="w-full pl-7 border border-slate-200 py-2 px-3 rounded-2xl text-sm" oninput="calculateBudget()">
                                    </div>
                                </div>
                                <div>
                                    <label class="text-xs text-slate-500">Transportation</label>
                                    <div class="relative mt-1">
                                        <div class="absolute left-3 top-2.5 text-slate-400">$</div>
                                        <input type="number" id="transport" value="310" class="w-full pl-7 border border-slate-200 py-2 px-3 rounded-2xl text-sm" oninput="calculateBudget()">
                                    </div>
                                </div>
                                <div>
                                    <label class="text-xs text-slate-500">Healthcare</label>
                                    <div class="relative mt-1">
                                        <div class="absolute left-3 top-2.5 text-slate-400">$</div>
                                        <input type="number" id="healthcare" value="175" class="w-full pl-7 border border-slate-200 py-2 px-3 rounded-2xl text-sm" oninput="calculateBudget()">
                                    </div>
                                </div>
                                <div>
                                    <label class="text-xs text-slate-500">Entertainment &amp; Misc</label>
                                    <div class="relative mt-1">
                                        <div class="absolute left-3 top-2.5 text-slate-400">$</div>
                                        <input type="number" id="entertainment" value="420" class="w-full pl-7 border border-slate-200 py-2 px-3 rounded-2xl text-sm" oninput="calculateBudget()">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-7 pt-6 border-t border-slate-100 flex flex-col md:flex-row gap-4 items-end">
                        <button onclick="calculateBudget()" 
                                class="flex-1 md:flex-none bg-emerald-600 hover:bg-emerald-700 transition-colors text-white font-semibold px-7 py-[13px] rounded-2xl text-sm flex items-center justify-center gap-x-2">
                            <i class="fa-solid fa-sync-alt"></i> 
                            <span>CALCULATE BUDGET</span>
                        </button>
                        
                        <button onclick="useExampleData()" 
                                class="flex-1 md:flex-none text-sm px-5 py-3 border border-slate-300 hover:bg-slate-50 transition-colors font-medium rounded-2xl text-slate-700">
                            Use Example Data
                        </button>
                    </div>
                    
                    <!-- Results -->
                    <div id="budget-results" class="hidden mt-6 pt-5 border-t">
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                            <div class="bg-slate-50 border border-slate-200 p-3 rounded-2xl">
                                <div class="text-xs text-slate-500 font-medium">TOTAL EXPENSES</div>
                                <div id="total-expenses" class="text-3xl font-bold text-slate-900 metric-value mt-1">$0</div>
                            </div>
                            <div class="bg-slate-50 border border-slate-200 p-3 rounded-2xl">
                                <div class="text-xs text-slate-500 font-medium">REMAINING</div>
                                <div id="remaining" class="text-3xl font-bold money-green metric-value mt-1">$0</div>
                            </div>
                            <div class="bg-slate-50 border border-slate-200 p-3 rounded-2xl">
                                <div class="text-xs text-slate-500 font-medium">SAVINGS RATE</div>
                                <div id="savings-rate" class="text-3xl font-bold text-slate-900 metric-value mt-1">0%</div>
                            </div>
                            <div class="bg-emerald-50 border border-emerald-100 p-3 rounded-2xl">
                                <div class="text-xs text-emerald-700 font-medium">GOAL STATUS</div>
                                <div id="goal-status" class="mt-1 text-lg font-bold"></div>
                            </div>
                        </div>
                        
                        <div id="budget-advice" class="mt-4 text-sm bg-white p-4 border border-slate-100 rounded-2xl text-slate-600 leading-relaxed"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- INSIGHTS / INVESTMENT STRATEGIES SECTION -->
    <section id="insights" class="max-w-screen-xl mx-auto px-8 py-16">
        <div class="flex items-end justify-between mb-9">
            <div>
                <span class="text-xs font-semibold uppercase tracking-wider text-sky-600">Expert Guidance</span>
                <h2 class="section-header">Investment strategies that work.</h2>
            </div>
            <a href="#" class="hidden md:flex items-center gap-x-2 text-sm font-semibold text-sky-700 hover:text-sky-800">
                Browse full library <i class="fa-solid fa-arrow-right-long ml-2"></i>
            </a>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- Insight 1 -->
            <div class="insight-card bg-white border border-slate-200 rounded-3xl overflow-hidden">
                <img src="https://picsum.photos/id/1005/600/220" alt="Diversified portfolio chart" class="w-full h-[160px] object-cover">
                <div class="p-6">
                    <div class="flex items-center gap-x-2">
                        <span class="px-2.5 py-px bg-sky-100 text-sky-700 text-[10px] font-semibold rounded">STRATEGY</span>
                    </div>
                    <h4 class="font-semibold text-xl mt-3">Diversification &amp; Asset Allocation</h4>
                    <p class="mt-3 text-sm text-slate-600 leading-relaxed">
                        Spread risk across equities, bonds, and alternative assets to minimize volatility. 
                        Our research shows that proper allocation can reduce portfolio drawdowns by up to 40% 
                        during market corrections while maintaining strong capital gains over the long term.
                    </p>
                    <div class="flex items-center justify-between mt-5">
                        <button onclick="viewStrategy(1)" class="text-sm font-semibold text-sky-600 hover:text-sky-700 flex items-center gap-x-1">
                            Read full analysis <i class="fa-solid fa-arrow-right text-xs ml-1"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- Insight 2 -->
            <div class="insight-card bg-white border border-slate-200 rounded-3xl overflow-hidden">
                <img src="https://picsum.photos/id/160/600/220" alt="Emergency fund growth" class="w-full h-[160px] object-cover">
                <div class="p-6">
                    <div class="flex items-center gap-x-2">
                        <span class="px-2.5 py-px bg-emerald-100 text-emerald-700 text-[10px] font-semibold rounded">FOUNDATION</span>
                    </div>
                    <h4 class="font-semibold text-xl mt-3">Building an Emergency Fund</h4>
                    <p class="mt-3 text-sm text-slate-600 leading-relaxed">
                        Maintain 4–6 months of essential expenses in highly liquid accounts. 
                        This protects against unexpected job loss or major expenses without disrupting 
                        long-term investment strategies or forcing the liquidation of assets at unfavorable times.
                    </p>
                    <div class="flex items-center justify-between mt-5">
                        <button onclick="viewStrategy(2)" class="text-sm font-semibold text-sky-600 hover:text-sky-700 flex items-center gap-x-1">
                            Learn how to build it <i class="fa-solid fa-arrow-right text-xs ml-1"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- Insight 3 -->
            <div class="insight-card bg-white border border-slate-200 rounded-3xl overflow-hidden">
                <img src="https://picsum.photos/id/201/600/220" alt="Retirement planning" class="w-full h-[160px] object-cover">
                <div class="p-6">
                    <div class="flex items-center gap-x-2">
                        <span class="px-2.5 py-px bg-violet-100 text-violet-700 text-[10px] font-semibold rounded">RETIREMENT</span>
                    </div>
                    <h4 class="font-semibold text-xl mt-3">Retirement Planning &amp; Tax Optimization</h4>
                    <p class="mt-3 text-sm text-slate-600 leading-relaxed">
                        Maximize contributions to tax-advantaged accounts like Roth IRAs and 401(k)s. 
                        Strategic tax-loss harvesting and asset location can significantly reduce your 
                        lifetime tax burden while accelerating compound growth toward your retirement goals.
                    </p>
                    <div class="flex items-center justify-between mt-5">
                        <button onclick="viewStrategy(3)" class="text-sm font-semibold text-sky-600 hover:text-sky-700 flex items-center gap-x-1">
                            Explore retirement tools <i class="fa-solid fa-arrow-right text-xs ml-1"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- TESTIMONIALS -->
    <section class="max-w-screen-xl mx-auto px-8 py-12 bg-slate-900 text-white rounded-[3rem] mx-4 md:mx-auto">
        <div class="px-2">
            <div class="flex items-center justify-between mb-8 px-4">
                <div>
                    <span class="text-sky-400 text-xs font-semibold">REAL RESULTS</span>
                    <h3 class="text-white text-3xl font-semibold tracking-tight">What our members say</h3>
                </div>
                <div class="hidden md:block">
                    <div class="flex items-center text-sm">
                        <span class="font-medium">4.97</span> 
                        <span class="ml-1 text-sky-400">•</span> 
                        <span class="ml-1.5 text-slate-300">42,819 reviews</span>
                    </div>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
                <!-- Testimonial 1 -->
                <div class="bg-slate-800 rounded-3xl p-6">
                    <div class="flex items-center gap-x-3">
                        <img src="https://i.pravatar.cc/40?u=sarah" alt="Sarah Patel" class="w-9 h-9 rounded-2xl object-cover">
                        <div>
                            <div class="font-semibold">Sarah Patel</div>
                            <div class="text-xs text-slate-400">Product Designer, SF • 3 years</div>
                        </div>
                    </div>
                    <p class="mt-4 text-sm leading-relaxed text-slate-300">"Aether's budget planner and investment tools completely transformed how I manage money. I went from living paycheck-to-paycheck to saving $38k in 14 months."</p>
                    <div class="flex items-center gap-x-1 mt-5">
                        <div class="text-emerald-400 text-xs font-medium">— Increased savings rate to 31%</div>
                    </div>
                </div>
                
                <!-- Testimonial 2 -->
                <div class="bg-slate-800 rounded-3xl p-6">
                    <div class="flex items-center gap-x-3">
                        <img src="https://i.pravatar.cc/40?u=michael" alt="Michael Torres" class="w-9 h-9 rounded-2xl object-cover">
                        <div>
                            <div class="font-semibold">Michael Torres</div>
                            <div class="text-xs text-slate-400">Software Engineer, Austin • 2 years</div>
                        </div>
                    </div>
                    <p class="mt-4 text-sm leading-relaxed text-slate-300">"The retirement calculator gave me the confidence to increase my 401(k) contributions. I now have a clear path to financial independence by age 52."</p>
                    <div class="flex items-center gap-x-1 mt-5">
                        <div class="text-emerald-400 text-xs font-medium">— Projected retirement at 52</div>
                    </div>
                </div>
                
                <!-- Testimonial 3 -->
                <div class="bg-slate-800 rounded-3xl p-6">
                    <div class="flex items-center gap-x-3">
                        <img src="https://i.pravatar.cc/40?u=priya" alt="Priya Sharma" class="w-9 h-9 rounded-2xl object-cover">
                        <div>
                            <div class="font-semibold">Priya Sharma</div>
                            <div class="text-xs text-slate-400">Marketing Director, NYC • 4 years</div>
                        </div>
                    </div>
                    <p class="mt-4 text-sm leading-relaxed text-slate-300">"Their insurance comparison tool helped me save over $2,800 annually on premiums. The tax optimization advice also saved me thousands on capital gains."</p>
                    <div class="flex items-center gap-x-1 mt-5">
                        <div class="text-emerald-400 text-xs font-medium">— Saved $2,800 on insurance</div>
                    </div>
                </div>
                
                <!-- Testimonial 4 -->
                <div class="bg-slate-800 rounded-3xl p-6">
                    <div class="flex items-center gap-x-3">
                        <img src="https://i.pravatar.cc/40?u=david" alt="David Chen" class="w-9 h-9 rounded-2xl object-cover">
                        <div>
                            <div class="font-semibold">David Chen</div>
                            <div class="text-xs text-slate-400">Entrepreneur, Seattle • 1.5 years</div>
                        </div>
                    </div>
                    <p class="mt-4 text-sm leading-relaxed text-slate-300">"Aether helped me build a diversified portfolio while maintaining liquidity for my business. The insights on tax optimization have been invaluable."</p>
                    <div class="flex items-center gap-x-1 mt-5">
                        <div class="text-emerald-400 text-xs font-medium">— Portfolio grew 27% in 2024</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- RESOURCES / FAQ -->
    <section id="resources" class="max-w-screen-xl mx-auto px-8 pt-16 pb-12">
        <div class="flex flex-col lg:flex-row gap-10">
            <!-- FAQ -->
            <div class="lg:w-3/5">
                <div class="mb-6">
                    <span class="text-xs font-semibold tracking-wider text-sky-600">FREQUENTLY ASKED</span>
                    <h2 class="text-3xl font-semibold tracking-tight">Common questions</h2>
                </div>
                
                <div class="space-y-2">
                    <!-- FAQ 1 -->
                    <div class="border border-slate-200 bg-white rounded-3xl px-5 py-1">
                        <details class="group">
                            <summary class="flex justify-between items-center py-4 cursor-pointer font-medium text-sm">
                                <span>How do I start building an emergency fund?</span>
                                <i class="fa-solid fa-chevron-down group-open:rotate-180 transition-transform text-slate-400"></i>
                            </summary>
                            <div class="text-sm text-slate-600 pb-5">
                                We recommend targeting 4–6 months of essential living expenses. Start by automating transfers 
                                from your checking account into a high-yield savings account. Our Budget Planner can help 
                                calculate the exact amount needed based on your monthly costs.
                            </div>
                        </details>
                    </div>
                    
                    <!-- FAQ 2 -->
                    <div class="border border-slate-200 bg-white rounded-3xl px-5 py-1">
                        <details class="group">
                            <summary class="flex justify-between items-center py-4 cursor-pointer font-medium text-sm">
                                <span>What is tax optimization and how does Aether help?</span>
                                <i class="fa-solid fa-chevron-down group-open:rotate-180 transition-transform text-slate-400"></i>
                            </summary>
                            <div class="text-sm text-slate-600 pb-5">
                                Tax optimization involves legal strategies to reduce your tax liability, such as tax-loss harvesting, 
                                maximizing retirement contributions, and proper asset location. Our platform provides personalized 
                                recommendations based on your income, investments, and goals.
                            </div>
                        </details>
                    </div>
                    
                    <!-- FAQ 3 -->
                    <div class="border border-slate-200 bg-white rounded-3xl px-5 py-1">
                        <details class="group">
                            <summary class="flex justify-between items-center py-4 cursor-pointer font-medium text-sm">
                                <span>Is my financial data secure with Aether?</span>
                                <i class="fa-solid fa-chevron-down group-open:rotate-180 transition-transform text-slate-400"></i>
                            </summary>
                            <div class="text-sm text-slate-600 pb-5">
                                Yes. Aether uses bank-level encryption (256-bit AES), SOC 2 Type II compliance, and never sells 
                                your data. All calculations in the Budget Planner and other tools happen locally in your browser 
                                when possible.
                            </div>
                        </details>
                    </div>
                    
                    <div class="border border-slate-200 bg-white rounded-3xl px-5 py-1">
                        <details class="group">
                            <summary class="flex justify-between items-center py-4 cursor-pointer font-medium text-sm">
                                <span>Do you offer insurance services directly?</span>
                                <i class="fa-solid fa-chevron-down group-open:rotate-180 transition-transform text-slate-400"></i>
                            </summary>
                            <div class="text-sm text-slate-600 pb-5">
                                We partner with top-rated carriers and provide unbiased rate comparisons. Our licensed advisors 
                                can help you select the right coverage based on your life stage and risk tolerance.
                            </div>
                        </details>
                    </div>
                </div>
            </div>
            
            <!-- Sidebar content -->
            <div id="about" class="lg:w-2/5">
                <div class="bg-white border border-slate-200 rounded-3xl p-7">
                    <h4 class="font-semibold text-xl">About Aether Finance</h4>
                    <p class="text-sm mt-3 text-slate-600">
                        Founded in 2018, Aether Finance provides accessible, professional-grade financial tools to 
                        individuals who want to take control of their money. We combine powerful technology with 
                        human expertise to deliver personalized guidance.
                    </p>
                    
                    <div class="mt-6 grid grid-cols-3 gap-3 text-center">
                        <div>
                            <div class="font-bold text-2xl">214k</div>
                            <div class="text-xs text-slate-500">Active users</div>
                        </div>
                        <div>
                            <div class="font-bold text-2xl">$4.8B</div>
                            <div class="text-xs text-slate-500">Assets guided</div>
                        </div>
                        <div>
                            <div class="font-bold text-2xl">98k</div>
                            <div class="text-xs text-slate-500">Goals achieved</div>
                        </div>
                    </div>
                    
                    <div class="mt-6 text-xs">
                        <div class="font-semibold mb-1">Our mission</div>
                        <p class="text-slate-600 text-sm">To democratize access to sophisticated financial planning for everyone.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FINAL CTA -->
    <section class="max-w-screen-xl mx-auto px-8 pb-16">
        <div class="bg-gradient-to-br from-slate-900 to-slate-800 rounded-[3rem] px-8 py-12 text-center text-white">
            <div class="max-w-lg mx-auto">
                <h2 class="text-4xl font-bold tracking-tight">Ready to build your financial future?</h2>
                <p class="mt-3 text-slate-300">Join 214,000+ people who have transformed their finances with Aether.</p>
                
                <div class="mt-7 flex flex-col sm:flex-row items-center justify-center gap-3">
                    <button onclick="startOnboarding()" 
                            class="px-8 py-4 font-semibold transition-colors bg-white text-slate-900 hover:bg-slate-100 rounded-3xl text-sm flex items-center justify-center gap-x-2 w-full sm:w-auto">
                        <span>Create free account</span>
                    </button>
                    <button onclick="document.getElementById('budget-planner').scrollIntoView({ behavior: 'smooth' })" 
                            class="px-7 py-4 font-semibold transition-all border border-white/60 hover:bg-white/10 rounded-3xl text-sm w-full sm:w-auto">
                        Try the Budget Planner
                    </button>
                </div>
                
                <div class="mt-4 text-xs text-white/70">No credit card required • Cancel anytime</div>
            </div>
        </div>
    </section>

    <!-- FOOTER -->
    <footer id="contact" class="bg-white border-t border-slate-100">
        <div class="max-w-screen-xl mx-auto px-8 pt-12 pb-8">
            <div class="grid grid-cols-2 md:grid-cols-5 gap-y-10">
                <div class="col-span-2 md:col-span-1">
                    <div class="flex items-center gap-x-2">
                        <img src="https://placehold.co/36x36/0F172A/FFFFFF?text=AF" alt="Logo" class="w-9 h-9 rounded-2xl">
                        <span class="font-bold text-2xl heading-font">Aether</span>
                    </div>
                    <p class="text-xs mt-4 text-slate-500">Precision finance for the modern world.</p>
                </div>
                
                <div>
                    <div class="font-semibold text-xs tracking-wider mb-3 text-slate-500">PRODUCT</div>
                    <div class="space-y-[9px] text-sm">
                        <div><a href="#tools" class="text-slate-700 hover:text-slate-900">Tools</a></div>
                        <div><a href="#budget-planner" class="text-slate-700 hover:text-slate-900">Budget Planner</a></div>
                        <div><a href="#insights" class="text-slate-700 hover:text-slate-900">Investments</a></div>
                        <div><a href="#services" class="text-slate-700 hover:text-slate-900">Insurance</a></div>
                    </div>
                </div>
                
                <div>
                    <div class="font-semibold text-xs tracking-wider mb-3 text-slate-500">RESOURCES</div>
                    <div class="space-y-[9px] text-sm">
                        <div><a href="#" class="text-slate-700 hover:text-slate-900">Financial Guides</a></div>
                        <div><a href="#" class="text-slate-700 hover:text-slate-900">Market Insights</a></div>
                        <div><a href="#" class="text-slate-700 hover:text-slate-900">Tax Center</a></div>
                        <div><a href="#" class="text-slate-700 hover:text-slate-900">Webinars</a></div>
                    </div>
                </div>
                
                <div>
                    <div class="font-semibold text-xs tracking-wider mb-3 text-slate-500">COMPANY</div>
                    <div class="space-y-[9px] text-sm">
                        <div><a href="#" class="text-slate-700 hover:text-slate-900">About Us</a></div>
                        <div><a href="#" class="text-slate-700 hover:text-slate-900">Careers (42 open)</a></div>
                        <div><a href="#" class="text-slate-700 hover:text-slate-900">Press</a></div>
                        <div><a href="#" class="text-slate-700 hover:text-slate-900">Contact</a></div>
                    </div>
                </div>
                
                <div>
                    <div class="font-semibold text-xs tracking-wider mb-3 text-slate-500">LEGAL</div>
                    <div class="space-y-[9px] text-sm">
                        <div><a href="#" class="text-slate-700 hover:text-slate-900">Privacy Policy</a></div>
                        <div><a href="#" class="text-slate-700 hover:text-slate-900">Terms of Service</a></div>
                        <div><a href="#" class="text-slate-700 hover:text-slate-900">Security</a></div>
                        <div><a href="#" class="text-slate-700 hover:text-slate-900">Licenses</a></div>
                    </div>
                    
                    <div class="mt-6">
                        <div class="text-xs font-semibold text-slate-500 mb-2">FOLLOW US</div>
                        <div class="flex items-center gap-x-3 text-lg">
                            <a href="#" class="text-slate-400 hover:text-slate-700"><i class="fa-brands fa-twitter"></i></a>
                            <a href="#" class="text-slate-400 hover:text-slate-700"><i class="fa-brands fa-linkedin"></i></a>
                            <a href="#" class="text-slate-400 hover:text-slate-700"><i class="fa-brands fa-instagram"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mt-12 pt-6 border-t border-slate-100 flex flex-col md:flex-row md:items-center justify-between gap-y-4 text-xs">
                <div class="text-slate-500">
                    © 2025 Aether Finance. All rights reserved.
                </div>
                <div class="flex items-center gap-x-4 text-slate-500">
                    <div>450 Park Avenue, New York, NY 10022</div>
                    <div class="hidden md:block">•</div>
                    <div>(212) 555-0192</div>
                    <div class="hidden md:block">•</div>
                    <div>hello@aetherfinance.com</div>
                </div>
            </div>
        </div>
    </footer>

    <!-- Login Modal -->
    <div id="login-modal" onclick="hideLoginModal()" class="hidden fixed inset-0 bg-black/40 z-50 flex items-center justify-center">
        <div onclick="event.stopImmediatePropagation()" class="bg-white rounded-3xl w-full max-w-md mx-4 p-7 shadow-xl">
            <div class="flex justify-between items-center">
                <h3 class="font-semibold text-xl">Welcome back</h3>
                <button onclick="hideLoginModal()" class="text-slate-400 hover:text-slate-700"><i class="fa-solid fa-times"></i></button>
            </div>
            
            <div class="mt-6 space-y-4">
                <div>
                    <label class="text-xs font-medium text-slate-600">Email address</label>
                    <input type="email" value="jessica.rivera@email.com" class="mt-1 w-full border border-slate-300 px-4 py-3 text-sm rounded-2xl">
                </div>
                <div>
                    <label class="text-xs font-medium text-slate-600">Password</label>
                    <input type="password" value="demo2025" class="mt-1 w-full border border-slate-300 px-4 py-3 text-sm rounded-2xl">
                </div>
            </div>
            
            <button onclick="loginUser()" class="mt-6 w-full bg-slate-900 text-white font-semibold py-3.5 rounded-3xl text-sm hover:bg-slate-800 transition-colors">
                Sign in to Aether
            </button>
            
            <div class="text-center mt-4">
                <a href="#" class="text-xs text-sky-600">Forgot password?</a>
            </div>
            
            <div class="text-center mt-6 text-xs text-slate-500">
                Don't have an account? <a href="#" onclick="hideLoginModal(); startOnboarding();" class="text-sky-600 font-medium">Create one</a>
            </div>
        </div>
    </div>

    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        // Tailwind script configuration
        function initializeTailwind() {
            document.documentElement.style.setProperty('--accent', '#0EA5E9');
            
            tailwind.config = {
                theme: {
                    extend: {
                        fontFamily: {
                            'heading': ['Space Grotesk', 'Inter', 'system-ui', 'sans-serif']
                        }
                    }
                }
            };
        }
        
        // Budget Calculator
        function calculateBudget() {
            const income = parseFloat(document.getElementById('income').value) || 0;
            const savingsTarget = parseFloat(document.getElementById('savings-target').value) || 0;
            
            const housing = parseFloat(document.getElementById('housing').value) || 0;
            const utilities = parseFloat(document.getElementById('utilities').value) || 0;
            const food = parseFloat(document.getElementById('food').value) || 0;
            const transport = parseFloat(document.getElementById('transport').value) || 0;
            const healthcare = parseFloat(document.getElementById('healthcare').value) || 0;
            const entertainment = parseFloat(document.getElementById('entertainment').value) || 0;
            
            const totalExpenses = housing + utilities + food + transport + healthcare + entertainment;
            const remaining = income - totalExpenses;
            const savingsRate = income > 0 ? ((remaining / income) * 100) : 0;
            
            // Show results container
            const resultsEl = document.getElementById('budget-results');
            resultsEl.classList.remove('hidden');
            resultsEl.classList.add('block');
            
            // Update values
            document.getElementById('total-expenses').innerHTML = '$' + totalExpenses.toFixed(0);
            document.getElementById('remaining').innerHTML = '$' + remaining.toFixed(0);
            document.getElementById('savings-rate').innerHTML = savingsRate.toFixed(0) + '%';
            
            // Goal status
            const goalStatusEl = document.getElementById('goal-status');
            const adviceEl = document.getElementById('budget-advice');
            
            if (remaining >= savingsTarget) {
                goalStatusEl.innerHTML = `<span class="text-emerald-600">On track!</span>`;
                goalStatusEl.className = 'mt-1 text-lg font-bold text-emerald-700';
                
                adviceEl.innerHTML = `Excellent work. You're projected to exceed your savings goal by <span class="font-semibold text-emerald-700">$${(remaining - savingsTarget).toFixed(0)}</span> this month. Consider allocating the surplus to an investment account for long-term growth.`;
            } else if (remaining > 0) {
                goalStatusEl.innerHTML = `<span class="text-amber-600">Short by $${(savingsTarget - remaining).toFixed(0)}</span>`;
                goalStatusEl.className = 'mt-1 text-lg font-bold text-amber-600';
                
                adviceEl.innerHTML = `You're close. To meet your goal, consider reducing discretionary spending by $${(savingsTarget - remaining).toFixed(0)} or increasing income. Focus on high-impact areas like food and entertainment.`;
            } else {
                goalStatusEl.innerHTML = `<span class="text-red-600">Deficit: $${Math.abs(remaining).toFixed(0)}</span>`;
                goalStatusEl.className = 'mt-1 text-lg font-bold text-red-600';
                
                adviceEl.innerHTML = `Your expenses exceed income. Review housing and transportation costs first. Our team recommends prioritizing an emergency fund once cash flow is stabilized.`;
            }
        }
        
        function useExampleData() {
            document.getElementById('income').value = 7850;
            document.getElementById('savings-target').value = 1800;
            document.getElementById('housing').value = 2450;
            document.getElementById('utilities').value = 285;
            document.getElementById('food').value = 620;
            document.getElementById('transport').value = 310;
            document.getElementById('healthcare').value = 175;
            document.getElementById('entertainment').value = 420;
            
            calculateBudget();
        }
        
        // Initialize budget calculator with default values
        function initBudgetCalculator() {
            // Pre-fill with reasonable defaults on load
            setTimeout(() => {
                const resultsEl = document.getElementById('budget-results');
                
                // Auto-calculate with default values
                calculateBudget();
                
                // Show results immediately for demo purposes
                resultsEl.classList.remove('hidden');
                resultsEl.classList.add('block');
            }, 1100);
            
            // Add listeners for live updates
            const inputs = ['income', 'savings-target', 'housing', 'utilities', 'food', 'transport', 'healthcare', 'entertainment'];
            inputs.forEach(id => {
                const el = document.getElementById(id);
                if (el) {
                    el.addEventListener('input', function() {
                        calculateBudget();
                    });
                }
            });
        }
        
        // Mobile Menu
        function toggleMobileMenu() {
            const nav = document.createElement('div');
            nav.className = `fixed inset-0 bg-black/40 z-[90] md:hidden`;
            
            nav.innerHTML = `
                <div onclick="event.target.remove()" class="absolute inset-0"></div>
                <div class="absolute top-0 right-0 bg-white w-[260px] h-full shadow-xl px-6 py-8">
                    <div class="flex justify-between items-center mb-8">
                        <span class="font-bold text-xl">Aether Finance</span>
                        <button onclick="event.target.closest('.fixed').remove()" class="text-2xl text-slate-400">&times;</button>
                    </div>
                    
                    <div class="space-y-1 text-base">
                        <a href="#tools" class="block px-4 py-3 text-slate-700 hover:bg-slate-50 rounded-2xl">Tools</a>
                        <a href="#services" class="block px-4 py-3 text-slate-700 hover:bg-slate-50 rounded-2xl">Insurance</a>
                        <a href="#budget-planner" class="block px-4 py-3 text-slate-700 hover:bg-slate-50 rounded-2xl">Budget Planner</a>
                        <a href="#insights" class="block px-4 py-3 text-slate-700 hover:bg-slate-50 rounded-2xl">Investments</a>
                        <a href="#resources" class="block px-4 py-3 text-slate-700 hover:bg-slate-50 rounded-2xl">Resources</a>
                        <a href="#about" class="block px-4 py-3 text-slate-700 hover:bg-slate-50 rounded-2xl">About</a>
                        <a href="#contact" class="block px-4 py-3 text-slate-700 hover:bg-slate-50 rounded-2xl">Contact</a>
                    </div>
                    
                    <div class="mt-8 pt-6 border-t">
                        <button onclick="startOnboarding(); event.target.closest('.fixed').remove()" class="w-full py-3.5 bg-slate-900 text-white text-sm font-semibold rounded-3xl">
                            Get Started
                        </button>
                    </div>
                </div>
            `;
            
            document.body.appendChild(nav);
        }
        
        // Strategy viewer
        function viewStrategy(strategyId) {
            const modal = document.createElement('div');
            modal.className = `fixed inset-0 bg-black bg-opacity-60 flex items-center justify-center z-[100]`;
            
            let content = '';
            
            if (strategyId === 1) {
                content = `
                    <div onclick="event.target.remove()" class="absolute inset-0"></div>
                    <div onclick="event.stopImmediatePropagation()" class="bg-white max-w-lg mx-4 rounded-3xl w-full p-7 shadow-2xl">
                        <div class="flex justify-between mb-4">
                            <div>
                                <span class="text-xs font-semibold px-3 py-1 bg-sky-100 text-sky-600 rounded-xl">INVESTMENT STRATEGY</span>
                                <h3 class="font-bold text-2xl mt-1">Diversification & Asset Allocation</h3>
                            </div>
                            <button onclick="this.closest('.fixed').remove()" class="text-xl text-slate-400 hover:text-black">&times;</button>
                        </div>
                        
                        <div class="prose text-sm text-slate-600">
                            <p>Effective diversification balances risk and reward across multiple asset classes. We recommend maintaining 50-70% in equities, 20-30% fixed income, and 10-20% in alternatives for most investors.</p>
                            
                            <p class="mt-3">Key principles include:</p>
                            <ul class="list-disc pl-4 mt-2 text-sm">
                                <li>Rebalance quarterly to maintain target allocations</li>
                                <li>Consider international exposure for further diversification</li>
                                <li>Utilize low-cost index funds and ETFs</li>
                                <li>Factor in risk tolerance and time horizon</li>
                            </ul>
                        </div>
                        
                        <div class="mt-6">
                            <button onclick="startOnboarding(); this.closest('.fixed').remove()" class="w-full bg-emerald-600 hover:bg-emerald-700 transition-colors text-white font-semibold py-3.5 text-sm rounded-3xl">Apply this strategy</button>
                        </div>
                    </div>
                `;
            } else if (strategyId === 2) {
                content = `
                    <div onclick="event.target.remove()" class="absolute inset-0"></div>
                    <div onclick="event.stopImmediatePropagation()" class="bg-white max-w-lg mx-4 rounded-3xl w-full p-7 shadow-2xl">
                        <div class="flex justify-between mb-4">
                            <div>
                                <span class="text-xs font-semibold px-3 py-1 bg-emerald-100 text-emerald-600 rounded-xl">FOUNDATION</span>
                                <h3 class="font-bold text-2xl mt-1">Building an Emergency Fund</h3>
                            </div>
                            <button onclick="this.closest('.fixed').remove()" class="text-xl text-slate-400 hover:text-black">&times;</button>
                        </div>
                        
                        <div class="prose text-sm text-slate-600">
                            <p>Liquidity is critical. Your emergency fund should be held in a high-yield savings account or money market fund that offers immediate access without penalties.</p>
                            
                            <p class="mt-4">Recommended steps:</p>
                            <ol class="list-decimal pl-4 mt-1.5 text-sm">
                                <li>Calculate your essential monthly expenses</li>
                                <li>Set a target of 4-6 months coverage</li>
                                <li>Automate monthly transfers from checking</li>
                                <li>Review annually and adjust for life changes</li>
                            </ol>
                        </div>
                        
                        <div class="mt-6">
                            <button onclick="document.getElementById('budget-planner').scrollIntoView({ behavior: 'smooth' }); this.closest('.fixed').remove()" class="w-full bg-emerald-600 hover:bg-emerald-700 transition-colors text-white font-semibold py-3.5 text-sm rounded-3xl">Use Budget Planner</button>
                        </div>
                    </div>
                `;
            } else if (strategyId === 3) {
                content = `
                    <div onclick="event.target.remove()" class="absolute inset-0"></div>
                    <div onclick="event.stopImmediatePropagation()" class="bg-white max-w-lg mx-4 rounded-3xl w-full p-7 shadow-2xl">
                        <div class="flex justify-between mb-4">
                            <div>
                                <span class="text-xs font-semibold px-3 py-1 bg-violet-100 text-violet-600 rounded-xl">RETIREMENT</span>
                                <h3 class="font-bold text-2xl mt-1">Retirement Planning & Tax Optimization</h3>
                            </div>
                            <button onclick="this.closest('.fixed').remove()" class="text-xl text-slate-400 hover:text-black">&times;</button>
                        </div>
                        
                        <div class="prose text-sm text-slate-600">
                            <p>Focus on tax-advantaged accounts and strategic asset placement. Maximize contributions to employer-sponsored plans and IRAs to reduce your taxable income today.</p>
                            
                            <div class="mt-4 bg-slate-50 p-4 rounded-2xl text-xs">
                                <div class="font-semibold">Pro tip:</div>
                                <div>Consider Roth conversions in lower-income years and tax-loss harvesting to offset capital gains.</div>
                            </div>
                        </div>
                        
                        <div class="mt-6">
                            <button onclick="startOnboarding(); this.closest('.fixed').remove()" class="w-full bg-emerald-600 hover:bg-emerald-700 transition-colors text-white font-semibold py-3.5 text-sm rounded-3xl">Start retirement plan</button>
                        </div>
                    </div>
                `;
            }
            
            modal.innerHTML = content;
            document.body.appendChild(modal);
        }
        
        // Insurance comparison function
        function compareInsurance() {
            const modal = document.createElement('div');
            modal.className = `fixed inset-0 bg-black/40 flex items-center justify-center z-[100]`;
            
            modal.innerHTML = `
                <div onclick="event.target.remove()" class="absolute inset-0"></div>
                <div onclick="event.stopImmediatePropagation()" class="bg-white w-full max-w-md mx-4 rounded-3xl p-7">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="font-bold text-xl">Insurance Rate Comparison</h3>
                            <p class="text-xs text-slate-500 mt-1">Get quotes from 12+ top carriers</p>
                        </div>
                        <button onclick="this.closest('.fixed').remove()" class="text-slate-400 hover:text-slate-700 text-2xl leading-none">&times;</button>
                    </div>
                    
                    <div class="mt-6 space-y-4">
                        <div>
                            <label class="block text-xs font-medium mb-1 text-slate-600">Coverage type</label>
                            <select class="w-full border border-slate-300 text-sm px-4 py-[10px] rounded-2xl">
                                <option>Life Insurance</option>
                                <option>Auto Insurance</option>
                                <option>Homeowners</option>
                                <option>Health Insurance</option>
                            </select>
                        </div>
                        
                        <div class="grid grid-cols-2 gap-3">
                            <div>
                                <label class="block text-xs font-medium mb-1 text-slate-600">Age</label>
                                <input type="number" value="34" class="w-full border border-slate-300 text-sm px-4 py-[10px] rounded-2xl">
                            </div>
                            <div>
                                <label class="block text-xs font-medium mb-1 text-slate-600">Zip Code</label>
                                <input type="text" value="10022" class="w-full border border-slate-300 text-sm px-4 py-[10px] rounded-2xl">
                            </div>
                        </div>
                    </div>
                    
                    <button onclick="simulateInsuranceQuote(this)" class="mt-6 w-full bg-amber-600 hover:bg-amber-700 text-white text-sm font-semibold py-[13px] rounded-3xl transition-colors">
                        Compare rates now
                    </button>
                    
                    <div class="text-center mt-3 text-xs text-slate-500">Takes less than 60 seconds</div>
                </div>
            `;
            
            document.body.appendChild(modal);
        }
        
        function simulateInsuranceQuote(btn) {
            const originalText = btn.innerHTML;
            btn.innerHTML = `<span class="flex items-center justify-center gap-2"><i class="fa-solid fa-spinner fa-spin"></i> Fetching quotes...</span>`;
            btn.disabled = true;
            
            setTimeout(() => {
                btn.closest('.fixed').remove();
                
                const successModal = document.createElement('div');
                successModal.className = `fixed inset-0 bg-black/40 flex items-center justify-center z-[100]`;
                
                successModal.innerHTML = `
                    <div onclick="event.target.remove()" class="absolute inset-0"></div>
                    <div onclick="event.stopImmediatePropagation()" class="bg-white w-full max-w-sm mx-4 rounded-3xl p-7">
                        <div class="text-center">
                            <div class="mx-auto w-12 h-12 bg-emerald-100 flex items-center justify-center rounded-full mb-4">
                                <i class="fa-solid fa-check text-emerald-600 text-xl"></i>
                            </div>
                            
                            <h3 class="font-semibold text-xl">Quotes ready!</h3>
                            <p class="mt-2 text-sm text-slate-600">We've found 8 competitive rates for you. The best quote is <span class="font-semibold text-emerald-700">$87/mo</span> for term life coverage.</p>
                            
                            <div class="mt-6 grid grid-cols-1 gap-2 text-sm">
                                <div class="flex justify-between px-4 py-3 bg-slate-50 rounded-2xl text-left">
                                    <div>
                                        <div class="font-medium">Prudential</div>
                                        <div class="text-xs">Term Life • 20 years</div>
                                    </div>
                                    <div class="font-bold text-right">$87/mo</div>
                                </div>
                                <div class="flex justify-between px-4 py-3 bg-slate-50 rounded-2xl text-left">
                                    <div>
                                        <div class="font-medium">State Farm</div>
                                        <div class="text-xs">Term Life • 20 years</div>
                                    </div>
                                    <div class="font-bold text-right">$93/mo</div>
                                </div>
                            </div>
                            
                            <button onclick="startOnboarding(); this.closest('.fixed').remove()" class="mt-6 w-full bg-emerald-600 text-white font-semibold py-3 rounded-3xl text-sm">Apply for coverage</button>
                            <div onclick="this.closest('.fixed').remove()" class="text-xs mt-4 text-slate-500 cursor-pointer">Close</div>
                        </div>
                    </div>
                `;
                document.body.appendChild(successModal);
            }, 1650);
        }
        
        // Onboarding function
        function startOnboarding() {
            const modal = document.createElement('div');
            modal.className = `fixed inset-0 bg-black/50 flex items-center justify-center z-[110]`;
            
            modal.innerHTML = `
                <div onclick="event.target.remove()" class="absolute inset-0"></div>
                <div onclick="event.stopImmediatePropagation()" class="bg-white max-w-md w-full mx-4 rounded-3xl p-8">
                    <div class="flex justify-between mb-6">
                        <div>
                            <span class="font-bold text-2xl">Create your account</span>
                        </div>
                        <button onclick="this.closest('.fixed').remove()" class="text-slate-400 text-xl">&times;</button>
                    </div>
                    
                    <div class="space-y-4">
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-xs font-semibold text-slate-600 mb-1">First name</label>
                                <input type="text" value="Jessica" class="border px-4 py-2.5 text-sm rounded-2xl w-full">
                            </div>
                            <div>
                                <label class="block text-xs font-semibold text-slate-600 mb-1">Last name</label>
                                <input type="text" value="Rivera" class="border px-4 py-2.5 text-sm rounded-2xl w-full">
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 mb-1">Email</label>
                            <input type="email" value="jessica.rivera@email.com" class="border px-4 py-2.5 text-sm rounded-2xl w-full">
                        </div>
                        
                        <div>
                            <label class="block text-xs font-semibold text-slate-600 mb-1">Annual household income</label>
                            <div class="relative">
                                <span class="absolute left-4 top-3 text-slate-400">$</span>
                                <input type="text" value="118000" class="border px-4 py-2.5 pl-7 text-sm rounded-2xl w-full">
                            </div>
                        </div>
                        
                        <div class="pt-2">
                            <div class="flex items-center">
                                <input type="checkbox" checked class="accent-emerald-600 mr-2">
                                <span class="text-xs text-slate-600">I agree to the Terms and Privacy Policy</span>
                            </div>
                        </div>
                        
                        <button onclick="completeOnboarding(this)" class="mt-3 w-full bg-emerald-600 text-white font-bold py-[13px] text-sm rounded-3xl">Create my account</button>
                        
                        <div class="text-center text-xs pt-1 text-slate-400">Free for 30 days. No credit card needed.</div>
                    </div>
                </div>
            `;
            
            document.body.appendChild(modal);
        }
        
        function completeOnboarding(btn) {
            const originalText = btn.innerHTML;
            btn.innerHTML = `Creating account...`;
            btn.disabled = true;
            
            setTimeout(() => {
                btn.closest('.fixed').remove();
                
                // Success toast
                const toast = document.createElement('div');
                toast.style.cssText = 'position:fixed;bottom:20px;left:50%;transform:translate(-50%, 0);';
                toast.className = `bg-emerald-700 text-white px-5 py-4 text-sm rounded-3xl shadow-xl flex items-center gap-x-3 max-w-xs`;
                toast.innerHTML = `
                    <div class="flex items-center">
                        <i class="fa-solid fa-check mr-3"></i> 
                        <span>Your account has been created!</span>
                    </div>
                `;
                
                document.body.appendChild(toast);
                
                setTimeout(() => {
                    toast.style.transition = 'all .3s ease';
                    toast.style.opacity = '0';
                    
                    setTimeout(function() {
                        toast.remove();
                        
                        // Scroll to budget planner
                        const budgetSection = document.getElementById('budget-planner');
                        if (budgetSection) {
                            budgetSection.scrollIntoView({ behavior: 'smooth', block: 'center' });
                        }
                    }, 260);
                }, 2400);
            }, 1400);
        }
        
        function loginUser() {
            const modal = document.getElementById('login-modal');
            if (modal) modal.classList.add('hidden');
            
            const successToast = document.createElement('div');
            successToast.style.cssText = 'position:fixed;bottom:20px;left:50%;transform:translate(-50%, 0);z-index:9999';
            successToast.className = `px-6 py-3 bg-emerald-700 text-white text-sm font-medium shadow-lg flex items-center gap-x-3 rounded-3xl`;
            successToast.innerHTML = `
                <div>Welcome back! You are now signed in.</div>
            `;
            document.body.appendChild(successToast);
            
            setTimeout(() => {
                successToast.style.transition = 'all .35s ease';
                successToast.style.opacity = '0';
                
                setTimeout(() => {
                    successToast.remove();
                }, 300);
            }, 2500);
        }
        
        function showLoginModal() {
            const modal = document.getElementById('login-modal');
            modal.classList.remove('hidden');
            modal.classList.add('flex');
        }
        
        function hideLoginModal() {
            const modal = document.getElementById('login-modal');
            modal.classList.remove('flex');
            modal.classList.add('hidden');
        }
        
        // Keyboard support and other enhancements
        function addKeyboardSupport() {
            document.addEventListener('keydown', function(e) {
                if (e.key === "/" && document.activeElement.tagName === "BODY") {
                    e.preventDefault();
                    const budgetSection = document.getElementById('budget-planner');
                    if (budgetSection) budgetSection.scrollIntoView({ behavior: 'smooth' });
                    
                    setTimeout(() => {
                        const incomeInput = document.getElementById('income');
                        if (incomeInput) incomeInput.focus();
                    }, 700);
                }
            });
            
            // Add subtle hover feedback on cards
            const cards = document.querySelectorAll('.finance-card, .insight-card');
            cards.forEach(card => {
                card.addEventListener('mouseenter', () => {
                    card.style.transform = 'translateY(-4px)';
                });
                card.addEventListener('mouseleave', () => {
                    card.style.transform = 'translateY(0)';
                });
            });
        }
        
        // Initialize everything
        function initializeWebsite() {
            initializeTailwind();
            initBudgetCalculator();
            addKeyboardSupport();
            
            // Initial budget calculation
            setTimeout(() => {
                const incomeInput = document.getElementById('income');
                if (incomeInput && !document.getElementById('budget-results').classList.contains('hidden')) {
                    // Already initialized
                }
            }, 1800);
            
            // Randomly highlight one service card after load
            setTimeout(() => {
                const serviceCards = document.querySelectorAll('#services .finance-card');
                if (serviceCards.length > 2) {
                    serviceCards[2].style.border = '1px solid #0EA5E9';
                    setTimeout(() => {
                        if (serviceCards[2]) serviceCards[2].style.border = '1px solid #e2e8f0';
                    }, 2500);
                }
            }, 4500);
            
            // Make nav links smooth scroll
            const navLinks = document.querySelectorAll('nav a[href^="#"]');
            navLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    const target = document.querySelector(this.getAttribute('href'));
                    if (target) {
                        e.preventDefault();
                        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
                        
                        // Close mobile menu if open
                        const mobileMenus = document.querySelectorAll('.fixed.inset-0');
                        mobileMenus.forEach(m => m.remove());
                    }
                });
            });
            
            // Easter egg: Press "?" to show stats
            document.addEventListener('keypress', function(e) {
                if (e.key === "?") {
                    const stats = document.createElement('div');
                    stats.style.cssText = 'position:fixed;bottom:25px;right:25px;z-index:9999';
                    stats.className = `bg-white border px-4 py-3 text-xs shadow-xl rounded-2xl`;
                    stats.innerHTML = `
                        <div class="font-semibold mb-1">Aether Finance • 2025</div>
                        <div>214,392 users • $4.8B assets • 98.4% retention</div>
                    `;
                    document.body.appendChild(stats);
                    
                    setTimeout(() => {
                        stats.style.transition = 'all 0.4s ease';
                        stats.style.opacity = '0';
                        setTimeout(() => stats.parentNode.removeChild(stats), 400);
                    }, 2600);
                }
            });
            
            // Accessibility note in console (for developers)
            console.log('%c[Aether Finance] Production-ready one-page website initialized successfully.', 'color:#64748b');
        }
        
        // Boot the website
        window.onload = function() {
            initializeWebsite();
        }
        
        // Bonus: Make sure budget calculator works on initial load
        // Already handled in initBudgetCalculator
    </script>
</body>
</html>
View Axe Report (JSON)
{
  "testEngine": {
    "name": "axe-core",
    "version": "4.10.2"
  },
  "testRunner": {
    "name": "axe"
  },
  "testEnvironment": {
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
    "windowWidth": 1280,
    "windowHeight": 720,
    "orientationAngle": 0,
    "orientationType": "landscape-primary"
  },
  "timestamp": "2026-11-12T09:43:24.778Z",
  "url": "https://benchmark.aimac.invalid/754861fc770faac80dc0b3314ad4b12d195d68ba2410f47774dc6d609993eb46.html",
  "toolOptions": {
    "runOnly": {
      "type": "tag",
      "values": [
        "wcag2a",
        "wcag2aa",
        "wcag21a",
        "wcag21aa",
        "wcag22a",
        "wcag22aa"
      ]
    },
    "resultTypes": [
      "violations"
    ],
    "reporter": "v1"
  },
  "inapplicable": [
    {
      "id": "area-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <area> elements of image maps have alternative text",
      "help": "Active <area> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-allowed-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure an element's role supports its ARIA attributes",
      "help": "Elements must only use supported ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-braille-equivalent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
      "help": "aria-braille attributes must have a non-braille equivalent",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-command-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA button, link and menuitem has an accessible name",
      "help": "ARIA commands must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-conditional-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are used as described in the specification of the element's role",
      "help": "ARIA attributes must be used as specified for the element's role",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-deprecated-role",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements do not use deprecated roles",
      "help": "Deprecated ARIA roles must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-hidden-focus",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
      "help": "ARIA hidden element must not be focusable or contain focusable elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-input-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA input field has an accessible name",
      "help": "ARIA input fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-meter-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA meter node has an accessible name",
      "help": "ARIA meter nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-progressbar-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA progressbar node has an accessible name",
      "help": "ARIA progressbar nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-prohibited-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements with ARIA roles have all required ARIA attributes",
      "help": "Required ARIA attributes must be provided",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-children",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require child roles contain them",
      "help": "Certain ARIA roles must contain particular children",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-parent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require parent roles are contained by them",
      "help": "Certain ARIA roles must be contained by particular parents",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-roles",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all elements with a role attribute use a valid value",
      "help": "ARIA roles used must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-toggle-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA toggle field has an accessible name",
      "help": "ARIA toggle fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-tooltip-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every ARIA tooltip node has an accessible name",
      "help": "ARIA tooltip nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-valid-attr-value",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all ARIA attributes have valid values",
      "help": "ARIA attributes must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-valid-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure attributes that begin with aria- are valid ARIA attributes",
      "help": "ARIA attributes must conform to valid names",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "autocomplete-valid",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag21aa",
        "wcag135",
        "EN-301-549",
        "EN-9.1.3.5",
        "ACT"
      ],
      "description": "Ensure the autocomplete attribute is correct and suitable for the form field",
      "help": "autocomplete attribute must be used correctly",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
      "nodes": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "duplicate-id-aria",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every id attribute value used in ARIA and in labels is unique",
      "help": "IDs used in ARIA and labels must be unique",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-focusable-content",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
      "help": "Frames with focusable content must not have tabindex=-1",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title-unique",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
      "help": "Frames must have a unique title attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.i",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements have an accessible name",
      "help": "Frames must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
      "nodes": []
    },
    {
      "id": "html-xml-lang-mismatch",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
      "help": "HTML elements with lang and xml:lang must have the same base language",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure input buttons have discernible text",
      "help": "Input buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <input type=\"image\"> elements have alternative text",
      "help": "Image buttons must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "link-in-text-block",
      "impact": null,
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": []
    },
    {
      "id": "list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that lists are structured correctly",
      "help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "listitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <li> elements are used semantically",
      "help": "<li> elements must be contained in a <ul> or <ol>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "marquee",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag222",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <marquee> elements are not used",
      "help": "<marquee> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
      "nodes": []
    },
    {
      "id": "meta-refresh",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag221",
        "TTv5",
        "TT8.a",
        "EN-301-549",
        "EN-9.2.2.1"
      ],
      "description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
      "help": "Delayed refresh under 20 hours must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
      "nodes": []
    },
    {
      "id": "object-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure <object> elements have alternative text",
      "help": "<object> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "role-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure [role=\"img\"] elements have alternative text",
      "help": "[role=\"img\"] elements must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "scrollable-region-focusable",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "wcag213",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1",
        "EN-9.2.1.3"
      ],
      "description": "Ensure elements that have scrollable content are accessible by keyboard",
      "help": "Scrollable region must have keyboard access",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
      "nodes": []
    },
    {
      "id": "select-name",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure select element has an accessible name",
      "help": "Select element must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "server-side-image-map",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag211",
        "section508",
        "section508.22.f",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure that server-side image maps are not used",
      "help": "Server-side image maps must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
      "nodes": []
    },
    {
      "id": "svg-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
      "help": "<svg> elements with an img role must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "td-headers-attr",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
      "help": "Table cells that use the headers attribute must only refer to cells in the same table",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "th-has-data-cells",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
      "help": "Table headers in a data table must refer to data cells",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
      "nodes": []
    },
    {
      "id": "valid-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2aa",
        "wcag312",
        "TTv5",
        "TT11.b",
        "EN-301-549",
        "EN-9.3.1.2",
        "ACT"
      ],
      "description": "Ensure lang attributes have valid values",
      "help": "lang attribute must have a valid value",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
      "nodes": []
    },
    {
      "id": "video-caption",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag122",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT17.a",
        "EN-301-549",
        "EN-9.1.2.2"
      ],
      "description": "Ensure <video> elements have captions",
      "help": "<video> elements must have captions",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
      "nodes": []
    },
    {
      "id": "no-autoplay-audio",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag142",
        "TTv5",
        "TT2.a",
        "EN-301-549",
        "EN-9.1.4.2",
        "ACT"
      ],
      "description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
      "help": "<video> or <audio> elements must not play automatically",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
      "nodes": []
    }
  ],
  "passes": [
    {
      "id": "aria-hidden-body",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "wcag412",
        "EN-301-549",
        "EN-9.1.3.1",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden=\"true\" is not present on the document body.",
      "help": "aria-hidden=\"true\" must not be present on the document body",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-hidden-body",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "No aria-hidden attribute is present on document body"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<body class=\"bg-slate-50 text-slate-800\">",
          "target": [
            "body"
          ]
        }
      ]
    },
    {
      "id": "avoid-inline-spacing",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag21aa",
        "wcag1412",
        "EN-301-549",
        "EN-9.1.4.12",
        "ACT"
      ],
      "description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
      "help": "Inline text spacing must be adjustable with custom stylesheets",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "important-letter-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-word-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-line-height",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "line-height in the style attribute is not set to !important, or meets the minimum"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\" style=\"--accent: #0EA5E9;\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure buttons have discernible text",
      "help": "Buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "button-has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has inner text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button onclick=\"showLoginModal()\" class=\"hidden md:block px-4 py-2 text-sm font-semibold text-slate-700 hover:text-slate-900 transition-colors\">\n                        Log in\n                    </button>",
          "target": [
            "button[onclick=\"showLoginModal()\"]"
          ]
        }
      ]
    },
    {
      "id": "bypass",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag241",
        "section508",
        "section508.22.o",
        "TTv5",
        "TT9.a",
        "EN-301-549",
        "EN-9.2.4.1"
      ],
      "description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
      "help": "Page must have means to bypass repeated blocks",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "internal-link-present",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Valid skip link found"
            },
            {
              "id": "header-present",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<h1 class=\"text-6xl leading-[1.05] font-bold tracking-tighter text-white heading-font\">\n                    Take control of<br>your financial<br>future.\n                </h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h2 class=\"section-header text-slate-900 mt-1\">Tools built for real life.</h2>",
                  "target": [
                    ".md\\:items-end > div > .section-header"
                  ]
                },
                {
                  "html": "<h4 class=\"font-semibold text-lg\">Budget Planning</h4>",
                  "target": [
                    ".p-5.finance-card.bg-white:nth-child(1) > h4"
                  ]
                },
                {
                  "html": "<h4 class=\"font-semibold text-lg\">Investment Management</h4>",
                  "target": [
                    ".p-5.finance-card.bg-white:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4 class=\"font-semibold text-lg\">Insurance</h4>",
                  "target": [
                    ".p-5.finance-card.bg-white:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4 class=\"font-semibold text-lg\">Retirement Planning</h4>",
                  "target": [
                    ".p-5.finance-card.bg-white:nth-child(4) > h4"
                  ]
                },
                {
                  "html": "<h4 class=\"font-semibold text-lg\">Credit Optimization</h4>",
                  "target": [
                    ".p-5.finance-card.bg-white:nth-child(5) > h4"
                  ]
                },
                {
                  "html": "<h4 class=\"font-semibold text-lg\">Tax Optimization</h4>",
                  "target": [
                    ".p-5.finance-card.bg-white:nth-child(6) > h4"
                  ]
                },
                {
                  "html": "<h2 class=\"section-header text-slate-900 mt-3\">Monthly Budget Planner</h2>",
                  "target": [
                    ".top-24 > .section-header"
                  ]
                },
                {
                  "html": "<h2 class=\"section-header\">Investment strategies that work.</h2>",
                  "target": [
                    ".mb-9 > div > .section-header"
                  ]
                },
                {
                  "html": "<h4 class=\"font-semibold text-xl mt-3\">Diversification &amp; Asset Allocation</h4>",
                  "target": [
                    ".insight-card.overflow-hidden.bg-white:nth-child(1) > .p-6 > .mt-3:nth-child(2)"
                  ]
                },
                {
                  "html": "<h4 class=\"font-semibold text-xl mt-3\">Building an Emergency Fund</h4>",
                  "target": [
                    ".insight-card.overflow-hidden.bg-white:nth-child(2) > .p-6 > .mt-3:nth-child(2)"
                  ]
                },
                {
                  "html": "<h4 class=\"font-semibold text-xl mt-3\">Retirement Planning &amp; Tax Optimization</h4>",
                  "target": [
                    ".insight-card.overflow-hidden.bg-white:nth-child(3) > .p-6 > .mt-3:nth-child(2)"
                  ]
                },
                {
                  "html": "<h3 class=\"text-white text-3xl font-semibold tracking-tight\">What our members say</h3>",
                  "target": [
                    ".mb-8 > div:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"text-3xl font-semibold tracking-tight\">Common questions</h2>",
                  "target": [
                    ".mb-6 > .tracking-tight"
                  ]
                },
                {
                  "html": "<h4 class=\"font-semibold text-xl\">About Aether Finance</h4>",
                  "target": [
                    ".p-7.bg-white.border-slate-200 > h4"
                  ]
                },
                {
                  "html": "<h2 class=\"text-4xl font-bold tracking-tight\">Ready to build your financial future?</h2>",
                  "target": [
                    ".text-4xl"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\" style=\"--accent: #0EA5E9;\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0f172a",
                "bgColor": "#ffffff",
                "contrastRatio": 17.85,
                "fontSize": "22.5pt (30px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 17.85"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<span class=\"font-bold text-3xl tracking-tighter heading-font text-slate-900\">Aether</span>",
          "target": [
            ".tracking-tighter.heading-font.text-3xl:nth-child(1)"
          ]
        }
      ]
    },
    {
      "id": "document-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag242",
        "TTv5",
        "TT12.a",
        "EN-301-549",
        "EN-9.2.4.2",
        "ACT"
      ],
      "description": "Ensure each HTML document contains a non-empty <title> element",
      "help": "Documents must have <title> element to aid in navigation",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "doc-has-title",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Document has a non-empty <title> element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\" style=\"--accent: #0EA5E9;\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "form-field-multiple-labels",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag332",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.3.3.2"
      ],
      "description": "Ensure form field does not have multiple label elements",
      "help": "Form field must not have multiple label elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "multiple-label",
              "data": null,
              "relatedNodes": [],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input type=\"number\" id=\"income\" value=\"7850\" class=\"w-full pl-8 pr-4 py-3 border border-slate-300 focus:border-sky-400 outline-none rounded-2xl text-lg font-semibold\" oninput=\"calculateBudget()\">",
          "target": [
            "#income"
          ]
        }
      ]
    },
    {
      "id": "html-has-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure every HTML document has a lang attribute",
      "help": "<html> element must have a lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "The <html> element has a lang attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\" style=\"--accent: #0EA5E9;\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "html-lang-valid",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure the lang attribute of the <html> element has a valid value",
      "help": "<html> element must have a valid value for the lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "valid-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Value of lang attribute is included in the list of valid languages"
            }
          ],
          "impact": null,
          "html": "<html lang=\"en\" style=\"--accent: #0EA5E9;\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "TT7.b",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <img> elements have alternative text or a role of none or presentation",
      "help": "Images must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-alt",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has an alt attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "alt-space-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a valid alt attribute value"
            }
          ],
          "impact": null,
          "html": "<img src=\"https://placehold.co/48x48/0F172A/FFFFFF?text=AF\" alt=\"Aether Finance Logo\" class=\"w-11 h-11 rounded-2xl shadow-inner object-cover\">",
          "target": [
            ".w-11"
          ]
        }
      ]
    },
    {
      "id": "link-name",
      "impact": "serious",
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure links have discernible text",
      "help": "Links must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is not in tab order or has accessible text"
            }
          ],
          "impact": null,
          "html": "<a href=\"#tools\" class=\"nav-link text-slate-700 px-2\">Tools</a>",
          "target": [
            ".nav-link.px-2[href$=\"#tools\"]"
          ]
        }
      ]
    },
    {
      "id": "meta-viewport",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag2aa",
        "wcag144",
        "EN-301-549",
        "EN-9.1.4.4",
        "ACT"
      ],
      "description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
      "help": "Zooming and scaling must not be disabled",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "meta-viewport",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "<meta> tag does not disable zooming on mobile devices"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
          "target": [
            "meta[name=\"viewport\"]"
          ]
        }
      ]
    },
    {
      "id": "nested-interactive",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
      "help": "Interactive controls must not be nested",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "no-focusable-content",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have focusable descendants"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<img src=\"https://placehold.co/48x48/0F172A/FFFFFF?text=AF\" alt=\"Aether Finance Logo\" class=\"w-11 h-11 rounded-2xl shadow-inner object-cover\">",
          "target": [
            ".w-11"
          ]
        }
      ]
    },
    {
      "id": "summary-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure summary elements have discernible text",
      "help": "Summary elements must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<summary class=\"flex justify-between items-center py-4 cursor-pointer font-medium text-sm\">",
          "target": [
            ".py-1.px-5.bg-white:nth-child(1) > details > summary"
          ]
        }
      ]
    },
    {
      "id": "target-size",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag22aa",
        "wcag258"
      ],
      "description": "Ensure touch targets have sufficient size and space",
      "help": "All touch targets must be 24px large, or leave sufficient space",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 24,
                "minOffset": 24
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#tools\" class=\"nav-link text-slate-700 px-2\">Tools</a>",
          "target": [
            ".nav-link.px-2[href$=\"#tools\"]"
          ]
        }
      ]
    }
  ],
  "incomplete": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": null,
                "bgColor": null,
                "contrastRatio": 0,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": "bgGradient",
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"inline-flex items-center gap-x-2 bg-white/90 backdrop-blur-md px-3 py-1.5 rounded-3xl mb-6 shadow-sm\">",
                  "target": [
                    ".inline-flex"
                  ]
                },
                {
                  "html": "<section class=\"hero-bg h-[640px] flex items-center relative\">",
                  "target": [
                    ".hero-bg"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined due to a background gradient"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"ml-2 text-xs font-semibold tracking-wider text-emerald-700\">2024 TOP RATED</span>",
          "target": [
            ".ml-2.text-emerald-700.tracking-wider"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined due to a background gradient"
        }
      ]
    }
  ],
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0284c7",
                "bgColor": "#f8fafc",
                "contrastRatio": 3.91,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-slate-50 text-slate-800\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.91 (foreground color: #0284c7, background color: #f8fafc, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"uppercase tracking-[1px] text-xs font-semibold text-sky-600\">Comprehensive Solutions</span>",
          "target": [
            ".tracking-\\[1px\\]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.91 (foreground color: #0284c7, background color: #f8fafc, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0284c7",
                "bgColor": "#f8fafc",
                "contrastRatio": 3.91,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-slate-50 text-slate-800\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.91 (foreground color: #0284c7, background color: #f8fafc, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#tools\" class=\"mt-4 md:mt-0 text-sm font-semibold text-sky-600 hover:text-sky-700 flex items-center gap-x-1\">\n                View all tools <i class=\"fa-solid fa-arrow-right ml-1\"></i>\n            </a>",
          "target": [
            ".md\\:mt-0"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.91 (foreground color: #0284c7, background color: #f8fafc, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#059669",
                "bgColor": "#f8fafc",
                "contrastRatio": 3.6,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"mt-6 bg-slate-50 border border-slate-200 rounded-3xl p-4\">",
                  "target": [
                    ".p-4.bg-slate-50.mt-6"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.6 (foreground color: #059669, background color: #f8fafc, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"text-emerald-600 font-semibold\">Average user saves</div>",
          "target": [
            ".text-emerald-600.font-semibold"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.6 (foreground color: #059669, background color: #f8fafc, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#059669",
                "contrastRatio": 3.76,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<button onclick=\"calculateBudget()\" class=\"flex-1 md:flex-none bg-emerald-600 hover:bg-emerald-700 transition-colors text-white font-semibold px-7 py-[13px] rounded-2xl text-sm flex items-center justify-center gap-x-2\">",
                  "target": [
                    ".bg-emerald-600"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.76 (foreground color: #ffffff, background color: #059669, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>CALCULATE BUDGET</span>",
          "target": [
            ".bg-emerald-600 > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.76 (foreground color: #ffffff, background color: #059669, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0284c7",
                "bgColor": "#f8fafc",
                "contrastRatio": 3.91,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-slate-50 text-slate-800\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.91 (foreground color: #0284c7, background color: #f8fafc, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"text-xs font-semibold uppercase tracking-wider text-sky-600\">Expert Guidance</span>",
          "target": [
            ".uppercase.tracking-wider.text-sky-600"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.91 (foreground color: #0284c7, background color: #f8fafc, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0284c7",
                "bgColor": "#ffffff",
                "contrastRatio": 4.09,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"insight-card bg-white border border-slate-200 rounded-3xl overflow-hidden\">",
                  "target": [
                    ".insight-card.overflow-hidden.bg-white:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.09 (foreground color: #0284c7, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button onclick=\"viewStrategy(1)\" class=\"text-sm font-semibold text-sky-600 hover:text-sky-700 flex items-center gap-x-1\">\n                            Read full analysis <i class=\"fa-solid fa-arrow-right text-xs ml-1\"></i>\n                        </button>",
          "target": [
            "button[onclick=\"viewStrategy(1)\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.09 (foreground color: #0284c7, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0284c7",
                "bgColor": "#ffffff",
                "contrastRatio": 4.09,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"insight-card bg-white border border-slate-200 rounded-3xl overflow-hidden\">",
                  "target": [
                    ".insight-card.overflow-hidden.bg-white:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.09 (foreground color: #0284c7, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button onclick=\"viewStrategy(2)\" class=\"text-sm font-semibold text-sky-600 hover:text-sky-700 flex items-center gap-x-1\">\n                            Learn how to build it <i class=\"fa-solid fa-arrow-right text-xs ml-1\"></i>\n                        </button>",
          "target": [
            "button[onclick=\"viewStrategy(2)\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.09 (foreground color: #0284c7, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0284c7",
                "bgColor": "#ffffff",
                "contrastRatio": 4.09,
                "fontSize": "10.5pt (14px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"insight-card bg-white border border-slate-200 rounded-3xl overflow-hidden\">",
                  "target": [
                    ".insight-card.overflow-hidden.bg-white:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.09 (foreground color: #0284c7, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button onclick=\"viewStrategy(3)\" class=\"text-sm font-semibold text-sky-600 hover:text-sky-700 flex items-center gap-x-1\">\n                            Explore retirement tools <i class=\"fa-solid fa-arrow-right text-xs ml-1\"></i>\n                        </button>",
          "target": [
            "button[onclick=\"viewStrategy(3)\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.09 (foreground color: #0284c7, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0284c7",
                "bgColor": "#f8fafc",
                "contrastRatio": 3.91,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body class=\"bg-slate-50 text-slate-800\">",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.91 (foreground color: #0284c7, background color: #f8fafc, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"text-xs font-semibold tracking-wider text-sky-600\">FREQUENTLY ASKED</span>",
          "target": [
            ".mb-6 > .tracking-wider.text-sky-600"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.91 (foreground color: #0284c7, background color: #f8fafc, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#10b981",
                "bgColor": "#f8fafc",
                "contrastRatio": 2.42,
                "fontSize": "22.5pt (30px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-slate-50 border border-slate-200 p-3 rounded-2xl\">",
                  "target": [
                    ".p-3.bg-slate-50.border-slate-200:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.42 (foreground color: #10b981, background color: #f8fafc, font size: 22.5pt (30px), font weight: bold). Expected contrast ratio of 3:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div id=\"remaining\" class=\"text-3xl font-bold money-green metric-value mt-1\">$3590</div>",
          "target": [
            "#remaining"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.42 (foreground color: #10b981, background color: #f8fafc, font size: 22.5pt (30px), font weight: bold). Expected contrast ratio of 3:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#059669",
                "bgColor": "#ecfdf5",
                "contrastRatio": 3.57,
                "fontSize": "13.5pt (18px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"bg-emerald-50 border border-emerald-100 p-3 rounded-2xl\">",
                  "target": [
                    ".bg-emerald-50"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.57 (foreground color: #059669, background color: #ecfdf5, font size: 13.5pt (18px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"text-emerald-600\">On track!</span>",
          "target": [
            "#goal-status > .text-emerald-600"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.57 (foreground color: #059669, background color: #ecfdf5, font size: 13.5pt (18px), font weight: bold). Expected contrast ratio of 4.5:1"
        }
      ]
    },
    {
      "id": "label",
      "impact": "critical",
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "implicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an implicit (wrapped) <label>"
            },
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an explicit <label>"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no title attribute"
            },
            {
              "id": "non-empty-placeholder",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no placeholder attribute"
            },
            {
              "id": "presentational-role",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
            }
          ],
          "all": [],
          "none": [],
          "impact": "critical",
          "html": "<input type=\"number\" id=\"income\" value=\"7850\" class=\"w-full pl-8 pr-4 py-3 border border-slate-300 focus:border-sky-400 outline-none rounded-2xl text-lg font-semibold\" oninput=\"calculateBudget()\">",
          "target": [
            "#income"
          ],
          "failureSummary": "Fix any of the following:\n  Element does not have an implicit (wrapped) <label>\n  Element does not have an explicit <label>\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element has no placeholder attribute\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
        },
        {
          "any": [
            {
              "id": "implicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an implicit (wrapped) <label>"
            },
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an explicit <label>"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no title attribute"
            },
            {
              "id": "non-empty-placeholder",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no placeholder attribute"
            },
            {
              "id": "presentational-role",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
            }
          ],
          "all": [],
          "none": [],
          "impact": "critical",
          "html": "<input type=\"number\" id=\"savings-target\" value=\"1800\" class=\"w-full pl-8 pr-4 py-3 border border-slate-300 focus:border-sky-400 outline-none rounded-2xl text-lg font-semibold\" oninput=\"calculateBudget()\">",
          "target": [
            "#savings-target"
          ],
          "failureSummary": "Fix any of the following:\n  Element does not have an implicit (wrapped) <label>\n  Element does not have an explicit <label>\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element has no placeholder attribute\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
        },
        {
          "any": [
            {
              "id": "implicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an implicit (wrapped) <label>"
            },
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an explicit <label>"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no title attribute"
            },
            {
              "id": "non-empty-placeholder",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no placeholder attribute"
            },
            {
              "id": "presentational-role",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
            }
          ],
          "all": [],
          "none": [],
          "impact": "critical",
          "html": "<input type=\"number\" id=\"housing\" value=\"2450\" class=\"w-full pl-7 border border-slate-200 py-2 px-3 rounded-2xl text-sm\" oninput=\"calculateBudget()\">",
          "target": [
            "#housing"
          ],
          "failureSummary": "Fix any of the following:\n  Element does not have an implicit (wrapped) <label>\n  Element does not have an explicit <label>\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element has no placeholder attribute\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
        },
        {
          "any": [
            {
              "id": "implicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an implicit (wrapped) <label>"
            },
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an explicit <label>"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no title attribute"
            },
            {
              "id": "non-empty-placeholder",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no placeholder attribute"
            },
            {
              "id": "presentational-role",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
            }
          ],
          "all": [],
          "none": [],
          "impact": "critical",
          "html": "<input type=\"number\" id=\"utilities\" value=\"285\" class=\"w-full pl-7 border border-slate-200 py-2 px-3 rounded-2xl text-sm\" oninput=\"calculateBudget()\">",
          "target": [
            "#utilities"
          ],
          "failureSummary": "Fix any of the following:\n  Element does not have an implicit (wrapped) <label>\n  Element does not have an explicit <label>\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element has no placeholder attribute\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
        },
        {
          "any": [
            {
              "id": "implicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an implicit (wrapped) <label>"
            },
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an explicit <label>"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no title attribute"
            },
            {
              "id": "non-empty-placeholder",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no placeholder attribute"
            },
            {
              "id": "presentational-role",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
            }
          ],
          "all": [],
          "none": [],
          "impact": "critical",
          "html": "<input type=\"number\" id=\"food\" value=\"620\" class=\"w-full pl-7 border border-slate-200 py-2 px-3 rounded-2xl text-sm\" oninput=\"calculateBudget()\">",
          "target": [
            "#food"
          ],
          "failureSummary": "Fix any of the following:\n  Element does not have an implicit (wrapped) <label>\n  Element does not have an explicit <label>\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element has no placeholder attribute\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
        },
        {
          "any": [
            {
              "id": "implicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an implicit (wrapped) <label>"
            },
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an explicit <label>"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no title attribute"
            },
            {
              "id": "non-empty-placeholder",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no placeholder attribute"
            },
            {
              "id": "presentational-role",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
            }
          ],
          "all": [],
          "none": [],
          "impact": "critical",
          "html": "<input type=\"number\" id=\"transport\" value=\"310\" class=\"w-full pl-7 border border-slate-200 py-2 px-3 rounded-2xl text-sm\" oninput=\"calculateBudget()\">",
          "target": [
            "#transport"
          ],
          "failureSummary": "Fix any of the following:\n  Element does not have an implicit (wrapped) <label>\n  Element does not have an explicit <label>\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element has no placeholder attribute\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
        },
        {
          "any": [
            {
              "id": "implicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an implicit (wrapped) <label>"
            },
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an explicit <label>"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no title attribute"
            },
            {
              "id": "non-empty-placeholder",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no placeholder attribute"
            },
            {
              "id": "presentational-role",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
            }
          ],
          "all": [],
          "none": [],
          "impact": "critical",
          "html": "<input type=\"number\" id=\"healthcare\" value=\"175\" class=\"w-full pl-7 border border-slate-200 py-2 px-3 rounded-2xl text-sm\" oninput=\"calculateBudget()\">",
          "target": [
            "#healthcare"
          ],
          "failureSummary": "Fix any of the following:\n  Element does not have an implicit (wrapped) <label>\n  Element does not have an explicit <label>\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element has no placeholder attribute\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
        },
        {
          "any": [
            {
              "id": "implicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an implicit (wrapped) <label>"
            },
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element does not have an explicit <label>"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no title attribute"
            },
            {
              "id": "non-empty-placeholder",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has no placeholder attribute"
            },
            {
              "id": "presentational-role",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
            }
          ],
          "all": [],
          "none": [],
          "impact": "critical",
          "html": "<input type=\"number\" id=\"entertainment\" value=\"420\" class=\"w-full pl-7 border border-slate-200 py-2 px-3 rounded-2xl text-sm\" oninput=\"calculateBudget()\">",
          "target": [
            "#entertainment"
          ],
          "failureSummary": "Fix any of the following:\n  Element does not have an implicit (wrapped) <label>\n  Element does not have an explicit <label>\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element has no placeholder attribute\n  Element's default semantics were not overridden with role=\"none\" or role=\"presentation\""
        }
      ]
    },
    {
      "id": "link-name",
      "impact": "serious",
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure links have discernible text",
      "help": "Links must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have text that is visible to screen readers"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has no title attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is in tab order and does not have accessible text"
            }
          ],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"text-slate-400 hover:text-slate-700\"><i class=\"fa-brands fa-twitter\"></i></a>",
          "target": [
            ".hover\\:text-slate-700.text-slate-400[href=\"#\"]:nth-child(1)"
          ],
          "failureSummary": "Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute"
        },
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have text that is visible to screen readers"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has no title attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is in tab order and does not have accessible text"
            }
          ],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"text-slate-400 hover:text-slate-700\"><i class=\"fa-brands fa-linkedin\"></i></a>",
          "target": [
            ".hover\\:text-slate-700.text-slate-400[href=\"#\"]:nth-child(2)"
          ],
          "failureSummary": "Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute"
        },
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have text that is visible to screen readers"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute does not exist or is empty"
            },
            {
              "id": "aria-labelledby",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty"
            },
            {
              "id": "non-empty-title",
              "data": {
                "messageKey": "noAttr"
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has no title attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is in tab order and does not have accessible text"
            }
          ],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"text-slate-400 hover:text-slate-700\"><i class=\"fa-brands fa-instagram\"></i></a>",
          "target": [
            ".hover\\:text-slate-700.text-slate-400[href=\"#\"]:nth-child(3)"
          ],
          "failureSummary": "Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 4233
      },
      {
        "y": 576,
        "height": 4233
      },
      {
        "y": 1152,
        "height": 4233
      },
      {
        "y": 1728,
        "height": 4455
      },
      {
        "y": 2304,
        "height": 4455
      },
      {
        "y": 2880,
        "height": 4455
      },
      {
        "y": 3456,
        "height": 4455
      },
      {
        "y": 3735,
        "height": 4455
      }
    ],
    "scans": 9,
    "max_states": 512,
    "settle_ms": 5000,
    "page_timeout_seconds": 150,
    "layout_stability": "consecutive 100ms size samples within one CSS pixel",
    "animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
    "interactive_states": "not exercised",
    "horizontal_scroll": "not exercised"
  }
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "Personal Finance" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.

**Client & Category:**
- Industry: "Personal Finance"
- Description: Banking, investing, budgeting, savings, credit, and personal money management resources.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Personal Finance" category.
2.  **Define Page:** Determine the most effective primary page type (e.g., homepage, service landing page, category portal) to showcase this fictional entity.
3.  **Design:** Develop an opinionated, modern, and professional layout. Make distinct choices about structure and flow.

**Content & Structure Requirements (Deliver a COMPLETE page):**
-   **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
-   **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "Tools", "Insurance", "Budget Planner".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Personal Finance" category. Consider themes similar to: "Investment Strategies", "Emergency Fund", "Retirement Planning".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "capital gains", "liquidity", "tax optimization".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Apply Now", "Compare Rates", "Start Investing".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Personal Finance" sector. Ideas similar but not limited to: "retirement calculator".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "expert insights", "financial planning tips", "success stories".
-   **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
-   **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.