/**
 * /register/ (page 33) — a single split-panel auth card.
 *
 * WHAT THE PAGE ALREADY IS
 * Cornerstone renders one layout row with two columns:
 *
 *   .x-row-inner
 *     ├─ .x-col            (Login: headline, UR login form #ur-frontend-form, logo)
 *     └─ #register.x-col   (Register: headline, subhead, UR form 3545)
 *
 * So we don't inject markup. The row *becomes* the card, the left column
 * becomes the dark brand panel, the right column the light form panel.
 *
 * SPECIFICITY
 * The Style Customizer ("Form Designer") compiles
 * uploads/user_registration_styles/user-registration-3545.css and enqueues it
 * ~10 stylesheets AFTER this file, with rules scoped:
 *
 *     #user-registration-form-3545.user-registration input.input-text   (1,2,1)
 *
 * Unprefixed .ur-frontend-form rules are (0,2,1): they lose on specificity AND
 * on source order. Every rule that has to beat the Designer therefore carries
 * the form ID. :is() takes the specificity of its most specific argument, so
 * one prefix covers both live forms without duplicating rules.
 *
 * Cornerstone's own rules are single generated classes (.e33-e4), specificity
 * (0,1,0), so .page-id-33 descendant selectors clear them comfortably.
 *
 * BRANDING (sampled from educators.pcautah.org)
 *   #005daa  PCAU blue (dominant)      #0a2540  deep navy
 *   #dd9933  gold accent               #e3f0fc  pale blue tint
 *   Montserrat (headings) / Lato (body) — both already enqueued site-wide.
 */

:root {
	--pcau-blue: #005daa;
	--pcau-blue-dark: #0d5aa3;
	--pcau-navy: #0a2540;
	--pcau-gold: #dd9933;
	--pcau-tint: #e3f0fc;

	--pcau-ink: #17202c;
	--pcau-muted: #5b6675;
	--pcau-line: #dbe1e8;

	--pcau-radius: 20px;
	--pcau-field-h: 48px;
	--pcau-panel-pad: clamp(1.75rem, 3vw, 3rem);
}

/* ---------------------------------------------------------------- page ---- */

/* Plain white behind the card.
 *
 * Two greys stack here and both have to go. The gradient was ours. Underneath
 * it the Themeco theme paints `body { background: #f3f3f3 }`, so clearing the
 * section to `transparent` just reveals that instead — the section has to paint
 * white over it. */
body.page-id-33,
.page-id-33 .x-section {
	background: #fff;
}

.page-id-33 .x-section {
	padding-block: clamp(2rem, 6vw, 5rem);
}

/* ---------------------------------------------------------------- card ---- */

.page-id-33 .x-row-inner:has(> #register) {
	display: flex;
	align-items: stretch;
	gap: 0;
	max-width: 1080px;
	margin-inline: auto;
	background: #fff;
	border-radius: var(--pcau-radius);
	overflow: hidden;
	box-shadow:
		0 1px 2px rgba(10, 37, 64, 0.04),
		0 12px 28px rgba(10, 37, 64, 0.10),
		0 40px 80px -32px rgba(10, 37, 64, 0.22);
}

.page-id-33 .x-row-inner:has(> #register) > .x-col {
	margin: 0;
	padding: var(--pcau-panel-pad);
	flex: 1 1 50%;
	min-width: 0;
}

/* ------------------------------------------------- left: brand + login ---- */

.page-id-33 .x-row-inner:has(> #register) > .x-col:first-child {
	display: flex;
	flex-direction: column;
	background:
		radial-gradient(700px 380px at 0% 0%, rgba(0, 93, 170, 0.55) 0%, transparent 62%),
		linear-gradient(160deg, #123a5e 0%, var(--pcau-navy) 45%, #071a2e 100%);
	background-color: var(--pcau-navy);
	color: #fff;
	position: relative;
}

/* Hairline seam between the panels. */
.page-id-33 .x-row-inner:has(> #register) > .x-col:first-child::after {
	content: "";
	position: absolute;
	inset-block: 0;
	right: 0;
	width: 1px;
	background: rgba(255, 255, 255, 0.08);
}

/* Logo to the top of the panel, flipped to white. The asset in the DOM is the
   dark-on-light logo; brightness(0) invert(1) renders it solid white without
   swapping the src. */
.page-id-33 .x-row-inner:has(> #register) > .x-col:first-child .x-image {
	order: -1;
	align-self: flex-start;
	margin-bottom: 2rem;
}

.page-id-33 .x-row-inner:has(> #register) > .x-col:first-child .x-image img {
	width: 190px;
	height: auto;
	filter: brightness(0) invert(1);
	opacity: 0.95;
}

/* Cornerstone centers the inner <p>, not the block, and colors it there too.
   Reach the .x-text-content-text descendants or the alignment never lands. */
.page-id-33 .x-row-inner:has(> #register) > .x-col > *,
.page-id-33 .x-row-inner:has(> #register) .x-text-content,
.page-id-33 .x-row-inner:has(> #register) .x-text-content-text,
.page-id-33 .x-row-inner:has(> #register) .x-text-content-text p {
	text-align: left;
}

.page-id-33 .x-row-inner:has(> #register) > .x-col:first-child .x-text-headline,
.page-id-33 .x-row-inner:has(> #register) > .x-col:first-child .x-text-headline * {
	font-family: "Montserrat", sans-serif;
	color: #fff;
	font-size: clamp(1.9rem, 2.6vw, 2.4rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin-bottom: 0.5rem;
}

/* Cornerstone hides this link at lg; as the panel's subhead it should show. */
.page-id-33 .x-row-inner:has(> #register) > .x-col:first-child a.x-text-headline {
	display: block;
	font-family: "Lato", sans-serif;
	font-size: 0.95rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.62);
	margin-bottom: 1.75rem;
	text-decoration: none;
}

.page-id-33 .x-row-inner:has(> #register) > .x-col:first-child a.x-text-headline:hover {
	color: #fff;
}

/* The login form sits directly on the panel — strip UR's card chrome.
 *
 * Two UR rules have to be cleared, measured in the browser rather than guessed:
 *   user-registration.css  body.user-registration-page #user-registration:not(…)  (1,3,1)  background:#fff
 *   user-registration-login.css  #user-registration #ur-frontend-form.login       (2,1,0)  padding:36px 20px 6px
 * body.page-id-33 + two IDs + .ur-frontend-form = (2,2,1), which clears both. */
/* #cs-content gives a second ID so this clears
   body.user-registration-page #user-registration:not(…)  →  (1,2,1). */
body.page-id-33 #cs-content #user-registration,
body.page-id-33 #cs-content #ur-frontend-form.ur-frontend-form,
body.page-id-33 #cs-content #ur-frontend-form.ur-frontend-form.login {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	box-shadow: none;
	border-radius: 0;
}

/* UR ships `color: #222222 !important` on these labels
   (user-registration.css, body.user-registration-page #user-registration …).
   No selector outranks !important, so match it. UR uses 139 of them; this is
   the language the stylesheet speaks. */
body.page-id-33 #cs-content #ur-frontend-form .ur-label,
body.page-id-33 #cs-content #ur-frontend-form label {
	color: rgba(255, 255, 255, 0.72) !important;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0 !important;
}

/* The generated login stylesheet (user-registration-style-login) paints these
   at (1,2,1) with its own form ID, which we cannot know statically. */
body.page-id-33 #cs-content #ur-frontend-form input[type="text"],
body.page-id-33 #cs-content #ur-frontend-form input[type="email"],
body.page-id-33 #cs-content #ur-frontend-form input[type="password"] {
	width: 100%;
	min-height: var(--pcau-field-h);
	padding: 0.7rem 0.9rem !important;
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	border-radius: 10px !important;
	color: #fff !important;
	font-size: 1rem !important;
	transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

body.page-id-33 #cs-content #ur-frontend-form input::placeholder {
	color: rgba(255, 255, 255, 0.38);
}

body.page-id-33 #cs-content #ur-frontend-form input:focus {
	outline: none;
	background: rgba(255, 255, 255, 0.10) !important;
	border-color: rgba(255, 255, 255, 0.55) !important;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12) !important;
}

/* Remember-me / lost-password row reads as body copy, not a field label. */
body.page-id-33 #cs-content #ur-frontend-form .ur-login-remember label,
body.page-id-33 #cs-content #ur-frontend-form .ur-checkbox label {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.72) !important;
}

.page-id-33 #ur-frontend-form button[type="submit"],
.page-id-33 #ur-frontend-form input[type="submit"] {
	width: 100%;
	min-height: 52px;
	margin-top: 0.35rem;
	background: #fff;
	color: var(--pcau-navy);
	border: 0;
	border-radius: 10px;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: transform 120ms ease, box-shadow 140ms ease;
}

.page-id-33 #ur-frontend-form button[type="submit"]:hover,
.page-id-33 #ur-frontend-form input[type="submit"]:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.55);
}

.page-id-33 #ur-frontend-form a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
}

.page-id-33 #ur-frontend-form a:hover {
	color: #fff;
	text-decoration: underline;
}

.page-id-33 #ur-frontend-form .ur-checkbox label,
.page-id-33 #ur-frontend-form .ur-login-remember label {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	font-size: 0.85rem;
}

/* ------------------------------------------------ right: register form ---- */

.page-id-33 #register.x-col {
	background: #fff;
}

.page-id-33 #register .x-text-headline:first-child {
	font-family: "Montserrat", sans-serif;
	color: var(--pcau-ink);
	font-size: clamp(1.6rem, 2.2vw, 2rem);
	letter-spacing: -0.01em;
	margin-bottom: 0.35rem;
}

.page-id-33 #register .x-text-headline + .x-text-headline {
	font-family: "Lato", sans-serif;
	font-size: 0.95rem;
	font-weight: 400;
	color: var(--pcau-muted);
	margin-bottom: 1.75rem;
}

/* Beat the Form Designer: it paints #f4f4f4 and its own padding on the form. */
:is(#user-registration-form-3545, #user-registration-form-50).user-registration {
	background: transparent;
	background-color: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	box-shadow: none;
}

:is(#user-registration-form-3545, #user-registration-form-50).user-registration .ur-field-item {
	margin-bottom: 1.15rem;
}

:is(#user-registration-form-3545, #user-registration-form-50).user-registration label.ur-label {
	font-family: "Lato", sans-serif;
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--pcau-muted);
	margin-bottom: 0.4rem;
}

:is(#user-registration-form-3545, #user-registration-form-50).user-registration input.input-text,
:is(#user-registration-form-3545, #user-registration-form-50).user-registration select,
:is(#user-registration-form-3545, #user-registration-form-50).user-registration textarea.input-text {
	width: 100%;
	min-height: var(--pcau-field-h);
	padding: 0.7rem 0.9rem;
	background: #fbfcfd;
	border: 1px solid var(--pcau-line);
	border-radius: 10px;
	color: var(--pcau-ink);
	font-size: 1rem;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

:is(#user-registration-form-3545, #user-registration-form-50).user-registration input.input-text:focus,
:is(#user-registration-form-3545, #user-registration-form-50).user-registration select:focus,
:is(#user-registration-form-3545, #user-registration-form-50).user-registration textarea.input-text:focus {
	outline: none;
	background: #fff;
	border-color: var(--pcau-blue);
	box-shadow: 0 0 0 3px rgba(0, 93, 170, 0.14);
}

:is(#user-registration-form-3545, #user-registration-form-50).user-registration .description {
	font-size: 0.8rem;
	line-height: 1.45;
	color: var(--pcau-muted);
	margin-top: 0.35rem;
}

/* Radio / checkbox rows read as one tappable line. */
:is(#user-registration-form-3545, #user-registration-form-50).user-registration .ur-radio label,
:is(#user-registration-form-3545, #user-registration-form-50).user-registration .ur-checkbox label {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	font-size: 0.95rem;
	color: var(--pcau-ink);
}

:is(#user-registration-form-3545, #user-registration-form-50).user-registration input[type="radio"],
:is(#user-registration-form-3545, #user-registration-form-50).user-registration input[type="checkbox"] {
	accent-color: var(--pcau-blue);
	width: 18px;
	height: 18px;
	margin: 0;
}

/* The button was never the problem: UR gives the *container* width:max-content
 * (body.user-registration-page .user-registration:not(…) … .ur-button-container),
 * so a 100%-wide button computed to 164px inside a 184px box. Widen the box. */
body.page-id-33 :is(#user-registration-form-3545, #user-registration-form-50).user-registration .ur-button-container,
body.page-id-33 #user-registration .ur-frontend-form .ur-button-container {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 0;
	margin-top: 1rem;
	text-align: left;
}

/* Primary CTA — "Register Now".
 *
 * The Form Designer paints this button at
 *   #user-registration-form-3545.user-registration .ur-button-container button
 * which is (1,2,1) — exactly the specificity of a plain
 *   :is(#form).user-registration button[type="submit"]
 * rule. On a tie the later sheet wins, and the Designer's loads ten stylesheets
 * after ours. Its `color: #000000` and `background-color: #dddddd` therefore
 * beat us, while its lack of `background-image` let our gradient through —
 * producing a blue button with black text.
 *
 * Adding `body` and `.ur-button-container` takes this to (1,2,2), which outranks
 * it outright. A re-save of the Designer cannot flip it back. */
body.page-id-33 :is(#user-registration-form-3545, #user-registration-form-50).user-registration .ur-button-container button,
body.page-id-33 :is(#user-registration-form-3545, #user-registration-form-50).user-registration .ur-button-container input[type="submit"] {
	width: 100%;
	min-height: 54px;
	margin: 0.5rem 0 0;
	padding: 0.9rem 1.5rem;
	background: linear-gradient(180deg, var(--pcau-blue) 0%, var(--pcau-blue-dark) 100%);
	color: #fff;
	border: 0;
	border-radius: 10px;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 0.98rem;
	letter-spacing: 0.03em;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: 0 10px 22px -12px rgba(0, 93, 170, 0.85);
	transition: transform 120ms ease, box-shadow 140ms ease, filter 120ms ease;
}

body.page-id-33 :is(#user-registration-form-3545, #user-registration-form-50).user-registration .ur-button-container button:hover:not(:disabled),
body.page-id-33 :is(#user-registration-form-3545, #user-registration-form-50).user-registration .ur-button-container button:active:not(:disabled) {
	color: #fff;
	transform: translateY(-1px);
	filter: brightness(1.04);
	box-shadow: 0 14px 28px -12px rgba(0, 93, 170, 0.95);
}

body.page-id-33 :is(#user-registration-form-3545, #user-registration-form-50).user-registration .ur-button-container button:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Required marker in the brand gold rather than alarm red. */
:is(#user-registration-form-3545, #user-registration-form-50).user-registration .required {
	color: var(--pcau-gold);
	margin-left: 0.15rem;
	border: 0;
}

/* --------------------------------------------------------- messages ------- */

.page-id-33 .user-registration-error,
.page-id-33 .user-registration-message {
	max-width: 1080px;
	margin: 0 auto 1rem;
	padding: 0.85rem 1.1rem;
	border-radius: 10px;
	border-left: 3px solid currentColor;
	font-size: 0.9rem;
}

.page-id-33 .user-registration-error {
	color: #b42318;
	background: #fef3f2;
}

.page-id-33 .user-registration-message {
	color: #027a48;
	background: #ecfdf3;
}

/* --------------------------------------------------------- responsive ----- */

@media (max-width: 900px) {
	.page-id-33 .x-row-inner:has(> #register) {
		flex-direction: column;
		border-radius: 16px;
	}

	/* Register first on mobile: the page exists to convert new users. */
	.page-id-33 .x-row-inner:has(> #register) > #register.x-col {
		order: -1;
	}

	.page-id-33 .x-row-inner:has(> #register) > .x-col:first-child::after {
		display: none;
	}

	.page-id-33 .x-row-inner:has(> #register) > .x-col:first-child .x-image {
		display: block; /* Cornerstone hides it at md/sm */
	}
}

/* ------------------------------------------------- submit-state overlay ---- */

/*
 * On submit, UR clears the form fields and *then* redirects. The gap shows a
 * blank form, which reads as data loss. forms.js drops this overlay in on
 * submit and holds it through success until navigation.
 *
 * The spinner is an Apple-style activity indicator: twelve tapered spokes with
 * staggered opacity decay, not a rotating arc. Rotating opacity rather than the
 * element itself keeps it crisp at any size and costs one composited layer.
 */

.pcau-overlay {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.1rem;

	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-radius: inherit;

	animation: pcau-fade-in 220ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

/* The dark brand panel needs the inverse scrim. */
.page-id-33 .x-row-inner:has(> #register) > .x-col:first-child .pcau-overlay {
	background: rgba(10, 37, 64, 0.62);
}

@keyframes pcau-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.pcau-spinner {
	position: relative;
	width: 34px;
	height: 34px;
}

.pcau-spinner i {
	position: absolute;
	inset: 0;
	display: block;
}

/* Each spoke: a rounded bar pinned to the top, rotated into place. */
.pcau-spinner i::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 2.5px;
	height: 8px;
	margin-left: -1.25px;
	border-radius: 2px;
	background: var(--pcau-navy);
	opacity: 0.14;
	animation: pcau-spoke 1s linear infinite;
}

.page-id-33 .x-col:first-child .pcau-spinner i::before {
	background: #fff;
}

@keyframes pcau-spoke {
	0%   { opacity: 1; }
	100% { opacity: 0.14; }
}

/* 12 spokes at 30° each, delays stepped by 1/12s so the bright spoke travels. */
.pcau-spinner i:nth-child(1)  { transform: rotate(0deg); }
.pcau-spinner i:nth-child(2)  { transform: rotate(30deg); }
.pcau-spinner i:nth-child(3)  { transform: rotate(60deg); }
.pcau-spinner i:nth-child(4)  { transform: rotate(90deg); }
.pcau-spinner i:nth-child(5)  { transform: rotate(120deg); }
.pcau-spinner i:nth-child(6)  { transform: rotate(150deg); }
.pcau-spinner i:nth-child(7)  { transform: rotate(180deg); }
.pcau-spinner i:nth-child(8)  { transform: rotate(210deg); }
.pcau-spinner i:nth-child(9)  { transform: rotate(240deg); }
.pcau-spinner i:nth-child(10) { transform: rotate(270deg); }
.pcau-spinner i:nth-child(11) { transform: rotate(300deg); }
.pcau-spinner i:nth-child(12) { transform: rotate(330deg); }

.pcau-spinner i:nth-child(1)::before  { animation-delay: -0.9167s; }
.pcau-spinner i:nth-child(2)::before  { animation-delay: -0.8333s; }
.pcau-spinner i:nth-child(3)::before  { animation-delay: -0.75s; }
.pcau-spinner i:nth-child(4)::before  { animation-delay: -0.6667s; }
.pcau-spinner i:nth-child(5)::before  { animation-delay: -0.5833s; }
.pcau-spinner i:nth-child(6)::before  { animation-delay: -0.5s; }
.pcau-spinner i:nth-child(7)::before  { animation-delay: -0.4167s; }
.pcau-spinner i:nth-child(8)::before  { animation-delay: -0.3333s; }
.pcau-spinner i:nth-child(9)::before  { animation-delay: -0.25s; }
.pcau-spinner i:nth-child(10)::before { animation-delay: -0.1667s; }
.pcau-spinner i:nth-child(11)::before { animation-delay: -0.0833s; }
.pcau-spinner i:nth-child(12)::before { animation-delay: 0s; }

.pcau-overlay__label {
	margin: 0;
	font-family: "Lato", sans-serif;
	font-size: 0.9rem;
	letter-spacing: 0.01em;
	color: var(--pcau-muted);
	text-align: center;
	animation: pcau-rise 320ms cubic-bezier(0.32, 0.72, 0, 1) both 60ms;
}

.page-id-33 .x-col:first-child .pcau-overlay__label {
	color: rgba(255, 255, 255, 0.85);
}

@keyframes pcau-rise {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}

/* Settle the form underneath rather than leaving it sharp behind the blur. */
.ur-frontend-form.pcau-busy form {
	transition: opacity 220ms ease;
	opacity: 0.55;
	pointer-events: none;
}

/* Vestibular safety: keep the indicator legible, drop the motion. */
@media (prefers-reduced-motion: reduce) {
	.pcau-overlay,
	.pcau-overlay__label {
		animation: none;
	}

	.pcau-spinner i::before {
		animation: none;
		opacity: 0.45;
	}

	.pcau-spinner i:nth-child(1)::before { opacity: 1; }
}

/* No backdrop-filter (older Firefox): fall back to a solid scrim. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.pcau-overlay {
		background: rgba(255, 255, 255, 0.94);
	}

	.page-id-33 .x-row-inner:has(> #register) > .x-col:first-child .pcau-overlay {
		background: rgba(10, 37, 64, 0.92);
	}
}

/* ------------------------------------------- signed-in state on /register/ ---

   UR replaces the form with "You are currently logged in as X. Logout »",
   rendering the name as <a href="#"> — a link to nowhere
   (class-ur-shortcodes.php:308). registration-redirect.php rewrites that markup
   so the name and a primary action both point at checkout (or at the course,
   when the visitor is already enrolled). This styles the result. */

.page-id-33 .pcau-signed-in {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.9rem;
	max-width: 640px;
	margin: 1rem 0 0;
	padding: 1.5rem;
	border: 1px solid var(--pcau-line);
	border-radius: 12px;
	background: #fbfcfd;
	font-size: 1rem;
	color: var(--pcau-ink);
}

.page-id-33 .pcau-signed-in__who {
	line-height: 1.5;
}

.page-id-33 .pcau-signed-in__name {
	font-weight: 700;
	color: var(--pcau-blue);
	text-decoration: none;
}

.page-id-33 .pcau-signed-in__name:hover {
	text-decoration: underline;
}

/* The one thing left to do on this page. */
.page-id-33 .pcau-signed-in__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 54px;
	padding: 0.9rem 1.5rem;
	border-radius: 10px;
	background: linear-gradient(180deg, var(--pcau-blue) 0%, var(--pcau-blue-dark) 100%);
	color: #fff;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 0.98rem;
	letter-spacing: 0.03em;
	text-decoration: none;
	box-shadow: 0 10px 22px -12px rgba(0, 93, 170, 0.85);
	transition: transform 120ms ease, filter 120ms ease, box-shadow 140ms ease;
}

.page-id-33 .pcau-signed-in__cta:hover {
	color: #fff;
	transform: translateY(-1px);
	filter: brightness(1.04);
	box-shadow: 0 14px 28px -12px rgba(0, 93, 170, 0.95);
}

.page-id-33 .pcau-signed-in__logout {
	font-size: 0.88rem;
	color: var(--pcau-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.page-id-33 .pcau-signed-in__logout:hover {
	color: var(--pcau-ink);
}

@media (prefers-reduced-motion: reduce) {
	.page-id-33 .pcau-signed-in__cta,
	.page-id-33 .pcau-signed-in__cta:hover {
		transition: none;
		transform: none;
	}
}