/* Keep pricing's first screen focused on the complete offer and its buttons. */
.pricing-public-page .public-topbar {
  position: relative;
  margin-bottom: 0;
}

.pricing-overview {
  display: grid;
  gap: clamp(20px, 3svh, 36px);
  padding-block: 28px;
}

.pricing-overview[id] { scroll-margin-top: 0; }

.pricing-trial-status {
  max-width: 760px;
  margin: 18px auto 0;
  padding: 14px 18px;
  border: 1px solid #c5d8fa;
  border-radius: 12px;
  background: #eef4ff;
  color: #234775;
  font-size: 1rem;
  line-height: 1.6;
}

.public-pricing-grid > [hidden],
.public-pricing-grid [hidden],
.pricing-trial-status[hidden] { display: none; }

.public-pricing-grid.is-upgrading {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(900px, 100%);
  justify-self: center;
}

.public-pricing-grid.is-managing {
  grid-template-columns: minmax(0, 1fr);
  width: min(600px, 100%);
  justify-self: center;
}

@media (max-width: 640px) {
  .public-pricing-grid.is-upgrading { grid-template-columns: 1fr; }
}

@media (min-width: 1181px) {
  .pricing-overview {
    box-sizing: border-box;
    min-height: 100svh;
    align-content: center;
    padding-block: clamp(16px, 3svh, 28px);
  }

  .pricing-overview .page-title {
    font-size: clamp(2rem, 7svh, 4rem);
  }

  .pricing-overview .page-subtitle {
    font-size: clamp(1rem, 2.2svh, 1.22rem);
  }

  .pricing-overview .pricing-card {
    padding: clamp(16px, 2.8svh, 26px);
    gap: clamp(8px, 1.3svh, 12px);
  }

  .pricing-overview .pricing-list {
    margin-block: 0;
  }

  @media (max-height: 760px) {
    .pricing-overview .page-title {
      font-size: 2rem;
      margin-block: 8px;
    }

    .pricing-overview .monthly-trial-price__free {
      font-size: 2.25rem;
    }
  }
}