/*
 * Главная продающего сайта (шорткод [metodshkola_landing], ADR-0162).
 *
 * ПАЛИТРА. Страница стоит на токенах темы (--ms-*): зелёный темы — цвет действия и ИИ,
 * поверхности и текст — её же. Свой цвет — --lp-stamp, синий канцелярский: им помечено то,
 * что принадлежит документу (число фонда, месяц, код КЭС). Красный, янтарный и зелёный
 * данных (--lp-low/mid/ok/high) живут только внутри рисунков — это шкала результата, а не
 * украшение.
 *
 * ШРИФТЫ. Заголовки — PT Serif: лицо русской официальной и учебной печати. Интерфейс — Inter
 * темы. Цифры данных — PT Mono: цифра в документе всегда моноширинная.
 *
 * ШИРИНА. Страница стоит в колонке темы, у гостя — рядом с боковым меню, поэтому переломы
 * считаются от ширины колонки (контейнерные запросы к .lp), а не окна.
 *
 * ДВИЖЕНИЕ. Одна сцена на первом экране: растут столбики справки, затем «от руки» рисуется
 * обводка, затем появляются пометки ИИ. Больше на странице ничего не двигается само.
 *
 * ТЁМНАЯ ТЕМА. Тема переключается классом на body; здесь переопределяются только
 * собственные значения — остальное приходит из её токенов.
 */

/*
 * Заголовок страницы, который печатает тема, здесь лишний: первый экран начинается с
 * собственного h1. Прячем ровно тот, за которым идёт эта страница.
 */
.ms-post-title:has(+ .ms-post-content .lp) {
	display: none;
}

/*
 * БЕЛАЯ ПОДЛОЖКА. Тема заливает страницу серо-зелёным (--ms-bg) — дашборду так положено.
 * Витрине наоборот: белое поле и есть бумага, а разделы различаются тоном панелей.
 */
body.home .ms-app-main,
body.home .ms-container-boxed,
.lp {
	background: var(--ms-surface, #fff);
}

.lp {
	--lp-stamp: #1f4b8f;
	--lp-stamp-soft: rgba(31, 75, 143, .08);
	--lp-serif: 'PT Serif', Georgia, 'Times New Roman', serif;
	--lp-mono: 'PT Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
	--lp-measure: 1200px;
	--lp-gut: 24px;
	--lp-tile: #f6f8f7;
	--lp-paper: var(--ms-surface, #fff);
	--lp-line: var(--ms-border, #e3e9e6);
	--lp-line-soft: var(--ms-border-soft, #eef2ef);

	--lp-low: #dc2626;
	--lp-low-soft: #fde8e8;
	--lp-low-ink: #b91c1c;
	--lp-mid: #d97706;
	--lp-mid-soft: #fdf1dc;
	--lp-mid-ink: #b45309;
	--lp-ok: #16a34a;
	--lp-ok-soft: #e3f5e9;
	--lp-ok-ink: #15803d;
	--lp-high: #166534;
	--lp-high-soft: #c7ecd4;

	container-type: inline-size;
	max-width: var(--lp-measure);
	margin: 0 auto;
	padding: 0 var(--lp-gut) 72px;
	color: var(--ms-text-main);
	font-size: 16px;
	line-height: 1.55;
}

body.ms-dark-mode .lp {
	--lp-tile: var(--ms-surface-2, #1c2723);
	--lp-paper: var(--ms-surface, #161f1b);
	--lp-stamp: #8fb3e8;
	--lp-stamp-soft: rgba(143, 179, 232, .12);
	--lp-low: #f87171;
	--lp-low-soft: rgba(248, 113, 113, .16);
	--lp-low-ink: #fca5a5;
	--lp-mid: #fbbf24;
	--lp-mid-soft: rgba(251, 191, 36, .15);
	--lp-mid-ink: #fcd34d;
	--lp-ok: #4ade80;
	--lp-ok-soft: rgba(74, 222, 128, .14);
	--lp-ok-ink: #86efac;
	--lp-high: #22c55e;
	--lp-high-soft: rgba(34, 197, 94, .28);
}

.lp *,
.lp *::before,
.lp *::after {
	box-sizing: border-box;
}

.lp-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------------------------------------ Типографика */

.lp-h1 {
	margin: 0 0 20px;
	font-family: var(--lp-serif);
	font-weight: 700;
	font-size: clamp(30px, 3.6cqi, 44px);
	line-height: 1.08;
	letter-spacing: -.015em;
}

.lp-h2 {
	margin: 0 0 10px;
	font-family: var(--lp-serif);
	font-weight: 700;
	font-size: clamp(25px, 3cqi, 34px);
	line-height: 1.15;
	letter-spacing: -.01em;
	text-wrap: balance;
}

.lp-h3 {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}

.lp-lead {
	margin: 0 0 28px;
	font-size: 18.5px;
	line-height: 1.55;
	color: var(--ms-text-muted);
	max-width: 34em;
}

.lp-sub {
	margin: 0;
	color: var(--ms-text-muted);
	max-width: 38em;
}

.lp-cap {
	margin: 0 0 18px;
	font-size: 14px;
	color: var(--ms-text-muted);
	max-width: 36em;
}

.lp-note,
.lp-cap,
.lp-sub {
	text-wrap: pretty;
}

.lp-num {
	color: var(--lp-stamp);
}

/* ------------------------------------------------------------------ Кнопки */

.lp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

.lp-btn {
	display: inline-flex;
	align-items: center;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: var(--ms-radius-ctl, 10px);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.lp-btn--go {
	background: var(--ms-primary-2, #059669);
	color: #fff;
}

.lp-btn--go:hover,
.lp-btn--go:focus-visible {
	background: var(--ms-primary, #10b981);
	box-shadow: var(--ms-primary-glow, 0 4px 12px rgba(16, 185, 129, .28));
	transform: translateY(-1px);
}

.lp-btn--quiet {
	border-color: var(--lp-line);
	background: var(--lp-paper);
	color: var(--ms-text-main);
}

.lp-btn--quiet:hover,
.lp-btn--quiet:focus-visible {
	border-color: var(--ms-text-faint);
}

.lp a:focus-visible {
	outline: 2px solid var(--ms-primary-2, #059669);
	outline-offset: 3px;
	border-radius: 6px;
}

.lp-more {
	flex: none;
	font-size: 15px;
	color: var(--ms-primary-2);
	text-decoration: none;
	font-weight: 600;
}

.lp-more:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------ Разделы */

.lp-sec {
	margin-top: 32px;
	padding: 56px 0 8px;
	border-top: 1px solid var(--lp-line);
}

/* Тоном выделены разделы, где главное — рисунки: на тоне белые карточки читаются как листы. */
.lp-sec--tile {
	padding: 52px 44px 48px;
	border: 0;
	border-radius: 22px;
	background: var(--lp-tile);
}

.lp-sec--tile + .lp-sec {
	border-top: 0;
}

.lp-sec__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 20px 56px;
	align-items: end;
	margin-bottom: 40px;
}

.lp-sec__head .lp-h2 {
	margin: 0;
}

/* Рисунок — белый лист на тоне раздела. */
.lp-fig {
	margin: 0;
	padding: 24px 26px;
	border: 1px solid var(--lp-line);
	border-radius: 16px;
	background: var(--lp-paper);
	min-width: 0;
}

.lp-fake-btn {
	display: inline-block;
	padding: 6px 11px;
	border: 1px solid var(--lp-line);
	border-radius: 8px;
	font-size: 13px;
	color: var(--ms-text-muted);
	background: var(--lp-paper);
	white-space: nowrap;
}

.lp-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-top: 14px;
	font-size: 12.5px;
	color: var(--ms-text-muted);
}

.lp-sw {
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: 6px;
	border-radius: 2px;
	vertical-align: -1px;
}

.lp-sw--low  { background: var(--lp-low); }
.lp-sw--mid  { background: var(--lp-mid); }
.lp-sw--ok   { background: var(--lp-ok); }
.lp-sw--high { background: var(--lp-high); }

/* ------------------------------------------------------------------ Первый экран */

.lp-hero {
	padding: 56px 0 0;
}

.lp-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}

.lp-hero .lp-fig--sheet {
	padding: 0;
	border: 0;
	background: none;
}

.lp-sheet-wrap {
	position: relative;
	padding-right: 150px;
}

.lp-sheet {
	position: relative;
	padding: 26px 28px 22px;
	border-radius: 4px;
	background: var(--lp-paper);
	box-shadow: 0 1px 0 var(--lp-line), 0 2px 4px rgba(15, 23, 42, .04), 0 30px 60px -12px rgba(15, 23, 42, .18);
	transform: rotate(-.6deg);
}

.lp-sheet__org {
	margin: 0;
	font-size: 11.5px;
	color: var(--ms-text-faint);
	text-align: center;
}

.lp-sheet__t {
	margin: 4px 0 2px;
	font-family: var(--lp-serif);
	font-weight: 700;
	font-size: 17px;
	text-align: center;
}

.lp-sheet__meta {
	margin: 0 0 22px;
	font-size: 12.5px;
	color: var(--ms-text-muted);
	text-align: center;
}

.lp-chart {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 8px;
	height: 190px;
	margin-bottom: 22px;
}

.lp-chart__y {
	position: relative;
	font-family: var(--lp-mono);
	font-size: 10px;
	color: var(--ms-text-faint);
}

.lp-chart__y span {
	position: absolute;
	right: 0;
	bottom: var(--v);
	transform: translateY(50%);
}

.lp-chart__y .lp-chart__ref {
	right: -2px;
	padding: 0 2px;
	background: var(--lp-paper);
	font-family: var(--ms-font-family, inherit);
	font-weight: 600;
	font-size: 10.5px;
	color: var(--lp-stamp);
}

.lp-plot {
	position: relative;
	display: grid;
	grid-template-columns: repeat(10, minmax(0, 1fr));
	gap: 7px;
	align-items: end;
	padding: 0 6px;
	border-left: 1px solid var(--lp-line);
	border-bottom: 1px solid var(--lp-line);
}

.lp-plot__ref {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--v);
	z-index: 2;
	border-top: 1.5px dashed var(--lp-stamp);
}

.lp-bar {
	position: relative;
	height: var(--v);
	border-radius: 3px 3px 0 0;
	transform-origin: bottom;
	animation: lp-grow .9s cubic-bezier(.2, .8, .2, 1) both;
	animation-delay: calc(var(--i) * 55ms + .15s);
}

.lp-bar--low { background: var(--lp-low); }
.lp-bar--mid { background: var(--lp-mid); }
.lp-bar--ok  { background: var(--lp-ok); }

.lp-bar span,
.lp-bar em {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--lp-mono);
	font-size: 10px;
	font-style: normal;
	white-space: nowrap;
}

.lp-bar span {
	top: -17px;
	color: var(--ms-text-muted);
}

.lp-bar em {
	bottom: -19px;
	color: var(--ms-text-faint);
}

/* Обводка «от руки» — часть столбика, поэтому не нуждается в расчёте координат. */
/* Столбик с анимацией transform — свой контекст наложения: без z-index соседние столбики
   ложились бы поверх его обводки. */
.lp-bar:has(.lp-ring) {
	z-index: 4;
}

.lp-ring {
	position: absolute;
	left: -18px;
	top: -40px;
	/* У svg «auto» — собственный размер, а не растяжение между left/right: размеры явно. */
	width: calc(100% + 36px);
	height: calc(100% + 74px);
	z-index: 3;
	overflow: visible;
	pointer-events: none;
	clip-path: inset(0 100% 0 0);
	animation: lp-draw .7s ease-out forwards;
	animation-delay: 1.35s;
}

/* ПОЧЕМУ не stroke-dasharray: с vector-effect: non-scaling-stroke Chrome считает длину
   штриха в другой системе координат, и обводка обрывалась на полпути. */
.lp-ring path {
	fill: none;
	stroke: var(--ms-primary-2, #059669);
	stroke-width: 2.2;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.lp-rule {
	display: block;
	height: 6px;
	margin-top: 12px;
	border-radius: 3px;
	background: var(--lp-line-soft);
}

.lp-notes {
	position: absolute;
	top: 56px;
	right: 0;
	z-index: 4;
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 178px;
}

.lp-note {
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--lp-line);
	border-left: 3px solid var(--ms-primary, #10b981);
	border-radius: 8px;
	background: var(--lp-paper);
	box-shadow: 0 10px 24px -8px rgba(15, 23, 42, .18);
	font-size: 12.5px;
	line-height: 1.42;
	opacity: 0;
	animation: lp-pop .45s ease-out forwards;
}

.lp-note:nth-child(1) { animation-delay: 1.8s; }
.lp-note:nth-child(2) { animation-delay: 2.1s; }
.lp-note:nth-child(3) { animation-delay: 2.4s; }

.lp-note__who {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 3px;
	font-size: 11px;
	font-weight: 600;
	color: var(--ms-primary-2, #059669);
}

.lp-note__who i,
.lp-chat__bar i {
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	border-radius: 5px;
	background: var(--ms-primary-soft, rgba(16, 185, 129, .11));
	font-size: 9px;
	font-style: normal;
}

.lp-link {
	font-weight: 600;
	color: var(--lp-stamp);
}

.lp-ask {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 22px 0 0 18px;
	padding: 7px 7px 7px 16px;
	border: 1.5px solid var(--ms-primary, #10b981);
	border-radius: 14px;
	background: var(--lp-paper);
	box-shadow: 0 0 0 5px var(--ms-primary-soft, rgba(16, 185, 129, .11));
	font-size: 14.5px;
}

.lp-ask span:first-child {
	flex: 1;
}

.lp-ask__go {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--ms-primary-2, #059669);
	color: #fff;
}

@keyframes lp-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes lp-draw { to { clip-path: inset(0 0 0 0); } }
@keyframes lp-pop  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Пять направлений — полосой во всю ширину под первым экраном. */
.lp-dirs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0 24px;
	margin: 56px 0 0;
	padding: 10px 0 0;
	border-top: 1px solid var(--lp-line);
	list-style: none;
}

.lp-dir a {
	display: block;
	margin: 6px 0;
	padding: 9px 0 9px 14px;
	border-left: 3px solid var(--lp-dir, var(--ms-primary-2));
	color: inherit;
	text-decoration: none;
}

.lp-dir[data-tone='mid']   { --lp-dir: var(--lp-mid); }
.lp-dir[data-tone='stamp'] { --lp-dir: var(--lp-stamp); }

.lp-dir b {
	display: block;
	font-size: 15px;
	font-weight: 600;
}

.lp-dir a:hover b {
	color: var(--ms-primary-2);
}

.lp-dir span {
	font-size: 13.5px;
	color: var(--ms-text-muted);
}

/* ------------------------------------------------------------------ Диагностики */

.lp-diag {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.lp-flow {
	margin: 0 0 0 6px;
	padding: 0;
	border-left: 2px solid var(--ms-text-main);
	list-style: none;
}

.lp-flow li {
	position: relative;
	padding: 4px 0 26px 30px;
}

.lp-flow li:last-child {
	padding-bottom: 4px;
}

.lp-flow__n {
	position: absolute;
	top: 2px;
	left: -14px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border: 2px solid var(--ms-text-main);
	border-radius: 50%;
	background: var(--lp-paper);
	font-family: var(--lp-serif);
	font-weight: 700;
	font-size: 14px;
}

.lp-flow b {
	display: block;
	margin-bottom: 4px;
	font-family: var(--lp-serif);
	font-size: 21px;
	line-height: 1.2;
}

.lp-flow p {
	margin: 0;
	color: var(--ms-text-muted);
	font-size: 15px;
	max-width: 32em;
}

.lp-fig--bank {
	background: var(--lp-tile);
}

.lp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
}

.lp-chips span {
	padding: 5px 11px;
	border: 1px solid var(--lp-line);
	border-radius: 999px;
	background: var(--lp-paper);
	font-size: 13px;
	color: var(--ms-text-muted);
}

.lp-chips .is-on {
	border-color: var(--ms-text-main);
	color: var(--ms-text-main);
	font-weight: 600;
}

.lp-task {
	margin-top: 10px;
	padding: 13px 15px;
	border: 1px solid var(--lp-line);
	border-radius: 12px;
	background: var(--lp-paper);
}

.lp-task__top {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}

.lp-task__code {
	font-family: var(--lp-mono);
	font-size: 12px;
	color: var(--lp-stamp);
}

.lp-task__lvl {
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--lp-line-soft);
	font-size: 11.5px;
	color: var(--ms-text-muted);
}

.lp-task__lvl.is-hi {
	background: var(--lp-mid-soft);
	color: var(--lp-mid-ink);
}

.lp-task__text {
	margin: 0;
	font-family: var(--lp-serif);
	font-size: 15.5px;
	line-height: 1.45;
}

.lp-task__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 8px;
	font-size: 12.5px;
	color: var(--ms-text-faint);
}

.lp-task__foot .lp-fake-btn {
	padding: 0;
	border: 0;
	background: none;
	font-weight: 600;
	color: var(--ms-primary-2, #059669);
}

/* ------------------------------------------------------------------ Анализ */

.lp-an {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 24px;
}

.lp-fig--gia {
	position: relative;
	grid-column: 1 / -1;
	/* Строке таблицы нужно ~640 px; на узкой колонке темы она прокручивается внутри карточки. */
	overflow-x: auto;
}

.lp-gia {
	min-width: 620px;
}

.lp-seg {
	position: absolute;
	top: 22px;
	right: 24px;
	display: flex;
	padding: 3px;
	border: 1px solid var(--lp-line);
	border-radius: 10px;
	background: var(--lp-paper);
	font-size: 13px;
}

.lp-seg span {
	padding: 6px 14px;
	border-radius: 7px;
	color: var(--ms-text-muted);
}

.lp-seg .is-on {
	background: var(--ms-text-main);
	color: var(--lp-paper);
}

.lp-fig--gia figcaption {
	padding-right: 130px;
}

.lp-gia__row {
	display: grid;
	grid-template-columns: minmax(150px, 1.3fr) 70px minmax(160px, 2.4fr) 70px 120px;
	gap: 18px;
	align-items: center;
	padding: 11px 0;
	border-bottom: 1px solid var(--lp-line-soft);
	font-size: 14px;
}

.lp-gia__row b {
	font-weight: 500;
}

.lp-gia__head {
	padding: 0 0 8px;
	border-bottom-color: var(--lp-line);
	font-size: 12px;
	color: var(--ms-text-faint);
}

.lp-gia__head span:nth-child(2),
.lp-gia__head span:nth-child(4),
.lp-gia__head span:nth-child(5),
.lp-num-cell {
	text-align: right;
}

.lp-num-cell {
	font-family: var(--lp-mono);
}

.lp-num-cell em {
	margin-left: 6px;
	font-family: var(--ms-font-family, inherit);
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
}

.lp-num-cell .is-up   { color: var(--lp-ok-ink); }
.lp-num-cell .is-down { color: var(--lp-low-ink); }

.lp-dist {
	display: flex;
	gap: 2px;
	height: 12px;
	overflow: hidden;
	border-radius: 6px;
}

.lp-dist--low  { background: var(--lp-low); }
.lp-dist--mid  { background: var(--lp-mid); }
.lp-dist--ok   { background: var(--lp-ok); }
.lp-dist--high { background: var(--lp-high); }

.lp-heat {
	display: grid;
	grid-template-columns: 44px repeat(10, minmax(0, 1fr));
	gap: 3px;
	font-family: var(--lp-mono);
	font-size: 10.5px;
}

.lp-heat span {
	display: grid;
	place-items: center;
	height: 30px;
	border-radius: 4px;
}

.lp-heat .lp-heat__h {
	height: 20px;
	color: var(--ms-text-faint);
}

.lp-heat__r {
	justify-content: start;
	font-family: var(--ms-font-family, inherit);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ms-text-muted);
}

.lp-heat__c--l { background: var(--lp-low-soft);  color: var(--lp-low-ink); }
.lp-heat__c--m { background: var(--lp-mid-soft);  color: var(--lp-mid-ink); }
.lp-heat__c--o { background: var(--lp-ok-soft);   color: var(--lp-ok-ink); }
.lp-heat__c--h { background: var(--lp-high-soft); color: var(--lp-high); }

.lp-exports {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
}

.lp-def {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-def li {
	--c: var(--lp-ok);
	display: grid;
	grid-template-columns: minmax(0, 1fr) 92px 46px;
	gap: 12px;
	align-items: center;
	padding: 9px 0;
	border-top: 1px solid var(--lp-line-soft);
	font-size: 13.5px;
}

.lp-def li:first-child { border-top: 0; }
.lp-def--low { --c: var(--lp-low); }
.lp-def--mid { --c: var(--lp-mid); }

.lp-def b {
	font-family: var(--lp-mono);
	font-weight: 400;
	text-align: right;
	color: var(--c);
}

.lp-meter {
	height: 6px;
	overflow: hidden;
	border-radius: 3px;
	background: var(--lp-line-soft);
}

.lp-meter i {
	display: block;
	height: 100%;
	border-radius: 3px;
	background: var(--c);
}

.lp-tag {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--lp-low-soft);
	font-size: 11px;
	font-weight: 600;
	color: var(--lp-low-ink);
}

.lp-also {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 36px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--lp-line);
	list-style: none;
}

.lp-also b {
	display: block;
	margin-bottom: 3px;
	font-size: 15px;
}

.lp-also span {
	font-size: 14px;
	color: var(--ms-text-muted);
}

/* ------------------------------------------------------------------ Дорожная карта */

.lp-paths {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.lp-fig--road {
	position: relative;
}

.lp-fig--road figcaption {
	padding-right: 120px;
}

.lp-badge {
	position: absolute;
	top: 24px;
	right: 26px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--lp-mid-soft);
	font-size: 13px;
	color: var(--ms-text-muted);
	white-space: nowrap;
}

.lp-badge b {
	color: var(--lp-mid-ink);
}

.lp-rm,
.lp-kids {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp-rm li {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 14px;
	padding: 13px 0;
	border-top: 1px solid var(--lp-line-soft);
}

.lp-rm li:first-child,
.lp-kids li:first-child {
	border-top: 0;
}

.lp-rm__pct {
	padding-top: 1px;
	font-family: var(--lp-mono);
	font-size: 15px;
}

.lp-rm__pct--low { color: var(--lp-low); }
.lp-rm__pct--mid { color: var(--lp-mid); }

.lp-rm b,
.lp-kids b {
	display: block;
	font-size: 14.5px;
	font-weight: 600;
}

.lp-rm div span,
.lp-kids div span {
	display: block;
	font-size: 13.5px;
	color: var(--ms-text-muted);
}

.lp-kids li {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	padding: 10px 0;
	border-top: 1px solid var(--lp-line-soft);
}

.lp-kids__av {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--lp-line-soft);
	font-family: var(--lp-mono);
	font-size: 12px;
	color: var(--ms-text-muted);
}

.lp-kids__st {
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11.5px;
	font-style: normal;
	font-weight: 600;
	white-space: nowrap;
}

.lp-kids__st--low { background: var(--lp-low-soft); color: var(--lp-low-ink); }
.lp-kids__st--mid { background: var(--lp-mid-soft); color: var(--lp-mid-ink); }

/* ------------------------------------------------------------------ ИИ-помощник */

.lp-ai {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: 56px;
	align-items: start;
}

.lp-fig--chat {
	padding: 0;
	overflow: hidden;
	border-radius: 18px;
	box-shadow: 0 30px 60px -20px rgba(15, 23, 42, .18);
}

.lp-chat__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 18px;
	border-bottom: 1px solid var(--lp-line);
	font-size: 13.5px;
	font-weight: 600;
}

.lp-chat__bar i {
	width: 24px;
	height: 24px;
	border-radius: 7px;
	font-size: 11px;
	color: var(--ms-primary-2, #059669);
}

.lp-chat__bar small {
	margin-left: auto;
	font-weight: 400;
	color: var(--ms-text-faint);
}

.lp-chat__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 22px 22px 18px;
}

.lp-chat__q {
	align-self: flex-end;
	max-width: 80%;
	margin: 0;
	padding: 11px 15px;
	border-radius: 16px 16px 4px 16px;
	background: var(--ms-primary-2, #059669);
	color: #fff;
	font-size: 14.5px;
}

.lp-chat__steps {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--ms-text-muted);
}

.lp-chat__steps li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.lp-chat__steps li::before {
	content: '';
	flex: none;
	width: 14px;
	height: 14px;
	border: 1.5px solid var(--lp-ok);
	border-radius: 50%;
	background: radial-gradient(circle, var(--lp-ok) 0 2.5px, transparent 3px);
}

.lp-chat__a {
	padding: 16px 18px;
	border: 1px solid var(--lp-line);
	border-radius: 14px;
}

.lp-chat__a p {
	margin: 0 0 12px;
	font-size: 14.5px;
}

.lp-mini {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 14px;
}

.lp-mini div {
	padding: 9px 11px;
	border: 1px solid var(--lp-line);
	border-top: 3px solid var(--c);
	border-radius: 10px;
}

.lp-mini--low { --c: var(--lp-low); }
.lp-mini--mid { --c: var(--lp-mid); }
.lp-mini--ok  { --c: var(--lp-ok); }

.lp-mini small {
	display: block;
	font-size: 11.5px;
	color: var(--ms-text-muted);
}

.lp-mini b {
	font-family: var(--lp-mono);
	font-weight: 400;
	font-size: 18px;
}

.lp-chat__t {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.lp-chat__t th {
	padding: 6px 8px;
	border-bottom: 1px solid var(--lp-line);
	font-size: 12px;
	font-weight: 600;
	color: var(--ms-text-muted);
	text-align: right;
}

.lp-chat__t td {
	padding: 7px 8px;
	border-bottom: 1px solid var(--lp-line-soft);
	font-family: var(--lp-mono);
	text-align: right;
}

.lp-chat__t th:first-child,
.lp-chat__t td:first-child {
	font-family: var(--ms-font-family, inherit);
	text-align: left;
}

.lp-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 7px;
	border-radius: 50%;
}

.lp-dot--low  { background: var(--lp-low); }
.lp-dot--mid  { background: var(--lp-mid); }
.lp-dot--ok   { background: var(--lp-ok); }
.lp-dot--high { background: var(--lp-high); }

.lp-file {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 1px dashed var(--lp-line);
	border-radius: 12px;
	background: var(--lp-tile);
	font-size: 13.5px;
}

.lp-file div {
	flex: 1;
}

.lp-file small {
	display: block;
	font-size: 12px;
	color: var(--ms-text-faint);
}

.lp-file__ic {
	position: relative;
	flex: none;
	width: 34px;
	height: 42px;
	border: 1px solid var(--lp-line);
	border-left: 4px solid var(--lp-stamp);
	border-radius: 4px;
	background: var(--lp-paper);
}

.lp-file .lp-fake-btn {
	padding: 0;
	border: 0;
	background: none;
	font-weight: 600;
	color: var(--ms-primary-2, #059669);
}

.lp-points {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 26px 0 30px;
	padding: 0;
	list-style: none;
}

.lp-points b {
	display: block;
	margin-bottom: 2px;
	font-size: 16px;
}

.lp-points span {
	font-size: 15px;
	color: var(--ms-text-muted);
}

.lp-guard {
	margin: 0;
	padding: 16px 18px;
	border-left: 3px solid var(--lp-stamp);
	border-radius: 0 12px 12px 0;
	background: var(--lp-stamp-soft);
	font-size: 14.5px;
}

.lp-chain {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 64px 0 0;
	padding: 0;
	border-top: 2px solid var(--ms-text-main);
	list-style: none;
}

.lp-chain li {
	padding: 20px 28px 0 0;
}

.lp-chain__n {
	font-family: var(--lp-serif);
	font-size: 15px;
	color: var(--ms-text-faint);
}

.lp-chain b {
	display: block;
	margin: 4px 0 6px;
	font-family: var(--lp-serif);
	font-size: 22px;
}

.lp-chain p {
	margin: 0;
	font-size: 15px;
	color: var(--ms-text-muted);
}

/* ------------------------------------------------------------------ Фонд */

.lp-fund__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 20px 40px;
	align-items: end;
	margin-bottom: 36px;
}

.lp-fund__head .lp-sub {
	margin-top: 12px;
}

.lp-year {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--lp-line);
	border-radius: 14px;
	list-style: none;
}

.lp-year__m a {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 150px;
	height: 100%;
	padding: 14px 10px 12px;
	border-right: 1px solid var(--lp-line-soft);
	color: inherit;
	text-decoration: none;
}

.lp-year__m:last-child a {
	border-right: 0;
}

.lp-year__m a:hover {
	background: var(--lp-tile);
}

.lp-year__name {
	font-size: 13px;
	font-weight: 600;
}

.lp-year__bar {
	display: flex;
	flex: 1;
	align-items: flex-end;
}

.lp-year__bar i {
	display: block;
	width: 100%;
	border-top: 2px solid var(--lp-stamp);
	border-radius: 2px;
	background: var(--lp-stamp-soft);
}

.lp-year__n {
	font-family: var(--lp-mono);
	font-size: 13px;
	color: var(--lp-stamp);
}

.lp-year__m.is-now a {
	background: var(--lp-stamp-soft);
}

.lp-year__now {
	position: absolute;
	right: 8px;
	bottom: 13px;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--lp-stamp);
}

.lp-shelf {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 20px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

.lp-card a {
	display: flex;
	flex-direction: column;
	gap: 9px;
	color: inherit;
	text-decoration: none;
}

.lp-cover {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px;
	box-shadow: var(--ms-shadow-sm, 0 1px 2px rgba(15, 23, 42, .05));
	transition: transform .14s ease, box-shadow .14s ease;
}

.lp-card a:hover .lp-cover,
.lp-card a:focus-visible .lp-cover {
	transform: translateY(-3px);
	box-shadow: var(--ms-shadow-md, 0 10px 30px rgba(15, 23, 42, .07));
}

.lp-card__title {
	display: -webkit-box;
	overflow: hidden;
	font-size: 13.5px;
	line-height: 1.35;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.lp-card__genre {
	font-size: 12px;
	color: var(--ms-text-faint);
}

/* Цвета обложек — те же токены, что у карточек в библиотеке (ADR-0051). */
.lp-cover[data-family='order']   { --lp-hue: var(--msai-cover-order,   #2f4e8f); }
.lp-cover[data-family='report']  { --lp-hue: var(--msai-cover-report,  #157f72); }
.lp-cover[data-family='plan']    { --lp-hue: var(--msai-cover-plan,    #b0742a); }
.lp-cover[data-family='norm']    { --lp-hue: var(--msai-cover-norm,    #5b4b9e); }
.lp-cover[data-family='minutes'] { --lp-hue: var(--msai-cover-minutes, #4a5568); }
.lp-cover[data-family='blank']   { --lp-hue: var(--msai-cover-blank,   #a03e5c); }
.lp-cover[data-family='slide']   { --lp-hue: var(--msai-cover-slide,   #6e3fa3); }
.lp-cover[data-family='plain']   { --lp-hue: var(--ms-text-faint,      #646e82); }

.lp-cover__paper      { fill: var(--ms-surface); }
.lp-cover__edge       { fill: none; stroke: var(--ms-border); stroke-width: 1; }
.lp-cover__accent     { fill: var(--lp-hue); }
.lp-cover__ink        { fill: var(--lp-hue); opacity: .42; }
.lp-cover__ink-strong { fill: var(--lp-hue); opacity: .78; }
.lp-cover__tint       { fill: var(--lp-hue); opacity: .1; }
.lp-cover__frame      { fill: none; stroke: var(--lp-hue); stroke-width: 1.5; opacity: .5; }
.lp-cover__rule       { stroke: var(--lp-hue); stroke-width: 1; opacity: .28; }
.lp-cover__on         { fill: #fff; }
.lp-cover__on-soft    { fill: #fff; opacity: .6; }

.lp-cover__badge {
	fill: #fff;
	font-family: var(--ms-font-family);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .04em;
}

.lp-fund__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 28px;
	margin-top: 36px;
}

.lp-search {
	flex: 1;
	min-width: min(100%, 300px);
	margin: 0;
}

.lp-search__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.lp-search__field {
	display: flex;
	align-items: stretch;
	overflow: hidden;
	border: 1.5px solid var(--lp-line);
	border-radius: 12px;
	background: var(--lp-paper);
	transition: border-color .12s ease, box-shadow .12s ease;
}

.lp-search__field:focus-within {
	border-color: var(--ms-primary-2);
	box-shadow: 0 0 0 4px var(--ms-primary-soft, rgba(16, 185, 129, .1));
}

.lp-search input {
	flex: 1;
	min-width: 0;
	padding: 13px 16px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 15px;
	color: var(--ms-text-main);
}

.lp-search input::placeholder {
	color: var(--ms-text-faint);
}

.lp-search input:focus {
	outline: none;
}

.lp-search button {
	padding: 0 22px;
	border: 0;
	background: var(--ms-primary-2, #059669);
	color: #fff;
	font: inherit;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
}

.lp-search button:hover {
	background: var(--ms-primary, #10b981);
}

.lp-foot-note {
	margin: 0;
	font-size: 14.5px;
	color: var(--ms-text-muted);
}

/* ------------------------------------------------------------------ Пример главной */

/*
 * «Как это выглядит у вас»: живой пример персональной главной в рамке «окна». Высота рамки
 * ограничена, прокрутка внутри — пример показывает, а не заменяет собой лендинг.
 */
.lp-demo .lp-sub {
	margin: 8px 0 22px;
}

.lp-demo__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 20px;
	margin: 0 0 14px;
}

.lp-demo__tabs {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid var(--lp-line);
}

.lp-demo__tabs a {
	margin-bottom: -1px;
	padding: 8px 14px;
	border-bottom: 2px solid transparent;
	font-weight: 600;
	font-size: 15px;
	color: var(--ms-text-muted);
	text-decoration: none;
}

.lp-demo__tabs a:hover,
.lp-demo__tabs a:focus-visible {
	color: var(--ms-text-main);
}

.lp-demo__tabs a[aria-current='true'] {
	border-bottom-color: var(--lp-stamp);
	color: var(--ms-text-main);
}

.lp-demo__frame {
	overflow: hidden;
	border: 1px solid var(--lp-line);
	border-radius: var(--ms-radius-card, 16px);
	background: var(--ms-bg, #f3f6f4);
	box-shadow: 0 18px 48px rgba(15, 23, 42, .08);
}

.lp-demo__chrome {
	display: flex;
	gap: 6px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--lp-line);
	background: var(--lp-paper);
}

.lp-demo__chrome span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--lp-line);
}

.lp-demo__frame #msai-home-root {
	max-height: 720px;
	overflow: auto;
	padding: 16px;
}

.lp-demo__placeholder {
	display: grid;
	place-items: center;
	min-height: 320px;
	font-size: 14px;
	color: var(--ms-text-faint);
}

.lp-demo__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

/* ------------------------------------------------------------------ Финал */

.lp-final {
	text-align: center;
}

.lp-final .lp-sub {
	margin: 12px auto 0;
}

.lp-final .lp-actions {
	justify-content: center;
	margin-top: 28px;
}

/* ------------------------------------------------------------------ Узкая колонка */

/* Пометкам ИИ не хватает полей справа — они уходят под лист. */
@container (max-width: 1100px) {
	.lp-sheet-wrap {
		padding-right: 0;
	}

	.lp-notes {
		position: static;
		width: auto;
		margin-top: 18px;
	}

	.lp-note {
		opacity: 1;
		animation: none;
	}

	.lp-ask {
		margin: 16px 0 0;
	}

	.lp-dirs {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@container (max-width: 900px) {
	.lp-hero__grid,
	.lp-sec__head,
	.lp-diag,
	.lp-an,
	.lp-paths,
	.lp-ai,
	.lp-fund__head {
		grid-template-columns: minmax(0, 1fr);
	}

	.lp-sec__head {
		margin-bottom: 28px;
	}

	.lp-also,
	.lp-dirs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lp-chain {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.lp-year {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.lp-year__m a {
		min-height: 110px;
		border-bottom: 1px solid var(--lp-line-soft);
	}

	.lp-shelf {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Телефон: поля 6–8 px — на узком экране широкие отступы съедают содержание. */
@container (max-width: 680px) {
	.lp-hero {
		padding-top: 32px;
	}

	.lp-sec {
		padding-top: 40px;
	}

	.lp-sec--tile {
		padding: 32px 8px 28px;
		border-radius: 14px;
	}

	.lp-fig {
		padding: 18px 14px;
	}

	.lp-fig--gia figcaption {
		padding-right: 0;
	}

	.lp-seg {
		position: static;
		display: inline-flex;
		margin-bottom: 14px;
	}

	.lp-fig--road figcaption {
		padding-right: 0;
	}

	.lp-badge {
		position: static;
		display: inline-block;
		margin-bottom: 10px;
	}

	.lp-also,
	.lp-dirs {
		grid-template-columns: minmax(0, 1fr);
	}

	.lp-year {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.lp-year__name {
		font-size: 12px;
	}

	.lp-demo__frame #msai-home-root {
		max-height: 560px;
		padding: 6px;
	}

	.lp-demo__tabs a {
		padding: 8px 10px;
	}
}

/* Поля по краям страницы на телефоне — 8 px; правило на окне, а не колонке: это поле самой
   страницы, а не раскладка внутри неё. */
@media (max-width: 680px) {
	/* Тема даёт основной колонке 28 px по бокам; на странице лендинга поле задаёт сама страница. */
	.ms-app-main:has(> .ms-container-fluid > .lp),
	.ms-app-main:has(.ms-post-content .lp) {
		padding-left: 0;
		padding-right: 0;
	}

	.lp {
		padding-left: 8px;
		padding-right: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lp-bar,
	.lp-note,
	.lp-ring,
	.lp-btn {
		animation: none;
		transition: none;
	}

	.lp-ring {
		clip-path: none;
	}

	.lp-note {
		opacity: 1;
	}
}