/*landing page. the palette and page background come from theme.css; everything here is landing-only,
  so this file deliberately does not depend on player_pages.css (which is for signed-in pages).*/

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	color: var(--ls-ink, #1c1917);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/*full-bleed helper: cancels the 15px padding of the .container-fluid wrapper in base_template2.html*/

.lpBleed {
	margin-left: -15px;
	margin-right: -15px;
}

/*shared section scaffolding*/

.lpSection {
	padding: 5.5rem 0;
}

.lpNarrow {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 1rem;
}

.lpWide {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 1rem;
}

.lpHead {
	max-width: 720px;
	margin: 0 auto 3rem;
	text-align: center;
}

.lpLabel {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: #a8801f;
	margin: 0 0 0.9rem;
}

.lpTitle {
	font-size: 2.15rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.2;
	color: #1c1917;
	margin: 0 0 1.25rem;
}

.lpSub {
	font-size: 1.05rem;
	line-height: 1.65;
	color: #57534e;
	margin: 0;
}

/*stacked intro paragraphs need their own rhythm, since .lpSub itself carries no margin*/
.lpSub + .lpSub {
	margin-top: 1.1rem;
}

.lpGold {
	background: linear-gradient(100deg, #e0b64f, #f3d488 45%, #bf9832);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #d4a53f;
}

/*pull line: the one-sentence idea a section rests on*/

.lpPull {
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: #1c1917;
	text-align: center;
	max-width: 640px;
	margin: 3rem auto 0;
	padding-top: 2.25rem;
	border-top: 1px solid #ddd7c8;
}

/*hero*/

.lpHero {
	position: relative;
	background-color: #0d1117;
	background-image:
		radial-gradient(46rem 26rem at 50% -4rem, rgba(212, 165, 63, 0.20), transparent 70%),
		radial-gradient(34rem 22rem at 12% 100%, rgba(99, 102, 241, 0.12), transparent 70%);
	padding: 10rem 0 4rem;
	overflow: hidden;
}

/*soft hand-off from the dark hero into the warm page below it*/
.lpHero::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 120px;
	background: linear-gradient(180deg, transparent, rgba(233, 229, 218, 0.16));
	pointer-events: none;
}

.lpHeroInner {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 0 auto;
	padding: 0 1.25rem;
	text-align: center;
}

.lpEyebrow {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.28em;
	color: rgba(224, 182, 79, 0.85);
	margin: 0 0 1.4rem;
}

.lpHeroTitle {
	font-size: 3.6rem;
	font-weight: 700;
	letter-spacing: -0.045em;
	line-height: 1.05;
	color: #fff;
	margin: 0 0 1.5rem;
}

.lpHeroLead {
	font-size: 1.15rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.66);
	max-width: 640px;
	margin: 0 auto;
}

.lpHeroLead strong {
	color: rgba(255, 255, 255, 0.92);
	font-weight: 600;
}

/*buttons*/

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

.lpBtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 190px;
	padding: 0.8rem 1.6rem;
	border-radius: 10px;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.lpBtn:hover,
.lpBtn:focus {
	text-decoration: none;
	transform: translateY(-1px);
}

.lpBtn--gold {
	background: linear-gradient(135deg, #e0b64f, #bf9832);
	color: #16110b;
	box-shadow: 0 10px 30px -12px rgba(212, 165, 63, 0.85);
}

.lpBtn--gold:hover,
.lpBtn--gold:focus {
	background: linear-gradient(135deg, #edc766, #cda63c);
	color: #16110b;
	box-shadow: 0 14px 34px -12px rgba(212, 165, 63, 0.95);
}

.lpBtn--ghost {
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.85);
}

.lpBtn--ghost:hover,
.lpBtn--ghost:focus {
	background-color: rgba(255, 255, 255, 0.1);
	color: #fff;
}

/*hero stats strip*/

.lpStats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin-top: 4rem;
	padding-top: 2.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.lpStat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
}

.lpStatValue {
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.lpStatLabel {
	font-size: 0.68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color: rgba(255, 255, 255, 0.38);
	text-align: center;
}

.lpStatsNote {
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.32);
	text-align: center;
	margin: 1.5rem 0 0;
}

/*card grids*/

.lpGrid {
	display: grid;
	gap: 1.25rem;
}

.lpGrid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.lpCard {
	background-color: #fff;
	border: 1px solid #e9e4d8;
	border-radius: 16px;
	padding: 1.75rem;
	box-shadow: 0 1px 2px rgba(66, 54, 22, 0.05), 0 12px 32px -8px rgba(66, 54, 22, 0.09);
}

.lpCardIcon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: 1.1rem;
	border-radius: 12px;
	background: linear-gradient(160deg, #fdf7e7, #f5e7c2);
	border: 1px solid rgba(191, 152, 50, 0.25);
	color: #a8801f;
	font-size: 1rem;
}

.lpCard h3 {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: #1c1917;
	margin: 0 0 0.6rem;
}

.lpCard p {
	font-size: 0.93rem;
	line-height: 1.65;
	color: #57534e;
	margin: 0;
}

.lpCard p strong {
	color: #1c1917;
	font-weight: 600;
}

/*dark section (what we're building)*/

.lpSection--dark {
	background-color: #0d1117;
	background-image: radial-gradient(50rem 26rem at 50% 0%, rgba(212, 165, 63, 0.13), transparent 70%);
	padding: 5.5rem 0;
}

.lpSection--dark .lpLabel {
	color: rgba(224, 182, 79, 0.85);
}

.lpSection--dark .lpTitle {
	color: #fff;
}

.lpSection--dark .lpSub {
	color: rgba(255, 255, 255, 0.6);
}

/*promo video: links out to youtube (age-restricted videos cannot play in an embedded player - see the
comment in home.html), styled as a standalone cta rather than a fake video frame*/

.lpVideoCta {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	max-width: 460px;
	margin: 0 auto 3rem;
	padding: 1.1rem 1.4rem;
	border-radius: 16px;
	border: 1px solid rgba(212, 165, 63, 0.35);
	background-image: radial-gradient(120% 160% at 0% 0%, rgba(212, 165, 63, 0.14), transparent 70%);
	text-decoration: none;
	transition: transform 0.15s ease, border-color 0.15s ease;
}

.lpVideoCta:hover,
.lpVideoCta:focus {
	border-color: rgba(212, 165, 63, 0.6);
	transform: translateY(-1px);
	text-decoration: none;
}

/*white backing rather than the site's gold, so the youtube mark below shows in its own real brand
colors instead of being tinted - logos read as "off" when recolored to match a host page*/
.lpVideoCtaIcon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0 10px 26px -10px rgba(212, 165, 63, 0.8);
}

.lpVideoCtaIconSvg {
	width: 26px;
	height: auto;
}

.lpVideoCtaText {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	text-align: left;
}

.lpVideoCtaTitle {
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
}

.lpVideoCtaSub {
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.5);
}

.lpVideoCtaArrow {
	flex-shrink: 0;
	margin-left: auto;
	color: rgba(212, 165, 63, 0.85);
	font-size: 0.85rem;
	transition: transform 0.15s ease;
}

.lpVideoCta:hover .lpVideoCtaArrow,
.lpVideoCta:focus .lpVideoCtaArrow {
	transform: translateX(3px);
}

/*fundraiser progress*/

.lpRaise {
	background: linear-gradient(165deg, #fffdf7 0%, #fbf1d9 100%);
	border: 1px solid rgba(191, 152, 50, 0.3);
	border-radius: 18px;
	padding: 2rem 1.75rem 1.75rem;
	box-shadow: 0 12px 34px -14px rgba(191, 152, 50, 0.5);
}

.lpRaiseTop {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 1.25rem;
}

.lpRaisePercent {
	font-size: 3rem;
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.05;
	color: #8f6a14;
	font-variant-numeric: tabular-nums;
}

.lpRaiseLabel {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color: #a8801f;
}

.lpRaiseTrack {
	position: relative;
	height: 16px;
	background-color: #f0e7d1;
	border-radius: 999px;
	box-shadow: inset 0 1px 3px rgba(66, 54, 22, 0.14);
	overflow: hidden;
}

.lpRaiseFill {
	position: relative;
	width: 0;
	height: 100%;
	min-width: 8px;
	border-radius: 999px;
	background: linear-gradient(90deg, #bf9832, #e0b64f 55%, #f3d488);
	box-shadow: 0 0 12px rgba(212, 165, 63, 0.55);
	overflow: hidden;
	transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.lpRaiseFill::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.6) 50%, transparent 80%);
	background-size: 200% 100%;
	animation: lpShine 3.2s ease-in-out infinite;
}

@keyframes lpShine {
	0% { background-position: 150% 0; }
	100% { background-position: -50% 0; }
}

.lpRaiseBreakdown {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
	margin-top: 1.4rem;
	text-align: center;
}

.lpRaiseStat {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.lpRaiseStatValue {
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #1c1917;
}

.lpRaiseStatLabel {
	font-size: 0.68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: #a8801f;
}

/*link out to the live LoopBet beta, under the fundraiser*/

.lpRaiseLink {
	text-align: center;
	margin: 1.5rem 0 0;
}

.lpRaiseLink a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.92rem;
	font-weight: 600;
	color: #8f6a14;
	text-decoration: none;
	border-bottom: 1px solid rgba(143, 106, 20, 0.3);
	padding-bottom: 0.15rem;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.lpRaiseLink a:hover,
.lpRaiseLink a:focus {
	color: #6f520f;
	border-bottom-color: #6f520f;
	text-decoration: none;
}

.lpRaiseLink .fa {
	flex-shrink: 0;
	font-size: 0.78rem;
	transition: transform 0.15s ease;
}

.lpRaiseLink a:hover .fa {
	transform: translateX(3px);
}

/*closing call to action*/

.lpCta {
	background-color: #0d1117;
	background-image: radial-gradient(46rem 24rem at 50% 110%, rgba(212, 165, 63, 0.2), transparent 70%);
	padding: 6rem 0 6.5rem;
	text-align: center;
}

.lpCtaTitle {
	font-size: 2.6rem;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1.1;
	color: #fff;
	margin: 0 0 1rem;
}

.lpCtaLead {
	font-size: 1.05rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.62);
	max-width: 520px;
	margin: 0 auto;
}

.lpCtaFine {
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.32);
	margin: 1.75rem 0 0;
}

/*scroll reveal. the .isVisible class is added by home2.js; without js everything simply stays visible.*/

.lpReveal {
	opacity: 1;
}

.js-reveal .lpReveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-reveal .lpReveal.isVisible {
	opacity: 1;
	transform: none;
}

/*responsive: laptops and small desktops*/

@media (max-width: 991.98px) {
	.lpHero {
		padding-top: 8.5rem;
	}

	.lpHeroTitle {
		font-size: 2.9rem;
	}

	.lpGrid--3 {
		grid-template-columns: repeat(2, 1fr);
	}

	.lpTitle {
		font-size: 1.9rem;
	}
}

/*responsive: tablets and phones*/

@media (max-width: 767.98px) {
	.lpSection,
	.lpSection--dark {
		padding: 3.75rem 0;
	}

	.lpHero {
		padding: 7.5rem 0 3rem;
	}

	.lpHeroTitle {
		font-size: 2.3rem;
	}

	.lpHeroLead {
		font-size: 1.02rem;
	}

	.lpTitle {
		font-size: 1.65rem;
	}

	.lpSub {
		font-size: 0.96rem;
	}

	.lpPull {
		font-size: 1.1rem;
		margin-top: 2.25rem;
		padding-top: 1.75rem;
	}

	.lpBtn {
		width: 100%;
		min-width: 0;
	}

	.lpStats {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem 1rem;
		margin-top: 3rem;
	}

	.lpStatValue {
		font-size: 1.5rem;
	}

	/*two columns leave room, so the labels do not need to shrink the way they do on desktop*/
	.lpStatLabel {
		font-size: 0.72rem;
	}

	.lpGrid--3 {
		grid-template-columns: 1fr;
	}

	.lpCard {
		padding: 1.4rem 1.25rem;
	}

	.lpHead {
		margin-bottom: 2.25rem;
	}

	.lpVideoCta {
		margin-bottom: 2.25rem;
		gap: 0.85rem;
		padding: 1rem 1.1rem;
	}

	.lpVideoCtaIcon {
		width: 46px;
		height: 46px;
	}

	.lpVideoCtaIconSvg {
		width: 22px;
	}

	.lpRaise {
		padding: 1.6rem 1.15rem 1.4rem;
	}

	.lpRaisePercent {
		font-size: 2.3rem;
	}

	.lpRaiseBreakdown {
		gap: 0.4rem;
	}

	.lpRaiseStatValue {
		font-size: 0.95rem;
	}

	/*kept readable rather than squeezed onto one line - the longer labels simply wrap*/
	.lpRaiseStatLabel {
		font-size: 0.7rem;
		letter-spacing: 0.05em;
	}

	.lpCtaTitle {
		font-size: 1.9rem;
	}

	.lpCta {
		padding: 4rem 0 4.5rem;
	}
}

/*responsive: very small phones. the stats are the only content whose width is driven by live numbers, so give the
  longest of them (an eight or nine figure turnover) room to grow without pushing its column wider.*/

@media (max-width: 400px) {
	.lpStatValue {
		font-size: 1.3rem;
	}
}

/*motion preferences*/

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

	.lpRaiseFill {
		transition: none;
	}

	.js-reveal .lpReveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.lpBtn:hover,
	.lpBtn:focus {
		transform: none;
	}
}