/*
 * Первый экран страницы «Яндекс Директ» (#hero) по присланному макету 1672×941.
 * Слева заголовок в три строки («Яндекс Директ» белым на синей плашке), лид, стикер теста
 * (вместо кнопки бесплатного аудита из макета — стикер теста страницы, его стили в poster.css и poster-ydx.css)
 * и две повернутые карточки — синяя «0 ₽» и лаймовая «−50%» с подчеркиваниями и штрихами слева;
 * справа присланный коллаж «Не клики, а продажи» (у него убран белый фон). Синей стрелки-курсора из первого макета больше нет.
 * Десктоп (от 981px): все расставлено в единицах макета — --u = 1px макета при ширине 1672, секция тянется
 * во всю ширину экрана и держит пропорции макета. Телефон и планшет: те же элементы в обычном потоке.
 * Цвета лайма и синего взяты с коллажа, чтобы карточки и плашка совпадали с картинкой.
 */
.ydh{--ink:#0E0F0C;--paper:#F2F2EF;--lime:#D0F614;--blue:#004AFC;--muted:#3A3B38;
  position:relative;isolation:isolate;overflow:hidden;background:var(--paper);color:var(--ink);font-family:Montserrat,"Segoe UI",Arial,sans-serif}
/* едва заметная печатная фактура, как на бумаге макета */
.ydh::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");background-size:140px 140px}

/* ---------- заголовок: каждая строка своим блоком; плашка — блочная, чтобы хвост «у» из первой строки лежал поверх нее ---------- */
.ydh__title{margin:0;font-weight:900;line-height:1;letter-spacing:-.035em}
.ydh__title span{display:block;width:fit-content;white-space:nowrap}
.ydh__l2{background:var(--blue);color:#fff}
/* у Montserrat «без слива бюджета» длиннее, чем в макете: строка чуть плотнее, чтобы только касаться листа «Аудит» */
.ydh__l3{letter-spacing:-.045em}
/* с 22.09.2026 (SEO-аудит) первая строка — «Настройка и ведение»: вдвое мельче, чтобы не заходить на коллаж */
.ydh__l1{font-size:.5em;letter-spacing:-.02em}

.ydh__lead{margin:0;color:var(--muted)}

/* ---------- кнопки: черная рамка и жесткая черная тень, при наведении кнопка приподнимается ---------- */
.ydh__actions{display:flex}
.ydh__btn{--sh:12px;display:flex;align-items:center;justify-content:center;--bw:3px;box-sizing:border-box;margin:0;border-radius:0;box-shadow:var(--sh) var(--sh) 0 var(--ink);color:var(--ink);font:800 20px/1.15 Montserrat,"Segoe UI",Arial,sans-serif;text-align:center;text-decoration:none;cursor:pointer;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s cubic-bezier(.2,.8,.2,1)}
/* page.css снимает рамку у всех кнопок страницы (border:0 !important), а у кнопок первого экрана рамка из макета */
.ydh .ydh__btn{border:var(--bw) solid var(--ink)!important}
.ydh__btn--secondary{background:#fff}
.ydh__btn:hover{transform:translate(-2px,-2px);box-shadow:calc(var(--sh) + 2px) calc(var(--sh) + 2px) 0 var(--ink)}
.ydh__btn:active{transform:translate(4px,4px);box-shadow:calc(var(--sh) - 4px) calc(var(--sh) - 4px) 0 var(--ink)}
.ydh__btn:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
/* стикер теста в первом экране: без своего верхнего отступа, по размеру содержимого */
.ydh .quizbtn{margin:0;align-self:flex-start}

/* ---------- карточки условий ---------- */
.ydh__promos{position:relative}
.ydh__card{position:relative;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start}
.ydh__card--zero{background:var(--blue);color:#fff}
.ydh__card--landing{background:var(--lime);color:var(--ink)}
.ydh__price{display:block;font-weight:900;line-height:.95;letter-spacing:-.035em;white-space:nowrap}
.ydh__stroke{display:block;height:auto;overflow:visible}
.ydh__stroke path{fill:none;stroke:currentColor;stroke-linecap:round}
.ydh__note{display:block;font-weight:800;line-height:1.2}
.ydh__burst path{fill:none;stroke:var(--ink);stroke-linecap:round}

/* пропорции исходного коллажа 1184×1232: у уменьшенных копий (srcset 480/720) высота округлена до пикселя, раскладка от этого не должна сдвигаться */
.ydh__collage{display:block;height:auto;max-width:none;aspect-ratio:1184/1232}

/* ---------- десктоп: раскладка макета ---------- */
@media (min-width:981px){
  .ydh{--u:calc(100vw / 1672);height:calc(941 * var(--u))}
  .ydh > *{position:absolute}

  /* заголовок опущен с 71 до 108 (первая строка стала ниже), стикер теста — с 487 до 504 (лид на строку длиннее) */
  .ydh__title{z-index:3;left:calc(65 * var(--u));top:calc(108 * var(--u));font-size:calc(84 * var(--u))}
  .ydh__l1{margin-bottom:calc(6 * var(--u))}
  .ydh__l2{margin:calc(-9 * var(--u)) 0 calc(-5 * var(--u));padding:.085em .3em .3em .3em}

  .ydh__lead{z-index:3;left:calc(65 * var(--u));top:calc(366 * var(--u));width:calc(760 * var(--u));font-size:calc(22.8 * var(--u));line-height:1.4}

  .ydh__actions{z-index:3;left:calc(65 * var(--u));top:calc(504 * var(--u));gap:calc(25 * var(--u));align-items:center}
  /* стикер теста масштабируется вместе с раскладкой макета */
  .ydh .quizbtn{align-self:center;padding:calc(11 * var(--u)) calc(20 * var(--u)) calc(12 * var(--u)) calc(18 * var(--u));border-width:calc(3 * var(--u));box-shadow:calc(10 * var(--u)) calc(10 * var(--u)) 0 var(--ink)}
  .ydh .quizbtn .quizbtn__k{font-size:calc(12.5 * var(--u))}
  .ydh .quizbtn .quizbtn__t{margin-top:calc(5 * var(--u));font-size:calc(28 * var(--u))}
  .ydh__btn{--sh:calc(12 * var(--u));height:calc(68 * var(--u));--bw:calc(3 * var(--u));font-size:calc(20.1 * var(--u))}
  .ydh__btn--secondary{width:calc(318 * var(--u))}

  .ydh__promos{z-index:3;left:0;top:0;width:100%;height:100%;pointer-events:none}
  .ydh__promos > *{position:absolute;pointer-events:auto}
  .ydh__burst{left:calc(22 * var(--u));top:calc(598 * var(--u));width:calc(62 * var(--u));height:auto}
  .ydh__burst path{stroke-width:5}
  .ydh__card{box-shadow:calc(15 * var(--u)) calc(15 * var(--u)) 0 var(--ink)}
  .ydh__card--zero{left:calc(113 * var(--u));top:calc(612 * var(--u));width:calc(365 * var(--u));height:calc(230 * var(--u));padding:calc(24 * var(--u)) 0 0 calc(70 * var(--u));rotate:-6deg}
  .ydh__card--landing{left:calc(492 * var(--u));top:calc(610 * var(--u));width:calc(355 * var(--u));height:calc(250 * var(--u));padding:calc(30 * var(--u)) 0 0 calc(46 * var(--u));rotate:-5deg}
  .ydh__price{font-size:calc(104 * var(--u))}
  .ydh__stroke{width:calc(270 * var(--u));margin:calc(6 * var(--u)) 0 0 calc(-24 * var(--u))}
  .ydh__card--landing .ydh__stroke{width:calc(250 * var(--u));margin-left:calc(12 * var(--u))}
  .ydh__stroke path{stroke-width:7}
  .ydh__note{margin-top:calc(8 * var(--u));font-size:calc(22 * var(--u))}
  .ydh__card--landing .ydh__note{margin-left:calc(18 * var(--u))}

  /* коллаж «Не клики, а продажи» (с 18.09.2026): у него у левого края черная бумага и синий скотч, поэтому он стоит правее и чуть меньше
     прежнего «Аудита» — строка «без слива бюджета» заканчивается перед ним, а не на нем */
  .ydh__collage{z-index:1;left:calc(935 * var(--u));top:calc(58 * var(--u));width:calc(740 * var(--u))}
}

/* ---------- телефон и планшет: те же элементы подряд ---------- */
@media (max-width:980px){
  /* порядок на телефоне (владелец, 18.09.2026): заголовок, текст, коллаж, стикер теста, карточки 0 ₽ и −50% */
  .ydh{--g:16px;display:flex;flex-direction:column;padding:28px var(--g) 44px}
  .ydh__title{order:1}
  .ydh__lead{order:2}
  .ydh__collage{order:3}
  .ydh__actions{order:4}
  .ydh__promos{order:5}
  .ydh__title{font-size:clamp(28px,calc((100vw - 2 * var(--g)) / 10.6),84px)}
  .ydh__l2{margin:.04em 0 .06em;padding:.1em .2em .24em .26em}
  .ydh__lead{margin-top:18px;font-size:16px;line-height:1.5}
  .ydh__actions{flex-direction:column;gap:16px;margin:24px 0 0}
  /* стикер теста по центру (владелец); сдвиг на половину тени, чтобы по центру стояли стикер с тенью вместе */
  .ydh .quizbtn{align-self:center;left:-4px}
  .ydh__btn{--sh:6px;min-height:56px;padding:10px 16px;--bw:2px;font-size:16px}
  /* карточки чуть меньше и отодвинуты от левого края: слева от угла синей карточки стоят штрихи, как на десктопе (владелец) */
  .ydh__promos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:36px 8px 0 28px}
  .ydh__burst{position:absolute;left:-33px;top:-14px;width:24px;height:auto}
  .ydh__burst path{stroke-width:6}
  .ydh__card{padding:13px 10px 15px 14px;box-shadow:6px 6px 0 var(--ink)}
  .ydh__card--zero{rotate:-4deg}
  .ydh__card--landing{rotate:-3deg}
  .ydh__price{font-size:clamp(34px,9.6vw,64px)}
  .ydh__stroke{width:90%;margin-top:4px}
  .ydh__stroke path{stroke-width:9}
  .ydh__note{margin-top:5px;font-size:clamp(10.5px,3.1vw,17px);letter-spacing:-.01em}
  /* на узких телефонах подпись «Ведение рекламы» держится в одну строку */
  @media (max-width:380px){.ydh__card{padding-left:11px;padding-right:6px}.ydh__note{font-size:10.5px}}
  /* размер подобрал владелец ползунком: 388px при экране 408 (95vw), по центру — шире колонки текста, поэтому без авто-полей */
  .ydh__collage{align-self:center;width:min(95vw,620px);margin:24px 0 0}
}