/* The Jab Foundation: holding page. Brand values match the store's theme.json. */

@font-face {
	font-family: "Manrope";
	src: url("manrope.woff2") format("woff2");
	font-weight: 200 800;
	font-display: swap;
}

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

html {
	color-scheme: dark;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: #fff;
	background:
		radial-gradient(56rem 32rem at 12% -12%, rgba(167, 139, 250, 0.28), transparent 60%),
		linear-gradient(135deg, #3b0f74 0%, #4c1d95 35%, #6d28d9 75%, #7c3aed 100%);
	-webkit-font-smoothing: antialiased;
}

.intro {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: clamp(3rem, 10vh, 7rem) 1.25rem 2rem;
	text-align: center;
}

.mark {
	width: clamp(80px, 16vw, 104px);
	height: auto;
	border-radius: 25%;
	box-shadow: 0 14px 40px rgba(20, 6, 50, 0.35);
}

.status {
	margin: 1.75rem 0 1.1rem;
	padding: 0.4rem 0.95rem;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

h1 {
	margin: 0;
	font-size: clamp(2.2rem, 7vw, 3.75rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.lede {
	max-width: 26ch;
	margin: 0.9rem 0 0;
	font-size: clamp(1.15rem, 3vw, 1.5rem);
	font-weight: 600;
	line-height: 1.35;
}

/* Secondary text stays at 92% white: at least 4.5:1 even over the lightest end of the gradient. */
.note {
	max-width: 40ch;
	margin: 1.1rem 0 0;
	font-size: 1rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.92);
}

.footer {
	padding: 1.5rem 1.25rem 2rem;
	text-align: center;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.92);
}

@media (prefers-reduced-motion: no-preference) {
	.intro > * {
		animation: rise 0.7s ease-out both;
	}
	.intro > :nth-child(2) { animation-delay: 0.08s; }
	.intro > :nth-child(3) { animation-delay: 0.16s; }
	.intro > :nth-child(4) { animation-delay: 0.24s; }
	.intro > :nth-child(5) { animation-delay: 0.32s; }
}

@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
}