.mgr-guide {
	--mgr-accent: #f26424;
	--mgr-max-width: 1440px;
	--mgr-rail-width: 280px;
	--mgr-column-gap: 56px;
	--mgr-step-gap: 56px;
	--mgr-marker-size: 54px;
	--mgr-media-width: 45%;
	--mgr-sticky-offset: 100px;
	--mgr-image-zoom: 1.08;
	--mgr-zoom-speed: 450ms;
	--mgr-pan-speed: 100ms;
	--mgr-reveal-duration: 600ms;
	--mgr-reveal-distance: 30px;
	--mgr-global-card-bg: #fff;
	--mgr-global-step-title: #0c2233;
	--mgr-global-step-text: #394a56;
	--mgr-stage-type-color: #f26424;
	--mgr-stage-type-bg: #fff3ed;
	--mgr-stage-type-border: #f6b497;
	--mgr-subsection-global-fit: cover;
	--mgr-subsection-global-position: center center;
	position: relative;
	width: 100%;
	color: #0c2233;
	isolation: isolate;
}

.mgr-guide *,
.mgr-guide *::before,
.mgr-guide *::after {
	box-sizing: border-box;
}

.mgr-guide button,
.mgr-guide select,
.mgr-guide input {
	font: inherit;
}

.mgr-guide button {
	margin: 0;
}

.mgr-guide img,
.mgr-guide svg {
	display: block;
	max-width: 100%;
}

.mgr-guide__container {
	width: min(100%, var(--mgr-max-width));
	margin-inline: auto;
}

.mgr-guide__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 56px;
}

.mgr-guide__header-copy {
	max-width: 900px;
}

.mgr-guide__eyebrow {
	margin-bottom: 10px;
	font-size: 0.875rem;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mgr-guide__title {
	margin: 0;
	font-size: clamp(2.25rem, 5vw, 5rem);
	font-weight: 850;
	line-height: 0.98;
	letter-spacing: -0.045em;
}

.mgr-guide__intro {
	max-width: 780px;
	margin-top: 20px;
	font-size: 1.125rem;
	line-height: 1.75;
}

.mgr-guide__intro > :first-child,
.mgr-step__description > :first-child {
	margin-top: 0;
}

.mgr-guide__intro > :last-child,
.mgr-step__description > :last-child {
	margin-bottom: 0;
}

.mgr-guide__badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 98px;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid color-mix(in srgb, var(--mgr-accent) 38%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--mgr-accent) 10%, white);
	color: var(--mgr-accent);
	font-size: 0.875rem;
	font-weight: 800;
}

.mgr-guide__shell {
	display: grid;
	align-items: start;
	gap: var(--mgr-column-gap);
}

.mgr-guide--rail-left .mgr-guide__shell {
	grid-template-columns: minmax(0, var(--mgr-rail-width)) minmax(0, 1fr);
	grid-template-areas: "rail steps";
}

.mgr-guide--rail-right .mgr-guide__shell {
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--mgr-rail-width));
	grid-template-areas: "steps rail";
}

.mgr-guide--rail-top .mgr-guide__shell {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"rail"
		"steps";
}

.mgr-guide--no-nav .mgr-guide__shell {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "steps";
}

.mgr-rail {
	grid-area: rail;
	min-width: 0;
}

.mgr-guide--sticky:not(.mgr-guide--rail-top) .mgr-rail {
	position: sticky;
	top: var(--mgr-sticky-offset);
	align-self: start;
	z-index: 2;
}

.mgr-guide--sticky:not(.mgr-guide--rail-top) .mgr-rail__inner {
	overflow-x: hidden;
	overflow-y: auto;
	max-height: calc(100vh - var(--mgr-sticky-offset) - 20px);
}

.mgr-rail__inner {
	overflow: hidden;
	padding: 24px 20px;
	border-radius: 20px;
	background: #0c2233;
	color: #fff;
}

.mgr-progress {
	margin-bottom: 22px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgb(255 255 255 / 12%);
}

.mgr-progress__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
	font-size: 0.75rem;
	font-weight: 750;
}

.mgr-progress__value {
	font-variant-numeric: tabular-nums;
}

.mgr-progress__track {
	position: relative;
	overflow: hidden;
	height: 7px;
	border-radius: 999px;
	background: #365064;
}

.mgr-progress__fill {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--mgr-accent);
	transition: width 350ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.mgr-nav {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mgr-nav__item {
	margin: 0;
	padding: 0;
}

.mgr-nav__button {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	align-items: center;
	width: 100%;
	min-height: 48px;
	padding: 8px 10px;
	border: 0 solid transparent !important;
	border-radius: 12px !important;
	background: rgb(255 255 255 / 6%) !important;
	color: #c8d0d6 !important;
	font-size: 0.925rem;
	font-weight: 650;
	line-height: 1.3;
	text-align: start;
	cursor: pointer;
	transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.mgr-nav__button:hover,
.mgr-nav__button:focus-visible {
	background: rgb(255 255 255 / 12%) !important;
	color: #fff;
}

.mgr-nav__button:focus-visible,
.mgr-media__main:focus-visible,
.mgr-gallery__button:focus-visible,
.mgr-complete:focus-visible,
.mgr-step__action:focus-visible,
.mgr-lightbox button:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--mgr-accent) 75%, white);
	outline-offset: 3px;
}

.mgr-nav__item.is-active .mgr-nav__button {
	background: #18374e !important;
	color: #fff;
}

.mgr-nav__thumb {
	overflow: hidden;
	width: 34px;
	height: 34px;
	margin-inline-end: 8px;
	border-radius: 8px;
	background: #fff;
}

.mgr-nav__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mgr-nav__number {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	margin-inline-end: 10px;
	border: 1px solid rgb(255 255 255 / 18%) !important;
	border-radius: 50% !important;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
}

.mgr-nav__item.is-active .mgr-nav__number {
	border-color: var(--mgr-accent);
	background: var(--mgr-accent);
	color: #fff;
}

.mgr-nav__title {
	overflow: hidden;
	text-overflow: ellipsis;
}

.mgr-nav__check {
	display: inline-grid;
	place-items: center;
	width: 20px;
	height: 20px;
	margin-inline-start: 8px;
	border-radius: 50%;
	background: #1b8b5a;
	color: #fff;
	font-size: 0.7rem;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 180ms ease, transform 180ms ease;
}

.mgr-nav__item.is-complete .mgr-nav__check {
	opacity: 1;
	transform: scale(1);
}

.mgr-guide--rail-top .mgr-rail__inner {
	display: grid;
	grid-template-columns: minmax(180px, 0.25fr) minmax(0, 1fr);
	align-items: center;
	gap: 24px;
}

.mgr-guide--rail-top .mgr-progress {
	margin: 0;
	padding: 0;
	border: 0;
}

.mgr-guide--rail-top .mgr-nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.mgr-steps {
	grid-area: steps;
	position: relative;
	min-width: 0;
}

.mgr-steps::before {
	position: absolute;
	z-index: -1;
	inset-block: calc(var(--mgr-marker-size) / 2) calc(var(--mgr-marker-size) / 2);
	inset-inline-start: calc(var(--mgr-marker-size) / 2 - 1.5px);
	width: 3px;
	border-radius: 999px;
	background: #d8dee3;
	content: "";
}

.mgr-guide--no-line .mgr-steps::before {
	display: none;
}

.mgr-guide--no-markers .mgr-steps::before {
	display: none;
}

.mgr-step {
	--mgr-step-accent: var(--mgr-accent);
	--mgr-step-card-bg: var(--mgr-global-card-bg);
	--mgr-step-title-color: var(--mgr-global-step-title);
	--mgr-step-text-color: var(--mgr-global-step-text);
	position: relative;
	display: grid;
	grid-template-columns: var(--mgr-marker-size) minmax(0, 1fr);
	align-items: start;
	gap: 22px;
	scroll-margin-top: 120px;
}

.mgr-guide--no-markers .mgr-step {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

.mgr-step + .mgr-step {
	margin-top: var(--mgr-step-gap);
}

.mgr-step__marker {
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	overflow: hidden;
	width: var(--mgr-marker-size);
	height: var(--mgr-marker-size);
	border: 2px solid var(--mgr-step-accent);
	border-radius: 50%;
	background: #fff;
	color: #0c2233;
	font-size: clamp(0.8rem, 1.5vw, 1rem);
	font-weight: 850;
	font-variant-numeric: tabular-nums;
	transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.mgr-step__marker svg,
.mgr-step__marker i {
	width: 1em;
	height: 1em;
	font-size: 1.1em;
}

.mgr-step__marker img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mgr-step.is-active .mgr-step__marker {
	border-color: var(--mgr-step-accent);
	background: var(--mgr-step-accent);
	color: #fff;
	transform: scale(1.07);
}

.mgr-step__marker-check {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: #1b8b5a;
	color: #fff;
	font-size: 1.1em;
	opacity: 0;
	transform: scale(0.4) rotate(-12deg);
	transition: opacity 220ms ease, transform 220ms ease;
}

.mgr-step.is-complete .mgr-step__marker-check {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

.mgr-step__card {
	min-width: 0;
	padding: 32px;
	border: 1px solid #e3e7ea;
	border-radius: 24px;
	background: var(--mgr-step-card-bg);
	box-shadow: 0 14px 50px rgb(12 34 51 / 7%);
	transition: transform 260ms ease, box-shadow 260ms ease, opacity 220ms ease;
}

.mgr-step.is-active .mgr-step__card {
	box-shadow: 0 22px 70px rgb(12 34 51 / 12%);
}

.mgr-step__header {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin-bottom: 26px;
}

.mgr-step__header-copy {
	flex: 1 1 auto;
	min-width: 0;
}

.mgr-step.is-collapsible .mgr-step__header {
	cursor: pointer;
}

.mgr-step.is-collapsible.is-collapsed .mgr-step__header {
	margin-bottom: 0;
}

.mgr-step__collapse-toggle {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0 solid transparent !important;
	border-radius: 999px !important;
	background: #f3f5f6 !important;
	color: #0c2233 !important;
	cursor: pointer;
	transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, border-radius 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.mgr-step__collapse-chevron {
	display: block;
	font-size: 1.45rem;
	line-height: 1;
	transform: rotate(180deg);
	transition: transform 180ms ease;
}

.mgr-step.is-collapsed .mgr-step__collapse-chevron {
	transform: rotate(0deg);
}

.mgr-step__body[hidden] {
	display: none;
}

.mgr-step__kicker {
	margin-bottom: 7px;
	color: var(--mgr-step-accent);
	font-size: 0.77rem;
	font-weight: 850;
	line-height: 1.35;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mgr-stage-type {
	display: inline-flex;
	align-items: center;
	margin: 0 0 10px;
	padding: 5px 9px;
	border: 1px solid var(--mgr-stage-type-border);
	border-radius: 999px;
	background: var(--mgr-stage-type-bg);
	color: var(--mgr-stage-type-color);
	font-size: 0.68rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.045em;
	text-transform: uppercase;
}

.mgr-step__title {
	margin: 0;
	color: var(--mgr-step-title-color);
	font-size: clamp(1.6rem, 3vw, 2.65rem);
	font-weight: 820;
	line-height: 1.08;
	letter-spacing: -0.025em;
}

.mgr-step__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin-top: 14px;
	color: #5f6f7a;
	font-size: 0.83rem;
	font-weight: 650;
}

.mgr-step__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.mgr-step__meta-item > span {
	color: var(--mgr-step-accent);
}

.mgr-paint-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
}

.mgr-paint-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 11px 7px 8px;
	border: 1px solid #dde3e7;
	border-radius: 999px;
	background: #f5f7f8;
	color: #263a49;
	font-size: 0.73rem;
	font-weight: 700;
	line-height: 1.15;
}

.mgr-paint-badge__swatch {
	display: block;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 1px solid rgb(12 34 51 / 18%);
	border-radius: 50%;
	background: var(--mgr-paint-swatch);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 28%);
}

.mgr-paint-badge__copy {
	display: inline-grid;
	gap: 3px;
	min-width: 0;
}

.mgr-paint-badge__main {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 5px;
}

.mgr-paint-badge__type {
	color: #6a7882;
	font-size: 0.62em;
	font-weight: 850;
	letter-spacing: 0.055em;
	text-transform: uppercase;
}

.mgr-paint-badge__label {
	color: #263a49;
}

.mgr-paint-badge__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 3px 10px;
	color: #647581;
	font-size: 0.82em;
	font-weight: 650;
	line-height: 1.25;
}

.mgr-paint-badge__meta-label {
	font-weight: 800;
}

.mgr-color-plan {
	padding: 14px;
	border: 1px solid #e1e6e9;
	border-radius: 12px;
	background: #fff;
	text-align: inherit;
}

.mgr-color-plan__title {
	margin: 0 0 10px;
	color: #0c2233;
	font-size: 0.78rem;
	font-weight: 850;
	line-height: 1.3;
	letter-spacing: 0.045em;
}

.mgr-color-plan .mgr-paint-badges {
	margin-top: 0;
}

.mgr-guide__color-plan {
	margin-bottom: 32px;
}

.mgr-step__body {
	display: grid;
	grid-template-columns: minmax(0, var(--mgr-media-width)) minmax(0, 1fr);
	align-items: start;
	gap: 32px;
}

.mgr-step__body--text-only {
	grid-template-columns: minmax(0, 1fr);
}

.mgr-guide--content-end .mgr-step__body .mgr-media {
	order: 2;
}

.mgr-guide--content-alternating .mgr-step:nth-child(even) .mgr-media {
	order: 2;
}

.mgr-guide--content-stacked .mgr-step__body {
	grid-template-columns: minmax(0, 1fr);
}

.mgr-media,
.mgr-step__content {
	min-width: 0;
}

.mgr-media__figure {
	margin: 0;
}

.mgr-media__main,
.mgr-gallery__button {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	padding: 0;
	border: 0;
	background: #e8ecef;
	cursor: zoom-in;
}

.mgr-media__main {
	border-radius: 16px;
}

.mgr-media__main img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transform: translate3d(var(--mgr-pan-x, 0px), var(--mgr-pan-y, 0px), 0) scale(1);
	transition: transform var(--mgr-zoom-speed) cubic-bezier(0.2, 0.72, 0.2, 1);
}

.mgr-media__main:hover img,
.mgr-media__main:focus-visible img {
	transform: translate3d(var(--mgr-pan-x, 0px), var(--mgr-pan-y, 0px), 0) scale(var(--mgr-image-zoom));
}

.mgr-media__zoom {
	position: absolute;
	inset-block-end: 12px;
	inset-inline-end: 12px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgb(255 255 255 / 38%);
	border-radius: 50%;
	background: rgb(12 34 51 / 74%);
	backdrop-filter: blur(8px);
	color: #fff;
	font-size: 1.1rem;
	line-height: 1;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 180ms ease, transform 180ms ease;
}

.mgr-media__main:hover .mgr-media__zoom,
.mgr-media__main:focus-visible .mgr-media__zoom {
	opacity: 1;
	transform: translateY(0);
}

.mgr-media__caption {
	margin-top: 8px;
	color: #74818a;
	font-size: 0.75rem;
	line-height: 1.5;
}

.mgr-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 10px;
}

.mgr-gallery__button {
	border-radius: 10px;
}

.mgr-gallery__button img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transform: translate3d(var(--mgr-pan-x, 0px), var(--mgr-pan-y, 0px), 0) scale(1);
	transition: transform var(--mgr-zoom-speed) ease, opacity 180ms ease;
}

.mgr-gallery__button:hover img,
.mgr-gallery__button:focus-visible img {
	opacity: 0.9;
	transform: translate3d(var(--mgr-pan-x, 0px), var(--mgr-pan-y, 0px), 0) scale(var(--mgr-image-zoom));
}

.mgr-mouse-pan img {
	transform-origin: center center !important;
	transition-duration: var(--mgr-pan-speed), 180ms;
	will-change: transform;
}

.mgr-guide--no-hover-zoom .mgr-media__main:hover img,
.mgr-guide--no-hover-zoom .mgr-media__main:focus-visible img,
.mgr-guide--no-hover-zoom .mgr-gallery__button:hover img,
.mgr-guide--no-hover-zoom .mgr-gallery__button:focus-visible img,
.mgr-guide--no-hover-zoom .mgr-subsection__image:hover img,
.mgr-guide--no-hover-zoom .mgr-subsection__image:focus-visible img {
	transform: none;
}

.mgr-step__description {
	color: var(--mgr-step-text-color);
	font-size: 1rem;
	line-height: 1.75;
}

.mgr-step--align-left .mgr-step__header,
.mgr-step--align-left .mgr-step__content {
	text-align: left;
}

.mgr-step--align-center .mgr-step__header,
.mgr-step--align-center .mgr-step__content {
	text-align: center;
}

.mgr-step--align-right .mgr-step__header,
.mgr-step--align-right .mgr-step__content {
	text-align: right;
}

.mgr-step--align-center .mgr-step__meta,
.mgr-step--align-center .mgr-paint-badges,
.mgr-step--align-center .mgr-materials__list,
.mgr-step--align-center .mgr-step__footer {
	justify-content: center;
}

.mgr-step--align-right .mgr-step__meta,
.mgr-step--align-right .mgr-paint-badges,
.mgr-step--align-right .mgr-materials__list,
.mgr-step--align-right .mgr-step__footer {
	justify-content: flex-end;
}

.mgr-step--align-left .mgr-step__meta,
.mgr-step--align-left .mgr-paint-badges,
.mgr-step--align-left .mgr-materials__list,
.mgr-step--align-left .mgr-step__footer {
	justify-content: flex-start;
}

.mgr-step__description a {
	color: var(--mgr-step-accent);
	text-decoration-thickness: 0.1em;
	text-underline-offset: 0.2em;
}

.mgr-step__description ul,
.mgr-step__description ol {
	padding-inline-start: 1.25em;
}

.mgr-subsections {
	display: grid;
	gap: 12px;
	margin-top: 24px;
}

.mgr-subsection {
	--mgr-subsection-accent: var(--mgr-step-accent);
	--mgr-subsection-bg: #f5f7f8;
	--mgr-subsection-title: #0c2233;
	--mgr-subsection-text: #445662;
	overflow: hidden;
	padding: 18px;
	border: 1px solid #e1e6e9;
	border-radius: 14px;
	background: var(--mgr-subsection-bg);
	color: var(--mgr-subsection-text);
}

.mgr-subsection--plain {
	padding-inline: 0;
	border-color: transparent;
	background: transparent;
}

.mgr-subsection--accent {
	border-inline-start: 4px solid var(--mgr-subsection-accent);
}

.mgr-subsection__toggle {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent !important;
	color: var(--mgr-subsection-title);
	text-align: inherit;
}

button.mgr-subsection__toggle {
	cursor: pointer;
}

.mgr-subsection__toggle--static {
	cursor: default;
}

.mgr-subsection__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	margin-inline-end: 11px;
	border-radius: 9px;
	background: color-mix(in srgb, var(--mgr-subsection-accent) 12%, white);
	color: var(--mgr-subsection-accent);
}

.mgr-subsection__icon svg,
.mgr-subsection__icon i {
	width: 1em;
	height: 1em;
}

.mgr-subsection__heading-copy {
	display: grid;
	flex: 1 1 auto;
	min-width: 0;
}

.mgr-subsection__label {
	margin-bottom: 3px;
	color: var(--mgr-subsection-accent);
	font-size: 0.65rem;
	font-weight: 850;
	line-height: 1.2;
	letter-spacing: 0.055em;
	text-transform: uppercase;
}

.mgr-subsection__title {
	color: var(--mgr-subsection-title);
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.25;
}

.mgr-subsection__chevron {
	flex: 0 0 auto;
	margin-inline-start: 12px;
	color: var(--mgr-subsection-accent);
	font-size: 1.3rem;
	line-height: 1;
	transform: rotate(0deg);
	transition: transform 180ms ease;
}

.mgr-subsection.is-open .mgr-subsection__chevron {
	transform: rotate(180deg);
}

.mgr-subsection__body {
	display: grid;
	gap: 14px;
	margin-top: 14px;
}

.mgr-subsection__body[hidden] {
	display: none;
}

.mgr-subsection--split .mgr-subsection__body {
	grid-template-columns: minmax(120px, 0.38fr) minmax(0, 1fr);
	align-items: start;
}

.mgr-subsection__title-description {
	min-width: 0;
	color: var(--mgr-subsection-text);
	font-size: 0.9rem;
	line-height: 1.6;
}

.mgr-subsection__title-description > :first-child {
	margin-top: 0;
}

.mgr-subsection__title-description > :last-child {
	margin-bottom: 0;
}

.mgr-subsection--split .mgr-subsection__title-description,
.mgr-subsection--split .mgr-subsection__color-plan {
	grid-column: 1 / -1;
}

.mgr-subsection__image {
	display: block;
	overflow: hidden;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: #e8ecef;
	cursor: zoom-in;
}

.mgr-subsection__image img {
	width: 100%;
	height: auto;
	object-fit: var(--mgr-subsection-item-fit, var(--mgr-subsection-global-fit, cover));
	object-position: var(--mgr-subsection-item-position, var(--mgr-subsection-global-position, center center));
	transform: translate3d(var(--mgr-pan-x, 0px), var(--mgr-pan-y, 0px), 0) scale(1);
	transition: transform var(--mgr-zoom-speed) cubic-bezier(0.2, 0.72, 0.2, 1);
}

.mgr-subsection--custom-image-height .mgr-subsection__image img {
	height: 100%;
}

.mgr-subsection__image:hover img,
.mgr-subsection__image:focus-visible img {
	transform: translate3d(var(--mgr-pan-x, 0px), var(--mgr-pan-y, 0px), 0) scale(var(--mgr-image-zoom));
}

.mgr-subsection__text {
	min-width: 0;
	color: var(--mgr-subsection-text);
	font-size: 0.9rem;
	line-height: 1.65;
}

.mgr-subsection__text > :first-child {
	margin-top: 0;
}

.mgr-subsection__text > :last-child {
	margin-bottom: 0;
}

.mgr-subsection__primer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	padding: 12px 14px;
	border: 1px solid #dce3e7;
	border-inline-start: 4px solid var(--mgr-subsection-accent);
	border-radius: 11px;
	background: #fff;
}

.mgr-subsection__primer-title {
	margin: 0;
	color: var(--mgr-subsection-title);
	font-size: 0.78rem;
	font-weight: 850;
	line-height: 1.3;
}

.mgr-subsection__primer .mgr-paint-badges {
	margin-top: 0;
}

.mgr-subsection__part-groups {
	display: grid;
	gap: 12px;
}

.mgr-part-groups__title {
	margin: 0;
	color: var(--mgr-subsection-title);
	font-size: 0.86rem;
	font-weight: 850;
	line-height: 1.35;
}

.mgr-part-groups__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 12px;
}

.mgr-part-group {
	--mgr-part-group-bg: #fff;
	--mgr-part-group-border: #dfe5e8;
	--mgr-part-group-accent: var(--mgr-subsection-accent);
	display: grid;
	align-content: start;
	gap: 9px;
	min-width: 0;
	padding: 14px;
	border: 1px solid var(--mgr-part-group-border);
	border-inline-start: 0 solid var(--mgr-part-group-accent);
	border-radius: 11px;
	background: var(--mgr-part-group-bg);
}

.mgr-part-group__title {
	margin: 0;
	color: var(--mgr-subsection-title);
	font-size: 0.78rem;
	font-weight: 800;
	line-height: 1.35;
}

.mgr-part-group__parts {
	justify-self: start;
	padding: 6px 9px;
	border-radius: 7px;
	background: #f3f5f6;
	background: color-mix(in srgb, var(--mgr-part-group-accent) 10%, white);
	color: #0c2233;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.82rem;
	font-weight: 850;
	line-height: 1.2;
	letter-spacing: 0.025em;
	text-align: left;
}

.mgr-part-group__description {
	color: var(--mgr-subsection-text);
	font-size: 0.82rem;
	line-height: 1.55;
}

.mgr-part-group .mgr-paint-badges {
	margin-top: 2px;
}

.mgr-subsection--split .mgr-subsection__primer,
.mgr-subsection--split .mgr-subsection__part-groups {
	grid-column: 1 / -1;
}

.mgr-subsection--align-left {
	text-align: left;
}

.mgr-subsection--align-center {
	text-align: center;
}

.mgr-subsection--align-right {
	text-align: right;
}

.mgr-section-label {
	margin-bottom: 9px;
	color: #0c2233;
	font-size: 0.75rem;
	font-weight: 850;
	letter-spacing: 0.045em;
	text-transform: uppercase;
}

.mgr-materials,
.mgr-checklist,
.mgr-tip {
	margin-top: 24px;
}

.mgr-materials__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mgr-materials__item {
	margin: 0;
	padding: 7px 11px;
	border-radius: 999px;
	background: #eff2f4;
	color: #263a49;
	font-size: 0.77rem;
	font-weight: 680;
	line-height: 1.25;
}

.mgr-checklist__list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mgr-checklist__list li {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	align-items: start;
	gap: 9px;
	margin: 0;
	color: #445662;
	font-size: 0.88rem;
	line-height: 1.5;
}

.mgr-checklist__list li > span {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border: 1px solid color-mix(in srgb, var(--mgr-step-accent) 42%, transparent);
	border-radius: 5px;
	color: var(--mgr-step-accent);
	font-size: 0.65rem;
}

.mgr-tip {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 12px;
	padding: 16px;
	border-inline-start: 4px solid var(--mgr-step-accent);
	border-radius: 12px;
	background: #fff4ec;
	color: #51290f;
}

.mgr-tip__icon {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	color: var(--mgr-step-accent);
}

.mgr-tip__icon svg,
.mgr-tip__icon i {
	width: 1em;
	height: 1em;
}

.mgr-tip__title {
	display: block;
	margin-bottom: 3px;
	font-size: 0.9rem;
}

.mgr-tip__text {
	font-size: 0.83rem;
	line-height: 1.55;
}

.mgr-step__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 28px;
}

.mgr-step__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 44px;
	padding: 10px 18px;
	border-radius: 10px;
	background: #0c2233;
	color: #fff;
	font-size: 0.85rem;
	font-weight: 750;
	line-height: 1.25;
	text-decoration: none;
	transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.mgr-step__action:hover,
.mgr-step__action:focus-visible {
	background: var(--mgr-step-accent);
	color: #fff;
	transform: translateY(-2px);
}

.mgr-step__action-icon svg,
.mgr-step__action-icon i {
	width: 1em;
	height: 1em;
}

.mgr-complete {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 42px;
	padding: 6px 0;
	border: 0;
	background: transparent;
	color: #0c2233;
	font-size: 0.82rem;
	font-weight: 750;
	cursor: pointer;
}

.mgr-complete__box {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border: 2px solid currentcolor;
	border-radius: 7px;
	color: inherit;
	font-size: 0.75rem;
	line-height: 1;
	transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.mgr-step:not(.is-complete) .mgr-complete__box {
	color: transparent;
	box-shadow: inset 0 0 0 2px #0c2233;
}

.mgr-step.is-complete .mgr-complete {
	color: #1b8b5a;
}

.mgr-step.is-complete .mgr-complete__box {
	border-color: #1b8b5a;
	background: #1b8b5a;
	color: #fff;
	box-shadow: none;
	transform: scale(1.05);
}

.mgr-mobile-jump {
	display: none;
	margin-bottom: 22px;
}

.mgr-mobile-jump__label {
	display: block;
	margin-bottom: 7px;
	color: #0c2233;
	font-size: 0.78rem;
	font-weight: 800;
}

.mgr-mobile-jump__select {
	width: 100%;
	min-height: 48px;
	padding: 9px 13px;
	border: 1px solid #cdd5da;
	border-radius: 10px;
	background: #fff;
	color: #0c2233;
}

.mgr-step {
	--mgr-item-duration: var(--mgr-stage-duration, var(--mgr-reveal-duration));
	--mgr-item-delay: var(--mgr-stage-delay, 0ms);
}

.mgr-subsection {
	--mgr-item-duration: var(--mgr-section-duration, var(--mgr-reveal-duration));
	--mgr-item-delay: var(--mgr-section-delay, 0ms);
}

.mgr-guide--reveal.is-js [data-mgr-animation]:not([data-mgr-animation="none"]) {
	opacity: 0;
	transition: opacity var(--mgr-item-duration) cubic-bezier(0.2, 0.72, 0.2, 1) var(--mgr-item-delay), transform var(--mgr-item-duration) cubic-bezier(0.2, 0.72, 0.2, 1) var(--mgr-item-delay);
}

.mgr-guide--reveal.is-js [data-mgr-animation="fade-up"] {
	transform: translateY(var(--mgr-reveal-distance));
}

.mgr-guide--reveal.is-js [data-mgr-animation="fade-down"] {
	transform: translateY(calc(var(--mgr-reveal-distance) * -1));
}

.mgr-guide--reveal.is-js [data-mgr-animation="fade-left"] {
	transform: translateX(var(--mgr-reveal-distance));
}

.mgr-guide--reveal.is-js [data-mgr-animation="fade-right"] {
	transform: translateX(calc(var(--mgr-reveal-distance) * -1));
}

.mgr-guide--reveal.is-js [data-mgr-animation="scale"] {
	transform: scale(0.94);
}

.mgr-guide--reveal.is-js [data-mgr-animation].is-visible,
.mgr-guide--reveal.is-js [data-mgr-animation="none"] {
	opacity: 1;
	transform: none;
}

.mgr-lightbox[hidden] {
	display: none;
}

.mgr-lightbox {
	position: fixed;
	z-index: 999999;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 24px;
}

.mgr-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(4 15 23 / 92%);
	backdrop-filter: blur(8px);
}

.mgr-lightbox__dialog {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas:
		"close close close"
		"previous image next"
		"caption caption caption";
	align-items: center;
	width: min(100%, 1500px);
	max-height: calc(100vh - 48px);
	color: #fff;
}

.mgr-lightbox__image {
	grid-area: image;
	justify-self: center;
	max-width: 100%;
	max-height: calc(100vh - 150px);
	border-radius: 12px;
	object-fit: contain;
	cursor: zoom-out;
	box-shadow: 0 30px 100px rgb(0 0 0 / 50%);
}

.mgr-lightbox__close,
.mgr-lightbox__previous,
.mgr-lightbox__next {
	position: relative;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 25%);
	border-radius: 50%;
	background: rgb(255 255 255 / 10%);
	color: #fff;
	cursor: pointer;
	transition: background-color 180ms ease, transform 180ms ease;
}

.mgr-lightbox__close:hover,
.mgr-lightbox__previous:hover,
.mgr-lightbox__next:hover {
	background: var(--mgr-accent);
	transform: scale(1.05);
}

.mgr-lightbox__close {
	grid-area: close;
	justify-self: end;
	width: 44px;
	height: 44px;
	margin-bottom: 14px;
	font-size: 1.7rem;
}

.mgr-lightbox__previous,
.mgr-lightbox__next {
	width: 48px;
	height: 48px;
	margin: 14px;
	font-size: 2rem;
}

.mgr-lightbox__previous {
	grid-area: previous;
}

.mgr-lightbox__next {
	grid-area: next;
}

.mgr-lightbox__caption {
	grid-area: caption;
	justify-self: center;
	max-width: 760px;
	min-height: 1.5em;
	margin-top: 12px;
	color: #dce3e8;
	font-size: 0.85rem;
	line-height: 1.5;
	text-align: center;
}

body.mgr-lightbox-open {
	overflow: hidden;
}

@media (max-width: 1100px) {
	.mgr-guide--rail-left .mgr-guide__shell,
	.mgr-guide--rail-right .mgr-guide__shell {
		grid-template-columns: minmax(210px, var(--mgr-rail-width)) minmax(0, 1fr);
		gap: min(var(--mgr-column-gap), 32px);
	}

	.mgr-guide--rail-right .mgr-guide__shell {
		grid-template-columns: minmax(0, 1fr) minmax(210px, var(--mgr-rail-width));
	}

	.mgr-guide--no-nav .mgr-guide__shell {
		grid-template-columns: minmax(0, 1fr);
	}

	.mgr-step__body {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 900px) {
	.mgr-guide__header {
		margin-bottom: 36px;
	}

	.mgr-guide__badge {
		display: none;
	}

	.mgr-guide--rail-left .mgr-guide__shell,
	.mgr-guide--rail-right .mgr-guide__shell,
	.mgr-guide--rail-top .mgr-guide__shell {
		display: block;
	}

	.mgr-rail {
		display: none;
		position: static;
	}

	.mgr-mobile-jump {
		display: block;
	}

	.mgr-step {
		gap: 16px;
	}

	.mgr-step__card {
		padding: 24px;
	}
}

@media (max-width: 600px) {
	.mgr-guide__title {
		font-size: clamp(2rem, 12vw, 3.25rem);
	}

	.mgr-guide__intro {
		font-size: 1rem;
	}

	.mgr-step {
		grid-template-columns: 38px minmax(0, 1fr);
		gap: 11px;
	}

	.mgr-step__marker {
		width: 38px;
		height: 38px;
		font-size: 0.74rem;
	}

	.mgr-steps::before {
		inset-block: 19px;
		inset-inline-start: 18px;
	}

	.mgr-step__card {
		padding: 20px;
		border-radius: 17px;
	}

	.mgr-step__header {
		margin-bottom: 20px;
	}

	.mgr-step__title {
		font-size: 1.55rem;
	}

	.mgr-step__footer {
		align-items: stretch;
		flex-direction: column;
	}

	.mgr-subsection--split .mgr-subsection__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.mgr-step__action,
	.mgr-complete {
		width: 100%;
		justify-content: center;
	}

	.mgr-lightbox {
		padding: 14px;
	}

	.mgr-lightbox__dialog {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"close close"
			"image image"
			"previous next"
			"caption caption";
	}

	.mgr-lightbox__previous,
	.mgr-lightbox__next {
		justify-self: center;
		margin: 12px 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mgr-guide *,
	.mgr-guide *::before,
	.mgr-guide *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	.mgr-guide--reveal.is-js [data-mgr-animation] {
		opacity: 1;
		transform: none;
	}
}