@import url("/tokens.css");
@import url("/form-selection-preview.css");

.background{object-position:center center}
.intro{left:clamp(55px,5.8vw,98px);width:310px}
.intro h1{font-size:clamp(45px,3.9vw,66px)}
.card{bottom:15.5%;width:18.8%;min-width:200px;padding-top:76px}
.card--wave{left:41.3%}
.card--silk{left:60.7%}
.card--volume{left:80.1%}
.progress i{background:var(--accent)}
@media(max-width:900px){
/* Шаг 4 (2026-08-31): mobile-паттерн «тип Б» — 3 отдельные панели-портрета.
   Раскладка/section-nav/рамка — из общего блока COLOR/FORM/MOVEMENT в
   responsive-shell.css (наследуется через .form-screen). Здесь — только
   специфика movement: свои картинки панелей и сдвиг фона.
   Селекторы main.form-screen>.cards>.card--… — специфичность выше общего
   .form-screen .card::before, поэтому перебивают. */
.background{object-position:0 center!important}
main.form-screen>.cards>.card--wave::before{background-image:url("/movement-panel-wave.png")!important}
main.form-screen>.cards>.card--silk::before{background-image:url("/movement-panel-silk.png")!important}
main.form-screen>.cards>.card--volume::before{background-image:url("/movement-panel-volume.png")!important}
}