style(mobile): force grid stacking and padding reductions for premium components on mobile sizing

Author: TechStack Global

style.css

@@ -1512,4 +1512,54 @@ img {
 .comparison-table td {
     padding: 1rem;
     border-bottom: 1px solid var(--border-glass);
+}
+
+/* Comprehensive Mobile Optimization for Premium Elements */
+@media screen and (max-width: 768px) {
+
+    /* Scale down giant font sizes */
+    .post-title {
+        font-size: 1.8rem !important;
+        line-height: 1.3 !important;
+    }
+
+    h2 {
+        font-size: 1.6rem !important;
+        margin-top: 2rem !important;
+    }
+
+    h3 {
+        font-size: 1.3rem !important;
+    }
+
+    /* Reduce paddings in premium boxes so text isn't squeezed */
+    .tldr-verdict {
+        padding: 1.25rem !important;
+    }
+
+    .glass-card {
+        padding: 1.25rem !important;
+    }
+
+    /* Override inline grid column styles for stacking on mobile */
+    .audience-grid,
+    .blog-grid {
+        display: flex !important;
+        flex-direction: column !important;
+        gap: 1.5rem !important;
+    }
+
+    /* Fix image overflows */
+    .post-hero-img,
+    .post-body-img {
+        border-radius: 8px !important;
+        margin: 1.5rem 0 !important;
+    }
+
+    /* Tighter table paddings for tiny screens */
+    .comparison-table th,
+    .comparison-table td {
+        padding: 0.75rem 0.5rem !important;
+        font-size: 0.9rem !important;
+    }
 }