/* ======================================================================
   Dedicated Product SYSTEM — static locked-state hero.

   The former scroll finale is now the only hero state. The section remains in
   normal document flow at every breakpoint; JavaScript only measures the media
   ratio and the desktop SVG callouts.
   ====================================================================== */

#dedicated-product.dp-page--system .dp-system-hero {
	--dp-system-callout-deck: 50;
	--dp-system-callout-deck-left: -2;
	--dp-system-callout-deck-right: 102;
	--dp-system-grid-max: 100rem;
	--dp-system-shell: 1000px;
	--dp-system-side-lane: clamp(170px, 13.5vw, 190px);
	--dp-system-vector-lane: clamp(72px, 7vw, 112px);
	--dp-system-caption-allowance: 13.5rem;
	--dp-system-stage-pad-bottom: clamp(24px, 3vh, 44px);
	--dp-system-static-top: clamp(38px, 5vh, 60px);
	--dp-system-stage-max: 62rem;
	position: relative;
	background: var(--dp-bg, #000);
}

#dedicated-product.dp-page--system .dp-system-hero__stage {
	position: relative;
	width: 100%;
}

#dedicated-product.dp-page--system .dp-system-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(24px, 6vw, 40px);
	width: 100%;
	max-width: var(--dp-system-grid-max);
	margin: 0 auto;
	padding:
		calc(var(--dp-subnav-h, 56px) + clamp(28px, 7vw, 52px))
		var(--dp-margin)
		clamp(40px, 10vw, 72px);
}

#dedicated-product.dp-page--system .dp-system-hero__col {
	min-width: 0;
}

#dedicated-product.dp-page--system .dp-system-hero__col--center {
	display: flex;
	align-items: center;
	justify-content: center;
}

#dedicated-product.dp-page--system .dp-system-hero__frame {
	display: block;
	width: min(100%, 46rem);
	max-width: calc(100% * var(--dp-system-media-scale-factor, 1));
	aspect-ratio: var(--dp-system-frame-ratio, 1.56);
	margin-inline: auto;
}

#dedicated-product.dp-page--system .dp-system-hero__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

#dedicated-product.dp-page--system .dp-system-hero__media-el {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	filter: brightness(1) contrast(1.05);
}

#dedicated-product.dp-page--system .dp-system-hero__caption {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	text-align: center;
}

#dedicated-product.dp-page--system .dp-system-hero__title {
	margin: 0;
	color: #fff;
	font-family: "Montserrat-Bold", Helvetica, Arial, sans-serif;
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1.1;
	letter-spacing: normal;
	text-shadow: 0 10px 28px rgba(0, 0, 0, .4);
}

#dedicated-product.dp-page--system .dp-system-hero__subtitle {
	margin: max(1rem, clamp(10px, 1.2vw, 16px)) 0 0;
	max-width: none;
	color: #86868b;
	font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: clamp(.95rem, 1.8vw, 1.25rem);
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: -.01em;
}

#dedicated-product.dp-page--system .dp-system-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(12px, 1.4vw, 16px);
	margin-top: clamp(18px, 5vw, 28px);
}

#dedicated-product.dp-page--system .dp-system-hero__ctas .dp-btn:only-child {
	min-width: 11rem;
	width: auto;
	max-width: 100%;
	padding-inline: clamp(36px, 3vw, 48px);
}

#dedicated-product.dp-page--system .dp-system-hero-specs {
	position: relative;
	inset: auto;
	width: min(100% - 48px, 292px);
	max-width: none;
	margin: clamp(32px, 7vw, 56px) auto 0;
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

#dedicated-product.dp-page--system .dp-system-hero-specs .dp-arc32-specs__trigger-title {
	white-space: normal;
}

#dedicated-product.dp-page--system .dp-system-hero-specs__placeholder {
	width: 56%;
	height: auto;
	fill: none;
	stroke: rgba(255, 255, 255, .38);
	stroke-width: 2;
}

#dedicated-product.dp-page--system .dp-system-hero__callouts {
	display: none;
}

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

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

/* Desktop restores the resolved locked geometry: the hardware occupies the
   upper band, the identity/CTA sits directly beneath it, and the specification
   panel hangs at the right of that lower row. */
@media (min-width: 1024px) {
	#dedicated-product.dp-page--system .dp-system-hero__stage {
		/* Preserve the viewport-filling composition on ordinary desktops without
		   letting browser zoom or very tall displays create thousands of empty CSS
		   pixels below the content, whose own media geometry is intentionally capped. */
		min-height: min(
			calc(100svh - var(--renewal-main-nav-height, 5.3125rem)),
			var(--dp-system-stage-max)
		);
	}

	#dedicated-product.dp-page--system .dp-system-hero__grid {
		position: relative;
		z-index: 7;
		max-width: none;
		grid-template-columns:
			minmax(0, var(--dp-system-side-lane))
			minmax(0, 1fr)
			minmax(0, var(--dp-system-side-lane));
		grid-template-rows: auto auto;
		min-height: inherit;
		align-content: start;
		align-items: center;
		column-gap: clamp(18px, 2.2vw, 32px);
		row-gap: 0;
		padding-block: var(--dp-system-static-top) var(--dp-system-stage-pad-bottom);
		padding-inline: max(12px, calc((100% - var(--dp-system-shell)) / 2));
	}

	#dedicated-product.dp-page--system .dp-system-hero__col--center {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	#dedicated-product.dp-page--system .dp-system-hero__frame {
		width: 100%;
		max-width: min(
			calc(100% - (2 * var(--dp-system-vector-lane))),
			calc(100% * var(--dp-system-media-scale-factor, 1)),
			calc(
				(
					100svh
					- var(--renewal-main-nav-height, 5.3125rem)
					- var(--dp-system-static-top)
					- var(--dp-system-stage-pad-bottom)
					- var(--dp-system-caption-allowance)
				) * var(--dp-system-frame-ratio, 1.56)
				* var(--dp-system-media-scale-factor, 1)
			)
		);
	}

	#dedicated-product.dp-page--system .dp-system-hero__caption {
		grid-column: 2;
		grid-row: 2;
		align-items: center;
		margin-top: clamp(28px, 3.4vw, 56px);
		text-align: center;
	}

	#dedicated-product.dp-page--system .dp-system-hero__ctas {
		flex-wrap: nowrap;
		justify-content: center;
		width: max-content;
		max-width: none;
		margin-top: clamp(18px, 2vw, 26px);
	}

	#dedicated-product.dp-page--system .dp-system-hero__col--right {
		grid-column: 3;
		grid-row: 2;
		align-self: stretch;
		position: relative;
		display: block;
	}

	#dedicated-product.dp-page--system .dp-system-hero__col--right .dp-system-hero-specs {
		position: absolute;
		right: 0;
		bottom: 0;
		width: clamp(154px, 12.5vw, 176px);
		max-width: none;
		margin: 0;
	}

	#dedicated-product.dp-page--system .dp-system-hero__callouts {
		position: absolute;
		top: calc(-1 * var(--renewal-main-nav-height, 5.3125rem));
		right: 0;
		bottom: auto;
		left: 0;
		z-index: 6;
		display: block;
		width: 100%;
		height: calc(100% + var(--renewal-main-nav-height, 5.3125rem));
		opacity: 0;
		pointer-events: none;
	}

	#dedicated-product.dp-page--system .dp-system-hero__callouts.is-callouts-unmeasured {
		display: none;
	}

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

	#dedicated-product.dp-page--system .dp-system-hero__callout {
		fill: none;
		stroke-width: 1.5px;
		stroke-linecap: round;
		vector-effect: non-scaling-stroke;
		stroke-dasharray: var(--dp-system-callout-length, 800);
		stroke-dashoffset: var(--dp-system-callout-length, 800);
	}

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

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

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

	/* Once the entrance completes, commit the dash to its final geometry and
	   detach the forwards-filled draw animation. Only opacity continues to pulse;
	   returning after long off-screen compositor culling can no longer restore a
	   stale dash phase or make either connector appear to run backwards. */
	#dedicated-product.dp-page--system .dp-system-hero.is-callouts-drawn .dp-system-hero__callout.is-callout-settled {
		stroke-dashoffset: 0;
		animation: dp-system-callout-pulse 3s ease-in-out infinite;
		animation-delay: 0s;
	}
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
	#dedicated-product.dp-page--system .dp-system-hero__callout,
	#dedicated-product.dp-page--system .dp-system-hero.is-callouts-drawn .dp-system-hero__callout {
		animation: none;
		stroke-dashoffset: 0;
	}
}

/* Tall portrait desktops and long tablets use the compact stack. This prevents
   the narrow axis from squeezing the resolved desktop lanes. */
@media (min-width: 1024px) and (max-aspect-ratio: 4 / 5) {
	#dedicated-product.dp-page--system .dp-system-hero__stage {
		min-height: 0;
	}

	#dedicated-product.dp-page--system .dp-system-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(24px, 3.5vh, 40px);
		max-width: var(--dp-system-grid-max);
		padding:
			calc(var(--dp-subnav-h, 56px) + clamp(28px, 5vh, 56px))
			var(--dp-margin)
			clamp(40px, 6vh, 72px);
	}

	#dedicated-product.dp-page--system .dp-system-hero__col--center,
	#dedicated-product.dp-page--system .dp-system-hero__col--right,
	#dedicated-product.dp-page--system .dp-system-hero__caption {
		grid-column: 1;
		grid-row: auto;
	}

	#dedicated-product.dp-page--system .dp-system-hero__frame {
		width: min(100%, 46rem);
		max-width: calc(100% * var(--dp-system-media-scale-factor, 1));
	}

	#dedicated-product.dp-page--system .dp-system-hero__caption {
		margin-top: 0;
		align-items: center;
		text-align: center;
	}

	#dedicated-product.dp-page--system .dp-system-hero__col--right {
		display: flex;
		justify-content: center;
	}

	#dedicated-product.dp-page--system .dp-system-hero__col--right .dp-system-hero-specs {
		position: relative;
		inset: auto;
		width: clamp(154px, 12.5vw, 176px);
		max-width: 100%;
		margin: clamp(32px, 5vh, 56px) auto 0;
	}

	#dedicated-product.dp-page--system .dp-system-hero__callouts {
		display: none;
	}
}

@media (max-width: 767px) {
	/* JavaScript holds this state whenever a phone is at the page-top boundary.
	   The panel keeps its layout space so each hide/reveal cycle can animate
	   without shifting the hero or the content below. */
	#dedicated-product.dp-page--system .dp-system-hero.is-mobile-specs-pending .dp-system-hero-specs {
		opacity: 0 !important;
		pointer-events: none !important;
		transform: translate3d(0, 48px, 0) !important;
	}

	#dedicated-product.dp-page--system .dp-system-hero__subtitle {
		overflow-wrap: anywhere;
	}

	#dedicated-product.dp-page--system .dp-system-hero__grid {
		padding-bottom: clamp(28px, 8vw, 40px);
	}
}

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
	#dedicated-product.dp-page--system .dp-system-hero-specs {
		transition:
			opacity .9s cubic-bezier(.2, .65, .2, 1),
			transform .9s cubic-bezier(.2, .65, .2, 1);
	}
}

/* ======================================================================
   System content modules — Highlights cards and ARC-32 divider rhythm
   ====================================================================== */

/* ----------------------------------------------------------------------
   Highlights carousel.

   Structure and controls come from the shared `.exa-slider` engine
   (assets/css/exa.css + assets/js/exa.js) so the dock and chevrons are the
   same objects About Products uses. Everything below is the Apple
   "Get the highlights" card geometry layered on top: one wide card with the
   media bled to its edges and the title floating over it.

   The previous presentation — an `.exa-features__grid` of 16:9 cards with a
   bordered caption footer — is gone entirely. `.exa-features` itself is NOT
   dead: template-parts/exa/feature-block.php still uses it on About Products,
   which is why every rule here is scoped to `.dp-syshl`.
   ---------------------------------------------------------------------- */

#dedicated-product.dp-page--system .dp-syshl {
	/* ---- Sharpness budget -------------------------------------------------
	   The card is never allowed to paint the artwork across more device pixels
	   than the file actually has. --dp-syshl-src-w / --dp-syshl-src-h are the
	   media's real dimensions, written by the template; --dp-syshl-dpr is the
	   screen density, resolved by the media queries below. Dividing one by the
	   other gives the largest card that still maps 1:1 or better.

	   Both axes matter because object-fit: cover scales by whichever needs
	   more, so the height ceiling is converted back into a width through the
	   aspect ratio and takes part in the same min(). Without that a tall card
	   on a narrow screen crops — and quietly enlarges — the artwork.

	   Defaults keep a section with unmeasurable media on the design size. */
	--dp-syshl-dpr: 1;
	--dp-syshl-w-cap: calc(var(--dp-syshl-src-w, 4400) * 1px / var(--dp-syshl-dpr));
	--dp-syshl-h-cap: calc(var(--dp-syshl-src-h, 2600) * 1px / var(--dp-syshl-dpr));

	/* The design targets, overridden per breakpoint. They carry their own
	   viewport clamp so a breakpoint can restate the shape without having to
	   restate the sharpness budget. */
	--dp-syshl-design-w: min(1100px, calc(100vw - 6rem));
	--dp-syshl-design-h: min(650px, 78vh);

	/* Cropping is allowed; enlarging is not. Cover paints
	   max(width, height x aspect) across the card, so each axis is capped both
	   by its own budget and by what the other axis implies through the aspect
	   ratio. Within those bounds the card is free to be any shape. */
	--dp-syshl-card-w: min(
		var(--dp-syshl-design-w),
		var(--dp-syshl-w-cap),
		calc(var(--dp-syshl-h-cap) * var(--dp-syshl-card-ar, 1.6923))
	);
	--dp-syshl-card-h: min(
		var(--dp-syshl-design-h),
		var(--dp-syshl-h-cap),
		calc(var(--dp-syshl-w-cap) / var(--dp-syshl-card-ar, 1.6923))
	);
	--dp-syshl-radius: 28px;
	--dp-syshl-gap: 20px;
	--dp-syshl-peek: 76px;
	--dp-syshl-ease: cubic-bezier(0.22, 1, 0.36, 1);
	font-family: 'Montserrat', sans-serif;
}

/* Density tiers for the sharpness budget above. A 2x screen may only paint
   half the source across the card, a 3x screen a third. */
@media (min-resolution: 1.5dppx) {
	#dedicated-product.dp-page--system .dp-syshl { --dp-syshl-dpr: 2; }
}

@media (min-resolution: 2.5dppx) {
	#dedicated-product.dp-page--system .dp-syshl { --dp-syshl-dpr: 3; }
}

#dedicated-product.dp-page--system .dp-syshl__header {
	width: 100%;
}

/* Held 1:1 with #dedicated-product.dp-page .dp-cartridges__title in
   css/game-cartridges.css — the two headings sit one section apart, so any
   drift between them is visible in a single scroll. The heading owns its own
   max-width and padding for exactly that reason; the header wrapper stays
   transparent rather than imposing the narrower carousel lane. */
#dedicated-product.dp-page--system .dp-syshl__heading {
	max-width: var(--dp-content-max, none);
	margin: 0 auto clamp(28px, 4vw, 48px);
	padding: 0 1.25rem;
	color: var(--dp-text, #fff);
	font-family: var(--dp-font);
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	text-align: center;
}

/* Release the engine's 80rem default on desktop so the track can bleed to the
   viewport. Card width and source-pixel budgets remain bounded independently;
   the phone-specific lane cap below is intentionally retained. */
#dedicated-product.dp-page--system .dp-syshl__slider {
	width: 100%;
	max-width: none;
	/* Auto margins are inert at full width and keep the existing phone cap
	   centred when the max-width: calc(100vw - 40px) rule takes effect. */
	margin-inline: auto;
}

#dedicated-product.dp-page--system .dp-syshl__track {
	gap: var(--dp-syshl-gap);
}

/* The engine ships 16:9 at 55% width with a 0.92/1.05 scale swing. This card
   is fixed-size and deliberately does not scale: at 1100px wide a 1.05 active
   scale would push both neighbours out of the lane and resample the media. */
#dedicated-product.dp-page--system .dp-syshl__slide {
	flex: 0 0 var(--dp-syshl-card-w);
	width: var(--dp-syshl-card-w);
	height: var(--dp-syshl-card-h);
	aspect-ratio: auto;
	border-radius: var(--dp-syshl-radius);
	background: #161617;
	opacity: 0.4;
	/* The engine scales its slides 0.92 -> 1.05 between resting and active. This
	   card must stay at exactly 1: at 1100px wide a 1.05 active scale resamples
	   the artwork on the GPU, which is visible as softness on a HiDPI screen,
	   and the media is already the limiting factor for sharpness. Written as an
	   explicit `none` rather than left to another property to override, because
	   that is how it silently came back once. */
	transform: none;
	transition: opacity 0.6s var(--dp-syshl-ease);
	overflow: hidden;
}

#dedicated-product.dp-page--system .dp-syshl__slide.exa-slider__slide--active {
	opacity: 1;
	transform: none;
}

#dedicated-product.dp-page--system .dp-syshl__frame {
	width: 100%;
	height: 100%;
	border-radius: inherit;
	overflow: hidden;
	background: #161617;
	background-clip: padding-box;
}

#dedicated-product.dp-page--system .dp-syshl__media {
	width: 100%;
	height: 100%;
	max-width: none;
	object-position: center;
	border-radius: inherit;
	background: #161617;
	background-clip: padding-box;
}

/* Per-slide editor choice, same contract as ARC-32 Location Consideration:
   fill crops the media to the card edges, contain shows it whole at its own
   proportions and letterboxes the remainder against the card ground. */
#dedicated-product.dp-page--system .dp-syshl__frame--fill .dp-syshl__media {
	object-fit: cover;
}

#dedicated-product.dp-page--system .dp-syshl__frame--contain .dp-syshl__media {
	object-fit: contain;
}

#dedicated-product.dp-page--system .dp-syshl__media-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(110% 90% at 8% 0%, rgba(255, 0, 0, 0.32), transparent 52%),
		linear-gradient(180deg, #8a0000, #000);
}

/* ---- Legibility scrim ------------------------------------------------
   A title sitting straight on the artwork is only readable by luck — the
   "Operate 4 Games Simultaneously" slide put white type over a near-white
   frame and disappeared. This lays a dark gradient over the lower part of the
   card so the copy always has something to sit against.

   It is a gradient, not a panel: fully opaque black at the very bottom edge,
   already half gone by a third of the way up and completely clear at 45%, so
   the top of the card reads as untouched media. `to top` in a single stop list
   keeps it one paint with no hard banding.

   Two details that matter:
   - It sits above the media but below .dp-syshl__body, so the title is never
     dimmed by its own backdrop.
   - pointer-events: none, or it would swallow drags that begin over it.
   ---------------------------------------------------------------------- */
#dedicated-product.dp-page--system .dp-syshl__frame::after {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 45%;
	z-index: 1;
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;
	/* Weighted to where the copy actually sits rather than to the very bottom
	   edge. The first curve was already down to ~0.25 alpha at the top of the
	   text box, which measured 2.15:1 against white artwork — below the 3:1
	   WCAG floor for large text. Holding strength through the lower half and
	   fading above the copy fixes that without darkening the card overall. */
	/* Firefox quantises a multi-stop, full-width vertical gradient into visible
	   horizontal bands when this transformed frame lands on a fractional pixel
	   height. An elliptical scrim preserves the same copy contrast without
	   producing scanline-shaped colour boundaries. */
	background: radial-gradient(
		ellipse 92% 108% at 50% 112%,
		rgba(0, 0, 0, 0.86) 0%,
		rgba(0, 0, 0, 0.72) 42%,
		rgba(0, 0, 0, 0.34) 70%,
		rgba(0, 0, 0, 0) 100%
	);
	pointer-events: none;
}

/* The bottom scrim only helps copy anchored to the bottom. A title placed at
   the top or middle of the card still lands wherever the artwork happens to be
   — which is how "Operate 4 Games Simultaneously" ended up as white type on a
   white screenshot. So a second, smaller gradient is drawn against whatever
   edge that slide's title actually uses, keyed off the anchor class the
   template puts on the frame. Bottom-anchored slides need nothing extra: the
   scrim below already covers them. */
#dedicated-product.dp-page--system .dp-syshl__frame::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
}

#dedicated-product.dp-page--system .dp-syshl__frame--anchor-top-left::before,
#dedicated-product.dp-page--system .dp-syshl__frame--anchor-top-center::before,
#dedicated-product.dp-page--system .dp-syshl__frame--anchor-top-right::before {
	top: 0;
	height: 45%;
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
	/* Mirrors the bottom curve, and for the same measured reason: tapering from
	   the edge left the far side of the text box at ~2.1:1 against pale
	   artwork. Strength is held through the band the copy occupies. */
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.86) 0%,
		rgba(0, 0, 0, 0.78) 24%,
		rgba(0, 0, 0, 0.58) 48%,
		rgba(0, 0, 0, 0.26) 74%,
		rgba(0, 0, 0, 0) 100%
	);
	opacity: 1;
}

/* Centred band: dense across the middle third where the copy sits, gone before
   it reaches either edge so the card never looks banded. */
#dedicated-product.dp-page--system .dp-syshl__frame--anchor-middle-left::before,
#dedicated-product.dp-page--system .dp-syshl__frame--anchor-middle-center::before,
#dedicated-product.dp-page--system .dp-syshl__frame--anchor-middle-right::before {
	/* A plateau, not a peak. The first version tapered from the centre, so the
	   top and bottom of the text box sat where the band had already thinned and
	   a bright frame still showed through — measured at 2.15:1 against white
	   copy, under the 3:1 WCAG floor for large text. Holding full strength
	   across the middle half and fading only outside the text keeps the whole
	   box covered while the card edges stay clean. */
	top: 12%;
	height: 76%;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.46) 18%,
		rgba(0, 0, 0, 0.66) 32%,
		rgba(0, 0, 0, 0.66) 68%,
		rgba(0, 0, 0, 0.46) 82%,
		rgba(0, 0, 0, 0) 100%
	);
	opacity: 1;
}

/* A contained slide letterboxes against the card ground, so the scrim would be
   shading empty background rather than artwork. Softened, not removed: the
   title still needs its own contrast when the letterbox is pale. */
#dedicated-product.dp-page--system .dp-syshl__frame--contain::after {
	background: radial-gradient(
		ellipse 92% 108% at 50% 112%,
		rgba(0, 0, 0, 0.62) 0%,
		rgba(0, 0, 0, 0.28) 58%,
		rgba(0, 0, 0, 0) 100%
	);
}

/* ---- Overlay title -------------------------------------------------- */

/* pointer-events: none keeps the copy from eating drag gestures that start on
   top of it — the whole card is a swipe target. */
/* A definite width, not shrink-to-fit.
   As an absolutely positioned box this sized itself to its content, and the
   `overflow-wrap: anywhere` that used to sit on the title dropped its
   min-content contribution to a single character — so the box collapsed to
   roughly one word (271px of a 1100px card) and a 34-character title broke
   across three lines. Given a real width the title takes the line it should. */
#dedicated-product.dp-page--system .dp-syshl__body {
	position: absolute;
	z-index: 2;
	width: min(720px, 82%);
	padding: clamp(24px, 4vw, 48px);
	pointer-events: none;
}

#dedicated-product.dp-page--system .dp-syshl__title {
	margin: 0;
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-size: clamp(20px, 2.2vw, 28px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-shadow: 0 1px 24px rgba(0, 0, 0, 0.42);
	/* break-word, not anywhere: this only breaks a word that cannot fit on a
	   line by itself, instead of volunteering every character as a break
	   opportunity and collapsing the box that contains it. */
	overflow-wrap: break-word;
	/* When a title genuinely is too long for one line, split it evenly rather
	   than leaving a single orphaned word on the second. */
	text-wrap: balance;
}

/* The editor can emit its own blocks now (Paragraph, Heading 1-6). They inherit
   the card typography by default so a plain title and an explicit "Paragraph"
   look identical, while a chosen heading level still reads as a step up.
   Margins are flattened at the edges so a block never pushes the copy off its
   anchor. */
#dedicated-product.dp-page--system .dp-syshl__title > :first-child { margin-top: 0; }
#dedicated-product.dp-page--system .dp-syshl__title > :last-child { margin-bottom: 0; }

#dedicated-product.dp-page--system .dp-syshl__title p {
	margin: 0 0 0.35em;
	font: inherit;
	color: inherit;
}

#dedicated-product.dp-page--system .dp-syshl__title h1,
#dedicated-product.dp-page--system .dp-syshl__title h2,
#dedicated-product.dp-page--system .dp-syshl__title h3,
#dedicated-product.dp-page--system .dp-syshl__title h4,
#dedicated-product.dp-page--system .dp-syshl__title h5,
#dedicated-product.dp-page--system .dp-syshl__title h6 {
	margin: 0 0 0.3em;
	color: inherit;
	font-family: inherit;
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.01em;
}

#dedicated-product.dp-page--system .dp-syshl__title h1 { font-size: 1.5em; }
#dedicated-product.dp-page--system .dp-syshl__title h2 { font-size: 1.32em; }
#dedicated-product.dp-page--system .dp-syshl__title h3 { font-size: 1.16em; }
#dedicated-product.dp-page--system .dp-syshl__title h4 { font-size: 1em; }
#dedicated-product.dp-page--system .dp-syshl__title h5 { font-size: 0.88em; }
#dedicated-product.dp-page--system .dp-syshl__title h6 { font-size: 0.8em; }

/* Lists are reachable from the toolbar; keep them inside the text box. */
#dedicated-product.dp-page--system .dp-syshl__title ul,
#dedicated-product.dp-page--system .dp-syshl__title ol {
	margin: 0 0 0.3em;
	padding-inline-start: 1.1em;
}

/* The editor's accent button writes this span. One class, one color — the
   theme red — so a title cannot drift away from the palette. */
#dedicated-product.dp-page--system .dp-syshl__title .dp-accent {
	color: var(--dp-accent, #D90500);
}

/* Nine anchor points, driven by the per-slide editor field. The horizontal
   centring uses translate3d on the same axis the entrance animation moves, so
   the two are composed in one transform below rather than fighting. */
#dedicated-product.dp-page--system .dp-syshl__body--top-left      { top: 0; left: 0; text-align: left; }
#dedicated-product.dp-page--system .dp-syshl__body--top-center    { top: 0; left: 50%; text-align: center; }
#dedicated-product.dp-page--system .dp-syshl__body--top-right     { top: 0; right: 0; text-align: right; }
#dedicated-product.dp-page--system .dp-syshl__body--middle-left   { top: 50%; left: 0; text-align: left; }
#dedicated-product.dp-page--system .dp-syshl__body--middle-center { top: 50%; left: 50%; text-align: center; }
#dedicated-product.dp-page--system .dp-syshl__body--middle-right  { top: 50%; right: 0; text-align: right; }
#dedicated-product.dp-page--system .dp-syshl__body--bottom-left   { bottom: 0; left: 0; text-align: left; }
#dedicated-product.dp-page--system .dp-syshl__body--bottom-center { bottom: 0; left: 50%; text-align: center; }
#dedicated-product.dp-page--system .dp-syshl__body--bottom-right  { bottom: 0; right: 0; text-align: right; }

/* ---- Entrance ------------------------------------------------------- */

/* Two custom properties carry the centring offsets so a single transform can
   express "where this box sits" and "how far it has yet to travel" at once.
   Compositor-only: opacity + translate3d, never top/left/width. */
#dedicated-product.dp-page--system .dp-syshl__body {
	--dp-syshl-x: 0px;
	--dp-syshl-y: 0px;
	--dp-syshl-enter: 20px;
	opacity: 0;
	transform: translate3d(calc(var(--dp-syshl-x) + var(--dp-syshl-enter)), var(--dp-syshl-y), 0);
	transition:
		opacity 0.62s var(--dp-syshl-ease),
		transform 0.62s var(--dp-syshl-ease);
	will-change: opacity, transform;
}

#dedicated-product.dp-page--system .dp-syshl__body--top-center,
#dedicated-product.dp-page--system .dp-syshl__body--bottom-center {
	--dp-syshl-x: -50%;
}

#dedicated-product.dp-page--system .dp-syshl__body--middle-left,
#dedicated-product.dp-page--system .dp-syshl__body--middle-right {
	--dp-syshl-y: -50%;
}

#dedicated-product.dp-page--system .dp-syshl__body--middle-center {
	--dp-syshl-x: -50%;
	--dp-syshl-y: -50%;
}

/* Media first, copy a beat later — the delay is what makes the title read as
   a response to the slide rather than part of it. */
#dedicated-product.dp-page--system .dp-syshl__slide.exa-slider__slide--active .dp-syshl__body {
	--dp-syshl-enter: 0px;
	opacity: 1;
	transition-delay: 0.18s;
}

/* The opening slide fades only. The rightward travel is what distinguishes
   "the carousel moved" from "the section arrived", so slide one must not have
   it. This is a server-rendered class, not scripted state: the entrance is
   composited the instant the engine marks its first slide active, which is
   earlier than any observer could set an attribute in time to be read. */
#dedicated-product.dp-page--system .dp-syshl__slide--first .dp-syshl__body {
	--dp-syshl-enter: 0px;
}

@media (prefers-reduced-motion: reduce) {
	#dedicated-product.dp-page--system .dp-syshl__body {
		--dp-syshl-enter: 0px;
		transition: opacity 0.2s linear;
	}
}

/* One physical line per shared boundary: Highlights, Cartridges, Showcase and
   Choosing Games each own their top edge. Choosing Games deliberately has no
   ::after rule, so the bottom hero remains undivided. */
#dedicated-product.dp-page--system .dp-section-divider {
	position: relative;
	/* Match ARC-32 anchor landings: place section content below the stacked
	   navigation while keeping the divider itself above the visible viewport. */
	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--system .dp-section-divider::before {
	content: '';
	position: absolute;
	top: 0;
	left: 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;
	transform: translateX(-50%);
	z-index: 30;
}

/* Hero has no matching bottom seam, so the first line is centered inside twice
   the shared top space, exactly like ARC-32's first post-hero divider. */
#dedicated-product.dp-page--system .dp-syshl {
	padding-top: calc(var(--dp-section-seam) * 2);
	padding-bottom: calc(var(--dp-section-seam) + 1.75rem);
	scroll-margin-top: calc(
		var(--renewal-main-nav-height, 5.3125rem) + var(--dp-subnav-h, 52px) + 8px
		- (var(--dp-section-seam) * 2)
	);
}

#dedicated-product.dp-page--system .dp-syshl.dp-section-divider::before {
	top: var(--dp-section-seam);
}

#dedicated-product.dp-page--system .dp-cartridges,
#dedicated-product.dp-page--system .dp-showcase {
	padding-top: var(--dp-section-seam);
	padding-bottom: calc(var(--dp-section-seam) + 1.75rem);
}

/* Keep the Highlights -> Game Cartridges separator explicit. Game Cartridges
   clips horizontal overflow, so this reinforced in-box rule cannot disappear
   behind the first colour band or the sticky sub-navigation. */
#dedicated-product.dp-page--system .dp-cartridges.dp-section-divider::before {
	display: block;
	opacity: var(--dp-divider-opacity);
	z-index: 40;
}

/* Tablet and portrait/vertical monitors. A 9:16 or long tablet display is
   wide enough for the desktop card but far too tall for 68vh to be a sensible
   card height, so height is pinned back to the design maximum and only the
   width follows the viewport. */
@media (min-width: 768px) and (max-aspect-ratio: 3 / 4) {
	#dedicated-product.dp-page--system .dp-syshl {
		--dp-syshl-design-h: min(650px, 46vh);
		--dp-syshl-peek: 48px;
	}
}

@media (max-width: 1024px) {
	#dedicated-product.dp-page--system .dp-syshl {
		--dp-syshl-peek: 52px;
		--dp-syshl-gap: 16px;
	}
}

@media (max-width: 767px) {
	/* Phone geometry taken from Apple's own card gallery rather than scaled
	   down by eye. apple.com/iphone-17-pro sizes `.media-card-set` at
	   `--shared-media-gallery-height: 480px` on small screens, with the card
	   width `max(min(<content max>, 87.5vw - <scrollbar>), 280px)` and the
	   gallery itself capped at `calc(100vw - 40px)`. The vh clamp is ours: it
	   guarantees the card and its dock fit the viewport frame together on a
	   short or landscape phone, which a fixed 480px cannot promise. */
	#dedicated-product.dp-page--system .dp-syshl {
		/* Apple's phone width becomes the design target; the sharpness caps in
		   the base rule still apply, so a dense screen shrinks the card rather
		   than stretching the artwork across pixels it does not have. */
		--dp-syshl-design-w: max(min(87.5vw, 100vw - 40px), 280px);
		--dp-syshl-design-h: min(480px, 58vh);
		--dp-syshl-radius: 20px;
		--dp-syshl-gap: 12px;
		--dp-syshl-peek: 6.25vw;
	}

	/* Apple's cap. Keeps the lane inside the viewport frame so no part of a
	   card or its peek can sit under the scrollbar gutter. */
	#dedicated-product.dp-page--system .dp-syshl__slider {
		max-width: calc(100vw - 40px);
	}

	/* System Highlights keeps its controls available to assistive technology,
	   but does not paint them on a phone until the visitor touches the section.
	   Opacity (rather than display/visibility) lets a first press on the control
	   both reveal it and complete the requested navigation. */
	#dedicated-product.dp-page--system .dp-syshl__slider[data-exa-touch-nav-reveal]:not(.is-touch-nav-revealed) .exa-slider__inline-nav {
		opacity: 0;
	}

	#dedicated-product.dp-page--system .dp-syshl__slider[data-exa-touch-nav-reveal].is-touch-nav-revealed .exa-slider__inline-nav {
		opacity: 1;
	}

	#dedicated-product.dp-page--system .dp-syshl__heading {
		margin-bottom: 20px;
		padding-inline: 1rem;
	}

	#dedicated-product.dp-page--system .dp-syshl__body {
		width: 88%;
	}

	#dedicated-product.dp-page--system .dp-syshl {
		padding-top: calc(var(--dp-section-seam) * 2);
		padding-bottom: calc(var(--dp-section-seam) + 1.5rem);
	}

	#dedicated-product.dp-page--system .dp-cartridges,
	#dedicated-product.dp-page--system .dp-showcase {
		padding-top: var(--dp-section-seam);
		padding-bottom: calc(var(--dp-section-seam) + 1.5rem);
	}
}