/* Voiceitt customer support case study — page-specific pieces (shared layout in case-study-voiceitt.css) */

/* Our Impact email (80% of a max 1024px column) */
.voiceitt-support .cs-impact__img { width: min(80%, 819.2px); }
.voiceitt-support .cs-synthesis { width: 706px; max-width: 100%; }

/* Product discovery: "How might we" cards */
.voiceitt-support .cs-discovery { padding: 10px; display: flex; justify-content: center; align-items: flex-start; gap: 48px; }
.voiceitt-support .cs-hmw {
  width: 30%; flex: 0 1 auto; min-height: 360px; padding: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  background: var(--c-white); border: 1px solid var(--c-gray-200); border-radius: 8px;
}
.voiceitt-support .cs-icon--40 svg { width: 40px; height: 40px; }
.voiceitt-support .cs-icon--arrow svg { width: 20px; height: 20px; fill: var(--c-navy); }
.voiceitt-support .cs-hmw__body { width: 100%; padding: 10px; display: flex; flex-direction: column; gap: 24px; text-align: center; color: var(--c-navy); }
.voiceitt-support .cs-hmw__question { margin-bottom: .4px; }
.voiceitt-support .cs-hmw__ideas p { font-weight: 700; margin-bottom: 22.4px; }
.voiceitt-support .cs-hmw__ideas p:last-child { margin-bottom: .4px; }

/* The solution: before/after screens */
.voiceitt-support .cs-solution { display: flex; flex-direction: column; gap: 64px; }
.voiceitt-support .cs-solution__item { padding: 10px; margin: 16px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.voiceitt-support .cs-solution__item:nth-child(2) { margin-top: 0; }
.voiceitt-support .cs-solution__item img { width: 100%; }

/* More projects backgrounds */
.voiceitt-support .cs-project--namogoo { background-image: url("/assets/uploads/2024/01/Namogoo-cover-image-1.jpg"); }
.voiceitt-support .cs-project--annotation { background-image: url("/assets/uploads/2024/03/Gringotts-small.jpg"); }

/* Tablet polish: equal-height discovery cards with a tighter gap */
@media (min-width: 768px) and (max-width: 1024px) {
  .voiceitt-support .cs-discovery { gap: 24px; align-items: stretch; }
  .voiceitt-support .cs-hmw { flex: 1 1 0; }
}

@media (max-width: 767px) {
  .voiceitt-support .cs-discovery { flex-direction: column; align-items: stretch; }
  .voiceitt-support .cs-hmw { width: 100%; }
}