#hero-section {
  background: linear-gradient(90deg, #1c398e 0%, #1447e6 100%);
}

.wave-container {
  display: block;
  width: 100%;
  height: 60px;
}

.wave {
  color: var(--background);
  width: 100%;
  height: 100%;
}

.section__badge {
  color: var(--primary);
  background: color-mix(in oklab, var(--primary) 10%, white);
}

.section__title {
  max-width: 50%;
  color: var(--foreground);
}

.section__sub-title {
  max-width: 50%;
  color: var(--muted-foreground);
}

/* ABOUT SECTION */
.number-of-text {
  color: var(--muted);
}

#about-section .about-container {
  gap: 6rem;
}

.about-item > * {
  flex: 1;
}

.about-item__sub-title {
  color: #155dfc;
  letter-spacing: 0.0375rem;
}

.about-item__content {
  color: #4a5565;
}

.about-item__card {
  bottom: 0;
  right: 0;
  transform: translate(15%, 20%);
  max-width: 12rem;
  background: var(--background);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.about-item__card-main-content {
  color: var(--primary);
}

.about-item__card-sub-content {
  color: var(--muted-foreground);
}

/* WHY CHOOSE US SECTION */
.wcu__feature-card-content {
  color: var(--primary-foreground);
  background: var(--black-gradient);
}

.wcu__feature-card-link {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
}

.wcu__stat-card {
  color: var(--primary-foreground);
}

.wcu__stat-card--primary {
  background: var(--primary);
}

.wcu__stat-card--gradient {
  background: var(--pink-gradient);
}

.wcu__perk-item {
  border: 1px solid var(--border);
}

.wcu__perk-item-icon-wrapper {
  background: color-mix(in oklab, var(--primary) 10%, white);
}

.wcu__perk-item-icon {
  color: var(--primary);
}

.wcu__perk-item-title {
  color: var(--foreground);
}

.wcu__perk-item-description {
  color: var(--muted-foreground);
}

.wcu__highlights-list {
  height: 17.5rem;
}

.wcu__highlight-item-content {
  color: var(--primary-foreground);
}

.wcu__highlight-item-content--blue {
  background: var(--blue-gradient);
}

.wcu__highlight-item-content--green {
  background: var(--green-gradient);
}

.wcu__highlight-item-description {
  color: var(--accent);
}

/* STATS */
.stats__stat-card {
  background: color-mix(in oklab, var(--primary) 10%, white);
}

.stats__benefit-card-list {
  color: var(--muted-foreground);
}

.stats__stat-card-icon-wrapper {
  width: 3.5rem;
  height: 3.5rem;
  background: var(--primary);
}

.stats__stat-card-icon {
  font-size: var(--text-2xl);
  color: var(--primary-foreground);
}

.stats__stat-card-number {
  color: var(--primary);
}

.stats__stat-card-description {
  color: var(--muted-foreground);
}

.stats__benefit-card {
  color: var(--foreground);
  border: 1px solid var(--border);
}

.stats__benefit-card-icon-wrapper {
  width: 3.5rem;
  height: 3.5rem;
  background: color-mix(in oklab, var(--primary) 10%, white);
}

.stats__benefit-card-icon {
  font-size: var(--text-xl);
  color: var(--primary);
}

.stats__benefit-card-item-icon {
  display: block;
  width: 6px;
  height: 6px;
  background-color: var(--primary);
  flex-shrink: 0;
}

.stats__cta {
  background: var(--primary);
  color: var(--primary-foreground);
}

.stats__cta-title,
.stats__cta-description {
  max-width: 70%;
}

.stats__cta-description {
  color: var(--accent);
}

.stats__cta-button--secondary {
  border-width: 2px;
}

/* NEWSFEED */
.news-card {
  height: 20rem;
}

.news-card--featured {
  height: 30rem;
}

.news-card--featured .news-card__content {
  background: var(--blue-from-left-gradient);
}

.news-card__tag {
  color: var(--foreground);
  background: var(--primary-foreground);
}

.news-card__date {
  color: var(--accent);
}

.news-card__content {
  color: var(--primary-foreground);
  background: var(--black-gradient);
}

.news-card__description {
  color: var(--accent);
}

#featured-news > .news-card .news-card__tag {
  background: var(--chart-1);
  color: var(--background);
}

#featured-news > .news-card .news-card__title,
#featured-news > .news-card .news-card__description {
  max-width: 60%;
}

#featured-news a.news-card:nth-child(1) .news-card__content {
  background: var(--blue-gradient);
}

#featured-news a.news-card:nth-child(1) .news-card__tag {
  background: var(--primary);
  color: var(--primary-foreground);
}

#featured-news a.news-card:nth-child(2) .news-card__content {
  background: var(--purple-gradient);
}

#featured-news a.news-card:nth-child(2) .news-card__tag {
  background: var(--chart-2);
  color: var(--background);
}

#featured-news a.news-card:nth-child(3) .news-card__content {
  background: var(--green-gradient);
}

#featured-news a.news-card:nth-child(3) .news-card__tag {
  background: var(--chart-3);
  color: var(--background);
}

.newsfeed__view-all-link {
  color: var(--primary);
}

.auth-form-card {
  margin: 0 auto;
  max-width: var(--container-md);
}

.onboard-form-card,
.onboard-progress {
  margin: 0 auto;
  max-width: var(--container-2xl);
  margin-bottom: 2rem;
}

.onboard-progress__dots {
  position: relative;
  display: flex;
  justify-content: space-around;
  gap: 0.5rem;
  margin-bottom: 3rem;
}

.onboard-progress__step-wrapper {
  position: relative;
}

.onboard-progress__step-label {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  width: 12rem;
  text-align: center;
  font-size: var(--text-sm);
}

.onboard-progress__dot {
  cursor: not-allowed;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1 / 1;
  width: 2.5rem;
  height: 2.5rem;
  font-size: var(--text-lg);
  border-radius: calc(infinity * 1px);
  color: var(--muted-foreground);
  background: var(--muted);
  /* border: 1px solid var(--border); */
  transition:
    transform 0.15s ease,
    background 0.15s ease;
}

.onboard-progress__dot[data-tabs-trigger-state="active"],
.onboard-progress__dot[data-steps-state="passed"] {
  color: var(--primary-foreground);
  background: var(--primary);
  font-weight: var(--fw-medium);
}

.onboard-progress__line-placeholder {
  background: var(--muted);
  position: absolute;
  inset: 50% 0 0;
  transform: translateY(-50%);
  height: 0.25rem;
  z-index: -1;
}

.onboard-progress__line {
  height: 100%;
  width: 0;
  background: var(--primary);
}

.onboard-review {
  display: grid;
  grid-template-columns: minmax(6rem, 10rem) 1fr;
  gap: 0.35rem 1rem;
  margin: 0;
  font-size: 0.9rem;
}

.onboard-review dt {
  margin: 0;
  color: color-mix(in oklab, var(--color-fg, #111) 55%, transparent);
  font-weight: 500;
}

.onboard-review dd {
  margin: 0;
  word-break: break-word;
}