/* =========================================================================
   Bayesum — основной стиль. Только светлая тема. Mobile-first.
   Токены продублированы из theme.json. Один акцент: --accent.
   Брейкпоинты: 640 / 960 / 1200.
   ========================================================================= */

:root {
	--bg: #ffffff;
	--bg-muted: #f4f7f6;
	--surface: #ffffff;
	--ink: #0e1a17;
	--ink-muted: #516560;
	--border: #e2e8e5;
	--accent: #0fb98f;          /* TODO заказчику: согласовать точный акцент (зелёно-бирюзовый «рост+безопасность»). */
	--accent-ink: #065f49;
	--accent-050: #e7f8f2;
	--accent-100: #c9efe3;
	--signal: #f0a400;          /* янтарный — алармы */
	--signal-050: #fdf3e0;
	--danger: #d64545;          /* красный — дозированно */
	--danger-050: #fbecec;

	--font-heading: 'Onest', 'Inter Tight', 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-body: 'Golos Text', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	--fs-sm: 0.875rem;
	--fs-base: 1rem;
	--fs-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
	--fs-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
	--fs-2xl: clamp(2rem, 1.4rem + 3vw, 3.25rem);

	--sp-1: 0.5rem;
	--sp-2: 1rem;
	--sp-3: 1.5rem;
	--sp-4: 2.5rem;
	--sp-5: 4rem;
	--sp-6: 6rem;

	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 22px;

	--container: 1120px;
	--shadow-sm: 0 1px 2px rgba(14, 26, 23, 0.06), 0 1px 3px rgba(14, 26, 23, 0.05);
	--shadow-md: 0 6px 24px rgba(14, 26, 23, 0.08);
	--shadow-lg: 0 20px 60px rgba(14, 26, 23, 0.12);
	--focus: 0 0 0 3px var(--accent-100), 0 0 0 1px var(--accent-ink);
}

/* ------------------------------------------------------------------ Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.15; margin: 0 0 0.5em; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p { margin: 0 0 1em; }
a { color: var(--accent-ink); text-underline-offset: 0.15em; }
a:hover { text-decoration: none; }
img, svg { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
strong { font-weight: 650; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: -999px; top: 0; z-index: 999;
	background: var(--ink); color: #fff; padding: 0.75rem 1.25rem; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------- Layout */
.container {
	width: min(100% - 2 * var(--sp-3), var(--container));
	margin-inline: auto;
}
.section { padding-block: var(--sp-5); }
.section--muted { background: var(--bg-muted); }
.section--accent { background: linear-gradient(180deg, var(--accent-050), #ffffff 70%); }
@media (min-width: 960px) {
	.section { padding-block: var(--sp-6); }
}

.section__head { max-width: 46rem; margin-bottom: var(--sp-4); }
.section__head .section__lead { color: var(--ink-muted); font-size: var(--fs-lg); }
.section__cta { margin-top: var(--sp-4); }

.eyebrow {
	font-size: var(--fs-sm);
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent-ink);
	margin-bottom: 0.75rem;
	display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}

/* ----------------------------------------------------------------- Buttons */
.btn {
	--btn-bg: var(--ink);
	--btn-fg: #fff;
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	padding: 0.85rem 1.4rem;
	border-radius: var(--radius-md);
	font: inherit; font-family: var(--font-heading); font-weight: 650;
	text-decoration: none;
	background: var(--btn-bg); color: var(--btn-fg);
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn--accent { --btn-bg: var(--accent); --btn-fg: #04231b; }
.btn--accent:hover { --btn-bg: #0cd0a0; }
.btn--sm { padding: 0.55rem 0.95rem; font-size: var(--fs-sm); border-radius: var(--radius-sm); }
.btn--lg { padding: 1rem 1.75rem; font-size: var(--fs-lg); }
.btn--block { display: flex; width: 100%; }

/* ------------------------------------------------------------- Site header */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: saturate(180%) blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.site-header.is-stuck { border-color: var(--border); box-shadow: var(--shadow-sm); }
.site-header__inner {
	display: flex; align-items: center; gap: var(--sp-2);
	min-height: 64px;
}
.site-header__brand { display: inline-flex; align-items: center; margin-right: auto; }
.site-header__brand svg, .site-header__brand .sd-graphic { height: 28px; width: auto; }
/* На мобильном кнопку в шапке прячем: не влезает рядом с бургером, CTA есть в hero
   и в каждой секции. Возвращаем на десктопе (≥960). */
.site-header__cta { display: none; }

.site-nav { display: flex; align-items: center; order: 3; margin-left: 0.5rem; }
.site-nav__toggle {
	display: inline-flex; flex-direction: column; gap: 4px; justify-content: center;
	width: 40px; height: 40px; padding: 8px;
	background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm);
	cursor: pointer;
}
.site-nav__toggle-bar, .site-nav__toggle-bar::before, .site-nav__toggle-bar::after {
	content: ""; display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.site-nav__toggle-bar { position: relative; }
.site-nav__toggle-bar::before { position: absolute; top: -6px; }
.site-nav__toggle-bar::after { position: absolute; top: 6px; }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar { background: transparent; }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar::before { transform: translateY(6px) rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar::after { transform: translateY(-6px) rotate(-45deg); }

.site-nav__list {
	position: absolute; left: 0; right: 0; top: 100%;
	display: none; flex-direction: column; gap: 0;
	background: var(--surface); border-bottom: 1px solid var(--border);
	box-shadow: var(--shadow-md);
	padding: var(--sp-2) var(--sp-3);
}
.site-nav__list.is-open { display: flex; }
.site-nav__list a {
	display: block; padding: 0.75rem 0;
	color: var(--ink); text-decoration: none; font-weight: 550;
	border-bottom: 1px solid var(--border);
}
.site-nav__list li:last-child a { border-bottom: 0; }

@media (min-width: 960px) {
	.site-nav__toggle { display: none; }
	.site-nav { order: 2; margin-left: 0; }
	.site-header__cta { display: inline-flex; order: 3; margin-left: var(--sp-3); }
	.site-nav__list {
		position: static; display: flex; flex-direction: row; gap: var(--sp-3);
		background: transparent; border: 0; box-shadow: none; padding: 0;
	}
	.site-nav__list a { padding: 0.25rem 0; border: 0; font-weight: 500; color: var(--ink-muted); }
	.site-nav__list a:hover { color: var(--ink); }
}

/* -------------------------------------------------------------------- Hero */
.hero { padding-top: var(--sp-4); }
.hero__inner { display: grid; gap: var(--sp-4); align-items: center; }
.hero__sub { font-size: var(--fs-lg); color: var(--ink-muted); max-width: 34rem; }
.hero__micro { font-size: var(--fs-sm); color: var(--ink-muted); margin-top: 1rem; }
.hero__actions { margin-top: var(--sp-3); }
.hero__media svg, .hero__media .sd-graphic { width: 100%; }
.hero__media {
	border: 1px solid var(--border); border-radius: var(--radius-lg);
	overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm);
	max-width: 460px; margin-inline: auto; /* в одноколоночной раскладке графика не должна занимать весь экран */
}
@media (min-width: 960px) {
	.hero__inner { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-5); }
	.hero__media { max-width: none; margin-inline: 0; }
}

/* ----------------------------------------------------------------- Problem */
.problem__list { display: grid; gap: var(--sp-3); counter-reset: p; }
.problem__item {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
	padding: var(--sp-3); box-shadow: var(--shadow-sm);
}
.problem__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2rem; height: 2rem; border-radius: 50%;
	background: var(--accent-050); color: var(--accent-ink); font-weight: 700; font-family: var(--font-heading);
	margin-bottom: 0.75rem;
}
.problem__item h3 { margin-bottom: 0.25rem; }
.problem__item p { margin: 0; color: var(--ink-muted); }
@media (min-width: 960px) { .problem__list { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------- How it works */
.how__steps { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.how__step {
	position: relative; padding: var(--sp-3);
	border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
}
.how__step-num {
	font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem;
	color: var(--accent); display: block; margin-bottom: 0.5rem;
}
.how__step h3 { margin-bottom: 0.25rem; }
.how__step p { margin: 0; color: var(--ink-muted); }
@media (min-width: 640px) { .how__steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .how__steps { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------- Dashboard mockup */
.mockup { margin: 0; }
.mockup__frame {
	background: var(--surface); border: 1px solid var(--border);
	border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.mockup__bar {
	display: flex; align-items: center; gap: 0.4rem;
	padding: 0.75rem 1rem; background: var(--bg-muted); border-bottom: 1px solid var(--border);
}
.mockup__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.mockup__title { margin-left: 0.75rem; font-size: var(--fs-sm); color: var(--ink-muted); font-weight: 550; }
.mockup__list { display: grid; gap: 1px; background: var(--border); }
.acard {
	display: grid; gap: 0.75rem; padding: var(--sp-3); background: var(--surface);
	grid-template-columns: 1fr;
}
.acard__main { display: flex; align-items: center; gap: 0.75rem; }
.acard__light { display: inline-flex; flex-direction: column; gap: 3px; padding: 4px; background: var(--ink); border-radius: 6px; }
.acard__light-dot { width: 8px; height: 8px; border-radius: 50%; opacity: 0.25; }
.acard__light-dot--red { background: var(--danger); }
.acard__light-dot--amber { background: var(--signal); }
.acard__light-dot--green { background: var(--accent); }
.acard--danger .acard__light-dot--red { opacity: 1; }
.acard--signal .acard__light-dot--amber { opacity: 1; }
.acard--accent .acard__light-dot--green { opacity: 1; }
.acard__id h4 { margin: 0; font-size: var(--fs-base); }
.acard__inn { margin: 0; font-size: var(--fs-sm); color: var(--ink-muted); }
.acard__score { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.acard__trend { font-size: var(--fs-sm); color: var(--ink-muted); }
.acard__spark { color: var(--accent); }
.acard--danger .acard__spark { color: var(--danger); }
.acard--signal .acard__spark { color: var(--signal); }
.spark { width: 120px; height: 36px; }
.acard__alarm {
	margin: 0; font-size: var(--fs-sm); font-weight: 550;
	padding: 0.5rem 0.7rem; border-radius: var(--radius-sm);
	background: var(--accent-050); color: var(--accent-ink);
}
.acard__alarm--signal { background: var(--signal-050); color: #8a5b00; }
.acard__alarm--danger { background: var(--danger-050); color: #9a2b2b; }
.acard__limit { margin: 0; font-size: var(--fs-sm); color: var(--ink-muted); }
@media (min-width: 720px) {
	.acard { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; }
	.acard__alarm, .acard__limit { grid-column: 1 / -1; }
}
.mockup__caption { margin-top: 0.75rem; font-size: var(--fs-sm); color: var(--ink-muted); }

/* ----------------------------------------------------------- Early warning */
.early__timeline { display: grid; gap: var(--sp-4); }
.early__timeline > .sd-graphic { width: 100%; }
.early__legend { display: grid; gap: var(--sp-3); }
.early__legend-item { display: flex; gap: 0.75rem; }
.early__legend-item div { display: flex; flex-direction: column; gap: 0.15rem; }
.early__legend-item span:not(.early__marker) { color: var(--ink-muted); font-size: var(--fs-sm); }
.early__marker { flex: none; width: 14px; height: 14px; border-radius: 50%; margin-top: 0.25rem; }
.early__legend-item--early .early__marker { background: var(--signal); box-shadow: 0 0 0 4px var(--signal-050); }
.early__legend-item--late .early__marker { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-050); }
@media (min-width: 960px) { .early__legend { grid-template-columns: repeat(2, 1fr); } }

/* -------------------------------------------------------------- Comparison */
.comparison__wrap, .pricing__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.comparison__table, .pricing__table {
	width: 100%; border-collapse: collapse; min-width: 640px;
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
	overflow: hidden;
}
.comparison__table th, .comparison__table td,
.pricing__table th, .pricing__table td {
	text-align: left; padding: 0.9rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top;
	font-size: var(--fs-sm);
}
.comparison__table thead th, .pricing__table thead th {
	background: var(--bg-muted); font-family: var(--font-heading); font-size: var(--fs-base);
	position: sticky; top: 0;
}
.comparison__table tbody th, .pricing__table tbody th { font-weight: 650; width: 34%; }
.comparison__new { background: var(--accent-050); color: var(--accent-ink); font-weight: 550; }
.comparison__table tr:last-child td, .comparison__table tr:last-child th,
.pricing__table tr:last-child td, .pricing__table tr:last-child th { border-bottom: 0; }

/* ------------------------------------------------------------------- Roles */
.roles__grid { display: grid; gap: var(--sp-3); }
.roles__col {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
	padding: var(--sp-4); box-shadow: var(--shadow-sm);
}
.roles__list { display: grid; gap: 0.75rem; margin-top: var(--sp-2); }
.roles__list li { position: relative; padding-left: 1.75rem; color: var(--ink-muted); }
.roles__list li::before {
	content: ""; position: absolute; left: 0; top: 0.5rem;
	width: 10px; height: 10px; border-radius: 3px; background: var(--accent);
}
@media (min-width: 720px) { .roles__grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------------- AI not replace */
.ai-not__inner { display: grid; gap: var(--sp-4); }
.ai-not__list { display: grid; gap: var(--sp-3); }
.ai-not__list li {
	padding: var(--sp-3); border-left: 3px solid var(--accent);
	background: var(--bg-muted); border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.ai-not__list h3 { margin-bottom: 0.25rem; }
.ai-not__list p { margin: 0; color: var(--ink-muted); }
@media (min-width: 960px) {
	.ai-not__inner { grid-template-columns: 0.9fr 1.1fr; align-items: start; }
}

/* --------------------------------------------------------------- Co-scoring */
.tag {
	display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px;
	font-size: 0.75rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase;
	background: var(--ink); color: #fff;
}
.tag--corp { background: var(--accent-ink); }
.coscore__diagram { margin: 0 auto var(--sp-4); max-width: 780px; }
.coscore__diagram .sd-graphic,
.coscore__diagram svg { width: 100%; height: auto; }
.coscore__grid { display: grid; gap: var(--sp-3); }
.coscore__card {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
	padding: var(--sp-3);
}
.coscore__list { display: grid; gap: 0.4rem; margin: 0.75rem 0; }
.coscore__list li { position: relative; padding-left: 1.25rem; color: var(--ink-muted); }
.coscore__list li::before { content: "→"; position: absolute; left: 0; color: var(--accent); }
.coscore__note { margin: 0; font-weight: 600; color: var(--accent-ink); }
.coscore__outcome {
	margin-top: var(--sp-3); padding: var(--sp-3);
	background: var(--accent-050); border-radius: var(--radius-md); color: var(--accent-ink);
}
@media (min-width: 960px) { .coscore__grid { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------------- Trust */
.trust__grid { display: grid; gap: var(--sp-3); }
.trust__item {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
	padding: var(--sp-3);
}
.trust__item .sd-graphic { width: 28px; height: 28px; color: var(--accent-ink); margin-bottom: 0.6rem; }
.trust__item h3 { font-size: var(--fs-base); margin-bottom: 0.25rem; }
.trust__item p { margin: 0; color: var(--ink-muted); font-size: var(--fs-sm); }
@media (min-width: 640px) { .trust__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .trust__grid { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------- Social proof */
.proof__quotes { display: grid; gap: var(--sp-3); }
.proof__quote {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
	padding: var(--sp-3);
}
.proof__quote blockquote { margin: 0 0 0.6rem; font-size: var(--fs-lg); }
.proof__quote blockquote p { margin: 0; }
.proof__quote blockquote::before { content: "«"; color: var(--accent); }
.proof__quote blockquote::after { content: "»"; color: var(--accent); }
.proof__role { margin: 0; font-size: var(--fs-sm); color: var(--ink-muted); }
.proof__logos {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2);
	margin-top: var(--sp-4);
}
.proof__logo-slot {
	display: flex; align-items: center; justify-content: center;
	height: 64px; border: 1px dashed var(--border); border-radius: var(--radius-sm);
	color: var(--ink-muted); font-size: var(--fs-sm); background: var(--bg-muted);
}
@media (min-width: 640px) { .proof__quotes { grid-template-columns: repeat(3, 1fr); } .proof__logos { grid-template-columns: repeat(5, 1fr); } }

/* ----------------------------------------------------------------- Pricing */
.pricing__badges { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: var(--sp-2); }
.badge {
	display: inline-block; padding: 0.3rem 0.7rem; border-radius: 999px;
	font-size: 0.8rem; font-weight: 600;
}
.badge--soft { background: var(--accent-050); color: var(--accent-ink); }
.badge--accent { background: var(--accent); color: #04231b; }
.badge--signal { background: var(--signal-050); color: #8a5b00; }
.badge--danger { background: var(--danger-050); color: #9a2b2b; }

.pricing__cards { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.plan {
	position: relative; display: flex; flex-direction: column; gap: 0.75rem;
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
	padding: var(--sp-4); box-shadow: var(--shadow-sm);
}
.plan--featured { border-color: var(--accent); box-shadow: var(--shadow-md); }
.plan__flag {
	position: absolute; top: -0.75rem; left: var(--sp-4);
	background: var(--accent); color: #04231b; font-size: 0.75rem; font-weight: 700;
	padding: 0.2rem 0.7rem; border-radius: 999px;
}
.plan__name { margin: 0; }
.plan__price { margin: 0; display: flex; align-items: baseline; gap: 0.4rem; }
.plan__amount { font-family: var(--font-heading); font-weight: 700; font-size: 1.75rem; }
.plan__period { color: var(--ink-muted); font-size: var(--fs-sm); }
.price--todo .plan__amount { color: var(--ink-muted); } /* placeholder styling — снять после ввода цен */
.plan__note { margin: 0; color: var(--ink-muted); font-size: var(--fs-sm); flex-grow: 1; }
.plan__hint { margin: 0; font-size: var(--fs-sm); color: var(--accent-ink); }
@media (min-width: 960px) { .pricing__cards { grid-template-columns: repeat(3, 1fr); align-items: start; } }

.pricing__table .cell--yes { color: var(--accent-ink); font-weight: 700; }
.pricing__table .cell--no { color: var(--ink-muted); }
.pricing__table .cell--text { color: var(--ink); }

/* -------------------------------------------------------------------- Lead */
.lead__inner { display: grid; gap: var(--sp-4); }
.lead__lead { color: var(--ink-muted); font-size: var(--fs-lg); }
.lead__form-wrap {
	background: var(--surface); border: 1px solid var(--border);
	border-radius: var(--radius-lg); padding: var(--sp-4); box-shadow: var(--shadow-md);
}
.lead__form { display: grid; gap: var(--sp-3); }
.lead__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { display: grid; gap: 0.35rem; }
.field label { font-weight: 600; font-size: var(--fs-sm); }
.field__req { color: var(--danger); }
.field input, .field select {
	width: 100%; padding: 0.75rem 0.9rem;
	border: 1px solid var(--border); border-radius: var(--radius-sm);
	font: inherit; background: #fff; color: var(--ink);
}
.field input:focus-visible, .field select:focus-visible { box-shadow: var(--focus); border-color: var(--accent); }
.field--check label { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; font-weight: 400; }
.field--check input { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; }
.field__error { color: var(--danger); font-size: var(--fs-sm); min-height: 0; }
.field.has-error input, .field.has-error select { border-color: var(--danger); }
.field.has-error .field__error { min-height: 1.2em; }
.lead__form-error {
	background: var(--danger-050); color: #9a2b2b; padding: 0.75rem 1rem; border-radius: var(--radius-sm); margin: 0;
}
.lead__form-micro { margin: 0; font-size: var(--fs-sm); color: var(--ink-muted); }
.lead__success {
	background: var(--accent-050); border: 1px solid var(--accent-100);
	border-radius: var(--radius-md); padding: var(--sp-4); text-align: center;
}
.lead__success h3 { margin: 0; color: var(--accent-ink); }
.lead__success:not(.is-visible) { display: none; }
.lead__form.is-hidden { display: none; }
@media (min-width: 960px) {
	.lead__inner { grid-template-columns: 1fr 1fr; align-items: start; gap: var(--sp-5); }
	.lead__form { grid-template-columns: repeat(2, 1fr); }
	.field--check, .lead__form > button, .lead__form-error, .lead__form-micro { grid-column: 1 / -1; }
}

/* -------------------------------------------------------------------- FAQ */
.faq__list { display: grid; gap: 0.75rem; max-width: 52rem; }
.faq__item {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
	padding: 0 var(--sp-3);
}
.faq__q {
	list-style: none; cursor: pointer; padding: var(--sp-3) 2rem var(--sp-3) 0;
	font-family: var(--font-heading); font-weight: 650; position: relative;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
	content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
	font-size: 1.5rem; color: var(--accent-ink); line-height: 1;
}
.faq__item[open] .faq__q::after { content: "–"; }
.faq__a { padding-bottom: var(--sp-3); color: var(--ink-muted); }
.faq__a p { margin: 0; }

/* ------------------------------------------------------------------ Legal */
.legal { padding-block: var(--sp-5); max-width: 46rem; }
.legal__header { margin-bottom: var(--sp-4); }
.legal__meta { color: var(--ink-muted); font-size: var(--fs-sm); }
.legal__body h2 { margin-top: var(--sp-4); font-size: var(--fs-lg); }
.legal__body p { color: var(--ink-muted); }
.legal__back { margin-top: var(--sp-4); }

/* ----------------------------------------------------------------- Footer */
.site-footer { background: var(--ink); color: #cdd8d4; padding-block: var(--sp-4); }
.site-footer__inner { display: grid; gap: var(--sp-3); }
.site-footer__brand svg, .site-footer__brand .sd-graphic { height: 24px; width: auto; filter: brightness(0) invert(1); opacity: 0.9; }
.site-footer__disclaimer { margin: 0.75rem 0 0; font-size: var(--fs-sm); max-width: 40rem; }
.site-footer__links { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.site-footer__links a { color: #fff; font-size: var(--fs-sm); }
.site-footer__copy { margin: 0; font-size: var(--fs-sm); color: #9fb0ab; }
@media (min-width: 960px) {
	.site-footer__inner { grid-template-columns: 1.4fr 1fr auto; align-items: center; }
	.site-footer__copy { text-align: right; }
}

/* ----------------------------------------------------------- SVG graphics */
/* Wrapper shrink-wraps to content so `width:auto` logo/icon contexts stay small;
   full-width graphics (hero, timeline, chain) set `width:100%` explicitly. */
.sd-graphic { display: inline-block; vertical-align: middle; line-height: 0; max-width: 100%; }
.sd-graphic svg { display: block; width: 100%; height: auto; }
.site-header__brand .sd-graphic svg { height: 28px; width: auto; }
.site-footer__brand .sd-graphic svg { height: 24px; width: auto; }
.trust__item .sd-graphic svg { width: 28px; height: 28px; }

/* =========================================================================
   v2 — правки по маркетинговому аудиту (21 пункт)
   ========================================================================= */

/* A/B: показываем один вариант H1, выбранный ранним скриптом в header.php.
   По умолчанию (нет data-sd-hero) — вариант «a». */
.hero__h1 { display: none; }
.hero__h1--a { display: block; }
:root[data-sd-hero="b"] .hero__h1--a { display: none; }
:root[data-sd-hero="b"] .hero__h1--b { display: block; }

/* Форма: необязательные поля */
.field__opt { color: var(--ink-muted); font-weight: 400; font-size: 0.85em; }

/* Лид-блок: буллеты доверия */
.lead__points { display: grid; gap: 0.4rem; margin-top: var(--sp-2); }
.lead__points li { position: relative; padding-left: 1.5rem; color: var(--ink-muted); font-size: var(--fs-sm); }
.lead__points li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-ink); font-weight: 700; }

/* Микро-опрос на экране успеха */
.btn--ghost {
	--btn-bg: transparent; --btn-fg: var(--accent-ink);
	border-color: var(--accent-100);
}
.btn--ghost:hover { --btn-bg: var(--accent-050); box-shadow: none; transform: none; }
.lead__poll { margin-top: var(--sp-3); text-align: left; }
.lead__poll-q { font-weight: 600; margin-bottom: 0.75rem; }
.lead__poll-opts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
	display: inline-flex; align-items: center;
	padding: 0.45rem 0.85rem; border-radius: 999px;
	border: 1px solid var(--border); background: var(--surface); color: var(--ink);
	font: inherit; font-size: var(--fs-sm); cursor: pointer;
	transition: border-color 0.12s ease, background-color 0.12s ease;
}
.chip:hover { border-color: var(--accent); }
.chip.is-picked { background: var(--accent); border-color: var(--accent); color: #04231b; font-weight: 600; }
.chip:disabled { cursor: default; opacity: 0.65; }
.chip.is-picked:disabled { opacity: 1; }
.lead__poll-thanks { margin: 0.75rem 0 0; color: var(--accent-ink); font-weight: 600; font-size: var(--fs-sm); }

/* «Как устроен скоринг» — раскладка как у ролей */
.how-scoring__grid { display: grid; gap: var(--sp-3); }
.how-scoring__col {
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
	padding: var(--sp-3);
}
.how-scoring__col h3 { margin-bottom: 0.4rem; }
.how-scoring__col p { color: var(--ink-muted); margin-bottom: 0.6rem; }
.how-scoring__list { display: grid; gap: 0.35rem; margin: 0.5rem 0; }
.how-scoring__list li { position: relative; padding-left: 1.25rem; color: var(--ink-muted); font-size: var(--fs-sm); }
.how-scoring__list li::before { content: "•"; position: absolute; left: 0.25rem; color: var(--accent); }
.how-scoring__note { font-size: var(--fs-sm); color: var(--ink-muted); font-style: italic; margin: 0; }
@media (min-width: 960px) { .how-scoring__grid { grid-template-columns: repeat(3, 1fr); } }

/* Блок «Кто за проектом» + источники данных (заменил заглушки соцпруфа) */
.about__grid { display: grid; gap: var(--sp-3); }
.about__founder {
	margin: 0; background: var(--surface); border: 1px solid var(--border);
	border-radius: var(--radius-md); padding: var(--sp-4);
}
.about__avatar {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--accent-050); color: var(--accent-ink); font-weight: 700; font-family: var(--font-heading);
	margin-bottom: var(--sp-2);
}
.about__founder blockquote { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); }
.about__founder blockquote p { margin: 0; }
.about__founder figcaption { display: flex; flex-direction: column; }
.about__founder figcaption strong { font-family: var(--font-heading); }
.about__founder figcaption span { color: var(--ink-muted); font-size: var(--fs-sm); }
.about__sources {
	background: var(--surface); border: 1px solid var(--border);
	border-radius: var(--radius-md); padding: var(--sp-4);
}
.about__sources h3 { margin-bottom: 0.4rem; }
.about__sources p { color: var(--ink-muted); font-size: var(--fs-sm); }
.about__source-list { display: grid; gap: 0.5rem; margin-top: var(--sp-2); }
.about__source-list li { position: relative; padding-left: 1.5rem; font-size: var(--fs-sm); }
.about__source-list li::before {
	content: ""; position: absolute; left: 0; top: 0.45rem;
	width: 8px; height: 8px; border-radius: 2px; background: var(--accent);
}
@media (min-width: 768px) { .about__grid { grid-template-columns: 1.1fr 0.9fr; } }

/* Тарифы без цен */
.plan--noprice .plan__amount {
	font-size: var(--fs-base); font-weight: 600; color: var(--ink-muted);
	font-family: var(--font-body);
}
.pricing__fineprint {
	margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-muted);
	max-width: 44rem;
}

/* Футер: реквизиты оператора */
.site-footer__legal { margin: 0.5rem 0 0; font-size: 0.8rem; color: #9fb0ab; }

/* --- Мобильные таблицы: стек вместо горизонтального скролла (< 640) ---------
   Иначе колонка «Bayesum» / тарифы уезжают за экран. data-label на <td>
   уже проставлены в шаблонах. */
@media (max-width: 639px) {
	.comparison__wrap, .pricing__wrap { overflow: visible; }
	.comparison__table, .pricing__table {
		min-width: 0; border: 0; background: transparent; display: block;
	}
	.comparison__table thead, .pricing__table thead {
		position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
		overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
	}
	.comparison__table tbody, .pricing__table tbody { display: block; }
	.comparison__table tr, .pricing__table tr {
		display: block; background: var(--surface); border: 1px solid var(--border);
		border-radius: var(--radius-md); padding: var(--sp-3); margin-bottom: var(--sp-2);
	}
	.comparison__table tbody th[scope="row"], .pricing__table tbody th[scope="row"] {
		display: block; width: auto; padding: 0 0 0.5rem; border: 0;
		font-family: var(--font-heading); font-size: var(--fs-base);
	}
	/* Таблица сравнения: подпись отдельной строкой над значением (текст длинный). */
	.comparison__table td {
		display: block; padding: 0.5rem 0 0; border: 0; border-top: 1px solid var(--border);
		margin-top: 0.5rem; font-size: var(--fs-sm);
	}
	.comparison__table td::before {
		content: attr(data-label); display: block; margin-bottom: 0.15rem;
		font-weight: 600; color: var(--ink-muted); font-size: 0.8rem;
	}
	.comparison__table td.comparison__new { background: transparent; color: var(--accent-ink); font-weight: 550; }
	.comparison__table td.comparison__new::before { color: var(--accent-ink); }

	/* Таблица тарифов: подпись слева, значок/значение справа (значения короткие). */
	.pricing__table td {
		display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
		padding: 0.5rem 0; border: 0; border-top: 1px solid var(--border); font-size: var(--fs-sm);
	}
	.pricing__table td::before {
		content: attr(data-label); flex: none; font-weight: 600; color: var(--ink-muted);
	}
	.pricing__table td .cell { text-align: right; }
}