/* ============================================================
   CARD SHELL — STRUCTURAL WRAPPER
   (NO borders, NO shadows, NO visual styling)
============================================================ */

.card-shell {
  background: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}


/* ============================================================
   GRID VARIANT — used for services + multi-card rows
============================================================ */

.card-shell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 5px;
}


/* ============================================================
   MINI SERVICE CARD — uses .card visuals
============================================================ */

.svc-mini {
  padding: 5px;
  border-radius: var(--radius-lg);

  /* visual frame comes from main-card.css
     BUT svc-mini ALSO needs border + shadow */
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);

  display: flex;
  flex-direction: column;
  gap: 5px;
}

.svc-mini ul {
  margin: 0;
  padding-left: 16px;
  line-height: 1.4;
}

.svc-mini li {
  margin-bottom: 4px;
  color: var(--ink-700);
  font-size: 0.92rem;
}


/* ============================================================
   AUDIENCE CARDS — Hero
============================================================ */

.aud-card {
  padding: 18px;
  border-radius: var(--radius-lg);

  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);

  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aud-card ul {
  margin: 0;
  padding-left: 18px;
  line-height: 1.45;
}

.aud-card li {
  margin-bottom: 6px;
  color: var(--ink-700);
  font-size: 0.95rem;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 700px) {
  .svc-mini,
  .aud-card {
    padding: 14px;
    border-radius: var(--radius-md);
  }

}