#top,
#problem,
#proof,
#results,
#process,
#about,
#faq,
#apply {
  scroll-margin-top: 80px;
}

.nav-cta,
.button.primary,
.timeline-cta {
  background: #007aa8;
}

.nav-cta:hover,
.button.primary:hover,
.timeline-cta:hover {
  background: #006b94;
}

.flow-card {
  display: grid;
  gap: 10px;
  padding: 26px 24px;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 24px 34px rgba(20, 65, 105, 0.16);
}

.flow-row {
  margin: 0;
  border-radius: 14px;
  background: #cfe1fb;
  padding: 17px 18px;
  color: #1d4ed8;
  font-size: 19px;
  font-style: italic;
  font-weight: 800;
  text-align: center;
  text-wrap: balance;
}

.flow-row-final {
  background: #9ed3b4;
  color: #12492f;
}

.flow-group {
  border: 2px dashed #33415580;
  border-radius: 18px;
  padding: 11px;
}

.flow-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.flow-arrow {
  position: relative;
  justify-self: center;
  width: 2px;
  height: 20px;
  background: #33415580;
}

.flow-arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 8px;
  height: 8px;
  border-right: 2px solid #33415580;
  border-bottom: 2px solid #33415580;
  transform: translate(-50%, 1px) rotate(45deg);
}

@media (max-width: 980px) {
  .hero-visual {
    justify-self: center;
  }
}

@media (max-width: 420px) {
  .flow-card {
    padding: 20px 16px;
  }

  .flow-row {
    font-size: 16px;
    padding: 14px 12px;
  }

  .flow-pair {
    gap: 8px;
  }
}

.signal-source a {
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

.signal-card-teal .signal-stat {
  color: #087f7a;
}

.calendar-frame-pending iframe {
  opacity: 0;
  pointer-events: none;
}

.calendar-frame:not(.calendar-frame-pending) .calendar-fallback {
  display: none;
}

@media (max-width: 640px) {
  .hero h1 {
    font-size: 36px;
  }
}