/* Инструкции с вкладками (ru|kz/registratsia-kassy-v-ofd): дополняет page-guide.css (колонка, слайдер, плашки).
   Отступы — как отступы записей Tilda: у каждого блока свои сверху/снизу, соседние складываются. */

.howto { --u: calc(var(--vw, 1vw) * 100 / 1200); padding-bottom: calc(80 * var(--u)); margin-bottom: calc(80 * var(--u)); border-radius: 0 0 calc(40 * var(--u)) calc(40 * var(--u)); }

.howto h1 { padding: 8px 0 48px; font-weight: 500; line-height: 1.23; }
@media (min-width: 900px) { .howto h1 { line-height: 1; } }
.howto h2 { padding: 23px 0 60px; font-size: 40px; font-weight: 600; line-height: 1.2; color: #232323; }
.howto h3 { padding: 8px 0 15px; font-size: 32px; font-weight: 500; line-height: 1; color: #232323; }
.howto h3 > span { font-size: 24px; font-weight: 600; }
.howto__step { padding: 15px 0; }
.howto__step p, .howto__text { font-size: 18px; line-height: 1.45; color: #232323; }
.howto__text { padding: 8px 0 36px; line-height: 1.55; }

.howto__figure { margin: 0; padding: 15px 0 45px; }
.howto__figure img { display: block; width: 100%; height: auto; border-radius: 15px; }
.howto .note { margin: 0 0 30px; }
.howto .note strong { font-weight: 700; }

.howto .slider { padding: 15px 0 59px; }
.howto .slider__captions { margin-top: 27px; padding-top: 14px; border-top-color: #eee; }
.howto .slider__captions p { font-size: 18px; }

/* ---------- вкладки: кнопки на десктопе, список на телефоне (site.js, [data-tabs]) ---------- */
.howto__tabs { padding-top: 10px; }
.howto__tablist { display: flex; flex-wrap: wrap; }
.howto__tablist button {
    margin: 0 15px 15px 0; padding: 14px 10px; border: 0; border-radius: 10px; background: #fff; color: #232323;
    font-size: 12px; line-height: .8; cursor: pointer; transition: background-color .2s, color .2s;
}
.howto__tablist button[aria-selected="true"] { background: var(--c-dark); color: #fff; }
.howto__select { display: none; }

@media (max-width: 980px) {
    .howto__tabs { padding-top: 0; }
    .howto__tablist { display: none; }
    .howto__select { position: relative; display: block; }
    .howto__select select {
        display: block; width: 100%; height: 45px; padding: 0 45px 0 20px; border: 0; border-radius: 0;
        background: var(--c-dark); color: #fff; font: inherit; font-size: 11px; appearance: none; cursor: pointer;
    }
    .howto__select::after {
        content: ''; position: absolute; right: 20px; top: 50%; margin-top: -3px; pointer-events: none;
        border: 5px solid transparent; border-top-color: #fff; border-bottom: 0;
    }
}
@media (max-width: 959px) {
    .howto { --u: min(calc(var(--vw, 1vw) * 100 / 320), 1.6px); padding-bottom: calc(40 * var(--u)); margin-bottom: calc(50 * var(--u)); border-radius: 0 0 calc(30 * var(--u)) calc(30 * var(--u)); }
}
@media (max-width: 899px) {
    .howto h3 { font-size: 48px; line-height: 1.23; }
}
@media (max-width: 640px) {
    .howto { padding-top: 75px; }
    .howto h2, .howto h3 { font-size: 30px; line-height: 1.23; }
    .howto .note { margin-bottom: 15px; line-height: 1.45; }
    .howto__text { padding-bottom: 21px; line-height: 1.45; }
    .howto .slider__captions p { font-size: 12px; font-weight: 400; }
    .howto__figure { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
}