/* Yield Partner landing page (page_yield-partner.php). Loaded only on this template. */

.yield-partner {
	--yp-navy: #012169;
	--yp-navy-deep: #00174b;
	--yp-navy-mid: #002a66;
	--yp-blue: #0066b4;
	--yp-green: #6a9342;
	--yp-red: #bf4747;
	--yp-text: #404040;
	--yp-muted: #808080;
	--yp-light: #f5f5f5;
	--yp-pad: 7.5%;
	/* The header's desktop nav is floated and never cleared. */
	clear: both;
	color: var(--yp-text);
	font-family: "Roboto", sans-serif;
}

.yield-partner h1,
.yield-partner h2,
.yield-partner h3,
.yield-partner h4 {
	font-family: "Roboto", sans-serif;
	font-weight: 700;
	overflow-wrap: anywhere;
	hyphens: auto;
}

.yield-partner .yp-heading {
	color: var(--yp-text);
	font-size: clamp(28px, 3.4vw, 48px);
	line-height: 1.15;
	margin: 0 0 .4em;
	text-align: center;
}

.yield-partner .yp-subhead {
	color: var(--yp-muted);
	font-size: clamp(16px, 1.5vw, 24px);
	margin: 0 0 48px;
	text-align: center;
}

.yield-partner .yp-eyebrow {
	color: var(--yp-text);
	font-size: 13px;
	letter-spacing: .12em;
	margin: 0 0 16px;
	text-transform: uppercase;
}

/* ---------- Hero ---------- */

.section-yp-hero {
	background: var(--yp-navy);
	color: #fff;
	min-height: 640px;
	overflow: hidden;
	position: relative;
}

.section-yp-hero::before {
	background: rgba(0, 0, 0, .45);
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

.section-yp-hero--image {
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.section-yp-hero--inner {
	padding: 72px var(--yp-pad) 96px;
	position: relative;
	z-index: 2;
}

.section-yp-hero--headline {
	color: #fff;
	font-family: "Sucrose Bold Two", sans-serif !important;
	font-size: clamp(40px, 4.6vw, 90px);
	font-weight: 400 !important;
	line-height: 1;
	margin: 0 0 24px;
}

.section-yp-hero--subhead {
	font-size: clamp(16px, 1.6vw, 24px);
	font-weight: 700;
	letter-spacing: .14em;
	margin: 0 0 32px;
}

/* Language toggle */

.yp-lang-toggle {
	/* The theme floats every nav at full width; this one is a positioned pill. */
	background: rgba(0, 0, 0, .35);
	border-radius: 999px;
	clear: none;
	display: flex;
	float: none;
	gap: 4px;
	padding: 4px;
	position: absolute;
	width: auto;
	right: var(--yp-pad);
	top: 24px;
	z-index: 3;
}

.yp-lang-toggle--link {
	align-items: center;
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	font-size: 14px;
	font-weight: 700;
	justify-content: center;
	letter-spacing: .08em;
	min-height: 44px;
	min-width: 56px;
	padding: 0 16px;
	text-decoration: none;
}

.yp-lang-toggle--link:hover {
	background: rgba(255, 255, 255, .15);
	color: #fff;
	text-decoration: none;
}

.yp-lang-toggle--link.is-active,
.yp-lang-toggle--link.is-active:hover {
	background: #fff;
	color: var(--yp-navy);
}

.yp-lang-toggle--link:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* Form card */

.yp-form-card {
	background: rgba(0, 102, 180, .92);
	border-radius: 8px;
	padding: 36px 40px;
	position: relative;
	scroll-margin-top: 140px;
}

.yp-form-card--heading {
	color: #fff;
	font-size: clamp(20px, 1.6vw, 24px);
	margin: 0 0 20px;
}

.yp-form-card--note {
	color: #fff;
	font-size: 13px;
	line-height: 1.4;
	margin: 16px 0 0;
}

.yp-form-card .gform_wrapper {
	margin: 0;
}

.yp-form-card .gform-theme--foundation .gform_fields {
	row-gap: 16px;
}

.yp-form-card .gfield_label,
.yp-form-card .gform_required_legend {
	color: #fff;
}

.yp-form-card .gfield--type-text .gfield_label,
.yp-form-card .gfield--type-email .gfield_label,
.yp-form-card .gfield--type-phone .gfield_label,
.yp-form-card .gfield--type-consent .gfield_label {
	clip: rect(0 0 0 0);
	height: 1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.yp-form-card input[type="text"],
.yp-form-card input[type="email"],
.yp-form-card input[type="tel"] {
	background: rgba(255, 255, 255, .28) !important;
	border: 0 !important;
	border-radius: 2px !important;
	color: #fff !important;
	font-size: 14px !important;
	min-height: 52px !important;
	padding: 0 20px !important;
}

.yp-form-card input::placeholder {
	color: #fff !important;
	opacity: .9;
}

.yp-form-card input:focus-visible,
.yp-form-card .gfield-choice-input:focus-visible {
	outline: 3px solid #fff !important;
	outline-offset: 2px;
}

.yp-form-card .gfield--type-consent,
.yp-form-card .gfield_consent_label {
	color: #fff !important;
	font-size: 13px;
}

.yp-form-card .gform_required_legend {
	font-size: 12px;
	margin: 0 0 4px;
}

.yp-form-card .gfield_consent_label a {
	color: #fff;
	text-decoration: underline;
}

.yp-form-card .gform_footer {
	justify-content: flex-end;
	margin-top: 8px !important;
	padding: 0 !important;
}

.yp-form-card .gform_footer .gform_button {
	background: var(--yp-navy) !important;
	border: 0 !important;
	border-radius: 999px !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	min-height: 44px;
	padding: 0 40px !important;
}

/* Error and confirmation states stay readable on the blue card. */

.yp-form-card .gform_validation_errors {
	background: #fff !important;
	border: 0 !important;
	border-radius: 4px;
	box-shadow: none !important;
}

.yp-form-card .gform_validation_errors .gform_submission_error,
.yp-form-card .gform_validation_errors .gform-icon {
	color: #a12f2f !important;
}

.yp-form-card .gfield_validation_message,
.yp-form-card .validation_message {
	background: #fff !important;
	border: 0 !important;
	border-radius: 2px;
	color: #a12f2f !important;
	font-size: 13px;
	margin-top: 6px !important;
	padding: 6px 10px !important;
}

.yp-form-card .gfield_error input {
	box-shadow: inset 0 0 0 2px #fff !important;
}

/* Desktop: the note sits beside the Submit button, as in the mockup. */
@media (min-width: 992px) {
	.yp-form-card--note {
		bottom: 36px;
		left: 40px;
		margin: 0;
		max-width: calc(100% - 260px);
		position: absolute;
	}

	.yp-form-card .gform_footer {
		min-height: 52px;
	}
}

.yp-form-card:has(.gform_confirmation_message) .yp-form-card--note {
	display: none;
}

.yp-form-card .gform_confirmation_message {
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

/* ---------- Seed opener ---------- */

.section-yp-seed {
	background: var(--yp-light);
	padding: 90px var(--yp-pad) 160px;
}

.section-yp-seed--body {
	align-items: center;
	display: flex;
	gap: 48px;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 955px;
}

.section-yp-seed--copy {
	flex: 0 1 432px;
}

.section-yp-seed--callout + .section-yp-seed--callout {
	margin-top: 36px;
}

.section-yp-seed--title {
	color: var(--yp-text);
	font-size: 20px;
	letter-spacing: 2px;
	line-height: 1.4;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.section-yp-seed--callout ul {
	color: var(--yp-muted);
	font-size: 18px;
	line-height: 24px;
	margin: 0;
	padding-left: 17px;
}

.section-yp-seed--callout li + li {
	margin-top: 8px;
}

.section-yp-seed--image {
	flex: 0 1 408px;
}

.section-yp-seed--image img {
	display: block;
	height: auto;
	/* Drops the white backdrop of JPG product shots into the section's grey. */
	mix-blend-mode: multiply;
	width: 100%;
}

.section-yp-seed--image.is-placeholder::before {
	aspect-ratio: 1;
	background: radial-gradient(circle, #d9d9d9 0 12%, #1e1e1e 12.5% 100%);
	border-radius: 50%;
	content: "";
	display: block;
	margin: 0 auto;
	width: 80%;
}

/* ---------- Guarantee band ---------- */

.section-yp-guarantee {
	background-color: var(--yp-blue);
	background-position: center;
	background-size: cover;
	color: #fff;
	padding: 110px var(--yp-pad) 90px;
	position: relative;
	text-align: center;
}

.section-yp-guarantee--badge {
	left: 50%;
	position: absolute;
	top: 0;
	transform: translate(-50%, -50%);
	width: 150px;
}

.section-yp-guarantee--badge img {
	display: block;
	height: auto;
	width: 100%;
}

.section-yp-guarantee--heading {
	color: #fff;
	font-size: clamp(22px, 2.4vw, 46px);
	letter-spacing: .1em;
	margin: 0 0 12px;
}

.section-yp-guarantee--body,
.section-yp-guarantee--body p {
	font-size: clamp(14px, 1.1vw, 20px);
	margin: 0;
}

/* ---------- Comparison ---------- */

.section-yp-comparison {
	background: var(--yp-light);
	padding: 90px var(--yp-pad);
}

.section-yp-comparison > .yp-eyebrow,
.yp-cards,
.yp-table,
.yp-table--footnote,
.yp-stats {
	margin-left: auto;
	margin-right: auto;
	max-width: 1180px;
}

.yp-cards {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(4, 1fr);
	margin-bottom: 64px;
}

.yp-card {
	min-width: 0;
}

.yp-card--name {
	background: #e0e0e0;
	border-radius: 6px 6px 0 0;
	color: var(--yp-text);
	font-size: 14px;
	letter-spacing: .1em;
	margin: 0;
	padding: 10px 12px;
	text-align: center;
	text-transform: uppercase;
}

.yp-status--negative .yp-card--name {
	background: var(--yp-red);
	color: #fff;
}

.yp-status--positive .yp-card--name {
	background: var(--yp-green);
	color: #fff;
}

.yp-card--photo {
	aspect-ratio: 4 / 3;
	background: #ddd;
	border: 1px solid #c8c8c8;
	border-radius: 0 0 6px 6px;
	border-top: 0;
	overflow: hidden;
	position: relative;
}

.yp-status--negative .yp-card--photo {
	border-color: var(--yp-red);
}

.yp-status--positive .yp-card--photo {
	border-color: var(--yp-green);
}

.yp-card--photo img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.yp-card--badge {
	align-items: center;
	background: #f2b705;
	border-radius: 50%;
	bottom: 10px;
	color: var(--yp-text);
	display: flex;
	font-size: 10px;
	font-weight: 700;
	height: 56px;
	justify-content: center;
	line-height: 1.1;
	padding: 6px;
	position: absolute;
	right: 10px;
	text-align: center;
	text-transform: uppercase;
	width: 56px;
}

.yp-card--figures {
	font-size: 14px;
	margin: 14px 0 0;
}

.yp-card--figures div {
	align-items: baseline;
	display: flex;
	padding: 3px 0;
}

.yp-card--figures dt {
	color: var(--yp-muted);
	flex: 1;
	font-weight: 400;
	overflow: hidden;
	white-space: nowrap;
}

.yp-card--figures dt::after {
	color: #c8c8c8;
	content: " ........................................................................";
}

.yp-card--figures dd {
	color: var(--yp-text);
	font-weight: 700;
	margin: 0 0 0 4px;
	white-space: nowrap;
}

.yp-status--negative .yp-card--figures dd {
	color: var(--yp-red);
}

.yp-status--positive .yp-card--figures dd {
	color: var(--yp-green);
}

.yp-card--note {
	font-size: 13px;
	margin: 10px 0 0;
}

.yp-status--negative .yp-card--note {
	color: var(--yp-red);
}

.yp-status--positive .yp-card--note {
	color: var(--yp-green);
}

/* Results table */

.yp-table {
	border-collapse: separate;
	border-radius: 6px;
	border-spacing: 0;
	font-size: 13px;
	overflow: hidden;
	width: 100%;
}

.yp-table thead th {
	background: #3a3a3a;
	color: #fff;
	font-size: 11px;
	letter-spacing: .06em;
	padding: 14px 12px;
	text-align: left;
	text-transform: uppercase;
	vertical-align: bottom;
}

.yp-table tbody th,
.yp-table tbody td {
	padding: 16px 12px;
	vertical-align: middle;
}

.yp-table tbody th {
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.yp-table tbody tr {
	background: #e6e6e6;
}

.yp-table tbody tr.yp-status--negative {
	background: #fadcdc;
	color: var(--yp-red);
}

.yp-table tbody tr.yp-status--positive {
	background: #e3efd8;
	color: #4f7130;
}

.yp-table--remark {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}

.yp-bar {
	background: #fff;
	border-radius: 999px;
	display: inline-block;
	height: 12px;
	margin-right: 8px;
	overflow: hidden;
	vertical-align: middle;
	width: 64px;
}

.yp-bar--fill {
	background: #d06a1e;
	border-radius: 999px;
	display: block;
	height: 100%;
	min-width: 10px;
}

.yp-status--negative .yp-bar--fill {
	background: var(--yp-red);
}

.yp-status--positive .yp-bar--fill {
	background: var(--yp-green);
}

.yp-bar--value {
	white-space: nowrap;
}

.yp-table--footnote {
	color: var(--yp-muted);
	font-size: 12px;
	font-style: italic;
	margin-bottom: 40px;
	margin-top: 12px;
}

/* Stat tiles and partner logo */

.yp-stats {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, 1fr);
}

.yp-stat {
	align-items: center;
	border-radius: 4px;
	color: #fff;
	display: flex;
	gap: 18px;
	justify-content: center;
	padding: 28px 24px;
}

.yp-stat--green {
	background: var(--yp-green);
}

.yp-stat--blue {
	background: var(--yp-blue);
}

.yp-stat--dark {
	background: #404040;
}

.yp-stat--value {
	font-size: clamp(32px, 3vw, 48px);
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.yp-stat--caption {
	font-size: 14px;
	line-height: 1.3;
	max-width: 13em;
}

.yp-partner-logo {
	margin-top: 40px;
	text-align: center;
}

.yp-partner-logo img {
	height: auto;
	max-width: 180px;
}

/* ---------- CTA ---------- */

.section-yp-cta {
	background: var(--yp-navy-deep);
	color: #fff;
	padding: 80px var(--yp-pad);
	text-align: center;
}

.section-yp-cta--heading {
	color: #fff;
	font-size: clamp(24px, 2.4vw, 46px);
	margin: 0 0 12px;
}

.section-yp-cta--link,
.section-yp-cta--link:hover {
	color: #fff;
	font-size: clamp(16px, 1.1vw, 20px);
	text-decoration: underline;
}

/* ---------- Tablet and below ---------- */

@media (max-width: 991.98px) {
	.section-yp-hero--inner {
		padding-top: 96px;
	}

	.section-yp-hero--copy {
		margin-bottom: 32px;
	}

	.section-yp-seed--body {
		flex-direction: column-reverse;
		gap: 40px;
	}

	.section-yp-seed--copy {
		flex: none;
		max-width: 480px;
		width: 100%;
	}

	.section-yp-seed--image {
		flex: none;
		max-width: 360px;
		width: 80%;
	}

	.yp-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------- Phones: results table becomes one card per product ---------- */

@media (max-width: 767.98px) {
	.yp-form-card {
		padding: 28px 22px;
	}

	.yp-form-card .gform_footer {
		justify-content: stretch;
	}

	.yp-form-card .gform_footer .gform_button {
		width: 100%;
	}

	.yp-cards {
		grid-template-columns: 1fr;
	}

	.yp-table,
	.yp-table tbody,
	.yp-table tr,
	.yp-table th,
	.yp-table td {
		display: block;
		width: 100%;
	}

	.yp-table thead {
		clip: rect(0 0 0 0);
		height: 1px;
		overflow: hidden;
		position: absolute;
		width: 1px;
	}

	.yp-table {
		background: transparent;
		overflow: visible;
	}

	.yp-table tbody tr {
		border-radius: 6px;
		margin-bottom: 16px;
		overflow: hidden;
	}

	.yp-table tbody th {
		background: rgba(0, 0, 0, .08);
		font-size: 14px;
		padding: 12px 16px;
	}

	.yp-table tbody td {
		align-items: center;
		display: flex;
		gap: 12px;
		justify-content: space-between;
		padding: 8px 16px;
	}

	.yp-table tbody td::before {
		color: var(--yp-text);
		content: attr(data-label);
		font-size: 12px;
		font-weight: 400;
		text-transform: none;
	}

	.yp-table tbody td:last-child {
		padding-bottom: 14px;
	}

	.yp-stats {
		grid-template-columns: 1fr;
	}
}