.cpa-section-3,
.cpa-section-3 *,
.cpa-section-3 *::before,
.cpa-section-3 *::after {
	box-sizing: border-box;
}

.cpa-section-3 {
	--cpa-s3-sage: #92a483;
	--cpa-s3-sage-dark: #6d7c60;
	--cpa-s3-brown: #675b4b;
	--cpa-s3-cream: #f3f0e9;
	--cpa-s3-white: #fff;
	position: relative;
	width: 100vw;
	height: 100vh;
	height: 100svh;
	min-height: 40rem;
	margin: 0 0 0 calc(50% - 50vw);
	overflow: hidden;
	isolation: isolate;
	border-block: 1px solid color-mix(in srgb, var(--cpa-s3-sage) 75%, transparent);
	background: var(--cpa-s3-white);
	color: var(--cpa-s3-brown);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.cpa-section-3__track {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	width: max-content;
	height: 100%;
	transform: translate3d(9vw, 0, 0);
	will-change: transform;
}

.cpa-section-3__content {
	--cpa-s3-title-size: clamp(9rem, 22vw, 26rem);
	position: relative;
	width: max-content;
}

.cpa-section-3__phrase {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	color: var(--cpa-s3-sage);
	font-family: inherit;
	font-size: var(--cpa-s3-title-size);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.095em;
	text-transform: uppercase;
	text-rendering: geometricPrecision;
	white-space: nowrap;
	user-select: none;
}

.cpa-section-3__mascot {
	position: absolute;
	z-index: 4;
	margin: 0;
	pointer-events: none;
	user-select: none;
}

.cpa-section-3__mascot img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	border: 0;
	box-shadow: none;
}

.cpa-section-3__mascot--reader {
	top: 62%;
	left: calc(var(--cpa-s3-title-size) * 0.65);
	width: clamp(5.25rem, 11.5vw, 9.5rem);
	transform: rotate(-7deg);
}

.cpa-section-3__mascot--wave {
	top: -38%;
	left: calc(var(--cpa-s3-title-size) * 2.25);
	width: clamp(6.5rem, 14vw, 11.5rem);
	transform: rotate(5deg);
}

.cpa-section-3__chunk,
.cpa-section-3__focal-character {
	display: inline-block;
}

.cpa-section-3__focal-character {
	position: relative;
	z-index: 3;
}

.cpa-section-3__scroll-cue {
	position: absolute;
	z-index: 4;
	right: clamp(1.25rem, 3vw, 2.5rem);
	bottom: clamp(1.25rem, 3vw, 2.5rem);
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--cpa-s3-brown);
	font-family: inherit;
	font-size: clamp(0.58rem, 0.7vw, 0.72rem);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.cpa-section-3__scroll-line {
	position: relative;
	width: clamp(2.5rem, 5vw, 4.5rem);
	height: 1px;
	overflow: hidden;
	background: color-mix(in srgb, var(--cpa-s3-brown) 25%, transparent);
}

.cpa-section-3__scroll-line::after {
	position: absolute;
	inset: 0;
	content: "";
	background: var(--cpa-s3-brown);
	animation: cpa-s3-cue 1.8s ease-in-out infinite;
	transform: translateX(-105%);
}

.cpa-section-3__final {
	position: absolute;
	z-index: 6;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 1.25rem;
	text-align: center;
	pointer-events: none;
}

.cpa-section-3__final-bg {
	position: absolute;
	z-index: 5;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 12% 82%, color-mix(in srgb, var(--cpa-s3-sage-dark) 78%, transparent) 0 10%, transparent 39%),
		radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--cpa-s3-brown) 48%, transparent) 0 9%, transparent 38%),
		linear-gradient(115deg, color-mix(in srgb, var(--cpa-s3-sage) 88%, var(--cpa-s3-cream)) 0%, color-mix(in srgb, var(--cpa-s3-sage) 58%, var(--cpa-s3-sage-dark)) 32%, color-mix(in srgb, var(--cpa-s3-sage) 92%, var(--cpa-s3-cream)) 57%, var(--cpa-s3-sage-dark) 100%);
	background-size: 135% 145%, 145% 135%, 180% 100%;
	background-position: 0% 100%, 100% 0%, 0% 50%;
	animation: cpa-s3-final-background 5.5s ease-in-out infinite alternate;
	will-change: opacity, background-position;
}

.cpa-section-3__final-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	transform: translateY(2rem);
	opacity: 0;
	will-change: transform, opacity;
}

.cpa-section-3__answer {
	max-width: 24ch;
	margin: 0 0 clamp(1.4rem, 3.5vh, 2.4rem);
	color: var(--cpa-s3-white);
	font-family: inherit;
	font-size: clamp(1.6rem, 3.1vw, 3.6rem);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.042em;
	text-wrap: balance;
	text-transform: uppercase;
}

.cpa-section-3__cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(10rem, 21vw, 14rem);
	min-height: clamp(2.75rem, 4vw, 3.4rem);
	padding: 0.75rem 1.25rem;
	overflow: hidden;
	border: 1px solid var(--cpa-s3-white);
	border-radius: 0.28rem;
	background: var(--cpa-s3-white);
	color: var(--cpa-s3-sage-dark);
	font-family: inherit;
	font-size: clamp(0.62rem, 0.72vw, 0.76rem);
	font-weight: 700;
	letter-spacing: 0.055em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 240ms ease, border-color 240ms ease;
}

.cpa-section-3__cta::before {
	position: absolute;
	inset: 0;
	content: "";
	background: var(--cpa-s3-sage-dark);
	transform: translateY(102%);
	transition: transform 280ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.cpa-section-3__cta span {
	position: relative;
	z-index: 1;
}

.cpa-section-3__cta:hover,
.cpa-section-3__cta:focus-visible {
	border-color: var(--cpa-s3-white);
	color: var(--cpa-s3-white);
	outline: none;
}

.cpa-section-3__cta:hover::before,
.cpa-section-3__cta:focus-visible::before {
	transform: translateY(0);
}

@keyframes cpa-s3-cue {
	0% { transform: translateX(-105%); }
	45%, 55% { transform: translateX(0); }
	100% { transform: translateX(105%); }
}

@keyframes cpa-s3-final-background {
	0% { background-position: 0% 100%, 100% 0%, 0% 50%; }
	50% { background-position: 78% 28%, 30% 72%, 60% 50%; }
	100% { background-position: 100% 0%, 0% 100%, 100% 50%; }
}

@media (max-width: 760px) {
	.cpa-section-3 { min-height: 35rem; }
	.cpa-section-3__content { --cpa-s3-title-size: clamp(8rem, 38vw, 14rem); }
	.cpa-section-3__track { transform: translate3d(7vw, 0, 0); }
	.cpa-section-3__mascot--reader { top: 64%; left: calc(var(--cpa-s3-title-size) * 0.62); width: clamp(4.5rem, 23vw, 7rem); }
	.cpa-section-3__mascot--wave { top: -34%; left: calc(var(--cpa-s3-title-size) * 2.15); width: clamp(5.5rem, 27vw, 8rem); }
	.cpa-section-3__final { padding: 1.5rem; }
	.cpa-section-3__final-inner { width: min(100%, 32rem); }
	.cpa-section-3__answer { max-width: 22ch; margin-bottom: clamp(1.5rem, 5vh, 2rem); font-size: clamp(1.4rem, 6.2vw, 2.1rem); line-height: 1.06; letter-spacing: -0.035em; }
	.cpa-section-3__cta { width: min(100%, 12rem); min-width: 0; min-height: 2.9rem; padding: 0.75rem 1rem; font-size: 0.62rem; letter-spacing: 0.055em; }
}

@media (max-width: 360px) {
	.cpa-section-3__answer { max-width: 19ch; font-size: 1.42rem; }
	.cpa-section-3__cta { font-size: 0.6rem; letter-spacing: 0.045em; }
}

@media (max-height: 520px) and (orientation: landscape) {
	.cpa-section-3 { min-height: 100svh; }
	.cpa-section-3__phrase { font-size: min(26vw, 12rem); }
	.cpa-section-3__answer { margin-bottom: 1.25rem; font-size: clamp(2rem, 9vh, 4rem); }
	.cpa-section-3__cta { min-height: 3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
	.cpa-section-3 { background: var(--cpa-s3-sage); }
	.cpa-section-3__track,
	.cpa-section-3__content,
	.cpa-section-3__final-inner { transform: none; }
	.cpa-section-3__track,
	.cpa-section-3__scroll-cue,
	.cpa-section-3__content { display: none; }
	.cpa-section-3__final { pointer-events: auto; }
	.cpa-section-3__final-bg { opacity: 1; animation: none; }
	.cpa-section-3__final-inner { opacity: 1; }
}