.hero .logostrip{padding:clamp(16px,2.6vh,32px) 0 clamp(20px,3.2vh,40px);}
/* "Your data" cells light up at random, fading in and out of green */
.dcell{transition:fill 1.1s var(--ease);}
.dcell.lit{fill:#BDEFD2;}
.dcell.glow{fill:#5FD896;}
.ip-data.on .dcell.lit{fill:#9BE6BD;}
.ip-data.on .dcell.glow{fill:#22C766;}

/* when Troopers is the selected layer, the agent chips drift around a little */
@media (prefers-reduced-motion:no-preference){
  .iagents.on .ichip{animation:itroop 9s ease-in-out infinite;}
  .iagents.on .ichip.a2{animation-duration:8.2s;animation-delay:-2.1s;}
  .iagents.on .ichip.a3{animation-duration:7.6s;animation-delay:-4.3s;}
  .iagents.on .ichip.a4{animation-duration:8.8s;animation-delay:-5.7s;}
}
@keyframes itroop{0%,100%{transform:translate(0,0)}20%{transform:translate(26px,-14px)}45%{transform:translate(10px,-30px)}70%{transform:translate(-24px,-12px)}85%{transform:translate(-12px,8px)}}

/* How it works tabs: open and close with matched grid-row easing, so the list height barely changes and nothing below jumps */
.layer > span:not(.dot){display:grid;grid-template-rows:auto 0fr;transition:grid-template-rows .5s cubic-bezier(.4,0,.2,1);}
.layer.on > span:not(.dot){grid-template-rows:auto 1fr;}
.layer p{max-height:none !important;min-height:0;overflow:hidden;transition:opacity .35s ease;}
.layer:not(.on) p{opacity:0;}
.layer.on p{opacity:1;transition-delay:.12s;}
/* v10: Customer support chip removed from the hero */
.chip.c5{display:none!important}