Merge pull request #18907 from overleaf/jel-faq-css

[web] CSS updates to new plans FAQ

GitOrigin-RevId: b00d8b22f62d9a3774eb673501c0b2074dd15d81

services/web/app/views/subscriptions/plans/_faq_new.pug

@@ -7,7 +7,7 @@ include ../../_mixins/eyebrow
 .plans-faq
 	.row.row-spaced-extra-large
 		.col-md-12.faq-heading-container
-			h2.faq-heading
+			h2
 				+eyebrow(translate("frequently_asked_questions"))
 				| #{translate("your_questions_answered")}
 	.row.plans-faq-header-section

services/web/frontend/stylesheets/app/plans/plans-new-design.less

@@ -493,17 +493,12 @@
     @media (max-width: @screen-xs-max) {
       text-align: unset;
     }
-
-    .faq-heading {
-      font-size: 2rem;
-      padding-right: 1rem;
-    }
   }
 
   .plans-faq-header-section {
     text-align: center;
     max-width: 900px;
-    margin-top: 64px;
+    margin-top: var(--spacing-13);
     margin-left: auto;
     margin-right: auto;
 
@@ -546,17 +541,17 @@
   .accordions-container {
     .custom-accordion-item {
       width: 100%;
-      padding-top: 24px;
-      padding-bottom: 32px;
-      border-bottom: 1px solid @neutral-20;
+      padding-top: var(--spacing-08);
+      padding-bottom: var(--spacing-09);
+      border-bottom: 1px solid var(--neutral-20);
 
       .custom-accordion-header {
         text-align: left;
         width: 100%;
-        font-size: 1.125rem;
+        font-size: var(--font-size-04);
         font-weight: 600;
-        line-height: 24px;
-        color: @neutral-90;
+        line-height: var(--line-height-03);
+        color: var(--neutral-90);
         background-color: unset;
         border: unset;
         display: flex;
@@ -582,9 +577,9 @@
         text-align: left;
         padding: unset;
         padding-right: 2rem;
-        margin-top: 8px;
-        font-size: 1rem;
-        line-height: 24px;
+        margin-top: var(--spacing-04);
+        font-size: var(--font-size-body-base);
+        line-height: var(--line-height-03);
       }
     }
   }

services/web/frontend/stylesheets/components/tabs.less

@@ -58,6 +58,7 @@
       color: @neutral-70;
       border-bottom: 3px solid @neutral-20 !important;
       margin-right: unset;
+      padding: var(--spacing-04);
 
       &:focus,
       &:hover {