/* Features page specific styles (kept minimal to avoid duplication with base.css) */
.feature-hero {
  background: radial-gradient(1200px 600px at 10% 0%, var(--color-bg-accent) 0%, transparent 60%),
              linear-gradient(135deg, var(--color-secondary-light) 0%, var(--color-bg-primary) 60%);
  padding: var(--space-16) 0 var(--space-12);
}
.feature-hero .hero-copy p {
  color: var(--color-text-secondary);
  max-width: 48ch;
}
.hero-cta { margin-top: var(--space-6); }

.feature-search { padding: var(--space-8) 0; }
.features-list { padding: var(--space-8) 0 var(--space-12); }

.feature-card .feature-image {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-base);
  margin-bottom: var(--space-4);
}

.feature-cta { padding: var(--space-8) 0 var(--space-12); }

@media (max-width: 768px) {
  .feature-hero { padding: var(--space-12) 0 var(--space-8); }
}