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

/* --- Base --- */
.exa-page {
	color: #fff;
	background: #030303;
	--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 — HubSpot-style medium buttons */
.exa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 12px 24px;
	font-family: 'Montserrat-Bold', Helvetica, Arial, sans-serif;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.75;
	text-decoration: none;
	text-align: center;
	letter-spacing: 0;
	cursor: pointer;
	border-radius: 8px;
	border: 2px solid transparent;
	position: relative;
	user-select: none;
	-webkit-user-select: none;
	transition: background-color 0.15s linear, color 0.15s linear, border-color 0.15s linear;
}

/* CTA 1: Red bg / White text */
.exa-btn--primary {
	background: #D90500;
	color: #fff;
	border-color: transparent;
}
.exa-btn--primary:hover {
	background: #fff;
	color: #D90500;
	border-color: #D90500;
}
.exa-btn--primary:active {
	background: #fcece6;
	color: #D90500;
	border-color: #D90500;
}

/* CTA 2: White bg / 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 {
	background: #D90500;
	color: #fff !important;
	border-color: transparent;
}
.exa-btn--secondary:active {
	background: #9f2800;
	color: #fff !important;
	border-color: transparent;
}

/* ==========================================================================
   Hero — HubSpot-style, extends behind header + submenu
   ========================================================================== */
.exa-hero {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: calc(var(--renewal-main-nav-height, 5.3125rem) + var(--renewal-game-submenu-height, 3rem) + 6rem) 1.25rem 4rem;
	margin-top: calc(-1 * (var(--renewal-main-nav-height, 5.3125rem) + var(--renewal-game-submenu-height, 3rem)));
	position: relative;
	background-size: var(--exa-hero-bg-size, cover);
	/* Start the image at the submenu bar instead of the main nav.
	   Default nav height ≈ 85 px (5.3125 rem). */
	background-position: center calc(var(--renewal-main-nav-height, 5.3125rem));
	background-color: #030303;
	overflow: hidden;
}

.exa-hero__media {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.exa-hero__bg-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center calc(var(--renewal-main-nav-height, 5.3125rem));
}

.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-size: clamp(2.25rem, 4.5vw + 0.75rem, 4.5rem);
	font-family: 'Montserrat-Regular', Helvetica, Arial, sans-serif;
	font-weight: 600;
	white-space: nowrap;
	line-height: 1.2;
	text-align: center;
}

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

.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;
}

/* Mobile portrait: keep hero background visible and keep content below submenu */
@media (max-width: 480px) {
	.exa-hero {
		background-size: cover;
		background-position: center calc(var(--renewal-main-nav-height, 5.3125rem));
	}
	.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: min(100%, 320px);
		justify-content: center;
	}

	.exa-hero__ctas .exa-btn,
	.exa-footer-hero__ctas .exa-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: min(100%, 320px);
		min-height: 56px;
		padding: 12px 24px;
		border-radius: 8px;
		border-width: 2px;
		border-style: solid;
		font-family: 'Montserrat-Bold', Helvetica, Arial, sans-serif;
		font-size: 16px;
		font-weight: 600;
		line-height: 1.75;
		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: 15px;
		line-height: 1.6;
	}
}

/* ==========================================================================
   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__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 */ }

/* JS wraps anchors in a nav-frame for mobile arrows; keep inline
   content centred inside the block-level wrapper on wider viewports. */
.exa-submenu__nav-frame {
	text-align: center;
}

.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;
}

.exa-submenu__anchors .exa-submenu__cta--inline {
	display: none;
}

/* 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: 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__nav-frame {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
		height: 3rem;
		overflow: hidden;
	}

	.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-scroll-arrow {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 2.3rem;
		padding: 0 0.22rem;
		border: 0;
		background: transparent;
		color: #9a9a9a;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		z-index: 4;
		pointer-events: auto;
		touch-action: manipulation;
		transition: opacity 0.18s ease;
	}

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

	.exa-submenu-scroll-arrow--left {
		left: 0;
		padding-left: 0.18rem;
		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-submenu-scroll-arrow--right {
		right: 0;
		padding-right: 0.2rem;
		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-submenu-scroll-arrow.is-disabled {
		opacity: 1;
		color: #9a9a9a;
		pointer-events: none;
	}

	.exa-submenu__anchors.can-scroll-left ~ .exa-submenu-scroll-arrow--left,
	.exa-submenu__anchors.can-scroll-right ~ .exa-submenu-scroll-arrow--right {
		color: #fff;
	}

	.exa-submenu-scroll-arrow svg {
		display: block;
		width: 0.78rem;
		height: 0.78rem;
		stroke: currentColor;
		stroke-width: 1.9;
		fill: none;
		stroke-linecap: round;
		stroke-linejoin: round;
		filter: drop-shadow(0 0 0.35rem rgba(3, 3, 3, 0.5));
		transform: translateY(4px);
	}

		.exa-submenu__anchors .exa-submenu__cta--inline {
			display: inline-flex !important;
			align-items: center;
			justify-content: center;
			flex: 0 0 auto;
		height: 2rem;
		padding: 0.4rem 0.92rem;
		margin: 0 0.08rem;
		text-align: center;
		border-radius: 8px;
			font-family: 'Montserrat-Bold', Helvetica, Arial, sans-serif;
			font-weight: 600;
			font-size: clamp(0.68rem, 2.8vw, 0.8rem);
			line-height: 1.3;
			background-color: #D90500;
			border: 2px solid transparent;
			color: #fff;
			letter-spacing: 0;
			white-space: nowrap;
			visibility: hidden;
			opacity: 0;
			pointer-events: none;
		}

	.exa-submenu__anchors .exa-submenu__link:last-of-type + .exa-submenu__cta--inline {
		margin-left: clamp(1.7rem, 8vw, 2.8rem);
	}

	.exa-submenu__anchors.is-cta-revealed .exa-submenu__cta--inline {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
	}

		.exa-submenu__anchors .exa-submenu__cta--inline:hover,
		.exa-submenu__anchors .exa-submenu__cta--inline:focus-visible {
			background: #fff;
			color: #D90500;
			border-color: #D90500;
			outline: none;
		}

		.exa-submenu__anchors .exa-submenu__cta--inline:active {
			background: #fcece6;
			color: #D90500;
			border-color: #D90500;
			outline: none;
		}

	.exa-submenu__anchors .exa-submenu__cta--inline.exa-submenu__cta--secondary {
			background: #fff;
			color: #D90500;
			border-color: #D90500;
		}

		.exa-submenu__anchors .exa-submenu__cta--inline.exa-submenu__cta--secondary:hover,
		.exa-submenu__anchors .exa-submenu__cta--inline.exa-submenu__cta--secondary:focus-visible {
			background: #D90500;
			border-color: transparent;
			color: #fff;
		}

		.exa-submenu__anchors .exa-submenu__cta--inline.exa-submenu__cta--secondary:active {
			background: #9f2800;
			border-color: transparent;
			color: #fff;
		}

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

	.exa-submenu__anchors.has-scroll-overflow .exa-submenu__cta--inline:last-child {
		margin-right: 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;
	}

	.exa-submenu.exa-submenu--about-products .exa-submenu__anchors .exa-submenu__cta--inline {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		margin-left: 0;
		margin-right: 0;
	}

	.exa-submenu.exa-submenu--about-products .exa-submenu__anchors .exa-submenu__link:last-of-type + .exa-submenu__cta--inline {
		margin-left: 0;
	}

	.exa-submenu.exa-submenu--about-products .exa-submenu__anchors.has-scroll-overflow .exa-submenu__cta--inline:last-child {
		margin-right: 0;
	}

	.exa-submenu.exa-submenu--about-products .exa-submenu-scroll-arrow {
		display: none !important;
	}
}

/* ==========================================================================
   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-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: 0;
	right: 0;
	height: 1px;
	background: #5a5a5a;
	pointer-events: none;
}

/* Hero -> Operators */
.exa-operators::before {
	top: -2rem;
}

/* 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;
}

@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 {
	padding: 2rem 1.25rem;
	max-width: 75rem;
	margin: 0 auto;
}

/* 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-features__heading {
	text-align: center;
	margin-bottom: 1.25rem;
}

.exa-features__grid {
	display: grid;
	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: #030303;
	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;
}

/* 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;
}

/* Video viewer — constrained, centered */
.exa-cabinet-360-viewer {
	position: relative;
	width: 100%;
	max-width: 56rem;
	padding: 0 1.25rem;
}

.exa-cabinet-360-video {
	width: 100%;
	max-height: 65dvh;
	display: block;
	object-fit: contain;
	background: #030303;
	border-radius: 0.5rem;
	pointer-events: none;
}

.exa-cabinet-360-scrolly {
	position: relative;
	width: 100%;
	height: min(65dvh, 42rem);
	overflow: hidden;
	border-radius: 0.5rem;
	background: #030303;
}

.exa-cabinet-360-scrolly video,
.exa-cabinet-360-scrolly canvas,
.exa-cabinet-360-scrolly img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	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: #030303;
	border-radius: 0.5rem;
	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 */
.exa-cabinet-360-switcher {
	display: flex;
	justify-content: center;
	gap: 1rem;
	padding: 0.75rem 1.25rem 0;
}

/* Non-selected: red bg, white text */
.exa-cabinet-360-btn {
	padding: 0.65rem 1.2rem;
	font-family: 'Montserrat-Bold', Helvetica, Arial, sans-serif;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
	border: 2px solid transparent;
	outline: none;
	border-radius: 8px;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
	background: #D90500;
	color: #fff;
}

html[lang^="ja"] .exa-cabinet-360-btn {
	font-size: clamp(0.78rem, 2.9vw, 0.85rem);
	line-height: 1.35;
	letter-spacing: 0.01em;
}

/* Non-selected hover: white bg, red text, red border + subtle lift */
.exa-cabinet-360-btn:hover {
	background: #fff;
	color: #D90500;
	border-color: #D90500;
	transform: translateY(-1px) scale(1.03);
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Selected: white bg, red text, red border */
.exa-cabinet-360-btn--active {
	background: #fff;
	color: #D90500;
	border-color: #D90500;
}

/* Selected hover: subtle lift + shadow only, no heavy gradient */
.exa-cabinet-360-btn--active:hover {
	background: #fff;
	color: #D90500;
	border-color: #D90500;
	transform: translateY(-1px) scale(1.03);
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Scroll hint */
.exa-cabinet-360-hint {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	padding-top: 1rem;
	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 {
	color: rgba(255,255,255,0.4);
	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-carousel__heading {
	text-align: center;
	margin-bottom: 1.25rem;
	padding: 0 1.25rem;
}

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

.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__slide--active {
	opacity: 1;
	transform: scale(1.05);
}

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

.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--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 {
	display: none;
}

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

.exa-slider__fs-bottom {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	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-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__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 {
	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: 4;
	}

	.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__nav-btn {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 6rem;
		height: 6rem;
		border: none;
		border-radius: 0;
		background: transparent;
		color: rgba(255,255,255,0.78);
		cursor: pointer;
		pointer-events: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 1;
		transition: color 0.2s ease;
	}

	.exa-slider__nav-btn:hover {
		color: #fff;
	}

	.exa-slider__nav-btn--prev {
		left: 0.35rem;
	}

	.exa-slider__nav-btn--next {
		right: 0.35rem;
	}

	.exa-slider__nav-icon {
		width: 3.6rem;
		height: 3.6rem;
		display: block;
	}

	.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) {
	.exa-slider__inline-nav {
		display: inline-flex;
		position: absolute;
		top: 0;
		bottom: calc(36px + 1.25rem);
		align-items: center;
		justify-content: center;
		width: 2.9rem;
		padding: 0 0.4rem;
		border: 0;
		background: transparent;
		color: #fff;
		cursor: pointer;
		z-index: 4;
		pointer-events: auto;
		touch-action: manipulation;
		transition: opacity 0.18s ease, color 0.18s ease;
	}

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

	.exa-slider__inline-nav--prev {
		left: 0;
		padding-left: 0.36rem;
		justify-content: flex-start;
	}

	.exa-slider__inline-nav--next {
		right: 0;
		padding-right: 0.36rem;
		justify-content: flex-end;
	}

	.exa-slider__inline-nav-icon {
		display: block;
		width: 0.88rem;
		height: 0.88rem;
	}
}

/* ==========================================================================
   System 360 — Scroll-synced video scrub (mirrors Cabinet 360, no P2/P4)
   ========================================================================== */
.exa-system-360-container {
	position: relative;
	z-index: 0;
	isolation: isolate;
	background: #030303;
	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;
}

.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;
}

.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;
}

.exa-system-360-video {
	width: 100%;
	max-height: 65dvh;
	display: block;
	object-fit: contain;
	background: #030303;
	border-radius: 0.5rem;
	pointer-events: none;
}

.exa-system-360-scrolly {
	position: relative;
	width: 100%;
	height: min(65dvh, 42rem);
	overflow: hidden;
	border-radius: 0.5rem;
	background: #030303;
}

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

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

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

.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;
	align-items: center;
	gap: 0.25rem;
	padding-top: 1rem;
	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 {
	color: rgba(255,255,255,0.4);
	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 {
		padding-top: 0.5rem;
	}

	.exa-cabinet-360-hint,
	.exa-system-360-hint {
		padding-top: 0.5rem;
	}
}

/* ==========================================================================
   12/13. Bottom Hero & Associations — HubSpot Flush
   ========================================================================== */
.exa-footer-hero {
	position: relative;
	width: 100%;
	max-width: none;
	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;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: #5a5a5a;
	pointer-events: none;
	z-index: 3;
}

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

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

.exa-footer-hero__shade {
	position: absolute;
	inset: 0;
	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: 80rem;
	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-size: clamp(2rem, 3.6vw + 0.5rem, 3.65rem);
}

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

.exa-footer-hero__ctas .exa-btn {
	min-height: 56px;
	padding: 12px 24px;
	font-size: 1rem;
	line-height: 1.75;
	border-radius: 8px;
}

.exa-footer-hero__assoc-overlay {
	position: absolute;
	right: 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:nth-child(3) {
	filter: grayscale(1) invert(1) brightness(0.78) contrast(1.06);
}

@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: min(100%, 320px);
		font-size: 1rem;
		padding: 12px 24px;
		line-height: 1.75;
	}

	.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: 1.18;
		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: min(100%, 320px);
		min-height: 56px;
		padding: 12px 24px;
		font-size: 16px;
		line-height: 1.75;
	}

	html[lang^="ja"] .exa-footer-hero__ctas .exa-btn {
		font-size: 15px;
		line-height: 1.6;
	}

	html[lang^="ja"] .exa-footer-hero__headline,
	html[lang^="ja"] .exa-footer-hero__headline.exa-hero__headline--inline {
		font-size: clamp(1.45rem, 6.4vw, 2rem);
		line-height: 1.3;
	}

}

/* ==========================================================================
   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);
}

/* ==========================================================================
   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);
}

/* ==========================================================================
   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: opacity, transform;
}

/* Carousels: opacity-only scrub — no translateY (preserves fixed positioning
   for expanded media overlays). */
.exa-carousel.exa-section-reveal {
	transform: none;
	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: 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; }
}