/**
 * Jones - LearnDash course page (LD30 course.php override).
 *
 * Scoped to .jld so nothing here leaks into lesson/quiz templates.
 */

:root {
	/* 1016, not a round 1000: the Figma frames put the dotted rules at
	   212/466/720/974/1228 on a 1440 frame - a 1016 span - with the content
	   column at 228 x 984 inside it. Both the landing and the logged-in frame
	   agree. */
	--jld-col: 1016px;
	--jld-band-inset: 30px;
	/* Gap between the content column's edge and the dotted column rules, which
	   sit on the body box itself. The design keeps the cards and headings clear
	   of the outer rules rather than flush against them. */
	--jld-rule-gap: 16px;
	/* How far the landing hero's signup card breaks out past the right rule.
	   Lives here with the other geometry tokens; only ld-landing.css uses it. */
	--jld-lp-card-out: 19px;
	--jld-ink: #1f2023;
	/* #4b5563, not #6b7280: the old grey is 4.83:1 on white, which passes there
	   and fails on every tinted surface it is actually used on - the lesson head
	   band, the quiz shell, and the illustration behind them. Measured against
	   the rendered pixels, secondary text was landing at 3.12-4.46:1 in seven
	   places. This is the same grey the hero intro already used. */
	--jld-muted: #4b5563;
	--jld-faint: #b7bfcc;
	--jld-line: #e6eaf1;
	--jld-green: #00bb4b;
	--jld-radius: 12px;
}

/* ------------------------------------------------------------ host reset */

/* These templates supply their own H1; the theme's page header duplicates it. */
.single-sfwd-courses .page-header,
.single-sfwd-lessons .page-header,
.single-sfwd-quiz .page-header {
	display: none;
}

.single-sfwd-courses #content,
.single-sfwd-courses .page-content,
.single-sfwd-lessons #content,
.single-sfwd-lessons .page-content,
.single-sfwd-quiz #content,
.single-sfwd-quiz .page-content {
	max-width: none;
	padding: 0;
	margin: 0;
}

/* The brand face is registered by Typekit as `sofia-pro`; the site's own
   `"Sofia Pro"` stack silently falls back to the system sans, which throws the
   metrics off. Pin the real family, over LD30's own `.learndash-wrapper *`. */
.jld,
.jld.learndash-wrapper,
.jld.learndash-wrapper * {
	font-family: sofia-pro, "Sofia_Pro_New", "Sofia Pro", sans-serif;
}

.jld {
	--jld-gutter: max(var(--jld-band-inset), calc((100% - var(--jld-col)) / 2));
	color: var(--jld-ink);
}

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

/* ------------------------------------------------------------------ hero */

.jld-hero {
	position: relative;
	display: block;
	margin: 0 var(--jld-band-inset);
	padding: 174px 0 60px;
	isolation: isolate;
}

.jld-hero__col {
	position: relative;
	z-index: 1;
	max-width: var(--jld-col);
	margin: 0 auto;
	/* Same inset as .jld-body, or the hero copy sits --jld-rule-gap left of the
	   cards below it. Both boxes are centred, so paying it here keeps them
	   aligned at every width. */
	padding: 0 var(--jld-rule-gap);
}

.jld-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
	padding: 8px 16px 8px 12px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(31, 32, 35, .06), 0 4px 14px rgba(31, 32, 35, .06);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	color: var(--jld-ink);
}

.jld-hero__eyebrow-icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
	color: #4b5563;
}

.jld-hero__eyebrow-icon svg {
	width: 100%;
	height: 100%;
}

.jld .jld-hero__title {
	margin: 0;
	max-width: 660px;
	font-size: clamp(36px, 5vw, 72px);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -.025em;
	color: var(--jld-ink);
}

.jld-hero__intro br {
	display: inline;
}

.jld-hero__intro {
	margin: 22px 0 0;
	max-width: 625px;
	font-size: 17px;
	line-height: 1.5;
	color: #4b5563;
}

/* The asset is a wide pre-composed scene: the figure sits in its right half,
   with a long tail of pale wash to the left. Placed whole, that wash runs under
   the headline and the intro - which is what the design does NOT do; its
   illustration starts clear of the text. So the box is a window on the right of
   the scene, and the image is zoomed and pulled left inside it. Keeping the
   figure at the design's size while starting it that far right means the image
   runs past the viewport edge, hence the window: --jld-band-inset of negative
   right offset puts the window's edge exactly on the viewport's, so the
   overflow is clipped rather than added to scrollWidth.
   --art-zoom / --art-shift are read by .jld-hero__art-img; the landing hero and
   every width below 900px reset them and place the scene whole. */
.jld-hero__art {
	--art-zoom: 152%;
	--art-shift: -26.4%;
	/* Where the scene starts dissolving into the page at the bottom. The window
	   is taller than the hero, so without it the image ends on a straight
	   horizontal edge across the cards. */
	--art-fade: 82%;
	position: absolute;
	inset: auto calc(-1 * var(--jld-band-inset)) -300px auto;
	width: min(41.5%, 620px);
	overflow: hidden;
	/* Without this the window's left edge is a straight vertical seam through the
	   middle of the scene. The fade lets it start the way the design's does. */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%);
	mask-image: linear-gradient(to right, transparent 0, #000 14%);
	z-index: -1;
	pointer-events: none;
}

.jld-hero__art-img,
.jld-hero__art img {
	position: relative;
	left: var(--art-shift);
	width: var(--art-zoom);
	max-width: none;
	height: auto;
	-webkit-mask-image: linear-gradient(to bottom, #000 0 var(--art-fade), transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0 var(--art-fade), transparent 100%);
	mix-blend-mode: multiply;
	display: block;
}

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

.jld-body {
	position: relative;
	max-width: var(--jld-col);
	margin: 0 auto;
	padding: 0 var(--jld-rule-gap) 110px;
}

/* Faint dotted column rules behind the cards. */
/* z-index -1, not 0: the hero illustration bleeds 300px past the hero and into
   this box, and at 0 the rules are positioned + later in the DOM, so they were
   painted on top of it. Negative z puts them behind every in-flow background in
   the stacking context - the hero art, and the lesson cards over it. */
.jld-grid {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
	z-index: -1;
}

.jld-grid span {
	width: 1px;
	background-image: linear-gradient(to bottom, var(--jld-line) 0 4px, transparent 4px 9px);
	background-size: 1px 9px;
}

/* ----------------------------------------------------------------- steps */

.jld-steps {
	position: relative;
	z-index: 1;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.jld-step {
	background: #fff;
	border: 1px solid var(--jld-line);
	border-radius: var(--jld-radius);
	box-shadow: 0 1px 2px rgba(31, 32, 35, .04), 0 6px 18px rgba(31, 32, 35, .04);
	transition: box-shadow .18s ease, border-color .18s ease;
}

.jld-step:hover {
	border-color: #d6dce6;
	box-shadow: 0 2px 4px rgba(31, 32, 35, .05), 0 10px 26px rgba(31, 32, 35, .07);
}

.jld .jld-step__head {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) 12% auto 40px;
	align-items: center;
	width: 100%;
	padding: 24px 28px 24px 24px;
	border: 0;
	border-radius: var(--jld-radius);
	background: transparent;
	background-color: transparent;
	font: inherit;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	color: var(--jld-ink);
	box-shadow: none;
	white-space: normal;
}

.jld .jld-step__head:hover,
.jld .jld-step__head:focus {
	background-color: transparent;
	color: var(--jld-ink);
}

.jld-step__num {
	font-size: 17px;
	font-weight: 400;
	color: var(--jld-faint);
	font-variant-numeric: tabular-nums;
}

.jld-step__text {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.jld-step__title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--jld-ink);
}

.jld-step__blurb {
	font-size: 16px;
	line-height: 1.35;
	color: var(--jld-muted);
}

.jld-step__time {
	font-size: 16px;
	color: var(--jld-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.jld-step__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-left: auto;
	color: var(--jld-ink);
	transition: transform .22s ease;
}

.jld-step__toggle svg {
	width: 100%;
	height: 100%;
}

.jld-step__head[aria-expanded="true"] .jld-step__toggle {
	transform: rotate(45deg);
}

.jld-step__head:focus-visible {
	outline: 2px solid var(--jld-green);
	outline-offset: -2px;
	border-radius: var(--jld-radius);
}

/* ----------------------------------------------------------------- chips */

.jld-step__chips {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	justify-content: flex-end;
	min-width: 0;
}

.jld-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

.jld-chip svg {
	width: 11px;
	height: 11px;
}

.jld-chip--watched {
	background: #e6f7ee;
	color: #04913c;
}

.jld-chip--quiz {
	background: #e8f0fe;
	color: #1d6ae5;
}

/* The toggle becomes a close control while the row is open. */
.jld-step__icon-close,
.jld-step.is-open .jld-step__icon-plus {
	display: none;
}

.jld-step.is-open .jld-step__icon-close {
	display: block;
}

.jld-step__head[aria-expanded="true"] .jld-step__toggle {
	transform: none;
	color: var(--jld-muted);
}

/* ----------------------------------------------------------------- panel */

.jld-step__panel[hidden] {
	display: none;
}

.jld-step__panel-inner {
	display: grid;
	grid-template-columns: minmax(0, 617px) minmax(0, 1fr);
	align-items: start;
	gap: 28px 36px;
	margin: 0 28px 0 24px;
	padding: 4px 0 30px 56px;
}

.jld-player {
	border-radius: 10px;
	overflow: hidden;
	background: #eef2f7;
	box-shadow: 0 1px 2px rgba(31, 32, 35, .06), 0 10px 28px rgba(31, 32, 35, .08);
}

.jld-player video,
.jld-player img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 606 / 337;
	object-fit: cover;
	background: #0f1114;
}

.jld-player--locked {
	position: relative;
}

.jld-player--locked::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, .35);
}

.jld-step__aside {
	padding-top: 6px;
}

.jld-step__toc-title {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
	color: var(--jld-ink);
}

.jld-step__toc {
	margin: 0 0 22px;
	padding-left: 18px;
	list-style: disc;
}

.jld-step__toc li {
	margin-bottom: 7px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--jld-muted);
}

.jld .jld-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 22px;
	border: 0;
	border-radius: 7px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}

.jld .jld-btn--dark {
	background-color: var(--jld-ink);
	color: #fff;
}

.jld .jld-btn--dark:hover {
	background-color: #000;
	color: #fff;
}

.jld .jld-btn--ghost {
	background-color: transparent;
	border: 1px solid var(--jld-line);
	color: var(--jld-ink);
}

.jld .jld-btn--ghost:hover {
	border-color: var(--jld-ink);
}

.jld-step__desc {
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--jld-muted);
}

.jld .jld-step__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--jld-ink);
	text-decoration: none;
}

.jld .jld-step__link svg {
	width: 16px;
	height: 16px;
	transition: transform .18s ease;
}

.jld .jld-step__link:hover svg {
	transform: translateX(3px);
}

/* Completed lessons swap the step number for a tick. */
.jld-step__tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--jld-green);
	color: #fff;
}

.jld-step__tick svg {
	width: 13px;
	height: 13px;
}

.jld-step.is-complete .jld-step__title {
	color: var(--jld-ink);
}

/* -------------------------------------------------------------- enrol CTA */

.jld-hero__cta {
	margin-top: 30px;
}

.jld-hero__cta .learndash_join_button,
.jld-hero__cta form {
	margin: 0;
}

.jld .jld-hero__cta input[type="submit"],
.jld .jld-hero__cta button,
.jld .jld-hero__cta .btn-join {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 26px;
	border: 0;
	border-radius: 8px;
	background-color: var(--jld-ink);
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .18s ease;
}

.jld .jld-hero__cta input[type="submit"]:hover,
.jld .jld-hero__cta button:hover,
.jld .jld-hero__cta .btn-join:hover {
	background-color: #000;
}

.jld-hero__cta-note {
	margin: 12px 0 0;
	font-size: 14px;
	color: var(--jld-muted);
}

.jld-step__locked {
	margin: 0;
	font-size: 15px;
	color: var(--jld-muted);
}

.jld .jld-step__locked a {
	color: var(--jld-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------- summary */

.jld-summary {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	align-items: center;
	gap: 0 12px;
	margin-top: 40px;
	padding: 30px 28px 30px 24px;
	background: #fff;
	border: 1px solid var(--jld-line);
	border-radius: var(--jld-radius);
	box-shadow: 0 1px 2px rgba(31, 32, 35, .04), 0 6px 18px rgba(31, 32, 35, .04);
}

/* ------------------------------------------------------- course complete */

/* The retired Typeform course marked the end of the course with a green strip
   reading "Congratulations!!!"; the rebuild had nothing in its place, so a
   learner who finished everything saw only the counters tick over. The Figma
   "complete" frame does not specify this state - it renders the page at 95%
   with the exam untaken - so this is built in the page's own vocabulary, in the
   greens the old strip used. */
.jld-done {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-top: 40px;
	padding: 20px 24px;
	border: 1px solid #ccffe0;
	border-radius: var(--jld-radius);
	background: #ecfff4;
}

/* Sits directly under the panel, so it does not pay the 40px again. */
.jld-done + .jld-summary {
	margin-top: 16px;
}

.jld-done__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: #007d32;
	color: #fff;
}

.jld-done__mark svg {
	width: 14px;
	height: 14px;
}

.jld-done__title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--jld-ink);
}

.jld-done__note {
	margin: 4px 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: #3f6b52;
}

.jld-summary__ring {
	width: 40px;
	height: 40px;
}

.jld-summary__ring svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.jld-summary__ring-fg {
	transition: stroke-dashoffset .5s ease;
}

.jld-summary__stats {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, max-content);
	justify-content: start;
	gap: 0 80px;
	margin: 0;
}

.jld-stat {
	min-width: 0;
}

.jld-stat__value {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--jld-ink);
	font-variant-numeric: tabular-nums;
}

.jld-stat__label {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.3;
	color: var(--jld-muted);
}

.jld .jld-summary__exam {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	justify-self: end;
	padding: 10px 22px;
	border: 0;
	border-radius: 6px;
	background-color: #9aa1ad;
	color: #fff;
	-webkit-text-fill-color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background .18s ease;
}

.jld a.jld-summary__exam.is-ready {
	background-color: var(--jld-ink);
	color: #fff;
}

.jld .jld-summary__exam:hover:not(:disabled) {
	background-color: #000;
	color: #fff;
}

.jld .jld-summary__exam:disabled {
	cursor: not-allowed;
	opacity: 1;
	color: #fff;
}

.jld .jld-step__link--quiz {
	color: var(--jld-muted);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.jld .jld-step__link--quiz.is-passed {
	color: var(--jld-green);
}

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

@media (max-width: 1180px) {
	.jld-hero__art {
		width: 42%;
		opacity: .9;
	}
}

@media (max-width: 900px) {
	:root {
		--jld-band-inset: 16px;
		/* The rules are hidden at this width, so there is nothing to clear. */
		--jld-rule-gap: 0px;
	}

	.jld-hero {
		padding: 120px 0 60px;
	}

	.jld-hero__col {
		max-width: none;
		padding: 0 var(--jld-band-inset);
	}

	/* The design bleeds a ~1100px-wide illustration across a 393px phone, so it
	   reads as a wash rather than a picture. Anchoring to right:0 and letting it
	   run off to the LEFT keeps that scale without widening the document -
	   overflow past the left edge does not add to scrollWidth, overflow past the
	   right edge does. (width:100% fixed the sideways scroll but shrank it to a
	   smudge behind the first card.) */
	.jld-hero__art {
		/* Whole scene again: at this width it is a wash behind the copy, not a
		   picture beside it, and the window/zoom would blow it up. */
		--art-zoom: 100%;
		--art-shift: 0;
		inset: auto 0 -70px auto;
		width: 175%;
		/* .22, not .3: the intro paragraph sits over the busiest part of the
		   illustration at this width, and .3 dropped 4% of its area below the
		   4.5:1 body-text contrast floor. */
		opacity: .22;
	}

	.jld-body {
		margin-top: -40px;
		padding-left: var(--jld-band-inset);
		padding-right: var(--jld-band-inset);
	}

	.jld-grid {
		display: none;
	}

	.jld .jld-step__head {
		grid-template-columns: 40px minmax(0, 1fr) 28px;
		gap: 0 8px;
		padding: 20px 18px;
		align-items: start;
	}

	.jld-step__chips {
		grid-column: 2;
		grid-row: 3;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin-top: 10px;
	}

	.jld-step__panel-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		margin: 0 18px;
		padding: 0 0 24px;
	}

	.jld-step__num {
		line-height: 1.3;
	}

	.jld-step__time {
		grid-column: 2;
		grid-row: 2;
		margin-top: 10px;
		font-size: 15px;
	}

	.jld-step__toggle {
		grid-column: 3;
		grid-row: 1;
		width: 20px;
		height: 20px;
		margin-top: 2px;
	}

	.jld-step__title,
	.jld-step__blurb {
		overflow-wrap: anywhere;
	}

	.jld-step__panel-inner {
		margin: 0 20px;
		padding-left: 0;
	}

	.jld-summary {
		grid-template-columns: 40px minmax(0, 1fr);
		gap: 16px 12px;
		padding: 20px;
	}

	.jld-summary__stats {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 12px;
	}

	.jld-summary__exam {
		grid-column: 1 / -1;
		justify-self: stretch;
		text-align: center;
	}
}

/* =========================================================================
   Lesson view (learndash/ld30/lesson.php)

   No lesson design was supplied, so this borrows the course page's band,
   column, card and type treatment.
   ========================================================================= */

.jls-head {
	position: relative;
	margin: 0 var(--jld-band-inset);
	padding: 150px 0 44px;
}

.jls-head::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, #eaf0f8 0%, #f4f7fb 45%, #fdfdfe 100%);
	-webkit-mask-image: linear-gradient(to bottom, #000 0 72%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0 72%, transparent 100%);
	z-index: -1;
}

.jls-head__col {
	max-width: var(--jld-col);
	margin: 0 auto;
}

.jld .jls-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 26px;
	font-size: 15px;
	font-weight: 500;
	color: var(--jld-muted);
	text-decoration: none;
}

.jld .jls-back:hover {
	color: var(--jld-ink);
}

.jls-back svg {
	width: 16px;
	height: 16px;
}

.jls-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--jld-muted);
}

.jls-eyebrow__step {
	font-weight: 600;
	color: var(--jld-ink);
	letter-spacing: .02em;
	text-transform: uppercase;
	font-size: 13px;
}

.jls-eyebrow__time::before {
	content: "·";
	margin-right: 10px;
}

.jls-eyebrow__done {
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(0, 187, 75, .12);
	color: #04913c;
	font-size: 13px;
	font-weight: 600;
}

.jld .jls-title {
	margin: 0;
	font-size: clamp(30px, 3.4vw, 48px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.02em;
	color: var(--jld-ink);
}

.jls-progress {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 26px;
	max-width: 420px;
}

.jls-progress__bar {
	flex: 1;
	height: 6px;
	border-radius: 999px;
	background: #d5dce9;
	overflow: hidden;
}

.jls-progress__bar span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--jld-green);
	transition: width .4s ease;
}

.jls-progress__label {
	font-size: 14px;
	color: var(--jld-muted);
	white-space: nowrap;
}

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

.jls-body {
	max-width: var(--jld-col);
	margin: 0 auto;
	padding: 40px var(--jld-band-inset) 100px;
}

/* The video LearnDash injects into the content. */
.jls-stage {
	border-radius: var(--jld-radius);
	overflow: hidden;
	background: #0f1114;
	box-shadow: 0 2px 6px rgba(31, 32, 35, .08), 0 18px 44px rgba(31, 32, 35, .1);
}

.jls-stage video,
.jls-stage iframe,
.jls-stage .mejs-container,
.jls-stage .wp-video,
.jls-stage .wp-video-shortcode {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: 100%;
}

.jls-stage p:empty {
	display: none;
}

.jls-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-top: 26px;
}

.jld .jls-actions .learndash_mark_complete_button,
.jld .jls-actions input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 26px;
	border: 0;
	border-radius: 8px;
	background-color: var(--jld-ink);
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .18s ease;
}

.jld .jls-actions input[type="submit"]:hover {
	background-color: #000;
}

.jld .jls-actions input[type="submit"]:disabled {
	background-color: #9aa1ad;
	cursor: not-allowed;
}

.jld .jls-quiz-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--jld-ink);
	text-decoration: none;
}

.jls-quiz-link svg {
	width: 16px;
	height: 16px;
	transition: transform .18s ease;
}

.jld .jls-quiz-link:hover svg {
	transform: translateX(3px);
}

/* ---------------------------------------------------------------- panels */

.jls-panels {
	display: grid;
	gap: 16px;
	margin-top: 40px;
}

.jls-card {
	padding: 24px 28px;
	background: #fff;
	border: 1px solid var(--jld-line);
	border-radius: var(--jld-radius);
	box-shadow: 0 1px 2px rgba(31, 32, 35, .04), 0 6px 18px rgba(31, 32, 35, .04);
}

.jld .jls-card__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--jld-ink);
}

.jls-chapters {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.jls-chapter {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr);
	align-items: baseline;
	gap: 12px;
	font-size: 16px;
}

.jls-chapter__time {
	color: var(--jld-faint);
	font-variant-numeric: tabular-nums;
}

.jls-chapter__label {
	color: var(--jld-ink);
}

/* ------------------------------------------------------------- transcript */

.jls-card--transcript {
	padding: 0;
}

.jls-transcript__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 28px;
	cursor: pointer;
	list-style: none;
}

.jls-transcript__summary::-webkit-details-marker {
	display: none;
}

.jls-transcript__icon {
	display: inline-flex;
	width: 22px;
	height: 22px;
	color: var(--jld-ink);
	transition: transform .22s ease;
}

.jls-transcript__icon svg {
	width: 100%;
	height: 100%;
}

.jls-transcript[open] .jls-transcript__icon {
	transform: rotate(45deg);
}

.jls-transcript__body {
	padding: 4px 28px 28px;
	max-height: 460px;
	overflow-y: auto;
}

.jls-transcript__body p {
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--jld-muted);
}

/* -------------------------------------------------------------- lesson nav */

.jls-nav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 40px;
	padding-top: 26px;
	border-top: 1px solid var(--jld-line);
}

.jld .jls-nav a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--jld-ink);
	text-decoration: none;
}

.jld .jls-nav a:hover {
	color: #000;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.jld .jls-nav .prev-link:only-child {
	margin-right: auto;
}

@media (max-width: 900px) {
	.jls-head {
		padding: 110px 0 32px;
	}

	.jls-head__col,
	.jls-body {
		padding-left: var(--jld-band-inset);
		padding-right: var(--jld-band-inset);
	}

	.jls-progress {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	/* flex:1 is flex-basis:0%, which applies to HEIGHT once the container turns
	   into a column - so the bar collapsed to 0px and the track vanished on
	   every phone, while still being present, coloured and correctly labelled. */
	.jls-progress__bar {
		flex: 0 0 6px;
	}

	.jls-chapter {
		grid-template-columns: 54px minmax(0, 1fr);
	}
}

@media (max-width: 900px) {
	.jld-done {
		padding: 18px;
		gap: 12px;
	}

	.jld-done__title {
		font-size: 17px;
	}

	.jld-done__note {
		font-size: 14px;
	}
}

/* =========================================================================
   Quiz view (learndash/ld30/quiz.php)

   The ProQuiz markup is LearnDash's; everything here restyles it into the
   design's lettered A/B/C/D layout with the course illustration alongside.
   ========================================================================= */

/* No min-height: ProQuiz renders only a button on the start and results
   screens, so reserving 78vh left the page looking unfinished - a lone button
   in a ~700px void. The band is sized by its content now. */
.jlq-shell {
	position: relative;
	margin: 0 var(--jld-band-inset);
	padding: 150px 0 90px;
	isolation: isolate;
}

/* Faded rather than stopped dead: the tinted band otherwise ends on a straight
   line across the full width, right where the page turns white. */
.jlq-shell::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, #eef2f8 0%, #f7f9fc 40%, #fff 100%);
	-webkit-mask-image: linear-gradient(to bottom, #000 0 68%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0 68%, transparent 100%);
	z-index: -2;
}

.jlq-art {
	position: absolute;
	inset: auto 0 0 auto;
	width: min(38%, 560px);
	overflow: hidden;
	/* The illustration's own pale ground is sunk into the band by multiply, but
	   the image still ends on an edge; fading its last sliver settles it into
	   the page instead of cutting it off. */
	-webkit-mask-image: linear-gradient(to bottom, #000 0 76%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0 76%, transparent 100%);
	z-index: -1;
	pointer-events: none;
}

.jlq-art__img {
	display: block;
	width: 100%;
	height: auto;
	mix-blend-mode: multiply;
}

.jlq-col {
	position: relative;
	max-width: var(--jld-col);
	margin: 0 auto;
}

.jlq-body {
	max-width: 620px;
}

.jlq-locked {
	margin: 16px 0 24px;
	font-size: 17px;
	color: var(--jld-muted);
}

/* ------------------------------------------------------- ProQuiz restyle */

.jld .wpProQuiz_content {
	margin: 0;
}

.jld .wpProQuiz_header,
.jld .wpProQuiz_catOverview,
.jld .wpProQuiz_time_limit,
.jld .wpProQuiz_quiz_time,
.jld .wpProQuiz_reviewDiv,
.jld .wpProQuiz_reviewSummary,
.jld .wpProQuiz_toplistTrophy {
	display: none;
}

.jld .wpProQuiz_question_text {
	margin: 0 0 26px;
	font-size: clamp(22px, 2.2vw, 30px);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--jld-ink);
}

.jld div.wpProQuiz_questionList {
	margin: 0;
	padding: 0;
	border: 0;
	counter-reset: jlq-answer;
}

.jld .wpProQuiz_content div.wpProQuiz_questionList div.wpProQuiz_questionListItem {
	counter-increment: jlq-answer;
	display: flex;
	/* LearnDash lays these out as a centred column; the design is a left row. */
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	gap: 12px;
	margin: 0 0 10px;
	padding: 12px 16px;
	border: 0;
	border-radius: 8px;
	background: #f1f3f6;
	font-size: 17px;
	line-height: 1.35;
	color: var(--jld-ink);
	cursor: pointer;
	transition: background-color .15s ease;
}

.jld .wpProQuiz_content div.wpProQuiz_questionList div.wpProQuiz_questionListItem:hover {
	background: #e7eaef;
}

/* Picked, before the quiz is submitted.
   ProQuiz checks the radio but adds no class of its own, so there was nothing
   to see: every answer looked identical after clicking one. `:has()` covers
   current browsers and ld-course.js adds .is-picked for anything older - this
   is the one piece of feedback the screen cannot do without. Blue, so it stays
   distinct from the green/red the answers turn after grading. */
.jld .wpProQuiz_content div.wpProQuiz_questionList div.wpProQuiz_questionListItem.is-picked,
.jld .wpProQuiz_content div.wpProQuiz_questionList div.wpProQuiz_questionListItem:has( input:checked ) {
	background: #e8f0fe;
	box-shadow: inset 0 0 0 2px #1d6ae5;
}

.jld .wpProQuiz_content div.wpProQuiz_questionList div.wpProQuiz_questionListItem.is-picked::before,
.jld .wpProQuiz_content div.wpProQuiz_questionList div.wpProQuiz_questionListItem:has( input:checked )::before {
	background: #1d6ae5;
}

/* Once graded, the verdict outranks the selection. */
.jld .wpProQuiz_content div.wpProQuiz_answerCorrect,
.jld .wpProQuiz_content div.wpProQuiz_answerCorrect:has( input:checked ),
.jld .wpProQuiz_content div.wpProQuiz_answerIncorrect,
.jld .wpProQuiz_content div.wpProQuiz_answerIncorrect:has( input:checked ) {
	box-shadow: none;
}

/* The lettered badge the design puts in front of every answer. */
.jld .wpProQuiz_content div.wpProQuiz_questionList div.wpProQuiz_questionListItem::before {
	content: counter(jlq-answer, upper-alpha);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 5px;
	background: var(--jld-ink);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.jld .wpProQuiz_content div.wpProQuiz_questionList div.wpProQuiz_questionListItem > label {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	cursor: pointer;
}

/* LearnDash nests its own bordered wrapper inside each answer; flatten it so
   only the pill from the design remains. */
.jld .wpProQuiz_content div.wpProQuiz_questionListItem .ld-quiz-question-item,
.jld .wpProQuiz_content div.wpProQuiz_questionListItem .ld-quiz-question-item__content,
.jld .wpProQuiz_content div.wpProQuiz_questionListItem .ld-quiz-question-item__label {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.jld .wpProQuiz_content div.wpProQuiz_questionListItem .ld-quiz-question-item__status {
	display: none;
}

.jld .wpProQuiz_content div.wpProQuiz_questionList div.wpProQuiz_questionListItem input[type="radio"],
.jld .wpProQuiz_content div.wpProQuiz_questionList div.wpProQuiz_questionListItem input[type="checkbox"] {
	accent-color: var(--jld-ink);
	margin: 0;
}

.jld .wpProQuiz_content div.wpProQuiz_answerCorrect,
.jld .wpProQuiz_content div.wpProQuiz_answerCorrect:hover {
	background: #e6f7ee;
}

.jld .wpProQuiz_content div.wpProQuiz_answerIncorrect,
.jld .wpProQuiz_content div.wpProQuiz_answerIncorrect:hover {
	background: #fdeaea;
}

.jld .wpProQuiz_response {
	margin-top: 18px;
	padding: 16px 18px;
	border-radius: 8px;
	background: #f1f3f6;
	font-size: 15px;
	line-height: 1.5;
	color: var(--jld-muted);
}

.jld .wpProQuiz_response .wpProQuiz_correct,
.jld .wpProQuiz_response .wpProQuiz_incorrect {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

/* .wpProQuiz_content is in the selector because LearnDash's own rule for
   .wpProQuiz_QuestionButton is more specific than a bare .jld .wpProQuiz_button
   and was winning - which is why Next/Finish rendered as a 50x39 pill at 12px. */
.jld .wpProQuiz_content input.wpProQuiz_button,
.jld .wpProQuiz_content input.wpProQuiz_button2,
.jld .wpProQuiz_content input.wpProQuiz_QuestionButton,
.jld .wpProQuiz_content .wpProQuiz_button,
.jld .wpProQuiz_content .wpProQuiz_button2,
.jld input.wpProQuiz_button,
.jld input.wpProQuiz_button2,
.jld .wpProQuiz_button,
.jld .wpProQuiz_button2 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 22px 8px 0 0;
	min-width: 120px;
	padding: 13px 30px;
	border: 0;
	border-radius: 8px;
	background-color: var(--jld-ink);
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	white-space: normal;
	cursor: pointer;
	transition: background-color .18s ease;
	text-shadow: none;
	box-shadow: none;
}

.jld .wpProQuiz_content input.wpProQuiz_button:hover,
.jld .wpProQuiz_content .wpProQuiz_button:hover,
.jld input.wpProQuiz_button:hover,
.jld .wpProQuiz_button:hover {
	background-color: #000;
	color: #fff;
}

.jld .wpProQuiz_results {
	max-width: 620px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--jld-ink);
}

.jld .wpProQuiz_results h4 {
	margin: 0 0 12px;
	font-size: 26px;
	font-weight: 700;
}

.jld .wpProQuiz_points {
	font-weight: 600;
}

@media (max-width: 900px) {
	.jlq-shell {
		padding: 110px 0 70px;
	}

	.jlq-col {
		padding: 0 var(--jld-band-inset);
	}

	/* Lower on a phone than on the desktop: the quiz shell is short here, so the
	   art sits directly under the Next button and the back link. */
	.jlq-art {
		width: 130%;
		opacity: .18;
	}
}

/* --------------------------------------------------- set-a-password strip */

.jld-pw {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	margin: 0 0 28px;
	padding: 20px 22px;
	border: 1px solid var(--jld-line);
	border-radius: var(--jld-radius);
	background: #fff;
	box-shadow: 0 1px 2px rgba(31, 32, 35, .04), 0 6px 18px rgba(31, 32, 35, .04);
}

.jld-pw[hidden] {
	display: none;
}

.jld-pw__title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--jld-ink);
}

.jld-pw__note {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--jld-muted);
}

.jld-pw__form {
	display: flex;
	align-items: center;
	gap: 10px;
}

.jld .jld-pw__input {
	width: 240px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--jld-line);
	border-radius: 8px;
	background: #f9fafb;
	box-shadow: none;
	font-family: inherit;
	font-size: 15px;
	color: var(--jld-ink);
}

.jld .jld-pw__save {
	white-space: normal;
	cursor: pointer;
}

.jld .jld-pw__dismiss {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	white-space: normal;
	color: var(--jld-muted);
	cursor: pointer;
}

.jld .jld-pw__dismiss svg {
	width: 16px;
	height: 16px;
}

.jld-pw__msg {
	flex: 1 0 100%;
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--jld-muted);
}

.jld-pw__msg:empty {
	display: none;
}

.jld-pw.is-done .jld-pw__msg {
	color: #04913c;
}

@media (max-width: 900px) {
	.jld-pw {
		flex-direction: column;
		align-items: stretch;
	}

	.jld-pw__form {
		flex-wrap: wrap;
	}

	.jld .jld-pw__input {
		flex: 1 1 160px;
		width: auto;
	}
}

/* The quiz's own title. ProQuiz shows only a Start button on its first screen,
   so without this the page opened on an unlabelled button. */
.jld .jlq-title {
	margin: 6px 0 26px;
	max-width: 20ch;
}

.jlq-return {
	margin: 34px 0 0;
	font-size: 15px;
	line-height: 1.4;
}

.jlq-return a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--jld-muted);
	text-decoration: none;
}

.jlq-return a:hover {
	color: var(--jld-ink);
}

.jlq-return svg {
	width: 16px;
	height: 16px;
}

/* --------------------------------------------------- quiz results actions */

/* ProQuiz emits the results row as `Continue` (an <a> LearnDash styles green
   and pill-shaped with !important), then two <input> buttons which our own
   rule above paints as primary-dark - so three controls of three shapes, with
   the least important one shouting loudest. This is the whole row restated in
   the page's own vocabulary: Continue is the primary and comes first, the two
   ways back are quiet.
   The container carries a `style="margin:10px 0"` attribute from LearnDash,
   which only !important can beat. */
.jld .ld-quiz-actions {
	display: flex;
	/* LearnDash lays this row out row-reverse, which puts Continue - first in the
	   DOM, and the primary action - at the far right, after the two ways back.
	   Plain `row` restores the reading order. */
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 28px 0 0 !important;
}

.jld .ld-quiz-actions .quiz_continue_link {
	margin: 0;
}

/* The gap owns the spacing now; the shared button rule's own margins would
   double it and push the row out of line. */
.jld .ld-quiz-actions input.wpProQuiz_button,
.jld .ld-quiz-actions .wpProQuiz_button {
	margin: 0;
}

/* #quiz_continue_link is an ID with !important behind it, so it takes an ID of
   our own plus !important to restate. */
.jld .wpProQuiz_content a#quiz_continue_link,
.jld a#quiz_continue_link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	height: auto;
	/* The <a> resolves 1px shorter than the <input>s beside it from the same
	   padding and line-height, so it is pinned to their height. */
	min-height: 47px;
	margin: 0;
	padding: 13px 30px;
	/* Transparent rather than none: the two outline buttons beside it carry a 1px
	   border, and without one here the primary sits 2px shorter than they do. */
	border: 1px solid transparent;
	border-radius: 8px !important;
	background-color: var(--jld-ink) !important;
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	box-shadow: none;
	transition: background-color .18s ease;
}

.jld .wpProQuiz_content a#quiz_continue_link:hover,
.jld .wpProQuiz_content a#quiz_continue_link:focus-visible,
.jld a#quiz_continue_link:hover {
	background-color: #000 !important;
	color: #fff;
}

/* Restart / View Questions are the alternatives to the primary action, so they
   read as outlines. Colour is declared on hover as well as background, because
   Elementor's kit styles bare `button:hover` with both. */
.jld .ld-quiz-actions input.wpProQuiz_button_restartQuiz,
.jld .ld-quiz-actions input.wpProQuiz_button_reShowQuestion,
.jld .wpProQuiz_content .ld-quiz-actions input.wpProQuiz_button_restartQuiz,
.jld .wpProQuiz_content .ld-quiz-actions input.wpProQuiz_button_reShowQuestion {
	border: 1px solid var(--jld-line);
	background-color: #fff;
	color: var(--jld-ink);
	font-weight: 500;
}

/* LearnDash paints every .wpProQuiz_button hover #00bb4b with !important, so
   these turn bright green on hover unless answered in kind. */
.jld .ld-quiz-actions input.wpProQuiz_button_restartQuiz:hover,
.jld .ld-quiz-actions input.wpProQuiz_button_reShowQuestion:hover,
.jld .ld-quiz-actions input.wpProQuiz_button_restartQuiz:focus-visible,
.jld .ld-quiz-actions input.wpProQuiz_button_reShowQuestion:focus-visible,
.jld .wpProQuiz_content .ld-quiz-actions input.wpProQuiz_button_restartQuiz:hover,
.jld .wpProQuiz_content .ld-quiz-actions input.wpProQuiz_button_reShowQuestion:hover {
	border-color: #cfd6e2;
	background-color: #f4f6fa !important;
	color: var(--jld-ink);
}