html,body{margin:0;padding:0;}
  body{font-family:Montserrat,system-ui,-apple-system,sans-serif;color:#b4b4bd;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
  a{color:#f4f4f6;text-decoration:none;}
  /* ACOTADA A PROPOSITO — no volver a dejarla suelta.
     Antes ponia  a:not(.dsBtn):hover{color:#fff}  sin acotar. Con especificidad
     (0,2,1) le ganaba a la clase de CUALQUIER boton del sitio y le pintaba el
     texto de BLANCO: sobre los botones de fondo claro (banner "Explore
     Connectors" / "Join the Waitlist", los cinco "See More" y el CTA del heroe)
     el texto desaparecia — contraste medido 1.00.
     Ahora solo alcanza a enlaces de TEXTO y solo dentro de las secciones de esta
     pagina ([data-vs]). Los :not() dejan fuera todo lo que sea un boton.
     NOTA: no sirve arreglarlo tocando el hover de .dsx-cta-btn en el Designer;
     esa regla ya vale #030303 y pierde por especificidad. Hay que acotar AQUI. */
  [data-vs] a:not(.dsBtn):not(.w-button):not(.dsx-cta-btn):not(.dsc-btn):hover{color:#ffffff;}
  [data-ring]{position:relative;}
  [data-ring]::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--ring,transparent);pointer-events:none;
    -webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-clip:content-box,border-box;-webkit-mask-composite:xor;
    mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-clip:content-box,border-box;mask-composite:exclude;}
  .dsBtn--primary:hover,.dsBtn--primary:hover .dsBtn__label{color:#030303;}
  .dsBtn--secondary:hover,.dsBtn--secondary:hover .dsBtn__label{color:#f4f4f6;}
  a [data-arrow]{transition:transform 220ms cubic-bezier(.16,1,.3,1);}
  a:hover [data-arrow]{transform:translate(2px,-2px);}
  *{box-sizing:border-box;}
  :focus-visible{outline:1px solid #0cd4fe;outline-offset:3px;border-radius:8px;}
  @keyframes dsx-l{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
  @keyframes dsx-r{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
  @keyframes dsx-up{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
  @keyframes dsx-dn{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}
  @keyframes dsx-sweep{0%{transform:translate3d(-120%,0,0)}55%,100%{transform:translate3d(320%,0,0)}}
  @keyframes dsx-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes dsx-flow{to{stroke-dashoffset:-40}}
  @keyframes dsx-pulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.45)}}
  @keyframes dsx-holo{0%{background-position:0% 50%}100%{background-position:200% 50%}}
  @property --dsx-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
  @property --dsx-shift{syntax:'<percentage>';inherits:false;initial-value:0%}
  @keyframes dsx-ang{to{--dsx-ang:360deg}}
  @keyframes dsx-shift{to{--dsx-shift:100%}}
  @keyframes dsx-drift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
  @keyframes dsx-spin{to{transform:rotate(360deg)}}
  @keyframes dsx-shine{0%{transform:translate3d(-160%,0,0) skewX(-18deg)}100%{transform:translate3d(420%,0,0) skewX(-18deg)}}
  @media (max-width:940px){
    [data-cc="grid"]{display:flex!important;flex-direction:column;gap:18px;}
    [data-cc="card"]{display:flex!important;flex-direction:column;}
    [data-x="nav"]{display:none!important;}
    [data-x="spine"]{grid-template-columns:1fr!important;}
    [data-x="split"]{grid-template-columns:1fr!important;}
    [data-cc="score"]{display:flex!important;flex-direction:column;grid-row:auto!important;}
    [data-cc="score"] > *{min-width:0;}
    [data-x="score-head"]{flex-wrap:wrap;gap:12px;}
    [data-x="score-pill"]{min-width:0!important;}
    [data-x="hero-grid"]{grid-template-columns:1fr!important;}
    [data-x="hero-cols"]{grid-template-columns:1fr!important;}
  }
  @media (max-width:1040px){ [data-bento] > *{grid-column:span 6!important;} }
  @media (max-width:680px){ [data-bento] > *{grid-column:span 12!important;} }
  input[type="range"][data-dsx="rng"]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer;}
  input[type="range"][data-dsx="rng"]::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:rgba(255,255,255,.12);}
  input[type="range"][data-dsx="rng"]::-moz-range-track{height:4px;border-radius:999px;background:rgba(255,255,255,.12);}
  input[type="range"][data-dsx="rng"]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:#f4f4f6;box-shadow:0 0 0 4px rgba(241,43,204,.22);}
  input[type="range"][data-dsx="rng"]::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:#f4f4f6;box-shadow:0 0 0 4px rgba(241,43,204,.22);}
  @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;} }

/* ============ vs Supermetrics — layout nativo (Sources / Destinations) ============ */
.dsx-vs-sec{position:relative;z-index:1;padding:clamp(3rem,2rem + 3vw,4.5rem) 0}
.dsx-vs-wrap{max-width:1280px;margin:0 auto;padding:0 clamp(1.25rem,.9rem + 1.6vw,2rem)}
.dsx-vs-ring{position:relative;border-radius:16px;padding:1px;--ring:linear-gradient(150deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.07) 46%,rgba(255,255,255,.04) 100%)}
.dsx-vs-glass{position:relative;border-radius:15px;background:rgba(9,9,13,.24);backdrop-filter:blur(22px);
 box-shadow:rgba(255,255,255,.2) -1px -1px 2px inset,rgba(255,255,255,.05) 1px 1px 1px inset,rgba(255,255,255,.043) 0 -22px 48px inset,rgba(255,255,255,.02) 0 22px 48px inset,rgba(0,0,0,.5) 0 22px 58px;
 overflow:hidden}
.dsx-vs-split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:stretch}
.dsx-vs-left{position:relative;padding:clamp(1.75rem,1.3rem + 1.8vw,2.75rem);display:flex;flex-direction:column;justify-content:center}
.dsx-vs-eyebrow{margin:0 0 10px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#82828f}
.dsx-vs-title{margin:0 0 14px;font-size:clamp(1.5rem,1.2rem + 1.4vw,2.25rem);line-height:1.12;letter-spacing:-.025em;font-weight:700;color:#f4f4f6}
.dsx-vs-sub{margin:0 0 22px;font-size:15px;line-height:1.6;color:#b4b4bd;max-width:42ch}
/* rail con máscara de desvanecido arriba/abajo */
.dsx-vs-rail{position:relative;min-width:0;height:420px;display:flex;gap:12px;padding:20px;
 -webkit-mask-image:linear-gradient(transparent 0%,rgba(0,0,0,.035) 3%,rgba(0,0,0,.094) 5%,rgba(0,0,0,.184) 7%,rgba(0,0,0,.306) 9%,rgba(0,0,0,.447) 11%,rgba(0,0,0,.604) 13%,rgba(0,0,0,.75) 15%,rgba(0,0,0,.863) 17%,rgba(0,0,0,.94) 19%,rgba(0,0,0,.984) 21%,#000 24%,#000 76%,rgba(0,0,0,.984) 79%,rgba(0,0,0,.94) 81%,rgba(0,0,0,.863) 83%,rgba(0,0,0,.75) 85%,rgba(0,0,0,.604) 87%,rgba(0,0,0,.447) 89%,rgba(0,0,0,.306) 91%,rgba(0,0,0,.184) 93%,rgba(0,0,0,.094) 95%,rgba(0,0,0,.035) 97%,transparent 100%);
 mask-image:linear-gradient(transparent 0%,rgba(0,0,0,.035) 3%,rgba(0,0,0,.094) 5%,rgba(0,0,0,.184) 7%,rgba(0,0,0,.306) 9%,rgba(0,0,0,.447) 11%,rgba(0,0,0,.604) 13%,rgba(0,0,0,.75) 15%,rgba(0,0,0,.863) 17%,rgba(0,0,0,.94) 19%,rgba(0,0,0,.984) 21%,#000 24%,#000 76%,rgba(0,0,0,.984) 79%,rgba(0,0,0,.94) 81%,rgba(0,0,0,.863) 83%,rgba(0,0,0,.75) 85%,rgba(0,0,0,.604) 87%,rgba(0,0,0,.447) 89%,rgba(0,0,0,.306) 91%,rgba(0,0,0,.184) 93%,rgba(0,0,0,.094) 95%,rgba(0,0,0,.035) 97%,transparent 100%);
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.dsx-vs-col{flex:1 1 0;min-width:0;overflow:hidden}
.dsx-vs-track{display:flex;flex-direction:column;gap:12px;will-change:transform}
.dsx-vs-col:nth-child(1) .dsx-vs-track{animation:dsx-up 40s linear infinite}
.dsx-vs-col:nth-child(2) .dsx-vs-track{animation:dsx-down 46s linear infinite}
.dsx-vs-col:nth-child(3) .dsx-vs-track{animation:dsx-up 52s linear infinite}
.dsx-vs-rail:hover .dsx-vs-track{animation-play-state:paused}
@keyframes dsx-up{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@keyframes dsx-down{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}
/* chip de conector / destino */
.dsx-chip{position:relative;display:flex;align-items:center;gap:10px;padding:11px 14px 11px 11px;border-radius:14px;
 border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);overflow:hidden;
 transition:transform 640ms cubic-bezier(.19,1,.22,1),border-color 220ms}
.dsx-chip:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.22)}
.dsx-chip-halo{position:absolute;left:-14px;top:-22px;width:84px;height:70px;
 background:radial-gradient(circle at 50% 50%,var(--halo,#8E8E93) 0%,transparent 68%);filter:blur(20px);opacity:.42;pointer-events:none}
.dsx-chip-ico{position:relative;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.06);
 border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;flex:0 0 auto}
.dsx-chip-ico img{width:17px;height:17px;object-fit:contain;display:block}
.dsx-chip-name{position:relative;flex:1 1 0;min-width:0;font-size:12.5px;line-height:1.32;font-weight:500;color:#f4f4f6;overflow-wrap:anywhere}
/* marquee horizontal de destinos */
.dsx-dest-rail{position:relative;overflow:hidden;padding:8px 0;
 -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%)}
.dsx-dest-track{display:flex;gap:14px;width:max-content;animation:dsx-loop-l 46s linear infinite;will-change:transform}
.dsx-dest-rail:hover .dsx-dest-track{animation-play-state:paused}
.dsx-dest-chip{flex:0 0 auto;padding:12px 20px 12px 12px}
@media(max-width:900px){
 .dsx-vs-split{grid-template-columns:1fr}
 .dsx-vs-rail{height:340px}
 .dsx-vs-col:nth-child(3){display:none}
}
@media(max-width:560px){ .dsx-vs-col:nth-child(2){display:none} .dsx-vs-rail{height:300px} }
@media(prefers-reduced-motion:reduce){ .dsx-vs-track,.dsx-dest-track{animation:none!important} }

/* la animación va en la lista interna de Webflow (w-dyn-items), no en el envoltorio */
.dsx-vs-col:nth-child(1) .w-dyn-items.dsx-vs-track{animation:dsx-up 40s linear infinite}
.dsx-vs-col:nth-child(2) .w-dyn-items.dsx-vs-track{animation:dsx-down 46s linear infinite}
.dsx-vs-col:nth-child(3) .w-dyn-items.dsx-vs-track{animation:dsx-up 52s linear infinite}
.dsx-dest-rail .w-dyn-items.dsx-dest-track{animation:dsx-loop-l 46s linear infinite}
.dsx-vs-rail:hover .w-dyn-items,.dsx-dest-rail:hover .w-dyn-items{animation-play-state:paused}


/* El pie de la tarjeta de resena es una fila flex: nombre + cargo. Con la
   tarjeta a 392 px el nombre se quedaba con 44 px y se partia en dos lineas
   («Renzo» / «C.»). Es un nombre, no un parrafo: no se parte. */
[data-vs="testimonials"] .dsx-rev .dsx-rev-name{white-space:nowrap;flex:0 0 auto}