@font-face {
  font-family: "SEO Raleway";
  src: url("./raleway-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "SEO Comfortaa";
  src: url("./comfortaa-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "SEO Inter Hewn";
  src: url("./inter-hewn-bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "SEO Involve";
  src: url("./involve-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Только оболочка демонстрации; компонент ниже независим от неё. */
.seo-preview {
  margin: 0;
  min-width: 320px;
  background: #fff;
}

.seo-preview main {
  padding-block: 80px;
}

.seo-audit,
.seo-audit * {
  box-sizing: border-box;
}

/* Сбрасываем глобальную типографику сайта внутри компонента. */
.seo-audit * {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.seo-audit {
  --seo-ink: #111;
  width: 100%;
  max-width: 1184px;
  margin-inline: auto;
  padding-inline: 22px;
  color: var(--seo-ink);
  font-family: "SEO Raleway", Arial, sans-serif;
  font-size: 18px;
  font-variant-numeric: lining-nums;
  line-height: 1.174;
}

.seo-audit__title {
  margin: 0 0 40.78px;
  font-family: inherit;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.174;
  text-align: center;
}

.seo-audit__body {
  display: grid;
  grid-template-columns: 486px minmax(0, 1fr);
  column-gap: 157px;
  align-items: start;
}

.seo-audit__copy {
  min-width: 0;
  padding-top: 26px;
  padding-left: 18px;
}

.seo-audit__lead,
.seo-audit__description {
  margin: 0;
  font: inherit;
}

.seo-audit__lead {
  font-weight: 600;
}

.seo-audit__label {
  position: relative;
  isolation: isolate;
  display: table;
  margin: 26px 0 15px;
  color: #fff;
  font-family: "SEO Comfortaa", "Arial Rounded MT Bold", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
}

.seo-audit__brush {
  position: absolute;
  z-index: -1;
  top: -8px;
  left: -18px;
  display: block;
  width: 265px;
  height: 37px;
  max-width: none;
  pointer-events: none;
}

.seo-audit__art {
  position: relative;
  width: calc(100% + 21.136px);
  max-width: 518.136px;
  aspect-ratio: 518.136 / 319.719;
  margin-top: -29px;
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--seo-rotate-x, 0deg)) rotateY(var(--seo-rotate-y, 0deg));
}

.seo-audit__key {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
  transform: translate3d(calc(var(--seo-shift-x, 0px) * var(--seo-key-depth, 1)), calc(var(--seo-shift-y, 0px) * var(--seo-key-depth, 1)), 0);
}

.seo-audit__key--seo {
  --seo-key-depth: 0.8;
  top: 0;
  left: 0;
  width: 61.9528%;
}

.seo-audit__key--brand {
  --seo-key-depth: 1.25;
  top: 24.3952%;
  left: 52.2442%;
  width: 47.7558%;
}

@media (max-width: 1150px) {
  .seo-audit__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 48px;
  }

  .seo-audit__desktop-break {
    display: none;
  }

  .seo-audit__art {
    width: 100%;
    margin-top: 0;
    align-self: center;
  }
}

@media (max-width: 760px) {
  .seo-preview main {
    padding-block: 48px;
  }

  .seo-audit {
    max-width: 604px;
    padding-inline: 24px;
    font-size: 17px;
    line-height: 1.45;
  }

  .seo-audit__title {
    margin-bottom: 28px;
    font-size: 28px;
    line-height: 1.2;
  }

  .seo-audit__body {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
  }

  .seo-audit__copy {
    padding: 0;
  }

  .seo-audit__label {
    margin-top: 28px;
    margin-bottom: 20px;
  }

  .seo-audit__art {
    grid-row: 1;
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
  }

  .seo-audit__brush {
    left: -12px;
  }
}

@media (max-width: 400px) {
  .seo-preview main {
    padding-block: 32px;
  }

  .seo-audit {
    padding-inline: 20px;
    font-size: 16px;
    line-height: 1.5;
  }

  .seo-audit__title {
    font-size: 26px;
  }
}

/* Figma 18:1206 — преимущества SEO-аудита. */
.seo-benefits,
.seo-benefits * {
  box-sizing: border-box;
}

.seo-benefits * {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.seo-benefits {
  width: 100%;
  max-width: 1364px;
  margin: 58px auto 0;
  padding-inline: 20px;
  color: #111;
  font-family: "SEO Comfortaa", sans-serif;
  font-size: 16px;
  line-height: 1.115;
}

.seo-benefits__title {
  margin: 0 0 40px;
  font-family: "SEO Inter Hewn", "SEO Raleway", sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.21;
  text-align: center;
}

.seo-benefits__title span {
  color: #ed5026;
  white-space: nowrap;
}

.seo-benefits__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.seo-benefit {
  position: relative;
  min-width: 0;
  min-height: 180px;
  padding: 31px 23px;
  border: 1px solid #ed5026;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 12px rgb(0 0 0 / 12%);
}

.seo-benefit__text {
  max-width: 256px;
  margin: 0;
}

.seo-benefit:last-child .seo-benefit__text {
  max-width: 236px;
}

.seo-benefit__highlight {
  display: block;
  margin-top: 6px;
  color: #ed5026;
  font-family: "SEO Raleway", sans-serif;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: lining-nums;
  line-height: 1.174;
}

.seo-benefit__number {
  position: absolute;
  right: 9px;
  bottom: 9px;
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  border-radius: 50%;
  background: #ed5026;
  color: #fff;
  font-family: "SEO Raleway", sans-serif;
  font-size: 42px;
  font-weight: 700;
  font-variant-numeric: lining-nums;
  line-height: 1;
  box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
}

@media (max-width: 1100px) {
  .seo-benefit__desktop-break {
    display: none;
  }

  .seo-benefits {
    max-width: 604px;
  }

  .seo-benefits__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .seo-benefit {
    padding: 24px 84px 24px 23px;
  }

  .seo-benefit__text,
  .seo-benefit:last-child .seo-benefit__text {
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .seo-benefits {
    margin-top: 48px;
    padding-inline: 24px;
    line-height: 1.35;
  }

  .seo-benefits__title {
    margin-bottom: 28px;
    font-size: 26px;
    line-height: 1.25;
  }
}

@media (max-width: 400px) {
  .seo-benefits {
    padding-inline: 20px;
  }
}

/* Figma 18:1225 — тарифы и раскрывающиеся списки проверок. */
.seo-pricing,
.seo-pricing * {
  box-sizing: border-box;
}

.seo-pricing * {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.seo-pricing {
  width: 100%;
  max-width: 1364px;
  margin: 120px auto 0;
  padding-inline: 20px;
  color: #111;
  font-family: "SEO Raleway", Arial, sans-serif;
  font-size: 20px;
  font-variant-numeric: lining-nums;
  line-height: 1.174;
}

.seo-pricing__title {
  position: relative;
  isolation: isolate;
  width: 265px;
  margin: 0 auto 40px;
  color: #fff;
  font-family: "SEO Inter Hewn", "SEO Raleway", sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.21;
  text-align: center;
}

.seo-pricing__title img {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 0;
  width: 265px;
  height: 53px;
  transform: translateY(-50%);
  pointer-events: none;
}

.seo-pricing__list {
  display: grid;
  gap: 20px;
}

.seo-plan {
  min-width: 0;
  padding: 40px 92px 20px;
  border-radius: 14px;
}

.seo-plan--free {
  padding-bottom: 35px;
  background: linear-gradient(180deg, #e9e9e9, #f4f4f4);
}

.seo-plan--medium {
  background: linear-gradient(180deg, #616161, #737373);
  color: #fff;
}

.seo-plan--paid {
  background: linear-gradient(180deg, #f34100, #f66618);
  color: #fff;
}

.seo-plan__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 311px;
  align-items: start;
  gap: 28px;
}

.seo-plan__intro {
  min-width: 0;
}

.seo-plan__heading-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.seo-plan__name {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.174;
  text-transform: uppercase;
}

.seo-plan--paid .seo-plan__name {
  font-family: "SEO Involve", "SEO Raleway", sans-serif;
  line-height: 1.1;
}

.seo-plan__subtitle {
  margin: 8px 0 0;
  font-family: "SEO Comfortaa", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.115;
}

.seo-plan__info {
  flex: 0 0 24px;
  display: block;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.seo-plan__info img {
  display: block;
  width: 24px;
  height: 24px;
}

.seo-plan__action {
  min-width: 0;
}

.seo-plan__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  padding: 10px 12px;
  border: 0;
  border-radius: 3px;
  background: #fff;
  color: #000;
  font-family: "SEO Comfortaa", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  text-decoration: none;
}

.seo-plan--free .seo-plan__button {
  background: #ed5026;
  color: #fff;
}

.seo-plan__button:hover {
  filter: brightness(0.95);
}

.seo-plan__price {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: lining-nums;
  line-height: 1.174;
  text-align: center;
  white-space: nowrap;
}

.seo-plan__price span {
  white-space: nowrap;
}

.seo-plan__details {
  margin-top: 14px;
  margin-right: -62px;
  padding-right: 62px;
}

.seo-plan--paid .seo-plan__details {
  margin-top: 33px;
}

.seo-plan__summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  width: max-content;
  min-height: 19px;
  margin-left: auto;
  margin-right: -62px;
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  list-style: none;
  cursor: pointer;
}

.seo-plan__summary::-webkit-details-marker {
  display: none;
}

.seo-plan__chevron {
  display: block;
  width: 26px;
  height: 14px;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.seo-plan__details[open] .seo-plan__chevron {
  transform: rotate(180deg);
}

.seo-plan__less,
.seo-plan__details[open] .seo-plan__more {
  display: none;
}

.seo-plan__details[open] .seo-plan__less {
  display: inline;
}

.seo-plan__details[data-expanded="false"] .seo-plan__chevron { transform: rotate(0); }
.seo-plan__details[data-expanded="false"] .seo-plan__more { display: inline; }
.seo-plan__details[data-expanded="false"] .seo-plan__less { display: none; }

.seo-plan__checks {
  display: grid;
  gap: 40px;
  margin-top: 32px;
  padding-bottom: 20px;
}

.seo-plan__checks--free {
  margin-top: 36px;
  padding-bottom: 0;
}

.seo-plan__check-group {
  display: grid;
  grid-template-columns: 195px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}

.seo-plan__check-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.174;
}

.seo-plan__items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: 20px;
  line-height: 25px;
  list-style: none;
}

.seo-plan__items li {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.seo-plan__checks--free .seo-plan__items {
  line-height: 1.174;
  transform: translateY(-2px);
}

.seo-plan__button:focus-visible,
.seo-plan__info:focus-visible,
.seo-plan__summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

#form_feedback_site_creative {
  scroll-margin-top: 130px;
}

@media (min-width: 1151px) and (max-width: 1600px) {
  .seo-plan {
    padding-inline: 40px;
  }

  .seo-plan__summary {
    margin-right: -10px;
  }

  .seo-plan__details {
    margin-right: -10px;
    padding-right: 10px;
  }
}

@media (max-width: 1100px) {
  .seo-plan {
    padding: 32px;
  }

  .seo-plan__header {
    grid-template-columns: minmax(0, 1fr) 260px;
  }

  .seo-plan__summary {
    margin-right: 0;
  }

  .seo-plan__details {
    margin-right: 0;
    padding-right: 0;
  }

  .seo-plan__price {
    white-space: normal;
  }

  .seo-plan__subtitle {
    font-size: 18px;
    line-height: 1.35;
  }

  .seo-plan__check-group {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .seo-plan__check-title br {
    display: none;
  }

  .seo-plan__items {
    font-size: 18px;
  }
}

@media (max-width: 760px) {
  .seo-pricing {
    max-width: 604px;
    margin-top: 64px;
    padding-inline: 24px;
  }

  .seo-pricing__title {
    margin-bottom: 32px;
    font-size: 28px;
  }

  .seo-plan {
    padding: 24px;
  }

  .seo-plan__header {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .seo-plan__name {
    font-size: 26px;
  }

  .seo-plan__subtitle {
    font-size: 16px;
    line-height: 1.4;
  }

  .seo-plan__price {
    font-size: 18px;
    line-height: 1.35;
  }

  .seo-plan__details,
  .seo-plan--paid .seo-plan__details {
    margin-top: 24px;
  }

  .seo-plan__checks,
  .seo-plan__checks--free {
    gap: 28px;
    margin-top: 24px;
    padding-bottom: 0;
  }

  .seo-plan__check-title,
  .seo-plan__items {
    font-size: 17px;
    line-height: 1.4;
  }

  .seo-plan__items {
    gap: 8px 18px;
  }

  .seo-plan__checks--free .seo-plan__items {
    line-height: 1.4;
    transform: none;
  }
}

@media (max-width: 400px) {
  .seo-pricing {
    padding-inline: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seo-audit__art, .seo-audit__key { transform: none; }
  .seo-plan__chevron { transition: none; }
}

/* До 1600 px — реальные размеры 70% от большого десктопа. */
@media (max-width: 1600px) {
  .seo-audit { max-width: 828.8px; padding-inline: 15.4px; font-size: 14px; }
  .seo-audit__title { margin-bottom: 28.55px; font-size: 21px; }
  .seo-audit__body { grid-template-columns: minmax(0, 340.2px) minmax(0, 1fr); gap: 109.9px; }
  .seo-audit__copy { padding: 18.2px 0 0 12.6px; }
  .seo-audit__label { margin: 18.2px 0 10.5px; font-size: 14px; line-height: 14px; }
  .seo-audit__brush { top: -5.6px; left: -12.6px; width: 185.5px; height: 25.9px; }
  .seo-audit__art { width: calc(100% + 14.8px); max-width: 362.7px; margin-top: -20.3px; }
  .seo-benefits, .seo-pricing { max-width: 954.8px; padding-inline: 14px; margin-inline: auto; }
  .seo-benefits { margin-top: 40.6px; font-size: 11.2px; }
  .seo-benefits__title { margin-bottom: 28px; font-size: 21px; }
  .seo-benefits__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .seo-benefit { min-height: 126px; padding: 21.7px 16.1px; border-radius: 9.8px; }
  .seo-benefit__text { max-width: 179.2px; }
  .seo-benefit:last-child .seo-benefit__text { max-width: 165.2px; }
  .seo-benefit__highlight { margin-top: 4.2px; font-size: 15.4px; }
  .seo-benefit__number { right: 6.3px; bottom: 6.3px; width: 42px; height: 42px; font-size: 29.4px; }
  .seo-pricing { margin-top: 84px; font-size: 14px; }
  .seo-pricing__title { width: 185.5px; margin-bottom: 28px; font-size: 21px; }
  .seo-pricing__title img { width: 185.5px; height: 37.1px; }
  .seo-pricing__list { gap: 14px; }
  .seo-plan { padding: 28px 64.4px 14px; border-radius: 9.8px; }
  .seo-plan--free { padding-bottom: 24.5px; }
  .seo-plan__header { grid-template-columns: minmax(0, 1fr) 217.7px; gap: 19.6px; }
  .seo-plan__heading-row { gap: 14px; }
  .seo-plan__name { font-size: 21px; }
  .seo-plan__subtitle { margin-top: 5.6px; font-size: 14px; line-height: 1.115; }
  .seo-plan__info { flex-basis: 16.8px; width: 16.8px; height: 16.8px; }
  .seo-plan__info img { width: 16.8px; height: 16.8px; }
  .seo-plan__button { min-height: 25.2px; padding: 7px 8.4px; font-size: 11px; line-height: 11.2px; }
  .seo-plan__price { margin-top: 2.8px; font-size: 14px; line-height: 1.174; white-space: nowrap; }
  .seo-plan__details { margin-top: 9.8px; margin-right: -43.4px; padding-right: 43.4px; }
  .seo-plan--paid .seo-plan__details { margin-top: 23.1px; }
  .seo-plan__summary { min-height: 14px; margin-right: -43.4px; gap: 12.6px; font-size: 12px; line-height: 14px; }
  .seo-plan__chevron { width: 18.2px; height: 9.8px; }
  .seo-plan__checks { margin-top: 22.4px; padding-bottom: 14px; gap: 28px; }
  .seo-plan__checks--free { margin-top: 25.2px; padding-bottom: 0; }
  .seo-plan__check-group { grid-template-columns: 136.5px minmax(0, 1fr); gap: 14px; }
  .seo-plan__check-title { font-size: 14px; }
  .seo-plan__items { gap: 2.8px 12.6px; font-size: 14px; line-height: 17.5px; }
}
/* Одинаковые боковые поля сохраняют центр и место для фиксированного меню. */
@media (min-width: 1151px) and (max-width: 1300px) {
  .seo-benefits, .seo-pricing { max-width: calc(100% - 360px); }
  .seo-audit { max-width: min(828.8px, calc(100% - 360px)); }
  .seo-audit__body { gap: 60px; }
  .seo-plan { padding-inline: 28px; }
  .seo-plan__summary { margin-right: -7px; }
  .seo-plan__details { margin-right: -7px; padding-right: 7px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .seo-audit__body { gap: 48px; }
  .seo-plan { padding-inline: 28px; }
  .seo-plan__summary { margin-right: -7px; }
  .seo-plan__details { margin-right: -7px; padding-right: 7px; }
  .seo-plan__check-title br { display: initial; }
}
@media (max-width: 760px) {
  .seo-audit, .seo-benefits, .seo-pricing { max-width: 422.8px; padding-inline: 16.8px; }
  .seo-audit { font-size: 14px; line-height: 1.45; }
  .seo-audit__title { font-size: 22px; margin-bottom: 20px; }
  .seo-audit__body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .seo-audit__copy { padding: 0; }
  .seo-audit__art { width: 100%; max-width: 315px; margin: 0 auto; }
  .seo-audit__label { margin-block: 20px 16px; }
  .seo-benefits { margin-top: 34px; font-size: 13px; line-height: 1.3; }
  .seo-benefits__title { margin-bottom: 20px; font-size: 21px; }
  .seo-benefits__list { grid-template-columns: minmax(0, 1fr); }
  .seo-benefit { padding: 17px 60px 17px 16px; }
  .seo-benefit__text, .seo-benefit:last-child .seo-benefit__text { max-width: none; }
  .seo-pricing { margin-top: 45px; }
  .seo-pricing__title { margin-bottom: 24px; }
  .seo-plan { padding: 16.8px; }
  .seo-plan__header { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .seo-plan__subtitle { font-size: 14px; line-height: 1.4; }
  .seo-plan__info { flex-basis: 24px; width: 24px; height: 24px; }
  .seo-plan__info img { width: 24px; height: 24px; }
  .seo-plan__button { min-height: 40px; font-size: 12px; line-height: 16px; }
  .seo-plan__price { font-size: 14px; line-height: 1.35; white-space: normal; }
  .seo-plan__details, .seo-plan--paid .seo-plan__details { margin: 17px 0 0; padding-right: 0; }
  .seo-plan__summary { min-height: 24px; margin-right: 0; }
  .seo-plan__checks, .seo-plan__checks--free { margin-top: 17px; padding-bottom: 0; gap: 20px; }
  .seo-plan__check-group { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .seo-plan__check-title, .seo-plan__items { font-size: 14px; line-height: 1.4; }
  .seo-plan__items { gap: 6px 13px; }
}