/*
 * Shared LegalProd presentation for the FAQ and final CTA modules.
 *
 * Sections are deliberately namespaced by the updater:
 * - #tia-faq for native Theme IA accordions;
 * - #tia-final-cta for native Theme IA final CTAs.
 *
 * The current home keeps its trusted code nodes (#tia-home-faq and
 * #tia-home-cta). Their selectors live here too so both structures share the
 * same visual contract without styling unrelated accordions or buttons.
 */

:where(#tia-faq, #tia-home-faq) {
	background: var(--tia-color-bg, #fff) !important;
	color: var(--tia-color-text, #1e1e1e);
}

#tia-faq > .tia-container {
	padding-block: clamp(82px, 8vw, 112px);
}

#tia-faq .tia-row,
#tia-faq .tia-col {
	min-width: 0;
	width: 100%;
}

#tia-faq .tia-heading {
	margin: 0 auto clamp(34px, 4vw, 52px);
	max-width: 780px;
	color: var(--tia-color-text, #1e1e1e);
	font-family: var(--tia-font-heading);
	font-size: clamp(var(--tia-text-2xl, 2rem), 4.5vw, var(--tia-text-3xl, 3rem));
	font-weight: var(--tia-weight-bold, 700);
	letter-spacing: var(--tia-tracking-heading, -0.03em);
	line-height: var(--tia-leading-heading, 1.08);
	text-align: center;
}

#tia-faq .tia-accordion {
	display: grid;
	gap: 12px;
	margin: 0 auto;
	max-width: 1040px;
	width: 100%;
}

#tia-faq .tia-accordion__item {
	overflow: hidden;
	border: 1px solid #e5e1ee;
	border-radius: 18px;
	background: #fff;
	transition:
		border-color 240ms ease,
		box-shadow 240ms ease,
		background-color 240ms ease;
}

#tia-faq .tia-accordion__item:hover,
#tia-faq .tia-accordion__item[open] {
	border-color: #cbc2ff;
	box-shadow: 0 14px 34px rgba(42, 31, 92, 0.07);
}

#tia-faq .tia-accordion__item[open] {
	background: #fcfbff;
}

#tia-faq .tia-accordion__summary {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 78px;
	padding: 25px 24px 25px 26px;
	color: var(--tia-color-text, #1e1e1e);
}

#tia-faq .tia-accordion__summary:hover {
	color: var(--tia-color-text, #1e1e1e);
}

#tia-faq .tia-accordion__summary:focus {
	outline: 0;
}

#tia-faq .tia-accordion__summary:focus-visible {
	border-radius: 16px;
	box-shadow: inset 0 0 0 2px rgba(82, 51, 255, 0.34);
}

#tia-faq .tia-accordion__title {
	font-family: var(--tia-font-heading);
	font-size: clamp(17px, 1.55vw, 19px);
	font-weight: var(--tia-weight-bold, 700);
	letter-spacing: var(--tia-tracking-heading, -0.02em);
	line-height: 1.35;
}

#tia-faq .tia-accordion__icon {
	position: relative;
	display: block;
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #f1eeff;
	color: #5233ff;
	transform: scale(1);
	transition:
		background-color 260ms ease,
		color 260ms ease,
		transform 260ms ease;
}

#tia-faq .tia-accordion__icon::before,
#tia-faq .tia-accordion__icon::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 2px;
	background: currentColor;
	content: "";
	transform: translate(-50%, -50%);
	transform-origin: center;
	transition:
		opacity 220ms ease,
		transform 260ms cubic-bezier(.2, .8, .2, 1);
}

#tia-faq .tia-accordion__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

#tia-faq .tia-accordion__item[open] .tia-accordion__icon {
	background: #5233ff;
	color: #fff;
	transform: scale(1.04);
}

#tia-faq .tia-accordion__item[open] .tia-accordion__icon::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
}

#tia-faq .tia-accordion__panel {
	max-width: none;
	padding: 4px 78px 25px 26px;
	color: var(--tia-color-text-muted, #65616f);
	font-family: var(--tia-font-body);
	font-size: 15px;
	line-height: 1.65;
	animation: lptia-shared-faq-answer-in 260ms ease both;
}

#tia-faq .tia-accordion__panel > :first-child {
	margin-top: 0;
}

#tia-faq .tia-accordion__panel > :last-child {
	margin-bottom: 0;
}

#tia-home-faq .lp-faq {
	margin: 0 auto;
	max-width: 1040px;
	padding-block: clamp(82px, 8vw, 112px);
	width: 100%;
}

#tia-home-faq .lp-faq .lp-section-heading {
	margin-bottom: clamp(34px, 4vw, 52px);
}

#tia-home-faq .lp-faq-list {
	display: grid;
	gap: 12px;
	border-top: 0;
}

#tia-home-faq .lp-faq details {
	overflow: hidden;
	border: 1px solid #e5e1ee;
	border-radius: 18px;
	background: #fff;
	transition:
		border-color 240ms ease,
		box-shadow 240ms ease,
		background-color 240ms ease;
}

#tia-home-faq .lp-faq details:hover,
#tia-home-faq .lp-faq details[open] {
	border-color: #cbc2ff;
	box-shadow: 0 14px 34px rgba(42, 31, 92, 0.07);
}

#tia-home-faq .lp-faq details[open] {
	background: #fcfbff;
}

#tia-home-faq .lp-faq summary {
	display: block;
	min-height: 78px;
	padding: 25px 78px 25px 26px !important;
	position: relative;
	font-size: clamp(17px, 1.55vw, 19px);
	font-weight: var(--tia-weight-bold, 700);
	line-height: 1.35;
}

#tia-home-faq .lp-faq summary:focus {
	outline: 0;
}

#tia-home-faq .lp-faq summary:focus-visible {
	border-radius: 16px;
	box-shadow: inset 0 0 0 2px rgba(82, 51, 255, 0.34);
}

#tia-home-faq .lp-faq summary::before {
	position: absolute;
	top: 50%;
	right: 24px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background:
		linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
		#f1eeff;
	color: #5233ff;
	content: "";
	transform: translateY(-50%);
	transition:
		background-color 260ms ease,
		color 260ms ease,
		transform 260ms ease;
}

#tia-home-faq .lp-faq summary::after {
	position: absolute;
	top: calc(50% - 7px);
	right: 42px;
	width: 2px;
	height: 14px;
	background: #5233ff;
	content: "";
	transform: scaleY(1);
	transform-origin: center;
	transition:
		opacity 220ms ease,
		transform 260ms cubic-bezier(.2, .8, .2, 1);
}

#tia-home-faq .lp-faq details[open] summary::before {
	background-color: #5233ff;
	color: #fff;
	transform: translateY(-50%) scale(1.04);
}

#tia-home-faq .lp-faq details[open] summary::after {
	opacity: 0;
	transform: scaleY(0);
}

#tia-home-faq .lp-faq-answer {
	max-width: none;
	padding: 4px 78px 25px 26px !important;
	animation: lptia-shared-faq-answer-in 260ms ease both;
}

#tia-home-faq .lp-faq-answer p {
	font-size: 15px;
	line-height: 1.65;
}

@keyframes lptia-shared-faq-answer-in {
	from {
		opacity: 0;
		transform: translateY(-5px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

:where(#tia-final-cta, #tia-home-cta) {
	background: #0a0a1c !important;
	color: #fff;
}

#tia-final-cta > .tia-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(26px, 3vw, 36px);
	padding-block: clamp(84px, 9vw, 124px);
	text-align: center;
}

#tia-final-cta .tia-row,
#tia-final-cta .tia-col {
	min-width: 0;
	width: 100%;
}

#tia-final-cta .tia-row {
	margin: 0 auto;
	max-width: 960px;
}

#tia-final-cta .tia-col {
	display: grid;
	justify-items: center;
}

#tia-final-cta .tia-body {
	margin: 0 auto;
	color: rgba(255, 255, 255, 0.78);
	text-align: center;
}

#tia-final-cta .tia-row:first-child .tia-body:first-child {
	max-width: 820px;
	color: #fff;
	font-family: var(--tia-font-heading);
	font-size: clamp(var(--tia-text-2xl, 2rem), 4.5vw, var(--tia-text-3xl, 3rem));
	font-weight: var(--tia-weight-bold, 700);
	letter-spacing: var(--tia-tracking-heading, -0.03em);
	line-height: var(--tia-leading-heading, 1.08);
}

#tia-final-cta .tia-row:first-child .tia-body:first-child > :is(h1, h2, h3) {
	margin: 0;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: inherit;
}

#tia-final-cta .tia-row:first-child .tia-body:not(:first-child) {
	max-width: 720px;
	font-size: var(--tia-text-lg, 1.125rem);
	line-height: var(--tia-leading-body, 1.65);
}

#tia-final-cta .tia-body :where(p, aside) {
	margin: 0;
}

#tia-final-cta .tia-row:first-child .tia-body + .tia-body {
	margin-top: var(--tia-space-4, 1rem);
}

#tia-final-cta .tia-body + .tia-btn {
	margin-top: clamp(24px, 3vw, 36px);
}

#tia-final-cta .tia-btn:not([data-tia-button-preset="legalprod-split-arrow"]) {
	align-self: center;
	justify-content: center;
	min-height: 48px;
	border-color: #fff;
	border-radius: var(--tia-radius-full, 999px);
	background: #fff;
	color: #0a0a1c;
	font-weight: var(--tia-weight-bold, 700);
}

#tia-final-cta .tia-btn:not([data-tia-button-preset="legalprod-split-arrow"]):hover,
#tia-final-cta .tia-btn:not([data-tia-button-preset="legalprod-split-arrow"]):focus-visible {
	border-color: #fff;
	background: #f5f3ff;
	color: #0a0a1c;
	transform: translateY(-2px);
}

#tia-home-cta .lp-final-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(26px, 3vw, 36px);
	margin: 0 auto;
	max-width: 960px;
	padding-block: clamp(84px, 9vw, 124px);
	text-align: center;
}

#tia-home-cta .lp-final-cta > div {
	display: grid;
	justify-items: center;
}

#tia-home-cta .lp-final-cta h2,
#tia-home-cta .lp-final-cta p {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

#tia-home-cta .lp-final-cta h2 {
	max-width: 820px;
}

#tia-home-cta .lp-final-cta p {
	max-width: 720px;
}

#tia-home-cta .lp-final-cta .lp-btn {
	align-self: center;
	justify-content: center;
}

@media (max-width: 620px) {
	#tia-faq > .tia-container,
	#tia-home-faq .lp-faq {
		padding-block: 70px;
	}

	#tia-faq .tia-accordion__summary {
		min-height: 68px;
		padding: 20px 16px 20px 18px;
	}

	#tia-faq .tia-accordion__title,
	#tia-home-faq .lp-faq summary {
		font-size: 16px;
	}

	#tia-faq .tia-accordion__icon {
		flex-basis: 34px;
		width: 34px;
		height: 34px;
	}

	#tia-faq .tia-accordion__panel {
		padding: 4px 18px 22px;
	}

	#tia-home-faq .lp-faq summary {
		min-height: 68px;
		padding: 20px 62px 20px 18px !important;
	}

	#tia-home-faq .lp-faq summary::before {
		right: 16px;
		width: 34px;
		height: 34px;
	}

	#tia-home-faq .lp-faq summary::after {
		right: 32px;
	}

	#tia-home-faq .lp-faq-answer {
		padding: 4px 18px 22px !important;
	}

	#tia-final-cta > .tia-container,
	#tia-home-cta .lp-final-cta {
		padding-block: 72px;
	}

	#tia-final-cta .tia-btn,
	#tia-home-cta .lp-final-cta .lp-btn {
		width: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	#tia-faq *,
	#tia-faq *::before,
	#tia-faq *::after,
	#tia-home-faq *,
	#tia-home-faq *::before,
	#tia-home-faq *::after,
	#tia-final-cta *,
	#tia-home-cta * {
		animation: none !important;
		transition-duration: 1ms !important;
	}

	/* The split-arrow preset deliberately keeps its short horizontal cue. */
	#tia-final-cta .tia-btn[data-tia-button-preset="legalprod-split-arrow"],
	#tia-final-cta .tia-btn[data-tia-button-preset="legalprod-split-arrow"] > .tia-btn__label-clip > .tia-btn__label,
	#tia-final-cta .tia-btn[data-tia-button-preset="legalprod-split-arrow"] > .tia-btn__split-bg,
	#tia-final-cta .tia-btn[data-tia-button-preset="legalprod-split-arrow"] > .tia-btn__icon,
	#tia-home-cta .tia-btn[data-tia-button-preset="legalprod-split-arrow"],
	#tia-home-cta .tia-btn[data-tia-button-preset="legalprod-split-arrow"] > .tia-btn__label-clip > .tia-btn__label,
	#tia-home-cta .tia-btn[data-tia-button-preset="legalprod-split-arrow"] > .tia-btn__split-bg,
	#tia-home-cta .tia-btn[data-tia-button-preset="legalprod-split-arrow"] > .tia-btn__icon {
		transition-duration: var(--tia-duration-button-split-arrow) !important;
	}

	#tia-final-cta .tia-btn[data-tia-button-preset="legalprod-split-arrow"] > .tia-btn__label-clip > .tia-btn__label,
	#tia-home-cta .tia-btn[data-tia-button-preset="legalprod-split-arrow"] > .tia-btn__label-clip > .tia-btn__label {
		transition-duration: var(--tia-duration-button-split-arrow-label) !important;
	}
}
