/* Язык оформления сайта Данты: тишина и свет.
   Общий для главной и страницы входа — один файл, один вид.
   base.html НЕ трогаем: его переменные держат админку и кабинет. */
/* ══════════════════════════════════════════════════════════════════
       Главная страница. Своя палитра, НЕ трогающая base.html: те же
       переменные (--bg, --purple) держат админку и кабинет, и правка
       базы перекрасила бы их заодно. Здесь всё локально.

       Язык оформления: «тишина и свет» — цвета нет, присутствие даёт
       свет, засечки = голос Данты, гротеск = интерфейс.
       ══════════════════════════════════════════════════════════════════ */
    :root {
      /* Тёплая/золотая палитра редизайна лендинга (владелец 2026-08-29,
         макет danta-redesign-v2.html) — те же имена токенов, что держали
         кабинет с 2026-08-25 («те же hex»), но значения теперь СВОИ:
         сайт и кабинет сознательно разошлись здесь, кабинет эта правка не
         трогает (см. cabinet.css — там старые числа, без изменений).
         --ink-3 в обеих темах не взят из макета дословно: там он не проходил
         4.5:1 ни на --paper (2.86:1), ни на --card (3.17:1) — тот же класс
         регрессии, что уже чинили 2026-08-25. Оттенок тот же, светлота
         пересчитана так, чтобы держать 4.5:1 на обоих фонах. */
      --paper:#F4ECDD; --paper-2:#ECE1CC; --card:#FDF8EE; --card-2:#FFFDF8; --deep:#17130E;
      --ink:#241C11; --ink-2:#71624A; --ink-3:#766852;
      /* Тёплая тановая линия макета (--line:#e2d3b4), а НЕ полупрозрачный
         чёрный: rgba(36,28,17,.11) поверх --paper даёт сероватый #DDD5C7 —
         рамки карточек и разделители читались холоднее всей остальной
         страницы (владелец 2026-08-30: «не как задумывали»). --hair-2 —
         тот же тон на шаг глубже, для полей ввода и ghost-кнопок, где
         одной --hair не хватает, чтобы граница вообще была видна. */
      --hair:#E2D3B4; --hair-2:#D6C39D;
      /* Системные стеки — база для КАБИНЕТА: cabinet.css грузится вместе с
         этим файлом и переопределяет у себя все цвета, но не семейства
         шрифтов, поэтому они обязаны остаться здесь. Публичный сайт свои
         три шрифта берёт ниже, на body.public. */
      --voice:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
      --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
      --mono:ui-monospace,'SF Mono','Cascadia Mono',Consolas,monospace;
      /* 40px по бокам — шире, чем .wrap в макете (там 32px), см. .w ниже. */
      --gut:clamp(20px,5vw,40px);
      /* Золото макета вместо янтаря кабинета. Три роли, НЕ одна:
         --accent      — декор (нить, узлы, точки), контраст к тексту не нужен;
         --accent-strong — ТЕКСТ (эйброу, ссылки): 5.0:1+ на --paper;
         --accent-fill  — заливка кнопок. Макет заливает кнопку голым --gold
         (#A9713A), но кремовая подпись на нём даёт 3.70:1 — ниже 4.5:1 для
         обычного текста. #96622F — тот же золотой тон, затемнён ровно до
         4.68:1 с --on-accent: заметно ближе к макету, чем прежний #8A5A29
         (тёмно-коричневый), и без потери читаемости.
         --accent-deep — только ФОН кнопки при наведении (макетный --gold-deep). */
      --accent:#A9713A; --accent-strong:#8A5A29; --accent-fill:#96622F; --accent-deep:#8A5A29;
      --on-accent:#FBF3E4;
      --accent-soft:rgba(169,113,58,.16); --accent-soft-strong:rgba(169,113,58,.30);
      /* Статус «открывается по мере готовности» на карточке тарифа —
         макетный --ember. Не --bad: это не ошибка, а ожидание. */
      --ember:#A8442A;
      --input-bg:#FFFFFF; --demo-user-bg:#F0E2C8;
      --bad:#B24A3C; --ok:#3D6B52;
      --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-pill:999px;
      /* Три уровня поверхности, не два: --paper (страница) → --card (обычная
         карточка) → --card-2 (что должно читаться заметнее остальных — hero-мокап,
         рекомендуемый тариф). Раньше --card отличался от --paper на ~5% светлоты,
         а .cols>div вообще сидел на голом --paper — визуально сливался с фоном
         страницы (владелец 2026-08-28, «плоско»). Тень растёт вместе с уровнем:
         --shadow-md для карточки, --shadow-lg для приподнятой. */
      --shadow-sm:0 1px 2px rgba(36,28,17,.06); --shadow-md:0 6px 20px -6px rgba(36,28,17,.18);
      --shadow-lg:0 22px 50px -16px rgba(36,28,17,.26);
    }
    @media (prefers-color-scheme:dark){ html:not([data-theme="light"]){
      /* Лестница поверхностей пересчитана 2026-08-30: paper-2→card держал
         всего 1.05:1 — карточки тарифов/триады буквально не отличались от
         фона секции (владелец, по скриншотам прода: «тарифы и поле
         сливаются под один цвет»). Светлая тема давала на этом же шаге
         1.22:1 — тёмная была рассчитана не в паре со светлой, а отдельно
         и хуже. Новый шаг paper-2→card — 1.27:1, card→card-2 — 1.08:1
         (второй меньше нарочно: card-2 держит ещё и текстовый контраст
         ink-2/ink-3, см. ниже, — поднять оба шага сразу не позволял 4.5:1).
         Одна и та же тёплая семья тона (H≈30°), просто дальше друг от
         друга по светлоте. --deep здесь ПОДТЯНУТ к новому --paper
         (владелец 2026-08-31, на реальном фото на /login: правая панель
         читалась теплее и светлее остальной тёмной страницы — старое
         значение #17130E осталось от ДО пересчёта паперу и стало светлее
         его). В светлой теме --deep не трогаем — там он намеренно другой
         (тёмная панель на кремовом фоне, контраст, а не «тон в тон»). */
      --paper:#100D08; --paper-2:#171208; --card:#352515; --card-2:#3C2A18; --deep:#100D08;
      /* ink-2/ink-3 пересчитаны вместе с --card-2 выше: со старыми
         значениями (#A8977E/#94836D) на новом, более светлом card-2
         контраст падал до 4.45:1 и 3.9:1 — ниже 4.5:1 для обычного
         текста. Тот же оттенок, светлота увеличена ровно настолько,
         чтобы держать 4.5:1 на ВСЕХ четырёх поверхностях (paper, paper-2,
         card, card-2), не только на паре, где раньше проверяли. */
      --ink:#F3EAD9; --ink-2:#B3A186; --ink-3:#B89B7A;
      /* Граница тоже пересчитана: со старым --hair (#392C1E) она была
         светлее пола, но темнее нового card — на card-2 практически
         пропадала (1.01:1). Новый --hair виден на всех четырёх
         поверхностях (1.47:1–2.09:1), --hair-2 — на шаг сильнее. */
      --hair:#56442E; --hair-2:#6A5339;
      /* В тёмной теме заливка кнопки = макетный --gold: подпись на ней почти
         чёрная (--on-accent), контраст с запасом, затемнять нечего. */
      --accent:#CD9A55; --accent-strong:#DAB380; --accent-fill:#CD9A55; --accent-deep:#A97538;
      --on-accent:#191309;
      --accent-soft:rgba(205,154,85,.20); --accent-soft-strong:rgba(205,154,85,.32);
      /* Макетный --ember (#c1552f) на --card-2 даёт 3.36:1 — для строки в
         11px это мало; тот же тон, осветлён до 5.5:1. */
      --ember:#E08256;
      --input-bg:#20190F; --demo-user-bg:#3A2E20;
      --bad:#D97B6C; --ok:#6FA98A;
      --shadow-sm:0 1px 2px rgba(0,0,0,.30); --shadow-md:0 12px 30px -10px rgba(0,0,0,.55);
      --shadow-lg:0 28px 64px -18px rgba(0,0,0,.68);
    }}
    html[data-theme="dark"]{
      /* Лестница поверхностей пересчитана 2026-08-30: paper-2→card держал
         всего 1.05:1 — карточки тарифов/триады буквально не отличались от
         фона секции (владелец, по скриншотам прода: «тарифы и поле
         сливаются под один цвет»). Светлая тема давала на этом же шаге
         1.22:1 — тёмная была рассчитана не в паре со светлой, а отдельно
         и хуже. Новый шаг paper-2→card — 1.27:1, card→card-2 — 1.08:1
         (второй меньше нарочно: card-2 держит ещё и текстовый контраст
         ink-2/ink-3, см. ниже, — поднять оба шага сразу не позволял 4.5:1).
         Одна и та же тёплая семья тона (H≈30°), просто дальше друг от
         друга по светлоте. --deep здесь ПОДТЯНУТ к новому --paper
         (владелец 2026-08-31, на реальном фото на /login: правая панель
         читалась теплее и светлее остальной тёмной страницы — старое
         значение #17130E осталось от ДО пересчёта паперу и стало светлее
         его). В светлой теме --deep не трогаем — там он намеренно другой
         (тёмная панель на кремовом фоне, контраст, а не «тон в тон»). */
      --paper:#100D08; --paper-2:#171208; --card:#352515; --card-2:#3C2A18; --deep:#100D08;
      /* ink-2/ink-3 пересчитаны вместе с --card-2 выше: со старыми
         значениями (#A8977E/#94836D) на новом, более светлом card-2
         контраст падал до 4.45:1 и 3.9:1 — ниже 4.5:1 для обычного
         текста. Тот же оттенок, светлота увеличена ровно настолько,
         чтобы держать 4.5:1 на ВСЕХ четырёх поверхностях (paper, paper-2,
         card, card-2), не только на паре, где раньше проверяли. */
      --ink:#F3EAD9; --ink-2:#B3A186; --ink-3:#B89B7A;
      /* Граница тоже пересчитана: со старым --hair (#392C1E) она была
         светлее пола, но темнее нового card — на card-2 практически
         пропадала (1.01:1). Новый --hair виден на всех четырёх
         поверхностях (1.47:1–2.09:1), --hair-2 — на шаг сильнее. */
      --hair:#56442E; --hair-2:#6A5339;
      /* В тёмной теме заливка кнопки = макетный --gold: подпись на ней почти
         чёрная (--on-accent), контраст с запасом, затемнять нечего. */
      --accent:#CD9A55; --accent-strong:#DAB380; --accent-fill:#CD9A55; --accent-deep:#A97538;
      --on-accent:#191309;
      --accent-soft:rgba(205,154,85,.20); --accent-soft-strong:rgba(205,154,85,.32);
      /* Макетный --ember (#c1552f) на --card-2 даёт 3.36:1 — для строки в
         11px это мало; тот же тон, осветлён до 5.5:1. */
      --ember:#E08256;
      --input-bg:#20190F; --demo-user-bg:#3A2E20;
      --bad:#D97B6C; --ok:#6FA98A;
      --shadow-sm:0 1px 2px rgba(0,0,0,.30); --shadow-md:0 12px 30px -10px rgba(0,0,0,.55);
      --shadow-lg:0 28px 64px -18px rgba(0,0,0,.68);
    }

    /* Формы — в border-box: без этого сброса padding/border складывались
       ПОВЕРХ заданной высоты (браузерный дефолт — content-box), и именно
       это раздуло пустой .chat-input до ~150px 2026-08-21 при поднятии
       max-height. Скоуп только на поля ввода — не трогаем расчёт остальной
       вёрстки сайта, которая и так была выверена под content-box. */
    input, textarea, select, button { box-sizing: border-box; }

    /* Шрифты макета — ровно на публичном сайте и нигде больше. Скоуп именно
       body.public (класс ставит base.html из {% block body_class %}), а не
       :root: тот же site.css грузит КАБИНЕТ, у которого своя типографика, и
       правка :root молча переодела бы и его. Сами файлы шрифтов подключает
       public/_head.html; если он не загрузился — работают запасные стеки,
       страница не рассыпается. */
    body.public{
      --voice:'Literata',"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
      --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
      --mono:'IBM Plex Mono',ui-monospace,'SF Mono','Cascadia Mono',Consolas,monospace;
    }
    /* 17px — читаемость важнее точного совпадения с макетом (владелец
       2026-08-30: «текст мельче, чем было, нужно виднее»). Макет держит
       16px по всему сайту; 17px — тот же размер, что стоял до переноса
       макета, сознательно оставлен крупнее. */
    body{background:var(--paper);color:var(--ink);font-family:var(--sans);
         font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
    /* Только горизонтальный паддинг — раньше здесь стояло "padding:0 var(--gut)",
       и этот 0 по вертикали (класс, специфичность выше) незаметно перебивал
       "section{padding:clamp(60px,9vw,110px) 0}" на КАЖДОЙ <section class="w">
       на странице. Отступов между секциями не было вообще — не только там,
       где недавно правили тон/ритм, а везде (владелец нашёл на скриншоте
       2026-08-25: секции слиты без зазора). */
    /* 1120px/40px — снова шире, чем в макете (1080px/32px): владелец
       2026-08-30 попросил вернуть свободнее по бокам, «текст не должен
       сжиматься к центру». Сознательное отступление от точного числа
       макета — то же самое решение, что уже приняли для body font-size
       и цветов тёмной темы: макет источник ЯЗЫКА, а не последней цифры. */
    .w{max-width:1120px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}

    /* ── шапка ── */
    .top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 88%,transparent);
         backdrop-filter:saturate(1.2) blur(9px);border-bottom:1px solid var(--hair)}
    /* 60px — СОЗНАТЕЛЬНОЕ отступление от макета (владелец 2026-08-30:
       «шапку поменьше, кнопки уже, компактно»). В danta-redesign-v2.html
       здесь 78px (20+38+20), но шапка липкая и на ноутбучных экранах
       съедала заметную полосу первого экрана. Всё внутри уменьшено
       пропорционально, чтобы она осталась одним плотным рядом, а не
       просто стала ниже. Высота зашита ещё в трёх местах: .authpage и
       .notfound считают от неё 100vh, section.w — scroll-margin-top под
       якоря; менять только вместе с ними. */
    .top-in{display:flex;align-items:center;justify-content:space-between;height:60px}
    .mark{font-family:var(--voice);font-size:1.2rem;font-weight:600;letter-spacing:-.02em;
          display:inline-flex;align-items:center;gap:8px}
    .logo-mark{width:8px;height:8px;border-radius:50%;background:var(--accent);
               box-shadow:0 0 0 2.5px var(--accent-soft);flex:none}
    .links{display:flex;align-items:center;gap:26px}
    .links a{color:var(--ink-2);font-size:.85rem;transition:color .2s}
    .links a:hover{color:var(--ink)}
    .tools{display:flex;align-items:center;gap:8px}
    /* Скруглённый квадрат, не круг и не острый угол — язык кабинета
       (владелец 2026-08-25, «переделать сайт под стиль кабинета»). */
    .chip{border:1px solid var(--hair);background:transparent;color:var(--ink-2);cursor:pointer;
          height:32px;padding:0 10px;font-size:.78rem;font-family:var(--sans);display:inline-flex;
          align-items:center;gap:6px;border-radius:8px;transition:.2s}
    .chip:hover{color:var(--ink);border-color:var(--ink-3)}
    .chip.sq{padding:0;width:32px;justify-content:center}
    /* Инлайновый svg по умолчанию строчный и центрируется в кружке не по
       графике, а по строке текста вокруг неё — на глаз съезжает на пару px. */
    .chip svg{display:block}
    /* Первичная кнопка на акценте, не на чёрном — владелец 2026-08-25:
       сайт «блёклый», один приглушённый тон почти без цвета. Раньше
       здесь сознательно был --ink (акцент как разовый сигнал важности,
       не общий цвет UI) — решение пересмотрено: кнопка действия видна
       первой на экране чаще, чем что-либо ещё, и держать её нейтральной
       здесь стоило больше, чем экономило акцент. */
    /* Геометрия и поведение — из макета (.btn/.btn-lg/.btn-ghost/.btn-block):
       11px 20px, радиус 10px, вес 600, подъём на 1px при наведении. Было
       12px 26px, вес 500, hover через filter:brightness — кнопка выглядела
       крупнее и бледнее макетной. .cta.lg — макетный .btn-lg (hero и
       закрывающий экран), .cta.block — .btn-block (карточки тарифов).
       .cta.sm оставлен как псевдоним базового размера: на нём висит разметка
       шапки, а в макете шапка использует именно базовый .btn. */
    .cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;
         padding:11px 20px;background:var(--accent-fill);color:var(--on-accent);
         font-size:.906rem;font-weight:600;white-space:nowrap;border:1px solid transparent;
         cursor:pointer;font-family:var(--sans);border-radius:var(--radius-sm);transition:.2s ease}
    .cta:hover{background:var(--accent-deep);transform:translateY(-1px)}
    .cta.ghost{background:transparent;color:var(--ink);border-color:var(--hair)}
    .cta.ghost:hover{background:transparent;border-color:var(--ink-3);transform:none}
    .cta.lg{padding:14px 26px;font-size:.969rem;border-radius:12px}
    .cta.block{width:100%}
    /* Кнопки шапки — уже и плотнее базовой .cta: в шапке они стоят в ряд с
       чипами высотой 32px, и макетные 11/20px рядом с ними выглядели
       тяжёлыми (владелец 2026-08-30). Радиус 8px — тот же, что у .chip,
       чтобы весь ряд читался одной группой. */
    .cta.sm{padding:0 15px;height:32px;font-size:.83rem;border-radius:8px}
    /* Plus/Pro пока некуда нажимать — биллинга нет, "Choose Plus" вело на
       ту же бесплатную регистрацию, что и Free (найдено сторонним аудитом
       2026-08-26: кнопка обещает покупку, которую физически нельзя
       совершить). Честный неактивный вид вместо рабочей с виду кнопки.
       Правка 2026-08-28: элемент — голый <span> без href/обработчика, так
       что pointer-events:none был не нужен для защиты от клика, а только
       глушил cursor:not-allowed (браузер не хит-тестит элемент с
       pointer-events:none, значит и курсор над ним не покажет). Заодно
       .cta.ghost.disabled на прозрачном фоне был неотличим от настоящей
       ghost-кнопки ("Посмотреть, как она работает" рядом) — тот же
       приглушённый фон, что у обычного .disabled. */
    .cta.disabled{background:var(--paper-2);color:var(--ink-3);border-color:var(--hair-2);
                  cursor:not-allowed;opacity:.7}
    .cta.ghost.disabled{background:var(--paper-2)}
    /* hover базовой .cta теперь меняет фон и приподнимает кнопку, а не
       осветляет фильтром — гасим оба эффекта, иначе неактивная кнопка
       отзывалась бы на курсор. */
    .cta.disabled:hover{background:var(--paper-2);transform:none}

    /* ── язык: глобус узнаётся без слов, языки написаны сами собой ──
       position:absolute (не fixed, как у кабинетных дропдаунов) — здесь
       намеренно: шапка сайта не сидит внутри overflow-контейнера с обрезкой,
       той проблемы, ради которой кабинет переходил на fixed+расчёт
       координат, здесь нет. */
    .langwrap{position:relative}
    .langmenu{position:absolute;top:calc(100% + 8px);right:0;min-width:176px;padding:5px;margin:0;
              list-style:none;background:var(--card);border:1px solid var(--hair);
              border-radius:var(--radius-sm);box-shadow:var(--shadow-md);display:none}
    .langmenu.open{display:block}
    .langmenu li{padding:10px 12px;font-size:.9rem;color:var(--ink-2);cursor:pointer;min-height:40px;
                 display:flex;align-items:center;justify-content:space-between;gap:12px;
                 border-radius:var(--radius-sm)}
    .langmenu li:hover{background:var(--paper-2);color:var(--ink)}
    .langmenu li.on{color:var(--ink);font-weight:600}
    .langmenu li.on::after{content:"✓";font-size:.85rem}
    .langmenu li[dir="rtl"]{direction:rtl;text-align:right}

    .mob{display:none;border-top:1px solid var(--hair);background:var(--paper);padding:10px var(--gut) 18px}
    .mob.open{display:block}
    .mob a{display:block;padding:13px 0;color:var(--ink-2);font-size:.98rem;
           border-bottom:1px solid var(--hair);min-height:44px}
    /* display:flex явно: .mob a{display:block} перебивает inline-flex базовой
       .cta по специфичности, и кнопка теряла бы центрирование по вертикали. */
    .mob a.cta{display:flex;color:var(--on-accent);text-align:center;border-bottom:none;margin-top:10px}

    /* ── первый экран ── */
    /* padding-top/bottom по отдельности, НЕ короткой записью: `padding: X 0 Y`
       обнуляла боковые поля, которые задаёт .w (тот же элемент — <div class="w
       hero">), и .hero стоит в файле ниже, поэтому побеждала. Первый экран
       выходил на 64px шире всех остальных секций, а на телефоне заголовок
       упирался в край экрана. Найдено сверкой сетки с макетом 2026-08-30:
       колонки давали 537/486 вместо 504/456. */
    .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
          padding-top:clamp(48px,8vw,100px);padding-bottom:clamp(40px,6vw,70px);
          border-bottom:1px solid var(--hair)}
    /* 50px/1.14 из макета вместо clamp(...,4rem)/1.02 — заголовок был крупнее
       и стоял теснее строками, чем задумано. */
    .hero h1{font-family:var(--voice);font-weight:500;font-size:clamp(2rem,4.4vw,3.125rem);
             line-height:1.14;letter-spacing:-.01em;margin:0 0 18px}
    /* В макете это .hero-clarity — ГРОТЕСК (Inter), не засечки: серифом
       набрана речь самой Данты, а не пояснение под заголовком. */
    .lede{font-family:var(--sans);font-size:1.094rem;color:var(--ink-2);
          max-width:460px;margin:0;line-height:1.55}
    .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
    .hero-platforms{font-family:var(--mono);font-size:.75rem;color:var(--ink-3);margin-top:20px;letter-spacing:.02em}
    /* Правая колонка hero — нить + превью диалога, стек по вертикали.
       Presence (#presence) больше не общий: единственная страница с ним —
       /login, стили только в .auth-visual #presence ниже. */
    .hero-visual{display:flex;flex-direction:column;gap:28px}

    /* ── нить: золотой SVG-мотив, ровно три места на сайте — Hero, «Один
       день» (ниже, .day-thread-*) и «Память» (.memory-gap-thread, дальше
       по файлу) — больше нигде. Рисуется и появляется через _chrome.html,
       сама CSS ничего не запускает. */
    .thread-wrap{position:relative;display:flex;align-items:center;justify-content:center;min-height:300px}
    .thread-svg{width:100%;max-width:400px;overflow:visible}
    .thread-path{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;
                 stroke-dasharray:1400;stroke-dashoffset:1400;
                 animation:draw-thread 2.6s cubic-bezier(.4,0,.2,1) .3s forwards}
    .thread-node{transform-origin:center;transform-box:fill-box;opacity:0}
    .thread-node.dot{fill:var(--accent);stroke:none}
    .thread-node.dot.n1{animation:snap-in .3s cubic-bezier(.34,1.56,.64,1) .35s forwards}
    .thread-node.dot.n2{animation:snap-in .3s cubic-bezier(.34,1.56,.64,1) .78s forwards}
    .thread-node.dot.n3{animation:snap-in .3s cubic-bezier(.34,1.56,.64,1) 2.05s forwards}
    .thread-node.snap-point{fill:var(--accent);stroke:none;animation:snap-in .4s cubic-bezier(.34,1.56,.64,1) 1.2s forwards}
    .thread-node.terminus{fill:var(--paper);stroke:var(--accent);stroke-width:1.6;
                          animation:snap-in .4s cubic-bezier(.34,1.56,.64,1) 2.75s forwards,
                                    glow-idle 3s ease-in-out 3.15s infinite}
    .snap-flash{fill:var(--accent);opacity:0;transform-origin:center;transform-box:fill-box;
               animation:flash-pulse .5s ease 1.1s forwards}
    .snap-ray{stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:11;
             stroke-dashoffset:11;opacity:0;animation:ray-shoot .45s ease 1.1s forwards}
    @keyframes draw-thread{ to{ stroke-dashoffset:0 } }
    @keyframes snap-in{ 0%{transform:scale(0);opacity:0} 55%{transform:scale(1.35);opacity:1} 100%{transform:scale(1);opacity:1} }
    @keyframes glow-idle{ 0%,100%{opacity:1} 50%{opacity:.55} }
    @keyframes ray-shoot{ 0%{stroke-dashoffset:11;opacity:0} 25%{opacity:1} 70%{stroke-dashoffset:0;opacity:1} 100%{stroke-dashoffset:0;opacity:0} }
    @keyframes flash-pulse{ 0%{opacity:0;transform:scale(.2)} 30%{opacity:.9;transform:scale(1.8)} 100%{opacity:0;transform:scale(2.6)} }

    /* ── превью настоящего диалога — не выдумка, тот же обмен, что был в
       приложении (владелец 2026-08-25: на лендинге нигде не было видно
       самого продукта). Строка ввода — сама ссылка на регистрацию (честно,
       не имитация приёма сообщения; ШАГ 0 редизайна).
       Разметка и имена классов — из макета (.demo-panel/.demo-bubble-user/
       .demo-reply/.demo-input-row). Прежняя версия копировала настоящий чат
       кабинета: реплика человека прижималась ВПРАВО, панель имела внутреннюю
       рамку поля ввода и своё скругление. В макете панель плоская: реплика
       человека — небольшой пузырь СЛЕВА, ответ Данты серифом под ним, а
       строка ввода — не поле, а подпись за тонкой линией. */
    .demo-panel{background:var(--input-bg);border:1px solid var(--hair);border-radius:18px;
                box-shadow:var(--shadow-lg);padding:24px}
    .demo-bubble-user{background:var(--demo-user-bg);border-radius:14px 14px 4px 14px;
                      padding:11px 15px;font-size:.875rem;display:inline-block;
                      margin-bottom:14px;color:var(--ink)}
    .demo-reply{font-family:var(--voice);font-weight:400;font-size:1rem;line-height:1.6;color:var(--ink)}
    .demo-input-row{margin-top:18px;padding-top:14px;border-top:1px solid var(--hair);
                    font-family:var(--mono);font-size:.8125rem;color:var(--ink-3);
                    display:flex;justify-content:space-between;align-items:center;transition:color .2s}
    .demo-input-row:hover{color:var(--ink-2)}
    .typing-dots{display:inline-flex;gap:4px}
    .typing-dots span{width:5px;height:5px;border-radius:50%;background:var(--ink-3);animation:td-blink 1.4s infinite}
    .typing-dots span:nth-child(2){animation-delay:.2s}
    .typing-dots span:nth-child(3){animation-delay:.4s}
    @keyframes td-blink{ 0%,80%,100%{opacity:.25} 40%{opacity:1} }

    section{padding:clamp(60px,9vw,108px) 0}
    /* Тонкая линия под каждой секцией и запас под липкой шапкой при переходе
       по якорю — из макета (.section). Скоуп именно section.w: тот же
       site.css грузит КАБИНЕТ, где секции — это .pane (переключаемые
       вкладки), и голое section{border-bottom} подчеркнуло бы каждую из них.
       На /login секция тоже другая (.auth-section, без .w) и своей линии
       сверху не теряет. */
    section.w{border-bottom:1px solid var(--hair);scroll-margin-top:70px}
    /* Акцент вместо нейтрального серого — тот же повод, что у .cta выше:
       цвет должен возвращаться по ходу прокрутки, а не жить одним пятном
       в шапке. Короткая золотая чёрточка перед текстом — из макета
       редизайна, повторяется на каждом эйброу сайта, не только там, где
       есть нить-мотив (та ограничена Hero/Днём/Памятью, см. _chrome.html). */
    /* Моноширинный, 12.5px, трекинг .14em — как в макете. Был гротеск 11.2px
       с трекингом .22em: буквы стояли заметно реже и мельче задуманного.
       Цвет текста — --accent-strong, а не голый --accent из макета: на
       светлой теме --accent даёт 3.5:1, для строки в 12.5px этого мало.
       Чёрточка перед текстом контраста не требует и живёт на --accent. */
    .eyebrow{font-family:var(--mono);font-size:.781rem;letter-spacing:.14em;text-transform:uppercase;
             color:var(--accent-strong);margin-bottom:18px;display:inline-flex;align-items:center;gap:10px}
    .eyebrow::before{content:"";width:16px;height:1px;background:var(--accent)}
    .eyebrow.center{display:flex;justify-content:center}
    .eyebrow.center::before{display:none}
    h2{font-family:var(--voice);font-weight:500;font-size:clamp(1.85rem,3.4vw,2.55rem);
       line-height:1.1;letter-spacing:-.01em;margin:0 0 18px}
    h2.center{text-align:center;font-size:2.125rem;margin-bottom:44px}
    /* Макетный .lede: 17.5px/1.65, мера 560px. Было 16.3px и 34em (~544px
       при 16px, но считалось от размера самого элемента — плыло). */
    .sub{color:var(--ink-2);max-width:560px;margin:0 0 44px;font-size:1.094rem;line-height:1.65}

    /* Раньше — цельная сетка на 1px хairline-линиях, background:var(--paper)
       у каждой ячейки: тот же тон, что у страницы вокруг, карточка сливалась
       с фоном (владелец 2026-08-28). Теперь три отдельные карточки, тот же
       язык, что у .plan — радиус/паддинг/тень одинаковые. Переиспользуется
       разделом «Помнит·Понимает·Делает» (.triad-icon поверх той же
       сетки/карточки, не отдельная копия). */
    /* Геометрия макета (.triad-row/.triad-card): зазор 22px, отбивка от
       заголовка 44px, радиус 16px, паддинг 30px. Тень вернули (в макете её
       нет — это статичный мокап, не рабочий сайт): владелец 2026-08-30,
       «плашки и карточки сделай заметнее» — одной разницы --card/--paper
       на беглый взгляд не хватало. При наведении карточка не только
       приподнимается, но и светлеет до --card-2 — в прежней версии
       менялась только рамка. */
    .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
    .cols>div{background:var(--card);border:1px solid var(--hair);border-radius:16px;
              padding:30px;box-shadow:var(--shadow-sm);transition:.25s}
    .cols .n{font-family:var(--mono);font-size:.72rem;color:var(--ink-3);margin-bottom:14px}
    .cols h3{font-family:var(--voice);font-weight:500;font-size:1.25rem;margin:0 0 10px}
    .cols p{margin:0;font-size:.906rem;color:var(--ink-2);line-height:1.6}

    /* Лёгкий сдвиг тона — разрыв ритма между секциями на --paper, чтобы
       длинная страница не читалась одним монотонным полотном (владелец
       2026-08-25, «монотонно, нудно»). Оборачивает «Память» и «Тарифы» —
       «Помнит·Понимает·Делает» вернули на голый --paper 2026-08-30: два
       .tint подряд без страницы --paper между ними читались одним
       сплошным блоком («одинаково смотрятся»). */
    .tint{background:var(--paper-2)}

    .more{display:inline-flex;align-items:center;gap:6px;color:var(--accent-strong);
          font-size:.92rem;font-weight:500}
    .more:hover{color:var(--accent)}

    /* ── триада «Помнит·Понимает·Делает»: та же сетка/карточка .cols, плюс
       иконка ── */
    /* Плашки Plus/Бесплатно под иконками убраны (владелец 2026-08-30:
       «убери, это не очень» — карточки объясняют способность Данты, а
       не продают тариф в лоб). Ограничение по тарифу сказано честно и
       один раз, в «Тарифах» ниже — здесь секция не о деньгах. */
    .triad-icon{width:32px;height:32px;margin-bottom:20px;color:var(--accent)}
    .cols>div:hover{background:var(--card-2);transform:translateY(-3px);border-color:var(--ink-3);
                    box-shadow:var(--shadow-md)}
    /* Заголовок «Помнит·Понимает·Делает» в danta-redesign-v2.html — 34px, max-width:520px. */
    #triad h2{font-size:2.125rem;max-width:520px}

    /* ── «Один день»: четыре карточки на тонкой нити-коннекторе ── */
    .day-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
    /* Радиус 16px и паддинг 26/22 из макета. Тень вернули вместе с
       остальными карточками сайта (владелец 2026-08-30, «заметнее») —
       единый язык поверхностей, не отдельное решение для каждой секции. */
    .day-card{background:var(--card);border:1px solid var(--hair);border-radius:16px;
              padding:26px 22px;box-shadow:var(--shadow-sm)}
    .day-time{font-family:var(--mono);font-size:.8125rem;color:var(--accent-strong);margin-bottom:12px;letter-spacing:.03em}
    .day-tag{font-family:var(--mono);font-size:.625rem;color:var(--ink-3);text-transform:uppercase;
             letter-spacing:.08em;margin-bottom:10px}
    .day-you{font-size:.844rem;color:var(--ink-3);margin-bottom:10px}
    .day-reply{font-family:var(--voice);font-size:.969rem;line-height:1.55;color:var(--ink)}
    /* Заголовок секции чуть крупнее общего — как в danta-redesign-v2.html
       (.day-head h2:36px), а не общий clamp() у всех остальных h2. Шапка
       секции там же ограничена 600px и отбита от нити на 56px. */
    #day h2{font-size:2.25rem}
    #day .sub{max-width:600px;margin-bottom:56px}
    /* Тонкая нить-коннектор над карточками — второе из трёх мест нити
       (первое — hero, см. .thread-* выше). Три узла зажигаются по очереди,
       когда секция появляется в кадре (.reveal.in), не сами по себе. */
    .day-thread-svg{width:100%;height:56px;margin-bottom:-6px;display:block}
    .day-thread-path{fill:none;stroke:var(--hair);stroke-width:1.4}
    .day-node{fill:var(--accent);opacity:0;transform:scale(0);transform-origin:center;transform-box:fill-box}
    .reveal.in .day-node{animation:snap-in .4s cubic-bezier(.34,1.56,.64,1) forwards}
    .reveal.in .day-node:nth-of-type(1){animation-delay:.1s}
    .reveal.in .day-node:nth-of-type(2){animation-delay:.28s}
    .reveal.in .day-node:nth-of-type(3){animation-delay:.46s}

    /* ── появление секций при прокрутке — включается _chrome.html
       (IntersectionObserver), сама CSS только задаёт переход. ── */
    .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
    .reveal.in{opacity:1;transform:translateY(0)}

    /* ── «Почему Данта»: список философии, без карточек — просто ритм строк ── */
    .philo-list{display:flex;flex-direction:column;max-width:680px}
    .philo-item{display:flex;gap:20px;padding:22px 0;border-top:1px solid var(--hair)}
    .philo-item:last-child{border-bottom:1px solid var(--hair)}
    .philo-mark{width:7px;height:7px;border-radius:50%;background:var(--accent);margin-top:9px;flex:none}
    .philo-item h4{font-family:var(--voice);font-weight:500;font-size:1.125rem;margin:0 0 6px;color:var(--ink)}
    .philo-item p{margin:0;font-size:.906rem;color:var(--ink-2);line-height:1.6}
    /* .philo-head h2 в danta-redesign-v2.html — 34px/line-height:1.25, компактнее
       общего clamp(); .philo-lede там мельче общего .sub (16px, мера 600px). */
    #why h2{font-size:2.125rem;line-height:1.25}
    #why .sub{font-size:1rem;max-width:600px;margin-bottom:44px}

    /* ── «Память»: третье и последнее место золотой нити (см. Hero/«Один
       день» выше) — публикуется только после того, как надёжность памяти
       между сессиями подтверждена на реальном инстансе (проверено
       2026-08-29 напрямую по БД прода: активные факты старше 14 дней,
       ночная консолидация штатно отработала тем же утром — см. отчёт
       сессии). Нить здесь — не SVG-путь, а .memory-gap-thread: полоска,
       которая дорисовывается через IntersectionObserver в _chrome.html. */
    .memory-wrap{display:flex;flex-direction:column;align-items:center;gap:0}
    .memory-card{background:var(--card);border:1px solid var(--hair);border-radius:16px;
                 padding:26px 30px;max-width:520px;width:100%;box-shadow:var(--shadow-sm)}
    .memory-you{font-size:.906rem;color:var(--ink-2);font-style:italic}
    .memory-meta{font-family:var(--mono);font-size:.719rem;color:var(--ink-3);margin-bottom:10px;letter-spacing:.03em}
    .memory-gap{display:flex;align-items:center;gap:14px;padding:22px 0;width:100%;max-width:520px}
    .memory-gap-line{flex:1;height:1px;background:var(--hair);position:relative}
    .memory-gap-thread{position:absolute;top:-1px;left:0;height:2px;width:0;background:var(--accent)}
    .memory-gap-label{font-family:var(--mono);font-size:.688rem;color:var(--accent-strong);letter-spacing:.05em;white-space:nowrap}
    /* Рамка ответа — макетный --gold-deep (--accent-deep), а не текстовый
       --accent-strong: в тёмной теме второй заметно светлее и кант вокруг
       карточки читался ярче, чем задумано. */
    .memory-card.reply{border-color:var(--accent-deep);background:var(--card-2)}
    .memory-card.reply .memory-meta{color:var(--accent-strong)}
    .memory-card.reply .memory-you{font-style:normal;font-family:var(--voice);font-size:1.0625rem;color:var(--ink)}
    .memory-footnote{max-width:480px;text-align:center;margin:24px auto 0;font-size:.8125rem;color:var(--ink-3);line-height:1.6}

    .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
    /* Радиус 18px, паддинг 32px. Тень есть у ВСЕХ карточек тарифов, не
       только рекомендуемой, как в макете (.price-card) — владелец
       2026-08-30: тарифы должны быть заметнее всего на странице, это
       единственное место, где принимают решение о деньгах. При наведении
       рамка загорается акцентом — сигнал "выбери меня", которого раньше
       не было ни у одной карточки, кроме уже рекомендуемой. */
    .plan{border:1px solid var(--hair);padding:32px;background:var(--card);
          display:flex;flex-direction:column;position:relative;border-radius:18px;
          box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s,transform .2s}
    .plan:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-2px)}
    /* Рекомендуемый тариф — на уровень выше остальных карточек (--card-2 +
       тень), не только рамкой темнее: тот же приподнятый уровень, что у
       hero-панели, "самое важное на экране получает больше света". Рамка —
       макетный --gold (--accent), а не --accent-fill: у заливки кнопки тон
       затемнён ради контраста подписи, а рамке контраст не нужен. При
       наведении рамка чуть ярче (--accent-strong) и тень растёт вместе с
       остальными карточками, а не остаётся статичной. */
    .plan.mid{border-color:var(--accent);background:var(--card-2);box-shadow:var(--shadow-lg)}
    .plan.mid:hover{border-color:var(--accent-strong);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
    /* Раньше — лента в углу карточки (top:-1px;right:-1px, чёрная, со
       скруглением под угол .plan). В макете это ПАРЯЩАЯ золотая пилюля,
       наполовину вынесенная за верхний край: top:-13px, right:26px,
       border-radius:999px. Фон — --accent-fill, а не голый --accent: подпись
       в 10.5px на голом золоте даёт 3.7:1. */
    .plan .badge{position:absolute;top:-13px;right:26px;background:var(--accent-fill);
                 color:var(--on-accent);font-family:var(--mono);font-size:.656rem;font-weight:600;
                 letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;
                 border-radius:var(--radius-pill)}
    .plan h3{font-family:var(--voice);font-weight:500;font-size:1.25rem;margin:0 0 6px}
    /* Строка-подзаголовок под именем тарифа ("Наш подарок — не пробная
       версия" / "Это и есть Данта — не команды, а характер") — из макета,
       на карточке отдельно от .sub (та живёт только в шапке секции). */
    .plan .tagline{font-size:.781rem;color:var(--ink-3);margin:0 0 16px}
    /* Цена — МОНОШИРИННАЯ 32px, как в макете (.price-amount). Была засечками
       1.95rem: цифры выглядели частью текста, а не показанием счётчика. */
    .plan .price{font-family:var(--mono);font-size:2rem;color:var(--ink);margin:0 0 4px}
    .plan .price small{font-size:.8125rem;color:var(--ink-3);font-family:var(--mono)}
    /* Строка состояния тарифа («Открывается по мере готовности») — в прежней
       вёрстке её не было вовсе, из-за чего честность про недоступность
       держалась только на неактивной кнопке. Пустая (&nbsp;) на бесплатном
       тарифе: фиксированная высота держит три карточки в одной сетке. */
    .plan .price-status{font-family:var(--mono);font-size:.688rem;color:var(--ember);
                        letter-spacing:.05em;text-transform:uppercase;margin-bottom:20px;height:14px}
    .plan ul{list-style:none;margin:0 0 26px;padding:0;flex:1;display:flex;flex-direction:column;gap:12px}
    .plan li{font-size:.875rem;color:var(--ink-2);padding:0 0 12px;border-bottom:1px solid var(--hair);line-height:1.5}
    .plan li:last-child{border-bottom:none;padding-bottom:0}
    /* Заголовок пункта — что именно даёт тариф — жирным и цветом --ink,
       описание строкой ниже мельче: тот же приём, что в макете
       (.price-feats li strong), без отдельного класса под текст пункта. */
    .plan li strong{display:block;color:var(--ink);font-weight:600;font-size:.906rem;margin-bottom:2px}
    /* .pricing-head h2 в danta-redesign-v2.html — 36px, крупнее общего clamp();
       шапка секции там ограничена 600px и отбита от карточек на 48px. */
    #pricing h2{font-size:2.25rem}
    #pricing .sub{max-width:600px;margin-bottom:14px}
    /* «Три тарифа. Не сорок.» — в макете .pricing-simple-note: отдельная
       моно-строка под лидом, а не тот же класс, что подпись платформ в hero. */
    .pricing-note{font-family:var(--mono);font-size:.75rem;color:var(--ink-3);
                  letter-spacing:.02em;margin:0 0 48px}

    /* ── вход и регистрация ──
       .auth-section/.auth-wrapper без .authpage-префикса раньше были базой
       (однокол оночная секция входа на самой главной, до редизайна
       /login на двухколоночный макет) — .auth-wrapper класс сейчас
       рендерится только внутри .authpage (единственное auth.html), так что
       эти два правила удалены целиком: их padding:0 var(--gut) молча
       довешивал лишние 40px внутрь формы поверх padding, который уже даёт
       .authpage .auth-section — из-за этого левый и правый отступ вокруг
       presence-картинки не совпадали (владелец 2026-09-02). Правила ниже
       (.authpage .auth-section/.auth-wrapper) остаются единственным
       источником этих стилей. */
    .auth-title{font-family:var(--voice);font-size:1.95rem;text-align:center;margin-bottom:10px}
    .auth-subtitle{text-align:center;color:var(--ink-3);font-size:.94rem;margin-bottom:30px}
    .card{border:1px solid var(--hair);background:var(--card);border-radius:var(--radius-md);box-shadow:var(--shadow-md)}
    .tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--hair)}
    .tab{padding:14px 8px;background:transparent;border:none;border-bottom:2px solid transparent;
         color:var(--ink-3);font-size:.89rem;font-family:var(--sans);cursor:pointer;min-height:46px}
    .tab.active{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
    .form{display:none;padding:24px}
    .form.active{display:block}
    .field{margin-bottom:16px}
    .field label{display:block;font-size:.8rem;color:var(--ink-3);margin-bottom:7px}
    .field input{width:100%;padding:12px 13px;background:var(--paper);border:1px solid var(--hair-2);
                 color:var(--ink);font-size:.95rem;font-family:var(--sans);min-height:44px;
                 border-radius:var(--radius-sm)}
    .field input:focus{outline:none;border-color:var(--accent)}
    .hint{font-size:.76rem;color:var(--ink-3);margin-top:6px}
    .check-field{display:flex;align-items:flex-start;gap:10px;font-size:.85rem;color:var(--ink-2);
                 cursor:pointer;margin:2px 0 18px}
    .check-field input{margin-top:2px;width:16px;height:16px;accent-color:var(--accent-fill);
                       cursor:pointer;flex:none}
    /* --accent-fill — тот же приём, что первичная кнопка в кабинете
       (.btn-save/.chat-send, владелец 2026-08-25: «переделать сайт под
       стиль кабинета»): токен лежал в site.css с 21 августа неиспользованным. */
    .form-btn{width:100%;padding:13px;background:var(--accent-fill);color:var(--on-accent);border:1px solid var(--accent-fill);
              font-size:.92rem;font-weight:500;cursor:pointer;font-family:var(--sans);min-height:46px;
              border-radius:var(--radius-sm)}
    .form-btn:hover{filter:brightness(1.08)}
    .form-btn:disabled{opacity:.55;cursor:default}
    .msg{margin-top:13px;font-size:.86rem;text-align:center}
    /* Раньше — свои hex, близкие к --bad/--ok кабинета, но не те же. Теперь
       токены, значения совпадают дословно (владелец 2026-08-25). */
    .msg.error{color:var(--bad)}
    .msg.success{color:var(--ok)}

    /* В макете подвал стоит на том же фоне, что страница, и отделён только
       линией сверху — прежняя заливка --paper-2 добавляла лишнюю плашку. */
    footer{border-top:1px solid var(--hair);padding:60px 0 32px}
    .foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
    /* Заголовки колонок — моноширинные, как весь служебный текст макета. */
    .foot h4{font-family:var(--mono);font-size:.719rem;letter-spacing:.08em;text-transform:uppercase;
             color:var(--ink-3);margin:0 0 16px;font-weight:400}
    .foot a{display:block;color:var(--ink-2);font-size:.906rem;margin-bottom:11px;transition:color .2s}
    .foot a:hover{color:var(--ink)}
    .foot p{font-size:.875rem;color:var(--ink-2);margin:14px 0 18px;max-width:260px}
    .legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
           margin-top:52px;padding-top:24px;border-top:1px solid var(--hair);
           font-family:var(--mono);font-size:.8125rem;color:var(--ink-3)}

    /* 920px — точка перелома макета (было 900px). Секции там же сжимаются
       со 108px до 76px по вертикали. */
    @media (max-width:920px){
      .hero{grid-template-columns:1fr;gap:40px;padding-top:42px}
      .cols,.plans,.day-row{grid-template-columns:1fr}
      .row{grid-template-columns:1fr;gap:6px}
      .foot{grid-template-columns:1fr 1fr}
      .links{display:none}
      .only-sm{display:inline-flex}
      .hide-sm{display:none}
      section{padding:76px 0}
      .closing{padding-top:76px;padding-bottom:76px}
    }
    @media (min-width:921px){ .only-sm{display:none} }
    @media (max-width:560px){
      .hero-cta{flex-direction:column;align-items:stretch}
      .hero-cta .cta{text-align:center;padding:14px 20px}
      .foot{grid-template-columns:1fr;gap:24px}
      .legal{flex-direction:column;gap:8px}
      .plan{padding:24px 20px}
    }
    /* *{animation:none!important} гасит все keyframe-анимации (нить, узлы,
       мигающие точки) разом, но не переходы (.reveal использует transition,
       не animation) и не оставляет нить/узлы в их СТАРТОВОМ, а не КОНЕЧНОМ
       состоянии (stroke-dashoffset:1400 = невидимая линия, opacity:0 = узел
       не появился) — без явного сброса ниже человек с reduced-motion не
       увидел бы нить и секции вовсе, а не просто без анимации. */
    @media (prefers-reduced-motion:reduce){
      *{animation:none!important}
      .thread-path,.day-thread-path{stroke-dashoffset:0}
      .thread-node,.day-node{opacity:1;transform:scale(1)}
      .snap-flash,.snap-ray{display:none}
      .reveal{opacity:1;transform:none;transition:none}
    }

/* ── страница входа: presence во весь кадр .authpage фоном (владелец
   2026-09-02, «картинку почти на весь экран, от края до края как сам сайт,
   а в нём на том же месте меню входа»), карточка формы — поверх, в том же
   месте и того же размера, что и исходно (до всей этой серии правок): та
   же .authpage{flex}/.auth-section{padding:...var(--gut)}/.auth-wrapper
   {max-width:420px;padding:0 var(--gut)} комбинация, что была с
   2026-08-25 — за сутки экспериментов с шириной карточки (.w-контейнер,
   grid как у .hero, точный расчёт равных зазоров) владелец решил, что
   практический результат хуже исходного: то растянутая карточка, то форма
   впритык к краю мимо обычных полей сайта. */
.authpage{min-height:calc(100vh - 60px);position:relative;display:flex}
/* flex-grow:0, не 1 — .auth-visual теперь position:absolute (вне потока),
   значит .auth-section — единственный настоящий flex-item в строке; с
   grow:1 он забрал бы себе всю свободную ширину и раздвинулся на все
   100%, а не остался слева на своей половине. */
.authpage .auth-section{position:relative;z-index:1;border-top:none;background:transparent;flex:0 1 50%;
                         padding:clamp(32px,7vw,72px) var(--gut);
                         display:flex;align-items:center;justify-content:center}
/* padding:0 var(--gut) — тот же приём, что молча держал карточку такой же
   ширины с 2026-08-25: max-width даёт потолок (420px), а padding по факту
   сужает её на широких экранах, где --gut не схлопнут до минимума. Без
   этой строки карточка растягивается на все 420px — то самое «растянуто»,
   на которое пожаловался владелец 2026-09-02 (правка предыдущего дня
   случайно это убрала вместе с чисткой другого дублирующего правила). */
.authpage .auth-wrapper{max-width:420px;width:100%;padding:0 var(--gut)}
/* Абсолютно, во весь .authpage (position:relative на нём), а не отдельная
   колонка — картинка теперь фон под всей страницей входа, не панель
   сбоку. object-fit:cover — кадрирует по центру, без искажений, как у
   любого full-bleed фото на сайте. z-index не проставлен — по умолчанию
   абсолютный слой ниже .auth-section (position:relative, идёт следом в
   разметке) в том же стек-контексте, но z-index:0 явно на случай, если
   разметку в будущем переставят местами. */
.auth-visual{position:absolute;inset:0;z-index:0;overflow:hidden}
.auth-visual .presence-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Два разных файла, не один framework для обеих тем: у исходника белый фон
   картинки не совпадает с тёмным --deep ни при каком CSS-фильтре, который
   не исказил бы сами частицы. Показываем/прячем через display — тот же
   трёхблочный селектор, что держит все цветовые токены темы (владелец
   2026-09-02: «когда переключился или зашёл уже со светлой»). По умолчанию
   (правило ниже, без media/[data-theme]) — светлая, раз :root в site.css
   сама светлая тема. */
.auth-visual .presence-dark{display:none}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .auth-visual .presence-light{display:none}
  html:not([data-theme="light"]) .auth-visual .presence-dark{display:block}
}
html[data-theme="dark"] .auth-visual .presence-light{display:none}
html[data-theme="dark"] .auth-visual .presence-dark{display:block}
@media (max-width:920px){
  .auth-visual{display:none}
  .authpage .auth-section{flex:1 1 100%}
}

/* ── соц-сети Данты ── */
.social{display:flex;gap:10px;margin-top:0}
/* Скруглённый квадрат 9px и моноширинные подписи — как в макете
   (.foot-social a); раньше углы были острые, а подпись — гротеском. */
.social a{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--hair);
          border-radius:9px;font-family:var(--mono);color:var(--ink-2);font-size:.656rem;
          letter-spacing:.04em;padding:0;margin-bottom:0;transition:.2s}
.social a:hover{color:var(--ink);border-color:var(--ink-3)}

/* ── закрывающий экран: то же приглашение, но без второй тёмной полосы —
      две подряд читаются как две границы страницы ── */
/* border-bottom снят: сразу под ним footer со своей border-top, и две
   линии подряд читались бы двойной чертой. */
.closing{text-align:center;padding-top:clamp(64px,10vw,120px);padding-bottom:clamp(64px,10vw,120px);
         border-bottom:none}
.closing .sub{margin:0 auto 30px}
.closing .hero-cta{justify-content:center;margin-top:0}
/* .final-cta h2 в danta-redesign-v2.html — 40px и max-width:640px, чтобы
   заголовок не растягивался на всю ширину .w (1120px) на широких экранах. */
.closing h2{font-size:2.5rem;max-width:640px;margin:0 auto 16px}
/* Маленький статичный штрих над заголовком — не тот же мотив, что
   анимированная нить (Hero/«Один день»/«Память»): без узлов, без
   draw-in анимации, просто декоративный пунктирный росчерк. */
.thread-tail{width:120px;height:30px;margin:0 auto 36px;opacity:.6}
.thread-tail path{fill:none;stroke:var(--accent);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:4}

/* ── правовые документы: длинный текст, читаемая мера строки ── */
.legal-doc{max-width:760px;padding-top:clamp(48px,7vw,84px);padding-bottom:clamp(56px,8vw,96px)}
.legal-doc h1{font-family:var(--voice);font-weight:400;font-size:clamp(2rem,4vw,2.7rem);
              line-height:1.08;margin:0 0 10px;letter-spacing:-.012em}
.legal-doc .updated{font-size:.82rem;color:var(--ink-3);margin:0 0 34px}
.legal-doc .lead{font-family:var(--voice);font-size:1.12rem;color:var(--ink-2);line-height:1.5;
                 margin:0 0 40px;padding-bottom:26px;border-bottom:1px solid var(--hair)}
.legal-doc h2{font-family:var(--sans);font-size:.94rem;font-weight:650;letter-spacing:.01em;
              margin:34px 0 12px;text-transform:none}
.legal-doc p{font-size:.97rem;color:var(--ink-2);margin:0 0 14px;max-width:42em}
.legal-doc ul{margin:0 0 18px;padding-left:20px}
.legal-doc li{font-size:.97rem;color:var(--ink-2);margin-bottom:9px;max-width:42em}
/* --accent-strong — тот же цвет, что у единственного другого текстового
   инлайн-линка в продукте (.verify-banner в кабинете): ссылка внутри
   абзаца --ink-2 иначе отличалась от текста только подчёркиванием. */
.legal-doc a{color:var(--accent-strong);text-decoration:underline;text-underline-offset:3px}

/* ── автозаполнение браузера: Chrome красит подставленные поля своим голубым,
      и на входе они выглядели светлыми пятнами среди тёмной формы ── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px var(--paper) inset;
  box-shadow:0 0 0 1000px var(--paper) inset;
  caret-color:var(--ink);
  transition:background-color 9999s ease-out 0s;
}

/* ── страница «не найдено»: тот же свет, никакого извинения на три абзаца ── */
/* padding-top/bottom по отдельности — короткая запись `padding: X 0` обнуляла
   боковые поля .w на том же элементе (<main class="w notfound">), и на узком
   экране текст упирался в край. Тот же дефект, что нашли у .hero. */
.notfound{min-height:calc(100vh - 60px);display:flex;flex-direction:column;align-items:center;
          justify-content:center;text-align:center;
          padding-top:clamp(40px,8vw,90px);padding-bottom:clamp(40px,8vw,90px)}
.notfound .code{font-family:var(--mono);font-size:.75rem;letter-spacing:.24em;color:var(--ink-3);margin-bottom:14px}
.notfound h1{font-family:var(--voice);font-weight:400;font-size:clamp(1.9rem,4vw,2.6rem);
             line-height:1.1;margin:0 0 14px;letter-spacing:-.012em}
.notfound p{font-family:var(--voice);font-size:1.08rem;color:var(--ink-2);max-width:26em;margin:0 0 30px;line-height:1.5}
.notfound .hero-cta{justify-content:center}

/* ── Телефон в браузере: те же две ловушки, что в кабинете ──────────────────
   16px в полях — иначе Safari на iOS зумит страницу при фокусе и человек
   остаётся в увеличенной вёрстке. Цели для пальца — не меньше 44px. */
@media (max-width: 860px) {
  input, select, textarea { font-size: 16px; }
  .cta, .form-btn { min-height: 46px; }
  .chip { height: 36px; }
  .chip.sq { width: 36px; }
  .langmenu li { min-height: 44px; }
}