/* Occhielli di sezione del sito (gc-pages/site-eyebrow.js, 16/10/26). Ogni sezione si apre come una tappa del motore:
   le tessere coi loghi veri degli strumenti che ci lavorano (staccate come le tappe della mappa dell'hero; i volti
   sovrapposti come nel bottone Book a call), la parola in maiuscolo e il filo che prosegue; al centro un filo per lato.
   La parola e i fili prendono il colore del testo della sezione (chiara o scura); allineamento e anello dei volti li
   sistema assets/gc-eyebrow.js. Entrata: le tessere passano dal grigio al colore una dopo l'altra con l'anello blu che le
   attraversa, poi il filo entra blu e torna neutro. Senza JS e con reduced motion tutto e' gia' fermo a colori. */
.gc-eb{--gc-eb-bg:#050505;--gc-eb-on:#4F80FF;display:flex;align-items:center;gap:16px;margin:0;
  font-size:16px;font-weight:500;letter-spacing:0.16em;line-height:1.25;text-transform:uppercase;text-align:left}
.gc-eb.gc-eb--c{justify-content:center;text-align:center}
.gc-eb-l{min-width:0;opacity:.84}
.gc-eb-s{display:inline-flex;align-items:center;gap:6px;flex:none}
.gc-eb-s>span{position:relative;display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:9px;overflow:hidden;
  background:#17171A;color:#E4E4E7;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1);
  transition:filter .45s ease calc(var(--i,0) * .12s),opacity .45s ease calc(var(--i,0) * .12s)}
.gc-eb-s img{display:block;width:100%;height:100%;object-fit:cover}
.gc-eb-s .gc-eb-m img{width:66%;height:66%;object-fit:contain}
.gc-eb-s .gc-eb-i svg{width:18px;height:18px}
.gc-eb-s .gc-eb-b{width:auto;padding:0 12px}
.gc-eb-s .gc-eb-b img{width:auto;height:14px;object-fit:contain}
.gc-eb-s .gc-eb-f{border-radius:50%;box-shadow:0 0 0 2px var(--gc-eb-bg)}
.gc-eb-s .gc-eb-f+.gc-eb-f{margin-left:-14px}
/* il filo prende solo lo spazio libero (base 0, al massimo 180 px): la parola va a capo solo se non entra con le tessere */
.gc-eb:before,.gc-eb:after{content:"";flex:1 1 0;max-width:180px;height:1px;background-color:currentColor;opacity:.3;transform-origin:0 50%;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent);mask-image:linear-gradient(90deg,#000,transparent);
  transition:transform .6s cubic-bezier(.22,1,.36,1) calc(var(--n,1) * .12s),background-color .6s ease calc(var(--n,1) * .12s + .6s),
    opacity .6s ease calc(var(--n,1) * .12s + .6s)}
.gc-eb:before{display:none;order:-1;transform-origin:100% 50%;-webkit-mask-image:linear-gradient(270deg,#000,transparent);mask-image:linear-gradient(270deg,#000,transparent)}
.gc-eb.gc-eb--c:before{display:block}
/* pillole a due parti diventate occhielli (16/10/26, Federico: "non si capisce se e' un bottone da premere"): niente capsula
   ne' fondo; la parola principale piena, la seconda piu' tenue dopo un filo verticale sottile. Se era un link resta un link
   (tessere e parole) con una freccia che si sposta al passaggio. Le bandiere di careers stanno nelle tessere come i loghi. */
.gc-eb--pill .gc-eb-l{display:inline-flex;flex-wrap:wrap;align-items:center;column-gap:14px;row-gap:4px;opacity:1}
/* i fili della pillola hanno una misura loro (72 px, si stringono solo se manca spazio): anche dove il contenitore e'
   stretto quanto il testo l'occhiello ha il suo filo, come in tutte le altre pagine; la parola non va a capo al computer */
.gc-eb.gc-eb--pill{max-width:100%}
.gc-eb.gc-eb--pill:before,.gc-eb.gc-eb--pill:after{flex:0 1 auto;width:72px}
.gc-eb--pill .gc-eb-l b{text-wrap:balance}
@media (min-width:701px){.gc-eb--pill .gc-eb-l,.gc-eb--pill .gc-eb-a{flex:none}}
.gc-eb--pill.gc-eb--c .gc-eb-l{justify-content:center}
.gc-eb-l b{font-weight:600}
.gc-eb-q{display:inline-flex;align-items:center;gap:14px;font-weight:500;opacity:.64}
.gc-eb-q:before{content:"";flex:none;width:1px;height:15px;background-color:currentColor;opacity:.55}
.gc-eb-a{display:inline-flex;align-items:center;gap:16px;min-width:0;color:inherit;text-decoration:none;border-radius:10px}
.gc-eb-go{display:inline-grid;place-items:center;flex:none;opacity:.6;transition:transform .2s ease,opacity .2s ease}
.gc-eb-go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gc-eb-a:hover .gc-eb-go,.gc-eb-a:focus-visible .gc-eb-go{opacity:1;transform:translateX(3px)}
.gc-eb-a:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.gc-eb-a:focus-visible{outline:2px solid #4F80FF;outline-offset:6px}
.gc-eb-s .gc-eb-fl img{object-fit:cover}
/* entrata: gc-eb--wait (sotto la piega) -> gc-eb--go quando la sezione arriva in vista */
.gc-eb.gc-eb--wait .gc-eb-s>span{filter:grayscale(1);opacity:.45;transition:none}
.gc-eb.gc-eb--wait:before,.gc-eb.gc-eb--wait:after{transform:scaleX(0);background-color:var(--gc-eb-on);opacity:1;transition:none}
.gc-eb.gc-eb--go .gc-eb-s>span{animation:gcEbRing .55s ease calc(var(--i,0) * .12s)}
@keyframes gcEbRing{0%,50%{box-shadow:0 0 0 2px var(--gc-eb-bg),0 0 0 3.5px var(--gc-eb-on)}100%{box-shadow:0 0 0 2px var(--gc-eb-bg),0 0 0 3.5px transparent}}
/* telefono: tessere piu' piccole e, nelle sezioni centrate, niente fili (la parola resta su una riga) */
@media (max-width:700px){
  .gc-eb{gap:12px;letter-spacing:0.14em}
  /* pillole sul telefono: niente fili, solo la parola principale (con un numero, "53 TERMS", restano insieme) */
  /* la frase della home ("Trusted by 400+ B2B clients") deve stare su una riga a 390: spaziatura piu' stretta, al massimo
     due volti sovrapposti, la freccia piu' vicina */
  .gc-eb.gc-eb--pill{letter-spacing:0.06em}
  .gc-eb-a{gap:10px}
  .gc-eb--pill .gc-eb-s .gc-eb-f:nth-child(n+3){display:none}
  .gc-eb.gc-eb--pill:before,.gc-eb.gc-eb--pill:after{display:none}
  .gc-eb--pill .gc-eb-q{display:none}
  .gc-eb--pill.gc-eb--num .gc-eb-l{column-gap:8px}
  .gc-eb--pill.gc-eb--num .gc-eb-q{display:inline-flex}
  .gc-eb--pill.gc-eb--num .gc-eb-q:before{display:none}
  .gc-eb.gc-eb--c:before,.gc-eb.gc-eb--c:after{display:none}
  .gc-eb-s{gap:5px}
  .gc-eb-s>span{width:28px;height:28px;border-radius:8px}
  .gc-eb-s .gc-eb-i svg{width:16px;height:16px}
  .gc-eb-s .gc-eb-f+.gc-eb-f{margin-left:-12px}
  .gc-eb-s .gc-eb-b{padding:0 8px}
  .gc-eb-s .gc-eb-b img{height:11px}
}
@media (max-width:759.98px){.gc-eb--nosm{display:none}}
@media (prefers-reduced-motion:reduce){.gc-eb-s>span,.gc-eb:before,.gc-eb:after,.gc-eb-go{transition:none;animation:none}}