/*
Theme Name: Retenza
Theme URI: https://retenza.eu
Author: Easydus
Description: Landing pages for Retenza: one set of block markup, five category skins (installatie, salons, schoonmaak, garages, mkb) picked with a section style on the page's outer Group.
Version: 1.0.17
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: retenza
*/

/* What theme.json can't express. Colours come from the palette variables; each category skin below
   overrides them (and the fonts and radius) on the page's outer Group, and on <body> when the page
   holds that Group, so the header button and the footer follow the skin too. */

/* ---------- Category skins ---------- */

.is-style-installatie,
body:has(.is-style-installatie) {
	--wp--preset--color--bg: #f3f5f8;
	--wp--preset--color--surface: #ffffff;
	--wp--preset--color--ink: #0b1b33;
	--wp--preset--color--muted: #526176;
	--wp--preset--color--brand: #0b2545;
	--wp--preset--color--brand-2: #13406f;
	--wp--preset--color--cta: #ff7a1a;
	--wp--preset--color--cta-ink: #1a1206;
	--wp--preset--color--accent: #ff8a3d;
	--wp--preset--color--accent-text: #c2410c;
	--wp--preset--color--soft: #e6edf6;
	--wp--preset--color--line: #dde3ec;
	--wp--preset--color--hero-bg: #0b2545;
	--wp--preset--color--hero-ink: #ffffff;
	--wp--preset--color--hero-muted: #c3d0e2;
	--wp--preset--font-family--heading: var(--wp--preset--font-family--archivo);
	--wp--preset--font-family--body: var(--wp--preset--font-family--inter);
	--wp--custom--radius: 10px;
	--wp--custom--focus: #ff7a1a;
	--cb-eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0 5 5l-9.4 9.4a2.1 2.1 0 0 1-3-3z'/%3E%3Cpath d='M14.7 6.3 17 4a4 4 0 0 1 3 3l-2.3 2.3'/%3E%3C/svg%3E");
}

.is-style-salons,
body:has(.is-style-salons) {
	--wp--preset--color--bg: #fbf4ef;
	--wp--preset--color--surface: #ffffff;
	--wp--preset--color--ink: #3a1733;
	--wp--preset--color--muted: #74566a;
	--wp--preset--color--brand: #5b1f4f;
	--wp--preset--color--brand-2: #8c3a74;
	--wp--preset--color--cta: #5b1f4f;
	--wp--preset--color--cta-ink: #ffffff;
	--wp--preset--color--accent: #8c3a74;
	--wp--preset--color--accent-text: #b04a62;
	--wp--preset--color--soft: #f8dfe3;
	--wp--preset--color--line: #efdfe0;
	--wp--preset--color--hero-bg: #fbf4ef;
	--wp--preset--color--hero-ink: #3a1733;
	--wp--preset--color--hero-muted: #6b4d61;
	--wp--preset--font-family--heading: var(--wp--preset--font-family--fraunces);
	--wp--preset--font-family--body: var(--wp--preset--font-family--dm-sans);
	--wp--custom--radius: 22px;
	--wp--custom--focus: #5b1f4f;
	--cb-check: #d06f82;
	--cb-eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M8.1 8.1 20 20M8.1 15.9 20 4'/%3E%3C/svg%3E");
}

/* Same values as theme.json: repeated so a schoonmaak page stays schoonmaak inside another skin. */
.is-style-schoonmaak,
body:has(.is-style-schoonmaak) {
	--wp--preset--color--bg: #f3f8fb;
	--wp--preset--color--surface: #ffffff;
	--wp--preset--color--ink: #0c2233;
	--wp--preset--color--muted: #4b6272;
	--wp--preset--color--brand: #075985;
	--wp--preset--color--brand-2: #0284c7;
	--wp--preset--color--cta: #facc15;
	--wp--preset--color--cta-ink: #1c1917;
	--wp--preset--color--accent: #0369a1;
	--wp--preset--color--accent-text: #0369a1;
	--wp--preset--color--soft: #e0f2fe;
	--wp--preset--color--line: #dbe7ef;
	--wp--preset--color--hero-bg: #f3f8fb;
	--wp--preset--color--hero-ink: #0c2233;
	--wp--preset--color--hero-muted: #4b6272;
	--wp--preset--font-family--heading: var(--wp--preset--font-family--manrope);
	--wp--preset--font-family--body: var(--wp--preset--font-family--manrope);
	--wp--custom--radius: 14px;
	--wp--custom--focus: #075985;
	--cb-eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c.6 4.2 2.8 6.4 7 7-4.2.6-6.4 2.8-7 7-.6-4.2-2.8-6.4-7-7 4.2-.6 6.4-2.8 7-7z'/%3E%3Cpath d='M19 16c.3 1.6 1 2.4 2.5 2.5-1.5.3-2.2 1-2.5 2.5-.3-1.5-1-2.2-2.5-2.5 1.5-.1 2.2-.9 2.5-2.5z'/%3E%3C/svg%3E");
}

.is-style-garages,
body:has(.is-style-garages) {
	--wp--preset--color--bg: #f4f4f5;
	--wp--preset--color--surface: #ffffff;
	--wp--preset--color--ink: #18181b;
	--wp--preset--color--muted: #52525b;
	--wp--preset--color--brand: #27272a;
	--wp--preset--color--brand-2: #3f3f46;
	--wp--preset--color--cta: #dc2626;
	--wp--preset--color--cta-ink: #ffffff;
	--wp--preset--color--accent: #facc15;
	--wp--preset--color--accent-text: #b91c1c;
	--wp--preset--color--soft: #e4e4e7;
	--wp--preset--color--line: #e4e4e7;
	--wp--preset--color--hero-bg: #18181b;
	--wp--preset--color--hero-ink: #ffffff;
	--wp--preset--color--hero-muted: #d4d4d8;
	--wp--preset--font-family--heading: var(--wp--preset--font-family--oswald);
	--wp--preset--font-family--body: var(--wp--preset--font-family--inter);
	--wp--custom--radius: 6px;
	--wp--custom--focus: #dc2626;
	--cb-eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 17h2a1 1 0 0 0 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4a1 1 0 0 0 1 1h2'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Cpath d='M9 17h6'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E");
}

.is-style-mkb,
body:has(.is-style-mkb) {
	--wp--preset--color--bg: #f5f8f7;
	--wp--preset--color--surface: #ffffff;
	--wp--preset--color--ink: #10201d;
	--wp--preset--color--muted: #4f615d;
	--wp--preset--color--brand: #0f766e;
	--wp--preset--color--brand-2: #14958a;
	--wp--preset--color--cta: #f59e0b;
	--wp--preset--color--cta-ink: #1c1917;
	--wp--preset--color--accent: #0f766e;
	--wp--preset--color--accent-text: #0f766e;
	--wp--preset--color--soft: #ccfbf1;
	--wp--preset--color--line: #dfe7e5;
	--wp--preset--color--hero-bg: #f5f8f7;
	--wp--preset--color--hero-ink: #10201d;
	--wp--preset--color--hero-muted: #4f615d;
	--wp--preset--font-family--heading: var(--wp--preset--font-family--brand);
	--wp--preset--font-family--body: var(--wp--preset--font-family--brand);
	--wp--custom--radius: 14px;
	--wp--custom--focus: #0f766e;
	--cb-eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9 4.5 4h15L21 9'/%3E%3Cpath d='M3 9a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0'/%3E%3Cpath d='M5 11v9h14v-9M10 20v-5h4v5'/%3E%3C/svg%3E");
}

/* Master brand (the /vragen/ and /bedankt/ steps): the header's slate and lime, Plus Jakarta Sans. */
.is-style-master,
body:has(.is-style-master) {
	--wp--preset--color--bg: #f8fafc;
	--wp--preset--color--surface: #ffffff;
	--wp--preset--color--ink: #0f172a;
	--wp--preset--color--muted: #475569;
	--wp--preset--color--brand: #0f172a;
	--wp--preset--color--brand-2: #4d7c0f;
	--wp--preset--color--cta: #0f172a;
	--wp--preset--color--cta-ink: #ffffff;
	--wp--preset--color--accent: #4d7c0f;
	--wp--preset--color--accent-text: #4d7c0f;
	--wp--preset--color--soft: #ecfccb;
	--wp--preset--color--line: #e2e8f0;
	--wp--preset--color--hero-bg: #f8fafc;
	--wp--preset--color--hero-ink: #0f172a;
	--wp--preset--color--hero-muted: #475569;
	--wp--preset--font-family--heading: var(--wp--preset--font-family--brand);
	--wp--preset--font-family--body: var(--wp--preset--font-family--brand);
	--wp--custom--radius: 14px;
	--wp--custom--focus: #4d7c0f;
	--cb-check: #4d7c0f;
	--cb-eyebrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='3'/%3E%3Cpath d='M2.5 10h19M6.5 15h4'/%3E%3C/svg%3E");
}

/* The skin's body font on the Group itself (the editor has no body:has() match for it). */
.is-style-installatie,
.is-style-salons,
.is-style-schoonmaak,
.is-style-garages,
.is-style-mkb,
.is-style-master {
	font-family: var(--wp--preset--font-family--body);
}

/* ---------- Base ---------- */

body {
	-webkit-font-smoothing: antialiased;
}

:focus-visible {
	outline: 3px solid var(--wp--custom--focus);
	outline-offset: 2px;
}

/* Header, main and footer touch; sections inside the page Group touch too. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

.wp-block-group:is(.is-style-installatie, .is-style-salons, .is-style-schoonmaak, .is-style-garages, .is-style-mkb, .is-style-master) > * {
	margin-block: 0;
}

/* Salons: italic serif highlight in headlines. */
.is-style-salons :is(h1, h2) mark {
	font-style: italic;
}

.is-style-salons h2 {
	font-weight: 500;
}

/* ---------- Header (master brand, the same on every page) ---------- */

.wp-block-group.cb-urgency {
	gap: 0.35em;
	padding: 9px 20px;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
}

.cb-urgency p {
	margin: 0;
}

.cb-urgency p:first-child::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--master-lime);
	vertical-align: 1px;
}

.cb-top {
	position: relative;
	z-index: 2;
	border-bottom: 1px solid #e5e7eb;
}

.cb-top .cb-top-row {
	min-height: 72px;
	gap: 20px;
}

.wp-block-group.cb-logo {
	gap: 10px;
}

.cb-logo .wp-block-image {
	flex: none;
	margin: 0;
	line-height: 0;
}

.cb-logo p {
	margin: 0;
	font-family: var(--wp--preset--font-family--brand);
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -0.4px;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--wp--preset--color--master-ink);
}

.cb-logo a {
	color: inherit;
	text-decoration: none;
}

.cb-top .wp-block-navigation {
	font-family: var(--wp--preset--font-family--brand);
}

.cb-top .wp-block-navigation a {
	text-decoration: none;
}

.cb-top .cb-segs,
.cb-segs .wp-block-navigation__container {
	gap: 0;
}

.cb-top .cb-segs {
	padding: 4px;
	border-radius: 99px;
	background: #f1f5f9;
	font-size: 14px;
	font-weight: 600;
}

.cb-segs .wp-block-navigation-item {
	padding: 8px 13px;
	border-radius: 99px;
	color: #475569;
	line-height: 1.2;
}

.cb-page-installatie .cb-segs .cb-seg-installatie,
.cb-page-salons .cb-segs .cb-seg-salons,
.cb-page-schoonmaak .cb-segs .cb-seg-schoonmaak,
.cb-page-garages .cb-segs .cb-seg-garages,
.cb-page-mkb .cb-segs .cb-seg-mkb {
	background: var(--wp--preset--color--master-ink);
	color: var(--wp--preset--color--white);
}

.cb-top .cb-links,
.cb-links .wp-block-navigation__container {
	gap: 20px;
	white-space: nowrap;
}

.cb-top .cb-links {
	margin-left: auto;
	font-size: 15px;
	font-weight: 500;
	color: #475569;
}

/* ---------- Footer ---------- */

.cb-footer {
	padding-block: 28px;
	font-size: 14px;
	color: var(--wp--preset--color--muted);
}

.cb-footer .cb-footer-row {
	gap: 20px;
}

.cb-footer p {
	margin: 0;
}

.cb-footer .cb-logo p {
	font-size: 16px;
}

.cb-footer a {
	text-decoration: none;
}

/* ---------- Sections ---------- */

.cb-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-top: 40px;
	padding-bottom: 64px;
}

.cb-hero::before,
.cb-hero::after {
	position: absolute;
	z-index: -1;
	pointer-events: none;
}

.cb-hero .wp-block-columns {
	gap: 56px;
}

/* Lead and checks as wide as the sign-up card below them: 560px content + 2 x 24px padding + 2 x 1px border. */
.cb-hero .cb-lead,
.cb-hero .wp-block-list.is-style-checks {
	max-width: 610px;
}

/* The three checks on one line at full width: they need about 575px of text, so 14px gaps fit the 610px. They
   still wrap (whole items only) where the column is narrower. */
.cb-hero .wp-block-list.is-style-checks {
	column-gap: 14px;
}

.cb-hero .is-style-checks > li {
	white-space: nowrap;
}

.cb-hero .cb-lead {
	font-size: 19px;
	color: var(--wp--preset--color--hero-muted);
}

/* The phone PNG is 2x with a wide transparent shadow band and the two badges: show it at 1x and
   centre the phone (x 401px of 738px) on the column, letting the badges and shadow overflow. */
.cb-hero .cb-phone {
	margin: -40px 0 -100px;
}

.cb-hero .cb-phone img {
	width: auto;
	max-width: none;
	height: 839px;
	margin-left: calc(50% - 401px);
}

.wp-block-group.cb-eyebrow {
	width: fit-content;
	max-width: 100%;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 99px;
	background: var(--wp--preset--color--soft);
	color: var(--wp--preset--color--brand);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.cb-eyebrow::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--cb-eyebrow-icon) center / contain no-repeat;
	mask: var(--cb-eyebrow-icon) center / contain no-repeat;
}

.cb-eyebrow p {
	margin: 0;
}

.cb-trades {
	padding-top: 30px;
	padding-bottom: 30px;
	border-block: 1px solid var(--wp--preset--color--line);
	font-size: 20px;
}

.cb-trades .wp-block-group {
	align-items: center;
	gap: 22px;
}

/* "Gemaakt voor" as a pill in the category's colour, the trades big in the heading font. */
.cb-trades .wp-block-group > p {
	margin: 0;
	padding: 6px 12px;
	border-radius: 99px;
	background: var(--wp--preset--color--brand);
	color: #ffffff;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	white-space: nowrap;
}

.cb-trades ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 0;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--wp--preset--color--brand);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
}

.cb-trades li + li::before {
	content: "•";
	margin: 0 16px;
	opacity: 0.45;
}

.cb-pain {
	padding-top: 80px;
	padding-bottom: 72px;
}

.cb-pain .cb-pains {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.cb-pain .cb-pain-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 14px;
	padding: 24px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: calc(var(--wp--custom--radius) + 6px);
	background: var(--wp--preset--color--surface);
}

.cb-pain .cb-pain-card > * {
	margin: 0;
}

.cb-pain-card p {
	font-size: 18px;
	font-weight: 500;
}

/* A paragraph can't be alignwide, so the constrained layout would hold it at content width. */
.cb-pain .cb-bridge {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: var(--wp--style--global--wide-size) !important;
	margin-block-start: 32px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--brand);
}

.cb-bridge::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

:is(.cb-features, .cb-how, .cb-faq) {
	padding-top: 88px;
	padding-bottom: 88px;
}

:is(.cb-pain, .cb-features, .cb-how, .cb-faq) h2.wp-block-heading {
	margin-bottom: 32px;
}

:is(.cb-features, .cb-cta) .wp-block-columns {
	gap: 64px;
}

.cb-features .cb-feature {
	gap: 18px;
	margin-block-start: 0;
	padding: 18px 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.cb-feature .wp-block-image {
	flex: none;
	margin: 0;
}

.cb-feature h3.wp-block-heading + p {
	margin-block-start: 6px;
}

.cb-feature p,
.is-style-steps p {
	color: var(--wp--preset--color--muted);
}

.cb-features .cb-dash-cap {
	margin-bottom: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.cb-features .cb-dash-cap + .wp-block-image {
	margin-block-start: 12px;
}

.cb-dashboard img {
	width: 100%;
	height: auto;
}

.cb-how .cb-how-cta {
	gap: 18px;
	margin-block-start: 40px;
	font-size: 15px;
}

.cb-how-cta p {
	margin: 0;
}

.cb-how-cta .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-left: 8px;
	vertical-align: -4px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Core's grid layout sizes its columns for the block gap (20px); with the wider gap they no longer fit
   side by side, so fix the two columns here (one column in the mobile rules). */
.cb-faq .cb-faq-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 40px;
}

.cb-faq .cb-people {
	gap: 18px;
	margin-block-start: 40px;
	padding: 22px 24px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: calc(var(--wp--custom--radius) + 6px);
	background: var(--wp--preset--color--bg);
}

.cb-people p {
	margin: 0;
	text-wrap: pretty;
}

.cb-easydus-logo {
	display: block;
	flex: none;
	line-height: 0;
}

.cb-easydus-logo img {
	width: 148px;
	height: auto;
}

.cb-people .wp-block-buttons {
	gap: 10px;
}

.cb-call .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #0f172a;
	box-shadow: none;
	color: #ffffff;
}

.cb-call .wp-block-button__link::before {
	content: "";
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cb-people .wp-block-group p + p {
	font-size: 15px;
	color: var(--wp--preset--color--muted);
}

/* The row doesn't wrap: the text shrinks to two lines, the buttons keep their width beside it. */
.cb-people .wp-block-buttons {
	flex: none;
	margin-left: auto;
}

.cb-whatsapp .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1.5px solid #86efac;
	background: #ffffff;
	box-shadow: none;
	color: #166534;
}

.cb-whatsapp .wp-block-button__link::before {
	content: "";
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cb-cta {
	position: relative;
	overflow: hidden;
	padding-top: 80px;
	padding-bottom: 80px;
}

.cb-cta h2.wp-block-heading {
	margin-bottom: 16px;
	font-size: clamp(28px, 3.4vw, 40px);
}

.cb-cta .wp-block-column > p {
	max-width: 540px;
	font-size: 18px;
	opacity: 0.9;
}

.cb-cta h3.wp-block-heading {
	margin: 30px 0 12px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	letter-spacing: 1.5px;
	line-height: 1.3;
	text-transform: uppercase;
	opacity: 0.8;
}

.cb-cta h3.wp-block-heading + .wp-block-list {
	margin-block-start: 12px;
}

/* ---------- Block styles ---------- */

/* core/list "checks": inline row of check marks. */
.wp-block-list.is-style-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	padding: 0;
	list-style: none;
	font-size: 15px;
	font-weight: 600;
}

.is-style-checks > li {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}

.is-style-checks > li::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: var(--cb-check, var(--wp--preset--color--brand));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* core/list "circled": ordered list with the numbers in outlined circles. */
.wp-block-list.is-style-circled {
	display: grid;
	gap: 10px;
	padding: 0;
	list-style: none;
	counter-reset: cb-circled;
}

.is-style-circled > li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 16px;
	counter-increment: cb-circled;
}

.is-style-circled > li::before {
	content: counter(cb-circled);
	display: grid;
	flex: none;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 1.5px solid color-mix(in srgb, currentColor 60%, transparent);
	border-radius: 50%;
	font-size: 13px;
	font-weight: 700;
}

/* core/columns "steps": numbered circles joined by a dashed line. */
.wp-block-columns.is-style-steps {
	--cb-steps-gap: 28px;
	gap: var(--cb-steps-gap);
	counter-reset: cb-step;
}

.is-style-steps > .wp-block-column {
	position: relative;
	counter-increment: cb-step;
}

.is-style-steps > .wp-block-column::before {
	content: counter(cb-step);
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 19px;
	font-weight: 800;
}

.is-style-steps > .wp-block-column:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 22px;
	left: 56px;
	right: calc(var(--cb-steps-gap) / -2);
	border-top: 2px dashed var(--wp--preset--color--line);
}

.is-style-steps h3.wp-block-heading + p {
	max-width: 360px;
	margin-block-start: 6px;
}

.is-style-salons .is-style-steps > .wp-block-column::before {
	background: var(--wp--preset--color--soft);
	color: var(--wp--preset--color--brand);
	font-style: italic;
	font-weight: 600;
}

/* core/details: accordion row with a +/− marker. */
.wp-block-details {
	padding: 16px 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.wp-block-details > summary {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	list-style: none;
	cursor: pointer;
}

.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details > summary::after {
	content: "+";
	flex: none;
	color: var(--wp--preset--color--brand);
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
}

.wp-block-details[open] > summary::after {
	content: "\2013";
}

.wp-block-details > summary ~ * {
	color: var(--wp--preset--color--muted);
}

.wp-block-details > summary + * {
	margin-block-start: 8px;
}

/* ---------- Sign-up card (core/html): heading, Easydus form in an iframe, offer line, fine print ---------- */

.cb-signup {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 14px;
	max-width: 560px;
	padding: 22px 24px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: calc(var(--wp--custom--radius) + 6px);
	background: var(--wp--preset--color--surface);
	box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.35);
	color: var(--wp--preset--color--ink);
	font-style: normal;
}

.cb-signup > h2,
.cb-signup .signup-head {
	grid-column: 1 / -1;
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 22px;
	font-style: normal;
	letter-spacing: 0;
	line-height: 1.1;
}

.cb-signup label {
	grid-row: 2;
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

.cb-signup .opt {
	font-weight: 400;
}

.cb-signup input {
	grid-row: 3;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	margin: 5px 0 14px;
	padding: 12px 14px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: calc(var(--wp--custom--radius) - 2px);
	background: var(--wp--preset--color--bg);
	color: var(--wp--preset--color--ink);
	font: 500 16px var(--wp--preset--font-family--body);
}

.cb-signup input::placeholder {
	color: #6b7280;
	font-weight: 400;
}

.cb-signup button,
.cb-signup p {
	grid-column: 1 / -1;
}

.cb-signup button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	padding: 15px 22px;
	border: 0;
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--cta);
	box-shadow: 0 6px 18px -8px var(--wp--preset--color--cta);
	color: var(--wp--preset--color--cta-ink);
	font: 700 17px/1.3 var(--wp--preset--font-family--body);
	white-space: nowrap;
	cursor: pointer;
}

.cb-signup p {
	margin: 10px 0 0;
	font-size: 15px;
	text-align: center;
}

.cb-signup p.fine {
	margin-top: 2px;
	font-size: 13px;
	color: var(--wp--preset--color--muted);
}

.cb-signup p.fine a {
	text-decoration: underline;
}

/* The Easydus form: its height comes from assets/js/signup.js; min-height covers the first paint. Not
   sandboxed: after a submit Easydus navigates the top window. */
.cb-signup-frame {
	display: block;
	grid-column: 1 / -1;
	width: 100%;
	min-height: 300px;
	border: 0;
	background: transparent;
	color-scheme: normal;
}

.cb-signup-frame[hidden],
.cb-signup-msg[hidden],
.cb-questions-invalid[hidden] {
	display: none;
}

/* A rejected submit (duplicate e-mail), relayed from the frame. */
.cb-signup p.cb-signup-msg,
.cb-card p.cb-signup-msg {
	grid-column: 1 / -1;
	margin: 0 0 12px;
	padding: 12px 14px;
	border: 1px solid #fecdd3;
	border-radius: calc(var(--wp--custom--radius) - 2px);
	background: #fff1f2;
	color: #881337;
	font-size: 15px;
	line-height: 1.45;
	text-align: left;
}

/* ---------- Steps after a sign-up: /vragen/ and /bedankt/ ---------- */

.cb-step {
	padding: 40px 20px 72px;
}

.cb-step h1.wp-block-heading {
	margin: 0 0 12px;
	font-size: clamp(30px, 4.5vw, 44px);
	letter-spacing: -0.5px;
	line-height: 1.1;
}

.cb-step .cb-lead {
	color: var(--wp--preset--color--muted);
	font-size: 18px;
}

.cb-progress {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	color: var(--wp--preset--color--muted);
	font-size: 14px;
	font-weight: 600;
}

.cb-progress .cb-done {
	padding: 4px 12px;
	border-radius: 99px;
	background: #ecfccb;
	color: #3f6212;
}

.cb-progress .cb-now {
	padding: 4px 12px;
	border-radius: 99px;
	background: #0f172a;
	color: #ffffff;
}

.cb-card {
	margin-top: 22px;
	padding: 26px 28px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 20px;
	background: var(--wp--preset--color--surface);
	box-shadow: 0 24px 60px -30px rgba(15, 23, 42, 0.35);
}

/* The questions form ends up about 1064px tall at 1440 (taller on mobile): reserve most of that up front, so
   the page doesn't jump while the frame loads and resizes. ("Overslaan" sits above the card for the same reason.) */
.cb-card iframe[data-cb-questions] {
	min-height: 1000px;
}

.cb-card .cb-questions-invalid {
	margin: 0;
}

.cb-card .cb-questions-invalid a,
.cb-skip {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cb-skip {
	display: inline-flex;
	margin-bottom: 4px;
	gap: 6px;
	align-items: center;
	color: var(--wp--preset--color--muted);
	font-weight: 600;
}

.cb-thanks {
	text-align: center;
}

.cb-tick {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: #ecfccb;
	color: #3f6212;
}

.cb-thanks .wp-block-list.is-style-circled {
	max-width: 520px;
	margin: 26px auto 0;
	text-align: left;
}

.cb-thanks .wp-block-buttons {
	justify-content: center;
	margin-top: 28px;
}

@media (max-width: 600px) {
	.cb-card {
		padding: 18px 16px;
	}
}

/* ---------- Home (front page): neutral master brand, a chooser of the categories ---------- */

.cb-home-hero {
	padding-bottom: 72px;
}

.cb-home-hero > .wp-block-columns {
	align-items: flex-start;
}

.is-style-master .cb-eyebrow {
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

/* The chooser card in the hero; in the closing CTA only the cards, without the card around them. */
.cb-chooser {
	padding: 26px 28px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 20px;
	background: var(--wp--preset--color--surface);
	box-shadow: 0 24px 60px -30px rgba(15, 23, 42, 0.35);
	color: var(--wp--preset--color--ink);
}

.cb-chooser > h2 {
	margin: 0 0 6px;
	font-size: 26px;
	line-height: 1.15;
}

.cb-chooser > p {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 15px;
}

.cb-chooser > p.cb-chooser-other {
	margin-top: 14px;
	font-size: 14px;
}

.cb-home-cta .cb-chooser {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.seg-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 18px;
}

/* An odd number of cards: the last one (the generic category) takes the full row. */
.cb-home-hero .seg-card:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.cb-home-cta .seg-cards {
	grid-template-columns: repeat(5, 1fr);
	margin-top: 26px;
}

/* One card per category in that category's colours (--c-brand, set inline by the page markup). */
.seg-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	border: 1.5px solid var(--wp--preset--color--line);
	border-radius: 14px;
	background: #ffffff;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: border-color 0.15s, transform 0.15s;
}

.seg-card:hover,
.seg-card:focus-visible {
	border-color: var(--c-brand);
	transform: translateY(-1px);
}

.cb-home-cta .seg-card {
	border-color: transparent;
}

.seg-icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--c-brand);
	color: #ffffff;
}

.seg-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.seg-text strong {
	font-size: 17px;
	line-height: 1.3;
}

.seg-text small {
	overflow-wrap: normal;
	hyphens: auto;
	color: var(--wp--preset--color--muted);
	font-size: 12.5px;
	line-height: 1.35;
}

.seg-arrow {
	flex: none;
	margin-left: auto;
	color: var(--c-brand);
	line-height: 0;
}

.cb-home-pillars {
	padding-top: 88px;
	padding-bottom: 88px;
}

.cb-home-pillars h2.wp-block-heading {
	margin-bottom: 32px;
}

.cb-pillar-grid.is-layout-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

/* The closing CTA uses the wide width, left-aligned like the other sections. */
.cb-home-cta.is-layout-constrained > * {
	max-width: var(--wp--style--global--wide-size);
	margin-left: auto !important;
	margin-right: auto !important;
}

.cb-pillar-grid .cb-feature {
	gap: 18px;
	padding: 18px 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.cb-picon {
	display: grid;
	flex: none;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--soft);
	color: var(--wp--preset--color--brand);
}

.cb-home-cta > p {
	max-width: 560px;
	opacity: 0.9;
}

@media (max-width: 960px) {
	.cb-chooser {
		padding: 18px 16px;
	}

	.seg-cards,
	.cb-home-cta .seg-cards {
		grid-template-columns: 1fr;
	}

	.cb-pillar-grid.is-layout-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Contact page ---------- */

.cb-contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 24px;
	align-items: start;
	margin-top: 22px;
}

.cb-contact-grid .cb-card {
	margin-top: 0;
}

.cb-contact-info {
	display: grid;
	gap: 14px;
	padding: 22px 24px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 20px;
	background: var(--wp--preset--color--surface);
	font-size: 15px;
}

.cb-contact-info p {
	margin: 0;
}

.cb-contact-info strong {
	display: block;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.cb-contact-info a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cb-contact-sent {
	margin: 0;
	padding: 14px 16px;
	border-radius: 12px;
	background: #ecfccb;
	color: #3f6212;
	font-weight: 600;
}

.cb-contact-sent[hidden] {
	display: none;
}

@media (max-width: 760px) {
	.cb-contact-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Installatie: blueprint grid, row-house street, hazard stripe ---------- */

.is-style-installatie .cb-hero {
	padding-bottom: 150px;
	background-image: repeating-linear-gradient(-45deg, var(--wp--preset--color--cta) 0 18px, #1a1206 18px 36px);
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: 100% 14px;
	--cb-check: var(--wp--preset--color--accent);
}

.is-style-installatie .cb-hero::before {
	content: "";
	inset: 0;
	background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 32px 32px;
	-webkit-mask-image: linear-gradient(100deg, transparent 20%, #000 75%);
	mask-image: linear-gradient(100deg, transparent 20%, #000 75%);
}

.is-style-installatie .cb-hero::after {
	content: "";
	left: 0;
	right: 0;
	bottom: 14px;
	height: 112px;
	background: url(assets/img/street.svg) center bottom / contain no-repeat;
}

.is-style-installatie .cb-eyebrow {
	background: rgba(255, 255, 255, 0.1);
	color: var(--wp--preset--color--hero-ink);
}

.is-style-installatie .cb-cta {
	background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 32px 32px;
}

/* ---------- Salons: soft blobs, round shapes, serif italics ---------- */

.is-style-salons .cb-hero::before {
	content: "";
	top: -140px;
	right: -120px;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #f6c9cf, #f0b2bc 60%, transparent 70%);
	opacity: 0.75;
	filter: blur(2px);
}

.is-style-salons .cb-hero::after {
	content: "";
	inset: 0;
	background-image: radial-gradient(circle, #efd9b8, transparent 70%), radial-gradient(circle, #f3d5dd, transparent 70%);
	background-position: right 470px bottom -80px, left -60px top 80px;
	background-repeat: no-repeat;
	background-size: 260px 260px, 180px 180px;
	filter: blur(2px);
}

.is-style-salons .cb-eyebrow,
.is-style-schoonmaak .cb-eyebrow,
.is-style-mkb .cb-eyebrow {
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
}

.is-style-salons .cb-cta {
	background-image: radial-gradient(circle at 85% 20%, #8c3a74, var(--wp--preset--color--brand) 60%);
}

.is-style-salons .cb-cta h2.wp-block-heading {
	font-style: italic;
}

.is-style-salons .cb-cta .cb-signup button {
	background: #ffffff;
	color: var(--wp--preset--color--brand);
}

/* ---------- Schoonmaak: a facade of windows, a few freshly cleaned ---------- */

.is-style-schoonmaak .cb-hero::before {
	content: "";
	top: -30px;
	right: -40px;
	width: 620px;
	height: 660px;
	background: url(assets/img/facade.svg) 0 0 / 100% 100% no-repeat;
	opacity: 0.9;
	-webkit-mask-image: linear-gradient(200deg, #000 30%, transparent 85%);
	mask-image: linear-gradient(200deg, #000 30%, transparent 85%);
}

.is-style-schoonmaak .cb-cta {
	background-image: linear-gradient(120deg, #0c4a6e, var(--wp--preset--color--brand) 60%);
}

/* ---------- Garages: dark asphalt, yellow road markings, a faint tyre tread, condensed headlines ---------- */

.is-style-garages .cb-hero {
	padding-bottom: 110px;
	background-image: repeating-linear-gradient(90deg, var(--wp--preset--color--accent) 0 60px, transparent 60px 110px), linear-gradient(#27272a, #27272a), linear-gradient(#3f3f46, #3f3f46);
	background-position: left bottom 29px, left bottom, left bottom 64px;
	background-repeat: repeat-x, no-repeat, no-repeat;
	background-size: 110px 6px, 100% 64px, 100% 3px;
	--cb-check: var(--wp--preset--color--accent);
}

.is-style-garages .cb-hero::before {
	content: "";
	top: 0;
	right: 0;
	bottom: 67px;
	width: 55%;
	background: repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.045) 0 14px, transparent 14px 28px), repeating-linear-gradient(-60deg, rgba(255, 255, 255, 0.045) 0 14px, transparent 14px 28px);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
	mask-image: linear-gradient(90deg, transparent, #000 60%);
}

.is-style-garages .cb-eyebrow {
	background: rgba(255, 255, 255, 0.1);
	color: var(--wp--preset--color--hero-ink);
}

.is-style-garages :is(h1, h2, h3, summary) {
	font-weight: 600;
	letter-spacing: 0.2px;
}

.is-style-garages h1.wp-block-heading {
	font-weight: 700;
	text-transform: uppercase;
}

.is-style-garages .is-style-steps > .wp-block-column::before {
	background: var(--wp--preset--color--cta);
	border-radius: var(--wp--custom--radius);
}

.is-style-garages .cb-cta {
	background-color: #18181b;
	background-image: repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.03) 0 14px, transparent 14px 28px);
}

/* ---------- MKB (the generic category): a dot grid and a calm disc ---------- */

.is-style-mkb .cb-hero::before {
	content: "";
	inset: 0;
	background-image: radial-gradient(rgba(16, 32, 29, 0.12) 1px, transparent 1px);
	background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(90deg, #000, transparent 60%);
	mask-image: linear-gradient(90deg, #000, transparent 60%);
}

.is-style-mkb .cb-hero::after {
	content: "";
	top: -120px;
	right: -160px;
	width: 760px;
	height: 760px;
	border-radius: 50%;
	background: radial-gradient(circle, #ccfbf1 0, #e6f7f3 55%, transparent 70%);
}

.is-style-mkb .cb-cta {
	background-image: linear-gradient(120deg, #0b5c55, var(--wp--preset--color--brand) 60%);
}

/* ---------- Narrow desktop: the five category pills leave no room for the page links ---------- */

@media (max-width: 1200px) {
	.cb-top .wp-block-navigation.cb-links {
		display: none;
	}

	.cb-top .wp-block-buttons {
		flex: none;
		margin-left: auto;
	}
}

/* ---------- Mobile: one column, form before the phone, nothing wider than the screen ---------- */

@media (max-width: 960px) {
	html body {
		font-size: 16px;
	}

	.wp-block-group.cb-urgency {
		font-size: 13px;
	}

	.cb-urgency .cb-long {
		display: none;
	}

	.cb-top .cb-top-row {
		min-height: 60px;
		gap: 12px;
	}

	.cb-top .wp-block-navigation.cb-segs,
	.cb-top .wp-block-navigation.cb-links {
		display: none;
	}

	.cb-top .wp-block-buttons {
		margin-left: auto;
	}

	.cb-top .wp-block-button__link {
		padding: 10px 14px;
		font-size: 14px;
	}

	.cb-logo p {
		font-size: 18px;
	}

	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap !important;
	}

	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}

	.cb-hero {
		padding-top: 28px;
		padding-bottom: 48px;
	}

	:is(.cb-hero, .cb-features, .cb-cta) .wp-block-columns {
		gap: 36px;
	}

	.cb-hero .cb-lead {
		font-size: 17px;
	}

	/* The whole image (badges included) across the screen width. */
	.cb-hero .cb-phone {
		margin: 0;
	}

	.cb-hero .cb-phone img {
		width: min(100vw, 738px);
		height: auto;
		margin-left: calc(50% - min(50vw, 369px));
	}

	.cb-signup {
		grid-template-columns: 1fr;
		padding: 18px;
	}

	.cb-signup label,
	.cb-signup input {
		grid-row: auto;
	}

	.cb-trades .wp-block-group {
		flex-direction: column;
		gap: 10px;
	}

	.cb-trades ul {
		justify-content: center;
		font-size: 17px;
	}

	.cb-trades li + li::before {
		margin: 0 10px;
	}

	:is(.cb-features, .cb-how, .cb-faq),
	.cb-cta {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.cb-pain {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.cb-pain .cb-pains {
		grid-template-columns: 1fr;
	}

	.cb-pain .cb-bridge {
		font-size: 20px;
	}

	.is-style-steps > .wp-block-column:not(:last-child)::after {
		display: none;
	}

	.cb-how .cb-how-cta {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.cb-how-cta .wp-block-buttons,
	.cb-how-cta .wp-block-button {
		width: 100%;
	}

	.cb-how-cta .wp-block-button__link {
		width: 100%;
	}

	.cb-faq .cb-faq-grid {
		grid-template-columns: 1fr;
	}

	.cb-faq .cb-people {
		flex-direction: column;
		text-align: center;
	}

	.cb-people .wp-block-buttons {
		margin: 0;
		justify-content: center;
	}

	.cb-footer .cb-footer-row {
		flex-direction: column;
		text-align: center;
	}
}