/* ФАБУЛА · Версия. Эталон: доски Version (1440) и VersionM (390).
   Шире 1280 — раскладка десктопа, 1101–1280 — сжатый десктоп, 721–1100 — столбцы в один, до 720 — телефон. */

.v-sec{padding-top:110px;margin-top:110px}
.v-head{display:grid;grid-template-columns:620px minmax(0,1fr);gap:60px;align-items:end}
.v-head>p{max-width:560px}

/* первый экран: текст слева, строка выпуска в двух оформлениях справа */
.v-hero{display:grid;grid-template-columns:minmax(540px,560fr) minmax(0,660fr);column-gap:60px;align-items:start;padding-top:100px}
.v-hero-t{display:flex;flex-direction:column;gap:22px}
.v-hero-t .lead{max-width:520px}
.v-go{align-self:flex-start;margin-top:8px}
.v-hero-x{container-type:inline-size;padding-top:250px;display:flex;flex-direction:column;gap:34px}
.v-hero-x>.body{max-width:560px}
.v-ex{display:flex;flex-direction:column;gap:10px}
.v-ex .meta{line-height:17px}
.v-row{margin:0;display:grid;grid-template-columns:100px 160px minmax(0,1fr);gap:16px;padding:12px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);line-height:20px}
.v-t{justify-self:start}
.v-2{display:none}
.v-cl svg path{stroke:#1f5f8b}
/* уже 660 px: дата и издание строкой сверху, заголовок в две строки */
@container (max-width:659px){
 .v-row{display:flex;flex-wrap:wrap;gap:6px 0;padding:12px 0 14px}
 .v-d,.v-s{font-size:13px;line-height:17px;color:var(--ink-caption)}
 .v-s{margin-left:14px}
 .v-t{flex:0 0 100%;line-height:1.75}
 .v-1{display:none}
 .v-2{display:inline}
}

/* что настраиваем: пять листов в два столбца, правый ниже */
.v-cf{display:flex;flex-direction:column;gap:60px}
.v-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 80px;align-items:start}
.v-col{display:flex;flex-direction:column;gap:40px}
.v-col2{padding-top:130px}
.v-c{transform:rotate(var(--r));padding:30px 34px 32px;display:grid;grid-template-columns:90px minmax(0,1fr);gap:26px}
.v-n{font-size:22px;line-height:1.3}
.v-cb{display:flex;flex-direction:column;gap:12px}
.v-due{margin:6px 0 0;font-size:13px;line-height:1.3;color:var(--ink-caption)}
.v-due>span{font-size:15px;color:var(--ink)}

/* тёмная полоса: что работает с первого дня */
.v-k{position:relative;margin-top:140px}
.v-k .in{max-width:1440px;margin:0 auto;padding:120px var(--pad) 137px;display:grid;grid-template-columns:560px minmax(0,1fr);gap:80px}
.v-k-t{display:flex;flex-direction:column;gap:22px}
.v-k .body{max-width:460px;color:var(--night-caption)}
.v-kit{margin:0;padding:0;list-style:none;border-bottom:1px solid rgba(237,235,230,.28)}
.v-kit li{padding:16px 0;border-top:1px solid rgba(237,235,230,.28);font-size:16px;line-height:1.5}

/* как запускаем: три шага лесенкой */
.v-l{display:flex;flex-direction:column;gap:60px}
.v-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:36px}
.v-steps li{display:grid;grid-template-columns:50px minmax(0,1fr);gap:20px;width:min(680px,100%)}
.v-steps li:nth-child(2){margin-left:min(200px,max(0px,(100% - 680px) / 2))}
.v-steps li:nth-child(3){margin-left:min(400px,max(0px,100% - 680px))}
.v-st{display:flex;flex-direction:column;gap:6px}
.v-st .step{margin:0}
.v-when{display:block;margin-top:4px;font-size:13px;color:var(--ink-caption)}
.v-note{margin:0 0 0 min(470px,max(0px,100% - 420px));width:min(420px,100%)}

/* где работает: два листа, правый ниже */
.v-w{display:flex;flex-direction:column;gap:60px}
.v-ws{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 80px;align-items:start}
.v-w1,.v-w2{transform:rotate(var(--r));padding:34px 40px 36px;display:flex;flex-direction:column}
.v-w1{gap:4px}
.v-w1 .h3{margin-bottom:14px}
.v-side{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.v-side li{padding:12px 0;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:4px}
.v-side .ui{line-height:normal}
.v-w2{margin-top:120px;gap:16px}

/* форма */
.v-ct{margin-top:110px;padding-top:0}
.v-ct .in{padding-top:110px;padding-bottom:142px}
.v-ask{gap:18px}

/* 1101–1280: столбцы делятся по ширине */
@media (max-width:1280px){
 .v-head{grid-template-columns:minmax(540px,1fr) minmax(0,1fr)}
 .v-cards,.v-ws{gap:0 60px}
 .v-c{grid-template-columns:60px minmax(0,1fr);gap:18px;padding:28px 30px 30px}
 .v-k .in{grid-template-columns:440px minmax(0,1fr);gap:60px}
}
/* 721–1100: всё в один столбец, листы по порядку, как на доске VersionM */
@media (max-width:1100px){
 .v-head{grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
 .v-hero{grid-template-columns:minmax(0,1fr);row-gap:56px}
 .v-hero-t{max-width:640px}
 .v-hero-x{padding-top:0;max-width:680px}
 .v-cards{display:flex;flex-direction:column;gap:40px;max-width:680px}
 .v-col{display:contents}
 .v-col2{padding:0}
 .v-c{order:var(--o)}
 .v-k .in{grid-template-columns:minmax(0,1fr);gap:40px;padding-bottom:96px}
 .v-k-t{max-width:640px}
 .v-kit{max-width:680px}
 .v-ws{display:flex;flex-direction:column;gap:40px;max-width:680px}
 .v-w2{margin-top:0}
}
/* телефон: доска VersionM */
@media (max-width:720px){
 .v-bd{display:none}
 .v-sec{padding-top:80px;margin-top:72px}
 .v-hero{padding-top:40px;row-gap:52px}
 .v-go{margin-top:0}
 .v-hero-x{gap:28px}
 .v-cf,.v-l,.v-w{gap:22px}
 .v-cards{margin-top:10px;gap:22px}
 .v-c{display:flex;flex-direction:column;gap:12px;margin:0 -4px;padding:22px 22px 24px;transform:rotate(var(--rm))}
 .v-n{line-height:1}
 .v-due{margin-top:4px}
 .v-k{margin-top:80px}
 .v-k .in{display:flex;flex-direction:column;gap:22px;padding:72px var(--pad)}
 .v-kit{margin-top:10px}
 .v-kit li{padding:14px 0}
 .v-steps{margin-top:10px;gap:26px}
 .v-steps li{display:flex;gap:16px;align-items:baseline;width:auto}
 .v-steps li:nth-child(2){margin-left:24px}
 .v-steps li:nth-child(3){margin-left:48px}
 .v-steps .step-n{flex:none;width:30px}
 .v-note{margin:6px 0 0 88px;width:auto}
 .v-ws{margin-top:10px;gap:40px}
 .v-w1,.v-w2{margin:0 -4px;padding:24px 22px 26px}
 .v-w1 .h3{margin-bottom:12px}
 .v-w2{gap:14px}
 .v-ct{margin-top:72px}
 .v-ct .in{padding:80px var(--pad) 72px}
 .v-ct .fb-form{gap:20px}
}