/*
 * cm.css — Catermonkey clean-page styles
 *
 * Minimal, dependency-free CSS for new (post-Divi) pages built via
 * site/_templates/clean-page.html. Brand values from docs/branding.md.
 *
 * Only loaded by pages that opt in (via the cm-page body class). The
 * surrounding nav + footer (still Divi-rendered) keep their own styles.
 *
 * Class prefix: cm- (Catermonkey). Don't mix with et_pb_ ordinal classes.
 */

:root {
  /* --cm-accent was #2ea3f2 (Divi-era blue). The blue is from the legacy
     Divi palette and was never really part of the Catermonkey brand —
     dropped in favour of #31757d, the medium teal already used as the
     section-heading color on /en/solutions/sales/ etc. Sits naturally
     between --cm-text (very dark teal) and --cm-bg-soft (mint). */
  --cm-accent:    #31757d;
  --cm-text:      #154c52;
  --cm-muted:     #6b7a7c;
  --cm-border:    #bbbbbb;
  --cm-bg-soft:   #e8f1ec;
  --cm-bg:        #ffffff;
  --cm-radius:    8px;
  --cm-content-w: 720px;
}

/* --- Page container ------------------------------------------------------ */

main.cm-page {
  max-width: var(--cm-content-w);
  margin: 0 auto;
  padding: 64px 24px 96px;
  color: var(--cm-text);
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

/* Feature deep-dive pages get a wider container so grids of cards
   (Sections in detail, Explore more) have room to breathe. The
   typographic body sections are constrained to a narrower reading
   measure inside the wider article — see .cm-feature-hero/body etc.
   below. */
main.cm-page.cm-feature {
  max-width: 960px;
}

/* --- Prose --------------------------------------------------------------- */

.cm-prose h1,
.cm-prose h2,
.cm-prose h3 {
  color: var(--cm-text);
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  margin: 1.6em 0 0.6em;
}
.cm-prose h1 { font-size: 40px; margin-top: 0; }
.cm-prose h2 { font-size: 28px; }
.cm-prose h3 { font-size: 22px; }

/* Blog posts: heading margins in rem so they don't inflate with font-size */
.cm-post .cm-prose h2,
.cm-post .cm-prose h3 { margin: 1.4rem 0 0.4rem; }

.cm-prose p { margin: 0 0 1.2em; }
.cm-prose a { color: var(--cm-accent); text-decoration: underline; text-underline-offset: 3px; }
.cm-prose a:hover { text-decoration: none; }

.cm-prose ul, .cm-prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
/* Restore list markers — a site-wide Divi reset strips them globally. */
.cm-prose ul { list-style: disc; }
.cm-prose ol { list-style: decimal; }
.cm-prose li { margin: 0.3em 0; list-style: inherit; }
.cm-prose li::marker { color: var(--cm-accent); }

.cm-intro { font-size: 19px; color: var(--cm-text); margin-bottom: 2em; }

/* Inline content images in prose (responsive, rounded). */
.cm-prose img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--cm-radius);
  margin: 0.5em 0 1.8em;
}

/* Compact supporting photo: floats beside the text instead of a full-width
   banner. Falls back to a centered block on narrow screens. */
.cm-prose img.cm-prose__figure {
  float: right;
  width: 360px;
  max-width: 42%;
  margin: 0.4em 0 1.4em 2.2em;   /* clear gap from the wrapping text on the left */
}
.cm-feature .cm-prose h2 { clear: both; }
@media (max-width: 700px) {
  .cm-prose img.cm-prose__figure { float: none; width: auto; max-width: 100%; margin: 0.5em 0 1.6em; }
}

/* Tighter sub-section rhythm on persona/solution clean pages (h3 + p stacks):
   one blank line between sections instead of two. Scoped so blog/FAQ prose
   keep their looser default. */
.cm-feature .cm-prose h3 { margin-top: 0.7em; }

/* --- Tables in post content -------------------------------------------- */
/* Applies to both clean (.cm-prose) and legacy Divi posts (.et_pb_text_inner,
   .et_pb_post_content). Generic styling — no Divi class collisions. */

.cm-prose table,
.et_pb_text_inner table,
.et_pb_post_content table {
  width: 100%;
  margin: 1.5em 0;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
  display: block;
  overflow-x: auto;     /* horizontal scroll on narrow viewports */
}

.cm-prose table th,
.cm-prose table td,
.et_pb_text_inner table th,
.et_pb_text_inner table td,
.et_pb_post_content table th,
.et_pb_post_content table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--cm-border);
}

.cm-prose table th,
.et_pb_text_inner table th,
.et_pb_post_content table th {
  font-weight: 700;
  color: var(--cm-text);
  border-bottom: 2px solid var(--cm-text);
  background: transparent;
}

.cm-prose table tbody tr:last-child td,
.et_pb_text_inner table tbody tr:last-child td,
.et_pb_post_content table tbody tr:last-child td {
  border-bottom: none;
}

/* --- Components ---------------------------------------------------------- */

.cm-cta {
  display: inline-block;
  padding: 14px 36px;
  background: #fdbf13;                /* brand yellow — matches the site CTA */
  color: #154c52 !important;
  font-weight: 700;
  text-decoration: none !important;   /* beats the more-specific .cm-prose a underline */
  border-radius: 999px;
  transition: filter 0.2s ease;
}
.cm-cta:hover { filter: brightness(0.94); text-decoration: none !important; }

/* Standalone CTA row — centered, with breathing room above. */
.cm-cta-row { text-align: center; margin: 2.5em 0 0.5em; }

.cm-card {
  background: var(--cm-bg);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius);
  padding: 24px;
  margin: 1em 0;
}

.cm-back {
  display: inline-block;
  margin-bottom: 1.5em;
  color: var(--cm-text);
  text-decoration: none;
  font-size: 14px;
}
.cm-back:hover { text-decoration: underline; }
.cm-back::before { content: "← "; }

/* --- Author bio (blog posts) -------------------------------------------- */
/* Stamped by `bb apply-authors` from data/authors.edn into a fenced
   <!-- cm:author --> block before the footer include. E-E-A-T signal.
   The wrap constrains width on both clean (cm-prose) and legacy Divi posts. */
.cm-author-wrap {
  max-width: var(--cm-content-w);
  margin: 2.5em auto 3em;
  padding: 0 24px;
}
.cm-author {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  margin: 0;
  padding: 28px;
  background: #fff;
  border: 1px solid rgba(21, 76, 82, 0.08);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(21, 76, 82, 0.04), 0 10px 30px rgba(21, 76, 82, 0.07);
}
.cm-author__photo {
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--cm-bg-soft);
}
.cm-author__body { margin: 0; min-width: 0; }
.cm-author__body > p { margin: 0; }
.cm-author__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cm-accent);
  margin-bottom: 3px !important;
}
.cm-author__name { font-size: 20px; font-weight: 700; color: var(--cm-text); line-height: 1.2; }
.cm-author__role { font-size: 14px; color: var(--cm-muted); margin-top: 3px !important; }
.cm-author__bio { font-size: 15px; color: var(--cm-text); margin-top: 12px !important; }
.cm-author__linkedin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 8px 16px 8px 13px;
  background: #0a66c2;
  color: #fff !important;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.15s ease, transform 0.15s ease;
}
.cm-author__linkedin:hover { background: #004182; transform: translateY(-1px); }
.cm-author__li-icon { width: 17px; height: 17px; fill: currentColor; flex: 0 0 auto; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 768px) {
  main.cm-page { padding: 40px 20px 64px; }
  .cm-prose h1 { font-size: 32px; }
  .cm-prose h2 { font-size: 24px; }
  .cm-intro    { font-size: 17px; }
}
@media (max-width: 480px) {
  main.cm-page { padding: 32px 16px 48px; }
  .cm-prose h1 { font-size: 28px; }
  .cm-author { flex-direction: column; gap: 16px; padding: 22px; }
}

/* --- Feature deep-dive pages -------------------------------------------- */
/* Generated by `bb build-features` from data/feature-index/. Used at
   /<locale>/features/<slug>/. The card grid is also used on the parent
   solutions pages to link into these features. */

.cm-feature__article { max-width: 100%; }

/* Reading-width constraint for the long-form sections inside the wider
   article. Pinned to the LEFT of the article (not centered) so the H1,
   subheadline, lede, and body all share the same left edge as the
   breadcrumb / persona cards / grids — visually aligned with the rest
   of Catermonkey's brand. Grids (.cm-feature-related, .cm-feature-personas)
   span the full article width. */
.cm-feature-hero,
.cm-feature-bullets,
.cm-feature-body,
.cm-feature-proof {
  max-width: var(--cm-content-w);
  margin-left: 0;
  margin-right: auto;
}

.cm-feature-breadcrumb {
  font-size: 14px;
  color: var(--cm-muted);
  margin-bottom: 1.5em;
}
.cm-feature-breadcrumb a { color: var(--cm-muted); text-decoration: none; }
.cm-feature-breadcrumb a:hover { color: var(--cm-accent); text-decoration: underline; }
.cm-feature-breadcrumb__sep { margin: 0 0.5em; opacity: 0.6; }

.cm-feature-hero { margin-bottom: 2.5em; }
.cm-feature-eyebrow {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cm-accent);
  margin: 0 0 0.5em;
}
.cm-feature-hero h1 { margin-top: 0; }
.cm-feature-subheadline {
  font-size: 22px;
  line-height: 1.4;
  color: var(--cm-text);
  margin: 0.4em 0 1em;
  font-weight: 500;
}
.cm-feature-lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--cm-text);
  margin-bottom: 0;
}
/* Feature screenshot. Sits below the hero prose so the headline stays the
   first thing read. The reserved aspect-ratio keeps the page from jumping as
   the lazy image arrives — the shots are app screenshots, so landscape. */
.cm-feature-shot {
  margin: 2em 0 0;
}
.cm-feature-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
  border: 1px solid var(--cm-rule, rgba(0, 0, 0, 0.1));
  border-radius: 8px;
}

.cm-feature-bullets {
  background: var(--cm-bg-soft);
  border-radius: var(--cm-radius);
  padding: 24px 28px 24px 32px;
  margin: 2em 0;
}
.cm-feature-bullets ul {
  margin: 0;
  padding-left: 1.2em;
  list-style: disc !important;     /* Divi reset stripped bullets globally */
}
.cm-feature-bullets li {
  margin: 0.5em 0;
  padding-left: 0.2em;
  list-style: disc !important;
}
.cm-feature-bullets li::marker {
  color: var(--cm-accent);          /* brand-blue dot for a touch of color */
}

.cm-feature-body { margin: 2em 0; }
.cm-feature-body h2 { margin-top: 1.6em; }
.cm-feature-body p:first-child { margin-top: 0; }

.cm-feature-personas {
  margin: 3em 0 2em;
  padding-top: 2em;
  border-top: 1px solid var(--cm-border);
}
.cm-feature-personas h2 { margin-bottom: 0.8em; }
.cm-persona-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.cm-persona-card {
  background: var(--cm-bg);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius);
  padding: 18px 20px;
}
.cm-persona-card h3 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cm-accent);
  margin: 0 0 0.5em;
  padding-bottom: 0;
}
.cm-persona-card p { margin: 0; font-size: 15px; line-height: 1.55; }

.cm-feature-proof {
  margin: 2em 0;
  padding: 20px 24px;
  border-left: 4px solid var(--cm-accent);
  background: var(--cm-bg-soft);
  border-radius: 0 var(--cm-radius) var(--cm-radius) 0;
}
.cm-feature-proof h2 { margin-top: 0; font-size: 18px; }
.cm-feature-proof ul { margin: 0; padding-left: 1.2em; }
.cm-feature-proof li { margin: 0.4em 0; }

.cm-feature-related { margin: 3em 0 2em; padding-top: 2em; border-top: 1px solid var(--cm-border); }
.cm-feature-related h2 { margin-bottom: 0.8em; }

/* Card grid — FAQ-style boxes. Used on /<locale>/features/<slug>/ Related
   sections AND inside solutions-page enrichment (sibling of et_pb_text_inner,
   wrapped in .cm-feature-section so we can pad/space it like a Divi block).
   Selectors are written to win against Divi's `.et_pb_text_inner ul/li/a`
   defaults; we never inherit Divi list/link styling. */
.cm-feature-section {
  width: 80%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 0 24px;
}
/* Inside the standalone /<locale>/features/ pages the article already
   provides the width container, so .cm-feature-section just fills it. */
.cm-feature__article .cm-feature-section {
  width: 100%;
  max-width: none;
  padding: 0;
}

/* Full-bleed soft-green band wrapping the feature grid on clean solution
   pages (mirrors the Divi solution pages' "more features" section). */
.cm-feature-band {
  background: var(--cm-bg-soft);
  width: 100vw;
  margin: 2.8em 0 2em;
  margin-left: calc(50% - 50vw);
  padding: 48px 0 56px;
}
.cm-feature-band > h2 { text-align: center; margin: 0 auto 0.4em; }
/* When the green band is the last thing on the page, run it flush into the
   pre-footer so no white strip shows between them. */
main.cm-page:has(> .cm-prose > .cm-feature-band:last-child) { padding-bottom: 0; }
.cm-prose > .cm-feature-band:last-child { margin-bottom: 0; }
/* Drop the pre-footer's top gap so its sawtooth bites into the green band
   above — the teeth's gaps then show green instead of a white strip. */
main.cm-page:has(> .cm-prose > .cm-feature-band:last-child) + .cm-pre-footer { margin-top: 0; }
ul.cm-feature-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}
ul.cm-feature-card-grid li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
/* Higher specificity to override Divi's global `a { color: #2ea3f2 }`. */
ul.cm-feature-card-grid li a,
ul.cm-feature-card-grid li a:hover,
ul.cm-feature-card-grid li a:visited,
ul.cm-feature-card-grid li a:focus {
  display: block;
  background: var(--cm-bg);
  border-radius: 12px;
  padding: 22px 26px;
  text-decoration: none !important;
  color: var(--cm-text) !important;
  box-shadow: 0 2px 8px rgba(21, 76, 82, 0.06), 0 0 0 1px rgba(21, 76, 82, 0.04);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
  height: 100%;
}
ul.cm-feature-card-grid li a:hover {
  box-shadow: 0 6px 20px rgba(21, 76, 82, 0.12), 0 0 0 1px var(--cm-accent);
  transform: translateY(-2px);
}
ul.cm-feature-card-grid li a strong {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--cm-text) !important;
  margin: 0 0 0.4em;
  line-height: 1.35;
}
ul.cm-feature-card-grid li a span {
  display: block;
  font-size: 14px;
  color: var(--cm-muted) !important;
  line-height: 1.55;
  font-weight: 400;
}

.cm-feature-cta {
  margin: 2.5em 0 1em;
  text-align: center;
  padding: 2em 0;
  border-top: 1px solid var(--cm-border);
}

@media (max-width: 980px) {
  .cm-persona-grid             { grid-template-columns: repeat(2, 1fr); }
  ul.cm-feature-card-grid      { grid-template-columns: repeat(2, 1fr); }
  .cm-feature-section          { width: 90%; }
}
@media (max-width: 768px) {
  .cm-feature-subheadline      { font-size: 19px; }
  .cm-feature-lede             { font-size: 17px; }
  .cm-feature-bullets          { padding: 18px 22px; }
  .cm-persona-grid             { grid-template-columns: 1fr; }
  ul.cm-feature-card-grid      { grid-template-columns: 1fr; gap: 14px; }
  ul.cm-feature-card-grid li a { padding: 18px 20px; }
}
@media (max-width: 480px) {
  .cm-feature-subheadline      { font-size: 17px; }
}

/* Customer case artwork images */
figure.wp-block-image {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
}
figure.wp-block-image img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

/* --- FAQ accordion (cm-faq) --------------------------------------------- *
 * Dependency-free, JS-free Q&A using native <details>/<summary>.
 * Reusable on any clean (cm-page) page. Pair with FAQPage JSON-LD for SEO.
 *
 *   <section class="cm-faq">
 *     <h2>…</h2>
 *     <details class="cm-faq__item"><summary>Q?</summary><div><p>A.</p></div></details>
 *   </section>
 */
.cm-faq {
  margin: 3em 0 1em;
}
.cm-faq > h2 {
  margin-bottom: 0.6em;
}
.cm-faq__item {
  border-bottom: 1px solid var(--cm-border);
}
.cm-faq__item:first-of-type {
  border-top: 1px solid var(--cm-border);
}
.cm-faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  font-weight: 600;
  color: var(--cm-text);
  line-height: 1.45;
}
.cm-faq__item summary::-webkit-details-marker { display: none; }
/* +/− marker on the right */
.cm-faq__item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  color: var(--cm-accent);
  transition: transform 0.15s ease;
}
.cm-faq__item[open] summary::after {
  content: "\2212"; /* minus */
}
.cm-faq__item summary:hover { color: var(--cm-accent); }
.cm-faq__item summary:focus-visible {
  outline: 2px solid var(--cm-accent);
  outline-offset: 3px;
}
.cm-faq__item > div {
  padding: 0 0 18px;
  color: var(--cm-text);
}
.cm-faq__item > div > :first-child { margin-top: 0; }
.cm-faq__item > div > :last-child  { margin-bottom: 0; }

/* --- FAQ hub (cm-faq-hub) ----------------------------------------------- *
 * Single-column, card-styled accordion for the FAQ index/hub page.
 * Each <details> card shows the question; expanding reveals the teaser
 * plus a "Read more" pill linking to the full answer (detail page).
 * Native <details>/<summary> — no JS.
 *
 *   <div class="cm-faq-hub">
 *     <details class="cm-faq-hub__item">
 *       <summary>Q?</summary>
 *       <div class="cm-faq-hub__body"><p>Teaser…</p>
 *         <a class="cm-cta cm-faq-hub__more" href="…/slug/">Read more</a></div>
 *     </details>
 *   </div>
 */
.cm-faq-hub {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 2em 0 1em;
}
.cm-faq-hub__item {
  background: var(--cm-bg);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(21, 76, 82, 0.06), 0 0 0 1px rgba(21, 76, 82, 0.08);
  transition: box-shadow 0.18s ease;
}
.cm-faq-hub__item:hover,
.cm-faq-hub__item[open] {
  box-shadow: 0 6px 20px rgba(21, 76, 82, 0.12), 0 0 0 1px var(--cm-accent);
}
.cm-faq-hub__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 26px;
  font-size: 17px;
  font-weight: 700;
  color: var(--cm-text);
  line-height: 1.4;
}
.cm-faq-hub__item summary::-webkit-details-marker { display: none; }
.cm-faq-hub__item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  color: var(--cm-accent);
}
.cm-faq-hub__item[open] summary::after { content: "\2212"; } /* minus */
.cm-faq-hub__item summary:hover { color: var(--cm-accent); }
.cm-faq-hub__item summary:focus-visible {
  outline: 2px solid var(--cm-accent);
  outline-offset: 3px;
}
.cm-faq-hub__body {
  padding: 0 26px 24px;
  color: var(--cm-muted);
  line-height: 1.6;
}
.cm-faq-hub__body > :first-child { margin-top: 0; }
.cm-faq-hub__body .cm-faq-hub__more {
  margin-top: 0.9em;
  font-size: 14px;
  padding: 9px 22px;
  text-decoration: none;
}
@media (max-width: 768px) {
  .cm-faq-hub__item summary { padding: 18px 20px; font-size: 16px; }
  .cm-faq-hub__body { padding: 0 20px 20px; }
}

/* "Meest gelezen" featured row on /<loc>/blog/ — rendered by build-blog
   above the regular paginated grid on page 1. Posts are curated via
   data/featured-<loc>.edn (top N most recent). */
/* Bottom breathing room below the blog cards on /<loc>/blog/ — without this
   the cards butt up against the footer's zigzag divider on locales with no
   pagination row (PT/IT/etc.). All blog listings share page-id-47. */
body.page-id-47 .et_pb_section_1 {
  padding-bottom: 60px;
}

/* Press index (page-id-53) — Divi's per-card inline CSS only covers
   .et_pb_image_0…_6, ._heading_1…_7, etc. The two empty placeholder
   columns (8 and 9) had no visual treatment until they were populated.
   These rules give cards 8-9 the same rounded corners, shadow, padding
   and button styling as cards 0-6.

   For "newest first" visual order: the row is converted to CSS Grid by
   listings.css. We pin column_8 to grid cell (row 1, col 1) and column_9
   to (row 1, col 2). Auto-placement then drops the existing column_1
   into the remaining (row 1, col 3) slot, and the rest flow naturally
   into rows 2-3. Scoped to min-width: 481px so the 1-column mobile grid
   (where `grid-column: 2` would overflow) stays in DOM order. */
body.page-id-53 .et_pb_row_1 .et_pb_column_8 { grid-row: 1; grid-column: 1; }
body.page-id-53 .et_pb_row_1 .et_pb_column_9 { grid-row: 1; grid-column: 2; }
body.page-id-53 .et_pb_group_7,
body.page-id-53 .et_pb_group_8 {
  border-radius: 15px;
  box-shadow: 0px 12px 18px -6px rgba(0,0,0,0.3);
  overflow: hidden;
}
body.page-id-53 .et_pb_image_7,
body.page-id-53 .et_pb_image_8 {
  padding: 10px 10px 0;
}
body.page-id-53 .et_pb_image_7 .et_pb_image_wrap,
body.page-id-53 .et_pb_image_8 .et_pb_image_wrap {
  border-radius: 10px;
  overflow: hidden;
}
body.page-id-53 .et_pb_image_7 .et_pb_image_wrap img,
body.page-id-53 .et_pb_image_8 .et_pb_image_wrap img {
  border-radius: inherit;
}

/* Force ALL press-card thumbnails to a uniform 3:2 aspect-ratio box and
   cover-crop the image. Without this, the existing cards (image_0..6) use
   their srcset+sizes picks which render at different visible heights from
   the new cards' fixed src. Aspect-ratio container removes any variation. */
body.page-id-53 .et_pb_image_wrap {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
body.page-id-53 .et_pb_image_wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.page-id-53 .et_pb_heading_8,
body.page-id-53 .et_pb_heading_9 {
  padding: 10px 10px 0 !important;
}
body.page-id-53 .et_pb_heading_8 .et_pb_heading_container h2,
body.page-id-53 .et_pb_heading_9 .et_pb_heading_container h2 {
  font-size: 20px;
}
body.page-id-53 .et_pb_heading_8 .et_pb_heading_container h2 a,
body.page-id-53 .et_pb_heading_9 .et_pb_heading_container h2 a {
  color: inherit;
  text-decoration: none;
}
body.page-id-53 .et_pb_text_8,
body.page-id-53 .et_pb_text_9 {
  margin-bottom: 0 !important;
  padding: 0 10px !important;
  text-align: start;
}
body.page-id-53 .et_pb_button_7_wrapper,
body.page-id-53 .et_pb_button_8_wrapper {
  margin-top: 0 !important;
  padding: 10px;
}
body.page-id-53 .et_pb_button_7,
body.page-id-53 .et_pb_button_8 {
  font-style: italic;
  color: var(--gcid-heading-color) !important;
  font-size: 15px !important;
  border-radius: 0;
  border-width: 0;
  background-color: transparent;
}
body.page-id-53 .et_pb_button_7:hover,
body.page-id-53 .et_pb_button_8:hover {
  background-color: transparent;
  text-decoration: underline;
}
body.page-id-53 .et_pb_button_7:before,
body.page-id-53 .et_pb_button_7:after,
body.page-id-53 .et_pb_button_8:before,
body.page-id-53 .et_pb_button_8:after {
  display: none !important;
}

.cm-featured-section {
  background-color: #f3f7f4;
  padding: 36px 0 44px;
  margin-bottom: 30px;
}
.cm-featured-intro {
  margin-bottom: 24px;
}
/* Higher specificity needed — Divi cascade left-aligns text inside
   et_pb_column children by default. */
.cm-featured-section .cm-featured-heading {
  font-size: 26px;
  color: #154c52;
  margin: 0 0 8px;
  padding: 0;
  font-weight: 700;
  text-align: center;
}
.cm-featured-section .cm-featured-subhead {
  color: #6c8a92;
  font-size: 15px;
  margin: 0;
  padding: 0;
  line-height: 1.5;
  text-align: center;
}
@media (max-width: 768px) {
  .cm-featured-section .cm-featured-heading { font-size: 22px; }
  .cm-featured-section { padding: 28px 0 32px; }
}

/* FAQ accordion (cm-faq-item) — generated from seoaic-faq blocks by the
   build pipeline. Each item is collapsed by default; click to expand.
   No JS; uses native <details>/<summary>. Visual: soft container, thin
   dividers between items, no card boxes. */
.wp-block-seoaic-faq-block {
  background: #f3f6f8;
  border-radius: 12px;
  padding: 8px 28px;
  margin: 28px 0;
}
.seoaic-faq-section-title {
  padding: 18px 0 4px;
  margin: 0;
  font-size: 22px;
  color: #154c52;
}
.cm-faq-item {
  border: none;
  border-bottom: 1px solid #e3e9ec;
  border-radius: 0;
  margin: 0;
  background: transparent;
}
.cm-faq-item:last-child {
  border-bottom: none;
}
.cm-faq-item > summary {
  display: block;             /* overrides the browser-default list-item, kills inherited bullet */
  cursor: pointer;
  padding: 22px 44px 22px 0;
  list-style: none;
  position: relative;
  user-select: none;
}
.cm-faq-item > summary::-webkit-details-marker { display: none; }
.cm-faq-item > summary::marker { content: ""; }
.cm-faq-item > summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid #6c8a92;
  border-bottom: 2px solid #6c8a92;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.cm-faq-item[open] > summary::after {
  transform: translateY(-30%) rotate(-135deg);
  border-color: #154c52;
}
.cm-faq-item > summary > h3 {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: 17px;
  font-weight: 600;
  color: #154c52;
  line-height: 1.5;
}
.cm-faq-item[open] > summary > h3 {
  color: #2ea3f2;
}
.cm-faq-item > p {
  padding: 0 0 22px;
  margin: 0;
  color: #444;
  line-height: 1.7;
}

/* --- Media page (/nl/media/) filter bar ---------------------------------- */
.cm-media-filter { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1.5rem 0 2rem; }
.cm-media-filter__btn {
  padding: .45rem 1.1rem; border: 1px solid #bbb; border-radius: 999px;
  background: #fff; color: #154c52; font: inherit; font-weight: 600;
  cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.cm-media-filter__btn:hover { border-color: #2ea3f2; color: #2ea3f2; }
.cm-media-filter__btn.is-active { background: #2ea3f2; border-color: #2ea3f2; color: #fff; }
.cm-media-item + .cm-media-item { margin-top: 2.5rem; }

/* --- Customer-case index: search + label filter -------------------------- */
.cm-case-filter { margin: 1.5rem 0 2rem; text-align: center; }
.cm-case-search {
  display: block; width: 100%; max-width: 420px; margin: 0 auto 1rem;
  padding: .6rem 1rem; font: inherit;
  border: 1px solid #bbb; border-radius: 8px; color: #154c52;
}
.cm-case-search:focus { outline: none; border-color: #2ea3f2; }
.cm-case-chips { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.cm-case-chip {
  padding: .4rem 1rem; border: 1px solid #bbb; border-radius: 999px;
  background: #fff; color: #154c52; font: inherit; font-weight: 600; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.cm-case-chip:hover { border-color: #2ea3f2; color: #2ea3f2; }
.cm-case-chip.is-active { background: #2ea3f2; border-color: #2ea3f2; color: #fff; }
.cm-case-none { margin-top: 1.5rem; color: #154c52; font-weight: 600; }

/* Case thumbnail = a square cover-cropped photo with the pull-quote (real text,
   not baked into the image) as a solid brand-teal bar BELOW it, so the quote
   never sits on someone's face. The .et_pb_image_wrap is a flex column: square
   image on top, quote bar underneath. Scoped via :has(.cm-case-quote) so it
   only touches case cards (that class lives only on the case-index pages).
   container-type makes cqw available so the bar text scales with card width.
   #fcb212 = the brand amber of the quote mark. */
.cm-case-thumb,
.et_pb_image_wrap:has(.cm-case-quote) {
  /* !important: Divi sets .et_pb_image_wrap{display:inline-block} via a
     high-specificity #et-boc rule that would otherwise win. */
  position: relative; display: flex !important; flex-direction: column;
  container-type: inline-size; width: 100%;
  overflow: hidden; border-radius: 10px;
}
.cm-case-thumb img,
.et_pb_image_wrap:has(.cm-case-quote) img {
  order: 0; flex: 0 0 auto; display: block;
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  /* Square bottom corners so the photo sits flush on the teal quote bar; the
     wrap's overflow:hidden still rounds the top. !important beats Divi's
     inherited border-radius. */
  border-radius: 0 !important;
}
/* A few cases have no photo yet and still show a wide wordmark SVG: fit it
   inside the square instead of cropping. */
.cm-case-thumb:has(img[src$=".svg"]) img,
.et_pb_image_wrap:has(.cm-case-quote):has(img[src$=".svg"]) img { object-fit: contain; }
.cm-case-quote {
  order: 1; margin: 0; max-width: none;
  background: #154c52; color: #fff; font-weight: 600;
  padding: 11px 14px; line-height: 1.3;
  font-size: clamp(11px, 3.4cqw, 15px); text-align: left;
}
/* Korte citaten opvullen tot dezelfde hoogte, zodat de thumbnails op één lijn
   eindigen en de titels eronder uitlijnen. Bewust geen line-clamp: een langer
   citaat mag doorlopen, want het zijn letterlijke woorden van de klant. */
.cm-case-grid .cm-case-quote { min-height: calc(3 * 1.3em + 1.53em); }
/* Heavy turned-comma ornament (❝, U+275D) — renders as the bold filled
   "66" amber mark of the design; the plain typographic " (U+201C) comes out
   as thin strokes in Open Sans. */
.cm-case-quote::before {
  content: "\275D"; display: block; margin-bottom: -.05em;
  color: #fcb212; font-size: 1.7em; line-height: .9;
}
/* Inserted hero photo on customer-case detail pages. Some shots are portrait
   (e.g. 1100x1650), which runs the full content width far too tall on desktop;
   cap the height and cover-crop so it reads as a hero band. */
.cm-case-photo img {
  width: 100%; max-height: 460px;
  object-fit: cover; object-position: center 20%; /* bias to top: people's faces */
}

/* --- Klantcase-overzicht (post-Divi) -------------------------------------
   Kaartenraster voor de case-indexpagina's. Verving het Divi-raster
   (et_flex_row / et_flex_column) toen die pagina's werden herbouwd. De
   filter-JS toont/verbergt op [data-labels], dus die zit op de kaart. */
.cm-case-grid {
  display: grid; gap: 28px 24px; margin: 2.5rem 0 3rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* De .cm-page-kolom is 720px voor leesbare lopende tekst. Een kaartenraster
     wil breder; breek eruit en centreer op de viewport. */
  width: min(1180px, calc(100vw - 48px));
  margin-left: 50%; transform: translateX(-50%);
}
.cm-case-card { display: flex; flex-direction: column; }
.cm-case-card a { text-decoration: none; color: inherit; }
/* Titel op twee regels vastzetten en de samenvatting op drie, zodat de kaarten
   op één lijn eindigen in plaats van te rafelen bij verschillende titellengtes. */
.cm-case-card h2 {
  font-size: 19px; line-height: 1.35; margin: 1rem 0 .5rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(2 * 1.35 * 19px);
}
.cm-case-card h2 a:hover { color: #2ea3f2; }
.cm-case-card p {
  margin: 0; font-size: 15px; line-height: 1.6; color: #4a6b6f;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 980px) { .cm-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cm-case-grid { grid-template-columns: 1fr; } }

/* "All features" carousel: make each feature card a clickable link to its
   deep-dive page, without inheriting the .desktop_functionality_glance a
   "Read more" pill style (border !important, max-width, float, radius). */
.desktop_functionality_glance a.cm-feature-card-link,
.mobile_functionality_glance a.cm-feature-card-link {
  display: block;
  border: 0 !important;
  padding: 0;
  margin: 0;
  max-width: none;
  width: auto;
  float: none;
  border-radius: 0;
  text-align: left;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* ── Trust strip: auto-scrolling grayscale logo marquee (homepage) ── */
.cm-trust {
  padding: 40px 0;
  text-align: center;
  overflow: hidden;
}
.cm-trust__label {
  margin: 0 0 22px;
  color: #154c52;
  font-weight: 700;
  font-size: 1.05rem;
}
.cm-trust__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.cm-trust__track {
  display: flex;
  align-items: center;
  gap: 44px;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: cm-trust-scroll 70s linear infinite;
}
.cm-trust__viewport:hover .cm-trust__track { animation-play-state: paused; }
.cm-trust__item { flex: 0 0 auto; }
.cm-trust__item img {
  display: block;
  height: 48px;
  width: auto;
  max-width: 150px;
  filter: grayscale(1);
  opacity: 0.62;
  transition: opacity 0.2s ease;
}
.cm-trust__item img:hover { opacity: 1; }
@keyframes cm-trust-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 768px) {
  .cm-trust__track { gap: 32px; }
  .cm-trust__item img { height: 36px; max-width: 104px; }
}
.cm-trust--compact .cm-trust__item img { height: 38px; max-width: 110px; }
@media (max-width: 768px) {
  .cm-trust--compact .cm-trust__item img { height: 26px; max-width: 74px; }
}
.cm-trust__item img.cm-trust__item--small { max-width: 120px; }
@media (max-width: 768px) {
  .cm-trust__item img.cm-trust__item--small { max-width: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-trust__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    gap: 34px 50px;
  }
}
/* defensive: no list markers/bullets on trust-strip items */
.cm-trust__track, .cm-trust__item { list-style: none; }
.cm-trust__item::before, .cm-trust__item::after { content: none; }
.cm-trust__item::marker { content: ""; }

/* ── Success-story cards (homepage carousel) — compact, clickable ── */
.cm-story {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 230px;
  box-sizing: border-box;
  padding: 26px 24px;
  border-radius: 14px;
  background: #2f6f74;               /* lighter teal on the dark section */
  color: #fff;
  text-decoration: none;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.cm-story:hover {
  transform: translateY(-3px);
  background: #357b81;
  box-shadow: 0 10px 26px rgba(0,0,0,0.25);
}
.cm-story__qmark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 46px;
  line-height: 0.6;
  color: rgba(255,255,255,0.45);
  margin-bottom: 14px;
}
.cm-story__quote {
  margin: 0 0 20px;
  font-size: 1.02rem;
  line-height: 1.5;
  font-weight: 600;
  /* clamp long quotes so cards stay uniform */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cm-story__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.cm-story__logo {
  height: 30px;
  width: auto;
  flex: 0 0 auto;
  background: #fff;                  /* white chip keeps logos readable on teal */
  padding: 6px 9px;
  border-radius: 8px;
  box-sizing: content-box;
  filter: grayscale(1);
}
.cm-story__name {
  font-size: 0.86rem;
  font-weight: 600;
  color: #ffd27a;                    /* same warm accent as current */
  line-height: 1.25;
}

/* Homepage story carousel: reserve space below the cards so the Swiper
   nav arrows (absolute, bottom:2px in components.css) sit cleanly below
   them instead of overlapping the shorter cards. Scoped to .cm-stories
   so the taller carousels elsewhere (same mySwiper/arrow classes) are
   untouched. */
.cm-stories.swiper { padding-bottom: 70px; }
.cm-stories .swiper-buttonprev,
.cm-stories .swiper-buttonnext { bottom: 8px; }

/* ── Integrations page: clean logo grid (replaces the legacy Divi blurb grid) ── */
.cm-intg-grid {
  max-width: 1080px;
  margin: 2.5em auto 1.5em;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  list-style: none;
}
.cm-intg-grid__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius);
}
.cm-intg-grid__item img {
  max-height: 42px;
  max-width: 100%;
  width: auto;
  filter: grayscale(1);
  opacity: 0.78;
  transition: opacity 0.18s ease;
}
.cm-intg-grid__item:hover img { opacity: 1; }
@media (max-width: 480px) {
  .cm-intg-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 16px; }
  .cm-intg-grid__item { min-height: 78px; padding: 14px; }
}

/* ── Integrations: category headings + linked cards ── */
.cm-intg-cat {
  max-width: 1080px;
  margin: 1.8em auto 0.2em;
  padding: 0 24px;
  font-size: 1.05rem;
  color: var(--cm-heading, #154c52);
}
.cm-intg-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  text-decoration: none;
}
.cm-intg-card img { margin: 0; }
.cm-intg-card__name {
  font-size: 0.82rem;
  color: var(--cm-body, #154c52);
  opacity: 0.85;
  text-align: center;
  line-height: 1.2;
}
.cm-intg-grid__item:has(.cm-intg-card) { cursor: pointer; transition: border-color 0.18s ease, box-shadow 0.18s ease; }
.cm-intg-grid__item:hover:has(.cm-intg-card) { border-color: var(--cm-accent, #2ea3f2); box-shadow: 0 2px 10px rgba(46,163,242,0.12); }

/* ── Integration detail page ── */
.cm-intg-detail__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin: 0.4em 0 1.2em;
}
.cm-intg-detail__logo {
  max-height: 56px;
  max-width: 200px;
  width: auto;
}
.cm-intg-detail h1 { margin: 0; }
.cm-intg-detail h1 small {
  display: block;
  font-size: 0.5em;
  font-weight: 400;
  opacity: 0.7;
  margin-top: 4px;
}
.cm-cta--ghost {
  background: transparent;
  border: 1px solid var(--cm-accent, #2ea3f2);
  color: var(--cm-accent, #2ea3f2);
}
.cm-intg-cta {
  margin: 2em 0 1em;
  padding: 24px 28px;
  background: #f5fafe;
  border: 1px solid var(--cm-border, #ddd);
  border-radius: var(--cm-radius, 8px);
}
.cm-intg-cta h2 { margin-top: 0; }

/* ---- Fair page (/nl/beurs/, /fr/salon/) -------------------------------
   Two quote cards side by side, and the lead form the account managers
   fill in at the stand. The form is submitted by contact-form.js, which
   finds it via [data-cm-contact] and writes status into
   .forminator-response-message (hence the dual class on the status box). */
.cm-quotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 1.5em 0 1em;
}
.cm-quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 24px;
  background: var(--cm-bg-soft);
  border-radius: 14px;
}
.cm-quote blockquote {
  margin: 0;
  padding: 0 0 0 14px;
  border-left: 3px solid var(--cm-accent);  /* beats the legacy blue blockquote rule */
}
.cm-quote blockquote p { margin: 0; font-weight: 600; line-height: 1.5; }
.cm-quote figcaption { font-size: 15px; color: var(--cm-muted); line-height: 1.5; }
.cm-quote figcaption strong { color: var(--cm-text); }

.cm-form {
  margin: 1.5em 0 1em;
  padding: 28px 24px;
  background: var(--cm-bg-soft);
  border-radius: 14px;
}
.cm-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
.cm-form__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.cm-form__field label { font-size: 15px; font-weight: 600; }
.cm-form__opt { font-weight: 400; color: var(--cm-muted); }
.cm-form input[type="text"],
.cm-form input[type="email"],
.cm-form input[type="tel"],
.cm-form select,
.cm-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;                    /* 16px keeps iOS from zooming in on focus */
  color: var(--cm-text);
  background: var(--cm-bg);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius);
}
.cm-form textarea { resize: vertical; min-height: 110px; }
.cm-form input:focus-visible,
.cm-form select:focus-visible,
.cm-form textarea:focus-visible {
  outline: 2px solid var(--cm-accent);
  outline-offset: 1px;
}
.cm-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 22px;
  font-size: 15px;
}
.cm-form__consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--cm-accent);
}
.cm-form button.cm-cta { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.cm-form button.cm-cta:disabled { opacity: 0.6; cursor: default; }
.cm-form__status:empty { display: none; }
.cm-form__status {
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: var(--cm-radius);
  font-weight: 600;
  background: var(--cm-bg);
}
.cm-form__status.forminator-error { background: #fdecea; color: #8a1f11; }
.cm-form__status.forminator-success { border: 1px solid var(--cm-accent); }
.cm-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 768px) {
  .cm-quotes { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .cm-form { padding: 22px 16px; }
  .cm-form__row { grid-template-columns: 1fr; }
}