/**
 * Eflowz preset (стиль EINsearch). Основа — фиксы preset-sitranis,
 * уголки-треугольники и картинки-фоны убраны, цвета заменены.
 * Слой EINsearch — в конце файла.
 *
 * Loaded only when "Preset Sitranis" is selected in Theme Styles.
 * Colours come from the Laravel Sitranis build:
 *   green  #3A7D44   dark green #2D6235 / #122517 (hover)
 *   white text, square corners, uppercase, 16/32 padding, weight 500.
 */

/* ---- Base button: solid green, white label ---- */
body.preset-eflowz .btn {
  height: auto;
  min-height: 3.25rem;
  padding: 1rem 2rem;
  border-width: 2px;
  border-style: solid;
  border-color: #3A7D44;
  border-radius: 0;
  background-color: #3A7D44;
  color: #ffffff;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

body.preset-eflowz .btn > span {
  color: #ffffff;
}

/* Hover sweep: darker green instead of the primary→secondary gradient */
body.preset-eflowz .btn::before {
  background: linear-gradient(115deg, #2D6235 0%, #2D6235 55%, #122517 100%);
}

body.preset-eflowz .btn:hover,
body.preset-eflowz .btn:focus {
  border-color: #2D6235;
  background-color: #3A7D44;
  color: #ffffff;
  box-shadow: 0 0.625rem 1.375rem rgba(58, 125, 68, 0.28);
}

body.preset-eflowz .btn:hover > span,
body.preset-eflowz .btn:focus > span {
  color: #ffffff;
}

body.preset-eflowz .btn:active {
  box-shadow: 0 0.25rem 0.625rem rgba(58, 125, 68, 0.2);
}

/* ---- White variant: for green / dark backgrounds ---- */
body.preset-eflowz .btn--white,
body.preset-eflowz .btn--primary.btn--white,
body.preset-eflowz .btn--primary-white.btn--white {
  border-color: #ffffff;
  background-color: #ffffff;
  color: #3A7D44;
}

body.preset-eflowz .btn--white > span {
  color: #3A7D44;
}

body.preset-eflowz .btn--white::before {
  background: linear-gradient(115deg, #3A7D44 0%, #2D6235 100%);
}

body.preset-eflowz .btn--white:hover,
body.preset-eflowz .btn--white:focus {
  border-color: #ffffff;
  background-color: transparent;
  color: #ffffff;
}

body.preset-eflowz .btn--white:hover > span,
body.preset-eflowz .btn--white:focus > span {
  color: #ffffff;
}

/* ---- "Simple" variant keeps the flat fill, no sweep ---- */
body.preset-eflowz .btn--simple.btn--primary:not(.btn--white) {
  border-color: #3A7D44;
  background-color: #3A7D44;
  color: #ffffff;
}

body.preset-eflowz .btn--simple.btn--primary:not(.btn--white):hover,
body.preset-eflowz .btn--simple.btn--primary:not(.btn--white):focus {
  border-color: #2D6235;
  background-color: #2D6235;
  color: #ffffff;
}

/* ---- Dark secondary CTA (Sitranis "Open New Account" style) ---- */
body.preset-eflowz .btn--dark {
  border-color: #111827;
  background-color: #111827;
  color: #ffffff;
}

body.preset-eflowz .btn--dark > span {
  color: #ffffff;
}

body.preset-eflowz .btn--dark::before {
  background: linear-gradient(115deg, #111827 0%, #0F1F14 100%);
}

/* ---- Захардкоженные градиенты ----------------------------------------
   Два блока в теме покрашены мимо CSS-переменных, прямо в SCSS:
   parts/_form-with-img-block.scss:4  и  parts/_card-block.scss:28.
   При любой смене палитры они остаются красным и янтарным.            */

/* Блок подписки на рассылку: красный → зелёный в синий, как в герое */
body.preset-eflowz .bfwi {
  background: linear-gradient(90deg, #3A7D44 0%, #2D6235 100%);
}

/* CTA-карточка: янтарный → фирменный жёлтый Sitranis #FFBF1A */
body.preset-eflowz .cardblock__inner {
  background: linear-gradient(to bottom, #3A7D44 0%, #2D6235 100%);
  box-shadow: 0 0 50px rgba(58, 125, 68, 0.55);
}

/* ---- Шапка -----------------------------------------------------------
   layout/_header.scss красит .header::before тем же красным градиентом
   (строки 21, 33 и 80 — последняя с !important). На десктопе подложка
   прозрачная и появляется только при скролле, на мобильном она есть
   всегда. Повторяем эту логику в цветах Sitranis.                     */

body.preset-eflowz .header::before,
body.preset-eflowz .header.scrolling::before {
  background: linear-gradient(to right, #3A7D44 0%, #2D6235 100%);
}

/* Вне скролла на десктопе подложка обязана оставаться прозрачной,
   иначе шапка перестанет «лежать» на герое. */
@media (min-width: 1024px) {
  body.preset-eflowz .header:not(.scrolling)::before {
    background: transparent;
  }
}

body.preset-eflowz.page-template-tmpl-terms-of-service .header::before {
  background: linear-gradient(to right, #3A7D44 0%, #2D6235 100%) !important;
}

/* ---- Последние два тёплых пятна --------------------------------------
   Найдены сканом output.min.css: во всей собранной CSS тёплых цветов
   ровно 6, из них #FF1919 — семантический красный ошибок форм, его
   трогать нельзя. Остаются эти два.                                    */

/* Карточка нумерованного списка, parts/_list-number-card-block.scss:98 */
body.preset-eflowz .lnc-item__content {
  background: linear-gradient(90deg, #3A7D44 0%, #2D6235 100%);
}

/* Тень под картинкой героя была коричневой (#694124 — под оранжевую тему),
   parts/_hero-block.scss:378. Пересчитана тем же преобразованием оттенка,
   что и фоны. */
body.preset-eflowz .hero.loaded .hero-right {
  filter: drop-shadow(0 0 0.75rem #122517);
}

/* ======================================================================
   ФОТОГРАФИИ ВМЕСТО ИЛЛЮСТРАЦИЙ
   Тема рассчитана на изометрические вырезки с прозрачным фоном:
   картинка вписывается через object-fit: contain, в карточках она
   вообще размером 120x120. Фотография в таком слоте превращается в
   марку с полями. Ниже — минимальная адаптация тех же блоков под фото.
   ====================================================================== */

/* --- Герой: было contain в квадрате 1:1, стало кадрирование по месту --- */
body.preset-eflowz .hero-right__img img {
  object-fit: cover;
}

@media (min-width: 1024px) {
  body.preset-eflowz .hero-right__img img {
    aspect-ratio: auto;
    min-height: 0;
    height: 100%;
  }
}

/* Свечение под вырезку заменяем на направленную тень под фото */
body.preset-eflowz .hero.loaded .hero-right {
  filter: drop-shadow(0 1rem 2rem rgba(17, 24, 39, 0.32));
}

/* --- Карточки «текст + картинка»: иконка 120x120 -> фото на всю ширину --- */
body.preset-eflowz .twi-card__img {
  width: 100%;
  height: 13.75rem;
  border-radius: 0.75rem;
  overflow: hidden;
}

body.preset-eflowz .twi-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Глобальные блоки: контакты и подписка --- */
body.preset-eflowz .tci__img img,
body.preset-eflowz .bfwi-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.75rem;
}

/* ======================================================================
   ГЕРОЙ В КОМПОЗИЦИИ СТАРОГО САЙТА

   Замеры с отрендеренной Laravel-страницы при ширине 1440:
   секция 770px, фото от 21% ширины экрана до правого края во всю высоту,
   карточка 820x352 на #F4F4F5 с padding 40, её низ на 139px выше низа
   секции, заголовок 48/700 uppercase #111827, уголок 66px — два
   прямоугольных треугольника (прямой угол снизу-слева), задний светлее
   и смещён вниз-влево на 13px.

   ДВА ПОДВОДНЫХ КАМНЯ ТЕМЫ:
   1. Корневой шрифт плавающий (0.9375vw), при 1440 это 13.5px, а не 16.
      Поэтому все rem-значения ниже пересчитаны: 770px = 57rem, и т.д.
      Так герой продолжает масштабироваться вместе с остальной сеткой.
   2. Тема метит потомков героя селекторами вида .hero.hero--home
      .hero-right — это специфичнее, чем body.preset-... .hero-right.
      Поэтому здесь цепочка через .hero-wrap, она заведомо выигрывает.

   .hero делаем блочным: в теме это flex с центрированием, из-за чего
   .container сжимался до содержимого. Предки фото — static, чтобы
   absolute лёг относительно .hero и дошёл до края экрана без vw-математики.
   Карточка остаётся в потоке и прижимается к низу через align-items —
   так она держит сетку страницы.

   Только с 1024px: ниже у темы своя мобильная раскладка героя.
   ====================================================================== */

@media (min-width: 1024px) {

  /* --- Шапка: сплошная белая, тёмные ссылки ---
     Специфичность :not(.scrolling) выше обычной, поэтому повторяем её
     здесь — правило идёт ниже и выигрывает при равном весе. */
  body.preset-eflowz .header::before,
  body.preset-eflowz .header:not(.scrolling)::before,
  body.preset-eflowz .header.scrolling::before {
    background: #FFFFFF;
    box-shadow: 0 1px 0 rgba(17, 24, 39, 0.08);
  }

  body.preset-eflowz .header a:not(.btn),
  body.preset-eflowz .header .header-menu__items li > a {
    color: #111827;
  }

  body.preset-eflowz .header a:not(.btn):hover,
  body.preset-eflowz .header .header-menu__items li > a:hover {
    color: var(--primary-color);
  }

  /* Логотип Glossol (uploads/2026/08/logo.svg) уже тёмный,
     временный filter: brightness(0) снят. */

  /* Кнопка аккаунта помечена btn--white, то есть белая на белом.
     На старом сайте она сплошная зелёная. */
  body.preset-eflowz .header-menu__account-link,
  body.preset-eflowz .header-menu__account-link.btn--white {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #FFFFFF;
  }

  body.preset-eflowz .header-menu__account-link > span,
  body.preset-eflowz .header-menu__account-link:hover > span {
    color: #FFFFFF;
  }

  body.preset-eflowz .header-menu__account-link:hover,
  body.preset-eflowz .header-menu__account-link:focus {
    background-color: #2D6235;
    border-color: #2D6235;
  }

  /* --- Секция --- */
  body.preset-eflowz .hero:has(.hero-left) {
    display: block;
    height: auto;
    min-height: 57rem;
    padding: 0;
    background-image: none;
    background-color: #FFFFFF;
    color: #111827;
  }

  body.preset-eflowz .hero:has(.hero-left) .hero-wrap {
    position: static;
    display: block;
    width: 100%;
    height: auto;
  }

  body.preset-eflowz .hero:has(.hero-left) .container {
    position: static;
    display: flex;
    align-items: flex-end;
    min-height: 57rem;
    /* Верхний отступ не даёт карточке с длинным заголовком уехать под
       фиксированную шапку: вместо этого подрастает сама секция. */
    padding-top: 6rem;
    padding-bottom: 10.3rem;
    max-width: none;
    padding-left: 1.11rem;
    padding-right: 1.11rem;
  }

  /* --- Фото --- */
  body.preset-eflowz .hero .hero-wrap .hero-right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 21%;
    width: auto;
    height: auto;
    transform: none;
    filter: none;
    z-index: 0;
  }

  body.preset-eflowz .hero.loaded .hero-wrap .hero-right {
    filter: none;
  }

  body.preset-eflowz .hero .hero-wrap .hero-right__img {
    height: 100%;
    width: 100%;
    min-height: 0;
    max-height: none;
  }

  body.preset-eflowz .hero .hero-wrap .hero-right__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: auto;
    min-height: 0;
    opacity: 1;
  }

  /* --- Карточка с заголовком поверх фото --- */
  body.preset-eflowz .hero .hero-wrap .hero-left {
    position: relative;
    width: 57%;
    max-width: 60.7rem;
    margin: 0;
    padding: 3rem;
    transform: none;
    background: var(--tertiary-color);
    color: #111827;
    z-index: 2;
  }

  body.preset-eflowz .hero .hero-wrap .hero-left__title,
  body.preset-eflowz .hero .hero-wrap .hero-left__title h1,
  body.preset-eflowz .hero .hero-wrap .hero-left__title h2,
  body.preset-eflowz .hero .hero-wrap .hero-left__title h3 {
    font-size: 3.56rem;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    color: #111827;
    transform: none;
    opacity: 1;
  }

  body.preset-eflowz .hero .hero-wrap .hero-left__content {
    background: transparent;
    color: #111827;
    font-size: 1.19rem;
    line-height: 1.35;
    margin-top: 1.5rem;
    padding: 0;
    transform: none;
    opacity: 1;
  }

  body.preset-eflowz .hero .hero-wrap .hero-left__slogan {
    color: var(--primary-color);
    font-weight: 600;
  }

}

/* ----------------------------------------------------------------------
   Наезд секции на фото героя (только главная).
   pages/_tmpl-home.scss:21 задаёт .tmpl-home-twi-s2 { margin-top: rem(-150) }
   = -112.5px. Приём рассчитан на старого героя с белым изгибом кляксы
   внизу: секция пряталась под изгиб. С полноразмерным фото тот же отступ
   кладёт заголовок «Order Fulfillment» прямо на картинку.
   Отменяем: секция встаёт вплотную к низу героя, а зазор в 60px даёт её
   собственный padding-top. Второй отрицательный отступ в теме
   (.main--separator, -58px) не трогаем — на внутренних страницах он
   работает как задумано.
   ---------------------------------------------------------------------- */

@media (min-width: 1024px) {
  body.preset-eflowz .tmpl-home-twi-s2 {
    margin-top: 0;
  }
}

/* ======================================================================
   ОТЗЫВЫ + ОБЪЕДИНЁННАЯ СЕКЦИЯ «CUSTOMER SERVICE + ПОДПИСКА»

   Как на старом сайте:
   - отзывы: фон #F4F4F5 с тремя зелёными звёздочками
     (main.css: .fb-wr — star-1 дважды и star-2, позиции ниже те же);
   - Customer Service и подписка — ОДНА секция .support-block с фоновым
     фото bg-bottom.png, две колонки, белый текст, без картинок.

   В теме это три разных блока в двух разных родителях:
     .global-content
       section.tblock
       div.global-content__grouped   ← ::before держал зелёную волну
         section.bteam    (отзывы)
         section.btci     (Customer Service)
       section.bfwi       (подписка)

   Чтобы поставить .btci и .bfwi рядом, не трогая PHP: обёртке даём
   display:contents — она перестаёт создавать бокс, и её дети становятся
   элементами грида .global-content. Селекторы при этом работают по DOM,
   поэтому обращаемся через потомка, а не через `>`.

   Фон одной картинкой на две половины: каждая берёт bg-bottom.png с
   background-size: 200% 100% и позицией left / right — вместе они
   складывают целое изображение по всей ширине без шва.
   ====================================================================== */

/* --- Отзывы: светлый фон со звёздочками --- */
body.preset-eflowz .bteam {
  background-color: #F4F4F5;
  background-image:
    url("../../img/decor/star-1.svg"),
    url("../../img/decor/star-1.svg"),
    url("../../img/decor/star-2.svg");
  background-repeat: no-repeat;
  background-position:
    left 10% bottom 57px,
    left 70% bottom -50%,
    right 0 bottom -150px;
  padding-top: 57px;
  padding-bottom: 57px;
  margin-bottom: 0;
}

/* Зелёная волна обёртки больше не нужна — под отзывами свой фон,
   а ниже идёт тёмная секция. */
body.preset-eflowz .global-content__grouped::before {
  content: none;
}

/* --- Тёмная секция: обе половины --- */
body.preset-eflowz .btci,
body.preset-eflowz .bfwi {
  background-color: #0F1F14;
  background-image: none;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #FFFFFF;
  margin: 0;
  padding: 3.5rem 0;
}

/* Картинки внутри убираем — на старом сайте их нет, фон секции их заменяет */
body.preset-eflowz .btci-right,
body.preset-eflowz .bfwi-right {
  display: none;
}

body.preset-eflowz .btci-left,
body.preset-eflowz .bfwi-left {
  width: 100%;
  max-width: none;
}

body.preset-eflowz .btci-left__title,
body.preset-eflowz .btci-left__desc,
body.preset-eflowz .btci-left__phone,
body.preset-eflowz .bfwi-left__desc {
  color: #FFFFFF;
}

body.preset-eflowz .btci-left__phone:hover {
  color: var(--primary-color);
}

/* --- Десктоп: две колонки одной секцией --- */
@media (min-width: 1024px) {

  body.preset-eflowz .global-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  body.preset-eflowz .global-content > * {
    grid-column: 1 / -1;
  }

  /* Обёртка растворяется, её дети становятся элементами грида */
  body.preset-eflowz .global-content__grouped {
    display: contents;
  }

  body.preset-eflowz .global-content .bteam {
    grid-column: 1 / -1;
  }

  body.preset-eflowz .global-content .btci {
    grid-column: 1;
    background-size: 200% 100%;
    background-position: left center;
  }

  body.preset-eflowz .global-content .bfwi {
    grid-column: 2;
    background-size: 200% 100%;
    background-position: right center;
  }
}

/* --- Мобильные: половины складываются в столбик, шва между ними нет --- */
@media (max-width: 1023.98px) {
  body.preset-eflowz .btci {
    padding-bottom: 2rem;
  }

  body.preset-eflowz .bfwi {
    margin-top: 0;
    padding-top: 0;
  }
}

/* --- Выравнивание двух колонок объединённой секции ---
   В теме заголовок Customer Service отцентрован, а у блока подписки
   свой внутренний padding 60/75px. В две колонки это давало разную
   стартовую точку по горизонтали и разную высоту начала текста.
   На старом сайте обе колонки начинаются на одной линии сверху,
   текст выключен влево, а левая колонка уже своей половины. */

@media (min-width: 1024px) {
  body.preset-eflowz .btci-left__title {
    text-align: left;
  }

  /* Левая колонка не должна растягиваться на всю половину:
     в эталоне её текст ~460px при половине 720 */
  body.preset-eflowz .btci-left__wrap {
    max-width: 34rem;
  }

  /* Снимаем собственные отступы блока подписки — вертикальные задаёт
     секция, иначе правая колонка опускается на 60px ниже левой */
  body.preset-eflowz .bfwi__wrap {
    padding: 0;
  }
}

/* ----------------------------------------------------------------------
   CTA-карточка «Start Right Away» — из жёлтой в зелёную.
   Блок повторяется на 11 страницах (home, pricing, fba, overview,
   referrals, support, edi, startups, ecommerce, overseas, hrgeneralist),
   поэтому правим по классу.

   Кнопка внутри: .cardblock__link.btn.btn--primary.btn--primary-white.
   На зелёной подложке зелёная кнопка сливается, поэтому делаем её белой
   с зелёной надписью. Диагональная заливка на ховере у базовой кнопки
   тёмно-зелёная — она сама «заливает» белую кнопку, надпись становится
   белой. В теме у этой кнопки свой цвет через secondary-color
   (_card-block.scss:66) — перекрываем явно, иначе на нашей палитре она
   стала бы почти белой на белом.
   ---------------------------------------------------------------------- */

body.preset-eflowz .cardblock__inner {
  background: linear-gradient(to bottom, #3A7D44 0%, #2D6235 100%);
  box-shadow: 0 0 50px rgba(58, 125, 68, 0.45);
  color: #FFFFFF;
}

body.preset-eflowz .cardblock__inner .btn,
body.preset-eflowz .cardblock__link {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--primary-color);
}

body.preset-eflowz .cardblock__inner .btn > span,
body.preset-eflowz .cardblock__link > span {
  color: var(--primary-color);
}

body.preset-eflowz .cardblock__inner .btn:hover,
body.preset-eflowz .cardblock__inner .btn:focus,
body.preset-eflowz .cardblock__link:hover,
body.preset-eflowz .cardblock__link:focus {
  background-color: transparent;
  border-color: #FFFFFF;
  color: #FFFFFF;
}

body.preset-eflowz .cardblock__inner .btn:hover > span,
body.preset-eflowz .cardblock__inner .btn:focus > span,
body.preset-eflowz .cardblock__link:hover > span,
body.preset-eflowz .cardblock__link:focus > span {
  color: #FFFFFF;
}

/* ----------------------------------------------------------------------
   Контраст надписи на белых кнопках.
   Фирменный #3A7D44 на белом даёт 2.6:1 — для текста 14px это мало
   (WCAG AA требует 4.5:1). Заливку кнопки не трогаем, чтобы не уводить
   от фирменного цвета: затемняем только надпись до #2D6235 — это тот же
   зелёный, но 5.1:1. Касается всех белых кнопок, а не только CTA-карточки,
   иначе надписи на них разъедутся по насыщенности.
   ---------------------------------------------------------------------- */

body.preset-eflowz {
  --btn-label-on-white: #2D6235;
}

body.preset-eflowz .cardblock__inner .btn,
body.preset-eflowz .cardblock__link,
body.preset-eflowz .cardblock__inner .btn > span,
body.preset-eflowz .cardblock__link > span,
body.preset-eflowz .btn--white,
body.preset-eflowz .btn--white > span,
body.preset-eflowz .btn--primary.btn--white,
body.preset-eflowz .btn--primary-white.btn--white {
  color: var(--btn-label-on-white);
}

/* На ховере кнопка заливается тёмно-зелёным — надпись обратно белая */
body.preset-eflowz .cardblock__inner .btn:hover > span,
body.preset-eflowz .cardblock__inner .btn:focus > span,
body.preset-eflowz .cardblock__link:hover > span,
body.preset-eflowz .cardblock__link:focus > span,
body.preset-eflowz .btn--white:hover > span,
body.preset-eflowz .btn--white:focus > span {
  color: #FFFFFF;
}

/* Кнопка аккаунта в шапке помечена btn--white, но на десктопе мы сделали
   её сплошной зелёной — надпись на ней должна остаться белой, иначе
   предыдущее правило красит её в тёмно-зелёный по зелёному. */
@media (min-width: 1024px) {
  body.preset-eflowz .header .header-menu__account-link,
  body.preset-eflowz .header .header-menu__account-link > span {
    color: #FFFFFF;
  }
}

/* ==========================================================================
   RevA — правки по замечаниям PM (16.09.2026)
   Палитру НЕ меняем: --secondary-color остаётся #E8F5EC, потому что тема
   использует его и как светлую подложку (file-upload, маркеры списков,
   подчёркивание в футере). Красим точечно только то, на что указал PM.
   ========================================================================== */

/* --- 1. Акцентные заголовки пропали ------------------------------------
   Тема красит их var(--secondary-color). В preset-blue, под который её
   верстали, это #BE4844 — насыщенный акцент. У нас там светлая мята,
   поэтому текст слился с фоном.
   Пункты PM: PRINCIPLE (/values/), PLAN (/referrals/), боковые заголовки
   (/features/, /overseas-order-fulfillment/, /distributed-werehousing/),
   номера 01-04 (/distributed-werehousing/).                              */

body.preset-eflowz .twi-left__title,
body.preset-eflowz .main--features-page .twi-left__title,
body.preset-eflowz .principleb-item__title,
body.preset-eflowz .bplan-item__title,
body.preset-eflowz .circlenumbcard__title,
body.preset-eflowz .circlenumbcard-item__numb,
body.preset-eflowz .cardstep-item__numb span:before {
  color: var(--primary-color);
}

/* На зелёной карточке PRINCIPLE №2 тема уже ставит #fff правилом
   .principleb-item:nth-child(2n) … (0,4,0) — оно специфичнее моего (0,2,1),
   так что белый там сохраняется сам. Специально не переопределяю. */

/* Pricing: карточки на тёмном сине-зелёном, PM просит белый, не зелёный. */
body.preset-eflowz .gridcards-item__title {
  color: #fff;
}

/* --- 2. Подменю в шапке: на hover пропадал текст -----------------------
   Причина — моё же правило .header a:not(.btn):hover { color: primary }:
   у пункта подменю фон на hover тоже зелёный, получалось зелёное по зелёному. */
body.preset-eflowz .header .sub-menu a,
body.preset-eflowz .header .sub-menu .sub-menu__link {
  color: #111827;
}

body.preset-eflowz .header .sub-menu a:hover,
body.preset-eflowz .header .sub-menu .sub-menu__link:hover,
body.preset-eflowz .header .sub-menu li:hover > a {
  color: #fff;
}

/* --- 3. Поповер My Account: светлый текст на светлом фоне ---------------
   Блок сверстан под тёмную подложку (ссылка «Forgot password?» — #fff),
   а фон стал светлым. PM просит чёрный шрифт в полях и в самом блоке.   */
body.preset-eflowz .account-popup__title,
body.preset-eflowz .account-popup__body,
body.preset-eflowz .account-popup__form-field,
body.preset-eflowz .account-popup__form-input,
body.preset-eflowz .account-popup__form-field--link a {
  color: #111827;
}

body.preset-eflowz .account-popup__form-input::placeholder {
  color: rgba(17, 24, 39, 0.55);
  opacity: 1;
}

body.preset-eflowz .account-popup__form-field--link a:hover {
  color: var(--primary-color);
}

/* --- 4. «Сломанный» заголовок на /request-a-quote/ ----------------------
   В ACF-поле tmpl_requestquote_block_hero_title лежит и <h1>, и абзац,
   завёрнутый в <div><div>. Контейнер имеет кегль h1, абзац его наследует.
   Поле ..._hero_desc при этом пустое.
   Правим отображением, а не контентом: на странице с корректным контентом
   в .hero-left__title лежит только <h1>, и этот селектор ни во что не попадёт. */
body.preset-eflowz .hero-left__title > div {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.35;
  text-transform: none;
  margin-top: 1rem;
}

/* --- 5. Чекбоксы должны стоять напротив вопросов ------------------------
   .form .form-checkbox объявлен display:block, но с column-gap — на блочном
   элементе gap не работает, инпут утекает в конец строки.
   inline-flex, а не flex: иначе радио Yes/No встанут друг под друга.       */
body.preset-eflowz .form .form-checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.666667rem;
  vertical-align: top;
}

body.preset-eflowz .form .form-checkbox input[type="checkbox"],
body.preset-eflowz .form .form-checkbox input[type="radio"] {
  flex: none;
  margin-top: 0.25em;
}

/* --- 6. Главная: рамка со скруглениями вокруг текста под заголовком -----
   .hero-left__content — приём темы для читаемости на фоне картинки
   (полупрозрачная белая подложка + blur + радиус). В нашем герое текст
   и так лежит на плотной карточке #F4F4F5.
   Только десктоп: ниже 1024 остаётся исходный герой темы, там подложка
   пока держит читаемость. Мобильную версию правим отдельным заходом.     */
@media (min-width: 1024px) {
  body.preset-eflowz .hero:has(.hero-left) .hero-left__content {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    padding: 0;
    width: auto;
    /* мягкая тень рисовала ту же рамку, что и радиус, — убираем вместе с ней */
    box-shadow: none;
  }
}

/* --- 5b. Чекбоксы на /request-a-quote/ — настоящая причина ----------------
   Правка 5 выше била мимо: там класс .form-checkbox (форма отклика на вакансию),
   а на этой странице разметка другая — label.deliveryRadio.labelContainer
   с парой input + span.checkbox-label + span.checkmark.
   Ни одного правила для labelContainer / checkmark / deliveryRadio в теме нет —
   разметку кастомного чекбокса вставили без сопутствующего CSS.
   Из-за этого нативный input подхватывает общее правило ширины и растягивается
   на 972px: замерено getBoundingClientRect() — [238, 331, 973, 13].
   Отсюда он и уезжает на отдельную строку над вопросом.                      */
body.preset-eflowz label.labelContainer {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  margin-bottom: 0.7em;
  cursor: pointer;
}

body.preset-eflowz label.labelContainer > input[type="checkbox"],
body.preset-eflowz label.labelContainer > input[type="radio"] {
  width: 1.1em !important;
  min-width: 1.1em;
  max-width: 1.1em !important;
  height: 1.1em;
  flex: none;
  margin: 0.15em 0 0 0;
  accent-color: var(--primary-color);
}

body.preset-eflowz label.labelContainer .checkbox-label {
  flex: 1 1 auto;
}

/* span.checkmark — пустой и без стилей, в вёрстке ничего не рисует.
   Прячем, чтобы не влиял на flex-раскладку. */
body.preset-eflowz label.labelContainer .checkmark {
  display: none;
}

/* Поля в поповере аккаунта были с белой рамкой на светлом фоне — границы
   не читались. PM просил «в полях ввода» тоже, поэтому даём мягкий контур. */
body.preset-eflowz .account-popup__form-input {
  border-color: rgba(17, 24, 39, 0.25);
  background-color: rgba(255, 255, 255, 0.72);
}

/* ==========================================================================
   RevA — мобильная версия
   ========================================================================== */

/* --- 7. Герой на мобиле: вернуть картинку -------------------------------
   В нашем форке в .hero-right дописан `display: none`, а `display: block`
   включается только с breakpoint(tab-lg) = 1025px. У rapitran, на который
   ссылается PM, этого нет: базовые стили .hero-right там совпадают с нашими
   один в один, кроме этой пары строк. Отсюда и «мобильная версия сухая,
   без картинок».

   Но копировать rapitran дословно нельзя: у них в герое иллюстрации
   с прозрачным фоном, и absolute + translate(20%,20%) в правом нижнем углу
   читается как «выглядывающая» картинка. У нас там фотографии — прямоугольные,
   и обрезанный угол смотрелся бы случайным. Поэтому кладём фото в поток
   под текст, во всю ширину.                                                */
@media (max-width: 1024px) {
  body.preset-eflowz .hero:has(.hero-left) .hero-right {
    display: block;
    position: static;
    transform: none;
    filter: none;
    width: 100%;
    margin-top: 1.7rem;
  }

  body.preset-eflowz .hero:has(.hero-left) .hero-right__img {
    width: 100%;
    height: auto;
    opacity: 1;
  }

  body.preset-eflowz .hero:has(.hero-left) .hero-right__img img {
    display: block;
    width: 100%;
    height: 13rem;
    object-fit: cover;
    object-position: center;
  }
}

/* --- 8. Мобильная главная: текст уходил за края экрана ------------------
   PM, пункт 15 (image18). Виновник найден замером: .cardblock__inner
   на вьюпорте 500px имел ширину 524.6px и торчал по 12px с каждой стороны
   (left -12, right 512 при vw 500).
   Причина: .cardblock__wrap — это display:flex, а у .cardblock__inner
   в базовых стилях нет ширины, поэтому flex-элемент распирает до min-content.
   У rapitran ровно для этого есть отдельное правило .cardblock__inner{width:100%} —
   у нас оно появляется только с 1025px. Возвращаем его на мобилку.        */
@media (max-width: 1024px) {
  body.preset-eflowz .cardblock__inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* --- 9. Отступ героя от шапки на мобиле ---------------------------------
   PM: «ток надо чуть больший отступ от хедера» (image24).
   Замер: шапка fixed высотой 83px, а padding-top героя 80px — заголовок
   начинался ровно под её нижней кромкой, впритык.                         */
@media (max-width: 1024px) {
  body.preset-eflowz .hero:has(.hero-left) {
    padding-top: 7.2rem;
    /* Одного паддинга мало: .hero — это flex-колонка с min-height 650px
       и центрированием. Содержимое выше content-box, поэтому при
       justify-content:center оно выпирает вверх ЗА паддинг, и заголовок
       оказывался на y=19 при шапке высотой 83. Замерено на /join-our-team/.
       Отпускаем высоту и прижимаем содержимое к верху. */
    justify-content: flex-start;
    min-height: 0;
    height: auto;
  }
}

/* --- 10. Мобильное меню: читаемость и кегль -----------------------------
   PM, пункты 16-17 (image19): «нужно в 2 раза увеличить шрифт, сменить цвет
   шрифта, чтобы его было видно» + «кнопка My Account, сейчас плохо видно».

   Причина найдена диффом с rapitran: у них панель меню — сплошная заливка
   (`background: core.$primary-color`), а наш форк заменил её градиентом из
   семи стопов, построенным на --secondary-color (#E8F5EC, почти белый).
   Белые пункты на светлых участках этого градиента просто исчезают.

   Возвращаем сплошную заливку. Берём тёмный #111827, а не зелёный:
   белым по #3A7D44 контраст 2.7:1 — ниже порога даже для крупного текста,
   а по #111827 это 17:1. Тёмная панель к тому же совпадает по настроению
   с мобильными героями, на которые PM ссылается как на эталон.            */
@media (max-width: 1024px) {
  body.preset-eflowz .header .header-menu__wrapper {
    background: #0F1F14;
  }

  body.preset-eflowz .header .header-menu__items > li > a {
    font-size: 1.9rem;
    line-height: 1.35;
    color: #FFFFFF;
  }

  body.preset-eflowz .header .header-menu__items .arrow {
    color: #FFFFFF;
  }

  /* Подменю внутри мобильной панели: чуть мельче основного уровня */
  body.preset-eflowz .header .header-menu__wrapper .sub-menu {
    background: transparent;
    border: none;
  }

  body.preset-eflowz .header .header-menu__wrapper .sub-menu a {
    font-size: 1.35rem;
    color: rgba(255, 255, 255, 0.82);
  }

  body.preset-eflowz .header .header-menu__wrapper .sub-menu a:hover {
    color: #FFFFFF;
  }
}

/* ==========================================================================
   Страницы вакансий (шаблон tmpl-hr-generalist) — правки PM от 28.09
   Всё ограничено секцией #form_anchor и телом .main--hrgeneralist-page,
   чтобы не задеть формы и кнопки на других страницах.
   ========================================================================== */

/* --- 1. Заголовок «Job Application» не читался -------------------------
   В parts/part/form/form.php:154 у него ИНЛАЙНОВЫЙ стиль
   style="color: var(--secondary-color)". Инлайн перебивает любой внешний
   CSS, поэтому только !important. В секции два h3, так что селектор узкий —
   бьём ровно в тот, что лежит прямо в контейнере, а не в шагах формы.      */
body.preset-eflowz #form_anchor > .container > div > h3 {
  /* у Sitranis герой вакансии был тёмный — белый; у нас бледно-зелёный */
  color: #111827 !important;
}

/* --- 2. Кнопка Edit была невидимой -------------------------------------
   Причина не в самой кнопке: правило темы
   `.main--hrgeneralist-page .formbig .step .btn` задаёт
   background-color: var(--secondary-color) !important и color: #fff !important.
   При нашей палитре это белый текст на #E8F5EC — почти белом.
   Замер на лайве: bg rgb(232,245,236), color rgb(255,255,255).
   Под правило попадают обе кнопки внутри шагов, не только Edit, —
   они все сейчас невидимы, поэтому чиним разом.
   Их селектор весит (0,4,0) с !important, наш — (0,5,1), перебивает.       */
body.preset-eflowz .main--hrgeneralist-page .formbig .step .btn {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #FFFFFF !important;
}

body.preset-eflowz .main--hrgeneralist-page .formbig .step .btn > span {
  color: #FFFFFF !important;
}

body.preset-eflowz .main--hrgeneralist-page .formbig .step .btn:hover,
body.preset-eflowz .main--hrgeneralist-page .formbig .step .btn:focus {
  background-color: #2D6235 !important;
  border-color: #2D6235 !important;
  color: #FFFFFF !important;
}

/* --- 4. Форматы резюме (Doc / PDF / TXT) по левому краю -----------------
   Список наследовал text-align:center от .text-center выше по дереву,
   из-за чего маркеры стояли слева, а строки плавали по центру.            */
body.preset-eflowz #form_anchor .form-ul,
body.preset-eflowz #form_anchor .form-ul ul,
body.preset-eflowz #form_anchor .form-ul li {
  text-align: left;
}

/* --- 3. Левая карточка вакансии: лишний отступ сверху --------------------
   padding-top был 130px = min(28%, 9.63rem) — это место, которое я резервирую
   под уголок в правом верхнем углу карточки (см. блок с --card-corner-pad).
   Но на страницах вакансий уголок не рисуется: правило темы
   `.main--hrgeneralist-page .cardblock__inner { background: ...!important }`
   использует ШОРТКАТ background и затирает background-image с уголком.
   Отступ при этом остаётся — получается 100px пустоты над заголовком.
   Возвращаем отступ к тому, что задаёт сама тема (2.22rem = 30px),
   вровень с нижним.                                                        */
body.preset-eflowz .main--hrgeneralist-page .hero--hrgeneralist .cardblock__inner {
  padding-top: 2.22222rem;
  background-image: none;
}

/* Выравнивание верхних кромок двух белых блоков (просьба PM).
   Замер при 1440: левая карточка начиналась на y=131, правая — на y=174,
   разница 43px из-за заголовка «Job Application» над формой.
   Сдвигаем левую колонку вниз на эту разницу — 43px = 3.19rem при корне 13.5.
   Только десктоп: ниже 1024 колонки идут друг под другом и сдвиг не нужен.
   Если решите оставить левый блок выше — просто удалите этот блок.         */
@media (min-width: 1025px) {
  body.preset-eflowz .main--hrgeneralist-page .hero--hrgeneralist .cardblock__inner {
    margin-top: 3.19rem;
  }
}


/* ##########################################################################
   СЛОЙ EINsearch (Eflowz, 21.10.2026)
   Эталон: einsearch.com, гайд — проект claude/einsearch-style.md.
   Всё ниже перекрывает правила выше (тот же вес, идёт позже).
   Корень rem темы плавающий: 1rem = 13.5px при 1440 → px из эталона / 13.5.
   ########################################################################## */

body.preset-eflowz {
  --ef-green: #3A7D44;
  --ef-green-dark: #2D6235;
  --ef-green-press: #122517;
  --ef-green-light: #5AAB66;
  --ef-green-pale: #C8E6CC;
  --ef-mint: #7DD88A;
  --ef-dark: #0F1F14;
  --ef-ink: #111827;
  --ef-text: #4B5563;
  --ef-muted: #6B7280;
  --ef-line: #E5E7EB;
  --ef-gray-bg: #F4F4F5;
  --ef-radius-btn: 0.6rem;     /* 8px  */
  --ef-radius-field: 0.74rem;  /* 10px */
  --ef-radius-card: 1.19rem;   /* 16px */
  --ef-radius-big: 1.48rem;    /* 20px */
  --primary-font: 'Inter', sans-serif;
  --ef-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-family: 'Inter', sans-serif;
  color: #374151;
}

/* ---------- Типографика ----------
   Тема: h1–h6 и .has-hN — Gilroy (output.min.css), body — var(--primary-font).
   EINsearch: всё Inter, заголовки 800 с отрицательным трекингом,
   крупный H1 героя — Plus Jakarta Sans 900. Капс убираем.               */
body.preset-eflowz h1, body.preset-eflowz h2, body.preset-eflowz h3,
body.preset-eflowz h4, body.preset-eflowz h5, body.preset-eflowz h6,
body.preset-eflowz .has-h1, body.preset-eflowz .has-h2, body.preset-eflowz .has-h3,
body.preset-eflowz .has-h4, body.preset-eflowz .has-h5, body.preset-eflowz .has-h6 {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: none;
}

body.preset-eflowz .twi__title,
body.preset-eflowz .tblock__title {
  color: var(--ef-ink);
}

body.preset-eflowz a:not(.btn) { transition: color .15s; }

/* ---------- Кнопки: r 8, без капса, 700, «приподнимаются» на ховере ----------
   Диагональную заливку темы (::before) выключаем — у EINsearch плоская
   смена цвета. Поэтому ховер-состояния всех вариантов заданы явно.        */
body.preset-eflowz .btn {
  min-height: 0;
  padding: 0.96rem 1.93rem;              /* 13px 26px */
  border-width: 0;
  border-radius: var(--ef-radius-btn);
  background-color: var(--ef-green);
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
  transition: background-color .18s, color .18s, transform .18s, box-shadow .18s;
}

body.preset-eflowz .btn::before { display: none; }

body.preset-eflowz .btn:hover,
body.preset-eflowz .btn:focus {
  background-color: var(--ef-green-dark);
  border-color: var(--ef-green-dark);
  color: #FFFFFF;
  box-shadow: none;
  transform: translateY(-1px);
}

body.preset-eflowz .btn:active {
  background-color: var(--ef-green-press);
  box-shadow: none;
  transform: none;
}

/* Белая кнопка (на тёмном/зелёном): надпись тёмно-зелёная и на ховере тоже */
body.preset-eflowz .btn--white,
body.preset-eflowz .btn--primary.btn--white,
body.preset-eflowz .btn--primary-white.btn--white,
body.preset-eflowz .cardblock__inner .btn,
body.preset-eflowz .cardblock__link,
body.preset-eflowz .btn--white:hover,
body.preset-eflowz .btn--white:focus,
body.preset-eflowz .cardblock__inner .btn:hover,
body.preset-eflowz .cardblock__link:hover,
body.preset-eflowz .cardblock__link:focus {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--ef-green-dark);
}

body.preset-eflowz .btn--white > span,
body.preset-eflowz .btn--white:hover > span,
body.preset-eflowz .btn--white:focus > span,
body.preset-eflowz .cardblock__inner .btn > span,
body.preset-eflowz .cardblock__inner .btn:hover > span,
body.preset-eflowz .cardblock__link > span,
body.preset-eflowz .cardblock__link:hover > span,
body.preset-eflowz .cardblock__link:focus > span {
  color: var(--ef-green-dark);
}

body.preset-eflowz .btn--white:hover,
body.preset-eflowz .cardblock__link:hover {
  box-shadow: 0 0.3rem 1.48rem rgba(0, 0, 0, 0.12);
}

/* Кнопка аккаунта в шапке: на десктопе сплошная зелёная (как Register) */
@media (min-width: 1024px) {
  body.preset-eflowz .header .header-menu__account-link {
    padding: 0.6rem 1.33rem;             /* 8px 18px */
    font-size: 1rem;
  }
  body.preset-eflowz .header .header-menu__account-link,
  body.preset-eflowz .header .header-menu__account-link:hover {
    background-color: var(--ef-green);
    color: #FFFFFF;
  }
  body.preset-eflowz .header .header-menu__account-link:hover {
    background-color: var(--ef-green-dark);
  }
  body.preset-eflowz .header .header-menu__account-link > span,
  body.preset-eflowz .header .header-menu__account-link:hover > span {
    color: #FFFFFF;
  }
}

/* Кнопки шагов формы вакансии: тот же радиус */
body.preset-eflowz .main--hrgeneralist-page .formbig .step .btn {
  border-radius: var(--ef-radius-btn) !important;
}

/* ---------- Шапка: белая, тонкая линия, ссылки #374151 / 600 ---------- */
@media (min-width: 1024px) {
  body.preset-eflowz .header::before,
  body.preset-eflowz .header:not(.scrolling)::before,
  body.preset-eflowz .header.scrolling::before {
    background: #FFFFFF;
    box-shadow: 0 1px 0 var(--ef-line);
  }

  body.preset-eflowz .header .header-menu__items > li > a {
    color: #374151;
    font-weight: 600;
  }

  body.preset-eflowz .header .header-menu__items > li > a:hover {
    color: var(--ef-green);
  }

  body.preset-eflowz .header .sub-menu {
    border: 1px solid var(--ef-line);
    border-radius: 0.89rem;
    box-shadow: 0 0.6rem 2.37rem rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }
}

/* Подменю: ховер — бледно-зелёная подложка и тёмный текст (как на EINsearch) */
body.preset-eflowz .header .sub-menu a:hover,
body.preset-eflowz .header .sub-menu .sub-menu__link:hover,
body.preset-eflowz .header .sub-menu li:hover > a {
  color: var(--ef-dark);
}

/* ---------- Фоны героев ----------
   Мы убрали подмену bg-top-sitranis.jpg, значит у героев без .hero-left
   вернулся бы оранжевый bg-top.jpg темы. Перекрываем всем героям:
   бледно-зелёный фон + два мягких круга (на EINsearch это ::before/::after
   500 и 300px с альфой .08/.06; здесь — радиальными градиентами, чтобы не
   занимать псевдоэлементы темы).                                          */
body.preset-eflowz .hero {
  background-color: var(--ef-green-pale);
  background-image:
    radial-gradient(circle 18.5rem at 9.6rem 9.6rem, rgba(58, 125, 68, 0.08) 99.6%, transparent 100%),
    radial-gradient(circle 11.1rem at 26rem calc(100% - 5.2rem), rgba(58, 125, 68, 0.06) 99.6%, transparent 100%);
  background-repeat: no-repeat;
  background-size: auto;
}

/* ---------- Герой «текст + фото» (главная и внутренние) — десктоп ----------
   Было (Sitranis): фото на 79% ширины во всю высоту + плашка-карточка поверх.
   Стало (EINsearch): текст слева прямо на бледно-зелёном, фото справа
   в скруглённой рамке с мягкой тенью — как мокап на einsearch.com.        */
@media (min-width: 1024px) {
  body.preset-eflowz .hero:has(.hero-left) {
    min-height: 50rem;
    background-color: var(--ef-green-pale);
    background-image:
      radial-gradient(circle 18.5rem at 9.6rem 9.6rem, rgba(58, 125, 68, 0.08) 99.6%, transparent 100%),
      radial-gradient(circle 11.1rem at 26rem calc(100% - 5.2rem), rgba(58, 125, 68, 0.06) 99.6%, transparent 100%);
    color: var(--ef-ink);
  }

  body.preset-eflowz .hero:has(.hero-left) .container {
    align-items: center;
    min-height: 50rem;
    padding-top: 9rem;
    padding-bottom: 5.9rem;
    /* край контента = край .container темы (max-width 76.78rem + поля 16px) */
    padding-left: max(2.96rem, calc((100% - 76.78rem) / 2 + 16px));
    padding-right: max(2.96rem, calc((100% - 76.78rem) / 2 + 16px));
  }

  body.preset-eflowz .hero .hero-wrap .hero-right {
    top: 9rem;
    bottom: 5.9rem;
    left: 54%;
    right: max(2.96rem, calc((100% - 76.78rem) / 2 + 16px));
    border-radius: var(--ef-radius-big);
    overflow: hidden;
    box-shadow: 0 1.78rem 4.74rem rgba(20, 60, 30, 0.16);
    background: #FFFFFF;
  }

  body.preset-eflowz .hero .hero-wrap .hero-left {
    width: 48%;
    max-width: 48rem;
    padding: 0;
    background: transparent;
    color: var(--ef-ink);
  }

  body.preset-eflowz .hero .hero-wrap .hero-left__title,
  body.preset-eflowz .hero .hero-wrap .hero-left__title h1,
  body.preset-eflowz .hero .hero-wrap .hero-left__title h2,
  body.preset-eflowz .hero .hero-wrap .hero-left__title h3 {
    font-family: var(--ef-display);
    font-size: 3.7rem;                   /* 50px */
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--ef-ink);
  }

  body.preset-eflowz .hero .hero-wrap .hero-left__content {
    color: var(--ef-text);
    font-size: 1.19rem;                  /* 16px */
    line-height: 1.6;
  }
}

/* Слоган героя → eyebrow над заголовком (как «WHY EINSEARCH» на эталоне):
   uppercase 12px / 700 зелёным с точкой. Плашкой не делаем — слоганы
   длинные и в две строки, пилюля так не смотрится. Ставим над H1
   через order: .hero-left делаем flex-колонкой. */
body.preset-eflowz .hero .hero-left:has(.hero-left__slogan) {
  display: flex;
  flex-direction: column;
}

body.preset-eflowz .hero .hero-left__slogan {
  order: -1;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 1.2rem;
  padding: 0;
  background: none;
  color: var(--ef-green);
  font-size: 0.89rem;                    /* 12px */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.preset-eflowz .hero .hero-left__slogan::before {
  content: "";
  flex: none;
  width: 0.52rem;
  height: 0.52rem;
  border-radius: 50%;
  background: var(--ef-green);
  transform: translateY(-0.05rem);
}

/* Мобильный герой: тот же фон, фото со скруглением, заголовок Jakarta */
@media (max-width: 1024px) {
  body.preset-eflowz .hero:has(.hero-left) .hero-right__img img {
    border-radius: var(--ef-radius-card);
  }

  body.preset-eflowz .hero .hero-left__title,
  body.preset-eflowz .hero .hero-left__title h1 {
    font-family: var(--ef-display);
    font-weight: 900;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--ef-ink);
  }

  body.preset-eflowz .hero:has(.hero-left) .hero-left__content {
    background: rgba(255, 255, 255, 0.55);
    color: var(--ef-text);
  }
}

/* ---------- Карточки на светлом фоне ----------
   EINsearch: рамка 1.5px #E5E7EB, радиус 16, без тени; на ховере —
   зелёная рамка, зелёная тень, подъём на 2px и полоска 3px сверху.
   Полоска — фоновым градиентом (background-size 0 → 100%), а не ::before:
   у части карточек псевдоэлементы заняты темой.
   background-color не трогаем — у PRINCIPLE №2 тема красит карточку
   в зелёный, она должна таким и остаться.                                  */
body.preset-eflowz .twi-card__inner,
body.preset-eflowz .gridtext-item__wrap,
body.preset-eflowz .gci-item__wrap,
body.preset-eflowz .principleb-item__wrap,
body.preset-eflowz .cardstep-item__wrap,
body.preset-eflowz .twl__wrap,
body.preset-eflowz .bplan-item__wrap {
  border: 1.5px solid var(--ef-line);
  border-radius: var(--ef-radius-card);
  box-shadow: none;
  background-image: linear-gradient(var(--ef-green), var(--ef-green));
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 0% 3px;
  overflow: hidden;
  transition: border-color .22s, box-shadow .22s, transform .22s, background-size .25s;
}

body.preset-eflowz .twi-card__inner:hover,
body.preset-eflowz .gridtext-item__wrap:hover,
body.preset-eflowz .gci-item__wrap:hover,
body.preset-eflowz .principleb-item__wrap:hover,
body.preset-eflowz .cardstep-item__wrap:hover,
body.preset-eflowz .twl__wrap:hover,
body.preset-eflowz .bplan-item__wrap:hover {
  border-color: var(--ef-green);
  box-shadow: 0 0.6rem 2.37rem rgba(58, 125, 68, 0.12);
  transform: translateY(-2px);
  background-size: 100% 3px;
}

body.preset-eflowz .twi-card__img,
body.preset-eflowz .tci__img img,
body.preset-eflowz .bfwi-right img {
  border-radius: 0.89rem;                /* 12px */
}

/* ---------- Карточки на цветном фоне и CTA: тёмный градиент EINsearch ---------- */
body.preset-eflowz .gridcards-item__inner,
body.preset-eflowz .textsec__wrap,
body.preset-eflowz .lnc-item__content {
  border-radius: var(--ef-radius-card);
}

body.preset-eflowz .lnc-item__content {
  background: linear-gradient(135deg, var(--ef-dark) 0%, var(--ef-green-dark) 100%);
}

/* CTA-карточка «Begin Immediately!» (11 страниц): как финальная CTA
   внутренних страниц EINsearch — градиент #0F1F14 → #2D6235 и мягкое
   радиальное свечение сверху по центру. */
body.preset-eflowz .cardblock__inner {
  background:
    radial-gradient(circle 22rem at 50% -4rem, rgba(90, 171, 102, 0.22) 0%, transparent 70%),
    linear-gradient(135deg, var(--ef-dark) 0%, var(--ef-green-dark) 100%);
  border-radius: var(--ef-radius-big);
  box-shadow: 0 1.48rem 4.44rem rgba(15, 31, 20, 0.22);
  color: #FFFFFF;
}

/* ---------- Отзывы: светло-серый фон без звёздочек, карточки EINsearch ---------- */
body.preset-eflowz .bteam {
  background-color: var(--ef-gray-bg);
  background-image: none;
}

body.preset-eflowz .bteam-item__wrap {
  border: 1px solid var(--ef-line);
  border-radius: var(--ef-radius-card);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

body.preset-eflowz .bteam-item__title {
  color: var(--ef-ink);
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- Тёмная секция Client Support + подписка ---------- */
body.preset-eflowz .btci,
body.preset-eflowz .bfwi {
  background-color: var(--ef-dark);
  background-image: none;
}

/* Свечение — одно на всю секцию: левая половина несёт его правый край,
   правая — левый, без шва (как фон 200% в предыдущей версии). */
@media (min-width: 1024px) {
  body.preset-eflowz .global-content .btci {
    background-image: radial-gradient(circle 30rem at 100% 0, rgba(90, 171, 102, 0.12) 0%, transparent 70%);
    background-size: auto;
  }
  body.preset-eflowz .global-content .bfwi {
    background-image: radial-gradient(circle 30rem at 0 0, rgba(90, 171, 102, 0.12) 0%, transparent 70%);
    background-size: auto;
  }
}

body.preset-eflowz .btci-left__desc {
  color: rgba(255, 255, 255, 0.65);
}

/* «SIGN UP FOR OUR NEWSLETTERS…» — это не текст, а заголовок колонки:
   в теме капс 500 серым. Делаем как H2 на тёмном у EINsearch. */
body.preset-eflowz .bfwi-left__desc {
  color: #FFFFFF;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: none;
}

/* Две половины тёмной секции: в теме .container внутри каждой половины
   начинается от края экрана. Прижимаем контент к общей сетке страницы:
   левая половина — к правому краю своей колонки, правая — к левому. */
@media (min-width: 1024px) {
  body.preset-eflowz .global-content .btci > .container {
    max-width: calc(76.78rem / 2 + 16px);
    margin-left: auto;
    margin-right: 0;
    padding-right: 2.4rem;
  }
  body.preset-eflowz .global-content .bfwi > .container {
    max-width: calc(76.78rem / 2 + 16px);
    margin-left: 0;
    margin-right: auto;
    padding-left: 2.4rem;
  }
}

body.preset-eflowz .btci-left__phone {
  color: var(--ef-mint);
}

body.preset-eflowz .btci-left__phone:hover {
  color: #FFFFFF;
}

/* ---------- Футер: #0F1F14, градиентная линия сверху, водяной знак ---------- */
body.preset-eflowz .footer-middle {
  position: relative;
  background-color: var(--ef-dark);
  background-image: none;
  overflow: hidden;
}

body.preset-eflowz .footer-middle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ef-green), var(--ef-green-light), var(--ef-green));
  z-index: 1;
}

/* Название бренда огромным полупрозрачным — как «EIN SEARCH» в подвале эталона */
body.preset-eflowz .footer-middle::after {
  content: "Eflowz";
  position: absolute;
  left: 50%;
  bottom: -2.2rem;
  transform: translateX(-50%);
  font-family: var(--ef-display);
  font-size: 10.4rem;                    /* 140px */
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(58, 125, 68, 0.09);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}

body.preset-eflowz .footer-middle > * {
  position: relative;
  z-index: 1;
}

body.preset-eflowz .footer-middle a {
  color: rgba(255, 255, 255, 0.65);
}

body.preset-eflowz .footer-middle a:hover {
  color: #FFFFFF;
}

body.preset-eflowz .footer-middle .footer-menu > li > a,
body.preset-eflowz .footer-middle h2,
body.preset-eflowz .footer-middle h3,
body.preset-eflowz .footer-middle h4,
body.preset-eflowz .footer-middle .footer__menu > li > a,
body.preset-eflowz .footer-middle .menu > li > a {
  color: var(--ef-green-light);
  letter-spacing: 0.06em;
}

body.preset-eflowz .footer-bottom {
  background-color: var(--ef-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- Формы ----------
   Поля: радиус 10, рамка 1.5px #E5E7EB, фокус — зелёная рамка и мягкое
   кольцо 5px (как поле поиска на einsearch.com/ein-lookup).
   Подписка (.bfwi — подчёркнутое поле на тёмном) и поповер аккаунта не трогаем. */
body.preset-eflowz main input[type="text"],
body.preset-eflowz main input[type="email"],
body.preset-eflowz main input[type="tel"],
body.preset-eflowz main input[type="number"],
body.preset-eflowz main input[type="date"],
body.preset-eflowz main select,
body.preset-eflowz main textarea {
  border-radius: var(--ef-radius-field);
  transition: border-color .15s, box-shadow .15s;
}

body.preset-eflowz main input[type="text"]:focus,
body.preset-eflowz main input[type="email"]:focus,
body.preset-eflowz main input[type="tel"]:focus,
body.preset-eflowz main input[type="number"]:focus,
body.preset-eflowz main input[type="date"]:focus,
body.preset-eflowz main select:focus,
body.preset-eflowz main textarea:focus {
  outline: none;
  border-color: var(--ef-green);
  box-shadow: 0 0 0 5px rgba(58, 125, 68, 0.1);
}

body.preset-eflowz .bfwi input,
body.preset-eflowz .bfwi input:focus {
  border-radius: 0;
  box-shadow: none;
}

/* ---------- Куки-баннер: тёмный вместо ярко-зелёной простыни ---------- */
body.preset-eflowz .cookies-alert_section {
  background: var(--ef-dark);
  border-top: 3px solid var(--ef-green);
}

body.preset-eflowz .cookies-alert_content {
  font-size: 0.89rem; /* 04.11: уменьшено вдвое (было 1.78rem) */
  line-height: 1.5;
}

body.preset-eflowz .cookies-alert_content h2 {
  font-size: 1.3rem; /* вдвое меньше прежнего заголовка (~2.6rem) */
  line-height: 1.2;
  margin-bottom: 0.4em;
}

body.preset-eflowz .cookies-alert_content .cookies-alert_message {
  line-height: 1.5;
  margin-bottom: 0.8em;
}

/* ---------- Прелоадер ----------
   Фон #0F1F14, слово — Plus Jakarta Sans 900 без капса (как вордмарк).
   Орбиту темы оставляем (её крутит GSAP), только перекрашиваем:
   дорожки белые .12, дуга и узлы — зелёные оттенки EINsearch.           */
body.preset-eflowz #preloader {
  background: var(--ef-dark);
  animation: none;
}

body.preset-eflowz #preloader .loader-content {
  gap: 1.8rem;
}

body.preset-eflowz #preloader .loader-text {
  color: #FFFFFF;
  font-family: var(--ef-display);
  font-weight: 900;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: none;
}

body.preset-eflowz #preloader .loader-orbit__track { stroke: rgba(255, 255, 255, 0.12); }
body.preset-eflowz #preloader .loader-orbit__arc { stroke: var(--ef-green-light); }
body.preset-eflowz #preloader .loader-orbit__node { fill: var(--ef-mint); }
body.preset-eflowz #preloader .loader-orbit__core { fill: var(--ef-green); }

/* ---------- Дополнения после проверки страниц ---------- */

/* Pricing «Here's how we customize plans»: заголовки карточек на тёмном
   градиенте были зелёными (правило RevA красит акцентные заголовки primary) —
   на #0F1F14→#2D6235 это 2–3:1. Белый. */
body.preset-eflowz .lnc-item__content,
body.preset-eflowz .lnc-item__content * {
  color: #FFFFFF;
}

body.preset-eflowz .lnc-item__content p {
  color: rgba(255, 255, 255, 0.75);
}

/* Кнопки страниц вакансий: в теме капс через правило с !important */
body.preset-eflowz .main--hrgeneralist-page .btn,
body.preset-eflowz .main--hrgeneralist-page .btn > span {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Герои с текстовым блоком .hero-bot (join-our-team, referrals, values,
   support, request-a-quote): в теме .hero-bot стоит в одной строке с
   .hero-wrap и при фото справа заезжал на картинку. Складываем левую
   колонку столбиком: заголовок, под ним текстовая карточка. */
@media (min-width: 1024px) {
  body.preset-eflowz .hero:has(.hero-left):has(.hero-bot) .container {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2rem;
  }

  body.preset-eflowz .hero:has(.hero-bot) .hero-bot {
    position: relative;
    z-index: 2;
    width: 48%;
    max-width: 48rem;
    margin: 0;
    background: #FFFFFF;
    border: 1.5px solid var(--ef-line);
    border-radius: var(--ef-radius-card);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    transform: none;
  }
}

/* Мобильная шапка: в теме — цветная подложка (у нас зелёный градиент),
   на ней пропадала зелёная плитка логотипа. У EINsearch шапка белая
   и на мобильном тоже. Бургер — тёмный. */
@media (max-width: 1023.98px) {
  body.preset-eflowz .header::before,
  body.preset-eflowz .header.scrolling::before {
    background: #FFFFFF;
    box-shadow: 0 1px 0 var(--ef-line);
  }

  body.preset-eflowz .header .header-menu__toggle span,
  body.preset-eflowz .header .header-menu__toggle span::before,
  body.preset-eflowz .header .header-menu__toggle span::after,
  body.preset-eflowz .header .header-menu__toggle::before,
  body.preset-eflowz .header .header-menu__toggle::after {
    background-color: var(--ef-ink);
  }

  /* в открытом состоянии средняя полоска у темы прозрачная (крестик) */
  body.preset-eflowz .header .header-menu__toggle[aria-expanded="true"] span {
    background-color: transparent;
  }

  body.preset-eflowz .bfwi-left__desc {
    font-size: 1.7rem;
  }
}


/* ##########################################################################
   ДЕКОР И АНИМАЦИИ (22.10.2026)
   Элементы с EINsearch, переосмысленные под Eflowz. Разметку вставляет
   assets/build/js/preset-eflowz.js (иконки, акцент над заголовками, чип).
   ########################################################################## */

/* ---------- Иконки-плитки в карточках ----------
   Как плашки иконок EINsearch (44×44, r 10, бледно-зелёная, линейная
   иконка #3A7D44), но на ховере карточки плитка «загорается»:
   заливка зелёная, иконка белая, лёгкий поворот — у эталона так нет. */
body.preset-eflowz .ef-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 3.26rem;                        /* 44px */
  height: 3.26rem;
  margin: 0 0 1.19rem;
  border-radius: 0.74rem;                /* 10px */
  background: var(--ef-green-pale);
  color: var(--ef-green);
  transition: background-color .25s, color .25s, transform .35s cubic-bezier(.22, 1, .36, 1);
}

body.preset-eflowz .ef-icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

body.preset-eflowz .ef-icon--center {
  margin-left: auto;
  margin-right: auto;
}

body.preset-eflowz .ef-icon--dark {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--ef-mint);
}

body.preset-eflowz *:hover > .ef-icon {
  background: var(--ef-green);
  color: #FFFFFF;
  transform: rotate(-6deg) scale(1.04);
}

body.preset-eflowz *:hover > .ef-icon--dark {
  background: var(--ef-mint);
  color: var(--ef-dark);
}

/* ---------- Акцент над заголовками секций ----------
   Вместо текстового eyebrow EINsearch (текста под него нет) — три точки
   «потока»: зелёная, светлее, ещё светлее; дышат по очереди. */
body.preset-eflowz .ef-mark {
  display: flex;
  width: 100%;
  gap: 0.37rem;
  margin: 0 0 0.9rem;
}

body.preset-eflowz .ef-mark--center {
  justify-content: center;
}

body.preset-eflowz .ef-mark i {
  display: block;
  width: 0.52rem;
  height: 0.52rem;
  border-radius: 50%;
  background: var(--ef-green);
  animation: ef-flow-dots 2.4s ease-in-out infinite;
}

body.preset-eflowz .ef-mark i:nth-child(1) { width: 1.6rem; border-radius: 1rem; }
body.preset-eflowz .ef-mark i:nth-child(2) { background: var(--ef-green-light); animation-delay: .2s; }
body.preset-eflowz .ef-mark i:nth-child(3) { background: var(--ef-mint); animation-delay: .4s; }

@keyframes ef-flow-dots {
  0%, 100% { opacity: 1; transform: translateX(0); }
  50%      { opacity: .55; transform: translateX(0.22rem); }
}

/* ---------- Списки: галочки в кружках вместо точек ----------
   EINsearch отмечает пункты зелёной галочкой. Делаем кружок #C8E6CC
   с галочкой #3A7D44 (SVG в data-URI), размер берём тот, что задала тема. */
body.preset-eflowz {
  --ef-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A7D44' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E");
  --ef-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E");
  --ef-question: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A7D44' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 2.6-3 4.4'/%3E%3Cpath d='M12 18.2h.01'/%3E%3C/svg%3E");
}

body.preset-eflowz .twl-item::before,
body.preset-eflowz .listdecor__content ul li::before,
body.preset-eflowz .bplan-item__desc ul li::before {
  background: var(--ef-green-pale) var(--ef-check) center / 66% no-repeat;
}

/* На зелёной карточке плана (через одну) — инверсия */
body.preset-eflowz .main--openaccount-page .twl-item::before {
  background-color: var(--ef-green-pale);
}

/* Вопросы на /support/ — кружок со знаком вопроса */
body.preset-eflowz .listtext-item__content ul li::before {
  background: var(--ef-green-pale) var(--ef-question) center / 70% no-repeat;
}

/* Списки без оформления в теме (вакансия «Why this position…», форма) */
body.preset-eflowz .hero-item__desc ul,
body.preset-eflowz .form-ul ul {
  list-style: none;
  padding-left: 0;
}

body.preset-eflowz .hero-item__desc ul li,
body.preset-eflowz .form-ul ul li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: 0.35rem;
}

body.preset-eflowz .hero-item__desc ul li::before,
body.preset-eflowz .form-ul ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--ef-green-pale) var(--ef-check) center / 66% no-repeat;
}

/* ---------- Чип со слоганом на фото героя ----------
   Как плавающая карточка записи поверх мокапа на EINsearch: белая,
   r 14, мягкая тень. Свой ход: медленно «дрейфует», точка-индикатор
   пульсирует кольцом. Только десктоп — на мобиле фото идёт в потоке. */
body.preset-eflowz .ef-hero-chip {
  display: none;
}

@media (min-width: 1024px) {
  body.preset-eflowz .ef-hero-chip {
    position: absolute;
    z-index: 3;
    left: calc(54% - 3rem);
    bottom: 3.7rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1.2rem 0.9rem 0.9rem;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 1.04rem;
    box-shadow: 0 1.2rem 3.2rem rgba(20, 60, 30, 0.18);
    opacity: 0;
    transform: translateY(1rem);
  }

  body.preset-eflowz.loaded .ef-hero-chip {
    animation:
      ef-chip-in .8s cubic-bezier(.22, 1, .36, 1) 1.1s forwards,
      ef-chip-drift 7s ease-in-out 2s infinite;
  }
}

body.preset-eflowz .ef-hero-chip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.67rem;
  height: 2.67rem;
  border-radius: 0.74rem;
  background: var(--ef-green-pale);
  color: var(--ef-green);
}

body.preset-eflowz .ef-hero-chip__icon svg { width: 1.3rem; height: 1.3rem; }

body.preset-eflowz .ef-hero-chip__text { display: flex; flex-direction: column; line-height: 1.25; }
body.preset-eflowz .ef-hero-chip__text b { font: 800 1.04rem var(--ef-display); color: var(--ef-ink); }
body.preset-eflowz .ef-hero-chip__text small { font-size: 0.89rem; color: var(--ef-muted); }

body.preset-eflowz .ef-hero-chip__dot {
  position: relative;
  width: 0.6rem;
  height: 0.6rem;
  margin-left: 0.3rem;
  border-radius: 50%;
  background: var(--ef-green-light);
}

body.preset-eflowz .ef-hero-chip__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ef-green-light);
  animation: ef-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes ef-chip-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ef-chip-drift {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -0.55rem; }
}

@keyframes ef-ping {
  0%   { transform: scale(1); opacity: .7; }
  80%, 100% { transform: scale(2.6); opacity: 0; }
}

/* Точка в eyebrow героя тоже «дышит» тем же пингом */
body.preset-eflowz .hero .hero-left__slogan::before {
  box-shadow: 0 0 0 0 rgba(58, 125, 68, 0.45);
  animation: ef-ring 2.2s ease-out infinite;
}

@keyframes ef-ring {
  0%   { box-shadow: 0 0 0 0 rgba(58, 125, 68, 0.45); }
  70%, 100% { box-shadow: 0 0 0 0.5rem rgba(58, 125, 68, 0); }
}

/* ---------- Точечная сетка на тёмных блоках ----------
   Едва заметный узор «сетка склада» поверх градиента и свечения. */
body.preset-eflowz .cardblock__inner {
  background:
    radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.4px) 0 0 / 1.33rem 1.33rem,
    radial-gradient(circle 22rem at 50% -4rem, rgba(90, 171, 102, 0.22) 0%, transparent 70%),
    linear-gradient(135deg, var(--ef-dark) 0%, var(--ef-green-dark) 100%);
}

body.preset-eflowz .btci,
body.preset-eflowz .bfwi {
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.4px);
  background-size: 1.33rem 1.33rem;
}

@media (min-width: 1024px) {
  body.preset-eflowz .global-content .btci {
    background-image:
      radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.4px),
      radial-gradient(circle 30rem at 100% 0, rgba(90, 171, 102, 0.12) 0%, transparent 70%);
    background-size: 1.33rem 1.33rem, auto;
  }
  body.preset-eflowz .global-content .bfwi {
    background-image:
      radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.4px),
      radial-gradient(circle 30rem at 0 0, rgba(90, 171, 102, 0.12) 0%, transparent 70%);
    background-size: 1.33rem 1.33rem, auto;
  }
}

/* ==========================================================================
   АНИМАЦИИ ПОЯВЛЕНИЯ — свои, не как у исходного сайта
   Было (тема): AOS — fade-up/left/right выезжают на 100px сбоку,
   zoom-in-up из масштаба 0.6; герой «падает» сверху на 15px.
   Стало: короткий подъём на 28px с расфокусом (blur → резкость),
   мягкое замедление cubic-bezier(.22,1,.36,1), левые/правые — с лёгким
   наклоном вместо бокового выезда; соседи идут каскадом (JS).
   Специфичность (0,3,1)/(0,4,1) — выше правил AOS (0,3,0).
   ========================================================================== */
body.preset-eflowz [data-aos][data-aos] {
  transition-property: opacity, transform, filter;
  transition-duration: .85s;
  transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}

body.preset-eflowz [data-aos^="fade"][data-aos^="fade"],
body.preset-eflowz [data-aos^="zoom"][data-aos^="zoom"] {
  opacity: 0;
  filter: blur(6px);
  transform: translate3d(0, 1.8rem, 0);
}

body.preset-eflowz [data-aos^="fade"][data-aos="fade-right"] {
  transform: translate3d(0, 1.8rem, 0) rotate(-1.2deg);
  transform-origin: left bottom;
}

body.preset-eflowz [data-aos^="fade"][data-aos="fade-left"] {
  transform: translate3d(0, 1.8rem, 0) rotate(1.2deg);
  transform-origin: right bottom;
}

body.preset-eflowz [data-aos^="zoom"][data-aos="zoom-in-up"] {
  transform: translate3d(0, 1.2rem, 0) scale(.94);
  filter: blur(4px);
}

body.preset-eflowz [data-aos][data-aos].aos-animate {
  opacity: 1;
  filter: none;
  transform: none;
}

/* --- Герой: элементы поднимаются снизу с расфокусом, по очереди;
       фото «раскрывается» из рамки и чуть доводит масштаб. --- */
body.preset-eflowz .hero .hero-left__title,
body.preset-eflowz .hero .hero-left__content,
body.preset-eflowz .hero .hero-bot {
  filter: blur(8px);
  transform: translateY(1.5rem);
  transition:
    opacity .9s cubic-bezier(.22, 1, .36, 1),
    transform .9s cubic-bezier(.22, 1, .36, 1),
    filter .9s cubic-bezier(.22, 1, .36, 1);
}

body.preset-eflowz .hero .hero-left__slogan {
  opacity: 0;
  transform: translateY(0.8rem);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}

body.preset-eflowz .hero .hero-left__title   { transition-delay: .15s; }
body.preset-eflowz .hero .hero-left__content { transition-delay: .35s; }
body.preset-eflowz .hero .hero-bot           { transition-delay: .5s; }

/* Триггер — body.loaded, а не .hero.loaded: прелоадер темы ставит класс
   на героя только при innerWidth > 1024 (preloader.php, markLoaded), а на
   body — всегда. С .hero.loaded на мобильных заголовок оставался размытым.
   Плюс страховка: через 4 с всё проявляется само, даже если прелоадер не
   отработал (ошибка JS, не пришёл load). */
body.preset-eflowz.loaded .hero .hero-left__title,
body.preset-eflowz.loaded .hero .hero-left__content,
body.preset-eflowz.loaded .hero .hero-bot,
body.preset-eflowz.loaded .hero .hero-left__slogan,
body.preset-eflowz .hero.loaded .hero-left__title,
body.preset-eflowz .hero.loaded .hero-left__content,
body.preset-eflowz .hero.loaded .hero-bot,
body.preset-eflowz .hero.loaded .hero-left__slogan {
  opacity: 1;
  filter: none;
  transform: none;
}

body.preset-eflowz .hero .hero-left__title,
body.preset-eflowz .hero .hero-left__content,
body.preset-eflowz .hero .hero-bot,
body.preset-eflowz .hero .hero-left__slogan {
  animation: ef-reveal-fallback 0s linear 4s forwards;
}

@keyframes ef-reveal-fallback {
  to { opacity: 1; filter: none; transform: none; }
}

@media (min-width: 1024px) {
  body.preset-eflowz.loaded .hero .hero-wrap .hero-right {
    animation: ef-unveil 1.2s cubic-bezier(.22, 1, .36, 1) .2s both;
  }

  body.preset-eflowz.loaded .hero .hero-wrap .hero-right__img img {
    animation: ef-settle 1.8s cubic-bezier(.22, 1, .36, 1) .2s both;
  }
}

@keyframes ef-unveil {
  from { clip-path: inset(14% 10% 14% 10% round 1.48rem); opacity: .3; }
  to   { clip-path: inset(0 0 0 0 round 1.48rem); opacity: 1; }
}

@keyframes ef-settle {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}

/* Кнопки: стрелка-«поток» появляется справа на ховере основных CTA */
body.preset-eflowz .cardblock__link > span,
body.preset-eflowz .header-menu__account-link > span {
  display: inline-flex;
  align-items: center;
}

body.preset-eflowz .cardblock__link > span::after {
  content: "";
  width: 0;
  height: 0.85em;
  margin-left: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: width .25s, margin-left .25s;
}

body.preset-eflowz .cardblock__link:hover > span::after {
  width: 0.85em;
  margin-left: 0.5em;
}

@media (prefers-reduced-motion: reduce) {
  body.preset-eflowz [data-aos][data-aos],
  body.preset-eflowz .hero .hero-left__title,
  body.preset-eflowz .hero .hero-left__content,
  body.preset-eflowz .hero .hero-bot,
  body.preset-eflowz .hero .hero-left__slogan {
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  body.preset-eflowz .ef-mark i,
  body.preset-eflowz .ef-hero-chip,
  body.preset-eflowz .ef-hero-chip__dot::after,
  body.preset-eflowz .hero .hero-left__slogan::before,
  body.preset-eflowz.loaded .hero .hero-wrap .hero-right,
  body.preset-eflowz.loaded .hero .hero-wrap .hero-right__img img,
  body.preset-eflowz .hero .hero-left__title,
  body.preset-eflowz .hero .hero-left__content,
  body.preset-eflowz .hero .hero-bot,
  body.preset-eflowz .hero .hero-left__slogan {
    animation: none !important;
  }
  body.preset-eflowz .ef-hero-chip { opacity: 1; transform: none; }
}

/* Join Our Team, мобильные: блоки Benefits / Responsibilities — заголовок и
   список стояли в одну строку (flex row), список уезжал за экран на ~90px.
   Ставим столбиком. Замер в iframe 360/390 (28.10). */
@media (max-width: 767.98px) {
  body.preset-eflowz .listdecor-top,
  body.preset-eflowz .listdecor-mid,
  body.preset-eflowz .listdecor-bot {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  body.preset-eflowz .listdecor-top > *,
  body.preset-eflowz .listdecor-mid > *,
  body.preset-eflowz .listdecor-bot > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
  }
}

/* Вакансия, мобильные (≤1024): блок «Why this position may be exactly what
   you're looking for» — у темы белый текст, а белая подложка карточки есть
   только на десктопе. На бледно-зелёном герое текст пропадал. */
@media (max-width: 1024px) {
  body.preset-eflowz .main--hrgeneralist-page .hero-item__content_full {
    background: #FFFFFF;
    border: 1.5px solid var(--ef-line);
    border-radius: var(--ef-radius-card);
    padding: 1.6rem 1.4rem;
    color: #374151;
  }

  body.preset-eflowz .main--hrgeneralist-page .hero-item__content_full,
  body.preset-eflowz .main--hrgeneralist-page .hero-item__content_full * {
    color: #374151;
  }

  body.preset-eflowz .main--hrgeneralist-page .hero-item__content_full h1,
  body.preset-eflowz .main--hrgeneralist-page .hero-item__content_full h2,
  body.preset-eflowz .main--hrgeneralist-page .hero-item__content_full h3,
  body.preset-eflowz .main--hrgeneralist-page .hero-item__content_full [class*="title"] {
    color: var(--ef-ink);
  }

  /* Слоган-eyebrow на мобильных центрирован и в 2–3 строки: точка
     по flex-baseline уезжала влево отдельно. Делаем её частью строки. */
  body.preset-eflowz .hero .hero-left__slogan {
    display: block;
    text-align: center;
  }

  body.preset-eflowz .hero .hero-left__slogan::before {
    display: inline-block;
    vertical-align: 0.1em;
    margin-right: 0.5rem;
    transform: none;
  }
}

/* Eflowz (04.11): попап после отправки формы без видео — аккуратная карточка */
body.preset-eflowz #preScreenThankYouPopup .popup--video {
  width: min(440px, calc(100vw - 32px));
  padding: 32px 28px 28px;
  text-align: center;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(15, 31, 20, 0.18);
}
body.preset-eflowz #preScreenThankYouPopup .popup-success-msg {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.55;
  color: #0F1F14;
}
body.preset-eflowz #preScreenThankYouPopup .popup-success-msg strong {
  display: inline-block;
  font-size: 22px;
  margin-bottom: 6px;
  color: #2D6235;
}
body.preset-eflowz #preScreenThankYouPopup .popup-video-mount:empty { display: none; }