/* ============================================================
   EDU Расписание — лендинг (landing.html).
   Язык оформления общий с приложением: Golos Text, янтарный акцент,
   белое полотно на сером фоне. Все значения — из tokens.css.
   ============================================================ */

/* Ширину полотна лендинг больше не задаёт: секции идут во всю ширину окна,
   а содержимое внутри ограничено --text-width, чтобы строки оставались
   читаемыми на широком мониторе. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    /* уже --page-min — горизонтальная прокрутка, вёрстка не перестраивается */
    min-width: var(--page-min);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

/* Секции идут во всю ширину окна, содержимое — по центру */
.site-header, .hero, .section, .free-band, .site-footer {
    width: 100%;
    background: var(--bg);
}

.container {
    width: 100%;
    max-width: var(--text-width);
    margin: 0 auto;
    padding: 0 var(--pad);
}

.container-narrow { max-width: 800px; }

h1, h2, h3 { line-height: 1.15; color: var(--ink); }

h2 {
    font-size: 38px;
    font-weight: 700;
    text-align: center;
    letter-spacing: -0.03em;
}

.section { padding: 76px 0 84px; border-top: 1px solid var(--line-soft); }
.section-alt { background: var(--bg); }

.section-sub {
    max-width: 620px;
    margin: 16px auto 0;
    text-align: center;
    color: var(--muted);
    font-size: 16px;
}

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 22px;
    border-radius: 22px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    border: 1px solid #d8d8d4;
    background: var(--bg);
    color: var(--ink);
    transition: background .18s, color .18s, border-color .18s;
    cursor: pointer;
    white-space: nowrap;
}
.btn:hover { background: var(--bg-soft); }

.btn-lg { height: 52px; padding: 0 30px; font-size: 16px; border-radius: 26px; }

.btn-primary {
    background: var(--amber);
    border-color: transparent;
    color: var(--ink);
    font-weight: 600;
}
.btn-primary:hover { background: var(--amber-hover); }

.btn-ghost {
    color: var(--ink);
    border-color: #d8d8d4;
    background: transparent;
}
.btn-ghost:hover { background: var(--bg-soft); }

.btn-light {
    background: var(--amber);
    border-color: transparent;
    color: var(--ink);
    font-weight: 600;
}
.btn-light:hover { background: var(--amber-hover); }

/* ---------- Шапка ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--line-soft);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 76px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.logo-mark { width: 28px; height: 28px; flex: none; color: var(--amber-ink); }

.logo-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.main-nav {
    display: flex;
    gap: 24px;
    margin-left: 8px;
}

.main-nav a {
    color: var(--ink);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    padding: 6px 2px;
    border-bottom: 2px solid transparent;
    transition: border-color .18s;
}
.main-nav a:hover { border-color: var(--amber); }

.header-actions {
    margin-left: auto;
    display: flex;
    gap: 10px;
    align-items: center;
}

.nav-toggle {
    display: none;
    margin-left: auto;
    background: none;
    border: none;
    color: var(--ink);
    padding: 8px;
    border-radius: var(--r-sm);
    cursor: pointer;
}
.nav-toggle:hover { background: var(--bg-soft); }

/* ---------- Первый экран ---------- */

.hero { overflow: hidden; }

.hero-inner {
    display: grid;
    grid-template-columns: 1fr 440px;
    gap: 56px;
    align-items: center;
    padding-top: 74px;
    padding-bottom: 84px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--amber-soft);
    color: var(--amber-ink);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 15px;
    border: none;
}

.hero h1 {
    margin-top: 26px;
    font-size: 54px;
    font-weight: 700;
    letter-spacing: -0.035em;
}

.hero-sub {
    margin-top: 24px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--muted);
    max-width: 520px;
}

.hero-cta {
    margin-top: 34px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-points {
    margin-top: 32px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    font-size: 14px;
    color: var(--muted);
}

.hero-points li { position: relative; padding-left: 0; }
.hero-points li::before { content: none; }

/* --- мини-сетка расписания («скриншот продукта») --- */

.hero-visual { position: relative; }

.tt-window {
    background: var(--bg);
    border-radius: 18px;
    box-shadow: none;
    border: 1px solid var(--line);
    overflow: hidden;
    transform: none;
}

.tt-titlebar {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 44px;
    padding: 0 18px;
    background: var(--bg);
    border-bottom: 1px solid var(--line-soft);
}

.tt-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--line); }
.tt-dot-r, .tt-dot-y, .tt-dot-g { background: var(--line); }

.tt-title {
    margin-left: 8px;
    font-size: 12.5px;
    color: var(--muted);
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tt-grid {
    display: grid;
    grid-template-columns: 26px repeat(3, 1fr);
    gap: 6px;
    padding: 18px;
}

.tt-cell {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tt-head {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    min-height: 22px;
}

.tt-num {
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
    background: none;
    border-radius: 0;
}

/* Урок в мини-сетке: ровные плашки, выделенные — тёплым (см. рефы) */
.lesson {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 400;
    padding: 0 6px;
    border-radius: var(--r-sm);
    border: none;
    background: var(--bg-soft);
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.l-blue, .l-green, .l-teal { background: var(--bg-soft); color: var(--ink); }
.l-orange, .l-purple, .l-red { background: #faf6ec; color: var(--ink); }

.tt-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 18px;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--muted);
    background: var(--bg);
    border-top: 1px solid var(--line-soft);
}

.hero-chip {
    position: absolute;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
}

.hero-chip-1 { top: -18px; right: 6px; color: var(--amber-ink); }
.hero-chip-2 { bottom: -16px; left: 10px; color: var(--ink); }

/* ---------- Возможности ---------- */

.features-grid {
    margin-top: 52px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.feature-card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 24px;
    box-shadow: none;
    transition: border-color .2s;
}

.feature-card:hover { border-color: #d8d8d4; }

.feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--amber-soft);
    color: var(--amber-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.feature-icon svg { width: 24px; height: 24px; }

.feature-card h3 { font-size: 17px; font-weight: 600; margin-bottom: 10px; }

.feature-card p { font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ---------- Как начать ---------- */

.steps {
    margin-top: 52px;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    counter-reset: step;
}

.step-card {
    position: relative;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 26px;
    transition: border-color .2s;
}

.step-card:hover { border-color: #d8d8d4; }

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    background: var(--amber);
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 18px;
    box-shadow: none;
}

.step-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 10px; }

.step-card p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }

.steps-cta { margin-top: 40px; text-align: center; }

/* ---------- Бесплатно ---------- */

/* Тёмная плашка внутри полотна, а не полоса во всю ширину (см. рефы) */
.free-band { padding: 0; border-top: 1px solid var(--line-soft); }

.free-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    /* Боковых margin здесь быть не должно: .free-inner — это .container,
       у него уже ширина 100% и боковые padding. Вместе они давали
       переполнение на 2×--pad и горизонтальную прокрутку на любом экране */
    margin: 76px 0;
    padding: 52px 48px;
    border-radius: 20px;
    background: var(--ink);
}

.free-copy h2 { color: #fff; text-align: left; font-size: 34px; }

.free-copy p {
    margin-top: 16px;
    color: #c9c9c5;
    max-width: 620px;
    font-size: 15.5px;
    line-height: 1.65;
}

.free-inner .btn { flex: none; }

/* ---------- Частые вопросы ---------- */

.faq-list { margin-top: 44px; }

.faq-item {
    background: none;
    border: none;
    border-top: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    overflow: hidden;
}
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item:hover { box-shadow: none; }

.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 52px 22px 0;
    font-size: 17px;
    font-weight: 400;
    color: var(--ink);
    position: relative;
    user-select: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

/* Плюс превращается в минус при раскрытии */
.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    line-height: 1;
    color: var(--muted);
    transition: transform .2s;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item[open] summary { font-weight: 500; }

.faq-item p {
    padding: 0 52px 22px 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.65;
}

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

.site-footer {
    background: var(--bg);
    color: var(--muted);
    border-top: 1px solid var(--line-soft);
    padding: 30px 0 36px;
}

.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.site-footer .logo-text { color: var(--ink); }

.footer-brand p { margin-top: 6px; font-size: 13px; color: var(--muted); }

.footer-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
}

.footer-links a {
    color: var(--muted);
    text-decoration: none;
    font-size: 12.5px;
}
.footer-links a:hover { color: var(--ink); text-decoration: underline; }
/* «Поддержать проект» — скромная ссылка, но чуть заметнее юридических */
/* «Поддержать проект» — мягкая пилюля (как в подвале приложения):
   заметно среди юридических ссылок, но тише основной кнопки страницы */
.footer-links a.footer-support {
    display: inline-flex;
    align-items: center;
    padding: 4px 13px;
    background: var(--amber-soft);
    color: var(--amber-ink);
    border: 1px solid var(--amber);
    border-radius: 14px;
    font-weight: 500;
    transition: background .12s;
}
.footer-links a.footer-support:hover { background: var(--amber); color: var(--ink); }

.footer-copy { font-size: 12.5px; align-self: center; color: var(--muted); }
.footer-copy a { color: var(--ink); }

/* ============================================================
   Адаптив стартовой страницы
   ============================================================
   Приложение (расписание, тарификация) остаётся широким: таблицам
   нужен весь экран, там --page-min оправдан. Но ЛЕНДИНГ читают с
   телефона — завуч открывает ссылку в мессенджере, и страница обязана
   разворачиваться, а не ехать вбок. Поэтому здесь min-width снимается
   и блоки перестраиваются в одну колонку.
   ============================================================ */

/* Планшет: правая колонка первого экрана мешает — уводим её вниз */
@media (max-width: 1100px) {
    body { min-width: 0; }

    .hero-inner {
        grid-template-columns: 1fr;
        gap: 36px;
        padding-top: 52px;
        padding-bottom: 56px;
    }
    /* min-width: 0 обязателен: иначе колонка грида не сжимается уже
       своего содержимого (длинная кнопка) и распирает страницу вбок */
    .hero-copy { max-width: 640px; min-width: 0; }
    .hero-visual { max-width: 480px; min-width: 0; }

    .features-grid { grid-template-columns: repeat(2, 1fr); }

}

/* Телефон */
@media (max-width: 760px) {
    body { min-width: 0; font-size: 15px; }

    /* Шапка: пункты меню прячем под кнопку (разметка и скрипт уже есть) */
    .header-inner { height: 60px; gap: 12px; }
    .nav-toggle { display: inline-flex; align-items: center; }
    .main-nav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 60px;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 6px 0 10px;
        background: var(--bg);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 8px 20px rgba(17, 17, 17, .07);
    }
    .main-nav.open { display: flex; }
    .main-nav a {
        padding: 12px var(--pad);
        border-bottom: none;
        font-size: 15px;
    }
    /* В шапке остаётся только одна кнопка — остальное в меню.
       Кнопка сжимаемая: «Продолжить работу» длиннее «Войти» и распирала шапку */
    .header-actions { margin-left: auto; min-width: 0; }
    .header-actions .btn-ghost { display: none; }
    .header-actions .btn {
        min-width: 0;
        padding: 0 14px;
        font-size: 13.5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 46vw;
    }

    /* Первый экран */
    .hero-inner { padding-top: 34px; padding-bottom: 40px; gap: 28px; }
    .hero h1 { font-size: 30px; line-height: 1.2; }
    .hero-sub { font-size: 15.5px; }
    .hero-cta { gap: 10px; }
    .hero-cta .btn-lg { width: 100%; justify-content: center; }

    /* Демонстрация расписания: три дня не влезают — оставляем компактнее */
    .tt-grid { padding: 12px; gap: 4px; font-size: 12px; }

    /* Секции и сетки — в одну колонку */
    .section { padding-top: 44px; padding-bottom: 44px; }
    .section h2 { font-size: 24px; }
    .section-sub { font-size: 15.5px; }
    .features-grid { grid-template-columns: 1fr; margin-top: 28px; gap: 12px; }
    .steps { grid-template-columns: 1fr; gap: 12px; }

    /* Полоса «Полностью бесплатно»: в строку не помещается — в столбик,
       кнопка во всю ширину (иначе она распирала страницу вбок) */
    .free-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        margin: 40px 0;
        padding: 30px 22px;
    }
    .free-copy h2 { font-size: 24px; }
    .free-inner .btn { width: 100%; justify-content: center; }

    /* Вопросы и ответы */
    .faq-list { margin-top: 26px; }
    .faq-item summary { font-size: 16px; padding: 18px 40px 18px 0; }

    /* Подвал */
    .footer-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
    .footer-links { flex-wrap: wrap; gap: 10px 14px; }
}

/* Узкие телефоны */
@media (max-width: 430px) {
    /* Длинные слова («расписания», «Составление») на узком экране не влезают
       в строку — разрешаем перенос, иначе заголовок распирает страницу */
    .hero h1, .section h2, .free-copy h2 {
        overflow-wrap: break-word;
        hyphens: auto;
    }
    .hero h1 { font-size: 25px; }
    .logo-text { font-size: 15px; }
    .hero-badge { font-size: 12px; }
    /* Демо-расписание на узком экране только мешает читать текст */
    .hero-visual { display: none; }
    /* Шапка на 320px: логотип + кнопка + меню в строку не помещаются */
    .header-inner { gap: 8px; }
    .header-actions .btn { max-width: 40vw; padding: 0 11px; font-size: 13px; }
    .logo-mark { width: 24px; height: 24px; }
}


/* ============================================================
   Заключительный раздел «Кому подходит и что умеет сервис»
   ============================================================
   Обычный текст обычного размера: прятать его от человека нельзя.
   Скрытый или мелкий текст «для поисковика» Яндекс распознаёт
   и понижает сайт целиком (фильтр за переоптимизацию).
   ============================================================ */
#about-more { border-top: 1px solid var(--line-soft); }
.about-more-text { max-width: 780px; }
.about-more-text p { margin: 0 0 14px; line-height: 1.7; color: var(--ink-2); }
.about-more-text p:last-child { margin-bottom: 0; }
.about-more-text strong { color: var(--ink); }

/* ── Все возможности (SEO-список внизу главной) ── */
.cap-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 26px 34px;
    margin-top: 10px;
}
.cap-group h3 { font-size: 17px; margin: 0 0 10px; }
.cap-group ul { margin: 0; padding-left: 18px; }
.cap-group li { margin: 5px 0; font-size: 14.5px; line-height: 1.45; }