:root {
  --tl-type-nav: 1.25rem;
  --tl-type-title-1: clamp(2.5rem, 4vw, 4.25rem);
  --tl-type-title-2: clamp(2rem, 3.2vw, 3.25rem);
  --tl-type-title-3: clamp(1.375rem, 2vw, 1.875rem);
  --tl-type-title-4: clamp(1rem, 1.45vw, 1.25rem);
  --tl-type-body: clamp(1.125rem, 1.6vw, 1.5rem);
  --tl-type-card-copy: clamp(1.125rem, 1.5vw, 1.5rem);
  --tl-type-card-list: clamp(1rem, 1.25vw, 1.25rem);
  --tl-type-footnote: clamp(1.0625rem, 1.5vw, 1.375rem);
  --tl-type-panel-compact-body: clamp(0.87rem, 1.3vw, 1.07rem);
  --tl-type-pill: clamp(1.0625rem, 1.3vw, 1.3125rem);
  --tl-type-button: 1.0625rem;
  --tl-type-button-compact: 0.875rem;
  --tl-type-footer: 1.125rem;
  --tl-type-footer-compact: 0.875rem;
  --tl-type-form-label: 1.25rem;
  --tl-type-form-field: 1.125rem;
  --tl-type-form-status: 0.875rem;
  --tl-type-form-note: 0.75rem;
  --tl-type-form-compact-label: 0.6rem;
  --tl-type-form-compact-field: 0.75rem;
  --tl-type-form-compact-status: 0.68rem;
}

.tl-type-nav {
  font-size: var(--tl-type-nav);
  line-height: 1.2;
}

.tl-type-title-1 {
  font-size: var(--tl-type-title-1);
  line-height: 1.08;
}

.tl-type-title-2 {
  font-size: var(--tl-type-title-2);
  line-height: 1.12;
}

.tl-type-title-3 {
  font-size: var(--tl-type-title-3);
  line-height: 1.3;
}

.tl-type-title-4 {
  font-size: var(--tl-type-title-4);
  line-height: 1.25;
}

.tl-type-body {
  font-size: var(--tl-type-body);
  line-height: 1.55;
}

.tl-type-card-copy {
  font-size: var(--tl-type-card-copy);
  line-height: 1.55;
}

.tl-type-card-list {
  font-size: var(--tl-type-card-list);
  line-height: 1.55;
}

.tl-type-footnote {
  font-size: var(--tl-type-footnote);
  line-height: 1.45;
}

.tl-type-panel-compact-body {
  font-size: var(--tl-type-panel-compact-body);
  line-height: 1.55;
}

.tl-type-pill {
  font-size: var(--tl-type-pill);
  line-height: 1.2;
}

.tl-type-button {
  font-size: var(--tl-type-button);
  line-height: 1.2;
}

.tl-type-button-compact {
  font-size: var(--tl-type-button-compact);
  line-height: 1.2;
}

.tl-type-footer {
  font-size: var(--tl-type-footer);
  line-height: 1.55;
}

.tl-type-footer-compact {
  font-size: var(--tl-type-footer-compact);
  line-height: 1.5;
}

.tl-type-form-label {
  font-size: var(--tl-type-form-label);
  line-height: 1.3;
}

.tl-type-form-field {
  font-size: var(--tl-type-form-field);
  line-height: 1.4;
}

.tl-type-form-status {
  font-size: var(--tl-type-form-status);
  line-height: 1.4;
}

.tl-type-form-note {
  font-size: var(--tl-type-form-note);
  line-height: 1.45;
}

.tl-type-form-compact-label {
  font-size: var(--tl-type-form-compact-label);
  line-height: 1.4;
}

.tl-type-form-compact-field {
  font-size: var(--tl-type-form-compact-field);
  line-height: 1.4;
}

.tl-type-form-compact-status {
  font-size: var(--tl-type-form-compact-status);
  line-height: 1.4;
}

@media (max-width: 767px) {
  .tl-nav {
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }

  .tl-nav > a,
  .tl-nav > div {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  .tl-nav > a {
    display: flex !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .tl-nav > div {
    display: flex;
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.5rem;
  }

  .tl-nav > div > a {
    width: 100%;
  }
}