/**
 * Divi Torque — Lite page.
 *
 * Its own hero (deliberately NOT the landing money-page hero — no review faces,
 * no proof/stats bar), the shared features.css grouped module list, and the
 * download opt-in (two-column copy + card form with an inline success state).
 * Monochrome UI; color only lives in the module mesh icons (invariant #7).
 */

/* ── Hero (free-flavoured, distinct from the landing hero) ────────── */
.dt-lite-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(48px, 7vw, 92px) 0 clamp(40px, 6vw, 72px);
	text-align: center;
}
/* Soft mesh glow — the only color on the page lives in gradients/icons (#7). */
.dt-lite-hero::before {
	content: "";
	position: absolute;
	inset: -30% -10% auto;
	height: 460px;
	z-index: -1;
	background:
		radial-gradient(38% 60% at 22% 18%, color-mix(in srgb, var(--mesh-sky) 60%, transparent), transparent 70%),
		radial-gradient(36% 55% at 80% 10%, color-mix(in srgb, var(--mesh-peri) 50%, transparent), transparent 70%),
		radial-gradient(46% 52% at 52% 0%, color-mix(in srgb, var(--mesh-grass) 34%, transparent), transparent 72%);
	opacity: .55;
	pointer-events: none;
}
[data-theme="dark"] .dt-lite-hero::before { opacity: .3; }
.dt-lite-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.dt-lite-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--color-surface-2);
	font-size: var(--text-sm);
	font-weight: var(--fw-med);
	color: var(--color-text);
	margin-bottom: 20px;
}
.dt-lite-hero__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mesh-grass);
}
.dt-lite-hero__title {
	max-width: 18ch;
	font-family: var(--font-display);
	font-size: clamp(2rem, 5.2vw, 3.4rem);
	line-height: var(--lh-display);
	letter-spacing: -0.02em;
	margin: 0 0 16px;
}
.dt-lite-hero__sub {
	max-width: 56ch;
	color: var(--color-text-muted);
	font-size: var(--text-lg);
	line-height: var(--lh-body);
	margin: 0 0 26px;
}
.dt-lite-hero__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}
/* Hero proof bar — installs · rating · GPL, dot-separated. */
.dt-lite-hero__trust {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px 18px;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}
.dt-lite-hero__trust li { display: inline-flex; align-items: center; gap: 6px; }
.dt-lite-hero__trust li + li { position: relative; padding-left: 18px; }
.dt-lite-hero__trust li + li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--color-border);
	transform: translateY(-50%);
}
.dt-lite-hero__trust strong { color: var(--color-text); font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
/* Hero mesh-icon peek — a colorful glance at the free modules (color lives only
   in the mesh squircles, per the design system). Fades at the edges on wide screens. */
.dt-lite-hero__peek {
	margin: clamp(32px, 5vw, 52px) auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	max-width: 640px;
}
.dt-lite-hero__peek > * { flex: 0 0 auto; }
@media (min-width: 900px) {
	.dt-lite-hero__peek { flex-wrap: nowrap; max-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
}
@media (prefers-reduced-motion: no-preference) {
	.dt-lite-hero__peek > * { animation: dt-lite-peek-in .5s var(--ease) both; }
	.dt-lite-hero__peek > *:nth-child(2) { animation-delay: .04s; }
	.dt-lite-hero__peek > *:nth-child(3) { animation-delay: .08s; }
	.dt-lite-hero__peek > *:nth-child(4) { animation-delay: .12s; }
	.dt-lite-hero__peek > *:nth-child(5) { animation-delay: .16s; }
	.dt-lite-hero__peek > *:nth-child(6) { animation-delay: .20s; }
	.dt-lite-hero__peek > *:nth-child(7) { animation-delay: .24s; }
	.dt-lite-hero__peek > *:nth-child(8) { animation-delay: .28s; }
	.dt-lite-hero__peek > *:nth-child(9) { animation-delay: .32s; }
	.dt-lite-hero__peek > *:nth-child(10) { animation-delay: .36s; }
}
@keyframes dt-lite-peek-in { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }
/* ── Shared section header (eyebrow · title · sub) ────────────────── */
.dt-lite-sec-head { text-align: center; max-width: 42ch; margin: 0 auto clamp(32px, 5vw, 52px); }
.dt-lite-sec-head__title {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	line-height: var(--lh-heading);
	letter-spacing: -0.015em;
	margin: 10px 0 0;
}
.dt-lite-sec-head__sub {
	max-width: 56ch;
	margin: 12px auto 0;
	color: var(--color-text-muted);
	font-size: var(--text-lg);
	line-height: var(--lh-body);
}

/* ── Shared "view all" pill (ported from landing.css) ─────────────── */
.dt-viewall {
	display: inline-flex; align-items: center; gap: 7px; margin-top: 44px;
	font-weight: var(--fw-med); font-size: var(--text-base); color: var(--color-text);
	background: var(--color-surface-2); border: 1px solid var(--color-border);
	border-radius: var(--radius-pill); padding: 12px 22px;
	transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.dt-viewall:hover { border-color: var(--gray-400); background: var(--color-surface); transform: translateY(-1px); }
.dt-viewall:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* ── Why choose Divi Torque Lite ──────────────────────────────────── */
.dt-lite-why {
	padding: var(--section-y) 0;
	background: var(--color-surface-2);
	border-top: 1px solid var(--color-border);
}
.dt-lite-why__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(16px, 2.4vw, 26px);
}
@media (max-width: 900px) { .dt-lite-why__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .dt-lite-why__grid { grid-template-columns: 1fr; } }
.dt-lite-why__card {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	padding: clamp(20px, 2.6vw, 28px);
}
.dt-lite-why__icon {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
	background: var(--color-surface-2);
	border: 1px solid var(--color-border);
	color: var(--color-text);
	margin-bottom: 16px;
}
.dt-lite-why__name { font-size: var(--text-lg); font-weight: var(--fw-semi); margin: 0 0 8px; letter-spacing: -0.01em; }
.dt-lite-why__text { color: var(--color-text-muted); font-size: var(--text-base); line-height: var(--lh-body); margin: 0; }

/* Per-card mesh tint on the icon tile — subtle color, one hue each (#7). */
.dt-lite-why__card { transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
@media (prefers-reduced-motion: no-preference) {
	.dt-lite-why__card:hover { transform: translateY(-2px); border-color: var(--gray-300); }
}
.dt-lite-why__card:nth-child(1) .dt-lite-why__icon { background: color-mix(in srgb, var(--mesh-coral) 22%, var(--color-surface-2));  border-color: color-mix(in srgb, var(--mesh-coral) 42%, var(--color-border));  color: color-mix(in srgb, var(--mesh-coral) 50%, var(--color-text)); }
.dt-lite-why__card:nth-child(2) .dt-lite-why__icon { background: color-mix(in srgb, var(--mesh-indigo) 20%, var(--color-surface-2)); border-color: color-mix(in srgb, var(--mesh-indigo) 42%, var(--color-border)); color: color-mix(in srgb, var(--mesh-indigo) 55%, var(--color-text)); }
.dt-lite-why__card:nth-child(3) .dt-lite-why__icon { background: color-mix(in srgb, var(--mesh-grass) 24%, var(--color-surface-2));  border-color: color-mix(in srgb, var(--mesh-grass) 44%, var(--color-border));  color: color-mix(in srgb, var(--mesh-grass) 52%, var(--color-text)); }
.dt-lite-why__card:nth-child(4) .dt-lite-why__icon { background: color-mix(in srgb, var(--mesh-peri) 22%, var(--color-surface-2));   border-color: color-mix(in srgb, var(--mesh-peri) 42%, var(--color-border));   color: color-mix(in srgb, var(--mesh-peri) 55%, var(--color-text)); }

/* ── Module cards ─────────────────────────────────────────────────── */
.dt-lite-modules { padding: var(--section-y) 0; text-align: center; }
.dt-lite-modules__grid { text-align: left; }

/* ── About Divi Torque ────────────────────────────────────────────── */
.dt-lite-about {
	padding: var(--section-y) 0;
	background: var(--color-surface-2);
	border-top: 1px solid var(--color-border);
}
.dt-lite-about__inner {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
}
@media (max-width: 820px) { .dt-lite-about__inner { grid-template-columns: 1fr; } }
.dt-lite-about__title {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	line-height: var(--lh-heading);
	letter-spacing: -0.015em;
	margin: 10px 0 16px;
}
.dt-lite-about__copy p {
	color: var(--color-text-muted);
	font-size: var(--text-lg);
	line-height: var(--lh-relaxed);
	margin: 0 0 14px;
}
.dt-lite-about__copy strong { color: var(--color-text); font-weight: var(--fw-semi); }
.dt-lite-about__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	list-style: none;
	padding: 0;
	margin: 0;
	background: var(--color-border);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	overflow: hidden;
}
.dt-lite-about__stats li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: clamp(20px, 3vw, 30px);
	background: var(--color-bg);
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.dt-lite-about__stats b { font-family: var(--font-display); font-size: var(--text-2xl); letter-spacing: -0.02em; }
.dt-lite-about__stats span { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ── Reviews ──────────────────────────────────────────────────────── */
.dt-lite-reviews { padding: var(--section-y) 0; text-align: center; }
.dt-lite-reviews__foot { margin-top: 8px; }

/* ── Download opt-in ──────────────────────────────────────────────── */
.dt-lite-cta {
	padding: var(--section-y) 0;
	scroll-margin-top: 96px;
	border-top: 1px solid var(--color-border);
	background: var(--color-surface);
}
.dt-lite-cta__inner {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
}
@media (max-width: 860px) {
	.dt-lite-cta__inner { grid-template-columns: 1fr; }
}

.dt-lite-cta__badge {
	display: inline-grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: var(--radius-pill);
	background: var(--color-surface-2);
	border: 1px solid var(--color-border);
	font-size: 22px;
	margin-bottom: 16px;
}
.dt-lite-cta__title {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	line-height: var(--lh-heading);
	letter-spacing: -0.01em;
	margin: 0 0 12px;
}
.dt-lite-cta__sub {
	max-width: 46ch;
	color: var(--color-text-muted);
	font-size: var(--text-lg);
	line-height: var(--lh-body);
	margin: 0 0 20px;
}
.dt-lite-cta__assure {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: var(--text-sm);
	color: var(--color-text);
	font-variant-numeric: tabular-nums;
}
.dt-lite-cta__assure li { display: flex; align-items: center; gap: 8px; }
.dt-lite-cta__assure li::before {
	content: "";
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--color-text);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* ── The card ─────────────────────────────────────────────────────── */
.dt-lite-cta__panel {
	background: var(--color-surface-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	padding: clamp(22px, 3.2vw, 34px);
	box-shadow: var(--shadow-md);
}

/* Only ONE state shows at a time. Author display rules override the UA
   [hidden] rule, so restore it explicitly — this was the both-visible bug. */
.dt-lite-form[hidden],
.dt-lite-form__done[hidden] { display: none !important; }

.dt-lite-form { display: flex; flex-direction: column; gap: 18px; }
.dt-lite-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
@media (max-width: 460px) {
	.dt-lite-form__row { grid-template-columns: 1fr; }
}
.dt-lite-form__field { display: block; }
.dt-lite-form__label {
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--fw-med);
	margin-bottom: 8px;
}
.dt-lite-form__opt { color: var(--color-text-faint); font-weight: var(--fw-reg); }
.dt-lite-form input[type="text"],
.dt-lite-form input[type="email"] {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-bg);
	color: var(--color-text);
	font: inherit;
	transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.dt-lite-form input::placeholder { color: var(--color-text-faint); }
.dt-lite-form input:hover { border-color: var(--color-text-faint); }
.dt-lite-form input:focus {
	outline: none;
	border-color: var(--color-action);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-action) 18%, transparent);
}
.dt-lite-form input:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

/* ── Marketing / product-update consent (explicit opt-in) ─────────── */
.dt-lite-consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	cursor: pointer;
	transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.dt-lite-consent:hover { border-color: var(--color-text-faint); }
.dt-lite-consent:has(input:checked) {
	border-color: var(--color-action);
	background: color-mix(in srgb, var(--color-action) 5%, var(--color-bg));
}
.dt-lite-consent input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.dt-lite-consent__box {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	display: grid;
	place-items: center;
	border: 1.5px solid var(--color-border);
	border-radius: 7px;
	background: var(--color-surface);
	color: var(--color-on-action);
	transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.dt-lite-consent__box svg { opacity: 0; transform: scale(.6); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.dt-lite-consent input:checked + .dt-lite-consent__box {
	background: var(--color-action);
	border-color: var(--color-action);
}
.dt-lite-consent input:checked + .dt-lite-consent__box svg { opacity: 1; transform: scale(1); }
.dt-lite-consent input:focus-visible + .dt-lite-consent__box {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}
.dt-lite-consent__text {
	font-size: var(--text-sm);
	line-height: 1.45;
	color: var(--color-text);
}
.dt-lite-consent__fine { display: block; margin-top: 2px; color: var(--color-text-muted); }

/* Slim variant — a plain inline opt-in line (no card), for the quick form. */
.dt-lite-consent--slim {
	padding: 0;
	background: none;
	border: none;
	align-items: center;
	gap: 10px;
}
.dt-lite-consent--slim:hover { border: none; }
.dt-lite-consent--slim:has(input:checked) { background: none; border: none; }
.dt-lite-consent--slim .dt-lite-consent__box { flex-basis: 20px; width: 20px; height: 20px; margin-top: 0; }
.dt-lite-consent--slim .dt-lite-consent__text { color: var(--color-text-muted); }

.dt-lite-form__submit { width: 100%; margin-top: 2px; }
.dt-lite-form__fine {
	font-size: var(--text-sm);
	color: var(--color-text-faint);
	line-height: var(--lh-body);
	margin: 0;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.dt-lite-form__error {
	font-size: var(--text-sm);
	color: var(--mesh-coral);
	margin: 0;
}
.dt-lite-form__turnstile { min-height: 0; display: flex; justify-content: center; }

/* ── Inline success ───────────────────────────────────────────────── */
.dt-lite-form__done {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	padding: clamp(8px, 3vw, 20px) 0;
}
.dt-lite-form__check {
	display: inline-grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--mesh-grass) 22%, var(--color-surface));
	border: 1px solid color-mix(in srgb, var(--mesh-grass) 48%, var(--color-border));
	color: color-mix(in srgb, var(--mesh-grass) 55%, var(--color-text));
	margin-bottom: 2px;
}
@media (prefers-reduced-motion: no-preference) {
	.dt-lite-form__done:not([hidden]) .dt-lite-form__check {
		animation: dt-lite-pop var(--dur-base) var(--ease) both;
	}
}
@keyframes dt-lite-pop {
	0%   { transform: scale(.7); opacity: 0; }
	60%  { transform: scale(1.06); }
	100% { transform: scale(1); opacity: 1; }
}
.dt-lite-form__done-title {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	line-height: var(--lh-heading);
	letter-spacing: -0.01em;
	margin: 0;
}
.dt-lite-form__done-text {
	max-width: 36ch;
	color: var(--color-text-muted);
	font-size: var(--text-base);
	line-height: var(--lh-body);
	margin: 0 0 8px;
}
.dt-lite-form__done .btn { width: 100%; }