/* v3-concepts-4dx.css
   Page-only additions for /concepten/4dx. Everything else comes from
   css/v3-pages.css and the shared v3 vocabulary. Scoped to .v3. */

/* B2 — the calculation card sits beside the mechanism, figure 4,33 stays visible. */
.v3 .calc-card {
  border-left: 2px solid var(--petrol, currentColor);
}

/* B4 — four stacked definition cards D1..D4, one per row. */
.v3 .bento.bento-stack {
  grid-template-columns: 1fr;
}

/* B4/D2 — the two-axis test as a highlighted frame inside the D2 card. */
.v3 .axis-test {
  margin: 1rem 0 .75rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(127, 127, 127, .35);
  border-radius: 10px;
  background: rgba(127, 127, 127, .07);
}
.v3 .axis-test .axis-label {
  display: block;
  margin-bottom: .45rem;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .75;
}
.v3 .axis-test p {
  margin: 0;
}

/* 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; }
.v3 .bento.bento-stack .cell.cell-img img { max-height: 260px; }
@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;
}