/* Блонди & Брю — стиль страниц-статей в духе главной страницы (светлая тема) */
.breadcrumb-strip { background: #f7f5f0; border-bottom: 1px solid #eee; padding-top: 0; }

.breadcrumb-strip .container { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: #888; padding: 14px 1.5rem; max-width: 1200px; margin: 0 auto; }
.breadcrumb-strip a { color: #888; text-decoration: none; }
.breadcrumb-strip a:hover { color: #8a4af3; }
.breadcrumb-strip span.sep { color: #ccc; }

.article-hero { padding: 56px 0; text-align: center; }
.article-hero.alt { background: #faf7ef; }
.article-hero h1 { font-size: clamp(26px, 4vw, 38px); font-weight: 700; color: #222; margin: 0 0 18px; line-height: 1.25; }
.article-lead { color: #666; font-size: 17px; line-height: 1.7; max-width: 700px; margin: 0 auto 32px; }
.article-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.article-btn-outline { display: inline-block; border: 2px solid #1a1a1a; color: #1a1a1a; padding: 13px 30px; border-radius: 10px; font-weight: 600; text-decoration: none; transition: all .2s; }
.article-btn-outline:hover { background: #1a1a1a; color: #fff; }
.callback-btn.article-cta { display: inline-block; text-decoration: none; font-weight: 600; }

.article-content { padding: 48px 0; }
.article-content .container { max-width: 800px; margin: 0 auto; padding: 0 1.5rem; }
.article-content h2 { font-size: 28px; color: #222; margin: 0 0 18px; }
.article-content h3 { font-size: 19px; color: #222; margin: 28px 0 10px; }
.article-content p { color: #555; line-height: 1.75; margin-bottom: 14px; font-size: 16px; }

.article-checklist { list-style: none; margin: 24px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.article-checklist li { background: #f7f5f0; border-radius: 10px; padding: 16px 18px 16px 44px; position: relative; color: #444; font-size: 15px; }
.article-checklist li::before { content: '✓'; position: absolute; left: 16px; color: #8a4af3; font-weight: 700; }

.article-price-list { list-style: none; margin: 24px 0; padding: 0; border: 1px solid #eee; border-radius: 12px; overflow: hidden; }
.article-price-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #eee; }
.article-price-list li:last-child { border-bottom: none; }
.article-price-list .service-name { font-weight: 500; color: #333; }
.article-price-list .service-price { font-weight: 700; color: #8a4af3; white-space: nowrap; }
.article-price-note { color: #888; font-size: 13px; margin-top: 12px; }

.article-steps { list-style: none; margin: 24px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.article-steps li { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 20px; }
.article-steps .step-num { font-size: 28px; font-weight: 700; color: #8a4af3; opacity: .4; display: block; margin-bottom: 8px; }
.article-steps strong { color: #222; display: block; margin-bottom: 4px; }
.article-steps span { color: #666; font-size: 14px; }

.article-stats { list-style: none; margin: 28px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; text-align: center; }
.article-stats li { background: #faf7ef; border-radius: 10px; padding: 20px 12px; }
.article-stats strong { display: block; font-size: 26px; color: #8a4af3; margin-bottom: 4px; }
.article-stats span { color: #666; font-size: 13px; }

.article-table-wrap { overflow-x: auto; margin: 24px 0; }
.article-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.article-table th, .article-table td { padding: 12px 16px; border-bottom: 1px solid #eee; text-align: left; font-size: 14px; }
.article-table th { background: #f7f5f0; color: #333; font-weight: 600; }
.article-table td { color: #555; }
.article-table tr.highlight td { background: #faf5ff; font-weight: 600; color: #333; }

@media (max-width: 768px) {
  .article-hero { padding: 40px 0; }
  .article-content { padding: 32px 0; }
  .article-checklist { grid-template-columns: 1fr; }
}