/* Social Proof — trust bar (checkmark proof strip), dark-top variant.
   Ported from home.css (.hm-trust-*) + prod.css product-page + .pp-theme-flip overrides.
   The dark-top styling is baked in (this page's permanent identity): dark fill card,
   purple→blue gradient stroke + offset box, white text, green check circles. */
.sp-trustbar {
  --nj-darkest: #1B053D;
  --r-pill: 18px;
  --hm-max: 1280px;
  --hm-pad: 32px;
  /* outer section background is editable; the card/frame itself always stays --nj-darkest */
  background: var(--nj-outer-bg, var(--nj-darkest));
}
.sp-trustbar * { box-sizing: border-box; }
.sp-trustbar.hm-trust-wrap {
  padding: 45px var(--hm-pad) 14px;
  display: flex; justify-content: center;
}
.sp-trustbar .hm-trust-bar { position: relative; top: 0;
  max-width: 1000px; width: 100%; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 30px; padding: 18px 64px;
  background: var(--nj-darkest);
  border: none; border-radius: var(--r-pill);
}
/* offset box + dark fill as real layers (a z-index:-1 ::before would fall BEHIND
   the section's own dark background inside a standalone module and vanish). */
.sp-trustbar .hm-trust-offset, .sp-trustbar .hm-trust-fill { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.sp-trustbar .hm-trust-offset { background: linear-gradient(150deg, #8F52F1 0%, #6E48EC 50%, #4A39DE 100%); transform: translate(7px, 7px); }
.sp-trustbar .hm-trust-fill { background: var(--nj-darkest); }
.sp-trustbar .hm-trust-item { position: relative; z-index: 1; }
/* trust bar is a passive proof strip — static (no hover lift) */
/* gradient stroke — purple→blue */
.sp-trustbar .hm-trust-bar::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
  background: linear-gradient(150deg, #8F52F1 0%, #6E48EC 50%, #4A39DE 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* accent shadow variant — green→purple offset + stroke gradient (default stays purple→blue above).
   Compound selector (not just source order) so the override wins regardless of rule position. */
.sp-trustbar.sp-trustbar--accent-green .hm-trust-offset,
.sp-trustbar.sp-trustbar--accent-green .hm-trust-bar::after {
  background: linear-gradient(150deg, #2CE080 0%, #2CE080 30%, #8F52F1 100%);
}
.sp-trustbar .hm-trust-items { display: contents; }
.sp-trustbar .hm-trust-item { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 14px; font-weight: 500; color: #fff; }
.sp-trustbar .hm-trust-check { width: 20px; height: 20px; border-radius: 50%; background: #2CE080; color: #083A20; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex: none; }

/* MOBILE — was .nj-mobile-mode: contained rounded rectangle inset from edges,
   gradient stroke around it, offset box dropped (it peeked as a stray line). */
@media (max-width: 980px) {
  /* top padding: the hero above already ends on its own 44px, so the desktop 56px
     read as a dead gap on a phone. */
  .sp-trustbar.hm-trust-wrap { padding: 24px 0 14px; }
  /* one item per row: wrap + space-between packed them greedily, so unequal label
     widths put two items on one line and one on the next (misaligned column). */
  .sp-trustbar .hm-trust-bar { width: auto; max-width: none; min-width: 90%; margin: 0 20px; border-radius: 16px; padding: 20px 22px; gap: 14px 24px;
    flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: flex-start; }
  /* drop display:contents so the items get a real group box again. Without it the
     items are direct flex children of the bar, and centering them (align-items:
     center) centers EACH one separately — unequal label widths then leave the
     check circles on ragged x positions. As one shrink-to-fit box the GROUP is
     centered by the bar, while align-items:flex-start inside keeps every check on
     a shared left edge. */
  .sp-trustbar .hm-trust-items {
    display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
    margin: 4px auto 10px;
  }
  /* labels are editable/variable, so let long copy wrap instead of overflowing the
     card. align-items moves to flex-start so the check stays on the FIRST line
     (centered would float it between two lines); the 2px nudge optically aligns
     the 20px circle with the 14px cap-height. */
  .sp-trustbar .hm-trust-item { white-space: normal; align-items: flex-start; }
  .sp-trustbar .hm-trust-check { margin-top: 2px; }
  .sp-trustbar .hm-trust-offset { display: none; }
  /* /industry/* pages: full-bleed bar instead of the inset rounded card above.
     The items group stays centered — that's the .hm-trust-items rule above
     (shrink-to-fit box + auto margins), untouched by the bar's own width. */
  .sp-trustbar--industry .hm-trust-bar { width: 100%; min-width: 0; max-width: none; margin: 0; border-radius: 0; }
  /* editor toggle: full-bleed bar, no gradient stroke. Items stay centered as a
     group via the .hm-trust-items rule above (shrink-to-fit box + auto margins) —
     same mechanism as --industry, so the checks stay aligned on one shared edge
     instead of each row centering separately. */
  .sp-trustbar--mobile-flat .hm-trust-bar { width: 100%; min-width: 0; max-width: none; margin: 0; border-radius: 0; }
  .sp-trustbar--mobile-flat .hm-trust-bar::after { content: none; }
}
/* very small phones (iPhone SE 1st gen and similar 320px viewports): the card's
   310px min-width + the 20px side margins total 350px, which would overflow and
   add horizontal scroll. Shrink the margin instead of the card. */
@media (max-width: 360px) {
  .sp-trustbar .hm-trust-bar { margin: 0 5px; }
  .sp-trustbar--industry .hm-trust-bar { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-trustbar .hm-trust-bar { transition: none; }
}