/*
 * TD Blocks shared styles.
 * Tokens fall back to the design values so blocks still render if the theme changes.
 */

:root {
	--td-ink: var(--wp--preset--color--ink, #1D252C);
	--td-ink-muted: var(--wp--preset--color--ink-muted, #4A5560);
	--td-ink-soft: var(--wp--preset--color--ink-soft, #55606B);
	--td-on-dark-muted: var(--wp--preset--color--on-dark-muted, #C9CED3);
	--td-indigo: var(--wp--preset--color--indigo, #3F3BD9);
	--td-periwinkle: var(--wp--preset--color--periwinkle, #8C9BFF);
	--td-lavender: var(--wp--preset--color--lavender, #F2F3FF);
	--td-line: var(--wp--preset--color--line, #E6E8EB);
	--td-white: var(--wp--preset--color--white, #FFFFFF);
	--td-grad: var(--wp--preset--gradient--brand, linear-gradient(135deg, #3D5AFE 0%, #8B3DFF 100%));
	--td-font: var(--wp--preset--font-family--montserrat, Montserrat, system-ui, sans-serif);
	--td-mono: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	--td-max: 1240px;
	--td-gutter: 24px;
	--td-shadow-card: 0 30px 60px -30px rgba(29, 37, 44, 0.35);
	--td-shadow-deep: 0 40px 80px -30px rgba(29, 37, 44, 0.6);
}

[class^="wp-block-td-"],
[class*=" wp-block-td-"] {
	box-sizing: border-box;
	font-family: var(--td-font);
}

[class^="wp-block-td-"] *,
[class*=" wp-block-td-"] *,
[class^="wp-block-td-"] *::before,
[class*=" wp-block-td-"] *::before {
	box-sizing: border-box;
}

/* Blocks are full-bleed sections; templates and post content must not constrain them. */
.wp-site-blocks .wp-block-post-content > [class*="wp-block-td-"],
.is-layout-constrained > [class*="wp-block-td-"]:not(.wp-block-td-callout) {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.is-layout-flow > [class*="wp-block-td-"],
.is-layout-constrained > [class*="wp-block-td-"] {
	margin-block-start: 0;
}

.has-global-padding > [class*="wp-block-td-"]:not(.wp-block-td-callout) {
	margin-left: calc(var(--wp--style--root--padding-left, 0px) * -1) !important;
	margin-right: calc(var(--wp--style--root--padding-right, 0px) * -1) !important;
	max-width: none !important;
	width: auto;
}

.td-section {
	position: relative;
	/* clip, not hidden: hidden would make each section a scroll container and freeze the decorations' scroll-driven drift. */
	overflow: hidden;
	overflow: clip;
}

.td-container {
	position: relative;
	max-width: var(--td-max);
	margin: 0 auto;
	padding-left: var(--td-gutter);
	padding-right: var(--td-gutter);
}

.td-bg--white { background: var(--td-white); color: var(--td-ink); }
.td-bg--lavender { background: var(--td-lavender); color: var(--td-ink); }
.td-bg--dark { background: var(--td-ink); color: var(--td-white); }
.td-bg--grad { background: var(--td-grad); color: var(--td-white); }

/* ---------- Type ---------- */

.td-eyebrow {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.22em;
	line-height: 1.4;
	text-transform: uppercase;
}

.td-eyebrow__dash {
	flex: 0 0 auto;
	width: 28px;
	height: 2px;
	background: var(--td-grad);
}

.td-eyebrow--white .td-eyebrow__dash { background: var(--td-white); }
.td-eyebrow--periwinkle .td-eyebrow__dash { background: var(--td-periwinkle); width: 24px; }

.td-h2 {
	margin: 0;
	font-size: 34px;
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.td-h1 {
	margin: 0;
	font-size: clamp(38px, 4.6vw, 62px);
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -0.025em;
}

.td-lead {
	margin: 0;
	font-size: 17px;
	line-height: 1.7;
	color: var(--td-ink-muted);
}

.td-bg--dark .td-lead { color: var(--td-on-dark-muted); }
.td-bg--grad .td-lead { color: var(--td-white); }

.td-stack {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

/* ---------- Buttons ---------- */

.td-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	min-height: 44px;
	padding: 14px 24px;
	border: 2px solid transparent;
	font-family: var(--td-font);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: filter 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.td-btn--sm { padding: 12px 20px; font-size: 12px; }

.td-btn--grad,
a.td-btn--grad {
	border: 0;
	padding: 16px 26px;
	background: var(--td-grad);
	color: var(--td-white);
}

.td-btn--sm.td-btn--grad { padding: 14px 22px; }

.td-btn--grad:hover,
.td-btn--grad:focus-visible {
	color: var(--td-white);
	filter: brightness(1.1);
}

.td-btn--outline,
a.td-btn--outline {
	--td-btn-fill: var(--td-white);
	background: linear-gradient(var(--td-btn-fill), var(--td-btn-fill)) padding-box, var(--td-grad) border-box;
	color: var(--td-ink);
}

.td-bg--lavender .td-btn--outline { --td-btn-fill: var(--td-lavender); }

.td-btn--outline:hover,
.td-btn--outline:focus-visible {
	--td-btn-fill: var(--td-lavender);
	color: var(--td-ink);
}

.td-btn--white,
a.td-btn--white {
	border: 0;
	padding: 16px 24px;
	background: var(--td-white);
	color: var(--td-ink);
	font-weight: 800;
}

.td-btn--white:hover,
.td-btn--white:focus-visible {
	background: var(--td-periwinkle);
	color: var(--td-ink);
}

.td-btn--outline-white,
a.td-btn--outline-white {
	border-color: var(--td-white);
	background: transparent;
	color: var(--td-white);
}

.td-btn--outline-white:hover,
.td-btn--outline-white:focus-visible {
	background: var(--td-white);
	color: var(--td-ink);
}

.td-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* ---------- Icon tiles ---------- */

.td-icon-tile {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--td-grad);
	color: var(--td-white);
}

.td-icon-tile--sm { width: 30px; height: 30px; }

/* ---------- Decorations ---------- */

.td-decor {
	position: absolute;
	pointer-events: none;
	z-index: 0;
}

.td-section > :not(.td-decor) {
	position: relative;
	z-index: 1;
}

.td-decor--dots {
	right: 0;
	top: 60px;
	width: 460px;
	height: 360px;
	background-image: radial-gradient(#C9CDF6 1.5px, transparent 1.5px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(ellipse at 75% 35%, #000 25%, transparent 70%);
	mask-image: radial-gradient(ellipse at 75% 35%, #000 25%, transparent 70%);
}

.td-decor--dots-left {
	left: 0;
	bottom: 40px;
	width: 420px;
	height: 340px;
	background-image: radial-gradient(#C9CDF6 1.5px, transparent 1.5px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(ellipse at 20% 70%, #000 25%, transparent 70%);
	mask-image: radial-gradient(ellipse at 20% 70%, #000 25%, transparent 70%);
}

.td-decor--dots-wide {
	inset: 0;
	background-image: radial-gradient(#D6DAFA 1.5px, transparent 1.5px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(ellipse 60% 70% at 100% 0%, #000 10%, transparent 70%);
	mask-image: radial-gradient(ellipse 60% 70% at 100% 0%, #000 10%, transparent 70%);
}

.td-bg--dark .td-decor--dots-wide {
	background-image: radial-gradient(rgba(140, 155, 255, 0.22) 1.5px, transparent 1.5px);
	-webkit-mask-image: radial-gradient(ellipse 45% 80% at 85% 50%, #000 10%, transparent 70%);
	mask-image: radial-gradient(ellipse 45% 80% at 85% 50%, #000 10%, transparent 70%);
}

.td-decor--rings {
	left: -150px;
	bottom: -150px;
	width: 420px;
	height: 420px;
}

.td-decor--glow {
	left: 50%;
	top: 18%;
	width: 1200px;
	height: 900px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(61, 90, 254, 0.08), transparent);
}

.td-decor--glow-violet {
	left: -200px;
	bottom: -260px;
	width: 700px;
	height: 700px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(139, 61, 255, 0.12), transparent);
}

.td-decor--squares-a {
	right: -60px;
	top: 80px;
	width: 300px;
	height: 300px;
}

.td-decor--squares-b {
	left: -80px;
	bottom: 120px;
	width: 260px;
	height: 260px;
}

.td-decor--pinstripes {
	right: 0;
	top: 0;
	width: 520px;
	height: 100%;
	background-image: repeating-linear-gradient(135deg, #ECEEFC 0 1px, transparent 1px 18px);
	-webkit-mask-image: radial-gradient(ellipse at 100% 20%, #000 15%, transparent 65%);
	mask-image: radial-gradient(ellipse at 100% 20%, #000 15%, transparent 65%);
}

.td-decor--strip {
	left: 0;
	right: 0;
	top: 0;
	height: 4px;
	background: var(--td-grad);
}

.td-bg--lavender .td-decor--pinstripes {
	background-image: repeating-linear-gradient(135deg, #E3E6FB 0 1px, transparent 1px 18px);
}

.td-decor--glow-corner {
	right: -200px;
	top: -200px;
	width: 700px;
	height: 700px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(140, 155, 255, 0.25), transparent);
}

.td-decor--rings-dark {
	left: -140px;
	bottom: -160px;
	stroke: var(--td-periwinkle);
	stroke-opacity: 0.2;
}

.td-decor--rings-corner {
	left: auto;
	bottom: auto;
	right: -120px;
	top: -120px;
	width: 440px;
	height: 440px;
	stroke: #FFFFFF;
	stroke-opacity: 0.18;
}

/* ---------- Divider ---------- */

.td-divider {
	position: relative;
	max-width: var(--td-max);
	margin: 0 auto;
	padding: 0 var(--td-gutter);
	display: flex;
	align-items: center;
	gap: 18px;
}

.td-divider__line {
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, #D9DCF5);
}

.td-divider__line--end {
	background: linear-gradient(90deg, #D9DCF5, transparent);
}

.td-divider__diamond {
	width: 10px;
	height: 10px;
	transform: rotate(45deg);
	background: var(--td-grad);
}

.td-divider__diamond--outline {
	width: 7px;
	height: 7px;
	background: none;
	border: 1.5px solid var(--td-periwinkle);
}

/* ---------- Images ---------- */

.td-img-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 160px;
	background: var(--td-ink);
}

/* ---------- Case study card ---------- */

.td-cs-card {
	display: flex;
	flex-direction: column;
	background: var(--td-white);
	color: var(--td-ink);
	border: 1px solid var(--td-line);
	box-shadow: var(--td-shadow-card);
}

.td-cs-card[hidden] { display: none; }

.td-cs-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--td-ink);
}

.td-cs-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.td-cs-card__bar {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 120px;
	height: 6px;
	background: var(--td-grad);
}

.td-cs-card__body {
	flex: 1;
	padding: 30px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.td-cs-card__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.td-cs-card__cat { color: var(--td-indigo); }
.td-cs-card__client { color: var(--td-ink-soft); }

.td-cs-card__title {
	margin: 0;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.015em;
}

.td-cs-card__summary {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--td-ink-muted);
}

.td-cs-card__wins {
	margin: 0;
	padding: 4px 0 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.td-cs-card__wins li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	font-weight: 600;
}

.td-cs-card__link {
	margin-top: auto;
	min-height: 44px;
	padding-top: 16px;
	border-top: 1px solid var(--td-line);
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--td-ink);
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.td-cs-card__link span[aria-hidden] { color: var(--td-indigo); }
.td-cs-card__link:hover { color: var(--td-indigo); }

.td-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: 40px 28px;
}

/* ---------- Filter buttons (archives) ---------- */

.td-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.td-filter {
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid #D5D9DD;
	background: var(--td-white);
	color: var(--td-ink);
	font-family: var(--td-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.td-filter:hover { border-color: var(--td-indigo); color: var(--td-indigo); }

.td-filter[aria-pressed="true"],
.td-filter[aria-current="page"] {
	border-color: transparent;
	background: var(--td-grad);
	color: var(--td-white);
}

.td-filter__count {
	font-weight: 600;
	opacity: 0.75;
}

/* ---------- Forms ---------- */

.td-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.td-field input,
.td-field select,
.td-field textarea {
	width: 100%;
	min-height: 48px;
	padding: 14px 16px;
	border: 1px solid #D5D9DD;
	border-radius: 0;
	background: var(--td-white);
	color: var(--td-ink);
	font-family: var(--td-font);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.td-field textarea { resize: vertical; }

.td-field--dark { color: var(--td-on-dark-muted); }

.td-field--dark input {
	border-color: #3B4651;
	background: #252F37;
	color: var(--td-white);
}

.td-field--dark input::placeholder { color: #8D969F; }

.td-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.td-notice {
	margin: 0;
	padding: 14px 16px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}

.td-notice--success {
	background: #E7F7EE;
	color: #14532D;
	border-left: 4px solid #22A35A;
}

.td-notice--error {
	background: #FDECEC;
	color: #7F1D1D;
	border-left: 4px solid #D93B3B;
}

/* ---------- Breadcrumb ---------- */

.td-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--td-ink-soft);
}

.td-breadcrumb a {
	padding: 4px 0;
	color: var(--td-ink-soft);
	text-decoration: none;
}

.td-breadcrumb a:hover { color: var(--td-indigo); }

.td-breadcrumb [aria-current] {
	padding: 4px 0;
	color: var(--td-indigo);
}

.td-bg--dark .td-breadcrumb,
.td-bg--dark .td-breadcrumb a { color: var(--td-on-dark-muted); }

.td-bg--dark .td-breadcrumb [aria-current] { color: var(--td-periwinkle); }

/* Editor: server-rendered previews (.td-ssr only exists in the editor) shouldn't navigate or take input. */
.td-ssr a,
.td-ssr button,
.td-ssr input,
.td-ssr select,
.td-ssr textarea,
.td-ssr summary {
	pointer-events: none;
}

.td-ssr > .components-placeholder {
	min-height: 120px;
}

/* ---------------------------------------------------------------
 * Motion. Everything here is skipped for visitors who prefer reduced motion.
 * Reveal uses the `translate` property so it never fights hover `transform`s.
 * ------------------------------------------------------------- */

:root {
	--td-ease: cubic-bezier(0.2, 0.65, 0.3, 1);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}

	/* Scroll reveal (classes added by assets/motion.js). */
	.td-reveal {
		opacity: 0;
		translate: 0 18px;
		transition:
			opacity 0.7s var(--td-ease),
			translate 0.7s var(--td-ease);
		transition-delay: var(--td-reveal-delay, 0ms);
	}

	.td-reveal.is-visible {
		opacity: 1;
		translate: none;
	}


	/* Links, buttons, filters, fields. */
	[class*="wp-block-td-"] a,
	.td-btn,
	.td-filter,
	.td-header__link,
	.td-header__cta,
	.td-field input,
	.td-field select,
	.td-field textarea {
		transition:
			color 0.2s ease,
			background-color 0.2s ease,
			border-color 0.2s ease,
			box-shadow 0.2s ease,
			filter 0.2s ease,
			transform 0.25s var(--td-ease),
			--td-btn-fill 0.2s ease;
	}

	.td-btn:hover,
	.td-btn:focus-visible {
		transform: translateY(-2px);
	}

	.td-btn:active {
		transform: translateY(0);
	}

	.td-field input:focus,
	.td-field select:focus,
	.td-field textarea:focus {
		border-color: var(--td-indigo);
		box-shadow: 0 0 0 3px rgba(63, 59, 217, 0.15);
		outline: none;
	}

	/* Cards lift; their images zoom a touch. */
	.td-cs-card,
	.td-cs-acard,
	.td-mini-post,
	.td-related-card,
	.td-cs-next__card,
	.td-plan,
	.td-featured-post__card {
		transition:
			transform 0.35s var(--td-ease),
			box-shadow 0.35s var(--td-ease);
	}

	.td-cs-card:hover,
	.td-cs-card:focus-within,
	.td-cs-acard:hover,
	.td-cs-acard:focus-within,
	.td-mini-post:hover,
	.td-mini-post:focus-visible,
	.td-related-card:hover,
	.td-related-card:focus-visible,
	.td-cs-next__card:hover,
	.td-cs-next__card:focus-visible,
	.td-plan:hover {
		transform: translateY(-6px);
		box-shadow: 0 40px 70px -30px rgba(29, 37, 44, 0.45);
	}

	.td-cs-card__media,
	.td-cs-acard__media,
	.td-mini-post__media,
	.td-related-card__media,
	.td-cs-next__media,
	.td-post-card__media,
	.td-featured-post__media {
		overflow: hidden;
	}

	.td-cs-card__media img,
	.td-cs-acard__media img,
	.td-mini-post__media img,
	.td-related-card__media img,
	.td-cs-next__media img,
	.td-post-card__media img,
	.td-featured-post__media img {
		transition: scale 0.6s var(--td-ease);
	}

	.td-cs-card:hover img,
	.td-cs-acard:hover img,
	.td-mini-post:hover img,
	.td-related-card:hover img,
	.td-cs-next__card:hover img,
	.td-post-card:hover .td-post-card__media img,
	.td-featured-post__card:hover img {
		scale: 1.04;
	}

	/* Arrow links nudge right. */
	.td-cs-card__link span[aria-hidden],
	.td-cs-next__more span {
		display: inline-block;
		transition: translate 0.25s var(--td-ease);
	}

	.td-cs-card__link:hover span[aria-hidden],
	.td-cs-next__card:hover .td-cs-next__more span {
		translate: 4px 0;
	}

	.td-post-card__more::before {
		transition: width 0.25s var(--td-ease);
	}

	.td-post-card__more:hover::before {
		width: 36px;
	}

	/* FAQ answers open smoothly where the browser supports it. */
	.td-faq-item {
		interpolate-size: allow-keywords;
	}

	.td-faq-item::details-content {
		height: 0;
		overflow: clip;
		transition:
			height 0.35s var(--td-ease),
			content-visibility 0.35s allow-discrete;
	}

	.td-faq-item[open]::details-content {
		height: auto;
	}

	/* Mobile menu slides down. */
	.td-header__menu {
		transition:
			opacity 0.25s ease,
			translate 0.25s var(--td-ease);
	}

	@starting-style {
		.td-header__menu {
			opacity: 0;
			translate: 0 -8px;
		}
	}

	/* Background decorations drift ~24px against the scroll (browsers that support scroll-driven animations). */
	@supports (animation-timeline: view()) {
		.td-decor:not(.td-decor--strip):not([class*="__grad"]) {
			animation: td-drift linear both;
			animation-timeline: view();
		}
	}

	/* Contact field picked from a pricing card: brief highlight. */
	.td-field--picked select {
		border-color: var(--td-indigo);
		box-shadow: 0 0 0 4px rgba(63, 59, 217, 0.18);
	}
}

@keyframes td-drift {
	from {
		translate: 0 24px;
	}

	to {
		translate: 0 -24px;
	}
}

/* ---------------------------------------------------------------
 * Loader: three diamonds (the divider motif) pulsing in turn.
 * Used in buttons while a form submits (assets/forms.js).
 * ------------------------------------------------------------- */

.td-loader {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-right: 12px;
	vertical-align: middle;
}

.td-loader i {
	width: 7px;
	height: 7px;
	transform: rotate(45deg);
	background: currentColor;
	opacity: 0.35;
}

.is-loading {
	cursor: progress;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.td-loader i {
		animation: td-pulse 1.1s ease-in-out infinite;
	}

	.td-loader i:nth-child(2) {
		animation-delay: 0.15s;
	}

	.td-loader i:nth-child(3) {
		animation-delay: 0.3s;
	}
}

@media (prefers-reduced-motion: reduce) {
	.td-loader i {
		opacity: 0.9;
	}
}

@keyframes td-pulse {
	0%,
	100% {
		opacity: 0.3;
		transform: rotate(45deg) scale(0.75);
	}

	50% {
		opacity: 1;
		transform: rotate(45deg) scale(1.15);
	}
}

/* ---------------------------------------------------------------
 * Thank-you panel (replaces a form after a successful send).
 * ------------------------------------------------------------- */

.td-thanks {
	display: flex;
	flex-direction: column;
	gap: 14px;
	outline: none;
}

.td-thanks__icon {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--td-grad);
}

.td-thanks__eyebrow {
	margin: 6px 0 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--td-indigo);
}

.td-thanks__heading {
	margin: 0;
	font-size: clamp(26px, 3vw, 34px);
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.td-thanks__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
}

.td-thanks__steps {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: thanks;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.td-thanks__steps li {
	counter-increment: thanks;
	display: flex;
	gap: 14px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--td-ink-muted);
}

.td-thanks__steps li::before {
	content: counter(thanks, decimal-leading-zero);
	flex: 0 0 auto;
	font-weight: 800;
	background: var(--td-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.td-thanks__links {
	margin: 6px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.td-thanks__links a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--td-ink);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.td-thanks__links a span { color: var(--td-indigo); }
.td-thanks__links a:hover { color: var(--td-indigo); }

/* On the dark audit band */
.td-thanks--audit {
	padding: 32px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.04);
}

.td-thanks--audit .td-thanks__eyebrow { color: var(--td-periwinkle); }
.td-thanks--audit .td-thanks__steps li { color: var(--td-on-dark-muted); }
.td-thanks--audit .td-thanks__links a { color: var(--td-white); }
.td-thanks--audit .td-thanks__links a span { color: var(--td-periwinkle); }

/* On the gradient newsletter band */
.td-thanks--newsletter .td-thanks__icon { background: var(--td-white); }
.td-thanks--newsletter .td-thanks__icon svg { stroke: var(--td-indigo); }
.td-thanks--newsletter .td-thanks__eyebrow { color: var(--td-white); }

@media (prefers-reduced-motion: no-preference) {
	.td-thanks > * {
		animation: td-thanks-in 0.6s var(--td-ease) both;
	}

	.td-thanks > :nth-child(2) { animation-delay: 0.08s; }
	.td-thanks > :nth-child(3) { animation-delay: 0.14s; }
	.td-thanks > :nth-child(4) { animation-delay: 0.2s; }
	.td-thanks > :nth-child(5) { animation-delay: 0.26s; }

	.td-thanks__icon {
		animation-name: td-thanks-pop !important;
	}
}

@keyframes td-thanks-in {
	from {
		opacity: 0;
		translate: 0 14px;
	}
}

@keyframes td-thanks-pop {
	0% {
		opacity: 0;
		scale: 0.4;
	}

	70% {
		scale: 1.08;
	}

	100% {
		opacity: 1;
		scale: 1;
	}
}