.highlight-panel {
  display: block;
  padding: 28px 20px;
  background: #2a2a2a;
  border-radius: 12px;
}

.section.highlight-panel-container {
  position: relative;
  z-index: 2;
  margin-top: -60px;
  margin-bottom: 25px;
  padding: 0 22px;
}

/* footer.css caps <footer> itself at max-width: 1680px, so its dark background shrinks
   along with its content on viewports wider than that, exposing the page background as
   white gaps on either side. Fixed here rather than in footer.css so it only applies on
   pages that actually have a highlight-panel — same body:has() scoping technique used by
   promo-bar.css for the header. Moves the 1680px cap from <footer> onto .footer-wrapper
   (its inner content) instead, same pattern header.css already uses. */
body:has(.highlight-panel) footer {
  max-width: none;
  width: 100%;
  margin: 0;
}

body:has(.highlight-panel) footer .footer-wrapper {
  max-width: 1680px;
  margin: 0 auto;
}

.highlight-panel .highlight-panel-heading {
  margin: 0 0 24px;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.4;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.highlight-panel .highlight-panel-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 20px;
}

.highlight-panel .highlight-panel-feature {
  display: flex;
  align-items: center;
  gap: 14px;
}

.highlight-panel .highlight-panel-feature-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 50%;
}

.highlight-panel .highlight-panel-feature-icon picture {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.highlight-panel .highlight-panel-feature-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.highlight-panel .highlight-panel-feature-text {
  font-size: 14px;
  color: #f0f0f0;
}

.highlight-panel .highlight-panel-divider {
  margin: 24px 0;
  border-top: 1px solid rgb(255 255 255 / 12%);
}

.highlight-panel .highlight-panel-bullets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.highlight-panel .highlight-panel-bullets li {
  position: relative;
  padding-left: 14px;
  font-size: 14px;
  line-height: 1.4;
  color: #cfcfcf;
}

.highlight-panel .highlight-panel-bullets li::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: 0;
  width: 4px;
  height: 4px;
  background: #cfcfcf;
  border-radius: 50%;
}

.highlight-panel .highlight-panel-footer {
  margin-top: 20px;
  font-size: 15px;
  color: #f0f0f0;
  text-align: right;
}

.highlight-panel .highlight-panel-footer a {
  color: var(--orange-color);
  text-decoration: underline;
}

@media (width >= 600px) {
  .highlight-panel {
    padding: 40px 100px;
  }

  .section.highlight-panel-container {
    margin-top: -380px;
    margin-bottom: 190px;
    padding: 0;
  }

  .highlight-panel .highlight-panel-heading {
    margin-bottom: 32px;
    font-size: 24px;
    font-weight: 400;
  }

  .highlight-panel .highlight-panel-features {
    flex-direction: row;
    justify-content: space-evenly;
    padding: 0;
  }

  .highlight-panel .highlight-panel-feature-icon {
    width: 56px;
    height: 56px;
  }

  .highlight-panel .highlight-panel-feature-icon img {
    width: 36px;
    height: 36px;
  }

  .highlight-panel .highlight-panel-feature-text {
    font-size: 15px;
    max-width: 160px;
  }

  .highlight-panel .highlight-panel-divider {
    margin: 28px 0;
  }

  .highlight-panel .highlight-panel-bullets {
    grid-template-columns: repeat(4, auto);
    justify-content: space-evenly;
    column-gap: 24px;
  }

  .highlight-panel .highlight-panel-bullets li {
    font-size: 13px;
  }

  .highlight-panel .highlight-panel-footer {
    margin-top: 24px;
    margin-right: -60px;
    font-size: 14px;
  }
}

@media (width >= 1200px) {
  .highlight-panel {
    box-sizing: border-box;
    width: 1320px;
    height: 300px;
    margin: 0 auto;
  }
}