/* SELLGRIP ACADEMY: de landingspagina /academy/, /de/academy/, /nl/academy/ (founder, 28 okt 2026:
 * "laat het lijken op de gewone site"). Gebouwd door scripts/build-academy.mjs op de schil van de
 * homepage: dezelfde kop, voet, lettertypen, knoppen en effecten (reveal.js, frame.js, de gestapelde
 * kaarten van de homepage). Hier staat alleen wat de cursus zelf toont: het voortgangsvenster in de
 * hero, de modulelijst in elke niveaukaart, de drie stappen en de twee prijskaarten. Alleen
 * tokens van sellgrip.css (licht en donker), geen eigen kleuren, geen gloed of verloop. Breedtes
 * schalen met --vz zoals de rest van de site (geen kale vw). */

/* ------------------------------------------------------------------ hero */
.ac-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
	gap: var(--home-cols, 56px);
	align-items: center;
}

.ac-hero .lead {
	max-width: 34em;
}

.ac-hero .actions {
	margin-top: 28px;
}

.ac-hero .fine {
	margin-top: 18px;
	max-width: 36em;
}

.ac-login {
	margin-top: 10px;
}

/* Sellgrip zelf, voor wie nog geen cursus wil (6 nov 2026): een stille regel onder het inloggen. */
.ac-hero .ac-demo-link {
	margin-top: 2px;
}

/* De demo onder de twee prijskaarten: alleen een lijn erboven, tekst en een gewone knop (zoals
 * .article-demo onder elk artikel). */
.ac-demo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	max-width: 760px;
	margin: 40px auto 0;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

.ac-demo p {
	flex: 1 1 18rem;
	margin: 0;
	color: var(--graphite);
	line-height: 1.55;
}

.ac-demo strong {
	color: var(--ink);
	font-weight: 700;
}

/* Het logo, gestapeld: hoogte vast, breedte volgt, nooit afgesneden. */
.ac-logo {
	display: inline-flex;
	flex: none;
}

.ac-logo img {
	display: block;
	width: auto;
	max-width: none;
	height: 58px;
}

.ac-logo .ac-logo-dark,
html[data-theme="dark"] .ac-logo .ac-logo-light {
	display: none;
}

html[data-theme="dark"] .ac-logo .ac-logo-dark {
	display: block;
}

/* ---------------------------------------------- het voortgangsvenster (hero) */
.ac-path {
	margin: 0;
	padding: 22px 24px 24px;
}

.ac-path .lk-vis-head {
	padding: 0 0 18px;
	align-items: flex-start;
}

.ac-levels {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ac-lv {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr) minmax(64px, 0.7fr) auto;
	align-items: center;
	gap: 14px;
	padding: 11px 0;
	border-top: 1px solid var(--line);
	font-size: 0.9375rem;
}

.ac-lv-n {
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.ac-lv-t {
	font-weight: 650;
	color: var(--ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ac-lv-c {
	color: var(--muted);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ac-bar {
	position: relative;
	height: 6px;
	border-radius: 3px;
	background: var(--line);
	overflow: hidden;
}

.ac-bar i {
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--w, 0%);
	border-radius: inherit;
	background: var(--ink);
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: calc(var(--i, 0) * 160ms + 200ms);
}

.ac-lv-now .ac-bar i {
	background: var(--red);
}

.ac-path.sg-on .ac-bar i {
	transform: scaleX(1);
}

.ac-cert {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 6px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 0.875rem;
}

.ac-cert svg {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--ink);
}

.ac-path .lk-pushes {
	--pull: -18px;
}

.ac-path.sg-on .lk-push {
	transition-delay: 1300ms;
}

.ac-path.sg-on .lk-push-2 {
	transition-delay: 1850ms;
}

/* ------------------------------------------- de niveaukaarten (gestapeld) */
.ac-mods {
	margin: 0;
	padding: 0 20px;
	list-style: none;
}

.ac-mod {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid var(--line);
}

/* NEVER AN EMPTY CARD (founder, 28 Oct 2026). The rows used to wait for the
   homepage's stacked-card script, which starts a card's pop only once the card
   has docked under the header: on a normal scroll the list was an empty box,
   then trickled in. Now each row is there from the start and, where the browser
   ties animations to scrolling, fades in over the first few pixels of its
   entry into view; elsewhere (and with reduced motion) it simply stands. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.ac-mod {
			animation: ac-mod-in linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 70%;
		}
	}
}

@keyframes ac-mod-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.ac-mod:first-child {
	border-top: 0;
}

.ac-mod-n {
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.ac-mod-t {
	font-weight: 600;
	color: var(--ink);
}

.ac-mod-c {
	color: var(--muted);
	font-size: 0.8125rem;
	white-space: nowrap;
}

.ac-free {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 8px;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: var(--sg-green, #1a7f4b);
	font-size: 0.75rem;
	font-weight: 650;
	vertical-align: 2px;
}

.sk-card .ac-mods-vis {
	margin: 0;
	padding-bottom: 8px;
}

/* ------------------------------------------------------- zo werkt het */
.ac-steps {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ac-steps .tool h3 {
	gap: 12px;
}

.ac-step-n {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 1px solid var(--line);
	border-radius: 50%;
	font-size: 0.875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------- de korte versie, gratis */
.ac-pages {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.ac-pages img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
}

.ac-ess .actions {
	margin-top: 24px;
}

/* -------------------------------------------------------- de prijs */
.ac-plans {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 880px;
}

.ac-plans .plan-amount small {
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--muted);
}

/* ------------------------------------------------------------ smal */
@media (max-width: 959px) {
	.ac-hero-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ac-steps,
	.ac-plans {
		grid-template-columns: minmax(0, 1fr);
	}

	.ac-plans .plan {
		grid-row: auto;
		grid-template-rows: none;
		margin-bottom: 20px;
	}
}

@media (max-width: 640px) {
	/* Het eerste scherm op de telefoon (6 nov 2026: wie uit Facebook en Instagram kwam, ging meteen
	 * weer weg). Het venster van de app-browser is zo'n 650px hoog: de gele balk over het
	 * Business-aanbod gaat hier weg, de lead houdt zijn eerste zin (wat de cursus is), zodat de
	 * knoppen en de regel over gratis en betaald boven de vouw staan. */
	body.sg-academy .launch-bar {
		display: none;
	}

	.ac-lead-more {
		display: none;
	}

	.ac-hero .actions {
		margin-top: 22px;
	}

	.ac-hero .fine {
		margin-top: 14px;
	}

	.ac-demo .btn {
		flex: 1 1 100%;
		text-align: center;
	}

	.ac-logo img {
		height: 48px;
	}

	.ac-path {
		padding: 18px 16px 20px;
	}

	.ac-lv {
		grid-template-columns: 1.5rem minmax(0, 1fr) 56px;
		gap: 10px;
	}

	.ac-lv-c {
		display: none;
	}

	.ac-mods {
		padding: 0 14px;
	}

	.ac-mod {
		grid-template-columns: 1.6rem minmax(0, 1fr);
	}

	.ac-mod-c {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ac-bar i,
	.ac-mod {
		transition: none;
	}

	.ac-bar i {
		transform: scaleX(1);
	}

	.ac-mod {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------- terug van Stripe zonder betalen */
/* ?checkout=cancelled (src/academy-nav.ts): one calm line and two choices, above the hero. */
.ac-cancel {
	border-bottom: 1px solid var(--line);
	background: var(--paper);
	padding-block: 20px;
}

.ac-cancel-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
}

.ac-cancel-t {
	margin: 0;
	font-weight: 600;
	color: var(--ink);
}

.ac-cancel .actions {
	margin: 0;
}

/* ------------------------------------------- de taalnoot boven de prijzen */
/* The six languages whose course text follows in November (scripts/academy-i18n.mjs): one plain
   box above the prices, the same ground and line as the plans. */
.ac-note {
	max-width: 760px;
	margin: 0 0 32px;
	padding: 16px 20px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--paper);
	color: var(--ink);
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* ----------------------------------------- module 0 boven de niveaus (nl) */
/* The Dutch edition opens with the move from bol: one row above the five levels, in the style of
   the level cards' module rows (public sweep, 29 Oct 2026). */
.ac-pre {
	max-width: 560px;
	margin-top: 24px;
}

.ac-pre .sk-label {
	margin: 0 0 8px;
}

.ac-pre .ac-mods {
	padding: 0 20px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--paper);
}

/* ------------------------------------------------ telefoon: tikvlakken */
/* The text links get a 44px tap height without moving the text around them (public sweep, 29
   Oct 2026). The tighter section rhythm on phones is the homepage's (sellgrip.css, body.home). */
@media (max-width: 600px) {
	/* Inline: the padding widens the tap area, the line stays where it is. */
	.ac-login .link-arrow,
	.ac-demo-link .link-arrow {
		padding-block: 11px;
	}

	.final-actions .final-free {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* ------------------------------------------------------------ kijk in de cursus */
/* Tien pagina's uit de pdf (founder, 30 okt 2026). Desktop: twee rijen van vijf. Telefoon en tablet:
 * één rij om opzij te vegen, elke pagina klikt naar het grote beeld (academy-preview.js). */
.ac-prev-row {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 28px 20px;
}

.ac-prev-row li {
	margin: 0;
	min-width: 0;
}

.ac-prev-page {
	display: block;
	border: 1px solid var(--line);
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 24px -18px rgba(0, 0, 0, 0.35);
	transition: transform 180ms ease, box-shadow 180ms ease;
	cursor: zoom-in;
}

.ac-prev-page img {
	display: block;
	width: 100%;
	height: auto;
}

.ac-prev-page:hover,
.ac-prev-page:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 16px 30px -18px rgba(0, 0, 0, 0.45);
}

.ac-prev-cap {
	margin: 10px 2px 0;
	font-size: 0.875rem;
	line-height: 1.35;
	color: var(--muted);
}

@media (max-width: 959px) {
	.ac-prev-row {
		display: flex;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		/* Tot de rand van het scherm: de zijmarge van de pagina (--gutter, 16px op een
		 * telefoon), niet een vaste 20px; die schoof de pagina 4px opzij. */
		scroll-padding-inline: var(--gutter);
		padding: 4px var(--gutter) 12px;
		margin: 0 calc(-1 * var(--gutter));
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.ac-prev-row::-webkit-scrollbar {
		display: none;
	}
	.ac-prev-row li {
		flex: 0 0 62%;
		max-width: 280px;
		scroll-snap-align: start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ac-prev-page {
		transition: none;
	}
}

/* Het grote beeld. */
.ac-lb {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
}

.ac-lb::backdrop {
	background: rgba(12, 12, 12, 0.86);
}

.ac-lb-fig {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 64px 80px 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ac-lb-img {
	display: block;
	width: 100%;
	max-width: 920px;
	height: auto;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.ac-lb-cap {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.8);
	text-align: center;
	white-space: pre-wrap;
}

.ac-lb-btn {
	position: absolute;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

.ac-lb-btn:hover,
.ac-lb-btn:focus-visible {
	background: rgba(255, 255, 255, 0.24);
}

.ac-lb-close {
	top: 12px;
	right: 12px;
	font-size: 1.25rem;
}

.ac-lb-prev {
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
}

.ac-lb-next {
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
}

.ac-lb-close,
.ac-lb-prev,
.ac-lb-next {
	position: fixed;
	z-index: 1;
}

@media (max-width: 640px) {
	.ac-lb-fig {
		padding: 64px 8px 84px;
	}
	.ac-lb-prev,
	.ac-lb-next {
		top: auto;
		bottom: 14px;
		transform: none;
	}
	.ac-lb-prev {
		left: calc(50% - 60px);
	}
	.ac-lb-next {
		right: calc(50% - 60px);
	}
}

/* Smalle telefoon (mobiele audit 30 okt 2026, M26): de naam van een niveau
 * loopt over twee regels in plaats van afgekapt ("Een winstgevende shop run…"),
 * met een iets kortere balk ernaast. */
@media (max-width: 400px) {
	.ac-lv {
		grid-template-columns: 1.5rem minmax(0, 1fr) 44px;
	}

	.ac-lv-t {
		white-space: normal;
		overflow: visible;
		line-height: 1.3;
	}
}