/* Вопросы и ответы, гайды, документы. */

.faq, .guides, .docs { display: contents; }
.faq__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--page-gap); align-items: start; }
.faq__main { display: flex; flex-direction: column; gap: var(--page-gap); min-width: 0; }
.faq__list { padding: var(--space-2) 28px; }
.faq .faq__answer.article-body { gap: var(--space-3); font: 400 15px/24px var(--font-primary); color: var(--text-secondary); }
.faq__side { position: sticky; top: var(--page-gap); display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); }
.faq__side-title { font: 700 22px/28px var(--font-primary); }
.faq__side-text { margin-bottom: 6px; font: var(--font-body); color: var(--text-secondary); }
.faq__phone { font: 600 24px/30px var(--font-primary); color: var(--text-primary); }
.faq__phone:hover { color: var(--brand-primary); }
.faq__chat { margin-top: 10px; }
@media (max-width: 1023px) { .faq__grid { grid-template-columns: minmax(0, 1fr); } .faq__side { position: static; } }
@media (max-width: 759px) { .faq__grid, .faq__main { gap: var(--space-2); } .faq__list { padding: var(--space-2) var(--space-4); } .faq__side { padding: 18px var(--space-4); } }

.guides__box { padding: 22px 30px 30px; }
.guides__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.guides__card { display: flex; flex-direction: column; gap: var(--space-2); height: 100%; padding: 20px; border-radius: var(--radius-xl); background: var(--surface-secondary); color: var(--text-primary); transition: background var(--dur-fast) var(--ease); }
.guides__card:hover { background: var(--surface-tertiary); color: var(--text-primary); }
.guides__card-title { font: 500 20px/26px var(--font-primary); }
.guides__card-text { font: var(--font-small); color: var(--text-secondary); }
.guides__card-more { display: flex; align-items: center; gap: 4px; margin-top: auto; padding-top: var(--space-2); font: 400 14px/20px var(--font-primary); color: var(--text-secondary); }
.guides__article { display: flex; flex-direction: column; gap: var(--space-5); padding: 32px 40px 40px; }
.guides__head { display: flex; flex-direction: column; gap: var(--space-2); max-width: 760px; }
.guides__title { font: var(--font-h1); letter-spacing: var(--tracking-h1); }
.guides__date { font: var(--font-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--text-tertiary); }
.guides__lead { font: var(--font-body); color: var(--text-secondary); }
.guides__cover { width: 100%; max-width: 760px; border-radius: 14px; }
.guides__cta { align-self: flex-start; }
@media (max-width: 1023px) { .guides__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) { .guides__box, .guides__article { padding: 18px var(--space-4); } .guides__title { font-size: 26px; line-height: 31px; } }
@media (max-width: 599px) { .guides__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); } }

.docs__grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--page-gap); align-items: start; }
.docs__nav { position: sticky; top: var(--page-gap); display: flex; flex-direction: column; gap: 2px; padding: 10px; }
.docs__link { display: flex; align-items: center; min-height: 48px; padding: 10px 14px; border-radius: var(--radius-lg); font: 400 15px/20px var(--font-primary); color: var(--text-primary); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.docs__link:hover { background: var(--surface-secondary); }
.docs__link[aria-current='page'] { background: var(--color-ink); color: var(--color-white); }
.docs__body { padding: 32px 40px 40px; }
.docs__title { margin-bottom: 4px; font: var(--font-h1); letter-spacing: var(--tracking-h1); }
.docs__section { max-width: 760px; margin-top: 28px; }
.docs__h2 { margin-bottom: var(--space-2); font: 500 20px/26px var(--font-primary); }
.docs__h2 span { color: var(--text-tertiary); }
.docs__text { font: 400 16px/26px var(--font-primary); }
@media (max-width: 1023px) {
  .docs__grid { grid-template-columns: minmax(0, 1fr); }
  .docs__nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .docs__link { flex: none; white-space: nowrap; }
}
@media (max-width: 759px) { .docs__grid { gap: var(--space-2); } .docs__body { padding: 18px var(--space-4); } .docs__title { font-size: 26px; line-height: 31px; } }