.ctt-wrap,
.ctt-wrap * {
	box-sizing: border-box;
}

.ctt-wrap div {
	font-family: inherit;
}

.ctt-heading {
	margin: 0 0 24px 0;
}

.ctt-heading-bold {
	font-weight: 700;
}

.ctt-outer {
	display: flex;
	border: 1px solid #183D2C;
	overflow: hidden;
	width: 100%;
	align-items: stretch;
}

/* ---------- Left: term list ---------- */
.ctt-term-list {
	flex: 0 0 auto;
	width: 100%;
	max-width: 376px;
	padding: 16px 24px;
	background-color: #183D2C;
}

.ctt-term-item {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 12px 0;
	cursor: pointer;
	border-top: 1px solid transparent;
	transition: color 0.2s ease;
}

.ctt-term-item:first-child {
	border-top: none;
}

.ctt-term-item.is-active {
	font-weight: 700;
}

.ctt-term-label {
	flex: 0 0 80px;
	white-space: nowrap;
}

.ctt-term-title {
	flex: 1 1 auto;
	line-height: 1.35;
}

/* ---------- Right: content panel ---------- */
.ctt-content-panel {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 40px;
	position: relative;
	min-width: 0;
}

.ctt-term-content {
	display: none;
}

.ctt-term-content.is-active {
	display: block;
}

.ctt-tools-label,
.ctt-techniques-label {
	margin-bottom: 20px;
}

.ctt-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-bottom: 40px;
}

.ctt-tool-img {
	max-height: 40px;
	width: auto;
	display: block;
	transition: opacity 0.3s ease;
}

.ctt-techniques {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
}

.ctt-technique {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 144px;
}

.ctt-technique-icon {
	display: flex;
	align-items: center;
}

.ctt-technique-icon img {
	width: 20px;
	height: 20px;
	display: block;
}

.ctt-technique-text {
	line-height: 1.4;
}

/* ---------- Mobile pagination dots (hidden on desktop) ---------- */
.ctt-mobile-term-title {
	display: none;
}

.ctt-mobile-dots {
	display: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
	.ctt-outer {
		flex-direction: column;
		border: none;
	}

	/* Term list becomes a horizontal scrollable pill row */
	.ctt-term-list {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		max-width: 100%;
		background: transparent;
		padding: 4px 4px 16px 4px;
		gap: 8px;
	}

	.ctt-term-list::-webkit-scrollbar {
		display: none;
	}

	.ctt-term-item {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		gap: 0;
		padding: 8px 16px;
		border-radius: 999px;
		border-top: none;
		background-color: var( --ctt-mobile-pill-bg, rgba(255,255,255,0.06) );
		color: var( --ctt-mobile-pill-text, rgba(255,255,255,0.7) );
	}

	.ctt-term-item.is-active {
		background-color: var( --ctt-mobile-pill-active-bg, #D9E38A );
		color: var( --ctt-mobile-pill-active-text, #14251a );
	}

	/* Long title hidden in the pill itself — shown inside the card instead */
	.ctt-term-item .ctt-term-title {
		display: none;
	}

	.ctt-term-item .ctt-term-label {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	/* Content becomes a bordered card */
	.ctt-content-panel {
		background-color: var( --ctt-mobile-card-bg, #0d1a14 );
		border: 1px solid var( --ctt-mobile-card-border, #183D2C );
		border-radius: 20px;
		padding: 24px;
	}

	.ctt-mobile-term-title {
		display: block;
		font-weight: 700;
		font-size: 17px;
		line-height: 1.35;
		color: var( --ctt-mobile-title-color, #ffffff );
		margin-bottom: 20px;
		padding-bottom: 16px;
		border-bottom: 1px solid rgba(255,255,255,0.1);
	}

	.ctt-tools-label,
	.ctt-techniques-label {
		text-transform: uppercase;
		font-size: 12px !important;
		letter-spacing: 0.04em;
		margin-bottom: 14px;
	}

	.ctt-tools {
		gap: 10px;
		margin-bottom: 28px;
	}

	.ctt-tool-img {
		max-height: 32px !important;
	}

	.ctt-techniques {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		gap: 24px;
		padding-bottom: 4px;
	}

	.ctt-technique {
		flex: 0 0 auto;
	}

	.ctt-mobile-dots {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		margin-top: 24px;
	}

	.ctt-dot {
		width: 8px;
		height: 8px;
		border-radius: 999px;
		background-color: var( --ctt-dot-inactive, rgba(255,255,255,0.25) );
	}

	.ctt-dot.is-active {
		width: 24px;
		background-color: var( --ctt-dot-active, #D9E38A );
	}
}