/**
 * BallSponsor.
 *
 * Green, white, one bright accent. The structure follows GoFundMe because
 * that pattern is understood; the surface does not.
 *
 * 1.  Tokens
 * 2.  Base
 * 3.  Layout
 * 4.  Buttons and pills
 * 5.  Top bar
 * 6.  A1 Hero and photo arc
 * 7.  A2 Running campaigns, C1 card, C6 progress
 * 8.  A3 Reviews
 * 9.  A4 Steps
 * 10. A5 Club logos
 * 11. A6 Closing and counters
 * 12. Trust row and footer
 * 13. Motion
 */

/* ------------------------------------------------------------- 1. Tokens */

:root {
	/* --pitch, --pitch-soft, --paper, --ink, --grass, --blue and --gold come
	   from the plugin settings, injected inline by the theme. */

	--mist: #F4F6F9;
	--mist-deep: #DEE4EC;
	--ink-soft: #46556B;
	--ink-faint: #76849A;
	--line: rgba(12, 20, 34, .12);
	--line-soft: rgba(12, 20, 34, .07);

	--shell: 1220px;
	--gutter: clamp(1rem, 4vw, 2.5rem);
	--block: clamp(4rem, 8vw, 7.5rem);

	--r-sm: 10px;
	--r-md: 16px;
	--r-lg: 24px;
	--r-pill: 999px;

	--t-hero: clamp(2.55rem, 6.2vw, 5.1rem);
	--t-h2: clamp(1.85rem, 3.4vw, 2.9rem);
	--t-h3: clamp(1.05rem, 1.3vw, 1.2rem);
	--t-lead: clamp(1.02rem, 1.4vw, 1.2rem);

	/* The wordmark is set in a geometric sans, so the site is too: one voice
	   from the logo down to the smallest supporter line. */
	--sans: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* --------------------------------------------------------------- 2. Base */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1.6;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

img,
svg {
	max-width: 100%;
}

[hidden] {
	display: none !important;
}

img {
	display: block;
	height: auto;
}

a {
	color: inherit;
}

h1,
h2,
h3 {
	margin: 0;
	font-weight: 800;
	letter-spacing: -.022em;
	line-height: 1.06;
}

p {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 3px solid var(--grass);
	outline-offset: 3px;
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.bs-skip {
	position: absolute;
	left: -9999px;
	z-index: 100;
}

.bs-skip:focus {
	left: 1rem;
	top: 1rem;
	padding: .75rem 1.25rem;
	background: var(--pitch);
	color: #fff;
	border-radius: var(--r-pill);
}

/* ------------------------------------------------------------- 3. Layout */

.bs-shell {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.bs-main > section {
	padding-block: var(--block);
}

.bs-h2 {
	font-size: var(--t-h2);
	max-width: 22ch;
}

.bs-textlink {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid currentColor;
	padding-bottom: 2px;
}

.bs-textlink svg {
	width: 1.05em;
	height: 1.05em;
}

.bs-textlink:hover {
	color: var(--grass);
}

/* -------------------------------------------------- 4. Buttons and pills */

.bs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .82rem 1.5rem;
	border: 0;
	border-radius: var(--r-pill);
	background: var(--blue);
	color: #fff;
	font-weight: 700;
	font-size: .97rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	box-shadow: inset 0 0 0 2px var(--blue);
	transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.bs-btn svg {
	width: 1.15rem;
	height: 1.15rem;
	flex: 0 0 auto;
}

/* Hover hollows the button out: the fill drops away, the outline stays. */
.bs-btn:hover {
	background: transparent;
	color: var(--blue);
	transform: translateY(-1px);
}

.bs-btn:active {
	transform: translateY(0);
}

.bs-btn--lg {
	padding: 1rem 1.9rem;
	font-size: 1.02rem;
}

.bs-btn--xl {
	padding: 1.15rem 2.5rem;
	font-size: clamp(1.02rem, 1.25vw, 1.15rem);
}

/* On the dark green bands the button is white with blue lettering, and
   hover hollows it out the same way the blue one does. */
.bs-btn--on-pitch {
	background: #fff;
	color: var(--blue);
	box-shadow: inset 0 0 0 2px #fff;
}

.bs-btn--on-pitch:hover {
	background: transparent;
	color: #fff;
}

.bs-btn--ghost {
	background: transparent;
	color: var(--ink);
	box-shadow: inset 0 0 0 1.5px var(--line);
}

.bs-btn--ghost:hover {
	background: var(--mist);
	color: var(--ink);
	box-shadow: inset 0 0 0 1.5px var(--ink);
}

.bs-btn--block {
	width: 100%;
}

.bs-pill {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .5rem 1rem;
	border-radius: var(--r-pill);
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.35;
}

.bs-pill--button {
	border: 1.5px solid var(--line);
	background: var(--paper);
	padding: .6rem 1.1rem;
	font-weight: 700;
	cursor: pointer;
}

.bs-pill--button:hover {
	border-color: var(--ink);
}

.bs-pill svg {
	width: 1.05em;
	height: 1.05em;
}

.bs-round {
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	border: 1.5px solid var(--line);
	border-radius: 50%;
	background: var(--paper);
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease;
}

.bs-round svg {
	width: 1.15rem;
	height: 1.15rem;
}

.bs-round:hover {
	border-color: var(--ink);
}

.bs-round[disabled] {
	opacity: .35;
	cursor: default;
}

/* ------------------------------------------------------------ 5. Top bar */

.bs-topbar {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--paper);
	transition: box-shadow .2s ease;
}

.bs-topbar.is-stuck {
	box-shadow: 0 1px 0 var(--line);
}

.bs-topbar__inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding: .9rem var(--gutter);
}

.bs-brand {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-weight: 800;
	font-size: 1.16rem;
	letter-spacing: -.02em;
	text-decoration: none;
	color: var(--pitch);
}

.bs-brand--light {
	color: #fff;
}

.bs-brand__mark {
	width: 1.7rem;
	height: 1.7rem;
	color: var(--grass);
}

.bs-brand--light .bs-brand__mark {
	color: var(--grass);
}

.bs-brand__suffix {
	color: var(--grass);
}

.bs-brand--light .bs-brand__suffix {
	color: var(--grass);
}

.bs-navlinks {
	margin-right: auto;
}

.bs-navlinks__list {
	display: flex;
	gap: clamp(1rem, 2.2vw, 2rem);
}

.bs-navlinks__list a {
	font-weight: 600;
	font-size: .97rem;
	text-decoration: none;
	padding-block: .35rem;
	border-bottom: 2px solid transparent;
}

.bs-navlinks__list a:hover {
	border-bottom-color: var(--ink);
}

.bs-navtoggle {
	display: none;
	width: 2.75rem;
	height: 2.75rem;
	border: 1.5px solid var(--line);
	border-radius: 50%;
	background: var(--paper);
	cursor: pointer;
}

.bs-navtoggle__bars {
	display: grid;
	gap: 5px;
	justify-items: center;
}

.bs-navtoggle__bars span {
	display: block;
	width: 15px;
	height: 2px;
	background: var(--ink);
	border-radius: 2px;
}

.bs-navmobile {
	display: grid;
	gap: .35rem;
	padding: .5rem var(--gutter) 1.5rem;
	border-top: 1px solid var(--line);
}

.bs-navmobile a {
	padding: .7rem 0;
	font-weight: 600;
	text-decoration: none;
}

.bs-navmobile .bs-btn {
	margin-top: .6rem;
}

@media (max-width: 900px) {
	.bs-navlinks,
	.bs-topbar__cta {
		display: none;
	}

	.bs-navtoggle {
		display: grid;
		place-items: center;
		margin-left: auto;
	}
}

@media (min-width: 901px) {
	.bs-navmobile {
		display: none !important;
	}
}

/* ------------------------------------------------- 6. Hero and photo arc */

.bs-hero {
	position: relative;
	/* The gallery sits flat in its box, so the hero needs no extra room
	   underneath; the packages follow close behind. */
	padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem) !important;
	overflow: clip;
	text-align: center;
}

.bs-hero__copy {
	display: grid;
	justify-items: center;
	gap: 1.5rem;
	max-width: 60rem;
}

.bs-hero__title {
	font-size: var(--t-hero);
	max-width: 15ch;
	text-wrap: balance;
}

.bs-hero__action {
	margin-top: .4rem;
}

.bs-hero__support {
	color: var(--ink-soft);
	font-size: .96rem;
	font-weight: 500;
}

.bs-gallery {
	display: flex;
	gap: clamp(.4rem, .7vw, .7rem);
	height: clamp(13rem, 24vw, 21rem);
	margin-top: clamp(1.75rem, 3.5vw, 3rem);
}

.bs-gallery__item {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	border-radius: clamp(14px, 1.6vw, 24px);
	overflow: hidden;
	background: var(--mist);
	transition: flex-grow .6s cubic-bezier(.2, .8, .25, 1);
}

.bs-gallery__item.is-open {
	flex-grow: 2.8;
}

/* The pointer decides while it is in the row; the open one steps back. */
.bs-gallery:hover .bs-gallery__item {
	flex-grow: 1;
}

.bs-gallery:hover .bs-gallery__item:hover {
	flex-grow: 2.8;
}

.bs-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	transition: transform .7s cubic-bezier(.2, .8, .25, 1);
}

.bs-gallery__item:hover img {
	transform: scale(1.04);
}

.bs-gallery__label {
	position: absolute;
	left: .8rem;
	bottom: .8rem;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .4rem .8rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .94);
	color: var(--ink);
	font-size: .82rem;
	font-weight: 700;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .35s ease .15s, transform .35s ease .15s;
}

.bs-gallery__label svg {
	width: 1rem;
	height: 1rem;
	color: var(--grass);
}

.bs-gallery__item.is-open .bs-gallery__label,
.bs-gallery:hover .bs-gallery__item:hover .bs-gallery__label {
	opacity: 1;
	transform: none;
}

.bs-gallery:hover .bs-gallery__item.is-open:not(:hover) .bs-gallery__label {
	opacity: 0;
	transform: translateY(6px);
	transition-delay: 0s;
}

/* On a phone the row becomes a strip you swipe through. */
@media (max-width: 760px) {
	.bs-gallery {
		height: 15rem;
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.bs-gallery::-webkit-scrollbar {
		display: none;
	}

	.bs-gallery__item,
	.bs-gallery__item.is-open,
	.bs-gallery:hover .bs-gallery__item,
	.bs-gallery:hover .bs-gallery__item:hover {
		flex: 0 0 72vw;
		scroll-snap-align: center;
	}

	.bs-gallery__label,
	.bs-gallery:hover .bs-gallery__item.is-open:not(:hover) .bs-gallery__label {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bs-gallery__item,
	.bs-gallery__item img,
	.bs-gallery__label {
		transition: none;
	}
}

/* -------------------------------- 7. Running campaigns, card, progress */

.bs-live {
	background: var(--paper);
}

.bs-main > .bs-live {
	padding-top: clamp(2.25rem, 4vw, 3.5rem);
}

.bs-live .bs-h2 {
	margin-bottom: 1.6rem;
}

.bs-live__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.bs-live__arrows {
	display: flex;
	gap: .6rem;
}

.bs-filter {
	position: relative;
}

.bs-filter__menu {
	position: absolute;
	top: calc(100% + .5rem);
	left: 0;
	z-index: 20;
	width: min(20rem, 80vw);
	padding: 1rem;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	box-shadow: 0 18px 40px rgba(13, 59, 36, .13);
}

.bs-filter__field input {
	width: 100%;
	padding: .7rem .9rem;
	font: inherit;
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--mist);
}

.bs-filter__all {
	margin-top: .7rem;
	font-size: .9rem;
	color: var(--ink-soft);
}

.bs-live__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.25rem, 2.2vw, 2rem) clamp(1rem, 2vw, 1.75rem);
}

.bs-live__all {
	margin-top: 2.25rem;
}

/* C1 — campaign card */

.bs-card {
	display: grid;
	gap: .9rem;
	align-content: start;
	color: inherit;
	text-decoration: none;
}

.bs-card__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--mist);
}

.bs-card--lg .bs-card__media {
	aspect-ratio: 1 / 1;
}

.bs-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.bs-card:hover .bs-card__media img {
	transform: scale(1.035);
}

.bs-card__distance,
.bs-card__flag {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .35rem .7rem;
	border-radius: var(--r-pill);
	font-size: .8rem;
	font-weight: 700;
	line-height: 1.3;
	backdrop-filter: blur(6px);
}

.bs-card__distance {
	left: .75rem;
	bottom: .75rem;
	background: rgba(15, 31, 22, .58);
	color: #fff;
}

.bs-card__flag {
	left: .75rem;
	top: .75rem;
}

.bs-card__flag svg {
	width: .95em;
	height: .95em;
}

.bs-card__flag--reached {
	background: var(--grass);
	color: #fff;
}

.bs-card__flag--ended {
	background: rgba(255, 255, 255, .9);
	color: var(--ink-soft);
}

.bs-card__flag--days {
	background: rgba(255, 255, 255, .9);
	color: var(--ink);
}

.bs-card--ended .bs-card__media img {
	filter: grayscale(.55);
	opacity: .8;
}

.bs-card__body {
	display: grid;
	gap: .5rem;
}

.bs-card__club {
	display: flex;
	align-items: center;
	gap: .45rem;
	font-size: .87rem;
	font-weight: 600;
	color: var(--ink-soft);
}

.bs-card__mark {
	display: block;
	width: 1.35rem;
	height: 1.35rem;
	flex: 0 0 auto;
}

.bs-card__mark img,
.bs-card__mark svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.bs-card__title {
	display: block;
	font-weight: 700;
	font-size: 1.06rem;
	line-height: 1.28;
	letter-spacing: -.012em;
}

.bs-card--lg .bs-card__title {
	font-size: clamp(1.2rem, 1.8vw, 1.5rem);
}

.bs-card__foot {
	display: grid;
	gap: .55rem;
	margin-top: .2rem;
}

.bs-card__meta {
	font-size: .9rem;
	font-weight: 700;
}

.bs-card--ended .bs-card__meta {
	color: var(--ink-faint);
}

/* C6 — progress, drawn like a free-kick line

   The referee sprays a line on the grass and it fades within a minute: ragged
   edge, uneven density, never a clean rectangle. The bar is that line. The
   turbulence filter lives in the footer as an inline SVG. */

.bs-progress {
	display: block;
	height: 9px;
	background:
		repeating-linear-gradient(90deg, var(--mist-deep) 0 3px, transparent 3px 7px);
	opacity: .95;
}

.bs-progress__fill {
	display: block;
	width: var(--bs-fill, 0%);
	height: 100%;
	background: var(--grass);
	filter: url(#bs-spray);
}

.bs-progress--reached .bs-progress__fill {
	background: var(--grass);
}

.bs-progress--ended .bs-progress__fill {
	background: var(--ink-faint);
}

/* Without the filter the bar still has to read as sprayed, so the fallback
   is a soft-edged gradient rather than a hard block. */
@supports not (filter: url(#bs-spray)) {
	.bs-progress__fill {
		filter: none;
		background: linear-gradient(90deg, var(--grass) 85%, rgba(18, 192, 106, .35) 100%);
	}
}

@media (max-width: 1024px) {
	.bs-live__grid {
		grid-template-columns: 1fr 1fr;
	}

	.bs-live__grid > .bs-card--lg {
		grid-column: span 2;
		grid-row: auto;
	}

	.bs-card--lg .bs-card__media {
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 620px) {
	.bs-live__sets {
		margin-inline: calc(var(--gutter) * -1);
	}

	.bs-live__grid {
		display: flex;
		gap: 1rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-inline: var(--gutter);
		scrollbar-width: none;
	}

	.bs-live__grid::-webkit-scrollbar {
		display: none;
	}

	.bs-live__grid > .bs-card {
		flex: 0 0 78%;
		scroll-snap-align: start;
	}

	.bs-card--lg .bs-card__media {
		aspect-ratio: 3 / 2;
	}

	.bs-card--lg .bs-card__title {
		font-size: 1.06rem;
	}
}

/* ---------------------------------------------------------- 8. Reviews */

.bs-reviews {
	background: var(--pitch);
	color: #fff;
	overflow: clip;
	padding-bottom: clamp(3rem, 6vw, 5rem) !important;
}

.bs-reviews__title {
	font-size: var(--t-h2);
	max-width: 18ch;
	color: var(--grass);
}

.bs-reviews__lead {
	max-width: 44ch;
	margin-top: 1rem;
	color: rgba(255, 255, 255, .72);
	font-size: var(--t-lead);
}

.bs-reviews__strip {
	display: flex;
	gap: clamp(.75rem, 1.4vw, 1.35rem);
	justify-content: center;
	align-items: flex-start;
	margin-top: clamp(3rem, 6vw, 5rem);
	padding-inline: var(--gutter);
}

.bs-review {
	position: relative;
	flex: 0 0 auto;
	width: clamp(11rem, 15.5vw, 14rem);
	margin: 0;
	transform: rotate(var(--tilt, 0deg));
}

.bs-review__photo {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--r-md);
}

.bs-review__bubble {
	position: relative;
	margin: -2.6rem .75rem 0 -.75rem;
	padding: .9rem 1.1rem;
	background: var(--paper);
	color: var(--ink);
	border-radius: var(--r-md);
	font-size: .93rem;
	font-weight: 500;
	line-height: 1.45;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
}

.bs-review:nth-child(even) .bs-review__bubble {
	background: var(--grass);
	margin-left: .75rem;
	margin-right: -.75rem;
}

.bs-review__who {
	display: grid;
	gap: .1rem;
	margin-top: .9rem;
	padding-inline: .2rem;
	font-size: .85rem;
}

.bs-review__who b {
	font-weight: 700;
}

.bs-review__who span {
	color: rgba(255, 255, 255, .62);
}

@media (max-width: 1024px) {
	.bs-reviews__strip {
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 1rem;
		scrollbar-width: none;
	}

	.bs-reviews__strip::-webkit-scrollbar {
		display: none;
	}

	.bs-review {
		width: 15rem;
		scroll-snap-align: center;
	}
}

/* ------------------------------------------------------------ 9. Steps */

.bs-steps {
	background: var(--mist);
}

.bs-steps__head {
	display: grid;
	gap: .75rem;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.bs-steps__head p {
	color: var(--ink-soft);
	font-size: var(--t-lead);
}

.bs-steps__row {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(1rem, 2vw, 1.75rem);
}

/* The pitch line the blocks stand on. */
.bs-steps__row::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 1.35rem;
	height: 2px;
	background: repeating-linear-gradient(90deg, var(--mist-deep) 0 14px, transparent 14px 24px);
}

.bs-step {
	position: relative;
	display: grid;
	gap: .55rem;
	align-content: start;
	padding-top: 3.4rem;
}

.bs-step__no {
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 2.7rem;
	height: 2.7rem;
	border-radius: 50%;
	background: var(--paper);
	box-shadow: inset 0 0 0 2px var(--pitch);
	font-weight: 800;
	font-size: 1rem;
}

.bs-step--goal .bs-step__no {
	background: var(--grass);
	box-shadow: inset 0 0 0 2px var(--pitch);
}

.bs-step__icon {
	color: var(--grass);
}

.bs-step__icon svg {
	width: 1.6rem;
	height: 1.6rem;
}

.bs-step--goal .bs-step__icon {
	color: var(--pitch);
}

.bs-step__title {
	font-size: var(--t-h3);
	font-weight: 700;
}

.bs-step__text {
	color: var(--ink-soft);
	font-size: .94rem;
	line-height: 1.5;
}

.bs-steps__cta {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

@media (max-width: 1024px) {
	.bs-steps__row {
		grid-template-columns: repeat(3, 1fr);
		row-gap: 2.5rem;
	}

	.bs-steps__row::before {
		display: none;
	}
}

@media (max-width: 620px) {
	.bs-steps__row {
		grid-template-columns: 1fr;
		row-gap: 1.75rem;
	}

	.bs-step {
		padding-top: 0;
		padding-left: 3.6rem;
		min-height: 2.7rem;
	}
}

/* ------------------------------------------------------- 10. Club logos */

.bs-logos {
	background: var(--paper);
	overflow: clip;
}

.bs-logos__title {
	font-size: clamp(1.25rem, 2vw, 1.6rem);
	font-weight: 700;
	color: var(--ink-soft);
	margin-bottom: 2.25rem;
}

.bs-logos__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2.25rem) clamp(1rem, 2vw, 2rem);
	align-items: center;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.bs-logos__item {
	display: flex;
	align-items: center;
	gap: .7rem;
	filter: grayscale(1);
	opacity: .72;
	transition: opacity .2s ease, filter .2s ease;
}

.bs-logos__item:hover {
	filter: grayscale(0);
	opacity: 1;
}

.bs-logos__mark {
	display: block;
	width: 2.9rem;
	height: 2.9rem;
	flex: 0 0 auto;
}

.bs-logos__mark img,
.bs-logos__mark svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.bs-logos__name {
	font-size: .92rem;
	font-weight: 700;
	white-space: nowrap;
}

@media (max-width: 760px) {
	.bs-logos__track {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.bs-logos__track::-webkit-scrollbar {
		display: none;
	}

	.bs-logos__row {
		display: flex;
		flex-wrap: nowrap;
		gap: 1.5rem;
	}
}

/* -------------------------------------------- 11. Closing and counters */

.bs-closing {
	background: var(--pitch);
	color: #fff;
	text-align: center;
}

.bs-closing .bs-shell {
	display: grid;
	justify-items: center;
	gap: 1.1rem;
}

.bs-counters {
	display: grid;
	grid-template-columns: repeat(3, auto);
	gap: clamp(2rem, 6vw, 5.5rem);
	margin-bottom: clamp(1.5rem, 4vw, 3rem);
}

.bs-counter {
	display: grid;
	gap: .2rem;
}

.bs-counter b {
	font-size: clamp(2.2rem, 4.5vw, 3.6rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1;
	color: var(--grass);
}

.bs-counter span {
	font-size: .9rem;
	color: rgba(255, 255, 255, .7);
}

.bs-closing__title {
	font-size: var(--t-h2);
	max-width: 20ch;
}

.bs-closing__text {
	max-width: 46ch;
	color: rgba(255, 255, 255, .74);
	font-size: var(--t-lead);
}

.bs-closing .bs-btn {
	margin-top: .8rem;
}

@media (max-width: 620px) {
	.bs-counters {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

/* ----------------------------------------------- 12. Trust row, footer */

.bs-trust {
	border-top: 1px solid var(--line-soft);
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.bs-trust__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.25rem, 3vw, 2.5rem);
}

.bs-trust__item {
	display: flex;
	gap: .75rem;
	align-items: flex-start;
}

.bs-trust__item svg {
	width: 1.4rem;
	height: 1.4rem;
	flex: 0 0 auto;
	color: var(--grass);
	margin-top: .1rem;
}

.bs-trust__item > span {
	display: grid;
	gap: .1rem;
}

.bs-trust__item b {
	font-size: .95rem;
	font-weight: 700;
}

.bs-trust__item span span {
	font-size: .88rem;
	color: var(--ink-soft);
}

@media (max-width: 900px) {
	.bs-trust__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 520px) {
	.bs-trust__grid {
		grid-template-columns: 1fr;
	}
}

.bs-footer {
	background: var(--pitch);
	color: #fff;
	padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}

.bs-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr repeat(3, 1fr);
	gap: clamp(1.75rem, 4vw, 3.5rem);
}

.bs-footer__payoff {
	max-width: 30ch;
	margin-top: 1rem;
	color: rgba(255, 255, 255, .7);
	font-size: .95rem;
}

.bs-footer__col h2 {
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
	margin-bottom: .9rem;
}

.bs-footer__col li + li {
	margin-top: .5rem;
}

.bs-footer__col a {
	font-size: .95rem;
	text-decoration: none;
	color: rgba(255, 255, 255, .88);
}

.bs-footer__col a:hover {
	color: var(--grass);
}

.bs-langswitch {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-top: 1.5rem;
}

.bs-langswitch__label {
	font-size: .82rem;
	color: rgba(255, 255, 255, .55);
	margin-right: .2rem;
}

.bs-langswitch__option {
	padding: .3rem .7rem;
	border-radius: var(--r-pill);
	border: 1px solid rgba(255, 255, 255, .25);
	font-size: .82rem;
	font-weight: 700;
	text-decoration: none;
}

.bs-langswitch__option.is-current {
	background: var(--grass);
	border-color: var(--grass);
	color: #fff;
}

.bs-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, .14);
	font-size: .85rem;
	color: rgba(255, 255, 255, .6);
}

.bs-footer__legal ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}

.bs-footer__legal a {
	text-decoration: none;
}

.bs-footer__legal a:hover {
	color: var(--grass);
}

@media (max-width: 900px) {
	.bs-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.bs-footer__brand {
		grid-column: span 2;
	}
}

/* ------------------------------------------------- 13. Campaign page */

.bs-campaign {
	padding-block: clamp(1.5rem, 3vw, 2.75rem) var(--block) !important;
}

.bs-campaign__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.9fr) minmax(20rem, .95fr);
	gap: clamp(1.5rem, 3.5vw, 3.5rem);
	align-items: start;
}

.bs-campaign__title {
	font-size: clamp(1.8rem, 3.2vw, 2.7rem);
	max-width: 20ch;
	margin-bottom: 1.5rem;
}

/* A team action: the team large, the club as a quiet line under it. */
.bs-campaign__club {
	display: block;
	margin-top: .35rem;
	font-size: .48em;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--ink-soft);
}

.bs-notice,
.bs-alert {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-bottom: 1.25rem;
	padding: .85rem 1.1rem;
	border-radius: var(--r-md);
	background: var(--grass);
	color: #fff;
	font-weight: 600;
	font-size: .95rem;
}

.bs-alert {
	background: #FDE9E4;
	color: #7A2412;
}

.bs-notice svg {
	width: 1.2rem;
	height: 1.2rem;
	flex: 0 0 auto;
}

/* Carousel */

.bs-carousel {
	position: relative;
}

.bs-carousel__window {
	overflow: hidden;
	border-radius: var(--r-lg);
	background: var(--mist);
}

.bs-carousel__track {
	display: flex;
	transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}

.bs-carousel__slide {
	flex: 0 0 100%;
	margin: 0;
}

.bs-carousel__slide img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.bs-carousel__dots {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	display: flex;
	gap: .4rem;
}

.bs-dot {
	width: 1.4rem;
	height: .3rem;
	padding: 0;
	border: 0;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .5);
	cursor: pointer;
}

.bs-dot.is-current {
	width: 2.1rem;
	background: #fff;
}

.bs-carousel__arrows {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	display: flex;
	gap: .5rem;
}

.bs-round--dark {
	background: rgba(15, 31, 22, .55);
	border-color: transparent;
	color: #fff;
	backdrop-filter: blur(6px);
}

.bs-round--dark:hover {
	background: rgba(15, 31, 22, .78);
	border-color: transparent;
}

/* Byline and guarantee */

.bs-byline {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--line-soft);
}

.bs-byline__mark {
	width: 2.4rem;
	height: 2.4rem;
	flex: 0 0 auto;
}

.bs-byline__mark img,
.bs-byline__mark svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.bs-byline__text {
	display: grid;
	gap: .1rem;
	font-size: .95rem;
}

.bs-byline__text span {
	color: var(--ink-soft);
	font-size: .9rem;
}

.bs-guarantee {
	display: flex;
	gap: .7rem;
	align-items: flex-start;
	margin-top: 1.25rem;
	padding: .9rem 1.1rem;
	border-radius: var(--r-md);
	background: var(--mist);
}

.bs-guarantee svg {
	width: 1.3rem;
	height: 1.3rem;
	flex: 0 0 auto;
	color: var(--grass);
}

.bs-guarantee > span {
	display: grid;
	gap: .1rem;
	font-size: .9rem;
}

.bs-guarantee b {
	font-size: .95rem;
}

.bs-guarantee span span {
	color: var(--ink-soft);
}

/* Story */

.bs-story {
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.bs-story__body {
	max-width: 68ch;
	font-size: 1.03rem;
	line-height: 1.72;
	color: #253A2E;
}

.bs-story__body p + p {
	margin-top: 1.1rem;
}

.bs-js .bs-story__body.is-clamped {
	position: relative;
	max-height: 21rem;
	overflow: hidden;
}

.bs-js .bs-story__body.is-clamped::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 6rem;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--paper));
}

.bs-js .bs-story__body.is-clamped.is-open {
	max-height: none;
}

.bs-js .bs-story__body.is-clamped.is-open::after {
	display: none;
}

.bs-story__more {
	margin-top: 1rem;
	background: none;
	border: 0;
	border-bottom: 2px solid currentColor;
	padding: 0 0 2px;
	cursor: pointer;
}

/* Updates */

.bs-updates {
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
	padding-top: clamp(1.75rem, 3vw, 2.5rem);
	border-top: 1px solid var(--line-soft);
}

.bs-h3 {
	font-size: clamp(1.2rem, 1.8vw, 1.5rem);
	font-weight: 700;
	margin-bottom: 1.25rem;
}

.bs-updates__list {
	display: grid;
	gap: 1.5rem;
	max-width: 68ch;
}

.bs-update time {
	font-size: .82rem;
	font-weight: 600;
	color: var(--ink-faint);
}

.bs-update h3 {
	font-size: 1.05rem;
	font-weight: 700;
	margin: .2rem 0 .35rem;
}

.bs-update p {
	color: var(--ink-soft);
	font-size: .96rem;
	line-height: 1.6;
}

/* B3 — sponsor block */

.bs-campaign__side {
	position: sticky;
	top: 5.5rem;
}

.bs-sponsorbox {
	display: grid;
	gap: .85rem;
	padding: clamp(1.1rem, 2vw, 1.6rem);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--paper);
	box-shadow: 0 16px 40px rgba(13, 59, 36, .07);
}

.bs-sponsorbox__top {
	display: flex;
	align-items: center;
	gap: .9rem;
}

.bs-ring {
	position: relative;
	display: block;
	width: 4.2rem;
	height: 4.2rem;
	flex: 0 0 auto;
	color: var(--grass);
}

.bs-ring svg {
	width: 100%;
	height: 100%;
}

.bs-ring__label {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: .82rem;
	font-weight: 800;
	color: var(--ink);
}

.bs-sponsorbox__figures {
	display: grid;
	gap: .15rem;
}

.bs-sponsorbox__figures b {
	font-size: 1.06rem;
	font-weight: 800;
	letter-spacing: -.015em;
	line-height: 1.25;
}

.bs-sponsorbox__figures span {
	font-size: .9rem;
	color: var(--ink-soft);
}

.bs-reached {
	display: grid;
	gap: .15rem;
	padding: .75rem .95rem;
	border-radius: var(--r-md);
	background: var(--grass);
	color: #fff;
	font-size: .88rem;
}

.bs-reached b {
	font-size: .96rem;
}

.bs-reached--done {
	background: var(--mist);
	color: var(--ink);
}

.bs-sponsorbox__buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .6rem;
}

.bs-sponsorbox__buttons .bs-btn {
	padding-inline: .6rem;
	font-size: .88rem;
}

.bs-sponsorbox__empty {
	padding: .9rem;
	border-radius: var(--r-md);
	background: var(--mist);
	font-size: .9rem;
	color: var(--ink-soft);
	text-align: center;
}

/* C5 — supporter list */

.bs-sponsors {
	display: grid;
	gap: .1rem;
	margin-top: .35rem;
}

.bs-sponsor {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .55rem 0;
}

.bs-sponsor + .bs-sponsor {
	border-top: 1px solid var(--line-soft);
}

.bs-sponsor__rank {
	width: 1.4rem;
	flex: 0 0 auto;
	font-size: .85rem;
	font-weight: 800;
	color: var(--ink-faint);
	text-align: right;
}

.bs-sponsor--podium .bs-sponsor__rank {
	color: var(--grass);
}

.bs-sponsor__avatar {
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--mist);
	font-size: .78rem;
	font-weight: 800;
	color: var(--pitch);
}

.bs-sponsor__avatar svg {
	width: 1.1rem;
	height: 1.1rem;
	color: var(--ink-faint);
}

.bs-sponsor--podium .bs-sponsor__avatar {
	background: var(--grass);
}

.bs-sponsor__body {
	display: grid;
	gap: .05rem;
	min-width: 0;
}

.bs-sponsor__name {
	font-size: .93rem;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bs-sponsor__meta {
	display: flex;
	gap: .45rem;
	font-size: .82rem;
	color: var(--ink-faint);
}

.bs-sponsor__meta b {
	color: var(--ink);
	font-weight: 700;
}

/* B5 — overlay */

.bs-overlay {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: grid;
	place-items: center;
	padding: clamp(.5rem, 3vw, 2rem);
	background: rgba(10, 24, 16, .55);
	backdrop-filter: blur(3px);
}

.bs-overlay__panel {
	display: flex;
	flex-direction: column;
	width: min(34rem, 100%);
	max-height: min(44rem, 92vh);
	background: var(--paper);
	border-radius: var(--r-lg);
	overflow: hidden;
}

.bs-overlay__panel--narrow {
	width: min(24rem, 100%);
}

.bs-overlay__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.4rem .75rem;
}

.bs-overlay__head h2 {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-size: 1.4rem;
}

.bs-chip {
	padding: .1rem .55rem;
	border-radius: var(--r-sm);
	background: var(--mist);
	font-size: .82rem;
	font-weight: 700;
	color: var(--ink-soft);
}

.bs-overlay__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 0 1.4rem 1rem;
}

.bs-overlay__foot {
	padding: 1rem 1.4rem 1.25rem;
	border-top: 1px solid var(--line-soft);
}

.bs-tabs {
	display: flex;
	gap: .4rem;
	margin-bottom: .9rem;
}

.bs-tab {
	padding: .45rem 1.1rem;
	border: 0;
	border-radius: var(--r-pill);
	background: transparent;
	font-weight: 700;
	font-size: .92rem;
	cursor: pointer;
}

.bs-tab.is-current {
	background: var(--pitch);
	color: #fff;
}

.bs-nudge {
	margin-bottom: .5rem;
	font-size: .93rem;
	color: var(--ink-soft);
}

.bs-topstrip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: .75rem -1.4rem;
	padding: .9rem 1.4rem;
	background: var(--grass);
	color: #fff;
	font-weight: 700;
	font-size: .93rem;
}

.bs-topstrip .bs-btn {
	flex: 0 0 auto;
	padding: .55rem 1.1rem;
	font-size: .88rem;
}

.bs-sharelist {
	display: grid;
	gap: .55rem;
	padding-bottom: .75rem;
}

.bs-sharelist .bs-btn {
	justify-content: flex-start;
}

.bs-sharelist svg {
	width: 1.2rem;
	height: 1.2rem;
}

/* Mobile CTA bar */

.bs-stickybar {
	position: fixed;
	inset: auto 0 0;
	z-index: 45;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
	background: var(--paper);
	border-top: 1px solid var(--line);
	box-shadow: 0 -8px 24px rgba(13, 59, 36, .08);
}

.bs-stickybar__figures {
	display: grid;
	gap: .05rem;
	font-size: .85rem;
}

.bs-stickybar__figures b {
	font-size: .95rem;
}

.bs-stickybar__figures span {
	color: var(--ink-faint);
}

/* B4 — sponsor dialog */

.bs-dialog {
	width: min(32rem, calc(100vw - 2rem));
	padding: 0;
	border: 0;
	border-radius: var(--r-lg);
	background: var(--paper);
	color: var(--ink);
}

.bs-dialog::backdrop {
	background: rgba(10, 24, 16, .55);
}

.bs-dialog__panel {
	display: grid;
	gap: 1rem;
	padding: 1.4rem;
}

.bs-dialog__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.bs-dialog__top h2 {
	font-size: 1.3rem;
}

.bs-dialog__foot {
	font-size: .84rem;
	color: var(--ink-faint);
	text-align: center;
}

.bs-choice,
.bs-toggle {
	display: grid;
	gap: .5rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.bs-choice legend,
.bs-toggle legend,
.bs-field label {
	font-size: .88rem;
	font-weight: 700;
	padding: 0;
}

.bs-choice__opt {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .7rem .9rem;
	border: 1.5px solid var(--line);
	border-radius: var(--r-md);
	cursor: pointer;
}

.bs-choice__opt:has(input:checked) {
	border-color: var(--pitch);
	background: var(--mist);
}

.bs-choice__opt input {
	accent-color: var(--grass);
}

.bs-choice__icon svg {
	width: 1.6rem;
	height: 1.6rem;
	color: var(--grass);
}

.bs-choice__text {
	display: grid;
	gap: .05rem;
	margin-right: auto;
	font-size: .9rem;
}

.bs-choice__text span {
	color: var(--ink-soft);
	font-size: .84rem;
}

.bs-choice__price {
	font-weight: 800;
}

.bs-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: .75rem;
}

.bs-field {
	display: grid;
	gap: .3rem;
}

.bs-field input,
.bs-field textarea {
	width: 100%;
	padding: .65rem .8rem;
	font: inherit;
	border: 1.5px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--paper);
}

.bs-hint {
	font-size: .78rem;
	color: var(--ink-faint);
}

.bs-toggle {
	grid-auto-flow: column;
	justify-content: start;
	gap: 1rem;
}

.bs-toggle label,
.bs-check {
	display: flex;
	align-items: center;
	gap: .45rem;
	font-size: .9rem;
}

.bs-toggle legend {
	grid-column: 1 / -1;
}

.bs-honeypot {
	position: absolute;
	left: -9999px;
}

@media (max-width: 1100px) {
	/* One column, but the sponsor block belongs directly under the photos,
	   not above the title. Dissolving both columns lets the pieces of two
	   branches interleave without duplicating any markup. */
	.bs-campaign__grid {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.bs-campaign__main,
	.bs-campaign__side {
		display: contents;
	}

	.bs-notice { order: 1; }
	.bs-campaign__title { order: 2; }
	.bs-carousel { order: 3; }
	.bs-byline { order: 4; }
	.bs-sponsorbox { order: 5; margin-top: 1.25rem; }
	.bs-guarantee { order: 6; }
	.bs-story { order: 7; }
	/* The blocks that came later (top five, about, FAQ) need a place too,
	   or order 0 puts them above the title. */
	.bs-topinline { order: 8; }
	.bs-about { order: 9; }
	.bs-updates { order: 10; }
	.bs-faq { order: 11; }
}

@media (max-width: 760px) {
	.bs-stickybar {
		display: flex;
	}

	.bs-campaign {
		padding-bottom: 6rem !important;
	}

	.bs-overlay {
		place-items: end stretch;
		padding: 0;
	}

	.bs-overlay__panel {
		width: 100%;
		max-height: 88vh;
		border-radius: var(--r-lg) var(--r-lg) 0 0;
	}

	.bs-field-row {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------ 14. Motion */

.bs-js [data-bs-enter],
.bs-js [data-bs-reveal] {
	opacity: 0;
	transform: translateY(14px);
}

.bs-js [data-bs-enter] {
	animation: bs-rise .7s cubic-bezier(.2, .7, .3, 1) forwards;
	animation-delay: var(--bs-delay, 0ms);
}

.bs-js [data-bs-reveal].is-in {
	animation: bs-rise .7s cubic-bezier(.2, .7, .3, 1) forwards;
}

.bs-js [data-bs-stagger] > * {
	opacity: 0;
	transform: translateY(12px);
}

.bs-js [data-bs-stagger].is-in > * {
	animation: bs-rise .6s cubic-bezier(.2, .7, .3, 1) forwards;
	animation-delay: calc(var(--bs-i, 0) * 70ms);
}

@keyframes bs-rise {
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.bs-js [data-bs-enter],
	.bs-js [data-bs-reveal],
	.bs-js [data-bs-stagger] > * {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}

@media print {
	.bs-js [data-bs-enter],
	.bs-js [data-bs-reveal],
	.bs-js [data-bs-stagger] > * {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ----------------------------------------------- 12. Outline and the ball

   Two devices carry the personality: headings whose first half is drawn as an
   outline rather than filled, and the ball itself, which turns up in the
   corners of the hero, beside a reached target and on every sport chip. */

.bs-filters {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* Only the headline is marked, the way a selection marks a word: a solid
   blue block behind white letters with a hairline outline. Every other
   heading stays plain — the device loses its point if it is everywhere. */
/* The accent word of a section heading: orange, with a sheen on hover. */
.bs-accent {
	color: var(--grass);
	background-image: linear-gradient(100deg, var(--grass) 38%, #FFC89B 50%, var(--grass) 62%);
	background-size: 260% 100%;
	background-position: 150% 0;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: background-position 1.1s ease;
}

h1:hover > .bs-accent,
h2:hover > .bs-accent,
h3:hover > .bs-accent {
	background-position: -50% 0;
}

/* The two balls that roll into the top corners as the page starts moving. */
.bs-cornerball {
	position: absolute;
	top: clamp(-3rem, -4vw, -1.5rem);
	width: clamp(6rem, 12vw, 12rem);
	height: clamp(6rem, 12vw, 12rem);
	color: var(--mist-deep);
	opacity: 0;
	pointer-events: none;
	transition: transform .9s cubic-bezier(.2, .7, .3, 1), opacity .7s ease;
}

.bs-cornerball svg {
	width: 100%;
	height: 100%;
}

.bs-cornerball--left {
	left: clamp(-3rem, -3vw, -1rem);
	transform: translate(-30%, -30%) rotate(-40deg);
}

.bs-cornerball--right {
	right: clamp(-3rem, -3vw, -1rem);
	transform: translate(30%, -30%) rotate(40deg);
}

.bs-cornerball.is-in {
	opacity: 1;
}

.bs-cornerball--left.is-in {
	transform: translate(0, 0) rotate(0deg);
}

.bs-cornerball--right.is-in {
	transform: translate(0, 0) rotate(0deg);
}

/* ---------------------------------------------------------- Hero, tidied */

.bs-hero__note {
	max-width: 34ch;
	color: var(--ink-soft);
	font-size: .98rem;
	font-weight: 600;
}

.bs-hero__support {
	color: var(--ink-faint);
}

/* ------------------------------------------------------- A2a · Size picker */

.bs-live__head {
	display: grid;
	gap: .85rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.bs-live__head p {
	max-width: 56ch;
	color: var(--ink-soft);
	font-size: var(--t-lead);
}

.bs-sizes {
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
	padding-bottom: clamp(1.5rem, 3vw, 2rem);
	border-bottom: 1px solid var(--line-soft);
}

.bs-sizes__head {
	display: grid;
	gap: .5rem;
	margin-bottom: 1.25rem;
}

.bs-sizes__head p {
	max-width: 52ch;
	color: var(--ink-soft);
	font-size: .96rem;
}

.bs-h3 {
	font-size: clamp(1.2rem, 1.9vw, 1.6rem);
	font-weight: 800;
	letter-spacing: -.02em;
}

.bs-sizes__row {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}

.bs-sizepick {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .55rem 1.1rem;
	border: 1.5px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--paper);
	font-weight: 700;
	font-size: .94rem;
	cursor: pointer;
	transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

.bs-sizepick svg {
	width: 1.15rem;
	height: 1.15rem;
	color: var(--grass);
}

.bs-sizepick:hover {
	border-color: var(--pitch);
}

.bs-sizepick.is-current {
	border-color: var(--pitch);
	background: var(--pitch);
	color: #fff;
}

.bs-sizepick.is-current svg {
	color: var(--grass);
}

.bs-live__empty {
	padding: 2.5rem 0;
	color: var(--ink-soft);
	font-size: var(--t-lead);
}

.bs-live__arrows {
	display: flex;
	gap: .6rem;
	margin-top: 2rem;
}

/* --------------------------------------------------- C1 · card, reworked */

.bs-card__goal {
	position: absolute;
	left: .75rem;
	top: .75rem;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .35rem .75rem .35rem .5rem;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .93);
	color: var(--pitch);
	font-size: .8rem;
	font-weight: 700;
	line-height: 1.3;
}

.bs-card__goal svg {
	width: 1.05rem;
	height: 1.05rem;
	color: var(--pitch);
}

.bs-card__flag--reached {
	left: auto;
	right: .75rem;
	top: .75rem;
	background: var(--grass);
	color: #fff;
}

.bs-card__meta {
	display: flex;
	align-items: center;
	gap: .4rem;
}

.bs-card__ball {
	width: 1.05rem;
	height: 1.05rem;
	color: var(--grass);
}

/* Proof, not navigation: the cards do not lift and do not point anywhere. */
.bs-card:hover .bs-card__media img {
	transform: none;
}

/* ---------------------------------------------------- A4 · steps on hover */

.bs-step {
	transition: color .16s ease;
}

.bs-step__no {
	transition: background-color .16s ease, box-shadow .16s ease, color .16s ease;
}

.bs-step:hover .bs-step__no,
.bs-step:focus-within .bs-step__no {
	background: var(--grass);
	box-shadow: none;
	color: #fff;
}

.bs-step:hover .bs-step__icon,
.bs-step:focus-within .bs-step__icon {
	color: var(--pitch);
}

/* Reveals sweep in from the left, so scrolling down reads left to right. */
.bs-js [data-bs-stagger] > * {
	transform: translate3d(-22px, 0, 0);
}

.bs-js [data-bs-stagger].is-in > * {
	animation-name: bs-sweep;
}

@keyframes bs-sweep {
	to {
		opacity: 1;
		transform: none;
	}
}

/* Cards stand on the top of their row, so a taller neighbour does not
   stretch every photograph in the row. */
.bs-live__grid {
	align-items: start;
}

/* A finished action that fell short still gets a green line, only quieter.
   Grey would read as broken rather than as "not quite". */
.bs-progress--ended .bs-progress__fill {
	background: #2E7D5B;
	background: color-mix(in srgb, var(--grass) 55%, var(--pitch));
}

.bs-progress.is-reached .bs-progress__fill {
	background: var(--grass);
}


/* ------------------------------------------------- 13. Page and signup */

.bs-page {
	padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--block);
}

.bs-page__article {
	max-width: 46rem;
	margin-inline: auto;
}

.bs-display--sm {
	font-size: clamp(1.9rem, 3.4vw, 2.8rem);
	margin-bottom: 1.5rem;
}

.bs-prose p + p {
	margin-top: 1.1rem;
}

/* The signup itself: three steps, one visible at a time. */

.bs-signup {
	display: grid;
	gap: 1.5rem;
	max-width: 44rem;
}

.bs-steps-strip {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	font-size: .9rem;
	font-weight: 600;
	color: var(--ink-faint);
}

.bs-steps-strip__item {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}

.bs-steps-strip__item span {
	display: grid;
	place-items: center;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 50%;
	background: var(--mist);
	font-size: .82rem;
	font-weight: 700;
	color: var(--ink-soft);
}

.bs-steps-strip__item.is-current {
	color: var(--ink);
}

.bs-steps-strip__item.is-current span {
	background: var(--blue);
	color: #fff;
}

.bs-steps-strip__item.is-done span {
	background: var(--grass);
	color: #fff;
}

.bs-formstep {
	display: none;
	margin: 0;
	padding: 0;
	border: 0;
}

.bs-formstep.is-current {
	display: grid;
	gap: 1.1rem;
}

.bs-formstep__title {
	padding: 0;
	font-size: clamp(1.2rem, 1.9vw, 1.5rem);
	font-weight: 800;
	letter-spacing: -.02em;
}

.bs-formstep__nav {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: .5rem;
}

/* Fields are shared with the sponsor dialog; only the spacing differs here. */
.bs-signup .bs-field-row {
	gap: 1rem;
}

.bs-signup .bs-field input,
.bs-signup .bs-field textarea,
.bs-signup .bs-field select {
	padding: .8rem .95rem;
}

.bs-signup .bs-field input:focus,
.bs-signup .bs-field textarea:focus {
	border-color: var(--blue);
	outline: none;
}

/* The logo drop area. */
.bs-dropzone {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.25rem;
	border: 2px dashed var(--line);
	border-radius: var(--r-md);
	background: var(--mist);
	cursor: pointer;
	transition: border-color .16s ease, background-color .16s ease;
}

.bs-dropzone:hover,
.bs-dropzone:focus-within {
	border-color: var(--blue);
	background: var(--paper);
}

.bs-dropzone input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.bs-dropzone__preview {
	display: grid;
	place-items: center;
	width: 3.4rem;
	height: 3.4rem;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--paper);
	box-shadow: inset 0 0 0 1px var(--line-soft);
	overflow: hidden;
}

.bs-dropzone__preview img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Team photos: the preview is a strip of up to three thumbnails, and the
   strip stays empty-but-present so the box keeps its height. */
.bs-dropzone__preview--strip {
	display: flex;
	gap: .35rem;
	width: auto;
	min-width: 3.4rem;
	height: 3.4rem;
	border-radius: var(--r-sm, .5rem);
	background: transparent;
	box-shadow: none;
}

.bs-dropzone__preview--strip:empty {
	background: var(--paper);
	box-shadow: inset 0 0 0 1px var(--line-soft);
}

.bs-dropzone__preview--strip img {
	width: 3.4rem;
	height: 3.4rem;
	border-radius: var(--r-sm, .5rem);
	object-fit: cover;
}

.bs-dropzone__text {
	display: grid;
	gap: .1rem;
	font-size: .9rem;
	color: var(--ink-soft);
}

.bs-dropzone__text strong {
	font-size: .97rem;
	color: var(--ink);
}

/* The state after sending. */
.bs-signup--done {
	justify-items: start;
	gap: .9rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border-radius: var(--r-md);
	background: var(--mist);
}

.bs-signup__check {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--grass);
	color: #fff;
}

.bs-signup__check svg {
	width: 1.5rem;
	height: 1.5rem;
}

.bs-signup--done h2 {
	font-size: clamp(1.3rem, 2.2vw, 1.7rem);
}

.bs-signup--done p {
	max-width: 52ch;
	color: var(--ink-soft);
}

/* Target and result sit on opposite corners of the photograph; side by side
   they collided as soon as the card narrowed. */
.bs-card__flag--reached {
	top: auto;
	bottom: .75rem;
	right: .75rem;
}

/* On the overview the card is a way through, so the whole thing is the hit
   area and the photograph answers the pointer again. */
.bs-card--link {
	position: relative;
}

.bs-card--link .bs-card__title a {
	text-decoration: none;
}

.bs-card--link .bs-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.bs-card--link:hover .bs-card__media img {
	transform: scale(1.03);
}

.bs-card--link:hover .bs-card__title {
	color: var(--blue);
}

/* ------------------------------------------------- 15. The wordmark

   The logo is supplied artwork, so the brand in the bar is an image now
   rather than a glyph plus type. Height is fixed, width follows. */

.bs-logo {
	display: block;
	height: clamp(1.5rem, 2.2vw, 1.9rem);
	width: auto;
}

.bs-footer .bs-logo {
	height: clamp(1.6rem, 2.4vw, 2.1rem);
}

/* A green that still reads on the dark bands: the brand green is deep by
   design, which is right on white and too quiet on near-black. */
:root {
	--grass-bright: #2FA83A;
	--grass-bright: color-mix(in srgb, var(--grass) 55%, #fff);
}

.bs-counter b,
.bs-footer__col h2 {
	color: var(--grass-bright);
}

.bs-langswitch__option.is-current {
	background: var(--grass-bright);
	border-color: var(--grass-bright);
	color: var(--pitch);
}

/* ==========================================================================
   Ported effects
   --------------------------------------------------------------------------
   Nine patterns from React Bits, rebuilt in plain CSS and vanilla JS because
   this theme has no build step: MaskedHeading, ScrollFloat, SpotlightCard,
   TiltedCard, GlareHover, StarBorder, ClickSpark, PillNav and LogoLoop.
   Everything below is decoration — remove the class and the page still reads.
   ========================================================================== */

/* --- MaskedHeading: the opening words are cut out of a moving fill. ---
   Default is the brand gradient with a sheen crossing it. Hand the heading a
   --bs-mask of url(...) and the same words are cut out of that photograph
   instead. --- */
.bs-hero__title .bs-fill {
	position: relative;
	background-image: linear-gradient(
		100deg,
		var(--blue) 0%,
		var(--grass) 32%,
		#FFC083 48%,
		var(--grass) 64%,
		var(--blue) 100%
	);
	background-size: 230% 100%;
	background-position: 120% 0;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--grass);
}

.bs-js .bs-hero__title .bs-fill {
	animation: bs-sheen 7s linear infinite;
}

@keyframes bs-sheen {
	to { background-position: -120% 0; }
}

/* Given a photograph, the words carry that instead of the gradient. */
.bs-hero__title[style*="--bs-mask"] .bs-fill {
	background-image: var(--bs-mask);
	background-size: 125% auto;
	background-position: 50% 42%;
	animation: none;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.bs-hero__title .bs-fill {
		-webkit-text-fill-color: currentColor;
		background: none;
	}
}
/* --- ScrollFloat: headings arrive word by word. --- */
.bs-js [data-bs-float] .bs-word {
	display: inline-block;
	will-change: transform, opacity;
}

.bs-js [data-bs-float]:not(.is-floated) .bs-word {
	opacity: 0;
	transform: translate3d(0, .5em, 0) rotate(1.5deg);
	filter: blur(6px);
}

.bs-js [data-bs-float].is-floated .bs-word {
	opacity: 1;
	transform: none;
	filter: none;
	transition: opacity .7s ease var(--bs-w, 0ms),
		transform .9s cubic-bezier(.2, .8, .25, 1) var(--bs-w, 0ms),
		filter .7s ease var(--bs-w, 0ms);
}

/* --- SpotlightCard: a glow that follows the pointer, plus a lit edge. --- */
.bs-spot {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	transition: opacity .4s ease;
	background: radial-gradient(
		16rem 16rem at var(--bs-x, 50%) var(--bs-y, 50%),
		rgba(242, 102, 10, .20),
		rgba(242, 102, 10, .07) 42%,
		transparent 68%
	);
}

.bs-spot--edge {
	background: radial-gradient(
		14rem 14rem at var(--bs-x, 50%) var(--bs-y, 50%),
		rgba(242, 102, 10, .85),
		rgba(242, 102, 10, .15) 45%,
		transparent 70%
	);
	padding: 1px;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.bs-card:hover .bs-spot,
.bs-card:focus-within .bs-spot {
	opacity: 1;
}

/* The photograph lifts a little, so the glow does not float on a dead slab.
   It is the photograph and not the card because the card is still holding
   the entrance animation, and that would win. */
.bs-card__media {
	transition: transform .45s cubic-bezier(.2, .8, .25, 1), box-shadow .45s ease;
}

.bs-js .bs-card:hover .bs-card__media {
	transform: translateY(-4px);
	box-shadow: 0 1.4rem 2.6rem -1.4rem rgba(12, 20, 34, .45);
}

/* --- GlareHover: a diagonal sheen crossing the photograph. --- */
.bs-glare {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		-45deg,
		rgba(255, 255, 255, 0) 58%,
		rgba(255, 255, 255, .42) 70%,
		rgba(255, 255, 255, 0) 82%
	);
	background-size: 240% 240%;
	background-position: -120% -120%;
	background-repeat: no-repeat;
	transition: background-position .85s ease;
}

.bs-card:hover .bs-glare,
.bs-logos__item:hover .bs-glare {
	background-position: 120% 120%;
}

/* --- TiltedCard: the quotes tip towards the pointer. --- */
.bs-js [data-bs-tilt] {
	transform: rotate(var(--tilt, 0deg)) perspective(900px)
		rotateX(var(--bs-rx, 0deg)) rotateY(var(--bs-ry, 0deg))
		translateY(var(--bs-lift, 0));
	transform-style: preserve-3d;
	transition: transform .5s cubic-bezier(.2, .8, .25, 1);
}

.bs-js [data-bs-tilt].is-tilting {
	transition: transform .12s linear;
}

/* --- StarBorder: a light running around the main call to action. --- */
.bs-star {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.bs-star::after {
	content: "";
	position: absolute;
	/* Below the cover, or the light paints over the lettering. */
	z-index: -2;
	inset: -140%;
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		transparent 300deg,
		rgba(255, 255, 255, .95) 345deg,
		transparent 360deg
	);
	animation: bs-star 4.5s linear infinite;
	filter: blur(4px);
	opacity: .7;
}

.bs-star::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 2px;
	border-radius: inherit;
	background: inherit;
	background-color: var(--blue);
}

@keyframes bs-star {
	to { transform: rotate(1turn); }
}

/* --- ClickSpark: the canvas the sparks are drawn on. --- */
.bs-sparks {
	position: fixed;
	inset: 0;
	z-index: 90;
	pointer-events: none;
}

/* --- PillNav: one pill slides behind the chosen sport. --- */
.bs-sizes__row {
	position: relative;
}

.bs-pillmark {
	position: absolute;
	z-index: 0;
	top: var(--bs-t, 0);
	left: var(--bs-l, 0);
	width: var(--bs-w, 0);
	height: var(--bs-h, 0);
	border-radius: 999px;
	background: var(--pitch);
	opacity: 0;
	pointer-events: none;
	transition: transform .45s cubic-bezier(.2, .8, .25, 1),
		width .45s cubic-bezier(.2, .8, .25, 1),
		opacity .3s ease;
}

.bs-pillmark.is-on {
	opacity: 1;
}

.bs-js .bs-sizepick {
	position: relative;
	z-index: 1;
	transition: color .3s ease, border-color .3s ease, background-color .3s ease;
}

/* The pill does the filling now, so the button only carries the lettering. */
.bs-js .bs-sizepick.is-current {
	background: transparent;
	border-color: transparent;
}

/* --- LogoLoop: the crest row runs on, fading out at both ends. --- */
.bs-logos__track {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7rem, #000 calc(100% - 7rem), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7rem, #000 calc(100% - 7rem), transparent);
}

.bs-logos__item {
	position: relative;
	overflow: hidden;
	transition: transform .35s ease, color .35s ease;
}

.bs-js .bs-logos__item:hover {
	transform: translateY(-3px);
	color: var(--grass);
}

@media (prefers-reduced-motion: reduce) {
	.bs-js [data-bs-float] .bs-word,
	.bs-js [data-bs-float]:not(.is-floated) .bs-word {
		opacity: 1;
		transform: none;
		filter: none;
	}

	.bs-star::after {
		animation: none;
		opacity: 0;
	}

	.bs-js [data-bs-tilt] {
		transform: rotate(var(--tilt, 0deg));
	}
}

/* LogoLoop proper: two lanes running against each other, built by the script
   so the markup stays a plain grid when there is none. */
.bs-logos__track.is-loop {
	overflow: hidden;
}

.bs-logos__track.is-loop {
	position: relative;
}

/* The real list stays for screen readers; the lanes are the decoration. */
.bs-logos__track.is-loop .bs-logos__row {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.bs-logos__lane {
	display: flex;
	flex-wrap: nowrap;
	gap: clamp(1rem, 2.5vw, 2.5rem);
	width: max-content;
	margin: 0;
	padding: .35rem 0;
	list-style: none;
	animation: bs-loop var(--bs-dur, 60s) linear infinite;
}

.bs-logos__lane--back {
	animation-direction: reverse;
}

.bs-logos__track.is-loop:hover .bs-logos__lane {
	animation-play-state: paused;
}

.bs-logos__lane .bs-logos__item {
	flex: 0 0 auto;
	width: auto;
	padding-right: 1.25rem;
	overflow: visible;
	white-space: nowrap;
}

@keyframes bs-loop {
	to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.bs-logos__lane {
		animation: none;
	}

	.bs-logos__track.is-loop {
		overflow-x: auto;
	}
}

/* ==========================================================================
   Client round: proof strip, packages, FAQ, live feed, top scorers, team
   signup, legal line. Same tokens, same radii, nothing new in the palette.
   ========================================================================== */

/* --- A1b · proof strip under the hero button --- */
.bs-proof {
	display: flex;
	justify-content: center;
	gap: clamp(1.25rem, 4vw, 3.5rem);
	margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
	padding: 0;
	list-style: none;
}

.bs-proof__item {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: auto auto;
	column-gap: .6rem;
	align-items: center;
	text-align: left;
}

.bs-proof__icon {
	grid-row: 1 / 3;
	width: 2.1rem;
	height: 2.1rem;
	color: var(--grass);
}

.bs-proof__icon svg {
	width: 100%;
	height: 100%;
}

.bs-proof__item b {
	font-size: clamp(1.25rem, 2.2vw, 1.7rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.1;
}

.bs-proof__item > span:last-child {
	font-size: .82rem;
	color: var(--ink-soft);
}

@media (max-width: 640px) {
	.bs-proof {
		flex-wrap: wrap;
		gap: 1rem 1.5rem;
	}
}

/* --- A2 · the three packages --- */
/* Closer to the hero and to the proof than the other blocks: these three
   belong together. The selector matches the generic section rule. */
.bs-main > .bs-packages {
	padding-block: clamp(2.25rem, 4vw, 3.5rem) clamp(1.5rem, 2.5vw, 2rem);
}

.bs-packages__head {
	max-width: 44rem;
	margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.bs-packages__head p {
	margin-top: .75rem;
	color: var(--ink-soft);
	font-size: var(--t-lead);
}

.bs-packages__row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bs-package {
	position: relative;
	display: grid;
	gap: .35rem;
	align-content: start;
	padding: clamp(1.4rem, 2.4vw, 2rem);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--paper);
	transition: transform .4s cubic-bezier(.2, .8, .25, 1), box-shadow .4s ease, border-color .4s ease;
}

.bs-js .bs-package:hover {
	transform: translateY(-4px);
	border-color: var(--grass);
	box-shadow: 0 1.6rem 2.8rem -1.6rem rgba(12, 20, 34, .35);
}

.bs-package--golden {
	background: var(--pitch);
	color: #fff;
	border-color: var(--pitch);
}

.bs-package__badge {
	position: absolute;
	top: 1rem;
	right: 1rem;
	padding: .3rem .7rem;
	border-radius: 999px;
	background: var(--grass);
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .02em;
}

.bs-package__icon {
	width: 3rem;
	height: 3rem;
	margin-bottom: .6rem;
	color: var(--grass);
}

.bs-package__icon svg {
	width: 100%;
	height: 100%;
}

.bs-package__title {
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: -.015em;
}

.bs-package__balls {
	font-weight: 700;
	color: var(--grass);
}

.bs-package__text {
	color: var(--ink-soft);
	font-size: .95rem;
	line-height: 1.55;
}

.bs-package--golden .bs-package__text {
	color: rgba(255, 255, 255, .78);
}

.bs-package__price {
	margin-top: .6rem;
	padding-top: .8rem;
	border-top: 1px solid var(--line-soft);
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -.02em;
}

.bs-package--golden .bs-package__price {
	border-top-color: rgba(255, 255, 255, .18);
}

.bs-packages__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 2rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
}

.bs-packages__foot {
	margin: 0;
	color: var(--ink-faint);
	font-size: .85rem;
}

/* The partner line: a quiet label and the mono wordmark, never a link. */
.bs-steps__note {
	max-width: 46rem;
	margin: 2.25rem auto 0;
	text-align: center;
	color: var(--ink-soft, var(--ink-faint));
	font-size: 1.05rem;
	line-height: 1.6;
}

.bs-claim__terms {
	margin: 1.25rem 0 0;
}

.bs-packages__partner {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	margin: 0;
	color: var(--ink-faint);
	font-size: .85rem;
	white-space: nowrap;
}

.bs-packages__partner img + img {
	margin-left: 1.25rem;
}

.bs-packages__partner img {
	display: block;
	width: auto;
	height: 2.5rem;
	margin-block: -.25rem;
	opacity: .92;
}

@media (max-width: 860px) {
	.bs-packages__row {
		grid-template-columns: 1fr;
	}
}

/* --- which sport, on the signup form --- */
.bs-sportpick {
	border: 0;
	padding: 0;
	margin: 0 0 1.25rem;
}

.bs-sportpick > legend {
	font-weight: 700;
	font-size: .95rem;
	margin-bottom: .5rem;
}

.bs-sportpick__row {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.bs-sportpick__opt input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.bs-sportpick__opt span {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .55rem 1rem .55rem .8rem;
	border: 1.5px solid var(--line);
	border-radius: var(--r-pill);
	background: #fff;
	font-weight: 700;
	font-size: .95rem;
	cursor: pointer;
	transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

.bs-sportpick__opt span svg {
	width: 1.15rem;
	height: 1.15rem;
	color: var(--grass);
}

.bs-sportpick__opt:hover span {
	border-color: var(--pitch);
}

.bs-sportpick__opt input:checked + span {
	border-color: var(--pitch);
	background: var(--pitch);
	color: #fff;
}

.bs-sportpick__opt input:checked + span svg {
	color: #fff;
}

.bs-sportpick__opt input:focus-visible + span {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}

/* --- size guide on the claim page --- */
.bs-claim__sizeguide {
	margin: 0 0 1.25rem;
	padding: .85rem 1.1rem;
	border-radius: var(--r-md);
	background: var(--mist);
	font-size: .95rem;
	color: var(--ink-soft);
}

/* --- how many packages, in the sponsor dialog --- */
.bs-qty {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: .4rem 1rem;
	margin: 1rem 0 1.25rem;
}

.bs-qty > label {
	font-weight: 700;
	font-size: .95rem;
}

.bs-qty__ctl {
	display: inline-flex;
	align-items: center;
	justify-self: start;
	border: 1.5px solid var(--line);
	border-radius: var(--r-pill);
	overflow: hidden;
	background: #fff;
}

.bs-qty__ctl button {
	width: 2.6rem;
	height: 2.6rem;
	border: 0;
	background: var(--mist);
	color: var(--ink);
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.bs-qty__ctl button:hover {
	background: var(--line);
}

.bs-qty__ctl input {
	width: 3.4rem;
	height: 2.6rem;
	border: 0;
	text-align: center;
	font-weight: 700;
	font-size: 1.05rem;
	-moz-appearance: textfield;
	appearance: textfield;
}

.bs-qty__ctl input::-webkit-outer-spin-button,
.bs-qty__ctl input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.bs-qty__ctl input:focus {
	outline: none;
	background: var(--mist);
}

/* Sponsor dialog: numbered sections with one rhythm. */
.bs-dialog--donate .bs-dialog__panel {
	gap: 0;
	padding: 1.25rem 1.4rem 1.4rem;
}

.bs-dialog--donate .bs-dialog__top {
	padding-bottom: .9rem;
}

.bs-dialog--donate .bs-alert {
	margin: 0 0 .75rem;
}

.bs-dialog__section {
	display: grid;
	gap: .85rem;
	padding: 1.1rem 0;
	border-top: 1px solid var(--line);
}

.bs-dialog__section--cta {
	gap: .9rem;
	padding-bottom: 0;
}

.bs-dialog__label {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0;
	padding: 0;
	font-size: .98rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--ink);
}

legend.bs-dialog__label {
	margin-bottom: .85rem;
}

.bs-dialog__label span {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--grass);
	color: #fff;
	font-size: .74rem;
	font-weight: 800;
}

.bs-dialog--donate .bs-choice {
	gap: .55rem;
}

.bs-choice__opt--custom {
	flex-wrap: nowrap;
}

.bs-choice__opt--custom .bs-choice__text {
	min-width: 0;
}

.bs-choice__opt--custom .bs-qty__ctl {
	flex: 0 0 auto;
	margin-left: auto;
	background: #fff;
}

.bs-choice__opt--custom .bs-qty__ctl button {
	width: 2.2rem;
	height: 2.2rem;
	font-size: 1.1rem;
}

.bs-choice__opt--custom .bs-qty__ctl input {
	width: 2.8rem;
	height: 2.2rem;
	font-size: .98rem;
}

.bs-choice__opt--custom:has(input[type="radio"]:checked) .bs-choice__text span {
	color: var(--ink);
	font-weight: 700;
}

.bs-choice__opt--custom.is-disabled .bs-qty__ctl {
	pointer-events: none;
}

@media (max-width: 480px) {
	.bs-choice__opt--custom {
		gap: .6rem;
	}

	.bs-choice__opt--custom .bs-choice__text strong {
		white-space: nowrap;
	}

	.bs-choice__opt--custom .bs-choice__text span {
		font-size: .8rem;
	}

	.bs-choice__opt--custom .bs-qty__ctl button {
		width: 1.9rem;
		height: 2rem;
		font-size: 1rem;
	}

	.bs-choice__opt--custom .bs-qty__ctl input {
		width: 2.3rem;
		height: 2rem;
		font-size: .92rem;
	}
}

@media (max-width: 400px) {
	/* On the narrowest phones the title, the total and the stepper only fit
	   on one line without the decorative ball. */
	.bs-choice__opt--custom .bs-choice__icon {
		display: none;
	}
}

.bs-qty--bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .6rem 1rem;
	margin: 0;
	padding: .55rem .9rem .55rem .55rem;
	background: var(--mist);
	border-radius: var(--r-md);
}

.bs-qty--bar .bs-qty__total {
	grid-column: auto;
	margin: 0;
	font-weight: 800;
	color: var(--ink);
}

.bs-qty--bar .bs-qty__total:empty {
	display: none;
}

.bs-seg {
	display: grid;
	gap: .4rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.bs-seg legend {
	padding: 0;
	font-size: .88rem;
	font-weight: 700;
}

.bs-seg__pills {
	display: inline-flex;
	justify-self: start;
	padding: .25rem;
	background: var(--mist);
	border-radius: var(--r-pill);
}

.bs-seg__pills label {
	position: relative;
	padding: .5rem 1.05rem;
	border-radius: var(--r-pill);
	font-size: .9rem;
	font-weight: 700;
	color: var(--ink-soft);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.bs-seg__pills input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.bs-seg__pills label:has(input:checked) {
	background: #fff;
	color: var(--ink);
	box-shadow: 0 1px 3px rgba(12, 20, 34, .14);
}

.bs-seg__pills label:has(input:focus-visible) {
	outline: 2px solid var(--grass);
	outline-offset: 1px;
}

.bs-dialog--donate .bs-check--terms {
	margin: 0;
}

.bs-dialog--donate .bs-dialog__foot {
	margin: 0;
}

@media (max-width: 480px) {
	.bs-dialog--donate .bs-dialog__panel {
		padding: 1.1rem 1rem 1.2rem;
	}

	.bs-dialog--donate .bs-field-row {
		grid-template-columns: 1fr;
	}
}

.bs-qty__total {
	grid-column: 1 / -1;
	margin: 0;
	font-weight: 700;
	color: var(--ink-soft);
}

.bs-check--terms {
	margin: 0 0 1rem;
}

.bs-check--terms a {
	text-decoration: underline;
	font-weight: 700;
}

/* --- FAQ, folded --- */
.bs-faq {
	padding-block: var(--block);
	background: var(--mist);
}

.bs-faq__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

.bs-faq__head p {
	margin-top: .75rem;
	color: var(--ink-soft);
	font-size: var(--t-lead);
}

.bs-faq__list {
	display: grid;
	gap: .6rem;
}

.bs-faq__item {
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--paper);
	transition: border-color .3s ease;
}

.bs-faq__item[open] {
	border-color: var(--grass);
}

.bs-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.2rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.bs-faq__item summary::-webkit-details-marker {
	display: none;
}

.bs-faq__chev {
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
	color: var(--grass);
	transition: transform .3s ease;
}

.bs-faq__item[open] .bs-faq__chev {
	transform: rotate(90deg);
}

.bs-faq__item p {
	padding: 0 1.2rem 1.1rem;
	color: var(--ink-soft);
	line-height: 1.6;
}

.bs-faq--inline {
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
	padding: clamp(1.75rem, 3vw, 2.5rem) 0 0;
	border-top: 1px solid var(--line-soft);
	background: none;
}

.bs-faq--inline .bs-faq__list {
	max-width: 68ch;
}

@media (max-width: 860px) {
	.bs-faq__grid {
		grid-template-columns: 1fr;
	}
}

/* --- B3b · live feed --- */
.bs-feed__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: .35rem;
	font-size: .78rem;
	font-weight: 700;
	color: var(--ink-soft);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.bs-feed__live {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var(--grass);
}

.bs-feed__dot {
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: var(--grass);
	box-shadow: 0 0 0 0 rgba(242, 102, 10, .5);
	animation: bs-pulse 1.8s ease-out infinite;
}

@keyframes bs-pulse {
	to { box-shadow: 0 0 0 .55rem rgba(242, 102, 10, 0); }
}

.bs-feed__recent {
	margin-top: .35rem;
	padding: .6rem .8rem;
	border-radius: var(--r-md);
	background: var(--mist);
	font-size: .85rem;
	font-weight: 600;
	color: var(--ink-soft);
}

.bs-sponsor.is-new {
	animation: bs-rise .6s cubic-bezier(.2, .7, .3, 1);
}

.bs-sponsor__avatar--anon {
	background: var(--mist-deep);
}

/* --- B5b · top scorers on the page --- */
.bs-topinline {
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
	padding-top: clamp(1.75rem, 3vw, 2.5rem);
	border-top: 1px solid var(--line-soft);
}

.bs-topinline__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: .75rem;
}

.bs-topinline__head .bs-h3 {
	margin-bottom: .2rem;
}

.bs-topinline__head p {
	color: var(--ink-soft);
	font-size: .95rem;
}

.bs-tabs--small .bs-tab {
	padding: .4rem .85rem;
	font-size: .85rem;
}

.bs-topinline .bs-sponsors {
	max-width: 36rem;
}

.bs-topinline__all {
	margin-top: 1rem;
}

.bs-topinline__all .bs-textlink {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

@media (max-width: 640px) {
	.bs-topinline__head {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* --- B2b · about the club --- */
.bs-about {
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
	padding-top: clamp(1.75rem, 3vw, 2.5rem);
	border-top: 1px solid var(--line-soft);
}

.bs-about__body {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1.1rem;
	max-width: 68ch;
}

.bs-about__mark {
	width: 3.4rem;
	height: 3.4rem;
}

.bs-about__mark img,
.bs-about__mark svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.bs-about__text {
	display: grid;
	gap: .55rem;
	color: var(--ink-soft);
	line-height: 1.6;
}

.bs-about__name {
	color: var(--ink);
}

.bs-about__name b {
	font-weight: 800;
}

.bs-about__team {
	display: inline-block;
	padding: .3rem .75rem;
	border-radius: 999px;
	background: var(--mist);
	color: var(--ink);
	font-size: .85rem;
	font-weight: 700;
	justify-self: start;
}

.bs-about__contact {
	font-size: .9rem;
	color: var(--ink-faint);
}

/* --- team chip on a card --- */
.bs-card__team {
	margin-left: .35rem;
	padding: .15rem .55rem;
	border-radius: 999px;
	background: var(--mist);
	font-size: .72rem;
	font-weight: 700;
	color: var(--ink);
}

/* --- notice states after a payment --- */
.bs-notice span {
	flex: 1 1 auto;
}

.bs-notice .bs-textlink {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font: inherit;
	font-weight: 800;
	text-decoration: underline;
	cursor: pointer;
}

.bs-notice--failed {
	background: #FDE9E4;
	color: #7A2412;
}

.bs-notice--pending {
	background: var(--mist);
	color: var(--ink);
}

/* --- the sponsor dialog: legal line --- */
.bs-dialog__legal {
	margin-top: .75rem;
	font-size: .8rem;
	color: var(--ink-faint);
	text-align: center;
}

.bs-dialog__legal a {
	color: inherit;
	font-weight: 700;
}

/* --- signup: who signs up --- */
.bs-scope {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .6rem;
	margin: 0 0 .25rem;
	padding: 0;
	border: 0;
}

.bs-scope legend {
	grid-column: 1 / -1;
	margin-bottom: .5rem;
	font-weight: 700;
	font-size: .95rem;
}

.bs-scope__opt {
	position: relative;
	display: flex;
	gap: .7rem;
	align-items: flex-start;
	padding: .9rem 1rem;
	border: 1.5px solid var(--line);
	border-radius: var(--r-md);
	background: var(--paper);
	cursor: pointer;
	transition: border-color .25s ease, background-color .25s ease;
}

.bs-scope__opt:hover {
	border-color: var(--pitch);
}

.bs-scope__opt:has(input:checked) {
	border-color: var(--grass);
	background: color-mix(in srgb, var(--grass) 7%, var(--paper));
}

.bs-scope__opt input {
	margin-top: .25rem;
	accent-color: var(--grass);
}

.bs-scope__text {
	display: grid;
	gap: .15rem;
}

.bs-scope__text strong {
	font-size: .95rem;
}

.bs-scope__text span {
	font-size: .82rem;
	color: var(--ink-soft);
}

.bs-teamfields {
	display: grid;
	gap: 1.1rem;
	padding: 1.1rem;
	border-radius: var(--r-md);
	background: var(--mist);
}

.bs-check--boxed {
	align-items: flex-start;
	padding: .9rem 1rem;
	border: 1.5px solid var(--line);
	border-radius: var(--r-md);
	background: var(--paper);
	line-height: 1.5;
}

.bs-check--boxed input {
	margin-top: .2rem;
	accent-color: var(--grass);
}

.bs-check--boxed small {
	display: block;
	margin-top: .3rem;
	color: var(--ink-faint);
	font-size: .8rem;
}

.bs-check--boxed a {
	font-weight: 700;
	color: inherit;
}

.bs-signup__after {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem;
	margin-top: 1.5rem;
}

@media (max-width: 560px) {
	.bs-scope {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bs-feed__dot,
	.bs-sponsor.is-new {
		animation: none;
	}
}

/* --- legal pages and other long text --- */
.bs-prose {
	color: var(--ink-soft);
	line-height: 1.7;
}

.bs-prose h2 {
	margin: 2.25rem 0 .6rem;
	color: var(--ink);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -.01em;
}

.bs-prose h2:first-child {
	margin-top: 0;
}

.bs-prose h3 {
	margin: 1.6rem 0 .4rem;
	color: var(--ink);
	font-size: 1.05rem;
	font-weight: 700;
}

.bs-prose p + p,
.bs-prose ul + p {
	margin-top: .9rem;
}

.bs-prose ul,
.bs-prose ol {
	margin: .6rem 0 .6rem 1.2rem;
}

.bs-prose a {
	color: var(--ink);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--grass);
	text-underline-offset: .15em;
}

.bs-prose strong {
	color: var(--ink);
}

/* --- feedback round: pill, star hover --- */

/* The pill is a child of a row that sweeps in; keep it out of that
   animation, or the animation pins its position. */
.bs-js [data-bs-stagger] > .bs-pillmark,
.bs-js [data-bs-stagger].is-in > .bs-pillmark {
	animation: none;
	opacity: 0;
	transform: none;
	transition: left .45s cubic-bezier(.2, .8, .25, 1),
		top .45s cubic-bezier(.2, .8, .25, 1),
		width .45s cubic-bezier(.2, .8, .25, 1),
		opacity .3s ease;
}

.bs-js [data-bs-stagger] > .bs-pillmark.is-on {
	opacity: 1;
}

/* No pill on screen yet: the button fills itself, like it always did. */
.bs-js .bs-sizes__row:not(:has(.bs-pillmark.is-on)) .bs-sizepick.is-current {
	background: var(--pitch);
	border-color: var(--pitch);
}

/* Hover hollows a button out. The star cover has to let go as well, or the
   fill stays orange while the lettering turns orange. */
.bs-star:hover::before {
	background-color: transparent;
}

.bs-star:hover::after {
	opacity: 0;
}

/* Anything that sits in an orange circle or block is white. */
.bs-sponsor--podium .bs-sponsor__avatar,
.bs-sponsor--podium .bs-sponsor__avatar svg,
.bs-notice svg,
.bs-reached b,
.bs-topstrip p {
	color: #fff;
}

/* --- generated icon set (sprite) --- */
.bs-ico {
	display: inline-block;
	width: 1em;
	height: 1em;
	fill: currentColor;
	vertical-align: middle;
}

.bs-sponsor__avatar .bs-sponsor__anon {
	width: 58%;
	height: 58%;
}

.bs-sponsor__avatar--anon {
	display: inline-grid;
	place-items: center;
}
/* ==========================================================================
   Client feedback, round two: green joins orange, buttons pull, photos in
   colour, packages click through, the closing band gets a photograph.
   ========================================================================== */

:root {
	--green: #22A559;
}

/* Green for what is going well: progress, target reached. */
.bs-progress__fill,
.bs-progress--reached .bs-progress__fill,
.bs-progress.is-reached .bs-progress__fill {
	background: var(--green);
}

.bs-progress--ended .bs-progress__fill {
	background: color-mix(in srgb, var(--green) 70%, var(--pitch));
}

.bs-ring {
	color: var(--green);
}

.bs-card__flag--reached,
.bs-reached {
	background: var(--green);
	color: #fff;
}

.bs-reached--done {
	background: var(--mist);
	color: var(--ink);
}

/* Finished actions in full colour; grey read as "dead". */
.bs-card--ended .bs-card__media img {
	filter: none;
	opacity: 1;
}

/* A button that pulls: filled, and darker when you reach for it. The
   hollow hover is gone; it read as "disabled". */
.bs-btn:hover {
	background: color-mix(in srgb, var(--blue) 82%, #000);
	color: #fff;
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--blue) 82%, #000);
}

.bs-btn--ghost:hover {
	background: var(--mist);
	color: var(--ink);
	box-shadow: inset 0 0 0 1.5px var(--ink);
}

.bs-btn--on-pitch:hover {
	background: rgba(255, 255, 255, .88);
	color: var(--blue);
	box-shadow: inset 0 0 0 2px #fff;
}

.bs-star:hover::before {
	background-color: color-mix(in srgb, var(--blue) 82%, #000);
}

/* Packages: a button on each, the card itself clickable. */
.bs-package {
	cursor: pointer;
}

.bs-package__cta {
	margin-top: .9rem;
	width: 100%;
}

/* The "how do I sponsor" dialog behind a package button. */
.bs-choose .bs-dialog__panel {
	max-width: 30rem;
}

.bs-choose__lead {
	margin: -.25rem 0 1.1rem;
	color: var(--ink-soft);
}

.bs-choose__steps {
	display: grid;
	gap: .6rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
	counter-reset: how;
}

.bs-choose__steps li {
	position: relative;
	padding-left: 2.5rem;
	font-weight: 600;
	line-height: 1.45;
}

.bs-choose__steps li::before {
	counter-increment: how;
	content: counter(how);
	position: absolute;
	left: 0;
	top: -.05rem;
	display: grid;
	place-items: center;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	background: var(--green);
	color: #fff;
	font-size: .85rem;
	font-weight: 800;
}

.bs-choose__club {
	margin: 0 0 .8rem;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
	color: var(--ink-soft);
	font-size: .92rem;
}

/* The closing band stands on a photograph of the pitch. */
.bs-closing {
	position: relative;
	background:
		linear-gradient(180deg, rgba(14, 27, 46, .82), rgba(14, 27, 46, .9)),
		var(--bs-photo, none) center 60% / cover no-repeat,
		var(--pitch);
}

.bs-closing .bs-shell {
	position: relative;
}
/* Finished cards keep their full colour, the figures included. */
.bs-card--ended .bs-card__meta {
	color: var(--ink);
}

/* ==========================================================================
   16. Freude: the site as a good cause, not a checkout.
   A light hero with a photo cluster, a strip of fresh gifts, a gold package, polaroid voices, green steps, a bright closing, confetti.
   ========================================================================== */

:root {
	--cream: #FFF7EE;
	--leaf: #EEF8F1;
	--leaf-deep: #D6F0DF;
	--leaf-ink: #15713B;
	--sun: #FFD66B;
	--sun-deep: #F2A91D;
}

/* --- hero --- */

.bs-hero--joy {
	background: linear-gradient(180deg, var(--cream) 0%, #fff 90%);
	text-align: left;
	padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(2rem, 5vw, 4rem) !important;
}

.bs-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.bs-hero--joy .bs-hero__copy {
	justify-items: start;
	gap: 1.1rem;
	max-width: 36rem;
}

.bs-hero--joy .bs-hero__title {
	max-width: 12ch;
	font-size: clamp(2.4rem, 5.2vw, 4.4rem);
}

.bs-hero__lead {
	max-width: 40ch;
	color: var(--ink-soft);
	font-size: var(--t-lead);
	line-height: 1.55;
}

.bs-hero--joy .bs-hero__action {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: .2rem;
}

.bs-hero--joy .bs-hero__note {
	max-width: none;
	font-size: .9rem;
	font-weight: 600;
	color: var(--ink-faint);
}

.bs-hero--joy .bs-proof {
	justify-content: flex-start;
	width: 100%;
	margin-top: 1.1rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line-soft);
}

.bs-kicker {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .4rem .9rem .4rem .6rem;
	border-radius: var(--r-pill);
	background: var(--leaf-deep);
	color: var(--leaf-ink);
	font-size: .82rem;
	font-weight: 700;
}

.bs-kicker svg {
	width: 1.1rem;
	height: 1.1rem;
}

/* --- the photo cluster --- */

.bs-cluster {
	position: relative;
	width: 100%;
	max-width: 36rem;
	aspect-ratio: 1 / .96;
	margin-inline: auto;
}

.bs-cluster figure {
	position: absolute;
	margin: 0;
	border-radius: 22px;
	overflow: hidden;
	background: var(--mist);
	box-shadow: 0 24px 50px rgba(12, 20, 34, .18), 0 0 0 5px #fff;
	animation: bs-float 7s ease-in-out infinite alternate;
}

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

.bs-cluster__main {
	left: 0;
	top: 4%;
	z-index: 2;
	width: 70%;
	aspect-ratio: 3 / 2;
	transform: rotate(-2.5deg);
}

.bs-cluster__a {
	right: 0;
	bottom: 2%;
	z-index: 3;
	width: 42%;
	aspect-ratio: 4 / 5;
	transform: rotate(4deg);
	animation-delay: -2.5s;
}

.bs-cluster__b {
	right: 4%;
	top: 0;
	z-index: 1;
	width: 34%;
	aspect-ratio: 4 / 5;
	transform: rotate(7deg);
	animation-delay: -4.5s;
}

.bs-cluster__sticker {
	position: absolute;
	left: -.5rem;
	top: 1rem;
	z-index: 4;
}

.bs-cluster__chip {
	position: absolute;
	left: 2%;
	bottom: 6%;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	margin: 0;
	padding: .45rem .95rem .45rem .45rem;
	border-radius: var(--r-pill);
	background: #fff;
	color: var(--ink);
	font-size: .86rem;
	box-shadow: 0 14px 30px rgba(12, 20, 34, .16);
	animation: bs-float 6s ease-in-out infinite alternate;
	animation-delay: -1.5s;
}

.bs-cluster__chip b {
	font-weight: 700;
}

@keyframes bs-float {
	from { translate: 0 0; }
	to   { translate: 0 -8px; }
}

/* --- stickers and avatars, used all over --- */

.bs-sticker {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .5rem .95rem;
	border-radius: var(--r-pill);
	background: var(--green);
	color: #fff;
	font-size: .88rem;
	font-weight: 800;
	letter-spacing: .01em;
	box-shadow: 0 0 0 3px #fff, 0 10px 24px rgba(12, 20, 34, .18);
	transform: rotate(-6deg);
}

.bs-sticker svg {
	width: 1em;
	height: 1em;
}

.bs-card__flag--reached {
	background: var(--green);
	color: #fff;
	box-shadow: 0 0 0 3px #fff, 0 8px 18px rgba(12, 20, 34, .2);
	transform: rotate(-5deg);
	backdrop-filter: none;
}

.bs-avatar {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	background: hsl(var(--hue, 14) 75% 90%);
	color: hsl(var(--hue, 14) 60% 30%);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .02em;
}

.bs-avatar svg {
	width: 1.1rem;
	height: 1.1rem;
}

.bs-sponsor__avatar[style*="--hue"] {
	background: hsl(var(--hue) 75% 90%);
	color: hsl(var(--hue) 60% 30%);
}

.bs-sponsor--podium .bs-sponsor__avatar[style*="--hue"] {
	background: var(--grass);
	color: #fff;
}

/* --- gerade geschenkt --- */

.bs-ticker {
	padding-block: 1.1rem 1.25rem !important;
	background: var(--leaf);
	border-block: 1px solid var(--leaf-deep);
	overflow: clip;
}

.bs-ticker__head {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: .7rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--leaf-ink);
}

.bs-ticker__dot {
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 0 4px rgba(34, 165, 89, .2);
	animation: bs-pulse 1.6s ease-in-out infinite;
}

@keyframes bs-pulse {
	50% { box-shadow: 0 0 0 7px rgba(34, 165, 89, .08); }
}

.bs-ticker__track {
	display: flex;
	width: max-content;
}

.bs-ticker__row {
	display: flex;
	gap: .75rem;
	margin: 0;
	padding: 0 .75rem 0 var(--gutter);
	list-style: none;
}

.bs-ticker.is-loop .bs-ticker__row {
	padding-left: 0;
}

.bs-ticker.is-loop .bs-ticker__track {
	animation: bs-ticker var(--bs-dur, 60s) linear infinite;
}

.bs-ticker.is-loop .bs-ticker__track:hover {
	animation-play-state: paused;
}

.bs-ticker:not(.is-loop) .bs-ticker__track {
	width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
}

@keyframes bs-ticker {
	to { transform: translateX(-50%); }
}

.bs-gift {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .4rem .9rem .4rem .4rem;
	border-radius: var(--r-pill);
	background: #fff;
	box-shadow: 0 6px 18px rgba(12, 20, 34, .07);
	font-size: .9rem;
	white-space: nowrap;
}

.bs-gift__text b {
	font-weight: 700;
}

.bs-gift__ago {
	color: var(--ink-faint);
	font-size: .8rem;
}

/* --- packages: the golden one is gold --- */

.bs-packages {
	background: #fff;
}

.bs-package--golden {
	background: linear-gradient(160deg, var(--sun) 0%, var(--sun-deep) 100%);
	color: var(--ink);
	border-color: transparent;
}

.bs-package--golden .bs-package__text {
	color: rgba(12, 20, 34, .72);
}

.bs-package--golden .bs-package__price {
	border-top-color: rgba(12, 20, 34, .15);
}

.bs-package--golden .bs-package__badge {
	background: var(--pitch);
}

.bs-package--golden .bs-package__icon,
.bs-package--golden .bs-package__balls {
	color: var(--pitch);
}

.bs-package--golden .bs-package__cta {
	background: var(--pitch);
	box-shadow: inset 0 0 0 2px var(--pitch);
}

.bs-package--golden .bs-package__cta:hover {
	background: #000;
	box-shadow: inset 0 0 0 2px #000;
}

/* --- live grid: the sport gallery sits with the filter now --- */

.bs-live {
	background: #fff;
}

.bs-gallery--sports {
	height: clamp(10rem, 19vw, 16rem);
	margin: 1.25rem 0 1.5rem;
}

/* --- voices: polaroids on cream --- */

.bs-reviews {
	background: var(--cream);
	color: var(--ink);
}

.bs-reviews__title {
	color: var(--ink);
}

.bs-reviews__lead {
	color: var(--ink-soft);
}

.bs-review {
	padding: .6rem .6rem 1rem;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 16px 36px rgba(12, 20, 34, .12);
}

.bs-review::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -.7rem;
	z-index: 2;
	width: 5.5rem;
	height: 1.4rem;
	translate: -50% 0;
	rotate: -3deg;
	border-radius: 2px;
	background: rgba(255, 214, 107, .78);
	box-shadow: 0 2px 6px rgba(12, 20, 34, .1);
}

.bs-review__photo {
	aspect-ratio: 1 / 1;
	border-radius: 6px;
}

.bs-review__bubble,
.bs-review:nth-child(even) .bs-review__bubble {
	margin: .85rem .2rem 0;
	padding: 0;
	background: none;
	box-shadow: none;
	color: var(--ink);
	font-size: .92rem;
	font-weight: 500;
}

.bs-review__who {
	padding-inline: .2rem;
}

.bs-review__who span {
	color: var(--ink-faint);
}

/* --- steps: green numbers on white --- */

.bs-steps {
	background: #fff;
}

.bs-steps__row::before {
	background: repeating-linear-gradient(90deg, var(--leaf-deep) 0 14px, transparent 14px 24px);
}

.bs-step__no {
	background: var(--green);
	color: #fff;
	box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(34, 165, 89, .3);
}

.bs-step__icon {
	color: var(--green);
}

/* --- closing: a white card on the pitch --- */

.bs-closing--joy {
	position: relative;
	background: var(--bs-photo, none) center 45% / cover no-repeat, var(--leaf);
	color: var(--ink);
	text-align: left;
}

.bs-closing--joy::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 60%);
}

.bs-closing--joy .bs-shell {
	position: relative;
	justify-items: start;
}

.bs-closing__card {
	display: grid;
	gap: 1rem;
	justify-items: start;
	max-width: 34rem;
	padding: clamp(1.75rem, 3.5vw, 2.75rem);
	border-radius: var(--r-lg);
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 24px 60px rgba(12, 20, 34, .18);
	backdrop-filter: blur(4px);
}

.bs-closing--joy .bs-closing__title {
	max-width: 14ch;
}

.bs-closing--joy .bs-closing__text {
	color: var(--ink-soft);
}

.bs-closing--joy .bs-btn {
	margin-top: .2rem;
}

.bs-closing__note {
	font-size: .84rem;
	font-weight: 600;
	color: var(--ink-faint);
}

/* --- a ball rides the progress bar --- */

.bs-progress {
	position: relative;
	overflow: visible;
}

.bs-progress__ball {
	position: absolute;
	top: 50%;
	left: var(--bs-fill, 0%);
	display: grid;
	place-items: center;
	width: 1.25rem;
	height: 1.25rem;
	translate: -55% -50%;
	border-radius: 50%;
	background: #fff;
	color: var(--ink);
	box-shadow: 0 2px 8px rgba(12, 20, 34, .22);
}

.bs-progress__ball svg {
	width: 100%;
	height: 100%;
}

/* --- confetti canvas --- */

.bs-confetti {
	position: fixed;
	inset: 0;
	z-index: 9999;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* --- smaller screens --- */

@media (max-width: 960px) {
	.bs-hero__grid {
		grid-template-columns: 1fr;
	}

	.bs-cluster {
		max-width: 30rem;
	}
}

@media (max-width: 640px) {
	.bs-hero--joy .bs-hero__title {
		font-size: clamp(2.2rem, 10vw, 3rem);
	}

	.bs-cluster {
		aspect-ratio: 1 / 1.02;
	}

	.bs-cluster__chip {
		font-size: .8rem;
	}

	.bs-closing__card {
		padding: 1.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bs-cluster figure,
	.bs-cluster__chip,
	.bs-ticker__dot {
		animation: none;
	}
}

/* Avatars with a bit more colour in them. */
.bs-avatar,
.bs-sponsor__avatar[style*="--hue"] {
	background: hsl(var(--hue, 14) 80% 86%);
	color: hsl(var(--hue, 14) 65% 28%);
}

.bs-sponsor--podium .bs-sponsor__avatar[style*="--hue"] {
	background: var(--grass);
	color: #fff;
}

/* The gift strip, quieter: white, no band, pills with a hairline, muted
   avatars, and the row fades out at both edges like the crest loop. */
.bs-ticker {
	padding-block: 1.25rem 1.5rem !important;
	background: #fff;
	border-block: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.bs-gift {
	border: 1px solid var(--line);
	box-shadow: none;
	color: var(--ink-soft);
}

.bs-gift__text b {
	color: var(--ink);
}

.bs-avatar,
.bs-sponsor__avatar[style*="--hue"] {
	background: hsl(var(--hue, 14) 45% 92%);
	color: hsl(var(--hue, 14) 40% 36%);
}

.bs-sponsor--podium .bs-sponsor__avatar[style*="--hue"] {
	background: var(--grass);
	color: #fff;
}

@media (max-width: 640px) {
	.bs-ticker {
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
		mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
	}
}

/* The golden package: white with a thin gold line, not a yellow slab. */
.bs-package--golden {
	background: #fff;
	color: var(--ink);
	border-color: var(--gold);
	box-shadow: 0 0 0 1px var(--gold), 0 18px 40px rgba(200, 145, 47, .10);
}

.bs-package--golden .bs-package__text {
	color: var(--ink-soft);
}

.bs-package--golden .bs-package__price {
	border-top-color: var(--line-soft);
}

.bs-package--golden .bs-package__badge {
	background: var(--gold);
	color: #fff;
}

.bs-package--golden .bs-package__icon,
.bs-package--golden .bs-package__balls {
	color: var(--gold);
}

/* The sticker sits on the corner of the cluster, outside the clipped photo. */
.bs-cluster > .bs-cluster__sticker {
	position: absolute;
	left: -.4rem;
	top: 1%;
	z-index: 4;
}

/* Steps, cleaned up: big numbers, no icons, and a ball that rolls the
   pitch line from the first step to the last once the row is in view. */
.bs-steps__track {
	--g: clamp(1rem, 2vw, 1.75rem);
	position: relative;
	padding-top: 2.6rem;
}

.bs-steps__track::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: .9rem;
	height: 2px;
	background: repeating-linear-gradient(90deg, var(--leaf-deep) 0 14px, transparent 14px 24px);
}

.bs-steps__row {
	gap: var(--g);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bs-steps__row::before {
	display: none;
}

.bs-step {
	padding-top: 0;
	gap: .5rem;
}

.bs-step::before {
	content: "";
	position: absolute;
	left: 0;
	top: -2.05rem;
	width: .7rem;
	height: .7rem;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 0 3px #fff;
}

.bs-step__no {
	position: static;
	width: auto;
	height: auto;
	margin-bottom: .3rem;
	border-radius: 0;
	background: none !important;
	box-shadow: none !important;
	color: var(--grass);
	font-size: 2.5rem;
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: 1;
}

.bs-step:hover .bs-step__no,
.bs-step:focus-within .bs-step__no {
	color: var(--green);
}

.bs-step__title {
	font-size: 1.15rem;
}

.bs-steps__ball {
	position: absolute;
	left: 0;
	top: .9rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 1.7rem;
	height: 1.7rem;
	translate: -50% -50%;
	border-radius: 50%;
	background: #fff;
	color: var(--ink);
	box-shadow: 0 4px 12px rgba(12, 20, 34, .2);
}

.bs-steps__ball svg {
	width: 100%;
	height: 100%;
}

.bs-steps__row.is-in + .bs-steps__ball {
	animation: bs-roll 2.8s cubic-bezier(.35, .6, .25, 1) .4s forwards;
}

@keyframes bs-roll {
	to {
		left: calc(80% + .8 * var(--g));
		rotate: 1440deg;
	}
}

@media (max-width: 1024px) {
	.bs-steps__track {
		padding-top: 0;
	}

	.bs-steps__track::before,
	.bs-step::before,
	.bs-steps__ball {
		display: none;
	}
}

@media (max-width: 620px) {
	.bs-step {
		grid-template-columns: auto 1fr;
		column-gap: 1rem;
		padding-left: 0;
		min-height: 0;
	}

	.bs-step__no {
		grid-row: 1 / span 2;
		min-width: 2.2rem;
		margin: 0;
		font-size: 2.1rem;
	}

	.bs-step__title,
	.bs-step__text {
		grid-column: 2;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bs-steps__ball {
		left: calc(80% + .8 * var(--g));
		animation: none !important;
	}
}

.bs-step__no {
	display: block;
	text-align: left;
}

/* The loop class lands on the track itself, so the rules hang off that. */
.bs-ticker .bs-ticker__track.is-loop {
	width: max-content;
	overflow: visible;
	animation: bs-ticker var(--bs-dur, 60s) linear infinite;
}

.bs-ticker .bs-ticker__track.is-loop:hover {
	animation-play-state: paused;
}

.bs-ticker .bs-ticker__track.is-loop .bs-ticker__row {
	padding-left: 0;
}

/* A photograph fading into the background of a section, top right, where
   the heading leaves the room empty. Decoration, never behind content. */
.bs-has-backdrop {
	position: relative;
	overflow: clip;
}

.bs-has-backdrop > .bs-shell {
	position: relative;
	z-index: 1;
}

.bs-backdrop {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 0;
	width: min(46vw, 38rem);
	height: min(26vw, 21rem);
	background: var(--bs-photo) center / cover no-repeat;
	opacity: .55;
	pointer-events: none;
	-webkit-mask-image: radial-gradient(ellipse 75% 80% at 85% 10%, #000 0%, rgba(0, 0, 0, .55) 40%, transparent 70%);
	mask-image: radial-gradient(ellipse 75% 80% at 85% 10%, #000 0%, rgba(0, 0, 0, .55) 40%, transparent 70%);
}

.bs-backdrop--left {
	right: auto;
	left: 0;
	-webkit-mask-image: radial-gradient(ellipse 75% 80% at 15% 10%, #000 0%, rgba(0, 0, 0, .55) 40%, transparent 70%);
	mask-image: radial-gradient(ellipse 75% 80% at 15% 10%, #000 0%, rgba(0, 0, 0, .55) 40%, transparent 70%);
}

@media (max-width: 1100px) {
	.bs-backdrop {
		display: none;
	}
}
/* A page that carries the campaign grid runs the full shell width, three
   cards in a row, instead of the narrow reading column. */
.bs-page__article:has(.bs-live__grid) {
	max-width: none;
}

.bs-page__article:has(.bs-live__grid) .bs-prose {
	color: var(--ink);
	line-height: inherit;
}

/* Backdrop, take two: it comes in from the side, big, and fades out in
   every direction, so no edge of it is ever cut off. */
.bs-backdrop {
	top: 0;
	right: 0;
	width: min(58vw, 52rem);
	height: min(36vw, 32rem);
	opacity: .6;
	-webkit-mask-image: radial-gradient(ellipse 88% 52% at 100% 42%, #000 0%, rgba(0, 0, 0, .6) 38%, transparent 72%);
	mask-image: radial-gradient(ellipse 88% 52% at 100% 42%, #000 0%, rgba(0, 0, 0, .6) 38%, transparent 72%);
}

.bs-backdrop--left {
	-webkit-mask-image: radial-gradient(ellipse 88% 52% at 0% 42%, #000 0%, rgba(0, 0, 0, .6) 38%, transparent 72%);
	mask-image: radial-gradient(ellipse 88% 52% at 0% 42%, #000 0%, rgba(0, 0, 0, .6) 38%, transparent 72%);
}

/* A band never grows taller than a screen's worth, so a long section does
   not stretch the photograph into a sliver. */
.bs-backdrop {
	bottom: auto;
	height: min(44vw, 40rem);
	max-height: 100%;
}

/* Backdrop, straight fades: the top half fades in, the bottom half fades
   out, and towards the content it runs straight to white. No ellipse. */
.bs-backdrop {
	width: min(34vw, 32rem);
	opacity: .85;
	-webkit-mask-image:
		linear-gradient(to left, #000 0%, #000 30%, transparent 88%),
		linear-gradient(to bottom, transparent 0%, #000 50%, transparent 100%);
	mask-image:
		linear-gradient(to left, #000 0%, #000 30%, transparent 88%),
		linear-gradient(to bottom, transparent 0%, #000 50%, transparent 100%);
}

.bs-backdrop--left {
	-webkit-mask-image:
		linear-gradient(to right, #000 0%, #000 30%, transparent 88%),
		linear-gradient(to bottom, transparent 0%, #000 50%, transparent 100%);
	mask-image:
		linear-gradient(to right, #000 0%, #000 30%, transparent 88%),
		linear-gradient(to bottom, transparent 0%, #000 50%, transparent 100%);
}

/* Two masks without compositing: the band itself fades towards the content,
   the photo layer inside it fades at top and bottom. */
.bs-backdrop {
	background: none;
	-webkit-mask-image: linear-gradient(to left, #000 0%, #000 30%, transparent 88%);
	mask-image: linear-gradient(to left, #000 0%, #000 30%, transparent 88%);
	-webkit-mask-composite: source-over;
	mask-composite: add;
}

.bs-backdrop--left {
	-webkit-mask-image: linear-gradient(to right, #000 0%, #000 30%, transparent 88%);
	mask-image: linear-gradient(to right, #000 0%, #000 30%, transparent 88%);
}

.bs-backdrop::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--bs-photo) center / cover no-repeat;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 50%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 50%, transparent 100%);
}

/* Fade in a little earlier towards the content, and keep headings clear. */
.bs-backdrop {
	opacity: .72;
	-webkit-mask-image: linear-gradient(to left, #000 0%, #000 18%, transparent 74%);
	mask-image: linear-gradient(to left, #000 0%, #000 18%, transparent 74%);
}

.bs-backdrop--left {
	-webkit-mask-image: linear-gradient(to right, #000 0%, #000 18%, transparent 74%);
	mask-image: linear-gradient(to right, #000 0%, #000 18%, transparent 74%);
}

.bs-reviews > .bs-backdrop {
	top: 24%;
}

.bs-steps > .bs-backdrop {
	opacity: .55;
}

/* Packages: the band sits on the left, below the heading. */
.bs-packages > .bs-backdrop {
	top: 20%;
}

/* Six cards on the homepage, then a button to the rest. */
.bs-live__all {
	margin-top: clamp(2rem, 4vw, 3rem);
	text-align: center;
}

/* A band that starts lower ends exactly at the section's bottom, so the
   fade-out finishes before anything can clip it. */
.bs-packages > .bs-backdrop,
.bs-reviews > .bs-backdrop {
	bottom: 0;
	height: auto;
	max-height: none;
}

/* The club's call to action is green; the supporter's stays orange. */
.bs-btn--green {
	background: var(--green);
	color: #fff;
	box-shadow: inset 0 0 0 2px var(--green);
}

.bs-btn--green:hover {
	background: color-mix(in srgb, var(--green) 80%, #000);
	color: #fff;
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--green) 80%, #000);
}

.bs-btn--green.bs-star:hover::before {
	background-color: color-mix(in srgb, var(--green) 80%, #000);
}

.bs-btn--green.bs-star::before {
	background-color: var(--green);
}

.bs-sticker--orange {
	background: var(--grass);
}

/* ==========================================================================
   17. Full and finished: a package that no longer fits, and the thank-you
   page a campaign turns into after its end date.
   ========================================================================== */

.bs-choice__opt.is-disabled {
	opacity: .45;
	cursor: not-allowed;
}

.bs-choice__opt.is-disabled:hover {
	border-color: var(--line);
}

.bs-campaign--closed {
	padding-block: clamp(2.5rem, 6vw, 5rem);
	background: linear-gradient(180deg, var(--cream) 0%, #fff 100%);
}

.bs-closed {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.bs-closed--gone {
	grid-template-columns: minmax(0, 40rem);
	justify-content: center;
}

.bs-closed__card {
	display: grid;
	gap: 1rem;
	justify-items: start;
	padding: clamp(1.75rem, 3.5vw, 2.75rem);
	border-radius: var(--r-lg);
	background: #fff;
	box-shadow: 0 24px 60px rgba(12, 20, 34, .12);
}

.bs-closed__mark {
	width: 3.4rem;
	height: 3.4rem;
}

.bs-closed__mark img,
.bs-closed__mark svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.bs-closed__kicker {
	margin: 0;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.bs-closed__title {
	font-size: var(--t-h2);
	letter-spacing: -.02em;
	line-height: 1.05;
}

.bs-closed__text {
	font-size: var(--t-lead);
	color: var(--ink-soft);
}

.bs-closed .bs-progress {
	width: 100%;
	margin-block: .25rem;
}

.bs-closed__hint {
	font-size: .92rem;
	color: var(--ink-faint);
}

.bs-closed .bs-btn {
	margin-top: .4rem;
}

.bs-closed__photo {
	margin: 0;
	border-radius: var(--r-lg);
	overflow: hidden;
	aspect-ratio: 4 / 5;
	box-shadow: 0 24px 50px rgba(12, 20, 34, .16), 0 0 0 5px #fff;
	transform: rotate(2deg);
}

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

@media (max-width: 900px) {
	.bs-closed {
		grid-template-columns: 1fr;
	}

	.bs-closed__photo {
		max-width: 22rem;
		margin-inline: auto;
	}
}
/* ==========================================================================
   18. Picking the balls: the club's own page after the campaign.
   ========================================================================== */

.bs-claim {
	padding-block: clamp(2.5rem, 6vw, 5rem) 8rem;
	background: linear-gradient(180deg, var(--cream) 0%, #fff 30rem);
}

.bs-claim__head,
.bs-claim__done {
	display: grid;
	gap: .8rem;
	justify-items: start;
	max-width: 44rem;
}

.bs-claim__done {
	max-width: 50rem;
	padding: clamp(1.75rem, 3.5vw, 2.75rem);
	border-radius: var(--r-lg);
	background: #fff;
	box-shadow: 0 24px 60px rgba(12, 20, 34, .12);
}

.bs-claim__recap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	width: 100%;
	margin-top: .75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line-soft);
}

.bs-claim__recap ul {
	margin: .5rem 0 0;
	padding-left: 1.1rem;
}

.bs-claim__recap p {
	margin: .5rem 0 0;
	color: var(--ink-soft);
}

.bs-claim__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 2rem 0 1.25rem;
}

.bs-claim__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bs-claimball {
	display: grid;
	gap: .5rem;
	align-content: start;
	padding: 1rem;
	border: 1.5px solid var(--line);
	border-radius: var(--r-lg);
	background: #fff;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.bs-claimball.has-balls {
	border-color: var(--green);
	box-shadow: 0 0 0 3px rgba(34, 165, 89, .15);
}

.bs-claimball[hidden] {
	display: none;
}

.bs-claimball__photo {
	position: relative;
	margin: 0;
	aspect-ratio: 1;
	border-radius: var(--r-md);
	background: var(--mist);
	overflow: hidden;
}

.bs-claimball__photo img {
	display: block;
	width: 100%;
	height: 100%;
	padding: .6rem;
	object-fit: contain;
}

.bs-claimball__cat {
	position: absolute;
	left: .6rem;
	top: .6rem;
	padding: .25rem .6rem;
	border-radius: var(--r-pill);
	background: #fff;
	font-size: .72rem;
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(12, 20, 34, .1);
}

.bs-claimball__title {
	font-size: 1.05rem;
	font-weight: 800;
}

.bs-claimball__meta {
	margin-top: -.3rem;
	font-size: .85rem;
	color: var(--ink-faint);
}

.bs-claimball__rows {
	display: grid;
	gap: .4rem;
	margin-top: .3rem;
}

.bs-claimball__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
}

.bs-claimball__size {
	font-size: .9rem;
	font-weight: 600;
}

.bs-stepper {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--line);
	border-radius: var(--r-pill);
	overflow: hidden;
}

.bs-stepper__btn {
	width: 2.2rem;
	height: 2.2rem;
	border: 0;
	background: #fff;
	color: var(--ink);
	font-size: 1.2rem;
	font-weight: 700;
	cursor: pointer;
}

.bs-stepper__btn:hover {
	background: var(--mist);
}

.bs-stepper input {
	width: 2.6rem;
	height: 2.2rem;
	border: 0;
	text-align: center;
	font: inherit;
	font-weight: 700;
	-moz-appearance: textfield;
	appearance: textfield;
}

.bs-stepper input::-webkit-outer-spin-button,
.bs-stepper input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.bs-claim__address {
	max-width: 40rem;
	margin-top: 2.5rem;
}

.bs-claim__hint {
	margin-bottom: 1rem;
	color: var(--ink-soft);
}

.bs-field--narrow {
	flex: 0 0 9rem;
}

.bs-claim__bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .8rem var(--gutter);
	background: #fff;
	box-shadow: 0 -10px 30px rgba(12, 20, 34, .12);
	transition: background-color .2s ease;
}

.bs-claim__bar.is-ready {
	background: var(--leaf);
}

.bs-claim__bar.is-full {
	animation: bs-shake .4s ease;
}

.bs-claim__count b {
	font-size: 1.4rem;
	font-weight: 800;
}

.bs-claim__count span {
	margin-left: .35rem;
	color: var(--ink-soft);
}

@keyframes bs-shake {
	25% { translate: -4px 0; }
	75% { translate: 4px 0; }
}

@media (max-width: 640px) {
	.bs-claim__recap {
		grid-template-columns: 1fr;
	}

	.bs-claim__bar .bs-btn {
		padding-inline: 1.1rem;
	}
}
.bs-claim__tabs .bs-sizepick.is-current {
	background: var(--pitch);
	border-color: var(--pitch);
	color: #fff;
}