/* =====================================
   MOBILE ENTRY FILE
   Purpose:
   - Global mobile foundation only
   - No SEO overrides
   - No fixed insight heights
===================================== */

@media (max-width: 768px) {

/* =========================
   1. MOBILE FOUNDATION
========================= */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  -webkit-font-smoothing: antialiased;
}

/* =========================
   2. LAYOUT CONTAINER
========================= */

.container {
  width: 100%;
  max-width: 100%;
  padding: 0 16px;
  margin: 0 auto;
}

/* =========================
   3. MEDIA SAFETY
========================= */

img {
  max-width: 100%;
  height: auto;
}

/* =========================
   4. SMALL PHONE TUNING
========================= */

@media (max-width: 390px) {
  .container {
    padding: 0 14px;
  }

  nav#siteNav {
    padding: 11px 12px;
  }

  .cc-hero {
    min-height: auto;
  }

  .cc-hero-right,
  .cc-hero-three-wrap {
    height: 250px;
    min-height: 250px;
  }

  #ccHeroSphere {
    width: min(285px, 94vw);
  }

  .cc-three-label {
    font-size: 18px;
  }

  .cc-three-label i {
    font-size: 18px;
  }

  .cc-hero-left {
    padding: 18px 12px 28px;
  }

  .cc-hero-left h1 {
    font-size: 36px;
  }

  .cc-hero-sub {
    font-size: 14.25px;
  }

  .cc-insights {
    margin-top: -14px;
  }

  .cc-insight-card {
    width: calc(100% - 40px);
  }

  .section-header h2 {
    font-size: 21px;
  }

  .wallet-review-summary-value {
    font-size: 27px;
  }
}

}