/* Вариант 5 · «Целое и часть»: воздух, поля и плитки варианта 4, засечки и раскладка правки варианта 3, формы — разные.
   Идёт поверх landing-v1.css (общие блоки, адаптив), landing-v3.css (засечки, полукруг первого экрана) и
   landing-v4.css (плитки, бенто, подача по центру). Капса нет нигде.
   Две общие линии страницы: левый край (поле) и середина — край третьей колонки плиток; на них стоят текст,
   графика и плитки каждой правки. */

.v5 { --m: 96px; }
/* капсом в серии не пишем нигде (Элис, 11.11.2026): служебные метки — обычным набором, роль подписи 16 / 20 */
.v5 .meta { text-transform: none; letter-spacing: .01em; font-size: 16px; line-height: 20px; }
/* от 1440 поле 93: полоса контента 1254 = 418 засечек ленты × 3 px, лента и плитки встают край в край */
@media (min-width: 1440px) { .v5 { --m: 93px; } }
@media (max-width: 1100px) { .v5 { --m: 40px; } }
@media (max-width: 700px) { .v5 { --m: 20px; } }

/* форма из засечек в два слоя: каркас и горячий слой того же размера поверх (tools/forms.mjs) */
.tf { position: relative; display: block; line-height: 0; }
.tf svg { display: block; width: 100%; height: auto; }
.tf .lay-hot { position: absolute; left: 0; top: 0; height: 100%; }
.tk.crisp { shape-rendering: crispEdges; }
/* прямые формы рисуются 1 : 1 с целым шагом (иначе на обычном экране муар): три варианта одной формы по ширине окна,
   обёртка .fitw берёт ширину показанного варианта, подписи концов встают по его краям */
.fitw { width: var(--w1); margin-left: calc((100% - var(--w1)) / 2); }
.tf.w2, .tf.narrow { display: none; }
@media (max-width: 1439px) { .fitw { width: var(--w2); margin-left: calc((100% - var(--w2)) / 2); } .tf.w1 { display: none; } .tf.w2 { display: block; } }
@media (max-width: 1100px) { .fitw { width: auto; max-width: var(--wn); margin: 0 auto; } .tf.w2 { display: none; } .tf.narrow { display: block; } }
.tf.rise svg { height: 400px; }
.sq-bg { fill: var(--bg-page); }
.tile.hot .tk.w { stroke: var(--key-on-brand); }
/* метка 13 px на горячей плитке: brand-900 даёт 4,04 : 1, шаг темнее — 5,05 : 1 */
.v5 .tile.hot { --text-secondary: var(--brand-950); }
/* кегли вне шкалы серии → роли: оглавление 18 / 24, подпись полукруга 33 / 40 */
.v5 .toc9 a { font-size: 18px; line-height: 24px; }
/* горячее — самое громкое: горячие засечки колец и дуг толще нейтральных (у форм forms.mjs толщина задана в самой форме) */
.v5 .rings:not(.own) .tk.h, .v5 .horizon .tk.h { stroke-dasharray: 0.7 0.3; stroke-dashoffset: -0.15; }

/* ── первый экран: вопрос по центру, под ним полукруг; пояснение и кнопки — под полукругом ───────── */
.v5-hero { padding-bottom: 0; }
.v5-hero .kn-c { padding-top: 8px; }
.v5-hero h1 { max-width: 1120px; margin-top: 16px; }
.v5-hero h1 span { text-wrap: balance; }
.v5-hero .hz-fig { margin-top: 48px; }
/* подпись числа — прямой Martina: по ролям серии пояснение у числа — текст исследования, не цитата. На узком окне
   подпись в SVG мельчает, её заменяет строка сразу под полукругом */
.v5-hero .hz-c { font: 400 30px var(--font-evidence); letter-spacing: 0; text-transform: none; fill: var(--text-primary); }
.hz-cap { display: none; text-align: center; margin-top: 20px; }
/* под полукругом — его подпись одной группой: что значат пять чисел у ножек и источник */
.hz-key { padding-top: 20px; }
.hz-key .cap { max-width: none; margin-top: 8px; }
/* ниже, отдельной строкой на двух линиях страницы: фраза о графике слева, кнопки справа на её нижней линии */
.v5-hero .hz-leg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; align-items: end; padding: 72px 0 104px; }
.v5-hero .hz-line { padding-bottom: 0; max-width: 520px; font-size: 33px; line-height: 40px; }
.v5-hero .kn-cta { justify-content: flex-start; margin: 0; }
.hz-lead { margin-bottom: 28px; }
@media (max-width: 1100px) {
  .v5-hero .hz-c { display: none; } .hz-cap { display: block; }
  .v5-hero .hz-leg { grid-template-columns: minmax(0, 1fr); row-gap: 32px; padding: 56px 0 72px; }
}
@media (max-width: 700px) {
  .v5-hero .hz-fig { margin-top: 40px; } .hz-cap { margin-top: 16px; }
  .v5-hero .hz-leg { padding: 40px 0 56px; } .v5-hero .hz-line { font-size: 24px; line-height: 30px; }
}

/* ── находка: бенто ───────────────────────────────────────────────── */
.uni-n { display: flex; align-items: baseline; gap: 16px; padding-top: 12px; }
.uni-n .fig { font-size: 96px; }
.uni-k { display: block; max-width: 100%; margin-top: 16px; }
.uni .cap { margin-top: 12px; }
.v5-99 .tf { width: 100%; max-width: 500px; margin: 20px auto 0; }
.v5-99 .rg-c { font-size: 196px; }
.v5-99 .act { margin-top: 24px; max-width: 420px; }
.v5-99 .cap { margin-top: 12px; }
@media (max-width: 700px) { .v5-99 .tf { margin-top: 0; } .uni-n .fig { font-size: 80px; } }

/* ── девять правок ────────────────────────────────────────────────── */
.v5-fixes h2 { max-width: 1000px; margin-top: 12px; }
.vfx { margin-top: 224px; scroll-margin-top: 40px; }
.vfx-v .h { color: var(--accent-primary); }
.vfx .rg-c { font-size: 124px; }
.vfx .rkey { margin-top: 32px; }

/* число слева, графика справа: обе колонки начинаются на общих линиях страницы; текст стоит от верха, графика —
   на нижней линии (выше соседа — заполняет строку, ниже — садится на низ, не висит посередине) */
.vfx-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; align-items: stretch; }
.vfx-l { align-self: start; max-width: 568px; }
.vfx-r { align-self: end; }
.vfx.flip .vfx-l { order: 2; }
.vfx.split p.vfx-v { font-size: clamp(96px, 12.6vw, 184px); margin-top: 32px; white-space: nowrap; }
.vfx.split h3 { margin-top: 36px; }
.vfx-why { margin-top: 28px; } .vfx-why .cap { margin-top: 20px; }
.vfx-r > .rings, .vfx-r > .tf, .vfx-r > .rkey, .vfx-r > .cap, .vfx-r > .cols { width: 100%; max-width: 520px; margin-left: 0; margin-right: 0; }
.vfx-r > .cap { margin-top: 14px; }
.tf.half .rg-c { font-size: 150px; }
.rings.half .rg-c { font-size: 132px; }

/* столбики: целое — стопка из ста засечек */
/* колонка 100 px = ширина рисунка столбика: на столе он идёт 1 : 1 (так его без искажений берёт и выгрузка в Figma) */
.cols { display: grid; grid-template-columns: repeat(4, minmax(0, 100px)); justify-content: space-between; column-gap: 16px; align-items: start; }
.col .fig { display: block; font-size: 56px; margin-top: 24px; white-space: nowrap; }
.col span:last-child { display: block; font-size: 16px; line-height: 20px; color: var(--text-secondary); margin-top: 10px; }
.vfx-r > .cols + .cap { margin-top: 28px; }

/* графика во всю ширину */
.vfx.slide h3 { max-width: 920px; margin-top: 16px; }
.vfx-st { text-align: center; margin-top: 64px; }
.vfx.slide p.vfx-v { font-size: clamp(84px, 22.5vw, 324px); white-space: nowrap; }
.vfx-q { max-width: 880px; margin: 28px auto 0; font-size: 33px; line-height: 40px; text-align: center; }
.vfx-viz { margin-top: 64px; }
.vfx-viz .keys { margin-top: 16px; color: var(--text-secondary); } .vfx-viz .keys b { color: var(--text-primary); }
.vfx-viz .keys span:first-child b { color: var(--accent-primary); }
.vfx-viz .cap { margin-top: 12px; max-width: none; }
.vfx-viz.sun .rings { max-width: 640px; margin: 0 auto; }
.vfx-viz.sun .rg-c { font-size: 190px; }
.vfx-viz.sun .vfx-q { margin-top: 40px; }
.vfx-viz.sun .cap { text-align: center; margin: 16px auto 0; }

/* фрагмент кода парой плиток; подсветка добавленных строк нейтральная: оранжевый на странице значит проблему */
.vcode { margin-top: 64px; }
.vcode .codediff { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; max-width: none; align-items: stretch; }
.vcode .code-b { padding: 28px 32px; }
.vcode .code-b b { background: var(--text-primary); color: var(--bg-page); }

/* что сделать, кто, как проверить — плитками; когда «кто» или «проверка» — пара слов, они идут одной плиткой */
.vfx-b { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; grid-template-areas: "d d w k"; margin-top: 64px; }
.vfx-b.pair { grid-template-areas: "d d wk wk"; }
.vfx-b.y4 { grid-template-areas: "y y d d" "y y w k"; }
.vfx-b.y4.pair { grid-template-areas: "y y d d" "y y wk wk"; }
.vcode + .vfx-b { margin-top: 16px; }
.vfx-b .y { grid-area: y; } .vfx-b .d { grid-area: d; } .vfx-b .w { grid-area: w; } .vfx-b .k { grid-area: k; } .vfx-b .wk { grid-area: wk; }
.vfx-b .meta { margin-bottom: 20px; }
.vfx-b .cap { margin-top: auto; padding-top: 24px; }
.vfx-b .wk { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px 16px; align-content: start; align-items: baseline; margin: 0; }
.vfx-b .wk .meta { margin-bottom: 0; }

@media (max-width: 1100px) {
  .vfx { margin-top: 144px; }
  .vfx-top { grid-template-columns: minmax(0, 1fr); row-gap: 56px; } .vfx.flip .vfx-l { order: 0; }
  .vfx-l { max-width: none; }
  .vfx-st, .vfx-viz, .vfx-b, .vcode { margin-top: 48px; }
  .vfx-b, .vfx-b.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "d d" "w k"; }
  .vfx-b.pair { grid-template-areas: "d d" "wk wk"; }
  .vfx-b.y4 { grid-template-areas: "y y" "d d" "w k"; }
  .vfx-b.y4.pair { grid-template-areas: "y y" "d d" "wk wk"; }
  .vfx-viz.sun .cap { text-align: left; }
}
@media (max-width: 700px) {
  .vfx { margin-top: 112px; }
  .vfx.split p.vfx-v, .vfx.split h3 { margin-top: 24px; }
  .vfx-st, .vfx-viz, .vfx-b, .vcode { margin-top: 36px; }
  .vfx-q { font-size: 24px; line-height: 30px; margin-top: 20px; }
  .vfx-b, .vfx-b.pair, .vfx-b.y4, .vfx-b.y4.pair { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .vfx-b { grid-template-areas: "d" "w" "k"; } .vfx-b.pair { grid-template-areas: "d" "wk"; }
  .vfx-b.y4 { grid-template-areas: "y" "d" "w" "k"; } .vfx-b.y4.pair { grid-template-areas: "y" "d" "wk"; }
  .vfx-b .wk { grid-template-columns: 72px minmax(0, 1fr); }
  .vcode .codediff { grid-template-columns: minmax(0, 1fr); row-gap: 12px; } .vcode + .vfx-b { margin-top: 12px; } .vcode .code-b { padding: 24px; }
  .col .fig { font-size: 40px; } .col span:last-child { font-size: 14px; line-height: 18px; }
  .vfx .rkey { font-size: 16px; line-height: 22px; }
}

/* ── как выглядит хорошо: плитки по площади. Доли колонок и рядов приходят из шаблона: площадь на отчёт одна ── */
.builds { margin-top: 72px; }
.tm { display: grid; gap: 16px; height: 480px; }
.tm > *, .tm-col > * { min-width: 0; min-height: 0; }
.tm-col { display: grid; gap: 16px; }
.tm-t { padding: 28px 32px; }
.tm-t .meta { margin-bottom: auto; }
.tm-n { display: flex; align-items: baseline; gap: 16px; }
.tm-n .fig { font-size: 168px; } .tm-a .tm-n .fig { font-size: 264px; } .tm-c .tm-n .fig { font-size: 72px; }
.tm-k { display: block; max-width: 100%; margin-top: 16px; }
.tm-c .tm-k { margin-top: 10px; }
.tm-d .tm-n .fig { color: var(--text-secondary); }
.v5-good .builds .cap { margin-top: 20px; max-width: none; }
@media (max-width: 1100px) { .tm { height: 400px; gap: 12px; } .tm-col { gap: 12px; } .tm-t { padding: 20px; } .tm-n { flex-wrap: wrap; gap: 4px 12px; }
  .tm-n .fig, .tm-a .tm-n .fig { font-size: 112px; } .tm-c .tm-n .fig { font-size: 56px; } .tm-k { margin-top: 12px; } }
/* телефон: плитки стопкой, площадь уже не в масштабе — эта часть подписи убирается */
@media (max-width: 700px) {
  .builds { margin-top: 48px; }
  .tm, .tm-col { display: flex; flex-direction: column; height: auto; }
  .tm-t .meta { margin-bottom: 20px; }
  .tm-n .fig, .tm-a .tm-n .fig, .tm-c .tm-n .fig { font-size: 80px; }
  .tm-area { display: none; }
}

/* ── проверь себя: номера шагов нейтральные (оранжевый — только проблема) ───────── */
.v5 .three .fig { color: var(--text-primary); }