/* ==========================================================================
   EXA Arcadia — What is EXA  |  Montserrat  |  V6
   ========================================================================== */

/* style.css only ships Bold/Regular/Light faces; declare SemiBold here so the
   segmented pill can sit a notch lighter than Bold. */
@font-face {
	font-family: 'Montserrat-SemiBold';
	src: url('../../fonts/Montserrat-SemiBold.woff2') format('woff2'), url('../../fonts/Montserrat-SemiBold.ttf') format('truetype');
	font-display: swap;
}

/* --- Base --- */
.exa-page {
	color: #fff;
	background: #030303;
	--exa-section-divider-color: var(--renewal-accent-separator-color, #6e7264);
	--exa-section-divider-width: var(--renewal-accent-separator-width, 1px);
	--exa-section-divider-opacity: 0.7;
	--exa-section-divider-gutter: 1.25rem;
	--renewal-anchor-secondary-offset: var(--renewal-game-submenu-height, 3rem);
	/* Keep sticky ancestors overflow-visible; clipping lives on body */
	overflow-x: visible;
	font-family: 'Montserrat-Regular', Helvetica, Arial, sans-serif;
	font-size: clamp(1rem, 2.5vw, 1.125rem);
	line-height: 1.6;
}

.exa-page *,
.exa-page *::before,
.exa-page *::after {
	box-sizing: border-box;
}

.exa-page h1, .exa-page h2, .exa-page h3, .exa-page h4 {
	color: #fff;
	margin: 0 0 1rem;
	font-family: 'Montserrat-Bold', Helvetica, Arial, sans-serif;
}

.exa-page h1 { font-size: clamp(2.5rem, 5vw + 1rem, 4rem); }
.exa-page h2 { font-size: clamp(1.75rem, 3.5vw + 0.5rem, 2.75rem); }

.exa-page img { max-width: 100%; height: auto; display: block; }
.exa-page a   { color: inherit; }

/* --- Global button resets --- */
.exa-cabinet-360-btn {
	outline: none;
}
.exa-submenu__cta {
	outline: none;
}

/* Hero/Bottom CTAs — Arcadia System hero parity */
.exa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 208px;
	padding: 14px 32px;
	font-family: 'Montserrat-Bold', Helvetica, Arial, sans-serif;
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	text-align: center;
	letter-spacing: 0;
	cursor: pointer;
	border-radius: 8px;
	/* 3px so the red outline on the white/red CTAs stays legible against the
	   page's black background. Borders are box-sizing: border-box, so the width
	   is identical at rest and on hover — no jitter when the fill inverts. */
	border: 3px solid transparent;
	position: relative;
	user-select: none;
	-webkit-user-select: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* CTA 1: red fill / white text */
.exa-btn--primary {
	background: #D90500;
	color: #fff;
	border-color: #D90500;
}
.exa-btn--primary:hover,
.exa-btn--primary:focus-visible,
.exa-btn--primary:active {
	background: #fff;
	color: #D90500;
	border-color: #D90500;
}

/* CTA 2: white fill / red text */
.exa-btn--secondary {
	background: #fff;
	color: #D90500 !important;
	border-color: #D90500;
}

.exa-page a.exa-btn--primary {
	color: #fff;
}

.exa-page a.exa-btn--primary:hover {
	color: #D90500;
}

.exa-page a.exa-btn--secondary {
	color: #D90500 !important;
}

.exa-page a.exa-btn--secondary:visited {
	color: #D90500 !important;
}

.exa-page a.exa-btn--secondary:hover {
	color: #fff !important;
}
.exa-btn--secondary:hover,
.exa-btn--secondary:focus-visible,
.exa-btn--secondary:active {
	background: #D90500;
	color: #fff !important;
	border-color: #D90500;
}

/* ==========================================================================
   Hero — HubSpot-style, extends behind header + submenu
   ========================================================================== */
.exa-hero {
	--exa-hero-viewport-block: 100vh;
	min-height: calc(var(--exa-hero-viewport-block) - var(--renewal-main-nav-height, 5.3125rem) - var(--renewal-game-submenu-height, 3rem));
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 6rem 1.25rem 4rem;
	margin-top: 0;
	position: relative;
	background-size: var(--exa-hero-bg-size, cover);
	background-position: center var(--exa-hero-bg-position-y, 100%);
	background-color: #030303;
	overflow: hidden;
}

.exa-hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	contain: layout paint;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	will-change: transform;
}

.exa-hero__poster {
	position: absolute;
	inset: 0;
	display: block;
	opacity: 1;
	transition: opacity 220ms ease;
}

.exa-hero__poster img,
.exa-hero__bg-video {
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center var(--exa-hero-bg-position-y, 100%);
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
}

@supports (height: 100dvh) {
	.exa-hero {
		--exa-hero-viewport-block: 100dvh;
	}
}

@supports (height: 100svh) {
	@media (hover: none) and (pointer: coarse) {
		.exa-hero {
			--exa-hero-viewport-block: 100svh;
		}
	}
}

.exa-hero__media.is-video-ready .exa-hero__poster {
	opacity: 0;
}

.exa-hero__overlay {
	position: absolute;
	inset: 0;
	background: rgba(3, 3, 3, var(--exa-hero-overlay-opacity, 0.75));
	pointer-events: none;
}

.exa-hero__content {
	position: relative;
	z-index: 1;
	max-width: 52rem;
	width: 100%;
}

.exa-hero__logo {
	max-width: 8rem;
	height: auto;
	margin: 0 auto 1.5rem;
}

/* Headline — HubSpot style: bold, tight line-height, generous size */
.exa-hero__headline {
	font-family: 'Montserrat-Bold', Helvetica, Arial, sans-serif;
	font-size: clamp(2.5rem, 4vw + 0.75rem, 4rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin-bottom: 1.5rem;
	max-width: 22ch;
	margin-left: auto;
	margin-right: auto;
	text-wrap: balance;
}

/* Inline rotation — grid-locked slots with vertical-slide words.
   Each slot is inline-grid with all words in grid-area 1/1.
   The grid cell sizes to the widest child (transform doesn't affect layout),
   so the slot width is permanently locked. Words sit on the same baseline
   as surrounding static text because they are regular grid items. */
.exa-hero__headline--inline {
	max-width: none;
	width: max-content;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--renewal-system-hero-title-font-family, "Montserrat-Bold", Helvetica, Arial, sans-serif);
	font-size: var(--renewal-page-hero-title-font-size, min(clamp(3rem, 7.5vw, 4.5rem), 13vw, calc(5.48vw - 2.5px)));
	font-weight: var(--renewal-system-hero-title-font-weight, 400);
	white-space: nowrap;
	line-height: var(--renewal-page-hero-title-line-height, 1.18);
	letter-spacing: var(--renewal-system-hero-title-letter-spacing, normal);
	text-transform: none;
	text-align: center;
}

/* About Products retains its authored line-count contract: one line above
   mobile, then the two rotating slot groups become exactly two mobile lines.
   The shared portrait scale remains readable while each authored line stays
   viewport-bound; footer hero animation hooks remain untouched. */
.exa-hero > .exa-hero__content .exa-hero__headline--inline {
	font-size: var(--renewal-page-hero-title-font-size, min(clamp(3rem, 7.5vw, 4.5rem), 13vw, calc(5.48vw - 2.5px)));
	width: max-content;
	max-width: calc(100vw - 40px);
	margin-left: auto;
	margin-right: auto;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	text-wrap: nowrap;
	overflow-wrap: normal;
}

.exa-hero__headline-line {
	display: inline;
}

@media (max-width: 480px) and (orientation: portrait) {
	.exa-hero .exa-hero__headline--inline { text-wrap: nowrap; }
}

@media (max-width: 40em) {
	.exa-hero__headline--inline {
		white-space: normal;
		text-wrap: balance;
		width: auto;
		left: 0;
		transform: none;
	}
}

@media (max-width: 767px) {
	.exa-hero > .exa-hero__content .exa-hero__headline--inline {
		font-size: var(--renewal-page-hero-title-font-size, min(clamp(3rem, 7.5vw, 4.5rem), 13vw, calc(5.48vw - 2.5px)));
		width: calc(100vw - 40px);
		max-width: calc(100vw - 40px);
		left: 0;
		transform: none;
		white-space: normal;
	}

	.exa-hero > .exa-hero__content .exa-hero__headline--inline > .exa-hero__headline-line {
		display: block;
		white-space: nowrap;
	}
}

.exa-hero__slot {
	display: inline-grid;
	overflow: hidden;
	vertical-align: baseline;
	line-height: inherit;
	text-align: left;
	transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.exa-hero__word {
	grid-area: 1 / 1;
	white-space: nowrap;
	color: #D90500;
	transform: translateY(110%);
	transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.exa-hero__word--active {
	transform: translateY(0);
}

.exa-hero__word--exit-up {
	transform: translateY(-110%);
}

/* Subheading — HubSpot style: regular weight, slightly larger, full opacity */
.exa-hero__subheading {
	margin-bottom: 2rem;
	font-family: 'Montserrat-Regular', Helvetica, Arial, sans-serif;
	font-size: clamp(1.0625rem, 1.5vw + 0.5rem, 1.3125rem);
	font-weight: 400;
	line-height: 1.6;
	opacity: 0.8;
	max-width: 52ch;
	margin-left: auto;
	margin-right: auto;
	text-wrap: pretty;
}

.exa-hero__ctas {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

@media (min-width: 769px) {
	.exa-hero__ctas,
	.exa-footer-hero__ctas {
		display: inline-grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		align-items: stretch;
	}
}

/* Mobile portrait: keep hero background visible and keep content below submenu */
@media (max-width: 480px) {
	.exa-hero {
		background-size: cover;
	}
	.exa-hero__headline--inline {
		width: fit-content;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	.exa-hero__overlay {
		display: block;
		background: rgba(3, 3, 3, var(--exa-hero-overlay-opacity, 0.64));
	}
	.exa-hero__content {
		padding-top: clamp(24px, 7vw, 48px);
	}
	.exa-hero__logo {
		margin-top: 0;
		margin-bottom: 1.25rem;
	}
	.exa-hero__ctas {
		flex-direction: column;
		align-items: center;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	.exa-hero__ctas .exa-btn {
		width: 100%;
		max-width: 320px;
		min-width: 0;
		justify-content: center;
	}

	.exa-hero__ctas .exa-btn,
	.exa-footer-hero__ctas .exa-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		max-width: 320px;
		min-width: 0;
		padding: 14px 32px;
		border-radius: 8px;
		border-width: 3px; /* keep the red outline as legible on mobile as on desktop */
		border-style: solid;
		font-family: 'Montserrat-Bold', Helvetica, Arial, sans-serif;
		font-size: 1.05rem;
		font-weight: 500;
		line-height: 1.2;
		letter-spacing: 0;
		text-transform: none;
	}

	html[lang^="ja"] .exa-hero__ctas .exa-btn,
	html[lang^="ja"] .exa-footer-hero__ctas .exa-btn {
		font-size: 1rem;
		line-height: 1.3;
	}
}

/* Mobile submenu and footer secondary CTAs share one flat outline treatment. */
@media (max-width: 768px) {
	.exa-page .exa-footer-hero__ctas .exa-btn--secondary,
	.exa-submenu.exa-submenu--about-products .exa-submenu__cta--secondary {
		--exa-mobile-secondary-fill: #fff;
		box-sizing: border-box;
		position: relative;
		border: 2px solid transparent;
		background-color: #D90500;
		background-image: none;
		background-clip: border-box;
		box-shadow: none;
		filter: none;
		isolation: isolate;
		-webkit-appearance: none;
		appearance: none;
		-webkit-tap-highlight-color: transparent;
	}

	.exa-page .exa-footer-hero__ctas .exa-btn--secondary::before,
	.exa-submenu.exa-submenu--about-products .exa-submenu__cta--secondary::before {
		content: "";
		position: absolute;
		inset: 0;
		box-sizing: border-box;
		border-radius: 6px;
		background: var(--exa-mobile-secondary-fill);
		pointer-events: none;
		z-index: -1;
	}

	.exa-page .exa-footer-hero__ctas .exa-btn--secondary:hover,
	.exa-page .exa-footer-hero__ctas .exa-btn--secondary:focus-visible,
	.exa-page .exa-footer-hero__ctas .exa-btn--secondary:active,
	.exa-submenu.exa-submenu--about-products .exa-submenu__cta--secondary:hover,
	.exa-submenu.exa-submenu--about-products .exa-submenu__cta--secondary:focus-visible,
	.exa-submenu.exa-submenu--about-products .exa-submenu__cta--secondary:active {
		--exa-mobile-secondary-fill: #D90500;
	}

	/* The video-backed top hero uses two literal flat boxes. The anchor is the
	   complete red outline and the label is the white inset surface. Avoiding a
	   CSS border, gradient, pseudo-element and shadow prevents iOS WebKit from
	   rasterizing the rounded edge as a separate beveled/composited layer. */
	.exa-page .exa-hero .exa-hero__ctas .exa-btn--secondary {
		height: 54px;
		min-height: 54px;
		padding: 2px;
		border: 0;
		border-radius: 8px;
		overflow: hidden;
		isolation: auto;
		background: #D90500;
		box-shadow: none;
		filter: none;
		-webkit-appearance: none;
		appearance: none;
		-webkit-tap-highlight-color: transparent;
	}

	.exa-page .exa-hero .exa-hero__ctas .exa-btn--secondary::before {
		content: none;
	}

	.exa-page .exa-hero .exa-hero__ctas .exa-btn--secondary .exa-btn__label {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		border-radius: 6px;
		background: #fff;
		transition: background-color 0.2s ease;
	}

	.exa-page .exa-hero .exa-hero__ctas .exa-btn--secondary:hover .exa-btn__label,
	.exa-page .exa-hero .exa-hero__ctas .exa-btn--secondary:focus-visible .exa-btn__label,
	.exa-page .exa-hero .exa-hero__ctas .exa-btn--secondary:active .exa-btn__label {
		background: #D90500;
	}
}

@media (prefers-reduced-motion: reduce) {
	.exa-hero__poster {
		transition: none;
	}
}

@media screen and (max-width: 932px) and (orientation: landscape) {
	.exa-page {
		overflow-x: clip;
	}

	.exa-hero {
		height: auto !important;
		min-height: auto !important;
		padding: 2rem 1rem 2.5rem;
	}

	.exa-hero__content {
		max-width: min(90%, 52rem);
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center;
	}

	.exa-hero__headline,
	.exa-hero__subheading,
	.exa-hero__ctas {
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center;
	}

	.exa-hero__headline {
		max-width: min(20ch, 100%);
		font-size: clamp(2rem, 3.2vw + 0.7rem, 3.2rem);
	}

	.exa-hero__headline--inline {
		left: 0;
		transform: none;
		width: auto;
		max-width: 100%;
		font-size: var(--renewal-page-hero-title-font-size, min(clamp(3rem, 7.5vw, 4.5rem), 13vw, calc(5.48vw - 2.5px)));
		text-align: center;
	}

	.exa-hero__subheading {
		max-width: min(90%, 52ch);
	}

	.exa-hero__ctas {
		justify-content: center;
		width: 100%;
	}

	.exa-hero__ctas .exa-btn,
	.exa-footer-hero__ctas .exa-btn {
		min-width: 208px;
	}

	.exa-submenu {
		height: auto;
		min-height: 3rem;
	}

	.exa-submenu__grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 0.45rem 0.75rem;
		max-width: min(100%, 58rem);
		padding: 0.45rem 0.75rem;
		height: auto;
	}

	.exa-submenu__left {
		display: none;
	}

	.exa-submenu__anchors {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.35rem 0.75rem;
		width: 100%;
		height: auto;
		min-height: 2.25rem;
	}

	.exa-submenu a.exa-submenu__link {
		height: auto;
		min-height: 2.25rem;
	}

	.exa-submenu__ctas {
		justify-content: center;
		flex: 0 1 100%;
		flex-wrap: wrap;
	}

	.exa-footer-hero {
		height: auto;
		min-height: auto;
	}

	.exa-footer-hero__inner {
		min-height: auto;
		align-items: center;
		text-align: center;
		padding: 2.25rem 1rem 1.5rem;
	}

	.exa-footer-hero__headline,
	.exa-footer-hero__headline.exa-hero__headline--inline {
		margin-left: auto !important;
		margin-right: auto !important;
		max-width: min(90%, 18ch);
		left: 0;
		transform: none;
		text-align: center;
	}

	.exa-footer-hero__ctas {
		justify-content: center;
		flex-wrap: wrap;
		width: 100%;
	}

	.exa-footer-hero__assoc-overlay {
		position: relative;
		right: auto;
		bottom: auto;
		margin: 0.9rem auto 0;
		max-width: 90%;
	}

	.exa-footer-hero__assoc-text,
	.exa-footer-hero__assoc-logos {
		text-align: center;
		justify-content: center;
	}

	.exa-footer-hero__assoc-logos {
		flex-wrap: wrap;
	}
}

/* The compact landscape composition above is intentionally retained, but its
   former `auto` height met the viewport-height desktop hero at one hard 932px
   edge. Interpolate only the outer frame between 900px and 1024px so live
   resizing cannot collapse the video by ~170px in a single frame. The formula
   resolves to the existing content height at 900px and is capped by the exact
   existing viewport-height result before leaving the transition range. */
@media screen and (min-width: 900px) and (max-width: 1024px) and (orientation: landscape) {
	.exa-hero {
		height: auto !important;
		min-height: min(
			calc(var(--exa-hero-viewport-block) - var(--renewal-main-nav-height, 5.3125rem) - var(--renewal-game-submenu-height, 3rem)),
			max(24.9rem, calc(405vw - 3246.6px))
		) !important;
	}
}

/* ==========================================================================
   Submenu — fixed overlay, semi-transparent bg, CSS Grid, game-detail behavior
   ========================================================================== */
.exa-submenu {
	position: fixed;
	top: var(--renewal-main-nav-height, 5.3125rem);
	left: 0;
	width: 100%;
	z-index: var(--renewal-secondary-nav-z-index, 1190);
	background-color: #03030395;
	height: var(--renewal-game-submenu-height, 3rem);
	pointer-events: none;
}

.exa-submenu.exa-submenu--about-products {
	/* V167: the main header always stays on screen. This bar docks beneath it
	   (never at top: 0) and only fades in once the hero has fully cleared the
	   viewport — the same stacked arrangement on every viewport, matching the
	   dp-subnav blueprint. The V165 contextual nav-swap is gone. */
	top: var(--renewal-main-nav-height, 5.3125rem);
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 300ms ease-in-out, transform 300ms ease-in-out, visibility 0s linear 0s;
	will-change: opacity, transform;
}

/* Submenu identity (brand text / logo) — left cell of the sub-nav grid. */
.exa-submenu__identity {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	max-width: 100%;
	text-decoration: none;
	color: #fff;
	transition: opacity 200ms ease;
}
/* Only the linked form reacts to the pointer. With no Link URL set the identity
   renders as a <span>, which must not look or behave clickable. */
a.exa-submenu__identity:hover,
a.exa-submenu__identity:focus-visible {
	opacity: 0.8;
}
span.exa-submenu__identity {
	cursor: default;
}
.exa-submenu__identity-logo {
	display: block;
	height: 1.5rem;
	width: auto;
	max-width: 150px;
	object-fit: contain;
}
.exa-submenu__identity-text {
	font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 700;
	font-size: 1.02rem;
	letter-spacing: -0.01em;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #fff;
}

/* ============================================================================
   About Products sub-nav — restyled 1:1 with the Dedicated Product `dp-subnav`
   (the /en/exa-arcadia-system/ blueprint): frosted dark bar, brand on the left,
   white section links pushed right with an active underline, compact red CTA.
   ========================================================================== */
.exa-submenu.exa-submenu--about-products {
	height: 3.25rem; /* 52px — matches dp-subnav */
	background: rgba(0, 0, 0, 0.82);
	-webkit-backdrop-filter: saturate(1.6) blur(18px);
	backdrop-filter: saturate(1.6) blur(18px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	/* Depth comes from the base .exa-submenu rule
	   (--renewal-secondary-nav-z-index): the bar sits *below* the site header so
	   an expanded nav dropdown overlays it. It used to declare 1400 here to beat
	   a z-index:1300 that leaked onto every semantic <header>; that leak is gone
	   (style.css), and 1400 was what trapped the dropdown underneath this bar. */
}
.exa-submenu.exa-submenu--about-products .exa-submenu__grid {
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: 75rem; /* 1200px */
	margin: 0 auto;
	padding: 0 4rem; /* 64px */
	height: 3.25rem;
}
/* Brand cell on the left; a margin-auto pushes links + CTAs to the right edge. */
.exa-submenu.exa-submenu--about-products .exa-submenu__left {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	margin-right: auto;
	min-width: 0;
}
.exa-submenu.exa-submenu--about-products .exa-submenu__anchors {
	position: relative; /* offsetParent for the sliding indicator */
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(14px, 2vw, 32px);
	height: 3.25rem;
	flex: 0 1 auto;
}
/* No Submenu Title/Logo set → the __left cell isn't rendered at all, so the
   margin-right:auto that pushed the links right is gone with it. The first
   remaining cell takes over the job and the row still reads right-aligned. */
.exa-submenu--no-identity .exa-submenu__anchors,
.exa-submenu--no-identity .exa-submenu__ctas:first-child {
	margin-left: auto;
}
.exa-submenu.exa-submenu--about-products a.exa-submenu__link {
	display: inline-flex;
	align-items: center;
	height: 100%;
	padding: 0;
	font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #c4c7c8; /* --dp-text-soft: resting grey */
	white-space: nowrap;
	transition: color 0.2s ease;
}
.exa-submenu.exa-submenu--about-products a.exa-submenu__link:hover,
.exa-submenu.exa-submenu--about-products a.exa-submenu__link[data-active="true"] {
	color: #fff; /* --dp-text */
}
/* Single sliding underline indicator (JS sets left/width to the active link),
   sitting on the bar's bottom border — 1:1 with dp-subnav__indicator. */
.exa-submenu.exa-submenu--about-products .exa-submenu__indicator {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 0;
	height: 2px;
	background: #fff;
	opacity: 0;
	pointer-events: none;
	transition: left 0.3s ease, width 0.3s ease, opacity 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
	.exa-submenu.exa-submenu--about-products .exa-submenu__indicator { transition: none; }
}
.exa-submenu.exa-submenu--about-products .exa-submenu__ctas {
	flex: 0 0 auto;
	gap: 10px;
}
.exa-submenu.exa-submenu--about-products .exa-submenu__cta {
	min-height: 0;
	padding: 7px 13px;
	font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	border-radius: 6px;
	/* 2px: the sub-nav buttons are small, but a 1px red outline all but vanished
	   against the black bar. */
	border-width: 2px;
}

.exa-submenu.exa-submenu--about-products.exa-submenu--hero-gated {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.25rem);
	transition: opacity 300ms ease-in-out, transform 300ms ease-in-out, visibility 0s linear 300ms;
}

.exa-submenu.exa-submenu--about-products.exa-submenu--hero-gated .exa-submenu__grid {
	pointer-events: none;
}

/* During the initial hero-gate evaluation the JS may correct the visibility once
   the hero's layout settles (images/fonts). Suppress the fade/slide transition
   for that window so the correction is instant and never flashes the bar in. The
   class is removed after load, restoring smooth transitions for scroll toggles. */
.exa-submenu.exa-submenu--gate-init {
	transition: none !important;
}

.exa-submenu__grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	max-width: 80rem;
	margin: 0 auto;
	height: 100%;
	padding: 0 1.25rem;
	pointer-events: auto;
}

.exa-submenu__left { /* empty spacer for centering */ }

.exa-submenu__anchors {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	height: 3rem;
}

/* Anchor links */
.exa-submenu a.exa-submenu__link {
	display: inline-flex;
	align-items: center;
	height: 3rem;
	padding: 0 0.5rem;
	font-family: 'Montserrat-Bold', Helvetica, Arial, sans-serif;
	font-size: 0.9rem;
	text-decoration: none;
	color: #9a9a9a;
	background: transparent;
	transition: color 0.2s ease;
	white-space: nowrap;
}

.exa-submenu a.exa-submenu__link:hover {
	color: #c9c9c9;
}

.exa-submenu a.exa-submenu__link:focus-visible {
	outline: 1px solid rgba(255,255,255,0.4);
	outline-offset: 2px;
}

.exa-submenu__ctas {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
}

/* Submenu CTAs — HubSpot-style compact */
.exa-submenu__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2rem;
	padding: 0.38rem 0.95rem;
	font-family: 'Montserrat-Bold', Helvetica, Arial, sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-transform: none;
	text-decoration: none;
	color: #fff;
	background-color: #D90500;
	border: 2px solid transparent;
	border-radius: 8px;
	transition: background-color 0.15s linear, color 0.15s linear, border-color 0.15s linear;
	white-space: nowrap;
	letter-spacing: 0;
}

/* CTA 1 hover + active */
.exa-submenu__cta:hover {
	background: #fff;
	color: #D90500;
	border-color: #D90500;
}
.exa-submenu__cta:active {
	background: #fcece6;
	color: #D90500;
	border-color: #D90500;
}

/* CTA 2: "See What Earns" — white bg, red text */
.exa-submenu__cta.exa-submenu__cta--secondary {
	background: #fff;
	color: #D90500;
	border-color: #D90500;
}
.exa-submenu__cta.exa-submenu__cta--secondary:hover {
	background: #D90500;
	color: #fff;
	border-color: transparent;
}
.exa-submenu__cta.exa-submenu__cta--secondary:active {
	background: #9f2800;
	color: #fff;
	border-color: transparent;
}

@media (max-width: 768px) {
	.exa-submenu { height: auto; min-height: 3rem; }
	.exa-submenu__grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0.4rem 0.75rem;
		gap: 0.3rem;
	}
	.exa-submenu__left { display: none; }
}

@media only screen and (max-width: 58.25rem) and (orientation: landscape) {
	.exa-submenu.exa-submenu--about-products {
		height: 3rem;
		min-height: 3rem;
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity 300ms ease-in-out, visibility 300ms ease-in-out, transform 300ms ease-in-out;
	}

	.exa-submenu.exa-submenu--about-products.exa-submenu--hero-gated {
		opacity: 0;
		visibility: hidden;
		transform: translateY(-0.25rem);
	}

	.exa-submenu.exa-submenu--about-products.exa-submenu--hero-gated .exa-submenu__grid {
		pointer-events: none;
	}

	.exa-submenu.exa-submenu--about-products .exa-submenu__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		max-width: 100%;
		height: 3rem;
		padding: 0 0.75rem;
		gap: 0.5rem;
	}

	.exa-submenu.exa-submenu--about-products .exa-submenu__left {
		display: block;
	}

	.exa-submenu.exa-submenu--about-products .exa-submenu__anchors {
		justify-content: center;
		gap: 0.85rem;
		min-width: 0;
		overflow: visible;
	}

	.exa-submenu.exa-submenu--about-products .exa-submenu__anchors .exa-submenu__link {
		display: inline-flex;
		padding: 0 0.35rem;
		font-size: 0.78rem;
	}

	.exa-submenu.exa-submenu--about-products .exa-submenu__ctas {
		display: flex;
		justify-content: flex-end;
		flex-wrap: nowrap;
		min-width: 0;
	}

	.exa-submenu.exa-submenu--about-products .exa-submenu__cta {
		min-height: 1.95rem;
		padding: 0.34rem 0.72rem;
		font-size: 0.66rem;
	}}

@media only screen and (max-width: 40em) and (orientation: portrait) {
	.exa-submenu {
		height: 3rem;
		min-height: 3rem;
	}

	.exa-submenu__grid {
		display: block;
		max-width: none;
		height: 3rem;
		padding: 0;
	}

	.exa-submenu__left {
		display: none;
	}

	.exa-submenu__ctas {
		display: none;
	}

	.exa-submenu__anchors {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		width: 100%;
		height: 3rem;
		min-width: 0;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding: 0;
	}

	.exa-submenu__anchors.has-scroll-overflow {
		justify-content: flex-start;
	}

	.exa-submenu__anchors::-webkit-scrollbar {
		display: none;
	}

	.exa-submenu__anchors .exa-submenu__link {
		flex: 0 0 auto;
		height: 3rem;
		padding: 0 0.5rem;
		font-size: 0.8rem;
	}

	.exa-submenu__anchors.has-scroll-overflow .exa-submenu__link:first-child {
		padding-left: 1.15rem;
	}

	.exa-submenu.exa-submenu--about-products .exa-submenu__anchors {
		justify-content: center;
		overflow-x: hidden;
		padding-left: 0 !important;
	}

	.exa-submenu.exa-submenu--about-products {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity 300ms ease-in-out, visibility 300ms ease-in-out, transform 300ms ease-in-out;
	}

	.exa-submenu.exa-submenu--about-products.exa-submenu--hero-gated {
		opacity: 0;
		visibility: hidden;
		transform: translateY(-0.25rem);
	}

	.exa-submenu.exa-submenu--about-products.exa-submenu--hero-gated .exa-submenu__grid {
		pointer-events: none;
	}

	.exa-submenu.exa-submenu--about-products .exa-submenu__anchors.has-scroll-overflow {
		justify-content: center;
	}

	.exa-submenu.exa-submenu--about-products .exa-submenu__anchors .exa-submenu__link {
		display: none;
	}}

/* ==========================================================================
   Section Spacing — SaaS-style generous breathing room between all blocks
   ========================================================================== */
.exa-operators,
.exa-features,
.exa-cabinet-360-container,
.exa-system-360-container,
.exa-carousel {
	margin-top: 4rem;
}

.exa-operators {
	margin-top: 2rem;
}

@media (max-width: 768px) {
	.exa-operators,
	.exa-features,
	.exa-cabinet-360-container,
	.exa-system-360-container,
	.exa-carousel {
		margin-top: 3rem;
	}

	.exa-operators {
		margin-top: 1.5rem;
	}

}

/* ==========================================================================
   Requested Dividers — thin grey separators between specific sections
   ========================================================================== */
.exa-operators,
#cabinet,
#exa-carousel-1,
#system,
#exa-carousel-2 {
	position: relative;
	--exa-section-divider-content-max: var(--renewal-accent-separator-content-max, 49rem);
}

.exa-operators::before,
.exa-operators::after,
#cabinet::before,
#exa-carousel-1::before,
#system::before,
#exa-carousel-2::before,
#exa-carousel-2::after {
	content: '';
	position: absolute;
	left: 50%;
	width: min(
		calc(100% - (var(--exa-section-divider-gutter) * 2)),
		var(--exa-section-divider-content-max, 100%)
	);
	height: var(--exa-section-divider-width);
	background: var(--exa-section-divider-color);
	opacity: var(--exa-section-divider-opacity);
	pointer-events: none;
	transform: translateX(-50%);
}

/* Hero -> Operators */
.exa-operators::before {
	top: -2rem;
	left: 0;
	right: 0;
	width: auto;
	transform: none;
}

/* Operators -> Built for Locations */
.exa-operators::after {
	bottom: -2rem;
}

/* Process Features -> Cabinet, Cabinet Features -> Games,
   Games -> System, System Features -> Accessories */
#cabinet::before,
#exa-carousel-1::before,
#system::before,
#exa-carousel-2::before {
	top: -2rem;
}

/* Accessories -> Bottom Hero */
#exa-carousel-2::after {
	bottom: -1.25rem;
	left: 0;
	right: 0;
	width: auto;
	transform: none;
}

@media (max-width: 768px) {
	.exa-operators::before,
	.exa-operators::after,
	#cabinet::before,
	#exa-carousel-1::before,
	#system::before,
	#exa-carousel-2::before {
		top: -1.5rem;
	}

	.exa-operators::after {
		top: auto;
		bottom: -0.95rem;
	}

	#exa-carousel-2::after {
		bottom: -0.875rem;
	}
}

/* ==========================================================================
   Operators — white title, enlarged logos, generous spacing
   ========================================================================== */
.exa-operators {
	padding: 3rem 1.25rem 3.6rem;
	text-align: center;
}

.exa-operators__title {
	font-family: 'Montserrat-Regular', Helvetica, Arial, sans-serif;
	font-weight: 400;
	margin-bottom: 0;
	font-size: clamp(1.0625rem, 1.5vw + 0.5rem, 1.3125rem);
	color: #fff;
	opacity: 0.8;
	line-height: 1.6;
}

.exa-operators__carousel {
	position: relative;
	max-width: 70rem;
	margin: 2rem auto 0;
}

.exa-operators__row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4.5rem;
	flex-wrap: wrap;
	max-width: 70rem;
	margin: 0 auto;
}

.exa-operators__arrow {
	display: none;
}

/* Uniform logo sizing: all logos same height & max-width,
   object-fit: contain forces consistent visual weight regardless of source aspect ratio */
.exa-operators__item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2.25rem;
	width: 7rem;
	overflow: hidden;
}

.exa-operators__item img {
	height: 100%;
	width: 100%;
	max-height: 2.25rem;
	object-fit: contain;
	transform: scale(var(--exa-logo-scale, 1));
}

/* Tablet: slightly smaller uniform logos */
@media (min-width: 481px) and (max-width: 1024px) {
	.exa-operators__item {
		height: 2rem;
		width: 6rem;
	}
	.exa-operators__item img {
		max-height: 2rem;
	}
}

/* Mobile portrait: swipeable logo carousel with manual arrows */
@media (max-width: 480px) and (orientation: portrait) {
	.exa-operators__carousel {
		overflow: hidden;
	}

	.exa-operators__row {
		width: 100%;
		max-width: none;
		min-width: 0;
		box-sizing: border-box;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		gap: 3rem;
		padding: 0 2.15rem;
		justify-content: center;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		touch-action: pan-x;
		scroll-padding-inline: 2.15rem;
	}

	.exa-operators__row.has-scroll-overflow {
		justify-content: flex-start;
	}

	.exa-operators__arrow {
		display: inline-flex;
		position: absolute;
		top: 0;
		bottom: 0;
		align-items: center;
		justify-content: center;
		width: 2.85rem;
		padding: 0 0.36rem;
		border: 0;
		background: transparent;
		color: #fff;
		cursor: pointer;
		z-index: 4;
		pointer-events: auto;
		touch-action: manipulation;
		transition: opacity 0.18s ease;
	}

	.exa-operators__arrow:hover,
	.exa-operators__arrow:focus-visible {
		outline: none;
		color: #fff;
	}

	.exa-operators__arrow--prev {
		left: 0;
		padding-left: 0.36rem;
		justify-content: flex-start;
		background: linear-gradient(90deg, rgba(3, 3, 3, 0.97) 16%, rgba(3, 3, 3, 0.82) 50%, rgba(3, 3, 3, 0.36) 70%, rgba(3, 3, 3, 0) 100%);
	}

	.exa-operators__arrow--next {
		right: 0;
		padding-right: 0.42rem;
		justify-content: flex-end;
		background: linear-gradient(270deg, rgba(3, 3, 3, 0.97) 16%, rgba(3, 3, 3, 0.82) 50%, rgba(3, 3, 3, 0.36) 70%, rgba(3, 3, 3, 0) 100%);
	}

	.exa-operators__arrow.is-disabled {
		opacity: 0.46;
		pointer-events: none;
	}

	.exa-operators__arrow svg {
		display: block;
		width: 0.78rem;
		height: 0.78rem;
		stroke: currentColor;
		stroke-width: 1.9;
		fill: none;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.exa-operators__row::-webkit-scrollbar { display: none; }

	.exa-operators__item {
		scroll-snap-align: start;
		flex: 0 0 auto;
		height: 1.75rem;
		width: 5.5rem;
	}

	.exa-operators__item img {
		max-height: 1.75rem;
	}
}

/* ==========================================================================
   Feature Blocks (hover-lift, staggered reveal, with heading)
   ========================================================================== */
.exa-features {
	width: 100%;
	max-width: none;
	/* Preserve the existing section rhythm; an earlier shared spacing rule sets
	   margin-top and must not reappear now that the old margin shorthand is gone. */
	margin: 0;
	padding: 2rem 0;
}

/* Add breathing room between the Operators divider and the first feature heading. */
.exa-operators + .exa-features {
	padding-top: 4rem;
}

@media (max-width: 768px) {
	.exa-operators + .exa-features {
		padding-top: 3.5rem;
	}
}

.exa-page .exa-features__heading {
	width: 100%;
	max-width: 75rem;
	margin: 0 auto 1.25rem;
	padding-inline: clamp(1.25rem, 2vw, 2rem);
	text-align: center;
}

.exa-features__grid {
	display: grid;
	width: 100%;
	max-width: 75rem;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 2vw, 2rem);
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

@media (min-width: 769px) {
	.exa-features__grid { grid-template-columns: repeat(3, 1fr); }
}

.exa-features__item {
	background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
	border-radius: 0.75rem;
	padding: 2rem;
	position: relative;
	overflow: hidden;
	opacity: 0;
	transform: translateY(6rem);
	will-change: opacity, transform;
	transition: box-shadow 0.25s ease;
}

.exa-features__item:hover {
	box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}

.exa-features__item--has-bg {
	background-size: cover;
	background-position: center;
}

.exa-features__item.is-empty-bg {
	background:
		radial-gradient(120% 90% at 8% 0%, rgba(255, 0, 0, 0.32) 0%, rgba(255, 0, 0, 0) 52%),
		linear-gradient(180deg, #ff0000 0%, #8a0000 58%, #000000 100%);
	background-color: #8a0000;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: 1px solid rgba(255, 0, 0, 0.38);
}

.exa-features__item--has-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(3,3,3,0.7);
	border-radius: inherit;
}

.exa-features__item.is-empty-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42));
	pointer-events: none;
}

.exa-features__item--has-bg > *,
.exa-features__item.is-empty-bg > * { position: relative; z-index: 1; }

.exa-features__icon {
	width: 3rem;
	height: 3rem;
	margin-bottom: 1rem;
	object-fit: contain;
}

.exa-features__title { font-size: 1.25rem; }
.exa-features__desc  { opacity: 0.75; margin: 0; }

.exa-features__item.is-empty-bg .exa-features__desc {
	color: #c7cbd2;
	opacity: 1;
}

.exa-features__item.is-empty-bg .exa-features__title {
	color: #fff;
}

/* ==========================================================================
   Cabinet 360 — Scroll-synced video scrub (Apple-style)
   All CSS scoped to .exa-cabinet-360-* to prevent global leaks.
   ========================================================================== */

/* Outer section — no extra padding; track handles vertical space */
.exa-cabinet-360-container {
	position: relative;
	z-index: 0;
	isolation: isolate;
	background: #000;
	text-align: center;
}

/* Title & description — normal document flow, never overlapped */
.exa-cabinet-360-title {
	padding: 1.25rem 1.25rem 0.25rem;
	margin: 0;
}

.exa-cabinet-360-stage-title {
	width: 100%;
	max-width: 56rem;
	margin: 0;
	padding: 0.15rem 1.25rem 0.5rem;
	text-align: center;
}

.exa-cabinet-360-desc {
	max-width: 36rem;
	margin: 0 auto 0;
	padding: 0 1.25rem 0.5rem;
	font-family: 'Montserrat-Regular', Helvetica, Arial, sans-serif;
	font-size: clamp(0.9375rem, 1.2vw + 0.4rem, 1.125rem);
	color: rgba(255,255,255,0.8);
	line-height: 1.6;
}

/* Scroll track — height set inline and normalized by JS for the scroll scrub span. */
.exa-cabinet-360-track {
	position: relative;
	z-index: 0;
	touch-action: pan-y pinch-zoom;
}

/* Sticky viewport — pins below fixed header + submenu.
   No min-height: content sizes naturally. JS collapses trailing blank. */
.exa-cabinet-360-sticky {
	position: sticky;
	top: calc(var(--renewal-main-nav-height, 5.3125rem) + var(--renewal-game-submenu-height, 3rem));
	z-index: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 0 0.75rem;
	touch-action: pan-y pinch-zoom;
}

/* Video viewer — constrained, centered */
.exa-cabinet-360-viewer {
	position: relative;
	width: 100%;
	max-width: 56rem;
	padding: 0 1.25rem;
	background: transparent;
	touch-action: pan-y pinch-zoom;
}

.exa-cabinet-360-video {
	width: 100%;
	max-height: clamp(18rem, calc(100dvh - var(--renewal-main-nav-height, 5.3125rem) - var(--renewal-game-submenu-height, 3rem) - 13rem), 42rem);
	display: block;
	object-fit: contain;
	background: #000;
	border-radius: 0;
	/* The scrub assets are encoded with an almost-black matte at the frame edge.
	   A slight contrast lift clamps that matte to true black without visibly
	   altering the cabinet art. */
	filter: contrast(1.03);
	pointer-events: none;
}

.exa-cabinet-360-scrolly {
	position: relative;
	width: 100%;
	height: clamp(18rem, calc(100dvh - var(--renewal-main-nav-height, 5.3125rem) - var(--renewal-game-submenu-height, 3rem) - 13rem), 42rem);
	overflow: hidden;
	border-radius: 0;
	background: #000;
	touch-action: pan-y pinch-zoom;
}

.exa-cabinet-360-scrolly video,
.exa-cabinet-360-scrolly canvas,
.exa-cabinet-360-scrolly img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	background: #000;
	filter: contrast(1.03);
	will-change: contents;
	transform: translateZ(0);
}

.exa-cabinet-360-gif-static {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Loading spinner */
.exa-cabinet-360-loader {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	border-radius: 0;
	z-index: 2;
	transition: opacity 0.4s ease;
}

.exa-cabinet-360-loader--hidden {
	opacity: 0;
	pointer-events: none;
}

.exa-cabinet-360-loader__spinner {
	width: 36px;
	height: 36px;
	border: 3px solid rgba(255,255,255,0.15);
	border-top-color: #fff;
	border-radius: 50%;
	animation: exa360spin 0.8s linear infinite;
}

@keyframes exa360spin {
	to { transform: rotate(360deg); }
}

/* P2/P4 model switcher — visually matches the ARC-32 Features segmented tabs.
   Cabinet media switching remains owned by the existing data attributes + JS. */
.exa-cabinet-360-switcher {
	position: relative;
	display: flex;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	margin: 1rem auto 0;
	padding: 4px;
	background: rgba(28, 28, 31, 0.55);
	-webkit-backdrop-filter: blur(20px) saturate(1.3);
	backdrop-filter: blur(20px) saturate(1.3);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 9999px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	isolation: isolate;
	touch-action: pan-y pinch-zoom;
}

.exa-cabinet-360-switcher::-webkit-scrollbar {
	display: none;
}

/* JS measures the selected label after fragment hydration and moves this
   compositor-backed indicator without affecting the switcher's layout. */
.exa-cabinet-360-switcher__capsule {
	position: absolute;
	z-index: 0;
	top: 4px;
	left: 0;
	width: 0;
	height: calc(100% - 8px);
	background: rgba(255, 255, 255, 0.15);
	border-radius: 9999px;
	transform: translateX(0);
	will-change: transform, width;
	pointer-events: none;
	transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), width 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (prefers-reduced-motion: reduce) {
	.exa-cabinet-360-switcher__capsule {
		transition: none;
	}
}

/* Segments use the ARC-32 Features tab metrics and typography verbatim. */
.exa-cabinet-360-btn {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	-webkit-appearance: none;
	appearance: none;
	padding: 10px 22px;
	font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	font-size: clamp(13px, 1.4vw, 16px);
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	border: none;
	border-radius: 9999px;
	background: transparent;
	color: #86868b;
	touch-action: manipulation;
	transition: color 0.3s ease;
}

.exa-cabinet-360-btn:hover {
	color: #c4c7c8;
}

.exa-cabinet-360-btn[aria-selected="true"],
.exa-cabinet-360-btn--active {
	color: #fff;
}

/* Selected: crisp white text over the frosted sliding capsule. */
.exa-cabinet-360-btn--active,
.exa-cabinet-360-btn--active:hover {
	color: #fff;
}

.exa-cabinet-360-btn:focus-visible {
	outline: 2px solid #d90500;
	outline-offset: 2px;
}

@media (max-width: 768px) {
	.exa-cabinet-360-btn {
		padding: 8px 16px;
	}
}

/* Scroll hint */
.exa-cabinet-360-hint {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.25rem;
	opacity: 1;
	padding-top: 1rem;
	position: relative;
	z-index: 3;
	transition: opacity 0.4s ease;
}

.exa-cabinet-360-hint__text {
	font-family: 'Montserrat-Regular', Helvetica, Arial, sans-serif;
	font-size: 0.75rem;
	color: rgba(255,255,255,0.5);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.exa-cabinet-360-hint__model {
	font-family: 'Montserrat-Bold', Helvetica, Arial, sans-serif;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	color: rgba(255,255,255,0.72);
	text-transform: uppercase;
}

.exa-cabinet-360-hint__arrow {
	display: block;
	color: rgba(255,255,255,0.4);
	will-change: transform;
	animation: exa360bounce 1.5s ease-in-out infinite;
}

@keyframes exa360bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(5px); }
}

/* ==========================================================================
   Carousel — Post 23543 logic, dots only, 16:9 strict, center-focus
   ========================================================================== */
.exa-carousel {
	padding: 2rem 0;
}

.exa-section-head {
	width: 100%;
	text-align: center;
}

.exa-section-head--carousel {
	max-width: 80rem;
	margin: 0 auto 1.25rem;
	padding: 0 1.25rem;
}

.exa-section-head--stage {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0.15rem 1.25rem 0.5rem;
}

.exa-section-head__title-slot {
	min-width: 0;
}

.exa-section-head__title {
	margin: 0;
	padding: 0;
	text-align: center;
}

.exa-section-head .exa-carousel__heading,
.exa-section-head .exa-cabinet-360-title,
.exa-section-head .exa-cabinet-360-stage-title,
.exa-section-head .exa-system-360-title,
.exa-section-head .exa-system-360-stage-title {
	margin: 0;
	padding: 0;
	width: auto;
	max-width: none;
}

.exa-carousel__heading {
	text-align: center;
	margin-bottom: 1.25rem;
	padding: 0 1.25rem;
}

/* --- Apple-style slider --- */
.exa-slider {
	--exa-slider-inline-nav-offset: 28px;
	position: relative;
	max-width: 80rem;
	margin: 0 auto;
	overflow: hidden;
	touch-action: pan-y pinch-zoom;
	-webkit-user-select: none;
	user-select: none;
}

/* About Products owns full-bleed carousel bands. Keep the shared 80rem
   default for sliders embedded by other templates, but release every slider
   mounted inside this page root so its media track can reach the viewport. */
.exa-page .exa-slider {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

.exa-slider__media-stage {
	position: relative;
}

.exa-slider.exa-slider--fullscreen .exa-slider__media-stage {
	height: 100%;
}

.exa-slider__track {
	display: flex;
	gap: 1.5rem;
	will-change: transform;
}

.exa-slider__slide {
	flex: 0 0 55%;
	aspect-ratio: 16 / 9;
	position: relative;
	border-radius: 0.75rem;
	overflow: hidden;
	background: #111;
	opacity: 0.5;
	transform: scale(0.92);
	transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
	            transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.exa-slider[data-exa-mobile-touch-captions="1"] .exa-slider__slide {
	border-radius: 28px;
}

.exa-slider__slide--active {
	opacity: 1;
	transform: scale(1.05);
}

/* Held for the single frame in which the loop teleports the track back past the
   cloned slide. Without it the active-slide hand-off animates its 0.6s scale on
   top of an already-jumped track, which is the stray zoom seen when the
   carousel wraps from the last media file to the first. */
.exa-slider--clone-jump .exa-slider__slide,
.exa-slider--clone-jump .exa-slider__track {
	transition: none !important;
}

.exa-slider__media-frame {
	position: relative;
	width: 100%;
	height: 100%;
}

/* Opt-in decoded-image handoff. Sliders using original, high-density media
   keep a dark composited frame until the browser has decoded each image, then
   blend it in. This removes the transparent/white frame exposed by a lazy loop
   clone without imposing the behavior on unrelated legacy carousels. */
.exa-slider[data-exa-decode-images] .exa-slider__media-frame {
	background: #111;
}

.exa-slider[data-exa-decode-images][data-exa-slider-init="1"] img.exa-slider__media {
	opacity: 0;
	image-rendering: -webkit-optimize-contrast;
	transition: opacity 220ms ease;
}

.exa-slider[data-exa-decode-images][data-exa-slider-init="1"] img.exa-slider__media.is-media-ready {
	opacity: 1;
}

.exa-slider__media {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: #000;
}

.exa-slider__caption {
	position: absolute;
	top: 0; left: 0; right: 0;
	margin: 0;
	padding: 1.25rem 1.5rem 2.5rem;
	font-family: 'Montserrat-Bold', Helvetica, Arial, sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
	z-index: 2;
	background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.35) 60%, transparent 100%);
	text-shadow: 0 2px 6px rgba(0,0,0,0.7);
}

.exa-slider__caption-link {
	display: inline-block;
	color: inherit;
	text-decoration: none;
	pointer-events: auto;
	touch-action: manipulation;
	transition: color 0.18s ease;
}

.exa-slider__caption-link:hover,
.exa-slider__caption-link:focus,
.exa-slider__caption-link:active,
.exa-slider__caption-link:focus-visible {
	color: #D90500;
}

.exa-slider__media-footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0.8rem 1rem 0.95rem;
	background: linear-gradient(0deg, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.56) 62%, rgba(0,0,0,0) 100%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.exa-slider[data-exa-mobile-touch-captions="1"] .exa-slider__media-footer {
	background: transparent;
}

.exa-slider__slide--active .exa-slider__media-footer {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.exa-slider__media-cta {
	position: relative;
	z-index: 1;
	max-width: min(100%, 15rem);
	margin-left: auto;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
	pointer-events: auto;
}

.exa-slider__mobile-meta {
	display: none;
}

.exa-slider--accessories .exa-slider__description--overlay {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	z-index: 2;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0.45rem 1.1rem;
	box-sizing: border-box;
	border-radius: 0;
	background: rgba(0,0,0,0.52);
	text-align: center;
	font-family: 'Montserrat-Regular', Helvetica, Arial, sans-serif;
	font-size: clamp(0.82rem, 0.64vw + 0.54rem, 0.98rem);
	font-weight: 400;
	line-height: 1.45;
	color: rgba(255,255,255,0.9);
	text-shadow: 0 2px 6px rgba(0,0,0,0.6);
	pointer-events: none;
}

/* Navigation dock: play/pause circle + pagination well */
.exa-slider__dock {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	padding: 1.25rem 1.25rem 0;
}

/* Play/pause — perfect circle, no border */
.exa-slider__dock-play {
	flex: 0 0 auto;
	width: 36px;
	min-width: 36px;
	height: 36px;
	min-height: 36px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,0.14);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}

.exa-slider__dock-play svg {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	display: block;
}

.exa-slider__dock-play:hover {
	background: rgba(255,255,255,0.22);
}

/* Pagination well — oval pill container, no border */
.exa-slider__well {
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(255,255,255,0.14);
	border: none;
	border-radius: 100px;
	height: 36px;
	padding: 0 16px;
}

/* Pip (indicator) — inactive: small dot */
.exa-slider__pip {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	border: none;
	outline: none;
	padding: 0;
	background: rgba(255,255,255,0.35);
	cursor: pointer;
	overflow: hidden;
	flex: 0 0 auto;
	transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease, background 0.3s ease;
}

/* Active image: larger circle */
.exa-slider__pip--active-img {
	width: 12px;
	height: 12px;
	border-radius: 6px;
	background: #fff;
}

/* Active video: elongated capsule */
.exa-slider__pip--active-vid {
	width: 38px;
	height: 8px;
	border-radius: 4px;
	background: rgba(255,255,255,0.25);
}

/* Progress fill inside capsule */
.exa-slider__pip-fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	background: #fff;
	border-radius: inherit;
	pointer-events: none;
}

.exa-slider__inline-nav,
.exa-slider__nav-btn {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 50%;
	background: rgba(255,255,255,0.16);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	color: rgba(255,255,255,0.82);
	cursor: pointer;
	pointer-events: auto;
	touch-action: manipulation;
	transform: translateY(-50%) scale(1);
	transition:
		background-color 0.25s ease,
		color 0.25s ease,
		opacity 0.25s ease,
		transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Inline arrows belong to the card lane, not to each card's media frame. The
   dock has a fixed 56px block size, so this fixed offset keeps the arrows on
   the card midpoint at every viewport. */
.exa-slider__inline-nav {
	top: calc(50% - var(--exa-slider-inline-nav-offset));
}

.exa-slider__media-stage > .exa-slider__inline-nav {
	top: 50%;
}

.exa-slider__nav-btn {
	top: 50%;
	display: none;
}

.exa-slider.exa-slider--fullscreen .exa-slider__nav-btn {
	display: inline-flex;
}

.exa-slider__inline-nav:hover,
.exa-slider__inline-nav:focus-visible,
.exa-slider__nav-btn:hover,
.exa-slider__nav-btn:focus-visible {
	background: rgba(255,255,255,0.26);
	color: #fff;
	transform: translateY(-50%) scale(1.06);
}

.exa-slider__inline-nav:focus-visible,
.exa-slider__nav-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.exa-slider__inline-nav:active,
.exa-slider__nav-btn:active {
	transform: translateY(-50%) scale(0.96);
}

.exa-slider__inline-nav:disabled,
.exa-slider__nav-btn:disabled {
	opacity: 0.28;
	cursor: default;
}

.exa-slider__inline-nav--prev,
.exa-slider__nav-btn--prev {
	left: 20px;
}

.exa-slider__inline-nav--next,
.exa-slider__nav-btn--next {
	right: 20px;
}

.exa-slider__inline-nav-icon,
.exa-slider__nav-icon {
	display: block;
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (max-width: 768px) {
	.exa-slider__inline-nav,
	.exa-slider__nav-btn {
		width: 48px;
		height: 48px;
	}

	.exa-slider__inline-nav--prev,
	.exa-slider__nav-btn--prev {
		left: 8px;
	}

	.exa-slider__inline-nav--next,
	.exa-slider__nav-btn--next {
		right: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.exa-slider[data-exa-decode-images][data-exa-slider-init="1"] img.exa-slider__media {
		transition: none;
	}
	.exa-slider__inline-nav,
	.exa-slider__nav-btn {
		transition: none;
	}
}

.exa-slider__fs-ui {
	display: none;
}

/* Fullscreen and inline navigation are mutually exclusive. Keep the generated
   fullscreen UI out of layout and hit testing until the expanded state owns it. */
.exa-slider__fs-ui[hidden],
.exa-slider:not(.exa-slider--fullscreen) .exa-slider__fs-ui,
.exa-slider__inline-nav[hidden],
.exa-slider.exa-slider--fullscreen .exa-slider__inline-nav {
	display: none !important;
	pointer-events: none !important;
}

.exa-slider__fs-bottom {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.8rem;
	padding: 0.8rem 1rem 1rem;
	background: linear-gradient(0deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.58) 58%, rgba(0,0,0,0) 100%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.exa-slider__fs-description {
	margin: 0 auto;
	max-width: min(84vw, 54rem);
	text-align: center;
	font-family: 'Montserrat-Regular', Helvetica, Arial, sans-serif;
	font-size: 0.9rem;
	line-height: 1.45;
	color: rgba(255,255,255,0.9);
}

.exa-slider__fs-cta {
	display: none;
	align-self: center;
	margin-top: 8px;
	width: auto;
	min-width: 15rem;
	max-width: min(100%, 22rem);
	padding: 0.85rem 1.6rem;
	border: 0;
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.2;
	border-radius: 8px;
	box-shadow: 0 8px 18px rgba(3, 3, 3, 0.18);
	pointer-events: auto;
}

.exa-slider__fs-ui--has-cta .exa-slider__fs-cta {
	display: inline-flex;
}

.exa-slider-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 100dvh;
	z-index: 99999;
	background: #000;
	display: flex;
	align-items: stretch;
	justify-content: stretch;
	overflow: hidden;
}

.exa-slider.exa-slider--fullscreen {
	position: absolute !important;
	top: 0;
	left: 0;
	max-width: none !important;
	width: 100vw !important;
	height: var(--exa-fs-vh, 100dvh) !important;
	min-height: var(--exa-fs-vh, 100dvh) !important;
	margin: 0 !important;
	z-index: 1;
	background: #000;
	overflow: hidden;
}

.exa-slider.exa-slider--fullscreen .exa-slider__track {
	width: 100%;
	min-width: 100%;
	height: 100%;
	gap: 0;
}

.exa-slider.exa-slider--fullscreen .exa-slider__slide {
	flex: 0 0 100%;
	width: 100%;
	min-width: 100%;
	max-width: 100%;
	height: 100%;
	min-height: 100%;
	aspect-ratio: auto;
	transform: none;
	opacity: 1;
	border-radius: 0;
}

.exa-slider.exa-slider--fullscreen .exa-slider__media-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 0;
}

.exa-slider.exa-slider--fullscreen .exa-slider__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: 100vw;
	max-height: var(--exa-fs-vh, 100dvh);
	margin: auto;
	object-fit: contain;
	background: #000;
}

.exa-slider.exa-slider--fullscreen .exa-slider__caption {
	display: none;
}

.exa-slider.exa-slider--fullscreen .exa-slider__media-footer,
.exa-slider.exa-slider--fullscreen .exa-slider__media-cta {
	display: none;
}

.exa-slider.exa-slider--fullscreen .exa-slider__title,
.exa-slider.exa-slider--fullscreen .exa-slider__description {
	display: none;
}

.exa-slider.exa-slider--fullscreen .exa-slider__fs-ui {
	display: block;
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 20;
}

.exa-slider.exa-slider--fullscreen .exa-slider__fs-ui--has-description .exa-slider__fs-bottom,
.exa-slider.exa-slider--fullscreen .exa-slider__fs-ui--has-cta .exa-slider__fs-bottom {
	opacity: 1;
}

.exa-slider.exa-slider--fullscreen.exa-slider--accessories.exa-slider--fs-has-description .exa-slider__media {
	max-height: calc(var(--exa-fs-vh, 100dvh) - 8.25rem);
}

.exa-slider.exa-slider--fullscreen .exa-slider__fs-top {
	opacity: 1;
	pointer-events: auto;
}

.exa-slider.exa-slider--fullscreen .exa-slider__dock {
	display: none;
}

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
	.exa-slider .exa-slider__slide {
		cursor: grab;
	}

	.exa-slider.exa-slider--dragging .exa-slider__slide {
		cursor: grabbing;
	}

	.exa-slider__slide--hintable::after {
		content: attr(data-exa-expand-hint);
		position: absolute;
		left: 50%;
		bottom: 1rem;
		transform: translateX(-50%);
		padding: 0.35rem 0.7rem;
		border-radius: 999px;
		background: rgba(0,0,0,0.56);
		color: rgba(255,255,255,0.95);
		font-family: 'Montserrat-Bold', Helvetica, Arial, sans-serif;
		font-size: 0.68rem;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s ease;
		z-index: 6;
	}

	.exa-slider__slide--active:hover::after {
		opacity: 1;
	}

	.exa-slider.exa-slider--dragging .exa-slider__slide--hintable::after,
	.exa-slider.exa-slider--fullscreen .exa-slider__slide--hintable::after {
		opacity: 0;
	}

	.exa-slider__media {
		-webkit-user-drag: none;
		user-drag: none;
	}

	.exa-slider__fs-ui {
		display: block;
		position: absolute;
		inset: 0;
		pointer-events: none;
		z-index: 20;
	}

	.exa-slider__fs-top {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 1rem 1.2rem;
		background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 65%, rgba(0,0,0,0) 100%);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s ease;
	}

	.exa-slider__fs-count {
		font-family: 'Montserrat-Bold', Helvetica, Arial, sans-serif;
		font-size: 0.9rem;
		color: #fff;
		letter-spacing: 0.03em;
		position: relative;
		z-index: 1;
	}

		.exa-slider__fs-title {
			position: absolute;
			left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		max-width: min(60vw, 42rem);
		padding: 0 0.75rem;
		overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			text-align: center;
			pointer-events: auto;
			font-family: 'Montserrat-Bold', Helvetica, Arial, sans-serif;
			font-size: 0.9rem;
			color: #fff;
			letter-spacing: 0.02em;
			line-height: 1.2;
		}

		.exa-slider__fs-title-link {
			color: inherit;
			text-decoration: none;
			pointer-events: auto;
			touch-action: manipulation;
			transition: color 0.18s ease;
		}

		.exa-slider__fs-title-link:hover,
		.exa-slider__fs-title-link:focus,
		.exa-slider__fs-title-link:active,
		.exa-slider__fs-title-link:focus-visible {
			color: #D90500;
		}

	.exa-slider__fs-close {
		pointer-events: auto;
		width: 2.3rem;
		height: 2.3rem;
		border-radius: 999px;
		border: 1px solid rgba(255,255,255,0.5);
		background: rgba(0,0,0,0.28);
		color: #fff;
		font-family: 'Montserrat-Bold', Helvetica, Arial, sans-serif;
		font-size: 0.9rem;
		cursor: pointer;
		transition: background 0.2s ease, border-color 0.2s ease;
		position: relative;
		z-index: 1;
	}

	.exa-slider__fs-close:hover {
		background: rgba(0,0,0,0.56);
		border-color: rgba(255,255,255,0.9);
	}

	.exa-slider.exa-slider--fullscreen .exa-slider__fs-top {
		opacity: 1;
		pointer-events: auto;
	}

	.exa-slider.exa-slider--fullscreen .exa-slider__dock {
		display: none;
	}

	.exa-slider-overlay {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 100dvh;
		z-index: 99999;
		background: #000;
		display: flex;
		align-items: stretch;
		justify-content: stretch;
		overflow: hidden;
	}

	.exa-slider.exa-slider--fullscreen,
	.exa-slider:fullscreen,
	.exa-slider:-webkit-full-screen {
		position: absolute;
		top: 0;
		left: 0;
		max-width: none;
		width: 100vw;
		height: var(--exa-fs-vh, 100dvh);
		min-height: var(--exa-fs-vh, 100dvh);
		background: #000;
		margin: 0;
		overflow: hidden;
	}

	.exa-slider.exa-slider--fullscreen .exa-slider__track,
	.exa-slider:fullscreen .exa-slider__track,
	.exa-slider:-webkit-full-screen .exa-slider__track {
		width: 100%;
		min-width: 100%;
		height: var(--exa-fs-vh, 100dvh);
		gap: 0;
	}

	.exa-slider.exa-slider--fullscreen .exa-slider__slide,
	.exa-slider:fullscreen .exa-slider__slide,
	.exa-slider:-webkit-full-screen .exa-slider__slide {
		flex: 0 0 100%;
		width: 100%;
		min-width: 100%;
		max-width: 100%;
		height: var(--exa-fs-vh, 100dvh);
		min-height: var(--exa-fs-vh, 100dvh);
		aspect-ratio: auto;
		transform: none;
		opacity: 1;
		border-radius: 0;
	}

	.exa-slider.exa-slider--fullscreen .exa-slider__media-frame,
	.exa-slider:fullscreen .exa-slider__media-frame,
	.exa-slider:-webkit-full-screen .exa-slider__media-frame {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border-radius: 0;
	}

	.exa-slider.exa-slider--fullscreen .exa-slider__media,
	.exa-slider:fullscreen .exa-slider__media,
	.exa-slider:-webkit-full-screen .exa-slider__media {
		max-width: 100vw;
		max-height: var(--exa-fs-vh, 100dvh);
		object-fit: contain;
		background: #000;
		cursor: zoom-out;
	}

	.exa-slider.exa-slider--fullscreen .exa-slider__caption,
	.exa-slider:fullscreen .exa-slider__caption,
	.exa-slider:-webkit-full-screen .exa-slider__caption {
		display: none;
	}

	.exa-slider.exa-slider--fullscreen .exa-slider__title,
	.exa-slider.exa-slider--fullscreen .exa-slider__description,
	.exa-slider:fullscreen .exa-slider__title,
	.exa-slider:fullscreen .exa-slider__description,
	.exa-slider:-webkit-full-screen .exa-slider__title,
	.exa-slider:-webkit-full-screen .exa-slider__description {
		display: none;
	}
}

/* Responsive slide widths */
@media (max-width: 1024px) {
	.exa-slider__slide { flex: 0 0 70%; }
}

@media (max-width: 768px) {
	.exa-slider__slide { flex: 0 0 85%; }
}

@media (max-width: 480px) and (orientation: portrait) {
	/* Keep enough of the neighbouring slides visible to signal horizontal
	   navigation on narrow portrait screens. */
	.exa-slider__slide { flex: 0 0 66%; }
}

/* ==========================================================================
   System 360 — Scroll-synced video scrub (mirrors Cabinet 360, no P2/P4)
   ========================================================================== */
.exa-system-360-container {
	position: relative;
	z-index: 0;
	isolation: isolate;
	background: #000;
	text-align: center;
}

.exa-system-360-title {
	padding: 1.25rem 1.25rem 0.25rem;
	margin: 0;
}

.exa-system-360-stage-title {
	width: 100%;
	max-width: 56rem;
	margin: 0;
	padding: 0.15rem 1.25rem 0.5rem;
	text-align: center;
}

.exa-system-360-desc {
	max-width: 36rem;
	margin: 0 auto 0;
	padding: 0 1.25rem 0.5rem;
	font-family: 'Montserrat-Regular', Helvetica, Arial, sans-serif;
	font-size: clamp(0.9375rem, 1.2vw + 0.4rem, 1.125rem);
	color: rgba(255,255,255,0.8);
	line-height: 1.6;
}

.exa-system-360-track {
	position: relative;
	z-index: 0;
	background: #000;
}

.exa-system-360-sticky {
	position: sticky;
	top: calc(var(--renewal-main-nav-height, 5.3125rem) + var(--renewal-game-submenu-height, 3rem));
	z-index: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 0 0.75rem;
	background: #000;
}

@media (max-width: 768px) {
	/* Use the measured mobile bar height, then reserve a full clear row below
	 * its divider. This changes the sticky stop, not either scrub track/video. */
	.exa-cabinet-360-sticky,
	.exa-system-360-sticky {
		top: calc(
			var(--renewal-main-nav-height, 5.3125rem) +
			var(--exa-about-products-submenu-live-height, 3.8125rem) +
			1.25rem
		);
	}
}

.exa-cabinet-360-track.exa-360-track--upward-release .exa-cabinet-360-sticky,
.exa-system-360-track.exa-360-track--upward-release .exa-system-360-sticky {
	position: absolute;
	top: var(--exa-upward-release-top, 0px);
	left: 0;
	right: 0;
}

.exa-system-360-viewer {
	position: relative;
	width: 100%;
	max-width: 56rem;
	padding: 0 1.25rem;
	background: #000;
}

.exa-system-360-video {
	width: 100%;
	max-height: clamp(16rem, calc(100dvh - var(--renewal-main-nav-height, 5.3125rem) - var(--renewal-game-submenu-height, 3rem) - 11rem), 42rem);
	display: block;
	object-fit: contain;
	background: #000;
	border-radius: 0;
	filter: contrast(1.03);
	pointer-events: none;
}

.exa-system-360-scrolly {
	position: relative;
	width: 100%;
	height: clamp(16rem, calc(100dvh - var(--renewal-main-nav-height, 5.3125rem) - var(--renewal-game-submenu-height, 3rem) - 11rem), 42rem);
	overflow: hidden;
	border-radius: 0;
	background: #000;
}

.exa-system-360-scrolly video,
.exa-system-360-scrolly canvas,
.exa-system-360-scrolly img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	background: #000;
	filter: contrast(1.03);
	will-change: contents;
	transform: translateZ(0);
}

.exa-system-360-loader {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	border-radius: 0;
	z-index: 2;
	transition: opacity 0.4s ease;
}

.exa-system-360-loader--hidden {
	opacity: 0;
	pointer-events: none;
}

.exa-system-360-meta {
	position: relative;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 56rem;
	margin-top: 0;
	padding: 0 1.25rem;
}

.exa-system-360-cta-row {
	position: relative;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: 0;
}

.exa-system-360-cta-row .exa-shop-cta {
	max-width: min(100%, 18rem);
}

.exa-system-360-loader__spinner {
	width: 36px;
	height: 36px;
	border: 3px solid rgba(255,255,255,0.15);
	border-top-color: #fff;
	border-radius: 50%;
	animation: exa360spin 0.8s linear infinite;
}

.exa-system-360-hint {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.25rem;
	opacity: 1;
	padding-top: 0.3rem;
	position: relative;
	z-index: 3;
	transition: opacity 0.4s ease;
}

.exa-system-360-hint__text {
	font-family: 'Montserrat-Regular', Helvetica, Arial, sans-serif;
	font-size: 0.75rem;
	color: rgba(255,255,255,0.5);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.exa-system-360-hint__arrow {
	display: block;
	color: rgba(255,255,255,0.4);
	will-change: transform;
	animation: exa360bounce 1.5s ease-in-out infinite;
}

@media (max-width: 480px) {
	.exa-cabinet-360-title,
	.exa-system-360-title {
		padding: 1rem 1rem 0.2rem;
	}

	.exa-cabinet-360-stage-title,
	.exa-system-360-stage-title {
		padding: 0.1rem 1rem 0.35rem;
	}

	.exa-cabinet-360-desc,
	.exa-system-360-desc {
		padding: 0 1rem 0.25rem;
	}

	.exa-cabinet-360-sticky,
	.exa-system-360-sticky {
		padding: 0.15rem 0 0.25rem;
	}

	.exa-cabinet-360-viewer,
	.exa-system-360-viewer {
		max-width: 100%;
	}

	.exa-cabinet-360-viewer {
		padding: 0 0.35rem;
	}

	.exa-system-360-viewer {
		padding: 0 0.6rem;
	}

	.exa-cabinet-360-scrolly {
		height: clamp(17rem, 76vw, 26rem);
		max-height: 76dvh;
	}

	.exa-system-360-scrolly {
		height: clamp(15.5rem, 70vw, 24rem);
		max-height: 72dvh;
	}

	.exa-cabinet-360-scrolly video,
	.exa-cabinet-360-scrolly canvas,
	.exa-cabinet-360-scrolly img {
		transform: translateZ(0) scale(1.08);
		transform-origin: center center;
	}

	.exa-cabinet-360-video,
	.exa-system-360-video {
		max-height: none;
	}

	.exa-cabinet-360-switcher {
		margin-top: 0.5rem;
	}

	.exa-cabinet-360-hint {
		padding-top: 0.95rem;
	}

	.exa-system-360-hint {
		padding-top: 0.8rem;
	}
}

/* ==========================================================================
   12/13. Bottom Hero & Associations — HubSpot Flush
   ========================================================================== */
/* The visual band is full-bleed; copy and association controls stay on the
   page's established 80rem content column. */
.exa-footer-hero {
	--exa-hero-content-max: 80rem;
	--exa-hero-content-gutter: max(0px, calc((100% - var(--exa-hero-content-max)) / 2));
	position: relative;
	width: 100%;
	max-width: none;
	/* Stated rather than inherited so the full-width media band cannot expose a
	   mismatched ground while an image loads. */
	background: #030303;
	min-height: clamp(300px, 40vh, 400px);
	margin: 1.25rem 0 0;
	margin-bottom: 0;
	padding: 0;
	overflow: hidden;
}

.exa-footer-hero::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	width: 100%;
	bottom: 0;
	height: 1px;
	background: #5a5a5a;
	pointer-events: none;
	z-index: 3;
}

.exa-footer-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	z-index: 0;
}

.exa-footer-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.exa-footer-hero__shade {
	position: absolute;
	inset: 0;
	width: 100%;
	z-index: 1;
	background: linear-gradient(90deg, rgba(3,3,3,0.86) 0%, rgba(3,3,3,0.64) 52%, rgba(3,3,3,0.48) 100%);
}

.exa-footer-hero__inner {
	position: relative;
	z-index: 2;
	max-width: var(--exa-hero-content-max);
	min-height: inherit;
	margin: 0 auto;
	padding: 3.25rem 1.25rem 2.25rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.exa-footer-hero__headline {
	margin: 0 0 1rem;
	max-width: 16ch;
	text-align: left;
	font-size: clamp(2rem, 3vw + 0.7rem, 3.25rem);
}

.exa-footer-hero__headline.exa-hero__headline--inline {
	left: 0;
	transform: none;
	width: auto;
	max-width: 18ch;
	text-align: left;
	font-family: var(--renewal-system-rotating-font-family, "Montserrat", "Helvetica Neue", Arial, sans-serif);
	font-size: var(--renewal-system-rotating-font-size, clamp(2rem, 3.6vw + 0.5rem, 3.65rem));
	font-weight: var(--renewal-system-rotating-font-weight, 600);
	line-height: var(--renewal-system-rotating-line-height, 1.14);
	letter-spacing: var(--renewal-system-rotating-letter-spacing, -0.01em);
	text-transform: none;
}

.exa-footer-hero__ctas {
	justify-content: flex-start;
	gap: 0.65rem;
}

.exa-footer-hero__ctas .exa-btn {
	min-width: 208px;
	padding: 14px 32px;
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.2;
	border-radius: 8px;
}

/* Offset by the content gutter so the logos stay aligned with the copy while
   the media beneath them bleeds to the viewport. */
.exa-footer-hero__assoc-overlay {
	position: absolute;
	right: calc(var(--exa-hero-content-gutter) + clamp(1rem, 4vw, 4rem));
	bottom: clamp(1rem, 5vh, 2.25rem);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	width: fit-content;
	max-width: min(34rem, 48vw);
}

.exa-footer-hero__assoc-text {
	margin: 0;
	font-family: 'Montserrat-Regular', Helvetica, Arial, sans-serif;
	font-size: clamp(0.92rem, 0.85vw + 0.4rem, 1.05rem);
	font-style: normal;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0.01em;
	color: rgba(186,186,186,0.78);
	text-align: center;
	width: 100%;
	max-width: 100%;
}

.exa-footer-hero__assoc-logos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.75rem, 1.5vw, 1.5rem);
}

.exa-footer-hero__assoc-logos img {
	height: clamp(2.35rem, 3.8vw, 3.8rem);
	width: auto;
	max-width: 9.5rem;
	object-fit: contain;
	opacity: 0.72;
	filter: grayscale(1) saturate(0) brightness(0.82) contrast(1.05);
	transition: filter 0.28s ease, opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
}

.exa-footer-hero__assoc-logos img.is-jaia {
	filter: none;
	mix-blend-mode: normal;
}

@media (max-width: 1024px) {
	.exa-footer-hero {
		min-height: clamp(300px, 44vh, 380px);
		margin-top: 1.25rem;
	}

	.exa-footer-hero__shade {
		background: linear-gradient(180deg, rgba(3,3,3,0.84) 0%, rgba(3,3,3,0.58) 50%, rgba(3,3,3,0.78) 100%);
	}

	.exa-footer-hero__inner {
		align-items: center;
		text-align: center;
		padding: 2.3rem 1rem 1.75rem;
	}

	.exa-footer-hero__headline {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}

	.exa-footer-hero__headline.exa-hero__headline--inline {
		max-width: none;
		text-align: center;
	}

	.exa-footer-hero__ctas {
		justify-content: center;
	}

	.exa-footer-hero__assoc-overlay {
		position: relative;
		right: auto;
		bottom: auto;
		align-items: center;
		margin: 0.25rem auto 1rem;
		padding: 0 1rem;
		max-width: 100%;
	}

	.exa-footer-hero__assoc-text {
		text-align: center;
		max-width: 40rem;
	}

	.exa-footer-hero__assoc-logos {
		justify-content: center;
		flex-wrap: wrap;
	}
}

@media (max-width: 768px) {
	.exa-operators {
		padding-bottom: 2.7rem;
	}

	.exa-footer-hero {
		min-height: 320px;
		margin-top: 0.875rem;
	}

	.exa-footer-hero__inner {
		padding: 2rem 0.9rem 1.1rem;
	}

	.exa-footer-hero__headline {
		font-size: clamp(1.65rem, 7.2vw, 2.4rem);
		max-width: 14ch;
	}

	.exa-footer-hero__headline.exa-hero__headline--inline {
		font-size: clamp(1.6rem, 7.4vw, 2.45rem);
	}

	.exa-footer-hero__ctas {
		flex-direction: column;
		align-items: center;
		width: min(22rem, 100%);
	}

	.exa-footer-hero__ctas .exa-btn {
		width: 100%;
		max-width: 320px;
		min-width: 0;
		font-size: 1.05rem;
		padding: 14px 32px;
		line-height: 1.2;
	}

	.exa-footer-hero__assoc-overlay {
		gap: 0.6rem;
		margin-top: 0.75rem;
	}

	.exa-footer-hero__assoc-text {
		font-size: clamp(0.86rem, 2.55vw, 0.96rem);
		line-height: 1.5;
	}

	.exa-footer-hero__assoc-logos img {
		height: 2.2rem;
		max-width: 7.5rem;
	}
}

@media (max-width: 480px) {
	.exa-footer-hero {
		min-height: 340px;
		margin-top: 0.875rem;
	}

	.exa-footer-hero__inner {
		align-items: center;
		text-align: center;
		padding: 2.1rem 1rem 1.2rem;
	}

	.exa-footer-hero__headline {
		margin: 0 0 1rem;
		width: 100%;
		max-width: none;
		font-size: clamp(1.6rem, 7vw, 2.2rem);
		line-height: 1.18;
		text-align: center;
	}

	.exa-footer-hero__headline.exa-hero__headline--inline {
		left: 0;
		transform: none;
		width: fit-content;
		max-width: none;
		font-size: clamp(1.6rem, 7.2vw, 2.25rem);
		line-height: var(--renewal-system-rotating-line-height, 1.14);
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}

	.exa-footer-hero__ctas {
		align-items: center;
		width: min(20rem, 100%);
	}

	.exa-footer-hero__ctas .exa-btn {
		margin: 0 auto;
		width: 100%;
		max-width: 320px;
		min-width: 0;
		padding: 14px 32px;
		font-size: 1.05rem;
		line-height: 1.2;
	}

	html[lang^="ja"] .exa-footer-hero__ctas .exa-btn {
		font-size: 1rem;
		line-height: 1.3;
	}

}

/* Mobile-only: align the rotating copy to the exact CTA column start. */
@media (max-width: 768px) {
	.exa-footer-hero__headline.exa-hero__headline--inline,
	.exa-footer-hero__ctas {
		width: 100%;
		max-width: 320px;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.exa-footer-hero__headline.exa-hero__headline--inline {
		text-align: left;
	}

	.exa-footer-hero__ctas .exa-btn {
		width: 100%;
		max-width: 320px;
	}
}

/* ==========================================================================
   360 Section Subtitles — shared by Cabinet 360 and System 360
   ========================================================================== */
.exa-page p.exa-360-subtitle {
	display: block;
	text-align: center;
	font-family: 'Montserrat-Regular', Helvetica, Arial, sans-serif;
	font-size: clamp(0.9375rem, 1.2vw + 0.4rem, 1.125rem);
	color: rgba(255,255,255,0.7);
	line-height: 1.6;
	max-width: 40rem;
	margin: 0 auto 0.75rem;
	padding: 0 1.25rem;
}

.exa-360-subtitle__link {
	color: #D90500;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 150ms ease;
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
}

.exa-360-subtitle__link:hover {
	color: #ff3d38;
}

.exa-360-subtitle__chevron {
	flex-shrink: 0;
	transition: transform 150ms ease;
}

.exa-360-subtitle__link:hover .exa-360-subtitle__chevron {
	transform: translateX(3px);
}

@media (max-width: 768px) {
	.exa-slider[data-exa-mobile-meta="1"] .exa-slider__caption,
	.exa-slider[data-exa-mobile-meta="1"] .exa-slider__media-footer {
		display: none;
	}

	.exa-slider[data-exa-mobile-meta="1"] .exa-slider__mobile-meta {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 0.25rem;
		width: 89.25%;
		min-height: 0;
		margin: 0.5rem auto 0;
		padding: 0;
	}

	.exa-slider[data-exa-mobile-meta="1"] .exa-slider__mobile-meta[hidden] {
		display: none;
	}

	.exa-slider[data-exa-mobile-meta="1"] .exa-slider__mobile-meta-title {
		min-width: 0;
		margin: 0;
		font-family: 'Montserrat-Bold', Helvetica, Arial, sans-serif;
		font-size: clamp(0.6rem, 3vw, 0.8125rem);
		font-weight: 600;
		line-height: 1.2;
		letter-spacing: -0.02em;
		text-align: center;
		color: #fff;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	#exa-carousel-1 .exa-slider__dock {
		padding-top: 0.75rem;
	}

	@media (max-width: 480px) and (orientation: portrait) {
		.exa-slider[data-exa-mobile-meta="1"] .exa-slider__mobile-meta {
			width: 69.3%;
		}
	}

	.exa-slider__fs-bottom {
		align-items: stretch;
		flex-wrap: wrap;
	}

	.exa-slider__fs-description {
		max-width: none;
	}

	.exa-slider[data-exa-mobile-touch-captions="1"][data-exa-slider-init="1"] .exa-slider__caption {
		opacity: 0;
		visibility: hidden;
		transform: translateY(-0.45rem);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	}

	.exa-slider[data-exa-mobile-touch-captions="1"][data-exa-slider-init="1"] .exa-slider__slide--active.exa-slider__slide--touch-caption-active .exa-slider__caption {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition-delay: 0s;
	}

	.exa-slider__media-footer {
		padding: 0.7rem 0.75rem 0.8rem;
	}

	.exa-slider[data-exa-mobile-touch-captions="1"][data-exa-slider-init="1"] .exa-slider__media-footer {
		justify-content: center;
		opacity: 0;
		visibility: hidden;
		transform: translateY(0.45rem);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	}

	.exa-slider[data-exa-mobile-touch-captions="1"][data-exa-slider-init="1"] .exa-slider__slide--active.exa-slider__slide--touch-caption-active .exa-slider__media-footer {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition-delay: 0s;
	}

	.exa-slider__media-cta {
		max-width: min(100%, 11.5rem);
	}

	.exa-slider[data-exa-mobile-touch-captions="1"][data-exa-slider-init="1"] .exa-slider__media-cta {
		margin-left: 0;
	}

	.exa-system-360-meta {
		margin-top: 0;
		padding: 0 0.9rem;
	}
}

/* ==========================================================================
   Section Subtitles — center-aligned secondary text
   ========================================================================== */
.exa-page p.exa-carousel__subtitle {
	display: block;
	text-align: center;
	font-family: 'Montserrat-Regular', Helvetica, Arial, sans-serif;
	font-size: clamp(0.9375rem, 1.2vw + 0.4rem, 1.125rem);
	color: rgba(255,255,255,0.7);
	line-height: 1.6;
	max-width: 40rem;
	margin: 0 auto 1.25rem;
	padding: 0 1.25rem;
}

/* Clickable subtitle link — brand red, underline, right chevron */
.exa-carousel__subtitle-link {
	color: #D90500;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 150ms ease;
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
}

.exa-carousel__subtitle-link:hover {
	color: #ff3d38;
}

.exa-carousel__subtitle-chevron {
	flex-shrink: 0;
	transition: transform 150ms ease;
}

.exa-carousel__subtitle-link:hover .exa-carousel__subtitle-chevron {
	transform: translateX(3px);
}

/* ==========================================================================
   Deferred Fragment Shells
   ========================================================================== */
.exa-fragment-slot {
	position: relative;
	background: #030303;
	contain: layout paint;
}

.exa-fragment-slot__placeholder {
	display: grid;
	gap: 0.8rem;
	width: min(calc(100% - 2.5rem), 72rem);
	margin: 1.75rem auto 0;
	padding: clamp(1.25rem, 2.6vw, 2rem);
	background: #050505;
	border-top: 1px solid rgba(255,255,255,0.08);
}

.exa-fragment-slot--stage .exa-fragment-slot__placeholder {
	min-height: calc(var(--exa-fragment-shell-vh-desktop, 120) * 1svh);
	align-content: center;
}

.exa-fragment-slot--carousel .exa-fragment-slot__placeholder {
	min-height: calc(var(--exa-fragment-shell-vh-desktop, 70) * 1svh);
	align-content: end;
}

.exa-fragment-slot__pulse {
	height: 0.45rem;
	border-radius: 999px;
	background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.16), rgba(255,255,255,0.05));
	background-size: 200% 100%;
	animation: exaFragmentPulse 1.6s ease-in-out infinite;
}

.exa-fragment-slot__pulse:nth-child(1) {
	width: min(100%, 28rem);
}

.exa-fragment-slot__pulse:nth-child(2) {
	width: min(82%, 22rem);
}

@media (min-width: 768px) and (max-width: 1024px) {
	.exa-fragment-slot__placeholder {
		min-height: calc(var(--exa-fragment-shell-vh-tablet, 64) * 1svh);
	}
}

@media (max-width: 767px) {
	.exa-fragment-slot__placeholder {
		width: calc(100% - 2rem);
		min-height: calc(var(--exa-fragment-shell-vh-mobile, 58) * 1svh);
	}
}

@media (prefers-reduced-motion: reduce) {
	.exa-fragment-slot__pulse {
		animation: none;
	}
}

@keyframes exaFragmentPulse {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ==========================================================================
   Scroll Scrub — base state for JS-driven scroll-linked animation.
   opacity and transform are set inline by initScrollScrub().
   ========================================================================== */
.exa-section-reveal {
	opacity: 0;
	transform: translateY(6rem);
	will-change: auto;
}
.exa-section-reveal[data-exa-scrub-active] { will-change: opacity, transform; }

/* Carousels: opacity-only scrub — no translateY (preserves fixed positioning
   for expanded media overlays). */
.exa-carousel.exa-section-reveal {
	transform: none;
	will-change: auto;
}
.exa-carousel.exa-section-reveal[data-exa-scrub-active] { will-change: opacity; }

/* 360 sticky children: opacity-only scrub — no translateY.
   Sticky-pinned elements don't scroll through the viewport, so translateY
   would leave them at partial animation and break stage-readiness checks. */
.exa-cabinet-360-sticky .exa-section-reveal,
.exa-system-360-sticky .exa-section-reveal {
	transform: none;
	will-change: auto;
}
.exa-cabinet-360-sticky .exa-section-reveal[data-exa-scrub-active],
.exa-system-360-sticky .exa-section-reveal[data-exa-scrub-active] { will-change: opacity; }

/* ==========================================================================
   Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.exa-hero__slot { transition: none; }
	.exa-hero__word { transition: none; }
	.exa-features__item { opacity: 1; transform: none; transition: none; }
	.exa-section-reveal { opacity: 1; transform: none; }
	.exa-slider__slide { transition: none; }
	.exa-slider__track { transition: none !important; }
}


/* ================================================================
   Accessories carousel (V162) — portrait product cards riding the
   SHARED filmstrip engine (same as the Game Carousel), so peek
   spacing, mobile-only chevrons, drag, dots and click-to-expand all
   match it 1:1. Only the card's cosmetic shell + typography differ.
   ================================================================ */

/* Slide = portrait card. Base filmstrip supplies neighbour peek
   (opacity .5 / scale .92) and active scale(1.05) — do NOT reposition. */
.exa-slider--accessories .exa-slider__slide {
	flex: 0 0 42%;
	/* Viewport-aware so the heading + card fit within one screen on
	   desktop/tablet (the dock may fall below the fold — that's fine). */
	height: clamp(360px, calc(100vh - 135px), 500px);
	aspect-ratio: auto;
	box-sizing: border-box;
	padding: clamp(18px, 1.9vw, 28px) clamp(18px, 1.9vw, 28px) clamp(12px, 1.2vw, 18px);
	border-radius: 18px;
	background: #111112;
	border: 1px solid #222224;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* Rise+fade reveal (parity with standard sections). The generic
   .exa-carousel.exa-section-reveal rule pins carousels to opacity-only;
   restore the translateY offset for the accessories section only. */
.exa-carousel--accessories.exa-section-reveal {
	transform: translateY(6rem);
	will-change: auto;
}
@media (max-width: 1024px) {
	.exa-carousel--accessories.exa-section-reveal { transform: translateY(2rem); }
}

@media (max-width: 1024px) {
	.exa-slider--accessories .exa-slider__slide { height: clamp(360px, calc(100svh - 130px), 500px); }
}
@media (max-width: 768px) {
	.exa-slider--accessories .exa-slider__slide { flex: 0 0 66%; height: 500px; }
}
@media (max-width: 480px) and (orientation: portrait) {
	.exa-slider--accessories .exa-slider__slide { flex: 0 0 76%; height: 500px; }
}

/* Top room so the scaled active card (1.05) isn't clipped by the slider's
   overflow; a smaller bottom so the pagination dock sits close under the card. */
.exa-slider--accessories .exa-slider__track { padding: 22px 0 14px; }
.exa-slider--accessories { --exa-slider-inline-nav-offset: 24px; }
.exa-slider--accessories .exa-slider__dock { margin-top: 0; }

/* Expand affordance is OFF for accessories; navigation is CTA-only. */
.exa-slider--accessories .exa-slider__slide--hintable::after { display: none; }

/* Accessories never enter fullscreen. Keep only the dormant fullscreen
   footer out of hit testing; the same UI container owns the overlay chevrons. */
.exa-slider--accessories:not(.exa-slider--fullscreen) .exa-slider__fs-bottom {
	display: none;
	pointer-events: none;
}

/* Header — title + description. */
.exa-slider--accessories .exa-accessory-card__header { flex: 0 0 auto; }

.exa-slider--accessories .exa-accessory-card__title {
	position: static;
	inset: auto;
	margin: 0 0 0.5rem;
	padding: 0;
	background: none;
	text-shadow: none;
	text-align: left;
	font-family: 'Montserrat-Bold', Helvetica, Arial, sans-serif;
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: normal;
	color: #ffffff;
}

.exa-slider--accessories .exa-accessory-card__desc {
	position: static;
	inset: auto;
	transform: none;
	width: auto;
	margin: 0;
	padding: 0;
	background: none;
	text-shadow: none;
	text-align: left;
	font-family: 'Montserrat-Regular', Helvetica, Arial, sans-serif;
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: normal;
	color: #c7cbd2;
}

/* Media — fills the middle slot edge-to-edge (cover). */
.exa-slider--accessories .exa-accessory-card__media {
	position: relative;
	flex: 1 1 auto;
	min-height: 150px;
	width: 100%;
	margin: 0.7rem 0 0.45rem;
	overflow: hidden;
	border-radius: 8px;
	background: transparent;
}

.exa-slider--accessories .exa-accessory-card__media .exa-slider__media {
	position: static;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: transparent;
}

/* Footer — centered CTA, no divider line. */
.exa-slider--accessories .exa-accessory-card__footer {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.3rem;
	padding-top: 0;
	border-top: none;
}

/* Shared CTA — matches the accessory card button treatment. */
.exa-shop-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	color: #ffffff;
	font-family: 'Montserrat-Bold', Helvetica, Arial, sans-serif;
	background-color: #D90500;
	/* 2px, matching the sub-nav CTAs: these compact pills invert to white/red on
	   hover, and a 1px outline all but disappeared against the black page. */
	border: 2px solid #D90500;
	padding: 0.35rem 1.25rem;
	font-size: 0.75rem;
	line-height: 1.4;
	text-decoration: none;
	text-align: center;
	touch-action: manipulation;
	white-space: normal;
	border-radius: 8px;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	overflow-wrap: anywhere;
}

.exa-shop-cta:hover,
.exa-shop-cta:focus-visible {
	background-color: #ffffff;
	color: #D90500;
	border-color: #D90500;
}

html[lang^="ja"] .exa-shop-cta {
	letter-spacing: 0.02em;
}

/* Fullscreen (click-to-expand): drop the card chrome and present the
   media like the Game Carousel; the fs overlay carries title/desc. */
.exa-slider.exa-slider--fullscreen.exa-slider--accessories .exa-slider__slide {
	padding: 0;
	border: 0;
	background: transparent;
	border-radius: 0;
	display: block;
	box-shadow: none;
}
.exa-slider.exa-slider--fullscreen.exa-slider--accessories .exa-accessory-card__header,
.exa-slider.exa-slider--fullscreen.exa-slider--accessories .exa-accessory-card__footer {
	display: none;
}
.exa-slider.exa-slider--fullscreen.exa-slider--accessories .exa-accessory-card__media {
	position: absolute;
	inset: 0;
	margin: 0;
	border-radius: 0;
	width: 100%;
	height: 100%;
}
.exa-slider.exa-slider--fullscreen.exa-slider--accessories .exa-accessory-card__media .exa-slider__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ── Item 7: subtle card shadow + Apple-style hover "lift" ──
   Applies to the Game Carousel (#exa-carousel-1) and Accessories only. */
#exa-carousel-1 .exa-slider__slide,
.exa-slider--accessories .exa-slider__slide {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

#exa-carousel-1 .exa-slider__media,
.exa-slider--accessories .exa-slider__media {
	transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
	#exa-carousel-1 .exa-slider__slide--active,
	.exa-slider--accessories .exa-slider__slide--active {
		transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
		            box-shadow 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
		            opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	}
	#exa-carousel-1 .exa-slider__slide--active:hover,
	.exa-slider--accessories .exa-slider__slide--active:hover {
		transform: scale(1.07);
		box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
		z-index: 5;
	}
	#exa-carousel-1 .exa-slider__slide--active:hover .exa-slider__media,
	.exa-slider--accessories .exa-slider__slide--active:hover .exa-slider__media {
		transform: scale(1.03);
	}
}

/* ============================================================================
   About Products sub-nav — MOBILE two-row bar + chevron drawer.

   Structural 1:1 port of the dp-subnav mobile treatment on the
   /en/exa-arcadia-system/ blueprint (css/dedicated-product.css §"Mobile: sticky
   row, accordion drawer, frosted isolation veil"), with one deliberate change:
   this bar carries TWO CTAs, so they get their own full-width second row rather
   than riding in the right cluster.

     Row 1 : identity (left) ................... chevron toggle (right)
     Row 2 : [ Request Pricing ][ See What Games Earn ]   <- full-width pair
     ------ white divider (the bar's own bottom border) ------
     Drawer: section anchor links (absolute, deploys downward)
     ====== white bounding line (the drawer's bottom border) ======
     Everything below that line is covered by the frosted veil.

   High-specificity + end-of-file so it cleanly overrides the legacy
   horizontal-scroller mobile rules above.
   ========================================================================== */
.exa-submenu__toggle { display: none; }
.exa-submenu__veil { display: none; }

/* A legacy page-level footer script adds this class once the associations hero
   enters view. Its older rule hides the CTA group, which leaves the mobile
   submenu as a lone chevron. The current drawer navigation remains complete
   at the footer, so preserve the CTA row. */
@media (max-width: 480px) and (orientation: portrait) {
	#exa-submenu.exa-submenu--bottom-hero-active .exa-submenu__ctas {
		display: flex !important;
	}
}

@media (max-width: 768px) {
	.exa-submenu.exa-submenu--about-products {
		/* Closed, the bar is a single row: [ CTA 1 ][ CTA 2 ][ chevron ].
		   Opening it reveals the identity row beneath, and the drawer of anchor
		   links beneath that:

		     Row 1  [ Request Pricing ][ See What Games Earn ][ v ]
		     Row 2  exA-Arcadia Products            (only while open)
		     ------ white divider
		     Drawer section anchor links           (only while open)

		   The drawer's own height is measured by JS into --exa-submenu-drawer-h,
		   and the live bar height into --exa-submenu-bar-h (it changes when the
		   identity row appears), so the clamp below always knows the real space. */
		--exa-subnav-cta-row-h: 2.5rem; /* 40px tap target */
		--exa-submenu-drawer-h: 0px;
		--exa-submenu-bar-h: 3.75rem;
		height: auto;
		min-height: auto;
		background: #030303;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		/* The white divider closing the bar / opening the drawer. */
		border-bottom: 1px solid rgba(217, 217, 217, 0.72);
	}

	.exa-submenu.exa-submenu--about-products .exa-submenu__grid {
		display: flex !important;
		position: relative;
		flex-wrap: wrap;
		align-items: center;
		max-width: none;
		height: auto;
		padding: 0.625rem 1rem;
		gap: 0;
	}

	/* Row 2 — the identity. Hidden while the bar is closed; it drops in as its
	   own full-width row once the drawer opens. Fixed height + ellipsis so a
	   multi-byte (JA) title can never reflow the row. */
	.exa-submenu.exa-submenu--about-products .exa-submenu__left {
		display: none !important;
		order: 3;
		flex: 0 0 100%;
		align-items: center;
		min-width: 0;
		margin-right: 0;
	}
	.exa-submenu.exa-submenu--about-products.exa-submenu--drawer-open .exa-submenu__left {
		display: inline-flex !important;
		/* Breathing room under the CTA row, then tuck the title down close to the
		   links it heads — the gap below it is only the grid's bottom padding
		   (trimmed just below) plus the drawer's top padding. */
		height: 1.75rem;
		margin-top: 0.75rem;
	}
	.exa-submenu.exa-submenu--about-products.exa-submenu--drawer-open .exa-submenu__grid {
		padding-bottom: 0.125rem;
	}
	.exa-submenu.exa-submenu--about-products .exa-submenu__identity {
		min-width: 0;
	}
	.exa-submenu.exa-submenu--about-products .exa-submenu__identity-text {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 0.9rem;
		line-height: 1.2;
	}

	/* Row 1 — chevron toggle, trailing the second CTA. Geometry/timing 1:1 with
	   .dp-subnav__toggle-icon. */
	.exa-submenu.exa-submenu--about-products .exa-submenu__toggle {
		display: inline-flex;
		order: 2;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		width: 1.75rem;  /* 28px — keeps the row to one line at 360px */
		height: var(--exa-subnav-cta-row-h);
		min-height: 0;
		margin: 0 0 0 0.375rem;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: transparent;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}
	.exa-submenu.exa-submenu--about-products .exa-submenu__toggle-icon {
		position: static;
		display: block;
		width: 10px;
		height: 10px;
		background: transparent;
		border: 0;
		border-right: 1.5px solid rgba(255, 255, 255, 0.9);
		border-bottom: 1.5px solid rgba(255, 255, 255, 0.9);
		border-radius: 0;
		transform: translateY(-2px) rotate(45deg);
		transform-origin: center;
		transition: transform 0.25s ease, border-color 0.2s ease;
	}
	.exa-submenu.exa-submenu--about-products .exa-submenu__toggle-icon::before,
	.exa-submenu.exa-submenu--about-products .exa-submenu__toggle-icon::after {
		content: none;
	}
	.exa-submenu.exa-submenu--about-products.exa-submenu--drawer-open .exa-submenu__toggle-icon {
		transform: translateY(2px) rotate(-135deg);
	}
	@media (prefers-reduced-motion: reduce) {
		.exa-submenu.exa-submenu--about-products .exa-submenu__toggle-icon { transition: none; }
	}

	/* Row 1 — the CTA pair, sharing the row with the chevron that follows them.
	   flex-basis 0 (not auto) is what guarantees the single row: with an auto
	   basis the pair claims its full content width and the chevron wraps to a
	   second line. At basis 0 the chevron is laid out first and the buttons
	   divide whatever is left. */
	.exa-submenu.exa-submenu--about-products .exa-submenu__ctas {
		display: flex !important;
		order: 1;
		flex: 1 1 0;
		align-items: stretch;
		justify-content: stretch;
		gap: 0.5rem;
		width: auto;
		min-width: 0;
		min-height: 0;
	}
	.exa-submenu.exa-submenu--about-products .exa-submenu__ctas .exa-submenu__cta {
		display: inline-flex;
		/* Widths track the labels (basis: content) rather than splitting the row
		   in half, so the longer label gets the room it needs and both stay on a
		   single line next to the chevron. */
		flex: 1 1 auto;
		align-items: center;
		justify-content: center;
		min-width: 0;
		min-height: var(--exa-subnav-cta-row-h);
		padding: 0.5rem 0.375rem;
		border-radius: 8px;
		/* Scales with the viewport: ~13.3px at 390px (up from 12.16px), easing
		   down on narrower phones. */
		font-size: clamp(0.72rem, 3.4vw, 0.86rem);
		font-weight: 700; /* bold */
		line-height: 1.2;
		text-align: center;
		/* The buttons — not the chevron — absorb a cramped row: below ~380px the
		   two labels alone fill the width, so they shrink and wrap internally
		   rather than pushing the chevron onto a second line. Also what keeps
		   long JA labels inside the row. */
		white-space: normal;
		overflow-wrap: anywhere;
	}

	/* --- Drawer: anchor links, deploying below the Row 2 CTAs --- */
	.exa-submenu.exa-submenu--about-products .exa-submenu__anchors {
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		order: 4;
		display: flex !important;
		box-sizing: border-box;
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		gap: 0 !important;
		width: 100%;
		height: auto !important;
		max-height: 0;
		/* Padding is identical open and closed — max-height + overflow do all the
		   hiding. Keeping it constant is what lets JS measure the drawer's true
		   height while it is still closed (a closed-state padding of 0 would
		   under-measure and clip the last link). The bottom value is the breathing
		   space between the last anchor ("System") and the closing divider. */
		padding: 0.25rem 1rem 1rem !important;
		overflow: hidden !important;
		opacity: 0;
		transform: translate3d(0, -10px, 0);
		background: #030303;
		/* The bounding line closing the whole component. */
		border-bottom: 1px solid rgba(217, 217, 217, 0.72);
		pointer-events: none;
		z-index: 1;
		transition: max-height 0.34s cubic-bezier(0.2, 0.65, 0.2, 1),
		            opacity 0.2s ease,
		            transform 0.34s cubic-bezier(0.2, 0.65, 0.2, 1);
		will-change: max-height, opacity, transform;
	}
	.exa-submenu.exa-submenu--about-products.exa-submenu--drawer-open .exa-submenu__anchors {
		/* The main header stays on screen above this bar, so its height — and the
		   bar's own live height, which grows when the identity row appears — come
		   off the space the drawer may claim. */
		max-height: min(
			var(--exa-submenu-drawer-h),
			calc(100dvh - var(--renewal-main-nav-height, 5.3125rem) - var(--exa-submenu-bar-h) - 0.75rem)
		);
		opacity: 1;
		transform: translate3d(0, 0, 0);
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		pointer-events: auto;
	}
	@media (prefers-reduced-motion: reduce) {
		.exa-submenu.exa-submenu--about-products .exa-submenu__anchors { transition: none; }
	}

	/* Link rail — the dp-subnav vertical line grid: a 1px rule that lights up
	   white on the hovered/active row. */
	.exa-submenu.exa-submenu--about-products .exa-submenu__anchors a.exa-submenu__link {
		display: flex !important;
		align-items: center;
		height: auto !important;
		padding: 0.4375rem 0 !important;
		border: 0;
		color: #c4c7c8;
		font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
		font-size: 0.82rem !important;
		font-weight: 600;
		letter-spacing: 0.02em;
		line-height: 1.35;
		white-space: normal;
	}
	.exa-submenu.exa-submenu--about-products .exa-submenu__anchors a.exa-submenu__link:hover,
	.exa-submenu.exa-submenu--about-products .exa-submenu__anchors a.exa-submenu__link[data-active="true"] {
		color: #fff;
	}
	.exa-submenu.exa-submenu--about-products .exa-submenu__anchors a.exa-submenu__link::before {
		content: "";
		flex: 0 0 auto;
		width: 1px;
		height: 1.05rem;
		margin-right: 12px;
		background: transparent;
		transition: background-color 0.2s ease;
	}
	.exa-submenu.exa-submenu--about-products .exa-submenu__anchors a.exa-submenu__link:hover::before,
	.exa-submenu.exa-submenu--about-products .exa-submenu__anchors a.exa-submenu__link[data-active="true"]::before,
	.exa-submenu.exa-submenu--about-products .exa-submenu__anchors a.exa-submenu__link:focus-visible::before,
	.exa-submenu.exa-submenu--about-products .exa-submenu__anchors a.exa-submenu__link:active::before {
		background: rgba(255, 255, 255, 0.96);
	}
	.exa-submenu.exa-submenu--about-products .exa-submenu__anchors a.exa-submenu__link[aria-current="true"]::after {
		display: none;
	}

	/* The sliding underline is a desktop affordance; the stacked drawer marks the
	   active link with its left-hand rail instead. */
	.exa-submenu.exa-submenu--about-products .exa-submenu__indicator {
		display: none !important;
	}

	/* --- Frosted isolation veil: everything under the bounding line --- */
	.exa-submenu__veil {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		/* JS keeps this in sync with the live bottom edge of the open drawer; the
		   fallback covers the main header plus the bar. */
		top: var(--exa-submenu-veil-top, calc(var(--renewal-main-nav-height, 5.3125rem) + var(--exa-submenu-bar-h, 3.75rem)));
		z-index: var(--renewal-secondary-nav-veil-z-index, 1189); /* immediately under the bar */
		/* The translucent base tint keeps the layer readable as a dim veil even
		   where backdrop-filter is unsupported; the blur is the enhancement. */
		background: rgba(3, 3, 3, 0.22);
		-webkit-backdrop-filter: blur(14px) brightness(60%);
		backdrop-filter: blur(14px) brightness(60%);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.22s ease;
	}
	.exa-submenu__veil.is-active {
		opacity: 1;
		pointer-events: auto;
	}
	@media (prefers-reduced-motion: reduce) {
		.exa-submenu__veil { transition: none; }
	}

	body.exa-submenu-drawer-open {
		overflow: hidden;
	}
	/* Back-to-top is fixed at z 9999, so it would punch through the frosted veil.
	   Drop it under the veil (1189) while the drawer is open — 1200 used to be
	   under the veil back when the veil was 1399. */
	body.exa-submenu-drawer-open .back-to-top-trapezoid-wrap {
		z-index: 1100;
	}
}