/*
 * Оформление sluh.aicdn.ru.
 *
 * Аудитория сайта — те же люди, что и у приложения: чаще всего пожилые, часто
 * с неважным зрением. Отсюда всё остальное: базовый кегль 19px вместо
 * привычных 16, межстрочный интервал 1.65, ограничение строки 62 символами,
 * контраст выше минимально допустимого. Никаких анимаций появления по
 * прокрутке — они мешают тем, кто читает медленно.
 *
 * Ни одного внешнего файла: шрифты системные, скриптов нет вовсе. Страница
 * должна открываться на старом телефоне через слабый мобильный интернет.
 */

:root {
    color-scheme: light dark;

    --bg: #fbf8fd;
    --surface: #ffffff;
    --surface-quiet: #f2eef6;
    --text: #1c1b1f;
    --text-quiet: #46464f;
    --accent: #00696d;
    --accent-text: #ffffff;
    --warn-bg: #ffdad6;
    --warn-text: #410002;
    --line: #dcd8e0;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #131316;
        --surface: #1d1c20;
        --surface-quiet: #26252a;
        --text: #e5e1e6;
        --text-quiet: #c8c4cf;
        --accent: #4fd8dd;
        --accent-text: #00363a;
        --warn-bg: #5a1a17;
        --warn-text: #ffdad6;
        --line: #35343a;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 19px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-text-size-adjust: 100%;
}

.wrap {
    max-width: 62rem;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- шапка --- */

header.top {
    background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
    border-bottom: 1px solid var(--line);
    padding: 48px 0 40px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}

.brand img {
    width: 84px;
    height: 84px;
    border-radius: 20px;
}

h1 {
    font-size: 2.1rem;
    line-height: 1.2;
    margin: 0;
}

.lead {
    font-size: 1.25rem;
    max-width: 38ch;
    color: var(--text-quiet);
    margin: 0 0 28px;
}

/* --- кнопки --- */

.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.btn {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 999px;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    /* 56px в высоту: столько нужно, чтобы попасть пальцем без прицеливания. */
    min-height: 56px;
    line-height: 26px;
}

.btn-main {
    background: var(--accent);
    color: var(--accent-text);
}

.btn-main:hover { filter: brightness(1.08); }

.btn-off {
    background: var(--surface-quiet);
    color: var(--text-quiet);
    border: 1px solid var(--line);
    cursor: not-allowed;
}

.btn-note {
    font-size: 0.95rem;
    color: var(--text-quiet);
    margin: 12px 0 0;
}

/* --- разделы --- */

section { padding: 44px 0; border-top: 1px solid var(--line); }
section:first-of-type { border-top: none; }

h2 {
    font-size: 1.6rem;
    line-height: 1.25;
    margin: 0 0 18px;
}

h3 {
    font-size: 1.15rem;
    margin: 0 0 8px;
}

p, li { max-width: 62ch; }
p { margin: 0 0 18px; }

ul { padding-left: 1.2em; }
li { margin-bottom: 10px; }

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 18px;
    margin-top: 26px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 22px;
}

.card p { margin: 0; color: var(--text-quiet); font-size: 1rem; }

/* --- шаги --- */

.steps {
    counter-reset: step;
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
}

.steps li {
    counter-increment: step;
    position: relative;
    padding-left: 62px;
    margin-bottom: 26px;
    max-width: 60ch;
}

.steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: -2px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-text);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- скриншоты --- */

.shots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 26px;
    margin-top: 26px;
}

.shot img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: var(--surface);
}

.shot p {
    margin: 10px 0 0;
    font-size: 0.98rem;
    color: var(--text-quiet);
}

/* --- предупреждение --- */

.warn {
    background: var(--warn-bg);
    color: var(--warn-text);
    border-radius: 18px;
    padding: 24px 26px;
    margin-top: 8px;
}

.warn h2, .warn h3 { color: inherit; }
.warn p, .warn li { color: inherit; }

/* --- подвал --- */

footer {
    border-top: 1px solid var(--line);
    padding: 34px 0 60px;
    color: var(--text-quiet);
    font-size: 0.98rem;
}

footer a { color: inherit; }

@media (max-width: 40rem) {
    body { font-size: 18px; }
    h1 { font-size: 1.7rem; }
    h2 { font-size: 1.35rem; }
    .brand img { width: 64px; height: 64px; }
    .btn { width: 100%; text-align: center; }
}