refactor(footer): align breakpoints to sm and fix responsive gap

Author: j0u1

app/components/AppFooter.vue

@@ -92,11 +92,11 @@ const footerSections: Array<{ label: string; links: FooterLink[] }> = [
 </script>
 
 <template>
-  <footer class="border-t border-border md:mt-auto md:pt-8 duration-200 transition-all">
+  <footer class="border-t border-border sm:mt-auto sm:pt-8 duration-200 transition-all">
     <div class="container flex flex-col gap-3">
       <!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
       <div
-        class="hidden md:flex flex-col lg:flex-row gap-6 lg:gap-0 lg:justify-between py-3 duration-200 transition-all"
+        class="hidden sm:flex flex-col lg:flex-row gap-6 lg:gap-0 lg:justify-between py-3 duration-200 transition-all"
       >
         <div class="flex flex-col gap-6">
           <div class="flex flex-col items-start gap-3">
@@ -152,7 +152,7 @@ const footerSections: Array<{ label: string; links: FooterLink[] }> = [
       </div>
 
       <small
-        class="border-border py-7.75 md:border-t md:py-4 duration-200 transition-all text-xs text-fg-muted text-center md:text-start m-0"
+        class="border-border py-7.75 sm:border-t sm:py-4 duration-200 transition-all text-xs text-fg-muted text-center sm:text-start m-0"
       >
         <span class="lg:hidden">{{ $t('non_affiliation_disclaimer') }}</span>
         <span class="hidden lg:block">{{ $t('trademark_disclaimer') }}</span>