/* Мини-лендинг серии: раскладка и адаптив поверх series.css (роли шрифтов) и tokens.css (роли цвета).
   Три ширины: стол (от 1101), планшет (701–1100), телефон (до 700). Кегли на столе — роли бренда; на планшете и
   телефоне — та же лестница, сжатая таблицей ниже. */

:root { --m: 56px; --pad: 128px; --air: 96px;
  --fig-hero: 400px; --fig-find: 536px; --fig-step: 296px; --fig-stat: 168px; --fig-s: 96px; }
@media (max-width: 1100px) { :root { --m: 32px; --pad: 96px; --air: 72px;
  --fig-hero: 300px; --fig-find: 380px; --fig-step: 200px; --fig-stat: 128px; --fig-s: 72px; } }
@media (max-width: 700px) { :root { --m: 20px; --pad: 72px; --air: 56px;
  --fig-hero: 190px; --fig-find: 230px; --fig-step: 128px; --fig-stat: 96px; --fig-s: 56px; } }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { width: auto; overflow-x: hidden; }
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--m); }
.sec { padding: var(--pad) 0; scroll-margin-top: 0; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
figure { margin: 0; }
p.fig { margin: 0; }
.uf.narrow { display: none; }
.cap { max-width: 720px; }
figcaption.cap, figure + .cap { margin-top: 16px; }
h2, h3 { text-wrap: balance; }

/* ── кегли по ширине ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .t-title-l { font-size: 72px; line-height: 74px; letter-spacing: -.025em; }
  .t-title-m { font-size: 56px; line-height: 60px; }
  .t-title-s { font-size: 44px; line-height: 48px; }
  .quote { font-size: 36px; line-height: 42px; }
}
@media (max-width: 700px) {
  .t-title-l { font-size: 44px; line-height: 46px; letter-spacing: -.02em; }
  .t-title-m { font-size: 36px; line-height: 40px; letter-spacing: -.02em; }
  .t-title-s { font-size: 28px; line-height: 32px; letter-spacing: -.015em; }
  .t-label { font-size: 15px; line-height: 20px; }
  .kicker { font-size: 20px; line-height: 26px; }
  .quote { font-size: 30px; line-height: 36px; }
  .prose { font-size: 20px; line-height: 28px; }
  .prose.l { font-size: 24px; line-height: 32px; }
  .prose.s { font-size: 18px; line-height: 26px; }
  .act { font-size: 17px; line-height: 24px; }
  .act.l { font-size: 20px; line-height: 28px; }
  .cap { font-size: 15px; line-height: 20px; }
  .two { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .uf.wide { display: none; } .uf.narrow { display: block; } .uf.narrow .lay-base { width: 100%; }
}

/* ── 1 крючок ───────────────────────────────────────────────────────── */
.hero { padding-top: 40px; padding-bottom: 72px; }
.hero .bar { margin-bottom: 40px; }
.hero h1 { margin-top: 12px; max-width: 1240px; }
.proof { display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 1fr); column-gap: 32px; align-items: end; margin-top: 64px; }
.proof-n { font-size: var(--fig-hero); margin-bottom: -.045em; }
.proof .prose { max-width: 720px; margin-bottom: 28px; }
.keys { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; font-size: 18px; line-height: 24px; }
.keys b { font-weight: 500; }
@media (max-width: 1100px) { .proof { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); } }
@media (max-width: 700px) {
  .hero { padding-top: 20px; padding-bottom: 56px; }
  .hero .bar { margin-bottom: 32px; }
  .proof { grid-template-columns: minmax(0, 1fr); row-gap: 24px; margin-top: 40px; }
  .proof-n { margin-bottom: 0; }
  .keys { flex-direction: column; gap: 4px; font-size: 16px; line-height: 22px; }
}

/* ── 2 почему сейчас ─────────────────────────────────────────────── */
.why { padding-top: 0; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: var(--air); }
.facts .fig { font-size: var(--fig-stat); }
@media (max-width: 700px) { .facts { grid-template-columns: minmax(0, 1fr); } }

/* ── 3 что проверили ─────────────────────────────────────────────── */
.checked .mk-list { margin-top: 40px; }
.checked .cap { margin-top: 8px; }
.steps { display: grid; row-gap: 20px; }
.s-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 16px; align-items: end; }
.s-row .fig { font-size: var(--fig-s); }
.s-b { display: block; }
.s-l { display: block; font-size: 18px; line-height: 24px; margin-bottom: 8px; }
.s-b i { display: block; height: 20px; border-radius: 4px; background: var(--text-primary); }
.s-row.h .s-b i { background: var(--accent-primary); }
.s-row.h .fig { color: var(--accent-fine); }
@media (max-width: 1100px) { .checked .two { grid-template-columns: minmax(0, 1fr); row-gap: 56px; } }
@media (max-width: 700px) { .s-row { grid-template-columns: 96px minmax(0, 1fr); } .s-l { font-size: 16px; line-height: 22px; } .s-b i { height: 14px; } }

/* ── 4 находка ──────────────────────────────────────────────────── */
.finding { padding: 72px 0; }
.f-top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
.f-n { font-size: var(--fig-find); }
.f-top > div { padding-bottom: 24px; }
.f-top .prose { margin-top: 24px; }
.finding figure { margin-top: 56px; }
.finding .cap { color: var(--brand-900); max-width: none; }
@media (max-width: 1100px) { .f-top { grid-template-columns: minmax(0, 1fr); row-gap: 32px; } .f-top > div { padding-bottom: 0; } }
@media (max-width: 700px) { .finding { padding: 56px 0; } .finding figure { margin-top: 40px; } }

/* ── 5 рецепт ───────────────────────────────────────────────────── */
.recipe h2 { max-width: 900px; margin-top: 12px; }
.toc { list-style: none; display: grid; row-gap: 8px; margin-top: var(--air); }
.toc a { display: grid; grid-template-columns: 72px minmax(0, 1fr) 240px; column-gap: 16px; align-items: center; background: var(--bg-surface); border-radius: 8px; padding: 14px 32px; }
.toc .fig { font-size: 56px; line-height: .9; }
.toc-t { font-size: 24px; line-height: 32px; font-weight: 500; }
@media (hover: hover) { .toc a:hover { background: var(--bg-surface-2); } }
.toc a:focus-visible, .btn:focus-visible, .form input:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

.fx { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 10fr); column-gap: 16px; margin-top: 160px; scroll-margin-top: 40px; }
.fx-n { font-size: var(--fig-step); margin-top: -.03em; }
.fx-b h3 { margin-top: 12px; max-width: 1000px; }
.fx-ev { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; margin-top: 64px; align-items: start; }
.fx-v { font-size: var(--fig-stat); color: var(--accent-primary); }
.fx-stat .prose { margin-top: 20px; max-width: 480px; }
.viz { margin-top: 28px; }
.viz-t, .viz-k { font-size: 16px; line-height: 20px; color: var(--text-secondary); }
.viz-t { margin-bottom: 14px; } .viz-k { margin-top: 12px; }
.fx-why .cap { margin-top: 20px; }
.fx-how { display: grid; grid-template-columns: 5fr 2fr 3fr; column-gap: 32px; margin-top: 56px; }
.fx-how dt { font-size: 16px; line-height: 20px; color: var(--text-secondary); margin-bottom: 10px; }
.uf.ok .u.h { fill: var(--text-primary); }
@media (max-width: 1100px) {
  .toc a { grid-template-columns: 56px minmax(0, 1fr); row-gap: 2px; padding: 14px 24px; } .toc .t-label { grid-column: 2; }
  .fx { grid-template-columns: minmax(0, 1fr); margin-top: 128px; }
  .fx-n { margin-bottom: 16px; }
  .fx-ev { column-gap: 32px; }
}
@media (max-width: 700px) {
  .toc a { grid-template-columns: 40px minmax(0, 1fr); padding: 12px 16px; column-gap: 12px; }
  .toc .fig { font-size: 40px; } .toc-t { font-size: 18px; line-height: 24px; }
  .fx { margin-top: 96px; }
  .fx-ev { grid-template-columns: minmax(0, 1fr); row-gap: 32px; margin-top: 40px; }
  .fx-how { grid-template-columns: minmax(0, 1fr); row-gap: 24px; margin-top: 40px; }
  .fx-how dt { margin-bottom: 6px; }
}

/* доли-полосы */
.bars { display: grid; row-gap: 14px; max-width: 560px; }
.b-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 6px; align-items: baseline; }
.b-l { font-size: 18px; line-height: 24px; }
.b-v { font-size: 18px; line-height: 24px; font-weight: 500; text-align: right; }
.b-t { grid-column: 1 / -1; grid-row: 2; display: block; height: 14px; border-radius: 4px; background: var(--bg-surface-2); overflow: hidden; }
.b-t i { display: block; height: 100%; min-width: 4px; border-radius: 4px; background: var(--text-primary); }
.b-row.h .b-t i { background: var(--accent-primary); }
.b-row.h .b-v { color: var(--accent-primary); }

/* фрагмент кода */
.codediff { display: grid; row-gap: 8px; max-width: 560px; }
.code-b { border-radius: 8px; padding: 20px 24px 22px; }
.code-b.before { background: var(--bg-surface); color: var(--text-secondary); }
.code-b.after { background: var(--bg-surface-2); color: var(--text-primary); }
.code-t { font-size: 16px; line-height: 20px; color: var(--text-secondary); margin-bottom: 10px; }
.code-b pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.code-b b { font-weight: 400; background: var(--accent-primary); color: var(--key-on-brand); padding: 2px 6px; }

/* ── 6 как выглядит хорошо ──────────────────────────────────────────── */
.good h2 { margin-top: 12px; max-width: 1000px; }
.good-lead { margin-top: 40px; max-width: 960px; }
.good figure { margin-top: var(--air); }
.groups { display: flex; gap: 40px; align-items: flex-end; flex-wrap: wrap; }
.g { min-width: 0; }
.g .fig { font-size: var(--fig-stat); color: var(--accent-fine); }
.g .uf { margin-top: 20px; }
.g-l { font-size: 18px; line-height: 24px; margin-top: 16px; }
.g-n { font-size: 18px; line-height: 24px; color: var(--text-secondary); }
.g.off .fig, .g.rest .fig { color: var(--text-secondary); }
.g.off .u { fill: var(--base-400); } .g.rest .u { fill: var(--base-200); }
.brief-t { margin-top: var(--air); max-width: 720px; font-weight: 500; }
.brief { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; margin-top: 48px; }
.brief li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; align-items: start; }
.brief .fig { font-size: 72px; line-height: .86; }
.brief h3 { font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -.005em; }
.brief .act { margin-top: 8px; color: var(--text-secondary); }
@media (max-width: 700px) {
  .groups { gap: 32px 24px; } .g { flex: 1 1 100% !important; }
  .brief { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 32px; }
  .brief li { grid-template-columns: 40px minmax(0, 1fr); } .brief .fig { font-size: 56px; } .brief h3 { font-size: 20px; line-height: 28px; }
}

/* ── 7 проверь себя ──────────────────────────────────────────────── */
.selfcheck { background: var(--bg-surface); }
.selfcheck h2 { margin-top: 12px; max-width: 900px; }
.three { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: var(--air); }
.three .fig { font-size: var(--fig-stat); color: var(--accent-primary); display: block; }
.three .act { margin-top: 24px; max-width: 360px; }
@media (max-width: 700px) { .three { grid-template-columns: minmax(0, 1fr); gap: 32px; } .three li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; align-items: start; } .three .act { margin-top: 0; } }

/* ── 8 форма ────────────────────────────────────────────────────── */
.formsec h2 { margin-top: 12px; }
.formsec .act.l { margin-top: 32px; max-width: 560px; }
.formsec .act.sec2 { margin-top: 20px; max-width: 560px; }
.form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.form p { margin: 0; }
.form label { display: block; font-size: 16px; line-height: 20px; color: var(--text-secondary); margin-bottom: 8px; }
.form input { display: block; width: 100%; height: 56px; border: 0; border-radius: 4px; padding: 0 16px; background: var(--bg-surface); color: var(--text-primary); font: 400 18px/24px var(--font-base); }
.form .btn { width: 100%; justify-content: center; border: 0; cursor: pointer; font-family: var(--font-base); margin-top: 8px; }
@media (max-width: 1100px) { .formsec .two { grid-template-columns: minmax(0, 1fr); row-gap: 48px; } }
@media (max-width: 700px) { .form { grid-template-columns: minmax(0, 1fr); } .form .wide { grid-column: auto; } }

/* ── 9 методика ─────────────────────────────────────────────────── */
.method .two { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.method h2 { margin-top: 12px; }
.m-list { list-style: none; display: grid; row-gap: 32px; }
.m-list h3 { font-size: 24px; line-height: 32px; font-weight: 500; margin-bottom: 6px; }
.m-list .prose { color: var(--text-secondary); max-width: 720px; }
.method .cap { margin-top: 32px; }
@media (max-width: 1100px) { .method .two { grid-template-columns: minmax(0, 1fr); row-gap: 48px; } }

/* ── 10 Méridien ───────────────────────────────────────────────────── */
.end { position: relative; padding: 0; min-height: 800px; display: flex; align-items: flex-end; overflow: hidden; }
/* Финал — «пламя в единицах» (выбор Элис 11.11.2026): пламя бренда видно сквозь сетку тех же квадратов, из которых
   собраны поля страницы. Полоса фиксированной высоты стоит над текстом, её верх и низ растворяются маской: на любой
   ширине окна нет жёсткого среза и квадраты не заходят под заголовок. Фон статичен. */
.fxwrap { position: absolute; inset: 0 0 auto 0; height: 460px; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 24%, black 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 24%, black 60%, transparent 100%); }
.end .fxbg { position: absolute; inset: 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21'%3E%3Crect width='16' height='16' rx='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21'%3E%3Crect width='16' height='16' rx='2'/%3E%3C/svg%3E");
  -webkit-mask-size: 21px 21px; mask-size: 21px 21px; }
.end .fxbg > div { position: absolute; inset: 0; }   /* слои пламени: оранжевое тело и тонкое белое ядро по той же оси */
/* зерно поверх пламени: формула Gradients требует зерна, у SVG-пламени его нет. Статичная плитка шума, без движения. */
.grain { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: var(--grain, .85);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.6' intercept='-0.8'/%3E%3CfeFuncG type='linear' slope='2.6' intercept='-0.8'/%3E%3CfeFuncB type='linear' slope='2.6' intercept='-0.8'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px; }
.btn { white-space: nowrap; }
.end .wrap { position: relative; width: 100%; padding-bottom: 40px; padding-top: 320px; }
.end-in { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.end h2 { max-width: 760px; }
.end .prose { max-width: 560px; margin-top: 20px; color: var(--text-secondary); }
.legal { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; margin-top: 72px; font-size: 16px; line-height: 20px; color: var(--text-secondary); }
.legal .name { font-size: 28px; line-height: 28px; color: var(--text-primary); }
@media (max-width: 1100px) { .end-in { flex-direction: column; align-items: flex-start; } }
@media (max-width: 700px) { .end { min-height: 680px; } .fxwrap { height: 320px; } .end .wrap { padding-top: 300px; } .end-in > div:last-child { width: 100%; } .end .btn { width: 100%; height: auto; min-height: 56px; padding: 14px 20px; justify-content: center; text-align: center; white-space: normal; } .legal { gap: 8px 16px; margin-top: 48px; } }