/* Research Age Gate */
html[data-rag="pending"],
html[data-rag="pending"] body { overflow: hidden !important; overscroll-behavior: none; }

.rag-gate {
	position: fixed; inset: 0; z-index: 2147483646;
	width: 100vw; height: 100dvh; max-width: none; max-height: none;
	margin: 0; padding: 0; border: 0; background: transparent;
	color: var(--rag-primary); overflow: hidden;
	font-family: inherit; box-sizing: border-box;
}
.rag-gate *, .rag-gate *::before, .rag-gate *::after { box-sizing: border-box; }
.rag-gate::backdrop { background: var(--rag-bg); }

/* Visible from first paint (before JS) for new visitors, hidden for returning ones. */
html[data-rag="pending"] .rag-gate:not([open]) { display: block; }
html[data-rag="accepted"] .rag-gate { display: none !important; }

.rag-stage {
	position: relative; display: grid; place-items: center;
	min-height: 100dvh; height: 100%;
	padding: clamp(20px, 5vh, 48px) 5vw;
	background: radial-gradient(120% 90% at 50% 26%, #fff 0%, color-mix(in srgb, var(--rag-bg) 50%, #fff) 44%, color-mix(in srgb, var(--rag-accent) 14%, #fff) 100%);
	overflow: hidden auto; overscroll-behavior: contain;
}

.rag-stack {
	position: relative; z-index: 2;
	display: flex; flex-direction: column; align-items: center;
	gap: clamp(14px, 2.8vh, 26px); width: min(620px, 92vw);
	animation: rag-rise .75s cubic-bezier(.22, 1, .36, 1) both;
}
.rag-logo { font-size: clamp(25px, 4vw, 36px); font-weight: 800; letter-spacing: -.02em; }
.rag-logo img { display: block; height: 1.7em; width: auto; }

.rag-card {
	width: 100%; margin: 0;
	padding: clamp(22px, 4vh, 34px) clamp(22px, 4vw, 38px) clamp(22px, 3.8vh, 32px);
	background: #fff; border: 1px solid color-mix(in srgb, var(--rag-accent) 16%, transparent);
	border-radius: 24px;
	box-shadow: 0 40px 84px -46px color-mix(in srgb, var(--rag-primary) 30%, transparent), 0 2px 6px color-mix(in srgb, var(--rag-primary) 4%, transparent);
}

.rag-topline {
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
	font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: color-mix(in srgb, var(--rag-primary) 70%, #fff);
}
.rag-badge {
	display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 10px;
	border-radius: 999px; letter-spacing: .15em;
	color: color-mix(in srgb, var(--rag-accent) 45%, var(--rag-primary));
	background: color-mix(in srgb, var(--rag-accent) 6%, #fff);
	border: 1px solid color-mix(in srgb, var(--rag-accent) 22%, transparent);
}
.rag-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--rag-accent); }

.rag-card h2 {
	margin: 18px 0 0; color: var(--rag-primary);
	font-size: clamp(27px, 4vw, 36px); font-weight: 800; line-height: 1.05; letter-spacing: -.035em;
}
.rag-intro {
	margin: 10px 0 0; max-width: 540px;
	font-size: 15px; line-height: 1.58; color: color-mix(in srgb, var(--rag-primary) 75%, #fff);
}

.rag-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.rag-choice {
	display: flex; align-items: flex-start; gap: 13px; width: 100%;
	padding: 15px 17px; margin: 0; border-radius: 12px; cursor: pointer;
	font: inherit; font-size: 14px; line-height: 1.5; text-align: left; text-transform: none; letter-spacing: normal;
	color: var(--rag-primary); background: #fff;
	border: 1px solid color-mix(in srgb, var(--rag-primary) 13%, transparent);
	transition: border-color .25s, background-color .25s, box-shadow .25s, transform .25s;
}
.rag-choice:hover { border-color: color-mix(in srgb, var(--rag-accent) 55%, transparent); transform: translateY(-1px); background: #fff; color: var(--rag-primary); }
.rag-choice.is-checked {
	background: color-mix(in srgb, var(--rag-accent) 5%, #fff);
	border-color: color-mix(in srgb, var(--rag-accent) 50%, transparent);
	box-shadow: 0 14px 30px -24px color-mix(in srgb, var(--rag-accent) 80%, transparent);
}
.rag-check {
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	width: 21px; height: 21px; margin-top: 1px; border-radius: 7px;
	color: transparent; background: #fff;
	border: 1.5px solid color-mix(in srgb, var(--rag-primary) 30%, transparent);
	transition: color .2s, background-color .2s, border-color .2s;
}
.rag-choice.is-checked .rag-check { color: #fff; background: var(--rag-accent); border-color: var(--rag-accent); }

.rag-enter {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	width: 100%; margin-top: 18px; padding: 17px 24px; border: 0; border-radius: 12px; cursor: pointer;
	font: inherit; font-size: 15px; font-weight: 700; letter-spacing: -.01em; text-transform: none;
	color: #fff; background: var(--rag-primary);
	box-shadow: 0 20px 40px -26px color-mix(in srgb, var(--rag-primary) 75%, transparent);
	transition: transform .3s cubic-bezier(.22, 1, .36, 1), background-color .3s;
}
.rag-enter:not(:disabled):hover { transform: translateY(-2px); background: color-mix(in srgb, var(--rag-primary) 85%, #fff); color: #fff; }
.rag-enter:disabled { cursor: not-allowed; color: color-mix(in srgb, var(--rag-primary) 80%, #fff); background: color-mix(in srgb, var(--rag-primary) 22%, #fff); box-shadow: none; }

.rag-choice:focus-visible, .rag-enter:focus-visible, .rag-decline button:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--rag-accent) 35%, transparent); outline-offset: 3px;
}

.rag-fine { margin: 17px 0 0; font-size: 12px; line-height: 1.65; color: color-mix(in srgb, var(--rag-primary) 70%, #fff); }
.rag-fine a { color: var(--rag-primary); font-weight: 800; }

.rag-decline {
	display: flex; justify-content: center; align-items: center; gap: 7px; flex-wrap: wrap;
	margin-top: 17px; padding-top: 17px; font-size: 13px;
	color: color-mix(in srgb, var(--rag-primary) 75%, #fff);
	border-top: 1px solid color-mix(in srgb, var(--rag-accent) 16%, transparent);
}
.rag-decline button {
	padding: 0; border: 0; background: none; cursor: pointer;
	font: inherit; font-weight: 800; color: var(--rag-primary);
	text-decoration: underline; text-underline-offset: 3px; text-transform: none;
}
.rag-gate.is-declined .rag-choices,
.rag-gate.is-declined .rag-enter,
.rag-gate.is-declined .rag-progress { display: none; }

/* Floating product images */
.rag-vial {
	position: absolute; top: -30%; z-index: 1; display: block;
	width: var(--w, clamp(59px, 7.5vw, 120px)); opacity: .9; pointer-events: none;
	animation: rag-drift var(--dur, 30s) linear infinite; animation-delay: var(--delay, 0s);
	will-change: transform;
}
.rag-vial-reveal {
	display: block; width: 100%; opacity: 0; transform-origin: 50% 72%;
	transform: translateY(-26px) scale(.58);
}
.rag-gate.is-ready .rag-vial-reveal { animation: rag-pop .72s var(--pop, 0ms) cubic-bezier(.16, 1, .3, 1) both; }
.rag-vial-img {
	display: block; width: 100%; height: auto; user-select: none;
	filter: drop-shadow(0 25px 45px color-mix(in srgb, var(--rag-primary) 18%, transparent));
}
.rag-bob { animation: rag-bob 4s ease-in-out infinite; }
.rag-bob-delayed { animation: rag-bob-delayed 4.5s ease-in-out 1s infinite; }
.rag-bob-slow { animation: rag-bob-slow 5s ease-in-out .5s infinite; }

.rag-gate.is-leaving .rag-stage { animation: rag-leave .46s both; }

@keyframes rag-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes rag-leave { to { opacity: 0; transform: scale(1.01); } }
@keyframes rag-pop { from { opacity: 0; transform: translateY(-26px) scale(.58); } to { opacity: 1; transform: none; } }
@keyframes rag-drift {
	0% { transform: translate(0, 0) rotate(0); }
	25% { transform: translate3d(var(--drift), 40vh, 0) rotate(var(--tilt)); }
	50% { transform: translateY(80vh) rotate(0); }
	75% { transform: translate3d(var(--drift-n), 120vh, 0) rotate(var(--tilt-n)); }
	to { transform: translateY(160vh) rotate(0); }
}
@keyframes rag-bob { 0%, to { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes rag-bob-delayed { 0%, to { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes rag-bob-slow { 0%, to { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Phones: frosted card over the images, tighter spacing */
@media (max-width: 640px) {
	.rag-stage {
		display: flex; justify-content: flex-start; align-items: center;
		padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
	}
	.rag-stack { flex: none; gap: 12px; width: min(100%, 620px); margin-block: auto; padding-block: 4px; }
	.rag-logo { font-size: clamp(23px, 7vw, 29px); }
	.rag-card {
		padding: clamp(18px, 4.8vw, 24px); border-radius: 20px;
		background: rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .76);
		-webkit-backdrop-filter: blur(18px) saturate(1.24); backdrop-filter: blur(18px) saturate(1.24);
		box-shadow: 0 30px 70px -38px color-mix(in srgb, var(--rag-primary) 52%, transparent), inset 0 1px rgba(255, 255, 255, .92);
	}
	.rag-choice { min-height: 52px; background: rgba(255, 255, 255, .64); }
	.rag-enter { min-height: 52px; }
}
@media (max-height: 640px) {
	.rag-stack { gap: 8px; }
	.rag-logo { font-size: 25px; }
	.rag-card { padding-block: 16px; }
	.rag-card h2 { margin-top: 10px; font-size: 25px; }
	.rag-choices { gap: 7px; margin-top: 13px; }
	.rag-choice { padding-block: 10px; }
	.rag-enter { margin-top: 11px; padding-block: 12px; }
	.rag-fine { margin-top: 10px; font-size: 10.5px; }
	.rag-decline { margin-top: 10px; padding-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
	.rag-stack, .rag-vial, .rag-vial-reveal, .rag-vial-img, .rag-gate.is-leaving .rag-stage { animation: none !important; }
	.rag-vial { opacity: .45; transform: translate3d(0, var(--rest-y), 0) rotate(var(--rest-tilt)); }
	.rag-vial-reveal { opacity: 1; transform: none; }
	.rag-choice, .rag-enter { transition: none; }
}