.visuals-grid-main {
  align-items: stretch;
}

.visuals-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.visuals-media-wrapper {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 0 0, rgba(255, 210, 236, 0.9), rgba(201, 197, 255, 0.8));
}

.visuals-media-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.visuals-card-body {
  margin-top: var(--space-2);
}

.visuals-list {
  margin-top: var(--space-3);
  padding-left: 0;
  display: grid;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

.visuals-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-soft);
}

.visuals-section-alt {
  background: linear-gradient(180deg, rgba(253, 240, 255, 0.85), rgba(245, 255, 251, 0.85));
}

.visuals-ui-demo {
  position: relative;
  padding: var(--space-4);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.visuals-ui-badge {
  align-self: flex-start;
  font-size: var(--font-size-xs);
}

.visuals-ui-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.visuals-ui-row-bottom {
  justify-content: flex-end;
}

.visuals-ui-pill {
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
}

.visuals-ui-main {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.visuals-ui-card {
  flex: 1;
  height: 96px;
  border-radius: var(--radius-xl);
  background: radial-gradient(circle at 0 0, rgba(255, 178, 216, 0.9), rgba(201, 197, 255, 0.8));
  box-shadow: var(--shadow-soft);
}

.visuals-ui-card-small {
  height: 72px;
  background: radial-gradient(circle at 0 0, rgba(174, 242, 209, 0.9), rgba(255, 200, 168, 0.8));
}

.visuals-ui-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(151, 119, 182, 0.6);
}

.visuals-home-demo {
  position: relative;
  min-height: 220px;
  overflow: hidden;
}

.visuals-home-layer {
  position: absolute;
  inset: 12% 10%;
  border-radius: var(--radius-xl);
}

.visuals-home-bg {
  background: linear-gradient(180deg, rgba(201, 197, 255, 0.9), rgba(255, 210, 236, 0.9));
}

.visuals-home-furniture {
  inset: 28% 14% 18% 14%;
  background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.95), rgba(255, 200, 168, 0.8));
}

.visuals-home-deco {
  inset: auto 18% 10% 18%;
  height: 32px;
  background: radial-gradient(circle at 20% 0, rgba(255, 185, 217, 0.9), rgba(174, 242, 209, 0.9));
  border-radius: var(--radius-pill);
}

.visuals-grid-compact {
  align-items: stretch;
}

.visuals-card-compact {
  height: 100%;
}

.visuals-snacks-grid {
  position: relative;
  min-height: 180px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: center;
}

.visuals-snack-pill {
  height: 46px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
}

.visuals-snack-soft-pink {
  background: linear-gradient(135deg, #ffd2ec, #ff8ac9);
}

.visuals-snack-mint {
  background: linear-gradient(135deg, #e3fff3, #aef2d1);
}

.visuals-snack-peach {
  background: linear-gradient(135deg, #ffe0cc, #ffc8a8);
}

.visuals-medal {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  justify-self: center;
  background: radial-gradient(circle at 30% 20%, #ffffff, #ffe6b3, #ffbf69);
  box-shadow: 0 10px 26px rgba(255, 191, 105, 0.6);
}

.visuals-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
}

.visuals-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.soft-bubble-bg {
  min-height: 220px;
  background: radial-gradient(circle at 10% 20%, rgba(255, 185, 217, 0.8), transparent 55%), radial-gradient(circle at 80% 10%, rgba(201, 197, 255, 0.8), transparent 55%), radial-gradient(circle at 20% 80%, rgba(174, 242, 209, 0.9), transparent 55%), radial-gradient(circle at 80% 80%, rgba(255, 200, 168, 0.9), transparent 55%);
}

@media (max-width: 768px) {
  .visuals-snacks-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .visuals-home-demo,
  .visuals-ui-demo {
    margin-bottom: var(--space-3);
  }
  .visuals-cta-row {
    flex-direction: column;
    align-items: flex-start;
  }
}