.lb-install-guide {
	display: grid;
	gap: 12px;
	width: min(100%, 980px);
	margin: 0 auto;
	text-align: start;
}

.lb-install-guide .lb-install-method {
	min-width: 0;
	border: 1px solid #ead9d7;
	border-radius: var(--lb-radius);
	background: var(--lb-white);
}

.lb-install-guide .lb-install-method-summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: .2rem .75rem;
	align-items: center;
	min-height: 60px;
	padding: .8rem clamp(.85rem, 3vw, 1.4rem);
	color: var(--lb-ink);
	line-height: 1.24;
	list-style: none;
	cursor: pointer;
}

.lb-install-method-summary::-webkit-details-marker { display: none; }
.lb-install-method-summary strong { grid-column: 1; font-size: clamp(1rem, 2.2vw, 1.24rem); font-weight: 800; }
.lb-install-method-summary small { grid-column: 1; color: var(--lb-muted); font-size: .8rem; font-weight: 650; }
.lb-install-method-summary > svg { grid-column: 2; grid-row: 1 / span 2; color: var(--lb-red-hover); }
.lb-install-method[open] > .lb-install-method-summary > svg { transform: rotate(180deg); }
.lb-install-method-summary:focus-visible { outline-offset: -4px; }

.lb-install-steps {
	container-type: inline-size;
	display: grid;
	gap: clamp(10px, 1.65vw, 20px);
	width: min(100%, 980px);
	margin: 0 auto;
	padding: 0 clamp(.5rem, 1.6vw, 1rem) clamp(.5rem, 1.6vw, 1rem);
	list-style: none;
	text-align: start;
}

.lb-install-step {
	display: grid;
	grid-template-columns: minmax(0, 47%) minmax(0, 1fr);
	min-block-size: 118px;
	min-block-size: clamp(112px, 23cqw, 225px);
	overflow: hidden;
	border: 1px solid #ead9d7;
	border-radius: var(--lb-radius);
	background: #fbefed;
}

.lb-install-step:has(.lb-install-step-media--complete) { min-block-size: clamp(180px, 34cqw, 325px); }

.lb-install-step-media {
	position: relative;
	isolation: isolate;
	display: grid;
	min-width: 0;
	place-items: center;
	background: #21171a;
	color: #ff9da3;
}

.lb-install-step-media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lb-install-step-media--complete:has(img) { background: #f7f4f2; }
.lb-install-step-media--complete img { object-fit: contain; }

.lb-install-step-media--detail:has(svg[role="img"]) { background: #f7f4f2; }
.lb-install-step-media > svg[role="img"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.lb-install-step-media:has(img)::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23grain)'/%3E%3C/svg%3E");
	mix-blend-mode: soft-light;
	opacity: .22;
	pointer-events: none;
}

.lb-install-step-copy {
	align-self: center;
	min-width: 0;
	padding: 1rem;
	padding: clamp(.75rem, 4.5cqw, 2.5rem);
}

.lb-install-step-copy .lb-install-step-index {
	margin: 0 0 .42rem;
	color: var(--lb-red-hover);
	font-size: .69rem;
	font-weight: 800;
	letter-spacing: .11em;
	line-height: 1.35;
	text-transform: uppercase;
}

.lb-install-step-copy h3 {
	margin: 0;
	color: var(--lb-ink);
	font-size: clamp(1.08rem, 3.7cqw, 1.95rem);
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: 1.09;
}

.lb-install-step-copy .lb-install-step-text {
	max-width: 37ch;
	margin: .44rem 0 0;
	color: #635057;
	font-size: clamp(.84rem, 2.35cqw, 1rem);
	line-height: 1.48;
}

@container (max-width: 440px) {
	.lb-install-step { grid-template-columns: minmax(0, 41%) minmax(0, 1fr); }
	.lb-install-step:has(.lb-install-step-media--complete) { grid-template-columns: minmax(0, 1fr); }
	.lb-install-step-media--complete { aspect-ratio: 4 / 3; }
	.lb-install-step-copy { padding: .8rem; }
	.lb-install-step-copy .lb-install-step-index { margin-bottom: .27rem; }
	.lb-install-step-copy .lb-install-step-text { margin-top: .36rem; }
}