/* Кроки «Як ми працюємо» на сторінках-пропозиціях (ol.n-steps; рух — studio/offer-steps.js):
   рядки по черзі піднімаються й проявляються, лінія під рядком прокреслюється зліва направо,
   номер великий; при наведенні рядок зсувається, номер стає кораловим, праворуч з'являється стрілка. */
main .n-steps{border-top-color:#20221f}
main .n-steps li{position:relative;border-bottom:0;padding:32px 0;transition:background .4s,padding .4s}
main .n-steps li::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:#20221f22;transform:scaleX(var(--ln,1));transform-origin:left;transition:transform 1s cubic-bezier(.77,0,.18,1)}
main .n-steps li span{font-size:clamp(40px,4.4vw,64px);font-weight:300;letter-spacing:-.05em;line-height:1;color:#b8b3aa;transition:color .4s}
main .n-steps li h3{font-size:clamp(22px,2.2vw,34px);font-weight:600;letter-spacing:-.03em;color:#20221f}
main .n-steps li p{color:#55524c;font-size:15px}
main .n-steps li:hover{background:#20221f08;padding-left:18px;padding-right:56px}
main .n-steps li:hover span{color:#f15a24}
main .n-steps li h3::after{content:'↗';position:absolute;right:18px;top:50%;transform:translate(-8px,-50%);opacity:0;color:#f15a24;font-size:22px;transition:opacity .3s,transform .3s}
main .n-steps li:hover h3::after{opacity:1;transform:translate(0,-50%)}
html.os-js main .n-steps li{opacity:0;transform:translateY(34px);--ln:0;transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1),background .4s,padding .4s}
html.os-js main .n-steps li.in{opacity:1;transform:none;--ln:1}
@media(prefers-reduced-motion:reduce){html.os-js main .n-steps li{opacity:1;transform:none;--ln:1}}
/* плашка «Макет головної — безкоштовно» під кроками: «0 грн» великим кораловим, як у «Сцені» */
main .n-free .n-tag{border:0!important;padding:0!important;font-size:clamp(56px,6.5vw,104px)!important;font-weight:700;letter-spacing:-.06em;line-height:1;color:#ef8354!important;background:none!important}