/* ════════════════════════════════════════════════════════
   3 · WHAT YOU'LL DO
   ════════════════════════════════════════════════════════ */
.preview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.pv-card {
  background: var(--card);
  border: 1px solid var(--cardb);
  border-radius: 16px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.pv-card:hover {
  border-color: rgba(232,0,138,0.3);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(232,0,138,0.10);
}
.pv-icon {
  font-size: 28px;
  height: 36px;
  display: flex;
  align-items: center;
}
.pv-icon img { width: 32px; height: 32px; }
.pv-title { font-weight: 700; font-size: 15px; }
.pv-body  { font-size: 13px; color: var(--t2); line-height: 1.6; }

@media (max-width: 920px) { .preview-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .preview-grid { grid-template-columns: 1fr; } }