/* ==========================================================================
   ПРОЗИ. Промо-сайт: основа, партнёрам, установка на iPhone, скачать.
   Вёрстка по макету заказчика. Цвета сняты пипеткой с исходных экранов:
   фирменный зелёный #28A24D, светло-зелёный для крупных цифр #D3E2B7.
   Шрифты Wix Madefor лежат локально в assets/fonts — те же, что в самом
   приложении, и без обращения к CDN Google.
   ========================================================================== */

:root{
  color-scheme: light;

  /* фирменные */
  --green:        #28A24D;
  --green-hover:  #1F8B41;
  --green-press:  #197537;
  --green-soft:   #E9F4EC;
  /* Зелёный текст мелким кеглем по белому: #28A24D даёт всего 3.3:1 и не
     проходит WCAG AA. Заливки остаются фирменными, темнеет только текст. */
  --green-ink:    #197537;   /* 5.4:1 к белому */
  --sage:         #D3E2B7;   /* крупные номера шагов */
  --gold:         #F8C813;   /* монета в знаке */

  /* нейтральные */
  --bg:           #FFFFFF;
  --ink:          #000000;
  --ink-2:        #3F3F3F;
  --ink-3:        #6E6E6E;
  --hair:         rgba(0,0,0,.14);
  --hair-soft:    rgba(0,0,0,.08);
  --hair-on-green:rgba(255,255,255,.34);

  /* радиусы: полоса-кнопка прямоугольная, действие-пилюля круглая */
  --r-bar:   6px;
  --r-pill:  999px;
  --r-field: 4px;
  --r-shot:  34px;

  /* шаг сетки */
  --gutter: clamp(20px, 5vw, 40px);
  --measure: 1200px;

  /* движение: отклик до 300ms, появление 600-900ms, одна кривая */
  --ease: cubic-bezier(.23, 1, .32, 1);
  --t-fast: 180ms;
  --t-mid:  280ms;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Wix Madefor Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* у figure в браузере свои поля по 40px, из-за них сетка вылезала вбок */
h1,h2,h3,h4,p,figure,figcaption{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }

h1,h2,h3{
  font-family:'Wix Madefor Display', 'Wix Madefor Text', system-ui, sans-serif;
  font-weight:500;
  line-height:1.16;
  letter-spacing:-.015em;
  text-wrap:balance;      /* не оставляет висячее слово в заголовке */
  hyphens:none;
}
p{ text-wrap:pretty; }

.sprite{ display:none; }

/* видно только скринридеру */
.vh{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* видимый фокус одинаковый на всём сайте */
:where(a,button,input,summary,[tabindex]):focus-visible{
  outline:3px solid var(--green);
  outline-offset:3px;
  border-radius:2px;
}
.on-green :where(a,button,input):focus-visible{ outline-color:#fff; }

/* ============================== каркас =================================== */

.wrap{
  width:100%;
  max-width:var(--measure);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap--narrow{ max-width:748px; }   /* колонка страницы «Скачать» с макета */

.section{ padding-block:clamp(56px, 8vw, 104px); }
.section--tight{ padding-block:clamp(40px, 6vw, 72px); }

.section__head{ margin-bottom:clamp(36px, 5vw, 64px); }
.section__head--center{ text-align:center; }

.h-section{ font-size:clamp(28px, 3.4vw, 42px); }
.h-caps{
  font-size:clamp(26px, 2.9vw, 36px);   /* «НЕ ПРОСТО РАЗМЕЩЕНИЕ» на макете в одну строку */
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0;                 /* положительный трекинг крупнее 16px не ставим */
}
.lead{
  font-size:clamp(16px, 1.3vw, 19px);
  color:var(--ink-2);
  max-width:62ch;
}
.section__head--center .lead{ margin-inline:auto; }

/* ============================== иконки =================================== */

.icon{
  width:24px; height:24px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.icon--sm{ width:18px; height:18px; }
.icon--lg{ width:34px; height:34px; stroke-width:1.4; }

/* знак: белый контур на зелёном диске, как в макете.
   Лежит отдельным файлом assets/logo.svg, чтобы длинный контур не
   дублировался в четырёх страницах. */
.logo{ display:inline-flex; align-items:center; gap:12px; }
.logo__img{
  width:var(--logo-size, 44px);
  height:var(--logo-size, 44px);
  flex:none;
}
.logo__word{
  font-family:'Wix Madefor Display', sans-serif;
  font-weight:600; font-size:19px; letter-spacing:-.01em;
}
.logo--lg{ --logo-size:104px; }
a.logo{ transition:opacity var(--t-fast) var(--ease); }
a.logo:hover{ opacity:.78; }

/* ============================== кнопки =================================== */

.btn{
  --btn-bg:var(--green);
  --btn-fg:#fff;
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  min-height:56px;
  padding:14px 34px;
  border-radius:var(--r-pill);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-weight:500; font-size:17px; line-height:1.2;
  text-align:center;
  overflow:hidden;
  transition:background var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
}
/* диагональный блик с макета */
.btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(104deg,
              rgba(255,255,255,0) 26%,
              rgba(255,255,255,.13) 26%,
              rgba(255,255,255,.13) 40%,
              rgba(255,255,255,0) 40%);
  pointer-events:none;
}
.btn > *{ position:relative; z-index:1; }
.btn:hover{ background:var(--green-hover); box-shadow:0 8px 22px rgba(40,162,77,.28); }
.btn:active{ background:var(--green-press); transform:translateY(1px); box-shadow:none; }

.btn--ghost{
  --btn-bg:transparent;
  --btn-fg:var(--green-ink);
  box-shadow:inset 0 0 0 2px var(--green);
}
.btn--ghost::after{ display:none; }
.btn--ghost:hover{ --btn-bg:var(--green-soft); box-shadow:inset 0 0 0 2px var(--green); }
.btn--ghost:active{ --btn-bg:#DCEDE1; transform:translateY(1px); }

.btn--on-green{
  --btn-bg:#fff;
  --btn-fg:var(--green);
}
.btn--on-green:hover{ background:#F1F8F3; box-shadow:0 8px 22px rgba(0,0,0,.16); }
.btn--on-green:active{ background:#E4F1E8; }

.btn--block{ width:100%; }
/* кнопка под формой на макете прямоугольная, радиус как у полос-кнопок */
.btn--rect{ border-radius:var(--r-bar); }

/* полоса-кнопка магазина: иконка, подпись слева, шеврон справа */
.store{
  position:relative;
  display:flex; align-items:center; gap:16px;
  width:100%;
  min-height:64px;
  padding:16px 22px;
  border-radius:var(--r-bar);
  background:var(--green);
  color:#fff;
  font-weight:600; font-size:18px;
  overflow:hidden;
  transition:background var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
}
.store::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(104deg,
              rgba(255,255,255,0) 14%,
              rgba(255,255,255,.14) 14%,
              rgba(255,255,255,.14) 27%,
              rgba(255,255,255,0) 27%);
  pointer-events:none;
}
.store > *{ position:relative; z-index:1; }
.store__label{ flex:1; text-align:left; }   /* родитель центрирует текст, подпись держим слева */
.store__go{ transition:transform var(--t-fast) var(--ease); }
.store:hover{ background:var(--green-hover); box-shadow:0 10px 26px rgba(40,162,77,.26); }
.store:hover .store__go{ transform:translateX(4px); }
.store:active{ background:var(--green-press); transform:translateY(1px); box-shadow:none; }

.store-list{ display:grid; gap:14px; }

/* ============================ аккордеон ================================== */

.faq{ display:grid; }

.faq__item{ border-top:1px solid var(--hair); }
.faq__item:last-child{ border-bottom:1px solid var(--hair); }

.faq__q{
  display:flex; align-items:center; gap:20px;
  width:100%;
  min-height:44px;
  padding:22px 2px;
  text-align:left;
  font-family:'Wix Madefor Display', sans-serif;
  font-weight:600;
  font-size:clamp(18px, 1.6vw, 21px);
  line-height:1.3;
  color:var(--ink);
  transition:color var(--t-fast) var(--ease);
}
.faq__q:hover{ color:var(--green-ink); }
.faq__q-text{ flex:1; }

/* знак «плюс/крестик»: две линии, крестик — тот же плюс, повёрнутый */
.faq__sign{
  position:relative;
  flex:none;
  width:22px; height:22px;
  color:var(--ink);
  transition:transform var(--t-mid) var(--ease), color var(--t-fast) var(--ease);
}
.faq__sign::before,
.faq__sign::after{
  content:""; position:absolute; inset:50% 0 auto 0;
  height:2px; margin-top:-1px;
  background:currentColor; border-radius:2px;
}
.faq__sign::after{ transform:rotate(90deg); transition:opacity var(--t-mid) var(--ease); }
.faq__q[aria-expanded="true"] .faq__sign{ transform:rotate(135deg); }

/* Раскрытие через grid-template-rows: height:auto не анимируется.
   Схлопнутое состояние включается только при живом скрипте (класс .js на
   <html>), иначе без JS ответы остались бы нечитаемыми. */
.faq__a{
  display:grid;
  grid-template-rows:1fr;
  transition:grid-template-rows var(--t-mid) var(--ease);
}
.faq__a > div{ overflow:hidden; }

.js .faq__a{ grid-template-rows:0fr; }
.js .faq__q[aria-expanded="true"] + .faq__a{ grid-template-rows:1fr; }

/* visibility убирает свёрнутый текст из фокуса и из дерева доступности,
   но переключается дискретно и не ломает анимацию высоты */
.js .faq__a > div{
  visibility:hidden;
  transition:visibility 0s linear var(--t-mid);
}
.js .faq__q[aria-expanded="true"] + .faq__a > div{
  visibility:visible;
  transition-delay:0s;
}

.faq__a p{
  padding:0 56px 26px 2px;
  color:var(--ink);
  font-size:17px;
  max-width:64ch;
}

/* вариант со сплошным зелёным кружком (страница «Скачать») */
.faq--disc .faq__sign{
  width:46px; height:46px;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  transition:transform var(--t-mid) var(--ease), background var(--t-fast) var(--ease);
}
.faq--disc .faq__sign::before,
.faq--disc .faq__sign::after{
  inset:50% 14px auto 14px;
}
.faq--disc .faq__q:hover .faq__sign{ background:var(--green-hover); }
.faq--disc .faq__q{ font-weight:600; }

/* вариант на зелёном фоне (страница «Партнёрам») */
.faq--invert .faq__item{ border-top-color:var(--hair-on-green); }
.faq--invert .faq__item:last-child{ border-bottom-color:var(--hair-on-green); }
.faq--invert .faq__q{ color:#fff; }
.faq--invert .faq__q:hover{ color:#fff; }
.faq--invert .faq__a p{ color:#fff; }             /* основной текст по зелёному — чистый белый */
.faq--invert .faq__sign{
  width:38px; height:38px;
  border-radius:50%;
  background:#fff;
  color:var(--green);
  transition:transform var(--t-mid) var(--ease), background var(--t-fast) var(--ease);
}
.faq--invert .faq__sign::before,
.faq--invert .faq__sign::after{ inset:50% 11px auto 11px; }
.faq--invert .faq__q:hover .faq__sign{ background:#EAF6EE; }

/* Две колонки на главной. Это два независимых списка рядом, а не общая
   сетка: в макете раскрытый ответ справа не двигает вопросы слева. */
.faq-cols{
  display:grid;
  grid-template-columns:1fr;
  gap:0 clamp(32px, 5vw, 68px);
  align-items:start;
}
@media (min-width:900px){
  .faq-cols{ grid-template-columns:1fr 1fr; }
}
/* в одну колонку списки встают друг под друга, и на стыке линия удваивается */
@media (max-width:899px){
  .faq-cols > .faq:not(:last-child) .faq__item:last-child{ border-bottom:0; }
}

/* ============================ шапка и подвал ============================= */

.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair-soft);
}
.site-header__inner{
  display:flex; align-items:center; gap:24px;
  height:72px;
}
.site-nav{
  display:flex; align-items:center; gap:4px;
  margin-left:auto;
}
.site-nav a{
  display:inline-flex; align-items:center;
  min-height:44px; padding:0 14px;
  border-radius:var(--r-pill);
  font-size:16px; color:var(--ink-2);
  transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.site-nav a:hover{ color:var(--green-ink); background:var(--green-soft); }
.site-nav a[aria-current="page"]{ color:var(--green-ink); font-weight:600; }

.nav-toggle{ display:none; }

/* подвальный знак: сам значок 38px, но кликабельная зона добирается
   паддингом до 44px по высоте */
.logo--sm{ --logo-size:38px; padding-block:3px; }
.logo--sm .logo__word{ font-size:17px; }

.site-footer{
  border-top:1px solid var(--hair-soft);
  padding-block:44px 40px;
  color:var(--ink-2);
  font-size:15px;
}
.site-footer__inner{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:20px 40px;
}
.site-footer nav{ display:flex; flex-wrap:wrap; gap:6px; }
.site-footer nav a{
  display:inline-flex; align-items:center;
  min-height:44px; padding:0 12px;
  border-radius:var(--r-pill);
  transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.site-footer nav a:hover{ color:var(--green-ink); background:var(--green-soft); }
.site-footer__legal{ margin-left:auto; color:var(--ink-3); }

/* ============================ мокапы устройств =========================== */

/* Внутри рамок лежат настоящие снимки приложения заказчика, а не
   нарисованные дивами окна. */
.shot{
  position:relative;
  border-radius:var(--r-shot);
  background:#0F1210;
  padding:9px;
  box-shadow:0 26px 60px rgba(0,0,0,.16), 0 3px 10px rgba(0,0,0,.10);
}
.shot img{
  border-radius:calc(var(--r-shot) - 9px);
  width:100%;
}
.shot--phone{
  --r-shot:38px;
  width:clamp(150px, 20vw, 214px);
  padding:7px;
}
.shot--phone::before{        /* островок камеры */
  content:""; position:absolute; z-index:2;
  top:16px; left:50%; translate:-50% 0;
  width:32%; height:9px;
  border-radius:var(--r-pill);
  background:#0F1210;
}
.shot--tablet{ --r-shot:22px; }

.device-pair{
  position:relative;
  display:flex; align-items:flex-end; justify-content:center;
  gap:0;
  margin-top:clamp(32px, 5vw, 56px);
}
.device-pair .shot--tablet{ width:min(100%, 720px); }
.device-pair .shot--phone{ margin-left:-72px; margin-bottom:-14px; }

@media (max-width:640px){
  .device-pair{ flex-direction:column; align-items:center; gap:20px; }
  .device-pair .shot--phone{ margin:0; }
}

/* ============================ страница «Скачать» ========================= */

.download-hero{ text-align:center; padding-top:clamp(32px, 5vw, 56px); }
.download-hero .logo{ margin-bottom:26px; }
.download-hero h1{
  font-size:clamp(28px, 3.6vw, 40px);
  margin-bottom:20px;
}
.download-hero__lead{
  color:var(--ink-2);
  font-size:16px;
  max-width:56ch;
  margin:0 auto 22px;
}
.download-hero__note{
  color:var(--ink-2);
  font-size:16px;
  margin-bottom:34px;
}

/* ============================ страница «iPhone» ========================== */

.install-title{
  color:var(--green);
  text-align:center;
  font-size:clamp(28px, 3.8vw, 44px);
  margin-bottom:22px;
}
.install-lead{
  text-align:center;
  color:var(--ink-2);
  max-width:52ch;
  margin:0 auto clamp(44px, 6vw, 76px);
}

.steps{
  display:grid;
  gap:clamp(40px, 6vw, 72px) clamp(28px, 4vw, 56px);
  grid-template-columns:1fr;
}
@media (min-width:760px){ .steps{ grid-template-columns:1fr 1fr; } }

.step{
  display:flex; align-items:center;
  gap:clamp(14px, 2vw, 26px);
}
.step__text{
  flex:1;
  font-family:'Wix Madefor Display', sans-serif;
  font-weight:600;
  font-size:clamp(17px, 1.5vw, 20px);
  line-height:1.35;
}
.step__num{
  flex:none;
  font-family:'Wix Madefor Display', sans-serif;
  font-weight:700;
  font-size:clamp(20px, 2vw, 26px);
  color:var(--green);
  font-variant-numeric:tabular-nums;
}
/* в макете подпись во втором ряду стоит справа от снимка */
.step--flip{ flex-direction:row-reverse; }
.step--flip .step__text{ text-align:right; }
@media (max-width:759px){
  .step, .step--flip{ flex-direction:row; }
  .step--flip .step__text{ text-align:left; }
}

.install-cta{ text-align:center; margin-top:clamp(48px, 6vw, 80px); }

/* =========================== страница «Партнёрам» ======================== */

.partners-hero{
  text-align:center;
  padding-top:clamp(44px, 6vw, 84px);
}
.partners-hero h1{
  font-size:clamp(30px, 4.2vw, 50px);
  margin-bottom:20px;
}
.partners-hero__lead{
  color:var(--ink-2);
  max-width:54ch;
  margin:0 auto 32px;
}
.hero-actions{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:12px;                       /* между соседними целями не меньше 8px */
}
.device-pair--solo .shot--phone{ margin:0; width:clamp(200px, 26vw, 268px); }

/* три задачи с зелёными галочками */
.tasks{ display:grid; gap:clamp(28px, 3.4vw, 44px); max-width:820px; margin-inline:auto; }
.task{ display:flex; gap:clamp(18px, 2.4vw, 30px); align-items:flex-start; }
.task__icon{ color:var(--green); margin-top:2px; }
.task h3{ font-size:clamp(18px, 1.6vw, 21px); font-weight:600; margin-bottom:8px; }
.task p{ color:var(--ink-2); max-width:58ch; }

/* четыре шага со светло-зелёными номерами, в шахматном порядке */
.flow{ display:grid; gap:clamp(28px, 4vw, 44px); }
.flow__item{
  display:flex; align-items:flex-start;
  gap:clamp(14px, 2vw, 24px);
  max-width:560px;
}
@media (min-width:860px){
  .flow__item:nth-child(even){ margin-left:auto; }
}
.flow__num{
  flex:none;
  font-family:'Wix Madefor Display', sans-serif;
  font-weight:700;
  font-size:clamp(52px, 6vw, 76px);
  line-height:.86;
  color:var(--sage);
  font-variant-numeric:tabular-nums;
}
.flow__body{ padding-top:6px; }
.flow__body h3{ font-size:clamp(18px, 1.6vw, 21px); font-weight:600; margin-bottom:6px; }
.flow__body p{ color:var(--ink-2); }

/* «Не просто размещение»: текст и иллюстрация */
.offer{
  display:grid;
  gap:clamp(36px, 5vw, 72px);
  align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:900px){ .offer{ grid-template-columns:1fr 1fr; } }
/* без min-width:0 колонка растягивается под натуральную ширину картинки */
.offer > *{ min-width:0; }
.offer h2{ margin-bottom:14px; }
.offer__lead{ color:var(--ink-2); max-width:34ch; margin-bottom:32px; }
.offer__list{ display:grid; gap:18px; margin-bottom:38px; }
.offer__list li{ display:flex; gap:14px; align-items:flex-start; }
.offer__tick{
  flex:none;
  display:grid; place-items:center;
  width:24px; height:24px;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  margin-top:2px;
}
.offer__tick .icon{ width:14px; height:14px; stroke-width:2.6; }
.offer__art{ justify-self:center; width:100%; max-width:min(100%, 520px); }

/* блок вопросов на зелёном */
.on-green{
  background:var(--green);
  color:#fff;
}
.on-green .lead{ color:rgba(255,255,255,.92); }   /* ниже .92 по зелёному не опускаемся */
.faq-split{
  display:grid;
  gap:clamp(32px, 5vw, 72px);
  grid-template-columns:1fr;
}
@media (min-width:900px){ .faq-split{ grid-template-columns:minmax(0,.85fr) minmax(0,1fr); } }
.faq-split h2{ color:#fff; margin-bottom:18px; }

/* форма */
.lead-form{ max-width:560px; margin-inline:auto; }
.field{ display:grid; gap:8px; margin-bottom:26px; }
.field__label{ font-size:15px; color:var(--ink-3); }
.field input{
  width:100%;
  min-height:52px;
  padding:12px 2px;
  border:0;
  border-bottom:1px solid var(--hair);
  border-radius:var(--r-field) var(--r-field) 0 0;
  background:transparent;
  font-size:18px;
  transition:border-color var(--t-fast) var(--ease);
}
.field input::placeholder{ color:var(--ink-3); }   /* 4.7:1 к белому */
.field input:hover{ border-bottom-color:rgba(0,0,0,.3); }
.field input:focus{ outline:none; border-bottom-color:var(--green); border-bottom-width:2px; }
.field--phone .field__control{
  display:flex; align-items:center; gap:10px;
  border-bottom:1px solid var(--hair);
  transition:border-color var(--t-fast) var(--ease);
}
.field--phone .field__control:hover{ border-bottom-color:rgba(0,0,0,.3); }
.field--phone .field__control:focus-within{ border-bottom-color:var(--green); }
.field--phone input{ border-bottom:0; }
.field__flag{ flex:none; width:26px; height:19px; border-radius:2px; }

.field__error{
  display:none;
  color:#C02626;
  font-size:14px;
}
.field.is-invalid input{ border-bottom-color:#C02626; }
.field.is-invalid .field__error{ display:block; }

/* ловушка для ботов: убираем из вида и из потока, но не через display:none,
   иначе часть ботов её распознаёт и пропускает */
.hp{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden; clip-path:inset(50%);
  white-space:nowrap; pointer-events:none;
}

.form__note{
  margin-top:16px;
  font-size:14px;
  line-height:1.45;
  color:var(--ink-3);      /* 4.7:1 к белому */
  text-align:center;
}

.form__status{
  margin-top:18px;
  min-height:24px;
  font-size:16px;
}
.form__status--ok{ color:var(--green-ink); font-weight:600; }
.form__status--err{ color:#C02626; }

.lead-form .btn[data-loading="true"]{ pointer-events:none; opacity:.72; }

/* ============================ появление по скроллу ======================= */

/* Прячем только при живом скрипте: если JS не выполнится, содержимое
   должно остаться на месте, а не исчезнуть под opacity:0. */
.js .reveal{
  opacity:0;
  transform:translateY(28px);
  filter:blur(14px);
  transition:opacity 720ms var(--ease),
             transform 720ms var(--ease),
             filter 720ms var(--ease);
}
.js .reveal.is-in{ opacity:1; transform:none; filter:none; }

/* ============================ адаптив ==================================== */

@media (max-width:760px){
  body{ font-size:16px; }
  .site-nav{
    position:fixed; inset:72px 0 auto 0;
    flex-direction:column; align-items:stretch;
    gap:2px;
    padding:12px var(--gutter) 22px;
    background:#fff;
    border-bottom:1px solid var(--hair-soft);
    box-shadow:0 22px 40px rgba(0,0,0,.10);
    transform:translateY(-8px);
    opacity:0; visibility:hidden;
    transition:opacity var(--t-mid) var(--ease),
               transform var(--t-mid) var(--ease),
               visibility var(--t-mid);
  }
  .site-nav[data-open="true"]{ opacity:1; visibility:visible; transform:none; }
  .site-nav a{ min-height:52px; padding-inline:16px; font-size:17px; }

  .nav-toggle{
    display:grid; place-items:center;
    width:46px; height:46px;
    margin-left:auto;
    border-radius:var(--r-pill);
    color:var(--ink);
  }
  .nav-toggle:hover{ background:var(--green-soft); color:var(--green-ink); }

  .faq__q{ gap:14px; padding-block:18px; }
  .faq__a p{ padding-right:20px; }
  .faq--disc .faq__sign{ width:38px; height:38px; }
  .faq--disc .faq__sign::before,
  .faq--disc .faq__sign::after{ inset:50% 11px auto 11px; }

  .site-footer__legal{ margin-left:0; }
}

/* ============================ меньше движения ============================ */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js .reveal{ opacity:1; transform:none; filter:none; }
  .faq__a{ transition:none; }
}

/* ============================ печать ===================================== */

@media print{
  .site-header, .nav-toggle, .btn, .store{ display:none !important; }
  .faq__a{ grid-template-rows:1fr !important; }
  .js .reveal{ opacity:1 !important; transform:none !important; filter:none !important; }
}