/* =========================================================
   ANALYTICS
   ========================================================= */

.hero-analytics {
  position: relative;
  overflow: hidden;

  padding: 20px 28px 0px;
  margin-bottom: -60px;

  background: var(--white);
}

.analytics-container {
  position: relative;

  max-width: 1200px;
  min-height: 150px;

  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 40px;
}

/* subtle horizontal line */

.analytics-container::before {
  content: "";

  position: absolute;
  top: 50%;
  left: 0;
  right: 0;

  height: 1px;

  background: var(--line);

  z-index: 0;
}

.analytics-item {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: baseline;
  gap: 10px;

  padding: 12px 18px;

  background: var(--white);

  white-space: nowrap;
}

.analytics-item .analytics-number {
  color: var(--mint);
}

.analytics-alt .analytics-number {
  color: var(--yellow);
}

.analytics-featured .analytics-number {
  color: var(--coral);
}

/* deliberately offset */

.analytics-item:nth-child(1) {
  transform: translateY(-22px);
}

.analytics-item:nth-child(2) {
  transform: translateY(18px);
}

.analytics-item:nth-child(3) {
  transform: translateY(-14px);
}

.analytics-item:nth-child(4) {
  transform: translateY(25px);
}

/* =========================================================
   ANALYTICS — MOBILE
   ========================================================= */

@media (max-width: 700px) {
  .hero-analytics {
    padding: 20px 21px 0px;
  }

  .analytics-eyebrow {
    margin-bottom: 35px;
  }

  .analytics-container {
    min-height: 0;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 10px;
  }

  /* Keep the horizontal line, but make it vertical */

  .analytics-container::before {
    top: 0;
    bottom: 0;
    left: 50%;

    right: auto;

    width: 1px;
    height: auto;
  }

  .analytics-item {
    width: fit-content;
    max-width: 100%;

    padding: 10px 14px;

    background: var(--white);

    gap: 9px;
  }

  /* Alternate the positioning */

  .analytics-item:nth-child(1) {
    align-self: flex-start;
    transform: translateY(0);
  }

  .analytics-item:nth-child(2) {
    align-self: flex-end;
    transform: translateY(0);
  }

  .analytics-item:nth-child(3) {
    align-self: flex-start;
    transform: translateY(0);
  }

  .analytics-item:nth-child(4) {
    align-self: flex-end;
    transform: translateY(0);
  }

  .analytics-number {
    font-size: 32px;
  }

  .analytics-item > span {
    font-size: 8px;
  }
}