/* ============================================================
   edit.css — hand-written styles that sit OUTSIDE the Tailwind
   build (styles/theme.css). Loaded after theme.css.

   Add new hand-written component styles below, newest last,
   each under its own banner comment.
   ============================================================ */


/* ------------------------------------------------------------
   Home hero promo card
   Figma: MaryWorkStation (Copy) — node 5049:1801
   Markup: parts/section-hero-promo.php

   All geometry is calc(var(--u) * N) where N is the raw Figma
   pixel value and --u is the scale factor. The design artboard
   is 762px wide; --u: 0.703 renders the card at 536px.

   Nudge the card over the hero image with --promo-right and
   --promo-bottom.
   ------------------------------------------------------------ */

.ttc-promo {
	--u: 0.703px;
	--promo-right: 1rem; /* matches .container padding-inline */
	--promo-bottom: 6%;

	--promo-navy: #20394e;
	--promo-purple: #6063ac;
	--promo-red: #ff2d07;
	--promo-cyan: #41c0e8;

	/* Floats over the hero at every width, anchored to .container
	   (see parts/section-hero.php) — bottom: 0 is the image's bottom
	   edge, because the card itself is out of flow. */
	position: absolute;
	right: var(--promo-right);
	bottom: var(--promo-bottom);
	z-index: 5;
	width: 100%;
	max-width: calc(var(--u) * 762);
	font-family: var(--font-articulat, "articulat-cf", sans-serif);
	font-style: normal;
}

/* Room for the SALE badge, which overhangs the top border. */
.ttc-promo__inner {
	position: relative;
	padding-top: calc(var(--u) * 24);
}

.ttc-promo__card {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	background: var(--promo-navy);
	border: calc(var(--u) * 8) solid var(--promo-red);
	border-radius: calc(var(--u) * 30);
	overflow: hidden;
}

/* SALE badge — sits over the card's top border. */
.ttc-promo__badge {
	position: absolute;
	top: 0;
	left: calc(var(--u) * 348);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--u) * 90);
	height: calc(var(--u) * 40);
	background: #ff2c07;
	border-radius: calc(var(--u) * 130);
	color: #fff;
	font-size: calc(var(--u) * 23.094);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.03em;
	text-transform: capitalize;
}

/* Angled purple panel behind the price and CTA. */
.ttc-promo__panel {
	position: absolute;
	top: calc(var(--u) * -15);
	left: calc(var(--u) * 361);
	width: calc(var(--u) * 733);
	height: calc(var(--u) * 218);
	background: var(--promo-purple);
	clip-path: polygon(8.5576% 0, 0 100%, 100% 100%, 100% 0);
	pointer-events: none;
}

/* Headline block. */
.ttc-promo__copy {
	position: absolute;
	top: calc(var(--u) * 34);
	left: calc(var(--u) * 29);
	width: calc(var(--u) * 320);
	margin: 0;
	color: #fff;
	font-size: calc(var(--u) * 30.06);
	font-weight: 600;
	line-height: 0.9;
	letter-spacing: -0.03em;
	text-transform: capitalize;
}

.ttc-promo__copy em {
	display: block;
	color: var(--promo-cyan);
	font-style: normal;
	font-weight: 800;
}

/* White course pill. */
.ttc-promo__pill {
	position: absolute;
	top: calc(var(--u) * 124);
	left: calc(var(--u) * 29);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: calc(var(--u) * 4.44) calc(var(--u) * 15.097);
	background: #fff;
	border-radius: calc(var(--u) * 41.739);
	color: var(--promo-navy);
	font-size: calc(var(--u) * 14.65);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.03em;
	white-space: nowrap;
}

/* SAVE $75 roundel, straddling the panel's diagonal edge. */
.ttc-promo__save {
	position: absolute;
	top: calc(var(--u) * 38.11);
	left: calc(var(--u) * 332.11);
	z-index: 1;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: calc(var(--u) * 119.78);
	height: calc(var(--u) * 119.78);
	background: var(--promo-purple);
	border: calc(var(--u) * 5.89) solid var(--promo-navy);
	border-radius: 50%;
	color: #fff;
	font-size: calc(var(--u) * 32.709);
	line-height: 0.84;
	letter-spacing: -0.05em;
	text-align: center;
	text-transform: capitalize;
}

.ttc-promo__save b {
	font-weight: 800;
}

.ttc-promo__save span {
	font-weight: 400;
}

/* Price. */
.ttc-promo__price {
	position: absolute;
	top: calc(var(--u) * 36.88);
	left: calc(var(--u) * 466.5);
	z-index: 1;
	margin: 0;
	color: #fff;
	font-size: calc(var(--u) * 72.786);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.03em;
	white-space: nowrap;
}

.ttc-promo__price sup {
	position: relative;
	top: calc(var(--u) * -12);
	font-size: calc(var(--u) * 23.863);
	vertical-align: baseline;
}

/* WAS $464, ruled above and below. */
.ttc-promo__was {
	position: absolute;
	top: calc(var(--u) * 60.54);
	left: calc(var(--u) * 610.47);
	z-index: 1;
	box-sizing: border-box;
	width: calc(var(--u) * 116.53);
	margin: 0;
	padding: calc(var(--u) * 1) 0 calc(var(--u) * 3.66);
	border-top: calc(var(--u) * 1.59) solid #fff;
	border-bottom: calc(var(--u) * 1.59) solid #fff;
	color: #fff;
	font-size: calc(var(--u) * 23.863);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.03em;
	white-space: nowrap;
}

/* Enrol Now button. */
.ttc-promo__cta {
	position: absolute;
	top: calc(var(--u) * 103.16);
	left: calc(var(--u) * 461.95);
	z-index: 1;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--u) * 262.805);
	height: calc(var(--u) * 41.96);
	padding: 0 calc(var(--u) * 15.539);
	background: #fff;
	border-radius: calc(var(--u) * 11.654);
	color: var(--promo-purple);
	font-size: calc(var(--u) * 15.539);
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ttc-promo__cta:hover,
.ttc-promo__cta:focus-visible {
	background: var(--promo-cyan);
	color: var(--promo-navy);
}

/* Desktop: the two wrappers are layout-transparent, so every card
   element positions itself against .ttc-promo__card directly.

   1280px is the floor for this layout — any narrower and the pill /
   roundel type scales below a legible size, so the stacked variant
   takes over instead. */
@media (min-width: 1280px) {

	.ttc-promo__left,
	.ttc-promo__right {
		display: contents;
	}

	.ttc-promo__card {
		height: calc(var(--u) * 188);
	}

	.ttc-promo {
		left: auto;
		width: calc(var(--u) * 762);
	}
}

@media (min-width: 1600px) {
	.ttc-promo {
		--u: 0.78px;
	}
}

/* ---- Stacked layout below 1280px ---------------------------------
   The Figma artboard is desktop-only. At narrower widths the design is
   re-flowed into a navy block over a purple block so the type stays
   legible instead of scaling down into nothing.
   ------------------------------------------------------------------ */
@media (max-width: 1279.98px) {

	.ttc-promo {
		--u: 1px;
		--promo-bottom: calc(var(--u) * 14);

		left: var(--promo-right);
		width: auto;
		max-width: calc(var(--u) * 460);
		margin-inline: auto;
	}

	.ttc-promo__inner {
		padding-top: calc(var(--u) * 13);
	}

	.ttc-promo__card {
		display: flex;
		flex-direction: column;
		border-width: calc(var(--u) * 5);
		border-radius: calc(var(--u) * 20);
	}

	.ttc-promo__badge {
		left: 50%;
		transform: translateX(-50%);
		width: calc(var(--u) * 68);
		height: calc(var(--u) * 26);
		font-size: calc(var(--u) * 15);
	}

	.ttc-promo__panel {
		display: none;
	}

	.ttc-promo__left {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: calc(var(--u) * 7);
		padding: calc(var(--u) * 11) calc(var(--u) * 13) calc(var(--u) * 11);
	}

	/* roundel | price | was
	   roundel |    CTA     */
	.ttc-promo__right {
		display: grid;
		grid-template-columns: auto auto 1fr;
		align-items: center;
		gap: calc(var(--u) * 8) calc(var(--u) * 10);
		padding: calc(var(--u) * 10) calc(var(--u) * 13);
		background: var(--promo-purple);
	}

	.ttc-promo__copy,
	.ttc-promo__pill,
	.ttc-promo__save,
	.ttc-promo__price,
	.ttc-promo__was,
	.ttc-promo__cta {
		position: static;
		top: auto;
		left: auto;
	}

	.ttc-promo__copy {
		width: 100%;
		font-size: calc(var(--u) * 19);
	}

	.ttc-promo__pill {
		padding: calc(var(--u) * 3) calc(var(--u) * 10);
		font-size: calc(var(--u) * 10.5);
		line-height: 1.4;
		white-space: normal;
	}

	.ttc-promo__save {
		grid-area: 1 / 1 / 3 / 2;
		width: calc(var(--u) * 62);
		height: calc(var(--u) * 62);
		border-width: calc(var(--u) * 3);
		font-size: calc(var(--u) * 17);
	}

	.ttc-promo__price {
		grid-area: 1 / 2 / 2 / 3;
		font-size: calc(var(--u) * 38);
	}

	.ttc-promo__price sup {
		top: calc(var(--u) * -7);
		font-size: calc(var(--u) * 14);
	}

	/* Beside the price, not under it — keeps the card short enough to
	   sit over the image on a phone. */
	.ttc-promo__was {
		grid-area: 1 / 3 / 2 / 4;
		justify-self: start;
		width: auto;
		padding: calc(var(--u) * 1) 0 calc(var(--u) * 2);
		font-size: calc(var(--u) * 13);
	}

	.ttc-promo__cta {
		grid-area: 2 / 2 / 3 / 4;
		width: 100%;
		height: calc(var(--u) * 34);
		border-radius: calc(var(--u) * 8);
		font-size: calc(var(--u) * 13.5);
	}
}


/* 1024–1279: the hero is already two columns but too narrow for the
   overlay layout, so the compact card is right-aligned over the image
   instead of centred — centring would drop it on the hero buttons. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
	.ttc-promo {
		left: auto;
		width: calc(var(--u) * 470);
		max-width: calc(100% - var(--promo-right) * 2);
		margin-inline: 0;
	}
}


/* ------------------------------------------------------------
   Inner-hero variant (.ttc-promo--inner)
   Markup: parts/section-hero-inner.php

   That hero has no banner image and, below 1280px, is a single
   column ending in the location/date enrol row — floating the card
   there would cover it. So the card only floats at 1280px and up,
   where the hero has genuine empty space to its right; below that
   it drops into normal flow under the enrol row.
   ------------------------------------------------------------ */

@media (max-width: 1279.98px) {
	.ttc-promo--inner {
		position: static;
		margin-top: calc(var(--u) * 28);
	}
}

/* 1280–1599 the hero copy column is 700px wide, so the full-size card
   would clip it. Scale the card down until the 2xl copy column
   narrows to 587px and there is room again. */
@media (min-width: 1280px) and (max-width: 1599.98px) {
	.ttc-promo--inner {
		--u: 0.62px;
	}
}


/* ------------------------------------------------------------
   Popular Training Courses promo banner (.ttc-banner)
   Figma: MaryWorkStation (Copy) — node 5049:197
   Markup: parts/section-promo-banner.php

   Design artboard is 1439 × 187 and spans the full container, so
   --u is derived from the container's own width via cqw rather
   than fixed per breakpoint. Same convention as .ttc-promo:
   every value is calc(var(--u) * <raw Figma px>).
   ------------------------------------------------------------ */

.ttc-banner {
	container-type: inline-size;
	width: 100%;
	margin-bottom: 2rem;
	font-family: var(--font-articulat, "articulat-cf", sans-serif);
	font-style: normal;
}

.ttc-banner__card {
	--u: min(1px, 100cqw / 1439);

	--promo-navy: #20394e;
	--promo-purple: #6063ac;
	--promo-cyan: #41c0e8;

	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: calc(var(--u) * 187);
	background: var(--promo-navy);
	border-radius: calc(var(--u) * 30);
	overflow: hidden;
}

/* Angled purple panel behind the price and CTA. */
.ttc-banner__panel {
	position: absolute;
	top: calc(var(--u) * -11.58);
	left: calc(var(--u) * 841.5);
	width: calc(var(--u) * 614);
	height: calc(var(--u) * 217);
	background: var(--promo-purple);
	clip-path: polygon(8.5576% 0, 0 100%, 100% 100%, 100% 0);
	pointer-events: none;
}

/* Corner ribbon. Exported from Figma because the shape carries two
   drop shadows that are not worth reproducing by hand. */
.ttc-banner__ribbon {
	position: absolute;
	top: calc(var(--u) * -7);
	left: calc(var(--u) * -45.49);
	width: calc(var(--u) * 269.976);
	height: calc(var(--u) * 250);
	background: url("../images/lib/promo/sale-ribbon.svg") no-repeat 0 0 / 100% 100%;
	pointer-events: none;
}

.ttc-banner__ribbon-label {
	position: absolute;
	top: calc(var(--u) * 11.42);
	left: calc(var(--u) * 20.5);
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--u) * 136.762);
	height: calc(var(--u) * 154.092);
	color: #fff;
	font-size: calc(var(--u) * 56.909);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0.01em;
	white-space: nowrap;
	transform: rotate(-53.59deg);
	pointer-events: none;
}

/* Headline — centred over the navy half. */
.ttc-banner__copy {
	position: absolute;
	top: calc(var(--u) * 32.42);
	left: calc(var(--u) * 492.5);
	/* Figma box is 560; widened to 620 so the second line still fits on
	   one line if the rendered font is a touch wider than Articulat CF.
	   620 centred on 492.5 stops just short of the roundel at 807.5. */
	width: calc(var(--u) * 620);
	margin: 0;
	color: #fff;
	font-size: calc(var(--u) * 44.532);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.03em;
	text-align: center;
	text-transform: capitalize;
	transform: translateX(-50%);
}

.ttc-banner__line {
	display: block;
	text-wrap: balance;
	font-weight: 600;
	letter-spacing: calc(var(--u) * -0.32);
}

.ttc-banner__copy em {
	color: var(--promo-cyan);
	font-style: normal;
	font-weight: 800;
	letter-spacing: -0.03em;
}

/* White course pill. */
.ttc-banner__pill {
	position: absolute;
	top: calc(var(--u) * 124.48);
	left: calc(var(--u) * 320.11);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: calc(var(--u) * 5.256) calc(var(--u) * 17.87);
	background: #fff;
	border-radius: calc(var(--u) * 49.406);
	color: var(--promo-navy);
	font-size: calc(var(--u) * 17.341);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.03em;
	white-space: nowrap;
}

/* SAVE $75 roundel, straddling the panel's diagonal edge. */
.ttc-banner__save {
	position: absolute;
	top: calc(var(--u) * 32.42);
	left: calc(var(--u) * 807.5);
	z-index: 1;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: calc(var(--u) * 122);
	height: calc(var(--u) * 122);
	background: var(--promo-purple);
	border: calc(var(--u) * 6) solid var(--promo-navy);
	border-radius: 50%;
	color: #fff;
	font-size: calc(var(--u) * 33.315);
	line-height: 0.84;
	letter-spacing: -0.05em;
	text-align: center;
	text-transform: capitalize;
}

.ttc-banner__save b {
	font-weight: 800;
}

.ttc-banner__save span {
	font-weight: 400;
}

/* Price. */
.ttc-banner__price {
	position: absolute;
	top: calc(var(--u) * 20.42);
	left: calc(var(--u) * 1021.5);
	z-index: 1;
	margin: 0;
	color: #fff;
	font-size: calc(var(--u) * 87.77);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.03em;
	white-space: nowrap;
}

.ttc-banner__price sup {
	position: relative;
	top: calc(var(--u) * -14);
	font-size: calc(var(--u) * 28.776);
	vertical-align: baseline;
}

/* WAS $464, ruled above and below. */
.ttc-banner__was {
	position: absolute;
	top: calc(var(--u) * 48.96);
	left: calc(var(--u) * 1195.11);
	z-index: 1;
	box-sizing: border-box;
	width: calc(var(--u) * 140.52);
	margin: 0;
	padding: calc(var(--u) * 1.2) 0 calc(var(--u) * 3.8);
	border-top: calc(var(--u) * 1.92) solid #fff;
	border-bottom: calc(var(--u) * 1.92) solid #fff;
	color: #fff;
	font-size: calc(var(--u) * 28.776);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.03em;
	white-space: nowrap;
}

/* Enrol Now button. */
.ttc-banner__cta {
	position: absolute;
	top: calc(var(--u) * 102.92);
	left: calc(var(--u) * 1021.5);
	z-index: 1;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--u) * 314);
	height: calc(var(--u) * 48);
	padding: 0 calc(var(--u) * 17.381);
	background: #fff;
	border-radius: calc(var(--u) * 13.036);
	color: var(--promo-purple);
	font-size: calc(var(--u) * 17.381);
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ttc-banner__cta:hover,
.ttc-banner__cta:focus-visible {
	background: var(--promo-cyan);
	color: var(--promo-navy);
}

@media (min-width: 1024px) {

	.ttc-banner {
		margin-bottom: 3rem;
	}

	.ttc-banner__left,
	.ttc-banner__right {
		display: contents;
	}
}

/* ---- Stacked layout below 1024px ---------------------------------
   Below this the artboard's type scales under ~12px, so the banner
   re-flows into a navy block over a purple block. The ribbon shrinks
   to a corner flash rather than a full diagonal band.
   ------------------------------------------------------------------ */
@media (max-width: 1023.98px) {

	.ttc-banner__card {
		--u: 1px;

		display: flex;
		flex-direction: column;
		height: auto;
		border-radius: calc(var(--u) * 20);
	}

	.ttc-banner__panel {
		display: none;
	}

	.ttc-banner__ribbon {
		top: calc(var(--u) * -74);
		left: calc(var(--u) * -104);
		width: calc(var(--u) * 216);
		height: calc(var(--u) * 200);
	}

	.ttc-banner__ribbon-label {
		top: calc(var(--u) * 4);
		left: calc(var(--u) * -6);
		width: calc(var(--u) * 92);
		height: calc(var(--u) * 66);
		font-size: calc(var(--u) * 19);
		transform: rotate(-45deg);
	}

	.ttc-banner__left {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: calc(var(--u) * 10);
		padding: calc(var(--u) * 18) calc(var(--u) * 16) calc(var(--u) * 16);
		text-align: center;
	}

	.ttc-banner__right {
		display: grid;
		grid-template-columns: auto auto 1fr;
		align-items: center;
		gap: calc(var(--u) * 8) calc(var(--u) * 10);
		padding: calc(var(--u) * 12) calc(var(--u) * 16);
		background: var(--promo-purple);
	}

	.ttc-banner__copy,
	.ttc-banner__pill,
	.ttc-banner__save,
	.ttc-banner__price,
	.ttc-banner__was,
	.ttc-banner__cta {
		position: static;
		top: auto;
		left: auto;
		transform: none;
	}

	.ttc-banner__copy {
		width: 100%;
		padding-left: calc(var(--u) * 48);
		font-size: calc(var(--u) * 22);
		text-align: left;
	}

	.ttc-banner__pill {
		align-self: flex-start;
		padding: calc(var(--u) * 3) calc(var(--u) * 10);
		font-size: calc(var(--u) * 11);
		white-space: normal;
	}

	.ttc-banner__save {
		grid-area: 1 / 1 / 3 / 2;
		width: calc(var(--u) * 66);
		height: calc(var(--u) * 66);
		border-width: calc(var(--u) * 3);
		font-size: calc(var(--u) * 18);
	}

	.ttc-banner__price {
		grid-area: 1 / 2 / 2 / 3;
		font-size: calc(var(--u) * 40);
	}

	.ttc-banner__price sup {
		top: calc(var(--u) * -7);
		font-size: calc(var(--u) * 15);
	}

	.ttc-banner__was {
		grid-area: 1 / 3 / 2 / 4;
		justify-self: start;
		width: auto;
		padding: calc(var(--u) * 1) 0 calc(var(--u) * 2);
		border-width: calc(var(--u) * 1.5);
		font-size: calc(var(--u) * 14);
	}

	.ttc-banner__cta {
		grid-area: 2 / 2 / 3 / 4;
		width: 100%;
		height: calc(var(--u) * 36);
		border-radius: calc(var(--u) * 9);
		font-size: calc(var(--u) * 14);
	}
}


/* 640–1023: too narrow for the artboard's type, too wide to look right
   fully stacked — navy and purple sit side by side with the roundel
   straddling the seam, the same reading order as the design. */
@media (min-width: 640px) and (max-width: 1023.98px) {

	.ttc-banner__card {
		flex-direction: row;
		align-items: stretch;
	}

	.ttc-banner__left {
		flex: 1 1 auto;
		align-items: flex-start;
		justify-content: center;
		min-width: 0;
		padding: calc(var(--u) * 18) calc(var(--u) * 20) calc(var(--u) * 18) calc(var(--u) * 16);
		text-align: left;
	}

	/* Pulled left out of the purple column so it straddles the seam. */
	.ttc-banner__save {
		grid-area: 1 / 1 / 3 / 2;
		margin-left: calc(var(--u) * -56);
		margin-right: calc(var(--u) * -4);
		z-index: 2;
	}

	.ttc-banner__right {
		flex: 0 0 auto;
		width: calc(var(--u) * 300);
		padding: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 14) calc(var(--u) * 12);
		overflow: visible;
	}

	.ttc-banner__copy {
		padding-left: calc(var(--u) * 58);
		font-size: calc(var(--u) * 21);
	}

	.ttc-banner__pill {
		margin-left: calc(var(--u) * 58);
	}
}

/* Below 640 the ribbon needs more clearance from the headline. */
@media (max-width: 639.98px) {
	.ttc-banner__copy {
		padding-left: calc(var(--u) * 54);
		font-size: calc(var(--u) * 20);
	}

	.ttc-banner__pill {
		align-self: center;
	}
}


/* ------------------------------------------------------------
   Rolling promo ticker (.ttc-ticker)
   Figma: MaryWorkStation (Copy) — node 5049:815
   Markup: parts/section-promo-ticker.php

   Two identical groups sit side by side and the track slides by
   exactly -50%, so the loop is seamless. Tune the pace with
   --ttc-ticker-duration.
   ------------------------------------------------------------ */

.ttc-ticker {
	/* Durations are tuned per breakpoint so the text travels at roughly
	   70px/s at every size — the loop length changes with the font size,
	   so a single duration would read fast on small screens. */
	--ttc-ticker-duration: 80s;

	position: relative;
	/* Below the sticky header (z-50) so the header always wins. */
	z-index: 40;
	overflow: hidden;
	width: 100%;
	height: 76px;
	background: #41c0e8;
	font-family: var(--font-articulat, "articulat-cf", sans-serif);
	font-style: normal;
	user-select: none;
}

.ttc-ticker__track {
	display: flex;
	width: max-content;
	height: 100%;
	will-change: transform;
	animation: ttc-ticker-scroll var(--ttc-ticker-duration) linear infinite;
}

.ttc-ticker:hover .ttc-ticker__track,
.ttc-ticker:focus-within .ttc-ticker__track {
	animation-play-state: paused;
}

.ttc-ticker__group {
	display: flex;
	align-items: center;
	gap: 48px;
	padding-right: 48px;
}

.ttc-ticker__item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}

.ttc-ticker__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	background: #fff;
	border-radius: 9px;
	color: #41c0e8;
	font-size: 20px;
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.03em;
}

.ttc-ticker__text {
	color: #fff;
	font-size: 24.162px;
	line-height: 0.9;
	letter-spacing: -0.03em;
}

.ttc-ticker__label {
	font-weight: 400;
}

.ttc-ticker__offer {
	font-weight: 800;
}

@keyframes ttc-ticker-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media (max-width: 1023.98px) {
	.ttc-ticker {
		--ttc-ticker-duration: 42s;

		height: 56px;
	}

	.ttc-ticker__group {
		gap: 32px;
		padding-right: 32px;
	}

	.ttc-ticker__badge {
		padding: 7px;
		border-radius: 7px;
		font-size: 15px;
	}

	.ttc-ticker__text {
		font-size: 17px;
	}
}

@media (max-width: 639.98px) {
	.ttc-ticker {
		--ttc-ticker-duration: 36s;

		height: 46px;
	}

	.ttc-ticker__badge {
		padding: 6px;
		font-size: 13px;
	}

	.ttc-ticker__text {
		font-size: 14.5px;
	}
}

/* Hold the message still for anyone who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
	.ttc-ticker__track {
		animation: none;
	}
}