/**
 * Landing page section styles — copied from landing.html.
 * Used by CMS public pages and GrapesJS canvas (class names match landing).
 */

/* Headings in sections (landing.html sets h1–h4 globally) */
.cms-page-body .features-header h2,
.features-header h2,
.cms-page-body .hero h1,
.hero h1,
.cms-page-body .feature-card h3,
.feature-card h3,
.cms-page-body .problem h2,
.problem h2,
.cms-page-body .bottom-cta h2,
.bottom-cta h2 {
  font-family: 'Space Grotesk', sans-serif;
}

/* ── Hero ───────────────────────────────────────────── */
.cms-page-body .hero,
.hero,
.cms-page-body .hl-hero,
.hl-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8rem 2rem 4rem;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.cms-page-body .hero::after,
.hero::after,
.cms-page-body .hl-hero::after,
.hl-hero::after {
  content: '';
  position: absolute;
  top: 15%;
  right: -5%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(200, 135, 62, 0.07) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.cms-page-body .hero-eyebrow,
.hero-eyebrow {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 1.5rem;
}

.cms-page-body .hero h1,
.hero h1,
.cms-page-body .hl-hero .hl-hero-title,
.hl-hero .hl-hero-title,
.cms-page-body .hl-hero-title,
.hl-hero-title {
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--forest);
  letter-spacing: -2px;
  max-width: 880px;
  margin: 0;
}

.cms-page-body .hero h1 em,
.hero h1 em {
  font-style: normal;
  color: var(--amber);
}

.cms-page-body .hero-sub,
.hero-sub,
.cms-page-body .hl-hero-subtitle,
.hl-hero-subtitle {
  font-size: 1.2rem;
  color: var(--bark);
  max-width: 520px;
  margin-top: 1.75rem;
  line-height: 1.75;
  opacity: 0.85;
}

.cms-page-body .hero-form-wrap,
.hero-form-wrap {
  margin-top: 3rem;
  max-width: 480px;
}

.cms-page-body .hero-form-label,
.hero-form-label {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--moss);
  margin-bottom: 1rem;
  display: block;
}

.cms-page-body .btn-primary,
.btn-primary,
.cms-page-body .hl-btn,
.hl-btn {
  display: inline-block;
  width: auto;
  padding: 0.9rem 1.5rem;
  background: var(--forest);
  color: var(--wheat);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  letter-spacing: 0.2px;
  text-align: center;
  text-decoration: none;
}

.cms-page-body .btn-primary:hover,
.btn-primary:hover,
.cms-page-body .hl-btn:hover,
.hl-btn:hover {
  background: var(--bark);
}

.cms-page-body .btn-primary:active,
.btn-primary:active {
  transform: scale(0.98);
}

/* ── Problem (mörk band) ───────────────────────────── */
.cms-page-body .problem,
.problem {
  background: var(--forest);
  padding: 6rem 2rem;
  color: var(--cream);
}

.cms-page-body .problem-inner,
.problem-inner {
  max-width: 900px;
  margin: 0 auto;
}

.cms-page-body .section-eyebrow,
.section-eyebrow {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 1.5rem;
}

.cms-page-body .problem h2,
.problem h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--wheat);
  letter-spacing: -1px;
}

.cms-page-body .problem p,
.problem p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: rgba(212, 197, 160, 0.72);
  margin-top: 1.5rem;
  max-width: 680px;
}

/* ── Features ─────────────────────────────────────── */
.cms-page-body .features,
.features,
.cms-page-body .hl-features,
.hl-features {
  padding: 7rem 2rem;
  max-width: 1100px;
  margin: 0 auto;
  background: transparent;
}

.cms-page-body .features-header,
.features-header {
  margin-bottom: 3.5rem;
}

.cms-page-body .features-header h2,
.features-header h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: var(--forest);
  letter-spacing: -1px;
  margin-top: 0.75rem;
}

.cms-page-body .feature-grid,
.feature-grid,
.cms-page-body .hl-features-grid,
.hl-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.cms-page-body .feature-card,
.feature-card,
.cms-page-body .hl-feature-card,
.hl-feature-card {
  background: var(--cream);
  border: 1px solid rgba(61, 43, 31, 0.08);
  border-radius: 16px;
  padding: 2rem 2rem 2.25rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cms-page-body .feature-card:hover,
.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(26, 46, 26, 0.08);
}

.cms-page-body .feature-card.featured,
.feature-card.featured {
  grid-column: span 3;
  background: var(--bark);
  color: var(--cream);
}

.cms-page-body .feature-card.featured .feature-num,
.feature-card.featured .feature-num {
  color: var(--amber);
}

.cms-page-body .feature-card.featured h3,
.feature-card.featured h3 {
  color: var(--wheat);
}

.cms-page-body .feature-card.featured p,
.feature-card.featured p {
  color: rgba(212, 197, 160, 0.72);
}

.cms-page-body .feature-num,
.feature-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--moss);
  letter-spacing: 1px;
  margin-bottom: 1.25rem;
}

.cms-page-body .feature-card h3,
.feature-card h3,
.cms-page-body .hl-feature-card h3,
.hl-feature-card h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--forest);
  margin-bottom: 0.7rem;
  letter-spacing: -0.3px;
}

.cms-page-body .feature-card p,
.feature-card p,
.cms-page-body .hl-feature-card p,
.hl-feature-card p {
  font-size: 0.93rem;
  color: rgba(28, 28, 28, 0.6);
  line-height: 1.7;
}

.cms-page-body .hl-feature-icon,
.hl-feature-icon {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

/* ── Social proof ───────────────────────────────────── */
.cms-page-body .social-proof,
.social-proof,
.cms-page-body .hl-testimonial,
.hl-testimonial {
  background: var(--cream);
  padding: 5rem 2rem;
}

.cms-page-body .social-proof-inner,
.social-proof-inner,
.cms-page-body .hl-testimonial-inner,
.hl-testimonial-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.cms-page-body .social-proof h2,
.social-proof h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--forest);
  letter-spacing: -0.5px;
  margin-bottom: 0.75rem;
}

.cms-page-body .social-proof-note,
.social-proof-note {
  font-size: 0.9rem;
  color: rgba(28, 28, 28, 0.45);
  font-style: italic;
}

.cms-page-body .testimonial-placeholder,
.testimonial-placeholder {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.cms-page-body .testimonial-card,
.testimonial-card {
  background: var(--bone);
  border: 1px solid rgba(61, 43, 31, 0.08);
  border-radius: 14px;
  padding: 2rem;
  text-align: left;
}

.cms-page-body .testimonial-card .stars,
.testimonial-card .stars {
  color: var(--amber);
  font-size: 1rem;
  margin-bottom: 1rem;
  letter-spacing: 2px;
}

.cms-page-body .testimonial-card .quote,
.testimonial-card .quote,
.cms-page-body .hl-quote,
.hl-quote {
  font-size: 0.93rem;
  color: rgba(28, 28, 28, 0.6);
  line-height: 1.7;
  font-style: italic;
  border: none;
  margin: 0;
  padding: 0;
}

.cms-page-body .testimonial-card .author,
.testimonial-card .author,
.cms-page-body .hl-quote-author,
.hl-quote-author {
  margin-top: 1.25rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--moss);
  font-style: normal;
}

/* ── Bottom CTA ───────────────────────────────────── */
.cms-page-body .bottom-cta,
.bottom-cta,
.cms-page-body .hl-cta,
.hl-cta {
  padding: 7rem 2rem;
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
  background: transparent;
  color: var(--ink);
}

.cms-page-body .bottom-cta h2,
.bottom-cta h2,
.cms-page-body .hl-cta h2,
.hl-cta h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--forest);
  letter-spacing: -1px;
  line-height: 1.15;
}

.cms-page-body .bottom-cta p,
.bottom-cta p,
.cms-page-body .hl-cta p,
.hl-cta p {
  font-size: 1.05rem;
  color: rgba(28, 28, 28, 0.6);
  margin-top: 1rem;
  line-height: 1.7;
}

.cms-page-body .bottom-cta-form,
.bottom-cta-form {
  margin-top: 2.5rem;
}

/* ── Text (problem-inner layout on light bg) ────────── */
.cms-page-body .hl-text-section,
.hl-text-section {
  padding: 6rem 2rem;
  max-width: 900px;
  margin: 0 auto;
}

.cms-page-body .hl-text-inner,
.hl-text-inner {
  max-width: 680px;
}

.cms-page-body .hl-text-inner h2,
.hl-text-inner h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 600;
  color: var(--forest);
  letter-spacing: -1px;
  margin-bottom: 1rem;
}

.cms-page-body .hl-text-inner p,
.hl-text-inner p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: rgba(28, 28, 28, 0.72);
}

.cms-page-body .hl-footer,
.hl-footer {
  display: none;
}

/* ── Responsive (from landing.html) ─────────────────── */
@media (max-width: 768px) {
  .cms-page-body .hero,
  .hero,
  .cms-page-body .hl-hero,
  .hl-hero {
    padding: 7rem 1.25rem 3rem;
  }

  .cms-page-body .hero h1,
  .hero h1,
  .hl-hero-title {
    letter-spacing: -1.5px;
  }

  .cms-page-body .problem,
  .problem {
    padding: 4rem 1.25rem;
  }

  .cms-page-body .features,
  .features,
  .hl-features {
    padding: 4rem 1.25rem;
  }

  .cms-page-body .feature-grid,
  .feature-grid,
  .hl-features-grid {
    grid-template-columns: 1fr;
  }

  .cms-page-body .feature-card.featured,
  .feature-card.featured {
    grid-column: span 1;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .cms-page-body .feature-grid,
  .feature-grid,
  .hl-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cms-page-body .feature-card.featured,
  .feature-card.featured {
    grid-column: span 2;
  }

  .cms-page-body .social-proof,
  .social-proof,
  .hl-testimonial {
    padding: 4rem 1.25rem;
  }

  .cms-page-body .testimonial-placeholder,
  .testimonial-placeholder {
    grid-template-columns: 1fr;
  }

  .cms-page-body .bottom-cta,
  .bottom-cta,
  .hl-cta {
    padding: 4rem 1.25rem;
  }
}