/* Prijskaarten (founder, 30 okt 2026), homepage #pricing en de prijzenpagina's, 9 talen.
 * Geschreven door scripts/pricing-cards.mjs (die zet ook de link en ?ver= in de pagina's).
 *  1. Business is een zwarte kaart, op desktop iets hoger dan Gratis en Pro.
 *  2. Jaarlijks: het maandbedrag doorgestreept voor de prijs (<s class="plan-strike">).
 *  3. Kansen per pakket: de tekst staat in de pagina's, hier niets voor nodig. */

/* 2. Doorgestreept maandbedrag, alleen in de jaarweergave. */
.plan-strike {
	display: inline-block;
	margin-right: 10px;
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	/* No opacity (audit 31 Oct 2026): 55 % of the muted grey was 2.2:1 on white. --muted is 5.3:1
	 * on white and 6.6:1 on dark; on the black Business card --pc-sub is 11:1. */
	color: var(--muted);
	text-decoration-line: line-through;
	text-decoration-thickness: 1.5px;
}

/* 1. Business: zwart. */
.plan.plan-rec {
	--pc-sub: rgba(255, 255, 255, 0.7);
	--pc-line: #2a2a2a;
	--pc-check: #5fd38d;
	background: #0b0b0b;
	border: 2px solid #0b0b0b;
	color: #fff;
}
/* Dark mode: black with a white ring (founder, 3 Nov 2026; from 1 Nov a lighter #2b2b2b surface,
 * because a black card on the dark page receded; the ring now does the standing out). */
html[data-theme="dark"] .plan.plan-rec {
	background: #0b0b0b;
	border-color: #f2f2f2;
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .plan.plan-rec {
		background: #0b0b0b;
		border-color: #f2f2f2;
	}
}
.plan.plan-rec .plan-name,
.plan.plan-rec .plan-amount,
.plan.plan-rec .plan-limits,
.plan.plan-rec .sk-limits li,
.plan.plan-rec .plan-features li,
.plan.plan-rec .plan-academy,
.plan.plan-rec .plan-more > summary {
	color: #fff;
}
.plan.plan-rec .plan-desc,
.plan.plan-rec .plan-per,
.plan.plan-rec .plan-strike,
.plan.plan-rec .plan-billed,
.plan.plan-rec .plan-save,
.plan.plan-rec .plan-after,
.plan.plan-rec .plan-plus,
.plan.plan-rec .sk-limits svg {
	color: var(--pc-sub);
}
.plan.plan-rec .plan-limits {
	border-top-color: var(--pc-line);
}
.plan.plan-rec .plan-features svg,
.plan.plan-rec .plan-features .icon {
	color: var(--pc-check);
}
.plan.plan-rec .plan-academy-ico {
	color: #f2525c;
}
.plan.plan-rec .plan-head .tag-red {
	border-color: #fff;
	background: #fff;
	color: #0b0b0b;
}
.plan.plan-rec .plan-save .tag:not(.tag-red):not(.tag-week) {
	border-color: #1f4a31;
	background: #11291b;
	color: var(--pc-check);
}
.plan.plan-rec a:not(.btn) {
	color: #fff;
}
.plan.plan-rec .btn-primary:focus-visible {
	outline-color: #fff;
}

/* Iets hoger dan de twee andere kaarten, alleen naast elkaar. */
/* Desktop: the recommended card stands 10px higher at the top only, so the three cards still end on
 * one line and every row stays level (founder, 1 Nov 2026: the old translate left it 10px short at the
 * bottom). The extra 10px of padding keeps its content on the shared rows. */
@media (min-width: 901px) {
	.plan.plan-rec {
		margin-top: -10px;
		padding-top: 37px;
	}
}

/* QA layout (visual review of the live site, 1 Nov 2026). */
/* Yearly badges (founder, 2 Nov 2026): grey outline on Pro, green only on the recommended Business card. */

/* Stacked cards: no empty row for a yearly badge the Gratis card does not have (on a phone it left
 * some 55px of nothing above its button). Side by side the row stays, it keeps the buttons level. */
@media (max-width: 900px) {
	.plan-save:empty {
		display: none;
	}
}

/* The Christmas band in dark mode: dark with a warm accent, not a white slab (the pages’ own styles
 * turn it white in dark; .sk-band.sk-band outranks them, as look.css does on the homepage). */
html[data-theme="dark"] .sk-band.sk-band {
	background: #0b0b0b;
	color: #fff;
	border: 1px solid #6b5631;
}
html[data-theme="dark"] .sk-band-label.sk-band-label {
	color: #e9c27a;
}
html[data-theme="dark"] .sk-band-h.sk-band-h {
	color: #fff;
}
html[data-theme="dark"] .sk-band-p.sk-band-p {
	color: #cfcfcf;
}
html[data-theme="dark"] .sk-band-btn.sk-band-btn {
	background: #fff;
	color: #111;
}
html[data-theme="dark"] .sk-band-btn.sk-band-btn:hover {
	background: #e9e9e9;
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .sk-band.sk-band {
		background: #0b0b0b;
		color: #fff;
		border: 1px solid #6b5631;
	}
	html:not([data-theme="light"]) .sk-band-label.sk-band-label {
		color: #e9c27a;
	}
	html:not([data-theme="light"]) .sk-band-h.sk-band-h {
		color: #fff;
	}
	html:not([data-theme="light"]) .sk-band-btn.sk-band-btn {
		background: #fff;
		color: #111;
	}
}

/* The Academy’s two price cards over the full width (academy.css held them in 880px on the left, so
 * the right third of the row stood empty). */
@media (min-width: 960px) {
	.plans.ac-plans {
		max-width: none;
	}
}