/* ==========================================================================
   Nunito Sans, self-hosted.

   Previously loaded from fonts.googleapis.com, which sent every visitor's IP
   address to Google on every page view while the site told them "We volgen je
   niet." Serving the files from this origin removes that third-party transfer
   entirely. Variable font: one file covers weights 400-800.
   ========================================================================== */

/* latin-ext */
@font-face {
	font-family: 'Nunito Sans';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/nunito-sans-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}

/* latin */
@font-face {
	font-family: 'Nunito Sans';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('../fonts/nunito-sans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Nexaro One — warm consumer app surface
   Design system. Hand-authored, no build step. Loaded after the parent theme.

   The one rule that governs everything here: the action colour appears ONLY
   where something can actually be done. Not on headings, not on icons, not on
   amounts, not on decoration. If it is coloured, it is pressable.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */

:root {
	/* Warm tinted ground, white cards. Light is the daytime back-office scene. */
	--nx-ground:        #FFF4E6;
	--nx-ground-deep:   #FBEAD6;
	--nx-card:          #FFFFFF;
	--nx-surface:       #F7EBDD;
	--nx-border:        #E7DACB;
	--nx-border-strong: #D8C7B2;

	--nx-ink:           #2B241F;
	--nx-ink-2:         #6F625A;   /* 4.9:1 on --nx-ground */
	--nx-ink-3:         #8A7B70;   /* decorative only, never body text */

	/* The single action colour, carried from the brand mark. */
	--nx-action:        #7A2BE2;
	--nx-action-press:  #6420BC;
	--nx-action-ink:    #FFFFFF;
	--nx-action-wash:   #F3E9FE;

	/* Money is data, not an action: it never takes the action colour. */
	--nx-in:            #1F6B45;
	--nx-out:           #8C3A2E;

	--nx-radius-card:   20px;
	--nx-radius-inner:  14px;
	--nx-radius-btn:    12px;
	--nx-radius-dock:   26px;

	/* Shadows carry a real offset and a soft blur. */
	--nx-shadow-card:  0 1px 2px rgba(43,36,31,.04), 0 10px 28px -14px rgba(43,36,31,.16);
	--nx-shadow-lift:  0 2px 4px rgba(43,36,31,.05), 0 18px 40px -18px rgba(43,36,31,.22);
	--nx-shadow-dock:  0 2px 6px rgba(43,36,31,.06), 0 20px 48px -20px rgba(43,36,31,.30);

	/* Entry is exponential ease-out from an already-visible default.
	   Press is a soft spring, no bounce on entry. */
	--nx-ease-out:      cubic-bezier(.16, 1, .3, 1);
	--nx-spring:        cubic-bezier(.34, 1.06, .64, 1);

	--nx-shell:         1240px;
	--nx-gap:           clamp(14px, 1.2vw, 20px);
}

[data-theme="dark"] .nx-btn-primary {
	box-shadow: 0 1px 2px rgba(0,0,0,.34), 0 10px 22px -14px rgba(0,0,0,.7);
}

[data-theme="dark"] {
	/* Warm dark, never neutral black — the ground keeps its warmth at night. */
	--nx-ground:        #17120E;
	--nx-ground-deep:   #100C09;
	--nx-card:          #221A15;
	--nx-surface:       #2C221B;
	--nx-border:        #3A2D24;
	--nx-border-strong: #4A3A2E;

	--nx-ink:           #F7EFE6;
	--nx-ink-2:         #B5A597;
	--nx-ink-3:         #8C7D70;

	--nx-action:        #A970FF;   /* 5.6:1 on --nx-ground */
	--nx-action-press:  #8E52F0;
	--nx-action-ink:    #17120E;
	--nx-action-wash:   #2A1E3D;

	--nx-in:            #6FD3A0;
	--nx-out:           #F0937F;

	--nx-shadow-card:  0 1px 2px rgba(0,0,0,.30), 0 10px 28px -14px rgba(0,0,0,.60);
	--nx-shadow-lift:  0 2px 4px rgba(0,0,0,.34), 0 18px 40px -18px rgba(0,0,0,.68);
	--nx-shadow-dock:  0 2px 6px rgba(0,0,0,.40), 0 20px 48px -20px rgba(0,0,0,.76);
}

/* ---------------------------------------- 1b. WordPress preset bridge */

/*
 * WordPress emits global styles that reference its own preset variables, and
 * those presets are STATIC hex values from theme.json — they do not flip with
 * data-theme. Three of those rules broke dark mode outright:
 *
 *   h1,h2,h3,h4,h5,h6 { color: var(--wp--preset--color--contrast) }
 *   a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--accent) }
 *   .has-contrast-2-color { color: var(--wp--preset--color--contrast-2) !important }
 *
 * An element selector beats inherited colour however low its specificity, so
 * every heading rendered light-theme ink on the dark ground: 1.22:1, invisible.
 * Rather than out-specify each rule (and every future one), re-point the presets
 * themselves. `html[data-theme]` is (0,1,1) and so wins over `:root` (0,1,0)
 * regardless of source order — and because the WordPress rules read the
 * variable, even their !important declarations pick up the new value.
 */
html[data-theme="dark"] {
	--wp--preset--color--base:       #17120E;
	--wp--preset--color--base-2:     #100C09;
	--wp--preset--color--card:       #221A15;
	--wp--preset--color--surface:    #2C221B;
	--wp--preset--color--border:     #3A2D24;
	--wp--preset--color--contrast:   #F7EFE6;
	--wp--preset--color--contrast-2: #B5A597;
	--wp--preset--color--contrast-3: #B5A597;
	--wp--preset--color--accent:     #A970FF;
	--wp--preset--color--accent-2:   #8E52F0;
}

/* Headings additionally carry the token directly, so the site does not depend
   on a WordPress-generated rule existing at all. */
.nx h1, .nx h2, .nx h3, .nx h4, .nx h5, .nx h6 { color: var(--nx-ink); }

/* ----------------------------------------------------------- 2. Foundation */

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

body.nx {
	margin: 0;
	background: var(--nx-ground);
	color: var(--nx-ink);
	font-family: 'Nunito Sans', ui-rounded, 'Segoe UI', system-ui, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.6;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	/* Room for the persistent dock. */
	padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px));
	transition: background-color .3s var(--nx-ease-out), color .3s var(--nx-ease-out);
}

.nx-shell {
	width: min(100% - 2.5rem, var(--nx-shell));
	margin-inline: auto;
}
@media (max-width: 560px) { .nx-shell { width: min(100% - 1.75rem, var(--nx-shell)); } }

/* :where() keeps these at zero specificity so single-class margin rules
   (.nx-hero-sub, .nx-b-body, …) are not silently overridden by the reset. */
:where(.nx h1, .nx h2, .nx h3, .nx h4) {
	margin: 0;
	line-height: 1.08;
	letter-spacing: -0.022em;
	font-weight: 800;
	text-wrap: balance;
}
:where(.nx p) { margin: 0; }

.nx-display  { font-size: clamp(2.45rem, 1.5rem + 3.6vw, 4.15rem); }
.nx-h2       { font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.6rem); }
.nx-h3       { font-size: 1.375rem; letter-spacing: -0.015em; }
.nx-subhead  { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
.nx-body     { font-size: 1.0625rem; color: var(--nx-ink-2); max-width: 62ch; }
.nx-body-lg  { font-size: 1.1875rem; color: var(--nx-ink-2); max-width: 46ch; line-height: 1.55; }
.nx-label    { font-size: .875rem; font-weight: 600; color: var(--nx-ink-2); }
.nx-caption  { font-size: .8125rem; color: var(--nx-ink-2); }
.nx-overline {
	font-size: .6875rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: .1em; color: var(--nx-ink-2);
}

/* Money is measurement: tabular figures, never the action colour. */
.nx-num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.nx-in  { color: var(--nx-in); }
.nx-out { color: var(--nx-out); }

.nx-sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:where(.nx a, .nx button, .nx input, .nx summary):focus-visible {
	outline: 2.5px solid var(--nx-action);
	outline-offset: 3px;
	border-radius: 6px;
}

/* --------------------------------------------------------------- 3. Cards */

.nx-card {
	background: var(--nx-card);
	border: 1px solid var(--nx-border);
	border-radius: var(--nx-radius-card);
	box-shadow: var(--nx-shadow-card);
	padding: clamp(18px, 1.6vw, 26px);
}
/* Nested cards are always wrong: an inner region is a surface, not a card. */
.nx-well {
	background: var(--nx-surface);
	border-radius: var(--nx-radius-inner);
	padding: 14px 16px;
}

/* ------------------------------------------------------------- 4. Controls */

.nx-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .55em;
	font: inherit; font-weight: 700; letter-spacing: -0.01em;
	padding: .82em 1.35em;
	border-radius: var(--nx-radius-btn);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform .18s var(--nx-spring), background-color .18s var(--nx-ease-out),
	            border-color .18s var(--nx-ease-out), box-shadow .18s var(--nx-ease-out);
}
.nx-btn-primary {
	background: var(--nx-action);
	color: var(--nx-action-ink);
	box-shadow: 0 1px 2px rgba(43,36,31,.10), 0 10px 22px -12px var(--nx-action);
}
.nx-btn-primary:hover { background: var(--nx-action-press); }
.nx-btn-primary:active { transform: scale(.972); }

.nx-btn-secondary {
	background: var(--nx-card);
	color: var(--nx-ink);
	border-color: var(--nx-border-strong);
}
.nx-btn-secondary:hover { background: var(--nx-surface); }
.nx-btn-secondary:active { transform: scale(.972); }

/* Disabled loses the colour entirely — the world's own rule. */
.nx-btn:disabled, .nx-btn[aria-disabled="true"] {
	background: var(--nx-surface);
	color: var(--nx-ink-3);
	border-color: var(--nx-border);
	box-shadow: none;
	cursor: not-allowed;
	transform: none;
}

.nx-input {
	/* The parent theme's reset gives buttons border-box but not inputs, so a
	   content-box input at width:100% renders its padding and borders ON TOP of
	   100% — 36px wider than the button beside it. */
	box-sizing: border-box;
	width: 100%;
	font: inherit;
	color: var(--nx-ink);
	background: var(--nx-card);
	border: 1px solid var(--nx-border-strong);
	border-radius: var(--nx-radius-btn);
	padding: .82em 1em;
	transition: border-color .18s var(--nx-ease-out), box-shadow .18s var(--nx-ease-out);
}
.nx-input::placeholder { color: var(--nx-ink-2); }
/* Do NOT reintroduce `outline: none` here. At (0,2,0) it beats the site-wide
   :where(...):focus-visible ring at (0,1,0), which left inputs with a 1px
   border change as their only keyboard focus indicator. */
.nx-input:focus {
	border-color: var(--nx-action);
	box-shadow: 0 0 0 3px var(--nx-action-wash);
}
.nx-input:focus:not(:focus-visible) { outline: none; }

/* Icon wells are surface-tinted, never accent — colour stays reserved. */
.nx-ico {
	display: grid; place-items: center;
	width: 42px; height: 42px;
	border-radius: 13px;
	background: var(--nx-surface);
	color: var(--nx-ink);
	flex: none;
}
.nx-ico svg { width: 21px; height: 21px; }

/* ------------------------------------------------------- 5. Persistent dock */

.nx-dock {
	position: fixed;
	left: 50%;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	transform: translateX(-50%);
	z-index: 60;
	display: flex;
	align-items: stretch;
	gap: 2px;
	padding: 7px;
	background: color-mix(in srgb, var(--nx-card) 88%, transparent);
	-webkit-backdrop-filter: blur(18px) saturate(1.5);
	backdrop-filter: blur(18px) saturate(1.5);
	border: 1px solid var(--nx-border);
	border-radius: var(--nx-radius-dock);
	box-shadow: var(--nx-shadow-dock);
	max-width: calc(100vw - 24px);
}
.nx-dock a {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 3px;
	min-width: 76px;
	padding: 7px 10px;
	border-radius: 19px;
	text-decoration: none;
	color: var(--nx-ink-2);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .005em;
	transition: color .18s var(--nx-ease-out), background-color .18s var(--nx-ease-out),
	            transform .18s var(--nx-spring);
}
.nx-dock a svg { width: 21px; height: 21px; }
.nx-dock a:hover { background: var(--nx-surface); color: var(--nx-ink); }
.nx-dock a:active { transform: scale(.94); }
/* The active tab takes the action colour — the dock's one coloured element. */
.nx-dock a[aria-current="page"] { color: var(--nx-action); }

@media (max-width: 620px) {
	.nx-dock { left: 12px; right: 12px; transform: none; max-width: none; }
	.nx-dock a { min-width: 0; flex: 1; }
	.nx-dock a span { font-size: .625rem; }
}

/* ------------------------------------------------------------- 6. Topbar */

.nx-topbar {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 18px 0 6px;
}
.nx-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--nx-ink); }
.nx-brand-mark { width: 38px; height: 38px; border-radius: 11px; flex: none; display: block; }
.nx-brand-name { font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.02em; }
.nx-topbar-actions { display: flex; align-items: center; gap: 10px; }

.nx-toggle {
	display: grid; place-items: center;
	width: 44px; height: 44px;
	border-radius: 12px;
	background: var(--nx-card);
	border: 1px solid var(--nx-border);
	color: var(--nx-ink);
	cursor: pointer;
	transition: background-color .18s var(--nx-ease-out), transform .18s var(--nx-spring);
}
.nx-toggle:hover { background: var(--nx-surface); }
.nx-toggle:active { transform: scale(.93); }
.nx-toggle svg { width: 18px; height: 18px; }
[data-theme="dark"] .nx-icon-sun,  .nx-icon-moon { display: none; }
[data-theme="dark"] .nx-icon-moon { display: block; }
.nx-icon-sun { display: block; }

/* --------------------------------------------------------------- 7. Motion */

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

/* ==========================================================================
   Nexaro One — homepage composition.
   Layout only; every colour, radius and easing comes from nexaro.css tokens.
   ========================================================================== */

:root { --nx-mark: #7A2BE2; --nx-mark-tile: #F3E9FE; }
[data-theme="dark"] { --nx-mark: #C9A5FF; --nx-mark-tile: #2A1E3D; }

.nx-btn-lg { padding: .95em 1.6em; font-size: 1.0625rem; }

.nx-sec { padding-block: clamp(46px, 5.4vw, 82px); }
.nx-sec-head { max-width: 60ch; margin-bottom: clamp(26px, 3vw, 40px); }
.nx-sec-head .nx-body { margin-top: 14px; }

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

.nx-hero {
	display: grid;
	grid-template-columns: 1.02fr .98fr;
	gap: clamp(28px, 4vw, 68px);
	align-items: center;
	padding-block: clamp(38px, 5.5vw, 82px) clamp(24px, 3vw, 44px);
}
.nx-hero-sub { margin-top: clamp(26px, 2.2vw, 32px); }
.nx-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.nx-hero-note { margin-top: 26px; }

/* profile tabs — the mechanism as a working control */
.nx-profiles {
	display: flex; gap: 6px; padding: 6px;
	background: var(--nx-ground-deep);
	border: 1px solid var(--nx-border);
	border-radius: 16px;
	margin-bottom: var(--nx-gap);
	overflow-x: auto;
	scrollbar-width: none;
}
.nx-profiles::-webkit-scrollbar { display: none; }
.nx-profile {
	flex: 1; min-width: max-content; min-height: 44px;
	font: inherit; font-size: .875rem; font-weight: 700;
	padding: .62em 1em;
	border-radius: 11px;
	border: 1px solid transparent;
	background: transparent;
	color: var(--nx-ink-2);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .22s var(--nx-ease-out), color .22s var(--nx-ease-out),
	            box-shadow .22s var(--nx-ease-out), transform .18s var(--nx-spring);
}
.nx-profile:hover { color: var(--nx-ink); }
.nx-profile:active { transform: scale(.96); }
.nx-profile.is-on {
	background: var(--nx-card);
	color: var(--nx-ink);
	border-color: var(--nx-border);
	box-shadow: 0 1px 2px rgba(43,36,31,.05), 0 6px 14px -10px rgba(43,36,31,.30);
}

.nx-balance { margin-bottom: var(--nx-gap); }
.nx-balance-num {
	font-size: clamp(2.1rem, 1.3rem + 2.5vw, 2.9rem);
	font-weight: 800; letter-spacing: -0.03em; line-height: 1.05;
	margin-top: 8px;
}
.nx-balance-delta { margin-top: 6px; }

.nx-quick {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
	margin-top: 20px; padding-top: 18px;
	border-top: 1px solid var(--nx-border);
}
.nx-quick-item {
	display: flex; flex-direction: column; align-items: center; gap: 7px;
	background: none; border: 0; padding: 6px 2px;
	font: inherit; font-size: .6875rem; font-weight: 600; color: var(--nx-ink-2);
	border-radius: 12px; text-align: center;
}
/* not interactive — no pointer cursor, no press state */

.nx-open-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nx-chip {
	font-size: .6875rem; font-weight: 700; letter-spacing: .02em;
	padding: .34em .7em; border-radius: 999px;
	background: var(--nx-surface); color: var(--nx-ink-2);
}
.nx-open-list { list-style: none; margin: 16px 0 0; padding: 0; }
.nx-open-list li {
	display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
	padding: 11px 0;
	border-top: 1px solid var(--nx-border);
}
.nx-open-list li:first-child { border-top: 0; padding-top: 2px; }
.nx-arrow { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--nx-surface); flex: none; }
.nx-arrow svg { width: 15px; height: 15px; }
.nx-open-name { font-weight: 700; font-size: .9375rem; line-height: 1.3; }
.nx-open-when { display: block; font-weight: 500; font-size: .75rem; color: var(--nx-ink-2); }
.nx-open-amt { font-weight: 800; font-size: .9375rem; }

.nx-demo-note { margin-top: 14px; text-align: right; color: var(--nx-ink-2); }

/* ----------------------------------------------------------------- bento */

.nx-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--nx-gap); }
.nx-bento .nx-card { display: flex; flex-direction: column; }
.nx-b-body { margin-top: 10px; font-size: 1rem; }
.nx-bento .nx-ico { margin-bottom: 16px; }
.nx-b-wide { grid-column: span 2; }
.nx-b-tall { grid-row: span 2; }
.nx-b-priv { grid-column: span 2; }
.nx-b-sm  { }

.nx-contacts { list-style: none; margin: 20px 0 0; padding: 0; }
.nx-contacts li {
	display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px;
	padding: 12px 0; border-top: 1px solid var(--nx-border);
}
.nx-ava {
	display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
	background: var(--nx-surface); font-size: .6875rem; font-weight: 800; letter-spacing: .03em;
	color: var(--nx-ink-2);
}
.nx-c-name { font-weight: 700; font-size: .9375rem; line-height: 1.25; }
.nx-c-name em { display: block; font-style: normal; font-weight: 500; font-size: .75rem; color: var(--nx-ink-2); }
.nx-contacts .nx-num { font-weight: 800; font-size: .9375rem; }

/* receipt scan */
.nx-scan { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.nx-scan-paper {
	flex: 1;
	justify-content: center;
	position: relative; overflow: hidden;
	background: var(--nx-surface);
	border-radius: var(--nx-radius-inner);
	padding: 18px 16px;
	display: flex; flex-direction: column; gap: 9px;
	min-height: 104px;
}
.nx-scan-line { display: block; height: 7px; border-radius: 4px; background: var(--nx-border-strong); opacity: .7; }
.nx-scan-line.is-total { height: 11px; opacity: 1; }
.nx-scan-rule { display: block; height: 1px; background: var(--nx-border-strong); opacity: .55; margin-block: 3px; }
.nx-scan-beam {
	position: absolute; left: 0; right: 0; top: 0; height: 34%;
	background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--nx-action) 26%, transparent), transparent);
	animation: nx-scan 3.4s var(--nx-ease-out) infinite;
	will-change: transform;
}
/* transform, not `top`: animating `top` relayouts every frame, forever. */
@keyframes nx-scan { 0%,100% { transform: translateY(-100%); } 55%, 70% { transform: translateY(294%); } }
/* Nothing animates while it is off screen. */
.nx-scan-paper.is-paused .nx-scan-beam { animation-play-state: paused; }
.nx-scan-out { margin: 0; display: flex; flex-direction: column; gap: 9px; }
.nx-scan-out > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.nx-scan-out dt { font-size: .75rem; font-weight: 600; color: var(--nx-ink-2); }
.nx-scan-out dd { margin: 0; font-size: .875rem; font-weight: 700; }

.nx-priv-fact { margin-top: 20px; font-size: clamp(1.5rem, 1rem + 1.4vw, 2rem); font-weight: 800; letter-spacing: -0.025em; }
.nx-priv-sub { margin-top: 8px; max-width: 46ch; }
.nx-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.nx-tag {
	font-size: .75rem; font-weight: 700; padding: .4em .8em; border-radius: 999px;
	background: var(--nx-surface); color: var(--nx-ink-2);
}

/* ----------------------------------------------------------------- steps */

.nx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--nx-gap); }
.nx-step-n {
	display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
	background: var(--nx-surface); font-weight: 800; font-size: 1rem; margin-bottom: 16px;
}

/* ---------------------------------------------------------------- prijzen */

.nx-price { padding: clamp(20px, 2.2vw, 32px); }
.nx-seg {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px;
	padding: 5px; background: var(--nx-ground-deep);
	border: 1px solid var(--nx-border); border-radius: 15px;
}
.nx-seg button {
	min-height: 44px;
	font: inherit; font-size: .875rem; font-weight: 700;
	padding: .68em .5em; border-radius: 11px; border: 1px solid transparent;
	background: transparent; color: var(--nx-ink-2); cursor: pointer; white-space: nowrap;
	transition: background-color .22s var(--nx-ease-out), color .22s var(--nx-ease-out),
	            box-shadow .22s var(--nx-ease-out), transform .18s var(--nx-spring);
}
.nx-seg button:hover { color: var(--nx-ink); }
.nx-seg button:active { transform: scale(.96); }
.nx-seg button.is-on {
	background: var(--nx-card); color: var(--nx-ink); border-color: var(--nx-border);
	box-shadow: 0 1px 2px rgba(43,36,31,.05), 0 6px 14px -10px rgba(43,36,31,.30);
}

.nx-price-body {
	display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(20px, 3vw, 44px); align-items: center;
	padding: clamp(24px, 3vw, 36px) 0;
}
.nx-price-num { font-size: clamp(2.6rem, 1.6rem + 3vw, 3.9rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; margin-top: 10px; }
.nx-price-num em { font-style: normal; font-size: 1rem; font-weight: 600; color: var(--nx-ink-2); letter-spacing: 0; margin-left: 8px; }
.nx-price-amount .nx-caption { margin-top: 10px; }
.nx-price-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.nx-price-list li { position: relative; padding-left: 28px; font-size: 1rem; }
.nx-price-list li::before {
	content: ""; position: absolute; left: 0; top: .46em;
	width: 15px; height: 8px; border-left: 2.2px solid var(--nx-ink); border-bottom: 2.2px solid var(--nx-ink);
	transform: rotate(-45deg); border-radius: 1px;
}
.nx-price-foot {
	display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
	padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid var(--nx-border);
}
.nx-price-foot .nx-caption { flex: 1; min-width: 260px; max-width: 62ch; }

/* -------------------------------------------------------------------- faq */

.nx-faq { display: grid; gap: 10px; }
.nx-faq details { padding: 0; }
.nx-faq summary {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: clamp(16px, 1.5vw, 22px) clamp(18px, 1.6vw, 26px);
	font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.012em;
	cursor: pointer; list-style: none;
}
.nx-faq summary::-webkit-details-marker { display: none; }
.nx-faq-mark { position: relative; width: 15px; height: 15px; flex: none; }
.nx-faq-mark::before, .nx-faq-mark::after {
	content: ""; position: absolute; left: 0; top: 6.5px; width: 15px; height: 2.2px;
	background: var(--nx-ink-2); border-radius: 2px;
	transition: transform .28s var(--nx-ease-out);
}
.nx-faq-mark::after { transform: rotate(90deg); }
.nx-faq details[open] .nx-faq-mark::after { transform: rotate(0deg); }
.nx-faq details > .nx-body { padding: 0 clamp(18px, 1.6vw, 26px) clamp(18px, 1.6vw, 24px); max-width: 68ch; }

/* ------------------------------------------------------------------ close */

.nx-close { text-align: center; padding: clamp(34px, 4.5vw, 62px) clamp(22px, 3vw, 44px); }
.nx-close .nx-body { margin: 16px auto 0; }
.nx-close .nx-btn-lg { margin-top: 28px; }

.nx-notify { margin: 32px auto 0; max-width: 520px; }
.nx-notify-row { display: flex; gap: 10px; }
.nx-notify-row .nx-input { flex: 1; }
.nx-notify-row .nx-btn { white-space: nowrap; }
.nx-notify-note { margin-top: 12px; }
.nx-notify-msg { margin-top: 12px; font-size: .875rem; font-weight: 600; min-height: 1.2em; }
.nx-notify-msg.is-ok  { color: var(--nx-in); }
.nx-notify-msg.is-err { color: var(--nx-out); }
.nx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ----------------------------------------------------------------- footer */

.nx-foot { padding-block: clamp(34px, 4vw, 56px) 20px; border-top: 1px solid var(--nx-border); }
.nx-foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.nx-foot-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.nx-foot-nav a { color: var(--nx-ink-2); text-decoration: none; font-size: .9375rem; font-weight: 600; }
.nx-foot-nav a:hover { color: var(--nx-ink); text-decoration: underline; text-underline-offset: 3px; }
.nx-foot-legal { margin-top: 22px; color: var(--nx-ink-2); }
.nx-foot-legal a { color: inherit; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1080px) {
	.nx-hero { grid-template-columns: 1fr; gap: 34px; }
	.nx-hero-sub { max-width: 60ch; }

	/* The hard break is composed for the two-column hero. Once the heading
	   runs full width it strands "beeld." on a line of its own, so it is
	   dropped and text-wrap:balance takes over. */
	.nx-display br { display: none; }

	/* Two columns: every span-2 card would leave the cell beside a single
	   card empty, so only the first stays wide and the last card closes the
	   final row. No holes at any width in this range. */
	.nx-bento { grid-template-columns: repeat(2, 1fr); }
	.nx-b-wide { grid-column: span 2; }
	.nx-b-priv { grid-column: auto; }
	.nx-b-tall { grid-row: auto; }
	.nx-bento > article:last-child { grid-column: span 2; }

	/* One column, but the cards do not sprawl: a full-shell card holding a
	   62ch paragraph is two-thirds empty. Capped, the three steps read as
	   the vertical sequence they are. */
	.nx-steps { grid-template-columns: 1fr; }
	.nx-steps > li { max-width: 720px; }
}

@media (max-width: 720px) {
	.nx-price-body { grid-template-columns: 1fr; }
	.nx-seg { grid-template-columns: repeat(2, 1fr); }
	.nx-topbar-cta { padding: .72em 1.05em; font-size: .9375rem; }
}

@media (max-width: 620px) {
	.nx-bento { grid-template-columns: 1fr; }
	/* Every span from the two-column block must be undone here. A leftover
	   `span 2` forces the browser to create an implicit second track, so the
	   grid silently becomes two auto-sized columns despite `1fr` above. */
	.nx-b-wide, .nx-b-priv, .nx-bento > article:last-child { grid-column: auto; }
	.nx-hero-actions .nx-btn { width: 100%; }
	.nx-notify-row { flex-direction: column; }
	.nx-notify-row .nx-btn { width: 100%; }
	.nx-demo-note { text-align: left; }
	.nx-foot-row { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Inner pages.

   Over Ons, Contact, Support and the legal pages keep their existing block
   markup; these rules give that content the new world without rewriting it.
   Only the homepage and the changelog carry bespoke composition.
   ========================================================================== */

.nx-main { display: block; }

/* ------------------------------------------------------------- page head */

.nx-page-head {
	padding-block: clamp(34px, 4.6vw, 72px) clamp(18px, 2vw, 28px);
}
.nx-page-head .nx-display-sm,
.nx-page-head h1 {
	font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.08;
	text-wrap: balance;
	margin: 0;
}
.nx-page-head .nx-caption { margin-top: 12px; color: var(--nx-ink-2); }

/* ---------------------------------------------------------------- prose */

.nx-prose {
	padding-bottom: clamp(46px, 5.4vw, 82px);
	max-width: none;
}
.nx-prose > * { max-width: 72ch; }

.nx-prose p,
.nx-prose ul,
.nx-prose ol {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--nx-ink-2);
	margin-block: 0 1.05em;
}
.nx-prose p:last-child { margin-bottom: 0; }

.nx-prose h2 {
	font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--nx-ink);
	/* More space above a heading than below it. */
	margin-block: 2.1em .5em;
	text-wrap: balance;
}
.nx-prose h3 {
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.012em;
	color: var(--nx-ink);
	margin-block: 1.8em .45em;
}
.nx-prose h4 {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--nx-ink);
	margin-block: 1.5em .35em;
}
.nx-prose > :first-child { margin-top: 0; }

.nx-prose strong { color: var(--nx-ink); font-weight: 700; }

.nx-prose a {
	color: var(--nx-action);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
	font-weight: 600;
}
.nx-prose a:hover { color: var(--nx-action-press); }

.nx-prose ul, .nx-prose ol { padding-left: 1.35em; }
.nx-prose li { margin-bottom: .5em; }
.nx-prose li::marker { color: var(--nx-ink-3); }

.nx-prose hr {
	border: 0;
	height: 1px;
	background: var(--nx-border);
	margin-block: 2.4em;
}

.nx-prose blockquote {
	margin: 1.6em 0;
	padding: clamp(16px, 1.6vw, 22px) clamp(18px, 1.8vw, 26px);
	background: var(--nx-surface);
	border-radius: var(--nx-radius-inner);
	/* No coloured border-left: the surface change carries the shift. */
	border: 0;
}
.nx-prose blockquote p:last-child { margin-bottom: 0; }

.nx-prose code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .9em;
	background: var(--nx-surface);
	border-radius: 6px;
	padding: .16em .42em;
}

.nx-prose table {
	width: 100%;
	border-collapse: collapse;
	margin-block: 1.4em;
	font-size: 1rem;
}
.nx-prose th, .nx-prose td {
	text-align: left;
	padding: .7em .8em;
	border-bottom: 1px solid var(--nx-border);
}
.nx-prose th { font-weight: 700; color: var(--nx-ink); }
.nx-prose td { color: var(--nx-ink-2); }

/* Wide content scrolls inside its own container; the page never does. */
.nx-prose .wp-block-table { overflow-x: auto; }

.nx-prose img,
.nx-prose .wp-block-image img { max-width: 100%; height: auto; border-radius: var(--nx-radius-inner); }

/* WordPress block-editor groups inside prose become surfaces, not cards,
   so nothing nests a card inside a card. */
.nx-prose .wp-block-group:not(.nx-shell) {
	background: transparent;
}

/* ------------------------------------------------------- inline nav (legacy) */

.nx-inline-nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.nx-inline-nav .nx-nav-link {
	color: var(--nx-ink-2); text-decoration: none; font-weight: 700; font-size: .9375rem;
}
.nx-inline-nav .nx-nav-link:hover { color: var(--nx-ink); }
.nx-inline-nav .current-menu-item { color: var(--nx-action); }

/* ------------------------------------------------------------- changelog */

.nx-log { display: grid; gap: var(--nx-gap); }
.nx-log-release { padding: clamp(20px, 2vw, 30px); }
.nx-log-head {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px;
	padding-bottom: 16px; margin-bottom: 18px;
	border-bottom: 1px solid var(--nx-border);
}
.nx-log-v { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; }
.nx-log-build, .nx-log-date { font-size: .8125rem; font-weight: 600; color: var(--nx-ink-2); }
.nx-log-date { margin-left: auto; }

.nx-log-group { margin-top: 22px; }
.nx-log-group:first-of-type { margin-top: 0; }
.nx-log-group h3 {
	font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
	color: var(--nx-ink-2); margin: 0 0 12px;
}
.nx-log-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.nx-log-list li {
	display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
	font-size: 1rem; line-height: 1.55; color: var(--nx-ink-2);
}
.nx-log-list li b { color: var(--nx-ink); font-weight: 700; }
.nx-kind {
	font-size: .625rem; font-weight: 800; letter-spacing: .06em;
	padding: .34em .6em; border-radius: 7px; white-space: nowrap;
	background: var(--nx-surface); color: var(--nx-ink-2);
	margin-top: .15em;
}

@media (max-width: 560px) {
	.nx-log-date { margin-left: 0; width: 100%; }
	.nx-log-list li { grid-template-columns: 1fr; gap: 5px; }
	.nx-kind { justify-self: start; }
}


/* ==========================================================================
   Legacy-markup compatibility.
   Over Ons, Contact, Support and the legal pages keep their original block
   markup so no legal wording is touched by a redesign. These rules adopt that
   markup into the new world.
   ========================================================================== */

.nx-prose .wp-block-group.contact-card,
.nx-prose .wp-block-group.has-base-2-background-color {
	background: var(--nx-card) !important;
	border: 1px solid var(--nx-border);
	border-radius: var(--nx-radius-card);
	box-shadow: var(--nx-shadow-card);
}

/* Old full-bleed section wrappers: the page ground already provides this. */
.nx-prose .wp-block-group.alignfull.has-base-background-color {
	background: transparent !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Old inline paddings ran to 80px top and bottom on every section; the page
   rhythm now comes from .nx-prose, so cap the worst of it. */
.nx-prose .wp-block-group.alignfull[style*="padding-top"] {
	padding-top: clamp(8px, 1.4vw, 20px) !important;
	padding-bottom: clamp(8px, 1.4vw, 20px) !important;
}
.nx-prose .wp-block-spacer { height: clamp(10px, 1.6vw, 22px) !important; }

.nx-contact-form { display: grid; gap: 12px; max-width: 520px; }
.nx-contact-form input, .nx-contact-form textarea, .nx-contact-form select {
	box-sizing: border-box;
	width: 100%; font: inherit; color: var(--nx-ink);
	background: var(--nx-card);
	border: 1px solid var(--nx-border-strong);
	border-radius: var(--nx-radius-btn);
	padding: .82em 1em;
}
.nx-contact-form textarea { min-height: 140px; resize: vertical; }
.nx-contact-form button, .nx-contact-form input[type="submit"] {
	justify-self: start;
	background: var(--nx-action); color: var(--nx-action-ink);
	font-weight: 700; border: 0; border-radius: var(--nx-radius-btn);
	padding: .82em 1.35em; cursor: pointer;
}
.nx-notify-success { color: var(--nx-in); font-weight: 700; }

/* Headings on inner pages sometimes carry a hardcoded font-size; let the
   scale win so the site keeps one type system. */
.nx-prose h2[style*="font-size"], .nx-prose h3[style*="font-size"] { font-size: unset !important; }
.nx-prose h2[style*="font-size"] { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2rem) !important; }
.nx-prose h3[style*="font-size"] { font-size: 1.25rem !important; }

/* Changelog comparison tables scroll inside their own container. */
.nx-log-table { overflow-x: auto; margin-top: 14px; }
.nx-log-table table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 420px; }
.nx-log-table th, .nx-log-table td { text-align: left; padding: .6em .7em; border-bottom: 1px solid var(--nx-border); }
.nx-log-table th { font-weight: 700; color: var(--nx-ink); }
.nx-log-table td { color: var(--nx-ink-2); }

/* Inner pages centred their headings in the old world. One reading alignment
   across the site; wording is untouched. */
.nx-prose .has-text-align-center { text-align: left; }
.nx-prose-top { padding-top: clamp(30px, 4vw, 62px); }
.nx-prose-top > :first-child h1,
.nx-prose-top h1 {
	font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem) !important;
	font-weight: 800; letter-spacing: -0.025em; line-height: 1.08;
	color: var(--nx-ink); margin-block: 0 .5em; text-wrap: balance;
}

/* The changelog is a card-based document: give it a wider column than running
   prose so the release cards do not read as a narrow strip. */
.nx-prose > .nx-log { max-width: 880px; }

/* The contact page ships a pre-rendered success message that JS reveals.
   It must be hidden until an actual submission succeeds. */
.nx-notify-success { display: none; }
.nx-notify-success.is-visible { display: flex; align-items: center; gap: 8px; }

.nx-field { display: grid; gap: 6px; }
.nx-field label { font-size: .875rem; font-weight: 600; color: var(--nx-ink-2); }
.nx-contact-form .nx-notify-msg { margin-top: 2px; }

/* ==========================================================================
   Privacy mark and collection notices.

   The mark states verifiable facts only. It is deliberately NOT a "GDPR
   compliant" badge: no body certifies that, so such a badge would be a
   self-declared legal claim with nothing behind it. Every line below is
   checkable — by reading the page source, or the privacy policy.
   ========================================================================== */

.nx-privacy-mark {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: clamp(14px, 1.6vw, 22px);
	align-items: start;
	padding: clamp(18px, 1.8vw, 26px);
	background: var(--nx-card);
	border: 1px solid var(--nx-border);
	border-radius: var(--nx-radius-card);
	box-shadow: var(--nx-shadow-card);
	margin-bottom: clamp(26px, 3vw, 40px);
}
.nx-privacy-mark > .nx-ico { width: 46px; height: 46px; border-radius: 14px; }
.nx-privacy-mark > .nx-ico svg { width: 23px; height: 23px; }

.nx-privacy-title {
	font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.015em;
	color: var(--nx-ink); margin: 0 0 4px;
}
.nx-privacy-lede { font-size: .9375rem; color: var(--nx-ink-2); margin: 0 0 12px; max-width: 66ch; }

.nx-privacy-facts {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 7px 8px;
}
.nx-privacy-facts li {
	font-size: .75rem; font-weight: 700; letter-spacing: .005em;
	padding: .4em .75em; border-radius: 999px;
	background: var(--nx-surface); color: var(--nx-ink-2);
}
.nx-privacy-link { margin-top: 12px; font-size: .875rem; font-weight: 700; }
.nx-privacy-link a { color: var(--nx-action); text-decoration: underline; text-underline-offset: 3px; }
.nx-privacy-link a:hover { color: var(--nx-action-press); }

@media (max-width: 620px) {
	.nx-privacy-mark { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- collection notices */

/* Shown where personal data is actually typed in, not only in the policy. */
.nx-collect {
	margin-top: 12px;
	font-size: .8125rem;
	line-height: 1.55;
	color: var(--nx-ink-2);
	max-width: 62ch;
}
.nx-collect a { color: var(--nx-action); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.nx-collect a:hover { color: var(--nx-action-press); }
.nx-close .nx-collect { margin-inline: auto; }

/* ------------------------------------------------------ request form */

.nx-request { display: grid; gap: 14px; max-width: 560px; margin-top: 24px; }
.nx-request .nx-field { display: grid; gap: 6px; }
.nx-request label { font-size: .875rem; font-weight: 600; color: var(--nx-ink-2); }
.nx-request select.nx-input {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
	                  linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 40px;
}
.nx-request button { justify-self: start; }

/* WordPress's constrained-layout rules set `margin-left:auto;margin-right:auto
   !important` on group children, which centres any element narrower than the
   content column. Forms must stay on the reading margin like the text above
   them, so the auto margins are overridden rather than inherited. */
.nx-prose .nx-request,
.nx-prose .nx-contact-form,
.nx-prose .nx-collect {
	margin-left: 0 !important;
	margin-right: auto !important;
}