body {
  font-family: "Inter", sans-serif;
  background-color: #fcfaf6;
  color: #404040;
}

.font-serif {
  font-family: "Lora", serif;
}

.brand-wordmark {
  font-family: "Lora", serif;
  letter-spacing: 0.5px;
}
.brand-one {
  color: #0d7377;
}
.brand-to {
  color: #222;
}
.brand-ten {
  color: #0d7377;
}

:root {
  --brand-teal: #0d7377;
}
.text-brand-teal {
  color: var(--brand-teal);
}

/* 1→10 pill */
.phrase-1to10 {
  background: linear-gradient(
    120deg,
    rgba(13, 115, 119, 0),
    rgba(13, 115, 119, 0.18)
  );
  padding: 0 0.25rem;
  border-radius: 0.375rem;
}

/* Timeline rail + progress + arrow */
.timeline-rail {
  position: relative;
  height: 2px;
  background: #e5e5e5;
}
.timeline-rail .progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  background: #0d7377;
}
.timeline-rail::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -2px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid #e5e5e5;
}

/* Buttons */
.btn {
  border-radius: 0.5rem;
  font-weight: 600;
  transition: background-color 0.2s, color 0.2s;
}
.btn-primary {
  background: #0d7377;
  color: #fff;
}
.btn-primary:hover {
  background: #108c90;
}
.btn-outline {
  border: 2px solid #0d7377;
  color: #0d7377;
  background: transparent;
}
.btn-outline:hover {
  background: #0d7377;
  color: #fff;
}

/* Handwritten utility */
.font-handwritten {
  font-family: "Caveat", cursive;
  font-weight: 400;
}
/* Partners wordmark */
.brand-partners {
  font-family: "Lora", serif;
  font-weight: 600;
}

.section-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.section-fade.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Accordion */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

/* Journey popovers */
.journey-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out, opacity 0.4s ease-out;
  visibility: hidden;
}
.journey-content.visible {
  visibility: visible;
}