/* Hero — как на FAQ */
.hero-community--manual {
  overflow-x: clip;
}

.hero-community--manual,
.hero-community--manual .hero-community__content {
  height: auto;
  min-height: clamp(380px, calc(380px + (517 - 380) * (100vw - 375px) / 1065), 517px);
}

.hero-community--manual .hero-community__title {
  width: 100%;
  max-width: min(904px, calc(100vw - var(--container-padding) * 2));
  margin: 0;
  font-family: "Roboto Condensed", var(--font-heading), sans-serif;
  font-size: clamp(36px, calc(36px + 44 * (100vw - 375px) / 1065), 80px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.hero-community--manual .hero-community__lead {
  width: 100%;
  max-width: min(780px, calc(100vw - var(--container-padding) * 2));
  margin: clamp(12px, calc(12px + 8 * (100vw - 375px) / 1065), 20px) 0 0;
  font-family: "Roboto Flex", var(--font-body), sans-serif;
  font-size: clamp(16px, calc(16px + 4 * (100vw - 375px) / 1065), 20px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  color: #ffffff;
}

@media (max-width: 1439px) {
  .hero-community--manual .hero-community__content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    box-sizing: border-box;
    padding: 0 var(--container-padding) clamp(32px, calc(32px + 8 * (100vw - 500px) / 939), 40px);
  }

  .hero-community--manual .hero-community__breadcrumbs {
    position: absolute;
    top: calc(var(--header-height) + clamp(16px, calc(16px + 8 * (100vw - 500px) / 939), 24px));
    left: var(--container-padding);
    right: var(--container-padding);
    max-width: calc(100% - var(--container-padding) * 2);
  }

  .hero-community--manual .hero-community__title,
  .hero-community--manual .hero-community__lead {
    position: static;
    width: 100%;
  }

  .hero-community--manual .hero-community__title {
    max-width: min(904px, 100%);
  }

  .hero-community--manual .hero-community__lead {
    max-width: min(780px, 100%);
  }
}

@media (max-width: 767px) {
  .hero-community--manual,
  .hero-community--manual .hero-community__content {
    min-height: clamp(400px, calc(400px + 55 * (100vw - 375px) / 392), 455px);
  }

  .hero-community--manual .hero-community__lead {
    display: block;
    position: static;
    width: 100%;
    max-width: 100%;
    margin-top: clamp(12px, calc(12px + 8 * (100vw - 375px) / 392), 16px);
    font-size: clamp(14px, calc(14px + 4 * (100vw - 375px) / 392), 18px);
    line-height: 1.3;
    color: #ffffff;
  }
}

/* Документация во фрейме — fluid 375→1440 */
.manual-frame {
  box-sizing: border-box;
  width: 100%;
  background: #ffffff;
  padding-inline: clamp(15px, calc(15px + 25 * (100vw - 375px) / 1065), 40px);
  padding-top: clamp(16px, calc(16px + 16 * (100vw - 375px) / 1065), 32px);
  padding-bottom: clamp(24px, calc(24px + 32 * (100vw - 375px) / 1065), 56px);
}

.manual-frame__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  overflow: hidden;
  border-radius: clamp(4px, calc(4px + 4 * (100vw - 375px) / 1065), 8px);
  box-shadow: 0 clamp(8px, calc(8px + 8 * (100vw - 375px) / 1065), 16px)
    clamp(24px, calc(24px + 16 * (100vw - 375px) / 1065), 40px)
    rgba(0, 23, 94, 0.08);
}

.manual-frame__iframe {
  display: block;
  width: 100%;
  height: clamp(
    480px,
    calc(480px + (900 - 480) * (100vw - 375px) / 1065),
    min(900px, calc(100vh - clamp(220px, calc(220px + 80 * (100vw - 375px) / 1065), 300px)))
  );
  min-height: clamp(
    480px,
    calc(480px + (900 - 480) * (100vw - 375px) / 1065),
    min(900px, calc(100vh - clamp(220px, calc(220px + 80 * (100vw - 375px) / 1065), 300px)))
  );
  border: 0;
  background: #ffffff;
}

/* 375 → 768 — компактнее отступы и высота */
@media (max-width: 767px) {
  .manual-frame {
    padding-inline: clamp(15px, calc(15px + 17 * (100vw - 375px) / 393), 32px);
    padding-top: clamp(12px, calc(12px + 12 * (100vw - 375px) / 393), 24px);
    padding-bottom: clamp(20px, calc(20px + 20 * (100vw - 375px) / 393), 40px);
  }

  .manual-frame__inner {
    border-radius: clamp(4px, calc(4px + 2 * (100vw - 375px) / 393), 6px);
  }

  .manual-frame__iframe {
    height: clamp(
      460px,
      calc(460px + (640 - 460) * (100vw - 375px) / 393),
      min(640px, calc(100vh - clamp(200px, calc(200px + 60 * (100vw - 375px) / 393), 260px)))
    );
    min-height: clamp(
      460px,
      calc(460px + (640 - 460) * (100vw - 375px) / 393),
      min(640px, calc(100vh - clamp(200px, calc(200px + 60 * (100vw - 375px) / 393), 260px)))
    );
  }
}

/* 768 → 1024 */
@media (min-width: 768px) and (max-width: 1023px) {
  .manual-frame {
    padding-inline: clamp(32px, calc(32px + 8 * (100vw - 768px) / 255), 40px);
    padding-top: clamp(24px, calc(24px + 8 * (100vw - 768px) / 255), 32px);
    padding-bottom: clamp(40px, calc(40px + 16 * (100vw - 768px) / 255), 56px);
  }

  .manual-frame__iframe {
    height: clamp(
      640px,
      calc(640px + (780 - 640) * (100vw - 768px) / 255),
      min(780px, calc(100vh - clamp(260px, calc(260px + 40 * (100vw - 768px) / 255), 300px)))
    );
    min-height: clamp(
      640px,
      calc(640px + (780 - 640) * (100vw - 768px) / 255),
      min(780px, calc(100vh - clamp(260px, calc(260px + 40 * (100vw - 768px) / 255), 300px)))
    );
  }
}

/* 1024 — якорный брейкпоинт */
@media (min-width: 1024px) and (max-width: 1024px) {
  .manual-frame__iframe {
    height: 780px;
    min-height: 780px;
  }
}

/* 1025 → 1200 — контейнер сужается плавно */
@media (min-width: 1025px) and (max-width: 1200px) {
  .manual-frame {
    padding-inline: clamp(32px, calc(32px + 8 * (1200px - 100vw) / 175), 40px);
  }

  .manual-frame__inner {
    max-width: min(100vw - 80px, calc(944px + 96 * (100vw - 1025px) / 175));
  }

  .manual-frame__iframe {
    height: clamp(
      780px,
      calc(780px + (860 - 780) * (100vw - 1025px) / 175),
      min(860px, calc(100vh - 280px))
    );
    min-height: clamp(
      780px,
      calc(780px + (860 - 780) * (100vw - 1025px) / 175),
      min(860px, calc(100vh - 280px))
    );
  }
}

/* 1201 → 1439 */
@media (min-width: 1201px) and (max-width: 1439px) {
  .manual-frame__inner {
    max-width: min(1360px, calc(100vw - 80px));
  }

  .manual-frame__iframe {
    height: clamp(
      860px,
      calc(860px + (900 - 860) * (100vw - 1200px) / 240),
      min(900px, calc(100vh - 280px))
    );
    min-height: clamp(
      860px,
      calc(860px + (900 - 860) * (100vw - 1200px) / 240),
      min(900px, calc(100vh - 280px))
    );
  }
}

/* 1440+ */
@media (min-width: 1440px) {
  .manual-frame__inner {
    max-width: 1360px;
  }

  .manual-frame__iframe {
    height: min(900px, calc(100vh - 280px));
    min-height: min(900px, calc(100vh - 280px));
  }
}

/* CTA «Не нашли нужного документа?» — Figma 765:14473, карточка 1440×329 */
.manual-help {
  box-sizing: border-box;
  width: 100%;
  background: #ffffff;
  padding: 0 var(--container-padding) clamp(56px, calc(56px + 64 * (100vw - 375px) / 1065), 120px);
  overflow-x: clip;
}

.manual-help__inner {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  max-width: min(1360px, calc(100vw - var(--container-padding) * 2));
  min-height: clamp(280px, calc(280px + 49 * (100vw - 375px) / 1065), 329px);
  margin-inline: auto;
  padding: clamp(32px, calc(32px + 28 * (100vw - 375px) / 1065), 60px)
    clamp(20px, calc(20px + 20 * (100vw - 375px) / 1065), 40px);
  border-radius: 4px;
  background-color: #f5f6f7;
}

.manual-help__aside {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  width: clamp(120px, calc(120px + (305 - 120) * (100vw - 375px) / 1065), 305px);
  padding-top: clamp(0px, calc(0px + 6 * (100vw - 688px) / 752), 6px);
}

.manual-help__eyebrow {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, calc(8px + 4 * (100vw - 375px) / 1065), 12px);
  width: max-content;
  max-width: 185px;
  margin: 0;
  margin-left: clamp(0px, calc(0px + 52 * (100vw - 1024px) / 416), 52px);
  font-family: "Roboto Flex", var(--font-body), sans-serif;
  font-size: clamp(14px, calc(14px + 2 * (100vw - 375px) / 1065), 16px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--Secondary-text, #5f6062);
}

.manual-help__eyebrow-mark {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  background-color: var(--Secondary-text, #5f6062);
}

.manual-help__content {
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(24px, calc(24px + (40 - 24) * (100vw - 375px) / 1065), 40px);
  min-width: 0;
  max-width: 1014px;
  min-height: clamp(160px, calc(160px + (209 - 160) * (100vw - 1024px) / 416), 209px);
}

.manual-help__title {
  box-sizing: border-box;
  width: min(616px, 100%);
  max-width: 616px;
  min-height: clamp(36px, calc(36px + (55 - 36) * (100vw - 375px) / 1065), 55px);
  margin: 0;
  font-family: "Roboto Condensed", var(--font-heading), sans-serif;
  font-size: clamp(30px, calc(30px + 20 * (100vw - 375px) / 1065), 50px);
  font-weight: 400;
  font-style: normal;
  line-height: 1.09;
  letter-spacing: -0.02em;
  text-align: left;
  color: var(--color-text-primary, #212123);
}

.manual-help__lead {
  box-sizing: border-box;
  width: min(686px, 100%);
  max-width: 686px;
  margin: 0;
  font-family: "Roboto Flex", var(--font-body), sans-serif;
  font-size: clamp(16px, calc(16px + 2 * (100vw - 375px) / 1065), 18px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: left;
  color: var(--Secondary-text, #5f6062);
}

.manual-help__lead a {
  color: var(--Accent, #0c3eb3);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s ease;
}

.manual-help__lead a:hover {
  opacity: 0.85;
}

.manual-help__btn {
  box-sizing: border-box;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  align-self: flex-start;
  justify-content: flex-start;
  gap: 20px;
  width: min(376px, 100%);
  height: 50px;
  padding: 0 30px;
  border: 1px solid var(--color-accent-card, #0c3eb3);
  border-radius: 0;
  background: transparent;
  color: var(--color-accent-card, #0c3eb3);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.manual-help__btn:hover,
.manual-help__btn:focus-visible {
  background-color: var(--color-accent-card, #0c3eb3);
  color: #ffffff;
}

.manual-help__btn:hover .manual-help__btn-icon,
.manual-help__btn:focus-visible .manual-help__btn-icon {
  background-color: #ffffff;
}

.manual-help__btn-text {
  flex: 0 1 auto;
  min-width: 0;
  font-family: "Roboto Flex", var(--font-body), sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.manual-help__btn-text--mobile {
  display: none;
}

.manual-help__btn-icon {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  background-color: var(--Accent, #0c3eb3);
}

/* 375 → 1024 — плашка на всю ширину + выравнивание как publication-cta */
@media (max-width: 1024px) {
  .manual-help {
    padding-inline: 0;
    padding-bottom: 0;
  }

  .manual-help__inner {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    border-radius: 0;
    align-items: flex-start;
  }

  .manual-help__eyebrow {
    margin-left: 0;
  }

  .manual-help__content {
    align-items: flex-start;
  }

  .manual-help__title,
  .manual-help__lead {
    text-align: left;
  }

  .manual-help__btn {
    align-self: flex-start;
  }
}

/* ≤943 — колонка: «Помощь» сверху, контент под ним слева */
@media (max-width: 943px) {
  .manual-help__inner {
    flex-direction: column;
    gap: clamp(16px, calc(16px + 4 * (100vw - 375px) / 568), 20px);
    min-height: 0;
  }

  .manual-help__aside {
    width: auto;
    padding-top: 0;
  }

  .manual-help__content {
    flex: none;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    gap: clamp(20px, calc(20px + 20 * (100vw - 375px) / 568), 40px);
  }

  .manual-help__title {
    width: 100%;
    max-width: 100%;
    min-height: 0;
  }

  .manual-help__lead {
    width: 100%;
    max-width: 100%;
  }

  .manual-help__btn {
    width: min(376px, 100%);
  }
}

/* 375 → 767 */
@media (max-width: 767px) {
  .manual-help__inner {
    padding: clamp(24px, calc(24px + 16 * (100vw - 375px) / 393), 40px)
      clamp(15px, calc(15px + 17 * (100vw - 375px) / 393), 32px);
  }

  .manual-help__title {
    font-size: clamp(28px, calc(28px + 8 * (100vw - 375px) / 393), 36px);
  }

  .manual-help__lead {
    font-size: clamp(14px, calc(14px + 4 * (100vw - 375px) / 393), 18px);
  }
}

/* 768 → 1023 */
@media (min-width: 768px) and (max-width: 1023px) {
  .manual-help__inner {
    padding: clamp(32px, calc(32px + 8 * (100vw - 768px) / 255), 40px)
      clamp(24px, calc(24px + 8 * (100vw - 768px) / 255), 40px);
  }

  .manual-help__title {
    font-size: clamp(36px, calc(36px + 4 * (100vw - 768px) / 255), 40px);
  }
}

/* 944 → 1024 — ряд: «Помощь» слева, контент справа, всё по левому краю */
@media (min-width: 944px) and (max-width: 1024px) {
  .manual-help__inner {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: clamp(16px, calc(16px + 4 * (100vw - 944px) / 80), 20px);
    min-height: clamp(300px, calc(300px + 29 * (100vw - 944px) / 80), 329px);
    padding: clamp(40px, calc(40px + 20 * (100vw - 944px) / 80), 60px) 40px;
  }

  .manual-help__aside {
    flex-shrink: 0;
    width: clamp(240px, calc(240px + 48 * (100vw - 944px) / 80), 288px);
    padding-top: clamp(0px, calc(0px + 6 * (100vw - 944px) / 80), 6px);
  }

  .manual-help__content {
    flex: 1 1 auto;
    max-width: min(760px, 100%);
    min-height: 0;
    gap: clamp(28px, calc(28px + 12 * (100vw - 944px) / 80), 40px);
  }

  .manual-help__title {
    width: 100%;
    max-width: 100%;
    font-size: clamp(40px, calc(40px + 10 * (100vw - 944px) / 80), 50px);
  }

  .manual-help__lead {
    width: 100%;
    max-width: min(686px, 100%);
    font-size: clamp(16px, calc(16px + 2 * (100vw - 944px) / 80), 18px);
  }

  .manual-help__btn {
    width: min(376px, 100%);
  }
}

/* 1025 → 1439 — карточка с боковыми отступами (не full-bleed) */
@media (min-width: 1025px) and (max-width: 1439px) {
  .manual-help {
    padding-inline: clamp(32px, calc(32px + 8 * (1200px - 100vw) / 175), 40px);
    padding-bottom: clamp(56px, calc(56px + 64 * (100vw - 375px) / 1065), 120px);
  }

  .manual-help__inner {
    max-width: min(100vw - 80px, calc(944px + 96 * (100vw - 1025px) / 175));
    min-height: clamp(300px, calc(300px + 29 * (100vw - 1025px) / 175), 329px);
    margin-inline: auto;
    border-radius: 4px;
    padding: clamp(40px, calc(40px + 20 * (100vw - 1025px) / 175), 60px)
      clamp(32px, calc(32px + 8 * (100vw - 1025px) / 175), 40px);
  }

  .manual-help__title {
    font-size: clamp(40px, calc(40px + 10 * (100vw - 1025px) / 175), 50px);
  }
}

/* 1201 → 1439 — плавный рост заголовка к 50px */
@media (min-width: 1201px) and (max-width: 1439px) {
  .manual-help__title {
    font-size: clamp(46px, calc(46px + 4 * (100vw - 1200px) / 240), 50px);
  }
}

/* 1440+ — точные значения Figma 765:14473 */
@media (min-width: 1440px) {
  .manual-help__inner {
    max-width: 1360px;
    min-height: 329px;
    padding: 60px 40px;
  }

  .manual-help__aside {
    width: 305px;
    padding-top: 6px;
  }

  .manual-help__eyebrow {
    margin-left: 52px;
    max-width: 185px;
    font-size: 16px;
  }

  .manual-help__content {
    width: 1014px;
    max-width: 1014px;
    min-height: 209px;
    gap: 40px;
    align-items: flex-start;
  }

  .manual-help__title {
    width: 616px;
    max-width: 616px;
    min-height: 55px;
    font-size: 50px;
    line-height: 1.09;
    letter-spacing: -0.02em;
  }

  .manual-help__lead {
    width: 686px;
    max-width: 686px;
    font-size: 18px;
    line-height: 1.2;
  }

  .manual-help__btn {
    width: 376px;
  }
}

/* 375–768 — Figma: manual-frame 40/80, help 40/80, кнопка 260×50 */
@media (max-width: 768px) {
  .manual-frame {
    padding-top: 40px;
    padding-bottom: 80px;
    padding-inline: var(--container-padding);
  }

  .manual-help__inner {
    padding-top: 40px;
    padding-bottom: 80px;
    padding-inline: var(--container-padding);
  }

  .manual-help__btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 260px;
    max-width: 100%;
    min-width: 0;
    height: 50px;
    padding: 0 30px;
    border-width: 1px;
  }

  .manual-help__btn-text--desktop {
    display: none;
  }

  .manual-help__btn-text--mobile {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    font-family: "Roboto Flex", var(--font-body), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .manual-help__btn-icon {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
  }
}