:root {
	--secondary-font: 'Gilroy', sans-serif;
}

body.signature-growth {
	background: none;
	overflow: auto !important;
	color: var(--scorp-black);
}

body.signature-growth::before {
	content: none;
}

body.signature-growth main {
	height: auto;
}

.signature-growth .signature--container {
	max-width: calc(100dvw - 6rem);
	margin: 1rem auto;
	display: grid;
	align-items: stretch;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 5rem;
}

.signature-growth .signature--summary {
	padding: 1.5rem 0 0;
}

.signature--summary .header-group {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
}

.signature--summary .header-group .title {
	font-size: 0.875rem;
}

.signature--summary .header-group .client {
	font-size: 0.875rem;
	color: var(--scorp-gray4);
}

.signature--summary .header-group .package {
	display: flex;
	flex-direction: column;
	width: fit-content;
	font-family: var(--secondary-font);
	font-weight: 300;
	font-size: 3.25rem;
	margin: 0;
	line-height: 1;
}

.signature--summary .header-group .package strong {
	color: var(--scorp-blue);
}

.signature--summary .header-group .package .market-leader {
	text-align: right;
	font-weight: 500;
	font-size: 1.25rem;
}

.signature--summary .header-group .description {
	font-size: 1.125rem;
	color: var(--scorp-gray4);
	margin-bottom: 2rem;
}

.signature--summary .signature--services {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.signature--summary .signature--services li {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
	align-items: start;
	border-top: 1px solid var(--gray4);
}

.signature--summary .signature--services .service--category {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 1.125rem;
	font-family: var(--secondary-font);
	padding-top: 0.75rem;
}

.signature--summary .signature--services .service--feature {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 500;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--gray4);
	border-top: 0;
}

.signature-growth .signature--monthly-charges {
	border-radius: 0.5rem;
	background: linear-gradient(180deg, #6d59ff 0%, #007ffd 87.5%), linear-gradient(0deg, var(--white) 0%, var(--white) 100%), var(--scorp-blue4);
	padding: 2.5rem;
	color: var(--white);
	gap: 1.125rem;
	display: flex;
	flex-direction: column;
}

.signature-growth .signature--monthly-charges .card {
	border-radius: 0.5rem;
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.1);
	padding: 1.5rem;
}

.signature-growth .signature--monthly-charges .card .container--cost {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-family: var(--secondary-font);
	padding-bottom: 1.125rem;
	font-size: 1.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.signature-growth .signature--monthly-charges .card .container--cost .cost {
	font-size: 3.375rem;
	line-height: 1;
}

.signature-growth .signature--monthly-charges .card .container--fees {
	padding: 0.75rem 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.125rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	font-weight: 500;
	font-size: 1rem;
}

.signature-growth .signature--monthly-charges .btn {
	background-color: var(--white);
	color: var(--scorp-blue);
}

.signature-growth .signature--monthly-charges .subtitle {
	font-size: 1.25rem;
	line-height: 1;
	font-family: var(--secondary-font);
}

/* .signature-growth .signature--monthly-charges .existing-payment,
.signature-growth .signature--monthly-charges .add-payment, */
.signature-growth .signature--monthly-charges .existing-payment.ui-tab-panel.active,
.signature-growth .signature--monthly-charges .add-payment.ui-tab-panel.active {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
	padding-top: 1.125rem;
	border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.signature-growth .signature--monthly-charges .form--payment-method {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
}

.signature-growth .signature--monthly-charges .input-mark.agreement {
	align-items: flex-start;
	display: flex;
}

.signature-growth .signature--monthly-charges label {
	color: var(--white);
}

.signature-growth .signature--monthly-charges .input-mark.agreement label {
	color: var(--blue5);
	font-size: 0.875rem;
	line-height: 1.375rem;
}

.signature-growth .signature--monthly-charges .input-mark.agreement [type='checkbox'] + label:before {
	box-shadow: 0 0 0 2px var(--white) inset;
	background-color: transparent;
	background-image: none;
}

.signature-growth .signature--monthly-charges .input-mark.agreement [type='checkbox']:checked + label:before {
	background-image: url(/cms/svg/site/icon_check.16.FFFFFF.svg);
}

.signature-growth .signature--monthly-charges .input-mark.agreement label a {
	color: var(--white);
	font-weight: 500;
	text-decoration: none;
}

.signature-growth .signature--monthly-charges .form--add-payment ul {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
}

@media screen and (max-width: 1024px) {
	.signature-growth .signature--container {
		grid-template-columns: repeat(1, minmax(0, 1fr));
		max-width: calc(100dvw - 4rem);
		gap: 2.5rem;
	}

	.signature-growth .signature--summary {
		padding: 0;
	}

	.signature--summary .signature--services {
		display: grid;
		gap: 2rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.signature--summary .signature--services li {
		grid-template-columns: repeat(1, minmax(0, 1fr));
		gap: 0.5rem;
	}

	.signature--summary .signature--services .service--feature {
		margin-left: 2.25rem;
	}

	.signature-growth .signature--monthly-charges {
		padding: 1rem;
	}
}

@media screen and (max-width: 650px) {
	.signature-growth .signature--container {
		max-width: calc(100dvw - 2rem);
	}

	.signature--summary .signature--services {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
}