/* FAQ block — sits under the reading or at the end of a guide.
   Dark surface by design: the home story and every inner page already paint
   the night background, so the block only has to agree with it. */

.tk-faq {
	--tk-faq-bg: rgba(255, 255, 255, .035);
	--tk-faq-line: rgba(255, 255, 255, .12);
	--tk-faq-ink: #dff1f6;
	--tk-faq-muted: rgba(223, 241, 246, .68);
	--tk-faq-accent: #9b7cf6;

	padding: 76px 20px 84px;
	color: var(--tk-faq-ink);
}

.tk-faq__wrap {
	max-width: 760px;
	margin: 0 auto;
}

.tk-faq__h {
	margin: 0 0 10px;
	font-size: clamp(24px, 3.4vw, 32px);
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.2;
	color: var(--tk-faq-ink);
}

.tk-faq__lead {
	margin: 0 0 28px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--tk-faq-muted);
}

.tk-faq__list {
	border-top: 1px solid var(--tk-faq-line);
}

.tk-faq__item {
	border-bottom: 1px solid var(--tk-faq-line);
}

.tk-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 21px 4px;
	cursor: pointer;
	list-style: none;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--tk-faq-ink);
	transition: color .18s ease;
}

.tk-faq__q::-webkit-details-marker { display: none; }
.tk-faq__q::marker { content: ''; }

.tk-faq__q:hover,
.tk-faq__item[open] .tk-faq__q { color: #fff; }

.tk-faq__chev {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--tk-faq-muted);
	transition: transform .2s ease, color .18s ease;
}

.tk-faq__item[open] .tk-faq__chev {
	transform: rotate(180deg);
	color: var(--tk-faq-accent);
}

.tk-faq__a {
	padding: 0 4px 22px;
}

.tk-faq__a p {
	margin: 0;
	max-width: 68ch;
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--tk-faq-muted);
}

.tk-faq__more {
	margin-top: 12px !important;
	font-size: 14px;
}

.tk-faq__more a {
	color: var(--tk-faq-accent);
	text-decoration: none;
	border-bottom: 1px solid rgba(155, 124, 246, .35);
	padding-bottom: 1px;
}

.tk-faq__more a:hover { border-bottom-color: var(--tk-faq-accent); }

/* Respect the OS setting: no motion for the chevron. */
@media (prefers-reduced-motion: reduce) {
	.tk-faq__chev { transition: none; }
}