@import url('fonts.css');

/* ═══════════════════════════════════════════════════════════════
   Dizori — сайт-визитка. Светлая сцена, редизайн 24.08.2026.
   Дизайн-система: 8 цветовых токенов, 6 ступеней шрифта,
   6 отступов, одна кнопка. Ломать правками «на глаз» нельзя —
   правила в CLAUDE.md.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── поверхности ──
     Светлые и почти нейтральные. Бежево-кофейная гамма (F5EFE6 / EAE1D2 / D9B79B
     и латунь B99B6B) была отвергнута 24.08.2026: на большой плоскости она
     не «дорогая», а грязная, и тянет страницу в сторону салона красоты.
     Осталась едва тёплая белизна — фон отступает, работают кадры и красный. */
  --milk:#FAF8F5;
  --milk-deep:#F1EEE9;     /* вторая поверхность: ступень едва заметна, и так и надо */
  /* ── текст ── */
  --ink:#141210;
  --ink-soft:#57514A;
  /* ── действие и линии ── */
  --lacquer:#B3251C;       /* красный лак клатча со съёмки. Единственный цвет на странице */
  --line:#E3DED6;
  --line-strong:#CFC8BE;

  /* ── шрифтовая шкала: шесть ступеней, других нет ── */
  --t1:clamp(40px,5.4vw,74px);
  --t2:clamp(28px,3.6vw,46px);
  --t3:21px;
  --t4:17px;
  --t5:14px;
  --t6:11px;

  /* ── отступы: шесть ступеней ── */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:104px;

  /* Высота шапки. Она position:absolute и лежит НАД первым экраном, поэтому
     её высоту надо знать снаружи: текст героя обязан начинаться ниже неё.
     Это величина, а не следствие содержимого - иначе лишний элемент внутри
     шапки молча сдвигает первый экран. Мобильная: padding s3x2 + знак 42px. */
  --top-h:90px;

  --display:'Prata',Georgia,'Times New Roman',serif;
  --sans:'Onest',-apple-system,'Segoe UI',Roboto,sans-serif;

  --surface:var(--milk);
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--milk);color:var(--ink);
  font:400 var(--t4)/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--lacquer);outline-offset:3px}

/* ─── сигнатура: полотно ──────────────────────────────────────
   Ромб-ячейка тем же плетением, что у товара. При прокрутке
   растягивается по вертикали (--stretch 1 → 1.28): страница
   ведёт себя как колготки. Единственный элемент, который нельзя
   повторить, не имея такого товара. */
.mesh{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='48' viewBox='0 0 34 48'%3E%3Cpath d='M17 0 L34 24 L17 48 L0 24 Z' fill='none' stroke='%2317130E' stroke-width='.6'/%3E%3C/svg%3E");
  background-size:34px calc(48px * var(--stretch,1));
  opacity:.05;
}

/* ─── каркас ──────────────────────────────────────────────────── */
.wrap{max-width:1320px;margin:0 auto;padding-inline:var(--s3)}
/* Светлые секции заливки НЕ имеют: сквозь них видно полотно-сетку, ровно как
   на первом экране. Полотно фиксированное, поэтому при прокрутке оно тянется
   (--stretch) через всю страницу единым куском, а не повторяется в каждой
   секции по отдельности. Решение Филиппа 25.08.2026.
   Переменная --surface при этом остаётся: ею красится ромб на разделителе,
   и он обязан быть НЕпрозрачным, иначе латунная нить прошла бы сквозь него. */
.band{position:relative;z-index:1;background:transparent;padding-block:var(--s6)}

/* Тёмные секции полотно перекрывают - на этом и держится ритм страницы:
   сетка то открыта, то закрыта, как плетение на просвет. */
.band--deep{--surface:var(--milk-deep);background:var(--milk-deep)}


/* разделитель секций: латунная нить с ячейкой сетки посередине.
   Ромб красится в фон своей секции — отсюда --surface. */
.band--rule::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--line-strong);opacity:.9;
}
.band--rule::after{
  content:"";position:absolute;top:-5px;left:50%;margin-left:-5px;
  width:10px;height:10px;background:var(--surface);
  border:1px solid var(--line-strong);transform:rotate(45deg);
}

/* ─── типографика ─────────────────────────────────────────────── */
/* Prata идёт одним весом 400 и не терпит отрицательного трекинга:
   в крупном кегле кириллица сразу слипается. Проверено на первом экране. */
h1{font:400 var(--t1)/1.12 var(--display);letter-spacing:0}
h2{font:400 var(--t2)/1.16 var(--display);letter-spacing:0}
h3{font:400 var(--t3)/1.3 var(--display);letter-spacing:.005em}
.tag{
  display:block;font:600 var(--t6)/1 var(--sans);
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);
}

.lead{font-size:var(--t3);line-height:1.5;color:var(--ink-soft)}
.band--ink .lead{color:var(--milk)}

/* заголовок блока: ярлык + H2, единый ритм на всей странице */
.head{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s5);max-width:30ch}
.head .lead{max-width:46ch;margin-top:var(--s1)}

/* ─── кнопка: одна на весь сайт ───────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  background:var(--lacquer);color:#fff;padding:19px 38px;
  font:600 var(--t5)/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  transition:background .25s ease,transform .25s ease;
}
.btn:hover{background:#8F1C15;transform:translateY(-1px)}
.btn:active{transform:none}
.btn--wide{width:100%}

/* ссылка-стрелка: второй способ увести, но не вторая кнопка */
.go{
  display:inline-flex;align-items:center;gap:var(--s1);align-self:flex-start;
  color:var(--lacquer);font:600 var(--t5)/1 var(--sans);
  letter-spacing:.08em;text-transform:uppercase;
  padding-bottom:5px;border-bottom:1px solid currentColor;
}
.go::after{content:"→";transition:transform .25s ease}
a:hover .go::after,.go:hover::after{transform:translateX(5px)}

/* ─── шапка ───────────────────────────────────────────────────── */
.top{
  position:absolute;inset:0 0 auto;z-index:5;
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3);min-height:var(--top-h);
}
/* Логотип — настоящий знак DZR (свидетельство № 1017518), а не набранный
   шрифтом текст: дескриптор в нём наложен на буквы, шрифтом это не собрать.
   Отдаётся МАСКОЙ, а не <img>: так знак красится через currentColor
   и одним файлом работает и на светлом фоне, и на тёмном кадре первого
   экрана. Пропорции знака 551:207 - это bbox самого рисунка.
   potrace отдавал viewBox по размеру холста, где снизу было пустое поле:
   логотип из-за этого вставал выше центра, а вычисленная высота врала. */
.logo{
  display:block;width:112px;aspect-ratio:551/207;
  background-color:currentColor;
  /* Версия обязательна: Caddy отдаёт .svg с max-age=3600, и без неё правка
     знака не долетит до того, кто уже заходил. Меняешь logo.svg - бампни ?v=. */
  -webkit-mask:url(/logo.svg?v=3) no-repeat left center/contain;
          mask:url(/logo.svg?v=3) no-repeat left center/contain;
}
.end__brand .logo{width:148px}
.top nav{display:none;gap:var(--s3);font-size:var(--t5);color:var(--ink-soft)}
.top nav a{padding-bottom:2px;border-bottom:1px solid transparent}
.top nav a:hover{border-bottom-color:var(--lacquer);color:var(--ink)}
/* ПРЯМОЙ потомок, а не любая .btn внутри шапки. Кнопка мобильного меню
   (.menu__btn) лежит в <nav> и тоже подходит под «.top .btn» - а у этого
   селектора вес выше, чем у «.menu__btn», и он перебивал её display:none.
   С 1240px в шапке показывались ДВЕ кнопки «На Wildberries» разом, и вторая
   ещё и раздувала шапку на 17px. Поймано 26.08.2026 по замечанию владельца. */
.top > .btn{display:none;margin-left:auto}

/* ─── бургер: телефон и планшет ────────────────────────────────
   До 1000px разделы и кнопка в шапке скрыты, и до 26.08.2026 это значило,
   что с телефона нет ни навигации, ни входа в журнал. Меню - выпадающая
   панель под шапкой: своя заливка обязательна, шапка лежит поверх кадра
   и наследует молочный цвет текста, на светлом фоне он не читается. */
.burger{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  margin-left:auto;width:44px;height:44px;padding:0 12px;
  background:transparent;border:1px solid currentColor;color:inherit;cursor:pointer;
}
.burger span{display:block;height:1px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.top[data-open="true"] .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.top[data-open="true"] .burger span:nth-child(2){opacity:0}
.top[data-open="true"] .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.top[data-open="true"] nav{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);
  position:absolute;top:calc(100% - var(--s2));left:var(--s3);right:var(--s3);
  padding:var(--s3);background:var(--milk);color:var(--ink);
  border:1px solid var(--line);font-size:var(--t4);
}
.top[data-open="true"] nav a{color:var(--ink)}
.menu__btn{display:inline-flex;margin-top:var(--s2)}

/* ─── 1. герой ────────────────────────────────────────────────── */
.hero{position:relative;z-index:1;display:grid;min-height:100svh}
.hero__text{
  order:2;display:flex;flex-direction:column;justify-content:center;
  gap:var(--s3);padding:var(--s5) var(--s3);
}
.hero__text .btn{align-self:flex-start}
.hero h1{max-width:17ch}
.hero .lead{max-width:38ch}
.hero__media{order:1;position:relative;min-height:64svh;overflow:hidden;background:var(--milk-deep)}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 38%}

/* факты первого экрана — числа антиквой, это язык доказательства */
.facts{display:flex;flex-wrap:wrap;gap:var(--s4);padding-top:var(--s2);border-top:1px solid var(--line)}
.facts b{display:block;font:400 var(--t3)/1.1 var(--display);margin-bottom:3px}
.facts span{font-size:var(--t5);color:var(--ink-soft)}

/* ─── 2. линии ────────────────────────────────────────────────── */
.lines{display:grid;gap:var(--s4)}
.line{display:flex;flex-direction:column}
.line__media{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--milk-deep)}
.line__media img{
  width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);
  transition:transform .9s cubic-bezier(.2,.6,.2,1);
}
.line:hover .line__media img{transform:scale(1.04)}
.line__body{display:flex;flex-direction:column;gap:var(--s2);flex:1;padding-top:var(--s3);margin-top:var(--s3);border-top:1px solid var(--line)}
.line__body p{color:var(--ink-soft);flex:1;font-size:var(--t4)}
.lines__note{margin-top:var(--s4);font-size:var(--t5);color:var(--ink-soft)}
.lines__note a{border-bottom:1px solid var(--line-strong)}

/* ─── 3. размер: вторая сигнатура ─────────────────────────────
   Чипы фигур переключают дословную цитату покупательницы.
   Данных такого рода нет ни у фабрики, ни у соседнего селлера. */
.size__grid{display:grid;gap:var(--s5)}
.size__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.size__body{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}

.chips{display:flex;flex-wrap:wrap;gap:var(--s1);width:100%}
.chip{
  font:500 var(--t5)/1 var(--sans);padding:11px 17px;
  background:none;color:var(--ink-soft);border:1px solid var(--line);
  cursor:pointer;transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.chip:hover{border-color:var(--line-strong);color:var(--ink)}
.chip[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--milk)}

.quote{
  width:100%;padding:var(--s2) 0 var(--s2) var(--s3);
  border-left:2px solid var(--lacquer);min-height:128px;
  display:flex;flex-direction:column;justify-content:center;gap:var(--s2);
}
.quote p{font:400 var(--t2)/1.25 var(--display);color:var(--ink)}
.quote cite{font:500 var(--t6)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);font-style:normal}
.quote.is-swap{opacity:0;transform:translateY(6px)}
.quote{transition:opacity .25s ease,transform .25s ease}

.howto{border-top:1px solid var(--line);padding-top:var(--s3);width:100%}
.howto b{display:block;font:600 var(--t4)/1.4 var(--sans);margin-bottom:var(--s1)}
.howto p{color:var(--ink-soft);max-width:54ch}

/* ─── 4. лента фактов ─────────────────────────────────────────── */
.strip{padding-block:var(--s4)}
.strip ul{display:grid;gap:var(--s2) var(--s4);list-style:none;font-size:var(--t5)}
.strip li{position:relative;padding-left:var(--s3)}
.strip li::before{
  content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;
  border:1px solid var(--line-strong);transform:rotate(45deg);
}

/* ─── 5. поводы ───────────────────────────────────────────────── */
.cases{display:grid;gap:0;border-top:1px solid var(--line)}
.case{
  display:grid;gap:var(--s1);align-items:baseline;
  padding:var(--s3) 0;border-bottom:1px solid var(--line);
}
.case h3{color:var(--ink);text-wrap:balance}
.case p{color:var(--ink-soft);font-size:var(--t4);max-width:52ch}

/* ─── 6. вопросы ──────────────────────────────────────────────── */
.faq{max-width:76ch}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s3) 0;cursor:pointer;list-style:none;
  font:400 var(--t3)/1.3 var(--display);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:11px;height:11px;border:1px solid var(--line-strong);
  transform:rotate(45deg);transition:transform .3s ease,background .3s ease;
}
.faq details[open] summary::after{transform:rotate(225deg);background:var(--ink)}
.faq p{padding-bottom:var(--s3);color:var(--ink-soft);max-width:64ch}
.faq p + p{padding-top:0;margin-top:calc(var(--s2) * -1)}

/* ─── 7. журнал ───────────────────────────────────────────────── */
.posts{display:grid;gap:var(--s3);margin-bottom:var(--s4)}
.post{display:flex;flex-direction:column;gap:var(--s2);padding-top:var(--s3);border-top:1px solid var(--line)}
.post p{color:var(--ink-soft);font-size:var(--t5);flex:1}

/* ─── 8. финал ───────────────────────────────────────────────── */
.end{display:grid;gap:var(--s4)}
.end__brand{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}
.end__brand .logo b{font-size:38px}
.end__brand p{max-width:46ch;color:var(--ink-soft)}
.end__mark{font-size:var(--t5);color:var(--ink-soft);max-width:46ch}
.end__mark b{color:var(--ink);font-weight:600}
.end__legal{
  grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  font-size:var(--t5);color:var(--ink-soft);
  border-top:1px solid var(--line);padding-top:var(--s3);margin-top:var(--s2);
}


/* ─── липкая кнопка: только телефон ───────────────────────────── */
.sticky{
  position:fixed;inset:auto var(--s2) var(--s2);z-index:60;
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .3s ease,transform .3s ease;
}
.sticky.is-visible{opacity:1;pointer-events:auto;transform:none}

/* ─── появление ───────────────────────────────────────────────── */
.js .rise{opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.6,.2,1)}
.js .rise.is-in{opacity:1;transform:none}
/* вход героя: H1 построчно, затем текст, затем кнопка и факты */
.js .hero__text > *:not(h1){opacity:0;transform:translateY(14px);animation:enter .8s cubic-bezier(.2,.6,.2,1) forwards}
.js .hero h1 .ln{display:block;opacity:0;transform:translateY(16px);animation:enter .8s cubic-bezier(.2,.6,.2,1) forwards}
.js .hero h1 .ln:nth-child(1){animation-delay:.14s}
.js .hero h1 .ln:nth-child(2){animation-delay:.23s}
.js .hero h1 .ln:nth-child(3){animation-delay:.32s}
.js .hero__text > :nth-child(1){animation-delay:.06s}
.js .hero__text > :nth-child(2){animation-delay:.10s}
.js .hero__text > :nth-child(3){animation-delay:.46s}
.js .hero__text > :nth-child(4){animation-delay:.54s}
.js .hero__text > :nth-child(5){animation-delay:.62s}
@keyframes enter{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rise{opacity:1;transform:none;transition:none}
  .js .hero__text > *:not(h1),.js .hero h1 .ln{opacity:1;transform:none;animation:none}
  .mesh{background-size:34px 48px !important}
  .btn,.line__media img,.go::after,.quote,.faq summary::after,.chip{transition:none}
}

/* ─── планшет ─────────────────────────────────────────────────── */
@media(min-width:700px){
  .wrap{padding-inline:var(--s4)}
  :root{--top-h:122px}
  .top{padding:var(--s4)}
  .hero__text{padding-inline:var(--s4)}
  .lines{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s3)}
  .posts{grid-template-columns:repeat(3,1fr)}
  .strip ul{grid-template-columns:repeat(2,1fr)}
  .sticky{display:none}
}

/* ─── десктоп ─────────────────────────────────────────────────── */
@media(min-width:1000px){
  .top nav{display:flex}
  .burger,.menu__btn{display:none}
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)}
  /* Верхний отступ считается от шапки, а не назначен на глаз: на невысоком
     экране контента больше, чем места, вертикальное центрирование прижимает
     его к верху - и метка «Российский бренд» вставала вплотную под знак DZR,
     читаясь как его дескриптор. Поймано 26.08.2026 по замечанию владельца. */
  .hero__text{
    order:1;min-width:0;
    padding:var(--s6) var(--s5);
    padding-top:max(var(--s6),calc(var(--top-h) + var(--s4)));
    padding-left:clamp(var(--s4),5vw,110px);
  }
  .hero__media{order:2;min-height:100svh}
  .hero__media img{object-position:52% 26%}
  .size__grid{grid-template-columns:.85fr 1.15fr;align-items:center}
  .quote p{max-width:24ch}
  .case{grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:var(--s4)}
  .strip ul{grid-template-columns:repeat(5,1fr);gap:var(--s3)}
  .end{grid-template-columns:1.1fr .9fr;align-items:start;gap:var(--s5)}
  .strip li{padding-left:var(--s2);font-size:var(--t5)}
}

@media(min-width:1240px){
  .top > .btn{display:inline-flex;padding:14px 26px}
}

/* На узких экранах кадр стоит первым и шапка ложится на него.
   Кадр тёмный сверху (пиджак) — чернильный логотип на нём тонет.

   ВАЖНО: молочный логотип — только для шапки, лежащей НА КАДРЕ, отсюда
   класс .top--overlay в разметке главной. Без него правило красило логотип
   белым на всех страницах, и на светлых (например /blog) он исчезал
   совсем — поймано 25.08.2026 при вёрстке заглушки журнала. */
@media(max-width:999px){
  .hero__media::after{
    content:"";position:absolute;inset:0 0 auto;height:140px;pointer-events:none;
    background:linear-gradient(to bottom,rgba(23,19,14,.5),rgba(23,19,14,0));
  }
  .top--overlay .logo{color:var(--milk)}
}

@media(max-width:699px){
  body{padding-bottom:88px}
  .facts{gap:var(--s3)}
  .quote p{font-size:var(--t3)}
}


/* ─── заглушка журнала (/blog до запуска движка) ────────────────
   Живёт до появления статей: как только Caddy фронта начнёт проксировать
   /blog на движок, эти стили останутся без разметки и их можно удалить.
   Сетка карточек — auto-fit, а не фиксированные колонки: между 360 и 1920
   она сама решает, сколько их поместится, без единого брейкпоинта. */
/* Шапка position:absolute и места в потоке не занимает - контент подтёк бы
   под навигацию. На первом экране главной этого не видно: там своя раскладка.
   Отступ сверху заведомо больше высоты шапки (логотип + padding var(--s3)). */
.soon{
  min-height:100svh;display:flex;align-items:center;
  padding-block:calc(var(--s6) + var(--s2)) var(--s5);
}
.soon .wrap{width:100%}
.soon h1{font-size:var(--t2)}
.soon .head{max-width:46ch;margin-bottom:var(--s5)}

.soon__list{
  list-style:none;display:grid;gap:var(--s3);margin:0 0 var(--s4);padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
}
.soon__list li{
  padding:var(--s3);background:var(--milk-deep);
  border:1px solid var(--line);
}
.soon__list h2{
  font:400 var(--t3)/1.3 var(--display);letter-spacing:.005em;
  margin:0 0 var(--s1);
}
.soon__list p{font-size:var(--t5);line-height:1.55;color:var(--ink-soft);margin:0}

.soon__note{font-size:var(--t5);color:var(--ink-soft);margin:0 0 var(--s4);max-width:52ch}

/* Кнопка и ссылка-стрелка: в строку на широком, столбиком на узком.
   flex-wrap делает это без медиа-запроса. */
.soon__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}

@media (max-width:640px){
  .soon{min-height:auto;padding-block:calc(var(--s6) + var(--s2)) var(--s5)}
  .soon .head{margin-bottom:var(--s4)}
  .soon__actions .btn{width:100%;text-align:center}
}

/* ─── уведомление о статистике ─────────────────────────────────
   Вид баннера ПЕРЕЕХАЛ В /consent.js 27.08.2026 и здесь его больше нет.
   Причина: тот же баннер показывается и на страницах журнала /blog,
   а этого файла там нет - оформление приехало бы туда пустым. Стили
   лежат внутри скрипта, который создаёт разметку, и правятся там же.
   Палитра баннера повторяет переменные выше числами; меняешь --milk,
   --ink, --lacquer - поменяй и в consent.js. */


/* ─── документ: политика и подобные страницы ──────────────────── */
.doc{padding-block:calc(var(--s6) + var(--s5)) var(--s6)}
.doc .wrap{width:100%}
.doc h1{font-size:var(--t2)}
.doc .head{max-width:52ch;margin-bottom:var(--s5)}
.doc__list{display:grid;gap:var(--s4);margin:0 0 var(--s5);padding:0;counter-reset:doc}
.doc__list li{list-style:none;max-width:78ch;padding-top:var(--s3);border-top:1px solid var(--line)}
.doc__list h2{
  display:flex;gap:var(--s2);align-items:baseline;
  font-size:var(--t4);margin:0 0 var(--s2);
}
.doc__list h2::before{
  counter-increment:doc;content:counter(doc);
  font:600 var(--t5)/1 var(--sans);color:var(--lacquer);
}
.doc__list p{font-size:var(--t5);line-height:1.6;color:var(--ink-soft);margin:0 0 var(--s2);max-width:78ch}
.doc__list p:last-child{margin-bottom:0}
.doc__list a,.soon__note a{border-bottom:1px solid currentColor}
/* Кнопка-ссылка в подвале: отзыв согласия должен выглядеть как ссылка рядом
   с политикой, но быть кнопкой - она не ведёт на страницу, а открывает выбор. */
.end__link{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;border-bottom:1px solid currentColor}