/*
 * «Лиды для стоматологии: что считаем пациентом, а не заявкой» (#leads) по макету владельца 1672×941 (22.09.2026).
 * Картинки — из папки владельца prod-stom (только обрезаны прозрачные поля): стикеры «Больше пациентов», «От кликов к лечению»,
 * «Данные приносят пациентов», зуб, надпись «Реклама, которая лечит бизнес», черная рваная полоса (слева и, повернутая, снизу).
 * Номеров и стрелок внутри карточек нет — так просил владелец. Стрелки между карточками — как в макете.
 * Десктоп (от 1200px): все в единицах макета, --u = 1px макета при ширине 1672. Телефон и планшет: те же элементы в потоке.
 */
.lds{position:relative;isolation:isolate;overflow:hidden;background:var(--paper);color:var(--ink)}
/* едва заметная печатная фактура бумаги, как в макете */
.lds::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}
.lds__edge{position:absolute;z-index:1;pointer-events:none;display:block;max-width:none}
.lds__h{margin:0;font-weight:900;font-family:var(--display);text-transform:uppercase;color:var(--ink)}
.lds__l{display:block;white-space:nowrap}
.lds__plate{display:block;background:var(--lime)}
.lds__st,.lds__tooth,.lds__hand{display:block;height:auto;max-width:none}
.lds__lead,.lds__card,.lds__note{box-sizing:border-box;background:var(--sheet);border:0 solid var(--ink)}
.lds__lead p,.lds__card p,.lds__note p{margin:0;font-family:var(--text);color:var(--ink)}
.lds a{color:inherit;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.18em}
.lds a:hover{color:var(--blue)}
.lds__cards{list-style:none;margin:0;padding:0}
.lds__card h3{margin:0;font-weight:900;font-family:var(--display);text-transform:uppercase;line-height:1;color:var(--ink)}
.lds__arr{display:block;fill:none;stroke:var(--blue);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}

/* ---------- десктоп: раскладка макета ---------- */
@media (min-width:1200px){
  .lds{--u:min(calc(100vw / 1672),1px);--m:max(0px,calc((100vw - 1672px) / 2));height:calc(941 * var(--u))}
  .lds__in{position:relative;width:calc(1672 * var(--u));height:100%;margin-inline:auto}
  .lds__in > *{position:absolute;margin:0}

  /* черные рваные края: слева видно 16 единиц полосы, снизу — лента высотой 19 до x≈880 */
  .lds__edge--l{left:calc(-44 * var(--u));top:calc(72 * var(--u));width:calc(60 * var(--u));height:calc(880 * var(--u))}
  .lds__edge--b{left:calc(-40 * var(--u));top:calc(912 * var(--u));width:calc(var(--m) + 920 * var(--u));height:auto;transform:rotate(.53deg);transform-origin:0 0}

  /* лаймовые плашки под строками 3 и 4 — по контуру из макета */
  .lds__plate{z-index:1}
  .lds__plate--1{left:calc(47 * var(--u));top:calc(292 * var(--u));width:calc(639 * var(--u));height:calc(144 * var(--u));clip-path:polygon(1.1% 11.11%,98.12% 0,100% 88.19%,0 100%)}
  .lds__plate--2{left:calc(47 * var(--u));top:calc(437 * var(--u));width:calc(591 * var(--u));height:calc(115 * var(--u));clip-path:polygon(0 0,98.98% 0,100% 98.26%,.68% 100%)}

  /* заголовок: каждая строка на своем месте макета, свой кегль и вытяжка по вертикали */
  .lds__h{z-index:3;left:0;top:0;width:100%;height:100%;pointer-events:none}
  .lds__l{position:absolute;line-height:1;transform-origin:0 0;pointer-events:auto}
  .lds__l--1{left:calc(var(--l1x) * var(--u));top:calc(var(--l1y) * var(--u));font-size:calc(135.2 * var(--u));transform:scaleY(1.208);word-spacing:calc(1.5 * var(--u))}
  .lds__l--2{left:calc(var(--l2x) * var(--u));top:calc(var(--l2y) * var(--u));font-size:calc(128.9 * var(--u));transform:scaleY(1.279)}
  .lds__l--3{left:calc(var(--l3x) * var(--u));top:calc(var(--l3y) * var(--u));font-size:calc(128.99 * var(--u));transform:scaleY(1.278);word-spacing:calc(6 * var(--u))}
  .lds__l--4{left:calc(var(--l4x) * var(--u));top:calc(var(--l4y) * var(--u));font-size:calc(126.93 * var(--u));transform:scaleY(1.299)}
  .lds__l--5{left:calc(var(--l5x) * var(--u));top:calc(var(--l5y) * var(--u));font-size:calc(111.69 * var(--u));transform:scaleY(1.435);word-spacing:calc(3.5 * var(--u))}
  .lds{--l1x:60;--l1y:23;--l2x:61;--l2y:153;--l3x:62;--l3y:279;--l4x:62;--l4y:409;--l5x:64;--l5y:544}

  /* картинки владельца: размер, поворот и место — по совпадению с макетом (SIFT) */
  .lds__tooth{z-index:2;left:calc(601.21 * var(--u));top:calc(459.76 * var(--u));width:calc(228.31 * var(--u));transform:rotate(-5.864deg)}
  .lds__hand{z-index:3;left:calc(378.63 * var(--u));top:calc(697.95 * var(--u));width:calc(151.19 * var(--u));transform:rotate(3.277deg)}
  .lds__st{z-index:5}
  .lds__st--grow{left:calc(620.67 * var(--u));top:calc(13.68 * var(--u));width:calc(164.6 * var(--u));transform:rotate(.304deg)}
  .lds__st--clicks{left:calc(1465.49 * var(--u));top:calc(2.03 * var(--u));width:calc(181.76 * var(--u));transform:rotate(1.171deg)}
  .lds__st--data{left:calc(1526.87 * var(--u));top:calc(827.04 * var(--u));width:calc(134.55 * var(--u));transform:rotate(-.264deg)}

  /* лид-карточка: рамка 3, черная плашка 12/12 */
  .lds__lead{z-index:2;left:calc(826 * var(--u));top:calc(81 * var(--u));width:calc(787 * var(--u));height:calc(232 * var(--u));border-width:calc(3 * var(--u));box-shadow:calc(12 * var(--u)) calc(12 * var(--u)) 0 var(--ink)}
  .lds__lead p{position:absolute;left:calc(var(--ldx) * var(--u));top:calc(var(--ldy) * var(--u));font-size:max(13px,calc(22.9 * var(--u)));line-height:calc(32.3 * var(--u));white-space:nowrap}

  /* четыре карточки пути: рамка 2.6, черная плашка 7/8 */
  .lds__cards{z-index:2;left:0;top:0;width:0;height:0}
  .lds__card{position:absolute;border-width:calc(2.6 * var(--u));box-shadow:calc(7 * var(--u)) calc(8 * var(--u)) 0 var(--ink)}
  .lds__card--1{left:calc(829 * var(--u));top:calc(346 * var(--u));width:calc(365 * var(--u));height:calc(247 * var(--u))}
  .lds__card--2{left:calc(1250 * var(--u));top:calc(346 * var(--u));width:calc(371 * var(--u));height:calc(247 * var(--u))}
  .lds__card--3{left:calc(829 * var(--u));top:calc(631 * var(--u));width:calc(365 * var(--u));height:calc(246 * var(--u))}
  .lds__card--4{left:calc(1249 * var(--u));top:calc(631 * var(--u));width:calc(371 * var(--u));height:calc(246 * var(--u))}
  .lds__card h3{position:absolute;left:calc(var(--chx) * var(--u));top:calc(var(--chy) * var(--u));font-size:calc(62.6 * var(--u));transform:scaleY(1.22);transform-origin:0 0}
  .lds__card p{position:absolute;left:calc(var(--cpx) * var(--u));top:calc(var(--cpy) * var(--u));font-size:max(12px,calc(18.5 * var(--u)));line-height:calc(25.1 * var(--u));white-space:nowrap}

  /* стрелки между карточками */
  .lds__arr{z-index:3}
  .lds__arr--1{left:calc(1204 * var(--u));top:calc(456 * var(--u));width:calc(37 * var(--u));height:calc(30 * var(--u))}
  .lds__arr--2{left:calc(1496 * var(--u));top:calc(595 * var(--u));width:calc(31 * var(--u));height:calc(35 * var(--u))}
  .lds__arr--3{left:calc(1204 * var(--u));top:calc(739 * var(--u));width:calc(36 * var(--u));height:calc(30 * var(--u))}

  /* примечание внизу слева: рамка 2, лаймовая плашка 12/12 */
  .lds__note{z-index:2;left:calc(49 * var(--u));top:calc(775 * var(--u));width:calc(745 * var(--u));height:calc(111 * var(--u));border-width:calc(2 * var(--u));box-shadow:calc(12 * var(--u)) calc(12 * var(--u)) 0 var(--lime)}
  .lds__note p{position:absolute;left:calc(var(--nx) * var(--u));top:calc(var(--ny) * var(--u));font-size:max(12px,calc(18.18 * var(--u)));font-weight:500;line-height:calc(24 * var(--u));white-space:nowrap}

  .lds{--ldx:33;--ldy:32;--chx:23;--chy:34;--cpx:24;--cpy:113;--nx:27;--ny:16}
}

/* ---------- телефон и планшет: те же элементы в потоке ---------- */
@media (max-width:1199.98px){
  .lds__br{display:none}
  .lds__arr,.lds__plate{display:none}
  .lds{padding:56px 16px 64px 26px}
  .lds__edge--l{left:-34px;top:36px;width:44px;height:calc(100% - 36px);object-fit:fill}
  .lds__edge--b{left:-24px;bottom:0;width:66%;height:auto;transform:translateY(calc(100% - 12px))}
  /* порядок как в левой колонке макета: заголовок, зуб с надписью; дальше лид, карточки, примечание */
  .lds__in{--dw:clamp(100px,28vw,140px);position:relative;max-width:720px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"h h" "hand tooth" "clicks clicks" "lead lead" "cards cards" "note note"}
  .lds__h{grid-area:h;position:relative;z-index:3;font-size:clamp(44px,12.4vw,96px);line-height:.9;letter-spacing:-.004em}
  .lds__l--3,.lds__l--4{position:relative;z-index:0;width:fit-content;margin-left:-.08em;padding:.03em .08em 0}
  .lds__l--3::before,.lds__l--4::before{content:"";position:absolute;z-index:-1;inset:0 0 -.02em;background:var(--lime)}
  .lds__l--3::before{transform:rotate(-1.4deg)}
  .lds__l--3{margin-top:.08em}
  .lds__l--5{margin-top:.08em}
  /* «Больше пациентов»: в правом верхнем углу, справа от короткой первой строки */
  .lds__st--grow{position:absolute;z-index:4;top:-20px;right:-8px;width:clamp(112px,31vw,176px);transform:rotate(.3deg)}
  .lds__hand{grid-area:hand;align-self:end;justify-self:start;position:relative;z-index:3;width:clamp(140px,42vw,220px);margin:0 0 6px;transform:rotate(3.3deg)}
  .lds__tooth{grid-area:tooth;position:relative;z-index:2;width:clamp(116px,32vw,190px);margin-top:12px;transform:rotate(-5.9deg)}
  .lds__st--clicks{grid-area:clicks;justify-self:end;position:relative;z-index:4;width:clamp(120px,34vw,190px);margin:22px -8px -14px 0;transform:rotate(1.2deg)}
  .lds__lead{grid-area:lead;position:relative;z-index:2;padding:26px 18px 20px;border-width:2px;box-shadow:8px 8px 0 var(--ink)}
  .lds__lead p{font-size:16px;line-height:1.5}
  .lds__cards{grid-area:cards;display:grid;grid-template-columns:minmax(0,1fr);gap:44px;margin-top:44px}
  .lds__card{position:relative;padding:18px 18px 22px;border-width:2px;box-shadow:6px 7px 0 var(--ink)}
  .lds__card h3{font-size:clamp(40px,11vw,56px);transform:scaleY(1.18);transform-origin:0 100%;margin-bottom:12px}
  .lds__card p{font-size:16px;line-height:1.5}
  /* стрелки между карточками — снаружи карточек, в промежутке */
  .lds__card:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:-40px;width:26px;height:30px;margin-left:-13px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 35' fill='none' stroke='%231B5BFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 2.5V32.5M3 19.5 15.5 32.5 28 19.5'/%3E%3C/svg%3E") center/contain no-repeat}
  /* «Данные приносят пациентов»: на нижнем правом углу последней карточки, как в макете; заходит на нее на 20px, остальное — ниже */
  .lds__st--data{grid-area:cards;justify-self:end;align-self:end;position:relative;z-index:4;width:var(--dw);margin:0 -8px calc(20px - .82 * var(--dw)) 0;transform:rotate(-.3deg)}
  .lds__note{grid-area:note;position:relative;z-index:2;margin-top:calc(.82 * var(--dw) + 4px);padding:16px 16px 18px;border-width:2px;box-shadow:8px 8px 0 var(--lime)}
  .lds__note p{font-size:15px;font-weight:500;line-height:1.5}
}
/* телефон: «Больше пациентов» поднят над заголовком, чтобы не закрывать «стоматологии:».
   Композиция плотнее (владелец, 22.09.2026): зуб стоит в правом нижнем углу заголовка, справа от «пациентом, / а не заявкой»
   (ширина = свободное место справа от последней строки), надпись меньше и сразу под заголовком, «От кликов к лечению» — в той же строке справа */
@media (max-width:699px){
  .lds{padding-top:100px}
  .lds__st--grow{top:-88px;right:-6px;width:min(150px,calc(84px + 11.7vw))}
  .lds__in{grid-template-areas:"h h" "hand clicks" "lead lead" "cards cards" "note note"}
  .lds__tooth{grid-area:h;justify-self:end;align-self:end;width:clamp(90px,min(calc(40vw - 52px),26vw),160px);margin:0 -4px -10px 0}
  .lds__hand{grid-area:hand;align-self:end;justify-self:start;width:clamp(118px,34vw,170px);margin:20px 0 6px}
  .lds__st--clicks{grid-area:clicks;align-self:end;width:clamp(112px,33vw,170px);margin:18px -8px -14px 12px}
}
/* самые узкие телефоны (до 340px): справа от заголовка места под зуб нет — зуб в строке с надписью, стикер ниже */
@media (max-width:340px){
  .lds__in{grid-template-areas:"h h" "hand tooth" "clicks clicks" "lead lead" "cards cards" "note note"}
  .lds__tooth{grid-area:tooth;align-self:start;width:92px;margin:10px -4px 0 0}
  .lds__st--clicks{grid-area:clicks;justify-self:end;margin:6px -8px -14px 0}
}
/* планшет: карточки 2×2, стрелки как в макете — вправо, вниз, вправо */
@media (min-width:700px) and (max-width:1199.98px){
  .lds__cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 46px}
  /* зуб поднят к последним строкам заголовка, как в макете: справа от «пациентом, / а не заявкой» */
  .lds__tooth{margin-top:-150px}
  .lds__hand{margin-top:34px}
  .lds__card:not(:last-child)::after{bottom:auto;top:50%;left:auto;right:-38px;margin:-15px 0 0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 30' fill='none' stroke='%231B5BFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 15H34.5M21.5 2.5 34.5 15 21.5 27.5'/%3E%3C/svg%3E")}
  .lds__card--2::after{top:auto!important;right:auto!important;left:50%!important;bottom:-42px!important;margin:0 0 0 -13px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 35' fill='none' stroke='%231B5BFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 2.5V32.5M3 19.5 15.5 32.5 28 19.5'/%3E%3C/svg%3E")!important}
}

/* надпись «Реклама, которая лечит бизнес» на телефоне — ползунками владельца 22.09.2026 на экране 386px:
   вправо 93px, вверх 17px, размер ×0.97 (вправо 24.09vw, вверх 4.4vw — так же на телефонах любой ширины) */
@media (max-width:699px){
  .lds__hand{translate:24.09vw -4.4vw;scale:0.97;transform-origin:0 100%}
}