/* Поддержать проект / Стать автором */

.nd-sup { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
body .nd-sup h1 { font-size: 20px; line-height: 26px; font-weight: 500; margin: 0; max-width: 620px; letter-spacing: 0; }
body .nd-sup h2 { font-size: 16px; line-height: 22px; font-weight: 500; margin: 0; letter-spacing: 0; }
body .nd-sup h3 { font-size: 14px; line-height: 20px; font-weight: 500; margin: 0; color: #000; letter-spacing: 0; }
.nd-sup p { font-size: 13px; line-height: 18px; color: var(--nd-text-2, #595959); margin: 0; }

/* Тёмные блоки: герой и финальный призыв, фон — борозды */
.nd-sup-dark {
	position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
	padding: 28px; border-radius: var(--nd-radius-card, 10px); background-color: var(--nd-dark, #16202B); color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.08'%3E%3Cpath d='M0 30q15-20 30 0t30 0' stroke-width='1.8'/%3E%3Cpath d='M0 50q15-20 30 0t30 0' stroke-width='1.2' stroke-dasharray='3 3'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='.08'%3E%3Ccircle cx='30' cy='18' r='1.5'/%3E%3Ccircle cx='15' cy='42' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
}
.nd-sup-dark h1, .nd-sup-dark h2 { color: #fff; }
.nd-sup-dark p { color: var(--nd-text-on-dark-2, #9FB3C8); font-size: 17px; line-height: 26px; max-width: 580px; }
.nd-sup-dark--cta p { font-size: 15px; line-height: 22px; }
.nd-sup-tag {
	display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px;
	background: #1B1F24; border: 1px solid #2A2F36; color: #9FB3C8; font-size: 13px; line-height: 18px; font-weight: 500;
}
.nd-sup-tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--nd-accent, #0B5DD7); }

.nd-sup-card { background: #fff; border-radius: var(--nd-radius-card, 10px); padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.nd-sup-head { display: flex; flex-direction: column; gap: 4px; }
.nd-sup-head--row { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 12px; }

/* Кнопки */
.nd-sup-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.nd-sup-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 24px;
	border-radius: 999px; border: 1px solid var(--nd-btn-line, #E0E0E0); background: #fff; color: #000;
	font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .15s, transform .1s;
}
.nd-sup-btn:hover { background: #F2F2F2; color: #000; }
.nd-sup-btn:active { transform: scale(.98); }
.nd-sup-btn--primary { background: var(--nd-accent, #0B5DD7); border-color: var(--nd-accent, #0B5DD7); color: #fff; }
.nd-sup-btn--primary:hover { background: var(--nd-accent-hover, #2664BF); border-color: var(--nd-accent-hover, #2664BF); color: #fff; }
.nd-sup-btn--ghost { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
.nd-sup-btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.nd-sup-btn--sm { height: 36px; padding: 0 16px; font-size: 13px; }
.nd-sup-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--nd-accent, #0B5DD7); text-decoration: none; }
.nd-sup-link:hover { text-decoration: underline; }

/* Бейджи и чипы */
.nd-sup-badge {
	display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px;
	background: #EDF3FC; color: var(--nd-accent, #0B5DD7); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap;
}
.nd-sup-chip {
	display: inline-flex; align-items: center; align-self: flex-start; padding: 4px 12px; border-radius: 999px;
	background: var(--nd-neutral, #F2F3F5); color: var(--nd-text-2, #595959); font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap;
}
.nd-sup-chip--accent { background: #EDF3FC; color: var(--nd-accent, #0B5DD7); }
.nd-sup-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.nd-sup-ico {
	flex: none; width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
	background: #EDF3FC; color: var(--nd-accent, #0B5DD7);
}

/* Плитки по три */
.nd-sup-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.nd-sup-tile { background: #fff; border-radius: var(--nd-radius-card, 10px); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.nd-sup-tile .nd-sup-ico { margin-bottom: 4px; }
.nd-sup-tile .nd-sup-btn { margin-top: auto; height: 42px; width: 100%; }
.nd-sup-tile p { flex: 1; }
.nd-sup-tile--lift { transition: transform .2s, box-shadow .2s; }
.nd-sup-tile--lift:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(22,32,43,.06); }

.nd-sup-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.nd-sup-benefit { display: flex; align-items: flex-start; gap: 12px; }
.nd-sup-benefit p { margin-top: 2px; }

/* Макет профиля */
.nd-sup-mock { background: #F9F9F9; border: 1px solid var(--nd-line-2, #E4E6EA); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.nd-sup-mock-top { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--nd-line-2, #E4E6EA); }
.nd-sup-ava { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--nd-dark, #16202B); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 500; }
.nd-sup-mock-who { flex: 1; min-width: 0; }
.nd-sup-mock-name { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 24px; font-weight: 500; }
.nd-sup-mock-meta { font-size: 13px; line-height: 18px; color: var(--nd-text-2, #595959); }
.nd-sup-mock-top .nd-sup-btn { pointer-events: none; }
.nd-sup-mock-label { font-size: 13px; font-weight: 500; color: var(--nd-text-2, #595959); }
.nd-sup-mock-ads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nd-sup-mock-ad { background: #fff; border: 1px solid var(--nd-line, #EDEDED); border-radius: 6px; padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nd-sup-mock-ad div { display: flex; flex-direction: column; min-width: 0; }
.nd-sup-mock-ad b { font-size: 14px; line-height: 20px; font-weight: 500; }
.nd-sup-mock-ad span:not(.nd-sup-badge) { font-size: 12px; line-height: 16px; color: var(--nd-text-3, #808080); }
.nd-sup-mock-ad em { font-style: normal; font-size: 14px; font-weight: 500; color: var(--nd-accent, #0B5DD7); white-space: nowrap; }

/* Цена */
.nd-sup-price { gap: 16px; }
.nd-sup-price-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--nd-line, #EDEDED); }
.nd-sup-price-sum { font-size: 20px; line-height: 26px; font-weight: 500; }
.nd-sup-price-sum span { font-size: 16px; font-weight: 400; color: var(--nd-text-2, #595959); }
.nd-sup-price-sub { font-size: 13px; color: var(--nd-text-3, #808080); }
.nd-sup-price p { font-size: 15px; line-height: 22px; }
.nd-sup-payoff { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 22px; font-weight: 500; }
.nd-sup-dot { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #EDF3FC; color: var(--nd-accent, #0B5DD7); display: flex; align-items: center; justify-content: center; }
.nd-sup-note { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 8px; background: #EDF3FC; color: var(--nd-accent, #0B5DD7); font-size: 13px; line-height: 18px; font-weight: 500; }
.nd-sup-note svg { flex: none; }

/* Шаги */
.nd-sup-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nd-sup-steps li { position: relative; display: flex; gap: 14px; padding-bottom: 20px; }
.nd-sup-steps li:last-child { padding-bottom: 0; }
.nd-sup-steps li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 36px; bottom: 4px; width: 2px; background: var(--nd-line, #EDEDED); }
.nd-sup-step-num { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--nd-accent, #0B5DD7); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; }
.nd-sup-steps div { display: flex; flex-direction: column; padding-top: 4px; }
.nd-sup-steps b { font-size: 15px; line-height: 22px; font-weight: 500; }
.nd-sup-steps div span { font-size: 13px; line-height: 18px; color: var(--nd-text-2, #595959); }

/* FAQ */
.nd-sup-faq details { border-top: 1px solid var(--nd-line, #EDEDED); padding: 12px 0; }
.nd-sup-faq details:first-child { border-top: 0; padding-top: 0; }
.nd-sup-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 15px; line-height: 22px; font-weight: 500; }
.nd-sup-faq summary::-webkit-details-marker { display: none; }
.nd-sup-faq summary svg { flex: none; color: var(--nd-text-2, #595959); transition: transform .2s; }
.nd-sup-faq details[open] summary svg { transform: rotate(180deg); color: var(--nd-accent, #0B5DD7); }
.nd-sup-faq details p { padding-top: 8px; }

/* Карточка предложения: в правой колонке и дублем в main при скрытой правой */
.nd-sup-offer { background: #fff; border-radius: var(--nd-radius-card, 10px); padding: 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 4px 16px rgba(22,32,43,.06); }
.nd-sup-offer .nd-sup-badge { align-self: flex-start; padding: 4px 12px; }
.nd-sup-offer-price { font-size: 20px; line-height: 26px; font-weight: 500; }
.nd-sup-offer-price span { font-size: 14px; font-weight: 400; color: var(--nd-text-2, #595959); }
.nd-sup-offer-sub { font-size: 12px; line-height: 16px; color: var(--nd-text-3, #808080); margin-top: -10px; }
.nd-sup-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 18px; }
.nd-sup-checks li { display: flex; align-items: flex-start; gap: 8px; }
.nd-sup-checks svg { flex: none; color: var(--nd-accent, #0B5DD7); margin-top: 1px; }
.nd-sup-offer .nd-sup-btn { width: 100%; }
.nd-sup-offer--inline { display: none; }

@media (max-width: 1200px) {
	.nd-sup-offer--inline { display: flex; }
}
@media (max-width: 700px) {
	.nd-sup-dark, .nd-sup-card { padding: 20px 16px; }
	body .nd-sup h1 { font-size: 18px; line-height: 24px; }
	.nd-sup-dark p { font-size: 15px; line-height: 22px; }
	.nd-sup-grid3, .nd-sup-benefits, .nd-sup-mock-ads { grid-template-columns: 1fr; }
	.nd-sup-btn { flex: 1 1 auto; white-space: normal; text-align: center; }
	.nd-sup-mock-top { flex-wrap: wrap; }
	.nd-sup-mock-top .nd-sup-btn { flex: 0 0 auto; }
}