/* Features Page Typography Enhancements
 * This file contains typography improvements for the features page
 * Based on modern UI design best practices for 2025
 */

/* Enhanced Typographic Hierarchy */

/* Hero Section Typography */
.page-hero h1 {
  font-size: 3.5rem; /* Increased from base heading size */
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-4);
  line-height: 1.2;
  letter-spacing: -0.01em; /* Slightly tighter for headlines */
}

.page-hero .hero-subtitle {
  font-size: var(--font-size-xl);
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
  font-weight: var(--font-weight-normal);
}

/* Section Headings */
.section-title {
  font-size: 2.75rem;
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-3);
  letter-spacing: -0.01em;
  color: var(--neutral-800);
}

.section-subtitle {
  font-size: var(--font-size-lg);
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto var(--spacing-16); /* Increased bottom margin */
  color: var(--neutral-600);
  font-weight: var(--font-weight-normal);
}

/* Core Features Typography */
.feature-item {
  margin-bottom: var(--spacing-20); /* Increased spacing between features */
}

.feature-details h3 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-4);
  color: var(--neutral-800);
  line-height: 1.3;
}

.feature-details p {
  font-size: var(--font-size-base);
  line-height: 1.7; /* Increased line height for readability */
  margin-bottom: var(--spacing-6);
  color: var(--neutral-700);
}

.feature-details ul {
  padding-left: var(--spacing-5);
}

.feature-details li {
  margin-bottom: var(--spacing-3);
  line-height: 1.6;
  position: relative;
}

.feature-details li::before {
  content: "•";
  color: var(--primary);
  font-weight: var(--font-weight-bold);
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

/* Additional Features Typography */
.features-grid {
  margin-bottom: var(--spacing-20) !important; /* Further increased */
}

.feature-card h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-3);
  color: var(--neutral-800);
  line-height: 1.3;
}

.feature-card p {
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--neutral-600);
}

/* Technical Explanation Typography */
.tech-explanation h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-2);
  color: var(--neutral-800);
  display: flex;
  align-items: center;
}

.tech-explanation h3::before {
  content: attr(data-step);
  margin-right: var(--spacing-3);
  background-color: var(--primary);
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-base);
  flex-shrink: 0;
}

.tech-explanation p {
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--neutral-700);
  margin-left: 48px; /* Aligns with heading text after the number */
  margin-bottom: var(--spacing-8);
}

/* Comparison Table Typography */
.comparison-table {
  font-size: var(--font-size-base);
}

.comparison-table th {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--neutral-800);
  text-align: left;
  padding: var(--spacing-4) var(--spacing-6);
  border-bottom: 2px solid var(--neutral-300);
}

.comparison-table td {
  padding: var(--spacing-4) var(--spacing-6);
  color: var(--neutral-700);
  line-height: 1.5;
  border-bottom: 1px solid var(--neutral-200);
}

.comparison-table td:first-child {
  font-weight: var(--font-weight-medium);
  color: var(--neutral-800);
}

.comparison-table .highlight {
  color: var(--primary);
  font-weight: var(--font-weight-semibold);
}

/* Testimonials Typography */
.testimonial-content p {
  font-size: var(--font-size-lg);
  line-height: 1.8;
  font-style: italic;
  color: var(--neutral-700);
  position: relative;
  padding: 0 var(--spacing-4);
}

.testimonial-content p::before {
  content: """;
  font-size: 3rem;
  position: absolute;
  left: -1rem;
  top: -1rem;
  color: var(--primary-light);
  opacity: 0.5;
}

.testimonial-author h4 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-1);
  color: var(--neutral-800);
}

.testimonial-author p {
  font-size: var(--font-size-sm);
  color: var(--neutral-500);
  font-style: normal;
}

/* Use Cases Typography */
.use-case-card h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-3);
  color: var(--neutral-800);
}

.use-case-card p {
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--neutral-600);
}

/* CTA Section Typography */
.cta-content h2 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-4);
  color: var(--neutral-800);
}

.cta-content p {
  font-size: var(--font-size-lg);
  line-height: 1.6;
  color: var(--neutral-600);
  margin-bottom: var(--spacing-8);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Enhanced Visual Hierarchy */
.feature-card .feature-icon {
  margin-bottom: var(--spacing-4);
}

/* General Typography Enhancements */
.main-features, 
.additional-features, 
.technical-explanation, 
.comparison-section,
.testimonials-section,
.use-cases,
.cta-section {
  padding-top: var(--spacing-20);
  padding-bottom: var(--spacing-20);
}

/* Improving Link Typography */
a.nav-link {
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.01em;
}

.btn {
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
}

/* Utility Typography Classes */
.text-primary-gradient {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent; /* Standard fallback for text-fill-color */
}

.text-emphasized {
  font-weight: var(--font-weight-semibold);
}

.text-large {
  font-size: 120%;
}

.text-small {
  font-size: 90%;
}