/* Refracta shared typography and visual hierarchy foundation. */
.r-typography {
  --r-display: 'Syne', sans-serif;
  --r-body: 'DM Sans', sans-serif;
}

.r-typography :is(h2, h3) {
  font-family: var(--r-display);
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.r-typography h1 {
  font-family: var(--r-body) !important;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.r-typography :is(.hero-tag span, .hero-tag-pill, .hero-pill, .tag, .contact-tag, .legal-tag) {
  font-family: var(--r-body);
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.35;
}

.r-typography .r-hero__title,
.r-typography .r-utility-title,
.r-typography .r-legal-title {
  font-family: var(--r-body) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  text-wrap: balance;
}

.r-typography .r-title--home {
  font-size: clamp(36px, 4.5vw, 60px) !important;
  line-height: 1.06 !important;
  max-width: 1060px !important;
}

.r-typography .r-title--medium {
  font-size: clamp(34px, 3.9vw, 50px) !important;
  line-height: 1.08 !important;
  max-width: 920px !important;
}

.r-typography .r-title--long {
  font-size: clamp(33px, 3.6vw, 48px) !important;
  line-height: 1.1 !important;
  max-width: 940px !important;
}

.r-typography .r-title--utility {
  font-size: clamp(31px, 3.4vw, 42px) !important;
  line-height: 1.1 !important;
  max-width: 520px !important;
}

.r-typography .r-title--blog {
  font-size: clamp(34px, 4vw, 54px) !important;
  line-height: 1.08 !important;
  max-width: 920px !important;
}

.r-typography .r-title--legal {
  font-size: clamp(34px, 3.6vw, 48px) !important;
  line-height: 1.08 !important;
  max-width: 800px !important;
}

.r-typography .r-hero__title :is(em, .highlight),
.r-typography .r-utility-title :is(em, .highlight),
.r-typography .r-legal-title :is(em, .highlight) {
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
  transform: none;
}

.r-typography .r-hero__lead,
.r-typography .r-utility-lead,
.r-typography .r-legal-lead {
  font-family: var(--r-body);
  font-size: clamp(16px, 1.35vw, 19px) !important;
  font-weight: 400;
  line-height: 1.72 !important;
  max-width: 700px !important;
}

.r-typography .r-hero--standard {
  padding-top: 4.25rem !important;
  padding-bottom: 3.75rem !important;
}

.r-typography .r-hero--home {
  padding-top: 4.75rem !important;
  padding-bottom: 4rem !important;
}

.r-typography .r-hero--canvas {
  padding-top: 4.25rem !important;
  padding-bottom: 0 !important;
}

.r-typography #page {
  padding-top: 4.25rem !important;
  padding-bottom: 4.25rem !important;
}

.r-typography main section h2 {
  font-size: clamp(28px, 3vw, 38px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  text-wrap: balance;
}

.r-typography .r-signature-heading {
  font-size: clamp(30px, 3.4vw, 42px) !important;
  line-height: 1.12 !important;
}

.r-typography main section h3 {
  font-size: clamp(19px, 1.8vw, 22px) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
  text-wrap: balance;
}

.r-typography :is(.btn, .site-nav-cta, .mobile-menu-cta) {
  font-family: var(--r-body);
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.r-typography .r-proof-strip :is(.h-stat-num, .hsb-num, .hero-proof-value, .tsh-num, .proof strong, .audit-meta-item strong) {
  display: block;
  font-family: var(--r-body) !important;
  font-size: clamp(18px, 1.8vw, 22px) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em;
}

.r-typography .r-proof-strip :is(.h-stat-label, .hero-proof-label, .tsh-label, .proof span, .audit-meta-item) {
  font-family: var(--r-body);
  font-size: 13px !important;
  font-weight: 500;
  line-height: 1.5 !important;
}

.r-typography .r-proof-strip em {
  font-style: normal;
  font-weight: inherit;
}

.r-typography #founder :is(.founder-content, .founder-copy) {
  max-width: 720px;
}

.r-typography #founder :is(.founder-bio p, .founder-copy > p) {
  font-size: clamp(16px, 1.25vw, 18px) !important;
  line-height: 1.75 !important;
}

.r-typography #founder h2 {
  font-size: clamp(26px, 2.5vw, 32px) !important;
  line-height: 1.15 !important;
}

.r-typography #founder :is(.f-stat-num, .fact strong) {
  font-family: var(--r-body) !important;
  font-size: clamp(21px, 2vw, 25px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.r-typography #founder :is(.f-stat-lbl, .fact span, .f-bullet) {
  font-family: var(--r-body);
  line-height: 1.55;
}

.r-typography .legal-hero {
  padding-top: 4.25rem !important;
  padding-bottom: 3.5rem !important;
}

.r-typography .legal-section h2 {
  font-size: clamp(26px, 2.5vw, 32px) !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
}

.r-typography .legal-section :is(p, li) {
  font-size: 16px !important;
  line-height: 1.75;
}

@media (max-width: 768px) {
  .r-typography .r-hero--standard,
  .r-typography .r-hero--home {
    padding-top: 3.5rem !important;
    padding-bottom: 3rem !important;
  }

  .r-typography .r-hero--canvas {
    padding-top: 3.5rem !important;
  }

  .r-typography #page {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  .r-typography .r-hero__lead,
  .r-typography .r-utility-lead,
  .r-typography .r-legal-lead {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  .r-typography .legal-hero {
    padding-top: 3.5rem !important;
    padding-bottom: 3rem !important;
  }
}