/* Общая основа обоих концептов: сброс, типографика, кнопки, мокап чата.
   Всё, что различается между направлениями, живёт в tokens.css — здесь только форма. */

@import url('../fonts/fonts.css');
@import url('./tokens.css');

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-text);
	font-size: var(--step-0);
	line-height: 1.55;
	font-feature-settings: 'ss01', 'cv01';
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0;
	text-wrap: balance;
}

p {
	margin: 0;
	text-wrap: pretty;
}

img,
svg {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ─────────────────────────  Раскладка  ───────────────────────── */

.page {
	max-width: var(--page-max);
	margin-inline: auto;
	padding-inline: var(--space-m);
}

.hero {
	padding-block: var(--space-l) var(--space-xl);
	position: relative;
	overflow: clip;
}

.hero__grid {
	display: grid;
	gap: var(--space-l);
	align-items: center;
}

@media (min-width: 62rem) {
	.hero__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
		gap: var(--space-xl);
	}
}

/* ─────────────────────────  Шапка  ───────────────────────── */

.nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s);
	padding-block: var(--space-s);
}

.nav__links {
	display: none;
	gap: var(--space-m);
	font-size: var(--step--1);
	color: var(--ink-muted);
}

.nav__links a {
	text-decoration: none;
}

.nav__links a:hover {
	color: var(--ink);
}

@media (min-width: 48rem) {
	.nav__links {
		display: flex;
	}
}

.logo {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--step-1);
	letter-spacing: -0.02em;
	text-decoration: none;
}

.brand-mark {
	width: 1.85rem;
	height: 1.85rem;
	object-fit: contain;
	flex: none;
}

/* ─────────────────────────  Текст hero  ───────────────────────── */

.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 0.85rem;
	border-radius: var(--radius-pill);
	background: var(--accent-soft);
	color: var(--accent);
	font-size: var(--step--1);
	font-weight: 500;
	margin-bottom: var(--space-s);
}

[data-brand='b'] .badge {
	background: var(--bg-alt);
	color: var(--ink-muted);
	border: 1px solid var(--border);
}

.hero__title {
	font-size: var(--step-hero);
	margin-bottom: var(--space-s);
}

.hero__lead {
	font-size: var(--step-1);
	color: var(--ink-muted);
	max-width: var(--measure);
	margin-bottom: var(--space-m);
}

.hero__note {
	margin-top: var(--space-s);
	font-size: var(--step--1);
	color: var(--ink-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.9rem;
}

.hero__note span {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.hero__note svg {
	color: var(--leaf);
	flex: none;
}

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

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	align-items: center;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.9rem 1.4rem;
	border-radius: var(--radius-pill);
	border: 1px solid transparent;
	font: inherit;
	font-weight: 600;
	font-size: var(--step-0);
	text-decoration: none;
	cursor: pointer;
	transition: background var(--transition), border-color var(--transition),
		transform var(--transition);
	min-height: 3rem; /* палец, не курсор */
}

.btn--primary {
	background: var(--accent);
	color: var(--accent-ink);
}

.btn--primary:hover {
	background: var(--accent-hover);
}

.btn--ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--border);
}

.btn--ghost:hover {
	background: var(--bg-alt);
}

.btn:active {
	transform: translateY(1px);
}

.btn:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* QR — только на широких экранах: с телефона он бессмыслен */

.qr {
	display: none;
	align-items: center;
	gap: var(--space-xs);
	margin-top: var(--space-s);
	color: var(--ink-muted);
	font-size: var(--step--1);
	max-width: 22rem;
	line-height: 1.35;
}

@media (min-width: 62rem) and (pointer: fine) {
	.qr {
		display: inline-flex;
	}
}

.qr__code {
	width: 3.5rem;
	height: 3.5rem;
	flex: none;
	border-radius: 0.5rem;
	border: 1px dashed var(--border);
	background: var(--surface);
	display: grid;
	place-items: center;
	font-size: 0.55rem;
	text-align: center;
	line-height: 1.1;
	color: var(--ink-muted);
}

/* ─────────────────────────  Мокап чата Telegram  ─────────────────────────
   Тексты — настоящие строки бота (Messages.kt, EventType.kt), не выдуманные:
   на витрине показываем ровно то, что человек увидит, открыв бота. */

.tg {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow-lift);
	overflow: hidden;
	font-size: 0.9375rem;
	line-height: 1.4;
	max-width: 27rem;
	margin-inline: auto;
	width: 100%;
}

.tg__bar {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.7rem 0.9rem;
	border-bottom: 1px solid var(--border);
	background: var(--surface);
}

.tg__avatar {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	flex: none;
	display: grid;
	place-items: center;
	background: var(--accent);
	color: var(--accent-ink);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1rem;
}

.tg__name {
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.2;
}

.tg__status {
	font-size: 0.75rem;
	color: var(--ink-muted);
}

.tg__pinned {
	display: flex;
	gap: 0.6rem;
	padding: 0.6rem 0.9rem;
	background: var(--bg-alt);
	border-bottom: 1px solid var(--border);
	font-size: 0.8125rem;
}

.tg__pinned::before {
	content: '';
	width: 2px;
	border-radius: 2px;
	background: var(--accent);
	flex: none;
}

.tg__pinned-label {
	color: var(--accent);
	font-weight: 600;
	font-size: 0.75rem;
	display: block;
}

.tg__pinned-text {
	color: var(--ink-muted);
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tg__feed {
	padding: 0.9rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	background: var(--surface-sunk);
}

.tg__msg {
	max-width: 85%;
	padding: 0.55rem 0.75rem;
	border-radius: 1rem;
	background: var(--surface);
	box-shadow: var(--shadow-card);
	white-space: pre-line;
}

.tg__msg--in {
	align-self: flex-start;
	border-bottom-left-radius: 0.35rem;
}

.tg__msg--out {
	align-self: flex-end;
	background: var(--accent-soft);
	color: var(--ink);
	border-bottom-right-radius: 0.35rem;
}

.tg__time {
	font-size: 0.6875rem;
	color: var(--ink-muted);
	float: right;
	margin: 0.4rem 0 0 0.5rem;
}

.tg__inline {
	display: flex;
	gap: 0.35rem;
	margin-top: 0.5rem;
}

.tg__inline button {
	flex: 1;
	padding: 0.45rem 0.5rem;
	border-radius: 0.6rem;
	border: none;
	background: var(--bg-alt);
	color: var(--ink);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 500;
	cursor: default;
}

.tg__kb {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.35rem;
	padding: 0.55rem 0.9rem 0.9rem;
	background: var(--surface-sunk);
	border-top: 1px solid var(--border);
}

.tg__key {
	padding: 0.6rem 0.4rem;
	border-radius: 0.6rem;
	background: var(--surface);
	border: 1px solid var(--border);
	text-align: center;
	font-size: 0.8125rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Подпись под мокапом — честно помечает, что это иллюстрация */
.mock-note {
	margin-top: var(--space-xs);
	text-align: center;
	font-size: 0.75rem;
	color: var(--ink-muted);
}

.family-visual {
	margin: 0;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-l);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.family-visual img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.family-visual figcaption {
	padding: var(--space-xs) var(--space-s);
	color: var(--ink-muted);
	font-size: var(--step--1);
}

/* ─────────────────────────  Секции  ───────────────────────── */

.section {
	padding-block: var(--space-xl);
	scroll-margin-top: 4rem;
}

.section--alt {
	background: var(--bg-alt);
}

.section__head {
	max-width: 46ch;
	margin-bottom: var(--space-l);
}

.section__title {
	font-size: var(--step-3);
	margin-bottom: var(--space-xs);
}

.section__lead {
	color: var(--ink-muted);
	font-size: var(--step-1);
}

.eyebrow {
	display: block;
	font-size: var(--step--1);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: var(--space-2xs);
}

/* ─────────────────────────  Сетки карточек  ───────────────────────── */

.grid {
	display: grid;
	gap: var(--space-m);
}

@media (min-width: 45rem) {
	.grid--3 { grid-template-columns: repeat(3, 1fr); }
	.grid--2 { grid-template-columns: repeat(2, 1fr); }
}

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-m);
	padding: var(--space-m);
}

.card__icon {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-s);
	display: grid;
	place-items: center;
	font-size: 1.4rem;
	background: var(--accent-soft);
	margin-bottom: var(--space-s);
}

.card__title {
	font-size: var(--step-1);
	margin-bottom: var(--space-2xs);
}

.card__text {
	color: var(--ink-muted);
	font-size: var(--step--1);
	line-height: 1.5;
}

/* Шаги «как это работает» — нумерация крупная, читается как схема */

.steps {
	counter-reset: step;
}

.step__num {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--accent);
	color: var(--accent-ink);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.1rem;
	margin-bottom: var(--space-s);
}

/* ─────────────────────────  Тарифы  ───────────────────────── */

.plan {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-m);
	padding: var(--space-m);
}

.plan--featured {
	border-color: var(--accent);
	box-shadow: var(--shadow-card);
	position: relative;
}

.plan__tag {
	position: absolute;
	top: -0.75rem;
	left: var(--space-m);
	background: var(--accent);
	color: var(--accent-ink);
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.2rem 0.6rem;
	border-radius: var(--radius-pill);
}

.plan__name {
	font-size: var(--step-1);
	margin-bottom: var(--space-2xs);
}

.plan__price {
	font-family: var(--font-display);
	font-size: var(--step-2);
	font-weight: 600;
	letter-spacing: -0.02em;
}

.plan__price small {
	font-size: var(--step--1);
	font-weight: 400;
	color: var(--ink-muted);
}

.subscription-prices [hidden] { display: none; }
.subscription-prices__list {
	list-style: none;
	padding: 0;
	margin: var(--space-xs) 0;
	display: grid;
	gap: var(--space-xs);
}
.subscription-prices__list li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-s);
	border-bottom: 1px solid var(--border);
	padding-bottom: var(--space-xs);
}
.subscription-prices__list strong {
	font-family: var(--font-display);
	font-size: var(--step-1);
	white-space: nowrap;
}

/* Липкая многострочная шапка не закрывает заголовок подарочного раздела. */
#gifts { scroll-margin-top: 11rem; }
@media (max-width: 35rem) { #gifts { scroll-margin-top: 15rem; } }

.plan__list {
	list-style: none;
	padding: 0;
	margin: var(--space-s) 0 var(--space-m);
	display: grid;
	gap: var(--space-2xs);
	font-size: var(--step--1);
	color: var(--ink-muted);
	flex: 1;
}

.plan__list li {
	display: flex;
	gap: 0.5rem;
	align-items: start;
}

.plan__list svg {
	flex: none;
	margin-top: 0.3em;
	color: var(--leaf);
}

.plan__note {
	margin-top: var(--space-m);
	font-size: var(--step--1);
	color: var(--ink-muted);
	max-width: 60ch;
}

.plan__note a {
	color: var(--accent);
}

/* ─────────────────────────  Письмо основателя  ───────────────────────── */

.letter {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-l);
	padding: var(--space-l);
	max-width: 44rem;
	margin-inline: auto;
}

.letter p + p {
	margin-top: var(--space-s);
}

.letter__sign {
	margin-top: var(--space-m);
	font-size: var(--step--1);
	color: var(--ink-muted);
}

/* ─────────────────────────  FAQ  ───────────────────────── */

.faq {
	max-width: 46rem;
	margin-inline: auto;
	border-top: 1px solid var(--border);
}

.faq details {
	border-bottom: 1px solid var(--border);
}

.faq summary {
	padding: var(--space-s) 0;
	cursor: pointer;
	font-weight: 500;
	font-size: var(--step-1);
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: var(--space-s);
	align-items: center;
}

.faq summary::-webkit-details-marker {
	display: none;
}

.faq summary::after {
	content: '+';
	font-size: 1.5rem;
	line-height: 1;
	color: var(--accent);
	flex: none;
}

.faq details[open] summary::after {
	content: '−';
}

.faq__answer {
	padding-bottom: var(--space-s);
	color: var(--ink-muted);
	max-width: 60ch;
}

/* ─────────────────────────  Финальный призыв  ───────────────────────── */

.cta {
	text-align: center;
	padding-block: var(--space-xl);
}

.cta .actions {
	justify-content: center;
}

.cta .qr {
	margin-inline: auto;
	justify-content: center;
}

/* ─────────────────────────  Футер  ───────────────────────── */

.footer {
	background: var(--bg-alt);
	border-top: 1px solid var(--border);
	padding-block: var(--space-l);
	font-size: var(--step--1);
	color: var(--ink-muted);
}

.footer__grid {
	display: grid;
	gap: var(--space-m);
}

@media (min-width: 45rem) {
	.footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr;
	}
}

.footer a {
	color: inherit;
}

.footer a:hover {
	color: var(--ink);
}

.footer__links {
	display: grid;
	gap: var(--space-2xs);
}

.footer__legal {
	margin-top: var(--space-m);
	padding-top: var(--space-m);
	border-top: 1px solid var(--border);
	line-height: 1.5;
}

/* ─────────────────────────  Юридические документы  ─────────────────────────
   Длинный текст, который читают по диагонали и ищут в нём пункт: узкая колонка,
   явная нумерация разделов, никакого декора. */

.doc {
	max-width: 46rem;
	margin-inline: auto;
	padding-block: var(--space-l) var(--space-xl);
}

.doc__back {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--step--1);
	color: var(--ink-muted);
	text-decoration: none;
	margin-bottom: var(--space-m);
}

.doc__back:hover {
	color: var(--ink);
}

.doc h1 {
	font-size: var(--step-3);
	margin-bottom: var(--space-m);
}

.doc h2 {
	font-size: var(--step-1);
	margin-top: var(--space-l);
	margin-bottom: var(--space-xs);
}

.doc h3 {
	font-size: var(--step-0);
	font-weight: 600;
	margin-top: var(--space-m);
	margin-bottom: var(--space-2xs);
}

.doc p,
.doc li {
	font-size: var(--step-0);
	line-height: 1.6;
}

.doc p + p {
	margin-top: var(--space-s);
}

.doc ul,
.doc ol {
	margin: var(--space-s) 0;
	padding-left: 1.25rem;
	display: grid;
	gap: var(--space-2xs);
}

/* Таблицы реквизитов, сроков и целей обработки. На ширине телефона таблица шире
   колонки текста — она прокручивается сама, а не раздвигает страницу. */
.doc table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	margin: var(--space-s) 0;
	border-collapse: collapse;
	font-size: var(--step--1);
	line-height: 1.45;
}

.doc th,
.doc td {
	padding: var(--space-2xs) var(--space-xs);
	border: 1px solid var(--border);
	text-align: left;
	vertical-align: top;
}

.doc th {
	background: var(--bg-alt);
	font-weight: 600;
}

.doc a {
	color: var(--accent);
}

.doc code {
	background: var(--bg-alt);
	padding: 0.1em 0.35em;
	border-radius: 0.3em;
	font-size: 0.9em;
}

/* Баннер «черновик» — крупнее и заметнее блок-цитаты: он адресован не читателю
   документа, а тому, кому мы дали ссылку до запуска. */
.draft-banner {
	margin-bottom: var(--space-m);
	padding: var(--space-s) var(--space-m);
	border: 2px solid var(--accent);
	border-radius: var(--radius-s);
	color: var(--accent);
	font-weight: 600;
	font-size: var(--step--1);
	line-height: 1.45;
}

/* Предупреждение «черновик» из исходного .md — не прячем, оно правдиво */
.doc blockquote {
	margin: var(--space-m) 0;
	padding: var(--space-s) var(--space-m);
	background: var(--accent-soft);
	border-radius: var(--radius-s);
	color: var(--accent);
	font-size: var(--step--1);
}

.doc blockquote p + p {
	margin-top: var(--space-2xs);
}

/* Плейсхолдеры, которые обязан заполнить человек: видны глазом, не теряются */
.todo {
	background: var(--accent-soft);
	color: var(--accent);
	padding: 0 0.25em;
	border-radius: 0.25em;
	font-weight: 500;
}

/* Активные входы в оба мессенджера и навигация без JavaScript. */
.messenger-pair{display:flex;flex-wrap:wrap;gap:var(--space-xs);align-items:center}
.messenger-pair .btn{min-width:13.75rem;flex:1;white-space:nowrap}
.messenger-icon{width:1.25rem;height:1.25rem;flex:none;object-fit:contain}
.btn--telegram{background:#176b9c;color:#fff}.btn--telegram:hover{background:#125781}
.btn--max{background:#6546c5;color:#fff}.btn--max:hover{background:#50349f}
.btn--telegram:focus-visible,.btn--max:focus-visible{outline:3px solid var(--leaf);outline-offset:4px}
.nav{flex-wrap:wrap}.nav__links{display:flex;flex-wrap:wrap;gap:.6rem 1rem}
.nav__links a{padding-block:.35rem}.messenger-pair--nav{margin-left:auto}
.messenger-pair--nav .btn{min-width:0;padding:.65rem 1rem;font-size:var(--step--1)}
.gift-intro{display:grid;gap:var(--space-l);align-items:center}.gift-intro__note{margin-block:var(--space-m);color:var(--ink-muted)}
.gift-intro__visual{overflow:hidden;border-radius:var(--radius-l);background:var(--surface);box-shadow:var(--shadow-card);text-decoration:none}
.gift-intro__visual img{width:100%;height:auto}.gift-intro__visual span{display:block;padding:var(--space-s);font-size:var(--step--1)}
.faq-help{text-align:center;margin-bottom:var(--space-m);color:var(--ink-muted)}.plan__price--info{font-size:var(--step-2)}
@media(min-width:62rem){.gift-intro{grid-template-columns:1.1fr 1fr}.nav__links{order:3;width:100%;justify-content:center}}
@media(max-width:61.99rem){.nav__links{order:3;width:100%;justify-content:center}.messenger-pair--nav .btn{font-size:.82rem;padding:.6rem .75rem}}
@media(max-width:35rem){.nav .logo{width:100%;justify-content:center}.messenger-pair--nav{width:100%;margin:0}.messenger-pair--nav .btn{flex:1}.messenger-pair{width:100%}.messenger-pair .btn{min-width:0;font-size:.9rem;padding:.85rem .7rem}.hero .messenger-pair .btn,.plan .messenger-pair .btn,.cta .messenger-pair .btn{flex-basis:100%}}

/* Реферальный раздел: условия видны сразу, обе CTA используют общую пару. */
.referral__grid .messenger-pair{margin-top:var(--space-m)}
.referral__terms{margin:var(--space-s) 0 var(--space-m);padding-left:1.3rem;color:var(--ink-muted);font-size:var(--step--1)}
.referral__terms li+li{margin-top:var(--space-xs)}
@media(max-width:35rem){.referral__grid .messenger-pair .btn{flex-basis:100%}}