/* ==========================================================================
   ChronicSync — Homepage-specific styles
   (shared components live in components.css)
   ========================================================================== */

.cs-intro-tile {
  background: var(--cs-white);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
  padding: 1.1rem;
  height: 100%;
}

.cs-benefit-card {
  background: var(--cs-white);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.5rem);
  box-shadow: var(--cs-shadow-sm);
  transition: transform var(--cs-transition), box-shadow var(--cs-transition);
}

.cs-benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--cs-shadow-md);
}

.cs-benefit-card + .cs-benefit-card {
  margin-top: 1.75rem;
}

.cs-benefit-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--cs-radius-sm);
  background: var(--cs-primary-light);
  color: var(--cs-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

.cs-benefit-icon.tint-secondary {
  background: var(--cs-secondary-tint);
  color: var(--cs-secondary-dark);
}

.cs-benefit-illustration {
  background: linear-gradient(160deg, var(--cs-primary-light) 0%, var(--cs-bg-soft) 100%);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
  padding: 1.5rem;
  height: 100%;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.85rem;
}

.cs-benefit-mini-card {
  background: var(--cs-white);
  border-radius: var(--cs-radius-sm);
  box-shadow: var(--cs-shadow-sm);
  padding: 0.85rem 1rem;
  width: 100%;
}

.cs-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  background: var(--cs-white);
  border: 1px solid var(--cs-border);
  color: var(--cs-text-muted);
}