/* ============================================
   KareShift — Switch Page Styles (switch.html)
   ============================================ */

/* ── Hero ── */
.switch-hero-content {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.switch-hero-content .hero-actions {
  justify-content: center;
}

/* ── Savings ── */
.switch-savings {
  margin-top: 24px;
}

/* ── Fit Assessment ── */
.fit-grid {
  max-width: 800px;
  margin: 0 auto;
}

.fit-card-good {
  border-color: var(--green);
}

.fit-card-good h3 {
  color: var(--green);
  margin-bottom: 16px;
}

.fit-card-neutral h3 {
  color: var(--text-muted);
  margin-bottom: 16px;
}

.fit-list {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 2;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .switch-hero-content {
    max-width: 100%;
  }

  .fit-list {
    line-height: 1.8;
  }
}

@media (max-width: 480px) {
  .fit-card-good h3,
  .fit-card-neutral h3 {
    margin-bottom: 12px;
  }

  .fit-list {
    font-size: 0.813rem;
    line-height: 1.7;
  }
}