/* Section 01 only. Load after the service and font-preview stylesheets. */
:is(article#ys-landing-brand_consultant, article#ys-landing-speaker, article#ys-landing-training) [data-leave-with] .ys-leave-with__controls {
	align-items: center;
	flex-wrap: wrap;
}

:is(article#ys-landing-brand_consultant, article#ys-landing-speaker, article#ys-landing-training) [data-leave-with] .ys-leave-with__control {
	background-color: var(--ys-service-ivory);
	border: 1px solid var(--ys-service-navy);
	color: var(--ys-service-navy);
	flex: 0 0 auto;
}

:is(article#ys-landing-brand_consultant, article#ys-landing-speaker, article#ys-landing-training) [data-leave-with] .ys-leave-with__control:is(:hover, :focus-visible) {
	background-color: var(--ys-service-navy);
	border-color: var(--ys-service-navy);
	color: var(--ys-service-ivory);
}

:is(article#ys-landing-brand_consultant, article#ys-landing-speaker, article#ys-landing-training) [data-leave-with] .ys-leave-with__control:focus-visible {
	outline: 2px solid var(--ys-service-navy);
	outline-offset: 4px;
}

:is(article#ys-landing-brand_consultant, article#ys-landing-speaker, article#ys-landing-training) [data-leave-with] .ys-leave-with__control--autoplay {
	border-radius: 100vw;
	font-size: 0.75rem;
	font-weight: 600;
	min-width: 5rem;
	padding-inline: 0.75rem;
	width: auto;
}

/* Keep the autoplay stop control reachable without adding a visible button. */
:is(article#ys-landing-brand_consultant, article#ys-landing-speaker, article#ys-landing-training) [data-leave-with] .ys-leave-with__control--autoplay:not(:focus-visible) {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	min-height: 0;
	min-width: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

@media (max-width: 480px) {
	:is(article#ys-landing-brand_consultant, article#ys-landing-speaker, article#ys-landing-training) [data-leave-with] .ys-stamp-progress {
		flex-basis: 100%;
		justify-content: flex-end;
		margin-right: 0;
		min-height: 1rem;
	}
}
@media screen and (min-width: 1024px) {
	:is(article#ys-landing-brand_consultant section#recognition.ys-leave-with,
		article#ys-landing-speaker section#audience_outcome.ys-leave-with,
		article#ys-landing-training section#recognition.ys-leave-with) {
		--ys-one-space: clamp(2rem, 5vh, 4rem);
		box-sizing: border-box;
		min-height: 100vh;
		height: auto;
		padding: 0;
	}

	:is(article#ys-landing-brand_consultant section#recognition,
		article#ys-landing-speaker section#audience_outcome,
		article#ys-landing-training section#recognition) .ys-leave-with__inner {
		box-sizing: border-box;
		max-width: none;
		padding: 0;
	}

	:is(article#ys-landing-brand_consultant section#recognition,
		article#ys-landing-speaker section#audience_outcome,
		article#ys-landing-training section#recognition) .ys-leave-with__layout {
		min-height: 100vh;
	}

	:is(article#ys-landing-brand_consultant section#recognition,
		article#ys-landing-speaker section#audience_outcome,
		article#ys-landing-training section#recognition) .ys-leave-with__copy {
		justify-content: center;
		padding-block: var(--ys-one-space);
		padding-inline-start: clamp(1.25rem, 5vw, 5rem);
	}

	:is(article#ys-landing-brand_consultant section#recognition,
		article#ys-landing-speaker section#audience_outcome,
		article#ys-landing-training section#recognition) .ys-leave-with__eyebrow {
		margin-bottom: clamp(0.5rem, 1vh, 0.75rem);
	}

	article#ys-landing-brand_consultant section#recognition .ys-leave-with__copy {
		padding-inline-start: var(--ys-gutter);
	}

	/* Brand keeps its existing, reduced heading rule rather than inheriting
	 * a larger shared title size. The other titles never exceed their base. */
	:is(article#ys-landing-speaker section#audience_outcome,
		article#ys-landing-training section#recognition) .ys-leave-with__title {
		font-size: min(clamp(3rem, 5.5vw, 6.75rem), clamp(2.5rem, 7vh, 4rem));
	}

	:is(article#ys-landing-brand_consultant section#recognition,
		article#ys-landing-speaker section#audience_outcome,
		article#ys-landing-training section#recognition) .ys-leave-with__answer-block {
		margin-top: clamp(1rem, 2.5vh, 1.75rem);
		padding-top: clamp(0.75rem, 1.75vh, 1.25rem);
	}

	:is(article#ys-landing-brand_consultant section#recognition,
		article#ys-landing-speaker section#audience_outcome,
		article#ys-landing-training section#recognition) .ys-leave-with__answer {
		display: grid;
		font-size: min(clamp(1.7rem, 2.6vw, 3rem), clamp(1.7rem, 4vh, 2.25rem));
		min-height: 0;
	}

	/* Overlap incoming/outgoing layers without taking their text out of flow.
	 * Do not set height/max-height: JS may supply a measured inline height. */
	:is(article#ys-landing-brand_consultant section#recognition,
		article#ys-landing-speaker section#audience_outcome,
		article#ys-landing-training section#recognition) .ys-leave-with__answer-layer {
		grid-area: 1 / 1;
		inset: auto;
		position: relative;
	}

	:is(article#ys-landing-brand_consultant section#recognition,
		article#ys-landing-speaker section#audience_outcome,
		article#ys-landing-training section#recognition) .ys-leave-with__statement {
		margin-top: clamp(1rem, 2.5vh, 1.75rem);
	}

	:is(article#ys-landing-brand_consultant section#recognition,
		article#ys-landing-speaker section#audience_outcome,
		article#ys-landing-training section#recognition) .ys-leave-with__actions {
		margin-top: clamp(0.75rem, 1.75vh, 1.25rem);
		padding-top: clamp(0.75rem, 1.5vh, 1rem);
	}

	/* Fill the grid row, while allowing unusually tall text to expand it safely. */
	:is(article#ys-landing-brand_consultant section#recognition,
		article#ys-landing-speaker section#audience_outcome,
		article#ys-landing-training section#recognition) .ys-leave-with__portrait {
		align-self: stretch;
		height: 100%;
		width: 100%;
		min-height: 0;
		min-width: 0;
	}

	article#ys-landing-fractional_cbo section#leadership_gap {
		align-items: center;
		box-sizing: border-box;
		display: grid;
		min-height: 100vh;
		height: auto;
		padding-block: clamp(2rem, 5vh, 4rem);
	}

	article#ys-landing-fractional_cbo section#leadership_gap .ys-landing__section-heading {
		margin-bottom: clamp(1rem, 2.5vh, 1.75rem);
	}

	article#ys-landing-fractional_cbo section#leadership_gap .ys-landing__section-title {
		font-size: clamp(2.25rem, 3.6vw, 3.5rem);
	}

	article#ys-landing-fractional_cbo section#leadership_gap .ys-landing__prose {
		row-gap: clamp(1rem, 2.5vh, 1.75rem);
	}

	/* Keep the six-column grid, the centered second row, pin/fold details,
	 * and existing rotations. Remove only the large square-card constraint. */
	article#ys-landing-fractional_cbo section#leadership_gap .ys-landing__prose > ul {
		row-gap: clamp(0.8rem, 2vh, 1.1rem);
	}

	article#ys-landing-fractional_cbo section#leadership_gap .ys-landing__prose > ul > li {
		aspect-ratio: auto;
		min-height: clamp(6rem, 14vh, 8rem);
		padding-block: 2.25rem 1rem;
	}

	article#ys-landing-fractional_cbo section#leadership_gap .ys-landing__prose > p:last-child {
		font-size: min(clamp(2rem, 3.2vw, 3.35rem), clamp(1.75rem, 4vh, 2.25rem));
		padding-top: 0.75rem;
	}

	article#ys-landing-fractional_cbo section#leadership_gap .ys-landing__actions {
		margin-top: clamp(1rem, 2.5vh, 1.75rem);
	}
}