/*
	Ad Landing Pages (template-landing.php)

	Deliberately a standalone stylesheet, NOT a partial compiled into
	style.css: it is enqueued only on the landing template, and keeping
	it out of style.scss means no Scout recompile is needed to ship or
	edit these pages. If it ever gets folded into style.scss, delete this
	file and the conditional enqueue in functions.php together.

	Colors match stylesheets/variables/_variables.scss:
	$tws-green #327B3F, and the USA 250 campaign tokens $campaign-navy
	#002868 / $campaign-red #B22234 / $campaign-gold #C9A227 (the old
	$patriotic-blue #01126F is retired).

 */

/*
	Hero

 */
.lp-hero {
	background: #f8f8f8;
	border-bottom: 1px solid #eee;
}

.lp-hero .container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 2em;
	max-width: 1200px;
	padding: 3em 2em;
}

.lp-hero .item.content {
	flex: 1 1 100%;
}

.lp-hero .item.form {
	flex: 1 1 100%;
	background: #fff;
	padding: 2em;
	border-radius: 1em;
	box-shadow: 0 0 20px #ddd;
}

@media only screen and (min-width: 900px) {
	.lp-hero .item.content {
		flex: 1 1 52%;
	}
	.lp-hero .item.form {
		flex: 0 0 40%;
	}
}

.lp-hero .eyebrow {
	color: #327B3F;
	font-size: .9em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: .75em;
}

.lp-hero h1 {
	color: #1c1c1c;
	font-size: 2em;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: .5em;
}

@media only screen and (min-width: 900px) {
	.lp-hero h1 {
		font-size: 2.6em;
	}
}

.lp-hero h1 [data-loc] {
	color: #327B3F;
}

.lp-hero .subhead {
	font-size: 1.1em;
	line-height: 1.5;
	margin-bottom: 1.25em;
}

.lp-hero ul.checked {
	list-style: none;
	margin: 0 0 1.25em;
	padding: 0;
}

.lp-hero ul.checked li {
	margin-bottom: .5em;
	line-height: 1.4;
}

.lp-hero ul.checked i {
	color: #327B3F;
	margin-right: .4em;
}

.lp-hero .phone-cta a {
	color: #002868;
	font-weight: 700;
	white-space: nowrap;
}

/*
	Optional product photo under the hero copy (the double-hung template
	passes the model shot; config key 'photo' on any page using this hero).
 */
.lp-hero .hero-photo {
	margin-top: 1.5em;
	margin-bottom: 0;
}

.lp-hero .hero-photo img {
	width: 100%;
	max-height: 320px;
	object-fit: cover;
	object-position: center;
	border-radius: 1em;
}

.lp-hero .form-title {
	color: #1c1c1c;
	font-size: 1.5em;
	font-weight: 700;
	margin-bottom: .25em;
}

.lp-hero .form-sub {
	font-size: .9em;
	color: #555;
	margin-bottom: 1em;
}

/*
	Hero form fields — modeled on the double-hung hero card everyone
	likes: uniform rounded inputs, paired columns for the short fields.
	CF7 wraps each control in span.wpcf7-form-control-wrap[data-name],
	so pairing is by field name and degrades to full-width stacking.
 */
.lp-hero form.wpcf7-form .wpcf7-form-control-wrap {
	display: block;
	margin-bottom: .6em;
}

.lp-hero form.wpcf7-form input[type=text],
.lp-hero form.wpcf7-form input[type=email],
.lp-hero form.wpcf7-form input[type=tel],
.lp-hero form.wpcf7-form select,
.lp-hero form.wpcf7-form textarea {
	width: 100%;
	padding: .8em;
	border: 1px solid #ddd;
	border-radius: .5em;
	background: #fff;
	font: inherit;
	font-size: .95em;
	color: #1c1c1c;
}

.lp-hero form.wpcf7-form select {
	cursor: pointer;
}

.lp-hero form.wpcf7-form textarea {
	max-height: 90px;
}

@media only screen and (min-width: 480px) {
	.lp-hero form.wpcf7-form .wpcf7-form-control-wrap[data-name=your-name],
	.lp-hero form.wpcf7-form .wpcf7-form-control-wrap[data-name=your-email],
	.lp-hero form.wpcf7-form .wpcf7-form-control-wrap[data-name=your-phone],
	.lp-hero form.wpcf7-form .wpcf7-form-control-wrap[data-name=your-city] {
		display: inline-block;
		width: 49%;
	}

	.lp-hero form.wpcf7-form .wpcf7-form-control-wrap[data-name=your-name],
	.lp-hero form.wpcf7-form .wpcf7-form-control-wrap[data-name=your-phone] {
		margin-right: 2%;
	}
}

.lp-hero form.wpcf7-form .wpcf7-quiz-label {
	display: block;
	font-size: .8em;
	color: #555;
	margin-bottom: .35em;
}

.lp-hero form.wpcf7-form p {
	margin-bottom: .5em;
}

.lp-hero form.wpcf7-form input[type=submit] {
	background: #327B3F;
	border: none;
	color: #fff;
	font-weight: 700;
	width: 100%;
	padding: 1em;
	border-radius: .5em;
	cursor: pointer;
}

.lp-hero form.wpcf7-form input[type=submit]:hover {
	background: #275f31;
}

/*
	Features

 */
.lp-features .container {
	max-width: 1100px;
	padding: 2em;
}

.lp-features .feature {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2em;
	margin-bottom: 3em;
}

.lp-features .feature:last-child {
	margin-bottom: 0;
}

.lp-features .item.photo,
.lp-features .item.content {
	flex: 1 1 100%;
}

@media only screen and (min-width: 768px) {
	.lp-features .item.photo {
		flex: 0 0 42%;
	}
	.lp-features .item.content {
		flex: 1 1 50%;
	}
	.lp-features .feature:nth-child(even) {
		flex-direction: row-reverse;
	}
}

.lp-features .item.photo img {
	width: 100%;
	border-radius: 1em;
}

.lp-features .title {
	color: #1c1c1c;
	font-size: 1.4em;
	font-weight: 700;
	margin-bottom: .5em;
}

.lp-features .item.content p {
	line-height: 1.6;
}

/*
	Final CTA

 */
.lp-cta {
	background: #327B3F;
	color: #fff;
	text-align: center;
	padding: 3em 1em;
	margin-top: 2em;
}

.lp-cta .title {
	font-size: 1.8em;
	font-weight: 700;
	margin-bottom: .5em;
}

.lp-cta .copy {
	max-width: 600px;
	margin: 0 auto 1.5em;
	line-height: 1.5;
}

.lp-cta .buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1em;
}

.lp-cta a.button {
	display: inline-block;
	padding: 1em 2em;
	border-radius: .5em;
	font-weight: 700;
	text-decoration: none;
}

.lp-cta a.button.quote {
	background: #C3D92C;
	color: #1e3a24;
}

.lp-cta a.button.quote:hover {
	background: #d2e651;
}

.lp-cta a.button.call {
	background: transparent;
	color: #fff;
	border: 2px solid #fff;
}

.lp-cta a.button.call:hover {
	background: #fff;
	color: #327B3F;
}

/*
	Proof row (hero, under the h1)

 */
.lp-hero .proof-row {
	font-size: .85em;
	color: #555;
	margin-bottom: 1em;
}

.lp-hero .proof-row .stars {
	color: #C9A227;
	letter-spacing: 1px;
	margin-right: .25em;
}

.lp-hero .proof-row strong {
	color: #1c1c1c;
}

.lp-hero .proof-row .sep {
	margin: 0 .35em;
	color: #bbb;
}

/*
	Form chip & privacy microcopy

 */
.lp-hero .form-chip {
	display: inline-block;
	background: #B22234;
	color: #fff;
	font-size: .7em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: .45em .8em;
	margin-bottom: .75em;
}

.lp-hero .form-chip i {
	color: #C9A227;
	margin-right: .3em;
}

.lp-hero .form-privacy {
	color: #999;
	font-size: .75em;
	text-align: center;
	margin-top: .75em;
	margin-bottom: 0;
}

/*
	Numbers band

 */
.lp-numbers {
	border-bottom: 1px solid #eee;
	background: #fff;
}

.lp-numbers .container {
	display: flex;
	flex-wrap: wrap;
	max-width: 1100px;
	padding: 0 1em;
	text-align: center;
}

.lp-numbers .item {
	flex: 1 1 50%;
	padding: 1.25em 1em;
	font-size: .8em;
	line-height: 1.4;
	color: #555;
	border-left: 1px solid #eee;
}

.lp-numbers .item:first-child {
	border-left: 0;
}

@media only screen and (max-width: 767px) {
	.lp-numbers .item:nth-child(3) {
		border-left: 0;
	}
	.lp-numbers .item:nth-child(1),
	.lp-numbers .item:nth-child(2) {
		border-bottom: 1px solid #eee;
	}
}

@media only screen and (min-width: 768px) {
	.lp-numbers .item {
		flex: 1 1 25%;
	}
}

.lp-numbers .item strong {
	display: block;
	color: #327B3F;
	font-size: 1.5em;
	font-weight: 800;
}

/*
	Named review

 */
.lp-review {
	background: #f7faf7;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
}

.lp-review .container {
	max-width: 760px;
	padding: 2.5em 2em;
	text-align: center;
}

.lp-review .quote {
	font-size: 1.3em;
	line-height: 1.5;
	font-style: italic;
	color: #1c1c1c;
	margin-bottom: .75em;
}

.lp-review .attr {
	font-size: .85em;
	color: #555;
}

.lp-review .attr .stars {
	color: #C9A227;
	letter-spacing: 1px;
}

/*
	Landing offer block (upgraded offer-image)

	Base look comes from the sitewide .offer-image styles in style.css;
	these rules upgrade it for the LP: flex kicks in at 900px instead of
	1200px, the photo gets the same rounded treatment as the feature
	images, and the 250 chip sits above the Harvey logo.

 */
.offer-image.lp-offer {
	border-top: 1px solid #eee;
	padding: 2.5em 1em;
	max-width: 1100px;
	margin: 0 auto;
}

@media only screen and (min-width: 900px) {
	.offer-image.lp-offer {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 2em;
	}

	.offer-image.lp-offer .item {
		flex: 1 1 46%;
	}
}

.offer-image.lp-offer .item img {
	width: 100%;
	height: auto;
	border-radius: 1em;
	margin-bottom: 1.5em;
}

@media only screen and (min-width: 900px) {
	.offer-image.lp-offer .item img {
		margin-bottom: 0;
	}
}

.offer-image.lp-offer .chip {
	display: inline-block;
	background: #B22234;
	color: #fff;
	font-size: .75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: .45em .9em;
	margin-bottom: 1.25em;
}

.offer-image.lp-offer .chip i {
	color: #C9A227;
	margin-right: .3em;
}

.offer-image.lp-offer .harvey-logo {
	width: 220px;
	margin-bottom: 1em;
}

/*
	Final CTA offer chip

 */
.lp-cta .offer-chip {
	display: inline-block;
	background: #B22234;
	color: #fff;
	font-size: .75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: .45em .9em;
	margin-bottom: 1.25em;
}

.lp-cta .offer-chip i {
	color: #C9A227;
	margin-right: .3em;
}

/*
	Sticky mobile CTA bar

	Mobile only; the sitewide .offer-bar is hidden at the same widths so
	the two fixed bars never stack.

 */
.lp-sticky {
	display: none;
}

@media only screen and (max-width: 767px) {
	.page-template-template-landing .offer-bar {
		display: none;
	}

	.lp-sticky {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 5;
		background: #002868;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, .2);
	}

	.lp-sticky a {
		flex: 1;
		color: #fff;
		text-align: center;
		font-weight: 700;
		font-size: .9em;
		padding: 1em;
		text-decoration: none;
	}

	.lp-sticky a.quote {
		background: #B22234;
	}

	/* keep the footer clear of the bar */
	.page-template-template-landing footer.site {
		padding-bottom: 6em;
	}
}