@layer components {
  /**
   * Optional hooks for pages that prefer classnames over composing primitives.
   * Use inside .mobile-app-shell (narrow viewports).
   */
  .mobile-app-shell .mp-card {
    @apply rounded-2xl border border-border/80 bg-card p-3 shadow-sm ring-1 ring-black/[0.04];
  }

  .mobile-app-shell .mp-section-title {
    @apply mb-2 text-sm font-bold text-foreground;
  }
}