4.2.1 final fixes

src/lib/styles/responsive.css

@@ -195,7 +195,7 @@
 
   .hero-inner {
     flex-direction: column;
-    gap: 24px;
+    gap: 18px;
     align-items: stretch;
     text-align: left;
     padding: 0;
@@ -222,6 +222,12 @@
     line-height: 1.5;
   }
 
+  .hero-trust-chip {
+    margin-bottom: 18px;
+    padding: 10px 14px;
+    font-size: 14px;
+  }
+
   .hero-heading-desktop {
     display: none;
   }
@@ -239,37 +245,38 @@
 
   .hero-buttons {
     width: 100%;
-    justify-content: flex-start;
-    gap: 10px;
-    padding-right: 18px;
+    justify-content: space-between;
+    gap: 8px;
+    padding-right: 0;
   }
 
   .hero-buttons .btn {
-    flex: 0 0 auto;
-    width: auto;
+    flex: 1 1 0;
+    width: 0;
     min-width: 0;
-    padding: 17px 28px;
-    font-size: 15px;
+    padding: 15px 12px;
+    font-size: 13.5px;
     font-weight: 700;
     text-align: center;
     border-radius: 999px;
+    line-height: 1.25;
     -webkit-tap-highlight-color: transparent;
     touch-action: manipulation;
   }
 
   .hero-buttons .btn:last-child {
-    margin-right: 12px;
+    margin-right: 0;
   }
 
   .hero-buttons .btn-yellow {
-    background: #e8dbc1;
+    background: var(--yellow);
     color: #000;
   }
 
   .hero-buttons .btn-outline {
-    background: var(--yellow);
-    color: #000;
-    border: none;
+    background: transparent;
+    color: #fff;
+    border: 2px solid rgba(255, 255, 255, 0.84);
   }
 
   .hero-buttons .btn:active {
@@ -277,11 +284,11 @@
   }
 
   .hero-buttons .btn-yellow:active {
-    background: #dccdb1;
+    background: #e6bb00;
   }
 
   .hero-buttons .btn-outline:active {
-    background: #e6bb00;
+    background: rgba(255, 255, 255, 0.08);
   }
 
   .hero-img {
@@ -295,7 +302,7 @@
   }
 
   .hero-img img {
-    width: min(100%, 500px);
+    width: min(100%, 460px);
     max-width: 100%;
     margin: 0 auto -7px;
     object-fit: contain;