/* Premium mobile polish (loaded last).
   Tightens the section rhythm — desktop 80-96px vertical padding is loose on a
   phone — and steps display type down for a denser, more premium feel.
   Only <=767px; desktop is untouched. */

@media (max-width: 767px) {

  /* --- clear the fixed 56px nav bar on the first section --- */
  .af-canvas > .s-hero { scroll-margin-top: 64px; }

  /* --- tighter section rhythm --- */
  .s-problem,
  .s-solution,
  .s-impact,
  .s-markets,
  .s-how-it-works,
  .s-rio {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .s-pillars { padding: 56px 20px; }
  .s-arrowpad { padding-top: 52px; }
  .s-hero { padding-top: 92px; padding-bottom: 52px; }

  /* --- premium display type: smaller, tighter line-height --- */
  .s-hero h1 { font-size: 30px; line-height: 1.16; letter-spacing: -0.01em; }
  .s-hero .hero-sub,
  .s-hero p { font-size: 15px; }

  .s-problem h2,
  .s-solution h2,
  .s-impact h2,
  .s-markets h2,
  .s-how-it-works h2,
  .s-faq h2,
  .s-cta h2,
  .s-pillars h2,
  .s-arrowpad h2,
  .s-rio h2 {
    font-size: 23px;
    line-height: 1.22;
  }

  /* oversized stat numbers step down for density */
  .s-markets .mk-stat { font-size: 32px; }
  .s-impact .imp-num { font-size: 26px; }

}