/* Shared typography styles for marketing pages */

/* ============================
   Typography
   ============================ */

.hero-heading {
  font-size: 2.75rem; /* between 4xl and 5xl */
  line-height: 1.1;
  font-weight: 700;
}

@media (min-width: 768px) {
  .hero-heading {
    font-size: 3.25rem; /* slightly larger than section headers */
    line-height: 1.05;
  }
}

.hero-subtitle {
  font-size: 1.375rem; /* between xl and 2xl */
  line-height: 2rem; /* match section-subtitle base line-height */
  color: #d1d5db;
}

@media (min-width: 768px) {
  .hero-subtitle {
    font-size: 1.625rem; /* slightly larger than section-subtitle */
    line-height: 2.5rem; /* match section-subtitle md+ line-height */
  }
}

.normal-heading {
  font-size: 2.25rem; /* roughly Tailwind text-4xl */
  line-height: 2.5rem;
  font-weight: 700;
}

@media (min-width: 768px) {
  .normal-heading {
    font-size: 3rem; /* roughly Tailwind text-5xl */
    line-height: 1;
  }
}

.normal-subtitle {
  font-size: 1.25rem; /* roughly Tailwind text-xl */
  line-height: 1.75rem;
  color: #d1d5db; /* similar to Tailwind text-gray-300 */
}

@media (min-width: 768px) {
  .normal-subtitle {
    font-size: 1.5rem; /* roughly Tailwind text-2xl */
    line-height: 2rem;
  }
}

.section-body {
  font-size: 1.125rem; /* roughly Tailwind text-lg */
  line-height: 1.75rem; /* similar to leading-relaxed */
  color: #d1d5db; /* similar to Tailwind text-gray-300 */
}

/* ============================
   Spacing helpers
   ============================ */

/* Lightweight spacing helpers for consistent layouts */

/* Hero section layout: outer hero container (largest) */
.hero-section {
  min-height: 80vh;
  padding: 10rem 1.5rem 6rem; /* top, sides, bottom */
}

/* Hero content container: width + centering */
.hero-stack {
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.hero-stack > .hero-heading {
  margin-bottom: 4rem; /* heading → subtitle */
}

.hero-stack > .hero-subtitle {
  margin-bottom: 4rem; /* subtitle → next block */
}

/* Normal section layout: outer section container (largest) */
.normal-section {
  min-height: 60vh;
  padding: 5rem 1.5rem; /* top/bottom, sides */
}

/* Normal section header/subtitle container */
.normal-stack {
  max-width: 64rem; /* ~Tailwind max-w-5xl */
  margin-left: auto;
  margin-right: auto;
}

.normal-stack > .normal-heading {
  margin-bottom: 2rem; /* header → subtitle */
}

.normal-stack > .normal-subtitle {
  margin-bottom: 2rem; /* subtitle → body content container */
}

.normal-content {
  max-width: 64rem;
  margin: 2.5rem auto 0; /* space between subtitle and body content */
}