/* =========================================================================
   Coin Casino — stijlblad
   Opbouw: tokens -> mobiele schaal -> reset -> toegankelijkheid ->
   componenten in cascade-volgorde -> hulpklassen.
   Lettertypen staan op de eigen server (type-cell/), geen externe hosts.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. Lettertypen — Inter, zelf gehost
   ------------------------------------------------------------------------- */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/type-cell/inter-latin-ext-400.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/type-cell/inter-latin-400.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/type-cell/inter-latin-ext-500.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/type-cell/inter-latin-500.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/type-cell/inter-latin-ext-600.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/type-cell/inter-latin-600.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------------------
   1. Tokens — alle namen komen uit het woordenboek van deze build
   ------------------------------------------------------------------------- */
:root {
	/* kleuren */
	--vlq-root: #0c0d10;
	--vlq-highlight: #9d39f0;
	--vlq-press: #8f18ee;
	--vlq-ground: #0d0e12;
	--vlq-panel: #16171d;
	--vlq-script: #ffffff;
	--vlq-faint: #bfbebe;
	--vlq-hairline: #26262f;
	--vlq-rule-bold: #3a3a46;
	--vlq-gradient-light: #d6b0f9;
	--vlq-fade-bottom: #b75ff5;
	--vlq-rg-banner: #c1121f;

	/* ruimte — Fibonacci-achtige reeks */
	--vlq-hair: 3px;
	--vlq-tiny: 8px;
	--vlq-snug: 13px;
	--vlq-base: 21px;
	--vlq-wide: 34px;
	--vlq-roomy: 55px;
	--vlq-vast: 89px;
	--vlq-huge: 144px;

	/* geometrie */
	--vlq-capsule: 9999px;
	--vlq-circle: 50%;
	--r-hair: 2px;
	--r-tiny: 4px;
	--r-snug: 8px;
	--r-base: 12px;
	--r-wide: 20px;
	--r-roomy: 26px;
	--r-vast: 32px;
	--r-huge: 40px;

	/* typografie */
	--vlq-banner: "Inter", "Segoe UI", system-ui, sans-serif;
	--vlq-text: "Inter", "Segoe UI", system-ui, sans-serif;
	--vlq-h1: 48px;
	--vlq-head: 36px;
	--vlq-sub: 26px;
	--vlq-display-4: 21px;
	--vlq-h5: 18px;
	--vlq-micro-head: 16px;
	--vlq-normal: 19px;
	--vlq-small: 16px;
	--vlq-xs: 14px;
	--vlq-close: 1.2;
	--vlq-default: 1.7;
	--l-roomy: 2;
	--w-normal: 400;
	--vlq-half: 500;
	--vlq-black: 600;
	--e-snug: -0.01em;
	--e-normal: 0;
	--vlq-airy: 0.02em;

	/* schaduwen */
	--d-hair: 0 1px 1px rgba(0, 0, 0, 0.05);
	--d-tiny: 0 1px 2px rgba(0, 0, 0, 0.06);
	--d-snug: 0 2px 6px rgba(0, 0, 0, 0.08);
	--d-base: 0 6px 18px rgba(0, 0, 0, 0.12);
	--d-wide: 0 12px 32px rgba(0, 0, 0, 0.16);
	--d-roomy: 0 18px 44px rgba(0, 0, 0, 0.2);
	--d-vast: 0 24px 56px rgba(0, 0, 0, 0.24);
	--d-huge: 0 32px 72px rgba(0, 0, 0, 0.28);

	/* beweging — getallen en curven van deze build */
	--vlq-snap: 122ms;
	--t-normal: 210ms;
	--vlq-calm: 333ms;
	--vlq-settle: cubic-bezier(0.34, 0.85, 0.29, 0.96);
	--vlq-enter: cubic-bezier(0.52, 0.02, 0.49, 0.96);
	--vlq-smooth: cubic-bezier(0.52, 0.02, 0.49, 0.96);
	--vlq-pop: cubic-bezier(0.24, 1.15, 0.7, 1);

	/* maten */
	--vlq-site: 1320px;
	--vlq-prose: 1320px;
	--vlq-inset-desktop: 40px;
	--vlq-pad-md: 24px;
	--vlq-pad-sm: 16px;
	--vlq-slim: 1px;
	--vlq-even: 2px;
	--b-wide: 3px;
	--vlq-height-desktop: 78px;
	--vlq-short: 62px;

	/* eigen hulpwaarden van deze build */
	--vlq-sec-y: 44px;
	--vlq-tight: 560px;
	--vlq-ck-h: 0px;
	--vlq-shell-h: 118px;
}

/* -------------------------------------------------------------------------
   2. Mobiele schaal — desktop-first, dus overschrijven onder bp-sm
   ------------------------------------------------------------------------- */
@media (max-width: 580px) {
	:root {
		--vlq-h1: 32px;
		--vlq-head: 26px;
		--vlq-sub: 22px;
		--vlq-display-4: 19px;
		--vlq-h5: 17px;
		--vlq-micro-head: 15px;
		--vlq-normal: 18px;
		--vlq-small: 15px;
		--vlq-xs: 13px;
		--vlq-sec-y: 34px;
	}
}

/* -------------------------------------------------------------------------
   3. Reset en basis
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	overflow-x: clip;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	margin-block-start: var(--vlq-ck-h, 0px);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: var(--vlq-ground);
	color: var(--vlq-script);
	font-family: var(--vlq-text);
	font-size: var(--vlq-normal);
	font-weight: var(--w-normal);
	line-height: var(--l-roomy);
	letter-spacing: var(--e-normal);
}

.main {
	flex: 1 0 auto;
	display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: anywhere;
	margin: 0;
}

h1 {
	font-family: var(--vlq-banner);
	font-size: var(--vlq-h1);
	font-weight: var(--vlq-black);
	line-height: var(--vlq-close);
	letter-spacing: var(--e-snug);
	color: var(--vlq-script);
}

h2 {
	font-family: var(--vlq-banner);
	font-size: var(--vlq-head);
	font-weight: var(--vlq-black);
	line-height: var(--vlq-close);
	letter-spacing: var(--e-snug);
	color: var(--vlq-script);
}

h3 {
	font-family: var(--vlq-text);
	font-size: var(--vlq-sub);
	font-weight: var(--vlq-black);
	line-height: var(--vlq-default);
	color: var(--vlq-script);
}

h4 {
	font-family: var(--vlq-text);
	font-size: var(--vlq-display-4);
	font-weight: var(--vlq-black);
	line-height: var(--vlq-default);
	color: var(--vlq-script);
}

h5 {
	font-family: var(--vlq-text);
	font-size: var(--vlq-h5);
	font-weight: var(--vlq-half);
	line-height: var(--vlq-default);
	color: var(--vlq-script);
}

h6 {
	font-family: var(--vlq-text);
	font-size: var(--vlq-micro-head);
	font-weight: var(--vlq-half);
	line-height: var(--vlq-default);
	color: var(--vlq-script);
}

p {
	margin: 0 0 var(--vlq-base);
}

ul,
ol,
dl {
	margin: 0 0 var(--vlq-base);
	padding: 0;
}

li {
	margin: 0 0 var(--vlq-tiny);
}

strong {
	font-weight: var(--vlq-black);
	color: var(--vlq-script);
}

em {
	font-style: italic;
}

img,
svg {
	max-width: 100%;
	display: block;
}

img {
	height: auto;
}

a {
	color: var(--vlq-fade-bottom);
	text-decoration-thickness: from-font;
	transition: color var(--vlq-snap) var(--vlq-settle);
}

a:hover,
a:focus-visible {
	color: var(--vlq-script);
}

button {
	font: inherit;
	cursor: pointer;
}

table {
	border-collapse: collapse;
}

[id] {
	scroll-margin-block-start: var(--vlq-shell-h, 118px);
}

/* -------------------------------------------------------------------------
   4. Toegankelijkheid — sprongkoppeling, schermlezers, minder beweging
   ------------------------------------------------------------------------- */
.skip-hop {
	position: fixed;
	inset-inline-start: var(--vlq-snug);
	z-index: 120;
	padding: var(--vlq-snug) var(--vlq-base);
	background: var(--vlq-panel);
	color: var(--vlq-script);
	border-radius: var(--r-snug);
	font-size: var(--vlq-small);
	text-decoration: none;
}

.skip-hop:not(:focus) {
	top: -200px !important;
}

.skip-hop:focus {
	top: var(--vlq-snug);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

:focus-visible {
	outline: var(--vlq-even) solid var(--vlq-gradient-light);
	outline-offset: var(--vlq-hair);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition-duration: 1ms !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------------------------------
   5. Waarschuwingsstrook 18+ (RG-05) — teken links, strook neutraal
   ------------------------------------------------------------------------- */
.rg-band {
	display: block;
	margin: 0;
	padding: var(--vlq-tiny) var(--vlq-pad-md);
	background: var(--vlq-panel);
	color: var(--vlq-script);
	border-block-end: var(--vlq-slim) solid var(--vlq-hairline);
	font-size: var(--vlq-xs);
	line-height: var(--vlq-default);
	text-align: center;
}

.rg-band-sign {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	min-height: 26px;
	margin-inline-end: var(--vlq-tiny);
	padding-inline: var(--vlq-hair);
	background: var(--vlq-rg-banner);
	color: var(--vlq-script);
	border-radius: var(--r-snug);
	font-size: var(--vlq-xs);
	font-weight: var(--vlq-black);
	vertical-align: middle;
}

.rg-band-step {
	color: var(--vlq-gradient-light);
	background: var(--vlq-panel);
	text-decoration: underline;
}

.rg-band-step:hover,
.rg-band-step:focus-visible {
	color: var(--vlq-script);
}

/* -------------------------------------------------------------------------
   6. Koptekst p14 — HEAD-BURGER: alleen logo en menuknop, nooit items in de rij
   ------------------------------------------------------------------------- */
.p14 {
	position: sticky;
	inset-block-start: var(--vlq-ck-h, 0px);
	z-index: 90;
	background: var(--vlq-ground);
	color: var(--vlq-script);
	box-shadow: none;
	transition: box-shadow var(--t-normal) var(--vlq-settle);
}

.p14.is-shrunk {
	box-shadow: var(--d-base);
}

.p14-strip {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--vlq-snug);
	height: 78px;
	max-width: calc(var(--vlq-site) + 2 * var(--vlq-inset-desktop));
	margin-inline: auto;
	padding-inline: var(--vlq-pad-md);
	background: var(--vlq-ground);
	color: var(--vlq-script);
	transition: height var(--t-normal) var(--vlq-settle);
}

.p14.is-shrunk .p14-strip {
	height: 62px;
}

.p14-emblem {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
}

.p14-emblem-media {
	height: 60px;
	width: auto;
	flex-shrink: 0;
	transition: height var(--t-normal) var(--vlq-settle);
}

.p14.is-shrunk .p14-emblem-media {
	height: 46px;
}

.p14-menu-knob {
	margin-inline-start: auto;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: var(--vlq-tiny) var(--vlq-snug);
	background: var(--vlq-ground);
	color: var(--vlq-script);
	border: 0;
	border-radius: var(--r-snug);
	font-family: var(--vlq-banner);
	font-size: var(--vlq-small);
	font-weight: var(--vlq-half);
	letter-spacing: var(--vlq-airy);
	white-space: nowrap;
	transition: color var(--vlq-snap) var(--vlq-settle);
}

.p14-menu-knob:hover,
.p14-menu-knob:focus-visible {
	color: var(--vlq-gradient-light);
}

.p14-actions {
	display: flex;
	align-items: center;
	gap: var(--vlq-tiny);
	flex-shrink: 0;
}

.p14-key {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	border: var(--vlq-even) solid var(--vlq-gradient-light);
	border-radius: var(--r-tiny);
	white-space: nowrap;
	flex-shrink: 0;
	text-decoration: none;
}

.p14-slide {
	display: none;
	position: absolute;
	inset-block-start: 100%;
	inset-inline: 0;
	z-index: 95;
	max-height: 72vh;
	overflow-y: auto;
	background: var(--vlq-panel);
	color: var(--vlq-script);
	border-block-start: var(--vlq-slim) solid var(--vlq-hairline);
	box-shadow: var(--d-wide);
}

.p14-slide.is-open {
	display: block;
}

.p14-bar {
	display: block;
	padding: var(--vlq-tiny) var(--vlq-pad-md) var(--vlq-base);
}

.p14-series {
	display: block;
	margin: 0;
	list-style: none;
}

.p14-entry {
	display: block;
	margin: 0;
	border-block-end: var(--vlq-slim) solid var(--vlq-hairline);
}

.p14-step {
	display: block;
	padding: var(--vlq-snug) 0;
	background: var(--vlq-panel);
	color: var(--vlq-script);
	font-size: var(--vlq-h5);
	font-weight: var(--vlq-half);
	line-height: var(--vlq-default);
	white-space: nowrap;
	text-decoration: none;
}

.p14-step:hover,
.p14-step:focus-visible {
	color: var(--vlq-gradient-light);
}

.p14-step[aria-current="page"] {
	background: var(--vlq-panel);
	color: var(--vlq-gradient-light);
	font-weight: var(--vlq-black);
}

/* Onder 620px past de aanbiedingsknop niet naast logo en menuknop:
   de rij mag dan omslaan, de knop krijgt zijn eigen regel. */
@media (max-width: 620px) {
	.p14-strip {
		flex-wrap: wrap;
		height: auto;
		min-height: 62px;
		padding-block: var(--vlq-tiny);
		padding-inline: var(--vlq-pad-sm);
	}

	.p14.is-shrunk .p14-strip {
		height: auto;
	}

	.p14-emblem {
		order: 1;
	}

	.p14-menu-knob {
		order: 2;
	}

	.p14-actions {
		order: 4;
		flex-basis: 100%;
	}

	.p14-emblem-media,
	.p14.is-shrunk .p14-emblem-media {
		height: 44px;
	}

	.p14-actions .p14-key {
		width: 100%;
		min-height: 44px;
		padding-inline: var(--vlq-snug);
		font-size: var(--vlq-small);
	}

	/* De kop blijft plakken: houd hem laag, anders eet hij een kwart scherm. */
	.p14-strip {
		gap: var(--vlq-tiny);
		padding-block: var(--vlq-hair);
	}

	.p14.is-shrunk .p14-emblem-media {
		height: 38px;
	}

	.rg-band {
		padding: var(--vlq-hair) var(--vlq-pad-sm);
		font-size: var(--vlq-xs);
		line-height: 1.35;
	}
}

/* -------------------------------------------------------------------------
   7. Gedeelde sectiematen — elke sectie deelt dezelfde breedte
   ------------------------------------------------------------------------- */
.w96-wrap,
.j69-wrap,
.a57-wrap,
.a15-wrap,
.g40-wrap,
.l19-wrap,
.i05-wrap,
.k53-wrap,
.e21-wrap,
.w46-wrap,
.s86-wrap,
.h97-wrap {
	display: block;
	max-width: calc(var(--vlq-site) + 2 * var(--vlq-inset-desktop));
	margin-inline: auto;
	padding-inline: var(--vlq-inset-desktop);
}

@media (max-width: 860px) {
	.w96-wrap,
	.j69-wrap,
	.a57-wrap,
	.a15-wrap,
	.g40-wrap,
	.l19-wrap,
	.i05-wrap,
	.k53-wrap,
	.e21-wrap,
	.w46-wrap,
	.s86-wrap,
	.h97-wrap {
		padding-inline: var(--vlq-pad-md);
	}
}

@media (max-width: 580px) {
	.w96-wrap,
	.j69-wrap,
	.a57-wrap,
	.a15-wrap,
	.g40-wrap,
	.l19-wrap,
	.i05-wrap,
	.k53-wrap,
	.e21-wrap,
	.w46-wrap,
	.s86-wrap,
	.h97-wrap {
		padding-inline: var(--vlq-pad-sm);
	}
}

/* -------------------------------------------------------------------------
   8. Eerste beeld d42 — HERO-03: gecentreerd en compact, geen losse foto
   ------------------------------------------------------------------------- */
.d42 {
	position: relative;
	padding-block: 56px;
	background-color: var(--vlq-ground);
	background-image: linear-gradient(180deg, rgba(157, 57, 240, 0.16), rgba(13, 14, 18, 0.98)), url("/archive-fluid/picture-bright.webp");
	background-position: center 30%;
	background-size: cover;
	background-repeat: no-repeat;
	color: var(--vlq-script);
	overflow: hidden;
}

.d42-core {
	max-width: var(--vlq-tight);
	margin-inline: auto;
	padding-inline: var(--vlq-pad-md);
	text-align: center;
}

.d42-tagline {
	display: block;
	margin-block-end: var(--vlq-base);
	color: var(--vlq-fade-bottom);
	font-size: var(--vlq-xs);
	font-weight: var(--vlq-half);
	letter-spacing: var(--vlq-airy);
	text-transform: uppercase;
}

.d42-under {
	margin-block: var(--vlq-base);
	color: var(--vlq-faint);
	font-size: var(--vlq-normal);
	line-height: var(--l-roomy);
}

.d42-call {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	margin-block: var(--vlq-wide) var(--vlq-base);
	border-radius: var(--r-tiny);
	text-decoration: none;
}

.d42-fine {
	display: block;
	max-width: var(--vlq-tight);
	margin-inline: auto;
	color: var(--vlq-faint);
	font-size: var(--vlq-xs);
	line-height: var(--vlq-default);
}

/* -------------------------------------------------------------------------
   9. Paginakop w96 — PHEAD-07: index-cijfer naast de titel
   ------------------------------------------------------------------------- */
.w96 {
	padding-block: var(--vlq-sec-y);
	background: var(--vlq-ground);
	color: var(--vlq-script);
}

.w96-wrap {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: var(--vlq-wide);
	align-items: start;
}

.w96-index {
	align-self: start;
	margin: 0;
	color: var(--vlq-fade-bottom);
	font-family: var(--vlq-banner);
	font-size: calc(var(--vlq-h1) * 1.4);
	font-weight: var(--vlq-black);
	line-height: var(--vlq-close);
	letter-spacing: var(--e-snug);
}

.w96-meat {
	display: block;
	min-width: 0;
}

@media (max-width: 860px) {
	.w96-wrap {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--vlq-snug);
	}

	.w96-index {
		font-size: calc(var(--vlq-h1) * 1.1);
	}
}

/* -------------------------------------------------------------------------
   10. Kaartenraster j69 — GRID-05: brede kopkaart + compacte lijst
   ------------------------------------------------------------------------- */
.j69 {
	padding-block: var(--vlq-sec-y);
	background: var(--vlq-ground);
	color: var(--vlq-script);
}

.j69-hdr {
	margin-block-end: var(--vlq-wide);
}

.j69-star {
	margin-block-end: var(--vlq-roomy);
	padding: var(--vlq-wide);
	background: var(--vlq-highlight);
	color: var(--vlq-script);
	border-radius: var(--r-wide);
	box-shadow: var(--d-base);
	transition: box-shadow var(--t-normal) var(--vlq-settle);
}

.j69-star:hover {
	box-shadow: var(--d-wide);
}

.j69-star-top {
	margin-block-end: var(--vlq-snug);
	background: var(--vlq-highlight);
	color: var(--vlq-script);
	font-family: var(--vlq-banner);
	font-size: var(--vlq-head);
	font-weight: var(--vlq-black);
	line-height: var(--vlq-close);
}

.j69-star-prose {
	margin: 0;
	background: var(--vlq-highlight);
	color: var(--vlq-script);
	font-size: var(--vlq-h5);
	line-height: var(--vlq-default);
}

.j69-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--vlq-wide);
}

.j69-entry {
	padding: var(--vlq-base);
	background: var(--vlq-ground);
	color: var(--vlq-script);
	border-block-start: var(--vlq-even) solid var(--vlq-highlight);
	transition: box-shadow var(--t-normal) var(--vlq-settle);
}

.j69-entry:hover {
	box-shadow: var(--d-snug);
}

.j69-sign {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-block-end: var(--vlq-snug);
	background: var(--vlq-panel);
	color: var(--vlq-fade-bottom);
	border: var(--vlq-slim) solid var(--vlq-rule-bold);
	border-radius: var(--r-snug);
}

.j69-sign svg {
	width: 21px;
	height: 21px;
	fill: currentColor;
}

.j69-entry-top {
	margin-block-end: var(--vlq-tiny);
	background: var(--vlq-ground);
	color: var(--vlq-script);
	font-family: var(--vlq-text);
	font-size: var(--vlq-normal);
	font-weight: var(--vlq-black);
	line-height: var(--vlq-default);
}

.j69-entry-prose {
	margin: 0;
	background: var(--vlq-ground);
	color: var(--vlq-faint);
	font-size: var(--vlq-small);
	line-height: var(--vlq-default);
}

@media (max-width: 860px) {
	.j69-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--vlq-base);
	}

	.j69-star {
		padding: var(--vlq-base);
	}
}

/* -------------------------------------------------------------------------
   11. Ervaringen a15 — REV-10: stil, alleen een stippellijn onder elk item
   ------------------------------------------------------------------------- */
.a15 {
	padding-block: var(--vlq-sec-y);
	background: var(--vlq-ground);
	color: var(--vlq-script);
}

.a15-hdr {
	margin-block-end: var(--vlq-wide);
}

.a15-series {
	display: block;
}

.a15-entry {
	display: block;
	padding-block: var(--vlq-base);
	border-block-end: var(--vlq-slim) dotted var(--vlq-rule-bold);
}

.a15-line {
	display: block;
	margin-block-end: var(--vlq-tiny);
}

.a15-who {
	background: var(--vlq-ground);
	color: var(--vlq-script);
	font-size: var(--vlq-normal);
	font-weight: var(--vlq-half);
}

.a15-score {
	background: var(--vlq-ground);
	color: var(--vlq-faint);
	font-size: var(--vlq-small);
}

.a15-when {
	background: var(--vlq-ground);
	color: var(--vlq-faint);
	font-size: var(--vlq-small);
}

.a15-prose {
	margin: 0;
	background: var(--vlq-ground);
	color: var(--vlq-script);
	font-size: var(--vlq-normal);
	line-height: var(--l-roomy);
	quotes: none;
}

.a15-prose p {
	margin: 0;
}

/* -------------------------------------------------------------------------
   12. Vragen a57 — FAQ-01: klassieke accordeon met plus- en minteken
   ------------------------------------------------------------------------- */
.a57 {
	padding-block: var(--vlq-sec-y);
	background: var(--vlq-ground);
	color: var(--vlq-script);
}

.a57-hdr {
	margin-block-end: var(--vlq-wide);
}

.a57-series {
	display: block;
}

.a57-entry {
	display: block;
	padding-block: var(--vlq-snug);
	border-block-end: var(--vlq-slim) solid var(--vlq-hairline);
}

.a57-ask {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 24px;
	gap: var(--vlq-snug);
	align-items: baseline;
	padding-block: var(--vlq-tiny);
	list-style: none;
	cursor: pointer;
}

.a57-ask::-webkit-details-marker {
	display: none;
}

.a57-q {
	margin: 0;
	background: var(--vlq-ground);
	color: var(--vlq-script);
	font-family: var(--vlq-text);
	font-size: var(--vlq-h5);
	font-weight: var(--vlq-black);
	line-height: var(--vlq-default);
}

.a57-entry[open] .a57-q,
.a57-ask:hover .a57-q {
	color: var(--vlq-gradient-light);
}

.a57-mark {
	justify-self: end;
	width: 24px;
	background: var(--vlq-ground);
	color: var(--vlq-fade-bottom);
	font-size: var(--vlq-sub);
	font-weight: var(--vlq-black);
	line-height: var(--vlq-default);
	text-align: center;
}

.a57-mark {
	transition: transform var(--vlq-snap) var(--vlq-settle);
}

.a57-entry[open] .a57-mark {
	color: var(--vlq-gradient-light);
	transform: rotate(45deg);
}

.a57-meat {
	display: block;
	padding-block-start: var(--vlq-snug);
	background: var(--vlq-ground);
	color: var(--vlq-faint);
}

.a57-meat p {
	margin: 0;
	background: var(--vlq-ground);
	color: var(--vlq-faint);
	font-size: var(--vlq-normal);
	line-height: var(--l-roomy);
}

/* -------------------------------------------------------------------------
   13. Tekstblok l19 — PROSE-16: rubriekregel boven elke h2
   ------------------------------------------------------------------------- */
.l19 {
	padding-block: var(--vlq-sec-y);
	background: var(--vlq-ground);
	color: var(--vlq-script);
}

.l19-block {
	display: block;
	margin-block-end: var(--vlq-wide);
}

.l19-block:last-child {
	margin-block-end: 0;
}

.l19-rubric {
	display: block;
	margin-block-end: var(--vlq-tiny);
	background: var(--vlq-ground);
	color: var(--vlq-fade-bottom);
	font-size: var(--vlq-xs);
	font-weight: var(--w-normal);
	letter-spacing: var(--vlq-airy);
	line-height: var(--vlq-default);
	text-transform: uppercase;
	text-align: center;
}

.l19-hdr {
	margin-block: 0 var(--vlq-snug);
	font-size: calc(var(--vlq-head) * 1.12);
	font-weight: var(--w-normal);
	text-align: center;
}

.l19-block p {
	margin-block: 0 var(--vlq-snug);
	color: var(--vlq-script);
	font-size: var(--vlq-normal);
	line-height: var(--l-roomy);
}

.l19-series {
	margin-block: 0 var(--vlq-snug);
	padding-inline-start: var(--vlq-wide);
	list-style: disc;
}

.l19-ranked {
	margin-block: 0 var(--vlq-snug);
	padding-inline-start: var(--vlq-wide);
	list-style: decimal;
}

.l19-entry {
	margin-block-end: var(--vlq-tiny);
	color: var(--vlq-script);
	font-size: var(--vlq-normal);
	line-height: var(--vlq-default);
}

.l19-block p a,
.l19-entry a {
	color: var(--vlq-fade-bottom);
	text-decoration: underline;
}

.l19-block p a:hover,
.l19-entry a:hover {
	color: var(--vlq-script);
}

.l19-fig {
	display: block;
	margin: 0 0 var(--vlq-base);
}

.l19-fig-media {
	width: 100%;
	max-width: 560px;
	height: auto;
	margin-inline: auto;
	border-radius: var(--r-base);
	object-fit: contain;
}

.l19-fig-side {
	width: 340px;
	max-width: 340px;
	margin-inline-start: var(--vlq-wide);
	float: inline-end;
}

.l19-fig-side .l19-fig-media {
	max-width: 340px;
}

@media (max-width: 860px) {
	.l19-fig-side {
		float: none;
		width: 100%;
		max-width: 100%;
		margin-inline-start: 0;
	}

	.l19-fig-side .l19-fig-media {
		max-width: 420px;
	}
}

/* -------------------------------------------------------------------------
   14. Tabel i05 — TABLE-03: op smalle schermen wordt elke rij een kaart
   ------------------------------------------------------------------------- */
.i05 {
	padding-block: var(--vlq-sec-y);
	background: var(--vlq-ground);
	color: var(--vlq-script);
}

.i05-hdr {
	margin-block-end: var(--vlq-snug);
}

.i05-cap {
	display: block;
	margin-block-end: var(--vlq-base);
	background: var(--vlq-ground);
	color: var(--vlq-faint);
	font-size: var(--vlq-small);
	line-height: var(--vlq-default);
}

.i05-scroll {
	display: block;
	overflow-x: auto;
}

.i05-sheet {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-size: var(--vlq-small);
}

.i05-head-cell {
	padding: var(--vlq-snug) var(--vlq-base);
	background: var(--vlq-highlight);
	color: var(--vlq-script);
	font-weight: var(--vlq-black);
	text-align: start;
	vertical-align: top;
}

.i05-row {
	background: var(--vlq-panel);
}

.i05-cell {
	padding: var(--vlq-snug) var(--vlq-base);
	background: var(--vlq-panel);
	color: var(--vlq-script);
	border-block-start: var(--vlq-slim) solid var(--vlq-hairline);
	line-height: var(--vlq-default);
	overflow-wrap: break-word;
	vertical-align: top;
}

@media (max-width: 580px) {
	.i05-scroll {
		overflow-x: visible;
	}

	.i05-sheet {
		min-width: 0;
		display: block;
	}

	.i05-sheet thead {
		display: none;
	}

	.i05-sheet tbody {
		display: block;
	}

	.i05-row {
		display: block;
		margin-block-end: var(--vlq-base);
		padding: var(--vlq-base);
		background: var(--vlq-panel);
		border-radius: var(--r-base);
	}

	.i05-cell {
		display: block;
		padding: var(--vlq-tiny) 0;
		border-block-start: 0;
	}

	.i05-cell::before {
		content: attr(data-label);
		display: block;
		color: var(--vlq-faint);
		font-size: var(--vlq-xs);
		letter-spacing: var(--vlq-airy);
		text-transform: uppercase;
	}
}

/* -------------------------------------------------------------------------
   15. Juridische secties k53 — LEGAL-07: redactionele opmaak
   ------------------------------------------------------------------------- */
.k53 {
	padding-block: var(--vlq-sec-y);
	background: var(--vlq-ground);
	color: var(--vlq-script);
}

.k53-rubric {
	display: block;
	margin-block-end: var(--vlq-tiny);
	background: var(--vlq-ground);
	color: var(--vlq-fade-bottom);
	font-size: var(--vlq-xs);
	letter-spacing: var(--vlq-airy);
	text-transform: uppercase;
}

.k53-lede {
	margin-block: 0 var(--vlq-wide);
	background: var(--vlq-ground);
	color: var(--vlq-script);
	font-family: var(--vlq-banner);
	font-size: var(--vlq-display-4);
	font-style: italic;
	line-height: var(--vlq-default);
}

.k53-block {
	display: block;
	margin-block-end: var(--vlq-wide);
}

.k53-hdr {
	margin-block: 0 var(--vlq-tiny);
	font-family: var(--vlq-banner);
	font-size: var(--vlq-sub);
	font-style: italic;
}

.k53-rule {
	width: 80px;
	height: 0;
	margin: 0 0 var(--vlq-snug);
	margin-inline: 0;
	border: 0;
	border-block-start: var(--vlq-even) solid var(--vlq-highlight);
}

.k53-prose {
	margin-block: 0 var(--vlq-snug);
	background: var(--vlq-ground);
	color: var(--vlq-script);
	font-size: var(--vlq-normal);
	line-height: var(--l-roomy);
}

.k53-block .k53-prose:first-of-type::first-letter {
	float: inline-start;
	margin-inline-end: var(--vlq-tiny);
	color: var(--vlq-gradient-light);
	font-family: var(--vlq-banner);
	font-size: 3em;
	font-weight: var(--vlq-black);
	line-height: 0.9;
}

.k53-series {
	margin-block: 0 var(--vlq-snug);
	padding-inline-start: var(--vlq-wide);
	list-style: disc;
}

.k53-entry {
	margin-block-end: var(--vlq-tiny);
	color: var(--vlq-script);
	font-size: var(--vlq-normal);
	line-height: var(--vlq-default);
}

.k53-fine {
	display: block;
	margin-block-start: var(--vlq-wide);
	padding: var(--vlq-base);
	background: var(--vlq-panel);
	color: var(--vlq-faint);
	border-radius: var(--r-base);
	font-size: var(--vlq-small);
	line-height: var(--vlq-default);
}

/* -------------------------------------------------------------------------
   16. Contactformulier e21 — FORM-04: velden op één regel
   ------------------------------------------------------------------------- */
.e21 {
	padding-block: var(--vlq-sec-y);
	background: var(--vlq-ground);
	color: var(--vlq-script);
}

.e21-hdr {
	margin-block-end: var(--vlq-snug);
}

.e21-lede {
	margin-block: 0 var(--vlq-base);
	background: var(--vlq-ground);
	color: var(--vlq-faint);
	font-size: var(--vlq-normal);
	line-height: var(--l-roomy);
}

.e21-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--vlq-snug);
}

.e21-slot {
	display: flex;
	flex-direction: column;
	gap: var(--vlq-hair);
	flex: 1 1 200px;
	min-width: 0;
}

.e21-slot-copy {
	flex: 2 1 320px;
}

.e21-cap {
	background: var(--vlq-ground);
	color: var(--vlq-faint);
	font-size: var(--vlq-xs);
	letter-spacing: var(--vlq-airy);
	text-transform: uppercase;
}

.e21-control {
	width: 100%;
	min-height: 48px;
	padding: var(--vlq-tiny) var(--vlq-snug);
	background: var(--vlq-panel);
	color: var(--vlq-script);
	border: var(--vlq-slim) solid var(--vlq-rule-bold);
	border-radius: var(--r-snug);
	font-family: var(--vlq-text);
	font-size: var(--vlq-small);
}

.e21-control::placeholder {
	color: var(--vlq-faint);
}

.e21-send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: var(--vlq-tiny) var(--vlq-wide);
	background: var(--vlq-highlight);
	color: var(--vlq-script);
	border: 0;
	border-radius: var(--r-base);
	font-family: var(--vlq-banner);
	font-size: var(--vlq-small);
	font-weight: var(--vlq-half);
	white-space: nowrap;
	transition: background var(--vlq-snap) var(--vlq-settle), transform var(--vlq-snap) var(--vlq-settle);
}

.e21-send:hover,
.e21-send:focus-visible {
	background: var(--vlq-press);
	color: var(--vlq-script);
	transform: translateY(2px);
}

.e21-done {
	display: none;
	margin-block-start: var(--vlq-base);
	padding: var(--vlq-base);
	background: var(--vlq-panel);
	color: var(--vlq-script);
	border-inline-start: var(--b-wide) solid var(--vlq-highlight);
	border-radius: var(--r-snug);
	font-size: var(--vlq-small);
	line-height: var(--vlq-default);
}

.e21-done.is-open {
	display: block;
}

@media (max-width: 860px) {
	.e21-slot,
	.e21-slot-copy {
		flex: 0 0 auto;
		width: 100%;
	}

	.e21-send {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
   17. Auteurskaart w46 — AUTH-05: compacte kaart met portret
   ------------------------------------------------------------------------- */
.w46 {
	padding-block: var(--vlq-sec-y);
	background: var(--vlq-ground);
	color: var(--vlq-script);
}

.w46-card {
	display: flex;
	gap: var(--vlq-snug);
	align-items: flex-start;
	max-width: 480px;
	padding: var(--vlq-base);
	background: var(--vlq-panel);
	color: var(--vlq-script);
	border-radius: var(--r-base);
}

.w46-frame {
	display: inline-block;
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: var(--vlq-circle);
}

.w46-shot {
	width: 132%;
	height: 132%;
	max-width: none;
	margin-inline-start: -9%;
	margin-block-start: 0;
	object-fit: cover;
	object-position: 50% 12%;
}

.w46-meat {
	display: flex;
	flex-direction: column;
	gap: var(--vlq-hair);
	min-width: 0;
}

.w46-duty {
	background: var(--vlq-panel);
	color: var(--vlq-fade-bottom);
	font-size: var(--vlq-xs);
	letter-spacing: var(--vlq-airy);
	text-transform: uppercase;
}

.w46-who {
	margin: 0;
	background: var(--vlq-panel);
	color: var(--vlq-script);
	font-family: var(--vlq-text);
	font-size: var(--vlq-normal);
	font-weight: var(--vlq-black);
	line-height: var(--vlq-default);
}

.w46-prose {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	background: var(--vlq-panel);
	color: var(--vlq-faint);
	font-size: var(--vlq-small);
	line-height: var(--vlq-default);
}

.w46-articles {
	display: block;
	margin-block-start: var(--vlq-wide);
}

.w46-articles-hdr {
	margin-block-end: var(--vlq-tiny);
	font-family: var(--vlq-text);
	font-size: var(--vlq-display-4);
}

.w46-articles-series {
	margin: 0;
	padding-inline-start: var(--vlq-base);
	list-style: square;
}

.w46-articles-entry {
	margin-block-end: var(--vlq-hair);
	background: var(--vlq-ground);
	color: var(--vlq-faint);
	font-size: var(--vlq-small);
	line-height: var(--vlq-default);
}

/* -------------------------------------------------------------------------
   18. Auteursregel s86 — BYLINE-06: tekst links, portret rechts
   ------------------------------------------------------------------------- */
.s86 {
	padding-block: var(--vlq-sec-y);
	background: var(--vlq-ground);
	color: var(--vlq-script);
}

.s86-wrap {
	display: flex;
	gap: var(--vlq-base);
	align-items: center;
	justify-content: center;
}

.s86-prose {
	margin: 0;
	background: var(--vlq-ground);
	color: var(--vlq-faint);
	font-size: var(--vlq-small);
	font-style: italic;
	line-height: var(--vlq-default);
	text-align: end;
}

.s86-who {
	background: var(--vlq-ground);
	color: var(--vlq-fade-bottom);
	text-decoration: underline;
}

.s86-who:hover,
.s86-who:focus-visible {
	color: var(--vlq-script);
	text-decoration-thickness: 2px;
}

.s86-sep {
	background: var(--vlq-ground);
	color: var(--vlq-faint);
}

.s86-duty {
	background: var(--vlq-ground);
	color: var(--vlq-faint);
}

.s86-frame {
	display: inline-block;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: var(--vlq-circle);
}

.s86-shot {
	width: 132%;
	height: 132%;
	max-width: none;
	margin-inline-start: -9%;
	margin-block-start: 0;
	object-fit: cover;
	object-position: 50% 12%;
}

/* -------------------------------------------------------------------------
   19. Actieblok g40 — CTA-03: tekst links, gekleurd paneel rechts
   ------------------------------------------------------------------------- */
.g40 {
	padding-block: var(--vlq-sec-y);
	background: var(--vlq-ground);
	color: var(--vlq-script);
}

.g40-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--vlq-base);
	align-items: stretch;
}

.g40-meat {
	padding: var(--vlq-wide);
	background: var(--vlq-ground);
	color: var(--vlq-script);
	border: var(--vlq-slim) solid var(--vlq-hairline);
	border-radius: var(--r-wide);
}

.g40-top {
	margin-block-end: var(--vlq-snug);
}

.g40-prose {
	margin-block: 0 var(--vlq-base);
	max-width: var(--vlq-tight);
	background: var(--vlq-ground);
	color: var(--vlq-faint);
	font-size: var(--vlq-normal);
	line-height: var(--l-roomy);
}

.g40-call {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	border-radius: var(--r-tiny);
	text-decoration: none;
}

.g40-fine {
	display: block;
	margin-block-start: var(--vlq-snug);
	background: var(--vlq-ground);
	color: var(--vlq-faint);
	font-size: var(--vlq-xs);
	line-height: var(--vlq-default);
}

.g40-panel {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 400px;
	padding: var(--vlq-wide);
	background: var(--vlq-highlight);
	background-image: linear-gradient(135deg, var(--vlq-highlight), var(--vlq-root));
	color: var(--vlq-script);
	border-radius: var(--r-wide);
}

.g40-glyph {
	display: block;
	background: transparent;
	color: var(--vlq-script);
	font-family: var(--vlq-banner);
	font-size: clamp(64px, 11vw, 148px);
	font-weight: var(--vlq-black);
	line-height: var(--vlq-close);
	letter-spacing: var(--e-snug);
	text-align: center;
}

/* Smalle variant: alleen een knop met de bonusvoorwaarden eronder. */
.g40-rail {
	padding-block: var(--vlq-sec-y);
}

.g40-onerow {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--vlq-snug);
	text-align: center;
}

.g40-hint {
	max-width: var(--vlq-tight);
	margin: 0;
	background: var(--vlq-ground);
	color: var(--vlq-faint);
	font-size: var(--vlq-small);
	line-height: var(--vlq-default);
	letter-spacing: var(--vlq-airy);
	text-transform: uppercase;
}

@media (max-width: 860px) {
	.g40-wrap {
		grid-template-columns: minmax(0, 1fr);
	}

	.g40-panel {
		min-height: 200px;
		order: 2;
	}

	.g40-meat {
		padding: var(--vlq-base);
	}
}

/* -------------------------------------------------------------------------
   20. Foutblok h97 — ERR-05: glitch-titel via pseudo-elementen
   ------------------------------------------------------------------------- */
.h97 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1 0 auto;
	padding-block: var(--vlq-sec-y);
	background: var(--vlq-ground);
	color: var(--vlq-script);
}

.h97-wrap {
	text-align: center;
}

.h97-top {
	position: relative;
	max-width: var(--vlq-tight);
	margin-inline: auto;
	background: transparent;
	color: var(--vlq-script);
	font-size: clamp(28px, 6vw, 48px);
}

.h97-top::before,
.h97-top::after {
	content: attr(data-text);
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 100%;
	opacity: 0.6;
	pointer-events: none;
}

.h97-top::before {
	color: var(--vlq-fade-bottom);
	transform: translate(2px, -2px);
}

.h97-top::after {
	color: var(--vlq-gradient-light);
	transform: translate(-2px, 2px);
}

.h97-prose {
	max-width: var(--vlq-tight);
	margin: var(--vlq-base) auto;
	background: var(--vlq-ground);
	color: var(--vlq-faint);
	font-size: var(--vlq-normal);
	line-height: var(--l-roomy);
}

.h97-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: var(--vlq-tiny) var(--vlq-wide);
	background: var(--vlq-panel);
	color: var(--vlq-script);
	border: var(--vlq-slim) solid var(--vlq-rule-bold);
	border-radius: var(--r-base);
	font-size: var(--vlq-small);
	text-decoration: none;
	transition: background var(--vlq-snap) var(--vlq-settle);
}

.h97-back:hover,
.h97-back:focus-visible {
	background: var(--vlq-highlight);
	color: var(--vlq-script);
}

/* -------------------------------------------------------------------------
   21. Voettekst p19 — FOOT-02: twee regels, merk + navigatie
   ------------------------------------------------------------------------- */
.p19 {
	padding-block: 48px;
	background: var(--vlq-ground);
	color: var(--vlq-script);
	border-block-start: var(--vlq-slim) solid var(--vlq-hairline);
}

.p19-shell {
	display: block;
	max-width: calc(var(--vlq-site) + 2 * var(--vlq-inset-desktop));
	margin-inline: auto;
	padding-inline: var(--vlq-inset-desktop);
}

.p19-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vlq-base);
}

.p19-row-top {
	padding-block-end: var(--vlq-base);
}

.p19-row-bottom {
	padding-block-start: var(--vlq-base);
	border-block-start: var(--vlq-slim) solid var(--vlq-hairline);
}

.p19-emblem {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
}

.p19-emblem-media {
	height: 72px;
	width: auto;
	flex-shrink: 0;
}

.p19-bar {
	display: block;
}

.p19-series {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vlq-base);
	margin: 0;
	list-style: none;
}

.p19-entry {
	margin: 0;
}

.p19-step {
	background: var(--vlq-ground);
	color: var(--vlq-faint);
	font-size: var(--vlq-small);
	text-decoration: none;
	white-space: nowrap;
}

.p19-step:hover,
.p19-step:focus-visible {
	color: var(--vlq-script);
}

.p19-fine {
	background: var(--vlq-ground);
	color: var(--vlq-faint);
	font-size: var(--vlq-xs);
}

.p19-legal-bar {
	display: block;
}

.p19-legal-series {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vlq-snug);
	margin: 0;
	list-style: none;
}

.p19-legal-entry {
	margin: 0;
}

.p19-legal-entry + .p19-legal-entry::before {
	content: "·";
	margin-inline-end: var(--vlq-snug);
	color: var(--vlq-rule-bold);
}

.p19-legal-step {
	background: var(--vlq-ground);
	color: var(--vlq-faint);
	font-size: var(--vlq-xs);
	text-decoration: none;
	white-space: nowrap;
}

.p19-legal-step:hover,
.p19-legal-step:focus-visible {
	color: var(--vlq-script);
}

@media (max-width: 860px) {
	.p19-row,
	.p19-row-top,
	.p19-row-bottom {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.p19-series {
		flex-direction: column;
		align-items: center;
		gap: var(--vlq-snug);
	}
}

/* -------------------------------------------------------------------------
   22. Koekjesstrook j77 — COOK-12: schuift van boven het venster in
   ------------------------------------------------------------------------- */
.j77 {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 95;
	background: var(--vlq-panel);
	color: var(--vlq-script);
	border-block-end: var(--vlq-slim) solid var(--vlq-rule-bold);
	opacity: 0;
	transform: translateY(-100%);
	transition: transform var(--vlq-calm) var(--vlq-smooth), opacity var(--vlq-calm) var(--vlq-smooth);
}

.j77.is-open {
	opacity: 1;
	transform: translateY(0);
}

.j77-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vlq-base);
	max-width: calc(var(--vlq-site) + 2 * var(--vlq-inset-desktop));
	margin-inline: auto;
	padding: var(--vlq-snug) var(--vlq-inset-desktop);
}

.j77-copy {
	margin: 0;
	background: var(--vlq-panel);
	color: var(--vlq-script);
	font-size: var(--vlq-small);
	line-height: var(--vlq-default);
}

.j77-actions {
	display: flex;
	align-items: center;
	gap: var(--vlq-tiny);
	flex-shrink: 0;
}

.j77-grant,
.j77-reject {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--vlq-tiny) var(--vlq-base);
	border-radius: var(--r-snug);
	font-family: var(--vlq-banner);
	font-size: var(--vlq-small);
	font-weight: var(--vlq-half);
	white-space: nowrap;
	transition: background var(--vlq-snap) var(--vlq-settle);
}

.j77-grant {
	background: var(--vlq-highlight);
	color: var(--vlq-script);
	border: 0;
}

.j77-grant:hover,
.j77-grant:focus-visible {
	background: var(--vlq-press);
	color: var(--vlq-script);
}

.j77-reject {
	background: var(--vlq-ground);
	color: var(--vlq-script);
	border: var(--vlq-slim) solid var(--vlq-rule-bold);
}

.j77-reject:hover,
.j77-reject:focus-visible {
	background: var(--vlq-panel);
	color: var(--vlq-script);
}

@media (max-width: 720px) {
	.j77-line {
		flex-direction: column;
		align-items: stretch;
		gap: var(--vlq-tiny);
		padding: 12px 14px;
		font-size: 13px;
		line-height: 1.35;
	}

	.j77-copy {
		font-size: 13px;
		line-height: 1.35;
	}

	.j77-actions {
		flex-direction: row;
		gap: var(--vlq-tiny);
	}

	.j77-grant,
	.j77-reject {
		flex: 1 1 auto;
		min-height: 40px;
		padding: var(--vlq-tiny) var(--vlq-snug);
		font-size: 13px;
		white-space: normal;
	}
}

/* -------------------------------------------------------------------------
   23. Hulpklassen
   ------------------------------------------------------------------------- */
.j69-wrap > .j69-hdr,
.a15-wrap > .a15-hdr,
.a57-wrap > .a57-hdr {
	max-width: none;
}

/* -------------------------------------------------------------------------
   24. Formulierhuls
   ------------------------------------------------------------------------- */
.e21-form {
	display: block;
}

/* -------------------------------------------------------------------------
   25. Aanbiedingsknop — opmaak en lopende animatie uit scripts/cta-style
   Kleur staat los van het palet: de knop moet opvallen.
   ------------------------------------------------------------------------- */
.viliti-lead {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--vlq-snug) var(--vlq-wide);
	border-radius: 4px;
	font-size: var(--vlq-h5);
	font-weight: var(--vlq-half);
}

.viliti-lead {
	position: relative;
	background: #16A34A;
	color: #0C0D10;
	text-decoration: none;
	transition: background var(--vlq-snap) var(--vlq-smooth), box-shadow var(--vlq-snap) var(--vlq-smooth);
}

.viliti-lead.viliti-lead {
	color: #0C0D10;
	text-decoration: none;
}

.viliti-lead:hover {
	background: #15803D;
	color: #FFFFFF;
	animation: none;
}

.viliti-lead.viliti-lead:hover {
	color: #FFFFFF;
	text-decoration: none;
}

.viliti-lead:hover::after {
	animation: none;
}

.viliti-lead:active {
	background: #166534;
	color: #FFFFFF;
}

.viliti-lead:focus-visible {
	outline: 3px solid #FFFFFF;
	outline-offset: 3px;
}

@keyframes viliti-beat {
	0%, 100% { transform: scaleX(0) }
	40%, 60% { transform: scaleX(1) }
}

.viliti-lead::after {
	content: "";
	position: absolute;
	left: 12%;
	right: 12%;
	bottom: 6px;
	height: 3px;
	background: currentColor;
	opacity: 0.5;
	transform-origin: left;
	animation: viliti-beat 1.6s cubic-bezier(0.55, 0.95, 0.30, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
	.viliti-lead,
	.viliti-lead::after {
		animation: none !important;
		transition: none !important;
	}
}

/* Knop in de koptekst: contourring uit de ручка buttons=one-outline. */
.p14-actions .p14-key {
	border: var(--vlq-even) solid var(--vlq-gradient-light);
	border-radius: var(--r-tiny);
}

/* -------------------------------------------------------------------------
   26. Merklokup — teken plus woordmerk, zodat de naam leesbaar blijft
   ------------------------------------------------------------------------- */
.p14-emblem {
	gap: var(--vlq-tiny);
}

.p14-word {
	background: var(--vlq-ground);
	color: var(--vlq-script);
	font-family: var(--vlq-banner);
	font-size: var(--vlq-display-4);
	font-weight: var(--vlq-black);
	letter-spacing: var(--e-snug);
	line-height: var(--vlq-close);
	white-space: nowrap;
}

.p19-emblem {
	gap: var(--vlq-tiny);
}

.p19-word {
	background: var(--vlq-ground);
	color: var(--vlq-script);
	font-family: var(--vlq-banner);
	font-size: var(--vlq-sub);
	font-weight: var(--vlq-black);
	letter-spacing: var(--e-snug);
	line-height: var(--vlq-close);
	white-space: nowrap;
}

@media (max-width: 620px) {
	.p14-word {
		font-size: var(--vlq-micro-head);
	}
}

@media (max-width: 360px) {
	.p14-word {
		display: none;
	}
}