/* Служебные страницы: 404 и «спасибо» */

/* Экран-заявление: одна мысль по центру, без соседей. Высота от вьюпорта,
   но не на весь экран — под первым экраном обязана виднеться следующая
   секция, иначе страница читается как тупик. */
.service{
  position:relative;overflow:hidden;
  display:flex;align-items:center;
  min-height:min(78svh,760px);
  padding-block:calc(var(--header-h) + var(--sp-7)) var(--sp-7)
}
.service__inner{max-width:52ch}
.service h1{max-width:16ch}
.service .lead{max-width:var(--measure)}
.service__actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-6)}

/* Отдельного фирменного паттерна у бренда нет, поэтому графику первого
   экрана делает сама типографика: код ошибки крупно и почти прозрачно.
   Он декоративный, поэтому вынесен из потока и скрыт от скринридеров. */
.service__watermark{
  position:absolute;right:-.06em;bottom:-.28em;z-index:0;
  font-size:clamp(220px,42vw,620px);font-weight:600;line-height:.8;
  letter-spacing:-.04em;color:rgba(255,255,255,.06);
  user-select:none;pointer-events:none
}
.service .container{position:relative;z-index:1}

/* «Спасибо»: знак подтверждения квадратный, как и всё остальное. */
.service--thanks{background:var(--lgf-tint)}
.service__mark{
  display:grid;place-items:center;width:72px;height:72px;
  border:1px solid var(--lgf-blue);color:var(--lgf-blue)
}
.service__mark .icon{width:34px;height:34px}

/* --------------------------------------------------------- 404: куда идти */

.dest{display:grid;gap:1px;background:var(--lgf-rule);border:1px solid var(--lgf-rule)}
@media (min-width:640px){ .dest{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .dest{grid-template-columns:repeat(3,minmax(0,1fr))} }
.dest__item{background:var(--lgf-white);display:flex}
.dest__link{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;
  gap:var(--sp-1) var(--sp-3);width:100%;padding:var(--sp-4);
  transition:background var(--dur) var(--ease)
}
.dest__link:hover{background:var(--lgf-tint)}
.dest__title{font-size:var(--fs-h4);font-weight:500;line-height:1.3;color:var(--lgf-blue-dark)}
.dest__text{grid-column:1;font-size:var(--fs-small);color:var(--lgf-muted);line-height:1.6}
.dest__arrow{
  grid-row:1;grid-column:2;width:18px;height:18px;margin-top:4px;
  color:var(--lgf-blue);transition:transform var(--dur) var(--ease)
}
.dest__link:hover .dest__arrow{transform:translateX(4px)}
.dest__link:hover .dest__title{color:var(--lgf-blue)}

/* ------------------------------------------------------- «спасибо»: шаги */

.steps{border-top:var(--border)}
.steps__item{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-3);
  padding:var(--sp-4) 0;border-bottom:var(--border)
}
.steps__num{
  font-size:var(--fs-h3);font-weight:600;line-height:1;color:var(--lgf-blue);
  font-variant-numeric:tabular-nums;min-width:2.2em
}
.steps__body{display:flex;flex-direction:column;gap:6px}
.steps__title{font-size:var(--fs-h4);font-weight:500;line-height:1.3}
.steps__text{font-size:var(--fs-small);color:var(--lgf-muted);line-height:1.65;max-width:52ch}
@media (max-width:479px){
  .steps__item{grid-template-columns:minmax(0,1fr);gap:var(--sp-1)}
  .steps__num{font-size:var(--fs-h4)}
}