#hero {
  background: var(--grad-dark);
  padding-top: 80px;
  padding-bottom: 70px;
}
.hero-inner {
  max-width: 860px;
  margin: 0 auto;
}
.hero-media {
  position: relative;
  margin-bottom: clamp(24px, 5vw, 48px);
}
.hero-logo {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  width: clamp(80px, 18vw, 128px);
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}
.hero-title {
  margin-top: var(--space-4);
  margin-bottom: var(--space-5);
  color: #fff;
}
.hero-lead {
  font-size: var(--fs-lead);
  color: var(--on-dark);
  margin-bottom: 28px;
}
.hero-note {
  color: var(--on-dark-accent);
  font-size: .95rem;
  margin-bottom: 28px;
}
.hero-note-detail {
  display: inline-block;
  margin-top: var(--space-2);
}
.check-list-dark {
  margin-bottom: var(--space-9);
}
.check-list-dark li {
  border-color: rgba(255, 255, 255, .1);
  color: var(--on-dark-strong);
}
.check-list-dark strong {
  color: var(--green);
}
.hero-quote {
  border-left-color: var(--green);
  margin-bottom: var(--space-9);
  color: var(--on-dark-accent);
  font-size: .95rem;
}
.hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
@media (max-width: 680px) {
  #hero {
    padding-top: 36px;
    padding-bottom: 56px;
  }
}