/**
 * Jones - logged-out course landing page.
 *
 * Loads after ld-course.css and reuses its tokens, band gradient, eyebrow pill
 * and step accordion. Only what the landing view adds lives here.
 *
 * Two host-theme quirks shape the selectors below: the theme sets
 * `white-space: nowrap` on `button`, and Elementor's kit styles bare `button`
 * with its own background and colour. Every control here therefore resets
 * white-space explicitly and is selected with a second class so it outranks
 * the kit.
 */

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

.jld-lp__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 331px;
	column-gap: 56px;
	align-items: start;
	/* Percentage padding resolves against the *parent's* width, not this
	   element's own margin-boxed width, so the band inset has to come back off
	   or the hero sits 30px inside the body column below it. */
	padding: 150px max(0px, calc((100% - var(--jld-col)) / 2 - var(--jld-band-inset))) 90px;
}

/* Keeps .jld-hero__col's --jld-rule-gap padding, which is what lines the hero
   copy up with the cards below - the hero's own centring padding deliberately
   does not include it, so it is paid exactly once. */
.jld-lp__hero-col {
	max-width: none;
	margin: 0;
}

.jld .jld-lp__title {
	max-width: none;
	font-size: clamp(34px, 4.4vw, 64px);
	line-height: 1.08;
}

.jld-lp__intro {
	max-width: 34em;
}

/* The card sits above the illustration, which bleeds under it. Unlike the
   enrolled hero, the art stops at the band's own edge: the landing page has
   sections immediately below, and a -300px bleed drags the illustration
   through the "What You'll Master" copy. */
.jld-lp__art {
	/* The landing hero places the scene whole - its copy column is narrower and
	   the signup card, not the illustration, is what sits beside it. */
	--art-zoom: 100%;
	--art-shift: 0;
	/* This hero fades the scene on the container instead (below), so the image
	   itself must not fade a second time. */
	--art-fade: 100%;
	inset: auto 0 -20px auto;
	width: min(70%, 1006px);
	/* The illustration carries its own pale-blue ground. multiply already sinks
	   that into the band, but the image still ends on a straight edge; fading
	   its last sliver lets it settle into the page instead of being cut off. */
	-webkit-mask-image: linear-gradient(to bottom, #000 0 78%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0 78%, transparent 100%);
}

/* --------------------------------------------------------- preview button */

.jld .jld-lp__preview {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 30px;
	padding: 11px 22px 11px 16px;
	border: 1px solid var(--jld-line);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(31, 32, 35, .04), 0 6px 18px rgba(31, 32, 35, .04);
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	white-space: normal;
	color: var(--jld-ink);
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

/* Elementor's kit sets a background AND colour on bare button:hover/:focus, so
   both have to be restated here or the control turns dark on hover. */
.jld .jld-lp__preview:hover,
.jld .jld-lp__preview:focus,
.jld .jld-lp__preview:focus-visible {
	border-color: #d6dce6;
	background: #fff;
	color: var(--jld-ink);
	box-shadow: 0 2px 4px rgba(31, 32, 35, .05), 0 10px 26px rgba(31, 32, 35, .07);
}

.jld-lp__preview-icon {
	display: inline-flex;
	width: 22px;
	height: 22px;
	color: var(--jld-ink);
}

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

/* ----------------------------------------------------------------- stats */

.jld-lp__stats {
	display: flex;
	gap: 64px;
	margin: 42px 0 0;
}

.jld-lp__stat {
	margin: 0;
}

.jld-lp__stat-value {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
	color: var(--jld-ink);
}

/* These sit on the band gradient (#eaf0f8 at its darkest), where --jld-muted
   is only 4.22:1. #4b5563 - the theme's own secondary ink - is 6.59:1. */
.jld-lp__stat-label {
	margin: 2px 0 0;
	font-size: 15px;
	line-height: 1.45;
	color: #4b5563;
}

/* Stand-ins for the design's three enrolled-specialist portraits. Decorative:
   no photography has been supplied, and inventing faces would be worse than
   a quiet mark. */
.jld-lp__faces {
	display: inline-flex;
	align-items: center;
}

.jld-lp__faces i {
	display: block;
	width: 24px;
	height: 24px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: linear-gradient(140deg, #cfd9e8, #eef2f8);
}

.jld-lp__faces i + i {
	margin-left: -9px;
}

.jld-lp__faces i:nth-child(2) {
	background: linear-gradient(140deg, #dcd3e6, #f2eef8);
}

.jld-lp__faces i:nth-child(3) {
	background: linear-gradient(140deg, #e8d3d8, #f8eef1);
}

/* ----------------------------------------------------------- signup card */

.jld-lp__card {
	position: relative;
	z-index: 2;
	/* The design deliberately breaks the card out past the right column rule -
	   Figma has it ending 35px clear of the content column (1247 against a 1212
	   content edge on a 1440 frame), where the grid alone would stop it on the
	   rule at 1228. Paid as a relative offset, not a negative margin: the card is
	   a grid item stretched to its track, so a negative margin widens it (331 ->
	   350) instead of moving it. It lands --jld-lp-card-out inside the band
	   inset, so it can never reach the viewport edge. */
	left: var(--jld-lp-card-out);
	padding: 24px 20px;
	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);
	transition: box-shadow .2s ease;
}

.jld-lp__card.is-flagged {
	box-shadow: 0 0 0 3px rgba(0, 187, 75, .28), 0 10px 26px rgba(31, 32, 35, .07);
}

.jld-lp__card-title {
	margin: 0 0 18px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	color: var(--jld-ink);
}

.jld-lp__card-note-top {
	margin: -12px 0 18px;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
	color: var(--jld-muted);
}

.jld-lp__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
}

.jld .jld-lp__input {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border: 1px solid var(--jld-line);
	border-radius: 8px;
	background: #f9fafb;
	box-shadow: none;
	font-family: inherit;
	/* 16px, not 15: Mobile Safari zooms the viewport on focus below 16px and
	   never zooms back out. */
	font-size: 16px;
	line-height: 1.4;
	color: var(--jld-ink);
}

/* The visible labels ARE the placeholders here (the real ones are
   screen-reader-only, as the design has no label row), so they have to clear
   AA like body text: #8b93a1 was 2.96:1 on this ground, #6b7280 is 4.63:1. */
.jld .jld-lp__input::placeholder {
	color: var(--jld-muted);
	opacity: 1;
}

.jld .jld-lp__input:focus {
	outline: none;
	border-color: var(--jld-ink);
	background: #fff;
}

/* Honeypot. Clipped rather than display:none, which some bots skip - and
   clipped in place rather than parked at -9999px, which escapes the initial
   containing block and widens the document on narrow screens. */
.jld-lp__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.jld .jld-lp__cta {
	display: block;
	width: 100%;
	height: 48px;
	margin-top: 2px;
	padding: 0 20px;
	border: 0;
	border-radius: 8px;
	background: var(--jld-ink);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 48px;
	white-space: normal;
	text-align: center;
	color: #fff;
	cursor: pointer;
	transition: background .15s ease;
}

.jld .jld-lp__cta:hover {
	background: #000;
}

.jld .jld-lp__cta[disabled] {
	background: #9aa1ad;
	cursor: default;
}

.jld-lp__card-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--jld-muted);
}

.jld-lp__check {
	display: inline-flex;
	width: 16px;
	height: 16px;
	color: var(--jld-green);
}

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

.jld-lp__error {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #c0392b;
}

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

/* --------------------------------------------------------------- sections */

/* .jld-body is a bare 1000px centred column, so between roughly 900px and
   1060px it runs flush to the viewport edge with no gutter at all. Widening the
   box by the band inset and paying it back as padding keeps the content column
   at exactly 1000px where there is room, and gives it a gutter where there is
   not - which is also what the hero's own centring calc resolves to, so the two
   stay aligned at every width. */
.jld-lp__body {
	box-sizing: border-box;
	max-width: calc(var(--jld-col) + (2 * var(--jld-band-inset)));
	/* Plus --jld-rule-gap, so the content clears the dotted rules by the same
	   amount as on the enrolled page - the rules stay on the band inset. */
	padding-left: calc(var(--jld-band-inset) + var(--jld-rule-gap));
	padding-right: calc(var(--jld-band-inset) + var(--jld-rule-gap));
	margin-top: 0;
}

/* .jld-grid is inset:0 against .jld-body, so widening that box by the gutter
   above would drag the dotted column rules 30px wide of the cards they line up
   with. Pull them back onto the content column. */
.jld-lp__body .jld-grid {
	left: var(--jld-band-inset);
	right: var(--jld-band-inset);
}

.jld-lp__section {
	margin: 0 0 110px;
}

.jld-lp__eyebrow {
	margin-bottom: 18px;
}

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

.jld-lp__lede {
	margin: 14px 0 0;
	max-width: 40em;
	font-size: 17px;
	line-height: 1.5;
	color: #4b5563;
}

/* ------------------------------------------------------- what you'll master */

.jld-lp__cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	margin: 78px 0 0;
	padding: 0;
	list-style: none;
}

.jld-lp__card-item {
	margin: 0;
}

.jld-lp__card-icon {
	display: inline-flex;
	width: 24px;
	height: 24px;
	color: var(--jld-ink);
}

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

.jld .jld-lp__card-heading {
	margin: 16px 0 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--jld-ink);
}

.jld-lp__card-body {
	margin: 14px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--jld-muted);
}

/* ------------------------------------------------------------- curriculum */

.jld-lp__steps {
	margin-top: 40px;
}

/* No chips logged out, but the column stays so the row grid matches the
   enrolled view exactly. */
.jld-lp__steps .jld-step__chips:empty {
	display: block;
}

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

/* ------------------------------------------------------------- bottom bar */

.jld-lp__bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 28px;
	margin: 0 0 110px;
}

.jld-lp__bar-text {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 16px;
	line-height: 1.4;
	color: var(--jld-muted);
}

.jld-lp__bar-text strong {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--jld-ink);
}

.jld .jld-lp__cta--bar {
	display: inline-block;
	width: auto;
	margin-top: 0;
	padding: 0 28px;
}

/* ----------------------------------------------------------------- modal */

body.jld-lp-locked {
	overflow: hidden;
}

.jld-lp__modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

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

.jld-lp__modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 17, 20, .72);
}

.jld-lp__modal-box {
	position: relative;
	width: min(960px, 100%);
	max-height: 100%;
	overflow: auto;
	border-radius: var(--jld-radius);
	background: #0f1114;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(31, 32, 35, .08), 0 18px 44px rgba(31, 32, 35, .1);
}

.jld-lp__modal-video {
	display: block;
	width: 100%;
	height: auto;
	background: #0f1114;
}

.jld .jld-lp__modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	white-space: normal;
	color: var(--jld-ink);
	cursor: pointer;
}

.jld .jld-lp__modal-close:hover,
.jld .jld-lp__modal-close:focus,
.jld .jld-lp__modal-close:focus-visible {
	background: #fff;
	color: var(--jld-ink);
}

.jld .jld-lp__modal-close svg {
	width: 18px;
	height: 18px;
}

/* ----------------------------------------------------------- 1180 and down */

@media (max-width: 1180px) {
	/* Keep the centring calc - replacing it with a flat inset here made the hero
	   text and every section heading below it disagree by up to 60px anywhere
	   between 901px and 1180px. */
	.jld-lp__hero {
		column-gap: 36px;
	}



	.jld-lp__art {
		width: 46%;
		opacity: .9;
	}

	.jld-lp__stats {
		gap: 40px;
	}
}

/* ------------------------------------------------------------ 900 and down */

@media (max-width: 900px) {
	:root {
		/* Single column here: the card is full-width, with nothing to break out
		   of and no rules to clear. */
		--jld-lp-card-out: 0px;
	}

	.jld-lp__hero {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 32px;
		/* No horizontal padding: .jld-hero is already margin-inset by
		   --jld-band-inset, and .jld-body is not, so paying the gutter twice
		   here is what pushed the hero out of line with the sections below. */
		padding: 120px 0 50px;
	}

	/* ld-course.css also gives .jld-hero__col its own inset at this width,
	   which would be a third helping. */
	.jld-lp__hero-col {
		padding-left: 0;
		padding-right: 0;
	}

	/* Matches the enrolled hero at this width: anchored right so the overflow
	   runs off to the LEFT (which does not widen the document), large enough to
	   read as a wash rather than a smudge, and faint enough that the intro
	   paragraph over it stays above the 4.5:1 contrast floor.
	   NOTE: the mobile illustration treatment is not verified against Figma -
	   the frame's own geometry reads as off-canvas, which its desktop render
	   contradicts, so this is a consistency call rather than a design match. */
	.jld-lp__art {
		inset: auto 0 -70px auto;
		width: 175%;
		opacity: .22;
	}

	.jld-lp__card {
		width: 100%;
		max-width: 360px;
		margin: 0 auto;
	}

	.jld-lp__stats {
		gap: 32px;
	}

	.jld-lp__section {
		margin-bottom: 72px;
	}

	.jld-lp__cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
		margin-top: 44px;
	}

	.jld-lp__bar {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		margin-bottom: 72px;
	}

	.jld-lp__bar-text {
		justify-content: center;
	}

	.jld .jld-lp__cta--bar {
		align-self: center;
	}

}