/**
 * TSF widget CSS.
 *
 * One block per widget. Everything is namespaced under .tsf-<widget>__<part>;
 * the only shared vocabulary is the tokens and the utilities in base.css.
 */

/* ==========================================================================
   Hero
   ========================================================================== */

.tsf-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	min-height: var(--tsf-hero-h, 60vh);
	/* Scrim strength, 0-100, from the Darkening control. */
	--tsf-scrim: 70;
}

.tsf-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.tsf-hero__media > .tsf-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--tsf-focal, 50% 50%);
}

/**
 * The downward scrim. In the source this is three Tailwind stops
 * (from-black/40 via-black/70 to-black/[0.97]); here the stops are derived from
 * one control so the client has a single "Darkening" slider instead of three.
 */
.tsf-hero__scrim {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to bottom,
		rgba(0, 0, 0, calc(var(--tsf-scrim) * 0.0057)) 0%,
		rgba(0, 0, 0, calc(var(--tsf-scrim) * 0.01)) 55%,
		var(--tsf-bg) 100%
	);
}

.tsf-hero__glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: var(--tsf-hero-glow);
	opacity: 0.7;
}

.tsf-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-block: 6rem 4rem;
	/* The source sets this inline on the hero copy block. */
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

@media (min-width: 640px) {
	.tsf-hero__inner { padding-block: 8rem 5rem; }
}

@media (min-width: 1024px) {
	.tsf-hero__inner { padding-block: 10rem 6rem; }
}

.tsf-hero__badge {
	display: inline-block;
	margin-top: 1rem;
	border-radius: var(--tsf-radius-pill);
	background-color: var(--tsf-brand);
	color: var(--tsf-on-brand);
	padding: 0.5rem 1rem;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.tsf-hero__headline {
	margin: 0.75rem 0 0;
	max-width: 20ch;
}

.tsf-hero__subcopy {
	margin: 1.25rem 0 0;
	max-width: 40ch;
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.9);
}

@media (min-width: 640px) {
	.tsf-hero__subcopy { font-size: 1.125rem; }
}

.tsf-hero__kicker { margin: 0.75rem 0 0; }

.tsf-hero__price {
	margin: 1rem 0 0;
	font-size: clamp(1.5rem, 3vw, 1.875rem);
	color: var(--tsf-brand);
}

.tsf-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

.tsf-hero__cue {
	position: absolute;
	inset-inline: 0;
	bottom: 1.5rem;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	color: rgba(255, 255, 255, 0.5);
}

.tsf-hero__cue span {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.tsf-hero__cue svg {
	animation: tsf-bounce 1s infinite;
}

@keyframes tsf-bounce {
	0%, 100% { transform: translateY(-15%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
	50%      { transform: none;             animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}

/* The scroll cue collides with the copy on a short hero. */
@media (max-width: 639px) {
	.tsf-hero__cue { display: none; }
}

/* ==========================================================================
   Split feature
   ========================================================================== */

.tsf-split {
	display: grid;
	align-items: center;
	gap: 3rem;
}

@media (min-width: 1024px) {
	.tsf-split { grid-template-columns: 1fr 1fr; }
	/* Source does the swap with `lg:[&>div:first-child]:order-2`. */
	.tsf-split--media-right > .tsf-split__media { order: 2; }
}

/* Only the stacking order changes on phones; the grid is single-column there. */
.tsf-split--text-first > .tsf-split__media { order: 2; }
.tsf-split--text-first > .tsf-split__text  { order: 1; }

@media (min-width: 1024px) {
	.tsf-split--text-first > .tsf-split__media { order: 1; }
	.tsf-split--text-first > .tsf-split__text  { order: 2; }
	.tsf-split--text-first.tsf-split--media-right > .tsf-split__media { order: 2; }
}

/* ---- media column ---- */

.tsf-split__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--tsf-radius-2xl); /* rounded-3xl = 1.5rem */
	min-width: 0;
}

.tsf-split__media--fixed .tsf-img { height: var(--tsf-media-h, 420px); }
.tsf-split__media--portrait .tsf-img { aspect-ratio: 4 / 5; height: auto; }
.tsf-split__media--natural .tsf-img { height: auto; aspect-ratio: auto; }

.tsf-split__media .tsf-img { width: 100%; }

.tsf-split__media--video {
	aspect-ratio: 16 / 9;
	background-color: #000;
	border-radius: var(--tsf-radius-xl); /* rounded-2xl = 1rem, not 3xl */
}

.tsf-split__media--video iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.tsf-split__wash {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.tsf-split__play {
	position: absolute;
	bottom: 1.5rem;
	left: 1.5rem;
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--tsf-radius-pill);
	background-color: var(--tsf-brand);
	color: var(--tsf-on-brand);
	transition: transform 0.3s var(--tsf-ease), background-color 0.2s var(--tsf-ease);
}

.tsf-split__play svg { width: 1.25rem; height: 1.25rem; }

@media (hover: hover) {
	a.tsf-split__play:hover { transform: scale(1.08); background-color: var(--tsf-brand-bright); }
}

/* ---- text column ---- */

.tsf-split__text { min-width: 0; }

.tsf-split__heading { margin: 0.75rem 0 0; }

.tsf-split__body { margin-top: 1.25rem; }
.tsf-split__body p { margin: 0; color: var(--tsf-muted-fg); line-height: 1.625; }
.tsf-split__body p + p { margin-top: 1rem; }

.tsf-split__body--md   { max-width: 28rem; }
.tsf-split__body--lg   { max-width: 32rem; }
.tsf-split__body--full { max-width: none; }

.tsf-split__cta { margin-top: 2.25rem; }

/* The text link whose arrow nudges away on hover (source: hover:gap-3). */
.tsf-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--tsf-brand);
	transition: gap 0.2s var(--tsf-ease), color 0.2s var(--tsf-ease);
}

.tsf-link-arrow svg { width: 1rem; height: 1rem; flex: none; }

@media (hover: hover) {
	.tsf-link-arrow:hover { gap: 0.75rem; color: var(--tsf-brand-bright); }
}

.tsf-link-arrow:focus-visible {
	outline: 2px solid var(--tsf-brand-bright);
	outline-offset: 3px;
}

/* ---- full-bleed variant ---- */

/* Not a grid: the photo and wash are absolute, and the copy must span the full
   page width rather than being confined to a grid column. */
.tsf-split--bleed {
	display: block;
	position: relative;
	overflow: hidden;
	gap: 0;
}

.tsf-split__bg { position: absolute; inset: 0; opacity: 0.4; }
.tsf-split__bg .tsf-img { width: 100%; height: 100%; }

.tsf-split__bg-wash {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to right,
		var(--tsf-bg) 0%,
		rgba(10, 10, 10, 0.85) 50%,
		rgba(10, 10, 10, 0.30) 100%
	);
}

.tsf-split__bleed-inner {
	position: relative;
	padding-block: 6rem;
}

/* ==========================================================================
   CTA band
   ========================================================================== */

.tsf-cta-section--layered {
	position: relative;
	overflow: hidden;
}

.tsf-cta__bg {
	position: absolute;
	inset: 0;
	opacity: 0.25;
}

.tsf-cta__bg .tsf-img { width: 100%; height: 100%; }

.tsf-cta__wash { position: absolute; inset: 0; }

/**
 * Three wash recipes, and they are not interchangeable: the source uses the page
 * black (#0A0A0A) on the home and training bands and pure black on the media and
 * shop ones, which reads visibly colder.
 */
.tsf-cta__wash--warm {
	background-image: linear-gradient(to bottom, rgba(10, 10, 10, 0.80) 0%, rgba(10, 10, 10, 0.70) 50%, rgba(10, 10, 10, 0.90) 100%);
}

.tsf-cta__wash--cold {
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.85) 50%, rgba(0, 0, 0, 0.95) 100%);
}

.tsf-cta__wash--solid {
	background-image: linear-gradient(to bottom, rgba(10, 10, 10, 0.85) 0%, rgba(10, 10, 10, 0.80) 50%, var(--tsf-bg) 100%);
}

.tsf-cta {
	position: relative;
	margin-inline: auto;
	padding-inline: var(--tsf-gutter);
	text-align: center;
}

.tsf-cta--md { max-width: 56rem; }
.tsf-cta--lg { max-width: 64rem; }

.tsf-cta__heading { margin: 0; }

.tsf-cta__body { margin-top: 1.25rem; }

.tsf-cta__body p {
	margin: 0 auto;
	max-width: 36rem;
	color: var(--tsf-muted-fg);
	line-height: 1.625;
}

.tsf-cta__body p + p { margin-top: 0.75rem; }

.tsf-cta__handle {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--tsf-brand);
}

.tsf-cta__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 2.25rem;
}

.tsf-chip {
	border-radius: var(--tsf-radius-pill);
	border: 1px solid rgba(227, 30, 36, 0.5);
	padding: 0.5rem 1.25rem;
	font-size: 11px;
	line-height: 1.5;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tsf-brand);
	text-decoration: none;
}

@media (hover: hover) {
	a.tsf-chip:hover { border-color: var(--tsf-brand); background-color: rgba(227, 30, 36, 0.1); }
}

.tsf-cta__actions {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 2.5rem;
}

.tsf-cta__actions--row    { flex-wrap: wrap; }
.tsf-cta__actions--column { flex-direction: column; align-items: center; gap: 1rem; }

/* ==========================================================================
   Card grid
   ========================================================================== */

/**
 * auto-fit + minmax means a last row that does not fill centres itself instead
 * of hanging left. The source hardcodes a column count per section and goes
 * ragged the moment a client adds one more card.
 */
.tsf-cards {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

@supports (grid-template-columns: repeat(var(--tsf-cols, 3), 1fr)) {
	.tsf-cards { grid-template-columns: repeat(var(--tsf-cols, 3), minmax(0, 1fr)); }
}

/* ---- shared card shell ---- */

.tsf-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--tsf-radius-xl);
	background-color: var(--tsf-surface-2);
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	transition: border-color 0.15s var(--tsf-ease), background-color 0.15s var(--tsf-ease);
}

.tsf-card:focus-visible {
	outline: 2px solid var(--tsf-brand-bright);
	outline-offset: 3px;
}

/* Hover treatments. Wrapped in (hover: hover) exactly as Tailwind v4 does, so a
   tap on iPad does not leave a card stuck in its hover state. */
@media (hover: hover) {
	.tsf-cards--hover-border .tsf-card:hover { border-color: rgba(227, 30, 36, 0.4); }
	.tsf-cards--hover-fill   .tsf-card:hover { border-color: var(--tsf-brand); background-color: rgba(227, 30, 36, 0.1); }
	.tsf-cards--hover-zoom   .tsf-card:hover .tsf-img,
	.tsf-cards--hover-sheet  .tsf-card:hover .tsf-img { scale: 1.05 1.05; }
	.tsf-cards--hover-sheet  .tsf-card:hover .tsf-card__sheet { opacity: 0.45; }
	.tsf-cards--hover-sheet  .tsf-card:hover .tsf-card__num { color: var(--tsf-fg); }
	.tsf-cards--hover-fill   .tsf-card:hover .tsf-card__follow svg { translate: 0.25rem 0; }
}

.tsf-card .tsf-img {
	transition: scale 700ms var(--tsf-ease);
}

/* ---- icon style ---- */

.tsf-card--icon { padding: 1.75rem; }

.tsf-card__badge {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	flex: none;
	border-radius: var(--tsf-radius-pill);
	background-color: rgba(227, 30, 36, 0.1);
	color: var(--tsf-brand);
}

.tsf-card__badge svg,
.tsf-card__badge i { width: 1.25rem; height: 1.25rem; font-size: 1.25rem; }

.tsf-cards--icon-stacked .tsf-card__text { margin-top: 1.5rem; }

.tsf-cards--icon-inline .tsf-card--icon {
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	padding: 1.5rem;
}

.tsf-cards--icon-inline .tsf-card__badge { width: 2.75rem; height: 2.75rem; }
.tsf-cards--icon-inline .tsf-card__text { margin-top: 0; }

/* ---- titles and text ---- */

.tsf-card__title {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--tsf-fg);
}

.tsf-card__body {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.7);
}

.tsf-card__highlight { font-weight: 600; color: var(--tsf-brand); }

.tsf-card__role {
	margin: 0.5rem 0 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--tsf-brand);
}

.tsf-card__cta {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 0.5rem;
	margin-top: 1.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--tsf-brand);
	transition: color 0.15s var(--tsf-ease);
}

.tsf-card__cta svg { width: 1rem; height: 1rem; }

@media (hover: hover) {
	.tsf-card__cta:hover { color: var(--tsf-brand-bright); }
}

/* ---- photo tile ---- */

.tsf-card--photo {
	height: var(--tsf-tile-h, 300px);
	padding: 0;
	background-color: transparent;
}

.tsf-scope .tsf-card__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--tsf-focal, 50% 50%);
}

.tsf-card__scrim {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.25) 100%);
}

/* Needs the stacking context that [data-tsf-depth] provides, or it multiplies
   through to the page background. */
.tsf-card__sheet {
	position: absolute;
	inset: 0;
	background-color: var(--tsf-brand);
	opacity: 0;
	mix-blend-mode: multiply;
	transition: opacity 500ms var(--tsf-ease);
}

.tsf-card__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	padding: 1.25rem;
}

@media (min-width: 1024px) {
	.tsf-card__inner { padding: 1.75rem; }
}

.tsf-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tsf-card__num {
	font-family: var(--tsf-font-display);
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--tsf-brand);
	transition: color 0.15s var(--tsf-ease);
}

.tsf-card__tag svg,
.tsf-card__tag i { width: 1.25rem; height: 1.25rem; color: rgba(255, 255, 255, 0.8); }

.tsf-card--photo .tsf-card__title {
	font-size: 1rem;
	line-height: 0.95;
	overflow-wrap: break-word;
}

@media (min-width: 640px) {
	.tsf-card--photo .tsf-card__title { font-size: 1.25rem; }
}

@media (min-width: 1024px) {
	.tsf-card__num { font-size: 1.875rem; }
	.tsf-card--photo .tsf-card__title { font-size: 1.875rem; }
	.tsf-card__tag svg, .tsf-card__tag i { width: 1.5rem; height: 1.5rem; }
}

/* ---- portrait ---- */

.tsf-card--portrait { padding: 0; }

.tsf-card__media { overflow: hidden; }
.tsf-card__media .tsf-img { width: 100%; height: 100%; }

.tsf-cards--ratio-4-3 .tsf-card__media {
	aspect-ratio: 4 / 3;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tsf-cards--ratio-4-5 .tsf-card__media { aspect-ratio: 4 / 5; }

.tsf-card--portrait .tsf-card__text { flex: 1; padding: 1.75rem; }

.tsf-card--portrait .tsf-card__title { font-size: 1.5rem; letter-spacing: -0.025em; }

.tsf-cards--ratio-4-5 .tsf-card__title { font-size: 1.875rem; letter-spacing: -0.02em; }

.tsf-card--portrait .tsf-card__body { margin-top: 1.25rem; }

/* ---- stat ---- */

.tsf-card--stat { padding: 1.75rem; }

.tsf-card__stat-icon svg,
.tsf-card__stat-icon i { width: 1.5rem; height: 1.5rem; color: var(--tsf-brand); }

.tsf-card__value {
	margin: 1.5rem 0 0;
	font-size: 2.25rem;
	line-height: 1;
	letter-spacing: -0.02em;
}

.tsf-card__stat-label {
	margin: 0.75rem 0 0;
	font-size: 11px;
	line-height: 1.5;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--tsf-muted-fg);
}

.tsf-card__follow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tsf-brand);
}

.tsf-card__follow svg {
	width: 14px;
	height: 14px;
	transition: translate 0.15s var(--tsf-ease);
}

/* ==========================================================================
   Story row
   ========================================================================== */

.tsf-story { display: grid; align-items: center; gap: 2rem; }

@media (min-width: 1024px) {
	.tsf-story--standard { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
	.tsf-story--media-right > .tsf-story__media { order: 2; }
}

/* Stacked layout: media above text, both full width. */
.tsf-story--hero { display: block; }
.tsf-story--hero .tsf-story__text { margin-top: 2rem; }

@media (min-width: 1024px) {
	.tsf-story--hero .tsf-story__text { margin-top: 2.5rem; }
}

.tsf-story__media { margin: 0; min-width: 0; }

.tsf-story__main {
	overflow: hidden;
	border-radius: var(--tsf-radius-2xl);
}

.tsf-story__main .tsf-img {
	width: 100%;
	height: 340px;
	object-position: var(--tsf-focal, 50% 50%);
	transition: scale 700ms var(--tsf-ease);
}

@media (min-width: 640px) { .tsf-story__main .tsf-img { height: 460px; } }
@media (min-width: 1024px) { .tsf-story__main .tsf-img { height: 620px; } }

.tsf-story--hero .tsf-story__main .tsf-img { height: 420px; }

@media (min-width: 640px) { .tsf-story--hero .tsf-story__main .tsf-img { height: 560px; } }
@media (min-width: 1024px) { .tsf-story--hero .tsf-story__main .tsf-img { height: 720px; } }

@media (hover: hover) {
	.tsf-story__main:hover .tsf-img { scale: 1.03 1.03; }
	.tsf-story__thumb:hover .tsf-img { scale: 1.1 1.1; }
}

/* ---- thumbnail strip ---- */

.tsf-story__thumbs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
	margin-top: 1rem;
}

/* The stacked layout gives the strip more room, so it runs wider. */
@media (min-width: 640px) { .tsf-story--hero .tsf-story__thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tsf-story--hero .tsf-story__thumbs { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.tsf-story__thumb {
	overflow: hidden;
	border-radius: var(--tsf-radius-lg);
}

.tsf-story__thumb .tsf-img {
	width: 100%;
	height: 7rem;
	transition: scale 500ms var(--tsf-ease);
}

@media (min-width: 1024px) { .tsf-story--standard .tsf-story__thumb .tsf-img { height: 8rem; } }

.tsf-story--hero .tsf-story__thumb .tsf-img { height: 6rem; }
@media (min-width: 640px) { .tsf-story--hero .tsf-story__thumb .tsf-img { height: 7rem; } }

/* ---- click-to-play video ---- */

.tsf-story__video {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: var(--tsf-radius-2xl);
	background-color: #000;
}

.tsf-story__video video {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: 70vh;
	object-fit: contain;
}

.tsf-story__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	padding: 0;
	background-color: rgba(0, 0, 0, 0.25);
	cursor: pointer;
	transition: background-color 0.2s var(--tsf-ease);
}

/* Set by video.js once the visitor presses play. */
[data-tsf-started] .tsf-story__play { display: none; }

.tsf-story__play > span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: var(--tsf-radius-pill);
	background-color: var(--tsf-brand);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	transition: transform 300ms var(--tsf-ease);
}

.tsf-story__play svg {
	width: 1.75rem;
	height: 1.75rem;
	margin-left: 0.25rem;
	color: #fff;
}

@media (min-width: 640px) {
	.tsf-story__play > span { width: 5rem; height: 5rem; }
	.tsf-story__play svg { width: 2rem; height: 2rem; }
}

@media (hover: hover) {
	.tsf-story__play:hover { background-color: rgba(0, 0, 0, 0.15); }
	.tsf-story__play:hover > span { transform: scale(1.1); }
}

.tsf-story__play:focus-visible {
	outline: 2px solid var(--tsf-brand-bright);
	outline-offset: -4px;
}

/* ---- copy ---- */

.tsf-story__text { min-width: 0; }

/* The campaign rows indent their copy column rather than sitting flush. */
@media (min-width: 1024px) {
	.tsf-story--standard .tsf-story__text { padding-inline: 2.5rem; }
}

.tsf-story__title {
	margin: 0.75rem 0 0;
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
}

.tsf-story--hero .tsf-story__title {
	font-size: clamp(2.25rem, 6vw, 4.5rem);
	max-width: 20ch;
}

.tsf-story__copy {
	margin: 1.25rem 0 0;
	max-width: 28rem;
	line-height: 1.625;
	color: var(--tsf-muted-fg);
}

.tsf-story--hero .tsf-story__copy { max-width: 42rem; font-size: 1.125rem; }

.tsf-story__cta { margin-top: 1.5rem; }

/* ==========================================================================
   Shared section header
   ========================================================================== */

.tsf-head { margin-bottom: 3rem; }
.tsf-head .tsf-eyebrow { margin: 0; }
.tsf-head__title { margin: 0.75rem 0 0; max-width: 56rem; }

.tsf-head--center { text-align: center; }
.tsf-head--center .tsf-head__title { margin-inline: auto; }

/* ==========================================================================
   Shared numeral
   ========================================================================== */

/* The oversized red figure used by steps, the timeline and stat values. */
.tsf-num {
	font-family: var(--tsf-font-display);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--tsf-brand);
}

/* ==========================================================================
   Steps
   ========================================================================== */

.tsf-step-section .tsf-head { margin-bottom: var(--tsf-head-gap, 3.5rem); }

.tsf-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(var(--tsf-cols, 1), minmax(0, 1fr));
}

.tsf-step {
	display: flex;
	flex-direction: column;
	/* The 2px brand rule sits on each step, not on the section. */
	border-top: 2px solid var(--tsf-brand);
	padding-top: 2rem;
}

.tsf-step__num { font-size: 3.75rem; }

@media (min-width: 1024px) {
	.tsf-step__num { font-size: 4.5rem; }
}

.tsf-step__text {
	margin: 1.25rem 0 0;
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   Timeline
   ========================================================================== */

.tsf-timeline-section .tsf-head { margin-bottom: var(--tsf-head-gap, 3.5rem); }

.tsf-timeline { list-style: none; margin: 0; padding: 0; }

.tsf-timeline__row {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-bottom: 2rem;
}

.tsf-timeline__row:not(:last-child) { margin-block-end: 2rem; }

/* The source hardcodes this on its sixth row. In a repeater it has to be
   :last-child, or a seventh year leaves a rule hanging under the list. */
.tsf-timeline__row:last-child { border-bottom: 0; padding-bottom: 0; }

@media (min-width: 640px) {
	.tsf-timeline__row {
		flex-direction: row;
		align-items: baseline;
		gap: 2.5rem;
	}
	.tsf-timeline__year { width: var(--tsf-year-w, 10rem); flex: 0 0 auto; }
}

.tsf-timeline__year { font-size: 3rem; }

.tsf-timeline__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5rem;
	color: var(--tsf-muted-fg);
}

@media (min-width: 1024px) {
	.tsf-timeline__text { font-size: 1.125rem; }
}

/* ==========================================================================
   Stat band
   ========================================================================== */

.tsf-stat-section { position: relative; overflow: hidden; }
.tsf-stat-section--edged { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }

.tsf-stat-section__media { position: absolute; inset: 0; z-index: 0; }

.tsf-scope .tsf-stat-section__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--tsf-focal, 50% 50%);
	opacity: 0.08;
}

.tsf-stat-section__bloom {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(120% 90% at 50% 50%, rgba(227, 30, 36, 0.22), transparent 65%);
}

.tsf-stat-section__wash { position: absolute; inset: 0; }

.tsf-stat-section__wash--translucent {
	background-image: linear-gradient(to bottom, rgba(10, 10, 10, 0.85) 0%, rgba(10, 10, 10, 0.55) 50%, rgba(10, 10, 10, 0.90) 100%);
}

.tsf-stat-section__wash--solid {
	background-image: linear-gradient(to bottom, rgba(10, 10, 10, 0.85) 0%, rgba(10, 10, 10, 0.80) 50%, var(--tsf-bg) 100%);
}

.tsf-stat-section__inner { position: relative; z-index: 1; }

.tsf-stat-band__lede {
	margin: 1.25rem 0 3rem;
	max-width: 42rem;
	font-size: 1rem;
	line-height: 1.5rem;
	color: var(--tsf-muted-fg);
}

@media (min-width: 1024px) {
	.tsf-stat-band__lede { font-size: 1.125rem; line-height: 1.75rem; }
}

/* ---- grid ---- */

.tsf-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 1.5rem;
	row-gap: 3.5rem;
}

@media (min-width: 1024px) {
	.tsf-stats { column-gap: 0; }
	.tsf-stats[data-tsf-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.tsf-stats[data-tsf-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tsf-stats[data-tsf-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/**
 * The rule sits between each PAIR, not between every column — the source writes
 * it on odd indices, giving [1] | [2]   [3] | [4]. Index-derived, so it is not a
 * per-row control; an odd number of stats leaves the last one unpaired.
 */
.tsf-stat { min-width: 0; }

@media (min-width: 1024px) {
	.tsf-stat { padding-left: 2rem; }
	.tsf-stat:first-child { padding-left: 0; }
	.tsf-stat:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, 0.08); }
}

.tsf-stat__icon { display: block; margin-bottom: 1rem; }
.tsf-stat__icon svg,
.tsf-stat__icon i { display: block; width: 1.5rem; height: 1.5rem; font-size: 1.5rem; }

.tsf-stat:nth-child(odd) .tsf-stat__icon { color: rgba(255, 255, 255, 0.7); }
.tsf-stat:nth-child(even) .tsf-stat__icon { color: var(--tsf-brand); }

/* ---- numeral ---- */

.tsf-stat__value {
	font-family: var(--tsf-font-display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	line-height: 1;
	font-size: 14vw;
}

@media (min-width: 640px)  { .tsf-stat__value { font-size: 4.5rem; } }
@media (min-width: 1024px) { .tsf-stat__value { font-size: 6rem; } }

.tsf-stat__num { display: inline-block; font-variant-numeric: tabular-nums; }

.tsf-stat:nth-child(odd) .tsf-stat__num { color: var(--tsf-fg); }
.tsf-stat:nth-child(even) .tsf-stat__num { color: var(--tsf-brand); }

.tsf-stats--glow .tsf-stat:nth-child(odd) .tsf-stat__num {
	filter: drop-shadow(0 6px 28px rgba(0, 0, 0, 0.6));
}

.tsf-stats--glow .tsf-stat:nth-child(even) .tsf-stat__num {
	filter: drop-shadow(0 6px 28px rgba(227, 30, 36, 0.45));
}

.tsf-stat__label {
	margin-top: 1rem;
	font-size: 11px;
	line-height: 1.5;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--tsf-muted-fg);
}

.tsf-stat-band__note {
	margin: 3.5rem 0 0;
	font-size: 0.875rem;
	color: var(--tsf-muted-fg);
}

/* ==========================================================================
   Logo marquee
   ========================================================================== */

/* The only full-bleed section in the design — the strip runs edge to edge, so
   there is deliberately no .tsf-container around it. */
.tsf-logos-section { overflow: hidden; }

.tsf-logos__head { margin-bottom: 1.75rem; text-align: center; }

/* A third eyebrow variant: 10px steady at 0.3em. Neither .tsf-eyebrow (10 to
   12px at 0.35em) nor --wide (12px at 0.3em) matches, and the two-class
   selector is what outranks the media query in base.css. */
.tsf-logos__head .tsf-eyebrow {
	margin: 0;
	font-size: 10px;
	line-height: 1.5;
	letter-spacing: 0.3em;
}

.tsf-logos { position: relative; overflow: hidden; }

.tsf-logos__track {
	display: flex;
	width: max-content;
	align-items: center;
	animation: tsf-marquee var(--tsf-marquee-duration, 40s) linear infinite;
}

.tsf-logos__slot {
	display: grid;
	place-items: center;
	flex: none;
	height: 56px;
	width: 130px;
}

@media (min-width: 640px)  { .tsf-logos__slot { width: 170px; } }
@media (min-width: 1024px) { .tsf-logos__slot { height: 68px; width: 210px; } }
.tsf-scope .tsf-logos__img {
	height: var(--tsf-logo-h, 30px);
	width: auto;
	max-width: 100%;
	object-fit: contain;
	opacity: 0.9;
	/* Safe only because the shipped marks are white on transparent: it lifts
	   off-white to pure white. A colour logo will blow out. */
	filter: brightness(1.15);
	transition: opacity 0.3s var(--tsf-ease);
}

@media (min-width: 1024px) {

.tsf-scope .tsf-logos__img { height: var(--tsf-logo-h-lg, 40px); }
}

@media (hover: hover) {
	.tsf-logos__img:hover { opacity: 1; }
}

/* ==========================================================================
   Statement band
   ========================================================================== */

.tsf-statement-section--layered { position: relative; overflow: hidden; }

.tsf-statement__bg { position: absolute; inset: 0; opacity: 0.1; }
.tsf-statement__bg .tsf-img { width: 100%; height: 100%; }

.tsf-statement__wash { position: absolute; inset: 0; }

.tsf-statement__wash--down {
	background-image: linear-gradient(to bottom, rgba(10, 10, 10, 0.85) 0%, rgba(10, 10, 10, 0.80) 50%, var(--tsf-bg) 100%);
}

.tsf-statement__wash--right {
	background-image: linear-gradient(to right, var(--tsf-bg) 0%, rgba(10, 10, 10, 0.90) 50%, rgba(10, 10, 10, 0.70) 100%);
}

.tsf-statement__bloom {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(100% 80% at 20% 50%, rgba(227, 30, 36, 0.18), transparent 60%);
}

.tsf-statement {
	position: relative;
	margin-inline: auto;
	padding-inline: var(--tsf-gutter);
}

.tsf-statement--sm   { max-width: 48rem; }
.tsf-statement--md   { max-width: 56rem; }
.tsf-statement--lg   { max-width: 64rem; }
.tsf-statement--full { max-width: var(--tsf-container); }

.tsf-statement--center { text-align: center; }
.tsf-statement--center .tsf-head__title { margin-inline: auto; }
.tsf-statement--center .tsf-statement__body { margin-inline: auto; }

/* No grid below the header here — the body follows straight on, so the header's
   own 3rem bottom margin would double the gap. */
.tsf-statement .tsf-head { margin-bottom: 0; }

.tsf-statement__body { margin: 1.25rem 0 0; }

.tsf-statement__body--statement {
	margin-top: 2rem;
	max-width: 42rem;
	font-size: 1.125rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
}

.tsf-statement__body--relaxed {
	margin-top: 1.5rem;
	max-width: 42rem;
	font-size: 1rem;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.7);
}

.tsf-statement__body--quiet {
	max-width: 36rem;
	color: var(--tsf-muted-fg);
}

@media (min-width: 640px) {
	.tsf-statement__body--statement { font-size: 1.25rem; }
	.tsf-statement__body--relaxed { font-size: 1.125rem; }
}

.tsf-statement__note {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	font-weight: 600;
	font-style: italic;
	color: var(--tsf-brand);
}

/* ---- photo break ---- */

.tsf-photo-break {
	position: relative;
	overflow: hidden;
	height: 60vh;
	min-height: 360px;
}

.tsf-photo-break__media { position: absolute; inset: 0; }
.tsf-photo-break__media .tsf-img { width: 100%; height: 100%; }

.tsf-photo-break__dim {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.4);
}

/* Fades into the page below it so the band does not end on a hard edge. */
.tsf-photo-break__fade {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(to top, var(--tsf-bg) 0%, transparent 50%, transparent 100%);
}

/* ==========================================================================
   Feed grid
   ========================================================================== */

.tsf-feed {
	display: grid;
	grid-template-columns: repeat(var(--tsf-cols, 3), minmax(0, 1fr));
	gap: 0.75rem;
}

.tsf-feed__tile {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--tsf-radius-lg);
	text-decoration: none;
}

.tsf-feed__tile .tsf-img {
	width: 100%;
	height: 100%;
	object-position: var(--tsf-focal, 50% 50%);
	transition: scale 500ms var(--tsf-ease);
}

@media (hover: hover) {
	.tsf-feed__tile:hover .tsf-img { scale: 1.05 1.05; }
}

.tsf-feed__tile:focus-visible {
	outline: 2px solid var(--tsf-brand-bright);
	outline-offset: 3px;
}

.tsf-feed__scrim {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 50%, rgba(0, 0, 0, 0.2) 100%);
}

.tsf-feed__play {
	position: absolute;
	inset: 0;
	margin: auto;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--tsf-radius-pill);
	background-color: var(--tsf-brand);
	color: var(--tsf-on-brand);
}

.tsf-feed__play svg { width: 1rem; height: 1rem; }

.tsf-feed__badge {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--tsf-radius-pill);
	background-color: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(4px);
	color: var(--tsf-fg);
}

.tsf-feed__badge svg,
.tsf-feed__badge i { width: 1rem; height: 1rem; font-size: 1rem; }

.tsf-feed__socials {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2.5rem;
}

/* ==========================================================================
   Schedule
   ========================================================================== */

.tsf-schedule {
	display: grid;
	grid-template-columns: repeat(var(--tsf-cols, 2), minmax(0, 1fr));
	gap: 1.25rem;
}

.tsf-schedule__day {
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--tsf-radius-xl);
	background-color: var(--tsf-surface-2);
}

.tsf-schedule__head {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding: 1.25rem 1.75rem;
}

.tsf-schedule__day-name {
	margin: 0;
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--tsf-brand);
}

@media (min-width: 1024px) {
	.tsf-schedule__day-name { font-size: 1.875rem; }
}

.tsf-schedule__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	padding: 1.25rem 1.75rem;
	font-size: 0.875rem;
}

/* Written as :last-child so removing a session never leaves a rule under the
   card -- the source relies on Tailwind's last: variant for the same reason. */
.tsf-schedule__row:last-child { border-bottom: 0; }

.tsf-schedule__group {
	font-size: 1.125rem;
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--tsf-fg);
}

.tsf-schedule__time {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.8);
}

.tsf-schedule__time svg,
.tsf-schedule__time i { width: 0.875rem; height: 0.875rem; font-size: 0.875rem; color: var(--tsf-brand); }

.tsf-schedule__note {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 1.5rem 0 0;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.6);
}

.tsf-schedule__note svg,
.tsf-schedule__note i { width: 0.875rem; height: 0.875rem; font-size: 0.875rem; color: var(--tsf-brand); }

/* ==========================================================================
   Plan cards
   ========================================================================== */

.tsf-plans {
	display: grid;
	grid-template-columns: repeat(var(--tsf-cols, 4), minmax(0, 1fr));
	gap: 1.25rem;
}

.tsf-plan {
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--tsf-radius-xl);
	background-color: var(--tsf-surface-1);
	padding: 2rem;
	transition: border-color 0.15s var(--tsf-ease);
}

.tsf-plan--featured { border-color: var(--tsf-brand); }

@media (hover: hover) {
	.tsf-plan:hover { border-color: rgba(227, 30, 36, 0.4); }
}

.tsf-plan__name {
	margin: 0;
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: -0.025em;
}

.tsf-plan__meta {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.7);
}

.tsf-plan__price {
	display: flex;
	align-items: flex-end;
	gap: 0.25rem;
	margin: 1.5rem 0 0;
}

.tsf-plan__amount { font-size: 3rem; }

.tsf-plan__period {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	padding-bottom: 0.35rem;
}

.tsf-plan__benefits {
	list-style: none;
	margin: 1.75rem 0 0;
	padding: 0;
	/* flex-1 so every card's button lines up however long the list is. */
	flex: 1;
	display: grid;
	align-content: start;
	gap: 0.75rem;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.7);
}

.tsf-plan__benefits li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.tsf-plan__benefits svg,
.tsf-plan__benefits i {
	width: 15px;
	height: 15px;
	font-size: 15px;
	flex: none;
	margin-top: 0.125rem;
	color: var(--tsf-brand);
}

.tsf-plan__cta {
	margin-top: 2rem;
	padding: 0.875rem 1.5rem;
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.tsf-faq-inner--narrow { max-width: 48rem; margin-inline: auto; }

.tsf-faq__item { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.tsf-faq__item:last-child { border-bottom: 0; }

.tsf-faq__q { margin: 0; }

.tsf-faq__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	border: 0;
	background: none;
	padding: 1.25rem 0;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	text-align: left;
	color: var(--tsf-fg);
	cursor: pointer;
	transition: color 0.2s var(--tsf-ease);
}

@media (hover: hover) {
	.tsf-faq__trigger:hover { color: var(--tsf-brand); }
}

.tsf-faq__trigger:focus-visible {
	outline: 2px solid var(--tsf-brand-bright);
	outline-offset: -2px;
}

.tsf-faq__chevron {
	width: 1rem;
	height: 1rem;
	flex: none;
	color: var(--tsf-brand);
	/* The standalone property, matching what Tailwind v4 emits for rotate-180. */
	transition: rotate 200ms var(--tsf-ease);
}

.tsf-faq__trigger[data-state="open"] .tsf-faq__chevron { rotate: 180deg; }

/**
 * Height is animated as a transition from an inline pixel value that the JS
 * measures, then cleared so the panel settles to auto. Radix animates instead,
 * with fill-mode:none, which flashes the natural height for one frame at the
 * end of a close.
 */
.tsf-faq__panel {
	height: 0;
	overflow: hidden;
	transition: height 200ms var(--tsf-ease);
}

.tsf-faq__panel[hidden] { display: none; }

/* The JS animates to a measured pixel height and then clears the inline value so
   the panel can reflow with its content. Without this rule it would fall back to
   the collapsed height above and snap shut again. */
.tsf-faq__panel[data-state="open"] { height: auto; }

.tsf-faq__answer {
	padding-bottom: 1.25rem;
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--tsf-muted-fg);
}

/* ==========================================================================
   Product showcase
   ========================================================================== */

.tsf-showcase-section { position: relative; overflow: hidden; }

.tsf-showcase__texture {
	position: absolute;
	inset: 0;
	opacity: 0.4;
	pointer-events: none;
}

.tsf-showcase {
	position: relative;
	z-index: 1;
	--tsf-container: 48rem;
}

.tsf-showcase__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--tsf-radius-2xl);
	border: 1px solid rgba(255, 255, 255, 0.08);
	background-color: var(--tsf-surface-2);
}

/* object-contain, not the shared .tsf-img cover: the product must be whole
   inside its padded frame, so there is deliberately no focal control here. */

.tsf-scope .tsf-showcase__shot {
	position: absolute;
	inset: 1.5rem;
	width: auto;
	height: auto;
	max-width: calc(100% - 3rem);
	max-height: calc(100% - 3rem);
	margin: auto;
	object-fit: contain;
}

.tsf-showcase__shot[hidden] { display: none; }

@media (min-width: 640px) {

.tsf-scope .tsf-showcase__shot { inset: 2.5rem; max-width: calc(100% - 5rem); max-height: calc(100% - 5rem); }
}

@media (min-width: 1024px) {

.tsf-scope .tsf-showcase__shot { inset: 3.5rem; max-width: calc(100% - 7rem); max-height: calc(100% - 7rem); }
}

/* ---- thumbnails ---- */

.tsf-showcase__thumbs {
	margin-top: 1rem;
	--tsf-thumb-gap: 0.75rem;
	--tsf-thumb-size: 5rem;
}

@media (min-width: 640px) {
	.tsf-showcase__thumbs { --tsf-thumb-gap: 1rem; --tsf-thumb-size: 6rem; }
}

/**
 * max-content plus auto margins centres the row while it fits and left-aligns
 * once it overflows. justify-content:center on an overflowing flex row makes the
 * leading items unreachable in Chromium and WebKit — the trap this design walks
 * into the moment a fourth angle is added.
 */
.tsf-showcase__thumbs-track {
	display: flex;
	gap: var(--tsf-thumb-gap);
	width: max-content;
	margin-inline: auto;
}

.tsf-showcase__thumbs--scroll {
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--tsf-gutter);
	scrollbar-width: none;
	margin-inline: calc(var(--tsf-gutter) * -1);
	padding-inline: var(--tsf-gutter);
	padding-block: 2px;
}

.tsf-showcase__thumbs--scroll::-webkit-scrollbar { display: none; }
.tsf-showcase__thumbs--scroll .tsf-showcase__thumb { scroll-snap-align: start; }

.tsf-showcase__thumbs--wrap .tsf-showcase__thumbs-track {
	width: auto;
	flex-wrap: wrap;
	justify-content: center;
	row-gap: var(--tsf-thumb-gap);
}

.tsf-showcase__thumb {
	position: relative;
	flex: none;
	width: var(--tsf-thumb-size);
	height: var(--tsf-thumb-size);
	overflow: hidden;
	border-radius: var(--tsf-radius-lg);
	border: 2px solid rgba(255, 255, 255, 0.1);
	background: none;
	padding: 0;
	opacity: 0.6;
	cursor: pointer;
	transition: opacity 0.15s var(--tsf-ease), border-color 0.15s var(--tsf-ease);
}

.tsf-showcase__thumb.is-active { border-color: var(--tsf-brand); opacity: 1; }

@media (hover: hover) {
	.tsf-showcase__thumb:not(.is-active):hover { opacity: 1; }
}

.tsf-showcase__thumb:focus-visible {
	outline: 2px solid var(--tsf-brand-bright);
	outline-offset: 3px;
}

.tsf-scope .tsf-showcase__thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 0.375rem;
}

/* ---- detail ---- */

.tsf-showcase__detail { margin-top: 2.5rem; }

@media (min-width: 640px) {
	.tsf-showcase__detail { margin-top: 3rem; }
}

.tsf-showcase__detail .tsf-eyebrow { margin: 0; }

.tsf-showcase__rule {
	display: block;
	margin-top: 0.5rem;
	width: 3rem;
	height: 0.125rem;
	background-color: var(--tsf-brand);
}

.tsf-showcase__title { margin: 1.25rem 0 0; color: var(--tsf-fg); }

.tsf-showcase__specs { margin: 2rem 0 0; padding: 0; list-style: none; }

.tsf-showcase__spec {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-block: 1rem;
	font-size: 0.875rem;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.9);
}

@media (min-width: 640px) {
	.tsf-showcase__spec { font-size: 1rem; }
}

.tsf-showcase__specs--divided .tsf-showcase__spec:not(:last-child) {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tsf-showcase__spec-icon { display: inline-flex; flex: none; color: var(--tsf-brand); }
.tsf-showcase__spec-icon svg,
.tsf-showcase__spec-icon i { width: 1.25rem; height: 1.25rem; font-size: 1.25rem; }

.tsf-showcase__actions { margin-top: 2rem; }

.tsf-showcase__buy {
	width: 100%;
	padding: 1rem;
	letter-spacing: 0.1em;
	box-shadow: 0 10px 15px -3px rgba(227, 30, 36, 0.25), 0 4px 6px -4px rgba(227, 30, 36, 0.25);
}

@media (min-width: 640px) {
	.tsf-showcase__buy { padding-inline: 1.5rem; font-size: 0.875rem; }
}

.tsf-showcase__note {
	margin: 0.75rem 0 0;
	text-align: center;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.5);
}

.tsf-showcase__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 2rem;
}

/* Delta from .tsf-chip: tinted fill, tighter padding, one step smaller. */
.tsf-chip--solid {
	border-color: rgba(227, 30, 36, 0.3);
	background-color: rgba(227, 30, 36, 0.1);
	padding: 0.375rem 0.75rem;
	font-size: 10px;
}

/* Address line under a photo-tile title — the training venue block. */
.tsf-card__place {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.75);
}

/* ==========================================================================
   Form
   ========================================================================== */

.tsf-form-wrap { max-width: 48rem; text-align: center; }

.tsf-form-section .tsf-head { margin-bottom: 0; }

.tsf-form__lede {
	margin: 1rem auto 0;
	max-width: 36rem;
	color: var(--tsf-muted-fg);
	line-height: 1.625;
}

.tsf-form__email {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.8);
}

.tsf-form__email a {
	font-weight: 600;
	color: var(--tsf-brand);
	text-decoration: none;
}

@media (hover: hover) {
	.tsf-form__email a:hover { color: var(--tsf-brand-bright); }
}

.tsf-form {
	margin-top: 2rem;
	text-align: left;
}

/* The honeypot: out of sight, out of the tab order, and never announced. */
.tsf-form__trap {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.tsf-form__grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tsf-form__field { grid-column: 1 / -1; }

@media (min-width: 640px) {
	.tsf-form__field--half { grid-column: span 1; }
}

.tsf-form__field label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
}

.tsf-form__optional {
	font-weight: 600;
	color: rgba(255, 255, 255, 0.4);
}

.tsf-form input[type="text"],
.tsf-form input[type="email"],
.tsf-form input[type="tel"],
.tsf-form textarea,
.tsf-form select {
	width: 100%;
	border-radius: var(--tsf-radius-lg);
	border: 1px solid rgba(255, 255, 255, 0.1);
	background-color: var(--tsf-bg);
	padding: 0.75rem 1rem;
	font-family: inherit;
	font-size: 0.875rem;
	color: var(--tsf-fg);
	transition: border-color 0.15s var(--tsf-ease), box-shadow 0.15s var(--tsf-ease);
}

.tsf-form textarea { resize: none; line-height: 1.6; }

.tsf-form ::placeholder { color: rgba(255, 255, 255, 0.3); }

.tsf-form input:focus,
.tsf-form textarea:focus,
.tsf-form select:focus {
	outline: none;
	border-color: var(--tsf-brand);
	box-shadow: 0 0 0 1px var(--tsf-brand);
}

/* A field the browser has marked invalid only after a submit attempt. */
.tsf-form [data-label]:user-invalid { border-color: var(--tsf-brand-bright); }

.tsf-form__select { position: relative; }

.tsf-form__select select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.5rem;
}

.tsf-form__select svg {
	position: absolute;
	right: 1rem;
	top: 50%;
	translate: 0 -50%;
	width: 12px;
	height: 8px;
	pointer-events: none;
	color: rgba(255, 255, 255, 0.5);
}

.tsf-form__select option { background-color: var(--tsf-surface-2); }

/* ---- consent ---- */

.tsf-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin-top: 1.25rem;
}

.tsf-form__consent input {
	flex: none;
	/* 1.15rem keeps the box on the text baseline; the label extends the hit area. */
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.15rem;
	accent-color: var(--tsf-brand);
}

.tsf-form__consent label {
	font-size: 0.8125rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
}

.tsf-form__consent a { color: var(--tsf-brand); }

/* ---- status ---- */

.tsf-form__status {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.25rem;
	border-radius: var(--tsf-radius-lg);
	border: 1px solid;
	padding: 1rem;
	font-size: 0.875rem;
}

.tsf-form__status[hidden] { display: none; }

.tsf-form__status[data-kind="success"] {
	border-color: rgba(95, 169, 126, 0.3);
	background-color: rgba(95, 169, 126, 0.1);
	color: #7FC49B;
}

.tsf-form__status[data-kind="error"] {
	border-color: rgba(255, 63, 69, 0.3);
	background-color: rgba(255, 63, 69, 0.1);
	color: var(--tsf-brand-bright);
}

.tsf-form__submit {
	width: 100%;
	margin-top: 1.5rem;
	padding-block: 1rem;
}

@media (min-width: 640px) {
	.tsf-form__submit { width: auto; }
}

.tsf-form[data-busy="true"] .tsf-form__submit { opacity: 0.6; cursor: progress; }

.tsf-form__note {
	margin: 0.75rem 0 0;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.5);
}

/* ---- modal ---- */

.tsf-form-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	padding: 1.25rem;
	background-color: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(4px);
	overflow-y: auto;
}

.tsf-form-modal[hidden] { display: none; }

.tsf-form-modal__panel {
	position: relative;
	width: 100%;
	max-width: 36rem;
	max-height: calc(100svh - 2.5rem);
	overflow-y: auto;
	border: 1px solid var(--tsf-border);
	border-radius: var(--tsf-radius-2xl);
	background-color: var(--tsf-surface-1);
	padding: 2rem;
	text-align: left;
	animation: tsf-fade-up 0.25s ease-out both;
}

.tsf-form-modal__panel .tsf-head { text-align: left; }
.tsf-form-modal__panel .tsf-form__lede { margin-inline: 0; }

.tsf-form-modal__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	border-radius: var(--tsf-radius-pill);
	background-color: rgba(255, 255, 255, 0.06);
	color: var(--tsf-fg);
	cursor: pointer;
	transition: background-color 0.2s var(--tsf-ease);
}

.tsf-form-modal__close svg { width: 1.125rem; height: 1.125rem; }

@media (hover: hover) {
	.tsf-form-modal__close:hover { background-color: var(--tsf-brand); color: var(--tsf-on-brand); }
}

.tsf-form-modal__close:focus-visible {
	outline: 2px solid var(--tsf-brand-bright);
	outline-offset: 2px;
}

/* ---- hero video: poster first, video only if hero.js decides to load it ---- */

.tsf-hero__poster,
.tsf-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--tsf-focal, 50% 50%);
}

/* The video fades in over the poster once it is actually playing, so there is
   never a black frame while it buffers. */
.tsf-hero__video {
	opacity: 0;
	transition: opacity 0.4s var(--tsf-ease);
}

.tsf-hero[data-tsf-video="playing"] .tsf-hero__video { opacity: 1; }

.tsf-hero__motion {
	position: absolute;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--tsf-radius-pill);
	background-color: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(4px);
	color: var(--tsf-fg);
	cursor: pointer;
	transition: background-color 0.2s var(--tsf-ease), border-color 0.2s var(--tsf-ease);
}

.tsf-hero__motion[hidden] { display: none; }
.tsf-hero__motion svg { width: 0.875rem; height: 0.875rem; }

@media (hover: hover) {
	.tsf-hero__motion:hover { background-color: var(--tsf-brand); border-color: var(--tsf-brand); }
}

.tsf-hero__motion:focus-visible {
	outline: 2px solid var(--tsf-brand-bright);
	outline-offset: 2px;
}