/**
 * Section-level styles. One block per flexible layout.
 */

@layer sections {
	/* ------------------------------------------------------------------ Hero */
	/* Spacing comes from the section wrapper. The hero adding its own
	   padding-block on top of that was doubling the gap under the header. */
	.dyt-hero {
		position: relative;
	}

	.dyt-hero__inner {
		display: grid;
		gap: clamp(var(--dyt-space-7), 4vw, var(--dyt-space-10));
		align-items: center;
		grid-template-columns: 1fr;
	}

	@media (min-width: 64rem) {
		.dyt-hero--split .dyt-hero__inner {
			grid-template-columns: 1.05fr 0.95fr;
		}
	}

	.dyt-hero--centred .dyt-hero__content {
		max-width: 52rem;
		margin-inline: auto;
		text-align: center;
		align-items: center;
	}

	.dyt-hero__content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--dyt-space-5);
	}

	.dyt-hero__title {
		font-size: var(--dyt-heading-size, var(--dyt-text-4xl));
		letter-spacing: var(--dyt-tracking-tight);
	}

	.dyt-hero__title em {
		font-style: normal;
		background: var(--dyt-gradient);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

	.dyt-hero__intro {
		font-size: var(--dyt-body-size, var(--dyt-text-lg));
		color: var(--dyt-text-secondary);
		max-width: 46ch;
	}

	.dyt-hero__actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--dyt-space-4);
	}

	.dyt-hero__note {
		flex: 1 1 14rem;
		max-width: 30ch;
		font-size: var(--dyt-text-base);
		color: var(--dyt-text-muted);
		line-height: var(--dyt-leading-snug);
	}

	.dyt-hero--centred .dyt-hero__actions {
		justify-content: center;
	}

	/* -- Hero media ---------------------------------------------------- */
	.dyt-hero__media {
		position: relative;
		min-width: 0;
	}

	.dyt-hero__media--single .dyt-hero__shot-media {
		border-radius: var(--dyt-radius-xl);
	}

	.dyt-hero__media--single .dyt-hero__shot-media img {
		width: 100%;
		height: auto;
	}

	/* Collage: one tall image with a stack beside it. */
	.dyt-hero__media--collage {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--dyt-space-4);
		align-items: stretch;
	}

	@media (min-width: 40rem) {
		.dyt-hero__media--collage {
			grid-template-columns: 1.02fr 0.98fr;
		}
	}

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

	.dyt-hero__lead,
	.dyt-hero__side {
		min-height: 0;
	}

	.dyt-hero__lead .dyt-hero__shot,
	.dyt-hero__lead .dyt-hero__shot-media {
		height: 100%;
	}

	.dyt-hero__side .dyt-hero__shot {
		flex: 1 1 auto;
	}

	.dyt-hero__side .dyt-hero__shot-media {
		height: 100%;
	}

	/* Even grid: every image the same size. */
	.dyt-hero__media--grid {
		display: grid;
		gap: var(--dyt-space-4);
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	}

	/* Shared image treatment. */
	.dyt-hero__shot {
		display: flex;
		flex-direction: column;
		gap: var(--dyt-space-3);
		margin: 0;
		min-width: 0;
	}

	.dyt-hero__shot-media {
		position: relative;
		overflow: hidden;
		border-radius: var(--dyt-radius-lg);
		background: var(--dyt-bg-inset);
	}

	.dyt-hero__shot-media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.dyt-hero__media--collage .dyt-hero__lead .dyt-hero__shot-media {
		aspect-ratio: 3 / 4;
	}

	/* With nothing stacked beside it, the lead image has no reason to stay in
	   one column — it spans the grid and keeps its natural proportions. */
	.dyt-hero__media--collage > .dyt-hero__lead:only-child {
		grid-column: 1 / -1;
	}

	.dyt-hero__media--collage > .dyt-hero__lead:only-child .dyt-hero__shot-media {
		aspect-ratio: auto;
	}

	.dyt-hero__media--collage > .dyt-hero__lead:only-child .dyt-hero__shot-media img {
		width: 100%;
		height: auto;
	}

	.dyt-hero__media--collage .dyt-hero__side .dyt-hero__shot-media,
	.dyt-hero__media--grid .dyt-hero__shot-media {
		aspect-ratio: 4 / 3;
	}

	.dyt-hero__shot-caption {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--dyt-space-2) var(--dyt-space-3);
		font-size: var(--dyt-text-sm);
	}

	.dyt-hero__shot-title {
		font-weight: 600;
	}

	.dyt-hero__shot-location {
		display: inline-flex;
		align-items: center;
		gap: var(--dyt-space-1);
		color: var(--dyt-text-muted);
	}

	.dyt-hero--no-media .dyt-hero__inner {
		grid-template-columns: 1fr;
	}

	/* ------------------------------------------------------------- Trust bar */
	/* The trust bar has no heading, so its lead-in answers to both controls —
	   heading size first, since that is the only text in the section. */
	.dyt-trust__text {
		text-align: center;
		font-size: var(--dyt-heading-size, var(--dyt-body-size, var(--dyt-text-sm)));
		color: var(--dyt-text-muted);
		margin-bottom: var(--dyt-space-5);
	}

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

	/* ----------------------------------------------------------------- Stats */
	/* A bento grid: cards sit on a fixed column count so a wide card can take
	   two of them, which is what keeps the rows from looking uniform. */
	.dyt-stats__grid {
		display: grid;
		gap: var(--dyt-space-4);
		grid-template-columns: 1fr;
	}

	@media (min-width: 40rem) {
		.dyt-stats__grid--2,
		.dyt-stats__grid--3,
		.dyt-stats__grid--4 {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (min-width: 62rem) {
		.dyt-stats__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		.dyt-stats__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
		.dyt-stats__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

		.dyt-stat--wide {
			grid-column: span 2;
		}
	}

	.dyt-stat {
		display: flex;
		flex-direction: column;
		gap: var(--dyt-space-2);
		padding: var(--dyt-space-6);
		background: var(--dyt-bg-panel);
		border: 1px solid var(--dyt-border);
		border-radius: var(--dyt-radius-lg);
		transition: border-color var(--dyt-duration) var(--dyt-ease);
	}

	.dyt-stat:hover {
		border-color: var(--dyt-border-strong);
	}

	.dyt-stat__value {
		font-size: var(--dyt-stat-size, var(--dyt-text-section));
		font-weight: 700;
		line-height: 1.05;
		letter-spacing: var(--dyt-tracking-tight);
		color: var(--dyt-text);
	}

	/* Each card can carry its own label colour, falling back to the brand. */
	.dyt-stat__label {
		font-size: var(--dyt-text-base);
		font-weight: 500;
		color: var(--dyt-stat-color, var(--dyt-brand));
	}

	.dyt-stat__text {
		margin-top: auto;
		padding-top: var(--dyt-space-4);
		font-size: var(--dyt-body-size, var(--dyt-text-base));
		color: var(--dyt-text-muted);
		line-height: var(--dyt-leading-normal);
	}

	/* -------------------------------------------------------- Staggered columns */
	.dyt-cols {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--dyt-space-6);
	}

	.dyt-cols__item {
		position: relative;
		min-width: 0;
	}

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

	.dyt-cols__title {
		font-size: var(--dyt-text-xl);
		font-weight: 600;
		letter-spacing: var(--dyt-tracking-snug);
		color: var(--dyt-text);
	}

	.dyt-cols__text {
		font-size: var(--dyt-body-size, var(--dyt-text-base));
		line-height: var(--dyt-leading-snug);
		color: var(--dyt-col-color, var(--dyt-brand));
	}

	/* The detail is visible by default. It only collapses where hovering
	   actually exists, so on a touch screen the copy is simply there rather
	   than locked behind an interaction that cannot happen. */
	.dyt-cols__detail-inner {
		display: flex;
		flex-direction: column;
		gap: var(--dyt-space-2);
		padding-top: var(--dyt-space-4);
	}

	.dyt-cols__mark {
		font-size: var(--dyt-text-2xl);
		line-height: 0.6;
		color: var(--dyt-text-muted);
	}

	.dyt-cols__detail p {
		margin: 0;
		font-size: var(--dyt-body-size, var(--dyt-text-base));
		line-height: var(--dyt-leading-normal);
		color: var(--dyt-text-muted);
	}

	@media (hover: hover) {
		.dyt-cols__detail {
			display: grid;
			grid-template-rows: 0fr;
			opacity: 0;
			transition:
				grid-template-rows var(--dyt-duration-slow) var(--dyt-ease),
				opacity var(--dyt-duration-slow) var(--dyt-ease);
		}

		.dyt-cols__detail-inner {
			overflow: hidden;
			translate: 0 -6px;
			transition: translate var(--dyt-duration) var(--dyt-ease);
		}

		.dyt-cols__item--has-detail:hover .dyt-cols__detail,
		.dyt-cols__item--has-detail:focus-visible .dyt-cols__detail {
			grid-template-rows: 1fr;
			opacity: 1;
		}

		.dyt-cols__item--has-detail:hover .dyt-cols__detail-inner,
		.dyt-cols__item--has-detail:focus-visible .dyt-cols__detail-inner {
			translate: 0 0;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.dyt-cols__inner,
		.dyt-cols__detail,
		.dyt-cols__detail-inner {
			transition: none;
		}
	}

	@media (min-width: 62rem) {
		.dyt-cols {
			grid-template-columns: repeat(var(--dyt-col-count, 4), minmax(0, 1fr));
			gap: 0;
		}

		/* The first column carries the most top padding so it sits lowest,
		   and each following one sits a step higher. */
		.dyt-cols--stagger .dyt-cols__inner {
			padding-bottom: calc(var(--dyt-col-index, 0) * var(--dyt-col-step, 70px));
			transition: padding-bottom var(--dyt-duration-slow) var(--dyt-ease);
		}

		/* Hover drops the lift, so a raised column slides down onto the
		   baseline. Because the frame anchors content to its bottom edge, a
		   longer detail grows upward and can never spill below the column. */
		.dyt-cols--stagger .dyt-cols__item--has-detail:hover .dyt-cols__inner,
		.dyt-cols--stagger .dyt-cols__item--has-detail:focus-visible .dyt-cols__inner {
			padding-bottom: 0;
		}

		/* A fixed frame, so the row keeps its rhythm and no column stretches
		   the section. Overflow stays visible on purpose: copy longer than the
		   frame spills past it rather than being cut off. */
		.dyt-cols__item {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			padding-inline: clamp(var(--dyt-space-4), 2vw, var(--dyt-space-6));
			height: var(--dyt-col-height, 400px);
		}

		/* The line sits between columns, never before the first one. */
		.dyt-cols--dividers .dyt-cols__item + .dyt-cols__item {
			border-left: 1px solid var(--dyt-border);
		}
	}

	/* Closing callout */
	.dyt-cols__callout {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--dyt-space-4);
		margin-top: clamp(var(--dyt-space-7), 5vw, var(--dyt-space-10));
		padding: var(--dyt-cols-callout-pad, clamp(var(--dyt-space-5), 3vw, var(--dyt-space-7)));
		text-align: center;
		border-radius: var(--dyt-cols-callout-radius, var(--dyt-radius-lg));
		/* Two backgrounds, one clipped to the padding box and one to the border
		   box: that is what draws a gradient edge without a wrapper element. */
		background:
			linear-gradient(
				var(--dyt-cols-callout-bg, var(--dyt-bg-panel)),
				var(--dyt-cols-callout-bg, var(--dyt-bg-panel))
			) padding-box,
			var(--dyt-gradient) border-box;
		border: 1px solid transparent;
		color: var(--dyt-cols-callout-color, inherit);
	}

	/* A chosen border colour replaces the gradient trick outright — both would
	   be painting the same pixels. */
	.dyt-cols__callout--bordered {
		background: var(--dyt-cols-callout-bg, var(--dyt-bg-panel));
		border-color: var(--dyt-cols-callout-border);
	}

	.dyt-cols__callout--left {
		align-items: flex-start;
		text-align: left;
	}

	.dyt-cols__callout-text {
		font-size: var(--dyt-cols-callout-size, var(--dyt-body-size, var(--dyt-text-lg)));
		line-height: var(--dyt-leading-normal);
		color: var(--dyt-cols-callout-color, var(--dyt-text));
		max-width: 68ch;
	}

	.dyt-cols__callout-text em {
		font-style: normal;
		color: var(--dyt-cols-callout-accent, var(--dyt-brand));
	}

	/* ------------------------------------------------------------ Question grid */
	.dyt-qa {
		display: grid;
		gap: var(--dyt-space-4);
		grid-template-columns: 1fr;
	}

	@media (min-width: 48rem) {
		.dyt-qa--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		.dyt-qa--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}

	@media (min-width: 62rem) {
		.dyt-qa--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	}

	/* Every card is the same height, and its content sits at the bottom. The
	   room left above is what the answer expands into, so revealing one does
	   not push its neighbours around. */
	.dyt-qa__card {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		min-height: var(--dyt-qa-height, 13rem);
		border-radius: var(--dyt-radius-lg);
		background: var(--dyt-bg-panel);
		border: 1px solid var(--dyt-border);
		overflow: hidden;
		transition: border-color var(--dyt-duration) var(--dyt-ease);
	}

	.dyt-qa__card:hover {
		border-color: var(--dyt-border-strong);
	}

	/* The open card is outlined in the brand gradient, which is how the eye
	   finds the answer among the questions. */
	.dyt-qa__card.is-open {
		border-color: transparent;
		background:
			linear-gradient(var(--dyt-bg-panel), var(--dyt-bg-panel)) padding-box,
			var(--dyt-gradient) border-box;
		border: 1px solid transparent;
	}

	.dyt-qa__trigger {
		display: flex;
		flex-direction: column;
		gap: var(--dyt-space-3);
		width: 100%;
		padding: var(--dyt-space-6);
		text-align: left;
		color: inherit;
		font: inherit;
		cursor: pointer;
	}

	.dyt-qa__trigger--static {
		cursor: default;
	}

	.dyt-qa__mark {
		font-size: var(--dyt-text-2xl);
		line-height: 0.6;
		color: var(--dyt-text-muted);
	}

	.dyt-qa__question {
		font-size: var(--dyt-text-base);
		font-weight: 500;
		line-height: var(--dyt-leading-snug);
		color: var(--dyt-text);
	}

	/* Collapsed by animating grid-template-rows between 0fr and 1fr, which
	   gives a real height transition without hard-coding a max-height. */
	.dyt-qa__answer {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows var(--dyt-duration) var(--dyt-ease);
	}

	.dyt-qa__answer-inner {
		overflow: hidden;
	}

	.dyt-qa__answer p {
		margin: 0;
		padding: 0 var(--dyt-space-6) var(--dyt-space-6);
		font-size: var(--dyt-body-size, var(--dyt-text-base));
		color: var(--dyt-text-secondary);
		line-height: var(--dyt-leading-normal);
	}

	/* Hover only where hovering exists. On touch the card still opens on tap,
	   handled by the is-open class, so the answer is never unreachable. */
	@media (hover: hover) {
		.dyt-qa__card:hover .dyt-qa__answer {
			grid-template-rows: 1fr;
		}

		.dyt-qa__card:hover {
			border-color: transparent;
			background:
				linear-gradient(var(--dyt-bg-panel), var(--dyt-bg-panel)) padding-box,
				var(--dyt-gradient) border-box;
			border: 1px solid transparent;
		}
	}

	/* Keyboard users get the same reveal by focusing the card's button. */
	.dyt-qa__card:focus-within .dyt-qa__answer,
	.dyt-qa__card.is-open .dyt-qa__answer {
		grid-template-rows: 1fr;
	}

	.dyt-qa__card:focus-within {
		border-color: transparent;
		background:
			linear-gradient(var(--dyt-bg-panel), var(--dyt-bg-panel)) padding-box,
			var(--dyt-gradient) border-box;
		border: 1px solid transparent;
	}

	@media (prefers-reduced-motion: reduce) {
		.dyt-qa__answer {
			transition: none;
		}
	}

	/* A phone has no hover, and tapping every card in turn to read it is a
	   chore rather than an interaction. The answers are simply open, and the
	   card's min-height goes with them — it existed to hold room for an answer
	   that had not arrived yet. */
	@media (max-width: 47.99rem) {
		.dyt-qa__answer {
			grid-template-rows: 1fr;
		}

		.dyt-qa__card {
			min-height: 0;
		}

		.dyt-qa__trigger {
			cursor: default;
		}
	}

	/* --------------------------------------------------- Alternating features */
	.dyt-feature {
		display: grid;
		gap: clamp(var(--dyt-space-6), 4vw, var(--dyt-space-9));
		align-items: center;
		grid-template-columns: 1fr;
	}

	.dyt-feature + .dyt-feature {
		margin-top: clamp(var(--dyt-space-8), 5vw, var(--dyt-space-11));
	}

	@media (min-width: 62rem) {
		.dyt-feature {
			grid-template-columns: 1fr 1fr;
		}

		.dyt-feature:nth-child(even) .dyt-feature__media {
			order: -1;
		}
	}

	.dyt-feature__title {
		font-size: var(--dyt-text-2xl);
		margin-bottom: var(--dyt-space-4);
	}

	.dyt-feature__text {
		color: var(--dyt-text-secondary);
		font-size: var(--dyt-body-size, var(--dyt-text-lg));
		margin-bottom: var(--dyt-space-5);
	}

	.dyt-feature__media {
		border-radius: var(--dyt-radius-lg);
		overflow: hidden;
		border: 1px solid var(--dyt-border);
	}

	/* ---------------------------------------------------------- Process steps */
	/* A numbered run of rows: the step's number on the left, its mark and name
	   in the middle, what it means on the right. A rule between rows is the only
	   furniture, so the eye runs straight down the numbers. */
	.dyt-proc-wrap .dyt-section-header {
		max-width: var(--dyt-proc-intro-max, 46rem);
	}

	.dyt-proc {
		--dyt-proc-rule: var(--dyt-proc-line-color, var(--dyt-border));

		display: flex;
		flex-direction: column;
		margin-top: var(--dyt-proc-top, var(--dyt-space-8));
		border-top: var(--dyt-proc-line-w, 1px) solid var(--dyt-proc-rule);
	}

	.dyt-proc__step {
		display: grid;
		grid-template-columns:
			var(--dyt-proc-col-num, 1fr)
			var(--dyt-proc-col-mid, 1.2fr)
			var(--dyt-proc-col-text, 1.2fr);
		align-items: var(--dyt-proc-align, center);
		gap: var(--dyt-proc-col-gap, var(--dyt-space-6));
		padding-block: var(--dyt-proc-pad, var(--dyt-space-8));
		border-bottom: var(--dyt-proc-line-w, 1px) solid var(--dyt-proc-rule);
	}

	.dyt-proc--no-number .dyt-proc__step {
		grid-template-columns:
			var(--dyt-proc-col-mid, 1.2fr)
			var(--dyt-proc-col-text, 1.2fr);
	}

	.dyt-proc__num {
		font-size: var(--dyt-proc-num-size, var(--dyt-text-lg));
		font-weight: var(--dyt-proc-num-weight, 400);
		color: var(--dyt-proc-num-color, var(--dyt-text-secondary));
		font-variant-numeric: tabular-nums;
		line-height: 1;
	}

	.dyt-proc__lead {
		display: flex;
		align-items: center;
		gap: var(--dyt-proc-lead-gap, var(--dyt-space-5));
		min-width: 0;
	}

	/* The ring is a gradient drawn as a background rather than a border, which
	   a border cannot do: the padding box is filled with the card's own colour,
	   so only the rim shows. */
	.dyt-proc__mark {
		flex: 0 0 auto;
		display: grid;
		place-items: center;
		width: var(--dyt-proc-mark, 80px);
		height: var(--dyt-proc-mark, 80px);
		padding: var(--dyt-proc-ring, 1px);
		border-radius: var(--dyt-proc-mark-radius, 50%);
		background: var(--dyt-proc-ring-bg, linear-gradient(135deg, var(--dyt-brand), var(--dyt-accent)));
	}

	.dyt-proc__mark-inner {
		display: grid;
		place-items: center;
		width: 100%;
		height: 100%;
		border-radius: inherit;
		background: var(--dyt-proc-mark-bg, var(--dyt-bg));
		color: var(--dyt-proc-icon-color, var(--dyt-text));
	}

	.dyt-proc__mark svg,
	.dyt-proc__mark img {
		width: var(--dyt-proc-icon, 34px);
		height: var(--dyt-proc-icon, 34px);
		object-fit: contain;
	}

	.dyt-proc__title {
		margin: 0;
		font-size: var(--dyt-proc-title-size, var(--dyt-text-xl));
		font-weight: var(--dyt-proc-title-weight, 700);
		color: var(--dyt-proc-title-color, inherit);
		line-height: 1.25;
	}

	.dyt-proc__text {
		margin: 0;
		font-size: var(--dyt-proc-text-size, var(--dyt-body-size, inherit));
		color: var(--dyt-proc-text-color, var(--dyt-text-secondary));
		line-height: var(--dyt-proc-text-lh, 1.6);
	}

	/* Below the desktop layout the three columns become two: the number keeps
	   the left edge, the mark and name sit beside it, and the text drops under
	   them rather than being squeezed into a third of the width. */
	@media (max-width: 64rem) {
		.dyt-proc__step {
			grid-template-columns: auto minmax(0, 1fr);
			align-items: start;
			gap: var(--dyt-proc-col-gap-m, var(--dyt-space-4));
			padding-block: var(--dyt-proc-pad-m, var(--dyt-proc-pad, var(--dyt-space-7)));
		}

		.dyt-proc--no-number .dyt-proc__step {
			grid-template-columns: minmax(0, 1fr);
		}

		.dyt-proc__num {
			grid-column: 1;
			grid-row: 1;
			padding-top: 0.35em;
			font-size: var(--dyt-proc-num-size-m, var(--dyt-proc-num-size, var(--dyt-text-base)));
		}

		.dyt-proc__lead {
			grid-column: 2;
			grid-row: 1;
		}

		.dyt-proc--no-number .dyt-proc__lead {
			grid-column: 1;
		}

		.dyt-proc__text {
			grid-column: 2;
			grid-row: 2;
			margin-top: var(--dyt-space-3);
		}

		.dyt-proc--no-number .dyt-proc__text {
			grid-column: 1;
		}
	}

	@media (max-width: 47.99rem) {
		.dyt-proc__mark {
			width: var(--dyt-proc-mark-m, var(--dyt-proc-mark, 56px));
			height: var(--dyt-proc-mark-m, var(--dyt-proc-mark, 56px));
		}

		.dyt-proc__mark svg,
		.dyt-proc__mark img {
			width: var(--dyt-proc-icon-m, var(--dyt-proc-icon, 24px));
			height: var(--dyt-proc-icon-m, var(--dyt-proc-icon, 24px));
		}

		.dyt-proc__title {
			font-size: var(--dyt-proc-title-size-m, var(--dyt-proc-title-size, var(--dyt-text-lg)));
		}

		.dyt-proc__text {
			font-size: var(--dyt-proc-text-size-m, var(--dyt-proc-text-size, var(--dyt-text-sm)));
		}
	}

	/* --------------------------------------------------------------- Pricing */
	/* The term switch. A row of buttons inside one pill, where the selected one
	   is the only thing with a background — so the group reads as one control
	   rather than three. */
	.dyt-pricing__toggle {
		display: flex;
		justify-content: center;
		margin-bottom: var(--dyt-pri-tog-gap, var(--dyt-space-8));
	}

	.dyt-pri-switch {
		display: flex;
		align-items: center;
		gap: var(--dyt-space-1);
		padding: var(--dyt-pri-tog-pad, 6px);
		border-radius: var(--dyt-pri-tog-radius, var(--dyt-radius-pill));
		background: var(--dyt-pri-tog-bg, var(--dyt-bg-elevated));
		border: 1px solid var(--dyt-pri-tog-border, var(--dyt-border));
		max-width: 100%;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.dyt-pri-switch::-webkit-scrollbar {
		display: none;
	}

	.dyt-pri-switch__option {
		display: inline-flex;
		align-items: center;
		gap: var(--dyt-space-2);
		padding: 0.7em 1.4em;
		border: 0;
		border-radius: inherit;
		background: transparent;
		color: var(--dyt-pri-tog-color, var(--dyt-text-secondary));
		font: inherit;
		font-size: var(--dyt-pri-tog-size, var(--dyt-text-base));
		font-weight: 500;
		white-space: nowrap;
		cursor: pointer;
		transition: background var(--dyt-duration) var(--dyt-ease-out),
			color var(--dyt-duration) var(--dyt-ease-out);
	}

	.dyt-pri-switch__option:hover {
		background: var(--dyt-pri-tog-hover-bg, color-mix(in srgb, currentColor 10%, transparent));
		color: var(--dyt-pri-tog-hover-color, var(--dyt-text));
	}

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

	.dyt-pri-switch__option[aria-pressed="true"],
	.dyt-pri-switch__option[aria-pressed="true"]:hover {
		background: var(--dyt-pri-tog-active-bg, var(--dyt-text));
		color: var(--dyt-pri-tog-active-color, var(--dyt-bg));
	}

	.dyt-pri-switch__note {
		color: var(--dyt-pri-tog-note-color, var(--dyt-brand-soft));
		font-weight: 600;
	}

	/* The selected button reverses, so its note has to come with it or it
	   disappears into the fill. */
	.dyt-pri-switch__option[aria-pressed="true"] .dyt-pri-switch__note {
		color: inherit;
		opacity: 0.75;
	}

	/* ------------------------------------------------------------ The cards */
	.dyt-pricing__grid {
		display: grid;
		gap: var(--dyt-pri-gap, var(--dyt-space-4));
		grid-template-columns: repeat(var(--dyt-pri-cols-d, 4), minmax(0, 1fr));
		align-items: stretch;
	}

	.dyt-plan {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--dyt-space-4);
		padding: var(--dyt-pri-pad, var(--dyt-space-7));
		border-radius: var(--dyt-pri-radius, var(--dyt-radius-lg));
		background: var(--dyt-pri-card-bg, var(--dyt-bg-elevated));
		border: var(--dyt-pri-border-w, 1px) solid var(--dyt-pri-card-border, var(--dyt-border));
	}

	/* The featured card carries its label inside the top edge, so it needs the
	   room for it whether or not its neighbours have one. */
	/* The featured card carries a fill of its own, so everything on it takes its
	   colour from the card rather than from the page: leaving the page's text
	   colour in place is what put dark type on a mid-blue panel. */
	.dyt-plan--featured {
		background: var(--dyt-pri-hl-bg, var(--dyt-bg-elevated));
		border-color: var(--dyt-pri-hl-border, var(--dyt-brand));
		padding-top: calc(var(--dyt-pri-pad, var(--dyt-space-7)) + var(--dyt-space-4));
		color: var(--dyt-pri-hl-text, #fff);
	}

	.dyt-plan--featured .dyt-plan__name,
	.dyt-plan--featured .dyt-plan__amount,
	.dyt-plan--featured .dyt-plan__feature,
	.dyt-plan--featured .dyt-plan__badge {
		color: inherit;
	}

	.dyt-plan--featured .dyt-plan__period,
	.dyt-plan--featured .dyt-plan__old,
	.dyt-plan--featured .dyt-plan__summary {
		color: inherit;
		opacity: 0.72;
	}

	/* A border colour mixed for the page disappears against the card. */
	.dyt-plan--featured .dyt-plan__rule::before,
	.dyt-plan--featured .dyt-plan__rule::after {
		background: currentColor;
		opacity: 0.28;
	}

	.dyt-plan--featured .dyt-plan__rule {
		color: inherit;
	}

	.dyt-plan--featured .dyt-plan__chip {
		background: var(--dyt-pri-hl-chip-bg, rgba(255, 255, 255, 0.14));
		border-color: rgba(255, 255, 255, 0.24);
	}

	.dyt-plan--featured .dyt-plan__hours {
		color: inherit;
		opacity: 0.78;
	}

	/* This pill is white whatever the scheme is, so its ink is a fixed dark one
	   to match. Reaching for the page background here made it white on white
	   the moment the site was in light mode. */
	.dyt-plan--featured .dyt-plan__rate {
		background: var(--dyt-pri-hl-rate-bg, #ffffff);
		color: var(--dyt-pri-hl-rate-color, #0f1729);
	}

	.dyt-plan--featured .dyt-plan__check {
		background: rgba(255, 255, 255, 0.18);
		color: inherit;
	}

	.dyt-plan__badge {
		position: absolute;
		top: var(--dyt-space-3);
		left: 50%;
		translate: -50% 0;
		padding: 0.25em 0.9em;
		border-radius: var(--dyt-radius-pill);
		background: var(--dyt-pri-badge-bg, transparent);
		color: var(--dyt-pri-badge-color, var(--dyt-text));
		font-size: var(--dyt-pri-badge-size, var(--dyt-text-xs));
		font-weight: 600;
		letter-spacing: var(--dyt-tracking-wide);
		text-transform: uppercase;
		white-space: nowrap;
	}

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

	.dyt-plan__name {
		margin: 0;
		font-size: var(--dyt-pri-name-size, var(--dyt-text-2xl));
		font-weight: 600;
		color: var(--dyt-pri-name-color, inherit);
		line-height: 1.1;
	}

	/* Hours and rate share one pill, with the rate picked out: the hours are
	   what you buy, the rate is what makes the comparison. */
	.dyt-plan__chip {
		display: inline-flex;
		align-items: center;
		gap: var(--dyt-space-2);
		padding: 4px 4px 4px 12px;
		border-radius: var(--dyt-pri-chip-radius, var(--dyt-radius-pill));
		background: var(--dyt-pri-chip-bg, var(--dyt-bg));
		border: 1px solid var(--dyt-pri-chip-border, var(--dyt-border));
		font-size: var(--dyt-pri-chip-size, var(--dyt-text-sm));
		white-space: nowrap;
	}

	.dyt-plan__hours {
		color: var(--dyt-pri-chip-color, var(--dyt-text-secondary));
	}

	.dyt-plan__rate {
		padding: 2px 10px;
		border-radius: var(--dyt-radius-pill);
		background: var(--dyt-pri-rate-bg, var(--dyt-bg-elevated));
		color: var(--dyt-pri-rate-color, var(--dyt-text));
		font-weight: 600;
	}

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

	.dyt-plan__was {
		display: flex;
		align-items: center;
		gap: var(--dyt-space-3);
		margin: 0;
		min-height: 1.6em;
	}

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

	.dyt-plan__off {
		padding: 0.2em 0.6em;
		border-radius: var(--dyt-radius-sm);
		background: var(--dyt-pri-off-bg, var(--dyt-brand));
		color: var(--dyt-pri-off-color, #fff);
		font-size: var(--dyt-pri-off-size, var(--dyt-text-xs));
		font-weight: 600;
	}

	.dyt-plan__old {
		color: var(--dyt-pri-was-color, var(--dyt-text-secondary));
		font-size: var(--dyt-pri-was-size, var(--dyt-text-lg));
	}

	.dyt-plan__price {
		display: flex;
		align-items: baseline;
		gap: var(--dyt-space-2);
		margin: 0;
		flex-wrap: wrap;
	}

	.dyt-plan__amount {
		font-size: var(--dyt-pri-price-size, var(--dyt-text-4xl));
		font-weight: 700;
		color: var(--dyt-pri-price-color, inherit);
		line-height: 1.05;
		letter-spacing: -0.02em;
	}

	.dyt-plan__period {
		font-size: var(--dyt-pri-period-size, var(--dyt-text-base));
		color: var(--dyt-pri-period-color, var(--dyt-text-secondary));
	}

	/* A rule with a mark sitting on it: two lines drawn either side of the
	   glyph, so nothing shows through behind it. */
	.dyt-plan__rule {
		display: flex;
		align-items: center;
		gap: var(--dyt-space-3);
		margin: var(--dyt-space-2) 0;
		color: var(--dyt-pri-rule-mark-color, var(--dyt-text-secondary));
		font-size: var(--dyt-text-sm);
		line-height: 1;
	}

	.dyt-plan__rule::before,
	.dyt-plan__rule::after {
		content: "";
		flex: 1 1 auto;
		height: 1px;
		background: var(--dyt-pri-rule-color, var(--dyt-border));
	}

	.dyt-plan__features {
		display: flex;
		flex-direction: column;
		gap: var(--dyt-pri-feat-gap, var(--dyt-space-4));
		margin: 0;
		padding: 0;
		list-style: none;
		flex: 1 1 auto;
	}

	.dyt-plan__feature {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--dyt-space-3);
		align-items: start;
		font-size: var(--dyt-pri-feat-size, var(--dyt-text-sm));
		color: var(--dyt-pri-feat-color, var(--dyt-text));
		line-height: 1.5;
	}

	.dyt-plan__check {
		display: grid;
		place-items: center;
		width: var(--dyt-pri-check-size, 20px);
		height: var(--dyt-pri-check-size, 20px);
		border-radius: 50%;
		background: var(--dyt-pri-check-bg, var(--dyt-bg));
		color: var(--dyt-pri-check-color, var(--dyt-text));
		margin-top: 0.1em;
	}

	.dyt-plan__check svg {
		width: 62%;
		height: 62%;
	}

	.dyt-plan__feature--excluded {
		opacity: 0.55;
	}

	.dyt-plan__cta {
		margin-top: var(--dyt-space-5);
	}

	/* The card's own button: label on the left, a round arrow on the right. It
	   is written here rather than borrowed from .dyt-btn because the arrow has
	   to sit at the far edge whatever the label's length. */
	.dyt-plan__btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--dyt-space-4);
		width: 100%;
		padding: var(--dyt-pri-btn-pad, 14px) var(--dyt-pri-btn-pad, 14px) var(--dyt-pri-btn-pad, 14px) 22px;
		border-radius: var(--dyt-pri-btn-radius, var(--dyt-radius-pill));
		background: var(--dyt-pri-btn-bg, transparent);
		color: var(--dyt-pri-btn-color, var(--dyt-text));
		border: 1px solid var(--dyt-pri-btn-border, var(--dyt-border));
		font-weight: 600;
		text-decoration: none;
		transition: background var(--dyt-duration) var(--dyt-ease-out),
			border-color var(--dyt-duration) var(--dyt-ease-out),
			translate var(--dyt-duration) var(--dyt-ease-out);
	}

	.dyt-plan__btn:hover {
		border-color: var(--dyt-pri-btn-color, var(--dyt-text));
		translate: 0 -2px;
	}

	.dyt-plan--featured .dyt-plan__btn {
		background: var(--dyt-gradient);
		border-color: transparent;
		color: #fff;
	}

	.dyt-plan__btn-arrow {
		flex: 0 0 auto;
		display: grid;
		place-items: center;
		width: 2em;
		height: 2em;
		border-radius: 50%;
		background: currentColor;
		transition: translate var(--dyt-duration) var(--dyt-ease-out);
	}

	.dyt-plan__btn-arrow svg {
		width: 60%;
		height: 60%;
		color: var(--dyt-pri-btn-bg, var(--dyt-bg));
	}

	.dyt-plan--featured .dyt-plan__btn-arrow svg {
		color: var(--dyt-brand);
	}

	.dyt-plan__btn:hover .dyt-plan__btn-arrow {
		translate: 3px 0;
	}

	.dyt-pricing__footnote {
		margin-top: var(--dyt-space-6);
		text-align: center;
		color: var(--dyt-text-secondary);
		font-size: var(--dyt-text-sm);
	}

	@media (max-width: 64rem) {
		.dyt-pricing__grid {
			grid-template-columns: repeat(var(--dyt-pri-cols-t, 2), minmax(0, 1fr));
		}
	}

	@media (max-width: 47.99rem) {
		.dyt-pricing__grid {
			grid-template-columns: repeat(var(--dyt-pri-cols-m, 1), minmax(0, 1fr));
		}

		.dyt-plan {
			padding: var(--dyt-pri-pad-m, var(--dyt-pri-pad, var(--dyt-space-6)));
		}

		.dyt-plan--featured {
			padding-top: calc(var(--dyt-pri-pad-m, var(--dyt-pri-pad, var(--dyt-space-6))) + var(--dyt-space-4));
		}

		.dyt-plan__name {
			font-size: var(--dyt-pri-name-size-m, var(--dyt-pri-name-size, var(--dyt-text-xl)));
		}

		.dyt-plan__amount {
			font-size: var(--dyt-pri-price-size-m, var(--dyt-pri-price-size, var(--dyt-text-3xl)));
		}

		.dyt-pri-switch {
			width: 100%;
			justify-content: flex-start;
		}

		.dyt-pri-switch__option {
			font-size: var(--dyt-pri-tog-size-m, var(--dyt-pri-tog-size, var(--dyt-text-sm)));
			padding: 0.7em 1em;
		}
	}

	/* --------------------------------------------- Included in every plan */
	/* One panel under the cards for the things every plan carries. The items
	   run down the columns rather than across them, so a two-line entry does
	   not leave a hole beside its neighbour. */
	.dyt-pinc {
		margin-top: var(--dyt-pri-inc-top, var(--dyt-space-8));
		padding: var(--dyt-pri-inc-pad, var(--dyt-space-8));
		border-radius: var(--dyt-pri-inc-radius, var(--dyt-radius-lg));
		/* The panel surface rather than the elevated one: in the light scheme
		   elevated is a shade off the page background and the box read as
		   nothing at all. Panel differs from the page in both schemes. */
		background: var(--dyt-pri-inc-bg, var(--dyt-bg-panel));
		border: 1px solid var(--dyt-pri-inc-border, transparent);
	}

	.dyt-pinc__heading {
		margin: 0 0 var(--dyt-space-6);
		font-size: var(--dyt-pri-inc-heading-size, var(--dyt-text-xl));
		font-weight: 600;
		color: var(--dyt-pri-inc-heading-color, inherit);
	}

	.dyt-pinc__list {
		display: grid;
		grid-template-columns: repeat(var(--dyt-pri-inc-cols, 2), minmax(0, 1fr));
		gap: var(--dyt-pri-inc-row-gap, var(--dyt-space-6)) var(--dyt-pri-inc-col-gap, var(--dyt-space-7));
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.dyt-pinc__item {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--dyt-space-4);
		align-items: start;
	}

	.dyt-pinc__icon {
		display: grid;
		place-items: center;
		width: var(--dyt-pri-inc-icon, 22px);
		height: var(--dyt-pri-inc-icon, 22px);
		border-radius: 50%;
		background: var(--dyt-pri-inc-icon-bg, color-mix(in srgb, currentColor 14%, transparent));
		color: var(--dyt-pri-inc-icon-color, inherit);
		margin-top: 0.15em;
	}

	.dyt-pinc__icon svg {
		width: 62%;
		height: 62%;
	}

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

	.dyt-pinc__title {
		font-size: var(--dyt-pri-inc-title-size, var(--dyt-text-base));
		font-weight: 600;
		color: var(--dyt-pri-inc-title-color, inherit);
		line-height: 1.3;
	}

	.dyt-pinc__text {
		font-size: var(--dyt-pri-inc-text-size, var(--dyt-text-sm));
		color: var(--dyt-pri-inc-text-color, var(--dyt-text-secondary));
		line-height: 1.5;
	}

	/* The inset panel at the foot of the box. */
	.dyt-pinc__note {
		margin-top: var(--dyt-space-7);
		padding: var(--dyt-pri-inc-note-pad, var(--dyt-space-6));
		border-radius: var(--dyt-pri-inc-note-radius, var(--dyt-radius-md));
		/* Mixed from the text colour, so the inset always steps away from the
		   box it sits in: lighter on a dark panel, darker on a light one. A
		   fixed surface token would go the wrong way in one of the schemes. */
		background: var(--dyt-pri-inc-note-bg, color-mix(in srgb, currentColor 8%, transparent));
	}

	.dyt-pinc__note-heading {
		margin: 0 0 var(--dyt-space-3);
		font-size: var(--dyt-pri-inc-note-title-size, var(--dyt-text-base));
		font-weight: 600;
		color: var(--dyt-pri-inc-note-title-color, inherit);
	}

	.dyt-pinc__note-cols {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
		gap: var(--dyt-space-5) var(--dyt-pri-inc-col-gap, var(--dyt-space-7));
	}

	.dyt-pinc__note-text {
		margin: 0;
		font-size: var(--dyt-pri-inc-note-text-size, var(--dyt-text-sm));
		color: var(--dyt-pri-inc-note-text-color, var(--dyt-text-secondary));
		line-height: 1.55;
	}

	@media (max-width: 47.99rem) {
		.dyt-pinc__list {
			grid-template-columns: repeat(var(--dyt-pri-inc-cols-m, 1), minmax(0, 1fr));
		}

		.dyt-pinc {
			padding: var(--dyt-pri-inc-pad-m, var(--dyt-space-6));
		}
	}

	/* -------------------------------------------------------------- Blog grid */
	/* A page of cards is one slide, so an arrow turns the whole grid at once
	   and the rows never end up half scrolled. */
	.dyt-blog__track {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 100%;
	}

	.dyt-blog .dyt-slider__track {
		/* The shared track bleeds into the page gutter to let a card peek in;
		   a full page has nothing to peek, so the bleed only mis-aligns it. */
		margin-inline: 0;
		padding-inline: 0;
		padding-bottom: 0;
		gap: 0;
	}

	.dyt-blog__page {
		display: grid;
		grid-template-columns: repeat(var(--dyt-blog-cols, 2), minmax(0, 1fr));
		gap: var(--dyt-blog-gap, var(--dyt-space-5));
		align-content: start;
	}

	.dyt-blog__card {
		display: grid;
		grid-template-columns: var(--dyt-blog-media-w, 46%) minmax(0, 1fr);
		min-height: var(--dyt-blog-min-h, 240px);
		border-radius: var(--dyt-blog-radius, var(--dyt-radius-lg));
		background: var(--dyt-blog-card-bg, var(--dyt-bg-elevated));
		border: 1px solid var(--dyt-blog-card-border, transparent);
		overflow: hidden;
	}

	.dyt-blog--media-right .dyt-blog__card {
		grid-template-columns: minmax(0, 1fr) var(--dyt-blog-media-w, 46%);
	}

	.dyt-blog--media-right .dyt-blog__media {
		order: 2;
	}

	/* The picture is flush to the card's edge, so it fills its column rather
	   than sitting in the padding. */
	.dyt-blog__media {
		display: block;
		position: relative;
		overflow: hidden;
	}

	.dyt-blog__media img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* A card with no picture gives its column back to the text. */
	.dyt-blog__card:not(:has(.dyt-blog__media)) {
		grid-template-columns: minmax(0, 1fr);
	}

	.dyt-blog__body {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: var(--dyt-space-5);
		padding: var(--dyt-blog-pad, var(--dyt-space-6));
		min-width: 0;
	}

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

	.dyt-blog__meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--dyt-space-2);
		margin: 0;
		font-size: var(--dyt-blog-meta-size, var(--dyt-text-xs));
		font-weight: 500;
		letter-spacing: var(--dyt-tracking-wide);
		text-transform: uppercase;
		color: var(--dyt-blog-meta-color, var(--dyt-text-muted));
	}

	.dyt-blog__dot {
		opacity: 0.6;
	}

	.dyt-blog__title {
		margin: 0;
		font-size: var(--dyt-blog-title-size, var(--dyt-text-lg));
		font-weight: 600;
		line-height: 1.3;
		color: var(--dyt-blog-title-color, inherit);

		/* Cut off rather than pushed about: cards in a row stay the same height
		   whatever the headline writer did. */
		display: -webkit-box;
		-webkit-line-clamp: var(--dyt-blog-title-lines, 2);
		line-clamp: var(--dyt-blog-title-lines, 2);
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

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

	.dyt-blog__title a:hover {
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.dyt-blog__date {
		margin: 0;
		font-size: var(--dyt-blog-date-size, var(--dyt-text-sm));
		color: var(--dyt-blog-date-color, var(--dyt-text-muted));
	}

	.dyt-blog__foot {
		display: flex;
		align-items: center;
		gap: var(--dyt-space-4);
		margin-top: var(--dyt-space-8);
	}

	.dyt-blog--foot-center .dyt-blog__foot {
		justify-content: center;
	}

	.dyt-blog--foot-split .dyt-blog__foot {
		justify-content: space-between;
	}

	.dyt-blog--foot-arrows .dyt-blog__foot {
		justify-content: flex-end;
	}

	.dyt-blog__foot .dyt-slider__controls {
		margin-top: 0;
	}

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

	@media (max-width: 47.99rem) {
		.dyt-blog__page {
			grid-template-columns: repeat(var(--dyt-blog-cols-m, 1), minmax(0, 1fr));
		}

		/* Side by side leaves neither the picture nor the headline enough room
		   on a phone, so the picture goes on top. */
		.dyt-blog--stack-m .dyt-blog__card {
			grid-template-columns: minmax(0, 1fr);
			min-height: 0;
		}

		.dyt-blog--stack-m .dyt-blog__media {
			height: var(--dyt-blog-media-h-m, 180px);
		}

		.dyt-blog--stack-m .dyt-blog__media,
		.dyt-blog--media-right.dyt-blog--stack-m .dyt-blog__media {
			order: 0;
		}

		.dyt-blog__body {
			padding: var(--dyt-blog-pad-m, var(--dyt-blog-pad, var(--dyt-space-5)));
		}

		.dyt-blog__title {
			font-size: var(--dyt-blog-title-size-m, var(--dyt-blog-title-size, var(--dyt-text-base)));
		}

		/* Button and arrows sit in one row on a wide screen. A phone has no
		   room for that, so every arrangement stacks and centres — only the
		   split one did before, which left the centred one cramped. */
		.dyt-blog__foot,
		.dyt-blog--foot-center .dyt-blog__foot,
		.dyt-blog--foot-split .dyt-blog__foot,
		.dyt-blog--foot-arrows .dyt-blog__foot {
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: var(--dyt-space-5);
		}

		/* Beats the shared phone rule that pushes slider arrows down; inside
		   the foot the column gap already provides that space. */
		.dyt-blog .dyt-blog__foot .dyt-slider__controls {
			margin-top: 0;
		}
	}

	/* ----------------------------------------------------------------- FAQ */
	/* The ruled variant: a line above every question and nothing else. The
	   shared accordion draws boxes, which is right on a page that has none and
	   wrong on one that is already made of cards. */
	.dyt-faq {
		max-width: var(--dyt-faq-max-w, 900px);
		margin-inline: auto;
		margin-top: var(--dyt-faq-top, var(--dyt-space-8));
	}

	.dyt-faq--flat {
		gap: 0;
		border-top: var(--dyt-faq-line-w, 1px) solid var(--dyt-faq-line-color, var(--dyt-border));
	}

	.dyt-faq--flat .dyt-accordion__item {
		background: none;
		border: 0;
		border-bottom: var(--dyt-faq-line-w, 1px) solid var(--dyt-faq-line-color, var(--dyt-border));
		border-radius: 0;
	}

	.dyt-faq--card {
		gap: var(--dyt-faq-gap, var(--dyt-space-3));
	}

	.dyt-faq--card .dyt-accordion__item {
		background: var(--dyt-faq-card-bg, var(--dyt-bg-panel));
		border: 1px solid var(--dyt-faq-card-border, var(--dyt-border));
		border-radius: var(--dyt-faq-radius, var(--dyt-radius));
	}

	.dyt-faq .dyt-accordion__trigger {
		padding: var(--dyt-faq-row-pad, var(--dyt-space-6)) 0;
		font-size: var(--dyt-faq-q-size, var(--dyt-text-xl));
		font-weight: var(--dyt-faq-q-weight, 500);
		color: var(--dyt-faq-q-color, inherit);
		transition: color var(--dyt-duration) var(--dyt-ease-out);
	}

	.dyt-faq--card .dyt-accordion__trigger {
		padding-inline: var(--dyt-faq-row-pad, var(--dyt-space-6));
	}

	.dyt-faq .dyt-accordion__trigger:hover {
		color: var(--dyt-faq-q-hover, var(--dyt-brand-soft));
	}

	.dyt-faq .dyt-accordion__icon {
		width: var(--dyt-faq-icon-size, 20px);
		height: var(--dyt-faq-icon-size, 20px);
		color: var(--dyt-faq-icon-color, var(--dyt-text-secondary));
	}

	.dyt-faq .dyt-accordion__panel {
		padding: 0 0 var(--dyt-faq-row-pad, var(--dyt-space-6));
		font-size: var(--dyt-faq-a-size, var(--dyt-text-base));
		color: var(--dyt-faq-a-color, var(--dyt-text-secondary));
	}

	.dyt-faq--card .dyt-accordion__panel {
		padding-inline: var(--dyt-faq-row-pad, var(--dyt-space-6));
	}

	/* The chevron is one bar of the plus turned on its side, so the same two
	   pseudo-elements draw either icon. */
	.dyt-faq--icon-chevron .dyt-accordion__icon::before,
	.dyt-faq--icon-chevron .dyt-accordion__icon::after {
		width: 60%;
		height: 2px;
		left: 50%;
		transform-origin: 0 50%;
	}

	.dyt-faq--icon-chevron .dyt-accordion__icon::before {
		rotate: 45deg;
		translate: -100% -50%;
		transform-origin: 100% 50%;
	}

	.dyt-faq--icon-chevron .dyt-accordion__icon::after {
		rotate: -45deg;
		translate: 0 -50%;
		opacity: 1;
	}

	.dyt-faq--icon-chevron [aria-expanded="true"] .dyt-accordion__icon {
		rotate: 180deg;
	}

	.dyt-faq--icon-chevron [aria-expanded="true"] .dyt-accordion__icon::after {
		rotate: -45deg;
		opacity: 1;
	}

	@media (max-width: 47.99rem) {
		.dyt-faq .dyt-accordion__trigger {
			padding-block: var(--dyt-faq-row-pad-m, var(--dyt-faq-row-pad, var(--dyt-space-5)));
			font-size: var(--dyt-faq-q-size-m, var(--dyt-faq-q-size, var(--dyt-text-lg)));
		}

		.dyt-faq .dyt-accordion__panel {
			padding-bottom: var(--dyt-faq-row-pad-m, var(--dyt-faq-row-pad, var(--dyt-space-5)));
			font-size: var(--dyt-faq-a-size-m, var(--dyt-faq-a-size, var(--dyt-text-sm)));
		}
	}

	/* ----------------------------------------------------- Global presence */
	/* The picture is a fixed column rather than a share of the card: the cards
	   are small, and a percentage would leave the address nothing to wrap in. */
	.dyt-geo {
		display: grid;
		grid-template-columns: repeat(var(--dyt-geo-cols, 3), minmax(0, 1fr));
		gap: var(--dyt-geo-gap, var(--dyt-space-5));
		margin-top: var(--dyt-geo-top, var(--dyt-space-8));
	}

	.dyt-geo__card {
		display: grid;
		grid-template-columns: var(--dyt-geo-media-w, 120px) minmax(0, 1fr);
		border-radius: var(--dyt-geo-radius, var(--dyt-radius));
		background: var(--dyt-geo-card-bg, var(--dyt-bg-elevated));
		border: 1px solid var(--dyt-geo-card-border, transparent);
		overflow: hidden;
		transition: background var(--dyt-duration) var(--dyt-ease-out);
	}

	.dyt-geo__card:hover {
		background: var(--dyt-geo-card-hover, var(--dyt-bg-panel));
	}

	.dyt-geo--media-right .dyt-geo__card {
		grid-template-columns: minmax(0, 1fr) var(--dyt-geo-media-w, 120px);
	}

	.dyt-geo--media-right .dyt-geo__media {
		order: 2;
	}

	.dyt-geo__media {
		position: relative;
		display: block;
		overflow: hidden;
	}

	.dyt-geo__media img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* An office with no photograph gives the column back to its address. */
	.dyt-geo__card:not(:has(.dyt-geo__media)) {
		grid-template-columns: minmax(0, 1fr);
	}

	.dyt-geo__body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: var(--dyt-space-2);
		padding: var(--dyt-geo-pad, var(--dyt-space-5));
		min-width: 0;
	}

	.dyt-geo__city {
		display: flex;
		align-items: center;
		gap: var(--dyt-space-3);
		flex-wrap: wrap;
		margin: 0;
		font-size: var(--dyt-geo-city-size, var(--dyt-text-lg));
		font-weight: 600;
		color: var(--dyt-geo-city-color, inherit);
		line-height: 1.2;
	}

	.dyt-geo__hq {
		padding: 0.2em 0.7em;
		border-radius: var(--dyt-radius-pill);
		background: var(--dyt-geo-hq-bg, color-mix(in srgb, currentColor 14%, transparent));
		color: var(--dyt-geo-hq-color, inherit);
		font-size: var(--dyt-text-xs);
		font-weight: 600;
		letter-spacing: var(--dyt-tracking-wide);
		text-transform: uppercase;
	}

	.dyt-geo__addr,
	.dyt-geo__contact {
		margin: 0;
		font-size: var(--dyt-geo-addr-size, var(--dyt-text-sm));
		color: var(--dyt-geo-addr-color, var(--dyt-text-secondary));
		line-height: 1.45;
	}

	.dyt-geo__contact {
		display: flex;
		flex-wrap: wrap;
		gap: var(--dyt-space-3);
		margin-top: var(--dyt-space-2);
	}

	.dyt-geo__contact a {
		color: inherit;
	}

	@media (max-width: 64rem) {
		.dyt-geo {
			grid-template-columns: repeat(var(--dyt-geo-cols-t, 2), minmax(0, 1fr));
		}
	}

	@media (max-width: 47.99rem) {
		.dyt-geo {
			grid-template-columns: repeat(var(--dyt-geo-cols-m, 1), minmax(0, 1fr));
		}

		.dyt-geo__card {
			grid-template-columns: var(--dyt-geo-media-w-m, 96px) minmax(0, 1fr);
		}

		.dyt-geo--media-right .dyt-geo__card {
			grid-template-columns: minmax(0, 1fr) var(--dyt-geo-media-w-m, 96px);
		}

		.dyt-geo__body {
			padding: var(--dyt-geo-pad-m, var(--dyt-geo-pad, var(--dyt-space-4)));
		}

		.dyt-geo__city {
			font-size: var(--dyt-geo-city-size-m, var(--dyt-geo-city-size, var(--dyt-text-base)));
		}
	}

	/* ---------------------------------------------------------- Contact CTA */
	.dyt-con {
		display: grid;
		grid-template-columns: var(--dyt-con-split, 1.1fr) minmax(0, 1fr);
		gap: var(--dyt-con-split-gap, var(--dyt-space-8));
		align-items: start;
	}

	/* 20ch broke the heading after every second word. The measure is a setting
	   now, and unset means the column's own width. */
	.dyt-con__text .dyt-section-header {
		max-width: var(--dyt-con-head-w, none);
		margin-bottom: var(--dyt-space-6);
	}

	.dyt-con__label {
		margin: 0 0 var(--dyt-space-5);
		font-size: var(--dyt-con-label-size, var(--dyt-text-base));
		font-weight: 600;
		color: var(--dyt-con-label-color, inherit);
	}

	/* Left as list items on purpose: a flex or grid parent turns them into flex
	   or grid items, which have no ::marker, and the bullets disappear. The
	   spacing is done with a margin instead of a gap for the same reason. */
	.dyt-con__points {
		margin: 0;
		padding-left: 1.3em;
		list-style: disc;
		font-size: var(--dyt-con-point-size, var(--dyt-text-base));
		color: var(--dyt-con-point-color, var(--dyt-text-secondary));
		line-height: 1.5;
	}

	.dyt-con__points li + li {
		margin-top: var(--dyt-con-point-gap, var(--dyt-space-4));
	}

	.dyt-con__points li::marker {
		color: var(--dyt-con-marker-color, currentColor);
	}

	.dyt-con__logos {
		display: grid;
		grid-template-columns: repeat(var(--dyt-con-logo-cols, 3), minmax(0, 1fr));
		gap: var(--dyt-con-logo-gap, var(--dyt-space-7));
		align-items: center;
		margin-top: var(--dyt-con-logo-top, var(--dyt-space-8));
	}

	.dyt-con__logo img {
		max-height: var(--dyt-con-logo-h, 32px);
		width: auto;
		max-width: 100%;
		object-fit: contain;
		opacity: var(--dyt-con-logo-opacity, 0.55);
	}

	/* The panel is its own surface, so the section's own text colour stops at
	   its edge — a dark section with a white panel is the usual arrangement. */
	.dyt-con__panel {
		padding: var(--dyt-con-card-pad, var(--dyt-space-8));
		border-radius: var(--dyt-con-card-radius, var(--dyt-radius-lg));
		background: var(--dyt-con-card-bg, #ffffff);
		color: var(--dyt-con-card-text, #0b0b12);
	}

	.dyt-con__form-title {
		margin: 0 0 var(--dyt-space-7);
		text-align: center;
		font-size: var(--dyt-con-form-title-size, var(--dyt-text-xl));
		font-weight: 600;
		letter-spacing: var(--dyt-tracking-wide);
		text-transform: uppercase;
		color: inherit;
	}

	.dyt-con__form-title--left {
		text-align: left;
	}

	.dyt-con__form {
		display: flex;
		flex-direction: column;
		gap: var(--dyt-con-field-gap, var(--dyt-space-5));
	}

	/* Underlined fields rather than boxes: on a white panel a row of outlined
	   boxes reads heavier than everything around it. */
	.dyt-con__field {
		position: relative;
		margin: 0;
	}

	.dyt-con__field input,
	.dyt-con__field textarea {
		width: 100%;
		padding: 0.6em 0;
		border: 0;
		border-bottom: 1px solid var(--dyt-con-field-line, rgba(11, 11, 18, 0.18));
		background: none;
		color: var(--dyt-con-field-text, inherit);
		font: inherit;
		font-size: var(--dyt-con-field-size, var(--dyt-text-base));
	}

	.dyt-con__field textarea {
		resize: vertical;
	}

	.dyt-con__field input::placeholder,
	.dyt-con__field textarea::placeholder {
		color: currentColor;
		opacity: 0.55;
	}

	.dyt-con__field input:focus,
	.dyt-con__field textarea:focus {
		outline: 0;
		border-bottom-color: var(--dyt-brand);
	}

	/* The preview cannot be typed into, but it should not look broken either. */
	.dyt-con__form--preview input,
	.dyt-con__form--preview textarea {
		cursor: default;
		opacity: 1;
		-webkit-text-fill-color: currentColor;
	}

	.dyt-con__note {
		position: absolute;
		right: 0;
		bottom: 0.6em;
		font-size: var(--dyt-text-xs);
		opacity: 0.6;
	}

	.dyt-con__submit {
		margin: var(--dyt-space-3) 0 0;
	}

	.dyt-con__submit .dyt-btn[disabled] {
		opacity: 1;
		cursor: default;
	}

	.dyt-con__legal {
		margin: var(--dyt-space-5) 0 0;
		text-align: center;
		font-size: var(--dyt-con-legal-size, var(--dyt-text-sm));
		color: var(--dyt-con-legal-color, inherit);
		opacity: 0.7;
		line-height: 1.5;
	}

	.dyt-con__legal a {
		color: inherit;
		text-decoration: underline;
	}

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

		.dyt-con__text .dyt-section-header {
			max-width: none;
		}
	}

	@media (max-width: 47.99rem) {
		.dyt-con__panel {
			padding: var(--dyt-con-card-pad-m, var(--dyt-con-card-pad, var(--dyt-space-6)));
		}

		.dyt-con__logos {
			grid-template-columns: repeat(var(--dyt-con-logo-cols-m, 3), minmax(0, 1fr));
			gap: var(--dyt-space-5);
		}

		.dyt-con__points {
			font-size: var(--dyt-con-point-size-m, var(--dyt-con-point-size, var(--dyt-text-sm)));
		}
	}

	/* ------------------------------------------------------- Reviews & awards */
	.dyt-reviews__summary {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: var(--dyt-space-4);
		padding: var(--dyt-space-6);
		margin-bottom: var(--dyt-space-8);
		background: var(--dyt-bg-panel);
		border: 1px solid var(--dyt-border);
		border-radius: var(--dyt-radius-lg);
		text-align: center;
	}

	.dyt-reviews__rating {
		font-size: var(--dyt-text-2xl);
		font-weight: 700;
	}

	.dyt-quote {
		display: flex;
		flex-direction: column;
		gap: var(--dyt-space-4);
		height: 100%;
		padding: var(--dyt-space-6);
		background: var(--dyt-bg-panel);
		border: 1px solid var(--dyt-border);
		border-radius: var(--dyt-radius-lg);
	}

	.dyt-quote__text {
		font-size: var(--dyt-text-lg);
		line-height: var(--dyt-leading-snug);
	}

	.dyt-quote__text::before {
		content: open-quote;
	}

	.dyt-quote__text::after {
		content: close-quote;
	}

	.dyt-quote__author {
		display: flex;
		align-items: center;
		gap: var(--dyt-space-3);
		margin-top: auto;
		padding-top: var(--dyt-space-4);
		border-top: 1px solid var(--dyt-border);
	}

	.dyt-quote__avatar img {
		width: 44px;
		height: 44px;
		border-radius: var(--dyt-radius-pill);
		object-fit: cover;
	}

	.dyt-quote__name {
		font-weight: 600;
		font-size: var(--dyt-text-sm);
	}

	.dyt-quote__role {
		font-size: var(--dyt-text-xs);
		color: var(--dyt-text-muted);
	}

	.dyt-awards {
		display: flex;
		flex-wrap: wrap;
		gap: var(--dyt-space-6);
		align-items: center;
		justify-content: center;
		margin-top: var(--dyt-space-8);
	}

	.dyt-awards img {
		max-height: 72px;
		width: auto;
	}

	/* ------------------------------------------------------- Global presence */
	.dyt-offices {
		display: grid;
		gap: var(--dyt-space-4);
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	}

	.dyt-office {
		display: flex;
		flex-direction: column;
		gap: var(--dyt-space-2);
		padding: var(--dyt-space-5);
		background: var(--dyt-bg-panel);
		border: 1px solid var(--dyt-border);
		border-radius: var(--dyt-radius);
		transition: border-color var(--dyt-duration) var(--dyt-ease);
	}

	.dyt-office:hover {
		border-color: var(--dyt-border-strong);
	}

	.dyt-office__city {
		font-size: var(--dyt-text-lg);
		font-weight: 600;
	}

	.dyt-office__meta {
		font-size: var(--dyt-body-size, var(--dyt-text-base));
		color: var(--dyt-text-secondary);
		white-space: pre-line;
	}

	.dyt-office__hq {
		align-self: flex-start;
	}

	/* ------------------------------------------------------------ Contact CTA */
	.dyt-contact {
		display: grid;
		gap: clamp(var(--dyt-space-6), 4vw, var(--dyt-space-9));
		grid-template-columns: 1fr;
	}

	@media (min-width: 62rem) {
		.dyt-contact {
			grid-template-columns: 1fr 1fr;
		}
	}

	.dyt-contact__form {
		padding: var(--dyt-space-7);
		background: var(--dyt-bg-panel);
		border: 1px solid var(--dyt-border);
		border-radius: var(--dyt-radius-lg);
	}

	/* ------------------------------------------------------------ CTA banner */
	.dyt-cta-banner {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--dyt-space-5);
		padding: clamp(var(--dyt-space-8), 5vw, var(--dyt-space-11)) var(--dyt-space-6);
		text-align: center;
		border-radius: var(--dyt-radius-xl);
		overflow: hidden;
		background:
			linear-gradient(var(--dyt-bg-panel), var(--dyt-bg-panel)) padding-box,
			var(--dyt-gradient) border-box;
		border: 1px solid transparent;
	}

	.dyt-cta-banner::before {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--dyt-gradient-soft);
		pointer-events: none;
	}

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

	.dyt-cta-banner__title {
		font-size: var(--dyt-heading-size, var(--dyt-text-section));
		max-width: 22ch;
	}

	.dyt-cta-banner__text {
		color: var(--dyt-text-secondary);
		font-size: var(--dyt-body-size, var(--dyt-text-lg));
		max-width: 52ch;
	}

	/* ------------------------------------------------------------ Case study */
	.dyt-case__title {
		font-size: var(--dyt-text-3xl);
		margin-block: var(--dyt-space-3);
	}

	.dyt-case__client {
		color: var(--dyt-text-secondary);
	}

	.dyt-case__logo img {
		max-height: 44px;
		width: auto;
		margin-top: var(--dyt-space-5);
	}

	.dyt-case__media,
	.dyt-single__media {
		border-radius: var(--dyt-radius-xl);
		overflow: hidden;
		border: 1px solid var(--dyt-border);
		margin-top: calc(var(--dyt-space-8) * -1);
	}

	.dyt-case__block + .dyt-case__block {
		margin-top: var(--dyt-space-8);
	}

	.dyt-case__block-title {
		font-size: var(--dyt-text-xl);
		margin-bottom: var(--dyt-space-4);
	}

	.dyt-gallery {
		display: grid;
		gap: var(--dyt-space-4);
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	}

	.dyt-gallery__item {
		border-radius: var(--dyt-radius);
		overflow: hidden;
		border: 1px solid var(--dyt-border);
		margin: 0;
	}

	/* ----------------------------------------------------------- Single post */
	.dyt-single__title {
		font-size: var(--dyt-text-3xl);
		margin-block: var(--dyt-space-3);
	}

	.dyt-single__meta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--dyt-space-3);
		font-size: var(--dyt-text-sm);
		color: var(--dyt-text-muted);
	}

	/* --------------------------------------------- Per-section heading trim */
	/* Colour and spacing for a section's main heading, set in its Design tab.
	   Kept in this layer so it lands after the per-component rules above. */
	.dyt-section-header__title,
	.dyt-hero__title,
	.dyt-cta-banner__title,
	.dyt-trust__text {
		color: var(--dyt-heading-color, inherit);
		margin-top: var(--dyt-heading-mt, 0px);
		margin-bottom: var(--dyt-heading-mb, 0px);
	}

	.dyt-trust__text {
		margin-bottom: var(--dyt-heading-mb, var(--dyt-space-5));
	}

	@media (max-width: 47.99rem) {
		.dyt-section-header__title,
		.dyt-hero__title,
		.dyt-cta-banner__title {
			margin-top: calc(var(--dyt-heading-mt, 0px) * 0.6);
			margin-bottom: calc(var(--dyt-heading-mb, 0px) * 0.6);
		}
	}

	/* ------------------------------------------------------------ Rich text */
	.dyt-richtext--narrow {
		max-width: var(--dyt-container-narrow);
		margin-inline: auto;
	}

	/* --------------------------------------------------- Services carousel */
	/* Every custom property below is written by the section's Slider and Card
	   tabs. The fallback in each var() is the design default, so clearing a box
	   in admin genuinely returns the card to how it shipped. */
	.dyt-csl {
		position: relative;

		--dyt-csl-per: var(--dyt-csl-per-d, 1);
		--dyt-csl-gap-v: var(--dyt-csl-gap, var(--dyt-space-5));
		--dyt-csl-peek-v: var(--dyt-csl-peek, 120px);
		/* The track pads itself by a peek plus a gap, which is exactly what
		   puts the first card in the middle at scroll position zero. */
		--dyt-csl-edge: calc(var(--dyt-csl-peek-v) + var(--dyt-csl-gap-v));
		--dyt-csl-title: var(--dyt-csl-title-d);
		/* Room for the shadow to fall outside the cards. A scroll container
		   clips both axes — asking for overflow on one and visible on the
		   other is not a thing CSS allows — so the only way a soft shadow
		   survives is to keep it inside the track's own padding. */
		--dyt-csl-bleed: 64px;
		/* Sideways it can only borrow the page gutter; any more and the track
		   would reach past the viewport and the page would scroll. */
		--dyt-csl-bleed-x: min(var(--dyt-csl-bleed), var(--dyt-gutter));
	}

	.dyt-csl--track {
		--dyt-csl-edge: 0px;
	}

	@media (max-width: 64rem) {
		.dyt-csl {
			--dyt-csl-per: var(--dyt-csl-per-t, var(--dyt-csl-per-d, 1));
			--dyt-csl-peek-v: calc(var(--dyt-csl-peek, 120px) * 0.5);
			--dyt-csl-title: var(--dyt-csl-title-t, var(--dyt-csl-title-d));
		}
	}

	@media (max-width: 47.99rem) {
		.dyt-csl {
			--dyt-csl-per: var(--dyt-csl-per-m, var(--dyt-csl-per-t, var(--dyt-csl-per-d, 1)));
			/* A gap set for a 1400px stage eats a phone alive, so it keeps its
			   shape here at a fraction of it. */
			--dyt-csl-gap-v: calc(var(--dyt-csl-gap, var(--dyt-space-5)) * 0.55);
			--dyt-csl-title: var(--dyt-csl-title-m, var(--dyt-csl-title-t, var(--dyt-csl-title-d)));
			/* One card, whole. The edge padding is what held the neighbours in
			   view; zeroing it leaves the card exactly the width of the
			   container, and makes the peek moot on a phone — which is why no
			   reduced peek is set here any more. The bleed stays, since that is
			   only the shadow's room and its negative margin cancels it out. */
			--dyt-csl-edge: 0px;
		}

		/* Side arrows are placed from that same edge, so with it gone they
		   would land on top of the card. On a phone they drop below and centre,
		   which is where the other sliders put theirs. */
		.dyt-csl--arrows-sides .dyt-csl__btn {
			position: static;
			transform: none;
		}

		.dyt-csl--arrows-sides .dyt-csl__controls {
			position: relative;
			z-index: 1;
			justify-content: center;
			margin-top: var(--dyt-space-5);
		}
	}

	.dyt-csl__viewport {
		position: relative;
	}

	/* The padding gives the shadow somewhere to fall and the negative margin
	   takes the same amount back out of the layout, so the cards sit exactly
	   where they did — the room is only inside the clip.

	   The width maths survives it: the padding adds the bleed to each side and
	   the margin hands it back, so the content box, and with it every card, is
	   the size it was before. */
	.dyt-csl__track {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: calc((100% - (var(--dyt-csl-per) - 1) * var(--dyt-csl-gap-v)) / var(--dyt-csl-per));
		gap: var(--dyt-csl-gap-v);
		padding-block: var(--dyt-csl-bleed);
		margin-block: calc(var(--dyt-csl-bleed) * -1);
		padding-inline: calc(var(--dyt-csl-edge) + var(--dyt-csl-bleed-x));
		margin-inline: calc(var(--dyt-csl-bleed-x) * -1);
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: calc(var(--dyt-csl-edge) + var(--dyt-csl-bleed-x));
		scrollbar-width: none;
	}

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

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

	.dyt-csl__item {
		min-width: 0;
	}

	.dyt-csl--center .dyt-csl__item {
		scroll-snap-align: center;
	}

	.dyt-csl--track .dyt-csl__item {
		scroll-snap-align: start;
	}

	.dyt-csl__card {
		position: relative;
		display: flex;
		flex-direction: column;
		height: var(--dyt-csl-card-h, auto);
		padding:
			var(--dyt-csl-pt, var(--dyt-space-7))
			var(--dyt-csl-pr, var(--dyt-space-7))
			var(--dyt-csl-pb, var(--dyt-space-6))
			var(--dyt-csl-pl, var(--dyt-space-7));
		border: 1px solid var(--dyt-csl-card-border, var(--dyt-border));
		border-radius: var(--dyt-csl-radius, var(--dyt-radius-lg));
		background: var(--dyt-csl-card-bg, var(--dyt-bg-elevated));
		transition:
			opacity var(--dyt-duration) var(--dyt-ease),
			transform var(--dyt-duration) var(--dyt-ease),
			border-color var(--dyt-duration-fast) var(--dyt-ease),
			box-shadow var(--dyt-duration) var(--dyt-ease);
	}

	/* Dimming only applies once the script has decided which card is centred.
	   Without it every card would sit greyed out for a visitor without JS. */
	.dyt-csl.is-ready .dyt-csl__card {
		opacity: var(--dyt-csl-dim, 1);
		transform: scale(var(--dyt-csl-scale, 1));
	}

	.dyt-csl.is-ready .dyt-csl__item.is-active .dyt-csl__card {
		opacity: 1;
		transform: none;
	}

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

	.dyt-csl__title {
		margin: 0;
		font-size: var(--dyt-csl-title, var(--dyt-text-2xl));
		line-height: var(--dyt-leading-tight);
		letter-spacing: var(--dyt-tracking-tight);
		color: var(--dyt-csl-title-color, inherit);
	}

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

	.dyt-csl__title a:hover,
	.dyt-csl__title a:focus-visible {
		text-decoration: underline;
		text-underline-offset: 4px;
	}

	.dyt-csl__text {
		margin: 0;
		max-width: var(--dyt-csl-text-w, 46ch);
		font-size: var(--dyt-csl-text-size, var(--dyt-body-size, var(--dyt-text-base)));
		line-height: var(--dyt-leading-normal);
		color: var(--dyt-csl-text-color, var(--dyt-text-secondary));
	}

	/* auto on top pins the pills to the bottom of a fixed-height card. */
	.dyt-csl__tags {
		display: flex;
		flex-wrap: wrap;
		gap: var(--dyt-csl-tag-gap, var(--dyt-space-2));
		margin: auto 0 0;
		padding: var(--dyt-space-6) 0 0;
		list-style: none;
	}

	.dyt-csl__tag {
		display: inline-flex;
		align-items: center;
		padding: var(--dyt-csl-tag-py, 8px) var(--dyt-csl-tag-px, 16px);
		border: 1px solid var(--dyt-csl-tag-border, transparent);
		border-radius: var(--dyt-csl-tag-radius, var(--dyt-radius-pill));
		background: var(--dyt-csl-tag-bg, color-mix(in srgb, var(--dyt-text) 8%, transparent));
		color: var(--dyt-csl-tag-text, var(--dyt-text-secondary));
		font-size: var(--dyt-csl-tag-size, var(--dyt-text-sm));
		line-height: 1.2;
		white-space: nowrap;
	}

	.dyt-csl__icon {
		display: block;
		width: var(--dyt-csl-icon-size, 120px);
		max-width: 45%;
		pointer-events: none;
		/* Inherited by the built-in icons, which stroke themselves in
		   currentColor and so follow the card — and the dark-section flip —
		   without a second colour to keep in step. */
		color: var(--dyt-csl-icon-color, inherit);
	}

	.dyt-csl__icon img,
	.dyt-csl__icon svg {
		display: block;
		width: 100%;
		height: auto;
	}

	.dyt-csl__icon svg {
		opacity: var(--dyt-csl-icon-opacity, 0.85);
	}

	.dyt-csl--icon-top-right .dyt-csl__icon,
	.dyt-csl--icon-top-left .dyt-csl__icon,
	.dyt-csl--icon-bottom-right .dyt-csl__icon {
		position: absolute;
	}

	.dyt-csl--icon-top-right .dyt-csl__icon {
		top: var(--dyt-csl-pt, var(--dyt-space-7));
		right: var(--dyt-csl-pr, var(--dyt-space-7));
	}

	.dyt-csl--icon-top-left .dyt-csl__icon {
		top: var(--dyt-csl-pt, var(--dyt-space-7));
		left: var(--dyt-csl-pl, var(--dyt-space-7));
	}

	.dyt-csl--icon-bottom-right .dyt-csl__icon {
		right: var(--dyt-csl-pr, var(--dyt-space-7));
		bottom: var(--dyt-csl-pb, var(--dyt-space-6));
	}

	.dyt-csl--icon-above .dyt-csl__icon {
		margin-bottom: var(--dyt-space-5);
	}

	/* A corner icon reserves its own column so long titles never run under it. */
	.dyt-csl--icon-top-right .dyt-csl__body {
		padding-right: calc(var(--dyt-csl-icon-size, 120px) + var(--dyt-space-5));
	}

	.dyt-csl--icon-top-left .dyt-csl__body {
		padding-left: calc(var(--dyt-csl-icon-size, 120px) + var(--dyt-space-5));
	}

	/* Hover belongs to the card on stage. Without the script every card is on
	   stage, so the second selector keeps the effect alive there too. */
	.dyt-csl--hover-lift .dyt-csl__item.is-active .dyt-csl__card:hover,
	.dyt-csl--hover-lift:not(.is-ready) .dyt-csl__card:hover {
		transform: translateY(-6px);
		box-shadow: var(--dyt-shadow-lg);
	}

	.dyt-csl--hover-glow .dyt-csl__item.is-active .dyt-csl__card:hover,
	.dyt-csl--hover-glow:not(.is-ready) .dyt-csl__card:hover {
		box-shadow: var(--dyt-glow);
	}

	.dyt-csl--hover-border .dyt-csl__item.is-active .dyt-csl__card:hover,
	.dyt-csl--hover-border:not(.is-ready) .dyt-csl__card:hover {
		border-color: var(--dyt-csl-card-border, var(--dyt-border-strong));
		filter: brightness(1.25);
	}

	.dyt-csl__controls {
		display: flex;
		gap: var(--dyt-space-3);
	}

	.dyt-csl__btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--dyt-csl-arrow-size, 44px);
		height: var(--dyt-csl-arrow-size, 44px);
		padding: 0;
		border: 1px solid var(--dyt-csl-arrow-border, var(--dyt-border-strong));
		border-radius: 50%;
		background: var(--dyt-csl-arrow-bg, transparent);
		color: var(--dyt-csl-arrow-color, var(--dyt-text));
		cursor: pointer;
		transition:
			background-color var(--dyt-duration-fast) var(--dyt-ease),
			opacity var(--dyt-duration-fast) var(--dyt-ease),
			border-color var(--dyt-duration-fast) var(--dyt-ease);
	}

	.dyt-csl__btn svg {
		width: 45%;
		height: 45%;
	}

	.dyt-csl__btn:hover:not(:disabled) {
		background: color-mix(in srgb, currentColor 14%, transparent);
	}

	.dyt-csl__btn:disabled {
		opacity: 0.3;
		cursor: not-allowed;
	}

	/* Side arrows sit in the channel between the centred card and its
	   neighbour; the inset field nudges them in or out from there. */
	.dyt-csl--arrows-sides .dyt-csl__btn {
		position: absolute;
		top: 50%;
		z-index: 2;
		transform: translateY(-50%);
	}

	.dyt-csl--arrows-sides [data-dyt-carousel-prev] {
		left: max(0px, calc(
			var(--dyt-csl-edge)
			- var(--dyt-csl-gap-v) / 2
			- var(--dyt-csl-arrow-size, 44px) / 2
			+ var(--dyt-csl-arrow-offset, 0px)
		));
	}

	.dyt-csl--arrows-sides [data-dyt-carousel-next] {
		right: max(0px, calc(
			var(--dyt-csl-edge)
			- var(--dyt-csl-gap-v) / 2
			- var(--dyt-csl-arrow-size, 44px) / 2
			+ var(--dyt-csl-arrow-offset, 0px)
		));
	}

	/* The track's shadow room reaches over whatever follows it, so the things
	   below it are lifted a layer to keep their clicks. */
	.dyt-csl--arrows-center .dyt-csl__controls,
	.dyt-csl--arrows-right .dyt-csl__controls,
	.dyt-csl__dots,
	.dyt-csl__cta {
		position: relative;
		z-index: 1;
	}

	.dyt-csl--arrows-center .dyt-csl__controls {
		justify-content: center;
		margin-top: var(--dyt-space-5);
	}

	.dyt-csl--arrows-right .dyt-csl__controls {
		justify-content: flex-end;
		margin-top: var(--dyt-space-5);
	}

	.dyt-csl__dots {
		display: flex;
		justify-content: center;
		gap: var(--dyt-space-2);
		margin-top: var(--dyt-space-5);
	}

	.dyt-csl__dot {
		width: 8px;
		height: 8px;
		padding: 0;
		border: 0;
		border-radius: var(--dyt-radius-pill);
		background: color-mix(in srgb, var(--dyt-text) 26%, transparent);
		cursor: pointer;
		transition:
			width var(--dyt-duration) var(--dyt-ease),
			background-color var(--dyt-duration) var(--dyt-ease);
	}

	.dyt-csl__dot.is-active {
		width: 24px;
		background: var(--dyt-csl-arrow-color, var(--dyt-text));
	}

	.dyt-csl__cta {
		justify-content: center;
		margin-top: var(--dyt-space-7);
	}

	@media (max-width: 47.99rem) {
		.dyt-csl__card {
			height: var(--dyt-csl-card-h-m, auto);
			/* Desktop padding is entered against a card several times this
			   wide. Held at full size it leaves a column of text barely wider
			   than the padding itself. */
			padding:
				calc(var(--dyt-csl-pt, var(--dyt-space-7)) * 0.62)
				calc(var(--dyt-csl-pr, var(--dyt-space-7)) * 0.62)
				calc(var(--dyt-csl-pb, var(--dyt-space-6)) * 0.62)
				calc(var(--dyt-csl-pl, var(--dyt-space-7)) * 0.62);
		}

		/* The arrows sit over the card itself once the peek is this narrow, so
		   they move below it where they cover nothing. */
		.dyt-csl--arrows-sides .dyt-csl__btn {
			position: static;
			transform: none;
		}

		.dyt-csl--arrows-sides .dyt-csl__controls {
			justify-content: center;
			margin-top: var(--dyt-space-5);
		}

		/* A corner icon on a phone eats the width the title needs. */
		.dyt-csl--icon-top-right .dyt-csl__body,
		.dyt-csl--icon-top-left .dyt-csl__body {
			padding-inline: 0;
		}

		.dyt-csl--icon-top-right .dyt-csl__icon,
		.dyt-csl--icon-top-left .dyt-csl__icon,
		.dyt-csl--icon-bottom-right .dyt-csl__icon {
			position: static;
			margin-bottom: var(--dyt-space-4);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.dyt-csl__card,
		.dyt-csl__dot {
			transition: none;
		}
	}

	/* ---------------------------------------------------- Heading & image */
	/* The image is fluid first: width in per cent, height from the file. The
	   fields only ever cap it, frame it, or — for something wide like a chart —
	   hold it at a readable size and let the visitor drag it across. */
	.dyt-imgb {
		margin: var(--dyt-space-8) 0 0;
		max-width: var(--dyt-imgb-w, 100%);
		padding: var(--dyt-imgb-pad, 0px);
		border-radius: var(--dyt-imgb-radius, 0px);
		background: var(--dyt-imgb-bg, transparent);
		border: var(--dyt-imgb-border, transparent) solid;
		border-width: 0;
	}

	/* A border is only drawn once a colour has been chosen, so an empty field
	   cannot leave a hairline behind. */
	.dyt-imgb[style*="--dyt-imgb-border"] {
		border-width: 1px;
	}

	.dyt-imgb--center {
		margin-inline: auto;
	}

	.dyt-imgb--left {
		margin-inline: 0 auto;
	}

	.dyt-imgb--right {
		margin-inline: auto 0;
	}

	.dyt-imgb--shadow-soft {
		box-shadow: var(--dyt-shadow);
	}

	.dyt-imgb--shadow-deep {
		box-shadow: var(--dyt-shadow-lg);
	}

	.dyt-imgb__img {
		display: block;
		width: 100%;
		height: auto;
		border-radius: inherit;
	}

	.dyt-imgb__caption {
		margin-top: var(--dyt-space-4);
		font-size: var(--dyt-text-sm);
		color: var(--dyt-text-muted);
		text-align: center;
	}

	.dyt-imgb--left .dyt-imgb__caption,
	.dyt-imgb--right .dyt-imgb__caption {
		text-align: start;
	}

	/* Wide artwork on a narrow screen: held at a legible size and dragged
	   across, rather than shrunk until the labels disappear. */
	.dyt-imgb__scroller {
		border-radius: inherit;
	}

	.dyt-imgb--scroll .dyt-imgb__scroller {
		max-width: 100%;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
	}

	/* The held width is the whole point, so it is not clamped to the screen:
	   capping it at 100vw made the image fit exactly, which is the shrinking
	   this setting exists to prevent. The scroller keeps the overflow to
	   itself, so the page still does not scroll sideways. */
	.dyt-imgb--scroll .dyt-imgb__img {
		min-width: var(--dyt-imgb-min, 640px);
	}

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

	/* Above the hold width there is nothing to scroll, so the bar and the
	   minimum both go away and the image is simply fluid again. */
	@media (min-width: 48rem) {
		.dyt-imgb--scroll .dyt-imgb__scroller {
			overflow-x: visible;
		}

		.dyt-imgb--scroll .dyt-imgb__img {
			min-width: 0;
		}
	}

	/* ------------------------------------------------------------ CTA panel */
	.dyt-ctap {
		position: relative;
		/* Held apart from the raw setting so the narrow layout can scale it
		   without losing what was typed in. */
		--dyt-ctap-face: var(--dyt-ctap-face-set, 64px);

		max-width: var(--dyt-ctap-w, 100%);
		margin-inline: auto;
		padding:
			var(--dyt-ctap-pt, var(--dyt-space-10))
			var(--dyt-ctap-pr, var(--dyt-space-7))
			var(--dyt-ctap-pb, var(--dyt-space-10))
			var(--dyt-ctap-pl, var(--dyt-space-7));
		border-radius: var(--dyt-ctap-radius, var(--dyt-radius-xl));
		background: var(--dyt-ctap-bg, var(--dyt-gradient));
		color: var(--dyt-ctap-text, #ffffff);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--dyt-ctap-gap, var(--dyt-space-6));
		text-align: center;
		box-shadow: 0 30px 80px color-mix(in srgb, var(--dyt-ctap-glow-color, var(--dyt-brand)) calc(var(--dyt-ctap-glow, 0) * 100%), transparent);
	}

	.dyt-ctap--left {
		align-items: flex-start;
		text-align: left;
	}

	/* --- Panel background image ------------------------------------------ */
	.dyt-ctap--image {
		background-image: var(--dyt-ctap-image);
		background-size: var(--dyt-ctap-image-size, cover);
		background-position: var(--dyt-ctap-image-pos, center center);
		background-repeat: no-repeat;
		/* Something to sit on while the file loads, and behind a "contain"
		   image that does not reach the corners. */
		background-color: var(--dyt-bg-inset);
		overflow: hidden;
	}

	.dyt-ctap--fixed {
		background-attachment: fixed;
	}

	/* Fixed attachment judders badly on touch devices, so it scrolls there —
	   the same concession the section backgrounds make. */
	@media (hover: none) {
		.dyt-ctap--fixed {
			background-attachment: scroll;
		}
	}

	/* The overlay is a layer of its own rather than a tint on the image: a
	   gradient over a photograph cannot be expressed as one background. */
	.dyt-ctap--image::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		background: var(--dyt-ctap-overlay, transparent);
		pointer-events: none;
		z-index: 1;
	}

	.dyt-ctap--image > * {
		position: relative;
		z-index: 2;
	}

	/* Blur belongs to the picture, not to the words on top of it, so the image
	   moves to its own layer. The layer is oversized because a blur fades out
	   at its edges and would otherwise show a soft border. */
	.dyt-ctap--blurred {
		background-image: none;
	}

	.dyt-ctap--blurred::after {
		content: "";
		position: absolute;
		inset: calc(var(--dyt-ctap-image-blur, 0px) * -2);
		background-image: var(--dyt-ctap-image);
		background-size: var(--dyt-ctap-image-size, cover);
		background-position: var(--dyt-ctap-image-pos, center center);
		background-repeat: no-repeat;
		filter: blur(var(--dyt-ctap-image-blur, 0px));
		pointer-events: none;
		z-index: 0;
	}

	/* No character cap by default: a fixed measure here was breaking a heading
	   that the panel had room for, and where it should wrap is a decision about
	   this heading rather than about headings in general. */
	/* The panel carries light text on a coloured fill, so the highlighted half
	   of its heading needs a light treatment too — the page's brand gradient
	   runs blue into navy, which is the panel's own colour and reads as a hole
	   in the sentence. */
	.dyt-ctap__title em {
		background: var(--dyt-ctap-em, linear-gradient(120deg, #a8d4ff 0%, #ffffff 100%));
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

	.dyt-ctap__title {
		margin: 0;
		font-size: var(--dyt-heading-size, var(--dyt-text-section));
		letter-spacing: var(--dyt-tracking-tight);
		color: inherit;
		max-width: var(--dyt-ctap-title-w, 100%);
	}

	.dyt-ctap__intro {
		margin: calc(var(--dyt-ctap-gap, var(--dyt-space-6)) * -0.5) 0 0;
		font-size: var(--dyt-body-size, var(--dyt-text-lg));
		opacity: 0.9;
		max-width: 52ch;
	}

	/* The chip and the faces read as one object, so they share a row and the
	   faces tuck under the chip's edge. */
	.dyt-ctap__proof {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: var(--dyt-space-3);
	}

	.dyt-ctap--left .dyt-ctap__proof {
		justify-content: flex-start;
	}

	.dyt-ctap__chip {
		display: inline-flex;
		align-items: center;
		gap: var(--dyt-space-3);
		/* The narrow left padding is there to sit beside the logo circle. */
		padding: var(--dyt-ctap-chip-py, var(--dyt-space-3)) var(--dyt-ctap-chip-px, var(--dyt-space-5)) var(--dyt-ctap-chip-py, var(--dyt-space-3)) var(--dyt-space-2);
		border-radius: var(--dyt-ctap-chip-radius, var(--dyt-radius-pill));
		background: var(--dyt-ctap-chip-bg, rgba(255, 255, 255, 0.16));
		color: var(--dyt-ctap-chip-text, inherit);
		text-decoration: none;
		/* Overlapped by the first face, which is what ties the two together. */
		margin-right: calc(var(--dyt-ctap-overlap, 10px) * -1);
		position: relative;
		z-index: 1;
	}

	a.dyt-ctap__chip:hover {
		background: var(--dyt-ctap-chip-bg, rgba(255, 255, 255, 0.26));
	}

	/* Without the logo there is nothing for that narrow left padding to sit
	   beside, so the score ends up against the edge. */
	.dyt-ctap__chip:not(:has(.dyt-ctap__chip-logo)) {
		padding-left: var(--dyt-ctap-chip-px, var(--dyt-space-5));
	}

	.dyt-ctap__chip-logo {
		display: grid;
		place-items: center;
		width: var(--dyt-ctap-face, 64px);
		height: var(--dyt-ctap-face, 64px);
		border-radius: 50%;
		overflow: hidden;
		background: #ffffff;
	}

	.dyt-ctap__chip-logo img {
		width: 68%;
		height: 68%;
		object-fit: contain;
	}

	.dyt-ctap__chip-text {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		/* Two lines at different sizes need a little air; at 1.2 with no gap
		   the label sat right on top of the score. */
		gap: 3px;
		line-height: 1.25;
		text-align: left;
	}

	.dyt-ctap__chip-score {
		font-weight: 600;
		font-size: var(--dyt-text-lg);
	}

	.dyt-ctap__chip-star {
		color: #ff4d4d;
	}

	.dyt-ctap__chip-label {
		font-size: var(--dyt-text-sm);
		opacity: 0.85;
	}

	.dyt-ctap__faces {
		display: flex;
		align-items: center;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.dyt-ctap__face {
		width: var(--dyt-ctap-face, 64px);
		height: var(--dyt-ctap-face, 64px);
		border-radius: 50%;
		overflow: hidden;
		background: var(--dyt-bg-elevated);
		box-shadow: 0 0 0 var(--dyt-ctap-ring, 2px) var(--dyt-ctap-ring-color, rgba(255, 255, 255, 0.85));
	}

	/* Each face slides over the one before it; the first keeps its full round. */
	.dyt-ctap__face + .dyt-ctap__face {
		margin-left: calc(var(--dyt-ctap-overlap, 10px) * -1);
	}

	.dyt-ctap__face img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.dyt-ctap--bw .dyt-ctap__face img {
		filter: grayscale(1);
	}

	.dyt-ctap__actions {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--dyt-space-4);
	}

	.dyt-ctap--left .dyt-ctap__actions {
		justify-content: flex-start;
	}

	/* The panel owns its buttons: the theme's own colours would fight the
	   gradient behind them. */
	/* The panel's buttons carry their own hover pair, so whichever effect the
	   site is set to reaches for a colour that belongs on this panel rather
	   than the brand colour it would use anywhere else. */
	.dyt-ctap__btn {
		background: var(--dyt-ctap-btn-bg, #ffffff);
		color: var(--dyt-ctap-btn-text, #0b0b12);
		border: 0;

		--dyt-btn-hover-bg: color-mix(in srgb, var(--dyt-ctap-btn-bg, #ffffff) 88%, #000000);
		--dyt-btn-hover-text: var(--dyt-ctap-btn-text, #0b0b12);
		--dyt-btn-shadow-color: rgba(0, 0, 0, 0.45);
		--dyt-btn-sheen: var(--dyt-ctap-btn-text, #0b0b12);
	}

	.dyt-ctap__btn--ghost {
		background: transparent;
		color: var(--dyt-ctap-text, #ffffff);
		box-shadow: inset 0 0 0 1px currentColor;

		--dyt-btn-hover-bg: rgba(255, 255, 255, 0.18);
		--dyt-btn-hover-text: var(--dyt-ctap-text, #ffffff);
		--dyt-btn-sheen: #ffffff;
	}

	.dyt-ctap__note {
		margin: calc(var(--dyt-ctap-gap, var(--dyt-space-6)) * -0.5) 0 0;
		font-size: var(--dyt-text-sm);
		opacity: 0.8;
	}

	@media (max-width: 47.99rem) {
		.dyt-ctap {
			padding:
				calc(var(--dyt-ctap-pt, var(--dyt-space-10)) * 0.62)
				calc(var(--dyt-ctap-pr, var(--dyt-space-7)) * 0.62)
				calc(var(--dyt-ctap-pb, var(--dyt-space-10)) * 0.62)
				calc(var(--dyt-ctap-pl, var(--dyt-space-7)) * 0.62);
		}

		/* Eight faces at full size do not fit a phone, and shrinking the type
		   to suit them would be the wrong trade. */
		.dyt-ctap {
			--dyt-ctap-face: calc(var(--dyt-ctap-face-set, 64px) * 0.7);
		}

		.dyt-ctap__proof {
			gap: var(--dyt-space-2);
		}

		.dyt-ctap__actions,
		.dyt-ctap__btn {
			width: 100%;
			justify-content: center;
		}
	}

	/* ------------------------------------------------------ Image & text grid */
	.dyt-mg {
		display: grid;
		grid-template-columns: repeat(var(--dyt-mg-cols-d, 2), minmax(0, 1fr));
		column-gap: var(--dyt-mg-gap-x, var(--dyt-space-8));
		row-gap: var(--dyt-mg-gap-y, var(--dyt-space-7));
		margin-top: var(--dyt-space-8);

		/* The three type sizes arrive as raw values; these pick which one is
		   live and chain the fallbacks, so filling only the desktop box leaves
		   every screen with that size. */
		--dyt-mg-title-size: var(--dyt-mg-title-d);
		--dyt-mg-text-size: var(--dyt-mg-text-d);
	}

	.dyt-mg__item {
		position: relative;
		display: flex;
		gap: var(--dyt-space-5);
		align-items: flex-start;
		padding: var(--dyt-mg-pad, 0px);
		min-width: 0;
		color: inherit;
		text-decoration: none;
		/* Square by default, and a setting when it should not be. This was a
		   fixed 22px, which nothing in admin could reach — and it was bending
		   the ends of the divider, since a border follows the corner it runs
		   into. */
		border-radius: var(--dyt-mg-radius, 0px);
		transition:
			transform var(--dyt-duration) var(--dyt-ease),
			background-color var(--dyt-duration) var(--dyt-ease);
	}

	.dyt-mg--media-above .dyt-mg__item {
		flex-direction: column;
	}

	/* The line belongs under the row, so it is drawn by the items and not by a
	   wrapper that would have to know where the rows break. It is its own
	   element rather than a border: a border is part of the box and curves with
	   it, and a rule under a row should be a straight line whatever the corners
	   are doing. */
	.dyt-mg--dividers .dyt-mg__item {
		padding-bottom: calc(var(--dyt-mg-pad, 0px) + var(--dyt-mg-gap-y, var(--dyt-space-7)) / 2);
	}

	.dyt-mg--dividers .dyt-mg__item::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: var(--dyt-mg-divider-w, 1px);
		background: var(--dyt-mg-divider, var(--dyt-border));
	}

	.dyt-mg__media {
		flex: 0 0 auto;
		display: grid;
		place-items: center;
		width: var(--dyt-mg-img, 80px);
		height: var(--dyt-mg-img, 80px);
		border-radius: var(--dyt-mg-img-radius, var(--dyt-radius));
		overflow: hidden;
		color: var(--dyt-mg-item-color, var(--dyt-mg-title-color, var(--dyt-brand)));
	}

	.dyt-mg__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.dyt-mg__media svg {
		width: 62%;
		height: 62%;
	}

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

	.dyt-mg__title {
		font-size: var(--dyt-mg-title-size, var(--dyt-text-xl));
		font-weight: var(--dyt-mg-title-weight, 600);
		line-height: var(--dyt-leading-snug);
		letter-spacing: var(--dyt-tracking-snug);
		color: var(--dyt-mg-item-color, var(--dyt-mg-title-color, inherit));
	}

	.dyt-mg__text {
		font-size: var(--dyt-mg-text-size, var(--dyt-body-size, var(--dyt-text-base)));
		line-height: var(--dyt-leading-normal);
		color: var(--dyt-mg-text-color, var(--dyt-text-secondary));
	}

	.dyt-mg--hover-lift a.dyt-mg__item:hover {
		transform: translateY(-4px);
	}

	.dyt-mg--hover-tint a.dyt-mg__item:hover {
		background: color-mix(in srgb, var(--dyt-text) 6%, transparent);
	}

	a.dyt-mg__item:hover .dyt-mg__title {
		text-decoration: underline;
		text-underline-offset: 4px;
	}

	.dyt-mg__cta {
		justify-content: center;
		margin-top: var(--dyt-space-8);
	}

	@media (max-width: 64rem) {
		.dyt-mg {
			grid-template-columns: repeat(var(--dyt-mg-cols-t, var(--dyt-mg-cols-d, 2)), minmax(0, 1fr));
			--dyt-mg-title-size: var(--dyt-mg-title-t, var(--dyt-mg-title-d));
			--dyt-mg-text-size: var(--dyt-mg-text-t, var(--dyt-mg-text-d));
		}
	}

	@media (max-width: 47.99rem) {
		.dyt-mg {
			grid-template-columns: repeat(var(--dyt-mg-cols-m, 1), minmax(0, 1fr));
			column-gap: var(--dyt-space-5);
			--dyt-mg-title-size: var(--dyt-mg-title-m, var(--dyt-mg-title-t, var(--dyt-mg-title-d)));
			--dyt-mg-text-size: var(--dyt-mg-text-m, var(--dyt-mg-text-t, var(--dyt-mg-text-d)));
		}

		/* A size of its own on a phone, falling back to three quarters of the
		   desktop one — which is a starting point, not a rule. */
		.dyt-mg__media {
			width: var(--dyt-mg-img-m, calc(var(--dyt-mg-img, 80px) * 0.75));
			height: var(--dyt-mg-img-m, calc(var(--dyt-mg-img, 80px) * 0.75));
		}
	}

	/* -------------------------------------------------------- Case study grid */
	.dyt-cg {
		margin-top: var(--dyt-space-7);
	}

	.dyt-cg__filters {
		/* Narrowing the row is what wraps the pills onto a second line while
		   they keep their natural widths. */
		max-width: var(--dyt-cg-filter-w, none);
		margin-inline: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--dyt-space-2);
		margin-bottom: var(--dyt-space-7);
	}

	.dyt-cg__pill {
		padding: var(--dyt-space-2) var(--dyt-space-5);
		border: 1px solid var(--dyt-border);
		border-radius: var(--dyt-radius-pill);
		background: var(--dyt-cg-pill-bg, transparent);
		color: var(--dyt-cg-pill-text, var(--dyt-text));
		font-size: var(--dyt-text-sm);
		font-weight: 500;
		cursor: pointer;
		transition:
			background-color var(--dyt-duration-fast) var(--dyt-ease),
			color var(--dyt-duration-fast) var(--dyt-ease),
			border-color var(--dyt-duration-fast) var(--dyt-ease);
	}

	.dyt-cg__pill:hover {
		border-color: var(--dyt-border-strong);
	}

	.dyt-cg__pill.is-active {
		background: var(--dyt-cg-pill-on-bg, var(--dyt-gradient));
		color: var(--dyt-cg-pill-on-text, #ffffff);
		border-color: transparent;
	}

	.dyt-cg__grid {
		display: grid;
		grid-template-columns: repeat(var(--dyt-cg-cols-d, 2), minmax(0, 1fr));
		gap: var(--dyt-cg-gap, var(--dyt-space-4));
	}

	.dyt-cg__card {
		display: flex;
		flex-direction: column;
		gap: var(--dyt-space-5);
		padding: var(--dyt-cg-pad, var(--dyt-space-6));
		border: 1px solid var(--dyt-cg-card-border, transparent);
		border-radius: var(--dyt-cg-radius, var(--dyt-radius-lg));
		background: var(--dyt-cg-card-bg, var(--dyt-bg-elevated));
		min-width: 0;
	}

	/* Hidden by the filter or still behind the button: either way it is out of
	   the grid rather than merely invisible, so the rows close up. */
	.dyt-cg__card[hidden] {
		display: none;
	}

	.dyt-cg__head {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--dyt-space-4);
	}

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

	.dyt-cg__tags {
		margin: 0;
		font-size: var(--dyt-cg-tag-size, var(--dyt-text-xs));
		font-weight: 600;
		letter-spacing: var(--dyt-tracking-wide);
		text-transform: uppercase;
		color: var(--dyt-cg-tag-color, var(--dyt-brand));
	}

	.dyt-cg__title {
		margin: 0;
		font-size: var(--dyt-cg-title-size, var(--dyt-text-xl));
		font-weight: 600;
		line-height: var(--dyt-leading-snug);
		letter-spacing: var(--dyt-tracking-snug);
		color: var(--dyt-cg-title-color, inherit);
	}

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

	.dyt-cg__title a:hover,
	.dyt-cg__title a:focus-visible {
		text-decoration: underline;
		text-underline-offset: 4px;
	}

	.dyt-cg__logo {
		flex: 0 0 auto;
		display: grid;
		place-items: center;
		height: var(--dyt-cg-logo-h, 28px);
		max-width: 40%;
	}

	.dyt-cg__logo img {
		max-height: 100%;
		width: auto;
		max-width: 100%;
		object-fit: contain;
	}

	/* The stand-in icon sits in the same box as a logo would, so swapping one
	   for the other does not move the heading beside it. It takes the card's
	   own tag colour unless the section names one. */
	.dyt-cg__logo--icon {
		width: var(--dyt-cg-logo-h, 28px);
		color: var(--dyt-cg-icon-color, var(--dyt-cg-tag-color, var(--dyt-brand)));
	}

	.dyt-cg__logo svg {
		width: 100%;
		height: 100%;
	}

	.dyt-cg__foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--dyt-space-3);
		margin-top: auto;
	}

	/* Pills gathered beside the chevron rather than pushed to the far side of
	   the card, so the two read as one row of controls. */
	.dyt-cg--metrics-right .dyt-cg__foot {
		justify-content: flex-end;
	}

	.dyt-cg--metrics-left .dyt-cg__foot {
		justify-content: space-between;
	}

	.dyt-cg--metrics-right .dyt-cg__metrics {
		justify-content: flex-end;
	}

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

	.dyt-cg__metric {
		display: inline-flex;
		align-items: baseline;
		gap: 0.4em;
		padding: var(--dyt-space-2) var(--dyt-space-4);
		border: 1px solid var(--dyt-cg-metric-border, var(--dyt-border));
		border-radius: var(--dyt-cg-metric-radius, var(--dyt-radius-pill));
		background: var(--dyt-cg-metric-bg, transparent);
		font-size: var(--dyt-cg-metric-size, var(--dyt-text-sm));
		line-height: 1.2;
	}

	.dyt-cg__metric span {
		color: var(--dyt-text-muted);
	}

	.dyt-cg__toggle {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		padding: 0;
		border: 1px solid var(--dyt-border);
		border-radius: 50%;
		background: transparent;
		color: inherit;
		cursor: pointer;
		transition: transform var(--dyt-duration) var(--dyt-ease), border-color var(--dyt-duration-fast) var(--dyt-ease);
	}

	.dyt-cg__toggle svg {
		width: 16px;
		height: 16px;
	}

	.dyt-cg__toggle:hover {
		border-color: var(--dyt-border-strong);
	}

	.dyt-cg__toggle[aria-expanded="true"] {
		transform: rotate(180deg);
	}

	.dyt-cg__detail {
		border-top: 1px solid var(--dyt-border);
		padding-top: var(--dyt-space-4);
		display: flex;
		flex-direction: column;
		gap: var(--dyt-space-3);
		font-size: var(--dyt-text-base);
		color: var(--dyt-text-secondary);
	}

	.dyt-cg__detail p {
		margin: 0;
	}

	.dyt-cg__more {
		align-self: flex-start;
		font-weight: 600;
		color: var(--dyt-cg-tag-color, var(--dyt-brand));
	}

	.dyt-cg__more-wrap {
		display: flex;
		justify-content: center;
		margin-top: var(--dyt-space-7);
	}

	.dyt-cg__more-btn {
		display: inline-flex;
		align-items: center;
		gap: var(--dyt-space-2);
	}

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

	.dyt-cg__empty {
		margin: var(--dyt-space-8) 0 0;
		text-align: center;
		color: var(--dyt-text-muted);
	}

	.dyt-cg__cta {
		justify-content: center;
		margin-top: var(--dyt-space-7);
	}

	@media (max-width: 64rem) {
		.dyt-cg__grid {
			grid-template-columns: repeat(var(--dyt-cg-cols-t, 1), minmax(0, 1fr));
		}
	}

	@media (max-width: 47.99rem) {
		.dyt-cg__grid {
			grid-template-columns: 1fr;
		}

		.dyt-cg__filters {
			/* A dozen pills stacked five rows deep pushes the work off the
			   screen; one swipeable row keeps the grid in view. */
			flex-wrap: nowrap;
			overflow-x: auto;
			justify-content: flex-start;
			scrollbar-width: none;
			margin-inline: calc(var(--dyt-gutter) * -1);
			padding-inline: var(--dyt-gutter);
		}

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

		.dyt-cg__pill {
			flex: 0 0 auto;
		}

		.dyt-cg__foot {
			flex-wrap: wrap;
		}
	}
	/* ----------------------------------------------------------- Review wall */
	/* Two cards: the platform's own score on the left, one review at a time on
	   the right. Both are held to the same height so the pair reads as a unit
	   however long the quote runs. */
	.dyt-rw {
		display: grid;
		grid-template-columns: var(--dyt-rw-card-w, 320px) minmax(0, 1fr);
		gap: var(--dyt-rw-gap, var(--dyt-space-4));
		margin-top: var(--dyt-space-8);
		align-items: stretch;
	}

	/* With no rating card the reviews take the whole width rather than leaving
	   a column of nothing beside them. */
	.dyt-rw--no-card {
		grid-template-columns: minmax(0, 1fr);
	}

	.dyt-rw__card {
		display: flex;
		flex-direction: column;
		gap: var(--dyt-space-4);
		min-height: var(--dyt-rw-min-h, auto);
		padding: var(--dyt-rw-pad, var(--dyt-space-6));
		border-radius: var(--dyt-rw-radius, var(--dyt-radius-lg));
		/* White by default: review marks are drawn for a light background, and
		   a logo that needs its own card is the usual reason this exists. */
		background: var(--dyt-rw-card-bg, #ffffff);
		color: var(--dyt-rw-card-text, #0b0b12);
	}

	.dyt-rw__card-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--dyt-space-4);
	}

	.dyt-rw__platform-logo img {
		display: block;
		height: var(--dyt-rw-platform-h, 30px);
		width: auto;
		max-width: 100%;
		object-fit: contain;
	}

	.dyt-rw__profile,
	.dyt-rw__source {
		font-size: var(--dyt-text-sm);
		color: var(--dyt-rw-link, inherit);
		text-decoration: underline;
		text-underline-offset: 4px;
		white-space: nowrap;
	}

	.dyt-rw__score,
	.dyt-rw__review-score {
		display: flex;
		align-items: center;
		gap: var(--dyt-space-3);
		margin: 0;
	}

	.dyt-rw__score-value {
		font-size: var(--dyt-rw-score-size, var(--dyt-text-2xl));
		font-weight: 600;
		line-height: 1;
	}

	/* Stars are one character each with a clipped copy on top, so 4.6 shows
	   six tenths of the fifth star instead of rounding to five. */
	.dyt-rw__stars {
		display: inline-flex;
		gap: 2px;
		line-height: 1;
	}

	.dyt-rw__star {
		position: relative;
		color: color-mix(in srgb, currentColor 20%, transparent);
		font-size: var(--dyt-rw-star-size, 22px);
	}

	.dyt-rw__star::before {
		content: "\2605";
		position: absolute;
		inset: 0;
		width: var(--dyt-rw-star-fill, 0%);
		overflow: hidden;
		color: var(--dyt-rw-star, #ff4d4d);
	}

	/* auto on top pins the phrases to the bottom of the card, which is what
	   leaves the gap under the score in the reference. */
	.dyt-rw__pills {
		display: flex;
		flex-wrap: wrap;
		gap: var(--dyt-space-2);
		margin: auto 0 0;
		padding: var(--dyt-space-6) 0 0;
		list-style: none;
	}

	.dyt-rw__pill {
		padding: var(--dyt-space-2) var(--dyt-space-4);
		border-radius: var(--dyt-rw-pill-radius, var(--dyt-radius-pill));
		background: var(--dyt-rw-pill-bg, color-mix(in srgb, currentColor 7%, transparent));
		color: var(--dyt-rw-pill-text, inherit);
		font-size: var(--dyt-rw-pill-size, var(--dyt-text-sm));
		line-height: 1.2;
	}

	.dyt-rw__pill span {
		opacity: 0.55;
	}

	.dyt-rw__pill--more {
		opacity: 0.7;
	}

	/* Both cards end level. The grid stretches its two columns to the taller
	   of them; the height then has to travel down through the slider and the
	   track, or the review would sit short inside a full-height column. */
	.dyt-rw__slider {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.dyt-rw__slider .dyt-slider__track {
		flex: 1 1 auto;
	}

	.dyt-rw__review {
		height: 100%;
	}

	/* One review at a time, and no sliver of the next one.

	   The shared slider track deliberately bleeds into the page gutter so a
	   multi-card row shows a hint of what is coming. Here that hint is just a
	   broken edge: the card is the slide. Pulling the bleed back makes the
	   track exactly as wide as its column, so a full card fills it and the
	   next one sits cleanly outside the clip. */
	.dyt-rw__track {
		grid-auto-columns: 100%;
		margin-inline: 0;
		padding-inline: 0;
		padding-bottom: 0;
		scroll-padding-inline: 0;
	}

	/* The gap inside a review is its own setting: the space between the two
	   cards and the space either side of the divider are different jobs, and
	   one number cannot be right for both. */
	.dyt-rw__review {
		display: grid;
		grid-template-columns: var(--dyt-rw-facts-w, 320px) minmax(0, 1fr);
		gap: var(--dyt-rw-col-gap, var(--dyt-space-7));
		min-height: var(--dyt-rw-min-h, auto);
		padding: var(--dyt-rw-pad, var(--dyt-space-6));
		border-radius: var(--dyt-rw-radius, var(--dyt-radius-lg));
		background: var(--dyt-rw-review-bg, var(--dyt-bg-elevated));
		color: var(--dyt-rw-review-text, inherit);
	}

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

	/* The rule lives on the quote's edge rather than the fact list's: the
	   facts are shorter than the quote as often as not, and the line should
	   run the height of the card either way. */
	.dyt-rw__body {
		display: flex;
		flex-direction: column;
		gap: var(--dyt-space-5);
		min-width: 0;
		padding-left: var(--dyt-rw-col-gap, var(--dyt-space-7));
		border-left: var(--dyt-rw-divider-w, 1px) solid var(--dyt-rw-divider, color-mix(in srgb, currentColor 14%, transparent));
	}

	.dyt-rw__facts {
		display: flex;
		flex-direction: column;
		gap: var(--dyt-space-4);
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: var(--dyt-rw-fact-size, var(--dyt-text-sm));
		color: var(--dyt-rw-meta, inherit);
	}

	.dyt-rw__facts li {
		display: flex;
		align-items: center;
		gap: var(--dyt-space-3);
	}

	.dyt-rw__fact-icon {
		flex: 0 0 auto;
		width: var(--dyt-rw-fact-icon, 18px);
		height: var(--dyt-rw-fact-icon, 18px);
		color: var(--dyt-rw-icon, currentColor);
	}

	.dyt-rw__fact-icon svg {
		width: 100%;
		height: 100%;
	}

	.dyt-rw__quote {
		margin: 0;
		font-size: var(--dyt-rw-quote-size, var(--dyt-text-xl));
		font-weight: 500;
		line-height: var(--dyt-leading-snug);
		color: var(--dyt-rw-quote-color, inherit);
	}

	.dyt-rw__by {
		display: flex;
		flex-direction: column;
		gap: var(--dyt-space-2);
		margin-top: auto;
		font-size: var(--dyt-rw-name-size, var(--dyt-text-base));
	}

	.dyt-rw__client-logo img {
		display: block;
		height: var(--dyt-rw-logo-h, 24px);
		width: auto;
		max-width: 60%;
		object-fit: contain;
		margin-bottom: var(--dyt-space-3);
	}

	.dyt-rw__who,
	.dyt-rw__name {
		margin: 0;
		color: var(--dyt-rw-name-color, var(--dyt-text-muted));
	}

	.dyt-rw__source {
		align-self: flex-start;
		margin-top: var(--dyt-space-2);
	}

	/* Only the review moves; the rating card beside it stays where it is. The
	   controls span both columns so they centre on the pair rather than on the
	   review alone. */
	.dyt-rw .dyt-slider__controls {
		grid-column: 1 / -1;
		margin-top: var(--dyt-space-6);
	}

	.dyt-rw--arrows-center .dyt-slider__controls {
		justify-content: center;
	}

	.dyt-rw--arrows-right .dyt-slider__controls {
		justify-content: flex-end;
	}

	.dyt-rw .dyt-slider__btn {
		width: var(--dyt-rw-arrow-size, 44px);
		height: var(--dyt-rw-arrow-size, 44px);
		color: var(--dyt-rw-arrow-color, var(--dyt-text));
		background: var(--dyt-rw-arrow-bg, transparent);
		border-color: var(--dyt-rw-arrow-border, var(--dyt-border-strong));
	}

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

		.dyt-rw__card,
		.dyt-rw__review {
			min-height: 0;
		}

		/* Stacked, the divider becomes a rule above the quote. */
		.dyt-rw__body {
			padding-left: 0;
			padding-top: var(--dyt-space-5);
			border-left: 0;
			border-top: var(--dyt-rw-divider-w, 1px) solid var(--dyt-rw-divider, color-mix(in srgb, currentColor 14%, transparent));
		}
	}


	/* --------------------------------------------------------- Awards slider */
	.dyt-aw {
		margin-top: var(--dyt-space-8);
		--dyt-aw-per: var(--dyt-aw-per-d, 3);
	}

	.dyt-aw__track {
		grid-auto-columns: calc((100% - (var(--dyt-aw-per) - 1) * var(--dyt-aw-gap, var(--dyt-space-5))) / var(--dyt-aw-per));
		gap: var(--dyt-aw-gap, var(--dyt-space-5));
	}

	.dyt-aw .dyt-slider__track {
		/* The shared track pads itself by a gutter on each side, and the card
		   after the last visible one shows through that padding. On a row of
		   three from four that sliver reads as a misalignment rather than a
		   hint, so the bleed comes off — the same call the blog grid makes. */
		margin-inline: 0;
		padding-inline: 0;
	}

	.dyt-aw__award {
		position: relative;
		display: grid;
		place-items: center;
		min-height: var(--dyt-aw-wreath-size, 300px);
		padding: var(--dyt-space-6);
		color: inherit;
		text-decoration: none;
		text-align: center;
	}

	/* The wreath is scenery: it sits behind the award, takes the text colour
	   faintly, and never intercepts a click meant for the link. */
	.dyt-aw__wreath,
	.dyt-aw--wreath-image .dyt-aw__award::before {
		position: absolute;
		top: 50%;
		left: 50%;
		width: var(--dyt-aw-wreath-size, 300px);
		height: var(--dyt-aw-wreath-size, 300px);
		translate: -50% -50%;
		pointer-events: none;
	}

	.dyt-aw__wreath {
		color: var(--dyt-aw-wreath-color, currentColor);
		opacity: var(--dyt-aw-wreath-op, 0.14);
	}

	.dyt-aw__wreath .dyt-laurel {
		width: 100%;
		height: 100%;
	}

	.dyt-aw--wreath-image .dyt-aw__award::before {
		content: "";
		background: var(--dyt-aw-wreath-image) center / contain no-repeat;
		opacity: var(--dyt-aw-wreath-op, 0.14);
	}

	.dyt-aw__inner {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--dyt-space-4);
		max-width: 68%;
	}

	.dyt-aw__logo img {
		display: block;
		height: var(--dyt-aw-logo-h, 34px);
		width: auto;
		max-width: 100%;
		object-fit: contain;
	}

	.dyt-aw__source {
		font-size: var(--dyt-text-lg);
		font-weight: 600;
	}

	.dyt-aw__title {
		font-size: var(--dyt-aw-title-size, var(--dyt-text-sm));
		line-height: var(--dyt-leading-normal);
		color: var(--dyt-aw-title-color, var(--dyt-text-muted));
	}

	a.dyt-aw__award:hover .dyt-aw__title {
		color: var(--dyt-text);
	}

	.dyt-aw--arrows-center .dyt-slider__controls {
		justify-content: center;
	}

	.dyt-aw--arrows-right .dyt-slider__controls {
		justify-content: flex-end;
	}

	@media (max-width: 64rem) {
		.dyt-aw {
			--dyt-aw-per: var(--dyt-aw-per-t, 2);
		}
	}

	@media (max-width: 47.99rem) {
		.dyt-aw {
			--dyt-aw-per: 1;
			--dyt-aw-wreath-size: min(var(--dyt-aw-wreath-size, 300px), 72vw);
		}
	}

	/* ----------------------------------------------------------- Featured in */
	.dyt-fi {
		display: grid;
		grid-template-columns: var(--dyt-fi-ratio, 50%) minmax(0, 1fr);
		gap: var(--dyt-fi-gap, var(--dyt-space-8));
		align-items: var(--dyt-fi-align, center);
		margin-top: var(--dyt-space-7);
	}

	.dyt-fi--v-start { --dyt-fi-align: start; }
	.dyt-fi--v-end { --dyt-fi-align: end; }
	.dyt-fi--v-center { --dyt-fi-align: center; }

	/* Swapping the side is a matter of which column each part sits in, so the
	   markup stays in reading order for anything that does not see columns. */
	.dyt-fi--logo-right .dyt-fi__mark {
		grid-column: 2;
		grid-row: 1;
	}

	.dyt-fi--logo-right .dyt-fi__body {
		grid-column: 1;
		grid-row: 1;
	}

	.dyt-fi__mark {
		min-width: 0;
	}

	.dyt-fi__logo {
		display: block;
		height: var(--dyt-fi-logo-h, 190px);
		width: auto;
		max-width: 100%;
		object-fit: contain;
		object-position: left center;
		opacity: var(--dyt-fi-logo-op, 1);
	}

	.dyt-fi--logo-right .dyt-fi__logo {
		object-position: right center;
		margin-left: auto;
	}

	/* A single-tone mark can be recoloured to match the section; a full-colour
	   logo must be left alone, which is why this is opt-in. The logo becomes
	   the mask and the colour is what shows through it — painting a colour
	   behind the file would leave the artwork exactly as it was. */
	.dyt-fi__logo--mask {
		display: block;
		height: var(--dyt-fi-logo-h, 190px);
		width: auto;
		aspect-ratio: var(--dyt-fi-logo-ratio, 3 / 1);
		max-width: 100%;
		background-color: var(--dyt-fi-logo-color, currentColor);
		opacity: var(--dyt-fi-logo-op, 1);
		-webkit-mask: var(--dyt-fi-logo-src) left center / contain no-repeat;
		mask: var(--dyt-fi-logo-src) left center / contain no-repeat;
	}

	.dyt-fi--logo-right .dyt-fi__logo--mask {
		-webkit-mask-position: right center;
		mask-position: right center;
		margin-left: auto;
	}

	.dyt-fi__wordmark {
		display: block;
		font-size: clamp(3rem, 8vw, 7rem);
		font-weight: 700;
		line-height: 0.9;
		letter-spacing: var(--dyt-tracking-tight);
		color: var(--dyt-fi-logo-color, currentColor);
		opacity: var(--dyt-fi-logo-op, 1);
	}

	.dyt-fi__body {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--dyt-space-6);
		min-width: 0;
	}

	.dyt-fi__text {
		margin: 0;
		font-size: var(--dyt-fi-text-size, var(--dyt-body-size, var(--dyt-text-base)));
		line-height: var(--dyt-leading-normal);
		color: var(--dyt-fi-text-color, var(--dyt-text-secondary));
		max-width: 52ch;
	}

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

		.dyt-fi--logo-right .dyt-fi__mark,
		.dyt-fi--logo-right .dyt-fi__body {
			grid-column: 1;
			grid-row: auto;
		}

		.dyt-fi__logo {
			height: min(var(--dyt-fi-logo-h, 190px), 28vw);
		}
	}

	/* -------------------------------------------------------- Media mentions */
	.dyt-pr {
		margin-top: var(--dyt-space-7);
		--dyt-pr-per: var(--dyt-pr-per-d, 4);
	}

	.dyt-pr__track {
		grid-auto-columns: calc((100% - (var(--dyt-pr-per) - 1) * var(--dyt-pr-gap, var(--dyt-space-4))) / var(--dyt-pr-per));
		gap: var(--dyt-pr-gap, var(--dyt-space-4));
	}

	.dyt-pr__card {
		display: flex;
		flex-direction: column;
		gap: var(--dyt-space-5);
		height: var(--dyt-pr-card-h, 100%);
		padding: var(--dyt-pr-pad, var(--dyt-space-6));
		border: 1px solid var(--dyt-pr-card-border, transparent);
		border-radius: var(--dyt-pr-radius, var(--dyt-radius-lg));
		background: var(--dyt-pr-card-bg, var(--dyt-bg-elevated));
		color: inherit;
		text-decoration: none;
		transition: border-color var(--dyt-duration) var(--dyt-ease), background-color var(--dyt-duration) var(--dyt-ease);
	}

	a.dyt-pr__card:hover {
		border-color: var(--dyt-border-strong);
	}

	.dyt-pr__logo img {
		display: block;
		height: var(--dyt-pr-logo-h, 28px);
		width: auto;
		max-width: 100%;
		object-fit: contain;
		object-position: left center;
	}

	.dyt-pr__publication {
		font-weight: 600;
	}

	.dyt-pr__title {
		font-size: var(--dyt-pr-title-size, var(--dyt-text-base));
		line-height: var(--dyt-leading-snug);
		color: var(--dyt-pr-title-color, var(--dyt-text-secondary));
	}

	a.dyt-pr__card:hover .dyt-pr__title {
		color: var(--dyt-text);
	}

	/* Heading with a mark beside it. */
	.dyt-pr__head {
		display: flex;
		align-items: center;
		gap: var(--dyt-space-4);
	}

	.dyt-pr__head--center {
		justify-content: center;
	}

	.dyt-pr__head .dyt-section-header {
		margin-bottom: 0;
	}

	.dyt-pr__head-media {
		flex: 0 0 auto;
		display: grid;
		place-items: center;
		width: var(--dyt-pr-head-media, 40px);
		height: var(--dyt-pr-head-media, 40px);
		color: var(--dyt-heading-color, inherit);
	}

	.dyt-pr__head-media img,
	.dyt-pr__head-media svg {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	/* Continuous scroll: the marquee measures a row of fixed-width cards, so
	   each card is given a width of its own rather than a share of a column
	   count — there are no columns to share. */
	.dyt-pr--marquee {
		--dyt-marquee-gap: var(--dyt-pr-gap, var(--dyt-space-4));

		margin-top: var(--dyt-space-7);
	}

	.dyt-pr--marquee .dyt-pr__item {
		width: var(--dyt-pr-card-w, 300px);
	}

	.dyt-pr--marquee .dyt-pr__card {
		height: var(--dyt-pr-card-h, 100%);
	}

	.dyt-pr--marquee .dyt-marquee__track {
		align-items: stretch;
	}

	.dyt-pr--arrows-right .dyt-slider__controls {
		justify-content: flex-end;
	}

	.dyt-pr--arrows-center .dyt-slider__controls {
		justify-content: center;
	}

	@media (max-width: 64rem) {
		.dyt-pr {
			--dyt-pr-per: var(--dyt-pr-per-t, 2);
		}
	}

	@media (max-width: 47.99rem) {
		.dyt-pr {
			--dyt-pr-per: 1;
		}
	}

	/* ----------------------------------------------------------------- Video */
	/* Shared by Video Hero and Video & Text. The facade holds the poster and a
	   play button; app.js swaps in the real player on the first press, which is
	   what keeps an unplayed YouTube embed from costing anything. */
	.dyt-video {
		position: relative;
		overflow: hidden;
		background: var(--dyt-bg-inset, #0b1220);
	}

	.dyt-video__poster,
	.dyt-video__el {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.dyt-video__el--frame {
		border: 0;
	}

	.dyt-video__play {
		position: absolute;
		inset: 0;
		display: grid;
		place-items: center;
		width: 100%;
		height: 100%;
		padding: 0;
		border: 0;
		background: transparent;
		color: #fff;
		cursor: pointer;
	}

	.dyt-video__play::before {
		content: "";
		position: absolute;
		inset: 0;
		background: rgb(0 0 0 / 25%);
		transition: background var(--dyt-duration-fast, 150ms) var(--dyt-ease, ease);
	}

	.dyt-video__play-icon {
		position: relative;
		width: 4rem;
		height: 4rem;
		padding: 1rem;
		border-radius: var(--dyt-radius-pill, 999px);
		background: var(--dyt-brand, #026fcc);
		box-shadow: 0 10px 30px rgb(0 0 0 / 35%);
		transition: transform var(--dyt-duration-fast, 150ms) var(--dyt-ease, ease);
	}

	.dyt-video__play:hover::before,
	.dyt-video__play:focus-visible::before {
		background: rgb(0 0 0 / 10%);
	}

	.dyt-video__play:hover .dyt-video__play-icon,
	.dyt-video__play:focus-visible .dyt-video__play-icon {
		transform: scale(1.08);
	}

	.dyt-video--bg {
		position: absolute;
		inset: 0;
		background: none;
	}

	.dyt-video--bg .dyt-video__el {
		position: absolute;
		inset: 0;
	}

	/* An iframe cannot object-fit, so it is oversized and centred instead. */
	.dyt-video--bg .dyt-video__el--frame {
		top: 50%;
		left: 50%;
		inset: auto;
		width: 100vw;
		height: 56.25vw;
		min-width: 177.78vh;
		min-height: 100%;
		transform: translate(-50%, -50%);
		pointer-events: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.dyt-video__play-icon {
			transition: none;
		}
	}

	/* ------------------------------------------------------------ Video Hero */
	.dyt-vhero {
		position: relative;
		display: grid;
		align-items: center;
		min-height: var(--dyt-vhero-h, 620px);
		overflow: hidden;
		isolation: isolate;
	}

	.dyt-vhero__wash {
		position: absolute;
		inset: 0;
		z-index: 1;
		background: var(--dyt-vhero-overlay, rgb(11 18 32 / 55%));
	}

	.dyt-vhero__inner {
		position: relative;
		z-index: 2;
		display: grid;
		justify-items: center;
		gap: var(--dyt-space-5);
		text-align: center;
		color: #fff;
		padding-block: var(--dyt-space-10);
	}

	.dyt-vhero--left .dyt-vhero__inner {
		justify-items: start;
		text-align: left;
	}

	.dyt-vhero__eyebrow {
		margin: 0;
		font-size: var(--dyt-text-sm);
		font-weight: 600;
		letter-spacing: var(--dyt-tracking-wide, 0.08em);
		text-transform: uppercase;
		opacity: 0.85;
	}

	.dyt-vhero__title {
		margin: 0;
		max-width: 22ch;
		color: inherit;
		font-size: clamp(2.25rem, 5vw, 4rem);
		line-height: var(--dyt-leading-tight, 1.1);
	}

	.dyt-vhero--center .dyt-vhero__title {
		max-width: 20ch;
	}

	.dyt-vhero__title em {
		font-style: normal;
		color: var(--dyt-accent, var(--dyt-brand));
	}

	.dyt-vhero__intro {
		margin: 0;
		max-width: 56ch;
		font-size: var(--dyt-text-lg);
		line-height: var(--dyt-leading-relaxed, 1.65);
		opacity: 0.9;
	}

	.dyt-vhero__actions {
		margin-top: var(--dyt-space-3);
	}

	@media (max-width: 47.99rem) {
		.dyt-vhero {
			min-height: var(--dyt-vhero-h-m, 460px);
		}

		/* Phones get the still by default: a background loop on mobile data is
		   a cost the visitor did not agree to. */
		.dyt-vhero--poster-mobile .dyt-video__el:not(img) {
			display: none;
		}

		.dyt-vhero--poster-mobile .dyt-video--bg {
			background-size: cover;
			background-position: center;
		}
	}

	/* ---------------------------------------------------------- Video & Text */
	.dyt-vtext {
		display: grid;
		gap: var(--dyt-vtext-gap, 56px);
		align-items: center;
		grid-template-columns: 1fr;
	}

	.dyt-vtext__media .dyt-video {
		aspect-ratio: var(--dyt-vtext-ratio, 16 / 9);
		border-radius: var(--dyt-vtext-radius, 24px);
	}

	.dyt-vtext__title {
		margin: 0 0 var(--dyt-space-4);
		font-size: clamp(1.75rem, 3vw, 2.5rem);
		line-height: var(--dyt-leading-snug, 1.25);
	}

	.dyt-vtext__title em {
		font-style: normal;
		color: var(--dyt-accent, var(--dyt-brand));
	}

	.dyt-vtext__intro {
		margin: 0 0 var(--dyt-space-4);
		color: var(--dyt-text-secondary);
		font-size: var(--dyt-text-lg);
		line-height: var(--dyt-leading-relaxed, 1.65);
	}

	.dyt-vtext__actions {
		margin-top: var(--dyt-space-6);
	}

	@media (min-width: 48rem) {
		.dyt-vtext {
			grid-template-columns: 1fr 1fr;
		}

		.dyt-vtext--right .dyt-vtext__media {
			order: 2;
		}
	}

	/* --------------------------------------------------------------- Gallery */
	.dyt-gallery {
		display: grid;
		gap: var(--dyt-gal-gap, 16px);
		grid-template-columns: repeat(var(--dyt-gal-cols-m, 1), minmax(0, 1fr));
	}

	.dyt-gallery__item {
		margin: 0;
		min-width: 0;
	}

	.dyt-gallery__open {
		display: block;
		width: 100%;
		padding: 0;
		border: 0;
		background: none;
		cursor: zoom-in;
	}

	.dyt-gallery__img {
		display: block;
		width: 100%;
		height: auto;
		border-radius: var(--dyt-gal-radius, 16px);
		transition: transform var(--dyt-duration, 250ms) var(--dyt-ease, ease);
	}

	.dyt-gallery--fixed .dyt-gallery__img {
		aspect-ratio: var(--dyt-gal-ratio, 1 / 1);
		height: 100%;
		object-fit: cover;
	}

	.dyt-gallery__caption {
		margin-top: var(--dyt-space-2);
		color: var(--dyt-text-secondary);
		font-size: var(--dyt-text-sm);
	}

	.dyt-gallery__open:hover .dyt-gallery__img,
	.dyt-gallery__open:focus-visible .dyt-gallery__img {
		transform: scale(1.03);
	}

	@media (min-width: 48rem) {
		.dyt-gallery {
			grid-template-columns: repeat(var(--dyt-gal-cols-t, 2), minmax(0, 1fr));
		}
	}

	@media (min-width: 64rem) {
		.dyt-gallery {
			grid-template-columns: repeat(var(--dyt-gal-cols-d, 3), minmax(0, 1fr));
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.dyt-gallery__img {
			transition: none;
		}

		.dyt-gallery__open:hover .dyt-gallery__img {
			transform: none;
		}
	}

	/* -------------------------------------------------------------- Lightbox */
	.dyt-lightbox {
		position: fixed;
		inset: 0;
		z-index: var(--dyt-z-modal, 900);
		display: grid;
		place-items: center;
		padding: var(--dyt-space-5);
		background: rgb(6 10 18 / 92%);
	}

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

	.dyt-lightbox__img {
		max-width: min(100%, 1400px);
		max-height: 82vh;
		border-radius: var(--dyt-radius-md, 12px);
		object-fit: contain;
	}

	.dyt-lightbox__caption {
		margin-top: var(--dyt-space-4);
		color: rgb(255 255 255 / 80%);
		font-size: var(--dyt-text-sm);
		text-align: center;
	}

	.dyt-lightbox__close,
	.dyt-lightbox__nav {
		position: absolute;
		display: grid;
		place-items: center;
		width: 3rem;
		height: 3rem;
		border: 1px solid rgb(255 255 255 / 25%);
		border-radius: var(--dyt-radius-pill, 999px);
		background: rgb(255 255 255 / 10%);
		color: #fff;
		font-size: 1.5rem;
		line-height: 1;
		cursor: pointer;
	}

	.dyt-lightbox__close {
		top: var(--dyt-space-5);
		right: var(--dyt-space-5);
	}

	.dyt-lightbox__nav--prev {
		left: var(--dyt-space-5);
	}

	.dyt-lightbox__nav--next {
		right: var(--dyt-space-5);
	}

	.dyt-lightbox__close:hover,
	.dyt-lightbox__nav:hover {
		background: rgb(255 255 255 / 22%);
	}

	/* ------------------------------------------------------------- Team Grid */
	.dyt-team-grid {
		display: grid;
		gap: var(--dyt-tg-gap, 32px);
		grid-template-columns: repeat(var(--dyt-tg-cols-m, 1), minmax(0, 1fr));
	}

	@media (min-width: 48rem) {
		.dyt-team-grid {
			grid-template-columns: repeat(var(--dyt-tg-cols-t, 2), minmax(0, 1fr));
		}
	}

	@media (min-width: 64rem) {
		.dyt-team-grid {
			grid-template-columns: repeat(var(--dyt-tg-cols-d, 4), minmax(0, 1fr));
		}
	}

	/* ------------------------------------------------------- Content Columns */
	/* Flex rather than grid tracks: the widths live on the columns themselves,
	   which is what lets one row mix a third and two thirds without the
	   container having to know about it. */
	.dyt-cc {
		display: flex;
		flex-wrap: wrap;
		gap: var(--dyt-cc-gap, 40px);
		align-items: stretch;
	}

	.dyt-cc__col {
		flex: 1 1 0;
		min-width: 0;
		background: var(--dyt-cc-bg, transparent);
		border-radius: var(--dyt-cc-radius, 0);
	}

	/* Padding only asserts itself once there is a background to hold it. */
	.dyt-cc__col[style*="--dyt-cc-bg"] {
		padding: var(--dyt-cc-pad, 32px);
	}

	.dyt-cc__col--25 {
		flex: 0 1 calc(25% - var(--dyt-cc-gap, 40px) * 0.75);
	}

	.dyt-cc__col--33 {
		flex: 0 1 calc(33.333% - var(--dyt-cc-gap, 40px) * 0.667);
	}

	.dyt-cc__col--50 {
		flex: 0 1 calc(50% - var(--dyt-cc-gap, 40px) * 0.5);
	}

	.dyt-cc__col--66 {
		flex: 0 1 calc(66.666% - var(--dyt-cc-gap, 40px) * 0.333);
	}

	.dyt-cc__col--75 {
		flex: 0 1 calc(75% - var(--dyt-cc-gap, 40px) * 0.25);
	}

	.dyt-cc__col--center {
		align-self: center;
	}

	.dyt-cc__col--bottom {
		align-self: flex-end;
	}

	.dyt-cc--dividers .dyt-cc__col + .dyt-cc__col {
		border-left: 1px solid var(--dyt-border);
		padding-left: var(--dyt-cc-gap, 40px);
	}

	/* --------------------------------------------------- Blocks in a column */
	.dyt-cc__block + .dyt-cc__block {
		margin-top: var(--dyt-space-4);
	}

	.dyt-cc__block--left {
		text-align: left;
	}

	.dyt-cc__block--center {
		text-align: center;
	}

	.dyt-cc__block--right {
		text-align: right;
	}

	.dyt-cc__heading {
		margin: 0;
		line-height: var(--dyt-leading-snug, 1.25);
	}

	.dyt-cc__heading em {
		font-style: normal;
		color: var(--dyt-accent, var(--dyt-brand));
	}

	.dyt-cc .dyt-prose {
		margin: 0;
	}

	.dyt-cc .dyt-prose > :first-child {
		margin-top: 0;
	}

	.dyt-cc .dyt-prose > :last-child {
		margin-bottom: 0;
	}

	.dyt-cc__spacer {
		flex: none;
	}

	.dyt-cc__quote {
		margin: 0;
		padding-left: var(--dyt-space-5);
		border-left: 3px solid var(--dyt-cc-accent, var(--dyt-brand));
	}

	.dyt-cc__quote blockquote {
		margin: 0;
		color: var(--dyt-text);
		font-size: var(--dyt-text-lg);
		line-height: var(--dyt-leading-relaxed, 1.65);
	}

	.dyt-cc__quote figcaption {
		display: flex;
		flex-wrap: wrap;
		gap: 0 var(--dyt-space-2);
		margin-top: var(--dyt-space-3);
		font-size: var(--dyt-text-sm);
	}

	.dyt-cc__quote-name {
		font-weight: 600;
	}

	.dyt-cc__quote-role {
		color: var(--dyt-text-secondary);
	}

	.dyt-cc__figure {
		margin: 0;
	}

	.dyt-cc__img {
		display: block;
		width: 100%;
		height: auto;
		border-radius: var(--dyt-cc-img-radius, var(--dyt-radius-md, 12px));
	}

	.dyt-cc__figure--fixed .dyt-cc__img {
		aspect-ratio: var(--dyt-cc-img-ratio, 1 / 1);
		object-fit: cover;
	}

	.dyt-cc__caption {
		margin-top: var(--dyt-space-2);
		color: var(--dyt-text-secondary);
		font-size: var(--dyt-text-sm);
	}

	/* ------------------------------------------- Content Columns responsive */
	@media (max-width: 64rem) {
		.dyt-cc--t-two > .dyt-cc__col {
			flex: 0 1 calc(50% - var(--dyt-cc-gap, 40px) * 0.5);
		}

		.dyt-cc--t-stack > .dyt-cc__col {
			flex: 1 1 100%;
		}

		.dyt-cc--t-stack.dyt-cc--dividers .dyt-cc__col + .dyt-cc__col {
			border-left: 0;
			padding-left: 0;
		}
	}

	@media (max-width: 47.99rem) {
		.dyt-cc--m-two > .dyt-cc__col {
			flex: 0 1 calc(50% - var(--dyt-cc-gap, 40px) * 0.5);
		}

		.dyt-cc--m-stack > .dyt-cc__col {
			flex: 1 1 100%;
		}

		/* A vertical rule between stacked columns is just a stray line. */
		.dyt-cc--m-stack.dyt-cc--dividers .dyt-cc__col + .dyt-cc__col {
			border-left: 0;
			padding-left: 0;
		}
	}

	/* ------------------------------------------- Sliders on a phone */
	/* The track is normally pulled out to the screen edges and padded back in,
	   which leaves a gutter-wide strip on each side for the next card to show
	   through. That hint is the point on a desktop row of four. On a phone
	   showing one card it reads as a slide that failed to line up, so the bleed
	   comes off and the card sits exactly in the container.
	   Kept to the shared track rather than one section, because all six sliders
	   that use it had the same edge. */
	@media (max-width: 47.99rem) {
		.dyt-slider__track {
			margin-inline: 0;
			padding-inline: 0;
			scroll-padding-inline: 0;
		}

		/* Arrows go under the slider, centred. Two sections pin theirs to the
		   right with a heavier selector, so those are named here to match. */
		.dyt-slider .dyt-slider__controls,
		.dyt-rw--arrows-right .dyt-slider__controls,
		.dyt-aw--arrows-right .dyt-slider__controls,
		.dyt-pr--arrows-right .dyt-slider__controls {
			justify-content: center;
			margin-top: var(--dyt-space-5);
		}
	}
}