/**
 * Typography for /about and /how-it-works (SPA).
 * Requires landing-typography.js → html[data-marketing-page].
 */

html[data-marketing-page="how-it-works"] #root,
html[data-marketing-page="about"] #root {
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Eyebrows */
html[data-marketing-page] #root p[class*="uppercase"][class*="tracking-widest"][class*="font-bold"] {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.45 !important;
}

html[data-marketing-page="about"] #root p[class*="text-gray-400"][class*="uppercase"] {
  color: #6b7280 !important;
  letter-spacing: 0.14em !important;
}

/* Page titles */
html[data-marketing-page] #root h1[class*="font-extrabold"][class*="text-gray-900"] {
  font-size: clamp(2.125rem, 4.5vw, 3.125rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.035em !important;
  font-weight: 800 !important;
  text-wrap: balance;
}

/* How it works — hero lead */
html[data-marketing-page="how-it-works"] #root p[class*="text-lg"][class*="text-gray-500"][class*="max-w-2xl"] {
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem) !important;
  line-height: 1.65 !important;
  color: #4b5563 !important;
  max-width: 40rem !important;
}

/* About — prose block */
html[data-marketing-page="about"] #root [class*="prose"] p[class*="text-lg"][class*="text-gray-600"] {
  font-size: 1.1875rem !important;
  line-height: 1.7 !important;
  color: #374151 !important;
  max-width: 40rem;
}

html[data-marketing-page="about"] #root [class*="prose"] p[class*="text-base"][class*="text-gray-500"] {
  font-size: 1.0625rem !important;
  line-height: 1.75 !important;
  color: #4b5563 !important;
  max-width: 38rem;
}

html[data-marketing-page="about"] #root [class*="prose"][class*="space-y-6"] {
  gap: 1.5rem !important;
}

/* Section h2 */
html[data-marketing-page] #root h2[class*="font-extrabold"][class*="text-gray-900"] {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.03em !important;
  font-weight: 800 !important;
  text-wrap: balance;
}

html[data-marketing-page="how-it-works"] #root h2[class*="text-3xl"] {
  font-size: clamp(1.625rem, 3vw, 2.25rem) !important;
}

/* Section intros */
html[data-marketing-page="how-it-works"] #root section p[class*="text-base"][class*="text-gray-500"] {
  font-size: 1.0625rem !important;
  line-height: 1.7 !important;
  color: #4b5563 !important;
  max-width: 36rem;
}

html[data-marketing-page="about"] #root section p[class*="text-lg"][class*="text-gray-600"][class*="max-w-xl"] {
  font-size: 1.125rem !important;
  line-height: 1.7 !important;
  color: #4b5563 !important;
}

/* Feature / outcome rows */
html[data-marketing-page] #root .divide-y h3[class*="font-bold"][class*="text-gray-900"] {
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.015em !important;
  margin-bottom: 0.4rem !important;
}

html[data-marketing-page] #root .divide-y p[class*="text-sm"][class*="text-gray-500"] {
  font-size: 1rem !important;
  line-height: 1.65 !important;
  color: #5b6573 !important;
  max-width: 36rem;
}

/* Setup walkthrough (how-it-works) */
html[data-marketing-page="how-it-works"] #root h3[class*="text-xl"][class*="font-bold"] {
  font-size: 1.375rem !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
}

html[data-marketing-page="how-it-works"] #root .mb-12 > div > p[class*="text-sm"][class*="text-gray-500"]:not([class*="text-center"]) {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: #5b6573 !important;
}

/* Logic-in-action widget */
html[data-marketing-page="how-it-works"] #root .mb-10.max-w-sm span[class*="text-sm"][class*="font-medium"],
html[data-marketing-page="how-it-works"] #root .mb-10.max-w-sm span[class*="text-sm"][class*="font-bold"] {
  font-size: 0.9375rem !important;
}

/* Founder */
html[data-marketing-page="about"] #root p[class*="text-lg"][class*="font-bold"][class*="text-gray-900"] {
  font-size: 1.25rem !important;
  letter-spacing: -0.02em !important;
}

html[data-marketing-page="about"] #root p[class*="text-sm"][class*="text-[#4A8B8E]"][class*="font-medium"] {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
}

html[data-marketing-page="about"] #root .flex-col p[class*="text-sm"][class*="text-gray-500"][class*="leading-relaxed"],
html[data-marketing-page="about"] #root .flex-row p[class*="text-sm"][class*="text-gray-500"][class*="leading-relaxed"] {
  font-size: 1rem !important;
  line-height: 1.7 !important;
  color: #5b6573 !important;
  max-width: 32rem;
}

/* Bottom CTA */
html[data-marketing-page="how-it-works"] #root p[class*="font-semibold"][class*="text-lg"][class*="text-gray-900"] {
  font-size: 1.25rem !important;
  letter-spacing: -0.02em !important;
}

@media (max-width: 767px) {
  html[data-marketing-page] #root h1[class*="font-extrabold"] {
    font-size: clamp(1.875rem, 7vw, 2.25rem) !important;
  }

  html[data-marketing-page="about"] #root [class*="prose"] p[class*="text-lg"] {
    font-size: 1.0625rem !important;
  }

  html[data-marketing-page] #root .divide-y h3[class*="font-bold"] {
    font-size: 1rem !important;
  }

  html[data-marketing-page] #root .divide-y p[class*="text-sm"] {
    font-size: 0.9375rem !important;
  }
}

@media (min-width: 768px) {
  html[data-marketing-page] #root .divide-y > div[class*="py-5"] {
    padding-top: 1.35rem !important;
    padding-bottom: 1.35rem !important;
  }
}