/* Воронка «Написать стратегу». Источник: design/lead_carousel/preview.html. */
:root{
  --paper:#F3F0E7; --ink:#15140F; --ink-soft:#4A4740; --pen:#2B4C7E; --mark:#CDE86B; --white:#FFFEFA;
  --grid:rgba(43,76,126,.055); --grid-strong:rgba(43,76,126,.11);
  --serif:'Literata',Georgia,serif; --hand:'Caveat','Segoe Script',cursive; --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background-color:var(--paper);
  background-image:linear-gradient(var(--grid-strong) 1px,transparent 1px),linear-gradient(90deg,var(--grid-strong) 1px,transparent 1px),
    linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:50px 50px,50px 50px,10px 10px,10px 10px;
  font:400 19px/1.62 var(--serif);-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--pen);outline-offset:3px}

/* шапка */
.topbar{display:flex;gap:24px;align-items:center;padding:12px clamp(16px,4vw,48px);
  background:var(--ink);color:var(--paper);font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.topbar .logo{text-decoration:none;font-size:13px}
.topbar .logo::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mark);margin-right:10px;vertical-align:1px}
.topbar .crumb{flex:1;opacity:.6}
.topbar .tgl{text-decoration:none;color:var(--mark)}
.topbar .tgl:hover{text-decoration:underline}

/* полоса шагов */
.chapters{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:1100px;margin:0 auto;padding:18px 32px 0 96px}
.chapters a{display:block;text-decoration:none;padding:10px 12px 9px;border-top:4px solid var(--grid-strong);font:600 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.chapters a b{display:block;font:600 15px/1.25 var(--serif);letter-spacing:0;text-transform:none;color:var(--ink);margin-top:4px}
.chapters a.done{border-top-color:var(--pen)}
.chapters a.now{border-top-color:var(--mark);background:rgba(205,232,107,.25)}

/* лист */
.page{display:grid;grid-template-columns:minmax(0,680px) 260px;gap:48px;max-width:1100px;margin:0 auto;padding:40px 32px 120px 96px}
.post{min-width:0}
.kicker{display:flex;flex-wrap:wrap;gap:6px 18px;font:600 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 22px}
.kicker .rub{color:var(--pen)}
h1{font:700 clamp(32px,4.4vw,48px)/1.1 var(--serif);letter-spacing:-.015em;margin:0 0 22px}
h1 mark,h2 mark{background:linear-gradient(transparent 55%,var(--mark) 55%);color:inherit;padding:0 2px}
.lead{font-size:22px;line-height:1.5;color:var(--ink-soft);margin:0 0 36px}
h2{font:700 27px/1.2 var(--serif);margin:52px 0 14px}
h3{font:700 20px/1.3 var(--serif);margin:26px 0 8px}
p{margin:0 0 16px}
.small{font-size:15px;color:var(--ink-soft)}

/* три термина */
.terms{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:14px 0 18px;border:1.5px solid var(--ink);background:var(--white)}
.terms div{padding:18px 16px 14px;border-right:1.5px solid var(--ink)}
.terms div:last-child{border-right:0}
.terms b{display:block;font:700 34px/1 var(--serif);color:var(--pen)}
.terms i{display:block;font:600 10.5px/1.4 var(--mono);font-style:normal;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin:6px 0 10px}
.terms span{display:block;font-size:16px;line-height:1.4}

/* две эпохи */
.era{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 18px}
.era div{border:1.5px solid var(--ink);padding:16px;background:var(--white)}
.era div:last-child{background:var(--mark)}
.era i{display:block;font:600 11px/1 var(--mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;color:var(--ink-soft)}
.era div:last-child i{color:var(--ink)}
.era span{font-size:17px;line-height:1.45;display:block}

/* тезисы */
.thesis{list-style:none;padding:0;margin:10px 0 0;counter-reset:t}
.thesis>li{counter-increment:t;display:grid;grid-template-columns:48px 1fr;gap:6px;padding:14px 0;border-bottom:1px solid var(--grid-strong);font-size:19px;line-height:1.4}
.thesis>li::before{content:counter(t);font:700 30px/1 var(--hand);color:var(--pen)}
.thesis>li>span>b{font-weight:700}

/* переход на следующую страницу */
.next{display:block;text-decoration:none;margin:64px 0 14px;background:var(--ink);color:var(--paper);padding:26px 28px;transition:transform .2s}
.next:hover{transform:translateX(6px)}
.next i{display:block;font:600 12px/1 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--mark);margin-bottom:10px}
.next b{font:700 28px/1.2 var(--serif)}
.next b::after{content:" →"}
.quiet{font-size:16px;color:var(--ink-soft)}
.quiet a{color:var(--pen)}

.seg{display:flex;gap:0;margin-bottom:6px}
.seg button{flex:1;border:1.5px solid var(--ink);background:var(--white);padding:9px;font:600 13px/1 var(--mono)}
.seg button+button{border-left:0}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.done-box{background:var(--white);border:1.5px solid var(--ink);padding:18px 20px;margin-top:18px}

[hidden]{display:none!important}

@media (max-width:980px){
  .page{grid-template-columns:1fr;padding:28px 18px 90px}
  .chapters{padding:14px 18px 0}
}
@media (max-width:620px){
  .terms,.era{grid-template-columns:1fr}
  .terms div{border-right:0;border-bottom:1.5px solid var(--ink)}
  .chapters a b{font-size:13px}
  .topbar{gap:12px;letter-spacing:.03em;padding:12px 14px}
  .topbar .logo::before{margin-right:6px}
}

/* боли, цепочка, раскрывашки */
.pain{position:relative;border-left:0;padding:0 0 0 64px;margin:0 0 40px}
.pain h3{margin:0 0 8px;font-size:23px}
.pain p{margin:0 0 8px}
.pain p.gap{margin-top:14px}
.pain .pn{position:absolute;left:0;top:2px;font:600 13px/1 var(--mono);color:var(--pen);border:1.5px solid var(--pen);padding:6px 7px;border-radius:3px}
.chain{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:12px 0 8px;counter-reset:c}
.chain div{position:relative;background:var(--white);border:1.5px solid var(--ink);border-right:0;padding:12px 12px 12px;font-size:14.5px;line-height:1.35}
.chain div:last-child{border-right:1.5px solid var(--ink)}
.chain div:not(:last-child)::after{content:"→";position:absolute;right:-9px;top:50%;transform:translateY(-50%);background:var(--paper);font:700 14px/1 var(--mono);padding:2px 0;z-index:1}
.chain i{display:block;font:600 10.5px/1 var(--mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--pen);margin-bottom:6px}
.chain .win{background:var(--mark)}

details.more{margin:12px 0 4px}
details.more summary{list-style:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font:600 12.5px/1 var(--mono);color:var(--pen);border:1.5px solid var(--pen);border-radius:30px;padding:8px 14px}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"+";font-size:16px;line-height:.8}
details.more[open] summary{background:var(--pen);color:#fff}
details.more[open] summary::before{content:"−"}
.chips{list-style:none;padding:0;margin:14px 0 6px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.chips li{background:var(--white);border:1px solid var(--grid-strong);border-left:3px solid var(--mark);padding:8px 10px;font-size:15px;line-height:1.35}
.chips i{display:block;font:600 10px/1 var(--mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
.steps20{list-style:none;padding:0;margin:14px 0 6px;columns:2;column-gap:14px;font-size:15px;line-height:1.35;counter-reset:s}
.steps20 li{break-inside:avoid;padding:5px 0 5px 30px;position:relative;counter-increment:s}
.steps20 li::before{content:counter(s);position:absolute;left:0;top:5px;font:600 12px/1.4 var(--mono);color:var(--pen)}
.steps20 li.st{break-after:avoid;counter-increment:none;padding-left:0;margin-top:8px;font:600 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;border-bottom:1.5px solid var(--ink)}
.steps20 li.st::before{content:none}
.metr{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 6px}
.metr>div{background:var(--white);border:1.5px solid var(--ink);padding:12px 12px 6px}
.metr .crm{background:var(--mark)}
.metr h4{margin:0 0 6px;font:600 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.metr h4 em{display:block;font-style:normal;font-weight:500;opacity:.7;text-transform:none;letter-spacing:0}
.metr ul{margin:0;padding-left:16px;font-size:14.5px;line-height:1.35}
.metr li{margin-bottom:5px}

/* форма */
.apply{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:64px 0 0;background:var(--ink);color:var(--paper);border-radius:6px;overflow:hidden;box-shadow:8px 8px 0 var(--mark);scroll-margin-top:70px}
.apply-l{padding:30px 28px;border-right:1px solid rgba(243,240,231,.14)}
.apply-r{padding:30px 28px;background:#1E1D17}
.who{display:flex;gap:12px;align-items:center;margin-bottom:22px}
.ava{width:46px;height:46px;border-radius:50%;background:var(--mark);color:var(--ink);display:grid;place-items:center;font:700 22px/1 var(--serif)}
.who b{display:block;font-size:17px}
.who small{display:block;font:500 12px/1.3 var(--mono);opacity:.6}
.apply h2{margin:0 0 22px;color:var(--paper);font-size:30px}
.flow{list-style:none;padding:0;margin:0;position:relative}
.flow::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:rgba(205,232,107,.35)}
.flow li{position:relative;padding:0 0 18px 30px;font-size:16px;line-height:1.4;opacity:.9}
.flow li::before{content:"";position:absolute;left:0;top:5px;width:14px;height:14px;border-radius:50%;background:var(--ink);border:2px solid var(--mark)}
.flow li:last-child::before{background:var(--mark)}
.flow b{display:block;font:600 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mark)}
.apply label{display:block;font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin:0 0 6px}
.apply input{width:100%;font:400 19px/1.3 var(--serif);color:var(--paper);background:transparent;border:0;border-bottom:1.5px solid rgba(243,240,231,.35);padding:8px 0 10px;margin:0 0 20px;outline:0;border-radius:0}
.apply input::placeholder{color:rgba(243,240,231,.35)}
.apply input:focus{border-bottom-color:var(--mark)}
.apply input.bad{border-bottom-color:#E0704F}
.apply .seg{display:inline-flex;background:rgba(243,240,231,.08);border-radius:30px;padding:3px;margin:0 0 6px}
.apply .seg button{border:0;background:transparent;color:var(--paper);border-radius:30px;padding:8px 16px;font:600 12.5px/1 var(--mono);flex:none}
.apply .seg button[aria-pressed="true"]{background:var(--mark);color:var(--ink)}
.send{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;background:var(--mark);color:var(--ink);font:700 19px/1 var(--serif);padding:18px 20px;border-radius:4px;margin-top:4px;transition:transform .15s,box-shadow .15s}
.send .arr{font:700 22px/1 var(--mono);transition:transform .2s}
.send:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(205,232,107,.25)}
.send:hover .arr{transform:translateX(6px)}
.send[disabled]{opacity:.6;cursor:wait}
.fine{font-size:13.5px;opacity:.55;margin:12px 0 0}
.apply .done-box{background:rgba(205,232,107,.12);border:1px solid var(--mark);color:var(--paper);border-radius:4px;padding:14px 16px;margin-top:14px;font-size:16px}
.apply .done-box a{color:var(--mark)}
.trap{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.fallback p{margin:0 0 10px}
.fallback textarea{width:100%;min-height:120px;font:500 13px/1.5 var(--mono);color:var(--paper);background:rgba(243,240,231,.06);border:1px solid rgba(243,240,231,.25);border-radius:3px;padding:10px;resize:vertical}
.fallback .hint{font-size:13.5px;opacity:.7;margin:8px 0 0}
.fallback .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.fallback .acts a{display:inline-block;text-decoration:none;font:600 12.5px/1 var(--mono);padding:12px 14px;border-radius:3px;border:1.5px solid var(--mark)}
.fallback .acts a:first-child{background:var(--mark);color:var(--ink)}
@media (max-width:760px){
  .apply{grid-template-columns:1fr}
  .apply-l{border-right:0;border-bottom:1px solid rgba(243,240,231,.14)}
  .chain{grid-template-columns:1fr}
  .chain div{border-right:1.5px solid var(--ink);border-bottom:0}
  .chain div:last-child{border-bottom:1.5px solid var(--ink)}
  .chain div:not(:last-child)::after{content:"↓";right:auto;left:14px;top:auto;bottom:-10px;transform:none}
  .chips,.metr{grid-template-columns:1fr}
  .steps20{columns:1}
  .pain{padding-left:0}.pain .pn{position:static;display:inline-block;margin-bottom:8px}
}