/* ============================================================
   AVANZATO — Home redesign · "Httpster" light minimalism
   Белый фон · гигантский жирный гротеск · оранжевый акцент ·
   много воздуха · тонкие hairline-линии · сетка карточек.
   Всё ограничено body, чтобы не задеть
   остальные страницы, делящие main.css.
   ============================================================ */

body {
  /* ----- новая светлая палитра ----- */
  --bg:         #ffffff;
  --bg-2:       #f6f5f2;
  --surface:    #f6f5f2;
  --ink:        #0a0a0a;
  /* 0.55 давал 4.4:1 — на волос ниже нормы WCAG AA (4.5). 0.60 → 5.25:1 */
  --ink-2:      rgba(10, 10, 10, 0.60);
  --ink-3:      rgba(10, 10, 10, 0.38);
  --hairline:   rgba(10, 10, 10, 0.12);
  --hairline-2: rgba(10, 10, 10, 0.06);
  --tint:       rgba(10, 10, 10, 0.04);
  --accent:     #ff4d00;
  --accent-2:   #ff6a2b;
  /* Фирменный #ff4d00 на белом даёт 3.33:1 — этого хватает крупному тексту
     (норма 3:1), но не мелкому (норма 4.5:1). Затемнённый вариант — 5.3:1
     на белом и 4.9:1 на бежевой подложке --surface, то есть проходит на обеих.
     Используется только там, где акцентом набран текст мельче 24px. */
  --accent-text: #c73600;
  --accent-ink: #0a0a0a;
  --seal:       #ff4d00;

  --radius:    2px;
  --radius-lg: 6px;

  --font-display: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-sans:    "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  /* --font-serif убран: ссылался на Playfair Display, который нигде не
     подключён, и сам токен не использовался ни в одном правиле. */

  background: var(--bg);
  color: var(--ink);
  letter-spacing: -0.011em;
}

/* убираем тёплые декоративные слои прежней темы */
body .ambient,
body .hero-grid { display: none !important; }

/* ============================================================
   Навигация — пилюля из матового стекла по центру (десктоп + мобайл)
   ============================================================ */
/* убираем прежний фон-подложку шапки — у пилюли свой фон */
body .navwrap::before { display: none; }
body .navwrap { padding: 16px var(--gutter); }

body .nav {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 8px 10px 8px 22px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
          backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid rgba(10, 10, 10, 0.08);
  box-shadow: 0 10px 34px rgba(10, 10, 10, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
body .navwrap.scrolled .nav { padding: 8px 10px 8px 22px; }

/* бренд слева внутри пилюли */
body .nav-brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  flex: 0 0 auto;
  transition: opacity .3s var(--ease);
}
body .nav-brand:hover { opacity: 0.6; }
body .nav-brand img { display: block; height: 15px; width: auto; }

body .nav .nav-links { gap: clamp(4px, 1.4vw, 20px); }
body .nav a.link {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-2);
  padding: 8px 12px;
  border-radius: 100px;
  transition: color .35s var(--ease), background .35s var(--ease);
}
body .nav a.link.active,
body .nav a.link:hover { color: var(--ink); background: rgba(10, 10, 10, 0.05); }
body .nav a.link::after,
body .navwrap .nav-ind { display: none; }

/* бургер внутри пилюли */
body .burger {
  width: 40px; height: 40px; margin-right: 0;
  border-color: rgba(10, 10, 10, 0.1);
  background: rgba(10, 10, 10, 0.03);
}
body .burger:hover { border-color: rgba(10, 10, 10, 0.25); background: rgba(10, 10, 10, 0.05); }
body .burger span { background: var(--ink); }
body.nav-open .burger span:nth-child(1),
body.nav-open .burger span:nth-child(3) { background: var(--accent); }

/* ---- мобильное меню: пилюля «распухает» вниз, матовое стекло ---- */
@media (max-width: 720px) {
  body .nav { max-width: none; padding: 8px 8px 8px 20px; }

  body .mobnav {
    inset: auto;
    top: 16px;
    left: var(--gutter);
    right: var(--gutter);
    display: block;
    align-items: stretch;
    background: rgba(246, 245, 242, 0.72);
    -webkit-backdrop-filter: blur(22px) saturate(1.7);
            backdrop-filter: blur(22px) saturate(1.7);
    border: 1px solid rgba(10, 10, 10, 0.08);
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(10, 10, 10, 0.14);
    clip-path: none;
    padding: 70px 8px 14px;
    transform-origin: top right;
    transform: scaleY(0.7);
    opacity: 0; visibility: hidden;
    transition: opacity .35s ease, transform .5s var(--ease), visibility 0s linear .5s;
  }
  body.nav-open .mobnav {
    transform: none; opacity: 1; visibility: visible;
    transition: opacity .3s ease, transform .55s var(--ease), visibility 0s;
  }
  body .mobnav-inner { padding: 0 16px; }
  body .mobnav-links { gap: 2px; }
  body .mlink { width: 100%; padding: 11px 6px; gap: 12px; border-radius: 14px; }
  body .mlink:hover,
  body .mlink.active { background: rgba(10, 10, 10, 0.04); }
  body .mlink::before { width: 7px; height: 7px; background: var(--accent); }
  body .mlink-t {
    font-family: var(--font-display); font-weight: 500;
    font-size: 26px; line-height: 1.1; letter-spacing: -0.01em;
  }
}

/* ============================================================
   HERO — гигантский гротеск во весь экран, как на httpster
   ============================================================ */
/* единый вертикальный ритм: одинаковый «воздух» между всеми секциями */
body {
  --gap: clamp(78px, 10vw, 132px);
}
body .hero {
  min-height: auto;
  padding: clamp(128px, 17vh, 188px) 0 0;
  display: block;
}
/* секции получают только верхний отступ = --gap → расстояния симметричны */
body .block {
  padding: var(--gap) 0 0;
}
/* последняя секция (CTA + футер) — симметричный отступ снизу */
body .block:last-of-type {
  padding-bottom: var(--gap);
}

/* оранжевый акцент-надзаголовок («40+ проектов в эфире») */
body .hero-eb {
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(13px, 1.4vw, 16px);
  letter-spacing: 0.01em;
  text-transform: none;
}
body .hero-eb::before { display: none; }

/* сам заголовок: гротеск, очень крупно и плотно */
body .hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(54px, 11vw, 168px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin: clamp(18px, 2.4vw, 34px) 0 0;
}
/* акцентные слова — тот же минималистичный шрифт, только оранжевым */
body .display em,
body .hero-title em,
body .h-section em {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: inherit;
  color: var(--accent);
  letter-spacing: inherit;
}

body .hero-lede {
  font-family: var(--font-sans);
  max-width: 560px;
  margin-top: clamp(26px, 3vw, 40px);
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--ink-2);
}

body .hero-meta {
  border-top: 1px solid var(--hairline);
}
body .hero-meta .stat b {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
}
body .scroll-hint { color: var(--ink-3); }

/* ============================================================
   Заголовки секций
   ============================================================ */
body .section-label .num { color: var(--accent); }
body .section-label .eyebrow { color: var(--ink-2); }

body .h-section {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4.6vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.035em;
}

body .lede { color: var(--ink-2); }

/* ============================================================
   Карточки «Что делаю» — минимал, тонкие линии, оранжевый номер
   ============================================================ */
body .do-grid {
  border-top: 1px solid var(--hairline);
  counter-reset: doNum;
}
body .do-card {
  position: relative;
  padding: clamp(28px, 3vw, 44px) clamp(22px, 2.4vw, 34px) clamp(34px, 4vw, 52px);
  counter-increment: doNum;
  transition: background .4s var(--ease);
}
body .do-card::after { display: none; }
body .do-card .do-n {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--accent);
  font-size: 14px;
}
body .do-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 27px);
  letter-spacing: -0.02em;
}
@media (hover: hover) {
  body .do-card:hover { background: var(--tint); }
  body .do-card:hover h3 { color: var(--accent); }
}

/* ============================================================
   Кнопки — чёрная заливка / контурная, оранжевый ховер
   ============================================================ */
body .btn { border-radius: 100px; font-family: var(--font-display); font-weight: 500; }
body .btn-primary { background: var(--ink); color: #fff; }
body .btn-primary:hover { background: var(--accent); }
body .btn-ghost:hover { border-color: var(--ink); background: var(--tint); }

/* ============================================================
   Портфолио — сетка карточек с подписью снизу (как httpster)
   рамка светлая, без grayscale-«проявления» прежней темы
   ============================================================ */
body .m-frame { background: var(--bg-2); border-radius: var(--radius-lg); }
body .m-frame img { filter: none; }
body .m-item:hover .m-frame img { filter: none; transform: scale(1.05); }
body .m-frame::after { background: var(--bg); }
body .m-num { color: var(--accent); }
body .m-txt b { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }

/* ссылка «смотреть все работы» */
body .work-more { border-top: 1px solid var(--hairline); }
body .work-more-arr { color: var(--accent); }
body .work-more:hover .work-more-t b { color: var(--accent); }

/* ============================================================
   SEO-чипы
   ============================================================ */
/* бесконечная бегущая лента ключевиков (пауза по наведению) */
body .seo-marquee {
  position: relative;
  overflow: hidden;
  margin-top: clamp(40px, 5vw, 64px);
  padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
body .seo-tags {
  margin: 0;
  flex-wrap: nowrap;
  width: max-content;
  gap: 12px;
  animation: seoMarquee 46s linear infinite;
}
body .seo-marquee:hover .seo-tags { animation-play-state: paused; }
body .seo-tags li {
  flex: 0 0 auto;
  font-size: 14px;
  padding: 10px 18px;
  border: 1px solid var(--hairline);
  border-radius: 100px;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
body .seo-tags li:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
@keyframes seoMarquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  body .seo-tags { animation: none; flex-wrap: wrap; width: auto; }
  body .seo-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* ============================================================
   CTA + футер
   ============================================================ */
body .cta {
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}
body .cta::after { background: var(--accent); }
body .cta .eyebrow { color: var(--accent); }

body .footer .brand { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
body .footer nav a:hover { color: var(--accent); }

/* ============================================================
   Мелочи
   ============================================================ */
body .scrollbar { background: var(--accent); }

/* ============================================================
   Правая «лента» из точек (как на httpster) — мини-карта сайтов,
   едет при скролле, сверху и снизу матовое стекло (blur).
   ============================================================ */
.dot-rail {
  position: fixed;
  top: 0;
  right: 0;
  width: 68px;
  height: 100vh;
  height: 100svh;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
  border-left: 1px solid var(--hairline-2);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5));
  /* плавное затухание точек у верхнего и нижнего края */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 11%, #000 89%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 11%, #000 89%, transparent 100%);
}
.dot-rail-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px 9px;
  padding: 14px 13px;
  will-change: transform;
}
.dot-rail-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  justify-self: center;
}
/* оранжевый курсор-индикатор: едет по ленте вслед за скроллом */
.dot-rail-cursor {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 6px;
  background: var(--accent);
  box-shadow: 0 0 14px 2px rgba(255, 77, 0, 0.55);
  pointer-events: none;
  will-change: transform;
  z-index: 2;
}
.dot-rail-cursor::before {
  /* мягкая подсветка точек вокруг курсора */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -22px;
  bottom: -22px;
  background: linear-gradient(180deg, transparent, rgba(255, 77, 0, 0.12), transparent);
}

/* матовое стекло поверх верхней части ленты */
.dot-rail-glass {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 96px;
  pointer-events: none;
  -webkit-backdrop-filter: blur(9px) saturate(1.1);
          backdrop-filter: blur(9px) saturate(1.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
}

/* на средних экранах освобождаем место справа, чтобы контент не уходил под ленту */
@media (min-width: 821px) and (max-width: 1320px) {
  body .wrap { padding-right: calc(var(--gutter) + 60px); }
}
/* мобильная версия: тонкая лента у края, 3 колонки, тоже с курсором */
@media (max-width: 820px) {
  .dot-rail { width: 34px; }
  .dot-rail-track { grid-template-columns: repeat(3, 1fr); gap: 7px 7px; padding: 12px 8px; }
  .dot-rail-dot { width: 6px; height: 6px; }
  .dot-rail-glass { height: 70px; }
  body .wrap { padding-right: calc(var(--gutter) + 30px); }
}
/* короткий импульс полоски, когда из неё «вылетает» блок */
.dot-rail.emit .dot-rail-cursor {
  animation: railEmit .6s var(--ease-soft, cubic-bezier(.22,1,.36,1));
}
@keyframes railEmit {
  0%   { box-shadow: 0 0 14px 2px rgba(255, 77, 0, 0.55); }
  30%  { box-shadow: 0 0 26px 6px rgba(255, 77, 0, 0.85); }
  100% { box-shadow: 0 0 14px 2px rgba(255, 77, 0, 0.55); }
}

@media (prefers-reduced-motion: reduce) {
  .dot-rail-track { transition: none; }
  .dot-rail.emit .dot-rail-cursor { animation: none; }
}

/* ============================================================
   Шоурил — авторский портрет целиком (3:4) + подпись рядом:
   визуальное доказательство «эстетика фото + веб-технологии»
   ============================================================ */
body .showreel { margin: var(--gap) 0 0; }
body .showreel-grid {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 440px);
  gap: clamp(30px, 6vw, 96px);
  align-items: center;
}
body .showreel-media {
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
body .showreel-media picture { display: block; width: 100%; height: 100%; }
body .showreel-media img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; /* соотношение блока = соотношению фото, кадр целиком */
}
body .showreel-line {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 4.6vw, 64px);
  line-height: 1.02; letter-spacing: -0.035em;
  color: var(--ink);
}
body .showreel-line em {
  font-family: var(--font-display);
  font-style: normal; font-weight: inherit;
  color: var(--accent);
  -webkit-text-fill-color: var(--accent); /* перебивает общий фикс [data-anim="words"] em из main.css */
}
body .showreel-sub {
  margin-top: 18px;
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--ink-2);
  max-width: 46ch;
}
body .showreel-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 26px;
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink); text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--hairline);
  transition: border-color .3s var(--ease), gap .3s var(--ease);
}
body .showreel-link svg { color: var(--accent); transition: transform .3s var(--ease); }
body .showreel-link:hover { border-color: var(--accent); gap: 12px; }
body .showreel-link:hover svg { transform: translate(2px, -2px); }
@media (max-width: 860px) {
  body .showreel-grid { grid-template-columns: 1fr; gap: 28px; }
  body .showreel-media { order: -1; max-width: 440px; }
}

/* ============================================================
   Доступность и читаемость (аудит 2026-07)
   Загружается последним, поэтому перекрывает main.css без правок в нём.
   ============================================================ */

/* --- 1. Мелкий акцентный текст: фирменный оранжевый → затемнённый --- */
/* Крупные заголовки с <em> сюда НЕ входят: там оранжевый остаётся прежним. */
body .eyebrow,
body .mobnav-eyebrow,
body .cta .eyebrow,
body .section-label .num,
body .do-card .do-n,
body .m-num,
body .acc-num,
body .tiers-foot a,
body .c-consent-txt a,
body .legal a,
body .cookie-note .cookie-eyebrow,
body .calc-label em,
body .p3-eyebrow,
body .proc-num {
  color: var(--accent-text);
}

/* Подписи сроков в блоке «по шагам» были на --ink-3 (2.56:1) */
body .proc-time { color: var(--ink-2); }

/* Бейдж «Популярный выбор»: белый текст 11px на оранжевой заливке давал 3.33:1.
   Затемняем заливку целиком — на обоих концах градиента белый теперь от 5.3:1. */
body[data-page="pricing"] .tier.featured .tier-badge {
  background: linear-gradient(135deg, var(--accent-text), #a82d00);
}

/* Подпись «Открыть сайт» на карточках портфолио была на --ink-3 (2.56:1) */
body .p3-meta { color: var(--ink-2); }
/* «плавающая» подпись поля, всплывающая при фокусе */
body .field label.lbl-static,
body .field input:focus + label,
body .field input:not(:placeholder-shown) + label,
body .field textarea:focus + label,
body .field textarea:not(:placeholder-shown) + label,
body .field select:focus + label,
body .field select:valid + label {
  color: var(--accent-text);
}

/* --- 2. Подписи полей формы --- */
/* Здесь floating label: до фокуса <label> лежит внутри поля и служит
   единственной подписью. На --ink-3 он давал 2.56:1 — фактически нечитаемо.
   Переводим на --ink-2 (5.25:1); всплывающее состояние описано выше. */
body .field label { color: var(--ink-2); }

/* --- 3. Неактивная кнопка отправки --- */
/* Была залита чёрным с opacity .5 и читалась как сломанная. Теперь это
   явно «ещё не активна»: контур вместо заливки, текст остаётся разборчивым. */
body .c-submit[disabled] {
  opacity: 1;
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--hairline);
  box-shadow: none;
}
body .c-submit[disabled] svg { opacity: .5; }
@media (max-width: 860px) {
  body .c-submit[disabled] { opacity: 1; }
}

/* --- 4. Тап-таргеты --- */
/* Ссылки в шапке и футере были высотой 19–25px при рекомендованных 44px.
   Растим область нажатия вертикальными отступами, визуально ничего не двигая. */
body .nav a.link {
  padding-top: 12px;
  padding-bottom: 12px;
}
body .footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
body .footer nav { row-gap: 0; }

/* --- 5. Утилиты доступности --- */
/* Заголовок есть в структуре страницы, но не показывается: нужен, чтобы
   иерархия не прыгала с h1 сразу на h3. clip-path вместо display:none —
   скринридер такой текст читает, а display:none пропустил бы. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Ссылка «к содержимому»: спрятана за верхним краем экрана и выезжает
   только когда на неё встают клавишей Tab. Мышью её не увидеть. */
.skip-link {
  position: fixed;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 1000;
  padding: 13px 24px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  border-radius: 0 0 10px 10px;
  transition: transform .25s var(--ease);
}
.skip-link:focus-visible {
  transform: translate(-50%, 0);
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}
/* main получает фокус программно после перехода по ссылке — рамка тут лишняя */
main:focus { outline: none; }

/* --- 6. Переносы в заголовках --- */
/* «что-то» в CTA главной ломалось по дефису: «что-» / «то выдающееся?» */
.nowrap { white-space: nowrap; }

/* --- 7. Страница контактов: пустота перед футером --- */
/* Контент заканчивался, дальше шли 150px отступа футера и ещё 84px нижнего
   паддинга секции — футер повисал в середине экрана, страница выглядела
   недовёрстанной. Сжимаем оба отступа: страница закрывается сразу за
   формой. min-height секции больше не нужен — контент выше экрана. */
body[data-page="contacts"] .c-wrap,
body[data-page="404"] .c-wrap {
  min-height: auto;
  padding-bottom: clamp(28px, 4vh, 44px);
}
body[data-page="contacts"] .footer,
body[data-page="404"] .footer {
  margin-top: clamp(52px, 7vw, 84px);
}
/* на 404 контента мало — оставляем секции высоту экрана, чтобы футер
   не уезжал под самый верх, но без прежнего провала перед ним */
body[data-page="404"] .c-wrap { min-height: 78svh; }

/* ============================================================
   Cookie-уведомление — полоса внизу экрана
   Прежняя карточка висела в левом нижнем углу и на всех четырёх страницах
   перекрывала контент: карточки контактов, тариф «Лендинг», кнопки первого
   экрана. Полоса прижата к низу и не закрывает ничего, кроме своей высоты.
   ============================================================ */
body .cookie-note {
  left: 0; right: 0; bottom: 0;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 40px);
  flex-wrap: wrap;
  padding: 16px clamp(20px, 5vw, 56px);
  border: 0;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
          backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 -10px 40px -22px rgba(10, 10, 10, 0.35);
  transform: translateY(100%);
}
body .cookie-note.is-in { transform: none; }
body .cookie-note::before { left: 0; right: 0; }
body .cookie-note .cookie-eyebrow { display: none; }
body .cookie-note .cookie-title {
  display: inline;
  margin: 0 6px 0 0;
  font-size: 15px;
  font-weight: 500;
}
body .cookie-note p {
  display: inline;
  margin: 0;
  font-size: 14px;
}
body .cookie-note .cookie-text { flex: 1 1 420px; max-width: 760px; }
body .cookie-note .cookie-actions { flex: 0 0 auto; gap: 18px; }
body .cookie-note .btn { padding: 11px 22px; font-size: 13.5px; white-space: nowrap; }

@media (max-width: 700px) {
  body .cookie-note {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  }
  /* в колоночном flex базис 420px считается по вертикали и растягивает
     полосу на пол-экрана — сбрасываем рост на мобильном */
  body .cookie-note .cookie-text { flex: 0 0 auto; max-width: none; }
  body .cookie-note .cookie-title { display: block; margin: 0 0 4px; }
  body .cookie-note p { display: block; }
  body .cookie-note .cookie-actions { justify-content: space-between; }
  body .cookie-note .btn { flex: 1 1 auto; justify-content: center; }
}