/* Общие стили внутренних страниц сайта: перенос записей, PRO, тренерский режим.

   Один файл на всех — иначе палитра и лестница отступов копировались бы в
   каждую страницу и через месяц разъехались. Палитра взята один в один с
   главной, чтобы человек не чувствовал перехода в другое место. */

/* Палитра, шрифты и лестница отступов — те же, что на главной. Человек
   приходит с сайта и не должен чувствовать, что попал в другое место. */
:root {
    color-scheme: dark;
    --bg: #0f1117; --surface: #171a23; --surface-2: #1f2330;
    --border: rgba(255,255,255,0.08);
    --text: #f2f2f5; --text-dim: #9a9db0;
    --accent: #6c5ce7; --accent-2: #00d2a8;
  }
  :root[data-theme="light"] {
    color-scheme: light;
    --bg: #f4f5f7; --surface: #ffffff; --surface-2: #eceef2;
    --border: rgba(20,25,40,0.10);
    --text: #1a1d26; --text-dim: #6b7280;
    --accent: #5b4bd6; --accent-2: #0d9e82;
  }
  :root[data-theme="warm"] {
    color-scheme: light;
    --bg: #f3ede4; --surface: #fdfaf5; --surface-2: #e9e0d3;
    --border: rgba(90,70,50,0.14);
    --text: #372f27; --text-dim: #857767;
    --accent: #b96a3d; --accent-2: #5f8a6f;
  }
  :root[data-theme="graphite"] {
    color-scheme: dark;
    --bg: #211f1d; --surface: #2b2825; --surface-2: #37332e;
    --border: rgba(255,248,238,0.10);
    --text: #f1ece5; --text-dim: #a79e92;
    --accent: #d98b5f; --accent-2: #7fb39a;
  }
  :root[data-theme="night"] {
    color-scheme: dark;
    --bg: #000000; --surface: #0c0e12; --surface-2: #171a20;
    --border: rgba(255,255,255,0.11);
    --text: #eef1f6; --text-dim: #868f9f;
    --accent: #21b6c7; --accent-2: #35b98b;
  }
  @media (prefers-color-scheme: light) {
    :root[data-theme="auto"] {
      color-scheme: light;
      --bg: #f4f5f7; --surface: #ffffff; --surface-2: #eceef2;
      --border: rgba(20,25,40,0.10);
      --text: #1a1d26; --text-dim: #6b7280;
      --accent: #5b4bd6; --accent-2: #0d9e82;
    }
  }

  /* ЛЕСТНИЦА ОТСТУПОВ И РАЗМЕРОВ.
     До этого на странице было 24 разных отступа и 17 размеров шрифта —
     каждый блок жил по своим числам, и глазу не за что было зацепиться.
     Теперь значений пять и шесть, и любой новый блок обязан брать их
     отсюда, а не придумывать своё.

     Отдельно это важно для языков: болгарский и румынский длиннее русского,
     и там, где отступ выбран на глаз, вёрстка поедет. Одинаковые ступени
     переживают перевод. */
  :root {
    --s1: 8px;    /* внутри строки: значок и текст */
    --s2: 16px;   /* между карточками */
    --s3: 24px;   /* поля внутри карточки */
    --s4: 40px;   /* от заголовка раздела до его содержимого */
    --s5: 64px;   /* между разделами */

    --t-h1: clamp(38px, 7vw, 60px);
    --t-h2: clamp(26px, 4vw, 32px);
    --t-h3: 19px;
    --t-body: 17px;
    --t-small: 15px;
    --t-micro: 12px;
  }

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:var(--t-body); line-height:1.6; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px;margin:0 auto;padding:var(--s3) 20px 80px}
a{color:var(--accent)}
h1,h2,.brand{font-family:Manrope,sans-serif}
h1{font-size:clamp(28px,5vw,38px);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0 0 var(--s2);text-wrap:balance}
/* Без ограничения ширины: контейнер здесь и так узкий (760px), а лишний
   предел оставлял справа пустую полосу — заказчик показал её стрелкой. */
.lede{color:var(--text-dim);margin:0 0 var(--s4)}

.top{display:flex;align-items:center;gap:10px;margin-bottom:var(--s4)}
.logo{width:34px;height:34px;border-radius:9px;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;font-family:Manrope,sans-serif}
.brand{font-weight:800;font-size:19px}
.langs{margin-left:auto;display:flex;gap:2px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:3px}
.langs button{font:inherit;font-size:var(--t-micro);font-weight:600;border:0;background:none;color:var(--text-dim);
  padding:5px 11px;border-radius:999px;cursor:pointer}
.langs button[aria-pressed="true"]{background:var(--accent);color:#fff}

/* ===== общие блоки внутренних страниц ===== */
.sec { margin-bottom: var(--s5); }
.sec-title {
  font-family: Manrope, sans-serif; font-size: var(--t-h2); font-weight: 800;
  letter-spacing: -.01em; margin: 0 0 var(--s2); text-wrap: balance;
}
.sec-note { color: var(--text-dim); margin: 0 0 var(--s3); }

/* Возможность: значок, заголовок, объяснение. Одинаковая всюду. */
.feat { display: grid; grid-template-columns: 34px 1fr; gap: var(--s2); margin-bottom: var(--s3); }
.feat .ico { font-size: 24px; line-height: 1.2; }
.feat b { display: block; font-size: var(--t-h3); font-weight: 700; margin-bottom: 4px; }
.feat p { margin: 0; color: var(--text-dim); font-size: var(--t-small); }
.feat .pro-mark {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; vertical-align: 2px;
}

/* Сравнение бесплатной и PRO */
.cmp { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.cmp th, .cmp td { padding: 11px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.cmp th { font-family: Manrope, sans-serif; font-weight: 700; color: var(--text-dim); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .08em; }
.cmp td:not(:first-child), .cmp th:not(:first-child) { text-align: center; width: 22%; }
.cmp .yes { color: var(--accent-2); font-weight: 700; }
.cmp .no { color: var(--text-dim); }
.cmp tr:last-child td { border-bottom: 0; }
.cmp-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 4px var(--s1); overflow-x: auto; }

/* Цены */
.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s2); }
.price { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: var(--s3); text-align: center; }
.price.best { border-color: var(--accent); }
.price .nm { font-size: var(--t-small); color: var(--text-dim); }
.price .amt { font-family: Manrope, sans-serif; font-size: 30px; font-weight: 800; margin: 6px 0 2px; }
.price .sub { font-size: var(--t-micro); color: var(--text-dim); }
.price .tag { display: inline-block; margin-bottom: 8px; padding: 2px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; }

/* Ряд снимков экрана */
.shots-row { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s2); }
.shots-row figure { flex: 0 0 auto; width: 210px; margin: 0; }
.shots-row .phone { border: 7px solid var(--surface-2); border-radius: 22px; overflow: hidden; background: var(--surface-2); }
.shots-row img { display: block; width: 100%; height: auto; }
.shots-row figcaption { font-size: var(--t-micro); color: var(--text-dim); margin-top: 8px; line-height: 1.4; }

.faq { border-top: 1px solid var(--border); padding: var(--s2) 0; }
.faq summary { font-weight: 700; cursor: pointer; font-size: var(--t-body); }
.faq p { color: var(--text-dim); margin: var(--s1) 0 0; font-size: var(--t-small); }

/* Шапка внутренней страницы: логотип ведёт на главную. */
.brand-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }

/* Карточка-пояснение внутри страницы. */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: var(--s3); }

/* Нумерованные шаги в инструкциях. */
.steps { font-size: var(--t-small); color: var(--text-dim); margin: var(--s2) 0 0; padding-left: 20px; }
.steps li { margin-bottom: 6px; }