/*
 * Source style matrix, Spies Hecker matt-clear.html
 * (body.theme_color15, axbase, live Computed + source screenshots):
 * Body text: #1e1e1e 15px/22px Arial/Helvetica, normal case.
 * Paragraph text: #6d6e71 16px/20px; links/buttons 14px/20px.
 * H1: #ff0000 30px/39px Arial 400 center, normal case, no underline.
 * H2 textComponent: #ff0000 22px/24-28.6px Arial 400, normal case, mb25.
 * H3 mediaTeaser/textComponent: #ff0000 20px/26px Arial 400, normal case.
 * Divider: 227x2 #6d6e71, mt35 mb40; content separators use flat axbase hr.
 * Buttons: #ff0000 bg, #fff text, 2px #ff0000 border; hover/focus invert to #fff/#ff0000.
 * Form submit: transparent bg, #ff0000 text, 2px #ff0000 border; hover/focus #ff0000/#fff.
 * Surfaces/cards: transparent content blocks; no border/radius/shadow; no sidebar nav.
 * MoodImage/stageSlider: top strip exists between header and main container; source image is full-width on desktop and narrow/left on mobile.
 * Media/documents: all source images/PDF copied locally; Wistia uses E-v1.js + wistia_async_enw6bpk48m.
 */

.matt-clear-page {
  --matt-clear-red: #ff0000;
  --matt-clear-text: #1e1e1e;
  --matt-clear-muted: #6d6e71;
  --matt-clear-grey: #eaeaea;
  --matt-clear-rule: #6d6e71;
  --matt-clear-link-muted: #868686;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  color: var(--matt-clear-text);
}

.matt-clear-page,
.matt-clear-page *,
.matt-clear-page *::before,
.matt-clear-page *::after {
  box-sizing: border-box;
}

.matt-clear-moodImage {
  width: 100%;
  margin: 0 0 50px;
  padding: 0;
  overflow: hidden;
  line-height: 0;
  background: #fff;
}

.matt-clear-moodImage img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.matt-clear-replica {
  width: min(1200px, 100%);
  margin: 0 auto;
  padding-bottom: 35px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  color: var(--matt-clear-text);
}

.matt-clear-replica .layoutBorder,
.matt-clear-replica .section {
  margin: 0;
  padding: 0;
}

.matt-clear-replica .component {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.matt-clear-replica .headlineContent {
  margin: 0 0 30px;
  padding: 0 15px;
}

.matt-clear-replica .component.headline {
  margin: 0;
  padding: 0;
  text-align: center;
  background: transparent;
}

.matt-clear-replica .component.headline h1#matt-clear-title {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 39px;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
  color: var(--matt-clear-red);
}

.matt-clear-replica .component.textComponent {
  margin: 30px 0;
  padding: 0 15px;
  background: transparent;
  color: var(--matt-clear-text);
}

.matt-clear-replica .component.textComponent h2,
.matt-clear-replica .section-block h2.matt-clear-section-title {
  margin: 0 0 25px;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 28.6px;
  letter-spacing: normal;
  text-align: start;
  text-transform: none;
  color: var(--matt-clear-red);
}

.matt-clear-replica .component.textComponent h3,
.matt-clear-benefit-card h3,
.matt-clear-phoenix-title {
  margin: 0 0 10px;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  letter-spacing: normal;
  text-align: start;
  text-transform: none;
  color: var(--matt-clear-red);
}

.matt-clear-replica .component.textComponent p,
.matt-clear-benefit-card p,
.matt-clear-phoenix-text {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--matt-clear-muted);
}

.matt-clear-replica .component.textComponent p + p,
.matt-clear-benefit-card p + p {
  margin-top: 15px;
}

.matt-clear-animation,
.matt-clear-table,
.matt-clear-benefit-card,
.matt-clear-video {
  margin: 20px 0 30px;
  padding: 0 15px;
  background: transparent;
  line-height: 0;
}

.matt-clear-animation img,
.matt-clear-table img,
.matt-clear-benefit-card img,
.matt-clear-phoenix img,
.matt-clear-download img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.matt-clear-animation {
  margin-top: 40px;
}

.matt-clear-rule {
  display: block;
  width: 227px;
  max-width: min(227px, 60vw);
  height: 0;
  margin: 35px auto 40px;
  padding: 0;
  border: 0;
  border-top: 2px solid var(--matt-clear-rule);
  background: transparent;
}

.matt-clear-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 30px;
  padding: 0;
}

.matt-clear-benefit-card {
  margin: 0 0 30px;
}

.matt-clear-benefit-card .text {
  margin: 0;
  padding: 10px 0 0;
  line-height: 22px;
  background: transparent;
}

.matt-clear-table {
  margin-top: 0;
}

.matt-clear-video {
  margin-top: 38px;
  margin-bottom: 0;
  line-height: 0;
}

.matt-clear-video .wistia_responsive_padding {
  background: #000;
}

.matt-clear-phoenix {
  margin: 20px 0 30px;
  padding: 0 15px;
  background: transparent;
}

.matt-clear-phoenix-link {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 30px;
  align-items: start;
  color: inherit;
  text-decoration: none;
}

.matt-clear-phoenix-link:hover,
.matt-clear-phoenix-link:focus-visible {
  color: inherit;
  text-decoration: none;
}

.matt-clear-phoenix-link:focus-visible {
  outline: 2px solid rgba(255, 0, 0, 0.35);
  outline-offset: 3px;
}

.matt-clear-phoenix-copy {
  display: block;
  min-width: 0;
}

.matt-clear-phoenix-title,
.matt-clear-phoenix-text,
.matt-clear-read-more {
  display: block;
}

.matt-clear-read-more {
  margin-top: 18px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  color: var(--matt-clear-link-muted);
  text-decoration: none;
}

.matt-clear-phoenix-link:hover .matt-clear-read-more,
.matt-clear-phoenix-link:focus-visible .matt-clear-read-more {
  color: var(--matt-clear-red);
}

.matt-clear-contact {
  margin-top: 58px;
}

.matt-clear-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 30px;
  padding: 0 15px;
}

.matt-clear-form-col,
.matt-clear-download {
  min-width: 0;
}

.matt-clear-product-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 0 0 26px;
}

.matt-clear-page .btn.btn-default,
.matt-clear-product-buttons .btn.btn-default {
  display: inline-block;
  margin: 0 0 5px;
  padding: 10px 31px 11px;
  border: 2px solid var(--matt-clear-red);
  border-radius: var(--btn-border-radius, 3px);
  background: var(--matt-clear-red);
  box-shadow: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
  color: #fff;
  text-decoration: none;
}

.matt-clear-page .btn.btn-default:hover,
.matt-clear-page .btn.btn-default:focus-visible {
  background: #fff;
  color: var(--matt-clear-red);
  border-color: var(--matt-clear-red);
  text-decoration: none;
}

.matt-clear-page .btn.btn-default:focus-visible,
.matt-clear-form button:focus-visible,
.matt-clear-form a:focus-visible,
.matt-clear-download a:focus-visible {
  outline: 2px solid rgba(255, 0, 0, 0.35);
  outline-offset: 2px;
}

.matt-clear-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--matt-clear-text);
}

.matt-clear-field,
.matt-clear-check,
.matt-clear-captcha,
.matt-clear-form-actions {
  grid-column: 1 / -1;
}

.matt-clear-field:nth-of-type(1),
.matt-clear-field:nth-of-type(2),
.matt-clear-field:nth-of-type(3),
.matt-clear-field:nth-of-type(5),
.matt-clear-field:nth-of-type(6),
.matt-clear-field:nth-of-type(7) {
  grid-column: auto;
}

.matt-clear-field {
  margin: 0;
  padding: 0;
  border: 0;
}

.matt-clear-field label,
.matt-clear-field legend,
.matt-clear-check,
.matt-clear-captcha {
  display: block;
  margin: 0 0 6px;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--matt-clear-text);
}

.matt-clear-field input[type="text"],
.matt-clear-field input[type="email"],
.matt-clear-field input[type="tel"],
.matt-clear-field textarea {
  display: block;
  width: 100%;
  min-height: 42px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #bcbcbc;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  color: var(--matt-clear-text);
}

.matt-clear-field textarea {
  min-height: 120px;
  resize: vertical;
}

.matt-clear-field input:focus,
.matt-clear-field textarea:focus {
  outline: 2px solid rgba(255, 0, 0, 0.25);
  outline-offset: 0;
  border-color: var(--matt-clear-red);
}

.matt-clear-radio-group label,
.matt-clear-check {
  display: inline-flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0 18px 0 0;
  color: var(--matt-clear-text);
}

.matt-clear-check {
  margin: 2px 0 0;
}

.matt-clear-check a {
  color: var(--matt-clear-red);
  text-decoration: none;
}

.matt-clear-check a:hover,
.matt-clear-check a:focus-visible {
  text-decoration: underline;
}

.matt-clear-captcha {
  min-height: 76px;
  margin-top: 4px;
  padding: 18px 20px;
  border: 1px solid #d0d0d0;
  background: #f7f7f7;
  color: var(--matt-clear-muted);
}

.matt-clear-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: flex-start;
  margin-top: 4px;
}

.matt-clear-reset {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 22px;
  color: var(--matt-clear-link-muted);
  text-decoration: none;
  cursor: pointer;
}

.matt-clear-reset:hover,
.matt-clear-reset:focus-visible {
  color: var(--matt-clear-red);
  text-decoration: none;
}

.matt-clear-form .submit-form {
  display: inline-block;
  min-height: 47px;
  margin: 0;
  padding: 10px 31px 11px;
  border: 2px solid var(--matt-clear-red);
  border-radius: var(--btn-border-radius, 3px);
  background: transparent;
  box-shadow: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
  color: var(--matt-clear-red);
  cursor: pointer;
}

.matt-clear-form .submit-form:hover,
.matt-clear-form .submit-form:focus-visible {
  background: var(--matt-clear-red);
  color: #fff;
}

.matt-clear-download {
  margin: 0;
  padding: 0;
}

.matt-clear-cover-link {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.matt-clear-download-actions {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 12px 0 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 20px;
}

.matt-clear-download-actions a {
  color: var(--matt-clear-link-muted);
  text-decoration: none;
}

.matt-clear-download-actions a:hover,
.matt-clear-download-actions a:focus-visible {
  color: var(--matt-clear-red);
  text-decoration: none;
}

@media (max-width: 1199px) {
  .matt-clear-replica {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .matt-clear-moodImage {
    width: 337px;
    max-width: 100%;
    height: 278px;
    margin: 28px 0 45px;
  }

  .matt-clear-moodImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
  }

  .matt-clear-replica {
    padding-bottom: 30px;
  }

  .matt-clear-replica .headlineContent {
    margin-bottom: 28px;
    padding: 0 30px;
  }

  .matt-clear-replica .component.headline h1#matt-clear-title {
    font-size: 26px;
    line-height: 33.8px;
  }

  .matt-clear-replica .component.textComponent {
    margin: 30px 0;
    padding: 0 30px;
  }

  .matt-clear-replica .component.textComponent h2 {
    font-size: 22px;
    line-height: 28.6px;
    text-align: start;
  }

  .matt-clear-benefit-grid,
  .matt-clear-phoenix-link,
  .matt-clear-contact-grid,
  .matt-clear-form {
    grid-template-columns: 1fr;
  }

  .matt-clear-animation,
  .matt-clear-table,
  .matt-clear-benefit-card,
  .matt-clear-video,
  .matt-clear-phoenix,
  .matt-clear-contact-grid {
    padding-right: 30px;
    padding-left: 30px;
  }

  .matt-clear-field:nth-of-type(1),
  .matt-clear-field:nth-of-type(2),
  .matt-clear-field:nth-of-type(3),
  .matt-clear-field:nth-of-type(5),
  .matt-clear-field:nth-of-type(6),
  .matt-clear-field:nth-of-type(7) {
    grid-column: 1 / -1;
  }

  .matt-clear-product-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .matt-clear-page .btn.btn-default {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .matt-clear-moodImage {
    width: 337px;
  }
}