/* ====================================================================
 * Dedicated Product -- ARC-32 scroll-driven canvas hero
 *
 * This file carries the critical compatibility fix, local ARC-32 layout
 * primitives, and the ARC-32 typography overrides on top of the shared
 * dedicated-product stack.
 * GSAP ScrollTrigger handles pinning + the scale-into-cabinet timeline.
 * ==================================================================== */

/* ---- CRITICAL: un-break pinning -------------------------------------
 * The base Dedicated Product CSS sets `overflow-x: hidden` on the page
 * wrapper, which forces overflow-y to `auto` and turns the wrapper into a
 * scroll container -- breaking pinned/fixed children. `overflow-x: clip`
 * prevents horizontal overflow WITHOUT establishing a scroll container. */
#dedicated-product.dp-page--arc32 {
	overflow-x: clip;

	/* ---- Section-transition rhythm -----------------------------------
	 * One value drives every ARC-32 module boundary. It used to be written
	 * out inline at each of the eight seam rules further down; hoisting it
	 * here means a seam and the divider line centred in that seam can never
	 * drift apart. Mobile override sits in the 767px block below. */
	--dp-section-seam: 40px;
	/* Highlights owns the only asymmetric seam on the page: the GSAP-pinned
	 * hero above it has no bottom padding to share, so the Highlights divider
	 * is centred inside this pad rather than sitting on the seam. Deriving it
	 * as twice the seam means the half-offset lands on exactly --dp-section-seam,
	 * so this divider gets the same clearance as the other four at every
	 * viewport instead of tracking its own separate curve. */
	--dp-hl-pad-top: calc(var(--dp-section-seam) * 2);

	/* ---- Section dividers --------------------------------------------
	 * 1:1 with /en/about-products/. These are the values measured off the
	 * rendered .exa-page separators, not a re-derivation: 1px, #6e7264 at
	 * 0.7 opacity, capped to the 49rem accent measure with a 1.25rem
	 * gutter (784px wide at a 1440px viewport). */
	--dp-divider-color: var(--renewal-accent-separator-color, #6e7264);
	--dp-divider-width: var(--renewal-accent-separator-width, 1px);
	--dp-divider-opacity: 0.7;
	--dp-divider-gutter: 1.25rem;
	--dp-divider-content-max: var(--renewal-accent-separator-content-max, 49rem);
}

@media (min-width: 768px) {
	#dedicated-product.dp-page--arc32 {
		/* One extra text row of air on each side of the divider versus the
		 * original clamp(28px, 2.5vw, 36px) seam, so the line reads as a
		 * deliberate section break rather than a rule crowding the next title. */
		--dp-section-seam: clamp(48px, 4.2vw, 60px);
	}
}

/* ---- Modular section divider ---------------------------------------
 * Applied as a class in the shared template parts, which the System page
 * also renders -- hence the :not(.dp-page--system) gate here rather than a
 * conditional class in PHP.
 *
 * The line is drawn at the section's own top edge, which IS the seam: every
 * ARC-32 boundary carries --dp-section-seam of padding on both sides, so
 * top:0 lands the rule exactly centred in that gap with equal clearance
 * above and below. Three of these sections clip with `overflow: hidden`,
 * which is why the offset is 0 here instead of the reference page's
 * negative top -- a pseudo-element pushed outside the box would be clipped
 * away on exA Stage, Location Considerations and Choosing Games. */
#dedicated-product.dp-page--arc32:not(.dp-page--system) .dp-section-divider {
	position: relative;
}

#dedicated-product.dp-page--arc32:not(.dp-page--system) .dp-section-divider::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(
		calc(100% - (var(--dp-divider-gutter) * 2)),
		var(--dp-divider-content-max)
	);
	height: var(--dp-divider-width);
	background: var(--dp-divider-color);
	opacity: var(--dp-divider-opacity);
	pointer-events: none;
	z-index: 1;
}

/* Anchor landing: put the divider ABOVE the fold, not on it.
 *
 * The shared rule lands a section's top edge just under the two stacked bars.
 * That top edge is exactly where the divider is drawn, so every jump from the
 * sub-nav parked the rule across the top of the viewport before the section it
 * belongs to. Pulling the margin back by the section's own top padding lands the
 * section's CONTENT at that same spot instead, which leaves the divider tucked up
 * behind the bars and gives the section the full viewport below it.
 *
 * Two values because Highlights pads by --dp-hl-pad-top (twice the seam, with its
 * divider centred inside) while the rest pad by one seam with the divider on the
 * edge. Each subtracts its own, so both land their first line in the same place. */
#dedicated-product.dp-page--arc32:not(.dp-page--system) .dp-section-divider {
	scroll-margin-top: calc(
		var(--renewal-main-nav-height, 5.3125rem) + var(--dp-subnav-h, 52px) + 8px
		- var(--dp-section-seam)
	);
}
#dedicated-product.dp-page--arc32:not(.dp-page--system) .dp-hl.dp-section-divider {
	scroll-margin-top: calc(
		var(--renewal-main-nav-height, 5.3125rem) + var(--dp-subnav-h, 52px) + 8px
		- var(--dp-hl-pad-top)
	);
}

/* Hero -> Highlights. The pinned hero contributes 0px of bottom padding, so
 * top:0 would leave the line flush against the cabinet with all its air
 * below. Centring it in Highlights' own top pad restores equal clearance at
 * every viewport, because both sides read from --dp-hl-pad-top. */
#dedicated-product.dp-page--arc32:not(.dp-page--system) .dp-hl.dp-section-divider::before {
	top: calc(var(--dp-hl-pad-top) / 2);
}

/* ---- Typography: Montserrat via the shared dedicated-product stack ----
 * Scoped with id + .dp-page--arc32 so it out-specifies the base
 * `#dedicated-product.dp-page h1..h6` heading font rules. */
#dedicated-product.dp-page--arc32 .dp-arc32-hero,
#dedicated-product.dp-page--arc32 .dp-arc32-hero * {
	font-family: var(--dp-font);
}

/* ARC-32 inherits the shared blurred-glass treatment from dedicated-product.css. */

/* Keep the long marquee on the proven 2D path. A later 3D/painter-containment
 * optimization made the sub-pixel movement of these 5k+ pixel tracks visibly
 * step in Chromium and WebKit, especially over moving media. */
#dedicated-product.dp-page--arc32 .dp-gcar__track {
	transform: translateX(0);
	contain: layout style;
	backface-visibility: visible;
	-webkit-backface-visibility: visible;
	will-change: auto;
}
#dedicated-product.dp-page--arc32 .dp-gcar.is-active .dp-gcar__track {
	will-change: auto;
}
#dedicated-product.dp-page--arc32 .dp-gcar__track--left,
#dedicated-product.dp-page--arc32 .dp-gcar__track--right {
	animation-name: dp-gcar-loop-arc32;
}
#dedicated-product.dp-page--arc32 .dp-gcar__media {
	transform: none;
	backface-visibility: visible;
	-webkit-backface-visibility: visible;
	will-change: auto;
}
/* Bar is sized to its title but pinned to the card's right edge — the former
 * 8px inset left a sliver of artwork exposed down that edge on every card. The
 * bottom-right corner is clipped by the card's own radius, so only the
 * top-left is rounded, matching the flush base treatment. */
#dedicated-product.dp-page--arc32 .dp-gcar__caption {
	left: auto;
	right: -1px;
	bottom: -1px;
	width: max-content;
	max-width: calc(100% + 2px);
	padding: 5px 15px 6px 18px;
	border-radius: var(--dp-unit) 0 0 0;
	text-align: right;
	box-shadow: 2px 2px 0 2px rgba(0, 0, 0, .62);
}
#dedicated-product.dp-page--arc32 .dp-gcar__card {
	isolation: isolate;
}
#dedicated-product.dp-page--arc32 .dp-gcar__brand-logo {
	height: clamp(38px, 4.5vw, 64px);
}
#dedicated-product.dp-page--arc32 .dp-gcar {
	--arc32-gcar-deck-logo-gap: clamp(36px, 5vw, 72px);
	--arc32-gcar-logo-rows-gap: clamp(32px, 4vw, 56px);
}
#dedicated-product.dp-page--arc32 .dp-gcar__header {
	margin-bottom: var(--arc32-gcar-deck-logo-gap);
}
#dedicated-product.dp-page--arc32 .dp-gcar__motion-group {
	width: 100%;
}
#dedicated-product.dp-page--arc32 .dp-gcar__brand {
	margin: 0 0 var(--arc32-gcar-logo-rows-gap);
}

@keyframes dp-gcar-loop-arc32 {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* ---- High-fidelity hero background ---------------------------------
 * Replace the flat Tailwind black (tw-bg-black, 0,1,0 specificity -- beaten by
 * the id + .dp-page--arc32 selector here) with a near-black #030303 base and a
 * long top→bottom gradient settling at #121212, plus extra trailing padding so
 * the dark tone bleeds gradually into the following section instead of a seam. */
#dedicated-product.dp-page--arc32 .dp-arc32-hero {
	position: relative;
	background-color: #030303;
	background-image: none;
}
#dedicated-product.dp-page--arc32 .dp-arc32-hero__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
}
#dedicated-product.dp-page--arc32 .dp-arc32-hero__cabinet {
	position: absolute;
	left: 50%;
	top: 50%;
	width: auto;
	height: auto;
	max-width: 94vw;
	max-height: 90vh;
	transform: translate(-50%, -50%);
	opacity: 0;
	z-index: 1;
	pointer-events: none;
}
/* Cabinet CTA -- flush beneath the cabinet at the scroll finale. JS sets its
   `top` from the cabinet's centred bottom, clamped inside the stage so it can
   never be clipped; GSAP fades it in with the cabinet. Reuses the Choosing
   Games footer CTA styling (.dp-gcar__footer-cta.button-red-shadowed) 1:1. */
#dedicated-product.dp-page--arc32 .dp-arc32-hero__cta {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%);
	z-index: 20;
	display: flex;
	justify-content: center;
	width: max-content;
	max-width: 94vw;
	opacity: 0;
	pointer-events: none;
}
/* Restore the Choosing Games CTA's bold face. The `.dp-arc32-hero *` typography
   rule above forces --dp-font (regular Montserrat) onto every hero descendant at
   equal specificity but later in the cascade, which would otherwise flatten this
   button to regular weight. Match the gcar footer CTA 1:1. */
#dedicated-product.dp-page--arc32 .dp-arc32-hero__cta .dp-gcar__footer-cta {
	font-family: "Montserrat-Bold", Helvetica, Arial, sans-serif;
	font-weight: 500;
}
#dedicated-product.dp-page--arc32 .dp-arc32-hero__media {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow: hidden;
	background: #000;
}
#dedicated-product.dp-page--arc32 .dp-arc32-hero__media-el {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Hero copy -- premium, large (display scale). Scoped to beat base h1 rules. */
#dedicated-product.dp-page--arc32 .dp-arc32-hero__branding {
	margin: 1rem 0 0;
	font-size: clamp(18px, 1.8vw, 24px);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: rgba(255, 255, 255, 0.9);
}
#dedicated-product.dp-page--arc32 .dp-arc32-hero__title {
	margin: 0;
	font-size: clamp(36px, 5.5vw, 68px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	max-width: 18ch;
	text-align: center;
	color: #fff;
}
.dp-arc32-hero__label {
	margin-top: 2rem;
}
.dp-arc32-hero__label-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.625rem 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
}

/* Hero copy anchored near the bottom of the viewport, still centred -- raised
 * by roughly one row from flush-bottom. */
.dp-arc32-hero__overlay {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 30;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding: 0 1.5rem clamp(96px, 15vh, 180px);
	text-align: center;
	pointer-events: none;
}
.dp-arc32-hero__copy {
	display: flex;
	width: 100%;
	max-width: 72rem;
	margin-inline: auto;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

#dedicated-product.dp-page--arc32 .dp-gcar__col-title {
	margin: 0;
	font-family: 'Montserrat-Bold', var(--dp-font);
	min-width: 0;
	max-width: 100%;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.4;
	white-space: normal;
	overflow-wrap: break-word;
	color: #fff;
}
#dedicated-product.dp-page--arc32 .dp-gcar__col-body {
	margin: 0;
	font-family: 'Montserrat-Regular', var(--dp-font);
	font-size: 1rem;
	line-height: 1.6;
	letter-spacing: 0;
	color: #c7cbd2;
	opacity: 1;
}

/* Choosing a Game uses the exact empty-card surface from About Products'
 * Cabinet Features / Designed for Locations sections on both product pages. */
#dedicated-product.dp-page--arc32 .dp-gcar__col {
	position: relative;
	overflow: hidden;
	padding: 32px;
	border-radius: 12px;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	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);
}
#dedicated-product.dp-page--arc32 .dp-gcar__col::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;
}
#dedicated-product.dp-page--arc32 .dp-gcar__col > * {
	position: relative;
	z-index: 1;
}
/* ---- Play / pause toggle ----------------------------------------------
 * Top-right of the hero, pushed clear of the fixed site header + sub-nav. */
.dp-arc32-hero__toggle {
	position: fixed;
	right: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.2);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	color: #fff;
	cursor: pointer;
	top: 89px;
	z-index: 45;
	transform: none;
	will-change: opacity;
	opacity: 1;
	pointer-events: auto;
	transition: background 0.2s ease, opacity 0.24s ease;
}
.dp-arc32-hero__toggle:hover { background: rgba(255, 255, 255, 0.32); }
.dp-arc32-hero__toggle.is-hero-control-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.dp-arc32-hero__icon { width: 22px; height: 22px; }
.dp-arc32-hero__label-pill { will-change: transform, opacity; transition: opacity 0.18s ease; }

/* Play/pause icon swap. */
.dp-arc32-hero__icon--play { display: none; }
.dp-arc32-hero__toggle.is-paused .dp-arc32-hero__icon--pause { display: none; }
.dp-arc32-hero__toggle.is-paused .dp-arc32-hero__icon--play { display: block; }

/* ---- Mobile + reduced-motion ----------------------------------
 * The pinned scroll-scale now runs at ALL widths when motion is allowed, so
 * the cabinet must be visible on mobile too (it's the scale target). Only hide
 * the cabinet when motion is disabled (no pin → static looping hero). */
@media (prefers-reduced-motion: reduce) {
	/* Higher specificity than the base `#dedicated-product.dp-page img` rule. */
	#dedicated-product.dp-page--arc32 .dp-arc32-hero__cabinet { display: none; }
	/* No pin / no scroll choreography → the JS never positions the CTA. Show it
	   statically near the bottom of the hero so it stays visible and usable. */
	#dedicated-product.dp-page--arc32 .dp-arc32-hero__cta {
		top: auto;
		bottom: clamp(24px, 6vh, 64px);
		opacity: 1;
		pointer-events: auto;
	}
}
/* ====================================================================
 * Showcase ("Take a closer look") -- Apple-style centered two-column grid
 * (ARC-32 variant only). Re-lays the desktop overlay into a balanced grid:
 * the pill label stack sits in the left column, vertically centred against
 * the media in the right column. The interactive engine (accordion pills,
 * variant switches, intro backdrop, nav, close) is untouched -- only the
 * desktop layout box and media framing change. Scoped to .dp-page--arc32 so
 * the shared Showcase on other Dedicated Product templates is unaffected.
 * ==================================================================== */

/* 4A -- Section rhythm: drop the fold-locked height cap and give the heading
 * room above the content so titles never sit flush against the panel edge. */
#dedicated-product.dp-page--arc32 .dp-showcase {
	max-height: none;
	padding: clamp(40px, 6vw, 72px) 0;
	background: #121212;
	/* Let a zoomed Default Right-Pane Media spill past the panel top/bottom. The
	 * page wrapper's overflow-x:clip still prevents any horizontal scrollbar. */
	overflow: visible;
}
#dedicated-product.dp-page--arc32 .dp-showcase__panel {
	padding: 60px clamp(32px, 5vw, 88px);
	overflow: visible;
}
/* A high-specificity mobile rule (…__panel.dp-reveal.is-in-view) re-clips the
 * panel on phones, killing the Default Right-Pane Media overspill -- re-assert
 * visible (matched specificity, later in the cascade) on the ARC-32 page. */
#dedicated-product.dp-page--arc32 .dp-showcase__panel.dp-reveal,
#dedicated-product.dp-page--arc32 .dp-showcase__panel.dp-reveal.is-in-view,
#dedicated-product.dp-page--arc32 .dp-showcase__layout {
	overflow: visible;
}
#dedicated-product.dp-page--arc32 .dp-showcase__title {
	margin: 0 0 clamp(28px, 4vw, 48px);
}
#dedicated-product.dp-page--arc32 .dp-showcase__title:has(+ .dp-showcase__tabs) {
	margin-bottom: clamp(16px, 1.8vw, 24px);
}

/* Custom and Full both preserve the complete asset. Vertical overspill is
 * opt-in through the shared editor checkbox. */
#dedicated-product.dp-page--arc32 .dp-showcase__media-host > * { object-fit: contain; }
@media (min-width: 1024px) {
	/* Full reaches the ARC-32/System panel edges, including the panel padding;
	 * Custom remains right-aligned inside the content canvas. */
	#dedicated-product.dp-page--arc32 .dp-showcase__media.is-full {
		top: -60px;
		right: calc(0px - clamp(32px, 5vw, 88px));
		bottom: -60px;
		left: calc(0px - clamp(32px, 5vw, 88px));
		width: auto;
	}
}

@media (min-width: 1024px) {
	/* Vertically centre the floating label stack against the media pane (fixes
	 * the old top-pinning) without disturbing the media's absolute overlay. The
	 * base layout is flex-direction:column, so VERTICAL centring is
	 * justify-content (main axis); align-items + the list's margin-right:auto keep
	 * it hard LEFT (horizontal/cross axis). However many cards exist, the stack
	 * stays left-aligned and vertically centred on the left of the panel. */
	#dedicated-product.dp-page--arc32 .dp-showcase__layout {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
	}
	#dedicated-product.dp-page--arc32 .dp-showcase__list {
		margin-right: auto;
	}
}

/* 3a -- Drop the thin grey outline on the pill cards in every state. */
#dedicated-product.dp-page--arc32 .dp-showcase__item,
#dedicated-product.dp-page--arc32 .dp-showcase__item.is-active {
	border-color: transparent;
}

/* 3b -- More breathing room between the "+" badge and the label / description. */
#dedicated-product.dp-page--arc32 .dp-showcase__row-head {
	gap: 13px;
}

/* 3c -- Keep the "+" glyph optically centred in its ring regardless of label
 * length (the glyph rides high on the baseline in some weights). */
#dedicated-product.dp-page--arc32 .dp-showcase__icon {
	line-height: 1;
	align-self: center;
}

/* 3d -- Up/down chevron buttons: solid #1a1a1a discs (were transparent), parked
 * in the left gutter with clear spacing from the labels. */
#dedicated-product.dp-page--arc32 .dp-showcase__nav-btn {
	background: #1a1a1a;
}
#dedicated-product.dp-page--arc32 .dp-showcase__nav-btn:not(:disabled):hover {
	background: #2a2a2a;
}
#dedicated-product.dp-page--arc32 .dp-showcase__nav-btn:disabled,
#dedicated-product.dp-page--arc32 .dp-showcase__nav-btn[aria-disabled="true"] {
	background: #101011;
	color: #4c4c51;
}
/* #2 -- Nudge the desktop up/down chevron column a little further to the left. */
@media (min-width: 1024px) {
	#dedicated-product.dp-page--arc32 .dp-showcase__nav {
		left: -34px;
	}
}

/* 3g -- Description content follows the shared FLIP container motion.
 * ARC-32 and the System template only add the delayed content fade below. */
/* The copy inside an open card fades with its BODY, not on top of it.
 *
 * These rules used to fade .dp-showcase__desc and .dp-showcase__variants on
 * their own while .dp-showcase__body was independently fading in the shared
 * controller. Two nested opacity animations multiply, so the effective curve
 * was opacity^2 — nearly flat for the first third of its run. That is what left
 * a beat after the outgoing copy vanished where the incoming copy was
 * technically animating but not yet visible, and it is why the swap read as a
 * cut-then-gap-then-fade rather than one cross-fade.
 *
 * The body is now the single fading layer in both directions; these stay fully
 * opaque and let it carry them. */
#dedicated-product.dp-page--arc32 .dp-showcase__desc,
#dedicated-product.dp-page--arc32 .dp-showcase__variants,
#dedicated-product.dp-page--arc32 .dp-showcase__item.is-active .dp-showcase__desc,
#dedicated-product.dp-page--arc32 .dp-showcase__item.is-active .dp-showcase__variants {
	opacity: 1;
	transition: none;
}
/* Card-to-card out-fade. The rule above pins the copy at opacity 1 for as long
 * as .is-active is present, and the outgoing card keeps that class while it
 * fades — so the copy stayed fully opaque and then disappeared with the box
 * instead of dissolving, which is why no fade was visible on click. This has to
 * out-rank it: same (1,4,0) specificity, declared after. Applies to both this
 * page and the System template, which loads this stylesheet too. */
/* Out-fade is likewise carried by the body alone — see above. */

/* -- On phones the resting Default Right-Pane Media fits INSIDE its pane
 * like the item media cards: no right-nudge, no zoom overspill (object-fit:
 * contain does the rest). Desktop keeps the zoomed/overspilling treatment. */
@media (max-width: 768px) {
	#dedicated-product.dp-page--arc32 .dp-showcase__default-media {
		transform: none;
	}
}

/* ====================================================================
 * ARC32 HERO CENTER STACK + TECHNICAL DIAGRAM
 *
 * The finale restores the original viewport-centred cabinet axis. Cabinet,
 * screen media, CTA, and supporting copy remain one flex stack; the technical
 * diagram is an independent edge card so it never shifts that centre line.
 * ==================================================================== */
#dedicated-product.dp-page--arc32 .dp-arc32-hero__stage {
	--arc32-safe-top: calc(var(--renewal-main-nav-height, 5.3125rem) + 18px);
	position: sticky;
	top: 0;
	display: block;
	width: 100%;
	height: var(--arc32-scene-height, 100svh);
	overflow: clip;
}

#dedicated-product.dp-page--arc32 .dp-arc32-hero__visual {
	display: contents;
}

#dedicated-product.dp-page--arc32 .dp-arc32-hero__media {
	z-index: 6;
}

#dedicated-product.dp-page--arc32 .dp-arc32-hero {
	--arc32-final-title-max: 80px;
	--arc32-final-subtitle-max: 30px;
	/* Centre of the cabinet's printed company-logo / NEW TYPE / ARC-32 rail,
	 * measured against the intrinsic cabinet artwork. JS resolves this ratio to
	 * an exact pixel top whenever the existing hero geometry refreshes. */
	--arc32-marquee-center: 21.5;
	/* JS updates both variables as one unit. Keeping this parent exactly one
	 * scene-height taller than its sticky child is what releases it immediately
	 * when the finale reaches 100%, including on tall portrait monitors. */
	height: calc(var(--arc32-scene-height, 100svh) + var(--arc32-scroll-distance, 810px));
}

#dedicated-product.dp-page--arc32 .dp-arc32-hero__product {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: min(100%, 600px);
	min-width: 0;
	margin-inline: auto;
	padding: var(--arc32-safe-top) 20px 20px;
	transform: none;
}

#dedicated-product.dp-page--arc32 .dp-arc32-hero__cabinet-wrap {
	display: flex;
	flex: 0 1 auto;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 0;
}

#dedicated-product.dp-page--arc32 .dp-arc32-hero__cabinet {
	position: relative;
	inset: auto;
	z-index: 1;
	display: block;
	width: auto;
	height: auto;
	max-width: min(78vw, 500px);
	max-height: min(84svh, calc(100svh - var(--arc32-safe-top) - 76px));
	object-fit: contain;
	image-rendering: auto;
	opacity: 0;
	transform: none;
}

/* Finale copy shares the cabinet product stack so compact sticky layouts remain
 * stable. On desktop it occupies the clear lane immediately left of the cabinet;
 * phones align its heading row with the cabinet screen's top edge. */
#dedicated-product.dp-page--arc32 .dp-arc32-hero__final-copy {
	position: absolute;
	top: var(--arc32-final-copy-top, 0px);
	right: calc(100% - clamp(100px, 8vw, 120px));
	bottom: auto;
	z-index: 12;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: clamp(260px, 26vw, 380px);
	padding: 0;
	color: #fff;
	text-align: left;
	opacity: 0;
	pointer-events: none;
	will-change: transform, opacity;
}

#dedicated-product.dp-page--arc32 .dp-arc32-hero__final-heading-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

#dedicated-product.dp-page--arc32 .dp-arc32-hero__final-title {
	margin: 0;
	max-width: 10ch;
	font-family: 'Montserrat-Bold', var(--dp-font);
	font-size: clamp(min(40px, var(--arc32-final-title-max)), 6vw, var(--arc32-final-title-max));
	font-weight: 700;
	line-height: .96;
	letter-spacing: -.045em;
	text-align: left;
	white-space: nowrap;
	overflow-wrap: normal;
}

#dedicated-product.dp-page--arc32 .dp-arc32-hero__final-subtitle {
	margin: 4px 0 0;
	max-width: none;
	color: #86868b;
	font-family: 'Montserrat-Regular', var(--dp-font);
	font-size: clamp(min(18px, var(--arc32-final-subtitle-max)), 2vw, var(--arc32-final-subtitle-max));
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -.015em;
	text-align: left;
	white-space: nowrap;
}

#dedicated-product.dp-page--arc32 .dp-arc32-hero__cta {
	position: relative;
	inset: auto;
	z-index: 20;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 420px;
	margin-top: -4px;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transform: none;
}

#dedicated-product.dp-page--arc32 .dp-arc32-hero__subcta {
	display: flex;
	justify-content: flex-start;
	width: 100%;
	max-width: 34em;
	margin: 10px 0 0;
	color: #86868b;
	font-size: clamp(.9rem, .84rem + .18vw, 1rem);
	font-weight: 600;
	line-height: 1.42;
	letter-spacing: .01em;
	overflow-wrap: anywhere;
}

#dedicated-product.dp-page--arc32 .dp-arc32-hero__spec-card {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	width: fit-content;
	max-width: none;
	padding: 0.4em 1em;
	border: 1px solid #222225;
	border-radius: 6px;
	background: #111113;
	white-space: nowrap;
}

#dedicated-product.dp-page--arc32 .dp-arc32-hero__spec-text {
	color: #86868b;
	font-size: clamp(11px, .72vw, 12px);
	font-weight: 600;
	letter-spacing: 0;
}

@media (min-width: 1024px) {
	#dedicated-product.dp-page--arc32 .dp-arc32-hero__cabinet-wrap {
		position: relative;
		top: -16px;
	}

	#dedicated-product.dp-page--arc32 .dp-arc32-hero__cta {
		top: -4px;
	}
}

/* ====================================================================
 * FINALE CALLOUT VECTORS
 *
 * Two hairlines tie the finale copy and the technical-diagram card to the
 * cabinet's control deck. Geometry is measured in JS against the live stage,
 * so this file owns presentation only; the deck anchors below are the one
 * authored input, expressed against the cabinet artwork in the same ratio
 * convention as the screen aperture (--arc32-screen-*). Defaults land on the
 * red control-panel wings at the joystick/button row.
 *
 * The draw is gated on `.is-callouts-drawn` rather than page load: the three
 * anchor elements only resolve near the end of the pinned scroll timeline, so
 * a load-time animation would draw against a full-bleed video.
 * ==================================================================== */
#dedicated-product.dp-page--arc32 .dp-arc32-hero {
	--arc32-callout-deck: 58.6;
	/* The cabinet SILHOUETTE's edges at the deck line, as percentages of the
	   graphic's width — measured off the artwork's alpha channel, so they describe
	   where the chassis actually is rather than where a line should stop. The
	   standoff is applied separately in JS (see arc32CabinetGap), the same way the
	   copy and specifications ends get theirs, so all three endpoints keep the
	   same clearance instead of each encoding its own.

	   Re-measure these whenever the cabinet art changes. They are identical on the
	   previous and current artwork (both 10.31%..88.60%), so a change here means
	   the chassis itself was redrawn. */
	--arc32-callout-deck-left: 10.31;
	--arc32-callout-deck-right: 88.6;
}

#dedicated-product.dp-page--arc32 .dp-arc32-hero__callouts {
	position: absolute;
	inset: 0;
	z-index: 5;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
}

/* Set until JS resolves a usable path for the current viewport, so an
 * unmeasured or geometrically impossible layout renders nothing at all. */
#dedicated-product.dp-page--arc32 .dp-arc32-hero__callouts.is-callouts-unmeasured {
	display: none;
}

#dedicated-product.dp-page--arc32 .dp-arc32-hero.is-callouts-drawn .dp-arc32-hero__callouts {
	opacity: 1;
}

/* Dash length is written per path from getTotalLength(): a fixed 800 would
 * snap-complete a short path and never finish a long one. */
#dedicated-product.dp-page--arc32 .dp-arc32-hero__callout {
	fill: none;
	stroke-width: 1.5px;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: var(--arc32-callout-length, 800);
	stroke-dashoffset: var(--arc32-callout-length, 800);
}

#dedicated-product.dp-page--arc32 .dp-arc32-hero.is-callouts-drawn .dp-arc32-hero__callout {
	animation:
		dp-arc32-callout-draw 1.4s cubic-bezier(.16, 1, .3, 1) forwards,
		dp-arc32-callout-pulse 3s ease-in-out infinite;
}

#dedicated-product.dp-page--arc32 .dp-arc32-hero.is-callouts-drawn .dp-arc32-hero__callout--left {
	animation-delay: .2s, 1.6s;
}

#dedicated-product.dp-page--arc32 .dp-arc32-hero.is-callouts-drawn .dp-arc32-hero__callout--right {
	animation-delay: .5s, 1.9s;
}

@keyframes dp-arc32-callout-draw {
	to { stroke-dashoffset: 0; }
}

@keyframes dp-arc32-callout-pulse {
	0%, 100% { opacity: .75; }
	50% { opacity: 1; }
}

/* Compact viewports stack the copy and diagram out of the three-lane finale,
 * leaving nothing for the vectors to connect. */
@media (max-width: 1023px) {
	#dedicated-product.dp-page--arc32 .dp-arc32-hero__callouts {
		display: none;
	}
}

/* Reduced motion keeps the connection but not the movement: the hero renders
 * its resolved finale directly, so the vectors render resolved too. */
@media (prefers-reduced-motion: reduce) {
	#dedicated-product.dp-page--arc32 .dp-arc32-hero__callouts {
		opacity: 1;
	}

	#dedicated-product.dp-page--arc32 .dp-arc32-hero__callout,
	#dedicated-product.dp-page--arc32 .dp-arc32-hero.is-callouts-drawn .dp-arc32-hero__callout {
		animation: none;
		stroke-dashoffset: 0;
	}
}

/* iOS WebKit can bevel or clip a rounded CSS border when the hero is being
 * composited. Mirror the proven d1334d93dd fix: a literal red outer box and a
 * separate inset label surface, with no border/shadow/filter layer to rasterize.
 *
 * Shared with the exA Stage control-row CTA, which is the same button by brief
 * and so has to be the same button here too — a second copy of these values
 * would be free to drift from the ones the hero actually uses. */
@media (max-width: 768px) {
	#dedicated-product.dp-page--arc32 .dp-arc32-hero__cta .dp-gcar__footer-cta.button-red-shadowed,
	#dedicated-product.dp-page--arc32 .dp-stage__cta.button-red-shadowed {
		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;
	}

	#dedicated-product.dp-page--arc32 .dp-arc32-hero__cta-label,
	#dedicated-product.dp-page--arc32 .dp-stage__cta-label {
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: stretch;
		min-height: 50px;
		padding: 0 26px;
		border-radius: 6px;
		background: #D90500;
		color: #fff;
		transition: background-color .2s ease, color .2s ease;
	}

	#dedicated-product.dp-page--arc32 .dp-arc32-hero__cta .dp-gcar__footer-cta.button-red-shadowed:hover,
	#dedicated-product.dp-page--arc32 .dp-arc32-hero__cta .dp-gcar__footer-cta.button-red-shadowed:focus-visible,
	#dedicated-product.dp-page--arc32 .dp-arc32-hero__cta .dp-gcar__footer-cta.button-red-shadowed:active,
	#dedicated-product.dp-page--arc32 .dp-stage__cta.button-red-shadowed:hover,
	#dedicated-product.dp-page--arc32 .dp-stage__cta.button-red-shadowed:focus-visible,
	#dedicated-product.dp-page--arc32 .dp-stage__cta.button-red-shadowed:active {
		border: 0;
		background: #D90500;
		color: #D90500;
	}

	#dedicated-product.dp-page--arc32 .dp-arc32-hero__cta .dp-gcar__footer-cta.button-red-shadowed:hover .dp-arc32-hero__cta-label,
	#dedicated-product.dp-page--arc32 .dp-arc32-hero__cta .dp-gcar__footer-cta.button-red-shadowed:focus-visible .dp-arc32-hero__cta-label,
	#dedicated-product.dp-page--arc32 .dp-arc32-hero__cta .dp-gcar__footer-cta.button-red-shadowed:active .dp-arc32-hero__cta-label,
	#dedicated-product.dp-page--arc32 .dp-stage__cta.button-red-shadowed:hover .dp-stage__cta-label,
	#dedicated-product.dp-page--arc32 .dp-stage__cta.button-red-shadowed:focus-visible .dp-stage__cta-label,
	#dedicated-product.dp-page--arc32 .dp-stage__cta.button-red-shadowed:active .dp-stage__cta-label {
		background: #fff;
		color: #D90500;
	}
}

@media (min-width: 1024px) {
	body .dp-arc32-hero__toggle {
		position: fixed;
		top: 103px;
		right: max(40px, calc((100vw - 1200px) / 2));
		left: auto;
	}
}

/* The brand stack, declared on :root rather than inside the page scope so that
 * it is still reachable from nodes this template deliberately relocates to
 * document.body (see the gallery modal). 'Montserrat' -- not 'Montserrat-Regular'
 * -- is the weight-linked family: style.css registers 300/400/500/600/700/800/900
 * @font-face rules under that one name, so 500 and 600 resolve to the real
 * Medium/SemiBold cuts instead of being synthesised from Regular. The CJK faces
 * trail the Latin ones because Montserrat carries no CJK glyphs. */
:root {
	--dp-font-i18n: 'Montserrat', 'Helvetica Neue', Arial,
		'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, 'Noto Sans JP', sans-serif;
}

/* Technical diagram thumbnail: the element itself receives the scroll reveal;
 * its button owns hover/focus scale so GSAP's translate remains undisturbed. */
#dedicated-product.dp-page--arc32 .dp-arc32-specs,
#dedicated-product.dp-page--arc32 .dp-arc32-specs * {
	box-sizing: border-box;
	font-family: var(--dp-font-i18n);
}

#dedicated-product.dp-page--arc32 .dp-arc32-specs {
	position: absolute;
	top: auto;
	bottom: var(--arc32-specs-cta-bottom, clamp(78px, 11svh, 110px));
	right: auto;
	left: calc(50% + clamp(250px, 19.72vw, 284px));
	z-index: 12;
	width: clamp(154px, 12.5vw, 176px);
	opacity: 0;
	pointer-events: none;
	transform: none;
}

#dedicated-product.dp-page--arc32 .dp-arc32-specs__trigger-title {
	margin: 0;
	width: 100%;
	max-width: none;
	padding: 0 0 7px;
	color: #f5f5f7;
	font-size: clamp(.95rem, .9rem + .15vw, 1.08rem);
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	white-space: nowrap;
	overflow: visible;
}

#dedicated-product.dp-page--arc32 .dp-arc32-specs__trigger {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 16px;
	background: rgba(255, 255, 255, .05);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	color: #f5f5f7;
	text-align: center;
	cursor: zoom-in;
	-webkit-appearance: none;
	appearance: none;
	overflow: hidden;
	transition: none;
}

#dedicated-product.dp-page--arc32 .dp-arc32-specs__trigger:hover,
#dedicated-product.dp-page--arc32 .dp-arc32-specs__trigger:focus-visible,
#dedicated-product.dp-page--arc32 .dp-arc32-specs__trigger:active {
	border-color: rgba(255, 255, 255, .28);
	background: rgba(255, 255, 255, .08);
	box-shadow: 0 18px 44px rgba(0, 0, 0, .3);
	outline: none;
}

#dedicated-product.dp-page--arc32 .dp-arc32-specs__trigger:focus-visible {
	box-shadow: 0 0 0 2px #fff, 0 18px 44px rgba(0, 0, 0, .3);
}

#dedicated-product.dp-page--arc32 .dp-arc32-specs__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	aspect-ratio: 2660 / 2558;
	margin: 0;
	overflow: hidden;
	border: 0;
	border-radius: 0;
	background: #09090b;
}

#dedicated-product.dp-page--arc32 .dp-arc32-specs__thumb-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: brightness(1.65) contrast(1.06);
	transform: none;
	transition: none;
}

#dedicated-product.dp-page--arc32 .dp-arc32-specs__trigger-hint {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .3rem;
	width: 100%;
	margin: 0;
	padding: 10px 12px 11px;
	color: rgba(255, 255, 255, .5);
	background: rgba(255, 255, 255, .025);
	text-align: center;
	white-space: nowrap;
	transition: none;
}

/* No font-family here on purpose. It used to name 'Montserrat-Regular', which
 * is a single-face family with no weight axis and no CJK fallback -- it lost to
 * the scoped `.dp-arc32-specs *` rule above on specificity, so it never took
 * effect, but it was a competing declaration waiting to win the first time this
 * element moved. The stack is inherited from that one rule now. */
.dp-arc32-specs__trigger-hint-text {
	font-size: .7rem;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.dp-arc32-specs__trigger-hint-arrow {
	display: block;
	flex: 0 0 auto;
	color: rgba(255, 255, 255, .4);
	will-change: transform;
	animation: dp-arc32-expand-arrow 1.5s ease-in-out infinite;
}

@keyframes dp-arc32-expand-arrow {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-5px); }
}

#dedicated-product.dp-page--arc32 .dp-arc32-specs__trigger:hover .dp-arc32-specs__thumb,
#dedicated-product.dp-page--arc32 .dp-arc32-specs__trigger:focus-visible .dp-arc32-specs__thumb,
#dedicated-product.dp-page--arc32 .dp-arc32-specs__trigger:active .dp-arc32-specs__thumb {
	background: #111114;
}

#dedicated-product.dp-page--arc32 .dp-arc32-specs__trigger:hover .dp-arc32-specs__thumb-image,
#dedicated-product.dp-page--arc32 .dp-arc32-specs__trigger:focus-visible .dp-arc32-specs__thumb-image,
#dedicated-product.dp-page--arc32 .dp-arc32-specs__trigger:active .dp-arc32-specs__thumb-image {
	filter: brightness(1.85) contrast(1.08);
}

#dedicated-product.dp-page--arc32 .dp-arc32-specs__trigger:hover .dp-arc32-specs__trigger-hint,
#dedicated-product.dp-page--arc32 .dp-arc32-specs__trigger:focus-visible .dp-arc32-specs__trigger-hint,
#dedicated-product.dp-page--arc32 .dp-arc32-specs__trigger:active .dp-arc32-specs__trigger-hint {
	color: rgba(255, 255, 255, .9);
	background: rgba(255, 255, 255, .08);
}

/* Reference-aligned technical modal. The document keeps its existing scroll
 * geometry while this fixed overlay is open, preventing ScrollTrigger jumps. */

/* Font enforcement for the ARC-32 Dimensions and System Tech Specs modals.
 *
 * Root cause: js/dedicated-product-arc32.js runs `document.body.appendChild(modal)`
 * so the overlay escapes the pinned hero's stacking context. That also severs it
 * from #dedicated-product, and with it every font-family this file declares --
 * the whole subtree fell back to `body { font-family: "Montserrat-Regular" }`
 * (css/style.css), and the <h2> fell further to foundation.css's
 * `h1..h6 { font-family: "Helvetica Neue", Helvetica, Roboto, Arial }`.
 * Neither fallback family has a weight axis, so the 500/600/700 declared on the
 * table rows, spec values, notes and segmented pills below were all being
 * synthesised as faux bold off a single Regular face.
 *
 * Because the modal is detached, this rule cannot be scoped under the page id.
 * The class selector alone still out-specifies foundation's bare h1..h6, and the
 * stack is read from :root, which detached nodes still inherit. */
.dp-arc32-gallery-modal,
.dp-arc32-gallery-modal * {
	font-family: var(--dp-font-i18n);
}

.dp-arc32-gallery-modal[hidden] {
	display: none;
}

.dp-arc32-gallery-modal {
	position: fixed;
	inset: 0;
	z-index: 10050;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, .88);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	overscroll-behavior: contain;
	transition: opacity .3s ease, visibility .3s ease;
}

.dp-arc32-gallery-modal.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.dp-arc32-gallery-modal__backdrop {
	position: absolute;
	inset: 0;
	border: 0;
	background: transparent;
	cursor: default;
}

.dp-arc32-gallery-modal__dialog {
	position: relative;
	z-index: 1;
	width: min(100%, 1040px);
	max-height: calc(100svh - 40px);
	padding: 32px;
	overflow: auto;
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 20px;
	background: #121214;
	box-shadow: 0 32px 90px rgba(0, 0, 0, .55);
	color: #f5f5f7;
	transform: scale(.95);
	transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

.dp-arc32-gallery-modal__dialog:focus {
	outline: none;
}

.dp-arc32-gallery-modal.is-open .dp-arc32-gallery-modal__dialog {
	transform: scale(1);
}

.dp-arc32-gallery-modal__header {
	padding-inline: 48px;
	text-align: center;
}

/* Type scale for the technical specification modals — shared by the ARC-32
 * Dimensions gallery and the System Tech Specs gallery, so both read at the
 * same size. Stepped up one notch across the board for legibility: these are
 * reference figures a visitor reads carefully, not glanceable UI chrome. */
.dp-arc32-gallery-modal__title {
	margin: 0;
	color: #f5f5f7;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.dp-arc32-gallery-modal__description {
	margin: 4px 0 0;
	color: #86868b;
	font-size: .95rem;
	line-height: 1.45;
}

.dp-arc32-gallery-modal__close {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	box-shadow: none;
	color: #f5f5f7;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}

.dp-arc32-gallery-modal__close:hover,
.dp-arc32-gallery-modal__close:focus-visible {
	border-color: rgba(255, 255, 255, .26);
	background: rgba(255, 255, 255, .2);
	outline: none;
}

.dp-arc32-gallery-modal__close:focus-visible {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .28);
}

.dp-arc32-gallery-modal__close svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.dp-arc32-gallery-modal__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 28px;
	margin-top: 20px;
}

.dp-arc32-gallery-modal__grid--diagram-only {
	grid-template-columns: minmax(0, 1fr);
}

.dp-arc32-gallery-modal__schematic {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	min-width: 0;
	min-height: 310px;
}

/* Shrink-to-fit rather than 1 1 auto: when the specifications column is the
 * taller grid track, a growing viewport absorbed the surplus and centred the
 * diagram inside it, stranding the pills ~70px below the image. Sizing to the
 * image lets the schematic's own `justify-content: center` centre image and
 * pills as one unit, so the control stays tucked under the diagram edge. */
.dp-arc32-gallery-modal__viewport {
	display: flex;
	flex: 0 1 auto;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 0;
}

.dp-arc32-gallery-modal__image {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: min(58svh, 480px);
	object-fit: contain;
	object-position: center;
	border-radius: 12px;
}

.dp-arc32-gallery-modal__pills {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	max-width: 100%;
	margin: 12px auto 0;
	padding: 4px;
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 9999px;
	background: rgba(28, 28, 31, .62);
	-webkit-backdrop-filter: blur(20px) saturate(1.3);
	backdrop-filter: blur(20px) saturate(1.3);
	overflow-x: auto;
	scrollbar-width: none;
}

.dp-arc32-gallery-modal__pills::-webkit-scrollbar {
	display: none;
}

.dp-arc32-gallery-modal__pill-indicator {
	position: absolute;
	top: 4px;
	left: 0;
	z-index: 0;
	width: 0;
	height: calc(100% - 8px);
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	transform: translate3d(0, 0, 0);
	transition: width .35s cubic-bezier(.25, 1, .5, 1),
		transform .35s cubic-bezier(.25, 1, .5, 1);
	pointer-events: none;
}

.dp-arc32-gallery-modal__pill {
	position: relative;
	z-index: 1;
	min-width: 96px;
	padding: 9px clamp(14px, 1.4vw, 20px);
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #86868b;
	font: inherit;
	font-size: clamp(.84rem, .8rem + .1vw, .95rem);
	font-weight: 600;
	line-height: 1.1;
	white-space: nowrap;
	cursor: pointer;
	transition: color .2s ease, transform .2s ease;
}

.dp-arc32-gallery-modal__pill:hover,
.dp-arc32-gallery-modal__pill:focus-visible,
.dp-arc32-gallery-modal__pill.is-active {
	color: #f5f5f7;
	outline: none;
}

.dp-arc32-gallery-modal__pill:focus-visible {
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .72);
}

.dp-arc32-gallery-modal__specifications {
	display: flex;
	align-items: center;
	min-width: 0;
}

.dp-arc32-gallery-modal__table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	text-align: left;
}

.dp-arc32-gallery-modal__table th,
.dp-arc32-gallery-modal__table td {
	padding: 13px 12px;
	border-bottom: 1px solid rgba(255, 255, 255, .15);
	font-size: .95rem;
	line-height: 1.4;
	vertical-align: top;
	background: transparent;
	transition: color .35s ease, background-color .35s ease,
		box-shadow .35s ease;
}

.dp-arc32-gallery-modal__table tr:last-child th,
.dp-arc32-gallery-modal__table tr:last-child td {
	border-bottom: 0;
}

.dp-arc32-gallery-modal__table th {
	width: 43%;
	color: #86868b;
	font-weight: 500;
}

.dp-arc32-gallery-modal__table td {
	color: #f5f5f7;
	font-weight: 600;
}

.dp-arc32-gallery-modal__table tr:hover th,
.dp-arc32-gallery-modal__table tr:hover td {
	background: rgba(255, 255, 255, .065);
	box-shadow: inset 0 1px rgba(255, 255, 255, .04),
		inset 0 -1px rgba(255, 255, 255, .04);
}

.dp-arc32-gallery-modal__table tr:hover th {
	color: #c7c7cc;
}

.dp-arc32-gallery-modal__value,
.dp-arc32-gallery-modal__value-alt,
.dp-arc32-gallery-modal__note {
	display: block;
	overflow-wrap: anywhere;
}

.dp-arc32-gallery-modal__value-alt,
.dp-arc32-gallery-modal__note {
	margin-top: 3px;
	color: #86868b;
	font-size: .85rem;
	font-weight: 500;
}

@media (min-width: 768px) {
	.dp-arc32-gallery-modal__dialog {
		display: flex;
		flex-direction: column;
		height: min(calc(100svh - 56px), 760px);
		overflow: hidden;
	}

	.dp-arc32-gallery-modal__grid {
		flex: 1 1 auto;
		min-height: 0;
	}

	.dp-arc32-gallery-modal__schematic,
	.dp-arc32-gallery-modal__viewport {
		min-height: 0;
	}

	/* No `max-height: 100%` override here: the viewport is now shrink-to-fit,
	 * so a percentage would resolve against an indefinite height and drop the
	 * cap entirely. The base min(58svh, 480px) already clears the tallest
	 * dialog this breakpoint produces. */

	.dp-arc32-gallery-modal__specifications {
		min-height: 0;
		overflow-y: auto;
	}
}

@media (min-width: 1024px) and (max-height: 699px) {
	#dedicated-product.dp-page--arc32 .dp-arc32-hero__stage {
		--arc32-safe-top: calc(var(--renewal-main-nav-height, 5.3125rem) + 8px);
	}

	#dedicated-product.dp-page--arc32 .dp-arc32-hero__cabinet,
	#dedicated-product.dp-page--arc32 .dp-arc32-hero--has-cta .dp-arc32-hero__cabinet {
		max-height: calc(100svh - var(--arc32-safe-top) - 76px);
	}

}

@media (max-width: 1023px) {
	#dedicated-product.dp-page--arc32 .dp-arc32-hero {
		height: auto;
	}

	#dedicated-product.dp-page--arc32 .dp-arc32-hero__stage {
		--arc32-safe-top: calc(var(--renewal-main-nav-height, 5.3125rem) + 4px);
		position: relative;
		top: auto;
		height: auto;
		min-height: 0;
		overflow: visible;
	}

	#dedicated-product.dp-page--arc32 .dp-arc32-hero__visual {
		position: relative;
		display: block;
		height: calc(var(--arc32-scene-height, var(--arc32-compact-viewport-height, 100svh)) + var(--arc32-scroll-distance, 608px));
		min-height: var(--arc32-scene-height, var(--arc32-compact-viewport-height, 100svh));
	}

	#dedicated-product.dp-page--arc32 .dp-arc32-hero__product {
		position: sticky;
		inset: auto;
		top: 0;
		width: 100%;
		min-height: var(--arc32-scene-height, var(--arc32-compact-viewport-height, 100svh));
		padding: var(--arc32-safe-top) clamp(20px, 6vw, 48px) 20px;
		transform: none;
	}

	#dedicated-product.dp-page--arc32 .dp-arc32-hero__cabinet-wrap {
		justify-content: center;
		padding-left: 0;
	}

	#dedicated-product.dp-page--arc32 .dp-arc32-hero__final-copy {
		position: absolute;
		inset: 0 auto 0 clamp(20px, 6vw, 48px);
		display: flex;
		width: min(calc(36vw - clamp(20px, 6vw, 48px) - 8px), 300px);
		margin: 0;
		/* Lift applies across the whole compact branch, not just phones — the
		 * 768-1023px band previously got none and sat on the cabinet's midline.
		 * Halved by the centred flex box, as on desktop. The 320px ceiling only
		 * engages above ~962px of viewport height, so phone sizes are unchanged. */
		padding: var(--arc32-safe-top) 0 clamp(200px, 26svh, 320px);
		justify-content: center;
		text-align: center;
		will-change: opacity;
	}

	#dedicated-product.dp-page--arc32 .dp-arc32-hero__final-title {
		font-size: clamp(min(32px, var(--arc32-final-title-max)), 8.5vw, var(--arc32-final-title-max));
		max-width: none;
		white-space: nowrap;
		overflow-wrap: normal;
	}

	#dedicated-product.dp-page--arc32 .dp-arc32-hero__final-subtitle {
		font-size: clamp(min(17px, var(--arc32-final-subtitle-max)), 4.25vw, var(--arc32-final-subtitle-max));
		white-space: normal;
		overflow-wrap: anywhere;
	}

	#dedicated-product.dp-page--arc32 .dp-arc32-hero__media {
		top: 0;
		right: auto;
		bottom: auto;
		left: 0;
		width: 100%;
		height: var(--arc32-scene-height, var(--arc32-compact-viewport-height, 100svh));
	}

		#dedicated-product.dp-page--arc32 .dp-arc32-specs {
			position: relative;
			top: auto;
			bottom: auto;
			right: auto;
			left: auto;
			width: min(100% - 48px, 292px);
			margin: clamp(32px, 7vw, 56px) auto clamp(48px, 9vw, 80px);
			opacity: 0;
		transform: none;
	}

		#dedicated-product.dp-page--arc32 .dp-arc32-specs__thumb {
			height: auto;
			aspect-ratio: 2660 / 2558;
	}

	body .dp-arc32-hero__toggle {
		position: fixed;
		top: 97px;
		right: clamp(20px, 6vw, 48px);
		left: auto;
	}

}

@media (max-width: 1023px) {
	#dedicated-product.dp-page--arc32 .dp-arc32-hero__final-copy {
		position: relative;
		inset: auto;
		grid-row: 1;
		align-self: start;
		justify-self: stretch;
		width: 100%;
		padding: 0;
		justify-content: flex-start;
		text-align: center;
	}
	#dedicated-product.dp-page--arc32 .dp-arc32-hero__final-heading-row {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		min-width: 0;
		max-width: 100%;
		padding-inline: 0;
		text-align: center;
	}
	#dedicated-product.dp-page--arc32 .dp-arc32-hero__final-title,
	#dedicated-product.dp-page--arc32 .dp-arc32-hero__final-subtitle,
	#dedicated-product.dp-page--arc32 .dp-arc32-hero__subcta {
		display: block;
		max-width: 100%;
		white-space: normal;
		overflow-wrap: break-word;
		word-break: normal;
	}
	#dedicated-product.dp-page--arc32 .dp-arc32-hero__final-title {
		margin: 0;
		font-size: clamp(34px, 10.25vw, 44px);
		line-height: .98;
		white-space: nowrap;
		text-align: center;
	}
	#dedicated-product.dp-page--arc32 .dp-arc32-hero__final-subtitle {
		margin: 8px 0 6px;
		font-size: clamp(16px, 4.4vw, 19px);
		line-height: 1.2;
		text-align: center;
	}
	#dedicated-product.dp-page--arc32 .dp-arc32-hero__subcta {
		margin: 0;
		max-width: 36ch;
		font-size: clamp(11px, 3vw, 13px);
		line-height: 1.5;
		letter-spacing: .005em;
		text-align: center;
	}

	#dedicated-product.dp-page--arc32 .dp-arc32-hero__product {
		display: grid;
		grid-template-rows: auto minmax(0, 1fr) auto;
		align-items: stretch;
		justify-items: center;
		height: var(--arc32-scene-height, var(--arc32-compact-viewport-height, 100svh));
		padding: var(--arc32-safe-top) 16px max(6px, env(safe-area-inset-bottom));
	}
	#dedicated-product.dp-page--arc32 .dp-arc32-hero__cabinet-wrap {
		grid-row: 2;
		align-self: stretch;
		justify-content: center;
		width: 100%;
		height: 100%;
		max-height: none;
		padding: 0;
	}
	#dedicated-product.dp-page--arc32 .dp-arc32-hero__cabinet,
	#dedicated-product.dp-page--arc32 .dp-arc32-hero--has-final-copy .dp-arc32-hero__cabinet,
	#dedicated-product.dp-page--arc32 .dp-arc32-hero--has-final-copy.dp-arc32-hero--has-cta .dp-arc32-hero__cabinet {
		max-width: min(86vw, 430px);
		max-height: 100%;
	}
	#dedicated-product.dp-page--arc32 .dp-arc32-hero.is-cabinet-size-locked .dp-arc32-hero__cabinet {
		flex: none;
		width: var(--arc32-compact-cabinet-width);
		height: var(--arc32-compact-cabinet-height);
		max-width: none;
		max-height: none;
	}
	#dedicated-product.dp-page--arc32 .dp-arc32-hero__cta {
		position: relative;
		inset: auto;
		grid-row: 3;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-top: 4px;
		transform: none;
	}

	#dedicated-product.dp-page--arc32 .dp-arc32-hero__media-el {
		object-position: center center;
	}

	#dedicated-product.dp-page--arc32 .dp-arc32-hero.is-media-docked .dp-arc32-hero__media-el {
		/* The measured cabinet aperture is slightly wider than 16:9. Cover keeps
		 * every edge filled while the media layer clips the sub-pixel excess. */
		object-fit: cover;
	}

	.dp-arc32-gallery-modal {
		padding: 12px;
		/* `safe` centring: centre while the dialog fits, but fall back to
		   flex-start the moment it does not, so the overflow can only ever go off
		   the BOTTOM. Plain `center` splits the overflow both ways, which puts the
		   title and the close button above the viewport where they cannot be
		   reached or scrolled to. Browsers without `safe` alignment ignore the
		   whole value and keep the `center` below it. */
		align-items: center;
		align-items: safe center;
	}
	.dp-arc32-gallery-modal__dialog {
		/* vh first, svh second. These were svh-only, and because a fixed `height`
		   was being set (not just a cap), an engine that does not resolve `svh`
		   dropped BOTH declarations — leaving the dialog to grow to its content,
		   overflow the flex container and get centre-clipped at the top. The vh
		   pair is the floor every engine understands; svh refines it where the
		   dynamic toolbar makes vh too tall. */
		height: calc(100vh - 24px);
		max-height: calc(100vh - 24px);
		height: calc(100svh - 24px);
		max-height: calc(100svh - 24px);
		padding: 24px 18px 20px;
		border-radius: 16px;
	}

	/* Deliberately NOT made sticky: the close control is an absolutely positioned
	   sibling of the header, anchored to the dialog's top-right corner. Turning it
	   sticky would re-resolve those offsets against the scroll container and pull
	   it out of the corner. With the height cap above restored, the dialog is
	   bounded by the viewport and its header is on screen the moment it opens,
	   which is what was actually broken. */

	.dp-arc32-gallery-modal__close {
		top: 14px;
		right: 14px;
		width: 40px;
		height: 40px;
	}

	.dp-arc32-gallery-modal__header {
		padding-inline: 48px;
	}

	.dp-arc32-gallery-modal__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

		.dp-arc32-gallery-modal__schematic {
			min-height: min(52svh, 360px);
		}

	.dp-arc32-gallery-modal__image {
		max-height: min(43svh, 310px);
	}

	}

@media (max-width: 767px) {
	#dedicated-product.dp-page--arc32 .dp-arc32-hero__product {
		--arc32-mobile-stack-gap: clamp(8px, 1.3svh, 12px);
		row-gap: var(--arc32-mobile-stack-gap);
	}

	#dedicated-product.dp-page--arc32 .dp-arc32-hero__cta {
		margin-top: 0;
	}

	body > .dp-arc32-hero__toggle[data-arc32-toggle] {
		top: 89px;
		width: 44px;
		height: 44px;
	}
	body > .dp-arc32-hero__toggle[data-arc32-toggle] .dp-arc32-hero__icon {
		display: none !important;
	}
	body > .dp-arc32-hero__toggle[data-arc32-toggle]::before,
	body > .dp-arc32-hero__toggle[data-arc32-toggle]::after {
		content: '';
		position: absolute;
		top: 12px;
		width: 5px;
		height: 20px;
		border-radius: 2px;
		background: currentColor;
	}
	body > .dp-arc32-hero__toggle[data-arc32-toggle]::before { left: 15px; }
	body > .dp-arc32-hero__toggle[data-arc32-toggle]::after { right: 15px; }
	body > .dp-arc32-hero__toggle[data-arc32-toggle].is-paused::before {
		top: 11px;
		left: 17px;
		width: 0;
		height: 0;
		border-top: 11px solid transparent;
		border-bottom: 11px solid transparent;
		border-left: 17px solid currentColor;
		border-radius: 0;
		background: transparent;
	}
	body > .dp-arc32-hero__toggle[data-arc32-toggle].is-paused::after {
		display: none;
	}

	#dedicated-product.dp-page--arc32 .dp-arc32-hero__final-heading-row {
		max-width: 480px;
		padding: 6px 0 4px;
		font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
	}

	#dedicated-product.dp-page--arc32 .dp-arc32-hero__final-title {
		font-size: 34px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: -.02em;
	}

	#dedicated-product.dp-page--arc32 .dp-arc32-hero__final-subtitle {
		margin: 3px 0 8px;
		color: #f5f5f7;
		font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
		font-size: 14px;
		font-weight: 500;
		line-height: 1.2;
		letter-spacing: 0;
	}

	#dedicated-product.dp-page--arc32 .dp-arc32-hero__subcta {
		display: flex;
		justify-content: center;
		width: 100%;
		max-width: 100%;
		margin: 0 0 4px;
		font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
		line-height: 1;
	}

	#dedicated-product.dp-page--arc32 .dp-arc32-hero__spec-card {
		justify-content: center;
		max-width: 100%;
		white-space: normal;
		text-align: center;
	}

	#dedicated-product.dp-page--arc32 .dp-arc32-hero__spec-text {
		min-width: 0;
		color: #86868b;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0;
	}
}

@media (max-width: 520px) {
	.dp-arc32-gallery-modal__table {
		border-collapse: separate;
	}

	.dp-arc32-gallery-modal__table tr {
		display: block;
		border-bottom: 1px solid rgba(255, 255, 255, .15);
	}

	.dp-arc32-gallery-modal__table tr:last-child {
		border-bottom: 0;
	}

	.dp-arc32-gallery-modal__table th,
	.dp-arc32-gallery-modal__table td {
		display: block;
		width: 100%;
		border-bottom: 0;
	}

	/* A tap leaves :hover sticky on mobile browsers. The desktop treatment
	   draws an inset edge on each cell; once th/td stack, those two edges meet
	   in the middle of the highlighted row. Keep the background, not the seam. */
	.dp-arc32-gallery-modal__table tr:hover th,
	.dp-arc32-gallery-modal__table tr:hover td {
		box-shadow: none;
	}

	.dp-arc32-gallery-modal__table th {
		padding: 10px 10px 3px;
		border-bottom: 0;
		border-radius: 0;
	}

	.dp-arc32-gallery-modal__table td {
		padding: 0 10px 10px;
		border-radius: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	#dedicated-product.dp-page--arc32 .dp-arc32-hero__cabinet {
		display: block;
		opacity: 1;
	}

	#dedicated-product.dp-page--arc32 .dp-arc32-hero__cta,
	#dedicated-product.dp-page--arc32 .dp-arc32-hero__final-copy,
	#dedicated-product.dp-page--arc32 .dp-arc32-specs {
		opacity: 1;
		pointer-events: auto;
	}

		#dedicated-product.dp-page--arc32 .dp-arc32-specs__trigger,
		#dedicated-product.dp-page--arc32 .dp-arc32-specs__thumb-image,
		#dedicated-product.dp-page--arc32 .dp-arc32-specs__trigger-hint,
		#dedicated-product.dp-page--arc32 .dp-arc32-specs__trigger-hint-arrow,
		.dp-arc32-gallery-modal,
		.dp-arc32-gallery-modal__dialog,
		.dp-arc32-gallery-modal__pill-indicator {
			transition: none;
			animation: none;
		}
}

@media (prefers-reduced-motion: reduce) and (max-width: 1023px) {
	#dedicated-product.dp-page--arc32 .dp-arc32-hero__visual {
		height: 100svh;
	}

	#dedicated-product.dp-page--arc32 .dp-arc32-specs {
		transform: none;
	}
}

/* ======================================================================
   SYSTEM — desktop above-fold technical diagram, Benefits-style Highlights,
   and centered Showcase heading. Compact layouts restore the ARC-32 portrait
   stack so the diagram follows the centered hero art in normal flow.
   ====================================================================== */
#dedicated-product.dp-page--system .dp-showcase__title,
#dedicated-product.dp-page--system .dp-showcase__title.dp-reveal,
#dedicated-product.dp-page--system .dp-showcase__title:has(+ .dp-showcase__tabs) {
	text-align: center;
}

/* The hero's technical panel is positioned, sized and revealed by
   css/dedicated-product-system.css, which owns the scroll-driven hero. Only the
   shared .dp-arc32-specs appearance above is reused here. */

#dedicated-product.dp-page--system .dp-syshl {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: clamp(64px, 8vw, 112px) 0;
	background: linear-gradient(180deg, #030303 0%, #121212 100%);
}

.dp-system-gallery-modal__placeholder {
	width: min(58%, 320px);
	height: auto;
	fill: none;
	stroke: rgba(255, 255, 255, .42);
	stroke-width: 2;
}

/* The System hero — its runway, sticky stage, typography and every responsive
   branch — lives in css/dedicated-product-system.css. */

@media (max-width: 767px) {
	#dedicated-product.dp-page--system .dp-syshl {
		padding-top: clamp(36px, 10vw, 48px);
		padding-bottom: 0;
	}
	#dedicated-product.dp-page--system .dp-showcase {
		padding-top: clamp(36px, 10vw, 48px);
	}
}

@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
	#dedicated-product.dp-page--arc32 .dp-arc32-hero__stage {
		--arc32-safe-top: 18px;
		height: calc(100svh - var(--renewal-main-nav-height, 5.3125rem));
	}

	#dedicated-product.dp-page--arc32 .dp-arc32-hero {
		height: auto;
	}
}

/* ======================================================================
   HIGHLIGHTS -- Apple-style static-imagery showcase.

   The ARC32 controller owns activation, autoplay and pagination so the section
   stays isolated from unrelated page sliders.
   ====================================================================== */
#dedicated-product.dp-page--arc32 .dp-hl {
	margin: 0;
	/* Top pad is tokenised so the hero->Highlights divider can centre itself
	 * in exactly this value. */
	padding: var(--dp-hl-pad-top) 0 clamp(80px, 9vw, 132px);
	background: linear-gradient(180deg, #030303 0%, #121212 100%);
	overflow-x: clip; /* contains the edge-to-edge track on narrow viewports */
	overflow-y: visible;
	opacity: 1;
	contain: layout style;
}

#dedicated-product.dp-page--arc32 .dp-hl__header {
	width: 100%;
	max-width: var(--dp-baseline-max);
	margin: 0 auto clamp(24px, 3vw, 40px);
	padding: 0 var(--dp-margin);
	text-align: center;
}

#dedicated-product.dp-page--arc32 .dp-hl__heading {
	margin: 0;
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: #fff;
	text-align: center;
}

#dedicated-product.dp-page--arc32 .dp-hl__subtitle {
	margin: 10px 0 0;
	max-width: 62ch;
	font-size: clamp(14px, 1.2vw, 17px);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.68);
	text-align: left;
}

/* The rail bleeds to the viewport. Its heading, cards and chevrons retain
   their own bounded geometry, so widening the lane does not enlarge media or
   pull interactive controls away from the shared content column. */
#dedicated-product.dp-page--arc32 .dp-hl__slider {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding: 18px 0;
	overflow-x: clip;
	overflow-y: visible;
	touch-action: pan-y pinch-zoom;
}

@media (min-width: 768px) {
	#dedicated-product.dp-page--arc32:not(.dp-page--system) .dp-hl {
		padding-bottom: clamp(52px, 6vw, 88px);
	}
	#dedicated-product.dp-page--arc32:not(.dp-page--system) .dp-hl + .dp-showcase {
		padding-top: clamp(28px, 4vw, 48px);
	}
}

#dedicated-product.dp-page--arc32 .dp-hl__track {
	gap: clamp(12px, 1.4vw, 24px);
	padding: 0 var(--dp-margin);
	scroll-padding-left: var(--dp-margin);
	will-change: auto;
	touch-action: pan-y pinch-zoom;
	/* Shared carousel motion. The old .28s cubic-bezier(.22,1,.36,1) covered
	   ~830px in 256ms with a near-vertical opening slope, which is what made the
	   incoming slide look slingshot in. Duration is written by
	   dedicated-product-arc32.js from the same sqrt-of-distance law the JS
	   carousels use, so all three sections move at one speed. */
	transition: transform var(--dp-hl-duration, 820ms) var(--dp-carousel-ease);
	backface-visibility: hidden;
}

#dedicated-product.dp-page--arc32 .dp-hl__track.is-moving {
	will-change: transform;
}

#dedicated-product.dp-page--arc32 .dp-hl .exa-slider__dock {
	padding-bottom: clamp(28px, 4vw, 52px);
}

#dedicated-product.dp-page--arc32 .dp-hl__slide {
	flex-basis: min(62%, 900px);
	border-radius: clamp(12px, 1.2vw, 20px);
	background: #0b0b0b;
	/* Softer than the engine default (0.92/1.05) so the edge-to-edge track
	   reads as elegant scaling rather than a pronounced pop. */
	transform: scale(0.95);
	opacity: 0.45;
	transition: opacity .28s cubic-bezier(.22,1,.36,1), transform .28s cubic-bezier(.22,1,.36,1), box-shadow .52s cubic-bezier(.22,1,.36,1);
	contain: paint style;
}

#dedicated-product.dp-page--arc32 .dp-hl__slide.exa-slider__slide--active {
	transform: scale(1);
	opacity: 1;
}

/* The editor's media scale is layout size, not transform — matching exA Stage
   and Location. A transformed image is composited and resampled by the GPU,
   which is what left this section's line art jagged in Chrome while other
   engines stayed clean. The frame centres its child and clips the overflow, so
   a scale above 100% still zooms from the centre. */
/* Highlights keeps the shared engine's `cursor: grab` (assets/css/exa.css).
   This section used to force `cursor: default` on the slide, frame and media on
   the grounds that the grab hand over-advertised the artwork. That override is
   gone by request: dragging does work here — the comment that introduced it said
   so — and hiding a working affordance is what made this carousel feel different
   from the About Products one it is meant to match. */

#dedicated-product.dp-page--arc32 .dp-hl__frame {
	display: flex;
	align-items: center;
	justify-content: center;
}
#dedicated-product.dp-page--arc32 .dp-hl__media {
	object-fit: cover;
	flex: none;
	max-width: none;
	max-height: none;
	width: calc(100% * var(--dp-hl-media-scale, 1));
	height: calc(100% * var(--dp-hl-media-scale, 1));
}

#dedicated-product.dp-page--arc32 .dp-hl__frame--contain .dp-hl__media {
	object-fit: contain;
}

@media (hover: hover) and (pointer: fine) {
	#dedicated-product.dp-page--arc32 .dp-hl__slide.exa-slider__slide--active .dp-hl__frame {
		transform: scale(1);
		transform-origin: center center;
		transition: transform .52s cubic-bezier(.22,1,.36,1);
		will-change: auto;
	}
	#dedicated-product.dp-page--arc32 .dp-hl__slide.exa-slider__slide--active:hover,
	#dedicated-product.dp-page--arc32 .dp-hl__slide.exa-slider__slide--active:focus-within {
		box-shadow: 0 14px 34px rgba(0,0,0,.36);
		z-index: 5;
	}
	/* Hover zoom removed by request. Leaving `transform: none` here (rather than
	   deleting the rule) also keeps the frame off the compositor on hover, which
	   is what preserves Chrome's high-quality image downscale. */
	#dedicated-product.dp-page--arc32 .dp-hl__slide.exa-slider__slide--active:hover .dp-hl__frame,
	#dedicated-product.dp-page--arc32 .dp-hl__slide.exa-slider__slide--active:focus-within .dp-hl__frame {
		transform: none;
		will-change: auto;
	}
	#dedicated-product.dp-page--arc32 .dp-hl__slide.exa-slider__slide--active .dp-hl__frame--contain,
	#dedicated-product.dp-page--arc32 .dp-hl__slide.exa-slider__slide--active:hover .dp-hl__frame--contain,
	#dedicated-product.dp-page--arc32 .dp-hl__slide.exa-slider__slide--active:focus-within .dp-hl__frame--contain {
		transform: none;
		will-change: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	#dedicated-product.dp-page--arc32 .dp-hl__slide .dp-hl__frame {
		transition: none !important;
		transform: none !important;
	}
}

/* Copy-only slides remain visible while editors finish selecting imagery.
   The reserved frame prevents CLS and makes the saved content immediately
   verifiable on the public page instead of silently suppressing the section. */
#dedicated-product.dp-page--arc32 .dp-hl__media-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #171719 0%, #080809 72%);
}

/* Caption deck -- gradient scrim keeps type legible over any photography. */
#dedicated-product.dp-page--arc32 .dp-hl__body {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	padding: clamp(20px, 3vw, 40px);
	background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.42) 55%, transparent 100%);
	opacity: 0;
	transition: opacity .38s cubic-bezier(.2,.8,.2,1);
	pointer-events: none;
}

/* The shared slider only exposes these controls at a narrow portrait
   breakpoint. Highlights needs true edge controls at every viewport. */
#dedicated-product.dp-page--arc32 .dp-hl .exa-slider__inline-nav {
	position: absolute;
	/* Plain 50% of .exa-slider__media-stage. --arc32-highlight-nav-y was written
	   by the retired ARC-32 highlights controller (active slide centre); with that
	   controller stood down the variable is never set, and the fallback was
	   resolving against a box that now also contains the dock. */
	top: 50%;
	z-index: 8;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 50%;
	background: rgba(255,255,255,.16);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	color: rgba(255,255,255,.82);
	cursor: pointer;
	transform: translateY(-50%);
	touch-action: manipulation;
	transition: background-color .25s ease, color .25s ease, opacity .25s ease, transform .35s cubic-bezier(.4,0,.2,1);
}
#dedicated-product.dp-page--arc32 .dp-hl .exa-slider__inline-nav:hover,
#dedicated-product.dp-page--arc32 .dp-hl .exa-slider__inline-nav:focus-visible {
	background: rgba(255,255,255,.26);
	color: #fff;
	outline: none;
	transform: translateY(-50%) scale(1.06);
}
#dedicated-product.dp-page--arc32 .dp-hl .exa-slider__inline-nav:active {
	transform: translateY(-50%) scale(.96);
}
/* The slider track is deliberately full-bleed, but its chevrons are controls,
   not media — they must stay on the shared content column instead of riding the
   viewport edge. Without the gutter offset they sat 30px from the browser edge
   at any width, drifting further from the content the wider the display got.
   --dp-column-gutter is 0 at or below the column width, so this is a no-op on
   ordinary screens. */
#dedicated-product.dp-page--arc32 .dp-hl .exa-slider__inline-nav--prev {
	left: calc(var(--dp-column-gutter) + clamp(10px, 2vw, 30px));
}
#dedicated-product.dp-page--arc32 .dp-hl .exa-slider__inline-nav--next {
	right: calc(var(--dp-column-gutter) + clamp(10px, 2vw, 30px));
}
#dedicated-product.dp-page--arc32 .dp-hl .exa-slider__inline-nav-icon {
	width: 24px;
	height: 24px;
	stroke-width: 2.5;
}

@media (prefers-reduced-motion: no-preference) {
	#dedicated-product.dp-page--arc32 .dp-hl .dp-reveal {
		transform: translate3d(0, 28px, 0);
		transition-duration: .6s;
	}
	#dedicated-product.dp-page--arc32 .dp-hl .dp-reveal.is-in-view {
		/* Settles to `none`, not translate3d(0,0,0): an identity transform still
		   promotes the card to a composited layer, and every image inside it is
		   then GPU-resampled with a fast bilinear filter — the same downscale
		   fault that was fixed on the images themselves. `none` releases the
		   layer once the entrance has played. */
		transform: none;
	}
	#dedicated-product.dp-page--arc32 .dp-hl .dp-reveal.is-out-above {
		transform: translate3d(0, -24px, 0);
		transition-duration: .35s;
	}
}

#dedicated-product.dp-page--arc32 .dp-hl__slide.exa-slider__slide--active .dp-hl__body {
	opacity: 1;
	pointer-events: auto;
}

#dedicated-product.dp-page--arc32 .dp-hl__caption {
	margin: 0;
	font-size: clamp(17px, 1.8vw, 24px);
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}

#dedicated-product.dp-page--arc32 .dp-hl__desc {
	margin: 8px 0 0;
	max-width: 52ch;
	font-size: clamp(13px, 1vw, 15px);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
}

#dedicated-product.dp-page--arc32 .dp-hl__cta {
	display: inline-block;
	margin-top: 14px;
	padding: 8px 18px;
	border-radius: 999px;
	background: var(--dp-accent);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.25s ease, transform 0.25s ease;
}

#dedicated-product.dp-page--arc32 .dp-hl__cta:hover,
#dedicated-product.dp-page--arc32 .dp-hl__cta:focus-visible {
	background: var(--dp-accent-2);
	transform: translateY(-1px);
}

/* Tablet: widen the slide so the neighbour still peeks without shrinking the
   active frame past a comfortable reading size. */
@media (max-width: 1024px) {
	#dedicated-product.dp-page--arc32 .dp-hl__slide {
		flex-basis: 78%;
	}
}

/* Mobile: near-full-width slides, captions always visible (there is no hover
   affordance on touch), and the scrim tightened up. */
@media (max-width: 767px) {
	#dedicated-product.dp-page--arc32 .dp-arc32-specs {
		margin-bottom: 0;
	}
	#dedicated-product.dp-page--arc32 .dp-hl {
		padding-top: var(--dp-hl-pad-top);
		padding-bottom: 0;
	}
	#dedicated-product.dp-page--arc32 .dp-hl .exa-slider__dock {
		padding-bottom: 0;
	}
	#dedicated-product.dp-page--arc32 .dp-hl + .dp-showcase {
		padding-top: clamp(36px, 10vw, 48px);
	}
	#dedicated-product.dp-page--arc32 .dp-hl + .dp-showcase:has(.dp-showcase__tabs) {
		margin-top: 0;
	}
	#dedicated-product.dp-page--arc32 .dp-showcase__title:has(+ .dp-showcase__tabs),
	#dedicated-product.dp-page--arc32 .dp-showcase__title.dp-reveal:has(+ .dp-showcase__tabs) {
		margin-top: 0;
	}
	#dedicated-product.dp-page--arc32 .dp-hl__slide {
		flex-basis: 86%;
		transform: scale(1);
		opacity: 0.6;
	}
	#dedicated-product.dp-page--arc32 .dp-hl__body {
		opacity: 1;
		pointer-events: auto;
		padding: 16px;
	}
	#dedicated-product.dp-page--arc32 .dp-hl__desc {
		display: block;
		overflow: visible;
	}
	#dedicated-product.dp-page--arc32 .dp-hl .exa-slider__inline-nav {
		/* Plain 50% of .exa-slider__media-stage. --arc32-highlight-nav-y was written
	   by the retired ARC-32 highlights controller (active slide centre); with that
	   controller stood down the variable is never set, and the fallback was
	   resolving against a box that now also contains the dock. */
	top: 50%;
		width: 48px;
		height: 48px;
		bottom: auto;
	}
	#dedicated-product.dp-page--arc32 .dp-hl .exa-slider__inline-nav--prev {
		left: 8px;
		transform: translateY(-50%);
	}
	#dedicated-product.dp-page--arc32 .dp-hl .exa-slider__inline-nav--next {
		right: 8px;
		transform: translateY(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	#dedicated-product.dp-page--arc32 .dp-hl {
		opacity: 1;
		transform: none;
	}
	#dedicated-product.dp-page--arc32 .dp-hl__header,
	#dedicated-product.dp-page--arc32 .dp-hl__slider {
		transition-duration: var(--dp-hl-duration, 700ms);
	}
	#dedicated-product.dp-page--arc32 .dp-hl__slide,
	#dedicated-product.dp-page--arc32 .dp-hl__track,
	#dedicated-product.dp-page--arc32 .dp-hl__body,
	#dedicated-product.dp-page--arc32 .dp-hl__cta {
		transition: none;
	}
}

/* ======================================================================
   LOCATION CONSIDERATION
   ARC32-only, scroll-snapped modular media cards.
   ====================================================================== */
#dedicated-product.dp-page--arc32 .dp-location {
	overflow: hidden;
	padding: clamp(64px, 8vw, 112px) 0;
	background: var(--dp-surface);
	color: var(--dp-text);
	font-family: var(--dp-font);
}
#dedicated-product.dp-page--arc32 .dp-location__inner {
	width: 100%;
	max-width: var(--dp-content-max);
	margin-inline: auto;
	padding-inline: var(--dp-margin);
}
#dedicated-product.dp-page--arc32 .dp-location__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(28px, 3vw, 40px);
}
#dedicated-product.dp-page--arc32 .dp-location__title {
	min-width: 0;
	margin: 0;
	font-family: var(--dp-font);
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
}
#dedicated-product.dp-page--arc32 .dp-location__title strong {
	font: inherit;
	color: inherit;
}
#dedicated-product.dp-page--arc32 a.dp-location__headlink {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 5px;
	color: var(--dp-accent);
	font-size: clamp(14px, 1.2vw, 17px);
	line-height: 1.4;
	text-decoration: none;
	transition: color .25s ease, opacity .25s ease;
}
#dedicated-product.dp-page--arc32 a.dp-location__headlink:hover,
#dedicated-product.dp-page--arc32 a.dp-location__headlink:focus-visible {
	color: #fff;
	text-decoration: underline;
}
#dedicated-product.dp-page--arc32 .dp-location__carousel {
	position: relative;
	margin-right: calc(var(--dp-margin) * -1);
}
#dedicated-product.dp-page--arc32 .dp-location__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(300px, 29vw, 400px);
	gap: clamp(16px, 1.7vw, 24px);
	overflow-x: auto;
	overflow-y: hidden;
	padding: 0 var(--dp-margin) 8px 0;
	scroll-padding-left: 0;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-inline: contain;
	/* Location touch is deliberately native. Allow both axes so Chrome and
	   Firefox can hand a horizontal gesture to this overflow rail while a
	   vertical gesture continues scrolling the document. The JS controller is
	   limited to mouse/pen for this rail. */
	touch-action: pan-x pan-y pinch-zoom;
}
#dedicated-product.dp-page--arc32 .dp-location__track::-webkit-scrollbar {
	display: none;
}
#dedicated-product.dp-page--arc32 .dp-location__track:focus-visible {
	outline: 2px solid var(--dp-accent);
	outline-offset: 6px;
}
#dedicated-product.dp-page--arc32 .dp-location.is-transform-carousel .dp-location__carousel {
	overflow: hidden;
	touch-action: pan-y pinch-zoom;
}
#dedicated-product.dp-page--arc32 .dp-location.is-transform-carousel .dp-location__track {
	overflow: visible;
	scroll-snap-type: none;
	touch-action: pan-y pinch-zoom;
	will-change: transform;
}
#dedicated-product.dp-page--arc32 .dp-location__card {
	min-width: 0;
	margin: 0;
	scroll-snap-align: center;
}
#dedicated-product.dp-page--arc32 .dp-location__media {
	position: relative;
	width: 100%;
	aspect-ratio: 5 / 6;
	margin-bottom: 22px;
	border-radius: clamp(20px, 2vw, 28px);
	overflow: hidden;
	background: #161617;
	isolation: isolate;
}
#dedicated-product.dp-page--arc32 .dp-location__media img,
#dedicated-product.dp-page--arc32 .dp-location__media video,
#dedicated-product.dp-page--arc32 .dp-location__media-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* The editor's media scale is applied as layout size, not transform — the same
   change made for exA Stage. A transformed image is promoted to a composited
   layer and resampled by the GPU with a fast bilinear filter, which is what
   aliased fine artwork in Chrome while other engines stayed clean. Sizing the
   box instead lets the image rasterise once at its final size. The media box
   centres its child and clips the overflow, so a scale above 100% still zooms
   from the centre. */
#dedicated-product.dp-page--arc32 .dp-location__media {
	display: flex;
	align-items: center;
	justify-content: center;
}
#dedicated-product.dp-page--arc32 .dp-location__media img,
#dedicated-product.dp-page--arc32 .dp-location__media video {
	flex: none;
	max-width: none;
	max-height: none;
	width: calc(100% * var(--dp-location-media-scale, 1));
	height: calc(100% * var(--dp-location-media-scale, 1));
}
#dedicated-product.dp-page--arc32 .dp-location__media--contain img,
#dedicated-product.dp-page--arc32 .dp-location__media--contain video {
	object-fit: contain;
}
#dedicated-product.dp-page--arc32 .dp-location__card:nth-child(3n+1) .dp-location__media-placeholder {
	background: linear-gradient(135deg, #211f2a 0%, #09090b 100%);
}
#dedicated-product.dp-page--arc32 .dp-location__card:nth-child(3n+2) .dp-location__media-placeholder {
	background: linear-gradient(135deg, #321b1b 0%, #0f0909 100%);
}
#dedicated-product.dp-page--arc32 .dp-location__card:nth-child(3n) .dp-location__media-placeholder {
	background: linear-gradient(135deg, #1d2b27 0%, #09100e 100%);
}
/* Hover zoom removed by request. The media now holds its resting size on hover,
   which also keeps these images off the compositor — see the sizing rule above. */
#dedicated-product.dp-page--arc32 .dp-location__caption {
	min-width: 0;
	padding-right: 16px;
	color: var(--dp-text-soft);
	font-size: clamp(15px, 1.2vw, 17px);
	line-height: 1.55;
	overflow-wrap: anywhere;
}
#dedicated-product.dp-page--arc32 .dp-location__card-title {
	display: block;
	margin: 0 0 .22em;
	color: var(--dp-text);
	font-family: 'Montserrat-Bold', var(--dp-font);
	font-size: 1em;
	font-weight: 600;
	line-height: 1.45;
}
#dedicated-product.dp-page--arc32 .dp-location__description,
#dedicated-product.dp-page--arc32 .dp-location__description p {
	display: block;
	margin: 0;
	color: inherit;
	font: inherit;
}
#dedicated-product.dp-page--arc32 .dp-location__description p + p,
#dedicated-product.dp-page--arc32 .dp-location__description ul + p,
#dedicated-product.dp-page--arc32 .dp-location__description p + ul {
	margin-top: .75em;
}
#dedicated-product.dp-page--arc32 .dp-location__description ul {
	display: block;
	margin: .5em 0 0 1.2em;
}
#dedicated-product.dp-page--arc32 .dp-location__description a {
	color: var(--dp-accent);
}
#dedicated-product.dp-page--arc32 .dp-location__nav {
	position: absolute;
	top: var(--dp-location-nav-y, 240px);
	z-index: 5;
	display: none;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	color: rgba(255, 255, 255, .82);
	cursor: pointer;
	transform: translateY(-50%) scale(1);
	transition: background-color .25s ease, color .25s ease, opacity .25s ease, transform .35s cubic-bezier(.4, 0, .2, 1);
}
#dedicated-product.dp-page--arc32 .dp-location__nav:hover,
#dedicated-product.dp-page--arc32 .dp-location__nav:focus-visible {
	background: rgba(255, 255, 255, .26);
	color: #fff;
	transform: translateY(-50%) scale(1.06);
}
#dedicated-product.dp-page--arc32 .dp-location__nav:active {
	transform: translateY(-50%) scale(.96);
}
#dedicated-product.dp-page--arc32 .dp-location__nav:disabled {
	opacity: .28;
	cursor: default;
}
#dedicated-product.dp-page--arc32 .dp-location__nav svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
#dedicated-product.dp-page--arc32 .dp-location__nav--prev { left: 20px; }
#dedicated-product.dp-page--arc32 .dp-location__nav--next { right: calc(var(--dp-margin) + 20px); }

#dedicated-product.dp-page--arc32 .dp-location__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px var(--dp-margin) 0 0;
}
#dedicated-product.dp-page--arc32 .dp-location__pagination-well {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 36px;
	padding: 0 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
}
#dedicated-product.dp-page--arc32 .dp-location__pip {
	position: relative;
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .35);
	cursor: pointer;
	transition: width .3s cubic-bezier(.4, 0, .2, 1), height .3s cubic-bezier(.4, 0, .2, 1), background-color .3s ease, transform .25s ease;
}
#dedicated-product.dp-page--arc32 .dp-location__pip:hover,
#dedicated-product.dp-page--arc32 .dp-location__pip:focus-visible {
	background: rgba(255, 255, 255, .72);
	transform: scale(1.12);
}
#dedicated-product.dp-page--arc32 .dp-location__pip.is-active {
	width: 12px;
	height: 12px;
	background: #fff;
}

@media (prefers-reduced-motion: no-preference) {
	#dedicated-product.dp-page--arc32 .dp-location .dp-reveal {
		transform: translate3d(0, 28px, 0);
		transition-duration: .6s;
	}
	#dedicated-product.dp-page--arc32 .dp-location .dp-reveal.is-in-view {
		/* Settles to `none`, not translate3d(0,0,0): an identity transform still
		   promotes the card to a composited layer, and every image inside it is
		   then GPU-resampled with a fast bilinear filter — the same downscale
		   fault that was fixed on the images themselves. `none` releases the
		   layer once the entrance has played. */
		transform: none;
	}
	#dedicated-product.dp-page--arc32 .dp-location .dp-reveal.is-out-above {
		transform: translate3d(0, -24px, 0);
		transition-duration: .35s;
	}
}

@media (max-width: 768px) {
	#dedicated-product.dp-page--arc32 .dp-location__title {
		font-size: clamp(26px, 7vw, 36px);
	}
	#dedicated-product.dp-page--arc32 .dp-location__header {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
	}
	#dedicated-product.dp-page--arc32 .dp-location__carousel {
		margin-right: calc(var(--dp-margin) * -1);
	}
	#dedicated-product.dp-page--arc32 .dp-location__track {
		grid-auto-columns: min(82vw, 320px);
		gap: 16px;
		padding-right: var(--dp-margin);
	}
	#dedicated-product.dp-page--arc32 .dp-location__media {
		aspect-ratio: 14 / 17;
		margin-bottom: 16px;
		border-radius: 20px;
	}
	#dedicated-product.dp-page--arc32 .dp-location__caption {
		padding-right: 8px;
		font-size: 14px;
	}
	#dedicated-product.dp-page--arc32 .dp-location__nav {
		width: 48px;
		height: 48px;
	}
	#dedicated-product.dp-page--arc32 .dp-location__nav--prev {
		left: 8px;
	}
	#dedicated-product.dp-page--arc32 .dp-location__nav--next {
		right: calc(var(--dp-margin) + 8px);
	}
	#dedicated-product.dp-page--arc32 .dp-location__pagination {
		padding-right: var(--dp-margin);
	}
}

/* Location chevrons are phone-only. At 768px the tablet layout keeps the
   uncluttered native rail; portrait phones receive the same control affordance
   as Highlights and exA Stage. */
@media (max-width: 767px) {
	#dedicated-product.dp-page--arc32 .dp-location__nav {
		display: inline-flex;
	}
}

/* ==========================================================================
   exA Stage
   Sits between Showcase-Features and Location Consideration. One full-width
   slide at a time, so the track does NOT bleed off the right edge the way the
   Location rail does — hence no negative margin and no --dp-margin offset on
   the next chevron. Nav buttons and pips are otherwise value-for-value
   identical to .dp-location so the two sections read as one system.
   ========================================================================== */
#dedicated-product.dp-page--arc32 .dp-stage {
	--dp-stage-card-surface: #141416;
	--dp-stage-card-border: rgba(255, 255, 255, .08);

	/* Everything the section needs on screen BESIDES the media, so the media can
	   be sized from what is actually left over.
	 *
	 * The two docked bars come first: arriving from the sub-nav parks the
	 * section's content at exactly their combined height (this section's
	 * scroll-margin-top cancels its own top seam), so that band is never
	 * available. The 295px is the measured rest of the card — the section
	 * heading and its margin (~73), the caption at its deepest (~150, which is a
	 * two-line description plus the padding it was just given), the track's
	 * bottom padding (4) and the control row (~61) — plus a little slack.
	 *
	 * Without this the media only tracked viewport WIDTH, so any short laptop
	 * viewport pushed the control row off the bottom of the screen: measured 49px
	 * of clipping at 1440x900 and 155px at 1366x768. */
	--dp-stage-chrome: calc(
		var(--renewal-main-nav-height, 5.3125rem) + var(--dp-subnav-h, 52px) + 8px
		+ 295px
	);
	/* Horizontal paint is contained without creating a vertical clipping
	   ancestor around variable-height slide descriptions. */
	overflow-x: clip;
	overflow-y: visible;
	padding: clamp(64px, 8vw, 112px) 0;
	background: var(--dp-surface);
	color: var(--dp-text);
	font-family: var(--dp-font);
}
#dedicated-product.dp-page--arc32 .dp-stage__inner {
	width: 100%;
	max-width: var(--dp-content-max);
	margin-inline: auto;
	padding-inline: var(--dp-margin);
}
#dedicated-product.dp-page--arc32 .dp-stage__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	/* Internal rhythm only. The section's OUTER padding is --dp-section-seam,
	   which is the shared ARC-32 module boundary and also where the divider rule
	   is painted — compacting that would desync every seam on the page and the
	   sub-nav's scroll-margin maths with it. Everything tightened for this
	   section is therefore inside the section. */
	margin-bottom: clamp(16px, 1.7vw, 24px);
}
#dedicated-product.dp-page--arc32 .dp-stage__title {
	min-width: 0;
	margin: 0;
	font-family: var(--dp-font);
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
}
#dedicated-product.dp-page--arc32 .dp-stage__title strong {
	font: inherit;
	color: inherit;
}
#dedicated-product.dp-page--arc32 a.dp-stage__headlink {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 5px;
	color: var(--dp-accent);
	font-size: clamp(14px, 1.2vw, 17px);
	line-height: 1.4;
	text-decoration: none;
	transition: color .25s ease, opacity .25s ease;
}
#dedicated-product.dp-page--arc32 a.dp-stage__headlink:hover,
#dedicated-product.dp-page--arc32 a.dp-stage__headlink:focus-visible {
	color: #fff;
	text-decoration: underline;
}
#dedicated-product.dp-page--arc32 .dp-stage__carousel {
	position: relative;
	touch-action: pan-y pinch-zoom;
}
#dedicated-product.dp-page--arc32 .dp-stage__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: clamp(16px, 1.7vw, 24px);
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 4px;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-inline: contain;
	touch-action: pan-y pinch-zoom;
}
#dedicated-product.dp-page--arc32 .dp-stage__track::-webkit-scrollbar {
	display: none;
}
#dedicated-product.dp-page--arc32 .dp-stage.is-transform-carousel .dp-stage__carousel {
	overflow: hidden;
}
#dedicated-product.dp-page--arc32 .dp-stage.is-transform-carousel .dp-stage__track {
	overflow: visible;
	scroll-snap-type: none;
	will-change: transform;
}
#dedicated-product.dp-page--arc32 .dp-stage.is-native-touch-carousel .dp-stage__carousel,
#dedicated-product.dp-page--arc32 .dp-stage.is-native-touch-carousel .dp-stage__track {
	touch-action: auto;
}
#dedicated-product.dp-page--arc32 .dp-stage__track:focus-visible {
	outline: 2px solid var(--dp-accent);
	outline-offset: 6px;
}
#dedicated-product.dp-page--arc32 .dp-stage__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	border: 1px solid var(--dp-stage-card-border);
	border-radius: clamp(20px, 2vw, 28px);
	background: var(--dp-stage-card-surface);
	/* Media owns its own crop. Keeping the card open prevents font metrics or
	   late wrapping from cutting the final description line at the radius. */
	overflow: visible;
	scroll-snap-align: center;
}
#dedicated-product.dp-page--arc32 .dp-stage__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	/* The media is the slide; the caption underneath is support. Sized so the
	   image holds the clear majority of the card at every width, which is only
	   affordable because the caption below is tuned to the copy it actually
	   carries rather than to a generic block of padding.

	   Height is bounded by the viewport as well as by width, so the whole section
	   — heading, card and control row — lands inside the screen it is read on
	   instead of running off the bottom. 540px is still the ceiling on a tall
	   display; the floor keeps the image meaningful on a very short one, at which
	   point it is the only element left that can give ground.

	   Paired with RENEWAL_DP_STAGE_BOX_H in inc/dedicated-product/meta-boxes.php,
	   which sizes the 1x derivative from the 540px ceiling. Changing that ceiling
	   without the constant reintroduces the fractional downscale it exists to
	   prevent. */
	height: clamp(280px, min(38vw, calc(100vh - var(--dp-stage-chrome))), 540px);
	/* svh, so a mobile browser's collapsing address bar cannot leave the card
	   sized for a viewport that is no longer there. Separate declaration rather
	   than a fallback inside min(): an engine without svh must keep the vh line. */
	height: clamp(280px, min(38vw, calc(100svh - var(--dp-stage-chrome))), 540px);
	background: #000;
	border-radius: clamp(19px, 2vw, 27px) clamp(19px, 2vw, 27px) 0 0;
	overflow: hidden;
	isolation: isolate;
}
#dedicated-product.dp-page--arc32 .dp-stage__media img,
#dedicated-product.dp-page--arc32 .dp-stage__media video,
#dedicated-product.dp-page--arc32 .dp-stage__media-placeholder {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
}
/* The editor's "Media scale" is applied as layout size, not transform.
   transform: scale() promotes the element to a composited layer, and Chrome
   then resamples it on the GPU with a fast bilinear filter instead of its
   high-quality downscale path — which visibly aliased the fine blueprint
   linework while Firefox and Safari looked clean. Sizing the box instead lets
   the image rasterise once at its final size. The media box centres its child
   and clips the overflow, so a scale above 100% still zooms from the centre. */
#dedicated-product.dp-page--arc32 .dp-stage__media img,
#dedicated-product.dp-page--arc32 .dp-stage__media video {
	flex: none;
	/* The theme's global `img { max-width: 100% }` would otherwise clamp the
	   horizontal half of the scale, leaving a scaled image stretched: height
	   grew, width did not. Harmless for a tall asset that `contain` fits by
	   height, wrong for a wide one. */
	max-width: none;
	max-height: none;
	width: calc(100% * var(--dp-stage-media-scale, 1));
	height: calc(100% * var(--dp-stage-media-scale, 1));
}
#dedicated-product.dp-page--arc32 .dp-stage__media--fill img,
#dedicated-product.dp-page--arc32 .dp-stage__media--fill video {
	object-fit: cover;
}
#dedicated-product.dp-page--arc32 .dp-stage__media--contain img,
#dedicated-product.dp-page--arc32 .dp-stage__media--contain video {
	object-fit: contain;
	padding: clamp(20px, 3vw, 40px);
}
#dedicated-product.dp-page--arc32 .dp-stage__media-placeholder {
	background: linear-gradient(135deg, #211f2a 0%, #09090b 100%);
}
/* Bottom container.
 *
 * Tuned to the copy it actually carries rather than to a generic block of
 * padding, so the height it takes off the media is height the text genuinely
 * needs — but with a clear row of air above the title and below the description
 * so the caption reads as its own band rather than as text crammed against the
 * media edge and the card's bottom radius. The description's leading stays set
 * for a short support paragraph rather than for long-form reading, which is
 * what keeps the band shallow even at this padding. */
#dedicated-product.dp-page--arc32 .dp-stage__caption {
	min-width: 0;
	padding: clamp(20px, 2.2vw, 32px) clamp(20px, 2.8vw, 40px);
	border-top: 1px solid rgba(255, 255, 255, .05);
	background: linear-gradient(180deg, rgba(20, 20, 22, .6) 0%, rgba(20, 20, 22, 1) 100%);
	border-radius: 0 0 clamp(19px, 2vw, 27px) clamp(19px, 2vw, 27px);
	color: var(--dp-text-soft);
	font-size: clamp(14px, 1.05vw, 15.5px);
	line-height: 1.5;
	/* `break-word`, NOT `anywhere`. Both let an unbreakable token wrap rather
	   than overflow, but `anywhere` also drops the element's min-content
	   contribution to a single character and is free to break mid-word at any
	   position — which is what shredded long tokens and unspaced Japanese runs
	   into fragments. `break-word` gives the same overflow protection while
	   still preferring real break opportunities. */
	overflow-wrap: break-word;
}
#dedicated-product.dp-page--arc32 .dp-stage__card-title {
	display: block;
	margin: 0 0 .45em;
	color: var(--dp-text);
	font-family: 'Montserrat-Bold', var(--dp-font);
	font-size: clamp(19px, 1.6vw, 24px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}
/* Descriptions fill the caption's own measure.
 *
 * These carried `max-width: 900px` while the caption's content box is 1214px at
 * a 1440 viewport, so a quarter of every line was unusable and copy broke early
 * — measured: a slide wrapping at 848px and orphaning a 200px second line that
 * had 366px of room left beside it. The cap is the constraint, not the wrapping
 * mode: `word-break` was already `normal` and nothing here sets `text-wrap:
 * balance`/`pretty`. Width is stated explicitly so a future shrink-to-fit
 * ancestor cannot reintroduce the same symptom by a different route. */
#dedicated-product.dp-page--arc32 .dp-stage__description,
#dedicated-product.dp-page--arc32 .dp-stage__description p {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	color: inherit;
	font: inherit;
}
#dedicated-product.dp-page--arc32 .dp-stage__description p + p,
#dedicated-product.dp-page--arc32 .dp-stage__description ul + p,
#dedicated-product.dp-page--arc32 .dp-stage__description p + ul {
	margin-top: .75em;
}
#dedicated-product.dp-page--arc32 .dp-stage__description ul {
	display: block;
	margin: .5em 0 0 1.2em;
	max-width: 100%;
}
#dedicated-product.dp-page--arc32 .dp-stage__description a {
	color: var(--dp-accent);
}
#dedicated-product.dp-page--arc32 .dp-stage__nav {
	position: absolute;
	top: var(--dp-stage-nav-y, 240px);
	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, .12);
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	color: rgba(255, 255, 255, .82);
	cursor: pointer;
	transform: translateY(-50%) scale(1);
	transition: background-color .25s ease, color .25s ease, opacity .25s ease, transform .35s cubic-bezier(.4, 0, .2, 1);
}
#dedicated-product.dp-page--arc32 .dp-stage__nav:hover,
#dedicated-product.dp-page--arc32 .dp-stage__nav:focus-visible {
	background: rgba(255, 255, 255, .26);
	color: #fff;
	transform: translateY(-50%) scale(1.06);
}
#dedicated-product.dp-page--arc32 .dp-stage__nav:active {
	transform: translateY(-50%) scale(.96);
}
#dedicated-product.dp-page--arc32 .dp-stage__nav:disabled {
	opacity: .28;
	cursor: default;
}
#dedicated-product.dp-page--arc32 .dp-stage__nav svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
#dedicated-product.dp-page--arc32 .dp-stage__nav--prev { left: 20px; }
#dedicated-product.dp-page--arc32 .dp-stage__nav--next { right: 20px; }

/* Control row: [ 1fr ][ CTA ][ 1fr, pagination right-aligned ].
 *
 * The CTA sits in column 2 and is therefore centred on the CAROUSEL, not on
 * whatever space the pagination leaves over — which is the whole point of the
 * three-column form over a flex row with `space-between`. The two 1fr tracks
 * are equal, so the button stays centred whether or not the pagination renders
 * (a single-slide stage has no pips) and whether or not the CTA renders.
 *
 * The CTA's visual treatment comes from its shared button class: the ARC-32
 * page uses the hero CTA, while About Products uses `.exa-shop-cta` for parity
 * with its Games, Accessories and System buttons. Only grid placement belongs
 * to the Stage component itself. */
#dedicated-product.dp-page--arc32 .dp-stage__controls {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: 16px;
	row-gap: 12px;
	padding-top: 10px;
}
#dedicated-product.dp-page--arc32 .dp-stage__cta {
	grid-column: 2;
	justify-self: center;
}
/* The dedicated-product shell gives every link an inherited white colour at
 * ID specificity. Preserve the shared shop CTA's white-to-red hover/focus
 * inversion when that component is rendered inside the Stage shell. */
#dedicated-product.dp-page--arc32 a.dp-stage__cta.exa-shop-cta {
	color: #fff;
}
#dedicated-product.dp-page--arc32 a.dp-stage__cta.exa-shop-cta:hover,
#dedicated-product.dp-page--arc32 a.dp-stage__cta.exa-shop-cta:focus-visible {
	color: #D90500;
}
#dedicated-product.dp-page--arc32 .dp-stage__pagination {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	/* The row owns the vertical rhythm now. */
	padding-top: 0;
}

/* Auto-play toggle. Values mirror .exa-slider__dock-play so the exA Stage
   control and the Highlights dock control read as the same button. */
#dedicated-product.dp-page--arc32 .dp-stage__play {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	min-width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	cursor: pointer;
	transition: background .2s ease;
}
#dedicated-product.dp-page--arc32 .dp-stage__play:hover,
#dedicated-product.dp-page--arc32 .dp-stage__play:focus-visible {
	background: rgba(255, 255, 255, .26);
}
#dedicated-product.dp-page--arc32 .dp-stage__play:focus-visible {
	outline: 2px solid var(--dp-accent);
	outline-offset: 2px;
}

/* Drag affordance. Only exA Stage opts into config.draggable, so only exA Stage
   advertises it — Location Consideration stays a wheel/trackpad rail and keeps
   the default cursor rather than promising a drag that does nothing. */
@media (hover: hover) and (pointer: fine) {
	#dedicated-product.dp-page--arc32 .dp-stage__carousel,
	#dedicated-product.dp-page--arc32 .dp-stage__track {
		cursor: grab;
	}
	#dedicated-product.dp-page--arc32 .dp-stage.is-dragging .dp-stage__carousel,
	#dedicated-product.dp-page--arc32 .dp-stage.is-dragging .dp-stage__track,
	#dedicated-product.dp-page--arc32 .dp-stage.is-dragging .dp-stage__track * {
		cursor: grabbing;
	}
	/* Kill the text/image selection flicker a horizontal drag would otherwise
	   leave behind. */
	#dedicated-product.dp-page--arc32 .dp-stage.is-dragging {
		user-select: none;
		-webkit-user-select: none;
	}
}

/* ARC-32 card typography contracts. Grouping the consumers keeps the values
   identical instead of relying on visually similar component-local rules. */
#dedicated-product.dp-page--arc32 .dp-stage__card-title,
#dedicated-product.dp-page--arc32 .dp-location__card-title,
#dedicated-product.dp-page--arc32 .dp-hl__caption {
	font-family: 'Montserrat-Bold', var(--dp-font);
	font-size: clamp(19px, 1.6vw, 24px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--dp-text);
}

#dedicated-product.dp-page--arc32 .dp-location__description,
#dedicated-product.dp-page--arc32 .dp-location__description p,
#dedicated-product.dp-page--arc32 .dp-hl__desc {
	font-family: var(--dp-font);
	font-size: clamp(15px, 1.2vw, 17px);
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: normal;
	color: var(--dp-text-soft);
}

/* Designed for Locations reference: Montserrat-Bold carries the visual weight,
   while its declared CSS weight remains 400. */
#dedicated-product.dp-page--arc32 .dp-gcar__col-title {
	font-family: 'Montserrat-Bold', Helvetica, Arial, sans-serif;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	color: #fff;
}

/* Card-title typography is the exact Choosing a Game contract. Montserrat-Bold
   supplies the visual weight; its declared CSS weight deliberately remains 400. */
#dedicated-product.dp-page--arc32 .dp-stage__card-title,
#dedicated-product.dp-page--arc32 .dp-location__card-title {
	font-family: 'Montserrat-Bold', Helvetica, Arial, sans-serif;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	color: #fff;
}

/* exA Stage descriptions are natural-flow content. These explicit reset values
   prevent a generic clamp/ellipsis rule from collapsing translated or long copy. */
#dedicated-product.dp-page--arc32 .dp-stage__description,
#dedicated-product.dp-page--arc32 .dp-stage__description p,
#dedicated-product.dp-page--arc32 .dp-stage__description li {
	display: block;
	height: auto;
	max-height: none;
	overflow: visible;
	-webkit-box-orient: initial;
	-webkit-line-clamp: unset;
	white-space: normal;
	text-overflow: clip;
	/* Natural flow: break between words, and only inside one when a single
	   token genuinely cannot fit. */
	word-break: normal;
	overflow-wrap: break-word;
}
#dedicated-product.dp-page--arc32 .dp-stage__pagination-well {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 36px;
	padding: 0 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
}
#dedicated-product.dp-page--arc32 .dp-stage__pip {
	position: relative;
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .35);
	cursor: pointer;
	transition: width .3s cubic-bezier(.4, 0, .2, 1), height .3s cubic-bezier(.4, 0, .2, 1), background-color .3s ease, transform .25s ease;
}
#dedicated-product.dp-page--arc32 .dp-stage__pip:hover,
#dedicated-product.dp-page--arc32 .dp-stage__pip:focus-visible {
	background: rgba(255, 255, 255, .72);
	transform: scale(1.12);
}
#dedicated-product.dp-page--arc32 .dp-stage__pip.is-active {
	width: 12px;
	height: 12px;
	background: #fff;
}

@media (prefers-reduced-motion: no-preference) {
	#dedicated-product.dp-page--arc32 .dp-stage .dp-reveal {
		transform: translate3d(0, 28px, 0);
		transition-duration: .6s;
	}
	#dedicated-product.dp-page--arc32 .dp-stage .dp-reveal.is-in-view {
		/* Settles to `none`, not translate3d(0,0,0): an identity transform still
		   promotes the card to a composited layer, and every image inside it is
		   then GPU-resampled with a fast bilinear filter — the same downscale
		   fault that was fixed on the images themselves. `none` releases the
		   layer once the entrance has played. */
		transform: none;
	}
	#dedicated-product.dp-page--arc32 .dp-stage .dp-reveal.is-out-above {
		transform: translate3d(0, -24px, 0);
		transition-duration: .35s;
	}
}

@media (max-width: 768px) {
	#dedicated-product.dp-page--arc32 .dp-stage__title {
		font-size: clamp(26px, 7vw, 36px);
	}
	#dedicated-product.dp-page--arc32 .dp-stage__header {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
	}
	#dedicated-product.dp-page--arc32 .dp-stage__track {
		gap: 16px;
	}
	#dedicated-product.dp-page--arc32 .dp-stage__card {
		border-radius: 20px;
	}
	#dedicated-product.dp-page--arc32 .dp-stage__media {
		/* Mobile is where the caption most easily overwhelms the image — the copy
		   that fits one line at 1440 runs to three or four here — so the media
		   gets a taller share of the viewport AND the caption below is tuned down
		   with it. Without both halves the image loses the card on a phone. */
		height: clamp(240px, 64vw, 340px);
		border-radius: 19px 19px 0 0;
	}
	#dedicated-product.dp-page--arc32 .dp-stage__media--contain img,
	#dedicated-product.dp-page--arc32 .dp-stage__media--contain video {
		padding: 20px;
	}
	#dedicated-product.dp-page--arc32 .dp-stage__caption {
		padding: 18px 20px;
		font-size: 13.5px;
		line-height: 1.45;
	}
	/* Stage only. The 1.25rem card-title contract is shared with Location
	   Consideration, but at this width it costs the stage title two lines inside
	   a container that is being asked to give its height back to the image.
	   Scoped so Location keeps its own sizing. */
	#dedicated-product.dp-page--arc32 .dp-stage__card-title {
		font-size: 1.05rem;
		line-height: 1.35;
	}
	#dedicated-product.dp-page--arc32 .dp-stage__nav {
		display: inline-flex;
		width: 48px;
		height: 48px;
	}
	#dedicated-product.dp-page--arc32 .dp-stage__nav--prev { left: 10px; }
	#dedicated-product.dp-page--arc32 .dp-stage__nav--next { right: 10px; }

	/* One column, CTA first. Below this width the 1fr side tracks would squeeze
	   the button under its own 200px minimum and force the label to wrap, so the
	   row stacks and each control centres on the card instead. Every explicit
	   grid-column from the desktop rules has to be reset here — including the
	   one the shared hero-button rule sets — or the single-column track list
	   generates phantom columns 2 and 3. */
	#dedicated-product.dp-page--arc32 .dp-stage__controls {
		grid-template-columns: 1fr;
		justify-items: center;
	}
	#dedicated-product.dp-page--arc32 .dp-stage__controls .dp-stage__cta,
	#dedicated-product.dp-page--arc32 .dp-stage__pagination {
		grid-column: 1;
		justify-self: center;
	}
	#dedicated-product.dp-page--arc32 .dp-stage__pagination {
		justify-content: center;
	}
}

@media (max-width: 767px) {
	#dedicated-product.dp-page--arc32 .dp-gcar {
		--arc32-gcar-deck-logo-gap: clamp(28px, 8vw, 40px);
		--arc32-gcar-logo-rows-gap: clamp(24px, 7vw, 36px);
	}
	#dedicated-product.dp-page--arc32 .dp-gcar__brand {
		margin: 0 0 var(--arc32-gcar-logo-rows-gap);
	}
}

@media (prefers-reduced-motion: reduce) {
	#dedicated-product.dp-page--arc32 .dp-location__media img,
	#dedicated-product.dp-page--arc32 .dp-location__media video,
	#dedicated-product.dp-page--arc32 .dp-location__media-placeholder,
	#dedicated-product.dp-page--arc32 .dp-location__nav,
	#dedicated-product.dp-page--arc32 .dp-location__pip,
	#dedicated-product.dp-page--arc32 a.dp-location__headlink {
		transition: none;
	}
}

/* One section-transition rhythm replaces the former 134–272px jumps between
 * ARC-32 modules. Internal component spacing is unchanged; only the empty
 * boundary space after the final control and before the next heading is reset. */
@media (min-width: 768px) {
	#dedicated-product.dp-page--arc32 .dp-hl .exa-slider__dock {
		padding-bottom: 0;
	}

	#dedicated-product.dp-page--arc32:not(.dp-page--system) .dp-hl {
		padding-bottom: var(--dp-section-seam);
	}

	#dedicated-product.dp-page--arc32:not(.dp-page--system) .dp-hl + .dp-showcase {
		padding-top: var(--dp-section-seam);
	}

	#dedicated-product.dp-page--arc32 .dp-showcase {
		padding-bottom: var(--dp-section-seam);
	}

	#dedicated-product.dp-page--arc32 .dp-location,
	#dedicated-product.dp-page--arc32 .dp-stage {
		padding-top: var(--dp-section-seam);
		padding-bottom: var(--dp-section-seam);
	}

	#dedicated-product.dp-page--arc32 .dp-gcar {
		padding-top: var(--dp-section-seam);
		padding-bottom: clamp(56px, 5vw, 72px);
	}

	/* System parity. Showcase -> Choosing a Game -> bottom hero already inherit
	 * the ARC-32 rules above; these close the two boundaries the System page
	 * owns on its own — Highlights -> Game Cartridges -> Showcase Features —
	 * which were still carrying the untightened 112px/80px/72px paddings. */
	/* The +18px that used to sit here compensated for a grid that ended flush
	 * while ARC-32's Highlights got trailing space from its slider dock. This
	 * section now carries the same dock, so it takes the shared seam and the
	 * two pages agree without a correction. */
	#dedicated-product.dp-page--system .dp-syshl {
		padding-bottom: clamp(28px, 2.5vw, 36px);
	}

	#dedicated-product.dp-page--system .dp-cartridges {
		padding-top: clamp(28px, 2.5vw, 36px);
		padding-bottom: clamp(28px, 2.5vw, 36px);
	}

	#dedicated-product.dp-page--system .dp-showcase {
		padding-top: clamp(28px, 2.5vw, 36px);
	}
}

@media (max-width: 767px) {
	#dedicated-product.dp-page--arc32:not(.dp-page--system) .dp-hl {
		padding-bottom: var(--dp-section-seam);
	}

	#dedicated-product.dp-page--arc32:not(.dp-page--system) .dp-hl + .dp-showcase {
		padding-top: var(--dp-section-seam);
	}

	#dedicated-product.dp-page--arc32 .dp-showcase,
	#dedicated-product.dp-page--arc32 .dp-location,
	#dedicated-product.dp-page--arc32 .dp-stage {
		padding-bottom: var(--dp-section-seam);
	}

	#dedicated-product.dp-page--arc32 .dp-location,
	#dedicated-product.dp-page--arc32 .dp-stage {
		padding-top: var(--dp-section-seam);
	}

	#dedicated-product.dp-page--arc32 .dp-gcar {
		padding-top: var(--dp-section-seam);
		padding-bottom: 48px;
	}

	/* System parity at the mobile rhythm. */
	#dedicated-product.dp-page--system .dp-syshl {
		padding-bottom: 24px;
	}

	#dedicated-product.dp-page--system .dp-cartridges {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	#dedicated-product.dp-page--system .dp-showcase {
		padding-top: 24px;
	}
}

/* Showcase-Features parity: ARC-32 and EXA Arcadia System share the same
 * frosted overlapping controls and the same non-overlapping mobile flow. */
#dedicated-product.dp-page--arc32 .dp-showcase__item {
	position: relative;
	z-index: 4;
	background: linear-gradient(180deg, rgba(56, 56, 60, .78), rgba(38, 38, 42, .74));
	border: 0;
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	color: #fff;
}
#dedicated-product.dp-page--arc32 .dp-showcase__item:hover,
#dedicated-product.dp-page--arc32 .dp-showcase__item:focus-visible,
#dedicated-product.dp-page--arc32 .dp-showcase__item.is-active,
#dedicated-product.dp-page--arc32 .dp-showcase__item.is-active:hover {
	background: linear-gradient(180deg, rgba(56, 56, 60, .78), rgba(38, 38, 42, .74));
	border: 0;
}

#dedicated-product.dp-page--arc32 .dp-showcase__icon {
	background: transparent;
}

#dedicated-product.dp-page--arc32 .dp-showcase__nav {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
#dedicated-product.dp-page--arc32 .dp-showcase__layout.is-engaged .dp-showcase__nav {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* The shared compact Showcase layout pins its title and panel to opacity:1 so
 * its internal rail never flashes during card changes. On ARC-32 that also
 * overrode the page-level dp-reveal contract, leaving two whole sections
 * permanently visible after their observer state correctly changed. Restore
 * only the outer reveal layer; the cards' own swap transitions remain intact. */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
	#dedicated-product.dp-page--arc32 .dp-showcase__title.dp-reveal,
	#dedicated-product.dp-page--arc32 .dp-showcase__panel.dp-reveal {
		opacity: 0;
		transform: translate3d(0, 28px, 0);
	}

	#dedicated-product.dp-page--arc32 .dp-showcase__title.dp-reveal.is-in-view,
	#dedicated-product.dp-page--arc32 .dp-showcase__panel.dp-reveal.is-in-view {
		opacity: 1;
		transform: none;
	}

	#dedicated-product.dp-page--arc32 .dp-showcase__title.dp-reveal.is-out-above,
	#dedicated-product.dp-page--arc32 .dp-showcase__panel.dp-reveal.is-out-above {
		opacity: 0;
		transform: translate3d(0, -24px, 0);
	}
}
#dedicated-product.dp-page--arc32 .dp-showcase__nav-btn,
#dedicated-product.dp-page--arc32 .dp-showcase__nav-btn:disabled,
#dedicated-product.dp-page--arc32 .dp-showcase__nav-btn[aria-disabled="true"] {
	background: linear-gradient(180deg, rgba(56, 56, 60, .78), rgba(38, 38, 42, .74));
	border: 0;
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
}
#dedicated-product.dp-page--arc32 .dp-showcase__nav-btn:disabled,
#dedicated-product.dp-page--arc32 .dp-showcase__nav-btn[aria-disabled="true"] {
	color: rgba(255, 255, 255, .38);
	opacity: .62;
}

#dedicated-product.dp-page--arc32 .dp-showcase__label,
#dedicated-product.dp-page--arc32 .dp-showcase__desc,
#dedicated-product.dp-page--arc32 .dp-showcase__desc-title {
	color: #fff;
	opacity: 1;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	#dedicated-product.dp-page--arc32 .dp-showcase__item { background: rgba(20, 20, 22, .92); }
}

@media (max-width: 768px) {
	#dedicated-product.dp-page--arc32 .dp-showcase:has(.dp-showcase__tabs) {
		margin-top: 0;
	}
	#dedicated-product.dp-page--arc32 .dp-showcase__title:has(+ .dp-showcase__tabs),
	#dedicated-product.dp-page--arc32 .dp-showcase__title.dp-reveal:has(+ .dp-showcase__tabs) {
		margin-top: 0;
	}
	#dedicated-product.dp-page--arc32 .dp-showcase__tabs {
		position: relative;
		margin: 0 auto 20px;
	}
	#dedicated-product.dp-page--arc32 #dp-section-showcase .dp-showcase__controls {
		position: relative;
		margin-top: 0;
	}
	#dedicated-product.dp-page--arc32 #dp-section-showcase .dp-showcase__row-head,
	#dedicated-product.dp-page--arc32 #dp-section-showcase .dp-showcase__item.is-active .dp-showcase__row-head,
	#dedicated-product.dp-page--arc32 #dp-section-showcase .dp-showcase__layout.is-engaged .dp-showcase__item.is-active .dp-showcase__body {
		background: linear-gradient(180deg, rgba(56, 56, 60, .78), rgba(38, 38, 42, .74));
		border: 0;
		-webkit-backdrop-filter: blur(20px) saturate(180%);
		backdrop-filter: blur(20px) saturate(180%);
	}
	#dedicated-product.dp-page--arc32 .dp-showcase__item,
	#dedicated-product.dp-page--arc32 .dp-showcase__item:hover,
	#dedicated-product.dp-page--arc32 .dp-showcase__item:focus-visible,
	#dedicated-product.dp-page--arc32 .dp-showcase__item.is-active {
		background: transparent;
		border: 0;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	#dedicated-product.dp-page--arc32 .dp-showcase__nav {
		display: none;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
	#dedicated-product.dp-page--arc32 .dp-showcase__layout.is-engaged .dp-showcase__nav {
		display: block;
		opacity: 1;
		visibility: visible;
		pointer-events: none;
	}
	#dedicated-product.dp-page--arc32 .dp-showcase__nav-btn {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
	#dedicated-product.dp-page--arc32 .dp-showcase__layout.is-engaged .dp-showcase__nav-btn {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
	#dedicated-product.dp-page--arc32 .dp-showcase__nav-btn:disabled,
	#dedicated-product.dp-page--arc32 .dp-showcase__nav-btn[aria-disabled="true"] {
		pointer-events: none;
	}
	/* The active mobile feature is one glass card. Its inner body no longer
	 * paints a second rounded surface inside the parent container. */
	#dedicated-product.dp-page--arc32 .dp-showcase__layout.is-engaged .dp-showcase__item.is-active {
		background: linear-gradient(180deg, rgba(56, 56, 60, .78), rgba(38, 38, 42, .74));
		border-radius: 24px;
		overflow: hidden;
		-webkit-backdrop-filter: blur(20px) saturate(180%);
		backdrop-filter: blur(20px) saturate(180%);
	}
	#dedicated-product.dp-page--arc32 #dp-section-showcase .dp-showcase__layout.is-engaged .dp-showcase__item.is-active .dp-showcase__body {
		background: transparent;
		border-radius: 0;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* Custom percentages are measured against, and centred within, the right
 * pane. Values above 100% intentionally grow around that pane's centre. */
#dedicated-product.dp-page--arc32 .dp-showcase__default-host {
	position: absolute;
	inset: 0;
}
#dedicated-product.dp-page--arc32 .dp-showcase__media.is-custom .dp-showcase__media-host,
#dedicated-product.dp-page--arc32 .dp-showcase__media.is-custom .dp-showcase__default-host {
	top: 50%;
	right: auto;
	bottom: auto;
	left: 50%;
	width: var(--dp-showcase-media-width, 50%);
	height: var(--dp-showcase-media-width, 50%);
	transform: translate3d(-50%, -50%, 0);
}
#dedicated-product.dp-page--arc32 .dp-showcase__media.is-custom.allows-vertical-overflow .dp-showcase__media-host,
#dedicated-product.dp-page--arc32 .dp-showcase__media.is-custom.allows-vertical-overflow .dp-showcase__default-host {
	top: 50%;
	bottom: auto;
}
#dedicated-product.dp-page--arc32 .dp-showcase__media.is-full .dp-showcase__media-host,
#dedicated-product.dp-page--arc32 .dp-showcase__media.is-full .dp-showcase__default-host {
	inset: 0;
	width: 100%;
	height: auto;
	transform: none;
}
#dedicated-product.dp-page--arc32 .dp-showcase__media.is-full:not(.allows-vertical-overflow) .dp-showcase__media-host > *,
#dedicated-product.dp-page--arc32 .dp-showcase__media.is-full:not(.allows-vertical-overflow) .dp-showcase__default-media {
	object-fit: cover;
}

@media (min-width: 1024px) {
	#dedicated-product.dp-page--arc32 .dp-showcase__media.is-custom {
		left: auto;
		right: 0;
		width: 52%;
	}
}