/*
 * Older feature page templates, restyled to match the redesigned pages
 * (Projects, Website tracking) without changing their content.
 * Loaded from header.php on those templates only; everything is scoped to body.dsx-legacy.
 */

body.dsx-legacy {
	--dsx-ink: #09090b;
	--dsx-body: #52525b;
	--dsx-indigo: #3a3a99;
}

/* Hero: runs up behind the header with the same background as the new pages. */
body.dsx-legacy .header-hero-background { display: none !important; }
body.dsx-legacy:not(.dsx-compare) main > section:first-of-type {
	position: relative;
	isolation: isolate;
	margin-top: calc(-1 * var(--dsx-header-h, 96px)) !important;
	padding-top: calc(var(--dsx-header-h, 96px) + 64px) !important;
	padding-bottom: 88px !important;
}
body.dsx-legacy:not(.dsx-compare) main > section:first-of-type::before,
body.dsx-legacy:not(.dsx-compare) main > section:first-of-type::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	z-index: -1;
	pointer-events: none;
}
body.dsx-legacy:not(.dsx-compare) main > section:first-of-type::before {
	background:
		radial-gradient(55% 60% at 75% 10%, rgba(109, 92, 246, 0.16), transparent 70%),
		radial-gradient(35% 40% at 5% 30%, rgba(203, 83, 1, 0.07), transparent 70%),
		linear-gradient(180deg, #f3f2ff 0%, #fbfbff 60%, #fff 100%);
}
body.dsx-legacy:not(.dsx-compare) main > section:first-of-type::after {
	background-image: linear-gradient(rgba(58, 58, 153, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(58, 58, 153, 0.05) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 75%);
}

/* Typography: Sora headings with the new sizes and tracking. */
body.dsx-legacy main h1:not([class*="ds"]) {
	font-family: Sora, Inter, sans-serif !important;
	font-weight: 600 !important;
	font-size: clamp(32px, 4.2vw, 52px) !important;
	line-height: 1.1 !important;
	letter-spacing: -0.035em !important;
	color: var(--dsx-ink) !important;
	text-wrap: balance;
}
body.dsx-legacy main h2:not([class*="ds"]) {
	font-family: Sora, Inter, sans-serif !important;
	font-weight: 600 !important;
	font-size: clamp(28px, 3.4vw, 40px) !important;
	line-height: 1.18 !important;
	letter-spacing: -0.025em !important;
	color: var(--dsx-ink) !important;
	text-wrap: balance;
}
body.dsx-legacy main h3:not([class*="ds"]) {
	font-family: Sora, Inter, sans-serif !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em;
	color: var(--dsx-ink) !important;
}
body.dsx-legacy main section > div p:not([class*="ds"]) { color: var(--dsx-body); }

/* Buttons: same look as the new pages (no orange hover sweep). */
body.dsx-legacy main .primary-button,
body.dsx-legacy main .secondary-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 24px !important;
	border-radius: 14px !important;
	font: 600 15.5px/1 Inter, sans-serif !important;
	text-decoration: none !important;
	transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s !important;
}
body.dsx-legacy main .primary-button {
	background: var(--dsx-indigo) !important;
	border: 1px solid var(--dsx-indigo) !important;
	color: #fff !important;
	box-shadow: 0 14px 28px -14px rgba(58, 58, 153, 0.9);
}
body.dsx-legacy main .primary-button:hover { background: #2f2f85 !important; transform: translateY(-1px); }
body.dsx-legacy main .secondary-button {
	background: #fff !important;
	border: 1px solid #e4e4e7 !important;
	color: var(--dsx-ink) !important;
}
body.dsx-legacy main .secondary-button:hover { border-color: rgba(58, 58, 153, 0.4) !important; }
body.dsx-legacy main .primary-button::before,
body.dsx-legacy main .primary-button::after,
body.dsx-legacy main .secondary-button::before,
body.dsx-legacy main .secondary-button::after { display: none !important; }

@media (max-width: 767px) {
	body.dsx-legacy:not(.dsx-compare) main > section:first-of-type {
		padding-top: calc(var(--dsx-header-h, 96px) + 32px) !important;
		padding-bottom: 56px !important;
	}
}