/* v3-concepts-switch.css
   Page-only additions for concepts-switch.html.
   Everything else comes from css/v3-pages.css and the shared v3 stylesheets. */

/* B4: Dutch gloss under the English step name in the triptych cells. */
.v3 #aanpak .cell .gloss {
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .62;
  margin-top: -.25rem;
}

/* B4: the selection rule reads as a separate, accented block. */
.v3 #aanpak .cell.selectieregel {
  border-left: 3px solid var(--petrol, currentColor);
}

/* B5: numeric step markers (01..03) need a little more room than letters. */
.v3 #cascade .steps .step-letter {
  min-width: 2.2em;
}

/* J1: supporting imagery — bento image cell and full-width breathing band. */
.v3 .cell-img { margin: 1.6rem 0 0; }
.v3 .cell-img img { display: block; width: 100%; height: auto; border-radius: 10px; }
.v3 .cell-img.band-img { margin: 2.4rem 0 0; }
.v3 .cell-img.band-img img { max-height: 380px; object-fit: cover; }
.v3 .bento .cell.cell-img { padding: 0; overflow: hidden; margin: 0; }
.v3 .bento .cell.cell-img img { height: 100%; min-height: 200px; object-fit: cover; border-radius: 0; }
@media (max-width: 768px) {
  .v3 .cell-img.band-img { margin: 1.8rem 0 0; }
  .v3 .cell-img.band-img img { max-height: 240px; }
}

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

/* CRO: the deliverables must be countable, not a running sentence. */
.v3 .cta-band ul.deliverables {
  list-style: none;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: .9rem 0;
  padding: 0;
  font-size: .9rem;
  max-width: 68ch;
  margin-inline: auto;
}