/* Вариант 6 · «Целое и часть, коротко» (идея и драфт Элис, 11.11.2026). Фон страницы один — чёрный. На нём лежат
   блоки на всю ширину экрана со своим скруглением и небольшим зазором между собой: правка в две колонки, семь пунктов,
   форма, методика. Без подложки остаются первый экран, заголовки разделов и финальная правка с лучами 99 %.
   Композиция правки — как в варианте 5 (число, подпись, название | графика); контент сокращён до превью перед PDF.
   Идёт поверх landing-v5.css. */

.v6 { --blk-m: 16px; --blk-r: 24px; --blk-pad: 120px; }   /* поле блока от края экрана = зазор между блоками */
@media (max-width: 1100px) { .v6 { --blk-m: 12px; --blk-r: 20px; --blk-pad: 88px; } }
@media (max-width: 700px) { .v6 { --blk-m: 8px; --blk-r: 16px; --blk-pad: 56px; } }

/* ── ритм: раздел = заголовок без подложки + блоки; между разделами воздух, между блоками зазор ───── */
.v6 main .sec { padding: 0; background: none; overflow: visible; }
.v6 main { padding-bottom: var(--blk-m); }
.v6 .sect { margin: 176px auto 96px; }
.v6 .sect h2 { max-width: 1000px; margin-top: 12px; }
.v6 .sect .kn-sub { margin-top: 24px; }
.tile.inv, .blk.inv { background: var(--bg-page); color: var(--text-primary); }   /* светлый блок: data-theme="light" */

/* блок на всю ширину экрана; содержимое внутри стоит на линиях страницы (.wrap) */
.blks { display: grid; row-gap: var(--blk-m); }
.blk { margin: 0 var(--blk-m); padding: var(--blk-pad) 0; border-radius: var(--blk-r); background: var(--bg-surface-2); min-width: 0; }
.blk .wrap { padding: 0 calc(var(--m) - var(--blk-m)); max-width: calc(1440px - 2 * var(--blk-m)); }
.blk .sq-bg { fill: var(--bg-surface-2); }
@media (max-width: 700px) { .blk .wrap { padding: 0 20px; } }

/* бенто «что нашли»: сетка варианта 4 на чёрном фоне, плитка 99 % — светлая */
.v6 .bento { margin-top: 0; }

/* ── правка: композиция варианта 5 без разбора и плиток ───────────── */
.v6 .vfx { margin-top: 0; scroll-margin-top: 24px; }
.v6 .vfx-q.left { text-align: left; margin: 20px 0 0; max-width: 520px; }
.v6 .vfx.split h3 { margin-top: 48px; }
/* лента и поле: слева находка, справа название правки на её нижней линии, графика под ними во всю ширину */
.v6 .vfx.wide .vfx-top { align-items: end; }
.v6 .vfx.wide h3 { margin: 0; max-width: 560px; }
/* финал (лучи 99 %) стоит без подложки — ему нужен свой воздух сверху и снизу */
.v6 .vfx.open { padding: 128px 0 144px; }

/* графика как в варианте 4: поле единиц и код — во всю ширину блока, доли-полосы — в колонке */
.v6 .vfx-viz .ufw { margin: 0; }
.v6 .vfx-viz .vcode { margin-top: 0; }
.v6 .vfx-r > .meta { margin-bottom: 24px; }
.v6 .vfx-r > .bars { max-width: 560px; }
/* на фоне блока дорожка полосы и плитки кода должны отличаться от самого блока */
.blk .b-t { background: var(--base-700); }
.blk .code-b.before { background: var(--bg-surface); } .blk .code-b.after { background: var(--bg-page); }
/* бенто и плитки по площади: единицы — квадраты */
.uni-k .uf, .tm-k .uf { display: block; } .uni-k .field, .tm-k .field { width: 100%; }
.v6 .tm-a .field .u { fill: var(--text-primary); }
.v6 .tile.hot .field .u { fill: var(--key-on-brand); }
.v6 .tm-d .field .u { fill: var(--base-600); }

/* после девяти правок: что в чек-листе и кнопка */
.gate { padding: 56px 0; }
.gate-in { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.gate .act { max-width: 760px; }

/* ── интерактивный отчёт: плитки по площади и блок с семью пунктами ─────────────── */
.v6 .builds { margin-top: 0; }
.v6 .tm-d { background: var(--bg-surface); }
.v6 .tm-d .tk.d { stroke: var(--base-600); }
.brief-b { margin-top: var(--blk-m); padding: 72px 0; }
.v6 .brief-t { margin-top: 0; }
.v6 .brief { gap: 28px 48px; margin-top: 40px; }
.v6 .brief li { align-items: center; }

/* ── проверь себя ─────────────────────────────────────────────────── */
.v6 .kn-check { background: none; }
.v6 .kn-check .three { margin-top: 0; }

/* ── форма — светлый блок; методика — блок под ней ────────────────── */
.v6 #form { margin-top: 176px; scroll-margin-top: 24px; }
.form-b h2 { margin-top: 12px; }
.v6 .form-b .form { background: none; padding: 0; }
.v6 .form-b .form input { background: var(--bg-surface-2); }
.mth-b { padding: 56px 0; }
.mth summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: end; list-style: none; cursor: pointer; }
.mth summary::-webkit-details-marker { display: none; }
.mth summary .kicker { grid-column: 1 / -1; margin-bottom: 12px; }
.mth summary::after { content: '+'; font: 300 72px/60px var(--font-base); color: var(--text-secondary); }
.mth[open] summary::after { content: '−'; }
.mth summary:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 6px; }
.mth .m-list { margin-top: 48px; max-width: 760px; }
.v6-method .cap { margin-top: 28px; }

@media (max-width: 1100px) {
  .v6 .sect { margin: 128px auto 56px; } .v6 #form { margin-top: 128px; }
  .v6 .vfx.open { padding: 96px 0 104px; }
  .form-b .two { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .v6 .vfx.wide h3 { margin-top: 40px; max-width: none; }
}
@media (max-width: 700px) {
  .v6 .sect { margin: 96px auto 40px; } .v6 #form { margin-top: 96px; }
  .brief-b { padding: 40px 0; }
  .v6 .vfx.split h3, .v6 .vfx.wide h3 { margin-top: 28px; }
  .v6 .vfx.open { padding: 72px 0 80px; }
  .gate { padding: 32px 0; } .gate-in { flex-direction: column; align-items: flex-start; gap: 24px; } .gate .btn { width: 100%; justify-content: center; }
  .v6 .brief { gap: 20px; margin-top: 28px; }
  .mth-b { padding: 32px 0; } .mth summary::after { font-size: 48px; line-height: 40px; } .mth .m-list { margin-top: 32px; }
}

/* ── подвал — тоже блок: пламя светит сквозь сетку на фоне блока ───── */
.v6 .end { margin: 0 var(--blk-m) var(--blk-m); border-radius: var(--blk-r); background: var(--bg-surface-2); }
.v6 .end .wrap { padding-left: calc(var(--m) - var(--blk-m)); padding-right: calc(var(--m) - var(--blk-m)); }
@media (max-width: 700px) { .v6 .end .wrap { padding-left: 20px; padding-right: 20px; } }