/* Единая геометрия hero на всех страницах, кроме кейсов. */
@media (min-width:901px){
  .hero,
  .ip-hero{
    min-height:0!important;
  }

  .ip-hero{padding-top:64px!important;padding-bottom:96px!important}

  .hero .shell,
  .ip-hero .shell{
    grid-template-columns:repeat(12,minmax(0,1fr))!important;
    column-gap:var(--gutter)!important;
  }

  .ip-hero .shell{position:relative!important}

  .hero-copy,
  .ip-hero .head-col,
  .ip-hero .head-col.w9,
  .ip-hero .head-col.w10,
  .consult-hero .head-col.w9{
    grid-column:1 / span 7!important;
    min-width:0;
  }

  .hero-copy{grid-column:1 / span 8!important}
  .hero-copy h1{font-size:clamp(36px,4.25vw,62px)!important}

  .hero .shell{padding-bottom:96px!important}

  .ip-hero .head-col{position:relative;z-index:1}

  .ip-hero .head-col p,
  .ip-hero .head-col.w9 p,
  .ip-hero .head-col.w10 p,
  .consult-hero .head-col p,
  .hero-sub{
    max-width:56ch!important;
  }


  .ip-hero-art,
  .seo-hero-art,
  .consult-hero-art,
  .ppc-hero-art,
  .industry-hero-art{
    position:absolute!important;
    z-index:auto!important;
    display:flex!important;
    top:0;
    right:0;
    bottom:0;
    width:calc(41.666% - 16px)!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:0;
    padding:0 0 0 16px!important;
    pointer-events:none;
  }

  .ip-hero-art img,
  .seo-hero-art img,
  .consult-hero-art img,
  .ppc-hero-art img{
    display:block;
    height:auto;
    max-width:none!important;
    max-height:none!important;
    object-fit:contain;
  }

  .industry-hero-art img{display:block;width:390px!important;max-width:none!important;max-height:500px!important;height:auto;object-fit:contain}

  /* У файлов разное прозрачное поле: размеры выравнивают видимую фигуру. */
  .ip-hero-art img{width:534px!important}
  .seo-hero-art img{width:509px!important}
  .consult-hero-art img{width:542px!important}
  .ppc-hero-art img{width:538px!important}
  .about-hero-art{transform:translateX(34px)}
  .about-hero-art img{width:500px!important}

  .hero-art{
    position:absolute!important;
    z-index:-1!important;
    top:48px!important;
    right:0!important;
    bottom:48px!important;
    width:520px!important;
    height:520px!important;
    display:flex!important;
    align-items:flex-end!important;
    justify-content:center!important;
    pointer-events:none;
  }

  .hero-art img{
    display:block;
    width:514px!important;
    max-width:none!important;
    max-height:none!important;
    height:auto;
    object-fit:contain;
  }
}

@media (min-width:901px){
  .consult-hero .head-col.w9{grid-column:1 / span 7!important}
  .consult-hero h1{font-size:clamp(36px,4.1vw,60px)!important}
  .consult-hero-art{justify-content:center!important;padding-left:16px!important;transform:translate(40px,-32px)}
  .consult-hero-art img{width:540px!important}
}

.ip-hero{
  background:var(--lilac)!important;
}

.hero-line{display:block}

.btn-primary{
  transition:background-color .2s ease,color .2s ease,transform .2s ease!important;
}

.btn-primary:hover,
.btn-primary:focus-visible{
  background:var(--graphite)!important;
  color:var(--white)!important;
}

/* На цветных подложках белые поля отделяются самой заливкой: серая
   рамка не нужна. Состояния фокуса и ошибки остаются акцентными.
   Форму Битрикс24 (.lead-b24) не трогаем: !important здесь перебил бы
   красную рамку её ошибок, а рамок у неё и так нет. То же для форм SMM,
   репутации и контент-завода. */
:where(
  .lead-form:not(.lead-b24),
  #smm-demo-form:not(.sm-b24),
  #free-form:not(.fr-b24),
  #af-plan-form:not(.af-b24),
  #review .pg-ms-form,
  #calc .pg-offer.has-form,
  .pg-plate form,
  .pg-cta.is-plate form
) :where(input,select,textarea,.sel-btn){
  border-color:transparent!important;
}

:where(
  .lead-form,
  #smm-demo-form,
  #free-form,
  #af-plan-form,
  #review .pg-ms-form,
  #calc .pg-offer.has-form,
  .pg-plate form,
  .pg-cta.is-plate form
) :where(input,select,textarea,.sel-btn):focus,
:where(
  .lead-form,
  #smm-demo-form,
  #free-form,
  #af-plan-form,
  #review .pg-ms-form,
  #calc .pg-offer.has-form,
  .pg-plate form,
  .pg-cta.is-plate form
) .sel-btn[aria-expanded="true"]{
  border-color:var(--accent)!important;
}

:where(
  .lead-form,
  #smm-demo-form,
  #free-form,
  #af-plan-form,
  #review .pg-ms-form,
  #calc .pg-offer.has-form,
  .pg-plate form,
  .pg-cta.is-plate form
) .field.err :where(input,select,textarea,.sel-btn){
  border-color:var(--red)!important;
}

@media (max-width:900px){
  .hero,
  .ip-hero{
    min-height:0!important;
  }

  /* Базовое .ip-hero{padding:40px 0 0} страниц оставляет кнопку вплотную
     к краю лиловой подложки. Консалтинг и контакты задают свой отступ. */
  .ip-hero:not(.consult-hero){padding-bottom:72px!important}

  .hero-copy,
  .ip-hero .head-col,
  .ip-hero .head-col.w9,
  .ip-hero .head-col.w10,
  .consult-hero .head-col.w9{
    grid-column:1 / -1!important;
  }

  .hero-art,
  .ip-hero-art,
  .seo-hero-art,
  .consult-hero-art,
  .ppc-hero-art{
    display:none!important;
  }

  .industry-hero-art{display:none!important}
}