/**
 * Pabau University: homepage, course pages, header and footer adjustments.
 *
 * Ported from Thiago's mockups ("Pabau University Homepage" and "Pabau University Course Pages",
 * 10 Nov 2026) with the brand's Satoshi in place of the mockups' stand-in Hanken Grotesk.
 * Everything is scoped under .pu (page content) or body.pu-site (header/footer) so it wins over
 * Hello Elementor's reset.css, the Elementor kit (post-5.css) and the child theme's button rules.
 *
 * Breakpoints as in the mockups: < 980px one column, < 640px phone.
 */

@font-face {
	font-family: "Pabau DM Mono";
	src: url("../fonts/DMMono-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------------------------
 * Header and footer (every page while the University is on)
 * ------------------------------------------------------------------------ */

body.pu-site .pa-header .pa-btn {
	border-radius: 8px;
	font-weight: 500;
	font-size: 15px;
}

body.pu-site .pa-header .pa-brand__label {
	font-family: "Pabau DM Mono", "DM Mono", ui-monospace, monospace;
	font-size: 12px;
	letter-spacing: 1.6px;
	color: #4a5565;
}

body.pu-site .pa-header .pa-nav__link {
	font-size: 15px;
}

body.pu-site .pu-foot {
	border-top: 1px solid #e5e7eb;
	background: #ffffff;
	font-family: "Pabau Satoshi", "Satoshi", system-ui, sans-serif;
}

body.pu-site .pu-foot__in {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	max-width: calc(1200px + 2 * clamp(16px, 4vw, 40px));
	margin: 0 auto;
	padding: 28px clamp(16px, 4vw, 40px);
	font-size: 13.5px;
	line-height: 1.5;
	color: #4a5565;
}

body.pu-site .pu-foot nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

body.pu-site .pu-foot a {
	color: #4a5565;
	text-decoration: none;
}

body.pu-site .pu-foot a:hover {
	color: #037cd2;
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------------ */

.pu {
	--pb-blue: #037cd2;
	--pb-blue-hover: #0668b0;
	--pb-cyan-mark: #24bee1;
	--pb-navy: #121d36;
	--pb-text: #1e1b18;
	--pb-body: #4a5565;
	--pb-grey-02: #f3f4f6;
	--pb-grey-03: #e5e7eb;
	--pb-soft-blue: #edf6fb;
	--green: #0f9f6e;
	--font: "Pabau Satoshi", "Satoshi", system-ui, sans-serif;
	--mono: "Pabau DM Mono", "DM Mono", ui-monospace, Menlo, monospace;

	display: block;
	overflow-x: clip;
	background: #ffffff;
	color: var(--pb-text);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: left;
}

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

.pu :where(h1, h2, h3, h4, p, ul, ol, figure, form) {
	margin: 0;
	padding: 0;
}

.pu :where(ul, ol) {
	list-style: none;
}

.pu :where(img) {
	display: block;
	max-width: 100%;
	height: auto;
}

.pu :where(h1, h2, h3, h4) {
	color: inherit;
	font-family: var(--font);
}

body .pu a {
	color: var(--pb-blue);
}

.pu button {
	text-transform: none;
	letter-spacing: normal;
}

.pu a:focus-visible,
.pu button:focus-visible,
.pu summary:focus-visible,
.pu input:focus-visible {
	outline: 2px solid var(--pb-blue);
	outline-offset: 2px;
}

.pu .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.pu .in {
	max-width: calc(1200px + 2 * clamp(16px, 4vw, 40px));
	margin: 0 auto;
	padding-inline: clamp(16px, 4vw, 40px);
}

.pu .eb {
	font: 500 13px var(--mono);
	letter-spacing: 2.16px;
	text-transform: uppercase;
	color: var(--pb-blue);
}

/* Buttons — <a>, <button> and LearnDash's enrol button */

.pu .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: auto;
	margin: 0;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	box-shadow: none;
	font: 500 15px/1.4 var(--font);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

body .pu .btn.p,
body .pu .btn.p:focus {
	background: var(--pb-blue);
	color: #ffffff;
}

body .pu .btn.p:hover {
	background: var(--pb-blue-hover);
	color: #ffffff;
}

body .pu .btn.s,
body .pu .btn.s:focus {
	border-color: var(--pb-grey-03);
	background: #ffffff;
	color: var(--pb-text);
}

body .pu .btn.s:hover {
	background: var(--pb-grey-02);
	color: var(--pb-text);
}

.pu .btn.sm {
	padding: 6px 12px;
	border-radius: 7px;
	font-size: 13.5px;
}

.pu .pill {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 24px;
	background: var(--pb-grey-02);
	font: 500 12px var(--mono);
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--pb-body);
}

.pu .pill.blue {
	background: #e3f1fb;
	color: var(--pb-blue);
}

.pu .card {
	padding: 24px;
	border: 1px solid var(--pb-grey-03);
	border-radius: 16px;
	background: #ffffff;
}

.pu .okb {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 600 13.5px var(--font);
	color: var(--green);
}

.pu .okb::before,
.pu .gsd-ic,
.pu .cert-pts li::before {
	content: "";
	flex: none;
	border-radius: 50%;
	background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.pu .okb::before {
	width: 16px;
	height: 16px;
}

/* Role colours (covers, pills, swatches) */

.pu .t-Basics { background: linear-gradient(135deg, #121d36, #037cd2); }
.pu .t-Front { background: linear-gradient(135deg, #5aa8ff, #077dff); }
.pu .t-Patient { background: linear-gradient(135deg, #7fd8ea, #2badd4); }
.pu .t-Provider { background: linear-gradient(135deg, #24bee1, #086ab0); }
.pu .t-Operations { background: linear-gradient(135deg, #1b3a6b, #037cd2); }
.pu .t-Finance { background: linear-gradient(135deg, #121d36, #2b5c9e); }
.pu .t-Marketing { background: linear-gradient(135deg, #2badd4, #5aa8ff); }

/* ---------------------------------------------------------------------------
 * Homepage
 * ------------------------------------------------------------------------ */

.pu .hero {
	padding-block: 64px 72px;
	background: var(--pb-navy);
	color: #ffffff;
}

.pu .hero .in {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
	gap: 48px;
}

.pu .hero .eb {
	color: #5fb4f0;
}

.pu .hero h1 {
	margin: 14px 0 16px;
	font: 700 clamp(36px, 4.6vw, 56px)/1.1 var(--font);
	letter-spacing: -1px;
	color: #ffffff;
	text-wrap: balance;
}

/* Homepage hero background, from the Figma hero: navy with the "Bg pattern" grid (img/hero-grid-2.svg).
 * The file is the Figma export with the fade lifted: Figma's white goes from 0 to 0.29 opacity, which
 * hides the dots behind the headline, so ours goes from 0.12 to 0.2 (user request, 13 Nov 2026).
 * Figma flips the grid upside down so it fades in toward the bottom, starts it at
 * the left edge 1634px wide (on a 1440px frame) and lets it run 129px past the bottom. Wider
 * screens scale it up so it always spans the full width. The pseudo-element is flipped, so its
 * "top" is the bottom of the hero. */
.pu-home .hero {
	position: relative;
	background-color: var(--pb-navy);
}

.pu-home .hero::before {
	--pu-grid-w: max(1634px, 113.5vw);
	content: "";
	position: absolute;
	inset: 0;
	background: url("../img/hero-grid-2.svg") left 0 top calc(var(--pu-grid-w) * -0.07905) / var(--pu-grid-w) auto no-repeat;
	transform: scaleY(-1);
	pointer-events: none;
	opacity: 0.5; /* lines at half strength (Elena, 13 Nov 2026) */
}

.pu-home .hero > .in {
	position: relative;
}

/* "Get confident in Pabau": the Figma hero heading gradient, left to right across the words. */
.pu .hero h1 .grad {
	color: #3f9ffd;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.pu .hero h1 .grad {
		background-image: linear-gradient(90deg, #2badd4 0.95%, #38abfd 42.84%, #3f7afe 72.38%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
		color: transparent;
		-webkit-text-fill-color: transparent;
	}
}

/* Homepage hero card (pabau_university_hero_card), from the Figma hero frame 39555:4779. Every size
 * is Figma's px value times --u, which is 1px when the card is 680.5px wide (its Figma width), so
 * the card scales with its column like an image and keeps the design's proportions exactly. */
.pu .hcard {
	container-type: inline-size;
	position: relative;
	width: 100%;
	max-width: 680.5px;
}

.pu .hc,
.pu .hcard > .hc-cur {
	--u: calc(100cqw / 680.5);
}

.pu .hc {
	display: flex;
	align-items: flex-start;
	height: calc(413.67 * var(--u));
	overflow: hidden;
	border: calc(0.839 * var(--u)) solid #283149;
	border-radius: calc(16.782 * var(--u));
	background: #0e1628;
	box-shadow: calc(-9 * var(--u)) calc(12 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, 0.31);
	font-family: var(--font);
	text-align: left;
}

.pu .hc-cal {
	position: relative;
	flex: none;
	width: calc(402.762 * var(--u));
	height: calc(411.992 * var(--u));
	overflow: hidden;
	background: linear-gradient(180deg, #f7f9fc, #ecf0f7);
}

.pu .hc-pill {
	position: absolute;
	top: calc(17.62 * var(--u));
	height: calc(10.908 * var(--u));
	border-radius: calc(5.874 * var(--u));
	background: #dce1ea;
}

.pu .hc-pill.p1 { left: calc(17.62 * var(--u)); width: calc(105.725 * var(--u)); }
.pu .hc-pill.p2 { left: calc(131.74 * var(--u)); width: calc(59.575 * var(--u)); }
.pu .hc-pill.p3 { left: calc(340.67 * var(--u)); width: calc(45.311 * var(--u)); }

.pu .hc-t {
	position: absolute;
	left: calc(16.78 * var(--u));
	font: 500 calc(11.747 * var(--u)) / calc(15 * var(--u)) var(--mono);
	color: #6b7489;
	white-space: nowrap;
}

.pu .hc-t.t1 { top: calc(43.63 * var(--u)); }
.pu .hc-t.t2 { top: calc(90.515 * var(--u)); }
.pu .hc-t.t3 { top: calc(137.4 * var(--u)); }

.pu .hc-col {
	position: absolute;
	top: calc(41.12 * var(--u));
	width: calc(99.012 * var(--u));
	height: calc(353.256 * var(--u));
	border: calc(0.839 * var(--u)) solid #e3e8f0;
	border-radius: calc(5.035 * var(--u));
	background: #ffffff;
}

.pu .hc-col.c1 { left: calc(64.61 * var(--u)); }
.pu .hc-col.c2 { left: calc(176.21 * var(--u)); }
.pu .hc-col.c3 { left: calc(286.97 * var(--u)); }

.pu .hc-ev {
	position: absolute;
	left: calc(4.2 * var(--u));
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(3.356 * var(--u));
	width: calc(88.104 * var(--u));
	padding: calc(5.874 * var(--u));
	overflow: hidden;
	border-radius: calc(4.195 * var(--u));
	font: 700 calc(12 * var(--u)) / normal var(--font);
	color: #1e1b18;
}

.pu .hc-ev i {
	flex: none;
	display: block;
	height: calc(10.908 * var(--u));
	border-radius: calc(5.874 * var(--u));
}

.pu .hc-ev.ev-botox { top: calc(20.14 * var(--u)); height: calc(58.736 * var(--u)); background: #cfe3f7; line-height: calc(13.425 * var(--u)); }
.pu .hc-ev.ev-consult { top: calc(137.61 * var(--u)); height: calc(46.989 * var(--u)); background: #d7f0e3; }
.pu .hc-ev.ev-laser { top: calc(79.71 * var(--u)); height: calc(78.874 * var(--u)); background: #f9e1c8; line-height: calc(13.425 * var(--u)); }
.pu .hc-ev.ev-peel { top: calc(215.65 * var(--u)); height: calc(52.863 * var(--u)); background: #d7f0e3; }
.pu .hc-ev.ev-follow { top: calc(36.08 * var(--u)); height: calc(42.793 * var(--u)); background: #e6e0f8; }
.pu .hc-ev.ev-filler { top: calc(162.78 * var(--u)); height: calc(62.932 * var(--u)); background: #cfe3f7; }
.pu .hc-ev.ev-laser i { background: rgba(228, 192, 155, 0.61); }
.pu .hc-ev.ev-laser i:first-of-type { width: calc(59.575 * var(--u)); }
.pu .hc-ev.ev-laser i:last-of-type,
.pu .hc-ev.ev-filler i { width: calc(34.403 * var(--u)); }
.pu .hc-ev.ev-filler i { background: #b2d0ee; }

/* Cursor labels: Ricky sits in the third column, Mark over the Consultation event. */
.pu .hc-cur {
	position: absolute;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	gap: calc(var(--cu) * var(--u));
	pointer-events: none;
}

.pu .hc-cur.cur-ricky { --cu: 3.855; --cw: 15.419; --ch: 19.274; left: calc(23.91 * var(--u)); top: calc(252.57 * var(--u)); }
.pu .hcard > .hc-cur.cur-mark { --cu: 4.889; --cw: 19.556; --ch: 24.444; left: calc(93.25 * var(--u)); top: calc(218.835 * var(--u)); }

.pu .hc-cur .hc-ic {
	position: relative;
	flex: none;
	width: calc(var(--cw) * var(--u));
	height: calc(var(--ch) * var(--u));
}

/* The exported icon includes its shadow, so it is larger than its slot (Figma's -15% / -37.5% / -45%). */
.pu .hc-cur .hc-ic img {
	position: absolute;
	top: -15%;
	left: -37.5%;
	display: block;
	width: 175%;
	max-width: none;
	height: 160%;
}

.pu .hc-cur b {
	display: block;
	padding: calc(var(--cu) * 0.5 * var(--u)) calc(var(--cu) * var(--u));
	border: calc(var(--cu) * 0.25 * var(--u)) solid rgba(255, 255, 255, 0.6);
	border-radius: calc(var(--cu) * 0.5 * var(--u));
	font: 400 calc(var(--cu) * 2 * var(--u)) / calc(var(--cu) * 2 * var(--u)) Inter, var(--font);
	color: #ffffff;
	white-space: nowrap;
	filter: drop-shadow(0 calc(var(--cu) * 2.5 * var(--u)) calc(var(--cu) * 1.875 * var(--u)) rgba(0, 0, 0, 0.1)) drop-shadow(0 calc(var(--cu) * var(--u)) calc(var(--cu) * 0.75 * var(--u)) rgba(0, 0, 0, 0.1));
}

.pu .hc-cur.cur-ricky b { background: #ff492f; }
.pu .hc-cur.cur-mark b { background: #00a6e9; }

.pu .hc-side {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: flex-start;
	width: calc(285.29 * var(--u));
	height: 100%;
	padding: calc(31.885 * var(--u)) calc(20.138 * var(--u)) calc(20.138 * var(--u)) calc(19.299 * var(--u));
	overflow: hidden;
}

.pu .hc-side > b {
	font: 700 calc(16 * var(--u)) / calc(21.816 * var(--u)) var(--font);
	color: #ffffff;
	white-space: nowrap;
}

.pu .hc-side > span {
	margin-top: calc(16.782 * var(--u));
	font: 400 calc(15.104 * var(--u)) / calc(20.138 * var(--u)) var(--font);
	color: #c9d2e0;
	white-space: nowrap;
}

.pu .hc-prog {
	flex: none;
	width: 100%;
	height: calc(4.195 * var(--u));
	margin-top: calc(11.747 * var(--u));
	overflow: hidden;
	border-radius: calc(2.517 * var(--u));
	background: #2a3347;
}

.pu .hc-prog i {
	display: block;
	width: calc(43.633 * var(--u));
	height: 100%;
	border-radius: calc(2.517 * var(--u));
	background: #2bc0e4;
}

.pu .hc-side ol {
	display: flex;
	flex-direction: column;
	gap: calc(7.552 * var(--u));
	width: 100%;
	margin: calc(18.46 * var(--u)) 0 0;
	padding: 0;
	list-style: none;
}

.pu .hc-side li {
	display: flex;
	align-items: flex-start;
	gap: calc(14.264 * var(--u));
	margin: 0;
	font: 400 calc(15.943 * var(--u)) / calc(23.494 * var(--u)) var(--font);
	color: #d5dce8;
}

.pu .hc-side li.current {
	color: #ffffff;
}

.pu .hc-side li img {
	flex: none;
	display: block;
	width: calc(15.943 * var(--u));
	max-width: none;
	height: calc(23.494 * var(--u));
}

.pu .hero .sub {
	max-width: 46ch;
	margin: 0 0 26px;
	font-size: 19px;
	line-height: 1.5;
	color: #c9d3e3;
}

.pu .pu-search {
	position: relative;
	max-width: 520px;
}

.pu .search {
	display: flex;
	gap: 6px;
	padding: 6px;
	border-radius: 12px;
	background: #ffffff;
}

.pu .search input {
	flex: 1;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 10px 12px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font: 400 16px var(--font);
	color: var(--pb-text);
}

.pu .search input:focus {
	outline: none;
}

.pu .search:focus-within {
	box-shadow: 0 0 0 3px rgba(95, 180, 240, 0.45);
}

.pu .pu-search__results {
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	max-height: 340px;
	overflow-y: auto;
	padding: 6px;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 16px 40px rgba(10, 18, 38, 0.3);
}

.pu .pu-search__results a {
	display: grid;
	gap: 1px;
	padding: 9px 12px;
	border-radius: 8px;
	color: var(--pb-text);
	text-decoration: none;
}

.pu .pu-search__results [aria-selected="true"] a,
.pu .pu-search__results a:hover {
	background: var(--pb-soft-blue);
}

.pu .pu-search__results b {
	font-weight: 600;
	font-size: 15px;
}

.pu .pu-search__results small {
	font-size: 13px;
	color: var(--pb-body);
}

.pu .pu-search__empty {
	padding: 10px 12px;
	font-size: 14.5px;
	color: var(--pb-body);
}

.pu .roles {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
}

.pu .roles .l {
	margin-right: 4px;
	font-size: 14px;
	color: #9fb0c8;
}

body .pu .chip {
	padding: 7px 14px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	font: 500 14px var(--font);
	text-decoration: none;
	color: #ffffff;
}

body .pu .chip:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
}

/* Lesson frame */

.pu .player {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 200px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 14px;
	background: #0b1428;
}

.pu .screen {
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 8px;
	aspect-ratio: 16 / 10;
	padding: 12px;
	background: linear-gradient(180deg, #f7f9fc, #eef3f9);
}

.pu .app-top {
	display: flex;
	align-items: center;
	gap: 6px;
}

.pu .app-top i {
	display: block;
	height: 8px;
	border-radius: 4px;
	background: #d7e0ec;
}

.pu .cal {
	display: grid;
	grid-template-columns: 28px repeat(4, 1fr);
	gap: 4px;
}

.pu .cal .t {
	font: 400 8px var(--mono);
	color: #8a99ae;
}

.pu .col {
	position: relative;
	border: 1px solid #e3e9f1;
	border-radius: 4px;
	background: #ffffff;
}

.pu .ap {
	position: absolute;
	right: 3px;
	left: 3px;
	overflow: hidden;
	padding: 3px 4px;
	border-radius: 3px;
	font: 600 8px/1.2 var(--font);
	color: #0b3b66;
}

.pu .cam {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border: 3px solid #ffffff;
	border-radius: 50%;
	background: linear-gradient(160deg, #5aa8ff, #077dff);
	font: 700 16px var(--font);
	color: #ffffff;
}

.pu .cursor {
	position: absolute;
	top: 44%;
	left: 46%;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: rgba(3, 124, 210, 0.25);
	box-shadow: 0 0 0 6px rgba(3, 124, 210, 0.12);
}

.pu .side {
	display: grid;
	align-content: start;
	gap: 8px;
	padding: 14px 14px 16px;
	font-size: 12.5px;
	color: #c9d3e3;
}

.pu .side b {
	font-size: 13px;
	color: #ffffff;
}

.pu .side .bar {
	height: 4px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.12);
}

.pu .side .bar i {
	display: block;
	width: 18%;
	height: 100%;
	border-radius: 2px;
	background: var(--pb-cyan-mark);
}

.pu .side ol {
	display: grid;
	gap: 6px;
	margin-top: 2px;
}

.pu .side li {
	display: grid;
	grid-template-columns: 16px 1fr;
	gap: 6px;
	line-height: 1.3;
}

.pu .side li .d {
	width: 12px;
	height: 12px;
	margin-top: 1px;
	border: 1.5px solid #5d6e89;
	border-radius: 50%;
}

.pu .side li.done .d {
	border-color: var(--pb-cyan-mark);
	background: var(--pb-cyan-mark);
}

.pu .side li.now {
	color: #ffffff;
}

.pu .side li.now .d {
	border-color: #ffffff;
}

/* Numbers */

.pu .proof {
	border-bottom: 1px solid var(--pb-grey-03);
}

.pu .proof .in {
	padding-block: 22px;
}

.pu .nums {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 36px;
}

.pu .num b {
	display: block;
	font: 700 26px/1.1 var(--font);
	letter-spacing: -0.5px;
	font-variant-numeric: tabular-nums;
}

.pu .num span {
	font-size: 14px;
	color: var(--pb-body);
}

/* Signed-in band */

.pu .me {
	border-bottom: 1px solid var(--pb-grey-03);
	background: var(--pb-soft-blue);
}

.pu .me-in {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	align-items: center;
	gap: 32px;
	padding-block: 28px;
}

.pu .me-l h2 {
	margin: 6px 0 12px;
	font: 700 26px/1.2 var(--font);
	letter-spacing: -0.5px;
}

.pu .me-bar {
	height: 10px;
	overflow: hidden;
	border-radius: 5px;
	background: #ffffff;
	box-shadow: inset 0 0 0 1px var(--pb-grey-03);
}

.pu .me-bar i {
	display: block;
	height: 100%;
	border-radius: 5px;
	background: linear-gradient(90deg, #24bee1, #037cd2);
}

.pu .me-l p {
	margin-top: 10px;
	font-size: 15.5px;
	color: var(--pb-body);
}

.pu .me-rs {
	display: grid;
	gap: 10px;
}

.pu .me-r {
	display: grid;
	justify-items: start;
	gap: 4px;
	padding: 18px 20px;
	border: 1px solid var(--pb-grey-03);
	border-radius: 14px;
	background: #ffffff;
}

.pu .me-k {
	font: 500 11.5px var(--mono);
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--pb-body);
}

.pu .me-r b {
	font-size: 18px;
}

.pu .me-s {
	margin-bottom: 10px;
	font-size: 14.5px;
	color: var(--pb-body);
}

.pu .me-sg {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border: 1px solid var(--pb-grey-03);
	border-radius: 14px;
	background: #ffffff;
}

.pu .me-sg .sw {
	width: 40px;
	height: 40px;
	border-radius: 10px;
}

.pu .me-sg .tx {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.pu .me-sg b {
	font-size: 15.5px;
}

.pu .me-sg .mini {
	max-width: 180px;
	height: 4px;
	overflow: hidden;
	border-radius: 2px;
	background: var(--pb-grey-02);
}

.pu .me-sg .mini i {
	display: block;
	height: 100%;
	background: #2badd4;
}

.pu .me-s2 {
	font-size: 13px;
	color: var(--pb-body);
}

body .pu .me-sg .add,
body .pu .me-sg .add:focus,
body .pu .me-sg .add:hover {
	width: auto;
	margin: 0;
	padding: 4px 0;
	border: 0;
	background: none;
	font: 600 14px var(--font);
	white-space: nowrap;
	color: var(--pb-blue);
	cursor: pointer;
}

body .pu .me-sg .add:hover {
	text-decoration: underline;
}

/* Get started */

.pu .gsdone {
	border-bottom: 1px solid var(--pb-grey-03);
}

.pu .gsd-in {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-block: 16px;
}

.pu .gsd-ic {
	width: 28px;
	height: 28px;
	background-size: 22px;
}

.pu .gsd-t {
	display: grid;
	flex: 1;
	gap: 1px;
	min-width: 0;
}

.pu .gsd-t b {
	font-size: 16px;
}

.pu .gsd-t span {
	font-size: 14px;
	color: var(--pb-body);
}

body .pu .gsd-l {
	font: 500 14.5px var(--font);
	white-space: nowrap;
	text-decoration: none;
}

.pu .sec {
	padding-block: 64px;
	scroll-margin-top: calc(72px + var(--wp-admin--admin-bar--height, 0px));
}

.pu .sec.alt {
	background: var(--pb-soft-blue);
}

.pu .sec h2 {
	margin: 10px 0;
	font: 700 clamp(28px, 3.2vw, 40px)/1.15 var(--font);
	letter-spacing: -1px;
	text-wrap: balance;
}

.pu .sec .lead {
	max-width: 60ch;
	margin: 0 0 28px;
	font-size: 18px;
	color: var(--pb-body);
}

.pu .gs {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	align-items: stretch;
	gap: 24px;
}

.pu .gs .card.lead {
	display: grid;
	align-content: start;
	gap: 14px;
	/* The card shares the intro paragraph's "lead" class; undo its width, margin, size and colour. */
	max-width: none;
	margin: 0;
	font-size: 16px;
	color: var(--pb-text);
}

.pu .gs .meta span + span::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin: 0 12px 0 0;
	border-radius: 50%;
	background: #9fb0c8;
	vertical-align: middle;
}

.pu .gs .meta {
	gap: 8px 12px;
}

.pu .gscov {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	aspect-ratio: 16 / 7;
	overflow: hidden;
	border-radius: 12px;
	background: linear-gradient(135deg, #121d36, #037cd2);
}

.pu .gscov img {
	width: 88%;
	border-radius: 8px 8px 0 0;
	box-shadow: 0 -2px 18px rgba(0, 0, 0, 0.3);
}

.pu .gs h3 {
	font: 700 30px/1.15 var(--font);
	letter-spacing: -0.5px;
}

.pu .meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	font-size: 14.5px;
	color: var(--pb-body);
}

.pu .gs-note {
	color: var(--pb-body);
}

/* The course's lessons, in setup order: numbers joined by a line, each row opens its lesson. */
.pu .gs-list {
	display: flex;
	flex-direction: column;
	padding: 14px 24px 20px;
}

.pu .steps {
	display: grid;
	flex: 1;
	grid-auto-rows: 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pu .steps li {
	position: relative;
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) 10px;
	align-items: center;
	gap: 16px;
	min-height: 62px;
	margin-inline: -12px;
	padding: 10px 16px 10px 12px;
	border-radius: 12px;
	transition: background-color 0.15s ease;
}

/* Each row draws its part of the line, so rows can differ in height; the number covers it. */
.pu .steps li::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 28px;
	width: 2px;
	background: var(--pb-grey-03);
}

.pu .steps li:first-child::before {
	top: 50%;
}

.pu .steps li:last-child::before {
	bottom: 50%;
}

.pu .steps li:only-child::before {
	display: none;
}

.pu .steps li.done::before {
	background: #a7e0c9;
}

.pu .steps .n {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--pb-soft-blue);
	font: 500 12.5px var(--mono);
	color: var(--pb-blue);
}

body .pu .steps a {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--pb-text);
	text-decoration: none;
}

body .pu .steps a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
}

body .pu .steps a:focus-visible {
	outline: none;
}

body .pu .steps a:focus-visible::after {
	outline: 2px solid var(--pb-blue);
	outline-offset: -2px;
}

.pu .steps .go {
	width: 8px;
	height: 8px;
	border-top: 2px solid #b6c2d2;
	border-right: 2px solid #b6c2d2;
	transform: rotate(45deg);
	transition: border-color 0.15s ease, translate 0.15s ease;
}

.pu .steps li:hover {
	background: #f5f9fc;
}

body .pu .steps li:hover a {
	color: var(--pb-blue);
}

.pu .steps li:hover .go {
	border-color: var(--pb-blue);
	translate: 2px 0;
}

.pu .steps li.done .n {
	background: var(--green);
	color: transparent;
}

.pu .steps li.done .n::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 11px;
	border-right: 2px solid #ffffff;
	border-bottom: 2px solid #ffffff;
	transform: translate(-50%, -62%) rotate(45deg);
}

body .pu .steps li.done a {
	color: var(--pb-body);
}

.pu .steps li.next {
	background: #f1f8fd;
}

.pu .steps li.next .n {
	background: var(--pb-blue);
	box-shadow: 0 0 0 4px #d6eaf8;
	color: #ffffff;
}

body .pu .steps li.next a {
	font-weight: 600;
	color: var(--pb-blue);
}

body .pu .gs-list .more {
	align-self: flex-start;
	margin-top: 12px;
	font-weight: 500;
}

body .pu .gs-list .more::after {
	content: " →";
}

@media (max-width: 979.98px) {
	/* Stacked: the list no longer has to match the left card's height. */
	.pu .steps {
		grid-auto-rows: auto;
	}

	.pu .steps li {
		gap: 12px;
	}
}

body .pu .more {
	display: inline-block;
	margin-top: 10px;
	font-size: 14px;
	text-decoration: none;
}

/* Roles */

.pu .tracks {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.pu .trk {
	position: relative;
	display: grid;
	align-content: start;
	gap: 10px;
	overflow: hidden;
	padding-top: 0;
	transition: border-color 0.15s;
}

.pu .trk:hover {
	border-color: var(--pb-blue);
}

.pu .tcov {
	position: relative;
	aspect-ratio: 16 / 7;
	overflow: hidden;
	margin: 0 -24px 6px;
}

.pu .tcov img,
.pu .tcov .ph {
	position: absolute;
	display: block;
	width: 78%;
	border-radius: 7px;
	box-shadow: 0 6px 22px rgba(18, 29, 54, 0.35);
}

.pu .tcov .a {
	z-index: 2;
	bottom: -6%;
	left: 8%;
	transform: rotate(-4deg);
}

.pu .tcov .b {
	top: 16%;
	right: -6%;
	opacity: 0.92;
	transform: rotate(5deg);
}

.pu .tcov .ph {
	aspect-ratio: 3 / 1;
	border: 1px dashed rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.12);
	box-shadow: none;
}

.pu .trk h3 {
	font: 700 20px/1.2 var(--font);
}

body .pu .trk h3 a {
	color: var(--pb-text);
	text-decoration: none;
}

/* The whole card filters the course list; its own buttons sit above the link. */
.pu .trk h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.pu .trk p {
	font-size: 15px;
	color: var(--pb-body);
}

.pu .trk .f {
	margin-top: 4px;
	padding-top: 10px;
	border-top: 1px solid var(--pb-grey-03);
	font: 500 12.5px var(--mono);
	color: var(--pb-body);
}

.pu .tp {
	position: relative;
	z-index: 2;
	display: grid;
	gap: 10px;
	margin-top: 2px;
	padding-top: 12px;
	border-top: 1px solid var(--pb-grey-03);
}

.pu .tp.done {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.pu .tp .btn {
	justify-self: start;
}

.pu .tbar {
	height: 8px;
	overflow: hidden;
	border-radius: 4px;
	background: var(--pb-grey-02);
}

.pu .tbar i {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #24bee1, #037cd2);
}

.pu .tpr {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 13.5px;
	color: var(--pb-body);
}

.pu .pu-addrole {
	display: inline-flex;
	margin: 0;
}

/* Pabau Certified */

.pu .cert {
	padding-block: 64px;
	background: var(--pb-navy);
	color: #ffffff;
}

.pu .cert-g {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
	gap: 48px;
}

.pu .cert .eb {
	color: #7cc8f5;
}

.pu .cert h2 {
	margin: 10px 0 12px;
	font: 700 clamp(28px, 3.2vw, 40px)/1.15 var(--font);
	letter-spacing: -1px;
	color: #ffffff;
}

.pu .cert .lead {
	max-width: 56ch;
	margin: 0 0 22px;
	font-size: 18px;
	color: #c9d3e3;
}

.pu .cert-pts {
	display: grid;
	gap: 12px;
	max-width: 58ch;
	margin: 0 0 26px;
	font-size: 15.5px;
	color: #c9d3e3;
}

.pu .cert-pts li {
	position: relative;
	padding-left: 26px;
}

.pu .cert-pts li::before {
	position: absolute;
	top: 4px;
	left: 0;
	width: 16px;
	height: 16px;
	background-size: 14px;
}

.pu .cert-pts b {
	color: #ffffff;
}

.pu .cert-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.pu .badge {
	position: relative;
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 2px;
	width: 84px;
	height: 94px;
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
	text-align: center;
	color: #ffffff;
}

.pu .badge .bm {
	display: block;
	width: 26px;
	height: 24px;
	color: #ffffff;
}

.pu .badge .bm svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.pu .badge .bt {
	font: 600 8.5px var(--mono);
	letter-spacing: 1px;
	text-transform: uppercase;
	opacity: 0.85;
}

.pu .badge .br {
	padding: 0 10px;
	font: 700 10.5px/1.1 var(--font);
}

.pu .badge.big {
	flex: none;
	width: 108px;
	height: 122px;
}

.pu .badge.big .bm {
	width: 34px;
	height: 31px;
}

.pu .badge.big .bt {
	font-size: 9.5px;
}

.pu .badge.big .br {
	font-size: 13px;
}

.pu .badge.small {
	flex: none;
	width: 52px;
	height: 58px;
}

.pu .badge.small .bm {
	width: 22px;
	height: 20px;
}

/* At this size the badge shows the mark only (profile list); the role is in the text beside it. */
.pu .badge.small .bt,
.pu .badge.small .br {
	display: none;
}

.pu .b-front { background: linear-gradient(160deg, #5aa8ff, #077dff); }
.pu .b-patient { background: linear-gradient(160deg, #7fd8ea, #2badd4); }
.pu .b-provider { background: linear-gradient(160deg, #24bee1, #086ab0); }
.pu .b-operations { background: linear-gradient(160deg, #3a6fb8, #037cd2); }
.pu .b-finance { background: linear-gradient(160deg, #2b5c9e, #121d36); box-shadow: inset 0 0 0 2px #2b5c9e; }
.pu .b-marketing { background: linear-gradient(160deg, #2badd4, #5aa8ff); }
.pu .b-practice { background: linear-gradient(160deg, #e4eaf1, #9aa8b8); }
.pu .b-practice .bm { color: #121d36; }
.pu .b-gold { background: linear-gradient(160deg, #ffe08a, #e0a526 55%, #b87a0a); }
.pu .b-gold .bt,
.pu .b-gold .br,
.pu .b-gold .bm { color: #3d2a00; }

.pu .gold-wrap {
	display: flex;
	flex-basis: 100%;
	align-items: center;
	gap: 16px;
	margin-top: 4px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.pu .gold-wrap .badge {
	width: 96px;
	height: 108px;
}

.pu .gold-wrap small {
	display: block;
	max-width: 320px;
	font-size: 14px;
	line-height: 1.4;
	color: #c9d3e3;
}

.pu .gold-wrap b {
	display: block;
	margin-bottom: 2px;
	font-size: 17px;
	color: #ffd66b;
}

.pu .credential {
	display: grid;
	gap: 16px;
	padding: 22px;
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
	color: var(--pb-text);
}

.pu .cr-top {
	display: flex;
	align-items: center;
	gap: 18px;
}

.pu .cr-meta {
	display: grid;
	gap: 3px;
}

.pu .cr-meta .eb {
	font-size: 11px;
	color: var(--pb-blue);
}

.pu .cr-meta b {
	font-size: 19px;
	letter-spacing: -0.2px;
}

.pu .cr-meta span:not(.eb) {
	font-size: 14px;
	color: var(--pb-body);
}

.pu .cr-skills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pu .cr-skills span {
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--pb-grey-02);
	font-size: 12.5px;
	color: var(--pb-text);
}

.pu .cr-acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding-top: 14px;
	border-top: 1px solid var(--pb-grey-03);
}

.pu .btn.li {
	padding: 8px 14px;
	background: #0a66c2;
	font-size: 14px;
	color: #ffffff;
	cursor: pointer;
}

.pu .btn.li svg {
	width: 16px;
	height: 16px;
	fill: #ffffff;
}

.pu .cr-acts .btn.s {
	cursor: pointer;
}

.pu .vfy {
	margin-left: auto;
	font: 500 11.5px var(--mono);
	color: var(--pb-body);
}

.pu .practice {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 14px;
	padding: 14px 16px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.06);
}

.pu .practice b {
	display: block;
	font-size: 15.5px;
}

.pu .practice span {
	display: block;
	font-size: 13.5px;
	color: #c9d3e3;
}

.pu .practice .pbar {
	width: 220px;
	max-width: 100%;
	height: 5px;
	overflow: hidden;
	margin-top: 7px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.15);
}

.pu .practice .pbar i {
	display: block;
	height: 100%;
	background: #c9d3e3;
}

/* All courses */

.pu .tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

body .pu .tabs button {
	width: auto;
	margin: 0;
	padding: 8px 14px;
	border: 1px solid var(--pb-grey-03);
	border-radius: 999px;
	background: #ffffff;
	font: 500 14.5px var(--font);
	color: var(--pb-text);
	cursor: pointer;
}

body .pu .tabs button:hover {
	border-color: var(--pb-blue);
	background: #ffffff;
	color: var(--pb-text);
}

body .pu .tabs button[aria-pressed="true"] {
	border-color: var(--pb-navy);
	background: var(--pb-navy);
	color: #ffffff;
}

.pu .tabs button span {
	margin-left: 4px;
	font: 500 12px var(--mono);
	opacity: 0.7;
}

.pu .grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.pu .cc {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 20px 20px;
	transition: border-color 0.15s;
}

.pu .cc[hidden] {
	display: none;
}

.pu .cc:hover {
	border-color: var(--pb-blue);
}

.pu .cov {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	aspect-ratio: 16 / 7;
	overflow: hidden;
	margin: 0 -20px 6px;
	border-radius: 15px 15px 0 0;
}

.pu .cov img {
	width: 86%;
	border-radius: 8px 8px 0 0;
	box-shadow: 0 -2px 18px rgba(18, 29, 54, 0.28);
	object-fit: cover;
	object-position: top;
}

.pu .cov .lbl {
	position: absolute;
	top: 12px;
	left: 14px;
	font: 500 11px var(--mono);
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
}

.pu .cov.empty::after {
	content: "";
	width: 86%;
	height: 62%;
	border: 1px dashed rgba(255, 255, 255, 0.35);
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
	background: rgba(255, 255, 255, 0.1);
}

.pu .donec {
	position: absolute;
	z-index: 3;
	top: 10px;
	right: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--green);
	font: 600 12px var(--font);
	color: #ffffff;
}

.pu .cc .top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.pu .cc h4 {
	font: 700 18px/1.25 var(--font);
}

body .pu .cc h4 a {
	color: var(--pb-text);
	text-decoration: none;
}

.pu .cc h4 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 16px;
}

.pu .cc p {
	font-size: 14.5px;
	color: var(--pb-body);
}

.pu .cbar {
	height: 6px;
	overflow: hidden;
	margin-top: 4px;
	border-radius: 3px;
	background: var(--pb-grey-02);
}

.pu .cbar i {
	display: block;
	height: 100%;
	background: var(--pb-blue);
}

.pu .cc .foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid var(--pb-grey-02);
	font-size: 13.5px;
	color: var(--pb-body);
}

.pu .acts {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
}

body .pu .acts .go {
	font-weight: 500;
	text-decoration: none;
}

body .pu .pvb,
body .pu .pvb:focus {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: auto;
	margin: 0;
	padding: 5px 10px;
	border: 1px solid var(--pb-grey-03);
	border-radius: 8px;
	background: #ffffff;
	font: 500 13.5px var(--font);
	color: var(--pb-text);
	cursor: pointer;
}

body .pu .pvb:hover {
	border-color: var(--pb-blue);
	background: #ffffff;
	color: var(--pb-blue);
}

.pu .pvb svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
}

/* Course preview */

.pu dialog.pv {
	width: min(640px, calc(100vw - 32px));
	max-height: min(760px, calc(100vh - 48px));
	padding: 0;
	border: 0;
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(18, 29, 54, 0.3);
	color: var(--pb-text);
}

.pu dialog.pv::backdrop {
	background: rgba(18, 29, 54, 0.55);
}

.pu .pv-in {
	display: flex;
	flex-direction: column;
	max-height: inherit;
}

.pu .pv-top {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 24px 6px;
}

.pu .pv-trk {
	font: 500 11.5px var(--mono);
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--pb-blue);
}

.pu .pv-top h3 {
	margin: 6px 0 8px;
	font: 700 24px/1.2 var(--font);
	letter-spacing: -0.3px;
}

.pu .pv-m {
	font-size: 14px;
	color: var(--pb-body);
}

body .pu .pv-x,
body .pu .pv-x:focus,
body .pu .pv-x:hover {
	flex: none;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--pb-grey-03);
	border-radius: 8px;
	background: #ffffff;
	color: var(--pb-body);
	cursor: pointer;
}

.pu .pv-d {
	margin: 6px 24px 14px;
	color: var(--pb-body);
}

.pu .pv-body {
	display: grid;
	gap: 12px;
	overflow: auto;
	padding: 0 24px 8px;
}

.pu .pv-g {
	overflow: hidden;
	border: 1px solid var(--pb-grey-03);
	border-radius: 12px;
}

.pu .pv-gh {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	background: #fafbfc;
	font-size: 14px;
}

.pu .pv-gh .n {
	font: 500 12px var(--mono);
	color: var(--pb-blue);
}

.pu .pv-gh span:last-child {
	font-size: 13px;
	color: var(--pb-body);
}

.pu .pv-g li {
	display: grid;
	grid-template-columns: 20px 22px 1fr;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-top: 1px solid var(--pb-grey-02);
	font-size: 14.5px;
}

.pu .pv-g li .i {
	font: 500 12px var(--mono);
	color: var(--pb-body);
}

.pu .pv-g li .pl,
.pu .mod li .pi {
	display: grid;
	place-items: center;
	border: 1.5px solid #9fb0c8;
	border-radius: 50%;
}

.pu .pv-g li .pl {
	width: 18px;
	height: 18px;
}

.pu .pv-g li .pl::before {
	content: "";
	margin-left: 2px;
	border-top: 3.5px solid transparent;
	border-bottom: 3.5px solid transparent;
	border-left: 5px solid #6b7a90;
}

.pu .pv-g li.dn {
	color: var(--pb-body);
}

.pu .pv-g li.dn .pl,
.pu .mod li.done .pi {
	border-color: var(--green);
	background: var(--green);
}

.pu .pv-g li.dn .pl::before,
.pu .mod li.done .pi::before {
	width: 4px;
	height: 8px;
	margin: -2px 0 0;
	border: 0;
	border-right: 2px solid #ffffff;
	border-bottom: 2px solid #ffffff;
	transform: rotate(45deg);
}

.pu .pv-f {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 24px 20px;
	border-top: 1px solid var(--pb-grey-03);
	font-size: 13.5px;
	color: var(--pb-body);
}

/* Who makes the lessons */

.pu .people {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.pu .prof {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
}

.pu .prof .ph {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: linear-gradient(160deg, #edf6fb, #cfe6f8);
}

.pu .prof .ph img {
	width: auto;
	height: 96%;
}

.pu .prof .pb {
	display: grid;
	gap: 6px;
	padding: 18px 20px 20px;
}

.pu .prof b {
	font-size: 18px;
}

.pu .prof .role {
	font: 500 12px var(--mono);
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--pb-blue);
}

.pu .prof p {
	margin: 4px 0 2px;
	font-size: 15px;
	color: var(--pb-body);
}

.pu .made {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
}

.pu .made .mk {
	margin-right: 2px;
	font-size: 12.5px;
	color: var(--pb-body);
}

body .pu .chipc {
	padding: 3px 10px;
	border: 1px solid var(--pb-grey-03);
	border-radius: 999px;
	background: #ffffff;
	font-size: 12.5px;
	text-decoration: none;
	color: var(--pb-text);
}

body .pu a.chipc:hover {
	border-color: var(--pb-blue);
	color: var(--pb-blue);
}

/* Questions + closing banner */

.pu .faq {
	display: grid;
	max-width: 820px;
}

.pu .faq details {
	padding: 16px 0;
	border-top: 1px solid var(--pb-grey-03);
}

.pu .faq details:last-child {
	border-bottom: 1px solid var(--pb-grey-03);
}

.pu .faq summary {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 17px;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.pu .faq summary::-webkit-details-marker {
	display: none;
}

.pu .faq summary::after {
	content: "+";
	font-weight: 500;
	color: var(--pb-blue);
}

.pu .faq details[open] summary::after {
	content: "–";
}

.pu .faq p {
	max-width: 68ch;
	margin-top: 10px;
	color: var(--pb-body);
}

.pu .cta {
	padding-block: 56px;
	background: linear-gradient(135deg, #24bee1 0%, #086ab0 100%);
	text-align: center;
	color: #ffffff;
}

.pu .cta h2 {
	margin: 0 0 20px;
	font: 500 clamp(26px, 3vw, 36px)/1.3 var(--font);
	letter-spacing: -0.5px;
	color: #ffffff;
}

body .pu .cta .btn,
body .pu .cta .btn:focus,
body .pu .cta .btn:hover {
	background: #ffffff;
	color: var(--pb-navy);
}

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

.pu .crumb {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-block: 18px 0;
	font-size: 14px;
	color: var(--pb-body);
}

body .pu .crumb a {
	color: var(--pb-body);
	text-decoration: none;
}

body .pu .crumb a:hover {
	color: var(--pb-blue);
}

.pu .cbody {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	align-items: start;
	gap: 40px;
	padding-block: 20px 56px;
}

.pu .cmain {
	display: grid;
	gap: 40px;
	min-width: 0;
}

.pu .chead h1 {
	margin: 14px 0 12px;
	font: 700 clamp(34px, 4vw, 48px)/1.1 var(--font);
	letter-spacing: -1px;
}

.pu .pill.track {
	color: #ffffff;
}

.pu .chead .desc {
	max-width: 58ch;
	margin: 0 0 18px;
	font-size: 18px;
	color: var(--pb-body);
}

.pu .facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	font-size: 15px;
	color: var(--pb-body);
}

.pu .facts b {
	font-weight: 600;
	color: var(--pb-text);
}

.pu .cmain h2 {
	margin: 0 0 14px;
	font: 700 26px/1.2 var(--font);
	letter-spacing: -0.5px;
}

.pu .ticks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 24px;
	font-size: 15.5px;
}

.pu .ticks li {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 8px;
}

.pu .ticks li::before {
	content: "";
	width: 16px;
	height: 16px;
	margin-top: 3px;
	border-radius: 50%;
	background: #e3f1fb;
	box-shadow: inset 0 0 0 4px #e3f1fb, inset 0 0 0 10px var(--pb-blue);
}

.pu .ohead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.pu .ohead h2 {
	margin: 0;
}

.pu .ohead span {
	font-size: 14px;
	color: var(--pb-body);
}

.pu .outline {
	display: grid;
	gap: 12px;
}

.pu .mod {
	overflow: hidden;
	border: 1px solid var(--pb-grey-03);
	border-radius: 14px;
}

/* Course sections are always open (13 Nov 2026). */
.pu .mod .sum {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	background: #fafbfc;
}

.pu .mod .sum .n {
	font: 500 12px var(--mono);
	color: var(--pb-blue);
}

.pu .mod .sum .t {
	font-size: 16.5px;
	font-weight: 700;
}

.pu .mod .sum .m {
	font-size: 13.5px;
	color: var(--pb-body);
}

.pu .mod li {
	display: grid;
	grid-template-columns: 28px 1fr;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	border-top: 1px solid var(--pb-grey-02);
	font-size: 15px;
}

.pu .mod li .pi {
	width: 22px;
	height: 22px;
}

.pu .mod li .pi::before {
	content: "";
	margin-left: 2px;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 6px solid #6b7a90;
}

body .pu .mod li a {
	color: var(--pb-text);
	text-decoration: none;
}

body .pu .mod li a:hover {
	color: var(--pb-blue);
}

body .pu .mod li.done a {
	color: var(--pb-body);
}

.pu .mod li.next {
	background: #f1f8fd;
	box-shadow: inset 3px 0 0 var(--pb-blue);
}

.pu .mod li.next .pi {
	border-color: var(--pb-blue);
	background: var(--pb-blue);
}

.pu .mod li.next .pi::before {
	border-left-color: #ffffff;
}

body .pu .mod li.next a {
	font-weight: 600;
	color: var(--pb-blue);
}

.pu .mod .sub {
	padding: 0 18px 12px;
	background: #fafbfc;
	font-size: 13.5px;
	color: var(--pb-body);
}

.pu .about {
	display: grid;
	gap: 12px;
	max-width: 66ch;
	font-size: 16.5px;
	color: var(--pb-body);
}

.pu .who {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}

.pu .who span {
	padding: 6px 14px;
	border: 1px solid var(--pb-grey-03);
	border-radius: 999px;
	font: 500 14px var(--font);
}

.pu .who-text {
	max-width: 66ch;
	color: var(--pb-body);
}

.pu .next {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

body .pu .nc {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--pb-grey-03);
	border-radius: 16px;
	text-decoration: none;
	color: inherit;
}

body .pu .nc:hover {
	border-color: var(--pb-blue);
	color: inherit;
}

.pu .nc .cv {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	aspect-ratio: 16 / 7;
	overflow: hidden;
}

.pu .nc .cv img {
	width: 84%;
	border-radius: 8px 8px 0 0;
	box-shadow: 0 -2px 18px rgba(18, 29, 54, 0.28);
}

.pu .nc .cv.empty::after {
	content: "";
	width: 84%;
	height: 60%;
	border: 1px dashed rgba(255, 255, 255, 0.4);
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
	background: rgba(255, 255, 255, 0.12);
}

.pu .nc .b {
	display: grid;
	gap: 6px;
	padding: 16px 18px;
}

.pu .nc h4 {
	font: 700 17px/1.25 var(--font);
}

.pu .nc p {
	font-size: 14px;
	color: var(--pb-body);
}

.pu .nc .f {
	font-size: 13px;
	color: var(--pb-body);
}

/* Progress / enrol card */

.pu .cside {
	position: sticky;
	top: calc(88px + var(--wp-admin--admin-bar--height, 0px));
}

.pu .enroll {
	overflow: hidden;
	border: 1px solid var(--pb-grey-03);
	border-radius: 16px;
	background: #ffffff;
}

.pu .ecov {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	aspect-ratio: 16 / 9;
}

.pu .ecov img {
	width: 86%;
	border-radius: 8px 8px 0 0;
	box-shadow: 0 -2px 18px rgba(18, 29, 54, 0.28);
}

.pu .ecov .lbl {
	position: absolute;
	top: 12px;
	left: 14px;
	font: 500 11px var(--mono);
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #ffffff;
}

.pu .ebody {
	display: grid;
	gap: 12px;
	padding: 20px;
}

.pu .ebody .btn,
.pu .enrol-form .btn {
	width: 100%;
	white-space: normal;
	text-align: center;
}

.pu .enrol-form form {
	margin: 0;
}

.pu .ebody .note {
	margin: 0;
	font-size: 13px;
	color: var(--pb-body);
}

.pu .prog {
	display: grid;
	gap: 6px;
	font-size: 14px;
	color: var(--pb-body);
}

.pu .prog .pl {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 13.5px;
}

.pu .prog .pl b {
	font-weight: 600;
	color: var(--pb-text);
}

.pu .prog .pl em {
	font-style: normal;
	color: var(--pb-body);
}

.pu .bar {
	height: 6px;
	overflow: hidden;
	border-radius: 3px;
	background: var(--pb-grey-02);
}

.pu .bar i {
	display: block;
	height: 100%;
	background: var(--pb-blue);
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------ */

@media (max-width: 979.98px) {
	.pu .hero .in,
	.pu .gs,
	.pu .me-in,
	.pu .cert-g,
	.pu .cbody {
		grid-template-columns: minmax(0, 1fr);
	}

	.pu .tracks,
	.pu .grid,
	.pu .next {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pu .ticks {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Course page: the progress card moves up, under the title and facts. */
	.pu .cbody {
		gap: 40px;
	}

	.pu .cmain {
		display: contents;
	}

	.pu .chead {
		order: -2;
	}

	.pu .cside {
		position: static;
		order: -1;
	}
}

@media (max-width: 639.98px) {
	.pu .grid,
	.pu .tracks,
	.pu .people,
	.pu .next {
		grid-template-columns: minmax(0, 1fr);
	}

	.pu .player {
		grid-template-columns: minmax(0, 1fr);
	}

	.pu .side {
		display: none;
	}

	.pu .sec {
		padding-block: 44px;
	}

	.pu .hero {
		padding-block: 44px 52px;
	}

	.pu .hero .sub {
		font-size: 17px;
	}

	.pu .cr-top {
		flex-direction: column;
		align-items: flex-start;
	}

	.pu .vfy {
		margin-left: 0;
	}

	.pu .me-sg {
		grid-template-columns: 40px minmax(0, 1fr);
	}

	.pu .me-sg .pu-addrole {
		grid-column: 2;
	}

	.pu .mod .sum {
		grid-template-columns: auto 1fr;
	}

	.pu .mod .sum .m {
		display: none;
	}

	.pu .cc .foot {
		flex-wrap: wrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pu .trk,
	.pu .cc {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Shared bits for the Roles, role, sign-up, welcome, verify and profile pages
 * ------------------------------------------------------------------------ */

body .pu .lnk {
	font: 600 14.5px var(--font);
	color: var(--pb-blue);
	text-decoration: none;
}

body .pu .lnk:hover {
	text-decoration: underline;
}

.pu .hint2 {
	font-size: 13.5px;
	color: var(--pb-body);
}

body .pu .linkish,
body .pu .linkish:hover,
body .pu .linkish:focus {
	display: inline;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font: inherit;
	color: var(--pb-blue);
	text-decoration: underline;
	cursor: pointer;
}

.pu .mono {
	font-family: var(--mono);
	letter-spacing: 0.3px;
}

.pu .pill.grey {
	background: var(--pb-grey-02);
	color: var(--pb-body);
}

.pu .pill.soon {
	background: #fff4dc;
	color: #8a5a00;
}

.pu .cc.dim {
	border-style: dashed;
	background: #fbfcfd;
}

.pu .cc.dim .cov {
	opacity: 0.55;
}

.pu .cc.dim h4 {
	color: var(--pb-body);
}

.pu .cc.dim .foot {
	color: var(--pb-body);
}

.pu .rc.off {
	border-style: dashed;
	color: var(--pb-body);
}

.pu .rc .soon {
	font: 500 11px var(--mono);
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: #8a5a00;
}

/* Page head (Roles, Verify) */

.pu .phead {
	display: grid;
	gap: 12px;
	max-width: 760px;
	padding-block: 28px 48px;
}

.pu .phead h1 {
	font: 700 clamp(34px, 4.4vw, 52px)/1.08 var(--font);
	letter-spacing: -1.2px;
	text-wrap: balance;
}

.pu .phead .lead {
	max-width: 60ch;
	font-size: 18px;
	color: var(--pb-body);
}

/* "How certificates work" (Roles and Verify pages) */

.pu .role-cert {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	align-items: center;
	gap: 48px;
}

.pu .role-cert h2 {
	margin: 10px 0 18px;
}

.pu .howto {
	display: grid;
	gap: 14px;
	max-width: 58ch;
	counter-reset: howto;
}

.pu .howto li {
	position: relative;
	padding-left: 40px;
	font-size: 16px;
	color: var(--pb-body);
	counter-increment: howto;
}

.pu .howto li::before {
	content: counter(howto);
	position: absolute;
	top: -2px;
	left: 0;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #e3f1fb;
	font: 600 14px var(--font);
	color: var(--pb-blue);
}

.pu .howto b {
	color: var(--pb-text);
}

.pu .role-cert .cert-badges {
	justify-content: center;
}

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

.pu .rhead {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	align-items: start;
	gap: 40px;
	padding-block: 24px 48px;
}

.pu .rhead h1 {
	margin: 14px 0 12px;
	font: 700 clamp(34px, 4vw, 48px)/1.1 var(--font);
	letter-spacing: -1px;
}

.pu .rhead .desc {
	max-width: 58ch;
	margin: 0 0 18px;
	font-size: 18px;
	color: var(--pb-body);
}

.pu .rcard {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 20px;
	border: 1px solid var(--pb-grey-03);
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 0 8px 30px rgba(18, 29, 54, 0.06);
}

.pu .rcard__body {
	display: grid;
	flex: 1;
	gap: 8px;
	min-width: 0;
}

.pu .rcard__body > b {
	font-size: 17px;
	line-height: 1.3;
}

.pu .rcard__body .btn,
.pu .rcard__body .pu-addrole {
	justify-self: start;
}

/* ---------------------------------------------------------------------------
 * Sign-up (mockup "Sign-up" tab)
 * ------------------------------------------------------------------------ */

.pu .su {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 440px;
	align-items: start;
	gap: 48px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 56px clamp(16px, 4vw, 48px) 64px;
}

.pu .su-l h1 {
	margin: 12px 0 14px;
	font: 700 clamp(32px, 3.6vw, 44px)/1.12 var(--font);
	letter-spacing: -1px;
	text-wrap: balance;
}

.pu .su-l p {
	max-width: 46ch;
	margin: 0 0 18px;
	font-size: 18px;
	color: var(--pb-body);
}

.pu .su-pts {
	display: grid;
	gap: 8px;
	padding-left: 18px;
	list-style: disc;
	color: var(--pb-body);
}

.pu .su-l .su-course {
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--pb-soft-blue);
	font-size: 15px;
	color: var(--pb-text);
}

.pu .su-card {
	display: grid;
	gap: 14px;
	padding: 24px;
	border: 1px solid var(--pb-grey-03);
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 0 8px 30px rgba(18, 29, 54, 0.06);
}

.pu .su-card label,
.pu .pu-settings .field {
	display: grid;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--pb-text);
}

body .pu .su-card input:not([type="checkbox"]),
body .pu .su-card select,
body .pu .pu-settings select,
body .pu .vform input {
	width: 100%;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--pb-grey-03);
	border-radius: 8px;
	background: #ffffff;
	box-shadow: none;
	font: 400 15px var(--font);
	color: var(--pb-text);
}

body .pu .su-card input:focus,
body .pu .su-card select:focus,
body .pu .pu-settings select:focus,
body .pu .vform input:focus {
	border-color: var(--pb-blue);
	outline: 2px solid rgba(3, 124, 210, 0.25);
	outline-offset: 0;
}

.pu .row2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.pu .su-card .btn {
	width: 100%;
}

.pu .fine {
	font-size: 13.5px;
	text-align: center;
	color: var(--pb-body);
}

.pu .su-err {
	padding: 10px 12px;
	border-radius: 8px;
	background: #fdecec;
	font-size: 14px;
	color: #9b1c1c;
}

.pu .su-ok {
	font-size: 20px;
}

.pu .roles-pick {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 12px;
	margin: 0;
	padding: 0;
	border: 0;
}

.pu .roles-pick legend {
	margin-bottom: 6px;
	padding: 0;
	font-size: 14px;
	font-weight: 600;
}

.pu .roles-pick .hint {
	margin-left: 6px;
	font: 500 11.5px var(--mono);
	color: var(--pb-blue);
}

.pu .su-card label.rc2,
.pu label.rc2 {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border: 1px solid var(--pb-grey-03);
	border-radius: 8px;
	font-size: 14.5px;
	font-weight: 500;
	cursor: pointer;
}

.pu label.rc2:has(input:checked) {
	border-color: var(--pb-blue);
	background: #f4f9fd;
}

.pu .rc2 input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--pb-blue);
}

/* ---------------------------------------------------------------------------
 * Focus layout: the welcome page, and the sidebar block on lesson pages
 * ------------------------------------------------------------------------ */

body.pu-focus-page {
	margin: 0;
	background: #ffffff;
}

.pu .focus {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	min-height: 100vh;
}

.pu .fside {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border-right: 1px solid var(--pb-grey-03);
	background: #fafbfc;
}

.pu .fside .top,
.pu.pu-fs .top {
	display: grid;
	gap: 12px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--pb-grey-03);
}

body .pu .flogo {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.pu .flogo img {
	width: 96px;
	height: auto;
}

.pu .flogo span {
	padding-left: 10px;
	border-left: 1px solid var(--pb-grey-03);
	font: 500 11px var(--mono);
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--pb-body);
}

body .pu .back {
	font-size: 13.5px;
	color: var(--pb-blue);
	text-decoration: none;
}

.pu .prog {
	display: grid;
	gap: 8px;
	font-size: 14px;
	color: var(--pb-body);
}

.pu .prog .pl {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.pu .prog .pl b {
	color: var(--pb-text);
}

.pu .prog .pl em {
	font-style: normal;
}

.pu .prog .bar {
	height: 6px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--pb-grey-03);
}

.pu .prog .bar i {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--pb-blue);
}

.pu .group {
	padding: 16px 20px 6px;
	font: 500 11.5px var(--mono);
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--pb-body);
}

.pu .flist {
	margin: 0;
	padding: 0 10px;
	list-style: none;
}

.pu .fside > .flist:first-of-type {
	padding-top: 12px;
}

body .pu .flist a,
.pu .flist .na {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.35;
	color: var(--pb-text);
	text-decoration: none;
}

body .pu .flist a:hover {
	background: #ffffff;
}

body .pu .flist li.cur a {
	background: #e3f1fb;
	font-weight: 600;
	color: var(--pb-blue);
}

.pu .flist li.off .na {
	color: #8a96a8;
}

.pu .st {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border: 1.5px solid #9fb0c8;
	border-radius: 50%;
}

.pu li.done .st {
	border-color: var(--green);
	background: var(--green);
}

.pu li.done .st::before {
	content: "";
	width: 5px;
	height: 9px;
	margin-top: -2px;
	border-right: 2px solid #ffffff;
	border-bottom: 2px solid #ffffff;
	transform: rotate(45deg);
}

.pu li.cur .st {
	border-color: var(--pb-blue);
	box-shadow: inset 0 0 0 4px #e3f1fb, inset 0 0 0 9px var(--pb-blue);
}

.pu .fmain {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pu .fbar {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 24px;
	border-bottom: 1px solid var(--pb-grey-03);
	background: #ffffff;
}

body .pu .fbar .x {
	display: grid;
	flex: none;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--pb-grey-03);
	border-radius: 8px;
	color: var(--pb-body);
	text-decoration: none;
}

.pu .fbar .lt {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.pu .fbar .nav2 {
	display: flex;
	flex: none;
	gap: 8px;
}

.pu .fbar .btn {
	padding: 8px 14px;
	font-size: 14px;
}

.pu .fcontent {
	display: grid;
	gap: 24px;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 28px clamp(16px, 4vw, 48px) 48px;
}

.pu .done-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 20px;
	border-top: 1px solid var(--pb-grey-03);
}

.pu .upnext {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14.5px;
	color: var(--pb-body);
}

.pu .upnext b {
	display: block;
	color: var(--pb-text);
}

/* Welcome content (also the [pabau_welcome] shortcode) */

.pu .pu-welcome {
	display: grid;
	gap: 24px;
}

.pu .video {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	max-width: 100%;
	border-radius: 14px;
	background: #0b1428;
}

.pu .video.wv {
	background: linear-gradient(135deg, #5aa8ff, #077dff);
}

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

.pu .wv-img {
	position: absolute;
	right: 6%;
	bottom: 0;
	width: auto !important;
	height: 96%;
	object-fit: contain;
}

.pu .wv-txt {
	position: absolute;
	top: 42%;
	left: 6%;
	display: grid;
	gap: 8px;
	max-width: 46%;
	color: #ffffff;
	transform: translateY(-50%);
}

.pu .wv-txt .eb {
	color: #e3f1fb;
}

.pu .wv-txt b {
	font: 700 clamp(24px, 3.4vw, 40px)/1.1 var(--font);
	letter-spacing: -0.5px;
}

.pu .wv-txt span:last-child {
	font-size: 17px;
	color: #e3f1fb;
}

body .pu .video .play,
body .pu .video .play:hover,
body .pu .video .play:focus {
	position: absolute;
	bottom: 58px;
	left: 6%;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(3, 124, 210, 0.92);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

.pu .video .play::before {
	content: "";
	margin-left: 5px;
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
	border-left: 18px solid #ffffff;
}

.pu .lmeta,
.pu.pu-lmeta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	font-size: 14px;
	color: var(--pb-body);
}

.pu .lmeta .for a {
	color: var(--pb-blue);
}

.pu .pu-welcome h1 {
	font: 700 clamp(26px, 3vw, 34px)/1.15 var(--font);
	letter-spacing: -0.5px;
}

.pu .learn {
	max-width: 66ch;
	font-size: 17px;
	color: var(--pb-body);
}

.pu .wic {
	margin: 4px 0 -8px;
	font: 700 20px var(--font);
}

.pu .rec {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

body .pu .rc {
	display: grid;
	gap: 4px;
	padding: 14px 16px;
	border: 1px solid var(--pb-grey-03);
	border-radius: 12px;
	color: var(--pb-text);
	text-decoration: none;
}

body .pu a.rc:hover {
	border-color: var(--pb-blue);
}

.pu .rc .trk {
	font: 500 11px var(--mono);
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--pb-blue);
}

.pu .rc b {
	font-size: 15.5px;
}

.pu .howgs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	padding: 16px 18px;
	border-radius: 12px;
	background: var(--pb-soft-blue);
}

.pu .howgs b {
	display: block;
	margin-bottom: 2px;
}

.pu .howgs > div > span {
	font-size: 15px;
	color: var(--pb-body);
}

.pu .howgs .chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

body .pu .howgs .chips a {
	padding: 5px 12px;
	border: 1px solid var(--pb-grey-03);
	border-radius: 999px;
	background: #ffffff;
	font: 500 13px var(--font);
	color: var(--pb-text);
	text-decoration: none;
}

body .pu .howgs .chips a.on {
	border-color: var(--pb-navy);
	background: var(--pb-navy);
	color: #ffffff;
}

/* ---------------------------------------------------------------------------
 * Lesson pages: LearnDash focus mode, restyled (body.pu-lesson, university/lesson.php)
 * ------------------------------------------------------------------------ */

html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-sidebar {
	background: #fafbfc;
}

/* LearnDash's course link becomes "← Course"; its collapse button stays. The Core/Extra list
   replaces LearnDash's list for lessons-only courses. */
html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading {
	min-height: 0;
	padding: 18px 28px 4px 20px !important;
	border: 0;
	background: transparent !important;
}

html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading .ld-focus-mode-course-heading-wrapper a {
	font: 400 13.5px/1.4 "Pabau Satoshi", "Satoshi", system-ui, sans-serif !important;
	color: #037cd2 !important;
}

html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading .ld-focus-mode-course-heading-wrapper a .ld-icon-content {
	display: none;
}

html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading .ld-focus-mode-course-heading-wrapper a::before {
	content: "\2190\00a0";
}

html body.pu-lesson-nav .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation {
	display: none !important;
}

html body.pu-lesson .learndash-wrapper .ld-focus.ld-focus-sidebar-collapsed .pu-fs {
	visibility: hidden;
	opacity: 0;
}

html body.pu-lesson .learndash-wrapper .pu.pu-fs {
	padding-bottom: 24px;
	background: transparent;
}

html body.pu-lesson .learndash-wrapper .pu.pu-fs .top {
	padding-top: 10px;
}

html body.pu-lesson .learndash-wrapper .pu.pu-fs a,
html body.pu-lesson .learndash-wrapper .pu.pu-fs a * {
	text-decoration: none !important;
}

html body.pu-lesson .learndash-wrapper .pu.pu-fs .flist a {
	color: #1e1b18 !important;
}

html body.pu-lesson .learndash-wrapper .pu.pu-fs .flist li.cur a {
	color: #037cd2 !important;
}

/* Top bar: close and title on the left, Previous / Next on the right. */
html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-header .pu-ftop {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 14px;
	min-width: 0;
	padding-left: 24px;
}

html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-header .pu-fx {
	display: grid;
	flex: none;
	place-items: center;
	width: 32px;
	height: 32px;
	margin: 0 !important;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	font-size: 14px;
	color: #4a5565 !important;
}

html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-header .pu-ft {
	overflow: hidden;
	font: 600 15px "Pabau Satoshi", "Satoshi", system-ui, sans-serif;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #1e1b18;
}

html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-header .ld-content-actions {
	flex: none;
	padding-right: 24px;
}

@media (min-width: 769px) {
	html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-header .ld-progress,
	html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu {
		display: none !important;
	}
}

@media (max-width: 768px) {
	html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-header .pu-ftop {
		display: none;
	}
}

/* Previous / Next in the top bar as the mockup's buttons; Mark complete stays at the bottom. */
html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-header .ld-content-actions .ld-content-action .sfwd-mark-complete {
	display: none !important;
}

html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-header .ld-content-actions .ld-button.ld-button-transparent {
	padding: 8px 14px !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 8px !important;
	background: #ffffff !important;
}

html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-header .ld-content-actions .ld-content-action:last-child .ld-button.ld-button-transparent {
	border-color: #037cd2 !important;
	background: #037cd2 !important;
	color: #ffffff !important;
}

/* Content column */
html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content {
	max-width: 960px;
	padding-top: calc(51px + 32px);
}

html body.pu-lesson .learndash-wrapper .pu.pu-lmeta,
html body.pu-lesson .learndash-wrapper .pu.pu-upnext {
	background: transparent;
}

html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-header .ld-content-actions .ld-button {
	white-space: nowrap;
}

html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content > h1 {
	margin: 10px 0 16px;
	font: 700 clamp(26px, 3vw, 34px)/1.15 "Pabau Satoshi", "Satoshi", system-ui, sans-serif;
	letter-spacing: -0.5px;
	color: #1e1b18;
}

html body.pu-lesson .learndash-wrapper .pu.pu-lmeta .pill {
	padding: 4px 10px;
	font-size: 11.5px;
}

/* Lesson body as written in the editor: "By the end you can" quote, numbered steps, transcript. */
html body.pu-lesson .learndash-wrapper .ld-tabs-content blockquote,
html body.pu-lesson .learndash-wrapper .ld-focus-content .wp-block-quote {
	margin: 20px 0;
	padding: 12px 16px;
	border: 0;
	border-left: 3px solid #037cd2;
	border-radius: 0 10px 10px 0;
	background: #f4f9fd;
	font-size: 15.5px;
	font-style: normal;
	color: #4a5565;
}

html body.pu-lesson .learndash-wrapper .ld-focus-content details {
	margin: 20px 0;
	padding: 14px 16px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
}

html body.pu-lesson .learndash-wrapper .ld-focus-content details summary {
	font-weight: 600;
	cursor: pointer;
}

/* Bottom bar: Up next on the left, Mark complete and continue (or Next) on the right. */
html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid #e5e7eb;
}

html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions .pu-upnext {
	display: flex;
	flex: 1 1 260px;
	align-items: center;
	gap: 12px;
	font-size: 14.5px;
	color: #4a5565;
}

html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions .pu-upnext b {
	display: block;
	color: #1e1b18;
}

html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions .pu-upnext div > span {
	font-size: 13.5px;
}

html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions > .pu-upnext + .ld-content-action,
html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions .ld-course-step-back {
	display: none !important;
}

html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions .ld-content-action {
	flex: none;
	width: auto;
}

html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions .ld-content-action.ld-empty {
	display: none;
}

html body.pu-lesson .learndash-wrapper .ld-focus .learndash_mark_complete_button,
html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions .ld-button {
	padding: 11px 20px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: #037cd2 !important;
	font: 600 15px "Pabau Satoshi", "Satoshi", system-ui, sans-serif !important;
	color: #ffffff !important;
}

html body.pu-lesson .learndash-wrapper .ld-focus .learndash_mark_complete_button:hover,
html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions .ld-button:hover {
	background: #0668b0 !important;
}

html body.pu-lesson .learndash-wrapper .ld-focus .learndash_mark_complete_button:disabled {
	opacity: 0.55;
}

/* ---------------------------------------------------------------------------
 * Certificate (credential page and the printable page)
 * Sized in container units, so one design fills A4, US Letter or a phone screen.
 * ------------------------------------------------------------------------ */

.pu .pcert {
	--c1: #24bee1;
	--c2: #037cd2;

	position: relative;
	overflow: hidden;
	container-type: inline-size;
	aspect-ratio: 297 / 210;
	max-width: 100%;
	background: #ffffff;
	color: var(--pb-text);
	text-align: left;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.pu .pcert.c-front { --c1: #5aa8ff; --c2: #077dff; }
.pu .pcert.c-patient { --c1: #7fd8ea; --c2: #2badd4; }
.pu .pcert.c-provider { --c1: #24bee1; --c2: #086ab0; }
.pu .pcert.c-operations { --c1: #3a6fb8; --c2: #037cd2; }
.pu .pcert.c-finance { --c1: #2b5c9e; --c2: #121d36; }
.pu .pcert.c-marketing { --c1: #2badd4; --c2: #5aa8ff; }
.pu .pcert.c-gold { --c1: #ffe08a; --c2: #b87a0a; }

.pu .pcert::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1.4cqw;
	background: linear-gradient(90deg, var(--c1), var(--c2));
}

.pu .pcert__in {
	position: absolute;
	inset: 3.4cqw 3cqw 3cqw;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2cqw;
	padding: 3.4cqw 4.4cqw 3cqw;
	border: 0.14cqw solid #dfe6ee;
	border-radius: 1cqw;
}

.pu .pcert__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2cqw;
}

.pu .pcert__brand {
	display: flex;
	align-items: center;
	gap: 1.2cqw;
}

.pu .pcert__brand img {
	width: 13cqw;
	height: auto;
}

.pu .pcert__brand span {
	padding-left: 1.2cqw;
	border-left: 0.12cqw solid #c8d1dc;
	font: 500 1.15cqw var(--mono);
	letter-spacing: 0.22cqw;
	text-transform: uppercase;
	color: var(--pb-body);
}

.pu .badge.pcb {
	flex: none;
	gap: 0.2cqw;
	width: 9.4cqw;
	height: 10.6cqw;
}

.pu .badge.pcb .bm {
	width: 3cqw;
	height: 2.75cqw;
}

.pu .badge.pcb .bt {
	font-size: 0.9cqw;
	letter-spacing: 0.1cqw;
}

.pu .badge.pcb .br {
	padding: 0 1cqw;
	font-size: 1.15cqw;
}

.pu .pcert__body {
	display: grid;
	gap: 0.7cqw;
	justify-items: start;
}

.pu .pcert__eb {
	margin-bottom: 0.6cqw;
	font: 500 1.25cqw var(--mono);
	letter-spacing: 0.28cqw;
	text-transform: uppercase;
	color: var(--pb-blue);
}

.pu .pcert__lead {
	font-size: 1.55cqw;
	color: var(--pb-body);
}

.pu .pcert__name {
	font: 700 5.2cqw/1.05 var(--font);
	letter-spacing: -0.12cqw;
	color: var(--pb-navy);
}

.pu .pcert__title {
	font: 700 2.7cqw/1.15 var(--font);
	letter-spacing: -0.04cqw;
	color: var(--c2);
}

.pu .pcert.c-gold .pcert__title {
	color: #8a5a00;
}

.pu .pcert__crit {
	max-width: 62cqw;
	margin-top: 0.4cqw;
	font-size: 1.35cqw;
	line-height: 1.45;
	color: var(--pb-body);
}

.pu .pcert__foot {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: end;
	gap: 4cqw;
}

.pu .pcert__sig {
	display: grid;
	gap: 0.3cqw;
	min-width: 17cqw;
	padding-top: 0.8cqw;
	border-top: 0.12cqw solid var(--pb-navy);
	font-size: 1.1cqw;
	color: var(--pb-body);
}

.pu .pcert__sign {
	font: 700 1.6cqw var(--font);
	color: var(--pb-navy);
}

.pu .pcert__dates {
	display: flex;
	flex-wrap: wrap;
	gap: 1cqw 3.4cqw;
	margin: 0;
}

.pu .pcert__dates div {
	display: grid;
	gap: 0.3cqw;
}

.pu .pcert__dates dt {
	font: 500 0.95cqw var(--mono);
	letter-spacing: 0.16cqw;
	text-transform: uppercase;
	color: var(--pb-body);
}

.pu .pcert__dates dd {
	margin: 0;
	font: 700 1.4cqw var(--font);
	color: var(--pb-text);
}

.pu .pcert__dates dd.mono {
	font: 500 1.3cqw var(--mono);
}

.pu .pcert__qr {
	display: grid;
	gap: 0.6cqw;
	justify-items: center;
}

.pu .pcert__qr .qr {
	display: block;
	width: 9cqw;
	height: 9cqw;
}

.pu .pcert__qr .qr svg {
	display: block;
	width: 100%;
	height: 100%;
}

.pu .pcert__qr small {
	max-width: 16cqw;
	font: 500 0.82cqw var(--mono);
	text-align: center;
	color: var(--pb-body);
	overflow-wrap: anywhere;
}

.pu .pcert.s-expired::after,
.pu .pcert.s-revoked::after {
	content: "Expired";
	position: absolute;
	top: 46%;
	left: 50%;
	padding: 0.6cqw 3cqw;
	border: 0.4cqw solid #c2410c;
	border-radius: 1cqw;
	font: 700 6cqw var(--font);
	letter-spacing: 0.4cqw;
	text-transform: uppercase;
	color: #c2410c;
	opacity: 0.35;
	transform: translate(-50%, -50%) rotate(-12deg);
	pointer-events: none;
}

.pu .pcert.s-revoked::after {
	content: "Revoked";
	border-color: #b91c1c;
	color: #b91c1c;
}

/* The homepage example credential (PABAU_UNIVERSITY_SAMPLE_ID). */
.pu .pcert.s-sample::after {
	content: "Sample";
	position: absolute;
	top: 46%;
	left: 50%;
	padding: 0.6cqw 3cqw;
	border: 0.4cqw solid #037cd2;
	border-radius: 1cqw;
	font: 700 6cqw var(--font);
	letter-spacing: 0.4cqw;
	text-transform: uppercase;
	color: #037cd2;
	opacity: 0.3;
	transform: translate(-50%, -50%) rotate(-12deg);
	pointer-events: none;
}

.pu .vbar.s-sample {
	border-color: #cfe3f7;
	background: #eef6fe;
	color: #0b4f86;
}

/* ---------------------------------------------------------------------------
 * Verify page and credential page
 * ------------------------------------------------------------------------ */

.pu .vform {
	display: flex;
	gap: 10px;
	max-width: 520px;
	margin-top: 8px;
}

body .pu .vform input {
	flex: 1;
	font-family: var(--mono);
	text-transform: uppercase;
}

body .pu .vform input::placeholder {
	text-transform: none;
	color: #9aa6b6;
}

.pu .vmiss {
	max-width: 60ch;
	padding: 10px 14px;
	border-radius: 8px;
	background: #fff4dc;
	font-size: 15px;
	color: #6b4700;
}

.pu .vbar {
	border-bottom: 1px solid #c9ead9;
	background: #e9f8f0;
	color: #0b6b4a;
}

.pu .vbar .in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	padding-block: 14px;
	font-size: 15px;
}

.pu .vbar b {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15.5px;
}

.pu .vbar.s-active b::before {
	content: "";
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}

.pu .vbar em {
	margin-left: auto;
	font: 500 12px var(--mono);
	font-style: normal;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.pu .vbar.s-expired {
	border-color: #f3d9b0;
	background: #fff6e8;
	color: #8a4b00;
}

.pu .vbar.s-revoked {
	border-color: #f2c4c4;
	background: #fdeeee;
	color: #9b1c1c;
}

.pu .vcred {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	align-items: start;
	gap: 40px;
	padding-block: 32px 64px;
}

.pu .vmain {
	display: grid;
	gap: 28px;
	min-width: 0;
}

.pu .vtitle {
	display: grid;
	gap: 6px;
}

.pu .vtitle h1 {
	font: 700 clamp(32px, 4vw, 48px)/1.08 var(--font);
	letter-spacing: -1px;
}

.pu .vtitle p {
	font: 600 20px var(--font);
	color: var(--pb-blue);
}

body .pu a.vcert {
	position: relative;
	display: block;
	overflow: hidden;
	border: 1px solid var(--pb-grey-03);
	border-radius: 14px;
	box-shadow: 0 16px 40px rgba(18, 29, 54, 0.1);
	text-decoration: none;
}

.pu .vcert__zoom {
	position: absolute;
	right: 12px;
	bottom: 12px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(18, 29, 54, 0.78);
	font: 600 13px var(--font);
	color: #ffffff;
	opacity: 0;
	transition: opacity 0.15s;
}

.pu a.vcert:hover .vcert__zoom,
.pu a.vcert:focus-visible .vcert__zoom {
	opacity: 1;
}

.pu .vowner {
	display: grid;
	gap: 12px;
}

.pu .vowner .cr-acts {
	padding-top: 0;
	border-top: 0;
}

body .pu .vowner .btn.li {
	cursor: pointer;
}

.pu .vpriv {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	font-size: 14px;
	color: var(--pb-body);
}

.pu .vabout {
	display: grid;
	gap: 10px;
	padding-top: 24px;
	border-top: 1px solid var(--pb-grey-03);
}

.pu .vabout h2 {
	font: 700 22px var(--font);
}

.pu .vabout h3 {
	margin-top: 8px;
	font: 600 15px var(--font);
}

.pu .vabout p {
	max-width: 66ch;
	font-size: 16px;
	color: var(--pb-body);
}

.pu .vside {
	position: sticky;
	top: calc(96px + var(--wp-admin--admin-bar--height, 0px));
	display: grid;
	gap: 16px;
}

.pu .vcard,
.pu .vcta {
	display: grid;
	gap: 14px;
	padding: 22px;
	border: 1px solid var(--pb-grey-03);
	border-radius: 16px;
	background: #ffffff;
}

.pu .vcard .badge {
	justify-self: center;
}

.pu .vcard dl {
	display: grid;
	gap: 10px;
	margin: 0;
}

.pu .vcard dl div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
}

.pu .vcard dt {
	color: var(--pb-body);
}

.pu .vcard dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
	overflow-wrap: anywhere;
}

.pu .vcta {
	border: 0;
	background: var(--pb-navy);
	color: #ffffff;
}

.pu .vcta b {
	font-size: 19px;
}

.pu .vcta p {
	font-size: 14.5px;
	color: #c9d3e3;
}

body .pu .vcta .lnk {
	color: #8fd3ff;
}

.pu .vcta .btn,
.pu .vcard .btn {
	justify-self: stretch;
}

/* Share sheet */

.pu dialog.sh {
	width: min(520px, calc(100vw - 32px));
}

.pu .sh .pv-in {
	gap: 18px;
	padding-bottom: 22px;
	overflow: auto;
}

.pu .sh-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 8px;
	padding: 0 22px;
}

body .pu .sh-i {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--pb-grey-03);
	border-radius: 10px;
	font: 600 14.5px var(--font);
	color: var(--pb-text);
	text-decoration: none;
}

body .pu .sh-i:hover {
	border-color: var(--pb-blue);
}

.pu .sh-i .ic {
	display: grid;
	flex: none;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 7px;
	background: var(--pb-navy);
	font: 700 13px var(--font);
	color: #ffffff;
}

.pu .sh-li .ic { background: #0a66c2; }
.pu .sh-li .ic::before { content: "in"; }
.pu .sh-x .ic { background: #111111; }
.pu .sh-x .ic::before { content: "X"; }
.pu .sh-fb .ic { background: #1877f2; }
.pu .sh-fb .ic::before { content: "f"; font-size: 16px; }
.pu .sh-pdf .ic::before { content: "↓"; font-size: 15px; }

.pu .sh-f {
	display: grid;
	gap: 6px;
	padding: 0 22px;
	font-size: 13.5px;
	font-weight: 600;
}

.pu .sh-copy {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

body .pu .sh-copy input,
body .pu .sh-copy textarea {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 8px 10px;
	border: 1px solid var(--pb-grey-03);
	border-radius: 8px;
	background: var(--pb-grey-02);
	font: 400 13px var(--mono);
	color: var(--pb-text);
	resize: none;
}

/* In-course moment (finished course) */

.pu .moment {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 22px;
	border: 1px solid #c9ead9;
	border-radius: 16px;
	background: #f2fbf6;
}

.pu .moment.earned {
	border-color: #cfe3f5;
	background: linear-gradient(135deg, #f4f9fd, #e3f1fb);
}

.pu .mo-ok {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 40px no-repeat;
}

.pu .mo-b {
	display: grid;
	flex: 1;
	gap: 8px;
	min-width: 0;
}

.pu .mo-b h2 {
	font: 700 22px/1.2 var(--font);
	letter-spacing: -0.3px;
}

.pu .mo-b p {
	font-size: 15px;
	color: var(--pb-body);
}

.pu .mo-a {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin-top: 4px;
}

/* ---------------------------------------------------------------------------
 * Printable certificate (/verify/<ID>/print/)
 * ------------------------------------------------------------------------ */

body.pu-print-page {
	margin: 0;
	background: #e9edf2;
}

.pu.pu-print {
	min-height: 100vh;
	padding: 20px 16px 40px;
	background: #e9edf2;
}

.pu .ptools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 14px;
	max-width: 1123px;
	margin: 0 auto 20px;
}

.pu .psize {
	display: inline-flex;
	padding: 3px;
	border: 1px solid var(--pb-grey-03);
	border-radius: 9px;
	background: #ffffff;
}

body .pu .psize button,
body .pu .psize button:hover,
body .pu .psize button:focus {
	padding: 5px 12px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	font: 600 13.5px var(--font);
	color: var(--pb-body);
	cursor: pointer;
}

body .pu .psize button.on {
	background: var(--pb-navy);
	color: #ffffff;
}

.pu .phint {
	flex-basis: 100%;
	font-size: 13px;
	text-align: center;
	color: var(--pb-body);
}

.pu .psheet {
	max-width: 1123px;
	margin: 0 auto;
	box-shadow: 0 20px 50px rgba(18, 29, 54, 0.18);
}

.pu .psheet[data-size="letter"] .pcert {
	aspect-ratio: 279.4 / 215.9;
}

@media print {
	html,
	body.pu-print-page {
		margin: 0 !important;
		padding: 0 !important;
		background: #ffffff !important;
	}

	body.pu-print-page #wpadminbar,
	.pu .ptools {
		display: none !important;
	}

	.pu.pu-print {
		min-height: 0;
		padding: 0;
		background: #ffffff;
	}

	.pu .psheet {
		max-width: none;
		box-shadow: none;
		break-inside: avoid;
	}

	.pu .psheet .pcert {
		width: 100vw;
		height: 100vh;
		aspect-ratio: auto !important;
	}
}

/* ---------------------------------------------------------------------------
 * Profile: certificates and settings
 * ------------------------------------------------------------------------ */

.pu.pu-profile {
	padding-block: 56px;
	border-top: 1px solid var(--pb-grey-03);
	background: var(--pb-soft-blue);
}

.pu .pf {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	align-items: start;
	gap: 32px;
}

.pu .pf-certs,
.pu .pf-set {
	display: grid;
	gap: 12px;
	padding: 24px;
	border: 1px solid var(--pb-grey-03);
	border-radius: 16px;
	background: #ffffff;
	scroll-margin-top: calc(96px + var(--wp-admin--admin-bar--height, 0px));
}

.pu .pf h2 {
	font: 700 24px/1.2 var(--font);
	letter-spacing: -0.3px;
}

.pu .pf-lead,
.pu .pf-empty {
	font-size: 15px;
	color: var(--pb-body);
}

.pu .pf-saved {
	padding: 8px 12px;
	border-radius: 8px;
	background: #e9f8f0;
	font-size: 14px;
	color: #0b6b4a;
}

.pu .pf-list {
	display: grid;
	gap: 10px;
}

.pu .pf-c {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px;
	border: 1px solid var(--pb-grey-03);
	border-radius: 12px;
}

.pu .pf-c.s-expired,
.pu .pf-c.s-revoked {
	background: #fffaf2;
}

.pu .pf-cb {
	display: grid;
	flex: 1;
	gap: 4px;
	min-width: 0;
	font-size: 13.5px;
	color: var(--pb-body);
}

.pu .pf-cb b {
	font-size: 15px;
}

body .pu .pf-cb b a {
	color: var(--pb-text);
	text-decoration: none;
}

body .pu .pf-cb b a:hover {
	color: var(--pb-blue);
}

.pu .pf-cb .mono {
	font-size: 12px;
}

.pu .pu-settings {
	display: grid;
	gap: 16px;
}

.pu .pu-settings .btn {
	justify-self: start;
}

/* ---------------------------------------------------------------------------
 * New pages: tablet and phone
 * ------------------------------------------------------------------------ */

@media (max-width: 980px) {
	.pu .role-cert,
	.pu .rhead,
	.pu .su,
	.pu .vcred,
	.pu .pf {
		grid-template-columns: minmax(0, 1fr);
	}

	.pu .vside {
		position: static;
	}

	.pu .focus {
		grid-template-columns: minmax(0, 1fr);
	}

	.pu .fside {
		order: 2;
		border-top: 1px solid var(--pb-grey-03);
		border-right: 0;
	}

	.pu .fside .top {
		display: none;
	}
}

@media (max-width: 640px) {
	.pu .row2,
	.pu .roles-pick,
	.pu .rec {
		grid-template-columns: minmax(0, 1fr);
	}

	.pu .rcard,
	.pu .moment {
		flex-direction: column;
		align-items: flex-start;
	}

	.pu .wv-txt {
		max-width: 60%;
	}

	.pu .wv-txt span:last-child {
		font-size: 14px;
	}

	body .pu .video .play {
		bottom: 18px;
		width: 48px;
		height: 48px;
	}

	.pu .fbar {
		padding: 10px 16px;
	}

	.pu .fbar .lt {
		font-size: 14px;
	}

	.pu .vform {
		flex-direction: column;
	}

	.pu .pf-c {
		flex-wrap: wrap;
	}

	.pu .phead {
		padding-block: 20px 32px;
	}

	.pu .ptools .btn {
		flex: 1 1 100%;
	}
}

/* ---------------------------------------------------------------------------
 * Reset password (university/page-reset.php): LearnDash's form in the sign-up card
 * ------------------------------------------------------------------------ */

.pu.pu-auth {
	padding: 56px 16px 72px;
	background: #ffffff;
}

.pu .auth {
	display: grid;
	gap: 20px;
	width: 100%;
	max-width: 460px;
	margin: 0 auto;
}

.pu .auth-head {
	display: grid;
	gap: 10px;
	text-align: center;
}

.pu .auth-head h1 {
	font: 700 clamp(30px, 3.6vw, 40px)/1.12 var(--font);
	letter-spacing: -1px;
	text-wrap: balance;
}

.pu .auth-head p {
	max-width: 40ch;
	margin: 0 auto;
	font-size: 17px;
	color: var(--pb-body);
}

.pu .auth-card .learndash-wrapper,
.pu .auth-card #learndash-reset-password-wrapper {
	width: 100% !important;
	margin: 0;
	padding: 0;
}

.pu .auth-card form {
	display: grid;
	gap: 14px;
	margin: 0;
}

.pu .auth-card form p {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
}

html body .pu .auth-card label {
	margin: 0;
	font: 600 14px var(--font);
	color: var(--pb-text);
}

html body .pu .auth-card input[type="text"],
html body .pu .auth-card input[type="email"],
html body .pu .auth-card input[type="password"] {
	width: 100%;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 10px 12px !important;
	border: 1px solid var(--pb-grey-03) !important;
	border-radius: 8px !important;
	background: #ffffff !important;
	box-shadow: none !important;
	font: 400 15px var(--font) !important;
	color: var(--pb-text) !important;
}

html body .pu .auth-card input[type="text"]:focus,
html body .pu .auth-card input[type="email"]:focus,
html body .pu .auth-card input[type="password"]:focus {
	border-color: var(--pb-blue) !important;
	outline: 2px solid rgba(3, 124, 210, 0.25);
	outline-offset: 0;
}

html body .pu .auth-card input[type="submit"] {
	width: 100%;
	margin: 4px 0 0;
	padding: 11px 18px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: var(--pb-blue) !important;
	box-shadow: none !important;
	font: 600 15px var(--font) !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: #ffffff !important;
	cursor: pointer;
}

html body .pu .auth-card input[type="submit"]:hover,
html body .pu .auth-card input[type="submit"]:focus {
	background: var(--pb-blue-hover) !important;
}

/* The log-in form LearnDash shows after the new password is set. */
.pu .auth-card .login-remember label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
}

.pu .auth-card .login-remember input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--pb-blue);
}

/* LearnDash messages: link sent, invalid link, password changed. */
html body .pu .auth-card .ld-alert {
	display: block;
	margin: 0 0 4px;
	padding: 12px 14px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: #fff6e8 !important;
	box-shadow: none !important;
	font: 400 14.5px/1.45 var(--font);
	color: #6b4700 !important;
}

html body .pu .auth-card .ld-alert-success {
	background: #e9f8f0 !important;
	color: #0b6b4a !important;
}

html body .pu .auth-card .ld-alert-content {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 0;
}

html body .pu .auth-card .ld-alert .ld-alert-icon {
	display: none;
}

html body .pu .auth-card .ld-alert .ld-alert-messages,
html body .pu .auth-card .ld-alert .ld-alert-messages * {
	font: inherit !important;
	color: inherit !important;
}

.pu .auth > .fine {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 6px;
}

body .pu .auth > .fine a {
	color: var(--pb-blue);
}

/* LearnDash gives the reset form a fixed 630px height and grey labels (ID selectors). */
html body .pu .auth-card .learndash-wrapper #learndash-reset-password-wrapper {
	min-height: 0 !important;
}

html body .pu .auth-card .learndash-wrapper #learndash-reset-password-wrapper form label,
html body .pu .auth-card .learndash-wrapper #learndash-reset-password-wrapper form p label {
	margin: 0 !important;
	font: 600 14px var(--font) !important;
	color: var(--pb-text) !important;
}

html body .pu .auth-card .learndash-wrapper #learndash-reset-password-wrapper .login-remember label {
	font-weight: 500 !important;
}

.pu .auth,
.pu .auth-card {
	align-content: start;
}

/* Mark complete: room for LearnDash's tick (the form's ::after), one line, and a calm locked state
   while video progression waits for the video to end. */
html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions > .pu-upnext + .pu-vhint + .ld-content-action {
	display: none !important;
}

html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions .learndash_mark_complete_button {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 12px 46px 12px 22px !important;
	border-radius: 8px !important;
	outline: 0 !important;
	filter: none !important;
	opacity: 1 !important;
	font: 600 15px/1.3 "Pabau Satoshi", "Satoshi", system-ui, sans-serif !important;
	white-space: nowrap !important;
}

html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions .sfwd-mark-complete::after {
	right: 18px !important;
	padding: 0 !important;
	font-size: 14px;
	color: #ffffff !important;
}

html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions .learndash_mark_complete_button:disabled,
html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions .learndash_mark_complete_button[disabled] {
	background: #eef2f7 !important;
	color: #6b7a90 !important;
	cursor: not-allowed !important;
}

html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions .sfwd-mark-complete:has(.learndash_mark_complete_button:disabled)::after {
	color: #9aa6b6 !important;
}

html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions .pu-vhint {
	flex-basis: 100%;
	order: 10;
	margin: -4px 0 0;
	background: transparent;
	font-size: 13.5px;
	text-align: right;
	color: #6b7a90;
}

@media (max-width: 640px) {
	html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions .ld-content-action,
	html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions .sfwd-mark-complete,
	html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions .learndash_mark_complete_button {
		width: 100% !important;
	}

	html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions .pu-vhint {
		text-align: left;
	}
}

/* Welcome band: the learner's certificates */
.pu .me-certs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	margin-top: 18px;
}

.pu .me-certs .me-k {
	flex-basis: 100%;
}

body .pu .me-cert {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px 8px 8px;
	border: 1px solid #cfe3f5;
	border-radius: 12px;
	background: #ffffff;
	color: var(--pb-text);
	text-decoration: none;
}

body .pu .me-cert:hover {
	border-color: var(--pb-blue);
}

.pu .me-cert .badge.small {
	width: 34px;
	height: 38px;
}

.pu .me-cert .badge.small .bm {
	width: 16px;
	height: 15px;
}

.pu .me-cert b {
	display: block;
	font-size: 14px;
	line-height: 1.3;
}

.pu .me-cert em {
	display: block;
	font-size: 12.5px;
	font-style: normal;
	color: var(--pb-body);
}

/* Verify page: where the credential ID is, and the quicker ways in */
.pu .vwhere {
	display: grid;
	gap: 6px;
	max-width: 64ch;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	font-size: 14.5px;
	color: var(--pb-body);
}

.pu .vwhere b {
	color: var(--pb-text);
}

.pu .vform {
	max-width: 580px;
}

/* Course tracks (course covers and labels): Manager and Growth, next to Basics, Front desk and Provider */
.pu .t-Manager { background: linear-gradient(135deg, #1b3a6b, #037cd2); }
.pu .t-Growth { background: linear-gradient(135deg, #2badd4, #5aa8ff); }

/* Lessons and topics: video on top (moved by pabau_university_lesson_video_first()), no LearnDash
   breadcrumb/status box (the lesson line above the title says where you are).
   LearnDash's responsive video box is height: 0 + padding-bottom: 56.25% with an absolute iframe;
   with the padding gone the box must size from the iframe (height auto, iframe in flow) or the
   video is clipped to nothing. */
html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .pu-lvideo {
	position: relative;
	overflow: hidden;
	max-width: 100%;
	height: auto !important;
	margin: 0 0 24px !important;
	padding: 0 !important;
	border-radius: 14px;
	background: #0b1428;
}

html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .pu-lvideo iframe,
html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content iframe.pu-lvideo,
html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .pu-lvideo video {
	position: static !important;
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9;
	border: 0;
}

html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-lesson-status,
html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-topic-status {
	display: none !important;
}

html body.pu-lesson .learndash-wrapper .pu.pu-fs .group.cur {
	color: #037cd2;
}

/* Lesson pages, closer to the mockup. ID selectors: the brand snippet styles the sidebar heading and
   every LearnDash link (margin-top: 20px) with !important. */
html body.pu-lesson #ld-focus-sidebar .ld-course-navigation-heading,
html body.pu-lesson #ld-focus-sidebar .ld-course-navigation-heading::before,
html body.pu-lesson #ld-focus-sidebar .ld-course-navigation-heading::after {
	min-height: 0 !important;
	border: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

html body.pu-lesson #ld-focus-sidebar .ld-course-navigation-heading {
	padding: 18px 28px 6px 20px !important;
}

html body.pu-lesson #ld-focus-sidebar .ld-focus-mode-course-heading-wrapper,
html body.pu-lesson #ld-focus-sidebar .ld-focus-mode-course-heading-wrapper a,
html body.pu-lesson #ld-focus-sidebar #ld-focus-mode-course-heading {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	font: 400 13.5px/1.4 "Pabau Satoshi", "Satoshi", system-ui, sans-serif !important;
	color: #037cd2 !important;
	text-decoration: none !important;
}

html body.pu-lesson #ld-focus-sidebar .pu-fs .top {
	padding: 10px 20px 18px;
}

html body.pu-lesson #ld-focus-sidebar .pu-fs .flist {
	margin: 0 !important;
	padding: 0 10px !important;
}

html body.pu-lesson #ld-focus-sidebar .pu-fs .flist li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

html body.pu-lesson #ld-focus-sidebar .pu-fs .flist a {
	display: grid !important;
	grid-template-columns: 22px 1fr;
	gap: 10px;
	margin: 0 !important;
	padding: 9px 10px !important;
	border-radius: 8px;
	font: 400 14px/1.35 "Pabau Satoshi", "Satoshi", system-ui, sans-serif !important;
	color: #1e1b18 !important;
	text-decoration: none !important;
}

html body.pu-lesson #ld-focus-sidebar .pu-fs .flist li.cur a {
	background: #e3f1fb !important;
	font-weight: 600 !important;
	color: #037cd2 !important;
}

html body.pu-lesson #ld-focus-sidebar .pu-fs .group {
	padding: 16px 20px 6px;
	font: 500 11.5px "Pabau DM Mono", "DM Mono", ui-monospace, monospace;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #4a5565;
}

html body.pu-lesson #ld-focus-sidebar .pu-fs .group.cur {
	color: #037cd2;
}

/* Lesson text as in the mockup: body colour, 16.5px, comfortable line length. */
html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-tab-content p,
html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-tab-content li {
	font: 400 16.5px/1.6 "Pabau Satoshi", "Satoshi", system-ui, sans-serif;
	color: #4a5565;
}

html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-tab-content p {
	max-width: 72ch;
	margin: 0 0 14px;
}

html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-tab-content h2,
html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-tab-content h3 {
	margin: 28px 0 12px;
	font: 700 20px/1.3 "Pabau Satoshi", "Satoshi", system-ui, sans-serif;
	color: #1e1b18;
}

html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-tab-content strong,
html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-tab-content b {
	color: #1e1b18;
}

html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .pu-lvideo .elementor-wrapper,
html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .pu-lvideo .elementor-widget-container {
	margin: 0 !important;
	border-radius: 14px;
	overflow: hidden;
}

/* The bottom bar's secondary Next (when the lesson is already done) as an outline button. */
html body.pu-lesson .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions .ld-content-action:last-child .ld-button:not(.learndash_mark_complete_button) {
	border: 1px solid #e5e7eb !important;
	background: #ffffff !important;
	color: #1e1b18 !important;
}

/* Bottom bar: Up next on the left; Mark complete and Next side by side on the right, same height,
   centred on one line (the brand snippet adds margin-top: 20px to links, which pushed Next down). */
html body.pu-lesson #ld-focus-content .ld-content-actions {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center !important;
	justify-content: flex-end;
	gap: 12px !important;
}

html body.pu-lesson #ld-focus-content .ld-content-actions .pu-upnext {
	flex: 1 1 260px;
	margin-right: auto;
}

html body.pu-lesson #ld-focus-content .ld-content-actions .ld-content-action {
	display: flex !important;
	flex: none !important;
	align-items: center !important;
	gap: 12px;
	width: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

html body.pu-lesson #ld-focus-content .ld-content-actions .ld-content-action > *,
html body.pu-lesson #ld-focus-content .ld-content-actions .sfwd-mark-complete,
html body.pu-lesson #ld-focus-content .ld-content-actions a {
	margin: 0 !important;
}

html body.pu-lesson #ld-focus-content .ld-content-actions .learndash_mark_complete_button,
html body.pu-lesson #ld-focus-content .ld-content-actions .ld-button {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	height: 46px !important;
	min-height: 0 !important;
	padding: 0 22px !important;
	border-radius: 8px !important;
	font: 600 15px/1 "Pabau Satoshi", "Satoshi", system-ui, sans-serif !important;
	box-shadow: none !important;
}

html body.pu-lesson #ld-focus-content .ld-content-actions .learndash_mark_complete_button {
	padding-right: 46px !important;
}

html body.pu-lesson #ld-focus-content .ld-content-actions .ld-content-action:last-child .ld-button:not(.learndash_mark_complete_button) {
	border: 1px solid #e5e7eb !important;
	background: #ffffff !important;
	color: #1e1b18 !important;
}

html body.pu-lesson #ld-focus-content .ld-content-actions .ld-content-action:last-child .ld-button:not(.learndash_mark_complete_button):hover {
	border-color: #037cd2 !important;
	color: #037cd2 !important;
}

html body.pu-lesson #ld-focus-content .ld-content-actions .pu-vhint {
	order: 10;
	flex-basis: 100%;
}

/* Lesson text lines up with the title (LearnDash indents its content box). */
html body.pu-lesson #ld-focus-content .ld-tabs,
html body.pu-lesson #ld-focus-content .ld-tabs-content,
html body.pu-lesson #ld-focus-content .ld-tab-content {
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

@media (max-width: 640px) {
	html body.pu-lesson #ld-focus-content .ld-content-actions .ld-content-action,
	html body.pu-lesson #ld-focus-content .ld-content-actions .learndash_mark_complete_button,
	html body.pu-lesson #ld-focus-content .ld-content-actions .ld-button {
		width: 100% !important;
		justify-content: center;
	}
}

/* Sidebar collapse toggle: a small round button on the sidebar's edge (not a tab over the list). */
html body.pu-lesson #ld-focus-sidebar .ld-focus-sidebar-trigger {
	top: 14px !important;
	right: -15px !important;
	bottom: auto !important;
	width: 30px !important;
	height: 30px !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

html body.pu-lesson #ld-focus-sidebar .ld-focus-sidebar-trigger .ld-icon {
	position: static !important;
	display: grid !important;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0 !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	box-shadow: 0 2px 8px rgba(18, 29, 54, 0.12) !important;
	font-size: 12px !important;
	color: #4a5565 !important;
	transform: none !important;
}

html body.pu-lesson .ld-focus.ld-focus-sidebar-collapsed #ld-focus-sidebar .ld-focus-sidebar-trigger .ld-icon {
	transform: rotate(180deg) !important;
}

html body.pu-lesson #ld-focus-sidebar .ld-focus-sidebar-trigger:hover .ld-icon,
html body.pu-lesson #ld-focus-sidebar .ld-focus-sidebar-trigger:focus-visible .ld-icon {
	border-color: #037cd2 !important;
	color: #037cd2 !important;
}

/* A slim scrollbar for the lesson list. */
html body.pu-lesson #ld-focus-sidebar .ld-focus-sidebar-wrapper {
	scrollbar-width: thin;
	scrollbar-color: #d5dbe3 transparent;
}

html body.pu-lesson #ld-focus-sidebar .ld-focus-sidebar-wrapper::-webkit-scrollbar {
	width: 6px;
}

html body.pu-lesson #ld-focus-sidebar .ld-focus-sidebar-wrapper::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background: #d5dbe3;
}

/* Top bar: compact Previous (outline) and Next (blue) on the right, centred in the bar, without
   LearnDash's column dividers (the brand snippet's margin-top on links pushed them down). */
html body.pu-lesson #ld-focus-header .ld-content-actions {
	display: flex !important;
	flex: none !important;
	align-items: center !important;
	gap: 8px !important;
	height: 100% !important;
	margin: 0 0 0 auto !important;
	padding: 0 24px 0 0 !important;
	border: 0 !important;
	background: transparent !important;
}

html body.pu-lesson #ld-focus-header .ld-content-actions .ld-content-action {
	display: flex !important;
	flex: none !important;
	align-items: center !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

html body.pu-lesson #ld-focus-header .ld-content-actions .ld-content-action.ld-empty,
html body.pu-lesson #ld-focus-header .ld-content-actions .ld-content-action:empty {
	display: none !important;
}

html body.pu-lesson #ld-focus-header .ld-content-actions .ld-button,
html body.pu-lesson #ld-focus-header .ld-content-actions .ld-button.ld-button-transparent {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	height: 36px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 14px !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 8px !important;
	outline: 0;
	background: #ffffff !important;
	box-shadow: none !important;
	font: 600 14px/1 "Pabau Satoshi", "Satoshi", system-ui, sans-serif !important;
	color: #1e1b18 !important;
	white-space: nowrap;
}

html body.pu-lesson #ld-focus-header .ld-content-actions .ld-button:hover {
	border-color: #037cd2 !important;
	color: #037cd2 !important;
}

html body.pu-lesson #ld-focus-header .ld-content-actions .ld-button:focus-visible {
	outline: 2px solid #037cd2;
	outline-offset: 2px;
}

html body.pu-lesson #ld-focus-header .ld-content-actions .ld-button:has(.ld-icon-arrow-right),
html body.pu-lesson #ld-focus-header .ld-content-actions .ld-button:has(.ld-icon-arrow-right):hover {
	border-color: #037cd2 !important;
	background: #037cd2 !important;
	color: #ffffff !important;
}

html body.pu-lesson #ld-focus-header .ld-content-actions .ld-button .ld-icon {
	margin: 0 !important;
	font-size: 12px !important;
	color: inherit !important;
}

/* No dividers anywhere in the top bar. */
html body.pu-lesson #ld-focus-header > * {
	border-left: 0 !important;
	border-right: 0 !important;
}

/* Bottom bar: Previous lives in the top bar; LearnDash's "Back to course" link and empty slots are hidden. */
html body.pu-lesson #ld-focus-content .ld-content-actions > .pu-upnext + .ld-content-action,
html body.pu-lesson #ld-focus-content .ld-content-actions > .pu-upnext + .pu-vhint + .ld-content-action,
html body.pu-lesson #ld-focus-content .ld-content-actions .ld-content-action.ld-empty,
html body.pu-lesson #ld-focus-content .ld-content-actions .ld-course-step-back {
	display: none !important;
}

/* LearnDash's "Great job! You've completed this lesson" alert: a soft green bar with the next-step
   button centred on the right (the brand snippet gave the button a gradient and margin-top). */
html body.pu-lesson #ld-focus-content .ld-alert.ld-alert-success {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center !important;
	gap: 12px 16px;
	margin: 0 0 24px !important;
	padding: 14px 16px !important;
	border: 1px solid #c9ead9 !important;
	border-radius: 12px !important;
	background: #f2fbf6 !important;
	box-shadow: none !important;
}

html body.pu-lesson #ld-focus-content .ld-alert.ld-alert-success .ld-alert-content {
	display: flex !important;
	flex: 1 1 260px;
	align-items: center !important;
	gap: 12px;
	margin: 0 !important;
	padding: 0 !important;
}

html body.pu-lesson #ld-focus-content .ld-alert.ld-alert-success .ld-alert-icon {
	display: grid !important;
	flex: none;
	place-items: center;
	width: 36px !important;
	height: 36px !important;
	margin: 0 !important;
	border-radius: 50% !important;
	background: #0f9f6e !important;
	font-size: 16px !important;
	color: #ffffff !important;
}

html body.pu-lesson #ld-focus-content .ld-alert.ld-alert-success .ld-alert-messages,
html body.pu-lesson #ld-focus-content .ld-alert.ld-alert-success .ld-alert-messages * {
	margin: 0 !important;
	font: 500 15px/1.45 "Pabau Satoshi", "Satoshi", system-ui, sans-serif !important;
	color: #0b6b4a !important;
}

html body.pu-lesson #ld-focus-content .ld-alert.ld-alert-success .ld-button,
html body.pu-lesson #ld-focus-content .ld-alert.ld-alert-success a.ld-button {
	display: inline-flex !important;
	flex: none;
	align-items: center !important;
	gap: 8px !important;
	height: 40px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 16px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: #037cd2 !important;
	background-image: none !important;
	box-shadow: none !important;
	font: 600 14px/1 "Pabau Satoshi", "Satoshi", system-ui, sans-serif !important;
	color: #ffffff !important;
	text-decoration: none !important;
}

html body.pu-lesson #ld-focus-content .ld-alert.ld-alert-success .ld-button:hover {
	background: #0668b0 !important;
}

html body.pu-lesson #ld-focus-content .ld-alert.ld-alert-success .ld-button .ld-icon {
	margin: 0 !important;
	font-size: 12px !important;
	color: inherit !important;
}

html body.pu-lesson #ld-focus-content .ld-alert.ld-alert-success {
	min-height: 0 !important;
}

html body.pu-lesson #ld-focus-content .ld-alert.ld-alert-success .ld-alert-icon {
	position: static !important;
	padding: 0 !important;
	transform: none !important;
}

html body.pu-lesson #ld-focus-content .ld-alert.ld-alert-success .ld-button {
	position: static !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
}

html body.pu-lesson #ld-focus-content .ld-alert.ld-alert-success .ld-button .ld-icon {
	position: static !important;
	order: 2;
	transform: none !important;
}

/* Badges: Thiago's designs (assets/img/badges/<key>.webp), see pabau_university_badge(). */
.pu .badge-img {
	display: block;
	flex: none;
	width: 92px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 1;
}

.pu .badge-img.big {
	width: 128px;
}

.pu .badge-img.small {
	width: 52px;
}

.pu .badge-img.pcb {
	width: 11cqw;
}

.pu .gold-wrap .badge-img {
	width: 100px;
}

.pu .me-cert .badge-img.small {
	width: 40px;
}

.pu .vcard .badge-img {
	justify-self: center;
}

.pu .cert-badges .badge-img {
	width: 96px;
}

/* Homepage: the six role badges on one row, Pabau Expert below. */
.pu .cert .cert-badges {
	gap: 10px;
}

.pu .cert .cert-badges > .badge-img {
	width: 84px;
}

/* LearnDash page switcher ("1 of 3"), wherever it appears: arrows and text on one centred row
   (the brand snippet's margin-top on links pushed the arrows down). */
html body .learndash-wrapper .ld-pagination .ld-pages {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 14px !important;
	min-height: 0 !important;
	padding: 8px 14px !important;
	border-radius: 999px !important;
	line-height: 1 !important;
}

html body .learndash-wrapper .ld-pagination .ld-pages > a,
html body .learndash-wrapper .ld-pagination .ld-pages > span,
html body .learndash-wrapper .ld-pagination .ld-pages .ld-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
	vertical-align: middle !important;
}

html body .learndash-wrapper .ld-pagination .ld-pages > a.prev,
html body .learndash-wrapper .ld-pagination .ld-pages > a.next,
html body .learndash-wrapper .ld-pagination .ld-pages > span.prev,
html body .learndash-wrapper .ld-pagination .ld-pages > span.next {
	width: 28px !important;
	height: 28px !important;
	border-radius: 50% !important;
}

html body :is(#content, #ld-focus-content) .learndash-wrapper .ld-pagination .ld-pages > a,
html body :is(#content, #ld-focus-content) .learndash-wrapper .ld-pagination .ld-pages > span {
	margin: 0 !important;
}

/* ---------------------------------------------------------------------------
 * About page (university/page-about.php): homepage components plus these
 * ------------------------------------------------------------------------ */

.pu .ab-acts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pu .ab-acts .btn {
	padding: 12px 22px;
	font-size: 15.5px;
}

body .pu .ab-ghost,
body .pu .ab-ghost:focus {
	border-color: rgba(255, 255, 255, 0.28);
	background: transparent;
	color: #ffffff;
}

body .pu .ab-ghost:hover {
	border-color: #ffffff;
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

/* Hero visual: the three presenters on a blue card, as in the welcome video frame. */
.pu .ab-visual {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 11;
	max-width: 100%;
	border-radius: 18px;
	background: linear-gradient(135deg, #5aa8ff, #077dff);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}

.pu .ab-team {
	position: absolute;
	inset: 8% 4% 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.pu .ab-team img {
	width: 40%;
	height: auto;
	margin: 0 -5%;
	object-fit: contain;
}

.pu .ab-team img:nth-child(2) {
	position: relative;
	z-index: 1;
	width: 44%;
}

.pu .ab-tag {
	position: absolute;
	z-index: 2;
	bottom: 16px;
	left: 16px;
	display: grid;
	gap: 2px;
	padding: 10px 14px;
	border-radius: 12px;
	background: rgba(18, 29, 54, 0.82);
	backdrop-filter: blur(6px);
	color: #ffffff;
}

.pu .ab-tag .eb {
	font-size: 11px;
	color: #8fd3ff;
}

.pu .ab-tag b {
	font-size: 15px;
}

/* Proof strip: numbers and the review sites. */
.pu .ab-proof {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
}

.pu .ab-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pu .ab-logos li {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 600 14px var(--font);
	color: var(--pb-text);
}

.pu .ab-logos img {
	width: auto;
	height: 26px;
}

/* Cards: who it's for, and the quotes. */
.pu .ab-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.pu .ab-card {
	display: grid;
	align-content: start;
	gap: 10px;
}

.pu .ab-n {
	font: 500 13px var(--mono);
	letter-spacing: 1.5px;
	color: var(--pb-blue);
}

.pu .ab-card h3 {
	font: 700 20px/1.25 var(--font);
	letter-spacing: -0.3px;
}

.pu .ab-card p {
	font-size: 15.5px;
	color: var(--pb-body);
}

.pu .ab-quote {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
}

.pu .ab-quote blockquote {
	flex: 1;
	margin: 0;
	padding: 0;
	border: 0;
}

.pu .ab-quote blockquote p {
	font: 500 17px/1.5 var(--font);
	color: var(--pb-text);
}

.pu .ab-quote figcaption {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 14px;
	border-top: 1px solid var(--pb-grey-03);
}

.pu .ab-quote figcaption img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
}

.pu .ab-quote figcaption b {
	display: block;
	font-size: 15px;
}

.pu .ab-quote figcaption em {
	font-size: 13.5px;
	font-style: normal;
	color: var(--pb-body);
}

.pu .ab-more {
	margin-top: 18px;
	font-size: 15px;
	color: var(--pb-body);
}

@media (max-width: 980px) {
	.pu .ab-cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.pu .ab-hero .in {
		grid-template-columns: minmax(0, 1fr);
	}

	.pu .ab-visual {
		max-width: 560px;
	}
}

.pu .ab-trust {
	margin: 0;
	font-size: 15.5px;
	color: var(--pb-body);
}

.pu .ab-trust b {
	color: var(--pb-text);
}

.pu .ab-quote figcaption,
.pu .ab-quote figcaption b {
	font-style: normal;
}

@media (max-width: 640px) {
	.pu .ab-tag {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * Homepage from Figma (12 Nov): role collections (39520:4164), team photos with the shape behind,
 * questions (39520:4374) and the closing banner. The About page uses the same parts.
 * ------------------------------------------------------------------------ */

.pu .rc-eb {
	display: flex;
	align-items: center;
	gap: 10px;
}

.pu .rc-eb .new {
	padding: 4px 12px;
	border-radius: 999px;
	background: #ecf9fd;
	font: 700 14.5px/1.35 var(--font);
	color: #2badd4;
}

.pu .rcols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.pu .rcol {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #e4e8ef;
	border-radius: 12px;
	background: #ffffff;
	transition: border-color 0.15s;
}

.pu .rcol:hover {
	border-color: var(--pb-blue);
}

.pu .rcol-img {
	aspect-ratio: 374 / 180;
	overflow: hidden;
	background: var(--pb-soft-blue);
}

.pu .rcol-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pu .rcol-b {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 24px;
}

.pu .rcol-n {
	padding: 4px 10px;
	border-radius: 999px;
	background: #eef1f6;
	font: 700 12px/16px var(--font);
	color: #353e51;
}

.pu .rcol h3 {
	font: 700 20px/28px var(--font);
}

body .pu .rcol h3 a {
	color: #121d36;
	text-decoration: none;
}

/* The whole card opens the role; its button sits above that link. */
.pu .rcol h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.pu .rcol p {
	font-size: 15px;
	line-height: 22px;
	color: #4e5768;
}

.pu .rcol-act {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: auto;
}

body .pu .rcol-btn,
body .pu .rcol-btn:focus {
	display: inline-flex;
	align-items: center;
	width: auto;
	margin: 0;
	padding: 4px 10px;
	border: 0.5px solid #d1d5db;
	border-radius: 4px;
	background: #ffffff;
	box-shadow: none;
	font: 500 12px/20px var(--font);
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	color: #1e1b18;
	cursor: pointer;
}

body .pu .rcol-btn:hover {
	border-color: var(--pb-blue);
	background: #ffffff;
	color: var(--pb-blue);
}

/* Team photos: white ground, the Pabau shape behind each person, a fade into the card. */
.pu .prof .ph {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #ffffff;
}

.pu .prof .ph img.shape {
	position: absolute;
	top: 8%;
	left: 50%;
	width: 58%;
	max-width: none;
	height: auto;
	transform: translateX(-50%);
}

/* Sized so all three heads match (Lina's photo has more space above her). */
.pu .prof .ph img.pp {
	position: absolute;
	z-index: 1;
	top: -1%;
	left: 50%;
	width: 82%;
	max-width: none;
	height: auto;
	transform: translateX(-50%);
}

.pu .prof .ph.p-stefani img.pp {
	width: 81%;
}

.pu .prof .ph.p-lina img.pp {
	top: -34%;
	width: 75%;
}

.pu .prof .ph::after {
	content: "";
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 0;
	left: 0;
	height: 22%;
	background: linear-gradient(rgba(255, 255, 255, 0), #ffffff);
}

/* Questions: title and Knowledge Base on the left, the questions on the right. */
.pu .faq-sec {
	padding-block: 96px;
	border-top: 1px solid #e4e8ef;
	background: #ffffff;
}

.pu .faq2 {
	display: grid;
	grid-template-columns: minmax(0, 424px) minmax(0, 1fr);
	align-items: start;
	gap: 64px;
}

.pu .faq2-l {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.pu .faq-sec .faq2-l h2 {
	margin: 0;
}

.pu .faq-sec .faq2-l .lead {
	margin: 0;
	line-height: 28px;
	color: #4e5768;
}

body .pu .kbb {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 24px;
	border: 1px solid #d7dde7;
	border-radius: 999px;
	background: #ffffff;
	font: 700 15px/20px var(--font);
	text-decoration: none;
	color: #121d36;
}

body .pu .kbb:hover {
	border-color: var(--pb-blue);
	color: var(--pb-blue);
}

.pu .faq2-list {
	border-top: 1px solid #e4e8ef;
}

.pu .faq2-list details {
	border-bottom: 1px solid #e4e8ef;
}

.pu .faq2-list summary {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 0;
	font: 700 18px/26px var(--font);
	color: #121d36;
	list-style: none;
	cursor: pointer;
}

.pu .faq2-list summary::-webkit-details-marker {
	display: none;
}

.pu .faq2-list summary span {
	flex: 1;
	min-width: 0;
}

.pu .faq2-list summary svg {
	flex: none;
	color: #6b7485;
}

.pu .faq2-list details[open] summary svg {
	color: var(--pb-blue);
}

.pu .faq2-list p {
	padding: 0 48px 24px 0;
	font-size: 16px;
	line-height: 26px;
	color: #4e5768;
}

/* Closing banner */
.pu .cta {
	background: linear-gradient(180deg, #121d36 0%, #037cd2 100%);
}

@media (max-width: 979.98px) {
	.pu .rcols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pu .faq-sec {
		padding-block: 64px;
	}

	.pu .faq2 {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
}

@media (max-width: 639.98px) {
	.pu .rcols {
		grid-template-columns: minmax(0, 1fr);
	}

	.pu .faq2-list p {
		padding-right: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Responsive fixes (13 Nov 2026, from a 320–1920px audit of academy.pabau.com)
 * ------------------------------------------------------------------------ */

/* Course cards: "7 lessons · 7 core" stays on one line. Preview and Enroll move to their own line
   when the card is too narrow for all three (3 columns at 980–1080px, 2 columns at 640–700px). */
.pu .cc .foot {
	flex-wrap: wrap;
	row-gap: 10px;
}

.pu .cc .foot > span:first-child {
	white-space: nowrap;
}

/* Hero lesson player (homepage, About): the calendar fills the player's full height, with no
   empty band under it when the Get started list is taller. Between 980 and 1120px the hero
   column is too narrow for both, so the list is hidden as on phones. */
.pu .player .screen {
	align-self: stretch;
}

@media (min-width: 980px) and (max-width: 1119.98px) {
	.pu .player {
		grid-template-columns: minmax(0, 1fr);
	}

	.pu .player .side {
		display: none;
	}
}

/* Course page, 640–979px: the enrol card sits under the title at full width, so its cover went
   up to 400px tall. Cover on the left, buttons on the right instead. */
@media (min-width: 640px) and (max-width: 979.98px) {
	.pu .enroll {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	}

	.pu .ecov {
		aspect-ratio: auto;
		min-height: 180px;
	}

	.pu .ebody {
		align-content: center;
	}
}

/* "Up next" never breaks onto two lines (welcome page and lesson bottom bar). */
.pu .upnext > span:first-child,
html body.pu-lesson .learndash-wrapper .pu.pu-upnext .k {
	flex: none;
	white-space: nowrap;
}

/* Lesson bottom bar on phones: LearnDash stacks it in reverse (column-reverse, max-width 640px),
   which turned Up next's 260px flex-basis into a 260px-tall gap under the button. Stack it in
   reading order instead: Up next, then the button, then the video hint. */
@media (max-width: 640px) {
	html body.pu-lesson #ld-focus-content .ld-content-actions {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	html body.pu-lesson #ld-focus-content .ld-content-actions .pu-upnext {
		flex: none;
		margin-right: 0;
	}
}

/* Lesson top bar below 380px: Previous + Next with their labels need 367px, so the bar ran off
   the screen. Previous shows only its arrow there; its label stays for screen readers. */
@media (max-width: 379.98px) {
	html body.pu-lesson #ld-focus-header .ld-content-actions .ld-button:has(.ld-icon-arrow-left) {
		justify-content: center !important;
		width: 36px !important;
		padding: 0 !important;
	}

	html body.pu-lesson #ld-focus-header .ld-content-actions .ld-button:has(.ld-icon-arrow-left) .ld-text {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		overflow: hidden !important;
		clip: rect(0 0 0 0) !important;
		clip-path: inset(50%) !important;
		white-space: nowrap !important;
	}
}

/* reCAPTCHA's badge (sign-up page) is fixed 14px above the bottom right corner and 60px tall:
   keep the footer links clear of it at the end of the page. */
body.pu-site:has(.grecaptcha-badge) .pu-foot__in {
	padding-bottom: 92px;
}

/* 404: Hello Elementor's template (heading and one line) in the University type, lined up with the
   header, with the footer at the bottom of the screen. */
body.error404.pu-site .site-main {
	--pu-404-gutter: 40px;

	box-sizing: border-box;
	width: 100%;
	max-width: calc(1200px + 2 * var(--pu-404-gutter));
	min-height: max(320px, calc(100vh - 200px));
	margin: 0 auto;
	padding: 88px var(--pu-404-gutter) 112px;
	font-family: "Pabau Satoshi", "Satoshi", system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.error404.pu-site .site-main .page-header::before {
	content: "404";
	display: block;
	margin-bottom: 14px;
	font: 500 13px/1 "Pabau DM Mono", "DM Mono", ui-monospace, monospace;
	letter-spacing: 2px;
	color: #037cd2;
}

body.error404.pu-site .site-main .page-header .entry-title {
	width: auto;
	max-width: none;
	margin: 0 0 14px;
	padding: 0;
	font: 700 clamp(32px, 4.2vw, 48px)/1.1 "Pabau Satoshi", "Satoshi", system-ui, sans-serif;
	letter-spacing: -1px;
	color: #1e1b18;
}

body.error404.pu-site .site-main .page-content p {
	margin: 0;
	font-size: 17px;
	line-height: 1.5;
	color: #4a5565;
}

@media (max-width: 1279.98px) {
	body.error404.pu-site .site-main {
		--pu-404-gutter: 32px;
	}
}

@media (max-width: 639.98px) {
	body.error404.pu-site .site-main {
		--pu-404-gutter: 20px;

		padding-top: 56px;
		padding-bottom: 80px;
	}
}

/* What practices say (homepage, Thiago 13 Nov 2026): quote cards like pabau.com's testimonials. */
.pu .tq {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 24px;
}

.pu .tq .card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	padding: 24px;
}

body .pu .tq blockquote {
	flex: 1;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 17px;
	font-style: normal;
	line-height: 1.55;
	color: var(--pb-text);
	quotes: none;
}

.pu .tq .tq-by {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--pb-grey-03);
}

.pu .tq .tq-av {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(160deg, #5aa8ff, #077dff);
	font: 700 15px var(--font);
	color: #ffffff;
}

.pu .tq .tq-id {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.pu .tq .tq-id b {
	font-size: 15.5px;
	line-height: 1.3;
}

.pu .tq .tq-id small {
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--pb-body);
}

@media (max-width: 979.98px) {
	.pu .tq {
		grid-template-columns: minmax(0, 1fr);
	}
}

body .pu .tq .tq-by,
body .pu .tq .tq-by * {
	font-style: normal;
}

/* ---------------------------------------------------------------------------
 * Lesson page, Thiago's feedback (13 Nov 2026): top bar ‹ Previous / Next ›, one button at the
 * bottom, clickable timestamps and the lesson text sections.
 * ------------------------------------------------------------------------ */

/* Top bar: ✕, title, then ‹ Previous (outline) and Next › (blue). LearnDash's own Previous / Next
   stay on phones, where our bar is hidden. */
html body.pu-lesson #ld-focus-header .pu-ftop .pu-ft {
	flex: 1 1 auto;
	min-width: 0;
}

html body.pu-lesson #ld-focus-header .pu-fnav {
	display: flex;
	flex: none;
	align-items: center;
	gap: 8px;
	margin: 0 0 0 auto;
	padding: 0 24px 0 0;
}

html body.pu-lesson #ld-focus-header .pu-fnav a,
html body.pu-lesson #ld-focus-header .pu-fnav span {
	display: inline-flex;
	align-items: center;
	height: 36px;
	margin: 0 !important;
	padding: 0 14px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #ffffff;
	font: 600 14px/1 "Pabau Satoshi", "Satoshi", system-ui, sans-serif;
	color: #1e1b18 !important;
	text-decoration: none !important;
	white-space: nowrap;
}

html body.pu-lesson #ld-focus-header .pu-fnav a.pv:hover {
	border-color: #037cd2;
	color: #037cd2 !important;
}

html body.pu-lesson #ld-focus-header .pu-fnav .nx {
	border-color: #037cd2;
	background: #037cd2;
	color: #ffffff !important;
}

html body.pu-lesson #ld-focus-header .pu-fnav a.nx:hover {
	border-color: #0668b0;
	background: #0668b0;
}

html body.pu-lesson #ld-focus-header .pu-fnav .off {
	opacity: 0.4;
}

@media (min-width: 769px) {
	html body.pu-lesson #ld-focus-header .pu-ftop ~ .ld-content-actions {
		display: none !important;
	}
}

/* Bottom bar: one button. "Mark complete and continue" while the lesson is open (greyed out until
   the video has played to the end), "Next Lesson" once it's done, "Back to Course" after the last
   lesson. Previous and the course are in the top bar. */
html body.pu-lesson #ld-focus-content .ld-content-actions:has(.sfwd-mark-complete) > .ld-content-action:not(:has(.sfwd-mark-complete)) {
	display: none !important;
}

html body.pu-lesson #ld-focus-content .ld-content-actions:not(:has(.sfwd-mark-complete)) .ld-content-action:last-child .ld-button:not(.learndash_mark_complete_button) {
	border: 0 !important;
	background: #037cd2 !important;
	color: #ffffff !important;
}

html body.pu-lesson #ld-focus-content .ld-content-actions:not(:has(.sfwd-mark-complete)) .ld-content-action:last-child .ld-button:not(.learndash_mark_complete_button):hover {
	background: #0668b0 !important;
	color: #ffffff !important;
}

html body.pu-lesson #ld-focus-content .ld-content-actions:not(:has(.sfwd-mark-complete)):not(:has(.ld-content-action:last-child .ld-button)) .ld-course-step-back {
	display: inline-flex !important;
	align-items: center;
	height: 46px;
	padding: 0 22px;
	border-radius: 8px;
	background: #037cd2;
	font: 600 15px/1 "Pabau Satoshi", "Satoshi", system-ui, sans-serif;
	color: #ffffff !important;
	text-decoration: none !important;
}

html body.pu-lesson #ld-focus-content .ld-content-actions:not(:has(.sfwd-mark-complete)):not(:has(.ld-content-action:last-child .ld-button)) > .ld-content-action:has(.ld-course-step-back) {
	display: flex !important;
}

/* "In this lesson": the timestamps play the video from that point. */
html body.pu-lesson #ld-focus-content .pu-ts {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: #037cd2;
	cursor: pointer;
}

html body.pu-lesson #ld-focus-content .pu-ts:hover,
html body.pu-lesson #ld-focus-content .pu-ts:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The "Lesson page" text: By the end you can…, What this lesson covers, the transcript. */
html body.pu-lesson #ld-focus-content .pu-byend {
	margin: 0 0 24px;
	padding: 12px 16px;
	border-left: 3px solid #037cd2;
	border-radius: 0 10px 10px 0;
	background: #f4f9fd;
	font-size: 15.5px;
	line-height: 1.55;
	color: #4a5565;
}

html body.pu-lesson #ld-focus-content .pu-byend b {
	color: #1e1b18;
}

html body.pu-lesson #ld-focus-content .pu-steps {
	display: grid;
	gap: 12px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	counter-reset: pu-step;
}

html body.pu-lesson #ld-focus-content .pu-steps li {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	gap: 12px;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	counter-increment: pu-step;
}

html body.pu-lesson #ld-focus-content .pu-steps li::before {
	content: counter(pu-step);
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #e3f1fb;
	font: 600 14px/1 "Pabau Satoshi", "Satoshi", system-ui, sans-serif;
	color: #037cd2;
}

html body.pu-lesson #ld-focus-content .pu-steps b {
	display: block;
	margin-bottom: 2px;
	color: #1e1b18;
}

html body.pu-lesson #ld-focus-content .pu-steps span {
	font-size: 15px;
	color: #4a5565;
}

html body.pu-lesson #ld-focus-content details.pu-tr {
	margin: 0 0 8px;
	padding: 14px 16px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #ffffff;
}

html body.pu-lesson #ld-focus-content details.pu-tr summary {
	font-weight: 600;
	color: #1e1b18;
	cursor: pointer;
}

html body.pu-lesson #ld-focus-content details.pu-tr ol {
	display: grid;
	gap: 8px;
	max-width: 72ch;
	margin: 12px 0 0;
	padding-left: 20px;
	font-size: 15px;
	color: #4a5565;
}

html body.pu-lesson #ld-focus-content details.pu-tr li {
	margin: 0;
}

/* What practices say, from Figma (node 39568:4916, 13 Nov 2026): grey band, quote first, then the
   headshot, name and role, without a divider. Overrides the first version above. */
.pu .sec.tqs {
	background: #f5f7fa;
}

.pu .tqs .tq {
	gap: 20px;
	margin-top: 54px;
}

.pu .tqs .tq .card {
	gap: 16px;
	padding: 24px;
	border: 1px solid #e4e8ef;
	border-radius: 12px;
	background: #ffffff;
}

body .pu .tqs .tq blockquote {
	font: 500 16px/22px var(--font);
	color: #1e1b18;
}

.pu .tqs .tq .tq-by {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	border: 0;
}

.pu .tqs .tq .tq-av {
	flex: none;
	width: 43px;
	height: 43px;
	border-radius: 50%;
	background: #e8e4f7;
	object-fit: cover;
}

.pu .tqs .tq .tq-id {
	gap: 4px;
}

.pu .tqs .tq .tq-id b {
	font: 500 14px/1.45 var(--font);
	color: #1e1b18;
}

.pu .tqs .tq .tq-id small {
	font: 400 12px/1.45 var(--font);
	letter-spacing: 0.01px;
	color: #6b7280;
}

/* Hero image (homepage and About, 13 Nov 2026): the lesson next to the calendar, as sent. */
.pu .hshot {
	width: 100%;
	max-width: 680.5px;
}

.pu .hshot img {
	display: block;
	width: 100%;
	height: auto;
}