/* ============================================================
   LMSka — страница «Онбординг сотрудников».
   Подключается ПОСЛЕ style.css и использует те же токены:
   белый фон, единственный акцент #11B481, радиусы 20/12/999.
   Здесь только блоки, которых нет на главной.
   ============================================================ */
.assessment-top{
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 40px;
}

.assessment-top .sec-head{
  flex: 1 0 80%;
  max-width: 100%;
  margin-bottom: 0;
}
.assessment-top .lead {
  max-width: 100%;
}
@media (max-width: 768px) {
  .assessment-top{
    flex-direction: column;
    margin-bottom: 20px;
  }
}
/* ---------- Герой страницы ---------- */
.hero--onb {
  background:
    radial-gradient(880px 400px at 92% -14%, var(--brand-50), transparent 62%),
    #fff;
}
.hero--onb .hero__grid { grid-template-columns: 1.05fr .95fr; }
.hero__media--plain {
  border: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
}

/* ---------- Стоимость новичка: крупные качественные утверждения ---------- */
.cost {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-block: 1px solid var(--line);
}
.cost__item {
  padding: 30px 28px 30px 0;
  border-inline-end: 1px solid var(--line);
}
.cost__item:last-child { border-inline-end: 0; }
.cost__item:not(:first-child) { padding-inline-start: 28px; }
.cost__item b {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 8px;
}
.cost__item p { font-size: 15px; color: var(--ink-2); }
.cost__item .ico { font-size: 26px; color: var(--brand); margin-bottom: 14px; display: block; }

@media (max-width: 900px) {
  .cost { grid-template-columns: 1fr; }
  .cost__item { padding: 24px 0; border-inline-end: 0; border-block-end: 1px solid var(--line); }
  .cost__item:not(:first-child) { padding-inline-start: 0; }
  .cost__item:last-child { border-block-end: 0; }
}

/* ---------- Выделенный кейс: обучение кандидатов до найма ---------- */
.case {
  border-radius: var(--r-card);
  border: 1px solid var(--brand-100);
  background:
    radial-gradient(760px 360px at 12% 0%, rgba(17, 180, 129, .1), transparent 68%),
    var(--brand-tint);
  padding: 54px 48px 48px;
}
.case__head { max-width: 720px; margin-bottom: 44px; }
.case__head h2 { margin-bottom: 16px; }

/* Воронка отбора: столбцы сужаются к финалу */
.funnel {
  display: grid;
  gap: 12px;
  max-width: 940px;
  margin-inline: auto;
}
.funnel__row {
  display: grid;
  grid-template-columns: 56% 1fr;
  align-items: center;
  gap: 22px;
}
.funnel__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  border-radius: var(--r-control);
  background: #fff;
  border: 1px solid var(--brand-100);
  box-shadow: var(--sh-1);
  min-width: 0;
  width: 100%;
}
.funnel__row:nth-child(2) .funnel__bar { width: 88%; }
.funnel__row:nth-child(3) .funnel__bar { width: 74%; }
.funnel__row:nth-child(4) .funnel__bar {
  width: 60%;
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: var(--sh-brand);
}
.funnel__bar .ico { font-size: 23px; color: var(--brand-700); flex: none; }
.funnel__row:nth-child(4) .funnel__bar .ico { color: #fff; }
.funnel__bar b { font-size: 16px; font-weight: 700; }
.funnel__note {
  font-size: 14.5px;
  color: var(--ink-3);
  line-height: 1.45;
  flex: 1;
  min-width: 0;
}

.case__out {
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1px solid var(--brand-100);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.case__out > div { display: flex; gap: 12px; align-items: flex-start; }
.case__out .ico { font-size: 23px; color: var(--brand-700); margin-top: 2px; flex: none; }
.case__out b { display: block; font-size: 16px; margin-bottom: 5px; }
.case__out p { font-size: 14.5px; color: var(--ink-2); }
.case .btn-row { margin-top: 38px; }

@media (max-width: 900px) {
  .case { padding: 34px 22px 32px; }
  .funnel { gap: 18px; }
  .funnel__row { grid-template-columns: 1fr; gap: 8px; }
  .funnel__bar,
  .funnel__row:nth-child(2) .funnel__bar,
  .funnel__row:nth-child(3) .funnel__bar,
  .funnel__row:nth-child(4) .funnel__bar { width: 100%; }
  .case__out { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- Панель аудитории в табах ---------- */
.aud-mark {
  border-radius: var(--r-card);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  min-height: 280px;
  display: grid;
  place-items: center;
  padding: 40px;
}
.aud-mark img { width: 108px; height: 108px; object-fit: contain; }
@media (max-width: 900px) { .aud-mark { min-height: 180px; padding: 28px; } .aud-mark img { width: 76px; height: 76px; } }

/* ---------- Сценарии онбординга (иконки-картинки текущего сайта) ---------- */
.scen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.scen__item {
  padding: 30px 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: #fff;
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out), border-color 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .scen__item:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--brand-100); }
}
.scen__ico {
  width: 56px; height: 56px;
  border-radius: 15px;
  background: var(--brand-50);
  display: grid; place-items: center;
  margin-bottom: 20px;
}
.scen__ico img { width: 30px; height: 30px; object-fit: contain; }
.scen__item h3 { font-size: 18px; margin-bottom: 9px; }
.scen__item p { font-size: 15px; color: var(--ink-2); }

@media (max-width: 940px) { .scen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .scen { grid-template-columns: 1fr; } }

/* ---------- Четыре задачи платформы ---------- */
.quad {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.quad__item {
  padding: 32px 32px 32px 0;
  border-inline-end: 1px solid var(--line);
  border-block-end: 1px solid var(--line);
}
.quad__item:nth-child(2n) { border-inline-end: 0; padding-inline-start: 32px; padding-inline-end: 0; }
.quad__item:nth-last-child(-n+2) { border-block-end: 0; }
.quad__item h3 { font-size: 20px; margin-bottom: 10px; }
.quad__item p { font-size: 15.5px; color: var(--ink-2); }
.quad__item .ico-badge { margin-bottom: 18px; }

@media (max-width: 760px) {
  .quad { grid-template-columns: 1fr; }
  .quad__item,
  .quad__item:nth-child(2n) { padding: 26px 0; border-inline-end: 0; padding-inline-start: 0; }
  .quad__item:nth-last-child(-n+2) { border-block-end: 1px solid var(--line); }
  .quad__item:last-child { border-block-end: 0; }
}

/* ---------- Типы домашних заданий ---------- */
.hw {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 36px;
}
.hw__card {
  padding: 28px 24px 26px;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: #fff;
}
.hw__card:first-child { background: var(--brand-50); border-color: var(--brand-100); }
.hw__card .ico-badge { margin-bottom: 18px; background: #fff; border: 1px solid var(--line); }
.hw__card:first-child .ico-badge { border-color: var(--brand-100); }
.hw__card h3 { font-size: 17px; margin-bottom: 9px; }
.hw__card p { font-size: 14.8px; color: var(--ink-2); }

@media (max-width: 1000px) { .hw { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hw { grid-template-columns: 1fr; } }

/* ---------- Метрики аналитики ---------- */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
}
.metric {
  padding: 28px 24px 28px 0;
  border-inline-end: 1px solid var(--line);
}
.metric:last-child { border-inline-end: 0; }
.metric:not(:first-child) { padding-inline-start: 24px; }
.metric .ico { font-size: 25px; color: var(--brand); display: block; margin-bottom: 14px; }
.metric h3 { font-size: 17px; margin-bottom: 8px; }
.metric p { font-size: 14.5px; color: var(--ink-2); }

@media (max-width: 940px) {
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric { padding: 24px 18px; border-block-end: 1px solid var(--line); }
  .metric:not(:first-child) { padding-inline-start: 18px; }
  .metric:nth-child(2n) { border-inline-end: 0; }
  .metric:nth-last-child(-n+2) { border-block-end: 0; }
}
@media (max-width: 520px) {
  .metrics { grid-template-columns: 1fr; }
  .metric { border-inline-end: 0; }
  .metric:last-child { border-block-end: 0; }
}

/* Широкий скриншот под метриками */
.shot-wide {
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 20px;
  box-shadow: var(--sh-1);
}
.shot-wide img { border-radius: 12px; width: 100%; }

/* ---------- Две панели: бренд и безопасность ---------- */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.duo__panel {
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.duo__panel--accent { background: var(--brand-50); border-color: var(--brand-100); }
.duo__body { padding: 34px 32px 30px; }
.duo__body h3 { margin-bottom: 12px; }
.duo__body p { font-size: 15.5px; color: var(--ink-2); }
.duo__body p + p { margin-top: 12px; }
.duo__pic { margin-top: auto; padding: 0 32px 32px; }
.duo__pic img { width: 100%; border-radius: 14px; }

@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }

/* ---------- Хлебные крошки ---------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 22px;
  font-size: 14px;
  color: var(--ink-3);
}
.crumbs a { color: var(--ink-3); transition: color 160ms var(--ease-out); }
.crumbs a:hover { color: var(--brand-700); }
.crumbs .ico { font-size: 17px; opacity: .55; }