style(layout): tighter mobile bottom-nav buffer + muted trend-hint title + drop font-mono on progress

- P7: shrink the bottom-nav clearance from 5rem to 4rem on mobile (md:pb-0 unchanged) so content sits closer to the nav without overlap.
- P8: TrendHint title gets text-muted-foreground so it stops competing with chart titles after the T2 muted-foreground hierarchy fix.
- P9: drop font-mono from the onboarding "X%" progress label; tabular-nums alone is enough.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/charts/trend-hint.tsx

@@ -34,7 +34,9 @@ export function TrendHint({ count }: TrendHintProps) {
       variant="plain"
       size="compact"
       icon={<TrendingUp className="size-4" />}
-      title={t("trendHints.title")}
+      title={
+        <span className="text-muted-foreground">{t("trendHints.title")}</span>
+      }
       description={description}
     />
   );

src/components/layout/auth-shell.tsx

@@ -126,7 +126,7 @@ export function AuthShell({ children }: { children: React.ReactNode }) {
           <TopBar />
           <main
             id="main-content"
-            className="flex-1 overflow-y-auto pb-[calc(5rem+env(safe-area-inset-bottom,0px))] md:pb-0"
+            className="flex-1 overflow-y-auto pb-[calc(4rem+env(safe-area-inset-bottom,0px))] md:pb-0"
           >
             <div className="mx-auto max-w-[76.8rem] px-4 py-6 md:px-6">
               {children}

src/components/onboarding/getting-started-checklist.tsx

@@ -296,7 +296,7 @@ export function GettingStartedChecklist() {
               total: progress.total,
             })}
           </span>
-          <span className="font-mono tabular-nums">{progress.percent}%</span>
+          <span className="tabular-nums">{progress.percent}%</span>
         </div>
         <div className="bg-muted h-1.5 overflow-hidden rounded-full">
           <div