.home-faq {
	background: var(--color-white, #fff);
}

.home-faq__inner {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--grid-gap);
}

.home-faq__eyebrow {
	grid-column: 1 / span 3;
	padding-top: 0.7rem;
}

.home-faq__content {
	grid-column: 4 / -1;
}

.home-faq__header {
	display: grid;
	grid-template-columns: repeat(9, minmax(0, 1fr));
	gap: var(--grid-gap);
	margin-bottom: var(--space-lg);
}

.home-faq__header h2 {
	grid-column: 1 / -1;
	max-width: 17ch;
	font-size: clamp(2.5rem, 4.5vw, 5.5rem);
}

.home-faq__header p {
	grid-column: 6 / -1;
	margin-top: var(--space-md);
	color: rgba(16, 16, 16, 0.65);
	font-size: var(--text-medium);
}

.home-faq__list {
	border-top: 1px solid rgba(16, 16, 16, 0.25);
}

.faq-item {
	border-bottom: 1px solid rgba(16, 16, 16, 0.25);
}

.faq-item__summary {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr) 3.5rem;
	align-items: center;
	gap: var(--grid-gap);
	padding-block: clamp(1.5rem, 2.5vw, 2.5rem);
	cursor: pointer;
	list-style: none;
}

.faq-item__summary::-webkit-details-marker {
	display: none;
}

.faq-item__number {
	align-self: start;
	padding-top: 0.5rem;
	font-size: var(--text-small);
	font-weight: 700;
}

.faq-item__question {
	font-size: clamp(1.6rem, 2.8vw, 3.2rem);
	line-height: 1.05;
}

.faq-item__icon {
	position: relative;
	display: grid;
	width: 3.5rem;
	height: 3.5rem;
	place-items: center;
	justify-self: end;
	background: var(--color-dark);
	border-radius: 0.75rem;
}

.faq-item__icon::before,
.faq-item__icon::after {
	position: absolute;
	width: 1rem;
	height: 1px;
	background: var(--color-white);
	content: "";
	transition: transform var(--transition-base);
}

.faq-item__icon::after {
	transform: rotate(90deg);
}

.faq-item[open] .faq-item__icon {
	background: var(--color-accent);
}

.faq-item[open] .faq-item__icon::after {
	transform: rotate(0);
}

.faq-item__answer {
	max-width: 48rem;
	padding: 0 3.5rem 2.5rem calc(3rem + var(--grid-gap));
	color: rgba(16, 16, 16, 0.7);
	font-size: var(--text-medium);
}

@media (max-width: 959px) {
	.home-faq__eyebrow,
	.home-faq__content {
		grid-column: 1 / -1;
	}

	.home-faq__content {
		margin-top: 2rem;
	}

	.home-faq__header p {
		grid-column: 1 / -1;
	}

	.faq-item__summary {
		grid-template-columns: 2rem minmax(0, 1fr) 3rem;
	}

	.faq-item__icon {
		width: 3rem;
		height: 3rem;
	}

	.faq-item__answer {
		padding-left: calc(2rem + var(--grid-gap));
	}
}
.home-faq__title-word {
	display: inline-block;
	will-change: transform, opacity;
}

.faq-item__question,
.faq-item__number,
.faq-item__icon {
	transition:
		color 300ms ease,
		background-color 300ms ease,
		transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item__summary:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
	.faq-item__summary:hover .faq-item__question {
		transform: translateX(0.75rem);
	}

	.faq-item__summary:hover .faq-item__number {
		color: var(--color-accent);
		transform: translateX(0.2rem);
	}

	.faq-item__summary:hover .faq-item__icon {
		background: var(--color-accent);
		transform: rotate(5deg) scale(1.04);
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-faq__title-word {
		opacity: 1 !important;
		transform: none !important;
	}

	.faq-item__question,
	.faq-item__number,
	.faq-item__icon {
		transition: none;
	}
}

.home-faq__title-word {
	display: inline-block;
	will-change: transform, opacity;
}

.faq-item__question,
.faq-item__number,
.faq-item__icon {
	transition:
		color 300ms ease,
		background-color 300ms ease,
		transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item__summary:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
	.faq-item__summary:hover .faq-item__question {
		transform: translateX(0.75rem);
	}

	.faq-item__summary:hover .faq-item__number {
		color: var(--color-accent);
		transform: translateX(0.2rem);
	}

	.faq-item__summary:hover .faq-item__icon {
		background: var(--color-accent);
		transform: rotate(5deg) scale(1.04);
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-faq__title-word {
		opacity: 1 !important;
		transform: none !important;
	}

	.faq-item__question,
	.faq-item__number,
	.faq-item__icon {
		transition: none;
	}
}

.course-faq.section--light {
	background-color: #e4e5e6;
}

.course-faq .faq-item__question {
	font-size: clamp(2rem, 1.4vw, 2.5rem);
}