@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

/* Hero copy supplied in the user's reference. */
.hero-copy-reference h1 {
  font: 700 48px/1.2 'Lato', Arial, sans-serif;
  letter-spacing: 0;
  color: #5b5b5b;
  margin: 0 0 12px;
}
.hero-copy-reference .hero-description {
  font: 400 28.8px/1.2 'Lato', Arial, sans-serif;
  color: #f5b943;
  max-width: 550px;
  margin: 0 0 28px;
}
.hero-copy-reference .hero-list {
  display: grid;
  gap: 10px;
  margin: 0 0 28px;
  font: 700 25.2px/1.2 'Lato', Arial, sans-serif;
  color: #5b5b5b;
  text-align: left;
}
.hero-copy-reference .hero-list li { position: relative; padding-left: 26px; margin: 0; }
.hero-copy-reference .hero-list li:before {
  position: absolute;
  left: 0;
  top: 4px;
  width: 17px;
  height: 17px;
  margin: 0;
  background: #f4bd50;
  color: #fff4cf;
  font-size: 14.4px;
}
@media (min-width: 761px) and (max-width: 1100px) {
  .hero-copy-reference h1 { font-size: 40.8px; }
  .headline-break { display: none; }
  .hero-copy-reference .hero-description { font-size: 25.2px; }
  .hero-copy-reference .hero-list { font-size: 21.6px; }
}
@media (max-width: 760px) {
  .hero-copy-reference { text-align: left; }
  .hero-copy-reference h1 { font-size: 38.4px; line-height: 1.2; }
  .headline-break { display: none; }
  .hero-copy-reference .hero-description { font-size: 24px; line-height: 1.35; }
  .hero-copy-reference .hero-list { font-size: 21.6px; gap: 12px; }
}

/* Match the supplied six-benefit reference without affecting other sections. */
.reference-benefits {
  background: #fff;
  color: #5b5b5b;
  padding: 32px 24px 80px;
  font-family: 'Lato', Arial, sans-serif;
  text-align: center;
}
.benefits-inner { max-width: 1140px; margin: 0 auto; }
.benefits-heading { margin-bottom: 58px; }
.benefits-heading h2 {
  font: 700 48px/1 'Lato', Arial, sans-serif;
  letter-spacing: 0;
  margin: 0 0 20px;
}
.benefits-heading p {
  color: #808080;
  font-size: 24px;
  line-height: 1.5;
  margin: 0;
}
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.benefits-grid article { min-width: 0; }
.benefits-grid img {
  display: block;
  width: 150px;
  height: 150px;
  object-fit: contain;
  margin: 0 auto 28px;
}
.benefits-grid h3 {
  font: 700 24px/1.25 'Lato', Arial, sans-serif;
  letter-spacing: 0;
  color: #5b5b5b;
  margin: 0 0 8px;
}
.benefits-grid p {
  font: 400 21.6px/28.8px 'Lato', Arial, sans-serif;
  color: #5b5b5b;
  margin: 0;
}
@media (max-width: 1000px) {
  .benefits-heading h2 { font-size: 40.8px; line-height: 1.15; }
  .benefits-grid { gap: 32px 20px; }
  .benefits-grid h3 { font-size: 21.6px; }
  .benefits-grid p { font-size: 19.2px; line-height: 23px; }
}
@media (max-width: 760px) {
  .reference-benefits { padding: 38px 22px 50px; }
  .benefits-heading { margin-bottom: 36px; }
  .benefits-heading h2 { font-size: 33.6px; line-height: 1.15; margin-bottom: 17px; }
  .benefits-heading p { font-size: 20.4px; line-height: 1.5; }
  .benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 22px; }
  .benefits-grid img { margin-bottom: 20px; width: 130px; height: 130px; }
}
@media (max-width: 480px) {
  .benefits-grid { grid-template-columns: 1fr; max-width: 350px; gap: 34px; }
  .benefits-grid img { width: 150px; height: 150px; }
  .benefits-grid h3 { font-size: 24px; }
  .benefits-grid p { font-size: 20.4px; line-height: 24px; }
}