/*
 * CPA Money Workshop · Orientation — front-end styles
 *
 * Scoped under .cpao so the plugin drops into any theme without a fight.
 * One dark palette (navy, blue, gold). Display face: Plus Jakarta Sans.
 * Body face: Inter. Both fall back to the system stack.
 */

/* ============================================================ TOKENS === */

.cpao {
	--c-bg:       #050F2A;
	--c-bg-2:     #071A3F;
	--c-navy:     #0C2E72;
	--c-navy-2:   #123B8F;
	--c-navy-3:   #1748B3;

	--c-blue:     #2F7CF6;
	--c-blue-2:   #5B9BFF;
	--c-blue-3:   #1D5BC4;
	--c-blue-soft: rgba(47, 124, 246, .16);

	--c-gold:     #F2C14E;
	--c-gold-2:   #D9A62E;
	--c-gold-3:   #FFE28A;
	--c-gold-ink: #2A1D00;

	--c-ink:      #FFFFFF;
	--c-body:     #C9D6F2;
	--c-muted:    #8FA3CF;
	--c-faint:    #6479A8;

	--c-green:    #3DD68C;
	--c-red:      #FF5C6C;

	--c-glass:    rgba(255, 255, 255, .045);
	--c-glass-2:  rgba(255, 255, 255, .08);
	--c-glass-3:  rgba(255, 255, 255, .12);
	--c-line:     rgba(255, 255, 255, .09);
	--c-line-2:   rgba(255, 255, 255, .16);

	--c-disp: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--c-body-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--c-rail:      276px;
	--c-radius:    20px;
	--c-radius-sm: 12px;
	--c-radius-xs: 9px;

	--c-shadow:   0 1px 2px rgba(0, 0, 0, .35), 0 18px 44px -24px rgba(0, 0, 0, .9);
	--c-glow:     0 10px 30px -8px rgba(47, 124, 246, .55);
	--c-ease:     cubic-bezier(.32, .72, .28, 1);
	--c-bar:      68px;
}

/* ===================================================== THEME ARMOUR === */

/*
 * Form controls are the one place a plugin UI reliably loses. Every theme
 * styles bare inputs with selectors that outrank a plugin's own classes.
 * These rules sit at zero specificity (:where) and set the floor; component
 * rules below that need to differ say so with !important.
 */
:where(.cpao) :where(input, select, textarea) {
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	line-height: 1.45 !important;
	font-family: var(--c-body-font) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	text-align: left !important;
	text-transform: none !important;
	text-shadow: none !important;
	color: var(--c-ink) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	float: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

:where(.cpao) :where(input, textarea)::placeholder {
	color: var(--c-faint) !important;
	opacity: 1 !important;
}

.cpao .cpao-input input,
.cpao .cpao-input select,
.cpao .cpao-input textarea {
	color: var(--c-ink) !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.cpao .cpao-input input:-webkit-autofill,
.cpao .cpao-input input:-webkit-autofill:hover,
.cpao .cpao-input input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--c-ink) !important;
	-webkit-box-shadow: 0 0 0 1000px #0B1F4D inset !important;
	caret-color: var(--c-ink);
	transition: background-color 9999s ease-out;
}

:where(.cpao) :where(a) {
	text-decoration: none !important;
	text-shadow: none !important;
}

:where(.cpao) :where(button, [type="button"], [type="submit"], [type="reset"]) {
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	line-height: 1.2 !important;
	font-family: var(--c-body-font) !important;
	font-size: inherit !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
	color: inherit !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	float: none !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

/* ======================================================= PAGE RESET === */

body.cpao-full {
	background: #050F2A;
	color: #C9D6F2;
	margin: 0;
}

/* `:not([class*="cpao-"])` is load-bearing: the plugin uses bare <main> and
   <article> itself. Without the guard this block strips its own layout. */
body.cpao-full :is(
	#page,
	#content,
	.site-content,
	.entry-content,
	.content-area,
	main,
	article,
	.wp-site-blocks,
	.is-layout-constrained
):not([class*="cpao-"]) {
	max-width: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

body.cpao-full :has(.cpao):not([class*="cpao-"]) {
	max-width: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	float: none !important;
}

body.cpao-full .entry-header,
body.cpao-full .page-header,
body.cpao-full .entry-title,
body.cpao-full .entry-footer,
body.cpao-full .post-navigation,
body.cpao-full .wp-block-post-title,
body.cpao-full .site-header,
body.cpao-full .site-footer,
body.cpao-full footer.wp-block-template-part,
body.cpao-full header.wp-block-template-part {
	display: none !important;
}

body.cpao-app-page {
	overflow-x: hidden;
}

/*
 * Themes ship a "Skip to content" link for screen readers and hide it with
 * their own stylesheet. That stylesheet is gone in full-screen mode, so the
 * link would sit visibly above the app. The app has no theme content to
 * skip to, so the link is removed rather than re-hidden.
 */
body.cpao-full :is(
	.skip-link,
	.skip-to-content,
	.skip-to-content-link,
	.screen-reader-text,
	.screen-reader-shortcut,
	[class*="skip-link"],
	[class*="skip-to"],
	a[href="#content"],
	a[href="#main"],
	a[href="#primary"],
	a[href="#site-content"],
	a[href="#page-content"]
):not([class*="cpao-"]) {
	display: none !important;
}


/* ======================================================== PRIMITIVES === */

.cpao,
.cpao * {
	box-sizing: border-box;
}

.cpao {
	font-family: var(--c-body-font);
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--c-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.cpao :where(h1, h2, h3, h4) {
	margin: 0;
	font-family: var(--c-disp);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.022em;
	color: var(--c-ink);
}

.cpao :where(p, ul, ol) {
	margin: 0;
}

.cpao :where(ul, ol) {
	padding: 0;
	list-style: none;
}

.cpao :where(img, svg) {
	display: block;
	max-width: 100%;
}

.cpao :where(b, strong) {
	color: var(--c-ink);
	font-weight: 700;
}

.cpao :where(a) {
	color: inherit;
}

.cpao :focus-visible {
	outline: 2px solid var(--c-blue-2) !important;
	outline-offset: 3px;
	border-radius: 6px;
}

.cpao [hidden] {
	display: none !important;
}

.cpao-i {
	width: 1em;
	height: 1em;
	flex: none;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cpao-i--fill {
	fill: currentColor;
	stroke: none;
}

.cpao-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ============================================================ SHELL === */

.cpao-app {
	position: relative;
	display: flex;
	min-height: 100vh;
	min-height: 100dvh;
	background:
		radial-gradient(1100px 640px at 12% -8%, #1748B3 0%, transparent 56%),
		radial-gradient(900px 600px at 100% 100%, #0F3A93 0%, transparent 56%),
		linear-gradient(180deg, #071A3F, #050F2A 60%);
	background-attachment: fixed;
}

/* ------------------------------------------------------------ rail --- */

.cpao-rail {
	position: sticky;
	top: 0;
	width: var(--c-rail);
	flex: none;
	height: 100vh;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	padding: 22px 16px 16px;
	background: rgba(3, 12, 34, .62);
	-webkit-backdrop-filter: blur(22px);
	backdrop-filter: blur(22px);
	border-right: 1px solid var(--c-line);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .12) transparent;
	z-index: 40;
}

body.admin-bar .cpao-rail {
	top: 32px;
	height: calc(100vh - 32px);
}

.cpao-rail__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	padding: 2px 6px 20px;
}

.cpao-rail__close {
	display: none;
	width: 36px !important;
	height: 36px !important;
	border-radius: 10px !important;
	color: var(--c-muted) !important;
	align-items: center;
	justify-content: center;
	flex: none;
}

.cpao-rail__close:hover {
	background: var(--c-glass-2) !important;
	color: var(--c-ink) !important;
}

/* brand lockup */
.cpao-brand {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	min-width: 0;
	color: inherit;
}

.cpao-brand__badge {
	width: 46px;
	height: 46px;
	border-radius: 13px;
	flex: none;
	display: grid;
	place-items: center;
	background: linear-gradient(160deg, #FFE28A, #D9A62E 60%, #B8860B);
	box-shadow: 0 8px 20px -6px rgba(217, 166, 46, .55), inset 0 1px 0 rgba(255, 255, 255, .45);
	font-family: var(--c-disp);
	font-weight: 800;
	font-size: 24px;
	color: #3A2A00;
	line-height: 1;
}

.cpao-brand__text {
	min-width: 0;
	line-height: 1;
}

.cpao-brand__tag {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 600;
	color: var(--c-muted);
	margin-bottom: 5px;
	white-space: nowrap;
}

.cpao-brand__tag em {
	font-style: normal;
	color: var(--c-gold);
	border: 1.5px solid rgba(242, 193, 78, .8);
	border-radius: 999px;
	padding: 1px 7px;
	font-size: 10.5px;
	letter-spacing: .02em;
}

.cpao-brand__l1,
.cpao-brand__l2 {
	display: block;
	font-family: var(--c-disp);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -.02em;
	line-height: 1;
	font-size: 18.5px;
	white-space: nowrap;
	color: var(--c-ink);
}

.cpao-brand__l2 {
	color: var(--c-blue-2);
	letter-spacing: .06em;
	font-size: 15.5px;
	margin-top: 3px;
}

.cpao-brand__by {
	display: block;
	font-size: 12px;
	color: var(--c-faint);
	margin-top: 7px;
	line-height: 1.2;
}

/* nav */
.cpao-nav {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.cpao-nav__label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c-faint);
	padding: 8px 12px 6px;
}

.cpao-navitem {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 12px 11px 14px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--c-body);
	transition: background .18s var(--c-ease), color .18s var(--c-ease), transform .18s var(--c-ease);
}

.cpao-navitem::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 3px;
	height: 0;
	border-radius: 3px;
	background: var(--c-blue-2);
	transform: translateY(-50%);
	transition: height .22s var(--c-ease);
}

.cpao-navitem__icon {
	width: 20px;
	height: 20px;
	display: grid;
	place-items: center;
	color: var(--c-muted);
	font-size: 20px;
	transition: color .18s var(--c-ease);
}

.cpao-navitem:hover {
	background: var(--c-glass);
	color: var(--c-ink);
}

.cpao-navitem:hover .cpao-navitem__icon {
	color: var(--c-blue-2);
}

.cpao-navitem.is-on {
	background: linear-gradient(90deg, rgba(47, 124, 246, .22), rgba(47, 124, 246, .08));
	color: var(--c-ink);
	box-shadow: inset 0 0 0 1px rgba(91, 155, 255, .18);
}

.cpao-navitem.is-on::before {
	height: 60%;
}

.cpao-navitem.is-on .cpao-navitem__icon {
	color: var(--c-blue-2);
}

.cpao-navitem--quiet {
	font-weight: 500;
	color: var(--c-muted);
	padding-top: 9px;
	padding-bottom: 9px;
}

.cpao-navitem__end {
	margin-left: auto;
	color: var(--c-faint);
	font-size: 14px;
	display: grid;
	place-items: center;
}

/* rail footer: user card + quiet links */
.cpao-rail__foot {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--c-line);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cpao-user {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 8px 8px 12px;
	color: inherit;
	border-radius: 12px;
	transition: background .18s var(--c-ease);
}

.cpao-user:hover {
	background: var(--c-glass);
}

.cpao-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex: none;
	display: grid;
	place-items: center;
	background: linear-gradient(150deg, #5B9BFF, #2F7CF6 55%, #1D5BC4);
	box-shadow: 0 6px 16px -6px rgba(47, 124, 246, .7), inset 0 1px 0 rgba(255, 255, 255, .3);
	color: #fff;
	font-family: var(--c-disp);
	font-weight: 800;
	font-size: 15px;
	letter-spacing: .01em;
}

.cpao-user__text {
	min-width: 0;
	line-height: 1.25;
}

.cpao-user__name {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--c-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cpao-user__sub {
	display: block;
	font-size: 12.5px;
	color: var(--c-faint);
	margin-top: 2px;
}

/* ------------------------------------------------------------ main --- */

.cpao-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.cpao-topbar {
	display: none;
}

.cpao-viewport {
	flex: 1;
	padding: 40px 44px 72px;
}

.cpao-panel {
	max-width: 1000px;
	margin: 0 auto;
	animation: cpao-in .36s var(--c-ease) both;
}

@keyframes cpao-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.cpao-panel { animation: none; }
	.cpao *, .cpao *::before, .cpao *::after { transition-duration: 0s !important; }
}

/* page header */
.cpao-phead {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 26px;
}

.cpao-phead__text {
	min-width: 0;
	max-width: 62ch;
}

.cpao-phead h1 {
	font-size: clamp(26px, 3.2vw, 36px);
	margin: 6px 0 10px;
}

.cpao-phead p {
	color: var(--c-muted);
	font-size: 16.5px;
	line-height: 1.6;
}

.cpao-kick {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c-blue-2);
}

.cpao-kick::before {
	content: "";
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	opacity: .7;
}

.cpao-kick--plain::before {
	display: none;
}

.cpao-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	padding: 9px 14px;
	border-radius: 999px;
	background: var(--c-glass-2);
	border: 1px solid var(--c-line-2);
	color: var(--c-ink);
	white-space: nowrap;
	flex: none;
}

.cpao-pill .cpao-i {
	font-size: 15px;
	color: var(--c-blue-2);
}

.cpao-pill--gold {
	background: rgba(242, 193, 78, .14);
	border-color: rgba(242, 193, 78, .4);
	color: var(--c-gold);
}

.cpao-pill--gold .cpao-i {
	color: var(--c-gold);
}

.cpao-pill--gold b {
	color: var(--c-ink);
}

/* cards */
.cpao-card {
	position: relative;
	background: var(--c-glass);
	border: 1px solid var(--c-line);
	border-radius: var(--c-radius);
	padding: 26px 28px;
	margin-bottom: 18px;
	box-shadow: var(--c-shadow);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	overflow: hidden;
}

.cpao-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
	pointer-events: none;
}

.cpao-card > .cpao-kick {
	margin-bottom: 10px;
}

.cpao-card h3 {
	font-size: 20px;
	margin-bottom: 10px;
}

.cpao-card > p,
.cpao-card .cpao-card__lead {
	color: var(--c-muted);
	margin-bottom: 16px;
	max-width: 70ch;
}

.cpao-card--hot {
	background: linear-gradient(160deg, rgba(47, 124, 246, .28), rgba(47, 124, 246, .07));
	border-color: rgba(91, 155, 255, .42);
}

.cpao-card--asc {
	background: linear-gradient(160deg, #1D5BC4, #0C2E72);
	border-color: rgba(255, 255, 255, .18);
}

.cpao-card--asc > p,
.cpao-card--asc .cpao-ticks li {
	color: #DCE6FB;
}

.cpao-card--gold {
	border-color: rgba(242, 193, 78, .42);
	background: linear-gradient(160deg, rgba(242, 193, 78, .14), rgba(242, 193, 78, .03));
}

.cpao-card--gold::before {
	background: linear-gradient(90deg, transparent, rgba(242, 193, 78, .55), transparent);
}

.cpao-card--big h3 {
	font-size: 24px;
}

.cpao-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-bottom: 18px;
}

.cpao-grid > .cpao-card {
	margin: 0;
}

.cpao-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.cpao-span2 {
	grid-column: span 2;
}

/* buttons */
.cpao-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 13px 22px !important;
	border-radius: 12px !important;
	font-family: var(--c-body-font) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: #fff !important;
	background: linear-gradient(180deg, #4A8DFF, #2F7CF6) !important;
	box-shadow: var(--c-glow), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
	border: 0 !important;
	cursor: pointer !important;
	white-space: nowrap;
	transition: transform .18s var(--c-ease), box-shadow .18s var(--c-ease), background .18s var(--c-ease), opacity .18s;
	-webkit-tap-highlight-color: transparent;
}

.cpao-btn .cpao-i {
	font-size: 17px;
}

.cpao-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 14px 34px -8px rgba(47, 124, 246, .7), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}

.cpao-btn:active {
	transform: translateY(0);
}

.cpao-btn--ghost {
	background: rgba(255, 255, 255, .04) !important;
	border: 1.5px solid var(--c-line-2) !important;
	box-shadow: none !important;
	color: var(--c-ink) !important;
}

.cpao-btn--ghost:hover {
	background: var(--c-glass-2) !important;
	box-shadow: none !important;
}

.cpao-btn--white {
	background: #fff !important;
	color: var(--c-navy) !important;
	box-shadow: 0 10px 26px -10px rgba(255, 255, 255, .4) !important;
}

.cpao-btn--gold {
	background: linear-gradient(180deg, #FFE28A, #E7B53F) !important;
	color: var(--c-gold-ink) !important;
	box-shadow: 0 10px 28px -8px rgba(242, 193, 78, .6), inset 0 1px 0 rgba(255, 255, 255, .5) !important;
}

.cpao-btn--yt {
	background: linear-gradient(180deg, #FF2D55, #E60033) !important;
	box-shadow: 0 10px 28px -8px rgba(255, 0, 51, .55) !important;
}

.cpao-btn--wa {
	background: linear-gradient(180deg, #3FD46A, #25B54F) !important;
	box-shadow: 0 10px 28px -8px rgba(37, 211, 102, .55) !important;
	color: #052C12 !important;
}

.cpao-btn--sm {
	padding: 10px 16px !important;
	font-size: 14px !important;
	border-radius: 10px !important;
}

.cpao-btn--full {
	width: 100% !important;
}

.cpao-btn--quiet {
	background: transparent !important;
	box-shadow: none !important;
	color: var(--c-muted) !important;
}

.cpao-btn--quiet:hover {
	color: var(--c-ink) !important;
	background: var(--c-glass) !important;
}

.cpao-btn.is-busy {
	opacity: .7;
	pointer-events: none;
}

.cpao-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
}

.cpao-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 4px;
}

/* lists */
.cpao-todo {
	counter-reset: n;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.cpao-todo li {
	counter-increment: n;
	position: relative;
	padding-left: 44px;
}

.cpao-todo li::before {
	content: counter(n);
	position: absolute;
	left: 0;
	top: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: linear-gradient(160deg, #FFE28A, #E7B53F);
	color: var(--c-gold-ink);
	font-family: var(--c-disp);
	font-weight: 800;
	font-size: 13px;
	display: grid;
	place-items: center;
	box-shadow: 0 6px 14px -6px rgba(242, 193, 78, .7);
}

.cpao-todo b {
	display: block;
	font-size: 16px;
	line-height: 1.35;
	margin-bottom: 3px;
}

.cpao-todo span {
	display: block;
	font-size: 14.5px;
	color: var(--c-muted);
}

.cpao-todo .cpao-btn {
	margin-top: 12px;
}

.cpao-facts {
	display: grid;
	gap: 14px;
	margin-bottom: 20px;
}

.cpao-facts li {
	display: flex;
	gap: 14px;
	align-items: center;
}

.cpao-facts__ic {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	flex: none;
	display: grid;
	place-items: center;
	background: var(--c-blue-soft);
	color: var(--c-blue-2);
	font-size: 20px;
}

.cpao-facts b {
	display: block;
	font-family: var(--c-disp);
	font-size: 20px;
	letter-spacing: -.02em;
	line-height: 1.1;
}

.cpao-facts span {
	font-size: 13.5px;
	color: var(--c-muted);
}

.cpao-ticks {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin: 6px 0 18px;
}

.cpao-ticks li {
	position: relative;
	padding-left: 30px;
	font-size: 15.5px;
	line-height: 1.5;
}

.cpao-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--c-blue);
	box-shadow: 0 0 0 4px rgba(47, 124, 246, .18);
}

.cpao-ticks li::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 11px;
	width: 5px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.cpao-ticks--gold li::before {
	background: var(--c-gold);
	box-shadow: 0 0 0 4px rgba(242, 193, 78, .18);
}

.cpao-ticks--gold li::after {
	border-color: var(--c-gold-ink);
}

/* Q&A */
.cpao-qa {
	padding: 16px 0;
	border-top: 1px solid var(--c-line);
}

.cpao-qa:first-of-type {
	border-top: 0;
	padding-top: 6px;
}

.cpao-qa:last-child {
	padding-bottom: 4px;
}

.cpao-qa b {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	margin-bottom: 5px;
}

.cpao-qa b .cpao-i {
	color: var(--c-gold);
	font-size: 17px;
}

.cpao-qa p {
	margin: 0;
	font-size: 15px;
	color: var(--c-muted);
}

/* ===================================================== TRAINING DAYS === */

.cpao-day {
	display: flex;
	flex-direction: column;
}

.cpao-day__num {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c-gold);
	margin-bottom: 12px;
}

.cpao-day__num i {
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: rgba(242, 193, 78, .14);
	border: 1px solid rgba(242, 193, 78, .35);
	display: grid;
	place-items: center;
	font-style: normal;
	font-family: var(--c-disp);
	font-size: 12px;
}

.cpao-day h3 {
	font-size: 20px;
	min-height: 2.3em;
}

.cpao-day .cpao-ticks {
	flex: 1;
}

.cpao-day__foot {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--c-faint);
	border-top: 1px solid var(--c-line);
	padding-top: 14px;
}

.cpao-day__foot .cpao-i {
	font-size: 15px;
}

/* =========================================================== STAGES === */

.cpao-stages {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-bottom: 18px;
}

.cpao-stage {
	display: grid;
	grid-template-columns: 148px 1fr;
	gap: 20px;
	background: var(--c-glass);
	border: 1px solid var(--c-line);
	border-radius: var(--c-radius);
	overflow: hidden;
	box-shadow: var(--c-shadow);
	transition: transform .22s var(--c-ease), border-color .22s var(--c-ease);
}

.cpao-stage:hover {
	transform: translateY(-2px);
	border-color: var(--c-line-2);
}

.cpao-stage__im {
	aspect-ratio: 3 / 4;
	background: #03102B;
	position: relative;
}

.cpao-stage__im img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cpao-stage__im::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 70%, rgba(5, 15, 42, .55));
}

.cpao-stage__tx {
	padding: 22px 22px 22px 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.cpao-stage__tx .cpao-kick {
	margin-bottom: 8px;
}

.cpao-stage h3 {
	font-size: 19px;
	margin-bottom: 6px;
}

.cpao-stage p {
	font-size: 14.5px;
	color: var(--c-muted);
}

/* ============================================================= WALL === */

.cpao-filters {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	border-radius: 999px;
	background: var(--c-glass);
	border: 1px solid var(--c-line);
	margin-bottom: 22px;
	max-width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
}

.cpao-filters::-webkit-scrollbar {
	display: none;
}

.cpao-filters button {
	padding: 9px 16px !important;
	border-radius: 999px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--c-body) !important;
	white-space: nowrap;
	transition: background .18s var(--c-ease), color .18s var(--c-ease) !important;
}

.cpao-filters button:hover {
	color: var(--c-ink) !important;
}

.cpao-filters button.is-on {
	background: var(--c-blue) !important;
	color: #fff !important;
	box-shadow: 0 6px 16px -6px rgba(47, 124, 246, .7);
}

.cpao-wall {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.cpao-w {
	background: var(--c-glass);
	border: 1px solid var(--c-line);
	border-radius: 16px;
	overflow: hidden;
	margin: 0;
	transition: transform .22s var(--c-ease), border-color .22s var(--c-ease);
	animation: cpao-in .3s var(--c-ease) both;
}

.cpao-w:hover {
	transform: translateY(-3px);
	border-color: var(--c-line-2);
}

.cpao-w__im {
	aspect-ratio: 4 / 5;
	background: #03102B;
}

.cpao-w__im img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.cpao-w figcaption {
	padding: 13px 14px 15px;
}

.cpao-w b {
	display: block;
	font-size: 14px;
	line-height: 1.35;
	margin-bottom: 3px;
}

.cpao-w span {
	font-size: 13px;
	color: var(--c-muted);
	line-height: 1.45;
}

.cpao-wall__empty {
	text-align: center;
	color: var(--c-faint);
	padding: 40px 0;
}

/* ============================================================= HOST === */

.cpao-host {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 26px;
	align-items: start;
}

.cpao-host__por {
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--c-line-2);
	box-shadow: var(--c-shadow);
}

.cpao-host__por img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.cpao-host__tx p {
	color: var(--c-muted);
	margin-bottom: 14px;
	font-size: 15.5px;
}

.cpao-press {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 4px;
}

.cpao-press span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 13px;
	border-radius: 10px;
	background: var(--c-glass-2);
	border: 1px solid var(--c-line);
	color: var(--c-ink);
}

.cpao-press .cpao-i {
	font-size: 15px;
	color: var(--c-gold);
}

.cpao-pressimgs {
	display: grid;
	gap: 12px;
}

.cpao-pressimgs img {
	border-radius: 12px;
	border: 1px solid var(--c-line);
	width: 100%;
}

.cpao-socials {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 10px;
}

.cpao-socials .cpao-btn {
	padding: 11px 10px !important;
	font-size: 14px !important;
}

/* ======================================================== RESOURCES === */

.cpao-video {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 14px;
	background: #03102B;
	border: 1px solid var(--c-line);
}

.cpao-video img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .85;
	transition: transform .5s var(--c-ease), opacity .3s;
}

.cpao-video:hover img {
	transform: scale(1.03);
	opacity: 1;
}

.cpao-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.cpao-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: linear-gradient(180deg, #4A8DFF, #2F7CF6);
	display: grid;
	place-items: center;
	box-shadow: 0 12px 34px -6px rgba(47, 124, 246, .8), inset 0 1px 0 rgba(255, 255, 255, .3);
	transition: transform .22s var(--c-ease);
}

.cpao-video:hover .cpao-play {
	transform: translate(-50%, -50%) scale(1.06);
}

.cpao-play .cpao-i {
	font-size: 24px;
	margin-left: 3px;
	fill: #fff;
	stroke: none;
}

.cpao-video--sm .cpao-play {
	width: 52px;
	height: 52px;
}

.cpao-video--sm .cpao-play .cpao-i {
	font-size: 20px;
}

/* progress */
.cpao-progress {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 6px 0 20px;
}

.cpao-progress__bar {
	flex: 1;
	height: 8px;
	border-radius: 99px;
	background: rgba(255, 255, 255, .08);
	overflow: hidden;
}

.cpao-progress__bar i {
	display: block;
	height: 100%;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--c-blue), var(--c-blue-2));
	box-shadow: 0 0 12px rgba(91, 155, 255, .6);
	transition: width .4s var(--c-ease);
}

.cpao-progress span {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--c-muted);
	white-space: nowrap;
}

/* lessons */
.cpao-lessons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.cpao-lesson {
	background: rgba(255, 255, 255, .035);
	border: 1px solid var(--c-line);
	border-radius: 16px;
	overflow: hidden;
	transition: border-color .22s var(--c-ease), background .22s var(--c-ease);
}

.cpao-lesson.is-done {
	border-color: rgba(91, 155, 255, .4);
	background: rgba(47, 124, 246, .1);
}

.cpao-lesson .cpao-video {
	border-radius: 0;
	border: 0;
	border-bottom: 1px solid var(--c-line);
}

.cpao-lesson__tx {
	padding: 14px 16px 16px;
}

.cpao-lesson__num {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c-gold);
	margin-bottom: 4px;
}

.cpao-lesson__tx b {
	display: block;
	font-size: 15.5px;
	line-height: 1.35;
	margin-bottom: 12px;
}

.cpao-tick {
	display: inline-flex !important;
	align-items: center;
	gap: 9px;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: var(--c-muted) !important;
	padding: 6px 10px 6px 6px !important;
	border-radius: 9px !important;
	margin-left: -6px;
	transition: color .18s, background .18s !important;
}

.cpao-tick:hover {
	background: var(--c-glass) !important;
	color: var(--c-ink) !important;
}

.cpao-tick__box {
	width: 20px;
	height: 20px;
	border-radius: 6px;
	border: 1.5px solid var(--c-line-2);
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, .04);
	color: transparent;
	font-size: 12px;
	transition: background .18s, border-color .18s, color .18s;
}

.cpao-lesson.is-done .cpao-tick {
	color: var(--c-ink) !important;
}

.cpao-lesson.is-done .cpao-tick__box {
	background: var(--c-blue);
	border-color: var(--c-blue);
	color: #fff;
}

.cpao-tick .t-done { display: none; }
.cpao-lesson.is-done .cpao-tick .t-do { display: none; }
.cpao-lesson.is-done .cpao-tick .t-done { display: inline; }

/* resource rows */
.cpao-res {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 12px 12px;
	border-radius: 12px;
	margin: 0 -12px;
	color: inherit;
	transition: background .18s var(--c-ease);
}

.cpao-res:hover {
	background: var(--c-glass);
}

.cpao-res__ic {
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: linear-gradient(160deg, #FFE28A, #E7B53F);
	color: var(--c-gold-ink);
	font-family: var(--c-disp);
	font-weight: 800;
	font-size: 12px;
	display: grid;
	place-items: center;
	box-shadow: 0 6px 14px -6px rgba(242, 193, 78, .6);
}

.cpao-res__tx {
	min-width: 0;
	flex: 1;
}

.cpao-res__tx b {
	display: block;
	font-size: 15.5px;
}

.cpao-res__tx span {
	font-size: 13.5px;
	color: var(--c-muted);
}

.cpao-res__end {
	color: var(--c-faint);
	font-size: 17px;
}

.cpao-note {
	font-size: 13.5px;
	color: var(--c-faint);
	margin-top: 14px;
}

.cpao-note a {
	color: var(--c-blue-2);
	font-weight: 600;
}

.cpao-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.cpao-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 600;
	padding: 9px 14px;
	border-radius: 999px;
	background: var(--c-glass-2);
	border: 1px solid var(--c-line);
	color: var(--c-ink);
	transition: background .18s var(--c-ease), border-color .18s var(--c-ease), transform .18s var(--c-ease);
}

.cpao-chip .cpao-i {
	font-size: 15px;
	color: var(--c-muted);
}

.cpao-chip:hover {
	background: rgba(47, 124, 246, .28);
	border-color: rgba(91, 155, 255, .5);
	transform: translateY(-1px);
}

/* workbooks */
.cpao-books {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-top: 8px;
}

.cpao-book img {
	border-radius: 12px;
	box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .7);
	margin-bottom: 12px;
	width: 100%;
	border: 1px solid var(--c-line);
}

.cpao-book b {
	display: block;
	font-size: 15.5px;
}

.cpao-book span {
	font-size: 13.5px;
	color: var(--c-muted);
}

/* bonuses */
.cpao-vault {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 8px;
}

.cpao-v {
	position: relative;
	display: block;
	padding: 18px 16px 16px;
	border: 1px dashed var(--c-line-2);
	border-radius: 14px;
	color: inherit;
	transition: border-color .2s var(--c-ease), background .2s var(--c-ease), transform .2s var(--c-ease);
}

.cpao-v__ic {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	background: var(--c-glass-2);
	color: var(--c-muted);
	font-size: 17px;
	margin-bottom: 12px;
}

.cpao-v b {
	display: block;
	font-size: 15px;
	line-height: 1.35;
	padding-right: 64px;
}

.cpao-v span {
	display: block;
	font-size: 13px;
	color: var(--c-muted);
	margin-top: 3px;
}

.cpao-v i {
	position: absolute;
	top: 14px;
	right: 14px;
	font-style: normal;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--c-gold);
	border: 1px solid rgba(242, 193, 78, .5);
	padding: 4px 9px;
	border-radius: 999px;
}

.cpao-v.is-locked {
	opacity: .6;
}

.cpao-v.is-open {
	border-style: solid;
	border-color: rgba(91, 155, 255, .5);
	background: rgba(47, 124, 246, .08);
}

.cpao-v.is-open .cpao-v__ic {
	background: var(--c-blue-soft);
	color: var(--c-blue-2);
}

.cpao-v.is-open i {
	color: var(--c-blue-2);
	border-color: rgba(91, 155, 255, .5);
}

a.cpao-v.is-open:hover {
	transform: translateY(-2px);
	background: rgba(47, 124, 246, .16);
}

/* ========================================================== ACADEMY === */

.cpao-invite {
	display: inline-block;
	padding: 14px 18px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .09);
	border: 1px solid rgba(255, 255, 255, .2);
}

.cpao-invite b {
	display: block;
	font-size: 16px;
}

.cpao-invite span {
	font-size: 14px;
	color: #DCE6FB;
}

.cpao-purow {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	align-items: flex-start;
	margin-bottom: 18px;
}

.cpao-price {
	flex: none;
	text-align: right;
}

.cpao-price small {
	display: block;
	font-size: 11.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--c-muted);
	font-weight: 700;
}

.cpao-price b {
	display: block;
	font-family: var(--c-disp);
	font-size: 42px;
	letter-spacing: -.03em;
	color: var(--c-gold);
	line-height: 1.05;
}

.cpao-price span {
	font-size: 13px;
	color: var(--c-muted);
}

/* ======================================================== ACCOUNT === */

.cpao-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cpao-field label {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--c-body);
	margin-bottom: 7px;
}

.cpao-field__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
}

.cpao-field__aside {
	font-size: 13px;
	font-weight: 600;
	color: var(--c-blue-2) !important;
}

.cpao-input {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 14px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .05);
	border: 1.5px solid var(--c-line-2);
	transition: border-color .18s var(--c-ease), box-shadow .18s var(--c-ease), background .18s;
}

.cpao-input:focus-within {
	border-color: var(--c-blue-2);
	box-shadow: 0 0 0 4px rgba(47, 124, 246, .2);
	background: rgba(255, 255, 255, .07);
}

.cpao-input__icon {
	color: var(--c-faint);
	display: grid;
	place-items: center;
	font-size: 18px;
}

.cpao-input input {
	flex: 1 !important;
	width: 100% !important;
	padding: 13px 0 !important;
	font-size: 15.5px !important;
}

.cpao-input__toggle {
	color: var(--c-faint) !important;
	display: grid;
	place-items: center;
	padding: 6px !important;
	border-radius: 8px !important;
	font-size: 18px;
}

.cpao-input__toggle:hover {
	color: var(--c-ink) !important;
	background: var(--c-glass) !important;
}

.cpao-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.cpao-check {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	cursor: pointer;
	font-size: 14px;
	color: var(--c-muted);
}

.cpao-check input {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	pointer-events: none;
}

.cpao-check__box {
	width: 20px;
	height: 20px;
	flex: none;
	margin-top: 1px;
	border-radius: 6px;
	border: 1.5px solid var(--c-line-2);
	background: rgba(255, 255, 255, .04);
	display: grid;
	place-items: center;
	color: transparent;
	font-size: 12px;
	transition: background .18s, border-color .18s, color .18s;
}

.cpao-check input:checked + .cpao-check__box {
	background: var(--c-blue);
	border-color: var(--c-blue);
	color: #fff;
}

.cpao-check input:focus-visible + .cpao-check__box {
	outline: 2px solid var(--c-blue-2);
	outline-offset: 2px;
}

.cpao-check a {
	color: var(--c-blue-2) !important;
	font-weight: 600;
}

.cpao-strength {
	margin-top: 8px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.cpao-strength__bar {
	flex: 1;
	height: 5px;
	border-radius: 99px;
	background: rgba(255, 255, 255, .08);
	overflow: hidden;
}

.cpao-strength__bar i {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 99px;
	background: var(--c-red);
	transition: width .3s var(--c-ease), background .3s;
}

.cpao-strength[data-level="2"] i { background: var(--c-gold); }
.cpao-strength[data-level="3"] i { background: var(--c-blue-2); }
.cpao-strength[data-level="4"] i { background: var(--c-green); }

.cpao-strength__label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--c-muted);
	min-width: 44px;
	text-align: right;
}

.cpao-field__error {
	font-size: 13px;
	color: var(--c-red);
	margin-top: 6px;
}

.cpao-notice {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	padding: 13px 15px;
	border-radius: 12px;
	font-size: 14.5px;
	line-height: 1.5;
	margin-bottom: 18px;
	border: 1px solid;
}

.cpao-notice .cpao-i {
	font-size: 18px;
	margin-top: 1px;
}

.cpao-notice--error {
	background: rgba(255, 92, 108, .1);
	border-color: rgba(255, 92, 108, .35);
	color: #FFC7CD;
}

.cpao-notice--success {
	background: rgba(61, 214, 140, .1);
	border-color: rgba(61, 214, 140, .35);
	color: #BFF2DA;
}

.cpao-notice--info {
	background: rgba(47, 124, 246, .12);
	border-color: rgba(91, 155, 255, .4);
	color: #D7E5FF;
}

.cpao-account {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	align-items: start;
}

.cpao-account .cpao-card {
	margin: 0;
}

.cpao-account__id {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
}

.cpao-account__id .cpao-avatar {
	width: 56px;
	height: 56px;
	font-size: 20px;
}

.cpao-account__id b {
	display: block;
	font-family: var(--c-disp);
	font-size: 19px;
}

.cpao-account__id span {
	font-size: 14px;
	color: var(--c-muted);
}

.cpao-meta {
	display: grid;
	gap: 10px;
}

.cpao-meta li {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 11px 0;
	border-top: 1px solid var(--c-line);
	font-size: 14.5px;
}

.cpao-meta li:first-child {
	border-top: 0;
	padding-top: 0;
}

.cpao-meta li span {
	color: var(--c-muted);
}

.cpao-meta li b {
	text-align: right;
	font-weight: 600;
}

/* ============================================================= FOOT === */

.cpao-foot {
	max-width: 1000px;
	margin: 30px auto 0;
	text-align: center;
	font-size: 14px;
	color: var(--c-faint);
}

.cpao-foot a {
	color: var(--c-blue-2) !important;
	font-weight: 700;
}

/* ======================================================= MOBILE BAR === */

.cpao-mobilebar {
	display: none;
}

/* ============================================================ SCRIM === */

.cpao-scrim {
	position: fixed;
	inset: 0;
	background: rgba(3, 10, 30, .6);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity .26s var(--c-ease);
	z-index: 45;
}

.cpao-scrim.is-on {
	opacity: 1;
}

/* ============================================================ TOAST === */

.cpao-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translate(-50%, 16px);
	padding: 12px 18px;
	border-radius: 12px;
	background: #0D2358;
	border: 1px solid var(--c-line-2);
	color: var(--c-ink);
	font-family: var(--c-body-font);
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .9);
	opacity: 0;
	pointer-events: none;
	transition: opacity .24s var(--c-ease), transform .24s var(--c-ease);
	z-index: 90;
	max-width: calc(100vw - 32px);
	text-align: center;
}

.cpao-toast.is-on {
	opacity: 1;
	transform: translate(-50%, 0);
}

.cpao-toast--error {
	border-color: rgba(255, 92, 108, .5);
}

/* =================================================== INSTALL PROMPT === */

/*
 * The "install this on your phone" toast. Rendered hidden on every load;
 * pwa.js reveals exactly one body — the browser's real install dialog on
 * Android / desktop Chromium, share-sheet steps on iOS, a menu route on
 * browsers with no install event, or an "open in Safari" nudge inside
 * in-app browsers.
 */
.cpao-install {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: min(400px, calc(100vw - 32px));
	z-index: 80;
	opacity: 0;
	transform: translateY(18px) scale(.98);
	transition: opacity .32s var(--c-ease), transform .32s var(--c-ease);
	pointer-events: none;
	font-family: var(--c-body-font);
}

.cpao-install.is-on {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.cpao-install__card {
	position: relative;
	padding: 18px 18px 16px;
	border-radius: 18px;
	background: linear-gradient(160deg, #0F2A68, #08183F);
	border: 1px solid rgba(91, 155, 255, .35);
	box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .04) inset;
	color: var(--c-body);
	overflow: hidden;
}

.cpao-install__card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
}

.cpao-install__dismiss {
	position: absolute !important;
	top: 10px;
	right: 10px;
	width: 32px !important;
	height: 32px !important;
	border-radius: 9px !important;
	color: var(--c-faint) !important;
	display: grid;
	place-items: center;
	font-size: 16px;
}

.cpao-install__dismiss:hover {
	background: var(--c-glass-2) !important;
	color: var(--c-ink) !important;
}

.cpao-install__head {
	display: flex;
	gap: 14px;
	align-items: center;
	padding-right: 30px;
}

.cpao-install__icon {
	width: 50px;
	height: 50px;
	border-radius: 13px;
	flex: none;
	box-shadow: 0 8px 20px -6px rgba(217, 166, 46, .6);
}

.cpao-install__intro b {
	display: block;
	font-family: var(--c-disp);
	font-size: 15.5px;
	color: var(--c-ink);
	line-height: 1.25;
	margin-bottom: 3px;
}

.cpao-install__intro small {
	display: block;
	font-size: 13px;
	line-height: 1.45;
	color: var(--c-muted);
}

.cpao-install__body {
	margin-top: 14px;
}

.cpao-install__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.cpao-install__steps {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-bottom: 14px;
	counter-reset: s;
}

.cpao-install__steps li {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 13.5px;
	color: var(--c-body);
	counter-increment: s;
}

.cpao-install__steps li::before {
	content: counter(s);
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--c-blue-soft);
	color: var(--c-blue-2);
	font-size: 11.5px;
	font-weight: 800;
	display: grid;
	place-items: center;
	flex: none;
}

.cpao-install__stepicon {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 7px;
	background: var(--c-glass-2);
	color: var(--c-ink);
	font-size: 14px;
	flex: none;
}

.cpao-install__steps li span:last-child {
	flex: 1;
}

.cpao-install__steps li span:last-child b {
	font-weight: 700;
}

/* ============================================================= AUTH === */

.cpao-auth {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	min-height: 100vh;
	min-height: 100dvh;
	background:
		radial-gradient(1000px 600px at 0% 0%, #1748B3 0%, transparent 55%),
		radial-gradient(900px 600px at 100% 100%, #0F3A93 0%, transparent 55%),
		linear-gradient(180deg, #071A3F, #050F2A 60%);
}

.cpao-auth__aside {
	position: relative;
	padding: 48px 52px;
	display: flex;
	align-items: center;
	overflow: hidden;
	border-right: 1px solid var(--c-line);
}

.cpao-auth__glow {
	position: absolute;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(47, 124, 246, .38), transparent 62%);
	top: -160px;
	left: -120px;
	pointer-events: none;
}

.cpao-auth__glow--gold {
	background: radial-gradient(circle, rgba(242, 193, 78, .22), transparent 62%);
	top: auto;
	left: auto;
	right: -160px;
	bottom: -180px;
}

.cpao-auth__inner {
	position: relative;
	max-width: 520px;
}

.cpao-auth__title {
	font-size: clamp(30px, 3.6vw, 44px);
	margin: 34px 0 14px;
	line-height: 1.08;
}

.cpao-auth__title em {
	font-style: normal;
	color: var(--c-gold);
}

.cpao-auth__body {
	color: var(--c-muted);
	font-size: 16.5px;
	max-width: 46ch;
	margin-bottom: 28px;
}

.cpao-auth__points {
	display: grid;
	gap: 12px;
	margin-bottom: 30px;
}

.cpao-auth__points li {
	display: flex;
	gap: 12px;
	align-items: center;
	font-size: 15px;
	color: var(--c-body);
}

.cpao-auth__pointicon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	flex: none;
	display: grid;
	place-items: center;
	background: var(--c-blue-soft);
	color: var(--c-blue-2);
	font-size: 17px;
}

.cpao-auth__stats {
	display: flex;
	gap: 26px;
	flex-wrap: wrap;
}

.cpao-auth__stats b {
	display: block;
	font-family: var(--c-disp);
	font-size: 24px;
	letter-spacing: -.02em;
	color: var(--c-gold);
}

.cpao-auth__stats small {
	font-size: 12.5px;
	color: var(--c-faint);
}

.cpao-auth__main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 40px 24px;
}

.cpao-auth__card {
	width: 100%;
	max-width: 440px;
	background: rgba(255, 255, 255, .045);
	border: 1px solid var(--c-line);
	border-radius: 22px;
	padding: 34px 32px;
	box-shadow: var(--c-shadow);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.cpao-auth__mobilebrand {
	display: none;
	margin-bottom: 22px;
}

.cpao-auth__h1 {
	font-size: 27px;
	margin: 8px 0 8px;
}

.cpao-auth__sub {
	color: var(--c-muted);
	font-size: 15px;
	margin-bottom: 22px;
}

.cpao-auth__foot {
	margin-top: 20px;
	font-size: 14.5px;
	color: var(--c-muted);
	text-align: center;
}

.cpao-auth__foot a {
	color: var(--c-blue-2) !important;
	font-weight: 700;
}

.cpao-auth__legal {
	margin-top: 26px;
	font-size: 12.5px;
	color: var(--c-faint);
	text-align: center;
	max-width: 440px;
}

.cpao-auth__signedin {
	text-align: center;
}

.cpao-auth__signedin .cpao-avatar {
	width: 64px;
	height: 64px;
	font-size: 22px;
	margin: 0 auto 16px;
}

/* ====================================================== RESPONSIVE === */

@media (max-width: 1140px) {
	.cpao-wall { grid-template-columns: repeat(3, 1fr); }
	.cpao-grid--3 { grid-template-columns: 1fr; }
	.cpao-stages { grid-template-columns: 1fr; }
	.cpao-day h3 { min-height: 0; }
}

@media (max-width: 980px) {
	.cpao-auth { grid-template-columns: 1fr; }
	.cpao-auth__aside { display: none; }
	.cpao-auth__mobilebrand { display: flex; }
	.cpao-auth__main { padding: 28px 16px 40px; }
}

@media (max-width: 900px) {
	.cpao-app {
		flex-direction: column;
		background-attachment: scroll;
	}

	/* rail becomes a drawer */
	.cpao-rail {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		height: 100%;
		width: min(320px, 86vw);
		transform: translateX(-104%);
		transition: transform .3s var(--c-ease);
		box-shadow: 30px 0 60px -30px rgba(0, 0, 0, .8);
		background: rgba(4, 13, 36, .96);
		z-index: 60;
		padding-top: 18px;
	}

	body.admin-bar .cpao-rail {
		top: 32px;
		height: calc(100% - 32px);
	}

	.cpao-app.is-navopen .cpao-rail {
		transform: none;
	}

	.cpao-rail__close {
		display: grid;
	}

	/* topbar */
	.cpao-topbar {
		position: sticky;
		top: 0;
		z-index: 30;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px 14px;
		background: rgba(4, 13, 36, .78);
		-webkit-backdrop-filter: blur(18px);
		backdrop-filter: blur(18px);
		border-bottom: 1px solid var(--c-line);
	}

	body.admin-bar .cpao-topbar {
		top: 32px;
	}

	.cpao-burger {
		width: 40px !important;
		height: 40px !important;
		border-radius: 11px !important;
		display: grid;
		place-items: center;
		color: var(--c-ink) !important;
		background: var(--c-glass) !important;
		border: 1px solid var(--c-line) !important;
		font-size: 20px;
		flex: none;
	}

	.cpao-topbar__brand {
		display: flex;
		align-items: center;
		gap: 9px;
		min-width: 0;
		flex: 1;
		color: inherit;
	}

	.cpao-topbar__brand .cpao-brand__badge {
		width: 34px;
		height: 34px;
		border-radius: 10px;
		font-size: 18px;
	}

	.cpao-topbar__brand span {
		font-family: var(--c-disp);
		font-weight: 800;
		font-size: 14px;
		letter-spacing: -.01em;
		color: var(--c-ink);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.cpao-topbar__brand span b {
		color: var(--c-blue-2);
	}

	.cpao-topbar .cpao-avatar {
		width: 36px;
		height: 36px;
		font-size: 13px;
	}

	.cpao-viewport {
		padding: 22px 16px calc(var(--c-bar) + 40px);
	}

	.cpao-phead {
		margin-bottom: 20px;
	}

	.cpao-phead h1 {
		font-size: 26px;
	}

	.cpao-phead p {
		font-size: 15.5px;
	}

	.cpao-card {
		padding: 20px 18px;
		border-radius: 18px;
	}

	.cpao-grid,
	.cpao-grid--3,
	.cpao-lessons,
	.cpao-books,
	.cpao-account,
	.cpao-form__grid {
		grid-template-columns: 1fr;
	}

	.cpao-span2 {
		grid-column: auto;
	}

	.cpao-stage {
		grid-template-columns: 112px 1fr;
		gap: 14px;
	}

	.cpao-stage__tx {
		padding: 14px 14px 14px 0;
	}

	.cpao-wall {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.cpao-host {
		grid-template-columns: 1fr;
	}

	.cpao-vault {
		grid-template-columns: 1fr;
	}

	.cpao-purow {
		flex-direction: column;
	}

	.cpao-price {
		text-align: left;
	}

	.cpao-socials {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.cpao-btn {
		padding: 13px 18px !important;
	}

	.cpao-todo .cpao-btn,
	.cpao-card > .cpao-btn,
	.cpao-actions .cpao-btn {
		width: 100%;
	}

	.cpao-foot {
		margin-top: 22px;
	}

	/* bottom tab bar */
	.cpao-mobilebar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 35;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		height: calc(var(--c-bar) + env(safe-area-inset-bottom));
		padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
		background: rgba(4, 13, 36, .9);
		-webkit-backdrop-filter: blur(20px);
		backdrop-filter: blur(20px);
		border-top: 1px solid var(--c-line);
	}

	.cpao-mobilebar__item {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		border-radius: 12px !important;
		color: var(--c-faint) !important;
		font-size: 10.5px !important;
		font-weight: 700 !important;
		letter-spacing: .01em;
		transition: color .18s, background .18s !important;
		-webkit-tap-highlight-color: transparent;
	}

	.cpao-mobilebar__item .cpao-i {
		font-size: 21px;
	}

	.cpao-mobilebar__item.is-on {
		color: var(--c-blue-2) !important;
		background: rgba(47, 124, 246, .14) !important;
	}

	/* install toast sits above the bar */
	.cpao-install {
		right: 12px;
		left: 12px;
		bottom: calc(var(--c-bar) + 12px + env(safe-area-inset-bottom));
		width: auto;
	}

	.cpao-toast {
		bottom: calc(var(--c-bar) + 14px + env(safe-area-inset-bottom));
	}
}

@media (max-width: 782px) {
	/* WordPress switches the admin bar to 46px here. */
	body.admin-bar .cpao-rail { top: 46px; height: calc(100% - 46px); }
	body.admin-bar .cpao-topbar { top: 46px; }
}

@media (max-width: 480px) {
	.cpao-wall {
		grid-template-columns: 1fr 1fr;
	}

	.cpao-stage {
		grid-template-columns: 96px 1fr;
	}

	.cpao-socials {
		grid-template-columns: 1fr;
	}

	.cpao-auth__card {
		padding: 26px 20px;
	}

	.cpao-brand__l1 { font-size: 17px; }
	.cpao-brand__l2 { font-size: 14px; }
}

/* ============================================================ THEMED === */

/* When the theme keeps its layout, the rail cannot be sticky at 100vh
   inside a constrained container; let it flow instead. */
body.cpao-themed .cpao-app {
	min-height: 0;
	border-radius: 22px;
	overflow: hidden;
	border: 1px solid var(--c-line);
}

body.cpao-themed .cpao-rail {
	position: sticky;
	top: 0;
}

@media (max-width: 900px) {
	body.cpao-themed .cpao-app {
		border-radius: 0;
		border: 0;
	}
}