/*
 * Глобальная посадочная «Онлайн-тест уровня» (/level-test/).
 * Секции B-S1…B-S10. Mobile-first. Все стили заскоуплены префиксом leveltest-*.
 * Опирается на примитивы base.css (.hero/.hero-grid/.lead-card/.card/.chip/
 * .faq/.final-grid/.btn) и токены. Визуальная дифференциация от «Пробного урока» —
 * фиолето-синий акцент оценки/знания (--violet/--blue) вместо кораллового CTA.
 * Тёмная тема — через семантические токены; тинты — через color-mix.
 */

/* ---------- Общий заголовок секции ---------- */
.leveltest-sec-head{max-width:46rem;margin:0 auto clamp(28px,4vw,44px);text-align:center;display:flex;flex-direction:column;align-items:center}
.leveltest-sec-head .eyebrow{margin-bottom:12px}
.leveltest-sec-head .sec-desc{margin-top:14px;max-width:60ch}
/* короткие заголовки секций не должны переноситься по слогам на десктопе */
.leveltest-sec-head .sec-title,
.leveltest-final-sec .sec-title,
.leveltest-assure-title,
.leveltest-cross-title{hyphens:manual;text-wrap:balance}

/* ---------- B-S1 · Hero — вход в тест ----------
   Формы в hero больше нет (модель страницы сменилась на интерактивный тест),
   поэтому и сплит-сетки нет: одна центрированная колонка, крупная типографика,
   один главный CTA. Панель теста идёт сразу под hero без вертикального шва —
   оффер и вход в тест читаются как один блок. */
.leveltest-hero{padding-block:clamp(28px,4.5vw,56px) clamp(24px,3.5vw,40px)}
.leveltest-entry{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:60rem;margin-inline:auto}
.leveltest-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;color:var(--badge-violet-text)}
.leveltest-eyebrow svg{width:16px;height:16px;color:var(--violet);flex:none}
/* Заголовок чуть сдержаннее общей hero-шкалы темы (там верх clamp — 4.25rem):
   у этой страницы под hero сразу идёт панель теста, и её верх должен попадать
   в первый экран на ноутбуке 1280×800 — иначе главный элемент страницы целиком
   уходит за сгиб. Экономия ~120px по высоте при той же выразительности. */
.leveltest-hero h1{font-size:clamp(1.85rem,1rem + 3.1vw,3.15rem);max-width:26ch;text-wrap:balance}
.leveltest-hero .hero-lede{max-width:62ch;margin-inline:auto;margin-top:16px}

/* Буллеты доверия: список, а не строка span'ов — семантика перечисления. */
.leveltest-hero-assure{list-style:none;margin:clamp(22px,3vw,30px) 0 0;padding:0;display:grid;gap:10px 22px;grid-template-columns:1fr;width:100%;max-width:44rem;text-align:left}
.leveltest-hero-assure li{display:flex;align-items:flex-start;gap:9px;font-size:.92rem;font-weight:600;color:var(--text);line-height:1.4}
.leveltest-hero-assure svg{width:18px;height:18px;flex:none;color:var(--green);margin-top:1px}
@media(min-width:560px){.leveltest-hero-assure{grid-template-columns:1fr 1fr}}
/* На широких — строкой по контенту, а не сеткой 1fr: при равных колонках самый
   длинный буллет уходил на две строки, а остальные оставались на одной, и ряд
   читался рваным. */
@media(min-width:1024px){.leveltest-hero-assure{display:flex;flex-wrap:wrap;justify-content:center;max-width:none;gap:10px 28px}.leveltest-hero-assure li{font-size:.88rem;align-items:center}}

/* Блок входа: кнопка → микротекст с объявлением гейта → вторичный путь. */
.leveltest-entry-cta{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:clamp(24px,3.5vw,34px);width:100%}
.leveltest-entry-cta .leveltest-start{min-width:min(100%,17rem)}
.leveltest-entry-note{margin:0;max-width:52ch;font-size:.86rem;line-height:1.5;color:var(--text-muted)}
.leveltest-entry-alt{display:inline-flex;align-items:center;gap:7px;margin-top:4px;padding:8px 4px;min-height:44px;font-size:.92rem;font-weight:700;color:var(--blue);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.leveltest-entry-alt svg{width:16px;height:16px;flex:none;transition:transform .16s ease}
.leveltest-entry-alt:hover{color:var(--violet)}
.leveltest-entry-alt:hover svg{transform:translateX(3px)}
.leveltest-entry-alt:focus-visible{box-shadow:var(--ring);border-radius:var(--r-sm);text-decoration:none}
@media(max-width:419.98px){.leveltest-entry-alt{text-align:left}}

/* лид-карта теста: акцент рамки/ленты — фиолетовый (осталась в финальном CTA) */
.leveltest-lead-card{border-color:color-mix(in srgb,var(--violet) 34%,var(--line))!important}
.leveltest-ribbon{background:var(--violet);box-shadow:0 12px 28px color-mix(in srgb,var(--violet) 32%,transparent)}

.leveltest-quickmsg{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.leveltest-quickmsg-label{font-size:.86rem;font-weight:600;color:var(--text-muted)}
.leveltest-quickmsg-row{display:flex;gap:9px}
.leveltest-quickmsg .btn-msg{width:42px;height:42px;min-height:42px}
.leveltest-quickmsg .btn-msg svg{width:20px;height:20px}

/* ---------- B-S2 · Что вы узнаете (плитки) ---------- */
.leveltest-value-grid{display:grid;gap:16px;grid-template-columns:1fr}
.leveltest-tile{padding:clamp(22px,3vw,28px);display:flex;flex-direction:column;gap:12px}
.leveltest-tile-ic{width:52px;height:52px;border-radius:var(--r-md);display:grid;place-items:center;flex:none;background:var(--surface-violet);color:var(--violet)}
.leveltest-tile-ic svg{width:26px;height:26px}
.leveltest-tile--blue .leveltest-tile-ic{background:var(--surface-blue);color:var(--blue)}
.leveltest-tile--coral .leveltest-tile-ic{background:var(--surface-soft);color:var(--primary)}
.leveltest-tile--green .leveltest-tile-ic{background:color-mix(in srgb,var(--green) 14%,var(--surface));color:var(--green)}
.leveltest-tile-title{font-size:1.08rem;font-weight:800;line-height:1.25}
.leveltest-tile-text{font-size:.94rem;color:var(--text-muted);line-height:1.6;margin:0}
@media(min-width:560px){.leveltest-value-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.leveltest-value-grid{grid-template-columns:repeat(4,1fr)}}

/* ---------- B-S3 · 3 шага «как проходит» ---------- */
.leveltest-timeline{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.leveltest-tl-step{position:relative;display:grid;grid-template-columns:auto 1fr;gap:18px;padding-bottom:26px}
.leveltest-tl-step:last-child{padding-bottom:0}
.leveltest-tl-step::before{content:"";position:absolute;left:23px;top:50px;bottom:-2px;width:2px;background:linear-gradient(var(--line),color-mix(in srgb,var(--violet) 24%,var(--line)));z-index:0}
.leveltest-tl-step:last-child::before{display:none}
/* тот же сдвиг стопов к --text, что и у .leveltest-rung-code: 18.4px/800 — normal text */
.leveltest-tl-num{position:relative;z-index:1;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none;font-family:var(--font-head);font-weight:800;font-size:1.15rem;color:var(--on-primary);background:linear-gradient(135deg,color-mix(in srgb,var(--violet) 88%,var(--text)),color-mix(in srgb,color-mix(in srgb,var(--violet) 70%,var(--blue)) 88%,var(--text)));box-shadow:0 12px 26px color-mix(in srgb,var(--violet) 30%,transparent)}
.leveltest-tl-body{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:clamp(16px,2.4vw,24px);transition:transform .2s ease,box-shadow .2s ease}
.leveltest-tl-body:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.leveltest-tl-ic{width:46px;height:46px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--surface-violet);color:var(--violet);margin-bottom:12px}
.leveltest-tl-ic svg{width:24px;height:24px}
.leveltest-tl-title{font-size:1.08rem;font-weight:800;margin:0 0 7px}
.leveltest-tl-text{font-size:.93rem;color:var(--text-muted);line-height:1.6;margin:0}
.leveltest-steps-note{display:flex;gap:10px;align-items:flex-start;justify-content:center;text-align:left;max-width:62ch;margin:clamp(24px,3.5vw,36px) auto 0;padding:14px 18px;border-radius:var(--r-md);background:var(--surface-violet);border:1px solid color-mix(in srgb,var(--violet) 22%,transparent);font-size:.9rem;color:var(--text);line-height:1.5}
.leveltest-steps-note svg{width:20px;height:20px;color:var(--violet);flex:none;margin-top:1px}
/* Десктоп: три колонки, номер над карточкой, соединительная линия между номерами.
 * Геометрия линии считается ОТ НОМЕРА, а не от середины колонки: номер прижат
 * влево (justify-items:start), поэтому расчёт от 50% уводил линию в сторону —
 * она стартовала посреди карточки и проходила сквозь следующий номер.
 * Начало  = ширина номера (48) + зазор 12 = 60px от левого края колонки;
 * конец   = левый край следующего номера − зазор 12, т.е. 100% + gap − 12;
 * отсюда width = 100% + gap − 72px. Gap вынесен в переменную, чтобы линия и
 * сетка не разъезжались при смене clamp в одном месте.
 * grid-template-rows:auto 1fr выравнивает карточки: без него строка с коротким
 * текстом провисала ниже соседних (высоты 194 vs 206 при равной высоте колонки). */
@media(min-width:820px){
  .leveltest-timeline{--tl-gap:clamp(18px,2.4vw,28px);grid-template-columns:repeat(3,1fr);gap:var(--tl-gap);align-items:stretch}
  .leveltest-tl-step{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:16px;padding-bottom:0;justify-items:start;align-content:start}
  .leveltest-tl-step::before{left:60px;right:auto;top:23px;bottom:auto;width:calc(100% + var(--tl-gap) - 72px);height:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--violet) 28%,var(--line)),var(--line))}
  .leveltest-tl-body{width:100%;height:100%}
}

/* ---------- B-S4 · Reassurance ---------- */
.leveltest-assure{display:grid;gap:clamp(18px,3vw,28px);align-items:start;padding:clamp(24px,4vw,44px);border-radius:var(--r-xl);background:linear-gradient(135deg,var(--surface-violet),var(--surface-blue));border:1px solid color-mix(in srgb,var(--violet) 22%,var(--line));position:relative;overflow:hidden}
.leveltest-assure-icon{width:60px;height:60px;border-radius:var(--r-lg);display:grid;place-items:center;flex:none;background:var(--surface);color:var(--violet);box-shadow:var(--sh-sm)}
.leveltest-assure-icon svg{width:32px;height:32px}
.leveltest-assure-title{font-size:var(--fs-h3);font-weight:800;margin:0 0 12px;max-width:24ch}
.leveltest-assure-text{font-size:1rem;color:var(--text-muted);line-height:1.65;margin:0 0 18px;max-width:70ch}
.leveltest-assure-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.leveltest-assure-list li{display:flex;align-items:flex-start;gap:10px;font-weight:600;font-size:.95rem;color:var(--text)}
.leveltest-assure-list svg{width:20px;height:20px;color:var(--green);flex:none;margin-top:1px}
@media(min-width:760px){.leveltest-assure{grid-template-columns:auto 1fr;padding:clamp(30px,4vw,48px)}}

/* ---------- B-S5 · Чипы «под любой язык и цель» ---------- */
.leveltest-fit-group{margin-bottom:clamp(20px,3vw,28px)}
.leveltest-fit-label{display:block;font-family:var(--font-head);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px}
.leveltest-chips{display:flex;flex-wrap:wrap;gap:10px}
.leveltest-chips .chip{font-size:.9rem;padding:9px 16px}
.leveltest-chip-lang{font-weight:700}
.leveltest-chip-dot{width:9px;height:9px;border-radius:50%;background:var(--c,var(--violet));flex:none}
.leveltest-fit-note{display:flex;gap:14px;align-items:flex-start;margin-top:clamp(8px,2vw,16px);padding:18px 20px;border-radius:var(--r-lg);background:var(--surface-violet);border:1px solid color-mix(in srgb,var(--violet) 28%,var(--line))}
.leveltest-fit-note-ic{width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;flex:none;background:var(--surface);color:var(--violet);box-shadow:var(--sh-sm)}
.leveltest-fit-note-ic svg{width:23px;height:23px}
.leveltest-fit-note p{margin:0;font-size:.96rem;line-height:1.6;color:var(--text);font-weight:500}
/* Подсветка зацепки под легализацию: JS вешает .is-highlight при ?goal=legalization
   или ?lang=polish. Усиливаем собственный фиолетовый акцент плашки (насыщеннее фон/рамка,
   мягкое акцентное кольцо, заливная иконка) — заметно, но не кричит. Однократный
   pulse привлекает внимание и уважает prefers-reduced-motion. Всё на токенах, light+dark. */
.leveltest-fit-note.is-highlight{background:color-mix(in srgb,var(--violet) 15%,var(--surface));border-color:color-mix(in srgb,var(--violet) 55%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--violet) 22%,transparent),var(--sh-md)}
.leveltest-fit-note.is-highlight .leveltest-fit-note-ic{background:var(--violet);color:#fff}
.leveltest-fit-note.is-highlight p{color:var(--text);font-weight:600}
@media(prefers-reduced-motion:no-preference){
  .leveltest-fit-note.is-highlight{animation:leveltest-fit-pulse 2.4s ease 1}
  @keyframes leveltest-fit-pulse{
    0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--violet) 45%,transparent),var(--sh-md)}
    45%{box-shadow:0 0 0 8px color-mix(in srgb,var(--violet) 0%,transparent),var(--sh-md)}
    100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--violet) 22%,transparent),var(--sh-md)}
  }
}

/* ---------- B-S6 · Шкала CEFR (восходящая лестница) ---------- */
.leveltest-cefr{list-style:none;margin:0 auto;padding:0;max-width:860px;display:flex;flex-direction:column;gap:12px}
.leveltest-rung{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:16px 18px;background:var(--surface);border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-left:4px solid color-mix(in srgb,var(--violet) calc(30% + var(--rung) * 12%),var(--line));border-radius:var(--r-lg);box-shadow:var(--sh-sm);transition:transform .18s ease,box-shadow .18s ease}
.leveltest-rung:hover{transform:translateX(3px);box-shadow:var(--sh-md)}
/* Метка CEFR на плитке шкалы: 17.9px/800 — это normal text, порог 4.5:1, а белый
   на чистом --violet давал 4.38:1 (правка 16.08.2026, дефект D-2). Оба стопа
   градиента уводим на 12% в сторону --text: в светлой теме это затемняет фон под
   белым текстом (5.0–5.1:1), в тёмной — осветляет под тёмным (8.0–8.1:1).
   Оттенок и «восходящий» сдвиг по --rung сохранены. */
.leveltest-rung-code{width:52px;height:52px;border-radius:var(--r-md);display:grid;place-items:center;flex:none;font-family:var(--font-head);font-weight:800;font-size:1.12rem;letter-spacing:.02em;color:var(--on-primary);background:linear-gradient(135deg,color-mix(in srgb,color-mix(in srgb,var(--violet) calc(55% + var(--rung) * 8%),var(--blue)) 88%,var(--text)),color-mix(in srgb,var(--violet) 88%,var(--text)))}
.leveltest-rung-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:4px}
.leveltest-rung-name{font-size:1.05rem;font-weight:800;color:var(--text)}
.leveltest-rung-tag{display:inline-flex;align-items:center;font-family:var(--font-head);font-weight:700;font-size:.7rem;letter-spacing:.03em;text-transform:uppercase;color:var(--on-primary);background:var(--primary);padding:3px 10px;border-radius:var(--r-pill)}
.leveltest-rung-text{margin:0;font-size:.93rem;color:var(--text-muted);line-height:1.55}
.leveltest-cefr-cta{display:flex;justify-content:center;margin-top:clamp(24px,3.5vw,34px)}
/* Длинные подписи текстовых CTA переносим, а не выпускаем за экран: базовый
   .btn — nowrap, и «Как устроена наша программа по уровням» разворачивалась
   в 415px при 345px контентной ширины на 360-м экране (кнопка срезана с обеих
   сторон, документ получал scrollWidth 380 вместо 345). Правило точечное —
   только для этих двух центрированных CTA-строк, чтобы не менять поведение
   кнопок в hero и карточках; balance даёт ровные строки вместо «сироты». */
.leveltest-cefr-cta .btn,.leveltest-trust-cta .btn{max-width:100%;white-space:normal;text-wrap:balance;text-align:center}
@media(min-width:600px){.leveltest-rung{padding:18px 22px}}

/* ---------- B-S7 · Отзывы / доверие ---------- */
.leveltest-trust-grid{display:grid;gap:14px;grid-template-columns:1fr}
.leveltest-trust-plate{display:flex;align-items:center;gap:15px;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.leveltest-trust-ic{width:46px;height:46px;border-radius:var(--r-md);display:grid;place-items:center;flex:none;background:var(--surface-violet);color:var(--violet)}
.leveltest-trust-ic svg{width:24px;height:24px}
.leveltest-trust-text{font-weight:600;font-size:.96rem;line-height:1.4;color:var(--text)}
.leveltest-trust-cta{display:flex;justify-content:center;margin-top:clamp(24px,3.5vw,34px)}
@media(min-width:640px){.leveltest-trust-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.leveltest-trust-grid{grid-template-columns:repeat(3,1fr)}}

/* ---------- B-S8 · Перелинковка на пробный ---------- */
.leveltest-cross{position:relative;display:grid;gap:22px;align-items:center;padding:clamp(26px,4vw,46px);border-radius:var(--r-xl);background:linear-gradient(135deg,var(--surface-soft),var(--surface-amber));border:1px solid color-mix(in srgb,var(--primary) 24%,var(--line));overflow:hidden}
.leveltest-cross-glow{position:absolute;top:-80px;right:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,var(--brand-soft-glow),transparent 70%);pointer-events:none}
.leveltest-cross-ic{position:relative;width:64px;height:64px;border-radius:var(--r-lg);display:grid;place-items:center;flex:none;background:var(--surface);color:var(--primary);box-shadow:var(--sh-sm)}
.leveltest-cross-ic svg{width:34px;height:34px}
.leveltest-cross-body{position:relative}
.leveltest-cross-title{font-size:var(--fs-h3);font-weight:800;margin:0 0 12px;max-width:24ch}
.leveltest-cross-text{font-size:1rem;color:var(--text-muted);line-height:1.65;margin:0 0 20px;max-width:68ch}
.leveltest-cross-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.leveltest-cross-alt{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.94rem;color:var(--primary)}
.leveltest-cross-alt svg{width:16px;height:16px;transition:transform .16s ease}
.leveltest-cross-alt:hover svg{transform:translateX(3px)}
@media(min-width:760px){.leveltest-cross{grid-template-columns:auto 1fr}}

/* ---------- B-S9 · FAQ ---------- */
.leveltest-faq{max-width:820px;margin-inline:auto}

/* ---------- B-S10 · Финальный CTA ---------- */
.leveltest-final-sec{background:linear-gradient(180deg,transparent,var(--surface-violet))}
.leveltest-final-sec .final-grid{align-items:start}