/* Страница «Как работает MVIS Auth» — поверх app.css: фон, кнопки и знак оттуда. */
.help {
    width: 100%;
    max-width: 36rem;
    margin: 0 auto;
    padding: max(3.5rem, calc(env(safe-area-inset-top) + 3rem)) 1rem max(1.5rem, env(safe-area-inset-bottom));
}

/* Страница прокручивается — ссылка уходит вместе с текстом, а не висит поверх него. */
.back-to-site { position: absolute; }

.help__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
    text-align: center;
    animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.help h2 {
    margin: 2rem 0 0.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-accent);
}

.help p,
.help li {
    font-size: 0.925rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.help p { margin: 0.5rem 0; }

.help strong { color: var(--color-text); }

.help ul,
.help ol {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
}

.help li + li { margin-top: 0.375rem; }

.help li::marker { color: var(--color-accent); }

/* Обводка акцентом: главное на странице, его нельзя пропустить. */
.help .note {
    margin: 1.5rem 0;
    padding: 0.875rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
    border-radius: 1.25rem;
    background-color: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.help .note p {
    margin: 0;
    color: var(--color-text);
}

.help__back {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}

.help__back .btn { max-width: 20rem; }

@media (prefers-reduced-motion: reduce) {
    .help__head { animation: none; }
}