/* 1.8.0: single-stage What's Included, consolidated spacing fixes. */
.srpc-runtime-intro {
	padding-bottom: clamp(.9rem, 1.8vw, 1.5rem);
}
.srpc-runtime-workspace {
	padding-top: clamp(1rem, 2vw, 1.75rem);
}
.srpc-content-stack .srcm {
	margin-block-end: 0;
}

.srpc-kit {
	padding-block: clamp(2.5rem, 5vw, 5rem);
}
.srpc-kit .srpc-shell {
	max-width: 1280px;
}
.srpc-kit .srpc-section-header {
	margin-bottom: .9rem;
}
.srpc-kit .srpc-intro-copy {
	margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}
.srpc-kit-stage {
	position: relative;
	isolation: isolate;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background:
		radial-gradient(ellipse at 50% 43%, rgba(213, 220, 210, .2), transparent 58%),
		#242829;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: clamp(14px, 2vw, 20px);
	box-shadow: 0 18px 50px rgba(28,30,31,.12);
}
.srpc-kit-stage:not(.is-enhanced) .srpc-kit-tabs,
.srpc-kit-stage:not(.is-enhanced) .srpc-kit-hotspot,
.srpc-kit-stage:not(.is-enhanced) .srpc-kit-flyouts,
.srpc-kit-stage:not(.is-enhanced) .srpc-kit-connector,
.srpc-kit-stage:not(.is-enhanced) .srpc-kit-selector,
.srpc-kit-stage:not(.is-enhanced) .srpc-kit-technical-label,
.srpc-kit-stage:not(.is-enhanced) .srpc-kit-notice { display: none; }
.srpc-kit-tabs {
	position: absolute;
	top: clamp(.75rem, 1.8vw, 1.25rem);
	left: 50%;
	z-index: 8;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	width: min(calc(100% - 2rem), 520px);
	margin: 0;
	padding: .25rem;
	background: rgba(28,30,31,.74);
	border: 1px solid rgba(246,244,241,.32);
	border-radius: 999px;
	backdrop-filter: blur(8px);
	translate: -50% 0;
}
.srpc-kit-tabs button {
	min-height: 44px;
	padding: .65rem .85rem;
	color: var(--srpc-chalk);
	font-size: clamp(.72rem, 1vw, .84rem);
	line-height: 1.2;
}
.srpc-kit-tabs button[aria-selected="true"] {
	color: var(--srpc-charcoal);
	background: var(--srpc-chalk);
}
.srpc-kit-view {
	position: absolute;
	inset: 0;
	transition: opacity 240ms ease;
}
.srpc-kit-view[hidden] { display: none; }
.srpc-kit-stage.is-switching .srpc-kit-view:not([hidden]) { opacity: .15; }
.srpc-kit-photo,
.srpc-kit-photo picture,
.srpc-kit-photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}
.srpc-kit-photo {
	min-height: 0;
	max-height: none;
	background: transparent;
	border-radius: 0;
}
.srpc-kit:not(.is-revealed) .srpc-kit-photo { opacity: 1; translate: 0; }
.srpc-kit-photo picture img {
	object-fit: contain;
	padding: clamp(3.25rem, 6.5vw, 5.75rem) clamp(1rem, 3vw, 2.5rem) clamp(4.5rem, 8vw, 6.5rem);
}
.srpc-kit-photo.is-placeholder::after { display: none; }
.srpc-kit-hotspot {
	left: var(--kit-x);
	top: var(--kit-y);
	z-index: 5;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	translate: -50% -50%;
}
.srpc-kit-hotspot > span {
	display: grid;
	place-items: center;
	width: 29px;
	height: 29px;
	color: #fff;
	font: 700 .75rem/1 "IBM Plex Mono", monospace;
	background: var(--srpc-eucalyptus);
	border: 2px solid var(--srpc-chalk);
	border-radius: 50%;
	box-shadow: 0 3px 14px rgba(0,0,0,.35);
	transition: scale 160ms ease, background-color 160ms ease, outline-color 160ms ease;
}
.srpc-kit-hotspot:hover > span,
.srpc-kit-hotspot:focus-visible > span,
.srpc-kit-hotspot.is-active > span {
	scale: 1.14;
	background: var(--srpc-charcoal);
	outline: 3px solid var(--srpc-eucalyptus);
	outline-offset: 2px;
}
.srpc-kit-hotspot:focus-visible,
.srpc-kit-selector__item:focus-visible,
.srpc-kit-tabs button:focus-visible {
	outline: 3px solid var(--srpc-sky);
	outline-offset: 3px;
}
.srpc-kit-flyouts { position: absolute; inset: 0; pointer-events: none; }
.srpc-kit-flyout {
	position: absolute;
	z-index: 6;
	width: clamp(230px, 22vw, 310px);
	max-width: calc(100% - 2rem);
	padding: clamp(.9rem, 1.6vw, 1.2rem);
	color: var(--srpc-charcoal);
	background: rgba(246,244,241,.97);
	border: 1px solid rgba(28,30,31,.16);
	border-radius: 10px;
	box-shadow: 0 12px 35px rgba(0,0,0,.18);
	pointer-events: auto;
	transition: opacity 200ms ease, translate 200ms ease;
}
.srpc-kit-flyout.is-right {
	left: clamp(1rem, calc(var(--kit-flyout-x) + 4% + var(--kit-flyout-offset-x)), calc(100% - 326px));
	top: clamp(5rem, calc(var(--kit-flyout-y) + var(--kit-flyout-offset-y)), calc(100% - 7rem));
	translate: 0 -50%;
}
.srpc-kit-flyout.is-left {
	right: clamp(1rem, calc(100% - var(--kit-flyout-x) + 4% - var(--kit-flyout-offset-x)), calc(100% - 326px));
	top: clamp(5rem, calc(var(--kit-flyout-y) + var(--kit-flyout-offset-y)), calc(100% - 7rem));
	translate: 0 -50%;
}
.srpc-kit-flyout.is-above {
	left: clamp(1rem, calc(var(--kit-flyout-x) + var(--kit-flyout-offset-x)), calc(100% - 326px));
	top: calc(var(--kit-flyout-y) - 4% + var(--kit-flyout-offset-y));
	translate: -50% -100%;
}
.srpc-kit-flyout.is-below {
	left: clamp(1rem, calc(var(--kit-flyout-x) + var(--kit-flyout-offset-x)), calc(100% - 326px));
	top: calc(var(--kit-flyout-y) + 4% + var(--kit-flyout-offset-y));
	translate: -50% 0;
}
.srpc-kit-flyout__header {
	display: grid;
	grid-template-columns: 30px minmax(0,1fr);
	align-items: center;
	gap: .5rem .7rem;
}
.srpc-kit-flyout__header > span {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	color: #fff;
	font: 700 .72rem/1 "IBM Plex Mono", monospace;
	background: var(--srpc-charcoal);
	border-radius: 50%;
}
.srpc-kit-flyout__header strong {
	font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	line-height: 1.05;
}
.srpc-kit-flyout__header em {
	grid-column: 2;
	justify-self: start;
	padding: .25rem .45rem;
	font: normal 600 .62rem/1 "IBM Plex Mono", monospace;
	text-transform: uppercase;
	border: 1px solid currentColor;
	border-radius: 999px;
}
.srpc-kit-flyout__header em.is-included { color: var(--srpc-eucalyptus); }
.srpc-kit-flyout__header em.is-not-included { color: var(--srpc-ochre); }
.srpc-kit-flyout p { margin: .75rem 0 0; font-size: .9rem; line-height: 1.45; }
.srpc-kit-connector {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	opacity: 0;
}
.srpc-kit-connector.is-visible { opacity: 1; }
.srpc-kit-connector line {
	stroke: rgba(246,244,241,.82);
	stroke-width: 2;
	stroke-dasharray: 4 4;
	vector-effect: non-scaling-stroke;
}
.srpc-kit-selector {
	position: absolute;
	left: 50%;
	bottom: clamp(.75rem, 1.8vw, 1.25rem);
	z-index: 7;
	display: flex;
	gap: .35rem;
	max-width: calc(100% - 2rem);
	padding: .25rem;
	background: rgba(28,30,31,.78);
	border: 1px solid rgba(246,244,241,.24);
	border-radius: 999px;
	backdrop-filter: blur(8px);
	translate: -50% 0;
}
.srpc-kit-selector__item {
	min-height: 44px;
	padding: .55rem .75rem;
	color: var(--srpc-chalk);
	font: 600 .7rem/1.1 "IBM Plex Mono", monospace;
	white-space: nowrap;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
}
.srpc-kit-selector__item > span { font-weight: 700; }
.srpc-kit-selector__item.is-active {
	color: var(--srpc-charcoal);
	background: var(--srpc-chalk);
}
.srpc-kit-technical-label {
	position: absolute;
	top: clamp(4.4rem, 7vw, 5.3rem);
	left: clamp(.75rem, 1.8vw, 1.25rem);
	z-index: 6;
	margin: 0;
	padding: .38rem .55rem;
	color: var(--srpc-chalk);
	font: 600 .66rem/1.1 "IBM Plex Mono", monospace;
	letter-spacing: .08em;
	text-transform: uppercase;
	background: rgba(28,30,31,.78);
	border: 1px solid rgba(246,244,241,.24);
	border-radius: 999px;
}
.srpc-kit-notice {
	position: absolute;
	right: clamp(.75rem, 1.8vw, 1.25rem);
	bottom: clamp(4.75rem, 7vw, 5.4rem);
	z-index: 6;
	max-width: min(44ch, calc(100% - 2rem));
	margin: 0;
	padding: .55rem .7rem;
	color: var(--srpc-charcoal);
	font-size: .75rem;
	line-height: 1.35;
	background: rgba(246,244,241,.95);
	border: 0;
	border-left: 3px solid var(--srpc-ochre);
	border-radius: 5px;
}
.srpc-kit-fallback { margin-top: 1rem; }
.srpc-kit-fallback h3 { margin: 1.25rem 0 .5rem; }
.srpc-kit-fallback h3:first-child { margin-top: 0; }
.srpc-kit-fallback ul { margin: 0; padding-left: 1.2rem; }
.srpc-kit-fallback li + li { margin-top: .5rem; }
.srpc-kit-stage.is-enhanced + .srpc-kit-fallback { display: none; }
.srpc-kit-summary {
	margin: clamp(.85rem, 1.5vw, 1.2rem) 0 0;
	color: #4f5753;
	font: 600 clamp(.72rem, 1vw, .82rem)/1.45 "IBM Plex Mono", monospace;
	letter-spacing: .04em;
	text-align: center;
}
.srpc-kit:not(.is-revealed) .srpc-kit-tabs,
.srpc-kit:not(.is-revealed) .srpc-kit-hotspot,
.srpc-kit:not(.is-revealed) .srpc-kit-flyout,
.srpc-kit:not(.is-revealed) .srpc-kit-selector {
	opacity: 0;
	translate: 0 4px;
}
.srpc-kit.is-revealed .srpc-kit-tabs,
.srpc-kit.is-revealed .srpc-kit-hotspot,
.srpc-kit.is-revealed .srpc-kit-flyout,
.srpc-kit.is-revealed .srpc-kit-selector {
	transition: opacity 180ms ease, translate 180ms ease;
}
.srpc-kit.is-revealed .srpc-kit-tabs,
.srpc-kit.is-revealed .srpc-kit-selector { translate: -50% 0; }

@media (max-width: 900px) {
	.srpc-kit-stage { aspect-ratio: 4 / 5; }
	.srpc-kit-photo picture img { padding: 3.6rem .35rem 10.5rem; }
	.srpc-kit-hotspot { left: var(--kit-mobile-x); top: var(--kit-mobile-y); }
	.srpc-kit-flyout {
		left: .75rem !important;
		right: .75rem !important;
		top: auto !important;
		bottom: .75rem;
		width: auto;
		max-width: none;
		min-height: 88px;
		padding: .75rem .85rem;
		translate: 0 !important;
	}
	.srpc-kit-flyout__header { grid-template-columns: 26px minmax(0,1fr) auto; }
	.srpc-kit-flyout__header > span { width: 26px; height: 26px; }
	.srpc-kit-flyout__header em { grid-column: 3; grid-row: 1; }
	.srpc-kit-flyout p { margin-top: .45rem; font-size: .8rem; line-height: 1.35; }
	.srpc-kit-selector {
		bottom: 7.25rem;
		width: calc(100% - 1.5rem);
		max-width: none;
		justify-content: stretch;
		border-radius: 10px;
	}
	.srpc-kit-selector__item {
		flex: 1 1 0;
		min-width: 0;
		padding-inline: .35rem;
		white-space: normal;
		border-radius: 7px;
	}
	.srpc-kit-notice {
		right: .75rem;
		bottom: 10.6rem;
		left: .75rem;
		max-width: none;
		font-size: .68rem;
	}
	.srpc-kit-technical-label { top: 4.1rem; font-size: .58rem; }
	.srpc-kit-connector { display: none; }
	.srpc-kit.is-revealed .srpc-kit-flyout { translate: 0 0; }
}

@media (max-width: 420px) {
	.srpc-kit { padding-block: 2.25rem; }
	.srpc-kit .srpc-section-header { margin-bottom: .65rem; }
	.srpc-kit .srpc-intro-copy { margin-bottom: .8rem; font-size: .96rem; }
	.srpc-kit-tabs { top: .6rem; width: calc(100% - 1.2rem); }
	.srpc-kit-tabs button { padding-inline: .45rem; font-size: .65rem; }
	.srpc-kit-selector { bottom: 7rem; width: calc(100% - 1.2rem); }
	.srpc-kit-selector__item { font-size: .62rem; }
	.srpc-kit-flyout { right: .6rem !important; bottom: .6rem; left: .6rem !important; }
	.srpc-kit-flyout__header { grid-template-columns: 24px minmax(0,1fr); }
	.srpc-kit-flyout__header em { display: none; }
	.srpc-kit-flyout p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
	.srpc-kit-notice { bottom: 10.25rem; }
}

@media (prefers-reduced-motion: reduce) {
	.srpc-kit-stage *,
	.srpc-kit-stage *::before,
	.srpc-kit-stage *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
	.srpc-kit:not(.is-revealed) .srpc-kit-tabs,
	.srpc-kit:not(.is-revealed) .srpc-kit-hotspot,
	.srpc-kit:not(.is-revealed) .srpc-kit-flyout,
	.srpc-kit:not(.is-revealed) .srpc-kit-selector { opacity: 1; }
}

@media (forced-colors: active) {
	.srpc-kit-hotspot > span,
	.srpc-kit-selector__item,
	.srpc-kit-tabs button { border: 2px solid ButtonText; }
	.srpc-kit-flyout { border: 2px solid CanvasText; }
}
