@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; }
body { font-family: 'Onest', sans-serif; margin: 0; background: var(--gray-0); color: var(--gray-9); }
img { max-width: 100%; display: block; }
a.btn { text-decoration: none; }

.container { max-width: 760px; margin: 0 auto; padding: 0 var(--spacing-xl); }
.container-wide { max-width: 1180px; margin: 0 auto; padding: 0 var(--spacing-xl); }
.eyebrow { font-size: 13px; font-weight: 600; color: var(--indigo-5); margin: 0 0 var(--spacing-sm); }

/* ── nav — то же лого и кнопка, что и на лендинге, но сразу в "остеклённом" виде, без прозрачного состояния над фото ── */
.doc-nav {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border); padding: var(--spacing-md) 0;
}
.doc-nav .container { display: flex; align-items: center; justify-content: space-between; }
.logo-img { height: 22px; width: auto; }

/* ── шапка страницы — тот же приём, что в остальных секциях: эйбро + крупный заголовок ── */
.doc-header { padding: 64px 0 var(--spacing-xxl); text-align: center; }
.doc-header .eyebrow { justify-content: center; display: flex; }
.doc-header h1 {
  font-family: 'Onest', sans-serif; font-weight: 700; letter-spacing: -0.01em;
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem); line-height: 1.2; margin: 0 auto var(--spacing-sm); max-width: 46ch; white-space: nowrap;
}
@media (max-width: 480px) { .doc-header h1 { white-space: normal; } }
.doc-header .doc-subtitle { color: var(--color-text-muted); font-size: 16px; line-height: 1.5; max-width: 52ch; margin: 0 auto; }
.doc-header .doc-updated { color: var(--color-text-muted); font-size: 13px; margin: var(--spacing-sm) 0 0; }

/* ── карточка с содержанием — как остальные белые карточки на лендинге ── */
.doc-card {
  background: var(--white); border-radius: var(--radius-l); box-shadow: var(--shadow-s-down);
  padding: 48px; margin-bottom: 80px;
}
@media (max-width: 640px) { .doc-card { padding: var(--spacing-xl) var(--spacing-lg); } }

.doc-card h2 {
  font-family: 'Onest', sans-serif; font-weight: 600; font-size: 20px; color: var(--gray-9);
  margin: 40px 0 var(--spacing-md);
}
.doc-card h2:first-child { margin-top: 0; }
.doc-card p { font-size: 16px; line-height: 1.65; color: var(--gray-9); margin: 0 0 var(--spacing-md); }
.doc-card ul { margin: 0 0 var(--spacing-md); padding-left: 1.3em; }
.doc-card li { font-size: 16px; line-height: 1.65; margin-bottom: 6px; }
.doc-card a { color: var(--indigo-5); }
.doc-card strong { font-weight: 600; }
.doc-card .doc-lead { font-size: 17px; color: var(--gray-9); }
.doc-card .doc-subtitle-inline { color: var(--color-text-muted); font-size: 15px; margin: -8px 0 var(--spacing-lg); }
.doc-card .requisites p { margin: 0 0 4px; }

/* блок-акцент, как InfoBlock в реальном гиде приложения */
.doc-note {
  display: flex; gap: var(--spacing-sm); align-items: flex-start; margin: var(--spacing-md) 0 0;
  background: var(--indigo-0); border-radius: var(--radius-m); padding: var(--spacing-md);
}
.doc-note::before { content: '✦'; color: var(--indigo-5); flex-shrink: 0; line-height: 1.5; }
.doc-note p { margin: 0; font-size: 14px; color: var(--indigo-6); }

/* ── аккордеон FAQ — те же карточки, что у остальных плашек лендинга, в 2 колонки на широком экране ── */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); align-items: start; padding-bottom: 80px; }
@media (max-width: 800px) { .faq-grid { grid-template-columns: 1fr; } }

.qa { background: var(--white); border-radius: var(--radius-l); box-shadow: var(--shadow-s-down); overflow: hidden; }
.qa summary {
  list-style: none; cursor: pointer; padding: var(--spacing-lg); font-size: 17px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); color: var(--gray-9);
}
.qa summary::-webkit-details-marker { display: none; }
.qa-chevron { color: var(--indigo-5); flex-shrink: 0; transition: transform .2s ease; }
.qa[open] .qa-chevron { transform: rotate(180deg); }
.qa-body { padding: 0 var(--spacing-lg) var(--spacing-lg); }
.qa-body p { font-size: 15px; line-height: 1.6; color: var(--gray-9); margin: 0 0 var(--spacing-sm); }
.qa-body ul { margin: 0 0 var(--spacing-sm); padding-left: 1.2em; }
.qa-body li { font-size: 15px; line-height: 1.6; margin-bottom: 4px; }

/* ── футер — минимальный, как в начале проекта, но на токенах бренда ── */
.doc-footer { border-top: 1px solid var(--color-border); padding: var(--spacing-xl) 0; background: var(--white); }
.doc-footer .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--spacing-sm); }
.doc-footer p { font-size: 13px; color: var(--color-text-muted); margin: 0; }
.doc-footer a { color: var(--color-text-muted); font-size: 13px; text-decoration: none; }
.doc-footer a:hover { color: var(--gray-9); }