/* Velar Bureau: icons for the "How we work" steps (js/stepic.js) */
.step__ic { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; background: #EEF1F4; color: var(--graphite); transition: background .4s var(--ease), color .4s var(--ease), transform .5s var(--ease); }
.step__ic svg { width: 26px; height: 26px; }
.step.is-on .step__ic { background: var(--signal); color: #0E0F11; }
.step:hover .step__ic { transform: scale(1.05); }
@media (max-width: 720px) { .step__ic { width: 46px; height: 46px; margin-bottom: 14px; } .step__ic svg { width: 22px; height: 22px; } }

/* reviews carousel (js/rvcar.js) */
.rv-grid.rv-car { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; outline: none; }
.rv-grid.rv-car::-webkit-scrollbar { display: none; }
.rv-car > * { flex: 0 0 calc((100% - 16px) / 3); scroll-snap-align: start; min-width: 0; }
.rv-car .rv--cta { grid-column: auto; }
.rv-nav { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.rv-nav__b { display: grid; place-items: center; width: 52px; height: 52px; border: 0; background: var(--graphite); color: #E3E7ED; cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease); }
.rv-nav__b svg { width: 20px; height: 20px; }
.rv-nav__b:hover { background: var(--signal); color: #0E0F11; }
.rv-nav__b:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.rv-nav__c { margin-left: 14px; font-family: var(--fm, monospace); font-size: .82rem; color: var(--slate); }
.rv-nav__c b { color: var(--graphite); font-weight: 500; }
.rv-nav__bar { flex: 1; max-width: 320px; margin-left: auto; height: 2px; background: rgba(14, 15, 17, .12); overflow: hidden; }
.rv-nav__bar i { display: block; height: 100%; background: var(--signal); transform-origin: left; transform: scaleX(.08); transition: transform .4s var(--ease); }
@media (max-width: 1000px) { .rv-car > * { flex-basis: calc((100% - 8px) / 2); } }
@media (max-width: 720px) {
  .rv-car { margin-inline: calc(var(--gx) * -1); padding-inline: var(--gx); scroll-padding-inline: var(--gx); }
  .rv-car > * { flex-basis: 84%; min-height: 300px; }
  .rv-nav__b { width: 46px; height: 46px; }
}