/* ===================================================================
   cut/paste — Divi custom module CSS (shared across every page)
   Loaded via the cnp-toolkit plugin (assets/css), not the theme.
   =================================================================== */

@font-face { font-family: 'Geist'; src: url('../fonts/Geist-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('../fonts/Geist-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('../fonts/Geist-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('../fonts/Geist-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('../fonts/Geist-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('../fonts/GeistMono-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('../fonts/GeistMono-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('../fonts/GeistMono-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

body, .et_pb_text_inner { font-family: 'Geist', 'Helvetica Neue', Arial, sans-serif; }

.et_pb_text_inner h1 { font-family: 'Geist', sans-serif; font-weight: 700; }
.et_pb_text_inner h2 { font-family: 'Geist', sans-serif; font-weight: 700; }
.et_pb_text_inner h3 { font-family: 'Geist', sans-serif; font-weight: 600; }
.et_pb_text_inner h4 { font-family: 'Geist', sans-serif; font-weight: 600; }

.cnp-eyebrow .et_pb_text_inner { display: inline-flex; align-items: center; gap: 8px; }
/* Base look for cnp-btn-* classes. Everywhere these ride on a Divi
   et_pb_button (which already sets its own bg/color via Divi's own
   attributes/generated CSS with higher specificity), these are harmless
   fallbacks. But plain HTML <button>/<a> elements with no Divi module behind
   them (scanbar, scanresult unlock form, monitor-card — confirmed live,
   rendered as bare unstyled browser buttons) rely on these for everything. */
.cnp-btn-inline {
  display: inline-block; border: none; border-radius: 10px; cursor: pointer;
  font-family: 'Geist', sans-serif; font-weight: 600; font-size: 15px; padding: 13px 22px;
  text-decoration: none; line-height: 1.2;
}
.cnp-btn-primary { background: #B71824; color: #FFFFFF; }
.cnp-btn-dark { background: #0B121A; color: #FFFFFF; }
.cnp-btn-ghost { background: transparent; color: #0B121A; border: 1px solid #D5D8DB; }
.cnp-btn-onaccent { background: #FFFFFF; color: #B71824; }
.cnp-btn-ghost-onaccent { background: transparent; color: #FFFFFF; border: 1px solid #EBD9D7; }
.cnp-btn-inline.cnp-btn-ml { margin-left: 14px; }
.et_pb_button_module_wrapper:has(.cnp-btn-inline) { display: inline-block; width: auto; vertical-align: top; }
.et_pb_button_module_wrapper:has(.cnp-btn-ml) { margin-left: 14px; }

.cnp-maxw-480 { max-width: 480px; width: 100%; }
.cnp-maxw-620 { max-width: 620px; width: 100%; }
.cnp-maxw-640 { max-width: 640px; width: 100%; }

.cnp-case-eyebrow { font-family: 'Geist Mono', monospace; font-size: 13px; color: #9E141E; margin-bottom: 18px; }
.cnp-case-eyebrow--dark { color: #B19895; }
.cnp-review-author { font-size: 14px; color: #505963; }

a.cnp-link { color: #B71824; text-decoration: none; }
a.cnp-link:hover { color: #9B0007; text-decoration: underline; }
a.cnp-card-link { color: inherit; text-decoration: none; }

.cnp-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251,252,252,0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid #DBDEE2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 48px;
  font-family: 'Geist', sans-serif;
  transition: padding-top 0.2s ease, padding-bottom 0.2s ease;
}
/* Compact sticky header once scrolled — see the small scroll listener at
   the bottom of header.php, which toggles this class. */
.cnp-header--scrolled { padding-top: 10px; padding-bottom: 10px; }
.cnp-logo {
  text-decoration: none; display: flex; align-items: baseline;
  font-weight: 700; font-size: 21px; letter-spacing: -0.03em; color: #0B121A;
  transition: opacity 0.15s ease;
}
.cnp-logo:hover { opacity: 0.7; }
.cnp-logo__slash { color: #B71824; }
.cnp-header__nav { display: flex; align-items: center; gap: 26px; }
.cnp-header__menu-toggle {
  display: none; width: 42px; height: 42px; padding: 10px; border: 0; border-radius: 8px;
  background: transparent; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px;
}
.cnp-header__menu-toggle span, .cnp-portal-menu-toggle span {
  display: block; width: 100%; height: 2px; border-radius: 2px; background: currentColor;
}
.cnp-header__mobile-nav {
  position: absolute; top: 100%; left: 0; right: 0; padding: 12px 20px 20px; border-bottom: 1px solid #DBDEE2;
  background: #FBFCFC; box-shadow: 0 16px 30px -24px rgba(11,18,26,0.35);
}
.cnp-header__mobile-nav[hidden] { display: none; }
.cnp-header__mobile-nav a {
  display: block; padding: 11px 4px; color: #303942; text-decoration: none; font-size: 15px; font-weight: 500;
}
.cnp-header__mobile-nav .cnp-header__mobile-cta {
  margin-top: 8px; padding: 12px 16px; border-radius: 8px; background: #0B121A; color: #FFFFFF; text-align: center;
}
.cnp-navlink { color: #505963; text-decoration: none; font-size: 15px; font-weight: 500; transition: color 0.15s ease; white-space: nowrap; }
.cnp-navlink:hover { color: #0B121A !important; }
.cnp-header__cta, .cnp-header__scan-cta {
  text-decoration: none; font-size: 14px; font-weight: 600;
  padding: 10px 18px; border-radius: 8px; white-space: nowrap; flex-shrink: 0;
}
.cnp-header__cta { color: #FFFFFF; background: #0B121A; }

.cnp-footer { background: #11171D; color: #A9AFB4; padding: 64px 48px 32px; font-family: 'Geist', sans-serif; }
.cnp-footer__grid { max-width: 1280px; margin: 0 auto 48px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.cnp-footer__logo { display: flex; align-items: baseline; font-weight: 700; font-size: 19px; letter-spacing: -0.03em; color: #FFFFFF; margin-bottom: 12px; }
.cnp-footer__logo .cnp-logo__slash { color: #ED5350; }
.cnp-footer__tagline { font-size: 14px; line-height: 1.6; max-width: 260px; margin: 0; }
.cnp-footer__heading { color: #FFFFFF; font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.cnp-footer__links { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.cnp-footer__links a { color: #A9AFB4; text-decoration: none; transition: color 0.15s ease; }
.cnp-footer__links a:hover { color: #FFFFFF; }
.cnp-footer__bottom { max-width: 1280px; margin: 0 auto; border-top: 1px solid #282F35; padding-top: 24px; font-size: 13px; color: #6D7277; }
.cnp-footer__bottom a { color: #6D7277; text-decoration: none; transition: color 0.15s ease; }
.cnp-footer__bottom a:hover { color: #FFFFFF; }

.cnp-white-text, .cnp-white-text .et_pb_text_inner,
.cnp-white-text h1, .cnp-white-text h2, .cnp-white-text h3, .cnp-white-text h4, .cnp-white-text p {
  color: #FFFFFF !important;
}
.cnp-scanner-box h2, .cnp-scanner-box p { color: #FFFFFF; }

a.cnp-card-block { display: block; color: inherit; text-decoration: none; }
/* !important: Divi's own core CSS for .et_pb_column_1_3/1_4/1_5/1_6/2_5 h3 sets
   font-size:20px, equal specificity, and loads after ours in some column widths
   — confirmed live it wins the tie. */
.cnp-card-h { font-size: 18px !important; font-weight: 600; margin: 0 0 8px; font-family: 'Geist', sans-serif; color: #0B121A; }
.cnp-card-p { font-size: 15px; line-height: 1.5; margin: 0; font-family: 'Geist', sans-serif; color: #505963; }
.cnp-card-h--sm { font-size: 16px !important; margin: 0 0 8px; }
.cnp-card-p--sm { font-size: 13.5px; }
/* Fallback for cnp-card-block content built before the cnp-card-h/-p classes
   existed (bare h3/h4/p tags) — otherwise falls back to Divi/browser defaults. */
.cnp-card-block h3 { font-size: 18px !important; font-weight: 600; margin: 0 0 8px; font-family: 'Geist', sans-serif; color: #0B121A; }
.cnp-card-block h4 { font-size: 15px !important; font-weight: 600; margin: 0; font-family: 'Geist', sans-serif; }
.cnp-card-block p { font-size: 15px; line-height: 1.5; margin: 0; font-family: 'Geist', sans-serif; color: #505963; }
/* :not(:has(.cnp-projects-grid)):not(:has(.cnp-cases-grid)) — several cards
   can share ONE wide Divi column ([cnp_projects] and the homepage
   [cnp_homepage_cases] grid), unlike the one-card-per-column layout used
   elsewhere. Without this exclusion, hovering a single card in that grid
   lifted/shadowed the WHOLE column (confirmed live on Projecten AND the
   homepage: hovering one case card lifted both cards together, since they
   share one column). */
.et_pb_column:not(:has(.cnp-projects-grid)):not(:has(.cnp-cases-grid)):has(.cnp-card-block:hover),
.et_pb_column:not(:has(.cnp-projects-grid)):not(:has(.cnp-cases-grid)):has(.cnp-card-link:hover) {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -18px rgba(11,18,26,0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.et_pb_column.cnp-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
/* The [cnp_projects] grid cards aren't each wrapped in their own styled Divi
   column (unlike the one-card-per-column previews on other pages, which get
   their border/radius from the column's own attributes) — so the card
   itself needs to carry that chrome directly here, or it renders as a plain
   unbordered rectangle (confirmed live on Projecten). */
.cnp-projects-grid .cnp-project-card {
  display: block; border: 1px solid #DBDEE2; border-radius: 16px; overflow: hidden;
  background: #FFFFFF; transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* Grid items default to min-width:auto, so a card's own content (long
     unwrapped metric line, etc.) can force it wider than its 1fr track on
     mobile — pushing it past the grid's right edge. min-width:0 lets it
     actually shrink to fit instead. */
  min-width: 0;
}
.cnp-projects-grid .cnp-project-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -18px rgba(11,18,26,0.25);
}

.cnp-card-icon { width: 34px; height: 34px; border-radius: 9px; background: #E5E8EC; margin-bottom: 18px; }
.cnp-card-icon--accent { background: #B71824; }

.cnp-center-content { text-align: center; }

.et_pb_button { transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease; }
.et_pb_button:hover { transform: translateY(-1px); }
.cnp-btn-primary:hover { background: #9B0007 !important; }
.cnp-btn-ghost:hover { background: #F3F5F8 !important; border-color: #A9AFB4 !important; }
.cnp-btn-onaccent:hover { background: #FFEDEB !important; }
.cnp-btn-ghost-onaccent:hover { background: #9E141E !important; }
.cnp-btn-dark:hover { background: #262F38 !important; }

.cnp-tag-row { display: flex; flex-wrap: wrap; gap: 10px; }
.cnp-tag-chip { font-family: 'Geist Mono', monospace; font-size: 13px; color: #262F38; background: #F3F5F8; border: 1px solid #DBDEE2; padding: 6px 12px; border-radius: 8px; display: inline-block; }
.cnp-tag-row--pill { gap: 12px; }
.cnp-tag-row--pill .cnp-tag-chip { background: #FFFFFF; border-color: #D5D8DB; border-radius: 100px; padding: 10px 16px; font-size: 14px; }

.cnp-check-row { display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px; font-weight: 500; color: #404952; font-family: 'Geist', sans-serif; }
.cnp-check-item { display: inline-flex; align-items: center; gap: 6px; }
.cnp-check-item::before { content: "\2713"; color: #B71824; }

.cnp-logos-row { display: flex; justify-content: center; align-items: center; gap: 56px; flex-wrap: wrap; opacity: 0.55; }
.cnp-logo-item { font-family: 'Geist Mono', monospace; font-size: 17px; font-weight: 600; color: #333C45; }

.cnp-case-details { display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5; font-family: 'Geist', sans-serif; }
.cnp-case-details--dark { color: #CBCED1; }
.cnp-case-details--dark b { color: #FFFFFF; }
.cnp-case-details--light { color: #505963; }
.cnp-case-details--light b { color: #0B121A; }

.cnp-cases-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

/* --- Automatisatie hero: "VOORBEELD · DATASTROOM" widget (shortcode
   [cnp_automation_flow]) — a one-time, 6.3s sequential fill matching
   Automatisatie.dc.html exactly, NOT the homepage's looping vertical pulse
   ([cnp_flow_visual]/.cnp-flow-visual is a different, older widget). --- */
.cnp-autoflow { background: #11171D; border-radius: 20px; padding: 32px 28px 40px; color: #FFFFFF; }
.cnp-autoflow__label { font-family: 'Geist Mono', monospace; font-size: 12px; color: #8B9095; margin-bottom: 28px; }
.cnp-autoflow__row { position: relative; display: flex; justify-content: space-between; padding: 0 6px; }
.cnp-autoflow__line { position: absolute; left: 6px; right: 6px; top: 21px; height: 2px; background: #303942; }
.cnp-autoflow__line-fill {
  position: absolute; left: 6px; top: 21px; height: 2px; background: #399E43;
  width: 0%; max-width: calc(100% - 12px); animation: cnp-autoflow-fill 6.3s linear forwards;
}
.cnp-autoflow__dot {
  position: absolute; left: 6px; top: 15px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: #399E43; box-shadow: 0 0 12px 2px #399E43;
  max-width: calc(100% - 12px); animation: cnp-autoflow-dot-move 6.3s linear forwards, cnp-autoflow-dot-fade 6.3s linear forwards;
}
.cnp-autoflow__node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 70px; }
.cnp-autoflow__icon {
  width: 44px; height: 44px; border-radius: 12px; background: #1D252D; border: 1px solid #303942;
  display: flex; align-items: center; justify-content: center; font-size: 18px; color: #399E43;
}
.cnp-autoflow__node--0 .cnp-autoflow__icon { animation: cnp-autoflow-node-light 0.4s ease 0.6s forwards; }
.cnp-autoflow__node--1 .cnp-autoflow__icon { animation: cnp-autoflow-node-light 0.4s ease 2.5s forwards; }
.cnp-autoflow__node--2 .cnp-autoflow__icon { animation: cnp-autoflow-node-light 0.4s ease 4.4s forwards; }
.cnp-autoflow__node--3 .cnp-autoflow__icon { animation: cnp-autoflow-node-light 0.4s ease 6.3s forwards; }
.cnp-autoflow__check { opacity: 0; }
.cnp-autoflow__node--0 .cnp-autoflow__check { animation: cnp-autoflow-check-in 0.3s ease 0.6s forwards; }
.cnp-autoflow__node--1 .cnp-autoflow__check { animation: cnp-autoflow-check-in 0.3s ease 2.5s forwards; }
.cnp-autoflow__node--2 .cnp-autoflow__check { animation: cnp-autoflow-check-in 0.3s ease 4.4s forwards; }
.cnp-autoflow__node--3 .cnp-autoflow__check { animation: cnp-autoflow-check-in 0.3s ease 6.3s forwards; }
.cnp-autoflow__label-text { font-size: 12px; color: #BBBEC1; text-align: center; }
.cnp-autoflow__caption {
  margin-top: 32px; background: #1D252D; border: 1px solid #303942; border-radius: 12px; padding: 16px 18px;
  font-size: 13px; line-height: 1.6; color: #CBCED1;
}
.cnp-autoflow__caption b { color: #FFFFFF; }
@keyframes cnp-autoflow-fill {
  0% { width: 0%; }
  9.52% { width: 0%; }
  23.81% { width: 33.3%; }
  39.68% { width: 33.3%; }
  53.97% { width: 66.6%; }
  69.84% { width: 66.6%; }
  84.13% { width: 100%; }
  100% { width: 100%; }
}
@keyframes cnp-autoflow-dot-move {
  0% { left: 0%; }
  9.52% { left: 0%; }
  23.81% { left: 33.3%; }
  39.68% { left: 33.3%; }
  53.97% { left: 66.6%; }
  69.84% { left: 66.6%; }
  84.13% { left: 100%; }
  100% { left: 100%; }
}
@keyframes cnp-autoflow-dot-fade {
  0%, 98% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes cnp-autoflow-node-light {
  from { border-color: #303942; box-shadow: none; }
  to { border-color: #399E43; box-shadow: 0 0 0 5px #399E43; }
}
@keyframes cnp-autoflow-check-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- Automatisatie: "Wat we aan elkaar koppelen" 5-card grid --- */
.cnp-automation-tools-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 1000px) {
  .cnp-automation-tools-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .cnp-automation-tools-grid { grid-template-columns: 1fr; }
}
.cnp-case-card { border-radius: 18px; border: 1px solid #DBDEE2; padding: 36px; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.cnp-case-card:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -24px rgba(11,18,26,0.18); }
.cnp-case-card--dark { background: #11171D; border-color: #1D252D; }
.cnp-case-card--light { background: #FFFFFF; }

/* --- Trust Center ("VOORBEELD" grids use their own card classes, not
   .cnp-card-block — sidesteps the shared-column hover-lift bug that
   .cnp-projects-grid/.cnp-cases-grid needed an explicit exclusion for). --- */
.cnp-trust-hero__title { font-size: 44px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: #0B121A; margin: 0 0 20px; }
.cnp-trust-hero__subhead { font-family: 'Geist', sans-serif; font-size: 18px; font-weight: 400; color: #505963; line-height: 1.6; margin: 0 0 28px; }

.cnp-trust-pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.cnp-trust-pillar {
  display: block; text-decoration: none; color: inherit; border: 1px solid #DBDEE2; border-radius: 16px;
  padding: 24px; background: #FFFFFF; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.cnp-trust-pillar:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(11,18,26,0.25); border-color: #B3B8BE; }
.cnp-trust-pillar__title { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.cnp-trust-pillar__summary { font-size: 14px; color: #505963; line-height: 1.5; margin: 0 0 14px; }
.cnp-trust-pillar__status { font-family: 'Geist Mono', monospace; font-size: 12px; color: #5B646F; }

.cnp-trust-security-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.cnp-trust-security-item { display: flex; gap: 12px; align-items: flex-start; background: #1D252D; border: 1px solid #303942; border-radius: 12px; padding: 16px 18px; }
.cnp-trust-security-item__check { color: #4AA651; font-size: 16px; flex-shrink: 0; }
.cnp-trust-security-item__text { font-size: 14px; line-height: 1.5; color: #DBDEE1; }

.cnp-trust-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.cnp-trust-info-card { border: 1px solid #DBDEE2; border-radius: 12px; padding: 18px; }
.cnp-trust-info-card--white { background: #FFFFFF; }
.cnp-trust-info-card__label { font-family: 'Geist Mono', monospace; font-size: 12px; color: #9E141E; margin-bottom: 8px; }
.cnp-trust-info-card__text { font-size: 14px; line-height: 1.6; color: #2D343A; margin: 0; }
.cnp-trust-info-card__stat { font-family: 'Geist Mono', monospace; font-size: 22px; font-weight: 600; color: #B71824; margin-bottom: 6px; }
.cnp-trust-info-card__stat-label { font-size: 13px; color: #505963; }

.cnp-trust-disclosure { max-width: 1000px; margin: 0 auto; background: #0B121A; border-radius: 20px; padding: 40px 48px; color: #FFFFFF; }
.cnp-trust-disclosure__label { font-family: 'Geist Mono', monospace; font-size: 12px; color: #5BB661; margin-bottom: 10px; }
.cnp-trust-disclosure__title { font-size: 19px; font-weight: 600; line-height: 1.4; margin: 0 0 20px; max-width: 620px; }
.cnp-trust-disclosure__row { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; font-size: 14px; }
.cnp-trust-disclosure__btn { background: #FFFFFF; color: #0B121A; text-decoration: none; font-weight: 600; padding: 12px 20px; border-radius: 10px; }
.cnp-trust-disclosure__meta { color: #A9AFB4; }
.cnp-trust-disclosure a.cnp-link { color: #FFFFFF; font-weight: 600; }
.cnp-trust-disclosure a.cnp-link:hover { color: #D5D8DB; }

.cnp-trust-subprocessors { border: 1px solid #DBDEE2; border-radius: 14px; overflow: hidden; background: #FFFFFF; }
.cnp-trust-subprocessors__head { display: grid; grid-template-columns: 1.2fr 1.4fr 0.8fr 1fr; background: #0B121A; color: #FFFFFF; font-size: 13px; font-weight: 600; padding: 14px 20px; }
.cnp-trust-subprocessors__row { display: grid; grid-template-columns: 1.2fr 1.4fr 0.8fr 1fr; padding: 16px 20px; border-top: 1px solid #DBDEE2; font-size: 14px; align-items: center; }
.cnp-trust-subprocessors__row strong { font-weight: 600; }
.cnp-trust-subprocessors__region { color: #505963; }
@media (max-width: 700px) {
  .cnp-trust-subprocessors__head { display: none; }
  .cnp-trust-subprocessors__row { grid-template-columns: 1fr; gap: 4px; }
}

.cnp-trust-doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.cnp-trust-doc-card { display: block; text-decoration: none; color: inherit; border: 1px solid #DBDEE2; border-radius: 12px; padding: 18px 20px; transition: border-color 0.15s ease; }
.cnp-trust-doc-card:hover { border-color: #B3B8BE; }
.cnp-trust-doc-card__title { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.cnp-trust-doc-card__meta { display: flex; justify-content: space-between; font-size: 13px; color: #505963; }
.cnp-trust-doc-card__status--ok { color: #107823; font-weight: 600; }
.cnp-trust-doc-card__status--request { color: #69737D; font-weight: 600; }
@media (max-width: 900px) {
  .cnp-cases-grid { grid-template-columns: 1fr; }
}

.cnp-flow-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.cnp-flow-row-item { display: flex; align-items: center; gap: 6px; }
.cnp-flow-chip { border-radius: 10px; padding: 12px 16px; font-size: 14px; font-weight: 600; white-space: nowrap; font-family: 'Geist', sans-serif; border: 1px solid #404952; background: #FFFFFF; color: #262F38; }
.cnp-flow-chip--accent { background: #FFE6E3; color: #9E141E; }
.cnp-flow-arrow { color: #7C8186; font-size: 18px; }
.cnp-mini-chip-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.cnp-mini-chip { background: #FFFFFF; border: 1px solid #D5D8DB; border-radius: 6px; padding: 5px 9px; font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 600; }
.cnp-mini-arrow { color: #8B9095; font-size: 12px; }

.cnp-flow-visual { background: #11171D; border-radius: 20px; padding: 40px 32px; }
.cnp-flow-visual__label { font-family: 'Geist Mono', monospace; font-size: 12px; color: #8B9095; margin-bottom: 28px; letter-spacing: 0.02em; }
.cnp-flow-visual__steps { display: flex; flex-direction: column; align-items: center; }
.cnp-flow-step { display: flex; flex-direction: column; align-items: center; width: 100%; }
.cnp-flow-step__box { width: 100%; max-width: 280px; background: #1D252D; border: 1px solid #303942; border-radius: 12px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; }
.cnp-flow-step__label { color: #E9EBEE; font-size: 15px; font-weight: 500; font-family: 'Geist', sans-serif; }
.cnp-flow-step__connector { position: relative; width: 1px; height: 22px; background: linear-gradient(#4D5660, #303942); margin: 2px 0; }
.cnp-flow-step__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; animation: cnp-flow-activate 6s linear infinite backwards; }
.cnp-flow-step__pulse { position: absolute; left: 50%; top: 0; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #419547; opacity: 0; box-shadow: 0 0 6px 1px #419547; animation: cnp-flow-pulse-travel 6s linear infinite; }
@keyframes cnp-flow-activate { 0%, 1.9% { background: #7C8186; } 2%, 83% { background: #419547; } 84%, 100% { background: #7C8186; } }
@keyframes cnp-flow-pulse-travel { 0%, 11% { opacity: 0; top: 0%; } 12% { opacity: 1; top: 0%; } 16.6% { opacity: 1; top: 100%; } 17%, 100% { opacity: 0; top: 100%; } }
.cnp-flow-step:nth-child(1) .cnp-flow-step__dot { animation-delay: 0s; }
.cnp-flow-step:nth-child(2) .cnp-flow-step__dot { animation-delay: 1s; }
.cnp-flow-step:nth-child(3) .cnp-flow-step__dot { animation-delay: 2s; }
.cnp-flow-step:nth-child(4) .cnp-flow-step__dot { animation-delay: 3s; }
.cnp-flow-step:nth-child(5) .cnp-flow-step__dot { animation-delay: 4s; }
.cnp-flow-step:nth-child(6) .cnp-flow-step__dot { animation-delay: 5s; }
.cnp-flow-step:nth-child(1) .cnp-flow-step__pulse { animation-delay: 0s; }
.cnp-flow-step:nth-child(2) .cnp-flow-step__pulse { animation-delay: 1s; }
.cnp-flow-step:nth-child(3) .cnp-flow-step__pulse { animation-delay: 2s; }
.cnp-flow-step:nth-child(4) .cnp-flow-step__pulse { animation-delay: 3s; }
.cnp-flow-step:nth-child(5) .cnp-flow-step__pulse { animation-delay: 4s; }

.cnp-systems-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.cnp-systems-panel { border: 1px solid #303942; border-radius: 16px; padding: 32px; background: #1A2026; }
.cnp-systems-panel__label { font-family: 'Geist Mono', monospace; font-size: 12px; color: #B19895; margin-bottom: 20px; }

.cnp-roadmap { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px 4px; position: relative; }
.cnp-roadmap::before { content: ""; position: absolute; top: 19px; left: 6%; right: 6%; height: 1px; background: #CBCED2; z-index: 0; }
.cnp-roadmap-step { position: relative; z-index: 1; padding-right: 16px; }
.cnp-roadmap-step__badge { width: 40px; height: 40px; border-radius: 50%; background: #0B121A; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-family: 'Geist Mono', monospace; font-weight: 600; margin-bottom: 20px; }
.cnp-roadmap-step__badge--accent { background: #B71824; }
.cnp-roadmap-step h3 { font-size: 16px; font-weight: 600; margin: 0 0 6px; font-family: 'Geist', sans-serif; color: #0B121A; }
.cnp-roadmap-step p { font-size: 13px; color: #505963; line-height: 1.4; margin: 0; font-family: 'Geist', sans-serif; }

.cnp-scanner-box { max-width: 1000px; margin: 0 auto; background: #0B121A; border-radius: 24px; padding: 64px 56px; color: #FFFFFF; text-align: center; font-family: 'Geist', sans-serif; }
.cnp-scanner-box__label { font-family: 'Geist Mono', monospace; font-size: 13px; color: #B19895; margin-bottom: 20px; }
.cnp-scanner-box h2 { font-size: 38px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 16px; }
.cnp-scanner-box p { font-size: 17px; color: #A9AFB4; max-width: 560px; margin: 0 auto 36px; line-height: 1.6; }
.cnp-scanner-form { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 480px; margin: 0 auto 20px; }
.cnp-scanner-field { width: 100%; text-align: left; }
.cnp-scanner-field label { display: block; font-size: 13px; font-weight: 600; color: #262F38; margin-bottom: 6px; }
.cnp-scanner-box .cnp-scanner-field label { color: #A9AFB4; }
.cnp-scanner-input { width: 100% !important; padding: 13px 14px !important; border-radius: 10px !important; border: 1px solid #303942 !important; background: #1A2026 !important; color: #FFFFFF !important; font-size: 15px !important; outline: none; box-sizing: border-box; }
.cnp-scanner-btn { background: #B71824; color: #FFFFFF; border: none; font-weight: 600; font-size: 15px; padding: 15px 24px; border-radius: 10px; cursor: pointer; white-space: nowrap; transition: background 0.15s ease, transform 0.15s ease; }
.cnp-scanner-btn:hover { background: #9B0007; transform: translateY(-1px); }
.cnp-scanner-box__hint { font-size: 12px; color: #8B9095; max-width: 480px; margin: 14px auto 0; }

.cnp-scanner-loader { display: flex; flex-basis: 100%; width: 100%; align-items: center; justify-content: center; gap: 16px; padding: 10px 0; }
.cnp-scanner-loader__ring { width: 32px; height: 32px; flex-shrink: 0; animation: cnp-scanner-spin 0.9s linear infinite; }
.cnp-scanner-loader__ring circle { stroke: #B71824; stroke-linecap: round; stroke-dasharray: 80 46; }
@keyframes cnp-scanner-spin { to { transform: rotate(360deg); } }
.cnp-scanner-loader__step { font-family: 'Geist Mono', monospace; font-size: 14px; color: inherit; }
.cnp-scanner-error { flex-basis: 100%; width: 100%; color: #9E141E; font-size: 13px; margin-top: 10px; text-align: center; }

.cnp-faq { display: flex; flex-direction: column; gap: 1px; background: #DBDEE2; border-radius: 14px; overflow: hidden; border: 1px solid #DBDEE2; }
.cnp-faq-item { background: #FFFFFF; }
.cnp-faq-item__q { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px; cursor: pointer; font-size: 16px; font-weight: 600; color: #0B121A; font-family: 'Geist', sans-serif; list-style: none; transition: background 0.15s ease; }
.cnp-faq-item__q::-webkit-details-marker { display: none; }
.cnp-faq-item__q::after { content: "+"; font-size: 20px; color: #505963; flex-shrink: 0; transition: transform 0.15s ease; }
.cnp-faq-item[open] .cnp-faq-item__q::after { content: "\2212"; }
.cnp-faq-item__q:hover { background: #F3F5F8; }
.cnp-faq-item__a { padding: 0 24px 22px; font-size: 15px; color: #505963; line-height: 1.6; font-family: 'Geist', sans-serif; }
/* Blogartikels: FAQ-blok als accordeon (Shortcodes::blog_faq_accordion). */
.cnp-faq--blog { margin: 8px 0 40px; }
.cnp-faq-title { margin-top: 44px !important; padding-top: 0; }
.cnp-faq--blog .cnp-faq-item__q { font-size: 17px; line-height: 1.4; }
.cnp-faq--blog .cnp-faq-item__a p { margin: 0 0 12px; font-size: 16px; line-height: 1.65; color: #505963; }
.cnp-faq--blog .cnp-faq-item__a p:last-child { margin-bottom: 0; }
.cnp-faq--blog .cnp-faq-item__a a { color: #B71824; }

/* --- Scanner CTA banner (shortcode [cnp_scanner_cta]) — reused across
   Websites/Webshops/SEO/GEO/Projecten/Contact per the design handoff --- */
.cnp-scanner-cta {
  max-width: 1000px; margin: 0 auto; background: #0B121A; border-radius: 20px; padding: 40px 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  color: #FFFFFF; font-family: 'Geist', sans-serif;
}
.cnp-scanner-cta__label { font-family: 'Geist Mono', monospace; font-size: 12px; color: #ED5350; margin-bottom: 8px; }
.cnp-scanner-cta__title { font-size: 19px; font-weight: 600; }
.cnp-scanner-cta__btn {
  background: #FFFFFF; color: #0B121A; text-decoration: none; font-weight: 600; font-size: 15px;
  padding: 13px 22px; border-radius: 10px; white-space: nowrap; transition: background 0.15s ease, transform 0.15s ease;
}
.cnp-scanner-cta__btn:hover { background: #F3F5F8; transform: translateY(-1px); }
@media (max-width: 700px) {
  /* The surrounding Divi section already has ~48px of its own mobile
     padding — pull the box out into part of that so it isn't squeezed
     into a narrow strip, and trim its own inner padding a bit too so the
     text has real room to breathe. */
  .cnp-scanner-cta { margin: 0 -24px !important; padding: 32px 24px !important; }
}

/* --- Info-lijst (label/waarde-paren, bv. adres/telefoon/e-mail op Contact) --- */
.cnp-info-list { display: flex; flex-direction: column; gap: 20px; }
.cnp-info-row__label { font-family: 'Geist Mono', monospace; font-size: 12px; color: #69737D; margin-bottom: 4px; }
.cnp-info-row__value { font-size: 15px; color: #0B121A; }

/* --- Dark "tech stack" key/value box (Websites hero) --- */
.cnp-techstack { background: #11171D; border-radius: 20px; padding: 32px; color: #FFFFFF; font-family: 'Geist', sans-serif; }
.cnp-techstack__label { font-family: 'Geist Mono', monospace; font-size: 12px; color: #8B9095; margin-bottom: 20px; }
.cnp-techstack__rows { display: flex; flex-direction: column; gap: 10px; }
.cnp-techstack-row { background: #1D252D; border-radius: 10px; padding: 14px 16px; display: flex; justify-content: space-between; font-size: 14px; }
.cnp-techstack-row__value { font-family: 'Geist Mono', monospace; color: #B9BEC4; }

/* --- Section heading + inline "view all" link (Project preview rows) --- */
.cnp-section-heading-row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; font-family: 'Geist', sans-serif; }
.cnp-section-heading-row h2 { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; margin: 0; color: #0B121A; }
.cnp-section-heading-row__link { font-weight: 600; font-size: 15px; }

/* --- Project preview card (image-placeholder swatch + tag + title, whole
   card clickable) — reused on service pages linking into Projecten --- */
.cnp-card--clip { overflow: hidden; }
.cnp-project-card__swatch {
  height: 150px; display: flex; align-items: center; justify-content: center;
  background-image: repeating-linear-gradient(135deg, #E5E8EC 0px, #E5E8EC 10px, #F3F5F8 10px, #F3F5F8 20px);
  font-family: 'Geist Mono', monospace; font-size: 12px; color: #5F6469;
}
.cnp-project-card__body { padding: 20px; }
.cnp-project-card__tag { font-family: 'Geist Mono', monospace; font-size: 12px; color: #9E141E; margin-bottom: 6px; }
.cnp-project-card h3 { font-size: 16px; font-weight: 600; margin: 0; font-family: 'Geist', sans-serif; color: #0B121A; }
.cnp-project-card__swatch img { width: 100%; height: 100%; object-fit: cover; }
.cnp-project-card__desc { font-size: 14px; color: #505963; line-height: 1.5; margin: 8px 0 12px; font-family: 'Geist', sans-serif; }
.cnp-project-card__metric { font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 600; color: #B71824; }

/* --- Project preview grid (shortcode [cnp_projects], queries the "project" CPT) --- */
/* auto-fill + minmax so cards keep their intended size instead of stretching
   to fill the row when there are few of them (confirmed live: with only 1
   project, repeat(3,1fr) still lays it out at 1/3 width, but auto-fill keeps
   the exact same fixed card size regardless of count, which is what's wanted) */
.cnp-projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 380px)); gap: 24px; }
/* !important: WP Rocket's critical-CSS extraction inlines the base rule
   above into <head> with !important and no media wrapper, so a plain
   override here would silently lose regardless of viewport. */
@media (max-width: 768px) { .cnp-projects-grid { grid-template-columns: 1fr !important; } }

/* --- Blog overview grid (shortcode [cnp_blog_posts], queries the native
   "post" type) — 2-column cards, wider than project cards per the handover --- */
.cnp-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 24px; }
@media (max-width: 768px) { .cnp-blog-grid { grid-template-columns: 1fr; } }
.cnp-blog-card {
  display: block; border: 1px solid #DBDEE2; border-radius: 16px; overflow: hidden;
  background: #FFFFFF; text-decoration: none; color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cnp-blog-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(11,18,26,0.25); }
.cnp-blog-card__swatch {
  height: 180px; display: flex; align-items: center; justify-content: center;
  background-image: repeating-linear-gradient(135deg, #E5E8EC 0px, #E5E8EC 10px, #F3F5F8 10px, #F3F5F8 20px);
  font-family: 'Geist Mono', monospace; font-size: 12px; color: #5F6469;
}
.cnp-blog-card__swatch img { width: 100%; height: 100%; object-fit: cover; }
.cnp-blog-card__body { padding: 26px; }
.cnp-blog-card__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-family: 'Geist', sans-serif; }
.cnp-blog-card__cat { font-family: 'Geist Mono', monospace; font-size: 12px; color: #9E141E; }
.cnp-blog-card__dot { font-size: 12px; color: #7C8186; }
.cnp-blog-card__readtime { font-size: 12px; color: #7C8186; }
.cnp-blog-card h3 { font-size: 20px; font-weight: 600; margin: 0 0 10px; line-height: 1.3; font-family: 'Geist', sans-serif; color: #0B121A; }
.cnp-blog-card p { font-size: 15px; color: #505963; line-height: 1.6; margin: 0; font-family: 'Geist', sans-serif; }
/* Titel staat al groot op de automatisch gemaakte deelafbeelding: visueel
   verbergen, maar in de HTML laten voor Google en schermlezers. */
.cnp-blog-card--title-in-image h3 { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cnp-blog-card { position: relative; }
.cnp-blog-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin: 48px 0 0; font-family: 'Geist', sans-serif; font-size: 15px; }
.cnp-blog-pagination__pages { display: inline-flex; gap: 6px; }
.cnp-blog-pagination__page { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid #D5D8DB; color: #0B121A; text-decoration: none; transition: border-color .15s, background .15s; }
.cnp-blog-pagination__page:hover { border-color: #B71824; color: #B71824; }
.cnp-blog-pagination__page.is-current { background: #0B121A; border-color: #0B121A; color: #FFFFFF; }
.cnp-blog-pagination__prev, .cnp-blog-pagination__next { color: #B71824; font-weight: 600; text-decoration: none; }
.cnp-blog-pagination__prev:hover, .cnp-blog-pagination__next:hover { text-decoration: underline; }

/* --- Blog post detail (single "post" view, same pattern as ProjectDetail:
   a [cnp_blog_meta] shortcode for the category+read-time combo, native post
   content/title/featured-image for the rest) --- */
.cnp-blog-back { max-width: 760px; margin: 0 auto; padding: 64px 48px 0; }
.cnp-blog-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-family: 'Geist', sans-serif; }
.cnp-blog-meta__cat { font-family: 'Geist Mono', monospace; font-size: 12px; color: #9E141E; }
.cnp-blog-meta__dot { font-size: 12px; color: #7C8186; }
.cnp-blog-meta__readtime { font-size: 12px; color: #7C8186; }
.cnp-blog-hero {
  height: 280px; border-radius: 16px; margin-bottom: 40px; display: flex; align-items: center; justify-content: center;
  background-image: repeating-linear-gradient(135deg, #E5E8EC 0px, #E5E8EC 10px, #F3F5F8 10px, #F3F5F8 20px);
  font-family: 'Geist Mono', monospace; font-size: 13px; color: #5F6469; overflow: hidden;
}
.cnp-blog-hero img { width: 100%; height: 100%; object-fit: cover; }
.cnp-blog-article { max-width: 760px; margin: 0 auto; font-family: 'Geist', sans-serif; }
.cnp-blog-article h1 { font-size: 42px; line-height: 1.15; letter-spacing: -0.03em; font-weight: 700; margin: 0 0 32px; color: #0B121A; }
.cnp-blog-article-body { display: flex; flex-direction: column; gap: 22px; font-size: 18px; line-height: 1.8; color: #232A30; }
.cnp-blog-article-body p { margin: 0; }
.cnp-blog-article-body h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; margin: 14px 0 0; color: #0B121A; }
.cnp-blog-article-body h3 { font-size: 19px; font-weight: 600; margin: 6px 0 0; color: #0B121A; }
.cnp-blog-article-body ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.cnp-blog-article-body li { line-height: 1.7; }
.cnp-blog-article-body a { color: #B71824; text-decoration: none; }
.cnp-blog-article-body a:hover { text-decoration: underline; }

/* --- ScanPreview page (static shell — real scan engine not yet built) --- */
.cnp-eyebrow-label { font-family: 'Geist Mono', monospace; font-size: 13px; color: #69737D; margin-bottom: 18px; }
.cnp-scanbar { max-width: 900px; margin: 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cnp-scanbar__label { font-family: 'Geist Mono', monospace; font-size: 13px; color: #505963; white-space: nowrap; }
.cnp-scanbar__input { flex: 1; min-width: 220px; padding: 12px 16px !important; border-radius: 10px !important; border: 1px solid #D5D8DB !important; background: #FFFFFF; font-size: 15px; outline: none; font-family: 'Geist', sans-serif; }
.cnp-scanbar__btn { font-size: 14px !important; padding: 12px 20px !important; }

.cnp-scanresult { background: #0B121A; border-radius: 20px; padding: 40px; color: #FFFFFF; font-family: 'Geist', sans-serif; }
.cnp-scanresult__top { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; margin-bottom: 36px; }
.cnp-scanresult__grade { width: 100px; height: 100px; border-radius: 50%; border: 7px solid #419547; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.cnp-scanresult__grade-letter { font-size: 30px; font-weight: 700; }
.cnp-scanresult__grade-score { font-family: 'Geist Mono', monospace; font-size: 12px; color: #A9AFB4; }
.cnp-scanresult__label { font-family: 'Geist Mono', monospace; font-size: 12px; color: #B19895; margin-bottom: 10px; letter-spacing: 0.02em; }
.cnp-scanresult h2 { font-size: 21px; font-weight: 600; margin: 0 0 10px; }
.cnp-scanresult p { font-size: 15px; line-height: 1.6; color: #B3B8BE; margin: 0 0 16px; }
.cnp-scanresult__warning { display: inline-flex; align-items: center; gap: 8px; background: #FFE6E3; color: #E2AFAA; font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 100px; }
.cnp-scanresult__section { border-top: 1px solid #282F35; padding-top: 28px; margin-bottom: 28px; }
.cnp-scanresult__section:last-child { margin-bottom: 0; }
.cnp-scanresult h3 { font-size: 17px; font-weight: 600; margin: 0 0 14px; }
.cnp-scanresult__cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 24px; }
.cnp-scanresult__cat-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; color: #CBCED1; }
.cnp-scanresult__cat-score { font-family: 'Geist Mono', monospace; color: #FFFFFF; }
.cnp-scanresult__bar { height: 7px; border-radius: 100px; background: #232A30; overflow: hidden; }
.cnp-scanresult__bar-fill { height: 100%; border-radius: 100px; }
.cnp-scanresult__unlock-form { display: flex; gap: 10px; flex-wrap: wrap; }
.cnp-scanresult__input { flex: 1; min-width: 240px; padding: 15px 18px !important; border-radius: 10px !important; border: 1px solid #303942 !important; background: #1A2026; color: #FFFFFF; font-size: 15px; outline: none; font-family: 'Geist', sans-serif; }
.cnp-scanresult__fineprint { font-size: 13px !important; color: #7C8186 !important; margin: 14px 0 0 !important; }

.cnp-monitor-card { max-width: 900px; margin: 0 auto; border: 1px solid #DBDEE2; border-radius: 18px; padding: 32px; font-family: 'Geist', sans-serif; }
.cnp-monitor-card__title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; margin-bottom: 12px; color: #0B121A; }
.cnp-monitor-card p { font-size: 15px; line-height: 1.6; color: #505963; margin: 0 0 20px; max-width: 640px; }
.cnp-monitor-card__form { display: flex; gap: 10px; flex-wrap: wrap; }
.cnp-monitor-card__input { flex: 1; min-width: 240px; padding: 15px 18px !important; border-radius: 10px !important; border: 1px solid #D5D8DB !important; background: #FFFFFF; font-size: 15px; outline: none; font-family: 'Geist', sans-serif; }
.cnp-monitor-card__fineprint { font-size: 13px !important; color: #69737D !important; margin: 14px 0 0 !important; }

/* --- Score box (dark card with progress bars — SEO hero) --- */
.cnp-scorebox { background: #11171D; border-radius: 20px; padding: 32px; color: #FFFFFF; font-family: 'Geist', sans-serif; }
.cnp-scorebox__label { font-family: 'Geist Mono', monospace; font-size: 12px; color: #8B9095; margin-bottom: 20px; }
.cnp-scorebox__rows { display: flex; flex-direction: column; gap: 16px; }
.cnp-scorebox__row-top { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.cnp-scorebox__value { font-family: 'Geist Mono', monospace; font-weight: 600; }
.cnp-scorebox__bar { height: 8px; border-radius: 100px; background: #232A30; overflow: hidden; }
.cnp-scorebox__bar-fill {
  height: 100%; border-radius: 100px; background: #419547; width: var(--fill, 0%);
  animation: cnp-barfill 1.3s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes cnp-barfill { from { width: 0; } }
.cnp-scorebox__row:nth-child(2) .cnp-scorebox__bar-fill { animation-delay: 0.15s; }
.cnp-scorebox__row:nth-child(3) .cnp-scorebox__bar-fill { animation-delay: 0.3s; }

/* --- AI-answer example bubble (GEO hero) --- */
.cnp-airesult { background: #11171D; border-radius: 20px; padding: 32px; color: #FFFFFF; font-family: 'Geist', sans-serif; }
.cnp-airesult__label { font-family: 'Geist Mono', monospace; font-size: 12px; color: #8B9095; margin-bottom: 20px; }
.cnp-airesult__bubble { background: #1D252D; border: 1px solid #303942; border-radius: 12px; padding: 18px; font-size: 14px; line-height: 1.7; color: #D5D8DB; }
.cnp-airesult__q { color: #8B9095; }
.cnp-airesult__bubble b { color: #FFFFFF; }
.cnp-airesult__cursor { display: inline-block; color: #419547; animation: cnp-cursor-blink 1s step-start infinite; }
.cnp-airesult--done .cnp-airesult__cursor { display: none; }
@keyframes cnp-cursor-blink { 50% { opacity: 0; } }

/* --- Projecten page: category filter pills + legal page side-nav --- */
.cnp-filter-row { display: flex; gap: 10px; flex-wrap: wrap; }
.cnp-filter-row--projects { margin-bottom: 40px; }
.cnp-filter-pill {
  background: #FFFFFF; color: #262F38; border: 1px solid #D5D8DB; font-family: 'Geist', sans-serif;
  font-size: 14px; font-weight: 500; padding: 9px 16px; border-radius: 100px; text-decoration: none;
  display: inline-block; transition: background 0.15s ease;
}
.cnp-filter-pill:hover { background: #F3F5F8; }
.cnp-filter-pill--active { background: #0B121A; color: #FFFFFF; border-color: #0B121A; }
.cnp-filter-pill--active:hover { background: #0B121A; }

.cnp-legal-nav { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 2px; font-family: 'Geist', sans-serif; }
.cnp-legal-link {
  text-decoration: none; color: #0B121A; font-size: 15px; font-weight: 500; padding: 10px 14px;
  border-radius: 8px; transition: background 0.15s ease, color 0.15s ease;
}
.cnp-legal-link:hover { background: #F3F5F8; }
.cnp-legal-link--active { background: #FFE6E3; color: #9E141E; }
.cnp-legal-nav__updated { border-top: 1px solid #DBDEE2; margin: 16px 14px; padding-top: 16px; font-size: 13px; color: #69737D; }
.cnp-legal-cookie-table { display: flex; flex-direction: column; gap: 1px; background: #DBDEE2; border: 1px solid #DBDEE2; border-radius: 14px; overflow: hidden; }
.cnp-legal-cookie-row { background: #FFFFFF; padding: 18px 22px; display: flex; justify-content: space-between; gap: 24px; }
.cnp-legal-cookie-row__title { font-size: 15px; font-weight: 600; margin-bottom: 4px; color: #0B121A; }
.cnp-legal-cookie-row__desc { font-size: 14px; color: #505963; }
.cnp-legal-cookie-row__status { font-family: 'Geist Mono', monospace; font-size: 13px; white-space: nowrap; }
.cnp-legal-cookie-row__status--on { color: #036819; }
.cnp-legal-cookie-row__status--opt { color: #69737D; }

/* --- Light bordered "orders today" box (Webshops hero) --- */
.cnp-orderbox { background: #FFFFFF; border: 1px solid #DBDEE2; border-radius: 20px; padding: 32px; box-shadow: 0 20px 50px -20px rgba(11,18,26,0.15); font-family: 'Geist', sans-serif; }
.cnp-orderbox__label { font-family: 'Geist Mono', monospace; font-size: 12px; color: #505963; margin-bottom: 20px; }
.cnp-orderbox__rows { display: flex; flex-direction: column; gap: 10px; }
.cnp-orderbox-row { display: flex; justify-content: space-between; padding: 12px 14px; background: #F3F5F8; border-radius: 10px; font-size: 14px; color: #505963; }
.cnp-orderbox-row__value { font-family: 'Geist Mono', monospace; font-size: 14px; font-weight: 600; color: #0B121A; }
.cnp-orderbox-row__value--live { color: #036819; }

/* --- Juridisch page: side nav + legal article content (Code modules,
   plain HTML — same visual language as the rest of the site) --- */
.cnp-legal-content { display: flex; flex-direction: column; gap: 88px; font-family: 'Geist', sans-serif; }
.cnp-legal-article h2 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 24px; color: #0B121A; }
.cnp-legal-article > p { font-size: 16px; line-height: 1.75; color: #2D343A; margin: 0 0 22px; }
.cnp-legal-article > p:last-child { margin-bottom: 0; }
.cnp-legal-article > div { margin-bottom: 22px; }
.cnp-legal-article > div:last-child { margin-bottom: 0; }
.cnp-legal-article h3 { font-size: 18px; font-weight: 600; margin: 0 0 8px; color: #0B121A; }
.cnp-legal-article p { font-size: 16px; line-height: 1.75; color: #2D343A; margin: 0; }
.cnp-legal-article ol, .cnp-legal-article ul { margin: 0 0 22px; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.cnp-legal-article li { font-size: 16px; line-height: 1.75; color: #2D343A; }
.cnp-legal-article a { color: #9E141E; text-decoration: none; }
.cnp-legal-article a:hover { text-decoration: underline; }

/* --- ProjectDetail single template (view/single-project.php, plain PHP —
   not a Divi-builder page, so these classes carry their own layout instead
   of relying on et_pb_row/et_pb_column padding) --- */
.cnp-pd { font-family: 'Geist', sans-serif; }
.cnp-pd-wrap { max-width: 900px; margin: 0 auto; padding: 0; }
.cnp-pd-back { padding: 72px 0 0; }
.cnp-pd-back__link { font-size: 14px; font-weight: 600; }
.cnp-pd-header { padding: 24px 0 56px; }
.cnp-pd-header-row { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 24px; }
.cnp-pd-logo { width: 64px; height: 64px; flex-shrink: 0; border-radius: 14px; border: 1px solid #DBDEE2; background: #F3F5F8; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cnp-pd-logo img { width: 100%; height: 100%; object-fit: cover; }
.cnp-pd-logo__fallback { font-family: 'Geist Mono', monospace; font-size: 20px; font-weight: 600; color: #69737D; }
.cnp-pd-tag { display: inline-flex; align-items: center; gap: 8px; background: #FFE6E3; color: #9E141E; font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 100px; margin-bottom: 14px; }
.cnp-pd-tag__dot { width: 6px; height: 6px; border-radius: 50%; background: #B71824; }
.cnp-pd-website-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.cnp-pd-website-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #B71824; text-decoration: none; }
.cnp-pd-website-link:hover { color: #9B0007; text-decoration: underline; }
.cnp-pd-title { font-size: 42px; line-height: 1.1; letter-spacing: -0.03em; font-weight: 700; margin: 0 0 20px; color: #0B121A; }
.cnp-pd-summary { font-size: 19px; line-height: 1.6; color: #505963; margin: 0; }
.cnp-pd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 0 0 56px; }
.cnp-pd-stats--1 { grid-template-columns: 1fr; max-width: 320px; }
.cnp-pd-stats--2 { grid-template-columns: repeat(2, 1fr); }
.cnp-pd-stat { border: 1px solid #DBDEE2; border-radius: 14px; padding: 22px; text-align: center; }
.cnp-pd-stat__value { font-family: 'Geist Mono', monospace; font-size: 26px; font-weight: 600; color: #B71824; margin-bottom: 6px; }
.cnp-pd-stat__label { font-size: 13px; color: #505963; }
.cnp-pd-screenshot {
  height: 320px; border-radius: 20px; margin-bottom: 56px; display: flex; align-items: center; justify-content: center;
  background-image: repeating-linear-gradient(135deg, #E5E8EC 0px, #E5E8EC 10px, #F3F5F8 10px, #F3F5F8 20px);
  font-family: 'Geist Mono', monospace; font-size: 13px; color: #5F6469; overflow: hidden;
}
.cnp-pd-screenshot img { width: 100%; height: 100%; object-fit: cover; }
.cnp-pd-cwr { background: #F3F5F8; padding: 80px 0; }
.cnp-pd-cwr__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.cnp-pd-cwr__grid--stacked { grid-template-columns: 1fr; gap: 28px; }
.cnp-pd-cwr__label { font-family: 'Geist Mono', monospace; font-size: 12px; color: #9E141E; margin-bottom: 10px; }
.cnp-pd-cwr__text { font-size: 15px; line-height: 1.7; color: #2D343A; margin: 0; }
.cnp-pd-approach { padding: 80px 0 0; }
.cnp-pd-approach h2 { font-size: 24px; font-weight: 600; margin: 0 0 20px; color: #0B121A; }
.cnp-pd-approach p { font-size: 17px; line-height: 1.75; color: #2D343A; margin: 0 0 18px; }
.cnp-pd-approach p:last-child { margin-bottom: 0; }

.cnp-pd-callout { margin: 28px 0 0; border-left: 3px solid #B71824; background: #F3F5F8; padding: 18px 24px; border-radius: 0 12px 12px 0; }
.cnp-pd-callout p { font-size: 17px; line-height: 1.5; font-weight: 600; color: #0F171F; margin: 0; }

.cnp-pd-ba { padding: 64px 0 24px 0; }
.cnp-pd-ba h2 { font-size: 24px; font-weight: 600; margin: 0 0 24px; color: #0B121A; }
.cnp-pd-ba__table { display: flex; flex-direction: column; gap: 1px; background: #DBDEE2; border-radius: 14px; overflow: hidden; border: 1px solid #DBDEE2; }
.cnp-pd-ba__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); background: #FFFFFF; }
.cnp-pd-ba__before { padding: 18px 22px; border-right: 1px solid #E5E8EC; }
.cnp-pd-ba__after { padding: 18px 22px; }
.cnp-pd-ba__label { font-family: 'Geist Mono', monospace; font-size: 11px; color: #69737D; margin-bottom: 4px; }
.cnp-pd-ba__label--after { color: #107823; }
.cnp-pd-ba__before-text { font-size: 15px; color: #262F38; }
.cnp-pd-ba__after-text { font-size: 15px; color: #151B21; font-weight: 500; }

.cnp-pd-flow { padding: 24px 0; }
.cnp-pd-flow h2 { font-size: 24px; font-weight: 600; margin: 0 0 8px; color: #0B121A; }
.cnp-pd-flow p { font-size: 15px; color: #505963; margin: 0 0 28px; }
.cnp-pd-flow__row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 4px; }
.cnp-pd-flow__node { flex: 1 1 130px; min-width: 130px; background: #0B121A; color: #FFFFFF; border-radius: 12px; padding: 16px; border: 1px solid #303942; text-align: center; }
.cnp-pd-flow__node--retry { border: 1px dashed #C99500; }
.cnp-pd-flow__node-label { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.cnp-pd-flow__node-note { font-size: 12px; color: #BBBEC1; line-height: 1.4; }
.cnp-pd-flow__arrow { display: flex; align-items: center; justify-content: center; min-width: 24px; color: #7C8186; font-size: 18px; }

.cnp-pd-phases { padding: 64px 0 0; }
.cnp-pd-phases h2 { font-size: 24px; font-weight: 600; margin: 0 0 24px; color: #0B121A; }
.cnp-pd-phases__list { display: flex; flex-direction: column; gap: 16px; }
.cnp-pd-phase { display: flex; gap: 16px; align-items: flex-start; }
.cnp-pd-phase__n { width: 28px; height: 28px; border-radius: 50%; background: #FFE6E3; color: #9E141E; font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cnp-pd-phase__title { font-size: 16px; font-weight: 600; margin: 0 0 4px; color: #0B121A; }
.cnp-pd-phase__desc { font-size: 15px; line-height: 1.6; color: #505963; margin: 0; }

.cnp-pd-deepdive { margin-top: 28px; border: 1px solid #DBDEE2; border-radius: 12px; overflow: hidden; }
.cnp-pd-deepdive summary { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; cursor: pointer; font-size: 15px; font-weight: 600; color: #0B121A; list-style: none; transition: background 0.15s ease; }
.cnp-pd-deepdive summary::-webkit-details-marker { display: none; }
.cnp-pd-deepdive summary::after { content: "+"; font-size: 18px; color: #505963; }
.cnp-pd-deepdive[open] summary::after { content: "\2212"; }
.cnp-pd-deepdive summary:hover { background: #F3F5F8; }
.cnp-pd-deepdive p { padding: 22px 22px 30px !important; font-size: 14px; line-height: 1.7; color: #3C434A; margin: 0; }

.cnp-pd-gallery { padding: 64px 0 0; }
.cnp-pd-gallery h2 { font-size: 24px; font-weight: 600; margin: 0 0 24px; color: #0B121A; }
.cnp-pd-gallery__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.cnp-pd-gallery__shot { width: 100%; height: 200px; border-radius: 14px; border: 1px solid #DBDEE2; object-fit: cover; }
.cnp-pd-gallery__caption { font-size: 13px; color: #505963; margin-top: 10px; line-height: 1.5; }
.cnp-pd-gallery__link { display: block; cursor: zoom-in; }
.cnp-pd-gallery__link:focus-visible .cnp-pd-gallery__shot { outline: 2px solid #B71824; outline-offset: 2px; }

/* --- Project detail: video --- */
.cnp-pd-video { padding: 0 0 64px 0; }
.cnp-pd-video__player { width: 100%; height: auto; border-radius: 12px; border: 1px solid #DBDEE2; display: block; }

/* --- Project detail: gallery lightbox --- */
body.cnp-pd-lightbox-open { overflow: hidden; }
.cnp-pd-lightbox {
  position: fixed; inset: 0; z-index: 9999; background: rgba(11,18,26,0.92); display: flex;
  align-items: center; justify-content: center; padding: 40px;
}
/* `display: flex` above overrides the browser's own [hidden] { display: none }
   UA rule (author CSS always wins over UA styles) — without this, the
   overlay stays visible/unclosable regardless of the `hidden` attribute. */
.cnp-pd-lightbox[hidden] { display: none; }
.cnp-pd-lightbox__figure { max-width: 90vw; max-height: 90vh; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cnp-pd-lightbox__img { max-width: 90vw; max-height: 78vh; width: auto; height: auto; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.cnp-pd-lightbox__caption { color: #E9EBEE; font-size: 14px; text-align: center; max-width: 640px; }
.cnp-pd-lightbox__close {
  position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.1); color: #FFFFFF; font-size: 26px; line-height: 1; cursor: pointer; transition: background 0.15s ease;
}
.cnp-pd-lightbox__close:hover { background: rgba(255,255,255,0.2); }
.cnp-pd-lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.1); color: #FFFFFF; font-size: 22px; line-height: 1; cursor: pointer; transition: background 0.15s ease;
}
.cnp-pd-lightbox__nav:hover { background: rgba(255,255,255,0.2); }
.cnp-pd-lightbox__nav--prev { left: 24px; }
.cnp-pd-lightbox__nav--next { right: 24px; }
@media (max-width: 640px) {
  .cnp-pd-lightbox { padding: 20px; }
  .cnp-pd-lightbox__nav { width: 40px; height: 40px; font-size: 18px; }
  .cnp-pd-lightbox__nav--prev { left: 8px; }
  .cnp-pd-lightbox__nav--next { right: 8px; }
  .cnp-pd-lightbox__close { top: 10px; right: 10px; }
}

.cnp-pd-properties h3, .cnp-pd-tech-list h3 { font-size: 20px; font-weight: 600; margin: 0 0 16px; color: #0B121A; }
.cnp-pd-properties .cnp-tag-chip { font-family: 'Geist', sans-serif; background: #FFFFFF; }

.cnp-pd-reliability { padding: 64px 0; }
.cnp-pd-reliability h2 { font-size: 24px; font-weight: 600; margin: 0 0 24px; color: #0B121A; }
.cnp-pd-reliability__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.cnp-pd-reliability__item { background: #FFFFFF; border: 1px solid #DBDEE2; border-radius: 12px; padding: 16px 18px; }
.cnp-pd-reliability__label { font-size: 13px; font-family: 'Geist Mono', monospace; color: #9E141E; margin-bottom: 4px; }
.cnp-pd-reliability__value { font-size: 14px; color: #262F38; }
@media (max-width: 700px) {
  /* Voor/na: elk paar als los kaartje met wat ruimte ertussen. */
  .cnp-pd-ba__table { background: transparent; border: none; border-radius: 0; overflow: visible; gap: 12px; }
  .cnp-pd-ba__row { grid-template-columns: 1fr; border: 1px solid #DBDEE2; border-radius: 12px; overflow: hidden; }
  .cnp-pd-ba__before { border-right: none; border-bottom: 1px solid #E5E8EC; }

  /* Flow: verticaal stacken met de pijltjes naar beneden wijzend. */
  .cnp-pd-flow__row { flex-direction: column; align-items: stretch; }
  .cnp-pd-flow__node { flex: 1 1 auto; }
  .cnp-pd-flow__arrow { transform: rotate(90deg); }

  /* Mid-CTA: knoppen full width en gecentreerd. */
  .cnp-pd-midcta { flex-direction: column; align-items: stretch; text-align: center; }
  .cnp-pd-midcta__actions { flex-direction: column; width: 100%; }
  .cnp-pd-midcta__btn { display: block; width: 100%; text-align: center; }
}
.cnp-pd-quote { padding: 64px 0 0; }
.cnp-pd-quote blockquote { border-left: 3px solid #B71824; padding-left: 28px; margin: 0; }
.cnp-pd-quote p { font-size: 20px; line-height: 1.6; font-style: italic; color: #151B21; margin: 0 0 14px; }
.cnp-pd-quote__author { font-size: 14px; color: #505963; }
.cnp-pd-midcta { margin: 64px 0 0; background: #0B121A; border-radius: 20px; padding: 32px 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: #FFFFFF; }
.cnp-pd-midcta__text { font-size: 17px; font-weight: 600; }
.cnp-pd-midcta__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cnp-pd-midcta__btn { background: #FFFFFF; color: #0B121A; text-decoration: none; font-weight: 600; font-size: 14px; padding: 12px 20px; border-radius: 10px; white-space: nowrap; transition: transform 0.15s ease; }
.cnp-pd-midcta__btn:hover { transform: translateY(-1px); }
.cnp-pd-midcta__btn--ghost { background: transparent; color: #FFFFFF; border: 1px solid #4D5660; }
.cnp-pd-tech { padding: 64px 0; }
.cnp-pd-tech h2 { font-size: 24px; font-weight: 600; margin: 0 0 20px; color: #0B121A; }
/* align-items: start — without it, CSS Grid's default "stretch" makes the
   shorter column's item (e.g. Gebruikte technologie, when Eigenschappen has
   more entries and wraps to more lines) stretch to match the taller
   column's height; since .cnp-tag-row is itself a wrapping flex row with no
   align-content override, that extra height then stretched the individual
   pills tall instead of just leaving empty space below them. */
.cnp-pd-tech__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; align-items: start; }
.cnp-pd-final-cta { max-width: 1280px; margin: 0 auto; padding: 0 48px 96px; }
.cnp-pd-final-cta__box { background: #B71824; border-radius: 24px; padding: 64px 56px; text-align: center; }
.cnp-pd-final-cta__box h2 { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; color: #FFFFFF; margin: 0 0 16px; }
.cnp-pd-final-cta__box p { font-size: 18px; color: #FCEAE8; margin: 0 0 32px; }
.cnp-pd-final-cta__btn { background: #FFFFFF; color: #B71824; text-decoration: none; font-weight: 600; font-size: 16px; padding: 15px 26px; border-radius: 10px; display: inline-block; transition: transform 0.15s ease; }
.cnp-pd-final-cta__btn:hover { transform: translateY(-1px); }
@media (max-width: 700px) {
  .cnp-pd-stats { grid-template-columns: 1fr; }
  .cnp-pd-cwr__grid { grid-template-columns: 1fr; gap: 40px; }
  /* Gebruikte technologie: minmax(320px, 1fr) forces each tag wider than the
     available mobile column, pushing it past the right edge — same fix as
     .cnp-project-card above, just via a single column instead of min-width:0
     since these badges wrap their own text differently. */
  .cnp-pd-tech__grid { grid-template-columns: 1fr !important; }
}

/* --- Klantenportaal: hide the sitewide marketing header/footer (Theme
   Builder isn't reachable via REST to scope it away per-page, so this body
   class + CSS combo does the same job remotely) --- */
body.cnp-portal-page .cnp-header, body.cnp-portal-page .cnp-footer { display: none !important; }

/* --- Klantenportaal: login (public) --- */
.cnp-portal-login {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px; background: #F3F5F8; font-family: 'Geist', sans-serif;
}
.cnp-portal-login__logo {
  text-decoration: none; display: flex; align-items: baseline; font-weight: 700; font-size: 24px;
  letter-spacing: -0.03em; color: #0B121A; margin-bottom: 36px; transition: opacity 0.15s ease;
}
.cnp-portal-login__logo:hover { opacity: 0.7; }
.cnp-portal-login__card {
  background: #FFFFFF; border: 1px solid #DBDEE2; border-radius: 18px; padding: 40px; width: 100%; max-width: 400px;
  box-shadow: 0 30px 60px -30px rgba(11,18,26,0.12);
}
.cnp-portal-login__eyebrow { font-family: 'Geist Mono', monospace; font-size: 12px; color: #69737D; margin-bottom: 8px; letter-spacing: 0.02em; }
.cnp-portal-login__title { font-size: 22px; font-weight: 700; margin: 0 0 28px; letter-spacing: -0.02em; color: #0B121A; }
.cnp-portal-login__error { background: #FFE6E3; color: #9E141E; border-radius: 10px; padding: 12px 14px; font-size: 14px; margin-bottom: 18px; }
.cnp-portal-login__fields { display: flex; flex-direction: column; gap: 16px; }
.cnp-portal-login__fields label { display: block; font-size: 13px; font-weight: 500; color: #505963; margin-bottom: 6px; }
.cnp-portal-login__fields input {
  width: 100% !important; padding: 13px 14px !important; border-radius: 10px !important; border: 1px solid #D5D8DB !important; font-size: 15px;
  outline: none; font-family: inherit; box-sizing: border-box; transition: border-color 0.15s ease;
}
.cnp-portal-login__fields input:focus { border-color: #B71824; }
.cnp-portal-login__submit {
  background: #B71824; color: #FFFFFF; border: none; font-weight: 600; font-size: 16px; padding: 14px 24px;
  border-radius: 10px; cursor: pointer; margin-top: 8px; width: 100%; transition: background 0.15s ease, transform 0.15s ease;
}
.cnp-portal-login__submit:hover { background: #9B0007; transform: translateY(-1px); }
.cnp-portal-login__forgot { display: block; text-align: center; font-size: 13px; color: #69737D; text-decoration: none; margin-top: 4px; }
.cnp-portal-login__forgot:hover { color: #B71824; }
.cnp-portal-login__footer { text-align: center; font-size: 13px; color: #69737D; margin-top: 22px; }
.cnp-portal-login__footer a { color: #B71824; text-decoration: none; }
.cnp-portal-login__footer a:hover { color: #9B0007; }
.cnp-portal-login__back { margin-top: 28px; color: #69737D; text-decoration: none; font-size: 14px; }
.cnp-portal-login__back:hover { color: #0B121A; }

/* --- Klantenportaal: gated shell (sidebar + main) --- */
.cnp-portal { min-height: 100vh; background: #F3F5F8; font-family: 'Geist', sans-serif; }
.cnp-portal-sidebar {
  /* position:fixed instead of sticky — sticky depends on no ancestor having
  overflow/transform set, which Divi's own section/row/column wrappers around
  the shortcode output aren't guaranteed to respect. Fixed pins the sidebar
  (and its margin-top:auto footer) to the viewport regardless of ancestors,
  independent of how long .cnp-portal-main's content is. */
  width: 240px; flex-shrink: 0; background: #FFFFFF; border-right: 1px solid #DBDEE2; display: flex;
  flex-direction: column; padding: 24px 16px; position: fixed; top: 0; left: 0; height: 100vh; z-index: 20;
}
.cnp-portal-sidebar__logo {
  text-decoration: none; display: flex; align-items: baseline; font-weight: 700; font-size: 19px;
  letter-spacing: -0.03em; color: #0B121A; padding: 0 8px 28px; transition: opacity 0.15s ease;
}
.cnp-portal-sidebar__logo:hover { opacity: 0.7; }
/* ToDo / Feedback-balk bovenaan de klant-projectenpagina */
.cnp-todo { margin-bottom: 24px; display: flex; flex-direction: column; gap: 16px; }
.cnp-todo__block { background: #FFFFFF; border: 1px solid #DBDEE2; border-radius: 14px; padding: 18px 20px; }
.cnp-todo__block--klant { border-color: #F3C6C2; background: #FFF7F6; }
.cnp-todo__title { font-weight: 700; font-size: 15px; color: #0B121A; margin-bottom: 12px; }
.cnp-todo__block--klant .cnp-todo__title { color: #9E141E; }
.cnp-todo__list { display: flex; flex-direction: column; gap: 8px; }
.cnp-todo__item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: #F7F8F9; border: 1px solid #E6E8EB; border-radius: 10px; text-decoration: none; transition: background 0.15s ease; }
.cnp-todo__item:hover { background: #EDEFF1; }
.cnp-todo__block--klant .cnp-todo__item { background: #FFFFFF; border-color: #F3C6C2; }
.cnp-todo__item-titel { font-size: 14px; font-weight: 600; color: #0B121A; }
.cnp-todo__item-meta { font-size: 12px; color: #69737D; }
.cnp-todo__person { margin-top: 14px; }
.cnp-todo__person:first-of-type { margin-top: 0; }
.cnp-todo__person-naam { font-size: 13px; font-weight: 600; color: #505963; margin-bottom: 8px; }
.cnp-todo__item--feedback { cursor: default; }
.cnp-todo__fb-link { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; color: #B71824; text-decoration: none; }
.cnp-todo__fb-link:hover { text-decoration: underline; }
.cnp-todo__fb-nolink { display: inline-block; margin-top: 6px; font-size: 12px; color: #69737D; font-style: italic; }
/* Klant-switcher: keep the closed control within the 240px sidebar and
   ellipsize long klant names. The native open option list is rendered by the
   browser at its own natural width, so the full name is still readable once
   the dropdown is clicked. */
.cnp-portal-sidebar__klant-switch { margin: 10px 0 2px; }
.cnp-portal-sidebar__klant-switch select {
  width: 100%; max-width: 100%; box-sizing: border-box;
  padding: 8px 28px 8px 10px; font-size: 13px; color: #0B121A;
  background: #F3F5F8; border: 1px solid #DBDEE2; border-radius: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.cnp-portal-nav { display: flex; flex-direction: column; gap: 2px; }
.cnp-portal-nav a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; text-decoration: none;
  color: #404952; font-size: 14px; font-weight: 500; transition: background 0.15s ease, color 0.15s ease;
}
.cnp-portal-nav a:hover { background: #F3F5F8; }
.cnp-portal-nav a.is-active { color: #0B121A; font-weight: 600; background: #FFE6E3; }
.cnp-portal-nav a.cnp-portal-nav__locked { justify-content: space-between; color: #7C8186; }
.cnp-portal-nav__lock { font-size: 12px; opacity: 0.7; }
.cnp-portal-sidebar__user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding-top: 20px; border-top: 1px solid #DBDEE2; }
.cnp-portal-sidebar__meta { min-width: 0; }
.cnp-portal-sidebar__avatar {
  width: 32px; height: 32px; border-radius: 50%; background: #0B121A; color: #FFFFFF; display: flex;
  align-items: center; justify-content: center; font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 600; flex-shrink: 0;
}
.cnp-portal-sidebar__name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #0B121A; }
.cnp-portal-sidebar__role { font-size: 11px; color: #69737D; }
.cnp-portal-sidebar__logout { font-size: 12px; color: #69737D; text-decoration: none; }
.cnp-portal-sidebar__logout:hover { color: #9E141E; }
.cnp-portal-main { margin-left: 240px; min-width: 0; }
.cnp-portal-topbar {
  /* position:fixed for the same reason as .cnp-portal-sidebar above — sticky
  silently breaks under a Divi wrapper with overflow/transform set. */
  height: 64px; border-bottom: 1px solid #DBDEE2; background: #FFFFFF; display: flex; align-items: center;
  justify-content: space-between; padding: 0 40px; position: fixed; top: 0; left: 240px; right: 0; z-index: 15;
}
.cnp-portal-topbar__title { font-size: 16px; font-weight: 600; color: #0B121A; }
/* Company switcher — only rendered when an account has 2+ bedrijven, see
   portal-company-switcher.php. .cnp-portal-topbar is already flex with
   space-between, so this naturally lands on the far right as the last child. */
.cnp-bedrijf-switcher { margin: 0; }
.cnp-bedrijf-switcher__select {
  padding: 8px 32px 8px 14px !important; border-radius: 10px !important; border: 1px solid #D5D8DB !important;
  font-size: 13px; font-weight: 500; color: #0B121A; background: #FFFFFF; outline: none; cursor: pointer;
  max-width: 220px; text-overflow: ellipsis;
}
.cnp-bedrijf-switcher__select:focus { border-color: #B71824 !important; }
@media (max-width: 900px) {
  .cnp-bedrijf-switcher__select { max-width: 140px; font-size: 12px; }
}
.cnp-portal-menu-toggle {
  display: none; width: 40px; height: 40px; padding: 9px; border: 0; border-radius: 8px;
  background: transparent; color: #0B121A; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px;
}
.cnp-portal-sidebar__close {
  display: none; align-self: flex-end; width: 32px; height: 32px; margin-bottom: 8px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: #69737D; font-size: 20px; line-height: 1; cursor: pointer;
}
.cnp-portal-sidebar__close:hover { background: #F3F5F8; color: #0B121A; }
.cnp-portal-overlay {
  position: fixed; inset: 0; z-index: 19; border: 0; background: rgba(11,18,26,0.42); cursor: pointer;
}
.cnp-portal-overlay[hidden] { display: none; }
body.cnp-portal-menu-open { overflow: hidden; }
.cnp-portal-content { padding: 104px 40px 40px; max-width: 1180px; }
.cnp-portal-welcome { margin-bottom: 28px; }
.cnp-portal-welcome h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; color: #0B121A; }
.cnp-portal-welcome p { font-size: 15px; color: #505963; margin: 0; }
.cnp-portal-welcome__bedrijven { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; color: #B71824; text-decoration: none; }
.cnp-portal-welcome__bedrijven:hover { color: #9B0007; }
.cnp-portal-placeholder {
  background: #FFFFFF; border: 1px dashed #D5D8DB; border-radius: 14px; padding: 40px; text-align: center;
  color: #69737D; font-size: 14px; margin-top: 8px;
}
.cnp-portal-placeholder-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 8px; }

.cnp-portal-locked {
  background: #FFFFFF; border: 1px solid #DBDEE2; border-radius: 14px; padding: 56px 40px; text-align: center;
  max-width: 480px; margin: 40px auto 0;
}
.cnp-portal-locked__icon { font-size: 28px; margin-bottom: 16px; }
.cnp-portal-locked h2 { font-size: 19px; font-weight: 700; margin: 0 0 10px; color: #0B121A; }
.cnp-portal-locked p { font-size: 14px; color: #505963; line-height: 1.6; margin: 0 0 24px; }

/* --- Dashboard (redesigned, real data) --- */
.cnp-dash-row { display: grid; gap: 16px; margin-bottom: 16px; }
.cnp-dash-row--3 { grid-template-columns: 1.7fr 1fr 1fr; }
.cnp-dash-row--2 { grid-template-columns: 1.3fr 1fr; }
.cnp-dash-health { background: #0B121A; color: #FFFFFF; border-radius: 14px; padding: 24px; display: flex; align-items: center; gap: 20px; }
.cnp-dash-health__circle { width: 72px; height: 72px; flex-shrink: 0; }
.cnp-dash-health__circle .cnp-rapport-scoreCircle__grade { font-size: 22px; }
.cnp-dash-health__live { font-family: 'Geist Mono', monospace; font-size: 11px; color: #8ABD8B; margin-bottom: 6px; letter-spacing: 0.02em; }
.cnp-dash-health__label { font-family: 'Geist Mono', monospace; font-size: 11px; color: #B19895; margin-bottom: 6px; letter-spacing: 0.02em; }
.cnp-dash-health__desc { font-size: 15px; font-weight: 600; }
.cnp-dash-health__link { font-size: 13px; color: #E2AFAA; margin-top: 4px; display: block; text-decoration: none; }
.cnp-dash-health__link:hover { text-decoration: underline; }
.cnp-dash-card { text-decoration: none; color: inherit; background: #FFFFFF; border: 1px solid #DBDEE2; border-radius: 14px; padding: 20px; display: block; }
.cnp-dash-card--link { transition: border-color 0.15s ease, transform 0.15s ease; }
.cnp-dash-card--link:hover { border-color: #A9AFB4; transform: translateY(-2px); }
.cnp-dash-card__label { font-size: 13px; color: #505963; margin-bottom: 10px; }
.cnp-dash-card__value { font-size: 26px; font-weight: 700; margin-bottom: 4px; color: #0B121A; }
.cnp-dash-card__sub { font-size: 13px; color: #505963; }
.cnp-dash-card__sub--accent { color: #9E141E; }
.cnp-dash-panel { background: #FFFFFF; border: 1px solid #DBDEE2; border-radius: 14px; padding: 24px; }
.cnp-dash-panel__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.cnp-dash-panel__title { font-size: 15px; font-weight: 600; color: #0B121A; }
.cnp-dash-listrow { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #E9EBEE; font-size: 14px; color: #0B121A; }
.cnp-dash-listrow:last-child { border-bottom: none; }
.cnp-dash-listrow__meta { font-family: 'Geist Mono', monospace; color: #69737D; white-space: nowrap; }
.cnp-dash-milestone { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; }
.cnp-dash-milestone:last-child { margin-bottom: 0; }
.cnp-dash-milestone__dot { width: 8px; height: 8px; border-radius: 50%; background: #D5D8DB; margin-top: 5px; flex-shrink: 0; }
.cnp-dash-milestone__dot--next { background: #B71824; }
.cnp-dash-milestone__titel { font-size: 14px; font-weight: 500; color: #0B121A; }
.cnp-dash-milestone__datum { font-size: 12px; color: #69737D; }
.cnp-dash-idea-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cnp-dash-idea-card { border: 1px solid #DBDEE2; border-radius: 10px; padding: 16px; }
.cnp-dash-idea-card__titel { font-size: 14px; font-weight: 600; margin-bottom: 6px; color: #0B121A; }
.cnp-dash-idea-card__sub { font-size: 12px; color: #505963; }

/* --- Klantenportaal: Projecten (lijst + detail) --- */
.cnp-proj-shell { display: flex; gap: 24px; align-items: stretch; }
.cnp-proj-list { width: 300px; flex-shrink: 0; background: #FFFFFF; border: 1px solid #DBDEE2; border-radius: 14px; padding: 12px; }
.cnp-proj-list__group { font-family: 'Geist Mono', monospace; font-size: 11px; color: #69737D; letter-spacing: 0.02em; padding: 12px 12px 8px; }
.cnp-proj-list__group:first-child { padding-top: 4px; }
.cnp-proj-list__item { display: block; border-radius: 10px; padding: 14px 12px; text-decoration: none; color: inherit; transition: background 0.15s ease; }
.cnp-proj-list__item:hover { background: #F3F5F8; }
.cnp-proj-list__item--active { background: #FFE6E3; }
.cnp-proj-list__item--active:hover { background: #FFE6E3; }
.cnp-proj-list__titel { font-size: 14px; font-weight: 600; margin-bottom: 4px; color: #0B121A; }
.cnp-proj-list__item--afgerond .cnp-proj-list__titel { color: #404952; font-weight: 500; }
.cnp-proj-list__meta { font-size: 12px; color: #69737D; }
.cnp-proj-list__item--active .cnp-proj-list__meta { color: #9E141E; }
.cnp-proj-progress { height: 5px; border-radius: 100px; background: #F3F5F8; overflow: hidden; margin-bottom: 6px; }
.cnp-proj-progress__fill { height: 100%; background: #B71824; border-radius: 100px; }
.cnp-proj-progress__fill--warning { background: #BB8300; }
.cnp-proj-progress__fill--good { background: #419547; }

.cnp-proj-detail { flex: 1; min-width: 0; }
.cnp-proj-detail__titlerow { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.cnp-proj-detail__titlerow h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.cnp-proj-detail__desc { font-size: 15px; color: #505963; line-height: 1.6; margin: 0 0 24px; max-width: 620px; }

.cnp-proj-roadmap-card { background: #FFFFFF; border: 1px solid #DBDEE2; border-radius: 14px; padding: 28px; margin-bottom: 16px; }
.cnp-proj-roadmap-card__title { font-size: 15px; font-weight: 600; margin-bottom: 22px; }
.cnp-proj-roadmap-row { display: flex; gap: 14px; align-items: flex-start; }
.cnp-proj-roadmap-row--link { text-decoration: none; color: inherit; cursor: pointer; border-radius: 8px; transition: background 0.12s ease; }
.cnp-proj-roadmap-row--link:hover { background: #F3F5F8; }
.cnp-proj-roadmap-uitleg { font-size: 12.5px; color: #69737D; line-height: 1.5; margin-top: 2px; }
.cnp-proj-roadmap-uitleg:empty { display: none; }
.cnp-proj-back { display: inline-block; font-size: 13px; color: #69737D; text-decoration: none; margin-bottom: 10px; }
.cnp-proj-back:hover { color: #B71824; }
.cnp-proj-detail__pagetitle { font-size: 22px; font-weight: 700; color: #0B121A; margin: 0 0 4px; letter-spacing: -0.3px; }
.cnp-proj-roadmap-marker { display: flex; flex-direction: column; align-items: center; }
.cnp-proj-roadmap-badge {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 600; flex-shrink: 0;
}
.cnp-proj-roadmap-badge--afgerond { background: #419547; color: #FFFFFF; }
.cnp-proj-roadmap-badge--bezig { background: #0B121A; color: #FFFFFF; }
.cnp-proj-roadmap-badge--gepland { background: #E5E8EC; color: #69737D; }
.cnp-proj-roadmap-badge--feedback { background: #B71824; color: #FFFFFF; }
.cnp-proj-roadmap-row--feedback .cnp-proj-roadmap-status { color: #B71824; font-weight: 600; }
.cnp-proj-roadmap-line { width: 1px; flex: 1; background: #DBDEE2; margin-top: 4px; }
.cnp-proj-roadmap-row--last .cnp-proj-roadmap-line { display: none; }
.cnp-proj-roadmap-body { padding-bottom: 18px; }
.cnp-proj-roadmap-row--last .cnp-proj-roadmap-body { padding-bottom: 0; }
.cnp-proj-roadmap-titel { font-size: 14px; font-weight: 600; color: #0B121A; }
.cnp-proj-roadmap-row--gepland .cnp-proj-roadmap-titel { font-weight: 500; color: #404952; }
.cnp-proj-roadmap-status { font-size: 13px; color: #69737D; }
.cnp-proj-roadmap-row--bezig .cnp-proj-roadmap-status { color: #9E141E; }

.cnp-proj-comments { margin-top: 14px; padding-top: 14px; border-top: 1px solid #EEF0F2; display: flex; flex-direction: column; gap: 10px; }
.cnp-proj-comments__empty { font-size: 12.5px; color: #9AA3AF; margin: 0; }
.cnp-proj-comment { background: #F9FAFB; border: 1px solid #EEF0F2; border-radius: 8px; padding: 10px 12px; }
.cnp-proj-comment__meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #69737D; margin-bottom: 4px; flex-wrap: wrap; }
.cnp-proj-comment__meta strong { color: #0B121A; font-size: 12.5px; }
.cnp-proj-comment__date { color: #9AA3AF; }
.cnp-proj-comment__tag { background: #F7E3E4; color: #7A0F17; border-radius: 5px; padding: 2px 6px; font-size: 11px; font-weight: 500; }
.cnp-fb-extra { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cnp-fb-extra[hidden] { display: none; }
.cnp-proj-comment__delete { margin: 0 0 0 auto; }
.cnp-proj-comment__delete-btn { background: none; border: none; padding: 0; font-size: 11px; color: #9AA3AF; cursor: pointer; text-decoration: underline; }
.cnp-proj-comment__delete-btn:hover { color: #B71824; }
.cnp-proj-comment__text { font-size: 13px; color: #404952; line-height: 1.5; }
.cnp-proj-comment__bijlagen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cnp-proj-comment__foto { display: block; line-height: 0; }
.cnp-proj-comment__foto img { width: 110px; height: 110px; object-fit: cover; border-radius: 8px; border: 1px solid #E6E8EB; transition: opacity 0.15s ease; }
.cnp-proj-comment__foto:hover img { opacity: 0.85; }
.cnp-proj-comment__bestand { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: #0B121A; background: #FFFFFF; border: 1px solid #DBDEE2; border-radius: 8px; padding: 7px 11px; text-decoration: none; }
.cnp-proj-comment__bestand::before { content: "\1F4CE"; font-size: 12px; }
.cnp-proj-comment__bestand:hover { background: #F3F5F8; }
.cnp-proj-comment-form__file { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #505963; cursor: pointer; }
.cnp-proj-comment-form__file input[type="file"] { max-width: 180px; font-size: 11px; }

.cnp-proj-comment-form { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.cnp-proj-comment-form textarea {
  font-size: 13px; font-weight: 400; padding: 8px 10px; border: 1px solid #D5D8DB; border-radius: 8px;
  font-family: 'Geist', sans-serif; color: #0B121A; background: #FFFFFF; resize: vertical;
}
.cnp-proj-comment-form__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cnp-proj-comment-form__row select {
  font-size: 12px; padding: 5px 8px; border-radius: 6px; border: 1px solid #D5D8DB; font-family: 'Geist', sans-serif;
  color: #0B121A; background: #FFFFFF;
}

.cnp-proj-doclist { display: flex; flex-direction: column; }
.cnp-proj-doclist__row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #E9EBEE; font-size: 14px; }
.cnp-proj-doclist__row:last-child { border-bottom: none; }

/* --- Klantenportaal: forms (Mijn gegevens) --- */
.cnp-portal-card { background: #FFFFFF; border: 1px solid #DBDEE2; border-radius: 14px; padding: 28px; margin-bottom: 20px; max-width: 480px; }
.cnp-portal-card h2 { font-size: 16px; font-weight: 600; margin: 0 0 18px; color: #0B121A; }
.cnp-portal-form { display: flex; flex-direction: column; gap: 16px; }
.cnp-portal-form label { display: block; font-size: 13px; font-weight: 500; color: #505963; margin-bottom: 6px; }
.cnp-portal-form input {
  width: 100% !important; padding: 14px 16px !important; border-radius: 10px !important; border: 1px solid #D5D8DB !important; font-size: 15px;
  outline: none; font-family: inherit; box-sizing: border-box; transition: border-color 0.15s ease;
}
.cnp-portal-form input:focus { border-color: #B71824; }
.cnp-portal-form__submit {
  background: #0B121A; color: #FFFFFF; border: none; font-weight: 600; font-size: 15px; padding: 12px 20px;
  border-radius: 10px; cursor: pointer; align-self: flex-start; transition: background 0.15s ease;
}
.cnp-portal-form__submit:hover { background: #262F38; }
.cnp-portal-form__success { background: #DBF8DA; color: #0C4714; border-radius: 10px; padding: 12px 14px; font-size: 14px; margin-bottom: 16px; }
.cnp-vies-row { display: flex; gap: 8px; }
.cnp-vies-row input { flex: 1; }
.cnp-vies-row .cnp-btn-inline { flex-shrink: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.cnp-vies-lookup-msg { font-size: 13px; margin-top: 6px; }
.cnp-vies-lookup-msg--ok { color: #095717; }
.cnp-vies-lookup-msg--error { color: #9E141E; }
.cnp-vies-spinner { display: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #D5D8DB; border-top-color: #262F38; flex-shrink: 0; }
#cnp-vies-lookup-btn.is-loading .cnp-vies-spinner { display: inline-block; animation: cnp-vies-spin 0.7s linear infinite; }
@keyframes cnp-vies-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.cnp-portal-form textarea {
  width: 100%; padding: 14px 16px; border-radius: 10px; border: 1px solid #D5D8DB; font-size: 15px;
  outline: none; font-family: inherit; box-sizing: border-box; transition: border-color 0.15s ease; resize: vertical;
}
.cnp-portal-form textarea:focus { border-color: #B71824; }

.cnp-2fa-status { font-size: 15px; font-weight: 600; margin: 0 0 16px; }
.cnp-2fa-status--on { color: #036819; }
.cnp-2fa-setup { margin-top: 16px; padding-top: 16px; border-top: 1px solid #DBDEE2; display: flex; flex-direction: column; gap: 14px; }
.cnp-2fa-qr { display: flex; justify-content: center; }
.cnp-2fa-secret { text-align: center; word-break: break-all; }
.cnp-2fa-secret code { background: #F3F5F8; padding: 4px 10px; border-radius: 8px; font-size: 13px; }
.cnp-2fa-recovery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.cnp-2fa-recovery li { font-family: 'Geist Mono', monospace; font-size: 13px; background: #F3F5F8; padding: 6px 10px; border-radius: 6px; text-align: center; }
.cnp-2fa-setup input[type="text"] {
  width: 100% !important; padding: 14px 16px !important; border-radius: 10px !important; border: 1px solid #D5D8DB !important; font-size: 15px;
  outline: none; font-family: inherit; box-sizing: border-box; transition: border-color 0.15s ease;
}
.cnp-2fa-setup input[type="text"]:focus { border-color: #B71824; }
.cnp-2fa-setup label { display: block; font-size: 13px; font-weight: 500; color: #505963; margin-bottom: -6px; }

.cnp-portal-intro { font-size: 15px; color: #505963; margin: 0 0 28px; max-width: 640px; }
.cnp-link { color: #B71824; text-decoration: none; }
.cnp-link:hover { color: #9B0007; }

.cnp-portal-badge {
  display: inline-flex; align-items: center; flex-shrink: 0; padding: 5px 12px; border-radius: 100px;
  font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.cnp-portal-badge--betaald, .cnp-portal-badge--aanvaard { background: #DBF3DB; color: #036819; }
.cnp-portal-badge--open { background: #FFE6E3; color: #9E141E; }
.cnp-portal-badge--vervallen, .cnp-portal-badge--geannuleerd, .cnp-portal-badge--geweigerd { background: #FFE6E3; color: #9E141E; }
.cnp-portal-badge--warning, .cnp-portal-badge--creditnota { background: #FDF0D5; color: #8A5B00; }

/* --- Klantenportaal: Facturen & offertes --- */
.cnp-facturen-content { display: flex; flex-direction: column; gap: 24px; max-width: 880px; }
.cnp-facturen-section__title { font-size: 15px; font-weight: 600; margin-bottom: 12px; color: #0B121A; }
.cnp-facturen-card { background: #FFFFFF; border: 1px solid #DBDEE2; border-radius: 14px; overflow: hidden; }
.cnp-facturen-row {
  display: flex; align-items: center; justify-content: space-between; padding: 18px 24px;
  border-bottom: 1px solid #E9EBEE; transition: background 0.15s ease;
}
.cnp-facturen-row:last-child { border-bottom: none; }
.cnp-facturen-row:hover { background: #F3F5F8; }
.cnp-facturen-row__left { display: flex; align-items: center; gap: 20px; }
.cnp-facturen-row__datum { font-family: 'Geist Mono', monospace; font-size: 13px; color: #69737D; width: 90px; flex-shrink: 0; }
.cnp-facturen-row__titel { font-size: 14px; font-weight: 600; color: #0B121A; }
.cnp-facturen-row__bedrijf {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 100px; background: #F3F5F8;
  color: #505963; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; flex-shrink: 0;
}
.cnp-facturen-row__right { display: flex; align-items: center; gap: 20px; }
.cnp-facturen-row__right .cnp-link { font-size: 13px; }
.cnp-facturen-row__pay { padding: 7px 16px; font-size: 13px; }
.cnp-facturen-row__email { background: none; border: none; padding: 0; font-family: inherit; }
.cnp-facturen-row__email:disabled { color: #69737D; cursor: default; }
@media (max-width: 900px) {
  .cnp-facturen-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cnp-facturen-row__right { flex-wrap: wrap; gap: 12px; }
}

/* --- Klantenportaal: Changelog (tijdlijn) --- */
.cnp-timeline-card { background: #FFFFFF; border: 1px solid #DBDEE2; border-radius: 14px; padding: 32px; max-width: 760px; }
.cnp-timeline-row { display: flex; gap: 20px; }
.cnp-timeline-marker { display: flex; flex-direction: column; align-items: center; }
.cnp-timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: #A9AFB4; flex-shrink: 0; }
.cnp-timeline-dot--recent { background: #B71824; }
.cnp-timeline-line { width: 1px; flex: 1; background: #DBDEE2; margin-top: 4px; }
.cnp-timeline-row--last .cnp-timeline-line { display: none; }
.cnp-timeline-body { padding-bottom: 28px; }
.cnp-timeline-row--last .cnp-timeline-body { padding-bottom: 0; }
.cnp-timeline-datum { font-family: 'Geist Mono', monospace; font-size: 12px; color: #69737D; margin-bottom: 4px; }
.cnp-timeline-titel { font-size: 15px; font-weight: 600; color: #0B121A; }
.cnp-timeline-desc { font-size: 14px; color: #505963; margin: 6px 0 0; max-width: 480px; }

/* --- Klantenportaal: Roadmap (Nu/Binnenkort/Later) --- */
.cnp-roadmap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1080px; }
.cnp-roadmap-kolom-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.cnp-roadmap-dot { width: 8px; height: 8px; border-radius: 50%; }
.cnp-roadmap-dot--nu { background: #B71824; }
.cnp-roadmap-dot--binnenkort { background: #BB8300; }
.cnp-roadmap-dot--later { background: #A9AFB4; }
.cnp-roadmap-kolom-label { font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: #0B121A; }
.cnp-roadmap-kolom-label--binnenkort { color: #505963; }
.cnp-roadmap-kolom-label--later { color: #69737D; }
.cnp-roadmap-items { display: flex; flex-direction: column; gap: 12px; }
.cnp-roadmap-card { background: #FFFFFF; border: 1px solid #DBDEE2; border-radius: 12px; padding: 18px; }
.cnp-roadmap-card--nu { border-left: 3px solid #B71824; }
.cnp-roadmap-card__titel { font-size: 15px; font-weight: 600; color: #0B121A; }
.cnp-roadmap-card__desc { font-size: 13px; color: #69737D; margin-top: 6px; }

/* --- Klantenportaal: Websiteverbeteringen --- */
.cnp-idea-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1000px; }
.cnp-idea-card {
  background: #FFFFFF; border: 1px solid #DBDEE2; border-radius: 14px; padding: 22px; display: flex;
  flex-direction: column; transition: border-color 0.15s ease, transform 0.15s ease;
}
.cnp-idea-card:hover { border-color: #B3B8BE; transform: translateY(-2px); }
.cnp-idea-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.cnp-idea-card__titel { font-size: 16px; font-weight: 600; color: #0B121A; }
.cnp-idea-badge {
  font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 100px;
  white-space: nowrap; flex-shrink: 0;
}
.cnp-idea-badge--hoog { color: #9E141E; background: #FFE6E3; }
.cnp-idea-badge--middel { color: #8C5700; background: #FDF0DC; }
.cnp-idea-badge--laag { color: #505963; background: #E5E8EC; }
.cnp-idea-card__desc { font-size: 14px; color: #505963; line-height: 1.55; margin: 0 0 14px; }
.cnp-idea-card__impact { font-size: 12px; color: #69737D; margin-bottom: 16px; }
.cnp-idea-card__form { margin-top: auto; }
.cnp-idea-card__btn {
  margin-top: auto; width: 100%; padding: 10px 14px; border-radius: 10px; font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer; border: none; background: #B71824; color: #FFFFFF; transition: background 0.15s ease;
}
.cnp-idea-card__btn:hover { background: #9B0007; }
.cnp-idea-card__btn--done {
  background: #E7F2E6; color: #1D5522; border: 1px solid #C2D3C2; cursor: default;
}
.cnp-idea-card__btn--done:hover { background: #E7F2E6; }

/* --- Klantenportaal: Wishlist --- */
.cnp-wishlist-addcard { max-width: 780px; }
.cnp-wishlist-addcard__submitrow { display: flex; justify-content: flex-end; }
.cnp-wishlist-list { display: flex; flex-direction: column; gap: 10px; max-width: 780px; }
.cnp-wishlist-item {
  background: #FFFFFF; border: 1px solid #DBDEE2; border-radius: 12px; padding: 16px 18px; display: flex;
  align-items: flex-start; justify-content: space-between; gap: 14px; transition: border-color 0.15s ease;
}
.cnp-wishlist-item:hover { border-color: #B3B8BE; }
.cnp-wishlist-item__main { min-width: 0; }
.cnp-wishlist-item__titel { font-size: 15px; font-weight: 600; margin-bottom: 4px; color: #0B121A; }
.cnp-wishlist-item__desc { font-size: 13px; color: #505963; line-height: 1.5; margin-bottom: 6px; }
.cnp-wishlist-item__datum { font-family: 'Geist Mono', monospace; font-size: 11px; color: #77818C; }
.cnp-wishlist-item__remove {
  background: none; border: none; color: #77818C; font-size: 13px; text-decoration: none;
  padding: 4px 6px; flex-shrink: 0; opacity: 0; transition: opacity 0.15s ease, color 0.15s ease;
}
.cnp-wishlist-item:hover .cnp-wishlist-item__remove { opacity: 1; }
.cnp-wishlist-item__remove:hover { color: #B71824; }

/* --- Klantenportaal: Besprekingen (read-only) --- */
.cnp-meetings-intro {
  max-width: 900px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  margin-bottom: 20px;
}
.cnp-meetings-intro h2 { margin: 0 0 6px; font-size: 24px; line-height: 1.25; color: #0B121A; }
.cnp-meetings-intro p { margin: 0; max-width: 650px; color: #505963; }
.cnp-meetings-intro__readonly {
  flex-shrink: 0; padding: 5px 10px; border-radius: 100px; background: #E5E8EC; color: #505963;
  font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
}
.cnp-meetings { max-width: 900px; display: flex; flex-direction: column; gap: 16px; }
.cnp-meeting { border: 1px solid #DBDEE2; border-radius: 14px; background: #FFFFFF; overflow: hidden; }
.cnp-meeting__toggle {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 26px 28px; cursor: pointer; list-style: none;
}
.cnp-meeting__toggle::marker { content: ''; }
.cnp-meeting__toggle::-webkit-details-marker { display: none; }
.cnp-meeting__toggle:hover { background: #FAFBFC; }
.cnp-meeting__toggle-main { min-width: 0; }
.cnp-meeting__chevron {
  flex-shrink: 0; margin-top: 5px; color: #69737D; transition: transform 0.2s ease;
}
.cnp-meeting[open] .cnp-meeting__chevron { transform: rotate(180deg); }
.cnp-meeting__body { padding: 0 28px 26px; border-top: 1px solid #EDEFF1; padding-top: 20px; }
.cnp-meeting__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 6px; }
.cnp-meeting__meta time, .cnp-meeting__meta span {
  color: #69737D; font-family: 'Geist Mono', monospace; font-size: 11px;
}
.cnp-meeting__title { margin: 0; color: #0B121A; font-size: 21px; line-height: 1.3; }
.cnp-meeting__attendees { margin: 0 0 16px; color: #505963; font-size: 13px; }
.cnp-meeting__samenvatting { color: #303942; }
.cnp-meeting__samenvatting > :last-child { margin-bottom: 0; }
.cnp-meeting__section { margin-top: 24px; }
.cnp-meeting__section h3 {
  margin: 0 0 10px; color: #0B121A; font-family: 'Geist Mono', monospace; font-size: 12px;
  font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
}
.cnp-meeting__topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cnp-meeting__topic { padding: 14px 16px; border-radius: 10px; background: #F3F5F8; color: #303942; font-size: 13px; }
.cnp-meeting__topic > div { margin-top: 5px; color: #505963; }
.cnp-meeting__topic p { margin: 0 0 5px; }
.cnp-meeting__topic p:last-child { margin-bottom: 0; }
.cnp-meeting__decisions { margin: 0; padding-left: 21px; color: #303942; }
.cnp-meeting__decisions li + li { margin-top: 7px; }
.cnp-meeting__actions { display: flex; flex-direction: column; gap: 8px; }
.cnp-meeting__action {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 13px 14px; border: 1px solid #E1E4E7; border-radius: 10px;
}
.cnp-meeting__action-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; color: #303942; }
.cnp-meeting__action-main span { color: #69737D; font-size: 12px; }
.cnp-meeting__status {
  flex-shrink: 0; padding: 4px 9px; border-radius: 100px; background: #FDF0DC; color: #8C5700;
  font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 600;
}
.cnp-meeting__status--bezig { background: #E8EFFA; color: #315C91; }
.cnp-meeting__status--afgerond { background: #E7F2E6; color: #1D5522; }

@media (max-width: 900px) {
  .cnp-header__nav { display: none; }
  .cnp-header__menu-toggle { display: flex; }
  .cnp-portal-sidebar {
    display: flex; transform: translateX(-102%); transition: transform 0.2s ease; box-shadow: 18px 0 36px -26px rgba(11,18,26,0.45);
  }
  .cnp-portal-sidebar.is-mobile-open { transform: translateX(0); }
  .cnp-portal-main { margin-left: 0; }
  .cnp-portal-topbar { left: 0; }
  .cnp-portal-menu-toggle { display: flex; }
  .cnp-portal-sidebar__close { display: flex; align-items: center; justify-content: center; }
  .cnp-portal-content { padding: 88px 20px 24px; }
  .cnp-roadmap-grid, .cnp-idea-grid { grid-template-columns: 1fr; }
  .cnp-dash-row--3, .cnp-dash-row--2, .cnp-dash-idea-grid { grid-template-columns: 1fr; }
  .cnp-dash-health { flex-direction: column; align-items: flex-start; text-align: left; }
  .cnp-proj-shell { flex-direction: column; }
  .cnp-proj-list { width: 100%; }
  .cnp-meetings-intro { flex-direction: column; gap: 12px; }
  .cnp-meeting__topics { grid-template-columns: 1fr; }
  .cnp-meeting__action { flex-direction: column; gap: 10px; }
}

/* --- SiteCheck rapport (ScanResultaat) --- */
.cnp-rapport { font-family: 'Geist', sans-serif; background: transparent; color: #0B121A; }
.cnp-rapport-section { max-width: 1000px; margin: 0 auto; padding: 20px 48px; }
/* Rapport rendered inline in the portal (portal-sitecheck.php) already sits
inside .cnp-portal-content's own padding/max-width — drop the report's own
horizontal padding/cap there instead of stacking both. */
.cnp-portal-content .cnp-rapport-section { max-width: none; padding-left: 0; padding-right: 0; }
.cnp-portal-content > .cnp-rapport-card,
.cnp-portal-content > .cnp-wh-splitrow,
.cnp-portal-content > .cnp-wh-disclosure,
.cnp-portal-content > .cnp-wh-empty,
.cnp-portal-content > .cnp-wh-hero {
  margin-bottom: 24px;
}
.cnp-rapport-section--split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cnp-rapport-notfound { max-width: 640px; margin: 80px auto; text-align: center; font-size: 17px; color: #505963; }
.cnp-rapport-notfound .cnp-btn-inline { margin-top: 20px; }

.cnp-rapport-newscan { background: #F3F5F8; border-bottom: 1px solid #DBDEE2; padding: 20px 48px; }
.cnp-rapport-newscan form { max-width: 1000px; margin: 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cnp-rapport-newscan span { font-family: 'Geist Mono', monospace; font-size: 13px; color: #505963; white-space: nowrap; }
.cnp-rapport-newscan input {
  flex: 1; min-width: 220px; padding: 15px 18px !important; border-radius: 10px !important; border: 1px solid #D5D8DB !important;
  background: #FFFFFF; font-size: 15px; outline: none; font-family: inherit; box-sizing: border-box;
}

.cnp-rapport-hero { padding-top: 56px; }
.cnp-rapport-eyebrow { font-family: 'Geist Mono', monospace; font-size: 13px; color: #69737D; margin-bottom: 16px; }
.cnp-rapport-hero h1 { font-size: 40px; line-height: 1.1; letter-spacing: -0.03em; font-weight: 700; margin: 0 0 14px; }
.cnp-rapport-hero > p { font-size: 17px; color: #505963; margin: 0 0 32px; }
.cnp-rapport-hero__hint { font-size: 14px; color: #69737D; margin: -20px 0 32px; }

.cnp-rapport-titlebar {
  border: 1px solid #DBDEE2; border-radius: 18px; padding: 28px 32px; display: flex;
  align-items: center; gap: 24px; flex-wrap: wrap; background: #FFFFFF;
}
.cnp-rapport-scoreCircle {
  width: 76px; height: 76px; border-radius: 50%; border: 5px solid #419547; display: flex;
  flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0;
}
.cnp-rapport-scoreCircle--lg { width: 110px; height: 110px; border-width: 7px; }
.cnp-rapport-scoreCircle__grade { font-size: 24px; font-weight: 700; }
.cnp-rapport-scoreCircle--lg .cnp-rapport-scoreCircle__grade { font-size: 32px; }
.cnp-rapport-scoreCircle__score { font-family: 'Geist Mono', monospace; font-size: 11px; color: #505963; }
.cnp-rapport-scoreCircle--lg .cnp-rapport-scoreCircle__score { color: #A9AFB4; }
.cnp-rapport-domain { font-size: 18px; font-weight: 600; }
.cnp-rapport-domain--light { font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 400; color: #8B9095; letter-spacing: 0.02em; margin-bottom: 12px; }
.cnp-rapport-scandate { font-family: 'Geist Mono', monospace; font-size: 13px; color: #69737D; margin-top: 4px; }

.cnp-rapport-darkcard {
  background: #0B121A; border-radius: 20px; padding: 40px; display: grid; grid-template-columns: auto 1fr;
  gap: 32px; align-items: center; color: #FFFFFF;
}
.cnp-rapport-verdict { font-size: 19px; line-height: 1.5; margin: 0 0 18px; color: #EFF2F5; }
.cnp-rapport-metafacts { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: #A9AFB4; }
.cnp-rapport-metafacts strong { color: #FFFFFF; }

@media (max-width: 900px) {
  .cnp-rapport-darkcard { grid-template-columns: 1fr; }
  .cnp-rapport-titlebar { flex-direction: column; align-items: flex-start; }
}

.cnp-rapport-card { border: 1px solid #DBDEE2; border-radius: 18px; padding: 32px; background: #FFFFFF; }
.cnp-rapport-cardhead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.cnp-rapport-cardlabel { font-family: 'Geist Mono', monospace; font-size: 13px; color: #69737D; letter-spacing: 0.02em; margin-bottom: 20px; }
.cnp-rapport-cardhead .cnp-rapport-cardlabel { margin-bottom: 0; }
.cnp-rapport-cardintro { font-size: 15px; line-height: 1.6; color: #505963; margin: 0; }
.cnp-rapport-cardtitle { font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.cnp-rapport-card h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 16px; }

.cnp-rapport-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 24px; }
.cnp-rapport-cat-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 8px; }
.cnp-rapport-cat-row span:last-child { font-family: 'Geist Mono', monospace; color: #505963; }

.cnp-rapport-bar { height: 7px; border-radius: 100px; background: #E5E8EC; overflow: hidden; }
.cnp-rapport-bar--pending { background: repeating-linear-gradient(45deg, #E5E8EC, #E5E8EC 4px, #F3F5F8 4px, #F3F5F8 8px); }
.cnp-rapport-bar__fill { height: 100%; border-radius: 100px; background: #419547; width: var(--w, 0%); }
.cnp-rapport-bar__fill--warning { background: #BB8300; }
.cnp-rapport-bar__fill--critical { background: #D74745; }
.cnp-rapport-bar__fill--info { background: #69737D; }
.cnp-rapport-bar__fill--accent { background: #B71824; }

.cnp-rapport-scorepill {
  font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 600; color: #9E141E;
  background: #FFE6E3; padding: 6px 14px; border-radius: 100px;
}

.cnp-rapport-vitals-risk {
  display: inline-flex; font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 600; padding: 8px 16px;
  border-radius: 100px; margin-bottom: 18px;
}
.cnp-rapport-vitals-risk--ok { background: #DBF3DB; color: #036819; }
.cnp-rapport-vitals-risk--warning { background: #FDF0DC; color: #8C5700; }
.cnp-rapport-vitals-risk--critical { background: #FFE6E3; color: #97000F; }

.cnp-rapport-pitfall { display: flex; gap: 16px; margin-bottom: 22px; }
.cnp-rapport-pitfall:last-child { margin-bottom: 0; }
.cnp-rapport-pitfall__n {
  width: 30px; height: 30px; border-radius: 50%; background: #0B121A; color: #FFFFFF; display: flex;
  align-items: center; justify-content: center; font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 600; flex-shrink: 0;
}
.cnp-rapport-pitfall__title { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.cnp-rapport-pitfall__title span { color: #C53637; }
.cnp-rapport-pitfall p { font-size: 15px; color: #505963; line-height: 1.55; margin: 0; }

.cnp-rapport-techgroup { margin-bottom: 22px; }
.cnp-rapport-techgroup:last-child { margin-bottom: 0; }
.cnp-rapport-techgroup__label { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.cnp-rapport-techgroup__tags { display: flex; flex-wrap: wrap; gap: 10px; }
.cnp-rapport-tag {
  font-size: 14px; color: #1D252D; background: #F3F5F8; border: 1px solid #DBDEE2; padding: 8px 14px; border-radius: 100px;
}

.cnp-rapport-simplerow { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #E9EBEE; font-family: 'Geist Mono', monospace; font-size: 14px; }
.cnp-rapport-simplerow:last-child { border-bottom: none; }
.cnp-rapport-simplerow__status { font-family: 'Geist', sans-serif; font-size: 13px; font-weight: 600; }
.cnp-rapport-simplerow__status--ok { color: #036819; }
.cnp-rapport-simplerow__status--warning, .cnp-rapport-simplerow__status--critical { color: #97000F; }
.cnp-rapport-simplerow__status--info { color: #69737D; }

.cnp-rapport-metricbar { margin-bottom: 18px; }
.cnp-rapport-metricbar:last-child { margin-bottom: 0; }
.cnp-rapport-metricbar__row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.cnp-rapport-metricbar__row span:last-child { font-family: 'Geist Mono', monospace; font-weight: 600; }

.cnp-rapport-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid #E9EBEE; }
.cnp-rapport-row:last-child { border-bottom: none; }
.cnp-rapport-row__left { display: flex; align-items: center; gap: 14px; }
.cnp-rapport-row__icon { font-size: 16px; width: 18px; text-align: center; flex-shrink: 0; }
.cnp-rapport-row__icon--ok { color: #419547; }
.cnp-rapport-row__icon--warning { color: #BB8300; }
.cnp-rapport-row__icon--critical { color: #D74745; }
.cnp-rapport-row__icon--info { color: #69737D; }
.cnp-rapport-row__label { font-size: 15px; font-weight: 600; }
.cnp-rapport-row__measured { font-family: 'Geist Mono', monospace; font-size: 13px; color: #69737D; }
.cnp-rapport-badge { font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: 0.02em; white-space: nowrap; font-weight: 600; }
.cnp-rapport-badge--ok { color: #419547; }
.cnp-rapport-badge--warning { color: #BB8300; }
.cnp-rapport-badge--critical { color: #D74745; }
.cnp-rapport-badge--info { color: #69737D; }

.cnp-rapport-kv { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 10px; }
.cnp-rapport-kv:last-child { margin-bottom: 0; }
.cnp-rapport-kv span { color: #505963; }

.cnp-rapport-compare-row { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 8px; }
.cnp-rapport-compare-row span:first-child { font-weight: 600; }
.cnp-rapport-compare-row--accent span:first-child { color: #9E141E; }
.cnp-rapport-compare-row span:last-child { font-family: 'Geist Mono', monospace; }
.cnp-rapport-card .cnp-rapport-bar { margin-bottom: 20px; }
.cnp-rapport-card .cnp-rapport-cardintro { margin-top: 20px; }

.cnp-rapport-pricecta { background: #11171D; border-radius: 20px; padding: 36px 40px; color: #FFFFFF; }
.cnp-rapport-pricecta p { font-size: 17px; line-height: 1.6; margin: 0 0 24px; color: #DBDEE1; }
.cnp-rapport-ownership {
  background: #FFE6E3; border-radius: 16px; padding: 22px 28px; text-align: center; font-size: 15px;
  font-weight: 500; color: #8A0314;
}

.cnp-rapport-nextstep h2 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 24px; }
.cnp-rapport-nextstep-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.cnp-rapport-nextstep-card {
  text-decoration: none; color: inherit; background: #FFFFFF; border: 1px solid #DBDEE2; border-radius: 16px; padding: 26px; display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.cnp-rapport-nextstep-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px #0F171F; border-color: #B3B8BE; }
.cnp-rapport-nextstep-card h3 { font-size: 17px; font-weight: 600; margin: 0 0 8px; }
.cnp-rapport-nextstep-card p { font-size: 14px; color: #505963; line-height: 1.5; margin: 0 0 14px; }

@media (max-width: 900px) {
  .cnp-rapport-section--split, .cnp-rapport-cat-grid, .cnp-rapport-nextstep-grid { grid-template-columns: 1fr; }
  .cnp-rapport-section { padding: 16px 24px; }
}

/* --- ScanPreview (anonieme samenvatting + unlock-funnel, dark card) --- */
.cnp-preview-card { background: #0B121A; border-radius: 20px; padding: 40px; color: #FFFFFF; }
.cnp-preview-headrow { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; margin-bottom: 36px; }
.cnp-preview-headrow h2 { font-size: 21px; font-weight: 600; margin: 0 0 10px; color: #FFFFFF !important; }
.cnp-preview-headrow p { font-size: 15px; line-height: 1.6; color: #B3B8BE; margin: 0 0 16px; }
.cnp-preview-eyebrow { font-family: 'Geist Mono', monospace; font-size: 12px; color: #B19895; margin-bottom: 10px; letter-spacing: 0.02em; }
.cnp-preview-pill {
  display: inline-flex; align-items: center; gap: 8px; background: #FFE6E3; color: #9E141E;
  font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 100px;
}
.cnp-preview-catsection { border-top: 1px solid #303942; padding-top: 28px; margin-bottom: 28px; }
.cnp-preview-catlabel { font-family: 'Geist Mono', monospace; font-size: 12px; color: #8B9095; margin-bottom: 20px; letter-spacing: 0.02em; }
.cnp-preview-catgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 24px; }
.cnp-preview-catrow { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; color: #CBCED1; }
.cnp-preview-catrow span:last-child { font-family: 'Geist Mono', monospace; color: #FFFFFF; }
.cnp-preview-catbar { height: 7px; border-radius: 100px; background: #232A30; overflow: hidden; }
.cnp-preview-catbar__fill { height: 100%; border-radius: 100px; background: #419547; width: var(--w, 0%); }
.cnp-preview-catbar__fill--warning { background: #BB8300; }
.cnp-preview-catbar__fill--critical { background: #D74745; }
.cnp-preview-unlock { border-top: 1px solid #303942; padding-top: 28px; }
@media (max-width: 900px) {
  .cnp-preview-headrow, .cnp-preview-catgrid { grid-template-columns: 1fr; }
}
.cnp-preview-unlock h3 { font-size: 17px; font-weight: 600; margin: 0 0 14px; color: #FFFFFF !important; }
.cnp-preview-unlock .cnp-scanner-field label { color: #A9AFB4; }
.cnp-preview-unlock .cnp-scanner-form { max-width: none; margin: 0; align-items: flex-start; }
.cnp-preview-checkbox-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #9A9FA5; margin-top: 14px; line-height: 1.5; }
.cnp-preview-checkbox-row input { margin-top: 3px; flex-shrink: 0; }
.cnp-preview-checkbox-row a { color: #E2AFAA; }
.cnp-preview-verified__label { font-family: 'Geist Mono', monospace; font-size: 13px; color: #419547; margin-bottom: 6px; }
.cnp-preview-verified p { font-size: 15px; color: #CBCED1; margin: 0; }
.cnp-preview-footnote { font-size: 13px; line-height: 1.6; color: #69737D; margin: 0; }

/* --- Portaal SiteCheck --- */
.cnp-sitecheck-domain { font-size: 18px; font-weight: 600; }
.cnp-sitecheck-scanform { margin-top: 16px; }

/* --- Portaal Website Health --- */
.cnp-wh-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.cnp-wh-dot--ok { background: #419547; }
.cnp-wh-dot--warn { background: #BB8300; }
.cnp-wh-dot--bad { background: #B71824; }
.cnp-wh-dot--unknown, .cnp-wh-dot--none { background: #A9AFB4; }

/* --- Portaal Website Health: 30-dagen uptime-geschiedenis --- */
.cnp-wh-uptimebar__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.cnp-wh-uptimebar__head .cnp-rapport-cardtitle { margin-bottom: 0; }
.cnp-wh-uptimebar__pct { font-family: 'Geist Mono', monospace; font-size: 14px; color: #69737D; }
.cnp-wh-uptimebar__blocks { display: flex; gap: 4px; }
.cnp-wh-uptimebar__block { flex: 1; height: 40px; border-radius: 4px; }
.cnp-wh-uptimebar__block--ok { background: #419547; }
.cnp-wh-uptimebar__block--warn { background: #BB8300; }
.cnp-wh-uptimebar__block--bad { background: #B71824; }
.cnp-wh-uptimebar__range { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: #69737D; }
.cnp-wh-uptimebar__legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 20px; padding-top: 20px;
  border-top: 1px solid #E9EBEE; font-size: 13px; color: #505963;
}
.cnp-wh-uptimebar__legenditem { display: inline-flex; align-items: center; gap: 8px; }
.cnp-wh-uptimebar__swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; display: inline-block; }
.cnp-wh-uptimebar__monitor { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; }
@media (max-width: 640px) {
  .cnp-wh-uptimebar__block { height: 28px; }
  .cnp-wh-uptimebar__monitor { margin-left: 0; }
}

.cnp-wh-hero { background: #0B121A; color: #FFFFFF; border-radius: 16px; padding: 26px 30px; margin-bottom: 20px; }
.cnp-wh-hero__status { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 8px; }
.cnp-wh-statusgroup { display: inline-flex; align-items: center; gap: 7px; }
.cnp-wh-hero__statuslabel { font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.cnp-wh-hero__score { font-family: 'Geist Mono', monospace; font-size: 13px; color: #B9BEC4; margin-left: 4px; }
.cnp-wh-hero__meta { font-size: 13px; color: #A9AFB4; }

.cnp-wh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; }
.cnp-wh-card {
  text-decoration: none; color: inherit; background: #FFFFFF; border: 1px solid #DBDEE2; border-radius: 14px;
  padding: 20px; display: block; transition: border-color 0.15s ease, transform 0.15s ease;
}
.cnp-wh-card:hover { border-color: #A9AFB4; transform: translateY(-2px); }
.cnp-wh-card__top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cnp-wh-card__label { font-size: 14px; font-weight: 600; color: #0B121A; }
.cnp-wh-card__score { font-size: 22px; font-weight: 700; color: #0B121A; margin-bottom: 10px; }
.cnp-wh-card__link { font-size: 13px; color: #B71824; }

.cnp-wh-backlink { display: inline-flex; align-items: center; gap: 8px; color: #505963; text-decoration: none; font-size: 14px; }
.cnp-wh-backlink:hover { color: #0B121A; }

.cnp-wh-crumb { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.cnp-wh-crumb a { color: #69737D; text-decoration: none; }
.cnp-wh-crumb a:hover { color: #0B121A; }
.cnp-wh-crumb span { color: #A9AFB4; }
.cnp-wh-crumb__current { font-weight: 600; color: #0B121A !important; }

.cnp-wh-empty {
  background: #FFFFFF; border: 1px solid #DBDEE2; border-radius: 14px; padding: 56px 40px; text-align: center;
  max-width: 480px; margin: 40px auto 0;
}
.cnp-wh-empty h2 { font-size: 19px; font-weight: 700; margin: 0 0 10px; color: #0B121A; }
.cnp-wh-empty p { font-size: 14px; color: #505963; line-height: 1.6; margin: 0 0 24px; }

/* --- Website Tracking (portaal: Search Console + GA4) --- */
.cnp-track-mono { font-family: 'Geist Mono', monospace; }

.cnp-track-pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.cnp-track-pagehead__title { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; color: #0B121A; }
.cnp-track-pagehead__meta { font-size: 13px; color: #5B6570; margin-top: 4px; }
.cnp-track-visible-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 7px 14px; border-radius: 100px; background: #E4EEE5; color: #2E6B32; white-space: nowrap; }
.cnp-track-pagehead__badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cnp-track-dr-badge { display: flex; align-items: center; gap: 8px; background: #FFFFFF; border: 1px solid #DBDEE2; border-radius: 100px; padding: 5px 14px 5px 5px; }
.cnp-track-dr-badge__value { width: 30px; height: 30px; border-radius: 50%; background: #0B121A; color: #FFFFFF; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cnp-track-dr-badge__label { font-size: 10.5px; line-height: 1.3; color: #5B6570; }
.cnp-track-dr-badge__label a { color: #B71824; text-decoration: none; }
.cnp-track-dr-badge__label a:hover { text-decoration: underline; }
.cnp-track-dr-badge__trend { display: flex; align-items: center; gap: 6px; padding-left: 10px; margin-left: 2px; border-left: 1px solid #DBDEE2; font-size: 10.5px; line-height: 1.3; color: #5B6570; white-space: nowrap; }
.cnp-track-dr-badge__trend.is-up { color: #1d7a3a; }
.cnp-track-dr-badge__trend.is-down { color: #B71824; }
.cnp-track-dr-badge__spark { display: block; flex-shrink: 0; }

.cnp-track-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; background: #FFFFFF; border: 1px solid #DBDEE2; border-radius: 12px; padding: 10px 12px; margin-bottom: 16px; }
.cnp-track-toolbar__group { display: flex; align-items: center; gap: 10px; }
.cnp-track-toolbar__label { font-size: 12px; color: #5B6570; padding-left: 4px; }
.cnp-track-period { display: inline-flex; gap: 4px; }
.cnp-track-period__option { font-size: 13px; padding: 7px 14px; border-radius: 100px; color: #5B6570; text-decoration: none; white-space: nowrap; }
.cnp-track-period__option:hover { background: #F0F1F4; }
.cnp-track-period__option.is-active { background: #0B121A; color: #FFFFFF; font-weight: 500; }
.cnp-track-segmented { display: flex; gap: 4px; background: #F0F1F4; border-radius: 100px; padding: 3px; }
.cnp-track-segmented__option { font-size: 13px; padding: 6px 14px; border-radius: 100px; color: #5B6570; text-decoration: none; white-space: nowrap; }
.cnp-track-segmented__option.is-active { background: #FFFFFF; color: #0B121A; font-weight: 500; box-shadow: 0 1px 2px rgba(11,18,26,0.08); }

.cnp-track-legend-strip { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; background: #FFFFFF; border: 1px solid #DBDEE2; border-radius: 12px; padding: 13px 18px; margin-bottom: 20px; }
.cnp-track-legend-strip__label { font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #5B6570; white-space: nowrap; }
.cnp-track-legend-strip__item { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: #5B6570; white-space: nowrap; }

.cnp-track-badge { display: inline-flex; align-items: center; border-radius: 6px; padding: 3px 7px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.cnp-track-badge--good { background: #E4EEE5; color: #2E6B32; }
.cnp-track-badge--bad { background: #F7E3E4; color: #7A0F17; }
.cnp-track-badge--neutral { background: #F0F1F4; color: #5B6570; }

.cnp-track-panel { border-radius: 14px; padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 22px; margin-bottom: 20px; }
.cnp-track-panel--dark { background: #0B121A; }
.cnp-track-panel--light { background: #FFFFFF; border: 1px solid #DBDEE2; }
.cnp-track-panel--dark .cnp-track-badge--good { background: #20301F; color: #7FBE85; }
.cnp-track-panel--dark .cnp-track-badge--bad { background: #3A2024; color: #F3B4B9; }
.cnp-track-panel--dark .cnp-track-badge--neutral { background: #232A33; color: #9AA3AF; }

.cnp-track-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.cnp-track-panel__title { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: #FFFFFF; }
.cnp-track-panel--light .cnp-track-panel__title { color: #0B121A; }
.cnp-track-panel__dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.cnp-track-panel__subtitle { font-size: 13px; color: #9AA3AF; padding-left: 18px; margin-top: 5px; }
.cnp-track-panel--light .cnp-track-panel__subtitle { color: #5B6570; }
.cnp-track-panel__sourcebadge { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #2C333C; border-radius: 100px; padding: 6px 12px; font-family: 'Geist Mono', monospace; font-size: 11px; color: #9AA3AF; white-space: nowrap; }
.cnp-track-panel__sourcebadge--light { border-color: #DBDEE2; color: #5B6570; }

.cnp-track-tile2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cnp-track-tile2 { background: #1D222A; border-radius: 11px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.cnp-track-tile2--light { background: #F7F8F9; border: 1px solid #E6E8EB; }
.cnp-track-tile2__label { font-size: 13px; color: #9AA3AF; }
.cnp-track-tile2--light .cnp-track-tile2__label { color: #5B6570; }
.cnp-track-tile2__valuerow { display: flex; align-items: baseline; gap: 10px; }
.cnp-track-tile2__value { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: #FFFFFF; }
.cnp-track-tile2--light .cnp-track-tile2__value { color: #0B121A; }
.cnp-track-tile2__explain { font-size: 12px; color: #9AA3AF; line-height: 1.45; }
.cnp-track-tile2--light .cnp-track-tile2__explain { color: #5B6570; }

.cnp-track-chart-titlerow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.cnp-track-chart-title { font-size: 14px; font-weight: 500; color: #0B121A; }
.cnp-track-info-pill { display: inline-flex; align-items: center; background: #F7F8F9; border: 1px solid #E6E8EB; border-radius: 100px; padding: 5px 12px; font-size: 11.5px; color: #5B6570; white-space: nowrap; }
.cnp-track-chart-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12px; color: #5B6570; margin-top: 10px; padding-top: 10px; border-top: 1px solid #EDEFF1; }
.cnp-track-chart-legend--dark { color: #9AA3AF; border-top: none; margin-top: 0; padding-top: 0; }
.cnp-track-chart-legend__swatch { display: inline-block; width: 14px; height: 2.5px; border-radius: 2px; background: #B71824; margin-right: 6px; vertical-align: middle; }
.cnp-track-chart-legend__swatch--dashed { height: 0; border-top: 2px dashed #8992A0; background: none; }
.cnp-track-chart-subnote { font-size: 12.5px; color: #5B6570; margin: -12px 0 20px; }

.cnp-track-sparkline { background: #FFFFFF; border: 1px solid #DBDEE2; border-radius: 11px; padding: 20px 22px 16px; position: relative; }
/* aspect-ratio must match the PHP-side $chart_width/$chart_height (640/170) exactly, so the SVG scales uniformly with no letterboxing — keeps circles round and text undistorted without needing preserveAspectRatio="none". */
.cnp-track-sparkline svg { display: block; width: 100%; height: auto; aspect-ratio: 640 / 170; }
.cnp-track-sparkline__tooltip {
  position: absolute; transform: translate(-50%, calc(-100% - 10px)); background: #0B121A; color: #FFFFFF;
  font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 6px; white-space: nowrap; pointer-events: none;
  transition: opacity 0.1s ease;
}
.cnp-track-sparkline__tooltip--dark { background: #FFFFFF; color: #0B121A; }

.cnp-track-dual { background: #1D222A; border-radius: 11px; padding: 20px 22px 16px; display: flex; flex-direction: column; gap: 16px; }
.cnp-track-dual__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.cnp-track-dual__title { font-size: 14px; font-weight: 500; color: #FFFFFF; }
.cnp-track-dual__subtitle { font-size: 12.5px; color: #9AA3AF; margin-top: 3px; }
.cnp-track-dual__chart { position: relative; }
.cnp-track-dual__chart svg { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 168; }
.cnp-track-dual__axis { display: flex; align-items: center; justify-content: space-between; font-family: 'Geist Mono', monospace; font-size: 11px; color: #9AA3AF; border-top: 1px solid #2C333C; padding-top: 10px; }

.cnp-track-row2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; }
.cnp-track-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cnp-track-row2even { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.cnp-track-subcard { border-radius: 11px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cnp-track-panel--dark .cnp-track-subcard { background: #1D222A; }
.cnp-track-panel--light .cnp-track-subcard { background: #FFFFFF; border: 1px solid #E6E8EB; }
.cnp-track-subcard__title { font-size: 14px; font-weight: 500; color: #FFFFFF; }
.cnp-track-panel--light .cnp-track-subcard__title { color: #0B121A; }
.cnp-track-subcard__subtitle { font-size: 12.5px; color: #9AA3AF; margin-top: -8px; }
.cnp-track-panel--light .cnp-track-subcard__subtitle { color: #5B6570; }
.cnp-track-subcard__foot { font-size: 12.5px; color: #9AA3AF; border-top: 1px solid #2C333C; padding-top: 12px; line-height: 1.5; }
.cnp-track-panel--light .cnp-track-subcard__foot { color: #5B6570; border-top-color: #E6E8EB; }
.cnp-track-subcard__empty { font-size: 13px; color: #9AA3AF; }
.cnp-track-panel--light .cnp-track-subcard__empty { color: #5B6570; }

.cnp-track-tablewrap { overflow-x: auto; }
.cnp-track-queries { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 13px; }
.cnp-track-queries th, .cnp-track-queries td { border: none !important; }
.cnp-track-queries th { font-family: 'Geist Mono', monospace; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: #FFFFFF !important; text-align: left; border-bottom: 1px solid #555555 !important; padding-bottom: 8px; }
.cnp-track-queries th:not(:first-child), .cnp-track-queries td:not(:first-child) { text-align: right; }
.cnp-track-queries td { color: #B9BEC4; padding-top: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0; }
.cnp-track-queries td:not(:first-child) { color: #9AA3AF; white-space: nowrap; max-width: none; }
.cnp-track-queries__pos--good { color: #7FBE85 !important; font-weight: 500; }

.cnp-track-bar-row { display: flex; align-items: center; gap: 10px; }
.cnp-track-bar-row__label { width: 110px; flex-shrink: 0; font-size: 12.5px; color: #EDEFF2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnp-track-panel--light .cnp-track-bar-row__label { width: auto; max-width: 130px; color: #13181F; }
.cnp-track-bar-row__track { flex: 1; height: 9px; border-radius: 100px; background: #232A33; overflow: hidden; }
.cnp-track-panel--light .cnp-track-bar-row__track { background: #F0F1F4; }
.cnp-track-bar-row__track div { height: 100%; background: #B71824; }
.cnp-track-bar-row__value { width: 32px; text-align: right; flex-shrink: 0; font-size: 12.5px; font-weight: 500; color: #FFFFFF; }
.cnp-track-panel--light .cnp-track-bar-row__value { font-weight: 400; color: #5B6570; }
.cnp-track-bar-row__value--strong { color: #FFFFFF; }
.cnp-track-bar-row--highlight .cnp-track-bar-row__track div { background: #6C4FD9; }
.cnp-track-bar-row--highlight .cnp-track-bar-row__label { font-weight: 500; }
.cnp-track-ai-stat { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #13181F; border-top: 1px solid #E6E8EB; margin-top: 4px; padding-top: 12px; }
.cnp-track-panel--dark .cnp-track-ai-stat { color: #EDEFF2; border-top-color: #2C333C; }
.cnp-track-ai-stat__dot { width: 7px; height: 7px; border-radius: 2px; background: #6C4FD9; flex-shrink: 0; }
.cnp-track-ai-stat strong { font-weight: 600; }

.cnp-track-heatmap { display: flex; flex-direction: column; gap: 3px; }
.cnp-track-heatmap__row { display: flex; align-items: center; gap: 6px; }
.cnp-track-heatmap__daylabel { width: 24px; flex-shrink: 0; font-size: 11px; color: #5B6570; }
.cnp-track-heatmap__cells { flex: 1; display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; }
.cnp-track-heatmap__cell { aspect-ratio: 1; border-radius: 2px; min-width: 0; }
.cnp-track-heatmap__hourlabel { font-size: 9px; color: #A8AFB8; text-align: center; }

.cnp-track-stackbar { display: flex; height: 12px; border-radius: 100px; overflow: hidden; gap: 2px; }
.cnp-track-devicelegend { display: flex; flex-direction: column; gap: 9px; }
.cnp-track-devicelegend__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: #5B6570; }
.cnp-track-devicelegend__row span:first-child { display: inline-flex; align-items: center; gap: 8px; color: #13181F; }
.cnp-track-devicelegend__swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

.cnp-track-setupcard { border: 1px dashed #C9CED4; border-radius: 11px; padding: 20px 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cnp-track-setupcard__title { font-size: 14px; font-weight: 500; color: #0B121A; }
.cnp-track-setupcard__text { font-size: 12.5px; color: #5B6570; line-height: 1.55; max-width: 560px; margin-top: 5px; }

.cnp-track-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #DBDEE2; border-radius: 100px; padding: 9px 16px; font-size: 12.5px; font-weight: 500; color: #13181F; background: #FFFFFF; text-decoration: none; white-space: nowrap; }
.cnp-track-btn--primary { background: #0B121A; color: #FFFFFF; border-color: #0B121A; }

.cnp-track-empty, .cnp-track-errorcard { background: #FFFFFF; border-radius: 14px; padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.cnp-track-empty { border: 1px solid #DBDEE2; max-width: 480px; text-align: center; align-items: center; margin: 40px auto; padding: 40px 32px; }
.cnp-track-errorcard { border: 1px solid #F0C9CC; }
.cnp-track-empty__icon, .cnp-track-errorcard__icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #5B6570; flex-shrink: 0; }
.cnp-track-empty__icon { background: #F0F1F4; }
.cnp-track-errorcard__icon { background: #F7E3E4; color: #B71824; font-weight: 600; }
.cnp-track-empty h2 { font-size: 17px; font-weight: 600; color: #0B121A; margin: 0; }
.cnp-track-errorcard h3 { font-size: 15px; font-weight: 600; color: #0B121A; margin: 0; }
.cnp-track-empty p, .cnp-track-errorcard p { font-size: 13px; color: #5B6570; line-height: 1.55; margin: 0; }

@media (max-width: 900px) {
  .cnp-track-tile2-grid, .cnp-track-row2, .cnp-track-row3, .cnp-track-row2even { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .cnp-track-tile2 { flex-direction: row; align-items: center; justify-content: space-between; }
  .cnp-track-tile2__valuerow { flex-direction: row-reverse; }
  .cnp-track-tile2__explain { display: none; }
  .cnp-track-pagehead, .cnp-track-toolbar { flex-direction: column; align-items: stretch; }
  .cnp-track-btn, .cnp-track-period__option, .cnp-track-segmented__option { min-height: 44px; }
  /* Alleen Zoekterm + Positie op mobiel — In beeld/Klikken staan al in de
     kpi-tegels erboven, en 4 kolommen zijn te krap op een telefoon. */
  .cnp-track-queries { min-width: 0; }
  .cnp-track-queries th:nth-child(2), .cnp-track-queries td:nth-child(2),
  .cnp-track-queries th:nth-child(3), .cnp-track-queries td:nth-child(3) { display: none; }
  /* Heatmap: smaller day-label column, hourly ticks would be unreadable at this width. */
  .cnp-track-heatmap__daylabel { width: 18px; font-size: 10px; }
  .cnp-track-heatmap__hourlabel { font-size: 8px; }
}

.cnp-wh-splitrow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.cnp-wh-scorecard { text-align: center; }
@media (max-width: 900px) {
  .cnp-wh-splitrow { grid-template-columns: 1fr; }
}
.cnp-wh-scorecard__score { font-size: 30px; font-weight: 700; color: #0B121A; margin-top: 6px; }

.cnp-wh-disclosure {
  background: #0B121A; color: #FFFFFF; border-radius: 16px; padding: 28px 32px; display: flex; align-items: center;
  justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.cnp-wh-disclosure .cnp-rapport-cardtitle { color: #FFFFFF; }
.cnp-wh-disclosure p { font-size: 14px; color: #B9BEC4; margin: 6px 0 0; }

/* --- Automatische voor/na-audit (portaal + projectdossier) --- */
.cnp-audit { background: #FFFFFF; border: 1px solid #DBDEE2; border-radius: 18px; padding: 28px 32px; margin-bottom: 24px; }
.cnp-audit--dossier { border-radius: 14px; padding: 20px 22px; }
.cnp-audit__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.cnp-audit__eyebrow { font-family: 'Geist Mono', monospace; font-size: 12px; color: #69737D; letter-spacing: 0.03em; }
.cnp-audit__daterange { font-family: 'Geist Mono', monospace; font-size: 12.5px; color: #69737D; }

.cnp-audit__empty { text-align: center; padding: 40px 20px; }
.cnp-audit--dossier .cnp-audit__empty { padding: 24px 20px; }
.cnp-audit__empty-title { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.cnp-audit__empty-note { font-size: 14px; color: #505963; line-height: 1.6; max-width: 420px; margin: 0 auto 20px; }

.cnp-audit__scoreline { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.cnp-audit__scores { display: flex; align-items: baseline; gap: 10px; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.cnp-audit--dossier .cnp-audit__scores { font-size: 24px; }
.cnp-audit__arrow { font-size: 18px; color: #A9AFB4; }
.cnp-audit__delta { display: inline-flex; align-items: center; gap: 6px; font-family: 'Geist Mono', monospace; font-size: 13.5px; font-weight: 700; padding: 6px 12px; border-radius: 100px; }
.cnp-audit__delta--good { background: #D5F5DA; color: #006C28; }
.cnp-audit__delta--bad { background: #FFE6E3; color: #AC1922; }
.cnp-audit__delta--neutral { background: #F3F5F8; color: #505963; }
.cnp-audit__statuslabel { font-size: 14px; font-weight: 600; }
.cnp-audit__statuslabel--good { color: #006C28; }
.cnp-audit__statuslabel--bad { color: #AC1922; }
.cnp-audit__statuslabel--neutral { color: #505963; }

.cnp-audit__table { display: flex; flex-direction: column; gap: 1px; background: #DBDEE2; border: 1px solid #DBDEE2; border-radius: 12px; overflow: hidden; margin-bottom: 22px; }
.cnp-audit__row { display: grid; grid-template-columns: 1.6fr 0.8fr 0.8fr 0.9fr; padding: 12px 16px; font-size: 14px; align-items: center; background: #FFFFFF; }
.cnp-audit__row--head { background: #F3F5F8; font-family: 'Geist Mono', monospace; font-size: 11px; color: #69737D; letter-spacing: 0.02em; padding: 9px 16px; }
.cnp-audit__cat-label { font-weight: 500; }
.cnp-audit__muted { color: #505963; }
.cnp-audit__cat-delta { display: flex; align-items: center; gap: 5px; font-weight: 600; }
.cnp-audit__cat-delta--good { color: #006C28; }
.cnp-audit__cat-delta--bad { color: #AC1922; }
.cnp-audit__cat-delta--neutral { color: #505963; }

.cnp-audit__issues { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 18px; }
.cnp-audit__issues-label { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.cnp-audit__issues-label--good { color: #005F21; }
.cnp-audit__issues-label--bad { color: #9E141E; }
.cnp-audit__issues-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.cnp-audit__issues-list li { font-size: 13.5px; line-height: 1.5; color: #2D343A; }
.cnp-audit__note { font-size: 12.5px; color: #727C86; line-height: 1.5; margin-bottom: 16px; }
.cnp-audit--dossier .cnp-audit__note { margin-bottom: 0; }
.cnp-audit__link { color: #B71824; text-decoration: none; font-weight: 600; font-size: 14px; }
.cnp-audit__link:hover { color: #9B0007; }
@media (max-width: 700px) {
  .cnp-audit__row { grid-template-columns: 1.4fr 0.8fr 0.8fr 0.9fr; font-size: 13px; }
  .cnp-audit__issues { grid-template-columns: 1fr; }
}

/* --- Integration Lab (client-side demo, no AJAX) --- */
.cnp-lab-scenariogrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 32px; }
.cnp-lab-scenariocard {
  background: #FFFFFF; border: 2px solid #DBDEE2; border-radius: 16px; padding: 24px; text-align: left;
  cursor: pointer; font-family: 'Geist', sans-serif; color: #0B121A; transition: border-color 0.15s ease, transform 0.15s ease;
}
.cnp-lab-scenariocard:hover { transform: translateY(-3px); }
.cnp-lab-scenariocard.is-active { border-color: #B71824; }
.cnp-lab-scenariocard__route { font-family: 'Geist Mono', monospace; font-size: 12px; color: #505963; margin-bottom: 10px; }
.cnp-lab-scenariocard__name { font-size: 17px; font-weight: 600; margin: 0 0 8px; }
.cnp-lab-scenariocard__value { font-size: 14px; color: #505963; line-height: 1.5; margin: 0 0 12px; }
.cnp-lab-scenariocard__volume { font-size: 12.5px; color: #69737D; margin-bottom: 16px; }
.cnp-lab-scenariocard__btn {
  display: block; width: 100%; background: #F3F5F8; color: #0B121A; font-weight: 600; font-size: 14px;
  padding: 11px 16px; border-radius: 9px; text-align: center; box-sizing: border-box;
}
.cnp-lab-scenariocard.is-active .cnp-lab-scenariocard__btn { background: #B71824; color: #FFFFFF; }

.cnp-lab { background: #0B121A; color: #FFFFFF; border-radius: 20px; padding: 28px 28px 32px; position: relative; font-family: 'Geist', sans-serif; }
.cnp-lab__srlive { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.cnp-lab__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.cnp-lab__demobadge {
  display: inline-flex; align-items: center; gap: 8px; background: #1D252D; color: #B9BEC4;
  font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 500; padding: 6px 12px; border-radius: 100px;
}
.cnp-lab__demodot { width: 6px; height: 6px; border-radius: 50%; background: #ED5350; display: inline-block; }
.cnp-lab__scenarioname { font-family: 'Geist Mono', monospace; font-size: 13px; color: #B3B8BE; }

.cnp-lab__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 28px; }
.cnp-lab__diagramcol { min-width: 0; }
.cnp-lab__diagram { position: relative; padding: 6px 6px 0; }
.cnp-lab__track { position: absolute; left: 6px; right: 6px; top: 29px; height: 2px; background: #303942; }
.cnp-lab__progress { position: absolute; left: 6px; top: 29px; height: 2px; background: #399E43; width: 0%; max-width: calc(100% - 12px); transition: width 0.6s ease; }
.cnp-lab__nodes { display: flex; justify-content: space-between; position: relative; }
.cnp-lab__node { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 74px; }
.cnp-lab__nodebox {
  width: 48px; height: 48px; border-radius: 12px; background: #1D252D; border: 2px solid #303942;
  display: flex; align-items: center; justify-content: center; font-size: 17px; color: #6D7277;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.cnp-lab__nodebox--progress { border-color: #2171CC; color: #2171CC; box-shadow: 0 0 0 5px #2171CC; }
.cnp-lab__nodebox--success { border-color: #399E43; color: #399E43; box-shadow: 0 0 0 5px #399E43; }
.cnp-lab__nodebox--warning { border-color: #BB8300; color: #BB8300; box-shadow: 0 0 0 5px #BB8300; }
.cnp-lab__nodebox--error { border-color: #ED5350; color: #ED5350; box-shadow: 0 0 0 5px #ED5350; }
.cnp-lab__nodelabel { font-size: 12px; color: #C2C4C7; text-align: center; }
.cnp-lab__srsteps { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.cnp-lab__controls { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.cnp-lab-btn { font-family: 'Geist', sans-serif; font-weight: 600; font-size: 14px; padding: 11px 18px; border-radius: 9px; border: none; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; }
.cnp-lab-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cnp-lab-btn--primary { background: #B71824; color: #FFFFFF; }
.cnp-lab-btn--primary:hover:not(:disabled) { background: #9B0007; }
.cnp-lab-btn--ghost { background: #1D252D; color: #FFFFFF; border: 1px solid #303942; }
.cnp-lab-btn--ghost:hover:not(:disabled) { background: #262F38; }
.cnp-lab-btn--error { color: #E4BBA0; }
.cnp-lab-btn--onaccent { display: inline-block; background: #FFFFFF; color: #0B121A; text-decoration: none; font-size: 13px; padding: 9px 16px; }
.cnp-lab-btn--onaccent:hover { background: #F3F5F8; }

.cnp-lab__status { margin-top: 18px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.cnp-lab__statusicon::before { content: '●'; }
.cnp-lab__statusicon--idle { color: #6D7277; }
.cnp-lab__statusicon--progress { color: #2171CC; }
.cnp-lab__statusicon--success { color: #399E43; }
.cnp-lab__statusicon--warning { color: #BB8300; }
.cnp-lab__statusicon--error { color: #ED5350; }

.cnp-lab__sidecol { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cnp-lab__eventlog { background: #1A2026; border: 1px solid #282F35; border-radius: 12px; padding: 14px 16px; min-height: 96px; }
.cnp-lab__eventlog-label { font-family: 'Geist Mono', monospace; font-size: 11px; color: #8B9095; margin-bottom: 10px; letter-spacing: 0.03em; }
.cnp-lab__events { display: flex; flex-direction: column; gap: 8px; }
.cnp-lab__event { display: flex; align-items: baseline; gap: 8px; font-size: 13px; line-height: 1.5; }
.cnp-lab__event-time { font-family: 'Geist Mono', monospace; font-size: 11px; color: #7C8186; flex-shrink: 0; width: 40px; }
.cnp-lab__event-label { color: #FFFFFF; }
.cnp-lab__event-detail { color: #8B9095; }
.cnp-lab__event--success .cnp-lab__event-icon { color: #399E43; }
.cnp-lab__event--warning .cnp-lab__event-icon { color: #BB8300; }
.cnp-lab__event--error .cnp-lab__event-icon { color: #ED5350; }
.cnp-lab__event--progress .cnp-lab__event-icon { color: #2171CC; }
.cnp-lab__eventsempty { font-size: 13px; color: #7C8186; }

.cnp-lab__payload { background: #1A2026; border: 1px solid #282F35; border-radius: 12px; padding: 14px 16px; }
.cnp-lab__tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.cnp-lab-tab { background: transparent; color: #A9AFB4; border: none; font-size: 12px; font-weight: 600; font-family: 'Geist Mono', monospace; padding: 6px 12px; border-radius: 7px; cursor: pointer; }
.cnp-lab-tab.is-active { background: #FFFFFF; color: #0B121A; }
.cnp-lab__payloadtext { margin: 0; font-family: 'Geist Mono', monospace; font-size: 12.5px; line-height: 1.7; color: #CBCED1; overflow-x: auto; white-space: pre; }

.cnp-lab__result { background: #06210D; border: 1px solid #1D4E2B; border-radius: 12px; padding: 16px 18px; }
.cnp-lab__result-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #76CF8A; margin-bottom: 10px; }
.cnp-lab__result-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; font-size: 12.5px; color: #C5D2C7; margin-bottom: 12px; }
.cnp-lab__result-grid b { color: #FFFFFF; }
.cnp-lab__result-note { font-size: 11px; color: #9A9FA5; margin-bottom: 14px; }

@media (max-width: 760px) {
  .cnp-lab-scenariogrid { grid-template-columns: 1fr; }
  .cnp-lab__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cnp-lab, .cnp-lab * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- Architectuurvoorstel Generator (client-side wizard, no backend yet) --- */
.cnp-ag { max-width: 900px; margin: 0 auto; font-family: 'Geist', sans-serif; color: #0B121A; }
.cnp-ag__screen[data-cnp-ag-screen="intro"] { max-width: 640px; margin: 0 auto; text-align: center; padding: 72px 20px; }
.cnp-ag__screen[data-cnp-ag-screen="steps"] { max-width: 720px; margin: 0 auto; padding: 48px 20px 96px; }
.cnp-ag__screen[data-cnp-ag-screen="result"] { padding: 48px 20px 96px; }

.cnp-ag__badge {
  display: inline-flex; align-items: center; gap: 8px; background: #FFE6E3; color: #9E141E;
  font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 100px; margin-bottom: 24px;
}
.cnp-ag__introtitle { font-size: 38px; line-height: 1.15; letter-spacing: -0.03em; font-weight: 700; margin: 0 0 18px; }
.cnp-ag__introtext { font-size: 17px; line-height: 1.6; color: #505963; margin: 0 0 8px; }
.cnp-ag__intronote { font-size: 13px; color: #7C8186; margin: 0 0 32px; }

.cnp-ag-btn { font-family: 'Geist', sans-serif; font-weight: 600; font-size: 14px; padding: 12px 22px; border-radius: 9px; border: none; cursor: pointer; transition: background 0.15s ease; text-decoration: none; display: inline-block; }
.cnp-ag-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cnp-ag-btn--primary { background: #B71824; color: #FFFFFF; }
.cnp-ag-btn--primary:hover:not(:disabled) { background: #9B0007; }
.cnp-ag-btn--ghost { background: transparent; color: #262F38; border: 1px solid #D5D8DB; }
.cnp-ag-btn--ghost:hover:not(:disabled) { background: #F3F5F8; }

.cnp-ag__stepmeta { margin-bottom: 8px; }
.cnp-ag__stepnum { font-family: 'Geist Mono', monospace; font-size: 13px; color: #5B646F; margin-bottom: 10px; }
.cnp-ag__progressbar { height: 6px; border-radius: 100px; background: #E5E8EC; overflow: hidden; margin-bottom: 28px; }
.cnp-ag__progressfill { height: 100%; background: #B71824; width: 20%; transition: width 0.3s ease; }
.cnp-ag__steptitle { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; }
.cnp-ag__stepsubtitle { font-size: 15px; color: #505963; margin: 0 0 28px; }

.cnp-ag__chipgrid { display: grid; gap: 10px; }
.cnp-ag__chipgrid--2col { grid-template-columns: 1fr 1fr; }
.cnp-ag__chipgrid--3col { grid-template-columns: 1fr 1fr 1fr; margin-bottom: 18px; }
.cnp-ag-chip {
  background: #FFFFFF; color: #262F38; border: 1.5px solid #D5D8DB; font-size: 14px; font-weight: 500;
  padding: 14px 16px; border-radius: 12px; text-align: left; cursor: pointer; font-family: 'Geist', sans-serif;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cnp-ag-chip.is-selected { background: #0B121A; color: #FFFFFF; border-color: #0B121A; }
.cnp-ag-chip:disabled { opacity: 0.45; cursor: not-allowed; }
.cnp-ag-chip--pill { display: inline-block; width: auto; border-radius: 100px; padding: 10px 16px; font-size: 13.5px; }
.cnp-ag__hint { font-size: 12.5px; color: #727C86; margin-top: 12px; }

.cnp-ag__productinputs { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid #DBDEE2; padding-top: 16px; margin-top: 16px; }
.cnp-ag__productlabel { font-size: 13px; display: block; }
.cnp-ag__productlabel span { display: block; color: #505963; margin-bottom: 4px; }
.cnp-ag__productlabel input { width: 100% !important; border: 1px solid #D5D8DB !important; border-radius: 8px !important; padding: 9px 12px !important; font-size: 14px; font-family: inherit; box-sizing: border-box; }

.cnp-ag__groups { display: flex; flex-direction: column; gap: 22px; }
.cnp-ag__grouplabel { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.cnp-ag__pillrow { display: flex; gap: 8px; flex-wrap: wrap; }

.cnp-ag__error { margin-top: 18px; background: #FFE6E3; color: #8A0314; border: 1px solid #F7CBC7; border-radius: 10px; padding: 12px 16px; font-size: 13.5px; font-weight: 500; }
.cnp-ag__nav { display: flex; justify-content: space-between; margin-top: 32px; }

.cnp-ag__prioritylist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.cnp-ag__priorityrow { display: flex; align-items: center; gap: 12px; background: #0B121A; color: #FFFFFF; border-radius: 10px; padding: 10px 14px; }
.cnp-ag__priorityrank { font-family: 'Geist Mono', monospace; font-size: 13px; color: #B19895; }
.cnp-ag__prioritylabel { flex: 1; font-size: 14px; font-weight: 500; }
.cnp-ag__priorityremove { background: transparent; border: none; color: #FFFFFF; cursor: pointer; font-size: 16px; }

.cnp-ag__resulteyebrow { font-family: 'Geist Mono', monospace; font-size: 13px; color: #5B646F; margin-bottom: 12px; }
.cnp-ag__resultheader { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.cnp-ag__complexity { font-family: 'Geist Mono', monospace; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 100px; width: fit-content; }
.cnp-ag__complexity--eenvoudig { background: #D5F5DA; color: #005F21; }
.cnp-ag__complexity--gemiddeld { background: #FFE7CE; color: #904700; }
.cnp-ag__complexity--complex { background: #FFE6E3; color: #9E141E; }
.cnp-ag__pattern { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.cnp-ag__resultnote { font-size: 13px; color: #7C8186; margin: 0 0 28px; }

.cnp-ag__diagram { background: #0B121A; border-radius: 18px; padding: 28px 24px; margin-bottom: 24px; }
.cnp-ag__diagramrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cnp-ag__node { background: #1D252D; border: 1px solid #303942; border-radius: 10px; padding: 12px 14px; color: #FFFFFF; font-size: 13px; font-weight: 600; text-align: center; min-width: 96px; }
.cnp-ag__nodearrow { color: #77818C; }
.cnp-ag__supportrow { margin-top: 18px; padding-top: 16px; border-top: 1px dashed #303942; display: flex; gap: 10px; flex-wrap: wrap; }
.cnp-ag__supportnode { background: #1D252D; border: 1px dashed #4D5660; border-radius: 100px; padding: 7px 14px; color: #B9BEC4; font-size: 12.5px; }
.cnp-ag__nodeslist { font-size: 13.5px; color: #505963; line-height: 1.7; margin: 0 0 28px; padding-left: 20px; }

.cnp-ag__resultgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; }
.cnp-ag__resultcard { border: 1px solid #DBDEE2; border-radius: 14px; padding: 22px; }
.cnp-ag__resultcardtitle { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.cnp-ag__risks { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.cnp-ag__risks li { font-size: 13.5px; line-height: 1.5; color: #2D343A; }
.cnp-ag__nextstep { font-size: 13.5px; line-height: 1.6; color: #2D343A; margin: 0; }

.cnp-ag__resultactions { display: flex; gap: 12px; flex-wrap: wrap; }

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

@media (max-width: 700px) {
  .cnp-ag__chipgrid--2col, .cnp-ag__chipgrid--3col { grid-template-columns: 1fr; }
  .cnp-ag__resultgrid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cnp-ag * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- 404 page mockup (static source for a Theme Builder 404 template) --- */
.cnp-404 {
  min-height: calc(100vh - 400px); display: flex; align-items: center; justify-content: center;
  padding: 80px 48px; text-align: center; font-family: 'Geist', sans-serif;
}
.cnp-404-inner { max-width: 640px; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.cnp-404-eyebrow { font-family: 'Geist Mono', monospace; font-size: 13px; color: #69737D; letter-spacing: 0.02em; }
.cnp-404-digits { font-size: 140px; line-height: 1; font-weight: 800; letter-spacing: -0.05em; color: #0B121A; }
.cnp-404-digits span { color: #B71824; display: inline-block; animation: cnp-404-glitch 2.4s infinite ease-in-out; }
@keyframes cnp-404-glitch {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3px, 2px); }
  40% { transform: translate(3px, -2px); }
  60% { transform: translate(-2px, -1px); }
  80% { transform: translate(2px, 1px); }
}
.cnp-404-title { font-size: 28px; line-height: 1.3; letter-spacing: -0.02em; font-weight: 700; margin: 0; color: #0B121A; }
.cnp-404-title code { font-family: 'Geist Mono', monospace; font-size: 22px; font-weight: 500; background: #FFE6E3; color: #9E141E; padding: 2px 8px; border-radius: 6px; }
.cnp-404-sub { font-size: 17px; line-height: 1.6; color: #505963; margin: 0; max-width: 480px; }
.cnp-404-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.cnp-404-chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 32px; }
.cnp-404-chip {
  text-decoration: none; color: #2D343A; border: 1px solid #DBDEE2; border-radius: 999px;
  padding: 8px 16px; font-size: 14px; transition: background 0.15s ease, border-color 0.15s ease;
}
.cnp-404-chip:hover { background: #F3F5F8; border-color: #7C8186; }
.cnp-btn-outline { background: #FFFFFF; color: #0B121A; border: 1px solid #D5D8DB; }
.cnp-btn-outline:hover { background: #F3F5F8 !important; border-color: #7C8186 !important; }

/* --- Bevestiging (confirmation page after the contact form submits) —
   pop-in checkmark, live-updating pipeline card, JS timer steps through
   pending -> active -> done every 900ms, matching the handover design. --- */
.cnp-conf { max-width: 720px; margin: 0 auto; padding: 88px 48px 64px; text-align: center; font-family: 'Geist', sans-serif; }
.cnp-conf-icon {
  width: 60px; height: 60px; border-radius: 50%; background: #FFE6E3; color: #9E141E;
  display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 28px;
  animation: cnp-pop 0.45s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes cnp-pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.cnp-conf-headline { font-size: 38px; line-height: 1.15; letter-spacing: -0.03em; font-weight: 700; margin: 0 0 14px; color: #0B121A; }
.cnp-conf-sub { font-size: 18px; line-height: 1.6; color: #505963; margin: 0 0 48px; }
.cnp-conf-pipeline { background: #0B121A; border-radius: 20px; padding: 40px 32px; text-align: left; }
.cnp-conf-pipeline__label { font-family: 'Geist Mono', monospace; font-size: 12px; color: #8B9095; margin-bottom: 26px; letter-spacing: 0.02em; }
.cnp-conf-steps { display: flex; flex-direction: column; }
.cnp-conf-step__row { display: flex; align-items: center; gap: 14px; padding: 6px 0; }
.cnp-conf-step__icon { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; background: #1D252D; transition: background 0.3s ease; }
.cnp-conf-step__check, .cnp-conf-step__spinner, .cnp-conf-step__pending-dot { display: none; }
.cnp-conf-step__pending-dot { width: 6px; height: 6px; border-radius: 50%; background: #4D5660; }
.cnp-conf-step__spinner { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #B19895; border-top-color: transparent; animation: cnp-spin 0.8s linear infinite; }
@keyframes cnp-spin { to { transform: rotate(360deg); } }
.cnp-conf-step.is-pending .cnp-conf-step__pending-dot { display: block; }
.cnp-conf-step.is-active .cnp-conf-step__icon { background: #262F38; }
.cnp-conf-step.is-active .cnp-conf-step__spinner { display: block; }
.cnp-conf-step.is-done .cnp-conf-step__icon { background: #146720; }
.cnp-conf-step.is-done .cnp-conf-step__check { display: block; color: #FFFFFF; }
.cnp-conf-step__text { flex: 1; }
.cnp-conf-step__label { color: #8B9095; font-size: 16px; font-weight: 500; transition: color 0.3s ease; }
.cnp-conf-step.is-active .cnp-conf-step__label, .cnp-conf-step.is-done .cnp-conf-step__label { color: #E9EBEE; }
.cnp-conf-step__detail { color: #747B83; font-size: 13px; margin-top: 2px; }
.cnp-conf-step__status { font-family: 'Geist Mono', monospace; font-size: 12px; color: #419547; white-space: nowrap; }
.cnp-conf-step__connector { width: 1px; height: 20px; background: #303942; margin-left: 15px; }
.cnp-conf-confirm-box {
  margin-top: 28px; background: #F3F5F8; border: 1px solid #DBDEE2; border-radius: 14px; padding: 20px 24px;
  font-size: 15px; color: #2D343A; text-align: left;
  animation: cnp-fadeup 0.5s ease both;
}
@keyframes cnp-fadeup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.cnp-conf-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.cnp-conf-footer { background: #11171D; color: #A9AFB4; padding: 48px 48px 28px; margin-top: 64px; font-family: 'Geist', sans-serif; }
.cnp-conf-footer__row { max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.cnp-conf-footer__logo { display: flex; align-items: baseline; font-weight: 700; font-size: 17px; letter-spacing: -0.03em; color: #FFFFFF; }
.cnp-conf-footer__logo .cnp-logo__slash { color: #ED5350; }
.cnp-conf-footer__meta { font-size: 13px; color: #7C8186; }
.cnp-conf-footer__meta a { color: #7C8186; }
.cnp-conf-footer__meta a:hover { color: #FFFFFF; }

/* --- Contact Form 7 card (Contact page — [contact-form-7 id="6002816"]) --- */
.cnp-cf7-card {
  background: #FFFFFF; border-radius: 20px; padding: 40px;
  border: 1px solid #DBDEE2;
  box-shadow: 0 30px 60px -30px rgba(11,18,26,0.12);
  font-family: 'Geist', sans-serif;
}
.cnp-cf7-card h3 { font-size: 20px; font-weight: 600; margin: 0 0 20px; color: #0B121A; }
.cnp-cf7-card form p { margin: 0 0 18px; }
.cnp-cf7-card label { display: block; margin-bottom: 18px; }
.cnp-cf7-card .cnp-cf7-label-text { display: block; font-size: 13px; font-weight: 600; color: #262F38; margin-bottom: 6px; }
.cnp-cf7-card .cnp-cf7-row p { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; }
.cnp-cf7-card .cnp-cf7-row label { flex: 1 1 200px; margin-bottom: 18px; }
.cnp-cf7-card input[type=text], .cnp-cf7-card input[type=email], .cnp-cf7-card input[type=tel], .cnp-cf7-card textarea {
  width: 100% !important; padding: 13px 14px !important; border-radius: 10px !important; border: 1px solid #D5D8DB !important;
  font-size: 15px; font-family: 'Geist', sans-serif; color: #0B121A; background: #FFFFFF;
  outline: none; transition: border-color 0.15s ease; box-sizing: border-box; margin-top: 6px;
}
.cnp-cf7-card textarea { min-height: 120px; resize: vertical; }
.cnp-cf7-card input:focus, .cnp-cf7-card textarea:focus { border-color: #B71824; }
.cnp-cf7-card .wpcf7-submit {
  background: #B71824 !important; color: #FFFFFF !important; border: none !important; font-weight: 600; font-size: 16px !important;
  padding: 13px 26px !important; border-radius: 10px !important; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease;
}
.cnp-cf7-card .wpcf7-submit:hover { background: #9B0007 !important; transform: translateY(-1px); }
.cnp-cf7-card .wpcf7-not-valid-tip { color: #9E141E; font-size: 13px; margin-top: 4px; display: block; }
.cnp-cf7-card .wpcf7-response-output { border-radius: 10px !important; padding: 14px 16px !important; font-size: 14px; margin: 18px 0 0 !important; }
.cnp-cf7-card form.sent .wpcf7-response-output { border-color: #419547 !important; color: #0C4714; }
.cnp-cf7-card form.invalid .wpcf7-response-output, .cnp-cf7-card form.failed .wpcf7-response-output, .cnp-cf7-card form.aborted .wpcf7-response-output {
  border-color: #B71824 !important; color: #9E141E;
}

@media (max-width: 768px) {
  .cnp-header { padding: 14px 20px; }
  .cnp-footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .cnp-systems-grid { grid-template-columns: 1fr; }
  .cnp-roadmap { grid-template-columns: 1fr; gap: 24px; }
  .cnp-roadmap::before { display: none; }
  .cnp-card-block h4 { padding-top: 15px; }
}

.cnp-motorkap-card { height: 100%; }

/* --- Freelancer portal --- */
.cnp-portal-sidebar__mode-switch {
  display: block; font-size: 12px; font-weight: 600; color: #B71824; text-decoration: none;
  padding: 10px 0; border-top: 1px solid #DBDEE2; margin-top: 12px;
}
.cnp-portal-sidebar__mode-switch:hover { color: #9B0007; }
.cnp-freelance-project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 8px; }
.cnp-freelance-project-card {
  display: block; background: #FFFFFF; border: 1px solid #DBDEE2; border-radius: 14px; padding: 20px;
  text-decoration: none; transition: border-color 0.15s ease;
}
.cnp-freelance-project-card:hover { border-color: #B71824; }
.cnp-freelance-project-card__klant { font-family: 'Geist Mono', monospace; font-size: 12px; color: #9E141E; margin-bottom: 6px; }
.cnp-freelance-project-card__titel { font-size: 16px; font-weight: 600; color: #0B121A; font-family: 'Geist', sans-serif; }
.cnp-freelance-section { margin-bottom: 40px; }
.cnp-freelance-section h2 { font-size: 18px; font-weight: 600; color: #0B121A; margin: 0 0 14px; }
.cnp-freelance-entry {
  background: #FFFFFF; border: 1px solid #DBDEE2; border-radius: 10px; padding: 12px 16px; margin-bottom: 8px;
}
.cnp-freelance-entry strong { display: block; font-size: 14px; color: #0B121A; margin-bottom: 2px; }
.cnp-freelance-entry__meta { font-size: 12px; color: #69737D; }
.cnp-freelance-form {
  background: #F9FAFB; border: 1px solid #DBDEE2; border-radius: 12px; padding: 18px; margin-top: 12px;
  display: flex; flex-direction: column; gap: 12px; max-width: 480px;
}
.cnp-freelance-form label { font-size: 13px; font-weight: 600; color: #0B121A; display: flex; flex-direction: column; gap: 6px; }
.cnp-freelance-form input[type="text"],
.cnp-freelance-form input[type="datetime-local"],
.cnp-freelance-form select,
.cnp-freelance-form textarea {
  font-size: 14px; font-weight: 400; padding: 10px 12px; border: 1px solid #D5D8DB; border-radius: 8px;
  font-family: 'Geist', sans-serif; color: #0B121A; background: #FFFFFF;
}
.cnp-freelance-form textarea { resize: vertical; }