/* ============================================================
   08 — Quality Details / Perks (87% + бенто)
   База = фрейм 1600 (109:75923), поля страницы 24 (решение Alexa,
   поверх макетных 30). Остальные брейкпоинты — поля из макета.
   Цвета: тёмная карточка #232325, серые заглушки #D9D9D9,
   белая панель #EAEAEA / #F7F7F7, текст #D9D9D9 / #171719 / #EAEAEA.
   ============================================================ */

.qp-section {
  padding: 0 24px;
  font-family: "Inter", sans-serif;
}

.qp-mobile { display: none; }

/* ---------- каркас 1600 ---------- */

.qp-cards {
  position: relative;
  width: 1280px;
  max-width: 100%;
  margin-left: auto;
  padding-top: 176px; /* зазор от верха (плашка 87% стоит в этой зоне) */
}

/* 87% плашка (только 1600) */
.qp-spec87 {
  position: absolute;
  left: 0;
  top: 0;
  width: 305px;
  height: 186px;
  border-radius: 24px;
  background: rgba(164, 164, 164, 0.28);
  overflow: hidden;
}
.qp-spec87-num {
  position: absolute;
  left: 20px;
  top: 12px;
  font-size: 56px;
  line-height: 64px;
  font-weight: 300;             /* правка Alexa: тоньше */
  letter-spacing: -0.56px;
  color: #eaeaea;
  white-space: nowrap;
}
.qp-spec87-txt {
  position: absolute;
  left: 20px;
  right: 20px;
  top: auto;
  bottom: 20px;                 /* по правому нижнему краю плашки */
  margin: 0;
  font-size: 14px;              /* правка Alexa: три строки вместо четырёх */
  line-height: 18px;
  letter-spacing: -0.3px;
  color: #eaeaea;
  text-align: right;
  text-transform: uppercase;
}

/* текстовая плашка (1200 / 1024 / 768 / мобайл) */
.qp-strip {
  position: relative;
  height: 60px;
  border-radius: 16px;
  background: rgba(131, 131, 131, 0.28);
  overflow: hidden;
}
.qp-strip p {
  position: absolute;
  left: 16px;
  bottom: 16px;
  margin: 0;
  width: 512px;
  max-width: calc(100% - 32px);
  font-size: 14px;
  line-height: 14px;
  color: #eaeaea;
  text-transform: uppercase;
}
.qp-strip--desktop {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 556px;
}

/* бенто */
.qp-bento {
  width: 975px;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;   /* правка Alexa: max 8 */
}
.qp-row {
  display: flex;
  justify-content: flex-start;   /* не space-between: иначе зазор больше 8 */
  gap: 8px;                      /* правка Alexa: ровно 8 */
}
.qp-row > * { flex: 1 1 auto; }

/* ---------- общие элементы карточек ---------- */

.qp-card {
  position: relative;
  overflow: hidden;
  background: #232325;
}
.qp-card-title {
  margin: 0;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.24px;
  text-transform: uppercase;
  color: #d9d9d9;
}

.qp-chips {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.qp-chips-row {
  display: flex;
  gap: 4px;
  align-items: flex-start;
}
.qp-chip {
  display: block;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 47px;
  background: #d9d9d9;
  font-size: 12px;
  line-height: 14px;
  text-align: center;
  text-transform: uppercase;
  color: #171719;
  white-space: nowrap;
}
.qp-chips--bl {
  position: absolute;
  left: 8px;
  bottom: 8px;
}

/* card wchips (тёмная с серым квадратом и чипсами) */
.qp-wchips {
  width: 630px;
  height: 284px;
  border-radius: 24px;
}
.qp-wchips-title {
  position: absolute;
  left: 16px;
  top: 16px;
  width: 292px;
}
.qp-wchips-img {
  position: absolute;
  /* Кадр отступает от кромки карточки одинаково с трёх сторон: 4.
     Отсюда концентричность: 24 снаружи = 20 внутри + 4. */
  right: 4px;
  top: 4px;
  bottom: 4px;
  width: auto;
  aspect-ratio: 1;
  border-radius: 20px;
  background: #d9d9d9;
}

/* React / Next development */
.qp-react {
  width: 325px;
  height: 284px;
  border-radius: 24px;
}
.qp-react-title {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 273px;
}
.qp-react-txt {
  position: absolute;
  left: 20px;
  bottom: 20px;
  margin: 0;
  width: 273px;
  font-size: 16px;
  line-height: 20px;
  text-transform: uppercase;
  color: #d9d9d9;
}

/* Responsive (тёмная рамка + серая вкладка с текстом) */
.qp-resp {
  width: 325px;
  height: 284px;
  border-radius: 24px;
}
.qp-resp-inner {
  position: absolute;
  inset: 4px;
  border-radius: 20px;
  background: #d9d9d9;
  overflow: hidden;
}
.qp-resp-txt {
  position: relative;
  margin: 0;
  padding: 12px 0 0 12px;
  width: 266px;
  box-sizing: content-box;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.24px;
  text-transform: uppercase;
  color: #171719;
}

/* Айпад в светлых панелях Responsive. Композит из макета сплющен в один
   слой с прозрачностью: на мобайле он собран из четырёх слоёв с px-вставками
   под карточку 406×358, и растягивать те же числа на десктопные 317×276 и
   508×276 нечем. Размер ведёт высота панели — так карточка любой ширины
   получает один и тот же прибор, а не растянутый по ширине. */
.qp-resp-device {
  position: absolute;
  left: 24px;
  top: 17.6%;
  height: 122.6%;
  width: auto;
  pointer-events: none;
}

/* Saas / crm / dashdoards */
.qp-saas {
  width: 630px;
  height: 284px;
  border-radius: 24px;
}
.qp-saas-title {
  position: absolute;
  left: 16px;
  top: 16px;
  width: 220px;
}
.qp-saas-panel {
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 4px;
  width: 366px;
  border-radius: 20px;
  background: #eaeaea;
}

/* ============================================================
   1200 (109:75924): контент 1160, поля 20, плашка-строка, gap 8
   ============================================================ */
@media (max-width: 1200px) {
  .qp-section { padding: 0 20px; }
  .qp-cards { width: 100%; padding-top: 68px; }
  .qp-spec87 { display: none; }
  .qp-strip--desktop { display: block; }

  .qp-bento {
    width: 100%;
    gap: 8px;
  }
  .qp-row { gap: 8px; }

  .qp-row--1 .qp-wchips { width: 714px; height: 298px; }
  .qp-row--1 .qp-react  { width: 438px; height: 298px; }
  .qp-row--2 .qp-resp   { width: 438px; height: 298px; }
  .qp-row--2 .qp-saas   { width: 714px; height: 298px; }
  .qp-row--3 .qp-wchips { width: 636px; height: 284px; }
  .qp-row--3 .qp-resp   { width: 516px; height: 284px; }

  /* мастер 1200: заголовок и текст от кромки 16 */
  .qp-react-title { left: 16px; top: 16px; }
  .qp-react-txt   { left: 16px; right: 20px; bottom: 16px; width: auto; }
}

/* ============================================================
   1024 (109:75922): контент 992, поля 16
   ============================================================ */
@media (max-width: 1024px) {
  .qp-section { padding: 0 16px; }

  .qp-row--1 .qp-wchips { width: 636px; height: 284px; }
  .qp-row--1 .qp-react  { width: 348px; height: 284px; }
  .qp-row--2 .qp-resp   { width: 352px; height: 284px; }
  .qp-row--2 .qp-saas   { width: 636px; height: 284px; }
  .qp-row--3 .qp-wchips { width: 636px; height: 284px; }
  .qp-row--3 .qp-resp   { width: 348px; height: 284px; }

  /* компонент 1024: снова кромка 20 */
  .qp-react-title { left: 20px; top: 20px; }
  .qp-react-txt   { left: 20px; right: auto; bottom: 20px; width: 273px; }
}

/* ============================================================
   768 (109:75928): контент 744, поля 12, мобильная колонка
   ============================================================ */
@media (max-width: 1023px) {
  .qp-section { padding: 0 12px; }
  .qp-desktop { display: none; }
  .qp-mobile  { display: block; }

  .qp-strip--mobile {
    width: 556px;
    max-width: 100%;
    margin-left: auto;
  }

  .qp-mcol {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .qp-mcard { width: 100%; }

  /* 1. user card: картинка справа, заголовок слева */
  .qp-m-user {
    order: 1;
    height: 320px;
    border-radius: 24px;
  }
  .qp-m-user-title--768 {
    position: absolute;
    left: 16px;
    top: 16px;
    width: 300px;
  }
  .qp-m-user-title--430 { display: none; }
  .qp-m-user .qp-m-img {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 312px;
    height: 312px;
    border-radius: 20px;
    background: #d9d9d9;
    overflow: hidden;
  }
  .qp-m-user .qp-chips {
    position: absolute;
    left: 8px;
    bottom: 8px;
  }
  .qp-chips-b { display: none; }

  /* Дудл — это и был вид «фотки нет». Как только в кадр приходит
     галерея, он уходит: под картинкой ему делать нечего. */
  .gal .qp-doodle {
    display: none;
  }

  .qp-doodle {
    position: absolute;
    left: 38.72px;
    top: 64.63px;
    width: 180.75px;
    height: 140.19px;
  }

  /* 2. Full functionality (на 768 — дудл, без айпада) */
  .qp-m-full {
    order: 2;
    width: calc(50% - 4px);
    height: 320px;
    border-radius: 24px;
  }
  .qp-doodle--full { left: 81px; }
  .qp-ipad { display: none; }

  /* 3. React development */
  .qp-m-react {
    order: 3;
    width: calc(50% - 4px);
    height: 320px;
    border-radius: 24px;
  }
  .qp-m-react .qp-react-title { left: 16px; top: 16px; width: 273px; }
  .qp-m-react .qp-react-txt   { left: 16px; right: 19px; bottom: 16px; width: auto; }

  /* 4. Saas: картинка справа, чипсы уходят под нижний срез (-26) */
  .qp-m-saas {
    order: 4;
    height: 388px;
    border-radius: 24px;
  }
  .qp-m-saas-title {
    position: absolute;
    left: 16px;
    top: 16px;
    width: 173px;
  }
  .qp-m-saas-media {
    position: absolute;
    right: 4px;
    top: 4px;
    width: 492px;
    height: 380px;
    border-radius: 20px;
    background: #f7f7f7;
    overflow: hidden;
  }
  .qp-m-saas-crop {
    position: absolute;
    left: 6px;
    right: 12px;
    top: 0;
    height: calc(100% + 46px);
    border-radius: 17px;
    overflow: hidden;
  }
  .qp-m-saas-crop img {
    position: absolute;
    left: 0;
    top: -28.61%;
    width: 100%;
    height: 364.37%;
  }
  .qp-m-saas .qp-saas-chips {
    position: absolute;
    left: 8px;
    bottom: -26px;
  }

  /* 5. High-end visual style: картинка слева, текст справа */
  .qp-m-style {
    order: 5;
    height: 320px;
    border-radius: 24px;
  }
  .qp-m-style .qp-m-img {
    position: absolute;
    left: 4px;
    top: 4px;
    width: 312px;
    height: 312px;
    border-radius: 20px;
    background: #d9d9d9;
    overflow: hidden;
  }
  .qp-m-style-title--768 {
    position: absolute;
    left: 336px;
    top: 20px;
    width: 363px;
  }
  .qp-m-style-title--375 { display: none; }
  .qp-m-style .qp-chips {
    position: absolute;
    left: 336px;
    bottom: 9px;
  }

  /* 6. Support and upgrade after — большая серая */
  .qp-m-support {
    order: 6;
    height: 744px;
    border-radius: 24px;
  }
}

/* ============================================================
   430 (109:75927): одна колонка, поля 8, айпад-мокапы
   ============================================================ */
@media (max-width: 719px) {
  .qp-section { padding: 0 8px; }

  .qp-strip--mobile {
    width: 100%;
    height: 74px;
    border-radius: 20px;
  }
  .qp-strip--mobile p {
    width: 279px;
    font-size: 12px;
    line-height: 14px;
  }

  /* порядок: react раньше full */
  .qp-m-react { order: 2; }
  .qp-m-full  { order: 3; }

  .qp-m-full,
  .qp-m-react { width: 100%; }

  .qp-doodle { display: none; }

  /* iPad-композит: слои с px-вставками из Figma; прямоугольные маски
     заменяет overflow скруглённой вкладки, маска формы экрана — data-URI */
  .qp-ipad { display: block; position: absolute; inset: 0; }
  .qp-ipad > div { position: absolute; }
  .qp-ipad img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .qp-ipad-back { inset: 97.67px 83.08px -143.76px 28.84px; }
  .qp-ipad-shadow {
    inset: 63px 83.79px -93.88px 29.29px;
    mix-blend-mode: multiply;
  }
  .qp-ipad-front { inset: 81.86px 31.77px -129.61px 80.77px; }
  .qp-ipad-design {
    inset: 91.25px 39.45px -119.64px 92.87px;
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjIyMi4yMTMiIGhlaWdodD0iMzQwLjQyMSIgdmlld0JveD0iMCAwIDIyMi4yMTMgMzQwLjQyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTAuMjE3MDQzIDE2NS44OTlDMC4yMTcwNDMgMTQ0LjM5NSAwLjIwNjk5NCAxMjIuODkyIDAuMjE5NTI3IDEwMS4zODhDMC4yMzYwMTMgNzMuMjA3IDAuMjY4NzU5IDQ1LjAyNTkgMC4yOTg5MDggMTYuODQ0NkMwLjMwMjk3MyAxMy4xMDYgMC4zMjM1MjMgOS4zNjc1OCAwLjM1Nzg1IDUuNjI5MTFDMC4zNjQ1MTIgNC44OTc1MyAwLjM4NDk1IDQuMTUxNzIgMC41NDQ5NTIgMy40MzgyN0MxLjA4ODE5IDEuMDE1NzIgMi45NDk2MiAtMC4xOTE3MDMgNS43NDM5NiAwLjAyNDc3NjZDMTQuNTg5NyAwLjcxMDE4IDIzLjQzNCAxLjQxMTExIDMyLjI4MDEgMi4wOTMxMUM0MC4xNTE5IDIuNjk5OTcgNDguMDI2MiAzLjI4MDM5IDU1Ljg5NzcgMy44ODk2NkM2My42MTkxIDQuNDg3MzEgNzEuMzM3NSA1LjExNDAxIDc5LjA1ODUgNS43MTM2NkM4NC45MDU3IDYuMTY3NzYgOTAuNzU2IDYuNTkxNiA5Ni42MDM1IDcuMDQzM0MxMDIuNzUxIDcuNTE4MzMgMTA4Ljg5NiA4LjAxNDMgMTE1LjA0MyA4LjQ5MzY0QzExOS4yNDEgOC44MjA5MiAxMjMuNDQgOS4xMzE4NiAxMjcuNjM4IDkuNDU2MjNDMTMzLjU1OSA5LjkxMzg0IDEzOS40OCAxMC4zODA0IDE0NS40MDIgMTAuODM3QzE0OS45NzUgMTEuMTg5NSAxNTQuNTUgMTEuNTIzNiAxNTkuMTIyIDExLjg4MTlDMTY1LjA0MyAxMi4zNDU5IDE3MC45NjIgMTIuODMwNSAxNzYuODgyIDEzLjI5NzRDMTgwLjg1NCAxMy42MTA3IDE4NC44MjggMTMuOTA0MyAxODguODAxIDE0LjIxNDdDMTk1LjE3MyAxNC43MTI1IDIwMS41NDMgMTUuMjIyNyAyMDcuOTE1IDE1LjcxNTRDMjEwLjYxMyAxNS45MjQxIDIxMy4zMTUgMTYuMTA3NiAyMTYuMDE1IDE2LjI5MTFDMjE3LjI0IDE2LjM3NDMgMjE4LjM5MyAxNi41OTEyIDIxOS4zNCAxNy4zNjAyQzIyMC41NzEgMTguMzU5NyAyMjEuMTQ5IDE5LjYzODQgMjIxLjM2NyAyMS4wNjE3QzIyMS40NDcgMjEuNTg3NiAyMjEuNDE2IDIyLjEyODQgMjIxLjQxNyAyMi42NjIzQzIyMS40NTEgMzguNzU2NyAyMjEuNDc0IDU0Ljg1MDkgMjIxLjUxNSA3MC45NDUyQzIyMS41NTUgODYuNzcxNSAyMjEuNjEyIDEwMi41OTggMjIxLjY2MyAxMTguNDI0QzIyMS42OTcgMTI5LjEwOCAyMjEuNzQ0IDEzOS43OTIgMjIxLjc2NiAxNTAuNDc3QzIyMS44MjMgMTc4LjA1NyAyMjEuODYzIDIwNS42MzcgMjIxLjkyMSAyMzMuMjE4QzIyMS45NjYgMjU0LjM4NiAyMjIuMDIyIDI3NS41NTUgMjIyLjA4NSAyOTYuNzIzQzIyMi4xMjIgMzA5LjM0NCAyMjIuMTkxIDMyMS45NjQgMjIyLjIxMyAzMzQuNTg1QzIyMi4yMTMgMzM1LjU3MyAyMjIuMTAxIDMzNi41OTkgMjIxLjc5MSAzMzcuNTQzQzIyMS4xMzUgMzM5LjU0OCAyMTkuNjM0IDM0MC40ODggMjE3LjI1NSAzNDAuNDE3QzIxMS40NjMgMzQwLjI0NCAyMDUuNjc0IDM0MC4wMiAxOTkuODgzIDMzOS44MDdDMTk0LjY5NCAzMzkuNjE3IDE4OS41MDYgMzM5LjQxNCAxODQuMzE4IDMzOS4yMkMxNzguMDc3IDMzOC45ODcgMTcxLjgzNSAzMzguNzU4IDE2NS41OTQgMzM4LjUyNkMxNjEuNzU5IDMzOC4zODMgMTU3LjkyNCAzMzguMjI5IDE1NC4wODkgMzM4LjA5MkMxNDEuNDU0IDMzNy42NCAxMjguODIgMzM3LjE5OSAxMTYuMTg1IDMzNi43NDVDMTA0LjM3OCAzMzYuMzIyIDkyLjU3MTcgMzM1Ljg4NyA4MC43NjUgMzM1LjQ1NkM3MC4yMzcgMzM1LjA3MiA1OS43MDkyIDMzNC42ODUgNDkuMTgxNSAzMzQuM0MzOC4zNTI1IDMzMy45MDMgMjcuNTIzNyAzMzMuNTA3IDE2LjY5NDkgMzMzLjEwOUMxMy4wODU0IDMzMi45NzcgOS40NzU4NCAzMzIuODQ1IDUuODY2ODEgMzMyLjcwM0M0LjY1OTUxIDMzMi42NTUgMy40NTIwOSAzMzIuNTggMi40MjQzMyAzMzEuOTFDMS4wNzQzIDMzMS4wMyAwLjM0NTA5IDMyOS44MTMgMC4xMDE3NTYgMzI4LjM3M0MtMC4wMDkwMTUxIDMyNy43MTggMC4wMDAxODY3ODIgMzI3LjA0MiAwLjAwMDE4Njc4MiAzMjYuMzc1QzAuMDM1NTg2OCAyODEuNDk4IDAuMDc2NDYyNSAyMzYuNjIxIDAuMTEzNDk5IDE5MS43NDNDMC4xMjA2MTMgMTgzLjEyOCAwLjExNDYyOCAxNzQuNTE0IDAuMTE0NjI4IDE2NS44OTlIMC4yMTcwNDNaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjIyMi4yMTMiIGhlaWdodD0iMzQwLjQyMSIgdmlld0JveD0iMCAwIDIyMi4yMTMgMzQwLjQyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTAuMjE3MDQzIDE2NS44OTlDMC4yMTcwNDMgMTQ0LjM5NSAwLjIwNjk5NCAxMjIuODkyIDAuMjE5NTI3IDEwMS4zODhDMC4yMzYwMTMgNzMuMjA3IDAuMjY4NzU5IDQ1LjAyNTkgMC4yOTg5MDggMTYuODQ0NkMwLjMwMjk3MyAxMy4xMDYgMC4zMjM1MjMgOS4zNjc1OCAwLjM1Nzg1IDUuNjI5MTFDMC4zNjQ1MTIgNC44OTc1MyAwLjM4NDk1IDQuMTUxNzIgMC41NDQ5NTIgMy40MzgyN0MxLjA4ODE5IDEuMDE1NzIgMi45NDk2MiAtMC4xOTE3MDMgNS43NDM5NiAwLjAyNDc3NjZDMTQuNTg5NyAwLjcxMDE4IDIzLjQzNCAxLjQxMTExIDMyLjI4MDEgMi4wOTMxMUM0MC4xNTE5IDIuNjk5OTcgNDguMDI2MiAzLjI4MDM5IDU1Ljg5NzcgMy44ODk2NkM2My42MTkxIDQuNDg3MzEgNzEuMzM3NSA1LjExNDAxIDc5LjA1ODUgNS43MTM2NkM4NC45MDU3IDYuMTY3NzYgOTAuNzU2IDYuNTkxNiA5Ni42MDM1IDcuMDQzM0MxMDIuNzUxIDcuNTE4MzMgMTA4Ljg5NiA4LjAxNDMgMTE1LjA0MyA4LjQ5MzY0QzExOS4yNDEgOC44MjA5MiAxMjMuNDQgOS4xMzE4NiAxMjcuNjM4IDkuNDU2MjNDMTMzLjU1OSA5LjkxMzg0IDEzOS40OCAxMC4zODA0IDE0NS40MDIgMTAuODM3QzE0OS45NzUgMTEuMTg5NSAxNTQuNTUgMTEuNTIzNiAxNTkuMTIyIDExLjg4MTlDMTY1LjA0MyAxMi4zNDU5IDE3MC45NjIgMTIuODMwNSAxNzYuODgyIDEzLjI5NzRDMTgwLjg1NCAxMy42MTA3IDE4NC44MjggMTMuOTA0MyAxODguODAxIDE0LjIxNDdDMTk1LjE3MyAxNC43MTI1IDIwMS41NDMgMTUuMjIyNyAyMDcuOTE1IDE1LjcxNTRDMjEwLjYxMyAxNS45MjQxIDIxMy4zMTUgMTYuMTA3NiAyMTYuMDE1IDE2LjI5MTFDMjE3LjI0IDE2LjM3NDMgMjE4LjM5MyAxNi41OTEyIDIxOS4zNCAxNy4zNjAyQzIyMC41NzEgMTguMzU5NyAyMjEuMTQ5IDE5LjYzODQgMjIxLjM2NyAyMS4wNjE3QzIyMS40NDcgMjEuNTg3NiAyMjEuNDE2IDIyLjEyODQgMjIxLjQxNyAyMi42NjIzQzIyMS40NTEgMzguNzU2NyAyMjEuNDc0IDU0Ljg1MDkgMjIxLjUxNSA3MC45NDUyQzIyMS41NTUgODYuNzcxNSAyMjEuNjEyIDEwMi41OTggMjIxLjY2MyAxMTguNDI0QzIyMS42OTcgMTI5LjEwOCAyMjEuNzQ0IDEzOS43OTIgMjIxLjc2NiAxNTAuNDc3QzIyMS44MjMgMTc4LjA1NyAyMjEuODYzIDIwNS42MzcgMjIxLjkyMSAyMzMuMjE4QzIyMS45NjYgMjU0LjM4NiAyMjIuMDIyIDI3NS41NTUgMjIyLjA4NSAyOTYuNzIzQzIyMi4xMjIgMzA5LjM0NCAyMjIuMTkxIDMyMS45NjQgMjIyLjIxMyAzMzQuNTg1QzIyMi4yMTMgMzM1LjU3MyAyMjIuMTAxIDMzNi41OTkgMjIxLjc5MSAzMzcuNTQzQzIyMS4xMzUgMzM5LjU0OCAyMTkuNjM0IDM0MC40ODggMjE3LjI1NSAzNDAuNDE3QzIxMS40NjMgMzQwLjI0NCAyMDUuNjc0IDM0MC4wMiAxOTkuODgzIDMzOS44MDdDMTk0LjY5NCAzMzkuNjE3IDE4OS41MDYgMzM5LjQxNCAxODQuMzE4IDMzOS4yMkMxNzguMDc3IDMzOC45ODcgMTcxLjgzNSAzMzguNzU4IDE2NS41OTQgMzM4LjUyNkMxNjEuNzU5IDMzOC4zODMgMTU3LjkyNCAzMzguMjI5IDE1NC4wODkgMzM4LjA5MkMxNDEuNDU0IDMzNy42NCAxMjguODIgMzM3LjE5OSAxMTYuMTg1IDMzNi43NDVDMTA0LjM3OCAzMzYuMzIyIDkyLjU3MTcgMzM1Ljg4NyA4MC43NjUgMzM1LjQ1NkM3MC4yMzcgMzM1LjA3MiA1OS43MDkyIDMzNC42ODUgNDkuMTgxNSAzMzQuM0MzOC4zNTI1IDMzMy45MDMgMjcuNTIzNyAzMzMuNTA3IDE2LjY5NDkgMzMzLjEwOUMxMy4wODU0IDMzMi45NzcgOS40NzU4NCAzMzIuODQ1IDUuODY2ODEgMzMyLjcwM0M0LjY1OTUxIDMzMi42NTUgMy40NTIwOSAzMzIuNTggMi40MjQzMyAzMzEuOTFDMS4wNzQzIDMzMS4wMyAwLjM0NTA5IDMyOS44MTMgMC4xMDE3NTYgMzI4LjM3M0MtMC4wMDkwMTUxIDMyNy43MTggMC4wMDAxODY3ODIgMzI3LjA0MiAwLjAwMDE4Njc4MiAzMjYuMzc1QzAuMDM1NTg2OCAyODEuNDk4IDAuMDc2NDYyNSAyMzYuNjIxIDAuMTEzNDk5IDE5MS43NDNDMC4xMjA2MTMgMTgzLjEyOCAwLjExNDYyOCAxNzQuNTE0IDAuMTE0NjI4IDE2NS44OTlIMC4yMTcwNDNaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 0.266px 0.777px;
    mask-position: 0.266px 0.777px;
    -webkit-mask-size: calc(100% - 0.47px) calc(100% - 0.97px);
    mask-size: calc(100% - 0.47px) calc(100% - 0.97px);
  }
  .qp-ipad-design img { object-fit: cover; }

  /* 1. user card: картинка сверху, текст и чипсы под ней */
  .qp-m-user { height: 622px; }
  .qp-m-user-title--768 { display: none; }
  .qp-m-user-title--430 {
    display: block;
    position: absolute;
    left: 16px;
    top: 430px;
    width: 359px;
    max-width: calc(100% - 32px);
  }
  .qp-m-user .qp-m-img {
    right: 4px;
    left: 4px;
    top: 4px;
    transform: none;
    width: auto;
    height: 406px;
  }

  /* 2. React */
  .qp-m-react { height: 256px; }

  /* 3. Full functionality */
  .qp-m-full { height: 366px; }

  /* 4. Saas: картинка сверху на всю ширину */
  .qp-m-saas { height: 488px; }
  .qp-m-saas-media {
    left: 4px;
    right: 4px;
    top: 4px;
    width: auto;
    height: 308px;
  }
  .qp-m-saas-title {
    top: 336px;
    width: 369px;
    max-width: calc(100% - 32px);
  }
  .qp-m-saas .qp-saas-chips {
    bottom: 8px;
    flex-direction: row;
    flex-wrap: wrap;
    width: 360px;
  }
  .qp-m-saas .qp-saas-chips .qp-chips-row { display: contents; }

  /* 5. High-end visual style */
  .qp-m-style { height: 622px; }
  .qp-m-style .qp-m-img {
    right: 4px;
    width: auto;
    height: 406px;
  }
  .qp-m-style-title--768 {
    left: 16px;
    top: 430px;
    width: 359px;
    max-width: calc(100% - 32px);
  }
  .qp-m-style .qp-chips {
    left: 8px;
    bottom: 8px;
  }

  /* 6. Support */
  .qp-m-support { height: 366px; }
}

/* ============================================================
   375 (109:75926): поля 6, чипсы-вариант b, свои высоты
   ============================================================ */
@media (max-width: 375px) {
  .qp-section { padding: 0 6px; }

  .qp-chips-a { display: none; }
  .qp-chips-b { display: flex; }

  .qp-m-user { height: 591px; }
  .qp-m-user .qp-m-img { height: 355px; }
  .qp-m-user-title--430 {
    top: 383px;
    width: 325px;
    padding-right: 32px;
    box-sizing: border-box;
    max-width: calc(100% - 16px);
  }

  .qp-m-react { height: 256px; }

  .qp-m-full { height: 321px; }

  .qp-m-saas { height: 447px; }
  .qp-m-saas-media { height: 267px; }
  .qp-m-saas-title {
    top: 295px;
    width: 257px;
  }

  .qp-m-style { height: 591px; }
  .qp-m-style .qp-m-img { height: 355px; }
  .qp-m-style-title--768 { display: none; }
  .qp-m-style-title--375 {
    display: block;
    position: absolute;
    left: 16px;
    top: 383px;
    width: 325px;
    padding-right: 70px;
    box-sizing: border-box;
    max-width: calc(100% - 16px);
  }

  .qp-m-support { height: 321px; }
}

/* ============================================================
   320 (109:75925): поля 6, зазор 6, чипсы снова вариант a
   ============================================================ */
@media (max-width: 320px) {
  .qp-mcol { margin-top: 6px; gap: 6px; }

  .qp-chips-a { display: flex; }
  .qp-chips-b { display: none; }

  .qp-m-user { height: 536px; }
  .qp-m-user .qp-m-img { height: 304px; }
  .qp-m-user-title--430 {
    left: 12px;
    top: 328px;
    width: 282px;
    padding-right: 0;
  }

  .qp-m-react { height: 256px; }

  .qp-m-full { height: 272px; }

  .qp-m-saas { height: 432px; }
  .qp-m-saas-media { height: 226px; }
  .qp-m-saas-title {
    left: 12px;
    top: 250px;
    width: 257px;
  }
  .qp-m-saas .qp-saas-chips { width: 290px; }

  .qp-m-style { height: 536px; }
  .qp-m-style .qp-m-img { height: 304px; }
  .qp-m-style-title--375 {
    left: 12px;
    top: 328px;
    width: 282px;
    padding-right: 0;
  }

  .qp-m-support { height: 272px; }
}