.hero{
  padding-top: 18px;
  padding-bottom: 18px;
}

.hero-main{
  width: 100%;
}

.hero-main .h1{
  font-size: clamp(1.38rem, 1.18vw, 1.82rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  max-width: 42ch !important;
  margin: 10px 0 14px !important;
  font-weight: 800 !important;
}

.hero-main .lead,
.hero-main .muted{
  font-size: 14px !important;
  line-height: 1.72 !important;
  max-width: none !important;
}

.hero-main .lead{
  color: #4B5563 !important;
}

.hero-main .muted{
  color: #6B7280 !important;
}

.hero-main .toolbar{
  margin-top: 18px !important;
  gap: 10px !important;
}

.hero .landing-list{
  margin: 0 !important;
  padding-left: 20px !important;
}

.hero .landing-list li{
  margin-bottom: 8px !important;
  line-height: 1.58 !important;
  color: #4B5563 !important;
}

.hero-side h3,
.portal-value-grid .card h3,
.portal-audience-grid h3{
  font-size: 17px !important;
  line-height: 1.28 !important;
  letter-spacing: -0.01em !important;
}

.portal-value-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.portal-value-grid .card .muted,
.portal-audience-grid .muted{
  max-width: none;
  line-height: 1.62;
}

.portal-audience-card{
  padding: 18px;
}

.portal-audience-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.portal-footer{
  padding: 4px 0 28px;
}

.portal-footer-card{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.footer-copy{
  margin-top: 6px;
}

.portal-footer-links{
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* all buttons same premium grey */
.btn,
.btn.primary,
.btn.green,
.btn.ghost,
.nav-links .btn,
.hero-main .toolbar .btn,
a.btn,
button.btn{
  background: #ECEFF3 !important;
  color: #2F3742 !important;
  border: 1px solid #D5DBE3 !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
}

.btn:hover,
.btn.primary:hover,
.btn.green:hover,
.btn.ghost:hover,
.nav-links .btn:hover,
.hero-main .toolbar .btn:hover,
a.btn:hover,
button.btn:hover{
  background: #E3E8EE !important;
  color: #27303B !important;
  border-color: #C9D1DA !important;
}

.btn:active,
.btn.primary:active,
.btn.green:active,
.btn.ghost:active{
  background: #DCE2E8 !important;
}

@media (max-width: 1180px){
  .portal-value-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-audience-grid{
    grid-template-columns: 1fr;
  }

  .hero-main .h1{
    max-width: none !important;
  }
}

@media (max-width: 720px){
  .portal-value-grid{
    grid-template-columns: 1fr;
  }

  .hero-main .h1{
    font-size: clamp(1.6rem, 6.5vw, 2rem) !important;
  }
}