/* =========================
   ON-NEWS DESIGN TOKENS
   ========================= */
:root{
  --on-yellow:#F8D949;
  --on-yellow-hover:#F3D13A;
  --on-yellow-soft:#fffbea;
  --on-yellow-bg:#fffef5;
  --on-navy:#081735;
  --on-text:#52627a;
  --on-muted:#7a879b;
  --on-bg:#f7f9fc;
  --on-bg-blue:#f5f8fd;
  --on-border:#e3e9f2;
  --on-shadow-sm:0 8px 24px rgba(8,23,53,.035);
  --on-shadow-md:0 14px 34px rgba(8,23,53,.08);
}

/* =========================
   SHARED BASE
   ========================= */
.on-hero,
.on-categories,
.on-popular,
.on-process,
.on-guarantees,
.on-clients,
.on-faq,
.on-cta,
.on-seo{
  font-family:'Manrope', Arial, sans-serif;
}

.on-hero__inner,
.on-categories__inner,
.on-popular__inner,
.on-process__inner,
.on-guarantees__inner,
.on-clients__inner,
.on-faq__inner{
  max-width:1240px;
  margin:0 auto;
  padding-left:34px;
  padding-right:34px;
}

.on-categories__title,
.on-popular__title{
  margin:0;
  font-size:22px;
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.5px;
  color:var(--on-navy);
}

.on-process__title,
.on-guarantees__title,
.on-clients__title,
.on-faq__title,
.on-seo__title{
  margin:0;
  font-size:28px;
  line-height:1.12;
  font-weight:800;
  letter-spacing:-.8px;
  color:var(--on-navy);
}

.on-clients__subtitle,
.on-faq__subtitle{
  max-width:680px;
  margin:10px 0 0;
  font-size:14px;
  line-height:1.55;
  font-weight:500;
  letter-spacing:-.1px;
  color:#64748b;
}

.on-category-card,
.on-media-card,
.on-guarantee,
.on-client-card,
.on-faq__item{
  background:#fff;
  border:1px solid var(--on-border);
  box-shadow:var(--on-shadow-sm);
  box-sizing:border-box;
}

.on-hero__trust-icon svg,
.on-category-card__icon svg,
.on-process__icon svg,
.on-guarantee__icon svg,
.on-clients__arrow svg,
.on-faq__plus svg,
.on-cta__benefit-icon svg,
.on-cta__check svg,
.on-seo__toggle svg{
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.on-hero{
  width:100%;
  background:#fff;
  padding:50px 0 40px;
  overflow:hidden;
}

.on-hero__inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,45%) 150px minmax(0,55%);
  align-items:center;
  gap:0;
}

.on-hero h1{
  margin:0 0 18px;
  font-size:52px;
  line-height:1.03;
  font-weight:800;
  letter-spacing:-1.8px;
  color:var(--on-navy);
}

.on-hero h1 span{
  color:#F8D949;
}

.on-hero__subtitle{
  margin:0 0 20px;
  font-size:23px;
  line-height:1.25;
  color:var(--on-navy);
}

.on-hero__text{
  margin:0 0 28px;
  font-size:16px;
  line-height:1.65;
  color:#2b3e5c;
}

.on-hero__buttons{
  display:flex;
  gap:14px;
  margin-bottom:30px;
}

.on-hero__btn{
  min-height:52px;
  padding:0 28px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  text-align:center;
  font-size:14px;
  line-height:1.2;
  font-weight:700;
  box-sizing:border-box;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease,
    border-color .2s ease;
}

.on-hero__btn:hover{
  transform:translateY(-2px);
}

.on-hero__btn--yellow{
  background:var(--on-yellow);
  color:var(--on-navy);
  box-shadow:0 12px 30px rgba(255,228,0,.24);
}

.on-hero__btn--yellow:hover{
  box-shadow:0 16px 34px rgba(255,228,0,.32);
}

.on-hero__btn--outline{
  background:#fff;
  color:var(--on-navy);
  border:1.5px solid #d7dee8;
  box-shadow:0 8px 20px rgba(8,23,53,.04);
}

.on-hero__btn--outline:hover{
  background:#fff;
  border-color:#c5d0dd;
  box-shadow:0 12px 28px rgba(8,23,53,.08);
}

.on-hero__trust{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  max-width:600px;
}

.on-hero__trust-item{
  min-width:0;
}

.on-hero__trust-icon{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-bottom:10px;
  color:#F8D949;
}

.on-hero__trust-icon svg{
  width:22px;
  height:22px;
  stroke-width:1.9;
}

.on-hero__trust p{
  margin:0;
  font-size:12px;
  line-height:1.4;
  color:#2b3e5c;
}

/* HERO */

.on-hero__stats{
  position:relative;
  z-index:10;

  width:240px;

  transform:translate(130px,-18px);

  padding:22px 22px;

  background:rgba(245,248,255,.74);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  border:1px solid rgba(255,255,255,.75);

  border-radius:26px;

  box-shadow:
      0 20px 55px rgba(8,23,53,.10),
      inset 0 1px 0 rgba(255,255,255,.65);

  box-sizing:border-box;
}

.on-hero__stat{
  display:flex;
  align-items:flex-start;
  gap:13px;

  transition:
    transform .25s ease,
    opacity .25s ease;
}
.on-hero__stat:hover{
  transform:translateX(8px);
}

.on-hero__stat + .on-hero__stat{
  margin-top:22px;
}

.on-hero__stat-icon{
    width:42px;
    height:42px;
    flex:0 0 42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:12px;

    background:#FFFBEF;
    color:#F8D949;
}

.on-hero__stat-icon svg{
  display:block;

  width:28px;
  height:28px;

  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.on-hero__stat-title{
  margin:0;
  font-size:14px;
  line-height:1.25;
  font-weight:800;
  color:var(--on-navy);
}

.on-hero__stat-text{
  margin-top:3px;
  font-size:11px;
  line-height:1.35;
  color:var(--on-text);
}

/* HERO */

.on-hero__right{
  position:relative;
  z-index:2;

  min-width:0;
  min-height:500px;

  display:flex;
  align-items:center;
  justify-content:flex-start;

  /* hero */
  overflow:visible;

  padding-left:0;
}

.on-hero__image{
  display:block;

  width:150%;
  max-width:none;
  height:auto;

  object-fit:contain;

  transform:translateX(150px);

  margin-left:-70px;
  margin-right:-250px;
}

@media(max-width:1100px){
  .on-hero__inner{
    max-width:760px;
    grid-template-columns:1fr;
  }

  .on-hero__stats{
    width:100%;
    margin:34px 0 0;
    padding:0;
    transform:none;

    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px 16px;
  }

  .on-hero__stat + .on-hero__stat{
    margin-top:0;
  }

  .on-hero__right{
    min-height:auto;
    margin-top:32px;
    overflow:hidden;
  }

  .on-hero__image{
    width:118%;
    max-width:none;
    margin-left:20px;
    margin-right:-18%;
  }
}

@media(max-width:640px){
  .on-hero{
    padding:40px 0 36px;
  }

  .on-hero__inner{
    padding:0 20px;
  }

  .on-hero h1{
    margin-bottom:16px;
    font-size:36px;
    line-height:1.05;
    letter-spacing:-1px;
  }

  .on-hero__subtitle{
    margin-bottom:18px;
    font-size:21px;
  }

  .on-hero__text{
    margin-bottom:24px;
    font-size:15px;
    line-height:1.55;
  }

  .on-hero__text br{
    display:none;
  }

  .on-hero__buttons{
    flex-direction:column;
    gap:12px;
    margin-bottom:28px;
  }

  .on-hero__btn{
    width:100%;
    min-height:52px;
    padding:0 18px;
  }

  .on-hero__trust{
    grid-template-columns:repeat(2,1fr);
    gap:22px 16px;
  }

  .on-hero__right{
  display:none;
}

.on-hero__stats{
  display:none;
}
}
.on-categories{
  width:100%;
  padding:26px 0 34px;
  background:#fff;
}

.on-categories__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}

.on-categories__all{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--on-text);
  font-size:13px;
  line-height:1.2;
  font-weight:600;
  text-decoration:none;
  transition:
    color .22s ease,
    transform .22s ease;
}

.on-categories__all span{
  font-size:17px;
  line-height:1;
  transition:transform .22s ease;
}

.on-categories__all:hover{
  color:var(--on-navy);
}

.on-categories__all:hover span{
  transform:translateX(4px);
}

.on-categories__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.on-category-card{
  min-height:84px;
padding:12px 18px;
  display:flex;
  align-items:center;
  gap:16px;
  border-radius:14px;
  text-decoration:none;
}

.on-category-card:hover{
  transform:translateY(-4px);
  background:var(--on-yellow-bg);
  border-color:var(--on-yellow);
  box-shadow:0 16px 36px rgba(8,23,53,.09);
}

.on-category-card__icon{
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:var(--on-yellow-soft);
  color:#F8D949;
  transition:
    transform .25s ease,
    background .25s ease,
    color .25s ease;
}

.on-category-card:hover .on-category-card__icon{
  transform:scale(1.07);
  background:var(--on-yellow);
  color:var(--on-navy);
}

.on-category-card__icon svg{
  width:23px;
  height:23px;
  stroke-width:1.9;
}

.on-category-card__content{
  min-width:0;
  display:block;
}

.on-category-card__title{
  display:block;
  margin-bottom:6px;
  font-size:14px;
  line-height:1.28;
  font-weight:700;
  color:var(--on-navy);
}

.on-category-card__count{
  display:block;
  font-size:11px;
  line-height:1.2;
  color:var(--on-muted);
}

@media(max-width:1100px){
  .on-categories__grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:760px){
  .on-categories{
    padding:24px 0 30px;
  }

  .on-categories__inner{
    padding:0 20px;
  }

  .on-categories__head{
    margin-bottom:16px;
  }

  .on-categories__title{
    font-size:19px;
  }

  .on-categories__grid{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }

  .on-category-card{
    min-height:96px;
    padding:16px 14px;
  }
}

@media(max-width:480px){
  .on-categories__head{
    align-items:flex-start;
  }

  .on-categories__all{
    max-width:120px;
    justify-content:flex-end;
    text-align:right;
  }

  .on-categories__grid{
    grid-template-columns:1fr;
  }

  .on-category-card{
    min-height:auto;
  }
}
.on-popular{
  width:100%;
  padding:30px 0 42px;
  background:var(--on-bg);
}

.on-popular__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}

.on-popular__all{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  line-height:1.2;
  font-weight:600;
  color:var(--on-text);
  text-decoration:none;
  transition:color .22s ease;
}

.on-popular__all span{
  font-size:17px;
  line-height:1;
  transition:transform .22s ease;
}

.on-popular__all:hover{
  color:var(--on-navy);
}

.on-popular__all:hover span{
  transform:translateX(4px);
}

.on-popular__grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;
}

.on-media-card{
  min-width:0;
  padding:16px 14px 14px;
  display:flex;
  flex-direction:column;
  border:1px solid #e2e8f1;
  border-radius:14px;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.on-media-card:hover{
  transform:translateY(-5px);
  border-color:var(--on-yellow);
  box-shadow:0 18px 42px rgba(8,23,53,.10);
}

.on-media-card__main-link{
  display:block;
  color:inherit;
  text-decoration:none;
}

.on-media-card__logo{
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
  overflow:hidden;
}

.on-media-card__logo-text{
  display:inline-flex;
  align-items:flex-start;
  position:relative;
  white-space:nowrap;
  font-weight:800;
  color:var(--on-navy);
}

.on-media-card__logo-text sup{
  position:relative;
  top:-2px;
  margin-left:2px;
  font-size:9px;
  line-height:1;
}

.on-media-card__logo-text--mind{
  font-size:27px;
  letter-spacing:-1.5px;
}

.on-media-card__logo-text--rbc{
  gap:5px;
  font-size:15px;
  font-weight:700;
}

.on-media-card__logo-text--rbc i{
  width:13px;
  height:13px;
  display:inline-block;
  background:
    linear-gradient(
      90deg,
      var(--on-yellow) 0 33%,
      #2c78e8 33% 66%,
      #0d396e 66%
    );
}

.on-media-card__logo-text--focus{
  font-size:24px;
  color:#e31936;
  letter-spacing:-1px;
}

.on-media-card__logo-text--ain{
  font-size:31px;
  letter-spacing:-2px;
}

.on-media-card__logo-text--delo{
  font-size:25px;
  color:#171b68;
  letter-spacing:-1px;
}

.on-media-card__logo-text--segodnya{
  font-family:Georgia,serif;
  font-size:19px;
  color:#133a70;
}

.on-media-card__name{
  min-height:auto;
  margin-bottom:3px;
  font-size:12px;
  line-height:1.35;
  font-weight:700;
  color:#263752;
}

.on-media-card__domain{
  min-height:18px;
  padding-bottom:10px;
  margin-bottom:0;

  font-size:10px;
  line-height:1.3;
  font-weight:500;
  color:#8994a7;

  border-bottom:1px solid #edf1f6;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.on-media-card__metrics{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:9px 0 10px;
}

.on-media-card__metric{
  min-width:0;
}

.on-media-card__metric-label{
  display:block;
  margin-bottom:4px;
  font-size:10px;
  line-height:1.2;
  color:#8994a7;
}

.on-media-card__metric-value{
  display:block;
  font-size:13px;
  line-height:1;
  font-weight:800;
  color:var(--on-navy);
}

.on-media-card__bottom{
  min-height:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  margin-bottom:12px;
}

.on-media-card__link-type{
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:0 7px;
  border-radius:5px;
  background:#f0f8f1;
  color:#23783a;
  font-size:9px;
  line-height:1;
  font-weight:700;
}

.on-media-card__link-type--muted{
  background:#f1f3f6;
  color:#667085;
}

.on-media-card__price{
  font-size:9px;
  line-height:1.25;
  font-weight:700;
  color:var(--on-navy);
  text-align:right;
}

.on-media-card__button{
  width:100%;
  min-height:34px;
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  background:var(--on-yellow);
  color:var(--on-navy);
  font-size:11px;
  line-height:1;
  font-weight:800;
  text-decoration:none;
  box-sizing:border-box;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.on-media-card__button:hover{
  transform:translateY(-1px);
  background:var(--on-yellow-hover);
  box-shadow:0 8px 20px rgba(255,228,0,.28);
}
.on-popular__mobile-hint{
  display:none;
  margin-top:12px;
  align-items:center;
  justify-content:flex-end;
  gap:7px;

  font-size:11px;
  line-height:1.3;
  font-weight:500;
  color:var(--on-muted);
}

.on-popular__mobile-hint span{
  flex:0 0 auto;
  font-size:16px;
  line-height:1;
  color:#d4b800;
}

@media(max-width:1100px){
  .on-popular__grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:760px){
  .on-popular{
    padding:26px 0 34px;
  }

  .on-popular__inner{
    padding:0 20px;
  }

  .on-popular__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
}

@media(max-width:480px){
  .on-popular__head{
    align-items:flex-start;
  }

  .on-popular__all{
    max-width:130px;
    justify-content:flex-end;
    text-align:right;
  }

  .on-popular__grid{
    display:flex;
    gap:12px;
    margin-right:-20px;
    padding-right:20px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }

  .on-popular__grid::-webkit-scrollbar{
    display:none;
  }

  .on-media-card{
    min-width:205px;
    scroll-snap-align:start;
  }
  .on-popular__mobile-hint{
    display:flex;
}
}
.on-process{
  width:100%;
  padding:46px 0 52px;
  background:#fff;
}

.on-process__head{
  margin-bottom:28px;
  text-align:center;
}

.on-process__steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
}

.on-process__step{
  min-width:0;
  position:relative;
}

.on-process__top{
  display:flex;
  align-items:center;
  min-height:58px;
  margin-bottom:18px;
}

.on-process__icon{
  width:60px;
  height:60px;
  flex:0 0 60px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;
  background:#FFFBEF;
  border:1px solid rgba(248,217,73,.65);
  color:var(--on-yellow);

  box-shadow:0 10px 28px rgba(8,23,53,.06);

  position:relative;
  z-index:2;
}

.on-process__icon svg{
  width:26px;
  height:26px;
  stroke-width:1.8;
}

.on-process__arrow{
  flex:1 1 auto;
  height:16px;
  margin-left:22px;
  margin-right:22px;

  display:flex;
  align-items:center;
  justify-content:center;
}

.on-process__arrow svg{
  display:block;
  width:72%;
  height:16px;

  fill:none;
  stroke:#D9E2EF;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.on-process__step--last .on-process__arrow{
  display:none;
}

.on-process__step-title{
  margin:0 0 8px;
  min-height:0;
  font-size:15px;
  line-height:1.35;
  font-weight:800;
  color:var(--on-navy);
}

.on-process__text{
  max-width:220px;
  margin:0;
  font-size:12px;
  line-height:1.65;
  color:var(--on-text);
}

@media(max-width:1100px){
  .on-process__steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:34px 24px;
  }

  .on-process__step:nth-child(2) .on-process__arrow{
  display:none;
}

  .on-process__text{
    max-width:none;
  }
}

@media(max-width:640px){
  .on-process{
    padding:38px 0 42px;
  }

  .on-process__inner{
    padding:0 20px;
  }

  .on-process__head{
    margin-bottom:24px;
    text-align:left;
  }

  .on-process__title{
    font-size:22px;
  }

  .on-process__steps{
    grid-template-columns:1fr;
    gap:0;
  }

  .on-process__step{
    padding-bottom:30px;
  }

  .on-process__step:not(:last-child){
    margin-bottom:22px;
    border-bottom:1px solid #edf1f6;
  }

  .on-process__top{
    margin-bottom:14px;
  }

  .on-process__arrow{
    display:none;
}

  .on-process__step-title{
    min-height:0;
    font-size:16px;
  }

  .on-process__text{
    font-size:13px;
    line-height:1.6;
  }
}
.on-guarantees{
  width:100%;
  padding:42px 0 46px;
  background:var(--on-bg);
}

.on-guarantees__title{
  margin:0 0 22px;
  text-align:left;
}

.on-guarantees__grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
}

.on-guarantee{
  min-width:0;
  min-height:174px;
  padding:18px;
  display:flex;
  flex-direction:column;
  border-radius:16px;
  transition:
    border-color .24s ease,
    box-shadow .24s ease,
    background .24s ease;
}

.on-guarantee:hover{
  background:var(--on-yellow-bg);
  border-color:var(--on-yellow);
  box-shadow:var(--on-shadow-md);
}

.on-guarantee__icon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  margin-bottom:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  background:#FFFBEF;
  color:#F8D949;
}

.on-guarantee__icon svg{
  width:22px;
  height:22px;
  stroke-width:1.8;
}

.on-guarantee h3{
  margin:0 0 9px;
  font-size:14px;
  line-height:1.35;
  font-weight:800;
  color:var(--on-navy);
}

.on-guarantee p{
  margin:0;
  font-size:12px;
  line-height:1.55;
  color:var(--on-text);
}

@media(max-width:1100px){
  .on-guarantees__grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:760px){
  .on-guarantees{
    padding:34px 0 38px;
  }

  .on-guarantees__inner{
    padding:0 20px;
  }

  .on-guarantees__title{
    margin-bottom:18px;
    font-size:22px;
  }

  .on-guarantees__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .on-guarantee{
    min-height:165px;
    padding:16px;
  }
}

@media(max-width:480px){
  .on-guarantees__grid{
    grid-template-columns:1fr;
  }

  .on-guarantee{
    min-height:auto;
  }
}
.on-clients{
  width:100%;
  padding:42px 0 46px;
  background:#fff;
  overflow:hidden;
}

.on-clients__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:22px;
}

.on-clients__controls{
  display:flex;
  align-items:center;
  gap:8px;
}

.on-clients__arrow{
  width:40px;
  height:40px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--on-border);
  border-radius:12px;
  background:#fff;
  color:var(--on-navy);
  cursor:pointer;
  box-shadow:0 6px 18px rgba(8,23,53,.04);
  transition:
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.on-clients__arrow:hover{
  background:var(--on-yellow);
  border-color:var(--on-yellow);
  box-shadow:0 10px 24px rgba(255,228,0,.22);
}

.on-clients__arrow:disabled{
  opacity:.4;
  cursor:default;
  background:#fff;
  border-color:var(--on-border);
  box-shadow:none;
}

.on-clients__arrow svg{
  width:20px;
  height:20px;
  stroke-width:1.8;
}

.on-clients__viewport{
  width:100%;
  overflow:hidden;
}

.on-clients__track{
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}

.on-clients__track::-webkit-scrollbar{
  display:none;
}

.on-client-card{
  min-width:188px;
  height:104px;
  flex:0 0 188px;
  padding:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  scroll-snap-align:start;
  overflow:hidden;

  background:#fff;
  border:1px solid #e7edf6;
  border-radius:16px;

  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

.on-client-card:hover{
  background:#fff;
  border-color:var(--on-yellow);
  box-shadow:0 12px 28px rgba(8,23,53,.08);
}

.on-client-card__logo{
  display:block;
  width:120%;
  height:120%;
  object-fit:contain;
}

.on-client-card__fallback{
  max-width:150px;
  min-height:44px;
  display:none;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:25px;
  line-height:1;
  font-weight:800;
  letter-spacing:-1px;
  color:#162b68;
}

.on-client-card__fallback--yellow{
  min-height:42px;
  padding:0 12px;
  border-radius:5px;
  background:var(--on-yellow);
  color:var(--on-navy);
  font-size:24px;
}

.on-client-card__fallback--blue{
  color:#54a8db;
  font-size:24px;
}

.on-client-card__fallback--small{
  font-size:13px;
  line-height:1.2;
  letter-spacing:0;
  color:#353b45;
}

.on-clients__mobile-hint{
  display:none;
  margin-top:12px;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  font-size:11px;
  line-height:1.3;
  color:var(--on-muted);
}

.on-clients__mobile-hint span{
  font-size:16px;
  color:#d4b800;
}

@media(max-width:1100px){
  .on-client-card{
    min-width:180px;
    flex-basis:180px;
  }
}

@media(max-width:760px){
  .on-clients{
    padding:34px 0 38px;
  }

  .on-clients__inner{
    padding:0 20px;
  }

  .on-clients__head{
    align-items:flex-start;
    margin-bottom:18px;
  }

  .on-clients__title{
    font-size:22px;
  }

  .on-clients__subtitle{
    font-size:12px;
  }

  .on-clients__controls{
    display:none;
  }

  .on-clients__viewport{
    margin-right:-20px;
    width:calc(100% + 20px);
  }

  .on-clients__track{
    padding-right:20px;
  }

  .on-client-card{
    min-width:170px;
    height:96px;
    flex-basis:170px;
  }

  .on-clients__mobile-hint{
    display:flex;
  }
}
.on-faq{
  width:100%;
  padding:42px 0 50px;
  background:var(--on-bg);
}

.on-faq__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:22px;
}

.on-faq__contact{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:3px;
  font-size:11px;
  line-height:1.3;
  color:var(--on-muted);
  text-decoration:none;
}

.on-faq__contact span{
  font-size:13px;
  font-weight:700;
  color:var(--on-navy);
  transition:color .2s ease;
}

.on-faq__contact:hover span{
  color:#caae00;
}

.on-faq__list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 14px;
  align-items:start;
}

.on-faq__item{
  min-width:0;
  overflow:hidden;
  border-radius:14px;
  transition:
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

.on-faq__item:hover{
  border-color:#d9e1ec;
  box-shadow:0 12px 30px rgba(8,23,53,.06);
}

.on-faq__item--open{
  background:var(--on-yellow-bg);
  border-color:var(--on-yellow);
  box-shadow:0 14px 34px rgba(8,23,53,.07);
}

.on-faq__question{
  width:100%;
  font-family:'Manrope', Arial, sans-serif;
  min-height:68px;
  padding:17px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border:0;
  background:transparent;
  color:var(--on-navy);
  font-size:14px;
  line-height:1.4;
  font-weight:800;
  text-align:left;
  cursor:pointer;
  box-sizing:border-box;
}

.on-faq__question > span:first-child{
  min-width:0;
}

.on-faq__plus{
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:#FFFBEF;
  color:#F8D949;
  transition:
    background .22s ease,
    color .22s ease,
    transform .22s ease;
}

.on-faq__plus svg{
  width:17px;
  height:17px;
  stroke-width:1.9;
}

.on-faq__item--open .on-faq__plus{
  transform:rotate(45deg);
  background:var(--on-yellow);
  color:var(--on-navy);
}

.on-faq__answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .28s ease;
}

.on-faq__answer-inner{
  padding:0 60px 18px 18px;
  font-size:12px;
  line-height:1.65;
  color:var(--on-text);
}

@media(max-width:900px){
  .on-faq__list{
    grid-template-columns:1fr;
  }
}

@media(max-width:640px){
  .on-faq{
    padding:34px 0 40px;
  }

  .on-faq__inner{
    padding:0 20px;
  }

  .on-faq__head{
    align-items:flex-start;
    margin-bottom:18px;
  }

  .on-faq__title{
    font-size:22px;
  }

  .on-faq__subtitle{
    font-size:12px;
  }

  .on-faq__contact{
    display:none;
  }

  .on-faq__question{
    min-height:64px;
    padding:16px;
    font-size:13px;
  }

  .on-faq__answer-inner{
    padding:0 52px 17px 16px;
    font-size:12px;
  }
}
.on-cta{
  width:100%;
  padding:34px 0;
  background:var(--on-bg-blue);
}

.on-cta__inner{
  max-width:1240px;
  margin:0 auto;
  padding:28px 34px;
  display:grid;
  grid-template-columns:minmax(0,34%) minmax(0,66%);
  gap:34px;
  align-items:center;
  background:#fff;
  border:1px solid var(--on-border);
  border-radius:22px;
  box-shadow:0 16px 44px rgba(8,23,53,.07);
  box-sizing:border-box;
}

.on-cta__eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 10px;
  margin-bottom:12px;
  border-radius:999px;
  background:var(--on-yellow-soft);
  color: var(--on-text);
  font-size:11px;
  line-height:1;
  font-weight:800;
}

.on-cta__title{
  margin:0 0 12px;
  font-size:30px;
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.8px;
  color:var(--on-navy);
}

.on-cta__text{
  max-width:390px;
  margin:0 0 22px;
  font-size:13px;
  line-height:1.6;
  color:var(--on-text);
}

.on-cta__benefits{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.on-cta__benefit{
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:10px;
  line-height:1.4;
  color:var(--on-text);
}

.on-cta__benefit-icon{
  width:24px;
  height:24px;
  flex:0 0 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:#FFFBEF;
  color:#F8D949;
}

.on-cta__benefit-icon svg{
  width:15px;
  height:15px;
  stroke-width:1.8;
}

.on-cta__form-wrap{
  min-width:0;
  padding:18px;
  background:#f8fafc;
  border:1px solid #e6ebf2;
  border-radius:16px;
}

.on-cta__form{
  width:100%;
  min-width:0;
}

.on-cta__fields{
  display:grid;
  grid-template-columns:1fr 1fr 1.65fr;
  gap:10px;
}

.on-cta__field{
  min-width:0;
  display:block;
}

.on-cta__field-label{
  display:block;
  margin-bottom:6px;
  font-size:10px;
  line-height:1.2;
  font-weight:700;
  color:var(--on-text);
}

.on-cta__field input,
.on-cta__field textarea{
  width:100%;
  font-family:'Manrope', Arial, sans-serif;
  border:1px solid #dfe6ef;
  border-radius:9px;
  background:#fff;
  color:var(--on-navy);
  font-size:12px;
  outline:none;
  box-sizing:border-box;
  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.on-cta__field input{
  height:46px;
  padding:0 13px;
}

.on-cta__field textarea{
  min-height:76px;
  padding:12px 13px;
  resize:vertical;
}

.on-cta__field input::placeholder,
.on-cta__field textarea::placeholder{
  color:#9aa5b5;
}

.on-cta__field input:focus,
.on-cta__field textarea:focus{
  border-color:var(--on-yellow);
  box-shadow:0 0 0 3px rgba(255,228,0,.14);
}

.on-cta__form-bottom{
  margin-top:12px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;
  align-items:center;
}

.on-cta__agree{
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:9px;
  cursor:pointer;
  font-size:9px;
  line-height:1.45;
  color:var(--on-muted);
  overflow-wrap:anywhere;
}

.on-cta__agree input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.on-cta__check{
  width:16px;
  height:16px;
  flex:0 0 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #d4dce8;
  border-radius:4px;
  background:#fff;
  color:var(--on-navy);
  box-sizing:border-box;
}

.on-cta__check svg{
  width:11px;
  height:11px;
  display:none;
  stroke-width:2.2;
}

.on-cta__agree input:checked + .on-cta__check{
  background:var(--on-yellow);
  border-color:var(--on-yellow);
}

.on-cta__agree input:checked + .on-cta__check svg{
  display:block;
}

.on-cta__agree a{
  color:var(--on-text);
}

.on-cta__button{
  width:100%;
  min-width:0;
  max-width:100%;
  font-family:'Manrope', Arial, sans-serif;
  min-height:46px;
  padding:0 14px;
  white-space:normal;
  text-align:center;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:0;
  border-radius:9px;
  background:var(--on-yellow);
  color:var(--on-navy);
  font-size:12px;
  line-height:1;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(255,228,0,.22);
  transition:
    background .2s ease,
    box-shadow .2s ease;
}

.on-cta__button:hover{
  background:var(--on-yellow-hover);
  box-shadow:0 14px 30px rgba(255,228,0,.30);
}

.on-cta__button span{
  font-size:16px;
  line-height:1;
}

.on-cta__status{
  min-height:16px;
  margin-top:8px;
  font-size:10px;
  line-height:1.4;
  color:#b42318;
}

.on-cta__status--success{
  color:#23783a;
}

@media(max-width:1000px){
  .on-cta__inner{
    grid-template-columns:1fr;
  }

  .on-cta__text{
    max-width:620px;
  }
}

@media(max-width:760px){
  .on-cta{
    padding:28px 0;
  }

  .on-cta__inner{
    margin:0 20px;
    padding:22px 18px;
    gap:24px;
  }

  .on-cta__title{
    font-size:26px;
  }

  .on-cta__benefits{
    grid-template-columns:1fr;
    gap:10px;
  }

  .on-cta__fields{
    grid-template-columns:1fr;
  }

  .on-cta__field--wide{
    grid-column:auto;
  }

  .on-cta__form-bottom{
    grid-template-columns:1fr;
  }

  .on-cta__button{
    min-height:50px;
  }
}
.on-seo{
  width:100%;
  padding:34px 0 42px;
  background:#fff;
}

.on-seo__inner{
    max-width:1240px;
    margin:0 auto;
    padding:0 34px;
}

.on-seo__head{
  margin-bottom:16px;
}

.on-seo__title{
  margin:0 0 8px;
  font-size:26px;
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.7px;
  color:var(--on-navy);
}

.on-seo__subtitle{
  margin:0;
  font-size:14px;
  line-height:1.6;
  font-weight:500;
  color:#64748b;
}

.on-seo__content{
  position:relative;
  max-height:72px;
  overflow:hidden;
  transition:max-height .4s ease;
}

.on-seo__text{
  font-size:14px;
  line-height:1.8;
  color:#4f6078;
}

.on-seo__text h2,
.on-seo__text h3{
  margin:30px 0 14px;
  font-size:20px;
  line-height:1.3;
  color:var(--on-navy);
}

.on-seo__text p{
  margin:0 0 16px;
}

.on-seo__fade{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:44px;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    #fff
  );
}

.on-seo--open .on-seo__fade{
  display:none;
}

.on-seo__toggle{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;

  width:100%;
  margin-top:12px;
  padding:0;

  border:0;
  background:none;

  cursor:pointer;

  font-family:'Manrope',Arial,sans-serif;
  font-size:15px;
  font-weight:700;
  color:#081735;

  transition:color .2s ease;
}

.on-seo__toggle:hover{
    color:#F8D949;
}

.on-seo__toggle svg{
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .3s ease;
}

.on-seo--open .on-seo__toggle svg{
  transform:rotate(180deg);
}

.on-seo__toggle-text{
    display:block;
}

@media(max-width:768px){
  .on-seo{
    padding:30px 0 36px;
  }

  .on-seo__inner{
    padding:0 20px;
  }

  .on-seo__title{
    font-size:22px;
  }

  .on-seo__subtitle{
    font-size:13px;
  }

  .on-seo__content{
    max-height:68px;
  }

  .on-seo__text{
    font-size:13px;
    line-height:1.75;
  }
}
@media(max-width:760px){
  .on-categories__inner,
  .on-popular__inner,
  .on-process__inner,
  .on-guarantees__inner,
  .on-clients__inner,
  .on-faq__inner,
  .on-seo__inner{
    padding-left:20px;
    padding-right:20px;
  }
}

/* =========================
   ON-NEWS HEADER
   ========================= */

.on-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:9999;

  width:100%;

  font-family:'Manrope', Arial, sans-serif;

  background:rgba(255,255,255,.96);

  border-bottom:1px solid #e8ebf0;

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  box-shadow:0 4px 18px rgba(17,24,39,.035);

  box-sizing:border-box;
}

.on-header *,
.on-header *::before,
.on-header *::after{
  box-sizing:border-box;
}

.on-header__inner{
  width:100%;
  max-width:1540px;
  height:70px;
  min-height:70px;

  margin:0 auto;
  padding:0 28px;

  display:grid;
  grid-template-columns:minmax(250px,1fr) auto minmax(330px,1fr);
  align-items:center;
  gap:54px;
}


.on-header__logo{
  display:flex;
  align-items:center;
  flex-shrink:0;

  text-decoration:none;
}

.on-header__logo img{
  display:block;
  width:auto;
  height:72px;      /* 84px */
  max-width:265px;
  object-fit:contain;
}


.on-header__nav{
  min-width:0;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:44px;
}

.on-header__link{
  position:relative;
  min-height:40px;

  display:inline-flex;
  align-items:center;

  font-family:'Manrope', Arial, sans-serif;
  font-size:15px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:-.1px;

  color:#354258;

  text-decoration:none;
  white-space:nowrap;

  transition:
    color .22s ease,
    transform .22s ease;
}

.on-header__link::after{
  content:"";

  position:absolute;
  left:0;
  right:0;
  bottom:3px;

  height:3px;

  background:var(--on-yellow);
  border-radius:999px;

  transform:scaleX(0);
  transform-origin:center;

  transition:transform .22s ease;
}

.on-header__link:hover{
  color:#171717;
  transform:translateY(-1px);
}

.on-header__link:hover::after{
  transform:scaleX(1);
}


.on-header__right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
}


.on-header__lang{
  padding:2px;

  display:flex;
  align-items:center;
  gap:2px;

  background:#f4f5f7;
  border:1px solid #eceef2;
  border-radius:10px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 4px 12px rgba(17,24,39,.035);
}

.on-header__lang span{
  display:none;
}

.on-header__lang a{
  min-width:36px;
  height:34px;
  padding:0 8px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:9px;

  font-family:'Manrope', Arial, sans-serif;
  font-size:12px;
  line-height:1;
  font-weight:800;

  color:#8b95a5;

  text-decoration:none;

  transition:
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}

.on-header__lang a.active{
  background:#fff;
  color:#171717;

  box-shadow:
    0 4px 12px rgba(17,24,39,.08),
    inset 0 0 0 1px rgba(17,24,39,.025);

  cursor:default;
  pointer-events:none;
}

.on-header__lang a:not(.active):hover{
  color:#171717;
}


.on-header__btn{
  min-height:46px;
  padding:0 14px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:10px;

  background:var(--on-yellow);
  color:#171717;

  font-family:'Manrope', Arial, sans-serif;
  font-size:13px;
  line-height:1.2;
  font-weight:800;

  text-decoration:none;
  white-space:nowrap;

  box-shadow:
    0 10px 22px rgba(248,217,73,.28),
    inset 0 1px 0 rgba(255,255,255,.45);

  transition:
    transform .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.on-header__btn:hover{
  transform:translateY(-2px);
  background:var(--on-yellow-hover);

  box-shadow:
    0 14px 28px rgba(248,217,73,.38),
    inset 0 1px 0 rgba(255,255,255,.5);
}


body{
  padding-top:72px;
}


@media(max-width:1150px){
  .on-header__inner{
    padding:0 26px;
    gap:26px;
  }

  .on-header__logo img{
    height:70px;
    max-width:250px;
  }

  .on-header__nav{
    gap:24px;
  }

  .on-header__link{
    font-size:14px;
  }

  .on-header__right{
    gap:12px;
  }

  .on-header__btn{
    padding:0 20px;
    font-size:13px;
  }
}

/* =========================
   MOBILE HEADER
   ========================= */

.on-header__burger{
    display:none;
}

.on-header__mobile-menu{
    display:none;
}

@media(max-width:900px){

    .on-header__inner{
        grid-template-columns:1fr auto;
        gap:14px;
        height:72px;
        padding:0 20px;
    }

    .on-header__nav,
    .on-header__btn{
        display:none;
    }

.on-header__burger{
  position:relative;

  width:48px;
  height:44px;
  padding:0;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
  gap:6px;

  border:1.5px solid var(--on-yellow);
  border-radius:14px 14px 5px 14px;

  background:var(--on-yellow);
  color:var(--on-navy);

  cursor:pointer;

  box-shadow:
    0 8px 22px rgba(8,23,53,.07),
    inset 0 1px 0 rgba(255,255,255,.9);

  transition:
    background .2s ease,
    box-shadow .2s ease,
    transform .2s ease;

  overflow:hidden;
}

.on-header__burger::before{
  display:none;
}

.on-header__burger span{
  position:relative;
  z-index:1;

  display:block;
  height:2px;
  margin-right:11px;

  background:currentColor;
  border-radius:999px;

  transition:
    width .22s ease,
    transform .25s ease,
    opacity .2s ease;
}

.on-header__burger span:nth-child(1){
  width:20px;
}

.on-header__burger span:nth-child(2){
  width:14px;
}

.on-header__burger span:nth-child(3){
  width:20px;
}

.on-header__burger:hover{
  background:var(--on-yellow-hover);
  transform:translateY(-1px);
  box-shadow:0 11px 26px rgba(8,23,53,.10);
}
.on-header__mobile-menu{
  position:absolute;
  top:100%;
  left:0;
  right:0;

  display:block;

  padding:14px 20px 20px;

  background:rgba(255,255,255,.98);
  border-top:1px solid #edf1f6;
  border-bottom:1px solid #e3e8ef;

  box-shadow:0 18px 40px rgba(8,23,53,.12);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transform:translateY(-10px);

  transition:
    opacity .22s ease,
    visibility .22s ease,
    transform .22s ease;
}

.on-header__mobile-menu.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

.on-header__mobile-nav{
  display:flex;
  flex-direction:column;

  overflow:hidden;

  background:#fff;
  border:1px solid #e3e9f2;
  border-radius:16px;

  box-shadow:0 12px 30px rgba(8,23,53,.055);
}

.on-header__mobile-nav a{
  min-height:56px;
  padding:0 17px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  color:var(--on-navy);

  font-family:'Manrope',Arial,sans-serif;
  font-size:14px;
  line-height:1.3;
  font-weight:700;

  text-decoration:none;

  border-bottom:1px solid #edf1f6;

  transition:
    background .2s ease,
    color .2s ease;
}

.on-header__mobile-nav a:last-child{
  border-bottom:0;
}

.on-header__mobile-nav a::before{
  content:"";

  width:7px;
  height:7px;
  flex:0 0 7px;

  border-radius:50%;
  background:var(--on-yellow);

  box-shadow:0 0 0 5px rgba(248,217,73,.14);
}

.on-header__mobile-nav a span{
  flex:1 1 auto;
}

.on-header__mobile-nav a b{
  flex:0 0 auto;

  color:#9aa5b5;

  font-size:18px;
  line-height:1;
  font-weight:500;
}

.on-header__mobile-nav a:active{
  background:var(--on-yellow-bg);
}

.on-header__mobile-btn{
  width:100%;
  min-height:54px;

  margin-top:12px;
  padding:0 18px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  border-radius:14px;

  background:var(--on-yellow);
  color:var(--on-navy);

  font-family:'Manrope',Arial,sans-serif;
  font-size:14px;
  line-height:1.2;
  font-weight:800;

  text-align:center;
  text-decoration:none;

  box-shadow:0 12px 26px rgba(248,217,73,.25);

  box-sizing:border-box;
}

.on-header__mobile-btn span{
  font-size:18px;
  line-height:1;
}


.on-header__burger.is-open span{
  width:20px;
}

.on-header__burger.is-open span:nth-child(1){
  transform:translateY(8px) rotate(45deg);
}

.on-header__burger.is-open span:nth-child(2){
  opacity:0;
}

.on-header__burger.is-open span:nth-child(3){
  transform:translateY(-8px) rotate(-45deg);
}

}
/* =========================
   ON-NEWS FOOTER
   ========================= */

.on-footer{
  width:100%;
  padding:58px 0 26px;

  background:#fff;
  border-top:1px solid #e8edf3;

  font-family:'Manrope', Arial, sans-serif;
  box-sizing:border-box;
}

.on-footer *,
.on-footer *::before,
.on-footer *::after{
  box-sizing:border-box;
}

.on-footer__inner{
  width:100%;
  max-width:1440px;

  margin:0 auto;
  padding:0 40px;
}

.on-footer__main{
  display:grid;
  grid-template-columns:minmax(260px,1.35fr) repeat(3,minmax(170px,1fr));
  gap:70px;

  padding-bottom:48px;
}

.on-footer__brand{
  max-width:340px;
}

.on-footer__logo{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}

.on-footer__logo img{
  display:block;
  width:auto;
  height:86px;
  max-width:330px;
  object-fit:contain;
}

.on-footer__description{
  max-width:320px;
  margin:2px 0 0;

  color:#7a879b;

  font-size:14px;
  line-height:1.75;
  font-weight:500;
}

.on-footer__title{
  margin:0 0 20px;

  color:var(--on-navy);

  font-size:13px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.9px;
  text-transform:uppercase;
}

.on-footer__nav{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:13px;
}

.on-footer__nav a{
  position:relative;

  color:#8a98ac;

  font-size:14px;
  line-height:1.45;
  font-weight:500;

  text-decoration:none;

  transition:
    color .2s ease,
    transform .2s ease;
}

.on-footer__nav a:hover{
  color:var(--on-navy);
  transform:translateX(4px);
}

.on-footer__contacts{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.on-footer__contact{
  display:flex;
  flex-direction:column;
  align-items:flex-start;

  margin-bottom:16px;

  color:#8a98ac;

  font-size:14px;
  line-height:1.45;
  font-weight:500;

  text-decoration:none;

  transition:
    color .2s ease,
    transform .2s ease;
}

.on-footer__contact span{
  transition:color .2s ease;
}

.on-footer__contact small{
  margin-top:2px;

  color:#a0aabc;

  font-family:'Manrope', Arial, sans-serif;
  font-size:11px;
  line-height:1.4;
  font-weight:500;
}

.on-footer__contact:hover{
  color:var(--on-navy);
  transform:translateX(4px);
}

.on-footer__bottom{
  min-height:70px;
  padding-top:24px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;

  border-top:1px solid #e3e8ef;
}

.on-footer__copyright{
  margin:0;

  color:#96a3b5;

  font-size:12px;
  line-height:1.5;
  font-weight:500;
}

.on-footer__legal{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:30px;
}

.on-footer__legal a{
  color:#96a3b5;

  font-size:12px;
  line-height:1.4;
  font-weight:500;

  text-decoration:none;
  white-space:nowrap;

  transition:color .2s ease;
}

.on-footer__legal a:hover{
  color:var(--on-navy);
}


@media(max-width:1100px){
  .on-footer__main{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:44px 60px;
  }

  .on-footer__brand{
    max-width:420px;
  }

  .on-footer__bottom{
    align-items:flex-start;
    flex-direction:column;
    gap:16px;
  }

  .on-footer__legal{
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:12px 24px;
  }
}


@media(max-width:640px){
  .on-footer{
    padding:42px 0 22px;
  }

  .on-footer__inner{
    padding:0 20px;
  }

  .on-footer__main{
    grid-template-columns:1fr;
    gap:34px;

    padding-bottom:34px;
  }

  .on-footer__brand{
    max-width:none;
  }

  .on-footer__logo img{
    height:68px;
    max-width:260px;
  }

  .on-footer__description{
    margin-top:16px;
    font-size:13px;
  }

  .on-footer__title{
    margin-bottom:16px;
  }

  .on-footer__nav{
    gap:11px;
  }

  .on-footer__nav a,
  .on-footer__contact{
    font-size:13px;
  }

  .on-footer__bottom{
  min-height:auto;
  padding-top:20px;

  display:flex;
  flex-direction:column;
  align-items:flex-start;

  gap:20px;
}

.on-footer__legal{
    width:100%;

    display:flex;
    flex-wrap:wrap;
    align-items:center;

    gap:12px 20px;

    margin-bottom:2px;
}

.on-footer__legal a{
    padding:0;

    border:0;

    color:#96a3b5;

    font-size:13px;
    line-height:1.5;
    font-weight:500;

    white-space:nowrap;

    text-decoration:none;

    transition:color .2s ease;
}

.on-footer__legal a:hover{
    color:var(--on-navy);
}

.on-footer__copyright{
    max-width:320px;
}

}
.on-footer__social{
    display:flex;
    align-items:center;
    gap:12px;

    margin-top:18px;
}

.on-footer__social-link{

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid #e6ebf2;
    border-radius:12px;

    background:#fff;

    color:#7b8799;

    transition:
        transform .22s ease,
        color .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.on-footer__social-link svg{

    width:20px;
    height:20px;

    fill:currentColor;
}

.on-footer__social-link:hover{

    transform:translateY(-2px);

    color:#171717;

    border-color:var(--on-yellow);

    box-shadow:0 8px 18px rgba(248,217,73,.18);
}
/* LARGE DESKTOP 1600px */

@media(min-width:1600px){

  .on-hero__inner,
  .on-categories__inner,
  .on-popular__inner,
  .on-process__inner,
  .on-guarantees__inner,
  .on-clients__inner,
  .on-faq__inner,
  .on-seo__inner{
    max-width:1240px;
  }

  .on-hero{
    padding-top:64px;
    padding-bottom:54px;
  }

  .on-hero__inner{
    grid-template-columns:minmax(0,43%) 180px minmax(0,57%);
  }

  .on-hero h1{
    font-size:60px;
    line-height:1.02;
  }

  .on-hero__subtitle{
    font-size:26px;
  }

  .on-hero__text{
    max-width:620px;
    font-size:17px;
  }

  .on-hero__btn{
    min-height:56px;
    padding-left:32px;
    padding-right:32px;
    font-size:15px;
  }

  .on-hero__trust{
    max-width:680px;
  }

  .on-hero__image{
    width:142%;
    transform:translateX(120px);
  }

  .on-categories__title,
  .on-popular__title{
    font-size:25px;
  }

  .on-process__title,
  .on-guarantees__title,
  .on-clients__title,
  .on-faq__title{
    font-size:32px;
  }

  .on-category-card{
    min-height:112px;
    padding:20px 18px;
  }

  .on-media-card{
    padding:18px 16px 16px;
  }

  .on-guarantee{
    min-height:190px;
    padding:21px;
  }
}
@media (max-width: 960px) {
  .on-hero__right,
  .on-hero__stats {
    display: none !important;
  }
}
/* =========================
   CATALOG HERO
   ========================= */

.on-catalog-hero{
  width:100%;
  padding:42px 0 48px;
  background:#fff;
  font-family:'Manrope', Arial, sans-serif;
  overflow:hidden;
}

.on-catalog-hero__breadcrumbs-wrap{
  max-width:1280px;
  margin:0 auto;
  padding:0 42px;
  box-sizing:border-box;
}

.on-catalog-hero__inner{
  max-width:1240px;
  margin:0 auto;
  padding:0 34px;
  box-sizing:border-box;
}

.on-catalog-hero__breadcrumbs{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:40px;
  font-size:12px;
  line-height:1.3;
  color:var(--on-muted);
}

@media(max-width:640px){

  .on-catalog-hero__breadcrumbs-wrap{
    padding:0 20px;
  }
}

.on-catalog-hero__breadcrumbs a{
  color:var(--on-text);
  text-decoration:none;
  transition:color .2s ease;
}

.on-catalog-hero__breadcrumbs a:hover{
  color:var(--on-navy);
}

.on-catalog-hero__breadcrumbs svg{
  width:14px;
  height:14px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.on-catalog-hero__layout{
  display:block;
}

.on-catalog-hero__content{
  max-width:920px;
}

.on-catalog-hero__title{
  max-width:900px;
  margin:0 0 20px;
  font-size:48px;
  line-height:1.04;
  font-weight:800;
  letter-spacing:-1.6px;
  color:var(--on-navy);
}
.on-catalog-hero__title span{
  color:#F8D949;
}

.on-catalog-hero__subtitle{
  max-width:820px;
  margin:0 0 14px;
  font-size:20px;
  line-height:1.4;
  font-weight:600;
  color:var(--on-navy);
}

.on-catalog-hero__text{
  max-width:820px;
  margin:0 0 30px;
  font-size:15px;
  line-height:1.7;
  color:var(--on-text);
}

.on-catalog-hero__trust{
  display:flex;
  flex-wrap:wrap;
  gap:18px 24px;
}

.on-catalog-hero__trust-item{
  display:flex;
  align-items:center;
  gap:9px;
  color:#2b3e5c;
  font-size:11px;
  line-height:1.35;
  font-weight:600;
}

.on-catalog-hero__trust-icon{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--on-yellow-soft);
  color:var(--on-yellow);
}

.on-catalog-hero__trust-icon svg{
  width:16px;
  height:16px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}


@media(max-width:1000px){

  .on-catalog-hero{
    padding:38px 0 42px;
  }

  .on-catalog-hero__layout{
    display:block;
}

  .on-catalog-hero__content{
    max-width:760px;
  }

  .on-catalog-hero__title{
    max-width:760px;
  }

}


@media(max-width:640px){

  .on-catalog-hero{
    padding:28px 0 34px;
  }

  .on-catalog-hero__inner{
    padding:0 20px;
  }

  .on-catalog-hero__breadcrumbs{
    margin-bottom:22px;
    font-size:11px;
  }

  .on-catalog-hero__eyebrow{
    margin-bottom:15px;
    font-size:10px;
  }

  .on-catalog-hero__title{
    margin-bottom:17px;
    font-size:35px;
    line-height:1.06;
    letter-spacing:-1px;
  }

  .on-catalog-hero__subtitle{
    margin-bottom:13px;
    font-size:18px;
    line-height:1.4;
  }

  .on-catalog-hero__text{
    margin-bottom:24px;
    font-size:14px;
    line-height:1.65;
  }

  .on-catalog-hero__trust{
  display:none;
}

}
/* =========================
   MEDIA CATALOG
   ========================= */

.on-catalog{
  width:100%;
  padding:28px 0 56px;
  background:var(--on-bg);
  font-family:'Manrope',Arial,sans-serif;
}

.on-catalog *,
.on-catalog *::before,
.on-catalog *::after{
  box-sizing:border-box;
}

.on-catalog__inner{
  width:100%;
  max-width:1240px;
  box-sizing:border-box;
  margin:0 auto;
  padding:0 34px;
}

/* TOOLBAR */

.on-catalog__toolbar{
  position:relative;
  z-index:5;
  display:grid;
  grid-template-columns:minmax(0,1fr) 260px;
  gap:14px;
  margin-bottom:20px;
}

.on-catalog__search{
  position:relative;
  min-width:0;
  height:54px;
  display:flex;
  align-items:center;
  background:#fff;
  border:1px solid var(--on-border);
  border-radius:14px;
  box-shadow:var(--on-shadow-sm);
  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.on-catalog__search:focus-within{
  border-color:var(--on-yellow);
  box-shadow:0 0 0 4px rgba(248,217,73,.16);
}

.on-catalog__search-icon{
  width:50px;
  flex:0 0 50px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#8491a5;
}

.on-catalog__search-icon svg{
  width:21px;
  height:21px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.on-catalog__search input{
  width:100%;
  height:100%;
  min-width:0;
  padding:0 46px 0 0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--on-navy);
  font-family:inherit;
  font-size:14px;
  font-weight:500;
}

.on-catalog__search input::placeholder{
  color:#98a3b4;
}

.on-catalog__search-clear{
  position:absolute;
  top:50%;
  right:13px;
  width:30px;
  height:30px;
  padding:0;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:8px;
  background:#f3f5f8;
  color:#718096;
  cursor:pointer;
}

.on-catalog__search-clear svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
}

.on-catalog__sort{
  position:relative;
  height:54px;

  background:#fff;
  border:1px solid var(--on-border);
  border-radius:14px;
  box-shadow:var(--on-shadow-sm);

  cursor:pointer;
  box-sizing:border-box;
}

.on-catalog__sort-label{
  position:absolute;
  top:12px;
  left:15px;
  z-index:3;

  margin:0;

  font-size:9px;
  line-height:1.2;
  font-weight:700;
  color:var(--on-muted);

  pointer-events:none;
}

.on-catalog__sort select{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  padding:16px 42px 0 15px;

  border:0;
  outline:0;
  background:transparent;

  appearance:none;
  -webkit-appearance:none;

  color:var(--on-navy);
  font-family:inherit;
  font-size:12px;
  line-height:1.3;
  font-weight:700;

  cursor:pointer;
  z-index:2;
  box-sizing:border-box;
}

.on-catalog__select-icon{
  position:absolute;
  top:50%;
  right:15px;
  transform:translateY(-50%);

  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--on-muted);

  pointer-events:none;
  z-index:3;
}

.on-catalog__select-icon svg{
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.on-catalog__filter-toggle{
  display:none;
}

/* LAYOUT */

.on-catalog__layout{
  display:grid;
  grid-template-columns:244px minmax(0,1fr);
  gap:20px;
  align-items:start;
}

/* FILTERS */

.on-catalog__filters{
  position:sticky;
  top:92px;
  padding:20px 18px;
  background:#fff;
  border:1px solid var(--on-border);
  border-radius:16px;
  box-shadow:var(--on-shadow-sm);
}

.on-catalog__filters-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:20px;
  padding-bottom:17px;
  border-bottom:1px solid #edf1f6;
}

.on-catalog__filters-title{
  margin:0;
  color:var(--on-navy);
  font-size:17px;
  line-height:1.2;
  font-weight:800;
}

.on-catalog__filters-subtitle{
  margin:5px 0 0;
  color:var(--on-muted);
  font-size:10px;
  line-height:1.4;
}

.on-catalog__filters-close{
  display:none;
}

.on-catalog__filter-group{
  min-width:0;
  margin-bottom:17px;
}

.on-catalog__filter-label{
  display:block;
  margin-bottom:8px;
  color:var(--on-navy);
  font-size:11px;
  line-height:1.3;
  font-weight:800;
}

.on-catalog__select{
  position:relative;
}

.on-catalog__select select,
.on-catalog__input{
  width:100%;
  height:42px;
  padding:0 36px 0 12px;
  border:1px solid #dfe6ef;
  border-radius:9px;
  outline:0;
  background:#fff;
  appearance:none;
  -webkit-appearance:none;
  color:#33445e;
  font-family:inherit;
  font-size:11px;
  font-weight:600;
  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.on-catalog__input{
  padding-right:12px;
}

.on-catalog__select select:focus,
.on-catalog__input:focus,
.on-catalog__price-row input:focus{
  border-color:var(--on-yellow);
  box-shadow:0 0 0 3px rgba(248,217,73,.14);
}

.on-catalog__select > span{
  position:absolute;
  top:50%;
  right:11px;
  transform:translateY(-50%);
  pointer-events:none;
  color:#8491a5;
}

.on-catalog__select svg{
  width:16px;
  height:16px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.on-catalog__checks{
  display:grid;
  gap:9px;
}

.on-catalog__check{
  display:flex;
  align-items:center;
  gap:9px;
  color:#43536b;
  font-size:11px;
  line-height:1.3;
  font-weight:600;
  cursor:pointer;
}

.on-catalog__check input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.on-catalog__checkbox{
  width:18px;
  height:18px;
  flex:0 0 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #d8e0eb;
  border-radius:5px;
  background:#fff;
  color:var(--on-navy);
  transition:
    border-color .2s ease,
    background .2s ease;
}

.on-catalog__checkbox svg{
  width:12px;
  height:12px;
  display:none;
  fill:none;
  stroke:currentColor;
  stroke-width:2.3;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.on-catalog__check input:checked + .on-catalog__checkbox{
  background:var(--on-yellow);
  border-color:var(--on-yellow);
}

.on-catalog__check input:checked + .on-catalog__checkbox svg{
  display:block;
}

.on-catalog__filter-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.on-catalog__price-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.on-catalog__price-row label{
  position:relative;
  display:block;
}

.on-catalog__price-row label > span{
  position:absolute;
  top:50%;
  left:11px;
  z-index:1;
  transform:translateY(-50%);
  color:#96a1b2;
  font-size:10px;
}

.on-catalog__price-row input{
  width:100%;
  height:42px;
  padding:0 10px 0 29px;
  border:1px solid #dfe6ef;
  border-radius:9px;
  outline:0;
  background:#fff;
  color:#33445e;
  font-family:inherit;
  font-size:11px;
  font-weight:600;
}

.on-catalog__filters-actions{
  display:grid;
  gap:9px;
  padding-top:3px;
}

.on-catalog__apply,
.on-catalog__reset{
  width:100%;
  min-height:42px;
  padding:0 14px;
  border-radius:9px;
  font-family:inherit;
  font-size:11px;
  line-height:1.2;
  font-weight:800;
  cursor:pointer;
}

.on-catalog__apply{
  border:0;
  background:var(--on-yellow);
  color:var(--on-navy);
  box-shadow:0 8px 22px rgba(248,217,73,.22);
  transition:
    background .2s ease,
    box-shadow .2s ease;
}

.on-catalog__apply:hover{
  background:var(--on-yellow-hover);
  box-shadow:0 11px 26px rgba(248,217,73,.3);
}

.on-catalog__reset{
  border:1px solid #dfe6ef;
  background:#fff;
  color:var(--on-text);
}

.on-catalog__reset:hover{
  border-color:#cbd5e1;
  color:var(--on-navy);
}

/* CONTENT */

.on-catalog__content{
  min-width:0;
}

.on-catalog__content-head{
  min-height:44px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:14px;
}

.on-catalog__title{
  margin:0;
  color:var(--on-navy);
  font-size:21px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.4px;
}

.on-catalog__results{
  margin:5px 0 0;
  color:var(--on-muted);
  font-size:11px;
  line-height:1.3;
}

.on-catalog__results strong{
  color:var(--on-navy);
}

/* GRID */

.on-catalog__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

/* CARD */

.on-catalog-card{
  min-width:0;
  padding:16px;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--on-border);
  border-radius:16px;
  box-shadow:var(--on-shadow-sm);
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.on-catalog-card:hover{
  transform:translateY(-4px);
  border-color:var(--on-yellow);
  box-shadow:0 18px 38px rgba(8,23,53,.09);
}

.on-catalog-card[hidden]{
  display:none !important;
}

.on-catalog-card__top{
  display:block;
  min-width:0;
  color:inherit;
  text-decoration:none;
}

.on-catalog-card__logo{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid #e7ecf3;
  border-radius:12px;
  background:#fff;
}

.on-catalog-card__logo img{
  display:block;

  width:100%;
  height:100%;

  padding:5px;
  object-fit:contain;

  box-sizing:border-box;
}

.on-catalog-card__logo-fallback{
  max-width:42px;
  color:var(--on-navy);
  font-size:13px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.5px;
  text-align:center;
}

.on-catalog-card__identity{
  min-width:0;
}

.on-catalog-card__name{
  margin:0 0 4px;
  overflow:hidden;

  color:var(--on-navy);
  font-size:14px;
  line-height:1.25;
  font-weight:800;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;

  white-space:normal;
  overflow-wrap:anywhere;
}

.on-catalog-card__domain{
  display:block;
  overflow:hidden;
  color:var(--on-muted);
  font-size:10px;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.on-catalog-card__arrow{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--on-yellow-soft);
  color:#c4a900;
  transition:
    transform .2s ease,
    background .2s ease,
    color .2s ease;
}

.on-catalog-card:hover .on-catalog-card__arrow{
  transform:translateX(2px);
  background:var(--on-yellow);
  color:var(--on-navy);
}

.on-catalog-card__arrow svg{
  width:15px;
  height:15px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.on-catalog-card__description{
  min-height:57px;
  margin:14px 0 13px;
  color:var(--on-text);
  font-size:11px;
  line-height:1.55;
}

.on-catalog-card__metrics{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) .7fr .7fr;
  border-top:1px solid #edf1f6;
  border-bottom:1px solid #edf1f6;
}

.on-catalog-card__metric{
  min-width:0;
  padding:11px 8px;
}

.on-catalog-card__metric:first-child{
  padding-left:0;
}

.on-catalog-card__metric + .on-catalog-card__metric{
  border-left:1px solid #edf1f6;
}

.on-catalog-card__metric span{
  display:block;
  margin-bottom:5px;
  overflow:hidden;
  color:#8a96a8;
  font-size:8px;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.on-catalog-card__metric strong{
  display:block;
  color:var(--on-navy);
  font-size:12px;
  line-height:1.1;
  font-weight:800;
}

.on-catalog-card__tags{
  min-height:46px;
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:6px;
  padding:11px 0;
}

.on-catalog-card__tag{
  min-height:21px;
  padding:0 7px;
  display:inline-flex;
  align-items:center;
  border-radius:6px;
  background:#f1f3f6;
  color:#607086;
  font-size:8px;
  line-height:1;
  font-weight:800;
}

.on-catalog-card__tag--green{
  background:#edf8ef;
  color:#24733a;
}

.on-catalog-card__tag--yellow{
  background:var(--on-yellow-soft);
  color:#947d00;
}

.on-catalog-card__placements{
  display:grid;
  gap:7px;
  margin-bottom:14px;
}

.on-catalog-card__placement{
  min-height:49px;
  padding:9px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:#f8fafc;
  border:1px solid #edf1f6;
  border-radius:9px;
}

.on-catalog-card__placement > div{
  min-width:0;
}

.on-catalog-card__placement strong{
  display:block;
  margin-bottom:3px;
  color:var(--on-navy);
  font-size:10px;
  line-height:1.2;
  font-weight:800;
}

.on-catalog-card__placement span{
  display:block;
  overflow:hidden;
  color:#8793a5;
  font-size:8px;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.on-catalog-card__placement b{
  flex:0 0 auto;
  color:var(--on-navy);
  font-size:10px;
  line-height:1.2;
  font-weight:800;
  text-align:right;
}

.on-catalog-card__button{
  width:100%;
  min-height:39px;
  margin-top:auto;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:center;

  border:1.5px solid var(--on-yellow);
  border-radius:8px;

  /* Такой же фон, как у кнопки сравнения */
  background:#fff9df;
  color:var(--on-navy);

  font-size:10px;
  line-height:1.2;
  font-weight:800;
  text-align:center;
  text-decoration:none;

  transition:
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

/* При наведении на ВСЮ карточку */
.on-catalog-card:hover .on-catalog-card__button{
  background:var(--on-yellow);
  border-color:var(--on-yellow);
  color:var(--on-navy);
  box-shadow:0 8px 20px rgba(248,217,73,.22);
}

.on-catalog-card__button:hover{
  background:var(--on-yellow);
  border-color:var(--on-yellow);
  color:var(--on-navy);

  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(248,217,73,.22);
}

/* EMPTY */

.on-catalog__empty{
  padding:54px 20px;
  text-align:center;
  background:#fff;
  border:1px solid var(--on-border);
  border-radius:16px;
}

.on-catalog__empty-icon{
  width:52px;
  height:52px;
  margin:0 auto 15px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:var(--on-yellow-soft);
  color:#c3a700;
}

.on-catalog__empty-icon svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.on-catalog__empty h3{
  margin:0 0 8px;
  color:var(--on-navy);
  font-size:18px;
}

.on-catalog__empty p{
  margin:0 auto 18px;
  color:var(--on-text);
  font-size:12px;
}

.on-catalog__empty button{
  min-height:40px;
  padding:0 17px;
  border:0;
  border-radius:8px;
  background:var(--on-yellow);
  color:var(--on-navy);
  font-family:inherit;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}

.on-catalog__overlay{
  display:none;
}

/* TABLET */

@media(max-width:1100px){

  .on-catalog__layout{
    grid-template-columns:220px minmax(0,1fr);
  }

  .on-catalog__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* MOBILE FILTER DRAWER */

@media(max-width:820px){

  .on-catalog{
    padding:24px 0 42px;
  }

  .on-catalog__inner{
    padding:0 20px;
  }

  .on-catalog__toolbar{
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
  }

  .on-catalog__search{
    grid-column:1 / -1;
  }

  .on-catalog__filter-toggle{
    min-height:48px;
    padding:0 15px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:1px solid var(--on-border);
    border-radius:12px;
    background:#fff;
    color:var(--on-navy);
    font-family:inherit;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
  }

  .on-catalog__filter-toggle svg{
    width:17px;
    height:17px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
  }

  .on-catalog__filter-count{
    min-width:19px;
    height:19px;
    padding:0 5px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:var(--on-yellow);
    color:var(--on-navy);
    font-size:9px;
  }

  .on-catalog__sort{
    height:48px;
    min-width:0;
  }

  .on-catalog__sort-label{
    display:none;
  }

  .on-catalog__layout{
    display:block;
  }

  .on-catalog__filters{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    z-index:10001;
    width:min(350px,calc(100% - 34px));
    padding:22px 20px 28px;
    overflow-y:auto;
    border:0;
    border-radius:0 18px 18px 0;
    transform:translateX(-105%);
    transition:transform .28s ease;
  }

  .on-catalog--filters-open .on-catalog__filters{
    transform:translateX(0);
  }

  .on-catalog__filters-close{
    width:34px;
    height:34px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--on-border);
    border-radius:9px;
    background:#fff;
    color:var(--on-navy);
    cursor:pointer;
  }

  .on-catalog__filters-close svg{
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
  }

  .on-catalog__overlay{
    position:fixed;
    inset:0;
    z-index:10000;
    background:rgba(8,23,53,.45);
    opacity:0;
    visibility:hidden;
    display:block;
    transition:
      opacity .28s ease,
      visibility .28s ease;
  }

  .on-catalog--filters-open .on-catalog__overlay{
    opacity:1;
    visibility:visible;
  }

  body.on-catalog-lock{
    overflow:hidden;
  }

  .on-catalog__content-head{
    min-height:0;
  }
}

@media(max-width:620px){

  .on-catalog__toolbar{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .on-catalog__filter-toggle,
  .on-catalog__sort{
    width:100%;
  }

  .on-catalog__grid{
    grid-template-columns:1fr;
  }

  .on-catalog__title{
    font-size:19px;
  }

  .on-catalog-card__description{
    min-height:0;
  }
}

@media(max-width:390px){

  .on-catalog__filter-toggle{
    padding:0 10px;
  }

  .on-catalog__sort{
    padding-left:11px;
  }

  .on-catalog__sort select{
    font-size:10px;
  }
}
/* =========================
   CATALOG LOADING / ERROR
   ========================= */

.on-catalog__loading,
.on-catalog__load-error{
  grid-column:1 / -1;
  min-height:220px;
  padding:36px 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:#fff;
  border:1px solid var(--on-border);
  border-radius:16px;
  box-shadow:var(--on-shadow-sm);
  box-sizing:border-box;
}

.on-catalog__loading{
  gap:14px;
  color:var(--on-text);
  font-size:12px;
  line-height:1.4;
  font-weight:600;
}

.on-catalog__loader{
  width:34px;
  height:34px;
  display:block;
  border:3px solid #edf1f6;
  border-top-color:var(--on-yellow);
  border-radius:50%;
  animation:onCatalogLoader .75s linear infinite;
}

@keyframes onCatalogLoader{
  to{
    transform:rotate(360deg);
  }
}

.on-catalog__load-error strong{
  margin-bottom:8px;
  color:var(--on-navy);
  font-size:17px;
  line-height:1.3;
  font-weight:800;
}

.on-catalog__load-error span{
  max-width:440px;
  color:var(--on-text);
  font-size:12px;
  line-height:1.6;
}

.on-catalog__load-error button{
  min-height:40px;
  margin-top:18px;
  padding:0 18px;
  border:0;
  border-radius:8px;
  background:var(--on-yellow);
  color:var(--on-navy);
  font-family:'Manrope',Arial,sans-serif;
  font-size:11px;
  line-height:1;
  font-weight:800;
  cursor:pointer;
  transition:
    background .2s ease,
    box-shadow .2s ease;
}

.on-catalog__load-error button:hover{
  background:var(--on-yellow-hover);
  box-shadow:0 8px 20px rgba(248,217,73,.25);
}
/* ON-NEWS */

.on-site-page {
  width: 100%;
  min-height: 600px;
  background: #ffffff;
  color: var(--on-text);
  font-family: "Manrope", Arial, sans-serif;
}

.on-site-page *,
.on-site-page *::before,
.on-site-page *::after {
  box-sizing: border-box;
}

.on-site-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 34px;
}

.on-site-section {
  padding: 28px 0 70px;
}


.on-site-state {
  min-height: 540px;
  padding: 70px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  color: var(--on-text);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
}

.on-site-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #edf0f4;
  border-top-color: var(--on-yellow);
  border-radius: 50%;
  animation: onSiteSpin 0.75s linear infinite;
}

@keyframes onSiteSpin {
  to {
    transform: rotate(360deg);
  }
}

.on-site-state--error h1 {
  margin: 0;
  color: var(--on-navy);
  font-size: 30px;
  line-height: 1.2;
  font-weight: 800;
}

.on-site-state--error p {
  max-width: 520px;
  margin: 0 0 10px;
  color: var(--on-muted);
}

.on-site-error-icon {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: var(--on-yellow-soft);
  color: #8c7600;
  font-size: 26px;
  font-weight: 900;
}


.on-site-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  color: var(--on-muted);
  font-size: 11px;
  line-height: 1.5;
  font-weight: 600;
}

.on-site-breadcrumbs a {
  color: var(--on-text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.on-site-breadcrumbs a:hover {
  color: var(--on-navy);
}

.on-site-breadcrumbs__separator {
  color: #aab3c0;
}


.on-site-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--on-border);
  border-radius: 26px;
  box-shadow:
    0 24px 70px rgba(8, 23, 53, 0.08),
    0 4px 16px rgba(8, 23, 53, 0.03);
}

.on-site-card__main {
  min-width: 0;
  padding: 38px 40px 42px;
}

.on-site-card__sidebar {
  padding: 26px;
  background: #f8fafc;
  border-left: 1px solid var(--on-border);
}


.on-site-card__header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--on-border);
}

.on-site-logo {
  width: 118px;
  height: 118px;
  flex: 0 0 118px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--on-border);
  border-radius: 24px;
  box-shadow: 0 12px 34px rgba(8, 23, 53, 0.08);
}

.on-site-logo img {
  width: 82%;
  height: 82%;
  display: block;
  object-fit: contain;
}

.on-site-logo span {
  max-width: 92px;
  color: var(--on-navy);
  font-size: 25px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -1px;
  text-align: center;
}

.on-site-card__identity {
  min-width: 0;
}

.on-site-title {
  margin: 7px 0 7px;
  color: var(--on-navy);
  font-size: clamp(28px, 2.4vw, 36px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -1.3px;
  overflow-wrap: anywhere;
}

.on-site-domain {
  display: inline-flex;
  align-items: center;
  color: #5e6f85;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.on-site-domain:hover {
  color: var(--on-navy);
}


.on-site-badges,
.on-site-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.on-site-tags {
  margin-top: 14px;
}

.on-md-badge,
.on-md-tag {
  min-height: 27px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
}

.on-md-badge {
  background: var(--on-yellow);
  color: var(--on-navy);
}

.on-md-badge--green {
  background: #eaf7ed;
  color: #23763a;
}

.on-md-badge--gray,
.on-md-tag {
  background: #f0f3f7;
  color: #607086;
}


.on-site-description-wrap {
  padding: 30px 0;
  border-bottom: 1px solid var(--on-border);
}

.on-site-lead {
  margin: 0;
  color: #31435b;
  font-size: 16px;
  line-height: 1.75;
  font-weight: 500;
}

.on-site-description {
  margin-top: 18px;
  color: #526278;
  font-size: 14px;
  line-height: 1.8;
}

.on-site-description:empty {
  display: none;
}

.on-site-description p {
  margin: 0 0 13px;
}

.on-site-description p:last-child {
  margin-bottom: 0;
}


.on-site-block {
  padding-top: 30px;
}

.on-site-block + .on-site-block {
  margin-top: 30px;
  border-top: 1px solid var(--on-border);
}

.on-site-block__heading {
  margin-bottom: 18px;
}

.on-site-block__heading h2 {
  margin: 0;
  color: var(--on-navy);
  font-size: 21px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.35px;
}


.on-site-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--on-border);
  border-radius: 16px;
}

.on-md-stat {
  min-width: 0;
  padding: 19px 17px;
  background: #ffffff;
  border-right: 1px solid var(--on-border);
  border-bottom: 1px solid var(--on-border);
}

.on-md-stat:nth-child(4n) {
  border-right: 0;
}

.on-md-stat:nth-last-child(-n + 4) {
  border-bottom: 0;
}

.on-md-stat span {
  display: block;
  margin-bottom: 7px;
  color: var(--on-muted);
  font-size: 9px;
  line-height: 1.35;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}

.on-md-stat strong {
  display: block;
  color: var(--on-navy);
  font-size: 17px;
  line-height: 1.35;
  font-weight: 800;
  overflow-wrap: anywhere;
}


.on-site-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--on-border);
  border-radius: 16px;
}

.on-md-detail {
  min-width: 0;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--on-border);
}

.on-md-detail:nth-child(odd) {
  border-right: 1px solid var(--on-border);
}

.on-md-detail:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.on-md-detail dt {
  margin: 0;
  color: var(--on-muted);
  font-size: 11px;
  line-height: 1.45;
  font-weight: 600;
}

.on-md-detail dd {
  margin: 0;
  color: var(--on-navy);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 800;
  text-align: right;
}


.on-site-order {
  position: sticky;
  top: 110px;
  padding: 26px;
  background: #ffffff;
  border: 1px solid var(--on-border);
  border-radius: 20px;
  box-shadow: 0 14px 38px rgba(8, 23, 53, 0.06);
}

.on-site-order__label {
  min-height: 27px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  margin-bottom: 20px;
  border-radius: 999px;
  background: var(--on-yellow-soft);
  color: #846f00;
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
}

.on-site-order__caption {
  display: block;
  margin-bottom: 5px;
  color: var(--on-muted);
  font-size: 10px;
  line-height: 1.4;
  font-weight: 700;
}

.on-site-order__price {
  display: block;
  color: var(--on-navy);
  font-size: 30px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.8px;
}

.on-site-order__note {
  margin: 10px 0 22px;
  color: #6b788a;
  font-size: 11px;
  line-height: 1.65;
}

.on-site-order__advantages {
  margin: 20px 0 0;
  padding: 18px 0 0;
  display: grid;
  gap: 11px;
  border-top: 1px solid var(--on-border);
  list-style: none;
}

.on-site-order__advantages li {
  position: relative;
  padding-left: 24px;
  color: #46566c;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 600;
}

.on-site-order__advantages li::before {
  content: "✓";
  position: absolute;
  top: 0;
  left: 0;
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--on-yellow);
  color: var(--on-navy);
  font-size: 9px;
  font-weight: 900;
}


.on-site-btn {
  min-height: 48px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  color: var(--on-navy);
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.on-site-btn--yellow {
  background: var(--on-yellow);
  box-shadow: 0 10px 24px rgba(248, 217, 73, 0.24);
}

.on-site-btn--yellow:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(248, 217, 73, 0.32);
}

.on-site-btn--full {
  width: 100%;
}


.on-site-back {
  margin-top: 22px;
}

.on-site-back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #607086;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease;
}

.on-site-back a:hover {
  color: var(--on-navy);
}


@media (max-width: 1050px) {

  .on-site-card {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .on-site-card__main {
    padding: 32px 30px 36px;
  }

  .on-site-card__sidebar {
    padding: 22px;
  }

  .on-site-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .on-md-stat:nth-child(4n) {
    border-right: 1px solid var(--on-border);
  }

  .on-md-stat:nth-child(2n) {
    border-right: 0;
  }

  .on-md-stat:nth-last-child(-n + 4) {
    border-bottom: 1px solid var(--on-border);
  }

  .on-md-stat:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

}


@media (max-width: 760px) {

  .on-site-container {
    padding: 0 20px;
  }

  .on-site-section {
    padding: 20px 0 46px;
  }

  .on-site-breadcrumbs {
    margin-bottom: 18px;
  }

  .on-site-card {
    display: block;
    border-radius: 20px;
  }

  .on-site-card__main {
    padding: 24px 20px 28px;
  }

  .on-site-card__sidebar {
    padding: 0 20px 22px;
    background: #ffffff;
    border-top: 0;
    border-left: 0;
  }

  .on-site-card__header {
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 23px;
  }

  .on-site-logo {
    width: 78px;
    height: 78px;
    flex-basis: 78px;
    border-radius: 17px;
  }

  .on-site-logo span {
    max-width: 62px;
    font-size: 18px;
  }

  .on-site-title {
    margin-top: 6px;
    font-size: 28px;
    line-height: 1.12;
    letter-spacing: -0.7px;
  }

  .on-site-domain {
    font-size: 12px;
  }

  .on-site-tags {
    margin-top: 11px;
  }

  .on-site-description-wrap {
    padding: 23px 0;
  }

  .on-site-lead {
    font-size: 14px;
    line-height: 1.7;
  }

  .on-site-description {
    font-size: 13px;
    line-height: 1.75;
  }

  .on-site-block {
    padding-top: 24px;
  }

  .on-site-block + .on-site-block {
    margin-top: 24px;
  }

  .on-site-block__heading h2 {
    font-size: 19px;
  }

  .on-site-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .on-md-stat {
    padding: 15px 13px;
  }

  .on-md-stat strong {
    font-size: 15px;
  }

  .on-site-details {
    grid-template-columns: 1fr;
  }

  .on-md-detail:nth-child(odd) {
    border-right: 0;
  }

  .on-md-detail:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--on-border);
  }

  .on-md-detail:last-child {
    border-bottom: 0;
  }

  .on-site-order {
    position: static;
    padding: 23px 20px;
    background: #f8fafc;
    box-shadow: none;
  }

  .on-site-order__price {
    font-size: 27px;
  }

}


@media (max-width: 430px) {

  .on-site-container {
    padding: 0 15px;
  }

  .on-site-card__main {
    padding: 20px 16px 24px;
  }

  .on-site-card__sidebar {
    padding: 0 16px 18px;
  }

  .on-site-card__header {
    gap: 13px;
  }

  .on-site-logo {
    width: 66px;
    height: 66px;
    flex-basis: 66px;
  }

  .on-site-title {
    font-size: 24px;
  }

  .on-site-stats {
    grid-template-columns: 1fr;
  }

  .on-md-stat,
  .on-md-stat:nth-child(2n),
  .on-md-stat:nth-child(4n) {
    border-right: 0;
    border-bottom: 1px solid var(--on-border);
  }

  .on-md-stat:last-child {
    border-bottom: 0;
  }

}


#onMediaLoading[hidden],
#onMediaError[hidden],
#onMediaContent[hidden],
#onMdLogo[hidden],
#onMdLogoFallback[hidden],
#onMdDetailsCard[hidden] {
  display: none !important;
}

/* ON-NEWS V2 — HTML */

.on-site-card--single {
    display: block;
  }

  .on-site-card--single .on-site-card__main {
    width: 100%;
    max-width: none;
  }

.on-metrics-top {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}

.on-metric-card {
    position: relative;
    overflow: hidden;
    min-height: 68px;
    padding: 11px 14px;
    border: 1px solid #ececec;
    border-radius: 14px;
    background: #fff;
}

.on-metric-card span {
    display: block;
    margin-bottom: 4px;
    color: #7a7a7a;
    font-size: 11px;
    line-height: 1.25;
}

.on-metric-card strong {
    display: block;
    color: #111;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
}

  .on-site-block__heading--offers {
    align-items: flex-end;
  }

  .on-site-block__heading p {
    margin: 7px 0 0;
    color: #777;
    font-size: 14px;
    line-height: 1.5;
  }

  .on-offers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .on-offers.on-offers--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .on-offers.on-offers--one {
    grid-template-columns: minmax(0, 520px);
  }

.on-offer-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 19px;
    border: 1px solid #e6e6e6;
    border-radius: 18px;
    background: #fff;
    transition:
      background-color .2s ease,
      border-color .2s ease,
      box-shadow .2s ease,
      transform .2s ease;
}

.on-offer-card:hover {
    background: #fffdf2;
    border-color: #d2bf00;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .07);
    transform: translateY(-2px);
}

  .on-offer-card__type {
    display: inline-flex;
    align-self: flex-start;
    margin-bottom: 14px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #fff7b2;
    color: #111;
    font-size: 12px;
    font-weight: 700;
  }
.on-offer-card__price {
    display: block;
    margin-top: 14px;
    color: #111;
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: -.02em;
  }


  .on-offer-option {
    margin-top: 17px;
  }

  .on-offer-option__label {
    display: block;
    margin-bottom: 9px;
    color: #777;
    font-size: 13px;
    line-height: 1.35;
  }

  .on-offer-option__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

.on-offer-choice {
  appearance: none;
  padding: 10px 16px;
  border: 1px solid #ece7b5;
  border-radius: 12px;
  background: #fffdf1;
  color: #555;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}

.on-offer-choice:hover {
  background: #FFEF73;
  border-color: #E5C100;
  color: #111;
  box-shadow: 0 8px 18px rgba(255,228,0,.18);
}

.on-offer-choice.is-active {
  background: #FFE400;
  border-color: #FFE400;
  color: #111;
  box-shadow: 0 8px 18px rgba(255,228,0,.28);
}

  .on-offer-warning {
    position: relative;
    margin-top: 12px;
    padding: 11px 12px 11px 37px;
    border: 1px solid #f0dfa0;
    border-radius: 12px;
    background: #fffbea;
    color: #50491f;
    font-size: 12px;
    line-height: 1.5;
  }

  .on-offer-warning::before {
    content: "!";
    position: absolute;
    top: 11px;
    left: 12px;
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #FFE400;
    color: #111;
    font-size: 11px;
    font-weight: 900;
  }

  .on-offer-price-note {
    display: block;
    margin-top: 5px;
    color: #777;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
  }

  .on-offer-card__links {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
  }

  .on-offer-chip {
    padding: 6px 9px;
    border: 1px solid #e5e5e5;
    border-radius: 999px;
    background: #fafafa;
    color: #444;
    font-size: 12px;
    font-weight: 600;
  }

  .on-offer-card__facts {
    display: grid;
    gap: 9px;
    margin-top: 17px;
    padding-top: 15px;
    border-top: 1px solid #ededed;
  }

  .on-offer-fact {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: 13px;
    line-height: 1.4;
  }

  .on-offer-fact span {
    color: #777;
  }

  .on-offer-fact strong {
    color: #222;
    text-align: right;
  }
  .on-writing-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 16px;
    padding: 15px 16px;
    border: 1px solid #eadb72;
    border-radius: 14px;
    background: #fffbea;
  }

  .on-writing-note__icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #FFE400;
    color: #111;
    font-size: 13px;
    font-weight: 900;
  }

  .on-writing-note p {
    margin: 1px 0 0;
    color: #4d471e;
    font-size: 13px;
    line-height: 1.55;
  }

  .on-offer-socials {
    margin-top: 19px;
    padding-top: 16px;
    border-top: 1px solid #ededed;
  }

  .on-offer-socials__title {
    display: block;
    margin-bottom: 10px;
    color: #777;
    font-size: 13px;
    line-height: 1.35;
  }

  .on-social-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid #f0f0f0;
    background: transparent;
    color: #222;
    font: inherit;
    cursor: pointer;
    text-align: left;
  }

  .on-social-option:last-child {
    border-bottom: 0;
  }

  .on-social-option__left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .on-social-option__check {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 19px;
    height: 19px;
    border: 1px solid #bdbdbd;
    border-radius: 5px;
    background: #fff;
    color: transparent;
    font-size: 12px;
    font-weight: 900;
    transition:
      border-color .18s ease,
      background .18s ease,
      color .18s ease;
  }

  .on-social-option.is-active .on-social-option__check {
    border-color: #111;
    background: #FFE400;
    color: #111;
  }

  .on-social-option__name {
    overflow: hidden;
    color: #222;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .on-social-option__price {
    flex: 0 0 auto;
    color: #555;
    font-size: 13px;
    font-weight: 700;
  }

  .on-price-breakdown {
    margin-top: 19px;
    padding: 15px;
    border: 1px solid #ececec;
    border-radius: 14px;
    background: #fafafa;
  }

  .on-price-breakdown__title {
    display: block;
    margin-bottom: 11px;
    color: #777;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  .on-price-breakdown__row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 5px 0;
    color: #444;
    font-size: 13px;
    line-height: 1.4;
  }

  .on-price-breakdown__row strong {
    flex: 0 0 auto;
    color: #222;
    text-align: right;
  }

  .on-price-breakdown__total {
    margin-top: 9px;
    padding-top: 11px;
    border-top: 1px solid #dedede;
    color: #111;
    font-size: 14px;
    font-weight: 800;
  }

.on-order-btn {
  width: 100%;
  margin-top: 28px;
  padding: 15px 18px;

  border: 1px solid #f0d800;
  border-radius: 14px;

  background: linear-gradient(
    180deg,
    #ffea4f 0%,
    #ffe400 100%
  );

  color: #111;
  font: inherit;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.2;

  cursor: pointer;

  box-shadow:
    0 8px 22px rgba(255, 228, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .7);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.on-order-btn:hover {
  transform: translateY(-2px);

  background: linear-gradient(
    180deg,
    #ffed65 0%,
    #ffe71a 100%
  );

  box-shadow:
    0 13px 28px rgba(255, 228, 0, .3),
    inset 0 1px 0 rgba(255, 255, 255, .8);
}

.on-order-btn:active {
  transform: translateY(0);

  box-shadow:
    0 5px 14px rgba(255, 228, 0, .2),
    inset 0 1px 0 rgba(255, 255, 255, .65);
}

.on-order-btn:focus-visible {
  outline: 3px solid rgba(255, 228, 0, .32);
  outline-offset: 3px;
}

.on-placement-info {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .on-placement-info__item {
    min-height: 112px;
    padding: 17px;
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    background: #fff;
  }

  .on-placement-info__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 13px;
    border-radius: 10px;
    background: #FFE400;
    color: #111;
    font-size: 17px;
    font-weight: 800;
  }

  .on-placement-info__item span {
    display: block;
    margin-bottom: 5px;
    color: #777;
    font-size: 12px;
    line-height: 1.35;
  }

  .on-placement-info__item strong {
    display: block;
    color: #111;
    font-size: 15px;
    line-height: 1.45;
  }

  .on-site-seo {
    margin-top: 24px;
  }

  .on-site-seo .on-site-description {
    max-width: 940px;
    color: #4b4b4b;
    font-size: 15px;
    line-height: 1.75;
  }

  .on-site-seo .on-site-description p {
    margin: 0 0 14px;
  }

  .on-site-seo .on-site-description p:last-child {
    margin-bottom: 0;
  }

  .on-related {
    margin-top: 24px;
  }

  .on-related__heading {
    align-items: flex-end;
  }

  .on-related__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  .on-related-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 210px;
    padding: 17px;
    border: 1px solid #ececec;
    border-radius: 17px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition:
      border-color .2s ease,
      box-shadow .2s ease,
      transform .2s ease;
  }

  .on-related-card:hover {
    border-color: #ead65a;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .07);
    transform: translateY(-2px);
  }

  .on-related-card__top {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  .on-related-card__logo {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    overflow: hidden;
    width: 46px;
    height: 46px;
    border: 1px solid #f0f0f0;
    border-radius: 13px;
    background: #fafafa;
    color: #222;
    font-size: 13px;
    font-weight: 800;
  }

  .on-related-card__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .on-related-card__identity {
    min-width: 0;
  }

  .on-related-card__name {
    display: block;
    overflow: hidden;
    color: #111;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .on-related-card__domain {
    display: block;
    overflow: hidden;
    margin-top: 4px;
    color: #888;
    font-size: 12px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .on-related-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 15px;
  }

  .on-related-card__tag {
    display: inline-flex;
    max-width: 100%;
    padding: 5px 8px;
    border-radius: 999px;
    background: #fff8c9;
    color: #4d471e;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
  }
  
.on-related-card__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.on-related-card__metric {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #eeeeee;
  border-radius: 11px;
  background: #fafafa;
}

.on-related-card__metric span {
  display: block;
  overflow: hidden;
  margin-bottom: 4px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #888;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.on-related-card__metric strong {
  display: block;
  overflow: hidden;
  color: #111;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

  .on-related-card__bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
  }

  .on-related-card__price span {
    display: block;
    margin-bottom: 3px;
    color: #888;
    font-size: 11px;
    line-height: 1.2;
  }

  .on-related-card__price strong {
    display: block;
    color: #111;
    font-size: 16px;
    line-height: 1.2;
  }

  .on-related-card__arrow {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: #FFE400;
    color: #111;
    font-size: 17px;
    font-weight: 800;
    transition: transform .2s ease;
  }

  .on-related-card:hover .on-related-card__arrow {
    transform: translateX(2px);
  }

  @media (max-width: 1100px) {
    .on-related__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }


.on-mobile-scroll-hint {
  display: none;
}

.on-mobile-scroll-hint[hidden] {
  display: none !important;
}


@media (max-width: 980px) {
  .on-metrics-top,
  .on-placement-info {
    grid-template-columns: 1fr;
  }

  .on-offers,
  .on-offers.on-offers--two {
    grid-template-columns: 1fr;
  }

  .on-offers.on-offers--one {
    grid-template-columns: 1fr;
  }

  .on-metrics-top {
    gap: 7px;
    margin-top: 14px;
  }

  .on-metric-card {
    min-height: 62px;
    padding: 10px 12px;
    border-radius: 12px;
  }

  .on-metric-card span {
    margin-bottom: 3px;
    font-size: 10px;
  }

  .on-metric-card strong {
    font-size: 17px;
  }

  .on-related__heading {
    align-items: flex-start;
    gap: 14px;
  }

  .on-related__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


@media (max-width: 760px) {
    
    
.on-offer-card:hover,
.on-related-card:hover {
  transform: none;
  box-shadow: none;
}

.on-offer-card:hover {
  border-color: #e6e6e6;
}

.on-related-card:hover {
  border-color: #ececec;
}

  
  .on-offers,
  .on-offers.on-offers--two,
  .on-offers.on-offers--one {
    display: flex;
    grid-template-columns: none;
    gap: 12px;

    margin-right: -20px;
    padding: 6px 20px 6px 0;

    overflow-x: auto;
    overflow-y: visible;

    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    overscroll-behavior-x: contain;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .on-offers::-webkit-scrollbar {
    display: none;
  }

  .on-offer-card {
    width: min(82vw, 320px);
    min-width: min(82vw, 320px);
    max-width: min(82vw, 320px);
    flex: 0 0 min(82vw, 320px);

    min-height: auto;
    scroll-snap-align: start;
  }

  
  .on-related__grid {
    display: flex;
    grid-template-columns: none;
    gap: 12px;

    margin-right: -20px;
    padding-right: 20px;
    padding-bottom: 5px;

    overflow-x: auto;
    overflow-y: visible;

    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    overscroll-behavior-x: contain;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .on-related__grid::-webkit-scrollbar {
    display: none;
  }

  .on-related-card {
    width: min(76vw, 280px);
    min-width: min(76vw, 280px);
    max-width: min(76vw, 280px);
    flex: 0 0 min(76vw, 280px);

    min-height: 190px;
    scroll-snap-align: start;
  }

  
.on-mobile-scroll-hint {
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  gap: 6px;

  margin-top: 10px;
  margin-left: auto;
  padding: 5px 9px;

  border: 1px solid #f0d64f;
  border-radius: 8px;
  background: #fff8c9;

  color: #39330f;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;

  box-shadow: 0 4px 10px rgba(255, 228, 0, .14);
}

.on-mobile-scroll-hint b {
  display: inline-block;
  color: #111;
  font-size: 16px;
  line-height: 1;
  font-weight: 900;
  animation: on-scroll-hint-arrow 1.15s ease-in-out infinite;
}

.on-mobile-scroll-hint--offers {
  margin-top: 0;
  margin-bottom: 10px;
}

.on-mobile-scroll-hint--related {
  margin-top: 10px;
  margin-bottom: 0;
}

@keyframes on-scroll-hint-arrow {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(5px);
  }
}
}


#media-catalog .on-catalog__grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch;
}

#media-catalog .on-catalog-card {
  min-width: 0;
  width: 100%;
}


#media-catalog .on-catalog__pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  width: 100% !important;
  margin: 30px 0 0 !important;
  padding: 0 !important;
}

#media-catalog .on-catalog__pagination[hidden] {
  display: none !important;
}

#media-catalog .on-catalog__page-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-width: 40px !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #e1e4e8 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #171717 !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease !important;
}

#media-catalog .on-catalog__page-button:hover:not(:disabled):not(.is-active) {
  border-color: #171717 !important;
  transform: translateY(-1px);
}

#media-catalog .on-catalog__page-button.is-active {
  border-color: #FFE400 !important;
  background: #FFE400 !important;
  color: #111 !important;
  cursor: default !important;
}

#media-catalog .on-catalog__page-button:disabled {
  opacity: .35 !important;
  cursor: default !important;
  transform: none !important;
}

#media-catalog .on-catalog__page-button--nav {
  min-width: 40px !important;
  width: 40px !important;
}

#media-catalog .on-catalog__page-button svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#media-catalog .on-catalog__page-dots {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 24px !important;
  height: 40px !important;
  margin: 0 !important;
  color: #777 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

@media (max-width: 1250px) {
  #media-catalog .on-catalog__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  #media-catalog .on-catalog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


#media-catalog .on-catalog-card__description {
  display: none !important;
}

#media-catalog .on-catalog-card__top {
  margin-bottom: 18px !important;
}

#media-catalog .on-catalog-card__metrics {
  margin-top: 0 !important;
}

@media (max-width: 560px) {
  #media-catalog .on-catalog__grid {
    grid-template-columns: 1fr !important;
  }

  #media-catalog .on-catalog__pagination {
    gap: 5px !important;
    margin-top: 24px !important;
  }

  #media-catalog .on-catalog__page-button,
  #media-catalog .on-catalog__page-button--nav {
    min-width: 36px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
  }

  #media-catalog .on-catalog__page-dots {
    width: 18px !important;
    height: 36px !important;
  }
}


#media-catalog .on-catalog__sort,
#media-catalog .on-catalog__select {
  position: relative !important;
}

#media-catalog .on-catalog__select select {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  cursor: pointer !important;
}

#media-catalog .on-catalog__select-icon,
#media-catalog .on-catalog__select > span {
  pointer-events: none !important;
  z-index: 3 !important;
}

@media (min-width: 821px) {
  #media-catalog .on-catalog__filters {
    position: sticky !important;
    top: 90px !important;
    align-self: start !important;
    max-height: calc(100vh - 110px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    padding-right: 8px !important;
  }

  #media-catalog .on-catalog__filters::-webkit-scrollbar {
    width: 6px;
  }

  #media-catalog .on-catalog__filters::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.18);
    border-radius: 20px;
  }
}
#media-catalog .on-catalog-card__button{
    font-size: 13px;
font-weight: 650;
letter-spacing: .15px;
}


#media-catalog .on-catalog-card__top {
  display: flex;
  align-items: center;
  gap: 14px;
}

#media-catalog .on-catalog-card__top-link {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1 1 auto;
  color: inherit;
  text-decoration: none;
}

#media-catalog .on-catalog-card__compare {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #f5e7a2;
  border-radius: 9px;
  background: #fff9df;
  color: #c99f00;
  cursor: pointer;
  transition: all .18s ease;
}

#media-catalog .on-catalog-card__compare:hover {
  transform: translateY(-1px);
  background: #fff3a8;
  border-color: #e6c400;
  color: #111;
}

#media-catalog .on-catalog-card__compare::after {
  content: "Добавить к сравнению";
  position: absolute;
  right: 0;
  bottom: calc(100% + 9px);
  z-index: 20;
  width: max-content;
  max-width: 180px;
  padding: 7px 10px;
  border-radius: 8px;
  background: #111;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

#media-catalog .on-catalog-card__compare:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#media-catalog .on-catalog-card__compare.is-selected::after {
  content: "Убрать из сравнения";
}

#media-catalog .on-catalog-card__compare.is-selected {
  border-color: #111;
  background: #FFE400;
  color: #111;
}

#media-catalog .on-catalog-card__compare svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#media-catalog .on-catalog-card__compare .on-compare-check {
  display: none;
}

#media-catalog .on-catalog-card__compare.is-selected .on-compare-icon {
  display: none;
}

#media-catalog .on-catalog-card__compare.is-selected .on-compare-check {
  display: block;
}

#media-catalog .on-compare-dock {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 9998;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(620px, calc(100vw - 32px));
  padding: 12px 14px 12px 18px;
  border: 1px solid #dfe5ee;
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 55px rgba(24,39,75,.18);
  backdrop-filter: blur(12px);
}

#media-catalog .on-compare-dock[hidden] {
  display: none !important;
}

#media-catalog .on-compare-dock__text {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 2px;
}

#media-catalog .on-compare-dock__text strong {
  color: #0c1c3d;
  font-size: 15px;
  line-height: 1.25;
}

#media-catalog .on-compare-dock__text span {
  color: #8491a8;
  font-size: 13px;
  line-height: 1.3;
}

#media-catalog .on-compare-dock__open {
  min-height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 13px;
  background: #FFE400;
  color: #071431;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

#media-catalog .on-compare-dock__open:disabled {
  background: #edf0f5;
  color: #99a3b5;
  cursor: default;
}

#media-catalog .on-compare-dock__open span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
}

#media-catalog .on-compare-dock__clear,
#media-catalog .on-compare-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #f2f4f8;
  color: #5f6f89;
  cursor: pointer;
}

#media-catalog .on-compare-dock__clear svg,
#media-catalog .on-compare-modal__close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

#media-catalog .on-compare-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
}

#media-catalog .on-compare-modal[hidden] {
  display: none !important;
}

#media-catalog .on-compare-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6,17,41,.62);
  backdrop-filter: blur(4px);
}

#media-catalog .on-compare-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(1100px, 100%);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(0,0,0,.28);
}

#media-catalog .on-compare-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 26px 18px;
  border-bottom: 1px solid #e7ebf1;
}

#media-catalog .on-compare-modal__head h2 {
  margin: 0 0 5px;
  color: #0b1a39;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.15;
}

#media-catalog .on-compare-modal__head p {
  margin: 0;
  color: #8793a8;
  font-size: 14px;
}

#media-catalog .on-compare-modal__content {
  max-height: calc(100vh - 150px);
  overflow: auto;
  padding: 24px 26px 28px;
}

#media-catalog .on-compare-table {
  display: grid;
  min-width: 720px;
  border: 1px solid #e1e7f0;
  border-radius: 18px;
  overflow: hidden;
}

#media-catalog .on-compare-row {
  display: grid;
  grid-template-columns: 190px repeat(var(--compare-columns), minmax(170px, 1fr));
}

#media-catalog .on-compare-row + .on-compare-row {
  border-top: 1px solid #e6ebf2;
}

#media-catalog .on-compare-label,
#media-catalog .on-compare-cell {
  min-width: 0;
  padding: 16px;
}

#media-catalog .on-compare-label {
  display: flex;
  align-items: center;
  background: #f7f9fc;
  color: #65738d;
  font-size: 13px;
  font-weight: 600;
}

#media-catalog .on-compare-cell {
  position: relative;
  display: flex;
  align-items: center;
  border-left: 1px solid #e6ebf2;
  color: #0c1b3a;
  font-size: 15px;
  font-weight: 650;
}

#media-catalog .on-compare-cell.is-best {
  background: #edf9ef;
  color: #176b2d;
}

#media-catalog .on-compare-cell.is-best::after {
  display: none;
  content: none;
}

#media-catalog .on-compare-row--sites .on-compare-label {
  align-items: flex-start;
  padding-top: 23px;
}

#media-catalog .on-compare-site {
  align-items: stretch;
  flex-direction: column;
  gap: 14px;
  padding: 18px 16px;
}

#media-catalog .on-compare-site__head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#media-catalog .on-compare-site__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border: 1px solid #e1e7f0;
  border-radius: 14px;
  background: #fff;
}

#media-catalog .on-compare-site__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#media-catalog .on-compare-site__identity {
  min-width: 0;
  flex: 1 1 auto;
}

#media-catalog .on-compare-site__identity strong,
#media-catalog .on-compare-site__identity span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#media-catalog .on-compare-site__identity strong {
  color: #0a1938;
  font-size: 16px;
}

#media-catalog .on-compare-site__identity span {
  margin-top: 4px;
  color: #8a96aa;
  font-size: 13px;
  font-weight: 400;
}

#media-catalog .on-compare-site__remove {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #f1f3f7;
  color: #7b879b;
  cursor: pointer;
}

#media-catalog .on-compare-site__remove svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

#media-catalog .on-compare-site__order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 15px;
  border-radius: 12px;
  background: #FFE400;
  color: #071431;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}

#media-catalog .on-compare-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#media-catalog .on-compare-links span {
  padding: 5px 8px;
  border-radius: 8px;
  background: #f0f3f7;
  color: #5c6b84;
  font-size: 12px;
  font-weight: 650;
}

body.on-compare-lock {
  overflow: hidden;
}

@media (max-width: 680px) {

  #media-catalog .on-compare-dock {
    bottom: 12px;
    gap: 10px;
    padding: 10px 10px 10px 14px;
  }

  #media-catalog .on-compare-dock__text strong {
    font-size: 14px;
  }

  #media-catalog .on-compare-dock__text span {
    display: none;
  }

  #media-catalog .on-compare-dock__open {
    min-height: 42px;
    padding: 0 13px;
    font-size: 13px;
  }

  #media-catalog .on-compare-dock__clear {
    width: 40px;
    height: 40px;
  }

  #media-catalog .on-compare-modal {
    padding: 10px;
  }

  #media-catalog .on-compare-modal__dialog {
    max-height: calc(100vh - 20px);
    border-radius: 18px;
  }

  #media-catalog .on-compare-modal__head {
    padding: 18px 16px 14px;
  }

  #media-catalog .on-compare-modal__content {
    max-height: calc(100vh - 118px);
    padding: 14px 16px 20px;
  }
}

@media (max-width: 820px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Всеукраинские */
  .on-national-filter__select select,
  .on-national-sort select,
  .on-national-extra__select select,

  /* Основной каталог */
  #media-catalog .on-catalog__select select,
  #media-catalog .on-catalog__sort select {
    font-size: 15px !important;
  }
}

/* SAFE LARGE DESKTOP WIDTHS — 1600px */
@media (min-width:1600px){
  .on-cta__inner{
    max-width:1440px;
  }

  .on-catalog-hero__breadcrumbs-wrap{
    max-width:1480px;
  }

  .on-catalog-hero__inner{
    max-width:1440px;
  }

  .on-catalog__inner{
    max-width:1600px;
  }
}

/* MOBILE FULL-WIDTH FIX — hero — HTML Tilda */
@media (max-width: 820px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .on-catalog-hero,
  #media-catalog.on-catalog {
    position: relative;
    left: 50%;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
  }

  .on-catalog-hero__breadcrumbs-wrap,
  .on-catalog-hero__inner,
  #media-catalog .on-catalog__inner {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

  #media-catalog .on-catalog__toolbar,
  #media-catalog .on-catalog__layout,
  #media-catalog .on-catalog__content,
  #media-catalog .on-catalog__grid,
  #media-catalog .on-catalog-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  #media-catalog .on-catalog__grid {
    grid-template-columns: 1fr !important;
  }

}
/* Убираем встроенный крестик Safari/Chrome */
#onCatalogSearch::-webkit-search-decoration,
#onCatalogSearch::-webkit-search-cancel-button,
#onCatalogSearch::-webkit-search-results-button,
#onCatalogSearch::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.on-catalog__multiselect{
  position:relative;
  width:100%;
}

.on-catalog__multiselect-button{
  width:100%;
  min-height:44px;
  padding:0 40px 0 13px;
  position:relative;

  display:flex;
  align-items:center;

  border:1px solid #dfe6ef;
  border-radius:9px;
  background:#fff;
  color:var(--on-navy);

  font-family:'Manrope', Arial, sans-serif;
  font-size:12px;
  line-height:1.2;
  text-align:left;

  cursor:pointer;
  box-sizing:border-box;
}

.on-catalog__multiselect-value{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.on-catalog__multiselect-arrow{
  position:absolute;
  right:12px;
  top:50%;

  width:18px;
  height:18px;

  transform:translateY(-50%);

  display:flex;
  align-items:center;
  justify-content:center;

  color:#7a879b;
  transition:transform .2s ease;
}

.on-catalog__multiselect-arrow svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.on-catalog__multiselect-button[aria-expanded="true"]
.on-catalog__multiselect-arrow{
  transform:translateY(-50%) rotate(180deg);
}

.on-catalog__multiselect-dropdown{
  position:absolute;
  z-index:50;

  top:calc(100% + 6px);
  left:0;

  width:100%;
  max-height:260px;
  padding:10px;

  overflow-y:auto;

  background:#fff;
  border:1px solid #dfe6ef;
  border-radius:10px;

  box-shadow:0 14px 34px rgba(8,23,53,.12);
  box-sizing:border-box;
}

.on-catalog__multiselect-dropdown[hidden]{
  display:none;
}
.on-catalog-card__actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) 42px;
  gap:10px;
  margin-top:auto;
}

.on-catalog-card__actions .on-catalog-card__button{
  width:100%;
  margin:0;
}

.on-catalog-card__actions .on-catalog-card__compare{
  width:42px;
  height:100%;
  min-height:44px;
}

.on-catalog__page-button{
  text-decoration:none;
  box-sizing:border-box;
}

.on-catalog__page-button:link,
.on-catalog__page-button:visited{
  color:inherit;
}

.on-catalog__page-button.is-disabled{
  pointer-events:none;
  opacity:.4;
  cursor:default;
}
.on-placement-info__item strong{
  white-space:pre-line;
}
/* =========================================================
   ON-NEWS — ВСЕУКРАИНСКИЕ СМИ
   Добавить в самый низ общего CSS
   ========================================================= */

.on-national-catalog{
  padding-top:30px;
}

.on-national-catalog__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:16px;
}

.on-national-catalog__content{
  width:100%;
}

/* Технические элементы старой логики — не показываем */
.on-national-compat{
  display:none !important;
}

/* =========================
   ВЕРХНЯЯ ПАНЕЛЬ ФИЛЬТРОВ
   ========================= */

.on-national-filters{
  position:relative;
  z-index:20;
  display:grid;
  grid-template-columns:
    minmax(190px,.9fr)
    minmax(170px,.8fr)
    minmax(220px,1fr)
    150px
    230px;
  gap:10px;
  align-items:stretch;
  margin-bottom:10px;
  padding:12px;
  background:#fff;
  border:1px solid var(--on-border);
  border-radius:16px;
  box-shadow:var(--on-shadow-sm);
}

.on-national-filter{
  min-width:0;
  min-height:58px;
  padding:8px 11px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:#f8fafc;
  border:1px solid #edf1f6;
  border-radius:11px;
  box-sizing:border-box;
}

.on-national-filter__label{
  display:block;
  margin-bottom:5px;
  color:var(--on-muted);
  font-size:9px;
  line-height:1.2;
  font-weight:700;
}

/* Тип ссылки */

.on-national-links{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
}

.on-national-link{
  cursor:pointer;
}

.on-national-link input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.on-national-link span{
  min-height:32px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #dfe6ef;
  border-radius:8px;
  background:#fff;
  color:#53637a;
  font-size:11px;
  line-height:1;
  font-weight:800;
  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease;
}

.on-national-link:hover span{
  border-color:#d2bd31;
}

.on-national-link input:checked + span{
  background:var(--on-yellow);
  border-color:var(--on-yellow);
  color:var(--on-navy);
}

/* Select */

.on-national-filter__select{
  position:relative;
  display:block;
}

.on-national-filter__select select{
  width:100%;
  height:29px;
  padding:0 28px 0 0;
  border:0;
  outline:0;
  background:transparent;
  appearance:none;
  -webkit-appearance:none;
  color:var(--on-navy);
  font-family:inherit;
  font-size:11px;
  line-height:1.2;
  font-weight:700;
  cursor:pointer;
}

.on-national-filter__select svg{
  position:absolute;
  top:50%;
  right:2px;
  width:15px;
  height:15px;
  transform:translateY(-50%);
  fill:none;
  stroke:#8491a5;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}

/* Цена */

.on-national-price{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}

.on-national-price label{
  position:relative;
}

.on-national-price label span{
  position:absolute;
  top:50%;
  left:8px;
  transform:translateY(-50%);
  color:#96a1b2;
  font-size:9px;
  line-height:1;
  pointer-events:none;
}

.on-national-price input{
  width:100%;
  height:29px;
  padding:0 7px 0 24px;
  border:1px solid #dfe6ef;
  border-radius:7px;
  outline:0;
  background:#fff;
  color:var(--on-navy);
  font-family:inherit;
  font-size:10px;
  font-weight:700;
  box-sizing:border-box;
}

.on-national-price input:focus{
  border-color:var(--on-yellow);
  box-shadow:0 0 0 3px rgba(248,217,73,.13);
}

/* Ещё фильтры */

.on-national-more{
  min-height:58px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid var(--on-border);
  border-radius:11px;
  background:#fff;
  color:var(--on-navy);
  font-family:inherit;
  font-size:10px;
  line-height:1.2;
  font-weight:800;
  cursor:pointer;
  transition:
    border-color .2s ease,
    background .2s ease;
}

.on-national-more:hover,
.on-national-more[aria-expanded="true"]{
  border-color:var(--on-yellow);
  background:var(--on-yellow-soft);
}

.on-national-more > svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
}

/* Сортировка */

.on-national-sort{
  width:100%;
  height:auto;
  min-height:58px;
  box-shadow:none;
  border-radius:11px;
}

/* =========================
   ДОПОЛНИТЕЛЬНЫЕ ФИЛЬТРЫ
   ========================= */

.on-national-extra{
  position:relative;
  z-index:15;
  display:grid;
  grid-template-columns:150px 150px 280px 1fr auto;
  gap:10px;
  align-items:end;
  margin:-1px 0 18px;
  padding:14px;
  background:#fff;
  border:1px solid var(--on-border);
  border-radius:0 0 16px 16px;
  box-shadow:var(--on-shadow-sm);
}

.on-national-extra[hidden]{
  display:none;
}

.on-national-extra__field{
  min-width:0;
}

.on-national-extra__field > span{
  display:block;
  margin-bottom:6px;
  color:var(--on-navy);
  font-size:10px;
  line-height:1.3;
  font-weight:800;
}

.on-national-extra__field input,
.on-national-extra__field select{
  width:100%;
  height:39px;
  padding:0 11px;
  border:1px solid #dfe6ef;
  border-radius:8px;
  outline:0;
  background:#fff;
  color:#33445e;
  font-family:inherit;
  font-size:10px;
  font-weight:600;
  box-sizing:border-box;
}

.on-national-extra__field input:focus,
.on-national-extra__field select:focus{
  border-color:var(--on-yellow);
  box-shadow:0 0 0 3px rgba(248,217,73,.13);
}

.on-national-extra__select{
  position:relative;
}

.on-national-extra__select select{
  padding-right:35px;
  appearance:none;
  -webkit-appearance:none;
}

.on-national-extra__select svg{
  position:absolute;
  top:50%;
  right:11px;
  width:15px;
  height:15px;
  transform:translateY(-50%);
  fill:none;
  stroke:#8491a5;
  stroke-width:2;
  stroke-linecap:round;
  pointer-events:none;
}

.on-national-reset{
  grid-column:5;
  height:39px;
  padding:0 15px;
  border:1px solid #dfe6ef;
  border-radius:8px;
  background:#fff;
  color:#607086;
  font-family:inherit;
  font-size:10px;
  line-height:1;
  font-weight:800;
  cursor:pointer;
}

.on-national-reset:hover{
  border-color:#cbd5e1;
  color:var(--on-navy);
}

/* На этой странице каталог занимает всю ширину */

.on-national-catalog .on-catalog__grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

/* =========================
   TABLET
   ========================= */

@media(max-width:1100px){
  .on-national-filters{
    grid-template-columns:
      minmax(190px,1fr)
      minmax(170px,1fr)
      minmax(210px,1fr)
      145px;
  }

  .on-national-sort{
    grid-column:1 / -1;
  }

  .on-national-catalog .on-catalog__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* =========================
   MOBILE
   ========================= */

@media(max-width:720px){
  .on-national-catalog{
    padding-top:24px;
  }

  .on-national-filters{
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:9px;
  }

  .on-national-filter--links,
  .on-national-filter--price{
    grid-column:1 / -1;
  }

  .on-national-more,
  .on-national-sort{
    width:100%;
    min-height:49px;
  }

  .on-national-sort{
    grid-column:auto;
  }

  .on-national-extra{
    grid-template-columns:1fr 1fr;
  }

  .on-national-extra__field--language,
  .on-national-reset{
    grid-column:1 / -1;
  }

  .on-national-catalog .on-catalog__grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:430px){
  .on-national-filters{
    grid-template-columns:1fr;
  }

  .on-national-filter,
  .on-national-filter--links,
  .on-national-filter--price,
  .on-national-more,
  .on-national-sort{
    grid-column:1;
  }

  .on-national-extra{
    grid-template-columns:1fr;
  }

  .on-national-extra__field,
  .on-national-extra__field--language,
  .on-national-reset{
    grid-column:1;
  }
}
/* =========================
   REGIONS NAVIGATION
   ========================= */

.on-regions{
  width:100%;
  padding:38px 0 46px;
  background:#fff;
  font-family:'Manrope', Arial, sans-serif;
}

.on-regions__inner{
  max-width:1240px;
  margin:0 auto;
  padding:0 34px;
  box-sizing:border-box;
}

.on-regions__head{
  margin-bottom:22px;
}

.on-regions__eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 10px;
  margin-bottom:10px;

  border-radius:999px;

  background:var(--on-yellow-soft);
  color:var(--on-text);

  font-size:11px;
  line-height:1;
  font-weight:800;
}

.on-regions__title{
  margin:0 0 8px;

  font-size:28px;
  line-height:1.12;
  font-weight:800;
  letter-spacing:-.8px;

  color:var(--on-navy);
}

.on-regions__subtitle{
  max-width:700px;
  margin:0;

  font-size:14px;
  line-height:1.6;
  font-weight:500;

  color:#64748b;
}


/* GRID */

.on-regions__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}


/* CARD */

.on-region-card{
  min-width:0;
  min-height:66px;

  display:flex;
  align-items:center;
  gap:12px;

  padding:10px 14px;

  background:#fff;
  border:1px solid var(--on-border);
  border-radius:14px;

  color:var(--on-navy);
  text-decoration:none;

  box-shadow:0 7px 20px rgba(8,23,53,.03);

  box-sizing:border-box;

  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

.on-region-card:hover{
  transform:translateY(-3px);

  background:var(--on-yellow-bg);
  border-color:var(--on-yellow);

  box-shadow:0 14px 30px rgba(8,23,53,.08);
}


/* ICON */

.on-region-card__icon{
  width:38px;
  height:38px;
  flex:0 0 38px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:11px;

  background:var(--on-yellow-soft);
  color:var(--on-yellow);

  transition:
    transform .22s ease,
    background .22s ease,
    color .22s ease;
}

.on-region-card__icon svg{
  display:block;

  width:20px;
  height:20px;

  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.on-region-card:hover .on-region-card__icon{
  transform:scale(1.06);

  background:var(--on-yellow);
  color:var(--on-navy);
}


/* NAME */

.on-region-card__content{
  min-width:0;
  flex:1 1 auto;

  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
}

.on-region-card__name{
  display:block;

  font-size:13px;
  line-height:1.3;
  font-weight:700;

  color:var(--on-navy);
}

.on-region-card__count{
  display:block;

  font-size:10px;
  line-height:1.25;
  font-weight:500;

  color:var(--on-muted);
}


/* ARROW */

.on-region-card__arrow{
  flex:0 0 auto;

  font-size:18px;
  line-height:1;
  font-weight:500;

  color:#a1abba;

  transition:
    transform .22s ease,
    color .22s ease;
}

.on-region-card:hover .on-region-card__arrow{
  transform:translateX(4px);
  color:var(--on-navy);
}


/* =========================
   TABLET
   ========================= */

@media(max-width:1100px){

  .on-regions__grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

}


/* =========================
   MOBILE
   ========================= */

@media(max-width:760px){

  .on-regions{
    padding:30px 0 36px;
  }

  .on-regions__inner{
    padding:0 20px;
  }

  .on-regions__head{
    margin-bottom:18px;
  }

  .on-regions__title{
    font-size:22px;
    letter-spacing:-.5px;
  }

  .on-regions__subtitle{
    font-size:13px;
    line-height:1.55;
  }

  .on-regions__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .on-region-card{
    min-height:62px;
    padding:10px 11px;
    gap:9px;
    border-radius:12px;
  }

  .on-region-card__icon{
    width:34px;
    height:34px;
    flex-basis:34px;
    border-radius:10px;
  }

  .on-region-card__icon svg{
    width:18px;
    height:18px;
  }

  .on-region-card__name{
    font-size:12px;
    line-height:1.3;
  }

  .on-region-card__arrow{
    font-size:16px;
  }

}


/* =========================
   SMALL MOBILE
   ========================= */

@media(max-width:480px){

  .on-regions__grid{
    grid-template-columns:1fr;
    gap:9px;
  }

  .on-region-card{
    min-height:58px;
  }

  .on-region-card__name{
    font-size:13px;
  }

}
/* Выбранный вид размещения */
.on-offer-card.is-selected {
  opacity: 1;
  border-color: #ffe000;
}

/* Остальные виды размещения этой же площадки */
.on-offer-card.is-muted {
  opacity: 0.52;
  filter: grayscale(0.25);
  transition: opacity 0.2s ease, filter 0.2s ease;
}

/* Они всё равно остаются доступными для выбора */
.on-offer-card.is-muted:hover {
  opacity: 0.78;
  filter: grayscale(0);
}

/* Кнопка выбранного варианта */
.on-order-btn.is-added {
  opacity: 1;
}
/* =========================================================
   ON-NEWS — COPYWRITING HERO
   ========================================================= */

.on-copy-hero{
  width:100%;
  font-family:'Manrope', Arial, sans-serif;
  padding:74px 0 68px;
  overflow:hidden;
  background:#fff;
}

.on-copy-hero *,
.on-copy-hero *::before,
.on-copy-hero *::after{
  box-sizing:border-box;
}

.on-copy-hero__inner{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 34px;
}

.on-copy-hero__content{
  width:100%;
  max-width:900px;
  min-width:0;
}


/* LEFT */

.on-copy-hero__title{
  max-width:850px;
  margin:0 0 22px;

  color:var(--on-navy);

  font-size:50px;
  line-height:1.06;
  font-weight:800;
  letter-spacing:-1.7px;
}

.on-copy-hero__title span{
  color:#d0af00;
}

.on-copy-hero__text{
  max-width:760px;
  margin:0 0 30px;

  color:#52627a;

  font-size:16px;
  line-height:1.7;
  font-weight:500;
}

/* FEATURES */

.on-copy-hero__features{
  display:flex;
  flex-wrap:wrap;
  gap:12px 22px;
}

.on-copy-hero__feature{
  display:flex;
  align-items:center;
  gap:8px;

  color:#627086;

  font-size:11px;
  line-height:1.35;
  font-weight:600;
}

.on-copy-hero__feature-icon{
  width:20px;
  height:20px;
  flex:0 0 20px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:6px;

  background:var(--on-yellow-soft);
  color:#b99d00;
}

.on-copy-hero__feature-icon svg{
  width:12px;
  height:12px;

  fill:none;
  stroke:currentColor;
  stroke-width:2.1;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* TABLET */

@media(max-width:1000px){

  .on-copy-hero{
    padding:56px 0;
  }

  .on-copy-hero__inner{
    max-width:760px;
    grid-template-columns:1fr;
    gap:50px;
  }

  .on-copy-hero__title{
    max-width:650px;
  }

}


/* MOBILE */

@media(max-width:640px){

  .on-copy-hero{
    padding:42px 0 44px;
  }

  .on-copy-hero__inner{
    padding:0 20px;
    gap:34px;
  }

  .on-copy-hero__title{
    margin-bottom:18px;

    font-size:36px;
    line-height:1.07;
    letter-spacing:-1px;
  }

  .on-copy-hero__title br{
    display:none;
  }

  .on-copy-hero__text{
    margin-bottom:25px;

    font-size:14px;
    line-height:1.65;
  }

  .on-copy-hero__features{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  .on-copy-hero__paper{
    width:285px;
    min-height:295px;

    padding:22px;

    border-radius:20px;
  }

  .on-copy-hero__float{
    min-width:170px;
    padding:10px 11px;
  }

  .on-copy-hero__float--top{
    top:12px;
    right:0;
  }

  .on-copy-hero__float--bottom{
    left:0;
    bottom:8px;
  }

  .on-copy-hero__float-icon{
    width:31px;
    height:31px;
    flex-basis:31px;
  }

}

/* =========================================================
   ON-NEWS — COPYWRITING PRICE
   ========================================================= */

.on-copy-price{
  width:100%;
  padding:58px 0 66px;

  background:#fff;

  font-family:'Manrope',Arial,sans-serif;
}

.on-copy-price *,
.on-copy-price *::before,
.on-copy-price *::after{
  box-sizing:border-box;
}

.on-copy-price__inner{
  width:100%;
  max-width:1240px;

  margin:0 auto;
  padding:0 34px;
}


/* HEAD */

.on-copy-price__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:50px;

  margin-bottom:29px;
}

.on-copy-price__eyebrow{
  margin-bottom:9px;

  color:#b29700;

  font-size:10px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
}

.on-copy-price__title{
  max-width:620px;

  margin:0;

  color:var(--on-navy);

  font-size:30px;
  line-height:1.15;
  font-weight:800;

  letter-spacing:-.8px;
}

.on-copy-price__subtitle{
  max-width:430px;

  margin:0;

  color:#64748b;

  font-size:13px;
  line-height:1.65;
}


/* GRID */

.on-copy-price__grid{
  max-width:940px;

  margin:0 auto;

  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:18px;
}


/* CARD */

.on-copy-price-card{
  position:relative;

  min-width:0;

  padding:27px 27px 25px;

  display:flex;
  flex-direction:column;

  background:#fff;

  border:1px solid var(--on-border);
  border-radius:20px;

  box-shadow:0 12px 34px rgba(8,23,53,.055);

  transition:
    transform .24s ease,
    box-shadow .24s ease,
    border-color .24s ease;
}

.on-copy-price-card:hover{
  transform:translateY(-4px);

  border-color:#d7dee8;

  box-shadow:0 20px 45px rgba(8,23,53,.09);
}


/* FEATURED */

.on-copy-price-card--featured{
  border-color:rgba(248,217,73,.8);

  background:
    linear-gradient(
      180deg,
      var(--on-yellow-bg) 0,
      #fff 34%
    );
}

.on-copy-price-card--featured:hover{
  border-color:var(--on-yellow);
}


/* BADGE */

.on-copy-price-card__badge{
  position:absolute;

  top:20px;
  right:20px;

  min-height:25px;

  padding:0 10px;

  display:flex;
  align-items:center;

  border-radius:999px;

  background:var(--on-yellow);

  color:var(--on-navy);

  font-size:9px;
  line-height:1;
  font-weight:800;

  letter-spacing:.5px;
}


/* TOP */

.on-copy-price-card__top{
  display:flex;
  justify-content:space-between;
  align-items:center;

  margin-bottom:21px;
}

.on-copy-price-card__icon{
  width:48px;
  height:48px;
  flex:0 0 48px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:14px;

  background:var(--on-yellow-soft);

  color:#bea200;
}

.on-copy-price-card__icon svg{
  width:24px;
  height:24px;

  fill:none;
  stroke:currentColor;
  stroke-width:1.8;

  stroke-linecap:round;
  stroke-linejoin:round;
}

.on-copy-price-card__label{
  min-height:24px;

  padding:0 9px;

  display:inline-flex;
  align-items:center;

  border-radius:999px;

  background:#f4f6f9;

  color:#768397;

  font-size:9px;
  line-height:1;
  font-weight:800;
}


/* TITLE */

.on-copy-price-card__title{
  margin:0 0 9px;

  color:var(--on-navy);

  font-size:20px;
  line-height:1.25;
  font-weight:800;

  letter-spacing:-.4px;
}

.on-copy-price-card__text{
  min-height:61px;

  margin:0 0 23px;

  color:var(--on-text);

  font-size:12px;
  line-height:1.65;
}


/* PRICE */

.on-copy-price-card__price{
  display:flex;
  align-items:baseline;

  gap:8px;

  margin-bottom:3px;
}

.on-copy-price-card__price span{
  color:#8793a5;

  font-size:12px;
  line-height:1;
  font-weight:600;
}

.on-copy-price-card__price strong{
  color:var(--on-navy);

  font-size:30px;
  line-height:1.15;
  font-weight:800;

  letter-spacing:-.8px;
}

.on-copy-price-card__price-note{
  color:#909bad;

  font-size:10px;
  line-height:1.4;
}


/* DIVIDER */

.on-copy-price-card__divider{
  height:1px;

  margin:23px 0;

  background:#edf1f6;
}


/* LIST */

.on-copy-price-card__list{
  padding:0;
  margin:0 0 23px;

  list-style:none;

  display:flex;
  flex-direction:column;

  gap:11px;
}

.on-copy-price-card__list li{
  display:flex;
  align-items:flex-start;

  gap:9px;

  color:#53637a;

  font-size:11px;
  line-height:1.45;
  font-weight:600;
}

.on-copy-price-card__check{
  width:20px;
  height:20px;
  flex:0 0 20px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:6px;

  background:var(--on-yellow-soft);

  color:#b89d00;
}

.on-copy-price-card__check svg{
  width:12px;
  height:12px;

  fill:none;
  stroke:currentColor;
  stroke-width:2.2;

  stroke-linecap:round;
  stroke-linejoin:round;
}


/* EXTRA */

.on-copy-price-card__extra{
  margin-top:auto;
  margin-bottom:15px;

  padding:12px 13px;

  display:flex;
  justify-content:space-between;
  align-items:center;

  gap:12px;

  background:#f8fafc;

  border:1px solid #edf1f6;
  border-radius:10px;
}

.on-copy-price-card__extra span{
  color:#8591a3;

  font-size:9px;
  line-height:1.4;
  font-weight:600;
}

.on-copy-price-card__extra strong{
  color:var(--on-navy);

  font-size:10px;
  line-height:1.4;
  font-weight:800;

  text-align:right;
}


/* NOTE */

.on-copy-price__note{
  max-width:940px;

  margin:15px auto 0;
  padding:12px 15px;

  display:flex;
  align-items:center;

  gap:10px;

  background:var(--on-bg);

  border:1px solid #e9edf3;
  border-radius:11px;
}

.on-copy-price__note-icon{
  width:25px;
  height:25px;
  flex:0 0 25px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:8px;

  background:var(--on-yellow-soft);

  color:#a68e00;

  font-size:11px;
  line-height:1;
  font-weight:800;
}

.on-copy-price__note p{
  margin:0;

  color:#718096;

  font-size:10px;
  line-height:1.5;
  font-weight:500;
}


/* MOBILE */

@media(max-width:760px){

  .on-copy-price{
    padding:42px 0 48px;
  }

  .on-copy-price__inner{
    padding:0 20px;
  }

  .on-copy-price__head{
    display:block;

    margin-bottom:22px;
  }

  .on-copy-price__title{
    font-size:24px;
  }

  .on-copy-price__subtitle{
    max-width:none;

    margin-top:11px;

    font-size:12px;
    line-height:1.6;
  }

  .on-copy-price__grid{
    grid-template-columns:1fr;

    gap:12px;
  }

  .on-copy-price-card{
    padding:21px 18px 19px;

    border-radius:16px;
  }

  .on-copy-price-card__text{
    min-height:0;
  }

  .on-copy-price-card__price strong{
    font-size:27px;
  }

  .on-copy-price-card__extra{
    align-items:flex-start;
  }

  .on-copy-price__note{
    align-items:flex-start;
  }

}
/* =========================================================
   ON-NEWS — COPYWRITING PROCESS
   ========================================================= */

.on-copy-process{
  width:100%;
  padding:58px 0 66px;

  background:var(--on-bg);

  font-family:'Manrope',Arial,sans-serif;
}

.on-copy-process *,
.on-copy-process *::before,
.on-copy-process *::after{
  box-sizing:border-box;
}

.on-copy-process__inner{
  width:100%;
  max-width:1240px;

  margin:0 auto;
  padding:0 34px;
}


/* HEAD */

.on-copy-process__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:50px;

  margin-bottom:30px;
}

.on-copy-process__eyebrow{
  margin-bottom:9px;

  color:#b29700;

  font-size:10px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:1px;

  text-transform:uppercase;
}

.on-copy-process__title{
  margin:0;

  color:var(--on-navy);

  font-size:30px;
  line-height:1.15;
  font-weight:800;

  letter-spacing:-.8px;
}

.on-copy-process__subtitle{
  max-width:450px;

  margin:0;

  color:#64748b;

  font-size:13px;
  line-height:1.65;
  font-weight:500;
}


/* GRID */

.on-copy-process__grid{
  position:relative;

  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));

  gap:15px;
}


/* CONNECTION LINE */

.on-copy-process__grid::before{
  content:"";

  position:absolute;

  top:47px;
  left:8%;
  right:8%;

  height:1px;

  background:#dfe5ed;

  z-index:0;
}


/* ITEM */

.on-copy-process__item{
  position:relative;
  z-index:1;

  min-width:0;

  padding:20px 18px 19px;

  background:#fff;

  border:1px solid var(--on-border);
  border-radius:16px;

  box-shadow:var(--on-shadow-sm);

  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.on-copy-process__item:hover{
  transform:translateY(-4px);

  border-color:rgba(248,217,73,.9);

  box-shadow:0 16px 36px rgba(8,23,53,.075);
}


/* TOP */

.on-copy-process__top{
  position:relative;

  display:flex;
  justify-content:space-between;
  align-items:flex-start;

  margin-bottom:21px;
}


/* ICON */

.on-copy-process__icon{
  width:54px;
  height:54px;
  flex:0 0 54px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:16px;

  background:var(--on-yellow-soft);

  color:#bca000;

  border:6px solid #fff;

  box-shadow:0 0 0 1px #edf1f6;

  transition:
    background .22s ease,
    color .22s ease,
    transform .22s ease;
}

.on-copy-process__item:hover .on-copy-process__icon{
  transform:scale(1.04);

  background:var(--on-yellow);

  color:var(--on-navy);
}

.on-copy-process__icon svg{
  width:22px;
  height:22px;

  fill:none;
  stroke:currentColor;
  stroke-width:1.8;

  stroke-linecap:round;
  stroke-linejoin:round;
}


/* NUMBER */

.on-copy-process__number{
  color:#d7dde6;

  font-size:11px;
  line-height:1;
  font-weight:800;

  letter-spacing:.6px;
}


/* TEXT */

.on-copy-process__item h3{
  margin:0 0 9px;

  color:var(--on-navy);

  font-size:15px;
  line-height:1.35;
  font-weight:800;

  letter-spacing:-.2px;
}

.on-copy-process__item p{
  margin:0;

  color:#64748b;

  font-size:11px;
  line-height:1.65;
  font-weight:500;
}


/* TABLET */

@media(max-width:1000px){

  .on-copy-process__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .on-copy-process__grid::before{
    display:none;
  }

}


/* MOBILE */

@media(max-width:640px){

  .on-copy-process{
    padding:42px 0 46px;
  }

  .on-copy-process__inner{
    padding:0 20px;
  }

  .on-copy-process__head{
    display:block;

    margin-bottom:22px;
  }

  .on-copy-process__title{
    font-size:24px;
  }

  .on-copy-process__subtitle{
    max-width:none;

    margin-top:11px;

    font-size:12px;
    line-height:1.6;
  }

  .on-copy-process__grid{
    grid-template-columns:1fr;
    gap:11px;
  }

  .on-copy-process__item{
    padding:17px;
  }

  .on-copy-process__top{
    margin-bottom:15px;
  }

  .on-copy-process__icon{
    width:48px;
    height:48px;
    flex-basis:48px;

    border-radius:14px;
  }

  .on-copy-process__item h3{
    font-size:15px;
  }

}
.on-guarantees__grid--4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

@media(max-width:760px){
  .on-guarantees__grid--4{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:480px){
  .on-guarantees__grid--4{
    grid-template-columns:1fr;
  }
}
.on-radio-price{
  margin-bottom:3px;
  color:#081735;
  font-size:17px;
  line-height:1.25;
  font-weight:900;
}

.on-radio-price-note{
  margin-bottom:15px;
  color:#7a879b;
  font-size:10px;
  line-height:1.4;
}

/* =========================
   BLOG ARTICLES
   ========================= */

.on-blog-post{
  width:100%;
  padding:42px 0 70px;
  background:#fff;
  font-family:'Manrope', Arial, sans-serif;
  color:var(--on-text);
}

.on-blog-post *{
  box-sizing:border-box;
}

.on-blog-post__inner{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 34px;
}


/* BREADCRUMBS */

.on-blog-post__breadcrumbs{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:24px;
  font-size:11px;
  line-height:1.5;
  font-weight:600;
  color:var(--on-muted);
}

.on-blog-post__breadcrumbs a{
  color:var(--on-text);
  text-decoration:none;
  transition:color .2s ease;
}

.on-blog-post__breadcrumbs a:hover{
  color:var(--on-navy);
}

.on-blog-post__breadcrumbs span{
  color:#aab3c0;
}


/* HEADER */

.on-blog-post__header{
  max-width:980px;
  margin-bottom:30px;
}

.on-blog-post__label{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  margin-bottom:16px;
  padding:0 12px;
  border-radius:7px;
  background:var(--on-yellow-soft);
  color:#927b00;
  font-size:11px;
  line-height:1;
  font-weight:800;
}

.on-blog-post__title{
  margin:0 0 18px;
  color:var(--on-navy);
  font-size:clamp(32px,4vw,46px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-1.3px;
}

.on-blog-post__lead{
  max-width:920px;
  margin:0;
  color:#53637a;
  font-size:17px;
  line-height:1.7;
}


/* IMAGE */

.on-blog-post__image{
  width:100%;
  margin:34px 0 38px;
  overflow:hidden;
  border:1px solid var(--on-border);
  border-radius:22px;
  background:var(--on-bg);
  box-shadow:var(--on-shadow-sm);
}

.on-blog-post__image img{
  display:block;
  width:100%;
  height:auto;
}


/* CONTENT */

.on-blog-post__content{
  max-width:920px;
}

.on-blog-post__content h2{
  margin:42px 0 16px;
  color:var(--on-navy);
  font-size:28px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.7px;
}

.on-blog-post__content h3{
  margin:30px 0 12px;
  color:var(--on-navy);
  font-size:21px;
  line-height:1.3;
  font-weight:800;
}

.on-blog-post__content p{
  margin:0 0 18px;
  color:#52627a;
  font-size:16px;
  line-height:1.8;
}

.on-blog-post__content a{
  color:#173969;
  font-weight:700;
  text-decoration:underline;
  text-decoration-color:#e4c72d;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}

.on-blog-post__content a:hover{
  color:var(--on-navy);
}

.on-blog-post__content ul{
  margin:20px 0 26px;
  padding:0;
  list-style:none;
}

.on-blog-post__content li{
  position:relative;
  margin-bottom:14px;
  padding-left:28px;
  color:#52627a;
  font-size:16px;
  line-height:1.75;
}

.on-blog-post__content li::before{
  content:"";
  position:absolute;
  top:10px;
  left:3px;
  width:9px;
  height:9px;
  border-radius:3px;
  background:var(--on-yellow);
}


/* NOTE */

.on-blog-post__note{
  margin:28px 0;
  padding:20px 22px;
  border:1px solid #eadb72;
  border-radius:16px;
  background:var(--on-yellow-soft);
}

.on-blog-post__note strong{
  display:block;
  margin-bottom:7px;
  color:var(--on-navy);
  font-size:15px;
  line-height:1.4;
}

.on-blog-post__note p{
  margin:0;
  color:#5c552c;
  font-size:14px;
  line-height:1.7;
}


/* CTA */

.on-blog-post__cta{
  margin-top:40px;
  padding:26px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border:1px solid var(--on-border);
  border-radius:20px;
  background:var(--on-bg);
}

.on-blog-post__cta-content{
  max-width:570px;
}

.on-blog-post__cta-title{
  margin:0 0 7px;
  color:var(--on-navy);
  font-size:20px;
  line-height:1.3;
  font-weight:800;
}

.on-blog-post__cta-text{
  margin:0;
  color:var(--on-text);
  font-size:13px;
  line-height:1.6;
}

.on-blog-post__cta-button{
  flex:0 0 auto;
  min-height:46px;
  padding:0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--on-yellow);
  color:var(--on-navy);
  font-size:13px;
  line-height:1.2;
  font-weight:800;
  text-decoration:none;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.on-blog-post__cta-button:hover{
  transform:translateY(-2px);
  background:var(--on-yellow-hover);
  box-shadow:0 10px 24px rgba(248,217,73,.3);
}


/* RELATED ARTICLES */

.on-blog-post__related{
  max-width:1180px;
  margin:58px auto 0;
  padding-top:34px;
  border-top:1px solid var(--on-border);
}

.on-blog-post__related-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}

.on-blog-post__related-title{
  margin:0;
  color:var(--on-navy);
  font-size:26px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.6px;
}

.on-blog-post__related-all{
  color:var(--on-text);
  font-size:12px;
  font-weight:700;
  text-decoration:none;
}

.on-blog-post__related-all:hover{
  color:var(--on-navy);
}

.on-blog-post__related-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.on-blog-post__related-card{
  min-width:0;
  padding:20px;
  display:flex;
  flex-direction:column;
  min-height:180px;
  border:1px solid var(--on-border);
  border-radius:16px;
  background:#fff;
  color:inherit;
  text-decoration:none;
  box-shadow:var(--on-shadow-sm);
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.on-blog-post__related-card:hover{
  transform:translateY(-3px);
  border-color:var(--on-yellow);
  box-shadow:var(--on-shadow-md);
}

.on-blog-post__related-category{
  display:block;
  margin-bottom:12px;
  color:#9a8508;
  font-size:10px;
  line-height:1.3;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.3px;
}

.on-blog-post__related-name{
  display:block;
  margin-bottom:18px;
  color:var(--on-navy);
  font-size:16px;
  line-height:1.45;
  font-weight:800;
}

.on-blog-post__related-link{
  margin-top:auto;
  color:var(--on-text);
  font-size:12px;
  line-height:1.3;
  font-weight:700;
}

.on-blog-post__related-card:hover .on-blog-post__related-link{
  color:var(--on-navy);
}


/* MOBILE */

@media(max-width:760px){

  .on-blog-post{
    padding:32px 0 50px;
  }

  .on-blog-post__inner{
    padding:0 20px;
  }

  .on-blog-post__breadcrumbs{
    margin-bottom:20px;
  }

  .on-blog-post__title{
  font-size:30px;
  line-height:1.08;
  letter-spacing:-.8px;
}

  .on-blog-post__lead{
    font-size:15px;
    line-height:1.65;
  }

  .on-blog-post__image{
    margin:28px 0 30px;
    border-radius:16px;
  }

  .on-blog-post__content h2{
    margin-top:34px;
    font-size:23px;
  }

  .on-blog-post__content h3{
    font-size:19px;
  }

  .on-blog-post__content p,
  .on-blog-post__content li{
    font-size:15px;
    line-height:1.72;
  }

  .on-blog-post__cta{
    padding:22px 20px;
    flex-direction:column;
    align-items:flex-start;
  }

  .on-blog-post__cta-button{
    width:100%;
  }

  .on-blog-post__related{
    margin-top:46px;
  }

  .on-blog-post__related-head{
    align-items:flex-start;
  }

  .on-blog-post__related-title{
    font-size:22px;
  }

  .on-blog-post__related-grid{
    display:flex;
    gap:12px;
    margin-right:-20px;
    padding-right:20px;
    padding-bottom:5px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }

  .on-blog-post__related-grid::-webkit-scrollbar{
    display:none;
  }

  .on-blog-post__related-card{
    width:min(78vw,285px);
    min-width:min(78vw,285px);
    flex:0 0 min(78vw,285px);
    scroll-snap-align:start;
  }

}

/* =========================
   BLOG — RANKING TABLE
   ========================= */

.on-ranking-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:26px 0 34px;
}

.on-ranking-table{
  overflow:hidden;
  border:1px solid var(--on-border);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--on-shadow-sm);
}

.on-ranking-table__title{
  padding:13px 16px;
  background:var(--on-yellow-soft);
  border-bottom:1px solid #eee3a1;
  color:var(--on-navy);
  font-size:13px;
  line-height:1.3;
  font-weight:800;
}

.on-ranking-table table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

.on-ranking-table th,
.on-ranking-table td{
  padding:10px 12px;
  border-bottom:1px solid var(--on-border);
  text-align:left;
  vertical-align:middle;
}

.on-ranking-table tr:last-child td{
  border-bottom:0;
}

.on-ranking-table th{
  background:var(--on-bg);
  color:var(--on-muted);
  font-size:10px;
  line-height:1.3;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.3px;
}

.on-ranking-table th:first-child,
.on-ranking-table td:first-child{
  width:46px;
  text-align:center;
}

.on-ranking-table td:first-child{
  color:#9a8508;
  font-size:12px;
  font-weight:800;
}

.on-ranking-table td:last-child{
  color:var(--on-navy);
  font-size:13px;
  line-height:1.4;
  font-weight:700;
  word-break:break-word;
}

.on-ranking-table tbody tr:hover{
  background:var(--on-yellow-bg);
}

@media(max-width:900px){
  .on-ranking-grid{
    grid-template-columns:1fr;
  }
}
/* Нумерованные списки в статьях */
.on-blog-post__content ol{
  margin:20px 0 26px;
  padding-left:28px;
}

.on-blog-post__content ol li{
  margin-bottom:14px;
  padding-left:6px;
  color:#52627a;
  font-size:16px;
  line-height:1.75;
}

.on-blog-post__content ol li::before{
  display:none;
}

.on-blog-post__content ol li::marker{
  color:var(--on-navy);
  font-weight:800;
}
/* =========================
   BLOG TABLES
   ========================= */

.on-blog-table-wrap{
  width:100%;
  margin:26px 0 34px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;

  border:1px solid var(--on-border);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--on-shadow-sm);
}

.on-blog-table{
  width:100%;
  min-width:680px;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  font-size:14px;
  line-height:1.5;
}

.on-blog-table th,
.on-blog-table td{
  padding:16px 18px;
  text-align:left;
  vertical-align:middle;
  border-bottom:1px solid #edf1f6;
}

.on-blog-table th{
  background:var(--on-yellow-soft);
  color:var(--on-navy);
  font-size:13px;
  line-height:1.35;
  font-weight:800;
  border-bottom:1px solid #eadf99;
}

.on-blog-table th:first-child{
  width:32%;
}

.on-blog-table td{
  color:var(--on-text);
  font-weight:500;
  background:#fff;
}

.on-blog-table td:first-child{
  color:var(--on-navy);
  font-weight:700;
  background:var(--on-bg);
}

.on-blog-table th + th,
.on-blog-table td + td{
  border-left:1px solid #edf1f6;
}

.on-blog-table tbody tr:last-child td{
  border-bottom:0;
}

.on-blog-table tbody tr{
  transition:background .2s ease;
}

.on-blog-table tbody tr:hover td{
  background:var(--on-yellow-bg);
}

.on-blog-table tbody tr:hover td:first-child{
  background:var(--on-yellow-soft);
}

.on-blog-table a{
  display:inline-flex;
  align-items:center;
  gap:5px;

  color:var(--on-navy);
  font-weight:800;
  text-decoration:none;

  transition:color .2s ease;
}

.on-blog-table a:hover{
  color:#b99d00;
}

@media(max-width:760px){

  .on-blog-table-wrap{
    margin:22px 0 30px;
    border-radius:14px;
  }

  .on-blog-table{
    min-width:620px;
    font-size:13px;
  }

  .on-blog-table th,
  .on-blog-table td{
    padding:13px 14px;
  }

  .on-blog-table th{
    font-size:12px;
  }
}
/* =========================
   ON-SEO CONTENT ELEMENTS
   ========================= */

.on-seo__text ul{
  margin:0 0 20px;
  padding:0;
  list-style:none;
}

.on-seo__text li{
  position:relative;
  margin:0 0 10px;
  padding-left:22px;

  font-size:14px;
  line-height:1.75;
  color:#4f6078;
}

.on-seo__text li:last-child{
  margin-bottom:0;
}

.on-seo__text li::before{
  content:"";
  position:absolute;

  left:3px;
  top:.72em;

  width:6px;
  height:6px;

  border-radius:50%;
  background:var(--on-yellow);

  transform:translateY(-50%);
}

.on-seo__text a{
  color:var(--on-navy);
  font-weight:700;
  text-decoration:none;

  border-bottom:1px solid rgba(248,217,73,.65);

  transition:
    color .2s ease,
    border-color .2s ease;
}

.on-seo__text a:hover{
  color:#b29700;
  border-bottom-color:#b29700;
}

.on-seo__text strong{
  color:var(--on-navy);
  font-weight:700;
}

@media(max-width:768px){

  .on-seo__text li{
    padding-left:20px;

    font-size:13px;
    line-height:1.7;
  }

  .on-seo__text ul{
    margin-bottom:18px;
  }

}
/* =====================================
   ON-NEWS — ПАГИНАЦИЯ И ВЫБОР КОЛИЧЕСТВА
===================================== */

.on-catalog__content {
  position: relative;
}

/* Пагинация */
.on-catalog__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-right: 190px;
  padding-left: 190px;
}

.on-catalog__pagination[hidden] {
  display: none;
}

/* Выбор количества площадок справа */
.on-catalog__page-size {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;

  position: absolute;
  right: 0;
  bottom: 0;

  margin: 0;
  white-space: nowrap;
}

/* Подпись */
#media-catalog .on-catalog__page-size label {
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #64748b;
}

/* Выпадающий список */
#media-catalog .on-catalog__page-size select {
  -webkit-appearance: none !important;
  appearance: none !important;

  width: 82px !important;
  min-width: 82px !important;
  height: 46px !important;
  box-sizing: border-box;

  padding: 0 30px 0 16px !important;

  border: 1px solid #dce2eb !important;
  border-radius: 12px !important;

  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px !important;

  color: #0f172a !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: normal !important;

  cursor: pointer;
  transition: border-color 0.2s ease;
}

/* Наведение */
#media-catalog .on-catalog__page-size select:hover {
  border-color: #94a3b8 !important;
}

/* Фокус */
#media-catalog .on-catalog__page-size select:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* Мобильная версия */
@media (max-width: 767px) {
  .on-catalog__pagination {
    padding-left: 0;
    padding-right: 0;
  }

  .on-catalog__page-size {
    position: static;
    justify-content: center;
    margin: 20px 0 0;
  }
}

/* =====================================
   ON-NEWS — АКТИВНЫЕ ФИЛЬТРЫ
===================================== */

#media-catalog .on-catalog__active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 8px;
  margin: 0 0 20px;
  padding: 0;

  font-family: 'Manrope', Arial, sans-serif;
}

#media-catalog .on-catalog__active-filters[hidden] {
  display: none !important;
}

/* Плашка выбранного фильтра */
#media-catalog .on-catalog__active-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  min-height: 34px;
  padding: 7px 11px;

  background: #fffbea;
  border: 1px solid #f8d949;
  border-radius: 9px;

  color: #081735;
  font-family: 'Manrope', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;

  cursor: pointer;
  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

#media-catalog .on-catalog__active-chip:hover {
  background: #fff2b3;
  border-color: #e9c629;
}

/* Крестик */
#media-catalog .on-catalog__active-chip-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  color: #7a879b;
}

#media-catalog .on-catalog__active-chip:hover
.on-catalog__active-chip-close {
  color: #081735;
}

/* Сбросить все */
#media-catalog .on-catalog__active-clear {
  display: inline-flex;
  align-items: center;

  min-height: 34px;
  padding: 6px 9px;

  background: transparent;
  border: 0;

  color: #64748b;
  font-family: 'Manrope', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;

  text-decoration: underline;
  text-underline-offset: 3px;

  cursor: pointer;
  transition: color .2s ease;
}

#media-catalog .on-catalog__active-clear:hover {
  color: #081735;
}

/* Фокус с клавиатуры */
#media-catalog .on-catalog__active-chip:focus-visible,
#media-catalog .on-catalog__active-clear:focus-visible {
  outline: 2px solid #081735;
  outline-offset: 2px;
}

/* Мобильная версия */
@media (max-width: 767px) {

  #media-catalog .on-catalog__active-filters {
    gap: 7px;
    margin-bottom: 16px;
  }

  #media-catalog .on-catalog__active-chip {
    font-size: 11px;
    min-height: 32px;
    padding: 6px 9px;
  }

  #media-catalog .on-catalog__active-clear {
    font-size: 11px;
  }
}