/* PepTech researcher gate.
   Self-contained: the design tokens are restated here rather than inherited,
   because this renders on every page - Elementor pages, store pages and the
   WooCommerce "coming soon" screen - and those load their variables from three
   different places. A gate that looks right only on some pages is worse than
   one that owns its own values. */

#pt-gate{
	--ptg-ink:#0B1B2E;
	--ptg-muted:#546377;
	--ptg-line:#D1DEEB;
	--ptg-sky:#9CC8E6;
	--ptg-tint:#E1F0FD;
	--ptg-accent:#1668D6;
	--ptg-accent-deep:#0F4C96;
	--ptg-surface:#FFFFFF;
	--ptg-display:'Space Grotesk',system-ui,-apple-system,sans-serif;
	--ptg-body:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;

	--ptg-lilac:#EFE7FB;
	background:
		radial-gradient(120% 90% at 78% 30%,rgba(196,168,232,.30),rgba(196,168,232,0) 62%),
		linear-gradient(160deg,#FFFFFF 0%,#F4FAFF 38%,#E6F2FD 72%,#DCEAF8 100%);
	-webkit-backdrop-filter:blur(10px);
	backdrop-filter:blur(10px);
	font-family:var(--ptg-body);
	color:var(--ptg-ink);
	-webkit-font-smoothing:antialiased;
}
#pt-gate *,#pt-gate *::before,#pt-gate *::after{box-sizing:border-box}

/* the overlay scrolls, not the page behind it - a short viewport must still be
   able to reach the button */
.ptg-scroll{
	position:relative;z-index:1;
	height:100%;overflow-y:auto;overscroll-behavior:contain;
	display:flex;flex-direction:column;align-items:center;
	/* Centred with auto margins rather than justify-content:center. With
	   justify-content, content taller than the viewport overflows past the top
	   and becomes unreachable - the card is tall on a phone, so that is not
	   hypothetical. Auto margins collapse to zero instead and it just scrolls. */
	justify-content:flex-start;
	padding:24px 20px 32px;gap:18px;
}

/* card and vial sit side by side and are centred as one block, so the pair
   stays optically centred rather than the card drifting left */
.ptg-stage{
	display:flex;align-items:center;justify-content:space-between;
	gap:clamp(20px,5vw,72px);width:100%;max-width:1180px;
	/* margin-inline, not the margin shorthand: the shorthand would reset
	   margin-top back to 0 and kill the auto that does the vertical centring. */
	margin-inline:auto;
	margin-top:auto;
}

.ptg-card{
	flex:1 1 auto;width:100%;max-width:600px;background:var(--ptg-surface);
	border-radius:20px;padding:clamp(24px,4vw,44px);
	box-shadow:0 1px 2px rgba(11,27,46,.06),0 24px 60px rgba(11,27,46,.18);
}

.ptg-title{
	font-family:var(--ptg-display);font-size:clamp(28px,4vw,38px);font-weight:700;
	letter-spacing:-.02em;line-height:1.1;color:var(--ptg-ink);margin:0;
}
.ptg-lead{
	font-size:15px;line-height:1.6;color:var(--ptg-muted);
	margin:14px 0 24px;max-width:56ch;
}

/* Each statement is a real <label> wrapping a real checkbox: clicking anywhere
   on the row toggles it, and the native input stays in the accessibility tree
   rather than being replaced by a div pretending to be one. */
.ptg-check{
	display:flex;align-items:flex-start;gap:14px;
	border:1px solid var(--ptg-line);border-radius:14px;
	padding:16px 18px;margin:0 0 12px;cursor:pointer;
	transition:border-color .18s ease,background-color .18s ease;
}
.ptg-check:hover{border-color:var(--ptg-sky);background:#FBFDFF}
.ptg-check:has(.ptg-input:checked){border-color:var(--ptg-accent);background:#F5FAFF}
.ptg-check:has(.ptg-input:focus-visible){outline:2px solid var(--ptg-accent);outline-offset:2px}

/* the input is hidden from sight but not from keyboard or screen reader */
.ptg-input{
	position:absolute;width:1px;height:1px;margin:-1px;padding:0;
	overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.ptg-box{
	flex:0 0 auto;width:22px;height:22px;margin-top:1px;
	border:1.5px solid var(--ptg-sky);border-radius:6px;background:#fff;
	display:inline-flex;align-items:center;justify-content:center;
	transition:all .18s ease;
}
.ptg-box::after{
	content:"";width:11px;height:6px;margin-top:-3px;
	border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;
	transform:rotate(-45deg) scale(.5);opacity:0;transition:all .18s ease;
}
.ptg-input:checked + .ptg-box{background:var(--ptg-accent);border-color:var(--ptg-accent)}
.ptg-input:checked + .ptg-box::after{opacity:1;transform:rotate(-45deg) scale(1)}
.ptg-copy{font-size:15px;line-height:1.55;color:var(--ptg-ink)}
.ptg-copy strong{font-weight:700}

.ptg-enter{
	width:100%;height:58px;margin:20px 0 0;border:0;border-radius:999px;
	background:var(--ptg-accent);color:#fff;cursor:pointer;
	font-family:var(--ptg-body);font-size:17px;font-weight:600;
	display:inline-flex;align-items:center;justify-content:center;gap:10px;
	transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.ptg-enter:hover:not(:disabled){
	background:var(--ptg-accent-deep);transform:translateY(-1px);
	box-shadow:0 10px 26px rgba(22,104,214,.32);
}
.ptg-enter:focus-visible{outline:3px solid var(--ptg-accent-deep);outline-offset:2px}
.ptg-enter:disabled{background:#B7C2D0;color:#F4F7FA;cursor:not-allowed;transform:none;box-shadow:none}

.ptg-hint{
	font-size:12.5px;color:var(--ptg-muted);margin:10px 0 0;text-align:center;
}
/* once both are ticked the hint has nothing left to say */
.ptg-enter:not(:disabled) + .ptg-hint{visibility:hidden}

.ptg-fine{
	font-size:12.5px;line-height:1.65;color:var(--ptg-muted);
	margin:22px 0 0;padding-top:18px;border-top:1px solid var(--ptg-line);
}
.ptg-fine a{color:var(--ptg-accent);text-decoration:underline}

.ptg-exit{font-size:13.5px;color:var(--ptg-ink);margin:0 0 auto;text-align:center}
.ptg-exit a{color:var(--ptg-ink);font-weight:700;text-decoration:underline}

@media (max-width:520px){
	.ptg-scroll{padding:16px 14px 24px}
	.ptg-card{border-radius:16px}
	.ptg-title{font-size:26px}
	.ptg-check{padding:14px}
	.ptg-copy,.ptg-lead{font-size:14.5px}
	.ptg-enter{height:54px;font-size:16px}
}

@media (prefers-reduced-motion:reduce){
	#pt-gate *{transition:none!important}
}


/* --- vial ------------------------------------------------------------------
   The studio white is cut out in the file itself, not blended away in CSS.
   mix-blend-mode was tried first and failed: the float animation and
   will-change on this element create a stacking context, so the image blended
   against its own parent instead of the gate's gradient and kept a white box.
   A real alpha channel has no such dependency. */
/* Two ceilings, both needed. 520px is inside the replacement photograph's 665px
   native width, so it never upscales. 78vh stops it running off a short screen -
   an earlier version reached 828px tall at 1440x900 with 9px of clearance, which
   would have overflowed on any laptop with less height. */
.ptg-vial{
	flex:0 0 auto;display:flex;align-items:center;justify-content:center;
	width:clamp(240px,32vw,520px);max-height:78vh;
	animation:ptg-float 6s ease-in-out infinite;
	will-change:transform;
}
.ptg-vial-img{
	display:block;width:auto;height:auto;
	max-width:100%;max-height:78vh;
	/* deliberately no drop-shadow: the cast shadow was cut out of the file and
	   nothing is put back in its place */
}
@keyframes ptg-float{
	0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}
	50%{transform:translate3d(0,-16px,0) rotate(1deg)}
}

/* --- drifting dots ---------------------------------------------------------
   One keyframe, fifty-two elements, each given its own size, column, duration
   and negative delay inline. The negative delay is what stops them all rising
   in lockstep on load. */
.ptg-bubbles{
	position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
}
/* The gate sits on a near-white gradient, so a dot only reads if it carries a
   defined edge as well as a fill - a pale wash on a pale ground disappears.
   Hence the harder blue outer stop, a visible 1px ring, and a soft glow to
   lift it off the background. */
.ptg-bubble{
	position:absolute;bottom:-60px;left:var(--x);
	width:var(--s);height:var(--s);border-radius:50%;
	background:radial-gradient(circle at 32% 30%,
		rgba(255,255,255,.98) 0%,
		rgba(226,241,254,.92) 26%,
		rgba(120,175,225,.78) 100%);
	box-shadow:0 0 0 1px rgba(72,138,200,.40),
		0 2px 10px rgba(72,138,200,.30);
	opacity:0;
	animation:ptg-rise var(--d) linear infinite;
	animation-delay:var(--delay);
	will-change:transform,opacity;
}
@keyframes ptg-rise{
	0%{transform:translate3d(0,0,0) scale(.85);opacity:0}
	10%{opacity:.95}
	85%{opacity:.8}
	100%{transform:translate3d(18px,-104vh,0) scale(1.1);opacity:0}
}

/* Below the two-column breakpoint the vial would squeeze the card, so it goes.
   The dots stay - they cost nothing and carry the same atmosphere. The logo
   takes the vial's place as the brand mark at exactly the same breakpoint, so
   one of the two is always present and neither is ever doubled up. */
.ptg-logo{display:none}

@media (max-width:900px){
	.ptg-vial{display:none}
	.ptg-logo{
		display:block;width:150px;max-width:52%;height:auto;
		margin:0 auto 22px;
	}
}
@media (max-width:520px){
	.ptg-logo{width:132px;margin-bottom:18px}
}

@media (prefers-reduced-motion:reduce){
	.ptg-vial{animation:none}
	.ptg-bubble{animation:none;opacity:.55}
}

/* links inside a statement: the Terms and the research-use policy */
.ptg-copy a{color:var(--ptg-accent);text-decoration:underline;text-underline-offset:2px}
.ptg-copy a:focus-visible{outline:2px solid var(--ptg-accent);outline-offset:2px;border-radius:2px}
.ptg .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}