/* ==================== LANDING PAGE TYPOGRAPHY - BEST PRACTICES ==================== */
/* Consistent font sizes across all sections following design system */

/* ===== HERO SECTION ===== */
.hero h1 {
  font-size: 2rem; /* 32px mobile */
  line-height: var(--line-height-tight);
  font-weight: 700;
}

@media (min-width: 768px) {
  .hero h1 {
    font-size: var(--font-size-4xl); /* 48px desktop */
  }
}

.hero .subtitle {
  font-size: var(--font-size-lg); /* 18px */
  line-height: var(--line-height-normal);
  font-weight: 400;
}

.hero .tagline {
  font-size: var(--font-size-base); /* 16px */
  line-height: var(--line-height-normal);
}

/* ===== SECTION HEADINGS (h2) ===== */
.features h2,
.how-it-works h2,
.pricing h2,
.faq-title {
  font-size: var(--font-size-xl); /* 24px mobile */
  font-weight: 700;
  line-height: var(--line-height-tight);
}

@media (min-width: 768px) {
  .features h2,
  .how-it-works h2,
  .pricing h2,
  .faq-title {
    font-size: var(--font-size-2xl); /* 32px desktop */
  }
}

/* ===== CARD HEADINGS (h3) ===== */
.feature-card h3,
.step-card h3,
.pricing-tier h3,
.faq-summary-text {
  font-size: var(--font-size-lg); /* 18px */
  font-weight: 700;
  line-height: var(--line-height-tight);
}

/* ===== BODY TEXT ===== */
.feature-card p,
.step-card p,
.pricing-tier p,
.faq-content p,
.pricing-subtitle,
.section-subtitle {
  font-size: var(--font-size-base); /* 16px */
  line-height: var(--line-height-relaxed); /* 1.7 */
  font-weight: 400;
}

/* ===== SMALL TEXT ===== */
.tier-features li,
.tier-description,
.price-period,
.mockup-caption {
  font-size: var(--font-size-sm); /* 14px */
  line-height: var(--line-height-normal); /* 1.5 */
}

/* ===== EXTRA SMALL TEXT ===== */
.beta,
.footer-bottom {
  font-size: var(--font-size-xs); /* 12px */
  line-height: var(--line-height-normal);
}

/* ===== BUTTONS ===== */
.btn-modern,
.btn-brutal {
  font-size: var(--font-size-base); /* 16px */
  font-weight: 600;
  line-height: var(--line-height-tight);
}

.btn-modern-lg {
  font-size: var(--font-size-lg); /* 18px */
}

/* ===== PRICE DISPLAY ===== */
.price-amount {
  font-size: var(--font-size-4xl); /* 48px */
  font-weight: 900;
  line-height: 1;
}

.price-currency {
  font-size: var(--font-size-xl); /* 24px */
  font-weight: 700;
}

/* ===== STEP NUMBERS ===== */
.step-number {
  font-size: var(--font-size-2xl); /* 32px */
  font-weight: 900;
  line-height: 1;
}

/* ===== ICONS ===== */
.feature-icon,
.step-icon {
  font-size: 2rem; /* 32px */
}

/* ===== TIER BADGES & LABELS ===== */
.tier-badge,
.tier-name {
  font-size: var(--font-size-lg); /* 18px */
  font-weight: 700;
}

.price-value {
  font-size: var(--font-size-sm); /* 14px */
  font-weight: 400;
}

/* ===== NAVIGATION ===== */
/* Navigation styles are defined in main.css to avoid conflicts */

.logo h1 {
  font-size: 1.5rem; /* 24px */
  font-weight: 900;
}

/* ===== FOOTER ===== */
.footer-section h4 {
  font-size: var(--font-size-base); /* 16px */
  font-weight: 700;
}

.footer-section a,
.footer-section p {
  font-size: var(--font-size-sm); /* 14px */
}