@automattic/plans-grid-next 1.0.2 → 1.0.3

package/src/components/comparison-grid/style.scss

@@ -1,12 +1,20 @@
 @import "../../shared";
 
 .plans-grid-next-comparison-grid {
-	// fixes mobile view cards in features grid not containing content properly
 	min-width: fit-content;
+	border: solid 1px #e0e0e0;
+	background: hsl(0, 0%, 100%);
+	border-radius: 4px;
+	margin: 0 auto;
+
+	> .is-sticky-header-row {
+		border-bottom: solid 1px #e0e0e0;
+		background: #fff;
+	}
 
 	&.has-highlighted-plan {
 		@include plans-grid-medium-large {
-			padding-top: 43px; // enough to cover `plans-grid__popular-badge` repositioning (top: -43px)
+			margin-top: 43px; // enough to cover `plans-grid__popular-badge` repositioning (top: -43px)
 		}
 	}
 

package/src/components/features-grid/client-logo-list/client-list.tsx

@@ -86,17 +86,6 @@ const CLIENT_LIST: Client[] = [
 			</svg>
 		),
 	},
-	{
-		slug: 'time',
-		// translators: Company name
-		name: __( 'Time' ),
-		Logo: ( { title } ) => (
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86 60">
-				<title>{ title }</title>
-				<path d="m39.14 17.51-.52 4.05a1149.38 1149.38 0 0 1-3.9 21.06c-.67.08-1.45.15-1.97.17l-.24.03v.6c.07 0 .4.02.64.01.56-.01 2.17-.1 2.48-.1 1.15 0 1.93.09 3 .1l.43-.01v-.61h-.27c-.3 0-1.42-.08-1.98-.16a418 418 0 0 1 1.52-8.86c.9-4.47 1.52-7.64 1.52-7.64l.17.4 7.1 16.91h1.29s.74-1.83 1.62-3.88l.17-.4c.92-2.14 5.49-12.96 5.49-12.96l.11.54c.44 2.12 1.9 9.77 2.22 11.61l.37 2.48c.12.8.2 1.58.2 1.8-.15.01-1.6.14-2.14.16l-.24.01v.62h.58c1.12-.02 2.2-.1 3.3-.1 1.26 0 3.3.1 4.6.11l.41-.01v-.62l-.52-.03c-.59-.05-1.57-.14-1.82-.15 0 0-.16-.9-.38-1.93-.85-4.13-3.28-16.67-3.65-19.76-.12-1.06-.48-3.44-.48-3.44h-1.46l-1.43 4.09c-.46 1.33-1.1 2.98-1.57 4.24-2.37 6.23-5.03 12.04-5.03 12.04S43.1 24.4 42.8 23.61c-.3-.78-2.15-6.11-2.15-6.11s-.96.02-1.51.01ZM0 17.51l.01 1.42L0 22.4h.38l.04-3.1 2.32-.01H6.6l2.48.01v23.33l-.04.01c-.33.03-1.6.1-2.12.12h-.2v.64h.37c1.23-.01 2.88-.12 4.05-.12 1.2 0 2.87.12 3.9.13h.33v-.6h-.13c-.33 0-2.16-.11-2.35-.14l-.04-1.7.01-21.67h6.81l1.65.02c0 .12.1 1.68.09 1.72 0 .12.06 1.28.06 1.57h.39l-.03-3.5.02-1.59c-1.45.04-5.14.1-10.88.09-4.91 0-9.65-.05-10.96-.1Zm22.96 0v.62c.2 0 1.34.1 1.62.12l.75.08.01 2.09a2604.29 2604.29 0 0 1-.02 22.18c-.14.05-.45.06-.8.08l-1.56.12v.61l.37.02c1.18 0 2.83-.14 4.04-.14 1.23 0 2.86.15 3.82.15l.37-.02v-.62h-.09c-.03 0-1.28-.06-1.58-.09a8.4 8.4 0 0 1-.85-.1v-1.8l.01-20.46v-1.98l1.76-.17.75-.04v-.64c-1.34 0-3.11.1-4.42.1-1.36 0-3.05-.1-4.18-.1Zm61.95.02h-.4l-5.87.04-4.63.02c-1.2.01-2.85.06-3.88.06-1.64 0-2.98-.1-3.71-.11h-.63v.61c.07.01.2.03.31.02a32.44 32.44 0 0 1 2.15.22l.02 2.6-.01 20-.04 1.66c-.65.12-1.9.18-2.33.19h-.13v.6l.5.02c.69 0 2.46-.11 4.27-.12 1.27 0 2.67.05 4.08.07 1.74.03 3.5.03 5.09.05 2.61.04 4.73.04 5.41.04l.09-5.23h-.38c0 .41-.15 1.95-.16 2.01-.05.58-.1 1.19-.14 1.49h-.27c-.43 0-1.8.05-1.83.05h-6.11l-4.3-.07-.02-1.19v-9.24a81.1 81.1 0 0 1 2.64-.07l2.83-.03c1.93 0 3.66.02 3.8.02.31 0 .9.03 1.13.04 0 .08.04.21.04.25.11.7.18 1.2.25 1.89l.03.18h.44v-.4c0-.55-.04-1.64-.04-2.84 0-.84.05-2.11.06-2.73l-.02-.33-.4.01c0 .13-.04.33-.04.33-.03.46-.16 1.04-.27 1.66l-.05.18c-.04.02-1.3.09-1.42.08l-1.91.06-7.07-.03v-10.2s.9-.03 1.16-.02l4.36-.01c2.48 0 4.88.02 4.88.02l.76.03 1.16.05.03.17c.1 1.08.18 2.35.22 2.8v.19h.38l-.04-3.98v-1.11Z" />
-			</svg>
-		),
-	},
 	{
 		slug: 'intuit',
 		// translators: Company name
@@ -119,20 +108,6 @@ const CLIENT_LIST: Client[] = [
 			</svg>
 		),
 	},
-	{
-		slug: 'chevron',
-		// translators: Company name
-		name: __( 'Chevron' ),
-		Logo: ( { title } ) => (
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 60">
-				<title>{ title }</title>
-				<path
-					fillRule="evenodd"
-					d="m27.04 11-2.5-7.41h2.5l1.35 5.24h.05l1.35-5.24h2.5l-2.5 7.4h-2.75Zm-18.97-.13c-.4.2-1.2.44-2.41.44A4.97 4.97 0 0 1 .4 6.09C.41 2.61 2.85.77 5.88.77c1.17 0 1.8.22 2.19.44L7.7 3.29a3.9 3.9 0 0 0-1.73-.38C4.53 2.91 3 3.77 3 6.05 3 8.1 4.22 9.18 5.98 9.18c.7 0 1.17-.14 1.72-.39l.37 2.08Zm24.86-4.84c0-1.1-.04-1.8-.08-2.44h2.12l.07 1.38h.05c.38-1.1 1.1-1.5 1.82-1.55.35-.02.54 0 .76.05v2.16c-.2-.04-.62-.08-.9-.06-.88.08-1.4.71-1.55 1.44a2.9 2.9 0 0 0-.05.51V11h-2.24V6.03Zm-10.8.4c0-.56-.27-1.53-1.32-1.53-.92 0-1.35.79-1.41 1.52h2.73Zm-2.72 1.6c.09.95.88 1.46 2.1 1.47.73 0 1.59-.21 2.16-.55l.34 1.76c-.86.43-1.84.6-2.83.6-2.7 0-4.13-1.62-4.13-4.1 0-2.39 1.55-3.93 3.87-3.93 2.39 0 3.46 1.76 3.46 3.96 0 .24-.02.61-.05.8H19.4Zm23.85-.74c0-1.2-.41-2.25-1.49-2.25s-1.5 1.05-1.5 2.25.42 2.26 1.5 2.26 1.5-1.05 1.5-2.26m2.34 0c0 2.43-1.47 4.02-3.84 4.02s-3.83-1.6-3.83-4.02c0-2.43 1.46-4.02 3.83-4.02s3.84 1.6 3.84 4.02m1-1.34c0-.92-.04-1.71-.09-2.36h2.14l.05 1.03h.04a2.74 2.74 0 0 1 2.3-1.27c1.48 0 2.45 1.02 2.45 3.2V11h-2.26V6.9c0-.96-.32-1.62-1.14-1.62-.62 0-1.01.44-1.16.87-.05.15-.07.36-.07.57V11H46.6V5.95Zm-33-2.6c-.9 0-1.77.41-2.21 1.06h-.03V.81l-2.26.78v9.4h2.26V6.6c0-.63.41-1.32 1.2-1.32.85 0 1.18.67 1.18 1.64V11H16V6.6c0-2.23-.97-3.25-2.4-3.25M.5 33.5l24.69 8.23L2.95 50.4 27 42.33l26.5-8.83v17.67L27 60 .5 51.17V33.5Zm0-20.54 24.69 8.23-22.24 8.66L27 21.8l26.5-8.84v17.67L27 39.47.5 30.64V12.96Z"
-				/>
-			</svg>
-		),
-	},
 	{
 		slug: 'al-jazeera',
 		// translators: Company name

package/src/components/features-grid/index.tsx

@@ -16,7 +16,6 @@ import { PlanFeaturesItem } from '../item';
 import { PlanStorage } from '../shared/storage';
 import BillingTimeframes from './billing-timeframes';
 import EnterpriseFeatures from './enterprise-features';
-import MobileFreeDomain from './mobile-free-domain';
 import PlanFeaturesList from './plan-features-list';
 import PlanHeaders from './plan-headers';
 import PlanLogos from './plan-logos';
@@ -34,6 +33,7 @@ import type {
 	GridSize,
 	PlanActionOverrides,
 } from '../../types';
+import type { JSX } from 'react';
 
 import './style.scss';
 
@@ -118,7 +118,7 @@ const MobileView = ( {
 	enableShowAllFeaturesButton,
 }: MobileViewProps ) => {
 	const translate = useTranslate();
-	const { featureGroupMap } = usePlansGridContext();
+	const { featureGroupMap, hideFeatureGroupTitles, intent } = usePlansGridContext();
 	const featureGroups = useMemo(
 		() =>
 			Object.keys( featureGroupMap ).filter(
@@ -166,22 +166,37 @@ const MobileView = ( {
 				<div className={ planCardClasses } key={ `${ gridPlan.planSlug }-${ index }` }>
 					<PlanLogos renderedGridPlans={ [ gridPlan ] } isInSignup={ false } />
 					<PlanHeaders renderedGridPlans={ [ gridPlan ] } />
-					{ isNotFreePlan && isInSignup && <PlanTagline renderedGridPlans={ [ gridPlan ] } /> }
-					{ isNotFreePlan && (
+					{ isInSignup && <PlanTagline renderedGridPlans={ [ gridPlan ] } /> }
+					{ ( isNotFreePlan || isInSignup ) && (
 						<PlanPrices
 							renderedGridPlans={ [ gridPlan ] }
 							currentSitePlanSlug={ currentSitePlanSlug }
 						/>
 					) }
-					{ isNotFreePlan && <BillingTimeframes renderedGridPlans={ [ gridPlan ] } /> }
-					<MobileFreeDomain gridPlan={ gridPlan } paidDomainName={ paidDomainName } />
+					{ ( isNotFreePlan || isInSignup ) && (
+						<BillingTimeframes renderedGridPlans={ [ gridPlan ] } />
+					) }
+					<TopButtons
+						renderedGridPlans={ [ gridPlan ] }
+						isInSignup={ isInSignup }
+						currentSitePlanSlug={ currentSitePlanSlug }
+						planActionOverrides={ planActionOverrides }
+					/>
 					{ storageFeatureGroup && ! isEnterprisePlan && (
 						<>
-							<PlanFeaturesItem>
-								<h2 className="plans-grid-next-features-grid__feature-group-title">
-									{ storageFeatureGroup?.getTitle() }
-								</h2>
-							</PlanFeaturesItem>
+							{ ! hideFeatureGroupTitles && 'plans-wordpress-hosting' !== intent && (
+								<PlanFeaturesItem>
+									<h2
+										className={ clsx( 'plans-grid-next-features-grid__feature-group-title', {
+											// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+											// @ts-ignore
+											'is-wordpress-hosting': 'plans-wordpress-hosting' === intent,
+										} ) }
+									>
+										{ storageFeatureGroup?.getTitle() }
+									</h2>
+								</PlanFeaturesItem>
+							) }
 							<div className="plan-features-2023-grid__highlighted-feature">
 								<PlanFeaturesItem>
 									<PlanStorage
@@ -193,12 +208,6 @@ const MobileView = ( {
 							</div>
 						</>
 					) }
-					<TopButtons
-						renderedGridPlans={ [ gridPlan ] }
-						isInSignup={ isInSignup }
-						currentSitePlanSlug={ currentSitePlanSlug }
-						planActionOverrides={ planActionOverrides }
-					/>
 					{ enableShowAllFeaturesButton ? (
 						<CardContainer
 							header={ translate( 'Show all features' ) }
@@ -388,6 +397,9 @@ const WrappedFeaturesGrid = ( props: FeaturesGridExternalProps ) => {
 		hideFeatureGroupTitles,
 		enterpriseFeaturesList,
 		enableTermSavingsPriceDisplay,
+		showSimplifiedBillingDescription,
+		showBillingDescriptionForIncreasedRenewalPrice,
+		isExperimentVariant,
 	} = props;
 
 	const gridContainerRef = useRef< HTMLDivElement >( null );
@@ -404,7 +416,7 @@ const WrappedFeaturesGrid = ( props: FeaturesGridExternalProps ) => {
 		}
 
 		// we want to fit 3 plans per row in this breakpoint
-		const mediumBreakpoint = isInSiteDashboard ? 667 : 741;
+		const mediumBreakpoint = 669;
 
 		return new Map< GridSize, number >( [
 			[ 'small', 0 ],
@@ -445,6 +457,11 @@ const WrappedFeaturesGrid = ( props: FeaturesGridExternalProps ) => {
 				featureGroupMap={ featureGroupMap }
 				enterpriseFeaturesList={ enterpriseFeaturesList }
 				enableTermSavingsPriceDisplay={ enableTermSavingsPriceDisplay }
+				showSimplifiedBillingDescription={ showSimplifiedBillingDescription }
+				showBillingDescriptionForIncreasedRenewalPrice={
+					showBillingDescriptionForIncreasedRenewalPrice
+				}
+				isExperimentVariant={ isExperimentVariant }
 			>
 				<FeaturesGrid { ...props } gridSize={ gridSize ?? undefined } />
 			</PlansGridContextProvider>

package/src/components/features-grid/plan-features-list.tsx

@@ -6,6 +6,7 @@ import {
 } from '@automattic/calypso-products';
 import { JetpackLogo } from '@automattic/components';
 import { AddOns } from '@automattic/data-stores';
+import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
 import { useMemo } from 'react';
 import { usePlansGridContext } from '../../grid-context';
@@ -55,7 +56,7 @@ const PlanFeaturesList = ( {
 }: PlanFeaturesListProps ) => {
 	const [ activeTooltipId, setActiveTooltipId ] = useManageTooltipToggle();
 	const translate = useTranslate();
-	const { featureGroupMap, hideFeatureGroupTitles } = usePlansGridContext();
+	const { featureGroupMap, hideFeatureGroupTitles, intent } = usePlansGridContext();
 	const featureGroup = featureGroupSlug && featureGroupMap[ featureGroupSlug ];
 
 	/**
@@ -88,9 +89,15 @@ const PlanFeaturesList = ( {
 						isTableCell={ options?.isTableCell }
 						className="plan-features-2023-grid__table-item"
 					>
-						{ ! hideFeatureGroupTitles && (
+						{ ! hideFeatureGroupTitles && 'plans-wordpress-hosting' !== intent && (
 							<PlanFeaturesItem>
-								<h2 className="plans-grid-next-features-grid__feature-group-title">
+								<h2
+									className={ clsx( 'plans-grid-next-features-grid__feature-group-title', {
+										// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+										// @ts-ignore
+										'is-wordpress-hosting': 'plans-wordpress-hosting' === intent,
+									} ) }
+								>
 									{ featureGroup?.getTitle() }
 								</h2>
 							</PlanFeaturesItem>
@@ -136,7 +143,11 @@ const PlanFeaturesList = ( {
 				>
 					{ ! hideFeatureGroupTitles && featureGroup?.getTitle() && (
 						<PlanFeaturesItem>
-							<h2 className="plans-grid-next-features-grid__feature-group-title">
+							<h2
+								className={ clsx( 'plans-grid-next-features-grid__feature-group-title', {
+									'is-wordpress-hosting': intent === 'plans-wordpress-hosting',
+								} ) }
+							>
 								{ featureGroup.getTitle() }
 							</h2>
 						</PlanFeaturesItem>

package/src/components/features-grid/plan-headers.tsx

@@ -7,11 +7,13 @@ type PlanHeadersProps = {
 	renderedGridPlans: GridPlan[];
 	options?: {
 		isTableCell?: boolean;
+		isHeader?: boolean;
+		scope?: string;
 	};
 };
 
 const PlanHeaders = ( { options, renderedGridPlans }: PlanHeadersProps ) => {
-	return renderedGridPlans.map( ( { planSlug, planTitle } ) => {
+	return renderedGridPlans.map( ( { planSlug, planTitle, titleBadge } ) => {
 		const headerClasses = clsx( 'plan-features-2023-grid__header', getPlanClass( planSlug ) );
 
 		return (
@@ -19,10 +21,15 @@ const PlanHeaders = ( { options, renderedGridPlans }: PlanHeadersProps ) => {
 				key={ planSlug }
 				className="plan-features-2023-grid__table-item"
 				isTableCell={ options?.isTableCell }
+				scope={ options?.scope }
+				isHeader={ options?.isHeader }
 			>
-				<header className={ headerClasses }>
+				<div role="columnheader" className={ headerClasses }>
 					<h4 className="plan-features-2023-grid__header-title">{ planTitle }</h4>
-				</header>
+					{ titleBadge && (
+						<span className="plan-features-2023-grid__header-badge">{ titleBadge }</span>
+					) }
+				</div>
 			</PlanDivOrTdContainer>
 		);
 	} );

package/src/components/features-grid/plan-tagline.tsx

@@ -16,7 +16,7 @@ const PlanTagline = ( { options, renderedGridPlans }: PlanTaglineProps ) => {
 				className="plan-features-2023-grid__table-item"
 				isTableCell={ options?.isTableCell }
 			>
-				<div className="plan-features-2023-grid__header-tagline">{ tagline }</div>
+				<p className="plan-features-2023-grid__header-tagline">{ tagline }</p>
 			</PlanDivOrTdContainer>
 		);
 	} );

package/src/components/features-grid/style.scss

@@ -9,13 +9,18 @@
 	background-color: var(--color-surface);
 	justify-content: flex-start;
 	font-weight: 400;
+
+	&.is-woo-hosted-basic-plan {
+		align-items: center;
+		gap: 12px;
+	}
 }
 
 .plan-features-2023-grid__header-logo {
 	padding-left: 20px;
 
 	@include plans-grid-medium-large {
-		margin-top: 36px;
+		margin-top: 32px;
 	}
 
 	.plan-features-2023-grid__table-top & {
@@ -115,10 +120,6 @@
 	}
 }
 
-.plans-grid-next-features-grid__mobile-plan-card-no-foldable-container {
-	margin-top: 24px;
-}
-
 .plan-features-2023-grid__mobile-view {
 	display: flex;
 	flex-direction: column;
@@ -130,9 +131,8 @@
 	.plans-grid-next-features-grid__mobile-plan-card {
 		background-color: var(--studio-white);
 		border: 1px solid #e0e0e0;
-		/* stylelint-disable-next-line */
-		border-radius: 5px;
-		padding: 38px 0 20px 0;
+		border-radius: 4px;
+		padding: 20px 0 20px 0;
 
 		/*
 		 * TODO: Remove/refactor this once we have a better way to handle.
@@ -154,10 +154,42 @@
 				padding-top: 0;
 			}
 		}
+
+		.plan-features-2023-grid__header,
+		.plan-features-2023-grid__header-logo,
+		.plans-grid-next-header-price,
+		.plan-features-2023-grid__header-tagline,
+		.plan-features-2023-grid__header-billing-info,
+		.plan-features-2023-grid__table-item.is-top-buttons,
+		.plan-features-2023-grid__item {
+			padding-inline: 16px;
+		}
+	}
+
+	.plans-grid-next-storage-feature-label__volume {
+		font-size: 14px;
+		font-weight: 500;
 	}
 
 	.plan-features-2023-grid__highlighted-feature .plan-features-2023-grid__item {
-		padding-bottom: 24px;
+		padding-top: 16px;
+	}
+
+	.plan-features-2023-grid__header-title {
+		line-height: normal;
+	}
+
+	.plan-features-2023-grid__table-item .is-experiment-last-feature {
+		margin-block-end: 0;
+	}
+
+	.plan-features-2023-grid__header {
+		padding-block-end: 0;
+	}
+
+	.plan-features-2023-grid__header-tagline {
+		font-size: 14px;
+		padding: 0 20px 16px 20px
 	}
 }
 
@@ -166,7 +198,7 @@
 	color: var(--color-text-subtle);
 	table-layout: fixed;
 	border: 1px solid #e0e0e0;
-	border-radius: 5px; /* stylelint-disable-line */
+	border-radius: 4px;
 	background-color: #fff;
 	margin: 0 auto;
 	border-spacing: 0;
@@ -205,12 +237,25 @@
 	letter-spacing: 0;
 }
 
+.plan-features-2023-grid__header-badge {
+	background-color: var(--studio-blue-5);
+	color: var(--studio-blue-50);
+	border-radius: 3px;
+	display: inline-block;
+	font-size: $font-body-extra-small;
+	font-weight: 500;
+	line-height: 20px;
+	padding: 0 8px;
+	white-space: nowrap;
+}
+
 .plan-features-2023-grid__header-tagline {
 	font-size: $font-body;
 	line-height: 24px;
 	color: var(--studio-gray-80);
 	font-weight: 400;
 	padding: 0 20px 24px 20px;
+	margin-bottom: 0;
 
 	@include plans-grid-medium-large {
 		font-size: $font-body-small;
@@ -238,6 +283,10 @@
 		font-weight: 600;
 	}
 
+	.is-plan-differentiators-experiment & .has-min-height {
+		min-height: 32px;
+	}
+
 	&.is-top-buttons {
 		padding: 0 20px;
 		@include plans-grid-medium-large {
@@ -251,7 +300,7 @@
 	@include plans-grid-medium-large {
 		// The .plan-features-2023-grid__table-item is used to render the plan spotlight which doesn't
 		// use a table layout, but borders are only appropriate in table layout.
-		&:is(td) {
+		&:is(td, th) {
 			border-left: solid 1px #e0e0e0;
 		}
 	}
@@ -270,10 +319,9 @@
 	max-width: 100%;
 	margin-bottom: 64px;
 	border: 1px solid #e0e0e0;
-	/* stylelint-disable-next-line scales/radii */
-	border-radius: 5px;
-    display: flex;
-    justify-content: space-between;
+	border-radius: 4px;
+	display: flex;
+	justify-content: space-between;
 
 	div.spotlight-plan__buttons  {
 		display: flex;
@@ -318,6 +366,11 @@
 .plans-grid-next-features-grid__feature-group-title {
 	font-weight: 600;
 	color: var(--studio-gray-80);
+
+	&.is-wordpress-hosting {
+		padding-top: 12px;
+		font-size: 12px;
+	}
 }
 
 .plans-grid-next-features-grid__feature-group-row {
@@ -346,13 +399,20 @@
 	flex: 1 0 0;
 	width: 100%;
 
+	.plan-features-2023-grid__ai-website-builder-break {
+		@media ( max-width: 480px ) {
+			display: none;
+		}
+	}
+
 	.plan-features-2023-grid__item-title {
 		color: var(--studio-gray-80);
 		font-size: $font-body-small;
 		font-weight: 400;
 		line-height: 20px;
 		overflow-wrap: break-word;
-		text-wrap: balance;
+		text-wrap: balance; // Fallback until Safari supports `pretty`.
+		text-wrap: pretty;
 		margin: 0;
 		flex: 1 0 0;
 		width: 100%;
@@ -361,6 +421,12 @@
 			font-weight: 600;
 		}
 
+		// Experiment variants: domain included text gets green color
+		// Applies to variants with "Everything in X, plus:" features (not focused long-list or control)
+		&.is-domain-included-highlight {
+			color: var(--studio-green-60);
+		}
+
 		@include plans-grid-medium-large {
 			font-size: $font-body-extra-small;
 			line-height: 16px;
@@ -383,6 +449,11 @@
 	}
 }
 
+// Pricing differentiators experiment (non-control): extra bottom margin after last feature in column
+.plan-features-2023-grid__table-item .is-experiment-last-feature {
+	margin-block-end: 37px;
+}
+
 .plan-features-2023-grid__row:last-of-type .plan-features-2023-grid__table-item {
 	border-bottom: solid 1px var(--color-neutral-5);
 
@@ -397,6 +468,10 @@
 	padding: 0 20px 12px;
 	text-align: left;
 
+	.is-plan-differentiators-experiment & {
+		padding-inline-end: 12px;
+	}
+
 	&.plan-features-2023-grid__item-available {
 		display: flex;
 		flex-direction: column;
@@ -478,13 +553,17 @@
 	// the alternative (oveflow: auto) would break the sticky behavior on the headers
 	padding: 1px;
 
+	&.is-small {
+		padding: 0;
+	}
+
 	.plan-features-2023-grid__table-item {
 		border-right: none;
 		background-color: transparent;
 
-		// The extra `:is(td)` is needed so this rule is at the same specificity as the rule
-		// which originally added the border-left, which uses an `:is` selector.
-		&:first-of-type:is(td) {
+		// Match both `td` and `th` so the first header cell has its border-left removed too;
+		// the `:is()` keeps the specificity aligned with the rule that adds the border-left above.
+		&:first-of-type:is(td, th) {
 			border-left: none;
 		}
 
@@ -613,3 +692,12 @@
 		}
 	}
 }
+
+// Conditional styles for visual split layout (website-builder and wordpress-hosting intents)
+.plans-features-main__group.is-visual-split-layout {
+	.plans-grid-next-features-grid__feature-group-row {
+		&:last-child > .plan-features-2023-grid__table-item {
+			padding-bottom: 18px;
+		}
+	}
+}

package/src/components/features-grid/table.tsx

@@ -91,7 +91,7 @@ const Table = ( {
 			<caption className="plan-features-2023-grid__screen-reader-text screen-reader-text">
 				{ translate( 'Available plans to choose from' ) }
 			</caption>
-			<tbody>
+			<thead>
 				<tr>
 					<PlanLogos
 						renderedGridPlans={ gridPlansWithoutSpotlight }
@@ -102,9 +102,11 @@ const Table = ( {
 				<tr>
 					<PlanHeaders
 						renderedGridPlans={ gridPlansWithoutSpotlight }
-						options={ { isTableCell: true } }
+						options={ { isHeader: true, scope: 'col' } }
 					/>
 				</tr>
+			</thead>
+			<tbody>
 				<tr>
 					<PlanTagline
 						renderedGridPlans={ gridPlansWithoutSpotlight }

package/src/components/features.tsx

@@ -1,4 +1,9 @@
-import { getPlanClass, FEATURE_CUSTOM_DOMAIN, isFreePlan } from '@automattic/calypso-products';
+import {
+	getPlanClass,
+	FEATURE_AI_WEBSITE_BUILDER,
+	FEATURE_CUSTOM_DOMAIN,
+	isFreePlan,
+} from '@automattic/calypso-products';
 import { LoadingPlaceholder } from '@automattic/components';
 import styled from '@emotion/styled';
 import clsx from 'clsx';
@@ -22,6 +27,31 @@ const SubdomainSuggestion = styled.div`
 	}
 `;
 
+// Pricing differentiation pills — colors match @automattic/components Badge type="info-green" (.badge--info-green).
+const FeatureBadge = styled.span`
+	display: inline-flex;
+	padding: 0 6px;
+	justify-content: center;
+	align-items: center;
+	gap: 8px;
+	border-radius: 4px;
+	background-color: rgba( 184, 230, 191, 0.64 );
+	color: var( --studio-green-80 );
+	text-align: center;
+	font-size: 11px;
+	font-weight: 600;
+	line-height: inherit;
+	margin-inline-start: 8px;
+	vertical-align: baseline;
+	text-decoration: none;
+	white-space: nowrap;
+
+	@media ( max-width: 480px ) {
+		padding: 0 4px;
+		margin-inline-start: 6px;
+	}
+`;
+
 const FreePlanCustomDomainFeature: React.FC< {
 	paidDomainName: string;
 	generatedWPComSubdomain?: DataResponse< { domain_name: string } >;
@@ -72,7 +102,7 @@ const PlanFeatures2023GridFeatures: React.FC< {
 	setActiveTooltipId,
 } ) => {
 	const translate = useTranslate();
-	const { enableFeatureTooltips } = usePlansGridContext();
+	const { enableFeatureTooltips, gridPlans, isExperimentVariant } = usePlansGridContext();
 
 	return (
 		<>
@@ -96,8 +126,27 @@ const PlanFeatures2023GridFeatures: React.FC< {
 					  ( currentFeature.getSlug() === FEATURE_CUSTOM_DOMAIN && paidDomainName ) ||
 					  ! currentFeature.availableForCurrentPlan;
 
+				const featureSlug = currentFeature.getSlug();
+				const shouldBreakAfterAiWebsiteBuilderTitle =
+					gridPlans.length === 6 && featureSlug === FEATURE_AI_WEBSITE_BUILDER;
+				const featuresWithMinHeight = [
+					'support-from-experts',
+					'priority-24-7-support',
+					'upload-video',
+				];
+
+				// Apply green styling for domain feature in the rolled-out cohort.
+				const isCustomDomainFeatureWithPaidDomain =
+					currentFeature.getSlug() === FEATURE_CUSTOM_DOMAIN &&
+					paidDomainName &&
+					! isFreePlan( planSlug );
+				const shouldHighlightDomainFeature =
+					isCustomDomainFeatureWithPaidDomain && isExperimentVariant;
+
 				const divClasses = clsx( '', getPlanClass( planSlug ), {
 					'is-last-feature': featureIndex + 1 === features.length,
+					'has-min-height': featuresWithMinHeight.includes( featureSlug ),
+					'is-experiment-last-feature': currentFeature.isExperimentLastFeature,
 				} );
 				const spanClasses = clsx( 'plan-features-2023-grid__item-info', {
 					'is-annual-plan-feature': currentFeature.availableOnlyForAnnualPlans,
@@ -106,6 +155,7 @@ const PlanFeatures2023GridFeatures: React.FC< {
 				} );
 				const itemTitleClasses = clsx( 'plan-features-2023-grid__item-title', {
 					'is-bold': isHighlightedFeature,
+					'is-domain-included-highlight': shouldHighlightDomainFeature,
 				} );
 
 				return (
@@ -142,13 +192,23 @@ const PlanFeatures2023GridFeatures: React.FC< {
 											id={ key }
 										>
 											<>
-												{ currentFeature.getTitle( {
-													domainName: paidDomainName,
-												} ) }
+												<span className="plan-features-2023-grid__item-text-content">
+													{ currentFeature.getTitle( {
+														domainName: paidDomainName,
+													} ) }
+													{ currentFeature.badgeText && (
+														<FeatureBadge>{ currentFeature.badgeText }</FeatureBadge>
+													) }
+												</span>
+												{ shouldBreakAfterAiWebsiteBuilderTitle && (
+													<div className="plan-features-2023-grid__ai-website-builder-break">
+														{ '\u00A0' }
+													</div>
+												) }
 												{ currentFeature?.getSubFeatureObjects?.()?.length ? (
 													<ul className="plan-features-2023-grid__item-sub-feature-list">
 														{ currentFeature.getSubFeatureObjects().map( ( subFeature ) => (
-															<li>{ subFeature?.getTitle() }</li>
+															<li key={ subFeature.getSlug() }>{ subFeature?.getTitle() }</li>
 														) ) }
 													</ul>
 												) : null }

package/src/components/item.tsx

@@ -1,8 +1,11 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 
-export function PlanFeaturesItem( props: { children?: ReactNode } ) {
+export function PlanFeaturesItem( props: { children?: ReactNode; style?: CSSProperties } ) {
 	return (
-		<div className="plan-features-2023-grid__item plan-features-2023-grid__item-available">
+		<div
+			className="plan-features-2023-grid__item plan-features-2023-grid__item-available"
+			style={ props.style }
+		>
 			<div className="plan-features-2023-grid__item-info-container">{ props.children }</div>
 		</div>
 	);