/* Pricing - Global styles
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
	scroll-behavior: smooth;
}

#pricing-section-1,
#pricing-section-2,
#pricing-section-3,
#pricing-section-4 {
	font-size: 1rem;
	text-align: center;
}

.btn.blue {
	background-color: rgb(67, 179, 209) !important;
}

.btn.blue span {
	background-color: rgb(31, 151, 186) !important;
}

@media (max-width: 990px) {

	#pricing-section-1,
	#pricing-section-2,
	#pricing-section-3,
	#pricing-section-4 {
		font-size: 0.875rem;
	}

}


/* Cards
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.card {
	padding: 2rem 1.5rem;
	background-color: #fff;
	border: 2px solid #ddd;
	border-radius: 1rem;
	transition: 0.2s ease all;
}

.card.highlight,
.is-active .card:hover,
.is-active .card:focus-within {
	border-color: rgb(31, 151, 186);
	box-shadow: 
		0 0.5rem 1rem rgb(31, 151, 186, 0.05),
		0 1rem 2rem -0.7rem rgb(31, 151, 186, 0.05),
		0 2rem 4rem -1.4rem rgb(31, 151, 186, 0.05);
}

	.card .title {
		margin-bottom: 1rem;
		font-family: 'Titillium Web', sans-serif;
		font-size: 2em;
		font-weight: 600;
		line-height: 1.2;
	}

	.card .subhead {
		margin-bottom: 1rem;
		font-size: 1.5em;
		font-weight: bold;
		line-height: 1.2;
	}

		.card .subhead span {
			font-size: 16px;
		}

	.card p {
		margin-bottom: 1rem;
		color: #555;
	}

	.card .btn {
		display: block;
		float: none;
		padding: 0.6em 0;
		margin: 0 0 2.5rem;
		font-size: 1em;
	}

		.card.highlight .btn span {
			width: 100%;
		}

	.card .features > div {
		margin-bottom: 0.5em;
		font-weight: bold;
	}

	.card .features ul {
		padding: 0;
		margin: 0;
		color: #555;
		list-style: none;
	}
	
	.features ul li {
		text-align: left;
	}

	.card .features li {
		display: flex;
		gap: 0.5em;
	}

	.card .features li::before {
		content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(31,151,186,1)'%3E%3Cpath d='M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z'%3E%3C/path%3E%3C/svg%3E");
		width: 1.3em;
		height: 1.3em;
		display: inline-block;
		margin-top: 2px;
		flex: 0 0 auto;
	}


/* Section 1
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
#pricing-section-1 h1 {
	margin-bottom: 2rem;
	font-size: 3em;
}

#pricing-section-1 .pricing-table {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	align-items: stretch;
	text-align: left;
	line-height: 1.5;
}

	#pricing-section-1 .link-compare {
		display: inline-flex;
		align-items: center;
		gap: 0.2em;
		padding-bottom: 0.2em;
		margin: 2rem 0 0;
		border-bottom: 1px solid transparent;
		font-weight: bold;
	}

	#pricing-section-1 .link-compare::after {
		content: "";
		width: 1.25em;
		height: 1.25em;
		display: inline-block;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(31,151,186,1)'%3E%3Cpath d='M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z'%3E%3C/path%3E%3C/svg%3E");
	}

	#pricing-section-1 .link-compare:hover {
		border-bottom-color: rgb(31, 151, 186);
		text-decoration: none;
	}

@media (max-width: 800px) {

	#pricing-section-1 .pricing-table {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

}


/* Section 2
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
#pricing-section-2, #pricing-section-4 {
	padding-top: 4rem;
	padding-bottom: 4rem;
	background-color: rgb(67, 179, 209, 0.06);
	border-top: 1px solid rgb(67, 179, 209, 0.25);
	border-bottom: 1px solid rgb(67, 179, 209, 0.25);
	scroll-margin-top: 68px;
}

	#pricing-section-2 h2, #pricing-section-4 h2 {
		margin-bottom: 2rem;
		font-size: 2.5em;
	}

	#pricing-section-2 .credit-card-processing, #pricing-section-4 .credit-card-processing {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
		margin: 0 auto;
		align-items: stretch;
		line-height: 1.5;
	}

		#pricing-section-2 .credit-card-processing .btn, #pricing-section-4 .credit-card-processing .btn {
			pointer-events: none;
			user-select: none;
			filter: saturate(0.1)
		}

		#pricing-section-2 .credit-card-processing.is-active .btn, #pricing-section-4 .credit-card-processing.is-active .btn {
			pointer-events: all;
			user-select: all;
			filter: saturate(1)
		}

	#pricing-section-2 .confirm, #pricing-section-4 .confirm {
		width: 13em;
		max-width: 100%;
		display: none;
		float: none;
		padding: 0.6em 0;
		margin: 2rem auto 0;
		font-size: 1.2em;
	}

@media (max-width: 800px) {

	#pricing-section-2 .credit-card-processing, #pricing-section-4 .credit-card-processing {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

}


/* Section 3
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
#pricing-section-3 {
	scroll-margin-top: 68px;
}

	#pricing-section-3 table {
		width: 100%;
		font-size: 1em;
		border-bottom: 1px solid #ccc;
		border-collapse: collapse;
	}

		#pricing-section-3 table tr:nth-child(2n) {
			background-color: rgb(67, 179, 209, 0.06);
		}

		#pricing-section-3 table thead {
			border-bottom: 1px solid #ccc;
			font-family: 'Titillium Web', sans-serif;
			font-size: 2em;
			font-weight: 600;
		}

			#pricing-section-3 table thead th {
				padding-bottom: 1.5rem;
				font-weight: 600;
			}

		#pricing-section-3 table th,
		#pricing-section-3 table td {
			padding: 1rem;
		}

		#pricing-section-3 table tbody th {
			font-weight: bold;
		}

		#pricing-section-3 table th:first-child {
			width: 40%;
		}

			#pricing-section-3 table tbody th span {
				display: inline-flex;
				flex-wrap: wrap;
				align-items: center;
				gap: 0.3em;
			}

		#pricing-section-3 table td {
			width: 10rem;
			border-left: 1px solid #ccc;
			color: #555;
			text-align: center;
		}

		#pricing-section-3 table i.check {
			width: 1.3em;
			height: 1.3em;
			display: inline-block;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(85,85,85,1)'%3E%3Cpath d='M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z'%3E%3C/path%3E%3C/svg%3E");
		}
		
		#pricing-section-3 table a.info {
			cursor: pointer !important;
			width: 1.3em;
			height: 1.3em;
			display: inline-block;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(31,151,186,1)'%3E%3Cpath d='M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 9.5C12.8284 9.5 13.5 8.82843 13.5 8C13.5 7.17157 12.8284 6.5 12 6.5C11.1716 6.5 10.5 7.17157 10.5 8C10.5 8.82843 11.1716 9.5 12 9.5ZM14 15H13V10.5H10V12.5H11V15H10V17H14V15Z'%3E%3C/path%3E%3C/svg%3E");
		}

	#pricing-section-3 .sticky {
		position: sticky;
		top: 67px;
		background-color: #fff;
		border-bottom-color: rgb(67, 179, 209, 0.5);
	}

		#pricing-section-3 .sticky td {
			border: 0;
		}

			#pricing-section-3 .sticky td > span {
				display: block;
				font-size: 1.1em;
				font-weight: bold;
			}

		#pricing-section-3 .sticky .btn {
			max-width: 8.5rem;
			float: none;
			display: block;
			margin: 0.4em auto 0;
		}

@media (max-width: 800px) {

	#pricing-section-3 table thead {
		border: 0;
	}

	#pricing-section-3 table tr {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		background-color: transparent !important;
	}

	#pricing-section-3 table th {
		width: 100% !important;
		grid-column: span 3;
	}

	#pricing-section-3 tbody th {
		background-color: rgb(67, 179, 209, 0.06);
		border-top: 1px solid #ccc;
	}

	#pricing-section-3 table td {
		width: auto;
		border: 0;
	}

	#pricing-section-3 .sticky th {
		display: none;
	}

	#pricing-section-3 .sticky .btn {
		display: none;
	}

}