/* Страница «Итерис-Сети» */

.seti-intro {
  font-size: 25px;
  line-height: 1.4;
  max-width: 978px;
  margin-bottom: 25px;
}

/* крошки здесь были серые #9B9FA5 — как на Тильде, но вдвое ниже нормы контраста (2.66)
   и вразрез с остальными страницами. Переопределение снято: цвет берётся из общего
   правила, одинакового для всего сайта */

@media (min-width: 640px) {
  .page-seti .breadcrumbs > *:nth-child(2)::before {
    margin-left: 13.5px;
  }
  .page-seti .page-head-row {
    align-items: flex-start;
  }
  .page-seti .page-head-row .btn {
    margin-top: 2px;
  }
}

/* блок крошек истории у Tilda выше и с большим зазором до заголовка,
   сам заголовок сдвинут на 5px влево — их особенности, скопированы как есть */
@media (min-width: 640px) {
  .page-light.page-history section.page-head {
    padding-top: calc(var(--header-h) + 13px);
    padding-bottom: 5px;
  }
  .page-history .breadcrumbs {
    margin-bottom: 33px;
  }
  .page-history .breadcrumbs > *:nth-child(2)::before {
    margin-left: 13.5px;
  }
  .page-history .page-head h1 {
    margin-left: -5px;
  }
}

.seti-anchors {
  margin-top: 25px;
}

.seti-anchors {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* у Tilda иконка сверху, подпись на фиксированной высоте от верха плитки */
.seti-anchor {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--color-accent);
  color: var(--color-on-dark);
  border-radius: 13px;
  padding: 25px;
  font-size: 18px;
  line-height: 25px;
}

/* ховер затемняет тот же цвет, а не подменяет его: #3578a0 (ховер кнопок) на большой
   плитке уводит тон в зелень и рядом с соседями читается грязным */
.seti-anchor {
  transition: filter 0.2s ease-in-out;

  &:hover {
    filter: brightness(0.92);
  }

  & img {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    margin-bottom: 77px;
  }
}

@media (min-width: 640px) {
  .seti-anchor {
    height: 250px;
  }
  /* ширины текстовых боксов Tilda — от них зависят переносы */
  .seti-anchor:nth-child(1) {
    padding-right: 43px;
  }
  .seti-anchor:nth-child(2) {
    padding-right: 59px;
  }
  .seti-anchor:nth-child(3) {
    padding-right: 63px;
  }
}

.seti-h2 {
  font-size: 35px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-heading);
  margin: 0 0 15px;
}

.seti-shot {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--color-muted);
  margin-bottom: 28px;
}

#seti-tools p, #seti-template p, #seti-catalog p {
  font-size: 20px;
  line-height: 1.4;
  margin-bottom: 18px;
  max-width: 1100px;
}

.seti-list {
  margin: 21px 0 18px 0;
  padding-left: 0;
  list-style: none;
}

/* неровные тильдовские зазоры перед отдельными списками */
#seti-tools .container > ul.seti-list:nth-of-type(1) {
  margin-top: 27px;
}

/* в каталоге у Tilda свои интервалы */
#seti-catalog p {
  margin-bottom: 25px;
}

#seti-catalog .seti-list {
  margin-bottom: 25px;
}

#seti-catalog ul.seti-list:nth-of-type(1) {
  margin-top: -15px;
  margin-bottom: 20px;
}

#seti-catalog .seti-shot {
  margin-bottom: 32px;
}

.page-seti #seti-template {
  padding-bottom: 7px;
}

.page-seti #seti-catalog {
  padding-bottom: 7px;
}

/* ширины абзацев — по текстовым боксам зероблока Tilda */
#seti-tools p:nth-of-type(1) {
  max-width: 1069px;
}
#seti-tools p:nth-of-type(2) {
  max-width: 1114px;
}
#seti-tools p:nth-of-type(3) {
  max-width: 895px;
}
#seti-tools p:nth-of-type(4) {
  max-width: 788px;
}
#seti-tools p:nth-of-type(5) {
  max-width: 895px;
}
#seti-tools p:nth-of-type(6) {
  max-width: 949px;
}
#seti-tools p:nth-of-type(7) {
  max-width: 983px;
}
#seti-template p:nth-of-type(1) {
  max-width: 1007px;
}
#seti-catalog p:nth-of-type(1) {
  max-width: 1076px;
}
#seti-catalog p:nth-of-type(2) {
  max-width: 929px;
}
#seti-catalog p:nth-of-type(3) {
  max-width: 845px;
}
#seti-catalog p:nth-of-type(4) {
  max-width: 1002px;
}
#seti-catalog p:nth-of-type(5) {
  max-width: 1002px;
}
#seti-catalog p:nth-of-type(6) {
  max-width: 1002px;
}

.seti-list > li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 500;
  line-height: 25px;

  /* маркер — голубая точка, вынесенная на 7px левее края контейнера, как у Tilda */
  &::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-accent);
  }
}

.seti-list ul {
  list-style: none;
  margin-top: 15px;
  padding-left: 0;

  & li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 25px;
  }

  & li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
  }
}

/* заполнение по строкам (лево-право), колонки как в зероблоке Tilda */
/* у Tilda две независимые по вертикали колонки, текст второй выступает за контейнер */
.seti-cols {
  display: flex;
  margin: 27px 0 10px;

  & .seti-list {
    margin: 0;
  }

  & .seti-list:nth-child(1) {
    width: 600px;
    flex-shrink: 0;
  }

  & .seti-list:nth-child(2) {
    width: 580px;
    flex-shrink: 0;
  }

  & li {
    padding-right: 20px;
  }

  & .li-narrow {
    max-width: 521px;
  }
}

.seti-list ul li {
  max-width: 790px;
}

/* пункты в разметке идут по колонкам — так Tilda раскладывает их на мобиле */
.seti-list.three-col {
  display: grid;
  grid-template-columns: repeat(3, 373px);
  grid-template-rows: repeat(2, min-content);
  grid-auto-flow: column;
  gap: 0 15px;
}

/* десктопные фикс-ширины колонок держатся только на широком экране, иначе распирают
   страницу: 600 + 580 колонок плюс поля контейнера требуют 1228, до этого — резиновые */
@media (max-width: 1229px) {
  .seti-cols .seti-list:nth-child(1),
  .seti-cols .seti-list:nth-child(2) {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }
  .seti-cols .li-narrow {
    max-width: none;
  }
  .seti-list.three-col {
    grid-template-columns: repeat(3, minmax(0, 373px));
  }
  .webinar-card {
    flex: 0 1 374px;
    min-width: 0;
  }
}

@media (max-width: 959px) {
  .seti-list.three-col {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
  .seti-cols {
    flex-direction: column;
  }
  .seti-cols .seti-list:nth-child(1), .seti-cols .seti-list:nth-child(2) {
    width: auto;
  }
}

/* полоса с формой — у Tilda это скруглённая карточка внутри белой секции */
.seti-form-band {
  padding: 0 !important;
  margin: 9px 0;
}

.band-card {
  background: var(--color-dark-panel);
  color: var(--color-on-dark);
  border-radius: 15px;
  padding: 25px;

  & h2 {
    color: var(--color-on-dark);
    font-size: 30px;
    font-weight: 600;
    line-height: 36px;
    text-transform: uppercase;
    margin-bottom: 10px;
  }
}

.band-sub {
  font-size: 18px;
  line-height: 22px;
  color: var(--color-on-dark);
  margin-bottom: 20px;
}

.band-form {
  --form-gap: 15px;
  display: flex;
  gap: var(--form-gap);
  flex-wrap: wrap;

  & .btn {
    width: 276px;
    height: 65px;
    font-size: 19px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0;
    border-radius: 13px;
  }

  & .field {
    flex: 0 0 397px;
  }

  & input:not([type="checkbox"]) {
    width: 100%;
    height: 65px;
    font: inherit;
    font-size: 19px;
    padding: 0 20px;
    border: none;
    border-radius: 13px;
    background: var(--color-field-bg);
  }
}

@media (max-width: 959px) {
  .band-form .field {
    flex: 1 1 260px;
  }
}

/* вебинары: заголовок слева, стрелки-шевроны справа над карточками */
.webinar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  & .section-title {
    margin-bottom: 0;
  }
}

.webinar-navs {
  display: flex;
  gap: 39px;
  margin: 4px 25px 0 0;
}

.webinar-track {
  display: flex;
  margin-top: 15px;
  gap: 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

.webinar-card {
  flex: 0 0 374px;

  & img {
    width: 100%;
    border-radius: 13px;
    display: block;
  }
}

/* зона нажатия шире картинки-стрелки: сама стрелка 18px, пальцем в неё не попасть */
.webinar-nav {
  background: none;
  border: none;
  padding: 8px 12px;
  margin: -8px -12px;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;

  & img {
    width: 18px;
    height: 36px;
    display: block;
  }

  &:hover {
    opacity: 0.6;
  }
}

/* FAQ: голубые линии-разделители Tilda шире контейнера, зазоры между вопросами разные */
.faq-item {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -12px;
    right: 2px;
    height: 1px;
    background: var(--color-accent);
  }

  &:last-of-type::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -12px;
    right: 2px;
    height: 1px;
    background: var(--color-accent);
  }
}

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: none;
  border: none;
  font: inherit;
  font-size: 22px;
  font-weight: 500;
  line-height: 34px;
  text-align: left;
  color: var(--color-accent);
  cursor: pointer;

  & .vacancy-arrow svg {
    display: block;
    width: 18px;
    height: 18px;
    stroke: var(--color-accent);
    stroke-width: 2;
    fill: none;
    transition: transform 0.2s;
  }
}

/* открытый пункт: стрелка разворачивается на 180° и смотрит вниз-влево, как у Tilda */
.faq-item.open .vacancy-arrow svg {
  transform: rotate(180deg);
}

/* отклик на наведение — как у вакансий: стрелка показывает, что будет по клику.
   Только для мыши: на тач-экране состояние залипает после нажатия */
@media (hover: hover) {
  .faq-q:hover .vacancy-arrow svg {
    transform: rotate(180deg);
  }
  .faq-item.open .faq-q:hover .vacancy-arrow svg {
    transform: rotate(180deg);
  }
}

/* ширины текстовых боксов двухстрочных вопросов Tilda — от них переносы */
@media (min-width: 640px) {
  .faq-item:nth-of-type(4) .faq-q span:first-child {
    max-width: 995px;
  }
  .faq-item:nth-of-type(5) .faq-q span:first-child {
    max-width: 857px;
  }
  .faq-item:nth-of-type(9) .faq-q span:first-child {
    max-width: 990px;
  }
  .faq-item:nth-of-type(10) .faq-q span:first-child {
    max-width: 1026px;
  }
}

/* индивидуальные вертикальные поля каждого вопроса — как в зероблоке Tilda */
.faq-item:nth-of-type(1) .faq-q {
  padding: 28px 0 30px;
}
.faq-item:nth-of-type(2) .faq-q {
  padding: 28px 0 30px;
}
.faq-item:nth-of-type(3) .faq-q {
  padding: 28px 0 30px;
}
.faq-item:nth-of-type(4) .faq-q {
  padding: 18px 0 18px;
}
.faq-item:nth-of-type(5) .faq-q {
  padding: 14px 0 22px;
}
.faq-item:nth-of-type(6) .faq-q {
  padding: 18px 0 18px;
}
.faq-item:nth-of-type(7) .faq-q {
  padding: 18px 0 18px;
}
.faq-item:nth-of-type(8) .faq-q {
  padding: 18px 0 18px;
}
.faq-item:nth-of-type(9) .faq-q {
  padding: 22px 0 14px;
}
.faq-item:nth-of-type(10) .faq-q {
  padding: 18px 0 18px;
}
.faq-item:nth-of-type(11) .faq-q {
  padding: 18px 0 18px;
}

.faq-a {
  display: none;
  padding: 0 0 28px;
}

.faq-item.open .faq-a {
  display: block;
}

.faq-a p {
  font-size: 16px;
  line-height: 1.55;
  margin-bottom: 14px;
  max-width: 1000px;
}

.faq-a img {
  max-width: 100%;
  border: 1px solid var(--color-muted);
  border-radius: 8px;
  margin: 8px 0 16px;
  display: block;
}

.faq-a a {
  text-decoration: underline;
}

/* плитка истории изменений */
.history-tile {
  width: 300px;
  height: 200px;
  min-height: 0;
  position: relative;
  border-radius: 13px;
  padding: 15px;

  & .tile-icon {
    width: 38px;
    height: 50px;
    margin: 0 0 50px;
  }

  & h3 {
    font-size: 29px;
    line-height: 35px;
    margin: 0;
    max-width: 181px;
  }

  & .more-link {
    position: absolute;
    top: 124px;
    right: 5px;
  }

  & .more-link img {
    width: 50px;
    height: 50px;
  }
}

/* модалки */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  overflow-y: auto;
  padding: 24px 16px;

  &[hidden] {
    display: none;
  }
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 14, 56, 0.7);
}

/* margin: auto вместо align-items: center — так окно выше экрана не режется сверху */
.modal-box {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: auto;
  background: var(--color-bg);
  border-radius: 16px;
  padding: 40px;

  & h2 {
    font-size: 26px;
    color: var(--color-heading);
    margin-bottom: 8px;
  }

  & > p {
    margin-bottom: 20px;
  }

  & form {
    --form-gap: 12px;
    display: grid;
    gap: var(--form-gap);
  }

  & input:not([type="checkbox"]) {
    width: 100%;
    font: inherit;
    padding: 13px 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
  }

}

.modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 30px;
  line-height: 1;
  color: var(--color-text);
  cursor: pointer;
}

/* планшет: страница идёт в масштабе 1.2 — окно и его содержимое тоже */
@media (min-width: 640px) and (max-width: 959px) {
  .modal-box {
    max-width: 552px;
    padding: 48px;
    border-radius: 19px;
  }
  .modal-box h2 {
    font-size: 31px;
    margin-bottom: 10px;
  }
  .modal-box > p {
    font-size: 19px;
    margin-bottom: 24px;
  }
  .modal-box form {
    --form-gap: 14.5px;
  }
  .modal-box input:not([type="checkbox"]) {
    padding: 15.5px 19px;
    border-radius: 10px;
    font-size: 19px;
  }
  .modal-box .btn {
    padding: 17px 43px;
    border-radius: 34px;
    font-size: 19px;
  }
  .modal-close {
    top: 14px;
    right: 19px;
    font-size: 36px;
  }
}

.modal-box--video {
  max-width: 1000px;
  padding: 16px;
  background: var(--color-dark);
}

.video-holder {
  aspect-ratio: 16 / 9;

  & iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 8px;
  }
}

/* история изменений */
/* цвет заголовков версий — как на исходной странице Tilda */
.history-list h2 {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-accent-soft);
  margin: 40px 0 14px;
}

/* контент истории у Tilda шире контейнера остальных страниц: 380..1540 */
.page-history .history-list .container {
  padding: 0 15px;
}

.history-list p {
  font-size: 20px;
  line-height: 31px;
  margin-bottom: 0;
  max-width: none;
}

.history-list ul {
  padding-left: 20px;
  margin: 10px 0;
}

.history-list li {
  font-size: 20px;
  line-height: 31px;
  margin-bottom: 0;

  /* блоки «ВАЖНО» и вложенные пункты у Tilda в более узких боксах — от них переносы */
  &:has(> strong) {
    max-width: 1120px;
  }
}

.history-list ul ul li {
  max-width: 1115px;
}

.history-list li strong {
  font-weight: 600;
  color: var(--color-heading);
}

.history-list a {
  color: var(--color-accent-soft);
}

.hist-sub {
  font-size: 22px !important;
  font-weight: 500;
  line-height: 29px !important;
}

.history-list img {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--color-muted);
  border-radius: 8px;
  margin: 10px 0;
}

/* точечная типографика по замерам Tilda */
.page-head-row .btn {
  font-size: 20px;
  padding: 14px 29px;
  border-radius: 10px;
}

.wt600 {
  font-weight: 600;
}

.faq-title {
  font-size: 50px;
  font-weight: 600;
  line-height: 1.56;
  color: var(--color-text-black);
  margin: 0 0 15px -5px;
}

.history-tile h3 {
  text-transform: none;
}

.page-head h1.no-caps {
  text-transform: none;
  font-size: 52px;
}

/* вертикальные интервалы по замерам */
.page-light section.pt0 {
  padding-top: 0;
}

.page-light section.ph-lg {
  padding-top: calc(var(--header-h) + 33px);
}

#seti-tools {
  padding-top: 16px;
}

#seti-template {
  padding-top: 32px;
}

#seti-catalog {
  padding-top: 2px;

  & .seti-h2 {
    font-weight: 700;
    line-height: 43px;
  }

  & .seti-h2 + .seti-shot + p {
    margin-left: -5px;
    line-height: 31px;
  }
}

.seti-shot {
  margin-bottom: 18px;
}

.history-list h2 {
  margin: 20px 0 15px;
}

.page-light section.webinars-sec {
  padding-top: 3px;
}

.webinars-sec + .seti-form-band {
  margin-top: 48px;
}

.page-light section.faq-sec {
  padding-top: 47px;
  padding-bottom: 2px;
}

.page-light section.pt0:has(.history-tile) {
  padding-top: 45px;
}

.page-seti section.cta {
  padding-top: 33px;
}

/* мобильная типографика страницы Итерис-Сети:
   моб-артборд Tilda 320px растягивается до 390 (×1.22) — размеры уже пересчитаны */
@media (max-width: 639px) {
  .page-seti main .container {
    padding: 0 12px;
  }
  .page-seti section.page-head {
    padding-top: calc(var(--header-h) + 25px);
  }
  .page-seti .breadcrumbs {
    font-size: 12px;
    margin-bottom: 15px;
  }
  .page-seti .page-head h1 {
    font-size: 29px;
  }
  .page-seti .page-head-row {
    gap: 13px;
  }
  .page-seti .page-head-row .btn {
    font-size: 17px;
    width: 277px;
    height: 49px;
    padding: 0;
    margin-top: 0;
  }
  .page-head h1 {
    font-size: 24px;
  }
  .seti-intro {
    font-size: 17px;
    line-height: 24.5px;
    margin-bottom: 19px;
  }
  /* карточки-якоря масштабируются вместе с шириной экрана, как тильдовский моб-артборд:
     иначе на узких телефонах текст переносится иначе и карточки распухают */
  .seti-anchors {
    margin-top: 0;
    gap: calc(19 * var(--k));
    --k: min(1px, calc(100vw / 390));
  }
  .seti-anchor {
    font-size: calc(19.5 * var(--k));
    line-height: calc(27 * var(--k));
    padding: calc(18 * var(--k));
    min-height: calc(219 * var(--k));
    /* иконка вверху, текст прижат к низу — у Тильды зазор между ними разный
       в зависимости от числа строк, а низ текста всегда на одной высоте */
    justify-content: space-between;
  }
  .seti-anchor img {
    width: calc(59 * var(--k));
    height: calc(59 * var(--k));
    margin-bottom: 0;
  }
  .seti-h2 {
    font-size: 28px;
    line-height: 34px;
    margin-bottom: 12px;
  }
  #seti-catalog .seti-h2 {
    line-height: 34px;
  }
  /* колонка текста у Тильды на 2px шире контейнера — без них слова уезжают на строку ниже */
  #seti-tools p, #seti-template p, #seti-catalog p {
    font-size: 17px;
    line-height: 24.5px;
    margin-bottom: 9px;
    max-width: none;
    width: calc(100% + 2px);
  }
  /* у этих двух блоков Тильда задаёт свои интерлиньяж и ширину */
  #seti-catalog .seti-h2 + .seti-shot + p {
    line-height: 27px;
  }
  /* шире контейнера, но не шире экрана — иначе появляется горизонтальный скролл */
  #seti-catalog .container > p:last-of-type {
    width: min(378px, calc(100vw - 12px));
    max-width: none;
  }
  #seti-catalog .container > ul.seti-list:nth-of-type(2) > li:nth-child(13) {
    width: min(371px, calc(100vw - 12px));
    max-width: none;
  }
  #seti-tools {
    padding-top: 13px;
  }
  #seti-template {
    padding-top: 41px;
  }
  #seti-catalog {
    padding-top: 9px;
  }
  #seti-catalog p {
    margin-bottom: 19px;
  }
  #seti-tools p:nth-of-type(5) {
    max-width: 343px;
  }
  .seti-shot {
    margin: 12px 0;
  }
  /* зазоры списков сведены с Тильдой поблочно: перед списком 19, после 19,
     между пунктами 9.75 (у неё 8 артбордных × 1.22 — отсюда чередование 9/10) */
  .seti-list {
    margin: 19px 0;
  }
  #seti-tools .container > ul.seti-list:nth-of-type(1) {
    margin-top: 17px;
  }
  #seti-catalog .seti-list {
    margin-bottom: 19px;
  }
  #seti-catalog ul.seti-list:nth-of-type(1) {
    margin-top: -6px;
    margin-bottom: 18px;
  }
  #seti-catalog .seti-shot {
    margin-bottom: 30px;
  }
  .seti-list > li {
    font-size: 14.5px;
    line-height: 20.5px;
    padding: 0 0 0 20px;
    margin-bottom: 9.75px;
  }
  /* в grid-списке отступ пункта не схлопывается с отступом списка, поэтому он меньше */
  #seti-template .seti-list.three-col {
    margin-bottom: 9px;
  }
  .seti-list > li::before {
    width: 8px;
    height: 8px;
    top: 6px;
    left: 0;
  }
  .seti-list ul {
    margin-top: 10px;
  }
  .seti-list ul li {
    font-size: 13.5px;
    line-height: 21px;
    padding-left: 19px;
    margin-bottom: 10px;
    max-width: none;
  }

  /* у Тильды каждый пункт списка — отдельный блок со своей шириной, поэтому
     переносы строк заданы вручную; ширины сняты замером с моб-версии @390 */
  #seti-tools .seti-cols > ul:nth-child(1) > li:nth-child(3) {
    max-width: 297px;
  }
  #seti-tools .seti-cols > ul:nth-child(1) > li:nth-child(1) {
    max-width: 317px;
  }
  #seti-tools .seti-cols > ul:nth-child(1) > li:nth-child(2) {
    max-width: 337px;
  }
  #seti-tools .seti-cols > ul:nth-child(2) > li:nth-child(1) {
    max-width: 282px;
  }
  #seti-tools .seti-cols > ul:nth-child(2) > li:nth-child(2) {
    max-width: 359px;
  }
  #seti-tools .container > ul.seti-list:nth-of-type(1) > li:nth-child(3) {
    max-width: 256px;
  }
  #seti-tools .container > ul.seti-list:nth-of-type(1) > li:nth-child(1) {
    max-width: 297px;
  }
  #seti-tools .container > ul.seti-list:nth-of-type(1) > li:nth-child(4) {
    max-width: 337px;
  }
  #seti-tools .container > ul.seti-list:nth-of-type(1) > li:nth-child(2) {
    max-width: 361px;
  }
  #seti-tools .container > ul.seti-list:nth-of-type(2) > li:nth-child(1) {
    max-width: 328px;
  }
  #seti-tools .container > ul.seti-list:nth-of-type(2) > li:nth-child(2) {
    max-width: 361px;
  }
  #seti-template .seti-list > li:nth-child(3), #seti-template .seti-list > li:nth-child(5) {
    max-width: 256px;
  }
  #seti-template .seti-list > li:nth-child(1) {
    max-width: 297px;
  }
  #seti-template .seti-list > li:nth-child(4), #seti-template .seti-list > li:nth-child(6) {
    max-width: 337px;
  }
  #seti-template .seti-list > li:nth-child(2) {
    max-width: 361px;
  }
  #seti-catalog .container > ul.seti-list:nth-of-type(1) > li:nth-child(5) {
    max-width: 266px;
  }
  #seti-catalog .container > ul.seti-list:nth-of-type(1) > li:nth-child(1) {
    max-width: 297px;
  }
  #seti-catalog .container > ul.seti-list:nth-of-type(1) > li:nth-child(3) {
    max-width: 305px;
  }
  #seti-catalog .container > ul.seti-list:nth-of-type(1) > li:nth-child(6) {
    max-width: 337px;
  }
  #seti-catalog .container > ul.seti-list:nth-of-type(1) > li:nth-child(2) {
    max-width: 361px;
  }
  #seti-catalog .container > ul.seti-list:nth-of-type(1) > li:nth-child(4) {
    max-width: 366px;
  }
  #seti-catalog .container > ul.seti-list:nth-of-type(2) > li:nth-child(11) {
    max-width: 292px;
  }
  #seti-catalog .container > ul.seti-list:nth-of-type(2) > li:nth-child(5) {
    max-width: 322px;
  }
  #seti-catalog .container > ul.seti-list:nth-of-type(2) > li:nth-child(4) {
    max-width: 327px;
  }
  #seti-catalog .container > ul.seti-list:nth-of-type(2) > li:nth-child(2), #seti-catalog .container > ul.seti-list:nth-of-type(2) > li:nth-child(8) {
    max-width: 336px;
  }
  #seti-catalog .container > ul.seti-list:nth-of-type(2) > li:nth-child(6), #seti-catalog .container > ul.seti-list:nth-of-type(2) > li:nth-child(12) {
    max-width: 337px;
  }
  #seti-catalog .container > ul.seti-list:nth-of-type(2) > li:nth-child(3), #seti-catalog .container > ul.seti-list:nth-of-type(2) > li:nth-child(9) {
    max-width: 355px;
  }
  #seti-catalog .container > ul.seti-list:nth-of-type(2) > li:nth-child(1), #seti-catalog .container > ul.seti-list:nth-of-type(2) > li:nth-child(7) {
    max-width: 361px;
  }
  #seti-catalog .container > ul.seti-list:nth-of-type(2) > li:nth-child(10) {
    max-width: 364px;
  }
  #seti-catalog .container > ul.seti-list:nth-of-type(2) > li:nth-child(13) {
    max-width: 383px;
  }
  #seti-catalog .container > ul.seti-list:nth-of-type(3) > li:nth-child(5) {
    max-width: 322px;
  }
  #seti-catalog .container > ul.seti-list:nth-of-type(3) > li:nth-child(4) {
    max-width: 327px;
  }
  #seti-catalog .container > ul.seti-list:nth-of-type(3) > li:nth-child(8) {
    max-width: 336px;
  }
  #seti-catalog .container > ul.seti-list:nth-of-type(3) > li:nth-child(6) {
    max-width: 337px;
  }
  #seti-catalog .container > ul.seti-list:nth-of-type(3) > li:nth-child(3), #seti-catalog .container > ul.seti-list:nth-of-type(3) > li:nth-child(9) {
    max-width: 355px;
  }
  #seti-catalog .container > ul.seti-list:nth-of-type(3) > li:nth-child(1), #seti-catalog .container > ul.seti-list:nth-of-type(3) > li:nth-child(7) {
    max-width: 361px;
  }
  #seti-catalog .container > ul.seti-list:nth-of-type(3) > li:nth-child(2) {
    max-width: 378px;
  }
  .seti-cols {
    margin: 19px 0 9px;
  }
  .seti-cols li {
    padding-right: 0;
  }
  .seti-cols .li-narrow {
    max-width: none;
  }
  /* карточка с формой масштабируется вместе с шириной экрана, как тильдовский
     моб-артборд: иначе на узких телефонах заголовок ломается в три строки */
  .band-card {
    --k: min(1px, calc(100vw / 390));
    padding: calc(25 * var(--k));
  }
  .band-card h2 {
    font-size: calc(29 * var(--k));
    line-height: calc(35.5 * var(--k));
    margin-bottom: calc(10 * var(--k));
  }
  .band-sub {
    font-size: calc(17 * var(--k));
    line-height: calc(20.5 * var(--k));
    margin-bottom: calc(30 * var(--k));
  }
  .band-form {
    --form-gap: calc(19 * var(--k));
    flex-direction: column;
  }
  .band-form .field {
    flex: none;
    width: 100%;
  }
  .band-form input:not([type="checkbox"]), .band-form .btn {
    flex: none;
    width: 100%;
    height: calc(59 * var(--k));
    font-size: calc(17 * var(--k));
    border-radius: calc(8 * var(--k));
  }
  .seti-form-band {
    margin: -6px 0 0;
  }
  section.webinars-sec + section.seti-form-band {
    margin-top: 34px;
  }
  .page-light section.webinars-sec {
    padding-bottom: 0;
  }
  .page-light section.faq-sec {
    padding-top: 45px;
  }
  .page-light section.pt0:has(.history-tile) {
    padding-top: 42px;
  }
  .page-light section.webinars-sec {
    padding-top: 0;
    margin-top: -1px;
  }
  .webinar-head {
    align-items: flex-start;
  }
  .webinar-head .section-title {
    font-size: 27px;
    line-height: 31.5px;
  }
  /* заголовок в две строки съедал ширину стрелок — они сжимались вдвое */
  .webinar-navs {
    gap: 30px;
    margin: 11px 0 0;
    flex-shrink: 0;
  }
  .webinar-nav img {
    width: 20px;
    height: 39px;
  }
  .webinar-track {
    flex-direction: column;
    overflow: visible;
    margin-top: 7px;
    gap: 18px;
  }
  .webinar-card {
    flex: 0 0 auto;
    width: 100%;
  }
  .webinar-card:nth-child(n+4) {
    display: none;
  }
  .faq-title {
    font-size: 24px;
    margin: 0 0 14px 33px;
  }
  .faq-q {
    font-size: 17px;
    line-height: 25.5px;
  }
  .faq-item::before, .faq-item:last-of-type::after {
    left: 0;
    right: 0;
  }
  /* стрелка крупнее и со скруглёнными концами — на мелком размере острые углы выглядят рвано */
  .faq-q .vacancy-arrow svg {
    width: 19px;
    height: 19px;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  /* по просьбе Лады шире тильдовских: у неё часть вопросов зажата и ложится в лишнюю строку */
  .faq-q span:first-child {
    display: block;
    max-width: 300px;
  }
  /* по просьбе Лады одинаковые отступы у всех вопросов: у Тильды первые три
     заметно просторнее остальных, и разнобой читается как небрежность */
  .page-seti .faq-item .faq-q {
    padding: 8px 0;
  }
  /* ответ у Тильды с отступами по бокам и кеглем как у вопроса, список — глубже */
  /* у Тильды между вопросом и ответом 15px; снизу было вдвое больше, чем сверху */
  .faq-a {
    margin: 0 20px;
    padding: 9px 0 12px;
  }
  .faq-a p, .faq-a li {
    font-size: 17px;
    line-height: 26.8px;
  }
  .faq-a ul {
    padding-left: 20px;
  }
  .modal-box {
    padding: 28px 20px;
  }
  /* плитка истории: у Tilda на мобиле тёмная подложка-тень со сдвигом */
  /* тёмная подложка нужна только для ховера на десктопе: на тач-экране ховера нет,
     а слой торчит из-под плитки. У Тильды так же, но это её недосмотр */
  .history-tile {
    width: 100%;
    height: 219px;
    padding: 19px 6px;
    box-shadow: none;
  }
  .history-tile .tile-icon {
    width: 41px;
    height: 56px;
    margin: 0 0 67px;
  }
  .history-tile h3 {
    font-size: 24px;
    line-height: 29.5px;
    max-width: 160px;
  }
  .history-tile .more-link {
    top: 153px;
    right: 18px;
  }
  .history-tile .more-link img {
    width: 37px;
    height: 37px;
  }
  .page-seti section.cta {
    padding-top: 16px;
    padding-bottom: 7px;
  }
  .page-seti .cta-label {
    font-size: 14.5px;
    margin-bottom: 9px;
  }
  .page-seti .cta-email {
    font-size: 29px;
  }
  .page-seti .cta p {
    font-size: 17px;
    line-height: 24.5px;
  }
  .history-list h2 {
    font-size: 20px !important;
    margin: 28px 0 10px;
  }
  .history-list p {
    font-size: 14px;
  }
  .page-head h1.no-caps {
    font-size: 28px;
  }
  /* футер этой страницы у Tilda крупнее и целиком по центру */
  .page-seti .site-footer {
    text-align: center;
  }
  .page-seti .footer-logo {
    width: 197px;
    height: 72px;
    margin: 0 auto 17px;
  }
  .page-seti .footer-grid h3 {
    font-size: 19.5px;
    margin-bottom: 15px;
  }
  .page-seti .footer-grid li {
    font-size: 17px;
    line-height: 21px;
    margin-bottom: 14px;
  }
  .page-seti .footer-bottom {
    justify-content: center;
    font-size: 13.5px;
  }
  .page-seti .social-link {
    display: inline-block;
  }
  .page-seti .social-link img {
    width: 152px;
    height: 34px;
  }
}

/* нижняя часть истории у Tilda тем же серым #333, что и остальной текст */

/* мобильная история изменений по замерам Tilda */
@media (max-width: 639px) {
  .page-head h1.no-caps {
    font-size: 27px;
  }
  .history-list h2 {
    font-size: 22px !important;
    margin: 22px 0 8px;
  }
  .history-list p, .history-list li {
    font-size: 16px;
    line-height: 1.56;
    margin-bottom: 8px;
  }
  .hist-sub {
    font-size: 17px !important;
  }
}

/* мобильная история изменений: узкий контент 300px, старт сразу под хедером */
@media (max-width: 639px) {
  /* у Тильды тут 45px — на 390 это четверть ширины, текст ужат к центру.
     По просьбе Лады как на остальных мобильных страницах */
  .page-history main .container,
  .page-history .history-list .container {
    padding: 0 20px;
  }
  /* футер на истории у Тильды без верхнего отступа */
  .page-history .site-footer {
    padding-top: 0;
  }
  /* 28 прятало крошки под шапку (её высота 60) — ставим как на остальных светлых страницах */
  .page-light.page-history section.page-head {
    padding-top: 71px;
    padding-bottom: 0;
  }
  .page-history .breadcrumbs {
    margin-bottom: 24px;
  }
  .page-history .page-head h1.no-caps {
    font-size: 27px;
  }
  .history-list h2 {
    font-size: 22px !important;
    margin: 20px 0 13px;
  }
  .history-list p, .history-list li {
    font-size: 16px;
    line-height: 25px;
    margin-bottom: 0;
  }
  .history-list h2 + p, .history-list ul {
    margin-top: 8px;
  }
  .hist-sub {
    font-size: 17px !important;
  }
  .history-list img {
    height: auto !important;
  }
}

/* ================= планшет 640–959 (тильдовский артборд 640, замер @768) ================= */
@media (min-width: 640px) and (max-width: 959px) {
  /* шапка: h1 и кнопка в строку, как у Тильды */
  .page-seti .page-head-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  .page-head-row .btn {
    width: 294px;
    height: 59px;
    padding: 0;
    font-size: 19px;
    border-radius: 12px;
  }
  /* якоря: во всю ширину окна, два в ряд + третий по центру */
  /* карточки якорей намеренно шире окна (как у Тильды) — обрезаем их секцией */
  .page-seti .page-head,
  .page-seti section.pt0 {
    overflow-x: clip;
  }
  /* у Тильды две карточки стоят впритык и вылезают за окно, третья висит по центру —
     вместо этого раскладываем их по контейнеру: два в ряд, третья во всю ширину */
  .seti-anchors {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 6px 0 0;
    width: auto;
  }
  .seti-anchor {
    flex: 0 0 calc((100% - 12px) / 2);
    width: auto;
    height: auto;
    min-height: 190px;
    padding: 31px 16px 28px;
    /* кегль тает к 640, иначе подпись «Шаблон чертежа…» рассыпается на пять строк */
    font-size: clamp(15px, 2.2vw, 19px);
    line-height: 1.4;
  }
  /* наверх — две короткие подписи, вниз во всю ширину — самая длинная */
  .seti-anchor:nth-child(3) {
    order: 1;
    margin: 0;
  }
  .seti-anchor:nth-child(2) {
    order: 2;
  }
  .seti-anchor:nth-child(1) {
    order: 3;
    flex: 0 0 100%;
    min-height: 220px;
  }
  /* высоту карточки держал зазор под иконкой в 85px — при этом тексте это лишний воздух;
     подпись прижата к низу, чтобы в соседних карточках она стояла на одной линии */
  .seti-anchor img {
    width: 58px;
    height: 58px;
    margin-bottom: auto;
  }
  /* минимальный воздух между иконкой и подписью: в одноколоночной раскладке
     свободного места нет и auto-отступ схлопывается в ноль */
  .seti-anchor {
    justify-content: flex-start;
    gap: 26px;
  }
  /* типографика разделов */
  .seti-intro {
    font-size: 21.5px;
    line-height: 30px;
    margin-left: -12px;
    margin-right: -12px;
    max-width: none;
  }
  .seti-h2 {
    font-size: 33.5px;
    line-height: 40px;
  }
  #seti-catalog .seti-h2 {
    line-height: 40px;
  }
  #seti-tools p, #seti-template p, #seti-catalog p, .page-seti .pt0 p {
    font-size: 21.5px;
    line-height: 30px;
    margin-left: -12px;
    margin-right: -12px;
    max-width: none;
  }
  .seti-list li, .seti-cols li {
    font-size: 21.5px;
    line-height: 30px;
    padding-left: 18px;
  }
  .seti-list li li {
    font-size: 21.5px;
  }
  .seti-cols {
    display: block;
  }
  .seti-cols ul {
    width: auto;
  }
  .seti-cols li, .seti-list .li-narrow {
    max-width: none;
    padding-right: 0;
  }
  .three-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
  }
  .three-col li:nth-child(1) {
    order: 1;
  }
  .three-col li:nth-child(2) {
    order: 2;
  }
  .three-col li:nth-child(5) {
    order: 3;
  }
  .three-col li:nth-child(3) {
    order: 4;
  }
  .three-col li:nth-child(4) {
    order: 5;
  }
  .three-col li:nth-child(6) {
    order: 6;
  }
  /* полосы-формы и вебинары */
  .seti-form-band .container {
    padding: 0 12px;
  }
  .band-card {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 37px 24px 24px;
  }
  .band-card h2 {
    font-size: 33.5px;
    line-height: 41px;
    max-width: 360px;
    margin: 0;
  }
  .band-sub {
    font-size: 18px;
    line-height: 21.5px;
    width: 232px;
    justify-self: end;
    margin: 8px 0 0;
  }
  .band-card form {
    grid-column: 1 / -1;
    margin-top: 26px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .band-card input:not([type="checkbox"]) {
    width: 100%;
    height: 71px;
    font-size: 21.5px;
  }
  .band-card button, .band-card .btn {
    width: 100%;
    height: 78px;
    font-size: 21.5px;
    font-weight: 500;
    text-transform: uppercase;
  }
  .webinar-track .webinar-card {
    width: 340px;
  }
  /* FAQ: вопросы 19.2 (скейл артборда), заголовок 31 без скейла, паддинги усреднённые */
  .faq-sec h2 {
    font-size: 31px;
    line-height: 48px;
    margin-left: 60px;
  }
  .faq-q {
    font-size: 19.2px;
    line-height: 24px;
  }
  .faq-q span {
    max-width: 640px;
  }
  .faq-sec .faq-item {
    padding: 31px 0 !important;
  }
  /* история-плитка и текст */
  /* история: контент под хедером, узкая колонка с полями 84, крошки крупнее */
  /* крошки должны быть ниже шапки, как на остальных страницах: у Тильды они
     спрятаны под ней, но мы их показываем */
  .page-light.page-history section.page-head {
    padding-top: 138px;
    padding-bottom: 0;
  }
  .page-history .page-head .container,
  .page-history .history-list .container {
    padding: 0 84px;
  }
  .page-history .breadcrumbs {
    margin-left: -60px;
    margin-bottom: 39px;
  }
  .page-history .page-head h1 {
    font-size: 44px;
    line-height: 57px;
    margin-left: 0;
  }
  .page-history .history-list h2 {
    font-size: 26px;
    line-height: 34px;
  }
  /* у Тильды на планшете этот скрин обрезан по высоте */
  .page-history .history-list img[src*="PViewStyleSettings"] {
    height: 285px !important;
    object-fit: cover;
    object-position: top;
  }
  .page-history .history-list img[src*="CreateNetFromObjects"] {
    height: 140px !important;
    object-fit: cover;
    object-position: top;
  }
}

/* узкий планшет: карточки якорей встают в одну колонку — в две подпись
   «Шаблон чертежа…» рассыпается на пять строк, а мельче кегля уже нечитаемо */
@media (min-width: 640px) and (max-width: 699px) {
  .seti-anchor,
  .seti-anchor:nth-child(1) {
    flex: 0 0 100%;
    min-height: 0;
  }
}

/* Место под гифку держит контейнер: файлы тяжёлые и грузятся лениво, а без
   зарезервированной высоты текст под ними подпрыгивал в момент подгрузки.
   height с !important — перебивает мобильное правило height: auto для картинок истории */
.history-list .hist-media {
  display: block;
  max-width: 100%;
  margin: 10px 0;

  & img {
    width: 100%;
    height: 100% !important;
    margin: 0;
  }
}