/* ==========================================================================
   Note card (callout)
   Reassuring/explanatory inline callout: icon + short text on a subtle bg.
   Catalogued in preview/index.html.
   ========================================================================== */

.note-card {
  display: flex;
  gap: 14px;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  background: var(--color-bg-subtle-light);
}

.note-card svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--color-success);
}

.note-card p {
  font-size: var(--text-sm);
  color: var(--color-text);
}