/* v3-agentic-content-hergebruik.css
   Page-local rules only. Everything else comes from v3-pages.css and the
   shared v3 vocabulary. Scoped to .v3 so nothing leaks to other pages. */

/* B2: calc callout, the kostprijs-per-publicatie som in an off-colour frame. */
.v3 .calc-callout {
  max-width: 68ch;
  margin: 2rem auto;
  padding: 1.5rem 1.75rem;
  border: 1px solid color-mix(in srgb, var(--petrol) 45%, transparent);
  border-left-width: 4px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--petrol) 7%, transparent);
}
.v3 .calc-callout > p { margin: 0 0 .75rem; }
.v3 .calc-callout > p:last-child { margin-bottom: 0; }
.v3 .calc-label {
  display: block;
  margin-bottom: .6rem;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--petrol);
}
.v3 .calc-callout .calc-emphasis { font-weight: 600; }

/* B3: the four questions read as a checklist, so drop the ordinal markers. */
.v3 #diagnose .worksheet { list-style: none; }
.v3 #diagnose .worksheet > li { padding-left: 0; }
.v3 #diagnose .worksheet > li::marker { content: none; }
.v3 #diagnose .worksheet h3 { font-weight: 400; }

/* B4: autonomy level as a standalone badge above the Capgemini attribution. */
.v3 .level-badge {
  display: inline-block;
  margin: 1.5rem 0 .5rem;
  padding: .35rem .8rem;
  border: 1px solid color-mix(in srgb, var(--petrol) 55%, transparent);
  border-radius: 999px;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* B6: the governance list inside the compliance frame. */
.v3 .governance-panel .gov-list {
  margin: .75rem 0 1rem 1.1rem;
  padding: 0;
}
.v3 .governance-panel .gov-list li { margin-bottom: .35rem; }

/* Imagery — one cell-img inside the stacked bento, two full-measure bands
   between heavy text runs. Decoration and pacing only. */
.v3 .bento figure.cell-img {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--petrol) 30%, transparent);
  border-radius: 6px;
  height: clamp(190px, 26vw, 340px);
  overflow: hidden;
  padding: 0;
}
.v3 .bento figure.cell-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3 figure.page-band {
  margin: clamp(2.5rem, 6vh, 4rem) auto 0;
  width: min(1180px, 92vw);
  border-radius: 6px;
  overflow: hidden;
  height: clamp(200px, 28vw, 360px);
}
.v3 figure.page-band img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* subheads between the prose runs keep the reading measure */
.v3 #probleem > h3 { max-width: 62ch; margin-top: clamp(2.2rem, 5vh, 3.2rem); }

@media (max-width: 767px) {
  .v3 .bento figure.cell-img { height: clamp(170px, 44vw, 230px); }
  .v3 figure.page-band { height: clamp(170px, 46vw, 240px); }
}

/* CRO: the hero repeats the shape of the promise, subordinate to the button. */
.v3 .hero-inner .micro { margin-top: .75rem; opacity: .72; }