/* ===== shared chrome CSS (lifted verbatim from W-PRICING / W-BOOK-DEMO _chrome) ===== */
.cz-light{
  background:var(--w-bg);color:var(--w-text);
  --w-bg:#f5f5f5; --w-bg-deep:#ebebeb; --w-bg-elev:#fafafa;
  --w-card:#ffffff; --w-card-lo:#efefef; --w-card-hi:#ffffff;
  --w-text:var(--w-charcoal); --w-text-2:rgba(28,26,36,0.66); --w-text-3:rgba(28,26,36,0.62);
  --w-text-prose:#302d2e; --w-text-on-brand:#ffffff; --w-icon-ink:var(--w-charcoal);
  --w-line-soft:rgba(28,26,36,0.06); --w-line:rgba(28,26,36,0.10); --w-line-strong:rgba(28,26,36,0.16); --w-edge-top:rgba(255,255,255,0.9);
  --w-brand:var(--w-purple-ink); --w-brand-2:var(--w-purple); --w-brand-soft:rgba(152,135,244,0.10); --w-brand-line:rgba(152,135,244,0.28);
  --w-shadow-raise:0 8px 18px -8px rgba(28,26,36,0.07), inset 0 1px 0 rgba(255,255,255,0.9);
  --w-shadow-raise-soft:0 4px 10px -6px rgba(28,26,36,0.05), inset 0 1px 0 rgba(255,255,255,0.85);
  --w-shadow-recess:inset 0 1px 3px rgba(28,26,36,0.05), inset 0 -1px 0 rgba(255,255,255,0.8);
  --w-shadow-recess-deep:inset 0 2px 5px rgba(28,26,36,0.07), inset 0 -1px 0 rgba(255,255,255,0.7);
  --w-shadow-sm:0 1px 2px rgba(28,26,36,0.04); --w-shadow-md:0 4px 12px rgba(28,26,36,0.05); --w-shadow-lg:0 12px 28px rgba(28,26,36,0.07);
  --w-glow-brand:0 2px 8px rgba(28,26,36,0.05); --w-glow-brand-strong:0 6px 16px rgba(28,26,36,0.07);
  --w-glass-fill:rgba(255,255,255,0.66); --w-glass-fill-strong:rgba(255,255,255,0.86); --w-glass-tint:rgba(28,26,36,0.90);
  --w-glass-fill-soft:rgba(28,26,36,0.03); --w-glass-line:rgba(28,26,36,0.10); --w-glass-line-bright:rgba(28,26,36,0.16);
  --w-glass-rim-top:rgba(255,255,255,0.95); --w-glass-rim-bottom:rgba(28,26,36,0.05);
  --w-glass-blur:blur(18px) saturate(140%); --w-glass-blur-lg:blur(22px) saturate(145%);
  --w-glass-shadow:0 10px 24px rgba(28,26,36,0.06); --w-glass-shadow-soft:0 4px 12px rgba(28,26,36,0.05);
  --w-cta-fill:var(--w-glass-tint); --w-cta-text:#ffffff; --w-cta-glow:var(--w-shadow-md); --w-cta-glow-strong:var(--w-shadow-lg);
  --w-card-brand-wash:linear-gradient(160deg, rgba(28,26,36,0.06), rgba(28,26,36,0.015)); --w-card-brand-line:var(--w-line-strong);
  --w-tag-brand-bg:rgba(28,26,36,0.06); --w-tag-brand-fg:var(--w-text); --w-focus:rgba(28,26,36,0.55);
  --w-grad-surface:linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
  --w-grad-surface-hi:linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  --w-grad-recess:linear-gradient(180deg, #ededed 0%, #e3e3e3 100%);
}
/* keep glass legible if the OS asks for less transparency, inside a light band */
@media (prefers-reduced-transparency: reduce){
  .cz-light .w-glass,.cz-light .w-btn--glass,.cz-light .w-tag,.cz-light .w-card,.cz-light .w-cta-band{background:var(--w-card);border-color:var(--w-line)}
}

/* ===== W-INTEGRATIONS page-local styles ===== */
.w-section{padding-block:clamp(52px,3vw + 1rem,84px) clamp(76px,4.5vw + 1.7rem,120px)}
.ig-hero{position:relative;overflow:hidden;background:var(--w-bg);padding-block:clamp(96px,12vh + 2rem,160px) clamp(48px,6vw,84px);text-align:center}
.ig-hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 60% 55% at 50% 0%,rgba(152,135,244,.16),transparent 70%),radial-gradient(rgba(255,255,255,.045) 1px,transparent 1.4px);background-size:auto,26px 26px}
.ig-hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,var(--w-bg))}
.ig-hero .w-container{position:relative;z-index:1}
.ig-hero__inner{max-width:780px;margin-inline:auto}
.ig-hero__h{margin-top:16px;font-size:clamp(40px,5.4vw,76px);line-height:1.03;letter-spacing:-.03em;font-weight:var(--w-fw-black);color:#fff}
.ig-hero__h .w-accent{font-family:var(--w-font-serif);font-style:italic;font-weight:400;color:#c9bcff;-webkit-text-fill-color:#c9bcff;background:none}
.ig-hero__lead{margin:18px auto 0;max-width:62ch;color:rgba(255,255,255,.84)}
.ig-hero__actions{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.ig-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(16px,1.6vw,22px);margin-top:clamp(38px,4vw,54px)}
.ig-card{display:flex;flex-direction:column;gap:12px;min-height:238px}
.ig-card .w-card__foot{margin-top:auto}
.ig-logo{display:flex;align-items:center;height:42px}
.ig-logo svg{height:100%;width:auto;max-width:170px;display:block}
.ig-connect .w-card__icon .w-icon{width:22px;height:22px}
.ig-tag{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:100px;font-size:12px;font-weight:var(--w-fw-semi);color:var(--w-brand);background:rgba(152,135,244,.10);border:1px solid rgba(152,135,244,.30)}
.ig-tag .w-icon{width:13px;height:13px}
.ig-inline-link{color:var(--w-brand);font-weight:var(--w-fw-medium);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.ig-inline-link .w-icon{width:15px;height:15px}
.ig-inline-link:hover{text-decoration:underline}
/* ecosystem wall (dark) */

/* real GTM-tool logo wall (page-local, transparent sources) */















.igl-gong{background-image:url('/assets/images/w/integrations/igl-gong.png')}
.igl-outreach{background-image:url('/assets/images/w/integrations/igl-outreach.png')}

.igl-apollo{background-image:url('/assets/images/w/integrations/igl-apollo.png')}
.igl-clari{background-image:url('/assets/images/w/integrations/igl-clari.png')}
.igl-highspot{background-image:url('/assets/images/w/integrations/igl-highspot.svg')}
.igl-seismic{background-image:url('/assets/images/w/integrations/igl-seismic.svg')}
.igl-sixsense{background-image:url('/assets/images/w/integrations/igl-sixsense.svg')}
.igl-clay{background-image:url('/assets/images/w/integrations/igl-clay.png')}
.igl-marketo{background-image:url('/assets/images/w/integrations/igl-marketo.svg')}

.igl-qualified{background-image:url('/assets/images/w/integrations/igl-qualified.png')}
.igl-freshworks{background-image:url('/assets/images/w/integrations/igl-freshworks.svg')}
.igl-spekit{background-image:url('/assets/images/w/integrations/igl-spekit.svg')}
.ig-wall__note{margin:clamp(28px,2.8vw,40px) auto 0;max-width:56ch;text-align:center;font-size:var(--w-fs-lead);line-height:1.6;color:rgba(255,255,255,.78)}
/* steps */
.ig-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.6vw,24px);margin-top:clamp(38px,4vw,54px)}
.ig-step{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,1.8vw,30px);border-radius:20px;background:var(--w-card);border:1px solid var(--w-line);box-shadow:var(--w-shadow-sm)}
.ig-step__n{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;font-weight:var(--w-fw-black);font-size:16px;color:#fff;background:var(--w-grad-brand)}
.ig-step b{font-size:clamp(16px,1.1vw,18px);font-weight:var(--w-fw-bold);color:var(--w-text)}
.ig-step p{font-size:clamp(14px,.9vw,15px);line-height:1.55;color:var(--w-text-2)}
@media(max-width:760px){.ig-steps{grid-template-columns:1fr}}
/* close */
.ig-close{position:relative;overflow:hidden;background:var(--w-bg);text-align:center}
.ig-close__bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 70% 80% at 50% 120%,rgba(152,135,244,.16),transparent 66%)}
.ig-close .w-container{position:relative;z-index:1}
.ig-close__inner{max-width:640px;margin-inline:auto}
.ig-close__h{font-size:var(--w-fs-h2);line-height:var(--w-lh-snug);letter-spacing:var(--w-ls-tight);font-weight:var(--w-fw-black);color:#fff}
.ig-close__lead{margin:16px auto 0;max-width:56ch;font-size:var(--w-fs-lead);line-height:1.6;color:rgba(255,255,255,.82)}
.ig-close__actions{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}


/* --- full-bleed edge-faded logo marquee --- */
.ig-marquee{position:relative;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;display:flex;flex-direction:column;gap:clamp(26px,3vw,44px);margin-top:clamp(40px,4.4vw,60px);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.ig-marquee__track{display:flex;gap:clamp(40px,5vw,88px);width:max-content;flex:0 0 auto;animation:igMarqL 46s linear infinite;will-change:transform}
.ig-marquee__track.is-rev{animation:igMarqR 54s linear infinite}
.ig-marquee:hover .ig-marquee__track{animation-play-state:paused}
.ig-marquee__logo{flex:0 0 auto;width:132px;height:46px;background-size:contain;background-repeat:no-repeat;background-position:center;opacity:.88;transition:transform .32s cubic-bezier(.2,.7,.3,1),opacity .32s ease,filter .32s ease}
.ig-marquee__logo:hover{transform:scale(1.12) translateY(-2px);opacity:1}
@keyframes igMarqL{to{transform:translateX(-50%)}}
@keyframes igMarqR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.ig-marquee__track{animation:none}}
/* --- screenshot feature bands --- */
.ig-feat{padding-block:clamp(58px,5vw,104px)}
.ig-feat__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,84px);align-items:center;max-width:1200px;margin-inline:auto}
.ig-feat__row.is-rev .ig-feat__media{order:-1}
.ig-feat__copy{max-width:34rem}
.ig-feat__eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:100px;font-size:12.5px;font-weight:var(--w-fw-semi);letter-spacing:.02em;background:rgba(28,26,36,.72);color:#fff;border:1px solid rgba(255,255,255,.10);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ig-feat__eyebrow .w-icon{width:14px;height:14px;color:#c9bcff}
.cz-light .ig-feat__eyebrow{background:rgba(28,26,36,.9)}
.ig-feat__h{margin-top:16px;font-size:var(--w-fs-h2);line-height:var(--w-lh-snug);letter-spacing:var(--w-ls-tight);font-weight:var(--w-fw-black);color:var(--w-text)}
.ig-feat:not(.cz-light) .ig-feat__h{color:#fff}
.ig-feat__body{margin-top:14px;font-size:var(--w-fs-lead);line-height:1.62;color:var(--w-text-2)}
.ig-feat:not(.cz-light) .ig-feat__body{color:rgba(255,255,255,.82)}
.ig-feat__link{margin-top:20px;display:inline-flex;align-items:center;gap:7px;color:var(--w-brand);font-weight:var(--w-fw-medium);text-decoration:none}
.ig-feat__link .w-icon{width:16px;height:16px;transition:transform .28s ease}
.ig-feat__link:hover .w-icon{transform:translateX(4px)}
.ig-feat__media{aspect-ratio:4/3;border-radius:24px;background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 30px 60px -24px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.08);transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.cz-light .ig-feat__media{border-color:rgba(28,26,36,.08);box-shadow:0 30px 60px -26px rgba(28,26,36,.34)}
.ig-feat__media:hover{transform:translateY(-4px) scale(1.012)}
.igm-feat1{background-image:var(--w-img-ig-feat1)}.igm-feat2{background-image:var(--w-img-ig-feat2)}.igm-feat3{background-image:var(--w-img-ig-feat3)}.igm-feat4{background-image:var(--w-img-ig-feat4)}.igm-feat5{background-image:var(--w-img-ig-feat5)}
@media(max-width:900px){.ig-feat__row{grid-template-columns:1fr;gap:clamp(24px,4vw,36px)}.ig-feat__row.is-rev .ig-feat__media{order:0}.ig-feat__copy{max-width:none}}
:root{--w-img-ig-feat1:url("/assets/images/w/integrations/ig-feat1.webp");--w-img-ig-feat2:url("/assets/images/w/integrations/ig-feat2.webp");--w-img-ig-feat3:url("/assets/images/w/integrations/ig-feat3.webp");--w-img-ig-feat4:url("/assets/images/w/integrations/ig-feat4.webp");--w-img-ig-feat5:url("/assets/images/w/integrations/ig-feat5.webp")}

/* ===== integrations wall — stat bar + filterable category grid (ported from 2.0 /integrations) ===== */
/* ---------------------------------------------------------------------------
   D79 STAT RAIL  (.ig-stats / .ig-stat)
   Rebuilt 2026-08-05. It previously shipped as four centred numerals with no
   claim, no hairline, no translation and no motion — a caption, not a proof.

   ANATOMY, in DOM order, per D79: numeral -> claim -> hairline -> translation.
   The numeral is the headline at display size; the claim is one short line; the
   hairline separates; the translation says why it matters and NEVER restates the
   number. Left-aligned, not centred, so the hairline has a real left origin to
   grow from and the three text tiers share one optical edge.

   CONTRAST — this is a fix, not a preference. The old numerals used
   --w-grad-brand (#9887f4 -> #c18cff) on the .cz-light band. Measured against
   that band (#f5f5f5) those stops reach 2.71:1 and 2.28:1 — under even the 3:1
   large-text bar, let alone 4.5:1. --ig-num-grad below runs #4432bd -> #6153dd,
   whose WORST stop against the DEEPEST tint in the card field (#efeaff) is
   4.72:1. That clears the small-text bar everywhere on the card, so it cannot
   fail at any numeral size. Do not reintroduce --w-grad-brand here.

   DEPTH — a .cz-light band is a flat near-white field, so backdrop-filter blurs
   nothing and is a costume. The honest treatment is layered elevation: tinted
   gradient field, bright top rim, brand hairline inner border, brand-TINTED
   shadow, and a blurred aura behind the card so the elevation has something to
   read against.

   STACKING — .ig-stat is `isolation:isolate` and carries NO background of its
   own. The card face is ::after at z-index:-1 and the aura is ::before at
   z-index:-2, so both paint in the negative step (aura, then face) and every
   text child paints above them. Done this way the hover transform on .ig-stat
   is harmless: the card is already a stacking context, so adding one changes
   nothing about the internal paint order. If you move the fill back onto the
   element itself, the aura will paint OVER the card face instead of behind it.
   --------------------------------------------------------------------------- */
.ig-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.5vw,20px);
  max-width:1120px;margin:clamp(34px,4vw,52px) auto 0;isolation:isolate}
.ig-stat{position:relative;isolation:isolate;display:flex;flex-direction:column;
  align-items:flex-start;gap:clamp(9px,.7vw,12px);
  padding:clamp(22px,1.9vw,28px) clamp(20px,1.7vw,26px) clamp(20px,1.7vw,26px);
  border-radius:20px;
  /* the ramp the numeral, the rule and the aura all share, so the card reads as one object */
  --ig-num-grad:linear-gradient(135deg,#4432bd 0%,#6153dd 100%);
  transition:transform .34s var(--w-ease)}
/* the aura — a soft brand bloom BEHIND the card. Without it, elevation on a flat
   ground is invisible. Inset asymmetrically so the bloom pools under the card
   like a cast light rather than ringing it evenly. */
.ig-stat::before{content:"";position:absolute;z-index:-2;inset:12px 10px -16px;
  border-radius:inherit;pointer-events:none;
  background:radial-gradient(66% 64% at 50% 72%,rgba(93,74,214,.42) 0%,rgba(93,74,214,.16) 46%,transparent 74%);
  filter:blur(22px);opacity:.9;
  transition:opacity .34s var(--w-ease)}
/* the card face */
.ig-stat::after{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(158deg,#ffffff 0%,#f7f5ff 54%,#efeaff 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             inset 0 0 0 1px rgba(111,95,224,.20),
             0 18px 40px -18px rgba(111,95,224,.45);
  transition:box-shadow .34s var(--w-ease)}
@media(hover:hover){
  .ig-stat:hover{transform:translateY(-3px)}
  .ig-stat:hover::after{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),
                                   inset 0 0 0 1px rgba(111,95,224,.34),
                                   0 26px 52px -20px rgba(111,95,224,.55)}
  .ig-stat:hover::before{opacity:1}
}

/* the numeral IS the headline. .ig-stat__n holds bare digits only — the count-up
   rewrites its textContent — and .ig-stat__u carries the unit at ~.38em so "99.9"
   stays the hero. NOTHING inside .ig-stat__v may take position, transform or
   display:inline-block: background-clip:text stops covering a descendant painted
   in a later phase and the glyph renders invisible. Nudge with font-size only.
   The scale tick therefore lives on .ig-stat__vwrap, an ANCESTOR of the clipped
   element, which is safe. */
.ig-stat__vwrap{transform-origin:left bottom;transition:transform .34s var(--w-ease)}
.ig-stat__vwrap.is-tick{transform:scale(1.025)}
.ig-stat__v{margin:0;display:flex;align-items:baseline;gap:.08em;width:max-content;
  font-size:clamp(40px,3.6vw,58px);font-weight:var(--w-fw-black);
  letter-spacing:-.045em;line-height:.9;
  background:var(--ig-num-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  transition:filter .34s var(--w-ease)}
/* tabular + lining so the digits don't jitter while the count-up runs */
.ig-stat__n{font:inherit;font-variant-numeric:tabular-nums lining-nums}
.ig-stat__u{font-size:.38em;font-weight:var(--w-fw-bold);letter-spacing:-.02em}
/* the settle: one 340ms brightness + bloom when the count lands. brightness()/
   drop-shadow() work on gradient-clipped text where a colour swap would not. */
.ig-stat__v.is-tick{filter:brightness(1.14) drop-shadow(0 2px 10px rgba(93,74,214,.34))}

.ig-stat__l{margin:0;font-size:clamp(12.5px,.85vw,13.5px);font-weight:var(--w-fw-semi);
  letter-spacing:.02em;color:var(--w-text-2)}

/* the hairline: grow + sheen. It fills from transform-origin:left with scaleX —
   compositor-only, so it can never shift layout — and then ONE soft diagonal
   highlight sweeps it, which is what makes it read as a value settling rather
   than a div getting wider. --ig-i is written per card by integrations.js. */
/* NO margin-top:auto here. Bottom-anchoring the {rule + translation} group aligns
   the translations but rags the RULES, and at 1920 (where the type clamp tops out
   and cards 1-2 wrap to three lines while 3-4 wrap to two) that put four hairlines
   at two different heights across one row. A hairline is a strong horizontal — four
   of them out of line reads as sloppier than a ragged bottom edge of body copy. The
   numeral and claim are fixed-height, so sitting the rule directly under the claim
   aligns all four at every width. */
.ig-stat__rule{position:relative;overflow:hidden;align-self:stretch;
  height:2px;border-radius:2px;
  background:linear-gradient(90deg,#4432bd 0%,#6153dd 58%,rgba(97,83,221,.16) 100%);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .62s cubic-bezier(.22,.9,.3,1);
  transition-delay:calc(var(--ig-i,0) * 100ms + 120ms)}
.ig-stat.is-lit .ig-stat__rule{transform:scaleX(1)}
.ig-stat__rule::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.9) 46%,transparent 78%);
  transform:translateX(-130%)}
.ig-stat.is-lit .ig-stat__rule::after{
  animation:igRuleSheen .9s cubic-bezier(.3,.7,.4,1) forwards;
  animation-delay:calc(var(--ig-i,0) * 100ms + .58s)}
@keyframes igRuleSheen{from{transform:translateX(-130%)}to{transform:translateX(130%)}}

.ig-stat__t{margin:0;font-size:clamp(14px,1vw,15.5px);line-height:1.4;
  font-weight:var(--w-fw-bold);letter-spacing:var(--w-ls-tight);color:var(--w-text)}

/* 4-up needs ~230px of inner width for the translation to hold two lines. Below
   that the rail goes 2-up, and below 560 it goes single-column so the numeral keeps
   display size instead of shrinking into a caption again.

   The single-column card is RESHAPED, not just narrowed. Stacked vertically at full
   width, a 54px numeral leaves ~200px of dead card to its right and the four cards
   run 738px of scroll. Putting the numeral and its claim on one baseline row closes
   that gap and roughly halves the rail's height, while D79's reading order —
   numeral, claim, hairline, translation — survives intact. */
@media(max-width:980px){.ig-stats{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:560px){
  .ig-stats{grid-template-columns:1fr;gap:12px;max-width:480px}
  .ig-stat{display:grid;grid-template-columns:auto 1fr;align-items:baseline;
    column-gap:14px;row-gap:clamp(10px,2.6vw,13px)}
  .ig-stat__vwrap{grid-column:1}
  .ig-stat__l{grid-column:2;justify-self:start}
  .ig-stat__rule{grid-column:1/-1}
  .ig-stat__t{grid-column:1/-1}
  .ig-stat__v{font-size:clamp(42px,12vw,54px)}
}
/* 320 is the narrowest supported width: 320 − 2×20 container pad − 2×20 card pad
   leaves ~240px of inner card, and "Average setup" beside a 42px numeral needs
   ~150px of that. It fits, but the translation is the first thing to run out of
   room, so it drops a step here rather than hyphenating. */
@media(max-width:360px){
  .ig-stat{column-gap:11px;padding-inline:19px}
  .ig-stat__t{font-size:13.5px}
}
/* FAIL OPEN. If IO is unavailable or the OS asks for reduced motion the JS puts
   every card in its FINAL state; these rules make that state correct with no
   moving parts. A rule left at scaleX(0) reads as a broken component, not as
   "animation disabled". */
@media(prefers-reduced-motion:reduce){
  .ig-stat,.ig-stat::before,.ig-stat::after,.ig-stat__v,.ig-stat__vwrap{transition:none}
  .ig-stat:hover{transform:none}
  .ig-stat__rule{transition:none;transform:scaleX(1)}
  .ig-stat__rule::after,.ig-stat.is-lit .ig-stat__rule::after{animation:none;opacity:0}
}

.ig-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:clamp(40px,4.4vw,60px) auto 0;max-width:1040px}
.ig-filter__tab{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:100px;font-size:13.5px;font-weight:var(--w-fw-semi);color:var(--w-text-2);background:var(--w-card);border:1px solid var(--w-line);box-shadow:var(--w-shadow-sm);cursor:pointer;transition:transform .28s var(--w-ease),box-shadow .28s var(--w-ease),color .2s ease,background .2s ease,border-color .2s ease}
.ig-filter__tab:hover{color:var(--w-text);border-color:var(--w-brand-line);transform:translateY(-2px);box-shadow:var(--w-shadow-md)}
.ig-filter__tab.is-active{background:var(--w-glass-tint);color:#fff;border-color:transparent;box-shadow:var(--w-shadow-md)}
.ig-filter__n{font-size:11.5px;font-weight:var(--w-fw-bold);padding:1px 7px;border-radius:100px;background:var(--w-brand-soft);color:var(--w-brand)}
.ig-filter__tab.is-active .ig-filter__n{background:rgba(255,255,255,.18);color:#fff}

.ig-catdesc{max-width:760px;margin:clamp(30px,3vw,44px) auto 0;text-align:center;padding:22px 30px;border-radius:20px;background:var(--w-card);border:1px solid var(--w-line);box-shadow:var(--w-shadow-sm)}
.ig-catdesc h3{font-size:19px;font-weight:var(--w-fw-bold);color:var(--w-text)}
.ig-catdesc p{margin-top:6px;font-size:14.5px;line-height:1.55;color:var(--w-text-2)}

.ig-wall{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))!important;margin-top:clamp(30px,3vw,44px)}
.ig-int{gap:14px;min-height:0;padding:clamp(22px,1.8vw,28px);background:#fff;transition:transform .3s var(--w-ease),box-shadow .3s var(--w-ease),border-color .3s var(--w-ease),opacity .35s ease}
.ig-int:hover{transform:translateY(-6px);box-shadow:var(--w-shadow-lg);border-color:var(--w-brand-line)}
.ig-int:focus-visible{outline:2px solid var(--w-focus);outline-offset:3px}
.ig-int[hidden]{display:none!important}
.ig-int.is-enter{opacity:0;transform:translateY(14px)}
.ig-int__badge{position:absolute;top:16px;right:16px;padding:4px 10px;border-radius:100px;font-size:10px;font-weight:var(--w-fw-bold);text-transform:uppercase;letter-spacing:.04em;color:#fff;background:var(--w-grad-brand);box-shadow:var(--w-shadow-sm)}
.ig-int__head{display:flex;align-items:flex-start;gap:14px}
.ig-int__badge + .ig-int__head{padding-right:64px}
.ig-int__logo{flex:none;width:52px;height:52px;border-radius:14px;background:#fff;border:1px solid var(--w-line);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ig-int__logo img{width:34px;height:34px;object-fit:contain}
.ig-int__meta{min-width:0}
.ig-int__cat{display:block;font-size:10.5px;font-weight:var(--w-fw-bold);text-transform:uppercase;letter-spacing:.05em;color:var(--w-brand)}
.ig-int__name{margin-top:3px;font-size:17px;font-weight:var(--w-fw-bold);color:var(--w-text)}
.ig-int__body{font-size:13.5px;line-height:1.55;color:var(--w-text-2);flex-grow:1}
.ig-int__foot{margin-top:auto;padding-top:6px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.ig-int__link{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:var(--w-fw-semi);color:var(--w-brand);text-decoration:none;transition:gap .25s ease}
.ig-int__link .w-icon{width:14px;height:14px}
.ig-int__link:hover{gap:9px}
@media(max-width:640px){
  .ig-wall{grid-template-columns:1fr!important}
  /* PRE-EXISTING 320 OVERFLOW, found 2026-08-05 while gating the stat rail — not
     caused by it, but it fails the eight-breakpoint no-overflow rule so it is fixed
     here. Arithmetic: at 320 the container is 320 − 2×20 pad = 280. A grid item
     defaults to min-width:auto, so the 1fr track cannot shrink below the widest
     item's min-content — the .ig-int__foot row (category tag + "Learn more", which
     do not wrap) measures 301.688px. The track therefore resolved to 301.688 and
     every card hung 1.7px past the viewport.
     min-width:0 lets the track collapse to the real 280; flex-wrap on the foot
     stops the tag and link overflowing INSIDE the card once it does. Both are
     scoped to the single-column range, so no wider layout can move. */
  .ig-wall>.ig-int{min-width:0}
  .ig-int__foot{flex-wrap:wrap}
}