main > section {
  margin: 96px 0;
}

@media (max-width: 744px) {
  .pricing-title em {
    display: block;
    font-style: italic;
  }
}

.pricings {
  z-index: 1;
  position: relative;
  margin: 0 auto;
}
.pricings:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -150px;
  height: 300px;
  flex-shrink: 0;
  border-radius: 1128px;
  background: radial-gradient(50% 50% at 50% 50%, #1d1d1b 0%, rgba(29, 29, 27, 0) 80%);
  z-index: -1;
}
@media (max-width: 1024px) {
  .pricings:before {
    display: none;
  }
}
@media (max-width: 744px) {
  .pricings .flex__quarter {
    width: 100%;
  }
}

.pricings .pricing {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s4);
  min-height: 380px;
  border: 1px solid var(--neutral-outline-2);
}
@media (max-width: 744px) {
  .pricings .pricing {
    min-height: unset;
    padding-top: var(--s6);
  }
}
.pricings .pricing {
  border-radius: 0;
}
.pricings .pricing .body-xs,
.pricings .pricing .subtitle-s {
  color: var(--neutral-fg-2);
}
.pricings .pricing small {
  display: block;
}
.pricings .pricing .button {
  margin-top: auto;
}
.pricings .pricing.pricing--managed {
  background-color: var(--bg-1);
  border-top-left-radius: calc(var(--radius) * 2);
  border-bottom-left-radius: 0;
}
.pricings .pricing.pricing--growth {
  background-color: var(--bg-0);
  border-left-width: 0;
}
@media (max-width: 744px) {
  .pricings .pricing.pricing--growth {
    border-left-width: 1px;
  }
}
.pricings .pricing.pricing--enterprise {
  background-color: var(--bg-0);
  border-left-width: 0;
  border-top-right-radius: calc(var(--radius) * 2);
  border-bottom-right-radius: calc(var(--radius) * 2);
}
@media (max-width: 744px) {
  .pricings .pricing.pricing--enterprise {
    border-left-width: 1px;
  }
}
.pricings .pricing.pricing--selfhosted {
  background-color: var(--bg-0);
  border-right-width: 0;
  border-top-left-radius: calc(var(--radius) * 2);
  border-bottom-left-radius: calc(var(--radius) * 2);
}
@media (max-width: 744px) {
  .pricings .pricing.pricing--selfhosted {
    border-right-width: 1px;
  }
}
@media (min-width: 744px) {
  .pricings .pricing.pricing--popular {
    z-index: 2;
    margin-top: calc(var(--s4) * -1);
    border-top-left-radius: calc(var(--radius) * 2);
    border-top-right-radius: calc(var(--radius) * 2);
  }
  .pricings .pricing.pricing--popular p:first-of-type {
    margin-top: calc(var(--s4) * 1);
  }
}

@media (max-width: 744px) {
  .pricings .pricing.pricing {
    border-radius: 0;
  }
  .pricings .pricing.pricing:first-child {
    border-top-left-radius: calc(var(--radius) * 2);
    border-top-right-radius: calc(var(--radius) * 2);
  }
  .pricings .pricing.pricing:last-child {
    border-bottom-left-radius: calc(var(--radius) * 2);
    border-bottom-right-radius: calc(var(--radius) * 2);
  }
  .pricings .pricing + .pricing {
    border-top-width: 0;
  }
}
.pricings .pricing .ul--icons {
  margin: calc(var(--s2) * -1) 0 var(--s3);
}
.pricings .pricing .ul--icons:last-of-type {
  margin-bottom: var(--s10);
}
@media (max-width: 1024px) {
  .pricings .pricing .ul--icons:last-of-type {
    margin-bottom: var(--s6);
  }
}

.pricings .pricing .ul--icons li {
  flex-wrap: nowrap;
}

@media (max-width: 744px) {
  .padded_on_phone {
    padding: 0 var(--s4);
  }
}

@media (max-width: 1024px) {
  .pricing-hero {
    margin-bottom: var(--s14) !important;
  }
}

@media (max-width: 1024px) {
  .pricing-hero + section {
    margin-top: 0;
  }
}

table {
  display: flex;
  flex-direction: column;
  gap: var(--s6);
  width: 100%;
}
@media (max-width: 1024px) {
  .tables table {
    display: none;
  }
}
table .button {
  text-align: center;
}
table .sticky {
  position: sticky;
  top: var(--s14);
  background-color: var(--tan-bg);
}
table [astro-icon="ms:close"] {
  color: var(--neutral-fg-2);
}
table [astro-icon="ms:check"] {
  color: var(--primary-fg);
}
table [astro-icon="ms:info"] {
  vertical-align: middle;
}

tbody {
  display: flex;
  flex-direction: column;
}

tr {
  display: flex;
  gap: var(--s6);
  border-bottom: 1px solid var(--neutral-outline-1);
}
@media (max-width: 1024px) {
  tr {
    gap: var(--s2);
  }
}
tr:not(:first-child) th {
  color: var(--neutral-fg-2);
  font-weight: 500;
}

.tr--no_border {
  border-color: transparent;
}

td,
th {
  flex: 1;
  text-align: left;
  padding: var(--s4) 0;
}
td small,
th small {
  color: var(--neutral-fg-2);
}

th:first-child {
  flex: 2;
}
@media (max-width: 1024px) {
  th:first-child {
    flex: 1;
  }
}

.github-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
}
.github-button :global(svg:first-of-type) {
  fill: none;
}
.github-button :global(svg) {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
}