/* =====================================================================
   assets/site-b.css — блоки 6А, 7, 8 (тарифы), 8А, 9, 10, 11, 12 (исполнитель B), раунд 4 «Простота» + раунд 5 «Правки Лизы».
   Только свои блоки: каждый селектор начинается с id секции.
   Правила раунда: один акцент на блок; карточки белые сплошные, радиус 20–24, рамка 1 px
   rgba(31,42,51,.08), тень только мягкая; Prata без курсива; списки — сетка «24 px иконка + текст».
   ===================================================================== */

#b6a, #b7, #tariffs, #b8a, #b9, #b10, #b11, #b12 {
  --tx2: #4E5A63;
  --b-line: rgba(31, 42, 51, .08);
  --b-shadow: 0 12px 32px -12px rgba(31, 42, 51, .18);
  --b-shadow-sm: 0 8px 22px -12px rgba(31, 42, 51, .16);
}

/* Настроения — общие классы A (.bg-section / .bg-paper / .bg-golden / .bg-dawn);
   --from — цвет низа предыдущей секции, чтобы верхний край перетекал без шва */
#b6a { --from: #FFFFFF; }
#tariffs { --from: #FFFFFF; }
#b8a { --from: var(--sunset, #FFD9B0); }
#b10 { --from: #FFFFFF; }
#b12 { --from: #FFFFFF; }

/* ---------- 6А — как проходит обучение: пять остановок на одной оси ---------- */
#b6a { padding-top: 48px; padding-bottom: 24px; }
#b6a .blk__lead { margin-bottom: 16px; }
#b6a .b6a-steps { display: grid; gap: 8px; }
#b6a .b6a-step {
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-items: start;
  padding: 10px 12px 12px 8px; border-radius: 20px;
}
/* линия: от центра круга к центру следующего круга (центр = 10 + 28 px от верха шага) */
#b6a .b6a-step:not(:last-child)::after {
  content: ""; position: absolute; left: 35px; top: 38px; width: 2px; height: calc(100% + 8px);
  background: #CFE3EE; border-radius: 2px;
}
#b6a .b6a-step__ico {
  position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: #fff; border: 1px solid var(--b-line); box-shadow: var(--b-shadow-sm);
}
#b6a .b6a-obj { display: block; width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(31, 42, 51, .14)); }
#b6a .b6a-step__txt { min-width: 0; padding-top: 6px; }
#b6a .b6a-step__h { font: 700 16px/1.3 var(--sans); font-variant-numeric: lining-nums; color: var(--ink); text-wrap: pretty; }
/* номер — в строке заголовка, а не отдельной колонкой: заголовок не сжимается в узкий столбик */
#b6a .b6a-step__n { display: inline-block; margin-right: 4px; font: 400 22px/1 var(--serif); letter-spacing: -.005em; color: var(--tx2); }
#b6a .b6a-step__d { margin-top: 4px; font-size: 15px; line-height: 1.4; color: var(--tx2); text-wrap: pretty; }
/* пятый шаг — единственный акцент блока: спокойная персиковая заливка */
#b6a .b6a-step--goal { background: #FFF3EA; }
/* низ блока (раунд 5, Лиза «слишком кучно»): подпись → 4 равных чипа с 3D → воздух → цитата → юр. строка → кнопка */
#b6a .b6a-every {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  max-width: 360px; margin: 28px auto 0;
}
#b6a .b6a-every__lab { grid-column: 1 / -1; margin-bottom: 4px; font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--tx2); text-align: center; }
#b6a .b6a-tag, #b7 .b7-chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--b-line);
  font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--ink);
}
#b6a .b6a-tag { justify-content: center; gap: 8px; min-height: 48px; padding: 6px 12px 6px 8px; box-shadow: var(--b-shadow-sm); }
#b6a .b6a-tag img { display: block; flex: none; width: 28px; height: 28px; object-fit: contain; }
#b6a .b6a-quote {
  max-width: 14em; margin: 32px auto 0;
  font: 400 26px/1.2 var(--serif); font-style: normal; letter-spacing: -.005em;
  color: var(--ink); text-align: center; text-wrap: balance;
}
#b6a .b6a-legal {
  max-width: 30em; margin: 20px auto 0; padding-top: 14px; border-top: 1px solid var(--b-line);
  font-size: 13px; line-height: 1.45; color: var(--tx2); text-align: center; text-wrap: balance;
}
#b6a .cta { margin-top: 28px; }

/* ---------- 7 — программа: 8 одинаковых узлов и карточек ---------- */
#b7 { padding-top: 48px; }
#b7 .blk__title { margin-bottom: 12px; }
#b7 .b7-meta { margin-bottom: 20px; text-align: center; }
#b7 .b7-meta__chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
#b7 .b7-meta__line { margin-top: 8px; font-size: 15px; line-height: 1.4; color: var(--tx2); }
#b7 .b7-map { display: grid; gap: 12px; }
#b7 .b7-mod { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; align-items: start; }
/* раунд 8 (Лёша 30.09: «слишком скучно, всё чёрно-белое»): у каждого модуля свой мягкий цвет по кругу из 4 —
   небо, персик, светло-жёлтый, мята. --m-tint — низ градиента карточки, --m-line — рамка 1 px чуть темнее,
   --m-acc — насыщенный цвет кружка и рамки кнопки, --m-ink — затемнённый цвет текста (контраст ≥ 4,5:1 и на белом,
   и на --m-tint, и на заливке --m-fill), --m-next — цвет следующего кружка (рельс — градиент между ними) */
#b7 .b7-mod:nth-child(4n+1) { --m-tint: #E4F1F9; --m-line: #CBE3F2; --m-acc: #4FA3CF; --m-dot: #2E78A8; --m-dot-ink: #FFFFFF; --m-ink: #1B6E98; --m-fill: #DFEEF6; --m-next: #F7894B; }
#b7 .b7-mod:nth-child(4n+2) { --m-tint: #FFF0E3; --m-line: #F9DCC4; --m-acc: #F7894B; --m-dot: #C24F16; --m-dot-ink: #FFFFFF; --m-ink: #B04A14; --m-fill: #FEEADF; --m-next: #E9B949; }
#b7 .b7-mod:nth-child(4n+3) { --m-tint: #FFF6D9; --m-line: #F3E3AE; --m-acc: #E9B949; --m-dot: #E9B949; --m-dot-ink: #2B2200; --m-ink: #8A5F00; --m-fill: #FBF2DE; --m-next: #4DB58A; }
#b7 .b7-mod:nth-child(4n+4) { --m-tint: #E6F6EE; --m-line: #C9EBD9; --m-acc: #4DB58A; --m-dot: #2A7D5C; --m-dot-ink: #FFFFFF; --m-ink: #1A714C; --m-fill: #DFF2EA; --m-next: #4FA3CF; }
/* рельс между узлами: от центра кружка (16 + 14 px) к центру следующего, цвет перетекает в цвет следующего модуля */
#b7 .b7-mod:not(:last-child)::before {
  content: ""; position: absolute; left: 13px; top: 30px; width: 2px; height: calc(100% + 12px); border-radius: 2px;
  background: linear-gradient(180deg, var(--m-acc) 0%, var(--m-next) 100%); opacity: .7;
}
/* кружок: заливка цветом модуля, белая цифра Raleway (в Prata «1» похожа на «l») */
#b7 .b7-dot {
  position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; margin-top: 16px;
  border-radius: 50%; background: var(--m-dot); box-shadow: 0 0 0 3px #fff, 0 4px 10px -4px rgba(31, 42, 51, .3);
  font: 700 15px/1 var(--sans); font-variant-numeric: lining-nums; color: var(--m-dot-ink);   /* цифра: контраст ≥ 4,5:1 на каждом цвете */
}
#b7 .b7-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: 14px 16px 0; border-radius: 20px;
  background: linear-gradient(180deg, #fff 0%, var(--m-tint) 100%); border: 1px solid var(--m-line); box-shadow: var(--b-shadow-sm);
}
#b7 .b7-card__obj { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; filter: drop-shadow(0 3px 4px rgba(31, 42, 51, .14)); }
#b7 .b7-card__t { padding-right: 48px; font: 700 16px/1.3 var(--sans); font-variant-numeric: lining-nums; color: var(--ink); text-wrap: balance; }
#b7 .b7-card__k { display: block; margin-bottom: 2px; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--tx2); }
#b7 .b7-card__res { margin: 6px 0 12px; font-size: 15px; line-height: 1.4; color: var(--tx2); text-wrap: pretty; }
#b7 .b7-card__res b { color: var(--m-ink); }
/* «Уроки (N) ＋» — строка внутри карточки внизу, во всю ширину, разделитель сверху */
#b7 .b7-acc { margin-top: auto; }
#b7 .b7-acc > summary {
  display: flex; align-items: center; gap: 6px; min-height: 60px; padding: 8px 0;
  border-top: 1px solid var(--b-line);
  list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  font: 600 15px/1.2 var(--sans); font-variant-numeric: lining-nums; color: var(--ink);
}
#b7 .b7-acc > summary::-webkit-details-marker { display: none; }
#b7 .b7-acc > summary::marker { content: ""; }
/* раунд 5 (Лиза: «не поймут, что за плюсики»): вместо «＋» — пилюля «Смотреть уроки ⌄» (декор, aria-hidden) */
#b7 .b7-acc__go {
  display: inline-flex; flex: none; align-items: center; gap: 4px; min-height: 44px; margin-left: auto; padding: 0 10px 0 14px;
  border-radius: 999px; background: #fff; border: 1px solid var(--m-acc);
  font: 700 14px/1 var(--sans); color: var(--m-ink); white-space: nowrap; transition: background-color .2s;
}
/* раунд 8: открытый модуль — кнопка «Свернуть» с лёгкой заливкой цветом модуля */
#b7 .b7-acc[open] .b7-acc__go { background: var(--m-fill); }
#b7 .b7-acc__go .i { width: 18px; height: 18px; stroke-width: 2.25; transition: transform .2s; }
#b7 .b7-acc__less { display: none; }
#b7 .b7-acc[open] .b7-acc__more { display: none; }
#b7 .b7-acc[open] .b7-acc__less { display: inline; }
#b7 .b7-acc[open] .b7-acc__go .i { transform: rotate(180deg); }
@media (max-width: 359px) { #b7 .b7-acc__w { display: none; } }
/* дверь модуля 0 — мягкое «приоткрывание» вокруг левого края */
#b7 .b7-door { transform-origin: 8% 50%; animation: bB-door 3.6s ease-in-out infinite; }
@keyframes bB-door { 0%, 100% { transform: perspective(60px) rotateY(4deg); } 50% { transform: perspective(60px) rotateY(-4deg); } }
#b7 .b7-acc > summary:focus-visible { outline: 3px solid var(--azure-sm); outline-offset: 2px; }
#b7 .b7-acc__n { font-weight: 600; color: var(--tx2); }
#b7 .b7-acc__n::before { content: "("; }
#b7 .b7-acc__n::after { content: ")"; }
#b7 .b7-lessons { display: grid; gap: 6px; padding: 2px 0 14px; }
#b7 .b7-lessons li { position: relative; padding-left: 16px; font-size: 15px; line-height: 1.4; color: var(--ink); }
#b7 .b7-lessons li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--tx2); }
#b7 .cta { margin-top: 24px; }

/* ---------- 8 — тарифы: три одинаковые карточки друг под другом ---------- */
#tariffs .blk__title { margin-bottom: 20px; }
#tariffs .t8 { display: grid; gap: 16px; }
#tariffs .t8-card {
  display: flex; flex-direction: column; min-width: 0;
  padding: 22px 18px 18px; border-radius: 24px;
  background: #fff; border: 1px solid var(--b-line); box-shadow: var(--b-shadow);
}
/* «выбирают чаще всего» — только ярлык над названием и очень лёгкая заливка */
#tariffs .t8-card--best { background: #FFF8F1; }
#tariffs .t8-badge {
  order: -1; align-self: center; margin-bottom: 8px; padding: 4px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--b-line);
  font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink); white-space: nowrap;
}
#tariffs .t8-name { font: 400 26px/1.15 var(--serif); letter-spacing: -.005em; color: var(--ink); text-align: center; text-wrap: balance; }
#tariffs .t8-sub { margin-top: 6px; font-size: 15px; line-height: 1.4; color: var(--tx2); text-align: center; text-wrap: balance; }
#tariffs .t8-price { margin: 16px 0 14px; text-align: center; }
#tariffs .t8-inst { font-family: var(--serif); font-weight: 400; line-height: 1.1; color: var(--ink); white-space: nowrap; }
#tariffs .t8-inst__x, #tariffs .t8-inst__cur { font-size: 22px; }
#tariffs .t8-inst__sum { font-size: 40px; letter-spacing: -.005em; color: var(--azure); }
#tariffs .t8-day { margin-top: 6px; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--ink); }
#tariffs .t8-full { margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--tx2); }
#tariffs .t8-pay { min-height: 52px; }
/* списки — общий класс A .list-check (сетка «24 px значок | текст», 15/1.4, «—» у недоступных .is-no) */
#tariffs .t8-list { margin-top: 18px; }
#tariffs .t8-more { margin-top: 14px; border-top: 1px solid var(--b-line); }
#tariffs .t8-more > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; margin-bottom: -8px;
  list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  font: 600 15px/1.2 var(--sans); font-variant-numeric: lining-nums; color: var(--ink);
}
#tariffs .t8-more > summary::-webkit-details-marker { display: none; }
#tariffs .t8-more > summary::marker { content: ""; }
#tariffs .t8-more > summary .i { width: 20px; height: 20px; color: var(--ink); transition: transform .2s; }
#tariffs .t8-more[open] > summary { margin-bottom: 0; }
#tariffs .t8-more[open] > summary .i { transform: rotate(180deg); }
#tariffs .t8-more > summary:focus-visible { outline: 3px solid var(--azure-sm); outline-offset: 2px; }
#tariffs .t8-more .t8-list { margin-top: 4px; }
/* раунд 8 (Лёша 30.09: «недоступное должно читаться сразу, а не мелким почерком»): у «Старта» недоступное —
   отдельная светло-серая плашка; заголовок приглушённым красно-персиковым, под ним старая подпись ТЗ,
   пункты серые (.55), зачёркнутые, значок «✕» в кружке вместо «—» */
#tariffs .t8-off { margin-top: 16px; padding: 14px 14px 16px; border-radius: 18px; background: #F2F4F6; }
#tariffs .t8-off__h { font: 700 16px/1.3 var(--sans); color: #B5482F; }
#tariffs .t8-offnote { margin-top: 2px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--tx2); }
#tariffs .t8-off__list { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
#tariffs .t8-off__list li {
  position: relative; min-height: 1.4em; padding-left: 34px; opacity: .55;
  font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink); text-align: left; text-wrap: pretty;
  text-decoration: line-through; text-decoration-thickness: 1px;
}
#tariffs .t8-off__list li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 1.4em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2A33' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m9 9 6 6M15 9l-6 6'/%3E%3C/svg%3E") center / 20px no-repeat;
}
/* места: маленькая плашка с иконкой людей под строкой цены («Специалист» и VIP), без анимации */
#tariffs .t8-seats {
  display: flex; align-items: center; gap: 6px; width: fit-content; margin: 10px auto 0; padding: 5px 12px 5px 10px;
  border-radius: 999px; background: #fff; border: 1px solid var(--b-line);
  font: 700 14px/1.2 var(--sans); font-variant-numeric: lining-nums; color: var(--ink); white-space: nowrap;
}
#tariffs .t8-seats .i { width: 16px; height: 16px; stroke-width: 2; color: var(--orange-sm); }
/* бонусы (раунд 5, Лиза «продать вкуснее»; Лёша 30.09 — без «удвоения»): одна подарочная карточка —
   крупный подарок слева от заголовка, два подарка белыми строками, крупный таймер. Персиковая карточка — единственный акцент блока */
#tariffs .t8-bonus {
  margin-top: 28px; padding: 20px 16px 18px; border-radius: 24px;
  background: linear-gradient(170deg, #FFF6EE 0%, #FFEBDC 100%); border: 1px solid var(--b-line); box-shadow: var(--b-shadow);
}
#tariffs .t8-bonus__head { display: grid; grid-template-columns: 110px minmax(0, 1fr); column-gap: 14px; align-items: center; }
#tariffs .t8-bonus__gift { position: relative; display: grid; place-items: center; width: 110px; height: 110px; }
#tariffs .t8-bonus__gift::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: rgba(255, 255, 255, .75); }
#tariffs .t8-bonus__gift img { position: relative; display: block; width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(194, 74, 18, .18)); }
#tariffs .t8-bonus__title { font: 400 22px/1.2 var(--serif); letter-spacing: -.005em; color: var(--ink); text-wrap: balance; }
#tariffs .t8-bonus__lead { margin-top: 6px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--tx2); }
#tariffs .t8-bonus__list { display: grid; grid-auto-rows: 1fr; gap: 10px; margin-top: 16px; }   /* раунд 10: три подарка — строки одной высоты */
#tariffs .t8-bonus__item {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-items: center;
  padding: 12px 14px; border-radius: 18px; background: #fff; box-shadow: var(--b-shadow-sm);
}
#tariffs .t8-bonus__ico { display: block; width: 56px; height: 56px; object-fit: contain; }
#tariffs .t8-bonus__n { display: block; font: 700 12px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tx2); }
#tariffs .t8-bonus__name { margin-top: 3px; font: 700 16px/1.35 var(--sans); font-variant-numeric: lining-nums; color: var(--ink); text-wrap: pretty; }
@media (max-width: 419px) {
  #tariffs .t8-bonus__head { grid-template-columns: 88px minmax(0, 1fr); column-gap: 12px; }
  #tariffs .t8-bonus__gift, #tariffs .t8-bonus__gift img { width: 88px; height: 88px; }
  #tariffs .t8-bonus__title { font-size: 20px; text-wrap: pretty; }
}
@media (max-width: 359px) {
  #tariffs .t8-bonus__head { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 6px; text-align: center; }
}
#tariffs .cta { margin-top: 24px; }

/* ---------- 8А — давай посчитаем: цена дня, весы ---------- */
#b8a .blk__title { font-size: clamp(28px, 8.2vw, 32px); }
#b8a .b8a-az { display: block; color: inherit; }
/* единственный акцент блока — «R$ 1,36 в день» */
#b8a .b8a-day { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 8px 0 16px; }
#b8a .b8a-day__sum { font: 400 clamp(48px, 15vw, 60px)/1.08 var(--serif); letter-spacing: -.005em; color: var(--azure); white-space: nowrap; }
#b8a .b8a-day__unit { font: 400 24px/1.1 var(--serif); color: var(--ink); }
#b8a .b8a-cmp, #b8a .b8a-pans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
#b8a .b8a-cmp__i {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 10px;
  border-radius: 20px; background: #fff; border: 1px solid var(--b-line); box-shadow: var(--b-shadow-sm);
  font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink); text-align: center; text-wrap: balance;
}
#b8a .b8a-cmp__obj { display: block; flex: none; width: 40px; height: 40px; object-fit: contain; }
/* раунд 5 (Лиза «тяжело читается, всё слилось»): пять шагов, между шагами 48 px воздуха и тонкий разделитель */
#b8a .b8a-g + .b8a-g { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--b-line); }
#b8a .b8a-g--day .b8a-day { margin-top: 0; }
#b8a .b8a-text { display: grid; gap: 12px; }
#b8a .b8a-text p, #b8a .b8a-p { max-width: 28em; margin-inline: auto; font-size: 16px; line-height: 1.55; color: var(--ink); text-align: left; text-wrap: pretty; }
#b8a .b8a-card { max-width: 30em; padding: 16px 18px; border-radius: 20px; background: #FFF8F1; border: 1px solid var(--b-line); }
#b8a .b8a-sub { margin-top: 0; font: 400 22px/1.2 var(--serif); font-style: normal; color: var(--ink); text-align: center; }
#b8a .b8a-scales { width: 170px; margin: 12px auto 0; }
#b8a .b8a-scales__img { display: block; width: 170px; height: auto; filter: drop-shadow(0 8px 10px rgba(31, 42, 51, .14)); }
#b8a .b8a-pans { margin-top: 12px; }
#b8a .b8a-pan {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px;
  border-radius: 16px; background: #fff; border: 1px solid var(--b-line);
  font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--tx2); text-align: center;
}
#b8a .b8a-pan b { font: 400 20px/1.15 var(--serif); letter-spacing: -.005em; color: var(--ink); white-space: nowrap; }
#b8a .b8a-covered {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px;
  font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink);
}
#b8a .b8a-covered .i { color: var(--ink); stroke-width: 2.25; }
#b8a .b8a-p { margin-top: 16px; }
#b8a .b8a-quote {
  max-width: none; margin-inline: auto;
  font: 400 26px/1.2 var(--serif); font-style: normal; letter-spacing: -.005em;
  color: var(--ink); text-align: center; text-wrap: balance;
}
#b8a .b8a-qs { display: grid; grid-auto-rows: 1fr; gap: 10px; }
#b8a .b8a-q {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px;
  border-radius: 20px; background: #fff; border: 1px solid var(--b-line); box-shadow: var(--b-shadow-sm);
}
#b8a .b8a-q__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--sky-0); color: var(--ink); }
#b8a .b8a-q__h { font: 700 15px/1.3 var(--sans); font-variant-numeric: lining-nums; color: var(--ink); }
#b8a .b8a-q__a { margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--tx2); }
#b8a .b8a-legal { font-size: 13px; color: var(--tx2); }
@media (max-width: 359px) {
  #b8a .b8a-cmp { grid-template-columns: minmax(0, 1fr); }
  #b8a .b8a-cmp__i { flex-direction: row; text-align: left; padding: 10px 14px; }
}

/* ---------- 9 — как оплатить: вкладки, шаги, карточка Pix ---------- */
#b9 .b9-seg {
  max-width: 380px; margin: 0 auto 16px;
  background: #F0EADC; border-color: rgba(255, 255, 255, .7); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 1px 2px rgba(80, 60, 20, .08);
}
/* раунд 5 (Лиза «объяснить, что можно нажать»): подсказка над вкладками, вкладки 56 px с иконкой слева, активная — белая с тенью */
#b9 .b9-hint { margin: 0 auto 12px; }
#b9 .b9-seg { max-width: 440px; }
#b9 .b9-seg__b {
  display: flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 56px; padding: 6px 5px;
  font-size: 15px; line-height: 1.15; color: var(--tx2); text-align: left;
}
#b9 .b9-seg__i { flex: none; width: 18px; height: 18px; stroke-width: 2; }
#b9 .b9-seg__t { min-width: 0; }
#b9 .b9-seg__b.is-active { background: #fff; color: var(--ink); box-shadow: 0 6px 16px -6px rgba(31, 42, 51, .28); }
#b9 .b9-seg__b.is-active .b9-seg__i { color: var(--azure-sm); }
#b9 .b9-seg__sub { display: block; font-size: 14px; font-weight: 600; }
@media (max-width: 379px) {
  #b9 .b9-seg__b { flex-direction: column; gap: 3px; min-height: 64px; text-align: center; }
  #b9 .b9-seg__b:first-child { flex: 0 0 56px; }
}
@media (max-width: 359px) {
  #b9 .b9-seg__b { padding-inline: 4px; }
  #b9 .b9-seg__b:first-child { flex-basis: 50px; }
  #b9 .b9-seg__sub { white-space: nowrap; }
}
/* «Получить помощь» — под ответом «Карта отказала?», во всю ширину карточки */
#b9 .b9-help { grid-column: 1 / -1; display: grid; justify-items: center; gap: 6px; }
#b9 .b9-help__btn { width: 100%; min-height: 50px; font-size: 16px; }
#b9 .b9-row .b9-help__note { margin: 0; font-size: 14px; line-height: 1.4; color: var(--tx2); text-align: center; }
#b9 .b9-panel { padding: 20px 16px; border-radius: 24px; background: #fff; border: 1px solid var(--b-line); box-shadow: var(--b-shadow); }
#b9 .b9-steps { display: grid; gap: 14px; }
#b9 .b9-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
#b9 .b9-n { font: 400 28px/1 var(--serif); letter-spacing: -.005em; color: var(--azure-sm); }
#b9 .b9-steps p { font-size: 16px; line-height: 1.42; color: var(--ink); text-wrap: pretty; }
#b9 .b9-limit {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; margin-top: 16px; padding: 11px 12px;
  border-radius: 14px; background: var(--sky-0); border: 1px solid var(--b-line); color: var(--ink);
  font-size: 14px; font-weight: 600; line-height: 1.4;
}
#b9 .b9-limit .i { color: var(--tx2); }
/* Pix: одна светлая карточка без рамки-телефона */
#b9 .b9-phone { width: min(100%, 230px); margin: 20px auto 0; padding: 16px; border-radius: 20px; background: var(--sky-0); border: 1px solid var(--b-line); }
#b9 .b9-phone__screen { display: grid; justify-items: center; gap: 10px; }
#b9 .b9-phone__lab { font: 700 16px/1 var(--sans); letter-spacing: .02em; color: var(--ink); }
#b9 .b9-phone__qr { width: 84px; height: 84px; fill: var(--ink); }
#b9 .b9-phone__code {
  width: 100%; padding: 7px 6px; border-radius: 10px; background: #fff; border: 1px solid var(--b-line);
  font-size: 14px; letter-spacing: .04em; color: var(--tx2); text-align: center; white-space: nowrap;
}
#b9 .b9-phone__btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 40px; border-radius: 12px;
  background: #fff; border: 1px solid var(--b-line); color: var(--ink); font-size: 14px; font-weight: 700;
}
#b9 .b9-phone__btn .i { width: 16px; height: 16px; }
#b9 .b9-info { display: grid; gap: 12px; margin-top: 16px; }
#b9 .b9-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px;
  border-radius: 20px; background: #fff; border: 1px solid var(--b-line); box-shadow: var(--b-shadow-sm);
}
#b9 .b9-row__h { font: 700 16px/1.3 var(--sans); font-variant-numeric: lining-nums; color: var(--ink); }
#b9 .b9-row p { margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--tx2); }
#b9 .b9-after { margin-top: 8px; }

/* ---------- 10 — финал: развилка, под ней две карточки, Эрика, таймер ---------- */
#b10 .b10-lead { margin-bottom: 4px; }
#b10 .b10-lead--go { margin-bottom: 20px; color: var(--ink); font-weight: 700; }
/* раунд 5 (Лиза «картинка непонятна»): разделённая картинка — слева серая жизнь, справа яркая; под каждой панелью своя карточка ТЗ */
#b10 .b10-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#b10 .b10-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#b10 .b10-pane { overflow: hidden; border-radius: 20px; background: var(--sky-2); box-shadow: var(--b-shadow-sm); }
#b10 .b10-pane__tag {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; padding: 8px 10px;
  font: 700 14px/1.2 var(--sans); text-align: center; text-wrap: balance;
}
#b10 .b10-pane__tag .i { flex: none; width: 16px; height: 16px; stroke-width: 2.25; }
#b10 .b10-side--stay .b10-pane__tag { background: #E6EAED; color: #4E5A63; }
#b10 .b10-side--go .b10-pane__tag { background: #FFE2CC; color: var(--orange-sm); }
#b10 .b10-pane__img { display: block; width: 100%; height: auto; aspect-ratio: 760 / 1017; object-fit: cover; }
#b10 .b10-side--stay .b10-pane__img { filter: saturate(.55) brightness(.95); }
#b10 .b10-way {
  flex: 1 1 auto; padding: 14px 14px 16px;
  border-radius: 20px; background: #fff; border: 1px solid var(--b-line); box-shadow: var(--b-shadow-sm);
  font-size: 15px; line-height: 1.45; color: var(--tx2); text-wrap: pretty;
}
#b10 .b10-way b { display: block; margin-bottom: 4px; font-size: 17px; line-height: 1.25; color: var(--ink); }
/* «Начать» — единственный акцент блока: тёплая заливка без обводки */
#b10 .b10-way--go { background: #FFF3EA; border-color: transparent; }
@media (max-width: 379px) {
  #b10 .b10-split { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #b10 .b10-pane__tag { min-height: 44px; }
  #b10 .b10-pane__img { aspect-ratio: 1 / 1; object-position: 50% 18%; }
}
#b10 .b10-erika { position: relative; isolation: isolate; margin: 32px 0 0; text-align: center; }
/* небо рядом с фото: мягкий голубой круг за аркой */
#b10 .b10-erika::before {
  content: ""; position: absolute; z-index: -1; top: -12px; left: 50%; width: 300px; height: 300px; margin-left: -150px;
  border-radius: 50%; background: radial-gradient(closest-side, #DCEEF5 0%, rgba(234, 245, 250, .7) 60%, rgba(234, 245, 250, 0) 100%);
}
/* арка 220×290, rich-pink 900×1200 увеличен ×0.27 (243×324): ось лица (x≈490 на оригинале) — ровно по центру арки */
#b10 .b10-arch {
  position: relative; width: 220px; height: 290px; margin: 0 auto; overflow: hidden;
  border-radius: 110px 110px 24px 24px; background: linear-gradient(180deg, #C9E6F0, #EAF5FA); box-shadow: var(--b-shadow);
}
#b10 .b10-arch img { position: absolute; left: -22px; top: -4px; display: block; width: 243px; max-width: none; height: 324px; }
#b10 .b10-quote { max-width: 330px; margin: 8px auto 0; }
/* кавычка — декор псевдоэлементом (не текст страницы) */
#b10 .b10-quote::before { content: "\201C"; display: block; height: 36px; font: 400 64px/1 var(--serif); color: rgba(31, 42, 51, .22); }
#b10 .b10-quote p { font: 400 28px/1.2 var(--serif); font-style: normal; letter-spacing: -.005em; color: var(--ink); text-wrap: balance; }
/* плашка срока с таймером — один компонент в блоке 10 и (раунд 8, Лёша 30.09) над карточками тарифов: таймер цены */
#b10 .b10-deal, #tariffs .t8-deal {
  margin-top: 28px; padding: 18px 16px; border-radius: 24px;
  background: #fff; border: 1px solid var(--b-line); box-shadow: var(--b-shadow);
}
#tariffs .t8-deal { margin: 0 0 16px; }
#b10 .b10-deadline, #tariffs .t8-deal__line { margin-bottom: 12px; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--ink); text-align: center; text-wrap: balance; }
/* раунд 10 (Лёша 01.10): личные сутки — три равные плитки «часы · минуты · секунды» (дней нет, до 24:00:00) */
#b10 .b10-cd, #tariffs .t8-pcd { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
:is(#b10 .b10-cd, #tariffs .t8-pcd) .cd__tile { min-width: 0; padding: 10px 2px 8px; border-radius: 16px; background: var(--sky-0); border: 1px solid var(--b-line); box-shadow: none; }
/* цифры — Raleway с «прямыми» моноширинными цифрами: в Prata «11» читается как «ll» (та же причина, что у кружков модулей) */
:is(#b10 .b10-cd, #tariffs .t8-pcd) [data-cd] {
  font-family: var(--sans); font-weight: 700; font-size: clamp(30px, 9.6vw, 40px); line-height: 1.1;
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; color: var(--ink);
}
:is(#b10 .b10-cd, #tariffs .t8-pcd) .cd__tile span { margin-top: 4px; font-size: 14px; color: var(--tx2); }
#b10 .b10-bonus { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--tx2); text-align: center; text-wrap: pretty; }
#b10 .cta { margin-top: 24px; }
#b10 .b10-help { max-width: 26em; margin: 22px auto 10px; font-size: 15px; line-height: 1.45; color: var(--ink); text-align: center; text-wrap: balance; }
/* кнопки «Получить доступ» и «Задать вопрос в WhatsApp» — одной ширины (как .cta: до 390 px) */
#b10 .b10-wa { max-width: 390px; margin: 0 auto; }

/* ---------- 11 — вопросы: 17 одинаковых строк ---------- */
#b11 { padding-top: 64px; }
#b11 .b11-list {
  border-radius: 24px; background: #fff;
  border: 1px solid var(--b-line); box-shadow: var(--b-shadow);
}
#b11 .b11-q + .b11-q { border-top: 1px solid var(--b-line); }
#b11 .b11-q > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 56px; padding: 10px 14px 10px 18px; list-style: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font: 700 16px/1.35 var(--sans); font-variant-numeric: lining-nums; color: var(--ink);
}
#b11 .b11-q > summary::-webkit-details-marker { display: none; }
#b11 .b11-q > summary::marker { content: ""; }
#b11 .b11-q > summary::after {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: #F1F4F6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2A33' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 15px no-repeat;
}
#b11 .b11-q[open] > summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2A33' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
#b11 .b11-q > summary:focus-visible { outline: 3px solid var(--azure-sm); outline-offset: -3px; }
#b11 .b11-a { padding: 0 18px 18px; font-size: 15px; line-height: 1.55; color: var(--tx2); }
#b11 .b11-ask {
  margin-top: 20px; padding: 20px 16px 18px; border-radius: 24px;
  background: #fff; border: 1px solid var(--b-line); box-shadow: var(--b-shadow);
}
#b11 .b11-ask__row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
#b11 .b11-ask__row .obj { flex: none; width: 56px; height: 56px; filter: drop-shadow(0 4px 6px rgba(31, 42, 51, .14)); }
#b11 .b11-ask__q { font: 700 17px/1.3 var(--sans); font-variant-numeric: lining-nums; color: var(--ink); }
#b11 .b11-ask__a { margin-top: 2px; font-size: 15px; line-height: 1.45; color: var(--tx2); }
#b11 .b11-ask .btn { padding-inline: 14px; }
#b11 .b11-ask .cta { margin-top: 12px; }

/* ---------- 12 — подвал ---------- */
#b12 {
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, var(--from) 0, var(--sky-0) 120px, var(--sky-1) 100%);
  border-top: 1px solid var(--b-line);
}
#b12 .b12-mark {
  padding-bottom: 18px; border-bottom: 1px solid var(--b-line);
  font: 400 20px/1.3 var(--serif); color: var(--ink); text-align: center; text-wrap: balance;
}
#b12 .b12-sec {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 20px 0;
  border-bottom: 1px solid var(--b-line);
  font-size: 14px; line-height: 1.5; color: var(--tx2); overflow-wrap: anywhere;
}
#b12 .b12-ico {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1px solid var(--b-line); color: var(--tx2);
}
#b12 .b12-h { margin-bottom: 6px; font: 700 16px/1.3 var(--sans); font-variant-numeric: lining-nums; color: var(--ink); }
#b12 .b12-sec p + p { margin-top: 2px; }
#b12 #b12-mail { color: var(--azure-sm); }
/* раунд 8: почта и номер не рвутся посреди (иначе рамка ссылки на две строки накрывает соседнюю — overlap на 480 px) */
#b12 :is(#b12-mail, #b12-wa) { white-space: nowrap; }
#b12 .b12-sec .b12-hot { margin-top: 8px; color: var(--ink); }
#b12 .b12-notes { display: grid; gap: 8px; }
#b12 .b12-notes li { font-size: 13px; line-height: 1.5; }
#b12 .b12-links { display: grid; margin-top: 4px; }
#b12 .b12-links a {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) 16px; align-items: center; gap: 12px;
  min-height: 52px; padding: 6px 2px; border-bottom: 1px solid var(--b-line);
  color: var(--ink); font-size: 15px; text-decoration: none;
}
#b12 .b12-links .i { color: var(--tx2); }
#b12 .b12-links .b12-chev { width: 16px; height: 16px; }
#b12 .b12-copy { margin-top: 18px; font-size: 13px; color: var(--tx2); text-align: center; }


/* ---------- раунд 5: подсказки в блоках B ----------
   Сами .hint / .hint--tap / .bob / .reveal — общие компоненты A (site.css). Здесь только раскладка:
   подсказка по центру над своим элементом и перенос текста на узких экранах (у A — одна строка). */
:is(#b7, #b9) .hint { display: flex; width: fit-content; max-width: 100%; margin-inline: auto; }
@media (max-width: 429px) {
  :is(#b7, #b9) .hint { height: auto; min-height: 32px; padding-block: 7px; white-space: normal; line-height: 1.25; text-align: center; text-wrap: balance; }
}

/* =====================================================================
   РАУНД 6 — вторые правки Лизы (30.09): рука указывает ВНИЗ на то, что нажимать; «Рассрочка» с помощью;
   верх блока 10 ниже; «живость» B: пульс активной вкладки и кнопки «Уроки», блик у «Специалиста», стрелка у «Начать».
   Все анимации — transform/opacity/фон, выключаются общим правилом A при prefers-reduced-motion: reduce.
   ===================================================================== */

/* рука-палец пальцем вниз (иконка A повёрнута на 180°) и мягко «тычет» вниз на 3 px */
:is(#b7, #b9) .hint--tap::before {
  width: 20px; height: 20px; background: var(--azure-sm);
  -webkit-mask-size: 20px 20px; mask-size: 20px 20px;
  transform-origin: 50% 50%; transform: rotate(180deg); animation: bB-tapdown 1.6s ease-in-out infinite;
}
@keyframes bB-tapdown { 0%, 100% { transform: rotate(180deg) translateY(0); } 50% { transform: rotate(180deg) translateY(-3px); } }

/* B1. Подсказка — внутри карточки модуля 0, прямо над строкой «Уроки»: пилюля-выноска справа,
   рука справа над шевроном кнопки, хвостик выноски смотрит вниз на кнопку */
#b7 .b7-card .b7-hint {
  position: relative; align-self: flex-end; width: fit-content; max-width: 100%;
  margin: 0 0 10px auto; padding: 0 10px 0 14px; gap: 6px;
}
#b7 .b7-card .b7-hint::before { order: 2; }
#b7 .b7-card .b7-hint::after {
  content: ""; position: absolute; right: 22px; bottom: -6px; width: 10px; height: 10px;
  background: #fff; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  -webkit-mask: none; mask: none; transform: rotate(45deg); animation: none;
}
/* выноска держится у кнопки: свободная высота выровненной карточки уходит НАД выноску, а не между ней и кнопкой */
#b7 .b7-card .b7-hint { margin-top: auto; }
#b7 .b7-card .b7-hint + .b7-acc { margin-top: 0; }
/* на узких экранах текст в две строки: выноска узкая (по тексту), а не во всю карточку */
@media (max-width: 429px) { #b7 .b7-card .b7-hint { max-width: 212px; padding: 7px 10px 7px 14px; text-align: right; } }
/* «Смотреть уроки ⌄» выглядит нажимаемой: обводка 1 px голубым; у модуля 0 (куда показывает рука) — мягкий пульс */
#b7 .b7-acc__go { position: relative; }
#b7 .b7-acc--first .b7-acc__go::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  border: 1px solid var(--m-acc); opacity: .5;
  animation: bB-ring 2.2s ease-out infinite;
}
#b7 .b7-acc--first[open] .b7-acc__go::after { content: none; }
@keyframes bB-ring { 0% { transform: scale(1); opacity: .6; } 75%, 100% { transform: scale(1.08, 1.32); opacity: 0; } }

/* B6. Кнопка блока 7 — второстепенная (контур): следом, в том же кадре, идут «Оплатить» тарифов — главная там */
#b7 .b7-cta__btn {
  background: #fff; color: var(--orange-sm); border: 1.5px solid var(--cta);
  box-shadow: var(--b-shadow-sm);
}

/* B2. «Как оплатить»: рука над вкладками пальцем вниз; активная вкладка мягко пульсирует рамкой 1 px */
#b9 .b9-seg__b { position: relative; }
#b9 .b9-seg__b.is-active::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 1px solid var(--azure-sm); opacity: .25;
  animation: bB-tabpulse 2.4s ease-in-out infinite;
}
@keyframes bB-tabpulse { 0%, 100% { opacity: .12; } 50% { opacity: .7; } }

/* B3. «Карта отказала?» + «Получить помощь» внутри вкладки «Рассрочка» — тот же компонент, без второй тени (лежит в карточке);
   пока открыта «Рассрочка», такой же блок в списке ниже скрыт — текст на экране один раз */
#b9 .b9-row--tab { margin-top: 12px; box-shadow: none; }
#b9 .b9:has(#b9-inst.is-active) + .b9-info .b9-row--fail { display: none; }

/* B5. «Специалист по Shopee» (лучший тариф) — тот же блик, что у кнопки (полоса 105°, 6 с, пробег — первые 24 % цикла),
   но свой, независимый: общий .shine A отдаёт блик одному элементу в кадре, и кнопки «Оплатить» (видны целиком)
   почти всегда побеждают высокую карточку (замер: карточка блестела в 3–4 из ~30 положений на 320–390 и ни разу на 430–1440).
   Полоса идёт по заливке карточки ПОД текстом (слой z-index −1 внутри isolation), текст не бледнеет. */
#tariffs .t8-card--best { position: relative; isolation: isolate; }
#tariffs .t8-card--best::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 56%) 90% 0 / 300% 100% no-repeat;
  animation: bB-shine 6s ease-in-out 1s infinite;
}
@keyframes bB-shine { 0% { background-position: 90% 0; } 24%, 100% { background-position: 10% 0; } }

/* B5. Блок 10: стрелка у «Начать» покачивается вправо */
#b10 .b10-go-arrow { animation: bB-nudge 2.4s ease-in-out infinite; }
@keyframes bB-nudge { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(4px); } }

/* B4. Блок 10: верх ниже — заголовок в две строки, два подзаголовка по одной строке (15 px; где не влезает — 14 px) */
#b10 .blk__title { margin-bottom: 8px; }
#b10 .b10-lead { max-width: none; margin: 0 auto; font-size: 15px; line-height: 1.4; text-wrap: balance; }
#b10 .b10-lead--go { margin: 2px auto 18px; }
/* замер WebKit: «Можно закрыть…» при 15 px — 418 px, при 14 px и −0.01em — 383 px; «А можно…» (700) — 363 / 333 px.
   Колонка текста 350 px на 390: вторая строка встаёт в одну строку при 14 px, первая — только от ширины 423 px */
@media (min-width: 380px) and (max-width: 458px) { #b10 .b10-lead { font-size: 14px; letter-spacing: -.01em; } }

/* карточка модуля нажимается целиком (site-b.js) */
#b7 .b7-card { cursor: pointer; }
#b7 .b7-lessons { cursor: default; }

/* =====================================================================
   РАУНД 9 — планшет (768–1023) и десктоп (≥ 1024), ТЗ TZ9-adaptaciya.md, блоки 6А–12.
   Телефон (≤ 767) не меняется: ВСЁ ниже — только внутри @media (min-width: 768px) и (min-width: 1024px).
   Контейнер (до 1120 px), фон неба и отступы секции — каркас A (.page / .blk в site.css); здесь только
   внутренние сетки блоков. Тексты не меняются, разметка та же.
   ===================================================================== */
@media (min-width: 768px) {
  /* ---- 6А: пять шагов — 3 + 2 в ряд; линия идёт горизонтально от круга к кругу своего ряда ---- */
  #b6a .b6a-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 16px; row-gap: 20px; }
  #b6a .b6a-step {
    grid-column: span 2; grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 12px;
    padding: 16px 14px 18px; text-align: center;
  }
  #b6a .b6a-step:nth-child(4) { grid-column: 2 / span 2; }
  #b6a .b6a-step__txt { padding-top: 0; }
  /* центр круга: 16 (отступ) + 28 (радиус) от верха; линия — от края круга до края следующего (ширина шага + зазор − 56) */
  #b6a .b6a-step:not(:last-child)::after { left: calc(50% + 28px); top: 43px; width: calc(100% + 16px - 56px); height: 2px; }
  #b6a .b6a-step:nth-child(3)::after { content: none; }
  #b6a .b6a-every { grid-template-columns: repeat(4, minmax(0, 150px)); justify-content: center; max-width: none; gap: 10px 12px; }

  /* ---- 7: две колонки «ёлочкой» — модули 0, 2, 4, 6 слева, 1, 3, 5, 7 справа со сдвигом на полкарточки;
     кружки с номерами — на общем рельсе по центру между колонками (рельс рисует .b7-map::before, длину ставит site-b.js) ---- */
  #b7 .b7-meta { margin-bottom: 28px; }
  #b7 .b7-map { position: relative; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; row-gap: 20px; }
  #b7 .b7-mod { display: block; grid-column: 1; }
  #b7 .b7-mod:nth-child(even) { grid-column: 2; }
  #b7 .b7-mod:nth-child(1) { grid-row: 1 / span 2; }
  #b7 .b7-mod:nth-child(2) { grid-row: 2 / span 2; }
  #b7 .b7-mod:nth-child(3) { grid-row: 3 / span 2; }
  #b7 .b7-mod:nth-child(4) { grid-row: 4 / span 2; }
  #b7 .b7-mod:nth-child(5) { grid-row: 5 / span 2; }
  #b7 .b7-mod:nth-child(6) { grid-row: 6 / span 2; }
  #b7 .b7-mod:nth-child(7) { grid-row: 7 / span 2; }
  #b7 .b7-mod:nth-child(8) { grid-row: 8 / span 2; }
  #b7 .b7-mod:not(:last-child)::before { content: none; }
  #b7 .b7-dot { position: absolute; top: 16px; margin: 0; }
  #b7 .b7-mod:nth-child(odd) .b7-dot { left: calc(100% + 18px); }    /* центр зазора 64 px: 32 − 14 */
  #b7 .b7-mod:nth-child(even) .b7-dot { left: -46px; }
  /* animMax ≤ 6: на широком экране в кадре сразу 6–8 модулей — «покачивание» остаётся у дверки модуля 0 и модулей 1 и 3;
     в 6А на одной строке все пять шагов — качаются два предмета из трёх */
  #b7 .b7-mod:nth-child(n+5) .b7-card__obj { animation: none; }
  #b6a .b6a-step:nth-child(3) .b6a-obj { animation: none; }
  #b7 .b7-map::before {
    content: ""; position: absolute; left: calc(50% - 1px); top: var(--rail-top, 30px); width: 2px; height: var(--rail-h, 0px);
    border-radius: 2px; opacity: .7; pointer-events: none;
    background: linear-gradient(180deg, #4FA3CF 0%, #F7894B 14.3%, #E9B949 28.6%, #4DB58A 42.9%, #4FA3CF 57.1%, #F7894B 71.4%, #E9B949 85.7%, #4DB58A 100%);
  }

  /* ---- 8: тарифы — на планшете одна колонка до 560 px; бонусы — на весь контейнер, подарки рядом ---- */
  #tariffs .t8-deal { max-width: 560px; margin: 0 auto 20px; }
  #tariffs .t8 { max-width: 560px; margin-inline: auto; gap: 20px; }
  #tariffs .t8-bonus { margin-top: 32px; padding: 24px; }
  /* раунд 10: плитки равные: предмет сверху, подпись и название под ним */
  #tariffs .t8-bonus__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }   /* раунд 13: подарков четыре (слайд 53 презентации) — 2 × 2 */
  #tariffs .t8-bonus__item { grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: start; row-gap: 10px; padding: 16px; }

  /* ---- 8А: слева цена дня и расчёт, справа весы; цитата, вопросы и кнопка — на всю ширину ---- */
  #b8a { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; align-content: start; }
  #b8a > .blk__title, #b8a > .b8a-quote, #b8a > .b8a-qs, #b8a > .cta { grid-column: 1 / -1; }
  #b8a > .blk__title { font-size: 36px; }   /* как .blk__title каркаса A: 36 / 44 */
  #b8a > .b8a-g--day { grid-column: 1; grid-row: 2; align-self: end; }
  #b8a > .b8a-text { grid-column: 1; grid-row: 3; align-self: start; }
  #b8a > .b8a-g--scales { grid-column: 2; grid-row: 2 / span 2; align-self: center; margin-top: 0; padding-top: 0; border-top: 0; }
  #b8a .b8a-qs { width: 100%; max-width: 560px; margin-inline: auto; }

  /* ---- 9: на планшете вкладки и карточки — колонкой до 640 px по центру ---- */
  #b9 .b9, #b9 .b9-info { max-width: 640px; margin-inline: auto; }
  #b9 .b9-seg { max-width: 520px; }
  #b9 .b9-help__btn { max-width: 360px; }

  /* ---- 10: развилка и плашка срока — не шире 600 / 560 px по центру ---- */
  #b10 .b10-split { max-width: 600px; margin-inline: auto; gap: 16px; }
  #b10 .b10-side { gap: 12px; }
  #b10 .b10-deal { max-width: 560px; margin-inline: auto; }
  #b10 .b10-lead { font-size: 17px; }       /* как .blk__lead каркаса A: 17 / 18 */
  #b10 .b10-wa { max-width: 360px; }        /* одной ширины с .cta каркаса A */

  /* ---- 11: вопросы — контейнер до 820 px по центру; ответ не длиннее ~70 знаков в строке ---- */
  #b11 .b11-list, #b11 .b11-ask { max-width: 820px; margin-inline: auto; }
  #b11 .b11-q > summary { min-height: 60px; padding: 12px 20px 12px 24px; }
  #b11 .b11-a { padding: 0 24px 20px; }
  #b11 .b11-a p { max-width: 36em; }
  /* «Не нашла свой вопрос?» слева, две кнопки столбиком справа */
  #b11 .b11-ask { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 24px; row-gap: 12px; align-items: center; padding: 24px; }
  #b11 .b11-ask__row { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; }
  #b11 .b11-wa { grid-column: 2; grid-row: 1; }
  #b11 .b11-ask .cta { grid-column: 2; grid-row: 2; width: 100%; margin-top: 0; }

  /* ---- 12: подвал в 2 колонки («Quem vende o curso» | «Importante»), ссылки — строкой из трёх ---- */
  #b12 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; align-content: start; }
  #b12 > .b12-mark, #b12 > .b12-links, #b12 > .b12-copy { grid-column: 1 / -1; }
  #b12 .b12-links { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
}

@media (min-width: 1024px) {
  /* ---- 6А: пять шагов в один ряд ---- */
  #b6a .b6a-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #b6a .b6a-step, #b6a .b6a-step:nth-child(4) { grid-column: auto; }
  #b6a .b6a-step:nth-child(3)::after { content: ""; }
  #b6a .b6a-quote { font-size: 30px; }

  /* ---- 7 ---- */
  #b7 .b7-card { padding: 16px 20px 0; }
  #b7 .b7-card__res { font-size: 16px; }

  /* ---- 8: три карточки в ряд одной высоты (Специалист, Старт, VIP); ярлык «выбирают чаще всего» — на верхнем крае
     карточки, чтобы названия стояли на одной линии; название, подзаголовок и цена выравниваются site-b.js ---- */
  #tariffs .t8-deal { max-width: 640px; }
  #tariffs .t8 { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-top: 14px; }
  #tariffs .t8-card { padding: 28px 22px 22px; }
  #tariffs .t8-badge { position: absolute; z-index: 1; top: 0; left: 50%; margin: 0; transform: translate(-50%, -50%); }

  /* ---- 8А ---- */
  #b8a { column-gap: 64px; }
  #b8a > .blk__title { font-size: 44px; }
  #b8a .b8a-text p, #b8a .b8a-p { font-size: 17px; }
  #b8a .b8a-quote { font-size: 30px; }
  #b8a .b8a-qs { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  #b8a .b8a-q { grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding: 20px; }

  /* ---- 9: слева вкладки и шаги, справа карточки помощи ---- */
  #b9 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
  #b9 > .blk__title, #b9 > .cta { grid-column: 1 / -1; }
  #b9 > .b9-hint { grid-column: 1; grid-row: 2; }
  #b9 > .b9 { grid-column: 1; grid-row: 3; width: 100%; max-width: none; margin: 0; }
  #b9 > .b9-info { grid-column: 2; grid-row: 2 / span 2; max-width: none; margin: 0; }
  #b9 .b9-panel { padding: 24px; }
  #b9 .b9-steps p { font-size: 17px; }
  #b9 .b9-row p { font-size: 16px; }

  /* ---- 10: слева развилка (две карточки рядом), справа Эрика с цитатой и плашка срока; кнопки — по центру ниже ---- */
  #b10 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
  #b10 > .blk__title, #b10 > .b10-lead, #b10 > .cta, #b10 > .b10-help, #b10 > .b10-wa { grid-column: 1 / -1; }
  #b10 > .b10-split { grid-column: 1; grid-row: 4 / span 2; max-width: none; margin: 0; }
  #b10 > .b10-erika { grid-column: 2; grid-row: 4; margin-top: 8px; }
  #b10 > .b10-deal { grid-column: 2; grid-row: 5; max-width: none; margin: 24px 0 0; }
  #b10 .b10-lead { font-size: 18px; }

  /* ---- 11 ---- */
  #b11 .b11-q > summary { font-size: 17px; }
  #b11 .b11-a { font-size: 16px; }

  /* ---- 12: три колонки — «Quem vende o curso», «Importante», ссылки столбиком ---- */
  #b12 { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, .8fr); }
  #b12 > .b12-links { grid-column: 3; grid-row: 2; align-self: start; grid-template-columns: minmax(0, 1fr); margin-top: 0; padding-top: 8px; }
}

/* раунд 10 (Лёша 01.10): подарков три. С 1200 px подарок и заголовок слева, три плитки справа (на 1024–1199 три плитки
   в колонке справа были бы уже 180 px, а заголовок шёл бы в четыре строки — там остаётся планшетная раскладка: заголовок сверху, плитки под ним) */
@media (min-width: 1200px) {
  #tariffs .t8-bonus { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); column-gap: 24px; align-items: center; padding: 24px 28px; }
  #tariffs .t8-bonus__list { margin-top: 0; }
}

/* Лёша 01.10 (IMG_3417): таймер цены ещё и в конце тарифов, после VIP и перед бонусами */
#tariffs .t8-deal--end { margin: 20px auto 20px; }

/* Лёша 01.10 (вечер): подарков снова четыре, по слайду 53 презентации — 2 × 2 на планшете и десктопе */
#tariffs .t8-bonus__ico { object-fit: contain; }

/* ---------- Лёша 01.10 22:15–22:22 ---------- */
/* строка под таймером «Успей занять место по самой низкой цене» */
#tariffs .t8-deal__note, #b10 .b10-note { margin: 12px 0 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--tx2); text-align: center; text-wrap: balance; }
/* цена в рассрочку целиком синяя («12 ×», «R$» и сумма одним цветом); красный вариант для теста: ?price=red */
#tariffs .t8-inst, #tariffs .t8-inst__x, #tariffs .t8-inst__cur, #tariffs .t8-inst__sum { color: #1597D1; }
#tariffs .t8-inst__x, #tariffs .t8-inst__cur { font-size: 26px; }
html[data-price="red"] #tariffs .t8-inst, html[data-price="red"] #tariffs .t8-inst__x,
html[data-price="red"] #tariffs .t8-inst__cur, html[data-price="red"] #tariffs .t8-inst__sum { color: #D92D20; }
/* окно продаж закрыто (5–6 октября): на тарифах вместо «Оплатить» плашка «Места закончились», таймеры и бонусы убраны */
#tariffs .t8-pay.is-sold { background: #E6EAEE; color: #55636E; box-shadow: none; border: 0; cursor: default; pointer-events: none; animation: none; }
html.is-soldout #tariffs .t8-deal, html.is-soldout #b10 .b10-deal, html.is-soldout #tariffs .t8-bonus { display: none; }

/* PT-страница: пометка под подарками (какие подарки в каком тарифе) */
#tariffs .t8-bonus__note { margin: 14px 4px 0; font-size: 14px; line-height: 1.45; color: var(--tx2); text-wrap: pretty; }