/* WealthMetre — seo-page.css
   Styles for programmatic city x product SEO pages */

.sp-hero { padding: 48px 0 40px; background: linear-gradient(135deg, #f0f4ff 0%, #f8faff 100%); }
.sp-breadcrumb { font-size: 12.5px; color: #6b7280; margin-bottom: 20px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sp-breadcrumb a { color: #1e3a8a; text-decoration: none; }
.sp-breadcrumb a:hover { text-decoration: underline; }
.sp-breadcrumb span { color: #9ca3af; }
.sp-hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
.sp-badge { display: inline-flex; align-items: center; gap: 6px; background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; padding: 5px 14px; border-radius: 99px; font-size: 12.5px; font-weight: 600; margin-bottom: 14px; }
.sp-h1 { font-size: clamp(28px, 3.5vw, 42px); font-weight: 800; color: #1a1a2e; line-height: 1.15; margin-bottom: 12px; }
.sp-tagline { font-size: 16px; font-weight: 600; color: #1e3a8a; margin-bottom: 10px; }
.sp-desc { font-size: 15px; color: #4b5563; line-height: 1.7; margin-bottom: 20px; }
.sp-rate-strip { display: flex; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.sp-rate { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 16px; }
.sp-rate-label { font-size: 11px; color: #6b7280; display: block; margin-bottom: 3px; }
.sp-rate-val { font-size: 16px; font-weight: 800; color: #1e3a8a; }
.sp-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sp-disclaimer { font-size: 11px; color: #9ca3af; }

/* Trust card */
.sp-trust-card { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 16px; padding: 24px; }
.sp-tc-head { font-size: 14px; color: #374151; line-height: 1.6; margin-bottom: 20px; display: flex; align-items: flex-start; gap: 8px; }
.sp-tc-head i { color: #1e3a8a; font-size: 18px; flex-shrink: 0; margin-top: 2px; }
.sp-tc-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 20px; }
.sp-tc-stat { text-align: center; background: #f8faff; border-radius: 10px; padding: 12px 8px; }
.sp-tc-num { font-size: 22px; font-weight: 800; color: #1e3a8a; }
.sp-tc-lbl { font-size: 11px; color: #6b7280; margin-top: 3px; }

/* Sections */
.sp-section { padding: 56px 0; }
.sp-section-alt { background: #f8faff; }

/* Eligibility */
.sp-elig-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px; }
.sp-elig-item { display: flex; align-items: flex-start; gap: 10px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px; }
.sp-elig-item i { color: #16a34a; font-size: 16px; flex-shrink: 0; margin-top: 2px; }
.sp-elig-item span { font-size: 14px; color: #374151; line-height: 1.55; }
.sp-city-note { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 14px 18px; display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: #1e40af; line-height: 1.6; }
.sp-city-note i { flex-shrink: 0; margin-top: 2px; }

/* Why grid */
.sp-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.sp-why-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 24px; }
.sp-why-icon { font-size: 22px; color: #1e3a8a; margin-bottom: 12px; display: block; }
.sp-why-card h3 { font-size: 15px; font-weight: 700; color: #1a1a2e; margin-bottom: 8px; }
.sp-why-card p { font-size: 13.5px; color: #4b5563; line-height: 1.65; }

/* Internal links */
.sp-link-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-city-link { display: flex; align-items: center; gap: 7px; padding: 8px 16px; background: #fff; border: 1.5px solid #e5e7eb; border-radius: 99px; font-size: 13px; color: #1e3a8a; font-weight: 500; text-decoration: none; transition: all .15s; }
.sp-city-link:hover { background: #eff6ff; border-color: #93c5fd; }
.sp-city-link i { font-size: 13px; }

/* CTA section */
.sp-cta-section { background: linear-gradient(135deg, #1e3a8a, #1e4db7); padding: 56px 0; text-align: center; }
.sp-cta-inner h2 { font-size: 28px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.sp-cta-inner p { font-size: 15px; color: rgba(255,255,255,.8); margin-bottom: 24px; }
.sp-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn-white { background: #fff; color: #1e3a8a; border: none; padding: 12px 24px; border-radius: 50px; font-size: 14px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }

@media (max-width: 768px) {
  .sp-hero-grid { grid-template-columns: 1fr; }
  .sp-trust-card { display: none; }
  .sp-elig-grid { grid-template-columns: 1fr; }
  .sp-why-grid { grid-template-columns: 1fr; }
}