/* ============================================================
   «Сделать своё за 4 дня» — блоки лендинга поверх Broadsheet V2.
   Подключается ПОСЛЕ broadsheet.css и broadsheet-v2.css.
   ============================================================ */

/* ---------- воздух: крупнее ритм, длиннее интерлиньяж ---------- */
:root{--sgap:104px;--pad:34px;--pagepad:34px;--gap:28px}
html[data-v2] body{font-size:17px;line-height:1.5}
html[data-v2] .sechead .note{font-size:18px;line-height:1.55;max-width:60ch}
.sechead{gap:24px;margin-bottom:44px}
.sechead h2{max-width:20ch}
@media(max-width:900px){:root{--sgap:64px;--pad:22px;--pagepad:18px}}

/* ---------- полноширинные полосы ---------- */
.bleed{margin-top:var(--sgap);padding:var(--sgap) 0}
.bleed.paper{background:var(--paper)}
.bleed.ink{background:var(--ink);color:var(--canvas)}
.bleed.ink ::selection{background:var(--yellow);color:var(--ink)}
.bleed>.shell>section:first-child,.bleed>.shell>div:first-child{margin-top:0}
.bleed.ink .ruled{background:var(--canvas);border-color:var(--canvas)}
.bleed.ink .ruled>*{background:var(--ink)}
.bleed.ink .frame{border-color:var(--canvas)}
.bleed.paper .ruled>*{background:var(--paper)}
.bleed.paper .frame{background:var(--canvas)}

/* ---------- липкая шапка ---------- */
.topbar{position:sticky;top:0;z-index:50;background:var(--canvas);transition:box-shadow .15s ease,border-color .15s ease;border-bottom:1px solid transparent;align-items:center}
.topbar.scrolled{border-bottom-color:var(--ink)}
.topbar .brand{font-size:13px}
.topbar .nav-cta{display:flex;align-items:center;gap:20px}
@media(max-width:860px){.topbar nav{display:none}}

/* ---------- герой ---------- */
.hero-support{font-size:17px;line-height:1.55;max-width:56ch;margin-top:20px;opacity:.8}
.hero-actions .pill{flex-shrink:0}
.honest{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;border:1px solid var(--ink);border-left:6px solid var(--yellow);padding:28px 30px;margin-top:clamp(32px,4.5vh,56px)}
.honest p{font-size:clamp(17px,1.5vw,20px);line-height:1.5;letter-spacing:-0.015em;max-width:76ch}
.honest p b{font-weight:400;background:var(--yellow);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.factrow{grid-template-columns:repeat(4,1fr);margin-top:28px}
.factrow>div{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px}
.factrow .n{font-size:19px;line-height:1.05;letter-spacing:-0.02em}
.factrow .l{font-size:14px;line-height:1.45;opacity:.75}

/* ---------- 3. путь: четыре шага ---------- */
.steps{grid-template-columns:repeat(4,1fr)}
.steps>div{padding:30px 26px;display:flex;flex-direction:column;gap:18px}
.steps .d{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:-0.01em}
.steps h3{font-size:clamp(20px,2vw,26px);font-weight:400;line-height:1.03;letter-spacing:-0.025em}
.steps p{font-size:16px;line-height:1.5;opacity:.85}
.steps .out{margin-top:auto;padding-top:20px;border-top:1px solid var(--canvas);font-size:15px;line-height:1.4}
.steps .out .k{display:block;font-size:11px;font-weight:700;text-transform:uppercase;opacity:.6;margin-bottom:5px}
.steps .out b{font-weight:400;color:var(--yellow)}

/* ---------- 4. проблема ---------- */
.problem{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start;margin-top:8px}
.problem .big{font-size:clamp(26px,3.4vw,44px);line-height:1.03;letter-spacing:-0.03em;text-wrap:balance}
.problem .big b{font-weight:400;background:var(--yellow);padding:0 .05em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.problem .txt{font-size:18px;line-height:1.6;max-width:50ch}
.verdict{border-left:6px solid var(--ink);padding:8px 0 8px 24px;margin-top:52px;font-size:clamp(19px,2vw,26px);line-height:1.15;letter-spacing:-0.02em;max-width:34ch}

/* ---------- 5. что вы сделаете ---------- */
.checks{grid-template-columns:1fr 1fr;margin-top:8px}
.checks>div{padding:20px 24px;display:grid;grid-template-columns:28px 1fr;gap:16px;align-items:baseline}
.checks .no{font-size:12px;font-weight:700;opacity:.5}
.checks .t{font-size:17px;line-height:1.45}
.checks .t::before{content:"✓\FE0E  ";font-weight:700}

/* ---------- 6. кто я ---------- */
.who{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:start;margin-bottom:52px}
.who .ph{border:1px solid var(--ink);aspect-ratio:4/5;background:var(--canvas);position:relative}
.who .nm{font-size:clamp(28px,3.2vw,44px);line-height:1;letter-spacing:-0.035em;margin-bottom:18px}
.who .bio{font-size:18px;line-height:1.6;max-width:54ch}
.who .bio+.bio{margin-top:16px}
.who .creds{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.who .creds li{font-size:13px;font-weight:700;text-transform:uppercase;border:1px solid var(--ink);padding:6px 13px 7px}
.who .tg{margin-top:26px}
.projects{grid-template-columns:repeat(3,1fr);margin-top:8px}
.projects>div{padding:28px 26px;display:flex;flex-direction:column;gap:18px}
.projects .nm{font-size:12px;font-weight:700;text-transform:uppercase}
.projects .n{font-size:clamp(30px,3.4vw,46px);line-height:.95;letter-spacing:-0.035em}
.projects .flag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;border:1px solid var(--ink);padding:2px 7px 3px;margin-top:8px}
.projects p{font-size:16px;line-height:1.5;padding-top:18px;border-top:1px solid var(--ink);flex:1}
.projects .shot{border:1px solid var(--ink);background:var(--canvas);aspect-ratio:16/10;position:relative;margin-top:4px}
.projects .go{margin-top:auto;padding-top:16px;font-size:12px;font-weight:700;text-transform:uppercase;display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.projects .go a{border-bottom:1px solid var(--ink)}
.projects .go a:hover{background:var(--yellow)}
.projects .go .todo{opacity:.45;font-weight:400;text-transform:none;font-size:12px}
.fails{margin-top:28px;padding:28px 30px;border:1px solid var(--ink);font-size:18px;line-height:1.6;max-width:84ch;background:var(--canvas)}
.fails b{font-weight:400;background:var(--yellow);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------- 7. программа ---------- */
.days{grid-template-columns:1fr 1fr;margin-top:8px}
.days>div{padding:32px 30px;display:flex;flex-direction:column;gap:16px}
.days .d{font-size:12px;font-weight:700;text-transform:uppercase}
.days h3{font-size:clamp(21px,2.2vw,28px);font-weight:400;line-height:1.03;letter-spacing:-0.025em}
.days p{font-size:17px;line-height:1.55;max-width:54ch}
.days .hand{margin-top:auto;padding-top:20px;border-top:1px solid var(--ink);font-size:16px;line-height:1.4}
.days .hand .k{font-size:11px;font-weight:700;text-transform:uppercase;opacity:.6;display:block;margin-bottom:5px}
.days .hand b{font-weight:400;box-shadow:inset 0 -0.35em 0 var(--yellow)}
.days .hand ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:4px}
.days .hand li{font-size:16px;line-height:1.4;padding-left:22px;text-indent:-22px}
.days .hand li::before{content:"↳ "}

/* ---------- 8. что останется ---------- */
.remain{grid-template-columns:1fr 1fr;margin-top:8px}
.remain>div{padding:22px 26px;font-size:17px;line-height:1.45}
.remain>div::before{content:"↳ ";opacity:.55}
.remain>*:last-child:nth-child(odd){grid-column:1/-1}

/* ---------- 9. кому подойдёт ---------- */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:8px}
.fit>div{padding:34px 32px;display:flex;flex-direction:column;gap:18px;border:1px solid var(--ink)}
.fit .yes{background:var(--canvas)}
.fit .no{background:var(--ink);color:var(--canvas)}
.fit h3{font-size:clamp(22px,2.4vw,30px);font-weight:400;line-height:1.02;letter-spacing:-0.03em}
.fit p{font-size:18px;line-height:1.55;max-width:44ch}
.fit .mark{font-size:12px;font-weight:700;text-transform:uppercase;display:inline-block;padding:3px 9px 4px;align-self:flex-start}
.fit .yes .mark{background:var(--yellow)}
.fit .no .mark{border:1px solid var(--canvas)}

/* ---------- 10. цена + запись ---------- */
.pay{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:start;margin-top:8px}
.paycard,.formcard{border:1px solid var(--ink);padding:34px 32px;background:var(--canvas)}
.paycard .amount{font-size:clamp(48px,6vw,84px);line-height:.9;letter-spacing:-0.045em}
.paycard .pre{margin-top:10px;font-size:16px;line-height:1.4}
.paycard .pre b{font-weight:400;background:var(--yellow);padding:0 .06em}
.paycard ul{list-style:none;margin-top:30px;padding-top:24px;border-top:1px solid var(--ink);display:flex;flex-direction:column;gap:13px}
.paycard li{font-size:17px;line-height:1.45;padding-left:24px;text-indent:-24px}
.paycard li::before{content:"↳ "}
.paycard .pill{margin-top:30px;width:100%}
.paycard .under{margin-top:16px;font-size:14px;line-height:1.55;opacity:.75}
.paycard .under a{text-decoration:underline;text-underline-offset:2px}
.paycard .under a:hover{background:var(--yellow)}

.formcard h3{font-size:clamp(21px,2.2vw,28px);font-weight:400;line-height:1.05;letter-spacing:-0.025em;margin-bottom:8px}
.formcard .intro{font-size:15px;line-height:1.4;opacity:.8;margin-bottom:20px;max-width:42ch}
.formcard .field input.err{border-color:#b00020;background:#fff}
.formcard .msg{display:none;font-size:13px;font-weight:700;color:#b00020;margin-top:6px}
.formcard .field.bad .msg{display:block}
.formcard .pill{width:100%;margin-top:6px}
.formcard .pill[disabled]{opacity:.55;cursor:progress}
.formcard .fine{margin-top:12px;font-size:12px;line-height:1.45;opacity:.7}
.formcard .fine a{text-decoration:underline;text-underline-offset:2px}
.form-ok{display:none;flex-direction:column;gap:14px;min-height:260px;justify-content:center}
.form-ok .big{font-size:clamp(26px,3vw,38px);line-height:1.02;letter-spacing:-0.03em}
.form-ok p{font-size:16px;line-height:1.4;max-width:40ch}
.form-fail{display:none;margin-top:12px;font-size:14px;line-height:1.4;border:1px solid #b00020;padding:12px 14px}

/* ---------- дальше: обучение делать проекты ---------- */
.after{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:8px}
.after p{font-size:18px;line-height:1.6;max-width:50ch}
.after p+p{margin-top:20px}
.after p b{font-weight:400;box-shadow:inset 0 -0.35em 0 var(--yellow)}
.speed{grid-template-columns:repeat(3,1fr);margin-top:32px}
.speed>div{padding:26px;display:flex;flex-direction:column;gap:12px}
.speed .n{font-size:clamp(22px,2.4vw,32px);line-height:1.02;letter-spacing:-0.03em}
.speed .l{font-size:16px;line-height:1.5;opacity:.8}

/* ---------- 11. вопросы ---------- */
html[data-v2] .faq summary{font-size:clamp(19px,2vw,26px);line-height:1.15;letter-spacing:-0.025em;padding:22px 0}
html[data-v2] .faq .ans{font-size:17px;line-height:1.6;padding-bottom:26px;max-width:74ch}

/* ---------- 12. финал ---------- */
.final-line{font-size:clamp(30px,5.2vw,72px);line-height:.98;letter-spacing:-0.04em;max-width:20ch;text-wrap:balance}
.final-txt{font-size:19px;line-height:1.6;max-width:54ch;margin-top:30px}

/* ---------- подвал ---------- */
.foot-legal{font-size:12px;line-height:1.5;opacity:.6;max-width:60ch;margin-top:14px}

/* ---------- ссылки в тексте ---------- */
.shell p a,.foot-legal a{text-decoration:underline;text-underline-offset:2px}
.shell p a:hover{background:var(--yellow);color:var(--ink)}

/* ---------- прокрутка/движение ---------- */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* ---------- адаптив ---------- */
@media(max-width:1100px){
  .who{grid-template-columns:220px 1fr;gap:32px}
  .steps,.factrow{grid-template-columns:1fr 1fr}
  .problem,.pay,.after{grid-template-columns:1fr}
  .projects,.speed{grid-template-columns:1fr}
  .after{gap:28px}
}
@media(max-width:680px){
  .who{grid-template-columns:1fr}
  .who .ph{max-width:240px}
  .steps,.factrow,.checks,.days,.remain,.fit,.speed{grid-template-columns:1fr}
  .remain>*:last-child:nth-child(odd){grid-column:auto}
  .honest{grid-template-columns:1fr;gap:12px}
  .hero-actions{width:100%}
  .hero-actions .pill{flex:1}
  .paycard,.formcard{padding:18px}
}

/* ============================================================
   PRODUCTION — боевые дополнения поверх макета.
   Макет использовал <image-slot> (dev-инструмент редактора);
   в проде это обычные <img>, плюс карточка CTA вместо формы.
   ============================================================ */

/* реальные изображения вместо слотов-заглушек */
.who .ph img,.projects .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.who .ph img{object-position:center}

/* компактная полоса «этим же способом собрано» */
.more{grid-template-columns:repeat(4,1fr)}
.more>div{padding:22px 20px;display:flex;flex-direction:column;gap:12px}
.more .shot{border:1px solid var(--ink);background:var(--canvas);aspect-ratio:16/10;position:relative;overflow:hidden}
.more .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.more .nm{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:-0.01em}
.more p{font-size:15px;line-height:1.45;opacity:.85}
@media(max-width:1100px){.more{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.more{grid-template-columns:1fr}}

/* карточка проекта без скриншота — типографская заглушка в ритме макета */
.projects .shot.empty{display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(135deg,var(--paper) 0 12px,var(--canvas) 12px 24px)}
.projects .shot.empty span{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:-0.01em;background:var(--canvas);border:1px solid var(--ink);padding:5px 11px 6px}

/* надзаголовок в герое — рамка «управлять ИИ, а не жать кнопки» */
.hero-kicker{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:-0.01em;line-height:1.3;margin-bottom:18px;display:inline-block;background:var(--yellow);padding:5px 11px 6px}

/* второй абзац в блоке «Честно» — держим во второй колонке сетки */
.honest p+p{grid-column:2;margin-top:0}
/* чип-метка не должен растягиваться на всю колонку грида */
.honest .ylabel{justify-self:start}
@media(max-width:680px){.honest p+p{grid-column:auto}}

/* ссылки на каналы в блоке автора */
.who .links{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}

/* облако сценариев — что можно собрать этим способом */
.cloud{display:flex;flex-wrap:wrap;gap:14px 12px;margin-top:26px}
.cloud span{display:inline-block;border:2px solid var(--ink);background:var(--canvas);padding:10px 17px 11px;font-size:16px;line-height:1.25;letter-spacing:-0.015em;box-shadow:3px 3px 0 var(--ink)}
.cloud span.y{background:var(--yellow)}
.cloud span.k{background:var(--ink);color:var(--canvas);box-shadow:3px 3px 0 rgba(21,21,21,.35)}
.cloud span:nth-child(3n+1){transform:rotate(-0.7deg)}
.cloud span:nth-child(3n+2){transform:rotate(0.5deg)}
.cloud span:nth-child(4n+3){transform:rotate(-0.35deg)}
.cloud span.big{font-size:19px;font-weight:700;padding:12px 20px 13px}
@media(max-width:680px){.cloud{gap:10px 8px}.cloud span{font-size:15px;padding:8px 13px 9px}.cloud span.big{font-size:16px}}

/* подпись-заголовок внутри секции (не путать с sechead) */
.sublabel{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:-0.01em;line-height:1.2;opacity:.6;margin:56px 0 18px}

/* пояснение вне sechead — держим читаемую меру строки */
.blocknote{font-size:17px;line-height:1.55;max-width:62ch;margin-top:18px;opacity:.85}

/* два результата: снаружи / внутри */
.results{grid-template-columns:1fr 1fr;margin-top:8px}
.results>div{padding:30px 28px;display:flex;flex-direction:column;gap:14px}
.results .k{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:-0.01em;opacity:.55}
.results h3{font-size:clamp(21px,2.2vw,28px);font-weight:400;line-height:1.05;letter-spacing:-0.025em}
.results p{font-size:17px;line-height:1.55}
.results .flow{font-weight:400;box-shadow:inset 0 -0.35em 0 var(--yellow)}
@media(max-width:680px){.results{grid-template-columns:1fr}}

/* карточка «записаться» вместо формы предзаписи */
.formcard.botcard{display:flex;flex-direction:column;justify-content:center;gap:18px}
.botcard .lead{font-size:17px;line-height:1.55;max-width:44ch}
.botcard ul{list-style:none;display:flex;flex-direction:column;gap:11px;padding-top:22px;border-top:1px solid var(--ink)}
.botcard li{font-size:16px;line-height:1.45;padding-left:24px;text-indent:-24px}
.botcard li::before{content:"↳ "}
.botcard .pill{margin-top:8px}
.botcard .fine{margin-top:2px;font-size:13px;line-height:1.5;opacity:.7}