/**
 * About page — single-column layout, top section nav, post-clinical practice content.
 */

html[data-theme="7stages"] body.about-page {
  background-color: var(--color-bg);
}

html[data-theme="7stages"] body.about-page .section {
  background: var(--color-bg);
}

html[data-theme="7stages"] body.about-page .treatmentsheader__wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 64px 24px 0;
}

html[data-theme="7stages"] body.about-page .singletreatmebt__heading {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

html[data-theme="7stages"] body.about-page .treatmentssubheading {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text);
}

html[data-theme="7stages"] body.about-page .text-span-2 {
  font-family: var(--font-heading);
  font-style: italic;
}

/* Top section navigation */
html[data-theme="7stages"] body.about-page .about-page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 780px;
  margin: 28px auto 0;
  padding: 0 24px 24px;
  border-bottom: 1px solid var(--color-border);
}

html[data-theme="7stages"] body.about-page .about-page-nav__link {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  padding: 10px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-text-white);
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

html[data-theme="7stages"] body.about-page .about-page-nav__link:hover {
  border-color: var(--color-cta);
  color: var(--color-cta);
  background: rgba(37, 99, 235, 0.04);
}

/* Main content column */
html[data-theme="7stages"] body.about-page .about-page-content {
  max-width: 780px;
  margin: 0 auto;
  padding: 32px 24px 80px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

html[data-theme="7stages"] body.about-page .abtpgsection__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text);
  margin-top: 32px;
  scroll-margin-top: 100px;
}

html[data-theme="7stages"] body.about-page .abtpgsection__title.no-pad {
  margin-top: 0;
}

html[data-theme="7stages"] body.about-page .singlecont__richtext {
  background: var(--color-text-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-card);
}

html[data-theme="7stages"] body.about-page .singlecont__richtext h1 {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 28px 0 12px;
}

html[data-theme="7stages"] body.about-page .singlecont__richtext h1:first-child {
  margin-top: 0;
}

html[data-theme="7stages"] body.about-page .singlecont__richtext p,
html[data-theme="7stages"] body.about-page .singlecont__richtext li {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text);
}

html[data-theme="7stages"] body.about-page .singlecont__richtext a {
  color: var(--color-cta);
  font-weight: 600;
}

html[data-theme="7stages"] body.about-page .abtpgfeatured__image {
  width: 100%;
  border-radius: var(--radius-md);
}

html[data-theme="7stages"] body.about-page .treatmentssubheading.x-margin {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 40px;
  scroll-margin-top: 100px;
}

html[data-theme="7stages"] body.about-page .faqswrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

html[data-theme="7stages"] body.about-page .singlefaq {
  background: var(--color-text-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

html[data-theme="7stages"] body.about-page .singlefaqtoggle {
  padding: 18px 20px;
  font-family: var(--font-body);
  font-weight: 600;
}

html[data-theme="7stages"] body.about-page .faqdropdwon__content {
  padding: 0 20px 18px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-light);
}

html[data-theme="7stages"] body.about-page .faqdropdwon__content a {
  color: var(--color-cta);
  font-weight: 600;
}

@media (max-width: 767px) {
  html[data-theme="7stages"] body.about-page .treatmentsheader__wrap,
  html[data-theme="7stages"] body.about-page .about-page-nav,
  html[data-theme="7stages"] body.about-page .about-page-content {
    padding-left: 20px;
    padding-right: 20px;
  }

  html[data-theme="7stages"] body.about-page .singlecont__richtext {
    padding: 24px 20px;
  }
}