/* Studio Herc Boilerplate — design tokens + base styles.
   Bron-van-waarheid voor het gedeelde design-system tussen marketing-site
   en portal. Tokens zijn CSS custom properties, dus elke site/plugin die
   :root erven, krijgt automatisch dezelfde huisstijl.

   Geen Tailwind / geen utility-classes — semantische component-CSS.
   Dark mode komt later (alleen --sh-color-* tokens overschrijven). */


/* ============================================================
   Design tokens
   ============================================================ */

:root {
	/* Colors — Studio Herc palette */
	--sh-color-canvas:      #FFFFFF;
	--sh-color-surface:     #F5F5F5;
	--sh-color-surface-alt: #FAFAFA;
	--sh-color-border:      #E0E0E0;
	--sh-color-ink:         #353740;
	--sh-color-ink-soft:    #6B7280;
	--sh-color-ink-strong:  #000000;
	--sh-color-primary:      #625BC5;
	--sh-color-primary-soft: #353740;
	--sh-color-primary-ink:  #FFFFFF;
	--sh-color-primary-on-night: #8B7FE0; /* lichter paars voor accents op donkere bg */
	--sh-color-secondary:    #459FF5;     /* oude blauw blijft beschikbaar als secondary */
	--sh-color-warm:        #F75A39;
	--sh-color-alert:       #9B243E;

	/* Donkere hero-band — gedeeld met portal (#43) */
	--sh-color-night:       #0E1B3A;
	--sh-color-night-ink:   #F5F5F5;
	--sh-color-night-soft:  #A8B3CC;

	/* Typography — system fonts */
	--sh-font-display: Georgia, 'Times New Roman', Times, serif;
	--sh-font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
	--sh-font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

	/* Fluid type-scale */
	--sh-fs-xs:     clamp(0.75rem,  0.72rem + 0.15vw, 0.85rem);
	--sh-fs-sm:     clamp(0.85rem,  0.80rem + 0.20vw, 0.95rem);
	--sh-fs-md:     clamp(1.00rem,  0.95rem + 0.25vw, 1.10rem);
	--sh-fs-lg:     clamp(1.15rem,  1.00rem + 0.50vw, 1.30rem);
	--sh-fs-xl:     clamp(1.50rem,  1.20rem + 1.00vw, 2.00rem);
	--sh-fs-2xl:    clamp(2.00rem,  1.50rem + 2.00vw, 3.00rem);
	--sh-fs-hero:   clamp(2.50rem,  1.80rem + 3.50vw, 4.50rem);

	--sh-lh-tight:  1.15;
	--sh-lh-snug:   1.35;
	--sh-lh-body:   1.6;

	/* Spacing — modular 1.5x scale, base 0.66rem */
	--sh-space-1:   0.66rem;
	--sh-space-2:   0.99rem;
	--sh-space-3:   1.49rem;
	--sh-space-4:   2.23rem;
	--sh-space-5:   3.34rem;
	--sh-space-6:   5.01rem;
	--sh-space-7:   7.52rem;
	--sh-space-8:  11.28rem;

	/* Radii */
	--sh-radius-sm:  4px;
	--sh-radius-md:  8px;
	--sh-radius-lg:  16px;
	--sh-radius-pill: 9999px;

	/* Shadows */
	--sh-shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
	--sh-shadow-md: 0 4px 6px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.06);
	--sh-shadow-lg: 0 10px 20px rgba(0,0,0,0.06), 0 4px 8px rgba(0,0,0,0.04);

	/* Layout */
	--sh-width-prose:   720px;
	--sh-width-content: 1180px;

	/* Motion */
	--sh-ease:     cubic-bezier(.2, .8, .2, 1);
	--sh-duration: 180ms;
}


/* ============================================================
   Reset + base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 80px; /* compenseert voor sticky header bij anchor-jumps */
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	margin: 0;
	font-family: var(--sh-font-body);
	font-size: var(--sh-fs-md);
	line-height: var(--sh-lh-body);
	color: var(--sh-color-ink);
	background: var(--sh-color-canvas);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: var(--sh-color-primary);
	text-decoration: none;
	transition: color var(--sh-duration) var(--sh-ease);
}
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sh-font-display);
	color: var(--sh-color-ink-strong);
	line-height: var(--sh-lh-tight);
	margin: 0 0 var(--sh-space-2);
	letter-spacing: -0.01em;
	font-weight: 700;
}

h1 { font-size: var(--sh-fs-hero); letter-spacing: -0.02em; }
h2 { font-size: var(--sh-fs-2xl); }
h3 { font-size: var(--sh-fs-xl); }
h4 { font-size: var(--sh-fs-lg); }

p { margin: 0 0 var(--sh-space-2); }

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--sh-color-primary);
	outline-offset: 2px;
	border-radius: var(--sh-radius-sm);
}


/* ============================================================
   Container
   ============================================================ */

.sh-container {
	width: 100%;
	max-width: var(--sh-width-content);
	margin-inline: auto;
	padding-inline: var(--sh-space-3);
}

.sh-container--prose {
	max-width: var(--sh-width-prose);
}


/* ============================================================
   Buttons (pill-style, à la ACF reference)
   ============================================================ */

.sh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border-radius: var(--sh-radius-pill);
	border: 1px solid transparent;
	font: inherit;
	font-weight: 600;
	font-size: var(--sh-fs-md);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--sh-duration) var(--sh-ease),
				color var(--sh-duration) var(--sh-ease),
				border-color var(--sh-duration) var(--sh-ease),
				transform var(--sh-duration) var(--sh-ease);
}

.sh-btn:hover {
	transform: translateY(-1px);
	text-decoration: none;
}

.sh-btn:active {
	transform: translateY(0);
}

.sh-btn--primary {
	background: var(--sh-color-primary);
	color: var(--sh-color-primary-ink);
}
.sh-btn--primary:hover {
	background: color-mix(in oklab, var(--sh-color-primary) 85%, black);
	color: var(--sh-color-primary-ink);
}

.sh-btn--ghost {
	background: transparent;
	color: var(--sh-color-ink);
	border-color: var(--sh-color-border);
}
.sh-btn--ghost:hover {
	background: var(--sh-color-surface);
	color: var(--sh-color-ink-strong);
	border-color: var(--sh-color-ink);
}

.sh-btn--on-night {
	color: var(--sh-color-night-ink);
	border-color: rgba(255,255,255,0.25);
}
.sh-btn--on-night.sh-btn--ghost:hover {
	background: rgba(255,255,255,0.1);
	border-color: var(--sh-color-night-ink);
}


/* ============================================================
   Site header (gedeeld marketing + portal)
   ============================================================ */

.sh-site-header {
	background: var(--sh-color-night);
	color: var(--sh-color-night-ink);
	position: sticky;
	top: 0;
	z-index: 50;
	box-shadow: 0 1px 0 rgba(255,255,255,0.04);
}

.sh-site-header__inner {
	/* Belt-and-braces: ook al staat .sh-container al op het element, force
	   hier expliciet de max-width + centrering zodat brand-links en
	   CTAs-rechts uitlijnen met de container-edges (zelfde 1180px-block als
	   alle andere sections). */
	max-width: var(--sh-width-content);
	margin-inline: auto;
	padding-inline: var(--sh-space-3);

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sh-space-3);
	padding-block: var(--sh-space-2);
}

.sh-site-header__brand a {
	color: var(--sh-color-night-ink);
	font-weight: 700;
	font-size: var(--sh-fs-lg);
	text-decoration: none;
}

.sh-site-header nav ul {
	display: flex;
	gap: var(--sh-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.sh-site-header nav a {
	color: var(--sh-color-night-ink);
	font-size: var(--sh-fs-sm);
	font-weight: 500;
}
.sh-site-header nav a:hover {
	color: #FFFFFF;
	text-decoration: none;
}

.sh-site-header__actions {
	display: flex;
	gap: 0.75rem;
	align-items: center;
}

/* Taalswitcher (Polylang) — compact, naast de header-CTA's */
.sh-langswitcher {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.sh-langswitcher li {
	margin: 0;
}
.sh-langswitcher a {
	color: var(--sh-color-ink-soft);
	text-decoration: none;
}
.sh-langswitcher a:hover {
	color: var(--sh-color-ink);
}
.sh-langswitcher .current-lang a {
	color: var(--sh-color-primary);
	font-weight: 600;
	pointer-events: none;
}


/* ============================================================
   Site footer (gedeeld marketing + portal)
   ============================================================ */

.sh-site-footer {
	background: var(--sh-color-night);
	color: var(--sh-color-night-soft);
	padding-block: var(--sh-space-5) var(--sh-space-3);
	margin-top: var(--sh-space-6);
}

.sh-site-footer a {
	color: var(--sh-color-night-soft);
}
.sh-site-footer a:hover {
	color: var(--sh-color-night-ink);
	text-decoration: none;
}

.sh-site-footer__top {
	display: grid;
	grid-template-columns: 1.4fr repeat(4, 1fr);
	gap: var(--sh-space-3);
	margin-bottom: var(--sh-space-4);
}

.sh-site-footer__brand {
	max-width: 22rem;
}
.sh-site-footer__brand .sh-site-footer__tagline {
	font-size: var(--sh-fs-sm);
	color: var(--sh-color-night-soft);
	margin-top: 0.5rem;
	line-height: var(--sh-lh-snug);
}

.sh-site-footer__col h5 {
	color: var(--sh-color-night-ink);
	font-family: var(--sh-font-body);
	font-size: var(--sh-fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--sh-space-2);
}

.sh-site-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sh-site-footer__bottom {
	border-top: 1px solid rgba(255,255,255,0.08);
	padding-top: var(--sh-space-2);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sh-space-2);
	font-size: var(--sh-fs-xs);
}

@media (max-width: 900px) {
	.sh-site-footer__top {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 560px) {
	.sh-site-footer__top {
		grid-template-columns: 1fr;
	}
}


/* ============================================================
   Section utility
   ============================================================ */

.sh-section {
	padding-block: var(--sh-space-5);
}

.sh-section--lg {
	padding-block: var(--sh-space-6);
}

.sh-section--night {
	background: var(--sh-color-night);
	color: var(--sh-color-night-ink);
	position: relative;
	overflow: hidden;
}

.sh-section--night h1,
.sh-section--night h2,
.sh-section--night h3,
.sh-section--night h4 {
	color: #FFFFFF;
}

.sh-section--night p {
	color: var(--sh-color-night-soft);
}

/* Subtle dot-pattern overlay voor donkere secties */
.sh-section--night::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
	background-size: 24px 24px;
	pointer-events: none;
	mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
	-webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
}

.sh-section > .sh-container {
	position: relative;
	z-index: 1;
}


/* ============================================================
   Eyebrow / kicker
   ============================================================ */

.sh-eyebrow {
	display: inline-block;
	font-family: var(--sh-font-display);
	font-style: italic;
	font-size: var(--sh-fs-lg);
	color: var(--sh-color-primary);
	margin-bottom: 0.5rem;
}


/* ============================================================
   Pricing-form (preserved from old pricing pattern, slimmed)
   ============================================================ */

.sh-pricing-form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sh-pricing-form__label {
	font-size: var(--sh-fs-xs);
	color: var(--sh-color-ink-soft);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.sh-pricing-form__email {
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--sh-color-border);
	border-radius: var(--sh-radius-sm);
	font: inherit;
	color: var(--sh-color-ink);
	background: var(--sh-color-canvas);
	transition: border-color var(--sh-duration) var(--sh-ease);
}

.sh-pricing-form__email:focus {
	outline: 2px solid var(--sh-color-primary);
	outline-offset: -1px;
	border-color: var(--sh-color-primary);
}


/* ============================================================
   Checkout error banner (rendered when ?error=… on /pricing)
   ============================================================ */

.sh-checkout-error {
	max-width: var(--sh-width-content);
	margin: var(--sh-space-3) auto;
	padding: 0.75rem 1.125rem;
	background: rgba(155, 36, 62, 0.06);
	border-left: 3px solid var(--sh-color-alert);
	border-radius: 0 var(--sh-radius-sm) var(--sh-radius-sm) 0;
	color: var(--sh-color-ink);
	font-size: var(--sh-fs-md);
}


/* ============================================================
   Skip link (accessibility)
   ============================================================ */

.sh-skiplink {
	position: absolute;
	top: -40px;
	left: 0;
	background: var(--sh-color-primary);
	color: var(--sh-color-primary-ink);
	padding: 0.5rem 1rem;
	z-index: 1000;
	transition: top var(--sh-duration) var(--sh-ease);
}
.sh-skiplink:focus { top: 0; }


/* ============================================================
   Prose (WYSIWYG content + feature_split body)
   ============================================================ */

.sh-prose > *:first-child { margin-top: 0; }
.sh-prose > *:last-child  { margin-bottom: 0; }
.sh-prose ul, .sh-prose ol {
	padding-left: 1.25rem;
	margin: 0 0 var(--sh-space-2);
}
.sh-prose li + li { margin-top: 0.25rem; }


/* ============================================================
   Hero — split layout (text + image)
   ============================================================ */

.sh-hero {
	padding-block: var(--sh-space-6) var(--sh-space-5);
}

/* Night-variant van hero: radial highlight + grid-pattern overlay
   (de "light from above"-look uit de referentie). Overschrijft de
   default dot-pattern uit .sh-section--night::before. */
.sh-section--night.sh-hero {
	background:
		radial-gradient(ellipse 80% 60% at 75% -10%, rgba(139,127,224,0.20), transparent 60%),
		linear-gradient(180deg, var(--sh-color-night) 0%, #08122A 100%);
}
.sh-section--night.sh-hero::before {
	/* Concentric arcs vanuit de rechterbovenhoek — radar/ripples-effect.
	   Bewust géén dot-grid (dat doet ACF). */
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' preserveAspectRatio='xMaxYMin slice'><g fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1'><circle cx='1200' cy='0' r='140'/><circle cx='1200' cy='0' r='260'/><circle cx='1200' cy='0' r='380'/><circle cx='1200' cy='0' r='500'/><circle cx='1200' cy='0' r='640'/><circle cx='1200' cy='0' r='780'/><circle cx='1200' cy='0' r='940'/><circle cx='1200' cy='0' r='1120'/><circle cx='1200' cy='0' r='1320'/></g></svg>");
	background-repeat: no-repeat;
	background-position: top right;
	background-size: 100% 100%;
}

.sh-hero__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sh-space-2);
	/* Geen max-width — hero vult de container (1180px). De heading
	   breekt via white-space: pre-line op handmatige line-breaks; de
	   subtitle heeft een eigen leesbaarheids-cap (56ch) verderop. */
}

.sh-hero__title {
	font-size: var(--sh-fs-hero);
	line-height: 1.05;
	white-space: pre-line; /* respecteert handmatige line-breaks in title */
	margin: 0;
}

.sh-hero__subtitle {
	font-size: var(--sh-fs-lg);
	max-width: 56ch;
	margin: 0;
}

.sh-section--night.sh-hero .sh-hero__title { color: #FFFFFF; }
.sh-section--night.sh-hero .sh-hero__subtitle { color: var(--sh-color-night-soft); }
.sh-section--night.sh-hero .sh-eyebrow { color: var(--sh-color-primary-on-night); }
.sh-section--night .sh-eyebrow { color: var(--sh-color-primary-on-night); }

.sh-hero__ctas {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-top: var(--sh-space-2);
}

@media (max-width: 900px) {
	.sh-hero { padding-block: var(--sh-space-5) var(--sh-space-4); }
	.sh-hero__subtitle { max-width: none; }
}

/* ============================================================
   Hero — theatre/marquee variant (gecentreerd affiche-gevoel)
   Bewust géén links-uitgelijnd tekstblok (de dev-tool/ACF-conventie):
   gecentreerd, marquee-eyebrow, serif-display-titel, spotlight.
   ============================================================ */

.sh-hero--marquee .sh-hero__inner {
	align-items: center;
	text-align: center;
}

/* Eyebrow als marquee-tag: "✦ NOW SHOWING ✦" */
.sh-hero--marquee .sh-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	font-family: var(--sh-font-body);
	font-style: normal;
	font-size: var(--sh-fs-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.24em;
	margin-bottom: var(--sh-space-2);
}
.sh-hero--marquee .sh-eyebrow::before,
.sh-hero--marquee .sh-eyebrow::after {
	content: "\2726"; /* ✦ */
	font-size: 0.78em;
	opacity: 0.7;
}

/* Titel: serif-display, krappe maat — affiche-look */
.sh-hero--marquee .sh-hero__title {
	font-family: var(--sh-font-display);
	max-width: 20ch;
	margin-inline: auto;
	letter-spacing: -0.01em;
}

/* Subtitle gecentreerd, met een korte sierlijn erboven */
.sh-hero--marquee .sh-hero__subtitle {
	max-width: 54ch;
	margin-inline: auto;
}
.sh-hero--marquee .sh-hero__subtitle::before {
	content: "";
	display: block;
	width: 56px;
	height: 2px;
	margin: 0 auto var(--sh-space-2);
	border-radius: 2px;
	background: var(--sh-color-primary);
	opacity: 0.7;
}
.sh-section--night.sh-hero--marquee .sh-hero__subtitle::before {
	background: var(--sh-color-primary-on-night);
}

/* CTA's gecentreerd */
.sh-hero--marquee .sh-hero__ctas {
	justify-content: center;
}

/* Night-marquee: warme spotlight van bovenaf i.p.v. de radar-arcs */
.sh-section--night.sh-hero--marquee {
	background:
		radial-gradient(ellipse 55% 42% at 50% -8%, rgba(255, 226, 170, 0.16), transparent 60%),
		radial-gradient(ellipse 95% 80% at 50% 0%, rgba(139, 127, 224, 0.16), transparent 70%),
		linear-gradient(180deg, var(--sh-color-night) 0%, #08122A 100%);
}
.sh-section--night.sh-hero--marquee::before {
	/* Schone poster: geen patroon — alleen de spotlight uit de achtergrond. */
	background-image: none;
}

@media (max-width: 900px) {
	.sh-hero--marquee .sh-hero__title { max-width: none; }
	.sh-hero--marquee .sh-hero__subtitle { max-width: none; }
}


/* ============================================================
   Logo cloud
   ============================================================ */

.sh-logo-cloud__intro {
	text-align: center;
	color: var(--sh-color-ink-soft);
	font-size: var(--sh-fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 var(--sh-space-3);
}

.sh-logo-cloud__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: var(--sh-space-3);
	align-items: center;
	justify-items: center;
	opacity: 0.75;
}

.sh-logo-cloud__list img {
	max-height: 40px;
	width: auto;
	filter: grayscale(1);
	transition: filter var(--sh-duration) var(--sh-ease);
}
.sh-logo-cloud__list li:hover img {
	filter: grayscale(0);
}


/* ============================================================
   Feature split — text + image, alternating
   ============================================================ */

.sh-feature-split {
	padding-block: var(--sh-space-5);
}
.sh-feature-split--light   { background: var(--sh-color-canvas); }
.sh-feature-split--surface { background: var(--sh-color-surface); }

.sh-feature-split__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sh-space-5);
	align-items: center;
}

.sh-feature-split__text > * + * { margin-top: var(--sh-space-2); }
.sh-feature-split__text h2 {
	font-family: var(--sh-font-display);
	font-size: var(--sh-fs-2xl);
	margin: 0;
}

.sh-feature-split--image-left .sh-feature-split__media {
	order: -1;
}

.sh-feature-split__media img {
	border-radius: var(--sh-radius-md);
	box-shadow: var(--sh-shadow-md);
	border: 1px solid var(--sh-color-border);
	width: 100%;
	height: auto;
}

@media (max-width: 900px) {
	.sh-feature-split__grid {
		grid-template-columns: 1fr;
		gap: var(--sh-space-3);
	}
	.sh-feature-split--image-left .sh-feature-split__media {
		order: 0;
	}
}


/* ============================================================
   Product feature (PRO Feature #N stijl) — alternating split
   ============================================================ */

.sh-product-feature {
	padding-block: var(--sh-space-5);
}
.sh-product-feature--light   { background: var(--sh-color-canvas); }
.sh-product-feature--surface { background: var(--sh-color-surface); }

/* Zachte scheiding tussen aaneengeschakelde features met dezelfde bg-kleur */
.sh-product-feature--light + .sh-product-feature--light,
.sh-product-feature--surface + .sh-product-feature--surface {
	border-top: 1px solid var(--sh-color-border);
}

.sh-product-feature__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sh-space-5);
	align-items: center;
}

.sh-product-feature--image-left .sh-product-feature__media {
	order: -1;
}

.sh-product-feature__eyebrow {
	display: inline-block;
	font-family: var(--sh-font-body);
	font-size: var(--sh-fs-sm);
	font-weight: 600;
	color: var(--sh-color-ink-soft);
	letter-spacing: 0.02em;
	margin-bottom: 0.5rem;
}

.sh-product-feature__title {
	font-family: var(--sh-font-display);
	font-size: var(--sh-fs-2xl);
	margin: 0 0 var(--sh-space-2);
}

.sh-product-feature__body {
	margin-bottom: var(--sh-space-2);
	color: var(--sh-color-ink);
}

.sh-product-feature__ctas {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-top: var(--sh-space-2);
}

.sh-product-feature__media img {
	border-radius: var(--sh-radius-md);
	box-shadow: var(--sh-shadow-md);
	border: 1px solid var(--sh-color-border);
	width: 100%;
	height: auto;
}

@media (max-width: 900px) {
	.sh-product-feature__grid {
		grid-template-columns: 1fr;
		gap: var(--sh-space-3);
	}
	.sh-product-feature--image-left .sh-product-feature__media {
		order: 0;
	}
}


/* ============================================================
   Feature grid — 3-column icon cards
   ============================================================ */

.sh-feature-grid__header {
	text-align: center;
	max-width: var(--sh-width-prose);
	margin: 0 auto var(--sh-space-4);
}

.sh-feature-grid__header h2 {
	font-family: var(--sh-font-display);
}

.sh-feature-grid__header::after {
	content: "";
	display: block;
	width: 56px;
	height: 2px;
	background: var(--sh-color-primary-soft);
	margin: var(--sh-space-2) auto 0;
	border-radius: 2px;
}

.sh-feature-grid__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--sh-space-4) var(--sh-space-3);
}

.sh-feature-grid__item {
	padding: 0 var(--sh-space-1);
	text-align: left;
}

.sh-feature-grid__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--sh-radius-pill);
	background: rgba(69,159,245,0.08);
	color: var(--sh-color-primary);
	font-size: 1.25rem;
	margin-bottom: 0.75rem;
}

.sh-feature-grid__item h3 {
	font-size: var(--sh-fs-lg);
	font-family: var(--sh-font-display);
	margin: 0 0 0.5rem;
}

.sh-feature-grid__item p {
	color: var(--sh-color-ink-soft);
	font-size: var(--sh-fs-sm);
	margin: 0;
}


/* ============================================================
   Pricing — tiers (card grid + highlighted + filled variants)
   ============================================================ */

.sh-pricing__header {
	text-align: center;
	max-width: var(--sh-width-prose);
	margin: 0 auto var(--sh-space-4);
}

.sh-pricing__header h2 {
	font-family: var(--sh-font-display);
}

/* Korte accent-streep tussen header en cards (decoratie) */
.sh-pricing__header::after {
	content: "";
	display: block;
	width: 56px;
	height: 2px;
	background: var(--sh-color-primary-soft);
	margin: var(--sh-space-2) auto 0;
	border-radius: 2px;
}

.sh-pricing__tiers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--sh-space-3);
	align-items: stretch;
}

.sh-pricing__tier {
	background: var(--sh-color-canvas);
	border: 1px solid var(--sh-color-border);
	border-radius: var(--sh-radius-md);
	padding: var(--sh-space-4) var(--sh-space-3);
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	box-shadow: var(--sh-shadow-sm);
	position: relative;
	text-align: center;
	height: 100%;
}

.sh-pricing__tier--highlighted {
	border-color: var(--sh-color-primary);
	border-width: 2px;
	/* compenseer voor de extra 1px border zodat alle cards op gelijke
	   visuele hoogte uitlijnen */
	padding: calc(var(--sh-space-4) - 1px) calc(var(--sh-space-3) - 1px);
	box-shadow: var(--sh-shadow-md);
}

.sh-pricing__tier--filled {
	background: var(--sh-color-primary);
	color: var(--sh-color-primary-ink);
	border-color: var(--sh-color-primary);
	box-shadow: var(--sh-shadow-md);
}
.sh-pricing__tier--filled .sh-pricing__name,
.sh-pricing__tier--filled .sh-pricing__amount,
.sh-pricing__tier--filled .sh-pricing__period,
.sh-pricing__tier--filled .sh-pricing__desc,
.sh-pricing__tier--filled .sh-pricing__features {
	color: var(--sh-color-primary-ink);
}
.sh-pricing__tier--filled .sh-pricing-form__email {
	background: rgba(255,255,255,0.95);
	border-color: transparent;
}
.sh-pricing__tier--filled .sh-pricing-form__label {
	color: rgba(255,255,255,0.8);
}

.sh-pricing__name {
	font-family: var(--sh-font-display);
	font-style: italic;
	font-size: var(--sh-fs-xl);
	font-weight: 700;
	color: var(--sh-color-primary);
	margin: 0;
}

.sh-pricing__desc {
	font-size: var(--sh-fs-sm);
	color: var(--sh-color-ink-soft);
	margin: 0;
}

.sh-pricing__price {
	margin: 0.5rem 0;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.25rem;
}

.sh-pricing__amount {
	font-family: var(--sh-font-display);
	font-size: clamp(2.25rem, 1.6rem + 1.6vw, 3.25rem);
	font-weight: 700;
	color: var(--sh-color-primary);
	letter-spacing: -0.03em;
	line-height: 1;
}

.sh-pricing__period {
	font-size: var(--sh-fs-md);
	color: var(--sh-color-ink-soft);
	font-weight: 500;
}

.sh-pricing__features {
	font-size: var(--sh-fs-sm);
	line-height: 1.55;
	color: var(--sh-color-ink);
}

.sh-pricing__tier .sh-pricing-form {
	margin-top: auto; /* duwt het form/CTA naar de onderkant zodat alle cards gelijke voet hebben */
}

.sh-pricing__footnote {
	text-align: center;
	color: var(--sh-color-ink-soft);
	font-size: var(--sh-fs-sm);
	margin-top: var(--sh-space-3);
}

/* Button-override op de filled-tier: pill blijft maar inverse kleuren
   (witte bg, primary tekst — i.p.v. ghost-on-night dat de pricing.php
   markup standaard zet) */
.sh-pricing__tier--filled .sh-btn {
	background: var(--sh-color-canvas);
	color: var(--sh-color-primary);
	border-color: transparent;
}
.sh-pricing__tier--filled .sh-btn:hover {
	background: var(--sh-color-canvas);
	color: var(--sh-color-primary);
	filter: brightness(0.95);
}


/* ============================================================
   FAQ accordion (native <details>)
   ============================================================ */

.sh-faq__header {
	text-align: center;
	margin-bottom: var(--sh-space-4);
}
.sh-faq__header h2 {
	font-family: var(--sh-font-display);
}
.sh-faq__header p {
	color: var(--sh-color-ink-soft);
}

/* Accent-line decoratie (zelfde patroon als pricing-header) */
.sh-faq__header::after {
	content: "";
	display: block;
	width: 56px;
	height: 2px;
	background: var(--sh-color-primary-soft);
	margin: var(--sh-space-2) auto 0;
	border-radius: 2px;
}

/* Continuous list — geen kaartjes per item, alleen horizontale dividers */
.sh-faq__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--sh-color-border);
}

.sh-faq__item {
	border-bottom: 1px solid var(--sh-color-border);
}

.sh-faq__item details {
	background: transparent;
}

.sh-faq__item summary {
	cursor: pointer;
	padding: 1rem 2.5rem 1rem 1.25rem;
	color: var(--sh-color-primary);
	font-weight: 500;
	list-style: none;
	position: relative;
	transition: color var(--sh-duration) var(--sh-ease);
}
.sh-faq__item summary::-webkit-details-marker { display: none; }
.sh-faq__item summary::after {
	content: "+";
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--sh-color-primary);
	line-height: 1;
	transition: transform var(--sh-duration) var(--sh-ease);
}
.sh-faq__item details[open] summary {
	color: var(--sh-color-primary);
}
.sh-faq__item details[open] summary::after {
	content: "×";
	font-size: 1.6rem;
}
.sh-faq__item summary:hover {
	color: var(--sh-color-ink-strong);
}
.sh-faq__item summary:hover::after {
	color: var(--sh-color-ink-strong);
}
.sh-faq__answer {
	padding: 0 1.25rem 1.25rem;
	color: var(--sh-color-ink);
	line-height: var(--sh-lh-body);
}
.sh-faq__answer > *:first-child { margin-top: 0; }
.sh-faq__answer > *:last-child  { margin-bottom: 0; }


/* ============================================================
   CTA banner (centered, 3 variants)
   ============================================================ */

.sh-cta-banner__inner {
	text-align: center;
}

.sh-cta-banner h2 {
	font-family: var(--sh-font-display);
}

.sh-cta-banner--primary {
	background: var(--sh-color-primary);
	color: var(--sh-color-primary-ink);
}
.sh-cta-banner--primary h2 { color: var(--sh-color-primary-ink); }
.sh-cta-banner--primary p  { color: rgba(255,255,255,0.9); }
.sh-cta-banner--primary .sh-btn--primary {
	background: var(--sh-color-canvas);
	color: var(--sh-color-primary);
}


/* ============================================================
   Enterprise CTA (contactformulier)
   ============================================================ */

.sh-enterprise {
	padding-block: var(--sh-space-5);
}
.sh-enterprise--light {
	background: var(--sh-color-surface);
}

.sh-enterprise__inner {
	max-width: 760px;
	margin-inline: auto;
}

.sh-enterprise__header {
	text-align: center;
	margin-bottom: var(--sh-space-4);
}
.sh-enterprise__header h2 {
	font-family: var(--sh-font-display);
}
.sh-enterprise__header::after {
	content: "";
	display: block;
	width: 56px;
	height: 2px;
	background: var(--sh-color-primary);
	margin: var(--sh-space-2) auto 0;
	border-radius: 2px;
}

.sh-enterprise__form {
	display: flex;
	flex-direction: column;
	gap: var(--sh-space-2);
}

.sh-enterprise__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sh-space-2);
}

.sh-enterprise__field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: var(--sh-fs-sm);
	color: var(--sh-color-ink);
}

.sh-enterprise__field--wide {
	grid-column: 1 / -1;
}

.sh-enterprise__field input,
.sh-enterprise__field textarea {
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--sh-color-border);
	border-radius: var(--sh-radius-sm);
	font: inherit;
	background: var(--sh-color-canvas);
	color: var(--sh-color-ink);
}

.sh-enterprise__field textarea {
	resize: vertical;
	min-height: 8rem;
}

.sh-enterprise__field input:focus,
.sh-enterprise__field textarea:focus {
	outline: 2px solid var(--sh-color-primary);
	outline-offset: -1px;
	border-color: var(--sh-color-primary);
}

.sh-enterprise__field.is-invalid input,
.sh-enterprise__field.is-invalid textarea {
	border-color: var(--sh-color-alert);
	background: rgba(155, 36, 62, 0.04);
}

.sh-enterprise__submit-row {
	margin-top: var(--sh-space-1);
}

.sh-enterprise__success {
	text-align: center;
	padding: var(--sh-space-3);
	background: rgba(98, 91, 197, 0.06);
	border: 1px solid var(--sh-color-primary);
	border-radius: var(--sh-radius-md);
	color: var(--sh-color-ink-strong);
}

.sh-enterprise__error {
	text-align: center;
	padding: 0.75rem 1.125rem;
	background: rgba(155, 36, 62, 0.06);
	border-left: 3px solid var(--sh-color-alert);
	border-radius: 0 var(--sh-radius-sm) var(--sh-radius-sm) 0;
	margin-bottom: var(--sh-space-2);
	color: var(--sh-color-ink);
}

@media (max-width: 600px) {
	.sh-enterprise__grid {
		grid-template-columns: 1fr;
	}
}


/* ============================================================
   Newsletter signup
   ============================================================ */

.sh-newsletter {
	background: var(--sh-color-surface);
	padding-block: var(--sh-space-4);
}

.sh-newsletter__grid {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: var(--sh-space-4);
	align-items: center;
}

.sh-newsletter__text {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.sh-newsletter__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--sh-radius-pill);
	border: 1px solid var(--sh-color-border);
	background: var(--sh-color-canvas);
	color: var(--sh-color-primary);
	flex-shrink: 0;
}

.sh-newsletter__title {
	margin: 0 0 0.25rem;
	font-family: var(--sh-font-body);
	font-size: var(--sh-fs-md);
	font-weight: 600;
	color: var(--sh-color-ink-strong);
}
.sh-newsletter__body  {
	margin: 0;
	color: var(--sh-color-ink-soft);
	font-size: var(--sh-fs-sm);
}

.sh-newsletter__form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.sh-newsletter__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

.sh-newsletter__form label {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: var(--sh-fs-sm);
	color: var(--sh-color-ink);
}

.sh-newsletter__form input {
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--sh-color-border);
	border-radius: var(--sh-radius-sm);
	font: inherit;
	background: var(--sh-color-canvas);
}

.sh-newsletter__form input:focus {
	outline: 2px solid var(--sh-color-primary);
	outline-offset: -1px;
	border-color: var(--sh-color-primary);
}

.sh-newsletter__submit-row {
	margin-top: 0.25rem;
}

@media (max-width: 760px) {
	.sh-newsletter__grid {
		grid-template-columns: 1fr;
	}
	.sh-newsletter__row {
		grid-template-columns: 1fr;
	}
}


/* ============================================================
   Print
   ============================================================ */

@media print {
	.sh-site-header,
	.sh-site-footer { display: none !important; }
}

/* ============================================================
   Pricing — BTW-toggle, zakelijk-blok, checkout-return (#21/#22)
   ============================================================ */

.sh-pricing__vat-toggle {
	display: inline-flex;
	gap: 2px;
	margin: 0 auto var(--sh-space-l, 2rem);
	padding: 3px;
	border: 1px solid var(--sh-color-border, #dcdcde);
	border-radius: 999px;
	background: var(--sh-color-surface, #f6f7f7);
}
.sh-vat-btn {
	border: 0;
	background: transparent;
	padding: 6px 16px;
	border-radius: 999px;
	font: inherit;
	font-size: 0.85rem;
	color: var(--sh-color-muted, #50575e);
	cursor: pointer;
}
.sh-vat-btn.is-active {
	background: var(--sh-color-fg, #1d2327);
	color: var(--sh-color-bg, #fff);
}
.sh-pricing__vat-suffix {
	display: block;
	font-size: 0.8rem;
	color: var(--sh-color-muted, #50575e);
}

.sh-pricing-form__business {
	margin: 0.5rem 0;
	font-size: 0.9rem;
}
.sh-pricing-form__business > summary {
	cursor: pointer;
	color: var(--sh-color-muted, #50575e);
	margin-bottom: 0.5rem;
}
.sh-pricing-form__field {
	display: block;
	width: 100%;
	margin: 0.35rem 0;
	padding: 0.5rem 0.65rem;
	border: 1px solid var(--sh-color-border, #dcdcde);
	border-radius: var(--sh-radius, 6px);
	font: inherit;
}

.sh-checkout-return {
	padding-block: var(--sh-space-xl, 4rem);
}