/* ============================================================
   Секция join — «Что получает производитель» (#benefits)
   и «Как это будет» (#steps).
   Версия 7 от 28.09.2026 — вариант A «Знак»: сетка выгод 3×2 на
   табличках .plate--deep (styles.css 4.19), крупная строка-контраст
   с пунктиром над ней, кнопка по центру; шаги — таблички-номера на
   пунктирной «дороге» (десктоп — в ряд, <960 — столбиком, дорога
   вертикальная). Прорисовку пунктира шагов даёт эффект «Разметка»
   (styles.css 9.4) — без JS пунктир просто стоит.
   Версии 1–6 — раздел участия гонки «Валдайская высота» (см. git).
   ============================================================ */

/* ---------- #benefits ---------- */
.ben-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.ben{padding:32px 34px 34px}
.ben-t{margin:0 0 10px;font-size:20px;line-height:1.28;font-weight:700;color:var(--paper)}
.ben-p{margin:0;font-size:16px;line-height:1.55;color:var(--ink)}
.contrast{margin:80px auto 0;max-width:1000px;text-align:center;font-size:36px;line-height:1.22;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;text-wrap:balance}
.contrast::before{content:'';display:block;width:166px;height:4px;margin:0 auto 30px;
  background:repeating-linear-gradient(90deg,var(--sand) 0 28px,transparent 28px 46px)}
.contrast span{display:block}
.contrast span:first-child{color:var(--ink-2)}
.contrast span:last-child{color:var(--sand)}
.ben-cta{display:flex;justify-content:center;margin:36px 0 0}

/* ---------- #steps ---------- */
.steps-list{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin:0;padding:0;list-style:none}
.steps-list::before{content:'';position:absolute;left:28px;right:0;top:26px;height:4px;
  background:repeating-linear-gradient(90deg,var(--sand) 0 18px,transparent 18px 32px);
  -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
.step{position:relative;min-width:0}
.step-n{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin:0 0 24px;
  border:2px solid var(--sand);border-radius:var(--r-out);background:linear-gradient(180deg,#25466f,#1c3456);
  font-size:24px;line-height:1;font-weight:700;color:var(--paper);box-shadow:0 8px 18px rgba(4,9,18,.4)}
.step-n::before{content:'';position:absolute;inset:4px;border:1px solid rgba(246,241,231,.45);border-radius:var(--r-in)}
.step-t{margin:0 0 8px;font-size:19px;line-height:1.3;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--paper)}
.step-p{margin:0;font-size:16px;line-height:1.55;color:var(--ink)}

/* ---------- Адаптив ---------- */
@media (max-width:959px){
  .ben-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps-list{grid-template-columns:1fr;gap:30px}
  .steps-list::before{left:26px;right:auto;top:30px;bottom:24px;width:4px;height:auto;
    background:repeating-linear-gradient(180deg,var(--sand) 0 16px,transparent 16px 30px);
    -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent);mask-image:linear-gradient(180deg,#000 80%,transparent)}
  .step{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:20px;align-items:start}
  .step-n{grid-row:1/span 2;margin:0}
  .step-t{margin-top:4px}
}
@media (max-width:767px){
  .ben-grid{grid-template-columns:1fr;gap:16px}
  .ben{padding:26px 24px 28px}
  .contrast{margin-top:56px;font-size:24px}
  .contrast::before{width:120px;margin-bottom:24px}
  .ben-cta .btn{width:100%}
  .step{grid-template-columns:52px minmax(0,1fr);column-gap:16px}
  .step-n{width:52px;height:52px;font-size:22px}
  .steps-list::before{left:24px}
}