style: optimize monthly support button for mobile viewports and fix badge layout

css/styles.css

@@ -3413,13 +3413,22 @@ body {
   .monthly-sub-banner {
     flex-direction: column;
     align-items: stretch;
+    padding: 18px 16px;
     gap: 16px;
   }
   .monthly-sub-right {
     align-items: stretch;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
+    flex-direction: column;
+    gap: 14px;
+  }
+  .monthly-price-wrap {
+    justify-content: flex-start;
+  }
+  .btn-subscribe-monthly {
+    justify-content: center;
+    width: 100%;
+    padding: 13px 18px;
+    font-size: 0.95rem;
   }
 }
 
@@ -3477,9 +3486,9 @@ body {
 }
 
 .tier-popular-ribbon {
-  position: absolute;
-  top: 10px;
-  right: 12px;
+  display: inline-flex;
+  align-items: center;
+  align-self: flex-start;
   background: linear-gradient(135deg, #f59e0b, #d97706);
   color: #07090e;
   font-size: 0.65rem;
@@ -3489,6 +3498,7 @@ body {
   border-radius: 9999px;
   letter-spacing: 0.05em;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
+  margin-bottom: 6px;
 }
 
 .tier-badge-label {