.cb-platform-card {
  background: var(--cb-card-elevated);
  border: 1px solid var(--cb-border);
  border-radius: 40px;
  padding: 40px;
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 568px);
  justify-content: space-between;
  align-items: center;
  gap: 56px;
  margin-top: 48px;
}

.cb-tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
}

.cb-tab {
  padding: 9px 19px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: rgba(1, 40, 79, 0.5);
  background: rgba(1, 40, 79, 0.08);
  text-decoration: none;
}

.cb-tab:hover,
.cb-tab:focus,
.cb-tab:visited { text-decoration: none; }

.cb-tab--active,
.cb-tab--active:hover,
.cb-tab--active:focus,
.cb-tab--active:active,
.cb-tab--active:visited {
  background: var(--cb-navy);
  color: #fff;
  text-decoration: none;
}

.cb-tab-panel { display: none; }
.cb-tab-panel--active { display: block; }

.cb-platform-card h3 {
  font-size: 28px;
  line-height: 42px;
  margin: 0 0 16px;
}

.cb-platform-card__text p {
  font-size: 14px;
  line-height: 21px;
  color: var(--cb-text);
  margin: 0 0 32px;
}

.cb-platform-card .cb-tab-panel { min-height: 150px; }

.cb-platform-card__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
  border: 1px solid var(--cb-border);
}

/* ---------- CSS-native flow-diagram (vervangt platform-screenshot.png) ----------
   Vier billing-inputs → Billing Engine (hero-stijl) → Accurate Invoices.
   Ontwerpruimte 600x660; 1em = 16px bij 600px containerbreedte →
   font-size 2.6667cqw. Alle maten in em/%, dus schaalt als één afbeelding. */

.cb-platflow { container-type: inline-size; width: 100%; }

/* Verticale mobiel-connectors: verborgen zolang de absolute desktop-layout geldt. */
.cb-platflow__conn { display: none; }

.cb-platflow__canvas {
  position: relative;
  aspect-ratio: 600 / 660;
  font-size: 2.6667cqw;
  line-height: 1.3;
}

/* Gloed-blurbs: fel genoeg om door het glas te tinten, en zo geplaatst dat ze
   half onder de kaartranden doorlopen — scherp buiten, gefrost binnen. */
.cb-platflow__blur {
  position: absolute;
  border-radius: 9999px;
  filter: blur(1.4em);
  opacity: 0.5; /* gloed gehalveerd (feedback Head of Product): subtiel in plaats van over the top */
  pointer-events: none;
  z-index: 0;
}
.cb-platflow__blur--blue   { left: 3%;   top: 12%;  width: 26%; height: 14%; background: rgba(96, 165, 250, 0.32); }
.cb-platflow__blur--purple { right: 2%;  top: 13%;  width: 25%; height: 14%; background: rgba(167, 139, 250, 0.28); }
.cb-platflow__blur--teal   { left: 33%;  top: 16%;  width: 34%; height: 13%; background: rgba(45, 212, 191, 0.25); }
.cb-platflow__blur--green  { left: 20%;  top: 76%;  width: 60%; height: 15%; background: rgba(60, 203, 125, 0.22); }

.cb-platflow__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.cb-platflow__spark { display: none; }
@supports (offset-path: path("M0 0 L1 1")) {
  .cb-platflow__spark {
    display: block;
    animation: cb-platflow-spark var(--dur, 3.2s) linear var(--delay, 0s) infinite;
  }
}
@keyframes cb-platflow-spark {
  0%   { offset-distance: 0%;   opacity: 0; }
  12%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-platflow__spark { display: none !important; }
}

.cb-platflow__toplabel,
.cb-platflow__outlabel {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(1, 40, 79, 0.45);
}
.cb-platflow__toplabel { top: 0.4%; }
.cb-platflow__outlabel { top: 72.4%; }

/* Input-chips: licht liquid glass — melkige luminantie-gradiënt van boven,
   backdrop-blur frost de pastel-blurbs erachter, 1px-lichtrand die bovenaan
   fel oplicht en onderaan als schaduwzijde iets donkerder wordt. */
.cb-platflow__input {
  position: absolute;
  top: 6%;
  height: 19%;
  width: 22%;
  z-index: 1;
  border-radius: 0.9em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.08) 100%);
  backdrop-filter: blur(6px) saturate(1.2);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  border: 0;
  box-shadow:
    /* speculaire rim: fel op boven- en onderrand, zachter op de zijkanten */
    inset 0 1.5px 1px rgba(255, 255, 255, 1),
    inset 0 -1.5px 1px rgba(255, 255, 255, 0.85),
    inset 1.5px 0 1px rgba(255, 255, 255, 0.5),
    inset -1.5px 0 1px rgba(255, 255, 255, 0.5),
    /* donkere refractieband net binnen de rand */
    inset 0 0 0.7em rgba(1, 40, 79, 0.06),
    /* zachte slagschaduw eronder */
    0 1em 1.8em rgba(1, 40, 79, 0.12),
    0 0.15em 0.4em rgba(1, 40, 79, 0.07);
  padding: 0.55em 0.45em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  text-align: center;
}
.cb-platflow__input::after,
.cb-platflow__output::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.4) 30%,
    rgba(255, 255, 255, 0.25) 62%,
    rgba(255, 255, 255, 0.95) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
.cb-platflow__input--customers { left: 1.5%;  --tile-bg: rgba(96, 165, 250, 0.14);  --tile-fg: #2563EB; }
.cb-platflow__input--products  { left: 26.5%; --tile-bg: rgba(45, 212, 191, 0.16);  --tile-fg: #0D9488; }
.cb-platflow__input--pricing   { left: 51.5%; --tile-bg: rgba(251, 146, 60, 0.16);  --tile-fg: #EA580C; }
.cb-platflow__input--purchases { left: 76.5%; --tile-bg: rgba(167, 139, 250, 0.16); --tile-fg: #7C3AED; }

.cb-platflow__icontile {
  width: 1.9em;
  height: 1.9em;
  border-radius: 0.55em;
  background: var(--tile-bg);
  color: var(--tile-fg);
  display: grid;
  place-items: center;
}
.cb-platflow__icontile svg { width: 1.1em; height: 1.1em; }
.cb-platflow__input b {
  font-size: 0.85em;
  font-weight: 700;
  color: var(--cb-navy, #01284F);
  white-space: nowrap;
}
.cb-platflow__input > span:last-child {
  font-size: 0.8em;
  line-height: 1.3;
  color: rgba(1, 40, 79, 0.55);
}

/* Engine-kaart: zelfde donkere liquid-glass-stijl als de hero-flowmap */
.cb-platflow__engine {
  position: absolute;
  left: 31.5%;
  top: 41%;
  width: 37%;
  height: 18.5%;
  z-index: 1;
  border-radius: 1em;
  background:
    radial-gradient(95% 60% at 50% -8%, rgba(143, 253, 118, 0.22) 0%, rgba(143, 253, 118, 0.06) 55%, transparent 100%),
    linear-gradient(180deg, #14293F 0%, #0A1729 100%);
  border: 1px solid rgba(143, 253, 118, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(190, 255, 175, 0.28),
    0 0 1.5em rgba(60, 203, 125, 0.10),
    0 1.2em 2.4em rgba(1, 20, 35, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
.cb-platflow__enginelabel {
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}
.cb-platflow__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 1.2em;
  font-weight: 700;
  color: var(--cb-green, #8FFD76);
}
.cb-platflow__brand svg { width: 1.35em; height: 1.35em; }

/* Output-kaart: groen getint liquid glass, invoice-icoon + tekst */
.cb-platflow__output {
  position: absolute;
  left: 15%;
  top: 78.5%;
  width: 70%;
  height: 13.5%;
  z-index: 1;
  border-radius: 1em;
  background: linear-gradient(180deg, rgba(230, 250, 236, 0.35) 0%, rgba(222, 247, 230, 0.1) 100%);
  backdrop-filter: blur(6px) saturate(1.2);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  border: 0;
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 1),
    inset 0 -1.5px 1px rgba(255, 255, 255, 0.85),
    inset 1.5px 0 1px rgba(255, 255, 255, 0.5),
    inset -1.5px 0 1px rgba(255, 255, 255, 0.5),
    inset 0 0 0.7em rgba(20, 120, 70, 0.07),
    0 1em 1.8em rgba(1, 40, 79, 0.11),
    0 0.15em 0.4em rgba(1, 40, 79, 0.06);
  padding: 0.8em 1em;
  display: flex;
  align-items: center;
  gap: 0.8em;
}
.cb-platflow__outicon {
  flex: none;
  width: 2.6em;
  height: 2.6em;
  border-radius: 0.7em;
  background: rgba(60, 203, 125, 0.12);
  border: 1px solid rgba(60, 203, 125, 0.35);
  display: grid;
  place-items: center;
}
.cb-platflow__outicon svg { width: 1.35em; height: 1.35em; }
.cb-platflow__outtext { display: flex; flex-direction: column; gap: 0.15em; min-width: 0; }
.cb-platflow__outtext b {
  font-size: 1em;
  font-weight: 700;
  color: var(--cb-navy, #01284F);
}
.cb-platflow__outtext > span {
  font-size: 0.8em;
  line-height: 1.4;
  color: rgba(1, 40, 79, 0.55);
}

@media (max-width: 1100px) {
  .cb-platform-card { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .cb-platform-card { padding: 24px 16px; border-radius: 24px; gap: 24px; }
  /* Grid-kinderen mogen onder hun content-breedte krimpen (anders steekt de kaart uit) */
  .cb-platform-card__text,
  .cb-platform-card__media { min-width: 0; }
  .cb-platform-card__media img { max-width: 100%; }
  /* Vier tabs als net 2×2-raster: gelijke kolommen houden de tekst leesbaar */
  .cb-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 24px;
  }
  .cb-tab {
    text-align: center;
    font-size: 13px;
    padding: 10px 12px;
  }
  .cb-platform-card h3 { font-size: 24px; line-height: 1.3; }
  .cb-platform-card .cb-tab-panel { min-height: 0; }

  /* ---- Platflow: van geschaald canvas naar leesbare stack ----
     Inputs als 2×2-raster, engine + output als volle-breedte rijen, met
     verticale chevron-connectors i.p.v. de SVG-paden (absolute coördinaten). */
  .cb-platflow__canvas {
    aspect-ratio: auto;
    font-size: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    row-gap: 12px;
    align-items: stretch;
  }
  .cb-platflow__lines,
  .cb-platflow__blur { display: none; }

  /* Labels, engine, output en connectors spannen de volle breedte */
  .cb-platflow__toplabel,
  .cb-platflow__outlabel,
  .cb-platflow__engine,
  .cb-platflow__output,
  .cb-platflow__conn { grid-column: 1 / -1; }

  .cb-platflow__toplabel,
  .cb-platflow__outlabel { position: static; font-size: 0.8em; }

  /* Inputs: van absolute ankers naar 2×2-rastercellen */
  .cb-platflow__input {
    position: static;
    top: auto;
    height: auto;
    width: auto;
    min-height: 0;
    padding: 1em 0.8em;
    gap: 0.45em;
  }
  .cb-platflow__input--customers,
  .cb-platflow__input--products,
  .cb-platflow__input--pricing,
  .cb-platflow__input--purchases { left: auto; }
  .cb-platflow__icontile { width: 2.4em; height: 2.4em; }
  .cb-platflow__icontile svg { width: 1.35em; height: 1.35em; }
  .cb-platflow__input b { font-size: 0.95em; white-space: normal; }
  .cb-platflow__input > span:last-child { font-size: 0.85em; }

  /* Engine als volle-breedte rij */
  .cb-platflow__engine {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    padding: 1.1em;
  }
  .cb-platflow__brand { font-size: 1.3em; }

  /* Output groter en volle breedte */
  .cb-platflow__output {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    padding: 1.1em 1.2em;
    gap: 1em;
  }
  .cb-platflow__outicon { width: 3.2em; height: 3.2em; }
  .cb-platflow__outicon svg { width: 1.7em; height: 1.7em; }
  .cb-platflow__outtext b { font-size: 1.2em; }
  .cb-platflow__outtext > span { font-size: 0.9em; }

  /* Verticale connectors tussen de stappen */
  .cb-platflow__conn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.2em;
  }
  .cb-platflow__conn svg { height: 100%; width: auto; display: block; }
}