/* Final typography layer for the public home and service pages. */

:root {
  --txf-type-section-title: 54px;
  --txf-type-section-lead: 18px;
  --txf-type-card-title: 32px;
  --txf-type-feature-title: 34px;
  --txf-type-body: 15px;
  --txf-type-label: 15px;
}

.page-home :is(#services, #usecases, #fit, #process, #trust, #contact) .section-kicker,
.page-service :is(#packages, #process, #contact) .section-kicker,
.page-service .service-rules-section .section-kicker {
  font-size: var(--txf-type-label) !important;
  line-height: 1.35 !important;
}

.page-home :is(#services, #usecases, #fit, #process, #trust) .section-head h2,
.page-service :is(#packages, #process) .section-head h2,
.page-service .service-rules-section .section-head h2,
.page-home #contact .contact-copy h2,
.page-service #contact .contact-copy h2 {
  max-width: 11em !important;
  font-size: var(--txf-type-section-title) !important;
  line-height: 1.06 !important;
  text-wrap: balance;
}

.page-home :is(#services, #usecases, #fit, #process, #trust) .section-lead,
.page-service :is(#packages, #process) .section-lead,
.page-service .service-rules-section .section-lead {
  max-width: 34em !important;
  font-size: var(--txf-type-section-lead) !important;
  line-height: 1.76 !important;
  text-wrap: pretty;
}

.page-home #services .service-card h3,
.page-home #usecases .usecase-card h3,
.page-home #process .process-stage h3,
.page-home #trust .guide-check h3,
.page-service #packages .package-card h3,
.page-service #process .process-step h3 {
  max-width: none !important;
  font-size: var(--txf-type-card-title) !important;
  line-height: 1.16 !important;
  text-wrap: balance;
}

.page-home #services .service-card p,
.page-home #usecases .usecase-card p,
.page-home #process .process-stage p,
.page-home #trust .guide-check p,
.page-service #packages .package-card p,
.page-service #process .process-step p,
.page-service :is(.rules-principle, .rules-faq) p {
  font-size: var(--txf-type-body) !important;
  line-height: 1.72 !important;
  text-wrap: pretty;
}

.page-home #process .process-primer strong,
.page-home #trust .guide-manual strong,
.page-service .handoff-inventory > strong,
.page-service .rules-principle > strong {
  max-width: none !important;
  font-size: var(--txf-type-feature-title) !important;
  line-height: 1.14 !important;
  text-wrap: balance;
}

.page-home #process .process-primer p,
.page-home #trust .guide-manual p,
.page-service .handoff-inventory > p,
.page-service .rules-principle > p {
  font-size: var(--txf-type-body) !important;
  line-height: 1.74 !important;
  text-wrap: pretty;
}

.page-service .rules-faq summary,
.page-service .rules-faq .faq-item h3 {
  font-size: 21px !important;
  line-height: 1.32 !important;
  text-wrap: balance;
}

.page-home :is(h2, h3, strong),
.page-service :is(h2, h3, strong) {
  letter-spacing: 0 !important;
}

@media (max-width: 1100px) {
  :root {
    --txf-type-section-title: 46px;
    --txf-type-card-title: 30px;
    --txf-type-feature-title: 32px;
  }
}

@media (max-width: 720px) {
  :root {
    --txf-type-section-title: 36px;
    --txf-type-section-lead: 17px;
    --txf-type-card-title: 29px;
    --txf-type-feature-title: 30px;
    --txf-type-body: 16px;
    --txf-type-label: 15px;
  }

  .page-home :is(#services, #usecases, #fit, #process, #trust) .section-head h2,
  .page-service :is(#packages, #process) .section-head h2,
  .page-service .service-rules-section .section-head h2,
  .page-home #contact .contact-copy h2,
  .page-service #contact .contact-copy h2 {
    max-width: 100% !important;
    line-height: 1.08 !important;
  }

  .page-home :is(#services, #usecases, #fit, #process, #trust) .section-lead,
  .page-service :is(#packages, #process) .section-lead,
  .page-service .service-rules-section .section-lead {
    max-width: 100% !important;
    line-height: 1.72 !important;
  }

  .page-service .rules-faq summary,
  .page-service .rules-faq .faq-item h3 {
    font-size: 20px !important;
  }
}