/* ===== Футер сайта =====
 * Разметка — gen/footer.html, раскатка — node gen/apply-footer.js.
 *
 * До 28.07 оформление футера жило инлайновыми style= прямо в разметке и вместе
 * с ней копировалось в каждую из 211 страниц: около 4200 объявлений на сайт при
 * том, что блок один. Инлайн перебивает любой внешний стиль, поэтому правки в
 * общих файлах до футера не долетали, а цвета стояли хексами мимо палитры.
 * Теперь в разметке только классы, значения — здесь и из tokens.css.
 */

footer[data-foot]{background:var(--footer-bg); border-top:1px solid transparent;}
.ft-in{max-width:1180px; margin:0 auto; padding:64px 32px 36px;}

.ft-grid{display:grid; grid-template-columns:minmax(0,1.65fr) minmax(260px,.8fr); gap:64px; align-items:start;}
.ft-lbl{font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--footer-label); margin:0 0 16px;}

/* левая колонка: логотип, описание, кнопки магазинов */
.ft-brand{font-family:'Merriweather',serif; font-style:italic; font-weight:300; font-size:18px;
  letter-spacing:-.005em; color:var(--accent);}
/* --accent в тёмной теме не меняется: тот же #168AE1, что и на креме. На
   тёмном подвале он даёт 3.4 при норме 4.5 для 18px без насыщенности.
   --dark-accent — осветлённый вариант того же зелёного, им уже покрашены
   .btn-2 и .breathe-label в page.css. */
html[data-theme="dark"] .ft-brand{color:var(--dark-accent,#61ADE5);}
/* Знак трёхстрочный: в прежние 22px, рассчитанные под однострочную
   надпись, помещался нечитаемый комок. В шапке он идёт 46px, в подвале
   берём чуть меньше. */
.ft-brand img{height:40px; width:auto; display:block;}
.ft-about{font-size:15px; line-height:1.55; color:var(--neutral-soft); margin:14px 0 20px; max-width:270px;}
/* Воздух между знаком и кнопками магазинов держал абзац .ft-about со своим
   margin-bottom:20px. Абзац убрали 18.08.2026, и знак прилип к бейджам.
   Отступ переносим на сам знак. */
.ft-stores{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:20px;}
/* Official artwork is kept intact. The Google asset includes transparent outer
   padding, so its viewport is slightly wider to align the visible badges. */
.ft-store{display:flex; align-items:center; justify-content:center; height:48px; overflow:hidden;
  border-radius:9px; text-decoration:none; transition:transform .16s ease,opacity .16s ease;}
.ft-store:hover{transform:translateY(-2px); opacity:.92;}
.ft-store-apple{width:144px;}
.ft-store-google{width:168px;}
.ft-store-badge{display:block; max-width:none; height:auto;}
.ft-store-apple .ft-store-badge{width:144px;}
.ft-store-google .ft-store-badge{width:168px;}

/* правая колонка: связь */
.ft-support-links{display:flex; flex-wrap:wrap; gap:8px;}
.ft-contact{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px;
  padding:9px 14px; border:1px solid var(--neutral-line); border-radius:var(--radius-pill);
  color:var(--neutral-soft); font-weight:600; font-size:14px; text-decoration:none; white-space:nowrap;}
.ft-contact:hover{border-color:var(--accent); color:var(--accent);}
.ft-x-mark{font-family:Arial,Helvetica,sans-serif; font-weight:800; font-size:15px; line-height:1;}
.ft-note{font-size:13px; line-height:1.5; color:var(--neutral-soft); margin:14px 0 0;}

/* Экстренная помощь. Раньше шесть номеров шли сплошным абзацем: человеку,
   которому плохо, приходилось вычитывать свою страну из текста. Теперь карточка
   со списком, страна слева, номер справа, цифры выровнены по разрядам.
   Ширина ячейки 240 пикселей, а не 160: подписи вроде «US, text HOME» и
   «UK & Ireland» в узкую ячейку не влезали и выталкивали номер за край. */
/* низ футера */
.ft-rule{height:1px; background:var(--neutral-line); margin:30px 0 18px;}
/* Документы: одна мелкая строка. Отдельного столбца они не стоят.
   Ссылки разводит gap, а не точки-разделители: пять пунктов на телефоне не
   помещаются в строку, а точка от ::before при переносе уезжала в начало
   новой строки и висела там сиротой перед «Crisis policy». Замерено на
   iPhone владельца 13.08 — выглядело сломанной вёрсткой. */
.ft-docs{display:flex; flex-wrap:wrap; align-items:center; gap:2px 22px; font-size:13px; line-height:1.6;}
.ft-docs a{color:inherit; text-decoration:none;}
.ft-docs a:hover{color:var(--accent); text-decoration:underline;}
.ft-legal{font-size:13px; line-height:1.65; color:var(--neutral-soft); max-width:920px; margin:0 0 20px;}
.ft-legal a{color:inherit; text-underline-offset:2px;}
.ft-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  gap:8px 24px; font-size:13px; color:var(--footer-caption);}
.ft-bottom a{color:inherit; text-decoration:none;}
.ft-bottom a:hover{color:var(--neutral-soft);}
.ft-copy{margin:12px 0 0; font-size:12.5px; line-height:1.6; color:var(--footer-caption);}
.ft-trademarks{flex:1 0 100%; font-size:11px; line-height:1.45; opacity:.72;}

@media(max-width:880px){ .ft-grid{grid-template-columns:minmax(0,1.35fr) minmax(230px,.8fr); gap:34px 32px;} }
@media(max-width:520px){
  .ft-grid{grid-template-columns:1fr; gap:30px;}
  .ft-bottom{flex-direction:column; align-items:flex-start; gap:10px;}
  .ft-in{padding:38px 20px 26px;}
  .ft-about{margin:10px 0 18px;}
  .ft-lbl{margin-bottom:12px;}
  .ft-rule{margin:24px 0 16px;}
  .ft-note,.ft-legal,.ft-bottom{font-size:14px;}
  .ft-bottom a{display:inline-flex; align-items:center; min-height:44px;}
  .ft-store,.ft-contact{box-sizing:border-box;}
/* На телефоне ячейки в один столбец: две колонки по 160 пикселей снова
     прижимали бы длинные подписи к номеру. */
.ft-docs{font-size:13px; gap:0 18px;}
}

/* Строка о разработчике и её стили сняты с сайта по решению владельца
   13.08 вместе с классом .ft-built на 202 страницах; возвращать не нужно.
   Правила .ft-docs span и .ft-docs a + a::before убраны вместе с ней:
   разделителей в разметке нет ни на одной странице, а ::before и был
   источником осиротевшей точки при переносе строки. */

/* Пилюли поддержки: как на RU — первая залитая акцентом, вторая тёмная.
   Раньше обе были прозрачными с тонкой рамкой и терялись в футере. */
.ft-contact-mail{background:var(--accent); border-color:var(--accent); color:#fff}
.ft-contact-mail:hover{background:var(--accent-2,#27587C); border-color:var(--accent-2,#27587C); color:#fff}
.ft-contact-x{background:#1a1a1a; border-color:#1a1a1a; color:#fff}
.ft-contact-x:hover{background:#000; border-color:#000; color:#fff}
html[data-theme="dark"] .ft-contact-x{background:#f1e7d4; border-color:#f1e7d4; color:#16181d}

/* ===== Панель в две строки (решение владельца 18.08.2026) =====
   Прежняя раскладка держала сетку в 1180 при полосе текста страницы в 760:
   содержимого хватало на две колонки, между ними оставалось 460 пикселей
   пустоты, и подвал читался как две кучки по краям.
   Теперь первая строка держит оба края: слева знак, риска и кнопки магазинов,
   справа кнопки поддержки. Под линией вторая строка: документы слева, срок
   ответа справа.
   Сделано целиком стилями. Строка про срок ответа лежит в разметке внутри
   колонки поддержки, а нужна во второй строке: контейнеры растворяются через
   display:contents, и все элементы раскладываются по областям сетки .ft-in.
   Так правку не пришлось раскатывать по двум сотням страниц. */
.ft-in{
  max-width:1040px; padding:36px 32px 26px;
  display:grid; align-items:center;
  grid-template-columns:1fr auto;
  grid-template-areas:"brand support" "rule rule" "docs note";
  row-gap:0; column-gap:32px;
}
.ft-grid, .ft-col-brand, .ft-col-support, .ft-bottom, .ft-support-links{display:contents;}
.ft-brand{grid-area:brand; display:flex; align-items:center; gap:24px;}
.ft-brand img{height:46px;}
/* Риска между знаком и магазинами: разделяет бренд и ссылки на приложения,
   не добавляя элемента в разметку. */
.ft-brand::after{content:""; width:1px; height:34px; background:var(--neutral-line); flex:none;}
.ft-stores{grid-area:brand; justify-self:start; margin:0 0 0 calc(46px * 104 / 62 + 24px + 1px + 24px);}
.ft-lbl{display:none;}
.ft-contact{grid-area:support;}
.ft-contact-mail{justify-self:end; margin-right:calc(158px + 12px);}
.ft-contact-x{justify-self:end;}
.ft-rule{grid-area:rule; margin:22px 0 14px;}
.ft-docs{grid-area:docs; display:flex; flex-wrap:wrap; gap:4px 22px; font-size:13px;}
.ft-note{grid-area:note; justify-self:end; margin:0; font-size:12.5px;}
@media(max-width:820px){
  /* На узком экране областей нет: контейнеры растворены, поэтому элементы
     выстраиваются одной колонкой, а порядок задаём order. Сетка с областями
     здесь накладывала знак на кнопки магазинов: обоим доставалась область
     brand. */
  .ft-in{display:flex; flex-direction:column; align-items:stretch; gap:0; padding:34px 20px 24px;}
  .ft-brand,.ft-stores,.ft-contact,.ft-rule,.ft-docs,.ft-note{grid-area:auto; justify-self:auto;}
  .ft-brand{order:1; gap:0;}
  .ft-brand::after{display:none;}
  .ft-stores{order:2; margin:16px 0 0;}
  .ft-contact-mail{order:3; margin:22px 0 0;}
  .ft-contact-x{order:4; margin:10px 0 0;}
  .ft-rule{order:5; margin:22px 0 14px;}
  .ft-docs{order:6;}
  .ft-note{order:7; margin-top:12px;}
  .ft-contact{align-self:flex-start;}
  .ft-docs a{min-height:34px; display:inline-flex; align-items:center;}
}

/* Значок каталога Startup Fame. Каталог просит обратную ссылку, и она стоит в
   колонке бренда под кнопками магазинов: там же, где остальные внешние знаки.
   Картинка чужая и грузится с их домена, поэтому lazy и фиксированный размер —
   иначе при медленном ответе футер подпрыгивал бы. */
.ft-badge{display:block; width:171px; margin-top:14px; line-height:0;
  border-radius:var(--radius-small); overflow:hidden;
  transition:transform .16s ease, opacity .16s ease;}
.ft-badge:hover{transform:translateY(-2px); opacity:.92;}
.ft-badge img{display:block; width:171px; height:54px;}