/* ============================================================================
   drmazin.ru - визуальный слой «Латунь». Общий для всех страниц сайта.

   Откуда взялась гамма. Два присланных референса сошлись на одном сочетании,
   хотя сделаны разными людьми в разных странах:
     smilespb.ru            - почти-чёрный #1A1919 и приглушённое золото #83754E;
     facetas.edsondasilva   - графит #151719, шампань #AD9664, тёплый беж #D5D1C7.
   Отсюда база: тёплый графит и латунь. Бургунди из третьего пожелания живёт
   отдельно и редко - только на результатах кейсов, где он работает как печать,
   а не как тревога (красный в медицине читается плохо, бордовый - нет).
   От Apple здесь не цвет, а поведение: воздух, крупная лёгкая типографика,
   волосяные линии вместо рамок и почти полное отсутствие теней.

   Ритм страницы: бумага - основа, графит - акцент. Раньше было наоборот, и
   тёмного выходило три четверти страницы: для сайта врача это перебор -
   человеку в тревоге светлое даётся легче. Теперь тёмных островов на странице
   два-три (первый экран, финальный призыв, подвал), всё остальное - бумага.

   Как это устроено технически. Фиксированных слоя три: бумага, миллиметровка
   и холст с чертежом. Тёмный остров - не блок с заливкой, а подложка, которая
   лежит НИЖЕ холста (z-index -2 против -1). Поэтому чертёж рисуется поверх
   острова и остаётся живым на тёмном, а не прячется под ним.

   Чертёж на графите и на бумаге - разные чернила: на тёмном латунь, на
   светлом графитовый карандаш. Гаммы две, страница переключает их по ходу
   прокрутки (lux.js → panorama.js), переход плавный.

   Контраст проверен: латунь #C9A961 на графите #14120F даёт 8:1, тёмная
   кнопка на бумаге - 15:1. Латунь как цвет мелкого текста на светлом не
   используется нигде - там она только для линий, меток и цифр.
   ========================================================================== */

/* ── Шрифты ───────────────────────────────────────────────────────────────
   Onest - геометрический гротеск с хорошей кириллицей, в лёгких начертаниях
   даёт ровно ту «дорогую» лёгкость, что у Poppins ExtraLight на facetas.
   Playfair Display - высококонтрастная антиква, второй скин заголовков.
   Оба лежат у нас, внешних CDN нет: сайт должен открываться из любой сети. */
@font-face {
  font-family: 'Onest'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/Onest-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/Onest-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Onest'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/Onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/Onest-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/Playfair-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/Playfair-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/Playfair-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ── Ещё три семейства на выбор ───────────────────────────────────────────
   Manrope - гуманистический гротеск, теплее и мягче Onest.
   Literata - переходная антиква, контраст умереннее, чем у Playfair.
   Spectral - антиква с низким контрастом, самая спокойная из трёх.
   Все три с кириллицей и лежат у нас, без CDN. */
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/Manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/Manrope-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/Manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/Manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/Literata-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Literata'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/Literata-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Literata'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/Literata-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/Literata-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spectral'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(../fonts/Spectral-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Spectral'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(../fonts/Spectral-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Spectral'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(../fonts/Spectral-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(../fonts/Spectral-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Палитра ─────────────────────────────────────────────────────────────── */
[data-skin="lux"] {
  --ink:      #14120F;   /* тёплый графит - тёмные экраны */
  --ink-2:    #1C1915;
  --paper:    #FAF8F4;   /* тёплая бумага - светлая середина */
  --paper-2:  #F1ECE3;

  --bg:        var(--paper);
  --bg-soft:   var(--paper-2);
  --card:      #FFFFFF;
  --line:      #E5DED1;
  --line-soft: #EFEAE1;

  --text:   #14120F;
  --text-2: #5D5648;
  /* Было #948B7B - 3.17:1 к бумаге, ниже нормы для мелкого текста (4.5:1).
     Этим цветом набраны подписи, сноски и мелочь в подвале, а среди
     пациентов много людей за сорок, которые читают её на солнце с телефона.
     Стало 4.97:1 - тот же тёплый серый, просто на две ступени темнее. */
  --text-3: #736B5C;

  --gold:      #A8894F;   /* латунь на светлом: линии, рамки, цифры */
  /* Латунь для текста на бумаге - темнее декоративной. У #A8894F контраст
     3.11:1, и метки разделов («ПРАЙС», «ОТЗЫВЫ») читались через силу.
     Линии и рамки остаются прежними: к ним требование по контрасту другое. */
  --gold-text: #856A38;
  --gold-lit:  #C9A961;   /* латунь на тёмном: там она и текст тоже */
  --gold-deep: #8A6E3A;
  --wine:      #6E2233;   /* бургунди - только результаты кейсов */

  --accent:      var(--gold);
  --accent-deep: var(--gold-deep);
  --accent-soft: #F1E8D6;
  --warm:        var(--wine);
  --warm-soft:   #F5E9EB;

  /* Цвета живого фона. panorama.js читает их отсюда: чертёж должен жить в той
     же гамме, что и текст рядом, иначе он выглядит чужой картинкой.
     Гаммы две, потому что подложек тоже две.

     1. На графите (первый экран, финал) - латунь. Тут ничего не меняем:
        именно этот кадр и есть лицо сайта. */
  --scene-bg:     #14120F;
  --scene-line:   #6B6151;
  --scene-accent: #C9A961;
  /* Сила линий чертежа. На графите он уходит в глубину и почти не мешает,
     но в паре мест всё же наезжает на текст - убавили на четверть. */
  --scene-ink:    0.78;
  /* Служебные подписи чертежа на графите заметнее, чем были на бумаге:
     светлое на тёмном всегда лезет вперёд. Гасим на пару тонов, иначе они
     спорят с заголовком, который проходит по тому же месту. */
  --scene-label:  #625948;

  /* 2. На бумаге - графитовый карандаш. Латунь на светлом выцветала в ничто:
        золото светлее бумаги ровно настолько, чтобы его не было видно вовсе.
        Графит темнее бумаги, поэтому виден при любой прозрачности - а вести
        его надо очень тихо, иначе линии лягут в одну плоскость с буквами и
        начнут мешать читать. 0.30 - чертёж угадывается, текст не страдает. */
  --scene-bg-paper:     #FAF8F4;
  --scene-line-paper:   #2C2822;
  --scene-accent-paper: #3B342A;
  --scene-label-paper:  #6E6659;
  /* 0.20, а не 0.30: на приёмке чертёж на бумаге оказался громче, чем нужно
     фону. Разница между «его видно» и «он мешает» тут в одну десятую. */
  --scene-ink-paper:    0.20;

  /* Между соседними светлыми секциями два отступа по 128px складывались в
     четверть пустого экрана. Воздух тут нужен, но не пропасть. */
  --sect-y: clamp(54px, 6.4vw, 96px);

  /* Тени почти убраны: на тёмном они не видны, а на светлом дешевят. */
  --shadow-sm: 0 1px 2px rgba(20, 18, 15, .04);
  --shadow-md: 0 2px 10px rgba(20, 18, 15, .06);
  --shadow-lg: 0 10px 40px rgba(20, 18, 15, .10);
}

/* ── Тёмный остров ────────────────────────────────────────────────────────
   Не отдельная тема, а переопределение тех же переменных на куске страницы.
   Поэтому все компоненты - кнопки, метки, карточки - работают в обеих зонах
   без единого дублирующего правила.

   Подложка острова лежит на z-index -2: ниже холста с чертежом (-1), но выше
   бумаги и миллиметровки (-4 и -3). Из-за этого чертёж рисуется ПОВЕРХ
   тёмного острова - живым, а не спрятанным под заливкой. Ради этого у #main
   снят z-index: любой положительный z-index у предка создаёт свой слой, и
   подложка с -2 уехала бы вместе с ним наверх, закрыв холст. */
[data-skin="lux"] .ink-zone {
  position: relative;
  --text:   #F4EFE6;
  --text-2: #ABA294;
  /* Было #7C7466 - 4.05:1, чуть ниже нормы. Стало 5.26:1. */
  --text-3: #8F8778;

  --card:      rgba(255, 255, 255, .045);
  --bg-soft:   rgba(255, 255, 255, .03);
  --line:      rgba(244, 239, 230, .14);
  --line-soft: rgba(244, 239, 230, .07);

  --accent:      var(--gold-lit);
  --accent-deep: #E2C583;
  --accent-soft: rgba(201, 169, 97, .14);

  color: var(--text);
}
[data-skin="lux"] .ink-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(180deg, #17140F 0%, #100E0B 100%);
}
/* Два тёмных острова подряд не должны показывать шов между собой. */
[data-skin="lux"] .ink-zone + .ink-zone::before { top: -1px; }
/* Граница острова - резкая, без растворения. Пробовали градиент: получалась
   мутная полоса, в которой заголовок не читался ни как светлый, ни как
   тёмный. Резкий край выглядит как лист, положенный на стол, - и это честнее
   про сайт, где чертёж и бумага соседствуют. */

/* ── Типографика ──────────────────────────────────────────────────────────
   Крупнее и легче, чем было. Заголовок в лёгком начертании большого кегля -
   главный признак дорогого сайта: он занимает место, но не давит. */
[data-skin="lux"][data-type="sans"]     { --font-head: 'Onest', 'Inter', sans-serif; }
[data-skin="lux"][data-type="serif"]    { --font-head: 'Playfair Display', 'Onest', Georgia, serif; }
[data-skin="lux"][data-type="manrope"]  { --font-head: 'Manrope', 'Inter', sans-serif; }
[data-skin="lux"][data-type="literata"] { --font-head: 'Literata', Georgia, serif; }
[data-skin="lux"][data-type="spectral"] { --font-head: 'Spectral', Georgia, serif; }

[data-skin="lux"] h1 {
  font-size: clamp(38px, 5.6vw, 78px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}
[data-skin="lux"] h2 {
  font-size: clamp(28px, 4.4vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.03em;
}
[data-skin="lux"] h3 {
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.015em;
  font-weight: 500;
}
/* Гротески держим в лёгком начертании - оно и даёт «дорого». Антиквы наоборот
   в лёгком разваливаются: у них тонкие штрихи и так тонкие. */
[data-skin="lux"][data-type="sans"] h1,
[data-skin="lux"][data-type="sans"] h2,
[data-skin="lux"][data-type="manrope"] h1,
[data-skin="lux"][data-type="manrope"] h2 { font-weight: 300; }
[data-skin="lux"][data-type="serif"] h1,
[data-skin="lux"][data-type="serif"] h2 { font-weight: 500; letter-spacing: -0.02em; }
[data-skin="lux"][data-type="literata"] h1,
[data-skin="lux"][data-type="literata"] h2,
[data-skin="lux"][data-type="spectral"] h1,
[data-skin="lux"][data-type="spectral"] h2 { font-weight: 400; letter-spacing: -0.015em; }

[data-skin="lux"] .lead {
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--text-2);
}

/* Метка раздела: разрядка вместо жира. Линия слева осталась, но стала тоньше
   и длиннее - она теперь работает как поле чертежа, а не как маркер списка. */
[data-skin="lux"] .label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  /* На бумаге - тёмная латунь: у декоративной контраст 3.11:1, а это текст,
     причём набранный одиннадцатым кеглем вразрядку. На графите латунь и так
     даёт 8.3:1, там менять нечего. */
  color: var(--gold-text);
}
[data-skin="lux"] .ink-zone .label,
[data-skin="lux"][data-mode="solid"] .label { color: var(--accent); }
[data-skin="lux"] .label::before { width: 34px; opacity: .8; }

/* ── Кнопки ───────────────────────────────────────────────────────────────
   На бумаге главная кнопка тёмная, на графите - латунная. Латунь на белом в
   роли фона кнопки не проходит по контрасту, и это не вкусовщина: белый текст
   на #A8894F даёт 3:1 при норме 4,5. */
[data-skin="lux"] .btn {
  --btn-bg: var(--ink);
  --btn-fg: #FAF8F4;
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0;
}
[data-skin="lux"] .btn:hover { background: var(--ink-2); box-shadow: none; }
[data-skin="lux"] .ink-zone .btn { --btn-bg: var(--gold-lit); --btn-fg: #14120F; }
[data-skin="lux"] .ink-zone .btn:hover { background: var(--accent-deep); }
/* Контурная кнопка перечисляется после зонального правила намеренно: иначе
   правило зоны заливает её тем же золотом, и на первом экране две одинаковые
   кнопки спорят за главную. */
[data-skin="lux"] .btn--ghost,
[data-skin="lux"] .ink-zone .btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--line);
  background: transparent;
}
[data-skin="lux"] .btn--ghost:hover,
[data-skin="lux"] .ink-zone .btn--ghost:hover {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Фиксированные слои фона ──────────────────────────────────────────────
   Порядок слоёв снизу вверх: бумага (-4), миллиметровка (-3), тёмные острова
   (-2), холст с чертежом (-1), содержимое страницы. Номера сдвинуты на один
   вниз против panorama.css как раз затем, чтобы между сеткой и холстом
   освободилось место для островов. */
[data-skin="lux"] .bg-paper {
  z-index: -4;
  background:
    radial-gradient(58% 46% at 74% 12%, rgba(168, 137, 79, .10), transparent 70%),
    radial-gradient(52% 44% at 8% 78%, rgba(110, 34, 51, .05), transparent 72%),
    linear-gradient(180deg, #FDFCFA 0%, #F4F0E8 100%);
}
[data-skin="lux"] .bg-grid {
  z-index: -3;
  background-image:
    linear-gradient(rgba(44, 40, 34, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44, 40, 34, .05) 1px, transparent 1px);
  background-size: 64px 64px;
}
/* Сцена не завелась (нет WebGL, «меньше движения», ошибка загрузки) - на
   бумаге остаётся неподвижный графитовый след дуги. */
[data-skin="lux"] body.no-scene .bg-paper::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 700' fill='none' stroke='%232C2822'%3E%3Cg stroke-opacity='.30' stroke-width='1.6'%3E%3Cpath d='M100 140 C140 520 380 660 600 660 C820 660 1060 520 1100 140'/%3E%3Cpath d='M212 150 C246 455 416 566 600 566 C784 566 954 455 988 150'/%3E%3C/g%3E%3C/svg%3E");
  opacity: .5;
}

/* ── Бумага ───────────────────────────────────────────────────────────────
   Отдельного «листа бумаги» на странице больше нет: бумага теперь основа, а
   не полоса поверх графита. Класс .paper оставлен пустым нарочно - разметка
   старых страниц на него ссылается, и пусть ссылается: он просто ничего не
   делает. */
[data-skin="lux"] .paper { position: relative; background: none; }
/* panorama.css оставляет внизу место под служебный переключатель сцен - на
   боевой странице его нет, место возвращаем содержимому. */
@media (max-width: 760px) { [data-skin="lux"] body { padding-bottom: 0; } }
/* z-index: auto - обязательное условие, а не мелочь. С положительным z-index
   у #main всё содержимое уезжает в собственный слой, и подложки тёмных
   островов (-2) поднимаются вместе с ним поверх холста, закрывая чертёж. */
[data-skin="lux"] #main { position: relative; z-index: auto; }

/* ── Шапка ────────────────────────────────────────────────────────────────
   Шапка одна и висит поверх всего, а под ней проезжают то бумага, то тёмный
   остров. Поэтому она умеет обе стороны: по умолчанию бумажная, а над тёмным
   островом - светлая на прозрачном. Класс вешает скрипт (lux.js), он же
   переключает чернила чертежа - обе смены идут одновременно и выглядят как
   одно движение. */
[data-skin="lux"] .hdr {
  background: rgba(250, 248, 244, .88);
  backdrop-filter: saturate(1.3) blur(14px);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  color: var(--text);
  border-bottom-color: var(--line);
  transition: background .4s var(--ease), color .4s var(--ease);
}
/* Над тёмным островом шапка прозрачная. Совсем прозрачная мешала бы читать:
   в момент проезда буквы шапки накладываются на чужие буквы. Лёгкая тёмная
   вуаль сверху решает это, не превращая шапку в плашку. */
[data-skin="lux"] .hdr::before {
  content: '';
  position: absolute;
  inset: 0 0 -28px 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  /* Плотную часть тянем до самого низа шапки: при коротком градиенте кнопки
     первого экрана, проезжая под ней, просвечивали сквозь имя врача. */
  background: linear-gradient(180deg, rgba(16, 14, 11, .96) 72%, rgba(16, 14, 11, 0));
  transition: opacity .4s var(--ease);
}
[data-skin="lux"] .hdr.on-ink {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #F4EFE6;
}
[data-skin="lux"] .hdr.on-ink::before { opacity: 1; }
/* Класс .anchors нужен только чтобы app.js подсвечивал текущий раздел. Сам по
   себе это отдельная липкая полоса со своим фоном и маской - внутри шапки она
   рисовала светлый прямоугольник за пунктами меню. Гасим всё оформление,
   оставляя только поведение. */
[data-skin="lux"] .hdr .anchors {
  position: static;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  -webkit-mask-image: none;
          mask-image: none;
  z-index: auto;
}
[data-skin="lux"] .hdr .anchors a {
  flex: none;
  padding: 9px 14px;
  border-bottom: 0;
  border-radius: 999px;
  font-size: 14.5px;
}
[data-skin="lux"] .hdr .anchors a.is-active { color: var(--accent); font-weight: 500; }
[data-skin="lux"] .hdr .nav a { color: var(--text-2); }
[data-skin="lux"] .hdr .nav a:hover { color: var(--text); background: var(--paper-2); }
[data-skin="lux"] .hdr .brand__sub { color: var(--text-3); }
[data-skin="lux"] .hdr .btn { --btn-bg: var(--ink); --btn-fg: #FAF8F4; }
/* Контурная кнопка в шапке (на статьях и документах это «все статьи» и
   «вернуться на сайт») ловилась правилом выше и получала светлые буквы на
   прозрачном фоне - то есть исчезала. */
[data-skin="lux"] .hdr .btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); }
[data-skin="lux"] .hdr.on-ink .btn--ghost { --btn-fg: #F4EFE6; border-color: rgba(244, 239, 230, .28); }

[data-skin="lux"] .hdr.on-ink .nav a { color: rgba(244, 239, 230, .72); }
[data-skin="lux"] .hdr.on-ink .nav a:hover { color: #F4EFE6; background: rgba(255, 255, 255, .07); }
[data-skin="lux"] .hdr.on-ink .brand__sub { color: rgba(244, 239, 230, .5); }
[data-skin="lux"] .hdr.on-ink .btn { --btn-bg: var(--gold-lit); --btn-fg: #14120F; }
[data-skin="lux"] .hdr.on-ink .anchors a { color: rgba(244, 239, 230, .72); }

/* ── Якорное меню внутренних страниц ──────────────────────────────────────
   На главной якоря живут внутри шапки, а на внутренних страницах это своя
   липкая полоса под ней. Значит, и вести себя она должна как шапка: над
   бумагой бумажная, над тёмным островом - прозрачная и светлая. Высоту
   прилипания задаёт lux.js: она равна высоте шапки, а та зависит от окна. */
[data-skin="lux"] body > .anchors {
  background: rgba(250, 248, 244, .9);
  backdrop-filter: saturate(1.3) blur(12px);
  -webkit-backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
[data-skin="lux"] body > .anchors a {
  border-bottom: 0;
  padding: 13px 14px;
  font-size: 14px;
  transition: color .3s var(--ease);
}
[data-skin="lux"] body > .anchors a.is-active { color: var(--accent); font-weight: 500; }
[data-skin="lux"] body > .anchors.on-ink {
  background: rgba(16, 14, 11, .82);
  border-bottom-color: rgba(244, 239, 230, .12);
}
[data-skin="lux"] body > .anchors.on-ink a { color: rgba(244, 239, 230, .72); }
[data-skin="lux"] body > .anchors.on-ink a:hover { color: #F4EFE6; }
[data-skin="lux"] body > .anchors.on-ink a.is-active { color: var(--gold-lit); }

/* Подложка под текстом первого экрана на внутренних страницах: цвет берётся
   из зоны, поэтому одно правило работает и на бумаге, и на графите. Без
   этого над тёмным островом висело светлое облако из panorama.css. */
[data-skin="lux"] .hero__grid > div:first-child::before {
  background: radial-gradient(78% 66% at 32% 48%, var(--veil), transparent 76%);
}

/* ── Первый экран внутренних страниц ──────────────────────────────────────
   Здесь заголовок делит экран с портретом, поэтому он на размер меньше
   главной: тем же кеглем он занимал пять строк, и кнопка уезжала за нижний
   край окна. */
[data-skin="lux"] .hero__grid h1 {
  font-size: clamp(32px, 3.7vw, 58px);
  line-height: 1.06;
}
[data-skin="lux"] .hero__lead { font-size: clamp(16px, 1.5vw, 19px); }
/* Портрет снят на белом фоне, и на графите он лежал светящимся прямоугольником.
   Пока фон был на снимке, спасала рамка: чёрно-белый отпечаток с прямым углом
   и латунной каймой - фотография, положенная на чертёж. Круглые углы в 20
   пикселей тут читались как виджет из другого макета.
   Это оформление осталось для страниц со старым файлом. */
[data-skin="lux"] .hero__photo img {
  border-radius: 2px;
  filter: grayscale(1) contrast(1.04);
  border: 1px solid rgba(201, 169, 97, .3);
  background: var(--paper-2);
}
/* А где стоит вырезанный снимок (класс ставится в разметке), рамка не нужна:
   врач стоит прямо на странице, низ уходит в прозрачность маской. Тот же
   приём, что на первом экране главной. Отдельный класс - чтобы не задеть
   черновые макеты, где в этом же блоке лежит исходный jpg с белым фоном. */
[data-skin="lux"] .hero__photo--cut img {
  aspect-ratio: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  /* Цветной, как на главной: тот же кадр - тот же вид. Именно `none`,
     а не отсутствие строки: чёрно-белый приходит из правила выше
     (`.hero__photo img`), которое живёт для страниц со старым файлом,
     и молча остаётся в силе, если тут ничего не написать. */
  filter: none;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 99%);
          mask-image: linear-gradient(180deg, #000 72%, transparent 99%);
}
[data-skin="lux"] .hero__halo { display: none; }
/* Плашка-факт поверх фото: на графите белая карточка слепила, а её цифра
   терялась. Делаем её тёмной с латунной цифрой - тот же приём, что у цифр
   в блоке «сколько это стоит». */
[data-skin="lux"] .ink-zone .hero__badge {
  background: rgba(20, 18, 15, .88);
  border-color: rgba(201, 169, 97, .3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: none;
}
[data-skin="lux"] .hero__badge b {
  font-family: var(--font-head);
  font-weight: 300;
  letter-spacing: -0.04em;
  color: var(--accent);
}
/* Цифра на /online завёрнута в span - его же ловило правило про мелкую
   подпись под цифрой, и «300+» выходило меньше собственного пояснения. */
[data-skin="lux"] .hero__badge b span {
  display: inline;
  font-size: inherit;
  color: inherit;
  margin: 0;
}

/* ── Аватарка вместо квадрата с буквами ───────────────────────────────────
   Квадрат «ЕМ» - это логотип компании, а сайт не компания: сюда приходят к
   человеку. Лицо в шапке решает за два слова то, что монограмма не решает
   вовсе. Чёрно-белым - чтобы фотография не спорила с латунью и не тянула на
   себя внимание там, где её задача - только подпись. */
/* Медальон в шапке. Раньше это был круглый кусок снимка вместе с его белым
   фоном - в тёмной шапке получалось светлое пятно, в котором лица почти не
   разобрать. Теперь в кружке силуэт без фона, а сам кружок графитовый
   с латунной волосяной каймой: читается как медаль, а не как вырезанная
   фотография. Кружок держим тёмным и на бумаге - там он работает печаткой
   на светлом листе. */
.brand__face {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  /* Цветной - вслед за портретом на первом экране (17.08). */
  border: 1px solid rgba(201, 169, 97, .42);
  background: radial-gradient(circle at 50% 32%, #2E2822 0%, #16130F 78%);
  transition: border-color .4s var(--ease);
}
[data-skin="lux"] .hdr.on-ink .brand__face { border-color: rgba(201, 169, 97, .5); }
@media (max-width: 620px) { .brand__face { width: 36px; height: 36px; } }

/* ── Подложка под текстом на чертеже ──────────────────────────────────────
   Приглушить линии по всей сцене можно только до предела: дальше фон исчезает
   совсем. Поэтому вторым слоем гасим чертёж точечно - там, где идёт текст.
   Это не плашка: мягкое пятно цвета фона без единой границы, глазом оно не
   читается как прямоугольник, но контраст букв поднимает заметно.
   Цвет пятна берётся из зоны, поэтому один класс работает и на графите,
   и на бумаге. */
/* Значения по умолчанию - для светлых секций: они лежат вне зон и раньше
   оставались без переменной вовсе, отчего слово-тень у отзывов не появлялось. */
[data-skin="lux"] { --veil: rgba(250, 248, 244, .90); --ghost: rgba(20, 18, 15, .06); }
[data-skin="lux"] .ink-zone { --veil: rgba(20, 18, 15, .86); --ghost: rgba(201, 169, 97, .11); }

/* ── Слово-тень за заголовком ─────────────────────────────────────────────
   Приём подсмотрен на smilespb: за заголовком лежит то же (или родственное)
   слово - крупнее, жирнее и почти неразличимого тона. Оно не читается как
   текст, а работает как фактура: заголовок получает вес, а страница -
   второй план. На чертеже это ещё и удобно: пятно слова само притеняет
   линии под заголовком. */
.head-lux[data-ghost] { position: relative; }
.head-lux[data-ghost]::after {
  content: attr(data-ghost);
  position: absolute;
  left: -0.05em;
  top: -0.34em;
  z-index: -1;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(58px, 9.5vw, 148px);
  line-height: .9;
  letter-spacing: -0.055em;
  color: var(--ghost);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
/* На телефоне слово-тень раньше выключали совсем - и заголовки на узком
   экране оставались без второго плана, хотя на десктопе он есть у каждого.
   Возвращаем (30.08), но с другими пропорциями: слово не помещается в
   375 пикселей ни при каком кегле, поэтому его не пытаемся уместить целиком -
   оно уходит за правый край, как на чертеже уходит за рамку лист. Секция
   режет вылет (overflow-x: clip), горизонтальной прокрутки не появляется.
   Кегль тут задан от ширины окна, а не общей формулой: у общей на 375px
   срабатывал нижний край clamp (58px), и «тень» выходила ростом с сам
   заголовок - то есть читалась вторым заголовком, а не фактурой. */
@media (max-width: 760px) {
  .head-lux[data-ghost]::after {
    font-size: clamp(56px, 16vw, 104px);
    top: -0.30em;
    left: -0.04em;
  }
}

/* Подложки и слово-тень нарочно вылезают за края своего блока - иначе видно
   их границы. Но вылезают они и за край страницы, а это горизонтальная
   прокрутка на пустом месте. overflow-x: clip режет лишнее, не создавая
   прокручиваемой области (в отличие от hidden, который ломает липкую шапку). */
[data-skin="lux"] .section,
[data-skin="lux"] .hero,
[data-skin="lux"] .final,
[data-skin="lux"] .ftr { overflow-x: clip; }

/* Подложка нужна везде, где текст лежит прямо на чертеже, - а он теперь под
   всей страницей. На бумаге она не читается как облако (цвет тот же), но
   линии под буквами гасит. */
.hero-lux,
.head-lux,
.dossier,
.final .page { position: relative; }
/* Своя область наложения. Без неё слово-тень с z-index:-1 уезжает за фон
   полосы бумаги и пропадает - на светлых секциях его просто не было видно. */
.head-lux { isolation: isolate; }

.hero-lux::before,
.head-lux::before,
.dossier::before,
.final .page::before {
  content: '';
  position: absolute;
  inset: -34px -52px;
  z-index: -1;
  pointer-events: none;
  border-radius: 48px;
  background: radial-gradient(66% 58% at 32% 50%, var(--veil), transparent 74%);
}
/* У кейсов текст идёт через всю ширину, поэтому пятно шире и ровнее. */
.dossier::before {
  inset: -22px -44px;
  background: radial-gradient(78% 64% at 50% 50%, var(--veil), transparent 80%);
}
.final .page::before {
  background: radial-gradient(58% 62% at 50% 50%, var(--veil), transparent 76%);
}

/* ── Первый экран ─────────────────────────────────────────────────────────
   Портрет вернулся и стал крупным: сайт личный, и первым делом человек должен
   увидеть врача, а не прочитать про него.
   В прошлый раз фото отсюда убрали не просто так - оно висело белым
   прямоугольником посреди графита и выглядело вырезанным из другого макета.
   Лечится это не размером, а рамкой: снимок лежит на тёмной доске как
   отпечаток - латунная волосяная линия по краю, мягкая тень под ним и тёплый
   чёрно-белый тон вместо голого белого. Тон тот же, что у медальона врача на
   других страницах, поэтому фото читается как часть макета.
   С чертежом за место они больше не спорят: текст слева, портрет справа. */
[data-skin="lux"] .hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 124px 0 76px;
  /* Шапка липкая и стоит в потоке, то есть первый экран начинается под ней.
     Пока фон был общий на всю страницу, это было незаметно; с тёмным
     островом над ним оставалась светлая полоса в высоту шапки - шов.
     Поэтому экран заезжает под шапку и добирает эту высоту отступом.
     Высоту меряет lux.js: она зависит от ширины окна и длины имени. */
  margin-top: calc(-1 * var(--hdr-h, 70px));
  padding-top: calc(124px + var(--hdr-h, 70px));
  /* site.css режет герою всё, что вылезло (overflow: hidden). При высоком
     первом экране под нож попадала подпись врача внизу - на светлой версии её
     там просто не было. Поэтому вниз не режем.
     А вбок - режем, и это важно: подложка под текстом (.hero-lux::before)
     торчит на 52px в каждую сторону, а поля страницы на узких экранах всего
     20-48px. Разница вылезала за правый край и делала страницу шире окна:
     на телефоне 422 пикселя вместо 390, то есть её можно было утащить вбок
     пальцем. Клип по горизонтали это гасит, а подложке всё равно - у неё
     края и так прозрачные. Именно clip, а не hidden: hidden по одной оси
     превращает вторую в auto, и вертикальный запас снова обрежется. */
  overflow-x: clip;
  overflow-y: visible;
}
/* .page - гибкий элемент внутри .hero, и без ширины он сжимается по содержимому
   и уезжает в центр вместе с margin:auto. Текст первого экрана должен стоять по
   той же левой границе, что и логотип в шапке. */
[data-skin="lux"] .hero > .page { width: 100%; }
.hero-lux { max-width: 1000px; }
/* Первый экран с портретом плотнее по вертикали: кнопок там три, они встают
   в две строки, и с общими отступами экран вырастал на целую строку. Правило
   отдельное, потому что тот же .hero есть на онлайн-разборе - там ни портрета,
   ни третьей кнопки, и ужимать нечего. */
[data-skin="lux"] .hero--split {
  padding-bottom: 66px;
  padding-top: calc(106px + var(--hdr-h, 70px));
}
/* Две колонки: слева всё, что читают, справа портрет. Отдельным классом,
   а не общим правилом: этот же .hero-lux стоит на первом экране онлайн-разбора,
   и там колонка одна - без класса сетка растащила бы текст по двум.
   Ширина правой колонки на резинке - иначе на 1000-1100 пикселях фото съедает
   столько, что заголовок в одну строку (у него text-wrap: nowrap) перестаёт
   помещаться. */
.hero-lux--split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, clamp(280px, 31vw, 420px));
  gap: clamp(24px, 3vw, 40px);
  align-items: center;
}
.hero-lux__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-lit);
  margin-bottom: 34px;
}
.hero-lux__eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 169, 97, .5), transparent);
}
/* Перенос строки задан в разметке - ограничивать ширину нельзя, иначе
   заголовок ломается на три строки и первый экран не помещается в окно. */
.hero-lux h1 { text-wrap: nowrap; }
@media (max-width: 640px) { .hero-lux h1 { text-wrap: balance; } }
.hero-lux__lead {
  max-width: 46ch;
  margin: 30px 0 40px;
}
.hero-lux__cta { display: flex; flex-wrap: wrap; gap: 14px; }
/* Срок ответа под кнопкой - самое дешёвое доказательство надёжности из всех,
   и на живом сайте он есть, а на первом экране не было ни разу. */
.hero-lux__srok {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 9px;
}
.hero-lux__srok::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
/* Регалии тонкой строкой внизу колонки - вместо прежней подписи с медальоном:
   лицо теперь и так на экране, а имя стоит заголовком. */
.hero-lux__creds {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  max-width: 52ch;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-3);
}

/* Портрет. Снимок вырезан с фона (webp с прозрачностью), поэтому ни рамки,
   ни тени ему не нужно: врач стоит прямо на странице, а не лежит на ней
   отпечатком. Прежняя обвязка - латунная линия по краю, тень, тёмный градиент
   снизу - была лечением белого прямоугольника; прямоугольника нет, лечить
   нечего.
   Кадрирования тоже нет: файл обрезан ровно по силуэту, поэтому картинка
   показывается целиком. Кадрировать в вёрстке пробовали - обрезка резала
   плечи вертикальной линией, и человек выглядел приклеенным к краю.
   Низ уводим в прозрачность маской: халат обрывается по нижней кромке кадра
   и выглядел бы обрезком. Маска, а не градиент цветом, - тогда одинаково
   работает и на графите, и на бумаге. */
.hero-lux__photo {
  margin: 0;
  position: relative;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 99%);
          mask-image: linear-gradient(180deg, #000 72%, transparent 99%);
}
.hero-lux__photo img {
  display: block;
  width: 100%;
  height: auto;
  /* Снимок цветной - решение Евгения от 17.08. До этого он приводился
     к тёплому чёрно-белому под графит и латунь; фильтр убран, потому что
     врача лучше видно живым, а не отпечатком. Тот же порядок на всех
     страницах, где стоит этот же кадр. */
}

/* ── Частые вопросы ───────────────────────────────────────────────────────
   Та же механика, что у кейсов: свёрнутый вопрос - строка, ответ по клику.
   Пять вопросов подряд развёрнутыми превращают конец страницы в стену. */
/* ВАЖНО: класс .faq уже занят в site.css - там это карточка с заливкой,
   рамкой, скруглением и собственным шевроном через summary::after. Мои
   правила легли поверх, и получилось два указателя и светлая плашка посреди
   графита. Гасим карточку и пользуемся её же шевроном - свой не нужен. */
.faq {
  display: block;
  gap: 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  overflow: visible;
}
.faq details { background: none; }
.faq summary:hover { background: none; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  font-size: clamp(16px, 1.6vw, 20px);
  letter-spacing: -0.015em;
  transition: opacity .2s var(--ease);
}
/* Свой плюс в кружке уже есть, а браузер рисует рядом собственную стрелку.
   Гасим все три способа: старый вебкитовский маркер, ::marker и list-style -
   какой именно сработает, зависит от версии браузера. */
.faq__item > summary::-webkit-details-marker,
.dossier__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::marker,
.dossier__item > summary::marker { content: ''; }
.faq__item, .faq__item > summary,
.dossier__item, .dossier__item > summary { list-style: none; }
.faq__item > summary:hover { opacity: .75; }
.faq__q { flex: 1; }
/* Указатель один - тот, что уже рисует site.css через summary::after.
   Свой шеврон убран, иначе на строке два одинаковых значка. */
.faq summary::after { margin-left: auto; }
.faq__item[open] > summary::after { border-color: var(--accent); }
.faq__a {
  padding: 0 58px 26px 0;
  max-width: 76ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-2);
}

/* ── Форма заявки ─────────────────────────────────────────────────────────
   Человек, дочитавший главную до конца, не должен уходить на другую страницу,
   чтобы написать. */
.zapis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 76px); align-items: start; }
.zapis__side p { color: var(--text-2); font-size: 15.5px; line-height: 1.6; }
.zapis__side p + p { margin-top: 14px; }
.zapis__what {
  margin-top: 24px;
  padding-left: 22px;
  border-left: 1px solid var(--accent);
}
.zapis__what b { display: block; margin-bottom: 10px; font-weight: 500; }
.zapis__what ol { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 15px; line-height: 1.7; }
[data-skin="lux"] .field input,
[data-skin="lux"] .field textarea,
[data-skin="lux"] .field select {
  background: var(--card);
  border-color: var(--line);
  border-radius: 4px;
}
/* Своя стрелка вместо системной: системная в macOS рисует синюю пилюлю,
   и поле выпадает из гаммы страницы. */
[data-skin="lux"] .field select {
  appearance: none;
  padding-right: 42px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 21px) calc(50% + 1px), calc(100% - 16px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
[data-skin="lux"] .field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
[data-skin="lux"] .form__micro {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
}

@media (max-width: 900px) { .zapis { grid-template-columns: 1fr; } }

/* Подпись врача: медальон, имя, регалии одной строкой. */
.signature {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 54px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  max-width: 560px;
}
/* Тот же приём, что у медальона в шапке: силуэт на графитовом кружке. */
.signature img {
  width: 58px; height: 58px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  /* Цветной - как медальон в шапке (17.08). */
  border: 1px solid rgba(201, 169, 97, .42);
  background: radial-gradient(circle at 50% 32%, #2E2822 0%, #16130F 78%);
}
.signature__name { font-weight: 500; letter-spacing: -0.01em; }
.signature__meta { font-size: 12.5px; color: var(--text-3); margin-top: 3px; line-height: 1.45; }

/* Тонкая полоса «дальше» внизу первого экрана. */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 12px;
}
.scroll-hint::after {
  content: '';
  width: 1px; height: 34px;
  background: linear-gradient(180deg, var(--gold-lit), transparent);
}

/* ── Кейсы: досье вместо карточек ─────────────────────────────────────────
   Четыре одинаковых карточки с тремя абзацами каждая - это стена текста, и её
   не читают. Теперь свёрнутый кейс - одна строка: город, что вышло, сколько
   сэкономлено. Подробности открываются по клику тому, кому они нужны. */
.dossier { border-top: 1px solid var(--line); }
.dossier__item { border-bottom: 1px solid var(--line); }
.dossier__item > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 54px minmax(0, .85fr) minmax(0, 2fr) 34px;
  align-items: center;
  gap: 26px;
  padding: 26px 0;
  transition: opacity .2s var(--ease);
}
.dossier__item > summary::-webkit-details-marker { display: none; }
.dossier__item > summary:hover { opacity: .78; }
.dossier__no {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.dossier__who { font-size: 15px; color: var(--text-2); }
.dossier__what {
  font-size: clamp(16px, 1.6vw, 21px);
  letter-spacing: -0.015em;
  line-height: 1.35;
}
/* Деньги внутри строки результата - латунью. Отдельной колонкой их держать
   нельзя: у казанского кейса денег нет вовсе, и колонка зияла бы прочерком. */
.dossier__what b {
  color: var(--accent);
  font-weight: inherit;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Указатель «раскрыть». Был плюс в кружке - и он читался как «добавить», а
   не как «развернуть»: плюс на сайтах чаще всего значит именно добавление.
   Ставим стрелку вниз, при раскрытии она переворачивается вверх. Это тот же
   значок, что и у вопросов ниже по странице, - один язык на всю страницу. */
.dossier__toggle {
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid; place-items: center;
  flex: none;
  font-size: 0;                      /* прячем плюс из старой разметки */
  color: var(--accent);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.dossier__toggle::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s var(--ease);
}
.dossier__item[open] .dossier__toggle { border-color: var(--accent); }
.dossier__item[open] .dossier__toggle::after { transform: rotate(225deg) translate(-2px, -2px); }

/* Тот же значок вместо плюса в аккордеоне «подробнее обо мне». */
[data-skin="lux"] .about-more summary::after {
  content: '';
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .3s var(--ease);
}
[data-skin="lux"] .about-more[open] summary::after {
  content: '';
  transform: rotate(225deg) translate(-3px, -3px);
}
.dossier__body {
  display: grid;
  grid-template-columns: 54px repeat(2, minmax(0, 1fr));
  gap: 26px;
  padding: 0 0 34px 0;
}
.dossier__body > :first-child { grid-column: 2; }
.dossier__lbl {
  display: block;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 9px;
}
.dossier__txt { font-size: 15px; line-height: 1.6; color: var(--text-2); }

/* ── Плитка разделов (регистратура) ───────────────────────────────────────
   Главная отвечает на один вопрос - «куда мне», - и плитка это и есть ответ.
   Карточки не одинаковые: приём и онлайн занимают по половине ряда, потому
   что это услуги, а гайд, вебинар и статьи идут втрое мельче - их берут
   заодно. Разный размер тут работает как порядок приоритетов. */
[data-skin="lux"] .hcard {
  border-radius: 2px;
  background: var(--card);
  min-height: 0;
  padding: 26px 26px 22px;
}
[data-skin="lux"] .hcard:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: none;
}
[data-skin="lux"] .hcard__num {
  font-size: 12px;
  letter-spacing: .14em;
  font-weight: 400;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
[data-skin="lux"] .hcard h3 { font-size: clamp(19px, 2vw, 25px); font-weight: 400; letter-spacing: -0.02em; }
[data-skin="lux"] .hcard__sub { color: var(--text-2); }
[data-skin="lux"] .hcard__price { font-weight: 400; color: var(--accent); font-variant-numeric: tabular-nums; }
[data-skin="lux"] .hcard__go { border-color: var(--line); }
[data-skin="lux"] .hcard:hover .hcard__go { background: var(--accent); border-color: var(--accent); color: #14120F; }
[data-skin="lux"] .hub__col-title {
  color: var(--text-3);
  font-weight: 500;
  letter-spacing: .2em;
  font-size: 11px;
  margin-top: 22px;
}
[data-skin="lux"] .hub__col-title::after { background: var(--line); }
[data-skin="lux"] .hub__grid { gap: 16px; }

/* ── Прайс: разделы вкладками ─────────────────────────────────────────────
   Как на старом сайте: полоса разделов сверху, под ней один открытый раздел.
   На узком экране полоса едет вбок каруселью - это лучше переноса в три
   этажа, потому что этажи съедают весь первый экран прайса.
   Края полосы растворяются: видно, что разделов больше, чем помещается. */
.ptabs {
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.ptabs__in {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  /* Только вбок. Заданной одной оси мало: по спецификации соседняя ось при
     этом сама становится прокручиваемой, и на телефоне полоса разделов
     ездила ещё и вверх-вниз на несколько пикселей - палец промахивался мимо
     раздела и дёргал полосу. overscroll-behavior не даёт свайпу по разделам
     утащить за собой всю страницу. */
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.ptabs__in::-webkit-scrollbar { display: none; }
@media (max-width: 860px) {
  .ptabs {
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
            mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
}
.ptabs__t {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 12px 14px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 15px;
  color: var(--text-3);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.ptabs__t span {
  margin-left: 8px;
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.ptabs__t:hover { color: var(--text-2); }
.ptabs__t.is-on { color: var(--text); border-bottom-color: var(--accent); }
.ptabs__t.is-on span { color: var(--accent); }

.price__panel { display: none; animation: tabIn .4s var(--ease); }
.price__panel.is-on { display: block; }
/* Во время поиска показываем совпадения из всех разделов сразу и подписываем,
   из какого раздела строка: иначе непонятно, что найдено. */
#price.is-search .price__panel.is-on::before {
  content: attr(data-title);
  display: block;
  margin: 18px 0 6px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
}
[data-skin="lux"] .price__row {
  border-top: 0;
  border-bottom: 1px solid var(--line-soft);
  padding: 13px 2px;
  font-size: 15.5px;
}
[data-skin="lux"] .price__row b { font-weight: 400; color: var(--accent); font-variant-numeric: tabular-nums; }
[data-skin="lux"] .price__search { border-radius: 2px; }
.price__note--panel { margin-top: 14px; font-size: 13px; color: var(--text-3); }

/* ── Запись на очный приём ────────────────────────────────────────────────
   Главное действие страницы - написать администратору, поэтому блок собран
   в одну колонку по центру: заголовок, две кнопки одинакового веса и мелкая
   строка с запасным вариантом. Форма из этого блока убрана не потому, что
   она плохая, а потому что она конкурирует: человек выбирает между «написать»
   и «заполнить восемь полей» и часто не делает ни того, ни другого. */
.zapis-cta { max-width: 720px; margin: 0 auto; text-align: center; }
.zapis-cta .label { justify-content: center; }
.zapis-cta__h {
  margin: 18px 0 16px;
  font-size: clamp(30px, 4vw, 52px);
}
.zapis-cta__lead { margin: 0 auto 34px; max-width: 52ch; }
.zapis-cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.zapis-cta__btns .msg--primary { padding: 16px 30px; font-size: 16px; }

/* «Что дальше» под кнопками. Блок по центру, но текст в нём - по левому
   краю: три строки, выключенные по центру, читаются как эпитафия. */
.zapis-cta__what {
  max-width: 56ch;
  margin: 34px auto 0;
  padding-left: 22px;
  border-left: 1px solid var(--accent);
  text-align: left;
}
.zapis-cta__what b { display: block; margin-bottom: 8px; font-weight: 500; }
.zapis-cta__what p { color: var(--text-2); font-size: 15px; line-height: 1.65; }
.zapis-cta__tiny {
  margin-top: 22px;
  font-size: 13.5px;
  color: var(--text-3);
}
/* Юридическая сноска. Раньше была отдельной секцией на бумаге и резала
   страницу узкой светлой полосой между тёмным блоком записи и тёмным
   подвалом. Теперь живёт внутри тёмного острова: отделена волосяной линией,
   а цвет на ступень ярче служебной строки - это текст, который читают. */
.zapis-cta__legal {
  max-width: 74ch;
  margin: 26px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
}

/* Запасной вариант - мелкой строкой. Кликабельно всё, но подчёркнуто только
   «через форму»: так строка читается как фраза, а не как ещё одна кнопка. */
.zapis-alt { margin-top: 26px; }
.zapis-alt > summary {
  list-style: none;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--text-3);
}
.zapis-alt > summary::-webkit-details-marker { display: none; }
.zapis-alt > summary::marker { content: ''; }
.zapis-alt > summary span {
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.zapis-alt > summary:hover span { color: var(--accent-deep); }
/* Форма заявки внутри тёмного острова. Была прозрачной насквозь: сквозь
   поля просвечивал чертёж, и подписи «Как вас зовут», «Email» читались
   с трудом - ровно там, где человек вводит свои данные. Плотная подложка
   и рамка: тот же приём, что у карточки оплаты. */
.zapis-alt__body {
  margin-top: 26px;
  padding: 26px 24px 24px;
  border: 1px solid rgba(201, 169, 97, .35);
  border-radius: var(--r-md);
  background: #1B1815;
  text-align: left;
  animation: tabIn .4s var(--ease);
}
[data-mode="light"] .zapis-alt__body {
  background: #FFFFFF;
  border-color: rgba(168, 137, 79, .4);
}
.zapis-alt__body .field input,
.zapis-alt__body .field textarea {
  background: rgba(255, 255, 255, .05);
}
[data-mode="light"] .zapis-alt__body .field input,
[data-mode="light"] .zapis-alt__body .field textarea { background: #FDFCFA; }
.zapis-alt__body .btn { justify-self: center; }

/* ── Кейсы: карточки-карусель ─────────────────────────────────────────────
   Раньше кейс был свёрнутой строкой, которую надо развернуть. Проблема в том,
   что развернуть догадывается один из десяти, а остальные видят четыре
   одинаковые строки и проматывают. Карточка показывает всё сразу: кто, что
   было, что сделали, чем кончилось. Карусель нужна, чтобы четыре карточки не
   выстроились стеной на весь экран - листается пальцем и стрелками. */
.cases-slider .slider__track { gap: 18px; }
.case-card {
  width: min(420px, 82vw);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px 26px 24px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--card);
}
.case-card__top {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.case-card__no {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.case-card__who { font-size: 15.5px; letter-spacing: -0.01em; }
.case-card__who i { display: block; font-style: normal; font-size: 13px; color: var(--text-3); margin-top: 3px; }
.case-card__lbl {
  display: block;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 7px;
}
.case-card__part p { font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
/* Итог прижат к низу карточки: у всех кейсов он на одной линии, и колонку
   результатов можно читать по горизонтали, не вчитываясь в подробности. */
.case-card__res {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 15px;
  line-height: 1.5;
}
.case-card__res b {
  color: var(--accent);
  font-weight: inherit;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Край следующей карточки виден и растворяется - так понятно, что кейсов больше. */
[data-skin="lux"] .cases-slider .slider__track {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 60px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 calc(100% - 60px), transparent 100%);
}

/* ── Доказательства: отзывы ───────────────────────────────────────────────
   Слева - крупная цифра и ссылка на источник, справа - сама лента. Скриншот
   без источника проверить нельзя, поэтому источник теперь крупнее скриншотов. */
.proof { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.proof__big {
  font-size: clamp(52px, 6vw, 84px);
  line-height: .9;
  letter-spacing: -0.05em;
  font-family: var(--font-head);
  font-weight: 300;
}
.proof__cap { margin-top: 14px; color: var(--text-2); font-size: 15px; line-height: 1.5; }
/* Скриншот отзыва должен читаться прямо в карусели. В общем site.css он
   обрезан по высоте и кадрирован по левому краю - там это витрина, по которой
   кликают. Здесь наоборот: карточка во всю ширину колонки и полная высота
   картинки, кликать нужно только чтобы разглядеть мелкое. */
[data-skin="lux"] .proof { grid-template-columns: 1fr; }
[data-skin="lux"] .shot {
  width: min(100%, 1100px);
  height: auto;
  border-radius: 4px;
  border-color: var(--line);
  background: #fff;
}
[data-skin="lux"] .shot img {
  height: auto;
  object-fit: contain;
  object-position: center;
}
[data-skin="lux"] .shot:hover img { transform: none; }

/* Отзывы об онлайн-разборе - куски личной переписки: вертикальные, узкие,
   разной высоты. Правило выше рассчитано на широкие скриншоты с площадки
   (1100 px), и переписка в нём раздувалась во весь экран - буквы с палец
   высотой, читать неудобно. Ширину задаём по колонке текста, высоту режем
   и даём «читать целиком» через лайтбокс. */
/* Селектор с id - чтобы перебить правило ленты отзывов ниже: там
   `#otzyvy .slider__item` растягивает карточку почти во всю ширину экрана,
   и переписка раздувалась до 1020 пикселей. */
[data-skin="lux"] .shot--talk,
[data-skin="lux"] #otzyvy .slider__item.shot--talk {
  width: min(360px, 80vw);
  max-height: 460px;
  overflow: hidden;
  /* Лента - это flex, и по умолчанию она растягивает карточки под самую
     высокую: под коротким отзывом появлялось белое поле на пол-экрана.
     Каждая карточка живёт своей высотой. */
  align-self: flex-start;
}
[data-skin="lux"] .shot--talk img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center top;
}

/* Карусель: край следующего отзыва виден и растворяется. Без этого не
   понятно, что за первым скриншотом есть ещё двадцать - лента выглядит
   одной картинкой. Ширину карточки уменьшаем ровно на ширину «подглядки»,
   маска гасит правый край. */
[data-skin="lux"] #otzyvy .slider { --peek: clamp(34px, 7vw, 104px); }
[data-skin="lux"] #otzyvy .slider__item { width: calc(100% - var(--peek)); }
[data-skin="lux"] #otzyvy .slider__track {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--peek)), transparent 100%);
          mask-image: linear-gradient(90deg, #000 calc(100% - var(--peek)), transparent 100%);
}
/* Кнопки карусели не гасим на краях: лента закольцована, край - не тупик. */
[data-skin="lux"] #otzyvy .slider__btn:disabled { opacity: 1; cursor: pointer; }

/* ── Вкладки «с чем приходят» ─────────────────────────────────────────────
   Четыре ситуации подряд читаются как список услуг. Списком слева и одним
   раскрытым ответом справа они читаются как разговор: человек выбирает свою. */
.tabs { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(28px, 5vw, 76px); align-items: start; }
.tabs__list { display: grid; }
.tabs__btn {
  appearance: none;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  text-align: left;
  padding: 20px 4px;
  cursor: pointer;
  font-size: clamp(18px, 1.9vw, 24px);
  font-family: var(--font-head);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text-3);
  transition: color .2s var(--ease), padding-left .25s var(--ease);
  display: flex;
  align-items: center;
  gap: 14px;
}
.tabs__list .tabs__btn:last-child { border-bottom: 1px solid var(--line); }
.tabs__btn::before {
  content: '';
  width: 0; height: 1px;
  background: var(--accent);
  transition: width .25s var(--ease);
}
.tabs__btn:hover { color: var(--text-2); }
.tabs__btn.is-on { color: var(--text); }
.tabs__btn.is-on::before { width: 26px; }
.tabs__pane { display: none; }
.tabs__pane.is-on { display: block; animation: tabIn .45s var(--ease); }
@keyframes tabIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tabs__pain {
  font-family: var(--font-head);
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.025em;
  margin-bottom: 22px;
}
.tabs__ans { font-size: 16.5px; line-height: 1.65; color: var(--text-2); max-width: 52ch; }
.tabs__ans b { color: var(--accent); font-weight: 500; }
/* Без скрипта вкладки должны читаться все подряд - иначе три четверти блока
   пропадут у человека с выключенным JS и у поисковика. */
html:not(.js) .tabs__pane { display: block; margin-bottom: 34px; }
html:not(.js) .tabs { grid-template-columns: 1fr; }
html:not(.js) .tabs__list { display: none; }

/* ── Шаги разбора: рельс с крупными цифрами ───────────────────────────── */
.rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.rail__step { border-top: 1px solid var(--line); padding-top: 24px; }
.rail__no {
  font-family: var(--font-head);
  font-size: clamp(40px, 4.6vw, 62px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
  margin-bottom: 20px;
}
.rail__step h3 { margin-bottom: 10px; }
.rail__step p { color: var(--text-2); font-size: 15.5px; line-height: 1.6; }
.rail__note {
  margin-top: clamp(28px, 3.4vw, 46px);
  padding-left: 22px;
  border-left: 1px solid var(--accent);
  font-size: 15.5px;
  color: var(--text-2);
  max-width: 62ch;
}

/* ── Кто я: портрет и досье ───────────────────────────────────────────── */
.bio { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.bio__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Снимок шире, чем окно под него, поэтому бока обрезаются, и от этого
     числа зависит, какая полоса файла видна. Меньше - лицо едет вправо,
     больше - влево. По центру файла (50%) лицо стояло слишком влево,
     на 25% и 35% - всё ещё вправо; остановились на 45%, ориентир - кончик носа
     у середины рамки. Правка 18.08. */
  object-position: 45% 20%;
  border-radius: 2px;
  /* Тоже цветной (17.08). Снимок другой - улыбка, тёплый студийный фон -
     и на бумажной половине страницы этот тёплый коричневый ложится в общий
     тон, а не спорит с латунью. Рядом с цветным портретом на первом экране
     чёрно-белый снимок читался бы как недоделка. */
}
.bio__photo figcaption { margin-top: 12px; font-size: 12.5px; color: var(--text-3); }
.bio__text p { font-size: 16.5px; line-height: 1.66; color: var(--text-2); }
.bio__text p + p { margin-top: 16px; }
/* Досье - таблица фактов. Регалии в столбик проверяются глазом за секунду,
   а тем же текстом внутри абзаца - никогда. */
.facts { margin-top: 34px; border-top: 1px solid var(--line); }
.facts__row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 22px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
}
.facts__row dt { color: var(--text-2); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding-top: 3px; }
.facts__row dd { color: var(--text); }

/* ── Цифры ────────────────────────────────────────────────────────────── */
/* Колонки одинаковой ширины, а цифры в них - разной длины: «до 300к ₽» втрое
   шире, чем «87%». На общем кегле она упиралась в соседнюю колонку. Лечим
   двумя вещами сразу: колонка подстраивается под содержимое, и между
   колонками появляется настоящий зазор, а не только волосяная линия. */
.figures {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  column-gap: clamp(20px, 3.4vw, 56px);
}
.figure { padding-left: clamp(18px, 2.4vw, 40px); border-left: 1px solid var(--line); }
.figure:first-child { border-left: 0; padding-left: 0; }
.figure__n {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1;
  letter-spacing: -0.05em;
  margin-bottom: 14px;
  white-space: nowrap;
  /* Моноширинные цифры: у обычных единица уже семёрки, и пока счётчик
     набирает число, цифры подрагивают на месте даже при неизменной длине. */
  font-variant-numeric: tabular-nums;
}
.figure__n i { font-style: normal; color: var(--accent); }
/* Денежная цифра длиннее прочих в три раза: на общем кегле она вылезала из
   своей колонки и наезжала на соседнюю. Ей нужен свой размер, а не перенос -
   перенос у крупных цифр читается как две разные цифры. */
.figure__n--sum {
  font-size: clamp(26px, 3vw, 44px);
  letter-spacing: -0.03em;
  padding-top: .28em;
  padding-bottom: .22em;
}
.figure p { font-size: 14px; color: var(--text-2); line-height: 1.45; }

/* ── Прайс-лист ───────────────────────────────────────────────────────────
   Не карточки тарифов, а лист с отточием: название - точки - цена. Приём из
   меню, и он делает ровно то, что нужно тут - показывает, что цены открыты
   и их не прячут за кнопкой «узнать стоимость». */
.tariff-list { border-top: 1px solid var(--line); }
.tariff-row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(24px, 1fr) auto;
  align-items: baseline;
  gap: 14px;
  padding: 19px 0;
  border-bottom: 1px solid var(--line-soft);
}
.tariff-row__nm { font-size: clamp(17px, 1.7vw, 21px); letter-spacing: -0.015em; }
.tariff-row__nm span { display: block; font-size: 13.5px; color: var(--text-3); margin-top: 4px; letter-spacing: 0; }
.tariff-row__dots {
  border-bottom: 1px dotted var(--line);
  transform: translateY(-4px);
}
.tariff-row__pr {
  font-size: clamp(17px, 1.7vw, 21px);
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tariff-row--pick .tariff-row__pr { color: var(--accent); }
.tariff-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
}
.tariff-foot p { color: var(--text-2); font-size: 15px; max-width: 46ch; }

/* ── Финал: связаться ─────────────────────────────────────────────────── */
.final { text-align: center; padding: clamp(70px, 10vw, 150px) 0; }
.final h2 { max-width: 16ch; margin: 0 auto 26px; }
.final__lead { max-width: 52ch; margin: 0 auto 42px; }
.final__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.final__tiny { margin-top: 22px; color: var(--text-3); font-size: 13px; }

/* ── Лента разделов ───────────────────────────────────────────────────── */
.strip { border-top: 1px solid var(--line); }
.strip__it {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 19px 0;
  border-bottom: 1px solid var(--line-soft);
  transition: padding-left .25s var(--ease), color .2s var(--ease);
}
.strip__it:hover { padding-left: 12px; color: var(--accent); }
.strip__nm { font-size: 16.5px; letter-spacing: -0.01em; }
.strip__meta { font-size: 13px; color: var(--text-3); margin-left: auto; white-space: nowrap; }
.strip__go { color: var(--accent); }

/* ── Абзац, который проявляется по прокрутке ──────────────────────────────
   Слова стоят приглушёнными и наливаются цветом по очереди, пока абзац
   проходит середину окна. Механику взяли у originkit (там GSAP), сделали на
   своих двадцати строках. Появление слова - не просто цвет: лёгкий сдвиг и
   уход размытия, приём из 21st.dev. Вместе это читается как чужой голос,
   который проговаривает фразу, а не как анимация ради анимации. */
.fx-highlight { color: var(--text-3); }
.fx-word {
  display: inline-block;
  color: var(--text-3);
  filter: blur(2.4px);
  opacity: .55;
  transform: translateY(4px);
  transition: color .5s var(--ease), opacity .5s var(--ease),
              filter .5s var(--ease), transform .5s var(--ease);
}
.fx-word.is-lit {
  color: var(--text);
  opacity: 1;
  filter: none;
  transform: none;
}
/* Без JS и при «меньше движения» абзац обязан быть обычным абзацем. */
.fx-highlight--off .fx-word,
html:not(.js) .fx-word {
  color: inherit; opacity: 1; filter: none; transform: none; transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .fx-word { color: inherit; opacity: 1; filter: none; transform: none; transition: none; }
}

/* ── Появление по буквам ──────────────────────────────────────────────────
   Два приёма на одном движке. «Пружина» - буквы встают снизу и чуть
   перелетают: живо, но заметно, поэтому на главной такой заголовок один.
   «Фокус» - буквы наводятся на резкость из размытия: спокойнее и киношнее,
   он живёт на страницах инфопродуктов. */
.fx-letters { display: inline; }
/* Но заголовок должен остаться блоком. Строчным он вставал в одну строку
   с меткой, которая идёт перед ним («Записанный вебинар · 2 249 ₽»), и первое
   слово заголовка уезжало вправо, налезая на метку. Видно было на вебинаре
   и на гайде - там перед h1 как раз стоит такая метка. */
h1.fx-letters, h2.fx-letters, h3.fx-letters { display: block; }
.fx-w { display: inline-block; white-space: nowrap; }
.fx-c {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.fx-letters--rise .fx-c {
  transform: translateY(0.5em);
  opacity: 0;
  transition: transform .62s cubic-bezier(.2, 1.5, .4, 1), opacity .45s var(--ease);
}
.fx-letters--focus .fx-c {
  filter: blur(9px);
  opacity: 0;
  transform: scale(1.06);
  transition: filter .7s var(--ease), opacity .7s var(--ease), transform .7s var(--ease);
}
.fx-letters.is-in .fx-c {
  transform: none;
  opacity: 1;
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .fx-c { transform: none !important; opacity: 1 !important; filter: none !important; transition: none; }
}

/* ── Слово, которое меняется ──────────────────────────────────────────────
   Заголовок стоит, а одно слово в нём перебирает ситуации. Ширина слота
   зафиксирована по самому длинному слову - иначе строка дёргается на каждой
   смене, и вместо приёма получается нервный тик. */
.fx-word-slot {
  display: inline-block;
  color: var(--accent);
  transition: opacity .3s var(--ease), transform .3s var(--ease), filter .3s var(--ease);
}
.fx-word-slot.is-out { opacity: 0; transform: translateY(-.18em); filter: blur(4px); }

/* ── Бегущая строка городов ───────────────────────────────────────────────
   Полоса на всю ширину, едет медленно сама и ускоряется от прокрутки.
   Края растворяются, чтобы лента не обрубалась о рамку окна. */
.rail-cities {
  overflow: hidden;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.rail-cities__in { display: flex; width: max-content; will-change: transform; }
.rail-cities__row { display: flex; align-items: center; flex: none; }
.rail-cities__it {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  font-size: clamp(15px, 1.7vw, 21px);
  letter-spacing: -0.01em;
  color: var(--text-2);
  white-space: nowrap;
}
.rail-cities__it::after {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .6;
}

/* ── Блеск по строке ──────────────────────────────────────────────────────
   Медленный блик по тексту. Ставим ровно там, где он что-то значит, -
   на метке «чаще всего берут» у тарифа. */
.shine {
  background: linear-gradient(100deg,
    currentColor 20%, #FFF3D0 38%, currentColor 56%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 5.5s linear infinite;
}
@keyframes shine { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) { .shine { animation: none; -webkit-text-fill-color: currentColor; } }

/* ── Наклон карточки инфопродукта ─────────────────────────────────────────
   Карточка чуть поворачивается за курсором, по ней ходит блик. Приём
   магазинный - и работает он именно там, где продают вещь, а не услугу. */
[data-tilt] {
  position: relative;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .35s var(--ease);
  isolation: isolate;
}
[data-tilt]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .35s var(--ease);
  background: radial-gradient(42% 42% at var(--gx, 50%) var(--gy, 50%),
              rgba(255, 245, 220, .16), transparent 70%);
}
[data-tilt]:hover::after { opacity: 1; }

/* ── Дот-матрица на финальном экране ──────────────────────────────────────
   Точечное поле, которое медленно дышит двумя слоями с разной скоростью.
   В каталоге это шум Перлина на холсте; здесь тот же эффект двумя слоями
   CSS - без единого килобайта скриптов и без нагрузки на телефон. */
.final.ink-zone::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image:
    radial-gradient(rgba(201, 169, 97, .5) 1px, transparent 1.2px),
    radial-gradient(rgba(201, 169, 97, .3) 1px, transparent 1.2px);
  background-size: 34px 34px, 52px 52px;
  -webkit-mask-image: radial-gradient(72% 60% at 50% 50%, #000, transparent 78%);
          mask-image: radial-gradient(72% 60% at 50% 50%, #000, transparent 78%);
  animation: dots 26s linear infinite;
}
@keyframes dots {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 34px 68px, -52px 52px; }
}
@media (prefers-reduced-motion: reduce) { .final.ink-zone::after { animation: none; } }

/* ── Пульс по сетке на юридических страницах ──────────────────────────────
   Там нет трёхмерной сцены - и лист получается совсем неподвижным. Один
   медленный световой проход по миллиметровке за двадцать секунд возвращает
   странице дыхание и никому не мешает читать. */
body.no-scene .bg-grid {
  animation: gridPulse 22s ease-in-out infinite;
}
@keyframes gridPulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { body.no-scene .bg-grid { animation: none; } }

/* ── Кнопки: заливка от точки курсора ─────────────────────────────────────
   Из точки, где курсор вошёл в кнопку, растекается заливка. Латунь на тёмном,
   графит на бумаге - кнопка на наведении меняется местами со своим фоном.
   Сама кнопка при этом стоит на месте: притяжение к курсору пробовали и
   убрали, на врачебном сайте оно неуместно.

   Раньше приём стоял только на крупных кнопках, теперь на всех: мелкие
   «Далее» и «Отмена» отзывались иначе, и разнобой был заметнее самого эффекта.
   Липкая кнопка исключена намеренно - она `position: fixed`, и `relative`
   отсюда сорвал бы её с места. Отклика она всё равно не теряет: живёт только
   на телефоне, где наведения нет. */
[data-skin="lux"] .btn:not(.sticky-cta),
[data-skin="lux"] .msg--primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background .25s var(--ease), color .25s var(--ease);
}
[data-skin="lux"] .btn:not(.sticky-cta)::after,
[data-skin="lux"] .msg--primary::after {
  content: '';
  position: absolute;
  left: var(--mx, 50%);
  top: var(--my, 50%);
  z-index: -1;
  width: 260%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--btn-sweep, rgba(255, 255, 255, .14));
  scale: 0;
  transition: scale .45s cubic-bezier(.22, 1, .36, 1);
}
[data-skin="lux"] .btn:not(.sticky-cta):hover::after,
[data-skin="lux"] .msg--primary:hover::after { scale: 1; }
[data-skin="lux"] .btn { --btn-sweep: rgba(201, 169, 97, .22); }
[data-skin="lux"] .ink-zone .btn { --btn-sweep: rgba(20, 18, 15, .16); }
[data-skin="lux"] .btn--ghost,
[data-skin="lux"] .ink-zone .btn--ghost { --btn-sweep: rgba(168, 137, 79, .12); }

/* ── Список статей ────────────────────────────────────────────────────────
   Строка вместо карточки: статей мало, и каждая должна читаться как
   заголовок, а не как плитка. Картинка всплывает под курсором (её показывает
   тот же скрипт, что и на витрине элементов). */
.artlist { list-style: none; max-width: 820px; }
.artlist li { border-top: 1px solid var(--line); }
.artlist li:last-child { border-bottom: 1px solid var(--line); }
.artlist a {
  display: grid;
  gap: 8px;
  padding: 26px 0;
  transition: padding-left .3s var(--ease);
}
.artlist a:hover { padding-left: 14px; }
.artlist__tag {
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.artlist__nm {
  font-family: var(--font-head);
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.15;
  max-width: 24ch;
}
.artlist a:hover .artlist__nm { color: var(--accent); }
.artlist__meta { font-size: 13px; color: var(--text-3); }

/* ── Таймлайн «что и когда» ───────────────────────────────────────────────
   Слева срок, справа что происходит. Читается сверху вниз как расписание,
   а не как схема процесса - человеку важнее «когда», чем «как устроено». */
.tline { display: grid; max-width: 820px; }
.tline__row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--line-soft);
}
.tline__row:first-child { border-top: 1px solid var(--line); }
.tline__row:last-child { border-bottom: 1px solid var(--line); }
.tline__k {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 4px;
}
.tline__row p { font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
@media (max-width: 700px) {
  .tline__row { grid-template-columns: 1fr; gap: 8px; }
}

/* ── Статья: оглавление сбоку и парные картинки ───────────────────────────
   Статья идёт двадцать минут. Без оглавления человек не знает ни сколько
   впереди, ни можно ли перескочить к своему разделу - а перескочить чаще
   всего и надо: врач ищет одну методику из пяти.
   Колонка липкая и стоит слева от текста; на узком экране становится
   обычным раскрывающимся списком над статьёй. */
.article-wrap {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  max-width: 1000px;
  margin: 0 auto;
}
.article-wrap .article { margin: 0; }
.artnav {
  position: sticky;
  top: calc(var(--hdr-h, 80px) + 24px);
  border-left: 1px solid var(--line);
  padding-left: 16px;
}
.artnav__t {
  display: block;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  margin-bottom: 12px;
}
.artnav__list { display: grid; gap: 9px; }
.artnav__list a {
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--text-3);
  transition: color .2s var(--ease);
}
.artnav__list a:hover { color: var(--text-2); }
.artnav__list a.is-on { color: var(--accent); }
[data-skin="lux"] .article h2 { scroll-margin-top: calc(var(--hdr-h, 80px) + 24px); }

/* Две схемы про одно и то же - рядом, а не одна под другой: так их
   и сравнивают. */
.article__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 32px 0; }
.article__pair figure { margin: 0; }

@media (max-width: 900px) {
  .article-wrap { grid-template-columns: 1fr; }
  .artnav {
    position: static;
    border-left: 0;
    border-bottom: 1px solid var(--line);
    padding: 0 0 18px;
  }
  .artnav__list { grid-template-columns: 1fr 1fr; display: grid; gap: 8px 18px; }
  .article__pair { grid-template-columns: 1fr; }
}

/* ── Лонгрид ──────────────────────────────────────────────────────────────
   Статья - это та же бумага, только с колонкой текста. Цитаты и метки в ней
   были розовыми (второй акцент старой палитры) и выбивались из гаммы. */
[data-skin="lux"] .article__tag {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;
}
[data-skin="lux"] .article blockquote,
[data-skin="lux"] .pull {
  background: transparent;
  border-left: 1px solid var(--accent);
  border-radius: 0;
  padding: 4px 0 4px 22px;
  font-style: normal;
  color: var(--text-2);
}
/* Заголовок, который сам по себе цитата: линия слева остаётся, кегль -
   заголовочный. Кавычки уже стоят в тексте, вторых не добавляем. */
[data-skin="lux"] h2.pull {
  padding-left: 26px;
  color: var(--text);
  font-weight: 400;
  letter-spacing: -0.02em;
}
[data-skin="lux"] .article h2 { letter-spacing: -0.025em; font-weight: 400; }
/* Картинки в статье - как в оригинале: по центру, уже колонки текста и
   никогда не крупнее исходника. Во всю ширину они выглядели плакатами и
   рвали чтение, а мелкие вроде схемы на 700px ещё и мылились от растяжения. */
[data-skin="lux"] .article figure { margin: 34px 0; text-align: center; }
[data-skin="lux"] .article figure img {
  width: auto;
  max-width: min(660px, 100%);
  margin: 0 auto;
  border-radius: 2px;
}
/* Подпись под картинкой - по центру и мельче текста статьи, как на Тильде.
   Линию слева убрали: она тянула подпись влево, а картинка стоит по центру. */
[data-skin="lux"] .article figcaption {
  max-width: 560px;
  margin: 12px auto 0;
  padding-left: 0;
  border-left: 0;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.5;
}
/* Портрет автора после эпиграфов - круг 150px по центру, как в оригинале.
   Раньше это фото 300x300 растягивалось во всю колонку. */
[data-skin="lux"] .article figure.article__face { margin: 40px 0 34px; text-align: center; }
/* Вес селектора тут не прихоть: общее правило для картинок статьи идёт
   с [data-skin], и без него круг превращался обратно в квадрат. */
[data-skin="lux"] .article figure.article__face img {
  width: 150px; height: 150px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto;
  border: 1px solid var(--line);
}
[data-skin="lux"] .artcard { border-radius: 2px; }
/* В «Латуни» заливка прогресса - латунная, дорожка под ней та же латунь,
   разбавленная до фона. Красить надо .progress__bar, а не .progress:
   .progress теперь дорожка, и сплошная латунь на ней съедала весь смысл. */
[data-skin="lux"] .progress { background: color-mix(in srgb, var(--accent) 18%, transparent); }
[data-skin="lux"] .progress__bar { background: var(--accent); }

/* ── Мелочи ───────────────────────────────────────────────────────────── */
[data-skin="lux"] .section { border-top: 0; }
[data-skin="lux"] .section--soft { background: transparent; }
[data-skin="lux"] .ftr { background: transparent; border-top: 1px solid var(--line); }
[data-skin="lux"] .msg { border-radius: 999px; }
[data-skin="lux"] .msg--primary { background: var(--accent); border-color: var(--accent); color: #14120F; }
[data-skin="lux"] .msg--primary .msg__ico { color: #14120F; }
[data-skin="lux"] .msg--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #14120F; }
[data-skin="lux"] .sticky-cta { --btn-bg: var(--ink); --btn-fg: #FAF8F4; }
[data-skin="lux"] .after-note { color: var(--text-3); font-size: 12.5px; margin-top: 18px; }

/* Заголовок раздела: метка сверху, заголовок под ней, лид рядом. */
.head-lux { margin-bottom: clamp(34px, 4.4vw, 64px); }
.head-lux .label { margin-bottom: 20px; }
.head-lux__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: end; }
.head-lux__row p { color: var(--text-2); font-size: 16px; line-height: 1.6; }

/* ════════════════════════════════════════════════════════════════════════
   ВАРИАНТЫ ОФОРМЛЕНИЯ

   Их три, и разница между ними ровно одна: сколько на странице тёмных
   островов. Сама вёрстка не меняется - остров помечается классом .ink-zone,
   а какие блоки его получат, решает lux.js при загрузке.

     «Микс» (по умолчанию)  - острова там, где помечено в разметке:
                              первый экран, финальный призыв, подвал.
     «Светлый»              - островов нет вовсе, кроме помеченных .keep-ink.
     «Тёмный»               - островом становится вся страница.

   Раньше варианты жили в CSS и каждый тянул за собой десятки правил про
   «а вот тут кнопка должна быть другой». Теперь правило одно: остров тёмный,
   бумага светлая, - а варианты просто расставляют острова.
   ════════════════════════════════════════════════════════════════════════ */

/* Тёмный целиком: подложка страницы графитовая, отдельные подложки островов
   не нужны - они рисовали бы графит по графиту. */
[data-skin="lux"][data-mode="solid"] .bg-paper {
  background:
    radial-gradient(58% 46% at 72% 12%, rgba(201, 169, 97, .10), transparent 70%),
    radial-gradient(52% 44% at 10% 78%, rgba(110, 34, 51, .10), transparent 72%),
    linear-gradient(180deg, #17140F 0%, #100E0B 100%);
}
[data-skin="lux"][data-mode="solid"] .bg-grid {
  background-image:
    linear-gradient(rgba(201, 169, 97, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 169, 97, .055) 1px, transparent 1px);
}
[data-skin="lux"][data-mode="solid"] .ink-zone::before { display: none; }
[data-skin="lux"][data-mode="solid"] body.no-scene .bg-paper::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 700' fill='none' stroke='%23C9A961'%3E%3Cg stroke-opacity='.34' stroke-width='1.6'%3E%3Cpath d='M100 140 C140 520 380 660 600 660 C820 660 1060 520 1100 140'/%3E%3Cpath d='M212 150 C246 455 416 566 600 566 C784 566 954 455 988 150'/%3E%3C/g%3E%3C/svg%3E");
  opacity: .7;
}

/* Подвал в светлом варианте уходит в золото: страница заканчивается цветом,
   а не ещё одним белым экраном. Текст по золоту тёмный - контраст 8:1,
   читается лучше, чем белый по золоту. */
[data-skin="lux"][data-mode="light"] .ftr {
  background: linear-gradient(180deg, #CBAB63 0%, #B4924B 100%);
  border-top: 0;
  --text:   #14120F;
  --text-2: #3A3227;
  --text-3: #4F4535;
  --line:      rgba(20, 18, 15, .18);
  --line-soft: rgba(20, 18, 15, .12);
  --accent: #14120F;
  color: var(--text);
}
[data-skin="lux"][data-mode="light"] .ftr a,
[data-skin="lux"][data-mode="light"] .ftr .link,
[data-skin="lux"][data-mode="light"] .ftr h4 { color: #14120F; }

/* ── Узкие экраны ─────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .proof, .tabs, .bio { grid-template-columns: 1fr; }
  .rail { grid-template-columns: 1fr; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  .figure:nth-child(3) { border-left: 0; padding-left: 0; }
  .head-lux__row { grid-template-columns: 1fr; align-items: start; }
  .bio__photo { max-width: 320px; }
}

/* Первый экран складывается раньше остальных: колонка с текстом упирается
   в заголовок, который на широких экранах идёт одной строкой. */
@media (max-width: 900px) {
  .hero-lux--split { grid-template-columns: 1fr; gap: 22px; }
  /* Фото уходит наверх: «крупно в первом блоке» на телефоне - это то, что
     видно сразу, а не то, до чего надо долистать. Ширину ограничиваем: на
     планшете колонка широкая, и портрет во всю её ширину занял бы пол-окна,
     утащив кнопки за нижний край. */
  /* По центру колонки: max-width без выравнивания прижимал портрет к левому
     краю, и на телефоне он стоял не по центру экрана, а в углу. */
  .hero-lux__photo { order: -1; max-width: 360px; margin-inline: auto; }
}
/* На телефоне портрет ещё меньше: каждая сотня пикселей высоты здесь - это
   вопрос, видно кнопку «Приём в Москве» на первом экране или нет.
   Замер на 390×844: с прежними значениями заголовок начинался на 441-м
   пикселе, то есть за сгибом - человек первым делом видел фотографию
   и пустоту, а не то, куда он попал. Портрет ужат, воздух над ним снят,
   заголовок поднялся примерно на 130 пикселей. */
@media (max-width: 560px) {
  .hero-lux__photo { max-width: 200px; }
  [data-skin="lux"] .hero--split {
    padding-top: calc(18px + var(--hdr-h, 62px));
    padding-bottom: 52px;
  }
  .hero-lux--split { gap: 14px; }
  .hero-lux__lead { margin: 16px 0 24px; }
}

@media (max-width: 760px) {
  [data-skin="lux"] .hero {
    padding: 108px 0 76px;
    padding-top: calc(88px + var(--hdr-h, 62px));
    min-height: auto;
  }
  /* На главной отступ сверху вдвое меньше: под шапкой сразу портрет, и пустая
     полоса над ним уводила кнопки за нижний край экрана. */
  [data-skin="lux"] .hero--split {
    padding-bottom: 64px;
    padding-top: calc(56px + var(--hdr-h, 62px));
  }
  .hero-lux__lead { margin: 22px 0 30px; }
  .signature { margin-top: 38px; }
  .hero-lux__creds { margin-top: 32px; }
  .scroll-hint { display: none; }

  /* Свёрнутый кейс на телефоне - две строки вместо четырёх колонок. */
  .dossier__item > summary {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 16px;
    padding: 20px 0;
  }
  .dossier__no { grid-column: 1; font-size: 11px; }
  .dossier__toggle { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
  .dossier__what { grid-column: 1; }
  .dossier__who { grid-column: 1; }
  .dossier__sum { grid-column: 1; }
  .dossier__body { grid-template-columns: 1fr; gap: 20px; }
  .dossier__body > :first-child { grid-column: 1; }

  .figures { grid-template-columns: 1fr; }
  .figure { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 22px; }
  .figure:first-child { border-top: 0; padding-top: 0; }

  .tariff-row { grid-template-columns: minmax(0, 1fr) auto; }
  .tariff-row__dots { display: none; }
}

/* Подпись «кому этот тариф» и строка «всё из предыдущего». Тарифы теперь
   показывают прирост, а не повторяют один и тот же список четыре раза -
   разница между 8 000 и 12 000 ₽ должна читаться, а не искаться глазами. */
.tariff__who {
  margin: -6px 0 14px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-2);
}
.tariff__inc {
  list-style: none;
  margin-left: -22px;
  font-weight: 500;
  color: var(--text);
}
.tariff__inc::before { content: none; }

/* Резюме юридического документа простыми словами. Стоит перед сплошным
   текстом оферты: его читают перед оплатой, а юридический язык не читают
   вовсе. Оформлено карточкой, чтобы не путалось с самим договором. */
.legal-tldr {
  margin: 0 0 34px;
  padding: 22px 24px;
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--card);
}
.legal-tldr > b { display: block; margin-bottom: 12px; font-weight: 600; }
.legal-tldr ul { display: grid; gap: 9px; margin: 0 0 14px; padding-left: 20px; }
.legal-tldr li { font-size: 15px; line-height: 1.55; color: var(--text-2); }
.legal-tldr li b { color: var(--text); }
.legal-tldr__note { display: block; font-size: 13px; color: var(--text-3); }

/* Подпись над бегущей строкой городов: без неё список городов читается
   как реклама «мы везде», а не как факт «оттуда приходили». */
.rail-cities__cap {
  margin-top: clamp(30px, 4vw, 48px);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
}


/* ── Карточка оплаты ──────────────────────────────────────────────────────
   Стоит на тёмном острове, а `.card` там - полупрозрачная плёнка
   (rgba .045): сквозь неё просвечивает чертёж, и текст на карточке, где
   человек вводит почту и жмёт «Оплатить», читался с трудом. Здесь плотный
   фон и своя рамка: это единственное место страницы, где важна не
   воздушность, а разборчивость.

   Цена была набрана бургунди (`--warm`) - тёмно-красным по тёмному, 1.6:1.
   Стала светлой: на графите это самый читаемый вариант, а акцент держит
   размер, а не цвет. */
.pay-card {
  background: #1B1815;
  border: 1px solid rgba(201, 169, 97, .45);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
[data-mode="light"] .pay-card,
[data-skin="lux"][data-mode="light"] .pay-card {
  background: #FFFFFF;
  border-color: rgba(168, 137, 79, .5);
  box-shadow: 0 20px 50px rgba(20, 18, 15, .10);
}
.pay-card .pay-card__price {
  font-size: clamp(38px, 6vw, 54px);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #F6F2EA;
  margin-bottom: 8px;
  line-height: 1;
}
[data-mode="light"] .pay-card .pay-card__price { color: var(--text); }
/* Вложенная карточка «что будет после оплаты» - на тон светлее основной,
   иначе на плотном фоне она сливается. */
.pay-card .card { background: rgba(255, 255, 255, .06); border-color: rgba(244, 239, 230, .16); }

/* ── Подраздел «Коллегам» в плитке главной ────────────────────────────────
   Сайт для пациентов, но врачи сюда заходят - из соцсетей и по рекомендации.
   Свой подзаголовок с чертой (как «Можно унести с собой»): разная аудитория
   не должна стоять в одном ряду, иначе пациент читает про курс, а врач ищет
   себя среди гайдов про пасту.
   Отличие от соседнего подзаголовка - только запас сверху: черта уже делает
   границу видимой, а красить подпись латунью на бумаге нельзя (мелкий текст
   этим цветом на светлом не пишем).
   Прежний вариант - отдельная полоса в латунной рамке, класс `.kollegam`, -
   убран 17.08 по просьбе Евгения: подраздел внутри плитки. Маскот
   (`plans/2026-08-17-kollegam-blok-s-maskotom.md`) теперь вешать не на
   полосу, а на ряд карточек. */
#kollegam { margin-top: clamp(26px, 3.2vw, 40px); }

/* ── Маскот на карточке курса ─────────────────────────────────────────────
   Робот с ai.drmazin.ru стоит за нижним бортиком карточки и выглядывает
   при наведении. Он не иллюстрация, а деталь: врач наводит мышь на курс -
   и оттуда высовывается тот же персонаж, что встретит его на платформе.

   Место выбрано по замерам пустот в карточке: фигурка встаёт в промежуток
   нижней строки между ценой и стрелкой и не перекрывает ни одной буквы.
   Низ срезан краем карточки - вместе с тенью это и даёт ощущение, что робот
   вылезает из-за бортика, а не наклеен сверху.

   Показываем только там, где для него правда есть место, и решает это
   не ширина окна, а ширина самой карточки (`@container`): в один ряд
   встают то две карточки, то три, и по окну этого не угадать.
   Порог 300 px - это ширина БЕЗ полей (контейнерный запрос меряет
   содержимое, а не всю карточку): 300 внутри = 352 снаружи, и как раз
   с этой ширины между ценой и стрелкой появляется просвет под фигурку.
   Проверено: окно 1280 - карточка 357 (робот есть), окно 1024 - карточка
   299 (робота нет, иначе наехал бы на адрес курса).

   И только для мыши: на тач-экране наведения нет, там он не появится
   никогда. */
.hcard--bot { container-type: inline-size; }

.hcard__bot {
  display: none;
  position: absolute;
  /* 82px от правого края - это ровно между кружком стрелки и ценой. */
  right: 82px;
  bottom: -20px;
  width: 80px;
  height: 100px;
  background: url(../img/robot-kollegam.png) center bottom / contain no-repeat;
  /* Спрятан целиком под нижним краем: карточка обрезает всё, что ниже. */
  transform: translateY(100px);
  /* Перелёт в конце - робот будто подпрыгивает, а не выезжает лифтом. */
  transition: transform .5s cubic-bezier(.22, 1.4, .36, 1);
  filter: drop-shadow(0 6px 10px rgba(20, 18, 15, .35));
  pointer-events: none;
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
  @container (min-width: 300px) {
    .hcard__bot { display: block; }
    .hcard:hover .hcard__bot,
    .hcard:focus-visible .hcard__bot { transform: translateY(0); }
  }
}

/* «Уменьшить движение» - без выезда: робот просто появляется и исчезает. */
@media (prefers-reduced-motion: reduce) {
  .hcard__bot { transition: none; }
}

/* ── Картинки в статьях ──────────────────────────────────────────────────
   Инлайновый `max-width:660px` в разметке перебивал глобальное
   `img { max-width: 100% }` (инлайн-стиль сильнее любого селектора), и на
   телефоне картинки распирало до 660px - страница уезжала вбок. Ширина
   ограничена и сверху, и по экрану, а не или-или. */
.article__pic {
  max-width: min(660px, 100%);
  height: auto;
}

/* ── Резинка прокрутки ───────────────────────────────────────────────────
   За краями документа браузер красит канву фоном <html>. Он оставался
   светлым, и когда страницу оттягивали ниже тёмного подвала, снизу вылезала
   белая полоса. Красим канву в графит: совпадает и с тёмной шапкой сверху,
   и с подвалом снизу. Фон самой страницы остаётся бумажным - он на body.
   `data-skin` стоит на <html>, поэтому это правило и есть фон канвы.

   overflow-x на html - подстраховка для iOS Safari: там прокрутка живёт на
   html, и `overflow-x: hidden`, заданный только на body, лишнюю ширину не
   срезает. clip, а не hidden, чтобы не ломать position: sticky внутри. */
[data-skin="lux"] {
  background: var(--ink);
  overflow-x: clip;
}

/* Одного графита на канве оказалось мало. Светлый лист - это не фон страницы,
   а отдельный слой `.bg-paper` с `position: fixed`, прибитый к окну. При
   оттягивании страницы ниже подвала контент уезжает, а слой остаётся на месте
   и продолжает светить в открывшейся полосе - графит лежит под ним и не виден.

   Привязываем лист к документу, а не к окну: за последним пикселем страницы
   его больше нет, и в резинке видно графитовую канву. Body делаем системой
   координат, иначе `absolute` отсчитается от окна и ничего не изменится.
   Сетка `.bg-grid` остаётся фиксированной: она полупрозрачная и цвета не даёт. */
[data-skin="lux"] body { position: relative; }
[data-skin="lux"] .bg-paper {
  position: absolute;
  inset: 0;
  height: 100%;
  /* Слой теперь тянется на весь документ, а рисунок остаётся привязан к окну -
     иначе радиальные пятна растянулись бы на семь тысяч пикселей и пропали,
     а вертикальный градиент размазался бы по всей странице. Так фактура
     выглядит ровно как раньше. Где attachment: fixed не поддержан (iOS),
     рисунок просто едет со страницей - на цвет резинки это не влияет. */
  background-attachment: fixed;
}

/* ── Портрет в блоке «кто я» ─────────────────────────────────────────────
   Круг по центру колонки на всех ширинах. Сначала правило стояло только
   в медиазапросе до 980px - и на планшете с десктопом портрет оставался
   прямоугольником, прижатым влево. Одно фото не должно выглядеть двумя
   разными способами в зависимости от того, с чего смотрят. Форма та же, что
   у аватара в шапке. */
[data-skin="lux"] .bio__photo {
  margin-inline: auto;
  text-align: center;
}
[data-skin="lux"] .bio__photo img {
  width: min(300px, 78vw);
  height: min(300px, 78vw);
  aspect-ratio: 1;
  border-radius: 50%;
  /* Квадратный кроп берёт другую полосу файла, чем 4:5, - лицо иначе
     уезжает вниз. Ориентир прежний: кончик носа у середины круга. */
  object-position: 45% 12%;
  margin-inline: auto;
}