/* ==================================================================
   Capital Pulse — company pages

   Everything these pages need, in one file.

   The old pages read their colours from variables defined by an inline
   <style> block that the member area writes. When that block was
   missing or empty the variables resolved to nothing: coloured panels
   painted white, and the white text written for them disappeared. That
   is why headings kept vanishing.

   Here every colour has a literal fallback in the same declaration, so
   there is no arrangement of loading order, caching or missing blocks
   that can leave an element with no colour at all.
   ================================================================== */

:root {
	--c-brand:        #3a1fd6;
	--c-brand-rgb:    58, 31, 214;
	--c-brand-2:      #7d2ae8;
	--c-brand-hover:  #3319bd;
	--c-brand-tint:   #eeebfd;

	--c-ink:          #141034;
	--c-ink-2:        #474168;
	--c-ink-3:        #6f6a8c;

	--c-bg:           #ffffff;
	--c-bg-2:         #f7f6fd;
	--c-border:       #e3e0f5;

	--c-up:           #0a7a43;
	--c-down:         #d93025;
	--c-warn:         #9a5c00;

	--c-radius:       14px;
	--c-shell:        1140px;
	--c-gutter:       clamp(1rem, 4vw, 2rem);

	--c-font:         "Lexend", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--c-font-body:    "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Dark is a separate set of surfaces, not the light one inverted. */
html[data-cp-mode="dark"],
html[data-bs-theme="dark"] {
	--c-brand:        #8c7aff;
	--c-brand-rgb:    140, 122, 255;
	--c-brand-2:      #a05cff;
	--c-brand-hover:  #9e90ff;
	--c-brand-tint:   #1d1547;

	--c-ink:          #ece9ff;
	--c-ink-2:        #b3aed4;
	--c-ink-3:        #8079a6;

	--c-bg:           #0a0620;
	--c-bg-2:         #140c33;
	--c-border:       #2a2057;

	--c-up:           #3ddc84;
	--c-down:         #ff6b5e;
	--c-warn:         #ffc14d;
}

/* ---- base ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.cpc-public {
	margin: 0;
	background: var(--c-bg, #fff);
	color: var(--c-ink, #141034);
	font-family: var(--c-font-body);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

body.cpc-public h1,
body.cpc-public h2,
body.cpc-public h3,
body.cpc-public h4,
body.cpc-public h5,
body.cpc-public h6 {
	font-family: var(--c-font);
	font-weight: 600;
	line-height: 1.25;
	color: var(--c-ink, #141034);
	margin: 0 0 .6em;
	overflow-wrap: anywhere;
}

body.cpc-public a { color: var(--c-brand, #3a1fd6); }

body.cpc-public img,
body.cpc-public svg { max-width: 100%; height: auto; }

body.cpc-public :focus-visible {
	outline: 2px solid var(--c-brand, #3a1fd6);
	outline-offset: 2px;
	border-radius: 3px;
}

.cpc-shell {
	width: 100%;
	max-width: var(--c-shell);
	margin-inline: auto;
	padding-inline: var(--c-gutter);
}

.cpc-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: .7rem 1.1rem;
	background: var(--c-brand, #3a1fd6);
	color: #fff;
}

.cpc-skip:focus { left: 0; }

/* ---- header -------------------------------------------------------
   In the flow, not fixed. Nothing below it needs clearance, so there
   is no height to measure and nothing to get wrong.
   ------------------------------------------------------------------ */

.cpc-top {
	background: var(--c-bg, #fff);
	border-bottom: 1px solid var(--c-border, #e3e0f5);
}

.cpc-top-inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 64px;
}

.cpc-brand {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	margin-right: auto;
	min-width: 0;
	font-family: var(--c-font);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--c-ink, #141034);
	text-decoration: none;
}

.cpc-brand img { width: 36px; height: 36px; object-fit: contain; flex: 0 0 auto; }

.cpc-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cpc-top-nav { display: flex; gap: .2rem; }

.cpc-top-nav a {
	padding: .45rem .75rem;
	border-radius: 9px;
	color: var(--c-ink-2, #474168);
	font-size: .95rem;
	text-decoration: none;
	white-space: nowrap;
}

.cpc-top-nav a:hover { background: var(--c-bg-2, #f7f6fd); color: var(--c-ink, #141034); }

.cpc-top-nav a[aria-current="page"] {
	background: var(--c-brand-tint, #eeebfd);
	color: var(--c-brand, #3a1fd6);
}

.cpc-top-actions { display: flex; align-items: center; gap: .5rem; }

.cpc-mode,
.cpc-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--c-border, #e3e0f5);
	border-radius: 9px;
	background: var(--c-bg, #fff);
	color: var(--c-ink-2, #474168);
	cursor: pointer;
	font-size: 1rem;
}

.cpc-burger { display: none; }

.cpc-mode .cpc-moon { display: none; }

html[data-cp-mode="dark"] .cpc-mode .cpc-moon,
html[data-bs-theme="dark"] .cpc-mode .cpc-moon { display: inline; }

html[data-cp-mode="dark"] .cpc-mode .cpc-sun,
html[data-bs-theme="dark"] .cpc-mode .cpc-sun { display: none; }

.cpc-btn {
	display: inline-flex;
	align-items: center;
	padding: .55rem 1.1rem;
	border-radius: 999px;
	background: linear-gradient(135deg, #3a1fd6 0%, #7d2ae8 100%);
	color: #fff;
	font-family: var(--c-font);
	font-size: .93rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.cpc-btn:hover { color: #fff; opacity: .93; }

.cpc-menu {
	border-top: 1px solid var(--c-border, #e3e0f5);
	background: var(--c-bg, #fff);
	padding-block: .5rem;
}

.cpc-menu[hidden] { display: none; }

.cpc-menu a {
	display: block;
	padding: .65rem 0;
	color: var(--c-ink-2, #474168);
	text-decoration: none;
}

@media (max-width: 860px) {
	.cpc-top-nav { display: none; }
	.cpc-burger { display: inline-flex; }
}

/* ---- hero ---------------------------------------------------------
   Its own gradient, written out. It cannot resolve to white, so the
   white text on it cannot disappear.
   ------------------------------------------------------------------ */

.cpc-hero {
	background: linear-gradient(135deg, #3a1fd6 0%, #7d2ae8 100%);
	color: #fff;
}

.cpc-hero-body { padding-block: clamp(2rem, 5vw, 3.25rem); }

body.cpc-public .cpc-hero h1 {
	margin: 0;
	color: #fff;
	font-size: clamp(1.7rem, 4vw, 2.6rem);
}

body.cpc-public .cpc-hero-lead {
	margin: .7rem 0 0;
	max-width: 62ch;
	color: #fff;
	opacity: .85;
}

body.cpc-public .cpc-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-bottom: .9rem;
	font-size: .88rem;
	color: rgba(255, 255, 255, .8);
}

body.cpc-public .cpc-crumbs a { color: #fff; text-decoration: underline; }

/* ---- body ---------------------------------------------------------- */

.cpc-body { padding-block: clamp(2rem, 5vw, 3.5rem); }

.cpc-body > * { max-width: 100%; }

.cpc-body p,
.cpc-body li { color: var(--c-ink-2, #474168); }

.cpc-body h2 { margin-top: 2em; }
.cpc-body h3 { margin-top: 1.6em; }

.cpc-body table {
	width: 100%;
	max-width: 100%;
	display: block;
	overflow-x: auto;
	border-collapse: collapse;
}

.cpc-body th,
.cpc-body td {
	padding: .65rem .8rem;
	border-bottom: 1px solid var(--c-border, #e3e0f5);
	text-align: left;
}

/* ---- footer -------------------------------------------------------- */

.cpc-foot {
	padding-block: 2rem;
	background: var(--c-bg-2, #f7f6fd);
	border-top: 1px solid var(--c-border, #e3e0f5);
	color: var(--c-ink-3, #6f6a8c);
	font-size: .9rem;
}

.cpc-foot-links {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.4rem;
	margin-bottom: 1rem;
}

.cpc-foot-links a { color: var(--c-ink-2, #474168); text-decoration: none; }

.cpc-foot-links a:hover { color: var(--c-brand, #3a1fd6); text-decoration: underline; }

.cpc-foot-note { margin: 0; }

/* ---- shared safety ------------------------------------------------
   A flex child will not shrink below its content unless told to, and
   pushes its neighbour out of the box instead. Where the parent clips,
   that neighbour disappears rather than wraps.
   ------------------------------------------------------------------ */

body.cpc-public .cpc-shell > *,
body.cpc-public [class*="cpc-"] { min-width: 0; }

body.cpc-public { overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
	body.cpc-public *,
	body.cpc-public *::before,
	body.cpc-public *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* ==================================================================
   Layout and component classes the shortcodes emit

   The FAQ accordion, the policy pages, the contact form, the events
   grid and the support cards are all written with the purchased
   template's class names: card, row, col-*, form-control, the spacing
   utilities. Those came from its 647 KB stylesheet.

   That stylesheet is no longer loaded here, so the ones actually used
   are written out below. Only those — eighty-odd, not the two thousand
   the bundle carried.
   ================================================================== */

/* ---- grid ---------------------------------------------------------- */

body.cpc-public .row {
	display: flex;
	flex-wrap: wrap;
	margin-inline: -.5rem;
}

body.cpc-public .row > [class*="col-"] {
	padding-inline: .5rem;
	margin-bottom: 1rem;
	min-width: 0;
	flex: 0 0 100%;
	max-width: 100%;
}

body.cpc-public .g-3 > [class*="col-"] { margin-bottom: .75rem; }
body.cpc-public .g-4 > [class*="col-"] { margin-bottom: 1rem; }

body.cpc-public .col-12 { flex: 0 0 100%; max-width: 100%; }
body.cpc-public .col-6  { flex: 0 0 50%;  max-width: 50%; }

@media (min-width: 576px) {
	body.cpc-public .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
}

@media (min-width: 768px) {
	body.cpc-public .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
	body.cpc-public .col-md-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
	body.cpc-public .col-md-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
}

@media (min-width: 992px) {
	body.cpc-public .col-lg-3 { flex: 0 0 25%;      max-width: 25%; }
	body.cpc-public .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
}

/* ---- cards --------------------------------------------------------- */

body.cpc-public .card,
body.cpc-public .adminuiux-card {
	display: flex;
	flex-direction: column;
	background: var(--c-bg, #fff);
	border: 1px solid var(--c-border, #e3e0f5);
	border-radius: var(--c-radius, 14px);
	min-width: 0;
}

body.cpc-public .card-body { flex: 1; padding: 1.25rem; }
body.cpc-public .card-header {
	padding: .9rem 1.25rem;
	border-bottom: 1px solid var(--c-border, #e3e0f5);
}
body.cpc-public .card-footer {
	padding: .9rem 1.25rem;
	border-top: 1px solid var(--c-border, #e3e0f5);
}

body.cpc-public .h-100 { height: 100%; }

/* ---- buttons ------------------------------------------------------- */

body.cpc-public .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	padding: .6rem 1.15rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: none;
	font-family: var(--c-font);
	font-size: .95rem;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
}

body.cpc-public .btn-sm { padding: .42rem .85rem; font-size: .87rem; }

body.cpc-public .btn-theme {
	background: linear-gradient(135deg, #3a1fd6 0%, #7d2ae8 100%);
	color: #fff;
}

body.cpc-public .btn-light {
	background: #fff;
	color: var(--c-brand, #3a1fd6);
}

body.cpc-public .btn-outline-theme {
	border-color: var(--c-brand, #3a1fd6);
	color: var(--c-brand, #3a1fd6);
}

body.cpc-public .btn-outline-theme:hover {
	background: var(--c-brand, #3a1fd6);
	color: #fff;
}

/* ---- forms --------------------------------------------------------- */

body.cpc-public .form-control,
body.cpc-public .form-select {
	display: block;
	width: 100%;
	padding: .62rem .85rem;
	border: 1px solid var(--c-border, #e3e0f5);
	border-radius: 9px;
	background: var(--c-bg, #fff);
	color: var(--c-ink, #141034);
	font: inherit;
	font-size: .95rem;
}

body.cpc-public .form-control:focus,
body.cpc-public .form-select:focus {
	border-color: var(--c-brand, #3a1fd6);
	outline: none;
	box-shadow: 0 0 0 3px rgba(var(--c-brand-rgb, 58, 31, 214), .15);
}

body.cpc-public textarea.form-control { min-height: 120px; }

/* ---- avatars, badges, alerts --------------------------------------- */

body.cpc-public .avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 10px;
}

body.cpc-public .avatar-40 { width: 40px; height: 40px; }
body.cpc-public .avatar-60 { width: 60px; height: 60px; font-size: 1.3rem; }
body.cpc-public .rounded-circle { border-radius: 50%; }
body.cpc-public .rounded { border-radius: 10px; }

body.cpc-public .badge {
	display: inline-flex;
	align-items: center;
	padding: .25rem .6rem;
	border-radius: 999px;
	font-size: .76rem;
	font-weight: 500;
}

body.cpc-public .bg-white-opacity { background: rgba(255, 255, 255, .18); color: #fff; }

body.cpc-public .alert,
body.cpc-public .notice {
	padding: .9rem 1.1rem;
	border: 1px solid var(--c-border, #e3e0f5);
	border-radius: 11px;
	background: var(--c-bg-2, #f7f6fd);
}

body.cpc-public .alert-warning,
body.cpc-public .notice-warning {
	border-left: 3px solid var(--c-warn, #9a5c00);
	background: rgba(154, 92, 0, .08);
}

body.cpc-public .alert.danger,
body.cpc-public .notice.error {
	border-left: 3px solid var(--c-down, #d93025);
	background: rgba(217, 48, 37, .08);
}

/* ---- the theme-coloured helpers, with literal fallbacks ------------ */

body.cpc-public .bg-theme-1 {
	background: var(--c-brand, #3a1fd6);
	color: #fff;
}

body.cpc-public .bg-theme-1 h4,
body.cpc-public .bg-theme-1 h5,
body.cpc-public .bg-theme-1 p { color: #fff; }

body.cpc-public .bg-theme-1-subtle {
	background: var(--c-brand-tint, #eeebfd);
	color: var(--c-ink, #141034);
}

body.cpc-public .text-theme-1 { color: var(--c-brand, #3a1fd6); }

/* ---- type and spacing utilities ------------------------------------ */

body.cpc-public .h4 { font-family: var(--c-font); font-size: 1.4rem; font-weight: 600; }
body.cpc-public .h5 { font-family: var(--c-font); font-size: 1.15rem; font-weight: 600; }
body.cpc-public .small,
body.cpc-public .description { font-size: .875rem; }
body.cpc-public .fw-medium { font-weight: 500; }
body.cpc-public .text-center { text-align: center; }
body.cpc-public .text-secondary { color: var(--c-ink-3, #6f6a8c); }
body.cpc-public .opacity-75 { opacity: .75; }
body.cpc-public .mx-auto { margin-inline: auto; }
body.cpc-public .align-items-center { align-items: center; }

body.cpc-public .mb-0 { margin-bottom: 0 !important; }
body.cpc-public .mb-1 { margin-bottom: .25rem; }
body.cpc-public .mb-2 { margin-bottom: .5rem; }
body.cpc-public .mb-3 { margin-bottom: 1rem; }
body.cpc-public .mb-4 { margin-bottom: 1.5rem; }
body.cpc-public .me-1 { margin-right: .25rem; }
body.cpc-public .me-2 { margin-right: .5rem; }
body.cpc-public .p-3 { padding: 1rem; }
body.cpc-public .p-4 { padding: 1.5rem; }
body.cpc-public .py-5 { padding-block: 3rem; }

body.cpc-public .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Bootstrap Icons render from the font declared in the page head */
body.cpc-public .bi::before {
	font-family: bootstrap-icons !important;
	font-style: normal;
	font-weight: normal !important;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	vertical-align: -.125em;
	-webkit-font-smoothing: antialiased;
}

/* The fifteen icon glyphs these pages use, lifted from the bundle so
   the font has something to draw without loading the rest of it. */
body.cpc-public .bi-arrow-right::before { content: "\f138"; }
body.cpc-public .bi-calendar-event::before { content: "\f1e8"; }
body.cpc-public .bi-calendar3::before { content: "\f214"; }
body.cpc-public .bi-check2::before { content: "\f272"; }
body.cpc-public .bi-envelope::before { content: "\f32f"; }
body.cpc-public .bi-geo-alt::before { content: "\f3e8"; }
body.cpc-public .bi-list::before { content: "\f479"; }
body.cpc-public .bi-megaphone::before { content: "\f484"; }
body.cpc-public .bi-moon::before { content: "\f497"; }
body.cpc-public .bi-newspaper::before { content: "\f4a3"; }
body.cpc-public .bi-question-circle::before { content: "\f505"; }
body.cpc-public .bi-sun::before { content: "\f5a2"; }
body.cpc-public .bi-trophy::before { content: "\f5e7"; }
body.cpc-public .bi-trophy-fill::before { content: "\f5e6"; }
body.cpc-public .bi-whatsapp::before { content: "\f618"; }
/* ==================================================================
   The classes the shortcodes emit

   FAQ, events, support and contact all output markup written against
   the template's stylesheet — cards, a grid, avatars, spacing
   utilities. These pages no longer load that stylesheet, so without
   the rules below the content renders as unstyled text.

   Only the classes those shortcodes actually use are here. Scoped to
   .cpc-public so nothing leaks into the member area, which still has
   the real thing.
   ================================================================== */

/* ---- grid ---------------------------------------------------------- */

body.cpc-public .row {
	display: flex;
	flex-wrap: wrap;
	margin-inline: -.5rem;
}

body.cpc-public [class*="col-"] {
	flex: 1 1 0;
	min-width: 0;
	padding-inline: .5rem;
}

body.cpc-public .col-12 { flex: 0 0 100%; max-width: 100%; }
body.cpc-public .col-6  { flex: 0 0 50%;  max-width: 50%; }

body.cpc-public .g-3, body.cpc-public .gy-3 { row-gap: 1rem; }
body.cpc-public .g-4 { row-gap: 1.5rem; }

@media (min-width: 576px) {
	body.cpc-public .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
}

@media (min-width: 768px) {
	body.cpc-public .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
	body.cpc-public .col-md-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
	body.cpc-public .col-md-6 { flex: 0 0 50%;      max-width: 50%; }
}

@media (min-width: 992px) {
	body.cpc-public .col-lg-3 { flex: 0 0 25%;      max-width: 25%; }
	body.cpc-public .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
}

/* ---- cards --------------------------------------------------------- */

body.cpc-public .card,
body.cpc-public .adminuiux-card {
	background: var(--c-bg, #fff);
	border: 1px solid var(--c-border, #e3e0f5);
	border-radius: var(--c-radius, 14px);
	margin-bottom: 1rem;
}

body.cpc-public .card-body { padding: 1.25rem; }

body.cpc-public .h-100 { height: 100%; }

/* ---- avatars and chips --------------------------------------------- */

body.cpc-public .avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 10px;
}

body.cpc-public .avatar-32 { width: 32px; height: 32px; font-size: .85rem; }
body.cpc-public .avatar-40 { width: 40px; height: 40px; }
body.cpc-public .avatar-60 { width: 60px; height: 60px; font-size: 1.3rem; }

body.cpc-public .rounded { border-radius: 10px; }
body.cpc-public .rounded-circle { border-radius: 50%; }

body.cpc-public .badge {
	display: inline-block;
	padding: .3rem .6rem;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 500;
}

/* ---- colour helpers ------------------------------------------------ */

body.cpc-public .bg-theme-1 {
	background: var(--c-brand, #3a1fd6);
	color: #fff;
}

body.cpc-public .bg-theme-1-subtle {
	background: var(--c-brand-tint, #eeebfd);
	color: var(--c-ink, #141034);
}

body.cpc-public .text-theme-1 { color: var(--c-brand, #3a1fd6); }
body.cpc-public .text-secondary { color: var(--c-ink-3, #6f6a8c); }
body.cpc-public .text-white { color: #fff; }
body.cpc-public .text-center { text-align: center; }

body.cpc-public .bg-success { background: var(--c-up, #0a7a43); color: #fff; }
body.cpc-public .bg-danger  { background: var(--c-down, #d93025); color: #fff; }
body.cpc-public .bg-white-opacity { background: rgba(255, 255, 255, .18); }

body.cpc-public .border { border: 1px solid var(--c-border, #e3e0f5); }
body.cpc-public .border-success { border-color: var(--c-up, #0a7a43); }
body.cpc-public .border-danger  { border-color: var(--c-down, #d93025); }

/* ---- buttons ------------------------------------------------------- */

body.cpc-public .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	padding: .55rem 1.1rem;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--c-font);
	font-size: .93rem;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
}

body.cpc-public .btn-sm { padding: .4rem .85rem; font-size: .86rem; }

body.cpc-public .btn-theme {
	background: var(--c-brand, #3a1fd6);
	color: #fff;
}

body.cpc-public .btn-outline-theme {
	border-color: var(--c-brand, #3a1fd6);
	color: var(--c-brand, #3a1fd6);
	background: transparent;
}

body.cpc-public .btn-outline-theme:hover {
	background: var(--c-brand, #3a1fd6);
	color: #fff;
}

body.cpc-public .btn-light { background: #fff; color: var(--c-brand, #3a1fd6); }

/* ---- forms --------------------------------------------------------- */

body.cpc-public .form-control,
body.cpc-public .form-select {
	width: 100%;
	padding: .6rem .8rem;
	border: 1px solid var(--c-border, #e3e0f5);
	border-radius: 10px;
	background: var(--c-bg, #fff);
	color: var(--c-ink, #141034);
	font: inherit;
	font-size: .95rem;
}

body.cpc-public .form-control:focus,
body.cpc-public .form-select:focus {
	border-color: var(--c-brand, #3a1fd6);
	outline: none;
	box-shadow: 0 0 0 3px rgba(var(--c-brand-rgb, 58, 31, 214), .15);
}

/* ---- notices ------------------------------------------------------- */

body.cpc-public .alert,
body.cpc-public .notice {
	padding: .9rem 1.1rem;
	border: 1px solid var(--c-border, #e3e0f5);
	border-radius: 10px;
	margin-bottom: 1rem;
}

body.cpc-public .alert-secondary { background: var(--c-bg-2, #f7f6fd); }

body.cpc-public .alert-warning,
body.cpc-public .notice-warning {
	background: rgba(154, 92, 0, .08);
	border-color: rgba(154, 92, 0, .25);
	color: var(--c-warn, #9a5c00);
}

/* ---- tables -------------------------------------------------------- */

body.cpc-public .table { width: 100%; border-collapse: collapse; }

body.cpc-public .table th,
body.cpc-public .table td {
	padding: .65rem .8rem;
	border-bottom: 1px solid var(--c-border, #e3e0f5);
	text-align: left;
}

body.cpc-public .table-responsive { overflow-x: auto; }
body.cpc-public .align-middle { vertical-align: middle; }

/* ---- layout and spacing utilities ---------------------------------- */

body.cpc-public .d-flex { display: flex; }
body.cpc-public .align-items-center { align-items: center; }
body.cpc-public .flex-shrink-0 { flex-shrink: 0; }
body.cpc-public .gap-2 { gap: .5rem; }
body.cpc-public .gap-3 { gap: 1rem; }
body.cpc-public .mx-auto { margin-inline: auto; }

body.cpc-public .mb-0 { margin-bottom: 0; }
body.cpc-public .mb-1 { margin-bottom: .25rem; }
body.cpc-public .mb-2 { margin-bottom: .5rem; }
body.cpc-public .mb-3 { margin-bottom: 1rem; }
body.cpc-public .mb-4 { margin-bottom: 1.5rem; }
body.cpc-public .me-1 { margin-right: .25rem; }
body.cpc-public .me-2 { margin-right: .5rem; }

body.cpc-public .p-3 { padding: 1rem; }
body.cpc-public .p-4 { padding: 1.5rem; }
body.cpc-public .py-5 { padding-block: 3rem; }

body.cpc-public .small,
body.cpc-public .description { font-size: .88rem; }
body.cpc-public .description { color: var(--c-ink-3, #6f6a8c); }

body.cpc-public .fw-medium { font-weight: 500; }
body.cpc-public .opacity-75 { opacity: .75; }

body.cpc-public .h4 { font-size: 1.3rem; font-family: var(--c-font); font-weight: 600; }
body.cpc-public .h5 { font-size: 1.1rem; font-family: var(--c-font); font-weight: 600; }

body.cpc-public .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Wrappers the shortcodes emit that had no rule of their own. Mostly
   containers — they need a predictable box, not decoration. */

@media (min-width: 768px) {
	body.cpc-public .col-md { flex: 1 1 0; max-width: 100%; }
}

body.cpc-public .cpc-faqs,
body.cpc-public .cpc-events,
body.cpc-public .cpc-form,
body.cpc-public .cpc-contact-details,
body.cpc-public .cpc-support-chat {
	min-width: 0;
}

body.cpc-public .cpc-steps-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.cpc-public .cpc-steps-list li {
	display: flex;
	gap: .6rem;
	padding: .35rem 0;
}

body.cpc-public .cpc-updated {
	font-size: .85rem;
	color: var(--c-ink-3, #6f6a8c);
}


/* Everything inside the hero is white, stated at a specificity the base
   heading rule cannot beat. body.cpc-public h1 is (0,1,2) and .cpc-hero
   h1 was (0,1,1), so the base rule won and the heading painted dark on
   the purple. */
body.cpc-public .cpc-hero,
body.cpc-public .cpc-hero h1,
body.cpc-public .cpc-hero h2,
body.cpc-public .cpc-hero h3,
body.cpc-public .cpc-hero p,
body.cpc-public .cpc-hero a,
body.cpc-public .cpc-hero span,
body.cpc-public .cpc-hero li {
	color: #fff;
}

body.cpc-public .cpc-hero a { text-decoration: underline; }

/* ==================================================================
   Page head, in place of the coloured band

   A policy page is there to be read. The title belongs above the text
   in the page's own type, not inside a decorative panel that pushes
   the first paragraph off the screen.
   ================================================================== */

body.cpc-public .cpc-head {
	padding-top: clamp(1.75rem, 4vw, 2.75rem);
	padding-bottom: .5rem;
}

body.cpc-public .cpc-head h1 {
	margin: 0;
	color: var(--c-ink, #141034);
	font-size: clamp(1.6rem, 3.6vw, 2.3rem);
}

body.cpc-public .cpc-head-lead {
	margin: .6rem 0 0;
	max-width: 62ch;
	color: var(--c-ink-2, #474168);
	font-size: 1.05rem;
}

body.cpc-public .cpc-head .cpc-crumbs {
	margin-bottom: .7rem;
	font-size: .86rem;
	color: var(--c-ink-3, #6f6a8c);
}

body.cpc-public .cpc-head .cpc-crumbs a {
	color: var(--c-ink-3, #6f6a8c);
	text-decoration: none;
}

body.cpc-public .cpc-head .cpc-crumbs a:hover {
	color: var(--c-brand, #3a1fd6);
	text-decoration: underline;
}

/* A single line under the head, so the title and the body read as two
   parts of one page rather than one long run of text. */
body.cpc-public .cpc-body {
	padding-top: 1.25rem;
	border-top: 1px solid var(--c-border, #e3e0f5);
	margin-top: 1rem;
}

/* ---- readable policy text -----------------------------------------
   These pages are mostly long prose. Line length and spacing are the
   whole of the layout.
   ------------------------------------------------------------------ */

body.cpc-public .cpc-body > h2,
body.cpc-public .cpc-body > h3,
body.cpc-public .cpc-body > p,
body.cpc-public .cpc-body > ul,
body.cpc-public .cpc-body > ol {
	max-width: 72ch;
}

body.cpc-public .cpc-body > h2 {
	margin-top: 2.2em;
	padding-top: .6em;
	border-top: 1px solid var(--c-border, #e3e0f5);
	font-size: 1.35rem;
}

body.cpc-public .cpc-body > h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

body.cpc-public .cpc-body > h3 { margin-top: 1.7em; font-size: 1.1rem; }

body.cpc-public .cpc-body > p,
body.cpc-public .cpc-body li { line-height: 1.75; }

body.cpc-public .cpc-body > ul,
body.cpc-public .cpc-body > ol { padding-left: 1.3rem; }

body.cpc-public .cpc-body li + li { margin-top: .4em; }

body.cpc-public .cpc-body strong { color: var(--c-ink, #141034); }

/* ==================================================================
   Header and footer, one colour scheme

   Every element in the bar draws from the same three inks and the one
   brand colour, so nothing in it is a shade that appears nowhere else.
   ================================================================== */

/* The bar itself: a tint, so it separates from the page without a
   heavy border */
body.cpc-public .cpc-top {
	background: var(--c-bg, #fff);
	border-bottom: 1px solid var(--c-border, #e3e0f5);
}

/* Brand: full-strength ink, the strongest thing in the bar */
body.cpc-public .cpc-brand { color: var(--c-ink, #141034); }

/* Links: one step lighter, so the brand leads */
body.cpc-public .cpc-top-nav a { color: var(--c-ink-2, #474168); }

body.cpc-public .cpc-top-nav a:hover {
	background: var(--c-bg-2, #f7f6fd);
	color: var(--c-ink, #141034);
}

/* Current page: brand colour on its own tint — the only coloured
   thing in the bar apart from the button */
body.cpc-public .cpc-top-nav a[aria-current="page"] {
	background: var(--c-brand-tint, #eeebfd);
	color: var(--c-brand, #3a1fd6);
	font-weight: 500;
}

/* The two icon buttons match the nav links, not the brand */
body.cpc-public .cpc-mode,
body.cpc-public .cpc-burger {
	background: transparent;
	border-color: var(--c-border, #e3e0f5);
	color: var(--c-ink-2, #474168);
}

body.cpc-public .cpc-mode:hover,
body.cpc-public .cpc-burger:hover {
	background: var(--c-bg-2, #f7f6fd);
	border-color: var(--c-brand, #3a1fd6);
	color: var(--c-brand, #3a1fd6);
}

/* The one call to action carries the gradient, and nothing else does */
body.cpc-public .cpc-btn {
	background: linear-gradient(135deg, #3a1fd6 0%, #7d2ae8 100%);
	color: #fff;
	border: 0;
}

body.cpc-public .cpc-menu {
	background: var(--c-bg, #fff);
	border-top: 1px solid var(--c-border, #e3e0f5);
}

body.cpc-public .cpc-menu a { color: var(--c-ink-2, #474168); }
body.cpc-public .cpc-menu a:hover { color: var(--c-brand, #3a1fd6); }

/* Footer: the tint surface, the lightest ink, links one step up so
   they are still findable */
body.cpc-public .cpc-foot {
	background: var(--c-bg-2, #f7f6fd);
	border-top: 1px solid var(--c-border, #e3e0f5);
	color: var(--c-ink-3, #6f6a8c);
}

body.cpc-public .cpc-foot-links a { color: var(--c-ink-2, #474168); }

body.cpc-public .cpc-foot-links a:hover {
	color: var(--c-brand, #3a1fd6);
	text-decoration: underline;
}

body.cpc-public .cpc-foot-note { color: var(--c-ink-3, #6f6a8c); }

/* Dark: the same three steps, against the dark surfaces */
html[data-cp-mode="dark"] body.cpc-public .cpc-top,
html[data-bs-theme="dark"] body.cpc-public .cpc-top {
	background: var(--c-bg-2, #140c33);
}

html[data-cp-mode="dark"] body.cpc-public .cpc-foot,
html[data-bs-theme="dark"] body.cpc-public .cpc-foot {
	background: var(--c-bg-2, #140c33);
}

/* ==================================================================
   Page head and the two-column reading layout

   A policy page is a long document. What makes it usable is not a
   banner but knowing where you are and being able to jump: an eyebrow
   naming the section, a title, the date it last changed, and a
   contents list that stays beside the text.
   ================================================================== */

body.cpc-public .cpc-head {
	position: relative;
	padding-top: clamp(2rem, 5vw, 3.25rem);
	padding-bottom: clamp(1.5rem, 3vw, 2rem);
	background: var(--c-bg-2, #f7f6fd);
	border-bottom: 1px solid var(--c-border, #e3e0f5);
}

/* The brand, as a line rather than a panel — present without covering */
body.cpc-public .cpc-head::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, #3a1fd6 0%, #7d2ae8 100%);
}

body.cpc-public .cpc-eyebrow {
	display: inline-block;
	margin: 0 0 .6rem;
	padding: .22rem .7rem;
	border-radius: 999px;
	background: var(--c-brand-tint, #eeebfd);
	color: var(--c-brand, #3a1fd6);
	font-family: var(--c-font);
	font-size: .74rem;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
}

body.cpc-public .cpc-head h1 {
	margin: 0;
	color: var(--c-ink, #141034);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	letter-spacing: -.015em;
}

body.cpc-public .cpc-head-lead {
	margin: .75rem 0 0;
	max-width: 62ch;
	color: var(--c-ink-2, #474168);
	font-size: clamp(1rem, 1.6vw, 1.12rem);
}

body.cpc-public .cpc-head-meta {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin: 1rem 0 0;
	color: var(--c-ink-3, #6f6a8c);
	font-size: .85rem;
}

/* ---- the two columns ------------------------------------------------ */

body.cpc-public .cpc-main { padding-block: clamp(2rem, 5vw, 3.25rem); }

@media (min-width: 992px) {
	body.cpc-public .cpc-main-split {
		display: grid;
		grid-template-columns: 240px minmax(0, 1fr);
		gap: 3rem;
		align-items: start;
	}
}

body.cpc-public .cpc-toc {
	margin-bottom: 2rem;
	padding: 1.1rem 1.2rem;
	border: 1px solid var(--c-border, #e3e0f5);
	border-radius: var(--c-radius, 14px);
	background: var(--c-bg, #fff);
}

@media (min-width: 992px) {
	body.cpc-public .cpc-toc {
		position: sticky;
		top: 1.5rem;
		margin-bottom: 0;
		max-height: calc(100vh - 3rem);
		overflow-y: auto;
	}
}

body.cpc-public .cpc-toc-title {
	margin: 0 0 .7rem;
	font-family: var(--c-font);
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--c-ink-3, #6f6a8c);
}

body.cpc-public .cpc-toc ol {
	counter-reset: toc;
	list-style: none;
	margin: 0;
	padding: 0;
}

body.cpc-public .cpc-toc li {
	counter-increment: toc;
	margin: 0;
}

body.cpc-public .cpc-toc a {
	display: block;
	padding: .38rem 0 .38rem 1.6rem;
	position: relative;
	color: var(--c-ink-2, #474168);
	font-size: .9rem;
	line-height: 1.45;
	text-decoration: none;
	border-left: 2px solid transparent;
	overflow-wrap: anywhere;
}

body.cpc-public .cpc-toc a::before {
	content: counter(toc);
	position: absolute;
	left: .45rem;
	color: var(--c-ink-3, #6f6a8c);
	font-size: .78rem;
	font-variant-numeric: tabular-nums;
}

body.cpc-public .cpc-toc a:hover {
	color: var(--c-brand, #3a1fd6);
	border-left-color: var(--c-brand, #3a1fd6);
}

/* ---- the document itself -------------------------------------------- */

body.cpc-public .cpc-body { max-width: 72ch; }

body.cpc-public .cpc-main-split .cpc-body { max-width: none; }

body.cpc-public .cpc-body h2 {
	margin-top: 2.4em;
	padding-top: .7em;
	border-top: 1px solid var(--c-border, #e3e0f5);
	font-size: clamp(1.2rem, 2vw, 1.4rem);
	scroll-margin-top: 1.5rem;
}

body.cpc-public .cpc-body h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

body.cpc-public .cpc-body h3 {
	margin-top: 1.8em;
	font-size: 1.08rem;
}

body.cpc-public .cpc-body p,
body.cpc-public .cpc-body li {
	color: var(--c-ink-2, #474168);
	line-height: 1.75;
}

body.cpc-public .cpc-body ul,
body.cpc-public .cpc-body ol { padding-left: 1.35rem; }

body.cpc-public .cpc-body li + li { margin-top: .45em; }

body.cpc-public .cpc-body strong { color: var(--c-ink, #141034); font-weight: 600; }

/* A quoted or set-apart passage */
body.cpc-public .cpc-body blockquote {
	margin: 1.6rem 0;
	padding: .9rem 1.2rem;
	border-left: 3px solid var(--c-brand, #3a1fd6);
	border-radius: 0 10px 10px 0;
	background: var(--c-bg-2, #f7f6fd);
	color: var(--c-ink-2, #474168);
}

body.cpc-public .cpc-body blockquote p:last-child { margin-bottom: 0; }

/* ==================================================================
   Forms on the company pages

   The inputs carry .form-control, but the labels carry nothing — so
   on a page that does not load the template's stylesheet they had no
   weight, no spacing and no relationship to the field below them.
   That is what made the contact form look unfinished.
   ================================================================== */

body.cpc-public form label {
	display: block;
	margin-bottom: .35rem;
	color: var(--c-ink, #141034);
	font-family: var(--c-font);
	font-size: .9rem;
	font-weight: 500;
}

/* A checkbox or radio label sits beside its control, not above it */
body.cpc-public form label:has( > input[type="checkbox"] ),
body.cpc-public form label:has( > input[type="radio"] ) {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	font-weight: 400;
	color: var(--c-ink-2, #474168);
}

body.cpc-public form p { margin-bottom: 1.1rem; }

body.cpc-public form textarea.form-control { min-height: 120px; resize: vertical; }

body.cpc-public input[type="email"].form-control,
body.cpc-public input[type="tel"].form-control,
body.cpc-public input[type="url"].form-control,
body.cpc-public input[type="number"].form-control {
	width: 100%;
	padding: .6rem .8rem;
	border: 1px solid var(--c-border, #e3e0f5);
	border-radius: 10px;
	background: var(--c-bg, #fff);
	color: var(--c-ink, #141034);
	font: inherit;
	font-size: .95rem;
}

body.cpc-public .form-control::placeholder { color: var(--c-ink-3, #6f6a8c); }

/* Required marker, so a reader can see what is optional before they
   hit submit and find out */
body.cpc-public form :required + label::after,
body.cpc-public form label:has( + :required )::after {
	content: " *";
	color: var(--c-down, #d93025);
}

/* The honeypot stays hidden however the page is styled */
body.cpc-public .cpc-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* The form sits in a readable column rather than running the page width */
body.cpc-public .cpc-form { max-width: 620px; }

body.cpc-public .cpc-form .btn,
body.cpc-public form [type="submit"] {
	margin-top: .35rem;
	background: linear-gradient(135deg, #3a1fd6 0%, #7d2ae8 100%);
	color: #fff;
	border: 0;
	padding: .65rem 1.4rem;
	border-radius: 999px;
	font-family: var(--c-font);
	font-size: .95rem;
	font-weight: 500;
	cursor: pointer;
}

/* Support page: the channel cards read as one set */
body.cpc-public .cpc-contact-details,
body.cpc-public .cpc-support-chat { margin-top: 1.5rem; }

body.cpc-public .cpc-socials {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: 1rem;
}

body.cpc-public .cpc-socials a {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .5rem .9rem;
	border: 1px solid var(--c-border, #e3e0f5);
	border-radius: 999px;
	background: var(--c-bg, #fff);
	color: var(--c-ink-2, #474168);
	font-size: .9rem;
	text-decoration: none;
}

body.cpc-public .cpc-socials a:hover {
	border-color: var(--c-brand, #3a1fd6);
	color: var(--c-brand, #3a1fd6);
}

/* ==================================================================
   News and events, on the page's own palette

   The cards were written for the member area and read
   --adminuiux-card-bg and --adminuiux-border. On these pages those
   resolve through a light-only fallback, so in dark mode a card kept
   a white surface and a pale border while everything around it went
   dark.

   Pointing them at the page's own variables fixes both modes at once,
   because those have a dark set.
   ================================================================== */

body.cpc-public .cpc-card {
	background: var(--c-bg, #fff);
	border-color: var(--c-border, #e3e0f5);
}

body.cpc-public .cpc-card-title { color: var(--c-ink, #141034); }

body.cpc-public .cpc-card-text,
body.cpc-public .cpc-card-where,
body.cpc-public .cpc-card-when,
body.cpc-public .cpc-card-reqs { color: var(--c-ink-3, #6f6a8c); }

body.cpc-public .cpc-card-foot { border-top-color: var(--c-border, #e3e0f5); }

body.cpc-public .cpc-card-cta,
body.cpc-public .cpc-card-amount { color: var(--c-brand, #3a1fd6); }

body.cpc-public .cpc-card-reqs i { color: var(--c-up, #0a7a43); }

body.cpc-public .cpc-card:hover {
	box-shadow: 0 10px 30px rgba(var(--c-brand-rgb, 58, 31, 214), .10);
}

/* The kind badges: the same four roles used everywhere else on the
   site, so a colour never means two things */
body.cpc-public .cpc-tag-theme-1 {
	background: var(--c-brand-tint, #eeebfd);
	color: var(--c-brand, #3a1fd6);
}

body.cpc-public .cpc-tag-info {
	background: rgba(0, 80, 240, .10);
	color: #0050f0;
}

body.cpc-public .cpc-tag-warning {
	background: rgba(154, 92, 0, .12);
	color: var(--c-warn, #9a5c00);
}

body.cpc-public .cpc-tag-success {
	background: rgba(10, 122, 67, .12);
	color: var(--c-up, #0a7a43);
}

html[data-cp-mode="dark"] body.cpc-public .cpc-tag-info,
html[data-bs-theme="dark"] body.cpc-public .cpc-tag-info {
	background: rgba(125, 162, 255, .16);
	color: #7da2ff;
}

/* The winner panel keeps its gold, adjusted per mode */
body.cpc-public .cpc-winner {
	background: rgba(154, 92, 0, .08);
	border-color: rgba(154, 92, 0, .20);
}

body.cpc-public .cpc-winner-medal { background: var(--c-warn, #9a5c00); color: #fff; }
body.cpc-public .cpc-winner-name { color: var(--c-ink, #141034); }
body.cpc-public .cpc-winner-prize { color: var(--c-warn, #9a5c00); }

html[data-cp-mode="dark"] body.cpc-public .cpc-winner,
html[data-bs-theme="dark"] body.cpc-public .cpc-winner {
	background: rgba(255, 193, 77, .12);
	border-color: rgba(255, 193, 77, .22);
}

html[data-cp-mode="dark"] body.cpc-public .cpc-winner-medal,
html[data-bs-theme="dark"] body.cpc-public .cpc-winner-medal {
	background: #ffc14d;
	color: #2a1c00;
}

/* ==================================================================
   The featured event card

   It is a coloured panel with white text. The card rules above set
   titles and body copy to the page ink, which on that purple left
   the heading dark and the description almost invisible — the card
   in the screenshot.

   Stated here, after those rules and at a specificity they cannot
   beat, so everything inside the panel is white.
   ================================================================== */

body.cpc-public .cpc-event-hero,
body.cpc-public .cpc-event-hero h1,
body.cpc-public .cpc-event-hero h2,
body.cpc-public .cpc-event-hero h3,
body.cpc-public .cpc-event-hero h4,
body.cpc-public .cpc-event-hero h5,
body.cpc-public .cpc-event-hero h6,
body.cpc-public .cpc-event-hero p,
body.cpc-public .cpc-event-hero a,
body.cpc-public .cpc-event-hero span,
body.cpc-public .cpc-event-hero li,
body.cpc-public .cpc-event-hero .cpc-card-title,
body.cpc-public .cpc-event-hero .cpc-card-text,
body.cpc-public .cpc-event-hero .cpc-card-when,
body.cpc-public .cpc-event-hero .cpc-card-where {
	color: #fff;
}

/* The panel's own surface, written out so it cannot resolve to white */
body.cpc-public .cpc-event-hero {
	background: linear-gradient(135deg, #3a1fd6 0%, #7d2ae8 100%);
	border: 0;
}

/* Its badge is a light chip on the colour, not the page's tint */
body.cpc-public .cpc-event-hero .cpc-tag,
body.cpc-public .cpc-event-hero .badge {
	background: rgba(255, 255, 255, .18);
	color: #fff;
}

body.cpc-public .cpc-event-hero .btn-light {
	background: #fff;
	color: #3a1fd6;
}

/* The opacity utility is what dimmed the description to unreadable
   against the purple; lift it to a level that still reads */
body.cpc-public .cpc-event-hero .opacity-75 { opacity: .9; }