* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #fff;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }

.header {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers children horizontally */
  text-align: center;
}
      .header h1 {
       font-size: 2.5rem;
       font-weight: 300;
       color: #6ac5fe;
       margin-bottom: 1rem;
       text-align: center; /* Add this line */
     }



        .header .subtitle {
            font-size: 1.1rem;
            color: #ffffff;
            max-width: 600px;
            margin: 0 auto 1.5rem;
        }

        .form-section {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 2rem;
            margin-bottom: 2rem;
        }

        .form-section h2 {
            font-size: 1.5rem;
            font-weight: 500;
            color: #666666;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
        }

        .form-group {
            display: flex;
            flex-direction: column;
        }

        .form-group label {
            font-weight: 500;
            color: #495057;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
        }

        .form-group input,
        .form-group select {
            padding: 0.75rem;
            border: 1px solid #ced4da;
            border-radius: 4px;
            font-size: 1rem;
            background-color: white;
            transition: border-color 0.15s ease-in-out;
        }

        .form-group input:focus,
        .form-group select:focus {
            outline: none;
            border-color: #666666;
            box-shadow: 0 0 0 2px rgba(128,0,32,0.25);
        }

        .form-group .help-text {
            font-size: 0.8rem;
            color: #6c757d;
            margin-top: 0.25rem;
        }

        .results-section {
            margin-top: 2rem;
        }

        .current-situation {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .metric-card {
            background: white;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 1.5rem;
            text-align: center;
        }

        .metric-card .value {
            font-size: 2rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .metric-card .label {
            font-size: 0.9rem;
            color: #6c757d;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .metric-card.loss .value { color: #dc3545; }
        .metric-card.gain .value { color: #28a745; }
        .metric-card.current .value { color: #007bff; }
        .metric-card.opportunity .value { color: #666666; }

        .stack-results {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .stack-card {
            background: white;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 1.5rem;
            position: relative;
        }

        .stack-card.rank-1 { border-left: 4px solid #28a745; }
        .stack-card.rank-2 { border-left: 4px solid #666666; }
        .stack-card.rank-3 { border-left: 4px solid #fd7e14; }

        .stack-header {
            display: flex;
            justify-content: between;
            align-items: flex-start;
            margin-bottom: 1rem;
        }

        .stack-title {
            flex: 1;
        }

        .stack-title h3 {
            font-size: 1.5rem;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 0.25rem;
        }

        .stack-title p {
            color: #6c757d;
            font-size: 0.95rem;
        }

        .stack-roi {
            text-align: right;
            min-width: 120px;
        }

        .stack-roi .value {
            font-size: 2rem;
            font-weight: 700;
            color: #28a745;
        }

        .stack-roi .label {
            font-size: 0.8rem;
            color: #6c757d;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .stack-metrics {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .stack-metric {
            text-align: center;
            padding: 0.75rem;
            background: #f8f9fa;
            border-radius: 4px;
        }

        .stack-metric .value {
            font-weight: 600;
            color: #2c3e50;
        }

        .stack-metric .label {
            font-size: 0.8rem;
            color: #6c757d;
            margin-top: 0.25rem;
        }

        .ai-features {
            margin-top: 1rem;
            padding: 1rem;
            background: #666666;
            border-radius: 6px;
            color: white;
        }

        .ai-features h4 {
            margin-bottom: 0.75rem;
            font-size: 1rem;
        }

        .ai-features .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 0.5rem;
        }

        .ai-features .feature {
            background: rgba(255, 255, 255, 0.1);
            padding: 0.5rem 0.75rem;
            border-radius: 4px;
            font-size: 0.85rem;
        }


     .methodology-badge {
        display: inline-block;
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
        color: #495057;
        text-align: center; /* Add this line */
        margin: 0 auto; /* Add this line */
	}
     .methodology-badge2 {
        display: inline-block;
        background: #cccccc;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
        color: #0000FF;
        text-align: center; /* Add this line */
        margin: 0 auto; /* Add this line */
     }			     	
        .methodology {
            margin-top: 3rem;
            padding: 2rem;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #dee2e6;
        }

        .methodology h2 {
            font-size: 1.5rem;
            font-weight: 500;
            color: #666666;
            text-align: center;
            margin-bottom: 2rem;
        }

        .methodology-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .methodology-item h3 {
            font-size: 1.1rem;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 1rem;
        }

        .methodology-item ul {
            list-style: none;
            padding-left: 0;
        }

        .methodology-item li {
            padding: 0.25rem 0;
            font-size: 0.9rem;
            color: #495057;
     }

	  .methodolgy-badge a:link,
          a:visited {
     color: #0000FF; /* Your brand color */
     text-decoration: none;
     }			     

        .methodology-item li::before {
            content: "•";
            color: #666666;
            font-weight: bold;
            display: inline-block;
            width: 1em;
            margin-left: -1em;
        }

        .disclaimer {
            margin-top: 2rem;
            padding: 1rem;
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 4px;
            font-size: 0.9rem;
            color: #856404;
        }

        @media (max-width: 768px) {
            .container { padding: 1rem; }
            .header h1 { font-size: 2rem; }
            .form-grid { grid-template-columns: 1fr; }
            .current-situation { grid-template-columns: 1fr 1fr; }
            .stack-header { flex-direction: column; align-items: flex-start; }
            .stack-roi { text-align: left; margin-top: 1rem; }
        }

        .loading {
            text-align: center;
            padding: 3rem;
            color: #6c757d;
        }

			     .hidden { display: none; }
			     /* Prevent visited links from changing color */
a:visited {
  color: inherit;
}

/* Or if you want to be more specific and maintain the original link color */

    
        /* Charts (stacked rows; inherit container width) */
        .charts-section { margin-top: 2rem; }
        .charts-title {
            font-size: 1.5rem;
            font-weight: 500;
            color: #666666;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
        }
        .charts-subtitle { color: #6c757d; font-size: 0.95rem; margin-bottom: 1rem; }
        .charts-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0 12px;
        }
        .charts-table td { padding: 0; }
        .chart-card {
            background: #ffffff;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 1rem;
            width: 100%;
        }
        .chart-card h3 {
            font-size: 1rem;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 0.75rem;
        }
        /* Responsive canvas heights for readability on long pages */
        #roiOverTimeChart, #investmentsReturnsChart, #netValueChart {
            width: 100%;
            max-height: 420px;
        }
        @media (max-width: 992px) {
            #roiOverTimeChart, #investmentsReturnsChart, #netValueChart { max-height: 360px; }
        }
        @media (max-width: 600px) {
            #roiOverTimeChart, #investmentsReturnsChart, #netValueChart { max-height: 300px; }
        }

	.header h1 {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
	}
	  @media (max-width: 600px) {
            #roiOverTimeChart, #investmentsReturnsChart, #netValueChart { max-height: 300px; }
        }