/* ==========================================================================
   ГОСТЕОН — витрина продукта. Один файл стилей на весь сайт.
   Направление выбрано Аней 03.09.2026: тёмная база, закат, стекло.
   Светлая тема обязательна переключателем — её же требование от 16.08.

   Порядок разделов:
   0 сброс и токены · 1 типографика · 2 сетка и секции · 3 шапка и меню
   4 кнопки и ссылки · 5 карточки и стекло · 6 куски продукта · 7 таблицы
   8 формы и считалки · 9 подвал · 10 движение · 11 телефон
   ========================================================================== */

/* --- 0. Сброс -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }
img, svg, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

/* --- 0. Токены: тёмная тема основная --------------------------------- */
:root {
  --fon:      #0D1013;
  --fon2:     #14181D;
  --fon3:     #1B2128;
  --fon4:     #222A33;
  --tekst:    #E9EBEE;
  --tekst2:   #A4ABB4;
  --tekst3:   #99A1AA;   /* 06.09: было #8D949D — на 11 px давало 4,19 при норме 4,5 */
  --linia:    rgba(255,255,255,.10);
  --linia2:   rgba(255,255,255,.18);
  --akcent:   #F0873F;
  --akcent2:  #FFB169;
  --akcentT:  #FFA35C;
  --na-akcente: #1B0D04;
  --zoloto:   #C9A25E;
  --led:      #7FC7E8;
  --zelyony:  #6FBF8B;
  --steklo:   rgba(255,255,255,.045);
  --steklo2:  rgba(255,255,255,.075);
  --ten:      0 24px 60px -20px rgba(0,0,0,.75);
  --ten-m:    0 10px 30px -12px rgba(0,0,0,.6);
  --svet:     radial-gradient(60% 60% at 50% 0%, rgba(240,135,63,.18), transparent 70%);

  --shirina:  74rem;   /* 1184px */
  --shirina-uzk: 46rem;
  --otstup:   clamp(1.25rem, 4vw, 2.5rem);
  --vysota-shapki: 4.5rem;

  --skruglenie: 14px;
  --skruglenie-b: 22px;

  --plavno: cubic-bezier(.22,.61,.36,1);
  --plavno2: cubic-bezier(.65,.05,.36,1);

  color-scheme: dark;
}

html[data-tema="svet"] {
  --fon:      #F4F1EB;
  --fon2:     #FFFDF9;
  --fon3:     #EBE6DD;
  --fon4:     #E1DACE;
  --tekst:    #171A1D;
  --tekst2:   #575D66;
  --tekst3:   #545A62;   /* 06.09: было #5F666E — мелкие подписи не дотягивали */
  --linia:    rgba(23,26,29,.13);
  --linia2:   rgba(23,26,29,.24);
  --akcent:   #B4521E;
  --akcent2:  #D97A38;
  --akcentT:  #8E3E14;   /* 06.09: на своей же оранжевой подложке давал 3,88 */
  --na-akcente: #FFF6EE;
  --zoloto:   #8A6A2A;
  --led:      #1E6C8E;
  --zelyony:  #1B5C39;   /* 06.09: было #24734A — на своей же зелёной плашке 3,84 */
  --steklo:   rgba(255,255,255,.60);
  --steklo2:  rgba(255,255,255,.80);
  --ten:      0 24px 60px -24px rgba(60,45,30,.28);
  --ten-m:    0 10px 30px -14px rgba(60,45,30,.22);
  --svet:     radial-gradient(60% 60% at 50% 0%, rgba(180,82,30,.10), transparent 70%);
  color-scheme: light;
}

/* --- 1. Типографика --------------------------------------------------- */
body {
  font-family: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--tekst);
  background: var(--fon);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* overflow-x: hidden на body делает у него СВОЙ блок прокрутки (overflow-y
   становится auto) — от этого ломается липкая шапка и портится прокрутка.
   `clip` обрезает то же самое, но блока прокрутки не заводит. */
html, body { overflow-x: clip; }

h1, h2, h3, h4 { font-weight: 600; line-height: 1.06; letter-spacing: -.025em; }

.zagolovok-1 {
  font-size: clamp(2.6rem, 6.8vw, 5.4rem);
  line-height: .97;
  letter-spacing: -.033em;
  font-weight: 600;
  text-wrap: balance;
}
.zagolovok-2 {
  font-size: clamp(1.95rem, 4vw, 3.15rem);
  line-height: 1.03;
  letter-spacing: -.028em;
  text-wrap: balance;
}
.zagolovok-3 {
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: -.018em;
}
.nadzagolovok {
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--akcentT);
  margin-bottom: 1.25rem;
  display: block;
}
.nadzagolovok.tihiy { color: var(--tekst3); }

.lid {
  font-size: clamp(1.06rem, 1.4vw, 1.28rem);
  line-height: 1.55;
  color: var(--tekst2);
  max-width: 38em;
}
.tishe { color: var(--tekst2); }
.melko { font-size: .875rem; line-height: 1.55; color: var(--tekst3); }
.zasechki { font-family: 'Cormorant Garamond', Georgia, serif; font-variant-numeric: lining-nums; }
b, strong { font-weight: 600; }
p + p { margin-top: 1em; }

/* Цифры везде табличные — иначе столбцы прыгают */
.cifra, td.chislo, .summa { font-variant-numeric: lining-nums tabular-nums; }

::selection { background: var(--akcent); color: var(--na-akcente); }

/* --- 2. Сетка и секции ------------------------------------------------ */
.obolochka { width: 100%; max-width: var(--shirina); margin-inline: auto; padding-inline: var(--otstup); }
.obolochka-uzkaya { max-width: var(--shirina-uzk); }
.obolochka-shirokaya { max-width: 84rem; }

.razdel { padding-block: clamp(4.5rem, 9vw, 8rem); position: relative; }
.razdel-tesno { padding-block: clamp(3rem, 6vw, 5rem); }
.razdel-inache { background: var(--fon2); }
/* Тёмная врезка переопределяет ПАЛИТРУ ЦЕЛИКОМ, а не только свой фон.
   Пока она красила только себя, в светлой теме карточки внутри неё брали
   светлую подложку, а текст оставался белым — заголовки исчезали.
   Так лечится весь класс: что бы ни положили внутрь, оно возьмёт тёмные
   токены, потому что они переопределены здесь. */
.razdel-temno {
  --fon:    #0A0C0F;
  --fon2:   #14181D;
  --fon3:   #1B2128;
  --fon4:   #222A33;
  --tekst:  #E9EBEE;
  --tekst2: #A4ABB4;
  --tekst3: #99A1AA;   /* тот же подъём, что и в основной тёмной теме */
  --linia:  rgba(255,255,255,.10);
  --linia2: rgba(255,255,255,.18);
  --steklo: rgba(255,255,255,.045);
  --steklo2: rgba(255,255,255,.075);
  --akcent:  #F0873F;
  --akcent2: #FFB169;
  --akcentT: #FFA35C;
  --na-akcente: #1B0D04;
  --zoloto: #C9A25E;
  --led:    #7FC7E8;
  --zelyony: #6FBF8B;
  background: var(--fon);
  color: var(--tekst);
}

.shapka-razdela { max-width: 44rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.shapka-razdela.po-centru { margin-inline: auto; text-align: center; }
.shapka-razdela .lid { margin-top: 1.1rem; }
.shapka-razdela.po-centru .lid { margin-inline: auto; }

.setka { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.setka-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.setka-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.setka-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.setka-2-1 { grid-template-columns: 1.15fr .85fr; align-items: center; gap: clamp(2rem,4vw,4rem); }
.setka-1-2 { grid-template-columns: .85fr 1.15fr; align-items: center; gap: clamp(2rem,4vw,4rem); }

.cherta { height: 1px; background: var(--linia); border: 0; margin: 0; }

/* У детей сетки min-width по умолчанию равен ширине их содержимого. Один
   широкий кусок внутри (например, шахматка с прокруткой) раздвигал колонку,
   и на телефоне вбок уезжала ВСЯ страница, а не только он. */
.setka > *, .geroy-setka > *, .lipkiy > *, .schitalka > *,
.podval-setka > *, .polosa-cifr > *, .shagi > * { min-width: 0; }

/* --- 3. Шапка --------------------------------------------------------- */
.propustit {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--akcent); color: var(--na-akcente);
  padding: .75rem 1.25rem; border-radius: 0 0 10px 0; font-weight: 500;
}
.propustit:focus { left: 0; }

.shapka {
  position: sticky; top: 0; z-index: 100;
  transition: background .3s var(--plavno), border-color .3s var(--plavno), backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.shapka.plotnaya {
  background: color-mix(in srgb, var(--fon) 82%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--linia);
}
.shapka-vnutri {
  height: var(--vysota-shapki);
  display: flex; align-items: center; gap: 2rem;
}

.znak { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--tekst); flex-shrink: 0; }
.znak svg { width: 30px; height: 30px; display: block; }
.znak-imya { font-size: 1.22rem; font-weight: 600; letter-spacing: -.028em; }

.menyu { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.menyu > li { position: relative; }
/* :not(.knopka) — не украшательство. Правило «.menyu > li > a» весит больше,
   чем «.knopka-glavnaya», и без исключения оно красит кнопку внутри меню
   в цвет обычного пункта: на телефоне главная кнопка становилась серой
   надписью на пустом месте. Тот же класс граблей, что «.karta p» 04.09. */
.menyu-knopka, .menyu > li > a:not(.knopka) {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .55rem .8rem; border-radius: 9px;
  background: none; border: 0; cursor: pointer;
  font-size: .95rem; color: var(--tekst2); text-decoration: none;
  transition: color .18s, background .18s;
  /* 🔴 06.09: без этого «Прямые продажи» и «О продукте» ломались на две
     строки, и шапка стояла рваной лесенкой — первое, что видит человек.
     Пункт меню — это один ярлык, а не абзац: переносить его нечему. */
  white-space: nowrap;
}
.menyu-knopka:hover, .menyu > li > a:not(.knopka):hover,
.menyu-knopka[aria-expanded="true"] { color: var(--tekst); background: var(--steklo); }
.menyu > li > a:not(.knopka)[aria-current="page"] { color: var(--akcentT); }
.menyu-knopka svg { width: 10px; height: 10px; opacity: .55; transition: transform .22s var(--plavno); }
.menyu-knopka[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Большое меню — устроено разделами, а не плоским списком */
.bolshoe-menyu {
  position: absolute; top: calc(100% + .55rem); left: 50%; translate: -50% 0;
  min-width: 30rem; padding: 1rem;
  background: var(--fon2); border: 1px solid var(--linia);
  border-radius: var(--skruglenie-b); box-shadow: var(--ten);
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .25rem;
  opacity: 0; visibility: hidden; translate: -50% .5rem;
  transition: opacity .2s var(--plavno), translate .2s var(--plavno), visibility .2s;
}
.bolshoe-menyu.otkryto { opacity: 1; visibility: visible; translate: -50% 0; }
.bolshoe-menyu.odna-kolonka { grid-template-columns: 1fr; min-width: 20rem; }
.punkt-menyu {
  display: block; padding: .7rem .8rem; border-radius: 11px;
  text-decoration: none; color: var(--tekst); transition: background .16s;
}
.punkt-menyu:hover { background: var(--fon3); }
.punkt-menyu .imya { font-weight: 500; font-size: .95rem; display: block; }
.punkt-menyu .poyasnenie { font-size: .8rem; color: var(--tekst3); line-height: 1.35; display: block; margin-top: .12rem; }
.menyu-podval {
  grid-column: 1 / -1; margin-top: .5rem; padding: .85rem .8rem 0;
  border-top: 1px solid var(--linia); font-size: .82rem; color: var(--tekst3);
}
.menyu-podval a { color: var(--akcentT); }

.spravo { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

/* Переключатель темы */
.tema-knopka {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: none; border: 1px solid var(--linia); border-radius: 10px;
  color: var(--tekst2); cursor: pointer; transition: color .18s, border-color .18s, background .18s;
}
.tema-knopka:hover { color: var(--tekst); border-color: var(--linia2); background: var(--steklo); }
.tema-knopka svg { width: 17px; height: 17px; }
.tema-solnce, .tema-luna { display: none; }
html[data-tema="svet"] .tema-luna { display: block; }
html:not([data-tema="svet"]) .tema-solnce { display: block; }

/* Кнопка меню на телефоне */
.menyu-knopki { display: none; }
.burger { display: none; width: 38px; height: 38px; place-items: center;
  background: none; border: 1px solid var(--linia); border-radius: 10px; color: var(--tekst); cursor: pointer; }
.burger svg { width: 18px; height: 18px; }

/* Дорожка «где вы находитесь» — на страницах, куда приходят из поиска */
.kroshki {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding-top: 1.5rem; font-size: .84rem; color: var(--tekst3);
}
.kroshki a { color: var(--tekst3); text-decoration: none; }
.kroshki a:hover { color: var(--akcentT); }
.kroshka-strelka { opacity: .5; }
/* Звено без своей страницы — «Продукт», «О продукте». Оно не ссылка,
   и выглядеть ссылкой не должно: обманутый щелчок раздражает сильнее,
   чем отсутствие ссылки. */
.kroshki .kroshka-tihaya { color: var(--tekst3); opacity: .75; }
.kroshki [aria-current="page"] { color: var(--tekst2); }
.kroshki + .geroy { padding-top: clamp(1.5rem, 4vw, 3rem); }

/* --- 4. Кнопки -------------------------------------------------------- */
.knopka {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.4rem; border-radius: 11px;
  font-size: .97rem; font-weight: 500; line-height: 1.2;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .18s var(--plavno), box-shadow .22s var(--plavno), background .18s, border-color .18s, color .18s;
  white-space: nowrap;
}
.knopka-glavnaya {
  background: linear-gradient(135deg, var(--akcent2), var(--akcent));
  color: var(--na-akcente);
  box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--akcent) 70%, transparent);
}
.knopka-glavnaya:hover { transform: translateY(-1px); box-shadow: 0 14px 32px -12px color-mix(in srgb, var(--akcent) 80%, transparent); }
.knopka-glavnaya:active { transform: translateY(0); }
.knopka-tihaya { background: var(--steklo); border-color: var(--linia2); color: var(--tekst); }
.knopka-tihaya:hover { background: var(--steklo2); border-color: var(--tekst3); }
.knopka-golaya { padding-inline: 0; color: var(--akcentT); background: none; }
.knopka-golaya:hover { gap: .8rem; }
.knopka-bolshaya { padding: 1rem 1.8rem; font-size: 1.02rem; border-radius: 13px; }
.knopka-malenkaya { padding: .5rem .9rem; font-size: .87rem; border-radius: 9px; }
.knopki { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

a { color: var(--akcentT); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--akcent); }

/* Видимая рамка фокуса — по клавиатуре сайт обязан работать целиком */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--akcentT); outline-offset: 3px; border-radius: 6px;
}

.strelka { width: 1em; height: 1em; flex-shrink: 0; transition: transform .2s var(--plavno); }
.knopka-golaya:hover .strelka { transform: translateX(3px); }

/* --- 5. Карточки и стекло --------------------------------------------- */
.karta {
  background: var(--fon2); border: 1px solid var(--linia);
  border-radius: var(--skruglenie-b); padding: clamp(1.4rem, 2.4vw, 2rem);
  position: relative; overflow: hidden;
  transition: border-color .25s var(--plavno), transform .25s var(--plavno), box-shadow .25s var(--plavno);
}
.karta-steklo { background: var(--steklo); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.karta-zhivaya:hover { border-color: var(--linia2); transform: translateY(-3px); box-shadow: var(--ten-m); }
a.karta { text-decoration: none; color: inherit; display: block; }
a.karta:hover { border-color: color-mix(in srgb, var(--akcent) 45%, var(--linia)); }
.karta h3 { margin-bottom: .55rem; }
:where(.karta) p { color: var(--tekst2); font-size: .97rem; }
.karta-akcent { border-color: color-mix(in srgb, var(--akcent) 40%, var(--linia)); }
.karta-akcent::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--akcent), transparent);
}

.znachok {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--akcent) 14%, transparent);
  color: var(--akcentT); margin-bottom: 1.1rem;
}
.znachok svg { width: 20px; height: 20px; }

/* Крупное число-доказательство */
.polosa-cifr { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(1rem,2vw,2rem); }
.cifra-blok .cifra {
  font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 600;
  line-height: 1; letter-spacing: -.035em; display: block;
  background: linear-gradient(135deg, var(--akcent2), var(--akcent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cifra-blok .podpis { display: block; margin-top: .6rem; font-size: .9rem; color: var(--tekst2); line-height: 1.4; }

/* Метка-плашка */
.metka {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .28rem .7rem; border-radius: 100px;
  font-size: .78rem; font-weight: 500; letter-spacing: .01em;
  background: var(--steklo); border: 1px solid var(--linia); color: var(--tekst2);
}
.metka-akcent { background: color-mix(in srgb, var(--akcent) 15%, transparent); border-color: color-mix(in srgb, var(--akcent) 35%, transparent); color: var(--akcentT); }
.metka-est { background: color-mix(in srgb, var(--zelyony) 15%, transparent); border-color: color-mix(in srgb, var(--zelyony) 32%, transparent); color: var(--zelyony); }
.metka-net { color: var(--tekst3); }
.metka-tochka { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* --- 6. Куски продукта (вместо картинок и снимков экрана) -------------- */
.pribor {
  background: var(--fon2); border: 1px solid var(--linia);
  border-radius: 18px; box-shadow: var(--ten); overflow: hidden;
}
.pribor-shapka {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem 1rem; border-bottom: 1px solid var(--linia);
  background: var(--fon3); font-size: .8rem; color: var(--tekst3);
}
.pribor-tochki { display: flex; gap: .3rem; }
.pribor-tochki i { width: 8px; height: 8px; border-radius: 50%; background: var(--linia2); display: block; }
.pribor-telo { padding: clamp(.9rem, 1.6vw, 1.25rem); }

/* Сетка шахматки */
/* Шестнадцать дней на телефоне сплющивать бессмысленно: их листают вбок.
   Прокрутка живёт внутри прибора, страница вбок не едет. */
.shahmatka-obolochka { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.shahmatka { font-size: .8rem; user-select: none; min-width: 34rem; }
.shahmatka-dni { display: grid; gap: 2px; margin-bottom: 4px; }
.shahmatka-dni span {
  text-align: center; font-size: .68rem; color: var(--tekst3);
  padding-block: .2rem; font-variant-numeric: tabular-nums;
}
.shahmatka-dni span.vyhodnoy { color: var(--akcentT); }
.shahmatka-stroka { display: grid; gap: 2px; margin-bottom: 2px; align-items: stretch; }
.shahmatka-nomer {
  min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: .05rem;
  padding-right: .6rem; color: var(--tekst2); font-size: .78rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.shahmatka-nomer b { font-weight: 500; color: var(--tekst); font-variant-numeric: tabular-nums; font-size: .84rem; }
.shahmatka-nomer .melko { font-size: .68rem; line-height: 1.1; }
.yacheyka {
  min-height: 34px; border-radius: 5px;
  background: var(--fon3); border: 1px solid transparent;
  grid-row: 1;
}
.yacheyka.vyhodnoy { background: color-mix(in srgb, var(--akcent) 7%, var(--fon3)); }
/* Бронь — не «плашка поверх», а такой же житель сетки: занимает свои
   колонки. От этого она не разъезжается при любой ширине экрана. */
.bron {
  grid-row: 1; margin: 2px; border-radius: 5px; min-width: 0;
  display: flex; align-items: center; padding-inline: .45rem;
  font-size: .72rem; font-weight: 500; line-height: 1;
  cursor: grab; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  border: 1px solid; position: relative; z-index: 2;
  touch-action: none;
  transition: box-shadow .18s var(--plavno), outline-color .18s;
  outline: 2px solid transparent; outline-offset: 1px;
}
.bron:hover { box-shadow: var(--ten-m); z-index: 4; }
.bron:active { cursor: grabbing; }
.bron.vybrana { outline-color: var(--akcentT); z-index: 5; }
.shahmatka-stroka { grid-auto-rows: minmax(34px, auto); }
.shahmatka-nomer { grid-row: 1; }
/* Статус различается не только цветом: у каждого своя штриховка и подпись */
.bron-oplachena { background: color-mix(in srgb, var(--zelyony) 24%, var(--fon2)); border-color: color-mix(in srgb, var(--zelyony) 50%, transparent); color: var(--tekst); }
.bron-zhdyot    { background: color-mix(in srgb, var(--akcent) 22%, var(--fon2)); border-color: color-mix(in srgb, var(--akcent) 50%, transparent); color: var(--tekst); }
.bron-zhdyot::before {
  content: ''; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background: repeating-linear-gradient(45deg, transparent 0 5px, color-mix(in srgb, var(--akcent) 30%, transparent) 5px 7px);
}
.bron-uborka    { background: var(--fon4); border-color: var(--linia2); color: var(--tekst2); }
.bron-uborka::before {
  content: ''; position: absolute; inset: 0; opacity: .6; pointer-events: none;
  background: repeating-linear-gradient(-45deg, transparent 0 4px, var(--linia2) 4px 5px);
}
.bron span { position: relative; z-index: 1; }
/* «Сегодня» отмечаем самой ячейкой, а не полосой поверх сетки: полосу
   приходилось считать в пикселях, а у прибора стоит поворот — она уезжала. */
.yacheyka.segodnya-den { box-shadow: inset 2px 0 0 var(--akcentT); }
.shahmatka-dni span.segodnya-den { color: var(--akcentT); font-weight: 600; }
.shahmatka-dni span.segodnya-den::after {
  content: ''; display: block; height: 2px; margin-top: 2px;
  background: var(--akcentT); border-radius: 2px;
}

/* Разбор цены */
.raschyot { font-size: .9rem; }
.raschyot-stroka { display: flex; justify-content: space-between; gap: 1rem; padding-block: .42rem; border-bottom: 1px dashed var(--linia); }
.raschyot-stroka:last-child { border-bottom: 0; }
.raschyot-stroka .chto { color: var(--tekst2); }
.raschyot-stroka .skolko { font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.raschyot-itog { display: flex; justify-content: space-between; gap: 1rem; margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--linia2); font-weight: 600; font-size: 1.05rem; }
.raschyot-itog .skolko { font-variant-numeric: lining-nums tabular-nums; color: var(--akcentT); }

/* Переписка */
.perepiska { display: flex; flex-direction: column; gap: .55rem; font-size: .87rem; }
.soobshenie { max-width: 84%; padding: .55rem .8rem; border-radius: 13px; line-height: 1.42; }
.soobshenie-gost { background: var(--fon3); border-bottom-left-radius: 4px; align-self: flex-start; }
.soobshenie-nash { background: color-mix(in srgb, var(--akcent) 20%, var(--fon2)); border: 1px solid color-mix(in srgb, var(--akcent) 32%, transparent); border-bottom-right-radius: 4px; align-self: flex-end; }
.soobshenie-otkuda { font-size: .7rem; color: var(--tekst3); margin-bottom: .15rem; display: block; }

/* --- 7. Таблицы ------------------------------------------------------- */
.listaetsya { margin-top: .5rem; color: var(--tekst3); }
.tablica-obolochka { overflow-x: auto; border: 1px solid var(--linia); border-radius: var(--skruglenie-b); background: var(--fon2); }
table.sravnenie { font-size: .94rem; min-width: 44rem; }
table.sravnenie th, table.sravnenie td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--linia); vertical-align: top; }
table.sravnenie thead th { font-weight: 500; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--tekst3); background: var(--fon3); position: sticky; top: 0; }
table.sravnenie tbody tr:last-child td { border-bottom: 0; }
table.sravnenie tbody tr:hover { background: var(--steklo); }
/* 🔴 Первый столбец закреплён, 10.09. Таблица шире экрана телефона и
   листается вбок — и вместе с ней уезжало НАЗВАНИЕ строки. Человек видел
   «9 500 ₽ · 14 400 ₽ · по заявке» и не помнил, о чём это. Особенно после
   того, как первой строкой в таблицу встали деньги. Подложка обязательна:
   без неё сквозь закреплённый столбец просвечивает то, что под ним едет. */
table.sravnenie th:first-child, table.sravnenie td:first-child {
  position: sticky; left: 0; z-index: 1;
  background: var(--fon2);
  box-shadow: 1px 0 0 var(--linia);
}
table.sravnenie thead th:first-child { z-index: 2; background: var(--fon3); }
table.sravnenie tbody tr.my td:first-child {
  background: color-mix(in srgb, var(--akcent) 8%, var(--fon2));
}
table.sravnenie td.chislo { text-align: right; white-space: nowrap; }
table.sravnenie .my { background: color-mix(in srgb, var(--akcent) 8%, transparent); }
table.sravnenie thead th.my { background: color-mix(in srgb, var(--akcent) 18%, var(--fon3)); color: var(--akcentT); }
table.sravnenie caption { caption-side: bottom; padding: .9rem 1rem; font-size: .82rem; color: var(--tekst3); text-align: left; }

/* --- 8. Формы и считалки ---------------------------------------------- */
.pole { display: block; margin-bottom: 1rem; }
.pole > span { display: block; font-size: .87rem; color: var(--tekst2); margin-bottom: .35rem; }
.pole input, .pole select, .pole textarea {
  width: 100%; padding: .72rem .9rem; border-radius: 11px;
  background: var(--fon); border: 1px solid var(--linia2); color: var(--tekst);
  transition: border-color .18s, background .18s;
}
.pole input:focus, .pole select:focus, .pole textarea:focus { border-color: var(--akcent); background: var(--fon2); }
.pole input[type="number"] { font-variant-numeric: lining-nums tabular-nums; }
.pole-ryad { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0 1rem; }

.polzunok { width: 100%; accent-color: var(--akcent); margin-top: .3rem; }

.schitalka { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.schitalka-otvet { background: var(--fon3); border: 1px solid var(--linia); border-radius: var(--skruglenie-b); padding: clamp(1.25rem, 2.4vw, 1.9rem); }
.schitalka-glavnoe { font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 600; line-height: 1; letter-spacing: -.035em; color: var(--akcentT); font-variant-numeric: lining-nums tabular-nums; }
.schitalka-podpis { font-size: .9rem; color: var(--tekst2); margin-top: .5rem; }

/* Галочка согласия. Область нажатия — вся строка, а не квадратик 13 px:
   покупателю 55+ с телефона в квадратик попасть трудно. */
.pole-galochka {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem;
  align-items: start; margin-top: 1.1rem; cursor: pointer;
  font-size: .87rem; line-height: 1.5; color: var(--tekst2);
}
.pole-galochka input {
  width: 1.15rem; height: 1.15rem; margin-top: .12rem;
  accent-color: var(--akcent); cursor: pointer; flex: none;
}
.pole-galochka a { color: var(--akcentT); }
.pole-galochka.oshibka { color: var(--akcentT); }
.pole-galochka.oshibka input { outline: 2px solid var(--akcentT); outline-offset: 2px; }

.soglasie { font-size: .8rem; color: var(--tekst3); line-height: 1.45; margin-top: .8rem; }

/* Ловушка для ботов: поле есть в разметке, но человеку его не видно и
   табуляцией в него не попасть. display:none тут не годится — часть ботов
   такие поля пропускает именно потому, что они спрятаны очевидно. */
.lovushka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Ответ формы */
.otvet-horosho { color: var(--zelyony); }
.otvet-ploho { color: var(--akcentT); }
.pole input.oshibka, .pole textarea.oshibka { border-color: var(--akcentT); }

/* Вопрос-ответ */
.vopros { border-bottom: 1px solid var(--linia); }
.vopros summary {
  list-style: none; cursor: pointer; padding: 1.15rem 2.5rem 1.15rem 0;
  font-weight: 500; font-size: 1.05rem; position: relative;
}
.vopros summary::-webkit-details-marker { display: none; }
.vopros summary::after {
  content: ''; position: absolute; right: .4rem; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--tekst3); border-bottom: 2px solid var(--tekst3);
  translate: 0 -70%; rotate: 45deg; transition: rotate .22s var(--plavno), border-color .22s;
}
.vopros[open] summary::after { rotate: -135deg; translate: 0 -20%; border-color: var(--akcentT); }
.vopros summary:hover { color: var(--akcentT); }
.vopros-otvet { padding-bottom: 1.3rem; color: var(--tekst2); max-width: 52em; }

/* Шаги */
.shagi { counter-reset: shag; display: grid; gap: 1rem; }
.shag { position: relative; padding-left: 3.4rem; }
.shag::before {
  counter-increment: shag; content: counter(shag);
  position: absolute; left: 0; top: -.1rem;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--akcent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--akcent) 32%, transparent);
  color: var(--akcentT); font-weight: 600; font-size: 1rem;
  font-variant-numeric: lining-nums;
}
.shag h3 { margin-bottom: .3rem; }
:where(.shag) p { color: var(--tekst2); font-size: .97rem; }

/* Список с галочками и с крестиками */
.spisok { display: grid; gap: .6rem; }
.spisok li { position: relative; padding-left: 1.85rem; font-size: .97rem; color: var(--tekst2); }
.spisok li::before {
  content: ''; position: absolute; left: 0; top: .2rem;
  width: 1.2rem; height: 1.2rem; background: currentColor;
}
.spisok-est li { color: var(--tekst2); }
.spisok-est li::before {
  color: var(--zelyony);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.spisok-net li::before {
  color: var(--tekst3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 5l10 10M15 5L5 15' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 5l10 10M15 5L5 15' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Врезка-предупреждение и врезка-цитата */
.vrezka {
  border-left: 2px solid var(--akcent); padding: .2rem 0 .2rem 1.25rem;
  color: var(--tekst2); font-size: .97rem;
}
.citata { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.25; letter-spacing: -.01em; color: var(--tekst); }
.citata-kto { display: block; margin-top: 1rem; font-family: 'Golos Text', sans-serif; font-size: .87rem; color: var(--tekst3); letter-spacing: 0; }

/* --- 9. Первый экран --------------------------------------------------- */
.geroy { position: relative; padding-block: clamp(3.5rem, 8vw, 7rem) clamp(4rem, 8vw, 7rem); overflow: hidden; }
.geroy::before {
  content: ''; position: absolute; inset: -20% -10% auto -10%; height: 70vh;
  background: var(--svet); pointer-events: none; z-index: 0;
}
/* Свет держим ПО КРАЯМ, не за текстом: на светящемся пятне заголовок не читается */
.geroy::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(38% 50% at 100% 18%, color-mix(in srgb, var(--akcent) 16%, transparent), transparent 70%),
    radial-gradient(30% 40% at 0% 60%, color-mix(in srgb, var(--zoloto) 10%, transparent), transparent 70%);
}
.geroy > * { position: relative; z-index: 1; }
.geroy-setka { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.geroy .lid { margin-top: 1.5rem; font-size: clamp(1.1rem, 1.5vw, 1.32rem); }
.geroy .knopki { margin-top: 2.2rem; }
.geroy-pod-knopkami { margin-top: 1.1rem; font-size: .84rem; color: var(--tekst3); }

/* Герой без правой колонки. Пятнадцать страниц из двадцати одной — это
   просто заголовок и абзац: правая половина пустая, а высота стояла та же,
   что у главной с шахматкой. Получался экран пустоты между заголовком
   и первым делом. Здесь он ужат, а заголовок ограничен по росту: на
   документе четырёхстрочная надпись в пол-экрана — не солидность,
   а неумение остановиться. Ставится сборщиком, не руками. */
.geroy-tekst { padding-block: clamp(2.5rem, 5.5vw, 4.5rem) clamp(2.25rem, 4.5vw, 3.5rem); }
.geroy-tekst .zagolovok-1 { font-size: clamp(2.3rem, 4.9vw, 3.9rem); }
.geroy-tekst .lid { margin-top: 1.15rem; }

/* Содержание документа. Двенадцать разделов подряд человек не читает —
   он ищет свой. Три колонки на большом экране, одна на телефоне. */
.soderzhanie {
  list-style: none; margin: 1.1rem 0 0; padding: 0;
  columns: 3; column-gap: 2rem;
}
.soderzhanie li { break-inside: avoid; margin-bottom: .5rem; }
.soderzhanie a {
  display: grid; grid-template-columns: 1.6rem 1fr; gap: .25rem;
  align-items: baseline; font-size: .92rem; color: var(--tekst2); text-decoration: none;
}
.soderzhanie a:hover { color: var(--akcentT); }
.soderzhanie-nomer { color: var(--tekst3); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .soderzhanie { columns: 2; } }
@media (max-width: 560px) { .soderzhanie { columns: 1; } }

/* Якорь под липкой шапкой: без этого переход по ссылке вида «#документы»
   уводит заголовок ПОД шапку, и человек видит середину абзаца вместо
   начала раздела. Правило общее — якорей на сайте больше одного. */
[id] { scroll-margin-top: 5.5rem; }

/* Сетка на фоне — как у Cloudbeds, только тише */
.setka-fona {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image:
    linear-gradient(var(--linia) 1px, transparent 1px),
    linear-gradient(90deg, var(--linia) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(80% 60% at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(80% 60% at 50% 0%, #000 20%, transparent 75%);
}

/* Продукт уходит за край экрана — приём linear/attio */
.pribor-krupno {
  position: relative;
  perspective: 1600px;
}
.pribor-krupno .pribor {
  transform: rotateY(-9deg) rotateX(3deg) translateZ(0);
  transform-origin: left center;
  width: 118%;
}
@media (max-width: 60rem) { .pribor-krupno .pribor { transform: none; width: 100%; } }

/* Липкий разбор: панель стоит, рассказ рядом меняет её состояние */
.lipkiy { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.lipkiy-panel { position: sticky; top: calc(var(--vysota-shapki) + 2rem); }
.lipkiy-shagi { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.lipkiy-shag {
  padding: 1.35rem 1.5rem; border-radius: var(--skruglenie);
  border: 1px solid transparent; background: transparent;
  transition: background .3s var(--plavno), border-color .3s var(--plavno), opacity .3s;
  opacity: .5;
}
.lipkiy-shag.aktiven { opacity: 1; background: var(--fon2); border-color: var(--linia); }
.lipkiy-shag h3 { margin-bottom: .4rem; }
:where(.lipkiy-shag) p { color: var(--tekst2); font-size: .97rem; }
.lipkiy-nomer { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tekst3); display: block; margin-bottom: .5rem; }
.lipkiy-shag.aktiven .lipkiy-nomer { color: var(--akcentT); }

/* Финальный призыв */
.prizyv {
  border-radius: clamp(18px, 3vw, 28px); overflow: hidden; position: relative;
  background: linear-gradient(145deg, var(--fon3), var(--fon2));
  border: 1px solid var(--linia);
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 4rem);
  text-align: center;
}
.prizyv::before {
  content: ''; position: absolute; inset: auto -20% -60% -20%; height: 100%;
  background: radial-gradient(50% 100% at 50% 100%, color-mix(in srgb, var(--akcent) 22%, transparent), transparent 70%);
  pointer-events: none;
}
.prizyv > * { position: relative; }
.prizyv .knopki { justify-content: center; margin-top: 2rem; }

/* --- 10. Подвал -------------------------------------------------------- */
.podval { background: var(--fon2); border-top: 1px solid var(--linia); padding-block: clamp(3rem, 5vw, 4.5rem) 2rem; }
.podval-setka { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0,1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.podval h4 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tekst3); font-weight: 500; margin-bottom: .9rem; }
.podval ul { display: grid; gap: .55rem; list-style: none; margin: 0; padding: 0; }
.podval a { color: var(--tekst2); text-decoration: none; font-size: .93rem; }
.podval a:hover { color: var(--akcentT); }
.podval-niz { margin-top: clamp(2rem,4vw,3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--linia); display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; font-size: .84rem; color: var(--tekst3); }
.podval-o { max-width: 22rem; }
.podval-o p { font-size: .9rem; color: var(--tekst2); margin-top: .9rem; }

/* --- 11. Движение ------------------------------------------------------ */
.yavis { opacity: 0; transform: translateY(22px); }
.yavis.vidno {
  opacity: 1; transform: none;
  transition: opacity .7s var(--plavno) var(--zad, 0s), transform .7s var(--plavno) var(--zad, 0s);
}
@media (prefers-reduced-motion: reduce) {
  .yavis { opacity: 1; transform: none; transition: none; }
  .bron, .karta, .knopka { transition: none !important; }
}
/* Плавный вход страницы — переходы между страницами не мигают белым */
@keyframes vhod { from { opacity: 0; } to { opacity: 1; } }
body { animation: vhod .32s var(--plavno) both; }
@media (prefers-reduced-motion: reduce) { body { animation: none; } }

/* --- 12. Телефон и планшет --------------------------------------------- */
@media (max-width: 64rem) {
  .setka-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .polosa-cifr { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .setka-2-1, .setka-1-2, .geroy-setka, .lipkiy, .schitalka { grid-template-columns: 1fr; }
  .lipkiy-panel { position: static; }
  .podval-setka { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .podval-o { grid-column: 1 / -1; max-width: none; }
}
/* 🔴 Промежуточная полоса, 06.09. Пункты меню перестали переноситься —
   и на ноутбуке 1024 шапка поехала за край: кнопку «14 дней бесплатно»
   срезало вертикальным краем экрана. Кнопку, ради которой сделан сайт.
   Здесь шапка ужимается: меньше отступы, теснее пункты — и всё влезает
   без бургера. Проверено снимками на 1024, 1180 и 1440 точках. */
@media (max-width: 78rem) {
  .shapka-vnutri { gap: 1rem; }
  .menyu { gap: 0; }
  .menyu-knopka, .menyu > li > a:not(.knopka) { padding-inline: .5rem; font-size: .9rem; }
  .spravo { gap: .4rem; }
}

/* 62rem, а не 52: с шестью пунктами меню шапка становится тесной уже
   около 990 точек — раньше, чем перестают помещаться колонки. */
/* 🔴 Бургер включается на 68rem (1088 точек), а не на 62. Проверено
   снимками: с семью пунктами и без переносов меню помещается целиком
   только с 1090 точек. На 1000 и 1024 кнопку «14 дней бесплатно»
   срезало краем экрана — молча, потому что срезает её сам браузер,
   а не вёрстка. Колонки текста ломаются по-прежнему на 62rem: это
   про длину строки, а не про шапку, и мешать их в одно правило нельзя. */
@media (max-width: 68rem) {
  .burger { display: grid; }
  .menyu { display: none; }
  /* Вправо строку шапки растягивало само меню (у него margin-left: auto).
     Меню спрятали — и кнопки сбились в левый угол, а половина шапки
     стояла пустой. Заметно на планшете; на телефоне ряд и так во всю
     ширину, поэтому это жило незамеченным. */
  .spravo { margin-left: auto; }

  /* Меню на телефоне — выдвижная панель, а не выпадашка под пальцем */
  .menyu.telefon-otkryto {
    display: block; position: fixed; inset: var(--vysota-shapki) 0 0 0;
    background: var(--fon); border-top: 1px solid var(--linia);
    padding: 1.25rem var(--otstup) 4rem; overflow-y: auto; margin: 0;
  }
  .menyu.telefon-otkryto > li { border-bottom: 1px solid var(--linia); }
  .menyu.telefon-otkryto > li > a:not(.knopka),
  .menyu.telefon-otkryto .menyu-knopka { width: 100%; justify-content: space-between; padding: 1rem .25rem; font-size: 1.05rem; }
  .menyu.telefon-otkryto .bolshoe-menyu {
    position: static; translate: none; opacity: 1; visibility: visible;
    min-width: 0; box-shadow: none; border: 0; background: none;
    grid-template-columns: 1fr; padding: 0 0 .75rem; display: none;
  }
  .menyu.telefon-otkryto .bolshoe-menyu.otkryto { display: grid; }
  .menyu.telefon-otkryto .punkt-menyu { padding-left: .25rem; }
  .menyu.telefon-otkryto .menyu-knopki {
    display: grid; gap: .6rem; border-bottom: 0; padding-top: 1.25rem;
  }
  .menyu.telefon-otkryto .menyu-knopki .knopka { width: 100%; }
}

@media (max-width: 62rem) {
  .setka-2, .setka-3 { grid-template-columns: 1fr; }
  /* В шапке телефона остаётся знак, тема, бургер и одна кнопка.
     «Войти» уезжает в меню: на 390 px четыре кнопки в ряд не помещаются. */
  .spravo .vhod { display: none; }
  .spravo .knopka { padding-inline: .8rem; font-size: .85rem; }
  .shapka-vnutri { gap: .75rem; }
}

/* 🔴 Грабли 05.09: на экране 375 px ряд в шапке не помещался, и бургер
   уезжал за правый край — правым краем 389 при окне 375. Прокрутки вбок
   у страницы нет (и правильно), поэтому кнопка просто исчезала:
   на половине телефонов меню было НЕДОСТИЖИМО, а выглядело это как
   «сайт без меню». Ниже 30rem из шапки уходит и кнопка пробы —
   она ждёт внутри меню, вместе с «Войти». */
@media (max-width: 30rem) {
  .spravo .knopka { display: none; }
  .shapka-vnutri { gap: .5rem; }
}
@media (max-width: 40rem) {
  .polosa-cifr { grid-template-columns: 1fr 1fr; }
  .podval-setka { grid-template-columns: 1fr; }
  .knopki .knopka { width: 100%; }
  .geroy .knopki { flex-direction: column; align-items: stretch; }
}

/* Печать: человек распечатывает страницу закона и несёт бухгалтеру */
@media print {
  .shapka, .podval, .prizyv, .knopki, .setka-fona { display: none !important; }
  body { background: #fff; color: #000; }
  .razdel { padding-block: 1rem; }
  .yavis { opacity: 1 !important; transform: none !important; }
}

/* Скрытое состояние липкой панели */
[hidden] { display: none !important; }