/*
 * Сайт «Аксиома» — платформы занятий с репетитором (аксиом.рус) — лендинг, поддержка, удаление аккаунта,
 * ссылка на приложение. Цвета и шрифты — из приложения (mobile/design/
 * tokens.json, стиль «Тетрадь»): лист в клетку, зелёный и бежевый, подписи
 * от руки. Шрифты свои (site/fonts), без Google Fonts: сайт ничего не
 * отдаёт чужим серверам — с детскими данными так спокойнее по 152-ФЗ.
 */
@font-face { font-family: "Golos"; src: url("/fonts/golos.ttf") format("truetype"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/fonts/caveat.ttf") format("truetype"); font-weight: 400 700; font-display: swap; }

:root {
  --фон: #FAF8F2; --клетка: #E6EAE3; --поверхность: #FFFFFF; --поверхность2: #F1F3EE;
  --текст: #13241F; --текст2: #4A5C55; --текст3: #6B7C75; --линия: #DDE3DC;
  --основной: #05453A; --наОсновном: #F6F1E6; --акцент: #EDDFC3; --наАкценте: #05453A;
  --маркер: #C9B083; --ссылка: #0A6B5A;
  --поверхность3: #E5EAE3; --линияСильная: #C2CDC5; --контур: #D8DFD7; --контур2: #CAD4CB; --контурТень: #E6EAE3;
  --основнойКонт: #D6E9E2; --наОсновномКонт: #022C25; --акцентКонт: #F5EDDC;
  /* Статусы урока — как в приложении и CRM (tokens.json, «статус») */
  --done: #1B7A5A; --done-bg: #DDF1E8; --live: #8A6500; --live-bg: #FFF1C2; --plan: #3B6BA5; --plan-bg: #E1EBF7;
  --confirm: #1F7F76; --confirm-bg: #D9F0EC; --trial: #6B4E9E; --trial-bg: #ECE4F7;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --фон: #0C1512; --клетка: #15211D; --поверхность: #131E1A; --поверхность2: #1A2722;
    --текст: #E8EFE9; --текст2: #A9BAB1; --текст3: #86978E; --линия: #26352F;
    --основной: #8FD1BD; --наОсновном: #03281F; --акцент: #EDDFC3; --наАкценте: #05453A;
    --маркер: #D4BD8C; --ссылка: #8FD1BD;
    --поверхность3: #23332D; --линияСильная: #37493F; --контур: #26352F; --контур2: #314239; --контурТень: #0C1512;
    --основнойКонт: #0E4A3E; --наОсновномКонт: #CFEDE3; --акцентКонт: #3A3222;
    --done: #62C79F; --done-bg: #173A2D; --live: #F2C744; --live-bg: #3F3510; --plan: #8EB6EA; --plan-bg: #1C2E45;
    --confirm: #62CCBF; --confirm-bg: #143A36; --trial: #BEA3EC; --trial-bg: #2F2544;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: "Golos", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.55;
  color: var(--текст); background-color: var(--фон);
  background-image: linear-gradient(var(--клетка) 1px, transparent 1px), linear-gradient(90deg, var(--клетка) 1px, transparent 1px);
  background-size: 22px 22px;
}
a { color: var(--ссылка); }
img, svg { max-width: 100%; }
.обёртка { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

/* шапка */
.шапка { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--фон) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--линия); }
.шапка .обёртка { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.знак { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--текст); font-weight: 700; font-size: 20px; }
.знак img { width: 36px; height: 36px; }
.шапка .войти { min-height: 40px; padding: 0 16px; font-size: 14px; }
.шапка nav { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 15px; }
.шапка nav a { color: var(--текст2); text-decoration: none; }
.шапка nav a:hover { color: var(--текст); }
@media (max-width: 640px) { .шапка nav .необяз { display: none; } }

/* первый экран */
.первый { padding-top: 56px; padding-bottom: 40px; }
.от-руки { font-family: "Caveat", cursive; font-size: 28px; font-weight: 700; color: var(--основной); line-height: 1.1; }
h1 { font-size: clamp(32px, 6vw, 54px); line-height: 1.1; margin: 8px 0 16px; letter-spacing: -0.01em; }
.подзаголовок { font-size: clamp(17px, 2.4vw, 21px); color: var(--текст2); max-width: 640px; margin: 0 0 28px; }
.кнопки { display: flex; flex-wrap: wrap; gap: 12px; }
.кнопка { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 26px; border-radius: 999px;
  font: 600 16px/1 "Golos", system-ui, sans-serif; text-decoration: none; border: 0; cursor: pointer; white-space: nowrap; }
.кнопка svg { width: 20px; height: 20px; flex: none; }
.кнопка.главная { background: var(--основной); color: var(--наОсновном); }
.кнопка.вторая { background: transparent; color: var(--текст); box-shadow: inset 0 0 0 1.5px var(--линияСильная); }
.кнопка.бежевая { background: var(--акцент); color: var(--наАкценте); }
.кнопка[aria-disabled="true"] { opacity: .6; cursor: default; }

/* блоки */
section { padding: 36px 0; }
h2 { font-size: clamp(24px, 3.6vw, 34px); line-height: 1.2; margin: 4px 0 20px; }
.сетка { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.карточка { background: var(--поверхность); border-radius: 20px; padding: 22px; box-shadow: 0 0 0 1.5px var(--контур2), 0 6px 0 -2px var(--контурТень); }
.карточка h3 { margin: 0 0 6px; font-size: 19px; }
.карточка p { margin: 0; color: var(--текст2); font-size: 16px; }
.значок-блока { width: 48px; height: 48px; border-radius: 14px; background: var(--акцентКонт); color: var(--основной); display: grid; place-items: center; font-weight: 700; margin-bottom: 14px; }
.значок-блока svg { width: 24px; height: 24px; }
.предметы { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.предметы span { background: var(--поверхность2); border: 1px solid var(--линия); border-radius: 999px; padding: 6px 14px; font-size: 15px; }
.шаги { counter-reset: шаг; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.шаги li { counter-increment: шаг; position: relative; padding-left: 52px; }
.шаги li::before { content: counter(шаг); position: absolute; left: 0; top: -2px; width: 36px; height: 36px; border-radius: 50%; background: var(--основной); color: var(--наОсновном); display: grid; place-items: center; font-weight: 700; }

/* магазины приложений */
.магазины { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.магазин { display: inline-flex; flex-direction: column; justify-content: center; min-width: 170px; min-height: 56px; padding: 8px 16px; border-radius: 14px;
  background: var(--текст); color: var(--фон); text-decoration: none; line-height: 1.15; }
.магазин small { font-size: 12px; opacity: .75; }
.магазин b { font-size: 18px; }
.магазин[aria-disabled="true"] { opacity: .55; cursor: default; }

/* текстовые страницы */
.текст { max-width: 760px; padding-top: 40px; padding-bottom: 56px; }
.текст h1 { font-size: clamp(28px, 5vw, 40px); }
.текст h2 { font-size: 22px; margin-top: 32px; }
.текст p, .текст li { color: var(--текст2); }
.выноска { background: var(--поверхность); border: 1.5px solid var(--линия); border-left: 5px solid var(--основной); border-radius: 14px; padding: 16px 18px; margin: 20px 0; }
details { background: var(--поверхность); border: 1.5px solid var(--линия); border-radius: 14px; padding: 12px 16px; margin: 10px 0; }
summary { cursor: pointer; font-weight: 600; }
details p { margin: 10px 0 0; }

/* подвал */
.подвал { border-top: 1px solid var(--линия); padding: 28px 0 40px; color: var(--текст3); font-size: 14px; background: var(--фон); }
.подвал .обёртка { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.подвал a { color: var(--текст2); }

/* ============ главная: как экраны приложения ============ */
.ик { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.герой { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; align-items: center; padding-top: 56px; padding-bottom: 32px; }
.герой h1 { margin-top: 6px; }
.отметки { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
@media (max-width: 860px) { .герой { grid-template-columns: 1fr; gap: 28px; padding-top: 36px; } }

/* Панель с уроками — как картинка «Знакомства» в приложении */
.витрина { position: relative; overflow: hidden; border-radius: 28px; padding: 44px 28px 28px; display: grid; gap: 14px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--основнойКонт) 80%, var(--фон)), color-mix(in srgb, var(--основнойКонт) 30%, var(--фон))); }
.витрина::before { content: ""; position: absolute; width: 320px; height: 320px; right: -120px; top: -110px; border-radius: 50%; background: color-mix(in srgb, var(--акцент) 45%, transparent); }
.витрина > * { position: relative; }
.урок { display: flex; align-items: center; gap: 16px; background: var(--поверхность); border-radius: 18px; padding: 16px 18px;
  box-shadow: 0 0 0 1.5px var(--контур2), 0 6px 0 -2px var(--контурТень), inset 5px 0 0 var(--ц, var(--done)); }
.урок .время { font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; min-width: 58px; }
.урок .что { flex: 1; min-width: 0; line-height: 1.3; }
.урок .что small { display: block; color: var(--текст3); font-size: 14px; }
.урок.идёт { box-shadow: 0 0 0 2.5px var(--маркер), 0 6px 0 -2px var(--контурТень), inset 5px 0 0 var(--маркер); margin: 0 -8px; }
.подпись-от-руки { font-family: "Caveat", cursive; font-size: 24px; font-weight: 700; color: var(--основной); text-align: right; margin-top: 4px; transform: rotate(-2deg); }

.пилюля { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap;
  color: var(--ц); background: var(--ц-фон); }
.пилюля svg { width: 15px; height: 15px; }
.пилюля .точка { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: пульс 1.6s ease-in-out infinite; }
@keyframes пульс { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .пилюля .точка { animation: none; } }
.ст-done { --ц: var(--done); --ц-фон: var(--done-bg); }
.ст-live { --ц: var(--live); --ц-фон: var(--live-bg); }
.ст-plan { --ц: var(--plan); --ц-фон: var(--plan-bg); }
.ст-confirm { --ц: var(--confirm); --ц-фон: var(--confirm-bg); }
.ст-trial { --ц: var(--trial); --ц-фон: var(--trial-bg); }

/* Карточки «как устроено» — с кусочком экрана приложения сверху */
.карточка.с-экраном { display: flex; flex-direction: column; gap: 16px; }
.экранчик { border-radius: 16px; background: var(--поверхность2); padding: 16px; min-height: 164px; display: grid; align-content: center; gap: 10px; }
.экранчик .строка { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.экранчик .мелко { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--текст2); }
.экранчик b.крупно { font-size: 32px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.экранчик .кнопка { min-height: 46px; font-size: 15px; width: 100%; }
.вопрос { background: var(--акцентКонт); }
.вопрос b { color: var(--основной); }
.вопрос .пара { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.вопрос .пара span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; border-radius: 999px; font-weight: 600; font-size: 15px; }
.вопрос .пара svg { width: 16px; height: 16px; }
.вопрос .да { background: var(--основной); color: var(--наОсновном); }
.вопрос .нет { box-shadow: inset 0 0 0 1.5px var(--линияСильная); color: var(--основной); }
/* Недельный отчёт — картинка с постоянными цветами (tokens.json, «отчёт»), от темы не зависит */
.отчёт { background: #FBF7F3; color: #2A2A2A; box-shadow: inset 0 0 0 1.5px #F7C8D6; }
.отчёт .имя { font-family: "Caveat", cursive; font-size: 30px; font-weight: 700; color: #1F3A2E; line-height: 1; }
.отчёт .цель { background: #FCE7EE; border-radius: 10px; padding: 6px 10px; font-size: 14px; }
.отчёт .день { background: #E8F0E5; border-radius: 10px; padding: 6px 10px; font-size: 14px; }
.отчёт .похвала { font-family: "Caveat", cursive; font-size: 24px; font-weight: 700; color: #E07C9E; line-height: 1; }

/* Приложение — на цвете бренда, как шапки входа в приложении */
.приложение { border-radius: 28px; padding: 40px; color: #F6F1E6; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 36px; align-items: center;
  background: radial-gradient(120% 140% at 0% 0%, #0B5E4F, #05453A 55%, #032E27); }
.приложение .от-руки { color: #EDDFC3; }
.приложение h2 { color: #F6F1E6; }
.приложение .подзаголовок { color: #D2E6DE; margin-bottom: 8px; }
.приложение .магазин { background: #F6F1E6; color: #05453A; }
.приложение ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; color: #D2E6DE; }
.приложение li { display: flex; gap: 10px; align-items: center; }
.приложение li svg { color: #EDDFC3; width: 20px; height: 20px; flex: none; }
/* Место под QR-код ссылки аксиом.рус/app: картинку положить в site/assets/qr-app.svg
   (или .png) и заменить заглушку внутри .qr на
   <img src="/assets/qr-app.svg" alt="QR-код: аксиом.рус/app"> */
.qr-блок { text-align: center; }
.qr { width: 216px; height: 216px; border-radius: 24px; background: #FFFFFF; padding: 16px; display: grid; place-items: center; margin: 0 auto;
  box-shadow: 0 0 0 6px rgba(237, 223, 195, .22); }
.qr img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.qr .заглушка { width: 100%; height: 100%; border: 2px dashed #C2CDC5; border-radius: 14px; display: grid; place-content: center; gap: 6px; color: #6B7C75; font-size: 14px; }
.qr .заглушка svg { width: 44px; height: 44px; margin: 0 auto; color: #05453A; }
.qr-блок p { margin: 14px 0 0; color: #D2E6DE; font-size: 15px; }
.qr-блок a { color: #EDDFC3; }
@media (max-width: 760px) { .приложение { grid-template-columns: 1fr; padding: 28px 20px; } }

/* Личный кабинет */
.кабинет { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; }
.кабинет .значок-блока { margin: 0; width: 64px; height: 64px; border-radius: 18px; }
.кабинет .значок-блока svg { width: 30px; height: 30px; }
.кабинет h3 { margin: 0 0 4px; font-size: 22px; }
.кабинет p { margin: 0; color: var(--текст2); }
@media (max-width: 700px) { .кабинет { grid-template-columns: 1fr; } .кабинет .кнопка { width: 100%; } }
@media (max-width: 480px) { .шапка nav { gap: 12px; } .урок { gap: 12px; padding: 14px; } .урок .время { min-width: 0; font-size: 18px; } .урок .что small { display: none; } .витрина { padding: 32px 16px 20px; } .герой .кнопки .кнопка { width: 100%; } }

/* Уведомление о cookie (assets/куки.js) */
.куки { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 720px; margin: 0 auto; display: flex; gap: 16px; align-items: center;
  background: var(--поверхность); border: 1.5px solid var(--линия); border-radius: 18px; padding: 14px 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .14); }
.куки p { margin: 0; flex: 1; color: var(--текст2); font-size: 15px; }
.куки .кнопка { min-height: 44px; padding: 0 20px; flex: none; }
@media (max-width: 520px) { .куки { flex-direction: column; align-items: stretch; } }

/* Документы юриста (scripts/документы.py): пункты с номерами из Word — «3.2.» висит слева */
.документ .редакция { color: var(--текст3); margin-top: -8px; }
.документ .пункт { display: flex; gap: 8px; }
.документ .пункт .номер { flex: none; min-width: 2.4em; color: var(--текст2); font-variant-numeric: tabular-nums; }
.документ .пункт.у1 { padding-left: 1.2em; }
.документ .пункт.у2, .документ .пункт.у3 { padding-left: 2.4em; }
.документ .таблица { overflow-x: auto; margin: 16px 0; }
.документ table { border-collapse: collapse; width: 100%; font-size: 15px; }
.документ td { border: 1px solid var(--линия); padding: 8px 10px; vertical-align: top; }
.документ .подзаголовок { font-weight: 600; color: var(--текст2); margin-top: -4px; }

/* Страница подписания договора (sign.html) */
/* Подвал — снизу окна. Он непрозрачный, и на коротком листе под ним снова начиналась клетка фона: выглядело как обрыв страницы (ТЗ 06.11) */
body.на-весь-экран { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.на-весь-экран > main { flex: 1 0 auto; width: 100%; }
.подписание { max-width: 680px; padding-top: 32px; padding-bottom: 56px; }
.подписание-документы { padding-left: 20px; margin: 12px 0 24px; }
.подписание-документы li { margin: 6px 0; }
.подписание-поле { display: grid; gap: 6px; margin-bottom: 20px; font-weight: 600; font-size: 15px; }
.подписание-поле input { font: inherit; font-weight: 400; padding: 13px 14px; border-radius: 12px; border: 1.5px solid var(--линияСильная); background: var(--поверхность); color: var(--текст); width: 100%; box-sizing: border-box; }
.подписание-поле input:focus { outline: 2px solid var(--основной); outline-offset: 1px; }
.подписание-галочка { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; margin-bottom: 14px; cursor: pointer; line-height: 1.4; }
.подписание-галочка input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--основной); }
.подписание .кнопка { width: 100%; margin-top: 12px; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.подписание .кнопка:disabled { opacity: .5; cursor: default; }
.подписание-ошибка { color: #C8503F; margin: 8px 0 0; }
.подписание-итог { background: var(--done-bg); color: var(--текст); border-radius: 16px; padding: 18px 20px; margin-bottom: 16px; }
.подписание-итог h2 { margin: 0 0 6px; color: var(--done); }
.подписание-итог p { margin: 0; }