/**
 * Reusable components: header, buttons, cards, sliders, accordion, footer.
 */

@layer components {
	/* ---------------------------------------------------------------- Header */
	.dyt-announcement {
		background: var(--dyt-announcement-bg, var(--dyt-gradient));
		color: var(--dyt-announcement-color, #fff);
		font-size: var(--dyt-text-sm);
		padding-block: var(--dyt-space-2);
		padding-top: calc(var(--dyt-space-2) + env(safe-area-inset-top, 0px));
	}

	.dyt-announcement__inner {
		display: flex;
		flex-wrap: wrap;
		gap: var(--dyt-space-3);
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.dyt-announcement__link {
		font-weight: 600;
		text-decoration: underline;
	}

	.dyt-header {
		position: sticky;
		top: 0;
		z-index: var(--dyt-z-header);
		color: var(--dyt-header-text);
		transition: background var(--dyt-duration) var(--dyt-ease),
			border-color var(--dyt-duration) var(--dyt-ease);
	}

	.dyt-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--dyt-space-5);
		min-height: var(--dyt-header-height);
		padding-top: var(--dyt-header-pt, 0px);
		padding-bottom: var(--dyt-header-pb, 0px);
		padding-left: var(--dyt-header-pl, var(--dyt-gutter));
		padding-right: var(--dyt-header-pr, var(--dyt-gutter));
	}

	.dyt-header-static .dyt-header {
		position: relative;
		top: auto;
	}

	/* Slides out of the way when scrolling down, returns on the way up. */
	.dyt-header-sticky-hide .dyt-header {
		transition: translate var(--dyt-duration) var(--dyt-ease),
			background var(--dyt-duration) var(--dyt-ease);
	}

	.dyt-header-sticky-hide .dyt-header.is-hidden {
		translate: 0 -130%;
	}

	/* Transparent over the top of the page until the visitor scrolls. */
	.dyt-header-transparent .dyt-header,
	.dyt-header-transparent .dyt-header__inner {
		background: transparent;
		border-color: transparent;
		box-shadow: none;
		backdrop-filter: none;
	}

	.dyt-header-transparent .dyt-header.is-scrolled,
	.dyt-header-transparent .dyt-header.is-scrolled .dyt-header__inner {
		background: var(--dyt-header-bg);
		backdrop-filter: blur(var(--dyt-header-blur, 14px));
	}

	.dyt-header-transparent.dyt-header-border .dyt-header.is-scrolled .dyt-header__inner {
		border-color: color-mix(in srgb, #fff 10%, transparent);
	}

	.dyt-header-transparent.dyt-header-shadow .dyt-header.is-scrolled .dyt-header__inner {
		box-shadow: 0 10px 34px rgba(0, 0, 0, 0.32);
	}

	/* Announcement close button */
	.dyt-announcement__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		margin-left: auto;
		border-radius: var(--dyt-radius-pill);
		color: inherit;
		opacity: 0.75;
		transition: opacity var(--dyt-duration-fast) var(--dyt-ease),
			background-color var(--dyt-duration-fast) var(--dyt-ease);
	}

	.dyt-announcement__close:hover {
		opacity: 1;
		background: color-mix(in srgb, currentColor 18%, transparent);
	}

	.dyt-announcement__close svg {
		width: 14px;
		height: 14px;
	}

	/* The header keeps its sticky behaviour but gives its strip back to the
	   page, so the first section's background runs to the very top and there
	   is no band of a different colour above it. The first section then owns
	   the space the header sits in, which keeps its content clear of the bar. */
	.dyt-header-overlay .dyt-main {
		margin-top: calc(-1 * (var(--dyt-header-height) + var(--dyt-header-inset)));
	}

	.dyt-header-overlay .dyt-main > .dyt-section:first-child {
		padding-top: calc(
			var(--dyt-pt, var(--dyt-section-y)) + var(--dyt-header-height) + var(--dyt-header-inset)
		);
	}

	@media (max-width: 47.99rem) {
		.dyt-header-overlay .dyt-main > .dyt-section:first-child {
			padding-top: calc(
				var(--dyt-pt-m, var(--dyt-section-y-m, var(--dyt-section-y-t, var(--dyt-section-y))))
					+ var(--dyt-header-height) + var(--dyt-header-inset)
			);
		}
	}

	/* -- Layout 1: Floating Pill -------------------------------------- */
	.dyt-headerlayout-pill .dyt-header {
		top: var(--dyt-header-inset);
		margin-top: calc(var(--dyt-header-inset) + env(safe-area-inset-top, 0px));
		padding-inline: var(--dyt-header-inset);
	}

	.dyt-headerlayout-pill .dyt-header__inner {
		max-width: var(--dyt-header-width);
		margin-inline: auto;
		/* Defaults to the page gutter so the logo lines up with the section
		   content beneath it, unless a side is set explicitly. */
		padding-left: var(--dyt-header-pl, var(--dyt-gutter));
		padding-right: var(--dyt-header-pr, var(--dyt-gutter));
		background: var(--dyt-header-bg);
		border-radius: var(--dyt-radius-pill);
		transition: box-shadow var(--dyt-duration) var(--dyt-ease),
			background var(--dyt-duration) var(--dyt-ease);
	}

	.dyt-header-border.dyt-headerlayout-pill .dyt-header__inner {
		border: 1px solid color-mix(in srgb, #fff 10%, transparent);
	}

	.dyt-header-shadow.dyt-headerlayout-pill .dyt-header__inner {
		box-shadow: 0 10px 34px rgba(0, 0, 0, 0.32);
	}

	.dyt-header-shadow.dyt-headerlayout-pill .dyt-header.is-scrolled .dyt-header__inner {
		box-shadow: 0 14px 44px rgba(0, 0, 0, 0.46);
	}

	/* The pill relaxes into a rounded rectangle when space runs out. */
	@media (max-width: 47.99rem) {
		.dyt-headerlayout-pill .dyt-header__inner {
			border-radius: var(--dyt-radius-lg);
		}
	}

	/* -- Layout 2: Full Width Bar ------------------------------------- */
	.dyt-headerlayout-full .dyt-header {
		background: color-mix(in srgb, var(--dyt-header-bg) 88%, transparent);
		backdrop-filter: blur(var(--dyt-header-blur, 14px));
		padding-top: env(safe-area-inset-top, 0px);
	}

	.dyt-header-border.dyt-headerlayout-full .dyt-header {
		border-bottom: 1px solid transparent;
	}

	.dyt-headerlayout-full .dyt-header.is-scrolled {
		background: var(--dyt-header-bg);
	}

	.dyt-header-border.dyt-headerlayout-full .dyt-header.is-scrolled {
		border-bottom-color: color-mix(in srgb, #fff 12%, transparent);
	}

	.dyt-header-shadow.dyt-headerlayout-full .dyt-header.is-scrolled {
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	}

	/* -- Layout 3: Split (logo left, nav + button grouped right) ------- */
	.dyt-headerlayout-split .dyt-header {
		background: color-mix(in srgb, var(--dyt-header-bg) 88%, transparent);
		backdrop-filter: blur(var(--dyt-header-blur, 14px));
		padding-top: env(safe-area-inset-top, 0px);
	}

	.dyt-headerlayout-split .dyt-header.is-scrolled {
		background: var(--dyt-header-bg);
	}

	.dyt-header-border.dyt-headerlayout-split .dyt-header {
		border-bottom: 1px solid color-mix(in srgb, #fff 10%, transparent);
	}

	.dyt-header-shadow.dyt-headerlayout-split .dyt-header.is-scrolled {
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	}

	@media (min-width: 64rem) {
		.dyt-headerlayout-split .dyt-nav {
			flex: 0 0 auto;
			margin-left: auto;
		}

		.dyt-headerlayout-split .dyt-nav__list {
			justify-content: flex-end;
		}
	}

	/* -- Layout 4: Centred Stack -------------------------------------- */
	.dyt-headerlayout-centered .dyt-header {
		background: color-mix(in srgb, var(--dyt-header-bg) 92%, transparent);
		backdrop-filter: blur(var(--dyt-header-blur, 14px));
		padding-top: env(safe-area-inset-top, 0px);
	}

	.dyt-headerlayout-centered .dyt-header.is-scrolled {
		background: var(--dyt-header-bg);
	}

	.dyt-header-border.dyt-headerlayout-centered .dyt-header {
		border-bottom: 1px solid color-mix(in srgb, #fff 10%, transparent);
	}

	.dyt-header-shadow.dyt-headerlayout-centered .dyt-header.is-scrolled {
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	}

	@media (min-width: 64rem) {
		.dyt-headerlayout-centered .dyt-header__inner {
			flex-wrap: wrap;
			justify-content: center;
			gap: var(--dyt-space-2) var(--dyt-space-5);
			padding-block: var(--dyt-space-4);
		}

		.dyt-headerlayout-centered .dyt-header__logo {
			flex: 0 0 100%;
			justify-content: center;
		}

		.dyt-headerlayout-centered .dyt-nav {
			flex: 1 1 auto;
		}

		.dyt-headerlayout-centered .dyt-header__actions {
			flex: 0 0 auto;
		}
	}

	.dyt-logo {
		display: inline-flex;
		align-items: center;
		flex-shrink: 0;
		text-decoration: none;
	}

	.dyt-logo__img {
		max-height: var(--dyt-logo-h, 34px);
		width: auto;
		object-fit: contain;
		border-radius: var(--dyt-logo-radius, 0);
		background: var(--dyt-logo-bg, transparent);
		padding: var(--dyt-logo-pad, 0px);
	}

	/* A circle needs equal sides, so the height also drives the width. */
	.dyt-logo-circle .dyt-logo__img {
		width: var(--dyt-logo-h, 34px);
		height: var(--dyt-logo-h, 34px);
		max-height: none;
	}

	@media (max-width: 47.99rem) {
		.dyt-logo-circle .dyt-logo__img {
			width: var(--dyt-logo-h-m, var(--dyt-logo-h, 34px));
			height: var(--dyt-logo-h-m, var(--dyt-logo-h, 34px));
		}
	}

	@media (max-width: 47.99rem) {
		.dyt-logo__img {
			max-height: var(--dyt-logo-h-m, var(--dyt-logo-h, 34px));
		}
	}

	/* Both marks are in the markup; CSS decides which one shows. */
	.dyt-logo__img--mobile {
		display: none;
	}

	@media (max-width: 47.99rem) {
		.dyt-logo__img--desktop {
			display: none;
		}

		.dyt-logo__img--mobile {
			display: block;
		}
	}

	.dyt-logo__text {
		font-size: var(--dyt-text-lg);
		font-weight: 700;
		letter-spacing: var(--dyt-tracking-snug);
	}

	.dyt-nav {
		display: none;
		flex: 1;
	}

	@media (min-width: 64rem) {
		.dyt-nav {
			display: block;
		}
	}

	.dyt-nav__list {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--dyt-nav-gap, var(--dyt-space-5));
		margin: 0;
		list-style: none;
		padding: 0;
	}

	.dyt-nav__list a {
		position: relative;
		display: inline-block;
		padding-block: var(--dyt-space-2);
		font-size: var(--dyt-nav-size, var(--dyt-text-sm));
		font-weight: var(--dyt-nav-weight, 500);
		color: var(--dyt-nav-color, color-mix(in srgb, var(--dyt-header-text) 78%, transparent));
		text-decoration: none;
		white-space: nowrap;
		border-radius: var(--dyt-radius-pill);
	}

	.dyt-nav__list a::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 0;
		height: 2px;
		background: var(--dyt-gradient);
		border-radius: var(--dyt-radius-pill);
		transition: width var(--dyt-duration) var(--dyt-ease);
	}

	.dyt-nav__list a:hover,
	.dyt-nav__list .current-menu-item > a {
		color: var(--dyt-nav-active, var(--dyt-header-text));
	}

	/* Hover effect variants, chosen in Dytona -> Header -> Navigation. */
	.dyt-navhover-none .dyt-nav__list a::after,
	.dyt-navhover-color .dyt-nav__list a::after,
	.dyt-navhover-pill .dyt-nav__list a::after {
		display: none;
	}

	.dyt-navhover-pill .dyt-nav__list a {
		padding-inline: var(--dyt-space-4);
		transition: background-color var(--dyt-duration) var(--dyt-ease),
			color var(--dyt-duration) var(--dyt-ease);
	}

	.dyt-navhover-pill .dyt-nav__list a:hover,
	.dyt-navhover-pill .dyt-nav__list .current-menu-item > a {
		background: color-mix(in srgb, var(--dyt-header-text) 14%, transparent);
	}

	.dyt-navhover-none .dyt-nav__list a:hover {
		color: var(--dyt-nav-color, inherit);
	}

	.dyt-nav__list a:hover::after,
	.dyt-nav__list .current-menu-item > a::after {
		width: 100%;
	}

	/* Submenus */
	/* The panel is light while the header is dark, so the links inside cannot
	   inherit the header's light nav colour — that painted white on white and
	   made the whole dropdown look empty. Colour is set here explicitly. */
	.dyt-nav__list > li {
		position: relative;
	}

	.dyt-nav__list .sub-menu {
		position: absolute;
		top: calc(100% + 10px);
		left: 50%;
		min-width: var(--dyt-dropdown-w, 15rem);
		padding: var(--dyt-dropdown-pad, 8px);
		margin: 0;
		list-style: none;
		background: var(--dyt-dropdown-bg, var(--dyt-bg-panel));
		color: var(--dyt-dropdown-text, var(--dyt-text));
		border: 1px solid var(--dyt-dropdown-border, var(--dyt-border));
		border-radius: var(--dyt-dropdown-radius, 14px);
		box-shadow: 0 18px 44px rgb(9 14 28 / 16%), 0 2px 6px rgb(9 14 28 / 8%);
		opacity: 0;
		visibility: hidden;
		translate: -50% 10px;
		scale: 0.98;
		transform-origin: top center;
		transition: opacity var(--dyt-duration) var(--dyt-ease),
			translate var(--dyt-duration) var(--dyt-ease),
			scale var(--dyt-duration) var(--dyt-ease),
			visibility var(--dyt-duration);
	}

	/* Bridges the gap under the parent item. Without it the pointer crosses
	   dead space on the way down and the panel closes in your face. */
	.dyt-nav__list .sub-menu::before {
		content: "";
		position: absolute;
		inset: -14px 0 auto 0;
		height: 16px;
	}

	/* The little pointer. It inherits the panel background so a custom
	   dropdown colour carries into it without a second setting. */
	.dyt-nav__list .sub-menu::after {
		content: "";
		position: absolute;
		top: -5px;
		left: 50%;
		width: 10px;
		height: 10px;
		translate: -50% 0;
		rotate: 45deg;
		background: inherit;
		border-left: 1px solid var(--dyt-dropdown-border, var(--dyt-border));
		border-top: 1px solid var(--dyt-dropdown-border, var(--dyt-border));
		border-radius: 3px 0 0 0;
	}

	.dyt-nav__list .sub-menu li {
		margin: 0;
	}

	.dyt-nav__list .sub-menu a {
		display: block;
		padding: 9px 12px;
		border-radius: 9px;
		color: var(--dyt-dropdown-text, var(--dyt-text));
		font-size: var(--dyt-dropdown-size, var(--dyt-text-sm));
		font-weight: 500;
		line-height: 1.35;
		white-space: nowrap;
		transition: background var(--dyt-duration-fast) var(--dyt-ease),
			color var(--dyt-duration-fast) var(--dyt-ease);
	}

	/* The top-level underline has no place on a panel row. */
	.dyt-nav__list .sub-menu a::after {
		content: none;
	}

	.dyt-nav__list .sub-menu a:hover,
	.dyt-nav__list .sub-menu a:focus-visible {
		background: var(--dyt-dropdown-hover-bg, color-mix(in srgb, var(--dyt-brand) 10%, transparent));
		color: var(--dyt-dropdown-hover-text, var(--dyt-brand));
	}

	.dyt-nav__list .sub-menu .current-menu-item > a {
		color: var(--dyt-dropdown-hover-text, var(--dyt-brand));
	}

	/* Caret on a parent item. ::after already carries the underline, so this
	   rides on ::before and is pinned to the right rather than sitting inline. */
	.dyt-nav__list > .menu-item-has-children > a {
		padding-right: 1.15em;
	}

	.dyt-nav__list > .menu-item-has-children > a::before {
		content: "";
		position: absolute;
		top: 50%;
		right: 1px;
		width: 6px;
		height: 6px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		translate: 0 -65%;
		rotate: 45deg;
		opacity: 0.75;
		transition: rotate var(--dyt-duration) var(--dyt-ease),
			translate var(--dyt-duration) var(--dyt-ease);
	}

	.dyt-nav__list > li:hover > .sub-menu,
	.dyt-nav__list > li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		translate: -50% 0;
		scale: 1;
	}

	.dyt-nav__list > .menu-item-has-children:hover > a::before,
	.dyt-nav__list > .menu-item-has-children:focus-within > a::before {
		rotate: -135deg;
		translate: 0 -25%;
	}

	@media (prefers-reduced-motion: reduce) {
		.dyt-nav__list .sub-menu,
		.dyt-nav__list .sub-menu a,
		.dyt-nav__list > .menu-item-has-children > a::before {
			transition: none;
		}
	}

	.dyt-header__actions {
		display: flex;
		align-items: center;
		gap: var(--dyt-space-3);
		flex-shrink: 0;
	}

	.dyt-header__cta {
		display: none;
	}

	@media (min-width: 48rem) {
		.dyt-header__cta {
			display: inline-flex;
		}
	}

	/* Burger */
	.dyt-burger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--dyt-burger-size, 44px);
		height: var(--dyt-burger-size, 44px);
		border-radius: var(--dyt-radius-sm);
		border: 1px solid var(--dyt-border);
		color: var(--dyt-burger-color, var(--dyt-header-text));
	}

	@media (min-width: 64rem) {
		.dyt-burger {
			display: none;
		}
	}

	.dyt-burger__box {
		display: grid;
		gap: 5px;
		width: 18px;
	}

	.dyt-burger__line {
		display: block;
		height: 2px;
		background: currentColor;
		border-radius: 2px;
		transition: translate var(--dyt-duration) var(--dyt-ease),
			rotate var(--dyt-duration) var(--dyt-ease),
			opacity var(--dyt-duration-fast) var(--dyt-ease);
	}

	.dyt-burger[aria-expanded="true"] .dyt-burger__line:nth-child(1) {
		translate: 0 7px;
		rotate: 45deg;
	}

	.dyt-burger[aria-expanded="true"] .dyt-burger__line:nth-child(2) {
		opacity: 0;
	}

	.dyt-burger[aria-expanded="true"] .dyt-burger__line:nth-child(3) {
		translate: 0 -7px;
		rotate: -45deg;
	}

	/* Mobile nav */
	/* Full screen. The sheet is a separate element from the container so the
	   container can stay put while the sheet is clipped open and shut — the
	   reveal is a growing circle struck from the burger, which is what gives
	   it the liquid feel rather than a panel sliding in from an edge. */
	.dyt-mobile-nav {
		position: fixed;
		inset: 0;
		z-index: var(--dyt-z-modal, 900);
	}

	.dyt-mobile-nav[hidden] {
		display: none;
	}

	.dyt-mobile-nav__sheet {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		background: var(--dyt-mobile-bg, var(--dyt-deep));
		color: var(--dyt-mobile-text, #fff);
		clip-path: circle(0% at calc(100% - 44px) 44px);
		transition: clip-path 620ms cubic-bezier(0.65, 0, 0.35, 1);
	}

	.dyt-mobile-nav.is-open .dyt-mobile-nav__sheet {
		clip-path: circle(155% at calc(100% - 44px) 44px);
	}

	.dyt-mobile-nav__bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--dyt-space-4);
		flex: none;
		min-height: var(--dyt-header-height, 72px);
		padding: env(safe-area-inset-top, 0px) var(--dyt-gutter) 0;
	}

	.dyt-mobile-nav__logo img {
		max-height: var(--dyt-mobile-logo-h, 34px);
		width: auto;
	}

	.dyt-mobile-nav__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
		border-radius: var(--dyt-radius-pill, 999px);
		background: transparent;
		color: inherit;
		cursor: pointer;
		transition: background var(--dyt-duration-fast) var(--dyt-ease),
			rotate var(--dyt-duration) var(--dyt-ease);
	}

	.dyt-mobile-nav__close svg {
		width: 20px;
		height: 20px;
	}

	.dyt-mobile-nav__close:hover,
	.dyt-mobile-nav__close:focus-visible {
		background: color-mix(in srgb, currentColor 14%, transparent);
		rotate: 90deg;
	}

	.dyt-mobile-nav__inner {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		gap: var(--dyt-space-5);
		padding: var(--dyt-space-6) var(--dyt-gutter) calc(var(--dyt-space-8) + env(safe-area-inset-bottom, 0px));
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.dyt-mobile-nav__list {
		display: flex;
		flex-direction: column;
		gap: 2px;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	/* Each row waits its turn behind the reveal. --i is set per item in JS, so
	   a longer menu staggers further without anyone counting rows in CSS. */
	.dyt-mobile-nav__list > li {
		opacity: 0;
		translate: 0 20px;
		transition: opacity 420ms var(--dyt-ease),
			translate 420ms cubic-bezier(0.22, 1, 0.36, 1);
		transition-delay: calc(var(--i, 0) * 55ms + 200ms);
	}

	.dyt-mobile-nav.is-open .dyt-mobile-nav__list > li {
		opacity: 1;
		translate: 0 0;
	}

	.dyt-mobile-nav__list a {
		display: block;
		padding: var(--dyt-space-3) 0;
		color: inherit;
		font-size: var(--dyt-mobile-size, clamp(1.5rem, 7vw, 2.25rem));
		font-weight: 600;
		line-height: 1.2;
		letter-spacing: var(--dyt-tracking-tight, -0.01em);
		text-decoration: none;
		border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
		transition: color var(--dyt-duration-fast) var(--dyt-ease),
			padding-left var(--dyt-duration) var(--dyt-ease);
	}

	.dyt-mobile-nav__list a:hover,
	.dyt-mobile-nav__list a:focus-visible,
	.dyt-mobile-nav__list .current-menu-item > a {
		color: var(--dyt-mobile-active, var(--dyt-brand));
		padding-left: 10px;
	}

	.dyt-mobile-nav__list .sub-menu {
		list-style: none;
		padding: var(--dyt-space-2) 0 var(--dyt-space-2) var(--dyt-space-4);
		margin: 0;
	}

	.dyt-mobile-nav__list .sub-menu a {
		font-size: var(--dyt-text-lg);
		font-weight: 500;
		border-bottom: 0;
		opacity: 0.75;
	}

	.dyt-mobile-nav__list .sub-menu a:hover,
	.dyt-mobile-nav__list .sub-menu a:focus-visible {
		opacity: 1;
	}

	/* The buttons and extras come in after the last menu row. */
	.dyt-mobile-nav__inner > :not(.dyt-mobile-nav__list) {
		opacity: 0;
		translate: 0 16px;
		transition: opacity 420ms var(--dyt-ease),
			translate 420ms cubic-bezier(0.22, 1, 0.36, 1);
		transition-delay: 380ms;
	}

	.dyt-mobile-nav.is-open .dyt-mobile-nav__inner > :not(.dyt-mobile-nav__list) {
		opacity: 1;
		translate: 0 0;
	}

	@media (min-width: 64rem) {
		.dyt-mobile-nav {
			display: none;
		}
	}

	/* Motion off: the panel simply is there, rather than arriving. */
	@media (prefers-reduced-motion: reduce) {
		.dyt-mobile-nav__sheet {
			clip-path: none;
			transition: none;
		}

		.dyt-mobile-nav__list > li,
		.dyt-mobile-nav__inner > :not(.dyt-mobile-nav__list),
		.dyt-mobile-nav__close,
		.dyt-mobile-nav__list a {
			transition: none;
			transition-delay: 0s;
			opacity: 1;
			translate: none;
		}
	}

	/* ------------------------------------------------ Gradients off switch */
	/* Everything in the theme paints from these three tokens, so redefining
	   them here turns every gradient — text, fills, borders, washes — into one
	   flat brand colour without touching a single component rule. */
	.dyt-no-gradients {
		--dyt-gradient: var(--dyt-brand);
		--dyt-gradient-soft: color-mix(in srgb, var(--dyt-brand) 12%, transparent);
		--dyt-gradient-wash: radial-gradient(
			120% 90% at 50% 0%,
			color-mix(in srgb, var(--dyt-brand) 15%, transparent) 0%,
			transparent 62%
		);
	}

	/* -------------------------------------------------- Header button/extras */
	.dyt-header__cta {
		background: var(--dyt-header-btn-bg, var(--dyt-gradient));
		color: var(--dyt-header-btn-text, #fff);
		border-radius: var(--dyt-header-btn-radius, var(--dyt-radius-pill));
		box-shadow: none;
	}

	.dyt-header__cta:hover {
		color: var(--dyt-header-btn-text, #fff);
		filter: brightness(1.08);
		box-shadow: 0 8px 22px color-mix(in srgb, var(--dyt-brand) 32%, transparent);
	}

	.dyt-hdrbtn-outline .dyt-header__cta {
		border: 1px solid color-mix(in srgb, var(--dyt-header-btn-text, #fff) 45%, transparent);
	}

	.dyt-hdrbtn-outline .dyt-header__cta:hover {
		background: color-mix(in srgb, var(--dyt-header-btn-text, #fff) 12%, transparent);
		filter: none;
	}

	.dyt-hdrbtn-size-md .dyt-header__cta {
		padding: var(--dyt-space-3) var(--dyt-space-6);
		font-size: var(--dyt-text-sm);
	}

	.dyt-hdrbtn-size-lg .dyt-header__cta {
		padding: var(--dyt-space-4) var(--dyt-space-7);
		font-size: var(--dyt-text-base);
	}

	.dyt-header__secondary {
		display: none;
		background: var(--dyt-header-btn2-bg, transparent);
		border: 1px solid color-mix(in srgb, var(--dyt-header-text) 38%, transparent);
		color: var(--dyt-header-btn2-text, var(--dyt-header-text));
		border-radius: var(--dyt-header-btn-radius, var(--dyt-radius-pill));
	}

	.dyt-hdrbtn2-text .dyt-header__secondary,
	.dyt-hdrbtn2-solid .dyt-header__secondary,
	.dyt-hdrbtn2-gradient .dyt-header__secondary {
		border-color: transparent;
	}

	/* Falls back to the main button's radius when set to "match". */
	.dyt-header__secondary {
		border-radius: var(--dyt-header-btn2-radius, var(--dyt-header-btn-radius, var(--dyt-radius-pill)));
	}

	.dyt-hdrbtn2-size-sm .dyt-header__secondary {
		padding: var(--dyt-space-2) var(--dyt-space-5);
		font-size: var(--dyt-text-xs);
	}

	.dyt-hdrbtn2-size-md .dyt-header__secondary {
		padding: var(--dyt-space-3) var(--dyt-space-6);
		font-size: var(--dyt-text-sm);
	}

	.dyt-hdrbtn2-size-lg .dyt-header__secondary {
		padding: var(--dyt-space-4) var(--dyt-space-7);
		font-size: var(--dyt-text-base);
	}

	.dyt-header__secondary:hover {
		background: color-mix(in srgb, var(--dyt-header-text) 12%, transparent);
		color: var(--dyt-header-text);
	}

	.dyt-header__extras {
		display: none;
		align-items: center;
		gap: var(--dyt-space-4);
	}

	.dyt-header__contact {
		display: inline-flex;
		align-items: center;
		gap: var(--dyt-space-2);
		font-size: var(--dyt-text-sm);
		color: color-mix(in srgb, var(--dyt-header-text) 78%, transparent);
		text-decoration: none;
		white-space: nowrap;
	}

	.dyt-header__contact:hover {
		color: var(--dyt-header-text);
	}

	.dyt-header__extras .dyt-social__link {
		width: 32px;
		height: 32px;
		border-color: color-mix(in srgb, var(--dyt-header-text) 25%, transparent);
	}

	.dyt-header__search {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		border-radius: var(--dyt-radius-pill);
		border: 1px solid color-mix(in srgb, var(--dyt-header-text) 25%, transparent);
		color: var(--dyt-header-text);
	}

	.dyt-header__search svg {
		width: 17px;
		height: 17px;
	}

	/* Extras are desktop-only unless explicitly allowed on small screens. */
	@media (min-width: 64rem) {
		.dyt-header__extras,
		.dyt-header__secondary {
			display: inline-flex;
		}
	}

	.dyt-header-extras-mobile .dyt-header__extras {
		display: inline-flex;
	}

	/* Extras repeated inside the mobile panel. */
	.dyt-mobile-nav__extras {
		display: flex;
		flex-direction: column;
		gap: var(--dyt-space-3);
		padding-top: var(--dyt-space-4);
		border-top: 1px solid var(--dyt-border);
	}

	/* ---------------------------------------------------------------- Buttons */
	/* Every value here is a token the Buttons tab in Theme Settings writes, and
	   every fallback is the design as it ships. The hover effect is a body
	   class rather than a token, because a transition is a behaviour: it needs
	   its own rules, not a different number in the same rule. */
	.dyt-btn {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--dyt-space-2);
		padding: var(--dyt-btn-py, var(--dyt-space-3)) var(--dyt-btn-px, var(--dyt-space-6));
		border-radius: var(--dyt-btn-radius, var(--dyt-radius-pill));
		font-size: var(--dyt-btn-size, var(--dyt-text-sm));
		font-weight: var(--dyt-btn-weight, 600);
		letter-spacing: var(--dyt-tracking-snug);
		line-height: 1.2;
		text-decoration: none;
		white-space: nowrap;
		cursor: pointer;
		isolation: isolate;
		transition:
			translate var(--dyt-btn-speed, var(--dyt-duration)) var(--dyt-ease),
			scale var(--dyt-btn-speed, var(--dyt-duration)) var(--dyt-ease),
			box-shadow var(--dyt-btn-speed, var(--dyt-duration)) var(--dyt-ease),
			background-color var(--dyt-btn-speed, var(--dyt-duration)) var(--dyt-ease),
			border-color var(--dyt-btn-speed, var(--dyt-duration)) var(--dyt-ease),
			color var(--dyt-btn-speed, var(--dyt-duration)) var(--dyt-ease);
	}

	.dyt-btn:active {
		translate: 0 1px;
		scale: 1;
	}

	.dyt-btn:focus-visible {
		outline: 2px solid var(--dyt-brand);
		outline-offset: 3px;
	}

	/* No shadow unless one is asked for. A drop shadow under every button is a
	   look, not a default — the Buttons tab turns it on. */
	.dyt-btn--primary {
		background: var(--dyt-btn-bg, var(--dyt-gradient));
		color: var(--dyt-btn-text, #ffffff);
		border: var(--dyt-btn-border-w, 0px) solid transparent;
		box-shadow: var(--dyt-btn-shadow, none);
	}

	.dyt-btn--secondary {
		background: var(--dyt-btn2-bg, transparent);
		color: var(--dyt-btn2-text, var(--dyt-text));
		border: var(--dyt-btn-border-w, 1px) solid var(--dyt-btn2-border, var(--dyt-border-strong));
	}

	.dyt-btn--ghost {
		background: none;
		color: var(--dyt-btn2-text, var(--dyt-text));
		border: 0;
		padding-inline: var(--dyt-space-3);
	}

	.dyt-btn--sm {
		padding: calc(var(--dyt-btn-py, var(--dyt-space-3)) * 0.7) calc(var(--dyt-btn-px, var(--dyt-space-6)) * 0.8);
		font-size: calc(var(--dyt-btn-size, var(--dyt-text-sm)) * 0.9);
	}

	.dyt-btn--lg {
		padding: calc(var(--dyt-btn-py, var(--dyt-space-3)) * 1.35) calc(var(--dyt-btn-px, var(--dyt-space-6)) * 1.2);
		font-size: calc(var(--dyt-btn-size, var(--dyt-text-sm)) * 1.1);
	}

	.dyt-btn--block {
		display: flex;
		width: 100%;
	}

	/* The wash that the fill and sweep effects move. It is painted behind the
	   label and in front of the button's own background, which is why the
	   button isolates itself into its own stacking context above. */
	.dyt-btn::before,
	.dyt-btn::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		border-radius: inherit;
		pointer-events: none;
	}

	.dyt-btn::before {
		opacity: 0;
		transition: opacity var(--dyt-btn-speed, var(--dyt-duration)) var(--dyt-ease);
	}

	/* -- Lift: rises off the page, shadow deepening under it ---------------- */
	.dyt-btnfx-lift .dyt-btn:hover {
		translate: 0 -3px;
	}

	/* The lift is the movement. It deepens a shadow that is already there and
	   invents nothing when there is not one. */
	.dyt-btnfx-lift .dyt-btn--primary:hover {
		box-shadow: var(--dyt-btn-shadow-hover, var(--dyt-btn-shadow, none));
	}

	.dyt-btnfx-lift .dyt-btn--secondary:hover {
		background: color-mix(in srgb, var(--dyt-text) 8%, transparent);
		border-color: var(--dyt-text);
		box-shadow: var(--dyt-btn-shadow-hover, none);
	}

	/* -- Fill: the accent rises from the bottom edge ------------------------ */
	.dyt-btnfx-fill .dyt-btn {
		overflow: hidden;
	}

	.dyt-btnfx-fill .dyt-btn::before {
		background: var(--dyt-btn-hover-bg, var(--dyt-brand));
		opacity: 1;
		translate: 0 101%;
		transition: translate var(--dyt-btn-speed, var(--dyt-duration)) var(--dyt-ease);
	}

	.dyt-btnfx-fill .dyt-btn:hover::before {
		translate: 0 0;
	}

	.dyt-btnfx-fill .dyt-btn--secondary:hover,
	.dyt-btnfx-fill .dyt-btn--ghost:hover {
		color: var(--dyt-btn-hover-text, #ffffff);
		border-color: var(--dyt-btn-hover-bg, var(--dyt-brand));
	}

	.dyt-btnfx-fill .dyt-btn--primary::before {
		background: var(--dyt-btn-hover-bg, color-mix(in srgb, #000 18%, var(--dyt-brand)));
	}

	/* -- Sweep: a band of light crosses the face --------------------------- */
	.dyt-btnfx-sweep .dyt-btn {
		overflow: hidden;
	}

	.dyt-btnfx-sweep .dyt-btn::after {
		background: linear-gradient(
			115deg,
			transparent 25%,
			color-mix(in srgb, var(--dyt-btn-sheen, #ffffff) 45%, transparent) 50%,
			transparent 75%
		);
		translate: -130% 0;
	}

	.dyt-btnfx-sweep .dyt-btn:hover::after {
		translate: 130% 0;
		transition: translate 700ms var(--dyt-ease-out);
	}

	.dyt-btnfx-sweep .dyt-btn:hover {
		translate: 0 -2px;
	}

	/* -- Grow ------------------------------------------------------------- */
	.dyt-btnfx-grow .dyt-btn:hover {
		scale: 1.04;
	}

	.dyt-btnfx-grow .dyt-btn--secondary:hover {
		border-color: var(--dyt-text);
	}

	/* -- Glow: a halo spreads outward ------------------------------------- */
	.dyt-btnfx-glow .dyt-btn:hover {
		box-shadow:
			0 0 0 3px color-mix(in srgb, var(--dyt-btn-shadow-color, var(--dyt-brand)) 25%, transparent),
			0 16px 40px -12px color-mix(in srgb, var(--dyt-btn-shadow-color, var(--dyt-brand)) 75%, transparent);
	}

	.dyt-btnfx-glow .dyt-btn--secondary:hover {
		border-color: var(--dyt-btn-shadow-color, var(--dyt-brand));
		color: var(--dyt-btn-shadow-color, var(--dyt-brand));
	}

	/* -- None: still answers, just without the movement -------------------- */
	.dyt-btnfx-none .dyt-btn:hover {
		filter: brightness(1.08);
	}

	/* A pointer is what these are for. Keyboard focus keeps its outline, and a
	   visitor who asked for less movement gets the colour change alone. */
	@media (prefers-reduced-motion: reduce) {
		.dyt-btn,
		.dyt-btn::before,
		.dyt-btn::after {
			transition-duration: 1ms;
		}

		.dyt-btn:hover {
			translate: none;
			scale: none;
		}
	}

	/* ----------------------------------------------------------------- Cards */
	.dyt-card {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--dyt-space-3);
		height: 100%;
		padding: var(--dyt-space-6);
		background: var(--dyt-bg-panel);
		border: 1px solid var(--dyt-border);
		border-radius: var(--dyt-radius-lg);
		overflow: hidden;
		transition: translate var(--dyt-duration) var(--dyt-ease),
			border-color var(--dyt-duration) var(--dyt-ease),
			box-shadow var(--dyt-duration) var(--dyt-ease);
	}

	.dyt-card::before {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--dyt-gradient-soft);
		opacity: 0;
		transition: opacity var(--dyt-duration) var(--dyt-ease);
		pointer-events: none;
	}

	.dyt-card:hover {
		translate: 0 -4px;
		border-color: var(--dyt-border-strong);
		box-shadow: var(--dyt-shadow);
	}

	.dyt-card:hover::before {
		opacity: 1;
	}

	.dyt-card > * {
		position: relative;
		z-index: 1;
	}

	.dyt-card__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		border-radius: var(--dyt-radius);
		background: var(--dyt-gradient-soft);
		border: 1px solid var(--dyt-border);
		margin-bottom: var(--dyt-space-2);
	}

	.dyt-card__icon img {
		width: 24px;
		height: 24px;
		object-fit: contain;
	}

	.dyt-card__title {
		font-size: var(--dyt-text-lg);
		font-weight: 600;
		letter-spacing: var(--dyt-tracking-snug);
	}

	.dyt-card__title a {
		text-decoration: none;
	}

	.dyt-card__title a::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 2;
	}

	.dyt-card__text {
		color: var(--dyt-text-secondary);
		font-size: var(--dyt-body-size, var(--dyt-text-base));
	}

	.dyt-card__media {
		margin: calc(var(--dyt-space-6) * -1) calc(var(--dyt-space-6) * -1) var(--dyt-space-4);
		aspect-ratio: 16 / 10;
		overflow: hidden;
	}

	.dyt-card__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: scale var(--dyt-duration-slow) var(--dyt-ease);
	}

	.dyt-card:hover .dyt-card__media img {
		scale: 1.04;
	}

	.dyt-card__meta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--dyt-space-3);
		margin-top: auto;
		padding-top: var(--dyt-space-3);
		font-size: var(--dyt-text-xs);
		color: var(--dyt-text-muted);
	}

	.dyt-card--portrait .dyt-card__media {
		aspect-ratio: 4 / 5;
	}

	/* Metrics */
	.dyt-metrics {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
		gap: var(--dyt-space-5);
		list-style: none;
		padding: 0;
		margin-top: var(--dyt-space-7);
	}

	.dyt-metric {
		display: flex;
		flex-direction: column;
		gap: var(--dyt-space-1);
	}

	.dyt-metric__value {
		font-size: var(--dyt-text-3xl);
		font-weight: 700;
		letter-spacing: var(--dyt-tracking-tight);
		background: var(--dyt-gradient);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

	.dyt-metric__label {
		font-size: var(--dyt-text-sm);
		color: var(--dyt-text-secondary);
	}

	/* Stars */
	.dyt-stars {
		position: relative;
		display: inline-block;
		width: 6.5em;
		height: 1.2em;
		background: currentColor;
		opacity: 0.25;
		mask: repeat left center / 1.3em 1.2em
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.3 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z'/%3E%3C/svg%3E");
	}

	.dyt-stars__fill {
		position: absolute;
		inset: 0;
		background: var(--dyt-warning);
	}

	/* Accordion */
	.dyt-accordion {
		display: flex;
		flex-direction: column;
		gap: var(--dyt-space-3);
	}

	.dyt-accordion__item {
		background: var(--dyt-bg-panel);
		border: 1px solid var(--dyt-border);
		border-radius: var(--dyt-radius);
		overflow: hidden;
		transition: border-color var(--dyt-duration) var(--dyt-ease);
	}

	.dyt-accordion__item:has([aria-expanded="true"]) {
		border-color: var(--dyt-border-strong);
	}

	.dyt-accordion__trigger {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--dyt-space-4);
		width: 100%;
		padding: var(--dyt-space-5);
		text-align: left;
		font-size: var(--dyt-text-lg);
		font-weight: 500;
	}

	.dyt-accordion__icon {
		position: relative;
		flex-shrink: 0;
		width: 20px;
		height: 20px;
	}

	.dyt-accordion__icon::before,
	.dyt-accordion__icon::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: 2px;
		background: currentColor;
		border-radius: 2px;
		translate: 0 -50%;
		transition: rotate var(--dyt-duration) var(--dyt-ease),
			opacity var(--dyt-duration) var(--dyt-ease);
	}

	.dyt-accordion__icon::after {
		rotate: 90deg;
	}

	[aria-expanded="true"] .dyt-accordion__icon::after {
		rotate: 0deg;
		opacity: 0;
	}

	.dyt-accordion__panel {
		padding: 0 var(--dyt-space-5) var(--dyt-space-5);
		color: var(--dyt-text-secondary);
	}

	/* Slider — native scroll-snap with JS only for the controls. */
	.dyt-slider {
		position: relative;
	}

	.dyt-slider__track {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(min(100%, 20rem), 1fr);
		gap: var(--dyt-space-5);
		overflow-x: auto;
		/* Declaring only overflow-x leaves overflow-y computing to auto, which
		   makes a horizontal slider scrollable vertically as well. A card held
		   18px down by the reveal then gives it something to scroll, and the
		   track can sit part-scrolled — which is why a blog card came up
		   clipped at the top until the page was touched. */
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;
		padding-bottom: var(--dyt-space-4);
		margin-inline: calc(var(--dyt-gutter) * -1);
		padding-inline: var(--dyt-gutter);
	}

	.dyt-slider__track::-webkit-scrollbar {
		display: none;
	}

	@media (min-width: 48rem) {
		.dyt-slider__track {
			grid-auto-columns: minmax(0, calc((100% - var(--dyt-space-5) * 2) / 3));
		}
	}

	.dyt-slider__item {
		scroll-snap-align: start;
	}

	/* Inside a track the reveal fades in but does not travel, so it never
	   creates the overflow the rule above would otherwise have to hide. */
	.dyt-slider__track .dyt-reveal {
		translate: none;
	}

	.dyt-slider__controls {
		display: flex;
		gap: var(--dyt-space-2);
		justify-content: flex-end;
		margin-top: var(--dyt-space-4);
	}

	.dyt-slider__btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border-radius: var(--dyt-radius-pill);
		border: 1px solid var(--dyt-border-strong);
		color: var(--dyt-text);
		transition: background-color var(--dyt-duration) var(--dyt-ease),
			opacity var(--dyt-duration) var(--dyt-ease);
	}

	.dyt-slider__btn:hover:not(:disabled) {
		background: color-mix(in srgb, var(--dyt-text) 10%, transparent);
	}

	.dyt-slider__btn:disabled {
		opacity: 0.35;
		cursor: not-allowed;
	}

	.dyt-slider__btn svg {
		width: 18px;
		height: 18px;
	}

	/* Marquee — the transform is driven by GSAP, not CSS, so there is no
	   keyframe here to fight with the tween. */
	.dyt-marquee {
		position: relative;
		overflow: hidden;
		mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	}

	.dyt-marquee__track {
		display: flex;
		align-items: center;
		gap: var(--dyt-marquee-gap, clamp(2.5rem, 5vw, 5rem));
		width: max-content;
		will-change: transform;
	}

	.dyt-marquee__track > * {
		flex: 0 0 auto;
	}

	.dyt-trust__rows {
		display: flex;
		flex-direction: column;
		gap: clamp(1.5rem, 3vw, 2.75rem);
	}

	/* Constrained to a measure rather than bleeding edge to edge. */
	.dyt-trust__rows--contained {
		max-width: var(--dyt-trust-max, var(--dyt-container));
		margin-inline: auto;
		padding-inline: var(--dyt-gutter);
	}

	.dyt-trust__rows--wide {
		--dyt-trust-max: var(--dyt-container-wide);
	}

	/* Without JS or GSAP the track simply scrolls by hand rather than
	   sitting there clipped. */
	.dyt-marquee.is-static {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.dyt-marquee.is-static::-webkit-scrollbar {
		display: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.dyt-marquee {
			overflow-x: auto;
		}
	}

	.dyt-logo-item img {
		max-height: 34px;
		width: auto;
		object-fit: contain;
		opacity: 0.6;
		filter: grayscale(1);
		transition: opacity var(--dyt-duration) var(--dyt-ease),
			filter var(--dyt-duration) var(--dyt-ease);
	}

	.dyt-logo-item:hover img {
		opacity: 1;
		filter: grayscale(0);
	}

	/* Pills and tags */
	.dyt-pill {
		display: inline-flex;
		align-items: center;
		gap: var(--dyt-space-2);
		padding: var(--dyt-space-1) var(--dyt-space-3);
		border-radius: var(--dyt-radius-pill);
		border: 1px solid var(--dyt-border);
		background: color-mix(in srgb, var(--dyt-text) 5%, transparent);
		font-size: var(--dyt-text-xs);
		color: var(--dyt-text-secondary);
	}

	.dyt-tags {
		display: flex;
		flex-wrap: wrap;
		gap: var(--dyt-space-2);
		list-style: none;
		padding: 0;
		margin-top: var(--dyt-space-7);
	}

	.dyt-tag {
		display: inline-block;
		padding: var(--dyt-space-1) var(--dyt-space-3);
		border-radius: var(--dyt-radius-pill);
		border: 1px solid var(--dyt-border);
		font-size: var(--dyt-text-xs);
		text-decoration: none;
	}

	/* Pagination */
	.dyt-pagination {
		margin-top: var(--dyt-space-9);
	}

	.dyt-pagination .nav-links {
		display: flex;
		flex-wrap: wrap;
		gap: var(--dyt-space-2);
		justify-content: center;
	}

	.dyt-pagination .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		height: 44px;
		padding-inline: var(--dyt-space-3);
		border-radius: var(--dyt-radius-sm);
		border: 1px solid var(--dyt-border);
		text-decoration: none;
		font-size: var(--dyt-text-sm);
	}

	.dyt-pagination .page-numbers.current {
		background: var(--dyt-gradient);
		border-color: transparent;
		color: #fff;
	}

	/* Forms */
	.dyt-field {
		display: flex;
		flex-direction: column;
		gap: var(--dyt-space-2);
	}

	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="tel"],
	input[type="search"],
	textarea,
	select {
		width: 100%;
		padding: var(--dyt-space-3) var(--dyt-space-4);
		background: var(--dyt-bg-inset);
		border: 1px solid var(--dyt-border);
		border-radius: var(--dyt-radius-sm);
		color: var(--dyt-text);
		font-size: var(--dyt-text-sm);
		transition: border-color var(--dyt-duration) var(--dyt-ease);
	}

	input::placeholder,
	textarea::placeholder {
		color: var(--dyt-text-muted);
	}

	input:focus,
	textarea:focus,
	select:focus {
		border-color: var(--dyt-brand);
		outline: none;
	}

	/* Toggle switch (pricing billing period) */
	.dyt-toggle {
		display: inline-flex;
		align-items: center;
		gap: var(--dyt-space-3);
		padding: var(--dyt-space-1);
		border-radius: var(--dyt-radius-pill);
		border: 1px solid var(--dyt-border);
		background: var(--dyt-bg-inset);
	}

	.dyt-toggle__option {
		padding: var(--dyt-space-2) var(--dyt-space-5);
		border-radius: var(--dyt-radius-pill);
		font-size: var(--dyt-text-sm);
		font-weight: 500;
		color: var(--dyt-text-secondary);
		transition: background-color var(--dyt-duration) var(--dyt-ease),
			color var(--dyt-duration) var(--dyt-ease);
	}

	.dyt-toggle__option[aria-pressed="true"] {
		background: var(--dyt-gradient);
		color: #fff;
	}

	/* ---------------------------------------------------------------- Footer */
	/* The brand column is wider than the link columns and sized in shares, so
	   adding or removing a column redistributes the row instead of breaking it. */
	.dyt-footer {
		/* One place each unset colour falls back to, so a dark footer only has
		   to move these three rather than every field on the screen. */
		--dyt-ft-ink: var(--dyt-text);
		--dyt-ft-ink-muted: var(--dyt-text-muted);
		--dyt-ft-rule: var(--dyt-border);

		padding-block: var(--dyt-ft-pad-top, var(--dyt-space-9)) var(--dyt-ft-pad-bottom, var(--dyt-space-7));
		background: var(--dyt-ft-bg, transparent);
		color: var(--dyt-ft-text, var(--dyt-text-secondary));
	}

	.dyt-footer--on-dark {
		--dyt-ft-ink: #ffffff;
		--dyt-ft-ink-muted: rgba(255, 255, 255, 0.62);
		--dyt-ft-rule: rgba(255, 255, 255, 0.16);

		color: var(--dyt-ft-text, rgba(255, 255, 255, 0.72));
	}

	/* Two tracks: the brand, then the block of link columns. The count comes
	   from the template rather than from auto-fit, which sized itself on the
	   space available and left the columns wrapping onto a second row. */
	.dyt-footer__top {
		display: grid;
		grid-template-columns: var(--dyt-ft-brand-share, 1.4fr) minmax(0, 3fr);
		gap: var(--dyt-ft-row-gap, var(--dyt-space-8)) var(--dyt-ft-col-gap, var(--dyt-space-7));
		align-items: start;
	}

	/* No link columns at all: the brand takes the row to itself. */
	.dyt-footer__top:not(:has(.dyt-footer__columns)) {
		grid-template-columns: minmax(0, 1fr);
	}

	.dyt-footer__brand {
		display: flex;
		flex-direction: column;
		gap: var(--dyt-ft-block-gap, var(--dyt-space-7));
	}

	.dyt-footer__logo img {
		max-height: var(--dyt-ft-logo-h, 28px);
		width: auto;
	}

	.dyt-footer__intro {
		margin: 0;
		max-width: 34ch;
		font-size: var(--dyt-ft-contact-size, var(--dyt-text-base));
	}

	.dyt-footer__block {
		display: flex;
		flex-direction: column;
		gap: var(--dyt-space-3);
	}

	.dyt-footer__block-heading {
		margin: 0;
		font-size: var(--dyt-ft-contact-size, var(--dyt-text-base));
		font-weight: 600;
		color: var(--dyt-ft-heading-color, var(--dyt-ft-ink));
	}

	.dyt-footer__lines {
		display: flex;
		flex-direction: column;
		gap: var(--dyt-ft-contact-gap, var(--dyt-space-3));
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.dyt-footer__line {
		font-size: var(--dyt-ft-contact-size, var(--dyt-text-base));
	}

	.dyt-footer__line a {
		color: var(--dyt-ft-link, inherit);
		text-decoration: none;
	}

	.dyt-footer__line a:hover {
		color: var(--dyt-ft-link-hover, var(--dyt-ft-ink));
	}

	.dyt-footer__tag {
		opacity: 0.7;
	}

	.dyt-footer__columns {
		display: grid;
		grid-template-columns: repeat(var(--dyt-ft-cols, 4), minmax(0, 1fr));
		gap: var(--dyt-ft-row-gap, var(--dyt-space-8)) var(--dyt-ft-col-gap, var(--dyt-space-7));
		align-items: start;
	}

	/* The newsletter, when there is one, gets a row of its own underneath. */
	.dyt-footer__newsletter {
		grid-column: 1 / -1;
	}

	.dyt-footer__column {
		display: flex;
		flex-direction: column;
		gap: var(--dyt-space-5);
		min-width: 0;
	}

	.dyt-footer__heading {
		margin: 0;
		font-size: var(--dyt-ft-heading-size, var(--dyt-text-xl));
		font-weight: var(--dyt-ft-heading-weight, 600);
		color: var(--dyt-ft-heading-color, var(--dyt-ft-ink));
	}

	.dyt-footer__list {
		display: flex;
		flex-direction: column;
		gap: var(--dyt-ft-link-gap, var(--dyt-space-3));
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: var(--dyt-ft-link-size, var(--dyt-text-base));
	}

	.dyt-footer__list a {
		color: var(--dyt-ft-link, inherit);
		text-decoration: none;
		transition: color var(--dyt-duration) var(--dyt-ease-out);
	}

	.dyt-footer__list a:hover {
		color: var(--dyt-ft-link-hover, var(--dyt-ft-ink));
	}

	.dyt-footer__newsletter {
		display: flex;
		flex-direction: column;
		gap: var(--dyt-space-4);
		grid-column: 1 / -1;
	}

	/* Badges on one side, social on the other. */
	.dyt-footer__strip {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: var(--dyt-space-5);
		margin-top: var(--dyt-space-9);
	}

	.dyt-footer__badges {
		display: flex;
		flex-wrap: wrap;
		gap: var(--dyt-ft-badge-gap, var(--dyt-space-4));
	}

	.dyt-footer__badge {
		display: inline-flex;
		align-items: center;
		gap: var(--dyt-space-3);
		padding: 0.7em 1.2em;
		border-radius: var(--dyt-ft-badge-radius, var(--dyt-radius-pill));
		background: var(--dyt-ft-badge-bg, color-mix(in srgb, currentColor 12%, transparent));
		color: var(--dyt-ft-badge-text, var(--dyt-ft-ink));
		font-size: var(--dyt-ft-badge-size, var(--dyt-text-sm));
		font-weight: 500;
		text-decoration: none;
	}

	.dyt-footer__badge-mark {
		display: grid;
		place-items: center;
		flex: 0 0 auto;
	}

	.dyt-footer__badge-mark img {
		max-height: var(--dyt-ft-badge-logo-h, 20px);
		width: auto;
		object-fit: contain;
	}

	.dyt-footer__badge-score {
		display: inline-flex;
		align-items: center;
		gap: 0.25em;
		opacity: 0.75;
	}

	.dyt-footer__badge-star {
		color: #e5484d;
	}

	.dyt-footer__social {
		gap: var(--dyt-ft-social-gap, var(--dyt-space-5));
	}

	/* Two social treatments: a bare icon, or the bordered circle the shared
	   component draws. The plain one has to undo that chrome. */
	.dyt-footer--social-plain .dyt-social__link {
		width: auto;
		height: auto;
		border: 0;
		border-radius: 0;
		color: var(--dyt-ft-social-color, inherit);
	}

	.dyt-footer--social-circle .dyt-social__link {
		width: calc(var(--dyt-ft-social-size, 20px) * 2);
		height: calc(var(--dyt-ft-social-size, 20px) * 2);
		background: var(--dyt-ft-social-bg, transparent);
		color: var(--dyt-ft-social-color, inherit);
	}

	.dyt-footer .dyt-social__link:hover {
		color: var(--dyt-ft-social-hover, var(--dyt-ft-ink));
	}

	.dyt-footer .dyt-social__link img,
	.dyt-footer .dyt-social__link svg {
		width: var(--dyt-ft-social-size, 20px);
		height: var(--dyt-ft-social-size, 20px);
	}

	.dyt-footer__bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: var(--dyt-space-4);
		margin-top: var(--dyt-ft-divider-gap, var(--dyt-space-7));
		padding-top: var(--dyt-ft-divider-gap, var(--dyt-space-7));
		border-top: var(--dyt-ft-divider-w, 1px) solid var(--dyt-ft-divider, var(--dyt-ft-rule));
		font-size: var(--dyt-ft-bottom-size, var(--dyt-text-sm));
		color: var(--dyt-ft-bottom-color, var(--dyt-ft-ink-muted));
	}

	.dyt-footer__copyright {
		margin: 0;
	}

	.dyt-footer__legal {
		display: flex;
		flex-wrap: wrap;
		gap: var(--dyt-space-6);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.dyt-footer__legal a {
		color: inherit;
		text-decoration: none;
	}

	.dyt-footer__legal a:hover {
		color: var(--dyt-ft-link-hover, var(--dyt-ft-ink));
	}

	@media (max-width: 64rem) {
		.dyt-footer__top {
			grid-template-columns: minmax(0, 1fr);
		}

		.dyt-footer__columns {
			grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
		}
	}

	@media (max-width: 47.99rem) {
		.dyt-footer {
			padding-block: var(--dyt-ft-pad-top-m, var(--dyt-ft-pad-top, var(--dyt-space-8)))
				var(--dyt-ft-pad-bottom-m, var(--dyt-ft-pad-bottom, var(--dyt-space-6)));
		}

		.dyt-footer__columns {
			grid-template-columns: repeat(var(--dyt-ft-cols-m, 2), minmax(0, 1fr));
		}

		.dyt-footer__strip {
			justify-content: flex-start;
		}

		.dyt-footer--center-m .dyt-footer__bottom {
			flex-direction: column;
			justify-content: center;
			text-align: center;
		}

		.dyt-footer--center-m .dyt-footer__legal {
			justify-content: center;
		}

		/* Centred on a phone has to mean centred throughout. Until now only the
		   last row obeyed the setting, so the logo, the link columns and the
		   contact strip stayed left while the copyright sat in the middle —
		   and the strip was pinned to flex-start, which fought it outright. */
		.dyt-footer--center-m .dyt-footer__brand,
		.dyt-footer--center-m .dyt-footer__column,
		.dyt-footer--center-m .dyt-footer__block {
			align-items: center;
			text-align: center;
		}

		.dyt-footer--center-m .dyt-footer__strip,
		.dyt-footer--center-m .dyt-footer__badges,
		.dyt-footer--center-m .dyt-footer__social,
		.dyt-footer--center-m .dyt-footer__lines {
			justify-content: center;
			align-items: center;
		}

		/* A list centres its rows, not its text, unless the items are told to
		   line up on the middle as well. */
		.dyt-footer--center-m .dyt-footer__list,
		.dyt-footer--center-m .dyt-footer__legal {
			align-items: center;
			text-align: center;
		}
	}

	.dyt-social {
		display: flex;
		gap: var(--dyt-space-2);
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.dyt-social__link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		border-radius: var(--dyt-radius-pill);
		border: 1px solid var(--dyt-border);
		background: transparent;
		color: inherit;
		font-size: var(--dyt-text-sm);
		font-weight: 600;
		line-height: 1;
		text-decoration: none;
		transition: border-color var(--dyt-duration) var(--dyt-ease),
			background-color var(--dyt-duration) var(--dyt-ease);
	}

	.dyt-social__link img {
		width: 18px;
		height: 18px;
		object-fit: contain;
	}

	/* Shown until an icon is uploaded: the network's initial, so the button is
	   still meaningful rather than an empty circle. */
	.dyt-social__initial {
		text-transform: uppercase;
	}

	.dyt-social__link:hover {
		border-color: var(--dyt-brand);
	}

	/* Reveal on scroll — used by cards and other repeated items. */
	.dyt-reveal {
		opacity: 0;
		translate: 0 18px;
		transition: opacity var(--dyt-duration-slow) var(--dyt-ease-out) var(--dyt-child-delay, 0ms),
			translate var(--dyt-duration-slow) var(--dyt-ease-out) var(--dyt-child-delay, 0ms);
	}

	.dyt-reveal.is-visible {
		opacity: 1;
		translate: 0 0;
	}

	/* Section entry animation, configured per section in the Design tab. */
	.dyt-anim {
		transition:
			opacity var(--dyt-anim-duration, 520ms) var(--dyt-ease-out) var(--dyt-anim-delay, 0ms),
			translate var(--dyt-anim-duration, 520ms) var(--dyt-ease-out) var(--dyt-anim-delay, 0ms),
			scale var(--dyt-anim-duration, 520ms) var(--dyt-ease-out) var(--dyt-anim-delay, 0ms);
	}

	/* Only the section itself is hidden up front; when the items inside are
	   staggered instead, the section stays put and its children animate. */
	.dyt-anim:not([data-dyt-stagger]):not(.is-visible) {
		opacity: 0;
	}

	.dyt-anim:not([data-dyt-stagger]):not(.is-visible)[data-dyt-anim="fade-up"] {
		translate: 0 28px;
	}

	.dyt-anim:not([data-dyt-stagger]):not(.is-visible)[data-dyt-anim="fade-down"] {
		translate: 0 -28px;
	}

	.dyt-anim:not([data-dyt-stagger]):not(.is-visible)[data-dyt-anim="fade-left"] {
		translate: -36px 0;
	}

	.dyt-anim:not([data-dyt-stagger]):not(.is-visible)[data-dyt-anim="fade-right"] {
		translate: 36px 0;
	}

	.dyt-anim:not([data-dyt-stagger]):not(.is-visible)[data-dyt-anim="zoom"] {
		scale: 0.94;
	}

	.dyt-anim.is-visible {
		opacity: 1;
		translate: 0 0;
		scale: 1;
	}

	@media (prefers-reduced-motion: reduce) {
		.dyt-reveal,
		.dyt-anim {
			opacity: 1 !important;
			translate: none !important;
			scale: none !important;
			transition: none !important;
		}

		.dyt-btn:hover,
		.dyt-card:hover {
			translate: none;
		}
	}

	.dyt-note {
		margin-top: var(--dyt-space-5);
		padding: var(--dyt-space-4);
		border: 1px dashed var(--dyt-border-strong);
		border-radius: var(--dyt-radius);
		color: var(--dyt-text-muted);
		font-size: var(--dyt-text-sm);
	}
}