@layer theme.components {
.s-process__lead { display: flex; flex-direction: column; gap: 12px; margin-block-end: 32px; }
.s-process__steps { display: flex; flex-direction: column; max-width: var(--width-text); margin: 0; padding: 0; list-style: none; }
.s-process__step { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 18px; }
.s-process__rail { display: flex; flex-direction: column; align-items: center; }
.s-process__rail::after { content: ""; flex: 1; inline-size: 1.5px; margin-block: 4px; background: var(--color-border); }
.s-process__step:last-child .s-process__rail::after { background: transparent; }
.s-process__num { display: flex; flex: none; align-items: center; justify-content: center; inline-size: 32px; block-size: 32px; border: 1.5px solid var(--color-accent); border-radius: 50%; background: var(--color-bg-page); color: var(--color-accent-button); font-size: 12.5px; font-weight: 600; }
.section--grey .s-process__num { background: var(--color-bg-section-alt); }
.s-process__body { padding-block: 5px 28px; }
.s-process__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-block-end: 8px; }
.s-process__title { line-height: 1.25; }
.s-process__tag { padding: 3px 7px; border-radius: 5px; background: var(--color-bg-tag-accent); font-size: 11px; font-weight: 600; }
.s-process__text { color: var(--color-text-body); }
.s-process__text + .s-process__text { margin-block-start: 8px; }
.s-process__points { display: grid; gap: 8px; margin: 10px 0 0; }
.s-process__point { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 8px; }
.s-process__point::before { content: "—"; grid-row: span 2; color: var(--color-accent-button); }
.s-process__point dt { margin-block-end: 3px; font-weight: 600; }
.s-process__point dd { margin: 0; color: var(--color-text-body); }
.s-process__conclusion { max-width: var(--width-text); margin: 8px 0 0 50px; font-weight: 500; }

/* Слот под этапами: слева, не шире токена слота. */
.s-process__slot--below { max-inline-size: var(--width-slot); margin-block-start: 28px; }

/* Под этапами: слот слева, изображение справа. */
/* Изображение тянется на высоту слота и само обрезается (object-fit: cover),
   поэтому подходит любое соотношение сторон исходника. */
/* Слот и изображение почти вплотную; на телефоне изображение под слотом (порядок в разметке). */
.s-process__below { align-items: stretch; gap: 12px; margin-block-start: 28px; }
.s-process__figure { position: relative; min-block-size: 240px; margin: 0; overflow: hidden; border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.s-process__figure img { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; }

/* Раскладка row: вводная часть слева, слот справа, этапы рядом под ними.
   Номер с линией вправо до следующего этапа; на телефоне этапы снова столбиком. */
.s-process--row .s-process__lead { margin-block-end: 0; }
.s-process__steps--row {
  grid-column: 1 / -1;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  column-gap: var(--space-slot-gap);
  max-width: none;
  margin-block-start: 8px;
}
.s-process__steps--row .s-process__step { display: flex; flex-direction: column; }
.s-process__steps--row .s-process__rail { flex-direction: row; margin-block-end: 14px; }
.s-process__steps--row .s-process__rail::after {
  inline-size: auto; block-size: 1.5px;
  margin-block: 0; margin-inline: 8px calc(var(--space-slot-gap) * -1);
}
.s-process__steps--row .s-process__body { padding-block: 0; }
.s-process--row .s-process__conclusion { grid-column: 1 / -1; margin-inline-start: 0; }

@media (max-width: 640px) {
  .s-process__steps--row { grid-auto-flow: row; row-gap: 22px; }
  .s-process__steps--row .s-process__step { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 18px; }
  .s-process__steps--row .s-process__rail { flex-direction: column; margin-block-end: 0; }
  .s-process__steps--row .s-process__rail::after { inline-size: 1.5px; block-size: auto; margin: 4px 0; }
}

}