chore: adjust webapp payment layout

frontend/src/lib/components/patterns/webapp/PaymentMethodGrid.svelte

@@ -16,7 +16,11 @@
   }
 </script>
 
-<div class="method-grid">
+<div
+  class:method-grid-single={methods.length === 1}
+  class:method-grid-many={methods.length > 2}
+  class="method-grid"
+>
   {#each methods as method}
     {@const icon = methodIcon(method)}
     <button

frontend/src/preview/PreviewMethods.svelte

@@ -13,7 +13,11 @@
   }
 </script>
 
-<div class="method-grid">
+<div
+  class:method-grid-single={methods.length === 1}
+  class:method-grid-many={methods.length > 2}
+  class="method-grid"
+>
   {#each methods as method, index}
     <div class:active={index === 1} class="method-card">
       <svelte:component this={icons[index] || WalletCards} size={18} />

frontend/src/styles/webapp.css

@@ -474,9 +474,7 @@ a {
 
 .trial-offer-card {
   border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
-  background:
-    linear-gradient(135deg, color-mix(in srgb, var(--accent) 11%, transparent), transparent 48%),
-    linear-gradient(135deg, var(--surface-sheen), var(--surface-sheen-soft));
+  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
 }
 
 .trial-card-head {
@@ -700,6 +698,7 @@ a {
   min-height: 82px;
   place-items: center;
   gap: 4px;
+  background: var(--surface-muted);
   padding: 10px 8px;
 }
 
@@ -758,6 +757,12 @@ a {
   gap: 8px;
 }
 
+.method-grid-single .method-card,
+.method-grid-many .method-card:first-child,
+.method-grid-many .method-card:last-child:nth-child(even) {
+  grid-column: 1 / -1;
+}
+
 .option-list {
   display: grid;
   gap: 8px;

frontend/src/webapp/screens/TrialActivationScreen.svelte

@@ -169,10 +169,11 @@
     font-size: 25px;
   }
 
-  :global(.trial-activation-card) {
+  :global(.card.trial-activation-card) {
     display: grid;
     justify-items: center;
     gap: 14px;
+    background: color-mix(in srgb, var(--accent) 6%, var(--panel));
     padding: 20px 16px 18px;
     text-align: center;
   }