section.checkout {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 1s ease, opacity 1s ease, padding 1s ease;
	padding: 0;
	margin: 0;
	border: 0;
}

section.checkout.checkout-visible {
	background: var(--color--main);
	padding: 3rem 1rem;
	max-height: 2000px;
	opacity: 1;
	border-bottom: 1px solid var(--color--main--borders);
}

.checkout-inner {
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	gap: 2.5rem;
	align-items: flex-start;
}

div.referral{
	display:none;
	&.visible{
		display:block;
	}
}

section.checkout h3{
	font-family: var(--font--title--family--small);
	font-size: 1.25rem;
	line-height: 1.5;
	margin-bottom: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	color: var(--color--highlight);
	border-bottom: 1px solid var(--color--main--borders);
	padding-bottom: 1rem;
	margin-bottom: 1rem;
}

ul.testimonials {
	padding:0;
	margin-top: .75rem;

	li{
		margin-bottom: 2rem;
		position: relative;
		display: grid;
		grid-template-columns: 1fr 4fr;
		grid-column-gap: 3rem;
	}
	li .quote{
		display: block;
		position: relative;
	}
	li .image{
		position: relative;
		display: block;
		align-items: center;
		justify-content: center;
		margin-top: .5rem;
		height: 8rem;
		width: 8rem;
		img{
			max-width: 100%;
			object-fit: cover;
		}
		border-radius: 50%;
		overflow: hidden;
		border: 2px solid var(--color--main--borders);
	}
	li p{
		font-family: var(--font--title--family--small);
		font-size: 1.15rem;
		line-height: 1.5;
		margin-bottom: 1rem;
		margin-top: 0;
		&:before{
			content: "“";
			font-family: var(--font--title--family--small);
			font-size: 3rem;
			line-height: 3.25rem;
			margin-bottom: 1rem;
			font-weight: 500;
			text-transform: uppercase;
			position: absolute;
			left: -1.75rem;
			top: 0;
			color: var(--color--main--borders);
		}
		&:after{
			content: "”";
			font-family: var(--font--title--family--small);
			font-size: 3rem;
			line-height: .5rem;
			position:relative;
			top:1rem;
			margin-left:.25rem;
			font-weight: 500;
			color: var(--color--main--borders);
		}
	}

	li p a{
		color: var(--color--white);
		text-decoration: underline;
		&:hover{
			color: var(--color--highlight);
		}
	}

	li p+p{
		font-size: 1rem;
		line-height: 1.5;
		margin-bottom: 1rem;
	}

	li p.author{
		font-size: 1rem;
		line-height: 1.5;
		margin-bottom: 1rem;
		font-weight: 700;
		&:after{
			content: "";
		}
	}
}

/* Left column */
.checkout-copy {
	flex: 1 1 50%;
	color: #fff;
}

/* Right column */
.checkout-card {
	flex: 0 0 400px;
}

/* Mobile: matching where the top section breaks */
@media (max-width: 767px) {
	.checkout-inner {
		flex-direction: column;
		align-items: stretch;
	}

	.checkout-card {
		flex: 1 1 auto;
	}
}