/* =============================================================
   ResultsAiX Theme
   One design system, two layouts (portal / topnav), 10 schemes.
   All chrome colors run through the --raix-* variables below.
   ============================================================= */

/* ---------- Base variables: Results Amber (house default) ---------- */
:root,
body.raix-scheme-results-amber {
	/* White, and the brand gold. The cream this once used made the gold read
	   as brown and the page as tinted; the brand is white with #f59e0b. */
	--raix-bg: #ffffff;
	--raix-card: #ffffff;
	--raix-text: #0a0a0a;
	--raix-muted: #6b6453;
	--raix-faint: #9a9178;
	--raix-border: #eee3c8;
	--raix-input: #e5d9ba;
	--raix-primary: #f59e0b;
	--raix-primary-hover: #d97706;
	--raix-primary-strong: #b45309;
	--raix-primary-light: rgba(245, 158, 11, 0.12);
	/* White on gold, always. Dark text on this is unreadable and off brand. */
	--raix-primary-text: #ffffff;

	--raix-sidebar-bg: #ffffff;
	--raix-footer-dark: #0a0a0f;
	--raix-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.04);
	--raix-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 12px 40px rgba(0, 0, 0, 0.05);
	--raix-radius: 14px;
	--raix-radius-sm: 10px;
}

/* ---------- Scheme overrides (canonical suite palettes) ---------- */
body.raix-scheme-native {
	--raix-bg: #f0f0f1;
	--raix-card: #ffffff;
	--raix-text: #1d2327;
	--raix-muted: #50575e;
	--raix-faint: #8c8f94;
	--raix-border: #dcdcde;
	--raix-input: #c3c4c7;
	--raix-primary: #2271b1;
	--raix-primary-hover: #135e96;
	--raix-primary-strong: #0a4b78;
	--raix-primary-light: rgba(34, 113, 177, 0.10);
	--raix-primary-text: #ffffff;
	--raix-sidebar-bg: #ffffff;
}

body.raix-scheme-clean-white {
	--raix-bg: #ffffff;
	--raix-card: #f8f9fa;
	--raix-text: #1d2327;
	--raix-muted: #4b5563;
	--raix-faint: #8a939f;
	--raix-border: #dee2e6;
	--raix-input: #ced4da;
	--raix-primary: #0d6efd;
	--raix-primary-hover: #0b5ed7;
	--raix-primary-strong: #0a58ca;
	--raix-primary-light: rgba(13, 110, 253, 0.10);
	--raix-primary-text: #ffffff;
	--raix-sidebar-bg: #f8f9fa;
}

body.raix-scheme-ivory-cream {
	--raix-bg: #fffef5;
	--raix-card: #fefcf0;
	--raix-text: #3d3929;
	--raix-muted: #6b6453;
	--raix-faint: #9a9178;
	--raix-border: #e8e0c8;
	--raix-input: #ddd3b6;
	--raix-primary: #f59e0b;
	--raix-primary-hover: #d97706;
	--raix-primary-strong: #b45309;
	--raix-primary-light: rgba(245, 158, 11, 0.12);
	--raix-primary-text: #ffffff;
	--raix-sidebar-bg: #fefcf0;
}

body.raix-scheme-snow-light {
	--raix-bg: #f8fafc;
	--raix-card: #ffffff;
	--raix-text: #334155;
	--raix-muted: #64748b;
	--raix-faint: #94a3b8;
	--raix-border: #e2e8f0;
	--raix-input: #cbd5e1;
	--raix-primary: #6366f1;
	--raix-primary-hover: #4f46e5;
	--raix-primary-strong: #4338ca;
	--raix-primary-light: rgba(99, 102, 241, 0.10);
	--raix-primary-text: #ffffff;
	--raix-sidebar-bg: #ffffff;
}

body.raix-scheme-developer-dark {
	--raix-bg: #0d1117;
	--raix-card: #161b22;
	--raix-text: #c9d1d9;
	--raix-muted: #8b949e;
	--raix-faint: #6e7681;
	--raix-border: #30363d;
	--raix-input: #30363d;
	--raix-primary: #58a6ff;
	--raix-primary-hover: #79b8ff;
	--raix-primary-strong: #79b8ff;
	--raix-primary-light: rgba(88, 166, 255, 0.15);
	--raix-primary-text: #0d1117;
	--raix-sidebar-bg: #161b22;
	--raix-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
	--raix-shadow-md: 0 8px 28px rgba(0, 0, 0, 0.5);
}

body.raix-scheme-midnight-blue {
	--raix-bg: #0f172a;
	--raix-card: #1e293b;
	--raix-text: #e2e8f0;
	--raix-muted: #94a3b8;
	--raix-faint: #64748b;
	--raix-border: #334155;
	--raix-input: #475569;
	--raix-primary: #3b82f6;
	--raix-primary-hover: #60a5fa;
	--raix-primary-strong: #60a5fa;
	--raix-primary-light: rgba(59, 130, 246, 0.15);
	--raix-primary-text: #ffffff;
	--raix-sidebar-bg: #1e293b;
	--raix-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
	--raix-shadow-md: 0 8px 28px rgba(0, 0, 0, 0.5);
}

body.raix-scheme-ocean-blue {
	--raix-bg: #f0f9ff;
	--raix-card: #ffffff;
	--raix-text: #0c4a6e;
	--raix-muted: #3d6a85;
	--raix-faint: #7aa0b5;
	--raix-border: #bae6fd;
	--raix-input: #93cbf0;
	--raix-primary: #0284c7;
	--raix-primary-hover: #0369a1;
	--raix-primary-strong: #075985;
	--raix-primary-light: rgba(2, 132, 199, 0.10);
	--raix-primary-text: #ffffff;
	--raix-sidebar-bg: #ffffff;
}

body.raix-scheme-sunset-warm {
	--raix-bg: #fff7ed;
	--raix-card: #ffffff;
	--raix-text: #7c2d12;
	--raix-muted: #9a4a28;
	--raix-faint: #c08457;
	--raix-border: #fed7aa;
	--raix-input: #fdba74;
	--raix-primary: #ea580c;
	--raix-primary-hover: #c2410c;
	--raix-primary-strong: #9a3412;
	--raix-primary-light: rgba(234, 88, 12, 0.10);
	--raix-primary-text: #ffffff;
	--raix-sidebar-bg: #ffffff;
}

body.raix-scheme-rose-pink {
	--raix-bg: #fff1f2;
	--raix-card: #ffffff;
	--raix-text: #881337;
	--raix-muted: #a83a5b;
	--raix-faint: #cc8098;
	--raix-border: #fecdd3;
	--raix-input: #fda4af;
	--raix-primary: #e11d48;
	--raix-primary-hover: #be123c;
	--raix-primary-strong: #9f1239;
	--raix-primary-light: rgba(225, 29, 72, 0.10);
	--raix-primary-text: #ffffff;
	--raix-sidebar-bg: #ffffff;
}

/* ---------- Reset and base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--raix-text);
	background: var(--raix-bg);
	overflow-x: clip; /* clip, not hidden, so position sticky keeps working */
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--raix-primary-strong);
	text-decoration: none;
}

a:hover {
	color: var(--raix-primary-hover);
}

h1, h2, h3, h4 {
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin: 0 0 0.5em;
	max-width: none !important;
}

.screen-reader-text {
	position: absolute !important;
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--raix-primary);
	color: var(--raix-primary-text);
	padding: 10px 16px;
	z-index: 100;
}

.skip-link:focus {
	/* Undo .screen-reader-text so a keyboard user actually sees it. */
	left: 8px;
	top: 8px;
	clip-path: none;
	width: auto;
	height: auto;
	overflow: visible;
	background: var(--raix-footer-dark);
	color: #ffffff;
	border: 2px solid var(--raix-primary);
	border-radius: 8px;
	font-weight: 700;
	text-decoration: none;
	z-index: 10000;
}

/* ---------- Keyboard focus, always visible (WCAG 2.4.7) ---------- */
:focus-visible {
	outline: 3px solid var(--raix-text);
	outline-offset: 2px;
}

.raix-btn:focus-visible,
.raix-btn-primary:focus-visible,
.raix-checkout-btn:focus-visible {
	outline: 3px solid var(--raix-text);
	outline-offset: 3px;
}

/* ---------- Motion off when the visitor asks (WCAG 2.3.3) ---------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Buttons ---------- */
.raix-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: 999px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	border: 1px solid transparent;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.raix-btn-primary {
	background: linear-gradient(135deg, var(--raix-primary), var(--raix-primary-hover));
	color: var(--raix-primary-text);
	box-shadow: 0 6px 18px var(--raix-primary-light);
}

.raix-btn-primary:hover {
	transform: translateY(-1px);
	color: var(--raix-primary-text);
	box-shadow: 0 10px 26px var(--raix-primary-light);
}

.raix-btn-ghost {
	background: var(--raix-card);
	color: var(--raix-text);
	border-color: var(--raix-border);
}

.raix-btn-ghost:hover {
	border-color: var(--raix-primary);
	color: var(--raix-primary-strong);
}

/* ---------- Brand ---------- */
.raix-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--raix-text);
	font-weight: 800;
	font-size: 20px;
	letter-spacing: -0.02em;
	flex: none; /* The site name never wraps onto two lines to make room for the menu; the menu scrolls instead. */
	white-space: nowrap;
}

.raix-brand:hover {
	color: var(--raix-text);
}

.raix-brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--raix-mark-h, 38px);
	height: var(--raix-mark-h, 38px);
	border-radius: 11px;
	background: linear-gradient(135deg, var(--raix-primary), var(--raix-primary-hover));
	color: var(--raix-primary-text);
	font-size: 20px;
	font-weight: 800;
}

.raix-brand-mark {
	overflow: hidden;
}

.raix-brand-mark.is-symbol {
	font-size: 21px;
	line-height: 1;
}

.raix-brand-mark img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.raix-brand-ai {
	/* Rebrand law: the Ai in the wordmark is FIXED gold, never the scheme accent. */
	color: #f59e0b;
	font-style: normal;
}

.raix-brand-logo {
	/* Your Site, Your header sets the height; 44px is the theme's own. */
	max-height: var(--raix-logo-h, 44px);
	width: auto;
}

/* ---------- Portal layout ---------- */
.raix-app {
	display: flex;
	min-height: 100vh;
}

.raix-sidebar {
	width: 264px;
	flex: 0 0 264px;
	background: var(--raix-sidebar-bg);
	border-right: 1px solid var(--raix-border);
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
	z-index: 40;
}

.raix-sidebar-brand {
	padding: 22px 20px;
	border-bottom: 1px solid var(--raix-border);
}

.raix-sidebar-nav {
	flex: 1;
	overflow-y: auto;
	padding: 14px 12px;
}

.raix-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.raix-menu-side li a {
	display: block;
	padding: 11px 14px;
	border-radius: var(--raix-radius-sm);
	color: var(--raix-text);
	font-weight: 600;
	font-size: 15px;
}

.raix-menu-side li a:hover {
	background: var(--raix-primary-light);
	color: var(--raix-primary-strong);
}

.raix-menu-side li.current-menu-item > a,
.raix-menu-side li.current_page_item > a {
	background: linear-gradient(135deg, var(--raix-primary), var(--raix-primary-hover));
	color: var(--raix-primary-text);
}

.raix-menu-side .sub-menu {
	list-style: none;
	margin: 2px 0 6px;
	padding-left: 16px;
}

.raix-menu-side .sub-menu a {
	font-weight: 500;
	font-size: 14px;
	color: var(--raix-muted);
}

.raix-sidebar-foot {
	padding: 16px 20px;
	border-top: 1px solid var(--raix-border);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.raix-support-side {
	font-weight: 700;
	font-size: 14px;
	color: var(--raix-primary-strong);
}

.raix-sidebar-copy {
	font-size: 12px;
	color: var(--raix-faint);
}

.raix-shell {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.raix-topbar {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 14px 28px;
	background: color-mix(in srgb, var(--raix-bg) 82%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--raix-border);
}

.raix-topbar-title {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.raix-topbar-tools {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 14px;
}

.raix-topbar-search input {
	width: 210px;
	padding: 9px 14px;
	border-radius: 999px;
	border: 1px solid var(--raix-input);
	background: var(--raix-card);
	color: var(--raix-text);
	font-family: inherit;
	font-size: 14px;
}

.raix-topbar-search input:focus {
	outline: 2px solid var(--raix-primary);
	outline-offset: 1px;
	border-color: transparent;
}

.raix-user-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px 4px 4px;
	border: 1px solid var(--raix-border);
	border-radius: 999px;
	background: var(--raix-card);
	font-size: 14px;
	font-weight: 600;
}

.raix-user-chip img {
	border-radius: 50%;
	display: block;
}

.raix-content {
	flex: 1;
	padding: 32px 28px 48px;
}

.raix-page {
	max-width: 1160px;
	margin: 0 auto;
}

/* ---------- Optional content sidebar ----------
   Off by default (see inc/sidebar-override.php). When it renders, .raix-page
   gains .raix-with-sidebar and the existing page markup is wrapped in
   .raix-main-col, so a page with the sidebar off looks byte-identical to
   before this feature existed. Named .raix-content-sidebar, not
   .raix-sidebar, because that class is already the portal layout's
   off-canvas member-nav drawer and collides badly if reused. */
.raix-with-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	align-items: start;
	gap: 44px;
}

.raix-with-sidebar .raix-main-col {
	min-width: 0;
}

.raix-content-sidebar {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.raix-content-sidebar .raix-widget {
	background: var(--raix-card);
	border: 1px solid var(--raix-border);
	border-radius: var(--raix-radius);
	box-shadow: var(--raix-shadow-sm);
	padding: 22px 24px;
}

.raix-content-sidebar .raix-widget-title {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 700;
	color: var(--raix-text);
}

.raix-content-sidebar .raix-widget p:last-child {
	margin-bottom: 0;
}

.raix-content-sidebar .raix-widget ul,
.raix-content-sidebar .raix-widget ol {
	margin: 0;
	padding-left: 20px;
}

.raix-content-sidebar .raix-widget li {
	margin-bottom: 8px;
	color: var(--raix-muted);
}

.raix-content-sidebar .raix-widget li:last-child {
	margin-bottom: 0;
}

.raix-content-sidebar .raix-widget a {
	color: var(--raix-text);
}

.raix-content-sidebar .raix-widget a:hover {
	color: var(--raix-primary-hover);
}

.raix-content-sidebar .raix-widget select,
.raix-content-sidebar .raix-widget input[type="search"],
.raix-content-sidebar .raix-widget input[type="text"] {
	width: 100%;
	box-sizing: border-box;
}

@media (max-width: 1024px) {
	.raix-with-sidebar {
		grid-template-columns: 1fr;
	}

	.raix-content-sidebar {
		order: 2;
	}
}

/* The scrollbar's space is always reserved, so the header and everything
   under it sit in exactly the same place on a short page and a long one.
   Without this the whole page shifted 17px between the blog page and a
   post, which read as two different headers. */
html {
	overflow-y: scroll;
	scrollbar-gutter: stable;
}

/* ---------- Topnav layout ---------- */
.raix-wrap {
	max-width: 1160px;
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}

.raix-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: color-mix(in srgb, var(--raix-bg) 85%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--raix-border);
}

.raix-header-inner {
	display: flex;
	align-items: center;
	gap: 24px;
	padding-top: 14px;
	padding-bottom: 14px;
}

/* A long menu never scrolls, wraps or gets cut: the items that do not fit
   move into a More dropdown at the end of the row (theme.js), and come back
   out as the window widens. The Search and Accessibility buttons stay put. */
.raix-header-nav {
	margin-left: auto;
	min-width: 0;
}

.raix-menu-top {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	align-items: center;
}

.raix-menu-top > li > a {
	white-space: nowrap;
}

.raix-menu-top > li.raix-more > a::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-3px) rotate(45deg);
}

.raix-menu-top > li.raix-more > .sub-menu {
	left: auto;
	right: 0;
}

/* An item moved into the overflow brings its own children with it, so the
   dropdown can be two levels deep. They are indented under their parent with a
   rule down the side rather than flown out sideways: on a list that already
   caps its height and scrolls, a sideways flyout has nowhere safe to go. */
.raix-menu-top > li.raix-more .sub-menu .sub-menu {
	position: static;
	display: block;
	box-shadow: none;
	border: 0;
	border-left: 2px solid var(--raix-border);
	border-radius: 0;
	background: none;
	padding: 2px 0 4px;
	margin: 2px 0 8px 16px;
	min-width: 0;
	max-height: none;
	overflow: visible;
	-webkit-mask-image: none;
	mask-image: none;
}

/* The parent of a moved group is the group's name, so it reads as a heading
   rather than as one more link at the same level as its own children. */
.raix-menu-top > li.raix-more > .sub-menu > li.menu-item-has-children > a {
	font-weight: 800;
}

.raix-menu-top > li.raix-more .sub-menu .sub-menu a {
	font-size: 13.5px;
}

/* Three dots instead of the word, when the menu already has a More of its own. */
.raix-menu-top > li.raix-more-dots > a {
	letter-spacing: .12em;
}

.raix-menu-top li {
	position: relative;
}

.raix-menu-top li a {
	display: block;
	padding: 9px 15px;
	border-radius: 999px;
	color: var(--raix-text);
	font-weight: 600;
	font-size: var(--raix-menu-size, 15px);
}

.raix-menu-top li a:hover {
	background: var(--raix-primary-light);
	color: var(--raix-primary-strong);
}

.raix-menu-top li.current-menu-item > a,
.raix-menu-top li.current_page_item > a {
	background: linear-gradient(135deg, var(--raix-primary), var(--raix-primary-hover));
	color: var(--raix-primary-text);
}

.raix-menu-top .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--raix-card);
	border: 1px solid var(--raix-border);
	border-radius: var(--raix-radius-sm);
	box-shadow: var(--raix-shadow-md);
	padding: 8px;
	list-style: none;
	margin: 6px 0 0;
	z-index: 50;
}

/* The 6px gap above a dropdown is bridged, so the pointer can travel from the
   menu item down into the list without the hover breaking and the list closing.
   The bridge lives on the ITEM, not on the list: a capped list scrolls, and
   anything sitting outside a scrolling box is clipped away. */
.raix-menu-top > li.menu-item-has-children::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 10px;
}

.raix-menu-top li:hover > .sub-menu,
.raix-menu-top li:focus-within > .sub-menu,
.raix-menu-top li.raix-more.is-open > .sub-menu {
	display: block;
}

/* A long dropdown (a Courses list, a big More) never runs off the bottom of the
   screen. The header is sticky, so the page scrolling behind it never brings the
   last item into view: instead the list is capped to the room under it and
   scrolls inside itself, and a very long one is laid out in columns first so it
   stays short. theme.js measures the room and sets the two properties on open;
   the values here are the no-JS fallbacks. */
.raix-menu-top .sub-menu {
	max-height: var(--raix-dd-max, calc(100vh - 120px));
	overflow-y: auto;
	overscroll-behavior: contain;
	/* the bar is in the accent colour on purpose: a capped list has to LOOK
	   scrollable, or it reads as one that has been cut off */
	scrollbar-width: thin;
	scrollbar-color: var(--raix-primary) transparent;
}

.raix-menu-top .sub-menu::-webkit-scrollbar {
	width: 12px;
}

.raix-menu-top .sub-menu::-webkit-scrollbar-thumb {
	background: var(--raix-primary);
	border: 4px solid var(--raix-card);
	border-radius: 999px;
}

.raix-menu-top .sub-menu::-webkit-scrollbar-track {
	background: transparent;
}

.raix-menu-top li:hover > .sub-menu.raix-dd-cols,
.raix-menu-top li:focus-within > .sub-menu.raix-dd-cols,
.raix-menu-top li.raix-more.is-open > .sub-menu.raix-dd-cols {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(var(--raix-dd-rows, 12), min-content);
	grid-auto-columns: minmax(190px, max-content);
	gap: 0 4px;
	align-content: start;
}

.raix-menu-top .sub-menu.raix-dd-cols > li {
	break-inside: avoid;
}

/* A capped list has to look like there is more below it, or it reads as one
   that was cut off. The last few pixels fade out until it is scrolled to the
   end. A scrollbar alone is not enough: most browsers only draw one while the
   pointer is actually moving. */
.raix-menu-top .sub-menu.raix-dd-scroll {
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
}

.raix-menu-top .sub-menu.raix-dd-scroll.raix-dd-end {
	-webkit-mask-image: none;
	mask-image: none;
}

/* Your Site, Your header, "Icon only": the Search and Accessibility buttons
   drop their word and keep their symbol, and the width of both words goes back
   to the menu. Only in the header row: the floating Accessibility button in a
   corner keeps whatever it was set to on its own screen. */
body.raix-hdr-icons .raix-search-toggle-text,
body.raix-hdr-icons .raix-search-kbd,
body.raix-hdr-icons .raix-header-inner .raix-readbtn-t,
body.raix-hdr-icons .raix-read-header .raix-readbtn-t {
	display: none;
}

/* Both become the same round button, the size the search toggle already is on
   a narrow screen, so the two sit together as a matched pair. */
body.raix-hdr-icons .raix-search-toggle {
	width: 40px;
	height: 40px;
	padding: 0;
	gap: 0;
	justify-content: center;
	border-radius: 50%;
}

body.raix-hdr-icons .raix-header-inner .raix-readbtn,
body.raix-hdr-icons .raix-read-header .raix-readbtn {
	width: 40px;
	height: 40px;
	padding: 0;
	gap: 0;
	justify-content: center;
	border-radius: 50%;
	border-width: 0;
	box-shadow: none;
}

body.raix-hdr-icons .raix-header-inner .raix-readbtn:hover,
body.raix-hdr-icons .raix-read-header .raix-readbtn:hover {
	transform: none;
	box-shadow: 0 0 0 3px var(--raix-primary-light);
}

body.raix-hdr-icons .raix-header-inner .raix-readbtn .raix-acc-icon,
body.raix-hdr-icons .raix-read-header .raix-readbtn .raix-acc-icon {
	width: 22px;
	height: 22px;
}

.raix-content-topnav {
	padding: 40px 24px 56px;
}

.raix-nav-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	background: var(--raix-card);
	border: 1px solid var(--raix-border);
	border-radius: 999px;
	padding: 9px 16px;
	font-family: inherit;
	font-weight: 700;
	font-size: 14px;
	color: var(--raix-text);
	cursor: pointer;
}

.raix-nav-toggle-bars {
	width: 16px;
	height: 2px;
	background: currentColor;
	position: relative;
	display: inline-block;
}

.raix-nav-toggle-bars::before,
.raix-nav-toggle-bars::after {
	content: '';
	position: absolute;
	left: 0;
	width: 16px;
	height: 2px;
	background: currentColor;
}

.raix-nav-toggle-bars::before {
	top: -5px;
}

.raix-nav-toggle-bars::after {
	top: 5px;
}

/* ---------- Hero (dashboard) ---------- */
.raix-hero {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	border: 1px solid var(--raix-border);
	background:
		radial-gradient(ellipse 70% 90% at 85% 10%, var(--raix-primary-light), transparent 65%),
		linear-gradient(135deg, var(--raix-card) 0%, var(--raix-bg) 100%);
	padding: 52px 44px;
	margin-bottom: 36px;
	box-shadow: var(--raix-shadow-sm);
}

.raix-hero-glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse 45% 60% at 15% 100%, rgba(99, 102, 241, 0.08), transparent 70%);
}

.raix-hero-inner {
	position: relative;
	max-width: 640px;
}

.raix-hero-kicker {
	display: inline-block;
	margin: 0 0 12px;
	padding: 5px 14px;
	border-radius: 999px;
	background: var(--raix-primary-light);
	color: var(--raix-primary-strong);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.raix-hero-title {
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 800;
}

.raix-hero-sub {
	font-size: 17px;
	color: var(--raix-muted);
	margin: 0 0 24px;
}

.raix-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ---------- Sections ---------- */
.raix-section {
	margin-bottom: 40px;
}

.raix-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.raix-section-title {
	font-size: 22px;
	font-weight: 800;
	margin: 0 0 14px;
}

.raix-section-head .raix-section-title {
	margin: 0;
}

.raix-section-more {
	font-weight: 700;
	font-size: 14px;
	color: var(--raix-primary-strong);
	white-space: nowrap;
}

/* ---------- Quick links ---------- */
.raix-quicklinks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 14px;
}

.raix-quicklink {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	background: var(--raix-card);
	border: 1px solid var(--raix-border);
	border-radius: var(--raix-radius);
	box-shadow: var(--raix-shadow-sm);
	color: var(--raix-text);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.raix-quicklink:hover {
	transform: translateY(-2px);
	box-shadow: var(--raix-shadow-md);
	border-color: var(--raix-primary);
	color: var(--raix-text);
}

.raix-quicklink-mark {
	flex: 0 0 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: var(--raix-primary-light);
	color: var(--raix-primary-strong);
	font-weight: 800;
	font-size: 18px;
}

.raix-quicklink-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.raix-quicklink-title {
	font-weight: 700;
	font-size: 15px;
}

.raix-quicklink-desc {
	font-size: 13px;
	color: var(--raix-muted);
}

.raix-quicklink-arrow {
	margin-left: auto;
	color: var(--raix-faint);
	font-weight: 700;
}

.raix-quicklink:hover .raix-quicklink-arrow {
	color: var(--raix-primary-strong);
}

/* ---------- Card grids ---------- */
.raix-grid {
	display: grid;
	gap: 20px;
}

.raix-grid-3 {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.raix-card {
	display: flex;
	flex-direction: column;
	background: var(--raix-card);
	border: 1px solid var(--raix-border);
	border-radius: var(--raix-radius);
	overflow: hidden;
	box-shadow: var(--raix-shadow-sm);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.raix-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--raix-shadow-md);
}

.raix-card-media {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--raix-primary-light);
	overflow: hidden;
}

.raix-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.raix-card-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 44px;
	font-weight: 800;
	color: var(--raix-primary-strong);
	background: linear-gradient(135deg, var(--raix-primary-light), transparent);
}

.raix-card-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px;
	flex: 1;
}

.raix-card-title {
	font-size: 17px;
	font-weight: 700;
	margin: 0;
}

.raix-card-title a {
	color: var(--raix-text);
}

.raix-card-title a:hover {
	color: var(--raix-primary-strong);
}

.raix-card-excerpt {
	margin: 0;
	font-size: 14px;
	color: var(--raix-muted);
}

.raix-card-link {
	margin-top: auto;
	padding-top: 6px;
	font-weight: 700;
	font-size: 14px;
	color: var(--raix-primary-strong);
}

/* ---------- Page chrome ---------- */
.raix-page-head {
	margin-bottom: 26px;
}

.raix-page-title {
	font-size: clamp(26px, 3.4vw, 36px);
	font-weight: 800;
	margin: 0 0 8px;
}

.raix-page-sub {
	color: var(--raix-muted);
	font-size: 16px;
	margin: 0;
}

.raix-panel {
	background: var(--raix-card);
	border: 1px solid var(--raix-border);
	border-radius: var(--raix-radius);
	box-shadow: var(--raix-shadow-sm);
	padding: 34px;
}

.raix-article-head {
	margin-bottom: 20px;
}

/* The open article: no frame, so the title sits on the header's left edge
   like the blog page cards do, the picture runs the full width, and the
   words keep a reading measure. */
.raix-article-open {
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.raix-article-open .raix-article-head {
	margin-bottom: 22px;
}

.raix-article-open .raix-page-title {
	font-size: clamp(30px, 3.8vw, 44px);
	line-height: 1.12;
	letter-spacing: -0.02em;
	max-width: 920px;
}

.raix-article-open .raix-article-media {
	margin: 0 0 30px;
}

.raix-article-open .raix-article-media img {
	width: 100%;
	height: auto;
	border-radius: var(--raix-radius);
}

/* The picture at the top of a post: the whole picture in its own shape by
   default; "banner" is the old 16:9 crop, kept for sites that want it. */
.raix-article-media.is-full img {
	width: 100%;
	height: auto;
	aspect-ratio: auto;
	object-fit: contain;
}

.raix-article-media.is-banner img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* The writing measure: full width of the column by default, or a comfortable
   860px when the site (Customizer) or the post (Layout tab) asks for it. */
body.raix-prose-reading .raix-article-open .raix-prose,
body.raix-prose-reading .raix-article-open .raix-authorbox {
	max-width: 860px;
}

body.raix-prose-reading .raix-article-open .raix-page-title {
	max-width: 920px;
}

body.raix-prose-full .raix-article-open .raix-page-title,
body.raix-prose-full .raix-article-open .raix-prose,
body.raix-prose-full .raix-article-open .raix-authorbox {
	max-width: none;
}

.raix-related-title {
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--raix-muted);
	margin: 0 0 14px;
}

.raix-article-media {
	margin: 0 0 24px;
}

.raix-article-media img {
	border-radius: var(--raix-radius-sm);
	display: block;
}

.raix-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--raix-faint);
	font-size: 14px;
}

.raix-meta a {
	color: var(--raix-primary-strong);
	font-weight: 600;
}

/* ---------- Prose (post/page content) ---------- */
.raix-prose {
	font-size: 16.5px;
	line-height: 1.75;
}

.raix-prose > * + * {
	margin-top: 1em;
}

.raix-prose h2 {
	font-size: 26px;
	margin-top: 1.6em;
}

.raix-prose h3 {
	font-size: 21px;
	margin-top: 1.4em;
}

/* Links in writing carry colour and weight, never an underline. A page's
   shortcodes (feeds, cards, buttons) live in here too, and underlined
   card titles looked wrong on every one. */
.raix-prose a {
	font-weight: 600;
	color: var(--raix-primary-strong);
	text-decoration: none;
}

.raix-prose a:hover {
	color: var(--raix-primary-hover);
	text-decoration: none;
}

/* A gold button inside prose keeps white text (the prose link colour must not win). */
.raix-prose a.raix-btn-primary,
.raix-prose a.raix-btn-primary:hover,
.raix-prose .raix-btn-primary,
.raix-prose a.raix-checkout-btn,
.raix-prose a.raix-checkout-btn:hover {
	color: var(--raix-primary-text);
}

/* Post From A Link: the offer button and the disclosure line above the article. */
.raix-prose .raix-lp-cta {
	display: flex;
	justify-content: center;
	margin: 32px 0;
}

.raix-prose .raix-lp-cta .wp-block-button__link,
.raix-prose .raix-lp-cta .wp-block-button__link:hover {
	display: inline-block;
	padding: 16px 34px;
	border-radius: 999px;
	font-size: 17px;
	font-weight: 800;
	text-align: center;
	color: var(--raix-primary-text);
	background: linear-gradient(135deg, var(--raix-primary), var(--raix-primary-hover));
	box-shadow: 0 8px 22px var(--raix-primary-light);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.raix-prose .raix-lp-cta .wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 30px var(--raix-primary-light);
}

.raix-prose .raix-lp-disclosure {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--raix-muted);
	border-left: 3px solid var(--raix-border);
	padding: 2px 0 2px 12px;
	margin: 0 0 26px;
}

.raix-prose h1 a,
.raix-prose h2 a,
.raix-prose h3 a,
.raix-prose h4 a {
	color: inherit;
	font-weight: inherit;
}

.raix-prose h1 a:hover,
.raix-prose h2 a:hover,
.raix-prose h3 a:hover,
.raix-prose h4 a:hover {
	color: var(--raix-primary-strong);
}

.raix-prose blockquote {
	margin: 1.4em 0;
	padding: 14px 22px;
	border-left: 4px solid var(--raix-primary);
	background: var(--raix-primary-light);
	border-radius: 0 var(--raix-radius-sm) var(--raix-radius-sm) 0;
	font-style: italic;
}

.raix-prose pre {
	background: #0f172a;
	color: #a7f3d0;
	padding: 18px 20px;
	border-radius: var(--raix-radius-sm);
	overflow-x: auto;
	font-size: 14px;
}

.raix-prose code {
	background: var(--raix-primary-light);
	padding: 2px 6px;
	border-radius: 5px;
	font-size: 0.9em;
}

.raix-prose pre code {
	background: none;
	padding: 0;
}

.raix-prose img {
	border-radius: var(--raix-radius-sm);
}

.raix-prose iframe,
.raix-prose video {
	max-width: 100%;
	border-radius: var(--raix-radius-sm);
}

.raix-prose .wp-block-embed,
.raix-prose .wp-video {
	margin: 1.4em 0;
}

/* ---------- Lesson ---------- */
.raix-lesson-head {
	margin-bottom: 22px;
}

.raix-lesson-back {
	display: inline-block;
	margin-bottom: 12px;
	font-weight: 700;
	font-size: 14px;
	color: var(--raix-primary-strong);
}

.raix-lesson-topics a {
	display: inline-block;
	margin: 6px 6px 0 0;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--raix-primary-light);
	color: var(--raix-primary-strong);
	font-size: 13px;
	font-weight: 700;
}

.raix-lesson-body {
	padding: 38px;
}

/* ---------- Chips (topic filter) ---------- */
.raix-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}

.raix-chip {
	padding: 7px 16px;
	border-radius: 999px;
	border: 1px solid var(--raix-border);
	background: var(--raix-card);
	color: var(--raix-text);
	font-size: 14px;
	font-weight: 600;
}

.raix-chip:hover {
	border-color: var(--raix-primary);
	color: var(--raix-primary-strong);
}

.raix-chip.is-active {
	background: linear-gradient(135deg, var(--raix-primary), var(--raix-primary-hover));
	border-color: transparent;
	color: var(--raix-primary-text);
}

/* ---------- Prev / next ---------- */
.raix-prevnext {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-top: 26px;
}

.raix-prevnext-item a {
	display: block;
	padding: 16px 20px;
	background: var(--raix-card);
	border: 1px solid var(--raix-border);
	border-radius: var(--raix-radius);
	color: var(--raix-text);
	font-weight: 700;
	font-size: 15px;
	box-shadow: var(--raix-shadow-sm);
}

.raix-prevnext-item a:hover {
	border-color: var(--raix-primary);
	color: var(--raix-primary-strong);
}

.raix-prevnext-next {
	text-align: right;
}

.raix-prevnext-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--raix-faint);
	margin-bottom: 4px;
}

/* ---------- Pagination ---------- */
.raix-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 34px;
}

.raix-pagination .page-numbers {
	padding: 8px 15px;
	border-radius: 999px;
	border: 1px solid var(--raix-border);
	background: var(--raix-card);
	color: var(--raix-text);
	font-weight: 600;
	font-size: 14px;
}

.raix-pagination .page-numbers.current {
	background: linear-gradient(135deg, var(--raix-primary), var(--raix-primary-hover));
	color: var(--raix-primary-text);
	border-color: transparent;
}

.raix-pagination a.page-numbers:hover {
	border-color: var(--raix-primary);
	color: var(--raix-primary-strong);
}

/* ---------- Search + forms ---------- */
.raix-searchform {
	display: flex;
	gap: 10px;
	max-width: 480px;
}

.raix-searchform input[type='search'] {
	flex: 1;
	padding: 11px 16px;
	border-radius: 999px;
	border: 1px solid var(--raix-input);
	background: var(--raix-card);
	color: var(--raix-text);
	font-family: inherit;
	font-size: 15px;
}

.raix-searchform input[type='search']:focus {
	outline: 2px solid var(--raix-primary);
	outline-offset: 1px;
	border-color: transparent;
}

.raix-page-searchbar {
	margin-top: 14px;
}

/* ---------- 404 ---------- */
.raix-404 {
	text-align: center;
	padding: 60px 34px;
}

.raix-404-code {
	font-size: 72px;
	font-weight: 800;
	margin: 0 0 6px;
	background: linear-gradient(135deg, var(--raix-primary), var(--raix-primary-hover));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.raix-404-tools {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	margin-top: 26px;
}

/* ---------- Empty state ---------- */
.raix-empty {
	padding: 48px 24px;
	text-align: center;
	color: var(--raix-muted);
	background: var(--raix-card);
	border: 1px dashed var(--raix-border);
	border-radius: var(--raix-radius);
}

/* ---------- Comments ---------- */
.raix-comments {
	margin-top: 28px;
}

.raix-comments-title {
	font-size: 20px;
	font-weight: 800;
}

.raix-comment-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.raix-comment-list .comment {
	padding: 16px 0;
	border-bottom: 1px solid var(--raix-border);
}

.raix-comment-list .comment .avatar {
	border-radius: 50%;
	margin-right: 10px;
	vertical-align: middle;
}

.raix-comment-list .children {
	list-style: none;
	padding-left: 28px;
}

.comment-form input[type='text'],
.comment-form input[type='email'],
.comment-form input[type='url'],
.comment-form textarea {
	width: 100%;
	padding: 11px 14px;
	border-radius: var(--raix-radius-sm);
	border: 1px solid var(--raix-input);
	background: var(--raix-bg);
	color: var(--raix-text);
	font-family: inherit;
	font-size: 15px;
}

.comment-form .submit {
	display: inline-flex;
	padding: 12px 26px;
	border-radius: 999px;
	border: none;
	background: linear-gradient(135deg, var(--raix-primary), var(--raix-primary-hover));
	color: var(--raix-primary-text);
	font-family: inherit;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
}

/* ---------- Footers ---------- */
.raix-footer-portal {
	border-top: 1px solid var(--raix-border);
	padding: 18px 28px;
	font-size: 14px;
	color: var(--raix-muted);
}

.raix-footer-portal .raix-footer-inner {
	max-width: 1160px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.raix-footer-dark {
	background: var(--raix-footer-dark);
	color: #9ca3af;
	padding: 26px 0;
	font-size: 14px;
}

.raix-footer-dark .raix-footer-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.raix-footer-nav {
	display: flex;
	align-items: center;
	gap: 18px;
}

.raix-menu-footer {
	display: flex;
	gap: 18px;
}

.raix-footer-portal .raix-menu-footer a {
	color: var(--raix-muted);
	font-weight: 600;
}

.raix-footer-dark .raix-menu-footer a {
	color: #d1d5db;
	font-weight: 600;
}

.raix-support-foot {
	font-weight: 700;
}

.raix-footer-dark .raix-support-foot {
	color: #fbbf24;
}

.raix-footer-portal .raix-support-foot {
	color: var(--raix-primary-strong);
}

/* ---------- Landing canvas ---------- */
.raix-landing-body {
	background: #ffffff;
}

.raix-landing-canvas {
	/* Not 100vh: a short offer page then ends in a screenful of nothing. */
	min-height: 60vh;
	padding: 0 20px 56px;
}

/*
 * The template has no header or sidebar to set a measure, so the canvas has
 * to do it: without this, every landing page runs text edge to edge.
 * Full-width blocks opt out with the usual alignfull.
 */
.raix-landing-canvas blockquote {
	margin: 1.4em auto;
	padding: 14px 22px;
	border-left: 4px solid var(--raix-primary);
	background: var(--raix-primary-light);
	border-radius: 0 var(--raix-radius-sm) var(--raix-radius-sm) 0;
	font-style: italic;
}

/*
 * One container sets the measure for the whole page. Centring each element
 * individually is fragile: a margin shorthand anywhere in the prose styles
 * wipes the auto side margins and that element alone escapes the column.
 */
.raix-landing-inner {
	max-width: 880px;
	margin: 0 auto;
}

.raix-landing-inner > h2 {
	margin-top: 1.8em;
}

/* The page title as the hero. A landing page has no header to lead with. */
.raix-landing-hero {
	text-align: center;
	padding: 56px 20px 24px;
	max-width: 900px;
	margin: 0 auto;
}

.raix-landing-hero h1 {
	font-size: clamp(30px, 5vw, 52px);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: 0;
	text-wrap: balance;
}

/* ---------- Hero band + feature cards ---------- */

.raix-sc-hero {
	border-radius: var(--raix-radius);
	padding: 56px 32px;
	margin: 0 0 28px;
	text-align: center;
}

.raix-sc-hero-in {
	max-width: 760px;
	margin: 0 auto;
}

.raix-sc-hero-gradient {
	background: linear-gradient(135deg, var(--raix-primary) 0%, var(--raix-primary-hover) 100%);
	/* House rule: an orange or gold band ALWAYS gets white text. */
	color: #ffffff;
}

.raix-sc-hero-gradient .raix-sc-hero-eyebrow,
.raix-sc-hero-gradient h2,
.raix-sc-hero-gradient p {
	color: #ffffff;
}

.raix-sc-hero-soft {
	background: var(--raix-primary-light);
	border: 1px solid var(--raix-border);
}

.raix-sc-hero-dark {
	background: #0a0a0a;
	color: #fafaf9;
}

.raix-sc-hero-dark .raix-sc-hero-h,
.raix-sc-hero-dark .raix-sc-hero-p {
	color: #fafaf9;
}

.raix-sc-hero-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .75;
	margin-bottom: 12px;
}

.raix-sc-hero-h {
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 900;
	letter-spacing: -.03em;
	line-height: 1.12;
	margin: 0 0 14px;
	text-wrap: balance;
}

.raix-sc-hero-p {
	font-size: 17px;
	line-height: 1.6;
	margin: 0 0 22px;
	text-wrap: pretty;
}

.raix-sc-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin: 24px 0;
}

.raix-sc-feature {
	background: var(--raix-card);
	border: 1px solid var(--raix-border);
	border-radius: var(--raix-radius-sm);
	padding: 20px 22px;
}

.raix-sc-feature-icon {
	font-size: 26px;
	line-height: 1;
	display: block;
	margin-bottom: 10px;
}

.raix-sc-feature h3 {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 800;
}

.raix-sc-feature p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--raix-muted);
}

/* ---------- Alignment helpers WP outputs ---------- */
.alignwide {
	margin-left: -40px;
	margin-right: -40px;
}

.alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.raix-sidebar {
		position: fixed;
		left: 0;
		top: 0;
		transform: translateX(-100%);
		transition: transform 0.22s ease;
		box-shadow: var(--raix-shadow-md);
	}

	body.raix-nav-open .raix-sidebar {
		transform: translateX(0);
	}

	.raix-sidebar-scrim {
		position: fixed;
		inset: 0;
		background: rgba(10, 10, 15, 0.45);
		z-index: 35;
	}

	.raix-nav-toggle {
		display: inline-flex;
	}

	.raix-topbar-search {
		display: none;
	}

	.alignwide {
		margin-left: 0;
		margin-right: 0;
	}
}

@media (max-width: 782px) {
	.raix-content,
	.raix-content-topnav {
		padding-left: 16px;
		padding-right: 16px;
	}

	.raix-hero {
		padding: 34px 24px;
	}

	.raix-panel,
	.raix-lesson-body {
		padding: 22px;
	}

	.raix-prevnext {
		grid-template-columns: 1fr;
	}

	.raix-prevnext-next {
		text-align: left;
	}

	.raix-header-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--raix-card);
		border-bottom: 1px solid var(--raix-border);
		box-shadow: var(--raix-shadow-md);
		padding: 10px 16px 16px;
	}

	body.raix-nav-open .raix-header-nav {
		display: block;
	}

	/* On a phone: site name, then Search, Accessibility and Menu, all on one
	   row. The name gives way (ellipsis) before anything is pushed off screen. */
	.raix-header-inner {
		gap: 10px;
		flex-wrap: nowrap;
	}

	.raix-header-inner .raix-brand {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
	}

	.raix-header-inner .raix-brand-name {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.raix-header-inner .raix-search-toggle {
		order: 1;
		margin-left: 0;
	}

	.raix-header-inner .raix-nav-toggle {
		order: 3;
		margin-left: 0;
		flex: none;
	}

	.raix-menu-top {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	.raix-menu-top .sub-menu {
		display: block;
		position: static;
		box-shadow: none;
		border: none;
		background: none;
		padding-left: 18px;
		/* the phone menu is one long list that scrolls with the page, so the
		   desktop cap and the columns are off here */
		max-height: none;
		overflow: visible;
	}

	.raix-user-name {
		display: none;
	}

	.raix-footer-dark .raix-footer-inner,
	.raix-footer-portal .raix-footer-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------- Footer columns (v1.0.1) ---------- */
.raix-footer-inner-wide {
	max-width: 1160px;
	margin: 0 auto;
	padding: 34px 28px 20px;
}

.raix-footer-dark .raix-wrap {
	padding-top: 40px;
	padding-bottom: 22px;
}

.raix-footer-cols {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 30px;
	margin-bottom: 26px;
}

.raix-footer-col h4 {
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 12px;
}

.raix-footer-portal .raix-footer-col h4 {
	color: var(--raix-faint);
}

.raix-footer-dark .raix-footer-col h4 {
	color: #9ca3af;
}

.raix-footer-blurb {
	margin: 10px 0 0;
	font-size: 14px;
}

.raix-footer-portal .raix-footer-blurb {
	color: var(--raix-muted);
}

.raix-footer-dark .raix-footer-blurb {
	color: #9ca3af;
}

.raix-footer-dark .raix-brand,
.raix-footer-dark .raix-brand:hover {
	color: #ffffff;
}

.raix-menu-footcol li,
.raix-menu-legal li {
	margin-bottom: 8px;
}

.raix-footer-portal .raix-menu-footcol a,
.raix-footer-portal .raix-menu-legal a {
	color: var(--raix-muted);
	font-weight: 600;
	font-size: 14px;
}

.raix-footer-portal .raix-menu-footcol a:hover,
.raix-footer-portal .raix-menu-legal a:hover {
	color: var(--raix-primary-strong);
}

.raix-footer-dark .raix-menu-footcol a,
.raix-footer-dark .raix-menu-legal a {
	color: #d1d5db;
	font-weight: 600;
	font-size: 14px;
}

.raix-footer-dark .raix-menu-footcol a:hover,
.raix-footer-dark .raix-menu-legal a:hover {
	color: #fbbf24;
}

.raix-footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-top: 18px;
	font-size: 13.5px;
}

.raix-footer-portal .raix-footer-bottom {
	border-top: 1px solid var(--raix-border);
	color: var(--raix-muted);
}

.raix-footer-dark .raix-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	color: #9ca3af;
}

.raix-backtotop {
	background: none;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: inherit;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	padding: 7px 16px;
	cursor: pointer;
}

.raix-backtotop:hover {
	color: var(--raix-primary-strong);
}

/* ---------- Shortcodes ---------- */
.raix-btn-big {
	padding: 16px 34px;
	font-size: 17px;
}

.raix-sc-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	flex-wrap: wrap;
	background:
		radial-gradient(ellipse 60% 100% at 90% 0%, var(--raix-primary-light), transparent 70%),
		var(--raix-card);
	border: 1px solid var(--raix-border);
	border-radius: var(--raix-radius);
	box-shadow: var(--raix-shadow-sm);
	padding: 26px 30px;
	margin: 1.6em 0;
}

.raix-sc-cta h3 {
	margin: 0 0 4px;
	font-size: 20px;
	font-weight: 800;
}

.raix-sc-cta p {
	margin: 0;
	color: var(--raix-muted);
	font-size: 15px;
}

.raix-sc-video {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--raix-radius-sm);
	overflow: hidden;
	background: #0f172a;
	margin: 1.4em 0;
}

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

.raix-sc-faq {
	margin: 1.4em 0;
}

.raix-sc-q {
	background: var(--raix-card);
	border: 1px solid var(--raix-border);
	border-radius: var(--raix-radius-sm);
	margin-bottom: 10px;
	overflow: hidden;
}

.raix-sc-q summary {
	cursor: pointer;
	padding: 15px 18px;
	font-weight: 700;
	font-size: 15px;
	list-style: none;
	position: relative;
	padding-right: 40px;
}

.raix-sc-q summary::-webkit-details-marker {
	display: none;
}

.raix-sc-q summary::after {
	content: '+';
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 20px;
	font-weight: 700;
	color: var(--raix-primary-strong);
}

.raix-sc-q[open] summary::after {
	content: '\2212';
}

.raix-sc-a {
	padding: 0 18px 15px;
	color: var(--raix-muted);
	font-size: 14.5px;
}

.raix-sc-notice {
	border-radius: var(--raix-radius-sm);
	padding: 14px 18px;
	margin: 1.4em 0;
	font-size: 15px;
	border: 1px solid;
}

.raix-sc-notice-info {
	background: var(--raix-primary-light);
	border-color: var(--raix-primary);
	color: var(--raix-text);
}

.raix-sc-notice-success {
	background: #e7f6e9;
	border-color: #1a7f37;
	color: #14532d;
}

.raix-sc-notice-warning {
	background: #fffbeb;
	border-color: #f59e0b;
	color: #78350f;
}

.raix-sc-progress {
	margin: 1.4em 0;
}

.raix-sc-progress-label {
	display: flex;
	justify-content: space-between;
	font-size: 13.5px;
	font-weight: 700;
	margin-bottom: 6px;
	color: var(--raix-muted);
}

.raix-sc-progress-track {
	height: 12px;
	border-radius: 999px;
	background: var(--raix-primary-light);
	overflow: hidden;
}

.raix-sc-progress-bar {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--raix-primary), var(--raix-primary-hover));
}

/* ---------- AI assistant widget ---------- */
/* Where it sits: a corner or edge (floating, above every bar: cookie notice 99990 and the
   accessibility menu stay above it), or in the header beside Search. --raix-assist-offset
   is the distance from the edges; the script lifts a floating button clear of any bar. */
.raix-assist {
	--raix-assist-offset: 22px;
	--raix-assist-btn: var(--raix-primary);
	--raix-assist-btn2: var(--raix-primary-hover);
	--raix-assist-btn-text: var(--raix-primary-text);
	font-family: 'Outfit', -apple-system, sans-serif;
}

.raix-assist-floating {
	position: fixed;
	z-index: 99950;
}

.raix-assist-pos-br { right: var(--raix-assist-offset); bottom: var(--raix-assist-offset); }
.raix-assist-pos-bl { left: var(--raix-assist-offset); bottom: var(--raix-assist-offset); }
.raix-assist-pos-tr { right: var(--raix-assist-offset); top: calc(var(--raix-assist-offset) + 76px); }
.raix-assist-pos-tl { left: var(--raix-assist-offset); top: calc(var(--raix-assist-offset) + 76px); }
.raix-assist-pos-mr { right: var(--raix-assist-offset); top: 50%; transform: translateY(-50%); }
.raix-assist-pos-ml { left: var(--raix-assist-offset); top: 50%; transform: translateY(-50%); }

.raix-assist-header {
	position: static;
	flex: none;
	margin-left: 10px;
}

.raix-assist-toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 12px 22px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--raix-assist-btn), var(--raix-assist-btn2));
	color: var(--raix-assist-btn-text);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	white-space: nowrap;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.raix-assist-toggle:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); }
.raix-assist-toggle:focus-visible { outline: 3px solid var(--raix-primary); outline-offset: 3px; }
.raix-assist-ic { font-size: 16px; line-height: 1; }

/* Colours */
.raix-assist-col-dark { --raix-assist-btn: #0a0a0f; --raix-assist-btn2: #24242e; --raix-assist-btn-text: #fff; }
.raix-assist-col-white { --raix-assist-btn: #fff; --raix-assist-btn2: #f5f5f5; --raix-assist-btn-text: #0a0a0a; }
.raix-assist-col-white .raix-assist-toggle { border-color: var(--raix-border); }
.raix-assist-col-custom { --raix-assist-btn2: var(--raix-assist-btn); }

/* Round, icon only: the word stays for screen readers. */
.raix-assist-shape-round .raix-assist-toggle { width: 52px; height: 52px; padding: 0; justify-content: center; }
.raix-assist-shape-round .raix-assist-ic { font-size: 22px; }
.raix-assist-shape-round .raix-assist-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* In the header: sized like the Search button. */
.raix-assist-header .raix-assist-toggle { height: 40px; padding: 0 16px 0 12px; font-size: 14px; box-shadow: none; }
.raix-assist-header.raix-assist-shape-round .raix-assist-toggle { width: 40px; height: 40px; padding: 0; }
.raix-assist-header .raix-assist-ic { font-size: 15px; }
.raix-header-inner .raix-assist-header { order: 7; }
.raix-topbar-tools .raix-assist-header { margin-left: 4px; }

/* The panel: fixed, placed by the script next to whichever button opened it. */
.raix-assist-panel {
	position: fixed;
	right: var(--raix-assist-offset);
	bottom: calc(var(--raix-assist-offset) + 62px);
	z-index: 99951;
	width: min(360px, calc(100vw - 44px));
	background: var(--raix-card);
	border: 1px solid var(--raix-border);
	border-radius: 16px;
	box-shadow: var(--raix-shadow-md);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/*
 * display:flex OVERRIDES the hidden attribute, so without this the panel can
 * never close and the Close button looks broken. Always pair a display value
 * with an explicit [hidden] rule.
 */
.raix-assist-panel[hidden] {
	display: none;
}

@media (max-width: 782px) {
	.raix-assist-floating { --raix-assist-offset: 14px; }
	.raix-assist-nomobile { display: none; }
	/* The pill shrinks to the icon on a phone, the word stays for screen readers. */
	.raix-assist-floating.raix-assist-shape-pill .raix-assist-toggle { width: 52px; height: 52px; padding: 0; justify-content: center; }
	.raix-assist-floating.raix-assist-shape-pill .raix-assist-ic { font-size: 22px; }
	.raix-assist-floating.raix-assist-shape-pill .raix-assist-word,
	.raix-assist-header .raix-assist-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.raix-assist-header .raix-assist-toggle { width: 40px; padding: 0; justify-content: center; }
	.raix-header-inner .raix-assist-header { order: 2; margin-left: 0; }
}

@media print { .raix-assist { display: none !important; } }

.raix-assist-admin {
	margin: 0;
	padding: 8px 16px 12px;
	font-size: 11.5px;
	color: var(--raix-faint);
	border-top: 1px solid var(--raix-border);
}

.raix-assist-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 16px;
	border-bottom: 1px solid var(--raix-border);
	font-size: 15px;
}

.raix-assist-close {
	background: none;
	border: 1px solid var(--raix-border);
	border-radius: 999px;
	padding: 4px 12px;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--raix-muted);
	cursor: pointer;
}

.raix-assist-log {
	padding: 14px 16px;
	max-height: 320px;
	min-height: 140px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.raix-assist-msg {
	max-width: 88%;
	padding: 10px 14px;
	border-radius: 13px;
	font-size: 14px;
	line-height: 1.5;
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

.raix-assist-bot {
	background: var(--raix-primary-light);
	color: var(--raix-text);
	align-self: flex-start;
}

.raix-assist-me {
	background: linear-gradient(135deg, var(--raix-primary), var(--raix-primary-hover));
	color: var(--raix-primary-text);
	align-self: flex-end;
}

.raix-assist-form {
	display: flex;
	gap: 8px;
	padding: 12px 14px;
	border-top: 1px solid var(--raix-border);
}

.raix-assist-form input {
	flex: 1;
	min-width: 0;
	padding: 10px 14px;
	border-radius: 999px;
	border: 1px solid var(--raix-input);
	background: var(--raix-bg);
	color: var(--raix-text);
	font-family: inherit;
	font-size: 14px;
}

.raix-assist-send {
	padding: 10px 18px;
	font-size: 14px;
}

@media (max-width: 782px) {
	.raix-footer-cols {
		grid-template-columns: 1fr 1fr;
	}

	.raix-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 480px) {
	.raix-footer-cols {
		grid-template-columns: 1fr;
	}
}

/* ---------- Opt-in forms (v1.0.2) ---------- */
.raix-optin {
	background:
		radial-gradient(ellipse 60% 100% at 90% 0%, var(--raix-primary-light), transparent 70%),
		var(--raix-card);
	border: 1px solid var(--raix-border);
	border-radius: var(--raix-radius);
	box-shadow: var(--raix-shadow-sm);
	padding: 28px 30px;
	margin: 1.6em 0;
}

.raix-optin-heading {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 800;
}

.raix-optin-text {
	margin: 0 0 16px;
	color: var(--raix-muted);
	font-size: 15px;
}

.raix-optin-form {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

.raix-optin-form input[type='text'],
.raix-optin-form input[type='email'] {
	flex: 1 1 180px;
	min-width: 0;
	padding: 12px 16px;
	border-radius: 999px;
	border: 1px solid var(--raix-input);
	background: var(--raix-bg);
	color: var(--raix-text);
	font-family: inherit;
	font-size: 15px;
}

.raix-optin-form input:focus {
	outline: 2px solid var(--raix-primary);
	outline-offset: 1px;
	border-color: transparent;
}

.raix-optin-form .raix-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.raix-optin-msg {
	flex-basis: 100%;
	margin: 4px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--raix-primary-strong);
}

/* ---------- Blog layouts (v1.0.3) ---------- */
.raix-rows,
.raix-classic {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.raix-classic {
	max-width: 760px;
	margin: 0 auto;
}

.raix-row {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	background: var(--raix-card);
	border: 1px solid var(--raix-border);
	border-radius: var(--raix-radius);
	box-shadow: var(--raix-shadow-sm);
	padding: 22px 24px;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.raix-row:hover {
	transform: translateY(-2px);
	box-shadow: var(--raix-shadow-md);
	border-color: var(--raix-primary);
}

.raix-row-mark {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--raix-primary-light);
}

.raix-row-mark img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.raix-row-letter {
	font-size: 24px;
	font-weight: 800;
	color: var(--raix-primary-strong);
}

.raix-row-body {
	min-width: 0;
}

.raix-row-title {
	font-size: 19px;
	font-weight: 800;
	margin: 2px 0 6px;
}

.raix-row-title a {
	color: var(--raix-text);
}

.raix-row-title a:hover {
	color: var(--raix-primary-strong);
}

.raix-row-excerpt {
	margin: 0 0 8px;
	font-size: 14.5px;
	color: var(--raix-muted);
}

/* ---------- Visitor layout switcher ---------- */
/* Bigger pictures in the list: the 56px mark was a postage stamp. */
/* The list view: a wide 16:9 picture beside the words, the whole picture
   shown whatever its shape (a 3:2 or square picture gets quiet dark edges
   rather than a crop). Kevin: "bigger image, WIDER so it works for all my
   image sizes". */
.raix-row-mark {
	flex: 0 0 320px;
	width: 320px;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
}

.raix-row-mark:has(img) {
	background: #0a0a0f;
}

.raix-row-mark img {
	object-fit: contain;
}

.raix-row-letter {
	font-size: 40px;
}

@media (max-width: 900px) {
	.raix-row-mark {
		flex-basis: 240px;
		width: 240px;
	}
}

.raix-page-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.raix-page-head .raix-page-title {
	flex: 1 1 auto;
}

.raix-page-head .raix-page-sub {
	flex-basis: 100%;
}

.raix-view-switch {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
	margin-left: auto;
}

.raix-view-switch-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--raix-muted);
	margin-right: 4px;
}

.raix-view-btn {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	border: 1px solid var(--raix-border);
	background: var(--raix-card);
	color: var(--raix-muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.raix-view-btn svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.raix-view-btn:hover {
	border-color: var(--raix-primary);
	color: var(--raix-primary-strong);
}

.raix-view-btn[aria-pressed="true"] {
	background: var(--raix-primary);
	border-color: var(--raix-primary);
	color: var(--raix-primary-text, #fff);
}

/* Cards and Magazine: the rows become cards. */
html[data-raix-view="cards"] .raix-viewable,
html[data-raix-view="magazine"] .raix-viewable {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

html[data-raix-view="cards"] .raix-viewable .raix-row,
html[data-raix-view="magazine"] .raix-viewable .raix-row {
	flex-direction: column;
	gap: 0;
	padding: 0;
	overflow: hidden;
}

html[data-raix-view="cards"] .raix-viewable .raix-row-mark,
html[data-raix-view="magazine"] .raix-viewable .raix-row-mark {
	flex: none;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: 0;
}

html[data-raix-view="cards"] .raix-viewable .raix-row-letter,
html[data-raix-view="magazine"] .raix-viewable .raix-row-letter {
	font-size: 44px;
}

html[data-raix-view="cards"] .raix-viewable .raix-row-body,
html[data-raix-view="magazine"] .raix-viewable .raix-row-body {
	padding: 18px 20px 22px;
}

/* Magazine: the newest post leads, full width, picture beside the words. */
html[data-raix-view="magazine"] .raix-viewable .raix-row:first-child {
	grid-column: 1 / -1;
	flex-direction: row;
	align-items: stretch;
}

html[data-raix-view="magazine"] .raix-viewable .raix-row:first-child .raix-row-mark {
	flex: 0 0 46%;
	width: 46%;
	aspect-ratio: auto;
	min-height: 260px;
}

html[data-raix-view="magazine"] .raix-viewable .raix-row:first-child .raix-row-body {
	padding: 28px;
	align-self: center;
}

html[data-raix-view="magazine"] .raix-viewable .raix-row:first-child .raix-row-title {
	font-size: 26px;
}

/* Classic: the narrow centred column. */
html[data-raix-view="classic"] .raix-viewable {
	max-width: 760px;
	margin: 0 auto;
}

@media (max-width: 760px) {
	html[data-raix-view="magazine"] .raix-viewable .raix-row:first-child {
		flex-direction: column;
	}

	html[data-raix-view="magazine"] .raix-viewable .raix-row:first-child .raix-row-mark {
		flex: none;
		width: 100%;
		aspect-ratio: 16 / 9;
		min-height: 0;
	}
}

@media (max-width: 640px) {
	/* On a phone the picture goes above the words, full width. */
	.raix-viewable .raix-row {
		flex-direction: column;
		gap: 14px;
	}

	.raix-row-mark {
		flex: none;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		border-radius: 12px;
	}
}

.raix-mag-featured {
	margin-bottom: 20px;
}

.raix-mag-featured .raix-card {
	flex-direction: row;
	align-items: stretch;
}

.raix-mag-featured .raix-card-media {
	flex: 0 0 46%;
	aspect-ratio: auto;
	min-height: 260px;
}

.raix-mag-featured .raix-card-body {
	padding: 28px;
	justify-content: center;
}

.raix-mag-featured .raix-card-title {
	font-size: 26px;
}

/* ---------- Breadcrumbs ---------- */
.raix-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	font-size: 13.5px;
	margin-bottom: 14px;
	color: var(--raix-faint);
}

.raix-crumbs a {
	color: var(--raix-muted);
	font-weight: 600;
}

.raix-crumbs a:hover {
	color: var(--raix-primary-strong);
}

.raix-crumbs-here {
	color: var(--raix-faint);
}

/* ---------- Single post extras ---------- */
.raix-meta-sub {
	margin-top: 4px;
	font-size: 13px;
}

.raix-authorbox {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid var(--raix-border);
}

.raix-authorbox img {
	border-radius: 50%;
	flex: 0 0 56px;
}

.raix-authorbox-label {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--raix-faint);
}

.raix-authorbox-name {
	font-size: 16px;
	font-weight: 800;
}

.raix-authorbox-bio {
	margin: 6px 0 0;
	font-size: 14px;
	color: var(--raix-muted);
}

.raix-related {
	margin-top: 30px;
}

@media (max-width: 782px) {
	.raix-mag-featured .raix-card {
		flex-direction: column;
	}

	.raix-mag-featured .raix-card-media {
		flex-basis: auto;
		aspect-ratio: 16 / 9;
		min-height: 0;
	}

	.raix-row {
		padding: 16px;
	}
}

/* ---------- Footer widget area (v1.0.6) ---------- */
.raix-footer-widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
	padding-bottom: 26px;
	margin-bottom: 26px;
}

.raix-widget-title {
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 10px;
}

.raix-footer-portal .raix-widget {
	color: var(--raix-muted);
	font-size: 14px;
}

.raix-footer-dark .raix-widget {
	color: #9ca3af;
	font-size: 14px;
}

.raix-footer-dark .raix-widget a {
	color: #d1d5db;
}

/* A widget dropped into the footer has to look like it belongs there.
   WordPress gives us a bare h4 and a bulleted list, and the theme's own
   heading rules were winning, so these are scoped to the footer to match the
   Members / Legal / Help columns exactly. */
/* Footer Extra sits above the link columns, with the rule between them. */
.raix-footer .raix-footer-widgets {
	border-bottom: 1px solid rgba(148, 163, 184, 0.16);
	margin-bottom: 26px;
	padding-bottom: 26px;
	gap: 24px 40px;
}

/* Block widgets in the footer: headings, lists, search and dates, so a
   Categories or Latest Posts block looks like it was designed in. */
.raix-footer-widgets .wp-block-heading {
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 12px;
	color: inherit;
}

.raix-footer-widgets ul,
.raix-footer-widgets ol {
	list-style: none;
	padding: 0;
	margin: 0 0 8px;
}

.raix-footer-widgets li {
	margin: 0 0 8px;
	line-height: 1.5;
}

.raix-footer-widgets .wp-block-latest-posts__post-date,
.raix-footer-widgets .wp-block-latest-comments__comment-date {
	display: block;
	font-size: 12px;
	opacity: 0.7;
}

.raix-footer-widgets .wp-block-search__inside-wrapper {
	gap: 6px;
}

.raix-footer-widgets .wp-block-search__input {
	border: 1px solid rgba(148, 163, 184, 0.35);
	border-radius: 8px;
	padding: 8px 10px;
	background: rgba(255, 255, 255, 0.06);
	color: inherit;
}

.raix-footer-widgets .wp-block-search__button {
	background: var(--raix-primary);
	color: var(--raix-primary-text);
	border: 0;
	border-radius: 8px;
	font-weight: 700;
	padding: 8px 14px;
	cursor: pointer;
}

.raix-footer .raix-widget-title {
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 12px;
	line-height: 1.3;
}

.raix-footer-dark .raix-widget-title {
	color: #94a3b8;
}

.raix-footer-portal .raix-widget-title {
	color: var(--raix-muted);
}

/* No bullets, no browser indent: a footer list is a stack of links. */
.raix-footer .raix-widget ul,
.raix-footer .raix-widget ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.raix-footer .raix-widget li {
	margin: 0 0 7px;
	font-size: 13.5px;
	line-height: 1.5;
}

.raix-footer .raix-widget li:last-child {
	margin-bottom: 0;
}

.raix-footer .raix-widget a {
	text-decoration: none;
}

.raix-footer .raix-widget a:hover {
	color: var(--raix-primary);
}

.raix-footer-dark .raix-widget a:hover {
	color: #fff;
}

/* Search and select widgets are common in a footer and looked unstyled. */
.raix-footer .raix-widget select,
.raix-footer .raix-widget input[type="search"],
.raix-footer .raix-widget input[type="text"] {
	width: 100%;
	max-width: 260px;
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 13.5px;
	border: 1px solid rgba(148, 163, 184, 0.35);
	background: rgba(255, 255, 255, 0.04);
	color: inherit;
}

.raix-footer-portal .raix-widget select,
.raix-footer-portal .raix-widget input[type="search"],
.raix-footer-portal .raix-widget input[type="text"] {
	background: var(--raix-card);
	border-color: var(--raix-border);
}

/* ---------- Layout: Boxed Classic ---------- */
body.raix-layout-boxed {
	background: var(--raix-bg);
}

body.raix-layout-boxed .raix-header {
	background: var(--raix-card);
	backdrop-filter: none;
}

body.raix-layout-boxed .raix-content-topnav {
	max-width: 1120px;
	margin: 30px auto 60px;
	background: var(--raix-card);
	border: 1px solid var(--raix-border);
	border-radius: var(--raix-radius);
	box-shadow: var(--raix-shadow-md);
	padding: 44px 48px 56px;
}

body.raix-layout-boxed .raix-footer-dark {
	max-width: 1120px;
	margin: 0 auto 40px;
	border-radius: var(--raix-radius);
}

@media (max-width: 782px) {
	body.raix-layout-boxed .raix-content-topnav {
		margin: 16px 12px 40px;
		padding: 26px 20px 36px;
	}

	body.raix-layout-boxed .raix-footer-dark {
		margin: 0 12px 24px;
	}
}

/* ---------- Layout: Minimal ---------- */
body.raix-layout-minimal .raix-page {
	max-width: 760px;
}

/* Minimal is a narrow reading column by design: a sidebar always stacks
   below the content here rather than squeezing in beside it, even above
   the normal 1024px breakpoint. */
body.raix-layout-minimal .raix-with-sidebar {
	grid-template-columns: 1fr;
}

body.raix-layout-minimal .raix-content-sidebar {
	order: 2;
}

/* Portal already has its own app-style navigation sidebar in the shell; a
   second, unrelated widget sidebar competing for the same edge of the
   screen is confusing regardless of how much room is technically left, so
   it stacks below the content here too. */
body.raix-layout-portal .raix-with-sidebar {
	grid-template-columns: 1fr;
}

body.raix-layout-portal .raix-content-sidebar {
	order: 2;
}

body.raix-layout-minimal .raix-header {
	background: var(--raix-bg);
	backdrop-filter: none;
	box-shadow: none;
}

body.raix-layout-minimal .raix-panel,
body.raix-layout-minimal .raix-lesson-body,
body.raix-layout-minimal .raix-card,
body.raix-layout-minimal .raix-row,
body.raix-layout-minimal .raix-quicklink,
body.raix-layout-minimal .raix-prevnext-item a {
	box-shadow: none;
}

body.raix-layout-minimal .raix-hero {
	box-shadow: none;
	background: transparent;
	padding-left: 0;
	padding-right: 0;
}

body.raix-layout-minimal .raix-grid-3 {
	grid-template-columns: 1fr;
}

/* ---------- Powered by line (footer bottom row) ---------- */
.raix-poweredby {
	font-size: 13px;
}

.raix-footer-portal .raix-poweredby a {
	color: var(--raix-muted);
	font-weight: 600;
}

.raix-footer-portal .raix-poweredby a:hover {
	color: var(--raix-primary-strong);
}

.raix-footer-dark .raix-poweredby a {
	color: #d1d5db;
	font-weight: 600;
}

.raix-footer-dark .raix-poweredby a:hover {
	color: #fbbf24;
}

/* ---------- Checkout Button ---------- */
.raix-checkout { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; margin: 24px auto; max-width: 560px; }
.raix-checkout-left { align-items: flex-start; text-align: left; margin-left: 0; }
.raix-checkout-badge { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--raix-primary-strong); background: var(--raix-primary-light); border: 1px solid var(--raix-primary); border-radius: 999px; padding: 5px 14px; }
.raix-checkout-price { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--raix-text); }
.raix-checkout-price s { font-size: 20px; font-weight: 600; color: var(--raix-muted); margin-right: 6px; }
.raix-checkout-price span { font-size: 15px; font-weight: 600; color: var(--raix-muted); letter-spacing: 0; }
.raix-checkout-btn { font-size: 18px; padding: 16px 38px; }
.raix-checkout-btn span { transition: transform .15s; }
.raix-checkout-btn:hover span { transform: translateX(3px); }
.raix-checkout-note { margin: 0; font-size: 13.5px; color: var(--raix-muted); }
.raix-checkout-trust { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; font-size: 12.5px; color: var(--raix-muted); }
.raix-checkout-left .raix-checkout-trust { justify-content: flex-start; }
.raix-checkout-trust li::before { content: "\2713"; color: var(--raix-primary-strong); font-weight: 800; margin-right: 6px; }
.raix-checkout-alt { font-size: 13.5px; font-weight: 700; color: var(--raix-primary-strong); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) { .raix-checkout-price { font-size: 32px; } .raix-checkout-btn { width: 100%; justify-content: center; } }

/* The member's picture, from [raix_avatar]. Sized inline by the shortcode so a
   page can ask for any size; these are the shape, the ring and the fallback. */
.raix-avatar {
	display: inline-block;
	flex: none;
	object-fit: cover;
	background: var(--raix-bg);
}

.raix-avatar-round {
	border-radius: 50%;
}

.raix-avatar-square {
	border-radius: 14px;
}

.raix-avatar-initial {
	display: inline-grid;
	place-items: center;
	background: var(--raix-primary);
	color: var(--raix-primary-text, #fff);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------------------
   Pages moved off a page builder.
   
   A converted page arrives as plain content with none of the builder's own
   stylesheet behind it, so the theme has to give it a shape. Without this the
   links sat a hundred pixels apart and a video came through as a postage
   stamp, because the builder leaves its videos as width:1078px with no height
   at all and an iframe with no height is 150px tall.
   --------------------------------------------------------------------------- */

.raix-moved {
	max-width: 100%;
	overflow-wrap: break-word;
}

/* The builder nested everything five deep. Space the outer blocks, not each layer. */
.raix-moved > div + div,
.raix-moved > section + section {
	margin-top: 18px;
}

.raix-moved p {
	margin: 0 0 14px;
}

.raix-moved p:last-child {
	margin-bottom: 0;
}

.raix-moved img {
	max-width: 100%;
	height: auto;
}

/*
 * Columns carried over from the old page builder.
 *
 * The builder stated how many columns a row had and then drew them with its own
 * stylesheet. The count comes across in the markup (see raix_migrate_columns);
 * these rules are what draw it. Flex with a zero basis means the row does not
 * need to be told the number twice: three children share the width three ways.
 */
/*
 * Columns line up from the TOP, always.
 *
 * Kevin, 15 Sept 2026: "alignment issues here". The builder's own middle
 * setting was being honoured, and on a row where one column held three cards
 * and the next held two, centring the short columns pushed every card in them
 * half a card down the page. Cards in a grid line up across, so the row is
 * stretched to an equal height and content starts at the top.
 */
.raix-moved .raix-row {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	align-items: stretch;
	margin: 0 0 22px;
}

.raix-moved .raix-row:last-child {
	margin-bottom: 0;
}

/*
 * The builder's middle alignment is deliberately NOT honoured: see above. The
 * class is still carried over so the original intent is not lost, and so this
 * can be revisited without re-reading the builder's markup.
 */

.raix-moved .raix-row.raix-row-center {
	justify-content: center;
}

.raix-moved .raix-col {
	flex: 1 1 0;
	min-width: 0;
}

/* A one third and two thirds split. */
.raix-moved .raix-col.raix-c33 { flex-grow: 1; }
.raix-moved .raix-col.raix-c66 { flex-grow: 2; }

/* Three and four across is too thin on a tablet: go two across. */
@media (max-width: 860px) {
	.raix-moved .raix-cols-3 > .raix-col,
	.raix-moved .raix-cols-4 > .raix-col {
		flex: 0 1 calc(50% - 11px);
	}
}

/* And one column on a phone, whatever the row asked for. */
@media (max-width: 560px) {
	.raix-moved .raix-row {
		display: block;
	}
	.raix-moved .raix-col + .raix-col {
		margin-top: 22px;
	}
}

/* A video keeps its shape whatever the page width. */
.raix-moved .raix-video,
.raix-video {
	position: relative;
	width: 100%;
	max-width: 900px;
	margin: 0 auto 20px;
	aspect-ratio: 16 / 9;
	background: #0f1115;
	border-radius: var(--raix-radius, 14px);
	overflow: hidden;
}

.raix-video iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	border: 0;
	display: block;
}

/* A chatbot is not a video: it brings its own height and must keep it. */
.raix-moved iframe:not(.raix-video iframe) {
	max-width: 100%;
}

/* What used to be a builder button. */
/*
 * A moved button fills its column, and stands apart from the next one.
 *
 * The old builder set nearly all of these to the full width of their column,
 * so shrinking each one to its own words left a ragged staircase of different
 * widths with no gap between them. A button on its own line fills the width;
 * one sitting inside a sentence stays the size of its words.
 */
.raix-moved a.raix-btn {
	margin: 10px 0;
}

.raix-moved div > a.raix-btn {
	display: flex;
	width: 100%;
	text-align: center;
}

.raix-moved p a.raix-btn,
.raix-moved li a.raix-btn {
	display: inline-flex;
	width: auto;
	margin: 4px 0;
}

.raix-moved a.raix-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 22px;
	border-radius: 10px;
	background: var(--raix-primary, #f59e0b);
	color: var(--raix-primary-text, #fff);
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: 0 2px 0 var(--raix-primary-strong, #b45309);
}

.raix-moved a.raix-btn:hover,
.raix-moved a.raix-btn:focus {
	color: var(--raix-primary-text, #fff);
	text-decoration: none;
	transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
	.raix-moved a.raix-btn { transition: none; }
}

/* The builder's inline icons. Its stylesheet sized them; without it an SVG
   with no width fills the column, which is how a page ended up with a black
   pointing hand five hundred pixels tall. Icons scale with their text. */
.raix-moved svg {
	width: 1.25em;
	height: 1.25em;
	max-width: 100%;
	vertical-align: -0.15em;
	flex: none;
}

/* ---------------------------------------------------------------------------
   Breadcrumbs. Where am I, and one step back.
   --------------------------------------------------------------------------- */

.raix-crumbs {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.5;
}

.raix-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.raix-crumbs li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--raix-muted, #6b6453);
}

.raix-crumbs li + li::before {
	content: "/";
	color: var(--raix-border, #e6e0cf);
	font-weight: 700;
}

.raix-crumbs a {
	color: var(--raix-muted, #6b6453);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.raix-crumbs a:hover,
.raix-crumbs a:focus {
	color: var(--raix-primary-strong, #b45309);
	border-bottom-color: currentColor;
}

.raix-crumbs [aria-current="page"] {
	color: var(--raix-text, #14110b);
	font-weight: 700;
}

/* On a phone the middle of a long trail is the least useful part. */
@media (max-width: 600px) {
	.raix-crumbs { font-size: 12.5px; }
	.raix-crumbs li:not(:first-child):not(:last-child):not(:nth-last-child(2)) { display: none; }
	.raix-crumbs li:nth-last-child(2)::before { content: "…/"; }
}

/* The builder's lists carry their own marker, a tick or an arrow, as part of
   the content. Left to WordPress they get a bullet AS WELL, and the tick and
   the words end up on separate lines because each sits in its own block. */
.raix-moved ul {
	list-style: none;
	padding-left: 0;
	margin: 0 0 14px;
}

.raix-moved ul li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 6px;
}

.raix-moved ul li > *,
.raix-moved ul li p {
	margin: 0;
}

/* A numbered list still needs its numbers. */
.raix-moved ol {
	margin: 0 0 14px;
	padding-left: 1.4em;
}

.raix-moved ol li {
	margin: 0 0 6px;
}