/* MediaLead — итоговая главная · блок 12 «Способы начать». Четыре варианта на выбор (временно). */
.b12v{display:none}
.b12[data-v="1"] .b12v--1,.b12[data-v="2"] .b12v--2,.b12[data-v="3"] .b12v--3,.b12[data-v="4"] .b12v--4{display:block}
/* ===== 3 · Тест-драйв (из B) ===== */
.b12 .td { border-radius: 40px; background: var(--dark); color: #fff; padding: 64px; position: relative; overflow: hidden; }
.b12 .td::before { content: ""; position: absolute; width: 760px; height: 760px; left: -280px; bottom: -480px; border-radius: 50%; background: radial-gradient(circle, rgba(226, 65, 46, .35), transparent 62%); pointer-events: none; }
.b12 .td__head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end; position: relative; }
.b12 .td__head .h2 { font-size: clamp(40px, 5.4vw, 88px); margin-top: 24px; }
.b12 .td__head .h2 em { font-style: normal; color: var(--accent); }
.b12 .td__head p { color: #d4d4d8; font-size: 18px; }
.b12 .td__days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 56px; position: relative; }
.b12 .tdd { background: var(--dark-2); border-radius: 22px; padding: 22px; border: 1px solid var(--dark-3); }
.b12 .tdd__d { font-size: 13px; font-weight: 600; color: var(--accent); }
.b12 .tdd b { display: block; font-size: 20px; font-weight: 500; margin: 14px 0 8px; letter-spacing: -.02em; }
.b12 .tdd p { font-size: 14px; color: var(--dark-ink-2); }
.b12 .tdd--end { background: var(--accent); border-color: var(--accent); }
.b12 .tdd--end .tdd__d { color: #fff; }
.b12 .tdd--end p { color: rgba(255, 255, 255, .85); }
.b12 .td__fork { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; margin-top: 12px; position: relative; align-items: stretch; }
.b12 .fork { border-radius: 22px; padding: 22px; background: #fff; color: var(--ink); }
.b12 .fork h4 { font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.b12 .fork li { font-size: 14px; color: var(--ink-2); padding: 5px 0; display: flex; gap: 8px; }
.b12 .fork li::before { content: "·"; color: var(--accent); font-weight: 800; }
.b12 .fork--no { background: var(--dark-2); color: #fff; }
.b12 .fork--no li { color: var(--dark-ink-2); }
.b12 .td__cta { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 0 10px; }
.b12 .td__cta small { font-size: 13px; color: var(--dark-ink-2); max-width: 260px; }
@media (max-width:1100px){.b12 .td{padding:48px}.b12 .td__fork{grid-template-columns:1fr 1fr}.b12 .td__cta{grid-column:1 / -1;flex-direction:row;align-items:center;padding:10px 0 0}.b12 .td__head{grid-template-columns:1fr}.b12 .td__days{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.b12 .td{padding:28px 18px;border-radius:28px}.b12 .td__days{grid-template-columns:1fr;margin-top:36px}.b12 .td__fork{grid-template-columns:1fr}.b12 .td__cta{flex-direction:column;align-items:stretch}}

/* общее */
.b12g{color:var(--ink-3)}
.b12__go{display:flex;justify-content:flex-end;margin-top:22px}
.b12__next{font-size:15px;font-weight:500;color:var(--ink-2);text-decoration:none}
.b12__next:hover{color:var(--accent)}
.b12 ul{margin:0;padding:0;list-style:none}
/* «Или начните с малого» */
.b12e{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:16px;padding:14px 16px;border-radius:22px;background:var(--paper)}
.b12e__h{margin-right:6px;font-size:15px;color:var(--ink-3)}
.b12e__b{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:14px;background:#fff;font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;transition:background .2s,color .2s}
.b12e__b:hover{background:var(--ink);color:#fff}
.b12e__b svg{width:16px;height:16px}
.b12e__b--tg{background:#2aabee;color:#fff}
.b12e__av{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(140deg,#f3a08f,var(--accent));color:#fff;font-size:12px;font-weight:600}
/* другие способы под тест-драйвом */
.b12w{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:16px}
.b12w span{margin-right:6px;font-size:15px;color:var(--ink-3)}
.b12w__b{height:44px;padding:0 16px;border:0;border-radius:14px;background:var(--paper);font:inherit;font-size:15px;font-weight:500;cursor:pointer}
.b12w__b:hover{background:var(--ink);color:#fff}

/* ===== 1 · Выберите, как начать ===== */
.b12o{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:12px}
.b12o__i{display:flex;flex-direction:column;gap:14px;padding:26px;border-radius:28px;background:var(--paper)}
.b12o__i--main{background:var(--dark);color:#fff}
.b12o__tag{align-self:flex-start;padding:6px 12px;border-radius:999px;background:#fff;font-size:13px;font-weight:600;color:var(--ink-2)}
.b12o__i--main .b12o__tag{background:var(--accent);color:#fff}
.b12o__tag--free{background:rgba(31,157,85,.12);color:#17824a}
.b12o__i h3{margin:0;font-size:24px;font-weight:500;letter-spacing:-.02em;line-height:1.15}
.b12o__i ul{display:grid;gap:9px}
.b12o__i li{display:flex;gap:9px;font-size:15px;line-height:1.4;color:var(--ink-2)}
.b12o__i--main li{color:var(--dark-ink-2)}
.b12o__i li svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--good)}
.b12o__i--main li svg{color:#5ed38f}
.b12o__note{margin:0;font-size:13px;color:var(--ink-3)}
.b12o__i .btn{margin-top:auto;justify-content:space-between}

/* ===== 4 · По вашей ситуации ===== */
.b12s{padding:10px;border-radius:30px;background:var(--paper)}
.b12s__tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.b12s__t{height:56px;border:0;border-radius:20px;background:transparent;font:inherit;font-size:16px;font-weight:500;color:var(--ink-2);cursor:pointer;transition:background .25s,color .25s}
.b12s__t:hover{background:rgba(255,255,255,.6)}
.b12s__t.is-on{background:var(--ink);color:#fff}
.b12s__p{display:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:10px;padding:30px;border-radius:24px;background:#fff}
.b12s__p.is-on{display:grid;animation:b12in .45s var(--ease)}
@keyframes b12in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.b12s__k{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.b12s__l h3{margin:8px 0 0;font-size:clamp(28px,2.6vw,38px);font-weight:500;letter-spacing:-.025em;line-height:1.1}
.b12s__l p{margin:14px 0 22px;font-size:17px;line-height:1.5;color:var(--ink-2);max-width:520px}
.b12s__steps{display:grid;gap:10px;margin:0;padding:0;list-style:none;align-content:center}
.b12s__steps li{display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:18px;background:var(--paper);font-size:16px;line-height:1.4}
.b12s__steps b{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;background:var(--ink);color:#fff;font-size:14px}

@media (max-width:1100px){.b12o{grid-template-columns:1fr 1fr}.b12s__p{grid-template-columns:1fr}}
@media (max-width:720px){
  .b12o{grid-template-columns:1fr}
  .b12e{padding:12px}
  .b12e__h{width:100%}
  .b12s__tabs{grid-template-columns:1fr 1fr}
  .b12s__t{height:48px;font-size:14.5px}
  .b12s__p{padding:20px}
  .b12s__l .btn{width:100%;justify-content:space-between}
}
