/* 1B.7C visual: header/mega/hero/floats only. Stage-relative x/y from 1B.7D stay. */

.yepx-icon-well {
	display: grid;
	place-items: center;
	line-height: 0;
	width: 40px;
	height: 40px;
	min-width: 40px;
	border-radius: 12px;
	background: var(--yepx-bg-soft, var(--yepx-color-bg-soft));
	color: var(--yepx-ink, var(--yepx-color-ink));
}

.yepx-icon-well .yepx-icon,
.yepx-icon-well svg {
	display: block;
	width: 20px;
	height: 20px;
	margin: 0;
	transform: translate(var(--yepx-icon-ox, 0), var(--yepx-icon-oy, 0));
}

.yepx-icon-well--coral { background: #fbeceb; color: var(--yepx-accent-coral); }
.yepx-icon-well--amber { background: #f8f1dc; color: var(--yepx-accent-amber); }
.yepx-icon-well--blue { background: #e8eef6; color: var(--yepx-accent-blue); }
.yepx-icon-well--mint { background: #e6f5ef; color: var(--yepx-accent-mint); }
.yepx-icon-well--purple { background: #efeaf6; color: var(--yepx-accent-purple); }
.yepx-icon-well--ink { background: var(--yepx-bg-soft); color: var(--yepx-ink); }
.yepx-icon-well--cyan { background: var(--yepx-bg-soft); color: var(--yepx-ink); }

.yepx-hero .yepx-hero-benefits .yepx-icon {
	color: var(--yepx-accent-mint);
}

@media (min-width: 1366px) {
	.yepx-nav--primary > ul > li > a {
		color: var(--yepx-ink);
		background: transparent;
		border-radius: 10px;
		font-weight: 650;
		transition: background-color var(--yepx-duration-fast) var(--yepx-ease), color var(--yepx-duration-fast) var(--yepx-ease);
	}

	.yepx-nav--primary > ul > li > a:hover,
	.yepx-nav--primary > ul > li > a:focus-visible {
		background: var(--yepx-bg-warm);
		color: #0a2230;
		font-weight: 650;
		padding-block: 0;
		box-shadow: none;
	}

	.yepx-nav--primary > ul > li.current-menu-item > a,
	.yepx-nav--primary > ul > li.current-menu-ancestor > a {
		background: var(--yepx-primary-soft);
		color: var(--yepx-ink);
		font-weight: 650;
	}

	.yepx-nav--primary > ul > li.current-menu-item > a:hover,
	.yepx-nav--primary > ul > li.current-menu-ancestor > a:hover {
		background: var(--yepx-primary-soft);
	}

	.yepx-site-header .yepx-nav--primary > ul > li.current-menu-item > a::after,
	.yepx-site-header .yepx-nav--primary > ul > li.current-menu-ancestor > a::after {
		bottom: 10px;
		height: 2px;
		background: var(--yepx-primary);
	}

	.yepx-site-header .yepx-header__cta .yepx-btn {
		box-shadow: 0 6px 14px rgba(16, 44, 59, 0.12);
	}

	.yepx-site-header .yepx-header__cta .yepx-btn:hover {
		transform: translateY(-1px);
		box-shadow: 0 8px 16px rgba(16, 44, 59, 0.14);
	}

	.yepx-nav--primary .yepx-mega,
	.yepx-site-header .yepx-nav--primary .yepx-mega {
		width: min(1160px, calc(100vw - 48px));
		max-width: 1160px;
		padding: 0.9rem 1rem 0.35rem;
		border-radius: 26px;
		background: #fff;
		opacity: 1;
		box-shadow: var(--yepx-shadow-panel);
		border: 1px solid var(--yepx-line);
		grid-template-columns: 260px minmax(0, 1fr);
		transition: opacity var(--yepx-duration-mega-open) var(--yepx-ease), transform var(--yepx-duration-mega-open) var(--yepx-ease);
	}

	.yepx-site-header .yepx-mega[hidden] {
		opacity: 0;
		transform: translateX(-50%) translateY(6px);
	}

	.yepx-site-header .yepx-mega:not([hidden]) {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}

	.yepx-nav--primary .yepx-mega__rail-btn {
		display: grid;
		grid-template-columns: 42px minmax(0, 1fr) 18px;
		align-items: center;
		min-height: 58px;
		padding: 0 1rem;
		background: transparent;
		border-radius: 12px;
		font-weight: 650;
		box-shadow: none;
		transition: background-color 100ms var(--yepx-ease), box-shadow 100ms var(--yepx-ease);
	}

	.yepx-nav--primary .yepx-mega__rail-btn:hover {
		background: var(--yepx-bg-warm);
		font-weight: 650;
		box-shadow: none;
	}

	.yepx-nav--primary .yepx-mega__rail-btn:hover .yepx-mega__rail-chevron {
		transform: translateX(2px);
	}

	.yepx-nav--primary .yepx-mega__rail-btn[aria-selected="true"] {
		background: var(--yepx-primary-soft);
		box-shadow: inset 3px 0 0 var(--yepx-primary);
		font-weight: 650;
	}

	.yepx-nav--primary .yepx-mega__links a {
		display: grid;
		min-height: 70px;
		height: auto;
		padding: 0.65rem 0.75rem;
		border-radius: 14px;
		border: 1px solid transparent;
		background: transparent;
		box-shadow: none;
		grid-template-columns: 42px minmax(0, 1fr) 18px;
		align-items: center;
		transition: background-color 100ms var(--yepx-ease), border-color 100ms var(--yepx-ease), box-shadow 100ms var(--yepx-ease);
	}

	.yepx-nav--primary .yepx-mega__links a:hover {
		background: var(--yepx-bg-warm);
		border-color: var(--yepx-line);
		box-shadow: var(--yepx-shadow-xs);
		transform: none;
	}

	.yepx-nav--primary .yepx-mega__links .yepx-nav__label {
		font-size: 0.90625rem;
		color: var(--yepx-ink);
		overflow: visible;
		white-space: normal;
		-webkit-line-clamp: unset;
		line-clamp: unset;
	}

	.yepx-nav--primary .yepx-mega__card-chevron,
	.yepx-nav--primary .yepx-mega__rail-chevron {
		width: 16px;
		height: 16px;
		color: var(--yepx-muted);
		justify-self: end;
		align-self: center;
	}

	.yepx-nav--primary .yepx-mega__all {
		margin-top: 0.35rem;
		padding-top: 0.45rem;
		border-top: 1px solid var(--yepx-line);
	}

	.yepx-nav--primary .yepx-mega__all a {
		display: grid;
		grid-template-columns: 42px minmax(0, 1fr) 18px;
		align-items: center;
		min-height: 60px;
		height: 60px;
		background: transparent;
		border: 0;
		padding-block: 0;
	}

	.yepx-nav--primary .yepx-mega__all a:hover {
		background: var(--yepx-bg-soft);
	}

	.yepx-nav--primary .yepx-mega__group:not(.is-cat-active) > .yepx-mega__links {
		opacity: 0;
		transform: translateY(4px);
		transition: opacity var(--yepx-duration-mega-swap) var(--yepx-ease), transform var(--yepx-duration-mega-swap) var(--yepx-ease);
	}

	.yepx-nav--primary .yepx-mega__group.is-cat-active > .yepx-mega__links {
		opacity: 1;
		transform: translateY(0);
	}

	.yepx-hero {
		background:
			radial-gradient(circle at 82% 20%, rgba(8, 169, 214, 0.05), transparent 28%),
			linear-gradient(180deg, #f7f9fa 0%, #fff 58%, #f7f9fa 100%);
	}

	.yepx-hero .yepx-btn--primary {
		box-shadow: 0 6px 14px rgba(16, 44, 59, 0.12);
	}

	.yepx-hero .yepx-btn--primary:hover {
		transform: translateY(-1px);
		box-shadow: 0 8px 16px rgba(16, 44, 59, 0.14);
	}

	.yepx-hero .yepx-float-card {
		width: 168px;
		min-width: 150px;
		max-width: 185px;
		padding: 0.65rem 0.75rem;
		pointer-events: auto;
		box-shadow: var(--yepx-shadow-float);
		will-change: transform;
		animation-name: yepx-float-soft;
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
		animation-duration: var(--yepx-float-dur, 6.2s);
		animation-delay: var(--yepx-float-delay, 0s);
		animation-direction: var(--yepx-float-dir, alternate);
	}

	.yepx-hero .yepx-float-card .yepx-icon-well {
		width: 40px;
		height: 40px;
	}

	.yepx-hero .yepx-float-card__copy strong {
		font-size: 0.8125rem;
		color: var(--yepx-ink);
	}

	.yepx-hero .yepx-float-card__copy span {
		font-size: 0.75rem;
		color: var(--yepx-muted);
	}
}

@media (max-width: 1365px) {
	.yepx-hero .yepx-hero-media-stage .yepx-hero-floats {
		position: relative;
		inset: auto;
		display: flex;
		flex-wrap: wrap;
		height: auto;
		margin-top: 0.75rem;
	}

	.yepx-hero .yepx-hero-media-stage .yepx-float-card[data-xy="1"] {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		bottom: auto;
		margin: 0.4rem 0.4rem 0 0;
		width: 168px;
		min-width: 150px;
		max-width: 185px;
	}

	.yepx-hero .yepx-float-card:nth-child(n + 3),
	.yepx-hero .yepx-float-card[data-vis="desktop_only"] {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.yepx-hero .yepx-float-card:nth-child(n + 3) {
		display: none !important;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.yepx-hero .yepx-hero-media-stage .yepx-float-card {
		animation-name: yepx-float-soft !important;
		animation-timing-function: ease-in-out !important;
		animation-iteration-count: infinite !important;
		animation-duration: var(--yepx-float-dur, 6.2s) !important;
		animation-delay: var(--yepx-float-delay, 0s) !important;
		animation-direction: alternate !important;
		will-change: transform;
	}
}

@keyframes yepx-float-soft {
	0%,
	100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(2px, -6px, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.yepx-hero .yepx-float-card,
	.yepx-nav--primary .yepx-mega,
	.yepx-nav--primary .yepx-mega__links a,
	.yepx-nav--primary .yepx-mega__rail-btn,
	.yepx-site-header .yepx-header__cta .yepx-btn {
		animation: none !important;
		transition: none !important;
		transform: none !important;
	}
}