/* =========================================================
 * Tech Resolve — Website Redesign FAQ
 * ======================================================= */
.tr-redesign-faq {
	position: relative;
	overflow: hidden;
	padding:
		clamp(110px, 10vw, 175px)
		var(--tr-gutter);
	color:
		#101c15;
	background:
		#f4f6f3;
}
/* =========================================================
 * Background
 * ======================================================= */
.tr-redesign-faq::before {
	content: "";
	position: absolute;
	top: -290px;
	left: -250px;
	width: 760px;
	height: 760px;
	pointer-events: none;
	background:
		radial-gradient(
			circle,
			rgba(25, 224, 120, 0.065),
			transparent 68%
		);
}
.tr-redesign-faq::after {
	content: "";
	position: absolute;
	top: 0;
	right: 18%;
	width: 1px;
	height: 100%;
	pointer-events: none;
	background:
		linear-gradient(
			to bottom,
			transparent,
			rgba(8, 185, 93, 0.07),
			transparent
		);
}
/* =========================================================
 * Shell
 * ======================================================= */
.tr-redesign-faq__shell {
	position: relative;
	z-index: 2;
	width:
		min(100%, var(--tr-container));
	margin:
		0 auto;
}
/* =========================================================
 * Header
 * ======================================================= */
.tr-redesign-faq__header {
	display: grid;
	grid-template-columns:
		minmax(0, 1.08fr)
		minmax(330px, 0.75fr);
	align-items:
		end;
	gap:
		clamp(50px, 8vw, 120px);
	margin-bottom:
		clamp(65px, 8vw, 100px);
}
.tr-redesign-faq__eyebrow {
	display: block;
	margin-bottom:
		18px;
	color:
		var(--tr-green-deep);
	font-size:
		var(--tr-text-ui);
	font-weight:
		var(--tr-weight-label);
	line-height:
		var(--tr-line-ui);
	letter-spacing:
		0.15em;
}
.tr-redesign-faq__header h2 {
	max-width:
		900px;
	margin:
		0;
	color:
		#0b1811;
	font-size:
		clamp(44px, 5.15vw, 74px);
	font-weight:
		800;
	line-height:
		0.99;
	letter-spacing:
		-0.055em;
}
.tr-redesign-faq__intro > p {
	max-width:
		570px;
	margin:
		0;
	color:
		#69766e;
	font-size:
		var(--tr-text-body);
	font-weight:
		var(--tr-weight-body);
	line-height:
		var(--tr-line-body);
}
/* =========================================================
 * Intro Meta
 * ======================================================= */
.tr-redesign-faq__intro-meta {
	display: flex;
	align-items: center;
	gap:
		9px;
	margin-top:
		28px;
	padding-top:
		16px;
	border-top:
		1px solid #d9e0dc;
	color:
		#9ba59f;
	font-size:
		var(--tr-text-label);
	font-weight:
		var(--tr-weight-label);
	line-height:
		var(--tr-line-ui);
	letter-spacing:
		0.08em;
}
.tr-redesign-faq__intro-meta i {
	flex:
		1;
	height:
		1px;
	background:
		#d8dfdb;
}
.tr-redesign-faq__intro-meta strong {
	color:
		var(--tr-green-deep);
	font-size:
		inherit;
	font-weight:
		inherit;
}
/* =========================================================
 * Board
 * ======================================================= */
.tr-redesign-faq__board {
	position: relative;
	overflow: hidden;
	background:
		#ffffff;
	border:
		1px solid #dce4df;
	border-radius:
		25px;
	box-shadow:
		0 38px 110px rgba(9, 31, 18, 0.07);
}
/* =========================================================
 * Board Top
 * ======================================================= */
.tr-redesign-faq__board-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap:
		20px;
	min-height:
		54px;
	padding:
		0
		20px;
	color:
		#929c96;
	border-bottom:
		1px solid #e2e8e4;
	font-size:
		var(--tr-text-label);
	font-weight:
		var(--tr-weight-label);
	line-height:
		var(--tr-line-ui);
	letter-spacing:
		0.12em;
}
.tr-redesign-faq__board-top > div {
	display: flex;
	align-items: center;
	gap:
		9px;
}
.tr-redesign-faq__status {
	width:
		6px;
	height:
		6px;
	background:
		var(--tr-green);
	border-radius:
		50%;
	box-shadow:
		0 0 0 5px rgba(25, 224, 120, 0.08);
}
/* =========================================================
 * Board Body
 * ======================================================= */
.tr-redesign-faq__board-body {
	display: grid;
	grid-template-columns:
		220px
		minmax(0, 1fr);
}
/* =========================================================
 * Index
 * ======================================================= */
.tr-redesign-faq__index {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height:
		100%;
	padding:
		38px
		30px;
	color:
		#ffffff;
	background:
		#08150f;
	border-right:
		1px solid #dce4df;
}
.tr-redesign-faq__index::before {
	content: "";
	position: absolute;
	top:
		-130px;
	left:
		-150px;
	width:
		390px;
	height:
		390px;
	background:
		radial-gradient(
			circle,
			rgba(25, 224, 120, 0.11),
			transparent 68%
		);
	pointer-events:
		none;
}
.tr-redesign-faq__index > * {
	position: relative;
	z-index: 2;
}
.tr-redesign-faq__index > span {
	color:
		var(--tr-green);
	font-size:
		var(--tr-text-label);
	font-weight:
		var(--tr-weight-label);
	line-height:
		var(--tr-line-ui);
	letter-spacing:
		0.12em;
}
.tr-redesign-faq__index > strong {
	margin-top:
		16px;
	color:
		#ffffff;
	font-size:
		clamp(55px, 6vw, 86px);
	font-weight:
		800;
	line-height:
		0.9;
	letter-spacing:
		-0.06em;
}
/* =========================================================
 * Index Lines
 * ======================================================= */
.tr-redesign-faq__index > div {
	display: grid;
	gap:
		9px;
	margin-top:
		45px;
}
.tr-redesign-faq__index > div i {
	display: block;
	width:
		100%;
	height:
		1px;
	background:
		linear-gradient(
			to right,
			rgba(25, 224, 120, 0.5),
			rgba(255, 255, 255, 0.035)
		);
}
.tr-redesign-faq__index > div i:nth-child(2n) {
	width:
		72%;
}
.tr-redesign-faq__index > div i:nth-child(3n) {
	width:
		88%;
}
.tr-redesign-faq__index > small {
	margin-top:
		auto;
	padding-top:
		60px;
	color:
		rgba(255, 255, 255, 0.22);
	font-size:
		var(--tr-text-label);
	font-weight:
		var(--tr-weight-label);
	line-height:
		var(--tr-line-ui);
	letter-spacing:
		0.1em;
}
/* =========================================================
 * Questions
 * ======================================================= */
.tr-redesign-faq__questions {
	min-width:
		0;
}
/* =========================================================
 * FAQ Item
 * ======================================================= */
.tr-redesign-faq__item {
	position: relative;
	border-bottom:
		1px solid #e3e8e5;
}
.tr-redesign-faq__item:last-child {
	border-bottom:
		0;
}
/* =========================================================
 * Trigger
 * Astra Button Reset
 * ======================================================= */
.tr-redesign-faq .tr-redesign-faq__trigger,
.tr-redesign-faq .tr-redesign-faq__trigger:hover,
.tr-redesign-faq .tr-redesign-faq__trigger:focus,
.tr-redesign-faq .tr-redesign-faq__trigger:active,
.tr-redesign-faq .tr-redesign-faq__trigger[aria-expanded="true"],
.tr-redesign-faq .tr-redesign-faq__trigger[aria-expanded="false"] {
	display: grid;
	grid-template-columns:
		52px
		minmax(0, 1fr)
		42px;
	align-items:
		center;
	gap:
		20px;
	width:
		100%;
	min-height:
		104px;
	margin:
		0;
	padding:
		22px
		30px;
	color:
		#17231c !important;
	background:
		transparent !important;
	background-color:
		transparent !important;
	border:
		0 !important;
	border-radius:
		0 !important;
	outline:
		0 !important;
	box-shadow:
		none !important;
	font-family:
		inherit;
	text-align:
		left;
	cursor:
		pointer;
	-webkit-appearance:
		none;
	appearance:
		none;
	-webkit-tap-highlight-color:
		transparent;
	transition:
		background-color 180ms ease;
}
.tr-redesign-faq .tr-redesign-faq__trigger:hover {
	background:
		#fafcfb !important;
}
.tr-redesign-faq__item.is-open .tr-redesign-faq__trigger {
	background:
		linear-gradient(
			90deg,
			rgba(25, 224, 120, 0.045),
			transparent 72%
		) !important;
}
.tr-redesign-faq .tr-redesign-faq__trigger:focus-visible {
	outline:
		2px solid rgba(8, 185, 93, 0.35) !important;
	outline-offset:
		-4px !important;
}
/* =========================================================
 * Number
 * ======================================================= */
.tr-redesign-faq__number {
	color:
		#aab4ae;
	font-size:
		var(--tr-text-label);
	font-weight:
		var(--tr-weight-label);
	line-height:
		var(--tr-line-ui);
}
/* =========================================================
 * Question
 * ======================================================= */
.tr-redesign-faq__trigger > strong {
	max-width:
		800px;
	color:
		#17231c !important;
	font-size:
		clamp(16px, 1.65vw, 22px);
	font-weight:
		var(--tr-weight-bold);
	line-height:
		1.25;
	letter-spacing:
		-0.02em;
}
/* =========================================================
 * Toggle
 * ======================================================= */
.tr-redesign-faq__toggle {
	position: relative;
	display: grid;
	place-items:
		center;
	width:
		37px;
	height:
		37px;
	border:
		1px solid #dbe3de;
	border-radius:
		50%;
	background:
		#ffffff;
	transition:
		background 180ms ease,
		border-color 180ms ease,
		transform 280ms var(--tr-ease);
}
.tr-redesign-faq__toggle::before,
.tr-redesign-faq__toggle::after {
	content: "";
	position: absolute;
	width:
		12px;
	height:
		1px;
	background:
		#748078;
	transition:
		transform 280ms var(--tr-ease),
		background 180ms ease;
}
.tr-redesign-faq__toggle::after {
	transform:
		rotate(90deg);
}
.tr-redesign-faq__item.is-open .tr-redesign-faq__toggle {
	background:
		var(--tr-green);
	border-color:
		var(--tr-green);
	transform:
		rotate(180deg);
}
.tr-redesign-faq__item.is-open .tr-redesign-faq__toggle::before,
.tr-redesign-faq__item.is-open .tr-redesign-faq__toggle::after {
	background:
		#06100d;
}
.tr-redesign-faq__item.is-open .tr-redesign-faq__toggle::after {
	transform:
		rotate(0deg);
}
/* =========================================================
 * Panel
 * ======================================================= */
.tr-redesign-faq__panel {
	display: grid;
	grid-template-rows:
		0fr;
	opacity:
		0;
	visibility:
		hidden;
	background:
		linear-gradient(
			90deg,
			rgba(25, 224, 120, 0.045),
			transparent 72%
		);
	transition:
		grid-template-rows 320ms var(--tr-ease),
		opacity 200ms ease,
		visibility 0s linear 320ms;
}
.tr-redesign-faq__item.is-open .tr-redesign-faq__panel {
	grid-template-rows:
		1fr;
	opacity:
		1;
	visibility:
		visible;
	transition:
		grid-template-rows 320ms var(--tr-ease),
		opacity 220ms ease,
		visibility 0s linear 0s;
}
.tr-redesign-faq__panel-inner {
	overflow:
		hidden;
}
/* =========================================================
 * Answer
 * ======================================================= */
.tr-redesign-faq__answer {
	display: grid;
	grid-template-columns:
		52px
		minmax(0, 1fr);
	gap:
		20px;
	padding:
		0
		30px
		31px;
}
.tr-redesign-faq__answer > span {
	padding-top:
		3px;
	color:
		var(--tr-green-deep);
	font-size:
		var(--tr-text-label);
	font-weight:
		var(--tr-weight-label);
	line-height:
		var(--tr-line-ui);
	letter-spacing:
		0.09em;
}
.tr-redesign-faq__answer p {
	max-width:
		810px;
	margin:
		0;
	color:
		#68756d;
	font-size:
		var(--tr-text-card);
	font-weight:
		var(--tr-weight-body);
	line-height:
		var(--tr-line-card);
}
/* =========================================================
 * Closing
 * ======================================================= */
.tr-redesign-faq__closing {
	display: grid;
	grid-template-columns:
		245px
		minmax(0, 1fr)
		auto;
	align-items:
		center;
	gap:
		clamp(30px, 5vw, 70px);
	padding:
		clamp(30px, 4vw, 45px)
		clamp(30px, 4vw, 54px);
	color:
		#ffffff;
	background:
		#08150f;
	border-top:
		1px solid rgba(255, 255, 255, 0.06);
}
.tr-redesign-faq__closing > div {
	display: grid;
	gap:
		6px;
}
.tr-redesign-faq__closing > div > span {
	color:
		rgba(255, 255, 255, 0.2);
	font-size:
		var(--tr-text-label);
	font-weight:
		var(--tr-weight-label);
	line-height:
		var(--tr-line-ui);
	letter-spacing:
		0.11em;
}
.tr-redesign-faq__closing > div > strong {
	color:
		var(--tr-green);
	font-size:
		var(--tr-text-ui);
	font-weight:
		var(--tr-weight-label);
	line-height:
		var(--tr-line-ui);
	letter-spacing:
		0.1em;
}
.tr-redesign-faq__closing > p {
	max-width:
		800px;
	margin:
		0;
	color:
		rgba(255, 255, 255, 0.57);
	font-size:
		var(--tr-text-body);
	font-weight:
		var(--tr-weight-body);
	line-height:
		var(--tr-line-body);
}
.tr-redesign-faq__closing-mark {
	display: grid;
	place-items:
		center;
	width:
		38px;
	height:
		38px;
	color:
		#06100d;
	background:
		var(--tr-green);
	border-radius:
		50%;
	font-size:
		16px;
}
/* =========================================================
 * Tablet
 * Basic fallback only
 * ======================================================= */
@media (max-width: 1000px) {
	.tr-redesign-faq__board-body {
		grid-template-columns:
			170px
			minmax(0, 1fr);
	}
	.tr-redesign-faq .tr-redesign-faq__trigger {
		grid-template-columns:
			40px
			minmax(0, 1fr)
			38px;
		padding:
			21px
			22px;
	}
	.tr-redesign-faq__answer {
		grid-template-columns:
			40px
			minmax(0, 1fr);
		padding:
			0
			22px
			29px;
	}
}
/* =========================================================
 * Mobile
 * Basic fallback only
 * ======================================================= */
@media (max-width: 720px) {
	.tr-redesign-faq {
		padding:
			90px
			16px;
	}
	.tr-redesign-faq__header {
		grid-template-columns:
			1fr;
		gap:
			30px;
		margin-bottom:
			50px;
	}
	.tr-redesign-faq__header h2 {
		font-size:
			clamp(40px, 11vw, 58px);
	}
	.tr-redesign-faq__intro-meta {
		display:
			none;
	}
	.tr-redesign-faq__board-body {
		grid-template-columns:
			1fr;
	}
	.tr-redesign-faq__index {
		min-height:
			210px;
		padding:
			30px
			24px;
		border-right:
			0;
		border-bottom:
			1px solid #dce4df;
	}
	.tr-redesign-faq__index > div {
		display:
			none;
	}
	.tr-redesign-faq__index > small {
		padding-top:
			28px;
	}
	.tr-redesign-faq .tr-redesign-faq__trigger {
		grid-template-columns:
			30px
			minmax(0, 1fr)
			34px;
		gap:
			10px;
		min-height:
			90px;
		padding:
			20px
			17px;
	}
	.tr-redesign-faq__toggle {
		width:
			33px;
		height:
			33px;
	}
	.tr-redesign-faq__answer {
		grid-template-columns:
			1fr;
		gap:
			10px;
		padding:
			0
			17px
			25px
			57px;
	}
	.tr-redesign-faq__closing {
		grid-template-columns:
			1fr;
		gap:
			20px;
		padding:
			30px
			24px;
	}
	.tr-redesign-faq__closing-mark {
		display:
			none;
	}
}
/* =========================================================
 * Reduced Motion
 * ======================================================= */
@media (prefers-reduced-motion: reduce) {
	.tr-redesign-faq__trigger,
	.tr-redesign-faq__panel,
	.tr-redesign-faq__toggle,
	.tr-redesign-faq__toggle::before,
	.tr-redesign-faq__toggle::after {
		transition:
			none !important;
	}
}
/* =========================================================
 * Control Center States
 * ======================================================= */
.tr-redesign-faq--no-glow::before {display:none;}
.tr-redesign-faq--no-line::after {display:none;}
.tr-redesign-faq__board-body--no-index {grid-template-columns:minmax(0,1fr);}
.tr-redesign-faq .tr-redesign-faq__trigger--no-code {grid-template-columns:minmax(0,1fr) 42px;}
.tr-redesign-faq .tr-redesign-faq__trigger--no-toggle {grid-template-columns:52px minmax(0,1fr);}
.tr-redesign-faq .tr-redesign-faq__trigger--no-code.tr-redesign-faq__trigger--no-toggle {grid-template-columns:minmax(0,1fr);}
.tr-redesign-faq__answer--no-label {grid-template-columns:minmax(0,1fr);}
@media (max-width:1000px) {
	.tr-redesign-faq .tr-redesign-faq__trigger--no-code {grid-template-columns:minmax(0,1fr) 38px;}
	.tr-redesign-faq .tr-redesign-faq__trigger--no-toggle {grid-template-columns:40px minmax(0,1fr);}
	.tr-redesign-faq .tr-redesign-faq__trigger--no-code.tr-redesign-faq__trigger--no-toggle {grid-template-columns:minmax(0,1fr);}
}
@media (max-width:720px) {
	.tr-redesign-faq .tr-redesign-faq__trigger--no-code {grid-template-columns:minmax(0,1fr) 34px;}
	.tr-redesign-faq .tr-redesign-faq__trigger--no-toggle {grid-template-columns:30px minmax(0,1fr);}
	.tr-redesign-faq .tr-redesign-faq__trigger--no-code.tr-redesign-faq__trigger--no-toggle {grid-template-columns:minmax(0,1fr);}
	.tr-redesign-faq__answer--no-label {padding-left:17px;}
}