/* Условия, возвраты, данные (terms.html).
   Грузится ПОСЛЕ type.css + base.css + seo.css — той же тройкой, что посадочные.
   Шапка, подвал, поля (--gut), герой и сетка карточек берутся оттуда, один в один.
   Здесь только то, чего в seo.css нет: полноширинный герой без пустой боковой
   колонки, карточка-акцент для данных, пара «возвращаем / не возвращаем», строка
   «как возвращаем» и перечень для разбора. Ни одного своего цвета — только токены. */

/* Ритм страницы — ПЛОТНЫЙ. Между полосами на посадочных стоит --step (до 164px): там это
   воздух вокруг крупных блоков. У документа такие провалы читаются как пустота «на
   отвяжись», и первый заход с шагом в 32px оказался всё ещё рыхлым — страница выглядела
   разорванной на куски, особенно сверху, где к 80px шапки прибавлялись ещё 32.
   Свой шаг: 16px между секциями, 12 сверху под шапкой. Документ читают подряд, ему
   нужна плотность, а не галерейные поля. */
.terms-hero{padding:12px var(--gut) 0}
.sec{padding-top:var(--s2)}
/* Секция вплотную к предыдущей: разбор продолжает тему возвратов. */
.sec.tighter{padding-top:var(--s1)}
/* Заголовок раздела — ближе к своим карточкам: 32px под ним отрывали его от того, что
   он называет. */
.sec > h2{margin-bottom:var(--s2)}

/* Герой — как у посадочных, но в одну колонку: боковой таблицы-панели у условий
   нет, и пустая правая половина сетки читалась бы как незаполненная. */
.terms-hero h1{font-size:var(--t4);font-weight:700;line-height:1.1;
  letter-spacing:-.025em;text-wrap:balance}
.terms-hero .seo-lead{max-width:64ch}

/* Карточки условий — своя сетка, не seo-шная: там четыре в ряд под ровно четыре шага,
   а здесь их шесть, и 4+2 давало обрубленный второй ряд. По три в ряд: 3+3 на широком,
   2+2+2 на среднем, по одной на узком — шесть делится на всё, ряд всегда полон. */
/* РЯД РОВНЫЙ, НО РАВНЯЕТСЯ ПО СВОЕМУ РЯДУ, А НЕ ПО ВСЕЙ СЕТКЕ.
   Здесь стояло `grid-auto-rows:1fr` — оно равняет ВСЕ ряды между собой, и после того как
   «Данные» разрослись в полосу на пол-экрана, короткие плашки верхнего ряда раздулись до
   ЕЁ высоты. Отсюда и брались гигантские пустые карточки.
   Обычный `align-items:stretch` (умолчание грида) равняет только внутри ряда: тройка
   сверху выходит одной высоты по самой высокой из ТРЁХ, рваных низов нет, а полосы
   ниже живут своей высотой, потому что каждая занимает ряд целиком. */
.cards{display:grid;grid-template-columns:1fr;gap:var(--s2);align-items:stretch}
@media(min-width:560px){.cards{grid-template-columns:repeat(2,1fr)}}
/* ШЕСТЬ КОЛОНОК ВМЕСТО ТРЁХ — чтобы ряд можно было делить и на три, и на два.
   При трёх колонках последняя пара карточек занимала две клетки из трёх, и справа
   зияла пустая треть. Шесть делятся нацело и на 2 (тройка сверху), и на 3 (пара
   снизу), поэтому оба ряда заполняются целиком без единой дыры. */
@media(min-width:900px){
  .cards{grid-template-columns:repeat(6,1fr)}
  .cards > .step-card{grid-column:span 2}
  .cards > .step-card.is-key{grid-column:1 / -1}
  /* Последняя пара — по половине ряда каждая. */
  .cards > .step-card:nth-last-child(-n+2){grid-column:span 3}
}

/* ШИРИНА ПО ОБЪЁМУ ТЕКСТА, А НЕ ПО ПОРЯДКУ В СПИСКЕ.
   Длинные разделы — «Как живёт ваш заказ» и «Данные» — идут ПОЛОСОЙ во всю ширину, как
   «Возвраты»: в узкой колонке такой текст рвётся на два экрана по высоте. Короткие
   справочные остаются плитками по три в ряд — им ширина не нужна, и растягивать их
   значит гнать пустоту.
   Признак — `is-key`, то есть сам объём и вес раздела, а не его номер: добавится ещё
   один длинный, он получит полосу автоматически. */
@media(min-width:560px){
  .cards > .step-card.is-key{grid-column:1 / -1}
}

/* Заголовок карточки. У seo-шного .step-t стоит margin-top (там перед ним идёт номер
   шага); у нас номера нет, заголовок — первый в карточке, и этот отступ висел поверх
   паддинга — над каждым заголовком зияла двойная пустота. Гасим: паддинг карточки и так
   держит воздух. */
.step-card .step-t{margin-top:0}
/* Поля внутри плашки: 32px по кругу — это галерейный воздух, а не документ. Текста в
   карточке немного, и такая рама делала её вдвое больше содержимого. */
.step-card{padding:var(--s2)}

/* ТЕКСТ ЗАНИМАЕТ ВСЮ ПЛАШКУ. Потолок в 78 знаков я сюда поставил и был неправ: он
   отмерял ширину ПРЕЖНЕЙ узкой карточки, и в широкой полосе текст обрывался на середине,
   оставляя справа пустую половину. Ширину задаёт плашка, а не отдельное правило для
   абзаца внутри неё. */

/* Данные — не мелкий шрифт, а свойство продукта: карточка с клеевой рамкой бренда. */
.step-card.is-key{border-color:var(--clay);background:var(--clay-soft)}
.step-card.is-key .step-t{color:var(--text)}

/* Возвраты — «да / нет» рядом; на широком экране в две колонки, на узком в одну. */
.two{display:grid;grid-template-columns:1fr;gap:var(--s2);align-items:stretch}
@media(min-width:720px){.two{grid-template-columns:1fr 1fr}}
.give,.deny{padding:var(--s2);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r)}
.give{border-left:3px solid var(--g5)}
.deny{border-left:3px solid var(--clay)}
.yn-tag{display:block;font-size:var(--t2);font-weight:500;color:var(--text);
  margin-bottom:var(--s1)}
.give p,.deny p{color:var(--muted);text-wrap:pretty}
/* Как возвращаем — НЕ третья плашка в рамке (висела сиротой под парой карточек и рвала
   блок), а тихая подпись под ними: две карточки и строка «как» читаются одним куском. */
/* Строка «как возвращаем» — ОДНОЙ строкой на широком экране. Потолок в 80 знаков рвал
   её надвое там, где места хватает с запасом; на узком она перенесётся сама. */
.how{margin-top:var(--s2);color:var(--muted);text-wrap:pretty}

/* Надпись «что надо сделать» — подзаголовок к h2, а не строка, висящая в пустоте.
   Была вверх ногами: 32px от заголовка (его margin-bottom) и 0 до карточек — читалась
   оторванной от заголовка и приклеенной к карточкам. Теперь наоборот: h2 с подзаголовком
   подрезаем снизу (.tight), надпись липнет к нему, и своя щель до карточек. */
.sec > h2.tight{margin-bottom:var(--s1)}
/* Подзаголовок раздела помощи — РОВНО две строки, перенос задан в самом тексте.
   Потолок в 70 знаков ломал каждую из них ещё раз, и получалось четыре. */
.note{margin-top:0;margin-bottom:var(--s2);color:var(--muted);text-wrap:pretty}
.checklist{margin:var(--s2) 0 0;padding-left:1.1em;color:var(--muted)}
.checklist li{margin-top:var(--s1);text-wrap:pretty}
.checklist b{color:var(--text);font-weight:500}
.contact{margin-top:var(--s2);color:var(--muted)}
.contact a{color:var(--clay)}

/* Дата обновления — тихо, в полях страницы. */
.upd{padding:var(--s3) var(--gut) 0;color:var(--muted);font-size:var(--t2)}

/* ТЕКСТ ВЫКЛЮЧЕН ПО ШИРИНЕ — оба края ровные, а не рваный правый.
   Переносы обязательны вместе с выключкой: без них браузер растягивает пробелы, и в
   русском тексте с длинными словами получаются «реки» — белые прогалы поперёк абзаца.
   Язык страницы ставит applyLang, поэтому словарь переносов подхватывается сам. */
.step-card .step-d,
.give p, .deny p,
.how, .note,
.qa .a{text-align:justify;hyphens:auto;-webkit-hyphens:auto}