/* ============================================================
   RESPONSIVE.CSS
   The single global mobile breakpoint (max-width: 640px) that
   makes cross-cutting layout adjustments spanning multiple
   unrelated components (holding rows, the compare bar, dashboard
   links, etc). Component-specific responsive tweaks that only
   affect ONE component (e.g. the hero, stage cards, pricing tiers)
   are intentionally left inside that component's own file instead
   of here - see the Phase 1 summary for why.
   ============================================================ */
  @media (max-width: 640px) {
    .holding-row { grid-template-columns: 1fr auto; row-gap: 8px; }
    .price-hint { grid-column: 1 / -1; }
    .return-badge { grid-column: 1 / -1; width: fit-content; }
    .firm-head { flex-direction: column; }
    .firm-aum { text-align: left; }

    /* ---------- MOBILE OPTIMIZATION ---------- */
    .scroll-hint { display: block; }
    .source-link-small { padding: 6px 0; display: inline-block; }
    .compare-bar { padding: 14px 16px; }
    .compare-bar-actions { width: 100%; }
    .compare-btn { flex: 1; text-align: center; }
    .dashboard-link, .hero-cta, .firm-page-link, .seo-page-link {
      padding: 10px 16px;
      display: inline-block;
    }
  .compare-check { padding: 6px 0; }
  }