Compact footer for mobile: keep link columns side-by-side on narrow screens.

remarkbox_theme_meta/static/theme/meta/css/meta.css

@@ -340,7 +340,13 @@ label.inline-label {
 
 .rb-footer-grid {
     display: grid;
-    grid-template-columns: 2fr 1fr 1fr 1fr;
+    grid-template-columns: 1fr;
+    gap: 30px;
+}
+
+.rb-footer-nav {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
     gap: 40px;
 }
 
@@ -411,19 +417,35 @@ label.inline-label {
 }
 
 @media screen and (max-width:750px) {
-    .rb-footer-grid {
-        grid-template-columns: 1fr 1fr;
+    .rb-footer {
+        padding: 40px 20px 20px;
     }
-}
-
-@media screen and (max-width:568px) {
     .rb-footer-grid {
         grid-template-columns: 1fr;
+        gap: 20px;
+    }
+    .rb-footer-nav {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 16px;
+    }
+    .rb-footer-group-title {
+        margin-bottom: 8px;
+    }
+    .rb-footer-links {
+        gap: 4px;
     }
     .rb-footer-ctas {
+        margin-top: 24px;
         flex-direction: column;
     }
     .rb-footer-ctas .button {
         text-align: center;
     }
+    .rb-footer-quote {
+        margin-top: 20px;
+    }
+    .rb-footer-bottom {
+        margin-top: 20px;
+    }
 }

remarkbox_theme_meta/templates/meta-base.j2

@@ -143,6 +143,7 @@
       <a href="{{ request.marketing_url }}" class="rb-footer-logo">remarkbox</a>
       <p class="rb-footer-tagline">Hosted comments without ads or tracking.</p>
     </div>
+    <div class="rb-footer-nav">
       <div class="rb-footer-group">
         <span class="rb-footer-group-title">Product</span>
         <nav class="rb-footer-links">
@@ -168,6 +169,7 @@
         </nav>
       </div>
     </div>
+  </div>
   <div class="rb-footer-ctas">
     <a class="button red" href="{{ request.app_url }}/setup">Setup Remarkbox</a>
     <a class="button" href="https://faq.remarkbox.com">Browse FAQ</a>