/* ===========================================================================
   ss-integrations — the Integrations band shared by every solutions page
   ---------------------------------------------------------------------------
   Opt in by name from page front matter:  sharedCSS: [ss-integrations]
   Pair with the markup partial:           components/w/integrations-marquee.njk

   WHY THIS EXISTS. Until 2026-07-30 this block was copy-pasted into six page
   stylesheets and the marquee markup into six page templates. The cost of that
   was not theoretical: the band was scrolling the CUSTOMER logo wall under a
   heading promising INTEGRATIONS on all six pages at once, and fixing it meant
   six identical edits. Extracted per the house rule (extract on the second use,
   delete the original, re-verify every page that loads it).

   LOAD ORDER IS LOAD-BEARING. head.njk emits shared sheets AFTER ds7.css and
   BEFORE the page sheet. So a page CAN still override anything here — but a
   leftover page-local copy of these rules will silently win and re-introduce
   whatever bug this file fixes. When adopting this sheet on a page, DELETE the
   page-local .cz-light .w-marquee / .ss-int__band rules. Don't leave them.

   Consumed by: carly-solutions-{sales,marketing,customer-success},
                solutions-{sales,marketing,customer-success}
   =========================================================================== */

/* ---- the band itself: a thin hairline-bounded strip, not a full section ---- */
.ss-int__band{padding-block:clamp(18px,2.4vw,30px);border-block:1px solid var(--w-line-soft)}

/* ---- light-band treatment for LOGO-ONLY items (the customer wall) ----------
   Flattened to black silhouettes at 50%. This is correct for customer logos:
   they are interchangeable social proof, nobody is scanning for a specific one,
   and a uniform silhouette row is quieter than fifteen competing brand palettes.
   Kept generic (not scoped) because it governs any light-band customer wall. */
.cz-light .w-marquee__item{filter:grayscale(1) brightness(0);opacity:.5}
.cz-light .w-marquee__lockup i{filter:grayscale(1) brightness(0);opacity:.5}
.cz-light .w-marquee__lockup b{color:rgba(28,26,36,0.62)}

/* ---- INTEGRATION marks render in FULL COLOUR ------------------------------
   Jeff's call 2026-07-30, option B of three rendered variants.

   Two independent reasons, both learned the hard way:

   1. MECHANICAL. The rule above ends in brightness(0), which forces every
      non-transparent pixel to black. An outline mark survives that (Gong,
      Clari, Seismic, 6sense). A mark whose identity is a light glyph INSIDE a
      solid shape does not — Clay, Apollo, Freshworks, Outreach, Highspot and
      Salesforce all collapse into featureless dark blobs, because the white
      interior flattens to the same black as the shape around it. This shipped
      once and Jeff caught it in the render.

   2. EDITORIAL. Colour is doing a job here, not decorating. This section
      promises the reader their own stack, so they scan the row hunting for
      tools they recognise, and brand colour is the cue they scan by. That is
      the exact opposite of the customer wall above.

   SPECIFICITY: this is (0,3,1), which beats ds7.css's
   :root[data-theme="light"] .w-marquee__lockup i on a tie-break by load order.
   Do NOT shorten the selector — dropping .cz-light makes it (0,2,1) and ds7
   silently wins back the black-flatten with no visible error anywhere.

   The NAMES stay charcoal from the rule above. Colouring those too reads as a
   logo salad; the icon carries the brand, the name carries the legibility. */
.cz-light .ss-int__band .w-marquee__lockup i{filter:none;opacity:.95}

/* ---- the route-out under the band ---------------------------------------- */
.ss-int__cta{display:flex;align-items:center;justify-content:center;gap:var(--w-s-5);flex-wrap:wrap;
  margin-top:clamp(26px,3vw,40px);text-align:center}
.ss-int__cta p{margin:0;font-size:var(--w-fs-sm);color:var(--w-text-2)}
@media(max-width:540px){.ss-int__cta .w-btn{width:100%;justify-content:center}}