/* The lead magnet (src/lead.ts): the homepage's Academy section and the box at the end of an
 * article. The site's own tokens; no colour stripe, no glow. */
.ld-section .ld-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, calc(4vw / var(--vz, 1)), 56px);
	align-items: center;
}
.ld-logo { margin: 0 0 18px; }
/* The stacked Academy logo at its own ratio, never cropped. */
.ld-logo img { display: block; width: auto; height: 56px; max-width: 100%; object-fit: contain; }
.ld-logo-dark { display: none !important; }
[data-theme="dark"] .ld-logo-light { display: none !important; }
[data-theme="dark"] .ld-logo-dark { display: block !important; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .ld-logo-light { display: none !important; }
	:root:not([data-theme="light"]) .ld-logo-dark { display: block !important; }
}
/* THE OFFER (founder, 29 Oct 2026): the three files as a fan, the text centred under it, floating
 * on the page (no card border). At the end of an article on a soft plane of its own, so it stands
 * apart from the text; on the homepage on the section's own ground. */
.ld-offer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(20px, calc(2.4vw / var(--vz, 1)), 30px);
	text-align: left;
}
.ld-box {
	/* The article's own text width, never under the chapter rail on the right. */
	max-width: 42rem;
	margin-top: 40px;
	padding: clamp(28px, calc(4vw / var(--vz, 1)), 48px) clamp(18px, calc(3vw / var(--vz, 1)), 40px);
	border-radius: var(--radius-card, 12px);
	background: var(--paper-2);
}
.ld-body { max-width: 34rem; }
.ld-en { margin: 12px 0 0; font-size: 0.86rem; color: var(--muted); }
.ld-offer .ld-h { font-size: 1.3rem; text-wrap: balance; }
.ld-offer .ld-line { margin-top: 10px; }

/* The fan: three covers on one point near their foot, the essentials in front and larger. The
 * position is in custom properties, so a hover only changes numbers and the transition stays one
 * transform (and opacity): nothing jumps. */
.ld-fan {
	--fc-w: 186px;
	--fan-x: 108px;
	--fan-r: 9deg;
	/* How far the side covers stand out. Only these change on hover; the box itself keeps
	 * --fan-x, so its size, and the text around it, never moves. */
	--sx: var(--fan-x);
	--sr: var(--fan-r);
	position: relative;
	/* As wide as the three covers; moved right by what the tilt of the left cover takes, so
	 * the fan's left edge is the text's left edge. */
	width: calc(var(--fc-w) + 2 * var(--fan-x));
	margin-left: calc(var(--fc-w) * 0.2);
	height: calc(var(--fc-w) * 1019 / 720 * 1.14 + 22px);
	flex: none;
}
.ld-fc {
	--x: 0px;
	--y: 0px;
	--r: 0deg;
	--s: 1;
	--lift: 0px;
	position: absolute;
	bottom: 0;
	left: 50%;
	width: var(--fc-w);
	margin-left: calc(var(--fc-w) / -2);
	aspect-ratio: 720 / 1019;
	transform-origin: 50% 92%;
	transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(var(--s));
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
}
/* The lift happens inside the card, so the card's hover area stays put under the pointer. */
.ld-fc > * { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.ld-fc img { transform: translateY(calc(-1 * var(--lift))); }
.ld-fc img {
	display: block;
	width: 100%;
	height: 100%;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 14px 28px -18px rgba(0, 0, 0, 0.35);
	-webkit-user-drag: none;
}
.ld-fc-course { --x: calc(-1 * var(--sx)); --y: 4px; --r: calc(-1 * var(--sr)); z-index: 1; }
.ld-fc-workbook { --x: var(--sx); --y: 4px; --r: var(--sr); z-index: 2; }
.ld-fc-essentials { --s: 1.14; z-index: 3; }
/* Hover: the hand opens a little further, the card under the pointer lifts. */
@media (hover: hover) {
	.ld-fan:hover { --sx: calc(var(--fan-x) + 12px); --sr: calc(var(--fan-r) + 2deg); }
	.ld-fc:hover { --lift: 8px; }
	.ld-fc:hover .ld-tag { transform: translateY(-8px); }
}
/* Before it enters the screen (assets/js/lead.js): one stack; then the fan. */
.ld-fan.is-stacked .ld-fc-course,
.ld-fan.is-stacked .ld-fc-workbook { --x: 0px; --y: 0px; --r: 0deg; }
.ld-fan.is-stacked { --lift: 0px; }

.ld-tag {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}
.ld-tag-free {
	top: -9px;
	right: -12px;
	padding: 5px 9px;
	border-radius: 999px;
	background: #1a7f4b; /* groen voor gratis (founder, 30 okt 2026) */
	color: #fff;
	box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.4);
}
.ld-tag-lock {
	top: 8px;
	padding: 5px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--paper);
	color: var(--muted);
}
.ld-fc-course .ld-tag-lock { left: 8px; }
.ld-fc-workbook .ld-tag-lock { right: 8px; }

.ld-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ld-actions .btn { margin-top: 0; }
.ld-form { margin-top: 16px; display: grid; gap: 8px; }
.ld-form[hidden] { display: none; }
.ld-label { font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.ld-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ld-row input {
	flex: 1 1 14rem;
	min-width: 0;
	height: 48px;
	padding: 0 14px;
	font: inherit;
	color: var(--ink);
	background: var(--paper);
	border: 1.5px solid var(--line);
	border-radius: var(--radius);
}
.ld-row input:focus { outline: 2px solid var(--red-text); outline-offset: 1px; }
.ld-row .btn { margin-top: 0; }
.ld-check { display: flex; gap: 8px; align-items: flex-start; font-size: 0.92rem; color: var(--graphite); }
.ld-check input { margin-top: 0.25em; }
.ld-note { margin: 0; font-size: 0.86rem; color: var(--muted); }
.ld-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ld-status { margin: 0; font-size: 0.92rem; color: var(--ink); min-height: 1.4em; }
.ld-status.is-error { color: var(--red-text); }
/* The zigzag of the homepage: "Shop verbinden" has its text left, so here the fan is left and the
 * text right. On a phone the text comes first, as in the other sections. */
@media (min-width: 861px) {
	.ld-section .ld-text { order: 2; }
}
@media (max-width: 860px) {
	.ld-section .ld-grid { grid-template-columns: minmax(0, 1fr); }
}
/* In the homepage's scroll stop (assets/js/home-pin.js): the covers open with the scroll. */
.hp-pin .ld-fc-course, .hp-scrub .ld-fc-course { --x: calc(-1 * var(--sx) * var(--pp, 1)); --y: calc(4px * var(--pp, 1)); --r: calc(-1 * var(--sr) * var(--pp, 1)); }
.hp-pin .ld-fc-workbook, .hp-scrub .ld-fc-workbook { --x: calc(var(--sx) * var(--pp, 1)); --y: calc(4px * var(--pp, 1)); --r: calc(var(--sr) * var(--pp, 1)); }
.hp-pin .ld-fc, .hp-scrub .ld-fc { transition: transform 0.25s ease-out; transition-delay: 0s; }
@media (max-width: 520px) {
	.ld-fan { --fc-w: 116px; --fan-x: 64px; --fan-r: 9deg; }
	.ld-tag-free { right: -8px; }
}
@media (prefers-reduced-motion: reduce) {
	.ld-fc, .ld-fc > * { transition: none; }
	.ld-fan.is-stacked .ld-fc-course { --x: calc(-1 * var(--sx)); --y: 4px; --r: calc(-1 * var(--sr)); }
	.ld-fan.is-stacked .ld-fc-workbook { --x: var(--sx); --y: 4px; --r: var(--sr); }
}

/* The end of a blog article (founder, 4 Nov 2026): the fan, the offer and its buttons centred in
 * the box instead of hugging its left side; the e-mail form that opens keeps its left alignment. */
.ld-box.ld-offer { align-items: center; text-align: center; }
.ld-box .ld-body { margin-inline: auto; }
.ld-box .ld-actions { justify-content: center; }
.ld-box .ld-form { text-align: left; }
/* The fan's left margin keeps the tilted cover inside a left-aligned column; centred it is not needed. */
.ld-box .ld-fan { margin-left: 0; }

/* The Facebook group under the Academy box (src/lead.ts communityBoxHtml, founder 5 Nov 2026): as
 * wide as that box, a line instead of a plane, heading and one line on the left, the button right;
 * on a phone the button under the text, full width. */
.ld-community {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	max-width: 42rem;
	margin-top: 16px;
	padding: 24px clamp(18px, calc(3vw / var(--vz, 1)), 40px);
	border: 1px solid var(--line);
	border-radius: var(--radius-card, 12px);
}
.ld-community-text { flex: 1 1 18rem; min-width: 0; }
.ld-community-h { margin: 0; font-size: 1.1rem; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.ld-community p { margin: 6px 0 0; color: var(--graphite); line-height: 1.55; }
.ld-community .btn { margin-top: 0; flex: none; }
@media (max-width: 560px) {
	.ld-community .btn { flex: 1 1 100%; text-align: center; justify-content: center; }
}