/* ==========================================================
   Passster password gate, restyled to match kolton.net
   Scoped entirely to .passster-form / .ps-* classes, so this
   is safe to load site-wide (only renders on gated pages).

   NOTE: Passster injects its own dynamic inline <style> block
   (from its Design tab) late in the document, using the same
   plain .passster-form selectors we'd otherwise use. Equal
   specificity + later DOM position means IT wins ties. Every
   selector below is prefixed with "html body" purely to raise
   specificity above that inline block, regardless of injection
   order. Don't simplify these back to bare ".passster-form".
   ========================================================== */

html body .passster-form {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	transform: none !important;
	text-align: center !important;
	background: #fff !important;
	padding: 56px 32px !important;
	border-radius: 20px !important;
	box-shadow: 0 8px 30px rgba(12,23,32,.10) !important;
	box-sizing: border-box !important;
}

html body .passster-form .ps-form-headline,
html body .passster-form .ps-form-headline-wrap {
	font-family: "Fraunces", Georgia, serif !important;
	font-weight: 550 !important;
	font-size: clamp(1.8rem, 3.6vw, 2.75rem) !important;
	color: #071a26 !important;
	text-align: center !important;
	width: 100% !important;
	letter-spacing: -0.01em !important;
	margin: 0 0 16px !important;
}

html body .passster-form .ps-form-instructions-wrap {
	font-family: "Inter", system-ui, -apple-system, sans-serif !important;
	color: #55666f !important;
	text-align: center !important;
	width: 100% !important;
	font-size: clamp(.85rem, 1.3vw, 1.05rem) !important;
	line-height: 1.5 !important;
	margin: 0 0 28px !important;
}
@media (min-width: 820px) {
	html body .passster-form .ps-form-instructions-wrap {
		white-space: nowrap !important;
	}
}

html body .passster-form form {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100% !important;
}

html body .passster-form .passster-password,
html body .passster-form input[type="password"],
html body .passster-form input[type="text"] {
	max-width: 420px !important;
	width: 100% !important;
	margin: 0 auto !important;
	display: block !important;
	text-align: center !important;
	border-radius: 10px !important;
	border: 1px solid #e6e4dc !important;
	box-shadow: none !important;
	outline: none !important;
	padding: 12px 16px !important;
	font-family: "Inter", system-ui, sans-serif !important;
	box-sizing: border-box !important;
}
html body .passster-form .passster-password:focus,
html body .passster-form input[type="password"]:focus,
html body .passster-form input[type="text"]:focus {
	border-color: #17a898 !important;
	box-shadow: 0 0 0 1px #17a898 !important;
	outline: none !important;
}

html body .passster-form .passster-submit,
html body .passster-form .passster-submit-recaptcha,
html body .passster-form .passster-submit-turnstile {
	background: #17a898 !important;
	border: 1px solid #0b6a60 !important;
	color: #fff !important;
	border-radius: 999px !important;
	padding: 12px 36px !important;
	font-family: "Space Grotesk", system-ui, sans-serif !important;
	font-weight: 600 !important;
	margin-top: 20px !important;
	box-shadow: none !important;
	text-shadow: none !important;
	transition: background .15s cubic-bezier(.22,.61,.36,1) !important;
}
html body .passster-form .passster-submit:hover,
html body .passster-form .passster-submit:focus {
	background: #0f8577 !important;
}

/* error state stays legible against the white card */
html body .passster-form .passster-error,
html body .passster-form [class*="error"] {
	color: #b3261e !important;
	text-align: center !important;
	width: 100% !important;
}