:root {
    --index-intro-color: var(--color-text-muted);
}

/* Page-specific rules for index.html */
.index_box {
  width: min(100%, 760px);
  min-height: calc(100vh - 6rem);
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.index_box h1 {
  margin-bottom: .75rem;
  letter-spacing: -0.03em;
  font-weight: var(--font-weight-bold);
}

.index_box .intro {
  max-width: 36rem;
  margin-bottom: var(--space-3);
  color: var(--index-intro-color);
}

.index_box .home-search {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-top: var(--space-1);
  overflow: visible;
}

.home-search .search {
  align-items: center;
}

.cta-buttons {
  width: 100%;
  max-width: 560px;
  margin-top: var(--space-3);
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: center;
}

.cta-buttons .button {
    min-width: 8rem;
}

@media (max-width: 720px) {
  .index_box {
    min-height: auto;
    padding: 1rem 0 2rem;
  }

  .cta-buttons .button {
      min-width: auto;
      flex: 1;
  }
}