/* ══════════════════════════════════════════════════════════════
   krylo — посадочная «Спасение чужих проектов».
   Токены, шапка, форма и подвал приходят из ../style.css: одна
   система на две страницы, здесь только собственные секции.

   Поля по порядку: акцент (хиро) → тёмное (шаги, «не переписываем»)
   → бумага (цены) → бумага с тёмной лентой (работы, как на главной)
   → бумага (вопросы) → бумага (заявка) → тёмное (подвал).
   ══════════════════════════════════════════════════════════════ */

/* Курсивные вкрапления. Ровно три на страницу и только в заголовках
   секций: «нет доступов» в хиро, «спасение» в шагах, «разберём
   бесплатно» в заявке (последнее наследуется из ../style.css). */
.sos__h1 em, .flow__h2 em {
  font-family: "PT Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.02em;
}

/* Две разные метки в одной шапке: «Спасение» — это страница,
   на которой посетитель стоит (яркость текста), а оранжевая линейка
   остаётся за скроллспаем и показывает раздел внутри страницы.
   Раньше обе рисовались одинаково, и подчёркнутых пунктов было два. */
.top__nav a[aria-current="page"] {
  color: var(--ink-d);
  font-weight: 500;
}

/* ══ 1 · ХИРО — единственное оранжевое поле ═══════════════════
   Та же композиция, что на главной: текст в верхней трети, полоса
   цифр прижата к низу первого экрана. Крыла здесь нет намеренно —
   на оранжевом оно превратилось бы в аппликацию, а не в объект,
   снятый на чёрном. */
.sos {
  position: relative;
  min-height: calc(100vh - var(--top-h));
  min-height: calc(100svh - var(--top-h));
  display: flex; flex-direction: column;
  padding: clamp(var(--s5), 10vh, var(--s7)) var(--gut) 0;
  background: var(--accent);
  color: var(--on-accent);
  overflow: clip;
}
.sos__text { position: relative; z-index: 1; max-width: 74rem; margin-bottom: clamp(var(--s4), 6vh, var(--s6)); }
.sos__h1 {
  /* потолок такой же, как у заголовка главной: бриф просит 72–120 px,
     и лендинг не может звучать тише страницы «про всё» */
  font-size: clamp(var(--t3), min(6vw, 8.6vh), var(--t7));
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.03em;
  margin-bottom: calc(var(--s3) + var(--s1));
}
/* Иерархия на оранжевом строится кеглем, а не оттенком: приглушённого
   серого на акценте не бывает — он сразу падает ниже 4.5 : 1. */
.sos__sub {
  font-size: var(--t1); line-height: 1.5;
  max-width: 38rem;
  margin-bottom: var(--s4);
}
.sos__cta { text-decoration: none; }

/* Невысокое окно ноутбука: хиро ужимается по вертикали, чтобы полоса
   цифр целиком оставалась над сгибом. Кегли не трогаем — режем
   воздух, он здесь дешевле смысла. */
@media (min-width: 861px) and (max-height: 860px) {
  .sos { padding-top: var(--s4); }
  .sos__text { margin-bottom: var(--s4); }
  .sos__h1 { font-size: clamp(var(--t3), min(5vw, 7.4vh), var(--t6)); }
  .sos__sub { margin-bottom: var(--s3); }
  .sos__note { margin-top: var(--s2); }
  .sos__figs { padding: var(--s3) 0 var(--s3); }
}
.sos__note { font-size: var(--t-1); margin-top: var(--s3); }

/* Цифры: та же сетка, что на главной, но линии — чернила по
   оранжевому, а не по чёрному. */
.sos__figs {
  position: relative; z-index: 1;
  margin: auto 0 0;
  padding: var(--s4) 0 clamp(var(--s4), 6vh, var(--s5));
  border-top: 1px solid var(--line-acc);
}
.sos__figs .figs__i + .figs__i { border-left: 1px solid var(--line-acc); }
.sos__figs .figs__c { color: var(--on-accent); }

/* Фокус остаётся двойным кольцом везде, меняются только чернила.
   На бумаге — как на светлых секциях главной: акцент внутри, тёмное
   снаружи. На оранжевом акцентное кольцо слилось бы с полем, поэтому
   внутреннее тёмное, внешнее светлое: контраст к полю 4.9 : 1 и 2.4 : 1
   по краю, кольцо видно на любом фоне под ним. */
.faq :focus-visible {
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px var(--ink-l);
}
.sos :focus-visible {
  box-shadow: 0 0 0 2px var(--ink-l), 0 0 0 4px var(--light);
}

/* Появление — чистый CSS, как на главной: первый кадр уже с текстом,
   550 мс его проявляют, скрипты для этого не нужны. */
@keyframes sos-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: no-preference) {
  .sos__h1, .sos__sub, .sos__cta, .sos__note, .sos__figs {
    animation: sos-in .55s var(--e-out) both;
  }
  .sos__h1   { animation-delay: .04s; }
  .sos__sub  { animation-delay: .12s; }
  .sos__cta  { animation-delay: .18s; }
  .sos__note { animation-delay: .22s; }
  .sos__figs { animation-delay: .26s; }
}

/* ══ 2 · ШАГИ ═════════════════════════════════════════════════
   Секция .flow целиком из ../style.css: оранжевая линия под
   заголовком, номер и название этапа. Пояснений под этапами нет —
   решение владельца: покупателю они не нужны. */

/* ══ 3 · НЕ ПЕРЕПИСЫВАЕМ ВСЁ С НУЛЯ ═══════════════════════════
   Главный страх заказчика: «сейчас скажут переписать за триста
   тысяч». Отвечаем одним утверждением и четырьмя строками порядка
   работ — без карточек и без иллюстраций. */
.keep {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--s6);
  align-items: start;
  padding: var(--s7) var(--gut) var(--s6);
  border-top: 1px solid var(--line-d);
}
.keep__h2 {
  font-size: var(--t4); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.06;
  max-width: 14ch;
}
.keep__list { counter-reset: keep; }
.keep__list li {
  position: relative;
  padding: var(--s2) 0 var(--s2) var(--s5);
  border-bottom: 1px solid var(--line-d);
  font-size: var(--t1); line-height: 1.35;
}
.keep__list li::before {
  counter-increment: keep;
  content: counter(keep, decimal-leading-zero);
  position: absolute; left: 0; top: var(--s2);
  font-family: "Martian Mono", ui-monospace, monospace;
  font-size: var(--t-1); color: var(--accent);
}

/* ══ 4 · ЦЕНЫ ═════════════════════════════════════════════════
   Таблица и тезис под ней — из ../style.css. Строка бесплатного
   аудита залита акцентом: это точка, в которой посетитель уже стоит,
   дальше — платные работы. Тёмный текст на акценте 4.9 : 1. */
.price__free { background: var(--accent); border-bottom-color: transparent; }
.price__free th, .price__free td { color: var(--on-accent); font-weight: 700; }
.price__free th { padding-left: var(--s2); }
.price__t .price__free td { padding-right: var(--s2); }
/* Правило главной гасит последнюю строку таблицы — там это хвост
   прайса. Здесь последняя строка — обычная услуга, и приглушённой
   она читается как недоступная. */
.price__t tbody tr:last-child th, .price__t tbody tr:last-child td { color: inherit; }
.price__t tbody tr:last-child th { font-weight: 700; }


/* ══ 5 · ВОПРОСЫ ══════════════════════════════════════════════
   Раскрытие нативным <details>: работает без скриптов и без
   разметки для ролей. Заголовок стоит в левой колонке, ответы —
   в правой: сетка обратная ценам, где заголовок тоже слева, но
   правая колонка плотная таблица. */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: var(--s6);
  align-items: start;
  padding: var(--s7) var(--gut);
  background: var(--light); color: var(--ink-l);
}
.faq__h2 {
  font-size: var(--t4); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.06;
}
.q { border-bottom: 1px solid var(--line-l); }
.q:first-child { border-top: 1px solid var(--line-l); }
.q__q {
  display: flex; align-items: baseline; gap: var(--s3);
  padding: var(--s3) 0;
  font-size: var(--t1); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.25;
  cursor: pointer;
  list-style: none;
  transition: color .14s ease-out;
}
.q__q::-webkit-details-marker { display: none; }
/* Знак раскрытия — плюс из двух линий, без иконочных шрифтов.
   Вторая линия исчезает у раскрытого вопроса, оставляя минус. */
.q__q::after {
  content: "";
  flex: 0 0 auto;
  width: 14px; height: 14px;
  margin-left: auto;
  align-self: center;
  background:
    linear-gradient(var(--accent), var(--accent)) 50% 50% / 14px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 50% 50% / 2px 14px no-repeat;
  transition: transform .14s ease-out;
}
.q[open] .q__q::after {
  background: linear-gradient(var(--accent), var(--accent)) 50% 50% / 14px 2px no-repeat;
}
.q__q:hover { color: var(--mute-l); }

/* Оранжевый в наведении только на стрелке: кнопка остаётся чёрным
   прямоугольником, как во всей системе. */
.ask .btn--dark span[aria-hidden] { transition: color .14s ease-out; }
.ask .btn--dark:hover span[aria-hidden] { color: var(--accent); }

/* Подсказка в поле — пример, а не инструкция: приглушена и не спорит
   с введённым текстом. */
.f textarea::placeholder { color: var(--mute-l); opacity: 1; }
.q__a {
  padding-bottom: var(--s3);
  max-width: 62ch;
  color: var(--mute-l);
}
/* Ответ выезжает, а не появляется рывком; при выключенном движении
   страховка из ../style.css обнуляет и длительность, и задержку. */
@media (prefers-reduced-motion: no-preference) {
  .q[open] .q__a { animation: q-in .25s var(--e-out) both; }
}
@keyframes q-in { from { opacity: 0; transform: translateY(-6px); } }

/* ══ АДАПТИВ ══════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .keep { grid-template-columns: 1fr; gap: var(--s4); padding-top: var(--s6); }
  .faq { grid-template-columns: 1fr; gap: var(--s4); }
}

@media (max-width: 860px) {
  .sos { min-height: 0; padding-top: clamp(var(--s5), 9vh, var(--s6)); }
  .sos__h1 { font-size: clamp(var(--t3), 8.6vw, var(--t5)); line-height: 1.04; }
  .sos__h1 br { display: none; }
  .sos__text { margin-bottom: var(--s5); }
  /* третья и четвёртая плитки уезжают во второй ряд — линия между
     рядами тоже чернильная, а не светлая */
  .sos__figs .figs__i:nth-child(3),
  .sos__figs .figs__i:nth-child(4) { border-top: 1px solid var(--line-acc); }
}

@media (max-width: 560px) {
  .sos { padding-bottom: 0; }
  .sos__sub { font-size: var(--t0); }
  .faq, .keep { padding-top: var(--s5); padding-bottom: var(--s5); }
  .keep__h2 { font-size: var(--t3); max-width: none; }
  .keep__list li { font-size: var(--t0); padding-left: var(--s4); }
  .faq__h2 { font-size: var(--t3); }
  .q__q { font-size: var(--t0); gap: var(--s2); }
  /* в телефонной раскладке строка таблицы — флекс без внутренних
     полей: у залитой строки текст не должен липнуть к краю заливки */
  .price__t tbody tr.price__free { padding-left: var(--s2); padding-right: var(--s2); }
}