/* Accordion
***************************************************************************************************/

.accordion {
	display:grid;
	max-width:820px;
	margin-top:32px;
	gap:12px;
}

.accordion__item {
	overflow:hidden;
	background:rgb(var(--bg-card) / 0.6);
	border:1px solid var(--border);
	border-radius:12px;
	transition:border-color 0.2s ease, background-color 0.2s ease;
}

.accordion__item:hover,
.accordion__item[open] {
	background:rgb(var(--bg-card) / 0.85);
	border-color:var(--border-light);
}

.accordion__title {
	display:flex;
	min-height:72px;
	padding:20px 24px;
	gap:20px;
	align-items:center;
	justify-content:space-between;
	font-size:18px;
	font-weight:600;
	line-height:1.4;
	color:var(--text-primary);
	cursor:pointer;
	list-style:none;
	transition:color 0.2s ease;
}

.accordion__title::-webkit-details-marker {
	display:none;
}

.accordion__title::after {
	content:'＋';
	display:grid;
	flex:0 0 32px;
	width:32px;
	height:32px;
	place-items:center;
	font-size:24px;
	font-weight:300;
	line-height:1;
	color:rgba(var(--accent) / 1);
	background:rgba(var(--accent) / 0.12);
	border:1px solid rgba(var(--accent) / 0.35);
	border-radius:50%;
	transition:transform 0.25s ease, background-color 0.2s ease;
}

.accordion__item[open] .accordion__title::after {
	transform:rotate(45deg);
	background:rgba(var(--accent) / 0.2);
}

.accordion__title:focus-visible {
	outline:2px solid rgba(var(--accent) / 1);
	outline-offset:-3px;
	border-radius:11px;
}

.accordion__content {
	padding:0 76px 24px 24px;
	border-top:1px solid var(--border);
}

.accordion__content > *:first-child {
	margin-top:20px;
}

.accordion__content p {
	font-size:15px;
	line-height:1.7;
}

@media (max-width:768px) {
	.accordion {
		margin-top:24px;
	}

	.accordion__title {
		min-height:64px;
		padding:17px 18px;
		gap:14px;
		font-size:16px;
	}

	.accordion__content {
		padding:0 18px 20px;
	}
}


/* Steps
***************************************************************************************************/

.steps {
	position:relative;
	display:grid;
	grid-template-columns:repeat(5, 1fr);
	max-width:1200px;
	margin-top:48px;
	gap:16px;
	counter-reset:step;
}
/*
.steps::before {
	content:'';
	position:absolute;
	top:27px;
	right:10%;
	left:10%;
	height:1px;
	background:rgba(var(--accent) / 0.55);
}
*/
.steps > li {
	position:relative;
	z-index:1;
	display:grid;
	min-width:0;
	margin-top:27px;
	padding:50px 22px 28px;
	align-content:start;
	background:rgb(var(--bg-card) / 0.55);
	border:1px solid var(--border);
	border-radius:12px;
	counter-increment:step;
	transition:transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.steps > li:hover {
	transform:translateY(-4px);
	background:rgb(var(--bg-card) / 0.85);
	border-color:var(--border-light);
}

.steps > li::before {
	content:counter(step, decimal-leading-zero);
	position:absolute;
	top:-27px;
	left:50%;
	display:grid;
	width:54px;
	height:54px;
	place-items:center;
	font-size:14px;
	font-weight:600;
	letter-spacing:0.05em;
	color:var(--text-primary);
	background:rgb(var(--bg-primary) / 1);
	border:1px solid rgba(var(--accent) / 0.65);
	border-radius:50%;
	box-shadow:0 0 22px rgba(var(--accent) / 0.2);
	transform:translateX(-50%);
}

.steps h3 {
	font-size:19px;
	margin-bottom:12px;
}

.steps p {
	font-size:14px;
	line-height:1.65;
}

@media (max-width:900px) {
	.steps {
		grid-template-columns:1fr;
		margin-top:32px;
		gap:12px;
	}

	.steps > li {
		min-height:112px;
		margin-top:0;
		padding:24px 24px 24px 94px;
	}

	.steps > li:hover {
		transform:translateX(4px);
	}

	.steps > li::before {
		top:50%;
		left:20px;
		transform:translateY(-50%);
	}
}