:root {
  --bg:#ffffff;
  --text:#0f172a;       /* slate-900 */
  --muted:#475569;      /* slate-600 */
  --border:#e2e8f0;     /* slate-200 */
  --card:#ffffff;
  --accent: #0f766e;   /* teal-700 vibe */
  --accent-2: #115e59; /* teal-800 */
  --soft:#f8fafc;       /* slate-50 */
  --radius:18px;
  --max:1120px;
}

/* -------------------------------------------------------------------------- */
/* Tailwind CDN compatibility helpers
   The site uses Tailwind via CDN (no custom config). Classes like `bg-primary`,
   `text-dark`, `from-primary`, `to-secondary`, etc. are NOT provided by default
   Tailwind, so some sections can render as white text on a white background.
   These helpers map those “semantic” utility classes to the CSS variables
   defined above, keeping the HTML unchanged.
*/

/* Colors (support Tailwind-style opacity helpers via --tw-bg-opacity) */
.bg-primary { background-color: rgba(14, 165, 164, var(--tw-bg-opacity, 1)) !important; }
.bg-secondary { background-color: rgba(11, 118, 111, var(--tw-bg-opacity, 1)) !important; }
.text-primary { color: var(--accent) !important; }
.text-secondary { color: var(--accent-2) !important; }

/* Tailwind-like helpers used in the HTML */
.bg-opacity-10 { --tw-bg-opacity: 0.10; }
.bg-opacity-15 { --tw-bg-opacity: 0.15; }
.bg-opacity-20 { --tw-bg-opacity: 0.20; }
.text-dark { color: var(--text) !important; }
.border-primary { border-color: var(--accent) !important; }
.border-secondary { border-color: var(--accent-2) !important; }

/* Gradient endpoints (Tailwind’s gradient utilities rely on CSS variables) */
.from-primary {
  --tw-gradient-from: var(--accent) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(14,165,164,0)) !important;
}
.to-secondary { --tw-gradient-to: var(--accent-2) !important; }

/* If the browser blocks the CDN stylesheet, keep key layout readable */
.text-white { color: #ffffff !important; }

/* Prevent “invisible” link/button text on custom semantic classes */
.bg-primary .text-white,
.bg-secondary .text-white { color: #ffffff !important; }

/* -------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

/* Prevent sections from hiding under sticky header */
section[id] {
  scroll-margin-top: 80px;
}

body {
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;  /* Increased from 1.6 for calmer reading */
  font-weight: 400;
}

/* Make media responsive and prevent horizontal overflow */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

.hero {
  text-align: center;
  padding: 4rem 1rem 3rem;
}

.hero h1 {
  font-size: 3.25rem;  /* Increased from 3rem for more presence */
  font-weight: 800;     /* Increased from 700 for stronger hierarchy */
  line-height: 1.15;    /* Tighter for headlines */
  margin-bottom: 1.5rem;
  /* --dark isn't defined; use primary text color for reliability */
  color: var(--text);
}

.hero .sub {
  font-size: 1.25rem;
  max-width: 700px;
  margin: 0 auto 2.5rem;
  color: var(--muted);
}

.hero-kicker {
  font-size: 1rem;
  color: var(--muted);
  max-width: 760px;
  margin: -1.75rem auto 2rem;
}

.badgeRow {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.badge {
  background: rgba(0, 102, 255, 0.1);
  color: #0066FF;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.performance-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 3rem;  /* MORE SPACE BETWEEN METRICS */
  max-width: 800px;
  margin: 0 auto 3rem;
}

.stat-card {
  background: white;
  border-radius: 0.75rem;
  padding: 3rem 2rem;  /* MORE WHITESPACE */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.stat-value {
  font-size: 3.5rem;  /* EVEN LARGER - DOMINATES PAGE */  /* INCREASED FOR VISUAL DOMINANCE */
  font-weight: 800;  /* BOLDER */
  line-height: 1;
  margin-bottom: 0.5rem;  /* MORE SPACE */
}

.stat-comparison {
  font-size: 1.25rem;  /* LARGER FOR VISIBILITY */  /* LARGER FOR VISIBILITY */
  color: #10B981;
  font-weight: 600;  /* BOLDER */
  font-variant-numeric: tabular-nums;
}

.stat-note {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.5rem;
}

.performance-summary {
  max-width: 600px;
  margin: 0 auto 3rem;
  background: rgba(0, 102, 255, 0.05);
  padding: 1.5rem;
  border-radius: 0.75rem;
}

.performance-summary ul {
  text-align: left;
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.performance-summary li {
  margin-bottom: 0.5rem;
}

.disclaimer {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 1rem;
}

.heroActions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

/* Hero CTA Buttons - Enhanced for serious financial action */
.heroActions .btn {
  padding: 14px 32px;
  font-size: 1.05rem;
  font-weight: 600;
  border-radius: 8px;  /* Reduced from 10px for more serious feel */
  border: 2px solid var(--border);
  background: white;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;  /* Faster, more deliberate */
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  display: inline-block;
}

.heroActions .btn:hover {
  background: var(--soft);  /* Subtle background change */
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);  /* Subtle shadow increase */
}

.heroActions .btnPrimary {
  background: var(--accent);  /* Solid color, no gradient */
  color: white;
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(14, 165, 164, 0.2);  /* Subtle shadow */
}

.heroActions .btnPrimary:hover {
  background: var(--accent-2);  /* Darker on hover, no scale */
  border-color: var(--accent-2);
  box-shadow: 0 4px 12px rgba(14, 165, 164, 0.25);
  color: white;
  opacity: 0.95;  /* Subtle opacity change */
}

.trust {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  color: var(--muted);
  font-size: 0.875rem;
  flex-wrap: wrap;
}
.hero {
  text-align: center;
  padding: 4rem 1rem 3rem;
}

.hero h1 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  /* --dark isn't defined in :root; keep hero text readable */
  color: var(--text);
}

.hero .sub {
  font-size: 1.25rem;
  max-width: 700px;
  margin: 0 auto 2.5rem;
  color: var(--muted);
}

.badgeRow {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.badge {
  background: rgba(0, 102, 255, 0.1);
  color: #0066FF;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.performance-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 3rem;  /* MORE SPACE BETWEEN METRICS */
  max-width: 800px;
  margin: 0 auto 3rem;
}

.stat-card {
  background: white;
  border-radius: 0.75rem;
  padding: 3rem 2rem;  /* MORE WHITESPACE */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.stat-value {
  font-size: 3.5rem;  /* EVEN LARGER - DOMINATES PAGE */  /* INCREASED FOR VISUAL DOMINANCE */
  font-weight: 800;  /* BOLDER */
  line-height: 1;
  margin-bottom: 0.5rem;  /* MORE SPACE */
}

.stat-comparison {
  font-size: 1.25rem;  /* LARGER FOR VISIBILITY */  /* LARGER FOR VISIBILITY */
  color: #10B981;
  font-weight: 600;  /* BOLDER */
}

.stat-note {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.5rem;
}

.performance-summary {
  max-width: 600px;
  margin: 0 auto 3rem;
  background: rgba(0, 102, 255, 0.05);
  padding: 1.5rem;
  border-radius: 0.75rem;
}

.performance-summary ul {
  text-align: left;
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.performance-summary li {
  margin-bottom: 0.5rem;
}

.disclaimer {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 1rem;
}

.heroActions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

/* Guard against horizontal scroll from long words/URLs */
body {
  overflow-x: hidden;
}

.trust {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  color: var(--muted);
  font-size: 0.875rem;
  flex-wrap: wrap;
}
/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #007FFF;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #0066CC;
}
/* Animation classes */
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Prose styling for content sections */
.prose {
    line-height: 1.75;
}

.prose p {
    margin-bottom: 1.25em;
}

.prose ul {
    margin-bottom: 1.25em;
    padding-left: 1.5em;
    list-style-type: none;
}

.prose li {
    margin-bottom: 0.5em;
    position: relative;
}
/* Button hover effects */
.btn-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Card hover effects */
.card-hover:hover {
    transform: translateY(-4px);
    transition: all 0.3s ease;
}

/* Compare cards: less 'cheap', more product */
.compare-card{
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.06);
  border-radius: 14px;
}
.compare-card h3{
  font-weight: 700;
}
.compare-card ul{
  margin-top: 0.25rem;
}
.compare-card li{
  line-height: 1.35;
}

/* De-emphasize aggressive red/green for a more premium look */
.compare-card svg{
  stroke: #64748b !important;
}

/* Info pill */
.info-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  margin-left:8px;
  border-radius:999px;
  border:1px solid rgba(15,118,110,0.35);
  background:rgba(15,118,110,0.08);
  color:var(--primary);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
.info-pill:hover{ background:rgba(15,118,110,0.12); }

/* Modal */
.modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
}
.modal.is-open{ display:block; }
.modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,0.45);
}
.modal__panel{
  position:relative;
  max-width:560px;
  margin:8vh auto 0;
  background:#fff;
  border-radius:16px;
  box-shadow:0 30px 80px rgba(2,6,23,0.25);
  padding:0;
  overflow:hidden;
}
.modal__header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 18px;
  border-bottom:1px solid rgba(15,23,42,0.08);
}
.modal__header h3{ font-size:16px; margin:0; }
.modal__close{
  border:none;
  background:transparent;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  color:#475569;
}
.modal__body{ padding:16px 18px; color:#0f172a; }
.modal__body p{ margin:0 0 10px; }
.modal__footer{
  padding:14px 18px;
  border-top:1px solid rgba(15,23,42,0.08);
  display:flex;
  justify-content:flex-end;
}
.modal .btn{
  padding:10px 14px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,0.12);
  background:#fff;
}

@media (max-width:640px){
  .modal__panel{ margin:10vh 14px 0; }
}

/* Tone down aggressive red/green icon colors inside compare cards */
.compare-card svg{
  stroke: #64748b !important;
}

/* --- Info pill + modal --- */
.info-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 8px;
  border-radius: 999px;
  border: 1px solid rgba(15, 118, 110, 0.35);
  background: rgba(15, 118, 110, 0.08);
  color: var(--primary);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.info-pill:hover{
  background: rgba(15, 118, 110, 0.12);
}

.modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 9999;
}
.modal.is-open{ display: flex; }
.modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.55);
}
.modal__panel{
  position: relative;
  width: 100%;
  max-width: 560px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(2, 6, 23, 0.28);
  border: 1px solid rgba(15, 23, 42, 0.1);
  overflow: hidden;
}
.modal__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.modal__header h3{ font-size: 1.05rem; margin: 0; }
.modal__close{
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #0f172a;
}
.modal__body{
  padding: 16px 18px;
  color: #0f172a;
}
.modal__body p{ margin: 0 0 10px; }
.modal__footer{
  padding: 14px 18px 18px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

/* Mobile Optimizations - Critical for clarity on smaller screens */
@media (max-width: 640px) {
  .hero h1 {
    font-size: 2.25rem;  /* Smaller on mobile for better fit */
    line-height: 1.2;
    margin-bottom: 1.25rem;
  }
  
  .hero .sub {
    font-size: 1.1rem;  /* Slightly smaller */
    line-height: 1.6;
  }
  
  .heroActions {
    gap: 0.875rem;  /* Ensure CTAs aren't too tight */
  }
  
  .heroActions .btn {
    padding: 12px 24px;  /* Slightly smaller padding on mobile */
    font-size: 1rem;
  }
  
  /* Ensure logo isn't oversized on mobile */
  .logo {
    max-width: 68px;
    max-height: 68px;
  }
  
  /* Add more breathing room on mobile sections */
  section[class*="py-20"] {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  
  section[class*="py-24"] {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
}

/* Tablet optimizations */
@media (min-width: 641px) and (max-width: 1024px) {
  .hero h1 {
    font-size: 2.75rem;
  }
}

/* Typography Hierarchy Improvements */
h2 {
  margin-top: 3rem;  /* More space above than below */
  margin-bottom: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
}

h3 {
  font-weight: 600;  /* Lighter weight to avoid shouting */
  color: #334155;  /* Slightly muted color (slate-700) */
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}

/* Performance and explanation sections need better line-height */
.performance-summary,
.bg-gray-50 p,
.bg-white p {
  line-height: 1.7;  /* Calmer reading */
}