/* === GLOBAL SEO STYLE FOR ALL PAGES (FINAL) === */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600&display=swap');

/* === SEO CONTAINER === */
.vd-seo {
  max-width: 1000px;
  margin: 100px auto 60px; /* desktop offset from fixed header */
  padding: 0 20px;
  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.7;
  color: #333;
}

/* === HEADINGS === */
.vd-seo h1 {
  font-size: 36px;
  font-weight: 400;
  color: #2c3e50;
  margin-bottom: 25px;
  line-height: 1.3;
}

.vd-seo h2 {
  font-size: 28px;
  font-weight: 400;
  color: #34495e;
  margin: 40px 0 20px;
  padding-bottom: 10px;
  border-bottom: 3px solid #6D5BA1;
}

.vd-seo h3 {
  font-size: 22px;
  font-weight: 400;
  color: #444;
  margin: 30px 0 15px;
}

/* === TEXT === */
.vd-seo p {
  font-size: 17px;
  margin-bottom: 20px;
  color: #555;
}

.vd-seo strong {
  color: #2c3e50;
  font-weight: 400;
}

/* === LINKS === */
.vd-seo a {
  color: #6D5BA1;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.vd-seo a:hover { opacity: 0.85; }

/* === LISTS WITH CHECKS === */
.vd-seo ul {
  margin: 20px 0;
  padding-left: 0;
  list-style: none;
}
.vd-seo ul li {
  font-size: 17px;
  padding: 10px 0 10px 35px;
  position: relative;
  color: #555;
}
.vd-seo ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #6D5BA1;
  font-size: 20px;
}

/* === TABLES === */
.vd-table-wrap {
  overflow-x: auto;
  margin-top: 16px;
}
.vd-seo table {
  width: 100%;
  min-width: 800px;
  border-collapse: collapse;
}
.vd-seo th,
.vd-seo td {
  border: 1px solid #ddd;
  padding: 12px 14px;
  vertical-align: top;
}
.vd-seo th {
  font-weight: 600;
  color: #2c3e50;
}

/* === CTA BUTTON (LIKE MAIN PAGE) === */
.vd-cta {
  display: inline-block;
  background: #6D5BA1;
  color: #F7F5FB !important;
  border: 1px solid #6D5BA1;
  padding: 15px 40px;
  border-radius: 30px;
  font-size: 20px;
  font-family: 'Nunito Sans', sans-serif;
  text-decoration: none !important;
  transition: all 0.3s ease;
  margin-top: 20px;
}
.vd-cta:hover {
  background: #F7F5FB;
  color: #6D5BA1 !important;
}

/* === SCROLL OFFSET FOR FIXED HEADER === */
.vd-seo h1,
.vd-seo h2,
.vd-seo h3 {
  scroll-margin-top: 120px;
}

/* === MOBILE FIX (IMPORTANT) === */
@media (max-width: 768px) {

  .vd-seo {
    margin: 130px auto 50px; /* FIX: mobile header height */
    padding: 0 16px;
  }

  .vd-seo h1 { font-size: 28px; }
  .vd-seo h2 { font-size: 24px; }
  .vd-seo h3 { font-size: 20px; }

  .vd-seo p,
  .vd-seo ul li { font-size: 16px; }

  .vd-seo table { min-width: 600px; }

  .vd-cta {
    font-size: 18px;
    padding: 12px 30px;
  }

  .vd-seo h1,
  .vd-seo h2,
  .vd-seo h3 {
    scroll-margin-top: 150px; /* FIX: anchors on mobile */
  }
}