.container{max-width:1400px;}
.hero-features{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:2.5rem;}

.hero-feature-item:hover{background:rgba(255,255,255,.15);transform:translateY(-4px);}
.hero-feature-item i{font-size:2rem;color:var(--accent-gold);margin-bottom:12px;}
.hero-feature-item h4{color:var(--white);font-size:1rem;margin-bottom:4px;}
.hero-feature-item p{color:rgba(255,255,255,.7);font-size:.875rem;margin:0;}
.hero-features a.hero-feature-item{transition:all .3s ease;}
.hero-features a.hero-feature-item:hover{transform:translateY(-4px);background:rgba(255,255,255,.15);}
.hero-features a.hero-feature-item:hover h4{color:#8a6d1c;}
@media(max-width:992px){.hero-features{grid-template-columns:repeat(2,1fr);}}
@media(max-width:768px){.hero-features{grid-template-columns: repeat(2, 1fr);gap:16px;}}
.process-steps-grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:2rem;}
@media(max-width:900px){.process-steps-grid{grid-template-columns: repeat(2, 1fr);}}

  .process-step{display:flex;gap:1rem;padding:1.25rem 0;border-bottom:1px solid var(--border-gray);align-items:flex-start;}
  .process-step:last-child{border-bottom:none;}
.step-num{min-width:36px;height:36px;background:var(--primary-blue);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;flex-shrink:0;}
.step-body h4{margin:0 0 .3rem;color:var(--primary-navy);font-size:.95rem;}
.step-body p{margin:0;font-size:.875rem;color:var(--text-medium);line-height:1.6;}
.data-table{width:100%;border-collapse:collapse;font-size:.9rem;}
.data-table th,.data-table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--border-gray);}
.data-table th{background:var(--primary-navy);color:#fff;font-weight:600;}
.data-table tr:hover td{background:var(--light-gray);}

.callout-box p{margin:0;font-size:.9rem;line-height:1.7;}

.comparison-card.recommended{border-color:var(--primary-blue);position:relative;}
.comparison-card.recommended::before{content:'RECOMMENDED';position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--primary-blue);color:var(--white);padding:4px 16px;border-radius:4px;font-size:.75rem;font-weight:600;}

/* ── Text visibility on dark backgrounds ──────────────────────────────────
   Global h1-h4 rule (color: var(--primary-navy)) overrides CSS inheritance
   inside .hero and .cta-section. These rules restore correct contrast.
   ──────────────────────────────────────────────────────────────────────── */

/* HERO: all headings and body text → white on dark navy gradient */
.hero h1,
.hero h2,
.hero h3,
.hero h4 {
  color: var(--white);
}
.hero p,
.hero-subtitle {
  color: rgba(255,255,255,0.88);
  font-size: 1.125rem;
  line-height: 1.7;
  max-width: 780px;
  margin-bottom: 0;
}

/* HERO BADGE: pill above the h1 */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--accent-gold);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.hero-badge i {
  color: var(--accent-gold);
  font-size: 0.875rem;
}

/* CTA SECTION: h2 and p on dark gradient background */
.cta-section h2,
.cta-content h2 {
  color: var(--white);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 1rem;
}
.cta-section p,
.cta-content p {
  color: rgba(255,255,255,0.82);
  font-size: 1.0625rem;
  line-height: 1.65;
  margin-bottom: 0;
  max-width: 640px;
}

/* SECTION SUBTITLE: light intro paragraphs under section-title */
.section-subtitle {
  color: var(--text-medium);
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 820px;
  margin: 0 auto 2.5rem;
  text-align: center;
}