/* Лид-магниты (src/leads → tools/build.py: render_landing / render_bonus).
   Основа — olimp-v2.css и webinar.css (ov-brand, ov-h1, ov-btn, ov-sec, wb-hero, wb-ch), как /lesson и /lesson_bonus.
   Здесь только своё: обложки PDF, мокапы страниц, россыпь фото, картинки-макеты, анкеты. Префикс ld- */
.ld{--sheet:#f7f9fb;--sheet-edge:#cfd9e0;--table-shadow:rgba(21,50,66,.42);--page-ring:rgba(21,50,66,.08)}
html.dark .ld{--sheet:#d9dee2;--sheet-edge:#8d979f;--table-shadow:rgba(0,0,0,.75);--page-ring:rgba(255,255,255,.10)}
.ld-nw{white-space:nowrap}

/* ---------- первый экран ---------- */
.ld .ld-h1 b{display:inline}  /* заголовки лид-магнитов длиннее, чем у вебинаров: переносы — по балансу строк */
.ld .ld-h1{text-wrap:balance}
.ld-h1-ic{display:inline-block;width:.9em;height:auto;margin-left:.2em;vertical-align:-.08em}
.ld .wb-sub{font-size:16px;color:var(--fg)}
.ld .wb-hero-text .ov-brand+.wb-h1{margin-top:10px}
/* визуал: обложки / макет / фото на фирменном круге; на телефоне — под кнопкой */
.ld-vis{height:auto;display:flex;align-items:center;justify-content:center;padding:6px 0 4px}
.ld-vis .wb-glow,.ld-reg-vis .wb-glow{bottom:auto;top:50%;transform:translate(-50%,-50%);width:220px}
.ld-pic{position:relative;z-index:1;display:block;width:min(420px,100%);height:auto;filter:drop-shadow(0 22px 30px rgba(0,30,50,.3))}
.wb-reg-vis img.ld-pic{height:auto;max-height:100%;width:auto;max-width:100%}

/* мокап брошюры: стопка листов сзади, перспектива, блик, тень на «столе» */
.ld-bk{position:absolute;border-radius:3px 6px 6px 3px;background:#fff;transform:perspective(1400px) rotateY(-16deg) rotateX(5deg);transform-origin:left center;
  box-shadow:3px 3px 0 -1px var(--sheet),3px 3px 0 0 var(--sheet-edge),6px 6px 0 -1px var(--sheet),6px 6px 0 0 var(--sheet-edge),9px 9px 0 -1px var(--sheet),9px 9px 0 0 var(--sheet-edge),
    22px 30px 38px -12px var(--table-shadow),6px 10px 14px -6px var(--table-shadow)}
.ld-bk img{width:100%;border-radius:3px 6px 6px 3px;display:block}
.ld-bk::before{content:'';position:absolute;left:0;top:0;bottom:0;width:7px;border-radius:3px 0 0 3px;background:linear-gradient(90deg,rgba(0,0,0,.14),rgba(0,0,0,0));pointer-events:none}
.ld-bk::after{content:'';position:absolute;inset:0;border-radius:3px 6px 6px 3px;background:linear-gradient(118deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 70%,rgba(0,0,0,.05) 100%);pointer-events:none}
.ld-fan{position:relative;z-index:1;width:100%;max-width:300px;margin:0 auto;aspect-ratio:1/1.2}
.ld-fan .ld-bk{width:44%}
.ld-fan .b1{left:2%;top:54%;z-index:3}
.ld-fan .b2{left:28%;top:28%;z-index:2}
.ld-fan .b3{left:54%;top:2%;z-index:1}
.ld-fan.one{aspect-ratio:1/1.05;max-width:280px}
.ld-fan.one .b1{width:60%;left:20%;top:4%}

/* россыпь фото учеников по координатам старого макета */
.ld-collage{position:relative;z-index:1;width:100%;max-width:360px;margin:0 auto}
.ld-collage img{position:absolute;height:auto;aspect-ratio:443/520;object-fit:cover;border-radius:8px}

/* три довода под первым экраном */
.ld-facts-sec{padding-top:8px}
.ld-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.ld-facts li{display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:20px;background:var(--card);border:1px solid var(--card-line)}
.ld-facts img{flex:none;width:48px;height:48px;object-fit:contain}
.ld-facts p{margin:0;font-size:15px;line-height:1.45;font-weight:600}
.ld-facts b{color:var(--accent);font-weight:800}

/* ---------- что внутри ---------- */
.ld-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:20px}
.ld-card{padding:14px;border-radius:24px;background:var(--card);border:1px solid var(--card-line)}
.ld-mock{position:relative;aspect-ratio:1.45/1;background:var(--primary-soft);border-radius:16px;overflow:hidden}
html:not(.dark) .ld-mock{background:#e3f2fa}
.ld-mock .pg{position:absolute;width:31%;border-radius:3px;background:#fff;box-shadow:0 14px 22px -10px var(--table-shadow),0 0 0 1px var(--page-ring)}
.ld-mock .pg img{display:block;width:100%;border-radius:3px}
.ld-mock .p0{left:8%;top:12%;transform:rotate(-5deg);z-index:3}
.ld-mock .p1{left:35%;top:11%;transform:rotate(2deg);z-index:2}
.ld-mock .p2{left:61%;top:12%;transform:rotate(8deg);z-index:1}
.ld-card-t{padding:16px 6px 6px}
.ld-h3{margin:0;font-size:19px;line-height:1.2;font-weight:800}
.ld-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.ld-list li{position:relative;padding-left:22px;font-size:15px;line-height:1.4;font-weight:600}
.ld-list li::before{content:'';position:absolute;left:2px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--primary)}

/* список «что войдёт» с картинками */
.ld-get{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.ld-get li{display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:20px;background:var(--card);border:1px solid var(--card-line)}
.ld-get img{flex:none;width:56px;height:48px;object-fit:contain}
.ld-get p{margin:0;font-size:15.5px;line-height:1.4;font-weight:600}

/* ---------- анкета ---------- */
.ld-form-sec .wb-form-text .wb-sub{margin-top:14px}
/* анкета Learn (credo-form.js): карточку рисует сама анкета в теме сайта — без своей рамки */
.ld-lf{min-height:360px}
.ld-lf iframe{background:transparent}
.ld-lf-nojs{margin:12px;text-align:center}
/* анкета GetCourse всегда на белом: стили виджета светлые */
.ld-gc{color-scheme:light;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:#fff;padding:0 8px 6px}
.ld-gc iframe{display:block;margin-top:-16px}
.ld-gc.ld-gc-bare{border:0;padding:0;background:transparent}
.ld-gc.ld-gc-bare iframe{margin-top:0}
/* обложки и кадры у анкеты — только на ноутбуке */
.ld-row3,.ld-shots,.ld-form-pic{display:none}

/* ---------- «куда прислать» ---------- */
.ld-reg-vis .ld-fan{height:100%;width:auto;max-width:none;aspect-ratio:1/1.2}
.ld-reg-vis .ld-fan.one{aspect-ratio:1/1.05}

/* телефон: кнопка (или выбор канала) видна без прокрутки — визуал идёт под ней */
@media (max-width:999px){
  .ld .wb-vis,.ld .wb-reg-vis{order:1}
  .ld .wb-cta{margin-top:24px}
}

@media (min-width:600px){
  .ld-fan{max-width:360px}
  .ld-fan.one{max-width:320px}
  .ld-collage{max-width:420px}
  .ld-vis .wb-glow,.ld-reg-vis .wb-glow{width:280px}
  .ld-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ld-get{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ld-get li:last-child:nth-child(odd){grid-column:1/-1}
}

@media (min-width:1000px){
  .ld .ld-h1,.ld-reg .wb-h1{font-size:46px;line-height:1.08}
  .ld .wb-sub{font-size:19px}
  .ld.wide-text .wb-hero-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr)}
  .ld-vis{aspect-ratio:auto;max-height:none;padding:0}
  .ld-vis .wb-glow{width:76%;max-width:440px}
  .ld-pic{width:100%;max-width:560px}
  .ld-fan{max-width:460px}
  .ld-fan.one{max-width:400px}
  .ld-collage{max-width:520px}
  .ld-facts li{padding:22px 24px}
  .ld-facts p{font-size:16px}
  .ld-facts img{width:56px;height:56px}

  .ld-cards{margin-top:30px;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
  .ld-card{padding:16px}
  .ld-cards.one{grid-template-columns:minmax(0,1fr)}
  /* две карточки «Что внутри» — блок в один экран: превью ниже, страницы уже */
  .ld-in:has(.ld-cards.two){min-height:calc(100svh - 60px);padding:32px 0;display:flex;flex-direction:column;justify-content:center}
  .ld-cards.two{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:24px}
  .ld-cards.two .ld-mock{aspect-ratio:2.2/1}
  .ld-cards.two .pg{width:24%}
  .ld-cards.two .p0{left:15%;top:10%}
  .ld-cards.two .p1{left:38%;top:9%}
  .ld-cards.two .p2{left:61%;top:10%}
  .ld-cards.one .ld-card{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:36px;align-items:center;padding:22px}
  .ld-cards.one .ld-card-t{padding:0}
  .ld-cards.one .ld-h3{font-size:24px}
  .ld-cards.one .ld-list li{font-size:16.5px}
  .ld-get{margin-top:30px;gap:12px}
  .ld-get li{padding:18px 22px}
  .ld-get p{font-size:17px}

  .ld-row3{display:block;position:relative;margin-top:44px;width:100%;max-width:440px;aspect-ratio:2.1/1}
  .ld-row3 .ld-bk{width:30%;top:4%}
  .ld-row3 .r1{left:0;z-index:3}
  .ld-row3 .r2{left:34%;z-index:2}
  .ld-row3 .r3{left:68%;z-index:1}
  .ld-row3.one .r1{width:34%}
  .ld-form-pic{display:block;margin-top:28px;width:100%;max-width:220px;height:auto;filter:drop-shadow(0 18px 24px rgba(0,40,80,.18))}
  /* с картинкой под заголовком текст выше анкеты — анкету ставим по центру колонки */
  .ld-form-sec .wb-form-grid:has(.ld-form-pic){align-items:center}
  .ld-shots{display:block;position:relative;margin-top:32px;width:100%;max-width:460px;aspect-ratio:16/12}
  .ld-shots img{position:absolute;width:72%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;box-shadow:var(--shadow-soft);border:3px solid var(--bg)}
  .ld-shots img:nth-child(1){left:0;top:0;transform:rotate(-3deg);z-index:1}
  .ld-shots img:nth-child(2){left:26%;top:22%;transform:rotate(2deg);z-index:2}
  .ld-shots img:nth-child(3){left:8%;top:48%;transform:rotate(-1deg);z-index:3}

  .ld-reg-vis .wb-glow{width:72%}
  .ld-reg-vis .ld-fan{height:86%}
}
@media (min-width:1000px) and (max-width:1199px){
  .ld .ld-h1,.ld-reg .wb-h1{font-size:40px}
}