/* ============================================================
   lexbet.org — слой редизайна (2026-09-06)
   Метод: переопределение стилей на НЕИЗМЕННОЙ разметке.
   Направление: theme_seed 29521ec87b00 — mid-tone ground, accent 138°
   только в интеракции, Epilogue/Lora, offset side-rail,
   signature = edge-to-edge полоса под шапкой.
   Шкала отступов канона: 4/8/12/16/24/32/48/64/96.
   ============================================================ */

:root{
  /* --- подложка: тёплый камень mid-tone вместо near-black --- */
  --lex-bg:#262320;
  --lex-bg-2:#2E2A26;
  --lex-card:#34302B;
  --lex-card-2:#3C372F;
  --lex-line:#4A443C;
  --lex-text:#F5F0E8;
  --lex-muted:#B4A997;
  --lex-muted-2:#8C8375;
  /* --- акцент 138° живёт только в интеракции --- */
  --lex-green:#3FA35A;
  --lex-green-dark:#33874A;
  /* латунь остаётся для типографических меток, приглушена */
  --lex-gold:#B99358;
  --lex-gold-bright:#D6B47C;
  /* --- скругления: внешнее и внутреннее РАЗНЫЕ --- */
  --lex-radius:16px;
  --lex-radius-sm:6px;
  --lex-maxw:1240px;
  --lex-font-display:"Epilogue","Helvetica Neue",sans-serif;
  --lex-font-body:"Lora",Georgia,"Times New Roman",serif;
  --rail:236px;
}

/* ---------- 1. фон перестаёт быть плоским ---------- */
body{
  background-color:var(--lex-bg);
  background-image:
    linear-gradient(to right, rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:96px 96px;
  font-family:var(--lex-font-body);
  font-size:17px;
  line-height:1.72;
  letter-spacing:.004em;
}

/* ---------- 2. типографика: контраст, а не аккуратность ---------- */
h1,h2,h3,.lex-chart__title,.lex-stat__num,.lex-btn{
  font-family:var(--lex-font-display);
  font-weight:800;
  letter-spacing:-.028em;
  text-transform:none;
}
h1{ font-size:clamp(52px,7.4vw,96px); line-height:.94; margin:0 0 24px; }
h2{ font-size:clamp(26px,2.5vw,34px); line-height:1.08; }
h3{ font-size:clamp(19px,1.5vw,22px); line-height:1.2; font-weight:600; letter-spacing:-.018em; }
p,li,td,th{ font-family:var(--lex-font-body); }
.lex-content p{ max-width:65ch; }

/* eyebrow перестаёт быть трекингованным капсом (типовой AI-tell) */
.lex-hero__eyebrow{
  font-family:var(--lex-font-display);
  text-transform:none;
  letter-spacing:0;
  font-size:14px;
  font-weight:600;
  color:var(--lex-muted);
}

/* ---------- 3. SIGNATURE: hero — полоса во всю ширину под шапкой ---------- */
.lex-hero{
  position:relative;
  margin:0 0 64px;
  padding:96px 0 64px;
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(185,147,88,.16) 0%, transparent 58%),
    linear-gradient(180deg,#2E2A26 0%,#262320 100%);
  border-bottom:1px solid var(--lex-line);
  width:100vw;
  margin-left:calc(50% - 50vw);
}
.lex-hero .lex-wrap{ max-width:var(--lex-maxw); }
/* текст hero прижат влево, а не по центру */
.lex-hero,.lex-hero .lex-wrap{ text-align:left; }
.lex-hero__lead{
  max-width:58ch; margin-left:0; margin-right:0;
  font-size:19px; color:var(--lex-muted);
}

/* ---------- 4. боковой рельс вместо центрированной колонки ---------- */
@media (min-width:1000px){
  .lex-content > .lex-wrap{
    display:grid;
    grid-template-columns:var(--rail) minmax(0,1fr);
    column-gap:64px;
  }
  .lex-content > .lex-wrap > *{ grid-column:2; }
  .lex-content > .lex-wrap > h2,
  .lex-content > .lex-wrap > h3{
    grid-column:1;
    align-self:start;
    margin:0;
    padding-top:6px;
    border-top:1px solid var(--lex-line);
    color:var(--lex-text);
  }
  /* только раздел верхнего уровня залипает и несёт латунную линию */
  .lex-content > .lex-wrap > h2{
    position:sticky; top:96px;
    border-top:2px solid var(--lex-gold);
  }
  /* заголовок врезки набирается тише корневого */
  .lex-content > .lex-wrap > h3{
    font-size:18px; line-height:1.24; color:var(--lex-muted);
  }
}

/* ---------- 5. ритм секций: чередование плотности ---------- */
.lex-content > .lex-wrap > h2:nth-of-type(even){
  border-top-color:var(--lex-muted-2);
}
.lex-content > .lex-wrap > .lex-table-wrap:nth-of-type(even){
  background:var(--lex-bg-2);
}

/* ---------- 6. число как носитель акцента, а не карточка ---------- */
.lex-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:0; margin:32px 0; }
.lex-stat{
  background:transparent; border:0; border-right:1px solid var(--lex-line);
  border-radius:0; padding:16px 24px 16px 0; margin:0;
}
.lex-stat:last-child{ border-right:0; }
.lex-stat__num{
  font-size:clamp(46px,6.2vw,84px);
  line-height:.88; letter-spacing:-.04em; font-weight:800;
  color:var(--lex-text);
}
.lex-stat__lbl{
  font-family:var(--lex-font-body); font-size:14px;
  color:var(--lex-muted); letter-spacing:0; text-transform:none; margin-top:8px;
}

/* ---------- 7. поверхности: скругления внешние ≠ внутренние ---------- */
.lex-table-wrap,.lex-faq,.lex-proscons,.lex-chart,.lex-review,.lex-note{
  border-radius:var(--lex-radius);
  border:1px solid var(--lex-line);
  background:var(--lex-card);
}
.lex-table th,.lex-table td,.lex-faq__item,.lex-proscons__col{ border-radius:0; }
.lex-btn,.lex-rating,.lex-review__tag,.lex-val{ border-radius:var(--lex-radius-sm); }

.lex-note{ background:transparent; border:0; border-left:3px solid var(--lex-gold); border-radius:0; padding:8px 0 8px 24px; }

/* ---------- 8. шапка отступает на второй план ---------- */
.lex-header{
  background:rgba(38,35,32,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--lex-line);
}
.lex-nav a{ font-family:var(--lex-font-display); font-size:14px; font-weight:600; letter-spacing:0; text-transform:none; }
.lex-logo{ font-family:var(--lex-font-display); font-weight:800; letter-spacing:-.03em; }

/* ---------- 9. акцент 138° — только в интеракции ---------- */
a{ color:var(--lex-gold-bright); text-underline-offset:3px; }
a:hover,a:focus-visible{ color:var(--lex-green); }
.lex-nav a:hover,.lex-faq__q:hover{ color:var(--lex-green); }
:focus-visible{ outline:2px solid var(--lex-green); outline-offset:3px; }
.lex-btn--green{ background:var(--lex-green); border-color:var(--lex-green); }
.lex-btn--green:hover{ background:var(--lex-green-dark); }

/* ---------- 10. таблицы: печатный дух ---------- */
.lex-table{ border-collapse:collapse; }
.lex-table th{
  font-family:var(--lex-font-display); font-weight:600; font-size:13px;
  letter-spacing:0; text-transform:none; color:var(--lex-muted);
  border-bottom:1px solid var(--lex-line);
}
.lex-table td{ border-bottom:1px solid rgba(74,68,60,.55); }

/* ---------- движение: одно, по скроллу, с уважением к reduced-motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .lex-content > .lex-wrap > h2{ transition:border-color .3s ease; }
  .lex-btn{ transition:background .18s ease,color .18s ease; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; } /* канон доступности */
}

/* ---------- мобильные ---------- */
@media (max-width:999px){
  .lex-hero{ padding:64px 0 48px; margin-bottom:48px; }
  h1{ font-size:clamp(38px,10vw,56px); }
  .lex-stats{ grid-template-columns:repeat(2,1fr); }
  .lex-stat{ border-right:0; border-bottom:1px solid var(--lex-line); padding-right:0; }
}

/* ---------- 11. FAQ: карточки -> типографический список с линиями ---------- */
.lex-faq{ background:transparent; border:0; border-top:1px solid var(--lex-line); border-radius:0; padding:0; }
.lex-faq__item{ background:transparent; border:0; border-bottom:1px solid var(--lex-line); border-radius:0; padding:8px 0; }
.lex-faq__q{
  font-family:var(--lex-font-display); font-weight:600; font-size:19px;
  letter-spacing:-.015em; padding:16px 0; background:transparent; color:var(--lex-text);
}
.lex-faq__a{ padding:0 0 16px; }
.lex-faq__a p{ max-width:65ch; }

/* ---------- 12. Pro/Contra: равные колонки -> асимметричный сплит ---------- */
@media (min-width:800px){
  .lex-proscons{
    display:grid; grid-template-columns:1.62fr 1fr; gap:48px;
    background:transparent; border:0; border-radius:0; padding:0;
  }
}
.lex-proscons__col{ background:transparent; border:0; border-radius:0; padding:0; }
.lex-proscons__col--pro{ border-left:3px solid var(--lex-green); padding-left:24px; }
.lex-proscons__col--con{ border-left:1px solid var(--lex-line); padding-left:24px; }
.lex-proscons li{ font-family:var(--lex-font-body); }

/* ---------- 13. ритм: чередование фона у секционных поверхностей ---------- */
.lex-table-wrap:nth-of-type(odd){ background:var(--lex-card); }
.lex-table-wrap:nth-of-type(even){ background:var(--lex-bg-2); }

/* ============================================================
   ДОРАБОТКИ (согласованы 06.09.2026) — только CSS,
   разметка и JS не трогаются, инварианты verify.py целы.
   ============================================================ */

/* --- 6. заголовки без висячих строк (91.6% поддержки, деградирует молча) --- */
h1,h2,h3,.lex-faq__q{ text-wrap:balance; }
.lex-hero__lead,.lex-content p{ text-wrap:pretty; }

/* --- 8. таблица фактов становится типографическим блоком --- */
.lex-table--kv td:first-child,.lex-table--kv th:first-child{
  font-family:var(--lex-font-display); font-size:13px; font-weight:600;
  color:var(--lex-muted-2); letter-spacing:0; width:34%; vertical-align:top; padding-top:18px;
}
.lex-table--kv td:last-child{
  font-family:var(--lex-font-display); font-weight:600;
  font-size:clamp(17px,1.5vw,21px); line-height:1.28; letter-spacing:-.015em;
  color:var(--lex-text); padding-block:16px;
}

/* --- 3. строка таблицы отвечает на наведение --- */
.lex-table tbody tr{ transition:background-color .16s ease; }
.lex-table tbody tr:hover{ background:rgba(185,147,88,.07); }

/* --- 4. подчёркивание, растущее из-под слова --- */
.lex-content p a,.lex-faq__a a,.lex-note a{
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .22s ease,color .16s ease;
  padding-bottom:2px;
}
.lex-content p a:hover,.lex-content p a:focus-visible,
.lex-faq__a a:hover,.lex-note a:hover{ background-size:100% 1px; }

/* --- 5. тактильный отклик на нажатие --- */
.lex-btn{ transition:background-color .18s ease,color .18s ease,transform .08s ease; }
.lex-btn:active{ transform:translateY(1px); }

/* --- 7. FAQ раскрывается по фактической высоте, без магических 420px --- */
.lex-faq__a{
  display:grid; grid-template-rows:0fr; max-height:none;
  transition:grid-template-rows .28s ease;
}
.lex-faq__item.open .lex-faq__a{ grid-template-rows:1fr; max-height:none; }
.lex-faq__a > *{ overflow:hidden; min-height:0; }
.lex-faq__a p{ padding:0 0 16px; margin:0; }
.lex-faq__q::after{ transition:transform .28s ease; display:inline-block; }
.lex-faq__item.open .lex-faq__q::after{ transform:rotate(180deg); }

/* --- 9. нижние секции не считаются, пока не нужны --- */
.lex-faq,.lex-proscons{ content-visibility:auto; contain-intrinsic-size:auto 600px; }

/* --- 1. рельс подсвечивает раздел, который читают (scroll-driven, CSS-only) --- */
@supports (animation-timeline: view()){
  @media (min-width:1000px) and (prefers-reduced-motion:no-preference){
    .lex-content > .lex-wrap > h3{
      animation:rail-spy linear both;
      animation-timeline:view();
      animation-range:cover 8% cover 62%;
    }
    @keyframes rail-spy{
      0%   { color:var(--lex-muted-2); border-top-color:var(--lex-line); }
      40%,60%{ color:var(--lex-text);  border-top-color:var(--lex-gold); }
      100% { color:var(--lex-muted-2); border-top-color:var(--lex-line); }
    }
  }
}

/* --- 2. прогресс чтения: линия слева, ноль JS --- */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    body::after{
      content:""; position:fixed; inset-block:0; left:0; width:3px; z-index:60;
      background:var(--lex-gold); transform:scaleY(0); transform-origin:top;
      animation:read-progress linear both; animation-timeline:scroll(root);
      pointer-events:none;
    }
    @keyframes read-progress{ to{ transform:scaleY(1); } }
  }
}

/* ============================================================
   ПАКЕТ 2 — заметная интерактивность. Чистый CSS, разметка и JS не тронуты.
   ============================================================ */

/* --- A. переходы между страницами сайта (MPA View Transitions) --- */
@view-transition{ navigation:auto; }
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){ animation:vt-out .22s ease both; }
  ::view-transition-new(root){ animation:vt-in .3s ease both; }
  @keyframes vt-out{ to{ opacity:0; transform:translateY(-6px); } }
  @keyframes vt-in{ from{ opacity:0; transform:translateY(8px); } }
}
/* ВАЖНО: именованный переход НЕ вешать на .lex-header — он ломает position:sticky
   (замер 06.09.2026: header_top -2037 при scrollY 2038, шапка переставала липнуть).
   Переход между страницами делает root-анимация выше, этого достаточно. */

/* --- B. шапка реагирует на прокрутку (scroll-driven, без JS) --- */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    .lex-header__inner{
      animation:hdr-shrink linear both;
      animation-timeline:scroll(root);
      animation-range:0 180px;
    }
    @keyframes hdr-shrink{
      to{ padding-block:8px; }
    }
    .lex-logo{
      animation:logo-shrink linear both;
      animation-timeline:scroll(root);
      animation-range:0 180px;
    }
    @keyframes logo-shrink{
      to{ font-size:1.32rem; letter-spacing:.06em; }
    }
  }
}

/* --- C. кнопка заливается из-под курсора --- */
.lex-btn{
  background-image:linear-gradient(var(--lex-green-dark),var(--lex-green-dark));
  background-size:0% 100%; background-position:0 0; background-repeat:no-repeat;
  transition:background-size .26s cubic-bezier(.2,.7,.3,1),color .18s ease,transform .08s ease;
}
.lex-btn:hover,.lex-btn:focus-visible{ background-size:100% 100%; }
.lex-btn--ghost{ background-image:linear-gradient(var(--lex-card-2),var(--lex-card-2)); }

/* --- D. изображения оживают под курсором --- */
.lex-content figure{ overflow:hidden; border-radius:var(--lex-radius); }
.lex-content figure img{ transition:transform .5s cubic-bezier(.2,.7,.3,1),filter .3s ease; display:block; }
.lex-content figure:hover img{ transform:scale(1.025); filter:brightness(1.07) saturate(1.04); }

/* --- E. связанная подсветка: наводишь на значение — оживает его метка --- */
.lex-table--kv tr:hover td:first-child,
.lex-table--kv tr:hover th:first-child{ color:var(--lex-gold-bright); }
.lex-table tbody tr:hover{ background:rgba(185,147,88,.10); }
.lex-table tbody tr:has(td:hover){ box-shadow:inset 3px 0 0 var(--lex-gold); }

/* --- F. бургер превращается в крестик (состояние берётся из aria-expanded) --- */
.lex-burger span{ transition:transform .24s ease,opacity .18s ease; transform-origin:center; }
.lex-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.lex-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; transform:scaleX(.4); }
.lex-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* --- G. активный вопрос FAQ виден сразу --- */
.lex-faq__item.open .lex-faq__q{ color:var(--lex-gold-bright); }
.lex-faq__item{ transition:border-color .2s ease; }
.lex-faq__item:hover{ border-bottom-color:var(--lex-gold); }

/* --- H. ЧИНИМ липкую шапку -------------------------------------------------
   style.css:30 задаёт body{overflow-x:hidden}. По спецификации, если одна ось
   не visible, вторая из visible превращается в auto — body становится скролл-
   контейнером, и position:sticky у его детей перестаёт срабатывать.
   Замер 06.09.2026 на ПРОДЕ (до редизайна): scrollTop 1000, header_top -1000,
   то есть шапка была задумана липкой и не липла. overflow-x:clip обрезает так же,
   но скролл-контейнер не создаёт. -------------------------------------------- */
body{ overflow-x:clip; }

/* --- I. мобильная шапка: кнопка и бургер вправо ----------------------------
   style.css: .lex-header__inner — flex без justify-content, строку распирал
   .lex-nav{flex:1 1 auto}. При ≤1040px меню display:none, распорка исчезает,
   и логотип + CTA + бургер сжимались влево (проверено на 375px: дефект есть
   и в оригинале). Возвращаем распорку через margin-left:auto. ---------------- */
@media (max-width:1040px){
  .lex-header__cta{ margin-left:auto; }
  .lex-burger{ margin-left:4px; }
}
@media (max-width:380px){
  .lex-header__inner{ gap:10px; }
  .lex-header__cta .lex-btn{ padding-inline:16px; font-size:.78rem; }
}

/* --- J. мобильное меню в типографике редизайна ------------------------------
   style.css держит .lex-mobile a в ALL CAPS с трекингом .05em — то есть
   мобильная навигация осталась в старом регистре, пока десктопная ушла в
   смешанный. Приводим к одному голосу. ------------------------------------- */
.lex-mobile{ background:var(--lex-bg-2); border-left:1px solid var(--lex-line); }
.lex-mobile a{
  font-family:var(--lex-font-display); font-weight:600; font-size:1rem;
  text-transform:none; letter-spacing:-.01em; border-bottom-color:var(--lex-line);
}
.lex-mobile a:hover,.lex-mobile a:focus-visible{ color:var(--lex-green); }
.lex-mobile .lex-btn{ text-transform:none; font-family:var(--lex-font-display); letter-spacing:0; }
.lex-mobile__close{ color:var(--lex-muted); transition:color .18s ease; }
.lex-mobile__close:hover{ color:var(--lex-text); }

/* --- K. длинные немецкие слова не должны вылезать за экран -----------------
   Замер на проде 375px: H1 «AGB & Nutzungsbedingungen» выходил за вьюпорт.
   Немецкие композиты не переносятся без явного правила; lang="de" на <html>
   уже стоит, поэтому hyphens:auto работает корректно. --------------------- */
h1,h2,h3{ overflow-wrap:break-word; hyphens:auto; }
@media (max-width:520px){
  h1{ font-size:clamp(30px,8.6vw,42px); }
}

/* --- L. переключатель локали DE/IT (P9, 09.09.2026) -------------------------
   Собран токенами редизайна: свои цвета, шрифты и радиусы не вводятся.
   В основной строке шапки живёт только на десктопе — при <=1040px .lex-nav
   уходит в display:none, вместе с ней прячется и переключатель, а его роль
   берёт копия внутри .lex-mobile. ------------------------------------------ */
.lex-lang{
  display:inline-flex; align-items:center; gap:2px; flex:0 0 auto;
  border:1px solid var(--lex-line); border-radius:var(--lex-radius-sm);
  padding:3px; line-height:1;
}
.lex-lang__cur,.lex-lang__alt{
  font-family:var(--lex-font-display); font-size:12px; font-weight:700;
  letter-spacing:.02em; padding:4px 7px; border-radius:6px; text-decoration:none;
}
.lex-lang__cur{ background:var(--lex-card-2); color:var(--lex-text); }
.lex-lang__alt{ color:var(--lex-muted); transition:color .18s ease,background-color .18s ease; }
.lex-lang__alt:hover,.lex-lang__alt:focus-visible{ color:var(--lex-green); background:var(--lex-card-2); }
@media (max-width:1040px){
  .lex-header__inner .lex-lang{ display:none; }
  /* юридические страницы собраны по другому шаблону: у них нет ни бургера, ни
     .lex-mobile, поэтому спрятать переключатель вместе с меню там некуда —
     он остаётся в строке шапки на всех ширинах. */
  .lex-header__inner .lex-lang--keep{ display:inline-flex; }
}
/* копия в мобильном меню: .lex-mobile a задаёт caps-строку с нижней границей,
   для кодов локали это лишнее — гасим адресно, не трогая пункты меню. */
.lex-mobile .lex-lang{ align-self:flex-start; margin-top:16px; }
.lex-mobile .lex-lang a,.lex-mobile .lex-lang span{
  padding:4px 7px; border-bottom:0; font-size:12px; letter-spacing:.02em;
  text-transform:none;
}
.lex-mobile .lex-lang .lex-lang__cur{ color:var(--lex-text); }
.lex-mobile .lex-lang .lex-lang__alt{ color:var(--lex-muted); }
.lex-mobile .lex-lang .lex-lang__alt:hover,
.lex-mobile .lex-lang .lex-lang__alt:focus-visible{ color:var(--lex-green); }