/* ============================================================
   manual.css — страница "Инструкция" (manual.html)
   Холст .screen/.div (общая обёртка — как на остальных
   адаптивных страницах), hero с градиентом оригинала
   (верх — тёмный, низ — уходит в бирюзовый фон) и колонка
   контента 900px на бирюзовом фоне, как в оригинале.
   Стили include-блоков (баннер, футер) — в shared.css.
   ============================================================ */

.screen {
  background-color: #7db9b7;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}


/* ----------------------------------------------------------
   Полоса градиента оригинала (600px) лежит ВЕРХУ ХОЛСТА
   (.div), за баннером, заголовком и началом контента — как
   в оригинале, где текстовая колонка наслаивалась на
   600px-полосу (top: -600px). Поэтому hero не имеет
   фиксированной высоты и контент начинается сразу после
   заголовка, без пустого "окна".
   Стоп-точки: верх ~270px — сплошной тёмный #4d455d
   (белое меню и белый заголовок полностью читаемы),
   затем быстрый переход в кремовый #f5e9cf и мягкое
   затухание в бирюзовый фон страницы.
   ---------------------------------------------------------- */
.screen .div {
  background-color: #7db9b7;
  background-image: linear-gradient(0deg, rgba(125,185,183,0) 0%, rgba(245,233,207,1) 42%, rgba(77,69,93,1) 55%, rgba(77,69,93,1) 100%);
  background-size: 100% 600px;
  background-repeat: no-repeat;
  background-position: top;
}

/* HERO = баннер + заголовок поверх полосы (высота по содержимому) */
.m-hero {
  width: 100%;
  box-sizing: border-box;
  padding: 0 40px 40px;
  text-align: center;
}

.m-title {
  font-size: 40px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  margin: 46px auto 0;
  max-width: 900px;
  font-family: "Open Sans", Helvetica;
}


/* ----------------------------------------------------------
   Колонка контента 900px по центру, на бирюзовом фоне
   (в оригинале body background-color: #7db9b7).
   ---------------------------------------------------------- */
.m-content {
  width: 900px;
  max-width: calc(100% - 40px);
  margin: 0 auto;
  padding: 0 0 90px;
  color: #4d455d;
  font-family: "Open Sans", Helvetica;
}

.m-content > h2:first-child { margin-top: 0; }

.m-content h2 {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  margin: 60px 0 10px;
}

.m-content h4 {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  margin: 56px 0 10px;
}

.m-content h5 {
  font-size: 21px;
  font-weight: 700;
  text-align: center;
  margin: 44px 0 10px;
}

.m-content p {
  font-size: 20px;
  line-height: 200%;
  margin: 20px 0;
  text-align: justify;
}

.m-content a {
  color: #1d4f91;
  text-decoration: underline;
}

/* списки (поля диалога, опции экспорта) */
.m-content ul.m-list {
  list-style-type: disc;
  list-style-position: inside;
  margin: 30px 0;
  padding-left: 20px;
  line-height: 200%;
  font-size: 20px;
}

.m-content ul.m-list li { margin: 10px 0; }


/* ----------------------------------------------------------
   Изображения: скриншоты в рамке с закруглением (как в
   оригинале) + подписи; иконки панели инструментов — 20px
   inline. max-width:100% — чтобы на узких экранах
   не выходили за край.
   ---------------------------------------------------------- */
.m-fig {
  text-align: center;
  margin: 34px 0;
}

.m-img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  border: 1.5px solid #000000;
  border-radius: 15.65px;
}

/* ширины, как в оригинальных width/height-атрибутах */
.m-img-install { width: 374px; }   /* install.png 748x572, был width=374 */
.m-img-reg     { width: 364px; }   /* registration01/02 727x504, были height=252 */
.m-img-scr1    { width: 896px; }   /* screenshot01.png, был width=896 */
.m-img-dlg     { width: 382px; }   /* new_dialog.png, был width=382 */
.m-img-scr2    { width: 883px; }   /* screenshot02.png, был width=883 */
.m-img-subst   { width: 350px; }   /* substantions.png, был width=350 */
.m-img-solv    { width: 350px; }   /* solvents.png, был width=350 */
.m-img-podachi { width: 341px; }   /* podachi.png, был width=341 */

.m-ico {
  width: 20px;
  height: auto;
  vertical-align: middle;
}

.m-caption {
  font-style: italic;
  font-size: 16px;
  color: #4d455d;
  margin-top: 10px;
}

.m-star {
  text-align: center;
  font-size: 20px;
  letter-spacing: 8px;
  margin: 40px 0;
}


/* ----------------------------------------------------------
   Планшеты
   ---------------------------------------------------------- */
@media (max-width: 1023px) {
  .m-content { max-width: calc(100% - 32px); }
}


/* ----------------------------------------------------------
   Телефоны
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  /* На телефонах 600px-полосу выключаем: hero сам становится
     тёмным блоком (баннер + белый заголовок) с мягким
     затуханием в бирюзовый фон перед контентом. */
  .screen .div { background-image: none; }
  .m-hero {
    background: linear-gradient(180deg, #4d455d 0%, #4d455d 75%, rgba(77,69,93,0) 100%);
    padding: 0 20px 48px;
  }
  .m-title {
    font-size: 28px;
    margin-top: 28px;
  }
  .m-content { padding-bottom: 60px; }
  .m-content h2 { font-size: 23px; margin-top: 44px; }
  .m-content h4 { font-size: 20px; margin-top: 40px; }
  .m-content h5 { font-size: 18px; margin-top: 32px; }
  .m-content p { font-size: 17px; line-height: 1.7; }
  .m-content ul.m-list { font-size: 17px; line-height: 1.7; }
  .m-fig { margin: 24px 0; }
}