Merge pull request #24659 from overleaf/mf-init-plans-page-bs5

[web] Migrate plans page and interstitial payment page to bootstrap 5 with feature flag

GitOrigin-RevId: 4491b2205a19b943e8d8bf13f699f92278f5e183

services/web/app/views/_mixins/quote.pug

@@ -32,7 +32,8 @@ mixin collinsQuote1
 		-var quotePerson = 'Christopher Collins'
 		-var quotePersonPosition = 'Associate Professor and Lab Director, Ontario Tech University'
 		-var quotePersonImg = buildImgPath("advocates/collins.jpg")
-		+quoteLargeTextCentered(quote, quotePerson, quotePersonPosition, null, null, quotePersonImg, quotePerson)
+		.card-body
+			+quoteLargeTextCentered(quote, quotePerson, quotePersonPosition, null, null, quotePersonImg, quotePerson)
 
 mixin collinsQuote2
 	.card.card-dark-green-bg
@@ -40,7 +41,8 @@ mixin collinsQuote2
 		-var quotePerson = 'Christopher Collins'
 		-var quotePersonPosition = 'Associate Professor and Lab Director, Ontario Tech University'
 		-var quotePersonImg = buildImgPath("advocates/collins.jpg")
-		+quoteLargeTextCentered(quote, quotePerson, quotePersonPosition, null, null, quotePersonImg, quotePerson)
+		.card-body
+			+quoteLargeTextCentered(quote, quotePerson, quotePersonPosition, null, null, quotePersonImg, quotePerson)
 
 mixin bennettQuote1
 	.card.card-dark-green-bg
@@ -48,4 +50,5 @@ mixin bennettQuote1
 		-var quotePerson = 'Andrew Bennett'
 		-var quotePersonPosition = 'Software Architect, Symplectic'
 		-var quotePersonImg = buildImgPath("advocates/bennett.jpg")
-		+quoteLargeTextCentered(quote, quotePerson, quotePersonPosition, null, null, quotePersonImg, quotePerson)
+		.card-body
+			+quoteLargeTextCentered(quote, quotePerson, quotePersonPosition, null, null, quotePersonImg, quotePerson)

services/web/app/views/layout/navbar-marketing.pug

@@ -1,4 +1,6 @@
-nav.navbar.navbar-default.navbar-main
+nav.navbar.navbar-default.navbar-main(class={
+	'website-redesign-navbar': isWebsiteRedesign
+})
 	.container-fluid
 		.navbar-header
 			if (typeof(suppressNavbarRight) == "undefined")

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

@@ -13,21 +13,40 @@ include ../../_mixins/eyebrow
 
 	.row
 		.col-xs-12
-			.ol-tabs-scrollable
+			div(
+				class={
+					'plans-faq-tabs': bootstrapVersion === 5,
+					'ol-tabs': bootstrapVersion === 5,
+					'ol-tabs-scrollable': bootstrapVersion === 3
+				}
+			)
 				.nav-tabs-container
 					ul.nav.nav-tabs(role="tablist")
-						li.active(role="presentation")
+						//- In the bs5 version of plans page, the `active` class need to be added to the `a` tag instead of the parent `li` tag
+						//- If the `plans-page-bs5` split test has been completed, remove the `active` class from the `li` tag since we're not using it anymore
+						//- If the `plans-page-bs5` split test has been completed, remove the `data-toggle` because it is not needed anymore (bs5 uses `data-bs-toggle`)
+						li(
+							role="presentation"
+							class={
+								active: bootstrapVersion === 3
+							}
+						)
 							a(
 								role="tab"
 								data-toggle="tab"
+								data-bs-toggle="tab"
 								href='#' + managingYourSubscription
 								aria-controls=managingYourSubscription
+								class={
+									active: bootstrapVersion === 5
+								}
 							)
 								| #{translate('managing_your_subscription')}
 						li(role="presentation")
 							a(
 								role="tab"
 								data-toggle="tab"
+								data-bs-toggle="tab"
 								href='#' + overleafIndividualPlans
 								aria-controls=overleafIndividualPlans
 							)
@@ -36,6 +55,7 @@ include ../../_mixins/eyebrow
 							a(
 								role="tab"
 								data-toggle="tab"
+								data-bs-toggle="tab"
 								href='#' + overleafGroupPlans
 								aria-controls=overleafGroupPlans
 							)
@@ -58,8 +78,9 @@ include ../../_mixins/eyebrow
 					)
 						+overleafGroupPlans()
 
-	.row.plans-faq-support
-		span #{translate('still_have_questions')}
-		button(data-ol-open-contact-form-modal="general")
-			span(style="margin-right: 4px") #{translate('contact_support')}
-			i.icon-md.material-symbols.material-symbols-rounded.material-symbols-arrow-right(aria-hidden="true") arrow_right_alt
+	.row
+		.col-xs-12.plans-faq-support
+			span #{translate('still_have_questions')}
+			button(data-ol-open-contact-form-modal="general")
+				span(style="margin-right: 4px") #{translate('contact_support')}
+				i.icon-md.material-symbols.material-symbols-rounded.material-symbols-arrow-right(aria-hidden="true") arrow_right_alt

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

@@ -1,7 +1,17 @@
+//- If the `plans-page-bs5` split test has been completed, remove the `data-toggle` and `data-target` because it is not needed anymore (bs5 uses `data-bs-toggle` and `data-bs-target`)
+
 mixin managingYourSubscription()
 	.ol-accordions-container
 		.custom-accordion-item
-			button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#managingYourSubscriptionQ1" aria-expanded="false" aria-controls="managingYourSubscriptionQ1")
+			button.custom-accordion-header.collapsed(
+				type="button"
+				data-toggle="collapse"
+				data-target="#managingYourSubscriptionQ1"
+				data-bs-toggle="collapse"
+				data-bs-target="#managingYourSubscriptionQ1"
+				aria-expanded="false"
+				aria-controls="managingYourSubscriptionQ1"
+			)
 				| Can I change plans or cancel later?
 				span.custom-accordion-icon
 					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
@@ -11,7 +21,15 @@ mixin managingYourSubscription()
 					strong Account > Subscription 
 					span when logged in to Overleaf. You can change plans, switch between monthly and annual billing options, or cancel to downgrade to the free plan. When canceling, your subscription will continue until the end of the billing period.
 		.custom-accordion-item
-			button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#managingYourSubscriptionQ2" aria-expanded="false" aria-controls="managingYourSubscriptionQ2")
+			button.custom-accordion-header.collapsed(
+				type="button"
+				data-toggle="collapse"
+				data-target="#managingYourSubscriptionQ2"
+				data-bs-toggle="collapse"
+				data-bs-target="#managingYourSubscriptionQ2"
+				aria-expanded="false"
+				aria-controls="managingYourSubscriptionQ2"
+			)
 				| If I change or cancel my Overleaf plan, will I lose my projects?
 				span.custom-accordion-icon
 					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
@@ -19,7 +37,15 @@ mixin managingYourSubscription()
 				.custom-accordion-body
 					| No. Changing or canceling your plan won’t affect your projects, the only change will be to the features available to you. You can see which features are available only on paid plans in the comparison table.
 		.custom-accordion-item
-			button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#managingYourSubscriptionQ3" aria-expanded="false" aria-controls="managingYourSubscriptionQ3")
+			button.custom-accordion-header.collapsed(
+				type="button"
+				data-toggle="collapse"
+				data-target="#managingYourSubscriptionQ3"
+				data-bs-toggle="collapse"
+				data-bs-target="#managingYourSubscriptionQ3"
+				aria-expanded="false"
+				aria-controls="managingYourSubscriptionQ3"
+			)
 				| Can I pay by invoice or purchase order?
 				span.custom-accordion-icon
 					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
@@ -27,7 +53,15 @@ mixin managingYourSubscription()
 				.custom-accordion-body
 					| This is possible when you’re purchasing a group subscription for five or more people, or a site license. For individual subscriptions, we can only accept payment online via credit card, debit card, or PayPal.
 		.custom-accordion-item
-			button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#managingYourSubscriptionQ4" aria-expanded="false" aria-controls="managingYourSubscriptionQ4")
+			button.custom-accordion-header.collapsed(
+				type="button"
+				data-toggle="collapse"
+				data-target="#managingYourSubscriptionQ4"
+				data-bs-toggle="collapse"
+				data-bs-target="#managingYourSubscriptionQ4"
+				aria-expanded="false"
+				aria-controls="managingYourSubscriptionQ4"
+			)
 				| How do I view/update the credit card being charged for my subscription?
 				span.custom-accordion-icon
 					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
@@ -51,7 +85,15 @@ mixin managingYourSubscription()
 mixin overleafIndividualPlans()
 	.ol-accordions-container
 		.custom-accordion-item
-			button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafIndividualPlansQ1" aria-expanded="false" aria-controls="overleafIndividualPlansQ1")
+			button.custom-accordion-header.collapsed(
+				type="button"
+				data-toggle="collapse"
+				data-target="#overleafIndividualPlansQ1"
+				data-bs-toggle="collapse"
+				data-bs-target="#overleafIndividualPlansQ1"
+				aria-expanded="false"
+				aria-controls="overleafIndividualPlansQ1"
+			)
 				| How does the free trial work?
 				span.custom-accordion-icon
 					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
@@ -71,7 +113,15 @@ mixin overleafIndividualPlans()
 					span  when logged in to Overleaf (the trial will continue for the full 7 days).
 
 		.custom-accordion-item
-			button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafIndividualPlansQ2" aria-expanded="false" aria-controls="overleafIndividualPlansQ2")
+			button.custom-accordion-header.collapsed(
+				type="button"
+				data-toggle="collapse"
+				data-target="#overleafIndividualPlansQ2"
+				data-bs-toggle="collapse"
+				data-bs-target="#overleafIndividualPlansQ2"
+				aria-expanded="false"
+				aria-controls="overleafIndividualPlansQ2"
+			)
 				| What’s a collaborator on an Overleaf individual subscription?
 				span.custom-accordion-icon
 					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
@@ -80,7 +130,15 @@ mixin overleafIndividualPlans()
 					| A collaborator is someone you invite to work with you on a project. So, for example, on our Standard plan you can have up to 10 people collaborating with you on any given project. 
 
 		.custom-accordion-item
-			button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafIndividualPlansQ3" aria-expanded="false" aria-controls="overleafIndividualPlansQ3")
+			button.custom-accordion-header.collapsed(
+				type="button"
+				data-toggle="collapse"
+				data-target="#overleafIndividualPlansQ3"
+				data-bs-toggle="collapse"
+				data-bs-target="#overleafIndividualPlansQ3"
+				aria-expanded="false"
+				aria-controls="overleafIndividualPlansQ3"
+			)
 				| The individual Standard plan has 10 project collaborators, does it mean that 10 people will be upgraded?
 				span.custom-accordion-icon
 					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
@@ -90,7 +148,15 @@ mixin overleafIndividualPlans()
 					strong only 
 					span for the project(s) they’re working on with you. If your collaborators want access to those features on their own projects, they will need to purchase their own subscription. (If you work with the same people regularly, you might find a group subscription more cost effective.)
 		.custom-accordion-item
-			button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafIndividualPlansQ4" aria-expanded="false" aria-controls="overleafIndividualPlansQ4")
+			button.custom-accordion-header.collapsed(
+				type="button"
+				data-toggle="collapse"
+				data-target="#overleafIndividualPlansQ4"
+				data-bs-toggle="collapse"
+				data-bs-target="#overleafIndividualPlansQ4"
+				aria-expanded="false"
+				aria-controls="overleafIndividualPlansQ4"
+			)
 				| Do collaborators also have access to the editing and collaboration features I’ve paid for?
 				span.custom-accordion-icon
 					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
@@ -100,7 +166,15 @@ mixin overleafIndividualPlans()
 					strong only 
 					span for the project(s) they’re working on with you. If your collaborators want access to those features on their own projects, they will need to purchase their own subscription. (If you work with the same people regularly, you might find a group subscription more cost effective.)
 		.custom-accordion-item
-			button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafIndividualPlansQ5" aria-expanded="false" aria-controls="overleafIndividualPlansQ5")
+			button.custom-accordion-header.collapsed(
+				type="button"
+				data-toggle="collapse"
+				data-target="#overleafIndividualPlansQ5"
+				data-bs-toggle="collapse"
+				data-bs-target="#overleafIndividualPlansQ5"
+				aria-expanded="false"
+				aria-controls="overleafIndividualPlansQ5"
+			)
 				| Can I purchase an individual plan on behalf of someone else?
 				span.custom-accordion-icon
 					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
@@ -108,7 +182,15 @@ mixin overleafIndividualPlans()
 				.custom-accordion-body
 					| Individual subscriptions must be purchased by the account that will be the end user. If you want to purchase a plan for someone else, you’ll need to provide them with relevant payment details to enable them to make the purchase. 
 		.custom-accordion-item
-			button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafIndividualPlansQ6" aria-expanded="false" aria-controls="overleafIndividualPlansQ6")
+			button.custom-accordion-header.collapsed(
+				type="button"
+				data-toggle="collapse"
+				data-target="#overleafIndividualPlansQ6"
+				data-bs-toggle="collapse"
+				data-bs-target="#overleafIndividualPlansQ6"
+				aria-expanded="false"
+				aria-controls="overleafIndividualPlansQ6"
+			)
 				| Who is eligible for the Student plan?
 				span.custom-accordion-icon
 					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
@@ -116,7 +198,15 @@ mixin overleafIndividualPlans()
 				.custom-accordion-body
 					| As the name suggests, the Student plan is only for students at educational institutions. This includes graduate students.
 		.custom-accordion-item
-			button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafIndividualPlansQ7" aria-expanded="false" aria-controls="overleafIndividualPlansQ7")
+			button.custom-accordion-header.collapsed(
+				type="button"
+				data-toggle="collapse"
+				data-target="#overleafIndividualPlansQ7"
+				data-bs-toggle="collapse"
+				data-bs-target="#overleafIndividualPlansQ7"
+				aria-expanded="false"
+				aria-controls="overleafIndividualPlansQ7"
+			)
 				| Can I transfer an individual subscription to someone else?
 				span.custom-accordion-icon
 					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
@@ -131,7 +221,15 @@ mixin overleafIndividualPlans()
 mixin overleafGroupPlans()
 	.ol-accordions-container
 		.custom-accordion-item
-			button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafGroupPlansQ1" aria-expanded="false" aria-controls="overleafGroupPlansQ1")
+			button.custom-accordion-header.collapsed(
+				type="button"
+				data-toggle="collapse"
+				data-target="#overleafGroupPlansQ1"
+				data-bs-toggle="collapse"
+				data-bs-target="#overleafGroupPlansQ1"
+				aria-expanded="false"
+				aria-controls="overleafGroupPlansQ1"
+			)
 				| What’s the difference between users and collaborators on an Overleaf group subscription?
 				span.custom-accordion-icon
 					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
@@ -140,7 +238,15 @@ mixin overleafGroupPlans()
 					div On any of our group plans, the number of users refers to the number of people you can invite to join your group. All of these people will have access to the plan’s paid-for features across all their projects, such as real-time track changes and document history. 
 					div.mt-2 Collaborators are people that your group users may invite to work with them on their projects. So, for example, if you have the Group Standard plan, the users in your group can invite up to 10 people to work with them on a project. And if you have the Group Professional plan, your users can invite as many people to work with them as they want.
 		.custom-accordion-item
-			button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafGroupPlansQ2" aria-expanded="false" aria-controls="overleafGroupPlansQ2")
+			button.custom-accordion-header.collapsed(
+				type="button"
+				data-toggle="collapse"
+				data-target="#overleafGroupPlansQ2"
+				data-bs-toggle="collapse"
+				data-bs-target="#overleafGroupPlansQ2"
+				aria-expanded="false"
+				aria-controls="overleafGroupPlansQ2"
+			)
 				| What is the benefit of purchasing an Overleaf Group plan?
 				span.custom-accordion-icon
 					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
@@ -158,7 +264,15 @@ mixin overleafGroupPlans()
 						span Sales team
 					| .
 		.custom-accordion-item
-			button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafGroupPlansQ3" aria-expanded="false" aria-controls="overleafGroupPlansQ3")
+			button.custom-accordion-header.collapsed(
+				type="button"
+				data-toggle="collapse"
+				data-target="#overleafGroupPlansQ3"
+				data-bs-toggle="collapse"
+				data-bs-target="#overleafGroupPlansQ3"
+				aria-expanded="false"
+				aria-controls="overleafGroupPlansQ3"
+			)
 				| Who is eligible for the educational discount?
 				span.custom-accordion-icon
 					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
@@ -166,7 +280,15 @@ mixin overleafGroupPlans()
 				.custom-accordion-body
 					| The educational discount for group subscriptions is for students or faculty who are using Overleaf primarily for teaching. 
 		.custom-accordion-item
-			button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafGroupPlansQ4" aria-expanded="false" aria-controls="overleafGroupPlansQ4")
+			button.custom-accordion-header.collapsed(
+				type="button"
+				data-toggle="collapse"
+				data-target="#overleafGroupPlansQ4"
+				data-bs-toggle="collapse"
+				data-bs-target="#overleafGroupPlansQ4"
+				aria-expanded="false"
+				aria-controls="overleafGroupPlansQ4"
+			)
 				| How do I add more licenses to my group subscription, and what will it cost?
 				span.custom-accordion-icon
 					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down
@@ -207,7 +329,15 @@ mixin overleafGroupPlans()
 							span contact the Sales team
 						| .
 		.custom-accordion-item
-			button.custom-accordion-header.collapsed(type="button" data-toggle="collapse" data-target="#overleafGroupPlansQ5" aria-expanded="false" aria-controls="overleafGroupPlansQ5")
+			button.custom-accordion-header.collapsed(
+				type="button"
+				data-toggle="collapse"
+				data-target="#overleafGroupPlansQ5"
+				data-bs-toggle="collapse"
+				data-bs-target="#overleafGroupPlansQ5"
+				aria-expanded="false"
+				aria-controls="overleafGroupPlansQ5"
+			)
 				| How do I upgrade my plan from Group Standard to Group Professional?
 				span.custom-accordion-icon
 					i.material-symbols.material-symbols-outlined(aria-hidden="true") keyboard_arrow_down

services/web/frontend/js/features/utils/bootstrap-5.ts

@@ -0,0 +1,5 @@
+import getMeta from '@/utils/meta'
+
+// The reason this is a function is to ensure that the meta tag is read before
+// any isBootstrap5 check is performed
+export const isBootstrap5 = () => getMeta('ol-bootstrapVersion') === 5

services/web/frontend/stylesheets/app/plans.less

@@ -1154,6 +1154,7 @@
 
   .plans-faq-support {
     margin-top: var(--spacing-06);
+    margin-bottom: var(--spacing-06);
     display: flex;
     flex-direction: column;
     align-items: center;

services/web/frontend/stylesheets/bootstrap-5/components/accordion.scss

@@ -0,0 +1,50 @@
+.ol-accordions-container :last-child {
+  border: 0 !important;
+}
+
+.ol-accordions-container {
+  .custom-accordion-item {
+    width: 100%;
+    padding-top: var(--spacing-08);
+    padding-bottom: var(--spacing-09);
+    border-bottom: 1px solid var(--border-divider);
+
+    .custom-accordion-header {
+      text-align: left;
+      width: 100%;
+      font-size: var(--font-size-04);
+      font-weight: 600;
+      line-height: var(--line-height-03);
+      color: var(--content-primary);
+      background-color: unset;
+      border: unset;
+      display: flex;
+      justify-content: space-between;
+      padding: unset;
+
+      .custom-accordion-icon {
+        display: flex;
+        align-items: center;
+        transition: transform 0.35s ease;
+        margin-left: var(--spacing-08);
+      }
+
+      &:not(.collapsed) {
+        .custom-accordion-icon {
+          transform: rotate(180deg);
+          transition: transform 0.35s ease;
+        }
+      }
+    }
+
+    .custom-accordion-body {
+      @include body-base;
+
+      background-color: unset;
+      text-align: left;
+      padding: unset;
+      padding-right: 2rem;
+      margin-top: var(--spacing-04);
+    }
+  }
+}

services/web/frontend/stylesheets/bootstrap-5/components/all.scss

@@ -1,3 +1,4 @@
+@import 'accordion';
 @import 'button';
 @import 'button-group';
 @import 'dropdown-menu';

services/web/frontend/stylesheets/bootstrap-5/components/tabs.scss

@@ -15,7 +15,7 @@
       gap: var(--spacing-04);
       margin: 0 auto;
       padding: 0;
-      border-bottom: var(--border-width-base) solid var(--neutral-20);
+      border-bottom: var(--border-width-base) solid var(--border-divider);
       text-align: center;
       border-top: 2px solid transparent; // so that top focus border is visible
       min-width: max-content; // This is for horizontal scrolling
@@ -33,7 +33,7 @@
         button {
           border: 0;
           border-radius: 0;
-          color: var(--neutral-70);
+          color: var(--content-secondary);
           margin-right: unset;
           padding: var(--spacing-04);
           line-height: var(--line-height-03);
@@ -51,7 +51,7 @@
           }
 
           &:hover {
-            background-color: var(--neutral-10);
+            background-color: var(--bg-light-secondary);
             text-decoration: none;
           }
 
@@ -63,10 +63,10 @@
 
       li > a.active,
       li > button.active {
-        background-color: transparent !important;
-        border: 0 !important;
-        border-bottom: 3px solid var(--green-50) !important;
-        color: var(--neutral-90) !important;
+        background-color: transparent;
+        border: 0;
+        border-bottom: 3px solid var(--green-50);
+        color: var(--content-primary);
       }
 
       &.align-left {

services/web/frontend/stylesheets/bootstrap-5/pages/all.scss

@@ -44,6 +44,7 @@
 @import 'login-register';
 @import 'login';
 @import 'register';
+@import 'plans';
 @import 'onboarding-confirm-email';
 @import 'secondary-confirm-email';
 @import 'onboarding';

services/web/frontend/stylesheets/bootstrap-5/pages/plans.scss

@@ -0,0 +1,1254 @@
+@use 'sass:math';
+
+$container-plans-responsive-width: 95%;
+$container-xl: 1280px;
+$z-index-plans-new-tabs-content: 0;
+$z-index-plans-new-tabs: 1;
+$border-radius-full-new: 9999px;
+$highlighted-heading-line-height: 24px; // this is ported directly from the .less file as value
+$highlighted-heading-padding-vertical: $spacing-02;
+$highlighted-heading-height: (
+  $highlighted-heading-line-height + (2 * $highlighted-heading-padding-vertical)
+);
+$switcher-container-margin-bottom: $highlighted-heading-height + $spacing-10;
+$table-4-column-width: 25%;
+$table-5-column-width: 20%;
+$nondiscounted-price-element-height: var(--line-height-02);
+$group-member-picker-height: 24px;
+$group-member-picker-top-height: 36px;
+$z-index-group-member-picker-list: 1;
+
+.plans-new-design {
+  --border-width-base: 3px; // TODO: put this variable in a decent location
+  --border-radius-large-new: 16px; // TODO: put this variable in a decent location
+
+  padding-top: $header-height;
+
+  .container {
+    padding: 0 var(--spacing-06);
+
+    @include media-breakpoint-up(md) {
+      width: $container-plans-responsive-width;
+    }
+
+    @include media-breakpoint-up(xxl) {
+      width: $container-xl;
+    }
+
+    .geo-banner-container {
+      margin-top: var(--spacing-08);
+    }
+
+    .plans-new-design-content-spacing {
+      margin-top: var(--spacing-16);
+    }
+
+    .interstitial-new-design-content-spacing {
+      margin-top: var(--spacing-13);
+    }
+  }
+
+  .main-heading-section {
+    text-align: center;
+    max-width: 885px;
+    margin-left: auto;
+    margin-right: auto;
+
+    @include media-breakpoint-down(md) {
+      text-align: left;
+      padding: 0 16px;
+    }
+
+    .plans-page-heading {
+      margin-top: 8px;
+      margin-bottom: unset;
+      font-size: 3rem;
+      font-weight: 600;
+      line-height: 64px;
+
+      @include media-breakpoint-down(md) {
+        font-size: 2.25rem;
+        line-height: 48px;
+        padding-right: 5rem;
+      }
+    }
+
+    .plans-page-sub-heading {
+      font-size: 1.125rem;
+      line-height: 24px;
+      margin-top: 16px;
+      margin-bottom: unset;
+    }
+  }
+
+  .plans-new-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+
+    @include media-breakpoint-up(md) {
+      border-left: 1px solid var(--border-divider);
+      border-right: 1px solid var(--border-divider);
+      border-bottom: 1px solid var(--border-divider);
+      border-radius: 8px;
+    }
+
+    // this is the border between the tabs and the content, specifically on the left and right side
+    // this is necessary to enable top border radius on the plans-new-content
+    &::before {
+      content: '';
+      display: block;
+      z-index: $z-index-plans-new-tabs-content;
+      position: absolute;
+      top: -1px; // make border overlap with the border on .plans-new-tabs
+      width: 100%;
+      height: 20px; // arbitrary height since it's transparent, make sure that it's bigger than border radius
+      background: transparent;
+      border-top: 1px solid var(--border-divider);
+
+      @include media-breakpoint-up(md) {
+        border-top-left-radius: 8px;
+        border-top-right-radius: 8px;
+      }
+    }
+  }
+
+  .plans-new-tabs-container {
+    z-index: $z-index-plans-new-tabs;
+    margin-top: var(--spacing-16);
+
+    // explicit padding to tell that the bottom left and bottom right
+    // does not have bottom border defined in .plans-new-tabs
+    // technically unnecessary because padding is already defined in bootstrap column
+    padding: 0 16px;
+  }
+
+  .plans-new-tabs {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    border-bottom: 1px solid var(--border-divider);
+
+    .plans-new-tab {
+      cursor: pointer;
+      font-size: 16px;
+      font-weight: 600;
+      border-top-right-radius: 8px;
+      border-top-left-radius: 8px;
+      margin-bottom: -1px; // to overlap with the border on .plans-new-tabs to avoid double border
+
+      .plans-new-tab-link {
+        display: flex;
+        align-items: center;
+        color: var(--content-secondary);
+        margin: 0;
+        border-top-right-radius: 8px;
+        border-top-left-radius: 8px;
+        /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
+        border: 1px solid var(--border-divider);
+        padding: var(--spacing-05) var(--spacing-08);
+        gap: var(--spacing-04);
+        text-decoration: unset;
+
+        &:focus {
+          background-color: unset;
+          outline: 0;
+        }
+
+        &:hover {
+          background-color: var(--neutral-20);
+        }
+
+        // TODO: this is copied directly from the `.less` file, migrate this to scss
+        // tab navigation focus style
+        // &:focus-visible {
+        //   .box-shadow-button-input();
+        //   outline: 0;
+        // }
+
+        .group-discount-bubble {
+          padding: var(--spacing-01) var(--spacing-04);
+          background-color: var(--green-10);
+          color: var(--green-50);
+          border-radius: $border-radius-full-new; // TODO: this is ported direction as a scss variable, change this to a css variable
+          font-family: 'DM Mono', monospace;
+          font-feature-settings: 'ss05';
+          font-size: var(--font-size-01);
+          line-height: var(--line-height-01);
+          font-weight: 500;
+
+          @include media-breakpoint-down(md) {
+            display: none;
+          }
+        }
+
+        @include media-breakpoint-down(md) {
+          font-size: var(--font-size-02);
+          line-height: var(--line-height-02);
+          padding: var(--spacing-05);
+          gap: var(--spacing-02);
+        }
+      }
+
+      &:has(.active) {
+        .plans-new-tab-link {
+          border: 1px solid white;
+          position: relative;
+          color: var(--green-50);
+
+          // remove the border on tab focus
+          &:focus-visible {
+            &::before {
+              content: unset;
+            }
+          }
+
+          &::before {
+            content: '';
+            position: absolute;
+            background: border-box
+              linear-gradient(
+                to bottom,
+                $green-50 0%,
+                $neutral-20 85%,
+                $neutral-20 100%
+              );
+            /* stylelint-disable-next-line property-no-vendor-prefix */
+            -webkit-mask:
+              linear-gradient(white 0 0) padding-box,
+              linear-gradient(white 0 0);
+            mask:
+              linear-gradient(white 0 0) padding-box,
+              linear-gradient(white 0 0);
+            /* stylelint-disable-next-line property-no-vendor-prefix */
+            -webkit-mask-composite: xor;
+            mask-composite: exclude;
+            border-top-right-radius: 8px;
+            border-top-left-radius: 8px;
+            border: 1px solid transparent;
+            border-bottom: 1px solid white;
+
+            // make the border overlap with the .plans-new-tab-link border
+            top: 0;
+            bottom: -2px;
+            left: -1px;
+            /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+            right: -1px;
+          }
+
+          &:hover {
+            background-color: unset;
+          }
+        }
+
+        .plans-new-discount-badge {
+          background-color: var(--green-10);
+          color: var(--green-60);
+        }
+      }
+    }
+  }
+
+  .plans-new-period-switcher-container {
+    position: relative;
+    display: inline-flex;
+    background-color: var(--bg-light-secondary);
+    border-radius: $border-radius-full-new; // TODO: this is ported direction as a scss variable, change this to a css variable
+    padding: var(--spacing-03);
+    margin-top: var(--spacing-09);
+    margin-bottom: $switcher-container-margin-bottom;
+    gap: var(--spacing-04);
+
+    @include media-breakpoint-down(md) {
+      margin-bottom: var(--spacing-09);
+    }
+
+    label {
+      display: inline-flex;
+      align-items: center;
+      margin: 0;
+      font-size: var(--font-size-05);
+      font-weight: 600;
+      line-height: var(--line-height-04);
+      text-align: center;
+      padding: var(--spacing-01) var(--spacing-04);
+      border-radius: $border-radius-full-new; // TODO: this is ported direction as a scss variable, change this to a css variable
+
+      &:hover {
+        background-color: var(--neutral-20);
+        cursor: pointer;
+      }
+    }
+
+    input[type='radio'] {
+      position: absolute;
+      left: -9999px;
+
+      &:focus,
+      &:focus-visible {
+        outline: 0;
+      }
+    }
+
+    // TODO: this is copied directly from the `.less` file, migrate this to scss
+    // input[type='radio']:focus-visible + label,
+    // input[type='radio']:checked:focus-visible + label {
+    //   .box-shadow-button-input();
+    // }
+
+    input[type='radio']:checked + label {
+      background-color: var(--green-50);
+      color: white;
+      /* stylelint-disable-next-line length-zero-no-unit, color-function-notation, alpha-value-notation */
+      box-shadow: 0px 2px 4px 0px rgba(30, 37, 48, 0.16);
+
+      .plans-new-discount-badge {
+        background-color: var(--green-10);
+        color: var(--green-60);
+      }
+    }
+
+    .plans-new-discount-badge {
+      margin-left: var(--spacing-03);
+    }
+  }
+
+  .plans-new-discount-badge {
+    font-size: var(--font-size-01);
+    font-family: 'DM Mono', monospace;
+    padding: 2px 8px;
+    height: 20px;
+    border-radius: 10px;
+    background-color: var(--neutral-70);
+    color: white;
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+    line-height: var(--line-height-01);
+  }
+
+  .plans-new-tab-content {
+    width: 100%;
+    border: none;
+    padding-top: 0;
+
+    @include media-breakpoint-down(md) {
+      padding: 0;
+    }
+  }
+
+  .plans-new-mobile {
+    display: none;
+
+    @include media-breakpoint-down(md) {
+      display: block;
+    }
+  }
+
+  .plans-new-desktop {
+    display: block;
+
+    @include media-breakpoint-down(md) {
+      display: none;
+    }
+  }
+
+  .plans-new-table {
+    width: 100%;
+
+    // keep the borders separate to help with spacing and alignment in the CTAs
+    border-collapse: separate;
+    border-spacing: 0;
+
+    th,
+    td {
+      width: $table-4-column-width;
+    }
+  }
+
+  .plans-new-table-student {
+    margin-left: math.div($table-4-column-width, 2);
+  }
+
+  .plans-new-table-student-verification {
+    font-weight: 600;
+    font-size: var(--font-size-01);
+    text-align: center;
+  }
+
+  .plans-new-table-group {
+    margin-top: $spacing-11 + $highlighted-heading-height;
+  }
+
+  thead th {
+    position: relative;
+    padding: var(--spacing-06) var(--spacing-08) var(--spacing-04)
+      var(--spacing-08);
+    font-size: var(--font-size-05);
+    font-weight: 600;
+    line-height: var(--line-height-04);
+    color: var(--content-primary);
+    text-align: center;
+
+    @include media-breakpoint-down(md) {
+      padding: var(--spacing-05) var(--spacing-05) 0 var(--spacing-05);
+    }
+  }
+
+  .plans-new-table-subheader {
+    vertical-align: top;
+    padding: 0 var(--spacing-08);
+
+    @include media-breakpoint-down(xl) {
+      padding: 0 var(--spacing-05);
+    }
+
+    &.plans-new-table-icon-cta-cell,
+    &.plans-subheader-monthly-cta-swapped {
+      vertical-align: bottom;
+    }
+  }
+
+  .plans-new-table-cta-row {
+    td {
+      padding-bottom: var(--spacing-06);
+
+      @include media-breakpoint-down(xl) {
+        padding-bottom: var(--spacing-05);
+      }
+
+      // use transparent borders to use the same spacing as highlighted cells
+      &:not(.plans-new-table-highlighted-cell) {
+        border-right: var(--border-width-base) solid transparent;
+        border-left: var(--border-width-base) solid transparent;
+      }
+    }
+
+    .plans-cta + .plans-cta {
+      margin-top: var(--spacing-04);
+    }
+  }
+
+  .plans-new-table-header-grid-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    s,
+    .match-original-price-height {
+      font-size: var(--font-size-02);
+      line-height: $nondiscounted-price-element-height;
+      color: var(--neutral-60);
+      font-weight: 600;
+    }
+
+    .plans-new-table-header-price {
+      font-size: var(--font-size-08);
+      font-weight: 600;
+      line-height: var(--line-height-07);
+      color: var(--content-primary);
+    }
+
+    .plans-new-table-header-price-unit {
+      font-size: var(--font-size-02);
+      line-height: var(--line-height-02);
+      text-align: center;
+    }
+
+    .plans-new-table-cta {
+      margin-top: auto;
+
+      a:nth-child(2) {
+        margin-top: var(--spacing-04);
+      }
+    }
+
+    .plans-new-table-header-icon {
+      font-size: 56px;
+      color: var(--content-primary);
+    }
+  }
+
+  .plans-new-table-header-price-unit-total {
+    font-size: var(--font-size-01);
+    line-height: var(--line-height-01);
+  }
+
+  .plans-new-table-header-desc {
+    margin-top: var(--spacing-05);
+    margin-bottom: var(--spacing-08);
+    font-size: var(--font-size-02);
+    line-height: var(--line-height-02);
+  }
+
+  .plans-new-group-member-picker {
+    .plans-new-group-member-picker-text {
+      font-size: var(--font-size-02);
+      line-height: var(--line-height-02);
+      font-weight: 600;
+      margin-bottom: var(--spacing-02);
+    }
+
+    .plans-new-group-member-picker-form {
+      position: relative;
+
+      .plans-new-group-member-picker-button {
+        width: 100%;
+        background-color: white;
+        border-radius: var(--border-radius-base-new);
+        border: 1px solid var(--neutral-60);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--spacing-01) var(--spacing-03);
+        margin-bottom: var(--spacing-04);
+        height: $group-member-picker-height;
+        font-size: var(--font-size-02);
+        line-height: var(--line-height-02);
+
+        &[aria-expanded='true'] {
+          i {
+            transform: rotate(180deg);
+            transition: transform 0.35s ease;
+          }
+        }
+
+        &[aria-expanded='false'] {
+          i {
+            transition: transform 0.35s ease;
+          }
+        }
+
+        &[data-ol-plans-new-group-member-picker-button='group-all'] {
+          height: $group-member-picker-top-height;
+        }
+      }
+
+      ul.plans-new-group-member-picker-list {
+        list-style-type: none;
+        margin-bottom: 0;
+        overflow: auto; // to enable box-shadow
+        /* stylelint-disable-next-line length-zero-no-unit, color-function-notation, alpha-value-notation */
+        box-shadow: 0px 2px 4px 0px rgba(30, 37, 48, 0.16);
+        padding: var(--spacing-02);
+        position: absolute;
+        top: $group-member-picker-height;
+        background-color: white;
+        width: 100%;
+        margin-top: var(--spacing-01);
+        z-index: $z-index-group-member-picker-list;
+
+        &[data-ol-plans-new-group-member-picker-dropdown='group-all'] {
+          top: $group-member-picker-top-height;
+        }
+      }
+
+      li.plans-new-group-member-picker-footer {
+        font-size: var(--font-size-02);
+        line-height: var(--line-height-02);
+        padding: var(--spacing-05) var(--spacing-04);
+
+        span {
+          display: block;
+        }
+
+        button {
+          font-weight: 400;
+          padding: 0;
+          font-size: var(--font-size-02);
+          line-height: var(--line-height-02);
+        }
+      }
+
+      li {
+        position: relative;
+
+        &:not(:last-child) {
+          margin-bottom: var(--spacing-02);
+        }
+
+        &:not(.plans-new-group-member-picker-footer):hover {
+          input[type='radio']:not(:checked) + p {
+            background-color: var(--bg-light-secondary);
+          }
+        }
+
+        input[type='radio'] {
+          position: absolute;
+          opacity: 0;
+          cursor: pointer;
+
+          // TODO: this is copied directly from the `.less` file, migrate this to scss
+          // &:focus + p {
+          //   &:extend(.input-focus-style);
+          // }
+
+          + p {
+            padding: var(--spacing-05) var(--spacing-08) var(--spacing-05)
+              var(--spacing-04);
+            margin-bottom: 0;
+            border-radius: var(--border-radius-base-new);
+          }
+        }
+
+        input[type='radio']:checked + p {
+          background-color: var(--green-10);
+          color: var(--green-70);
+          position: relative;
+          word-wrap: break-word;
+
+          &::after {
+            content: url(../../../../public/img/material-icons/check-green-20.svg);
+            position: absolute;
+            right: 12px;
+            top: 50%;
+            transform: translateY(-50%);
+
+            @include media-breakpoint-down(md) {
+              right: var(--spacing-04);
+            }
+          }
+        }
+
+        label {
+          width: 100%;
+          font-size: var(--font-size-02);
+          line-height: var(--line-height-02);
+          margin-bottom: var(--spacing-00);
+          font-weight: 400;
+          cursor: pointer;
+          border-radius: var(--border-radius-base-new);
+
+          .list-item-footer {
+            font-size: var(--font-size-01);
+            line-height: var(--line-height-01);
+          }
+        }
+      }
+
+      .plans-new-edu-discount {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--spacing-04);
+        margin-bottom: var(--spacing-06);
+        font-weight: 400;
+
+        input[type='checkbox'] {
+          margin: var(--spacing-02);
+          accent-color: var(--green-50);
+
+          // TODO: this is copied directly from the `.less` file, migrate this to scss
+          // &:focus-visible {
+          //   .box-shadow-button-input();
+          // }
+        }
+
+        .plans-new-edu-discount-content {
+          display: flex;
+          flex-direction: column;
+
+          span {
+            line-height: var(--line-height-03);
+            color: var(--content-primary);
+          }
+
+          small {
+            color: var(--content-secondary);
+            font-size: var(--font-size-01);
+            line-height: var(--line-height-01);
+          }
+        }
+      }
+    }
+  }
+
+  .plans-new-table-body:last-of-type {
+    .plans-new-table-feature-row:last-of-type {
+      .plans-new-table-feature-td.plans-new-table-highlighted-cell {
+        border-bottom: var(--border-width-base) solid var(--green-50);
+      }
+    }
+  }
+
+  .plans-new-table-heading-row {
+    // this means min-height, min-height does not work in table layout
+    // https://stackoverflow.com/questions/7790222
+    height: 64px;
+  }
+
+  .plans-new-table-heading-text {
+    padding: var(--spacing-05) var(--spacing-08) var(--spacing-05)
+      var(--spacing-05);
+    font-weight: 600;
+    font-size: var(--font-size-04);
+    line-height: var(--line-height-03);
+    vertical-align: bottom;
+  }
+
+  .plans-new-table-feature-row {
+    &:nth-child(even) {
+      background-color: var(--bg-light-secondary);
+    }
+  }
+
+  .plans-new-table-section-without-header-row {
+    &:nth-child(odd):not(.plans-new-table-heading-row) {
+      background-color: var(--bg-light-secondary);
+    }
+
+    &:nth-child(even):not(.plans-new-table-heading-row) {
+      background-color: var(--white);
+    }
+  }
+
+  .plans-new-table-feature-th {
+    font-weight: normal;
+    padding: var(--spacing-05) var(--spacing-08) var(--spacing-05)
+      var(--spacing-05);
+
+    .plans-new-table-feature-th-content {
+      line-height: var(--line-height-03);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .plans-new-table-feature-tooltip-icon {
+        cursor: help;
+        margin-left: var(--spacing-05);
+      }
+
+      .tooltip.in {
+        opacity: 1;
+      }
+
+      .tooltip-inner {
+        padding: var(--spacing-04) var(--spacing-06);
+        max-width: 258px;
+        width: 258px;
+        font-family: Lato, sans-serif;
+        font-size: var(--font-size-02);
+        text-align: left;
+        background-color: var(--content-primary);
+        border-radius: var(--border-radius-base-new);
+      }
+    }
+  }
+
+  .plans-new-table-feature-td {
+    padding: var(--spacing-05) var(--spacing-08);
+    text-align: center;
+    line-height: var(--line-height-03);
+
+    .green-round-background {
+      margin-right: 0;
+    }
+  }
+
+  .plans-new-table-highlighted-heading {
+    position: absolute;
+    left: calc(-1 * var(--border-width-base));
+    top: -1 * $highlighted-heading-height;
+    height: $highlighted-heading-height;
+    width: calc(100% + (2 * var(--border-width-base)));
+    border-top-left-radius: var(--border-radius-large-new);
+    border-top-right-radius: var(--border-radius-large-new);
+    padding: $highlighted-heading-padding-vertical var(--spacing-04);
+    font-weight: 600;
+    text-align: center;
+    line-height: $highlighted-heading-line-height;
+    background-color: var(--green-50);
+    color: var(--white);
+    font-size: var(--font-size-03);
+  }
+
+  .plans-new-table-highlighted-cell {
+    border-right: var(--border-width-base) solid var(--green-50);
+    border-left: var(--border-width-base) solid var(--green-50);
+  }
+
+  .plans-new-organizations {
+    padding: var(--spacing-13) var(--spacing-08);
+
+    .plans-new-organizations-text {
+      text-align: center;
+      font-size: var(--font-size-05);
+      line-height: var(--line-height-04);
+      margin-bottom: var(--spacing-00);
+    }
+
+    .plans-new-organizations-logo {
+      margin-top: var(--spacing-09);
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+
+      @include media-breakpoint-down(xl) {
+        flex-wrap: wrap;
+        gap: 30px;
+      }
+    }
+  }
+
+  .plans-card-container-mobile {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-06);
+
+    .mt-spacing-06 {
+      margin-top: var(--spacing-06);
+    }
+
+    .highlighted-plans-card {
+      border: 2px solid var(--green-50) !important;
+    }
+
+    .plans-card-mobile {
+      padding: var(--spacing-09);
+      border: 2px solid var(--border-divider);
+      width: 100%; // might need max-width
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+
+      .plans-card-title-mobile {
+        color: var(--content-primary);
+        font-size: var(--font-size-05); // 20px
+        font-weight: 600;
+        line-height: var(--line-height-04);
+      }
+
+      .plans-card-icon-container-mobile {
+        margin-top: var(--spacing-04);
+
+        .plans-card-icon {
+          font-size: var(--font-size-09);
+          color: var(--content-primary);
+        }
+      }
+
+      s {
+        padding: var(--spacing-04) 0 0 0;
+        color: var(--neutral-60);
+        font-size: var(--font-size-04); // 18px
+        font-weight: 600;
+        line-height: var(--line-height-05);
+        margin-bottom: var(--spacing-04);
+      }
+
+      .plans-card-price-container-mobile {
+        display: flex;
+        align-items: baseline;
+
+        .light-gray-text:has(.billed-annually-disclaimer) {
+          align-self: center;
+        }
+      }
+
+      .group-plans-card-price-container-mobile {
+        display: flex;
+        align-items: center;
+      }
+
+      .plans-card-price-mobile {
+        color: var(--content-primary);
+        font-size: var(--font-size-08); // 36px
+        font-weight: 600;
+        line-height: var(--line-height-07);
+        margin-right: var(--spacing-03);
+      }
+
+      .light-gray-text {
+        color: var(--content-secondary);
+        font-size: var(--font-size-02); // 14px
+        line-height: var(--line-height-02);
+      }
+
+      .plans-card-description-mobile {
+        .green-round-background {
+          width: 20px;
+          height: 20px;
+        }
+
+        .plans-card-description-list-mobile {
+          list-style-type: none;
+          padding-left: 0;
+          margin-bottom: unset;
+
+          li {
+            display: flex;
+            margin-top: var(--spacing-05);
+          }
+        }
+
+        .plans-card-cta-container {
+          margin-top: var(--spacing-08);
+          width: 100%;
+
+          .plans-cta + .plans-cta {
+            margin-top: var(--spacing-04);
+          }
+        }
+      }
+    }
+  }
+
+  .plans-new-group-tab-card-container {
+    margin-top: var(--spacing-09);
+  }
+
+  .plans-features-table-section-container-mobile {
+    margin-top: var(--spacing-13);
+
+    .plans-features-section-heading-mobile {
+      font-size: var(--font-size-06);
+      font-weight: 600;
+      line-height: var(--line-height-05);
+      color: var(--content-primary);
+      text-align: center;
+      margin-bottom: var(--spacing-08);
+    }
+
+    .plans-features-table-mobile {
+      width: 100%;
+
+      .plans-features-table-sticky-header {
+        position: sticky;
+        top: 0;
+      }
+
+      .plans-features-table-header {
+        margin-bottom: var(--space-08);
+      }
+
+      .plans-features-table-header-container-mobile {
+        margin: var(--spacing-08) auto;
+        border-bottom: unset;
+        width: 100%;
+        max-width: 544px;
+
+        .plans-features-table-header-item-mobile {
+          width: 33%;
+          min-width: 114px;
+          padding: unset;
+
+          .plans-features-table-header-item-content-mobile {
+            padding: var(--spacing-04);
+            text-align: center;
+            background-color: var(--bg-light-secondary);
+          }
+
+          .plans-group-features-table-header-item-content-mobile {
+            padding: var(--spacing-04);
+            text-align: center;
+            background-color: var(--bg-light-secondary);
+            height: 64px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+
+          .plans-features-table-header-item-title-mobile {
+            color: var(--content-primary);
+            line-height: var(--line-height-03);
+            font-weight: 600;
+            font-size: var(--font-size-03);
+          }
+
+          .plans-features-table-header-item-price-mobile {
+            font-weight: 400;
+            color: var(--content-secondary);
+            line-height: var(--line-height-01);
+            font-size: var(--spacing-05);
+          }
+        }
+
+        .highlighted-styles {
+          background-color: var(--neutral-80);
+
+          .plans-features-table-header-item-title-mobile,
+          .plans-features-table-header-item-price-mobile {
+            color: var(--white);
+          }
+        }
+
+        .plans-features-table-header-item-content-mobile.highlighted,
+        .plans-group-features-table-header-item-content-mobile.highlighted {
+          background-color: var(--neutral-80);
+
+          .plans-features-table-header-item-title-mobile,
+          .plans-features-table-header-item-price-mobile {
+            color: var(--white);
+          }
+        }
+      }
+
+      tr.plans-features-table-row-for-margin {
+        height: var(--spacing-08);
+      }
+
+      .plans-features-table-body-container-mobile {
+        .plans-features-table-row-heading-mobile {
+          font-weight: 600;
+          text-align: center;
+          line-height: var(--line-height-03);
+
+          .plans-features-table-row-section-heading-content-mobile {
+            padding-top: var(--spacing-08);
+            padding-bottom: var(--spacing-05);
+            font-size: var(--font-size-04);
+            color: var(--content-primary);
+          }
+        }
+
+        // .plans-features-table-row-title-mobile and .plans-features-table-row-mobile are combined together to make one row visually, so we are using factors of 4 to alternatively color their backgrounds.
+        .plans-features-table-row-title-mobile {
+          &.plans-features-table-row-title-mobile-without-heading {
+            &:nth-child(4n - 3) {
+              background-color: var(--bg-light-secondary);
+            }
+
+            &:nth-child(4n - 1) {
+              background-color: var(--white);
+            }
+          }
+
+          &:nth-child(4n - 2) {
+            background-color: var(--bg-light-secondary);
+          }
+
+          &:nth-child(4n) {
+            background-color: var(--white);
+          }
+
+          .plans-features-table-row-title-content-mobile {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding-top: var(--spacing-06);
+            font-weight: 600;
+            line-height: var(--line-height-03);
+
+            .plans-features-table-row-title-accordion {
+              display: flex;
+              justify-content: center;
+              flex-direction: column;
+              align-items: center;
+              text-align: center;
+              padding: 0 var(--spacing-04);
+
+              .plans-features-table-row-title-accordion-header {
+                font-size: var(--font-size-03);
+                font-weight: 600;
+                line-height: var(--line-height-03);
+                display: flex;
+                justify-content: center;
+                background-color: unset;
+                border: unset;
+
+                .plans-features-table-row-title-accordion-icon {
+                  display: flex;
+                  align-items: center;
+                  transition: transform 0.35s ease;
+                  margin-left: var(--spacing-02);
+                }
+
+                &:not(.collapsed) {
+                  .plans-features-table-row-title-accordion-icon {
+                    transform: rotate(180deg);
+                    transition: transform 0.35s ease;
+                  }
+                }
+              }
+
+              .plans-features-table-row-title-accordion-body {
+                font-size: var(--font-size-01);
+                line-height: var(--line-height-01);
+                font-weight: 400;
+              }
+            }
+          }
+        }
+
+        .plans-features-table-row-mobile {
+          &.plans-features-table-row-mobile-without-heading {
+            &:nth-child(4n - 2) {
+              background-color: var(--bg-light-secondary);
+            }
+
+            &:nth-child(4n) {
+              background-color: var(--white);
+            }
+          }
+
+          &:nth-child(4n - 3) {
+            background-color: var(--white);
+          }
+
+          &:nth-child(4n - 1) {
+            background-color: var(--bg-light-secondary);
+          }
+
+          .plans-features-table-cell-content-mobile {
+            text-align: center;
+            padding-top: var(--spacing-05);
+            padding-bottom: var(--spacing-06);
+          }
+        }
+      }
+    }
+  }
+
+  .plans-price-disclaimer {
+    font-size: var(--font-size-01);
+    line-height: var(--line-height-01);
+    margin-top: var(--spacing-08);
+    text-align: center;
+
+    &:last-child {
+      margin-bottom: var(--spacing-11);
+    }
+
+    &:not(:last-child) {
+      margin-bottom: var(--spacing-08);
+    }
+
+    .plans-price-disclaimer-icons {
+      display: flex;
+      justify-content: center;
+      gap: var(--spacing-04);
+    }
+  }
+
+  .only-show-for-specific-plan-type {
+    display: none;
+  }
+
+  &[data-ol-current-plan-type='group'] {
+    .show-for-plan-type-group {
+      display: block;
+    }
+  }
+
+  &[data-ol-current-plan-type='individual'] {
+    .show-for-plan-type-individual {
+      display: block;
+    }
+  }
+
+  &[data-ol-current-plan-type='student'] {
+    .show-for-plan-type-student {
+      display: block;
+    }
+  }
+
+  .only-show-for-specific-plan-period {
+    display: none;
+  }
+
+  &[data-ol-current-plan-period='annual'] {
+    .show-for-plan-period-annual {
+      display: block;
+    }
+  }
+
+  &[data-ol-current-plan-period='monthly'] {
+    .show-for-plan-period-monthly {
+      display: block;
+    }
+  }
+}
+
+.plans-overleaf-common-request {
+  color: var(--content-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: var(--spacing-04) var(--spacing-08);
+  text-align: center;
+  gap: var(--spacing-06);
+
+  @include media-breakpoint-down(md) {
+    flex-direction: column;
+    margin: 0;
+  }
+
+  a {
+    font-size: var(--font-size-02);
+    line-height: var(--line-height-02);
+  }
+}
+
+.plans-faq {
+  .faq-heading-container {
+    text-align: center;
+    margin-bottom: var(--spacing-10);
+
+    @include media-breakpoint-down(md) {
+      text-align: unset;
+    }
+  }
+
+  .plans-faq-support {
+    margin-top: var(--spacing-06);
+    margin-bottom: var(--spacing-06);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-04);
+
+    span {
+      line-height: var(--line-height-03);
+      font-size: var(--font-size-04);
+    }
+
+    button {
+      font-family: 'DM Mono', monospace;
+      font-weight: 500;
+      text-decoration: none;
+      color: var(--green-50);
+      line-height: var(--line-height-03);
+      font-size: var(--font-size-04);
+      background-color: var(--white);
+      border: unset;
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+.plans-new-design.plans-interstitial-new-design {
+  padding-top: $header-height;
+  padding-bottom: var(--spacing-09);
+
+  .plans-interstitial-new-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .plans-new-table {
+    th,
+    td {
+      width: $table-5-column-width;
+    }
+  }
+}
+
+.plans-cta {
+  display: block;
+}
+
+.plans-faq-tabs {
+  max-width: 800px;
+  margin: 0 auto;
+
+  .nav-tabs-container {
+    margin-bottom: var(--spacing-08);
+  }
+
+  .tab-content {
+    margin-top: 0;
+  }
+}