@import url("constructor-v3-battle-v2.css");

/*
 * Fidelity layer v3.
 * Shared component corrections discovered by the production/home comparison.
 * Page-sequence geometry stays in home-copy-v3.css.
 */

@font-face{
  font-family:"Montserrat-black";
  src:url("assets/montserrat-bold.woff") format("woff");
  font-display:swap;
  font-style:normal;
  font-weight:700 900;
}

.hero-block h1,
.hero-block h2{
  font-family:"Montserrat-black",Arial,sans-serif;
}

.section-title>span,
.discount-title>span{
  font-family:"Montserrat-black",Arial,sans-serif;
}

.site-header-demo{
  position:absolute;
  inset:0 0 auto;
  z-index:1000;
  min-height:80px;
  padding:10px 40px;
  gap:0;
  background:transparent;
}
.site-header-demo .site-logo{
  flex:0 0 330px;
}
.site-header-demo .site-logo img{
  display:block;
  width:300px;
  height:auto;
}
.site-header-demo>nav{
  position:absolute;
  top:10px;
  left:50%;
  display:flex;
  width:720px;
  min-height:60px;
  margin:0;
  flex-wrap:wrap;
  align-content:center;
  align-items:center;
  justify-content:flex-start;
  gap:0 30px;
  margin-left:-360px;
  transform:none;
}
.site-header-demo nav>a,
.site-header-demo nav summary{
  padding:6px 0;
  color:#e68125;
  font-family:Montserrat,Arial,sans-serif;
  font-size:14px;
  font-weight:600;
  line-height:18px;
  text-align:center;
  text-decoration:none;
}
.site-header-demo nav>a:nth-child(3){
  max-width:none;
}
.site-header-demo .menu-dropdown>summary{
  list-style:none;
}
.site-header-demo .menu-dropdown>summary::-webkit-details-marker{
  display:none;
}
.site-header-demo .menu-dropdown>summary::after{
  content:none;
}
.site-header-demo .header-socials{
  display:flex;
  gap:14px;
  margin-left:auto;
}
.site-header-demo .header-socials a{
  display:block;
  width:30px;
  height:30px;
  background:none;
}
.site-header-demo .header-socials svg{
  display:block;
  width:30px;
  height:30px;
  fill:#e68125;
}
.site-header-demo .header-consult{
  display:grid;
  place-items:center;
  width:260px;
  height:40px;
  min-height:40px;
  margin-left:35px;
  border:4px solid #e68125;
  border-radius:8px;
  background:#f3f2f2;
  color:#1b1b1b;
  font-family:Montserrat,Arial,sans-serif;
  font-size:14px;
  font-weight:500;
  text-decoration:none;
}

.site-header-demo .menu-dropdown>div.services-mega{
  position:fixed;
  top:61px;
  left:50%;
  display:grid;
  grid-template-columns:172px 172px 190px minmax(0,1fr);
  gap:30px;
  width:min(1100px,calc(100vw - 40px));
  min-height:626px;
  padding:26px 30px 24px;
  border:0;
  border-radius:0 0 14px 14px;
  background:#fff;
  box-shadow:0 26px 55px rgba(0,0,0,.16);
  transform:translateX(-50%);
}
.services-mega__column{
  min-width:0;
}
.services-mega__column h2,
.services-mega__column .services-mega__title{
  margin:0 0 12px;
  padding:0 0 7px;
  border-bottom:2px solid #f09b4e;
  color:#e68125;
  font-family:Montserrat,Arial,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
  line-height:14px;
  text-align:center;
  text-transform:uppercase;
}
.services-mega__column h2:not(:first-child),
.services-mega__column .services-mega__title:not(:first-child){
  margin-top:20px;
}
.services-mega__column ul{
  margin:0;
  padding:0;
  list-style:none;
}
.services-mega__column--wide ul{
  columns:2;
  column-gap:26px;
}
.services-mega__column li{
  margin:0;
  padding:0;
  break-inside:avoid;
}
.services-mega__column a,
.services-mega__column span{
  display:block;
  padding:5px 0;
  font-family:Montserrat,Arial,sans-serif;
  font-size:14px;
  line-height:18.3px;
  text-align:left;
  text-decoration:none;
}
.site-header-demo .menu-dropdown>div.services-mega .services-mega__column a,
.site-header-demo .menu-dropdown>div.services-mega .services-mega__column span{
  padding:5px 0;
  font-family:Montserrat,Arial,sans-serif;
  font-size:14px;
  font-weight:600;
  line-height:18.48px;
}
.site-header-demo .menu-dropdown>div.services-mega .services-mega__column span{
  font-weight:500;
}
.services-mega__column a{
  color:#1b1b1b;
  font-weight:600;
}
.services-mega__column span{
  color:#e2e2e2;
  font-weight:500;
}

@media(max-width:1599px) and (min-width:901px){
  .site-header-demo>nav{
    top:16px;
    left:386px;
    width:590px;
    margin-left:0;
    align-content:flex-start;
    transform:none;
  }
  .site-header-demo>nav>a:nth-last-child(2){
    margin-left:210px;
  }
  .site-header-demo>nav>a:nth-last-child(-n+2){
    transform:translateY(-12px);
  }
}

.section-title{
  min-height:164px;
  padding:54px 0 22px;
}
.section-title>span{
  bottom:23px;
  color:#e2e2e2;
  font-size:134px;
  line-height:.68;
  opacity:.15;
}
.section-title h2{
  color:#e68125;
  font-family:Montserrat,Arial,sans-serif;
  font-size:52px;
  font-weight:700;
  line-height:1;
}

.hero-audit-cta{
  gap:16px;
}
/* Оператор, сообщение 7: значок телеграма «залезает на букву П целиком».
   Замер: иконка 36x36 в кнопке высотой 50, текст кончается на 262, значок
   начинается на 274 — двенадцати пикселей мало, на узких ширинах строка
   догоняет значок. На бою значка ВНУТРИ кнопки нет вовсе, там отдельный
   элемент 30x30 рядом. Уменьшаем и разводим. */
.hero-audit-cta img{
  width:28px;
  height:28px;
}

.battle-video-grid iframe,
.wide-video iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}

.addon-grid{
  gap:40px;
}
.addon-grid article{
  position:relative;
  min-height:335px;
  padding:25px 18px 22px;
  border:2px solid #e2e2e2;
  border-radius:7px;
}
.addon-grid h3{
  display:inline-block;
  width:max-content;
  max-width:100%;
  padding-bottom:7px;
  border-bottom:4px solid #e68125;
  font-size:24px;
  line-height:1.15;
}
.addon-grid p{
  color:#1b1b1b;
  font-size:16px;
  line-height:1.45;
}
.addon-grid strong{
  font-size:24px;
}
.addon-grid .addon-icon{
  position:absolute;
  top:-20px;
  right:18px;
  width:70px;
  height:70px;
}
.addon-grid .addon-icon img{
  width:70px;
  height:70px;
}
.addon-grid .btn,
.addon-grid .btn--outline{
  width:155px;
  border-color:#e68125;
  background:#e68125;
  color:#fff;
  font-weight:400;
}

.faq{
  border:0;
}
.faq details{
  position:relative;
  border:0;
}
.faq summary{
  position:relative;
  min-height:82px;
  padding:20px 46px 20px 30px;
  list-style:none;
  font-size:24px;
  font-weight:500;
  line-height:1.3;
}
.faq summary::-webkit-details-marker{
  display:none;
}
.faq summary::after{
  content:"+";
  position:absolute;
  top:10px;
  right:25px;
  color:#e68125;
  font-size:42px;
  font-weight:300;
  line-height:1;
}
.faq details[open] summary::after{
  content:"×";
}
.faq details>div{
  padding:0 30px 38px;
}
.faq details>div ul{
  margin:0;
  padding-left:20px;
}
.faq details>div li{
  margin:5px 0;
  font-size:16px;
  line-height:1.55;
}
.faq details>p{
  margin:0;
  padding:0 30px 25px;
}

@media(max-width:900px){
  .mobile-menu-demo[open]::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:1098;
    background:rgba(0,0,0,.82);
  }
  .site-header-demo .mobile-menu-demo>summary{
    position:fixed;
    top:16px;
    right:16px;
    z-index:1101;
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    padding:0;
  }
  .site-header-demo .mobile-menu-demo[open]>summary i{
    position:absolute;
    width:24px;
    height:2px;
    margin:0;
    background:#e68125;
    transform:rotate(45deg);
  }
  .site-header-demo .mobile-menu-demo[open]>summary i:nth-child(2){
    transform:rotate(-45deg);
  }
  .site-header-demo .mobile-menu-demo[open]>summary i:nth-child(3){
    display:none;
  }
  .site-header-demo .mobile-menu-demo[open]>summary{
    right:8px;
    border:0;
    background:transparent;
    box-shadow:none;
  }
  .site-header-demo .mobile-menu-demo>.mobile-menu-panel{
    position:fixed;
    top:0;
    right:0;
    z-index:1100;
    display:block;
    width:300px;
    height:100dvh;
    min-height:685px;
    padding:0;
    border:0;
    background:#fff;
    box-shadow:none;
  }
  .mobile-menu-panel .mobile-menu-logo{
    position:absolute;
    top:40px;
    left:34px;
    display:block;
    width:221px;
    padding:0;
  }
  .mobile-menu-panel .mobile-menu-logo img{
    width:221px;
    height:auto;
  }
  .site-header-demo .mobile-menu-panel>nav{
    position:absolute;
    top:99px;
    right:40px;
    left:auto;
    display:grid;
    width:auto;
    min-height:0;
    margin:0;
    gap:51px;
    transform:none;
  }
  .site-header-demo .mobile-menu-panel>nav>a{
    padding:0;
    color:#e68125;
    font-family:Montserrat,Arial,sans-serif;
    font-size:16px;
    font-weight:400;
    line-height:25px;
    text-align:right;
    white-space:nowrap;
  }
  .mobile-menu-footer{
    position:absolute;
    right:15px;
    bottom:38px;
    display:flex;
    width:245px;
    flex-direction:column;
    align-items:stretch;
  }
  .mobile-menu-socials{
    display:flex;
    align-self:flex-end;
    gap:10px;
    margin:0 35px 29px 0;
  }
  .site-header-demo .mobile-menu-socials a{
    display:block;
    width:30px;
    height:30px;
    padding:0;
  }
  .mobile-menu-socials svg{
    width:30px;
    height:30px;
    fill:#e68125;
  }
  .site-header-demo .mobile-menu-consult{
    display:grid;
    place-items:center;
    width:245px;
    height:44px;
    padding:0;
    border:3px solid #e68125;
    border-radius:8px;
    color:#1b1b1b;
    font-family:Montserrat,Arial,sans-serif;
    font-size:14px;
    font-weight:400;
    line-height:20px;
    text-decoration:none;
  }
  .section-title h2{
    font-size:52px;
  }
  .battle-tariffs{
    width:425px;
    max-width:calc(100% - 40px);
    margin-inline:auto;
  }
  .battle-tariffs .tariff,
  .battle-tariffs .tariff--featured{
    width:100%;
    min-height:574px;
    padding:42px 40px 50px;
  }
  .battle-tariffs .tariff--featured{
    min-height:550px;
  }
  .battle-tariffs .tariff:nth-child(3){
    min-height:573px;
  }
  .battle-tariffs .tariff-action{
    display:grid;
    justify-items:start;
    gap:24px;
    margin-right:0;
  }
  .battle-tariffs .tariff-action .btn{
    order:2;
    width:auto;
  }
  .addon-grid{
    gap:40px;
  }
}

@media(max-width:640px){
  .site-header-demo .mobile-menu-demo>.mobile-menu-panel{
    height:685px;
  }
  .mobile-menu-panel .mobile-menu-logo{
    top:35px;
    left:18px;
    width:250px;
  }
  .mobile-menu-panel .mobile-menu-logo img{
    width:250px;
  }
  .site-header-demo .mobile-menu-panel>nav{
    top:99px;
    right:25px;
  }
  .mobile-menu-footer{
    right:15px;
  }
  .mobile-menu-socials{
    margin-right:15px;
  }
  .section-title{
    min-height:105px;
    padding:20px 0 12px;
  }
  .section-title>span{
    left:50%;
    bottom:43px;
    font-size:52px;
    transform:translateX(-50%);
  }
  .section-title h2{
    font-size:32px;
    line-height:1;
  }
  .battle-tariffs{
    width:280px;
    max-width:calc(100% - 40px);
  }
  .battle-tariffs .tariff,
  .battle-tariffs .tariff--featured,
  .battle-tariffs .tariff:nth-child(3){
    min-height:480px;
    padding:20px 14px 34px;
  }
  .battle-tariffs .tariff--featured{
    min-height:474px;
  }
  .battle-tariffs .tariff-action .btn{
    width:100%;
  }
  .addon-grid article{
    min-height:345px;
    padding:20px 30px 28px;
  }
  .addon-grid h3{
    font-size:24px;
  }
  .addon-grid p{
    font-size:15px;
  }
  .faq summary{
    min-height:82px;
    padding:20px 45px 20px 26px;
    font-size:18px;
    font-weight:600;
    line-height:1.3;
  }
  .faq summary::after{
    top:18px;
    right:20px;
    font-size:32px;
  }
  .faq details>div{
    padding:0 26px 28px;
  }
  .faq details>div li{
    font-size:14px;
    line-height:1.45;
  }
}