/* G2 proof components: lockup, rating strip, quote banner, quote grid.
   Palette is brand-locked, so the tokens hold the Synack values outright
   rather than inheriting a page wrapper's near-identical ones. */
.g2-proof {
  --g2-blue: #006BFF;
  --g2-navy: #0F2749;
  --g2-light-grey: #F5F5F5;
  --g2-dark-grey: #555555;
  --g2-white: #fff;
  --g2-maxw: var(--maxw, 1240px);
  --g2-font: var(--font, "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
  --g2-star: var(--g2-blue);
  --g2-star-empty: rgba(85, 85, 85, .25);
  font-family: var(--g2-font);
  color: var(--g2-navy);
  line-height: 1.55;
}

.g2-proof,
.g2-proof * {
  box-sizing: border-box;
}

.g2-proof a {
  text-decoration: none;
  color: inherit;
}

.g2-proof :focus-visible {
  outline: 2px solid var(--g2-blue);
  outline-offset: 4px;
  border-radius: 6px;
}

/* Stars */
.g2-stars {
  position: relative;
  display: inline-block;
  font-size: 18px;
  line-height: 0;
  white-space: nowrap;
  vertical-align: middle;
}

.g2-stars__layer {
  display: block;
  white-space: nowrap;
}

.g2-proof--stars-blue {
  --g2-star: var(--g2-blue);
}

.g2-proof--stars-yellow {
  --g2-star: #FEC84B;
}

.g2-stars__layer--empty {
  color: var(--g2-star-empty);
}

.g2-stars__layer--full {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--g2-star);
}

/* Specific enough to survive a page rule like .contactpage svg{display:block}. */
.g2-proof .g2-stars .g2-stars__star {
  display: inline-block;
  width: 1.05em;
  height: 1em;
  vertical-align: middle;
}

/* Blue button, shared by the lockup CTA and the banner review link */
.g2-proof a.g2-lockup__cta,
.g2-proof a.g2-quote-banner__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 25px;
  border-radius: 50px;
  background: var(--g2-blue);
  color: var(--g2-white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .099em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .4s;
}

.g2-proof a.g2-lockup__cta:visited,
.g2-proof a.g2-quote-banner__link:visited {
  color: var(--g2-white);
}

.g2-proof a.g2-lockup__cta:hover,
.g2-proof a.g2-lockup__cta:focus,
.g2-proof a.g2-quote-banner__link:hover,
.g2-proof a.g2-quote-banner__link:focus {
  background: #0057cc;
  color: var(--g2-white);
}

/* Component A: lockup */
.g2-proof.g2-lockup {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: var(--g2-maxw);
}

.g2-proof.g2-lockup--center {
  align-items: center;
  text-align: center;
  margin: 0 auto;
}

.g2-lockup--left {
  align-items: flex-start;
  text-align: left;
}

.g2-lockup__headline {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--g2-dark-grey);
}

.g2-lockup__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.g2-lockup--center .g2-lockup__badges {
  justify-content: center;
}

.g2-lockup__badge {
  margin: 0;
  padding: 0;
}

.g2-lockup__badge img {
  display: block;
  width: auto;
  height: 96px;
  max-width: 100%;
}

.g2-lockup__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.g2-lockup__rating .g2-stars {
  font-size: 20px;
}

.g2-lockup__score {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.g2-lockup__scale,
.g2-lockup__count {
  font-size: 15px;
  color: var(--g2-dark-grey);
}

.g2-proof a.g2-lockup__count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--g2-blue);
  text-decoration: none;
}

/* On Night Blue the badges sit on a Light Grey panel, never knocked out. */
.g2-lockup--on-dark {
  color: var(--g2-white);
}

.g2-lockup--on-dark .g2-lockup__headline {
  color: rgba(255, 255, 255, .78);
}

.g2-lockup--on-dark .g2-lockup__badges {
  background: var(--g2-light-grey);
  border-radius: 12px;
  padding: 24px 28px;
}

.g2-lockup--on-dark .g2-lockup__scale {
  color: rgba(255, 255, 255, .78);
}

.g2-lockup--on-dark .g2-stars__layer--empty {
  color: rgba(255, 255, 255, .28);
}

.g2-proof.g2-lockup--on-dark a.g2-lockup__count {
  color: var(--g2-white);
}

/* Component B: rating strip. Rating first; the review count lives in the link
   target only. */
.g2-proof.g2-rating-strip {
  display: flex;
  flex-wrap: wrap;
  font-size: 15px;
}

.g2-rating-strip--center {
  justify-content: center;
}

.g2-rating-strip--left {
  justify-content: flex-start;
}

.g2-rating-strip__link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.g2-rating-strip__score {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.g2-rating-strip__scale {
  color: var(--g2-dark-grey);
}

.g2-rating-strip__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--g2-blue);
  text-decoration: none;
}

/* Outbound links to G2 carry the external-link arrow, never an underline. */
.g2-proof a.g2-lockup__count::after,
.g2-proof a.g2-snapshot-rail__link::after,
.g2-proof a.g2-testimonials__source::after,
.g2-rating-strip__label::after {
  content: "\2197";
  font-size: .95em;
  transition: transform .2s;
}

.g2-proof a.g2-lockup__count:hover::after,
.g2-proof a.g2-lockup__count:focus-visible::after,
.g2-proof a.g2-snapshot-rail__link:hover::after,
.g2-proof a.g2-snapshot-rail__link:focus-visible::after,
.g2-proof a.g2-testimonials__source:hover::after,
.g2-proof a.g2-testimonials__source:focus-visible::after,
.g2-rating-strip__link:hover .g2-rating-strip__label::after,
.g2-rating-strip__link:focus-visible .g2-rating-strip__label::after {
  transform: translate(2px, -2px);
}

.g2-rating-strip span.g2-rating-strip__link .g2-rating-strip__label {
  color: var(--g2-dark-grey);
}

.g2-rating-strip span.g2-rating-strip__link .g2-rating-strip__label::after {
  content: none;
}

.g2-rating-strip--on-dark {
  color: var(--g2-white);
}

.g2-rating-strip--on-dark .g2-rating-strip__scale,
.g2-rating-strip--on-dark .g2-rating-strip__label {
  color: var(--g2-white);
}

.g2-rating-strip--on-dark .g2-stars__layer--empty {
  color: rgba(255, 255, 255, .28);
}

/* Component C: quote banner */
.g2-proof.g2-quote-banner {
  width: 100%;
  background: var(--g2-navy);
  color: var(--g2-white);
  padding: 72px 40px;
}

.g2-quote-banner .g2-quote-banner__inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.g2-quote-banner .g2-quote-banner__source {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--g2-blue);
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--g2-white);
}

.g2-quote-banner .g2-quote-banner__quote {
  margin: 22px 0 0;
  padding: 0;
  border: 0;
  quotes: none;
}

.g2-quote-banner__quote p {
  margin: 0;
  font-size: 30px;
  line-height: 1.35;
  letter-spacing: -.02em;
}

.g2-quote-banner .g2-quote-banner__author {
  margin: 24px 0 0;
  font-size: 15px;
  color: rgba(255, 255, 255, .78);
}

.g2-quote-banner .g2-quote-banner__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 24px;
  margin-top: 26px;
}

.g2-quote-banner__rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.g2-quote-banner__score {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.g2-quote-banner__scale {
  font-size: 15px;
  color: rgba(255, 255, 255, .78);
}

.g2-quote-banner .g2-stars__layer--empty {
  color: rgba(255, 255, 255, .28);
}

/* Component D: quote grid */
.g2-proof.g2-quote-grid {
  display: grid;
  gap: 24px;
  max-width: var(--g2-maxw);
  margin: 0 auto;
  /* Cards are as tall as their content, so a short quote does not leave a void. */
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.g2-proof.g2-quote-grid[data-count="1"] {
  max-width: 720px;
  grid-template-columns: 1fr;
}

.g2-proof.g2-quote-grid[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.g2-proof.g2-quote-grid[data-count="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.g2-proof.g2-quote-grid[data-count="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.g2-quote-grid .g2-quote-grid__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 28px;
  border: 1px solid #EAECF0;
  border-radius: 12px;
  background: var(--g2-white);
}

.g2-quote-grid__quote {
  margin: 0;
  padding: 0;
  border: 0;
  quotes: none;
}

.g2-quote-grid__quote p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--g2-dark-grey);
}

.g2-quote-grid__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: var(--g2-dark-grey);
}

.g2-quote-grid__author {
  font-weight: 700;
  color: var(--g2-navy);
}

/* Same arrow link the campaign pages use on cards. */
.g2-proof a.g2-quote-grid__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--g2-blue);
  font-weight: 500;
  text-decoration: none;
}

.g2-proof a.g2-quote-grid__link::after {
  content: "\2192";
  transition: transform .2s;
}

.g2-proof a.g2-quote-grid__link:hover::after,
.g2-proof a.g2-quote-grid__link:focus-visible::after {
  transform: translateX(4px);
}

@media (max-width: 1100px) {
  .g2-proof.g2-quote-grid[data-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .g2-proof.g2-quote-grid[data-count="3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .g2-proof.g2-quote-banner {
    padding: 56px 24px;
  }

  .g2-quote-banner .g2-quote-banner__quote p {
    font-size: 24px;
  }
}

@media (max-width: 700px) {
  .g2-proof.g2-quote-grid,
  .g2-proof.g2-quote-grid[data-count="2"],
  .g2-proof.g2-quote-grid[data-count="3"],
  .g2-proof.g2-quote-grid[data-count="4"] {
    grid-template-columns: 1fr;
  }

  .g2-lockup__badge img {
    height: 76px;
  }
}

/* Component E: snapshot rail. Fixed 220x377, so it only fits a narrow column. */
.g2-proof.g2-snapshot-rail {
  width: 220px;
  max-width: 100%;
}

.g2-snapshot-rail__frame {
  display: block;
  width: 220px;
  max-width: 100%;
  height: 377px;
  border: 0;
  border-radius: 8px;
}

.g2-proof a.g2-snapshot-rail__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--g2-blue);
  text-decoration: none;
}

.g2-proof a.g2-snapshot-rail__link:hover,
.g2-proof a.g2-snapshot-rail__link:focus {
  color: var(--g2-navy);
}

/* G2 testimonials embed */
.g2-proof.g2-testimonials {
  max-width: var(--g2-maxw);
  margin: 0 auto;
  min-height: 480px;
}

.g2-testimonials__frame {
  display: block;
  width: 100%;
  min-height: 480px;
  border: 0;
  overflow: hidden;
}

/* G2 requires the attribution; it sits under the frame instead of floating out of it. */
.g2-proof a.g2-testimonials__source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 14px;
  color: var(--g2-blue);
  text-decoration: none;
}

.g2-proof a.g2-testimonials__source:hover,
.g2-proof a.g2-testimonials__source:focus {
  color: var(--g2-navy);
}

/* Placement: closing CTA on Blog 2026 posts. The envelope graphic is lifted so
   the strip does not land on its lower edge. */
.blog-2026-organization-cta__g2 {
  margin-top: 34px;
}

.blog-2026-organization-cta--with-g2 .bg-shape-image img {
  transform: translateY(-30%);
}