/* Layered important rules take precedence over legacy unlayered overrides. */
@layer traceability-responsive {
/* Shared tablet and mobile typography for the traceability landing pages.
   Important declarations override page-specific type sizes and inline styles. */
@media (max-width: 991px) {
  html body { --landing-h1: 32px; --landing-h2: 28px; --landing-h3: 20px; --landing-paragraph: 16px; }

  html body h1, html body .wh-h1 { font-size: var(--landing-h1) !important; }
  html body h2, html body .wf-h2, html body .wd-h2, html body .wc-h2,
  html body .wba-h2, html body .wfq-h2 { font-size: var(--landing-h2) !important; }
  html body h3, html body .wf-card-title, html body .wc-group-title,
  html body .wba-col-title { font-size: var(--landing-h3) !important; }
  html body p, html body .paragraph, html body .tg-body,
  html body .wh-sub, html body .wf-sub, html body .wd-sub, html body .wc-sub,
  html body .wba-sub, html body .wfq-sub, html body .wf-card-desc {
    font-size: var(--landing-paragraph) !important;
  }

  /* Keep emphasized and linked text at the size of its heading or paragraph. */
  html body :is(h1, h2, h3, p, .wh-h1, .wf-h2, .wd-h2, .wc-h2, .wba-h2, .wfq-h2) :is(span, a, strong, b, em) {
    font-size: inherit !important;
  }
}

@media (max-width: 767px) {
  html body { --landing-h1: 28px; --landing-h2: 24px; --landing-h3: 18px; --landing-paragraph: 15px; }
}

}