<style>
            .w-nav-overlay {
                overflow: visible;
            }
            ::-webkit-scrollbar {
              width: 10px;
               border-radius: 8px !important:
            }
            
            ::-webkit-scrollbar-track {
              background: transparent; 
               border-radius: 8px !important:
            }
            
            ::-webkit-scrollbar-thumb {
              background: #2e7d327a; 
              border-radius: 8px !important:
            }
            
            /* Handle on hover */
            ::-webkit-scrollbar-thumb:hover {
              background: #2e7d32; 
               border-radius: 8px !important:
            }
            @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap');
            :root {
              --primary-color: #1a3a8f;
              --primary-dark: #0d1f4a;
              --secondary-color: #2e8540;
              --secondary-dark: #1e5e2f;
              
              --neutral-100: #ffffff;
              --neutral-200: #f5f7fa;
              --neutral-300: #e1e5eb;
              --neutral-400: #cbd3df;
              --neutral-500: #a9b3c1;
              --neutral-600: #768396;
              --neutral-700: #4a5568;
              --neutral-800: #333333;
              --neutral-900: #111111;
              
              --accent-color: #4a90e2;
              --accent-light: #6ba7eb;
              --accent-dark: #2a70c2;
              --warning-color: #d9534f;
              --highlight-color: #f0ad4e;
              
              /* Typography */
              --font-heading: 'Montserrat', sans-serif;
              --font-body: 'Open Sans', sans-serif;
              
              --font-size-xs: 0.75rem;   /* 12px */
              --font-size-sm: 0.875rem;  /* 14px */
              --font-size-base: 1rem;    /* 16px */
              --font-size-md: 1.125rem;  /* 18px */
              --font-size-lg: 1.25rem;   /* 20px */
              --font-size-xl: 1.5rem;    /* 24px */
              --font-size-2xl: 2rem;     /* 32px */
              --font-size-3xl: 2.5rem;   /* 40px */
              
              --font-weight-normal: 400;
              --font-weight-medium: 500;
              --font-weight-semibold: 600;
              --font-weight-bold: 700;
              
              --line-height-tight: 1.2;
              --line-height-normal: 1.5;
              --line-height-loose: 1.8;
              
              /* Spacing */
              --spacing-xs: 0.25rem;     /* 4px */
              --spacing-sm: 0.5rem;      /* 8px */
              --spacing-md: 1rem;        /* 16px */
              --spacing-lg: 1.5rem;      /* 24px */
              --spacing-xl: 2rem;        /* 32px */
              --spacing-2xl: 3rem;       /* 48px */
              --spacing-3xl: 4rem;       /* 64px */
              --border-radius-sm: 0.25rem;  /* 4px */
              --border-radius-md: 0.375rem; /* 6px */
              --border-radius-lg: 0.5rem;   /* 8px */
              
              /* Shadows */
              --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
              --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
              --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
              
              /* Transitions */
              --transition-fast: 0.15s;
              --transition-base: 0.3s;
              
              /* Vibrant alternatives (30% more saturated) */
              --vibrant-primary-color: #2048b5;
              --vibrant-primary-dark: #0f2a6a;
              --vibrant-secondary-color: #36a64f;
              --vibrant-secondary-dark: #25803a;
            }
            
            /* Base styles */
            body {
              font-family: var(--font-body);
              font-size: var(--font-size-base);
              line-height: var(--line-height-normal);
              color: var(--neutral-800);
              background-color: var(--neutral-200);
              margin: 0;
              padding: 0;
            }
            
            .container {
              width: 100%;
              max-width: 1200px;
              margin: 0 auto;
              padding: 0 var(--spacing-md);
            }
            
            h1, h2, h3, h4, h5, h6 {
              font-family: var(--font-heading);
              font-weight: var(--font-weight-bold);
              line-height: var(--line-height-tight);
              color: var(--neutral-900);
              margin-bottom: var(--spacing-md);
            }
            
            h1 {
              font-size: var(--font-size-3xl);
              color: var(--primary-color);
            }
            
            h2 {
              font-size: var(--font-size-2xl);
            }
            
            h3 {
              font-size: var(--font-size-xl);
              color: var(--primary-color);
            }
            
            p {
              margin-bottom: var(--spacing-md);
            }
            
            /* Donation Container */
            .donate-container {
              font-family: var(--font-body);
              position: relative;
              display: inline-block;
              margin: var(--spacing-md) 0;
            }
            
            /* Main Donation Button - Using btn class from style guide */
            .donate-button {
              display: inline-block;
              font-family: var(--font-heading);
              font-weight: var(--font-weight-medium);
              text-align: center;
              white-space: nowrap;
              vertical-align: middle;
              user-select: none;
              border: 1px solid transparent;
              padding: var(--spacing-sm) var(--spacing-lg);
              font-size: var(--font-size-base);
              line-height: 1.5;
              border-radius: var(--border-radius-md);
              transition: all var(--transition-fast) ease-in-out;
              cursor: pointer;
              background-color: var(--vibrant-secondary-color);
              color: var(--neutral-100);
              box-shadow: var(--shadow-sm);
              display: inline-flex;
              align-items: center;
              justify-content: center;
              min-width: 180px;
            }
            
            .donate-button:hover {
              background-color: var(--vibrant-secondary-dark);
              color: var(--neutral-100);
              text-decoration: none;
              box-shadow: var(--shadow-md);
              transform: translateY(-2px);
            }
            
            .donate-button:active {
              transform: translateY(0);
              box-shadow: var(--shadow-sm);
            }
            
            .donate-button:focus {
              outline: none;
              box-shadow: 0 0 0 3px rgba(46, 133, 64, 0.3);
            }
            
            /* One-time donation button variation */
            .donate-button.one-time {
              background-color: var(--vibrant-primary-color);
            }
            
            .donate-button.one-time:hover {
              background-color: var(--vibrant-primary-dark);
            }
            
            .donate-button.one-time:focus {
              box-shadow: 0 0 0 3px rgba(26, 58, 143, 0.3);
            }
            
            /* Supporting Text */
            .donate-supporting-text {
              font-family: var(--font-body);
              font-size: var(--font-size-sm);
              color: var(--neutral-700);
              margin-top: var(--spacing-sm);
              max-width: 300px;
              line-height: var(--line-height-normal);
            }
            
            /* Dropdown Container */
            .donate-dropdown {
              position: absolute;
              top: 100%;
              left: 0;
              right: 0;
              background-color: var(--neutral-100);
              border: 1px solid var(--neutral-300);
              border-radius: var(--border-radius-md);
              box-shadow: var(--shadow-md);
              z-index: 100;
              margin-top: var(--spacing-sm);
              overflow: hidden;
              display: none;
              min-width: 220px;
            }
            
            .donate-dropdown.active {
              display: block;
            }
            
            /* Dropdown Options */
            .donate-option {
              padding: var(--spacing-md);
              font-family: var(--font-body);
              font-size: var(--font-size-sm);
              color: var(--neutral-800);
              cursor: pointer;
              transition: background-color var(--transition-fast) ease;
              display: flex;
              justify-content: space-between;
              align-items: center;
            }
            
            .donate-option:hover {
              background-color: var(--neutral-200);
            }
            
            .donate-option:not(:last-child) {
              border-bottom: 1px solid var(--neutral-300);
            }
            
            /* Security Indicator */
            .security-indicator {
              display: flex;
              align-items: center;
              font-size: var(--font-size-xs);
              color: var(--neutral-700);
              margin-top: var(--spacing-xs);
            }
            
            .security-indicator i {
              color: var(--secondary-color);
              margin-right: var(--spacing-xs);
            }
            
            /* Icon styles */
            .donate-icon {
              margin-right: var(--spacing-sm);
            }
            
            /* Demo page specific styles */
            .section-container {
              padding: var(--spacing-2xl) 0;
            }
            
            .button-section {
              margin-bottom: var(--spacing-2xl);
              padding: var(--spacing-xl);
              background-color: var(--neutral-100);
              border-radius: var(--border-radius-lg);
              box-shadow: var(--shadow-md);
            }
            
            .implementation-notes {
              background-color: var(--neutral-100);
              padding: var(--spacing-lg);
              border-radius: var(--border-radius-md);
              border-left: 4px solid var(--primary-color);
              margin-bottom: var(--spacing-xl);
            }
            
            .code-snippet {
              background-color: var(--neutral-800);
              color: var(--neutral-200);
              padding: var(--spacing-md);
              border-radius: var(--border-radius-sm);
              overflow-x: auto;
              font-family: monospace;
              margin-bottom: var(--spacing-md);
            }
            
            /* Responsive Styles */
            @media (max-width: 1000px) {
                .tabs-menu-2.max-tab.tab-1-1 {
                    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
                }
            }
            
            
            @media (max-width: 576px) {
              .donate-button {
                width: 100%;
                padding: var(--spacing-md) var(--spacing-lg);
                font-size: var(--font-size-md);
              }
              
              .donate-dropdown {
                width: 100%;
              }
              
              .donate-supporting-text {
                text-align: center;
                max-width: 100%;
              }
              
              .container {
                padding: var(--spacing-md);
              }
              
              .button-section {
                padding: var(--spacing-lg);
              }
              
              h1 {
                font-size: var(--font-size-2xl);
              }
              
              h2 {
                font-size: var(--font-size-xl);
              }
            }
            
            /* Tablet - 577px to 768px */
            @media (min-width: 577px) and (max-width: 768px) {
              .container {
                max-width: 720px;
              }
            }
            
            /* Desktop - 769px to 992px */
            @media (min-width: 769px) and (max-width: 992px) {
              .container {
                max-width: 960px;
              }
            }
            
            /* Large Desktop - 993px and up */
            @media (min-width: 993px) {
              .container {
                max-width: 1140px;
              }
            }
            /* Modal Styles for Donation Button
             * Follows style guide specifications with vibrant colors
             */
            
            /* Modal Overlay */
            .modal-overlay {
              position: fixed;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background-color: rgba(0, 0, 0, 0.5);
              display: none;
              justify-content: center;
              align-items: center;
              z-index: 1000;
              opacity: 0;
              transition: opacity var(--transition-base) ease;
            }
            
            .modal-overlay.active {
              display: flex;
              opacity: 1;
            }
            
            /* Modal Container */
            .modal-container {
              background-color: var(--neutral-100);
              border-radius: var(--border-radius-lg);
              box-shadow: var(--shadow-lg);
              width: 90%;
              max-width: 500px;
              max-height: 90vh;
              overflow-y: auto;
              transform: translateY(-20px);
              transition: transform var(--transition-base) ease;
            }
            
            .modal-overlay.active .modal-container {
              transform: translateY(0);
            }
            
            /* Modal Header */
            .modal-header {
              padding: var(--spacing-lg);
              border-bottom: 1px solid var(--neutral-300);
              display: flex;
              justify-content: space-between;
              align-items: center;
            }
            
            .modal-header h3 {
              font-family: var(--font-heading);
              font-weight: var(--font-weight-bold);
              font-size: var(--font-size-xl);
              color: var(--primary-color);
              margin: 0;
            }
            
            .modal-close {
              background: none;
              border: none;
              font-size: 1.5rem;
              color: var(--neutral-600);
              cursor: pointer;
              padding: 0;
              line-height: 1;
            }
            
            .modal-close:hover {
              color: var(--neutral-900);
            }
            
            /* Modal Body */
            .modal-body {
              padding: var(--spacing-lg);
            }
            
            .modal-body p {
              font-family: var(--font-body);
              font-size: var(--font-size-base);
              color: var(--neutral-700);
              margin-bottom: var(--spacing-lg);
            }
            
            /* Modal Options */
            .modal-options {
              display: flex;
              flex-direction: column;
              gap: var(--spacing-md);
            }
            
            .modal-option {
              display: flex;
              align-items: center;
              padding: var(--spacing-lg);
              border-radius: var(--border-radius-md);
              border: 1px solid var(--neutral-300);
              background-color: var(--neutral-100);
              cursor: pointer;
              transition: all var(--transition-fast) ease;
              text-decoration: none;
              position: relative;
            }
            
            .modal-option:hover {
              border-color: var(--primary-color);
              box-shadow: var(--shadow-md);
              transform: translateY(-2px);
              text-decoration: none;
            }
            
            .modal-option.one-time {
              border-left: 4px solid var(--vibrant-primary-color);
            }
            
            .modal-option.monthly {
              border-left: 4px solid var(--vibrant-secondary-color);
            }
            
            .modal-icon {
              font-size: 1.5rem;
              margin-right: var(--spacing-md);
              color: var(--primary-color);
            }
            
            .modal-option.one-time .modal-icon {
              color: var(--vibrant-primary-color);
            }
            
            .modal-option.monthly .modal-icon {
              color: var(--vibrant-secondary-color);
            }
            
            .option-text {
              flex: 1;
            }
            
            .option-text h4 {
              font-family: var(--font-heading);
              font-weight: var(--font-weight-semibold);
              font-size: var(--font-size-md);
              color: var(--neutral-800);
              margin: 0 0 var(--spacing-xs) 0;
            }
            
            .option-text p {
              font-family: var(--font-body);
              font-size: var(--font-size-sm);
              color: var(--neutral-600);
              margin: 0;
            }
            
            .dropdown-indicator {
              color: var(--neutral-600);
              transition: transform var(--transition-fast) ease;
            }
            
            .dropdown-indicator.active {
              transform: rotate(180deg);
            }
            
            /* Monthly Options */
            .monthly-options {
              display: none;
              flex-direction: column;
              margin-top: var(--spacing-md);
              margin-left: calc(var(--spacing-lg) + 1.5rem);
              border-left: 1px solid var(--neutral-300);
              padding-left: var(--spacing-md);
            }
            
            .monthly-options.active {
              display: flex;
            }
            
            .monthly-option {
              padding: var(--spacing-md);
              border-radius: var(--border-radius-sm);
              background-color: var(--neutral-200);
              margin-bottom: var(--spacing-xs);
              font-family: var(--font-body);
              font-size: var(--font-size-sm);
              color: var(--neutral-800);
              text-decoration: none;
              transition: all var(--transition-fast) ease;
            }
            
            .monthly-option:hover {
              background-color: var(--neutral-300);
              color: var(--primary-color);
              text-decoration: none;
            }
            
            /* Modal Footer */
            .modal-footer {
              padding: var(--spacing-md) var(--spacing-lg);
              border-top: 1px solid var(--neutral-300);
              display: flex;
              justify-content: center;
            }
            
            .modal-footer .security-indicator {
              font-size: var(--font-size-xs);
              color: var(--neutral-600);
            }
            
            /* Responsive Styles */
            @media (max-width: 576px) {
              .modal-container {
                width: 95%;
              }
              
              .modal-header h3 {
                font-size: var(--font-size-lg);
              }
              
              .modal-option {
                padding: var(--spacing-md);
              }
              
              .monthly-options {
                margin-left: var(--spacing-lg);
              }
            }
            @media  (max-width: 424px) {
            .w-nav-overlay {
                /* width: 100%; */
                display: none;
                position: absolute;
                top: 100%;
                left: -52px;
                right: 0;
                overflow: visible;
            }
            }
            
            </style>
            <div class="ss-calculator-app">
                <main>
                    <div class="progress-steps">
                        <div class="step active">
                            <div class="step-number">1</div>
                            <div class="step-label">Your Info</div>
                        </div>
                        <div class="step">
                            <div class="step-number">2</div>
                            <div class="step-label">Calculate</div>
                        </div>
                        <div class="step">
                            <div class="step-number">3</div>
                            <div class="step-label">Results</div>
                        </div>
                    </div>
            
                    <div id="ss-calculator-container">
                        <!-- Form will be shown initially -->
                        <div id="ss-calculator-form-container" class="ss-calculator-form">
                            <h2>Enter Your Information</h2>
                            
                            <form id="ss-calculator-form">
                                <div class="form-group">
                                    <label>Date of Birth</label>
                                    <div class="date-inputs">
                                        <div class="select-container">
                                            <select id="ss-calculator-month">
                                                <option value="">Month</option>
                                                <option value="1">January</option>
                                                <option value="2">February</option>
                                                <option value="3">March</option>
                                                <option value="4">April</option>
                                                <option value="5">May</option>
                                                <option value="6">June</option>
                                                <option value="7">July</option>
                                                <option value="8">August</option>
                                                <option value="9">September</option>
                                                <option value="10">October</option>
                                                <option value="11">November</option>
                                                <option value="12">December</option>
                                            </select>
                                            <div id="ss-calculator-month-error" class="error-message"></div>
                                        </div>
                                        
                                        <div class="select-container">
                                            <select id="ss-calculator-day">
                                                <option value="">Day</option>
                                                <!-- Days will be populated by JavaScript -->
                                            </select>
                                            <div id="ss-calculator-day-error" class="error-message"></div>
                                        </div>
                                        
                                        <div class="select-container">
                                            <select id="ss-calculator-year">
                                                <option value="">Year</option>
                                                <!-- Years will be populated by JavaScript -->
                                            </select>
                                            <div id="ss-calculator-year-error" class="error-message"></div>
                                        </div>
                                    </div>
                                    <p class="help-text">Your date of birth is used to determine your full retirement age.</p>
                                </div>
                                
                                <div class="form-group">
                                    <label>Primary Insurance Amount (PIA)</label>
                                    <div class="input-container">
                                        <input type="text" id="ss-calculator-pia" placeholder="Enter your PIA">
                                        <div id="ss-calculator-pia-error" class="error-message"></div>
                                    </div>
                                    <p class="help-text">Your Primary Insurance Amount (PIA) is the benefit you would receive if you begin benefits at your full retirement age. You can find this on your Social Security statement.</p>
                                </div>
                                
                                <div class="form-group">
                                    <label>Life Expectancy</label>
                                    <div class="input-container">
                                        <input type="range" id="ss-calculator-life-expectancy" min="70" max="100" value="100">
                                        <span id="ss-calculator-life-expectancy-value">100</span> years
                                        <div id="ss-calculator-life-expectancy-error" class="error-message"></div>
                                    </div>
                                    <p class="help-text">Adjust your expected life span to see how it affects your lifetime benefits.</p>
                                </div>
                                
                                <button type="submit" class="ss-calculator-button">Calculate Benefits</button>
                            </form>
                        </div>
                        
                        <!-- Results will be shown after calculation -->
                        <div id="ss-calculator-results-container" class="ss-calculator-results" style="display: none;">
                            <div class="ss-calculator-tabs">
                                <button class="tab-button active" data-tab="summary">Summary</button>
                                <button class="tab-button" data-tab="monthly">Monthly Benefits</button>
                                <button class="tab-button" data-tab="lifetime">Lifetime Income</button>
                                <button class="tab-button" data-tab="table">Benefit Table</button>
                            </div>
            
                            <div id="ss-calculator-summary-tab" class="tab-content active">
                                <div class="results-summary">
                                    <h2>Your Social Security Benefits Summary</h2>
                                    
                                    <div class="optimal-strategy">
                                        <h3>Optimal Claiming Strategy</h3>
                                        <div class="strategy-highlight">
                                            <p class="strategy-age">Age <span id="ss-calculator-optimal-age">70</span></p>
                                            <p class="strategy-benefit"><span id="ss-calculator-optimal-benefit">$0</span> per month</p>
                                        </div>
                                        <p class="strategy-explanation">
                                            Based on your inputs and a life expectancy of <span id="ss-calculator-life-expectancy-display">100</span> years, 
                                            claiming at age <span id="ss-calculator-optimal-age-2">70</span> maximizes your lifetime benefits.
                                        </p>
                                    </div>
                                    <div class="sssbut">
                                        <h3>Found this calculator helpful? There's more where that came from.</h3>
                                        <button class="sssbuttt"><a href="www.mygovexpert.com/s-s-s">Subscribe, Support, Suggest</a></button>
                                        <p>Subscribe for updates when we add new calculators and tools.</p>
                                        </div>
            
                                    <div class="benefit-comparison">
                                        <h3>Benefit Comparison</h3>
                                        <div class="benefit-table">
                                            <div class="benefit-row header">
                                                <div class="benefit-cell">Claiming Age</div>
                                                <div class="benefit-cell">Monthly Benefit</div>
                                                <div class="benefit-cell">Annual Benefit</div>
                                            </div>
                                            <div class="benefit-row">
                                                <div class="benefit-cell" data-label="Claiming Age:">Age 62 (Early)</div>
                                                <div class="benefit-cell" data-label="Monthly Benefit:"><span id="ss-calculator-benefit-62-monthly">$0</span></div>
                                                <div class="benefit-cell" data-label="Annual Benefit:"><span id="ss-calculator-benefit-62-annual">$0</span></div>
                                            </div>
                                            <div class="benefit-row">
                                                <div class="benefit-cell" data-label="Claiming Age:">Age <span id="ss-calculator-fra-age">67</span> (Full Retirement)</div>
                                                <div class="benefit-cell" data-label="Monthly Benefit:"><span id="ss-calculator-benefit-fra-monthly">$0</span></div>
                                                <div class="benefit-cell" data-label="Annual Benefit:"><span id="ss-calculator-benefit-fra-annual">$0</span></div>
                                            </div>
                                            <div class="benefit-row">
                                                <div class="benefit-cell" data-label="Claiming Age:">Age 70 (Maximum)</div>
                                                <div class="benefit-cell" data-label="Monthly Benefit:"><span id="ss-calculator-benefit-70-monthly">$0</span></div>
                                                <div class="benefit-cell" data-label="Annual Benefit:"><span id="ss-calculator-benefit-70-annual">$0</span></div>
                                            </div>
                                        </div>
                                    </div>
            
                                    <div class="input-summary">
                                        <h3>Your Inputs</h3>
                                        <p><strong>Date of Birth:</strong> <span id="ss-calculator-input-dob">--/--/----</span></p>
                                        <p><strong>Primary Insurance Amount (PIA):</strong> <span id="ss-calculator-input-pia">$0</span></p>
                                        <p><strong>Full Retirement Age:</strong> <span id="ss-calculator-input-fra">67 years and 0 months</span></p>
                                        <p><strong>Life Expectancy:</strong> <span id="ss-calculator-input-life-expectancy">100</span> years</p>
                                    </div>
                                    
                                    <button id="ss-calculator-recalculate-button" class="ss-calculator-button">
                                        Recalculate
                                    </button>
                                </div>
                            </div>
            
                            <div id="ss-calculator-monthly-tab" class="tab-content">
                                <div class="monthly-benefit-chart">
                                    <h3>Monthly Benefit by Claiming Age</h3>
                                    
                                    <div class="chart-container">
                                        <div id="ss-calculator-monthly-chart" class="chart-content">
                                            <!-- Chart bars will be populated by JavaScript -->
                                        </div>
                                    </div>
                                    
                                    <div class="chart-legend">
                                        <p>This chart shows your estimated monthly benefit amount based on different claiming ages.</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div id="ss-calculator-lifetime-tab" class="tab-content">
                                <div class="lifetime-income-chart">
                                    <h3>Lifetime Income by Claiming Age</h3>
                                    
                                    <div class="chart-container">
                                        <canvas id="ss-calculator-lifetime-chart"></canvas>
                                    </div>
                                    
                                    <div class="chart-legend">
                                        <div class="legend-item">
                                            <div class="legend-color" style="background-color: #0066cc;"></div>
                                            <div class="legend-label">Claim at 62</div>
                                        </div>
                                        <div class="legend-item">
                                            <div class="legend-color" style="background-color: #ffc107;"></div>
                                            <div class="legend-label">Claim at Full Retirement Age</div>
                                        </div>
                                        <div class="legend-item">
                                            <div class="legend-color" style="background-color: #28a745;"></div>
                                            <div class="legend-label">Claim at 70</div>
                                        </div>
                                    </div>
                                    
                                    <p class="chart-explanation">
                                        This chart shows your total lifetime income based on different claiming ages and your life expectancy.
                                        The lines represent the cumulative benefits you would receive over your lifetime.
                                    </p>
                                </div>
                            </div>
            
                            <div id="ss-calculator-table-tab" class="tab-content">
                                <div class="break-even-table">
                                    <h3>Benefit Amounts by Claiming Age</h3>
                                    
                                    <table class="data-table">
                                        <thead>
                                            <tr>
                                                <th>Claiming Age</th>
                                                <th>Monthly Benefit</th>
                                                <th>Annual Benefit</th>
                                                <th>% of Full Benefit</th>
                                            </tr>
                                        </thead>
                                        <tbody id="ss-calculator-benefit-table-body">
                                            <!-- Table rows will be populated by JavaScript -->
                                        </tbody>
                                    </table>
                                    
                                    <div class="table-notes">
                                        <p>
                                            This table shows your estimated benefit amounts based on different claiming ages.
                                            The percentages are relative to your full retirement age benefit amount.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </main>
                <div id="ss-calculator-loading-overlay" class="loading-overlay" style="display: none;">
                    <div class="loading-spinner"></div>
                    <p>Calculating your benefits...</p>
                </div>
            </div>

<style>
.sssbut {
  background-color: #fffce8;
  color: #036;
  border-radius: 8px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px 40px;
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-weight: 500;
  text-align: center !important;
}
.sssbut h3 {
  width: 100%;
  max-width: 577px;
  margin: 0 auto;
  line-height: 34px;
  color: #0A3D62;
}
button.sssbuttt {
  background: #2E8B57;
  color: #fff;
  padding: 15px 33px;
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 24px;
}
.sssbuttt a {
color: #fff;
text-decoration: none;
}
/* App Styles */
.ss-calculator-form {
  background-color: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 23%);
  max-width: 800px;
  margin: 0 auto;
}

.ss-calculator-header {
  background-color: #0066cc;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 8px 8px 0 0;
  margin-bottom: 20px;
}

.ss-calculator-header h1 {
  margin: 0;
  font-size: 28px;
}

.ss-calculator-header p {
  margin: 10px 0 0;
  font-size: 16px;
}

.ss-calculator-footer {
  background-color: #f2f2f2;
  padding: 15px;
  text-align: center;
  border-radius: 0 0 8px 8px;
  margin-top: 20px;
  font-size: 14px;
  color: #666;
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.loading-spinner {
  border: 5px solid #f3f3f3;
  border-top: 5px solid #0066cc;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Form Styles */
.ss-calculator-form {
  background-color: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin: 0 auto;
}

.ss-calculator-form h2 {
  color: #003366;
  margin-top: 0;
  margin-bottom: 20px;
  text-align: center;
  font-family: 'Montserrat';
}

.form-group {
  margin-bottom: 25px;
}

.form-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 8px;
  color: #000000;
  font-family: 'Montserrat';
}

.date-inputs {
  display: flex;
  gap: 10px;
}

.select-container {
  flex: 1;
  position: relative;
}

select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
  font-size: 16px;
  font-family: 'Montserrat';
  font-weight: 500;
}

.input-container {
  position: relative;
}
.input-container {
  font-family: 'Montserrat';
  font-weight: 500;
  color: #000;
}
input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
}

input[type="range"] {
  height: 10px;
  -webkit-appearance: none;
  margin: 10px 0;
  background: #f9f9f9;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #0066cc;
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #0066cc;
  cursor: pointer;
}

.error {
  border-color: #ff6b6b;
}

.error-message {
  color: #ff6b6b;
  font-size: 14px;
  margin-top: 5px;
}

.help-text {
  font-size: 14px;
  color: #3a3939;
  margin-top: 5px;
  font-family: 'Montserrat';
  font-weight: 600;
}

.ss-calculator-button {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 30px auto 0;
  padding: 12px 20px;
  background-color: #0066cc;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s;
  font-family: 'Montserrat';
}

.ss-calculator-button:hover {
  background-color: #0055aa;
}

/* Results Styles */
.ss-calculator-results {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ss-calculator-tabs {
  display: flex;
  margin-bottom: 20px;
  border-bottom: 1px solid #ddd;
  flex-wrap: wrap;
}

.tab-button {
  padding: 10px 20px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: #555;
  font-family: 'Montserrat';
  color: #000;
}

.tab-button.active {
  border-bottom-color: #0066cc;
  color: #0066cc;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Results Summary Styles */
.results-summary {
  margin-bottom: 30px;
}

.results-summary h2 {
  color: #003366;
  margin-bottom: 20px;
  text-align: center;
  font-family: 'Montserrat';
}

.optimal-strategy {
  background-color: #e6f2ff;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  text-align: center !important;
}

.strategy-highlight {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px 0;
}

.strategy-age {
  font-size: 24px;
  font-weight: bold;
  margin-right: 20px;
  color: #003366;
  font-family: 'Montserrat';
}

.strategy-benefit {
  font-size: 24px;
  font-weight: bold;
  color: #28a745;
  font-family: 'Montserrat';
}
p.strategy-explanation {
  font-family: 'Montserrat';
  font-weight: 600;
  color: #000;
  text-align: center;
}
p{
  font-family: 'Montserrat';
  font-weight: 600;
  color: #000;
}

.benefit-comparison {
  margin-bottom: 20px;
}

.benefit-table {
  width: 100%;
  border-collapse: collapse;
}

.benefit-row {
  display: flex;
  border-bottom: 1px solid #ddd;
  width: 100%;
}

.benefit-row.header {
  background-color: #f2f2f2;
  font-weight: bold;
}

.benefit-cell {
  flex: 1;
  padding: 12px 15px;
  text-align: center;
  font-family: 'Montserrat';
  color: #000;
}

.input-summary {
  background-color: #f2f2f2;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* Chart Styles */
.chart-container {
  height: 400px;
  margin: 30px 0;
  position: relative;
}

.chart-y-axis {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 60px;
}

.chart-y-label {
  position: absolute;
  right: 10px;
  transform: translateY(50%);
  font-size: 12px;
  color: #666;
}

.chart-content {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  padding-left: 60px;
}

.chart-bar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
}

.chart-bar-wrapper {
  height: 250px;
  width: 60px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.chart-bar {
  width: 40px;
  background-color: #0066cc;
  position: relative;
  transition: height 0.5s ease;
  border-radius: 4px 4px 0 0;
}

.chart-bar-value {
  position: absolute;
  top: -25px;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
}

.chart-bar-label {
  margin-top: 10px;
  font-size: 14px;
  text-align: center;
  font-weight: 600;
  font-family: 'Montserrat';
}

.chart-legend {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  margin: 0 15px;
}

.legend-color {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border-radius: 3px;
}

.bar-62 {
  background-color: #0066cc; /* Blue */
}

.bar-67 {
  background-color: #ffc107; /* Gold/Yellow */
}

.bar-70 {
  background-color: #28a745; /* Green */
}

.chart-age-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.chart-bars {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
  width: 100%;
}

.chart-x-label {
  margin-top: 10px;
  font-size: 14px;
}

.chart-explanation {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: #666;
}

/* Table Styles */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.data-table th, .data-table td {
  padding: 12px 15px;
  text-align: center;
  border-bottom: 1px solid #ddd;
  font-family: 'Montserrat';
  font-weight: 500;
}

.data-table th {
  background-color: #f2f2f2;
  font-weight: bold;
}

.data-table tr:hover {
  background-color: #f5f5f5;
}

.table-notes {
  font-size: 14px;
  color: #666;
  margin-top: 15px;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .ss-calculator-app {
    padding: 10px;
  }
  
  .ss-calculator-header {
    padding: 15px;
  }
  
  .ss-calculator-header h1 {
    font-size: 24px;
  }
  
  .date-inputs {
    flex-direction: column;
    gap: 15px;
  }
  
  .ss-calculator-form {
    padding: 15px;
  }
  
  .strategy-highlight {
    flex-direction: column;
    text-align: center;
  }
  
  .strategy-age {
    margin-right: 0;
    margin-bottom: 10px;
  }
  
  .benefit-row {
    flex-direction: column;
  }
  
  .benefit-cell {
    text-align: left;
    padding: 8px 15px;
  }
  
  .benefit-row.header {
    display: none;
  }
  
  .benefit-cell:before {
    content: attr(data-label);
    font-weight: bold;
    display: inline-block;
    width: 120px;
  }
  
  .chart-container {
    height: 300px;
  }
  
  .chart-bar-container {
    width: 60px;
  }
  
  .chart-bar-wrapper {
    width: 40px;
  }
  
  .chart-bar {
    width: 30px;
  }
  
  .chart-bar-value {
    font-size: 12px;
  }
  
  .chart-bar-label {
    font-size: 12px;
  }
  
  .legend-item {
    margin: 5px;
  }
  
  .ss-calculator-tabs {
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
  }
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap');
:root {
  --primary-color: #1a3a8f;
  --primary-dark: #0d1f4a;
  --secondary-color: #2e8540;
  --secondary-dark: #1e5e2f;
  --neutral-100: #ffffff;
  --neutral-200: #f5f7fa;
  --neutral-300: #e1e5eb;
  --neutral-400: #cbd3df;
  --neutral-500: #a9b3c1;
  --neutral-600: #768396;
  --neutral-700: #4a5568;
  --neutral-800: #333333;
  --neutral-900: #111111;  
  --accent-color: #4a90e2;
  --accent-light: #6ba7eb;
  --accent-dark: #2a70c2;
  --warning-color: #d9534f;
  --highlight-color: #f0ad4e; 
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Open Sans', sans-serif;  
  --font-size-xs: 0.75rem; 
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;  
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem; 
  --font-size-xl: 1.5rem;  
  --font-size-2xl: 2rem;   
  --font-size-3xl: 2.5rem;   
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;  
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-loose: 1.8;
  --spacing-xs: 0.25rem;    
  --spacing-sm: 0.5rem;     
  --spacing-md: 1rem;    
  --spacing-lg: 1.5rem;    
  --spacing-xl: 2rem;      
  --spacing-2xl: 3rem;      
  --spacing-3xl: 4rem;
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.375rem;
  --border-radius-lg: 0.5rem;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --transition-fast: 0.15s;
  --transition-base: 0.3s;
  --vibrant-primary-color: #2048b5;
  --vibrant-primary-dark: #0f2a6a;
  --vibrant-secondary-color: #36a64f;
  --vibrant-secondary-dark: #25803a;
}
.donate-container {
  font-family: var(--font-body);
  position: relative;
  display: inline-block;
  margin: var(--spacing-md) 0;
  text-align: center;
  width: 100%;
}
.donate-button {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-medium);
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-base);
  line-height: 1.5;
  border-radius: var(--border-radius-md);
  transition: all var(--transition-fast) ease-in-out;
  cursor: pointer;
  background-color: var(--vibrant-secondary-color);
  color: var(--neutral-100);
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
}
.donate-button:hover {
  background-color: var(--vibrant-secondary-dark);
  color: var(--neutral-100);
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.donate-button:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}
.donate-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 133, 64, 0.3);
}
.donate-supporting-text {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--neutral-700);
  margin-top: var(--spacing-sm);
  max-width: 600px;
  line-height: var(--line-height-normal);
  margin-left: auto;
  margin-right: auto;
}
.security-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  color: var(--neutral-700);
  margin-top: var(--spacing-xs);
}
.security-indicator i {
  color: var(--secondary-color);
  margin-right: var(--spacing-xs);
}
.donate-icon {
  margin-right: var(--spacing-sm);
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity var(--transition-base) ease;
}
.modal-overlay.active {
  display: flex;
  opacity: 1;
}
.modal-container {
  background-color: var(--neutral-100);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(-20px);
  transition: transform var(--transition-base) ease;
}
.modal-overlay.active .modal-container {
  transform: translateY(0);
}
.modal-header {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--neutral-300);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-header h3 {
  margin-top: 20px;
  font-size: 24px;
  line-height: 30px;
  font-family: 'Montserrat';
}
h3 {
  margin-top: 20px;
  font-size: 24px;
  line-height: 30px;
  font-family: 'Montserrat';
  margin-bottom: 23px;
  font-family: 'Montserrat';
  color: #003366;
}
p {
  font-family: 'Montserrat';
  color: #000;
  font-weight: 500;
}
.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--neutral-600);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.modal-close:hover {
  color: var(--neutral-900);
}
.modal-body {
  padding: var(--spacing-lg);
}
.modal-body p {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--neutral-700);
  margin-bottom: var(--spacing-lg);
}
.impact-statement {
  font-style: italic;
  background-color: var(--neutral-200);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-md);
  border-left: 4px solid var(--primary-color);
}
.modal-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.modal-option {
  display: flex;
  align-items: center;
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--neutral-300);
  background-color: var(--neutral-100);
  cursor: pointer;
  transition: all var(--transition-fast) ease;
  text-decoration: none;
  position: relative;
}
.modal-option:hover {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}
.modal-option.one-time {
  border-left: 4px solid var(--vibrant-primary-color);
}
.modal-option.monthly {
  border-left: 4px solid var(--vibrant-secondary-color);
}
.modal-icon {
  font-size: 1.5rem;
  margin-right: var(--spacing-md);
  color: var(--primary-color);
}
.modal-option.one-time .modal-icon {
  color: var(--vibrant-primary-color);
}
.modal-option.monthly .modal-icon {
  color: var(--vibrant-secondary-color);
}
.option-text {
  flex: 1;
}
.option-text h4 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-md);
  color: var(--neutral-800);
  margin: 0 0 var(--spacing-xs) 0;
}
.option-text p {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--neutral-600);
  margin: 0;
}
.dropdown-indicator {
  color: var(--neutral-600);
  transition: transform var(--transition-fast) ease;
}
.dropdown-indicator.active {
  transform: rotate(180deg);
}
.monthly-options {
  display: none;
  flex-direction: column;
  margin-top: var(--spacing-md);
  margin-left: calc(var(--spacing-lg) + 1.5rem);
  border-left: 1px solid var(--neutral-300);
  padding-left: var(--spacing-md);
}
.monthly-options.active {
  display: flex;
}
.monthly-option {
  padding: var(--spacing-md);
  border-radius: var(--border-radius-sm);
  background-color: var(--neutral-200);
  margin-bottom: var(--spacing-xs);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--neutral-800);
  text-decoration: none;
  transition: all var(--transition-fast) ease;
}
.monthly-option:hover {
  background-color: var(--neutral-300);
  color: var(--primary-color);
  text-decoration: none;
}
.modal-footer {
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--neutral-300);
  display: flex;
  justify-content: center;
}
.modal-footer .security-indicator {
  font-size: var(--font-size-xs);
  color: var(--neutral-600);
}
@media (max-width: 576px) {
  .modal-container {
    width: 95%;
  }
  .modal-header h3 {
    font-size: var(--font-size-lg);
  }
  .modal-option {
    padding: var(--spacing-md);
  }
  .monthly-options {
    margin-left: var(--spacing-lg);
  }
  .donate-button {
    width: 100%;
    max-width: 300px;
  }
}
</style>
<style>
     
        
        .progress-steps {
            display: flex;
            justify-content: center;
            margin-bottom: 30px;
        }
        
        .step {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 120px;
            position: relative;
        }
        
        .step:not(:last-child)::after {
            content: "";
            position: absolute;
            top: 20px;
            right: -50%;
            width: 100%;
            height: 3px;
            background-color: #ddd;
            z-index: 1;
        }
        
        .step-number {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #ddd;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            margin-bottom: 10px;
            position: relative;
            z-index: 2;
            cursor: pointer;
        }
        
        .step.active .step-number {
            background-color: #0066cc;
            cursor: pointer;
        }
        
        .step.completed .step-number {
          background-color: #28a745;
          cursor: pointer;
      }
        
        .step-label {
          font-size: 14px;
          text-align: center;
          font-weight: 600;
          font-family: 'Montserrat';
          color: #000;
      }
        
        /* Medicare help section */
        .medicare-help {
            background-color: #f0f7ff;
            padding: 20px;
            border-radius: 8px;
            margin: 30px 0;
            text-align: center;
        }
        
        .medicare-help h3 {
            color: #0066cc;
            margin-top: 0;
        }
        
        .medicare-help p {
            margin-bottom: 20px;
        }
        
        /* Fix for the Check Your Options button */
        .medicare-button {
            display: inline-block;
            padding: 12px 24px;
            background-color: #28a745;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            font-weight: bold;
            border: none;
            cursor: pointer;
            position: relative;
            z-index: 1; /* Ensure button is clickable */
        }
        
        .medicare-button:hover {
            background-color: #218838;
        }
        
        /* Fix for the Need personalized guidance button */
        .guidance-button {
            display: inline-block;
            padding: 12px 24px;
            background-color: #6c3483; /* Adjusted for better visibility */
            color: white;
            text-decoration: none;
            border-radius: 4px;
            font-weight: bold;
            margin-top: 20px;
            border: none;
            cursor: pointer;
        }
        
        .guidance-button:hover {
            background-color: #5b2d7c;
        }
        
        /* Social media links */
        .social-links {
            display: flex;
            justify-content: center; /* Center-aligned as required */
            margin: 20px 0;
        }
        
        .social-links a {
            display: inline-block;
            margin: 0 10px;
            color: #0066cc;
            text-decoration: none;
        }
        
        .social-links a:hover {
            text-decoration: underline;
        }
        @media  (max-width: 425px) {
  .sssbut h3 {
    line-height: 26px;
    font-size: 18px;
}
.sssbut {
    padding: 15px 17px;
}
button.sssbuttt {
    padding: 12px 30px;
    font-size: 15px;
}
}
button.sssbuttt {
    padding: 10px 15px;
    font-size: 15px;
}
@media  (max-width: 320px) {
.sssbut h3 {
    line-height: 22px;
    font-size: 15px;
}
}
    </style>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
        $(document).ready(function() {
            // Progress steps interaction
            $('.step').click(function() {
                const stepIndex = $(this).index();
                $('.step').removeClass('active completed');                
                for (let i = 0; i < stepIndex; i++) {
                    $('.step').eq(i).addClass('completed');
                }                
                $(this).addClass('active');
            });
        });
    </script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
    const supportButton = document.getElementById('supportButton');
    const donationModal = document.getElementById('donationModal');
    const closeModal = document.getElementById('closeModal');
    const monthlyOption = document.getElementById('monthlyOption');
    const monthlyOptions = document.getElementById('monthlyOptions');
    const dropdownIndicator = monthlyOption.querySelector('.dropdown-indicator');
    if (supportButton) {
        supportButton.addEventListener('click', function() {
            donationModal.classList.add('active');
            document.body.style.overflow = 'hidden'; 
            });
    }
    if (closeModal) {
        closeModal.addEventListener('click', function() {
            donationModal.classList.remove('active');
            document.body.style.overflow = '';
        });
    }
    donationModal.addEventListener('click', function(e) {
        if (e.target === donationModal) {
            donationModal.classList.remove('active');
            document.body.style.overflow = '';
        }
    });
    if (monthlyOption && monthlyOptions) {
        monthlyOption.addEventListener('click', function(e) {
            e.preventDefault(); // Prevent navigation
            monthlyOptions.classList.toggle('active');
            dropdownIndicator.classList.toggle('active');
        });
    }
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && donationModal.classList.contains('active')) {
            donationModal.classList.remove('active');
            document.body.style.overflow = '';
        }
    });
    const focusableElements = donationModal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
    const firstFocusableElement = focusableElements[0];
    const lastFocusableElement = focusableElements[focusableElements.length - 1];
    
    donationModal.addEventListener('keydown', function(e) {
        if (e.key === 'Tab') {
            // Shift + Tab
            if (e.shiftKey) {
                if (document.activeElement === firstFocusableElement) {
                    lastFocusableElement.focus();
                    e.preventDefault();
                }
            } else {
                if (document.activeElement === lastFocusableElement) {
                    firstFocusableElement.focus();
                    e.preventDefault();
                }
            }
        }
    });
    supportButton.addEventListener('click', function() {
        setTimeout(function() {
            firstFocusableElement.focus();
        }, 100);
    });
    const modalOptions = document.querySelectorAll('.modal-option');
    modalOptions.forEach(option => {
        option.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-2px)';
        });
        
        option.addEventListener('mouseleave', function() {
            this.style.transform = '';
        });
    });
    const monthlyOptionLinks = document.querySelectorAll('.monthly-option');
    monthlyOptionLinks.forEach(link => {
        link.addEventListener('click', function() {
            setTimeout(function() {
                donationModal.classList.remove('active');
                document.body.style.overflow = '';
            }, 100);
        });
    });
});
    </script>
       <script>
   document.addEventListener("DOMContentLoaded", function () {
  const daySelect = document.getElementById('ss-calculator-day');
  for (let i = 1; i <= 31; i++) {
    const option = document.createElement('option');
    option.value = i;
    option.textContent = i;
    daySelect.appendChild(option);
  }
  const yearSelect = document.getElementById('ss-calculator-year');
  for (let i = 1955; i <= 1980; i++) {
    const option = document.createElement('option');
    option.value = i;
    option.textContent = i;
    yearSelect.appendChild(option);
  }
  const lifeExpectancySlider = document.getElementById('ss-calculator-life-expectancy');
  const lifeExpectancyValue = document.getElementById('ss-calculator-life-expectancy-value');
  
  if (lifeExpectancySlider && lifeExpectancyValue) {
    lifeExpectancySlider.addEventListener('input', function() {
      lifeExpectancyValue.textContent = this.value;
    });
  }
  const calculatorForm = document.getElementById('ss-calculator-form');
  if (calculatorForm) {
    calculatorForm.addEventListener('submit', function(e) {
      e.preventDefault();
      const month = document.getElementById('ss-calculator-month').value;
      const day = document.getElementById('ss-calculator-day').value;
      const year = document.getElementById('ss-calculator-year').value;
      const pia = document.getElementById('ss-calculator-pia').value;
      const lifeExpectancy = document.getElementById('ss-calculator-life-expectancy').value;
      document.getElementById('ss-calculator-month-error').textContent = '';
      document.getElementById('ss-calculator-day-error').textContent = '';
      document.getElementById('ss-calculator-year-error').textContent = '';
      document.getElementById('ss-calculator-pia-error').textContent = '';
      let isValid = true;
      
      if (!month) {
        document.getElementById('ss-calculator-month-error').textContent = 'Month is required';
        isValid = false;
      }
      if (!day) {
        document.getElementById('ss-calculator-day-error').textContent = 'Day is required';
        isValid = false;
      }      
      if (!year) {
        document.getElementById('ss-calculator-year-error').textContent = 'Year is required';
        isValid = false;
      }      
      if (!pia) {
        document.getElementById('ss-calculator-pia-error').textContent = 'PIA is required';
        isValid = false;
      } else if (isNaN(parseFloat(pia))) {
        document.getElementById('ss-calculator-pia-error').textContent = 'PIA must be a valid number';
        isValid = false;
      }      
      if (isValid) {
        document.getElementById('ss-calculator-loading-overlay').style.display = 'flex';
        setTimeout(function() {
          const formData = {
            birthDate: {
              month: parseInt(month),
              day: parseInt(day),
              year: parseInt(year)
            },
            pia: parseFloat(pia),
            lifeExpectancy: parseInt(lifeExpectancy)
          };
          
          const results = calculateBenefits(formData);
          updateResultsDisplay(results);
          document.getElementById('ss-calculator-form-container').style.display = 'none';
          document.getElementById('ss-calculator-results-container').style.display = 'block';
          document.getElementById('ss-calculator-loading-overlay').style.display = 'none';
        }, 1000);
      }
    });
  }
  const recalculateButton = document.getElementById('ss-calculator-recalculate-button');
  if (recalculateButton) {
    recalculateButton.addEventListener('click', function() {
      document.getElementById('ss-calculator-results-container').style.display = 'none';
      document.getElementById('ss-calculator-form-container').style.display = 'block';
    });
  }
  const tabButtons = document.querySelectorAll('.tab-button');
  tabButtons.forEach(button => {
    button.addEventListener('click', function() {
      tabButtons.forEach(btn => btn.classList.remove('active'));
      document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
      this.classList.add('active');
      const tabId = this.getAttribute('data-tab');
      document.getElementById('ss-calculator-' + tabId + '-tab').classList.add('active');
    });
  });
  function calculateBenefits(formData) {
    let fullRetirementAge = { years: 67, months: 0 };
    
    if (formData.birthDate.year <= 1937) {
      fullRetirementAge = { years: 65, months: 0 };
    } else if (formData.birthDate.year === 1938) {
      fullRetirementAge = { years: 65, months: 2 };
    } else if (formData.birthDate.year === 1939) {
      fullRetirementAge = { years: 65, months: 4 };
    } else if (formData.birthDate.year === 1940) {
      fullRetirementAge = { years: 65, months: 6 };
    } else if (formData.birthDate.year === 1941) {
      fullRetirementAge = { years: 65, months: 8 };
    } else if (formData.birthDate.year === 1942) {
      fullRetirementAge = { years: 65, months: 10 };
    } else if (formData.birthDate.year >= 1943 && formData.birthDate.year <= 1954) {
      fullRetirementAge = { years: 66, months: 0 };
    } else if (formData.birthDate.year === 1955) {
      fullRetirementAge = { years: 66, months: 2 };
    } else if (formData.birthDate.year === 1956) {
      fullRetirementAge = { years: 66, months: 4 };
    } else if (formData.birthDate.year === 1957) {
      fullRetirementAge = { years: 66, months: 6 };
    } else if (formData.birthDate.year === 1958) {
      fullRetirementAge = { years: 66, months: 8 };
    } else if (formData.birthDate.year === 1959) {
      fullRetirementAge = { years: 66, months: 10 };
    } else if (formData.birthDate.year >= 1960) {
      fullRetirementAge = { years: 67, months: 0 };
    }
    const fraInMonths = (fullRetirementAge.years * 12) + fullRetirementAge.months;
    const earlyRetirementMonths = fraInMonths - (62 * 12);
    let reductionFactor = 0;
    if (earlyRetirementMonths <= 36) {
      reductionFactor = earlyRetirementMonths * (5/9) * 0.01;
    } else {
      reductionFactor = (36 * (5/9) * 0.01) + ((earlyRetirementMonths - 36) * (5/12) * 0.01);
    }
    const delayedRetirementMonths = (70 * 12) - fraInMonths;
    const delayedRetirementYears = delayedRetirementMonths / 12;
    const increaseFactor = delayedRetirementYears * 0.08;
    const monthlyBenefitAt62 = formData.pia * (1 - reductionFactor);
    const monthlyBenefitAtFRA = formData.pia;
    const monthlyBenefitAt70 = formData.pia * (1 + increaseFactor);
    const monthlyBenefitChartData = [];
    for (let age = 62; age <= 70; age++) {
      let benefit;
      if (age < fullRetirementAge.years || (age === fullRetirementAge.years && 0 < fullRetirementAge.months)) {
        const monthsBeforeFRA = fraInMonths - (age * 12);
        let earlyReductionFactor = 0;
        if (monthsBeforeFRA <= 36) {
          earlyReductionFactor = monthsBeforeFRA * (5/9) * 0.01;
        } else {
          earlyReductionFactor = (36 * (5/9) * 0.01) + ((monthsBeforeFRA - 36) * (5/12) * 0.01);
        }
        benefit = formData.pia * (1 - earlyReductionFactor);
      } else if (age > fullRetirementAge.years || (age === fullRetirementAge.years && 0 === fullRetirementAge.months)) {
        const monthsAfterFRA = (age * 12) - fraInMonths;
        const delayedIncreaseFactor = (monthsAfterFRA / 12) * 0.08;
        benefit = formData.pia * (1 + delayedIncreaseFactor);
      } else {
        benefit = formData.pia;
      }
      monthlyBenefitChartData.push({
        age: age,
        benefit: benefit
      });
    }
    const breakEvenChartData = [];
    const maxAge = formData.lifeExpectancy;
    let total62 = 0;
    let total67 = 0;
    let total70 = 0;
    breakEvenChartData.push({
      age: 62,
      total62: 0,
      total67: 0,
      total70: 0
    });
    for (let age = 62; age <= maxAge; age++) {
      if (age >= 62) {
        total62 += monthlyBenefitAt62 * 12;
      }
      
      if (age >= fullRetirementAge.years) {
        total67 += monthlyBenefitAtFRA * 12;
      }
      
      if (age >= 70) {
        total70 += monthlyBenefitAt70 * 12;
      }
      
      breakEvenChartData.push({
        age: age,
        total62: total62,
        total67: total67,
        total70: total70
      });
    }
    const lifetimeIncomeData = {
      labels: Array.from({length: maxAge - 61}, (_, i) => i + 62),
      datasets: [
        {
          label: 'Claim at 62',
          data: breakEvenChartData.map(item => item.total62),
          borderColor: '#0066cc', // Blue
          backgroundColor: 'rgba(0, 102, 204, 0.1)',
          tension: 0.1
        },
        {
          label: `Claim at ${fullRetirementAge.years}`,
          data: breakEvenChartData.map(item => item.total67),
          borderColor: '#ffc107',
          backgroundColor: 'rgba(255, 193, 7, 0.1)',
          tension: 0.1
        },
        {
          label: 'Claim at 70',
          data: breakEvenChartData.map(item => item.total70),
          borderColor: '#28a745', // Green
          backgroundColor: 'rgba(40, 167, 69, 0.1)',
          tension: 0.1
        }
      ]
    };
    const breakEvenTableData = [];
    for (let age = 62; age <= 70; age++) {
      const monthlyBenefit = monthlyBenefitChartData.find(item => item.age === age).benefit;
      breakEvenTableData.push({
        age: age,
        monthly: monthlyBenefit,
        annual: monthlyBenefit * 12
      });
    }
    let optimalAge = 62;
    let maxLifetimeBenefit = total62;    
    if (total67 > maxLifetimeBenefit) {
      optimalAge = fullRetirementAge.years;
      maxLifetimeBenefit = total67;
    }    
    if (total70 > maxLifetimeBenefit) {
      optimalAge = 70;
      maxLifetimeBenefit = total70;
    }    
    return {
      birthDate: formData.birthDate,
      pia: formData.pia,
      fullRetirementAge: fullRetirementAge,
      optimalClaimingAge: optimalAge,
      monthlyBenefitAt62: monthlyBenefitAt62,
      monthlyBenefitAtFRA: monthlyBenefitAtFRA,
      monthlyBenefitAt70: monthlyBenefitAt70,
      lifeExpectancy: formData.lifeExpectancy,
      monthlyBenefitChartData: monthlyBenefitChartData,
      breakEvenChartData: breakEvenChartData,
      breakEvenTableData: breakEvenTableData,
      lifetimeIncomeData: lifetimeIncomeData
    };
  }
  function updateResultsDisplay(results) {
    function formatCurrency(value) {
      return '$' + value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
    }
    function formatDate(date) {
      const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
      return months[date.month - 1] + ' ' + date.day + ', ' + date.year;
    }
    document.getElementById('ss-calculator-optimal-age').textContent = results.optimalClaimingAge;
    document.getElementById('ss-calculator-optimal-age-2').textContent = results.optimalClaimingAge;
    document.getElementById('ss-calculator-optimal-benefit').textContent = formatCurrency(results.optimalClaimingAge === 62 ? results.monthlyBenefitAt62 : (results.optimalClaimingAge === 70 ? results.monthlyBenefitAt70 : results.monthlyBenefitAtFRA));
    document.getElementById('ss-calculator-life-expectancy-display').textContent = results.lifeExpectancy;
    document.getElementById('ss-calculator-fra-age').textContent = results.fullRetirementAge.years;    
    document.getElementById('ss-calculator-benefit-62-monthly').textContent = formatCurrency(results.monthlyBenefitAt62);
    document.getElementById('ss-calculator-benefit-62-annual').textContent = formatCurrency(results.monthlyBenefitAt62 * 12);    
    document.getElementById('ss-calculator-benefit-fra-monthly').textContent = formatCurrency(results.monthlyBenefitAtFRA);
    document.getElementById('ss-calculator-benefit-fra-annual').textContent = formatCurrency(results.monthlyBenefitAtFRA * 12);    
    document.getElementById('ss-calculator-benefit-70-monthly').textContent = formatCurrency(results.monthlyBenefitAt70);
    document.getElementById('ss-calculator-benefit-70-annual').textContent = formatCurrency(results.monthlyBenefitAt70 * 12);    
    document.getElementById('ss-calculator-input-dob').textContent = formatDate(results.birthDate);
    document.getElementById('ss-calculator-input-pia').textContent = formatCurrency(results.pia);
    document.getElementById('ss-calculator-input-fra').textContent = results.fullRetirementAge.years + ' years and ' + results.fullRetirementAge.months + ' months';
    document.getElementById('ss-calculator-input-life-expectancy').textContent = results.lifeExpectancy;
    const monthlyChart = document.getElementById('ss-calculator-monthly-chart');
    monthlyChart.innerHTML = '';    
    results.monthlyBenefitChartData.forEach(item => {
      const barContainer = document.createElement('div');
      barContainer.className = 'chart-bar-container';      
      const barWrapper = document.createElement('div');
      barWrapper.className = 'chart-bar-wrapper';      
      const maxBenefit = results.monthlyBenefitAt70;
      const barHeight = (item.benefit / maxBenefit) * 100;      
      const bar = document.createElement('div');
      bar.className = 'chart-bar';
      bar.style.height = barHeight + '%';      
      const barValue = document.createElement('div');
      barValue.className = 'chart-bar-value';
      barValue.textContent = formatCurrency(item.benefit);      
      bar.appendChild(barValue);
      barWrapper.appendChild(bar);      
      const barLabel = document.createElement('div');
      barLabel.className = 'chart-bar-label';
      barLabel.textContent = 'Age ' + item.age;      
      barContainer.appendChild(barWrapper);
      barContainer.appendChild(barLabel);      
      monthlyChart.appendChild(barContainer);
    });
    const lifetimeChartCanvas = document.getElementById('ss-calculator-lifetime-chart');
    if (lifetimeChartCanvas) {
      if (window.lifetimeChart) {
        window.lifetimeChart.destroy();
      }
      window.lifetimeChart = new Chart(lifetimeChartCanvas, {
        type: 'line',
        data: results.lifetimeIncomeData,
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            title: {
              display: true,
              text: 'Lifetime Income by Claiming Age'
            },
            tooltip: {
              callbacks: {
                label: function(context) {
                  return context.dataset.label + ': ' + formatCurrency(context.raw);
                }
              }
            }
          },
          scales: {
            y: {
              beginAtZero: true,
              ticks: {
                callback: function(value) {
                  return formatCurrency(value);
                }
              },
              title: {
                display: true,
                text: 'Total Benefits'
              }
            },
            x: {
              title: {
                display: true,
                text: 'Age'
              }
            }
          }
        }
      });
    }
    const tableBody = document.getElementById('ss-calculator-benefit-table-body');
    tableBody.innerHTML = '';    
    results.breakEvenTableData.forEach(row => {
      const percentOfFull = (row.monthly / results.monthlyBenefitAtFRA) * 100;      
      const tr = document.createElement('tr');      
      const tdAge = document.createElement('td');
      tdAge.textContent = `Age ${row.age}`;      
      const tdMonthly = document.createElement('td');
      tdMonthly.textContent = formatCurrency(row.monthly);      
      const tdAnnual = document.createElement('td');
      tdAnnual.textContent = formatCurrency(row.annual);      
      const tdPercent = document.createElement('td');
      tdPercent.textContent = `${percentOfFull.toFixed(0)}%`;      
      tr.appendChild(tdAge);
      tr.appendChild(tdMonthly);
      tr.appendChild(tdAnnual);
      tr.appendChild(tdPercent);
      
      tableBody.appendChild(tr);
    });
  }
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Get elements
    const supportButton = document.getElementById('supportButton');
    const donationModal = document.getElementById('donationModal');
    const closeModal = document.getElementById('closeModal');
    const monthlyOption = document.getElementById('monthlyOption');
    const monthlyOptions = document.getElementById('monthlyOptions');
    const dropdownIndicator = monthlyOption.querySelector('.dropdown-indicator');
    
    // Open modal when support button is clicked
    if (supportButton) {
        supportButton.addEventListener('click', function() {
            donationModal.classList.add('active');
            document.body.style.overflow = 'hidden'; // Prevent scrolling when modal is open
        });
    }
    
    // Close modal when close button is clicked
    if (closeModal) {
        closeModal.addEventListener('click', function() {
            donationModal.classList.remove('active');
            document.body.style.overflow = ''; // Restore scrolling
        });
    }
    
    // Close modal when clicking outside the modal container
    donationModal.addEventListener('click', function(e) {
        if (e.target === donationModal) {
            donationModal.classList.remove('active');
            document.body.style.overflow = ''; // Restore scrolling
        }
    });
    
    // Toggle monthly options when monthly option is clicked
    if (monthlyOption && monthlyOptions) {
        monthlyOption.addEventListener('click', function(e) {
            e.preventDefault(); // Prevent navigation
            monthlyOptions.classList.toggle('active');
            dropdownIndicator.classList.toggle('active');
        });
    }
    
    // Accessibility - keyboard navigation
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && donationModal.classList.contains('active')) {
            donationModal.classList.remove('active');
            document.body.style.overflow = ''; // Restore scrolling
        }
    });
    
    // Add focus trap within modal for accessibility
    const focusableElements = donationModal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
    const firstFocusableElement = focusableElements[0];
    const lastFocusableElement = focusableElements[focusableElements.length - 1];
    
    donationModal.addEventListener('keydown', function(e) {
        if (e.key === 'Tab') {
            // Shift + Tab
            if (e.shiftKey) {
                if (document.activeElement === firstFocusableElement) {
                    lastFocusableElement.focus();
                    e.preventDefault();
                }
            // Tab
            } else {
                if (document.activeElement === lastFocusableElement) {
                    firstFocusableElement.focus();
                    e.preventDefault();
                }
            }
        }
    });
    
    // Set focus to first focusable element when modal opens
    supportButton.addEventListener('click', function() {
        setTimeout(function() {
            firstFocusableElement.focus();
        }, 100);
    });
    
    // Animation for modal options
    const modalOptions = document.querySelectorAll('.modal-option');
    modalOptions.forEach(option => {
        option.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-2px)';
        });
        
        option.addEventListener('mouseleave', function() {
            this.style.transform = '';
        });
    });
    
    // Handle monthly option clicks
    const monthlyOptionLinks = document.querySelectorAll('.monthly-option');
    monthlyOptionLinks.forEach(link => {
        link.addEventListener('click', function() {
            // Add a small delay before navigation for better UX
            setTimeout(function() {
                donationModal.classList.remove('active');
                document.body.style.overflow = ''; // Restore scrolling
            }, 100);
        });
    });
});

</script>