/*
 * eoa-wave-hero.css — homepage full-bleed dark hero (frozen-prototype initial state) + the
 * floating light card containing the journey "wave" selector. Cacheable shared stylesheet.
 * Functional-first, faithful to the prototype's own tokens (docs/design/eoa/"Experience
 * Optimization Agent.dc.html"): dark bg #070B14, radial glow, white H1, light card
 * linear-gradient(180deg,#FFFFFF,#F4F6FB).
 *
 * 2026-07-13 PASS 1 rebuild: phases 2-5 (journey/problems/processing/result) now port the
 * prototype's circleNode()/ghostCircle()/rectNode()/pathThrough()/layout()/buildScene() logic
 * near-verbatim in eoa-wave-hero.js, which computes most per-node styling as INLINE styles
 * (matching the prototype's own architecture, which is entirely JS-computed inline style
 * strings). This stylesheet supplies the base classes those inline styles layer onto (sizing
 * defaults, hover/focus-visible pseudo-states inline styles can't express) plus the fully-static
 * chrome/chips/insight/processing/result structure.
 */

.eoa-wave-hero {
	display: block;
	width: 100%;
	/* ROOT CAUSE (2026-07-12): the glyph sprite <svg> now printed before this section (for the
	   journey/stage node icons) made .eoa-wave-hero the SECOND child of <main>, not the first —
	   WP core's default flow-layout block-gap only skips margin-block-start on :first-child, so
	   the "* + *" sibling rule kicked in and reintroduced the exact header-to-hero gap the
	   front-page.html main-margin fix was meant to close. Zeroing it here is robust regardless of
	   what ends up before this section in the markup. */
	margin-top: 0;
}

.eoa-wave-hero__dark {
	box-sizing: border-box;
	width: 100%;
	background: #070b14;
	background-image: radial-gradient( 130% 80% at 50% -6%, rgba( 35, 83, 212, 0.16 ), transparent 56% );
	padding: 2.6rem 1.4rem 5.5rem;
}

.eoa-wave-hero__eyebrow {
	max-width: 1040px;
	margin: 0 auto 1rem;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #7fa0f0;
}

.eoa-wave-hero__h1 {
	max-width: 1040px;
	margin: 0 auto;
	font-family: 'Schibsted Grotesk', sans-serif;
	font-weight: 700;
	font-size: clamp( 1.9rem, 4.6vw, 3.25rem );
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: #f3f6fb;
	text-wrap: balance;
}

.eoa-wave-hero__card-wrap {
	box-sizing: border-box;
	width: 100%;
	background: #070b14;
	padding: 0 1.4rem 3.5rem;
}

.eoa-wave-hero__card {
	max-width: 1000px;
	margin: -3.4rem auto 0;
	background: linear-gradient( 180deg, #ffffff 0%, #f4f6fb 100% );
	border: 1px solid #e4e8f1;
	border-radius: 28px;
	padding: clamp( 1.2rem, 2.6vw, 2rem );
	box-shadow: 0 1px 0 rgba( 255, 255, 255, 0.8 ) inset, 0 2px 4px rgba( 16, 24, 40, 0.04 ), 0 12px 28px -12px rgba( 16, 24, 40, 0.18 ), 0 44px 90px -46px rgba( 16, 24, 40, 0.3 );
	position: relative;
}

.eoa-wave-hero__sr-status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

/* ---- chrome row: static label / "mapping X" + editable chips ---- */
.eoa-wave-hero__chrome {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.eoa-wave-hero__chrome-left {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	flex-wrap: wrap;
}

.eoa-wave-hero__chrome-dot {
	width: 9px;
	height: 9px;
	border-radius: 3px;
	background: #2353d4;
	transform: rotate( 45deg );
	flex: 0 0 auto;
}

.eoa-wave-hero__chrome-label {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #404a56;
}

.eoa-wave-hero__chrome-mapping {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #0e9c84;
}

.eoa-wave-hero__chrome-exp {
	font-family: 'Schibsted Grotesk', sans-serif;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: -0.01em;
	color: #0b1220;
}

.eoa-wave-hero__chrome-phase {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #9aa6b8;
}

.eoa-wave-hero__chips {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.eoa-wave-hero__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	border: 1px solid #dce3ef;
	background: #f1f4fa;
	color: #3f4e68;
	font-size: 0.78rem;
	font-weight: 500;
	cursor: pointer;
	min-height: 32px;
}

.eoa-wave-hero__chip:hover {
	border-color: #b9c6dd;
	background: #e9eef7;
}

.eoa-wave-hero__chip-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex: 0 0 auto;
}

/* ---- shared question / insight block ---- */
.eoa-wave-hero__question-wrap {
	margin-top: 0.6rem;
	min-height: 34px;
}

.eoa-wave-hero__phase {
	border: 0;
	padding: 0;
	margin: 0;
}

.eoa-wave-hero__q {
	font-family: 'Hanken Grotesk', sans-serif;
	font-weight: 600;
	font-size: clamp( 1.15rem, 2.4vw, 1.55rem );
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #0b1220;
	margin: 0;
	padding: 0;
}

.eoa-wave-hero__insight {
	margin-top: 0.6rem;
	display: flex;
	align-items: flex-start;
	gap: 9px;
	max-width: 35em;
}

.eoa-wave-hero__insight[ hidden ] {
	display: none;
}

.eoa-wave-hero__insight-dot {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	background: #0e9c84;
	transform: rotate( 45deg );
	margin-top: 6px;
}

.eoa-wave-hero__insight-text {
	font-size: 1rem;
	line-height: 1.45;
	color: #404a56;
}

/* ROOT CAUSE (2026-07-14, revised 2026-07-12): showPhase() sets tabindex="-1" + calls .focus()
   on each phase's heading/legend/kicker so screen readers land on the new content. In real-world
   testing, Chrome's :focus-visible heuristic still painted a ring for this script-triggered
   focus — these elements are never real Tab stops anyway (tabindex="-1" removes them from the
   natural Tab order), so there's no genuine keyboard case to protect. Suppress unconditionally. */
[ tabindex="-1" ]:focus {
	outline: none !important;
}

/* ---- map canvas (phases 1-3: experiences/journey/problems) — absolute-positioned nodes over
   an SVG connector, geometry computed in JS to match layout()/buildScene() exactly at every
   viewport width (no CSS breakpoint collapse — the prototype itself re-lays-out via a `mob` JS
   flag, not a different DOM structure, so this stays absolute-positioned at every width). ---- */
.eoa-wave-hero__canvas {
	position: relative;
	width: 100%;
	margin-top: 0.85rem;
}

.eoa-wave-hero__path-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.eoa-wave-hero__node {
	position: absolute;
	transform: translate( -50%, -50% );
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

.eoa-wave-hero__node-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient( 158deg, #ffffff 0%, #e8eef9 100% );
	border: 1px solid #d3dcec;
	box-shadow: 0 6px 15px -5px rgba( 16, 24, 40, 0.24 ), 0 1px 0 rgba( 255, 255, 255, 0.9 ) inset;
}

.eoa-wave-hero__node:hover .eoa-wave-hero__node-tile {
	box-shadow: 0 15px 28px -8px rgba( 16, 24, 40, 0.36 );
}

.eoa-wave-hero__node:hover {
	transform: translate( -50%, -50% ) translateY( -3px );
}

.eoa-wave-hero__node:focus-visible {
	outline: 2px solid #2353d4;
	outline-offset: 3px;
	border-radius: 50%;
}

/* :not() exclusion added 2026-07-13 — this rule's specificity (3 class/attr selectors) was
   silently beating .eoa-wave-hero__node-tile--stage-card's solid-blue background (1 class),
   washing the problems-screen stage card out to a pale rgba(...,0.16) tint instead of the
   spec'd solid primary blue. Every other node (experience-picker, journey) still gets the
   pale pressed-wash background exactly as before — only the stage-card tile is excluded. */
.eoa-wave-hero__node[ aria-pressed="true" ] .eoa-wave-hero__node-tile:not( .eoa-wave-hero__node-tile--stage-card ) {
	background: rgba( 35, 83, 212, 0.16 );
}

.eoa-wave-hero__node-label {
	position: absolute;
	top: calc( 100% + 8px );
	left: 50%;
	transform: translateX( -50% );
	white-space: nowrap;
	font-size: 0.75rem;
	font-weight: 600;
	color: #0b1220;
	letter-spacing: -0.01em;
}

/* icon pop — icons visually extend past the circle's edge for a dimensional feel, consistent on
   every circle-and-icon node everywhere this pattern appears. */
.eoa-wave-hero__node-icon {
	transform: scale( 1.34 );
	filter: drop-shadow( 0 3px 4px rgba( 16, 24, 40, 0.16 ) );
}

/* ghost circle — faint, non-interactive echo of the prior selection (spatial memory). */
.eoa-wave-hero__ghost {
	position: absolute;
	transform: translate( -50%, -50% );
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid #d6dfee;
	background: linear-gradient( 158deg, #ffffff, #eef2fa );
	opacity: 0.32;
	pointer-events: none;
}

.eoa-wave-hero__ghost-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba( 35, 83, 212, 0.05 );
}

/* rect node — friction/problem cards fanned to the right of the selected stage. */
.eoa-wave-hero__rect {
	position: absolute;
	transform: translate( -50%, -50% );
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	min-height: 52px;
	padding: 11px 13px;
	border-radius: 14px;
	border: 1.5px solid #d9dee9;
	background: linear-gradient( 180deg, #ffffff, #f6f8fb );
	color: #0b1220;
	text-align: left;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba( 16, 24, 40, 0.08 );
}

.eoa-wave-hero__rect:hover {
	border-color: #b9c6dd;
	transform: translate( -50%, -50% ) translateY( -1px );
	box-shadow: 0 8px 18px -8px rgba( 16, 24, 40, 0.25 );
}

.eoa-wave-hero__rect:focus-visible {
	outline: 2px solid #2353d4;
	outline-offset: 2px;
}

.eoa-wave-hero__rect--coral {
	border-color: #e5534b;
	background: #fff1f0;
}

.eoa-wave-hero__rect-kicker {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 9px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #667080;
}

.eoa-wave-hero__rect--coral .eoa-wave-hero__rect-kicker {
	color: #c0453d;
}

.eoa-wave-hero__rect-label {
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.25;
}

.eoa-wave-hero__fan-link {
	fill: none;
}

.eoa-wave-hero__more-toggle {
	margin-top: 12px;
	text-align: center;
}

.eoa-wave-hero__more-toggle[ hidden ] {
	display: none;
}

.eoa-wave-hero__back,
.eoa-wave-hero__textbtn {
	background: none;
	border: none;
	color: #667080;
	font-size: 0.85rem;
	font-weight: 500;
	cursor: pointer;
	padding: 0.6rem 0.2rem;
	min-height: 44px;
	margin-top: 0.75rem;
}

.eoa-wave-hero__back:hover,
.eoa-wave-hero__textbtn:hover {
	color: #0b1220;
}

/* ---- animations (named to match the prototype's own keyframes) ---- */
@keyframes eoaPop {
	from {
		opacity: 0;
		transform: translate( -50%, -50% ) scale( 0.8 );
	}

	to {
		opacity: 1;
		transform: translate( -50%, -50% ) scale( 1 );
	}
}

@keyframes eoaPulse {
	0% {
		box-shadow: 0 0 0 0 rgba( 229, 83, 75, 0.45 );
	}

	100% {
		box-shadow: 0 0 0 14px rgba( 229, 83, 75, 0 );
	}
}

@keyframes eoaDraw {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes eoaDashFlow {
	to {
		stroke-dashoffset: -14;
	}
}

@keyframes eoaTravel {
	0% {
		left: 12%;
		opacity: 0;
	}

	15% {
		opacity: 1;
	}

	85% {
		opacity: 1;
	}

	100% {
		left: 88%;
		opacity: 0;
	}
}

@keyframes eoaFadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes eoaFadeUp {
	from {
		opacity: 0;
		transform: translateY( 10px );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes eoaEmerge {
	from {
		opacity: 0;
		transform: translateY( 8px ) scale( 0.94 );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.eoa-wave-hero__node,
	.eoa-wave-hero__rect,
	.eoa-wave-hero__fan-link,
	.eoa-wave-hero__ghost,
	.eoa-wave-hero__proc-box--problem,
	.eoa-wave-hero__proc-box--stage,
	.eoa-wave-hero__proc-connector,
	.eoa-wave-hero__proc-mark,
	.eoa-wave-hero__proc-connector--dash,
	.eoa-wave-hero__resolved-pill,
	.eoa-wave-hero__proc-spark {
		animation: none !important;
	}
}

/* ---- phase 3.5: generic micro-load beat (microLoad()) — AD mark + a short label, shown on
   every forward step. ---- */
.eoa-wave-hero__microload {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	padding: 1.75rem 0;
	min-height: 160px;
}

.eoa-wave-hero__microload[ hidden ] {
	display: none;
}

.eoa-wave-hero__microload-label {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #404a56;
	margin: 0;
}

/* ---- phase 4: processing — matches the prototype's ACTUAL rendered markup (stage box ->
   connector -> problem box -> dashed connector -> AD mark), NOT buildScene()'s dead circle-node
   diagram (unreachable in the source: onCanvas excludes 'processing'). ---- */
.eoa-wave-hero__processing {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1.25rem 1rem 1.5rem;
}

.eoa-wave-hero__processing[ hidden ] {
	display: none;
}

.eoa-wave-hero__proc-row {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0;
}

.eoa-wave-hero__proc-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 9px 13px;
	min-height: 46px;
	border-radius: 11px;
	box-shadow: 0 6px 14px -7px rgba( 35, 83, 212, 0.5 );
}

.eoa-wave-hero__proc-box--stage {
	background: linear-gradient( 160deg, #2e63e8, #2353d4 );
	/* 2026-07-13 (Alex): stagger the processing screen's pieces in one at a time instead of all
	   popping in together — stage box first, then the connector, then the problem box, then its
	   connector, then the AD mark icon last (so it reads as "still working" once everything else
	   has settled). Reuses eoaEmerge (opacity+translateY+scale, no absolute-position transform —
	   unlike eoaPop — so it's safe on a normal-flow element). Reduced-motion strips all of this,
	   see the animation:none block above. */
	animation: eoaEmerge 0.45s cubic-bezier( 0.2, 0.7, 0.2, 1 ) both;
}

.eoa-wave-hero__proc-box--problem {
	background: linear-gradient( 160deg, #ee6a62, #e5534b );
	box-shadow: 0 6px 14px -7px rgba( 229, 83, 75, 0.5 );
	max-width: 172px;
	/* Fade-in first, THEN the pulse loop starts (delayed past the fade's own duration so it
	   doesn't scale-pulse while still fading in). */
	animation: eoaEmerge 0.45s cubic-bezier( 0.2, 0.7, 0.2, 1 ) 0.25s both, eoaPulse 1.3s ease-out 0.7s infinite;
}

.eoa-wave-hero__proc-kicker {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 8.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.75 );
}

.eoa-wave-hero__proc-value {
	font-size: 0.75rem;
	font-weight: 600;
	color: #ffffff;
	margin-top: 1px;
}

.eoa-wave-hero__proc-connector {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	animation: eoaEmerge 0.4s cubic-bezier( 0.2, 0.7, 0.2, 1 ) 0.15s both;
}

.eoa-wave-hero__proc-connector--solid {
	margin: 0 6px;
}

.eoa-wave-hero__proc-bar {
	width: 12px;
	height: 2.5px;
	border-radius: 2px;
	background: #e5534b;
}

.eoa-wave-hero__proc-diamond {
	width: 8px;
	height: 8px;
	background: #e5534b;
	transform: rotate( 45deg );
	margin: 0 4px;
	flex: 0 0 auto;
}

.eoa-wave-hero__proc-connector--dash {
	position: relative;
	width: 24px;
	border-top: 2.5px dashed #0e9c84;
	margin: 0 3px;
	/* Later than the base .eoa-wave-hero__proc-connector delay above — this one comes after the
	   problem box (which itself starts at 0.25s), not right after the stage box. */
	animation-delay: 0.55s;
}

.eoa-wave-hero__proc-spark {
	position: absolute;
	top: -3.5px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #0e9c84;
	box-shadow: 0 0 6px rgba( 14, 156, 132, 0.6 );
	animation: eoaTravel 1.3s ease-in-out infinite;
}

.eoa-wave-hero__proc-spark--2 {
	background: #5fd3be;
	width: 5px;
	height: 5px;
	animation-delay: 0.5s;
}

.eoa-wave-hero__proc-mark {
	width: 150px;
	height: 94px;
	max-width: 40vw;
	/* Last piece to appear — its own internal loading animation (AlexDesignsAdMark) keeps moving
	   after this fade-in finishes, reading as "still working" for the rest of the 5s minimum
	   dwell (see startProcessing()'s delay in eoa-wave-hero.js). */
	animation: eoaEmerge 0.45s cubic-bezier( 0.2, 0.7, 0.2, 1 ) 0.65s both;
}

.eoa-wave-hero__processing-label {
	font-family: 'Schibsted Grotesk', sans-serif;
	font-weight: 700;
	font-size: clamp( 1.375rem, 2.6vw, 1.75rem );
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #0b1220;
	margin: 1rem 0 0;
}

.eoa-wave-hero__processing-note {
	font-size: 1.06rem;
	line-height: 1.5;
	color: #404a56;
	margin: 0.45rem 0 0;
	max-width: 44ch;
}

/* ---- phase 5: result ---- */
.eoa-wave-hero__result[ hidden ] {
	display: none;
}

.eoa-wave-hero__result-kicker {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #0e9c84;
	margin: 1rem 0 0.5rem;
}

.eoa-wave-hero__result-headline {
	font-family: 'Schibsted Grotesk', sans-serif;
	font-weight: 700;
	font-size: clamp( 1.4rem, 3.2vw, 2rem );
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #0b1220;
	margin: 0 0 0.9rem;
	max-width: 100%;
	width: 100%;
}

.eoa-wave-hero__read-row {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	margin-bottom: 0.9rem;
}

.eoa-wave-hero__read-icon {
	flex: 0 0 auto;
	display: flex;
}

.eoa-wave-hero__read-text {
	font-size: 1rem;
	line-height: 1.5;
	color: #3f4e68;
}

/* resolved path: stage -> problem -> opportunity, matching the prototype's exact pill styling */
.eoa-wave-hero__resolved-path {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin-bottom: 0.9rem;
}

.eoa-wave-hero__resolved-pill {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 10px 15px;
	min-height: 50px;
	border-radius: 12px;
	box-shadow: 0 1px 0 rgba( 255, 255, 255, 0.25 ) inset;
	/* 2026-07-13 (Alex): without this, width:100% (set on mobile below) is a content-box width and
	   this rule's own left/right padding adds ON TOP of it, so each stacked pill ran 30px wider
	   than its container — sticking out past the light card's edges on both sides. Same lesson as
	   .eoa-wave-hero__cta's own box-sizing note just below. */
	box-sizing: border-box;
}

.eoa-wave-hero__resolved-pill--stage {
	background: linear-gradient( 160deg, #2e63e8, #2353d4 );
	box-shadow: 0 7px 16px -7px rgba( 35, 83, 212, 0.55 ), 0 1px 0 rgba( 255, 255, 255, 0.25 ) inset;
	max-width: 184px;
}

.eoa-wave-hero__resolved-pill--problem {
	background: linear-gradient( 160deg, #ee6a62, #e5534b );
	box-shadow: 0 7px 16px -7px rgba( 229, 83, 75, 0.55 ), 0 1px 0 rgba( 255, 255, 255, 0.25 ) inset;
	max-width: 196px;
}

.eoa-wave-hero__resolved-pill--opportunity {
	background: linear-gradient( 160deg, #12ae94, #0e9c84 );
	box-shadow: 0 9px 22px -7px rgba( 14, 156, 132, 0.6 ), 0 1px 0 rgba( 255, 255, 255, 0.28 ) inset;
	padding: 11px 17px;
}

.eoa-wave-hero__emerge {
	animation: eoaEmerge 0.55s cubic-bezier( 0.2, 0.7, 0.2, 1 ) 0.16s both;
}

.eoa-wave-hero__resolved-kicker {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 9px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.75 );
}

.eoa-wave-hero__resolved-value {
	font-size: 0.8rem;
	font-weight: 600;
	color: #ffffff;
	margin-top: 2px;
}

.eoa-wave-hero__resolved-value--opportunity {
	font-family: 'Schibsted Grotesk', sans-serif;
	font-weight: 700;
	font-size: 1rem;
}

.eoa-wave-hero__resolved-connector {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.eoa-wave-hero__resolved-connector--solid {
	margin: 0 7px;
}

.eoa-wave-hero__resolved-connector--solid .eoa-wave-hero__proc-bar {
	width: 14px;
}

.eoa-wave-hero__resolved-connector--solid .eoa-wave-hero__proc-diamond {
	width: 9px;
	height: 9px;
	margin: 0 5px;
	box-shadow: 0 0 9px rgba( 229, 83, 75, 0.55 );
}

.eoa-wave-hero__resolved-connector--dash {
	margin: 0 9px;
}

.eoa-wave-hero__resolved-dash {
	width: 26px;
	border-top: 3px dashed #0e9c84;
}

.eoa-wave-hero__resolved-arrowhead {
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 9px solid #0e9c84;
}

/* mini journey teaser */
.eoa-wave-hero__teaser {
	margin-bottom: 1rem;
	/* 2026-07-13 (Alex): section separator — a hairline + extra top space so the result screen's
	   three chunks (diagnosis+path / journey teaser / roadmap) read as distinct, organized
	   sections instead of one continuous block. */
	padding-top: 1.1rem;
	border-top: 1px solid #e2e7f0;
}

.eoa-wave-hero__teaser-label {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.62rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #667080;
	margin: 0;
}

.eoa-wave-hero__teaser-pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin-top: 0.65rem;
}

.eoa-wave-hero__teaser-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 11px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
	border: 1px solid #dce3ef;
	background: #ffffff;
	color: #404a56;
}

.eoa-wave-hero__teaser-pill--friction {
	border-color: #e5534b;
	background: linear-gradient( 160deg, #ee6a62, #e5534b );
	color: #ffffff;
}

.eoa-wave-hero__teaser-pill--down {
	border-color: #bfe6da;
	background: #eaf6f2;
	color: #0b3b32;
}

.eoa-wave-hero__teaser-pill-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex: 0 0 auto;
	background: #b7c2d6;
}

.eoa-wave-hero__teaser-pill--friction .eoa-wave-hero__teaser-pill-dot {
	background: #ffffff;
}

.eoa-wave-hero__teaser-pill--down .eoa-wave-hero__teaser-pill-dot {
	background: #0e9c84;
}

.eoa-wave-hero__teaser-caption {
	font-size: 0.81rem;
	color: #0b7a66;
	margin: 0.55rem 0 0;
}

/* 30/60/90 roadmap teaser */
.eoa-wave-hero__roadmap-teaser {
	max-width: 41.25em;
	margin-bottom: 1rem;
	/* Same section-separator treatment as .eoa-wave-hero__teaser above. */
	padding-top: 1.1rem;
	border-top: 1px solid #e2e7f0;
}

.eoa-wave-hero__roadmap-label {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.62rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #404a56;
	margin: 0;
}

.eoa-wave-hero__roadmap-grid {
	display: grid;
	/* minmax(11.25rem,1fr) already collapses to a single column once available width can't fit
	   two — no separate mobile override needed, this is the "similar pattern, no horizontal
	   scroll" behavior on mobile Alex asked for. */
	grid-template-columns: repeat( auto-fit, minmax( 11.25rem, 1fr ) );
	gap: 0.75rem;
	margin-top: 0.75rem;
}

/* 2026-07-13 (Alex): dark blue cards (was pale white/light-blue) so the roadmap reads as a
   distinct, organized block against the light-section background — same dark-navy family as the
   hero above it, not a new color. Two accent variants: teal for the "you can do this yourself"
   card (day 1), blue for the two "AlexDesigns/partnership" cards (day 2-3) — both light-on-dark
   tints already used elsewhere in this file for text on this exact background (see
   .eoa-wave-hero__eyebrow's #7fa0f0), so contrast is proven, not guessed. */
.eoa-wave-hero__roadmap-card {
	padding: 0.9rem 1rem;
	border-radius: 12px;
	border: none;
	background: linear-gradient( 165deg, #16213f, #0b1220 );
	box-shadow: 0 10px 24px -14px rgba( 11, 18, 32, 0.55 ), 0 1px 0 rgba( 255, 255, 255, 0.06 ) inset;
}

.eoa-wave-hero__roadmap-day {
	display: block;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.6rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #7fa0f0;
}

.eoa-wave-hero__roadmap-card--self .eoa-wave-hero__roadmap-day {
	color: #5ee6c4;
}

.eoa-wave-hero__roadmap-verb {
	display: block;
	font-family: 'Schibsted Grotesk', sans-serif;
	font-size: 0.85rem;
	font-weight: 700;
	color: #ffffff;
	margin-top: 3px;
}

.eoa-wave-hero__roadmap-line {
	display: block;
	font-size: 0.72rem;
	line-height: 1.4;
	color: #b7c2d6;
	margin-top: 7px;
}

.eoa-wave-hero__roadmap-note {
	display: block;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.6rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #7fa0f0;
	margin-top: 10px;
}

.eoa-wave-hero__roadmap-card--self .eoa-wave-hero__roadmap-note {
	color: #5ee6c4;
}

.eoa-wave-hero__result-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

/* Sticky bottom bar for the "See your full action plan" CTA on the preview/result screen —
   position:sticky (not fixed), so it stays reachable while scrolling the roadmap/teaser content
   ABOVE it, but once you scroll far enough to reach where it naturally sits (end of the result
   content), it settles into that original in-flow position instead of floating over whatever
   comes after it. This is native sticky behavior, no JS/scroll-listener needed: the element stays
   in normal document flow and only pins to the viewport edge while its own flow position would
   otherwise scroll off-screen. Scoped to the result phase being the active (not [hidden]) phase
   so it never floats over the experience/journey/problems screens. No bottom padding-reservation
   needed on the phase (unlike a fixed bar) — a sticky element still occupies its own flow space. */
[ data-eoa-phase="result" ]:not( [ hidden ] ) .eoa-wave-hero__result-actions {
	position: sticky;
	bottom: 0;
	z-index: 60;
	justify-content: center;
	padding: 0.75rem 1.25rem calc( 0.75rem + env( safe-area-inset-bottom, 0px ) );
	background: rgba( 255, 255, 255, 0.96 );
	border-top: 1px solid #dfe5eb;
	box-shadow: 0 -4px 14px rgba( 16, 24, 40, 0.1 );
}

.eoa-wave-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #2353d4;
	color: #fff;
	font-weight: 600;
	font-size: 0.9rem;
	padding: 0.8rem 1.3rem;
	border-radius: 13px;
	text-decoration: none;
	/* 2026-07-13 (Alex): capped at exactly 40px desktop / 30px mobile (was min-height:48px, no
	   cap). box-sizing:border-box is required or the padding above adds on top of max-height
	   instead of being absorbed by it (see cta-min-height.css's own note on the same lesson for
	   .ad-cta-mobile). Mobile override lives in the existing ≤781px block below. */
	min-height: 40px;
	max-height: 40px;
	box-sizing: border-box;
}

.eoa-wave-hero__cta:hover {
	background: #2f61e6;
}

.eoa-wave-hero__cta:focus-visible {
	outline: 2px solid #93b0ff;
	outline-offset: 2px;
}

/* Short label swaps in at ≤480px (see that breakpoint) so the CTA + "Start over" fit one row. */
.eoa-wave-hero__cta-label--short {
	display: none;
}

.eoa-wave-hero__noscript {
	font-size: 0.85rem;
	color: #667080;
	margin-top: 1rem;
}

/* Tablet whitespace pass (2026-07-14): tighten the dark band's own padding (the floating card
   overlaps it via negative margin, so this is pure top/bottom air) and the transient micro-load/
   processing beats, which don't need as much room as the desktop pass left them. */
@media ( max-width: 781px ) {
	.eoa-wave-hero__dark {
		padding: 1.9rem 1.1rem 4.25rem;
	}

	.eoa-wave-hero__eyebrow {
		margin-bottom: 0.65rem;
	}

	/* "See your full action plan" CTA: 30px on mobile (was the shared 40px cap above). */
	.eoa-wave-hero__cta {
		min-height: 30px;
		max-height: 30px;
	}

	/* 2026-07-13 (Alex): keep the CTA + "Start over" on ONE row inside the sticky bar — flex-wrap
	   let them stack to two lines, which combined with .eoa-wave-hero__textbtn's own 44px
	   min-height (sized for a stacked/standalone context, not this row) pushed the whole sticky
	   bar well past a reasonable height. Capped at <50px total: 8px + 30px (CTA) + 8px padding +
	   1px border = 47px. The CTA's label swaps to a shorter string at the narrowest widths (see
	   .eoa-wave-hero__cta-label rules) instead of shrinking/wrapping/ellipsizing, so it never
	   collides with "Start over" for room. */
	/* Matches the base rule's own selector (attribute + :not() + descendant) — a bare
	   .eoa-wave-hero__result-actions here loses the cascade to that higher-specificity rule
	   regardless of media-query/source order, so its 12px padding silently won over this 8px,
	   leaving the bar at 55px instead of under the 50px cap (found via live measurement). */
	[ data-eoa-phase="result" ]:not( [ hidden ] ) .eoa-wave-hero__result-actions {
		flex-wrap: nowrap;
		gap: 0.6rem;
		padding: 8px 1rem calc( 8px + env( safe-area-inset-bottom, 0px ) );
	}

	.eoa-wave-hero__result-actions .eoa-wave-hero__cta {
		flex: 0 1 auto;
		min-width: 0;
		white-space: nowrap;
	}

	.eoa-wave-hero__result-actions .eoa-wave-hero__textbtn {
		flex: 0 0 auto;
		min-height: 30px;
		margin-top: 0;
		padding: 0.4rem 0.2rem;
		white-space: nowrap;
	}

	.eoa-wave-hero__card {
		padding: 1.1rem;
	}

	/* 8c — hero card corner radius on mobile. */
	.eoa-wave-hero__card {
		border-radius: 10px;
	}

	/* 8d — breathing room under each phase's canvas/content on mobile. */
	.eoa-wave-hero__phase {
		padding-bottom: 20px;
	}

	.eoa-wave-hero__question-wrap {
		margin-top: 0.4rem;
	}

	.eoa-wave-hero__canvas {
		margin-top: 0.6rem;
	}

	.eoa-wave-hero__microload {
		padding: 1.25rem 0;
		min-height: 130px;
	}

	.eoa-wave-hero__processing {
		padding: 1rem 0.75rem 1.1rem;
	}

	.eoa-wave-hero__processing-label {
		margin-top: 0.75rem;
	}

	.eoa-wave-hero__resolved-pill--stage,
	.eoa-wave-hero__resolved-pill--problem {
		max-width: none;
	}

	/* 2026-07-13 (Alex): fix the processing screen's row overlapping itself on mobile — the
	   horizontal box->connector->box->connector->mark row (built for wide viewports) wrapped
	   awkwardly under ~500px and visually overlapped (screenshot: the blue stage box sitting on
	   top of the red problem box). Same fix pattern as .eoa-wave-hero__resolved-path just below:
	   stack vertically and drop the connector glyphs (aria-hidden, decorative — a vertical gap
	   already reads as "sequence" once stacked). */
	.eoa-wave-hero__proc-row {
		flex-direction: column;
		gap: 10px;
	}

	.eoa-wave-hero__proc-connector {
		display: none;
	}

	/* §11a — even, generous rhythm between the three stacked path cards (blue stage / coral
	   problem / teal begin-with) on the preview/result screen, mobile only. The horizontal
	   connector glyphs between them don't read well once stacked, so they're hidden here; desktop
	   (above this breakpoint) keeps the connectors + its own flex-wrap layout exactly as before.
	   2026-07-13: moved here from the 480px breakpoint below — that left a 480-781px gap where
	   the problems-canvas JS (isMobile(): `window.innerWidth < 760`) already switched to its
	   mobile layout but these pills stayed on the desktop flex-wrap/max-width rules, so at
	   e.g. 500-700px each pill fell short of the card's full width instead of stacking 100%. */
	.eoa-wave-hero__resolved-path {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.eoa-wave-hero__resolved-pill {
		width: 100%;
		margin-bottom: 0;
	}

	.eoa-wave-hero__resolved-connector {
		display: none;
	}
}

@media ( max-width: 480px ) {
	.eoa-wave-hero__dark {
		padding: 1.5rem 1rem 3.5rem;
	}

	/* 2026-07-13 (Alex): "See your full action plan" is too long to share a row with "Start over"
	   at this width without wrapping (which blew the sticky bar's height past its 50px cap) — swap
	   to the shorter "View Full Action Plan" instead of shrinking/wrapping/ellipsizing the label. */
	.eoa-wave-hero__cta-label--full {
		display: none;
	}

	.eoa-wave-hero__cta-label--short {
		display: inline;
	}

	/* 8a — eyebrow must hold one line at 360-390px: nowrap + a smaller, tighter-tracked size that
	   fits "CRO · Personalization · AI Marketing Systems" without wrapping or overflowing.
	   2026-07-13: centered on mobile per Alex's ask (was left-aligned, matching the H1's own
	   §8b center treatment just below). */
	.eoa-wave-hero__eyebrow {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 0.6rem;
		letter-spacing: 0.12em;
		text-align: center;
	}

	/* 8b — H1 layout only (copy unchanged): centered, with 15px of space below it on mobile. */
	.eoa-wave-hero__h1 {
		font-size: 1.375rem;
		line-height: 1.15;
		text-align: center;
		margin-bottom: 15px;
	}

	.eoa-wave-hero__card {
		padding: 0.9rem;
	}

	.eoa-wave-hero__question-wrap {
		margin-top: 0.4rem;
	}

	.eoa-wave-hero__canvas {
		margin-top: 0.6rem;
	}

	.eoa-wave-hero__proc-mark {
		width: 110px;
		height: 70px;
	}
}

@media print {
	.eoa-wave-hero {
		display: none !important;
	}
}

/* =====================================================================================
 * §10 — problems-screen selected stage node: solid blue CARD (not the usual circle),
 * lighter-blue eyebrow (experience label), bold white title (stage label), icon on a small
 * white chip (2026-07-13: see the icon rule's own comment for why a plate replaced the
 * original "invert to white" filter — the filter blanked two-tone icons like cue_check).
 * Scoped to .eoa-wave-hero__node--stage-card only (set by buildNode()'s opts.stageCard,
 * called only from renderProblems() in eoa-wave-hero.js) — every other node on every other
 * screen (experiences/journey, coral problem cards, ghost nodes) is untouched.
 * ===================================================================================== */
.eoa-wave-hero__node--stage-card {
	gap: 0;
	width: auto;
	height: auto;
}

.eoa-wave-hero__node-tile--stage-card {
	/* 2026-07-13: horizontal layout (icon left, eyebrow+title stacked right) per Alex's request
	   — was a centered column, which made the card tall and pushed the first problem option
	   below it further down than needed. width/height are now auto (btn's inline size is
	   cleared in buildNode()) so the card is only as tall as its row content. */
	width: auto;
	height: auto;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding: 8px 14px;
	border-radius: 10px;
	/* Solid primary blue per spec (was a two-stop gradient, which also meant the eyebrow's
	   contrast ratio depended on WHICH end of the gradient sat behind it — a solid fill makes
	   the contrast math below exact, not a worst-case-of-two-stops guess). #2353d4 is this
	   theme's de facto primary-blue value — there is no --color-primary/--eoa-blue custom
	   property defined anywhere in the theme (checked assets/css/**), so this hex matches the
	   existing convention (same value used for the focus ring above and throughout
	   eoa-hero.css) rather than inventing a new token or a new color. */
	background: #2353d4;
	border: none;
	box-shadow: 0 9px 20px -8px rgba( 35, 83, 212, 0.55 ), 0 1px 0 rgba( 255, 255, 255, 0.2 ) inset;
}

.eoa-wave-hero__node-tile--stage-card .eoa-wave-hero__node-icon {
	/* 2026-07-13 fix — the previous `filter: brightness(0) invert(1)` forced EVERY opaque pixel
	   of the sprite icon to solid white. That's fine for a single-tone icon, but several cues
	   (most visibly cue_check, used for "First win"/a_value and reused for most other journeys'
	   final-stage icon) are themselves two-tone: a filled circle in this exact primary blue
	   (#2353D4) plus a white checkmark stroke. brightness(0) collapses BOTH the circle and the
	   stroke to identical pure white before invert(1) even runs, so the checkmark's contrast
	   against its own circle is erased — the icon rendered as a blank white disc, exactly the
	   reported bug. Root cause: color-collapsing filters can't preserve internal contrast
	   between two originally-different-but-both-forced-white regions.
	   Fix: drop the filter and give the icon a small white chip behind it instead, so it always
	   renders in its own native colors (same as every OTHER instance of these cue_* icons on
	   this page — they're all designed against a white/pale disc, see .eoa-wave-hero__node-tile
	   above). This is a deliberate, documented deviation from the literal "white icon on blue"
	   spec wording to the equivalent-and-more-robust "icon on a white plate" — it fixes the
	   collapse for cue_check today AND for every other cue this card could show (some, like
	   cue_discover/cue_search/cue_repeat, are pure blue-stroke-on-transparent and would have
	   been nearly invisible on a solid blue card even without the collapse bug). Contrast is
	   excellent either way: primary blue #2353d4 on white is 6.44:1 (verified below). */
	display: block;
	background: #ffffff;
	border-radius: 8px;
	padding: 4px 5px;
	box-sizing: content-box;
	filter: drop-shadow( 0 1px 2px rgba( 0, 0, 0, 0.18 ) );
	transform: scale( 1 );
}

.eoa-wave-hero__node-tile--stage-card .eoa-wave-hero__node-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	white-space: nowrap;
}

.eoa-wave-hero__node-eyebrow {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	/* Lighter blue — WCAG AA on the solid #2353D4 card. Was #b9cdfb (measured 4.05:1 — FAILS
	   the 4.5:1 minimum for normal-size text at 9px; the old comment's ">=4.5:1" claim was
	   wrong). #cddffc measured 4.77:1 against #2353d4 (verified via the WCAG relative-luminance
	   formula, not eyeballed) — passes with headroom. */
	color: #cddffc;
}

.eoa-wave-hero__node-title {
	font-family: 'Schibsted Grotesk', sans-serif;
	font-weight: 700;
	font-size: 0.82rem;
	line-height: 1.1;
	color: #ffffff; /* white on primary blue — WCAG AA. */
	text-align: center;
}

/* =====================================================================================
 * §4 — ENTRY REVEAL (fresh homepage load only). `is-eoa-entry-reveal` is set on <html>
 * pre-paint by functions.php :: alexdesigns_eoa_focus_preboot() — ONLY on a fresh session
 * with no `eoa` param and no `prefers-reduced-motion: reduce`. The six experience nodes start
 * at opacity:0 (already absolutely positioned — no layout shift, no CLS) and the wave-connector
 * path starts fully retracted (pathLength="100" on the SVG path, set in home-hero.php, makes
 * stroke-dasharray/dashoffset:100 a stable 0-100% regardless of the path's real geometry).
 * eoa-wave-hero.js staggers `--revealed` onto each node and animates the path's
 * stroke-dashoffset to 0, then strips the html-level class. The H1/eyebrow are NEVER selectors
 * here — always full-opacity, LCP-safe. No-JS/crawlers never get the html class at all (this is
 * an inline <head> script), so the six options stay fully visible, real text — AEO-safe.
 * ===================================================================================== */
html.is-eoa-entry-reveal [data-eoa-phase="experiences"] .eoa-wave-hero__node {
	opacity: 0;
}

html.is-eoa-entry-reveal [data-eoa-phase="experiences"] .eoa-wave-hero__node--revealed {
	opacity: 1;
	transition: opacity 0.4s ease;
}

html.is-eoa-entry-reveal [data-eoa-entry-path] {
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
}

html.is-eoa-entry-reveal [data-eoa-entry-path].eoa-wave-hero__entry-path--drawn {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 0.9s ease;
}

/* =====================================================================================
 * §1/§7 — FOCUSED MODE. `is-eoa-focused` is set on <html> pre-paint (see functions.php ::
 * alexdesigns_eoa_focus_preboot()) the instant an `eoa` URL param is present, and kept in sync
 * client-side by eoa-wave-hero.js's history/pushState handling for in-page transitions. HIDE
 * (not remove — crawlers with JS off, and any JS-disabled visitor, still see the full default
 * homepage) the header's nav/search/CTA and every below-the-hero homepage section; KEEP the
 * footer. `[hidden]` rules elsewhere in this theme are given a matching `.class[hidden]`
 * companion per docs/ui-standards.md §1 — these are display:none additions on classes that
 * never carry the hidden attribute, so no such companion is needed here, but !important is
 * still used because these selectors must beat the header/nav's own (higher-specificity, sticky
 * position) rules in assets/css/theme.css without touching that protected file.
 * ===================================================================================== */
/* 2026-07-13: the focused-mode header stays in normal flow instead of sticking to the top of
   the viewport — Alex's call, since the sticky top bar competed with the now-fixed bottom CTA
   bar for vertical space on the result screen. Overrides theme.css's inline `position:sticky`
   (added via the block editor's style attr, hence needing !important to beat it) without
   touching that protected file. Two elements need it: `.ad-header` itself (the wp:group block,
   inline sticky style) AND WordPress's own auto-generated `header.wp-block-template-part`
   wrapper around the template-part reference (parts/header.html is inserted via
   `<!-- wp:template-part {"tagName":"header"} -->`, which WP wraps in its own outer <header> —
   that outer wrapper turned out to be independently sticky, so `.ad-header` alone wasn't enough:
   its parent kept it pinned regardless of its own now-static position). */
html.is-eoa-focused header.wp-block-template-part,
html.is-eoa-focused .ad-header {
	position: static !important;
}

html.is-eoa-focused .ad-nav-desktop,
html.is-eoa-focused .ad-nav-toggle,
html.is-eoa-focused .ad-search-toggle,
html.is-eoa-focused .ad-cta-desktop,
html.is-eoa-focused .ad-cta-mobile {
	display: none !important;
}

html.is-eoa-focused .ad-home-below-hero {
	display: none !important;
}

/* Logo lockup swap — both variants ship in parts/header.html (additive), CSS-toggled here so no
   existing header markup/behavior changes for the default (non-focused) shell. */
html.is-eoa-focused .ad-brand__mark:not( .ad-brand__mark--focused ),
html.is-eoa-focused .wp-block-site-title {
	display: none !important;
}

html.is-eoa-focused .ad-brand__focused-lockup {
	display: inline-flex !important;
	align-items: center;
	gap: 0.4rem;
	font-family: 'Schibsted Grotesk', sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	color: var( --wp--preset--color--ink, #11151b );
	text-decoration: none;
}

.ad-brand__focused-text {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.ad-brand__focused-sep {
	color: var( --wp--preset--color--muted, #667080 );
	font-weight: 400;
}

/* Header-injected "Start over" — see eoa-wave-hero.js's injectHeaderStartOver(). Hidden by
   default (unlike /results's always-focused equivalent in eoa-results.css, this page toggles
   is-eoa-focused on and off in place, so visibility must follow the class, not just existence). */
.ad-eoa-header-start-over {
	display: none;
}

html.is-eoa-focused .ad-eoa-header-start-over {
	display: inline-flex;
	align-items: center;
	font-family: 'Schibsted Grotesk', sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	color: var( --wp--preset--color--muted, #667080 );
	text-decoration: none;
	background: none;
	border: none;
	cursor: pointer;
	white-space: nowrap;
}

html.is-eoa-focused .ad-eoa-header-start-over:hover {
	color: #2353d4;
}

@media ( max-width: 480px ) {
	html.is-eoa-focused .ad-eoa-header-start-over {
		display: none;
	}
}

/* =====================================================================================
 * §11b — preview/result screen: the three path cards fade in one at a time (blue stage, coral
 * problem, teal begin-with), THEN the rest of the preview content (Alex's read, journey teaser,
 * 30/60/90 roadmap, and the "See your full action plan" CTA) fades in. Opacity-only — every
 * element keeps its normal document flow position/space, so there is zero CLS. Gated by JS-added
 * classes only (`eoa-preview-revealing` / `eoa-preview-revealed`, set once per showResult() call
 * in eoa-wave-hero.js) so a reduced-motion visitor or a no-JS/print context never sees this
 * gating class at all and gets the full result instantly.
 * ===================================================================================== */
.eoa-wave-hero__result.eoa-preview-revealing .eoa-wave-hero__resolved-pill {
	opacity: 0;
}

.eoa-wave-hero__result .eoa-wave-hero__resolved-pill--revealed {
	opacity: 1 !important;
	transition: opacity 0.35s ease;
}

.eoa-wave-hero__result.eoa-preview-revealing .eoa-wave-hero__read-row,
.eoa-wave-hero__result.eoa-preview-revealing .eoa-wave-hero__teaser,
.eoa-wave-hero__result.eoa-preview-revealing .eoa-wave-hero__roadmap-teaser,
.eoa-wave-hero__result.eoa-preview-revealing .eoa-wave-hero__result-actions {
	opacity: 0;
}

.eoa-wave-hero__result.eoa-preview-revealed .eoa-wave-hero__read-row,
.eoa-wave-hero__result.eoa-preview-revealed .eoa-wave-hero__teaser,
.eoa-wave-hero__result.eoa-preview-revealed .eoa-wave-hero__roadmap-teaser,
.eoa-wave-hero__result.eoa-preview-revealed .eoa-wave-hero__result-actions {
	opacity: 1;
	transition: opacity 0.4s ease;
}

@media ( prefers-reduced-motion: reduce ) {
	.eoa-wave-hero__result.eoa-preview-revealing .eoa-wave-hero__resolved-pill,
	.eoa-wave-hero__result.eoa-preview-revealing .eoa-wave-hero__read-row,
	.eoa-wave-hero__result.eoa-preview-revealing .eoa-wave-hero__teaser,
	.eoa-wave-hero__result.eoa-preview-revealing .eoa-wave-hero__roadmap-teaser,
	.eoa-wave-hero__result.eoa-preview-revealing .eoa-wave-hero__result-actions {
		opacity: 1 !important;
	}
}

@media print {
	html.is-eoa-focused .ad-home-below-hero {
		display: block !important;
	}
	.eoa-wave-hero__result .eoa-wave-hero__resolved-pill,
	.eoa-wave-hero__result .eoa-wave-hero__read-row,
	.eoa-wave-hero__result .eoa-wave-hero__teaser,
	.eoa-wave-hero__result .eoa-wave-hero__roadmap-teaser,
	.eoa-wave-hero__result .eoa-wave-hero__result-actions {
		opacity: 1 !important;
	}
}