/*
 * ThriveXDNA site chrome: DNA background, header, footer.
 * Ported from the approved Next.js design (thrivexdna-next: components/navbar.tsx,
 * components/footer/*, components/dna-background.tsx, app/globals.css).
 * Colours are the locked tetradic-glass tokens (THEME-LOCK.md). Do not invent new ones.
 * Red #e1341e is fills/borders only; red TEXT uses #f0573f (WCAG AA).
 */

:root {
	--txc-red: #e1341e;
	--txc-red-text: #f0573f;
	--txc-cyan: #1ecbe1;
	--txc-violet: #961ee1;
	--txc-green: #6ae11e;
	--txc-bg-deep: #071013;
	--txc-bg-mid: #0d1a1f;
	--txc-panel: rgba(10, 20, 24, 0.78);
	--txc-panel-strong: rgba(8, 16, 20, 0.92);
	--txc-panel-soft: rgba(15, 29, 35, 0.72);
	--txc-border: rgba(128, 176, 184, 0.18);
	--txc-border-strong: rgba(30, 203, 225, 0.24);
	--txc-text: #eef7f8;
	--txc-text-soft: #a8bec2;
	--txc-font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--txc-font-display: "Space Grotesk", system-ui, sans-serif;
	--txc-container: 1440px;
	--txc-header-h: 65px;
}

@media (min-width: 1024px) {
	:root {
		--txc-header-h: 101px;
	}
}

/* ── Layers ─────────────────────────────────────────────────────────────── */

body {
	background-color: var(--txc-bg-deep);
}

/* Everything Kadence renders sits above the fixed DNA layer. */
#wrapper.site {
	position: relative;
	z-index: 1;
}

.txc-dna-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

/* The old WebGL DNA canvas (dna-shatter-bg.js) is replaced by the layer above. functions.php stops the script loading;
   this hides the canvas on the few pages whose stored content embeds that script directly. */
.tx-dna-canvas {
	display: none !important;
}

/* Kadence back-to-top (desktop only) sat under Grow's share buttons in the bottom-right corner and picked up the red
   palette outline. Glass circle, moved left of the Grow stack, on every page including the homepage and the 404.
   Kadence positions it with '#kt-scroll-up.scroll-up-side-right' (ID + class), so this selector has to be stronger. */
html body :is(#kt-scroll-up, #kt-scroll-up-reader).scroll-up-wrap {
	right: 84px;
	bottom: 20px;
	width: 44px;
	height: 44px;
	border: 1px solid var(--txc-border);
	border-radius: 50%;
	background: var(--txc-panel);
	color: var(--txc-text);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

:is(#kt-scroll-up, #kt-scroll-up-reader):is(:hover, :focus-visible) {
	border-color: rgba(225, 52, 30, 0.6);
	background: var(--txc-panel);
	color: #fff;
}

/* Featured on: each badge lifts and glows on hover, like the other cards. The wall keeps scrolling under the cursor
   on purpose, so nothing here pauses the animation. */
.tx-sbm-item a {
	border-radius: 12px;
	padding: 6px 10px;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.tx-sbm-item a:hover,
.tx-sbm-item a:focus-visible {
	transform: translateY(-2px);
	background: rgba(30, 203, 225, 0.08);
	box-shadow: 0 0 0 1px rgba(30, 203, 225, 0.35), 0 12px 30px rgba(30, 203, 225, 0.25);
}

/* Store cart button on phones: the store template pins it bottom-right, on top of Grow's share buttons. Same button,
   moved left of the Grow stack. */
@media (max-width: 640px) {
	body .tx-cart-fab {
		right: 80px;
	}
}

/* The support (donate) and compliance bars print after #wrapper: lift them above the fixed DNA background layer. */
.tx-support-bar,
.tx-compliance-bar {
	position: relative;
	z-index: 1;
}

/* Anchor jumps (table of contents, in-page links) stop below the sticky header instead of under it. */
html {
	scroll-padding-top: 118px;
}

@media (max-width: 767px) {
	html {
		scroll-padding-top: 81px;
	}
}

/* Logged-in users: WordPress's admin bar is fixed at the top (46px on phones, 32px above 782px) and sits above the
   drawer, where it covered the drawer's close button. Start the drawer below it, as Kadence does. */
body.admin-bar .txc-drawer {
	top: 46px;
}

@media (min-width: 783px) {
	body.admin-bar .txc-drawer {
		top: 32px;
	}
}

/* Escape closes a keyboard-opened dropdown: tx-chrome.js adds .is-dismissed until focus leaves the item. The rule needs
   one more class than the ':focus-within' opener further down this file, which would otherwise win the tie. */
.txc-menu li.menu-item-has-children.is-dismissed > .sub-menu {
	opacity: 0;
	visibility: hidden;
}

/* Directory agent, script and MCP pages hide the header search; their templates target Kadence's search markup. */
body:is(.single-thrivex_agent, .single-thrivex_script, .single-thrivex_mcp) .txc-search-toggle {
	display: none;
}

.txc-dna-bg video,
.txc-dna-bg img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.6;
}

.txc-dna-bg__atmos {
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at top left, rgba(30, 203, 225, 0.18), transparent 28%),
		radial-gradient(circle at top right, rgba(150, 30, 225, 0.18), transparent 24%),
		radial-gradient(circle at bottom left, rgba(225, 52, 30, 0.14), transparent 24%);
}

.txc-dna-bg__shade {
	position: absolute;
	inset: 0;
	background: rgba(7, 16, 19, 0.55);
}

/* ── Shared ─────────────────────────────────────────────────────────────── */

.txc-wrap {
	width: 100%;
	max-width: var(--txc-container);
	margin-inline: auto;
	padding-inline: 16px;
	box-sizing: border-box;
}

.txc-container {
	width: 100%;
	max-width: var(--txc-container);
	margin-inline: auto;
	padding-inline: 16px;
	box-sizing: border-box;
}

@media (min-width: 640px) {
	.txc-container {
		padding-inline: 24px;
	}
}

@media (min-width: 1024px) {
	.txc-wrap,
	.txc-container {
		padding-inline: 32px;
	}
}

.txc-header :focus-visible,
.txc-footer :focus-visible,
.txc-drawer :focus-visible {
	outline: 2px solid var(--txc-cyan);
	outline-offset: 2px;
}

.txc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.txc-logo {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	height: 32px;
	font-family: var(--txc-font-display);
	font-size: 20px;
	line-height: 28px;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--txc-text);
	text-decoration: none;
	white-space: nowrap;
}

.txc-logo:hover {
	color: var(--txc-text);
}

.txc-logo__x {
	color: var(--txc-red-text);
}

.txc-logo__dna {
	color: var(--txc-cyan);
}

.txc-btn {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	padding: 10px 20px;
	font-family: var(--txc-font-body);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: -0.025em;
	text-decoration: none;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.txc-btn--primary {
	background: var(--txc-red);
	color: #fff;
	border: 0;
	box-shadow: 0 8px 24px rgba(225, 52, 30, 0.35);
}

.txc-btn--primary:hover,
.txc-btn--primary:focus-visible {
	color: #fff;
	filter: brightness(1.1);
}

.txc-btn--secondary {
	background: transparent;
	color: var(--txc-text);
	border: 1px solid var(--txc-border);
}

.txc-btn--secondary:hover {
	color: #fff;
	border-color: var(--txc-border-strong);
}

.txc-btn--cyan {
	background: transparent;
	color: var(--txc-cyan);
	border: 1px solid rgba(30, 203, 225, 0.4);
}

.txc-btn--cyan:hover {
	color: var(--txc-cyan);
	background: rgba(30, 203, 225, 0.1);
}

.txc-social {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.txc-social a {
	display: block;
	color: var(--txc-text-soft);
	transition: color 0.15s ease;
}

.txc-social a:hover {
	color: var(--txc-cyan);
}

.txc-social svg {
	display: block;
	width: 16px;
	height: 16px;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.txc-header {
	position: sticky;
	top: 0;
	z-index: 50;
	width: 100%;
	border-bottom: 1px solid var(--txc-border);
	background: var(--txc-panel-strong);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	font-family: var(--txc-font-body);
}

/* Homepage: the bar floats transparently over the DNA hero. */
body.home .txc-header {
	position: absolute;
	inset-inline: 0;
	top: 0;
	border-bottom: 0;
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* Logged-in users: hold the sticky header below the fixed admin bar. Not on the homepage, where the header is absolute
   (it overlays the hero): there WordPress's own page offset already places it, and 'top' would add it a second time. */
body.admin-bar:not(.home) .txc-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar:not(.home) .txc-header {
		top: 46px;
	}
}

.txc-header__social {
	display: none;
	border-bottom: 1px solid rgba(128, 176, 184, 0.072);
}

.txc-header__social .txc-social {
	height: 36px;
	gap: 16px;
}

.txc-header__social .txc-social svg {
	width: 14px;
	height: 14px;
}

.txc-header__bar {
	display: flex;
	height: 64px;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.txc-header__cta {
	display: none;
	flex-shrink: 0;
}

.txc-nav {
	display: none;
}

.txc-menu,
.txc-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.txc-menu {
	display: flex;
	align-items: center;
}

.txc-menu > li {
	position: relative;
}

.txc-menu__row {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 8px 12px;
}

.txc-menu > li > .txc-menu__row > .txc-menu__label {
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.txc-menu > li > .txc-menu__row > a.txc-menu__label:hover,
.txc-menu > li:focus-within > .txc-menu__row > .txc-menu__label {
	color: #fff;
}

.txc-chevron {
	display: block;
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	color: rgba(255, 255, 255, 0.5);
}

.txc-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 50;
	min-width: 224px;
	padding: 8px;
	border: 1px solid var(--txc-border);
	border-radius: 12px;
	background: rgba(7, 16, 19, 0.95);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover AND focus-within, so the whole tree is reachable by keyboard. */
.txc-menu li:hover > .sub-menu,
.txc-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

.txc-menu .sub-menu li {
	position: relative;
}

.txc-menu .sub-menu .txc-menu__row {
	justify-content: space-between;
	gap: 8px;
	padding: 0;
}

.txc-menu .sub-menu .txc-menu__label {
	display: block;
	flex: 1;
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 14px;
	line-height: 20px;
	color: var(--txc-text-soft);
	text-decoration: none;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.txc-menu .sub-menu .txc-menu__label:hover,
.txc-menu .sub-menu .txc-menu__label:focus-visible {
	background: var(--txc-panel-soft);
	color: var(--txc-text);
}

.txc-menu .sub-menu .txc-chevron {
	margin-right: 8px;
	color: rgba(255, 255, 255, 0.4);
	transform: rotate(-90deg);
}

.txc-menu .sub-menu .sub-menu {
	top: 0;
	left: 100%;
	margin-left: 4px;
	min-width: 240px;
}

.txc-burger {
	display: inline-flex;
	padding: 8px;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.8);
	cursor: pointer;
}

.txc-burger:hover {
	color: #fff;
}

.txc-burger svg {
	width: 24px;
	height: 24px;
}

@media (min-width: 1024px) {
	.txc-header__social,
	.txc-nav,
	.txc-header__cta {
		display: block;
	}

	.txc-burger {
		display: none;
	}
}

/* Header search: icon toggle + panel under the bar (Kadence's header search, restyled). */
.txc-header__actions {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 4px;
}

.txc-search-toggle {
	display: inline-flex;
	padding: 8px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: rgba(255, 255, 255, 0.8);
	cursor: pointer;
}

.txc-search-toggle:hover {
	color: #fff;
}

.txc-search-toggle[aria-expanded="true"] {
	color: var(--txc-cyan);
}

.txc-search-toggle svg {
	width: 22px;
	height: 22px;
}

.txc-search {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	border-bottom: 1px solid var(--txc-border);
	background: var(--txc-panel-strong);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
}

.txc-search[hidden] {
	display: none;
}

.txc-search__form {
	display: flex;
	gap: 8px;
	max-width: 720px;
	margin: 0 auto;
	padding-block: 16px;
}

.txc-search__input {
	flex: 1;
	min-width: 0;
	height: 44px;
	padding: 0 16px;
	border: 1px solid var(--txc-border);
	border-radius: 8px;
	background: rgba(7, 16, 19, 0.6);
	color: var(--txc-text);
	font-family: var(--txc-font-body);
	font-size: 16px;
}

.txc-search__input::placeholder {
	color: var(--txc-text-soft);
}

.txc-search__input:focus {
	outline: none;
	border-color: var(--txc-border-strong);
	box-shadow: 0 0 0 3px rgba(30, 203, 225, 0.18);
}

.txc-search__form .txc-btn {
	flex-shrink: 0;
	height: 44px;
}

@media (min-width: 1024px) {
	.txc-header__actions {
		gap: 12px;
	}
}

/* Kadence fills every bare <button> with its palette colour on :hover/:focus (and it sticks after a tap on
   phones). Neutralise it for the theme's own chrome buttons; their colours come from the rules above. */
.txc-header .txc-burger,
.txc-header .txc-burger:hover,
.txc-header .txc-burger:focus,
.txc-header .txc-burger:active,
.txc-menu .txc-menu__button,
.txc-menu .txc-menu__button:hover,
.txc-menu .txc-menu__button:focus,
.txc-menu .txc-menu__button:active,
.txc-drawer .txc-drawer__close,
.txc-drawer .txc-drawer__close:hover,
.txc-drawer .txc-drawer__close:focus,
.txc-drawer .txc-drawer__close:active,
.txc-drawer .txc-drawer__toggle,
.txc-drawer .txc-drawer__toggle:hover,
.txc-drawer .txc-drawer__toggle:focus,
.txc-drawer .txc-drawer__toggle:active {
	border: 0;
	background: transparent;
	box-shadow: none;
}

/* Kadence styles bare button and input[type=search] (and their :hover/:focus) with higher specificity than
   a single class, which turned the toggle red and the field white. Scope under the header to win. */
.txc-header .txc-search-toggle,
.txc-header .txc-search-toggle:hover,
.txc-header .txc-search-toggle:focus,
.txc-header .txc-search-toggle:active {
	border: 0;
	background: transparent;
	box-shadow: none;
}

.txc-header .txc-search-toggle {
	color: rgba(255, 255, 255, 0.8);
}

.txc-header .txc-search-toggle:hover {
	color: #fff;
}

.txc-header .txc-search-toggle[aria-expanded="true"] {
	color: var(--txc-cyan);
	background: rgba(30, 203, 225, 0.1);
}

.txc-search .txc-search__input,
.txc-search .txc-search__input:focus {
	width: auto;
	margin: 0;
	border: 1px solid var(--txc-border);
	border-radius: 8px;
	background: rgba(7, 16, 19, 0.6);
	color: var(--txc-text);
	box-shadow: none;
}

.txc-search .txc-search__input:focus {
	outline: none;
	border-color: var(--txc-border-strong);
	box-shadow: 0 0 0 3px rgba(30, 203, 225, 0.18);
}

/* Mobile drawer: circle reveal from the burger, like the approved design. */
.txc-drawer {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	background: #171717;
	font-family: var(--txc-font-body);
	clip-path: circle(0% at calc(100% - 2.5rem) 2.5rem);
	visibility: hidden;
	transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.5s;
}

.txc-drawer.is-open {
	clip-path: circle(150% at calc(100% - 2.5rem) 2.5rem);
	visibility: visible;
	transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}

@media (min-width: 1024px) {
	.txc-drawer {
		display: none;
	}
}

.txc-drawer__top {
	display: flex;
	height: 64px;
	flex-shrink: 0;
	align-items: center;
	justify-content: space-between;
	padding-inline: 16px;
}

.txc-drawer__menu {
	margin: 0;
	padding: 8px 16px 24px;
	list-style: none;
	display: flex;
	flex-direction: column;
}

.txc-drawer__menu ul {
	margin: 0 0 0 12px;
	padding: 0 0 0 16px;
	list-style: none;
	border-left: 1px solid rgba(128, 176, 184, 0.108);
}

.txc-drawer__menu ul[hidden] {
	display: none;
}

.txc-drawer__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.txc-drawer__label {
	display: block;
	flex: 1;
	padding: 12px 0;
	font-size: 18px;
	line-height: 28px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	transition: color 0.15s ease;
}

.txc-drawer__menu ul .txc-drawer__label {
	font-size: 16px;
	line-height: 24px;
	color: rgba(255, 255, 255, 0.7);
}

a.txc-drawer__label:hover {
	color: #fff;
}

.txc-drawer__toggle {
	padding: 8px;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
}

.txc-drawer__toggle:hover {
	color: #fff;
}

.txc-drawer__toggle svg {
	display: block;
	width: 16px;
	height: 16px;
	transition: transform 0.15s ease;
}

.txc-drawer__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.txc-drawer__bottom {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 0 16px 32px;
}

.txc-drawer__bottom .txc-social {
	gap: 20px;
}

.txc-drawer__bottom .txc-social svg {
	width: 20px;
	height: 20px;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.txc-footer {
	position: relative;
	z-index: 10;
	overflow: hidden;
	border-top: 1px solid var(--txc-border);
	background: rgba(7, 16, 19, 0.85);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	font-family: var(--txc-font-body);
	color: var(--txc-text);
}

.txc-footer__glow {
	position: absolute;
	inset: 0;
	left: -515px;
	pointer-events: none;
}

.txc-footer__glow span {
	position: absolute;
	border-radius: 9999px;
}

.txc-footer__glow span:first-child {
	top: 0;
	left: 387.07px;
	width: 720.16px;
	height: 1175px;
	background: rgba(30, 203, 225, 0.1);
	filter: blur(287.15px);
}

.txc-footer__glow span:last-child {
	top: 284.85px;
	left: 0;
	width: 488.15px;
	height: 502.5px;
	background: rgba(150, 30, 225, 0.1);
	filter: blur(215.36px);
}

.txc-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 80px;
	padding-top: 80px;
	padding-bottom: 40px;
}

.txc-footer__card {
	position: relative;
	height: 448px;
	overflow: hidden;
	border-radius: 32px;
	background: rgba(255, 255, 255, 0.05);
	box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.35);
}

.txc-footer__wordmark {
	position: absolute;
	top: 204px;
	left: -13px;
	/* Sized to the card so the whole word shows instead of being clipped at the edge. */
	font-size: min(132px, 16vw);
	line-height: 300px;
	font-weight: 500;
	white-space: nowrap;
	opacity: 0.25;
	background: linear-gradient(90deg, #eef7f8 0%, rgba(30, 203, 225, 0) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	user-select: none;
}

.txc-footer__card-body {
	position: absolute;
	inset: 0;
	display: flex;
	height: fit-content;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	padding: 40px 24px 0;
	box-sizing: border-box;
}

.txc-footer__tagline {
	width: 100%;
	max-width: 540px;
	margin: 0;
	font-size: 32px;
	line-height: 40px;
	font-weight: 500;
	color: var(--txc-text);
}

.txc-footer__top-link {
	display: inline-flex;
	width: 64px;
	flex-direction: column;
	gap: 10px;
	padding: 24px 0;
}

.txc-footer__top-link a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	border-radius: 12px;
	padding: 8px 24px;
	background: #fff;
	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.35);
	color: #071013;
}

.txc-footer__top-link svg {
	transform: scale(1.5);
}

@media (min-width: 768px) {
	.txc-footer__wordmark {
		font-size: min(240px, 15.5vw);
	}

	.txc-footer__card-body {
		flex-direction: row;
		padding: 64px 60px 0;
	}

	.txc-footer__tagline {
		font-size: 48px;
		line-height: 56px;
	}
}

@media (min-width: 1024px) {
	.txc-footer__wordmark {
		font-size: min(300px, 15.5vw);
	}

	.txc-footer__tagline {
		font-size: 56px;
		line-height: 64px;
	}
}

.txc-footer__main {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 56px;
}

.txc-footer__grid {
	display: grid;
	width: 100%;
	grid-template-columns: minmax(0, 1fr);
	gap: 56px;
}

@media (min-width: 1024px) {
	.txc-footer__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
		gap: 40px;
	}
}

.txc-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.txc-footer__name {
	font-family: var(--txc-font-display);
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	color: var(--txc-text);
}

.txc-footer__muted {
	font-size: 14px;
	line-height: 20px;
	color: var(--txc-text-soft);
}

.txc-footer__trustpilot {
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: var(--txc-cyan);
	text-decoration: none;
}

.txc-footer__trustpilot:hover {
	color: var(--txc-cyan);
	text-decoration: underline;
}

/* TrustBox review collector: reserve its 52px height so the footer does not shift when the iframe loads. */
.txc-footer__trustbox {
	width: 100%;
	max-width: 320px;
	min-height: 52px;
}

.txc-footer__brand .txc-btn {
	margin-top: 8px;
}

.txc-footer__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
}

@media (min-width: 768px) {
	.txc-footer__cols {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.txc-footer__col {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.txc-footer__col-title {
	margin: 0;
	font-family: var(--txc-font-body);
	font-size: 12px;
	line-height: 20px;
	font-weight: 500;
	color: var(--txc-text-soft);
}

.txc-footer__col-title a {
	color: inherit;
	text-decoration: none;
}

.txc-footer__col-title a:hover {
	text-decoration: underline;
}

.txc-footer__col ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.txc-footer__col a.txc-footer__link {
	font-size: 14px;
	line-height: 20px;
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	transition: color 0.15s ease;
}

.txc-footer__col a.txc-footer__link:hover {
	color: #fff;
	text-decoration: underline;
}

.txc-footer__bottom {
	display: flex;
	width: 100%;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
}

@media (min-width: 768px) {
	.txc-footer__bottom {
		flex-direction: row;
		align-items: center;
		gap: 0;
	}
}

.txc-footer__copyright {
	font-size: 12px;
	line-height: 20px;
	font-weight: 500;
	color: var(--txc-text-soft);
}

.txc-footer__bottom .txc-social {
	gap: 20px;
}

@media (prefers-reduced-motion: reduce) {
	.txc-header *,
	.txc-footer *,
	.txc-drawer,
	.txc-drawer * {
		transition: none !important;
		animation: none !important;
	}
}

/* ── Additions for the WordPress markup ─────────────────────────────────── */

/* URL-less menu parents render as buttons so keyboard users can open them. */
.txc-menu__button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
}

.txc-menu > li > .txc-menu__row > .txc-menu__button {
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.8);
}

.txc-dna-bg__poster {
	display: contents;
}

.txc-dna-bg.is-playing .txc-dna-bg__poster img {
	visibility: hidden;
}

.txc-drawer__close {
	display: inline-flex;
	padding: 8px;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.8);
	cursor: pointer;
}

.txc-drawer__close:hover {
	color: #fff;
}

.txc-drawer__close svg {
	width: 24px;
	height: 24px;
}

/* Author display rules above would otherwise override the hidden attribute. */
.txc-header [hidden],
.txc-drawer [hidden],
.txc-footer [hidden],
.txc-dna-bg [hidden] {
	display: none !important;
}

/* Homepage: Kadence paints #wrapper white. The new homepage sits on the DNA layer instead.
   Other pages keep their own templates' backgrounds (checked page by page). */
body.home #wrapper.site {
	background: transparent;
}

/* /featured-pricing (plugin template): its headings set no colour, so they inherited Kadence's
   dark heading colour on a dark panel and were near-invisible. Pre-existing on live. */
.txp-hero h1,
.txp-dofollow h3,
.txp-benefits h2,
.txp-benefit h3,
.txp-faq h2 {
	color: var(--txc-text);
}