/* Статические страницы площадки (тарифы, услуги, помощь, сопровождение,
   партнёрам, новости) — классы sp-*, палитра --hm-* из chrome.css. */

.sp { font-family: 'Gilroy', 'Inter Tight', system-ui, sans-serif; -webkit-font-smoothing: antialiased; color: var(--hm-ink); }
.sp * { box-sizing: border-box; }
.sp a { text-decoration: none; }

.sp-container { max-width: 1240px; margin: 0 auto; width: 100%; padding: 0 24px; }

/* Шапка страницы */
.sp-hero { background: var(--hm-ink); color: #FFFFFF; padding: 56px 0 52px; position: relative; overflow: hidden; }
.sp-hero .dots { position: absolute; inset: 0; background-image: radial-gradient(#FFFFFF 0.8px, transparent 0.8px); background-size: 22px 22px; opacity: .07; }
.sp-hero .sp-container { position: relative; }
.sp-hero .crumb { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--hm-mute-2); }
.sp-hero .crumb a { color: var(--hm-mute-2); }
.sp-hero .crumb a:hover { color: var(--hm-yellow); }
.sp-hero h1 { margin: 14px 0 0; font-family: 'Xolonium', 'Gilroy', 'Inter Tight', sans-serif; font-size: clamp(26px, 3.4vw, 40px); font-weight: 700; letter-spacing: .01em; line-height: 1.16; max-width: 860px; }
.sp-hero h1 .accent { color: var(--hm-yellow); }
.sp-hero .lead { margin: 14px 0 0; font-size: 16.5px; line-height: 1.6; color: #E3E3DE; max-width: 680px; }

/* Секции */
.sp-section { padding-top: 56px; }
.sp-section:last-of-type { padding-bottom: 72px; }
.sp-section > .sp-container > h2, .sp-h2 { margin: 0 0 8px; font-family: 'Xolonium', 'Gilroy', 'Inter Tight', sans-serif; font-size: 24px; font-weight: 700; letter-spacing: .01em; }
.sp-sub { margin: 0 0 24px; font-size: 14.5px; color: var(--hm-mute); }

/* Сетки и карточки */
.sp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.sp-card { background: #FFFFFF; border: 1px solid var(--hm-line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.sp-card h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.sp-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--hm-soft); }
.sp-card .tag { align-self: flex-start; display: inline-flex; padding: 4px 10px; border-radius: 999px; background: var(--hm-fill); color: var(--hm-soft); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; }
.sp-card .tag.gold { background: #FFFDF2; border: 1px solid #F0E4AE; color: var(--hm-gold); }
.sp-card ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.65; color: var(--hm-soft); }
.sp-card .act { margin-top: auto; padding-top: 12px; }

/* Тёмная акцент-карточка */
.sp-card.dark { background: var(--hm-ink); border-color: var(--hm-ink); color: #FFFFFF; position: relative; overflow: hidden; }
.sp-card.dark h3 { color: #FFFFFF; }
.sp-card.dark p, .sp-card.dark ul { color: var(--hm-mute-2); }
.sp-card.dark .tag { background: rgba(248, 199, 0, .15); color: var(--hm-yellow); }

/* Кнопки */
.sp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 10px; background: var(--hm-yellow); color: var(--hm-ink); font-size: 14px; font-weight: 700; transition: transform .15s; border: none; cursor: pointer; }
.sp-btn:hover { transform: translateY(-1px); }
.sp-btn.ghost { background: var(--hm-fill); color: var(--hm-soft); }
.sp-btn.ghost:hover { color: var(--hm-ink); }

/* Шаги «как это работает» */
.sp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; counter-reset: step; }
.sp-step { background: #FFFFFF; border: 1px solid var(--hm-line); border-radius: 16px; padding: 22px; counter-increment: step; }
.sp-step::before { content: counter(step, decimal-leading-zero); display: block; font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; color: var(--hm-gold); margin-bottom: 12px; }
.sp-step b { display: block; font-size: 15px; font-weight: 700; line-height: 1.35; }
.sp-step p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--hm-soft); }

/* Жёлтая заметка */
.sp-note { display: flex; gap: 12px; align-items: flex-start; background: #FFFDF2; border: 1px solid #F0E4AE; border-radius: 12px; padding: 14px 18px; font-size: 13.5px; line-height: 1.55; color: var(--hm-gold); }

/* FAQ-аккордеон */
.sp-faq { display: flex; flex-direction: column; gap: 12px; }
.sp-faq details { background: #FFFFFF; border: 1px solid var(--hm-line); border-radius: 14px; overflow: hidden; transition: border-color .15s; }
.sp-faq details[open] { border-color: var(--hm-line-dark); }
.sp-faq summary { list-style: none; cursor: pointer; padding: 17px 52px 17px 22px; font-size: 15px; font-weight: 600; position: relative; }
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 8px; background: var(--hm-fill); color: var(--hm-soft); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 500; transition: transform .2s, background .15s; }
.sp-faq details[open] summary::after { content: '–'; background: var(--hm-yellow); color: var(--hm-ink); }
.sp-faq .answer { padding: 0 22px 20px; font-size: 14px; line-height: 1.65; color: var(--hm-soft); }
.sp-faq .answer p { margin: 0 0 10px; }
.sp-faq .answer p:last-child { margin-bottom: 0; }
.sp-faq .answer ol, .sp-faq .answer ul { margin: 0 0 10px; padding-left: 20px; }

/* База знаний — список PDF */
.sp-docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.sp-docs-col { background: #FFFFFF; border: 1px solid var(--hm-line); border-radius: 16px; padding: 22px; }
.sp-docs-col h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.sp-docs-col .muted { margin: 0 0 14px; font-size: 13px; color: var(--hm-mute); }
.sp-docs-col a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin: 0 -10px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--hm-soft); transition: background .15s, color .15s; }
.sp-docs-col a:hover { background: var(--hm-fill); color: var(--hm-ink); }
.sp-docs-col a .pdf { flex: none; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: #C0392B; border: 1px solid #F2C9C4; border-radius: 5px; padding: 2px 5px; background: #FDF0EF; }

/* Таблица-список условий (тарифы) */
.sp-terms { display: flex; flex-direction: column; }
.sp-terms .row { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0; border-top: 1px solid var(--hm-line-2); font-size: 14px; line-height: 1.5; }
.sp-terms .row:first-child { border-top: 0; padding-top: 0; }
.sp-terms .row span { color: var(--hm-soft); }
.sp-terms .row b { flex: none; font-weight: 700; text-align: right; }

@media (max-width: 860px) {
    .sp-hero { padding: 36px 0 34px; }
    .sp-section { padding-top: 40px; }
    .sp-section:last-of-type { padding-bottom: 52px; }
    .sp-terms .row { flex-direction: column; gap: 4px; }
    .sp-terms .row b { text-align: left; }
}