/* =====================================================
   Landing Page Section Builder — Public Styles

   Design DNA (Section 9): portable copy of home.css's canonical
   :root tokens — see the note at the top of home.css. Landing pages
   render without the global header/footer and don't load home.css,
   so this file is self-sufficient.
   ===================================================== */

.ls-hero, .ls-features, .ls-testimonials, .ls-pricing, .ls-cta, .ls-form {
  --primary: #1A73E8;
  --primary-dark: #1557B0;
  --on-surface: #1A1A2E;
  --on-surface-muted: #5F6368;
  --surface: #FFFFFF;
  --background: #F6F7F9;
  --border: #DFE1E6;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--on-surface);
}

.ls-hero, .ls-features, .ls-testimonials, .ls-pricing, .ls-cta, .ls-form {
  padding: 56px 20px;
}

.btn { display: inline-block; padding: 13px 28px; border-radius: 8px; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; border: none; }
.btn--primary { background: var(--primary); color: #fff; transition: background .15s ease; }
.btn--primary:hover { background: var(--primary-dark); }

/* ---------- Hero ---------- */
.ls-hero { background: var(--background); text-align: center; }
.ls-hero__inner { max-width: 720px; margin: 0 auto; }
.ls-hero h1 { font-family: 'Poppins', sans-serif; font-size: 40px; font-weight: 700; margin: 0 0 16px; line-height: 1.2; }
.ls-hero__sub { font-size: 18px; color: var(--on-surface-muted); margin: 0 0 28px; line-height: 1.6; }

/* ---------- Features ---------- */
.ls-features__heading { text-align: center; font-family: 'Poppins', sans-serif; font-size: 30px; margin: 0 0 36px; }
.ls-features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; max-width: 1000px; margin: 0 auto; }
.ls-features__item h3 { font-size: 18px; margin: 0 0 8px; }
.ls-features__item p { font-size: 14px; color: var(--on-surface-muted); line-height: 1.6; margin: 0; }

/* ---------- Testimonials ---------- */
.ls-testimonials { background: var(--background); }
.ls-testimonials__heading { text-align: center; font-family: 'Poppins', sans-serif; font-size: 30px; margin: 0 0 30px; }

/* ---------- Pricing ---------- */
.ls-pricing__heading { text-align: center; font-family: 'Poppins', sans-serif; font-size: 30px; margin: 0 0 36px; }
.ls-pricing__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; max-width: 1000px; margin: 0 auto; }
.ls-pricing__tier { border: 1px solid var(--border); border-radius: 12px; padding: 28px 24px; text-align: center; }
.ls-pricing__tier h3 { font-size: 18px; margin: 0 0 10px; }
.ls-pricing__price { font-family: 'Poppins', sans-serif; font-size: 32px; font-weight: 700; color: var(--primary); margin-bottom: 16px; }
.ls-pricing__tier ul { list-style: none; padding: 0; margin: 0 0 20px; text-align: left; }
.ls-pricing__tier li { padding: 6px 0; font-size: 14px; border-bottom: 1px solid var(--background); }

/* ---------- CTA ---------- */
.ls-cta { background: var(--primary); color: #fff; text-align: center; }
.ls-cta h2 { font-family: 'Poppins', sans-serif; font-size: 28px; margin: 0 0 12px; }
.ls-cta p { font-size: 16px; opacity: .92; margin: 0 0 24px; }
.ls-cta .btn--primary { background: #fff; color: var(--primary); }
.ls-cta .btn--primary:hover { background: var(--background); }

/* ---------- Form ---------- */
.ls-form__heading { text-align: center; font-family: 'Poppins', sans-serif; font-size: 28px; margin: 0 0 28px; }

/* ---------- Rich Text ---------- */
.ls-richtext__heading { font-family: 'Poppins', sans-serif; font-size: 28px; margin: 0 0 20px; text-align: center; }
.ls-richtext__body { max-width: 760px; margin: 0 auto; font-size: 15px; line-height: 1.8; color: var(--on-surface); }
.ls-richtext__body p { margin: 0 0 16px; }
.ls-richtext__body h2, .ls-richtext__body h3 { font-family: 'Poppins', sans-serif; margin: 24px 0 12px; }
.ls-richtext__body ul, .ls-richtext__body ol { margin: 0 0 16px; padding-left: 24px; }
.ls-richtext__body img { max-width: 100%; height: auto; border-radius: 8px; }

@media (max-width: 640px) {
  .ls-hero h1 { font-size: 30px; }
  .ls-hero, .ls-features, .ls-testimonials, .ls-pricing, .ls-cta, .ls-form { padding: 40px 16px; }
}