/* =========================================================
   Glossary Tooltip Pricing Page
   ========================================================= */

.pricing-page {
	--pricing-deep: #09271c;
	--pricing-forest: #123c2c;
	--pricing-green: #2c7a4b;
	--pricing-lime: #b9f35a;
	--pricing-lime-hover: #cdfb80;
	--pricing-paper: #f7f9f5;
	--pricing-mist: #eef3ed;
	--pricing-white: #ffffff;
	--pricing-ink: #10271e;
	--pricing-soft: #5f7067;
	--pricing-line: #d8e1d6;
	--pricing-shadow: 0 18px 50px rgba(9,39,28,.09);

	width: 100%;
	margin-top: 20px
}


/* =========================================================
   Global
   ========================================================= */

.pricing-page > * {
	max-width: 1180px;
	margin-right: auto;
	margin-left: auto;
}

.pricing-page > .wp-block-columns,
.pricing-page > .wp-block-table {
	width: min(calc(100% - 64px),1180px);
}

.pricing-page h1,
.pricing-page h2,
.pricing-page h3 {
	color: var(--pricing-ink);
	letter-spacing: -.025em;
}

.pricing-page p {
	color: var(--pricing-soft);
}

.pricing-page a {
	color: var(--pricing-green);
}

.pricing-page a:hover {
	color: var(--pricing-forest);
}


/* =========================================================
   Page Intro
   ========================================================= */

.pricing-page > .wp-block-group:first-child {
	max-width: 850px;
	padding: 85px 25px 60px;
	text-align: center;
}

.pricing-page > .wp-block-group:first-child h1 {
	max-width: 850px;
	margin: 0 auto 22px;
	font-size: clamp(42px,5.5vw,68px);
	line-height: 1.05;
}

.pricing-page > .wp-block-group:first-child > p {
	max-width: 760px;
	margin: 0 auto;
	font-size: 19px;
	line-height: 1.7;
}


/* =========================================================
   Pricing Table
   ========================================================= */

.pricing-page > .pricing-table {
	display: flex;
	align-items: stretch;
	gap: 18px;
	margin-top: 0;
	margin-bottom: 0;
}


/* =========================================================
   Pricing Cards
   ========================================================= */

.pricing-table > .wp-block-column {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	overflow: hidden;

	padding: 0 30px 30px !important;

	border: 1px solid var(--pricing-line);
	border-radius: 6px;

	background: #fff !important;
	color: var(--pricing-ink) !important;

	box-shadow: 0 8px 30px rgba(9,39,28,.06);

	transition:
		transform .25s ease,
		box-shadow .25s ease,
		border-color .25s ease;
}

.pricing-table > .wp-block-column:hover {
	transform: translateY(-5px);
	border-color: #b9cbbb;
	box-shadow: var(--pricing-shadow);
}


/* =========================================================
   Colored Header
   ========================================================= */

.pricing-table > .wp-block-column::before {
	content: "";
	display: block;
	height: 205px;
	margin: 0 -30px -30px;
}


/* Pro */
.pricing-table > .wp-block-column:nth-child(1)::before {
	background: #f7941d;
}


/* Pro+ */
.pricing-table > .wp-block-column:nth-child(2)::before {
	background: #7bc950;
}


/* Advanced */
.pricing-table > .wp-block-column:nth-child(3)::before {
	background: #43951f;
}


/* Agency */
.pricing-table > .wp-block-column:nth-child(4)::before {
	background: #2f7f1d;
}


/* =========================================================
   Plan Heading
   ========================================================= */

.pricing-table > .wp-block-column h3 {
	margin: -145px 0 12px;
	color: #fff !important;
	font-size: 29px !important;
	line-height: 1.15;
	text-align: center;
}


/* =========================================================
   Description
   ========================================================= */

.pricing-table > .wp-block-column h3 + p {
	min-height: 48px;
	margin: 0 0 8px;
	color: rgba(255,255,255,.96) !important;
	font-size: 17px;
	line-height: 1.35;
	text-align: center;
}


/* =========================================================
   Price
   ========================================================= */

.pricing-table > .wp-block-column p[style*="42px"] {
	margin: 0 0 25px;
	color: #fff !important;
	font-size: 48px !important;
	font-weight: 800 !important;
	line-height: 1;
	text-align: center;
	letter-spacing: -.03em;
}

.pricing-table > .wp-block-column p[style*="42px"] span {
	color: rgba(255,255,255,.95) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	letter-spacing: 0;
}


/* =========================================================
   MOST POPULAR — Existing Text
   ========================================================= */

.pricing-table > .wp-block-column:nth-child(3) {
	border: 2px solid #43951f;
	box-shadow: 0 20px 55px rgba(9,39,28,.16);
	transform: translateY(-16px);
}

.pricing-table > .wp-block-column:nth-child(3):hover {
	transform: translateY(-20px);
}

/* =========================================================
   MOST POPULAR — Existing Text
   ========================================================= */

.pricing-table > .wp-block-column:nth-child(3) {
	overflow: visible;
}

.pricing-table > .wp-block-column:nth-child(3) > p:first-child {
	position: absolute;
	top: -14px;
	left: 50%;
	z-index: 10;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 28px;
	margin: 0;
	padding: 6px 15px;

	border-radius: 999px;

	background: #ff8a1c;
	color: #fff !important;

	font-size: 11px !important;
	font-weight: 600 !important;
	line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;

	transform: translateX(-50%);

	box-sizing: border-box;
}

/* =========================================================
   Separator
   ========================================================= */

.pricing-table > .wp-block-column hr {
	margin: 0 0 23px;
	border-color: rgba(255,255,255,.28);
	opacity: 1;
}


/* =========================================================
   Feature List
   ========================================================= */

.pricing-table > .wp-block-column ul {
	flex: 1;
	margin: 0 0 30px;
	padding-left: 21px;
	font-size: 15px;
	line-height: 1.55;
}

.pricing-table > .wp-block-column li {
	margin-bottom: 9px;
}

.pricing-table > .wp-block-column li::marker {
	color: rgba(255,255,255,.85);
}


/* =========================================================
   Pricing Buttons
   ========================================================= */

.pricing-page .pricing-button {
	width: 100%;
	margin-top: auto;
}

.pricing-page .pricing-button .wp-element-button {
	display: block;
	width: 100%;

	padding: 14px 20px;

	border: 1px solid #111;
	border-radius: 5px;

	background: #111;
	color: #fff;

	font-size: 15px;
	font-weight: 750;
	line-height: 1.3;
	text-align: center;

	transition:
		background-color .2s ease,
		color .2s ease,
		transform .2s ease,
		border-color .2s ease;
}

.pricing-page .pricing-button .wp-element-button:hover {
	border-color: var(--pricing-deep);
	background: var(--pricing-deep);
	color: #fff;
	transform: translateY(-2px);
}


/* Advanced Button */
.pricing-table > .wp-block-column:nth-child(3) .pricing-button .wp-element-button {
	border-color: var(--pricing-lime);
	background: var(--pricing-lime);
	color: var(--pricing-deep);
}

.pricing-table > .wp-block-column:nth-child(3) .pricing-button .wp-element-button:hover {
	border-color: var(--pricing-lime-hover);
	background: var(--pricing-lime-hover);
	color: var(--pricing-deep);
}


/* =========================================================
   Paid Plan Note
   ========================================================= */

.pricing-page > .pricing-table + p {
	max-width: 760px;
	margin: 25px auto 0;

	color: var(--pricing-soft);
	font-size: 14px;
	line-height: 1.6;
	text-align: center;
}


/* =========================================================
   Section Headings
   ========================================================= */

.pricing-page > h2 {
	margin-top: 0;
	margin-bottom: 15px;

	font-size: clamp(34px,4vw,48px);
	line-height: 1.1;
	text-align: center;
}

.pricing-page > h2 + p {
	margin-top: 0;
	margin-bottom: 35px;

	color: var(--pricing-soft);
	font-size: 17px;
	text-align: center;
}


/* =========================================================
   Feature Comparison Table
   ========================================================= */

.pricing-page > .wp-block-table {
	overflow-x: auto;

	margin-top: 0;

	border: 1px solid var(--pricing-line);
	border-radius: 14px;

	background: var(--pricing-white);

	box-shadow: 0 8px 30px rgba(9,39,28,.045);
}

.pricing-page > .wp-block-table table {
	width: 100%;
	min-width: 850px;
	margin: 0;
	border-collapse: collapse;
}

.pricing-page > .wp-block-table th,
.pricing-page > .wp-block-table td {
	padding: 15px 17px;
	border-color: var(--pricing-line);

	font-size: 14px;
	text-align: center;
}

.pricing-page > .wp-block-table th:first-child,
.pricing-page > .wp-block-table td:first-child {
	min-width: 250px;
	text-align: left;
}

.pricing-page > .wp-block-table thead th {
	background: var(--pricing-deep);
	color: #fff;
	font-weight: 750;
}

.pricing-page > .wp-block-table thead th:first-child {
	border-radius: 10px 0 0 0;
}

.pricing-page > .wp-block-table thead th:last-child {
	border-radius: 0 10px 0 0;
}


/* Advanced column in comparison */
.pricing-page > .wp-block-table th:nth-child(5),
.pricing-page > .wp-block-table td:nth-child(5) {
	background: rgba(185,243,90,.12);
}

.pricing-page > .wp-block-table th:nth-child(5) {
	background: var(--pricing-lime);
	color: var(--pricing-deep);
}


/* Check marks */
.pricing-page > .wp-block-table td {
	color: var(--pricing-soft);
}

.pricing-page > .wp-block-table td:not(:first-child) {
	color: var(--pricing-green);
	font-weight: 700;
}


/* =========================================================
   Included Section
   ========================================================= */

.pricing-page > .wp-block-columns:not(.pricing-table) {
	gap: 20px;
}

.pricing-page > .wp-block-columns:not(.pricing-table) > .wp-block-column {
	padding: 30px;

	border: 1px solid var(--pricing-line);
	border-radius: 16px;

	background: var(--pricing-paper);
}

.pricing-page > .wp-block-columns:not(.pricing-table) ul {
	margin: 0;
	padding-left: 21px;

	color: var(--pricing-soft);
	font-size: 15px;
	line-height: 1.7;
}

.pricing-page > .wp-block-columns:not(.pricing-table) li::marker {
	color: var(--pricing-green);
}


/* =========================================================
   FAQ
   ========================================================= */

.pricing-page .wp-block-details {
	margin: 0;
	border-top: 1px solid var(--pricing-line);
}

.pricing-page .wp-block-details:last-of-type {
	border-bottom: 1px solid var(--pricing-line);
}

.pricing-page .wp-block-details summary {
	position: relative;

	padding: 23px 55px 23px 0;

	color: var(--pricing-ink);

	font-size: 18px;
	font-weight: 650;
	line-height: 1.4;

	cursor: pointer;
	list-style: none;
}

.pricing-page .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.pricing-page .wp-block-details summary::after {
	content: "+";

	position: absolute;
	top: 17px;
	right: 2px;

	display: grid;
	place-items: center;

	width: 34px;
	height: 34px;

	border: 1px solid var(--pricing-line);
	border-radius: 50%;

	color: var(--pricing-green);

	font-size: 22px;
	font-weight: 400;
	line-height: 1;

	transition:
		transform .2s ease,
		background-color .2s ease;
}

.pricing-page .wp-block-details[open] summary::after {
	background: var(--pricing-lime);
	color: var(--pricing-deep);
	transform: rotate(45deg);
}

.pricing-page .wp-block-details > p {
	max-width: 760px;
	margin: -2px 55px 25px 0;

	color: var(--pricing-soft);
	font-size: 15px;
	line-height: 1.7;
}


/* =========================================================
   Final CTA
   ========================================================= */

.pricing-page > .wp-block-group:last-child {
	position: relative;
	overflow: hidden;

	max-width: 1180px;

	margin-top: 0;
	margin-bottom: 80px;

	padding: 75px 35px !important;

	border-radius: 24px;

	background:
		radial-gradient(
			circle at 85% 20%,
			rgba(185,243,90,.13),
			transparent 28%
		),
		var(--pricing-deep) !important;

	color: rgba(255,255,255,.72);

	box-shadow: var(--pricing-shadow);

	text-align: center;
}

.pricing-page > .wp-block-group:last-child::before,
.pricing-page > .wp-block-group:last-child::after {
	content: "";

	position: absolute;

	border: 1px solid rgba(185,243,90,.14);
	border-radius: 50%;

	pointer-events: none;
}

.pricing-page > .wp-block-group:last-child::before {
	top: -180px;
	left: -130px;

	width: 350px;
	height: 350px;
}

.pricing-page > .wp-block-group:last-child::after {
	right: -120px;
	bottom: -190px;

	width: 360px;
	height: 360px;
}

.pricing-page > .wp-block-group:last-child > * {
	position: relative;
	z-index: 1;
}

.pricing-page > .wp-block-group:last-child h2 {
	margin: 0 0 18px;

	color: #fff;

	font-size: clamp(36px,4.5vw,58px);
	line-height: 1.08;
}

.pricing-page > .wp-block-group:last-child > p {
	max-width: 650px;

	margin: 0 auto 30px;

	color: rgba(255,255,255,.68);

	font-size: 18px;
	line-height: 1.65;
}


/* CTA Button */
.pricing-page .pricing-cta-button .wp-element-button {
	padding: 15px 28px;

	border-radius: 7px;

	background: var(--pricing-lime);
	color: var(--pricing-deep);

	font-size: 15px;
	font-weight: 800;

	box-shadow: 0 14px 34px rgba(0,0,0,.24);

	transition:
		background-color .2s ease,
		transform .2s ease,
		box-shadow .2s ease;
}

.pricing-page .pricing-cta-button .wp-element-button:hover {
	background: var(--pricing-lime-hover);
	color: var(--pricing-deep);

	transform: translateY(-2px);

	box-shadow: 0 18px 40px rgba(0,0,0,.30);
}


/* =========================================================
   Desktop
   ========================================================= */

@media (min-width: 981px) {

	.pricing-table > .wp-block-column {
		min-height: 620px;
	}

}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 980px) {

	.pricing-page > .pricing-table {
		flex-wrap: wrap !important;
	}

	.pricing-table > .wp-block-column {
		flex-basis: calc(50% - 9px) !important;
	}

	.pricing-table > .wp-block-column:nth-child(3) {
		transform: none;
	}

	.pricing-table > .wp-block-column:nth-child(3):hover {
		transform: translateY(-6px);
	}

	.pricing-page > .wp-block-columns:not(.pricing-table) {
		flex-wrap: wrap !important;
	}

	.pricing-page > .wp-block-columns:not(.pricing-table) > .wp-block-column {
		flex-basis: calc(50% - 10px) !important;
	}

}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 700px) {

	.pricing-page > .wp-block-columns,
	.pricing-page > .wp-block-table {
		width: calc(100% - 40px);
	}

	.pricing-page > .wp-block-group:first-child {
		padding: 65px 20px 45px;
	}

	.pricing-page > .wp-block-group:first-child h1 {
		font-size: clamp(38px,11vw,54px);
	}

	.pricing-page > .wp-block-group:first-child > p {
		font-size: 17px;
	}

	.pricing-page > .pricing-table {
		gap: 15px;
	}

	.pricing-table > .wp-block-column {
		flex-basis: 100% !important;
		padding: 0 25px 27px !important;
	}

	.pricing-table > .wp-block-column::before {
		margin-left: -25px;
		margin-right: -25px;
		height: 165px;
	}

	.pricing-table > .wp-block-column h3 {
		margin-top: -135px;
		font-size: 28px !important;
	}

	.pricing-table > .wp-block-column p[style*="42px"] {
		font-size: 44px !important;
	}

	.pricing-table > .wp-block-column:nth-child(3) {
		transform: none;
	}

	.pricing-table > .wp-block-column:nth-child(3):hover {
		transform: translateY(-5px);
	}

	/* Existing Most Popular pill on mobile */
	.pricing-table > .wp-block-column:nth-child(3) > p:first-child {
		top: -13px;
		left: 50%;
		font-size: 9px !important;
		padding: 5px 11px;
		transform: translateX(-50%);
	}

	.pricing-page > .wp-block-columns:not(.pricing-table) > .wp-block-column {
		flex-basis: 100% !important;
	}

	.pricing-page > .wp-block-table {
		border-radius: 10px;
	}

	.pricing-page > .wp-block-table table {
		min-width: 800px;
	}

	.pricing-page > .wp-block-group:last-child {
		width: calc(100% - 40px);
		margin-bottom: 55px;
		padding: 60px 22px !important;
		border-radius: 19px;
	}

	.pricing-page > .wp-block-group:last-child h2 {
		font-size: 40px;
	}

}


/* =========================================================
   Small Mobile
   ========================================================= */

@media (max-width: 430px) {

	.pricing-page > .wp-block-columns,
	.pricing-page > .wp-block-table {
		width: calc(100% - 30px);
	}

	.pricing-table > .wp-block-column {
		padding-right: 21px !important;
		padding-left: 21px !important;
	}

	.pricing-table > .wp-block-column::before {
		margin-right: -21px;
		margin-left: -21px;
	}

	/* Existing Most Popular pill on very small screens */

	.pricing-page > .wp-block-group:last-child {
		width: calc(100% - 30px);
	}

	.pricing-page .pricing-cta-button .wp-element-button {
		width: 100%;
	}

}


/* =========================================================
   Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.pricing-table > .wp-block-column,
	.pricing-page .pricing-button .wp-element-button,
	.pricing-page .pricing-cta-button .wp-element-button {
		transition: none;
	}

	.pricing-table > .wp-block-column:hover,
	.pricing-table > .wp-block-column:nth-child(3),
	.pricing-table > .wp-block-column:nth-child(3):hover {
		transform: none;
	}

}