/* Common layout utilities for marketing v2 pages (frames, grids, shared chrome). */

/* Gray border frame shell */
.frame-container-outer {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #E6EBEF;
  border-radius: 0;
  max-width: 1140px;
  width: 100%;
  margin: 0 auto;
}

.frame-container-outer.pt {
  padding-top: 1px;
}

.frame-container-outer.pb {
  padding-bottom: 1px;
}

.frame-container-outer.pr {
  padding-right: 1px;
}

.frame-container-outer.pl {
  padding-left: 1px;
}

/* Inner rounded card */
.frame-container-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.frame-container-inner.br-tl {
  border-top-left-radius: 8px;
}

.frame-container-inner.br-tr {
  border-top-right-radius: 8px;
}

.frame-container-inner.br-bl {
  border-bottom-left-radius: 8px;
}

.frame-container-inner.br-br {
  border-bottom-right-radius: 8px;
}

.frame-container-inner.br-l {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.frame-container-inner.br-r {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.frame-container-inner.br-t {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.frame-container-inner.br-b {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Grids with inner gray borders */
.frame-grid {
  display: grid;
  gap: 1px;
  border: 1px solid #e6ebef;
  background-color: #e6ebef;
  border-radius: 9px;
}

.frame-grid-top {
  display: grid;
  gap: 1px;
  border: 1px solid #e6ebef;
  background-color: #e6ebef;
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
}

.frame-grid-bottom {
  display: grid;
  gap: 1px;
  border-left: 1px solid #e6ebef;
  border-right: 1px solid #e6ebef;
  border-bottom: 1px solid #e6ebef;
  background-color: #e6ebef;
  border-bottom-left-radius: 9px;
  border-bottom-right-radius: 9px;
}

.frame-square {
  background: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg-dots {
  background-image: radial-gradient(circle, #e6ebef 1px, transparent 1px);
  background-size: 8px 8px;
  background-position: 0 0;
}

/* Testimonial spacer cells */
.testimonial-spacer-cell {
  width: 16px;
  height: 16px;
}

.testimonial-spacer-fill {
  height: 16px;
}

.testimonial-side-rail {
  width: 16px;
}

@media (width >= 576px) {
  .testimonial-spacer-cell {
    width: 32px;
    height: 32px;
  }

  .testimonial-spacer-fill {
    height: 32px;
  }

  .testimonial-side-rail {
    width: 32px;
  }
}

/* Company logo strip */
.company-logos-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  place-items: center;
  gap: 0.75rem 1rem;
}

@media (width >= 992px) {
  .company-logos-row {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* Pill row */
.pill-row {
  gap: 0.5rem;
  padding-top: 6px;
  padding-bottom: 6px;
  text-align: center;
}

.pill-row-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pill-row-text {
  font-size: 7px;
  line-height: 1.2;
}

.pill-row-check {
  font-size: 10px;
  margin-right: 0.125rem;
}

@media (width >= 576px) {
  .pill-row {
    gap: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .pill-row-text {
    font-size: inherit;
    line-height: inherit;
  }

  .pill-row-check {
    font-size: inherit;
    margin-right: 0.25rem;
  }
}