.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) auto minmax(260px, 0.9fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);

  width: calc(100% - 60px);
  max-width: 1400px;
  margin: 34px auto 0;
  padding: clamp(32px, 5vw, 56px) 28px;

  background: #152d50;
  border: 1px solid #28466d;
  border-radius: 16px;
}

.hero-copy {
  min-width: 0;
}

.hero-copy h1 {
  margin: 8px 0 0;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.08;
  white-space: normal;
}

.hero-copy h1 span {
  color: #ffd443;
}

.hero-cta {
  display: flex;
  justify-content: center;
}

.download-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 18px 24px;
  white-space: nowrap;

  background: #ffd443;
  color: #10203b;
  border-radius: 10px;
  font-size: 20px;
  font-weight: 700;
}

.hero-connections {
  min-width: 0;
  text-align: center;
}

.database-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

@media (max-width: 1100px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .hero-connections {
    grid-column: 1 / -1;
  }
}

.product-title {
    color: #f0c84b;
    font-size: 26px;
}

.product-title .star {
    font-size: 16px;
    vertical-align: middle;
}

.hero-databases {
    display: grid;
    grid-template-rows: auto auto;
    gap: 24px;
    width: 100%;
}

/* First row: label and database badges */
.hero-connections {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.hero-databases-label {
    color: #ffd447;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

.hero-supported {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.hero-supported span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 13px;
    border: 1px solid rgba(240, 200, 75, 0.45);
    border-radius: 999px;

    color: #ffd447;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

/* Second row: one button for each product */
.hero-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.hero-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;
    min-width: 310px;
    padding: 6px 6px;
    margin: 0 auto;

    background: #ffd447;
    color: #102342;
    border-radius: 8px;

    font-size: 22px;
    font-weight: 700;
    text-align: center;
}

.hero-disabled {
    cursor: not-allowed;
    opacity: 0.75;
    text-decoration: none;
    pointer-events: none;
}

.rulevault-coming-soon {
    text-align: center;
}

.rulevault-note {
    max-width: 620px;
    margin: 12px auto 0;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.5;
}

/* Tablet and mobile */
@media (max-width: 900px) {
    .hero-buttons {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .hero-primary {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}

@media (max-width: 600px) {
    .hero-connections {
        align-items: flex-start;
        flex-direction: column;
    }

    .hero-supported {
        gap: 8px;
    }

    .hero-supported span {
        font-size: 14px;
        padding: 7px 11px;
    }
}

@media (max-width: 760px) {
  .hero {
    grid-template-columns: 1fr;
    width: calc(100% - 30px);
    padding: 32px 20px;
    text-align: left;
  }

  .hero-cta {
    justify-content: flex-start;
  }

  .download-button {
    width: 100%;
    white-space: normal;
    text-align: center;
  }

  .hero-connections {
    grid-column: auto;
    text-align: left;
  }

  .database-list {
    justify-content: flex-start;
  }
}