/* HelpExcel — блоки выжимка-ответ (TL;DR) + вопрос-ответ (FAQ) для Этапа 2 SEO.
   Самодостаточные, не зависят от Tilda-сетки. Вставляются после </header>. */

.hx-seo {
  box-sizing: border-box;
  max-width: 900px;
  margin: 28px auto;
  padding: 0 20px;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  color: #2c2c2c;
}
.hx-seo * { box-sizing: border-box; }

/* Выжимка-ответ */
.hx-seo__tldr {
  background: #f5f8ff;
  border: 1px solid #e2ebff;
  border-left: 4px solid #2a6df4;
  border-radius: 10px;
  padding: 18px 22px;
  font-size: 17px;
  line-height: 1.6;
}
.hx-seo__tldr p { margin: 0; }
.hx-seo__tldr strong { color: #1b1b1b; }

/* Вопрос-ответ */
.hx-seo__faq { margin-top: 26px; }
.hx-seo__faq h2 {
  font-size: 22px;
  line-height: 1.3;
  margin: 0 0 12px;
  color: #1b1b1b;
}
.hx-seo__faq details {
  border-bottom: 1px solid #e6e6e6;
  padding: 14px 0;
}
.hx-seo__faq summary {
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
  color: #1b1b1b;
  list-style: none;
  position: relative;
  padding-right: 28px;
}
.hx-seo__faq summary::-webkit-details-marker { display: none; }
.hx-seo__faq summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: -2px;
  font-size: 22px;
  font-weight: 400;
  color: #2a6df4;
  transition: transform .2s;
}
.hx-seo__faq details[open] summary::after { content: '\2013'; }
.hx-seo__faq details > div {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.6;
  color: #444;
}

@media (max-width: 640px) {
  .hx-seo { margin: 20px auto; }
  .hx-seo__tldr { font-size: 16px; padding: 15px 17px; }
  .hx-seo__faq h2 { font-size: 20px; }
}

@media (prefers-color-scheme: dark) {
  .hx-seo { color: #d8d8d8; }
  .hx-seo__tldr { background: #16233a; border-color: #24406b; border-left-color: #4a86ff; }
  .hx-seo__tldr strong, .hx-seo__faq h2, .hx-seo__faq summary { color: #f0f0f0; }
  .hx-seo__faq details { border-bottom-color: #333; }
  .hx-seo__faq details > div { color: #bdbdbd; }
}