diff --git a/services/web/frontend/stylesheets/pages/subscription.scss b/services/web/frontend/stylesheets/pages/subscription.scss
index 1a5f5680a6..ea65a32651 100644
--- a/services/web/frontend/stylesheets/pages/subscription.scss
+++ b/services/web/frontend/stylesheets/pages/subscription.scss
@@ -295,6 +295,58 @@
       margin-top: var(--spacing-08);
     }
   }
+
+  &.stripe-payment-container {
+    .payment-checkout {
+      .checkout-form-inputs {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      // Everything under .form-group is to make the form better match
+      // Stripe's payment inputs
+      .form-group {
+        // we can't use "Noto Sans" as the font within PaymentElement,
+        // so we're using sans-serif for the text elsewhere in the page
+        font-family: sans-serif;
+
+        .form-control {
+          padding: 10px 12px;
+          font-size: 16px;
+          line-height: 20px;
+          border: 1px solid #e6e6e6;
+          transition:
+            box-shadow 0.15s ease,
+            border-color 0.15s ease;
+          box-shadow: 0 1px 3px 0 rgb(0 0 0 / 2%);
+
+          &:focus {
+            outline: none;
+            border-color: #046530; // brand primary color
+            box-shadow:
+              0 1px 1px rgb(0 0 0 / 3%),
+              0 3px 6px rgb(0 0 0 / 2%),
+              0 0 0 3px rgb(11 107 39 / 25%),
+              0 1px 1px 0 rgb(0 0 0 / 8%);
+          }
+
+          &.is-invalid {
+            border-color: var(--bs-form-invalid-border-color);
+            box-shadow:
+              0 1px 3px 0 rgb(0 0 0 / 10%),
+              0 0 0 1px var(--bs-form-invalid-border-color);
+          }
+        }
+
+        .invalid-feedback {
+          .material-symbols {
+            display: none;
+          }
+        }
+      }
+    }
+  }
 }
 
 .group-heading {