new gui layout for pricing

resources/css/app.css

@@ -401,10 +401,10 @@ select:focus[data-flux-control] {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        gap: 2rem;
-        margin-bottom: 1.75rem;
-        border-radius: 1.35rem;
-        padding: 3rem 3.25rem;
+        gap: 1.25rem;
+        margin-bottom: 1.25rem;
+        border-radius: 1rem;
+        padding: 1.45rem 1.75rem;
         background:
             radial-gradient(circle at 95% 85%, rgb(8 145 178 / 0.62), transparent 36%),
             linear-gradient(135deg, rgb(4 8 24), rgb(10 18 42) 54%, rgb(7 44 58));
@@ -414,47 +414,47 @@ select:focus[data-flux-control] {
 
     .wms-page-hero-copy {
         min-width: 0;
-        max-width: 58rem;
+        max-width: 48rem;
     }
 
     .wms-page-hero-kicker {
-        margin-bottom: 1rem;
+        margin-bottom: 0.55rem;
         color: rgb(103 232 249);
-        font-size: 0.9rem;
-        font-weight: 900;
-        letter-spacing: 0.42em;
+        font-size: 0.72rem;
+        font-weight: 850;
+        letter-spacing: 0.32em;
     }
 
     .wms-page-hero-title {
         margin: 0;
-        font-size: clamp(2.5rem, 5vw, 4.7rem);
-        font-weight: 900;
-        line-height: 0.98;
-        letter-spacing: -0.06em;
+        font-size: clamp(1.9rem, 3vw, 2.75rem);
+        font-weight: 850;
+        line-height: 1.05;
+        letter-spacing: -0.04em;
     }
 
     .wms-page-hero-description {
-        max-width: 52rem;
-        margin-top: 1.2rem;
+        max-width: 44rem;
+        margin-top: 0.65rem;
         color: rgb(203 213 225);
-        font-size: clamp(1rem, 1.55vw, 1.45rem);
+        font-size: clamp(0.9rem, 1.15vw, 1.05rem);
         line-height: 1.45;
     }
 
     .wms-page-hero-actions {
         display: flex;
         align-items: stretch;
-        gap: 1rem;
+        gap: 0.75rem;
         flex: 0 0 auto;
     }
 
     .wms-page-hero-stat {
         display: grid;
-        min-width: 13.75rem;
-        gap: 1rem;
-        border-radius: 1.2rem;
+        min-width: 10.5rem;
+        gap: 0.6rem;
+        border-radius: 0.9rem;
         background: rgb(51 65 85 / 0.72);
-        padding: 1.45rem 1.6rem;
+        padding: 0.9rem 1rem;
         color: rgb(203 213 225);
         backdrop-filter: blur(10px);
     }
@@ -464,8 +464,8 @@ select:focus[data-flux-control] {
         align-items: center;
         gap: 0.75rem;
         color: white;
-        font-size: 2rem;
-        font-weight: 900;
+        font-size: 1.35rem;
+        font-weight: 850;
         line-height: 1;
     }
 
@@ -475,8 +475,8 @@ select:focus[data-flux-control] {
 
     .wms-hero-mobile-menu {
         display: none;
-        width: 3rem;
-        height: 3rem;
+        width: 2.5rem;
+        height: 2.5rem;
         place-items: center;
         align-self: flex-start;
         border-radius: 0.85rem;
@@ -635,10 +635,10 @@ select:focus[data-flux-control] {
         .wms-page-hero {
             align-items: flex-start;
             flex-direction: column;
-            gap: 1.5rem;
-            margin-bottom: 1rem;
-            border-radius: 1rem;
-            padding: 1.35rem;
+            gap: 1rem;
+            margin-bottom: 0.85rem;
+            border-radius: 0.9rem;
+            padding: 1rem;
         }
 
         .wms-page-hero-actions {
@@ -649,11 +649,11 @@ select:focus[data-flux-control] {
         .wms-page-hero-stat {
             min-width: min(12rem, 100%);
             flex: 1 1 12rem;
-            padding: 1rem;
+            padding: 0.8rem;
         }
 
         .wms-page-hero-stat strong {
-            font-size: 1.45rem;
+            font-size: 1.2rem;
         }
 
         .wms-hero-mobile-menu {