/* =============================================================================
   London Lantern — custom single-course page
   Reference: 1440px wide design, container 1320px.

   Colours and the shared sizes come from the CSS variables printed by
   ll-course-options.php (Appearance → Course Design). Anything defined here is
   layout, not palette.
   ========================================================================== */

:root {
	--ll-serif: "Playfair Display", Georgia, "Times New Roman", serif;
	--ll-sans: "Lato", "Helvetica Neue", Arial, sans-serif;

	/* Hero gradient — lighter than --ll-maroon on purpose, measured from the design. */
	--ll-hero-from: #890c25;
	--ll-hero-to: #890c25;
	--ll-hero-h: 340px;

	/* Cut-out prop that hangs below the hero (the mug). */
	--ll-prop-x: 54.7%;
	--ll-prop-w: 9.7%;
	--ll-prop-drop: 82px;

	/* The theme's navbar is position:absolute and floats over the top of the
	   page — the banner we removed used to reserve its space. The hero now
	   reserves it instead, as a white band above the maroon. */
	--ll-navbar-h: 100px;

	/* Width the hero feature labels wrap at — two lines in the design. */
	--ll-hero-feature-w: 80px;

	/* Padding inside the sidebar card. The testimonials block derives its
	   break-out margin from this, so the two can never drift apart. */
	--ll-card-pad: 28px;

	/* Space above BOTH columns. The theme puts 60px of top padding on the left
	   column only, which left the sidebar stuck to the top. Rather than guess a
	   matching offset for the sidebar, the space moves to the grid container and
	   the left column's own padding is zeroed — so the two columns always start
	   on the same line, from one number. */
	--ll-col-top: 60px;
}

/* The hero breaks out of the theme container with 100vw. `clip` (not `hidden`)
   keeps the sticky sidebar working further down the page. */
.single-lp_course .wrapper {
	overflow-x: clip;
}

/* Two stock banners sit above the hero and duplicate what it already says:
   the theme's page banner, and the LearnPress breadcrumb. The hero carries its
   own breadcrumb, so both go. */
.single-lp_course .breadcrumb-area,
.single-lp_course .learn-press-breadcrumb {
	display: none !important;
}

/* Keep the navbar painting above the hero's layers whatever happens. Only the
   stacking order is touched — the theme's sticky-on-scroll logic is left alone. */
.single-lp_course .navbar.validnavs {
	z-index: 100;
}


/* -----------------------------------------------------------------------------
   Icons

   Uploaded SVGs are printed inline so they can be recoloured. These two rules
   are what force every icon to the brand colour — delete them if you would
   rather keep each file's own colours.
   -------------------------------------------------------------------------- */

.ll-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: var(--ll-maroon, #8A1528);
	line-height: 0;
}

.ll-icon svg,
.ll-icon img {
	width: auto;
	height: 100%;
	max-width: 100%;
	display: block;
}

.ll-icon svg [fill]:not([fill="none"]),
.ll-icon svg[fill]:not([fill="none"]) {
	fill: currentColor;
}

.ll-icon svg [stroke]:not([stroke="none"]) {
	stroke: currentColor;
}


/* -----------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.ll-hero {
	position: relative;
	width: 100vw;
	margin-inline-start: calc(50% - 50vw);
	min-height: calc(var(--ll-hero-h) + var(--ll-navbar-h));
	/* White band at the top for the floating navbar; the maroon starts below it. */
	padding-top: var(--ll-navbar-h);
	background: var(--ll-bg, #FFFBF8);
	display: flex;
	/* visible so the prop can hang below the bottom edge */
	overflow: visible;
	margin-block-end: 0;
	/*
	 * Lifts the hero — and with it the prop hanging off the bottom — above the
	 * content that follows. 1 is enough because nothing below it is positioned;
	 * keep it well under the navbar's 100 so the header stays on top. A very
	 * large value here would bury the logo under the hero's white band.
	 */
	z-index: 1;
}

.ll-hero__media {
	position: absolute;
	inset: var(--ll-navbar-h) 0 0 0;
	z-index: 0;
	overflow: hidden;
}

.ll-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
	display: block;
}

/* The fade is measured from the CONTAINER's left edge, not the viewport's.
   The content sits in the container, so a viewport-relative fade (43% / 56%)
   drifts away from it as the screen widens and the last feature ends up on the
   bright part of the photo. In the 1440 design the gradient is solid until
   559px into the container and clear by 746px — that relationship is what
   these two calcs hold at every width. */
.ll-hero__veil {
	position: absolute;
	inset: var(--ll-navbar-h) 0 0 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		var(--ll-hero-from) 0,
		var(--ll-hero-to) calc(50% - var(--ll-container) / 2 + 559px),
		rgba(92, 36, 35, 0) calc(50% - var(--ll-container) / 2 + 746px)
	);
}

/* No image uploaded — the gradient covers the whole band instead of fading. */
.ll-hero--flat .ll-hero__veil {
	background: linear-gradient(90deg, var(--ll-hero-from) 0%, var(--ll-hero-to) 100%);
}

.ll-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--ll-container);
	margin-inline: auto;
	padding-inline: 24px;
	padding-block: 30px 51px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	color: #fff;
}

.ll-hero__crumbs {
	font-family: var(--ll-sans);
	font-size: 15px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.88);
}

.ll-hero__crumbs a {
	color: inherit;
	text-decoration: none;
}

.ll-hero__crumbs a:hover,
.ll-hero__crumbs a:focus-visible {
	color: #fff;
	text-decoration: underline;
}

.ll-hero__crumb-sep {
	margin-inline: 6px;
	opacity: 0.75;
}

/*
 * SPACING NOTE — the gaps measured off the design are ink-to-ink (the last
 * pixel of one line to the first of the next). CSS margins sit between LINE
 * BOXES, which are taller than the ink by the half-leading at each end, so
 * using the measured numbers directly adds that leading twice and the hero
 * grows ~80px. These margins are the measured gaps converted to box gaps, so
 * the four elements plus padding add up to the design's 340px:
 *   30 + 21 + 20 + 79 + 14 + 44 + 42 + 39 + 51 = 340
 */
.ll-hero__title {
	margin: 20px 0 0;
	padding: 0;
	font-family: var(--ll-serif);
	font-size: 76px;
	line-height: 1.04;
	font-weight: 600;
	color: #fff;
	text-wrap: balance;
}

.ll-hero__subtitle {
	margin: 14px 0 0;
	font-family: var(--ll-serif);
	font-size: 38px;
	line-height: 1.16;
	font-weight: 400;
	color: #fff;
}

.ll-hero__features {
	margin: 42px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 34px;
}

.ll-hero__features li {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
}

.ll-hero__features .ll-icon {
	height: var(--ll-icon-hero, 39px);
	color: #fff;
}

.ll-hero__features span {
	font-family: var(--ll-sans);
	font-size: 13px;
	line-height: 19px;
	color: #fff;
	/* The design wraps every label onto two lines. Capping the width is what
	   forces that; `balance` keeps the two lines close in length instead of
	   leaving one orphaned word. A long label will run to three lines. */
	max-width: var(--ll-hero-feature-w, 80px);
	text-wrap: balance;
}

/* The cut-out that overlaps the tab bar below. */
.ll-hero__prop {
	position: absolute;
	z-index: 3;
	bottom: calc(var(--ll-prop-drop) * -1);
	inset-inline-start: var(--ll-prop-x);
	width: var(--ll-prop-w);
	height: auto;
	pointer-events: none;
}


/* -----------------------------------------------------------------------------
   Below 1440 — scale the hero down rather than cropping it
   -------------------------------------------------------------------------- */

@media (max-width: 1439px) {
	.ll-hero__title    { font-size: clamp(44px, 5.3vw, 76px); }
	.ll-hero__subtitle { font-size: clamp(24px, 2.65vw, 38px); }
	.ll-hero          { --ll-hero-h: clamp(260px, 23.6vw, 340px); }
	.ll-hero__inner   { padding-block: clamp(22px, 2.1vw, 30px) clamp(34px, 3.5vw, 51px); }
	.ll-hero__title   { margin-top: clamp(14px, 1.4vw, 20px); }
	.ll-hero__features{ margin-top: clamp(22px, 2.9vw, 42px); }
}

@media (max-width: 991px) {
	.ll-hero {
		/* The navbar is in normal flow at this width — no band needed. */
		--ll-navbar-h: 0px;
		--ll-hero-h: auto;
		min-height: 0;
		padding-top: 0;
	}

	.ll-hero__media img {
		object-position: 70% center;
	}

	/* Vertical fade so the text stays readable over the photo. */
	.ll-hero__veil {
		background: linear-gradient(
			180deg,
			rgba(92, 36, 35, 0.92) 0%,
			rgba(92, 36, 35, 0.86) 55%,
			rgba(92, 36, 35, 0.94) 100%
		);
	}

	.ll-hero__inner {
		padding-block: 26px 34px;
	}

	.ll-hero__features {
		margin-top: 30px;
		gap: 18px 24px;
	}

	.ll-hero__features li {
		flex: 0 0 calc(50% - 12px);
	}

	/* The prop has nowhere to hang on a stacked layout. */
	.ll-hero__prop {
		display: none;
	}
}

@media (max-width: 575px) {
	.ll-hero__inner {
		padding-inline: 18px;
	}

	.ll-hero__features li {
		flex: 1 1 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ll-hero * {
		transition: none !important;
	}
}


/* =============================================================================
   Page layout + sidebar

   The two columns and every piece of the sidebar card already exist in
   LearnPress' markup — this section only restyles and re-orders them, so the
   enrol form, price and purchase logic are never touched.

     aside.course-summary-sidebar
       .course-sidebar-top
         .course-sidebar-preview   image + price + enrol button
         .ll-sidebar-items         the info rows (course-meta-items.php)
         .course-featured-review   replaced by the testimonials card

   Design order is image → info rows → price → button, which is what the
   `order` values below produce. `display: contents` on the preview wrapper
   lets its three children take part in the same flex column.
   ========================================================================== */

/* The hero carries the title, so LearnPress' own course header is redundant. */
.single-lp_course .course-detail-info {
	display: none;
}

/* Not in the design — the Reviews tab is where feedback belongs. */
.single-lp_course .blog-comments {
	display: none;
}

/* --- Two columns --------------------------------------------------------- */

.single-lp_course .lp-entry-content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--ll-sidebar);
	gap: var(--ll-gutter);
	align-items: start;
	max-width: var(--ll-container);
	margin-inline: auto;
	padding-top: var(--ll-col-top);
}

.single-lp_course .entry-content-left {
	min-width: 0;
}

.single-lp_course .course-summary-sidebar {
	position: sticky;
	top: 24px;
}

/*
 * LearnPress ships its own 3rem top margin on the sidebar above 992px:
 *
 *   .lp-archive-courses .course-content.course-summary-content
 *     .course-summary-sidebar { margin-top: 3rem }
 *
 * The container's padding-top now spaces both columns together, so that margin
 * only pushes the sidebar out of line with the left column. Zeroed here, at one
 * class deeper than the stock rule so it wins without !important.
 */
@media only screen and (min-width: 992px) {
	.single-lp_course .lp-archive-courses .course-content.course-summary-content .course-summary-sidebar {
		margin-top: 0;
	}
}

/*
 * Column widths.
 *
 * The theme puts a fixed width on both columns (508px and 350px), which wins
 * over the grid tracks and leaves a dead gap down the middle. Releasing the
 * widths lets each column fill its track. The left column's own top and right
 * padding go too — the container's padding-top and the grid gap replace them.
 */
.single-lp_course .lp-entry-content > .entry-content-left,
.single-lp_course .lp-entry-content > .course-summary-sidebar {
	width: auto;
	max-width: none;
	flex: none;
}

.single-lp_course .lp-entry-content > .entry-content-left {
	padding-top: 0;
	padding-inline-end: 0;
}

/* --- The card ------------------------------------------------------------ */

.single-lp_course .course-sidebar-top {
	display: flex;
	flex-direction: column;
	background: #FFFCF9;
	border: 1px solid #EFE6E2;
	border-radius: 12px;
	padding: var(--ll-card-pad);
}

/* The theme's own padding is 20px and matches the weight of the rule above, so
   this one is written a level deeper to win without !important. */
.single-lp_course .course-summary-sidebar .course-sidebar-top {
	padding: var(--ll-card-pad);
	gap: 0;
}

/* The testimonials block sits below the card as a card of its own, so the
   parent stops its outline where that block begins. */
.single-lp_course .course-summary-sidebar .course-sidebar-top:has(.ll-side__tm) {
	padding-bottom: 0;
	border-bottom: 0;
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

.single-lp_course .course-sidebar-preview {
	display: contents;
}

.single-lp_course .media-preview          { order: 1; }
.single-lp_course .ll-sidebar-items       { order: 2; }
.single-lp_course .course-price           { order: 3; }
.single-lp_course .lp-course-buttons      { order: 4; }
.single-lp_course .course-featured-review { order: 5; }

/* Image — fixed 2.4:1 crop so a tall upload cannot stretch the card. */
.single-lp_course .course-sidebar-preview .media-preview {
	margin: 0 0 24px;
	border-radius: 8px;
	overflow: hidden;
}

.single-lp_course .course-sidebar-preview .media-preview img {
	display: block;
	width: 100%;
	aspect-ratio: 2.4 / 1;
	object-fit: cover;
}

/* --- Price and enrol button ---------------------------------------------- */

.single-lp_course .course-summary-sidebar .course-price {
	margin: 24px 0 0;
	padding-top: 24px;
	border-top: 1px solid #EFE6E2;
	text-align: center;
}

.single-lp_course .course-summary-sidebar .course-price .course-item-price,
.single-lp_course .course-summary-sidebar .course-price .price {
	font-family: var(--ll-serif);
	font-size: 58px;
	line-height: 1.05;
	font-weight: 600;
	color: #671722;
}

/* A discounted course shows the old price above, smaller and struck through. */
.single-lp_course .course-summary-sidebar .course-price .origin-price {
	display: block;
	font-family: var(--ll-sans);
	font-size: 19px;
	font-weight: 400;
	color: #9A8F95;
	text-decoration: line-through;
	margin-bottom: 2px;
}

.single-lp_course .course-summary-sidebar .lp-course-buttons {
	order: 4;
	margin: 16px 0 0;
	display: block;
}

.single-lp_course .course-summary-sidebar .lp-course-buttons form,
.single-lp_course .course-summary-sidebar .lp-course-buttons > div {
	margin: 0;
}

/*
 * Enrol button.
 *
 * LearnPress renders `button.lp-button.button-enroll-course`, and the theme
 * paints it teal with a rule that outweighs a plain class selector — the
 * radius below lands but the colour does not. The three colour declarations
 * carry !important for exactly that reason; everything else wins on its own.
 * The label changes with the student's state (Start Now / Buy Now / Continue)
 * and all of them get this one treatment, as agreed.
 */
.single-lp_course .course-summary-sidebar .lp-course-buttons :is(button, a, input[type="submit"]) {
	width: 100%;
	min-height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px 20px;
	border: 0 !important;
	border-radius: 26px;
	background: var(--ll-maroon, #8A1528) !important;
	color: #fff !important;
	font-family: var(--ll-sans);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 150ms ease;
}

.single-lp_course .course-summary-sidebar .lp-course-buttons :is(button, a, input[type="submit"]):hover,
.single-lp_course .course-summary-sidebar .lp-course-buttons :is(button, a, input[type="submit"]):focus-visible {
	background: var(--ll-maroon-deep, #701A27) !important;
	color: #fff !important;
}

/* The design has a single button in the sidebar. The wishlist is LearnPress'
   own and is hidden rather than removed — delete this rule to bring it back. */
.single-lp_course .course-summary-sidebar [class*="wishlist"] {
	display: none;
}

/* LearnPress' stock "Featured Review" — the testimonials card replaces it. */
.single-lp_course .course-featured-review {
	display: none;
}

/* --- Info rows ----------------------------------------------------------- */

.single-lp_course .ll-side__rows {
	order: 2;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.single-lp_course .ll-side__row {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin: 0;
	padding: 0;
	border: 0;
}

.single-lp_course .ll-side__row .ll-icon {
	width: var(--ll-icon-info, 34px);
	height: var(--ll-icon-info, 34px);
	margin-top: 1px;
}

.single-lp_course .ll-side__row-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.single-lp_course .ll-side__row-label {
	font-family: var(--ll-sans);
	font-size: 17px;
	line-height: 24px;
	font-weight: 700;
	color: var(--ll-ink, #091223);
}

.single-lp_course .ll-side__row-value {
	font-family: var(--ll-sans);
	font-size: 16px;
	line-height: 23px;
	color: #5E5763;
}

/* --- Stars --------------------------------------------------------------- */

.ll-stars {
	position: relative;
	display: inline-block;
	line-height: 0;
}

.ll-stars__row {
	display: flex;
	gap: 3px;
	width: max-content;
}

.ll-stars__row svg {
	width: 18px;
	height: 18px;
	display: block;
}

.ll-stars__row--empty path {
	fill: #E3CFCB;
}

/* Clipped to the rating — this is what draws a half star. */
.ll-stars__row--full {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	overflow: hidden;
}

.ll-stars__row--full path {
	fill: var(--ll-star, #FA9C20);
}

/* --- Testimonials -------------------------------------------------------- */

/* Breaks out past the card's padding and border so it reads as a separate
   card underneath, with the page colour showing as the gap between them. */
/* Steps back out past the card's padding and border so it lines up with the
   card's outer edge — same width, as in the design. Both offsets come from
   --ll-card-pad, so changing the padding cannot leave this behind. */
.single-lp_course .ll-side__tm {
	order: 6;
	margin-inline: calc((var(--ll-card-pad) + 1px) * -1);
	margin-block: 22px -1px;
	padding-top: 22px;
	background: var(--ll-bg, #FFFBF8);
}

.single-lp_course .ll-side__tm-card {
	background: #FFFCF9;
	border: 1px solid #EFE6E2;
	border-radius: 12px;
	padding: 24px;
}

.single-lp_course .ll-side__tm-track {
	display: grid;
}

.single-lp_course .ll-side__tm-slide {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 400ms ease;
}

.single-lp_course .ll-side__tm-slide.is-active {
	opacity: 1;
	visibility: visible;
}

/*
 * The theme styles every <blockquote> as a navy panel with a giant quote glyph
 * in the corner, and it does so with !important — so a plain reset loses and
 * the quote keeps the theme's padding and border. These five declarations are
 * flagged for that reason only; the typography below wins on its own.
 */
.single-lp_course .ll-side__tm-quote {
	margin: 14px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	font-family: var(--ll-sans);
	font-size: 17px;
	line-height: 26px;
	font-style: italic;
	font-weight: 400;
	color: #3D3742;
	text-align: start;
	quotes: none;
}

.single-lp_course .ll-side__tm-quote::before,
.single-lp_course .ll-side__tm-quote::after {
	content: none;
	display: none;
}

.single-lp_course .ll-side__tm-by {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 18px;
}

.single-lp_course .ll-side__tm-avatar {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.single-lp_course .ll-side__tm-name {
	font-family: var(--ll-sans);
	font-size: 16px;
	color: #3D3742;
}

.single-lp_course .ll-side__tm-dots {
	display: flex;
	justify-content: center;
	gap: 9px;
	margin-top: 18px;
}

.single-lp_course .ll-side__tm-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #E0D6D2;
	cursor: pointer;
	transition: background-color 150ms ease;
}

.single-lp_course .ll-side__tm-dot.is-active {
	background: var(--ll-maroon, #8A1528);
}

.single-lp_course .ll-side__tm-dot:focus-visible {
	outline: 2px solid var(--ll-maroon, #8A1528);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.single-lp_course .ll-side__tm-slide {
		transition: none;
	}
}


/* =============================================================================
   Overview tab

   SPACING CONVENTION — the gaps measured off the design are ink-to-ink. Where
   both sides are text the leading has been subtracted (roughly 5px below a
   line and 5px above the next); where one side is a real box — a rule, a
   panel, a circle — the measured number is used unchanged. Panel heights are
   the measured ones, so each block reads at the size it was drawn.
   ========================================================================== */

.single-lp_course .ll-ov {
	font-family: var(--ll-sans);
	color: var(--ll-ink, #091223);
}

.single-lp_course .ll-ov__section + .ll-ov__section,
.single-lp_course .ll-panel + .ll-ov__section {
	margin-top: 21px;
}

/* --- Heading + rule ------------------------------------------------------ */

.single-lp_course .ll-ov__head {
	margin-bottom: 8px;
}

.single-lp_course .ll-ov__title {
	margin: 0;
	padding: 0;
	font-family: var(--ll-serif);
	font-size: 34px;
	line-height: 1.2;
	font-weight: 600;
	color: var(--ll-ink, #091223);
	text-wrap: balance;
}

.single-lp_course .ll-ov__rule {
	display: block;
	width: 47px;
	height: 3px;
	margin-top: 5px;
	background: var(--ll-maroon, #8A1528);
}

/* --- Body copy ----------------------------------------------------------- */

.single-lp_course .ll-ov__text,
.single-lp_course .ll-ov__text p,
.single-lp_course .ll-ov__text li {
	font-family: var(--ll-sans);
	font-size: 20px;
	line-height: 27px;
	color: #3D3742;
}

.single-lp_course .ll-ov__text > :first-child {
	margin-top: 0;
}

.single-lp_course .ll-ov__text > :last-child {
	margin-bottom: 0;
}

/* --- Panels: highlight, quote, CTA --------------------------------------- */

.single-lp_course .ll-panel {
	display: flex;
	align-items: center;
	gap: 27px;
	border-radius: 12px;
	margin: 15px 0 0;
}

.single-lp_course .ll-panel__body {
	flex: 1 1 auto;
	min-width: 0;
}

.single-lp_course .ll-panel__title {
	margin: 0;
	padding: 0;
	font-family: var(--ll-serif);
	font-size: 24px;
	line-height: 1.25;
	font-weight: 600;
	color: var(--ll-maroon, #8A1528);
}

.single-lp_course .ll-panel__text {
	margin: 4px 0 0;
	font-family: var(--ll-sans);
	font-size: 20px;
	line-height: 27px;
	color: #3D3742;
}

/* Highlight — icon top-aligned with the title, as drawn. */
.single-lp_course .ll-panel--note {
	align-items: flex-start;
	background: var(--ll-wash, #FBEBEB);
	padding: 20px 26px;
	min-height: 119px;
}

.single-lp_course .ll-panel--note .ll-icon {
	width: var(--ll-icon-highlight, 60px);
	height: var(--ll-icon-highlight, 60px);
}

/* Quote — icon and text sit together in the middle of the banner. */
.single-lp_course .ll-panel--quote {
	justify-content: center;
	gap: 64px;
	background: var(--ll-wash, #FBEBEB);
	padding: 16px 26px;
	min-height: 96px;
}

.single-lp_course .ll-panel--quote .ll-icon {
	width: var(--ll-icon-quote, 105px);
	height: 79px;
}

.single-lp_course .ll-panel__quote {
	margin: 0;
	font-family: var(--ll-serif);
	font-size: 26px;
	line-height: 1.32;
	font-style: italic;
	font-weight: 500;
	color: #611B23;
	text-wrap: balance;
}

/* CTA — the darker panel, with the button pinned to the end. */
.single-lp_course .ll-panel--cta {
	background: var(--ll-wash-strong, #F9E7E5);
	padding: 20px 45px 20px 24px;
	min-height: 116px;
	gap: 24px;
}

.single-lp_course .ll-panel--cta .ll-icon {
	width: var(--ll-icon-cta, 76px);
	height: 58px;
}

.single-lp_course .ll-panel--cta .ll-panel__text {
	font-size: 17px;
	line-height: 24px;
}

.single-lp_course .ll-panel__btn {
	flex: 0 0 auto;
	max-width: 213px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 22px;
	border-radius: 12px;
	background: var(--ll-maroon-deep, #701A27);
	color: #fff;
	font-family: var(--ll-sans);
	font-size: 17px;
	line-height: 24px;
	font-weight: 700;
	text-decoration: none;
	text-align: center;
	transition: background-color 150ms ease;
}

.single-lp_course .ll-panel__btn:hover,
.single-lp_course .ll-panel__btn:focus-visible {
	background: var(--ll-maroon, #8A1528);
	color: #fff;
}

.single-lp_course .ll-panel__btn .ll-arrow {
	flex: 0 0 auto;
}

/* --- Who is this course for ---------------------------------------------- */

.single-lp_course .ll-aud {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px 24px;
}

/* Equal columns rather than the mockup's content-width ones, as agreed:
   fewer than four centre themselves, more wrap to a tidy second row. */
.single-lp_course .ll-aud__item {
	flex: 0 0 calc(25% - 18px);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	margin: 0;
}

.single-lp_course .ll-aud__disc {
	width: 95px;
	height: 95px;
	border-radius: 50%;
	background: var(--ll-wash, #FBEBEB);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.single-lp_course .ll-aud__disc .ll-icon {
	width: var(--ll-icon-audience, 48px);
	height: var(--ll-icon-audience, 48px);
}

.single-lp_course .ll-aud__text {
	font-size: 18px;
	line-height: 24px;
	color: var(--ll-ink, #091223);
	text-wrap: balance;
}

/* --- What you will learn -------------------------------------------------- */

.single-lp_course .ll-learn {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 70px;
	margin-top: 12px;
}

.single-lp_course .ll-learn__col {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

/* The hairline between the columns — drawn on the second column so it stops
   at the end of the list rather than running the height of the section. */
.single-lp_course .ll-learn__col + .ll-learn__col {
	border-inline-start: 1px solid #F0EFED;
	padding-inline-start: 35px;
	margin-inline-start: -35px;
}

.single-lp_course .ll-learn__item {
	display: flex;
	align-items: center;
	gap: 36px;
	margin: 0;
}

.single-lp_course .ll-learn__item .ll-icon {
	width: var(--ll-icon-learn, 44px);
	height: var(--ll-icon-learn, 44px);
}

.single-lp_course .ll-learn__item span {
	font-size: 20px;
	line-height: 27px;
	color: var(--ll-ink, #091223);
	min-width: 0;
}

/* --- Narrow screens ------------------------------------------------------- */

@media (max-width: 991px) {
	.single-lp_course .ll-aud__item {
		flex: 0 0 calc(50% - 12px);
	}

	.single-lp_course .ll-learn {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.single-lp_course .ll-learn__col + .ll-learn__col {
		border-inline-start: 0;
		padding-inline-start: 0;
		margin-inline-start: 0;
	}

	.single-lp_course .ll-panel--quote {
		gap: 24px;
	}

	.single-lp_course .ll-panel--cta {
		flex-wrap: wrap;
		padding: 20px 24px;
	}

	.single-lp_course .ll-panel__btn {
		max-width: none;
		width: 100%;
	}
}

@media (max-width: 575px) {
	.single-lp_course .ll-ov__title  { font-size: 27px; }
	.single-lp_course .ll-panel      { flex-direction: column; align-items: flex-start; gap: 16px; }
	.single-lp_course .ll-panel--quote { align-items: center; text-align: center; }
	.single-lp_course .ll-aud__item  { flex: 1 1 100%; }
	.single-lp_course .ll-learn__item { gap: 18px; }
}