/* ═══════════════════════════════════════════════════════════════════
   1682:97 «VIP Club», 1688:97 — мобильная. Порядок разделов из макета:
   прогресс, ранги, уровни внутри ранга, привилегии, что открывается,
   правила месяца, вопросы.
   Металл ранга задаётся одной парой значений на класс --vr-tint/--vr-ink,
   а карточка, чип и обод знака берут их оттуда: добавить ранг — одна строка.
   ═══════════════════════════════════════════════════════════════════ */
.view--vip { gap: 32px; }
.vip__activation { margin: -16px 0 0; padding: 10px 14px; border-radius: 10px;
  background: rgba(255, 205, 90, .1); color: #ffe2a3; font: 14px/20px 'Work Sans', sans-serif; }
.vip__activation[hidden] { display: none; }
.vip__h1 { margin: 0; font-family: 'Cora', 'Instrument Sans', sans-serif; font-weight: 700;
           font-size: 36px; line-height: 40px; color: var(--white); }

/* Металлы рангов */
.vrank--bronze,   .vrank__chip--bronze,   .vpr__badge--bronze   { --vr-tint: 201, 138, 75;  --vr-ink: #f0b27a; }
.vrank--silver,   .vrank__chip--silver,   .vpr__badge--silver   { --vr-tint: 185, 194, 204; --vr-ink: #e3eaf2; }
.vrank--gold,     .vrank__chip--gold,     .vpr__badge--gold     { --vr-tint: 224, 178, 60;  --vr-ink: #f7d783; }
.vrank--platinum, .vrank__chip--platinum, .vpr__badge--platinum { --vr-tint: 143, 208, 232; --vr-ink: #cdeefa; }
.vrank--diamond,  .vrank__chip--diamond,  .vpr__badge--diamond  { --vr-tint: 127, 156, 255; --vr-ink: #c3cfff; }

/* ── 1683:214 прогресс ──────────────────────────────────────────────
   Слева состояние счёта, справа знак ранга. Градиент идёт по диагонали
   от тона полотна к синему: карточка отделяется от фона без канта. */
/* display перебивает атрибут hidden — у гостя прячем явно */
.vpr[hidden], .vip__guest[hidden] { display: none; }
.vpr { box-sizing: border-box; display: flex; align-items: center; gap: 24px;
       padding: 28px 28px 28px 32px; border-radius: 24px;
       border: 1px solid rgba(255, 255, 255, .08);
       background: linear-gradient(112deg, #111d3f 0%, #192a57 58%, #1a3164 100%); }
.vpr__left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.vpr__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.vpr__eyebrow { font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 14px;
                line-height: 20px; letter-spacing: .84px; text-transform: uppercase;
                color: var(--muted); }
/* Срок сброса — пилюлей: это состояние, а не действие, поэтому без канта */
.vpr__reset { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; flex: none;
              border-radius: 999px; background: rgba(255, 255, 255, .1);
              font-family: 'Work Sans', sans-serif; font-size: 13px; line-height: 20px;
              color: var(--white); font-variant-numeric: tabular-nums; }
.vpr__rank { margin: -6px 0 0; font-family: 'Cora', 'Instrument Sans', sans-serif; font-weight: 700;
             font-size: 38px; line-height: 44px; color: var(--white); }
.vpr__progress { display: flex; flex-direction: column; gap: 10px; }
.vpr__track { display: block; height: 10px; border-radius: 999px;
              background: rgba(255, 255, 255, .12); overflow: hidden; }
.vpr__track i { display: block; height: 100%; border-radius: 999px;
                background: linear-gradient(90deg, #0794ff, #49c2ff); }
.vpr__caption { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
                font-family: 'Work Sans', sans-serif; font-size: 15px; line-height: 22px;
                color: var(--dp-label); }
.vpr__caption b { flex: none; font-weight: 600; color: var(--white); }
.vpr__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vpr__stat { box-sizing: border-box; display: flex; flex-direction: column; gap: 4px;
             padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, .07); }
.vpr__stat span { font-family: 'Work Sans', sans-serif; font-size: 14px; line-height: 20px;
                  color: var(--dp-label); }
.vpr__stat b { font-family: 'Cora', 'Instrument Sans', sans-serif; font-weight: 700;
               font-size: 22px; line-height: 28px; color: var(--white); }
/* Слот знака: обод берёт металл текущего ранга, заливка одна на все —
   иначе пять разных кругов спорят с одной карточкой */
.vpr__badge { flex: none; display: grid; place-items: center; width: 196px; height: 196px;
              border-radius: 999px; border: 2px solid rgba(var(--vr-tint, 201, 138, 75), .45);
              background: radial-gradient(120% 120% at 30% 20%, #2a3560 0%, #141b38 100%); }
.vpr__badge img { display: block; width: 175px; height: 175px; }
/* display у картинки перебивает атрибут hidden — прячем явно */
.vpr__badge img[hidden] { display: none; }

/* ── секция ── */
.vsec { display: flex; flex-direction: column; gap: 16px; }
.vsec__head h2 { margin: 0; font-family: 'Cora', 'Instrument Sans', sans-serif; font-weight: 700;
                 font-size: 24px; line-height: 32px; color: var(--white); }
.vsec__head p { margin: 6px 0 0; max-width: 780px; font-family: 'Work Sans', sans-serif;
                font-size: 15px; line-height: 22px; color: var(--dp-label); }
.vsec__note { margin: 0; font-family: 'Work Sans', sans-serif; font-size: 14px; line-height: 20px;
              color: var(--dp-label); }

/* ── 1684:214 ранги ─────────────────────────────────────────────────
   Степпер отдельной строкой над карточками: точки стоят по центрам
   колонок, линия проходит от первой точки до последней. */
.vstep { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
         align-items: center; height: 12px; margin-bottom: 4px; }
.vstep__line { position: absolute; left: 10%; right: 10%; height: 2px; border-radius: 2px;
               background: #232942; }
.vstep__dot { position: relative; box-sizing: border-box; justify-self: center;
              width: 12px; height: 12px; border-radius: 50%;
              background: var(--page); border: 2px solid #333a5c; }
.vstep__dot.is-on { background: var(--primary); border-color: var(--primary);
                    box-shadow: 0 0 0 4px rgba(7, 148, 255, .16); }

.vranks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.vrank { box-sizing: border-box; display: flex; flex-direction: column; gap: 12px;
         min-height: 280px; padding: 16px; border-radius: 12px;
         background: var(--chrome); border: 1px solid rgba(255, 255, 255, .08); }
/* Текущий ранг: кант в два пикселя и мягкая тень. Заливка сдвинута всего
   на ступень — подсветка не должна перекрикивать содержимое карточки. */
.vrank.is-now { background: #1d2749; border: 2px solid rgba(7, 148, 255, .85); padding: 15px;
                box-shadow: 0 6px 24px rgba(7, 148, 255, .25); }
.vrank__chip { align-self: flex-start; display: inline-flex; align-items: center; height: 28px;
               padding: 0 12px; border-radius: 999px; white-space: nowrap;
               background: rgba(var(--vr-tint, 201, 138, 75), .16); color: var(--vr-ink, #f0b27a);
               font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 14px;
               line-height: 20px; }
.vrank__badge { display: grid; place-items: center; width: 56px; height: 56px; }
.vrank__badge img { display: block; width: 56px; height: 56px; }
.vrank__amount { display: flex; flex-direction: column; gap: 2px; }
.vrank__amount b { font-family: 'Cora', 'Instrument Sans', sans-serif; font-weight: 700;
                   font-size: 20px; line-height: 26px; color: var(--white); }
.vrank__amount span { font-family: 'Work Sans', sans-serif; font-size: 13px; line-height: 18px;
                      color: var(--dp-label); }
.vrank__perks { list-style: none; margin: auto 0 0; padding: 0;
                display: flex; flex-direction: column; gap: 6px; }
.vrank__perks li { position: relative; padding-left: 16px; font-family: 'Work Sans', sans-serif;
                   font-size: 13px; line-height: 19px; color: var(--muted); }
.vrank__perks li::before { content: ''; position: absolute; left: 0; top: 7px; width: 5px;
                           height: 5px; border-radius: 50%;
                           background: rgba(var(--vr-tint, 201, 138, 75), .9); }

/* ── 1685:214 уровни внутри ранга ───────────────────────────────────
   Шестая колонка пустая во всех строках: в ней стоит метка «вы здесь»
   у текущего уровня. Так метка не растягивает строку и не двигает числа. */
.vlv { box-sizing: border-box; display: flex; flex-direction: column; gap: 20px;
       padding: 24px; border-radius: 12px; background: var(--chrome); }
.vlv__tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.vlv__tab { box-sizing: border-box; display: inline-flex; align-items: center; height: 36px;
            padding: 0 18px; cursor: pointer; border: 1px solid transparent; border-radius: 999px;
            background: rgba(255, 255, 255, .06); color: var(--muted);
            font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 14px;
            line-height: 20px; transition: background .15s ease, color .15s ease,
            border-color .15s ease; }
.vlv__tab:hover { background: rgba(255, 255, 255, .1); color: var(--white); }
.vlv__tab.is-on, .vlv__tab.is-on:hover { background: rgba(7, 148, 255, .18);
                                         border-color: rgba(7, 148, 255, .6); color: #7dc9ff; }
.vlv__table { display: flex; flex-direction: column; gap: 8px; }
.vlv__head, .vlv__row { display: grid; align-items: center; gap: 16px;
                        grid-template-columns: 1.1fr 2.1fr 1.5fr 1.4fr 1.7fr 104px; }
.vlv__head { padding: 0 14px; font-family: 'Work Sans', sans-serif; font-weight: 600;
             font-size: 13px; line-height: 18px; letter-spacing: .5px; text-transform: uppercase;
             color: var(--dp-label); }
.vlv__body { display: flex; flex-direction: column; gap: 8px; }
.vlv__row { box-sizing: border-box; padding: 14px 16px; border-radius: 10px;
            border: 1px solid transparent; background: rgba(255, 255, 255, .04);
            font-family: 'Work Sans', sans-serif; font-size: 15px; line-height: 22px;
            color: var(--muted); font-variant-numeric: tabular-nums; }
.vlv__row b { font-weight: 600; color: var(--white); }
.vlv__row i { font-style: normal; color: var(--white); }
.vlv__row.is-now { background: rgba(7, 148, 255, .12); border-color: rgba(7, 148, 255, .55); }
.vlv__row em { justify-self: end; display: inline-flex; align-items: center; height: 24px;
               padding: 0 10px; border-radius: 999px; background: rgba(7, 148, 255, .22);
               font-style: normal; font-weight: 600; font-size: 12px; line-height: 18px;
               white-space: nowrap; color: #9fd5ff; }
.vlv__note { margin: 0; font-family: 'Work Sans', sans-serif; font-size: 13px; line-height: 19px;
             color: var(--dp-label); }
/* Пустая вкладка: числа остальных рангов приходят из документа программы,
   до них показываем причину, а не пустое место */
.vlv__body:empty + .vlv__note, .vlv__empty { color: var(--dp-label); }
.vlv__empty { box-sizing: border-box; display: grid; place-items: center; min-height: 148px;
              padding: 24px; border-radius: 10px; background: rgba(255, 255, 255, .04);
              font-family: 'Work Sans', sans-serif; font-size: 15px; line-height: 22px;
              text-align: center; }

/* ── 1686:214 привилегии ── */
.vperks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vperk { box-sizing: border-box; display: flex; align-items: flex-start; gap: 14px;
         padding: 18px; border-radius: 12px; background: var(--chrome);
         border: 1px solid rgba(255, 255, 255, .06); }
.vperk__ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px;
              border-radius: 10px; background: rgba(7, 148, 255, .12); }
.vperk__ico img { display: block; width: 34px; height: 34px; }
.vperk h3 { margin: 0; font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 15px;
            line-height: 22px; color: var(--white); }
.vperk p { margin: 4px 0 0; font-family: 'Work Sans', sans-serif; font-size: 14px;
           line-height: 20px; color: var(--dp-label); }

/* ── 1686:256 что открывается с рангом ──
   Чип фиксированной ширины: пять строк читаются как таблица, взгляд
   идёт по одной вертикали. */
.vunl { display: flex; flex-direction: column; gap: 8px; }
.vunl__row { box-sizing: border-box; display: flex; align-items: center; gap: 16px;
             padding: 14px 16px; border-radius: 10px; border: 1px solid transparent;
             background: rgba(255, 255, 255, .04); }
.vunl__row.is-now { background: rgba(7, 148, 255, .1); border-color: rgba(7, 148, 255, .4); }
.vunl__row .vrank__chip { flex: none; width: 104px; justify-content: center; align-self: auto; }
.vunl__row p { margin: 0; font-family: 'Work Sans', sans-serif; font-size: 15px; line-height: 22px;
               color: var(--muted); }

/* ── 1687:214 правила месяца ── */
.vrules { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.vrule { box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 18px;
         border-radius: 12px; background: var(--chrome);
         border: 1px solid rgba(255, 255, 255, .06); }
.vrule i { font-family: 'Cora', 'Instrument Sans', sans-serif; font-style: normal; font-weight: 700;
           font-size: 20px; line-height: 26px; color: rgba(7, 148, 255, .7); }
.vrule b { font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 15px;
           line-height: 22px; color: var(--white); }
.vrule p { margin: 0; font-family: 'Work Sans', sans-serif; font-size: 13px; line-height: 19px;
           color: var(--dp-label); }

/* ── 1687:252 вопросы ── */
.vfaq { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 24px; align-items: start; }
.vfaq__tabs { display: flex; flex-direction: column; gap: 4px; }
.vfaq__tab { display: flex; align-items: center; height: 48px; padding: 0 18px;
             border: 0; border-radius: 10px; background: none; cursor: pointer; text-align: left;
             font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 15px;
             line-height: 22px; color: var(--dp-label);
             transition: background .15s ease, color .15s ease; }
.vfaq__tab:hover { color: var(--white); }
.vfaq__tab.is-on { background: #1f2439; color: var(--white); }
.vfaq__list { display: grid; }
.vfaq__group { display: flex; flex-direction: column; gap: 10px; }
.vfaq__group[hidden] { display: none; }
.vfaq__item { box-sizing: border-box; padding: 16px 20px; border-radius: 12px;
              background: var(--chrome); }
.vfaq__item summary { position: relative; display: block; padding-right: 32px; cursor: pointer;
                      list-style: none; font-family: 'Work Sans', sans-serif; font-weight: 600;
                      font-size: 15px; line-height: 22px; color: var(--white); }
.vfaq__item summary::-webkit-details-marker { display: none; }
/* Плюс превращается в минус поворотом одной перекладины — знак меняется
   без второй иконки */
.vfaq__item summary::before, .vfaq__item summary::after {
  content: ''; position: absolute; right: 4px; top: 10px; width: 13px; height: 1.5px;
  background: var(--muted); transition: transform .18s ease, opacity .18s ease; }
.vfaq__item summary::after { transform: rotate(90deg); }
.vfaq__item[open] summary::after { transform: rotate(0); opacity: 0; }
.vfaq__item p { margin: 10px 0 0; font-family: 'Work Sans', sans-serif; font-size: 14px;
                line-height: 21px; color: var(--dp-label); }

.vip__terms { align-self: center; padding: 6px 8px; border: 0; background: none; cursor: pointer;
              font-family: 'Work Sans', sans-serif; font-size: 15px; line-height: 22px;
              color: var(--dp-label); transition: color .15s ease; }
.vip__terms:hover { color: var(--white); text-decoration: underline; }

/* Пять карточек ранга держат «100M – 600M» одной строкой до 1439.
   Ниже — три колонки, и степпер снимаем: линия через разрыв ряда лжёт. */
@media (max-width: 1439px) {
  .vranks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vstep { display: none; }
  .vrules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vpr__badge { width: 160px; height: 160px; }
  .vpr__badge img { width: 142px; height: 142px; }
}

@media (max-width: 1199px) {
  .vperks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vranks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vrules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Таблица уровней в двух колонках уже не читается сеткой — на планшете
     она уходит в горизонтальную прокрутку вместе с шапкой */
  .vlv__table { overflow-x: auto; scrollbar-width: none; }
  .vlv__table::-webkit-scrollbar { display: none; }
  .vlv__head, .vlv__row { min-width: 720px; }
}

/* ═══════════════════════════════════════════════════════════════════
   1688:97 — VIP на 402. Раскладка другая, не сжатая десктопная:
   знак ранга уходит в строку с именем, ранги едут лентой, таблица
   уровней разворачивается в карточки, привилегии и правила собираются
   в одну плашку. Ставим блок в конце файла: он перебивает десктопные
   правила выше по каскаду, а не спорит со специфичностью.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .view--vip { gap: 28px; }
  .vip__h1 { font-size: 30px; line-height: 36px; }

  /* Прогресс: знак 72 встаёт слева от имени ранга. display:contents
     раскрывает .vpr__left в ту же сетку — иначе знак не подставить
     к строке, которая лежит внутри соседней колонки. */
  .vpr { display: grid; grid-template-columns: 72px minmax(0, 1fr);
         gap: 16px 12px; padding: 19px; border-radius: 16px; }
  .vpr__left { display: contents; }
  .vpr__top { grid-column: 1 / -1; }
  .vpr__badge { grid-column: 1; grid-row: 2; width: 72px; height: 72px; border-width: 2px; }
  .vpr__badge img { width: 62px; height: 62px; }
  .vpr__rank { grid-column: 2; grid-row: 2; align-self: center; margin: 0;
               font-size: 26px; line-height: 34px; }
  .vpr__progress, .vpr__stats { grid-column: 1 / -1; }
  .vpr__caption { flex-direction: column; align-items: flex-start; gap: 2px;
                  font-size: 13px; line-height: 18px; }
  .vpr__stats { gap: 8px; }
  .vpr__stat { padding: 10px; border-radius: 10px; }
  .vpr__stat span { font-size: 12px; line-height: 16px; }
  /* «Weekly cashback» в 105 не влезает одной строкой, и число уезжало
     ниже соседних. Прижимаем значения к низу — коробки и так одной высоты. */
  .vpr__stat b { margin-top: auto; font-size: 17px; line-height: 21px; }
  .vpr__reset { height: 26px; font-size: 12px; }

  .vsec { gap: 12px; }
  .vsec__head h2 { font-size: 20px; line-height: 27px; }
  .vsec__head p { font-size: 13px; line-height: 18px; }

  /* Ранги лентой: карточка 158, следующая выглядывает — видно, что
     список листается. Список привилегий здесь снят: пять пунктов в
     карточку 158 не встают, а ранг узнают по сумме. */
  .vranks { display: flex; gap: 10px; overflow-x: auto;
            margin: 0 calc(-1 * var(--edge, 16px)); padding: 0 var(--edge, 16px);
            scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge, 16px);
            -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .vranks::-webkit-scrollbar { display: none; }
  .vrank { flex: 0 0 158px; min-height: 0; height: 169px; gap: 10px; padding: 16px;
           scroll-snap-align: start; }
  .vrank.is-now { padding: 15px; }
  .vrank__badge, .vrank__badge img { width: 44px; height: 44px; }
  .vrank__badge { order: -1; }
  .vrank__chip { height: 25px; }
  .vrank__amount b { font-size: 16px; line-height: 21px; }
  .vrank__amount span { font-size: 12px; line-height: 17px; }
  .vrank__perks { display: none; }

  /* Уровни: строка таблицы становится карточкой. Шапку убираем — подписи
     переезжают к числам из data-l, иначе на 402 колонки безымянные. */
  .vlv { padding: 0; gap: 12px; background: none; }
  .vlv__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
               margin: 0 calc(-1 * var(--edge, 16px)); padding: 0 var(--edge, 16px); }
  .vlv__tabs::-webkit-scrollbar { display: none; }
  .vlv__tab { flex: none; height: 35px; }
  /* Планшетный блок выше пускает таблицу в горизонтальную прокрутку и
     держит строку в 720 — здесь строки больше нет, есть карточки */
  .vlv__table { gap: 12px; overflow: visible; }
  .vlv__head { display: none; }
  .vlv__row { min-width: 0; }
  .vlv__body { gap: 12px; }
  .vlv__row { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
              gap: 12px; padding: 15px 17px; border-radius: 12px;
              background: var(--chrome); border: 1px solid rgba(255, 255, 255, .06); }
  .vlv__row.is-now { background: rgba(7, 148, 255, .1); border-color: rgba(7, 148, 255, .5); }
  .vlv__row b { grid-column: 1 / -1; font-size: 16px; line-height: 22px; }
  .vlv__row span, .vlv__row i { display: block; font-size: 15px; line-height: 21px;
                                color: var(--white); }
  .vlv__row span::before, .vlv__row i::before {
    content: attr(data-l); display: block; margin-bottom: 2px; font-weight: 400;
    font-size: 12px; line-height: 17px; color: var(--dp-label); }
  /* Метка «вы здесь» — в строку заголовка, поверх сетки: в ячейке она
     сдвигала бы числа на полколонки */
  .vlv__row em { position: absolute; right: 17px; top: 15px; }
  .vlv__note { font-size: 12px; line-height: 17px; }

  /* Привилегии и правила — одной плашкой: шесть и пять отдельных карточек
     на 402 превращают экран в лестницу из кантов */
  .vperks, .vrules { display: block; padding: 7px 0; border-radius: 12px;
                     background: var(--chrome); }
  .vperk, .vrule { border: 0; background: none; padding: 13px 17px; border-radius: 0; }
  .vperk { gap: 12px; }
  .vperk p { font-size: 13px; line-height: 17px; }
  /* Номер — кружком слева, заголовок и текст одной колонкой справа.
     Сеткой, а не флексом: во флексе заголовок и текст лежат в одном
     потоке с номером и переносятся каждый по отдельности. */
  .vrule { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 3px 12px;
           align-items: start; }
  .vrule i { grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center;
             width: 30px; height: 30px; border-radius: 50%;
             background: rgba(7, 148, 255, .14); font-family: 'Work Sans', sans-serif;
             font-weight: 600; font-size: 13px; line-height: 17px; color: #7dc9ff; }
  .vrule b, .vrule p { grid-column: 2; }
  .vrule b { align-self: center; }

  /* Чип ранга встаёт над строкой привилегий: рядом с ней на 402
     остаётся 250 и текст ломается на четыре строки */
  .vunl__row { flex-direction: column; align-items: flex-start; gap: 8px;
               padding: 13px 15px; }
  .vunl__row .vrank__chip { width: auto; }
  .vunl__row p { font-size: 13px; line-height: 18px; }

  /* Вопросы: разделы лентой сверху, ответы под ними */
  .vfaq { grid-template-columns: 1fr; gap: 12px; }
  .vfaq__tabs { flex-direction: row; flex-wrap: nowrap; gap: 8px; overflow-x: auto;
                scrollbar-width: none;
                margin: 0 calc(-1 * var(--edge, 16px)); padding: 0 var(--edge, 16px); }
  .vfaq__tabs::-webkit-scrollbar { display: none; }
  .vfaq__tab { flex: none; height: 33px; padding: 0 14px; border-radius: 999px;
               background: rgba(255, 255, 255, .06); white-space: nowrap; font-size: 14px; }
  .vfaq__tab.is-on { background: var(--pick-bg);
                     box-shadow: inset 0 0 0 1px var(--pick-line); color: var(--white); }
  .vfaq__group { gap: 12px; }
  .vfaq__item { padding: 15px 17px; }
  .vfaq__item summary { font-size: 14px; line-height: 20px; }
  .vfaq__item p { font-size: 13px; line-height: 17px; }

  /* Условия — кнопкой во всю ширину: на тач-экране ссылка в 15px
     не цель, а лотерея */
  .vip__terms { align-self: stretch; height: 48px; border-radius: 10px;
                border: 1px solid var(--white-10); font-weight: 600; color: var(--white); }
}