/* ==========================================================================
   Matinno — type scale
   Loaded LAST on every page, so it overrides the sizes, line-heights,
   letter-spacing, weights and case set in navigation.css, blocks.css and
   footer.css.

   Everything is sized in rem on a scaled root:
     html 62.5% (1rem = 10px) · ≤999px 57% (9.12px) · ≤759px 50% (8px)
   so all type steps down ×0.912 then ×0.8 at those breakpoints:
     body text                1.8rem / 2.2rem  +0.2px
     page title               2.6rem / 3rem     0
     labels, eyebrows         1.6rem / 1.8rem  +0.2px
     captions                 1.6rem / 1.8rem  +0.2px
     buttons                  2rem   / 1.9rem  +0.2px
     download links           2rem   / 2.4rem
     card title / text        2rem / 2.4rem · 1.6rem / 2rem  +0.2px
     nav items                1.6rem, dropdown line 3.6rem  +0.15–0.2px
     breadcrumbs              1.6rem  +0.2px
     footer links / copy      1.6rem, line 3.6rem  +0.15px
   Labels, eyebrows and buttons are regular-weight sentence case.
   -------------------------------------------------------------------------- */

html { font-size: 62.5%; }

@media (max-width: 999.98px) {
  html { font-size: 57%; }
}

@media (max-width: 759.98px) {
  html { font-size: 50%; }
}

body {
  font-size: 1.8rem;
  line-height: 1.4;
  letter-spacing: 0;
  /* Figtree is drawn large for its size (x-height 0.50 of the em). Scaling it
     to an x-height of 0.44 makes every size above read a step smaller, while
     line-heights and spacing keep their px values. */
  font-size-adjust: 0.44;
}

/* form controls don't inherit font properties by default */
button,
input,
select,
textarea {
  font-size-adjust: inherit;
}

/* --- Navigation ---------------------------------------------------------- */

.mt-nav__trigger,
.mt-nav__link {
  font-size: 1.6rem;
  letter-spacing: 0.2px;
}

.mt-nav__panel a {
  font-size: 1.6rem;
  line-height: 3.6rem;
  letter-spacing: 0.15px;
}

.mt-btn {
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.2px;
  text-transform: none;
}

.mt-breadcrumbs a,
.mt-breadcrumbs [aria-current] {
  font-size: 1.6rem;
  letter-spacing: 0.2px;
}

@media (max-width: 959.98px) {
  .mt-nav__trigger,
  .mt-nav__link {
    font-size: 1.6rem;
  }

  .mt-nav__panel a {
    line-height: 4rem;
  }
}

/* --- Titles & text ------------------------------------------------------- */

.mt-title,
.mt-page-header .mt-title {
  font-size: 2.6rem;
  line-height: 3rem;
  letter-spacing: 0;
}

/* In-block headings are set at body-text size */
.mt-heading {
  font-size: 1.8rem;
  line-height: 2.2rem;
  letter-spacing: 0.2px;
}

.mt-text p,
.mt-lede,
.mt-faq summary,
.mt-faq details p {
  font-size: 1.8rem;
  line-height: 2.2rem;
  letter-spacing: 0.2px;
}

.mt-eyebrow {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.8rem;
  letter-spacing: 0.2px;
  text-transform: none;
}

/* --- Media captions ------------------------------------------------------ */

.mt-caption,
.mt-caption strong {
  font-size: 1.6rem;
  line-height: 1.8rem;
  letter-spacing: 0.2px;
}

.mt-caption strong {
  font-weight: 400;
  text-transform: none;
}

/* --- Buttons & links ----------------------------------------------------- */

.mt-button {
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.9rem;
  letter-spacing: 0.2px;
  text-transform: none;
}

.mt-download {
  font-size: 2rem;
  line-height: 2.4rem;
  letter-spacing: normal;
}

/* --- Steps --------------------------------------------------------------- */

.mt-steps li::before,
.mt-steps h3 {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.8rem;
  letter-spacing: 0.2px;
  text-transform: none;
}

.mt-steps p,
.mt-steps ul {
  font-size: 1.6rem;
  line-height: 2rem;
  letter-spacing: 0.2px;
}

/* --- Cards & lists --------------------------------------------------------- */

.mt-card__title,
.mt-resource strong,
.mt-selection__title {
  font-size: 2rem;
  font-weight: 400;
  line-height: 2.4rem;
  letter-spacing: 0.2px;
}

.mt-resource p,
.mt-selection__text {
  font-size: 1.6rem;
  line-height: 2rem;
  letter-spacing: 0.2px;
}

@media (max-width: 999.98px) {
  .mt-selection__title { font-size: 2rem; line-height: 2.4rem; }
  .mt-selection__text { font-size: 1.6rem; line-height: 2rem; }
}

@media (max-width: 759.98px) {
  .mt-selection__title { font-size: 2rem; line-height: 2.4rem; }
  .mt-selection__text { font-size: 1.6rem; line-height: 2rem; }
}

/* --- Finish comparer (outdoor kitchen) ----------------------------------- */

.mt-swatch-group__label,
.mt-swatch-readout,
.mt-swatch-readout strong,
.mt-stage__label,
.mt-stage__hint,
.mt-switch {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.8rem;
  letter-spacing: 0.2px;
  text-transform: none;
}

@media (max-width: 699.98px) {
  .mt-stage__label { font-size: 1.6rem; }
}

/* --- Forms ---------------------------------------------------------------- */

.mt-field__label {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2rem;
  letter-spacing: 0.2px;
  text-transform: none;
}

.mt-field input,
.mt-field select {
  font-size: 1.8rem;
  line-height: 2.4rem;
  letter-spacing: 0.2px;
}

/* Below 16px iOS Safari zooms the page when a field gets focus */
@media (max-width: 759.98px) {
  .mt-field input,
  .mt-field select {
    font-size: 16px;
  }
}

.mt-consent,
.mt-form__note {
  font-size: 1.6rem;
  letter-spacing: 0.2px;
}

/* --- Footer --------------------------------------------------------------
   footer.css sets its own
   rem sizes, so nothing is overridden here. */