@import '@automattic/onboarding/styles/mixins';
@import '@wordpress/base-styles/breakpoints';

.step-route.plans:not( :has( .step-container-v2 ) ) {
	padding: 60px 0 0;
	@include break-xlarge {
		padding: 0;
	}

	.plans.plans-step {
		.step-container {
			padding-bottom: 80px;

			h1.formatted-header__title {
				font-size: 2.25rem;
				padding: 0 20px;
				text-align: center;
				letter-spacing: 0.2px;

				@include break-mobile {
					font-size: 2.75rem;
					/* stylelint-disable-next-line declaration-property-unit-allowed-list */
					line-height: 3rem;
				}
			}
		}
	}
}

.step-container-v2:has( .step-container-v2--plans ) {
	.plans-wrapper {
		margin: 0;
		padding: 0;
	}

	// This is temporary until we make the plans step more consistent according to the designs.
	@media ( max-width: calc($break-small - 1px) ) {
		.plans-features-main .plans-features-main__subheader {
			text-align: left;
		}
	}

	@media ( max-width: calc($break-medium - 1px) ) {
		.plan-type-selector {
			width: 100%;
		}

		.plan-features-2023-grid__mobile-view,
		.plan-features-main__comparison-toggle {
			max-width: 100%;
		}

		.plans-features-main__plan-type-selector-layout {
			margin: 0;
		}
	}
}
